/*
  Оболочка приложения: только то, чего нет и не может быть в дизайн-системе, — загрузка каркаса и сообщение об ошибке
  Blazor. Всё остальное берётся из bm.css (токены и компоненты прототипа) и подключается им же: литералов цвета и размера
  здесь нет, кроме тех, что нужны до загрузки дизайн-системы.
*/
html, body {
    margin: 0;
    background: var(--c-bg, #0A0E11);
    color: var(--c-text, #DCE4E8);
}

h1:focus {
    outline: none;
}

/* Пока каркас грузится, дизайн-системы ещё нет: эти значения — единственные литералы оболочки. */
.loading-progress-text {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: #9AAAB4;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    color: #000;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/*
  Формы входа: их в прототипе нет (вход рисуется этой задачей), поэтому несколько правил живут здесь — но только на
  токенах дизайн-системы, без своих цветов и размеров.
*/
.auth {
    width: 100%;
    max-width: 30rem;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.field__hint {
    color: var(--c-text-2);
    font-size: var(--fs-sm);
}

/* Экран роли до своей задачи: честная заглушка и то, что уже приходит потоком. */
.screen {
    width: 100%;
    max-width: var(--page-w);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: var(--sp-4);
}

.counters {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-3);
}

.counter {
    display: flex;
    flex-direction: column;
    gap: var(--sp-1);
    padding: var(--sp-3);
    border: var(--bw-1) solid var(--c-line);
    border-radius: var(--r-2);
    background: var(--c-surface-1);
    min-width: 8rem;
}

.counter__value {
    font-family: var(--font-mono);
    font-size: var(--fs-lg);
    color: var(--c-text);
}

/*
  Карта и знаки ([[Задача 032]]): компонент .map-wrap/.map и знаки аппаратов — целиком из bm.css (та же карта, что в
  ролевых экранах будет жить в grid-раскладке с готовой высотой строки); здесь только высота для места, где карты
  верстают без такой раскладки — витрина разработки, свободный текстовый поток.
*/
.map-demo {
    height: 26rem;
}

/* .map-wrap (bm.css) не задаёт себе высоту — в раскладке ролей её даёт grid-строка; здесь высоту даёт .map-demo. */
.map-demo > .map-wrap {
    height: 100%;
}

.draw-tools {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-3);
}

.sign-grid {
    width: 100%;
    border-collapse: collapse;
    margin-top: var(--sp-3);
}

.sign-grid th, .sign-grid td {
    padding: var(--sp-2);
    border: var(--bw-1) solid var(--c-line);
    text-align: center;
    font-size: var(--fs-sm);
}

.sign-grid th:first-child, .sign-grid td:first-child {
    text-align: left;
}

.sign-grid__na {
    color: var(--c-text-2);
    font-style: italic;
}

.sign-cell {
    display: inline-flex;
    width: var(--sign-map);
    height: var(--sign-map);
}

.sign-showcase {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-5);
    margin-top: var(--sp-3);
}

.sign-showcase figure {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-2);
    margin: 0;
}

.sign-cell--big {
    width: var(--sign-sheet);
    height: var(--sign-sheet);
}

/* .sign сама задаёт себе --sign-map (bm.css) — здесь перекрываем только внутри крупной ячейки витрины. */
.sign-cell--big .sign {
    width: var(--sign-sheet);
    height: var(--sign-sheet);
}

/*
  Место базирования подразделения на карте ([[Задача 033]]): точка и подпись — не знак аппарата (bm.css рисует только
  знаки на прототипе через .base-box — грид на базе; здесь проще, одна подписанная точка), поэтому пара своих правил
  на токенах bm.css, не литералах.
*/
.leaflet-interactive.base-mark {
    fill: var(--c-text-2);
    stroke: var(--c-bg);
    stroke-width: var(--bw-2);
}

.base-mark-label {
    background: var(--c-surface-1);
    border: var(--bw-1) solid var(--c-line);
    color: var(--c-text-2);
    font-size: var(--fs-xs);
    padding: 0 var(--sp-1);
}