/* Шаблоны эмуляторов, кадры сцены, плеер записи (Pages/EmulatorTemplates, EmulatorTemplateEditor, SceneFrames, RecordingPlayer, EmulatorScreen) — постраничные классы поверх общей системы раскладки (app.css). */

/* --- Список шаблонов (Pages/EmulatorTemplates.razor) -----------------------------------------------------------------
   Семья «списки документов» (как Documents и вкладки «Телефонов»): id (ссылка + статус + описание), meta (ревизия ·
   схема / обновлён · кем), связи (кто держит шаблон), состояние (слои по каталогу), действия. Своё у шаблона — рум с
   пакетом и слои. Узко — ярусами; от 640 — три строки (id/meta, рум/слои, связи/состояние); от 1080 — одна.
   Голова (ссылка + чип), meta и действия — общие части семьи (.orion-row__head/__title/__meta/__actions, app.css); здесь
   только области, своё содержимое (рум, слои, связи) и пороги. Предки растянутой ссылки без position — иначе её ::after
   накрыл бы только область. */

.template-row {
    align-items: start;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "id     actions"
        "meta   meta"
        "room   room"
        "layers layers"
        "state  state"
        "links  links";
}

.template-row__id { grid-area: id; }
.template-row__meta { grid-area: meta; }
.template-row__room { grid-area: room; }
.template-row__state { grid-area: state; }
.template-row__actions { grid-area: actions; }

/* Слои строкой «база / хук / оверлеи»: подписи короткие — всегда слева, на любой ширине (у .orion-kv они встали бы над
   значением и удвоили высоту). */
.template-row__layers {
    grid-area: layers;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 2px 8px;
    margin: 0;
    font-size: 0.875rem;
}

.template-row__layers > dt {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.template-row__layers > dd {
    min-width: 0;
    margin: 0;
}

/* «эмуляторов N · аккаунтов M» — две микро-сводки вместо двух колонок таблицы. */
.template-row__links {
    grid-area: links;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 20px;
}

@container orion-rows (min-width: 640px) {
    .template-row {
        column-gap: 20px;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto;
        grid-template-areas:
            "id    meta   actions"
            "room  layers actions"
            "links state  actions";
    }
}

@container orion-rows (min-width: 1080px) {
    .template-row {
        grid-template-columns:
            minmax(140px, 0.9fr) minmax(150px, 1fr) minmax(0, 1.6fr) minmax(120px, 0.6fr) minmax(130px, 1fr) auto;
        grid-template-areas:
            "id   room layers links state actions"
            "meta room layers links state actions";
    }
}

/* --- Кадры сцены (Pages/SceneFrames.razor) --------------------------------------------------------------------------- */

/* Выбор «кадров» в тулбаре: корень MudSelect (.mud-select, OuterClass) — flex-grow: 1 и на широкой странице ([WidePage])
   растягивался бы на весь ряд, отгоняя кнопки к правому краю. */
.scene-frames__limit {
    flex: none;
}

/* Сырой JSON кадра: без переноса строк (структура дерева читается по отступам), своя прокрутка в обе стороны. */
.scene-frame__json {
    margin: 0;
    max-height: 70vh;
    overflow: auto;
    font-family: var(--orion-font-mono);
    font-size: 12px;
    line-height: 1.35;
    white-space: pre;
}

/* --- Плеер записи (Pages/RecordingPlayer.razor) ----------------------------------------------------------------------
   Ряд управления — две группы: транспорт с часами и инструменты (момент, скорость, кадры сцены, скачать). При переносе
   инструменты уходят строкой ниже целиком и остаются справа (.orion-toolbar__end); в узкой колонке (телефон) транспорт
   по центру, момент слева, иконки справа. */

.recording-controls {
    container: recording-controls / inline-size;
}

.recording-controls__transport {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

/* Корень MudSelect (.mud-select, OuterClass) — flex-grow: 1: в ряду на всю ширину он съел бы свободное место (поле 96px
   осталось бы у момента, справа пустота), и margin-inline-end: auto у момента не сработал бы. */
.recording-controls__rate {
    flex: none;
}

/* Селектор устройства в шапке плеера: тот же flex-grow у .mud-select растягивал бы поле на всю свободную часть шапки. */
.recording-device {
    --orion-field: 240px;
    max-width: 360px;
}

@container recording-controls (max-width: 419.98px) {
    .recording-controls__transport {
        flex: 1 1 100%;
        justify-content: center;
    }

    .recording-controls__tools {
        flex: 1 1 100%;
        margin-inline-start: 0;
    }

    .recording-controls__moment {
        margin-inline-end: auto;
    }
}

/* Значение карточки «Контекст записи» (dl.orion-kv): моноширинно и мельче — UUID, слои, id тренера. */
.recording-context__value {
    font-size: 0.75rem;
}

/* Лента «События сессии» (.orion-feed): отступы как у заголовка карточки (подсветка и фокус пункта-кнопки — общие, app.css). */
.recording-events > .orion-feed__item {
    padding-inline: 12px;
}

.recording-events__dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    flex: none;
}

/* --- Экран эмулятора (Pages/EmulatorScreen.razor) --------------------------------------------------------------------
   Полоса управления на телефоне: «Переподключить» и «Закрыть» — одними значками (подпись остаётся в aria-label), строка
   «RedHive: статус · сессия» — своей строкой с многоточием (не прячется: тултипа на касании нет), кнопки — группой
   ниже. Полоса ниже и аккуратнее, высота остаётся картинке. */

@media (max-width: 600px) {
    .emulator-screen__bar .emulator-screen__text-button {
        min-width: 0;
        padding-inline: 6px;
    }

    /* Не ниже (0,3,0): у MudBlazor .mud-button-label .mud-button-icon-start.mud-button-icon-size-small (отступ 8px после
       значка) — иначе значок без подписи стоит не по центру. */
    .emulator-screen__text-button .mud-button-label .mud-button-icon-start {
        margin: 0;
    }

    .emulator-screen__button-text {
        display: none;
    }

    /* Статус — сразу под id и фазой, кнопки — последними. */
    .emulator-screen__session {
        order: 1;
        flex: 1 1 100%;
    }

    .emulator-screen__bar > .orion-toolbar__end {
        order: 2;
    }
}

/* Комментарий к ревизии в ряду кнопок редактора: минимум и потолок — классом на корне поля. Style у MudTextField уходит
   на внутренний input, и корень тянулся бы на весь ряд. */
.template-editor__comment {
    --orion-field: 220px;
    max-width: 420px;
}