/* ============================================================================
   mobile-extras.css — ДОБОР к mobile.css.

   Подключается в index.html СРАЗУ ПОСЛЕ mobile.css. Это не второй мобильный
   слой и не его дубль: каркас, нижняя навигация, чипы, карточки списка, шит,
   модалки и сетки экранов принадлежат mobile.css — здесь их нет.

   Здесь живёт ровно четыре темы, которые в mobile.css не закрыты:
     1. тач-цели, оставшиеся мельче 44px (задачи, чекбоксы, копирование, ✕);
     2. поля ввода: 16px + 44px как ОБЩЕЕ правило, а не по одному классу;
     3. графики: читаемый масштаб SVG за счёт прокрутки ВНУТРИ карточки;
     4. состояние body.kbd-open (см. mobile-kbd.js) — экранная клавиатура.

   Принцип непересечения. Там, где mobile.css уже что-то задал, здесь стоит
   min-height / min-width, а не height / width: большее значение выигрывает
   само собой, перебить чужое объявление такая запись не может. Где нужен
   именно другой параметр (отступ между строками, шрифт легенды) — берётся
   более узкий селектор, чтобы намерение читалось однозначно.

   Правила проекта соблюдаются: цвета только из токенов :root (своих хексов
   здесь нет вообще), тач-цели ≥44px и ≥8px между соседними, поля 16px,
   анимаций этот файл не добавляет.
   ========================================================================== */


/* ================================ МОБИЛЬНЫЙ ============================== */
/* Медиа-лист тот же, что в mobile.css, и тот же, что MOBILE_MQ в common.js:
   узкий экран ИЛИ лежащий телефон (низкая высота при ландшафте). */
@media (max-width:768px), (max-height:500px) and (orientation:landscape){

/* ---- 1. Тач-цели: «Задачи 30 дней» -------------------------------------- */
/* Строка задачи кликается целиком (onclick на .titem), поэтому 44px нужны
   именно ей, а не чекбоксу. Чекбокс остаётся визуально мелким — 22px. */
.titem{min-height:44px}
.titem .cb{min-width:22px;min-height:22px}

/* Строки шли впритык: две соседние цели без зазора — это промахи по пальцу.
   Селектор узкий (.titem лежит прямо в .taskcard), чужое ничего не задевает. */
.taskcard .titem + .titem{margin-top:8px}


/* ---- 2. Тач-цели: задачи и заметки внутри шита блогера ------------------- */
/* Разметка: #tasks > .task > input[type=checkbox] + span + button.delx
             #notes > .it   > .itbody + button.delx                        */
#tasks .task{min-height:44px}
#tasks .task + .task{margin-top:8px}

/* Нативный чекбокс — заменяемый элемент: его область нажатия равна его боксу,
   расширить её через padding или псевдоэлемент нельзя. Поэтому здесь только
   нижняя граница видимого размера; полноценные 44px требуют обернуть input в
   <label> в drawer.js (чужая зона — вынесено в отчёт). */
#tasks .task input[type=checkbox]{min-width:22px;min-height:22px}

/* ✕ удаления: область нажатия 44×44. Сам крестик мелкий и остаётся мелким —
   размер задаёт бокс кнопки и центрирование внутри него, а не размер глифа,
   поэтому font-size здесь не трогается. */
.delx{min-width:44px;min-height:44px}

/* Иконочные кнопки в шапке карточки: 44px есть, а зазор между ними был 6px. */
#drawer.sheet .dh .acts{gap:8px}


/* ---- 3. Тач-цели: DM-шаблоны -------------------------------------------- */
/* «⧉ Копировать» — единственная интерактивная вещь на карточке шаблона. */
.copybtn{min-height:44px;padding:10px 14px;font-size:13px}

/* Иконочная кнопка из styles.css (.dh .acts). В текущей разметке не
   встречается — правило заведено как страховка на будущее использование. */
.iconbtn{min-width:44px;min-height:44px}

/* Кнопки сегмент-контрола в модалке графика. */
.seg-ctrl button{min-height:44px}


/* ---- 4. Поля ввода ------------------------------------------------------ */
/* 16px — не вкусовое: на меньшем размере iOS Safari зумит страницу при фокусе.
   font-size отдельной строкой с низкой специфичностью, чтобы не спорить с
   поклассовыми правилами mobile.css (значение там то же самое). */
input,select,textarea{font-size:16px}

/* Высота — только для полей, у которых бокс и есть поле. Чекбоксы и радио
   исключены явно: min-height:44px раздул бы нативный чекбокс .task input
   до огромного квадрата. */
input:not([type=checkbox]):not([type=radio]),
select,
textarea{min-height:44px}

/* .fld в модалках, .rowin в шите и .hsearch в шапке уже получили 16px/44px
   поклассово в mobile.css — правило выше их не переопределяет, а страхует
   поля, до которых поклассовые селекторы не дотягиваются (например #q). */


/* ---- 5. Графики: читаемость вместо «уместить любой ценой» ---------------- */
/* Все графики рисуются как <svg viewBox="0 0 440 H" width="100%">. На 375px
   такой SVG сжимается ~в 1.2–1.5 раза вместе со всем текстом внутри (9–11px
   превращаются в 7–8px). Горизонтального переполнения нет — есть нечитаемость.
   Лечим не размером шрифта (он внутри SVG, JS не наш), а масштабом: даём SVG
   его натуральные 440px и прокручиваем ВНУТРИ карточки. Страница при этом не
   едет: overflow-x живёт на обёртке, а не на body. */
.chartcard{min-width:0}

.chartwrap{
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;      /* не утягиваем за собой страницу и «назад» */
  -webkit-overflow-scrolling:touch;   /* инерция в iOS Safari */
  scrollbar-width:none;               /* полосу прячем — она тут только мешает */
}
.chartwrap::-webkit-scrollbar{display:none}
.chartwrap>svg{display:block;min-width:440px}

/* Та же история в модалке графика. Разметку рисует drawChart(): SVG лежит в
   безымянном <div> прямо внутри #cbox, а svg.ic — это иконка подсказки в
   .insight, её трогать нельзя, отсюда :not(.ic). */
#cbox>div>svg:not(.ic){display:block;min-width:440px}
#cbox>div:has(>svg:not(.ic)){
  overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
#cbox>div:has(>svg:not(.ic))::-webkit-scrollbar{display:none}
/* Без поддержки :has() прокрутка достаётся самому #cbox — у него в styles.css
   уже стоит overflow:auto. Хуже, но не сломано, и страница всё равно цела. */

/* Легенда: 11px под графиком читаются плохо, а в одну строку она не влезает. */
.legend{font-size:12px;flex-wrap:wrap;row-gap:6px}
.legend i{width:11px;height:11px}


/* ---- 6. Экранная клавиатура (класс вешает mobile-kbd.js) ---------------- */
/* Пока клавиатура открыта, нижняя навигация обязана уйти. На Android она
   всплывает над клавиатурой и закрывает собой то самое поле, в которое
   человек печатает. Заодно снимаем зарезервированный под неё отступ у main,
   иначе под полем ввода остаётся 72px пустоты.

   Оба правила говорят про НИЖНЮЮ ПАНЕЛЬ, а она существует только в узком
   портрете — отсюда вложенный медиа-запрос, тот же, что подблок 12 в
   mobile.css. В ландшафте панели нет, отступа под неё нет, и безусловное
   padding-bottom:16px там просто переписало бы чужое значение впустую. */
@media (max-width:768px) and (orientation:portrait){
  body.kbd-open #mnav{display:none}
  body.kbd-open main{padding-bottom:16px}
}

/* Второе следствие клавиатуры — уже в ОБЕИХ ориентациях, но больнее всего в
   лежащем телефоне: там на всю высоту остаётся ~150px, и накрытыми оказываются
   кнопки формы. Фиксированные слои не сжимаются сами, поэтому подрезаем их по
   видимой высоте (--vvh публикует mobile-kbd.js). Нет переменной — остаются
   прежние значения из styles.css/mobile.css, ничего не ломается.
   #modal центрирует карточку по себе, поэтому подрезать надо ИМЕННО оверлей:
   inset:0 задал ему и top, и bottom — снимаем bottom, иначе height не сработает. */
/* Одной высоты мало — важно, К ЧЕМУ слой прижат. Шит блогера верстается от НИЗА
   (bottom:0), а клавиатура занимает как раз низ: ужать его до высоты видимой
   области, оставив прижатым к низу, значит поставить его ровно под клавиатуру.
   Поэтому на время набора слой переезжает к ВЕРХУ видимой области — top:--vvt
   (на iOS она сдвинута вниз, см. mobile-kbd.js), высота --vvh.
   Скруглённые углы сверху при этом убираем: у прижатого к краю экрана слоя они
   читаются как обрезанный контент, а не как «шит». */
body.kbd-open #drawer{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100dvh)}
body.kbd-open #drawer.sheet{border-radius:0}
body.kbd-open #modal{top:var(--vvt,0px);bottom:auto;height:var(--vvh,100dvh)}
body.kbd-open #modal .card{max-height:calc(var(--vvh,90vh) - 24px)}

} /* /@media (max-width:768px), (max-height:500px) and (orientation:landscape) */