/* ============================================================================
   HERMES UI · Component Kit
   Переиспользуемые компоненты. Зависит только от tokens.css.
   Соглашение об именах: .h-<block>[__element][--modifier]  (BEM-lite)
   ============================================================================ */

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button { font: inherit; color: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* --- Иконки (Lucide inline SVG) ------------------------------------------ */
.h-icon { display: inline-block; vertical-align: middle; flex: none; }

/* Цветная точка-маркер команды (заменяет эмодзи в переключателе/пилюле) */
.team-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }

/* --- Утилиты типографики ------------------------------------------------- */
.h-h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.02em; }
.h-h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); letter-spacing: -0.01em; }
.h-h3 { font-size: var(--fs-lg);  font-weight: var(--fw-semibold); }
.h-title { font-size: var(--fs-md); font-weight: var(--fw-semibold); }
.h-body { font-size: var(--fs-md); color: var(--text); }
.h-caption { font-size: var(--fs-xs); color: var(--text-soft); }
.h-overline {
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute);
}
.h-num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.text-pos { color: var(--pos); }
.text-neg { color: var(--neg); }
.text-soft { color: var(--text-soft); }
.text-mute { color: var(--text-mute); }

/* --- Кнопки -------------------------------------------------------------- */
.h-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--tap-target); padding: 0 var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-md);
  font-size: var(--fs-md); font-weight: var(--fw-semibold);
  background: var(--bg-elev-2); color: var(--text);
  transition: transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease), opacity var(--dur-fast);
  user-select: none;
}
.h-btn:active { transform: scale(0.97); }
.h-btn[disabled] { opacity: 0.45; pointer-events: none; }
.h-btn--primary { background: var(--brand); color: var(--text-on-brand); }
.h-btn--ghost   { background: transparent; color: var(--brand); }
.h-btn--outline { background: transparent; border-color: var(--border); color: var(--text); }
.h-btn--block   { display: flex; width: 100%; }
.h-btn--sm      { min-height: 36px; padding: 0 var(--sp-3); font-size: var(--fs-sm); border-radius: var(--r-sm); }
.h-btn--icon    { padding: 0; width: var(--tap-target); }

/* --- Карточка ------------------------------------------------------------ */
.h-card {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.h-card--flush { padding: 0; overflow: hidden; }
.h-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3); margin-bottom: var(--sp-3);
}

/* --- Hero / Balance card ------------------------------------------------- */
.h-hero {
  position: relative; overflow: hidden;
  border-radius: var(--r-xl); padding: var(--sp-6);
  color: #fff;
  background:
    radial-gradient(120% 140% at 90% -10%, rgba(255,255,255,.22), transparent 55%),
    linear-gradient(135deg, var(--brand), var(--c-brand-600));
  box-shadow: var(--shadow-md);
}
.h-hero__label { font-size: var(--fs-sm); opacity: .85; }
.h-hero__value { font-size: var(--fs-3xl); font-weight: var(--fw-bold); line-height: var(--lh-tight); margin: var(--sp-1) 0; }
.h-hero__foot  { display: flex; align-items: center; gap: var(--sp-2); margin-top: var(--sp-3); font-size: var(--fs-sm); opacity: .92; }

/* --- Stat (мини-метрика) ------------------------------------------------- */
.h-stat { display: flex; flex-direction: column; gap: var(--sp-1); }
.h-stat__label { font-size: var(--fs-xs); color: var(--text-soft); display: flex; align-items: center; gap: 6px; }
.h-stat__value { font-size: var(--fs-xl); font-weight: var(--fw-bold); }
.h-stat__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; }

/* --- Бейдж / чип --------------------------------------------------------- */
.h-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 8px; border-radius: var(--r-full);
  font-size: var(--fs-2xs); font-weight: var(--fw-semibold);
  background: var(--bg-elev-2); color: var(--text-soft);
}
.h-badge--pos { background: var(--pos-soft); color: var(--pos); }
.h-badge--neg { background: var(--neg-soft); color: var(--neg); }
.h-badge--brand { background: var(--brand-soft); color: var(--brand); }

/* --- Segmented control --------------------------------------------------- */
.h-segment {
  display: inline-flex; padding: 3px; gap: 2px;
  background: var(--bg-sunken); border-radius: var(--r-full);
  width: 100%;
}
.h-segment__item {
  flex: 1; min-height: 36px; padding: 0 var(--sp-3); border: none;
  border-radius: var(--r-full); background: transparent; color: var(--text-soft);
  font-size: var(--fs-sm); font-weight: var(--fw-semibold);
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.h-segment__item[aria-selected="true"] {
  background: var(--bg-elev); color: var(--text); box-shadow: var(--shadow-sm);
}

/* --- Avatar -------------------------------------------------------------- */
.h-avatar {
  width: 40px; height: 40px; border-radius: var(--r-full);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: var(--fs-lg); flex: none;
  background: var(--bg-elev-2);
}
.h-avatar--sm { width: 32px; height: 32px; font-size: var(--fs-md); }

/* --- List item / транзакция --------------------------------------------- */
.h-list { display: flex; flex-direction: column; }
.h-item {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border-soft);
  min-height: var(--tap-target);
  transition: background var(--dur-fast);
}
.h-item:last-child { border-bottom: none; }
.h-item:active { background: var(--bg-elev-2); }
.h-item__icon {
  width: 40px; height: 40px; border-radius: var(--r-md); flex: none;
  display: inline-flex; align-items: center; justify-content: center; font-size: var(--fs-lg);
  background: var(--bg-elev-2);
}
.h-item__body { flex: 1; min-width: 0; }
.h-item__title { font-size: var(--fs-md); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-item__sub { font-size: var(--fs-xs); color: var(--text-soft); }
.h-item__amount { font-family: var(--font-num); font-weight: var(--fw-semibold); white-space: nowrap; }

/* --- Section header ------------------------------------------------------ */
.h-section-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 var(--sp-1); margin: var(--sp-5) 0 var(--sp-2);
}

/* --- Divider ------------------------------------------------------------- */
.h-divider { height: 1px; background: var(--border-soft); border: none; margin: 0; }

/* --- Skeleton ------------------------------------------------------------ */
.h-skeleton {
  background: var(--skeleton); background-size: 400% 100%;
  border-radius: var(--r-sm); animation: h-shimmer 1.3s ease-in-out infinite;
}
@keyframes h-shimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* --- Empty state --------------------------------------------------------- */
.h-empty { text-align: center; padding: var(--sp-10) var(--sp-6); color: var(--text-soft); }
.h-empty__emoji { font-size: 40px; margin-bottom: var(--sp-3); }

/* --- Bottom navigation --------------------------------------------------- */
.h-nav {
  position: sticky; bottom: 0; z-index: 20;
  display: flex; gap: var(--sp-1);
  height: var(--nav-h); padding: 6px var(--sp-2);
  padding-bottom: calc(6px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--bg-elev) 88%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  border-top: 1px solid var(--border-soft);
}
.h-nav__item {
  flex: 1; border: none; background: transparent; border-radius: var(--r-md);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: var(--text-mute); font-size: var(--fs-2xs); font-weight: var(--fw-medium);
  transition: color var(--dur-fast);
}
.h-nav__item[aria-current="page"] { color: var(--brand); }
.h-nav__ico { font-size: 20px; line-height: 1; }

/* --- App bar ------------------------------------------------------------- */
.h-appbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; gap: var(--sp-3);
  height: var(--header-h); padding: 0 var(--sp-4);
  padding-top: env(safe-area-inset-top);
  background: color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
}
.h-appbar__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); flex: 1; }

/* --- Грид помощники ------------------------------------------------------ */
.h-row { display: flex; gap: var(--sp-3); }
.h-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.h-stack > * + * { margin-top: var(--sp-3); }

/* --- Доступность --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}