/* Главная #home (home.js) — редизайн 2026-10-22 по канве, принятой владельцем: вывод и полоса статусов, карточки объектов
   с тревогами, остальные объекты со шкалой нормы, объекты без датчиков пилюлями, эфир строкой. Цвета — только токены темы:
   красный (--serious) — выше нормы и тревоги иного рода, синий (--warn) — ниже нормы, зелёный — норма, серый — нет связи. */
.hm { display: flex; flex-direction: column; gap: 44px; padding-top: 8px; }
.hm .num { font-variant-numeric: tabular-nums; }

/* шапка: вывод слева, цифры справа */
.hm-hero { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 32px; align-items: stretch; }
.hm-hero-l { display: flex; flex-direction: column; gap: 14px; min-width: 0; padding-top: 6px; }
.hm-eyebrow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; color: var(--fg-2); }
.hm-dot { width: 3px; height: 3px; border-radius: 50%; background: var(--fg-2); }
.hm-greet { font-size: 20px; font-weight: 600; color: var(--fg); letter-spacing: -0.01em; }
.hm-verdict { margin: 0; font-size: clamp(34px, 4.2vw, 54px); line-height: 1.05; font-weight: 700; letter-spacing: -0.035em; max-width: 16ch; }
.hm-verdict.crit .hm-hot { color: var(--serious); }
.hm-verdict.warn { color: var(--fg); }
.hm-verdict.ok { color: var(--fg); }
.hm-bar { display: flex; gap: 4px; height: 10px; max-width: 560px; margin-top: 6px; }
.hm-bar:empty { display: none; }
.hm-bar.dense { gap: 1px; }
.hm-seg { flex: 1 1 0; min-width: 2px; border-radius: 4px; background: var(--card-3); transition: transform 0.15s, filter 0.15s; }
.hm-bar.dense .hm-seg { border-radius: 1px; }
.hm-seg:hover, .hm-seg:focus-visible { transform: scaleY(1.6); filter: brightness(1.15); outline: none; }
.hm-seg.high { background: var(--serious); } .hm-seg.low { background: var(--warn); } .hm-seg.ok { background: var(--good); } .hm-seg.stale { background: var(--stale); }
.hm-seg.soft { opacity: 0.45; }
.hm-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--fg-2); }
.hm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.hm-sw { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--card-3); font-style: normal; }
.hm-sw.high { background: var(--serious); } .hm-sw.low { background: var(--warn); } .hm-sw.ok { background: var(--good); } .hm-sw.stale { background: var(--stale); } .hm-sw.none { background: var(--hair-2); }
.hm-cta { display: flex; flex-wrap: wrap; gap: 10px; padding-top: 6px; }
.hm-cta:empty { display: none; }
.hm-btn { text-decoration: none; min-height: 44px; padding-inline: 18px; border-radius: 12px; font-weight: 600; gap: 8px; }
.hm-btn:not(.primary) { font-weight: 500; }

.hm-hero-r { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.hm-kpi { display: flex; flex-direction: column; gap: 12px; padding: 20px 22px; border-radius: 20px; background: var(--card); border: 1px solid var(--hair); }
.hm-kpi-n { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.hm-kpi-n b { font-size: 38px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; }
.hm-kpi-n b small { font-size: 22px; font-weight: 500; color: var(--fg-2); }
.hm-kpi-n > span { color: var(--fg-2); }
.hm-dseg { display: flex; gap: 2px; height: 6px; border-radius: 3px; overflow: hidden; background: var(--card-3); }
.hm-dseg i { display: block; min-width: 3px; } .hm-dseg .g { background: var(--good); } .hm-dseg .y { background: var(--amber); } .hm-dseg .z { background: var(--stale); } .hm-dseg .n { background: var(--hair-2); }
.hm-kpi-l { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; font-size: 13px; color: var(--fg-2); text-decoration: none; }
.hm-kpi-l.amber { color: var(--amber); }
a.hm-kpi-l:hover { color: var(--fg); }
.hm-pulse { flex-direction: row; align-items: center; gap: 14px; padding-block: 16px; }
.hm-pulse-t { min-width: 0; } .hm-pulse-t > div { color: var(--fg-2); } .hm-pulse-t b { color: var(--fg); font-weight: 600; }
.hm-pulse-t > span { display: block; font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-beat { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--stale); }
.hm-beat.on { background: var(--accent); box-shadow: 0 0 0 5px var(--accent-soft); }
.hm-beat::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--accent); opacity: 0; }
.hm-beat.go::after { animation: hmbeat 1.4s ease-out; }
@keyframes hmbeat { 0% { transform: scale(1); opacity: 0.9; } 100% { transform: scale(3.4); opacity: 0; } }

/* секции */
.hm-sec { display: flex; flex-direction: column; gap: 16px; scroll-margin-top: 72px; }
.hm-sec[hidden] { display: none; }
.hm-sec-h { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.hm-sec-h h2 { margin: 0; font-size: 22px; font-weight: 650; letter-spacing: -0.02em; }
.hm-sub { color: var(--fg-2); }
.hm-more-l { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--fg-2); text-decoration: none; font-size: 14px; }
.hm-more-l:hover { color: var(--fg); }
.hm-views { margin-inline-start: auto; display: inline-flex; gap: 2px; padding: 3px; border-radius: 12px; background: var(--card); border: 1px solid var(--hair); }
.hm-views a { padding: 6px 12px; border-radius: 9px; font-size: 13px; color: var(--fg-2); text-decoration: none; }
.hm-views a:hover { background: var(--hover); color: var(--fg); }
.hm-more { align-self: flex-start; padding: 8px 4px; border: 0; background: none; color: var(--accent); font: inherit; font-size: 14px; cursor: pointer; }

/* тревоги на каналах без датчиков */
.hm-orph { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 12px 16px; border-radius: 16px; background: rgba(234,179,8,0.10); color: var(--fg-2); }
.hm-orph > svg { color: var(--amber); flex: none; }
.hm-orph > span { flex: 1 1 320px; min-width: 0; }

/* крупные карточки объектов с тревогами */
.hm-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.hm-oc { display: flex; flex-direction: column; min-width: 0; border-radius: 22px; overflow: hidden; background: var(--card); border: 1px solid var(--hair); color: var(--fg); text-decoration: none; transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; }
.hm-oc:hover, .hm-oc:focus-visible { transform: translateY(-2px); border-color: rgba(255,107,0,0.45); box-shadow: 0 14px 32px rgba(0,0,0,0.25); outline: none; }
.hm-oc-ph { position: relative; height: 172px; background: var(--card-2); }
.hm-oc-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-oc-ph::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 35%, rgba(0,0,0,0.78) 100%); pointer-events: none; }
.hm-oc-ph.nophoto::after { background: none; }
.hm-noph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--fg-2); }
.hm-noph svg { width: 52px; height: 52px; stroke-width: 1.4; opacity: 0.7; }
.hm-oc-t { position: absolute; inset-inline: 18px; bottom: 14px; z-index: 1; display: flex; flex-direction: column; color: #fff; min-width: 0; }
.hm-oc-ph.nophoto .hm-oc-t { color: var(--fg); }
.hm-oc-t b { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-oc-t span { font-size: 13px; opacity: 0.85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-pill { position: absolute; top: 14px; inset-inline-start: 14px; z-index: 1; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; color: #fff; background: var(--stale); }
.hm-pill.high { background: var(--serious); } .hm-pill.low { background: var(--warn); } .hm-pill.ok { background: var(--good); }
.hm-pill.glass { inset-inline-start: auto; inset-inline-end: 14px; background: rgba(10,10,11,0.55); font-weight: 500; backdrop-filter: blur(10px); }
.hm-oc-b { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px 18px; flex: 1 1 auto; }
.hm-iss { display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.hm-iss > div { min-width: 0; display: flex; flex-direction: column; }
.hm-iss b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-iss span:not(.hm-iss-ic) { font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-iss-ic { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 10px; background: var(--card-2); color: var(--fg-2); }
.hm-iss-ic svg { width: 17px; height: 17px; }
.hm-iss.high .hm-iss-ic { background: var(--serious-soft); color: var(--serious); }
.hm-iss.low .hm-iss-ic { background: var(--warn-soft); color: var(--warn); }
.hm-oc-f { margin-top: auto; display: flex; align-items: center; gap: 12px; padding-top: 12px; border-top: 1px solid var(--hair); }

/* значение со шкалой нормы */
.hm-val { display: inline-flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.hm-val b { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; }
.hm-val small { font-size: 13px; color: var(--fg-2); font-weight: 500; }
.hm-val.high b { color: var(--serious); } .hm-val.low b { color: var(--warn); } .hm-val.stale b { color: var(--fg-2); }
.hm-scale { position: relative; flex: 1 1 auto; min-width: 40px; height: 6px; border-radius: 3px; background: var(--card-3); }
.hm-band { position: absolute; top: 0; bottom: 0; border-radius: 3px; background: var(--good-soft); box-shadow: inset 0 0 0 1px rgba(34,197,94,0.25); }
.hm-mark { position: absolute; top: 50%; width: 12px; height: 12px; margin-inline-start: -6px; margin-top: -6px; border-radius: 50%; background: var(--good); box-shadow: 0 0 0 3px var(--card); }
.hm-mark.high { background: var(--serious); } .hm-mark.low { background: var(--warn); } .hm-mark.stale { background: var(--stale); }
.hm-state { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--card-2); font-size: 13px; color: var(--fg-2); }
.hm-state.high { background: var(--serious-soft); color: var(--serious); }

/* строки остальных тревог */
.hm-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.hm-row { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 10px 14px 10px 10px; border-radius: 16px; background: var(--card); border: 1px solid var(--hair); color: var(--fg); text-decoration: none; }
.hm-row:hover { border-color: rgba(255,107,0,0.45); }
.hm-row-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hm-row-m b { display: flex; align-items: center; gap: 8px; font-weight: 600; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.hm-row-m > span { font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-row-t { font-size: 12px; color: var(--fg-2); white-space: nowrap; }
.hm-th { position: relative; width: 52px; height: 52px; flex: none; border-radius: 12px; overflow: hidden; background: var(--card-2); }
.hm-th.lg { width: 76px; height: 76px; border-radius: 14px; }
.hm-th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hm-th .hm-noph svg { width: 26px; height: 26px; }

/* остальные объекты */
.hm-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.hm-tile { display: flex; align-items: center; gap: 16px; min-width: 0; padding: 14px; border-radius: 20px; background: var(--card); border: 1px solid var(--hair); color: var(--fg); text-decoration: none; transition: border-color 0.15s; }
.hm-tile:hover { border-color: rgba(255,107,0,0.45); }
.hm-tile-m { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.hm-tile-m > b { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; min-width: 0; }
.hm-tile-m > b span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-tile-v { display: flex; align-items: center; gap: 12px; min-width: 0; }
.hm-tile-v .hm-val b { font-size: 18px; }
.hm-tile-s { font-size: 13px; color: var(--fg-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-oc.flash, .hm-tile.flash { animation: hmflash 1.2s ease-out; }
@keyframes hmflash { 0% { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } }

/* без датчиков — пилюлями по группам */
.hm-bare { display: flex; flex-direction: column; gap: 12px; padding: 18px 20px; border-radius: 20px; background: var(--card); border: 1px solid var(--hair); }
.hm-bare-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-bare-h b { font-weight: 600; }
.hm-bare-h a { margin-inline-start: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--accent); text-decoration: none; }
.hm-bare-g { display: flex; gap: 12px; align-items: flex-start; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--hair); }
.hm-bare-n { flex: 0 0 170px; padding-top: 5px; font-size: 13px; color: var(--fg-2); overflow-wrap: anywhere; }
.hm-bare-l { flex: 1 1 360px; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.hm-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 240px; padding: 3px 12px 3px 3px; border-radius: 999px; background: var(--card-2); color: var(--fg); font-size: 13px; text-decoration: none; }
.hm-chip:hover { background: var(--hover); }
.hm-chip > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-chip-ph { width: 26px; height: 26px; flex: none; display: grid; place-items: center; border-radius: 50%; overflow: hidden; background: var(--card-3); font-size: 10px; font-weight: 700; color: var(--fg-2); }
.hm-chip-ph img { width: 100%; height: 100%; object-fit: cover; }

/* эфир — строка последних пакетов, инженерный вид */
.hm-air { display: flex; align-items: center; gap: 8px 18px; flex-wrap: wrap; padding: 12px 16px; border-radius: 18px; background: var(--card); border: 1px solid var(--hair); }
.hm-air-h { display: inline-flex; align-items: center; gap: 8px; } .hm-air-h svg { color: var(--accent); }
.hm-live { width: 7px; height: 7px; border-radius: 50%; background: var(--stale); }
.hm-live.on { background: var(--accent); animation: hmblink 1.6s ease-in-out infinite; }
@keyframes hmblink { 50% { opacity: 0.25; } }
.hm-air-i { display: inline-flex; align-items: baseline; gap: 6px; padding: 4px 6px; border: 0; border-radius: 8px; background: none; color: var(--fg-2); font: inherit; font-size: 13px; cursor: pointer; }
.hm-air-i:hover { background: var(--hover); }
.hm-air-i b { color: var(--fg); font-weight: 500; }
.hm-air-w { font-size: 13px; color: var(--fg-2); }

@media (max-width: 960px) {
  .hm-hero { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .hm-hero-r { flex-direction: row; } .hm-hero-r > .hm-kpi { flex: 1 1 0; min-width: 0; }
}
@media (max-width: 640px) {
  .hm { gap: 32px; }
  .hm-greet { font-size: 17px; }
  .hm-hero-r { flex-direction: column; }
  .hm-kpi { padding: 16px; } .hm-kpi-n b { font-size: 30px; }
  .hm-cards, .hm-tiles, .hm-rows { grid-template-columns: minmax(0, 1fr); }
  .hm-oc-ph { height: 150px; }
  .hm-views { margin-inline-start: 0; width: 100%; } .hm-views a { flex: 1 1 0; text-align: center; }
  .hm-bare-n { flex-basis: 100%; padding-top: 0; }
  .hm-sec-h .hm-sub { flex-basis: 100%; order: 3; }
}
@media (prefers-reduced-motion: reduce) { .hm-beat.go::after, .hm-live.on, .hm-oc.flash, .hm-tile.flash { animation: none !important; } .hm-oc:hover { transform: none; } }