/* ==================================================================
   material.css — «Перерізи многогранників» (10 клас)
   Оболонка сторінки: задача (тіло, три точки, типові задачі) → креслення → дошка й керування → сова → зошит.
   Токени й базові класи — engine/lab.css; сова — engine/owl.css. Розкладка — як у «Картці НМТ» (nmt-kartka).
   ================================================================== */

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.pz { margin: 0; background: var(--paper); }
.pz button, .pz select { font-family: inherit; }
.pz [hidden] { display: none !important; }
.pz-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.pz-app {
  max-width: 1480px; margin: 0 auto;
  padding: 12px 16px 16px;
  display: flex; flex-direction: column; gap: 10px;
}
/* повний екран: лише робоча частина; окремими правилами — невідомий псевдоклас в одному списку вимкнув би все правило */
.pz-app:fullscreen { max-width: none; background: var(--paper); overflow: auto; }
.pz-app:-webkit-full-screen { max-width: none; background: var(--paper); overflow: auto; }
.pz-app:fullscreen .pz-head { display: none; }
.pz-app:-webkit-full-screen .pz-head { display: none; }

/* ------------------------------------------------------------------ шапка */
.pz-head { display: grid; gap: 2px; }
.pz-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 7px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.pz-crumbs a { color: var(--muted); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; border-radius: 2px; }
.pz-crumbs a:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
@media (hover: hover) { .pz-crumbs a:hover { color: var(--brand); } }
.pz-crumbs span { color: var(--line-strong); }
.pz-titles { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
.pz-title {
  margin: 0; font: 700 clamp(20px, 1.2vw + 12px, 27px)/1.2 var(--font-heading);
  color: var(--brand); font-variant-numeric: lining-nums;
}
.pz-sub { margin: 0; font-size: 14px; color: var(--muted); }
.is-embed .pz-head { display: none; }
.is-embed .pz-app { padding-top: 10px; }
.pz-noscript { margin: 0; padding: 16px; }

/* ------------------------------------------------------------------ основна частина */
.pz-main { display: grid; grid-template-columns: minmax(0, 1fr) clamp(380px, 35vw, 520px); gap: 14px; align-items: start; }
.pz-left, .pz-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }

/* ------------------------------------------------------------------ задача: тіло, типові задачі, три точки */
.pz-task { padding: 10px 14px 12px; }
.pz-form { display: flex; flex-direction: column; gap: 8px; margin: 0; }
.pz-solids { display: flex; flex-wrap: wrap; }
.pz-solids .lab-seg-btn { flex: 1 1 auto; justify-content: center; min-height: 40px; padding: 0 6px; font-size: 14px; }
.pz-label { font: 600 13px/18px var(--font-body); color: var(--muted); white-space: nowrap; }

.pz-presets-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.pz-presets { flex: 1 1 14em; min-width: 0; }

.pz-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; }
.pz-pts { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pz-pts legend { padding: 0; margin-bottom: 4px; }
.pz-pt { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.pz-pt-name {
  display: inline-flex; align-items: center; justify-content: center; width: 30px; flex: none;
  font: italic 400 24px/1 var(--font-hand-math, serif); color: var(--nb-ink);
}
.pz-select {
  height: 40px; padding: 0 8px; margin: 0; max-width: 100%;
  font: 500 15px/1 var(--font-body); color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.pz-where { flex: 1 1 auto; min-width: 9.5em; }
@media (hover: hover) { .pz-select:hover:not(:focus):not(:disabled) { border-color: var(--brand); } }
.pz-select:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.pz-select[aria-invalid="true"] { border-color: var(--no); background: var(--no-soft); }
.pz-ratio { display: inline-flex; align-items: center; gap: 6px; }
.pz-ratio-hint { min-width: 5em; font-size: 15px; font-style: italic; color: var(--muted); text-align: right; white-space: nowrap; }
.pz-ratio.is-off { opacity: .45; }
.pz-pts { flex: 1 1 100%; }
.pz-actions { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 100%; }
.pz-actions .lab-btn { flex: 1 1 0; justify-content: center; min-height: 44px; }
.pz-err { margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--no); }
.pz-cond { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text); }
.pz-cond .m { font-size: 1.05em; }

/* креслення: на телефоні — за шириною, на планшеті й «лежачому» телефоні — не вище ~56 % екрана */
.pz-scene-card { position: relative; padding: 6px; min-height: 0; overflow: hidden; }
.pz-scene { position: relative; --pz-scene-h: clamp(300px, min(86vw, 56vh), 540px); }
/* підказка «Перетягни, щоб покрутити» — видно завжди (перетягування працює й у вигляді «як у підручнику») */
.pz .stereo-scene .st-hint { opacity: 1; font-size: 13px; color: var(--muted); }
.pz .stereo-scene .st-toggle { font-size: 13.5px; }

/* дошка + керування (StepPlayer) — трохи компактніше, ніж типово */
.pz .lab-board { min-height: 98px; padding: 10px 16px 12px; }
.pz .lab-board-formula { font-size: clamp(22px, 0.9vw + 15px, 31px); margin-top: 4px; }
/* твердження на дошці не рвуться посередині: перенесення — лише в текстових вставках */
.pz .lab-board-formula .lab-formula { white-space: nowrap; }
.pz .lab-board-formula .lab-formula .m-tok-t { white-space: normal; }
/* «Відео / Кроки» прибрано: ▶ — це відео, «Далі» — кроки (режим програвача перемикається сам) */
.pz .lab-ctrl-tools .lab-seg { display: none; }
.pz-work:empty { display: none; }

/* сова і зошит */
.pz-owl { padding: 10px 12px 12px; }
.pz-owl .owl { --owl-size: 96px; }
.pz-owl .owl-bubble { max-width: none; }
.pz-nb .lab-nb-paper { --nb-max-height: 420px; }
.pz-nb .lab-nb-lines:empty::before {
  content: 'Тут з’явиться запис побудови';
  display: block; padding-top: 6px;
  font: italic 500 15px/1.4 var(--font-body); color: var(--muted);
}

/* ---------- десктоп: дві колонки на один екран — ліворуч креслення з дошкою й кнопками, праворуч задача, сова
   й зошит (колонка прокручується сама, якщо не вміщається) ---------- */
@media (min-width: 1100px) and (min-height: 600px) {
  .pz-app { height: 100vh; height: 100dvh; min-height: 600px; }
  .pz-main { flex: 1 1 auto; min-height: 0; align-items: stretch; }
  .pz-left { min-height: 0; }
  .pz-scene-card { flex: 1 1 auto; min-height: 280px; display: flex; flex-direction: column; }
  .pz-scene { flex: 1 1 auto; min-height: 0; height: 100%; --pz-scene-h: 100%; }
  .pz-right { min-height: 0; overflow: auto; margin: -4px; padding: 4px; }
  .pz-task, .pz-owl { flex: none; }
  .pz-nb { flex: 1 0 auto; min-height: 220px; display: flex; flex-direction: column; }
  .pz-nb .lab-nb { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .pz-nb .lab-nb-paper { flex: 1 1 auto; min-height: 0; max-height: none; }
}
@media (min-width: 1100px) and (max-height: 830px) {
  .pz-app { gap: 8px; padding-top: 8px; padding-bottom: 10px; }
  .pz-head { grid-template-columns: auto 1fr; align-items: baseline; gap: 2px 16px; }
  .pz-titles { order: -1; }
  .pz-title { font-size: 21px; }
  .pz-sub { display: none; }
  .pz .lab-board { min-height: 82px; padding: 8px 14px 10px; }
  .pz .lab-board-formula { font-size: 25px; margin-top: 2px; }
  .pz-owl .owl { --owl-size: 88px; }
}

/* ---------- вужче: один стовпчик: задача → креслення → дошка й керування → сова → зошит ---------- */
@media (max-width: 1099.98px) {
  .pz-main { display: flex; flex-direction: column; align-items: stretch; gap: 10px; }
  .pz-left, .pz-right { display: contents; }
  .pz-task { order: 1; }
  .pz-scene-card { order: 2; }
  .pz-work { order: 3; }
  .pz-owl { order: 4; }
  .pz-nb { order: 5; }
  /* текст не дрібніший за 14 px — і на телефоні, і на планшеті */
  .pz-crumbs { font-size: 14px; }
  .pz-label { font-size: 14px; }
  .pz .owl-bubble-name { font-size: 14px; }
  .pz .lab-board-chip { font-size: 14px; }
  .pz .lab-board-title { font-size: 15px; }
  .pz .stereo-scene .st-hint { font-size: 14px; }
  .pz .stereo-scene .st-toggle { font-size: 14px; }
}
/* палець: цілі не менші за 40 px */
@media (pointer: coarse) {
  .pz-crumbs a { display: inline-flex; align-items: center; min-height: 40px; margin: -9px 0; }
  .pz-solids .lab-seg-btn { min-height: 44px; }
  .pz-select { height: 44px; }
}
@media (max-width: 760px) {
  .pz-app { padding: 10px 16px 16px; gap: 8px; }
  .pz-solids { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .pz-solids .lab-seg-btn { padding: 0 4px; font-size: 14px; }
  .pz-where { min-width: 0; }
  .pz-cond { font-size: 15.5px; }
  .pz-owl .owl { --owl-size: 72px; }
  /* дошка тримає два рядки формули — кнопки під нею не зсуваються, поки друкується довгий рядок */
  .pz .lab-board-formula { font-size: 22px; min-height: 3em; }
  .pz-scene-card { padding: 4px; }
}
/* ---------- телефон: керування в один рядок (⏮ ‹ ▶ Далі · 1× 🔊 ⛶) — як у .nmt і .cs; змінюючи правила
   StepPlayer для телефона в lab.css, онови всі три файли ---------- */
@media (max-width: 640px) {
  .pz .lab-ctrl { padding: 2px 8px 8px; }
  .pz .lab-ctrl-bar { flex-wrap: wrap; justify-content: space-between; gap: 4px; margin-top: 0; }
  .pz .lab-ctrl-transport { flex: 0 1 auto; justify-content: flex-start; gap: 4px; min-width: 0; }
  .pz .lab-ctrl-tools { flex: none; order: 3; margin-left: auto; justify-content: flex-end; gap: 4px; }
  .pz .lab-ctrl-counter {
    position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .pz .lab-ctrl { position: relative; }
  .pz .lab-pbtn.is-icon { width: 42px; min-width: 42px; height: 44px; }
  .pz .lab-pbtn.is-nav:not(.is-next) .lab-pbtn-text { display: none; }   /* «Назад» — лише стрілка */
  .pz .lab-pbtn.is-nav:not(.is-next) { width: 42px; min-width: 42px; padding: 0; }
  .pz .lab-pbtn.is-nav.is-next { padding: 0 6px 0 12px; }
  .pz .lab-pbtn.is-play, .pz .lab-player[data-mode] .lab-pbtn.is-play { width: 48px; height: 48px; }
  .pz .lab-pbtn.is-play svg { width: 24px; height: 24px; }
  .pz .lab-pbtn.is-speed { height: 44px; min-width: 46px; padding: 0 4px; }
  .pz .lab-prog-seg { height: 28px; }
  .pz-main { gap: 8px; }
  .pz .lab-board { padding: 8px 12px 8px; }
  .pz .lab-board-formula { margin-top: 2px; }
  .pz-task { padding: 8px 10px 10px; }
  .pz-pt-name { width: 24px; font-size: 22px; }
  .pz-ratio-hint { min-width: 0; }
}
@media (max-width: 430px) {
  .pz .lab-ctrl { padding-left: 4px; padding-right: 4px; }
  .pz .lab-ctrl-bar:has(.is-sound:not([hidden])):has(.is-full:not([hidden])) .lab-ctrl-transport { flex-basis: 100%; }
  .pz-ratio { flex: 1 1 100%; justify-content: flex-end; }
}
@media (max-width: 370px) {
  .pz .lab-pbtn.is-icon, .pz .lab-pbtn.is-nav:not(.is-next) { width: 40px; min-width: 40px; }
  .pz .lab-pbtn.is-speed { min-width: 42px; }
  .pz-scene { --pz-scene-h: clamp(284px, min(80vw, 56vh), 540px); }
  .pz .lab-board-formula { font-size: 21px; }
}
@media (max-width: 360px) {
  .pz-app { padding-left: 10px; padding-right: 10px; }
  .pz .lab-ctrl-bar { gap: 4px 2px; }
  .pz .lab-ctrl-transport, .pz .lab-ctrl-tools { gap: 2px; }
  .pz .lab-pbtn.is-icon, .pz .lab-pbtn.is-nav:not(.is-next) { width: 38px; min-width: 38px; }
  .pz .lab-pbtn.is-nav.is-next { padding: 0 4px 0 8px; }
}