/* Редактор примера кода (подфаза 23.8).
 *
 * Отдельным файлом, а не строками в `app.css`: редактор живёт только там,
 * где нажали «карандаш», и его правки не должны задевать оболочку.
 *
 * ⚠️ Числа - из кода приложения; ссылка на место стоит рядом с каждым.
 * Соответствие вида и чисел держит `js/editor/editor.js`. Правишь тут -
 * смотри туда.
 *
 * ⚠️ Цвета подсветки СВОИ и от темы НЕ зависят: код и в приложении, и в
 * браузере всегда на тёмном фоне. Переменные `--tok-*` и `--editor-font-size`
 * ставит сам модуль (`CodeSyntax.swift:67-79`), здесь они только
 * используются - и с запасными значениями на случай, если разметка
 * смонтирована раньше модуля.
 */

.editor {
    display: flex;
    flex-direction: column;
    /* Редактор занимает панель целиком и своего размера не имеет: он
     * тянется вместе с окном, как слой `ExampleEditorLayer` на iOS. */
    height: 100%;
    min-height: 0;
    gap: 8px;
    padding: 12px;
    box-sizing: border-box;
}

/* --- Верхняя строка ------------------------------------------------------ */

.editor-head {
    /* `position: relative` не украшение: невидимая мерка «Вернуть исходный»
     * лежит вне потока, и без якоря она считалась бы от страницы. */
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
}

.editor-caption {
    /* Ужимается в строке ТОЛЬКО заголовок - за это и платит название, когда
     * кнопки не помещаются. `ExampleEditor.kt:runFitsInHeader`. */
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 1.05rem;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Невидимая копия подписи «Вернуть исходный»: по ней меряется место, которое
 * под кнопку держится ВСЕГДА - даже когда самой кнопки нет.
 * ⚠️ Не `display: none`: у спрятанного узла ширины нет вовсе, и замер дал бы
 * ноль. Прячем выносом из потока. */
.editor-reserve {
    position: absolute;
    visibility: hidden;
    white-space: nowrap;
    pointer-events: none;
    /* Те же поля, что у настоящей кнопки, - иначе замер соврёт на 24 px
     * (`ExampleEditor.kt:TEXT_BUTTON_PADDING`). */
    padding: 0 12px;
    font: inherit;
}

.editor-tail {
    display: flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.editor-btn {
    /* ⚠️ Кнопки НЕ ужимаются: ужимается в строке только заголовок. Без этого
     * «Вернуть исходный» сплющивалась до 57 px и налезала на «Отмену» -
     * ровно та строка, которую правило `runFitsInHeader` и бережёт. */
    flex: 0 0 auto;
    /* 48 px - наименьшая зона нажатия (норма Google; у Apple 44, берём
     * большее). `ExampleEditor.kt:MIN_TOUCH_WIDTH`. */
    min-width: 48px;
    min-height: 48px;
    padding: 0 12px;
    border: none;
    border-radius: 8px;
    background: none;
    color: var(--accent, #3b6fd4);
    font: inherit;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
}

.editor-btn:hover:not(:disabled) {
    background: var(--row-hover, rgba(128, 128, 128, 0.12));
}

.editor-btn:disabled {
    color: var(--text-dim, rgba(128, 128, 128, 0.7));
    cursor: default;
}

.editor-btn[hidden] {
    display: none;
}

.editor-run {
    font-size: 1.1rem;
    line-height: 1;
}

/* --- Поле правки --------------------------------------------------------- */

.editor-field {
    position: relative;
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 8px;
    overflow: hidden;
    /* Фон кода фиксированный: подсветка рассчитана на тёмный.
     * `CodeSyntax.swift:68`. */
    background: rgb(23, 26, 36);
}

/* Слой краски и поле ввода обязаны совпадать ВСЕМИ метриками текста: шрифтом,
 * кеглем, интервалом, полями и переносом. Разойдись хоть одно - и буквы
 * уедут с краски. Поэтому общие правила заданы один раз на оба. */
.editor-paint,
.editor-input {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 8px;
    border: 0;
    box-sizing: border-box;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: var(--editor-font-size, 17px);
    line-height: 1.35;
    tab-size: 4;
    white-space: pre;
    overflow: auto;
    overflow-wrap: normal;
    word-break: normal;
}

.editor-paint {
    pointer-events: none;
    color: var(--tok-text, rgb(217, 222, 242));
    /* Прокруткой слоя правит поле ввода: своей полосы у него быть не должно. */
    scrollbar-width: none;
}

.editor-paint::-webkit-scrollbar {
    display: none;
}

.editor-input {
    /* Текст прозрачный, курсор - нет: буквы приходят из слоя краски под
     * полем. Выделение оставляем полупрозрачным, иначе оно закрыло бы их. */
    color: transparent;
    background: transparent;
    caret-color: var(--tok-text, rgb(217, 222, 242));
    resize: none;
}

.editor-input::selection {
    background: rgba(115, 191, 255, 0.35);
}

.editor-input:read-only {
    /* Гейт правки закрыт: читать можно, править нет. Курсора тоже нет -
     * мигающая палочка обещала бы то, чего не будет. */
    caret-color: transparent;
}

.tok-keyword { color: var(--tok-keyword, rgb(199, 145, 245)); }
.tok-string { color: var(--tok-string, rgb(153, 219, 140)); }
.tok-comment { color: var(--tok-comment, rgb(128, 135, 153)); }
.tok-number { color: var(--tok-number, rgb(242, 184, 102)); }
.tok-definition { color: var(--tok-definition, rgb(115, 191, 255)); }
.tok-builtin { color: var(--tok-builtin, rgb(102, 217, 217)); }

/* Кнопка ▶ поверх кода: вверху справа и на 0.6 прозрачная, чтобы сквозь неё
 * читался код (решение владельца 17.08.2026, одно на обе платформы).
 * ⚠️ Прозрачность только рисует: нажатия сквозь неё проходят, и диктор
 * кнопку по-прежнему объявляет. */
.editor-run-floating {
    position: absolute;
    top: 4px;
    right: 4px;
    opacity: 0.6;
    color: var(--tok-text, rgb(217, 222, 242));
}

.editor-run-floating:hover:not(:disabled) {
    background: rgba(128, 128, 128, 0.25);
}

/* --- Панель символов ----------------------------------------------------- */

/* Знаков кода на программной клавиатуре телефона нет вовсе, и без панели
 * править код там нечем. Порт `makeSymbolBar` (`CodeEditor.swift:369`), где
 * она висит над клавиатурой; в браузере такого места нет, поэтому панель
 * стоит под полем. */
.editor-symbols {
    display: flex;
    gap: 2px;
    overflow-x: auto;
    flex: 0 0 auto;
}

.editor-symbols[hidden] {
    display: none;
}

.editor-symbol {
    min-width: 40px;
    min-height: 40px;
    border: none;
    border-radius: 6px;
    background: var(--row-hover, rgba(128, 128, 128, 0.12));
    color: var(--text, inherit);
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: 1rem;
    cursor: pointer;
}

/* --- Полоса результата --------------------------------------------------- */

/* Место под полосу прогона: рисует её `js/app/views/runPanel.js` со своими
 * стилями (`css/run.css`). Пустой узел места не занимает. */
.editor-output:empty {
    display: none;
}