/* Каркас компоновки. Цвета, шрифты и геометрия берутся из токенов темы.
   Здесь не должно быть ни одного литерального цвета или шрифта. */

*{box-sizing:border-box}
/* Системе сообщаем, в какой мы схеме: от этого зависят полосы прокрутки,
   крестик очистки в поле поиска и прочие элементы, которые рисует сам
   браузер. Без этого в тёмной теме они остаются светлыми. */
:root{color-scheme:light}
:root[data-theme="dark"]{color-scheme:dark}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--font-body);font-size:var(--body-size,16px);line-height:var(--body-lh,1.62);
  -webkit-font-smoothing:antialiased;
}
.mono{font-family:var(--font-ui,var(--font-body));font-size:11.5px;letter-spacing:.09em;
      text-transform:uppercase;color:var(--ink-3);font-weight:500}

/* шапка */
/* Шапка и шкала перекрывают список полностью: полупрозрачный фон с размытием
   пропускал текст строк, и он просвечивал между поиском и вкладками. */
.top{position:sticky;top:0;z-index:30;background:var(--bg-sticky,var(--bg));
     backdrop-filter:var(--sticky-blur,none);border-bottom:var(--border-w,1px) solid var(--line)}
.top-in{max-width:var(--shell,1180px);margin:0 auto;padding:12px 22px;display:flex;gap:16px;
        align-items:center;flex-wrap:wrap}
.brand{font-family:var(--font-display);font-weight:var(--brand-weight,600);font-size:17px;
       letter-spacing:var(--brand-tracking,-.01em);white-space:nowrap}
.search{flex:1;min-width:220px;position:relative}
.search input{width:100%;background:var(--paper);border:var(--border-w,1px) solid var(--line);
  border-radius:var(--radius-ctl,8px);color:var(--ink);padding:10px 14px 10px 38px;
  font-family:inherit;font-size:15px;outline:none}
.search .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-3);
            pointer-events:none;display:flex}
.switches{display:flex;gap:8px;margin-left:auto}
.sw{display:inline-flex;align-items:center;gap:7px;border:var(--border-w,1px) solid var(--line);
    background:var(--paper);border-radius:var(--radius-pill,999px);padding:7px 13px;cursor:pointer;
    font-size:12.5px;color:var(--ink-2);font-family:inherit}
.sw[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent,#fff)}
.sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.dot{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}
.sw[aria-pressed="true"] .dot{opacity:1}

.wrap{max-width:var(--shell,1180px);margin:0 auto;padding:22px 22px 70px;position:relative}
@media (min-width:1500px){ .wrap,.top-in{max-width:var(--shell-wide,1320px)} }
.screen[hidden]{display:none!important}

/* список */
.cols{display:grid;grid-template-columns:var(--aside-w,220px) 1fr;gap:26px;align-items:start}
aside{position:sticky;top:74px}
.facet{border:0;border-top:var(--border-w,1px) solid var(--line);background:none;margin-bottom:18px}
.facet h3{margin:0;padding:10px 4px 6px;font-size:11px;letter-spacing:.09em;text-transform:uppercase;
          color:var(--ink-3);font-weight:600;font-family:var(--font-ui,var(--font-body))}
.facet ul{list-style:none;margin:0;padding:0}
.facet button{width:100%;text-align:left;background:none;border:0;color:var(--ink-2);padding:7px 9px;
  border-radius:var(--radius-ctl,6px);font-family:inherit;font-size:13.5px;cursor:pointer;
  display:flex;gap:8px;align-items:baseline}
.facet button:hover{background:var(--surface);color:var(--ink)}
.facet button[aria-pressed="true"]{background:var(--accent-soft);color:var(--ink);
  box-shadow:inset 2px 0 0 var(--line-strong)}
.facet .n{margin-left:auto;font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.reset[hidden]{display:none}
.reset{width:100%;background:none;border:0;border-top:var(--border-w,1px) solid var(--line);
  color:var(--ink-2);padding:10px 4px;font-family:inherit;text-align:left;
  font-size:12.5px;cursor:pointer}
.reset:hover{color:var(--ink)}

.listhead{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.listhead h1{font-family:var(--font-display);font-size:var(--listhead-size,22px);margin:0;
             font-weight:var(--h-weight,600);letter-spacing:-.015em}
.count{margin-left:auto;font-size:13px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.count b{color:var(--ink);font-weight:600}

/* Список — типографский, а не набор карточек: плашки и тени съедали плотность,
   на экран влезало четыре записи из шестидесяти. Тема может вернуть плашку
   через --row-bg и --row-radius, но по умолчанию строки разделяет одна линия.
   Номер живёт в собственной колонке: пока он стоял в одной строке с заголовком,
   у строки было три разных левых края и она визуально дрожала. */
.rows{display:flex;flex-direction:column;gap:var(--row-gap,0)}
.row{border:0;border-bottom:var(--border-w,1px) solid var(--line);background:var(--row-bg,transparent);
     border-radius:var(--row-radius,0);padding:var(--row-pad,12px 6px);cursor:pointer;text-align:left;
     font:inherit;color:inherit;width:100%;
     display:grid;grid-template-columns:var(--num-col,52px) 1fr;column-gap:var(--num-gap,14px);align-items:start}
.row:last-child{border-bottom:0}
.row:hover{background:var(--row-bg-hover,var(--surface))}
.row .rbody{min-width:0}
.row:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.row .rh{display:flex;gap:10px;align-items:baseline}
.row .num{font-size:var(--num-size,17px);color:var(--num-color,var(--ink-3));
          font-variant-numeric:tabular-nums;font-family:var(--font-ui,var(--font-body));
          line-height:1.3;padding-top:var(--num-shift,1px)}
.row h2{margin:0;font-family:var(--font-display);font-size:16.5px;font-weight:var(--h-weight,600);
        letter-spacing:-.01em}
/* первая строка — сама реплика: её произносят вслух, она и есть предмет.
   Название приёма под ней — подпись, а не заголовок. */
.row .said{font-family:var(--font-quote,var(--font-display));font-size:var(--row-quote-size,17.5px);
           line-height:1.36;color:var(--ink);margin:0;letter-spacing:-.008em}
.row .row-name{font-family:var(--font-body);font-size:13.5px;font-weight:500;color:var(--ink-3);
               letter-spacing:0;margin:5px 0 0}
.row.no-quote .row-name{font-family:var(--font-display);font-size:var(--row-quote-size,17.5px);
                        font-weight:var(--h-weight,600);color:var(--ink);letter-spacing:-.008em;margin:0}
.row.no-quote .meta-line::after{content:" · дословной формулировки нет";color:var(--ink-3)}
.row .rh .team{margin-left:auto;font-size:11px;color:var(--ink-3);white-space:nowrap;
               font-family:var(--font-ui,var(--font-body))}
.row .said{text-wrap:pretty}
/* подпись под вопросом, а не чип у правого края: взгляд не уходит к краю и обратно */
/* подпись читается бегло, поэтому берёт вторичный цвет, а не третичный:
   на пределе контраста она превращалась в шум */
.row .meta-line{margin:4px 0 0;font-size:12.5px;color:var(--ink-2);font-family:var(--font-body)}
.row .meta-line .team{color:var(--ink-2)}
.row mark{background:var(--accent-soft);color:var(--ink);border-radius:3px;padding:0 2px}

.empty{border:1px dashed var(--line-strong);border-radius:var(--radius-card,10px);padding:26px;
       text-align:center;color:var(--ink-2);background:var(--paper)}
.empty b{display:block;color:var(--ink);margin-bottom:4px;font-family:var(--font-display)}

/* страница приёма */
.back{display:inline-flex;align-items:center;gap:7px;background:none;border:0;color:var(--ink-2);
      cursor:pointer;font:inherit;font-size:14px;padding:6px 10px 6px 0}
.back:hover{color:var(--accent)}
.back:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px}
/* на широком экране колонка прижималась влево, справа висело полэкрана пустоты —
   не воздух, а неотрисованный столбец; центрируем */
#screen-item{max-width:var(--measure-item,880px);margin-inline:auto}
.item{max-width:var(--measure,760px)}
/* В режиме «ход встречи» правая половина экрана пустовала, а лента переходов
   жалась внизу тремя узкими колонками. Теперь она стоит полем справа от текста,
   как примечания на полях книги, и обе страницы садятся на одну сетку. */
/* развороту с полем нужна своя ширина: иначе колонка текста ужимается вдвое */
#screen-item:has(.item-flow){max-width:var(--item-flow-max,1120px)}
.item-flow{max-width:none;display:grid;grid-template-columns:minmax(0,1fr) var(--aside-right,300px);
           column-gap:56px;align-items:start}
.item-flow .item-main{max-width:var(--measure,720px)}
.item-flow .item-main{min-width:0}
/* лента переходов — поле справа; начинается вровень с текстом, без линии над пустотой */
.item-flow .flow-near{grid-column:2;display:block;position:sticky;top:132px;margin:0;
                      padding-top:2px;border-top:0}
.item-flow .flow-near .fn + .fn{margin-top:20px}
@media (max-width:1180px){
  .item-flow{grid-template-columns:minmax(0,1fr)}
  .item-flow .flow-near{grid-column:1;position:static;margin-top:30px;
                        display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
}
.item .kicker{display:block;margin:14px 0 14px}
.item h1{text-indent:-.42em;font-family:var(--font-display);font-size:var(--h1-size,clamp(26px,3.6vw,38px));
         line-height:1.18;margin:0 0 18px;font-weight:var(--h-weight,600);
         letter-spacing:var(--h1-tracking,-.02em);text-wrap:balance}
.item .item-name{margin:-6px 0 22px;font-size:14.5px;color:var(--ink-3);font-family:var(--font-body)}
.item .item-name.empty{color:var(--ink-3);font-size:13px}
.item .item-name.empty::before{content:"—  ";opacity:.6}
.item .said{font-family:var(--font-quote,var(--font-display));
            font-size:var(--quote-size,clamp(21px,2.6vw,27px));line-height:var(--quote-lh,1.34);
            margin:0 0 22px;color:var(--ink);font-weight:var(--quote-weight,500);
            letter-spacing:var(--quote-tracking,0)}
.item .said .mark{background:var(--quote-mark,linear-gradient(transparent 66%, var(--accent-soft) 66%))}
.explain-dl{display:grid;grid-template-columns:116px 1fr;gap:14px 24px;margin:0 0 22px;font-size:17px;line-height:1.5}
.explain-dl dt{font-family:var(--font-body);font-size:13.5px;letter-spacing:0;
               text-transform:none;color:var(--ink-2);font-weight:500}
.explain-dl dt{margin:0}
.explain-dl dd{margin:0}
.explain-dl dd.q{color:var(--ink-2)}
/* Цитата из дневника — доказательство, что приём применялся. Раньше она была
   врезкой с цветной полосой (шаблон любой документации) и стояла после служебных
   полей. Теперь это настоящая цитата: держится кеглем и кавычками, а не коробкой. */
.diary{margin:0 0 24px;padding:var(--diary-pad,0)}
.diary blockquote{margin:0;font-family:var(--font-quote,var(--font-display));
                  font-size:var(--diary-size,19px);line-height:1.45;color:var(--ink);
                  text-indent:-.42em}
.diary blockquote::before{content:"«"}
.diary blockquote::after{content:"»"}
.diary figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-3);font-family:var(--font-body)}
.near{margin-top:34px;padding-top:18px;border-top:var(--border-w,1px) solid var(--line)}
.near h2{font-family:var(--font-display);font-size:18px;margin:0 0 12px;font-weight:var(--h-weight,600)}
/* соседние приёмы не должны перевешивать саму запись: реплика в них — обычный текст,
   а не второй герой страницы */
.item .near .row h2{font-size:15.5px}
.item .near .row .said{font-family:var(--font-body);font-size:14.5px;font-weight:400;
                       line-height:1.5;color:var(--ink-2);letter-spacing:0}

footer{max-width:var(--shell,1180px);margin:0 auto;padding:0 22px 40px;color:var(--ink-3);
       font-size:12.5px;display:flex;gap:20px;flex-wrap:wrap}
footer a{color:var(--accent)}

/* грид-колонка по умолчанию не уже своего содержимого: липкая шкала стадий
   с восемью кнопками растягивала колонку шире экрана на телефоне */
.cols > aside, .cols > main{min-width:0}
.stage-rail{min-width:0;max-width:100%}
/* ── Телефон ───────────────────────────────────────────────────────────────
   На узком экране фильтры съедали первый экран: до первого приёма приходилось
   прокручивать полстраницы. Прячем их за кнопку, содержание идёт сразу. */
.filters-toggle{display:none}
@media (max-width:860px){
  .cols{grid-template-columns:minmax(0,1fr)}
  aside{position:static;order:2}
  .cols > main{order:1}
  .switches{margin-left:auto}
  .explain-dl{grid-template-columns:1fr;gap:4px 0}
  .explain-dl dt{margin-top:10px}

  .filters-toggle{display:inline-flex;align-items:center;gap:6px;background:none;
                  border:var(--border-w,1px) solid var(--line);border-radius:var(--radius-ctl,4px);
                  padding:6px 11px;font-family:var(--font-body);font-size:12.5px;color:var(--ink-2);
                  cursor:pointer}
  .filters-toggle[aria-expanded="true"]{background:var(--surface);color:var(--ink)}
  .cols:not(.filters-open) > aside{display:none}

  .top-in{padding:8px 16px;gap:8px 10px}
  .brand{font-size:15px}
  .search{order:3;flex-basis:100%;min-width:0}
  .wrap{padding:14px 16px 60px}
  .listhead{flex-wrap:wrap;gap:8px}
  .listhead h1{width:100%;font-size:15px}
  .view-switch{margin-left:0}
  .stage-rail{padding-top:6px;margin-top:0}
  .stage-rail button{padding:7px 11px 8px;font-size:12.5px}
  .row{padding:11px 2px}
  .rows.view-cards{grid-template-columns:1fr}
  .item h1{font-size:clamp(24px,7vw,30px)}
  .item-flow .flow-near{margin-top:26px}
}

/* ── Режим «ход встречи» (window.LIST_MODE = 'flow') ─────────────────────────
   Стадии перестают быть фильтром и становятся порядком: шкала сверху, заголовки
   стадий внутри списка, на странице приёма — что было до и что будет после. */
/* Классические вкладки: активная стоит на линии раздела и «съедает» её собой,
   как закладка в картотеке. Раньше активная была просто подчёркнута, и это
   подчёркивание спорило с линией под всей шкалой — две линии об одном. */
/* Линия раздела — не рамка шкалы, а её фон. Рамку контейнер рисует поверх всего,
   и перекрыть её изнутри нельзя: на телефоне шкала прокручивается вбок, а боковая
   прокрутка обрезает всё, что вылезает за край, — вместе с перекрытием активной
   вкладки. Линия под вкладкой возвращалась дважды именно поэтому. Фон же лежит
   ПОД детьми, и активная вкладка закрывает его собой в любом режиме. */
.stage-rail{position:sticky;top:var(--rail-top,58px);z-index:20;display:flex;gap:0;margin:0 0 18px;
            --rail-line:color-mix(in srgb, var(--ink) 26%, transparent);
            background-color:var(--bg);
            /* Линия не у самого низа, а на пиксель выше: если её нижний край
               совпадает с нижним краем вкладки, браузер округляет два края
               по-разному и под вкладкой остаётся бледный след. Разводим их. */
            background-image:linear-gradient(to top,
                             transparent 0 1px,
                             var(--rail-line) 1px calc(1px + var(--border-w,1px)),
                             transparent calc(1px + var(--border-w,1px)));
            background-repeat:no-repeat;
            padding:10px 0 calc(1px + var(--border-w,1px));
            overflow:visible}
/* Прокрутка нужна только на узком экране. На широком она обрезала перекрытие,
   которым активная вкладка разрывает линию, — и низ вкладки оставался линией. */
@media (max-width:900px){
  .stage-rail{overflow-x:auto;scrollbar-width:none}
  .stage-rail::-webkit-scrollbar{display:none}
}
.stage-rail button{flex:0 0 auto;display:flex;align-items:baseline;gap:7px;background:none;
                   border:var(--border-w,1px) solid transparent;border-bottom:0;
                   margin-bottom:calc(-1px - var(--border-w,1px));padding:8px 14px 9px;cursor:pointer;
                   font-family:var(--font-body);font-size:13px;color:var(--ink-2);
                   white-space:nowrap;transition:background var(--t-fast) var(--ease-out),color var(--t-fast) var(--ease-out)}
.stage-rail button:hover:not(:disabled){color:var(--ink);background:var(--surface)}
.stage-rail button.on{color:var(--ink);background:var(--bg);font-weight:600;
                      border-color:color-mix(in srgb, var(--ink) 26%, transparent);
                      border-bottom:0;position:relative}
/* Низ активной вкладки — пустота, а не линия: вкладка своим фоном закрывает
   линию шкалы и открывается в содержимое, как закладка в картотеке. Отдельная
   накладка для этого больше не нужна — линия теперь лежит под вкладкой. */
.stage-rail button.on .rn{color:var(--accent)}
.stage-rail button:disabled{opacity:.38;cursor:default}
.stage-rail button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.stage-rail .rn{font-variant-numeric:tabular-nums;color:var(--ink-3)}
.stage-rail .rc{font-variant-numeric:tabular-nums;color:var(--ink-2);font-size:13px}

/* Заголовок стадии — ярлык структуры, а не заголовок содержания. Поэтому он
   противоположен названию приёма по всем признакам: прописные с разрядкой против
   строчных, узкий кегль против крупного, акцентный цвет против чернил, линия во всю
   ширину против её отсутствия. Спутать их теперь нельзя даже боковым зрением. */
.stage-h{display:grid;grid-template-columns:var(--num-col,52px) 1fr auto;column-gap:var(--num-gap,14px);
         align-items:baseline;padding:40px 6px 12px;border-bottom:0;border-top:0;
         margin-top:0;scroll-margin-top:118px}
/* первый раздел начинается сразу под шкалой: его линия читалась как подчёркивание
   активной вкладки — раздел здесь и так открыт вкладками, линия лишняя */
/* Раздел отбивается воздухом, а не линией: линию перед заголовком уже рисует
   последняя строка предыдущей стадии, и две линии подряд читались как ошибка. */
.stage-h:first-child{padding-top:14px}
.stage-h .stage-n{font-family:var(--font-ui,var(--font-body));font-size:12px;color:var(--accent);
                  font-variant-numeric:tabular-nums;font-weight:600}
.stage-h .stage-t{font-family:var(--font-ui,var(--font-body));font-size:12.5px;font-weight:600;
                  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.stage-h .stage-t::first-letter{text-transform:uppercase}
.stage-h .stage-c{font-family:var(--font-ui,var(--font-body));font-size:12px;color:var(--ink-3);
                  font-variant-numeric:tabular-nums;letter-spacing:.04em}

.flow-near{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:22px}
.flow-near .fn h2{font-size:14px;font-family:var(--font-body);font-weight:500;
                  color:var(--ink-3);margin:0 0 6px}
.flow-near .fn h2::first-letter{text-transform:uppercase}
.flow-near .row{padding:8px 4px}
.item .flow-near .row h2{font-size:14.5px}

/* прежнее правило с жёстким числом убрано: высоту шапки считает JS
   и кладёт в --rail-top, иначе между шапкой и шкалой оставался зазор */


/* Служебные тумблеры лаборатории (движение, объяснение) и подпись варианта —
   не часть продукта. Прячем за неприметной кнопкой: в лаборатории они нужны,
   в интерфейсе мешают и читаются как отладочная панель. */
.switches{position:relative}
.switches.lab-collapsed #sw-motion,
.switches.lab-collapsed #sw-explain{display:none}
.lab-toggle{background:none;border:0;color:var(--ink-3);cursor:pointer;font-family:var(--font-body);
            font-size:12px;padding:7px 8px;border-radius:var(--radius-ctl,6px)}
.lab-toggle:hover{color:var(--ink-2)}
.lab-toggle:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
footer .mono{color:var(--ink-3);opacity:.65}


/* Координата встречи — сильнейшая связь в базе: эти приёмы прозвучали
   на одном разговоре. Помечаем её акцентом, остальные блоки ленты — тише. */
.flow-near .fn-session h2{color:var(--accent)}
.flow-near .fn-session{padding-bottom:16px;border-bottom:var(--border-w,1px) solid var(--line)}
.diary figcaption{font-variant-numeric:tabular-nums}

/* ── Режимы листинга ─────────────────────────────────────────────────────────
   Одна разметка, три способа читать. Переключаются классом на .rows, поэтому
   данные, движение и логика остаются общими — меняется только подача. */

/* 1. Таблица (по умолчанию): максимум строк на экран, взгляд идёт по колонкам.
      Для работы во время встречи, когда нужно быстро найти знакомое. */
.rows.view-table .row{grid-template-columns:var(--num-col,52px) minmax(0,1fr) 170px;
                      column-gap:var(--num-gap,14px);align-items:baseline;padding:9px 6px}
.rows.view-table .rbody{display:contents}
.rows.view-table .said,
.rows.view-table .row-name{grid-column:2;font-size:15px;line-height:1.35;margin:0;
                           overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows.view-table .row-name{font-family:var(--font-body);color:var(--ink-3);font-size:13px;display:none}
.rows.view-table .row.no-quote .row-name{display:block;font-family:var(--font-display);
                                         color:var(--ink);font-size:15px}
.rows.view-table .meta-line{grid-column:3;grid-row:1;margin:0;text-align:right;font-size:12.5px;
                            white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rows.view-table .stage-h{padding:22px 6px 6px}
/* в таблице колонка узкая: пояснение про отсутствие формулировки обрезалось
   многоточием и превращалось в мусор — там достаточно команды и сессии */
.rows.view-table .row.no-quote .meta-line::after{content:""}
.rows.view-table .meta-line{color:var(--ink-3)}

/* Стадия и «когда применять» живут в строке всегда, но показываются только там,
   где помогают: в колоде карточка должна читаться сама по себе, без списка вокруг. */
.row-stage,.row-when{display:none}
.row-stage i{font-style:normal;font-variant-numeric:tabular-nums;color:var(--accent);
             font-weight:600;margin-right:6px}
.meta-line .conf{margin-left:5px;color:var(--ink-3)}
.meta-line .unconfirmed{color:var(--ink-3)}

/* 2. Колода: карточки-шпаргалки, крупная реплика, минимум служебного.
      Для взгляда перед встречей и для чтения с расстояния. */
.rows.view-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:14px}
.rows.view-cards .row{grid-template-columns:1fr;border:var(--border-w,1px) solid var(--line);
                      border-radius:var(--radius-card,2px);padding:16px 18px;background:var(--paper);
                      min-height:132px;align-content:start}
.rows.view-cards .row:hover{background:var(--paper-hover,var(--paper));border-color:var(--line-strong)}
.rows.view-cards .row{display:flex;flex-direction:column;position:relative;padding-top:38px}
/* каталожный номер крупно и бледно в углу — карточка узнаётся по нему издалека */
.rows.view-cards .num{position:absolute;top:12px;right:16px;font-size:20px;color:var(--line-strong);
                      padding:0;line-height:1}
.rows.view-cards .rbody{display:flex;flex-direction:column;flex:1;gap:0}
.rows.view-cards .row-stage{display:block;position:absolute;top:14px;left:18px;font-size:11px;
                            letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
                            font-family:var(--font-ui,var(--font-body));max-width:60%;
                            overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rows.view-cards .said,
.rows.view-cards .row.no-quote .row-name{font-size:18px;line-height:1.3;margin:0}
.rows.view-cards .row-name{font-size:12.5px;margin-top:8px}
/* строка «когда применять» превращает карточку в шпаргалку: видно не только что
   сказать, но и в какой момент */
.rows.view-cards .row-when{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
                           overflow:hidden;margin:10px 0 0;font-size:13.5px;line-height:1.45;
                           color:var(--ink-2)}
.rows.view-cards .meta-line{margin-top:auto;padding-top:12px;font-size:12px;
                            border-top:var(--border-w,1px) solid var(--line)}
.rows.view-cards .row.no-quote .meta-line::after{content:""}
.rows.view-cards .stage-h{grid-column:1/-1;margin-top:26px}

/* переключатель вида */
.view-switch{display:flex;gap:2px;margin-left:auto}
.view-switch button{background:none;border:0;padding:5px 10px;border-radius:var(--radius-ctl,4px);
                    cursor:pointer;font-family:var(--font-body);font-size:12.5px;color:var(--ink-3)}
.view-switch button:hover{color:var(--ink)}
/* активное состояние показываем поверхностью и рамкой, как у вкладок стадий:
   подчёркивание убрано везде, чтобы в интерфейсе был один способ сказать «выбрано» */
.view-switch button[aria-pressed="true"]{color:var(--ink);background:var(--surface);font-weight:600;
                                         box-shadow:inset 0 0 0 1px var(--line)}
.view-switch button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
@media (max-width:640px){ .rows.view-table .meta-line{display:none} }


/* Шапка таблицы: колонки, по которым имеет смысл сортировать. Видна только
   в табличном виде, в ленте и колоде сортировка не нужна — там другой сценарий. */
.table-head{display:none}
.rows.view-table + .table-head,
.table-head.on{display:grid}
.table-head{grid-template-columns:var(--num-col,52px) minmax(0,1fr) 170px;column-gap:var(--num-gap,14px);
            padding:0 6px 8px;border-bottom:var(--border-w,1px) solid var(--line-strong);margin-bottom:6px}
.table-head button{background:none;border:0;padding:4px 0;cursor:pointer;text-align:left;
                   font-family:var(--font-ui,var(--font-body));font-size:11px;letter-spacing:.09em;
                   text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:5px}
.table-head button:last-child{justify-content:flex-end}
.table-head button:hover{color:var(--ink-2)}
.table-head button[aria-sort]:not([aria-sort="none"]){color:var(--accent)}
.table-head .dir{font-size:11px}
.table-head button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Узкий экран: мобильные правила идут последними намеренно — они должны
   переопределять описанные выше виды листинга. */
@media (max-width:560px){
  .stage-rail .rc{display:none}
  .table-head{grid-template-columns:var(--num-col,44px) 1fr}
  .table-head button:last-child{display:none}
  .rows.view-table .row{grid-template-columns:var(--num-col,44px) minmax(0,1fr)}
  .rows.view-table .said,.rows.view-table .row-name{white-space:normal;font-size:15px}
  .rows.view-table .rbody{display:block}
  .rows.view-table .meta-line{display:block;text-align:left;margin-top:4px;font-size:11.5px}
}


/* Выход в разбор связей со страницы приёма. Ярлык, а не кнопка: это боковая
   дверь для тех, кому интересно «а с чем он ходит парой», а не основной путь. */
.to-topology{margin:18px 0 0}
.to-topology a{font-family:var(--font-ui,var(--font-body));font-size:11px;
               letter-spacing:.07em;text-transform:uppercase;color:var(--accent);
               position:relative;display:inline-block;padding:2px 0}
.to-topology a:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ── Сенсорный экран: зона нажатия ─────────────────────────────────────────
   Правило Эппла 44×44 pt — про область, в которую попадает палец, а не про
   размер рисунка. Поэтому вид элементов не трогаем: недостающее добираем
   невидимым слоем. Слой абсолютный, значит из потока выпадает и вёрстку
   никуда не сдвигает. Блок в конце файла намеренно — он должен перебивать
   отступы, заданные выше. */
/* Условие: сенсорный экран ИЛИ узкое окно. Одного «сенсорный» мало — на
   настольном браузере его не проверить, и правило молча не работало бы. */
@media (pointer:coarse), (max-width:860px){
  .stage-rail button, .view-switch button, .table-head button,
  .sw, .lab-toggle, .filters-toggle, .back, .reset, footer a{position:relative}
  .stage-rail button::before, .view-switch button::before, .table-head button::before,
  .sw::before, .lab-toggle::before, .filters-toggle::before, .back::before,
  .reset::before, footer a::before{
    content:"";position:absolute;left:0;right:0;top:50%;transform:translateY(-50%);
    height:44px;min-width:44px}
  /* Шапку таблицы растим только вверх: вниз она заехала бы на первую строку
     списка и воровала бы у неё нажатия. Вверху над ней липкая шкала стадий,
     которая рисуется выше и своё забирает сама. */
  .table-head button::before{top:auto;bottom:0;transform:none}
  /* Поле ввода невидимым слоем не увеличить — палец должен попадать в само
     поле. Растим по-настоящему. Размер текста ровно 16px: Safari приближает
     страницу на любом поле с меньшим текстом и обратно её не отдаляет. */
  .search input{min-height:44px;font-size:16px}
}

/* ── Вырез камеры и скруглённые углы ───────────────────────────────────────
   С viewport-fit=cover страница занимает экран целиком, и в альбомной
   ориентации текст упёрся бы в «уши» камеры. Отступ берём больший из двух:
   наш обычный или тот, что требует железо. */
@supports (padding:max(0px)){
  .top-in, .wrap, footer{
    padding-left:max(var(--gutter,22px), env(safe-area-inset-left));
    padding-right:max(var(--gutter,22px), env(safe-area-inset-right))}
  footer{padding-bottom:max(40px, env(safe-area-inset-bottom))}
  @media (max-width:860px){ .top-in, .wrap, footer{--gutter:16px} }
}

/* ── «Сработало, если» ─────────────────────────────────────────────────────
   Единственное поле коллекции, у которого нет источника на досках: его
   написали руками. Поэтому оно стоит врезкой и прямо говорит о своём
   происхождении — иначе читатель примет его за такую же выписку из
   дневника, как всё остальное, и база потеряет то, ради чего сделана. */
.sign{margin:22px 0 0;padding:16px 18px;background:var(--surface);
      border-left:2px solid var(--accent);border-radius:var(--radius-card,2px)}
.sign h3{margin:0 0 6px;font-size:11px;color:var(--ink-2)}
.sign p{margin:0;font-size:15.5px;line-height:1.5;color:var(--ink)}
.sign .sign-src{margin-top:8px;font-size:12px;color:var(--ink-3);
                font-family:var(--font-body)}
@media (max-width:860px){ .sign{padding:14px 15px;margin-top:18px} }