/*
 * Lesson UI · shared visual layer for the course sessions.
 *
 * The lesson pages currently keep their inline component styles so their
 * interactive exercises remain stable. This layer arrives after those styles
 * and unifies the visual language with the course dashboard.
 */
:root {
  --lesson-bg: #f3f5f8;
  --lesson-surface: #ffffff;
  --lesson-surface-muted: #e9edf3;
  --lesson-ink: #15161a;
  --lesson-muted: #59616f;
  --lesson-border: #dfe4ec;
  --lesson-primary: #1a5fd2;
  --lesson-primary-dark: #1758c8;
  --lesson-brand: #1758c8;
  --lesson-brand-soft: #e9edf3;
  --lesson-success: #18845b;
  --lesson-warning: #b56b14;
  --lesson-shadow: none;
  --lesson-shadow-lg: none;
  --lesson-font-ui: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --lesson-font-display: "IBM Plex Serif", Georgia, serif;
}

html.dark {
  --lesson-bg: #0f1218;
  --lesson-surface: #171b22;
  --lesson-surface-muted: #222832;
  --lesson-ink: #f5f7fb;
  --lesson-muted: #a8b0bf;
  --lesson-border: #303846;
  --lesson-primary: #67a1ff;
  --lesson-primary-dark: #9bc0ff;
  --lesson-brand: #9bc0ff;
  --lesson-brand-soft: #222832;
  --lesson-success: #55d39d;
  --lesson-warning: #f5b35b;
  --lesson-shadow: none;
  --lesson-shadow-lg: none;
}

html { background: var(--lesson-bg); }

body.lesson-page {
  margin: 0;
  min-width: 320px;
  background: var(--lesson-bg);
  color: var(--lesson-ink);
  font-family: var(--lesson-font-ui) !important;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

html.dark body.lesson-page {
  background: var(--lesson-bg);
}

body.lesson-page ::selection { background: #d7e7ff; color: var(--lesson-ink); }
html.dark body.lesson-page ::selection { background: #344d78; color: #fff; }

body.lesson-page .skip-link {
  position: fixed;
  left: 18px;
  top: 10px;
  z-index: 100;
  transform: translateY(-160%);
  padding: 8px 12px;
  background: var(--lesson-ink);
  color: #fff;
  border-radius: 8px;
  font-family: var(--lesson-font-ui);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease;
}

body.lesson-page .skip-link:focus { transform: translateY(0); }

html.dark body.lesson-page .skip-link { background: #fff; color: #10131a; }

body.lesson-page .coursenav {
  position: sticky !important;
  top: 0 !important;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 54px;
  padding: 10px clamp(18px, 4vw, 48px) !important;
  background: rgb(255 255 255 / .78) !important;
  border-bottom: 1px solid rgb(223 228 236 / .92) !important;
  box-shadow: 0 8px 26px -22px rgb(15 18 26 / .35);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  font-family: var(--lesson-font-ui) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: .01em;
}

body.lesson-page .coursenav a {
  color: var(--lesson-primary-dark) !important;
  text-decoration: none !important;
  transition: color .18s ease, transform .18s ease;
}

body.lesson-page .coursenav a:hover { color: var(--lesson-brand) !important; }
body.lesson-page .coursenav a:focus-visible { outline: 3px solid #9bc0ff; outline-offset: 4px; border-radius: 4px; }

html.dark body.lesson-page .coursenav {
  background: rgb(17 21 29 / .84) !important;
  border-bottom-color: rgb(48 56 70 / .92) !important;
  box-shadow: 0 8px 26px -22px rgb(0 0 0 / .8);
}

body.lesson-page .lesson-nav-meta {
  color: var(--lesson-muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* Right-hand actions of the top bar: help link + theme toggle. */
body.lesson-page .lesson-nav-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

body.lesson-page .help-link,
body.resource-page .help-link,
.topbar .help-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 2.35rem;
  padding: 0 12px;
  border: 1px solid var(--lesson-border, #dfe4ec);
  border-radius: .4rem;
  background: var(--lesson-surface, #fff);
  color: var(--lesson-primary-dark, #1758c8) !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}

body.lesson-page .help-link::before,
body.resource-page .help-link::before,
.topbar .help-link::before {
  content: "?";
  display: inline-grid;
  place-items: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  background: var(--lesson-primary, #2674ed);
  color: #fff;
  font-size: 11px;
  line-height: 1;
}

body.lesson-page .help-link:hover,
body.resource-page .help-link:hover,
.topbar .help-link:hover { border-color: var(--lesson-primary, #2674ed); }

/* «Sessió següent» a la barra superior: mateixa píndola, color de marca. */
body.lesson-page .next-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 2.35rem;
  padding: 0 12px;
  border: 1px solid var(--lesson-primary);
  border-radius: .4rem;
  background: var(--lesson-primary);
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none !important;
  white-space: nowrap;
}
/* Més específic que «.coursenav a», que també porta !important. */
body.lesson-page .coursenav a.next-link { color: #fff !important; }
body.lesson-page .next-link:hover { background: var(--lesson-primary-dark); border-color: var(--lesson-primary-dark); color: #fff !important; }
html.dark body.lesson-page .next-link { background: #285eae; border-color: #285eae; }

/* Índex de passos a la barra (lesson-nav.js). */
body.lesson-page .step-menu { position: relative; flex: none; }
body.lesson-page .step-menu > summary {
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 2.35rem;
  padding: 0 12px;
  border: 1px solid var(--lesson-border);
  border-radius: .4rem;
  background: var(--lesson-surface);
  color: var(--lesson-ink);
  font-family: var(--lesson-font-ui) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  cursor: pointer;
  white-space: nowrap;
}
body.lesson-page .step-menu > summary::-webkit-details-marker { display: none; }
body.lesson-page .step-menu[open] > summary { border-color: var(--lesson-primary); }
body.lesson-page .step-menu-caret { color: var(--lesson-muted); font-size: 11px; }
body.lesson-page .step-menu-short { display: none; }
/* Text llarg dels enllaços de la barra; a mòbil s'amaga. `contents` perquè no compti com a ítem del flex. */
body.lesson-page .nav-long { display: contents; }
body.lesson-page .step-menu-list {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 60;
  width: min(22rem, calc(100vw - 28px));
  padding: 8px;
  border: 1px solid var(--lesson-border);
  border-radius: 8px;
  background: var(--lesson-surface);
  box-shadow: var(--lesson-shadow-lg);
}
body.lesson-page .step-menu-list ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
body.lesson-page .step-menu-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 6px;
  color: var(--lesson-ink) !important;
  font-family: var(--lesson-font-ui);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  text-decoration: none !important;
  white-space: normal;
}
body.lesson-page .step-menu-item:hover { background: var(--lesson-surface-muted); }
body.lesson-page .step-menu-num {
  flex: none;
  display: grid;
  place-items: center;
  width: 1.45rem;
  height: 1.45rem;
  border-radius: 50%;
  background: var(--lesson-surface-muted);
  color: var(--lesson-muted);
  font-size: 11px;
  font-weight: 800;
}
body.lesson-page .step-menu-item.is-open .step-menu-num { background: var(--lesson-primary); color: #fff; }
body.lesson-page .step-menu-item.is-done .step-menu-num { background: #dcf3e6; color: var(--lesson-success); }
body.lesson-page .step-menu-item.is-done .step-menu-num::before { content: "✓"; }
body.lesson-page .step-menu-item.is-done .step-menu-num { font-size: 0; }
body.lesson-page .step-menu-item.is-done .step-menu-num::before { font-size: 11px; }
html.dark body.lesson-page .step-menu-item.is-done .step-menu-num { background: #1f3b2e; }
@media print { body.lesson-page .step-menu { display: none !important; } }

@media (max-width: 640px) {
  /* A mòbil la barra va justa: el text d'«Ajuda» queda com a icona i el següent s'escurça. */
  body.lesson-page .step-menu > summary { padding: 0 9px; }
  body.lesson-page .nav-long, body.lesson-page .step-menu-long { display: none; }
  body.lesson-page .step-menu-short { display: inline; }
  /* El desplegable es col·loca respecte la barra (sticky), no del botó, perquè no surti per l'esquerra. */
  body.lesson-page .step-menu { position: static; }
  body.lesson-page .step-menu-list { top: calc(100% + 4px); right: 14px; }
  body.lesson-page .help-link { font-size: 0; padding: 0 9px; gap: 0; }
  body.lesson-page .help-link::before { font-size: 11px; }
  body.lesson-page .next-link { padding: 0 10px; }
  body.lesson-page .lesson-nav-actions { gap: 7px; }
}

body.lesson-page .wrap {
  width: min(100% - 36px, 1040px);
  max-width: none;
  margin: 0 auto;
  padding: clamp(30px, 6vw, 72px) 0 110px;
}

body.lesson-page header {
  padding: 16px 0 clamp(34px, 5vw, 56px);
  border-bottom: 1px solid var(--lesson-border);
}

body.lesson-page .wrap > .eyebrow,
body.lesson-page header .eyebrow,
body.lesson-page .sectit {
  font-family: var(--lesson-font-ui) !important;
  font-weight: 800 !important;
  letter-spacing: .16em !important;
  text-transform: uppercase;
  color: var(--lesson-brand) !important;
}

/* The step wrapper contains the full lesson content. Keep its summary label
   styled as a control, but never inherit uppercase or tracking into the
   instructions, paragraphs, lists and code inside it. */
body.lesson-page details.step {
  color: var(--lesson-ink);
  font-family: var(--lesson-font-ui);
  letter-spacing: normal;
  text-transform: none;
}

body.lesson-page details.step > summary {
  color: var(--lesson-ink);
  font-family: var(--lesson-font-display) !important;
  font-weight: 700;
  letter-spacing: -.015em;
  text-transform: none;
}

body.lesson-page details.step > summary .timetag,
body.lesson-page details.step > summary .chk,
body.lesson-page details.step > summary .arr {
  font-family: var(--lesson-font-ui) !important;
  letter-spacing: normal;
  text-transform: none;
}

body.lesson-page .wrap > .eyebrow,
body.lesson-page header .eyebrow {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 18px;
  font-size: 11px !important;
}

body.lesson-page .wrap > .eyebrow::before,
body.lesson-page header .eyebrow::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 6px;
  background: var(--lesson-primary);
}

body.lesson-page h1,
body.lesson-page h2,
body.lesson-page h3,
body.lesson-page h4,
body.lesson-page h5,
body.lesson-page summary,
body.lesson-page .dot,
body.lesson-page .ogq,
body.lesson-page .galn {
  font-family: var(--lesson-font-display) !important;
}

body.lesson-page .chip,
body.lesson-page .next,
body.lesson-page .done-btn,
body.lesson-page kbd,
body.lesson-page .pcount,
body.lesson-page .netbadge,
body.lesson-page .kt,
body.lesson-page .pubtag,
body.lesson-page .copybtn,
body.lesson-page .gembtn,
body.lesson-page .opttab,
body.lesson-page .stlab,
body.lesson-page .stchip,
body.lesson-page .starter,
body.lesson-page .ldbtn,
body.lesson-page .galopen,
body.lesson-page #toast {
  font-family: var(--lesson-font-ui) !important;
}

body.lesson-page h1 {
  max-width: 15ch;
  margin: 0 0 18px;
  color: var(--lesson-ink);
  font-size: clamp(2.85rem, 6.4vw, 5.25rem) !important;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.02em;
}

body.lesson-page h1 em,
body.lesson-page h1 .num { color: var(--lesson-primary) !important; font-style: normal; }

body.lesson-page .lede {
  max-width: 68ch;
  margin: 0;
  color: var(--lesson-muted) !important;
  font-family: var(--lesson-font-ui) !important;
  font-size: clamp(1rem, 1.7vw, 1.15rem);
  font-style: normal !important;
  line-height: 1.75;
}

body.lesson-page .lesson-brief {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 26px 0 12px;
  overflow: hidden;
  background: var(--lesson-border);
  border: 1px solid var(--lesson-border);
  border-radius: 8px;
  box-shadow: var(--lesson-shadow);
}

body.lesson-page .lesson-brief > div {
  min-width: 0;
  padding: 16px 17px;
  background: var(--lesson-surface);
}

body.lesson-page .lesson-brief dt {
  margin: 0 0 5px;
  color: var(--lesson-muted);
  font-family: var(--lesson-font-ui);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

body.lesson-page .lesson-brief dd {
  margin: 0;
  color: var(--lesson-ink);
  font-family: var(--lesson-font-ui);
  font-size: 13px;
  font-weight: 650;
  line-height: 1.45;
}

body.lesson-page .lesson-brief .brief-essential dt { color: var(--lesson-primary-dark); }
body.lesson-page .lesson-brief .brief-essential { background: var(--lesson-surface-muted); }
html.dark body.lesson-page .lesson-brief .brief-essential { background: var(--lesson-surface-muted); }

body.lesson-page p { color: var(--lesson-ink); }
body.lesson-page .muted,
body.lesson-page .cap,
body.lesson-page footer { color: var(--lesson-muted) !important; font-family: var(--lesson-font-ui) !important; }
body.lesson-page strong { color: var(--lesson-ink); }

body.lesson-page section {
  padding: clamp(38px, 6vw, 66px) 0 28px;
  border-bottom: 1px solid var(--lesson-border);
}

body.lesson-page section:last-of-type { border-bottom: 0; }

body.lesson-page .step {
  display: block;
  margin-bottom: 8px;
  color: var(--lesson-primary) !important;
  font-size: 11px !important;
}

body.lesson-page h2 {
  margin-bottom: 18px;
  color: var(--lesson-ink);
  font-size: clamp(1.6rem, 3.3vw, 2.35rem) !important;
  font-weight: 700;
  line-height: 1.12;
  letter-spacing: -.015em;
}

body.lesson-page h3 { color: var(--lesson-ink); }

body.lesson-page .note,
body.lesson-page .goldbar,
body.lesson-page .analogy,
body.lesson-page .bridge,
body.lesson-page .recall,
body.lesson-page .keypoint,
body.lesson-page .hint,
body.lesson-page .warn {
  border-radius: 8px;
  box-shadow: var(--lesson-shadow);
}

body.lesson-page .note {
  margin: 30px 0 8px;
  padding: 20px 22px;
  background: var(--lesson-surface);
  border: 1px solid var(--lesson-border);
  border-left: 4px solid var(--lesson-brand);
}

body.lesson-page .note p { margin: 0; font-size: 15px; }
body.lesson-page .note strong { font-family: var(--lesson-font-ui) !important; }

body.lesson-page .goldbar {
  align-items: flex-start;
  margin: 30px 0 10px;
  padding: 18px 20px;
  background: var(--lesson-surface);
  border: 1px solid var(--lesson-border);
  border-left: 3px solid var(--lesson-warning);
  color: var(--lesson-ink);
  box-shadow: none;
}

body.lesson-page .goldbar b { color: var(--lesson-ink); }

body.lesson-page .duo { gap: 18px; margin: 24px 0; }
body.lesson-page .duo .box {
  padding: 22px;
  background: var(--lesson-surface);
  border: 1px solid var(--lesson-border);
  border-radius: 8px;
  box-shadow: var(--lesson-shadow);
}

body.lesson-page .duo .box h3 {
  font-size: 1.2rem;
  line-height: 1.15;
}

body.lesson-page .duo .box p { color: var(--lesson-muted); font-size: 15px; }
body.lesson-page .duo .box.f h3 .dot { background: var(--lesson-primary); }
body.lesson-page .duo .box.b h3 .dot { background: var(--lesson-brand); }

body.lesson-page .analogy {
  margin: 20px 0;
  padding: 17px 20px;
  background: var(--lesson-surface-muted);
  border: 1px solid var(--lesson-border);
  box-shadow: none;
}

body.lesson-page .analogy .tag {
  color: var(--lesson-brand);
  font-family: var(--lesson-font-ui) !important;
  font-weight: 800;
  letter-spacing: .1em;
}

body.lesson-page .analogy p { font-size: 15px; }
body.lesson-page .analogy strong { color: var(--lesson-ink); }
body.lesson-page p .hl { background: linear-gradient(transparent 62%, #cfe0ff 62%); }

body.lesson-page table,
body.lesson-page .outro,
body.lesson-page .gloss,
body.lesson-page .styler,
body.lesson-page .ownguide,
body.lesson-page details.step,
body.lesson-page details.mini {
  border-color: var(--lesson-border);
  border-radius: 8px;
  box-shadow: var(--lesson-shadow);
}

body.lesson-page table,
body.lesson-page .outro,
body.lesson-page .gloss,
body.lesson-page .styler,
body.lesson-page .ownguide,
body.lesson-page details.step,
body.lesson-page details.mini { background: var(--lesson-surface); }

body.lesson-page table { overflow: hidden; }
body.lesson-page thead th { background: var(--lesson-surface-muted); color: var(--lesson-ink); }
body.lesson-page tbody th { color: var(--lesson-muted); font-family: var(--lesson-font-ui) !important; font-style: normal; }
body.lesson-page th,
body.lesson-page td { border-bottom-color: var(--lesson-border); }

body.lesson-page .prep,
body.lesson-page .prompt,
body.lesson-page .starbox,
body.lesson-page .takeaway {
  background: #1d2028;
  border: 1px solid #2c3140;
  border-radius: 8px;
  box-shadow: var(--lesson-shadow-lg);
}

body.lesson-page .prep { padding: 30px 30px 26px; }
body.lesson-page .prep .step { color: #9bc0ff !important; }
body.lesson-page .prep h2,
body.lesson-page .prep p,
body.lesson-page .prep ol.checklist li,
body.lesson-page .prep .ready { color: #f8f9fc; }
body.lesson-page .prep p { color: #c7cad4; }
body.lesson-page ol.checklist li::before { background: var(--lesson-primary); }
body.lesson-page .gloss { padding: 24px 26px; }
body.lesson-page .gloss dt { color: var(--lesson-brand); }
body.lesson-page .gloss dd { color: var(--lesson-muted); }

/* Interactive builder in Session 1 */
body.lesson-page .sectit {
  margin: 48px 0 15px;
  color: var(--lesson-brand) !important;
  font-size: 11px !important;
}

body.lesson-page .sectit::after { background: var(--lesson-border); }
body.lesson-page .picker { gap: 10px; }

body.lesson-page .chip,
body.lesson-page .opttab,
body.lesson-page .acctab,
body.lesson-page .stchip,
body.lesson-page .ideachip {
  border-color: var(--lesson-border);
  background: var(--lesson-surface);
  color: var(--lesson-ink);
}

body.lesson-page .chip:hover,
body.lesson-page .opttab:hover,
body.lesson-page .acctab:hover,
body.lesson-page .stchip:hover,
body.lesson-page .ideachip:hover { border-color: #9dbdf7; }

body.lesson-page .chip.on,
body.lesson-page .opttab.on,
body.lesson-page .acctab.on,
body.lesson-page .ideachip.on {
  background: var(--lesson-primary);
  border-color: var(--lesson-primary);
  color: #fff;
}

body.lesson-page .progress { background: var(--lesson-surface-muted); }
body.lesson-page .bar { background: var(--lesson-primary); }
body.lesson-page details.step[open] { box-shadow: var(--lesson-shadow-lg); }
body.lesson-page details.step summary { color: var(--lesson-ink); }
body.lesson-page summary .dot { background: var(--lesson-surface-muted); color: var(--lesson-muted); }
body.lesson-page details[open] summary .dot { background: var(--lesson-primary); color: #fff; }
body.lesson-page .sb { border-top-color: var(--lesson-border); }
body.lesson-page .sb .lead { color: var(--lesson-ink); }
body.lesson-page .real,
body.lesson-page .bridge { background: var(--lesson-surface); border: 1px solid var(--lesson-border); border-left: 3px solid var(--lesson-success); color: var(--lesson-ink); }
body.lesson-page .bridge.tonext { border-left-color: var(--lesson-primary); }
body.lesson-page .prompt { color: #f2efff; border-color: rgb(255 255 255 / .12); }
body.lesson-page .copybtn,
body.lesson-page .ldbtn,
body.lesson-page .galopen { background: var(--lesson-primary); }
body.lesson-page .copybtn:hover,
body.lesson-page .ldbtn:hover,
body.lesson-page .galopen:hover { background: var(--lesson-primary-dark); }
body.lesson-page .gembtn { border-color: var(--lesson-border); color: var(--lesson-primary-dark); background: var(--lesson-surface); }
body.lesson-page .gembtn:hover { background: var(--lesson-primary-dark); border-color: var(--lesson-primary-dark); color: #fff; }
body.lesson-page input,
body.lesson-page select,
body.lesson-page textarea {
  border-color: var(--lesson-border) !important;
  background: var(--lesson-surface) !important;
  color: var(--lesson-ink) !important;
}
body.lesson-page input:focus,
body.lesson-page select:focus,
body.lesson-page textarea:focus { border-color: var(--lesson-primary) !important; box-shadow: 0 0 0 3px rgb(38 116 237 / .12); }
body.lesson-page .keypoint { background: var(--lesson-surface); border: 1px solid var(--lesson-border); border-left: 3px solid var(--lesson-primary); }
body.lesson-page .keypoint .kt { color: var(--lesson-primary-dark); }
body.lesson-page .warn { background: var(--lesson-surface); border: 1px solid var(--lesson-border); border-left: 3px solid var(--lesson-warning); }
/* Caixes recurrents de seguretat i d'al·lucinacions (abans amb estils inline). */
body.lesson-page .secbox {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin: 30px 0 6px;
  padding: 14px 18px;
  border: 1px solid var(--lesson-border);
  border-left: 3px solid var(--lesson-warning);
  border-radius: 8px;
  background: var(--lesson-surface);
  font-size: 15.5px;
  box-shadow: var(--lesson-shadow);
}
body.lesson-page .secbox-note { margin: 22px 0 6px; border-left-color: var(--lesson-success); }
body.lesson-page .secbox-icon { font-size: 20px; line-height: 1; flex: none; }
body.lesson-page .secbox p { margin: 0; }
body.lesson-page .secbox-title { font-family: var(--lesson-font-display) !important; font-size: 16.5px; color: var(--lesson-primary-dark); }
body.lesson-page .secbox-note .secbox-title { color: var(--lesson-ink); }

/* Autocomprovació (bloc idèntic a les 7 sessions; abans repetit inline). */
body.lesson-page .acq { margin: 30px 0 6px; padding-top: 24px; border-top: 1px dashed var(--lesson-border); }
body.lesson-page .acq h2 { margin: 0 0 6px; font-size: 23px; font-weight: 600; }
body.lesson-page .acq .sub { margin: 0 0 14px; font-size: 15px; }
body.lesson-page .acq ol { margin: 0; padding-left: 22px; }
body.lesson-page .acq li { margin: 9px 0; font-size: 16px; }
body.lesson-page .acq details { margin: 16px 0 0; overflow: hidden; border: 1px solid var(--lesson-border); border-radius: 8px; }
body.lesson-page .acq summary { cursor: pointer; list-style: none; padding: 12px 18px; font-weight: 600; }
body.lesson-page .acq summary::-webkit-details-marker { display: none; }
body.lesson-page .acq details[open] summary { border-bottom: 1px solid var(--lesson-border); }
body.lesson-page .acq .ans { padding: 8px 18px 16px; }
body.lesson-page .acq .ans p { margin: 9px 0; font-size: 15px; color: var(--lesson-ink); }
body.lesson-page .acq { border-top-color: var(--lesson-border) !important; }
body.lesson-page .acq h2 { color: var(--lesson-ink) !important; }
body.lesson-page .acq .sub { color: var(--lesson-muted) !important; font-family: var(--lesson-font-ui) !important; font-style: normal; }
body.lesson-page .acq details { background: var(--lesson-surface); border-color: var(--lesson-border); }
body.lesson-page .acq summary { color: var(--lesson-primary-dark); }
body.lesson-page footer { margin-top: 56px; font-size: 12px; letter-spacing: .02em; }

body.lesson-page .portfolio-note {
  margin: 10px 0 0;
  padding: 10px 13px;
  color: var(--lesson-muted);
  background: var(--lesson-surface-muted);
  border: 1px solid var(--lesson-border);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.45;
}

body.lesson-page .portfolio-note:empty { display: none; }
body.lesson-page .gitem.shared { background: #f4f8ff; border-color: #c5d9fa; }
body.lesson-page .gitem .stage { color: var(--lesson-brand); font-size: 11px; font-weight: 750; }
body.lesson-page .gitem a { color: var(--lesson-primary-dark); font-size: 12px; font-weight: 750; text-decoration: none; }
body.lesson-page .gitem a:hover { text-decoration: underline; }

body.lesson-page .lesson-pagination {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--lesson-border);
}

body.lesson-page .lesson-pagination a {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 88px;
  padding: 17px 19px;
  color: var(--lesson-ink);
  background: var(--lesson-surface);
  border: 1px solid var(--lesson-border);
  border-radius: 8px;
  box-shadow: var(--lesson-shadow);
  font-family: var(--lesson-font-ui);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  text-decoration: none;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

body.lesson-page .lesson-pagination a:hover {
  transform: translateY(-2px);
  border-color: #9dbdf7;
  box-shadow: 0 24px 50px -32px rgb(38 116 237 / .42);
}

body.lesson-page .lesson-pagination .lesson-next { text-align: right; }
body.lesson-page .lesson-pagination small { display: block; margin-bottom: 4px; color: var(--lesson-brand); font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

/* Dark theme: keep the lesson's fixed accent panels readable as well as the
   token-based surfaces above. */
/* The lesson files also carry a small legacy token set (--paper, --card,
   --soft, …). Remap those tokens here so every interactive component gets
   the same dark palette, even when its local CSS predates the shared layer. */
html.dark body.lesson-page {
  --bg: var(--lesson-bg);
  --paper: var(--lesson-surface);
  --card: var(--lesson-surface-muted);
  --ink: var(--lesson-ink);
  --soft: var(--lesson-muted);
  --terra: #67a1ff;
  --deep: #9bc0ff;
  --line: var(--lesson-border);
  --gold: #f5b35b;
  --moss: #55d39d;
  --shadow: var(--lesson-shadow);
}
html.dark body.lesson-page .goldbar {
  background: #2d2518;
  border-color: #6d5228;
  color: #f6d99d;
}
html.dark body.lesson-page .goldbar b { color: #ffd58a; }
html.dark body.lesson-page .note { color: #bfead5; }
html.dark body.lesson-page .secbox-note { background: #17352a; border-color: #2d6a50; color: #bfead5; }
html.dark body.lesson-page .secbox-warn { background: #34211e; border-color: #81473a; color: #f1b8a8; }
html.dark body.lesson-page .secbox .secbox-title { color: #ffd0bc; }
html.dark body.lesson-page .netbadge {
  background: #17352a;
  border-color: #2d6a50;
  color: #9be1c1;
}
html.dark body.lesson-page .timetag {
  background: var(--lesson-surface-muted);
  color: var(--lesson-muted);
}
html.dark body.lesson-page .step.done > summary .timetag {
  background: #1f3b2e;
  color: #9be1c1;
}
html.dark body.lesson-page .next {
  background: var(--lesson-surface-muted);
  color: var(--lesson-primary-dark);
}
html.dark body.lesson-page .next:hover { background: #2c3544; }
html.dark body.lesson-page .done-btn,
html.dark body.lesson-page .gadd button,
html.dark body.lesson-page .loopcta button {
  background: #1f7a55;
  color: #fff;
}
html.dark body.lesson-page .chip.on,
html.dark body.lesson-page .opttab.on,
html.dark body.lesson-page .acctab.on,
html.dark body.lesson-page .ideachip.on,
html.dark body.lesson-page .copybtn,
html.dark body.lesson-page .ldbtn,
html.dark body.lesson-page .galopen {
  background: #285eae;
  border-color: #285eae;
  color: #fff;
}
html.dark body.lesson-page .ag.on,
html.dark body.lesson-page .ref { background: #d4714d; border-color: #d4714d; color: #10131a; }
html.dark body.lesson-page .tg.on {
  background: #285eae;
  border-color: #285eae;
  color: #fff;
}
html.dark body.lesson-page .acq .ans p { color: var(--lesson-ink) !important; }
html.dark body.lesson-page .analogy { background: #202a32; }
html.dark body.lesson-page .real,
html.dark body.lesson-page .bridge {
  background: #172f27;
  border-color: #2d6a50;
  color: #9be1c1;
}
html.dark body.lesson-page .bridge.tonext { background: #302719; border-color: #72582b; color: #f4d79a; }
html.dark body.lesson-page .keypoint { background: #1b2a40; border-color: #355f96; }
html.dark body.lesson-page .keypoint .kt { color: #a8c9ff; }
html.dark body.lesson-page .warn { background: #34211e; border-color: #81473a; color: #f1b8a8; }
html.dark body.lesson-page .gembtn { border-color: #8f70cf; color: #d0b8ff; background: #2c2342; }
html.dark body.lesson-page .gembtn:hover { background: #7a3fd0; color: #fff; }
html.dark body.lesson-page summary .dot { background: #332b4c; color: #d0b8ff; }
html.dark body.lesson-page p .hl { background: linear-gradient(transparent 62%, #36547c 62%); }
html.dark body.lesson-page .lesson-pagination a { background: var(--lesson-surface); }
/* Session 6 still has a few legacy components that use their own light
   variables. Keep their surfaces and text in the same contrast system as
   the rest of the lesson when the global dark theme is active. */
html.dark body.lesson-page .fbox,
html.dark body.lesson-page .ideabox,
html.dark body.lesson-page .chooser,
html.dark body.lesson-page .recall {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-ink);
}
html.dark body.lesson-page .ideabox b { color: var(--lesson-primary-dark); }
html.dark body.lesson-page code {
  background: var(--lesson-surface-muted);
  border-color: var(--lesson-border);
  color: var(--lesson-primary-dark);
}
html.dark body.lesson-page kbd {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-ink);
}
html.dark body.lesson-page .col,
html.dark body.lesson-page .sheetcols .col {
  background: var(--lesson-surface-muted);
  border-color: var(--lesson-border);
  color: var(--lesson-ink);
}
html.dark body.lesson-page .linkbtn,
html.dark body.lesson-page .summary-btn {
  background: var(--lesson-surface);
  border-color: var(--lesson-primary);
  color: var(--lesson-primary-dark);
}
html.dark body.lesson-page .sp {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-ink);
}
html.dark body.lesson-page .sp.bot {
  background: #172f27;
  border-color: #2d6a50;
}
html.dark body.lesson-page .sp.you {
  background: #302719;
  border-color: #72582b;
  color: #f4d79a;
}
html.dark body.lesson-page .gadd input {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-ink);
}
html.dark body.lesson-page .gitem {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-ink);
}
html.dark body.lesson-page .gitem.shared {
  background: #1b2a40;
  border-color: #355f96;
}
html.dark body.lesson-page .gitem .num { color: #ffb08b; }
html.dark body.lesson-page .gitem .x { color: var(--lesson-muted); }
html.dark body.lesson-page .gempty { color: var(--lesson-muted); }
html.dark body.lesson-page .gcount { color: #75d8ab; }
html.dark body.lesson-page .pcard {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
}
html.dark body.lesson-page .pcard.now { background: #172f27; border-color: #4ca77e; }
html.dark body.lesson-page .ptria { background: var(--lesson-surface-muted); }
html.dark body.lesson-page .qbtn {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-muted);
}
html.dark body.lesson-page .qbtn.on { background: #e8edf5; border-color: #e8edf5; color: #10131a; }
html.dark body.lesson-page .result { background: #302719; border-color: #72582b; }
html.dark body.lesson-page .result .rh { color: #ffd58a; }
html.dark body.lesson-page .result b { color: var(--lesson-ink); }
html.dark body.lesson-page .result .why { color: #e2d4bf; }
html.dark body.lesson-page .pp {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-ink);
}
html.dark body.lesson-page .fname {
  background: var(--lesson-surface);
  border-color: var(--lesson-border);
  color: var(--lesson-primary-dark);
}
html.dark body.lesson-page input::placeholder,
html.dark body.lesson-page textarea::placeholder { color: #8e98a9; }

@media (max-width: 640px) {
  body.lesson-page .wrap { width: min(100% - 28px, 1040px); padding-top: 28px; }
  body.lesson-page .coursenav { min-height: 50px; padding-inline: 14px !important; }
  body.lesson-page .lesson-nav-meta { display: none; }
  body.lesson-page .lesson-brief { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.lesson-page h1 { font-size: clamp(2.1rem, 9vw, 3rem) !important; }
  body.lesson-page .duo { grid-template-columns: 1fr; }
  body.lesson-page .prep { padding: 24px 20px 20px; }
  body.lesson-page .note,
  body.lesson-page .goldbar,
  body.lesson-page .analogy { padding-inline: 16px; }
  body.lesson-page .flow { flex-direction: column; }
  body.lesson-page .farr { transform: rotate(90deg); padding: 4px 0; }
  body.lesson-page .lesson-pagination { grid-template-columns: 1fr; }
  body.lesson-page .lesson-pagination .lesson-next { text-align: left; }
}

@media (max-width: 420px) {
  body.lesson-page .lesson-brief { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body.lesson-page *,
  body.lesson-page *::before,
  body.lesson-page *::after { transition-duration: .001ms !important; animation-duration: .001ms !important; }
}

/* Accessibilitat i impressió (abans repetit inline a cada sessió). */
body.lesson-page :focus-visible { outline: 3px solid var(--lesson-primary); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  body.lesson-page *, body.lesson-page *::before, body.lesson-page *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}
@media print {
  body.lesson-page { background: #fff !important; }
  body.lesson-page .coursenav { position: static !important; box-shadow: none; }
  body.lesson-page .lesson-brief { break-inside: avoid; box-shadow: none; }
  body.lesson-page .gembtn, body.lesson-page .copybtn, body.lesson-page .btns, body.lesson-page .opttabs,
  body.lesson-page .tune, body.lesson-page .styler, body.lesson-page .progress, body.lesson-page .picker,
  body.lesson-page .bar, body.lesson-page #toast, body.lesson-page .lesson-pagination { display: none !important; }
  body.lesson-page details:not([open]) > *:not(summary) { display: block !important; }
  body.lesson-page .prompt, body.lesson-page .mdbox { white-space: pre-wrap !important; color: #111 !important; background: #f3f3f3 !important; border: 1px solid #999 !important; }
  body.lesson-page a { color: #000 !important; }
}

/* Contrast en fosc: els botons de color terra porten text fosc (el terra clar no aguanta text blanc). */
html.dark body.lesson-page :is(.ag.on, .ideabtn, .recbadge, .mbtn, #goLearn) { color: #10131a !important; }
/* La maqueta de l'app de la S1 es queda clara també en fosc: el text hi ha de ser fosc. */
html.dark body.lesson-page .mock b { color: #9c4422 !important; }

/* To seriós: sense emojis a la interfície; els contenidors d'icona que queden buits no ocupen lloc. */
body.lesson-page :is(.secbox-icon, .i, .pe, .gale, .fi, .pi, .ri, .ic, .k, .e, .ok, .ldicon, .icon):empty { display: none; }
body.lesson-page :is(.chip, .tg, .ag, .qbtn, .opttab, .acctab, .stchip, .ideachip, .swatch, .pp) { border-radius: 6px !important; font-weight: 500; }
body.lesson-page :is(.timetag, .netbadge, .modn, .cyn, .pubtag) { border-radius: 4px !important; background: var(--lesson-surface-muted) !important; color: var(--lesson-muted) !important; border: 1px solid var(--lesson-border) !important; }
body.lesson-page :is(.real, .aghint, .presnote) { background: var(--lesson-surface) !important; color: var(--lesson-ink) !important; border: 1px solid var(--lesson-border) !important; border-left: 3px solid var(--lesson-border) !important; border-radius: 8px !important; }
body.lesson-page .presnote { border-left-color: var(--lesson-ink) !important; }
body.lesson-page .presnote b { color: var(--lesson-primary-dark) !important; }
body.lesson-page .takeaway b { color: #9bc0ff; }
body.lesson-page .next { background: var(--lesson-surface-muted) !important; color: var(--lesson-primary-dark) !important; }
body.lesson-page .sectit, body.lesson-page .eyebrow { color: var(--lesson-muted) !important; letter-spacing: .08em !important; }
body.lesson-page h1 em { color: inherit !important; }
html.dark body.lesson-page :is(.note, .warn, .keypoint, .bridge, .bridge.tonext, .recall, .goldbar, .secbox, .secbox-note, .real, .aghint, .analogy, .hint) { background: var(--lesson-surface) !important; color: var(--lesson-ink) !important; border-color: var(--lesson-border) !important; }
html.dark body.lesson-page :is(.note, .keypoint, .bridge.tonext, .recall) { border-left-color: var(--lesson-primary) !important; }
html.dark body.lesson-page :is(.warn, .goldbar, .secbox) { border-left-color: var(--lesson-warning) !important; }
html.dark body.lesson-page :is(.bridge, .secbox-note) { border-left-color: var(--lesson-success) !important; }
html.dark body.lesson-page :is(.note, .warn, .keypoint, .bridge, .recall, .goldbar, .secbox) b { color: var(--lesson-ink) !important; }
html.dark body.lesson-page .secbox-title, html.dark body.lesson-page .keypoint .kt { color: var(--lesson-primary-dark) !important; }