/* Toolmap. Мова оформлення: PixelKit (перехід 2026-08-20). Світлий папір,
   чорнило, mono на заголовки і числа, без коробок навколо змісту: рамка
   лишається тільки на інтерактивних зонах. Без градієнтів, тіней,
   заокруглень, капсу і брівок. Темна тема = Вугілля.
   Структура взята з roadmap.sh: хребет, вузли, стани проходження. */
:root {
  --bg: #f3f3f2;
  --surface: #f3f3f2;
  --surface-2: #eaeae8;
  /* Текстові кольори тримають AA (4.5:1) на --bg і --surface-2:
     перевірено скриптом контрасту 2026-08-25. */
  --ink: #141518;
  --muted: #3c3e43;
  --faint: #4f5158;
  --accent: #1f5296;
  --accent-bg: rgba(31, 82, 150, 0.13);
  --ok: #1f6844;
  --ok-bg: rgba(31, 104, 68, 0.14);
  --warn: #a03a1e;
  --warn-bg: rgba(160, 58, 30, 0.13);
  --hair: rgba(20, 22, 26, 0.26);
  --rule: rgba(20, 22, 26, 0.58);
  /* PixelKit tokens (../pixelkit/tokens.css) як єдине джерело; старі імена
     нижче лишаються псевдонімами, щоб не переписувати весь файл. */
  --pk-paper: #f3f3f2; --pk-ink: #191a1c; --pk-muted: #4c4e53;
  --pk-blue: #3a6cbf; --pk-coral: #c04f31; --pk-mint: #2f8f63; --pk-violet: #8256b8;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
  --reading-width: 640px; --wide-content-width: 1184px; --context-nav-width: 220px;
  --body-size: 17px; --body-leading: 1.6; --control-min-height: 44px;
  --sans: "Fixel Text", -apple-system, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  font-family: var(--sans);
  font-size: 16px;
}
:root[data-theme="dark"] {
  --bg: #151517;
  --surface: #151517;
  --surface-2: #1c1c1f;
  --ink: #ebebe7;
  --muted: #b9bab5;
  --faint: #a1a29d;
  --accent: #7fa9ee;
  --accent-bg: rgba(127, 169, 238, 0.18);
  --ok: #56bd8c;
  --ok-bg: rgba(86, 189, 140, 0.18);
  --warn: #e88761;
  --warn-bg: rgba(232, 135, 97, 0.17);
  --hair: rgba(255, 255, 255, 0.24);
  --rule: rgba(255, 255, 255, 0.5);
  --pk-paper: #151517; --pk-ink: #d9d9d5; --pk-muted: #a8a9a5;
  --pk-blue: #4a7dd6; --pk-coral: #d0603f; --pk-mint: #379d70; --pk-violet: #9268cc;
}
/* піксельні спрайти */
canvas.spr { image-rendering: pixelated; display: block; flex: none; }
/* mono-заголовки PixelKit */
h1, h2, h3, h4, h5, .brand { font-family: var(--font-mono); }
* { box-sizing: border-box; }
[hidden] { display: none !important; }
/* Кнопка без явного кольору бере колір браузера - чорний. У темній темі це
   чорне на чорному: саме так зникали картки понять і стежок. Кнопки і поля
   успадковують чорнило сторінки. */
button, input, textarea, select { color: inherit; }
:root { color-scheme: light; }
:root[data-theme="dark"] { color-scheme: dark; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--ink);
  display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---- top bar ---- */
.topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 20px; background: var(--surface);
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap; row-gap: 6px;
}
.brand { font-weight: 700; font-size: 17px; }
.crumb { font-size: 13px; color: var(--muted); }
.spacer { flex: 1; }
.ghost-btn {
  font: inherit; font-family: var(--font-mono); font-size: 12px; padding: 7px 12px;
  border: none; border-radius: 0; background: transparent;
  color: var(--muted); cursor: pointer;
}
.ghost-btn:hover { background: var(--surface-2); color: var(--ink); }
.seg { display: inline-flex; border: 1px solid var(--rule); overflow: hidden; }
.seg button {
  font: inherit; font-family: var(--font-mono); font-size: 12px; padding: 5px 11px;
  border: none; border-right: 1px solid var(--rule);
  background: transparent; color: var(--muted); cursor: pointer;
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--ink); background: var(--surface-2); }
.seg button.active { background: var(--ink); color: var(--surface); }

/* ---- layout ---- */
.layout { flex: 1; min-height: 0; display: grid; grid-template-columns: 264px 1fr; }
.layout > * { min-height: 0; overflow: auto; }

/* ---- left rail ---- */
.rail { background: var(--surface); border-right: 1px solid var(--rule); padding: 16px 0 40px; }
.rail-sec { padding: 0 16px 14px; }
.rail-h {
  font-family: var(--font-mono); font-size: 12px;
  color: var(--faint); margin: 0 0 8px;
}
.rail-link {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  font: inherit; font-size: 13px; text-align: left;
  padding: 6px 8px; border: none; background: transparent;
  color: var(--ink); cursor: pointer;
}
.rail-link:hover { background: var(--surface-2); }
.rail-link .n { font-family: var(--font-mono); font-size: 11px; color: var(--faint); width: 12px; }
.rail-link .pct { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.rail-sec.totals { border-top: 1px solid var(--hair); padding-top: 14px; }
.meter { height: 4px; background: var(--surface-2); border: 1px solid var(--hair); }
.meter i { display: block; height: 100%; background: var(--ok); }
.tot-line { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin: 8px 0 6px; }
.tot-line b { font-family: var(--font-mono); font-weight: 600; color: var(--ink); }

/* ---- map column ---- */
/* без коробок: вступ це заголовок і абзац, знизу лінійка */
.intro { padding: 0 0 16px; border-bottom: 1px solid var(--hair); margin-bottom: 28px; }
.intro h2 { margin: 0 0 6px; font-size: 16px; }
.intro p { margin: 0; font-size: 13px; color: var(--muted); line-height: 1.55; max-width: 640px; }

/* axes: the three frames the whole course points at */
.axes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 28px; margin-bottom: 36px; padding: 14px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.axis { padding: 4px 0; }
.axis h3 { margin: 0 0 6px; font-size: 13.5px; }
.axis p { margin: 0 0 6px; font-size: 13px; color: var(--muted); line-height: 1.5; }
.axis .ex { font-family: var(--font-mono); font-size: 11px; color: var(--faint); line-height: 1.5; }

/* the spine */
.layer { position: relative; padding-left: 28px; padding-bottom: 26px; }
.layer::before {
  content: ""; position: absolute; left: 8px; top: 8px; bottom: 0;
  border-left: 1px solid var(--hair);
}
.layer:last-child::before { bottom: auto; height: 26px; }
/* шапка шару липне до верху: на сторінці з пʼятнадцяти шарів завжди видно,
   де ти зараз, без окремого хлібного сліду */
.layer-h {
  display: flex; align-items: center; gap: 10px; margin-bottom: 3px;
  position: sticky; top: 0; z-index: 4;
  background: var(--bg); padding: 8px 0 6px;
  border-bottom: 1px solid var(--hair);
}
.layer-h::before {
  content: ""; position: absolute; left: -24px; top: 14px;
  width: 9px; height: 9px; background: var(--surface);
  border: 1px solid var(--rule);
}
.layer-h .num { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.layer-h h2 { margin: 0; font-size: 15.5px; }
.layer-h .count { margin-left: auto; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.layer-sub { margin: 8px 0 12px; font-size: 13px; color: var(--muted); }

.nodes { display: grid; grid-template-columns: repeat(auto-fill, minmax(228px, 1fr)); gap: -1px 0; }
.node {
  position: relative; text-align: left; font: inherit;
  background: var(--surface); border: 1px solid var(--hair);
  margin: 0 -1px -1px 0; padding: 9px 11px 9px 13px; cursor: pointer;
}
.node:hover { border-color: var(--rule); z-index: 2; }
.node.sel { border-color: var(--accent); z-index: 3; }
.node::before { content: ""; position: absolute; left: 0; top: -1px; bottom: -1px; width: 3px; background: transparent; }
.node.st-learning::before { background: var(--accent); }
.node.st-known::before { background: var(--ok); }
.node.st-known { background: var(--ok-bg); }
.node .ua { display: block; font-size: 13px; line-height: 1.35; }
.node .en { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 3px; }
/* рівень складності як характер лінії: пряма, ламана, вузол */
.node .tier { position: absolute; right: 9px; top: 11px; width: 24px; height: 12px; }
.node .tier svg { width: 24px; height: 12px; display: block; overflow: visible; }
.node .tier path { fill: none; stroke: var(--faint); stroke-width: 1.4; stroke-linecap: square; }
.node.core .ua::after {
  content: "◆"; font-size: 8px; color: var(--accent);
  vertical-align: super; margin-left: 4px;
}
.node.dim { opacity: 0.3; }

/* ---- legend ---- */
.legend { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--faint); margin-bottom: 22px; }
.legend span { display: inline-flex; align-items: center; gap: 5px; }
.legend i { width: 9px; height: 9px; display: inline-block; border: 1px solid var(--hair); }
.legend i.k { background: var(--ok); border-color: var(--ok); }
.legend i.l { background: var(--accent); border-color: var(--accent); }

/* ---- glyphs (лишились у значках Вугілля тощо, спрайти їх заміняють) ---- */
.glyph { display: inline-flex; flex: none; color: var(--muted); }
.glyph svg { width: 18px; height: 18px; display: block; }
.glyph.sm svg { width: 14px; height: 14px; }
.glyph.earned { color: var(--ok); }

/* ---- badges ---- */
.badge-grid { display: grid; grid-template-columns: 1fr 1fr; }
.badge {
  display: flex; align-items: center; gap: 6px;
  font: inherit; padding: 6px 7px; cursor: pointer;
  background: transparent; border: 1px solid var(--hair);
  margin: 0 -1px -1px 0; color: var(--faint); min-width: 0;
}
.badge:hover { border-color: var(--rule); }
.badge .glyph svg { width: 15px; height: 15px; }
.badge .bt {
  font-size: 11px; line-height: 1.2; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.badge.on { color: var(--ok); background: var(--ok-bg); border-color: var(--ok); z-index: 1; }
.badge.on .glyph { color: var(--ok); }
.rail-sec.badges, .rail-sec.io { border-top: 1px solid var(--hair); padding-top: 14px; }
.rail-sec.io { display: flex; flex-wrap: wrap; gap: 2px; }
.rail-sec.io .ghost-btn { padding: 5px 8px; font-size: 12px; }
.rail-link { align-items: center; }

/* ---- layer header tools ---- */
.layer-h { align-items: center; }
.layer-tools { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.mini {
  font: inherit; font-size: 11px; padding: 3px 8px;
  border: 1px solid var(--hair); background: transparent;
  color: var(--muted); cursor: pointer;
}
.mini:hover { border-color: var(--rule); color: var(--ink); }
.mini.done { color: var(--ok); border-color: var(--ok); background: var(--ok-bg); }
.sheet-actions { display: flex; gap: 6px; margin-top: 16px; }

/* ---- quiz ---- */
.quiz-card p.q { font-size: 17px; line-height: 1.45; margin: 4px 0 16px; }
p.why {
  font-size: 13px; line-height: 1.55; color: var(--muted);
  border-left: 2px solid var(--hair); padding-left: 10px; margin-top: 12px;
}
.opts { display: flex; flex-direction: column; }
.opt {
  font: inherit; font-size: 14px; text-align: left; line-height: 1.4;
  padding: 9px 11px; border: 1px solid var(--hair); background: transparent;
  color: var(--ink); cursor: pointer; margin-bottom: -1px;
}
.opt:not(:disabled):hover { border-color: var(--rule); position: relative; z-index: 1; }
.opt.right { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); position: relative; z-index: 2; }
.opt.wrong { border-color: var(--warn); color: var(--warn); position: relative; z-index: 2; }
.opt:disabled { cursor: default; }

@media (max-width: 900px) {
  /* На вузькому екрані сітка з внутрішньою прокруткою кожної колонки дає три
     окремі скрол-зони на один палець. Розкладаємо в потік: гортається сторінка. */
  .layout { display: block; }
  .layout > * { overflow: visible; }
  .rail { border-right: none; border-bottom: 1px solid var(--rule); padding-bottom: 16px; }
  .main { padding: 18px 16px 60px; }
  .topbar { gap: 8px; padding: 10px 16px; }
  .crumb { flex-basis: 100%; }
  .layer-h { top: -1px; }
  .nodes { grid-template-columns: 1fr; }
}


/* ================= views ================= */
.main { padding: 24px 32px 120px; }
.main { max-width: 1080px; }
.rail-link .rl-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.node.deep .en::after { content: " ●"; color: var(--accent); }
.intro.ok { border-color: var(--ok); background: var(--ok-bg); }

/* ---- tests view ---- */
.test-list { margin-top: 22px; border-top: 1px solid var(--rule); }
.test-card {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--hair);
}
.test-card.done { background: var(--ok-bg); }
.test-card.done .glyph { color: var(--ok); }
.tc-txt { flex: 1; min-width: 0; }
.tc-txt h3 { margin: 0 0 2px; font-size: 14px; }
.tc-txt p { margin: 0; font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-meta { display: flex; align-items: center; gap: 10px; }
.tc-meta .sc { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.quiz-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.qb-title { font-size: 14px; font-weight: 600; }
.qb-n { margin-left: auto; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.quiz-card { padding: 0; max-width: 640px; }
.review-h h3 { font-size: 13px; margin: 22px 0 8px; }
.review { border-bottom: 1px solid var(--hair); padding: 12px 0; }
.review.ok { opacity: 0.6; }
.review .rq { font-size: 14px; margin: 0 0 6px; }
.review .ra { font-size: 13px; margin: 0 0 2px; color: var(--ok); }
.review .ra.wrong { color: var(--warn); }
.review .why { margin-top: 6px; }

.rel button.axis-chip { color: var(--faint); }


/* ---- полірування ---- */
.lmeter { width: 46px; height: 3px; background: var(--hair); display: inline-block; }
.lmeter i { display: block; height: 100%; background: var(--ok); }

.rail-link.here { background: var(--surface-2); }
.rail-link.here .rl-t { font-weight: 600; }
.rail-link { position: relative; }
.rail-link.here::before {
  content: ""; position: absolute; left: 0; top: 3px; bottom: 3px;
  width: 2px; background: var(--ink);
}

.node { transition: background 0.1s, border-color 0.1s; }
.node:hover { background: var(--surface-2); }
.node.st-known:hover { background: var(--ok-bg); }
.node.sel { border-color: var(--accent); background: var(--accent-bg); }
.node.sel::before { background: var(--accent); }

/* видимий фокус з клавіатури: раніше його не було зовсім */
:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.node:focus-visible { z-index: 4; }

/* дрібниці, які прибирають дешевий вигляд */
.axis { transition: background 0.12s; }
.axis:hover { background: var(--surface-2); }
.test-card { transition: background 0.12s; }
.test-card:not(.done):hover { background: var(--surface-2); }
.opt { transition: border-color 0.1s, background 0.1s; }
.opt:not(:disabled):hover { background: var(--surface-2); }
a.src { transition: background 0.1s; }
a.src:hover { background: var(--surface-2); }
.badge { transition: background 0.1s; }
.badge:not(.on):hover { background: var(--surface-2); }

/* ---- згортання секцій лівої колонки ---- */
button.rail-h {
  display: flex; align-items: center; gap: 6px; width: 100%;
  font: inherit; font-family: var(--font-mono); font-size: 12px;
  color: var(--faint); background: transparent; border: none;
  padding: 2px 0 8px; cursor: pointer; text-align: left;
}
button.rail-h:hover { color: var(--ink); }
button.rail-h .chev { font-size: 11px; width: 8px; }

/* ---- порожній стан замість голого рядка ---- */
.empty {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  border: 1px dashed var(--hair); padding: 12px 14px;
  font-size: 13px; color: var(--faint);
}

/* ---- шар, пройдений повністю ---- */
.layer-h.full .glyph { color: var(--ok); }
.layer-h.full { border-bottom-color: var(--ok); }
.layer.full::before { border-left-color: var(--ok); }

/* ---- друк: мапа як роздатка ----
   На папері потрібні означення, а не інтерфейс. Тому картка друкує те, що на
   екрані ховає, а вся навігація зникає. */
.pdef { display: none; }
@media print {
  :root { --bg: #fff; --surface: #fff; --surface-2: #fff; --ink: #000; }
  .topbar, .rail, .layer-tools, .legend, .intro, .empty { display: none !important; }
  .layout { display: block; }
  .layout > * { overflow: visible; }
  body { background: #fff; }
  .main { max-width: none; padding: 0; }
  .axes { break-inside: avoid; border-color: #000; }
  .layer { padding-left: 0; break-inside: auto; }
  .layer::before { display: none; }
  .layer-h {
    position: static; border-bottom: 1px solid #000;
    break-after: avoid; padding: 12px 0 4px;
  }
  .layer-h::before { display: none; }
  .nodes { grid-template-columns: 1fr 1fr; }
  .node {
    break-inside: avoid; border-color: #bbb;
    padding: 6px 8px; background: none !important;
  }
  .node::before, .node .tier { display: none; }
  .node .ua { font-size: 11pt; font-weight: 600; }
  .node .en { font-size: 8pt; }
  .pdef { display: block; font-size: 9.5pt; line-height: 1.35; margin-top: 3px; }
  a[href]::after { content: ""; }
}

/* Повага до системного налаштування: рух прибирається, стани лишаються. */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ---- пошук ----
   Сто пʼятдесят вузлів без пошуку гортаються довше, ніж думається. */
.search { position: relative; display: inline-flex; align-items: center; }
.search input {
  font: inherit; font-size: 13px; padding: 5px 26px 6px 2px; width: 190px;
  border: none; border-bottom: 1px solid var(--rule); border-radius: 0;
  background: transparent; color: var(--ink);
  -webkit-appearance: none; appearance: none;
}
.search input::placeholder { color: var(--faint); }
.search input:focus { outline: none; border-bottom: 2px solid var(--accent); padding-bottom: 5px; }
.search .shortcut {
  position: absolute; right: 7px; pointer-events: none;
  font-family: var(--font-mono); font-size: 11px; color: var(--faint);
  border: 1px solid var(--hair); padding: 0 4px; line-height: 14px;
}
.search input:focus + .shortcut, .search input:not(:placeholder-shown) + .shortcut { display: none; }
.search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.result-line {
  display: flex; align-items: center; gap: 12px;
  font-size: 13px; color: var(--muted); margin-bottom: 18px;
  border-bottom: 1px solid var(--hair); padding-bottom: 12px;
}

@media (max-width: 900px) {
  .search { flex-basis: 100%; }
  .search input { width: 100%; }
}
@media print { .result-line { display: none; } }

/* ================= сторінка поняття ================= */
.main.view-node { max-width: 1180px; }
.np-bar { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
.crumb-link {
  display: inline-flex; align-items: center; gap: 6px;
  font: inherit; font-size: 13px; color: var(--muted);
  background: transparent; border: none; cursor: pointer; padding: 0;
}
.crumb-link:hover { color: var(--ink); }

.np { border-top: 1px solid var(--rule); }
.np-head { padding: 26px 0 20px; border-bottom: 1px solid var(--hair); }
.np-head h1 { margin: 0 0 6px; font-size: 28px; line-height: 1.15; }
.np-meta { margin: 0 0 18px; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.np-head .state-row { margin: 0; max-width: 420px; }

.np-body { display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.np-col { padding: 22px 34px 30px 0; border-right: 1px solid var(--hair); min-width: 0; }
.np-side { padding: 22px 0 30px 24px; min-width: 0; }
.np h4 {
  margin: 22px 0 6px; font-size: 12px;
  color: var(--faint); font-weight: 600;
}
.np-col > h4:first-child, .np-side > h4:first-child { margin-top: 0; }
.np p { margin: 0; font-size: 15.5px; line-height: 1.65; max-width: 68ch; }
.np p.lead { font-size: 17px; line-height: 1.55; }
.np .check p { font-size: 14px; }
.np .soon {
  border-left: 2px solid var(--hair); padding: 2px 0 2px 12px; margin-top: 24px;
  font-size: 13px; line-height: 1.55; color: var(--faint);
}

.np-nav { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--hair); }
.np-navbtn {
  font: inherit; text-align: left; background: transparent; cursor: pointer;
  border: none; border-right: 1px solid var(--hair); padding: 14px 22px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.np-navbtn:last-child { border-right: none; text-align: right; align-items: flex-end; }
.np-navbtn:hover { background: var(--surface-2); }
.np-navbtn.off { opacity: 0.35; cursor: default; }
.np-navbtn .l { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.np-navbtn .t { font-size: 14px; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }

@media (max-width: 1000px) {
  .np-body { grid-template-columns: 1fr; }
  .np-col { border-right: none; border-bottom: 1px solid var(--hair); }
  .np-head { padding: 20px 20px 16px; }
  .np-head h1 { font-size: 24px; }
  .np-col, .np-side { padding: 18px 20px 24px; }
}
@media print {
  .np-bar, .np-nav, .np-side, .state-row { display: none !important; }
  .np { border: none; }
}

/* ================= спільні дрібні блоки =================
   Раніше жили в бічній панелі. Панель прибрано, блоки лишились. */
.state-row { display: flex; }
.state-row button {
  flex: 1; font: inherit; font-size: 13px; padding: 8px 0;
  border: 1px solid var(--rule); border-right: none; background: transparent;
  color: var(--muted); cursor: pointer;
}
.state-row button:last-child { border-right: 1px solid var(--rule); }
.state-row button:hover { background: var(--surface-2); color: var(--ink); }
.state-row button.on { background: var(--ink); color: var(--surface); border-color: var(--ink); }

.check { border-left: 2px solid var(--accent); padding: 4px 0 4px 14px; }
.check p { margin: 0 0 12px; }

.sources { display: flex; flex-direction: column; }
a.src {
  display: block; text-decoration: none; padding: 9px 11px;
  border: 1px solid var(--hair); margin-bottom: -1px; color: var(--ink);
  transition: background 0.1s;
}
a.src:hover { background: var(--surface-2); border-color: var(--rule); position: relative; z-index: 1; }
a.src .st { display: block; font-size: 13px; color: var(--accent); }
a.src .sn { display: block; font-size: 12px; color: var(--muted); line-height: 1.45; margin-top: 2px; }
a.src .sh { display: block; font-family: var(--font-mono); font-size: 11px; color: var(--faint); margin-top: 3px; }

.rel { display: flex; flex-wrap: wrap; gap: 6px; }
.rel button {
  font: inherit; font-size: 13px; padding: 5px 9px;
  border: 1px solid var(--hair); background: transparent;
  color: var(--accent); cursor: pointer;
}
.rel button:hover { border-color: var(--rule); background: var(--surface-2); }
.rel button.axis-chip { color: var(--faint); cursor: default; }

/* ---- есплейнер ---- */
.xp { max-width: 68ch; }
.xp p { margin: 0 0 14px; }
.xp h5 {
  margin: 24px 0 8px; font-size: 15.5px; font-weight: 600; color: var(--ink);
}
.xp-list { margin: 0 0 14px; padding-left: 20px; }
.xp-list li { font-size: 15.5px; line-height: 1.6; margin-bottom: 5px; }
.xp-note {
  border-left: 2px solid var(--rule);
  padding: 2px 0 2px 14px; margin: 0 0 16px; font-size: 14px; line-height: 1.6;
  color: var(--muted);
}
.xp-ex {
  font-family: var(--font-mono); font-size: 13px; line-height: 1.6;
  border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair);
  padding: 11px 0; margin: 0 0 16px;
  color: var(--muted); white-space: pre-wrap;
}
.xp-cmp {
  display: grid; grid-template-columns: 1fr 1fr; margin: 0 0 16px;
  font-size: 14px; line-height: 1.55;
}
.xp-cmp > div { padding: 7px 14px 7px 0; border-bottom: 1px solid var(--hair); }
.xp-cmp > .xh { font-family: var(--font-mono); font-size: 11px; color: var(--faint); border-bottom: 1px solid var(--rule); }

/* ================= стежки ================= */
.trails { margin: 0 0 28px; }
.tr-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; }
.tr-head h3 { margin: 0; font-size: 13px; }
.tr-head span { font-size: 12px; color: var(--faint); }
.tr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.tr-card {
  display: flex; flex-direction: column; gap: 5px; text-align: left;
  font: inherit; background: var(--surface); border: 1px solid var(--hair);
  margin: 0 -1px -1px 0; padding: 11px 13px; cursor: pointer; min-width: 0;
  transition: background 0.12s, border-color 0.12s;
}
.tr-card:hover { background: var(--surface-2); border-color: var(--rule); z-index: 2; }
.tr-card .tt { font-size: 14px; font-weight: 600; }
.tr-card .tw { font-size: 12px; color: var(--muted); line-height: 1.45; }
.tr-card .tf { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.tr-card.done .tt::after { content: " ✓"; color: var(--ok); }
.tr-card.done { background: var(--ok-bg); }

.trail-head {
  border-left: 3px solid var(--accent);
  padding: 6px 0 6px 20px; margin-bottom: 26px;
  animation: rise 0.25s ease both;
}
.trail-head.done { border-left-color: var(--ok); }
.trail-head h2 { margin: 0 0 4px; font-size: 20px; }
.trail-head h2 .th-done { color: var(--ok); }
.trail-head .th-why { margin: 0 0 12px; font-size: 14px; color: var(--muted); }
.th-meter { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.lmeter.big { width: 220px; height: 5px; }
.th-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* номер кроку на картці в режимі стежки; картка дає йому власну смугу
   зліва, щоб номер не лягав на назву */
.node.orded { padding-left: 38px; }
.node .ord {
  position: absolute; left: -1px; top: -1px; bottom: -1px;
  min-width: 24px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: var(--bg);
  font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums;
}
.node.st-known .ord { background: var(--ok); }

/* ================= фейнман ================= */
.fey {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 14px; animation: rise 0.25s ease both;
}
.fey .fey-hint { margin: 0 0 10px; font-size: 14px; line-height: 1.55; }
.fey-ta {
  width: 100%; font: inherit; font-size: 14px; line-height: 1.55;
  border: 1px solid var(--rule); background: var(--surface); color: var(--ink);
  padding: 10px 12px; resize: vertical; border-radius: 0;
}
.fey-ta:focus { outline: none; border-color: var(--accent); }
.fey .sheet-actions { margin-top: 10px; }
.fey .ghost-btn { font-size: 12px; padding: 5px 8px; }

.fey-mine { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; }
.fey-mine blockquote {
  margin: 0 0 8px; font-size: 15.5px; line-height: 1.6; font-style: italic;
  color: var(--ink); white-space: pre-wrap;
}
.fey-mine .sheet-actions { margin-top: 0; }
.fey-mine .fey-ta { margin-bottom: 0; }

/* ================= моя мапа і група ================= */
.my-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 22px;
}
.my-stat {
  padding: 12px 14px 12px 0; border-right: 1px solid var(--hair);
  display: flex; flex-direction: column; gap: 2px;
}
.my-stat:last-child { border-right: none; }
.my-stat b { font-family: var(--font-mono); font-size: 20px; font-weight: 600; }
.my-stat span { font-size: 12px; color: var(--muted); }
.my-note { font-size: 13px; color: var(--faint); margin: 10px 0 0; }
.grp-h {
  margin: 26px 0 8px; font-family: var(--font-mono); font-size: 12px;
  color: var(--faint); font-weight: 600;
}
.grp-chips { margin-bottom: 8px; }

@keyframes rise {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ================= ліва колонка: мінішкали і мапи ================= */
.rl-meter {
  margin-left: auto; width: 34px; height: 3px; flex: none;
  background: var(--hair); align-self: center;
}
.rl-meter i { display: block; height: 100%; background: var(--ok); }
.maps-row { display: flex; gap: 2px; margin-top: 10px; }
.maps-row .ghost-btn { padding: 5px 8px; font-size: 12px; }

/* друк моєї мапи: тільки полотно і числа */
@media print {
  .view-my .sheet-actions, .view-my .intro { display: none !important; }
  .my-stats { break-inside: avoid; }
}


/* ================= читабельність: пас 2026-08 ================= */

/* превʼю на картці мапи: затримав курсор - означення на місці */
.peek { display: none; }
@media (hover: hover) {
  .peek {
    display: block; position: absolute; z-index: 40;
    top: calc(100% - 1px); left: -1px;
    width: max(100%, 280px); box-sizing: border-box;
    background: var(--surface); border: 1px solid var(--rule);
    padding: 10px 12px; text-align: left;
    opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity 0.15s ease 0.45s, visibility 0s linear 0.6s;
  }
  .node:hover { z-index: 41; }
  .node:hover .peek { opacity: 1; visibility: visible; transition-delay: 0.45s, 0.45s; }
  .peek .pk-def { display: block; font-size: 13px; line-height: 1.5; color: var(--ink); }
  .peek .pk-why { display: block; font-size: 12px; line-height: 1.5; color: var(--muted); margin-top: 6px; }
}
@media print { .peek { display: none !important; } }

/* сторінка поняття без секційних заголовків: текст тримає себе сам */
.np-col > .lead { margin-bottom: 10px; }
.np-why {
  color: var(--muted); font-size: 14px; line-height: 1.6;
  border-left: 2px solid var(--hair); padding-left: 12px;
  margin: 0 0 22px; max-width: 68ch;
}
.xp { border-top: 1px solid var(--hair); padding-top: 20px; }
.xp h5 { font-size: 16px; margin: 26px 0 8px; }
.xp > h5:first-child { margin-top: 0; }
.np .check { margin-top: 24px; }
.np .fey { margin-top: 4px; }
.np .fey-mine { margin: 0 0 22px; }
.fey-cap {
  margin: 0 0 4px; font-family: var(--font-mono); font-size: 12px;
  color: var(--faint);
}

/* стартовий рядок першого візиту */
.starter {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  border-left: 3px solid var(--ok);
  padding: 4px 0 4px 14px; margin-bottom: 22px;
  font-size: 13px;
}
.starter .st-hint { color: var(--faint); font-size: 12px; }

/* легенда за перемикачем */
.legend-row { margin-bottom: 10px; }
.legend-row .ghost-btn { padding: 4px 8px; font-size: 12px; }

/* спалах картки, коли стан щойно став "знаю" */
@keyframes knowflash {
  0% { background: var(--ok); border-color: var(--ok); }
  100% { background: var(--ok-bg); }
}
.node.flash { animation: knowflash 0.6s ease both; }

/* номери варіантів у тесті: підказка, що працюють клавіші 1-2-3 */
.opts { counter-reset: opt; }
.opt::before {
  counter-increment: opt; content: counter(opt);
  font-family: var(--font-mono); font-size: 11px; color: var(--faint);
  border: 1px solid var(--hair); padding: 0 5px; margin-right: 9px;
}
.opt.right::before { color: var(--ok); border-color: var(--ok); }
.opt.wrong::before { color: var(--warn); border-color: var(--warn); }
.mini.ghosted { border-color: transparent; color: var(--accent); }

/* кнопка вгору */
#totop {
  position: fixed; right: 22px; bottom: 20px; z-index: 50;
  background: var(--surface); border: 1px solid var(--rule);
}
@media print { #totop { display: none !important; } }

/* порівняння в розборах на вузькому екрані: пари вертикально */
@media (max-width: 480px) {
  .xp-cmp { grid-template-columns: 1fr; }
  .xp-cmp > .xh { display: none; }
  .xp-cmp > div { border-right: none; }
  .xp-cmp > div:nth-child(2n+1) {
    font-size: 12px; color: var(--muted); border-bottom: none; padding-bottom: 2px;
  }
  .xp-cmp > div:nth-child(2n) { padding-top: 2px; border-bottom: 1px solid var(--rule); }
}

/* ================= перевірка ================= */
.rv-card { padding: 14px 0 18px; margin-bottom: 10px; border-top: 1px solid var(--rule); }
.rv-card h3 { margin: 0 0 8px; font-size: 14px; }
.rv-card .mut { font-size: 13px; color: var(--muted); margin: 0 0 12px; line-height: 1.5; }
.rv-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 8px 0; font-size: 14px; border-top: 1px solid var(--hair);
}
.rv-row:first-of-type { border-top: none; }
.rv-row.daily { border-left: 3px solid var(--accent); padding-left: 10px; }
.rv-gens { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); margin: 8px 0; }
.rv-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.code-inp {
  font: inherit; font-family: var(--font-mono); font-size: 13px; padding: 6px 2px; width: 240px;
  border: none; border-bottom: 1px solid var(--rule); background: transparent; color: var(--ink);
  border-radius: 0;
}
.code-inp:focus { outline: none; border-bottom: 2px solid var(--accent); }
.rail-link.due { border-left: 2px solid var(--accent); }
.rail-link.due .pct { color: var(--accent); font-weight: 600; }

/* відкрите питання в сесії */
.op-mine { margin: 0 0 14px; font-style: italic; white-space: pre-wrap; border-left: 3px solid var(--accent); padding: 2px 0 2px 12px; }
.op-model { border-left: 2px solid var(--ok); padding: 2px 0 2px 12px; margin: 0 0 12px; font-size: 14px; line-height: 1.6; }
.op-ask { margin: 0 0 4px; }
.np-evid { margin: 10px 0 0; font-family: var(--font-mono); font-size: 11px; color: var(--faint); }

/* ================= генеровані виклики ================= */
.gen-task { max-width: 76ch; margin-bottom: 14px; }
.gen-scroll { overflow-x: auto; border: 1px solid var(--rule); background: var(--surface); margin-bottom: 14px; }
.gen-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.gen-table th {
  text-align: left; font-family: var(--font-mono); font-size: 11px;
  color: var(--faint); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--rule);
}
.gen-table td { padding: 7px 10px; border-bottom: 1px solid var(--hair); cursor: pointer; }
.gen-table td:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.gen-table td.flagged { background: var(--accent-bg); box-shadow: inset 0 0 0 1px var(--accent); }
.gen-table td.hit { background: var(--ok-bg); box-shadow: inset 0 0 0 1px var(--ok); cursor: default; }
.gen-table td.missed { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--warn); cursor: default; }
.gen-table td.false { text-decoration: line-through; color: var(--warn); cursor: default; }
.gen-base { margin-bottom: 12px; }
.opt.sel-opt { border-color: var(--accent); background: var(--accent-bg); position: relative; z-index: 2; }

/* ================= довідка клавіатури ================= */
.kbd-help {
  position: fixed; inset: 0; z-index: 90;
  background: rgba(17, 17, 17, 0.4);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.kbd-help h3 { margin: 0 0 12px; }
.kbd-help table {
  background: var(--surface); border: 1px solid var(--rule);
  padding: 10px; border-collapse: separate; border-spacing: 0 4px;
}
.kbd-help table { padding: 18px 22px; }
.kbd-help td { padding: 3px 12px 3px 0; font-size: 14px; }
.kbd-help kbd {
  font-family: var(--font-mono); font-size: 12px;
  border: 1px solid var(--rule); padding: 1px 6px; background: var(--surface-2);
}
.kbd-help { color: var(--ink); }
.kbd-help h3 { position: absolute; opacity: 0; }

/* ================= акаунт ================= */
.acct-card {
  background: var(--surface); border: 1px solid var(--rule);
  padding: 20px 22px; width: min(340px, 90vw); cursor: default;
  display: flex; flex-direction: column; gap: 10px;
}
.acct-title { font-weight: 600; font-size: 15px; }
.acct-status { font-size: 13px; color: var(--ink-soft, var(--ink)); min-height: 1em; }
.acct-status.bad { color: var(--warn); }
.acct-card input {
  font: inherit; font-size: 14px; padding: 7px 10px;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.acct-card input:focus { outline: none; border-color: var(--accent); }
.acct-row { display: flex; gap: 8px; }
.acct-pub { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; }
.acct-link { font-size: 12px; font-family: var(--font-mono); color: var(--accent); word-break: break-all; }

/* ================= справи та інструменти ================= */
.case-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 12px; margin: 16px 0 28px;
}
.case-card {
  text-align: left; font: inherit; cursor: pointer;
  background: var(--surface); border: 1px solid var(--rule);
  padding: 14px 16px; color: var(--ink);
  display: flex; flex-direction: column; gap: 8px;
}
.case-card:hover { border-color: var(--accent); }
.case-card h3 { margin: 0; font-size: 15px; }
.case-card p { margin: 0; font-size: 13px; line-height: 1.5; }
.case-meta { font-size: 12px; font-family: var(--font-mono); color: var(--ink-soft, var(--ink)); }
.case-page h4 { margin: 22px 0 8px; }
.case-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.case-steps p { margin: 0 0 6px; max-width: 76ch; line-height: 1.55; }
.chip {
  font: inherit; font-size: 12px; cursor: pointer;
  border: 1px solid var(--rule); background: var(--surface-2);
  color: var(--ink); padding: 3px 9px;
}
.chip:hover { border-color: var(--accent); }
.chip.st-known { border-color: var(--ok); background: var(--ok-bg); }
.chip.st-learning { border-color: var(--accent); }
.chip.tool-chip { border-style: dashed; }

/* ================= питання, внески ================= */
.qa, .contrib { margin-top: 28px; border-top: 1px solid var(--rule); padding-top: 14px; }
.qa h4, .contrib h4 { margin: 0 0 10px; }
.qa-item, .contrib-item { margin-bottom: 14px; }
.qa-q { margin: 0; font-weight: 600; font-size: 14px; }
.qa-a { margin: 4px 0; font-size: 14px; line-height: 1.55; max-width: 76ch; }
.qa textarea, .contrib textarea, .teach-item textarea {
  display: block; width: 100%; max-width: 60ch; font: inherit; font-size: 14px;
  padding: 7px 10px; margin: 8px 0;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.qa textarea:focus, .contrib textarea:focus, .teach-item textarea:focus {
  outline: none; border-color: var(--accent);
}
.contrib-by { font-size: 12px; color: var(--ink-soft, var(--ink)); }
.contrib-item p { margin: 2px 0; font-size: 14px; max-width: 76ch; }
.contrib-form input {
  display: block; width: 100%; max-width: 60ch; font: inherit; font-size: 14px;
  padding: 7px 10px; margin: 8px 0 0;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}

/* ================= викладацька панель ================= */
.teach-sec { margin-bottom: 34px; }
.teach-sec h3 { margin: 0 0 10px; }
.teach-table { border-collapse: collapse; font-size: 13px; }
.teach-table th, .teach-table td {
  border: 1px solid var(--rule); padding: 5px 10px; text-align: left;
}
.teach-table th { background: var(--surface-2); font-weight: 600; }
.teach-item {
  border: 1px solid var(--rule); padding: 10px 14px; margin-bottom: 10px;
  max-width: 76ch;
}
.teach-item.open { border-left: 3px solid var(--accent); }
.teach-item p { margin: 2px 0; font-size: 14px; }
.teach-item input {
  display: block; width: 100%; font: inherit; font-size: 13px;
  padding: 5px 8px; margin: 8px 0;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.teach-answer { border-left: 3px solid var(--ok); padding-left: 10px; }
.pub-badges { margin-top: 16px; }

/* ситуації */
.sit-ctx {
  border-left: 3px solid var(--accent);
  padding: 4px 0 4px 16px; margin-bottom: 20px;
}
.sit-ctx p { margin: 0; font-size: 14px; line-height: 1.6; max-width: 80ch; }
button.code-copy { background: transparent; border: none; cursor: pointer; font: inherit; }
button.code-copy:hover { color: var(--accent); }

/* ================= жвавість: пас 2026-08 ================= */

/* Чорнило шарів. JS ставить --lh-h (тільки відтінок), колір рахується тут,
   тому світла і темна тема тримають кожна свою насиченість і світлоту. */
:root { --lh-s: 38%; --lh-l: 37%; }
:root[data-theme="dark"] { --lh-s: 42%; --lh-l: 68%; }
.layer, .rail-link[data-layer], .test-card, .glist, .band-g {
  --lh: hsl(var(--lh-h, 220) var(--lh-s) var(--lh-l));
}
.layer-h .glyph { color: var(--lh, var(--muted)); }
.layer-h::before { border-color: var(--lh, var(--rule)); }
.layer .layer-tools .lmeter i { background: var(--lh, var(--ok)); }
.layer.full .layer-tools .lmeter i { background: var(--ok); }
.rail-link[data-layer] .glyph { color: var(--lh); }
.rail-link[data-layer] .rl-meter i { background: var(--lh); }
.test-card .glyph { color: var(--lh, var(--muted)); }
.glist h3 { color: var(--lh, var(--ink)); }
.band { stroke: var(--lh, var(--rule)); }
.band-n { fill: var(--lh, var(--faint)); }

/* Штамп на підсумку: печатка на папері, легкий нахил, вдруковування. */
.stamp {
  display: inline-block; padding: 3px 12px; margin: 0 0 10px;
  border: 2px solid currentColor; color: var(--ok);
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  transform: rotate(-2.5deg);
  animation: stampin 0.28s cubic-bezier(0.15, 1.5, 0.4, 1) both;
}
.stamp.no { color: var(--warn); }
@keyframes stampin {
  from { opacity: 0; transform: rotate(-2.5deg) scale(1.8); }
  to { opacity: 1; transform: rotate(-2.5deg) scale(1); }
}

/* Числа, що тікають: цифри однакової ширини, щоб рядок не смикався. */
.tickn { font-variant-numeric: tabular-nums; }

/* Кнопка фізично просідає під пальцем. */
.mini:active:not(:disabled), .ghost-btn:active, .seg button:active,
.state-row button:active, .opt:active:not(:disabled), .tr-card:active,
.node:active, .badge:active, .np-navbtn:not(.off):active {
  transform: translateY(1px);
}

/* Неправильна відповідь отримує тло, а не тільки колір тексту. */
.opt.wrong { background: var(--warn-bg); }
.gen-table td.missed { background: var(--warn-bg); }


/* ================= оболонка: навігація, пошук, доступність ================= */
.skip {
  position: absolute; left: -9999px; top: 8px; z-index: 200;
  background: var(--ink); color: var(--surface); padding: 8px 12px; font-family: var(--font-mono);
}
.skip:focus { left: 8px; outline: 2px solid var(--accent); }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
a.brand { text-decoration: none; color: var(--ink); }
.nav { display: flex; gap: 2px; }
.nav a {
  font-family: var(--font-mono); font-size: 13px; text-decoration: none; color: var(--muted);
  padding: 8px 10px; border-bottom: 2px solid transparent; min-height: var(--control-min-height);
  display: inline-flex; align-items: center;
}
.nav a:hover { color: var(--ink); }
.nav a.active { color: var(--ink); border-bottom-color: var(--ink); }
.secondary { display: flex; align-items: center; gap: 2px; }
.secondary a { text-decoration: none; }
.secondary a.active { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.menubtn { display: none; }
.ghost-btn, .mini, .nav a, .seg button { min-height: 36px; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (max-width: 699px) {
  .menubtn { display: inline-flex; }
  .nav { display: none; flex-basis: 100%; flex-direction: column; }
  .nav.open { display: flex; }
  .nav a { min-height: var(--control-min-height); }
  .secondary { flex-basis: 100%; flex-wrap: wrap; }
}
.layout.norail { grid-template-columns: 1fr; }
.layout.norail .rail { display: none; }
.layout.norail .main { max-width: var(--wide-content-width); }

/* ---- початок ---- */
.home { max-width: 820px; }
.home h1 { font-size: 30px; margin: 0 0 8px; text-wrap: balance; }
.home .lead { max-width: 70ch; }
.home h2 { font-size: 20px; margin: 30px 0 12px; }
.home-class { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--hair); padding: 14px 0 16px; margin: 20px 0; }
.home-class h2, .home-class h3 { margin: 0 0 8px; }
.home-class a.mini { display: inline-block; text-decoration: none; margin-top: 6px; }
.home-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.home-card {
  text-align: left; font: inherit; cursor: pointer; color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule); padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px; min-height: 96px;
}
.home-card:hover { border-color: var(--accent); }
.home-card b { font-family: var(--font-mono); font-size: 14px; }
.home-card span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.home-card .hc-k { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.home-card .hc-m { font-family: var(--font-mono); color: var(--ok); }
.home-q { padding-left: 18px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; }
.home-q a { color: var(--ink); font-size: 15px; }
.home-q a.on { font-weight: 600; }
.guest-note { font-size: 13px; color: var(--muted); border-top: 1px solid var(--hair); padding-top: 12px; margin-top: 28px; max-width: 70ch; }

/* ---- мапа: фільтри ---- */
.filters { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin: 0 0 16px; }
.filters .mini.active { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.view-switch { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.view-switch .on { color: var(--ink); }
.view-switch a { color: var(--accent); }

/* ---- пошук, питання, практика, немає сторінки ---- */
.search-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.search-form input {
  font: inherit; font-size: 15px; padding: 8px 12px; flex: 1; min-width: 220px;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink); min-height: var(--control-min-height);
}
.search-form input:focus { outline: none; border-color: var(--accent); }
.q-open { border-left: 3px solid var(--accent); padding: 4px 0 8px 16px; margin: 0 0 24px; max-width: 72ch; }
.q-open h2 { margin: 0 0 8px; font-size: 20px; }
.q-open a.mini { display: inline-block; text-decoration: none; }
.q-group { margin-bottom: 26px; }
.q-group h2 { font-size: 16px; margin: 0 0 8px; color: var(--muted); }
.pr-sec { margin-bottom: 34px; }
.pr-sec h2 { font-size: 20px; margin: 0 0 10px; }
.pr-sec .case-grid { margin: 8px 0 12px; }

/* ---- уроки, завдання, заняття ---- */
.lesson h1, .exercise h1, .class h1 { font-size: 28px; margin: 0 0 6px; text-wrap: balance; }
.lesson-q { font-family: var(--font-mono); font-size: 13px; color: var(--faint); margin: 0 0 12px; }
.lesson-pre { font-size: 13px; color: var(--muted); display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.lesson-body { grid-template-columns: minmax(0, 1fr) var(--context-nav-width); }
.toc summary { font-family: var(--font-mono); font-size: 12px; cursor: pointer; color: var(--muted); }
.toc-list { padding-left: 18px; margin: 8px 0 0; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.toc-list a { color: var(--ink); text-decoration: none; }
.toc-list a:hover { text-decoration: underline; }
.xp h5[id] { scroll-margin-top: 20px; }
.xp-code { font-family: var(--font-mono); font-size: 13px; background: var(--surface-2); padding: 10px 12px; overflow-x: auto; }
.xp-tablewrap { overflow-x: auto; }
.xp-table { border-collapse: collapse; font-size: 14px; }
.xp-table th, .xp-table td { border: 1px solid var(--rule); padding: 5px 10px; text-align: left; vertical-align: top; }
.xp-table th { background: var(--surface-2); font-weight: 600; }
.xp-ref { border: 1px solid var(--hair); padding: 10px 14px; margin: 10px 0; }
.xp-ref p { margin: 4px 0 8px; }
.syn { font-family: var(--font-mono); font-size: 11px; color: var(--faint); display: block; margin-bottom: 4px; }
.scene { margin: 16px 0; }
.scene-holder { border: 1px solid var(--hair); }
.scene-holder img { display: block; width: 100%; height: auto; }
.scene figcaption { font-size: 13px; color: var(--muted); margin-top: 6px; }
.hints { margin: 12px 0; }
.hints summary { cursor: pointer; font-family: var(--font-mono); font-size: 13px; }
.exercise input, .exercise textarea {
  display: block; width: 100%; max-width: 60ch; font: inherit; font-size: 14px; padding: 7px 10px; margin: 8px 0;
  border: 1px solid var(--rule); background: var(--surface-2); color: var(--ink);
}
.class-steps { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; }
.class-steps a { color: var(--ink); }
@media (max-width: 1099px) { .lesson-body { grid-template-columns: 1fr; } .lesson-side { border: none; padding: 0; } }

/* ---- сторінка маршруту ---- */
.th-facts { display: flex; gap: 18px; flex-wrap: wrap; margin: 10px 0; }
.th-fact { display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
.th-fact b { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.th-meta { display: grid; grid-template-columns: max-content 1fr; gap: 4px 14px; font-size: 13px; margin: 8px 0 12px; max-width: 76ch; }
.th-meta dt { color: var(--faint); font-family: var(--font-mono); font-size: 12px; }
.th-meta dd { margin: 0; }
.th-steps { padding-left: 20px; margin: 0 0 12px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.th-steps a { color: var(--ink); }
.th-actions a.mini { text-decoration: none; display: inline-flex; align-items: center; }

/* ================= друк: тільки зміст курсу ================= */
@media print {
  .topbar, .rail, #totop, .skip, .dmap-bar, .concept-tabs, .qa textarea, .qa button,
  .exercise input, .exercise textarea, .exercise button, .hints summary, .np-nav, .th-actions,
  .state-row, .contrib, .filters, .starter, .legend-row { display: none !important; }
  .layout, .layout.norail { display: block; }
  .main { max-width: none; padding: 0; }
  body { background: #fff; color: #000; font-size: 11.5pt; }
  .hints { display: block; } .hints[open] > *, .hints > * { display: block; }
  .scene-holder img { max-width: 160mm; }
  a { color: #000; text-decoration: none; }
  a.src .sh::after { content: ""; }
  .xp, .np-col { max-width: none; }
  h1, h2, h3 { break-after: avoid; }
  .scene, .xp-tablewrap, .case-card, .teach-item { break-inside: avoid; }
}

/* ---- живі сцени (двигун EduKit) ---- */
.scene-holder.live { border: none; }
.scene-canvas { display: block; width: 100%; height: auto; cursor: default; }
.scene-ctl { display: flex; gap: 4px; margin-top: 2px; }
.scene-ctl .ghost-btn { font-size: 11px; padding: 4px 8px; min-height: 28px; }
@media print { .scene-ctl { display: none; } }

/* ---- читання в регістрі EduKit: вузька колонка, нумеровані секції ---- */
.np-question { font-family: var(--font-mono); font-size: 13px; color: var(--faint); margin: 0 0 8px; }
.lesson .np-col { max-width: 680px; counter-reset: sec; }
.lesson .np-col .xp > h5[id] { counter-increment: sec; font-size: 17px; margin: 44px 0 6px; }
.lesson .np-col .xp > h5[id]::before { content: counter(sec) " · "; color: var(--faint); }
.lesson .np-col .xp p { font-size: 15.5px; line-height: 1.7; max-width: 640px; }
.lesson .lead { font-size: 16px; line-height: 1.65; max-width: 640px; }
.np-col .scene { margin: 12px 0 22px; }
.np-col .xp-list li { line-height: 1.6; }

/* ================= PixelKit: вирівнювання (8 вересня 2026) ================= */
/* поля вводу: лише нижня лінія */
.acct-card input, .search-form input, .contrib-form input, .exercise input,
.qa textarea, .contrib textarea, .teach-item textarea, .exercise textarea, .teach-item input, .cohort-sel {
  border: none; border-bottom: 1px solid var(--rule); background: transparent; border-radius: 0;
}
.acct-card input:focus, .search-form input:focus, .contrib-form input:focus,
.exercise input:focus, .qa textarea:focus, .contrib textarea:focus, .teach-item textarea:focus,
.exercise textarea:focus, .teach-item input:focus { outline: none; border-bottom: 2px solid var(--accent); }
/* кнопки: чорнильна первинна, контурна вторинна, 40% вимкнена */
.mini.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.mini.primary:hover { background: var(--ink); color: var(--surface); }
.mini:disabled, .ghost-btn:disabled { opacity: 0.4; cursor: default; }
/* без коробок навколо змісту: лише одна ліва лінія або горизонтальні лінійки */
.xp-ref { border: none; border-left: 2px solid var(--rule); padding: 2px 0 2px 14px; }
.xp-table th, .xp-table td { border: none; border-bottom: 1px solid var(--hair); }
.xp-table th { background: transparent; border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--faint); }
.teach-item { border: none; border-bottom: 1px solid var(--hair); padding: 10px 0; }
.teach-item.open { border-left: 3px solid var(--accent); padding-left: 12px; }
.teach-table th, .teach-table td { border: none; border-bottom: 1px solid var(--hair); }
.teach-table th { background: transparent; font-family: var(--font-mono); font-weight: 400; font-size: 12px; color: var(--faint); }
.q-open { border-left-width: 2px; }
.np-en { font-size: 14px; color: var(--muted); margin: 0 0 14px; }
/* біжучий текст до 640px */
.lesson .np-col { max-width: 640px; }
.home .lead, .exercise .np-col p, .class .np p { max-width: 640px; }
/* картки лишаються інтерактивними зонами: рамка 1px без радіуса; заголовок картки без кікера */
.home-card b { font-size: 14px; }
/* програмний фокус на заголовку після переходу: без рамки навколо заголовка */
#main h1[tabindex="-1"]:focus, #main h2[tabindex="-1"]:focus, #main h5[tabindex="-1"]:focus { outline: none; }

/* ---- заняття: модулі як етапи ---- */
.mod-strip { list-style: none; padding: 0; margin: 18px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.mod-strip.small { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); margin: 12px 0 8px; }
.mod-strip.plan { grid-template-columns: 1fr; gap: 28px; }
.mod-strip.plan .mod-card { min-height: 0; }
.mod-q { font-family: var(--sans); font-size: 15.5px; line-height: 1.45; margin: 10px 0 4px; max-width: 62ch; color: var(--ink); font-weight: 600; }
.mod-mech { margin: 0 0 10px; max-width: 62ch; }
dl.mod-anat { margin: 0; display: grid; grid-template-columns: max-content 1fr; gap: 4px 16px; max-width: 74ch; }
dl.mod-anat dt { font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
dl.mod-anat dd { margin: 0; }
.mod-aside { margin: 10px 0 0; color: var(--muted); font-size: 13.5px; max-width: 62ch; }
.tool-ui { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin: 6px 0 14px; max-width: 62ch; }
@media (max-width: 560px) { dl.mod-anat { grid-template-columns: 1fr; gap: 2px; } dl.mod-anat dd { margin-bottom: 8px; } }
.mod-card {
  display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--ink);
  border: 1px solid var(--rule); padding: 12px 14px; min-height: 120px;
}
.mod-card:hover { border-color: var(--accent); }
.mod-head { display: flex; align-items: center; gap: 10px; }
.mod-n { font-family: var(--font-mono); font-size: 22px; color: var(--faint); }
.mod-card b { font-family: var(--font-mono); font-size: 14px; line-height: 1.3; }
.mod-time, .mod-read { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }
.mod-strip.small .mod-card { min-height: 0; padding: 8px 10px; }
.mod-strip.small .mod-n { font-size: 16px; }
.mod-strip.small .mod-card b { font-size: 12.5px; }
.mod-title { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 8px; }
.mod-title h1 { margin: 0 0 6px; }
.mod-prep { border-left: 2px solid var(--rule); padding-left: 12px; color: var(--muted); max-width: 640px; }
.class .class-steps li.done a { color: var(--ok); }
.class a.home-card { text-decoration: none; max-width: 420px; }

/* ---- потік модуля і групи проблем ---- */
.flow-pos { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin-left: 12px; }
.np-navbtn.primary { background: var(--ink); color: var(--surface); border-color: var(--ink); }
.np-navbtn.primary .l, .np-navbtn.primary .t { color: var(--surface); }
.prob { margin: 0 0 18px; }
.prob h5 { margin: 12px 0 4px; font-size: 14px; }
.prob-why { margin: 0 0 8px; font-size: 14px; color: var(--muted); max-width: 640px; line-height: 1.5; }

/* ---- відтворений знімок інтерфейсу ---- */
svg.uimock { display: block; width: 100%; height: auto; font-family: var(--font-mono); }
.ui-win { fill: var(--surface); stroke: var(--rule); }
.ui-rule { stroke: var(--hair); }
.ui-tab { font-size: 11px; fill: var(--muted); }
.ui-tab.on { fill: var(--ink); }
.ui-tab-line { fill: var(--ink); }
.ui-btn { fill: var(--surface-2); stroke: var(--hair); }
.ui-btn.hl { fill: var(--surface); }
.ui-ico { fill: var(--muted); }
.ui-bt { font-size: 11px; fill: var(--ink); }
.ui-gn { font-size: 10px; fill: var(--faint); }
.ui-hl { fill: none; stroke: var(--accent); stroke-width: 2; }
.ui-note { font-size: 11px; fill: var(--accent); }
.ui-menu { fill: var(--surface); stroke: var(--rule); }
.ui-menu-hl { fill: var(--accent-bg); }
.ui-mi { font-size: 11px; fill: var(--ink); }
.ui-mi.on { fill: var(--accent); }
.uifig figcaption { font-size: 13px; }

/* ================= тихий шар: менше рамок (8 вересня 2026, показ Андрію) =================
   Рамка лишається тільки на кнопках, полях (нижня лінія), модальному вікні,
   мінімапі і відтвореному вікні програми. Картки, поняття на мапі, значки,
   приклади, коди і посилання на поняття тримаються пробілом і шрифтом. */
.home-card, .mod-card, .case-card, .tr-card, .node, .badge, .check, .axis,
.xp-ex, .xp-ref, .xp-code, .scene-holder, .np-navbtn, .chip, .gen-scroll, .starter,
.contrib-item, .qa-item, .q-open, .th-meta {
  border: none;
}
.home-card, .mod-card, .case-card, .tr-card { padding-left: 0; padding-right: 0; background: transparent; }
.home-card:hover b, .mod-card:hover b, .case-card:hover h3, .tr-card:hover .tt { text-decoration: underline; text-underline-offset: 4px; }
.home-row, .mod-strip, .case-grid { gap: 18px 28px; }
.mod-strip.small .mod-card { padding: 4px 0; }
.node { background: transparent; padding-left: 0; }
.node.st-known, .node.st-learning { background: transparent; }
.node.st-known .ua::before { content: '● '; color: var(--ok); }
.node.st-learning .ua::before { content: '● '; color: var(--accent); }
.badge { background: transparent; }
.badge-grid { gap: 6px 14px; }
.check { border-left: 2px solid var(--rule); padding-left: 14px; background: transparent; }
.xp-ex, .xp-code { background: var(--surface-2); }
.xp-ref { border-left: 2px solid var(--rule); }
.chip { border-bottom: 1px solid var(--rule); background: transparent; padding-left: 0; padding-right: 0; }
.chip.on, .chip.st-known { border-bottom-color: var(--ok); background: transparent; }
.np-navbtn { padding-left: 0; padding-right: 0; }
.np-navbtn.primary { padding-left: 12px; padding-right: 12px; }
.q-open { border-left: 2px solid var(--accent); }
.ui-win { stroke: var(--hair); }
.ui-btn { stroke: none; }
.teach-item.open { border-left: 2px solid var(--accent); }
.legend i { border: 1px solid var(--hair); }

/* ================= читання: посилання, шрифти, тести без коробок ================= */
/* посилання: без підкреслення; у біжучому тексті тонка лінія, при наведенні чорнило */
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; }
.xp p a, .lead a, .home-q a, .class-steps a, .toc-list a, .th-steps a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair); }
.xp p a:hover, .lead a:hover, .home-q a:hover, .class-steps a:hover, .toc-list a:hover, .th-steps a:hover { text-decoration: none; border-bottom-color: var(--ink); }
.secondary a.active { text-decoration: none; border-bottom: 2px solid var(--ink); }
.class .class-steps li.done a { color: var(--ok); border-bottom-color: transparent; }
.chip { border-bottom: none; color: var(--accent); }
.chip:hover { text-decoration: underline; text-underline-offset: 3px; }
.chip.st-known { color: var(--ok); }
.rel button { border: none; padding-left: 0; padding-right: 0; color: var(--accent); background: transparent; }
.rel button:hover { text-decoration: underline; text-underline-offset: 3px; background: transparent; }

/* одна шкала шрифтів: mono для заголовків, хрому і чисел; sans для тексту */
h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; } h4 { font-size: 14px; } h5 { font-size: 15px; }
.main p, .main li { font-size: 15.5px; line-height: 1.6; }
.main .np-en, .main .acct-status, .main .contrib-by, .main .case-meta, .main .mod-time, .main .mod-read,
.main .th-fact span, .main .legend, .main .flow-pos, .main .prob-why { font-size: 13px; }
.main .contrib-by, .main .case-meta, .main .mod-time, .main .mod-read, .main .flow-pos { font-family: var(--font-mono); font-size: 12px; }
.home-card span, .case-card p, .mod-card span { font-family: var(--sans); font-size: 13.5px; line-height: 1.5; }
.home-card b, .case-card h3, .mod-card b, .tr-card .tt { font-family: var(--font-mono); font-size: 14px; }
.mini, .ghost-btn, .chip, .np-navbtn .l, .th-actions .mini { font-family: var(--font-mono); font-size: 12.5px; }
.np-navbtn .t { font-family: var(--sans); font-size: 14px; }
.opt, .fey-ta, .qa textarea, .contrib textarea { font-family: var(--sans); font-size: 15px; }
.lead { font-size: 17px; line-height: 1.55; }

/* тести і повторення без коробок: варіант відповіді це рядок з лівою лінією */
.opt { border: none; border-left: 2px solid var(--hair); background: transparent; padding-left: 14px; text-align: left; }
.opt:not(:disabled):hover { border-left-color: var(--ink); background: transparent; }
.opt.right { border-left-color: var(--ok); background: transparent; color: var(--ok); }
.opt.wrong { border-left-color: var(--warn); background: transparent; color: var(--warn); }
.opt.sel-opt { border-left-color: var(--accent); background: transparent; }
.quiz-card, .sheet, .fey, .result-line, .gen-scroll, .sit-ctx { border: none; background: transparent; }
.fey-mine, .sit-ctx { border-left: 2px solid var(--rule); }
.fey-ta { border: none; border-bottom: 1px solid var(--rule); background: transparent; }
.gen-table td, .gen-table th { border: none; border-bottom: 1px solid var(--hair); }
.gen-table td.hit { box-shadow: none; border-bottom-color: var(--ok); background: transparent; color: var(--ok); }
.gen-table td.missed { box-shadow: none; border-bottom-color: var(--warn); background: transparent; }
.state-row, .seg { border: none; }
.state-row button { border: none; border-bottom: 2px solid var(--hair); background: transparent; }
.state-row button.on { background: transparent; color: var(--ink); border-bottom-color: var(--ink); }
.seg button.active { background: transparent; color: var(--ink); border-bottom: 2px solid var(--ink); }
.layout.norail .main { max-width: 900px; width: 100%; margin: 0 auto; }
.layout.norail .main.view-home, .layout.norail .main.view-questions, .layout.norail .main.view-practice,
.layout.norail .main.view-tools, .layout.norail .main.view-class, .layout.norail .main.view-search,
.layout.norail .main.view-cases, .layout.norail .main.view-teach { max-width: 1040px; }
.layout.norail .main.view-graph, .layout.norail .main.view-my, .layout.norail .main.view-group { max-width: 1280px; }

.chip.tool-chip { border: none; }
.rnd { max-width: 640px; margin: 0 0 8px; }
.rnd-t { font-family: var(--font-mono); font-size: 15px; }
.rnd-why { color: var(--muted); }
.rnd-q { color: var(--muted); margin: 4px 0 8px; }
.home-links { margin: 6px 0 18px; }

/* Питання: на широкому екрані групи у дві колонки */
@media (min-width: 1100px) {
  .view-questions .q-groups { columns: 2; column-gap: 48px; }
  .view-questions .q-group { break-inside: avoid; }
}

/* Розшифровка сцени: для читача екрана, друку і режиму без анімації */
.scene figcaption .scene-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media print, (prefers-reduced-motion: reduce) {
  .scene figcaption .scene-text { position: static; width: auto; height: auto; clip: auto; white-space: normal; display: block; margin-top: 4px; }
}
/* Темна тема: сцена малюється чорнилом на папері, тому полотно лишається світлим */
:root[data-theme="dark"] .scene-canvas { background: #f3f3f2; border-radius: 4px; }
:root[data-theme="dark"] .uifig svg { background: #f3f3f2; border-radius: 4px; }

.cp-show { color: var(--muted); margin: 4px 0 18px; }
.cp h4 { margin-top: 22px; }

/* Початок і потоки (спека 2026-09-09) */
.home-intro { max-width: var(--reading-width, 640px); color: var(--muted); }
.home-search { display: flex; gap: 8px; align-items: flex-end; max-width: 640px; margin: 18px 0 26px; }
.home-search label { font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.home-search input { flex: 1; min-height: var(--control-min-height, 44px); border: 0; border-bottom: 1px solid var(--rule); background: transparent; font: inherit; padding: 6px 2px; }
.home-class h2, .home-class h3 { font-size: 18px; margin: 0 0 4px; }
.home-class-row { margin: 0 0 22px; color: var(--muted); }
.wf-list { list-style: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px 32px; }
.wf-list li, .cls-list li { display: flex; flex-direction: column; gap: 3px; }
.wf-title { font-family: var(--font-mono); font-size: 15px; }
.wf-desc { color: var(--muted); font-size: 14px; }
.home-essay { margin: 8px 0 24px; display: flex; flex-direction: column; gap: 3px; }
.wf .lead { max-width: var(--reading-width, 640px); }
.wf-diff { max-width: 640px; }
.wf-group h3 { font-size: 15px; margin: 18px 0 6px; }
.wf-concepts { list-style: none; padding: 0; margin: 0; max-width: 760px; }
.wf-concepts li { margin: 0 0 8px; }
.wf-def { color: var(--muted); }
.cls-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 18px; max-width: 760px; }
/* практика */
.pr-filters { flex-direction: column; align-items: flex-start; gap: 6px; }
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-row .mini.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.task-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px 32px; margin: 18px 0; }
.task-card { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: inherit; }
.task-card h3 { font-size: 15px; margin: 0; }
.task-card p { margin: 0; }
.task-result { color: var(--muted); }
.np-state { margin: 26px 0 8px; }
.np-state h4 { margin: 0 0 6px; }
@media (max-width: 767px) { .wf-list, .task-list { grid-template-columns: 1fr; } .home-search { flex-direction: column; align-items: stretch; } }
.task-who { margin: 0 0 8px; }
.cp-checks { list-style: none; padding: 0; margin: 8px 0; max-width: 760px; }
.cp-checks li { margin: 0 0 6px; }
.cp-help { margin: 6px 0; }

.rel-notes { list-style: none; padding: 0; margin: 0; }
.rel-notes li { margin: 0 0 8px; font-size: 14px; }
.np-examples { margin: 22px 0 8px; }
.np-example h5 { margin: 12px 0 4px; font-size: 13px; color: var(--muted); }

/* Спрайти в заголовках і картках (9 вересня 2026): піксельний знак веде
   рядок, текст лишається на базовій лінії. Спрайт декоративний, тому
   прихований від читача екрана. */
canvas.spr { image-rendering: pixelated; }
h1 > canvas.spr, h2 > canvas.spr, h3 > canvas.spr, .wf-item > canvas.spr,
.wf-head > canvas.spr, .np-title > canvas.spr, .home-essay > canvas.spr { flex: none; }
h1:has(> canvas.spr), h2:has(> canvas.spr), h3:has(> canvas.spr) {
  display: flex; align-items: center; gap: var(--space-3);
}
h3:has(> canvas.spr) { gap: var(--space-2); }
.wf-item { display: flex; gap: var(--space-4); align-items: flex-start; }
.wf-item > div { display: flex; flex-direction: column; gap: 3px; }
.wf-head { display: flex; gap: var(--space-4); align-items: flex-start; margin: 0 0 var(--space-5); }
.wf-head h1 { margin: 0 0 6px; }
.wf-head .lead { margin: 0; }
.np-title { display: flex; gap: var(--space-4); align-items: center; }
.np-title h1 { margin: 0; }
.home-essay { display: flex; gap: var(--space-3); align-items: flex-start; }
.home-essay-t { display: flex; flex-direction: column; gap: 3px; }
.home-class h2 { display: flex; align-items: center; gap: var(--space-2); }
.task-card h3 { display: flex; align-items: center; gap: var(--space-2); }
/* контрастніша структура: розділові лінії і межі полів помітні */
.wf-group { border-top: 1px solid var(--hair); padding-top: var(--space-4); margin-top: var(--space-5); }
.wf-group:first-of-type { border-top: 0; }
.task-card { border-top: 2px solid var(--rule); padding-top: var(--space-3); }
.task-card:hover h3 span { text-decoration: underline; }
.chip-row .mini { border-color: var(--rule); }
.home-search input { border-bottom-width: 2px; }
/* спрайт ліворуч від назви потоку: перекриває колонковий режим .wf-list li */
.wf-list li.wf-item { flex-direction: row; gap: var(--space-4); align-items: flex-start; }
.wf-list li.wf-item > div { flex: 1; min-width: 0; }
/* назви понять скануються колонкою, означення тихіше */
.wf-concepts li a { font-family: var(--font-mono); font-size: 14px; }
.wf-concepts .wf-def { font-size: 14px; }
.wf-concepts li { line-height: 1.5; }
.home-essay { flex-direction: row; align-items: flex-start; }
.wf .wf-group:first-of-type { margin-top: var(--space-3); }

/* Вкладки і легші картки (9 вересня 2026, за оглядом Андрія):
   рамка лише на зоні вводу; стан вкладки показує лінія, не коробка. */
.tab-row { display: flex; gap: 20px; border-bottom: 1px solid var(--hair); margin: 18px 0 0; }
.tab-row .tab { font-family: var(--font-mono); font-size: 14px; padding: 8px 0; text-decoration: none; color: var(--accent); border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tab-row .tab.on { color: var(--ink); border-bottom-color: var(--ink); }
.pr-more { margin: 14px 0 0; }
.pr-more summary { font-family: var(--font-mono); font-size: 13px; color: var(--accent); cursor: pointer; }
.pr-more .chip-row { margin-top: 10px; }
.chip-row .mini { border-color: var(--hair); }
.task-card { border-top: 0; padding-top: 0; display: flex; gap: 12px; align-items: flex-start; }
.task-card .task-body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.task-card h3 { font-family: var(--font-mono); font-size: 15px; color: var(--accent); margin: 0; }
.task-card:hover h3 { text-decoration: underline; }
.task-list { gap: 24px 32px; }
.tool-row { display: flex; gap: 10px; align-items: flex-start; }
.tool-row > canvas.spr { margin-top: 2px; }
.wf-when { color: var(--muted); font-size: 14px; margin: 2px 0 8px; max-width: 620px; }
.wf-need { font-family: var(--font-mono); font-size: 10px; color: var(--ok); border: 1px solid var(--ok); padding: 1px 4px; margin-left: 5px; }
.wf-group h3 { margin-bottom: 2px; }
/* Повернення це посилання, не кнопка в рамці */
.np-bar > a.mini, .np-bar > button.mini { border: 0; padding: 0; font-size: 13px; color: var(--accent); background: transparent; min-height: 0; }
.np-bar > a.mini:hover, .np-bar > button.mini:hover { text-decoration: underline; }
.task-card { flex-direction: row; }
.wf .wf-group:first-of-type { margin-top: var(--space-4); }

.mod-out { font-size: 13px; color: var(--muted); line-height: 1.45; }

/* Секційні заголовки сторінки: рівень h2 задля ієрархії, вигляд як був */
h2.sec { font-size: 14px; margin: 22px 0 8px; }
.np h2.sec { color: var(--muted); font-weight: 700; }
.np-state h2.sec, .qa h2.sec, .contrib h2.sec { margin: 0 0 8px; }
.cp h2.sec { margin-top: 22px; }

.cref-go { font-family: var(--font-mono); font-size: 12.5px; color: var(--accent); display: inline-block; margin-top: 4px; }

/* Коротка перевірка після модуля */
.ck { margin: 34px 0 8px; max-width: 68ch; }
.ck-lead { color: var(--muted); font-size: 13.5px; margin: 0 0 14px; }
.ck-n { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin: 0 0 6px; }
.ck-stem { margin: 0 0 12px; }
.ck-opts { display: flex; flex-direction: column; gap: 6px; }
.ck-opt { display: flex; gap: 10px; align-items: flex-start; text-align: left; background: none;
  border: 0; border-left: 2px solid var(--hair); padding: 6px 0 6px 12px; cursor: pointer;
  font: inherit; color: var(--ink); flex-wrap: wrap; }
.ck-opt:hover { border-left-color: var(--accent); }
.ck-opt.is-on { border-left-color: var(--ink); }
.ck-opt.is-ok { border-left-color: var(--ink); border-left-width: 3px; }
.ck-opt.is-no { border-left-style: dotted; }
.ck-opt:disabled { cursor: default; opacity: 1; }
.ck-key { font-family: var(--font-mono); font-size: 12px; color: var(--faint); min-width: 1.2em; }
.ck-why { flex-basis: 100%; padding-left: calc(1.2em + 10px); color: var(--muted); font-size: 13px; }
.ck-words { line-height: 2.1; margin: 0 0 12px; }
.ck-word { font: inherit; background: none; border: 0; border-bottom: 1px solid var(--hair);
  padding: 1px 2px; cursor: pointer; color: var(--ink); }
.ck-word.is-on { border-bottom-width: 2px; border-bottom-color: var(--ink); }
.ck-word.is-ok { border-bottom-width: 3px; border-bottom-color: var(--ink); }
.ck-word.is-no { border-bottom-style: dotted; color: var(--muted); }
.ck-field { display: block; margin: 0 0 10px; }
.ck-label { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--faint); }
.ck-input { width: 100%; max-width: 46ch; font: inherit; color: var(--ink); background: none;
  border: 0; border-bottom: 1px solid var(--rule); padding: 4px 0; }
textarea.ck-input { max-width: 62ch; resize: vertical; }
.ck-input:focus { outline: none; border-bottom-color: var(--accent); }
.ck-input.is-ok { border-bottom-width: 2px; }
.ck-input.is-no { border-bottom-style: dotted; }
.ck-act { margin: 12px 0 0; }
.ck-res { margin: 14px 0 0; border-top: 1px solid var(--hair); padding-top: 12px; }
.ck-verdict { font-family: var(--font-mono); font-size: 12.5px; margin: 0 0 6px; }
.ck-back { display: inline-block; margin: 6px 0 0; font-size: 13.5px; }
.ck-follow { margin: 16px 0 0; }
.ck-follow-q { margin: 0 0 6px; }
.ck-lab { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin: 12px 0 4px; }
.ck-crit { margin: 0 0 4px; padding-left: 18px; }
.ck-example { margin: 0; color: var(--muted); }
.ck-end { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin: 14px 0 0; }

/* Навчальна справа */
.st-grid { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 18px 0 8px; }
@media (min-width: 900px) { .st-grid { grid-template-columns: minmax(0, 1fr) 260px; gap: 36px; } }
.st-side h3 { font-family: var(--font-mono); font-size: 12px; color: var(--faint); margin: 0 0 8px; font-weight: 400; }
.st-mat { margin: 0 0 16px; border-left: 2px solid var(--hair); padding-left: 12px; }
.st-mat h4 { margin: 0 0 4px; font-family: var(--font-mono); font-size: 12.5px; }
.st-mat ul { margin: 0; padding-left: 16px; font-size: 13.5px; }
.st-mat li { margin: 0 0 2px; }
.st-write { margin: 16px 0 0; }
.st-wq { margin: 0 0 6px; }
.st-msg { border-left: 2px solid var(--ink); padding-left: 12px; margin: 0 0 14px; }
.st-sent { margin: 0 0 14px; }
.st-sent-t { margin: 0 0 6px; }
.st-labels { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.ck-opt.st-lab { border-left-width: 2px; padding: 2px 0 2px 10px; font-size: 13.5px; }
.st-verdict { margin: 0 0 8px; }
.st-lines { padding-left: 18px; margin: 0 0 18px; max-width: 66ch; }
.st-lines li { margin: 0 0 6px; }
.st-review h3 { font-family: var(--font-mono); font-size: 13px; margin: 18px 0 8px; }

/* ================= Спільна шкала з практикумами (24 вересня 2026) =================
   docs/ui-review-2026-09.md. Шрифти ті самі, що в public/pack/_pk/fonts.css
   (JetBrains Mono для заголовків, хрому і чисел; Fixel Text для тексту);
   шкала як у pack.css. Розділ стоїть останнім і перемагає старі шари. */
:root {
  --sans: "Fixel Text", -apple-system, "SF Pro Text", Inter, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --h1: 44px; --h1-doc: 34px; --h2: 26px; --lead: 19px; --body: 16px;
}
@media (max-width: 699px) { :root { --h1: 32px; --h1-doc: 27px; --h2: 22px; --lead: 17px; } }
body { font: var(--body)/1.55 var(--sans); }
.main h1, .np-head h1, .home h1, .lesson h1, .exercise h1, .class h1 {
  font: 700 var(--h1-doc)/1.12 var(--font-mono); margin: 0 0 16px; text-wrap: balance;
}
.view-home h1, .view-packs h1, .view-map h1, .view-graph h1, .view-practice h1, .view-tools h1,
.view-my h1, .view-search h1, .view-classes h1, .view-questions h1 { font-size: var(--h1); margin-bottom: 18px; }
.home h2, .packs-page h2, .view-my h2 { font: 700 var(--h2)/1.2 var(--font-mono); margin: 56px 0 14px; }
.main .lead, .np p.lead, .lesson .lead { font-size: var(--lead); line-height: 1.5; max-width: 680px; }
.main p, .main li, .np p { font-size: var(--body); line-height: 1.6; }
.intro { border-bottom: 0; margin-bottom: 18px; padding-bottom: 0; }

/* ---- шапка ---- */
.topbar { padding: 10px 24px; gap: 18px; border-bottom: 1px solid var(--hair); }
.brand { display: inline-flex; align-items: center; gap: 10px; font: 700 16px/1 var(--font-mono); min-height: 36px; }
.brand-mark { width: 24px; height: 24px; flex: none; }
.bm-i { fill: var(--ink); } .bm-m { fill: var(--pk-mint); } .bm-b { fill: var(--pk-blue); }
.nav a { font-size: 14px; padding: 8px 10px; }
.secondary { gap: 4px; }
.secondary > a, .secondary > button { display: inline-flex; align-items: center; min-height: 36px; line-height: 1; font-size: 13px; padding: 0 10px; }
.search input { font-size: 14px; }
@media (min-width: 1101px) { .search input { width: 300px; } }
@media (max-width: 1100px) and (min-width: 901px) { .search input { width: 200px; } }
@media (max-width: 900px) { .search .shortcut { display: none; } }
@media (max-width: 699px) {
  .topbar { padding: 8px 16px; gap: 6px 8px; }
  .menubtn { margin-left: auto; order: 2; }
  .brand { order: 1; }
  .nav { order: 3; }
  .secondary { order: 4; display: none; flex-basis: 100%; }
  .nav.open ~ .secondary { display: flex; }
  .search { order: 5; flex-basis: 100%; }
  .spacer { display: none; }
}

/* ---- основна колонка ---- */
.main { padding: 32px 32px 120px; }
@media (max-width: 900px) { .main { padding: 24px 16px 72px; } }

/* ---- каталог практикумів ---- */
.pk-filter { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 20px; }
.pk-filter input, .dmap-q input {
  width: min(420px, 100%); font: 15px/1.3 var(--sans); color: var(--ink); background: transparent;
  border: 0; border-bottom: 1px solid var(--rule); border-radius: 0; padding: 8px 2px; min-height: 40px;
}
.pk-filter input:focus, .dmap-q input:focus { outline: none; border-bottom: 2px solid var(--accent); padding-bottom: 7px; }
.pk-tags-row, .dmap-work { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-tag {
  font: 500 13px/1 var(--font-mono); padding: 0 11px; min-height: 34px; cursor: pointer;
  border: 1px solid var(--hair); background: transparent; color: var(--muted);
}
.pk-tag:hover { border-color: var(--rule); color: var(--ink); }
.pk-tag:active { transform: translateY(1px); }
.pk-tag[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
.pk-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; }
.pk-grid li { border-top: 1px solid var(--hair); }
.pk-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px 12px 18px 0; color: var(--ink); text-decoration: none; }
.pk-card:hover { text-decoration: none; }
.pk-card:hover .pk-t { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.pk-ico { display: block; flex: none; }
.pk-ico svg { display: block; width: 100%; height: 100%; image-rendering: pixelated; }
.pk-ico svg .o { fill: var(--ink); }
.pk-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.pk-t { font: 700 16px/1.3 var(--font-mono); color: var(--ink); }
.main .pk-l { font-size: 15px; line-height: 1.45; color: var(--muted); }
.pk-tg { font: 12px/1.4 var(--font-mono); color: var(--faint); margin-top: 4px; }
.pk-status { font-size: 14px; color: var(--muted); margin: 12px 0 0; }
.pk-status:empty { display: none; }
.pk-more { margin: 28px 0 0; font-size: 15px; }
.home .wf-list { margin-top: 4px; }
.home .guest-note { margin-top: 48px; }

/* ---- поняття: заголовок і вкладки «Мапа · Список» ---- */
.concepts-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap; }
.concepts-head h1 { margin: 0; }
.main .concepts-count { font: 13px/1.4 var(--font-mono); color: var(--muted); margin: 0; }
.concept-tabs { margin: 14px 0 22px; }
.view-map .filters { margin-bottom: 8px; }

/* ---- піксельна мапа кварталів (views/district.js) ---- */
.dmap-bar { display: flex; flex-direction: column; gap: 12px; margin: 0 0 26px; }
.dmap-q { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.dmap-n { font: 12px/1 var(--font-mono); color: var(--faint); }
.dmap { position: relative; }
.dmap-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr));
  grid-auto-rows: 4px; column-gap: 32px; align-items: start;
}
.district { padding: 0 0 26px; min-width: 0; transition: opacity 0.12s; }
.d-head { display: flex; align-items: center; gap: 10px; padding: 0 0 8px; margin: 0 0 6px; border-bottom: 1px solid var(--rule); }
.main .d-name { font: 700 14px/1.25 var(--font-mono); margin: 0; flex: 1; min-width: 0; }
.d-count { font: 12px/1 var(--font-mono); color: var(--faint); font-variant-numeric: tabular-nums; }
.d-tiles { list-style: none; margin: 0; padding: 0; }
.main .d-tiles li { font-size: inherit; line-height: inherit; }
.tile {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 30px; padding: 3px 4px 3px 0;
  font: 14px/1.3 var(--sans); color: var(--ink); text-align: left; cursor: pointer;
  background: transparent; border: 0; transition: opacity 0.12s;
}
.tile .px { flex: none; width: 12px; height: 12px; background: var(--hair); }
.tile .tl { min-width: 0; }
.tile.core .tl::after { content: " ◆"; color: var(--accent); font-size: 9px; vertical-align: 2px; }
/* огляд міста: 15 блоків дрібних плиток */
.dmap-ov { display: grid; grid-template-columns: repeat(5, minmax(0, max-content)); gap: 18px 36px; margin: 0 0 36px; padding: 0 0 26px; border-bottom: 1px solid var(--hair); }
@media (max-width: 699px) {
  .dmap-work { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 6px; margin-right: -16px; }
  .dmap-work .pk-tag { flex: none; }
  .dmap-ov { gap: 14px 12px; } .ov-px { grid-template-columns: repeat(5, 9px); } .ov-px i { width: 9px; height: 9px; } }
.ov-blk { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 6px; align-items: flex-start; padding: 0; border: 0; background: transparent; cursor: pointer; color: var(--muted); text-align: left; }
.ov-px { display: grid; grid-template-columns: repeat(5, 12px); gap: 2px; }
.ov-px i { width: 12px; height: 12px; background: var(--hair); display: block; }
.ov-n { font: 11px/1.2 var(--font-mono); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-blk:hover .ov-n { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.ov-px i.t-learning, .ov-px i.t-g1 { background: repeating-conic-gradient(var(--pk-blue) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.ov-px i.t-g1 { background-image: repeating-conic-gradient(var(--pk-mint) 0 25%, transparent 0 50%); }
.ov-px i.t-known, .ov-px i.t-g2 { background: var(--pk-mint); }
.ov-px i.t-proven, .ov-px i.t-g3 { background: var(--ink); }
.ov-px i.hot { outline: 2px solid var(--ink); outline-offset: 1px; }
.dmap.filtered .ov-px i:not(.lit) { opacity: 0.25; }
.dmap.filtered .ov-px i.lit { outline: 1px solid var(--ink); }
.tile.t-learning .px, .tile.t-g1 .px { background: repeating-conic-gradient(var(--pk-blue) 0 25%, transparent 0 50%) 0 0 / 4px 4px; }
.tile.t-g1 .px { background-image: repeating-conic-gradient(var(--pk-mint) 0 25%, transparent 0 50%); }
.tile.t-known .px, .tile.t-g2 .px { background: var(--pk-mint); }
.tile.t-proven .px, .tile.t-g3 .px { background: var(--ink); }
.tile:hover .tl, .tile.hot .tl { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--rule); }
.tile:focus-visible { outline-offset: 1px; }
.tile.near .tl, .tile.hot .tl { font-weight: 600; }
.dmap.has-hot .tile:not(.hot):not(.near) { opacity: 0.38; }
.dmap.filtered .tile:not(.lit) { opacity: 0.28; }
.dmap.filtered .tile.lit .tl { font-weight: 600; }
.dmap.filtered .district.quiet .d-head { opacity: 0.45; }
.dmap-wires { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; z-index: 3; }
.wire { fill: none; stroke: var(--ink); stroke-width: 1.5; opacity: 0.65; }
.socket { fill: var(--bg); stroke: var(--ink); stroke-width: 1.5; }
.socket.hot { fill: var(--ink); }
.dmap-tip {
  position: absolute; z-index: 6; width: 300px; max-width: 100%; pointer-events: none;
  background: var(--bg); border: 1px solid var(--rule); padding: 10px 12px;
  display: flex; flex-direction: column; gap: 4px;
}
.dmap-tip b { font: 700 14px/1.3 var(--font-mono); }
.tp-en { font: 12px/1.3 var(--font-mono); color: var(--faint); }
.tp-def { font-size: 13.5px; line-height: 1.45; }
.tp-st { font: 12px/1.4 var(--font-mono); color: var(--muted); }
.dmap-legend { display: flex; flex-wrap: wrap; gap: 8px 22px; font: 12px/1.4 var(--font-mono); color: var(--muted); margin: 6px 0 0; }
.lg-it { display: inline-flex; align-items: center; gap: 8px; }
.dmap-legend .tile { width: auto; min-height: 0; padding: 0; cursor: default; }
.lg-core { color: var(--accent); font-size: 9px; }
@media (hover: none), (max-width: 699px) { .dmap-wires, .dmap-tip { display: none !important; } .dmap.has-hot .tile { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tile, .district { transition: none; } }

/* ---- мій прогрес ---- */
.view-my .my-stats { display: flex; flex-wrap: wrap; gap: 10px 36px; border: 0; margin: 0 0 30px; }
.view-my .my-stat { border: 0; padding: 0; display: flex; flex-direction: column-reverse; gap: 2px; }
.my-stat dd { margin: 0; font: 700 24px/1.1 var(--font-mono); font-variant-numeric: tabular-nums; }
.my-stat dt { font-size: 13px; color: var(--muted); }
.my-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.my-date { font: 12px/1 var(--font-mono); color: var(--faint); }
.view-my .my-works { margin-top: 8px; }
.my-io { display: flex; flex-wrap: wrap; gap: 4px; border-top: 1px solid var(--hair); margin-top: 40px; padding-top: 14px; }
.my-io .ghost-btn { font-size: 13px; padding: 0 10px; min-height: 36px; border: 1px solid var(--hair); }
.grp-map { margin: 8px 0 12px; }
@media (max-width: 900px) { .rail-sec.io { display: none; } }
@media print {
  .dmap-wires, .dmap-tip, .my-io, .dmap-bar, .concept-tabs { display: none !important; }
  .dmap-grid { grid-template-columns: repeat(3, 1fr); }
  .district { break-inside: avoid; }
  .tile { min-height: 0; padding: 1px 0; font-size: 9.5pt; }
}

/* ---- дрібні поломки з огляду ---- */
.search-form input { border: 0; border-bottom: 1px solid var(--rule); background: transparent; min-height: 40px; padding: 8px 2px; font: 16px/1.3 var(--sans); }
.search-form input:focus { border-bottom: 2px solid var(--accent); padding-bottom: 7px; }
.np.exercise, .np.lesson { border-top: 0; }
.np.exercise > .np-col { border-right: 0; padding-right: 0; }
.lesson-side .rel { flex-direction: column; align-items: flex-start; gap: 8px; }
.rel button, .rel .chip { text-align: left; }
.mod-strip.plan .mod-card { display: grid; grid-template-columns: 24px minmax(0, 1fr); column-gap: 14px; align-items: start; }
.mod-strip.plan .mod-head { grid-row: 1 / span 3; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.mod-strip.plan .mod-card > b, .mod-strip.plan .mod-card > span { grid-column: 2; }

/* ---- результати пошуку: рядки з типом ліворуч, без коробок ---- */
.view-search .sources { border-top: 1px solid var(--hair); margin-top: 8px; }
.view-search a.src {
  display: grid; grid-template-columns: 110px minmax(0, 1fr); column-gap: 20px; row-gap: 2px;
  border: 0; border-bottom: 1px solid var(--hair); margin: 0; padding: 12px 8px 13px 0; text-decoration: none;
}
.view-search a.src .sh { grid-column: 1; grid-row: 1 / span 2; margin: 2px 0 0; font-size: 12px; }
.view-search a.src .st { grid-column: 2; font: 700 15px/1.35 var(--font-mono); color: var(--ink); }
.view-search a.src .sn { grid-column: 2; font-size: 14px; }
.view-search a.src:hover { background: transparent; }
.view-search a.src:hover .st { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.main .acct-status { font-size: 14px; color: var(--muted); }
@media (max-width: 699px) { .view-search a.src { grid-template-columns: 1fr; } .view-search a.src .sh { grid-row: auto; grid-column: 1; order: -1; } .view-search a.src .st, .view-search a.src .sn { grid-column: 1; } }

/* вбудовані посилання на поняття в розборах: [[id|текст]] */
.xp a.cref-inline { color: inherit; text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--pk-blue); text-underline-offset: 3px; text-decoration-thickness: 1.5px; }
.xp a.cref-inline:hover { color: var(--pk-blue); text-decoration-style: solid; }

/* ---- робочі рецепти (docs/recipes-2026-09.md): #/r/<id>, картки, словник частини ---- */
.recipe { max-width: 760px; }
.recipe .np-bar { justify-content: space-between; }
.recipe h2 { font: 700 20px/1.25 var(--font-mono); margin: 36px 0 12px; }
.rc-brief { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 8px 16px; margin: 0 0 8px; }
.rc-brief dt { font: 12px/1.9 var(--font-mono); color: var(--faint); }
.rc-brief dd { margin: 0; font-size: var(--lead); line-height: 1.45; }
.main .rc-brief dd.rc-min { font: 14px/1.9 var(--font-mono); color: var(--muted); }
.main .rc-approach { max-width: 680px; }
.recipe a.cref-inline { color: inherit; text-decoration: underline dotted var(--pk-blue) 1.5px; text-underline-offset: 3px; }
.recipe a.cref-inline:hover { color: var(--pk-blue); text-decoration-style: solid; }
.rc-bar-r { display: flex; gap: 8px; }
.rc-lens[aria-pressed="true"] { border-color: var(--pk-blue); color: var(--pk-blue); }
.rc-inputs { margin: 0; padding-left: 18px; }
.main .rc-inputs li { margin: 0 0 4px; font-size: 16px; line-height: 1.45; }
/* поняття сховані: видно лише в режимі «Поняття» або в блоці «Що ще вивчити» */
.recipe:not(.lens) .rc-why, .recipe:not(.lens) .rc-lens-only { display: none; }
.recipe:not(.lens) a.cref-inline { text-decoration: none; }
.recipe:not(.lens) li:hover a.cref-inline, .recipe:not(.lens) dd:hover a.cref-inline { text-decoration: underline dotted var(--rule) 1px; }
.main .rc-why { margin: 6px 0 0; font: 12.5px/1.5 var(--font-mono); color: var(--faint); }
.rc-do-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.rc-do-row .rc-tool { flex: none; }
button.rc-concept { background: none; border: 0; border-bottom: 1.5px dotted var(--pk-blue); padding: 1px 0; margin: 0; cursor: pointer; font: 12.5px/1.4 var(--font-mono); color: var(--pk-blue); }
button.rc-concept:hover, button.rc-concept:focus-visible { border-bottom-style: solid; }
.rc-pop { position: absolute; z-index: 60; background: var(--bg, var(--paper, #fff)); border: 1px solid var(--rule); box-shadow: 0 6px 24px rgba(0,0,0,.12); padding: 12px 14px; font-size: 14.5px; line-height: 1.45; }
.rc-pop b { display: block; font: 700 15px/1.3 var(--font-mono); margin-bottom: 6px; }
.rc-pop p { margin: 0 0 8px; }
.rc-pop .rc-pop-why { color: var(--muted); font-size: 13.5px; }
.rc-pop-rel { font: 12.5px/1.6 var(--font-mono); color: var(--faint); margin-bottom: 8px; }
.rc-pop-go { font: 600 13px/1.4 var(--font-mono); }
.rc-tpls { display: grid; gap: 14px; }
.rc-tpl { border: 1px solid var(--hair); padding: 10px 12px 12px; }
.rc-tpl-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-tpl-h b { font: 700 14px/1.3 var(--font-mono); }
.rc-tpl-h .rc-copy { margin-left: auto; }
.rc-pre { white-space: pre-wrap; font: 13px/1.55 var(--font-mono); margin: 0; background: rgba(120,120,120,.06); padding: 10px 12px; }
.rc-tpl-table, .rc-sample-table { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.rc-tpl-table th, .rc-sample-table th { text-align: left; font: 400 12px/1.4 var(--font-mono); color: var(--faint); border-bottom: 1px solid var(--rule); padding: 5px 10px 5px 0; }
.rc-tpl-table td, .rc-sample-table td { vertical-align: top; border-bottom: 1px solid var(--hair); padding: 7px 10px 7px 0; line-height: 1.4; }
.rc-tpl-table td { height: 22px; }
.main .rc-sample-t { font: 600 14px/1.4 var(--font-mono); margin: 0 0 6px; }
.main .rc-sample-n { margin: 8px 0 0; font-size: 15px; color: var(--muted); }
.rc-limits { padding-left: 20px; margin: 0; max-width: 700px; }
.main .rc-limits li { margin: 0 0 8px; }
.rc-levels { list-style: none; counter-reset: lv; padding: 0; margin: 0; display: grid; gap: 10px; }
.rc-levels > li { counter-increment: lv; border: 1px solid var(--hair); padding: 10px 12px; }
.rc-levels > li.on { border-color: var(--pk-blue); box-shadow: inset 4px 0 0 var(--pk-blue); }
.rc-lv-h { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.rc-lv-h b { font: 700 14.5px/1.3 var(--font-mono); }
.rc-lv-h b::before { content: counter(lv) ". "; color: var(--faint); }
.rc-lv-here { font: 600 11.5px/1.6 var(--font-mono); color: var(--pk-blue); }
.main .rc-levels p { margin: 6px 0 0; font-size: 15px; }
.main .rc-levels .rc-lv-when { color: var(--muted); }
.rc-lvl-brief a { font: 600 15px/1.6 var(--font-mono); }
.rc-docs td:first-child { white-space: nowrap; font: 12.5px/1.5 var(--font-mono); color: var(--muted); }
@media (max-width: 640px) { .rc-docs td:first-child { white-space: normal; } }
.rc-srcs { list-style: none; padding: 0; margin: 0; }
.main .rc-srcs li { padding: 6px 0; border-top: 1px solid var(--hair); font-size: 15px; }
.rc-src-n { color: var(--muted); }
.rc-src-d { display: block; font: 12px/1.6 var(--font-mono); color: var(--faint); }
.rc-learn { margin: 36px 0 0; border-top: 1px solid var(--rule); padding-top: 10px; }
.rc-learn summary { cursor: pointer; font: 600 14px/1.6 var(--font-mono); color: var(--muted); }
.rc-learn[open] summary { color: var(--ink); }
.main .rc-learn-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 4px 16px; margin: 12px 0 0; }
.rc-learn-chips { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; }
.rc-wf-link { display: inline-flex; align-items: center; gap: 8px; font: 600 13.5px/1.3 var(--font-mono); }
@media (max-width: 640px) { .rc-do-row { flex-direction: column; gap: 6px; } .main .rc-learn-row { grid-template-columns: 1fr; } }
@media print { .rc-lens, .rc-copy, .rc-learn, .rc-pop, .rc-why { display: none !important; } .rc-pre { background: none; padding: 0; font-size: 8pt; } }
.main .rc-flow { max-width: 700px; margin: 0 0 18px; font-size: 16.5px; line-height: 1.55; color: var(--ink); }
.main h3.rc-q { font: 700 16.5px/1.35 var(--font-mono); margin: 2px 0 8px; }
.rc-qa { display: grid; grid-template-columns: 118px minmax(0, 1fr); gap: 6px 14px; margin: 0; }
.rc-qa dt { font: 12px/1.7 var(--font-mono); color: var(--faint); }
.main .rc-qa dd { margin: 0; font-size: 15.5px; line-height: 1.5; }
.rc-sub { display: inline-block; margin-top: 10px; font: 600 13.5px/1.4 var(--font-mono); }
.main h2.rc-group { font: 700 18px/1.3 var(--font-mono); margin: 36px 0 4px; }
.main .rc-group-sub { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.rc-card > .rc-kind { font-size: 11.5px; }
@media (max-width: 640px) { .rc-qa { grid-template-columns: 1fr; gap: 0; } .main .rc-qa dd { margin-bottom: 8px; } }
.rc-steps { list-style: none; counter-reset: rc; padding: 0; margin: 0; }
.rc-steps > li { counter-increment: rc; display: grid; grid-template-columns: 36px minmax(0, 1fr); column-gap: 12px; padding: 14px 0 16px; border-top: 1px solid var(--hair); }
.rc-steps > li::before { content: counter(rc); grid-row: 1 / span 3; font: 700 20px/1.3 var(--font-mono); color: var(--ink); }
.rc-steps > li > * { grid-column: 2; }
.main .rc-do { margin: 0 0 8px; }
.rc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 0 0 8px; }
.rc-tool { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; padding: 2px 10px 2px 3px; border: 1px solid var(--hair); font: 500 13px/1.2 var(--font-mono); color: var(--ink); text-decoration: none; }
.rc-tool:hover { border-color: var(--rule); text-decoration: none; }
.rc-tool:active { transform: translateY(1px); }
.rc-concept { font: 12.5px/1.4 var(--font-mono); color: var(--pk-blue); text-decoration: none; border-bottom: 1.5px dotted var(--pk-blue); padding: 2px 0; }
.rc-concept:hover { border-bottom-style: solid; text-decoration: none; }
.main .rc-check { margin: 0; font-size: 15px; color: var(--muted); }
.rc-check b { font: 700 12.5px/1 var(--font-mono); color: var(--ink); }
.rc-pits { padding-left: 20px; margin: 0; max-width: 700px; }
.main .rc-pits li { margin: 0 0 10px; }
.rc-pits .rc-concept { margin-left: 4px; white-space: nowrap; }
.rc-tools { border-collapse: collapse; width: 100%; font-size: 14px; }
.rc-tools th { text-align: left; font: 400 12px/1.4 var(--font-mono); color: var(--faint); border-bottom: 1px solid var(--rule); padding: 6px 12px 6px 0; }
.rc-tools td { vertical-align: top; border-bottom: 1px solid var(--hair); padding: 10px 12px 10px 0; line-height: 1.5; }
.rc-tools td:first-child { width: 1%; white-space: nowrap; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.rc-try, .rc-wf, .rc-links { list-style: none; padding: 0; margin: 0; }
.rc-try li { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 2px 16px; padding: 8px 0; border-top: 1px solid var(--hair); }
.rc-kind { font: 12px/1.9 var(--font-mono); color: var(--faint); }
.rc-wf a { display: inline-flex; align-items: center; gap: 10px; font: 700 15px/1.3 var(--font-mono); padding: 4px 0; }
.main .rc-links li { margin: 0 0 6px; font-size: 15px; }
.rc-list { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 0 32px; }
.rc-list > li { border-top: 1px solid var(--hair); }
.rc-card { display: flex; flex-direction: column; gap: 6px; padding: 14px 8px 16px 0; color: var(--ink); text-decoration: none; height: 100%; }
.rc-card:hover { text-decoration: none; }
.rc-card h3 { font: 700 16px/1.3 var(--font-mono); margin: 0; }
.rc-card:hover h3 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
.main .rc-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.rc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 6px; }
.rc-icons { display: flex; gap: 6px; }
.wf-dict { margin-top: 48px; border-top: 1px solid var(--hair); }
.wf-dict > summary { cursor: pointer; padding: 14px 0 4px; list-style: none; display: flex; align-items: baseline; gap: 10px; }
.wf-dict > summary::-webkit-details-marker { display: none; }
.wf-dict > summary::before { content: "+"; font: 700 18px/1 var(--font-mono); color: var(--muted); width: 14px; }
.wf-dict[open] > summary::before { content: "−"; }
.wf-dict > summary h2 { display: inline; margin: 0; }
.wf-dict > summary:hover h2 { text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--rule); }
@media (max-width: 699px) {
  .rc-brief { grid-template-columns: 1fr; gap: 2px; }
  .rc-brief dd { margin-bottom: 10px; }
  .rc-steps > li { grid-template-columns: 26px minmax(0, 1fr); column-gap: 8px; }
  .rc-tools, .rc-tools tbody, .rc-tools tr, .rc-tools td { display: block; width: auto; }
  .rc-tools thead { display: none; }
  .rc-tools tr { border-bottom: 1px solid var(--hair); padding: 10px 0; }
  .rc-tools td { border: 0; padding: 2px 0; }
  .rc-tools td:first-child { width: auto; white-space: normal; margin-bottom: 4px; }
  .rc-tools td.rc-alt { color: var(--muted); }
  .rc-tools td.rc-alt::before { content: attr(data-l); font: 12px/1 var(--font-mono); color: var(--faint); }
  .rc-try li { grid-template-columns: 1fr; }
}
/* друк: шпаргалка на один аркуш A4 */
@page recipe { size: A4; margin: 9mm 12mm; }
@media print {
  .recipe { page: recipe; max-width: none; font-size: 9.2pt; }
  .recipe .np-bar, .rc-print { display: none !important; }
  .recipe h1 { font-size: 15pt; margin: 0 0 5pt; }
  .recipe h2 { font-size: 10.5pt; margin: 7pt 0 2pt; break-after: avoid; }
  .recipe p, .recipe li, .recipe td, .recipe dd, .recipe .rc-check { font-size: 8.8pt; line-height: 1.3; }
  .rc-brief { gap: 1pt 10pt; grid-template-columns: 60pt 1fr; }
  .rc-brief dd { font-size: 9.2pt; }
  .rc-steps > li { padding: 2.5pt 0; grid-template-columns: 18pt 1fr; break-inside: avoid; }
  .rc-steps > li::before { font-size: 11pt; }
  .main .rc-do, .rc-meta { margin: 0 0 2pt; }
  .rc-tool { min-height: 0; padding: 0 6pt 0 0; border: 0; font-size: 8.6pt; gap: 4pt; }
  .rc-tool canvas.spr { width: 12px !important; height: 12px !important; }
  .rc-concept { font-size: 8.6pt; padding: 0; }
  .main .rc-pits li { margin: 0 0 2pt; }
  .rc-tools td, .rc-tools th { padding: 1.5pt 8pt 1.5pt 0; line-height: 1.3; }
  .rc-try li { padding: 1pt 0; grid-template-columns: 84pt 1fr; }
  .rc-kind { white-space: nowrap; }
  .rc-kind { line-height: 1.35; }
  .rcs-wfs { display: none; }
  .rc-tools th:nth-child(2), .rc-tools td:nth-child(2) { display: none; }
  .rc-brief dt { line-height: 1.35; }
  .rc-chips { gap: 2pt 10pt; }
  .recipe a { color: #000; }
}

/* карта роботи на головній */
.main .wm-lead { max-width: 720px; color: var(--muted); margin: 0 0 12px; }
.wm-tabs { display: flex; gap: 6px; margin: 0 0 14px; flex-wrap: wrap; }
.wm-tab { font: 500 13px/1.3 var(--font-mono); padding: 6px 12px; border: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; }
.wm-tab[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.wm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; }
.wm-card { border: 1px solid var(--hair); padding: 12px 14px 14px; display: flex; flex-direction: column; }
.wm-card.loop { border-style: dashed; }
.wm-h { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.main .wm-h h3 { font: 700 15.5px/1.3 var(--font-mono); margin: 0; }
.wm-card ul { list-style: none; padding: 0; margin: 0; }
.wm-card li { padding: 8px 0; border-top: 1px solid var(--hair); display: grid; gap: 2px; }
.wm-card li:first-child { border-top: 0; }
.wm-card li a { font-size: 15px; line-height: 1.4; color: var(--ink); text-decoration: none; }
.wm-card li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.wm-kind { font: 11.5px/1.4 var(--font-mono); color: var(--faint); }
.wm-more { margin-top: auto; padding-top: 8px; font: 600 12.5px/1.4 var(--font-mono); }
.wm-incase { background: none; border: 0; padding: 0; font: inherit; color: var(--pk-blue); cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }
.wc { max-width: 760px; }
.main .wc-setup { font-size: 16.5px; line-height: 1.55; margin: 0 0 18px; }
.wc-day { display: flex; align-items: center; gap: 10px; margin: 22px 0 8px; }
.wc-day b { font: 700 15px/1.3 var(--font-mono); }
.wc-list { list-style: none; padding: 0 0 0 14px; margin: 0; border-left: 2px solid var(--hair); }
.wc-m { position: relative; padding: 10px 0 12px 14px; }
.wc-m::before { content: ''; position: absolute; left: -21px; top: 16px; width: 10px; height: 10px; background: var(--paper, #fff); border: 2px solid var(--ink); }
.wc-m.flash { background: rgba(58,108,191,.10); transition: background .4s; }
.wc-obj { font: 11.5px/1.4 var(--font-mono); color: var(--faint); }
.main .wc-text { margin: 4px 0 6px; font-size: 15.5px; line-height: 1.5; }
.main .wc-q { margin: 0 0 6px; font-weight: 600; font-size: 15.5px; }
.wc-q a { color: var(--ink); }
.wc-out summary { cursor: pointer; font: 600 12.5px/1.5 var(--font-mono); color: var(--muted); }
.main .wc-out p { margin: 6px 0 0; font-size: 15px; color: var(--muted); line-height: 1.5; }
.rc-rev { margin: 28px 0 0; font: 12.5px/1.6 var(--font-mono); color: var(--faint); }
.rc-rev summary { cursor: pointer; }
.rc-rev ul { margin: 6px 0 0; padding-left: 18px; }
.main .rc-rev li { font-size: 13px; color: var(--muted); }

/* Розкажи, як ти це робиш */
.share { max-width: 720px; }
.main .share-warn { font-size: 14.5px; color: var(--muted); border-left: 3px solid var(--pk-warn); padding: 4px 10px; }
.share-form { display: grid; gap: 18px; margin-top: 18px; }
.share-f { display: grid; gap: 4px; }
.share-l { font: 700 14.5px/1.35 var(--font-mono); }
.share-h { font-size: 13.5px; color: var(--faint); }
.share-form textarea, .share-form input:not([type=checkbox]) { font: inherit; font-size: 15.5px; padding: 8px 10px; border: 1px solid var(--rule); background: transparent; color: var(--ink); width: 100%; box-sizing: border-box; }
.share-who { border: 1px solid var(--hair); padding: 10px 12px 12px; display: grid; gap: 8px; }
.share-who legend { font: 600 13px/1.4 var(--font-mono); color: var(--muted); padding: 0 4px; }
.share-check { font-size: 14.5px; display: flex; gap: 8px; align-items: center; }
.share-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.main .share-status { min-height: 1.4em; margin: 0; color: var(--muted); }
.main .share-done { font-size: 17px; padding: 14px; border: 1px solid var(--pk-mint); }
.main .wm-cov { margin: 0 0 12px; font-size: 14.5px; color: var(--muted); }
.wm-gaps { margin-top: 8px; border-top: 1px dashed var(--hair); padding-top: 6px; }
.wm-gaps summary { cursor: pointer; font: 600 12.5px/1.6 var(--font-mono); color: var(--faint); }
.wm-gaps li { padding: 6px 0; display: grid; gap: 2px; border-top: 0; }
.wm-gap-q { font-size: 14.5px; line-height: 1.4; color: var(--muted); }
.wm-gap-a { font: 600 11.5px/1.4 var(--font-mono); }
.main .rc-share { margin: 28px 0 0; font: 600 14px/1.5 var(--font-mono); }

/* режими: вручну, з асистентом, з конектором */
.rc-modes { border: 1px solid var(--hair); padding: 10px 12px 12px; margin: 0 0 16px; }
.rc-mode-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.rc-mode-tab { font: 600 13px/1.3 var(--font-mono); padding: 6px 12px; border: 1px solid var(--hair); background: none; color: var(--muted); cursor: pointer; }
.rc-mode-tab[aria-selected="true"] { border-color: var(--ink); color: var(--ink); }
.main .rc-mode-sum { margin: 4px 0 8px; font-size: 15.5px; line-height: 1.5; }
.rc-mode-meta { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 4px 14px; margin: 0; }
.rc-mode-meta dt { font: 12px/1.7 var(--font-mono); color: var(--faint); }
.main .rc-mode-meta dd { margin: 0; font-size: 14.5px; line-height: 1.5; }
.rc-mode-meta ul { margin: 0; padding-left: 18px; }
.main .rc-mode-step { margin: 0 0 8px; padding: 6px 10px; font-size: 14.5px; line-height: 1.45; background: rgba(120,120,120,.07); display: grid; gap: 2px; }
.rc-by { font: 600 11.5px/1.4 var(--font-mono); color: var(--faint); }
.rc-steps > li.by-assist .rc-by { color: var(--pk-blue); }
.rc-steps > li.by-auto .rc-by { color: var(--pk-mint); }
.rc-steps > li.by-auto .rc-mode-step { background: rgba(47,143,99,.10); }
.rc-steps > li.by-auto .rc-qa { opacity: .55; }
@media (max-width: 640px) { .rc-mode-meta { grid-template-columns: 1fr; gap: 0; } }
@media print { .rc-modes, .rc-mode-step { display: none !important; } }