/* ==================================================================
   lab.css — дизайн-токени й базові стилі інтерактивів ліцею «Самара»
   (узгоджено з сайтом: wwwroot/css/app.css).
   Підключення: <link rel="stylesheet" href="…/content/engine/lab.css">
   Модулі player.js / notebook.js / notation.js підключають цей файл самі, якщо його немає.
   ================================================================== */

@import url("../../css/fonts.css");   /* Inter + Literata сайту */

/* Caveat — рукописний шрифт «Зошита» (variable, 400–700), self-hosted: латиниця + кирилиця */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("fonts/caveat-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Pangolin — рукописні, але однозначні латинські літери й цифри для математики в «Зошиті»
   (у Caveat велика L схожа на ℓ чи C, а «=» — на дефіс). Лише латиниця (400), self-hosted. */
@font-face {
  font-family: 'Pangolin';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/pangolin-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ------------------------------------------------------------------
   Токени
   ------------------------------------------------------------------ */
:root {
  /* лише світла схема: «затемнення сайтів» у Chrome на Android / Samsung Internet робило креслення темними на темному */
  color-scheme: only light;
  /* ті самі токени, що й на сайті (wwwroot/css/app.css, docs/design-system.md): матеріал — частина сайту */
  --brand: #3E1B50;          /* головні кнопки, вибрані вкладки, заголовки */
  --brand-hover: #2C1239;
  --brand-soft: #F1ECF4;     /* наведення на другорядні кнопки, вибраний пункт меню */
  --ink: #1F1B24;            /* найсильніший текст */
  --text: #2B2730;           /* основний текст */
  --muted: #5F5868;          /* другорядний текст (6,8:1 на білому) */
  --link: #5A2D82;           /* посилання, акценти в тексті й формулах */
  --accent: #8A6D1F;         /* приглушене золото: тонкі лінії, смужка «дошки» */
  --accent-soft: #F4EEDD;
  --paper: #F7F5F2;          /* тло сторінки інтерактиву */
  --surface: #FFFFFF;        /* тло карток */
  --line: #E3DEE6;           /* рамки, роздільники */
  --line-strong: #C9C0CF;    /* рамки кнопок, наведення */
  --focus: #5A2D82;          /* кільце фокуса */
  --on-brand: #FFFFFF;       /* текст на тлі --brand */
  --on-brand-muted: #D8CFDD; /* другорядний текст на тлі --brand */
  --radius: 6px;             /* картки, панелі (максимум) */
  --radius-sm: 4px;          /* кнопки, мітки */

  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --font-heading: 'Literata', Georgia, 'Times New Roman', serif;
  --font-math: "Cambria Math", "STIX Two Math", "Times New Roman", "Liberation Serif", "DejaVu Serif", serif;
  --font-hand: 'Caveat', 'Segoe Print', 'Comic Sans MS', cursive;
  --font-hand-math: 'Pangolin', 'Segoe Print', 'Comic Sans MS', cursive;   /* літери й цифри формул у «Зошиті» */

  /* зворотний зв'язок «Спробуй сам»: правильно / неправильно */
  --ok: #1A6B31;             /* 6,7:1 на білому */
  --ok-soft: #E7F2EA;
  --no: #B3261E;             /* 6,1:1 на білому */
  --no-soft: #FBEAE8;
  /* підсвітка «дивись сюди» (поточний рядок, частина формули) — світле приглушене золото, без світіння */
  --hl: #EFE3BD;
  --hl-ring: rgba(138, 109, 31, .38);

  /* кольори креслення — однакові в усіх завданнях (дублюються в STEREO_COLORS у stereo.js) */
  --c-edge: #1F1B24;
  --c-given: #5A2D82;
  --c-section-fill: rgba(90, 45, 130, 0.14);
  --c-section: #5A2D82;
  --c-plane-fill: rgba(90, 45, 130, 0.14);
  --c-face-fill: rgba(176, 138, 46, 0.2);
  --c-aux: #2F6690;
  --c-answer: #1A6B31;
  --c-wrong: #B3261E;
  --c-glow: #D9BE6C;

  /* зошит: клітинка й поле, як у справжньому, але тихіші; чорнило — синя кулькова ручка */
  --nb-ink: #1F3A93;
  --nb-grid: rgba(120, 165, 220, 0.34);
  --nb-margin-line: #D98C8C;

  /* Старі назви (демо рушія, давніші матеріали) — лише псевдоніми токенів вище; у новому коді не вживати */
  --primary: var(--link);
  --primary-dark: var(--brand);
  --primary-light: var(--line-strong);
  --primary-hover: var(--brand-hover);
  --primary-soft: var(--brand-soft);
  --secondary: var(--accent);
  --secondary-light: var(--accent-soft);
  --secondary-dark: var(--accent);
  --neutral-dark: var(--ink);
  --neutral-text: var(--text);
  --neutral-mid: var(--muted);
  --neutral-light: var(--paper);
  --white: var(--surface);
  --lab-bg: var(--paper);
  --lab-line: var(--line);
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --radius-md: var(--radius);
  --radius-lg: var(--radius);
}

/* «Чорно-білий» режим читання (engine/bw.js, html.lab-bw): без кольорових акцентів, контрастніший сірий текст.
   Зелений / червоний відгуку «правильно / ні» лишаються — поруч завжди є ✓ / ✗ і текст. */
html.lab-bw {
  --brand: #1F1B24; --brand-hover: #000000; --brand-soft: #EDEDED;
  --link: #1F1B24; --accent: #6A6A6A; --accent-soft: #F0F0F0; --focus: #000000;
  --muted: #474747; --line: #D4D4D4; --line-strong: #8F8F8F; --paper: #FFFFFF;
  --hl: #E6E6E6; --hl-ring: rgba(0, 0, 0, .35);
  --c-given: #1F1B24; --c-section: #1F1B24; --c-section-fill: rgba(0, 0, 0, .12); --c-plane-fill: rgba(0, 0, 0, .10);
  --c-face-fill: rgba(0, 0, 0, .07); --c-aux: #555555; --c-glow: #A8A8A8;
  --nb-ink: #1F1B24; --nb-grid: rgba(0, 0, 0, .13); --nb-margin-line: #A8A8A8;
}
html.lab-bw img, html.lab-bw .owl-figure { filter: grayscale(1); }

/* кнопка «Чорно-білий» (bw.js) — поруч із «Як користуватися» */
.lab-bw-toggle {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px;
  font: 600 14px/1 var(--font-body); color: var(--brand);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); cursor: pointer;
}
.lab-bw-toggle svg { width: 20px; height: 20px; }
.lab-bw-toggle[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .lab-bw-toggle:hover:not([aria-pressed="true"]) { border-color: var(--brand); background: var(--brand-soft); } }
.lab-bw-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------------
   Основа сторінки інтерактиву (необов'язково: клас на <body>)
   ------------------------------------------------------------------ */
.lab-body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--text);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}
.lab-body *, .lab-body *::before, .lab-body *::after { box-sizing: border-box; }
.lab-player, .lab-player *, .lab-nb, .lab-nb * { box-sizing: border-box; }

.lab-card {
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
}

.lab-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Загальні кнопки інтерактивів */
.lab-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 0 18px;
  font: 600 15px/1 var(--font-body);
  color: var(--brand); background: var(--surface);
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
@media (hover: hover) { .lab-btn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); } }
.lab-btn:disabled { opacity: .45; cursor: default; }
.lab-btn.is-primary { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
@media (hover: hover) { .lab-btn.is-primary:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); } }
/* другорядна дія з рамкою кольору бренду (як .btn--secondary на сайті) */
.lab-btn.is-accent { border-color: var(--brand); color: var(--brand); }
.lab-btn svg { width: 20px; height: 20px; fill: currentColor; flex: none; }
.lab-btn:focus-visible, .lab-pbtn:focus-visible, .lab-prog-seg:focus-visible, .lab-speed-item:focus-visible {
  outline: 2px solid var(--focus); outline-offset: 2px;
}

.lab-chip {   /* нейтральна мітка, як .tag на сайті */
  display: inline-flex; align-items: center; gap: 6px;
  padding: 1px 8px; border-radius: var(--radius-sm);
  font: 600 13px/1.5 var(--font-body);
  background: var(--surface); color: var(--muted); border: 1px solid var(--line-strong);
}

/* Сегментований перемикач (режими, вкладки) */
.lab-seg {
  display: inline-flex; padding: 2px; gap: 2px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
}
.lab-seg-btn, .lab-seg > button {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 38px; padding: 0 12px;
  font: 600 14px/1 var(--font-body); color: var(--muted);
  background: transparent; border: 0; border-radius: 3px; cursor: pointer;
  transition: background-color .15s, color .15s;
}
@media (hover: hover) { .lab-seg-btn:hover:not([aria-pressed="true"]) { color: var(--brand); background: var(--brand-soft); } }
.lab-seg-btn[aria-pressed="true"], .lab-seg > button[aria-pressed="true"] {
  background: var(--brand); color: var(--on-brand);
}
.lab-seg-btn:focus-visible, .lab-seg > button:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lab-seg-btn svg { width: 18px; height: 18px; fill: currentColor; }

/* ------------------------------------------------------------------
   Математика (notation.js): латинські й грецькі літери — курсив serif,
   цифри й дужки — прямі, індекси — знизу
   ------------------------------------------------------------------ */
.m { font-family: var(--font-math); font-style: normal; font-weight: 400; letter-spacing: 0; }
.m .m-v { font-style: italic; padding-right: .02em; }
.m .m-g { font-style: italic; }
.m .m-n, .m .m-p, .m .m-x { font-style: normal; }
.m .m-t { font-style: normal; font-family: var(--font-body); font-size: .9em; }
.m .m-op { display: inline-block; font-style: normal; margin: 0 .24em; }
.m .m-op.m-un { margin: 0 .06em 0 0; }   /* унарний мінус: «−x», «(2; −3)» */
.m .m-pu { margin-right: .22em; }
.m .m-pu.m-dec { margin-right: 0; }
.m .m-sub, .m .m-sup { font-size: .68em; line-height: 0; font-style: normal; }
.m .m-sub { vertical-align: -.3em; margin-left: .01em; }
.m .m-sup { vertical-align: .6em; }
.m .m-prime { font-style: normal; margin-left: .01em; }
.m .m-ov { text-decoration: overline; text-decoration-thickness: .06em; }
/* \sqrt: знак (SVG) тягнеться на всю висоту підкореневого виразу й сходиться з рискою над ним */
.m .m-sq { position: relative; display: inline-block; padding-left: .5em; line-height: 1.12; white-space: nowrap; }
.m .m-sq-s {
  position: absolute; left: 0; top: 0; width: .56em; height: 100%; overflow: visible;
  fill: none; stroke: currentColor; stroke-width: .06em; stroke-linejoin: round; stroke-linecap: round;
}
.m .m-sq-b { display: inline-block; line-height: 1.12; padding: .05em .06em 0 .04em; border-top: .06em solid currentColor; }
/* \sqrt[3]{a}: показник кореня — маленький, над «гачком» знака */
.m .m-sq-n { margin-left: .14em; }
.m .m-sq-i { position: absolute; left: -.14em; bottom: 50%; font-size: .55em; line-height: 1; font-style: normal; }
/* \frac: чисельник над знаменником, риска — на рівні мінуса */
.m .m-fr {
  display: inline-flex; flex-direction: column; vertical-align: middle;
  margin: 0 .08em; font-size: .8em; line-height: 1.1; text-align: center; white-space: nowrap;
}
.m .m-fr-n { padding: 0 .14em .05em; border-bottom: .07em solid currentColor; }
.m .m-fr-d { padding: .05em .14em 0; }

/* ------------------------------------------------------------------
   Формула на «дошці» (typeFormula / renderFormula)
   ------------------------------------------------------------------ */
.lab-formula { display: inline; line-height: 1.5; color: var(--ink); }
.lab-formula .m-tok {
  display: inline-block; white-space: nowrap;
  padding: 0; margin: 0; border-radius: .18em;
  transition: background-color .35s ease, box-shadow .35s ease;
}
.lab-formula .m-tok-t {   /* звичайний текст ({t:…}): переноситься словами, а не цілим блоком */
  display: inline; white-space: pre-wrap; padding: 0;
  font-family: var(--font-body); font-size: .8em; color: var(--text);
}
.lab-formula .m-tok-op { padding: 0; }
.lab-formula .m-tok-op .m-op { color: var(--link); position: relative; z-index: 1; transform-origin: 50% 60%; }
.lab-formula .m-op { color: var(--link); }
.m .m-op[data-op="cap"], .m .m-op[data-op="cup"] { font-size: 1.12em; line-height: 1; }
/* підсвічена частина формули: тихе золоте тло без рамки, світіння й пульсації (рамки навколо символів — зайвий шум) */
.lab-formula .m-tok.is-hl {
  background-color: var(--hl);
  box-shadow: 0 0 0 .08em var(--hl);
}
.lab-formula .m-a { display: inline; }
.lab-formula .m-a.is-typed { display: inline-block; animation: lab-ink .26s ease-out both; }
.lab-formula.is-typing::after {
  content: ''; display: inline-block; width: .08em; min-width: 2px; height: 1em; margin-left: .08em;
  vertical-align: -.12em; background: var(--link); border-radius: 1px;
  animation: lab-caret 1s steps(1) infinite;
}
/* ∩: дві «множини» насуваються, знак розкривається дугою */
.lab-formula .m-tok-op.is-cap { position: relative; }
.lab-venn { position: absolute; left: 50%; top: 52%; width: 0; height: 0; pointer-events: none; z-index: 0; }
.lab-venn i {
  position: absolute; width: 1.2em; height: 1.2em; margin: -.6em 0 0 -.6em; border-radius: 50%;
  opacity: 0; will-change: transform, opacity;
}
.lab-venn-a { background: rgba(90, 45, 130, .16); border: .06em solid rgba(90, 45, 130, .7); mix-blend-mode: multiply; }
.lab-venn-b { background: rgba(176, 138, 46, .22); border: .06em solid rgba(138, 109, 31, .8); mix-blend-mode: multiply; }
.lab-venn-ring { border: .07em solid rgba(90, 45, 130, .8); }

@keyframes lab-ink {
  from { opacity: 0; transform: translateY(.14em) scale(.9); filter: blur(1.5px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes lab-caret { 50% { opacity: 0; } }
/* підсвітка елемента креслення (SVG): клас .lab-glow — тихий золотий ореол, без пульсації */
.lab-glow { filter: drop-shadow(0 0 2px rgba(217, 190, 108, .95)) drop-shadow(0 0 4px rgba(217, 190, 108, .7)); }

/* ------------------------------------------------------------------
   StepPlayer (player.js)
   ------------------------------------------------------------------ */
/* одна колонка з мінімумом 0: широкий вміст (ряд кнопок, довга формула) не розпирає дошку й панель за межі екрана */
.lab-player { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; font-family: var(--font-body); color: var(--text); }

/* «дошка» */
.lab-board {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 18px 14px;
  min-height: 112px;
}
.lab-board::before { /* тонка золота лінія зліва — як у примітки (.note) на сайті */
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  border-radius: var(--radius) 0 0 var(--radius); background: var(--accent);
}
.lab-board-head { display: flex; align-items: baseline; gap: 10px; min-height: 22px; }
.lab-board-chip {
  flex: none; padding: 0 7px; border-radius: var(--radius-sm);
  font: 600 13px/1.6 var(--font-body);
  color: var(--muted); background: var(--surface); border: 1px solid var(--line-strong);
}
.lab-board-chip:empty { display: none; }
.lab-board-title { font: 600 15px/1.35 var(--font-body); color: var(--ink); }
.lab-board-formula {
  margin-top: 6px; min-height: 1.6em;
  font-size: clamp(24px, 1.4vw + 16px, 36px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.lab-board-subs {
  display: none; margin-top: 4px;
  font-size: 16px; line-height: 1.5; color: var(--text);
}
.lab-board-subs.is-on { display: block; animation: lab-fade-in .35s ease-out both; }
/* субтитри-дублікат бульбашки сови (player.js, subtitles: 'narrow') — лише там, де сова під кнопками */
@media (min-width: 1100px) { .lab-board-subs.is-narrow { display: none !important; } }
.lab-board-subs .m { font-size: 1.08em; }
/* до старту дошка порожня — підказка посередині */
.lab-board-hint {
  position: absolute; inset: 0; display: flex; align-items: center; padding: 8px 22px;
  font-size: 15px; line-height: 1.45; color: var(--muted);
}
.lab-board-hint[hidden] { display: none; }
.lab-board-hint b { color: var(--ink); }
.lab-board-hint.is-quiet { font-style: italic; color: var(--muted); }
@keyframes lab-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* панель керування */
.lab-ctrl {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 4px 12px 10px;
}
.lab-prog { position: relative; display: flex; gap: 4px; align-items: center; }
.lab-prog-seg {
  flex: 1 1 0; min-width: 0; height: 26px; padding: 0; margin: 0;
  display: flex; align-items: center;
  background: none; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.lab-prog-track {
  position: relative; display: block; width: 100%; height: 6px; overflow: hidden;
  border-radius: 2px; background: var(--line);
  transition: height .15s ease, box-shadow .15s;
}
.lab-prog-fill {
  position: absolute; inset: 0; display: block;
  background: var(--brand);
  transform-origin: 0 50%; transform: scaleX(0);
  transition: transform .12s linear;
}
.lab-prog-seg:focus-visible .lab-prog-track { height: 10px; }
@media (hover: hover) { .lab-prog-seg:hover .lab-prog-track { height: 10px; } }
.lab-prog-seg.is-current .lab-prog-track { box-shadow: 0 0 0 1px var(--line-strong); }
.lab-prog-seg.is-done .lab-prog-fill { background: var(--brand); }
.lab-prog-tip {
  position: absolute; bottom: calc(100% + 2px); left: 0; z-index: 5;
  max-width: min(420px, 92%); padding: 6px 10px;
  font: 500 13px/1.35 var(--font-body); color: var(--on-brand);
  background: var(--brand); border-radius: var(--radius-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .15s, transform .15s;
}
.lab-prog-tip.is-on { opacity: 1; transform: none; }
.lab-prog-tip .m { color: var(--on-brand-muted); }

.lab-ctrl-bar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px;
  margin-top: 2px;
}
.lab-ctrl-transport { display: flex; align-items: center; gap: 6px; }
.lab-ctrl-counter { font: 500 15px/1.2 var(--font-body); color: var(--muted); white-space: nowrap; }
.lab-ctrl-counter b { color: var(--ink); font-weight: 700; }
.lab-ctrl-tools { display: flex; align-items: center; gap: 6px; margin-left: auto; }

.lab-pbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 44px; min-width: 44px; padding: 0 10px;
  font: 600 15px/1 var(--font-body); color: var(--brand);
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
  transition: background-color .15s, border-color .15s, color .15s;
}
.lab-pbtn svg { width: 22px; height: 22px; fill: currentColor; flex: none; }
@media (hover: hover) { .lab-pbtn:hover:not(:disabled) { border-color: var(--brand); background: var(--brand-soft); } }
.lab-pbtn:disabled { opacity: .38; cursor: default; }
.lab-pbtn[hidden] { display: none; }
.lab-pbtn.is-icon { padding: 0; width: 44px; }
.lab-pbtn.is-nav { padding: 0 14px 0 8px; }
.lab-pbtn.is-nav.is-next { flex-direction: row-reverse; padding: 0 8px 0 14px; }
.lab-pbtn.is-play {
  width: 56px; height: 56px; padding: 0; border-radius: 50%;
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
.lab-pbtn.is-play svg { width: 28px; height: 28px; }
@media (hover: hover) { .lab-pbtn.is-play:hover:not(:disabled) { background: var(--brand-hover); border-color: var(--brand-hover); } }
.lab-pbtn.is-speed { min-width: 58px; font-variant-numeric: tabular-nums; }
.lab-pbtn.is-sound[aria-pressed="true"] { color: var(--brand); border-color: var(--brand); background: var(--brand-soft); }
/* режим «Кроки»: головна кнопка — «Далі» */
.lab-player[data-mode="steps"] .lab-pbtn.is-play {
  width: 48px; height: 48px; background: var(--surface); color: var(--brand); border-color: var(--brand);
}
@media (hover: hover) { .lab-player[data-mode="steps"] .lab-pbtn.is-play:hover { background: var(--brand-soft); } }
.lab-player[data-mode="steps"] .lab-pbtn.is-next:not(:disabled) {
  background: var(--brand); border-color: var(--brand); color: var(--on-brand);
}
@media (hover: hover) { .lab-player[data-mode="steps"] .lab-pbtn.is-next:not(:disabled):hover { background: var(--brand-hover); border-color: var(--brand-hover); } }

.lab-speed { position: relative; }
.lab-speed-menu {
  position: absolute; right: 0; bottom: calc(100% + 6px); z-index: 10;
  min-width: 170px; padding: 6px;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--radius);
}
.lab-speed-menu[hidden] { display: none; }
.lab-speed-title { padding: 4px 10px 6px; font: 600 13px/1.2 var(--font-body); color: var(--muted); }
.lab-speed-item {
  display: flex; width: 100%; align-items: center; min-height: 38px; padding: 0 10px;
  font: 500 15px/1 var(--font-body); color: var(--text); text-align: left;
  background: none; border: 0; border-radius: var(--radius-sm); cursor: pointer;
}
.lab-speed-item[aria-pressed="true"] { color: var(--brand); font-weight: 700; background: var(--brand-soft); }
@media (hover: hover) { .lab-speed-item:not([aria-pressed="true"]):hover { background: var(--paper); } }
.lab-speed-voices { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); }
.lab-speed-voices[hidden] { display: none; }

/* Телефон і планшет: текст не дрібніший за 14 px, цілі для пальця — не менші за 40 px (SPEC 7.5) */
@media (max-width: 1099.98px), (pointer: coarse) {
  .lab-chip, .lab-board-chip, .lab-speed-title, .lab-prog-tip { font-size: 14px; }
}
@media (pointer: coarse) {
  .lab-seg-btn, .lab-seg > button { min-height: 40px; }
  .lab-speed-item { min-height: 44px; }
  /* поділка шкали кроків: невидима зона натискання ~40 px заввишки (здебільшого вгору — внизу кнопки) */
  .lab-prog-seg { position: relative; }
  .lab-prog-seg::after { content: ''; position: absolute; left: 0; right: 0; top: -8px; bottom: -2px; min-height: 40px; }
}

/* повний екран */
[data-lab-fullscreen]:fullscreen, :root:fullscreen { background: var(--paper); overflow: auto; }
[data-lab-fullscreen]:-webkit-full-screen { background: var(--paper); overflow: auto; }

@media (max-width: 640px) {
  .lab-board { padding: 10px 14px 12px; min-height: 100px; }
  .lab-board-title { font-size: 14px; }
  .lab-ctrl { padding: 2px 10px 10px; }
  .lab-ctrl-bar { justify-content: space-between; gap: 8px; }
  .lab-ctrl-transport { flex: 1 1 100%; justify-content: center; }
  .lab-ctrl-counter { order: 2; flex: 1 1 100%; text-align: center; font-size: 14px; }
  .lab-ctrl-tools { order: 3; flex: 1 1 100%; flex-wrap: wrap; justify-content: center; margin-left: 0; gap: 6px; }
  .lab-seg-btn { padding: 0 9px; min-height: 36px; font-size: 14px; }
  .lab-pbtn.is-icon { width: 40px; min-width: 40px; height: 40px; }
  .lab-pbtn.is-speed { height: 40px; min-width: 50px; }
  .lab-prog-seg { height: 30px; }
}
@media (max-width: 380px) {
  .lab-seg-btn svg { display: none; }
}
@media (max-width: 360px) {
  .lab-ctrl { padding: 2px 8px 10px; }
  .lab-ctrl-transport { gap: 4px; }
  .lab-pbtn.is-nav:not(.is-next) .lab-pbtn-text { display: none; }   /* «Назад» — лише стрілка */
  .lab-pbtn.is-nav:not(.is-next) { width: 44px; padding: 0; }
  .lab-pbtn.is-nav.is-next { padding: 0 6px 0 12px; }
}

/* ------------------------------------------------------------------
   «Зошит» (notebook.js): клітинка 5 мм, червоне поле, кулькова ручка
   ------------------------------------------------------------------ */
.lab-nb {
  --nb-cell: 20px;
  --nb-margin: 46px;
  --nb-shift: 11px;          /* підганяє базову лінію рядка під лінію клітинки */
  position: relative;
  background: var(--surface);
  border-radius: var(--radius);
  border: 1px solid var(--line);
  overflow: hidden;
  font-family: var(--font-body);
}
.lab-nb-head {
  display: flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  background: var(--paper); border-bottom: 1px solid var(--line);
  font: 600 14px/1.2 var(--font-body); color: var(--ink);
}
.lab-nb-icon { width: 22px; height: 22px; flex: none; }
.lab-nb-paper {
  position: relative;
  min-height: calc(var(--nb-cell) * 9);
  max-height: var(--nb-max-height, none);
  overflow-x: hidden; overflow-y: auto;
  padding: var(--nb-shift) 14px var(--nb-cell) calc(var(--nb-margin) + 10px);
  background-color: var(--surface);
  background-image:
    linear-gradient(90deg, transparent calc(var(--nb-margin) - 1px), var(--nb-margin-line) calc(var(--nb-margin) - 1px), var(--nb-margin-line) calc(var(--nb-margin) + 1px), transparent calc(var(--nb-margin) + 1px)),
    linear-gradient(var(--nb-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--nb-grid) 1px, transparent 1px);
  background-size: 100% 100%, var(--nb-cell) var(--nb-cell), var(--nb-cell) var(--nb-cell);
  background-position: 0 0, 0 -1px, -1px 0;
  background-attachment: local;
}
.lab-nb-lines { position: relative; z-index: 1; }
.lab-nb-line {
  font-family: var(--font-hand);
  font-weight: 500;
  font-size: calc(var(--nb-cell) * 1.3);
  line-height: calc(var(--nb-cell) * 2);
  color: var(--nb-ink);
  letter-spacing: .01em;
  overflow-wrap: anywhere;
}
.lab-nb-line b, .lab-nb-line strong { font-weight: 700; }
.lab-nb-line .m { font-family: var(--font-hand); color: inherit; font-size: 1.04em; }
/* Літери, цифри, індекси й дужки формул — Pangolin (однозначні L, K, T, X, Y, Z, 1); слова лишаються Caveat. */
.lab-nb-line .m :is(.m-v, .m-p, .m-x, .m-n, .m-sub, .m-sup) { font-family: var(--font-hand-math); font-weight: 400; font-style: normal; }
.lab-nb-line .m .m-v { font-size: .84em; padding-right: 0; }
.lab-nb-line .m .m-p { font-size: .84em; }
.lab-nb-line .m .m-x { font-family: var(--font-hand-math), var(--font-math); font-size: .84em; }   /* ∠ △ ∞ — з serif, якщо в Pangolin немає */
.lab-nb-line .m > .m-n { font-size: .84em; }
.lab-nb-line .m .m-sub, .lab-nb-line .m .m-sup { font-size: .6em; }
.lab-nb-line .m .m-sub { vertical-align: -.28em; margin-left: .03em; }
.lab-nb-line .m .m-sub .m-n, .lab-nb-line .m .m-sup .m-n, .lab-nb-line .m .m-sub .m-v, .lab-nb-line .m .m-sup .m-v { font-size: 1em; }
.lab-nb-line .m .m-g { font-family: var(--font-math); font-style: italic; font-weight: 400; font-size: .9em; }
.lab-nb-line .m .m-t { font-family: var(--font-hand); font-size: 1em; }
/* Знаки відношень: «=» і подібні — тим самим Pangolin, ∩ ∈ ⊂ ∥ … — serif; відступи однакові з обох боків. */
.lab-nb-line .m .m-op { font-family: var(--font-hand-math), var(--font-math); font-weight: 400; font-size: 1.05em; line-height: 1; color: inherit; }
/* (вища специфічність — щоб давні поправки матеріалів під нахилені літери Caveat не робили відступи нерівними) */
.lab-nb .lab-nb-lines .lab-nb-line .m .m-op { margin: 0 .15em; }
.lab-nb .lab-nb-lines .lab-nb-line .m .m-op.m-un { margin: 0 .05em 0 0; }
.lab-nb-line .m .m-op:is([data-op="cap"], [data-op="cup"], [data-op="in"], [data-op="notin"], [data-op="subset"],
  [data-op="parallel"], [data-op="perp"], [data-op="Rightarrow"]) { font-family: var(--font-math); font-size: .95em; }
.lab-nb-line .m .m-op:is([data-op="cap"], [data-op="cup"]) { font-size: 1.12em; line-height: 1; }
/* дріб і корінь уміщаються в рядок зошита (дві клітинки) */
.lab-nb-line .m .m-fr { font-size: .68em; line-height: 1.04; }
.lab-nb-line .m .m-fr :is(.m-v, .m-p, .m-n) { font-size: 1em; }
.lab-nb-line .m :is(.m-sq, .m-sq-b) { line-height: 1.04; }
.lab-nb-line.is-writing { will-change: clip-path; }
.lab-nb-pen {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 34px; height: 34px; pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.lab-nb-pen svg { display: block; width: 100%; height: 100%; }
.lab-nb-pen.is-on { opacity: 1; }
@media (max-width: 640px) {
  .lab-nb { --nb-cell: 18px; --nb-margin: 34px; --nb-shift: 10px; }
}

/* ------------------------------------------------------------------
   Площина розборів (engine/plane.js): клітинка, осі, графіки, точки
   Тихо: сітка ледь помітна, вихідний графік сірий, головний — бренд (у чорно-білому — чорний),
   хибний варіант — червоний пунктир; виділення кроку — товща лінія.
   ------------------------------------------------------------------ */
.lab-plane { width: 100%; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.lab-plane .lab-plane-svg { display: block; width: 100%; max-width: calc(var(--pl-units, 10) * 46px); height: auto; max-height: 60vh; margin: 0 auto; font-family: var(--font-body); }
.lab-plane-grid line { stroke: var(--line); stroke-width: 1; }
.lab-plane-axes line { stroke: var(--ink); stroke-width: 1.6; }
.lab-plane-arhead { fill: var(--ink); }
.lab-plane-ticks text { font-size: 12px; fill: var(--muted); }
.lab-plane-ticks .lab-plane-axname { font: italic 15px var(--font-math, Georgia, serif); fill: var(--ink); }
.lab-plane-curve { fill: none; stroke: var(--brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.lab-plane-obj.is-base .lab-plane-curve { stroke: var(--muted); stroke-width: 2.6; }
.lab-plane-obj.is-wrong .lab-plane-curve { stroke: var(--no); stroke-dasharray: 0.02 0.015; }
.lab-plane-obj.is-aux .lab-plane-curve, .lab-plane-obj.is-aux .lab-plane-seg { stroke: var(--muted); stroke-dasharray: 6 5; }
.lab-plane-seg { stroke: var(--ink); stroke-width: 2; }
.lab-plane-arrow { stroke: var(--ink); stroke-width: 2.2; }
.lab-plane-dot { fill: var(--ink); stroke: var(--surface); stroke-width: 2; }
.lab-plane-obj.is-main .lab-plane-dot { fill: var(--brand); }
.lab-plane-obj.is-wrong .lab-plane-dot { fill: var(--no); }
.lab-plane-label text { fill: var(--ink); font-family: var(--font-math, Georgia, serif); }
.lab-plane-label text.is-plain { font-family: var(--font-body); }
.lab-plane-label text.is-halo { fill: var(--surface); stroke: var(--surface); stroke-width: 5px; stroke-linejoin: round; }
.lab-plane-label.is-note text.is-ink { fill: var(--muted); }
.lab-plane-obj.is-focus .lab-plane-curve, .lab-plane-obj.is-hl .lab-plane-curve { stroke-width: 4.6; }
.lab-plane-obj.is-focus .lab-plane-dot, .lab-plane-obj.is-hl .lab-plane-dot { stroke: var(--brand); stroke-width: 3; r: 7px; }
.lab-plane-label.is-focus text, .lab-plane-label.is-hl text { font-weight: 700; }

/* ------------------------------------------------------------------
   Мінімум руху
   ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .lab-formula .m-a.is-typed, .lab-board-subs.is-on { animation: none !important; }
  .lab-formula.is-typing::after { display: none; }
  .lab-prog-fill, .lab-prog-track, .lab-prog-tip, .lab-nb-pen { transition: none !important; }
}