/* family-plus.css — стили фазы F8 «Расширенная семья»: дела / аптечка / дети / документы / кошельки.
   Только токены из tokens.css. Состояние — полным бордером/фон-тинтом/иконкой (не border-left-акцентом,
   см. DESIGN_TOKENS_HEARTH.md §6). Раскладки — на базе .hc-form__row (health.css) и .hc-card. */

/* ── Общее: карточка-строка списка (дело/лекарство/документ/кошелёк) ── */
.hc-row-card {
  display: flex; flex-direction: column; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-4);
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--surface);
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.hc-row-card:hover { box-shadow: var(--shadow-sm); border-color: var(--line-mid); }
.hc-row-card.is-warn   { border-color: color-mix(in oklch, var(--warn) 45%, var(--line));   background: color-mix(in oklab, var(--warn-soft) 30%, var(--surface)); }
.hc-row-card.is-danger { border-color: color-mix(in oklch, var(--danger) 45%, var(--line)); background: color-mix(in oklab, var(--danger-soft) 30%, var(--surface)); }
.hc-row-card.is-ok     { border-color: color-mix(in oklch, var(--ok) 40%, var(--line));     background: color-mix(in oklab, var(--ok-soft) 24%, var(--surface)); }

.hc-row-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.hc-row-card__title { font-family: var(--disp); font-weight: 500; font-size: 1.08rem; }
.hc-row-card__meta { color: var(--ink-dim); font-size: var(--fs-sm); display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-3); }
.hc-row-card__actions { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.hc-row-card__badges { display: flex; gap: var(--sp-1); flex-wrap: wrap; }

.hc-grid { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.hc-list-tight { display: flex; flex-direction: column; gap: var(--sp-2); }

.hc-toolbar { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-4); align-items: center; justify-content: space-between; }
.hc-toolbar__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }

/* ── Чекбокс-список участников (members.js) ─────────────────────────── */
.hc-checklist { display: flex; flex-direction: column; gap: var(--sp-1); max-height: 220px; overflow: auto; }
.hc-checklist__item { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-1) 0; cursor: pointer; }
.hc-checklist__input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }

/* ── Дела: группировка по дню ─────────────────────────────────────── */
.hc-chore-day { margin-bottom: var(--sp-4); }
.hc-chore-day__label { font-family: var(--disp); font-weight: 500; color: var(--ink-dim); margin-bottom: var(--sp-2); }
.hc-chore-turn { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.hc-chore-turn__who { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; }
.hc-chore-turn__name { font-weight: 500; }

/* ── Дети: карточка профиля ───────────────────────────────────────── */
.hc-child-card { display: flex; align-items: center; gap: var(--sp-3); cursor: pointer; }
.hc-child-card__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hc-child-card__age { color: var(--ink-dim); font-size: var(--fs-sm); }

.hc-growth-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hc-growth-table th, .hc-growth-table td { text-align: left; padding: var(--sp-2) var(--sp-2); border-bottom: 1px solid var(--line); font-size: var(--fs-sm); }
.hc-growth-table th { color: var(--ink-dim); font-weight: 500; }

/* ── Документы: пары ключ-значение ───────────────────────────────── */
.hc-kv { display: flex; flex-direction: column; gap: var(--sp-2); }
.hc-kv__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.hc-kv__row b { font-weight: 500; }
.hc-payload-row { display: grid; grid-template-columns: 1fr 1fr auto; gap: var(--sp-2); align-items: center; }

/* ── Кошельки: сводка ─────────────────────────────────────────────── */
.hc-wallet-summary { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); margin-bottom: var(--sp-4); }
.hc-wallet-summary__tile { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.hc-wallet-summary__label { color: var(--ink-dim); font-size: var(--fs-sm); }
.hc-wallet-summary__value { font-family: var(--mono); font-size: var(--fs-h2); font-variant-numeric: tabular-nums; }
.hc-wallet-card__balance { font-family: var(--mono); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }

/* ── Бюджет: сводка (план/факт), категории, копилки ──────────────────── */
.hc-money-summary { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: var(--sp-4); }
.hc-money-summary__tile { padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
.hc-money-summary__label { color: var(--ink-dim); font-size: var(--fs-sm); }
.hc-money-summary__value { font-family: var(--mono); font-size: var(--fs-h3); font-variant-numeric: tabular-nums; }
.hc-money-summary__value.is-income { color: var(--ok-strong); }
.hc-money-summary__value.is-expense { color: var(--danger-strong); }

.hc-cat-swatch { display: inline-block; width: 12px; height: 12px; border-radius: 999px; border: 1px solid var(--line-mid); flex: none; }

/* Полоса прогресса копилки — заполнение шириной в %, готово = ok-цвет. */
.hc-goal-progress { height: 8px; border-radius: 999px; background: var(--line-mid); overflow: hidden; margin: var(--sp-2) 0; }
.hc-goal-progress__fill { height: 100%; background: var(--brand); border-radius: inherit; transition: width var(--dur) var(--ease-out); }
.hc-goal-progress__fill.is-done { background: var(--ok); }
.hc-goal-card__amounts { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); font-variant-numeric: tabular-nums; }
.hc-goal-card__current { font-family: var(--mono); font-size: var(--fs-h3); }
.hc-goal-card__target { color: var(--ink-dim); font-size: var(--fs-sm); }
.hc-goal-card__percent { color: var(--ink-dim); font-size: var(--fs-sm); text-align: right; }

.hc-split-balances { display: flex; flex-direction: column; gap: var(--sp-1); font-variant-numeric: tabular-nums; }
.hc-split-balances__row { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-1) 0; border-bottom: 1px dashed var(--line); font-size: var(--fs-sm); }
.hc-split-balances__row b.is-pos { color: var(--ok-strong); }
.hc-split-balances__row b.is-neg { color: var(--danger-strong); }

/* ── «Мы»: настроение, привычки-стрики, баланс инициативы, традиции ─── */
.hc-mood-picker { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.hc-mood-picker__btn {
  flex: 1 1 0; font-size: 1.6rem; line-height: 1; padding: var(--sp-2) 0;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  cursor: pointer; transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.hc-mood-picker__btn:hover { border-color: var(--line-mid); }
.hc-mood-picker__btn.is-active { border-color: var(--brand); background: var(--brand-soft); transform: translateY(-2px); }
.hc-mood-emoji { font-size: 1.1rem; }

.hc-mood-dist { display: flex; flex-direction: column; gap: var(--sp-1); margin: var(--sp-2) 0; }
.hc-mood-dist__row { display: grid; grid-template-columns: 1.6rem 1fr 2rem; align-items: center; gap: var(--sp-2); }
.hc-mood-dist__bar { height: 6px; border-radius: 999px; background: var(--line-mid); overflow: hidden; }
.hc-mood-dist__fill { height: 100%; background: var(--brand); border-radius: inherit; transition: width var(--dur) var(--ease-out); }
.hc-mood-dist__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--ink-dim); font-size: var(--fs-sm); }

.hc-streak-dots { display: flex; gap: 4px; margin: var(--sp-1) 0; }
.hc-streak-dots__d { width: 8px; height: 8px; border-radius: 999px; background: var(--line-mid); flex: none; }
.hc-streak-dots__d.is-done { background: var(--ok); }

.hc-initiative-row { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-2); }

/* ── Задачи: строка дела и шкала прогресса (5.14) ─────────────────────
   Переиспользует .hc-row-card и .hc-progress-bar — своих примитивов не заводит,
   иначе у продукта стало бы две разные полоски прогресса на соседних экранах. */
.hc-task-progress-box { margin: var(--sp-3) 0; }
.hc-task-progress__row { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--sp-2); }
.hc-task-row__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2); }
.hc-task-row__title { font-weight: 600; }
/* Выполненная задача гасится, но остаётся читаемой: зачёркнутый серый текст на сером
   фоне уходит ниже порога контраста (аудит a11y 5.12), поэтому только приглушение. */
.hc-task-row.is-done .hc-task-row__title { color: var(--ink-dim); text-decoration: line-through; }

/* ── Хотелки: миниатюра желания, ссылка ──────────────────────────────── */
.hc-wish-card__img {
  width: 100%; height: 140px; object-fit: cover; border-radius: var(--r-sm);
  background: var(--surface-2);
}
.hc-wish-card__link { font-size: var(--fs-sm); color: var(--brand-strong); word-break: break-all; }

/* ── Вотчлист: постер + карточка тайтла ──────────────────────────────── */
.hc-watch-card__top { display: flex; gap: var(--sp-3); align-items: flex-start; }
.hc-watch-card__poster {
  flex: none; width: 64px; height: 96px; object-fit: cover; border-radius: var(--r-sm);
  background: var(--surface-2);
}
.hc-watch-card__poster--blank {
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; color: var(--ink-ghost);
}
.hc-watch-card__info { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
.hc-watch-card__score { max-width: 220px; }

/* ── Достижения: прогресс, бейджи, обои, виджет (F9) ─────────────────── */
.hc-progress-bar { height: 8px; border-radius: 999px; background: var(--line-mid); overflow: hidden; }
.hc-progress-bar__fill { height: 100%; background: var(--brand); border-radius: inherit; transition: width var(--dur) var(--ease-out); }

.hc-badge-emoji { font-size: 1.4rem; display: inline-block; margin-right: var(--sp-1); }
.hc-badge-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hc-badge-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); }

.hc-wallpaper-tab { display: flex; flex-direction: column; gap: var(--sp-4); }
.hc-wallpaper-current { display: flex; flex-direction: column; gap: var(--sp-3); }
.hc-wallpaper-preset {
  width: 100%; height: 160px; border-radius: var(--r);
  display: flex; align-items: center; justify-content: center;
  font-weight: 500; color: var(--surface);
}
.hc-wallpaper-img {
  width: 100%; height: 160px; object-fit: cover; border-radius: var(--r);
  background: var(--surface-2);
}
.hc-wallpaper-empty {
  width: 100%; height: 160px; border-radius: var(--r);
  border: 2px dashed var(--line-mid); background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-dim); text-align: center; padding: var(--sp-3);
}

.hc-widget-tab { display: flex; flex-direction: column; gap: var(--sp-4); }
.hc-widget-header { margin-bottom: var(--sp-2); }
.hc-progress-stat { display: flex; justify-content: space-between; align-items: center; }
.hc-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.hc-list-item { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-sm); padding: var(--sp-2) 0; }
.hc-list-item:not(:last-child) { border-bottom: 1px solid var(--line); }
.hc-text-dim { color: var(--ink-dim); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .hc-row-card { transition: none; }
  .hc-goal-progress__fill { transition: none; }
  .hc-mood-picker__btn { transition: none; }
  .hc-mood-dist__fill { transition: none; }
}

/* ── Адаптив ≤ 480px: формы и панели действий в один столбец ────────── */
@media (max-width: 480px) {
  .hc-payload-row { grid-template-columns: 1fr; }
  .hc-toolbar { flex-direction: column; align-items: stretch; }
  .hc-toolbar__actions { flex-direction: column; }
  .hc-row-card__actions { width: 100%; }
  .hc-row-card__actions .hc-btn { flex: 1 1 auto; }
}