/* V2 shell and engines. No animations flash; all motions respect the base reduced-motion rule. */
.guide { display:flex; gap:12px; align-items:flex-start; margin-block:16px; }
.guide img { flex:0 0 56px; width:56px; height:56px; }
.guide-bubble { border:1px solid var(--line); border-radius:8px 20px 20px; padding:12px; background:var(--paper-raised); min-width:0; }
.guide-bubble p { margin:6px 0 0; }
.quest-card { border-color:var(--good); margin-block:20px; }
.quest-card h2 { font-size:var(--step-1); }
.mystery-solved { border-top:1px solid var(--line); margin-top:16px; }
.another-way { border-top:1px solid var(--line); padding-block:16px; margin-block:12px; }
.idea-link { display:inline-flex; min-height:44px; align-items:center; padding-block:8px; overflow-wrap:anywhere; }
.sticker-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr)); gap:16px; }
.sticker h2 { font-size:var(--step-1); overflow-wrap:anywhere; }
.sticker-art { display:block; font-size:3rem; color:var(--good); }
.sponsor-card { max-width:420px; padding:16px; margin-block:20px; }
.sponsor-link { display:flex; align-items:center; gap:16px; min-height:64px; }
.sponsor-link img { width:64px; height:64px; object-fit:contain; }
.arabic-meaning { display: block; font-family: 'Noto Naskh Arabic', Tahoma, Arial, sans-serif; font-size: 1rem; font-weight: 400; color: var(--ink-soft); line-height: 1.7; margin-block: 8px; text-align: start; }
.word-list { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: .95rem; }
.word-list th, .word-list td { padding: 12px 6px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.word-list th:first-child { width: 25%; }
.word-list th:last-child { width: 26%; }
.calendar-links, .assessment-toolbar, .print-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-block: 16px; }
.calendar-card h2 { font-size: 1.4rem; }
.book-tag { display: inline-block; color: var(--ink-soft); padding-block: 8px; }
.answer-checklist { border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.answer-checklist label, .answer-toggle { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 8px; cursor: pointer; }
.answer-checklist input, .answer-toggle input { min-width: 44px; min-height: 44px; accent-color: var(--good); }
.model-answer { border-top: 1px solid var(--line); padding-top: 12px; }
.result-item { border-top: 1px solid var(--line); padding-block: 16px; }
.print-sheet { padding: 20px; background: white; color: #18251f; border: 1px solid #ccd4ce; }
.print-sheet h1 { font-size: 1.8rem; }
.print-question { break-inside: avoid; margin-bottom: 24px; }
.print-question img { max-width: 100%; max-height: 180px; }
.answer-lines { height: 72px; background: repeating-linear-gradient(white 0 23px,#d4d9d5 23px 24px); }
.print-answers { break-before: page; }
@page { size: A4; margin: 16mm; }
@media print {
  :root { --ink: #18251f; --ink-soft: #435247; --paper: white; --paper-raised: white; }
  body { background: white; font-size: 11pt; }
  .topbar, .sidebar, .drawer, .skip, .print-toolbar, .breadcrumbs, .page-head, .assessment-toolbar, .assessment, .site-footer { display: none !important; }
  body #main { margin: 0; padding: 0; }
  body .page { max-width: none; margin: 0; }
  .print-sheet { border: 0; padding: 0; }
  .print-sheet h1 { font-size: 20pt; }
  .print-sheet h2 { font-size: 15pt; }
  .print-sheet h3 { font-size: 12pt; }
  .print-answers section { break-inside: avoid; }
  .print-sheet h2, .print-sheet h3 { break-after: avoid; }
  .answer-lines { border-bottom: 1px solid #ccd4ce; }
}
body { overflow-x: visible; }
[hidden] { display: none !important; }
.topbar { height: 64px; padding-inline: 20px; }
.topbar .btn { color: var(--on-stage); padding: 8px; }
.sidebar { position: fixed; top: 64px; bottom: 0; left: 0; width: 260px; overflow-y: auto; padding: 20px 12px; border-right: 1px solid var(--line); background: var(--paper-raised); }
#main { margin-left: 260px; min-width: 0; padding: 24px clamp(16px,3vw,40px) 50px; }
.page { max-width: 1050px; margin: auto; min-width: 0; }
.page > section, .page > div, .lesson-section > * { margin-bottom: 24px; }
.page-head { padding: 20px 0; }
.page-head h1 { max-width: 22ch; }
.sidebar summary, .drawer summary { cursor: pointer; min-height: 48px; padding: 10px 8px; font-weight: 700; line-height: 1.4; }
.sidebar details details, .drawer details details { padding-left: 12px; }
.side-link { display: block; min-height: 44px; padding: 10px 12px; border-radius: 12px; text-decoration: none; line-height: 1.35; overflow-wrap: anywhere; }
.side-link:hover, .side-link.active, .side-link[aria-current] { background: var(--line); }
.side-hubs { margin-top: 20px; border-top: 1px solid var(--line); padding-top: 12px; }
.sidebar-note { padding: 8px; font-size: .95rem; color: var(--ink-soft); }
#menu { display: none !important; }
.drawer { position: fixed; inset: 0 auto 0 0; margin: 0; height: 100dvh; max-height: 100dvh; width: min(320px,90vw); max-width: 90vw; padding: 16px; background: var(--paper-raised); color: var(--ink); border: 0; overflow: auto; }
.drawer::backdrop { background: #102337aa; }
#close-menu { width: 100%; margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(240px,100%),1fr)); gap: 16px; }
.tile { display: flex; padding: 24px; background: var(--paper-raised); border: 1px solid var(--line); border-radius: 22px; text-decoration: none; min-height: 128px; transition: border-color .2s,transform .2s; overflow-wrap: anywhere; }
.tile:hover { border-color: var(--good); transform: translateY(-2px); }
.tile span > strong, .tile span > span { display: block; margin-bottom: 8px; }
.tile strong { font-size: 1.3rem; line-height: 1.25; }
.tile.soon { border-style: dashed; }
.picks { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.picks-label { min-width: 58px; font-weight: 700; }
.pick { min-height: 48px; padding: 8px 18px; border: 2px solid var(--line); border-radius: 999px; background: var(--paper-raised); color: inherit; font: inherit; font-weight: 700; cursor: pointer; }
.pick:hover { border-color: var(--kind,var(--good)); }
.pick[aria-pressed="true"] { background: var(--kind,#10233a); border-color: var(--kind,#10233a); color: #fff; }
.game-count { margin: 4px 0 14px; }
[data-kind="sort"] { --kind: #1f7a55; } [data-kind="match"] { --kind: #6d45b8; } [data-kind="sequence"] { --kind: #b9500f; } [data-kind="quickfire"] { --kind: #1c6aa8; } [data-kind="label"] { --kind: #a8246a; }
.tiles.games { grid-template-columns: repeat(auto-fill,minmax(min(260px,100%),1fr)); }
.tile.game-tile { padding: 0; overflow: hidden; border-top: 6px solid var(--kind,var(--line)); }
.tile.game-tile > span { display: flex; flex-direction: column; width: 100%; }
.tile.game-tile span, .tile.game-tile strong, .tile.game-tile b, .tile.game-tile i { margin: 0; font-style: normal; }
.tile.game-tile .game-art { position: relative; display: block; flex: none; aspect-ratio: 16 / 10; overflow: hidden; background: linear-gradient(135deg,#dff1f7,#f6ecd6); }
.game-art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tile.game-tile .game-kind { position: absolute; left: 0; bottom: 0; display: inline-block; padding: 6px 14px 6px 12px; border-radius: 0 14px 0 0; background: var(--kind,#10233a); color: #fff; font-weight: 700; font-size: .95rem; line-height: 1.2; }
.tile.game-tile .game-kind span { display: inline; }
.tile.game-tile .game-body { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 14px 16px; }
.tile.game-tile strong { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.2rem; line-height: 1.25; }
.tile.game-tile .taste { display: flex; gap: 6px; font-size: .88rem; line-height: 1.25; }
.tile.game-tile .taste b { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tile.game-tile .taste.bins > span { flex: 1; min-width: 0; padding: 12px 6px 8px; border: 2px dashed var(--kind); border-radius: 12px; text-align: center; font-weight: 700; }
.tile.game-tile .taste.pairs, .tile.game-tile .taste.steps, .tile.game-tile .taste.quick { flex-direction: column; }
.tile.game-tile .taste.pairs > span { display: flex; align-items: center; gap: 6px; }
.tile.game-tile .taste.pairs b { padding: 4px 9px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); }
.tile.game-tile .taste.pairs i { color: var(--kind); font-weight: 700; }
.tile.game-tile .taste.steps > span { display: flex; align-items: center; gap: 8px; }
.tile.game-tile .taste.steps i { flex: none; width: 22px; height: 22px; border-radius: 50%; background: var(--kind); color: #fff; font-weight: 700; font-size: .8rem; text-align: center; line-height: 22px; }
.tile.game-tile .taste.quick > b { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.tile.game-tile .taste.quick > span { display: flex; gap: 6px; }
.tile.game-tile .taste.quick i { padding: 3px 12px; border-radius: 999px; font-weight: 700; color: #fff; }
.tile.game-tile .taste.quick .yes { background: #1f7a55; } .tile.game-tile .taste.quick .no { background: #b3372b; }
.tile.game-tile .taste.pins { flex-wrap: wrap; }
.tile.game-tile .taste.pins > span { padding: 4px 9px 4px 8px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); font-weight: 700; }
.tile.game-tile .taste.pins > span::before { content: "● "; color: var(--kind); }
.tile.game-tile .game-foot { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); font-size: .88rem; }
.tile.game-tile .game-foot b { flex: none; padding: 2px 9px; border-radius: 8px; background: var(--paper); border: 1px solid var(--line); }
.tile.game-tile .game-foot span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: .8; }
@media (max-width: 520px) {
  .picks { flex-wrap: nowrap; overflow-x: auto; margin-inline: -16px; padding: 2px 16px 6px; scrollbar-width: none; }
  .picks-label { display: none; }
  .pick { flex: none; min-height: 44px; padding: 6px 14px; }
  .tiles.games { grid-template-columns: 1fr 1fr; gap: 10px; }
  .tile.game-tile { border-radius: 16px; min-height: 0; }
  .tile.game-tile .game-body { padding: 10px; gap: 8px; }
  .tile.game-tile strong { font-size: 1rem; }
  .tile.game-tile .taste { display: none; }
  .tile.game-tile .game-kind { padding: 4px 10px 4px 8px; font-size: .8rem; }
  .tile.game-tile .game-foot { flex-direction: column; align-items: flex-start; gap: 4px; padding-top: 8px; font-size: .78rem; }
  .tile.game-tile .game-foot span { max-width: 100%; }
}
.grade-card:nth-child(2) { background: #e2def5; color: #38335e; }
.grade-card:nth-child(3) { background: #fae6bb; color: #554321; }
.grade-number { font-size: 3rem; font-weight: 700; line-height: 1; }
.surface { background: var(--paper-raised); color: var(--ink); border: 1px solid var(--line); border-radius: 22px; padding: clamp(16px,3vw,28px); min-width: 0; }
.muted { color: var(--ink-soft); font-size: .98rem; }
.tile-icon { font-size: 2rem; }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; padding: 0; margin: 0; list-style: none; font-size: 1rem; }
.breadcrumbs li { display: flex; align-items: center; max-width: 100%; }
.breadcrumbs li + li::before { content: '›'; color: var(--ink-soft); padding: 0 6px; }
.breadcrumbs a { font-size: 1rem; padding: 8px; text-align: left; }
.breadcrumbs [aria-current] { padding: 8px; }
.v2-stepper { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: 8px; margin: 20px 0 24px; }
.step-link { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--line); border-radius: 14px; min-height: 80px; text-decoration: none; padding: 8px 2px; font-size: 1rem; }
.step-link.current { background: var(--stage); color: var(--on-stage); border-color: var(--stage); }
.step-link > span { font-weight: 700; }
.v2-footer { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; border-top: 1px solid var(--line); padding-top: 20px; margin-top: 24px; }
.v2-footer .btn { font-size: 1rem; padding-inline: 16px; }
.lesson-goals summary, .surface summary { min-height: 48px; cursor: pointer; padding-block: 8px; }
.read-card img { max-height: 330px; margin: 16px auto; border-radius: 14px; }
.read-text { font-size: 1.3rem; line-height: 1.85; }
.science-word { display: inline; border: 0; border-bottom: 2px dotted var(--good); padding: 8px 3px; min-height: 44px; background: transparent; font-weight: 700; font-size: inherit; line-height: inherit; cursor: pointer; }
.spoken-word.speaking { background: var(--focus); color: #16222f; border-radius: 5px; box-shadow: 0 0 0 3px var(--focus); }
.glossary-popover { border: 2px solid var(--good); padding: 16px; border-radius: 14px; margin-bottom: 20px; }
select, textarea { font: inherit; color: var(--ink); background: var(--paper-raised); border: 1px solid var(--line); border-radius: 12px; padding: 10px; min-height: 48px; min-width: 0; max-width: 100%; }
textarea { display: block; width: 100%; }
.speed, .filter { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 20px; }
video { display: block; width: 100%; max-height: 540px; background: #102337; border-radius: 14px; }
.question-input { display: grid; gap: 12px; margin-block: 20px; }
.choice { min-width: 44px; min-height: 48px; border: 2px solid var(--line); border-radius: 14px; background: var(--paper-raised); color: var(--ink); padding: 12px 16px; cursor: pointer; text-align: left; overflow-wrap: anywhere; }
.choice[aria-pressed='true'] { border-color: var(--good); background: var(--line); color:var(--ink); box-shadow: inset 4px 0 var(--good); }
.choice-bank { display: flex; flex-wrap: wrap; gap: 10px; }
.drag-label { touch-action: none; cursor: grab; user-select: none; -webkit-user-select: none; }
.drag-ghost { position: fixed; left: 0; top: 0; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing; box-shadow: 0 12px 28px rgba(16,35,55,.3); border-color: var(--good); will-change: transform; }
.drag-from { opacity: .3; }
.choice-bank.drop-zone { min-height: 56px; border-radius: 14px; align-items: center; }
.drop-zone.drop-hot { outline: 3px solid var(--good); outline-offset: 2px; }
.label-target.drop-hot circle { stroke-width: 20; }
.label-target.filled circle { fill: var(--good); }
.label-target.filled text { fill: var(--paper-raised); }
.drop-hint { margin: 0; opacity: .7; }
.answer-order .next-place { min-height: 52px; padding: 12px 16px; border: 2px dashed var(--line); border-radius: 14px; }
.placed-labels li { min-height: 56px; margin-bottom: 6px; border-radius: 14px; }
.placed-labels li::marker { font-weight: 700; }
.match-rows { display: grid; gap: 10px; }
.match-slot { display: flex; align-items: center; min-height: 60px; padding: 4px; border: 2px dashed var(--line); border-radius: 14px; }
.match-slot .choice { width: 100%; }
.match-slot .drop-hint { padding-inline: 10px; }
.sort-placed { display: flex; flex-wrap: wrap; gap: 8px; min-height: 60px; margin-top: 10px; align-content: flex-start; }
.answer-order { padding-left: 28px; }
.answer-order li { margin-bottom: 8px; }
.match-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); align-items: center; gap: 16px; }
.match-row select { width: 100%; }
.feedback { margin-block: 20px; min-height: 1.5em; }
.feedback.correct { color: var(--good); }
.feedback.retry { color: var(--try); }
.stars { font-size: 2.3rem; color: var(--good); letter-spacing: .1em; }
.label-diagram { width: 100%; border: 1px solid var(--line); border-radius: 16px; }
.diagram-background { fill: var(--line); }
.label-target { cursor: pointer; }
.label-target circle { fill: var(--paper-raised); fill-opacity: .92; stroke: var(--good); stroke-width: 8; }
.label-target text { fill: var(--ink); font-family: var(--font); font-size: 55px; font-weight: 700; pointer-events: none; }
.label-target:focus circle { stroke: var(--focus); stroke-width: 18; }
.sort-groups { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(140px,100%),1fr)); gap: 10px; }
.sort-group { border: 2px dashed var(--line); border-radius: 14px; padding: 8px; min-width: 0; }
.sort-placed .choice { padding: 10px 8px; font-size: .92rem; max-width: 100%; }
.sort-placed { gap: 6px; }
.sort-group .sort-head { width: 100%; font-weight: 700; text-align: center; }
.memory-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.memory-card { background: var(--kind,var(--stage)); color: #fff; border: 0; border-radius: 16px; padding: 10px; min-height: 84px; cursor: pointer; overflow-wrap: anywhere; font: inherit; font-weight: 700; font-size: 1.8rem; box-shadow: 0 4px 0 rgba(16,35,55,.25); transition: transform .15s; }
.memory-card:active { transform: scale(.96); }
.memory-card[aria-pressed='true'], .memory-card.matched { background: var(--paper-raised); color: var(--ink); font-size: 1rem; box-shadow: inset 0 0 0 3px var(--kind,var(--line)); }
.memory-card.matched { box-shadow: inset 0 0 0 3px var(--good); opacity: .75; }
.memory-card.peek { background: var(--paper-raised); color: var(--ink); font-size: 1rem; box-shadow: inset 0 0 0 3px var(--kind,var(--line)); opacity: 1; }
.memory-card.matched { opacity: 1; color: #10233a; box-shadow: none; }
.memory-card.pair-0 { background: #ffd9a8; } .memory-card.pair-1 { background: #b8e6c9; } .memory-card.pair-2 { background: #bcd9f7; } .memory-card.pair-3 { background: #f6c1d8; }
.memory-card.pair-4 { background: #fff0a3; } .memory-card.pair-5 { background: #d7c8f5; } .memory-card.pair-6 { background: #b5ebe6; } .memory-card.pair-7 { background: #e3d3bd; }
.chip-pic { display: block; width: 44px; height: 44px; margin: 0 auto 4px; pointer-events: none; }
.choice.has-pic { text-align: center; padding: 8px 10px; min-width: 84px; font-weight: 700; }
.answer-order .choice.has-pic, .choice-bank .type-order .choice.has-pic { text-align: left; }
.type-order .choice.has-pic { display: flex; align-items: center; gap: 10px; text-align: left; }
.type-order .choice.has-pic .chip-pic { flex: none; margin: 0; width: 36px; height: 36px; }
.memory-card .chip-pic { width: 36px; height: 36px; margin-bottom: 2px; }
.game-level { display: inline-flex; align-items: center; gap: 6px; }
.level-pick { width: 34px; height: 34px; border-radius: 50%; border: 2px solid #fff; background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer; padding: 0; }
.level-pick[aria-pressed="true"] { background: #fff; color: var(--kind); }
.game-meters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.game-meters .game-clock { margin: 0; }
.game-level { margin: 0; padding: 4px 6px 4px 14px; border-radius: 999px; background: var(--kind); color: #fff; font-weight: 700; }
.surface.game { --kind: #10233a; border-top: 8px solid var(--kind); }
.surface.game[data-kind="sort"], .surface.game[data-engine="sort"] { --kind: #1f7a55; } .surface.game[data-engine="match"] { --kind: #6d45b8; } .surface.game[data-engine="sequence"] { --kind: #b9500f; } .surface.game[data-engine="quickfire"] { --kind: #1c6aa8; } .surface.game[data-engine="label"] { --kind: #a8246a; }
.game-page { max-width: 760px; margin-inline: auto; }
.game-from { max-width: 760px; margin: 14px auto 0; opacity: .8; font-size: .92rem; }
.game-badge { display: inline-block; margin: 0; padding: 5px 14px; border-radius: 999px; background: var(--kind); color: #fff; font-weight: 700; }
.game-badge, .game-sound { white-space: nowrap; }
@media (max-width: 520px) { .memory-card { min-height: 62px; padding: 6px; font-size: 1.5rem; } .memory-card[aria-pressed='true'], .memory-card.matched { font-size: .88rem; } .game-sound { padding-inline: 8px; } }
.game-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.game-title { margin: 0 0 6px; }
.game-how { margin: 0 0 10px; font-size: 1.1rem; font-weight: 700; }
.game-start { display: grid; gap: 16px; }
.game-cover { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 16px; }
.game-start-text .game-badge { margin-bottom: 10px; }
.btn.game-go { min-height: 60px; padding-inline: 34px; font-size: 1.25rem; border-radius: 999px; background: var(--kind); border-color: var(--kind); color: #fff; }
.game-clock { display: inline-block; margin: 0 0 12px; padding: 4px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line); font-weight: 700; font-variant-numeric: tabular-nums; }
.game-clock::before { content: "⏱ "; }
.game .question-prompt { font-size: 1.25rem; margin: 0 0 6px; }
.game .question-input > p:first-child { margin: 0 0 12px; opacity: .75; font-size: .95rem; }
.btn.game-check { display: block; width: 100%; min-height: 56px; margin-top: 16px; font-size: 1.1rem; border-radius: 16px; }
.game .feedback { font-weight: 700; min-height: 1.5em; }
.quick-count { margin: 0; font-weight: 700; color: var(--kind); }
.quick-ask { margin: 6px 0 18px; font-size: 1.45rem; line-height: 1.3; min-height: 3.9em; }
.quick-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.choice.quick { min-height: 76px; border: 0; border-radius: 18px; color: #fff; font: inherit; font-weight: 700; font-size: 1.3rem; text-align: center; box-shadow: 0 5px 0 rgba(16,35,55,.25); }
.choice.quick.yes { background: #1f7a55; } .choice.quick.no { background: #b3372b; }
.choice.quick:active { transform: translateY(3px); box-shadow: 0 2px 0 rgba(16,35,55,.25); }
.game-end { text-align: center; padding: 10px 0; position: relative; }
/* Small motions that answer the hand. The base reduced-motion rule switches them off. */
@keyframes chip-pop { 0% { transform: scale(.82); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes card-turn { 0% { transform: rotateY(90deg); } 100% { transform: rotateY(0); } }
@keyframes card-pair { 0% { transform: scale(1); } 40% { transform: scale(1.12) rotate(-2deg); } 100% { transform: scale(1); } }
@keyframes head-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@keyframes star-in { 0% { transform: scale(0) rotate(-40deg); opacity: 0; } 70% { transform: scale(1.35) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes confetti-fall { 0% { transform: translateY(-20px) rotate(0); opacity: 1; } 100% { transform: translateY(300px) rotate(540deg); opacity: 0; } }
.chip-pop { animation: chip-pop .24s ease-out; }
.memory-card.turn { animation: card-turn .22s ease-out; }
.memory-card.matched { animation: card-pair .42s ease-out; }
.memory-card.miss, .game-check.shake { animation: head-shake .38s ease-in-out; }
.game-end .star { display: inline-block; }
.game-end .star.on { opacity: 0; animation: star-in .45s cubic-bezier(.2,.9,.3,1.2) forwards; }
.game-end .star.on:nth-child(2) { animation-delay: .28s; } .game-end .star.on:nth-child(3) { animation-delay: .56s; }
.choice.quick.right { box-shadow: 0 0 0 5px #f0b400, 0 5px 0 rgba(16,35,55,.25); animation: card-pair .4s ease-out; }
.choice.quick.wrong { animation: head-shake .38s ease-in-out; opacity: .8; }
.choice.quick.dim { opacity: .35; }
.confetti { position: absolute; inset: 0 0 auto 0; height: 0; pointer-events: none; }
.confetti i { position: absolute; top: 0; width: 9px; height: 14px; border-radius: 2px; opacity: 0; animation: confetti-fall 1.5s ease-in forwards; }
.confetti i:nth-child(4n+1) { background: #f0b400; } .confetti i:nth-child(4n+2) { background: #2f9d6f; } .confetti i:nth-child(4n+3) { background: #3b82c4; } .confetti i:nth-child(4n) { background: #d6497f; }
.confetti i:nth-child(1) { left: 4%; animation-delay: .05s; } .confetti i:nth-child(2) { left: 8%; animation-delay: .32s; } .confetti i:nth-child(3) { left: 12%; animation-delay: .12s; } .confetti i:nth-child(4) { left: 16%; animation-delay: .5s; }
.confetti i:nth-child(5) { left: 20%; animation-delay: .22s; } .confetti i:nth-child(6) { left: 24%; animation-delay: .02s; } .confetti i:nth-child(7) { left: 28%; animation-delay: .42s; } .confetti i:nth-child(8) { left: 32%; animation-delay: .16s; }
.confetti i:nth-child(9) { left: 36%; animation-delay: .6s; } .confetti i:nth-child(10) { left: 40%; animation-delay: .08s; } .confetti i:nth-child(11) { left: 44%; animation-delay: .36s; } .confetti i:nth-child(12) { left: 48%; animation-delay: .2s; }
.confetti i:nth-child(13) { left: 52%; animation-delay: .54s; } .confetti i:nth-child(14) { left: 56%; animation-delay: .04s; } .confetti i:nth-child(15) { left: 60%; animation-delay: .3s; } .confetti i:nth-child(16) { left: 64%; animation-delay: .14s; }
.confetti i:nth-child(17) { left: 68%; animation-delay: .46s; } .confetti i:nth-child(18) { left: 72%; animation-delay: .1s; } .confetti i:nth-child(19) { left: 76%; animation-delay: .38s; } .confetti i:nth-child(20) { left: 80%; animation-delay: .24s; }
.confetti i:nth-child(21) { left: 84%; animation-delay: .58s; } .confetti i:nth-child(22) { left: 88%; animation-delay: .06s; } .confetti i:nth-child(23) { left: 92%; animation-delay: .34s; } .confetti i:nth-child(24) { left: 96%; animation-delay: .18s; }
.confetti i:nth-child(3n) { width: 8px; height: 8px; border-radius: 50%; }
.game-end .stars { font-size: 3.4rem; color: #f0b400; margin: 6px 0; }
.game-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
@media (min-width: 640px) {
  .memory-grid { grid-template-columns: repeat(4,minmax(0,1fr)); }
  .game-start { grid-template-columns: 1fr 1fr; align-items: center; }
}
.game-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.flashcard { width: 100%; text-align: left; min-height: 150px; cursor: pointer; display: flex; flex-direction: column; gap: 12px; }
.flashcard[aria-pressed='true'] { border-color: var(--good); }
.review-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 20px; }
.lab-layout { grid-template-columns: minmax(0,1fr); }
.lab-model, .lab-sheet, .lab-view, .journey, .stage, .panel { min-width: 0; }
.stage-controls { flex-wrap: wrap; }
.journey { grid-template-columns: minmax(0,1fr); }
.gauge ol { flex-wrap: wrap; }
.stage-controls .btn { max-width: 100%; }
.gas-color-o2 { background: #4cc9e9; }
.gas-color-co2 { background: #f2b03d; }
.gas-color-n2 { background: #9fb0c2; }
.gas-color-h2 { background: #f27fbf; }
.gas-color-breath { background: #e9d7a6; }
.gas-color-air { background: #ffffff; }
.lab-view.tall { height: auto; min-height: 470px; }
.lab-view.tall:has(.gaslab-wrap) { min-height: 0; }
.lab-model { position: static; }
.stage { position: static; }
.lab-next { flex-wrap: wrap; }
@media (min-width: 1100px) { .lab-layout { grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); } }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) { --ink: #edf4f2; --ink-soft: #bfcec9; --paper: #102522; --paper-raised: #19342f; --line: #39584f; --good: #85ddb4; --try: #ffc097; } }
@media (prefers-color-scheme: dark) { :root:not([data-theme='light']) .btn-primary { background: #9ae7c5; color: #102522; } }
:root[data-theme='dark'] { --ink: #edf4f2; --ink-soft: #bfcec9; --paper: #102522; --paper-raised: #19342f; --line: #39584f; --good: #85ddb4; --try: #ffc097; }
:root[data-theme='dark'] .btn-primary { background: #9ae7c5; color: #102522; }
@media (max-width: 760px) {
  .sidebar { display: none; }
  #main { margin-left: 0; padding: 16px 16px 40px; }
  #menu { display: inline-flex; }
  .topbar { padding-inline: 12px; gap: 4px; }
  .brand { gap: 6px; font-size: 1rem; }
  .brand-mark { width: 20px; }
  .topnav { gap: 4px; }
  .v2-stepper { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .step-link { min-height: 64px; }
  .v2-footer .btn { flex: 1 1 auto; }
  .match-row { grid-template-columns: minmax(0,1fr); gap: 6px; }
  .read-text { font-size: 1.15rem; }
  .page-head { padding-block: 16px; }
}
/* Unlimited local practice and hands-on book activities. */
.practice-toolbar { display:flex; flex-wrap:wrap; gap:.6rem; margin:1rem 0; }
.activity section { margin-block:1rem; }
.activity-steps li { margin-block:1rem; }
.activity textarea { width:100%; }
.activity .choice { margin:.3rem; }
.table-scroll { overflow-x:auto; max-width:100%; }
.observation-table { width:100%; border-collapse:collapse; }
.observation-table th,.observation-table td { padding:.4rem; text-align:left; }
.observation-table input { width:100%; min-width:70px; min-height:44px; padding:.5rem; border:1px solid var(--line); border-radius:8px; color:var(--ink); background:var(--paper-raised); }
.celebration { color:var(--good); font-size:1.1rem; }
.activity-explanation summary { min-height:44px; cursor:pointer; padding:.6rem; }

/* small fact tables inside Read and Enrichment cards */
.fact-table-wrap { overflow-x:auto; margin:.75rem 0 .25rem; border:1px solid var(--line); border-radius:12px; }
.fact-table { width:100%; border-collapse:collapse; font-size:.95rem; }
.fact-table th,.fact-table td { padding:.55rem .7rem; text-align:left; vertical-align:top; border-top:1px solid var(--line); }
.fact-table thead th { border-top:0; background:var(--paper-raised); font-weight:700; }
.fact-table tbody th { font-weight:600; }

/* quick menu: the main places in one tap */
.quick-btn { display:inline-flex; align-items:center; gap:6px; }
.quick-btn svg { width:22px; height:22px; }
.quick-menu { position:fixed; top:68px; right:12px; z-index:50; width:min(460px,calc(100vw - 24px)); max-height:calc(100dvh - 84px); overflow:auto; padding:14px; border-radius:18px; background:var(--paper-raised); color:var(--ink); border:1px solid var(--line); box-shadow:0 18px 40px -18px #0a1a2a99; }
.quick-head { margin:2px 4px 10px; font-weight:700; color:var(--ink-soft); font-size:.95rem; }
.quick-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.quick-item { display:flex; gap:10px; align-items:center; min-height:60px; padding:10px; border-radius:14px; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--line); }
.quick-item:hover, .quick-item:focus-visible { border-color:#2a77b3; }
.quick-item strong { display:block; line-height:1.2; }
.quick-item small { display:block; color:var(--ink-soft); font-size:.8rem; line-height:1.25; margin-top:2px; }
.quick-icon { flex:0 0 38px; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; }
.quick-icon svg { width:22px; height:22px; }
.q-learn { background:#2a77b3; } .q-lab { background:#2f9e7a; } .q-body { background:#d9575e; } .q-games { background:#8a5cc7; }
.q-review { background:#e08a2c; } .q-ready { background:#1f8fa6; } .q-progress { background:#4f6bd8; } .q-stickers { background:#c99a12; } .q-exam { background:#5a6b7d; }
.quick-exams { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:8px; padding:10px; border-radius:14px; background:var(--paper); border:1px solid var(--line); }
.quick-exams strong { margin-right:auto; }
.quick-chip { min-height:44px; display:inline-flex; align-items:center; padding:6px 12px; border-radius:999px; border:1px solid var(--line); text-decoration:none; color:inherit; font-weight:600; }
.quick-chip:hover, .quick-chip:focus-visible { border-color:#2a77b3; }
.quick-all { margin-top:8px; width:100%; min-height:48px; display:flex; align-items:center; justify-content:center; gap:8px; border-radius:14px; border:1px dashed var(--line); background:none; color:inherit; font:inherit; font-weight:600; cursor:pointer; }
.quick-all svg { width:20px; height:20px; }
@media (max-width:420px) { .quick-item { min-height:56px; padding:8px; gap:8px; } .quick-item small { display:none; } .quick-icon { flex-basis:34px; width:34px; height:34px; } .quick-item strong { font-size:.95rem; } }
.quick-continue { display:flex; gap:10px; align-items:center; padding:10px; margin-bottom:8px; border-radius:14px; text-decoration:none; color:inherit; background:var(--paper); border:2px solid #2a77b3; }
.quick-continue strong { display:block; line-height:1.25; }
.quick-continue small { display:block; color:var(--ink-soft); font-size:.8rem; }
.quick-test { display:block; min-height:44px; padding:10px 12px; margin-bottom:8px; border-radius:12px; text-decoration:none; color:inherit; background:var(--paper); border:1px solid var(--line); font-size:.92rem; }
.quick-test-go { color:#2a77b3; font-weight:700; }
.quick-save { display:block; text-align:center; margin-top:8px; padding:8px; font-size:.88rem; color:var(--ink-soft); }
.quick-grid > .quick-item:last-child:nth-child(odd) { grid-column:1 / -1; }
.q-words { background:#b0507e; }
.quick-search { display:flex; gap:6px; margin-bottom:8px; }
.quick-search-input { flex:1; min-width:0; min-height:48px; padding:8px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:var(--ink); font:inherit; }
.quick-search-go { flex:0 0 48px; width:48px; height:48px; display:grid; place-items:center; border-radius:50%; border:0; background:#2a77b3; color:#fff; cursor:pointer; }
.quick-search-go svg { width:22px; height:22px; }
.quick-parents { margin-top:0; text-decoration:underline; }
.quick-save { min-height:44px; display:flex; align-items:center; justify-content:center; }

/* text size: Normal / Large / Extra large scale the root font */
html.text-large { font-size:112.5%; }
html.text-xl { font-size:125%; }
html:is(.text-large,.text-xl) .topbar :is(.brand,.btn) { font-size:17px; }
@media (max-width:760px) { html:is(.text-large,.text-xl) .topbar :is(.brand,.btn) { font-size:16px; } }
.text-size { display:flex; align-items:center; gap:8px; margin-top:8px; padding:6px 10px; border-radius:14px; background:var(--paper); border:1px solid var(--line); }
.text-size-label { margin-right:auto; font-weight:700; }
.text-size-btn { min-width:48px; min-height:44px; padding:4px 8px; border-radius:12px; border:2px solid var(--line); background:var(--paper-raised); color:var(--ink); font-weight:700; line-height:1; cursor:pointer; }
.text-size-btn.ts-normal { font-size:15px; } .text-size-btn.ts-large { font-size:19px; } .text-size-btn.ts-xl { font-size:23px; }
.text-size-btn[aria-pressed='true'] { border-color:#2a77b3; background:#2a77b3; color:#fff; }

/* search */
.search-label { display:block; font-weight:700; margin-bottom:6px; }
.search-row { display:flex; gap:8px; flex-wrap:wrap; }
.search-form input, .dict-tools input { flex:1 1 200px; min-width:0; min-height:48px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); font:inherit; }
.dict-tools input { width:100%; }
.search-status { color:var(--ink-soft); margin-block:16px; }
.search-group h2 { font-size:var(--step-1); }
.search-list { list-style:none; padding:0; margin:0; display:grid; gap:10px; }
.search-hit { display:block; padding:14px 16px; border-radius:16px; background:var(--paper-raised); border:1px solid var(--line); text-decoration:none; color:inherit; overflow-wrap:anywhere; }
.search-hit:hover, .search-hit:focus-visible { border-color:#2a77b3; }
.search-title { display:block; font-size:1.15rem; }
.search-def, .search-meta, .search-snippet { display:block; margin-top:4px; }
.search-meta { color:var(--ink-soft); font-size:.95rem; }
.search-hit .arabic-meaning { margin-block:4px 0; }
.search-more { margin:4px 0 0; padding-left:16px; font-size:.95rem; color:var(--ink-soft); }
.search-more a, .dict-in a { display:inline-flex; align-items:center; min-height:44px; margin-right:12px; }
mark { background:#ffe58a; color:#16222f; border-radius:3px; padding:0 2px; }
.search-suggest .quick-chip { min-height:44px; background:var(--paper-raised); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }

/* dictionary */
.dict-tools { display:grid; gap:10px; }
.dict-grades { display:flex; flex-wrap:wrap; gap:8px; }
.dict-grades .quick-chip { min-height:44px; background:var(--paper-raised); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; }
.dict-grades .quick-chip[aria-pressed='true'], .search-suggest .quick-chip:active { background:#2a77b3; border-color:#2a77b3; color:#fff; }
.dict-letters { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.dict-jump { min-width:44px; min-height:44px; border-radius:12px; border:1px solid var(--line); background:var(--paper-raised); color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.dict-letter { scroll-margin-top:80px; font-size:var(--step-2); border-bottom:2px solid var(--line); padding-bottom:4px; margin-top:12px; }
.dict-entry { padding:12px 0; border-bottom:1px solid var(--line); overflow-wrap:anywhere; }
.dict-entry h3 { margin:0 0 4px; font-size:1.2rem; }
.dict-def { margin:0; }
.dict-in { margin:0; font-size:.95rem; }

/* parents and teachers */
.parents { margin-bottom:20px; }
.parents h2 { font-size:var(--step-1); }
.parents-list li { margin-bottom:8px; max-width:62ch; }
.parents-dates { list-style:none; padding:0; margin:0 0 8px; display:grid; gap:8px; }
.parents-dates li { display:flex; flex-wrap:wrap; gap:4px 12px; padding:10px 14px; border-radius:12px; background:var(--paper); border:1px solid var(--line); }
.parents-grade { border-top:1px solid var(--line); }
.parents-grade summary { font-weight:700; }
@media print { .quick-menu { display:none !important; } }
.search-group + .search-group { margin-top:28px; }
.dict-tools input { max-width:520px; }
/* hear a science word (Dictionary, Search, word popover, chapter word list) */
.hear-word { display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:6px 14px; border-radius:999px; border:1px solid var(--line); background:var(--paper); color:inherit; font:inherit; font-size:.92rem; font-weight:600; cursor:pointer; }
.hear-word svg { width:20px; height:20px; color:#2a77b3; }
.hear-word:hover, .hear-word:focus-visible { border-color:#2a77b3; }
.hear-word.playing { background:#2a77b3; color:#fff; border-color:#2a77b3; }
.hear-word.playing svg { color:#fff; }
.hear-word[hidden] { display:none; }
.dict-head { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; }
.dict-head h3 { margin:0; }
.search-word > .hear-word { margin-top:8px; }
.glossary-popover .hear-word { margin-block:4px; }
.word-list th .hear-word:not([hidden]) { margin-top:6px; display:flex; width:max-content; }
/* parent view and report codes (docs/design/family_school_link.md, phase A) */
.lead-note { font-size:1.1rem; max-width:62ch; margin-bottom:4px; }
.field-label { display:block; font-weight:700; margin-block:12px 6px; }
#report-name { font:inherit; color:var(--ink); background:var(--paper-raised); border:1px solid var(--line); border-radius:12px; padding:10px 14px; min-height:48px; width:100%; max-width:320px; }
.report-who h2 { font-size:1.6rem; margin:0; overflow-wrap:anywhere; }
.report-who p { margin:4px 0 0; }
.report-body { display:grid; gap:16px; margin-bottom:20px; }
.report-chapters h2, .report-note h2, .report-tip h2 { font-size:var(--step-1); }
.report-chapters h3 { margin-block:20px 4px; }
.report-active { margin:0; }
.report-tip { border-inline-start:6px solid var(--good); }
.report-tip p { margin:0 0 6px; }
.report-tip .tip-en { font-size:1.1rem; font-weight:700; }
.report-list { list-style:none; padding:0; margin:0; }
.report-list li { padding-block:12px; border-bottom:1px dashed var(--line); }
.report-list p { margin:0 0 6px; }
.report-chapter { display:flex; flex-wrap:wrap; align-items:center; gap:6px 12px; overflow-wrap:anywhere; }
.status-tag { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:.85rem; font-weight:700; border:1px solid currentColor; }
.status-tag::before { content:""; width:10px; height:10px; border-radius:50%; background:currentColor; }
.status-green { color:var(--good); }
.status-amber { color:#8a5a00; }
.status-red { color:var(--try); }
.meter.status-green .fill { background:var(--good); }
.meter.status-amber .fill { background:#c98a12; }
.meter.status-red .fill { background:var(--try); }
.report-key { display:flex; flex-wrap:wrap; gap:6px 14px; margin-block:4px 0; padding:0; list-style:none; }
.report-ready { margin:0; padding:16px; }
.report-code-box { margin-top:16px; min-width:0; }
.report-code-box h3 { margin-top:0; }

/* parent and teacher pages: Arabic | English switch (adult-i18n.js); .adult-page carries dir and lang */
.lang-bar { display:flex; justify-content:flex-end; margin-block:8px 0; }
.lang-toggle { display:inline-flex; align-items:center; gap:2px; padding:4px; border:1px solid var(--line); border-radius:999px; background:var(--paper-raised); }
.lang-btn { min-height:44px; min-width:76px; padding:6px 14px; border:0; border-radius:999px; background:transparent; color:var(--ink); font:inherit; font-weight:700; cursor:pointer; }
.lang-btn[aria-pressed='true'] { background:#2a77b3; color:#fff; }
.lang-sep { color:var(--ink-soft); }
.adult-page[dir='rtl'] { line-height:1.7; }
.adult-page[dir='rtl'] .breadcrumbs a { text-align:right; }
.adult-page[dir='rtl'] .breadcrumbs li + li::before { content:'‹'; }
.adult-page[dir='rtl'] .guide-bubble { border-radius:20px 8px 20px 20px; }
.adult-page[dir='rtl'] .progress-code { text-align:left; }

/* bottom bar: Learn, Lab, Games, Me (main-v2.js tabBar). On a wide screen it sits under the page, centred. */
.tabbar { position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; justify-content:center; gap:4px; padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:var(--paper-raised); border-top:1px solid var(--line); }
.tabbar[hidden] { display:none; }
.tab { flex:1 1 0; max-width:150px; min-height:56px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; border-radius:14px; color:var(--ink-soft); text-decoration:none; font-weight:700; font-size:.9rem; line-height:1.2; }
.tab svg { width:26px; height:26px; }
.tab[aria-current='page'] { color:#fff; background:#2a77b3; }
.tab:focus-visible { outline:3px solid var(--good); outline-offset:2px; }
body.has-tabs #main { padding-bottom:104px; }
@media (min-width:761px) { .tabbar { left:260px; } }
@media print { .tabbar { display:none !important; } body.has-tabs #main { padding-bottom:0; } }
/* Learn: grade question, chapters as a path of lessons */
button.grade-card { font:inherit; text-align:start; cursor:pointer; }
button.grade-card[aria-pressed='true'] { outline:4px solid #2a77b3; outline-offset:2px; }
.path-chapter > summary { display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between; gap:4px 12px; min-height:48px; cursor:pointer; }
.path-count { font-size:.95rem; }
.path-lessons { list-style:none; margin:12px 0 0; padding:0; display:grid; gap:10px; }
.path-lesson { display:flex; align-items:center; width:100%; min-height:64px; padding:10px 14px; border:1px solid var(--line); border-radius:18px; background:var(--paper); text-decoration:none; color:var(--ink); }
.path-lesson > span { display:grid; grid-template-columns:36px 1fr; column-gap:12px; align-items:center; width:100%; }
.path-lesson strong { font-size:1.1rem; line-height:1.3; }
.path-lesson .muted { grid-column:2; font-size:.95rem; }
.path-lesson.soon { border-style:dashed; }
.path-dot { grid-row:span 2; width:36px; height:36px; border-radius:50%; border:3px solid var(--line); display:grid; place-items:center; font-weight:700; }
.path-dot.done { background:var(--good); border-color:var(--good); color:#fff; }
.path-more { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0 0; }
.me-tile { min-height:96px; padding:16px; }
.me-tile > span { display:grid; grid-template-columns:38px 1fr; column-gap:12px; align-items:center; }
.me-tile .muted { grid-column:2; margin:0; }
.me-tile strong { margin:0; }
.me-links { display:flex; flex-wrap:wrap; gap:8px; }
.q-search { background:#5a6b7d; } .q-me { background:#2a77b3; }

/* progress codes (platform/sync.js) */
.my-code { margin-top:16px; }
.code-line { display:flex; flex-direction:column; gap:2px; margin:10px 0; }
.big-code { font-family:ui-monospace,Consolas,monospace; font-size:1.15rem; letter-spacing:.06em; overflow-wrap:anywhere; direction:ltr; unicode-bidi:isolate; user-select:all; }
.code-entry { display:flex; flex-wrap:wrap; align-items:flex-end; gap:8px; margin:10px 0; }
.code-entry label { display:flex; flex-direction:column; gap:4px; flex:1 1 220px; min-width:0; font-weight:700; }
.code-input { font:inherit; font-family:ui-monospace,Consolas,monospace; padding:10px 12px; min-height:44px; border:2px solid var(--line,#c9d3df); border-radius:12px; width:100%; direction:ltr; text-transform:uppercase; background:var(--paper-raised,#fff); color:inherit; }
.code-note { flex-basis:100%; margin:0; min-height:1.2em; }
.class-number strong { font-size:1.1rem; }
.consent ol { padding-inline-start:1.3em; display:grid; gap:8px; line-height:1.7; }
.lesson-table { border-collapse:collapse; width:100%; }
.lesson-table th,.lesson-table td { padding:8px 10px; border-bottom:1px solid var(--line,#dde4ec); text-align:start; vertical-align:top; }
.grade-select { font:inherit; min-height:44px; padding:8px 12px; border-radius:12px; }

/* Home: the next exam as one line */
.exam-line { display:flex; align-items:center; flex-wrap:wrap; gap:6px 12px; min-height:56px; margin-block-end:20px; padding:12px 18px; text-decoration:none; color:inherit; }
.exam-line strong { font-size:1.05rem; }
.exam-line-go { margin-inline-start:auto; font-size:1.6rem; line-height:1; }
.exam-line:hover,.exam-line:focus-visible { border-color:var(--stage-glow); }
/* Read: one card at a time */
.read-progress { display:flex; align-items:center; flex-wrap:wrap; gap:8px 14px; margin-block:0 14px; }
.read-dots { display:flex; gap:6px; flex:1 1 auto; }
.read-dots span { width:12px; height:12px; border-radius:50%; border:2px solid var(--line); }
.read-dots span.on { background:var(--stage-glow); border-color:var(--stage-glow); }
.read-mode { margin-inline-start:auto; font-size:.95rem; }
.read-pager { display:flex; gap:12px; margin-block:16px 0; }
.read-pager .btn { min-height:56px; font-size:1.1rem; }
.read-pager .read-next { flex:1 1 auto; }
.read-pager[hidden], .read-card[hidden], .read-extra[hidden] { display:none; }
.flashcard[hidden] { display:none; }
.finish-actions { display:flex; flex-wrap:wrap; gap:12px; margin-block:20px 8px; }
.finish-actions .btn { flex:1 1 200px; min-height:56px; justify-content:center; text-align:center; }
.learn-tools { margin-block:0 12px; }
.words-link span { display:inline-flex; align-items:center; gap:8px; }
.words-link svg { width:22px; height:22px; }