/* Тесная раскладка и уклад под палец.
 *
 * ДВА РАЗНЫХ ПРИЗНАКА, и путать их нельзя.
 *
 *   `html[data-тесно="да"]`   — доки не помещаются. Вопрос про ШИРИНУ ОКНА.
 *   `html[data-уклад="палец"]` — по экрану попадают пальцем. Вопрос про то,
 *                                ЧЕМ ПОЛЬЗУЮТСЯ.
 *
 * Сперва всё висело на одном признаке, и это было ошибкой. Тесная раскладка
 * родилась для iPad, но нужна не только ему: замерено на стенде в обычном
 * браузере при окне 815 точек — правый док и вся верхняя строка уезжали за
 * край на 97. То есть у человека с ноутбуком или половиной экрана редактор
 * ломался, а лекарство уже лежало рядом и было заперто на «палец».
 *
 * Обратное тоже верно: узкому окну с мышью не нужны ни сорокаточечные цели,
 * ни отключённые подсказки на наведении. Слить признаки обратно значит одно
 * из двух сломать.
 *
 * ── С ЧЕГО НАЧАЛОСЬ ──────────────────────────────────────────────────────
 * Настольная раскладка — три колонки: инструменты, левый док, холст, правый
 * док. На 11-дюймовом iPad стоймя это выглядело так: доки съели четыре пятых
 * ширины, холст остался полоской, правая колонка уехала за край вместе с
 * содержимым, а строка состояния iPad легла ПОВЕРХ нашего меню. Последнее —
 * от отсутствия `viewport-fit=cover`: без него `env(safe-area-inset-*)` равны
 * нулю, и безопасных полей как бы нет.
 *
 * ЗАМЫСЕЛ. Холст занимает всё, панели приходят листом по краю и уходят.
 * Панель за раз одна: россыпь панелей держат там, где есть куда.
 *
 * СТОЙМЯ И ЛЁЖА — РАЗНЫЕ РАСКЛАДКИ, А НЕ ОДНА РАСТЯНУТАЯ. Лёжа лист выходит
 * справа (ширины хватает, высоты нет), стоймя — снизу (наоборот). Это не
 * украшение: лист снизу в альбомной ориентации закрыл бы холст целиком.
 *
 * ЧЕГО ЗДЕСЬ НЕТ НАРОЧНО. Ни одной новой панели и ни одной новой кнопки
 * действия. Всё, что тут есть, — другое место для того же самого: те же
 * `section.панель` переезжают в лист и возвращаются в док. Заведись здесь своя
 * панель — на маке её бы не было, и одинаковость площадок кончилась бы ровно
 * тем способом, от которого заведён реестр операций.
 */

/* ── Общее для уклада под палец ─────────────────────────────────────────── */

html[data-уклад="палец"] {
  /* Палец не попадает в 28 точек. 44 — нижняя граница, ниже которой промах
   * перестаёт быть случайностью. */
  --кнопка: 44px;
  --строка: 40px;
  --кегль: 14px;
  --кегль-мелкий: 12.5px;
}

/* Безопасные поля. Без них часы iPad лежат на меню, а внизу полоса «домой»
 * перечёркивает строку состояния. */
html[data-уклад="палец"] #верх {
  height: auto; min-height: 44px;
  padding-top: max(env(safe-area-inset-top), 6px);
  padding-left: max(env(safe-area-inset-left), 10px);
  padding-right: max(env(safe-area-inset-right), 10px);
}

/* ВЕРХНЯЯ СТРОКА ПРОКРУЧИВАЕТСЯ, А НЕ РАСПИРАЕТ ОКНО. Меню из девяти разделов
 * не переносится и не ужимается: без этого правила `#верх` требовал 912 точек
 * при окне 815, и ВСЯ сетка оболочки раздувалась под него — за краем
 * оказывались и лента, и рейка, и низ. Замерено на стенде: «торчит 97». */
html[data-тесно="да"] #верх { overflow-x: auto; scrollbar-width: none; }
html[data-тесно="да"] #верх::-webkit-scrollbar { display: none; }
html[data-тесно="да"] #верх > * { flex: none; }
/* Столбец сетки обязан уметь быть уже содержимого. По умолчанию `1fr` имеет
 * минимум по содержимому, и одна неуступчивая строка тянет за собой всё. */
html[data-тесно="да"] #оболочка { grid-template-columns: minmax(0, 1fr); }
/* Строка состояния ужимается многоточием, а не распирает окно. */
html[data-тесно="да"] #низ { min-width: 0; }
html[data-тесно="да"] #вести {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* Отступ под кнопки окна macOS: на планшете их нет, и 68 точек — просто дыра. */
html[data-уклад="палец"] #клеймо { display: none; }
html[data-уклад="палец"] #низ {
  height: auto; min-height: 24px;
  padding-bottom: max(env(safe-area-inset-bottom), 2px);
  padding-left: max(env(safe-area-inset-left), 10px);
  padding-right: max(env(safe-area-inset-right), 10px);
}
html[data-тесно="да"] #оболочка { grid-template-rows: auto auto 1fr auto; }

/* Лента настроек инструмента — выше и шире: по ней попадают пальцем. */
html[data-уклад="палец"] #лента {
  min-height: 52px; padding-left: max(env(safe-area-inset-left), 10px);
}
html[data-уклад="палец"] #лента .кнопка,
html[data-уклад="палец"] #лента .фишка,
html[data-уклад="палец"] #лента button.мини {
  min-height: 36px; padding-inline: 12px;
}

/* Полосу инструментов — шире, значки крупнее, буквы прочь: клавиатуры может
 * не быть вовсе, а подсказка «V» рядом со значком тогда просто мусор. */
/* ПОЛОСА ИНСТРУМЕНТОВ СКЛАДЫВАЕТСЯ В СТОЛБЦЫ — но не здесь.
 *
 * Замерено на iPad: двадцать семь значков требуют 1455 точек по высоте, а её
 * есть 1038 стоймя и 662 лёжа. Прокрутка тут — худший из ответов: про
 * инструмент, до которого надо доскроллить, человек не узнаёт вовсе.
 *
 * НО СВОЙ ПЕРЕНОС ЗАВОДИТЬ НЕЛЬЗЯ: у ленты инструментов механизм колонок уже
 * есть (`data-колонок`, «тяга-ленты», правила в app.css около строки 1000), и
 * его тянут мышью на маке. Первая попытка сделала второй: `flex-wrap: wrap`
 * сжал кучки до 34 точек, а здешние правила развернули их обратно, и вышла
 * каша из семи столбцов по 34. Сколько колонок нужно, считает
 * `ui/tablet.js`, а ставит — сама лента.
 *
 * Здесь остаётся только то, чего у ленты не было: безопасное поле слева. */
html[data-тесно="да"] #инструменты {
  padding-left: max(env(safe-area-inset-left), 5px);
}

html[data-уклад="палец"] .инструмент { width: 48px; height: 48px; }
html[data-уклад="палец"] .инструмент svg { width: 24px; height: 24px; }
html[data-уклад="палец"] .инструмент .буква { display: none; }

/* Доков на планшете нет: их место занимает лист. */
html[data-тесно="да"] .док { display: none; }

/* Холст берёт жесты себе. Без этого браузер уводит пальцы на свою прокрутку
 * и масштаб страницы, и до кисти не доходит ничего. */
html[data-уклад="палец"] #сцена {
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
/* Кольцо кисти под пальцем не нужно: палец и так виден, а кольцо мигает.
 * НО ПОД ПЕРОМ НУЖНО, и именно на весу: пером надо знать размер мазка ДО
 * касания, иначе первый штрих всегда пробный. Признак «перо рядом» ставит
 * `ui/gestures.js` по событиям наведения. */
html[data-уклад="палец"] .курсор-кисти { display: none !important; }
html[data-уклад="палец"][data-перо="рядом"] .курсор-кисти { display: block !important; }

/* ── Рейка панелей ──────────────────────────────────────────────────────── */

#рейка { display: none; }
html[data-тесно="да"] #рейка {
  display: flex; flex-direction: column; flex-wrap: wrap;
  align-items: center; align-content: flex-start; gap: 4px;
  width: auto; flex: none; height: 100%; min-height: 0; padding: 6px 2px;
  padding-right: max(env(safe-area-inset-right), 2px);
  background: var(--к-2); border-left: 1px solid var(--край);
  overflow: hidden;
}
html[data-тесно="да"] #рейка::-webkit-scrollbar { display: none; }
.кнопка-рейки {
  width: 48px; height: 48px; flex: none; border-radius: var(--радиус-2);
  border: 1px solid transparent; background: transparent;
  color: var(--текст-тише); display: grid; place-items: center; position: relative;
}
.кнопка-рейки svg { width: 24px; height: 24px; }
.кнопка-рейки[data-выбрана] {
  background: var(--акцент-тише); color: var(--акцент);
  border-color: rgba(76, 141, 255, 0.35);
}

/* ── Лист с панелью ─────────────────────────────────────────────────────── */

#лист { display: none; }
html[data-тесно="да"] #лист {
  display: flex; flex-direction: column;
  position: absolute; z-index: 40;
  background: var(--фон-панели-плотный);
  box-shadow: var(--тень-плавающей);
  min-height: 0;
}
html[data-тесно="да"] #лист[hidden] { display: none; }
html[data-тесно="да"] #лист > .лист-тело {
  flex: 1; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
/* Панель внутри листа — без своих полей и рамок: лист уже рамка. */
html[data-тесно="да"] #лист .панель {
  border: 0; border-radius: 0; background: transparent; margin: 0;
  width: auto !important; height: auto !important;
}
/* Шапку панели в листе прячем: её имя уже стоит в шапке листа, а кнопки
 * шапки — «домой», «закрепить», «оторвать» — про доки, которых здесь нет. */
html[data-тесно="да"] #лист .шапка-панели { display: none; }

.шапка-листа {
  display: flex; align-items: center; gap: 10px; flex: none;
  height: 52px; padding: 0 12px; border-bottom: 1px solid var(--край);
}
.шапка-листа .имя-листа { font-weight: 640; flex: 1; }
.шапка-листа .закрыть-лист {
  width: 44px; height: 44px; border: 0; border-radius: var(--радиус-2);
  background: transparent; color: var(--текст-тише); font-size: 20px;
}

/* Лёжа — лист справа, во всю высоту рабочей области. */
html[data-тесно="да"][data-поворот="лёжа"] #лист {
  top: 0; bottom: 0; right: 0;
  width: min(400px, 42vw);
  border-left: 1px solid var(--край-ярче);
}
/* Стоймя — лист снизу. Справа его ставить нельзя: на 834 точках ширины он
 * оставил бы холсту полоску, ровно ту, с которой всё началось. */
html[data-тесно="да"][data-поворот="стоймя"] #лист {
  left: 0; right: 0; bottom: 0;
  /* ПО СОДЕРЖИМОМУ, а не во всю отведённую высоту. «Слои» с одним слоем
   * занимают треть листа, и остальные две трети закрывали холст пустотой.
   * Потолок нужен: «Умные инструменты» в полный рост закрыли бы всё. */
  height: auto; max-height: min(76vh, 900px);
  border-top: 1px solid var(--край-ярче);
  border-radius: var(--радиус-3) var(--радиус-3) 0 0;
}
/* Лёжа наоборот — во всю высоту: лист стоит сбоку, холсту не мешает, а
 * прыгающая по высоте боковая панель раздражает больше, чем пустое место. */
/* Ручка листа стоймя: за неё тянут, по ней же видно, что лист тянется. */
html[data-тесно="да"][data-поворот="стоймя"] .шапка-листа::before {
  content: ""; position: absolute; top: 6px; left: 50%; translate: -50% 0;
  width: 40px; height: 4px; border-radius: 2px; background: var(--к-5);
}
html[data-тесно="да"][data-поворот="стоймя"] .шапка-листа { position: relative; }

/* ПЛЁНКА КАДРОВ ПРЯЧЕТСЯ ТАМ, ГДЕ ВЫСОТЫ НЕТ. Она съедает 72 точки, и это
 * дорого вдвойне, потому что высоту уже разобрали верхняя строка, лента
 * настроек, полосы и строка состояния.
 *
 * Стоймя на планшете — прячем. На телефоне — в ЛЮБОЙ ориентации: замерено на
 * iPhone лёжа, окно 874×402, и разбор был такой — верх 51, лента 52, плёнка
 * 72, инструменты 57, рейка 57, низ 38, а холсту осталось 75 точек, то есть
 * масштаб 2 %. Холст, которого не видно, — это не раскладка.
 *
 * Не выключаем, а прячем: на планшете лёжа плёнка на месте, и вся её работа
 * (ветвление вариантов из шага истории) никуда не девается. */
html[data-тесно="да"][data-поворот="стоймя"] #плёнка-короб { display: none; }
html[data-телефон="да"] #плёнка-короб { display: none; }

/* Подсказки на наведении под пальцем не показываются никогда — наведения нет.
 * Оставлять их значит держать мёртвый код в разметке. */
html[data-уклад="палец"] .подсказка { display: none !important; }

/* Лист лежит внутри рабочей области, значит ей нужна точка отсчёта. */
html[data-тесно="да"] #рабочая { position: relative; }
/* В листе панель обязана быть раскрыта: её шапку — единственный способ
 * развернуть обратно — лист прячет. */
html[data-тесно="да"] #лист .панель[data-свёрнута] .тело-панели { display: block; }

/* Родные жесты iOS поверх наших. Увеличительное стекло при долгом нажатии и
 * выделение текста мешают: у нас долгое нажатие — это меню. Поля ввода
 * исключены: там выделять как раз нужно. */
html[data-уклад="палец"] #оболочка {
  -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}
html[data-уклад="палец"] input,
html[data-уклад="палец"] textarea,
html[data-уклад="палец"] [contenteditable] {
  -webkit-user-select: text; user-select: text;
}

/* ── Мелочь внутри панелей ──────────────────────────────────────────────── */
/*
 * Замерено на iPad: в «Умных инструментах» 19 целей мельче 40 точек, самая
 * мелкая — значок «i» в 16. Рейка и лист — это оправа; попадать пальцем надо
 * по ползункам, полям и значкам внутри неё.
 *
 * ДВА РАЗНЫХ ЛЕКАРСТВА, И ВЫБОР МЕЖДУ НИМИ НЕ ВКУСОВОЙ.
 *
 * Где цель занимает свою строку — растим НАСТОЯЩИЙ размер: полоса ползунка,
 * поле ввода, мелкая кнопка. Строка и так во всю ширину, лишние точки по
 * высоте стоят дёшево.
 *
 * Где цель — значок при чужой строке (то самое «i», крестик в шапке) — растим
 * только ОБЛАСТЬ ПОПАДАНИЯ, невидимым полем вокруг. Сделай такой значок
 * сорокаточечным по-настоящему, и строка с подписью разъедется вдвое, а
 * панель на двадцать строк превратится в сорок. Так же поступает и сама iOS:
 * глифы в панелях мелкие, попадание — 44.
 */

html[data-уклад="палец"] .кнопка.мелкая { height: 36px; padding: 0 12px; }
html[data-тесно="да"] #лист input,
html[data-тесно="да"] #лист select { min-height: 36px; }

/* Полоса ползунка: тянуть за четыре точки высоты пальцем невозможно. Части
 * внутри ставим по центру, а не по числу: высота меняется, «сверху 7» нет. */
html[data-уклад="палец"] .ползунок .полоса { height: 36px; }
html[data-уклад="палец"] .ползунок .желоб,
html[data-уклад="палец"] .ползунок .налив { top: 50%; translate: 0 -50%; }
html[data-уклад="палец"] .ползунок .ручка {
  top: 50%; width: 20px; height: 20px;
  transform: translateX(-50%) translateY(-50%);
}
html[data-уклад="палец"] .ползунок[data-говорящий] .желоб { top: 50%; height: 18px; }
html[data-уклад="палец"] .ползунок[data-говорящий] .ручка { height: 24px; width: 10px; }
html[data-уклад="палец"] .ползунок input { height: 36px; }
html[data-уклад="палец"] .ползунок { grid-template-columns: 1fr 64px; }

/* Невидимое поле вокруг мелких значков. `inset` отрицательный — поле выходит
 * за рамку, ничего не сдвигая. */
html[data-уклад="палец"] .значок-i,
html[data-уклад="палец"] .кнопка-шапки,
html[data-уклад="палец"] .слой .глазок,
html[data-уклад="палец"] .листать { position: relative; }
html[data-уклад="палец"] .значок-i::after,
html[data-уклад="палец"] .кнопка-шапки::after,
html[data-уклад="палец"] .слой .глазок::after,
html[data-уклад="палец"] .листать::after {
  content: ""; position: absolute; inset: -12px;
}

/* Образцы цвета — по-настоящему крупнее, а не невидимым полем: они стоят
 * вплотную друг к другу, и растянутые поля перекрыли бы соседа. */
html[data-уклад="палец"] .образец-цвета { width: 40px; height: 40px; border-radius: 10px; }
html[data-уклад="палец"] .образец-цвета.второй { width: 32px; height: 32px; border-radius: 8px; }

/* Невидимое поле должно быть ПОВЕРХ соседей по строке. Без этого значок «i»,
 * стоящий рядом с длинной подписью, отдавал касание подписи: поле у него есть,
 * а рисуется оно ниже. */
html[data-уклад="палец"] .значок-i,
html[data-уклад="палец"] .кнопка-шапки,
html[data-уклад="палец"] .слой .глазок,
html[data-уклад="палец"] .листать { z-index: 2; }

/* ── Телефон: полосы ложатся вниз ───────────────────────────────────────── */
/*
 * Замерено на стенде при окне 375×812: тесная раскладка не ломается, но две
 * стоячие полосы съедают 191 точку из 375, и холсту остаётся 184 — меньше
 * половины ширины. Для планшета столбцы верны, для телефона нет: там мало
 * ширины и много высоты, и полосы должны лечь, а не стоять.
 *
 * ПРИЗНАК, А НЕ ЗАПРОС РАЗМЕРА. Сперва здесь стоял
 * `@media (max-width: 599px), (max-height: 599px)`. Так нельзя: владелец
 * 14.09.2026 попросил переключать телефонный вид на iPad руками, а запрос
 * размера руками не переключишь. Условие считает `ui/tablet.js` и ставит
 * `data-телефон`; заодно оно оказалось в одном месте, а не в шапке каждого
 * правила.
 *
 * ── ПОРЯДОК ПОЛОС СНИЗУ ВВЕРХ ────────────────────────────────────────────
 * Строка состояния, инструменты, настройки инструмента, рейка панелей, холст.
 * Владелец: «панель инструментов снизу, панель для инструмента над ней».
 * Телефон держат снизу, и чем чаще вещь нужна, тем ниже она лежит: инструмент
 * меняют чаще, чем его размер, а размер — чаще, чем открывают панель слоёв.
 */
html[data-телефон="да"] #середина { flex-direction: column; }
html[data-телефон="да"] #рабочая { order: 1; flex: 1; min-height: 0; }
html[data-телефон="да"] #рейка { order: 2; }
html[data-телефон="да"] #лента { order: 3; }
html[data-телефон="да"] #инструменты { order: 4; }

/* Лента настроек стоит в сетке оболочки второй строкой СВЕРХУ, а нужна снизу.
 * Переносит её `ui/tablet.js` — по-настоящему, внутрь середины (объяснение
 * там же, в `переставитьЛенту`). Здесь остаётся убрать её строку из сетки. */
html[data-телефон="да"] #оболочка {
  grid-template-areas: "верх" "середина" "низ";
  grid-template-rows: auto 1fr auto;
}

html[data-телефон="да"] #инструменты,
html[data-телефон="да"] #рейка,
html[data-телефон="да"] #лента {
  width: auto !important; height: auto; flex: none;
  flex-direction: row; flex-wrap: nowrap; align-content: center;
  align-items: center;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: none;
  border-left: 0; border-right: 0; border-top: 1px solid var(--край);
  border-bottom: 0;
  /* ВЫСОТА УРЕЗАНА. Владелец: «сделай панели меньше по высоте — слишком много
   * пустого». Было 4+48+4 у полос и 52 у ленты; стало 3+44+3 и 44. Четыре
   * ряда по прежним меркам съедали больше двухсот точек из 874. */
  min-height: 0;
  padding: 3px max(env(safe-area-inset-right), 6px)
           3px max(env(safe-area-inset-left), 6px);
  gap: 3px;
}
html[data-телефон="да"] #инструменты::-webkit-scrollbar,
html[data-телефон="да"] #рейка::-webkit-scrollbar,
html[data-телефон="да"] #лента::-webkit-scrollbar { display: none; }
html[data-телефон="да"] .инструмент,
html[data-телефон="да"] .кнопка-рейки { width: 44px; height: 44px; }
html[data-телефон="да"] #лента { min-height: 44px; }

/* Кучки снова целые: лёжа они и есть естественные группы, а «раствориться»
 * им нужно было только для переноса по столбцам. */
html[data-телефон="да"] #инструменты[data-колонок] > .кучка {
  display: flex; flex-direction: row; flex-wrap: nowrap; gap: 2px;
}
html[data-телефон="да"] #инструменты[data-колонок] > .черта-раздела {
  width: 7px !important; height: 22px; margin: 0 3px; flex: none;
  background: linear-gradient(var(--край-ярче), var(--край-ярче)) center/1px 100% no-repeat;
}

/* Лист приходит снизу всегда — стоймя телефон или лёжа. */
html[data-телефон="да"] #лист {
  left: 0; right: 0; bottom: 0; top: auto;
  width: auto; height: auto; max-height: min(70vh, 640px);
  border-left: 0; border-top: 1px solid var(--край-ярче);
  border-radius: var(--радиус-3) var(--радиус-3) 0 0;
}

/* СТРОКА СОСТОЯНИЯ — ОДНА СТРОКА, И ТОЛЬКО ТЕКСТ.
 * Владелец: «под панелью инструментов очень много места для текста, сократи
 * до минимума, там только текст». Числа — координаты, размер холста, масштаб —
 * на телефоне не читают, а места они занимают больше, чем сообщение. */
html[data-телефон="да"] #низ {
  min-height: 0; height: auto; line-height: 1.2;
  font-size: 10.5px; padding-top: 1px; gap: 0;
  /* Полоса «домой» внизу — тонкая чёрточка, а безопасное поле под неё
   * отводится в 34 точки. Отдавать их целиком строке состояния расточительно:
   * текст стоит выше чёрточки и ей не мешает. Замерено: 48 → 26. */
  padding-bottom: max(calc(env(safe-area-inset-bottom) - 22px), 2px);
}
html[data-телефон="да"] #низ .значение { display: none; }

/* ВЕРХНЕЙ ПОЛОСЫ МЕНЮ НЕТ — её вызывает кнопка у островка.
 * Показанная, она съедала полсотни точек высоты ради девяти слов, которые
 * нужны раз в сеанс. Появляется поверх холста и уходит по нажатию. */
html[data-телефон="да"] #верх {
  display: none;
  position: absolute; z-index: 60; left: 0; right: 0;
  top: calc(max(env(safe-area-inset-top), 24px) + 46px);
  background: var(--фон-панели-плотный);
  box-shadow: var(--тень-панели);
  border-bottom: 1px solid var(--край-ярче);
  padding-top: 4px; padding-bottom: 4px; min-height: 44px;
}
html[data-телефон="да"][data-меню="видно"] #верх { display: flex; }

/* ── Островок: быстрые инструменты в полосе над экраном ─────────────────── */
/*
 * Полоса с часами и вырезом — единственное место на телефоне, которое система
 * уже отняла и ничем не заняла: слева и справа от выреза там пусто. Владелец
 * 14.09.2026 попросил положить туда быстрые инструменты, и это единственная
 * высота, которая достаётся даром.
 *
 * ЧТО ТУТ ЛЕЖИТ. Слева: меню, текущий цвет, текущий инструмент выделения.
 * Справа: размер кисти и текущая рисующая кисть. За выделением и кистью
 * прячется выбор по долгому нажатию — уголок в углу кнопки об этом говорит.
 *
 * НОВЫХ ВОЗМОЖНОСТЕЙ ЗДЕСЬ НЕТ. Всё это уже есть в ленте, в полосе
 * инструментов и в палитре; островок — другой путь к тому же самому, ближе к
 * большому пальцу.
 */
#островок { display: none; }
html[data-телефон="да"] #островок {
  display: flex; align-items: center; justify-content: space-between;
  gap: 6px; flex: none;
  /* ВНУТРЬ ВЫРЕЗА, А НЕ ПОД НЕГО. Сперва полоса стояла под безопасным полем и
   * стоила 106 точек: 59 на вырез плюс 47 своих. Теперь кнопки сидят В
   * безопасном поле, по бокам от выреза, и стоят ровно столько, сколько и так
   * отнято железом. Замерено на iPhone 17: 106 → 59.
   *
   * Это возможно только потому, что оболочка убрала часы и заряд
   * (`prefersStatusBarHidden`) — иначе кнопки легли бы прямо под них.
   *
   * На устройстве без выреза поле маленькое, и тогда высоту задаём сами: 46
   * точек, иначе кнопкам негде стоять. */
  height: max(env(safe-area-inset-top), 46px);
  padding: 0 max(env(safe-area-inset-right), 8px)
           0 max(env(safe-area-inset-left), 8px);
  background: var(--к-2); border-bottom: 1px solid var(--край);
}
#островок .кучка-островка { display: flex; align-items: center; gap: 4px; }
.кнопка-островка {
  /* 36, а не 44: слева от выреза на iPhone 17 свободно около 138 точек, и
   * три кнопки по 44 туда не влезают. Попадание вытянуто невидимым полем. */
  width: 36px; height: 36px; flex: none; border-radius: var(--радиус-2);
  border: 1px solid var(--край); background: var(--фон-кнопки);
  color: var(--текст); display: grid; place-items: center; position: relative;
  padding: 0;
}
.кнопка-островка svg { width: 21px; height: 21px; }
.кнопка-островка::before {
  content: ""; position: absolute; inset: -4px -2px;
}
.кнопка-островка[data-выбрана] {
  background: var(--акцент-тише); color: var(--акцент);
  border-color: rgba(76, 141, 255, 0.45);
}
/* Уголок у тех, за которыми прячется выбор: иначе про долгое нажатие никто
 * не узнает. */
.кнопка-островка[data-есть-выбор]::after {
  content: ""; position: absolute; right: 3px; bottom: 3px;
  border: 3px solid transparent; border-right-color: var(--текст-совсем-тихо);
  border-bottom-color: var(--текст-совсем-тихо);
}
/* Образец цвета — с ярким ободком: чёрная краска на тёмной полосе иначе
 * неотличима от пустой кнопки. */
.кнопка-островка.цвет { border-width: 2px; border-color: var(--край-ярче); }
.кнопка-островка.размер {
  font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600;
}

/* Облика «Мастерская» на телефоне нет, и это решение, а не пропуск: там
   спрятана верхняя строка и спрятана плёнка, на которой у облика держится
   половина нижней полосы, а стеклянные пульты поверх холста на 390 точках
   закрыли бы сам рисунок. Разбор — в `сменитьОблик`.

   Раз отказ решён, то и кнопку прячем. Кнопка, которая отвечает отказом, —
   это обещание, взятое назад: хуже, чем её отсутствие. */
html[data-телефон="да"] #кнопка-облик { display: none; }