/* 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: var(--c, var(--primary, #3b8686)); color: #fff; font-size: 44px; font-weight: 700;
}
.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: var(--gold, #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 .mc > .list { break-inside: auto; margin-top: 0; }   /* a list set in columns: its items fill the columns */
.ls-paper .mc > .list > li { break-inside: avoid; margin: 0; padding: 2px 0; }
.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; }

/* Grade 7 (lesson/g7/): the answer inside a worked example, the hidden answer of a practice, captions */
.ans-h { display: flex; align-items: center; gap: 10px; margin: 12px 0 6px; color: var(--teal-d); font-weight: 700; font-size: 15.5px; }
.ans-h::after { content: ''; flex: 1; border-top: 1px dashed #c9d6d3; }
details.ans { margin: 10px 0 4px; }
details.ans > summary { display: inline-flex; align-items: center; gap: 6px; padding: 2px 14px; border-radius: 999px; border: 1px solid #f2d9d3; color: var(--coral-d); font-weight: 700; font-size: 14.5px; cursor: pointer; list-style: none; user-select: none; transition: background 0.15s ease, border-color 0.15s ease; }
details.ans > summary:hover { background: #faece8; border-color: #e5b3a8; }
details.ans > summary::-webkit-details-marker { display: none; }
details.ans > summary::before { content: '▸'; }
details.ans[open] > summary::before { content: '▾'; }
details.ans[open] > summary { margin-bottom: 8px; background: #faece8; border-color: #e5b3a8; }
.fig-todo { margin: 10px auto; padding: 16px; max-width: 320px; border: 1.5px dashed #c9d6d3; border-radius: 12px; color: #888; text-align: center; font-size: 14px; }
.caption { text-align: center; color: #666; font-size: 14.5px; }
.book-cover.g7 { color: #1f4f80; }
.book-cover.g7::before { background: #2d6aa8; }
.book-cover.g7::after { background: #c9862b; }
.book-cover.g7 small { color: #c9862b; }
.legend-wide { max-width: 760px; margin-top: 18px; }
@media print { details.ans > * { display: block; } }

/* a picture that has an animation on the construction pages */
/* coming back from the animation, the task above the picture is in view too */
[id^="fig-"] { scroll-margin-top: 42vh; }
.anim-link { margin: 2px 0 14px; text-align: center; }
.anim-link a { display: inline-block; padding: 5px 14px; border-radius: 999px; border: 1.5px solid #2e7a70; color: #226058; background: #e3f1ed; font-size: 14.5px; font-weight: 600; text-decoration: none; }
.anim-link a:hover { background: #2e7a70; color: #fff; }
span.anim-link { display: block; }
@media print { .anim-link { display: none; } }

/* "Test yourself" boxes (static/js/quiz.js) */
.qz { margin: 30px 0 10px; padding: 18px 20px 8px; border-radius: 16px; background: var(--lt-green, #eef7f1); border: 1px solid #cfe5d6; border-left: 5px solid var(--teal); font-size: 16px; line-height: 1.8; }
.qz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 8px; }
.qz-title { margin: 0; color: var(--teal-d); font-size: 19px; font-weight: 700; }
.qz-score { margin-left: auto; padding: 2px 12px; border-radius: 999px; background: #fff; border: 1px solid #cfe5d6; color: var(--teal-d); font-size: 14px; font-weight: 600; }
.qz-intro { margin: 0 0 12px; color: #555; font-size: 15px; }
.qz-q { margin: 0 0 14px; padding: 14px 16px; border-radius: 12px; background: #fff; border: 1px solid #e3e3e3; }
.qz-q.qz-ok { border-color: #8cc9a0; background: #f6fcf8; }
.qz-q.qz-bad { border-color: #eeb3a8; background: #fff8f6; }
.qz-top { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.qz-n { display: inline-grid; place-items: center; min-width: 28px; height: 28px; padding: 0 6px; border-radius: 999px; background: var(--teal); color: #fff; font-size: 14px; font-weight: 700; }
.qz-lv { padding: 0 9px; border-radius: 999px; font-size: 12.5px; font-weight: 600; background: var(--lt-gray, #f5f3f0); color: #666; }
.qz-lv-easy { background: #e6f2f0; color: #2c6464; } .qz-lv-hard { background: #fdeae6; color: #c95a45; } .qz-lv-pisa { background: #fff1d6; color: #a06a00; }
.qz-stem { margin: 4px 0 10px; }
.qz-row { display: flex; align-items: center; gap: 10px; }
.qz-in { width: 190px; max-width: 100%; padding: 8px 12px; border: 1.5px solid #bdbdbd; border-radius: 10px; font: inherit; background: #fff; color: #222; }
.qz-in:focus { outline: 2px solid var(--teal); border-color: var(--teal); }
.qz-unit { color: #555; }
.qz-opts { display: grid; gap: 8px; }
.qz-opt { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border: 1.5px solid #d9d9d9; border-radius: 10px; cursor: pointer; background: #fff; }
.qz-opt:hover { border-color: var(--teal); }
.qz-opt input { accent-color: var(--teal); width: 18px; height: 18px; flex: none; }
.qz-opt.qz-right { border-color: #4a9d68; background: #eaf6ee; }
.qz-bar { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.qz-btn { padding: 7px 18px; border-radius: 999px; border: 1.5px solid var(--teal); font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; background: var(--teal); color: #fff; }
.qz-btn:hover { background: var(--teal-d); }
.qz-ghost { background: #fff; color: var(--teal-d); }
.qz-ghost:hover { background: var(--lt-teal, #e6f2f0); }
.qz-hint, .qz-fb { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 15.5px; }
.qz-hint { background: var(--lt-amber, #fff8e7); }
.qz-fb { background: #f4f4f4; }
.qz-ok .qz-fb > b { color: #2f7d4b; } .qz-bad .qz-fb > b { color: #c95a45; }
.qz-sol { margin-top: 4px; }
.qz-foot { display: flex; justify-content: flex-end; margin: -2px 0 6px; }
.qz-reset { padding: 4px 12px; border-radius: 999px; border: 1px solid #cfe5d6; background: #fff; color: #555; font: inherit; font-size: 13.5px; cursor: pointer; }
.qz-final { border-left-color: var(--coral); background: #fff6f3; border-color: #f2d9d3; }
.qz-final .qz-title { color: var(--coral-d); }
@media (max-width: 600px) { .qz { padding: 14px 12px 6px; } .qz-q { padding: 12px; } .qz-score { margin-left: 0; } }

/* ================================================= Interactive Calculator Widget == */
.calc-wrapper {
  margin: 24px 0 32px;
}
.calc-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px 26px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-sm);
}
@media (min-width: 860px) {
  .calc-card {
    display: grid;
    grid-template-columns: 1fr 340px;
    align-items: start;
    gap: 28px;
    padding: 28px 30px;
  }
}

.calc-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.calc-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  width: fit-content;
  border-radius: 999px;
  background: var(--teal-soft);
  color: var(--teal-strong);
  font-size: 13.5px;
  font-weight: 700;
}
.calc-title {
  margin: 0;
  color: var(--ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.4;
}
.calc-desc {
  margin: 0;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* Sample Quick-Click Buttons */
.calc-samples {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 6px 0 4px;
}
.calc-sample-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: var(--surface-2);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.calc-sample-btn:hover {
  background: var(--teal-soft);
  border-color: var(--teal);
  color: var(--teal-strong);
  transform: translateY(-1px);
}
.calc-sample-btn.active {
  background: var(--teal-soft);
  border-color: var(--teal-strong);
  color: var(--teal-strong);
  box-shadow: 0 0 0 2px rgba(46, 122, 112, 0.2);
}
.sample-tag {
  padding: 2px 7px;
  border-radius: 6px;
  background: var(--teal);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}
.sample-math {
  font-family: 'Kantumruy Pro', sans-serif;
  letter-spacing: 0.2px;
}

/* Guide Banner */
.calc-guide {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--slate-soft, #f0f4f8);
  border: 1px solid var(--line);
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  transition: all 0.3s ease;
}
.calc-guide.success {
  background: #eef8f2;
  border-color: #b5e2c6;
  color: #1e6338;
}
[data-theme="dark"] .calc-guide.success {
  background: #11291d;
  border-color: #1e4a33;
  color: #8be3ab;
}
.calc-guide-icon {
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1.2;
}

/* Calculator Device Container */
.calc-device {
  width: 100%;
  max-width: 340px;
  margin: 0 auto;
  padding: 20px 18px 24px;
  background: linear-gradient(165deg, #2b394a 0%, #1a2533 100%);
  border-radius: 24px;
  box-shadow: 0 16px 36px -8px rgba(10, 25, 45, 0.45), 0 2px 6px rgba(0,0,0,0.1), inset 0 1px 1px rgba(255,255,255,0.15);
  border: 1px solid #3c4e64;
  outline: none;
  user-select: none;
}
.calc-device:focus-visible {
  box-shadow: 0 0 0 3px var(--teal), 0 16px 36px -8px rgba(10, 25, 45, 0.45);
}

.calc-device-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  padding: 0 4px;
}
.calc-brand {
  font-family: system-ui, -apple-system, sans-serif;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 1.2px;
  color: #8fa5bf;
}
.calc-solar {
  display: flex;
  gap: 3px;
  padding: 3px 6px;
  background: #111b26;
  border-radius: 4px;
  border: 1px solid #324458;
}
.calc-solar span {
  width: 9px;
  height: 16px;
  background: linear-gradient(180deg, #382414 0%, #1e130a 100%);
  border-radius: 1px;
}

/* LCD Display */
.calc-screen {
  background: #cdd9ce;
  border: 3px solid #141c24;
  border-radius: 12px;
  padding: 10px 14px;
  margin-bottom: 18px;
  text-align: right;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
  font-family: 'Courier New', Courier, monospace;
}
.calc-history {
  height: 18px;
  font-size: 13px;
  color: #536254;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calc-display {
  font-size: 28px;
  font-weight: 700;
  color: #121c13;
  line-height: 1.2;
  letter-spacing: 0.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Keypad Grid (5 columns) */
.calc-keys {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
}
.calc-key {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 44px;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: transform 0.08s ease, filter 0.08s ease, box-shadow 0.08s ease;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
.calc-key:active, .calc-key.key-active {
  transform: translateY(2px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
  filter: brightness(1.2);
}

/* Key styles */
.calc-key.num {
  background: #f1f4f8;
  color: #1a2736;
}
.calc-key.num:hover {
  background: #ffffff;
}
.calc-key.op-math {
  background: #e99538;
  color: #ffffff;
  font-size: 18px;
}
.calc-key.op-math:hover {
  background: #f3a34a;
}
.calc-key.op-pow {
  background: #2b7a6d;
  color: #ffffff;
  font-size: 14.5px;
}
.calc-key.op-pow:hover {
  background: #348e7f;
}
.calc-key.op-fn {
  background: #cb4e42;
  color: #ffffff;
  font-size: 13.5px;
}
.calc-key.op-fn:hover {
  background: #da584c;
}
.calc-key.op-paren {
  background: #465a73;
  color: #ffffff;
}
.calc-key.op-paren:hover {
  background: #546a85;
}
.calc-key.op-eq {
  background: #256bb4;
  color: #ffffff;
  font-size: 19px;
}
.calc-key.op-eq:hover {
  background: #2f7acc;
}
.calc-key.key-zero {
  grid-column: span 2;
}

/* an app of construct/apps/ in place of a picture (its height is told by the app: static/js/lesson.js) */
.app-inline-wrap { margin: 10px 0 18px; }
.app-inline { display: block; width: 100%; max-width: 820px; height: 560px; margin: 0 auto; border: 0; background: transparent; }

/* the printed page of the textbook, beside a heading */
.ls-paper .pg { float: right; margin-left: 10px; padding: 1px 9px; border: 1px solid var(--line-2); border-radius: 999px; background: var(--surface-2); color: var(--ink-3); font-size: 12.5px; font-weight: 600; line-height: 1.6; }

.ls-paper img.illus { max-width: min(100%, 460px); height: auto; border-radius: 10px; }

/* the rules to remember — «ជាទូទៅ», «វិធាន», «លក្ខណៈ», «ទ្រឹស្តីបទ» ...: a dark panel with gold title */
.ls-paper .bx-rule {
  --accent: #ffd277; margin: 28px 0; padding: 0; overflow: hidden; border: 0; border-radius: 20px; color: #fff;
  background: linear-gradient(135deg, #16324a, #1f5a63); box-shadow: 0 14px 28px -14px rgba(22, 50, 74, .8);
}
.bx-rule > .bx-h { margin: 0; padding: 12px 24px 0; gap: 10px; align-items: center; color: #ffd277; font-size: 20px; flex-wrap: nowrap; }
.bx-rule > .bx-h b { font-weight: 800; }
.bx-rule > .bx-h::after { content: ""; flex: 1; height: 2px; background: linear-gradient(90deg, rgba(255, 210, 119, .45), transparent); }
.bx-rule > .bx-b { padding: 6px 24px 14px; font-size: 17.5px; line-height: 1.95; color: #fff; }
.bx-rule > .bx-b > :first-child { margin-top: 0; }
.bx-rule a { color: #ffd277; }
.bx-rule .md {
  margin: 10px auto; padding: 8px 14px; max-width: 100%; text-align: center; color: #fff;
  background: rgba(255, 255, 255, .1); border: 1.5px solid rgba(255, 210, 119, .6); border-radius: 12px;
}
/* a white example box inside a rule card keeps dark ink (the card's white text was invisible on it) */
.bx-rule .bx { color: #16324a; box-shadow: none; margin: 12px 0; }
.bx-rule .bx .bx-b { color: #16324a; }
.bx-rule .bx .md { color: #16324a; background: none; border: 0; margin: 4px auto; padding: 2px 6px; }
.bx-rule .bx .bx-h { color: var(--teal-d, #1f5a63); }
.bx-rule .list { counter-reset: rl; list-style: none; padding-left: 0; }
.bx-rule .list > li { position: relative; counter-increment: rl; margin: 8px 0; padding-left: 42px; }
.bx-rule .list > li::before {
  content: counter(rl); position: absolute; left: 4px; top: 4px; display: grid; place-items: center; width: 27px; height: 27px;
  border-radius: 50%; background: #ffd277; color: #16324a; font-size: 14.5px; font-weight: 700; line-height: 1;
}
.bx-rule .list > li > p { margin: 0; }
.bx-rule .fig, .bx-rule img.fig { background: #fff; border-radius: 10px; padding: 6px; }
@media (max-width: 640px) { .bx-rule > .bx-b { padding: 6px 16px 12px; font-size: 16.5px; } .bx-rule > .bx-h { padding: 10px 16px 0; } }

.bx-rule > .bx-h .bx-sub { flex-basis: auto; color: #ffe3a6; font-size: 15px; font-weight: 600; }
.bx-rule > .bx-h .bx-sub::before { content: "· "; }

/* Cross multiplication method diagram (វិធីគុណខ្វែង) */
.cross-calc {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.6em auto 0.8em;
  font-size: 1.05em;
  color: inherit;
}
.cross-grid {
  display: grid;
  grid-template-columns: minmax(28px, auto) 80px minmax(28px, auto);
  grid-template-rows: auto auto;
  row-gap: 6px;
  align-items: center;
}
.cross-tl { grid-column: 1; grid-row: 1; justify-self: end; padding-right: 4px; }
.cross-bl { grid-column: 1; grid-row: 2; justify-self: end; padding-right: 4px; }
.cross-tr { grid-column: 3; grid-row: 1; justify-self: start; padding-left: 4px; }
.cross-br { grid-column: 3; grid-row: 2; justify-self: start; padding-left: 4px; }
.cross-arrows {
  grid-column: 2;
  grid-row: 1 / span 2;
  width: 80px;
  height: 40px;
  display: block;
  overflow: visible;
}
.cross-bar {
  width: 100%;
  min-width: 130px;
  max-width: 220px;
  height: 1px;
  background: currentColor;
  opacity: 0.8;
  margin: 4px 0 6px;
}
.cross-eq {
  text-align: center;
}