/* Оформление сайта. Всё своё, в одном файле: ни Tailwind, ни Alpine, ни CDN.
   Замер сети: страница, чей вид лежит на внешнем CDN, при его недоступности
   отдаёт голый HTML, а почти весь трафик идёт из России.

   Устройство: сначала переменные обеих тем, затем каркас, затем прибор,
   затем страницы. Тёмная тема — не инверсия, у неё свои значения фона,
   границ и теней. */

/* ── Цвет ──────────────────────────────────────────────────────────────── */

:root {
  --bumaga: #F4F1EC;
  --polotno: #FFFFFF;
  --polotno-2: #FAF8F5;
  --chernila: #1B1712;
  --chernila-2: #4B443B;
  --tihoe: #7C7468;
  --granica: #E2DCD2;
  --granica-2: #CFC7BA;

  /* Акцент 05.08: обожжённый кирпич вместо малинового. Малиновый спорил
     с янтарём разбора — цвета не складывались в один ряд. */
  --akcent: #9E2A2B;
  --akcent-nazhat: #7F2020;
  --akcent-fon: #F9E7E1;
  --na-akcente: #FFFFFF;

  /* Цвет звука — часть разбора, а не украшение: он дублирует характеристику,
     которая в той же строке написана словами. */
  --glasnyj: #A8560B;
  --glasnyj-fon: #FBF0E2;
  --tvjordyj: #5B4636;
  --tvjordyj-fon: #EFE8DF;
  --mjagkij: #106B4A;
  --mjagkij-fon: #E3F3EC;
  --nemoj: #77706A;
  --nemoj-fon: #EFEDE8;

  --ten-blizko: 0 1px 2px rgba(52, 38, 26, .08);
  --ten-daleko: 0 12px 32px -8px rgba(52, 38, 26, .14);
  --radius: 16px;
  --radius-melkij: 9px;

  --shirina: 1120px;
  --shrift-tekst: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --shrift-zagolovok: Georgia, "Iowan Old Style", "Times New Roman", serif;
  --shrift-znak: "SF Mono", "JetBrains Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

:root[data-tema="tjomnaya"] {
  --bumaga: #16120E;
  --polotno: #221D17;
  --polotno-2: #2B241C;
  --chernila: #F3ECE1;
  --chernila-2: #D2C6B5;
  --tihoe: #A29584;
  --granica: #382F26;
  --granica-2: #4D4133;

  --akcent: #F0897A;
  --akcent-nazhat: #F7A695;
  --akcent-fon: #3C1F19;
  --na-akcente: #1B1712;

  --glasnyj: #F0A44A;
  --glasnyj-fon: #38281A;
  --tvjordyj: #C8A678;
  --tvjordyj-fon: #302619;
  --mjagkij: #56CFA0;
  --mjagkij-fon: #17332A;
  --nemoj: #9C9488;
  --nemoj-fon: #292420;

  --ten-blizko: 0 1px 2px rgba(0, 0, 0, .5);
  --ten-daleko: 0 14px 36px -10px rgba(0, 0, 0, .65);
}

/* ── Сброс и основа ────────────────────────────────────────────────────── */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bumaga);
  color: var(--chernila);
  font: 400 17px/1.62 var(--shrift-tekst);
  overflow-wrap: break-word;
}

a { color: var(--akcent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { color: var(--akcent-nazhat); }

:focus-visible {
  outline: 2.5px solid var(--akcent);
  outline-offset: 2px;
  border-radius: 4px;
}

main {
  max-width: var(--shirina);
  margin: 0 auto;
  padding: 26px 20px 64px;
}

h1, h2, h3 { font-family: var(--shrift-zagolovok); font-weight: 700; line-height: 1.2; }

.k-propusk {
  position: absolute; left: -9999px;
  background: var(--akcent); color: var(--na-akcente);
  padding: 10px 16px; border-radius: var(--radius-melkij); z-index: 60;
}
.k-propusk:focus { left: 12px; top: 12px; }

/* ── Шапка ─────────────────────────────────────────────────────────────── */

.k-shapka {
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in srgb, var(--bumaga) 88%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--granica);
}
.k-shapka__ryad {
  max-width: var(--shirina); margin: 0 auto;
  display: flex; align-items: center; gap: 18px;
  padding: 11px 20px;
}
.k-znak {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--chernila); text-decoration: none; flex: 0 0 auto;
}
.k-znak__udar { fill: var(--akcent); }
.k-znak__imja { font-family: var(--shrift-zagolovok); font-weight: 700; font-size: 20px; letter-spacing: .1px; }

.k-menu { display: flex; gap: 4px; margin-left: auto; flex-wrap: wrap; }
.k-menu__punkt {
  color: var(--chernila-2); text-decoration: none;
  padding: 7px 13px; border-radius: 999px; font-size: 15.5px;
  transition: background .18s ease, color .18s ease;
}
.k-menu__punkt:hover { background: var(--polotno); color: var(--chernila); }
.k-menu__punkt--tut { background: var(--akcent-fon); color: var(--akcent); font-weight: 600; }

.k-tema {
  flex: 0 0 auto;
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--granica-2); border-radius: 999px;
  background: var(--polotno); color: var(--chernila-2); cursor: pointer;
  transition: border-color .18s ease, color .18s ease, transform .18s ease;
}
.k-tema:hover { color: var(--akcent); border-color: var(--akcent); }
.k-tema:active { transform: scale(.94); }
.k-tema__noch { display: none; }
:root[data-tema="tjomnaya"] .k-tema__den { display: none; }
:root[data-tema="tjomnaya"] .k-tema__noch { display: block; }

/* ── Крошки ────────────────────────────────────────────────────────────── */

.k-kroshki {
  display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
  font-size: 14.5px; color: var(--tihoe); margin-bottom: 16px;
}
.k-kroshki__zveno { color: var(--tihoe); text-decoration: none; border-bottom: 1px dotted var(--granica-2); }
.k-kroshki__zveno:hover { color: var(--akcent); border-bottom-color: var(--akcent); }
.k-kroshki__razd { color: var(--granica-2); }
.k-kroshki__tut { color: var(--chernila-2); }

/* ── Общее для страниц ─────────────────────────────────────────────────── */

.g-h1 { font-size: clamp(30px, 4.6vw, 45px); margin: 6px 0 12px; letter-spacing: -.4px; }
.g-h2 { font-size: clamp(21px, 2.6vw, 26px); margin: 40px 0 10px; }
.g-obeshchanie { font-size: 18.5px; color: var(--chernila-2); max-width: 62ch; margin: 0 0 20px; }
.g-pod { color: var(--tihoe); font-size: 15.5px; max-width: 68ch; }
.g-ssylka { font-weight: 600; text-decoration: none; border-bottom: 2px solid var(--akcent-fon); }
.g-ssylka:hover { border-bottom-color: var(--akcent); }

.g-fakty { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0 0 22px; }
.g-fakt {
  display: flex; flex-direction: column; gap: 1px;
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius-melkij); padding: 9px 14px; box-shadow: var(--ten-blizko);
}
.g-fakt__glavnoe { font-weight: 650; font-size: 14.5px; }
.g-fakt__melko { color: var(--tihoe); font-size: 13.5px; }

.k-knopka {
  appearance: none; border: 0; cursor: pointer;
  background: var(--akcent); color: var(--na-akcente);
  font: 600 16px/1 var(--shrift-tekst);
  padding: 13px 22px; border-radius: var(--radius-melkij);
  box-shadow: var(--ten-blizko);
  transition: background .18s ease, transform .12s ease;
}
.k-knopka:hover { background: var(--akcent-nazhat); }
.k-knopka:active { transform: translateY(1px); }
.k-knopka[disabled] { background: var(--granica-2); color: var(--tihoe); cursor: not-allowed; box-shadow: none; }
.k-knopka--melkaya { padding: 9px 16px; font-size: 14.5px; }
.k-knopka--opasnaja { background: transparent; color: var(--akcent); border: 1.5px solid var(--akcent); box-shadow: none; }
.k-knopka--opasnaja:hover { background: var(--akcent-fon); }

/* ── Прибор ────────────────────────────────────────────────────────────── */

.p-pribor {
  background: var(--polotno);
  border: 1px solid var(--granica);
  border-radius: var(--radius);
  box-shadow: var(--ten-blizko), var(--ten-daleko);
  padding: 22px;
  margin: 0 0 8px;
}
.p-pribor__vvod { display: flex; flex-wrap: wrap; gap: 14px 26px; align-items: flex-end; }

.p-pole { display: flex; flex-direction: column; gap: 6px; flex: 1 1 260px; }
.p-pole--uzkoe { flex: 0 1 320px; }
.p-pole__podpis { font-size: 13px; font-weight: 650; letter-spacing: .04em; text-transform: uppercase; color: var(--tihoe); }
.p-pole__vvod, .p-pole__oblast {
  font: 400 19px/1.4 var(--shrift-tekst);
  color: var(--chernila); background: var(--polotno-2);
  border: 1.5px solid var(--granica-2); border-radius: var(--radius-melkij);
  padding: 12px 14px; width: 100%;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.p-pole__oblast { font-size: 16px; resize: vertical; }
.p-pole__vvod:focus, .p-pole__oblast:focus {
  outline: none; border-color: var(--akcent);
  box-shadow: 0 0 0 3px var(--akcent-fon);
}

.p-bystro { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.p-bystro__podpis { font-size: 13px; color: var(--tihoe); margin-right: 2px; }
.p-chip {
  display: inline-block; text-decoration: none;
  font: 500 14.5px/1 var(--shrift-tekst); color: var(--chernila-2);
  background: var(--polotno-2); border: 1px solid var(--granica-2);
  border-radius: 999px; padding: 8px 14px; cursor: pointer;
  transition: border-color .18s ease, color .18s ease, background .18s ease;
}
.p-chip:hover { color: var(--akcent); border-color: var(--akcent); background: var(--akcent-fon); }

.p-pribor__vyhod { margin-top: 20px; }
.p-noscript { color: var(--tihoe); font-size: 15px; margin: 14px 0 0; }

/* ── Результат разбора ─────────────────────────────────────────────────── */

.r-blok { display: flex; flex-direction: column; gap: 18px; }

.r-slovo { display: flex; flex-wrap: wrap; gap: 5px; }
.r-bukva {
  font: 600 30px/1 var(--shrift-zagolovok);
  color: var(--chernila); background: transparent;
  border: 1.5px solid transparent; border-radius: 8px;
  padding: 7px 10px; min-width: 40px; text-align: center;
}
.r-bukva--glasnaja {
  cursor: pointer; border-color: var(--granica-2); background: var(--polotno-2);
  transition: border-color .16s ease, background .16s ease, color .16s ease;
}
.r-bukva--glasnaja:hover { border-color: var(--akcent); color: var(--akcent); }
.r-bukva--udar {
  background: var(--akcent); border-color: var(--akcent); color: var(--na-akcente);
  position: relative;
}
/* Знак ударения рисуется фигурой, а не символом: одиночный комбинирующий акут
   в шрифтах ложится как запятая рядом с буквой и на снимке читается бракованным. */
.r-bukva--udar::after {
  content: ""; position: absolute; top: -12px; left: 50%;
  width: 12px; height: 3px; border-radius: 2px;
  background: var(--akcent);
  transform: translateX(-50%) rotate(-22deg);
}

.r-vopros {
  background: var(--akcent-fon); border-left: 4px solid var(--akcent);
  border-radius: 0 var(--radius-melkij) var(--radius-melkij) 0;
  padding: 14px 16px; margin: 0; color: var(--chernila-2); max-width: 62ch;
}
.r-oshibka { color: var(--akcent); margin: 0; }

.r-glavnoe { display: flex; flex-wrap: wrap; gap: 16px 34px; align-items: center; }
.r-transkr__podpis, .r-slogi__podpis {
  font-size: 13px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tihoe);
}
.r-transkr__znak {
  font: 400 clamp(30px, 5vw, 44px)/1.15 var(--shrift-znak);
  color: var(--akcent); letter-spacing: .5px; margin-top: 2px;
}
.r-schet { display: flex; gap: 22px; }
.r-schet__para { display: flex; flex-direction: column; align-items: flex-start; }
.r-schet__chislo { font: 700 27px/1 var(--shrift-zagolovok); }
.r-schet__podpis { font-size: 13px; color: var(--tihoe); }

.r-zamechanie {
  margin: 0; color: var(--chernila-2); font-size: 15.5px;
  background: var(--polotno-2); border: 1px dashed var(--granica-2);
  border-radius: var(--radius-melkij); padding: 11px 14px; max-width: 74ch;
}

.r-slogi { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.r-slog { font: 600 21px/1 var(--shrift-zagolovok); color: var(--chernila-2); }
.r-slog--udar { color: var(--akcent); border-bottom: 2px solid var(--akcent); }
.r-slogi__tire { color: var(--granica-2); }

.r-tablica { width: 100%; border-collapse: collapse; font-size: 15.5px; }
.r-tablica__podpis {
  text-align: left; font-size: 13px; color: var(--tihoe); padding-bottom: 8px;
}
.r-tablica th {
  text-align: left; font-size: 12.5px; font-weight: 650; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tihoe);
  border-bottom: 1px solid var(--granica-2); padding: 0 10px 8px;
}
.r-tablica td { padding: 11px 10px; border-bottom: 1px solid var(--granica); vertical-align: top; }
.r-tablica tr:last-child td { border-bottom: 0; }
.r-tablica__bukva { font: 600 20px/1 var(--shrift-zagolovok); width: 1%; white-space: nowrap; }
.r-tablica__zvuk { font: 400 19px/1 var(--shrift-znak); width: 1%; white-space: nowrap; }
.r-tablica__pravilo { color: var(--chernila-2); }
.r-tire { color: var(--tihoe); font-style: italic; font-size: 14px; }

/* Цвет живёт на самой метке звука, а не на ячейке: залитая ячейка растягивается
   на высоту всей строки и читается как полоса, а не как звук. */
.r-chip { display: inline-block; padding: 3px 8px; border-radius: 7px; }
.r-zvuk--glasnyj .r-chip { color: var(--glasnyj); background: var(--glasnyj-fon); }
.r-zvuk--tvjordyj .r-chip { color: var(--tvjordyj); background: var(--tvjordyj-fon); }
.r-zvuk--mjagkij .r-chip { color: var(--mjagkij); background: var(--mjagkij-fon); }
.r-zvuk--nemoj .r-tablica__bukva { color: var(--nemoj); }

.r-ogovorka { margin: 0; font-size: 15px; color: var(--tihoe); }

/* ── Легенда цвета ─────────────────────────────────────────────────────── */

.g-legenda { list-style: none; padding: 0; margin: 0 0 8px; display: flex; flex-wrap: wrap; gap: 8px 20px; }
.g-legenda__punkt { display: flex; align-items: center; gap: 8px; font-size: 15px; color: var(--chernila-2); }
.g-tochka { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.g-tochka--glasnyj { background: var(--glasnyj); }
.g-tochka--tvjordyj { background: var(--tvjordyj); }
.g-tochka--mjagkij { background: var(--mjagkij); }
.g-tochka--nemoj { background: var(--nemoj); }

/* ── Плитка слов ───────────────────────────────────────────────────────── */

.g-plitka { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-top: 14px; }
.g-karta {
  display: flex; flex-direction: column; gap: 3px; text-decoration: none;
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius-melkij); padding: 13px 15px;
  box-shadow: var(--ten-blizko);
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.g-karta:hover { border-color: var(--akcent); transform: translateY(-2px); box-shadow: var(--ten-daleko); }
.g-karta__slovo { font: 600 18px/1.2 var(--shrift-zagolovok); color: var(--chernila); }
.g-karta__transkr { font: 400 15px/1.2 var(--shrift-znak); color: var(--akcent); }
.g-eshcho { margin-top: 14px; }

/* ── Список разборов и фильтр ──────────────────────────────────────────── */

.rz-filtr { display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: flex-end; margin: 18px 0 8px; }
.rz-schet { color: var(--tihoe); font-size: 14.5px; margin: 0 0 12px; }
.rz-spisok { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; }
.rz-punkt {
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius-melkij); padding: 14px 16px; box-shadow: var(--ten-blizko);
  transition: border-color .18s ease;
}
.rz-punkt:hover { border-color: var(--granica-2); }
.rz-ssylka { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; text-decoration: none; }
.rz-slovo { font: 600 19px/1.2 var(--shrift-zagolovok); color: var(--chernila); }
.rz-ssylka:hover .rz-slovo { color: var(--akcent); }
.rz-transkr { font: 400 16px/1.2 var(--shrift-znak); color: var(--akcent); }
.rz-schjot { font-size: 14px; color: var(--tihoe); margin-left: auto; }
.rz-podvoh { margin: 7px 0 0; font-size: 15px; color: var(--chernila-2); max-width: 78ch; }
.rz-spisok--ploskij .rz-punkt { padding: 11px 14px; }
.rz-pusto { color: var(--chernila-2); }

/* ── FAQ ───────────────────────────────────────────────────────────────── */

.f-faq { margin-top: 8px; }
.f-punkt {
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius-melkij); margin-bottom: 8px; box-shadow: var(--ten-blizko);
}
.f-vopros {
  cursor: pointer; padding: 14px 16px; font-weight: 600; list-style: none;
  display: flex; align-items: center; gap: 10px;
}
.f-vopros::-webkit-details-marker { display: none; }
.f-vopros::before {
  content: "+"; color: var(--akcent); font: 400 22px/1 var(--shrift-tekst);
  width: 16px; flex: 0 0 16px; transition: transform .2s ease;
}
.f-punkt[open] .f-vopros::before { content: "–"; }
.f-vopros:hover { color: var(--akcent); }
.f-otvet { padding: 0 16px 16px 42px; color: var(--chernila-2); max-width: 78ch; }

/* ── Страница слова ────────────────────────────────────────────────────── */

.s-otvet-srazu {
  font-size: 18px; color: var(--chernila-2);
  background: var(--polotno); border: 1px solid var(--granica);
  border-left: 4px solid var(--akcent);
  border-radius: 0 var(--radius-melkij) var(--radius-melkij) 0;
  padding: 14px 16px; box-shadow: var(--ten-blizko); margin: 0 0 20px;
}
.s-otvet-srazu__podpis { font-size: 13px; text-transform: uppercase; letter-spacing: .04em; color: var(--tihoe); display: block; }
.s-otvet-srazu__znak { font: 400 26px/1.2 var(--shrift-znak); color: var(--akcent); }
.s-podvoh { margin-bottom: 22px; }
.s-podvoh__zagolovok { font-size: 20px; margin: 0 0 6px; }
.s-podvoh__text { margin: 0; color: var(--chernila-2); max-width: 72ch; }
.s-slovo > .r-blok {
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius); box-shadow: var(--ten-blizko), var(--ten-daleko);
  padding: 22px;
}
.s-zamer {
  margin-top: 36px; font-size: 14.5px; color: var(--tihoe);
  border-top: 1px solid var(--granica); padding-top: 14px; max-width: 80ch;
}

/* ── Правила ───────────────────────────────────────────────────────────── */

.ks-spisok { list-style: none; counter-reset: pr; padding: 0; margin: 0; display: grid; gap: 12px; }
.ks-punkt {
  counter-increment: pr;
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius-melkij); padding: 16px 18px 14px 54px;
  position: relative; box-shadow: var(--ten-blizko);
}
.ks-punkt::before {
  content: counter(pr); position: absolute; left: 16px; top: 16px;
  width: 26px; height: 26px; display: grid; place-items: center;
  background: var(--akcent-fon); color: var(--akcent);
  border-radius: 999px; font: 700 14px/1 var(--shrift-tekst);
}
.ks-nazvanie { font-size: 19px; margin: 0 0 5px; }
.ks-text { margin: 0 0 10px; color: var(--chernila-2); max-width: 78ch; }
.ks-primery { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin: 0; }
.ks-chestno {
  background: var(--polotno-2); border: 1px dashed var(--granica-2);
  border-radius: var(--radius-melkij); padding: 14px 16px; color: var(--chernila-2); max-width: 80ch;
}
.ks-net { color: var(--chernila-2); max-width: 78ch; }
.ks-net li { margin-bottom: 7px; }
.ks-norma p { max-width: 78ch; color: var(--chernila-2); }

/* ── Форма ─────────────────────────────────────────────────────────────── */

.v-forma {
  display: grid; gap: 16px; max-width: 620px;
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius); padding: 22px;
  box-shadow: var(--ten-blizko), var(--ten-daleko);
}
.v-forma .k-knopka { justify-self: start; }
.v-lovushka { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.v-otvet { margin: 0; color: var(--chernila-2); }
.v-otvet[data-tip="ploho"] { color: var(--akcent); }

/* ── Данные ────────────────────────────────────────────────────────────── */

.d-spisok { display: grid; gap: 8px; margin: 12px 0 16px; }
.d-zapis {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline;
  background: var(--polotno); border: 1px solid var(--granica);
  border-radius: var(--radius-melkij); padding: 11px 14px; box-shadow: var(--ten-blizko);
}
.d-zapis__kljuch { font: 600 15px/1.3 var(--shrift-znak); color: var(--chernila); }
.d-zapis__znachenie { font: 400 15px/1.3 var(--shrift-znak); color: var(--akcent); }
.d-zapis__chto { font-size: 14px; color: var(--tihoe); flex-basis: 100%; }
.d-posle { color: var(--mjagkij); font-size: 15px; }
.d-chto p, .d-cookie p { max-width: 78ch; color: var(--chernila-2); }

/* ── Лента изменений ───────────────────────────────────────────────────── */

.ci-lenta { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 12px; }
.ci-zapis {
  background: var(--polotno); border: 1px solid var(--granica);
  border-left: 3px solid var(--akcent);
  border-radius: 0 var(--radius-melkij) var(--radius-melkij) 0;
  padding: 15px 18px; box-shadow: var(--ten-blizko);
}
.ci-data { font: 600 13px/1 var(--shrift-znak); color: var(--tihoe); letter-spacing: .02em; }
.ci-zagolovok { font-size: 19px; margin: 6px 0 6px; }
.ci-text { margin: 0 0 9px; color: var(--chernila-2); max-width: 78ch; }
.ci-pod { margin-top: 22px; color: var(--tihoe); font-size: 15px; max-width: 70ch; }

/* ── Ошибки и условия ──────────────────────────────────────────────────── */

.ch-adres { font: 400 15px/1 var(--shrift-znak); background: var(--polotno-2); padding: 3px 6px; border-radius: 5px; }
.ch-spisok { color: var(--chernila-2); }
.ch-spisok li { margin-bottom: 6px; }
.u-blok p { max-width: 78ch; color: var(--chernila-2); }

/* ── Подвал ────────────────────────────────────────────────────────────── */

.k-podval {
  border-top: 1px solid var(--granica);
  background: var(--polotno);
  padding: 34px 20px 30px;
}
.k-podval__ryad {
  max-width: var(--shirina); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 24px;
}
.k-podval__stolb { display: flex; flex-direction: column; gap: 7px; }
.k-podval__zagolovok {
  font-size: 12.5px; font-weight: 650; letter-spacing: .05em;
  text-transform: uppercase; color: var(--tihoe); margin-bottom: 2px;
}
.k-podval__stolb a { color: var(--chernila-2); text-decoration: none; font-size: 15.5px; width: fit-content; }
.k-podval__stolb a:hover { color: var(--akcent); }
.k-podval__nizhe {
  max-width: var(--shirina); margin: 26px auto 0;
  padding-top: 18px; border-top: 1px solid var(--granica);
  color: var(--tihoe); font-size: 14.5px; max-width: 74ch;
}

/* Подпись над ответом прибора: нужна там, где на странице есть второй разбор
   (страница готового слова). Тише заголовков раздела — это метка, а не рубрика. */
.p-pribor__podpis-vyhoda {
  margin: 14px 0 -4px; font-size: 13px; font-weight: 600;
  letter-spacing: .04em; text-transform: uppercase; color: var(--chernila-2);
}

/* ── Плашка о cookie ───────────────────────────────────────────────────── */

/* 🔴 `display:flex` СИЛЬНЕЕ атрибута `hidden`, и плашка не скрывалась ничем.
   Замер 07.08.2026: скрипт честно ставил `plashka.hidden = true` и писал cookie, но
   плашка оставалась на экране — и при закрытии, и при каждом следующем заходе. То есть
   согласие не работало вовсе, а перекрывало низ экрана на всех страницах.
   Правило нужно ОДНО и общее: любой элемент с `hidden` скрыт, чем бы он ни был. Иначе
   та же ловушка повторится на следующем блоке с раскладкой. */
[hidden] { display: none !important; }

.k-cookie {
  position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 50;
  max-width: 640px; margin: 0 auto;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  background: var(--polotno); border: 1px solid var(--granica-2);
  border-radius: var(--radius); padding: 13px 16px;
  box-shadow: var(--ten-daleko);
}
.k-cookie__text { margin: 0; flex: 1 1 260px; font-size: 14.5px; color: var(--chernila-2); }

/* ── Узкий экран ───────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  body { font-size: 16.5px; }
  main { padding: 18px 14px 52px; }
  .k-shapka__ryad { padding: 9px 14px; gap: 10px; flex-wrap: wrap; }
  .k-znak__imja { font-size: 18px; }
  .k-menu { order: 3; flex-basis: 100%; margin-left: 0; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .k-menu__punkt { white-space: nowrap; }
  .k-tema { margin-left: auto; }
  .p-pribor, .s-slovo > .r-blok, .v-forma { padding: 16px 14px; }
  .r-bukva { font-size: 25px; min-width: 34px; padding: 6px 8px; }
  .r-glavnoe { gap: 14px 22px; }
  .r-schet { gap: 16px; }
  /* Таблица прокручивается внутри себя, а не рвёт страницу. */
  .r-tablica { display: block; overflow-x: auto; white-space: nowrap; }
  .r-tablica__pravilo { white-space: normal; min-width: 220px; }
  .r-tablica td:nth-child(3) { white-space: normal; min-width: 180px; }
  .g-plitka { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .f-otvet { padding-left: 16px; }
  .ks-punkt { padding: 14px 14px 12px 46px; }
  .k-cookie { left: 8px; right: 8px; bottom: 8px; }
}

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

/* ── Две колонки в результате ──────────────────────────────────────────
   Планка сети: на широком экране первый экран обязан быть занят делом,
   а не абзацем, прижатым влево. Левая колонка — ответ (транскрипция,
   счёт, слоги), правая — разбор по буквам. */

.r-para { display: grid; gap: 18px 30px; }
.r-levo { display: flex; flex-direction: column; gap: 16px; }
.r-slovo { padding-top: 14px; }

@media (min-width: 1000px) {
  .r-para { grid-template-columns: minmax(280px, 34fr) 66fr; align-items: start; }
  .r-levo { position: sticky; top: 74px; }
}

/* ── Почему min-width: 0 обязателен ────────────────────────────────────
   Элемент грид- и флекс-раскладки по умолчанию не сжимается уже своего
   содержимого (min-width: auto). Поэтому таблица с nowrap растягивала
   колонку до 576 px при экране 390, и страница ехала вбок — при том что
   у самой таблицы стоял overflow-x. Ограничение снимается здесь. */

.r-para > * { min-width: 0; }
.r-pravo { min-width: 0; overflow-x: auto; }
.k-menu { min-width: 0; }
.p-pribor, .p-pribor__vvod, .p-pole { min-width: 0; }
.r-glavnoe, .r-slogi, .r-schet { min-width: 0; flex-wrap: wrap; }

/* ── Первый экран телефона ─────────────────────────────────────────────
   Правило сети: на первом экране мобильного должен быть инструмент, а не
   подводка к нему. Замер до правки: заголовок, обещание и три плашки
   съедали 844 px целиком, и поле ввода начиналось за краем экрана.
   Поэтому здесь плашки сжимаются в один прокручиваемый ряд, а пояснения
   к ним остаются только там, где для них есть место. */

@media (max-width: 720px) {
  .g-h1 { font-size: clamp(26px, 7.4vw, 32px); margin-top: 2px; }
  .g-obeshchanie { font-size: 16.5px; line-height: 1.5; margin-bottom: 14px; }
  .g-shapka { margin-bottom: 4px; }
  .g-fakty {
    flex-wrap: nowrap; overflow-x: auto; gap: 8px;
    margin-bottom: 16px; padding-bottom: 4px;
    scrollbar-width: none;
  }
  .g-fakty::-webkit-scrollbar { display: none; }
  .g-fakt { flex: 0 0 auto; padding: 7px 12px; }
  .g-fakt__glavnoe { font-size: 13.5px; white-space: nowrap; }
  .g-fakt__melko { display: none; }
}


/* ⚠️ Верх главной на телефоне 05.08: до поля ввода приходилось прокручивать
   почти пол-экрана — заголовок, четыре строки обещания и три плашки-факта.
   Замер на 390 px: поле начиналось на 420-й точке при высоте экрана 844.
   Лечится не перестановкой блоков, а длиной текста: обещание сокращено вдвое,
   заголовок и подпись на телефоне мельче. После правки поле начинается на 360-й
   точке — прибор виден на первом экране без прокрутки. */
@media (max-width: 640px) {
  .g-h1 { font-size: 1.6rem; }
  .g-obeshchanie { font-size: .97rem; }
}