/* Школьные курсы: задания без микрофона (варианты, число, текст), тренажёр, справочник. Цвета — из style.css. */
body.school:not(.mode-session) .session-only,
body.school:not(.mode-drill) .drill-only,
body.school:not(.mode-theory) .theory-only { display: none; }

.qz-text { margin: 6px 0 10px; white-space: pre-line; }
#drillQ, #hwQ { white-space: pre-line; }
.qz-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 8px; margin: 8px 0; }
.qz-opt { font: inherit; font-size: 1.05rem; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; text-align: left; }
.qz-opt:hover:not(:disabled) { border-color: var(--muted); }
.qz-opt.right { border-color: var(--ok); background: color-mix(in srgb, var(--ok) 18%, var(--card)); }
.qz-opt.wrong { border-color: var(--bad); opacity: .7; }
.qz-opt:disabled { cursor: default; }
.qz-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.qz-in { font: inherit; font-size: 1.2rem; width: 140px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); color: var(--text); }
.qz-in-text { width: 220px; }
.qz-in:focus { outline: none; border-color: var(--heard); }
.qz-unit { color: var(--muted); font-weight: 600; }
.qz-fb { min-height: 1.4em; font-weight: 600; margin-top: 6px; }
.qz-fb.good { color: var(--ok); }
.qz-fb.bad { color: var(--bad); }
.qz-fb .muted { font-weight: 400; }
.qz-timer { display: flex; gap: 10px; align-items: baseline; margin: 10px 0; }
.qz-timer b { font: 800 1.6rem ui-monospace, Consolas, monospace; }

/* Тренажёр */
.qz-skills { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 12px; }
.qz-skills button { font: inherit; padding: 8px 12px; border-radius: 10px; border: 2px solid var(--line); background: var(--card); color: var(--text); cursor: pointer; }
.qz-skills button.active { border-color: var(--blow); background: var(--blow-soft); }
.qz-score { font-size: .75rem; color: var(--muted); margin-left: 4px; }
#drillList h4 { margin: 10px 0 4px; }
.qz-q { font-size: 1.25rem; font-weight: 700; margin: 6px 0; }

/* Справочник */
.qz-theory { border-top: 1px dashed var(--line); padding: 8px 0; }
.qz-theory summary { cursor: pointer; font-weight: 600; }
.qz-theory p { margin: 8px 0 0; }
.qz-theory p + p { margin-top: 4px; }

/* Формулы в условиях: моноширинный, но читаемый. */
.qz-text code, .ls-ex-title code { font-size: 1em; }

@media (max-width: 600px) {
  .qz-in { width: 110px; }
  .qz-in-text { width: 100%; }
}
/* Матрица таблицей в высоких круглых скобках (js/matrixView.js, решение 0032). */
.mx { display: inline-block; position: relative; vertical-align: middle; margin: 2px 4px; padding: 0 11px; }
.mx::before, .mx::after { content: ''; position: absolute; top: 0; bottom: 0; width: 8px; border: 2px solid currentColor; opacity: .75; }
.mx::before { left: 0; border-right: 0; border-radius: 100% 0 0 100% / 50% 0 0 50%; }
.mx::after { right: 0; border-left: 0; border-radius: 0 100% 100% 0 / 0 50% 50% 0; }
.mx-t { display: inline-table; border-collapse: separate; border-spacing: 4px; font-weight: 600; font-size: 1rem; }
.mx-r { display: table-row; }
.mx-c { display: table-cell; vertical-align: middle; min-width: 2.2em; padding: 3px 7px; text-align: center; border: 1px solid var(--line); border-radius: 5px; background: color-mix(in srgb, var(--text) 6%, transparent); white-space: nowrap; }
/* Курсы «Шейдеры» (0033): блоки кода, редактор и холсты упражнения «шейдер». */
pre.code { margin: 8px 0; padding: 10px 12px; border-radius: 8px; background: color-mix(in srgb, var(--text) 7%, var(--card)); border: 1px solid var(--line); overflow-x: auto; font: 13px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; white-space: pre; }
.ls-ex-title pre.code, #drillQ pre.code, #hwQ pre.code { font-weight: 400; font-size: 13px; }
pre.code code { padding: 0; margin: 0; background: none; border: 0; font: inherit; }
.sh-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: start; margin: 8px 0; }
.sh-edit { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: color-mix(in srgb, var(--text) 5%, var(--card)); min-height: 280px; }
.sh-gutter { margin: 0; padding: 10px 6px; min-width: 2.4em; text-align: right; color: var(--muted); font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; overflow: hidden; user-select: none; border-right: 1px solid var(--line); }
.sh-gutter b { color: var(--bad); }
.sh-code { flex: 1; min-width: 0; margin: 0; padding: 10px; border: 0; outline: 0; resize: vertical; min-height: 280px; background: transparent; color: var(--text); font: 13px/1.5 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; white-space: pre; overflow: auto; }
.sh-views { display: flex; flex-direction: column; gap: 8px; }
.sh-views figure { margin: 0; text-align: center; }
.sh-views canvas { width: 168px; height: 168px; border-radius: 8px; border: 1px solid var(--line); display: block; background: #000; touch-action: none; }
.sh-views figcaption { font-size: .8rem; color: var(--muted); margin-top: 2px; }
.sh-log { white-space: pre-wrap; font: 12px/1.45 ui-monospace, SFMono-Regular, Consolas, monospace; color: var(--muted); min-height: 1em; }
.sh-log.bad { color: var(--bad); }
@media (max-width: 640px) {
  .sh-wrap { grid-template-columns: 1fr; }
  /* холсты — над редактором и прилипают к верху: при открытой клавиатуре результат правки виден (решение 0036) */
  .sh-views { flex-direction: row; justify-content: center; order: -1; position: sticky; top: 0; z-index: 2; padding: 6px 0; background: var(--card); }
  .sh-views canvas { width: 120px; height: 120px; }
  .sh-edit, .sh-code { min-height: 220px; }
}

/* Рисунки к задачам и теории (js/quiz/fig.js, решение 0048): цвета темы, не шире экрана. */
.fig-wrap { margin: 6px 0 10px; text-align: center; }
.fig { max-width: 100%; height: auto; overflow: visible; color: var(--text); }
.fig .f { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fig .fw { stroke-width: 2.6; }
.fig .ft { stroke-width: 1; }
.fig .fd { stroke-dasharray: 5 4; }
.fig .f1 { stroke: var(--heard); }
.fig .f2 { stroke: var(--blow); }
.fig .fm { stroke: var(--muted); }
.fig .ff { fill: color-mix(in srgb, currentColor 10%, transparent); }
.fig .ff1 { fill: color-mix(in srgb, var(--heard) 40%, transparent); }
.fig .ff2 { fill: color-mix(in srgb, var(--blow) 35%, transparent); }
.fig .fh { fill: currentColor; stroke: none; }
.fig .fh.f1 { fill: var(--heard); }
.fig .fh.f2 { fill: var(--blow); }
.fig .fh.fm { fill: var(--muted); }
.fig .fdot { fill: currentColor; }
.fig .fdot.f1 { fill: var(--heard); }
.fig .fdot.f2 { fill: var(--blow); }
.fig .fgrid { stroke: var(--line); stroke-width: 1; }
.fig .flab { fill: currentColor; font: 600 13px system-ui, sans-serif; paint-order: stroke; stroke: var(--card); stroke-width: 3px; stroke-linejoin: round; }
.fig .fsm { font-size: 11px; font-weight: 500; }
.fig .fit { font-style: italic; }
.fig .f1t { fill: var(--heard); }
.fig .f2t { fill: var(--blow); }
.fig .fmt { fill: var(--muted); }

/* 3D-модели молекул (js/quiz/mol.js, решение 0049): холст с вращением, подпись-формула. */
.mol3d { display: inline-block; text-align: center; margin: 4px auto; max-width: 100%; }
.mol3d canvas { display: block; width: min(300px, 86vw); height: 220px; margin: 0 auto; touch-action: none; cursor: grab; border-radius: 12px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--text) 7%, transparent), transparent 70%); }
.mol3d canvas:active { cursor: grabbing; }
.mol-cap { font-size: .9rem; color: var(--text); }
.mol-hint { color: var(--muted); font-size: .78rem; }
.mol3d.turned .mol-hint { visibility: hidden; }
.fig-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.fig-row .mol3d canvas { width: min(230px, 44vw); height: 190px; }
/* Объёмные сцены математики и физики (js/quiz/scene3d.js, решение 0083) */
.sc3d { display: inline-block; text-align: center; margin: 4px auto; max-width: 100%; vertical-align: top; }
.sc3d canvas { display: block; width: min(340px, 88vw); height: 250px; margin: 0 auto; touch-action: none; cursor: grab; border-radius: 12px; background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--text) 5%, transparent), transparent 75%); }
.sc3d canvas:active { cursor: grabbing; }
.sc3d.turned .mol-hint { visibility: hidden; }
.fig-row .sc3d canvas { width: min(280px, 44vw); height: 220px; }

/* Действия столбиком по шагам (js/quiz/column.js, решение 0052) */
.colcalc { max-width: 420px; margin: 8px auto; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); text-align: left; }
.cc-head { display: flex; gap: 6px; align-items: center; justify-content: center; margin-bottom: 10px; }
.cc-head input, .cc-head select { font: 600 1.05rem ui-monospace, Consolas, monospace; width: 6.5em; padding: 6px 8px; border: 2px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--text); text-align: center; }
.cc-head select { width: 3.2em; }
.cc-grid { display: grid; justify-content: center; font: 700 1.35rem/1.6 ui-monospace, Consolas, monospace; margin: 4px 0 8px; }
.cc { text-align: center; position: relative; min-height: 1.6em; border-radius: 4px; }
.cc.ul { border-bottom: 2px solid var(--text); }
.cc.vl { border-left: 2px solid var(--text); }
.cc.carry { font-size: .7em; color: var(--blow); line-height: 2.2; }
.cc.strike { text-decoration: line-through; text-decoration-color: var(--bad, #d33); opacity: .6; }
.cc.new { color: var(--heard); }
.cc.hl { background: color-mix(in srgb, var(--blow) 25%, transparent); }
.cc-text { min-height: 3.2em; margin: 4px 0 8px; font-size: .95rem; }
.cc-btns { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.cc-btns .btn { padding: 7px 12px; font-size: .9rem; }
.cc-auto.on { outline: 2px solid var(--blow); }
.cc-step { text-align: center; font-size: .8rem; margin-top: 6px; }

/* Анимация фруктов (0051): по одному выпрыгивают, «съеденные» гаснут и зачёркиваются; нажатие повторяет. */
.fig .fa { transform-box: fill-box; transform-origin: center; animation: fa-pop .35s cubic-bezier(.3, 1.6, .5, 1) both; cursor: pointer; }
.fig .fa.fx { animation: fa-pop .35s cubic-bezier(.3, 1.6, .5, 1) both, fa-gone .4s ease forwards; }
.fig .fcross { stroke-dasharray: 60; stroke-dashoffset: 60; animation: fa-cross .35s ease forwards; }
@keyframes fa-pop { from { transform: scale(0); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fa-gone { to { opacity: .45; } }
@keyframes fa-cross { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .fig .fa, .fig .fa.fx, .fig .fcross { animation-duration: 1ms !important; animation-delay: 0s !important; } }

/* Живые опыты физики (js/quiz/anim.js, 0052) */
.anim { max-width: 440px; margin: 8px auto; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.anim canvas { display: block; width: 100%; height: 210px; }
.an-info { min-height: 2.6em; font-size: .9rem; margin: 6px 0; }
.an-ctl { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .85rem; color: var(--muted); }
.an-ctl label { display: flex; flex-direction: column; flex: 1 1 140px; }
.an-ctl b { color: var(--text); }
.an-ctl input[type=range] { width: 100%; accent-color: var(--heard); }
.cc-btns .btn:disabled { opacity: .35; cursor: default; pointer-events: none; }
.cc.ul, .cc.vl { border-radius: 0; }

/* Необязательный урок в программе (0053): без номера, чуть с отступом. */
li.extra { list-style: none; margin-left: -.2em; font-size: .92em; }
details.qz-theory.extra > summary { color: var(--heard); }

/* Прямая ссылка на тему справочника (0053) */
.qz-theory > summary .topic-link { margin-left: 8px; padding: 0 4px; border: 0; background: none; cursor: pointer; font-size: .85em; opacity: 0; transition: opacity .15s; }
.qz-theory[open] > summary .topic-link, .qz-theory > summary:hover .topic-link { opacity: .7; }
.qz-theory > summary .topic-link:hover { opacity: 1; }

/* Код программы в задаче (0057): отступы важны (Python), поэтому pre с прокруткой вбок, а не перенос строк. */
.qz-code { margin: 6px 0 12px; padding: 10px 12px; background: var(--card); border: 1px solid var(--line); border-radius: 10px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: pre; tab-size: 4; line-height: 1.45; }
.qz-code code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: .92em; }

/* 3D-конструкции (js/quiz/struct3d.js, решение 0086): холст, подписи поверх, кнопки видов. */
.st3d { max-width: 520px; margin: 8px auto; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.st-box { position: relative; }
.st-box canvas { display: block; width: 100%; height: 320px !important; touch-action: none; cursor: grab; border-radius: 10px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--text) 6%, transparent), transparent 75%); }
.st-box canvas:active { cursor: grabbing; }
.st-labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.st-lab { position: absolute; left: 0; top: 0; font: 600 13px system-ui, sans-serif; color: var(--text); white-space: nowrap; text-shadow: 0 0 3px var(--card), 0 0 3px var(--card), 0 0 2px var(--card); }
.st-lab.c1 { color: var(--heard); } .st-lab.c2 { color: var(--blow); } .st-lab.dim { color: var(--muted); font-weight: 500; font-size: 12px; } .st-lab.small { font-size: 11px; }
.st-ctl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; }
.st-ctl .btn { padding: 5px 10px; font-size: .85rem; }
.st-hint { font-size: .75rem; }
.st3d.st-nogl .st-box canvas { background: none; }

/* Варианты ответа картинками (0086): «какая эпюра верная». */
.qz-figopts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.qz-figopts .qz-opt { display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.qz-optfig svg { max-width: 100%; height: auto; }
/* Русские счёты (0090): смахивание по горизонтали, страница листается по вертикали */
.schoty { text-align: center; margin: 8px auto; }
.schoty-svg { width: min(440px, 92vw); touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.schoty-task { font-weight: 600; margin: 4px 0; }
.schoty-num { color: var(--muted); margin: 2px 0 6px; }