/* Beacon поверх instrument.

   Правило то же, что у справочника кита: здесь допустимо только то, что
   принадлежит ЭТОМУ приложению — расположение его собственных блоков. Если
   для показа компонента понадобилось его дооформить, значит, дыра в ките, и
   чинить надо кит.

   Всё лежит вне слоёв, поэтому выигрывает у кита без единого !important. */

/* ── Шапка ────────────────────────────────────────────────────────────── */

/* Плашка «Вид»: строка на настройку, подпись над контролом. */
.beacon-view-body { display: flex; flex-direction: column; gap: var(--space-5); padding: var(--space-3); }
/* В плашке вида контролы намеренно во всю ширину: селект темы и сегментация
   плотности стоят друг под другом, и по содержимому они разъезжались бы по
   разной ширине. Это решение композиции, а не забытое align-self — в колонках
   кита такое не растягивается. */
.beacon-view-row { display: flex; flex-direction: column; gap: var(--space-3); }
.beacon-view-row .inst-select-wrap,
.beacon-view-row .inst-segmented { inline-size: 100%; }

/* ── Полоса истории ───────────────────────────────────────────────────── */

/* Здесь было полсотни строк: ось часов, её ячейки, контейнерный запрос,
   прореживающий подписи, образец «не проверяли» в легенде и высота геройской
   полосы. Всё это уехало в кит — `.inst-history-axis`, `.inst-history-axis-cell`,
   `data-minor`, `.inst-legend-swatch[data-empty]`, `.inst-history--lg`, — и
   уехало по правилу, записанному в шапке этого файла: если для показа
   компонента понадобилось его дооформить, дыра в ките.

   Самая дорогая из них — зазор. Ось повторяла раскладку групп теми же долями
   --n и ОБЯЗАНА была совпасть с китовым зазором до пикселя: разойдись он — и к
   двадцать четвёртому часу подпись уезжала от своего столбца на два десятка.
   Это требование держалось на том, что двух файлов никто не тронет
   одновременно. Теперь обе строки раскладывает одно правило внутри кита, и
   расходиться нечему.

   Осталось одно — расположение СВОИХ блоков, а это ровно то, что этому файлу и
   можно. Полоса и ось приносят свои отступы сами, легенде его нужно дать. */
.beacon-strip > .inst-legend { margin-block-start: var(--space-4); }

/* The monitor name is a link, and a line of text is 17px tall — under the 24px
   tap minimum once the density is compact. The kit's own answer to a small
   target is to grow the AREA and leave the glyph alone; the row is already
   tall enough to hold it, so the area simply reaches the row's edges.

   Not a stretched link over the whole row: the row also carries a kebab menu,
   and one target swallowing another is a worse bug than the one being fixed. */
.inst-task-title a {
  position: relative;
}
.inst-task-title a::before {
  content: "";
  position: absolute;
  inset-block: calc((var(--tap-min) - 1lh) / -2);
  inset-inline: 0;
  min-block-size: var(--tap-min);
}

/* Row colouring — optional, switched in Settings. The tone comes from the
   kit's vocabulary rather than a local rgba: "ok" and "error" are declared
   once and follow the theme.

   Only the queue row is left to colour: the card and table views are gone, and
   with them the two other selectors this rule used to carry. */
[data-colorize-up="1"] .inst-task[data-status="up"] { background: var(--ok-bg); }
[data-colorize-down="1"] .inst-task[data-status="down"] { background: var(--err-bg); }

/* The time of the last check sits in a column of fixed width: it updates every
   few seconds, and a number that changes width makes the whole row twitch. */
.beacon-when {
  display: inline-block;
  inline-size: 5.5rem;
  text-align: end;
  color: var(--text-muted);
  font-size: var(--text-xs);
}

/* ── Полоса действий на уровне СТРАНИЦЫ ───────────────────────────────── */

/* Форма, которая сохраняет несколько панелей сразу, кладёт полосу действий не
   в панель, а на страницу. Кит красит её только внутри тела панели, и это его
   осознанное решение: заливка требует знать поле родителя, а у полосы в потоке
   страницы его нет.

   Липкой она при этом остаётся — и без заливки под ней ехало видимое
   содержимое, то есть полоса переставала быть дном.

   Поверхность здесь — страничная, потому что дном полоса служит именно
   странице. Ручка для этого у кита предусмотрена (--form-actions-bg), так что
   переопределять правило не приходится. */
.inst-container > .inst-form-actions,
.inst-container > form > .inst-form-actions {
  --form-actions-bg: var(--surface-page);
}

/* ── Вход ─────────────────────────────────────────────────────────────── */

/* Единственный экран без оболочки: одна карточка по центру. Ни градиента,
   ни свечения — конституция кита запрещает оба, и на плоском макете они
   означали бы, что вход важнее того, ради чего в него входят. */
.beacon-login {
  display: grid;
  place-items: center;
  min-block-size: 100dvh;
  padding: var(--pad-panel);
}
.beacon-login-card { inline-size: min(24rem, 100%); }
.beacon-login-card .inst-btn { inline-size: 100%; }

/* ── Настройки ────────────────────────────────────────────────────────── */

/* Ряд получателя: поля в строку, метка и кнопки за ними. Раскладка своя,
   потому что это композиция приложения; вид полей и кнопок — от кита. */
.notify-row {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-3);
}
.notify-row + .notify-row { margin-block-start: var(--space-3); }
.notify-row__fields { display: flex; flex: 1 1 16rem; gap: var(--space-3); min-inline-size: 0; }
.notify-row__fields .inst-input { flex: 1 1 8rem; min-inline-size: 0; }
.notify-row__actions { display: flex; gap: var(--space-2); }
.notify-row-meta { font-size: var(--text-xs); color: var(--text-muted); white-space: nowrap; }
.notify-row-meta__custom { color: var(--text-primary); }

/* Исход проверки получателя, стоящий рядом с кнопкой «Test». Размер и ритм —
   от подсказки поля кита, тон — из его же словаря: --tone-ink объявлен один
   раз на [data-tone] и едет вместе с темой.

   Цвет здесь не единственный носитель смысла и потому закона кита не нарушает:
   исход написан словами («Sent», «Rate limited»), а цвет их подкрашивает. */
.inst-field-hint[data-tone] { color: var(--tone-ink); }

/* Канал: режим, подсказка, список, кнопка добавления — стопкой. */

/* Поле, у которого рядом с подписью стоит действие («Down template · Reset»).
   Сеткой inst-field--side кнопка попадает в колонку контрола и прилипает к
   её краю: у поля кита нет места под действие подписи, и выдумывать его в
   разметке нельзя — это композиция приложения. */
.beacon-field-action {
  display: flex; align-items: center; gap: var(--space-4);
  margin-block-end: var(--space-3);
}
.beacon-field-action .inst-label { margin: 0; }

/* ── Модалки ──────────────────────────────────────────────────────────── */

/* Кнопка раскрытия («HTTP options», «Notification overrides») стоит в строке
   и не тянется: она открывает группу, а не подтверждает форму. */
.beacon-disclosure { align-self: start; inline-size: max-content; }

/* Свёрнутая группа не занимает места. Раскрытие — на классе, потому что его
   ставит скрипт приложения; кит здесь ни при чём. */
.beacon-collapse:not(.is-open) { display: none; }
.beacon-collapse.is-open { display: flex; flex-direction: column; gap: var(--pad-panel); }

/* Плейсхолдеры шаблона — ряд кнопок вставки. Их одиннадцать, и они тише
   действий: это подстановка в поле, а не команда. */
[data-policy-chips] { row-gap: var(--space-2); }