/* ═══════════════════════════════════════════════════════════════════
   Страница «Обзор» + общие детали зоны AUTH (Обзор, Журнал, Пользователи).
   Владелец - зона AUTH. Префикс hm-. Детали ниже (счётчики, аватары,
   таблица-полосы, заголовок группы) используют и journal.js, и users.js;
   кандидаты в base.css как .counters / .ava / .strip.
   ═══════════════════════════════════════════════════════════════════ */

/* ─────────── счётчики: число и пояснение в одну строку (как «Пульс») ─────────── */
.hm-counters { display: grid; grid-template-columns: repeat(var(--hm-cols, 6), minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.hm-counters--5 { --hm-cols: 5; }
.hm-counter { display: flex; flex-direction: column; gap: 4px; min-width: 0; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-tile); padding: 13px 17px 14px;
  animation: hm-rise .45s var(--ease) both; transition: border-color var(--dur-fast) var(--ease); }
button.hm-counter { cursor: pointer; }
button.hm-counter:hover { border-color: #C8C8CE; }
.hm-counter:nth-child(2) { animation-delay: .04s; } .hm-counter:nth-child(3) { animation-delay: .08s; }
.hm-counter:nth-child(4) { animation-delay: .12s; } .hm-counter:nth-child(5) { animation-delay: .16s; }
.hm-counter:nth-child(6) { animation-delay: .2s; }
.hm-counter__label { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: #9A9AA0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-counter__row { display: flex; align-items: baseline; gap: 4px 8px; flex-wrap: wrap; min-width: 0; }
.hm-counter__n { font-size: 32px; font-weight: 500; letter-spacing: -.03em; line-height: 1.15; }
.hm-counter__note { font-size: 12.5px; color: var(--muted); min-width: 0; }
.hm-counter__note b { font-weight: 600; color: var(--ink-2); }
.hm-counter__note .is-rust { color: var(--rust); font-weight: 600; }
.hm-counter.is-zero .hm-counter__n { color: var(--faint-2); }
.hm-counter--dark { background: var(--ink); border-color: var(--ink); color: #fff; }
.hm-counter--dark .hm-counter__label, .hm-counter--dark .hm-counter__note { color: #8A8A90; }
.hm-counter--dark .hm-counter__note b { color: #fff; }
.hm-counter--dark.is-zero .hm-counter__n { color: #6A6A70; }
button.hm-counter--dark:hover { border-color: var(--ink); background: var(--obsidian-2); }
.hm-counter--alarm { background: #FEF6F3; border-color: var(--rust-line); }
.hm-counter--alarm .hm-counter__n { color: var(--rust); }
.hm-counter--alarm .hm-counter__label::before { content: ''; width: 6px; height: 6px; border-radius: 99px; background: var(--rust); flex: none; }
.hm-counter.is-on { outline: 2px solid var(--ink); outline-offset: -2px; }
@keyframes hm-rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ─────────── аватар ─────────── */
.hm-ava { width: 28px; height: 28px; border-radius: 999px; display: inline-grid; place-items: center; flex: none;
  font-size: 10.5px; font-weight: 600; letter-spacing: .02em; color: #fff; background: var(--teal); }
.hm-ava--sys { background: var(--surface-3); color: var(--muted); }
.hm-ava--api { background: var(--ink); color: var(--lime); font-family: var(--mono); font-size: 9.5px; }
.hm-ava--anon { background: var(--surface-3); color: var(--faint); }

/* ─────────── заголовок группы над листом (как «Задачи») ─────────── */
.hm-group { display: flex; align-items: center; gap: 10px; margin: 26px 0 10px; flex-wrap: wrap; }
.hm-group__dot { width: 8px; height: 8px; border-radius: 99px; background: var(--ink); flex: none; }
.hm-group__title { font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.hm-group__cnt { font-family: var(--mono); font-size: 11px; color: var(--muted); background: #E6E6EB; border-radius: 6px; padding: 0 7px; line-height: 19px; }
.hm-group__note { font-size: 12.5px; color: var(--faint); min-width: 0; }
.hm-group__end { margin-left: auto; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hm-group__line { flex: 1; height: 1px; background: var(--hair); min-width: 24px; }

/* ─────────── таблица-полосы: белый лист, строки с волосяной линией ─────────── */
.hm-strip { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); overflow: hidden; }
.hm-strip__head, .hm-strip__row { display: grid; grid-template-columns: var(--cols); gap: 14px; align-items: center; padding: 0 18px 0 21px; }
.hm-strip__head { font-family: var(--mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--faint-2);
  background: var(--surface-2); border-bottom: 1px solid var(--hair-sep); height: 34px; }
.hm-strip__head > * { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hm-strip__row { position: relative; min-height: 58px; padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hair-sep);
  transition: background-color var(--dur-fast) var(--ease); }
.hm-strip__row:last-child { border-bottom: 0; }
.hm-strip__row:hover { background: #FCFCFD; }
.hm-strip__row.is-click { cursor: pointer; }
.hm-strip__row > * { min-width: 0; }
.hm-strip__bar { position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: transparent; }
.hm-strip__bar--rust { background: var(--rust); } .hm-strip__bar--amber { background: #D9A441; }
.hm-strip__bar--moss { background: var(--moss); } .hm-strip__bar--faint { background: var(--hair-2); }
.hm-strip__title { font-size: 14.5px; font-weight: 600; letter-spacing: -.008em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-strip__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 7px; margin-top: 2px; font-size: 12.5px; color: var(--muted); min-width: 0; }
.hm-strip__mono { font-family: var(--mono); font-size: 11.5px; color: var(--muted); }
.hm-strip__end { display: flex; justify-content: flex-end; gap: 6px; flex-wrap: wrap; }
.hm-strip__more { display: flex; align-items: center; gap: 12px; padding: 12px 21px; border-top: 1px solid var(--hair-sep); background: var(--surface-2);
  font-size: 12.5px; color: var(--faint); flex-wrap: wrap; }
.hm-sep { color: #C8C8CE; }
.hm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.hm-who__txt { min-width: 0; }
.hm-who__name { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-who__sub { font-size: 12px; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Тихая строка-пояснение (продуктив, хранение) */
.hm-note { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px; border-radius: var(--r-tile); background: var(--surface);
  border: 1px solid var(--hair); font-size: 13.5px; color: var(--ink-2); }
.hm-note__ico { width: 30px; height: 30px; border-radius: 9px; background: var(--teal-wash); color: var(--teal); display: grid; place-items: center; flex: none; }
.hm-note__ico svg { width: 16px; height: 16px; }
.hm-note b { font-weight: 600; color: var(--ink); }
.hm-note__body { flex: 1; min-width: 0; }
.hm-note__body p { color: var(--muted); margin-top: 2px; }
.hm-foot { margin-top: 26px; text-align: center; font-size: 12px; color: var(--faint); }

/* ═══════════════════════════════ страница «Обзор» ═══════════════════════════════ */

.hm-head__end { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.hm-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 16px; margin-bottom: 16px; }
.hm-span-7 { grid-column: span 7; } .hm-span-5 { grid-column: span 5; } .hm-span-12 { grid-column: span 12; }
.hm-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--r-card); padding: 18px 20px 20px; min-width: 0;
  animation: hm-rise .5s var(--ease) both; display: flex; flex-direction: column; }
.hm-card__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 14px; min-width: 0; }
.hm-card__title { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.hm-card__title { flex: none; }
.hm-card__sub { font-size: 12.5px; color: var(--faint); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-card__link { margin-left: auto; font-size: 12.5px; white-space: nowrap; }

/* Активность: колонки по дням (как «Ритм команды») */
.hm-bars { display: flex; align-items: flex-end; gap: var(--gap, 14px); height: 196px; padding-top: 8px; position: relative; }
.hm-bars__col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 7px; height: 100%; justify-content: flex-end; }
.hm-bars__lbl { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; }
.hm-bars__lbl b { color: var(--ink); font-weight: 600; font-size: 11.5px; }
.hm-bars__stack { width: 100%; max-width: 54px; min-height: 6px; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: 8px; overflow: hidden; background: var(--surface-3); transform-origin: bottom; animation: hm-grow .7s var(--ease) both; }
.hm-bars__fill { background: var(--ink); }
.hm-bars__col.is-today .hm-bars__fill { background: var(--lime); }
.hm-bars__x { font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; height: 14px; }
.hm-bars__col.is-today .hm-bars__x { color: var(--ink); font-weight: 600; }
.hm-bars--dense .hm-bars__stack { border-radius: 4px; }
@keyframes hm-grow { from { transform: scaleY(0); } to { transform: none; } }
.hm-bars__empty { position: absolute; inset: 0 0 26px; display: grid; place-items: center; text-align: center; pointer-events: none; }
.hm-bars__empty div { background: var(--surface); border: 1px solid var(--hair); border-radius: 12px; padding: 10px 16px; font-size: 13px; color: var(--muted); }
.hm-bars__empty b { display: block; color: var(--ink); font-size: 14px; }
.hm-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; font-size: 12.5px; color: var(--muted); }
.hm-legend span { display: inline-flex; align-items: center; gap: 7px; }
.hm-legend i { width: 9px; height: 9px; border-radius: 3px; background: var(--ink); }
.hm-legend i.is-light { background: var(--surface-3); border: 1px solid var(--hair); }
.hm-sums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair-sep); }
.hm-sums b { display: block; font-size: 26px; font-weight: 500; letter-spacing: -.03em; line-height: 1.2; }
.hm-sums span { font-size: 12.5px; color: var(--muted); }

/* Последние действия */
.hm-feed { display: flex; flex-direction: column; margin: -4px 0; }
.hm-feed__row { display: flex; gap: 11px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--hair-sep); min-width: 0; }
.hm-feed__row:last-child { border-bottom: 0; }
.hm-feed__body { flex: 1; min-width: 0; }
.hm-feed__title { font-size: 13.5px; line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hm-feed__title b { font-weight: 600; }
.hm-feed__meta { font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 1px; }
.hm-feed__time { font-family: var(--mono); font-size: 11px; color: var(--faint); white-space: nowrap; padding-top: 2px; text-align: right; }
.hm-feed__time .tag { margin-top: 4px; font-family: var(--sans); }
.hm-t-short { display: none; }

/* Кто работал */
.hm-people { --cols: minmax(210px, 1.7fr) minmax(60px, 1fr) 64px 76px 124px; margin: 0 -20px -20px; border: 0; border-top: 1px solid var(--hair-sep); border-radius: 0 0 var(--r-card) var(--r-card); }
.hm-people .hm-strip__head { padding: 0 20px; }
.hm-people .hm-strip__row { padding: 9px 20px; min-height: 52px; }
.hm-people .num { text-align: right; font-family: var(--mono); font-size: 13px; }
.hm-people .hm-who__name { white-space: normal; line-height: 1.3; }
.hm-meter { height: 8px; border-radius: 99px; background: var(--surface-3); display: flex; overflow: hidden; }
.hm-meter i { display: block; height: 100%; background: var(--ink); }
.hm-meter i.is-light { background: var(--hair-2); }

/* Сервисы: быстрые входы */
.hm-svc { display: flex; flex-direction: column; margin: -6px -10px; }
.hm-svc__row { display: flex; align-items: center; gap: 13px; padding: 11px 10px; border-radius: 12px; color: var(--ink);
  text-decoration: none !important; transition: background-color var(--dur-fast) var(--ease); min-width: 0; }
.hm-svc__row + .hm-svc__row { border-top: 1px solid var(--hair-sep); }
.hm-svc__row:hover { background: var(--surface-2); border-top-color: transparent; }
.hm-svc__row:hover + .hm-svc__row { border-top-color: transparent; }
.hm-svc__ico { width: 36px; height: 36px; border-radius: 11px; background: var(--surface-3); display: grid; place-items: center; flex: none; color: var(--ink-2); }
.hm-svc__ico svg { width: 18px; height: 18px; }
.hm-svc__body { flex: 1; min-width: 0; }
.hm-svc__title { font-size: 14px; font-weight: 600; }
.hm-svc__note { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.hm-svc__n { text-align: right; flex: none; }
.hm-svc__n b { display: block; font-size: 18px; font-weight: 500; letter-spacing: -.02em; }
.hm-svc__n span { font-family: var(--mono); font-size: 10.5px; color: var(--faint); white-space: nowrap; }
.hm-svc__go { color: var(--faint); flex: none; }
.hm-svc__go svg { width: 16px; height: 16px; }
.hm-svc--wide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; }
.hm-svc--wide .hm-svc__row + .hm-svc__row { border-top: 0; }

/* Скелет загрузки */
.hm-skel { background: var(--surface-3); border-radius: var(--r-tile); animation: hm-breath 1.4s ease-in-out infinite; }
@keyframes hm-breath { 50% { opacity: .5; } }

/* ─────────── адаптив ─────────── */
@media (max-width: 1280px) {
  .hm-people { --cols: minmax(0, 2.4fr) minmax(40px, .8fr) 52px 70px 112px; }
  .hm-counters { --hm-cols: 3 !important; }
  .hm-counters--5 { --hm-cols: 5 !important; }
}
@media (max-width: 1100px) {
  .hm-span-7, .hm-span-5 { grid-column: span 12; }
}
@media (max-width: 720px) {
  .hm-counters, .hm-counters--5 { --hm-cols: 2 !important; gap: 8px; }
  .hm-counters--5 .hm-counter:last-child:nth-child(odd) { grid-column: span 2; }
  .hm-counter { padding: 12px 14px; }
  .hm-counter__n { font-size: 26px; }
  .hm-head__end { width: 100%; }
  .hm-card { padding: 16px; }
  .hm-bars { gap: 6px; height: 176px; }
  .hm-bars__lbl { font-size: 10px; }
  .hm-bars__lbl b { font-size: 10.5px; }
  .hm-sums { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .hm-sums > div { display: flex; align-items: baseline; gap: 10px; }
  .hm-sums b { font-size: 22px; }
  .hm-people { margin: 0 -16px -16px; --cols: minmax(0, 1fr) 56px; }
  .hm-people .hm-strip__head { display: none; }
  .hm-people .hm-strip__row { padding: 10px 16px; }
  .hm-people .hm-col-bar, .hm-people .hm-col-svc, .hm-people .hm-col-last { display: none; }
  .hm-svc__note { white-space: normal; }
  .hm-svc__n span { display: none; }
  .hm-feed__title { white-space: normal; }
  .hm-t-full { display: none; }
  .hm-t-short { display: inline; }
  .hm-strip__head, .hm-strip__row { padding-left: 17px; padding-right: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-counter, .hm-card, .hm-bars__stack { animation: none; }
}

/* Метка записи демо-наполнения (data/auth/seed.json) */
.hm-demo { display: inline-block; font-family: var(--mono); font-size: 9.5px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); border: 1px solid var(--hair); border-radius: 5px; padding: 0 5px; line-height: 15px; vertical-align: 1px; white-space: nowrap; }