/* ============================================================================
   notes.css — раздел «Charting notes».

   Наследует токены из assets/styles.css: тема, палитра, шрифты — общие с
   остальным сайтом. Здесь только то, чего больше нигде нет, и ни одной
   копии переменных: скопированный токен однажды разойдётся с оригиналом,
   и спорить будет не с чем.

   ГЛАВНОЕ РЕШЕНИЕ ОФОРМЛЕНИЯ. Это текст, который читают после смены, с
   телефона, одной рукой. Поэтому колонка узкая, кегль крупный, а всё
   декоративное убрано: единственная «картинка» здесь — сам текст записи
   в таблице «до и после», и он важнее любой иллюстрации.
   ========================================================================== */

.nt-wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 22px 18px 80px;
}

/* ── вход ──────────────────────────────────────────────────────────────
   ПЛОТНОСТЬ БЫЛА ГЛАВНОЙ БЕДОЙ. Женя 2026-09-21: «всё очень сжато, много
   текста; представь, как тяжело человеку, который только попал на сайт».
   Замер подтвердил словами цифр: строка 101 знак при норме 60–75, кегль
   13.5, и 699 пикселей текста ДО первой карточки — на телефоне 947.
   Человек с телефона видел стену и не доезжал до списка.

   Лечится тремя вещами, и все три меряются:
     строка    не длиннее 68 знаков: колонка узкая, а не экран широкий
     кегль     17 px и выше — это текст, который читают после смены
     воздух    промежуток между блоками больше, чем внутри блока,
               иначе глаз не видит, где кончается одно и начинается другое */

.nt-hero { padding: 22px 0 10px; }
.nt-hero h1 {
  font-family: var(--f-d);
  font-size: clamp(30px, 7vw, 46px);
  line-height: 1.04;
  letter-spacing: .2px;
  text-wrap: balance;
  margin: 6px 0 14px;
}
.nt-lede {
  font-size: 18.5px;
  line-height: 1.68;
  color: var(--fg-2);
  margin: 0 0 12px;
  max-width: 34em;        /* ≈ 62 знака: мера, а не ширина экрана */
}
.nt-lede-2 { color: var(--fg-3); font-size: 16.5px; margin-bottom: 0; }

.nt-cluster { margin: 34px 0 0; }
.nt-cluster h2 {
  font-size: 13px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  border-bottom: 1px solid var(--line);
  padding-bottom: 8px;
  margin: 0 0 6px;
}
.nt-cluster-note { font-size: 13.5px; color: var(--fg-3); margin: 0 0 14px; }

.nt-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }

/* КАРТОЧКА СПИСКА. Персонаж — левая колонка постоянной ширины, стоит на
   нижней границе карточки. Справа и «по низу текста» он оказывался на
   разной высоте у каждой карточки, потому что высоту задаёт текст, —
   двенадцать кукол прыгали по вертикали.

   overflow:hidden тут стоял и РЕЗАЛ куклу прямой линией по груди. Его
   нет: растворённый низ портрета доходит до конца внутри карточки. */
/* КАРТОЧКА БЕЗ ПОРТРЕТА. Слева — номер, он же порядок чтения; справа
   «Read →», чтобы было видно, что это ссылка, а не абзац. Высота стала
   меньше: без куклы карточке незачем быть в сто пикселей, и на экран
   помещается вдвое больше статей. */
.nt-card {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0 14px;
  min-height: 84px;
  padding: 20px 18px 20px 0;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--line-2);
  border-radius: 3px;
  text-decoration: none;
  color: inherit;
  transition: border-color .14s, background .14s;
}
.nt-card:hover { border-color: var(--line); border-left-color: var(--accent); }

.nt-card-body { display: block; align-self: center; padding: 14px 0; }
.nt-card-n {
  display: block;
  font: 400 10.5px/1 var(--f-m);
  letter-spacing: .1em;
  color: var(--fg-3);
  margin-bottom: 6px;
}
.nt-card-title {
  display: block; font-weight: 600; font-size: 16.5px; line-height: 1.3;
  margin-bottom: 4px;
}
.nt-card-line { display: block; font-size: 14px; color: var(--fg-2); line-height: 1.45; }
.nt-card-meta {
  display: block; font: 400 10.5px/1 var(--f-m);
  letter-spacing: .05em; text-transform: uppercase;
  color: var(--fg-3); margin-top: 8px;
}

@media (max-width: 460px) {
  .nt-card { grid-template-columns: 44px minmax(0, 1fr); gap: 0 10px; }
  .nt-card-go { display: none; }
}

.nt-how {
  margin: 46px 0 0;
  padding: 20px 22px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.nt-how h2 { font-size: 15px; margin: 0 0 12px; }
.nt-how ul { margin: 0; padding-left: 18px; }
.nt-how li { font-size: 14.5px; line-height: 1.6; color: var(--fg-2); margin-bottom: 9px; }
.nt-how b { color: var(--fg); }

/* ══ СТАТЬЯ ═════════════════════════════════════════════════════════════
   МИР, ИЗ КОТОРОГО ВЗЯТО ОФОРМЛЕНИЕ, — сам чарт: моноширинные записи,
   корешки-разделители, номера, штампы. Не «красивый блог про медицину»,
   а то, во что человек смотрит всю смену.

   Первая версия провалилась ровно потому, что этого не делала: персонажи
   были приклеены к обычной текстовой колонке, бежевое лежало на бежевом,
   и всё вместе выглядело дёшево. Женя: «криво и дешево». Картинки тут не
   виноваты — виновата страница, которая ничего вокруг них не построила.
   ══════════════════════════════════════════════════════════════════════ */

.nt-crumbs {
  font: 400 11.5px/1 var(--f-m);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 20px;
}
.nt-crumbs a { color: var(--fg-2); text-decoration: none; }
.nt-crumbs a:hover { color: var(--accent-ink); }

/* ── шапка статьи ────────────────────────────────────────────────────
   Персонаж стоит НА линии, как фигура на полу, а не висит в воздухе
   рядом с заголовком. Линия — та же, что отделяет шапку от текста:
   один элемент работает и разделителем, и опорой. */
.nt-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: 20px;
  margin: 0 0 30px;
  padding-bottom: 0;
  border-bottom: 2px solid var(--ink-2, var(--fg));
}
.nt-head-text { padding-bottom: 18px; }
.nt-head-doll { display: block; margin-bottom: -2px; }
.nt-hero-doll { width: 150px; display: block; }

/* Ярлык раздела — как язычок разделителя в папке. */
.nt-head .pay-kick,
.nt-tab {
  display: inline-block;
  font: 500 10.5px/1 var(--f-m);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--paper, #f5f1e8);
  background: var(--teal);
  padding: 6px 10px 5px;
  border-radius: 3px 3px 0 0;
  margin: 0 0 12px;
}

.nt-head h1 {
  font-family: var(--f-d);
  font-size: clamp(29px, 5.4vw, 44px);
  line-height: 1.02;
  letter-spacing: .01em;
  /* БЕЗ text-wrap: balance. Здесь заголовок делит строку с портретом, и
     балансировка укорачивала строки до 380 точек при доступных 550 —
     между текстом и куклой зияла дыра, и вся шапка выглядела случайной.
     Балансировка хороша там, где заголовок один на всю ширину. */
  margin: 0 0 12px;
}
.nt-deck {
  font-size: 17px; line-height: 1.5; color: var(--fg-2);
  margin: 0 0 14px; max-width: 46ch;
}
.nt-facts {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  font: 400 11px/1 var(--f-m); letter-spacing: .04em;
  text-transform: uppercase; color: var(--fg-3); margin: 0;
}

/* ── оглавление: указатель формы, а не список ссылок ───────────────── */
/* Оглавление в две колонки на широком экране. В одну девять пунктов
   занимали 370 точек почти пустой высоты перед первой строкой статьи —
   человек сначала видел список, а не текст. */
.nt-toc { margin: 0 0 30px; }
@media (min-width: 640px) {
  .nt-toc ul { grid-template-columns: 1fr 1fr; column-gap: 26px; }
}
.nt-toc ul {
  list-style: none; margin: 0; padding: 0;
  counter-reset: toc;
  display: grid; gap: 0;
}
.nt-toc li { counter-increment: toc; border-bottom: 1px solid var(--line-3); }
.nt-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 6px 2px; font-size: 14px; color: var(--fg-2); text-decoration: none;
}
.nt-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font: 400 11px/1 var(--f-m); color: var(--fg-3);
  min-width: 2.2em; letter-spacing: .06em;
}
.nt-toc a:hover { color: var(--accent-ink); background: var(--hover); }

/* ── тело ────────────────────────────────────────────────────────────── */
.nt-body { font-size: 17.5px; line-height: 1.65; counter-reset: sec; }
.nt-body p { margin: 0 0 20px; }

.nt-body h2 {
  counter-increment: sec;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 14px;
  font-family: var(--f-d);
  font-size: clamp(22px, 3.6vw, 29px);
  line-height: 1.08;
  letter-spacing: .01em;
  margin: 52px 0 18px;
  padding-top: 18px;
  border-top: 2px solid var(--line);
  text-wrap: balance;
}
.nt-body h2::before {
  content: counter(sec, decimal-leading-zero);
  font: 400 12px/1.6 var(--f-m);
  letter-spacing: .08em;
  color: var(--accent-ink);
}
.nt-body h3 { font-size: 17.5px; font-weight: 650; margin: 30px 0 10px; }
.nt-body ul, .nt-body ol { margin: 0 0 20px; padding-left: 20px; }
.nt-body li { margin-bottom: 10px; }
.nt-body li::marker { color: var(--fg-3); }
.nt-body strong { font-weight: 650; }
.nt-body em { font-style: italic; color: var(--fg-2); }

/* ══ ЗАПИСЬ В ЧАРТЕ — главная картинка этой страницы ═══════════════════
   За этим разделом статью и открывают: «а как написать правильно».
   Поэтому он выглядит не таблицей-отчётом, а тем, что человек сейчас
   напечатает в поле для заметки: моноширинно, с корешком и подписью.
   Цвет несёт смысл и НЕ единственный признак — есть ещё и подписи. */
.chart-pairs { display: grid; gap: 14px; margin: 0 0 26px; }
.chart-pair {
  display: grid; gap: 10px;
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  /* align-items: start — карточки не растягиваются друг под друга.
     «Patient fine.» рядом с шестистрочной записью выглядела пустой
     коробкой: высоту ей задавала соседка, а не содержимое. */
  .chart-pair { grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
}
.chart-note {
  margin: 0;
  padding: 12px 14px 13px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--line);
  border-radius: 3px;
}
.chart-note.bad  { border-left-color: var(--accent); }
.chart-note.good { border-left-color: var(--teal); }
.chart-note figcaption {
  font: 500 10px/1 var(--f-m);
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3); margin-bottom: 8px;
}
.chart-note.bad figcaption  { color: var(--accent-ink); }
.chart-note.good figcaption { color: var(--link); }
.chart-note p {
  margin: 0 !important;
  font: 400 13.5px/1.55 var(--f-m);
  color: var(--fg);
}

/* ── обычная таблица (слова и почему) ────────────────────────────────── */
.tbl-wrap { overflow-x: auto; margin: 0 0 26px; -webkit-overflow-scrolling: touch; }
.nt-body table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 15px; }
.nt-body th {
  text-align: left;
  font: 500 10px/1 var(--f-m); letter-spacing: .12em; text-transform: uppercase;
  color: var(--fg-3); border-bottom: 2px solid var(--line);
  padding: 0 16px 9px 0; white-space: nowrap;
}
.nt-body td {
  vertical-align: top; padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line-3); line-height: 1.5;
}
.nt-body tbody td:first-child {
  font: 400 13px/1.5 var(--f-m); color: var(--accent-ink); white-space: nowrap;
}

/* ══ ЗАМЕТКА НА ПОЛЯХ ═══════════════════════════════════════════════════
   Не «облачко чата»: облачко — это чужой интерфейс, и от него страница
   выглядит шаблоном. Здесь — листок, оставленный на полях: бумага чуть
   другого тона, лёгкий наклон, имя того, кто это сказал, моноширинно.
   Персонаж стоит рядом на одной линии с листком, а не парит. */
.nt-aside {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: start;
  align-items: end;
  gap: 0 4px;
  margin: 34px 0;
}
.nt-aside-doll { width: 104px; display: block; margin-bottom: -6px; }

/* ЛИСТОК, А НЕ ОБЛАЧКО. Облачко чата — чужой интерфейс, от него
   страница выглядит шаблоном. Здесь бумага другого тона (жёлтая из
   палитры канала, приглушённая), лёгкий наклон и жёсткая тень уголком:
   так выглядит записка, которую оставили поверх чарта.

   Ширина ОГРАНИЧЕНА. Растянутая на всю колонку реплика в две строки —
   это пустая коробка с текстом в углу; именно так и было. */
.nt-note-card {
  position: relative;
  max-width: 44ch;
  margin: 0 0 16px;
  padding: 12px 16px 14px;
  background: #f7ecc9;
  background: color-mix(in oklab, var(--alert) 26%, var(--panel));
  border: 1px solid rgba(26, 29, 31, .14);
  border-radius: 2px;
  rotate: -.7deg;
  box-shadow: 3px 4px 0 0 rgba(26, 29, 31, .1);
}
.nt-note-who {
  display: block;
  font: 500 9.5px/1 var(--f-m);
  letter-spacing: .14em; text-transform: uppercase;
  color: rgba(26, 29, 31, .5); margin-bottom: 7px;
}
.nt-note-card p {
  margin: 0 !important;
  font-size: 16px; line-height: 1.45;
  color: #2a2b22;
}
/* Тёмная тема: бумага остаётся бумагой, но не светит в глаза.
   Медиазапрос НЕЛЬЗЯ ставить в список селекторов — правило целиком
   отбрасывается, и записка остаётся белой на тёмном. Поэтому два
   отдельных блока: ручной выбор и системная тема. */
:root[data-theme="dark"] .nt-note-card {
  background: #3a3524;
  border-color: rgba(233, 228, 217, .16);
  box-shadow: 3px 4px 0 0 rgba(0, 0, 0, .25);
}
:root[data-theme="dark"] .nt-note-card p { color: #e8e2cf; }
:root[data-theme="dark"] .nt-note-who { color: rgba(233, 228, 217, .5); }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nt-note-card {
    background: #3a3524;
    border-color: rgba(233, 228, 217, .16);
    box-shadow: 3px 4px 0 0 rgba(0, 0, 0, .25);
  }
  :root:not([data-theme="light"]) .nt-note-card p { color: #e8e2cf; }
  :root:not([data-theme="light"]) .nt-note-who { color: rgba(233, 228, 217, .5); }
}

/* ── источники ───────────────────────────────────────────────────────── */
.nt-note { font-size: 14px; color: var(--fg-3); line-height: 1.55; margin: 0 0 16px; }
.nt-cases, .nt-links { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 6px; }
.nt-case {
  padding: 11px 14px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 4px solid var(--teal);
  border-radius: 3px;
  font-size: 15px;
}
.nt-case.thin { border-left-style: dashed; opacity: .8; }
.nt-case a { display: block; margin-bottom: 4px; color: var(--link); }
.nt-case-meta {
  font: 400 10.5px/1 var(--f-m); letter-spacing: .05em;
  text-transform: uppercase; color: var(--fg-3);
}
.nt-links li { font-size: 14.5px; line-height: 1.6; }
.nt-links a { color: var(--link); }
.nt-links span { font: 400 10.5px/1 var(--f-m); color: var(--fg-3); }

@media (max-width: 560px) {
  .nt-head { column-gap: 10px; }
  .nt-hero-doll { width: 104px; }
  .nt-head-text { padding-bottom: 14px; }
  .nt-body { font-size: 17px; }
  .nt-body h2 { gap: 10px; margin-top: 42px; }
  .nt-aside-doll { width: 74px; }
  .nt-note-card p { font-size: 15px; }
}
/* ── примеры от читателей ────────────────────────────────────────────── */

.nt-ex {
  margin: 46px 0 0;
  padding: 22px 22px 20px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
}
.nt-ex h2 { font-size: 18px; margin: 0 0 10px; }
.nt-ex-form { margin: 16px 0 0; }
.nt-ex textarea {
  width: 100%;
  font-family: var(--f-m);
  /* 16px, а не 14: поле мельче шестнадцати зумит страницу на айфоне. */
  font-size: 16px;
  line-height: 1.5;
  padding: 12px 13px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  resize: vertical;
}
.nt-ex-row { display: flex; gap: 10px; align-items: center; margin-top: 10px; }
.nt-ex-row input {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 16px;
  padding: 9px 12px;
  background: var(--panel);
  color: var(--fg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.nt-ex-count {
  font-family: var(--f-m);
  font-size: 11px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.nt-ex-err { font-size: 13.5px; color: var(--accent-ink); margin: 10px 0 0; }
.nt-ex-list { margin-top: 18px; display: grid; gap: 10px; }
.nt-ex-empty { font-size: 14px; color: var(--fg-3); margin: 0; }
.nt-ex-item {
  padding: 12px 14px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line);
  border-radius: var(--radius);
}
.nt-ex-item p { margin: 0; font-family: var(--f-m); font-size: 13.5px; line-height: 1.55; }
.nt-ex-meta {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 8px !important;
  font-family: var(--f-t) !important;
  font-size: 11.5px !important;
  color: var(--fg-3);
}
.nt-ex-flag {
  margin-left: auto;
  background: none;
  border: 0;
  padding: 2px 4px;
  font: inherit;
  color: var(--fg-3);
  cursor: pointer;
  text-decoration: underline;
}
.nt-ex-flag:disabled { cursor: default; text-decoration: none; opacity: .6; }

/* ── дальше читать ───────────────────────────────────────────────────── */

.nt-next { margin: 50px 0 0; border-top: 2px solid var(--line); padding-top: 22px; }
.nt-next h2 { font-size: 13px; letter-spacing: .1em; text-transform: uppercase;
              color: var(--fg-3); margin: 0 0 14px; }
.nt-next-grid { display: grid; gap: 10px; }
@media (min-width: 680px) { .nt-next-grid { grid-template-columns: 1fr 1fr; } }
.nt-next-card {
  display: block;
  padding: 15px 16px;
  background: var(--panel);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: border-color .12s;
}
.nt-next-card:first-child { grid-column: 1 / -1; border-color: var(--line); }
.nt-next-card:hover { border-color: var(--accent); }
.nt-next-kind {
  display: block;
  font-family: var(--f-m);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin-bottom: 6px;
}
.nt-next-title { display: block; font-weight: 600; font-size: 16px; line-height: 1.3; }
.nt-next-line { display: block; font-size: 13.5px; color: var(--fg-2); margin-top: 4px; }

@media (prefers-reduced-motion: reduce) {
  .nt-card, .nt-next-card { transition: none; }
  .nt-card:hover { transform: none; }
}

@media (max-width: 520px) {
  .nt-head { gap: 12px; }
  .nt-doll { width: 52px; height: auto; }
  .nt-body { font-size: 16.5px; }
}


/* ══ ПЕРСОНАЖИ ══════════════════════════════════════════════════════════
   Реплика на полях — это РЕЧЬ, а не врезка «важно». Поэтому персонаж и
   облачко, а не иконка и рамка. Хвостик облачка смотрит на того, кто
   говорит. */

.nt-aside {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  margin: 26px 0;
}
.nt-aside-doll { width: 82px; }

.nt-bubble {
  position: relative;
  margin: 0;
  padding: 13px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 14px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--fg-2);
}
/* Хвостик — два треугольника: внешний рисует обводку, внутренний
   закрывает её фоном. Один примитив тут не справляется: заливка и
   обводка по одной осевой дают «мазок». */
.nt-bubble::before,
.nt-bubble::after {
  content: "";
  position: absolute;
  left: -9px;
  top: 50%;
  width: 0; height: 0;
  border: 9px solid transparent;
  border-right-color: var(--line-2);
  margin-top: -9px;
}
.nt-bubble::after {
  left: -7.5px;
  border-right-color: var(--panel-2);
}

/* Портрет на карточке в списке. Заезжает за правый край карточки — это
   и создаёт ощущение, что персонаж стоит В списке, а не лежит на нём. */


/* Портрет в карточке «дальше читать» */
.nt-next-card { position: relative; }

@media (max-width: 560px) {
  .nt-head { grid-template-columns: minmax(0, 1fr) auto; gap: 6px 10px; }
  .nt-hero-doll { width: 92px; }
  .nt-head-doll { margin-bottom: -14px; }
  .nt-aside { gap: 9px; }
  .nt-aside-doll { width: 62px; }
  .nt-bubble { font-size: 14.5px; padding: 11px 13px; }
  }

@media (prefers-reduced-motion: reduce) {
    .nt-card:hover }

/* Подпись автора. Для медицинских тем это не украшение: поисковики
   спрашивают «кто это писал и почему ему верить», и страница обязана
   отвечать. Имени нет намеренно — причина на /about/, и ссылка ведёт
   именно туда, а не прячет вопрос. */
.nt-by {
  margin: .5rem 0 0;
  font-size: .86rem;
  color: var(--fg-2, inherit);
  opacity: .85;
}
.nt-by a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }

/* ── ПОИСК И ЧИПЫ РАЗДЕЛОВ ────────────────────────────────────────────
   Появились на 36 статьях. До этого страница была одним длинным списком:
   его читают сверху вниз ровно один раз. Поиск и чипы превращают её из
   ленты в каталог — человек приходит с конкретным вопросом, а не читать
   всё подряд. */
.nt-find {
  position: sticky; top: 0; z-index: 5;
  padding: .8rem 0 .7rem; margin: 0 0 1.6rem;
  background: var(--bg);
  border-bottom: 1px solid var(--line-2, #d7d0c2);
}
.nt-find input {
  width: 100%; min-height: 50px; padding: 0 .9rem;
  border-radius: 10px; border: 1px solid var(--line-2, #d7d0c2);
  background: transparent; color: inherit; font: inherit; font-size: 1rem;
}
.nt-find input:focus-visible {
  outline: 2px solid var(--accent, #4a7a7e); outline-offset: 1px;
}
/* ЧИПЫ РАЗДЕЛОВ ПЕРЕНОСЯТСЯ, А НЕ УЕЗЖАЮТ ЗА КРАЙ. Была горизонтальная
   прокрутка без полосы — на широком экране последний раздел обрезался
   на полуслове («Other peop…»), и понять, что список продолжается,
   было нечем. Человек видит ровно то, что есть. */
.nt-chips {
  display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .7rem;
  padding-bottom: .2rem;
}
.nt-chips::-webkit-scrollbar { display: none; }
.nt-chip {
  flex: 0 0 auto; min-height: 44px; padding: 0 .85rem; cursor: pointer;
  border-radius: 999px; border: 1px solid var(--line-2, #d7d0c2);
  background: transparent; color: inherit; white-space: nowrap;
  font: 500 .9rem/1 var(--f-t, inherit);
}
.nt-chip.on {
  border-color: var(--accent, #4a7a7e);
  background: color-mix(in oklab, var(--accent, #4a7a7e) 14%, transparent);
}
.nt-count { font-size: .82rem; opacity: .68; margin: .5rem 0 0; min-height: 1.1em; }

/* Карточка должна читаться за полсекунды: тема сверху, польза под ней,
   вес внизу. Всё остальное — шум. */
.nt-card-title { font-size: 1rem; line-height: 1.35; }
.nt-card-line { opacity: .78; }
[data-card][hidden] { display: none; }

/* Блок «чаще всего открывают». Появляется, только когда открытий
   набралось достаточно, чтобы порядок значил что-то кроме случайности. */
.nt-most { margin: 0 0 1.6rem; padding: 1rem 1.1rem;
  border: 1px solid var(--line-2, #d7d0c2); border-radius: 10px; }
.nt-most h2 { font: 600 .74rem/1 var(--f-t, inherit); text-transform: uppercase;
  letter-spacing: .1em; opacity: .62; margin: 0 0 .7rem; }
.nt-most ol { margin: 0; padding-left: 1.2rem; }
.nt-most li { margin-bottom: .5rem; }
.nt-most a { text-decoration: none; color: inherit; }
.nt-most b { display: block; font-size: .95rem; font-weight: 600; }
.nt-most span { display: block; font-size: .84rem; opacity: .72; line-height: 1.4; }
.nt-most a:hover b { text-decoration: underline; }

/* Пометка на карточке: только у тех, кого действительно открывают чаще. */
.nt-card-hot {
  display: inline-block; margin-left: .5rem; padding: .1rem .45rem;
  border-radius: 999px; font: 600 .62rem/1.5 var(--f-t, inherit);
  text-transform: uppercase; letter-spacing: .06em;
  background: color-mix(in oklab, var(--accent, #4a7a7e) 20%, transparent);
}
/* Карточка «проверь себя» ведёт из чтения в практику. */
.nt-next-quiz { border-color: var(--accent, #4a7a7e) !important; }

/* ── блоки кода ──────────────────────────────────────────────────────────
   Нужны ровно одной странице — /notes/for-ai/, где мы отдаём справочник
   машине и показываем, как сервер запускается. Отдельного файла для неё
   не заводим: новый файл пришлось бы вписывать руками в список версий
   stamp_sheets.py, а забытая там папка уже стоила нам четырёх часов
   раздачи старого js через Cloudflare.

   Команды и конфиг — это текст, который КОПИРУЮТ. Поэтому моноширинный
   шрифт, спокойный фон и горизонтальная прокрутка внутри блока: строка
   конфига длиннее экрана телефона не должна тащить вбок всю страницу. */

.nt-body pre {
  margin: 0 0 22px;
  padding: 14px 16px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.nt-body pre code {
  font: 400 13.5px/1.7 var(--f-m);
  color: var(--fg);
  background: none;
  padding: 0;
  white-space: pre;
}
.nt-body p code,
.nt-body li code,
.nt-body dt code {
  font: 400 .92em/1.4 var(--f-m);
  background: var(--panel-2);
  border: 1px solid var(--line-3);
  border-radius: 5px;
  padding: 1px 5px;
}

/* ── список «что есть» ──────────────────────────────────────────────── */

.nt-body dl { margin: 0 0 24px; }
.nt-body dt {
  font-weight: 650;
  margin: 18px 0 4px;
  font-family: var(--f-m);
  font-size: 15px;
  word-break: break-word;
}
.nt-body dt:first-child { margin-top: 0; }
.nt-body dd { margin: 0; color: var(--fg-2); }

/* Оговорка про данные пациентов. Она обязана читаться как предупреждение,
   а не как ещё один абзац: на ней стоит вся честность этой страницы. */
.nt-body .nt-careful {
  border-left: 3px solid var(--accent);
  background: var(--panel-2);
  padding: 14px 16px;
  border-radius: 0 10px 10px 0;
  font-size: 16px;
  line-height: 1.6;
  color: var(--fg-2);
  margin: 0 0 22px;
}

/* ── подписка ────────────────────────────────────────────────────────────
   Стоит в конце каталога и в конце указателя решений — там, где человек
   уже прочитал и решает, вернётся ли. Раньше форма была только на
   печатном листе: три захода в сутки против семнадцати у справочника.

   Обещание в блоке должно быть УЖЕ, чем «подпишись»: раз в месяц, что
   добавилось, отписка удаляет адрес. Иначе это просто ещё одна форма. */

.nt-sub {
  margin: 34px 0 0;
  padding: 20px 20px 18px;
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-radius: 12px;
}
.nt-sub h2 {
  font-family: var(--f-d);
  font-size: 19px;
  margin: 0 0 8px;
}
.nt-sub p { font-size: 15.5px; line-height: 1.6; color: var(--fg-2); margin: 0 0 12px; max-width: 58ch; }
.nt-sub-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; }
.nt-sub-form input {
  flex: 1 1 230px;
  min-width: 0;
  font: 400 16px/1.4 var(--f-t);
  padding: 13px 13px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel);
  color: var(--fg);
  -webkit-appearance: none;
}
.nt-sub-form input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.nt-sub-form button {
  font: 600 16px/1 var(--f-t);
  padding: 14px 20px;
  border: 0;
  border-radius: 9px;
  background: var(--fg);
  color: var(--panel);
  cursor: pointer;
}
.nt-sub-form button:hover { background: var(--accent-ink); }
.nt-sub-form button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.nt-sub-msg { font-size: 14.5px; margin: 0 0 6px; color: var(--fg-2); }
.nt-sub-msg.bad { color: var(--accent-ink); }
.nt-sub-fine { font-size: 13px; line-height: 1.55; color: var(--fg-3); margin: 0; max-width: 58ch; }

/* Номер и подсказка перехода на карточке каталога. */
.nt-card-n {
  align-self: center;
  justify-self: center;
  font: 400 15px/1 var(--f-m);
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}
.nt-card-go {
  font: 600 14px/1 var(--f-t);
  color: var(--accent-ink);
  white-space: nowrap;
}
@media (max-width: 560px) { .nt-card-go { display: none; } }

/* ── ЧТО ГОВОРЯТ НА СМЕНЕ ────────────────────────────────────────────────
   Третий сорт сведений, и оформление обязано это показывать. Решения и
   руководства идут сплошным текстом; здесь — реплики, поэтому карточки
   с кавычкой и приглушённее по тону. Читатель должен видеть разницу
   раньше, чем прочтёт предупреждение. */
.nt-voices { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 10px; }
.nt-voice {
  background: var(--panel-2);
  border: 1px solid var(--line-2);
  border-left: 3px solid var(--line);
  border-radius: 0 10px 10px 0;
  padding: 13px 16px;
}
.nt-voice p {
  margin: 0 0 9px; font-size: 15.5px; line-height: 1.55;
  color: var(--fg-2); max-width: 62ch;
}
.nt-voice p::before { content: "“"; color: var(--fg-3); margin-right: 2px; }
.nt-voice p::after { content: "”"; color: var(--fg-3); }
.nt-voice a { font-size: 14px; color: var(--link); }
.nt-voice span {
  font: 400 11px/1 var(--f-m); letter-spacing: .06em; text-transform: uppercase;
  color: var(--fg-3); margin-left: 8px;
}


/* ── ВОЗДУХ МЕЖДУ БЛОКАМИ ────────────────────────────────────────────────
   Правило простое и проверяемое: промежуток МЕЖДУ блоками должен быть
   заметно больше, чем промежутки ВНУТРИ блока. Иначе страница читается
   одной сплошной лентой, и человек, зашедший впервые, не видит
   структуры — именно это Женя назвал «всё очень сжато». */

.nt-cluster { margin-top: 56px; }
.nt-cluster:first-of-type { margin-top: 22px; }
.nt-cluster > h2 {
  font-family: var(--f-d);
  font-size: 15px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--fg-3);
  margin: 0 0 6px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line-2);
}
/* ПОДПИСЬ К РАЗДЕЛУ КОРОТКАЯ. Длинная съедала первый экран целиком —
   на телефоне до первой карточки было 911 пикселей, то есть человек
   видел только текст и ни одной статьи. */
.nt-cluster-note {
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--fg-3);
  margin: 0 0 12px;
  max-width: 34em;
}
.nt-find { margin: 18px 0 4px; }
.nt-chips { margin-top: 14px; margin-bottom: 8px; }

/* Текст на карточке: заголовок крупнее, подпись тише. Три строки одного
   веса читаются как список, а не как карточка. */
.nt-card-title { font-size: 17.5px; line-height: 1.35; }
.nt-card-line { font-size: 15.5px; line-height: 1.5; margin-top: 4px; }
.nt-card-meta { margin-top: 7px; opacity: .85; }

@media (max-width: 560px) {
  .nt-cluster { margin-top: 42px; }
  .nt-hero { padding: 14px 0 8px; }
  .nt-card { padding: 16px 14px 16px 0; }
}


/* ── ПОЛЕ ПОИСКА ДОЛЖНО ВЫГЛЯДЕТЬ ПОЛЕМ ──────────────────────────────────
   Оно есть и работает — 724×50, — но с прозрачным фоном и бледной рамкой
   на бежевом читается как строка текста: на снимке видна только
   подсказка «late entry · refusal…», а самого поля не видно. Человек не
   ищет там, где не видит поля. Фон плюс значок лупы решают это без
   единой новой сущности. */
.nt-find input[data-find-input] {
  background: var(--panel);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 rgba(26, 29, 31, .03);
  padding-left: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23606a66' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: 15px center;
}
.nt-find input[data-find-input]:focus-visible {
  border-color: var(--accent);
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

/* Пустота между чипами и первым разделом была в сто пикселей — глаз
   читает это как конец страницы. */
.nt-cluster:first-of-type { margin-top: 14px; }


/* ── ЧИПЫ НА ТЕЛЕФОНЕ ────────────────────────────────────────────────────
   На широком экране они переносятся в две строки и это правильно: видно
   все разделы сразу. На узком те же семь чипов дают ПЯТЬ строк и съедают
   треть первого экрана — до статей человек так и не доезжает.

   Поэтому на телефоне — одна строка с прокруткой. Но прокрутка обязана
   быть ВИДНА: невидимая — это просто обрезанный список, ровно то, что мы
   уже чинили на широком экране. Поэтому затухание у правого края,
   которое гаснет, когда список докручен до конца. */
@media (max-width: 560px) {
  .nt-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    padding-right: 26px;
    /* Затухание держится на фоне страницы и уезжает вместе с прокруткой. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .nt-chips::-webkit-scrollbar { display: none; }
  .nt-chip { scroll-snap-align: start; }
}