@import url("https://fonts.googleapis.com/css2?family=Golos+Text:wght@400..700&family=Literata:ital,opsz,wght@0,7..72,300..700;1,7..72,300..700&display=swap");

/* ════════════════════════════════════════════════════════════════
   conspect.css — «Електрика та магнетизм», HTML-версія (lwarp)

   Ідея: сторінка підручника — це «аркуш під полем».
   Кожен розділ відкривається смугою з еквіпотенціалями диполя,
   решта — тиха, добре читана типографіка. Кольори — з ConspectBook.cls:
   темно-синій #002e64, індиго #3333b2, малиновий #990000, бірюзовий #006766.

   Файл самодостатній (lwarp.css більше не імпортується).
   Типово — світла тема. Темна вмикається класом html.dark
   (його ставить кнопка з book.js і запам'ятовує вибір).
   ════════════════════════════════════════════════════════════════ */

:root{
  --ink:#0d1b36;          /* текст і заголовки */
  --navy:#002e64;         /* ConspectBook: dark */
  --indigo:#3333b2;       /* ConspectBook: main — посилання, номери */
  --term:#990000;         /* ConspectBook: malina — нові терміни */
  --teal:#006766;
  --gold:#c99a2e;
  --muted:#58637a;
  --page:#fdfdfe;         /* аркуш */
  --desk:#e9edf5;         /* тло навколо аркуша */
  --rule:#d5dbe8;
  --tint:#e8eef7;        /* «Теорія» */
  --link:#2b2bb0;
  --card:#ffffff;         /* картки рисунків: завжди світлі, бо в TikZ чорні лінії */
  --card-ink:#0d1b36;
  --grid-line:#cfdff1;
  --side-bg:#0a2147;
  --side-ink:#d9e2f3;
  --side-dim:#8fa3c6;
  --shadow:0 1px 2px rgba(13,27,54,.08),0 10px 30px -12px rgba(13,27,54,.25);

  --serif:"Literata","Source Serif 4",Georgia,"Times New Roman",serif;
  --sans:"Golos Text","Segoe UI",Roboto,Arial,sans-serif;
  --measure:41rem;
}
:root.dark{
  --ink:#e6ebf6; --indigo:#9aa2ff; --term:#ff8f8f; --teal:#5fd0cb; --gold:#e3b95a;
  --muted:#9aa6bf; --page:#121a2c; --desk:#0b1120; --rule:#27324c; --tint:#18233d;
  --link:#9fa6ff; --grid-line:#25344f; --side-bg:#080f1f; --navy:#9fb8e8;
  --shadow:0 1px 2px rgba(0,0,0,.4),0 14px 36px -14px rgba(0,0,0,.7);
}

/* ── Основа ─────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:1.5rem;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--desk);color:var(--ink);
  font:400 1.125rem/1.72 var(--serif);
  font-feature-settings:"kern","liga","onum" 0;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none!important}
.center{text-align:center}
:focus-visible{outline:2px solid var(--indigo);outline-offset:3px;border-radius:2px}
::selection{background:color-mix(in srgb,var(--indigo) 28%,transparent)}

a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.18em;text-decoration-color:color-mix(in srgb,var(--link) 40%,transparent)}
a:hover{text-decoration-color:currentColor}

/* Індикатор прочитаного (де підтримується scroll-driven animations) */
@supports (animation-timeline:scroll()){
  body::before{
    content:"";position:fixed;inset:0 0 auto 0;height:3px;z-index:60;
    background:linear-gradient(90deg,var(--indigo),var(--term));
    transform-origin:0 50%;transform:scaleX(0);
    animation:read-progress linear both;animation-timeline:scroll(root);
  }
  @keyframes read-progress{to{transform:scaleX(1)}}
}

/* ── Каркас сторінки ────────────────────────────────────────── */
.pagegrid{
  display:grid;grid-template-columns:minmax(17rem,21.5rem) minmax(0,1fr);
  grid-template-rows:auto 1fr auto;min-height:100vh;
}
.topnavigation{display:none}
.sidetoccontainer{
  grid-column:1;grid-row:1/-1;position:sticky;top:0;align-self:start;
  height:100vh;background:var(--side-bg);color:var(--side-ink);
}
main.bodycontainer{grid-column:2;grid-row:2;min-width:0}
.botnavigation{grid-column:2;grid-row:3}

.textbody{
  max-width:calc(var(--measure) + 5rem);margin:2.5rem auto 0;
  padding:3.25rem 2.5rem 4.5rem;background:var(--page);
  box-shadow:var(--shadow);border-radius:3px;
}
.textbody>*{max-width:var(--measure);margin-left:auto;margin-right:auto}

/* ── Бічний зміст ───────────────────────────────────────────── */
.sidetoc{height:100%;display:flex;flex-direction:column;font-family:var(--sans)}
.sidetoccontents .tocchapter:not(:has(.sectionnumber)){display:block}
.sidetoctitle{padding:1.6rem 1.4rem 1.1rem;border-bottom:1px solid rgba(255,255,255,.1)}
.sidetoctitle p{margin:0}
.sidetocthetitle{
  display:block;font:italic 500 1.35rem/1.25 var(--serif);color:#fff;letter-spacing:.005em}
.sidetoctitle p:last-child{margin-top:.45rem;font-size:.8rem;color:var(--side-dim)}
.sidetoccontents{flex:1;overflow-y:auto;padding:.6rem .6rem 2.5rem;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.2) transparent}
.sidetoccontents p{margin:0;line-height:1.35}
.sidetoccontents a{
  text-indent:-1em;display:block;text-decoration:none;color:var(--side-ink);
  padding:.34rem .8rem;border-radius:4px;font-size:.86rem;
  transition:background .15s,color .15s;
}
.sidetoccontents a:hover{background:rgba(255,255,255,.08);color:#fff}
.sidetoccontents .linkhome{font-size:.82rem;color:var(--side-dim);padding-bottom:.6rem}
.sidetoccontents .tocchapter{
  margin-top:.55rem;padding-top:.5rem;font-weight:600;font-size:.9rem;color:#fff;
  display:grid;grid-template-columns:2rem 1fr;column-gap:.2rem;align-items:baseline;
}
.sidetoccontents .sectionnumber{text-indent:0}
.sidetoccontents .tocchapter .sectionnumber{color:var(--gold);font-variant-numeric:tabular-nums}
.sidetoccontents .tocsection{
  display: block;
  padding-left: 4.3rem;
  text-indent: -2.7rem;
  color: var(--side-dim);
}
.sidetoccontents .tocsection .sectionnumber{font-variant-numeric:tabular-nums;opacity:.8}
.sidetoccontents .tocsection:not(:has(.sectionnumber)){display:block;padding-left:calc(4.3rem + 1em);font-style:italic}
.sidetoccontents a.is-current,.sidetoccontents a.is-active{background:rgba(255,255,255,.1);color:#fff}
.sidetoccontents a.is-active{box-shadow:inset 3px 0 0 var(--gold)}
.sidetoccontents p.toc-collapsed{display:none}
.sidetoccontents .toc-all{
  all:unset;cursor:pointer;display:block;margin:.5rem .8rem;font:500 .78rem var(--sans);
  color:var(--side-dim);
}
.sidetoccontents .toc-all:hover{color:#fff}
.sidetoccontents .toc-all:focus-visible{outline:2px solid var(--gold)}

.theme-btn,.toc-fab{
  font:500 .8rem var(--sans);cursor:pointer;color:var(--side-ink);
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:999px;padding:.3rem .85rem;margin-top:.8rem;
}
/* кнопки угорі бічної панелі: тема + «Усі параграфи» в один ряд */
.sidetoc-actions{display:flex;flex-wrap:wrap;gap:.45rem;margin-top:.8rem}
.sidetoc-actions .theme-btn{margin-top:0}
.theme-btn:hover,.toc-fab:hover{background:rgba(255,255,255,.16);color:#fff}

/* ── Заголовки ──────────────────────────────────────────────── */
/* h1 — назва книги: «бігучий колонтитул» над розділом */
.textbody>h1{
  margin:0 auto 1.4rem;font:500 .85rem/1.2 var(--sans);color:var(--muted);letter-spacing:.02em}

/* Розділ: смуга з еквіпотенціалями диполя (+ вгорі праворуч, − внизу) */
h3{
  position:relative;overflow:hidden;
  max-width:none!important;
  margin:0 -1rem 2.2rem;padding:2.2rem 24% 2rem 2rem;border-radius:4px;
  min-height:11rem;color:#fff;
  font:600 2rem/1.18 var(--sans);letter-spacing:-.005em;
  background:
    repeating-radial-gradient(circle at 86% 24%,transparent 0 17px,rgba(255,255,255,.085) 17px 18px),
    repeating-radial-gradient(circle at 104% 92%,transparent 0 17px,rgba(255,196,196,.10) 17px 18px),
    radial-gradient(circle at 86% 24%,rgba(120,130,255,.38),transparent 38%),
    linear-gradient(135deg,#00265a 0%,#001a3f 100%);
}
h3::after{ /* маркер заряду + */
  content:"+";position:absolute;right:calc(14% - 11px);top:calc(24% - 11px);
  width:22px;height:22px;border-radius:50%;background:#fff;color:#002e64;
  font:700 18px/21px var(--sans);text-align:center;
}
h3 .sectionnumber{
  float:left;margin:0 1.4rem 0 0;
  font:300 6rem/.82rem var(--serif);height:5.2rem;line-height:1;
  color:var(--gold);font-variant-numeric:lining-nums;
}
h3 .sectionnumber{line-height:.95}
h3 a{color:inherit}
.textbody>h3{margin-left:-1rem;margin-right:-1rem}

/* Параграф (§): число висить у полі на широких екранах */
h4{
  position:relative;margin:3.2rem auto .9rem;
  font:650 1.62rem/1.25 var(--sans);letter-spacing:-.005em;color:var(--ink);
  text-wrap:balance;
}
h4:empty{display:none}
h4 .sectionnumber{color:var(--indigo);font-weight:400;margin-right:.1rem}
@media (min-width:1180px){
  h4 .sectionnumber{position:absolute;right:calc(100% + .9rem);top:0;
    text-align:right;white-space:nowrap}
}
/* «Підсумки», «Задачі» — службові підрозділи без номера */
h4:not(:has(.sectionnumber)){
  margin-top:3.6rem;padding-top:.9rem;font-size:1.25rem;font-weight:600;
  border-top:3px solid var(--ink);color:var(--ink);
}
h5{
  margin:2.2rem auto .5rem;font:600 1.08rem/1.3 var(--sans);color:var(--indigo);
}
h5 .sectionnumber{margin-right:.4rem}

/* ── Текст ──────────────────────────────────────────────────── */
p{margin:0 auto 1em;hyphens:auto;-webkit-hyphens:auto;text-wrap:pretty}
em{font-style:italic}
b,strong{font-weight:650}
sup,sub{font-size:.72em;line-height:0}

/* Нові терміни: lwarp дає inline color:#990000 */
/* Лише «малиновий» (#990000, \emphx) переводимо на колір теми; інші \textcolor (наприклад, білий
   текст у заголовках таблиць) лишаються зі своїм inline-кольором. */
.textcolor[style*="990000" i]{color:var(--term)!important}
em .textcolor{font-weight:500}
.textup{font-style:normal;white-space:nowrap}

/* Формули (MathJax) */
mjx-container{color:inherit}
mjx-container[display="true"]{
  display:block!important;margin:1.25em 0!important;padding:.15em 0;
  overflow-x:auto;overflow-y:hidden;max-width:100%;
  scrollbar-width:thin;
}
mjx-container:not([display="true"]){white-space:nowrap}

/* Списки lwarp: маркер — окремий span, тому робимо «висячий» відступ */
ul.enumerate,ul.itemize,ul.list{list-style:none!important;margin:1.1em auto;padding:0}
ul.enumerate>li,ul.itemize>li,ul.list>li{padding-left:2.1rem;margin:0 0 .7em;position:relative}
ul.enumerate>li>p,ul.itemize>li>p,ul.list>li>p{margin-bottom:.6em}
.listmarker{
  display:inline-block;width:2.1rem;margin-left:-2.1rem;
  font-family:var(--sans);font-weight:600;font-size:.88em;color:var(--indigo);
}
ul.itemize .listmarker{font-size:1em;color:var(--term);text-align:center}

/* Рисунки: світла «картка» в обох темах (TikZ-діаграми мають чорні лінії) */
figure{margin:2rem auto;padding:0;max-width:100%}
figure .center{
  background:var(--card);color:var(--card-ink);border:1px solid var(--rule);
  border-radius:4px;padding:1.2rem 1rem .9rem;text-align:center;overflow-x:auto;
}
figure .center>p{margin:0}
/* рисунок без обгортки .center (lwarp: <figure><p><a><img>) — центруємо сам абзац */
figure>p{margin:0;text-align:center}
/* Кілька minipage в одному рисунку (портрети, підрисунки) — поруч, як у друкованій книзі; на вузькому екрані
   переносяться. lwarp задає їм лише ширину (style="width:219pt"), розкладку дає його власний CSS, якого тут немає. */
figure .center:has(>div.minipage){
  display:flex;flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:.6rem .8rem;
  font-size:0;                          /* \hfill / em-пробіли lwarp між minipage — без ширини, щоб ті вміщалися в ряд */
}
figure div.minipage{
  display:flex;flex-direction:column;align-items:center;flex:0 1 auto;
  min-width:0;max-width:100%;text-align:center;font-size:1.125rem;
}
/* minipage без явної ширини (як Soft/Hard у ch10): без цього її базова ширина = довжина підпису в один рядок,
   тож дві такі не вміщаються поруч. min-content звужує її до рисунка, min-width лишає підпису пристойну ширину. */
figure div.minipage:not([style*="width"]){width:min-content;min-width:14rem}
figure div.minipage>p{margin:.2rem 0;line-height:1.35}
figure .center:has(>div.minipage)>.figurecaption{flex:0 0 100%}
img{max-width:100%;height:auto}
img.lateximage,img.inlineimage{max-width:100%!important;vertical-align:middle}
/* lwarp задає розмір інлайном: або width, або height. Не перебиваємо його через !important — інакше рисунки з
   height:199pt (Soft/Hard тощо) розтягуються до натурального розміру і не стають поруч. */
img.lateximage:not([style*="height"]),img.inlineimage:not([style*="height"]){height:auto}
@media (max-width:700px){img.lateximage,img.inlineimage{height:auto!important}}
.figurecaption{
  margin:.9rem auto 0;font:500 .86rem/1.4 var(--sans);color:#4a5670;text-align:center;
  max-width:34rem;
}
/* підписи на малюнку: lwarp ховає "джерело" у коментарі, лишається тільки img */

/* Виноски */
.footnotes{
  margin:1.6rem auto;padding-top:.7rem;border-top:1px solid var(--rule);
  font:.84rem/1.55 var(--sans);color:var(--muted);
}
.footnotes p{margin-bottom:.4em;hyphens:manual}
.footnotes sup{color:var(--indigo);font-weight:600}

/* ── Епіграф ────────────────────────────────────────────────── */
.epigraph{margin:-.6rem auto 2.4rem!important;padding-right:.2rem;max-width:30rem;margin-left:auto!important;margin-right:0!important}
.epigraph .qitem p{margin:0;font:italic 400 1rem/1.6 var(--serif);color:var(--muted);text-align:left;hyphens:manual}
.epigraphsource p{margin:.5rem 0 0;font:500 .85rem var(--sans);color:var(--ink);text-align:right}
.epigraphsource p::before{content:"— "}

/* ── Врізки ConspectBook (кольори й сенс — як у PDF) ──────────── */
.cb-theory,.cb-attention,.cb-example,.cb-historical,.cb-quote,.cb-questions,.cb-answer,.cb-pict{
  margin:1.7rem auto;padding:1.05rem 1.35rem .3rem;
  overflow-x:auto;border-radius:0 4px 4px 0;
}
.cb-theory>:last-child,.cb-attention>:last-child,.cb-example>:last-child,
.cb-historical>:last-child,.cb-quote>:last-child,.cb-questions>:last-child,
.cb-answer>:last-child{margin-bottom:.8rem}

/* Теорія: спокійна синя панель */
.cb-theory{background:var(--tint);border-left:5px solid var(--navy);font-size:.97em}

/* Зверніть увагу: жовтий папірець із круглим «!» */
.cb-attention{
  position:relative;padding-left:3.6rem;
  background:color-mix(in srgb,#ffd84a 16%,var(--page));
  border-left:5px solid #e0b400;
}
.cb-attention::before{
  content:"!";position:absolute;left:1.05rem;top:1.05rem;
  width:1.6rem;height:1.6rem;border-radius:50%;background:#e0b400;color:#241a00;
  font:700 1rem/1.6rem var(--sans);text-align:center;
}
.cb-attention p{font-size:.97em}

/* Приклад: клітинка в клітинку, як зошит */
.cb-example{
  border:1px solid var(--navy);border-left-width:5px;background-color:var(--page);
  background-image:
    linear-gradient(var(--grid-line) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-line) 1px,transparent 1px);
  background-size:1.3rem 1.3rem;font-size:.97em;
}

/* Історична довідка: тепла сепія; перший <b> — її заголовок */
.cb-historical{
  background:color-mix(in srgb,#b98a3c 11%,var(--page));
  border-left:5px solid #8a6326;font-size:.96em;
}
.cb-historical>p:first-child>b:first-child{
  font:600 .85rem var(--sans);color:#8a6326;
}
:root.dark .cb-historical>p:first-child>b:first-child{color:#e3b95a}

/* Цитата: велика лапка, без рамки */
.cb-quote{
  position:relative;border:0;border-radius:0;background:transparent;
  padding:2.6rem 1rem .4rem 3.6rem;font-style:italic;
}
.cb-quote::before{
  content:"«";position:absolute;left:.2rem;top:.4rem;
  font:italic 300 6rem/1 var(--serif);color:var(--gold);opacity:.9;
}
.cb-quote p{font-size:1.03em;hyphens:manual}
.cb-quote p:last-child{
  margin:.4rem 0 .8rem;text-align:right;font:500 .85rem/1.4 var(--sans);font-style:normal;color:var(--muted);
}

/* Контрольні питання: бірюзова панель */
.cb-questions{
  background:color-mix(in srgb,var(--teal) 7%,var(--page));
  border:1px solid color-mix(in srgb,var(--teal) 45%,transparent);
  border-left:5px solid var(--teal);padding-top:.9rem;font-size:.97em;
}
.cb-questions>p:first-child{margin-bottom:.7rem}
.cb-questions>p:first-child b{font:650 1.02rem var(--sans);color:var(--teal)}
.cb-questions .listmarker{color:var(--teal)}

/* Відповідь */
.cb-answer{background:color-mix(in srgb,#e0b400 8%,var(--page));border-left:5px solid #e0b400;font-style:italic}

/* Рисунок-врізка */
.cb-pict{border:1px solid var(--rule);background:var(--card);color:var(--card-ink);text-align:center;border-radius:4px}


/* Постулат: бірюзова панель із кружком на лівій лінії,
   як у PDF-версії (\newtcolorbox{postulate} у ConspectBook.cls) */
.cb-postulate{
  position:relative;
  margin:1.7rem auto;
  padding:1.05rem 1.35rem .35rem 3.6rem;
  background:color-mix(in srgb,#00bcd4 8%,var(--page));
  border-left:5px solid #0064aa;
  border-radius:0 4px 4px 0;
  font-style:italic;
  font-weight:600;
  overflow-x:auto;
  font-size:.97em;
}
.cb-postulate::before{
  content:"";
  position:absolute;left:-10px;top:1.05rem;
  width:.7rem;height:.7rem;border-radius:50%;
  background:#0064aa;
}
.cb-postulate>p:first-child{
  margin-top:0;font-style:normal;font-weight:700;
  text-decoration:underline;text-decoration-thickness:1px;
  text-underline-offset:.15em;
  font-family:var(--sans);
  font-size:.95em;color:#0064aa;
}
.cb-postulate>:last-child{margin-bottom:.8rem}

/* Задачі: кожна — картка з номером */
.theorembodyproblem{
  margin:.7rem auto;padding:.95rem 1.2rem .35rem;border-radius:0 4px 4px 0;
  border:1px solid var(--rule);border-left:5px solid var(--gold);background:var(--page);
  font-size:.97em;
}
.theorembodyproblem ul.list{margin:0}
.theorembodyproblem ul.list>li{padding-left:3.4rem}
.theorembodyproblem .listmarker{width:3.4rem;margin-left:-3.4rem;font-size:.92em;color:var(--indigo)}
.theoremheaderplain{font-weight:650}
.theorembodyproblem em:first-of-type{font-family:var(--sans);font-style:normal;font-weight:600;font-size:.95em}

/* ── Таблиці (на випадок) ────────────────────────────────────── */
table{border-collapse:collapse;margin:1.6rem auto;max-width:100%;font:.95rem/1.45 var(--sans)}
th,td{padding:.45rem .8rem;border-bottom:1px solid var(--rule)}
th{font-weight:650;border-bottom:2px solid var(--ink)}
td.tdl{text-align:left} td.tdc{text-align:center} td.tdr{text-align:right}
pre,code,.verbatim{font:.88rem/1.55 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
pre{background:var(--tint);padding:1rem 1.2rem;border-radius:4px;overflow-x:auto}

/* ── Нижня навігація ─────────────────────────────────────────── */
.botnavigation{
  max-width:calc(var(--measure) + 5rem);width:100%;margin:0 auto;padding:1.4rem 1rem 3rem;
  font:500 .92rem var(--sans);display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;
}
.botnavigation a{
  text-decoration:none;color:var(--ink);background:var(--page);border:1px solid var(--rule);
  padding:.7rem 1.1rem;border-radius:4px;box-shadow:var(--shadow);
}
.botnavigation a:hover{border-color:var(--indigo);color:var(--indigo)}
.botnavigation .nav-next{margin-left:auto;text-align:right}
.botnavigation small{display:block;font-weight:400;font-size:.75rem;color:var(--muted)}

/* ── Головна сторінка ────────────────────────────────────────── */
.homepagegrid{display:block}
.homepagegrid .bodycontainer{display:block}
.homepagegrid .textbody{margin-top:0;border-radius:0 0 4px 4px;padding-top:0;overflow:hidden}
.homepagegrid .textbody>*{max-width:var(--measure)}
.titlepage{
  position:relative;max-width:none!important;margin:0 -2.5rem 3rem!important;
  padding:5.5rem 2.5rem 4.5rem;color:#fff;overflow:hidden;
  background:
    repeating-radial-gradient(circle at 78% 34%,transparent 0 19px,rgba(255,255,255,.08) 19px 20px),
    repeating-radial-gradient(circle at 100% 100%,transparent 0 19px,rgba(255,190,190,.10) 19px 20px),
    radial-gradient(circle at 78% 34%,rgba(120,130,255,.4),transparent 36%),
    linear-gradient(135deg,#00265a,#001638);
}
.titlepage h1{
  margin:0 0 1.6rem;max-width:34rem;
  font:300 clamp(2.8rem,7vw,4.6rem)/1.02 var(--serif);letter-spacing:-.02em;color:#fff;
}
.titlepage .oneauthor p{margin:0;font:500 1.1rem var(--sans);color:#dfe7f7}
.titlepage .titledate p{margin:.3rem 0 0;font:.9rem var(--sans);color:#9fb3d9}
.homepagegrid h3{
  min-height:0;background:none;color:var(--ink);padding:0;margin:0 0 1rem;overflow:visible;
  font:650 1.7rem var(--sans);
}
.homepagegrid h3::after{display:none}
.homepagegrid h3{margin-top:3rem}                 /* заголовки розділів не липнуть до попереднього блоку */
.homepagegrid nav.toc + h3{margin-top:4.5rem}    /* Передмова — після змісту */
nav.toc{max-width:var(--measure);margin:0 auto}
nav.toc p{margin:0;line-height:1.35;hyphens:manual}
nav.toc a{text-indent:-1em;display:grid;text-decoration:none;color:var(--ink);align-items:baseline}
nav.toc .tocchapter{
  grid-template-columns:3.2rem 1fr;margin-top:1.5rem;padding:.7rem 0 .45rem;
  border-top:2px solid var(--ink);font:650 1.1rem var(--sans);
}
nav.toc .tocchapter .sectionnumber{font:300 1.9rem/1 var(--serif);color:var(--indigo)}
nav.toc .tocsection{
  grid-template-columns:3.2rem 1fr;padding:.22rem 0;font:.95rem var(--sans);color:var(--muted);
}
nav.toc .sectionnumber{text-indent:0}
nav.toc .tocsection .sectionnumber{font-variant-numeric:tabular-nums}
nav.toc .tocsection:not(:has(.sectionnumber)){display:block;padding-left:calc(3.2rem + 1em);font-style:italic}
/* Розділ без номера (Передмова, Вибір системи одиниць, Предметний покажчик): один текстовий елемент,
   у grid він потрапляв у вузьку колонку для номера й ламався по словах. Текст — у колонку назв. */
nav.toc .tocchapter:not(:has(.sectionnumber)){display:block;padding-left:calc(3.2rem + 1em)}
/* Частина (I, II): окремий заголовок з великим відступом зверху, а не рядок «II» над назвою,
   що липнув до попереднього розділу. Раніше для .tocpart стилів не було зовсім. */
nav.toc .tocpart{
  grid-template-columns:3.2rem 1fr;margin:3.6rem 0 .3rem;padding:.2rem 0 .3rem;
  font:600 1.3rem/1.25 var(--serif);color:var(--ink);
}
nav.toc .tocpart .sectionnumber{font:400 1.5rem/1 var(--serif);color:var(--indigo)}
nav.toc a:hover{color:var(--indigo)}
/* Підзаголовок «Додатки»: postprocess дає йому inline-стиль для темного sidetoc (золотий, лінія rgba білого) —
   у головному змісті робимо як заголовок розділу без номера */
nav.toc .sidetoc-appendix-title{
  margin:1.5rem 0 0!important;padding:.7rem 0 .45rem 3.2rem!important;
  border-top:2px solid var(--ink)!important;
  font:650 1.1rem var(--sans)!important;color:var(--ink)!important;
}

/* ════════════════════════════════════════════════════════════════
   Примусова темна тема для показу результатів Pagefind у sidetoc
   ════════════════════════════════════════════════════════════════ */
#search {
  --pagefind-ui-scale: 0.82;
  --pagefind-ui-primary: #f1c40f;
  --pagefind-ui-text: #e6ebf6;
  --pagefind-ui-subtext: #8fa3c6;
  --pagefind-ui-background: #080f1f;
  --pagefind-ui-border: rgba(255, 255, 255, 0.15);
  --pagefind-ui-font: var(--sans);
}

/* 1. Перекриваємо глобальне правило a { color: #2b2bb0 }, яке робило текст синім */
#search, #search * {
  color: #d9e2f3 !important;
}

/* 2. Назви розділів та посилання підрозділів — яскраві золото-жовті */
#search a,
#search .pagefind-ui__result-title,
#search .pagefind-ui__result-link,
#search .pagefind-ui__result-nested a {
  color: #f1c40f !important;
  text-decoration: none !important;
}

#search a:hover {
  text-decoration: underline !important;
}

/* 3. Текст знайдених уривків — чіткий світло-сірий */
#search .pagefind-ui__result-excerpt,
#search .pagefind-ui__result-excerpt *,
#search .pagefind-ui__result-nested,
#search .pagefind-ui__result-nested * {
  color: #d1d5db !important;
  font-size: 0.82rem;
  line-height: 1.35;
}

/* 4. Поле вводу пошуку */
#search input {
  color: #ffffff !important;
  background-color: rgba(0, 0, 0, 0.35) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

#search .pagefind-ui__message {
  color: #94a3b8 !important;
}

/* 5. Жовтий маркер підсвітки тексту з темним контрастним текстом */
#search mark {
  background-color: #f59e0b !important;
  color: #0f172a !important;
  border-radius: 2px;
  padding: 0 3px;
  font-weight: 600;
}

/* 6. Розкладка: результати прокручуються й, поки є запит, заступають зміст */
#search { flex: 0 0 auto; min-height: 0; display: flex; flex-direction: column; }
#search .pagefind-ui { min-height: 0; display: flex; flex-direction: column; }
#search .pagefind-ui__form { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
#search .pagefind-ui__search-input { flex: 0 0 auto; }
#search .pagefind-ui__drawer { display: block; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-bottom: 2rem; }
.sidetoc:has(#search .pagefind-ui__drawer:not(.pagefind-ui__hidden)) #search { flex: 1 1 auto; }
.sidetoc:has(#search .pagefind-ui__drawer:not(.pagefind-ui__hidden)) .sidetoccontents { display: none; }

/* 7. Компактні картки: назва розділу, під нею — знайдені параграфи */
#search .pagefind-ui__results-area { margin-top: .4rem; min-width: 0; }
#search .pagefind-ui__result { padding: .75rem 0 .85rem; }
#search .pagefind-ui__result-title { font-size: .95rem; line-height: 1.3; }
#search .pagefind-ui__result-nested { padding-left: .9rem; margin-top: .45rem; }
#search .pagefind-ui__result-nested .pagefind-ui__result-link { font-size: .85rem; }
#search .pagefind-ui__button { margin-top: 1rem; }

/* 8. Формули MathJax у результатах: reset Pagefind (all: unset) ламає службовий текст MathJax */
#search mjx-assistive-mml {
  position: absolute !important; top: 0; left: 0;
  clip: rect(1px, 1px, 1px, 1px) !important; clip-path: inset(50%) !important;
  width: 1px !important; height: 1px !important; padding: 0 !important; border: 0 !important;
  overflow: hidden !important; display: block !important; user-select: none;
}
#search mjx-container { max-width: 100%; }
#search mjx-container[display="true"] { display: block; margin: .4rem 0; overflow-x: auto; overflow-y: hidden; }
#search a mjx-container, #search a mjx-container * { color: inherit !important; }

/* 9. Відступи: без них поле й результати впираються в краї бічної панелі */
#search { padding: .8rem .6rem .2rem; }

/* 10. Кнопка «Очистити»: її підпис має змінну ширину (≈93px і більше) при правому відступі поля лише ≈57px —
   вона наїжджала на введений текст, а у вузькій панелі виступала за її межі. Тому це хрестик фіксованого
   розміру; підпис лишається в DOM (font-size:0 ховає його лише візуально), підказку-title додає book.js. */
#search .pagefind-ui__search-input { padding-right: 2.9rem !important; }
#search .pagefind-ui__search-clear {
  box-sizing: border-box; width: 1.9rem; height: 1.9rem; min-width: 0; padding: 0 !important; margin: 0;
  top: calc((64px * var(--pagefind-ui-scale) - 1.9rem) / 2) !important; right: .55rem !important;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: 0 !important; line-height: 0; cursor: pointer;
  border: 0; border-radius: 50%; background: rgba(255, 255, 255, .1) !important;
}
#search .pagefind-ui__search-clear::before {
  content: "\00d7"; font: 400 1.3rem/1 var(--sans); color: #d9e2f3; transform: translateY(-.05em);
}
#search .pagefind-ui__search-clear:hover { background: rgba(255, 255, 255, .22) !important; }
#search .pagefind-ui__search-clear:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }

/* ── Посилання на сторінку посібника (index.html) і PDF: дописує publish_html.py ── */
.sidetoctitle .sidetoc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .15rem .55rem;
  margin-top: .45rem; font-size: .8rem; color: var(--side-dim); }
.sidetoc-meta a { color: #d9e2f3; text-decoration: none; font-weight: 500; }
.sidetoc-meta a:hover { color: var(--gold); text-decoration: underline; }
/* головна сторінка книги (без бічної панелі): рядок над назвою */
.book-meta { display: flex; flex-wrap: wrap; align-items: center; gap: .2rem .6rem;
  margin: 0 0 1.2rem; font: .85rem/1.4 var(--sans); opacity: .8; }
.book-meta a { text-decoration: none; }
.book-meta a:hover { text-decoration: underline; }

/* ── Мобільна адаптація пошуку ──────────────────────────────── */
@media (max-width: 980px) {
  #search .pagefind-ui__search-input {
    font-size: 16px !important; /* Запобігає небажаному зуму в iOS Safari */
  }

}

/* ── Вузькі екрани: бічний зміст — висувна шухляда ──────────── */
@media (min-width:1180px){
  .textbody{max-width:calc(var(--measure) + 11rem);padding-left:5.5rem;padding-right:5.5rem}
  .textbody>h3{margin-left:-2.2rem;margin-right:-2.2rem}
  .titlepage{margin-left:-5.5rem!important;margin-right:-5.5rem!important;padding-left:5.5rem;padding-right:5.5rem}
}
@media (max-width:980px){
  .pagegrid{display:block}
  .topnavigation{
    display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    position:sticky;top:0;z-index:40;padding:.55rem 1rem;
    background:var(--side-bg);font:500 .85rem var(--sans);
  }
  .topnavigation a{color:var(--side-ink);text-decoration:none}
  .toc-fab{margin:0}
  .sidetoccontainer{
    position:fixed;inset:0 auto 0 0;width:min(22rem,88vw);height:100vh;z-index:70;
    transform:translateX(-102%);transition:transform .25s ease;
  }
  html.toc-open .sidetoccontainer{transform:none;box-shadow:12px 0 40px rgba(0,0,0,.4)}
  html.toc-open body::after{content:"";position:fixed;inset:0;z-index:65;background:rgba(5,10,25,.55)}
  .textbody{margin:0;border-radius:0;padding:2rem 1.2rem 3.5rem;box-shadow:none}
  .textbody>h3{margin:0 0 1.8rem;padding:1.6rem 20% 1.5rem 1.3rem;font-size:1.5rem;min-height:9rem}
  h3 .sectionnumber{font-size:4.4rem;height:3.8rem;margin-right:1rem}
  .titlepage{margin:0 -1.2rem 2.2rem!important;padding:3.5rem 1.2rem 3rem}
  body{font-size:1.04rem}
  h4{font-size:1.38rem}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .sidetoccontainer{transition:none}
}

/* ── Друк: чиста сторінка без навігації ──────────────────────── */
@media print{
  body{background:#fff;color:#000;font-size:11pt}
  .sidetoccontainer,.topnavigation,.botnavigation{display:none!important}
  .pagegrid{display:block}
  .textbody{box-shadow:none;margin:0;padding:0;max-width:none}
  h3{color:#000;background:none;border-bottom:2px solid #000;min-height:0;padding:0 0 .5rem}
  h3::after{display:none}
  h3 .sectionnumber{color:#000}
  .cb-example{background-image:none}
}

/* Рисунки в тексті: не ширші за --fig-max-w; ті, що мають лише висоту, ще й не вищі за --fig-max-h/екран.
   lwarp переносить з TeX інлайнову ширину (width:434pt тощо) — вона перебивалась би без !important.
   Висота auto => пропорції зберігаються. Повний розмір — за кліком (lightbox у book.js). */
:root{--fig-max-w:18rem;--fig-max-h:20rem}
figure img.inlineimage{max-width:min(100%,var(--fig-max-w))!important}
figure img.inlineimage[style*="width"]{height:auto!important}
figure img.inlineimage:not([style*="width"]){max-height:min(70vh,var(--fig-max-h));width:auto}
figure a[href]>img.inlineimage{cursor:zoom-in}

.lightbox{position:fixed;inset:0;z-index:1000;display:flex;overflow:auto;padding:1rem;
  background:rgba(8,16,32,.9);-webkit-overflow-scrolling:touch}
.lightbox>img{margin:auto;max-width:96vw;max-height:94vh;width:auto;height:auto;background:#fff;
  border-radius:4px;cursor:zoom-in;box-shadow:0 8px 40px rgba(0,0,0,.5)}
.lightbox.zoomed>img{max-width:none;max-height:none;cursor:zoom-out}
.lightbox-close{position:fixed;top:.6rem;right:.9rem;z-index:1;width:2.6rem;height:2.6rem;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.55);color:#fff;font:400 1.7rem/1 var(--sans);cursor:pointer}
.lightbox-close:hover{background:rgba(255,255,255,.2)}
html.lightbox-open{overflow:hidden}