/* The course pages: the home page and the chapter pages. They use the tokens
   and shared pieces from style.css (buttons, cards, quiz); this file adds the
   course's own parts. */

/* ---------- Chapter colours ---------- */

/* Each chapter has its own colour, different from the four structure colours
   that Bab 4 uses for its demos. */
.accent-bab-1 {
  --accent: #0f766e;
  --accent-text: #115e59;
  --accent-soft: #d7f3ee;
}

.accent-bab-2 {
  --accent: #4338ca;
  --accent-text: #3730a3;
  --accent-soft: #e5e7ff;
}

.accent-bab-3 {
  --accent: #be123c;
  --accent-text: #9f1239;
  --accent-soft: #ffe4e8;
}

.accent-bab-4 {
  --accent: #b45309;
  --accent-text: #92400e;
  --accent-soft: #fdecd3;
}

@media (prefers-color-scheme: dark) {
  .accent-bab-1 {
    --accent: #2dd4bf;
    --accent-text: #5eead4;
    --accent-soft: #0f2e2b;
  }

  .accent-bab-2 {
    --accent: #a5b4fc;
    --accent-text: #c7d2fe;
    --accent-soft: #23244a;
  }

  .accent-bab-3 {
    --accent: #fb7185;
    --accent-text: #fda4af;
    --accent-soft: #3b1520;
  }

  .accent-bab-4 {
    --accent: #fbbf24;
    --accent-text: #fcd34d;
    --accent-soft: #3a2a0c;
  }
}

/* A highlighter pen for key words, and a warm colour for exam tips. */
:root {
  --highlight: #fde68a;
  --on-highlight: #422006;
  --tip-soft: #fef3c7;
  --tip-text: #92400e;
}

@media (prefers-color-scheme: dark) {
  :root {
    --highlight: #854d0e;
    --on-highlight: #fef9c3;
    --tip-soft: #3a2a0c;
    --tip-text: #fcd34d;
  }
}

/* ---------- Bahasa Melayu and Mandarin ---------- */

:lang(zh-Hans) {
  font-family: "Nunito", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", sans-serif;
}

/* The Mandarin helper sits under the BM text, a little quieter. */
.zh {
  display: block;
  margin-top: 2px;
  color: var(--text-muted);
  font-size: 0.94em;
  font-weight: 500;
}

/* Numbered steps inside a text: one step per line, the number in its own column. */
.text-steps {
  display: grid;
  gap: 4px;
  margin: 6px 0;
}

.text-step {
  display: grid;
  grid-template-columns: 1.9em minmax(0, 1fr);
}

.text-step-number {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Beside the BM text in buttons and labels, it keeps their colour. */
.zh--inline {
  display: inline;
  margin: 0 0 0 0.4em;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}

.hero-title .zh,
.chapter-title .zh {
  margin-top: 8px;
  font-size: 0.55em;
  font-weight: 700;
}

.section-title .zh,
.slide-title .zh {
  margin-top: 4px;
  font-size: 0.62em;
  font-weight: 700;
}

.activity-title .zh,
.chapter-card-title .zh,
.technique-name .zh,
.scene-problem .zh,
.model-card .zh {
  font-size: 0.82em;
  font-weight: 700;
}

.quiz-option .zh,
.feedback-right .zh,
.feedback-wrong .zh {
  color: inherit;
  font-weight: 600;
}

/* ---------- Tool buttons: 中文 and Mod Guru ---------- */

.topbar-tools,
.hero-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.hero-tools {
  justify-content: flex-end;
  margin-bottom: 12px;
}

.tool-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
}

.tool-button:hover {
  border-color: var(--accent);
}

.tool-switch {
  position: relative;
  width: 34px;
  height: 20px;
  border-radius: 999px;
  background: var(--text-muted);
  transition: background 0.15s ease;
}

.tool-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--surface);
  transition: transform 0.15s ease;
}

[aria-pressed="true"] > .tool-switch {
  background: var(--accent);
}

[aria-pressed="true"] > .tool-switch::after {
  transform: translateX(14px);
}

/* ---------- Shared course pieces ---------- */

.lesson-note {
  margin: 20px 0;
  padding: 16px 18px;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.lesson-note p {
  margin: 0;
}

.lesson-note .lesson-note-title {
  margin-bottom: 4px;
  color: var(--accent-text);
  font-weight: 800;
}

.lesson-note--tip {
  background: var(--tip-soft);
}

.lesson-note--tip .lesson-note-title {
  color: var(--tip-text);
}

.lesson-note--trap {
  background: var(--danger-soft);
}

.lesson-note--trap .lesson-note-title {
  color: var(--danger);
}

/* A story for small children: playful, so it reads differently from the definitions. */
.lesson-note--story {
  border: 2px dashed var(--accent);
  background: var(--surface);
  font-size: 1.05em;
}

.lesson-text {
  margin: 16px 0;
}

.slide .definition {
  margin: 16px 0;
  padding: 16px 18px;
  border-left: 6px solid var(--accent);
  font-size: 1.05em;
  font-weight: 700;
}

.slide .definition .zh {
  font-weight: 500;
}

/* ---------- Home page ---------- */

.home .hero-title {
  max-width: 22ch;
}

.exam-grid,
.chapter-grid,
.learn-steps {
  display: grid;
  gap: 16px;
  margin: 20px 0 0;
  padding: 0;
  list-style: none;
}

.exam-card,
.learn-step {
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.exam-card p,
.learn-step p {
  margin: 0;
}

.exam-part {
  font-size: 1.25rem;
  font-weight: 800;
}

.chapter-chips,
.exam-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 12px 0;
  padding: 0;
  list-style: none;
}

.chapter-chip {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 800;
}

.exam-tags {
  margin: 0;
}

.exam-tags li {
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 700;
}

.chapter-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px;
  border: 1px solid var(--border);
  border-top: 6px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.chapter-card p {
  margin: 0;
}

.chapter-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.chapter-card-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--accent-soft);
  font-size: 1.9rem;
  line-height: 1;
}

.status {
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.85rem;
  font-weight: 800;
}

.status--ready {
  background: var(--success-soft);
  color: var(--success);
}

.chapter-card-number {
  color: var(--accent-text);
  font-weight: 800;
}

.chapter-card-title {
  margin: 0;
  font-size: 1.35rem;
  font-weight: 800;
}

.chapter-card-extras {
  margin: 0;
  padding: 12px 14px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  list-style: none;
}

.chapter-card-extras a {
  font-weight: 800;
}

/* A chapter's extra pages, under its title (a demo, the teacher's notes). */
.chapter-extras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
  font-weight: 800;
}

/* The home page card that opens "Nota cikgu". */
.notes-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow);
}

.notes-card:hover {
  background: var(--accent-soft);
}

.notes-card-icon {
  font-size: 2.2rem;
  line-height: 1;
}

.notes-card-title {
  display: block;
  color: var(--accent-text);
  font-size: 1.15rem;
  font-weight: 800;
}

.notes-card-text {
  display: block;
  margin-top: 4px;
  color: var(--text-muted);
}

.chapter-card-button {
  align-self: flex-start;
  margin-top: auto;
}

.learn-step-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.learn-step .learn-step-title {
  margin: 10px 0 4px;
  font-size: 1.1rem;
  font-weight: 800;
}

@media (min-width: 560px) {
  .learn-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 720px) {
  .exam-grid,
  .chapter-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 980px) {
  .learn-steps {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Chapter page ---------- */

/* Long code words such as href="https://www.moe.gov.my" wrap instead of
   pushing the page wider than a phone screen. */
.chapter {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px 48px;
  overflow-wrap: break-word;
}

.editor-tasks li {
  overflow-wrap: anywhere;
}

.chapter-hero {
  padding: 40px 0 8px;
}

.chapter-title {
  margin: 0 0 12px;
  font-size: clamp(1.9rem, 5.5vw, 3rem);
  font-weight: 800;
  line-height: 1.15;
}

.chapter-goals {
  margin: 0 0 24px;
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.chapter-goals .chapter-goals-title {
  margin: 0 0 8px;
  font-weight: 800;
}

.chapter-goals ul {
  margin: 0;
  padding-left: 1.2em;
}

.chapter-goals li + li {
  margin-top: 8px;
}

.chapter-nav {
  margin-top: 28px;
}

.chapter-nav-title {
  margin: 0 0 10px;
  color: var(--text-muted);
  font-weight: 800;
}

.chapter-nav ol {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.chapter-nav-link {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  height: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
}

.chapter-nav-link:hover {
  border-color: var(--accent);
}

.chapter-nav-number,
.technique-number {
  display: grid;
  flex: none;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 800;
}

/* Each section is a "slide": a card while scrolling, one screen in Mod Guru. */
.slide {
  margin-top: 24px;
  padding: 24px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  scroll-margin-top: 80px;
}

.slide-label {
  display: inline-block;
  margin: 0 0 10px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 800;
}

.slide-title {
  margin: 0 0 8px;
  font-size: clamp(1.6rem, 4.5vw, 2.2rem);
  font-weight: 800;
}

/* "Ajar topik ini": starts Mod Guru at this topic. */
.teach-topic {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  margin: 0 0 14px;
  padding: 6px 16px;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: transparent;
  color: var(--accent-text);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 800;
  cursor: pointer;
}

.teach-topic:hover {
  background: var(--accent-soft);
}

/* The chapter's top bar stays in reach (中文, Mod Guru) while scrolling. */
.topbar--sticky {
  position: sticky;
  top: 0;
  z-index: 15;
}

/* Mod Guru moves focus to the title so screen readers start there; it is not a control. */
.slide-title:focus {
  outline: none;
}

.slide-term {
  margin: 0 0 16px;
  color: var(--text-muted);
  font-weight: 700;
}

@media (min-width: 640px) {
  .slide {
    padding: 32px;
  }
}

/* ---------- The four techniques ---------- */

.technique-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 16px 0;
  padding: 0;
  list-style: none;
}

.technique-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  height: 100%;
  padding: 14px;
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.12s ease, transform 0.12s ease;
}

.technique-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.technique-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.technique-icon {
  font-size: 1.8rem;
  line-height: 1;
}

.technique-name {
  margin-top: 6px;
  font-size: 1.1rem;
  font-weight: 800;
}

.technique-en {
  color: var(--text-muted);
  font-size: 0.85rem;
  font-style: italic;
}

.technique-short {
  font-size: 0.95rem;
}

@media (min-width: 760px) {
  .technique-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* ---------- Langkah demi langkah: the step-by-step player ---------- */

.walk {
  margin: 24px 0 0;
  padding: 18px 12px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.walk-hint {
  margin: 0 0 12px;
  color: var(--text-muted);
  font-size: 0.92rem;
}

.walk-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.walk-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 4px 14px 4px 6px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
}

.walk-tab:hover {
  border-color: var(--accent);
}

.walk-tab-number {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-sunken);
  font-weight: 800;
}

.walk-tab[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.walk-tab[aria-pressed="true"] .walk-tab-number {
  background: var(--surface);
  color: var(--accent-text);
}

.walk-stage {
  padding: 18px 12px;
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

/* The story so far: the sentence of this step stands out; later ones wait. */
.walk-narration {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: narration;
}

.walk-narration li {
  padding: 8px 12px;
  border-left: 4px solid var(--border);
  color: var(--text-muted);
  counter-increment: narration;
}

.walk-narration li::before {
  content: counter(narration) ". ";
  font-weight: 800;
}

.walk-narration li.is-now {
  border-left-color: var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
  color: var(--text);
  font-weight: 700;
}

.walk-narration li.is-waiting {
  display: none;
}

.walk-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
}

/* A walkthrough of tall carta alir keeps the sentence of this step and the
   buttons at the bottom of the screen, above the Mod Guru bar. */
.walk--docked .walk-narration {
  display: none;
}

.walk--docked .walk-dock {
  position: sticky;
  bottom: 8px;
  z-index: 5;
  margin-top: 14px;
  padding: 10px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 -6px 18px rgb(15 23 42 / 14%);
}

/* One row: ◀ status ▶, with smaller buttons, so the bar stays short. */
.walk--docked .walk-controls {
  flex-wrap: nowrap;
  margin-top: 10px;
}

.walk--docked .walk-status {
  flex: 1 1 0;
  min-width: 0;
}

.walk--docked .walk-controls .button {
  flex-shrink: 0;
  padding: 8px 14px;
}

.walk-now {
  min-height: 3em;
  margin: 0;
  padding: 8px 12px;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
  font-weight: 700;
}

.walk-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.92rem;
  text-align: center;
}

/* A part of the scene that has not appeared yet keeps its place, so nothing jumps. */
.walk-stage .is-waiting {
  visibility: hidden;
}

.walk-stage .is-now {
  animation: walk-in 0.4s ease both;
}

@keyframes walk-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.97);
  }
}

@media (max-width: 639px) {
  .walk-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

@media (min-width: 640px) {
  .walk {
    padding: 24px;
  }

  .walk-stage {
    padding: 24px;
  }
}

/* ---------- The scenes ---------- */

.scene {
  display: grid;
  justify-items: center;
  gap: 16px;
}

.scene p {
  margin: 0;
}

.scene-icon {
  font-size: 1.5em;
  line-height: 1;
}

.scene-problem {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--accent-soft);
  font-size: 1.1rem;
  font-weight: 800;
}

.scene-badge,
.keyword-answer {
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--success-soft);
  color: var(--success);
  font-weight: 800;
}

/* Leraian: the parts drop out of the problem, then each gets a tick. */
.split-parts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 18px 0 0;
  border-top: 3px dashed var(--accent);
  list-style: none;
}

.split-part {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 14px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 700;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.split-parts.is-now .split-part {
  animation: walk-in 0.4s ease both;
}

.split-parts.is-now .split-part:nth-child(2) {
  animation-delay: 0.1s;
}

.split-parts.is-now .split-part:nth-child(3) {
  animation-delay: 0.2s;
}

.split-parts.is-now .split-part:nth-child(4) {
  animation-delay: 0.3s;
}

.split-parts.is-now .split-part:nth-child(5) {
  animation-delay: 0.4s;
}

.split-check {
  position: absolute;
  top: -10px;
  right: -8px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--success);
  color: var(--on-success);
  font-weight: 800;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.split-part.is-done {
  border-color: var(--success);
  background: var(--success-soft);
}

.split-part.is-done .split-check {
  opacity: 1;
  transform: scale(1);
}

/* Pengecaman corak: rows light up "=" when the same, "≠" when different. */
.scene-compare {
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
}

.compare-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 40px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  width: 100%;
}

.compare-head {
  font-weight: 800;
  text-align: center;
}

.compare-cell {
  height: 100%;
  padding: 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 700;
  text-align: center;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.compare-sign {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  font-size: 1.2rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.compare-row.is-same .compare-cell {
  border-color: var(--success);
  background: var(--success-soft);
}

.compare-row.is-same .compare-sign {
  background: var(--success);
  color: var(--on-success);
  opacity: 1;
}

.compare-row.is-differ .compare-cell {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.compare-row.is-differ .compare-sign {
  background: var(--accent);
  color: var(--on-accent);
  opacity: 1;
}

/* Pengecaman corak with numbers: the jumps appear between them. */
.sequence {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sequence-number {
  display: grid;
  place-items: center;
  min-width: 56px;
  height: 56px;
  padding: 0 8px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.5rem;
  font-weight: 800;
}

.sequence-number--unknown {
  border-style: dashed;
  color: var(--text-muted);
}

.sequence-number--next {
  border-color: var(--success);
  background: var(--success-soft);
  color: var(--success);
}

.sequence-rule {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 800;
}

/* Peniskalaan: important details get a tick; the others fade away. */
.filter-items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.filter-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px 10px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 700;
  text-align: center;
  transition: opacity 0.3s ease, transform 0.3s ease, border-color 0.2s ease, background 0.2s ease;
}

.filter-badge {
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 800;
  visibility: hidden;
}

.filter-item.is-kept {
  border-color: var(--success);
  background: var(--success-soft);
}

.filter-item.is-kept .filter-badge {
  background: var(--success);
  color: var(--on-success);
  visibility: visible;
}

.filter-item.is-dropped {
  opacity: 0.45;
  transform: scale(0.94);
  border-style: dashed;
}

.filter-item.is-dropped .filter-text {
  text-decoration: line-through;
}

.filter-item.is-dropped .filter-badge {
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  visibility: visible;
}

/* Pengitlakan: similar cases → the shared pattern → one model → a new case. */
.model-cases {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.model-case {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  font-weight: 700;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.model-case.is-lit {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.model-common {
  color: var(--text-muted);
  font-style: italic;
  font-weight: 700;
  text-align: center;
}

.model-card {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 14px 20px;
  border: 3px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
  font-size: 1.15rem;
  font-weight: 800;
  text-align: center;
}

.model-label {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.8rem;
}

.model-apply {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border: 2px solid var(--success);
  border-radius: var(--radius);
  background: var(--success-soft);
  font-weight: 700;
}

/* Cara menjawab: key words light up like a highlighter pen. */
.keyword-statement {
  padding: 16px;
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.05rem;
  line-height: 1.7;
}

.keyword {
  padding: 1px 3px;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  transition: background 0.2s ease;
}

.keyword.is-lit {
  background: var(--highlight);
  color: var(--on-highlight);
  font-weight: 800;
}

.keyword-match {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 1.05rem;
}

.keyword-chip {
  padding: 2px 12px;
  border-radius: 999px;
  background: var(--highlight);
  color: var(--on-highlight);
  font-weight: 800;
}

/* Every example starts with its question, so the child thinks before seeing any answer. */
.walk-question {
  display: flex;
  gap: 10px;
  width: 100%;
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: var(--surface);
  font-size: 1.05rem;
  font-weight: 700;
}

/* A question quoting code wraps it on a narrow screen. */
.walk-question > span {
  min-width: 0;
  overflow-wrap: anywhere;
}

/* Cuba fikir and Kajian kes: working steps, then the answer. */

.reveal-pictures {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* A tinted card, so white emoji such as 🤍 stay visible in light mode. */
.reveal-picture {
  display: grid;
  justify-items: center;
  gap: 6px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--accent-soft);
}

.reveal-picture-art {
  display: grid;
  justify-items: center;
  font-size: 1.5rem;
  line-height: 1.15;
}

.reveal-picture-label {
  font-size: 0.85rem;
  font-weight: 800;
  text-align: center;
}

.reveal-steps {
  display: grid;
  gap: 8px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.reveal-step {
  display: grid;
  justify-items: start;
  gap: 6px;
  min-width: 0;
  padding: 10px 14px;
  border-left: 5px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--surface);
  font-weight: 700;
}

/* Long code in a step, such as <option value="TWICE">, wraps instead of widening the page. */
.scene-reveal > *,
.reveal-step > * {
  min-width: 0;
  max-width: 100%;
}

.reveal-show {
  overflow-wrap: anywhere;
}

/* What the question gives (a sample output, a table): there from step 1. */
.reveal-given {
  display: grid;
  justify-items: start;
  gap: 8px;
  width: 100%;
  min-width: 0;
  padding: 10px 14px;
  border: 2px dashed var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.reveal-tag {
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-size: 0.82rem;
  font-weight: 800;
}

.reveal-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.reveal-table {
  border-collapse: collapse;
  font-size: 0.95rem;
}

.reveal-table th,
.reveal-table td {
  padding: 6px 12px;
  border: 1px solid var(--border-strong);
  text-align: center;
}

.reveal-table th {
  background: var(--surface-sunken);
}

.reveal-answer {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--success);
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--success);
  font-size: 1.1rem;
  font-weight: 800;
}

.reveal-answer strong {
  color: var(--text);
}

/* ---------- Bab 2 scenes: numbers, pictures and sounds ---------- */

.number-table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

.number-table {
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

.number-table th,
.number-table td {
  min-width: 40px;
  padding: 8px 10px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  text-align: center;
  transition: background 0.2s ease, color 0.2s ease;
}

.number-table th {
  background: var(--surface-sunken);
  font-size: 0.85rem;
  text-align: left;
}

.number-places td {
  color: var(--accent-text);
  font-weight: 800;
}

.number-digits td {
  font-size: 1.3rem;
  font-weight: 800;
}

.number-table .digit--1 {
  background: var(--accent-soft);
  color: var(--accent-text);
}

.number-table .digit--0 {
  color: var(--text-muted);
}

.number-products td {
  font-size: 0.85rem;
  white-space: nowrap;
}

/* The column being worked on lights up. */
.number-table td.is-focus {
  background: var(--highlight);
  color: var(--on-highlight);
  font-weight: 800;
}

.division-table td {
  min-width: 80px;
}

.division-last td {
  background: var(--tip-soft);
}

.number-table .remainder {
  font-size: 1.2rem;
  font-weight: 800;
}

.number-table .remainder.is-read {
  background: var(--highlight);
  color: var(--on-highlight);
}

/* Column sums: carries and borrows sit small above the digits. */
.column-table th,
.column-table td {
  min-width: 36px;
  border: 0;
  background: transparent;
  font-size: 1.4rem;
  font-weight: 800;
}

.column-carries td,
.column-borrows td {
  color: var(--danger);
  font-size: 0.95rem;
}

.column-bottom td,
.column-bottom th {
  border-bottom: 3px solid var(--text);
}

.column-result td {
  color: var(--success);
}

.working-line {
  font-size: 1.1rem;
  font-weight: 700;
  text-align: center;
}

.working-answer {
  width: 100%;
  padding: 12px 16px;
  border: 2px solid var(--success);
  border-radius: var(--radius);
  background: var(--success-soft);
  font-weight: 800;
  text-align: center;
}

.take-away-lines {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  font-size: 1.15rem;
  font-weight: 700;
  list-style: none;
  text-align: center;
}

/* Imej hitam dan putih: each cell is a pixel. */
.pixel-grid {
  border-collapse: collapse;
}

.pixel {
  width: 32px;
  height: 32px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  font-weight: 800;
  text-align: center;
  transition: background 0.3s ease, color 0.3s ease;
}

.pixel--1.is-painted {
  background: #111827;
  color: #f9fafb;
}

.pixel--0.is-painted {
  background: #ffffff;
  color: #6b7280;
}

/* Audio digital: the smooth sound and the stepped digital copy. */
.wave-rows {
  display: grid;
  gap: 10px;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.wave-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 4px;
  padding: 10px;
  border-radius: var(--radius);
  background: var(--surface);
}

.wave {
  width: 100%;
  height: auto;
  max-height: 90px;
}

.wave-original {
  fill: none;
  stroke: var(--border-strong);
  stroke-width: 2;
  stroke-dasharray: 4 4;
}

.wave-original--solo {
  stroke: var(--accent);
  stroke-dasharray: none;
  stroke-width: 3;
}

.wave-digital {
  fill: none;
  stroke: var(--accent);
  stroke-width: 3;
  stroke-linejoin: round;
}

.wave-label {
  font-weight: 800;
  text-align: center;
}

@media (min-width: 640px) {
  .wave-row {
    grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
    align-items: center;
  }
}

/* ---------- Bab 2 tools: light switches and ASCII ---------- */

.bit-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
}

.bit {
  display: grid;
  justify-items: center;
  gap: 4px;
  width: 100%;
  min-height: 96px;
  padding: 10px 4px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.bit:hover {
  border-color: var(--accent);
}

.bit-bulb {
  width: 30px;
  height: 30px;
  border: 2px solid var(--border-strong);
  border-radius: 50%;
  background: var(--surface-sunken);
  transition: background 0.15s ease, box-shadow 0.15s ease;
}

.bit[aria-pressed="true"] {
  border-color: var(--accent);
  background: var(--accent-soft);
}

.bit[aria-pressed="true"] .bit-bulb {
  border-color: #ca8a04;
  background: #facc15;
  box-shadow: 0 0 14px 4px rgb(250 204 21 / 60%);
}

.bit-digit {
  font-size: 1.4rem;
  font-weight: 800;
}

.bit-place {
  color: var(--accent-text);
  font-size: 0.85rem;
  font-weight: 800;
}

.bits-result {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 800;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.bits-working {
  min-height: 1.6em;
  margin: 4px 0 16px;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
}

.bits-challenge {
  display: grid;
  gap: 10px;
  padding: 14px;
  border-radius: var(--radius);
  background: var(--surface-sunken);
}

.bits-challenge p {
  margin: 0;
}

.bits-target strong {
  font-size: 1.3rem;
}

@media (min-width: 560px) {
  .bit-row {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }
}

.ascii-label {
  display: block;
  margin-bottom: 6px;
  font-weight: 800;
}

.ascii-input {
  width: 100%;
  max-width: 320px;
  min-height: 48px;
  margin-bottom: 14px;
  padding: 8px 14px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.ascii-input:focus-visible {
  border-color: var(--accent);
}

.ascii-binary {
  font-family: var(--font-mono);
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Bab 3: carta alir and pseudokod ---------- */

/* Unlike the other scenes, these panels fill their column, so long code scrolls inside its box. */
.scene-algorithm,
.scene-web {
  justify-items: stretch;
}

.scene-algorithm > *,
.scene-web > * {
  min-width: 0;
}

/* The carta alir gets the bigger share, so its arrows on the right stay in view. */
@media (min-width: 960px) {
  .scene-algorithm {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* A tall carta alir scrolls sideways on a phone instead of shrinking its text. */
.flow-wrap {
  overflow-x: auto;
}

.flowchart {
  display: block;
  width: auto;
  min-width: 360px;
  max-width: 100%;
  height: auto;
  margin: 0 auto;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
}

.flow-shape {
  fill: var(--surface);
  stroke: var(--border-strong);
  stroke-width: 2;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

.flow-node--terminal .flow-shape {
  fill: var(--accent-soft);
}

.flow-node--decision .flow-shape {
  fill: var(--tip-soft);
}

.flow-text {
  fill: var(--text);
}

.flow-edge path {
  fill: none;
  stroke: var(--text-muted);
  stroke-width: 2;
}

.flow-arrow {
  fill: var(--text-muted);
}

.flow-label {
  fill: var(--text);
  font-size: 12px;
  font-weight: 800;
}

/* The path taken so far, and the symbol the algorithm is at now. */
.flow-node.is-visited .flow-shape,
.flow-node.is-focus .flow-shape {
  stroke: var(--accent);
}

.flow-node.is-focus .flow-shape {
  fill: var(--highlight);
  stroke-width: 3.5;
}

.flow-node.is-focus .flow-text {
  fill: var(--on-highlight);
}

.flow-edge.is-visited path,
.flow-edge.is-focus path {
  stroke: var(--accent);
}

.flow-edge.is-focus path {
  stroke-width: 3.5;
}

.flow-edge.is-visited .flow-arrow,
.flow-edge.is-focus .flow-arrow {
  fill: var(--accent);
}

/* SVG symbols fade in only: a CSS transform would move them off their place. */
.flowchart .is-now {
  animation-name: flow-in;
}

@keyframes flow-in {
  from {
    opacity: 0;
  }
}

.algorithm-label {
  margin: 0 0 6px;
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 800;
}

.algorithm-side .algorithm-label:not(:first-child) {
  margin-top: 16px;
}

.pseudo {
  margin: 0;
  padding: 10px;
  overflow-x: auto;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  list-style: none;
  font-family: var(--font-mono);
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre;
}

.walk-stage .pseudo {
  border: 1px solid var(--border);
  background: var(--surface);
}

.pseudo li {
  padding: 1px 8px;
  border-radius: 6px;
  transition: background 0.2s ease;
}

.pseudo li.is-focus {
  background: var(--highlight);
  color: var(--on-highlight);
  font-weight: 800;
}

/* A numbered algorithm reads like the exam paper, not like code. */
.pseudo--steps {
  padding-left: 2.4em;
  list-style: decimal;
  font-family: var(--font);
  font-size: 1rem;
  white-space: normal;
}

.pseudo--steps li {
  padding: 4px 8px;
}

.trace-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  font-variant-numeric: tabular-nums;
}

.trace-table th,
.trace-table td {
  padding: 5px 8px;
  border: 1px solid var(--border-strong);
  text-align: center;
}

.trace-table thead th {
  background: var(--surface-sunken);
}

.trace-table tbody th {
  min-width: 8em;
  font-weight: 600;
  text-align: left;
}

.trace-result {
  white-space: nowrap;
}

.trace-table tr.is-focus td,
.trace-table tr.is-focus th {
  background: var(--highlight);
  color: var(--on-highlight);
}

/* The table of carta alir symbols. */
.flow-symbol {
  display: block;
  width: 96px;
  height: auto;
}

.flow-symbol .flow-edge path {
  stroke: var(--text);
}

.flow-symbol .flow-arrow {
  fill: var(--text);
}

/* ---------- Bab 4: HTML code and the browser drawing ---------- */

@media (min-width: 900px) {
  .scene-web {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}

.code-tag {
  color: var(--accent-text);
  font-weight: 700;
}

.pseudo li.is-focus .code-tag {
  color: inherit;
}

.mock-browser {
  overflow: hidden;
  margin: 0;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
}

.mock-caption {
  padding: 6px 12px;
  border-top: 1px solid var(--border);
  background: var(--surface-sunken);
  color: var(--text-muted);
  font-size: 0.8rem;
}

.mock-bar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 10px 0;
  background: var(--surface-sunken);
}

.mock-dots {
  display: flex;
  gap: 5px;
  padding-bottom: 10px;
}

.mock-dots span {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--border-strong);
}

.mock-tab {
  min-width: 0;
  max-width: 70%;
  padding: 6px 14px;
  overflow: hidden;
  border-radius: 8px 8px 0 0;
  background: var(--surface);
  font-size: 0.88rem;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-tab-title.is-focus {
  background: var(--highlight);
  color: var(--on-highlight);
}

/* The page inside the drawing uses a plain look, like a page with no styles. */
.mock-page {
  display: grid;
  gap: 6px;
  min-height: 120px;
  padding: 14px 16px;
  color: var(--text);
  font-family: "Times New Roman", Times, serif;
}

.mock-page > * {
  margin: 0;
  border-radius: 4px;
  transition: background 0.2s ease;
}

.mock-page > .is-focus {
  background: var(--highlight);
  color: var(--on-highlight);
}

.mock-h {
  font-weight: 700;
  line-height: 1.2;
}

.mock-h1 { font-size: 2em; }
.mock-h2 { font-size: 1.5em; }
.mock-h3 { font-size: 1.17em; }
.mock-h4 { font-size: 1em; }
.mock-h5 { font-size: 0.83em; }
.mock-h6 { font-size: 0.67em; }

.mock-li {
  display: list-item;
  margin-left: 1.6em;
  list-style: disc;
}

.mock-link {
  color: #1d4ed8;
  text-decoration: underline;
}

@media (prefers-color-scheme: dark) {
  .mock-link {
    color: #93c5fd;
  }
}

.mock-img {
  display: inline-grid;
  justify-items: center;
  width: fit-content;
  padding: 10px 18px;
  border: 1px dashed var(--border-strong);
  background: var(--surface-sunken);
  font-family: var(--font);
}

.mock-img--link {
  border: 2px solid #1d4ed8;
}

.mock-img-icon {
  font-size: 2.6rem;
  line-height: 1.1;
}

.mock-img-name {
  font-family: var(--font-mono);
  font-size: 0.8rem;
}

.mock-banner {
  padding: 10px 14px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-family: var(--font);
  font-size: 1.3rem;
  font-weight: 800;
}

/* An empty pull-down (before any <option>) still looks like a box. */
.mock-select {
  min-width: 6em;
  text-align: right;
}

.mock-select,
.mock-button {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--border-strong);
  border-radius: 4px;
  background: var(--surface-sunken);
  font-family: var(--font);
  font-size: 0.95rem;
}

.mock-textarea {
  width: min(100%, 260px);
  height: 64px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
}

.mock-frames {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 160px;
}

.mock-frames--cols {
  flex-direction: row;
}

.mock-frames > * {
  flex: 1 1 0;
}

.mock-frames .mock-frames {
  min-height: 0;
}

/* A frame's share of the space, as in rows="30%,70%". */
.mock-frames > .mock-size-20 { flex-grow: 20; }
.mock-frames > .mock-size-30 { flex-grow: 30; }
.mock-frames > .mock-size-70 { flex-grow: 70; }
.mock-frames > .mock-size-80 { flex-grow: 80; }

/* A frame's name is a label on the sketch, so it looks like one. */
.mock-frame {
  display: grid;
  place-items: center;
  padding: 4px;
  border: 2px dashed var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font);
  font-size: 0.85rem;
  font-style: italic;
  text-align: center;
}

.lesson-link {
  margin: 18px 0;
  padding: 14px 16px;
  border: 2px dashed var(--accent);
  border-radius: var(--radius);
}

.lesson-link .lesson-text {
  margin: 0 0 10px;
}

/* The editor: Notepad beside the browser. */
.editor-tasks {
  margin: 0 0 12px;
  padding-left: 1.4em;
}

.editor {
  display: grid;
  gap: 14px;
}

@media (min-width: 900px) {
  .editor {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.editor .algorithm-label {
  display: block;
}

.editor-input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 320px;
  padding: 10px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  color: var(--text);
  font-family: var(--font-mono);
  font-size: 0.92rem;
  line-height: 1.5;
  resize: vertical;
  tab-size: 2;
}

.editor-input:focus-visible {
  border-color: var(--accent);
}

.editor-note {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}

.editor-frame {
  display: block;
  width: 100%;
  height: 290px;
  border: 0;
  background: #fff;
}

/* ---------- The end of a question group ---------- */

.quiz-end {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-top: 16px;
}

.quiz-recap {
  flex: 1 1 18em;
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--success-soft);
  color: var(--text);
  font-weight: 700;
}

/* The options a solved question no longer offers. */
.quiz-option:disabled {
  opacity: 0.55;
  cursor: default;
}

/* ---------- Nota cikgu ---------- */

.notes-progress {
  display: inline-block;
  margin: 8px 0 0;
  padding: 6px 14px;
  border-radius: 999px;
  background: var(--accent-soft);
  font-weight: 800;
}

.notes-list {
  display: grid;
  gap: 18px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.notes-page {
  padding: 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  scroll-margin-top: 80px;
}

.notes-title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 800;
}

.notes-number {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 1.8em;
  height: 1.8em;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 0.85em;
}

.notes-label {
  margin: 0 0 4px;
  color: var(--accent-text);
  font-size: 0.9rem;
  font-weight: 800;
}

.notes-remember {
  display: grid;
  gap: 8px;
  margin: 0;
  padding-left: 1.3em;
}

.notes-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 0;
}

.notes-done {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  margin-top: 10px;
  font-weight: 800;
  cursor: pointer;
}

.notes-done input {
  width: 22px;
  height: 22px;
  accent-color: var(--accent);
}

/* ---------- Activities ---------- */

.activity {
  margin: 24px 0 0;
  padding: 18px 12px;
  border: 2px solid var(--accent);
  border-radius: var(--radius-lg);
  background: var(--surface);
}

.activity-kind {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 8px;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 0.85rem;
  font-weight: 800;
}

.activity-title {
  margin: 0 0 6px;
  font-size: 1.3rem;
  font-weight: 800;
}

.activity-prompt {
  margin: 0 0 16px;
  padding: 0;
}

.activity .quiz {
  gap: 12px;
}

.activity .quiz-question {
  padding: 16px;
  border-color: transparent;
  background: var(--surface-sunken);
}

.activity .quiz-score,
.quiz-block .quiz-score {
  margin-top: 4px;
}

.feedback-explanation {
  display: block;
  margin-top: 4px;
  color: var(--text);
  font-weight: 600;
}

.activity-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.activity-feedback {
  min-height: 1.6em;
  margin-top: 12px;
  font-weight: 700;
}

.activity-feedback p {
  margin: 0;
}

@media (min-width: 640px) {
  .activity {
    padding: 24px;
  }
}

/* Susun langkah: steps the child puts in order. */
.order-list {
  display: grid;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  list-style: none;
  counter-reset: order;
}

.order-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface-sunken);
  counter-increment: order;
}

.order-item::before {
  content: counter(order);
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 800;
}

/* The step's text gives way first, so a long word such as "penyahpepijatan"
   wraps instead of pushing the buttons off a narrow phone. */
.order-text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}

/* The ⠿ handle: drag a step with the mouse or a finger. It does not scroll the page. */
.order-handle {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  min-height: 44px;
  border-radius: var(--radius);
  color: var(--text-muted);
  font-size: 1.4rem;
  cursor: grab;
  touch-action: none;
  user-select: none;
}

.order-handle:hover {
  background: var(--surface);
  color: var(--accent-text);
}

@media (pointer: fine) {
  .order-item {
    cursor: grab;
    user-select: none;
  }
}

.order-item.is-dragging {
  border-color: var(--accent);
  background: var(--accent-soft);
  box-shadow: var(--shadow);
  transform: scale(1.02);
}

.order-item.is-dragging .order-handle {
  cursor: grabbing;
}

.order-set .activity-actions {
  margin-top: 4px;
}

/* Stacked on a phone, so the step text keeps most of the width. */
.order-buttons {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 6px;
}

@media (min-width: 640px) {
  .order-buttons {
    flex-direction: row;
  }
}

.icon-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  cursor: pointer;
}

.icon-button:hover:not(:disabled) {
  border-color: var(--accent);
}

.icon-button:disabled {
  opacity: 0.35;
  cursor: default;
}

.order-item.is-correct {
  border-color: var(--success);
  background: var(--success-soft);
}

.order-item.is-wrong {
  border-color: var(--danger);
  background: var(--danger-soft);
}

.order-item.is-correct::after,
.order-item.is-wrong::after {
  flex: none;
  font-size: 1.2rem;
  font-weight: 800;
}

.order-item.is-correct::after {
  content: "✓";
  color: var(--success);
}

.order-item.is-wrong::after {
  content: "✗";
  color: var(--danger);
}

/* Lengkapkan langkah: numbered steps, some of them blanks to fill in. */
.fill-steps {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: fill;
}

.fill-row {
  position: relative;
  padding: 14px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  counter-increment: fill;
}

/* On a phone the step number sits above the text, so the text keeps the full width. */
.fill-row::before {
  content: counter(fill);
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-bottom: 6px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 800;
}

@media (min-width: 640px) {
  .fill-row {
    padding-left: 58px;
  }

  .fill-row::before {
    position: absolute;
    top: 12px;
    left: 14px;
    margin: 0;
  }
}

.fill-row .quiz-text {
  margin: 4px 0 0;
}

.fill-row--blank {
  border: 2px dashed var(--accent);
  background: var(--surface);
}

.fill-row--blank .quiz-options {
  margin-top: 12px;
}

.blank-line {
  display: inline-block;
  width: 9em;
  max-width: 100%;
  height: 1.2em;
  border-bottom: 3px solid var(--text-muted);
  vertical-align: middle;
}

/* Pengitlakan: pick a drink, see only the marked words change. */
.swap-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
}

.swap-choice {
  position: relative;
}

.swap-choice input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.swap-choice-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 48px;
  padding: 8px 18px;
  border: 2px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface);
  font-weight: 800;
  cursor: pointer;
}

.swap-choice input:checked + .swap-choice-label {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--on-accent);
}

.swap-choice input:focus-visible + .swap-choice-label {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}

.swap-steps {
  margin: 0;
  padding: 16px 16px 16px 2.4em;
  border-radius: var(--radius);
  background: var(--surface-sunken);
  font-size: 1.05rem;
}

.swap-steps li + li {
  margin-top: 8px;
}

.swap-slot {
  padding: 0 6px;
  border-radius: 6px;
  background: var(--accent-soft);
  color: var(--accent-text);
  font-weight: 800;
}

.lesson-table th[scope="row"] {
  min-width: 9em;
  font-weight: 800;
}

/* ---------- Chapter footer ---------- */

.chapter-footer {
  border-top: 1px solid var(--border);
  background: var(--surface);
}

.chapter-footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  max-width: 880px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}

.chapter-footer-next {
  margin: 0;
  color: var(--text-muted);
  font-weight: 700;
}

/* ---------- Mod Guru ---------- */

/* Everything grows a little for screen sharing, code and tables included,
   because they are sized in rem. */
:root:has(> body.is-presenting) {
  font-size: 110%;
}

@media (min-width: 900px) {
  :root:has(> body.is-presenting) {
    font-size: 125%;
  }
}

.is-presenting .chapter-hero,
.is-presenting .chapter-footer,
.is-presenting .topbar,
.is-presenting .teach-topic {
  display: none;
}

.is-presenting .chapter {
  max-width: 1040px;
  padding-bottom: calc(var(--present-bar-height, 140px) + 24px);
}

/* The teaching bar: the sentence of this step, then the controls. The
   controls keep a normal size; only the sentence grows with Mod Guru. */
.present-bar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  border-top: 2px solid var(--accent);
  background: var(--surface);
  box-shadow: 0 -6px 20px rgb(15 23 42 / 14%);
  font-size: 0.8rem;
}

.present-bar-inner {
  display: grid;
  gap: 8px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 16px max(8px, env(safe-area-inset-bottom));
}

.present-now {
  display: grid;
  gap: 4px;
}

.present-status {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.9em;
  font-variant-numeric: tabular-nums;
}

.present-status strong {
  color: var(--text);
}

.present-say,
.present-note {
  max-height: 7em;
  margin: 0;
  padding: 6px 12px;
  overflow-y: auto;
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  background: var(--accent-soft);
  font-size: 1.15em;
  font-weight: 700;
}

.present-note {
  border-left-color: var(--tip-text);
  background: var(--tip-soft);
  font-size: 1em;
}

.present-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.present-topic {
  min-width: 0;
  max-width: 11em;
  min-height: 44px;
  padding: 6px 10px;
  border: 2px solid var(--border-strong);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 700;
}

.present-topic:focus-visible {
  border-color: var(--accent);
}

.present-bar .button,
.present-bar .tool-button {
  min-height: 44px;
  padding: 8px 16px;
  font-size: 1em;
}

.present-bar .present-icon {
  min-width: 44px;
  padding: 8px 12px;
}

.present-tools {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

.present-keys {
  margin: 0;
  color: var(--text-muted);
  font-size: 0.85em;
  text-align: center;
}

@media (max-width: 1099px) {
  .present-keys {
    display: none;
  }
}

/* The example the bar plays is marked, so the teacher knows which one moves. */
.is-presenting .walk.is-active-walk {
  box-shadow: 0 0 0 4px var(--accent-soft);
}

/* In Mod Guru the bar does the stepping and shows the sentence, so each
   example's own buttons and sentence list step aside. The docked bar of a
   carta alir is only hidden from sight: its sentence is still read aloud. */
.is-presenting .walk-hint,
.is-presenting .walk-narration,
.is-presenting .walk-controls {
  display: none;
}

.is-presenting .walk--docked .walk-dock {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* The question stays at the top while a tall picture scrolls under it. */
.is-presenting .walk-question {
  position: sticky;
  top: 8px;
  z-index: 3;
  box-shadow: 0 6px 16px rgb(15 23 42 / 12%);
}

/* A carta alir may grow past its drawn size on a big shared screen. */
.is-presenting .flowchart {
  width: 100%;
}

/* On a phone, example choices take one row that scrolls sideways, so the
   question is not pushed down. Each choice keeps its full width (the list
   items are what the row would otherwise squeeze). */
@media (max-width: 639px) {
  .walk-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .walk-tabs > li {
    flex: none;
  }
}

/* On a phone the bar's buttons show only their arrows, and the topic list
   takes its own row. */
@media (max-width: 639px) {
  .present-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .present-topic {
    flex: 1 1 100%;
    max-width: none;
  }

  .present-say,
  .present-note {
    max-height: 6.5em;
  }
}

/* ---------- The 中文 button: hide the Mandarin ---------- */

:root.hide-zh .zh {
  display: none;
}