/* settings.css — экран настроек: таймзона (семейная и личная), выгрузка архива,
   журнал выдач архива. Только токены Hearth, никаких сырых цветов.
   Тьма отдельно не объявляется: всё построено на токенах, которые её уже знают. */

.hc-settings { display: flex; flex-direction: column; gap: var(--sp-5); margin-top: var(--sp-4); }

/* ── Таймзона ─────────────────────────────────────────────────────── */
.hc-tz { display: flex; flex-direction: column; gap: var(--sp-5); }
.hc-tz__hint { font-size: var(--fs-sm); color: var(--ink-dim); margin: 0 0 var(--sp-3); }
.hc-tz__note {
  font-size: var(--fs-xs); color: var(--ink-dim); margin: var(--sp-3) 0 0;
  padding-left: var(--sp-3); border-left: 2px solid var(--line);
}
/* Часы в выбранной зоне: единственное, что делает выбор проверяемым глазами. */
.hc-tz__clock {
  margin: var(--sp-3) 0 0; font: 600 var(--fs-lg)/1.2 var(--display, var(--body));
  font-variant-numeric: tabular-nums; color: var(--ink);
}
.hc-tz__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }

/* ── Выгрузка архива ──────────────────────────────────────────────── */
.hc-export { display: flex; flex-direction: column; gap: var(--sp-5); }
.hc-export__hint { font-size: var(--fs-sm); color: var(--ink-dim); margin: 0 0 var(--sp-3); }
.hc-export__note { font-size: var(--fs-xs); color: var(--ink-dim); margin: var(--sp-2) 0 var(--sp-4); }
.hc-export__list { display: flex; flex-direction: column; gap: var(--sp-4); }
.hc-export__row {
  display: flex; align-items: center; gap: var(--sp-3);
  margin: 0 0 var(--sp-2); font-size: var(--fs-sm);
}
.hc-export__label { min-width: 108px; color: var(--ink-dim); }
.hc-export__err {
  margin: var(--sp-2) 0 0; padding: var(--sp-2) var(--sp-3);
  background: var(--danger-soft); color: var(--danger-strong);
  border-radius: var(--r-sm); font-size: var(--fs-sm);
}
.hc-export__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); margin-top: var(--sp-4); }
.hc-export__dl { display: inline-flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.hc-export__progress { font-size: var(--fs-sm); color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.hc-export__hintsmall { font-size: var(--fs-xs); color: var(--ink-dim); }

/* ── Журнал выдач ─────────────────────────────────────────────────── */
.hc-audit__wrap { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.hc-audit { display: contents; }
.hc-audit__summary {
  display: flex; flex-direction: column; gap: var(--sp-1);
  padding: var(--sp-3); border-radius: var(--r-sm); background: var(--surface-2);
}
.hc-audit__stat { margin: 0; font-size: var(--fs-sm); color: var(--ink); }
.hc-audit__list { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; }
.hc-audit__item {
  display: grid; grid-template-columns: minmax(9rem, auto) 1fr auto auto;
  gap: var(--sp-3); align-items: baseline;
  padding: var(--sp-2) 0; border-bottom: 1px solid var(--line);
  font-size: var(--fs-sm);
}
.hc-audit__item:last-child { border-bottom: none; }
.hc-audit__when { color: var(--ink-dim); font-variant-numeric: tabular-nums; }
.hc-audit__who { font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.hc-audit__mode { color: var(--ink-dim); }
.hc-audit__vol { font-variant-numeric: tabular-nums; }
.hc-audit__note {
  margin: var(--sp-3) 0 0; font-size: var(--fs-xs); color: var(--ink-dim);
  padding-left: var(--sp-3); border-left: 2px solid var(--line);
}

@media (max-width: 560px) {
  /* На узком экране строка журнала перестаёт быть таблицей: время и «кто» сверху,
     режим и объём — второй строкой, иначе колонки схлопываются в кашу. */
  .hc-audit__item { grid-template-columns: 1fr auto; row-gap: var(--sp-1); }
  .hc-export__label { min-width: 0; }
  .hc-export__row { flex-direction: column; align-items: flex-start; gap: var(--sp-1); }
}

/* ── Кнопки дочитывания страниц (лента и галерея, курсорная пагинация) ── */
.hc-feed__more, .hc-gallery__more { align-self: center; margin: var(--sp-4) auto 0; display: block; }
.hc-map__hint--capped { color: var(--warn-strong); }

/* Кнопка настроек в подвале сайдбара — рядом с выходом, тот же размер. */
.hc-user__settings {
  border: none; background: transparent; color: var(--ink-inv-dim); cursor: pointer;
  width: 34px; height: 34px; border-radius: var(--r-sm); flex: none; font-size: 1.05rem;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.hc-user__settings:hover { background: var(--line-inv); color: var(--ink-inv); }