/* Textbook lessons (lesson/<grade>/): the book's teal + coral boxes on a white page.
   The page stays light in dark mode, like a printed sheet: the drawings are dark lines. */
.ls-hero { padding: 40px 0 36px; }
.ls-head { display: flex; align-items: center; gap: 22px; }
.ls-badge {
  display: grid; place-items: center; width: 88px; height: 88px; flex: none; border-radius: 16px;
  background: #3b8686; color: #fff; font-size: 44px; font-weight: 700; box-shadow: 0 10px 24px -12px #3b8686;
}
.ls-badge.sm { width: 48px; height: 48px; border-radius: 12px; font-size: 22px; box-shadow: none; }
.ls-kicker { display: block; color: var(--ink-3); font-size: 15px; }
.ls-head h1 { font-size: clamp(28px, 3.6vw, 40px); }
.ls-head h1::after { content: ''; display: block; width: 96px; height: 4px; margin-top: 8px; border-radius: 2px; background: #e8725c; }
.ls-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.chip-draft { background: var(--amber-soft); color: var(--amber); }

.ls { padding: 32px 0 80px; }
.ls-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.ls-layout > * { min-width: 0; }
.ls-side { position: sticky; top: calc(var(--header-h) + 16px); }
.ls-side-box { position: relative; padding: 14px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); max-height: calc(100vh - var(--header-h) - 32px); overflow-y: auto; }
.ls-side-t { margin: 0 6px 6px; font-size: 13px; font-weight: 700; color: var(--ink-3); }
.ls-toc { position: relative; margin: 0 0 10px; padding: 0; list-style: none; }
.ls-toc a { display: block; padding: 6px 8px; border-radius: 9px; color: var(--ink-2); text-decoration: none; font-size: 14.5px; line-height: 1.55; }
.ls-toc a:hover { background: var(--surface-2); color: var(--ink); }
.ls-toc li.sub a { padding-left: 20px; font-size: 13.5px; }
.ls-toc a.here { background: var(--teal-soft); color: var(--teal); font-weight: 600; }
.ls-fx { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 8px; border-radius: 9px; border-top: 1px solid var(--line); color: var(--teal); text-decoration: none; font-size: 14px; font-weight: 600; }
.ls-fx .ic { width: 18px; height: 18px; }

.ls-paper {
  --teal: #3b8686; --teal-d: #2c6464; --coral: #e8725c; --coral-d: #c95a45;
  --lt-teal: #e6f2f0; --lt-coral: #fdeae6; --lt-green: #eef7f1; --lt-amber: #fff8e7; --lt-gray: #f5f3f0;
  --pink: #333333; --muted: #888888; --rule: #d0cece;
  padding: 34px 40px 26px; border-radius: 18px; background: #fff; color: #333; border: 1px solid var(--line);
  box-shadow: var(--shadow-sm); font-size: 16.5px; line-height: 1.95;
}
.ls-paper p { margin: 0 0 .7em; }
.ls-paper h2 {
  margin: 34px 0 14px; padding: 4px 0 4px 14px; border-left: 5px solid var(--coral); color: var(--teal-d);
  font-size: 23px; scroll-margin-top: calc(var(--header-h) + 16px);
}
.ls-paper h3 { margin: 24px 0 8px; color: var(--teal-d); font-size: 19px; scroll-margin-top: calc(var(--header-h) + 16px); }
.ls-paper h4 { margin: 18px 0 6px; color: var(--teal-d); font-size: 16.5px; }
.ls-paper > h2:first-child { margin-top: 0; }
.ls-paper a { color: var(--teal-d); }
.ls-paper .center { text-align: center; }
.ls-paper .right { text-align: right; }
.ls-paper .md { position: relative; margin: .4em 0; overflow-x: auto; overflow-y: hidden; }
.ls-paper .md .katex-display { margin: .25em 0; }
.ls-paper .mi .katex { font-size: 1.06em; }
.ls-paper img.fig { display: inline-block; max-width: 100%; height: auto; vertical-align: middle; }
.ls-paper img.pic { display: inline-block; max-width: 100%; min-width: min(100%, 160px); height: auto; vertical-align: middle; border-radius: 10px; }
.ls-paper .list { margin: .2em 0 .8em; padding-left: 1.5em; }
.ls-paper .list li { margin: .2em 0; }
.ls-paper .list li.nobullet, .ls-paper .list.nobullets > li { list-style: none; }
.ls-paper .list.nobullets { padding-left: .6em; }
.ls-paper ol.alpha { list-style: upper-alpha; }
.ls-paper .li-lbl { font-weight: 700; color: var(--teal-d); margin-right: 4px; }
.ls-paper .tbl { position: relative; margin: 10px 0 14px; overflow-x: auto; }
.ls-paper table { border-collapse: collapse; margin: 0 auto; font-size: 15.5px; line-height: 1.7; }
.ls-paper table.ruled td { border: 1px solid #b9c7c5; padding: 6px 10px; }
.ls-paper table.booktabs { border-top: 2px solid #555; border-bottom: 2px solid #555; }
.ls-paper table.booktabs tr:first-child td { border-bottom: 1px solid #888; font-weight: 700; }
.ls-paper table.booktabs td, .ls-paper table.plain td { padding: 5px 10px; }
.ls-paper td .katex { white-space: nowrap; }
.ls-paper td.sep { color: var(--muted); }
.ls-paper .mp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ls-paper .mp { flex: 1 1 calc(var(--w) - 18px); min-width: 180px; }
.ls-paper .mc { column-count: var(--n); column-width: 200px; column-gap: 28px; }
.ls-paper .mc > * { break-inside: avoid; }
.ls-paper .wrapfig { width: var(--w); min-width: 120px; max-width: 45%; margin: 4px 0 10px 18px; float: right; text-align: center; }
.ls-paper .wrapfig.left { float: left; margin: 4px 18px 10px 0; }
.ls-paper .step { color: var(--coral); }
.ls-paper .fbox { display: inline-block; padding: 0 6px; border: 1px solid #555; }
.ls-paper .cbox { padding: 0 5px; border-radius: 3px; }
.ls-paper .parbox { display: inline-block; vertical-align: middle; }
.ls-paper .sidenote { margin: 8px 0; padding: 8px 12px; border-radius: 8px; background: var(--lt-green); border: 1px solid rgba(59, 134, 134, .3); font-size: 14.5px; }
.ls-paper .divider { height: 0; margin: 26px auto; border: 0; border-top: 1px solid var(--rule); position: relative; overflow: visible; }
.ls-paper .divider::after { content: ''; position: absolute; left: 50%; top: -3px; width: 30px; height: 5px; margin-left: -15px; background: var(--coral); }
.ls-paper .ans-line { display: inline-block; width: 12em; max-width: 100%; height: 1.4em; vertical-align: bottom; border-bottom: 1px dashed #9aa; }
.ls-paper .ans-line.full, .ls-paper .ans-line.fill { width: 100%; }
.ls-paper .fn { color: var(--muted); font-size: .9em; }
.ls-paper blockquote { margin: .6em 0; padding: 6px 16px; border-left: 3px solid var(--rule); color: #555; }
.ls-paper .exgroup h4 { margin-top: 10px; }
.ls-paper hr.lower { margin: 10px 0 12px; border: 0; border-top: 1.5px dashed rgba(59, 134, 134, .45); }

/* boxes */
.bx {
  --bg: #fff; --accent: var(--teal); --title: #333;
  margin: 18px 0; padding: 14px 20px 10px; border-radius: 16px; background: var(--bg);
  border-left: 3px solid var(--accent); box-shadow: 2px 3px 0 rgba(0, 0, 0, .035); overflow: hidden;
}
.bx-h { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--title); font-size: 16px; line-height: 1.6; }
.bx-h b { font-weight: 700; }
.bx-sub { flex-basis: 100%; color: #555; font-weight: 600; font-size: 15.5px; }
.pill { display: inline-grid; place-items: center; min-width: 26px; height: 24px; padding: 0 7px; border-radius: 6px; background: var(--accent); color: #fff; font-size: 13.5px; font-weight: 700; line-height: 1; }
.bx-b > :last-child { margin-bottom: 4px; }
.bx-teal { --bg: var(--lt-teal); --title: var(--teal-d); }
.bx-green { --bg: var(--lt-green); }
.bx-white { --bg: #fff; --title: var(--teal-d); border: 1px solid #e6ecea; border-left: 3px solid var(--accent); }
.bx-amber { --bg: var(--lt-amber); --accent: var(--coral); --title: var(--coral-d); }
.bx-coral { --bg: var(--lt-coral); --accent: var(--coral); --title: var(--coral-d); }
.bx-gray { --bg: var(--lt-gray); }
.bx-try { --bg: #fff; --accent: var(--coral); --title: var(--coral-d); border: 1px solid #f2d9d3; border-left: 3px solid var(--coral); }
.bx-pisa { --bg: #fff; --title: var(--teal-d); border: 1px solid #d5e5e3; border-left: 3px solid var(--teal); }
.bx-pisa > .bx-h b { letter-spacing: .03em; }
.bx-solid { --bg: var(--lt-teal); border: 1px solid var(--teal); padding-top: 0; }
.bx-solid > .bx-h { margin: 0 -20px 10px; padding: 6px 20px; background: var(--teal); color: #fff; }
.bx-sol { --bg: var(--lt-gray); padding-bottom: 12px; }
.bx-sol > summary { cursor: pointer; list-style: none; margin: 0; }
.bx-sol > summary::-webkit-details-marker { display: none; }
.bx-sol > summary::after { content: 'មើលដំណោះស្រាយ ▾'; margin-left: auto; color: var(--teal-d); font-size: 14px; font-weight: 600; }
.bx-sol[open] > summary::after { content: 'លាក់ ▴'; }
.bx-sol[open] > summary { margin-bottom: 8px; }
.pisa-title { margin: 4px 0 8px !important; font-size: 17px !important; }

.ls-pager { display: flex; justify-content: space-between; gap: 14px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); }
.ls-pager a { display: flex; flex-direction: column; max-width: 48%; padding: 10px 16px; border-radius: 12px; border: 1px solid #d5e5e3; text-decoration: none; color: #333; line-height: 1.6; }
.ls-pager a:hover { border-color: #3b8686; background: #f4faf9; }
.ls-pager small { color: #888; }
.ls-pager b { color: #2c6464; }
.ls-pager .next { margin-left: auto; text-align: right; }
.ls-copy { margin: 22px 0 0; color: #888; font-size: 13.5px; line-height: 1.7; }

/* book home */
.book-head { display: flex; align-items: center; gap: 36px; }
.book-cover {
  position: relative; display: flex; flex-direction: column; justify-content: center; flex: none; width: 190px; height: 250px;
  padding: 0 18px 0 46px; border-radius: 8px 14px 14px 8px; background: #fff; color: #2c6464; overflow: hidden;
  box-shadow: 0 24px 40px -18px rgba(16, 42, 67, .45), 0 1px 0 var(--line);
}
.book-cover::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 26px; background: #3b8686; }
.book-cover::after { content: ''; position: absolute; left: 26px; top: 0; bottom: 0; width: 6px; background: #e8725c; }
.book-cover span { font-size: 22px; font-weight: 700; line-height: 1.4; }
.book-cover b { font-size: 30px; line-height: 1.4; }
.book-cover small { color: #e8725c; font-weight: 700; font-size: 16px; }
.book-by { margin: 12px 0 0; color: var(--ink-2); font-size: 15.5px; }
.ls-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.ls-card { display: flex; gap: 14px; align-items: center; padding: 14px 16px; border-radius: 14px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none; transition: transform .15s, border-color .15s; }
.ls-card:hover { transform: translateY(-2px); border-color: #3b8686; color: var(--ink); }
.ls-card-t { display: flex; flex-direction: column; line-height: 1.55; min-width: 0; }
.ls-card-t b { font-size: 16px; }
.ls-card-t small { color: var(--ink-3); font-size: 13px; }
.ls-intro { display: grid; grid-template-columns: 1.1fr 1fr; gap: 44px; align-items: start; }
.ls-intro h2 { font-size: 26px; margin-bottom: 14px; }
.ls-preface p { color: var(--ink-2); }
.ls-preface .greet { color: var(--ink); font-weight: 700; font-size: 18px; }
.ls-preface .sign { color: #e8725c; font-weight: 600; }
.ls-preface .sign b { color: var(--ink); }
.legend { display: grid; gap: 10px; --teal: #3b8686; --teal-d: #2c6464; --coral: #e8725c; --coral-d: #c95a45;
  --lt-teal: #e6f2f0; --lt-coral: #fdeae6; --lt-green: #eef7f1; --lt-amber: #fff8e7; --lt-gray: #f5f3f0; }
.lg { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: center; }
.lg .bx { margin: 0; padding: 10px 14px 4px; }
.lg p { margin: 0; color: var(--ink-2); font-size: 15px; line-height: 1.6; }

@media (max-width: 960px) {
  .ls-layout { grid-template-columns: 1fr; }
  .ls-side { position: static; }
  .ls-side-box { max-height: none; }
  .ls-toc { display: flex; gap: 6px; overflow-x: auto; }
  .ls-toc li { flex: none; }
  .ls-toc a { white-space: nowrap; border: 1px solid var(--line); }
  .ls-cards { grid-template-columns: repeat(2, 1fr); }
  .ls-intro { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ls-paper { padding: 22px 16px 16px; font-size: 16px; border-radius: 14px; }
  .ls-head { gap: 14px; }
  .ls-badge { width: 64px; height: 64px; font-size: 32px; border-radius: 14px; }
  .bx { padding: 12px 14px 8px; }
  .bx-solid > .bx-h { margin: 0 -14px 10px; padding: 6px 14px; }
  .ls-paper .wrapfig { float: none; width: auto; max-width: none; margin: 8px 0; }
  .ls-cards { grid-template-columns: 1fr; }
  .book-head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .book-cover { width: 150px; height: 200px; }
  .lg { grid-template-columns: 1fr; gap: 4px; }
  .ls-pager { flex-direction: column; }
  .ls-pager a { max-width: none; }
}
@media print {
  .ls-hero, .ls-side, .ls-pager { display: none; }
  .ls-layout { display: block; }
  .ls-paper { border: 0; box-shadow: none; padding: 0; }
  .bx-sol > .bx-b { display: block; }
}

/* under each PISA task: try it on the computer, or take all of the lesson's tasks as one test (CBA app) */
.cba-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 16px -4px 0; padding: 12px 14px;
  border-radius: 12px; background: var(--lt-teal); border: 1px dashed #b7d6d2; line-height: 1.6;
}
.cba-bar-t { display: inline-flex; align-items: center; gap: 8px; margin-right: auto; color: var(--teal-d); font-size: 14.5px; font-weight: 600; }
.cba-bar-t .ic { width: 20px; height: 20px; flex: none; }
.cba-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 6px 18px;
  border-radius: 999px; border: 1.5px solid var(--teal); background: #fff; color: var(--teal-d) !important;
  font-size: 15px; font-weight: 700; white-space: nowrap; text-decoration: none; transition: background .15s, transform .15s;
}
.cba-btn:hover { background: #f4faf9; transform: translateY(-1px); }
.cba-btn-full { background: var(--coral); border-color: var(--coral); color: #fff !important; box-shadow: 0 6px 14px -8px var(--coral-d); }
.cba-btn-full:hover { background: var(--coral-d); border-color: var(--coral-d); }
@media (max-width: 640px) {
  .cba-bar-t { width: 100%; margin-right: 0; }
  .cba-btn { flex: 1 1 100%; }
}
@media print { .cba-bar { display: none; } }

/* the report box sits on the always-white lesson paper */
.ls-paper .report { background: #fff8e7; border-color: #f0d9a8; color: #333; }
.ls-paper .report-t span { color: #555; }
.ls-paper .report-i { background: #c9862b; }
.ls-paper .report .btn { background: #3b8686; border-color: #3b8686; color: #fff !important; text-decoration: none; }
.ls-paper .report .btn:hover { background: #2c6464; }