/* Полоса результата прогона (подфаза 23.6).
 *
 * Отдельным файлом, а не строками в `app.css`: полоса живёт только там, где
 * есть кнопка ▶, и её правки не должны задевать оболочку.
 *
 * ⚠️ Все числа - из кода приложения; ссылка на место стоит рядом с каждым.
 * Соответствие вида и чисел держит `js/app/views/runPanel.js` (объект
 * `PANEL`): там же ссылки на файлы и строки iOS. Правишь тут - смотри туда.
 *
 * ⚠️ Своих цветов файл не заводит: берутся переменные темы оболочки
 * (`app.css`), иначе полоса разъедется с окном на тёмной теме. Запасные
 * значения через `var(--x, …)` - на случай, если полоса смонтирована раньше
 * темы.
 *
 * ⚠️⚠️ И ровно это правило файл ГОДАМИ не выполнял, а выглядело оно как
 * выполненное. Имена переменных были выдуманы (`--separator`, `--secondary`,
 * `--secondary-text`, `--error`, `--fill`), в `app.css` нет ни одного из них,
 * и каждый `var()` молча брал запасное значение. Полоса стояла одними и теми
 * же серыми на обеих темах и за окном не шла вовсе. CSS об этом не сообщает
 * ничем (см. раздел README «CSS ошибок не показывает»), и найти это можно
 * только сверив список `var(--…)` со списком объявленных переменных - что и
 * сделано 04.09.2026 при проверке светлой темы. Настоящие имена:
 * `--sep`, `--inactive`, `--text-dim`, `--danger`, `--bg-elev`.
 */

.run-panel {
    /* Полоса прижата к низу окна: код, к которому относится ответ, обязан
     * оставаться на экране. Ровно ради этого 26.08.2026 отказались от листа -
     * он закрывал собой сам запрос. */
    position: sticky;
    bottom: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    background: var(--bg, #fff);
    border-top: 1px solid var(--sep, rgba(128, 128, 128, 0.35));
    /* ⚠️ Тень обязательна, и это не украшение. На СВЕТЛОЙ теме фон полосы
     * (`--bg`, белый) и фон кода над ней (`--code-bg`, `#f7f7f9`) отличаются
     * на полпроцента, и всю границу держала одна волосяная линия в 18%
     * прозрачности - её на экране не видно (п. 8 разбора удобства
     * 04.09.2026: «между полосой результата и кодом нет визуальной границы в
     * светлой теме»). Полоса и правда лежит СЛОЕМ поверх кода (`sticky`), так
     * что тень говорит правду о её месте. На тёмной теме её не видно, да там
     * она и не нужна: чёрный фон полосы против `#1c1c1e` кода различается
     * сам. */
    box-shadow: 0 -1px 6px rgba(0, 0, 0, 0.10);
    font-family: inherit;
}

.run-panel[hidden] {
    display: none;
}

/* --- Ручка: тянешь вверх, полоса растёт --------------------------------- */

.run-resizer {
    /* Полоса захвата ВЫШЕ самой плашки: 11 px - как у разделителя списка, и
     * это минимум, в который человек попадает не целясь.
     * `Views/HtmlView/PanelResizer.swift:74`. */
    height: 11px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: ns-resize;
    touch-action: none; /* Иначе жест уедет в прокрутку страницы. */
}

.run-resizer:focus-visible {
    outline: 2px solid var(--accent, #595ced);
    outline-offset: -2px;
}

.run-handle {
    /* Плашка ручки: видимый признак, что полосу можно тащить.
     * `PanelResizer.swift:68-70`. */
    width: 36px;
    height: 4px;
    border-radius: 2px;
    background: var(--inactive, rgba(128, 128, 128, 0.55));
}

/* --- Шапка -------------------------------------------------------------- */

.run-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    /* Воздух у краёв полосы. `Views/HtmlView/SqlResultPanel.swift:132`. */
    padding: 8px 12px 0;
    flex: none;
}

.run-title {
    /* Заголовок с объединённой подписью «Результат запроса · строк: N,
     * показано: M» - одной строкой, без переноса: в тесной полосе вторая
     * строка стоит дороже, чем выигрыш от неё. */
    font-weight: 600;
    font-size: 0.85em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.run-dataset {
    margin-inline-start: auto;
    font-size: 0.8em;
    color: var(--text-dim, #6b6b70);
}

.run-icon::before {
    /* Значок говорит то же, что и цвет текста рядом, - диктору он лишний
     * (правило фазы 9.1), поэтому рисуется псевдоэлементом. */
    content: "≡";
    color: var(--text-dim, #6b6b70);
}

.run-panel.is-error .run-icon::before {
    content: "⚠";
    color: var(--danger, #d0342c);
}

.run-close {
    margin-inline-start: 0;
    border: 0;
    background: none;
    padding: 0 2px;
    cursor: pointer;
    color: var(--text-dim, #6b6b70);
    font-size: 1em;
    line-height: 1;
}

/* --- Тело --------------------------------------------------------------- */

.run-body {
    /* Высоту в пикселях ставит `runPanel.js`: она зависит от окна и от того,
     * тянул ли человек ручку. Больше не влезает - прокручивается. */
    overflow: auto;
    padding: 8px 12px 0;
    /* Кегль ответа ставится в js: 80% от кегля статьи, но не ниже 7.
     * `CodeFiles/Utils/Settings/Settings.swift:118-121`. */
}

.run-output {
    margin: 0;
    /* Вывод чаще всего затем и нужен, чтобы его забрать. */
    user-select: text;
    white-space: pre-wrap;
    /* ⚠️ `break-word`, а не `normal`: строка вывода бывает длиннее окна, и
     * без переноса полоса поехала бы горизонтально вместе со страницей. */
    overflow-wrap: break-word;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.run-panel.is-error .run-output {
    color: var(--danger, #d0342c);
}

.run-panel.is-running .run-body {
    opacity: 0.5;
}

/* --- Шаги прогона SQL --------------------------------------------------- */

.run-step + .run-step {
    /* Зазор между шагами: у каждого своя таблица со своей подписью, и без
     * воздуха два шага читались бы как один.
     * `SqlResultPanel.swift:238`. */
    margin-top: 16px;
}

.run-note-line {
    /* Подпись о числе строк - у своей таблицы; зазор меньше, чем между
     * шагами: они говорят об одном и том же. `SqlResultPanel.swift:248`. */
    margin: 6px 0 0;
    font-size: 0.9em;
    color: var(--text-dim, #6b6b70);
}

/* --- Таблица результата ------------------------------------------------- */

.run-table-scroll {
    /* Прокрутка вбок общая у шапки и тела: они одна таблица, и разъезжаться
     * им нельзя. Высоту тела ставит js - по окну. */
    overflow: auto;
    border: 1px solid var(--sep, rgba(128, 128, 128, 0.35));
    border-radius: 8px;
}

.run-table {
    border-collapse: collapse;
    /* Ширины колонок считаются по содержимому в js (кап 28 знаков, знак =
     * кегль × 0.76), а не отдаются авто-раскладке: у `country.LocalName`
     * встречаются длинные значения, и колонка во весь экран прячет соседние.
     * `SqlResultPanel.swift:422`, `:426`. */
    table-layout: fixed;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: inherit;
}

.run-table th,
.run-table td {
    /* ⚠️ ПЛОТНОСТЬ СТРОК. От этого отступа прямо зависит, сколько записей
     * видно, и число подобрано ГЛАЗАМИ владельца за четыре захода 01.09.2026
     * (3 → 1 → 0 → 1 → 2). `SqlResultPanel.swift:387`. Скажет «плотно» или
     * «просторно» - двигать надо его, а не кегль. */
    padding: var(--run-cell-padding, 2px) 8px;
    text-align: start;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border-bottom: 1px solid var(--sep, rgba(128, 128, 128, 0.25));
    /* Строка шрифта плюс единица: у 10 pt метрика даёт 12,0, а отрисовка 13.
     * Счёт записей - в `runPanel.rowHeight`. */
    line-height: 1.2;
}

.run-table thead th {
    /* Шапка закреплена: пролистав таблицу вниз, человек обязан видеть, что за
     * колонка перед ним. */
    position: sticky;
    top: 0;
    background: var(--bg-elev, rgba(128, 128, 128, 0.12));
    vertical-align: top;
}

.run-col-name {
    /* Имя колонки - тем же кеглем, что данные: шапка мельче строк читалась бы
     * как подпись к чужой таблице. */
    display: block;
    font-weight: 600;
}

.run-col-type {
    /* Тип из метаданных курсора: в темах «Integer Types» и «Date and Time
     * Types» он и есть половина урока, поэтому виден всегда.
     * Кегль - 80% от кегля таблицы, но не ниже общего минимума 7 px.
     * `SqlResultPanel.swift:~470`. */
    display: block;
    margin-top: 1px;
    font-weight: 400;
    font-size: max(0.8em, 7px);
    color: var(--text-dim, #6b6b70);
}

.run-null {
    /* NULL - это не строка «NULL»: сервер их различает, и показывать
     * одинаково значило бы врать. */
    font-style: italic;
    color: var(--text-dim, #6b6b70);
}

.run-fail {
    margin-top: 16px;
    padding: 10px;
    border-radius: 8px;
    color: var(--danger, #d0342c);
    background: color-mix(in srgb, var(--danger, #d0342c) 10%, transparent);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    user-select: text;
}

/* --- Служебные строки --------------------------------------------------- */

/* ⚠️ ПОРЯДОК: время и остаток ВЫШЕ атрибуции (решение владельца 01.09.2026 -
 * поменять их местами). Обе - ВНЕ прокрутки тела: у длинной таблицы строка
 * внутри уехала бы за нижний край, то есть предупреждение об остатке снова не
 * увидели бы, а атрибуция - это условие CC BY.
 *
 * ⚠️ ШАГ между всеми служебными строчками ОДИНАКОВЫЙ - 6 px
 * (`SqlResultPanel.swift:248`): три строчки с разными интервалами и были той
 * неровностью, на которую смотрел владелец 01.09.2026. */

.run-note,
.run-credit {
    margin: 6px 0 0;
    padding-inline: 12px;
    font-size: 0.75em;
    color: var(--text-dim, #6b6b70);
    flex: none;
}

.run-credit {
    /* Атрибуция - ПОСЛЕДНЕЙ строкой полосы, и воздух у нижнего края её. */
    padding-bottom: 8px;
}

.run-note[hidden],
.run-link[hidden] {
    display: none;
}

/* Ссылка «Открыть в песочнице ↗» - строка со значком, а не голый текст:
 * значок обязан стоять В СТРОКЕ с подписью и не переноситься от неё
 * отдельно (п. 6 разбора удобства 04.09.2026). */
.run-link {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0 8px;
    padding-inline: 12px;
    font-size: 0.75em;
    color: var(--accent, #595ced);
}

/* ⚠️ Размер значку задан ЯВНО: svg без ширины и высоты внутри флекс-строки
 * получает нулевую ширину и не рисуется вовсе - на снимке экрана это
 * неотличимо от значка, которого не поставили (та же ловушка, что у замка и
 * шеврона в `app.css`). Размер в `em`, чтобы стрелка шла за кеглем ответа. */
.run-link-out {
    flex: 0 0 auto;
    width: 1.1em;
    height: 1.1em;
    fill: currentColor;
}

/* --- Тесная полоса ------------------------------------------------------ */

/* Ландшафт телефона: окно около 390 px высотой, и полоса в 260 оставила бы
 * запросу полторы строки. Умолчания высоты для этого случая считает js
 * (`PANEL.sqlHeightCompact`), здесь - только воздух.
 * `SqlResultPanel.swift:91`. */
@media (max-height: 500px) {
    .run-head {
        padding-top: 4px;
    }

    .run-credit {
        padding-bottom: 4px;
    }
}