/* ============================================================================
   «Понятное дело» — Адаптивный слой (responsive.css)
   ----------------------------------------------------------------------------
   Подключать ПОСЛЕ tailwind.css (доопределяет утилиты на узких ширинах).
   Desktop-first: всё ниже — max-width оверрайды поверх принятого десктопа.

   Брейкпоинты (по контенту, не по устройствам):
     ≤1023.98  планшет        — .ed-track 9→3×3, метрики 4→2×2, section-num↓
     ≤767.98   большой телефон — .ed-now/callout в стопку, ряды действий wrap
     ≤479.98   телефон         — track→свайп, hero clamp, шапка без email, граф-компакт

   Правила, требующие hook-класса из разметки, помечены  (V#) — см. view-patches.md.
   Fallback-правила (работают без правки разметки) помечены  /* fallback */.
   ============================================================================ */

/* ─── 0 · Сквозные нормы (все ширины) ──────────────────────────────────── */

html { -webkit-text-size-adjust: 100%; }

/* Длинные русские слова / URL не рвут лейаут. break-word (не anywhere) +
   переносы по слогам там, где есть lang="ru" (V1). */
h1, h2, h3, h4,
.ed-name, .ed-section-title, .ed-sub-title, .ed-callout-title, .ed-now-title {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* Анти-overflow для тяжёлого контента. */
img, svg, video, canvas, table, pre { max-width: 100%; }

/* ── Легенда статусов (.ed-legend) — страховка по неопределённым токенам ──
   В @theme нет --color-icon / --color-graphite, на которые ссылаются
   .ed-legend-label / .ed-legend-item → цвет падал в наследуемый чёрный.
   Корневой фикс — добавить токены в @theme (см. SCREEN-BUGS.md); это —
   подстраховка, чтобы легенда была приглушённой даже без правки темы. */
.ed-legend-label { color: #6b7280; }
.ed-legend-item  { color: #52525c; }
.ed-legend-glyph { width: 16px; }     /* serif ◐ не поджимается на узком экране */

/* ── Значок монеты в пилюле остатка (PE-852 → PE-930) ─────────────────────
   Единицу измерения в шапке несёт значок: слова «монет» в пилюле нет ни на одной ширине
   (решение владельца 17.08), полное слово живёт в разделе «Баланс» и в ценниках.

   Значок — SVG, потому что текстовый символ ◎ (U+25CE) отсутствует в Inter: его рисовал
   системный запасной шрифт (Roboto/Noto на Android, Apple Symbols на iOS), а тот ставит кружок
   по СВОЕЙ середине — около половины x-height, — тогда как прописные цифры центрируются по
   половине высоты прописной. Разница и давала перекос, причём разный на разных устройствах:
   верстать по центру символ, который мы не выбираем, невозможно. У SVG геометрия наша.

   Бокс в `em` — связь с кеглем числа сохраняется, если кегль пилюли когда-нибудь поменяется.
   `vertical-align: -0.14em`: центр цифр Inter стоит на 0.36em над базовой линией, центр бокса
   высотой 1em — на 0.5em, значит бокс надо опустить на 0.36 − 0.5 = −0.14em. НЕ `middle` — это
   выравнивание по половине x-height (≈0.25em), значок уехал бы вниз, просто на другую величину;
   и НЕ подгонка `margin-top`/`position: relative` — она лечит один экран и разъезжается на другом.
   `margin-left` 3px (было 2px у символа): у глифа внутри его бокса был свой боковой пробел, у SVG
   его нет, и на 2px значок липнет к цифре.

   Цвет акцентный, а не приглушённый (просьба дизайнера 14.08): значок здесь не украшение — он
   НЕСЁТ ЕДИНИЦУ ИЗМЕРЕНИЯ вместо слова, то есть смысл, и обязан держать не меньше 3:1 к фону.
   `--accent-text` определён в обеих темах, `currentColor` подхватывает нужный сам.

   Правило БАЗОВОЕ, вне медиа-запроса, и это обязательное условие: SVG — replaced-элемент, без
   заданных размеров браузер рисует его в дефолтных 300×150px и кластер шапки разорвало бы на
   всех ширинах, где правило не действует. */
header .hdr-coin-mark {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-left: 3px;
  vertical-align: -0.14em;
  color: var(--accent-text);
}

@media (max-width: 767.98px) {
  /* На мобайле убираем горизонтальный «дребезг» под адресной строкой. */
  html, body { overflow-x: hidden; }
  /* Тач-фидбэк без серой вспышки iOS. */
  a, button, [role="button"], summary { -webkit-tap-highlight-color: transparent; }
}

/* ════════════════════════════════════════════════════════════════════════
   ПЛАНШЕТ  ≤1023.98
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1023.98px) {

  /* ── Прогресс-полоса: 9 → 3×3 ─────────────────────────────────────────
     PE-352: 9 этапов раскладываются ровно 3×3 на планшете (было 8→4×2).
     hairline-gap (gap:1px + background:silver) сохраняется автоматически. */
  .ed-track {
    grid-template-columns: repeat(3, 1fr);
  }
  .ed-track-step { min-height: 88px; }

  /* ── Hero-метрики: 4 → 2×2 ─────────────────────────────────────── (V2) */
  .ed-metrics { grid-template-columns: repeat(2, 1fr) !important; gap: 20px 16px !important; }

  /* ── Section head: ужимаем огромную цифру ───────────────────────────── */
  .ed-section { margin-top: 44px; }
  .ed-section-head { gap: 18px; }
  .ed-section-num { font-size: 72px; }
  .ed-section-title { font-size: 32px; }
}

/* ════════════════════════════════════════════════════════════════════════
   БОЛЬШОЙ ТЕЛЕФОН  ≤767.98
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 767.98px) {

  /* ── Формы: iOS-анти-zoom ──────────────────────────────────────────────
     PE-264: правило переехало в application.css (грузится ВСЕМИ layout'ами,
     вкл. публичный landing — responsive.css туда не подключён) + покрывает
     Tom-Select search-input. Единый источник правды. Здесь больше не дублируем. */

  /* ── Hero ─────────────────────────────────────────────────────────────
     text-6xl (60px) держался и здесь → слово шире вьюпорта. Гасим утилиту. */
  .ed-name {
    font-size: clamp(30px, 9vw, 56px) !important;
    line-height: 1.0;
  }

  /* ── CTA-баннер «Сейчас»: ряд → стопка ───────────────────────────────── */
  .ed-now {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 20px;
    align-items: start;
  }
  .ed-now-title { font-size: 23px; line-height: 1.2; }
  .ed-now-cta { width: 100%; }                /* CTA на всю ширину, крупный тап */
  .ed-now::before { width: 4px; }

  /* ── Open-questions callout: 220px|1fr → стопка ──────────────────────── */
  .ed-callout { padding: 18px 18px 20px; }
  .ed-callout-head { flex-wrap: wrap; }
  .ed-callout-item {
    grid-template-columns: 1fr;
    gap: 4px;
    padding: 10px 0;
  }
  .ed-callout-area { padding-top: 0; }
  .ed-callout-count { font-size: 30px; }

  /* ── Section head: цифра+заголовок+статус в узкую колонку ────────────── */
  .ed-section-head {
    gap: 14px;
    align-items: center;
    padding-bottom: 12px;
  }
  .ed-section-num { font-size: 54px; line-height: 0.9; }
  .ed-section-title { font-size: 24px; line-height: 1.1; }
  .ed-bignum { font-size: 40px; }   /* статистика hero ниже индекса секции — иерархия */
  .ed-section-purpose { font-size: 12.5px; margin-top: 4px; }
  .ed-section-status-text { font-size: 11px; } /* PE-338 C2: iOS-floor 11px (был 10) */
  .ed-section-content { padding-top: 18px; gap: 16px; }
  .ed-section--current .ed-section-content { padding-top: 20px; }

  /* ── Sub-блоки: шапка «заголовок + действия» в стопку ────────────────── */
  .ed-sub-head { flex-wrap: wrap; gap: 8px; align-items: baseline; }
  .ed-sub-title { font-size: 20px; }
  /* действия (✨ Запустить + meta) встают под заголовок, прижаты влево, не растянуты */
  .ed-sub-actions { width: 100%; justify-content: flex-start; }

  /* ── AI-trigger card: текст над кнопкой, кнопка на всю ширину ──── (V3) */
  .ai-trigger > .flex { flex-direction: column; align-items: stretch; gap: 14px; }
  .ai-trigger .shrink-0 { align-items: stretch; }
  .ai-trigger .btn-primary { width: 100%; }
  /* fallback: если класс .ai-trigger не проставлен — ловим жёлтую AI-карточку
     по её фоновой утилите (bg-genius-100 на .card). */
  .card.bg-genius-100 > .flex.justify-between { flex-wrap: wrap; }      /* fallback */

  /* ── Hairline-ловушки (_pitfalls) и любые details — ок, не трогаем ───── */

  /* ── Метрики: на телефоне 2×2 сохраняем (унаследовано от ≤1023) ──────── */

  /* ── Шапка приложения: меньше воздуха ────────────────────────────────── */
  /* PE-460: + горизонтальный padding ужат (px-6→.75rem) — запас против overflow
     chrome-кластера на узких экранах (вплоть до 320px). */
  header .mx-auto.max-w-6xl { padding-top: 12px; padding-bottom: 12px; padding-left: .75rem; padding-right: .75rem; }  /* fallback */
  main.mx-auto { padding-top: 24px; padding-bottom: 40px; }               /* fallback */

  /* ── PE-460: правый кластер шапки — icon-only на мобиле (анти-overflow) ──
     Кластер `[💬 Спросить][Баланс: X ₽][RU EN][аватар]` шире вьюпорта ≤393px
     (chrome-кластер уходит за экран, аватар срезается). Скрываем текст-лейблы
     кнопок (остаётся 💬-иконка + сумма-пилюля), ужимаем gap. aria-label на
     ссылках сохраняет доступное имя для SR (см. application.html.erb).
     `header `-префикс ОБЯЗАТЕЛЕН: перебивает tailwind `.gap-3` СПЕЦИФИЧНОСТЬЮ
     (0,2,0)>(0,1,0), НЕ source-order (хрупко к ребилду бандла). Десктоп ≥768 — полные лейблы. */
  header .hdr-label { display: none; }
  /* PE-930: правила значка монеты здесь больше нет — он виден на всех ширинах, поэтому его стиль
     переехал в секцию 0 «Сквозные нормы» (там же и причина: SVG без размеров рисуется 300×150px).
     Пилюля остатка слова не содержит вовсе, так что скрывать в ней нечего; `.hdr-label` выше
     по-прежнему прячет подписи соседних пилюль — «Спросить» и «Тарифы». */
  /* PE-852: пилюли кластера ужимаются по бокам. Пилюля остатка стала шире, когда рубли сменились
     монетами: шестизначное «116 020» достижимо в первый день годового тарифа, и на 360px кластер
     перестал влезать — аватар вылезал за экран на 8px (замер смока шага 9; видно не было только
     потому, что на body стоит overflow-x: hidden). Режем боковые паддинги (16px → 10px), а не
     выкидываем пилюлю: три по 12px дают втрое больше нужного, и ни один вход из шапки не пропадает. */
  header :is(.hdr-pricing, .pe-tap.rounded-full) { padding-left: 10px; padding-right: 10px; }
  /* PE-465 → PE-894: на телефоне бренд в шапке кабинета = только знак, текст прячем — иначе кластеру
     не хватает места и аватар (единственный вход в кабинет и выход) уезжает за правый край; наружу
     это не видно, потому что body{overflow-x:hidden} глушит симптом.
     Порог поднят с 479.98 до 767.98: имя выросло (Source Serif 4 20px, «Meet Your Business» 172px)
     и на 480/en кластер всё ещё вылезал на 23px. Селектор — .pe-wordmark: utility-классы, по которым
     правило работало раньше, заменил класс локапа. */
  header .pe-wordmark { display: none; }
  /* PE-690: 6px → 8px — при зонах нажатия 24px выступ 4px с каждой стороны,
     8px гарантируют, что зоны соседних интерактивов не пересекаются (WCAG 2.5.8). */
  header .hdr-actions { gap: .5rem; }
}

/* ════════════════════════════════════════════════════════════════════════
   ТЕЛЕФОН  ≤479.98
   ════════════════════════════════════════════════════════════════════════ */
@media (max-width: 479.98px) {

  /* ── Прогресс-полоса → горизонтальная свайп-лента ────────────────────── */
  .ed-track {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 78%;            /* видно ~1.3 этапа — ясно, что листается */
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ed-track::-webkit-scrollbar { display: none; }
  .ed-track-step {
    scroll-snap-align: start;
    min-height: 96px;                  /* ≥ touch-target */
  }
  .ed-track-status { font-size: 11px; }   /* был 9.5px — ниже iOS-floor */

  /* ── Hero ещё компактнее ─────────────────────────────────────────────── */
  .ed-name { font-size: clamp(28px, 10.5vw, 42px) !important; }

  /* ── Шапка: на узком мобиле бренд = только лого-иконка ──────────────────── (fallback) */
  /* PE-894: правило переехало в блок ≤767.98 и переписано на .pe-wordmark — прежний селектор
     .text-lg.font-extrabold умер вместе с utility-классами, которые заменил класс локапа. */

  /* ── Section: цифра ещё меньше, статус-слово можно спрятать (глиф остаётся) */
  .ed-section-num { font-size: 46px; }
  .ed-section-title { font-size: 22px; }
  .ed-bignum { font-size: 34px; }   /* статистика hero ниже индекса секции 46px */

  /* ── Callout-count не доминирует ─────────────────────────────────────── */
  .ed-callout-title { font-size: 18px; }
}

/* ── PE-852: правило «прятать текст бренда до 560px» СНЯТО после влития master ───────────────
   Оно решало реальную задачу: пилюля остатка стала шире с переходом на монеты, и в полосе
   480–509px шестизначное число («116 020» достижимо в первый день годового тарифа) выталкивало
   имя продукта на вторую строку. Но PE-894 переписал шапку на класс локапа `.pe-wordmark` и
   прячет имя уже с 767.98 — селектор по utility-классам не совпадал больше ни на одной ширине
   (проверено на 360/393/480/500/560/768/1280, находка приёмки шага 12). Правило-призрак хуже
   отсутствующего: комментарий обещает порог 560, а работает 768. Поведение обеспечивает PE-894. */

/* ════════════════════════════════════════════════════════════════════════
   JOB GRAPH — отдельный мобильный режим  (css/job_graph.css)
   Подключается на экране графа. Канвас непригоден для точного редактирования
   на телефоне — даём компактный режим «просмотр + быстрые действия».
   ════════════════════════════════════════════════════════════════════════ */

/* dvh вместо vh — не прыгает под адресной строкой iOS/Android. */
@supports (height: 100dvh) {
  .jg { height: 100dvh; }
}

@media (max-width: 767.98px) {

  /* ── Header графа: компактный, перенос разрешён ──────────────────────── */
  .jg-header {
    gap: 12px 16px; flex-wrap: wrap;
    align-items: center;
    padding: 12px 16px 10px;
  }
  .jg-h1 { font-size: 18px; }
  .jg-breadcrumb { font-size: 12px; }

  /* ── Тулбар: одна горизонтальная лента вместо 6 рядов ──────── (fallback)
     Без обёртки .jg-filters (V4) — делаем тулбар свайп-лентой: не громоздкая
     стопка, всё в одном ряду со скроллом. */
  .jg-toolbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 8px 16px;
    gap: 8px;
  }
  .jg-toolbar::-webkit-scrollbar { display: none; }
  .jg-toolbar .search { width: 180px; }
  .jg-toolbar .eye { display: none; }      /* подписи density/focus/hover — режем шум */
  .jg-sep { display: none; }

  /* ── С обёрткой .jg-filters (V4): второстепенное прячем в поповер ────── */
  .jg-filters { position: relative; }
  .jg-filters > summary {
    list-style: none; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    height: 30px; padding: 0 12px; border-radius: 10px;
    background: var(--canvas); border: 1px solid var(--cloud);
    font-size: 13px; font-weight: 500; white-space: nowrap;
  }
  .jg-filters > summary::-webkit-details-marker { display: none; }
  .jg-filters[open] > summary { background: var(--ink); color: var(--canvas); border-color: var(--ink); }
  .jg-filters[open] > .jg-filters-body {
    position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
    display: flex; flex-direction: column; gap: 14px;
    width: min(86vw, 320px); padding: 16px;
    background: var(--canvas); border: 1px solid var(--cloud); border-radius: 12px;
    box-shadow: 0 12px 28px -10px rgba(0,0,0,.18);
  }

  /* ── Touch-target для сегментов/кнопок тулбара ───────────────────────── */
  /* PE-794: тач-таргет 44×44 — по ОБОИМ измерениям. Сначала подняли только
     высоту, и кнопки остались 27-31px шириной: три кнопки зума по 28px с
     зазором 1px — попасть в нужную было лотереей. */
  .jg-toolbar .seg a, .jg-toolbar .seg button {
    height: 44px; min-width: 44px; padding: 0 8px;
  }
  .jg-toolbar .seg { gap: 6px; padding: 3px; }
  .jg-toolbar .btn { height: 44px; min-width: 44px; }

  /* ── Минимап / легенда: на телефоне прячем (панорама — тач-драгом) ────── */
  .mm { display: none; }

  /* ── Рельса уровней уже, поверхность сдвинута ────────────────────────── */
  /* PE-794: ширина колонки уровней — через переменную; .jg-surface больше не
     сдвигается (сдвиг применяется в экранных координатах через transform),
     иначе базис расщепился бы на мобильном. */
  .jg { --rail-w: 92px; }
  /* В колонку 92px помещается только плитка и название уровня. Подсказка
     («мотивация; решение покрывает не полностью») переполняла строку и наезжала
     на соседнюю полосу — на телефоне она уступает место самой карте. */
  .lane-rail-inner { padding: 10px 8px; gap: 4px; }
  .lane-rail-row .lane-hint { display: none; }
  .lane-rail-row .lane-title { font-size: 12px; line-height: 1.15; }
  .lane-rail-row .lane-tile { width: 22px; height: 22px; font-size: 11px; }
  .lane-rail-row.is-empty .lane-rail-inner { padding: 0 8px; }
  /* Пометку «пусто» на узком экране не пишем: схлопнутая строка с приглушённым
     фоном сообщает то же самое, а название уровня важнее. */
  .lane-rail-row.is-empty .lane-empty { display: none; }
  .lane-rail-row.is-empty .lane-title { font-size: 11px; }
  .lane-title { font-size: 13px; }
  /* PE-794: iOS-floor 11px — на мобильном кегль был НИЖЕ, чем на десктопе. */
  .lane-hint  { font-size: 11px; }
  .lane-tile  { width: 26px; height: 26px; font-size: 12px; }

  /* ── Боковые панели редактора → фуллскрин-лист ───────────────────────── */
  .job-panel, .breaks-panel { width: 100%; }
  .jg:has(.job-panel) .mm,
  .jg:has(.breaks-panel) .mm { right: 20px; }   /* минимап и так display:none */
}

/* ════════════════════════════════════════════════════════════════════════
   СВЕРХУЗКИЕ  ≤359.98  (PE-677)
   ════════════════════════════════════════════════════════════════════════ */
/* ── PE-677 (приёмка a11y/mobile): пилюля «Тариф» была на 5px ниже соседних (29 vs 34) —
   у неё внутри иконка 15px, а у остальных текстовая строка с line-height 20px. Выравниваем
   по кластеру и заодно подтягиваем тач-таргет. */
header .hdr-pricing { min-height: 34px; }
/* ── PE-852: иконка-ценник не сжимается ──────────────────────────────────
   На 360px кластер шапки тесен, а флекс по умолчанию даёт содержимому сжиматься: SVG
   ужимался до НУЛЕВОЙ ширины (замер: 0×15), и пилюля выглядела пустым овалом — ровно тем,
   что комментарий в разметке обещает не допустить («на мобиле .hdr-label скрывается, без
   иконки осталась бы пустая пилюля»). Проявилось здесь: пилюля баланса стала шире, когда
   рубли сменились монетами (шестизначный остаток «116 020» достижим в первый день годового
   тарифа). Поймано смоком шага 9 на 360px. */
header .hdr-pricing svg { flex-shrink: 0; }

@media (max-width: 359.98px) {
  /* ── PE-677: пилюля «Тариф» уступает место аватару ──────────────────────
     Кластер шапки [💬][Тариф][Баланс][RU EN][аватар] на 320px перестаёт влезать:
     аватар срезается на 4px (виден только потому, что на body стоит overflow-x:hidden).
     Приёмка PE-677, smoke шаг 5. Ниже 360px убираем именно вход на страницу тарифа —
     он дублируется ссылкой из раздела «Подписка» кабинета, тогда как аватар (вход в
     кабинет) и баланс — навигация без альтернативы. Специфичность (0,2,0) как у
     соседних правил кластера. */
  header .hdr-pricing { display: none; }
}