/* ============================================================
   trenazher.css — спільний стиль усіх тренажерів lab.dnl.net.ua
   ------------------------------------------------------------
   Контракт сторінки тренажера:
     <body data-d="physics">            ← ключ напрямку (тека в /laboratory)
     <link rel="stylesheet" href="/assets/trenazher.css">

   Змінні (з data-d, кольори — у kolory.css):
     --d-kolir, --d-kolir-2, --d-tlo
     --tekst, --tykho, --panel, --ramka
   Класи:
     .tr-shapka    шапка: посилання «← до розділу» + h1
     .tr-polotno   обгортка canvas / SVG (гумова)
     .tr-panel     картка з керуванням
     .tr-formuly   картка формул із живими значеннями
     .tr-kn        кнопка (≥ 44 px);  .tr-kn--druha — другорядна
     .tr-povz      рядок повзунка з підписом і значенням
     .tr-zavdannia картка завдання / виклику
     .tr-pidval    примітка внизу
   Світла тема, mobile-first (від 375 px), Safari 15+.
   ============================================================ */

@import url("/assets/kolory.css");
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&display=swap");

:root{
  --tekst:#1c2430;
  --tykho:#5a6675;
  --panel:#ffffff;
  --ramka:#d9e0e8;
  --tr-radius:14px;
  --tr-shryft:"Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tr-zaholovok:"Fraunces", Georgia, "Times New Roman", serif;
  --tr-dobre:#17803d;
  --tr-pohano:#c0271f;
}

*, *::before, *::after{ box-sizing:border-box; }

html{
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
  /* тло не задаємо: колір body[data-d] сам розтягується на все вікно */
}

body{
  margin:0 auto;
  max-width:1080px;
  min-height:100vh;
  padding:0 14px 28px;
  padding-left:max(14px, env(safe-area-inset-left));
  padding-right:max(14px, env(safe-area-inset-right));
  font-family:var(--tr-shryft);
  font-size:16px;
  line-height:1.5;
  color:var(--tekst);
  background:var(--d-tlo);
  overflow-wrap:break-word;
  -webkit-tap-highlight-color:transparent;
}

img, svg, canvas, video{ max-width:100%; }
h1, h2, h3{ font-family:var(--tr-zaholovok); line-height:1.2; color:var(--d-kolir-2); }
h2{ font-size:1.15rem; margin:0 0 8px; }
h3{ font-size:1.02rem; margin:0 0 6px; }
p{ margin:0 0 10px; }
a{ color:var(--d-kolir); }

/* фокус із клавіатури — видимий на всіх елементах керування */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible{
  outline:3px solid var(--d-kolir); outline-offset:2px;
}

/* ---------- шапка ---------- */
.tr-shapka{
  display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px;
  margin:0 -14px 14px; padding:10px 14px 12px;
  background:var(--panel);
  border-bottom:3px solid var(--d-kolir);
}
.tr-shapka a{
  flex:none; display:inline-flex; align-items:center; min-height:44px;
  padding:0 14px; border-radius:999px;
  font-size:.9rem; font-weight:600; text-decoration:none; white-space:nowrap;
  color:var(--d-kolir-2); background:var(--d-tlo); border:1px solid var(--ramka);
}
.tr-shapka a:hover{ background:var(--d-kolir); color:#fff; border-color:var(--d-kolir); }
.tr-shapka h1{
  flex:1 1 220px; min-width:0; margin:0;
  font-size:1.35rem; font-weight:600; letter-spacing:-.01em;
}
.tr-shapka p{ flex:1 1 100%; margin:0; color:var(--tykho); font-size:.92rem; }

/* ---------- полотно ---------- */
.tr-polotno{
  position:relative; width:100%; margin:0 0 14px;
  background:var(--panel); border:1px solid var(--ramka);
  border-radius:var(--tr-radius); overflow:hidden;
}
/* :where() не додає специфічності — сторінка легко перевизначить висоту */
:where(.tr-polotno) canvas,
:where(.tr-polotno) svg{ display:block; width:100%; height:auto; }
.tr-polotno canvas{ touch-action:manipulation; }

/* ---------- картки ---------- */
.tr-panel, .tr-formuly, .tr-zavdannia{
  margin:0 0 14px; padding:14px;
  background:var(--panel); border:1px solid var(--ramka);
  border-radius:var(--tr-radius);
}
.tr-panel{ display:flex; flex-wrap:wrap; align-items:center; gap:12px 16px; }
.tr-panel > h2, .tr-panel > h3, .tr-panel > p{ flex:1 1 100%; margin-bottom:0; }
.tr-panel label{ font-weight:600; }

.tr-formuly{
  border-left:4px solid var(--d-kolir);
  font-family:var(--tr-zaholovok); font-size:1.02rem; line-height:1.75;
  font-variant-numeric:tabular-nums;
  overflow-wrap:anywhere;
}
.tr-formuly b, .tr-formuly strong{ color:var(--d-kolir-2); font-weight:600; }
.tr-formuly small, .tr-formuly .tr-tykho{
  font-family:var(--tr-shryft); font-size:.86rem; color:var(--tykho); line-height:1.45;
}

.tr-zavdannia{
  background:var(--d-tlo); border-color:var(--d-kolir);
  border-style:dashed;
}
.tr-zavdannia > :last-child, .tr-formuly > :last-child{ margin-bottom:0; }
.tr-tykho{ color:var(--tykho); }
.tr-dobre{ color:var(--tr-dobre); font-weight:600; }
.tr-pohano{ color:var(--tr-pohano); font-weight:600; }

/* ---------- кнопки ---------- */
.tr-kn{
  -webkit-appearance:none; appearance:none;
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:44px; padding:8px 18px; margin:0;
  font-family:var(--tr-shryft); font-size:16px; font-weight:700; line-height:1.2;
  text-decoration:none; text-align:center; cursor:pointer;
  color:#fff; background:var(--d-kolir);
  border:2px solid var(--d-kolir); border-radius:999px;
  transition:background-color .15s, border-color .15s, color .15s;
  touch-action:manipulation;
}
.tr-kn:hover{ background:var(--d-kolir-2); border-color:var(--d-kolir-2); color:#fff; }
.tr-kn:active{ transform:translateY(1px); }
.tr-kn[disabled], .tr-kn[aria-disabled="true"]{ opacity:.5; cursor:not-allowed; }
.tr-kn--druha{ color:var(--d-kolir-2); background:var(--panel); border-color:var(--ramka); }
.tr-kn--druha:hover{ color:var(--d-kolir-2); background:var(--d-tlo); border-color:var(--d-kolir); }
.tr-kn.aktyvna, .tr-kn[aria-pressed="true"]{
  color:#fff; background:var(--d-kolir-2); border-color:var(--d-kolir-2);
}

/* ---------- поля вводу (16 px — iOS не масштабує сторінку) ---------- */
input, select, textarea, button{ font-family:inherit; font-size:16px; }
input[type="number"], input[type="text"], select, textarea{
  min-height:44px; max-width:100%; padding:8px 10px;
  color:var(--tekst); background:var(--panel);
  border:1px solid var(--ramka); border-radius:10px;
}
input[type="number"]{ width:6em; }

/* ---------- повзунок ---------- */
.tr-povz{
  display:flex; flex-wrap:wrap; align-items:center; gap:4px 12px;
  flex:1 1 240px; min-width:0; width:100%;
  font-weight:600;
}
.tr-povz input[type="range"]{ flex:1 1 100%; order:3; }
.tr-povz output, .tr-povz .tr-znach{
  margin-left:auto; color:var(--d-kolir-2);
  font-family:var(--tr-zaholovok); font-variant-numeric:tabular-nums; white-space:nowrap;
}

input[type="range"]{
  -webkit-appearance:none; appearance:none;
  width:100%; min-width:0; height:44px; margin:0; padding:0;
  background:transparent; border:0; cursor:pointer;
  accent-color:var(--d-kolir); /* лише прикраса; вигляд задано нижче */
}
input[type="range"]::-webkit-slider-runnable-track{
  height:8px; border-radius:999px; background:var(--ramka);
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:28px; height:28px; margin-top:-10px; border-radius:50%;
  background:var(--d-kolir); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}
input[type="range"]::-moz-range-track{
  height:8px; border-radius:999px; background:var(--ramka);
}
input[type="range"]::-moz-range-progress{
  height:8px; border-radius:999px; background:var(--d-kolir);
}
input[type="range"]::-moz-range-thumb{
  width:24px; height:24px; border-radius:50%;
  background:var(--d-kolir); border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.35);
}

/* ---------- правило тренажерів: полотно + керування в межах екрана ----------
   .tr-ekran обгортає .tr-polotno і .tr-panel (керування) — разом ≤ 100vh.
   Висоту полотна підбирає Tr.vmistyty (trenazher.js); CSS — запасний варіант.
   Формули, «Чому так?», завдання — ПІСЛЯ .tr-ekran. */
.tr-ekran{ grid-column:1/-1; min-width:0; }
.tr-ekran > .tr-polotno{ margin-bottom:10px; }
.tr-ekran > .tr-panel{ margin-bottom:10px; padding-top:10px; padding-bottom:10px; gap:6px 14px; }
.tr-ekran > .tr-panel > h2{ display:none; }
@media (min-width:720px){
  .tr-ekran > .tr-panel .tr-povz{ flex:1 1 30%; }
}

/* ---------- підвал ---------- */
.tr-pidval{
  margin:18px 0 0; padding-top:12px;
  border-top:1px solid var(--ramka);
  color:var(--tykho); font-size:.86rem;
}

/* ---------- ширші екрани ---------- */
@media (min-width:720px){
  body{ padding-left:24px; padding-right:24px; }
  .tr-shapka{ margin-left:-24px; margin-right:-24px; padding:14px 24px 16px; }
  .tr-shapka h1{ font-size:1.8rem; }
  .tr-panel, .tr-formuly, .tr-zavdannia{ padding:18px 20px; }
  .tr-formuly{ font-size:1.08rem; }
}

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation-duration:.01ms !important; }
}