/* Kaskad 3 — поиск по панели «как в Настройках iPhone» (3.3.6, BACKLOG-3.3.6 п. 3). Узор go-ds gx-find
   (Claude Design/go-ds/export-2026-10-16-1501/files/css/patterns.css), выдача — gx-cmdk (nav2 r1, UI-A2), токены —
   tokens.css панели. Компьютер — по ⌘K / Ctrl+K / «/» или по полю в шапке: поле ввода на месте поля шапки и выдача под
   ним (поле свёрнуто в значок — окно сверху); телефон — во весь экран над клавиатурой (--vvh ставит app.js через CSSOM).
   Поведение — app.js §11b, модель — find.js. Переменных значений в разметке нет (CSP style-src 'self'). */

/* ── Поле в шапке ── */
.kk-hfind { flex: 0 1 340px; min-width: 40px; max-width: 420px; height: var(--h-md); padding: 0 8px 0 12px; border: 0; color: var(--text-2); font: 400 var(--fs) var(--font); text-align: left; cursor: text; }
.kk-hfind:hover { background: var(--field-hover); }
.kk-hfind:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.kk-hfind__t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-hfind__k { flex: none; }
/* узкая шапка (меню «Значки», 700–1099): поле сжимается до значка */
@media (max-width: 1099.98px) {
  .gx-head .kk-hfind { flex: 0 0 var(--h-md); width: var(--h-md); padding: 0; justify-content: center; }
  .gx-head .kk-hfind .kk-hfind__t, .gx-head .kk-hfind .kk-hfind__k { display: none; }
}
/* Н-5 стенда 3.3.7.13: от 1100 поле растёт от значка 40 (styles.css, З-1 REV-3313-final) — пока в нём нет места для
   слова и «⌘K», оно значком, как ниже 1100 (без этого «⌘K» вылезал из поля на «Онлайн» у «Пользователей» на 1100–1199).
   Поле — контейнер запроса своей ширины (содержимое без отступов 12 + 8) */
@media (min-width: 1100px) {
  .gx-head .kk-hfind { container: kk-hfind / inline-size; }
}
@container kk-hfind (max-width: 99.98px) {
  .kk-hfind .kk-hfind__t, .kk-hfind .kk-hfind__k { display: none; }
  .kk-hfind > .gi { margin-inline: auto; }
}
/* телефон: поле во всю ширину под строкой состояния, цель касания 44 px; значок у «Людей» и «Пробросов» */
.kk-hfind--m { flex: none; width: 100%; max-width: none; height: 44px; margin-top: 8px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border); box-shadow: none; font-size: 1rem; }
.kk-findbtn--m { width: 44px; height: 44px; flex: none; }

/* ── Окно поиска ── */
/* Выдача — gx-cmdk (nav2 r1, кадр Н2, Claude Design kaskad-stage1/export-2026-10-23-ecg css/nav2.css; UI-A2):
   подпись группы сверху, строка 44 — значок · название и путь второй строкой · справа ↵ у выбранной (.is-act),
   будущая — серым с меткой выпуска (gx-cmdk__r--soon). Три вида окна:
   • компьютер, поле в шапке видно (gx-find--at): строка ввода — на месте поля шапки, как поле в фокусе; выдача
     шириной 520 — под ним, затемнения нет (как в кадре Н2). Координаты — переменные --fx/--fy/--fw/--fh/--lx/--lw (app.js);
   • компьютер, поле свёрнуто в значок: окно 520 сверху по центру — поле ввода, под ним выдача;
   • телефон: во весь экран (ниже). */
.gx-find-back { position: fixed; inset: 0; z-index: 36; display: flex; justify-content: center; align-items: flex-start; padding: 10vh var(--sp-4) var(--sp-4); background: var(--backdrop); animation: hero-fade .15s; }
.gx-find { width: min(100%, 520px); max-height: min(560px, 80dvh); display: flex; flex-direction: column; border-radius: var(--r-tile); background: var(--surface); box-shadow: var(--overlay-shadow); overflow: hidden; }
.gx-find:focus { outline: none; }
.gx-find__in { flex: none; display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 var(--sp-3) 0 var(--sp-4); border-bottom: 1px solid var(--separator); color: var(--text-2); }
.gx-find__q { flex: 1; min-width: 0; align-self: stretch; border: 0; padding: 0; background: transparent; color: var(--foreground); font: 400 var(--fs-lg) var(--font); outline: none; }
.gx-find__q::-webkit-search-cancel-button { display: none; }
/* поле — часть строки окна: своя рамка фокуса не нужна (фокус виден по курсору и подсветке строки) */
.gx-find .gx-find__q:focus, .gx-find .gx-find__q:focus-visible { outline: none; box-shadow: none; }
.gx-find__x { flex: none; }
/* «Отмена» на компьютере — клавиша Esc (имя кнопки — «Отмена») */
.gx-find__esc { flex: none; display: inline-flex; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.gx-find__esc:hover > .ga-kbd { color: var(--foreground); }
.gx-find__esc:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.gx-cmdk { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.gx-find__res { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 6px; display: grid; align-content: start; gap: 2px; }
.gx-cmdk__g { display: grid; gap: 2px; }
.gx-cmdk__g + .gx-cmdk__g { margin-top: 4px; }
.gx-cmdk__cap { padding: 6px 10px 2px; font: 500 .75rem/1rem var(--font); color: var(--text-3); }
.gx-cmdk__n, .gx-cmdk__hint { font-weight: 400; }
.gx-cmdk__r { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 4px 10px; border-radius: var(--r-tag); color: var(--foreground); cursor: pointer; }
.gx-cmdk__r.is-act { background: var(--surface-2); }
.gx-cmdk__r > .gi { flex: none; color: var(--text-2); }
.gx-cmdk__b { flex: 1; min-width: 0; display: grid; }
.gx-cmdk__t { font: 500 var(--fs-sm)/1.125rem var(--font); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-cmdk__p { font-size: .78125rem; line-height: 1rem; color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gx-cmdk__k { flex: none; display: inline-flex; min-width: 22px; justify-content: flex-end; }
.gx-cmdk__r > .gx-soon { flex: none; }
/* nav2 r1: будущий пункт — серым, с выпуском меткой справа; Enter его не открывает */
.gx-cmdk__r--soon { color: var(--text-3); cursor: default; }
.gx-cmdk__r--soon > .gi, .gx-find .gx-cmdk__r--soon mark { color: var(--text-3); }
.gx-cmdk__r--more .gx-cmdk__t { color: var(--accent-text); }
.gx-find mark { background: none; color: var(--accent-text); font-weight: 600; }
/* подсказка и «Ничего не нашлось» — рядом со списком (не в listbox); длинный запрос без пробелов переносится (П-1) */
.gx-find__msg { flex: none; padding: 0 6px; overflow-wrap: anywhere; }
.gx-find__msg:empty { display: none; }
.gx-find__res[hidden] { display: none; }
.gx-find__hint { padding: 4px 10px 10px; font-size: var(--fs-xs); color: var(--text-3); text-wrap: pretty; }
.gx-find__empty { display: grid; justify-items: center; gap: var(--sp-3); padding: var(--sp-8) var(--sp-4); text-align: center; }
.gx-find__empty > b { font: 600 var(--fs-lg)/1.3 var(--font-head); }
.gx-find__empty > p { color: var(--text-2); max-width: 40ch; text-wrap: pretty; }
.gx-find__sugg { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.gx-find__s { cursor: pointer; border: 0; font: inherit; }

/* компьютер, поле в шапке видно: строка ввода — на месте поля шапки (вид gx-search-in в фокусе), выдача — под полем.
   Окно (role=dialog) — прозрачный слой на весь экран: нажатие мимо поля и выдачи попадает в подложку и закрывает поиск */
.gx-find-back--at { display: block; padding: 0; background: none; animation: none; }
.gx-find--at { position: absolute; inset: 0; width: auto; max-height: none; border-radius: 0; background: none; box-shadow: none; overflow: visible; pointer-events: none; }
.gx-find--at > * { pointer-events: auto; }
.gx-find--at > .gx-find__in { position: absolute; left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh); min-height: 0; gap: 8px; padding: 0 8px 0 12px; border: 0; border-radius: var(--r-field); background: var(--field-background); box-shadow: inset 0 0 0 1px var(--accent-text), 0 0 0 3px var(--accent-soft); }
.gx-find--at .gx-find__q { font-size: var(--fs); }
.gx-find--at > .gx-cmdk { position: absolute; left: var(--lx); top: calc(var(--fy) + var(--fh) + 6px); width: var(--lw); max-height: min(520px, calc(100dvh - var(--fy) - var(--fh) - 22px)); border-radius: var(--r-tile); background: var(--surface); box-shadow: var(--overlay-shadow); overflow: hidden; animation: hero-fade .15s; }
.gx-find--at .gx-find__res { flex: 0 1 auto; }

/* телефон: во весь экран, поле сверху 16 px (iOS не увеличивает страницу), строки ≥ 56 px, без подсказок клавиш */
[data-device="phone"] .gx-find-back { padding: 0; align-items: stretch; background: var(--background); }
[data-device="phone"] .gx-find { width: 100%; height: var(--vvh, 100dvh); max-height: none; border-radius: 0; box-shadow: none; background: var(--background); padding-top: env(safe-area-inset-top); }
[data-device="phone"] .gx-find__in { gap: var(--sp-2); padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-3); min-height: 60px; border-bottom: 0; }
[data-device="phone"] .gx-find__in > .gi { display: none; }
[data-device="phone"] .gx-find__q { height: 44px; flex: 1 1 auto; padding: 0 12px; border-radius: var(--r-field); background: var(--field-background); box-shadow: var(--field-shadow); font-size: max(1rem, 16px); }
[data-device="phone"] .gx-find .gx-find__q:focus-visible { box-shadow: var(--focus-ring); }
[data-device="phone"] .gx-find__x { min-height: 44px; }
[data-device="phone"] .gx-find__res { padding: 0 6px calc(6px + env(safe-area-inset-bottom)); }
[data-device="phone"] .gx-cmdk__r { min-height: 56px; }
[data-device="phone"] .gx-cmdk__t { font-size: var(--fs); line-height: 1.25rem; }
/* касание без телефонной раскладки (iPad, iPhone в альбомной ≥ 700 px): поле тоже 16 px — меньше Safari увеличивает
   страницу при фокусе (REV-336-search З-8) */
@media (pointer: coarse) { .gx-find__q, .gx-find--at .gx-find__q { font-size: max(1rem, 16px); } }
@media (prefers-reduced-motion: reduce) { .gx-find-back, .gx-find--at > .gx-cmdk { animation: none; } }
/* значок поиска в шапке (меню сверху) — вид gx-iconbtn */
.kk-findbtn { flex: none; }