/* Shared visual system: course shell, React pages and standalone lessons. */
:root {
  --academic-paper: #faf9f5;
  --academic-surface: #fffefa;
  --academic-ink: #252b30;
  --academic-muted: #646962;
  --academic-line: #dcded6;
  --academic-accent: #244f66;
  --academic-soft: #edf2f1;
  --academic-serif: Georgia, "Times New Roman", serif;
  --academic-sans: "Segoe UI", Arial, sans-serif;
  --bg: var(--academic-paper); --surface: var(--academic-surface);
  --surface-alt: #f1f2ed; --text: var(--academic-ink); --ink: var(--academic-ink);
  --muted: var(--academic-muted); --line: var(--academic-line);
  --accent: var(--academic-accent); --accent-soft: var(--academic-soft);
  --radius: 4px; --shadow: none;
}
html body {
  color: var(--academic-ink);
  background: var(--academic-paper);
  font-family: var(--academic-sans);
}
:where(button, a, input, select, textarea, summary):focus-visible {
  outline: 2px solid var(--academic-accent);
  outline-offset: 3px;
}
:where(button, summary, a) { touch-action: manipulation; }
:where(h1, h2, h3) { text-wrap: balance; }
/* The course navigation reads as a table of contents. */
body .topbar { background: var(--academic-surface); backdrop-filter: none; border-color: var(--academic-line); }
body .brand-mark { background: var(--academic-accent); border-radius: 2px; font-weight: 600; }
body .brand h1 { font-weight: 600; letter-spacing: .01em; }
body .sidebar { background: #f2f2ec; border-color: var(--academic-line); }
body .all-button, body .section-button, body .lesson-button { border-radius: 0; box-shadow: none; }
body .all-button { background: transparent; border-bottom: 1px solid var(--academic-line); }
body .section-button.active, body .all-button.active,
body .section.open > .section-head .section-button { background: var(--academic-soft); box-shadow: none; color: var(--academic-accent); }
body .lesson-button.active { background: var(--academic-surface); box-shadow: inset 2px 0 var(--academic-accent); color: var(--academic-accent); }
body .section-number, body .active .section-number { background: transparent; color: var(--academic-accent); border-radius: 0; font-family: var(--academic-serif); font-size: 18px; font-weight: 400; }
body .section-title { font-weight: 600; }
body .lesson-count { background: transparent; border-radius: 0; color: var(--academic-muted); }
body .lessons { border-color: var(--academic-line); }
body .hero { padding-bottom: 20px; border-bottom: 1px solid var(--academic-line); }
body .hero h2, body .lesson-page-head h3, body .lesson-title-row h2 {
  font-family: var(--academic-serif); font-weight: 400; letter-spacing: -.025em;
  font-size: clamp(28px, 3vw, 42px); line-height: 1.18;
}
body .content { padding: 30px clamp(20px, 3vw, 56px); }
body .controls { box-shadow: none; border-radius: 3px; background: var(--academic-surface); backdrop-filter: none; }
body .field input, body .field select { border-radius: 3px; }
/* Avoid nesting each paragraph and exercise in a separate elevated card. */
body .lesson-page-head, body .lesson-theory, body .lesson-lab,
body .lesson-example-block, body .lesson-watch, body .lesson-practice {
  border-radius: 3px; border-color: var(--academic-line); box-shadow: none;
  background: var(--academic-surface);
}
body .lesson-page-head { border: 0; border-bottom: 1px solid var(--academic-line); padding: 0 0 20px; }
body .lesson-page-kicker, body .lesson-page-goal { color: var(--academic-muted); }
body .lesson-theory { border: 0; border-left: 2px solid var(--academic-line); padding: 8px 20px; background: transparent; }
body .lesson-theory h2, body .lesson-theory h3 { font-family: var(--academic-serif); font-size: 23px; font-weight: 400; }
body .lesson-task-list { border-radius: 0; box-shadow: none; background: transparent; gap: 0; }
body .lesson-task-list > .task-row, body .lesson-task-list > .card {
  border: 0; border-bottom: 1px solid var(--academic-line); border-radius: 0;
  box-shadow: none; background: transparent; padding-block: 24px;
}
body .lesson-task-list > .is-solved { background: var(--success-soft, #edf5ef); }
body .task-row-num { background: transparent; color: var(--academic-muted); border-radius: 0; font-weight: 500; }
body .task-row .card-body { line-height: 1.6; }
body .lesson-bank-head { border-radius: 0; border-block: 1px solid var(--academic-line); background: transparent; color: var(--academic-ink); padding: 20px 0; font-family: var(--academic-serif); font-weight: 400; }
body .lesson-bank-head small { color: var(--academic-muted); font-family: var(--academic-sans); font-weight: 600; }
body .task-row .task-solution { border: 0; border-left: 2px solid var(--academic-line); border-radius: 0; }
body .student-answer input, body .student-answer button,
body .solution-button, body .lesson-board-link, body .lesson-lab-open,
body .type-navigation-button, body .course-navigation-toggle { border-radius: 3px; box-shadow: none; }
body .student-answer-check { background: var(--academic-accent); border-color: var(--academic-accent); }
body .lesson-board-link, body .lesson-lab-open { color: var(--academic-accent); background: var(--academic-soft); border-color: var(--academic-line); }
body .type-navigation { border-radius: 0; background: var(--academic-paper); backdrop-filter: none; box-shadow: none; }
body .type-navigation-button[aria-current] { box-shadow: inset 0 -2px var(--academic-accent); border-radius: 0; color: var(--academic-accent); }
body .inline-player-stage-wrap { background: var(--academic-surface); border-color: var(--academic-line); border-radius: 3px; }
body .inline-player-watch { box-shadow: none; border-radius: 3px; }
/* Game chrome only: mathematical diagrams and feedback retain their colours. */
body :is(.ng, .isg, .iag, .nn) {
  --ng-blue: var(--academic-accent); --iag-accent: var(--academic-accent);
  font-family: var(--academic-sans); color: var(--academic-ink);
  background: var(--academic-surface); box-shadow: none; border-radius: 3px;
}
body :is(.ng h2, .isg-title, .iag h2, .nn h2) { font-family: var(--academic-serif); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.2; }
body :is(.ng-paper, .isg-paper, .iag-paper, .nn-paper) { border-radius: 3px; border-color: var(--academic-line); box-shadow: none; }
body :is(.ng-toolbar, .isg-toolbar, .iag-toolbar, .nn-toolbar) button,
body :is(.ng-actions, .isg-actions, .iag-actions, .nn-actions) button { border-radius: 3px; font-weight: 600; box-shadow: none; }
body :is(.ng-primary, .isg-primary, .iag-primary, .nn-primary) { background: var(--academic-accent); color: white; }
body .ng-progress button[data-state="current"] { background: var(--academic-accent); }
body .standalone-card { box-shadow: none; border-radius: 3px; }
body .standalone-head h1 { font-family: var(--academic-serif); font-weight: 400; }
/* Landing page: editorial heading and an indexed course list. */
.home-shell { display: flex; flex: 1; flex-direction: column; }
.home-header { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px clamp(20px, 5vw, 80px); border-bottom: 1px solid var(--academic-line); }
.home-wordmark { margin: 0; font-size: 15px; font-weight: 600; }
.home-main { width: min(1080px, 100%); margin: 0 auto; padding: 64px 28px 80px; }
.home-intro { display: grid; grid-template-columns: 1.5fr 1fr; gap: 36px; align-items: end; margin-bottom: 48px; }
.home-kicker { display: block; margin-bottom: 16px; color: var(--academic-muted); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; }
.home-intro h1 { margin: 0; font: 400 clamp(42px, 5.5vw, 68px)/1.05 var(--academic-serif); letter-spacing: -.035em; }
.home-intro p { margin: 0 0 3px; max-width: 32ch; color: var(--academic-muted); line-height: 1.75; }
.home-courses { border-top: 2px solid var(--academic-ink); }
.home-course { display: grid; grid-template-columns: 48px minmax(0, 1fr) 180px; align-items: center; gap: 24px; min-height: 104px; padding: 22px 12px; border-bottom: 1px solid var(--academic-line); color: inherit; text-decoration: none; transition: background-color .15s; }
.home-course:not([aria-disabled="true"]):hover { background: var(--academic-soft); }
.home-course-number { align-self: start; padding-top: 7px; color: var(--academic-muted); font: 18px var(--academic-serif); }
.home-course h2 { margin: 0; font: 400 clamp(22px, 2.5vw, 29px)/1.3 var(--academic-serif); }
.home-course p { margin: 5px 0 0; color: var(--academic-muted); font-size: 14px; }
.home-course-go { color: var(--academic-accent); font-size: 14px; text-align: right; }
.home-course[aria-disabled="true"] { color: var(--academic-muted); cursor: not-allowed; }
.home-course[aria-disabled="true"] .home-course-go { color: var(--academic-muted); }
.site-footer { margin-top: auto; padding: 26px max(24px, calc((100% - 1024px) / 2)); border-top: 1px solid var(--academic-line); background: var(--academic-paper); text-align: left; }
.site-footer p { margin: 4px 0; color: var(--academic-muted); font-size: 13px; line-height: 1.6; max-width: 70ch; }
.site-footer .site-author { color: var(--academic-ink); font-weight: 600; }
@media (max-width: 720px) {
  html body:is(.course-profil, .course-oge, .course-info, .course-baza) { background: var(--academic-paper); --profil-ink: var(--academic-ink); --profil-muted: var(--academic-muted); --profil-line: var(--academic-line); --profil-accent: var(--academic-accent); --profil-soft: var(--academic-soft); }
  body:is(.course-profil, .course-oge, .course-info) .content { padding: 18px 14px calc(28px + env(safe-area-inset-bottom)); }
  body:is(.course-profil, .course-oge, .course-info) .hero h2 { font: 400 29px/1.2 var(--academic-serif); letter-spacing: -.02em; }
  body:is(.course-profil, .course-oge, .course-info) .topbar,
  body:is(.course-profil, .course-oge, .course-info) .profil-mobile-chrome { background: var(--academic-surface); backdrop-filter: none; }
  body .profil-catalog-open, body .profil-search-toggle, body .profil-catalog-open-icon,
  body .profil-lesson-chip { border-radius: 3px; box-shadow: none; }
  body:is(.course-profil, .course-oge, .course-info) .type-navigation { border-radius: 0; background: var(--academic-soft); backdrop-filter: none; }
  body:is(.course-profil, .course-oge, .course-info) .type-navigation-button { border-radius: 0; }
  body:is(.course-profil, .course-oge, .course-info) .lesson-task-list { gap: 0; border-radius: 0; }
  body:is(.course-profil, .course-oge, .course-info) .lesson-task-list > :is(.task-row, .card) { border: 0; border-bottom: 1px solid var(--academic-line); border-radius: 0; box-shadow: none; background: transparent; padding: 20px 0; }
  body:is(.course-profil, .course-oge, .course-info) .lesson-task-list > .is-solved { background: var(--success-soft, #edf5ef); }
  body:is(.course-profil, .course-oge, .course-info) .task-row-num { background: transparent; border-radius: 0; color: var(--academic-muted); }
  body:is(.course-profil, .course-oge, .course-info) .task-row .card-body { line-height: 1.6; }
  body .game-lesson .lesson-watch { border-radius: 3px; box-shadow: none; }
  .home-header { padding: 18px 20px; }
  .home-main { padding: 36px 20px 48px; }
  .home-intro { grid-template-columns: 1fr; gap: 24px; margin-bottom: 32px; }
  .home-intro p { max-width: 40ch; }
  .home-course { grid-template-columns: 28px minmax(0, 1fr); gap: 4px 12px; padding: 20px 0; }
  .home-course-number { grid-row: 1 / 3; }
  .home-course-go { grid-column: 2; text-align: left; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .home-course { transition: none; } }

/* Mobile contents use the same ruled rows as desktop navigation. */
@media (max-width: 720px) {
  body:is(.course-profil, .course-oge, .course-info) .profil-catalog { background: var(--academic-paper); }
  body:is(.course-profil, .course-oge, .course-info) .profil-catalog-head { background: var(--academic-surface); }
  body .profil-section-card, body .profil-lesson-row { border: 0; border-bottom: 1px solid var(--academic-line); border-radius: 0; box-shadow: none; background: transparent; }
  body .profil-section-num, body .profil-lesson-num { border-radius: 0; background: transparent; font-family: var(--academic-serif); font-weight: 400; }
  body:is(.course-profil, .course-oge, .course-info) .profil-catalog-head button { border-radius: 3px; }
}
body[data-academic-exercise] h1 { font-family: var(--academic-serif); font-weight: 400; }
body[data-academic-exercise] :is(.paper, .panel, .shell, .card, .ruleCard) { border-radius: 3px; box-shadow: none; }
body[data-academic-exercise] :is(.primary, .sound, .btn, .example-btn) { border-radius: 3px; box-shadow: none; }
body .student-answer-explain { background: transparent; color: var(--academic-accent); border: 1px solid var(--academic-accent); font-weight: 600; }
body .student-answer-check { font-weight: 600; }
body .admin-login-button { border-radius: 3px; box-shadow: none; }

/* Specific mobile component rules override the legacy per-course styles. */
@media (max-width: 720px) {
  body:is(.course-profil, .course-oge, .course-info) .profil-catalog[open] { background: var(--academic-paper); border-radius: 0; }
  body:is(.course-profil, .course-oge, .course-info) .brand-mark { border-radius: 2px; }
  body:is(.course-profil, .course-oge, .course-info) .task-row :is(.student-answer-check, .student-answer-explain) { border-radius: 3px; font-weight: 600; }
  body .profil-section-card[data-current="true"], body .profil-lesson-row[aria-current="page"] { background: var(--academic-soft); border-color: var(--academic-line); }
  body .profil-section-card strong, body .profil-lesson-row strong { font-weight: 600; }
}
body[data-academic-info] :is(h1, h2) { font-family: var(--academic-serif); font-weight: 400; }
body[data-academic-info] h1 { font-size: clamp(28px, 4vw, 38px); }
body[data-academic-info] .intro { border-radius: 0; background: transparent; padding: 20px 0; border-bottom: 1px solid var(--academic-line); }
body[data-academic-info] .task { border: 0; border-bottom: 1px solid var(--academic-line); border-radius: 0; padding: 24px 0; }
body[data-academic-info] :is(button, input) { border-radius: 3px; border-color: var(--academic-line); }
body[data-academic-info] button { background: var(--academic-soft); color: var(--academic-accent); }
body[data-academic-info] :is(.eyebrow, .badge, .hint) { color: var(--academic-muted); }
body[data-academic-info] summary { color: var(--academic-accent); }