/* qa-tools — стили главной страницы (поиск, категории, сетка карточек) */

/* ==========================================================================
   8. ПОИСК
   ========================================================================== */
/* Колонка, а не блок: на узком экране порядок меняется через order, а
   разметка остаётся прежней — поисковикам важен порядок в DOM, человеку
   на телефоне важно увидеть поиск, а не пять экранов прозы. */
/* design-bold: шапка каталога короче — 24px сверху, 32 снизу вместо
   32/56. Главная — рабочий стол: первая карточка должна быть видна без
   прокрутки на ноутбуке. */
.searchzone{flex:0 0 auto;display:flex;flex-direction:column;
  padding:var(--space-8) var(--gutter-page) var(--space-9);
  width:100%;max-width:var(--maxw-content);margin:0 auto}
/* Заголовок и вводный абзац шапки заданы в seo.css: он подключается
   последним и перебивает всё, что задано здесь. Держать их в двух местах
   — верный способ потратить полчаса на «правка не применяется». */

/* Поле поиска — единственный вход в каталог из 25 инструментов, и до сих
   пор оно выглядело как обычная серая коробка среди серых коробок.
   Освободившийся акцент (точки убраны из секций категорий) отдан ему:
   рамка цветная уже в покое. Свечения нет ни в покое, ни в фокусе —
   у эталона цветная рамка И ЕСТЬ индикатор фокуса, а glow поверх неё
   ничего не добавляет (design/refs/supabase.md, «поле ввода»). */
.search{position:relative;display:flex;align-items:center;gap:var(--space-5);
  height:58px;padding:0 var(--space-7);border-radius:var(--radius-card);
  background:var(--surface-input);border:1px solid var(--border-accent);
  box-shadow:var(--shadow-1);
  transition:border-color var(--dur-base) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard),
             background-color var(--dur-theme) var(--ease-theme)}
.search:focus-within{border-color:var(--accent);
  box-shadow:var(--shadow-1),0 0 0 3px var(--accent-quiet)}
.search__prompt{flex:0 0 auto;font:var(--fw-bold) var(--text-title-2)/1 var(--font-mono);
  color:var(--accent);user-select:none}
.search__input{flex:1;min-width:0;background:none;border:0;outline:0;
  color:var(--text-heading);font:var(--fw-medium) var(--text-search)/1 var(--font-mono);
  letter-spacing:-.01em;padding:0}
.search__input::placeholder{color:var(--text-ghost)}
/* Счётчик и шорткат раньше стояли вплотную и читались как «28⌘K».
   Теперь счётчик подписан словом, отделён линией и виден только при поиске. */
.search__count{flex:0 0 auto;display:none;align-items:center;gap:var(--space-4);
  padding-right:var(--space-6);border-right:1px solid var(--border-hairline);
  font:var(--fw-medium) var(--text-body-sm)/1 var(--font-ui);color:var(--text-faint);
  white-space:nowrap}
.search.is-searching .search__count{display:inline-flex}
.search__count b{font:var(--fw-semibold) var(--text-body-sm)/1 var(--font-mono);
  color:var(--accent-text)}
/* Подсказка-клавиша: «/» работает одинаково на всех системах
   и совпадает со слешем-промптом слева в этом же поле. */
.search__kbd{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
  min-width:26px;height:26px;padding:0 var(--space-4);border-radius:var(--radius-md);
  background:var(--surface-hover);border:1px solid var(--border-subtle);
  color:var(--text-faint);font:var(--fw-semibold) var(--text-body-sm)/1 var(--font-mono);
  white-space:nowrap}
.search:focus-within .search__kbd{opacity:0;pointer-events:none;
  transition:opacity var(--dur-fast) var(--ease-standard)}

/* ==========================================================================
   9. МАКЕТ
   ========================================================================== */
.layout{display:grid;grid-template-columns:var(--sidebar-w) 1fr;gap:var(--space-10);
  width:100%;max-width:var(--maxw-content);margin:0 auto;
  padding:0 var(--gutter-page) var(--space-12);align-items:start;
  flex:1 0 auto}

/* ==========================================================================
   10. КАТЕГОРИИ — со скользящей подсветкой
   ========================================================================== */
.rail{position:sticky;top:88px}
.rail__label{margin:0 0 var(--space-5);padding-left:var(--space-5);
  font:var(--fw-semibold) var(--text-micro)/1 var(--font-ui);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-ghost)}
.rail__list{position:relative;display:flex;flex-direction:column;gap:var(--space-1)}

.rail__marker{position:absolute;left:0;width:100%;height:0;z-index:0;pointer-events:none;
  border-radius:var(--radius-md);opacity:0;
  background:var(--marker-fill);border:1px solid var(--marker-border);
  box-shadow:var(--glow-marker);
  transition:transform .5s var(--ease-spring),height .5s var(--ease-spring),
             opacity var(--dur-base) var(--ease-standard),
             background var(--dur-theme) var(--ease-theme),
             border-color var(--dur-theme) var(--ease-theme),
             box-shadow var(--dur-theme) var(--ease-theme)}
.rail__marker.is-ready{opacity:1}
.rail__marker::after{content:"";position:absolute;top:0;left:12%;width:76%;height:1px;
  background:linear-gradient(90deg,transparent,var(--marker-topline),transparent)}

.cat{position:relative;z-index:1;display:flex;align-items:center;gap:var(--space-5);
  width:100%;padding:var(--space-4) var(--space-5);border:0;border-radius:var(--radius-md);
  background:none;cursor:pointer;text-align:left;color:var(--text-muted);
  font:var(--fw-medium) var(--text-body-sm)/1.2 var(--font-ui);
  -webkit-tap-highlight-color:transparent;
  transition:color var(--dur-base) var(--ease-standard)}
.cat:hover{color:var(--text-heading)}
.cat:active .cat__dot{transform:scale(.9)}
.cat[aria-pressed="true"]{color:var(--text-heading);font-weight:var(--fw-semibold)}
.cat__dot{flex:0 0 auto;width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--dot);color:var(--dot);
  transition:box-shadow var(--dur-base) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard)}
.cat[aria-pressed="true"] .cat__dot{box-shadow:var(--glow-dot);transform:scale(1.2)}
.cat__n{margin-left:auto;font:var(--fw-medium) var(--text-micro)/1 var(--font-mono);
  color:var(--text-ghost)}

/* ==========================================================================
   11. СЕТКА ИНСТРУМЕНТОВ
   ========================================================================== */
.results{min-width:0}
/* Зазор между группами 56px: планка (design/bar.md) просит не меньше 64,
   владелец просил вдвое меньше прежних 80, сошлись на «хотя бы 60» —
   ближайший токен 56. В шкале нет 60, а число мимо токенов не пишем. */
/* design-bold: 40px между секциями вместо 56 — секции и так разделены
   заголовком с линией, лишний воздух только отодвигал инструменты. */
.group{margin-bottom:var(--space-10)}
.group:last-child{margin-bottom:0}
.group__head{display:flex;align-items:baseline;gap:var(--space-5);margin-bottom:var(--space-5)}
.group__title{margin:0;font:var(--fw-semibold) var(--text-title-3)/1.2 var(--font-display);
  letter-spacing:var(--ls-title);color:var(--text-heading)}
.group__rule{flex:1;height:1px;background:var(--border-hairline)}
/* Пиктограммы категорий: спрайт лежит в index.html, штрих — currentColor,
   точка — --dot категории. align-self, потому что заголовок группы
   выровнен по базовой линии, а у svg её нет. */
.group__pic{width:18px;height:18px;flex:0 0 auto;align-self:center;color:var(--text-muted)}
.group__n{font:var(--fw-medium) var(--text-micro)/1 var(--font-mono);color:var(--text-ghost)}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(216px,1fr));gap:var(--space-4)}

/* design-bold: карточка плотнее (14/16 вместо 16/16) и несёт цвет
   категории — тонкой линией у левого края, а не точкой. Линия видна
   боковым зрением при прокрутке и не отбирает место у названия. При
   наведении карточка подкрашивается тем же цветом на 7% — цвет
   категории становится поверхностью, а не значком. */
.tool{position:relative;display:flex;flex-direction:column;gap:var(--space-2);
  padding:var(--space-5) var(--space-6) var(--space-5) calc(var(--space-6) + 4px);
  border-radius:var(--radius-lg);
  background:var(--surface-card);border:1px solid var(--border-hairline);
  text-decoration:none;cursor:pointer;overflow:hidden;
  animation:toolIn var(--dur-slow) var(--ease-emphasis) both;
  transition:background-color var(--dur-fast) var(--ease-standard),
             border-color var(--dur-fast) var(--ease-standard),
             transform var(--dur-fast) var(--ease-standard),
             box-shadow var(--dur-base) var(--ease-standard)}
.tool::before{content:"";position:absolute;left:0;top:var(--space-5);bottom:var(--space-5);
  width:3px;border-radius:0 3px 3px 0;background:var(--dot);opacity:.75;
  transition:opacity var(--dur-fast) var(--ease-standard)}
.tool:hover{background:color-mix(in srgb,var(--dot) 7%,var(--surface-card));
  border-color:color-mix(in srgb,var(--dot) 40%,var(--border-hairline));
  transform:translateY(-1px);box-shadow:var(--shadow-1)}
.tool:hover::before{opacity:1}
.tool:active{transform:translateY(0)}

@keyframes toolIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Инструмент ещё не написан: карточка приглушена, никуда не ведёт и
   не отвечает на наведение — чтобы её не приняли за рабочую и не
   уткнулись в 404. Курсор обычный, а не «рука». */
.tool--soon{cursor:default;opacity:.5}
.tool--soon:hover{background:var(--surface-card);border-color:var(--border-hairline);
  transform:none;box-shadow:none}
.tool--soon::before,.tool--soon:hover::before{opacity:.3}
.tool--soon .tool__slug{color:var(--text-ghost)}
.tool__soon{position:absolute;top:var(--space-4);right:var(--space-4);z-index:2;
  padding:1px var(--space-4);border-radius:var(--radius-pill);
  background:var(--surface-hover);border:1px solid var(--border-subtle);
  color:var(--text-faint);
  font:var(--fw-semibold) var(--text-micro)/1.5 var(--font-ui);
  letter-spacing:var(--ls-label)}

.tool__top{position:relative;display:flex;align-items:center;gap:var(--space-4)}
.tool__mark{flex:0 0 auto;width:6px;height:6px;border-radius:var(--radius-pill);
  background:var(--dot)}
/* Внутри секции одной категории точка убрана совсем: она дублировала
   заголовок секции и забирала на себя цвет, которого потом не хватало
   полю поиска — единственному входу в каталог. Именно убрана, а не
   обесцвечена: прозрачная точка оставляла отступ, и название карточки
   переставало стоять на одной вертикали со слагом и описанием под ним. */
/* Точка больше не нужна нигде: цвет категории теперь несёт линия слева. */
.tool__mark{display:none}
/* Кегль только --text-body-lg / --text-body-sm: токен --text-body в темах
   переопределён как ЦВЕТ, внутри font: он делает правило невалидным, и
   название падало в Times (поймано на первом же скриншоте design-bold). */
.tool__name{margin:0;font:var(--fw-semibold) var(--text-body-lg)/1.25 var(--font-ui);
  color:var(--text-heading);letter-spacing:-.01em}
.tool__slug{position:relative;font:var(--fw-medium) var(--text-micro)/1 var(--font-mono);
  color:var(--text-ghost);transition:color var(--dur-fast) var(--ease-standard)}
.tool:hover .tool__slug{color:var(--accent-text)}
.tool__desc{position:relative;margin:var(--space-1) 0 0;
  font:var(--fw-regular) var(--text-caption)/1.45 var(--font-ui);
  color:var(--text-faint);text-wrap:pretty}

/* ==========================================================================
   11b. РАСПОЗНАВАНИЕ ВСТАВЛЕННОГО
   ========================================================================== */
.detect{position:relative;
  display:flex;align-items:flex-start;gap:var(--space-6);margin-bottom:var(--space-8);
  padding:var(--space-6) var(--space-7);border-radius:var(--radius-lg);
  background:var(--surface-card);border:1px solid var(--border-accent);
  box-shadow:var(--glow-accent-soft);cursor:pointer;
  animation:toolIn var(--dur-slow) var(--ease-emphasis) both;
  transition:border-color var(--dur-fast) var(--ease-standard),
             background-color var(--dur-fast) var(--ease-standard)}
.detect:hover{background:var(--surface-card-hover)}
.detect__icon{flex:0 0 auto;display:grid;place-items:center;width:32px;height:32px;
  border-radius:var(--radius-md);background:var(--accent-quiet);color:var(--accent-text)}
.detect__main{flex:1;min-width:0}
.detect__kind{margin:0 0 var(--space-2);
  font:var(--fw-semibold) var(--text-body-lg)/1.3 var(--font-ui);color:var(--text-heading)}
.detect__peek{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font:var(--fw-regular) var(--text-body-sm)/1.5 var(--font-mono);color:var(--text-faint)}
.detect__go{flex:0 0 auto;display:inline-flex;align-items:center;gap:var(--space-4);
  height:34px;padding:0 var(--space-7);border-radius:var(--radius-pill);
  background:var(--accent-fill);color:var(--on-accent);text-decoration:none;
  font:var(--fw-semibold) var(--text-body-sm)/1 var(--font-ui);
  letter-spacing:var(--ls-label);white-space:nowrap;
  transition:filter var(--dur-fast) var(--ease-standard)}
.detect__go:hover{filter:brightness(1.12);color:var(--on-accent)}
/* Растянутая ссылка: кликается вся карточка, а не только кнопка, при
   этом ссылка остаётся настоящей — Ctrl+клик и «открыть в новой вкладке»
   работают как обычно. Раньше по карточке можно было промахнуться и
   решить, что распознавание не работает. */
.detect__go::after{content:"";position:absolute;inset:0;border-radius:var(--radius-lg)}
.detect:focus-within{border-color:var(--accent)}

/* ==========================================================================
   11c. НЕДАВНИЕ
   ========================================================================== */
.recent{display:flex;align-items:center;gap:var(--space-5);flex-wrap:wrap;
  margin-bottom:var(--space-8)}
.recent[hidden]{display:none}
.recent__label{font:var(--fw-semibold) var(--text-micro)/1 var(--font-ui);
  letter-spacing:var(--ls-caps);text-transform:uppercase;color:var(--text-ghost)}
.recent__chip{display:inline-flex;align-items:center;gap:var(--space-4);height:28px;
  padding:0 var(--space-6);border-radius:var(--radius-pill);text-decoration:none;
  background:var(--surface-card);border:1px solid var(--border-hairline);
  color:var(--text-body);font:var(--fw-medium) var(--text-body-sm)/1 var(--font-ui);
  transition:border-color var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard)}
.recent__chip:hover{border-color:var(--border-accent);color:var(--text-heading)}
.recent__chip span{width:5px;height:5px;border-radius:var(--radius-pill);background:var(--dot)}

/* ==========================================================================
   11d. ИЗБРАННОЕ
   ========================================================================== */
.tool__fav{position:absolute;top:var(--space-4);right:var(--space-4);z-index:2;
  display:grid;place-items:center;width:26px;height:26px;padding:0;
  border:0;border-radius:var(--radius-pill);background:transparent;cursor:pointer;
  color:var(--text-ghost);opacity:0;
  transition:opacity var(--dur-fast) var(--ease-standard),
             color var(--dur-fast) var(--ease-standard),
             background var(--dur-fast) var(--ease-standard)}
.tool:hover .tool__fav,.tool:focus-visible .tool__fav,
.tool__fav:focus-visible,.tool__fav[aria-pressed="true"]{opacity:1}
.tool__fav:hover{background:var(--surface-hover);color:var(--text-heading)}
.tool__fav[aria-pressed="true"]{color:var(--amber-400)}
[data-theme="light"] .tool__fav[aria-pressed="true"]{color:var(--amber-600)}
.tool__fav svg{pointer-events:none}
.tool__name{padding-right:var(--space-8)}

/* Клавиатурная навигация по сетке */
.tool:focus-visible{outline:2px solid var(--accent);outline-offset:2px;
  border-color:var(--border-accent)}

/* ==========================================================================
   12. ПУСТО / ПОДВАЛ
   ========================================================================== */
.empty{padding:var(--space-11) 0}
.empty__t{margin:0 0 var(--space-4);
  font:var(--fw-semibold) var(--text-title-3)/1.3 var(--font-display);color:var(--text-heading)}
/* Тот же случай, что и в описании инструмента: 420px рвали строку
   в фиксированном месте, а место справа оставалось пустым. */
.empty__p{margin:0;
  font:var(--fw-regular) var(--text-body-sm)/1.6 var(--font-ui);color:var(--text-muted)}
.empty__p code{font-family:var(--font-mono);font-size:var(--text-micro);color:var(--accent-text)}

.foot{flex:0 0 auto;width:100%;max-width:var(--maxw-content);margin:0 auto;
  padding:var(--space-9) var(--gutter-page);border-top:1px solid var(--border-hairline)}
.foot p{margin:0;
  font:var(--fw-regular) var(--text-body-sm)/1.6 var(--font-ui);color:var(--text-faint)}
/* см. tool.css — то же обещание о приватности, тот же вид */
.foot__note{display:flex;align-items:flex-start;gap:var(--space-5)}
.foot__icon{flex:0 0 auto;margin-top:3px;color:var(--ok-fg)}

/* ==========================================================================
   13. АДАПТИВ
   ========================================================================== */
@media (max-width:960px){
  :root{--gutter-page:24px}
  .layout{grid-template-columns:1fr;gap:var(--space-8)}
  .rail{position:static}
  .rail__label{display:none}
  .rail__list{flex-direction:row;flex-wrap:wrap;gap:var(--space-3)}
  .rail__marker{display:none}
  .cat{width:auto;border:1px solid var(--border-hairline);border-radius:var(--radius-pill);
    transition:background-color var(--dur-fast) var(--ease-standard),
               border-color var(--dur-fast) var(--ease-standard),
               color var(--dur-fast) var(--ease-standard)}
  .cat[aria-pressed="true"]{background:var(--surface-selected);border-color:var(--border-accent)}
  .cat__n{display:none}
  .searchzone{padding-top:var(--space-10)}
}
/* На телефоне поиск поднимается сразу под заголовок: при кегле заголовка
   в три раза больше текста вводный абзац уводил поле поиска на 881px —
   ниже сгиба, то есть человек, пришедший работать, видел только прозу.
   Порядок в разметке при этом не меняется. */
@media (max-width:720px){
  .searchzone__h1{order:1;margin-bottom:var(--space-6)}
  .search{order:2}
  .searchzone__intro{order:4;margin:var(--space-5) 0 0}
}
@media (max-width:640px){
  .topbar{gap:var(--space-5)}
  .search{height:56px;padding:0 var(--space-6)}
  /* Не ниже 16px: на iOS поле с более мелким шрифтом заставляет Safari
     зумить страницу при фокусе. Крупный шаг регулятора при этом
     по-прежнему работает — ограничен только низ. */
  .search__input{font-size:max(16px, calc(16px * var(--fs-scale)))}
  .search__kbd,.search__count{display:none}
  .grid{grid-template-columns:1fr}
}

/* Строка авторства. Набрана мельче и тусклее обещания о приватности
   намеренно: обещание человек читает, а это — сноска, к которой
   обращаются в одном случае из тысячи. Копирование она не остановит
   (клиентский код скрыть нельзя), но делает его сознательным, а не
   случайным. Условия — в LICENSE, причина — в HANDOFF.md. */
.foot .foot__rights{margin-top:var(--space-7);padding-top:var(--space-5);
  border-top:1px solid var(--border-hairline);
  font:var(--fw-regular) var(--text-micro)/1.5 var(--font-ui);
  color:var(--text-ghost)}