/* Панель HafetzNew — оформление.
 *
 * Язык тот же, что у сайта («Vigil»): тёплый чёрный фон, одна янтарная
 * искра как единственный акцент. Но здесь акцент — рабочий: им помечены
 * состояния и кнопки, которые меняют состояние. Декоративного ничего.
 *
 * Токен: [Text.Encoding]::UTF8 при чтении, (New-Object Text.UTF8Encoding $false)
 * при записи — иначе кириллица в комментариях станет «Р Ѱр».
 */

:root {
  --ink: #f2ece2;
  --ink-dim: #a89e91;
  --ink-faint: #6f675d;
  --ground: #12100e;
  --ground-2: #1a1714;
  --ground-3: #23201b;
  --line: #322d26;
  --line-bright: #4a4239;
  --flame: #e8a33d;
  --flame-dim: #8a6224;
  --live: #6fbf73;
  --bad: #e0685c;
  --warn: #d9b44a;

  --radius: 10px;
  --tap: 44px; /* минимальная цель: 44px по WCAG 2.5.5 */
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ground);
  color: var(--ink);
  font: 15px/1.5 "Segoe UI", system-ui, -apple-system, sans-serif;
  /* Панель — не документ: нечего выделять текст в интерфейсе целиком. */
  -webkit-text-size-adjust: 100%;
}

:focus-visible {
  outline: 2px solid var(--flame);
  outline-offset: 2px;
}

[hidden] { display: none !important; }

/* ------------------------------------------------------------------ вход */

.login {
  /* Сначала vh, потом dvh. Без запасного варианта в старом браузере
     экран входа не занимал бы весь экран, и форма оказалась бы у самой
     верхней кромки, а не по центру. */
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px;
}

.login__card {
  width: min(420px, 100%);
  display: grid;
  gap: 14px;
}

.login__title { margin: 0; font-size: 22px; font-weight: 600; }
.login__sub { margin: 0; color: var(--ink-dim); font-size: 13px; }
.login__note { margin: 0; color: var(--ink-faint); font-size: 12px; line-height: 1.45; }

/* ---------------------------------------------------------------- карточки */

.card {
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px;
}

.card + .card { margin-top: 14px; }

.card__title {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 600;
}

.card__note {
  margin: 0 0 14px;
  color: var(--ink-dim);
  font-size: 13px;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ поля */

.field { display: grid; gap: 6px; }

.field__label { font-size: 12px; color: var(--ink-dim); }

.field input,
.field select,
.field textarea {
  width: 100%;
  min-height: var(--tap);
  padding: 10px 12px;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  font: inherit;
}

.field textarea { min-height: 96px; resize: vertical; line-height: 1.45; }

.field input::placeholder,
.field textarea::placeholder { color: var(--ink-faint); }

.field--row {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* Флажок. Сам элемент — 13px, и это меньше цели нажатия. Клик по метке
   работает, но площадь касания узкая: попасть надо точно в квадрат. */
/* Поэтому метка становится настоящей целью: она на всю ширину и не ниже
   44px, а сам флажок внутри — крупнее и не прячется. */
.check {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 4px 10px 4px 4px;
  border-radius: 8px;
  cursor: pointer;
}

.check input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin: 0;
  accent-color: var(--flame);
  cursor: pointer;
}

/* ---------------------------------------------------------------- кнопки */

.btn {
  min-height: var(--tap);
  padding: 0 16px;
  border-radius: 8px;
  border: 1px solid var(--line-bright);
  background: var(--ground-3);
  color: var(--ink);
  font: inherit;
  cursor: pointer;
}

.btn:hover:not(:disabled) { border-color: var(--flame-dim); }
.btn:disabled { opacity: .45; cursor: not-allowed; }

.btn--primary {
  background: var(--flame);
  border-color: var(--flame);
  color: #201603;
  font-weight: 600;
}

.btn--danger { border-color: var(--bad); color: var(--bad); }
.btn--quiet { background: transparent; }
/* Кнопка выглядит компактной, но остаётся ЦЕЛЬЮ НАЖАТИЯ 44px. */
/* Раньше здесь стояло 34px — меньше, чем объявленный в :root --tap: 44px,
   то есть правило для малых кнопок перебивало правило для всех. Стенд
   адаптива нашёл это на 320 и 390 во всех разделах: «Сохранить»,
   «Вернуть», «Заменить», «Убрать», «Проверить заново» — все 34px. */
.btn--small {
  min-height: var(--tap);
  padding: 0 12px;
  font-size: 13px;
}

/* -------------------------------------------------------------- верх, меню */

.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: var(--ground-2);
  border-bottom: 1px solid var(--line);
}

.topbar__menu {
  display: none;
  min-width: var(--tap);
  min-height: var(--tap);
  background: transparent;
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  color: var(--ink);
  font-size: 18px;
  cursor: pointer;
}

.topbar__brand {
  font-weight: 600;
  /* На узком экране название ужимается, а не выталкивает шапку.
     Без этого на 320px кнопка «Выйти» уезжала за край на 11px и
     страница прокручивалась вбок. min-width: 0 обязателен: флекс-
     элемент по умолчанию не сжимается меньше содержимого. */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.topbar__who { margin-left: auto; color: var(--ink-dim); font-size: 13px; }

/* Кнопка «Выйти» на узком экране подписывается коротко: полное «Выйти»
   плюс длинное название не помещались в 320px. */
.topbar .btn--quiet { flex: none; }

.nav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 10px 14px;
  background: var(--ground);
  border-bottom: 1px solid var(--line);
}

.nav__item {
  min-height: var(--tap);
  padding: 0 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--ink-dim);
  font: inherit;
  cursor: pointer;
}

.nav__item:hover { color: var(--ink); }
.nav__item[aria-current="page"] {
  color: var(--ink);
  background: var(--ground-3);
  border-color: var(--line-bright);
}

/* Значок «здесь что-то не сделано» — точка, а не крестик: раздел виден,
 * но не готов, и это не ошибка. */
.nav__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--warn);
  flex: none;
}

.view { padding: 16px 14px 60px; max-width: 1180px; }

/* ------------------------------------------------------------- показатели */

.facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.fact {
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.fact__label { display: block; color: var(--ink-dim); font-size: 12px; }

.fact__value {
  display: block;
  margin-top: 4px;
  font-size: 19px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.fact__value--live { color: var(--live); }
.fact__value--off { color: var(--ink-faint); }
.fact__value--none { color: var(--ink-faint); font-size: 15px; font-weight: 400; }

.dot {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-faint);
  margin-right: 7px;
  vertical-align: baseline;
}

.dot--live { background: var(--live); animation: pulse 1.8s ease-in-out infinite; }
.dot--off { background: var(--ink-faint); }
.dot--bad { background: var(--bad); }

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
  .dot--live { animation: none; }
}

/* -------------------------------------------------------------- сообщения */

.alert {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid var(--line-bright);
  background: var(--ground-3);
  font-size: 13px;
  line-height: 1.5;
}

.alert--bad { border-color: var(--bad); color: var(--bad); }
.alert--warn { border-color: var(--warn); color: var(--warn); }
.alert--good { border-color: var(--live); color: var(--live); }

.muted { color: var(--ink-dim); }
.faint { color: var(--ink-faint); font-size: 12px; }
.mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: 13px; }

/* ------------------------------------------------------------------ таблица */

.table { width: 100%; border-collapse: collapse; font-size: 13px; }

.table th, .table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

.table th { color: var(--ink-dim); font-weight: 500; white-space: nowrap; }

.table td.num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ------------------------------------------------------------------ тексты */

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-bottom: 12px;
}

.toolbar input[type="search"],
.toolbar select {
  min-height: var(--tap);
  padding: 0 12px;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  font: inherit;
}

.toolbar input[type="search"] { flex: 1 1 220px; min-width: 0; }

/* minmax(0, 1fr) вместо 1fr — обязателен.
   У грид-элемента по умолчанию min-width:auto, поэтому дорожка НЕ МОЖЕТ
   стать уже своего содержимого: широкая строка внутри карточки
   (поле выбора файла плюс кнопки) растягивала дорожку, а с ней весь
   раздел. На окне 320px карточка фотографии выходила на 439px, и
   страница уезжала вбок. minmax(0, 1fr) говорит дорожке: содержимое
   может быть шире тебя, но сжимайся ты, а не я. */
.keys { display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); }

.key {
  background: var(--ground-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px;
}

.key--changed { border-color: var(--flame-dim); }

.key__head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: baseline;
  margin-bottom: 10px;
}

.key__path { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.key__group { color: var(--ink-faint); font-size: 12px; }

.key__badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--flame-dim);
  color: #1d1405;
  font-size: 11px;
  font-weight: 600;
}

.key__langs { display: grid; gap: 10px; grid-template-columns: 1fr; }

@media (min-width: 900px) {
  .key__langs { grid-template-columns: repeat(3, 1fr); }
}

.key__lang { display: grid; gap: 5px; }
.key__langlabel { font-size: 11px; color: var(--ink-faint); }
.key__lang--locked textarea { opacity: .55; }
.key__actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-top: 8px;
  /* Перенос обязателен: поле выбора файла плюс три кнопки не помещаются
     в 320px, и без переноса весь ряд становился шириной карточки. */
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ плеер */

.player {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  border: 1px solid var(--line-bright);
  border-radius: var(--radius);
  display: block;
}

/* -------------------------------------------------------------------- лог */

.filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.filters input, .filters select {
  /* 38px было ниже цели нажатия. */
  min-height: var(--tap);
  padding: 0 10px;
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--line-bright);
  border-radius: 8px;
  font: inherit;
  font-size: 13px;
}

/* ------------------------------------------------------------- фотографии */

.photo__row {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 10px;
  /* На узком экране превью и текст не помещаются в строку: карточка
     становилась 441px шириной при окне 320px, и страница уезжала
     вбок. Обёртка позволяет превью уйти на свою строку целиком. */
  flex-wrap: wrap;
}

@media (max-width: 420px) {
  .photo__thumb,
  .photo__noimg {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }
}

.photo__thumb {
  width: 140px;
  height: 96px;
  flex: none;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid var(--line-bright);
  background: var(--ground);
}

/* Вместо битой рамки, когда превью не пришло. Чаще всего это значит, что
   сайт не собран или папка не подключена, — и об этом надо сказать прямо. */
.photo__noimg {
  width: 140px;
  height: 96px;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: 8px;
  border: 1px dashed var(--line-bright);
  color: var(--ink-faint);
  font-size: 12px;
}

.photo__meta { display: grid; gap: 3px; min-width: 0; }

.photo__file {
  /* Раньше 38px — тоже меньше цели нажатия. */
  min-height: var(--tap);
  font-size: 13px;
  color: var(--ink-dim);
  /* По умолчанию поле файла не сжимается: у него есть собственная ширина,
     поэтому рядом с кнопками карточка распиралась. Без min-width: 0 поле
     не даёт сжаться — это ровно то, что ломало раскладку на 320px. */
  min-width: 0;
}
.key--generated { border-color: var(--flame-dim); }
.key__badge--calm { background: var(--ground-3); color: var(--ink-dim); }
/* ------------------------------------------------------------------ тост */

.toast {
  position: fixed;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  z-index: 50;
  max-width: min(520px, calc(100vw - 28px));
  padding: 11px 16px;
  border-radius: 8px;
  border: 1px solid var(--line-bright);
  background: var(--ground-3);
  font-size: 13px;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .5);
}

.toast--bad { border-color: var(--bad); color: var(--bad); }
.toast--good { border-color: var(--live); color: var(--live); }

/* ------------------------------------------------------------- телефон */

@media (max-width: 720px) {
  .topbar__menu { display: block; }
  .topbar__who { display: none; }
  .nav {
    display: none;
    flex-direction: column;
  }
  .nav--open { display: flex; }
  .view { padding: 12px 10px 60px; }
  .field--row { grid-template-columns: 1fr; }
  .key__badge { margin-left: 0; }
}
/* ---------------------------------------------------------------- настройки */

.settinggroup {
  margin: 14px 0 4px;
  padding: 12px 0 0;
  border-top: 1px solid var(--line);
}

.settinggroup__title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-dim);
}

.setting {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}

.setting:last-child { border-bottom: none; }
.setting .faint { margin: 6px 0 0; line-height: 1.45; }
.setting .field { max-width: 260px; }

/* Недоступная настройка видна, но заблокирована. Прятать нельзя: иначе
   человек не узнает, что показатель существует и не измеряется. */
.setting--off { opacity: .72; }

.setting__why {
  margin: 8px 0 0;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px dashed var(--warn);
  color: var(--warn);
  font-size: 12px;
  line-height: 1.45;
}