/* ============================================================
   Orgship · Mobile overrides  (v2)

   ДВА независимых условия, и путать их нельзя:

   §T  (hover: none) and (pointer: coarse) — СПОСОБ ВВОДА.
       Размер пальца, порог 16px против авто-зума iOS, нативные
       квадратики. К ширине отношения не имеет: телефон в ландшафте
       — это 844px и тот же палец.

   §W  max-width: 768px / 480px — УЗКИЙ ЭКРАН. Раскладка: что во
       сколько колонок, что скроллится, что превращается в список.
       480px — очень узкие (iPhone SE и подобные).

   +   (max-height: 500px) and (orientation: landscape) — ландшафт
       телефона: там не хватает ВЫСОТЫ, и ширинный брейкпоинт не
       срабатывает вовсе (844 > 768). Блок в конце файла.

   Подключается ПОСЛЕДНИМ в index.html, чтобы переопределять
   десктопные стили. Только @media, никаких глобальных правил.

   Частности вкладки живут в ЕЁ CSS, а не здесь (ARCHITECTURE.md).
   Проверка — tests/mobile-audit.mjs.
   ============================================================ */

/* ============================================================
   §T. ПАЛЕЦ — условие по СПОСОБУ ВВОДА, а не по ширине экрана.

   Почему не `max-width: 768px`. Порог «44px под палец» не имеет
   отношения к ширине: телефон в ландшафте — это 844px ширины и всё
   тот же палец, а внешний монитор в 800px — мышь. Пока всё жило под
   ширинным брейкпоинтом, поворот телефона возвращал десктопные
   25-пиксельные кнопки, и этого никто не замечал, потому что и
   проверяли всегда в портрете.

   `hover: none` + `pointer: coarse` — прямой вопрос браузеру:
   «указатель грубый и наведения нет?». Ровно то, что нам нужно.
   ============================================================ */
@media (hover: none) and (pointer: coarse) {

  /* 16px на КАЖДОМ поле ввода.
     iOS Safari масштабирует всю страницу при фокусе, если шрифт
     контрола меньше 16px, и обратно масштаб не возвращает — вёрстка
     остаётся «уехавшей» до ручного отщипывания. Порог держим в одном
     месте: раньше 16px ставили точечно (поиск Кодекса, ops-search),
     и все формы, появившиеся позже, приехали с 12–14px.

     R-225 (2026-09-17, мега-ревью G1-1): голый тег-селектор — это
     специфичность (0,0,1), и ЛЮБОЙ файл с классом побеждает его
     ВСЕГДА, независимо от порядка подключения (mobile.css грузится
     последним, но это не спасает: класс > тег). Проверено на бою:
     `sprint.css .sp-select{font-size:14px}` перебивал это правило,
     автозум на iOS так и включался. `!important` — тот же приём, что
     уже стоит в этом файле для `[hidden]` (tasks.css:324-331) и
     единственный способ, которым «единая точка правды» для 16px
     реально остаётся единой при любом числе классовых правил в других
     файлах вкладок. */
  input:not([type="checkbox"]):not([type="radio"]),
  select,
  textarea { font-size: 16px !important; min-height: 44px; }

  /* 44px по ОБЕИМ сторонам (WCAG 2.5.5). min-height ширину не лечит:
     значок 15px остаётся 15px в ширину, сколько высоты ему ни дай —
     поэтому иконочным кнопкам отдельно min-width. */
  button, [role="button"], .clickable { min-height: 44px; }

  .side-panel-close, .sp-modal-x, .ops-close,
  .timeoff-daterow-x, .timeoff-cal-nav button,
  .tkb-ib, .okr-fs-close, .sp-mx-name,
  .mission-fs .fs-close, .okr-sum-unpin { min-width: 44px; }
  /* Чекбокс закрытия (2026-09-03): квадрат остаётся 22px, зону
     нажатия 44px даёт его ::before (tasks.css). Раздутый до 44px
     чекбокс выглядел кнопкой-кирпичом. */
  .tk-done { min-width: 22px; min-height: 22px; }

  /* До этих `button` не достаёт: ссылки-карточки и метки.

     R-226 (2026-09-17, мега-ревью G2-1.7): порог «44px под палец» —
     вопрос СПОСОБА ВВОДА (см. шапку файла), но 6 из этих же селекторов
     (`.view-switcher button`, `.ship-tabs button`, `.mg-toggles label`,
     `.metric-toggle button`, `.year-btn`, `.mode-toggle button`) ЕЩЁ РАЗ
     объявляли `min-height:44px` под `@media (max-width:768px)` ниже по
     файлу — ровно тот баг, который эта шапка документирует как уже
     пойманный: телефон в ландшафте (844px, tot же палец) не получал бы
     44px, если бы держался только на width-копии. Здесь, под
     pointer:coarse, они СРАБАТЫВАЮТ на любой ширине; width-дубликаты
     ниже убраны, `.mission-unlock .mu-form button` (был только под
     width — жанровая дыра, не дубликат) добавлен сюда же. */
  a.codex-card, a.feedback-card-cta, .colony-card,
  .ship-rm-person, .ship-bay-chip, .sync-indicator,
  /* `.sp-radio` / `.sp-check` — ярлык целиком и есть цель нажатия
     (нативный квадратик 20px мельче пальца во всех браузерах, см. ниже).
     В портрете такой ярлык переносится на две строки и до 44px дорастал
     сам; в ЛАНДШАФТЕ телефона (844 px — ширинный брейкпоинт не
     срабатывает) он остаётся в одну строку ~30 px, и выбор способа
     учёта прогресса в форме цели недели становится мелкой целью.
     Найдено аудитом 17.09.2026 на 844×390. */
  .sp-radio, .sp-check,
  .sp-rv-opt, .sp-rv-carry, .mg-toggles label,
  .sp-btn, .sp-btn-sm, .sp-tab, .sp-chip, .sp-more-sec,
  .tk-btn, .tk-screen, .okr-seg button, .okr-yearsel button,
  .year-btn, .mode-toggle button, .metric-toggle button,
  .ship-tabs button, .view-switcher button, .codex-chip,
  .mission-unlock .mu-form button { min-height: 44px; }

  /* Исключение: значок «?» стоит ВНУТРИ подписи поля, в строке текста.
     Дать ему 44px высоты — значит раздуть строчный бокс подписи до 44px
     и оторвать значок от текста (проверено: подписи росли 18 → 40–58px).
     Сам значок остаётся маленьким, палец получает невидимую зону через
     псевдоэлемент. */
  .tk-q { min-height: 0; position: relative; }
  .tk-q::before { content: ""; position: absolute; inset: -16px; }

  /* Нативные квадратики мельче пальца во всех браузерах.
     flex:0 0 auto обязателен: внутри флекс-строки (метка режима, фильтр
     графа) они сжимались обратно до 13–14px, сколько ширины ни задай. */
  input[type="checkbox"], input[type="radio"] {
    width: 20px; height: 20px; flex: 0 0 auto;
  }
  /* Фильтры графа подчинения задают размер своим селектором — он
     специфичнее общего, поэтому перекрываем адресно. */
  .mg-toggles input[type="checkbox"] { width: 20px; height: 20px; }
  .mg-toggles input[type="checkbox"]:checked::after {
    left: 6px; top: 2px; width: 5px; height: 10px;
  }

  /* Всё, что открывается только по наведению, на тач недостижимо.
     Подсказки переведены на data-tip (core/ui/tip.js ловит click);
     здесь гасим декоративные hover-состояния, которые на тач
     «залипают» после тапа. */
  .okr-hm-cell:hover { transform: none; }
}

@media (max-width: 768px) {

  /* ============================================================
     Глобально
     ============================================================ */
  /* Страховочная сетка, а НЕ способ адаптации. Всё, что вылезает
     вбок, чинится по месту; это правило нужно только чтобы одна
     недосмотренная деталь не давала болтанку всей страницы.
     Проверять вёрстку следует со снятой маской:
     tests/mobile-audit.mjs подставляет overflow-x:visible. */
  html, body { overflow-x: hidden; }
  body { font-size: 14px; }

  /* Шапка sticky и высокая (две строки, ~123px). Без scroll-padding
     любой scrollIntoView и автопрокрутка браузера к сфокусированному
     полю прячут цель ПОД шапку — человек видит пустоту вместо поля. */
  html { scroll-padding-top: 132px; }

  /* ============================================================
     §0. МОБИЛЬНЫЙ КОНТРАКТ — общие правила для всех вкладок.
     Появилась новая вкладка — эти правила уже работают на ней,
     специально ничего дописывать не надо. Частности вкладки
     живут в её собственном CSS (ARCHITECTURE.md, правило 9).
     ============================================================ */

  /* (1) Прокручиваемые полосы не должны утаскивать страницу и жест
     «назад» браузера, а долистанный до конца внутренний список —
     продолжать тянуть документ под собой. */
  .view-switcher, .tk-screens, .fs-tabs,
  .sp-mx-wrap, .okr-heatmap-wrap, .timeoff-cal-scroll,
  .tkb-table-wrap, .side-panel-body, .sp-modal-body,
  .ops-drbody, .manager-tree { overscroll-behavior: contain; }

  /* (2) Замок прокрутки под полноэкранным слоем.
     Класс вешает JS при открытии панели/модалки: без него свайп по
     нескроллящейся части оверлея прокручивает страницу под ним, и
     после закрытия человек оказывается в другом месте списка. */
  .sp-modal-back, .side-panel-overlay { touch-action: none; }

  /* ============================================================
     КОСМОС-ФОН — стабилизация на мобиле.
     Причина «фон скроллится и тянется»: слои .cosmos-layer и
     #cosmos-canvas — position:fixed высотой в вьюпорт (inset:0). При
     скролле браузер прячет адресную строку → высота вьюпорта меняется →
     fixed-слои пересчитываются и картинка растягивается/съезжает.
     Фиксируем высоту в 100lvh (большой вьюпорт — не зависит от адресной
     строки) и якорим туманность по центру. cosmos.js берёт высоту канваса
     из этого же CSS-бокса (c.clientHeight) → буфер = боксу, без растяжения.
     ============================================================ */
  .cosmos-layer,
  #cosmos-canvas {
    height: 100vh;   /* фолбэк для старых браузеров */
    height: 100lvh;  /* стабильная высота, не сжимается под адресную строку */
    bottom: auto;    /* отпускаем inset-bottom, чтобы победила height */
  }
  .cosmos-nebula {
    background-position: center center;  /* без съезда bottom-якоря при ресайзе */
  }

  /* main padding — компактнее. Нижний паддинг учитывает домашнюю
     полоску iPhone (env safe-area-inset-bottom). */
  .app-main {
    padding: 16px 12px;
    padding-bottom: calc(64px + env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }

  /* ============================================================
     HEADER
     Строка 1: logo + brand + sync + KPI
     Строка 2: view-switcher (горизонтальный скролл)
     ============================================================ */
  .app-header {
    flex-wrap: wrap;
    gap: 10px;
    /* safe-area: на iPhone с вырезом/Dynamic Island шапка не уезжает
       под статусбар; боковые insets — чтобы контент не лез под скруглённые
       углы в ландшафте. viewport-fit=cover задан в index.html.
       Порядок: top right bottom left. */
    padding-top: max(10px, env(safe-area-inset-top));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: 10px;
    padding-left: max(14px, env(safe-area-inset-left));
    align-items: center;
    /* Перформанс: blur(12px) на sticky-шапке дорог при каждом скролле
       (особенно на мобильном GPU/батарее). Заменяем на плотный
       непрозрачный фон без backdrop-filter — визуально почти не
       отличается, но дешевле. */
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(180deg, rgba(10,14,26,0.98) 0%, rgba(10,14,26,0.94) 100%);
  }

  /* Оверлей под side-panel — тоже без blur на мобильном (GPU/батарея).
     Слегка плотнее фон, чтобы фон-страница не просвечивала без блюра. */
  .side-panel-overlay {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(5, 8, 16, 0.72);
  }

  /* Бренд: компактный логотип, текст-подзаголовок скрыт */
  .app-brand { gap: 8px; }
  .app-brand-logo {
    width: 38px;
    height: 38px;
    filter:
      drop-shadow(0 0 10px rgba(125, 211, 255, 0.55))
      drop-shadow(0 0 3px rgba(125, 211, 255, 0.30));
  }
  .app-brand-text strong { font-size: 14px; }
  .app-brand-text span { display: none; }

  /* View-switcher — переезжает на новую строку, горизонтальный скролл */
  .view-switcher {
    order: 10;                        /* 2-я строка после .app-brand + right */
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    padding: 3px;
    border-radius: 999px;
  }
  .view-switcher::-webkit-scrollbar { display: none; }
  /* Полоса обрывается ровно по кнопке — и выглядит как «здесь всё».
     Мягкое затухание у краёв говорит, что вбок есть ещё. Снап
     довозит кнопку до края, а не оставляет её половиной за экраном.
     Активную вкладку подкручивает registry.js — без этого после
     перехода на дальнюю вкладку подсвеченной не видно ни одной. */
  .view-switcher {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
    scroll-snap-type: x proximity;
  }
  .view-switcher button {
    padding: 9px 14px;
    font-size: 12px;
    flex-shrink: 0;
    white-space: nowrap;
    /* min-height:44px — в §T (pointer:coarse), не здесь: R-226. */
    scroll-snap-align: center;
  }

  /* Header-right компактнее */
  .app-header-right {
    gap: 8px;
    margin-left: auto;
  }

  /* Поиск — значком; раскрытие во весь экран — в блоке «ПОИСК НА
     ТЕЛЕФОНЕ» в конце файла (23.09.2026). До этого поле здесь было
     спрятано, и на телефоне искать было нечем вовсе. */

  /* Sync indicator — компактный chip */
  .sync-indicator {
    padding: 5px 9px;
    font-size: 10px;
    gap: 6px;
  }
  .sync-indicator .sync-dot { width: 7px; height: 7px; }
  .sync-indicator .sync-label { font-size: 10px; }

  /* KPI pill — только проценты, без подписи Mission 2026 */
  .kpi-pill {
    padding: 5px 10px;
    font-size: 11px;
    gap: 6px;
  }
  .kpi-pill > span:nth-of-type(2) { display: none; }  /* "Mission 2026" */
  .kpi-pill strong { font-size: 12px; }

  /* ============================================================
     SIDE-NAVS — уже скрыты media @max-width 1440. Подстраховка.
     ============================================================ */
  .side-nav { display: none !important; }

  /* ============================================================
     SHIP MAP
     ============================================================ */
  .ship-title {
    font-size: 11px;
    margin-bottom: 10px;
  }

  .ship-tabs {
    margin-bottom: 12px;
  }
  .ship-tabs button {
    padding: 9px 14px;
    font-size: 12px;
    /* min-height:44px — в §T (pointer:coarse), не здесь: R-226. */
  }

  /* Корабль — во всю доступную ширину */
  .ship-stage {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Compartments — координаты в %, скейл автоматический.
     Cross-deck несёт 5 аватаров в ряд → ширина 50% ship-stage = ~180px.
     На 5 нужно ≤32px каждый. Допускаем меньший min для cqw-формулы. */
  .crew-badge {
    width: clamp(30px, 9.5cqw, 52px) !important;
    height: clamp(30px, 9.5cqw, 52px) !important;
    border-width: 2px;
  }
  /* Уменьшаем gap внутри cross-deck чтобы 5 точно влезли */
  .compartment.cross-deck .crew { gap: 3px !important; padding: 0 2px !important; }

  /* Compartment-label — всегда видимый (нет hover на тач), бо́льший таргет */
  .compartment-label {
    opacity: 1 !important;
    font-size: 10px;
    padding: 4px 8px;
    pointer-events: auto;
    background: rgba(8, 14, 30, 0.78);
    border-radius: 10px;
    border: 1px solid rgba(125, 211, 255, 0.25);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
  }
  .compartment-label.clickable {
    min-height: 28px;
    padding: 5px 10px;
  }

  /* Colony marker — двигаем внутрь экрана, чтобы был полностью виден */
  .colony-marker {
    right: 4px !important;
    bottom: 6% !important;
    width: 84px !important;
  }
  .colony-marker-planet {
    width: 78px !important;
    height: 78px !important;
  }
  .colony-marker-label { font-size: 10px; }
  .colony-marker-label strong { font-size: 11px; }

  /* Легенда — wrap по ширине, компактнее */
  .ship-legend {
    flex-wrap: wrap;
    gap: 10px 14px;
    justify-content: center;
    margin-top: 18px;
    padding: 0 8px;
  }
  .ship-legend .legend-item { font-size: 10px; }

  /* MG-toggles (граф «по подчинению») — компактнее */
  .mg-toggles {
    flex-wrap: wrap;
    gap: 12px;
    font-size: 11px;
  }

  /* ============================================================
     MANAGER-GRAPH (D3, .mg-svg) — горизонтальный скролл на мобильном.
     Граф рендерится в .ship-stage когда активна вкладка «По подчинению».
     :has() широко поддержан в Safari/Chrome/Firefox 2023+.
     ============================================================ */
  /* Ширину графа задаёт НЕ бокс, а отношение бокса к viewBox.
     Прежние `width:640px` при viewBox шириной 1769 юнитов давали
     масштаб 0.36 — подписи «Co-founder, CEO» рисовались шрифтом
     в 6px, корневой узел прижимался к правому краю, а снизу
     оставалось 320px пустоты (якорь xMidYMin + min-height 620).
     Задаём высоту, ширину отдаём intrinsic-пропорции viewBox. */
  .mg-svg {
    width: auto;
    min-width: 0;
    max-width: none;
    height: 560px;          /* масштаб ≈0.67 вместо 0.36 */
    min-height: 0;
  }
  .ship-stage:has(.mg-svg) {
    aspect-ratio: auto;
    height: auto;
    min-height: 0;
  }
  /* Скроллер — .manager-tree (position:absolute; inset:0; overflow:auto),
     а не .ship-stage: правила на .ship-stage были мертвы, у неё
     scrollWidth === clientWidth и скроллить нечего. */
  .ship-stage:has(.mg-svg) .manager-tree {
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 8px;
  }
  .ship-stage:has(.mg-svg) .manager-tree::-webkit-scrollbar { height: 4px; }
  .ship-stage:has(.mg-svg) .manager-tree::-webkit-scrollbar-thumb {
    background: rgba(125, 211, 255, 0.4); border-radius: 2px;
  }
  /* Квадратики фильтров графа — 14px во всех браузерах, мимо пальца */
  .mg-toggles label { padding: 10px 14px; } /* min-height:44px — §T (R-226) */

  /* ============================================================
     MISSION MAP — вертикальный таймлайн
     ============================================================ */

  /* KPI bar: 2 × 2 grid */
  .mission-kpi {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 14px;
  }
  .kpi-card {
    min-width: 0;
    padding: 10px 12px;
    border-radius: 12px;
  }
  .kpi-card .label { font-size: 9px; letter-spacing: 0.1em; }
  .kpi-card .value { font-size: 18px; line-height: 1.15; }
  .kpi-card .delta { font-size: 10px; }

  /* Metric toggle — единственный ряд-пилюля, которому не дали запаса
     на переполнение: соседние .year-switcher и .mode-toggle скроллятся,
     а этот держался тем, что подписи ломались в две строки («Оборот /
     (TPV)»). Пятая метрика (net_profit, ebitda заведены выключенными)
     ряд бы порвала. Приводим к тому же поведению, что у соседей. */
  .metric-toggle {
    margin-bottom: 14px;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .metric-toggle::-webkit-scrollbar { display: none; }
  .metric-toggle button {
    padding: 9px 14px;
    font-size: 12px;
    /* min-height:44px — в §T (pointer:coarse), не здесь: R-226. */
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Ряд контролов (год / режим Маршрут·Сводка) — переносится, не
     прижимается к краям; тогглы скроллятся если не влезают. */
  .mission-controls {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .mission-controls-right {
    justify-content: flex-start;
    gap: 10px;
  }
  .year-switcher, .mode-toggle {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .year-switcher::-webkit-scrollbar, .mode-toggle::-webkit-scrollbar { display: none; }
  .year-btn, .mode-toggle button { flex: 0 0 auto; white-space: nowrap; } /* min-height:44px — §T (R-226) */

  /* Строка «похищено пришельцами» (разблокировка аналитики кодом) —
     заголовок и форма друг под другом, поле+кнопка во всю ширину. */
  .mission-unlock {
    flex-direction: column;
    /* nowrap обязателен: в многострочном колоночном флексе поперечный
       размер строки считается по max-content детей, а не по ширине
       контейнера — дети перестают сжиматься и разносят страницу.
       Ровно так сломался Кодекс (см. codex.css). */
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 10px;
    padding: 12px 14px;
  }
  .mission-unlock .mu-form { width: 100%; }
  .mission-unlock .mu-form input {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    font-size: 16px; /* без авто-зума iOS */
    padding: 11px 12px;
  }
  .mission-unlock .mu-form button { padding: 11px 18px; } /* min-height:44px — §T, добавлено R-226 (была дыра: только здесь) */

  /* Mission-stage — теперь вертикальный стек планет, без aspect-ratio */
  .mission-stage {
    aspect-ratio: auto !important;
    height: auto !important;
    min-height: auto;
    padding: 28px 12px 20px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    position: relative;
  }
  /* Вертикальная dashed-линия посередине — связывает планеты */
  .mission-stage::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 36px;
    bottom: 36px;
    width: 0;
    border-left: 1.5px dashed rgba(125, 211, 255, 0.25);
    transform: translateX(-50%);
    z-index: 0;
  }

  /* Скрываем SVG-маршрут, кораблик и его fx-шлейф — для вертикального
     стека планет они не нужны (fx-канвас рисовал трейл по десктопной
     геометрии → лишний слой поверх списка). */
  .route-svg,
  .mission-ship,
  .mission-fx {
    display: none !important;
  }

  /* Планеты — relative, центрированы, размер фиксированный */
  .mission-stage .planet {
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 1;
  }
  .mission-stage .planet:hover {
    transform: none !important;
  }
  .mission-stage .planet img {
    width: 84px !important;
    height: auto;
  }
  .mission-stage .planet-label {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin-top: 6px;
    text-align: center;
  }
  .mission-stage .planet-label .month {
    font-size: 13px;
  }
  .mission-stage .planet-label .pct {
    font-size: 11px;
  }

  /* Product-progress — 1 колонка */
  .product-progress {
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 24px;
  }
  .pp-card {
    padding: 12px 14px;
    border-radius: 12px;
  }
  .pp-card .label { font-size: 9px; }
  .pp-card .product-name { font-size: 14px; }
  .pp-card .pct-text { font-size: 11px; }

  /* ============================================================
     КОЛОНИЯ
     ============================================================ */
  .colony-view {
    padding: 16px 8px 40px;
  }
  .colony-hero {
    flex-direction: column;
    text-align: center;
    gap: 14px;
    padding: 18px 14px;
  }
  .colony-hero-planet {
    width: 110px !important;
    height: 110px !important;
    margin: 0 auto;
  }
  .colony-hero-title { font-size: 20px; }
  .colony-hero-sub { font-size: 12px; }
  .colony-hero-stats {
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
    font-size: 12px;
  }
  .colony-grid {
    grid-template-columns: 1fr !important;
    gap: 10px;
  }
  .colony-card {
    padding: 12px 14px;
  }

  /* ============================================================
     LEGAL (Юр-структура) — drill-down
     ============================================================ */
  .view-legal { padding: 0 8px 16px; }

  .legal-lock {
    margin: 40px auto;
    padding: 28px 22px;
    max-width: calc(100vw - 32px);
  }
  .legal-lock h2 { font-size: 18px; }
  .legal-lock-icon { width: 48px; height: 48px; margin-bottom: 14px; }

  .legal-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 12px;
  }
  .legal-header-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
  }
  .legal-header h2 { font-size: 17px; }
  .legal-breadcrumb { font-size: 10px; letter-spacing: 0.1em; }
  .legal-back-btn { font-size: 11px; padding: 8px 12px 8px 10px; min-height: 36px; }

  /* svh, а не vh: смысл выражения — «влезть в то, что реально видно».
     100vh в iOS — большой вьюпорт (адресная строка спрятана), поэтому
     вычитание 230px под шапку не спасало: низ рамки вместе с полосой
     переключения юрисдикций уезжал под адресную строку. */
  .legal-cosmos {
    height: min(620px, calc(100vh - 230px));
    height: min(620px, calc(100svh - 230px));
    min-height: 480px;
    border-radius: 14px;
  }

  /* Sun: меньше на мобильном root */
  .legal-cosmos[data-screen="root"] .lg-sun {
    width: 96px;
    height: 96px;
    top: calc(78% - 48px);
    left: calc(50% - 48px);
  }
  .lg-sun-label {
    font-size: 10px;
    bottom: -22px;
    letter-spacing: 0.16em;
  }
  .legal-cosmos[data-screen="focus"] .lg-sun {
    width: 44px;
    height: 44px;
    top: 12px;
    right: 12px;
  }
  /* Подпись центрируется по солнцу (translateX(-50%)) и с nowrap
     занимает ~85px — у правого края рамки её хвост срезал overflow. */
  .legal-cosmos[data-screen="focus"] .lg-sun-label {
    left: auto;
    right: 0;
    transform: none;
    text-align: right;
  }

  /* Root: 5 планет — компактнее, чуть тесная дуга для узких экранов */
  .lg-arc-planet {
    width: 96px;
    height: 96px;
  }
  .lg-arc-planet-orb {
    width: 70px;
    height: 70px;
  }
  .lg-arc-planet-label { margin-top: 8px; }
  .lg-arc-planet-name { font-size: 10px; letter-spacing: 0.1em; }
  .lg-arc-planet-meta { font-size: 8.5px; letter-spacing: 0.06em; }

  /* Чуть-чуть свести дугу в более центральную, чтобы не упёрлось в края */
  .lg-arc-planet:nth-of-type(1) { top: 32%; left: 16%; }   /* Russian */
  .lg-arc-planet:nth-of-type(2) { top: 18%; left: 31%; }   /* Laos */
  .lg-arc-planet:nth-of-type(3) { top: 12%; left: 50%; }   /* Thailand */
  .lg-arc-planet:nth-of-type(4) { top: 18%; left: 69%; }   /* Europe */
  .lg-arc-planet:nth-of-type(5) { top: 32%; left: 84%; }   /* USA */

  .lg-root-hint {
    font-size: 9px;
    bottom: 10px;
    letter-spacing: 0.14em;
    padding: 0 12px;
    text-align: center;
  }
  .lg-arc-orbit {
    width: 80%;
    height: 76%;
    top: 30%;
  }

  /* Focus: уже в @media 980 одна колонка, дополняем мобильными нюансами.
     grid-template-rows из legal.css даёт `auto 1fr`, а автоматический
     минимум трека 1fr равен размеру содержимого — строка со списком
     компаний вырастала до 563px внутри рамки в 558px с overflow:hidden,
     и четыре компании из семи просто срезались без всякого скролла.
     minmax(0,1fr) снимает этот минимум, и список снова может скроллиться. */
  .lg-focus-screen {
    padding: 18px 14px 80px;
    gap: 14px;
    grid-template-rows: auto minmax(0, 1fr);
  }
  .lg-focus-hero { gap: 12px; }
  .lg-focus-hero-orb {
    width: 140px !important;
    height: 140px !important;
  }
  .lg-focus-hero-name { font-size: 18px; letter-spacing: 0.06em; }
  .lg-focus-hero-meta { font-size: 9.5px; letter-spacing: 0.14em; }
  .lg-focus-hero-desc { font-size: 12px; line-height: 1.45; max-width: 100%; }
  .lg-focus-hero-stats { gap: 12px; }
  .lg-focus-hero-stat strong { font-size: 18px; }
  .lg-focus-hero-stat span { font-size: 9px; }

  /* Children grid: на мобильном 2 колонки, на узком — 1 */
  .lg-focus-children {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-right: 0;
    /* min-height:0 обязателен: grid-элемент иначе не сжимается ниже
       содержимого и overflow-y:auto остаётся декоративным. */
    min-height: 0;
    max-height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lg-child-card {
    padding: 10px 10px 9px;
    gap: 6px;
    border-radius: 12px;
  }
  .lg-child-card-orb {
    width: 52px !important;
    height: 52px !important;
  }
  .lg-child-card-name { font-size: 12px; }
  .lg-child-card-meta { font-size: 9px; letter-spacing: 0.12em; }
  .lg-child-card-tag { font-size: 8px; padding: 2px 6px; }
  /* is-main по-прежнему full-width */
  .lg-child-card.is-main {
    grid-column: 1 / -1;
    padding: 12px 14px;
    gap: 12px;
  }
  .lg-child-card.is-main .lg-child-card-orb {
    width: 64px !important;
    height: 64px !important;
  }
  .lg-child-card.is-main .lg-child-card-name { font-size: 14px; }

  /* Bottom strip — компактнее, не залезает на children */
  .lg-focus-strip {
    bottom: 10px;
    padding: 6px 12px;
    gap: 14px;
  }
  .lg-strip-planet-orb {
    width: 26px;
    height: 26px;
  }
  .lg-strip-planet-label {
    font-size: 8px;
    letter-spacing: 0.1em;
  }

  /* ============================================================
     SIDE-PANEL — full-width на мобильном
     ============================================================ */
  .side-panel {
    width: 100vw;
    max-width: 100vw;
    border-left: none;
    /* 100vh в iOS Safari — это БОЛЬШОЙ вьюпорт (адресная строка
       спрятана). Пока она видна, низ панели на ~90px ниже реально
       видимого: кнопка «Сохранить» в конце формы недостижима.
       dvh следит за фактической высотой. */
    height: 100dvh;
  }
  .side-panel-header {
    padding: 14px 18px;
  }
  .side-panel-close {
    width: 44px;
    height: 44px;
  }
  .side-panel-body {
    padding: 18px 18px calc(36px + env(safe-area-inset-bottom));
  }

  /* Карточки в side-panel: компактнее */
  .emp-card-portrait img {
    width: 96px !important;
    height: 96px !important;
  }
  .emp-card-name { font-size: 18px; }
  .emp-card-title { font-size: 13px; }
  .emp-card-bio { font-size: 13px; }

  /* ============================================================
     TOAST — выше bottom чтобы не залазить на bottom-bar браузера
     ============================================================ */
  .toast {
    right: max(16px, env(safe-area-inset-right));
    /* поднимаем над домашней полоской iPhone */
    bottom: calc(16px + env(safe-area-inset-bottom));
    left: max(16px, env(safe-area-inset-left));
    text-align: center;
    font-size: 13px;
    padding: 12px 14px;
  }

  /* Скрытие decorative cosmos звёзд для производительности */
  .cosmos-stars-far,
  .cosmos-stars-near.layer-c {
    opacity: 0.4;
  }
} /* /max-width 768 */


/* ============================================================
   Очень узкие экраны (iPhone SE и подобные) — 480px и ниже
   ============================================================ */
@media (max-width: 480px) {

  /* Lego смещается чтобы не залезал на view-switcher */
  .app-brand-logo {
    width: 32px;
    height: 32px;
  }

  /* Sync-indicator: ещё компактнее, можно убрать слово "Sheets" */
  .sync-indicator { padding: 4px 8px; }
  .sync-indicator .sync-label { font-size: 9.5px; }

  /* Mission KPI: 1 колонка для самых узких */
  .mission-kpi { grid-template-columns: 1fr; }

  /* Legal cosmos — ещё меньше высота для удобства скролла */
  .legal-cosmos {
    height: min(560px, calc(100vh - 200px));
    height: min(560px, calc(100svh - 200px));
    min-height: 460px;
  }

  /* 5 root planets — уплотним сильнее.
     Подпись не ограничена шириной планеты: «РОССИЙСКИЙ» на 9px с
     трекингом занимал ~158px при габарите планеты 84px и печатался
     поверх соседних орбов. Даём подписи ширину планеты и перенос. */
  .lg-arc-planet { width: 84px; height: 84px; }
  .lg-arc-planet-orb { width: 60px; height: 60px; }
  .lg-arc-planet-label { width: 84px; margin-top: 6px; }
  .lg-arc-planet-name {
    font-size: 9.5px;
    letter-spacing: 0.02em;
    white-space: normal;
    line-height: 1.15;
    word-break: break-word;
  }
  .lg-arc-planet-meta { display: none; }   /* экономим место */

  /* Солнце выше: на 360px подсказка внизу переносится в три строки
     и сталкивалась с подписью «MF GROUP» под солнцем. */
  .legal-cosmos[data-screen="root"] .lg-sun {
    top: calc(70% - 42px);
    left: calc(50% - 42px);
    width: 84px;
    height: 84px;
  }
  .lg-root-hint { bottom: 8px; font-size: 8.5px; letter-spacing: 0.1em; padding: 0 8px; }

  /* Children — 1 колонка на самых узких */
  .lg-focus-children { grid-template-columns: 1fr; }
  .lg-child-card { flex-direction: row; text-align: left; gap: 12px; padding: 10px 12px; }
  .lg-child-card-body { align-items: flex-start; }
  .lg-child-card-orb { width: 46px !important; height: 46px !important; }
  .lg-child-card.is-main { flex-direction: row; }

  /* Bottom strip. Подписи НЕ скрываем: без них пять одинаковых кружков
     по 22px — единственное, что их различало, была надпись. Тесноту
     решаем скроллом полосы, а не удалением информации. */
  .lg-focus-strip {
    gap: 6px;
    padding: 5px 8px;
    max-width: calc(100% - 24px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lg-focus-strip::-webkit-scrollbar { display: none; }
  .lg-strip-planet { flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 2px 4px; }
  .lg-strip-planet-orb { width: 22px; height: 22px; }
  .lg-strip-planet-label { display: block; font-size: 7.5px; letter-spacing: 0.06em; }

  /* Hero — меньше */
  .lg-focus-hero-orb { width: 120px !important; height: 120px !important; }
  .lg-focus-hero-name { font-size: 16px; }

  /* Mission planets чуть меньше */
  .mission-stage .planet img { width: 72px !important; }
  .mission-stage { gap: 22px; padding-top: 22px; }
}

/* ============================================================
   Reduced motion — отключить декоративные анимации
   ============================================================ */
@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .lg-sun-core,
  .lg-focus-hero-orb,
  .sync-indicator .sync-dot.live {
    animation: none !important;
  }
}

/* ============================================================
   SHIP · «По отсекам» (v4) — мобильная логика «баннер + список».
   На телефоне корабль = декоративный баннер (подписи и аватары поверх
   скрыты — они «ехали»), а интерактив вынесен под него (ship.js →
   .ship-mobile-extras): сворачиваемый список экипажа по группам +
   чипы направлений. Боковые навигации на мобильной скрыты.
   ============================================================ */
.ship-mobile-extras { display: none; }

@media (max-width: 768px) {
  /* Корабль → баннер. :has(.compartment) срабатывает только во вкладке
     «По отсекам» (на графе подчинения компартментов нет). */
  .ship-stage:has(.compartment) {
    aspect-ratio: auto;
    height: 190px;          /* было 300px: до первого имени в списке
                               экипажа приходилось мотать треть экрана */
    margin-bottom: 2px;
  }
  /* object-fit:contain вписывал весь силуэт по меньшей стороне:
     при пропорции 1060/1484 из 366px ширины оставалось 214px картинки
     и по 76px пустого фона с боков. Баннеру нужен кадр, а не миниатюра
     всего корабля целиком. */
  .ship-stage:has(.compartment) .ship-hull {
    object-fit: cover;
    object-position: 50% 14%;
  }
  .ship-stage:has(.compartment) .compartment { display: none !important; }
  .ship-stage:has(.compartment) .colony-marker { display: none !important; }
  /* Легенда уровней НЕ прячется: цветные ободки аватаров в мобильном
     списке экипажа остались, а расшифровка к ним пропадала — человек
     видел золотой/бирюзовый/серый и не знал, что это. */
  .ship-stage:has(.compartment) ~ .ship-legend {
    margin-top: 12px;
    font-size: 10px;
    gap: 8px 12px;
  }

  .ship-mobile-extras { display: block; margin-top: 6px; }

  .ship-rm-cap {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--text-muted);
    margin: 16px 4px 8px;
  }

  /* Группы-аккордеоны */
  .ship-rm-group {
    border: 1px solid var(--bg-line);
    border-radius: 14px;
    background: var(--bg-surface);
    margin-bottom: 8px;
    overflow: hidden;
  }
  .ship-rm-head {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 13px 14px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    min-height: 48px;
  }
  .ship-rm-gname { font-weight: 600; font-size: 14px; flex: 1; text-align: left; }
  .ship-rm-count {
    font-size: 11px; color: var(--text-muted);
    background: var(--bg-line-soft); border-radius: 999px;
    min-width: 22px; height: 20px; display: inline-flex;
    align-items: center; justify-content: center; padding: 0 6px;
  }
  .ship-rm-chev { width: 16px; height: 16px; color: var(--text-muted); transition: transform var(--t-normal); flex: none; }
  .ship-rm-group.open .ship-rm-chev { transform: rotate(180deg); }
  .ship-rm-body { display: none; padding: 4px 8px 8px; }
  .ship-rm-group.open .ship-rm-body { display: block; }

  .ship-rm-person {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    padding: 8px;
    background: transparent;
    color: var(--text-primary);
    cursor: pointer;
    border-radius: 10px;
    text-align: left;
  }
  .ship-rm-person:active { background: var(--bg-line-soft); }
  .ship-rm-person img {
    width: 40px; height: 40px; border-radius: 50%;
    object-fit: cover; object-position: center 22%;
    border: 2px solid var(--level-c-level); flex: none;
  }
  .ship-rm-person.level-founder img { border-color: var(--level-founder); }
  .ship-rm-person.level-trial img { border-color: var(--level-trial); }
  .ship-rm-info { display: flex; flex-direction: column; min-width: 0; }
  .ship-rm-name { font-size: 14px; font-weight: 600; }
  .ship-rm-title { font-size: 11.5px; color: var(--text-muted); }

  /* Чипы направлений + «О компании» */
  .ship-bays-mobile {
    display: flex; flex-wrap: wrap; justify-content: center;
    gap: 8px; max-width: 100%; margin: 0 auto; padding: 0 4px;
  }
  .ship-bay-chip {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 9px 14px; min-height: 44px;
    font-size: 12.5px; font-weight: 600; color: var(--text-primary);
    background: rgba(13, 22, 45, 0.82);
    border: 1px solid var(--c, rgba(125, 211, 255, 0.3));
    border-radius: var(--r-pill); cursor: pointer;
  }
  .ship-bay-chip:active { transform: scale(0.97); }
  .ship-bay-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
}

/* ============================================================
   SHIP · «По операционке» — мобильная адаптация (ранее отсутствовала)
   Главная причина поломки: #ops-stage имел zoom:1.32 → горизонтальный
   overflow на телефоне. Снимаем zoom и ужимаем внутренние блоки.
   ============================================================ */
@media (max-width: 768px) {
  #ops-stage {
    zoom: 1;                    /* убираем десктопный апскейл 132% */
    max-width: 100%;
    padding: 4px 0 40px;
  }

  /* Тулбар: режимы и поиск друг под другом, во всю ширину */
  .ops-toolbar { gap: 8px; margin: 4px 0 12px; }
  .ops-lens { width: 100%; }
  .ops-lens button { flex: 1; padding: 9px 8px; font-size: 12.5px; }
  .ops-search { width: 100%; min-width: 0; flex-basis: 100%; }
  .ops-search input { font-size: 16px; padding: 11px 12px 11px 36px; } /* 16px = без авто-зума iOS */

  .ops-legend { font-size: 11px; gap: 10px; }

  /* Секторы-направления (root) */
  .ops-sector { gap: 12px; padding: 14px 14px; border-radius: 15px; }
  .ops-art-wrap { flex: none; }
  .ops-art-wrap .ops-art { width: 52px !important; height: 52px !important; }
  .ops-sec-name { font-size: 17px; }
  .ops-sec-tag { font-size: 12px; }
  .ops-sec-stats { gap: 12px; margin-top: 9px; }
  .ops-sec-crew { display: none; }   /* стопка аватаров уводила ширину — прячем на телефоне */
  .ops-go { display: none; }

  /* Focus: hero направления — вертикально */
  .ops-hero { flex-direction: column; text-align: center; gap: 14px; padding: 18px 16px; }
  .ops-hero-desc { max-width: 100%; }
  .ops-hero-stats { justify-content: center; flex-wrap: wrap; gap: 16px; }
  .ops-art-wrap { margin: 0 auto; }

  .ops-team { grid-template-columns: 1fr; }
  .ops-cards { grid-template-columns: 1fr; }

  /* Заголовок блока — даём имени место, прячем стопку аватаров */
  .ops-bhead { gap: 10px; padding: 13px 14px; }
  .ops-bname { font-size: 15px; }
  .ops-bsub { white-space: normal; }
  .ops-bmeta { gap: 8px; }
  .ops-hp { display: none; }

  /* Свитчер направлений снизу — компактнее, в 2+ ряда */
  .ops-switch { gap: 8px; margin-top: 22px; }
  .ops-sw { font-size: 12.5px; padding: 7px 12px 7px 7px; }

  /* People lens — карточка человека */
  .ops-mhead { gap: 10px; padding: 12px 13px; flex-wrap: wrap; }
  .ops-mcount { display: none; }
  .ops-member.open .ops-mcount { display: none; }

  /* Drawer — на весь экран */
  .ops-drawer { width: 100%; max-width: 100%; border-left: none; }
  .ops-drbody { padding: 16px 18px 40px; }

  .ops-foot { font-size: 11px; }
}

@media (max-width: 480px) {
  .ops-sec-stats { font-size: 11.5px; }
  .ops-sec-stats b { font-size: 13px; }
  .ops-sec-name { font-size: 16px; }
  .ops-hero-name { font-size: 20px; }
}

/* ============================================================
   ЛАНДШАФТ ТЕЛЕФОНА — 844×390 и подобные.
   Брейкпоинт «≤768px по ширине» в горизонтальной ориентации не
   срабатывает вовсе: ширина 844 > 768, и включается ДЕСКТОПНАЯ
   шапка высотой 93px из 390 — четверть экрана. Переключатель
   вкладок при этом обрывается на «Кодексе», а поиск, индикатор
   синка и KPI уезжают за 1600px без возможности доскроллить
   (body{overflow-x:hidden} в tokens.css глобален, не в медиа).
   Условие по ВЫСОТЕ, а не по ширине — потому что не хватает
   именно высоты.
   ============================================================ */
@media (max-height: 500px) and (orientation: landscape) {
  .app-header {
    flex-wrap: wrap;
    gap: 8px;
    padding: 6px max(12px, env(safe-area-inset-right)) 6px max(12px, env(safe-area-inset-left));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: linear-gradient(180deg, rgba(10,14,26,0.98) 0%, rgba(10,14,26,0.94) 100%);
  }
  .app-brand-logo { width: 30px; height: 30px; }
  .app-brand-text span { display: none; }

  .view-switcher {
    order: 10;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    flex-wrap: nowrap;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 22px), transparent 100%);
  }
  .view-switcher::-webkit-scrollbar { display: none; }
  .view-switcher button {
    flex-shrink: 0;
    white-space: nowrap;
    padding: 7px 12px;
    font-size: 12px;
    min-height: 38px;      /* в ландшафте высота дороже пальца */
    scroll-snap-align: center;
  }
  .app-header-right { margin-left: auto; gap: 8px; }

  /* Боковые навигации в ландшафте телефона занимают половину экрана */
  .side-nav { display: none !important; }
  .app-main { padding: 10px 12px 24px; }

  /* Операционка в ландшафте: десктопный апскейл 132% при высоте 390px
     превращает карточки направлений в лестницу из полутора элементов.
     Ниже 768px zoom уже снят, здесь — то же по высоте. */
  #ops-stage { zoom: 1; }

  /* Полноэкранные слои меряются по фактической высоте */
  .side-panel { height: 100dvh; }
  .sp-modal-body, .tkx { max-height: calc(100dvh - 16px); margin: 8px auto; }
}

/* ============================================================
   ПОИСК НА ТЕЛЕФОНЕ (23.09.2026)

   Поиск по сайту стал главным входом «найти что угодно», а на
   телефоне его не было вовсе (`display: none`). Теперь в шапке —
   значок; нажатие попадает в само поле (оно растянуто по значку и
   прозрачно — тот же приём, что у ноутбучной шапки в ui.css), и по
   фокусу коробка раскрывается во всю ширину поверх страницы, а выдача
   идёт под ней до низа экрана.

   Отдельной кнопки и второго поля нет намеренно: фокус в поле ставит
   сам палец, и клавиатура iOS открывается только так. Закрывает
   оверлей нажатие мимо (core/search.js, `pointerdown`) и выбор
   результата.

   `position: fixed` здесь честный: на этих ширинах у шапки снят
   `backdrop-filter` (выше), а с ним фиксированный потомок считал бы
   своей рамкой шапку, а не экран.
   ============================================================ */
@media (max-width: 768px), (max-height: 500px) and (orientation: landscape) {
  .search-box {
    display: flex;
    position: relative;
    flex-shrink: 0;
    justify-content: center;
    min-width: 0;
    width: 36px;
    height: 36px;
    padding: 0;
  }
  .search-box .search-icon { position: relative; z-index: 1; pointer-events: none; }
  .search-box input {
    position: absolute;
    inset: 0;
    width: 100%;
    min-height: 0;
    padding: 0 12px 0 38px;
    font-size: 16px;
    opacity: 0;
  }
  .search-box:focus-within {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    height: 48px;
    justify-content: flex-start;
    padding-left: 13px;
    z-index: calc(var(--z-overlay) + 1);
    background: var(--bg-surface);
  }
  /* Затемнение — настоящий слой (`.search-shade`, core/search.js), а
     не тень коробки: тень не ловит касание, и нажатие «мимо, чтобы
     закрыть» открывало то, что под ней. Слой лежит ВНУТРИ коробки с
     z-index −1 — над страницей и шапкой, но под полем и выдачей. Он же
     перекрывает фон коробки, поэтому фон и рамку несёт само поле. */
  .search-box:focus-within .search-shade {
    display: block;
    position: fixed;
    inset: 0;
    z-index: -1;
    background: rgba(5, 8, 16, 0.72);
  }
  .search-box:focus-within input {
    opacity: 1;
    background: var(--bg-surface);
    border-radius: var(--r-md);
    box-shadow: 0 0 0 1px var(--accent-cyan), 0 0 0 4px rgba(63, 224, 197, 0.15);
  }
  .search-box:focus-within .search-pop {
    left: 0;
    right: 0;
    width: auto;
    max-height: calc(100dvh - 80px);
  }
}

/* Палец, а не мышь: значок и строки выдачи — 44px. Меряется только с
   эмуляцией касания (GOTCHAS: «тач-цели»). */
@media (pointer: coarse) {
  .search-opt { min-height: 44px; }
}
@media (pointer: coarse) and (max-width: 768px), (pointer: coarse) and (max-height: 500px) and (orientation: landscape) {
  .search-box:not(:focus-within) { width: 44px; height: 44px; }
}