/* ═══════════════════════════════════════════════════════════
   фидоня.дети — Поверхности: стекло, панели, разделители
   ═══════════════════════════════════════════════════════════ */

/* Стекло — основной материал. На широких экранах с размытием
   подложки, на телефонах плотная заливка: размытие там дорого. */
.glass {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-3);
  box-shadow: var(--shadow-2), var(--glow);
  backdrop-filter: blur(24px) saturate(1.5);
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
}

.glass-sm {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
}


/* Полоса сверху: прозрачная, с размытием того, что под ней */
.bar {
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid var(--border-1);
  backdrop-filter: blur(20px) saturate(1.6);
  -webkit-backdrop-filter: blur(20px) saturate(1.6);
}

.hairline { height: 1px; background: var(--border-1); border: 0; margin: var(--s-4) 0; }

/* ── Сгруппированный список ──────────────────────────────
   Строки в общей рамке с волосяными разделителями —
   так связанные настройки читаются как единый блок. */
.rows {
  background: var(--surface-1);
  border: 1px solid var(--border-1);
  border-radius: var(--r-2);
  overflow: clip;
}
.rows > * { padding: var(--s-3) var(--s-4); min-width: 0; }
.rows > * + * { border-top: 1px solid var(--border-1); }
.row-line { display: flex; align-items: center; gap: var(--s-3); min-height: 46px; min-width: 0; }
.row-label { font-size: 0.84rem; font-weight: 550; }
.row-sub { font-size: 0.72rem; color: var(--text-3); margin-top: 1px; }
.row-tail { margin-left: auto; display: flex; align-items: center; gap: var(--s-2); flex: none; }

/* ── Секции: заголовок, тело, сворачивание ─────────────────────────────────── */
.section {
  padding: var(--s-5) var(--s-5) calc(var(--s-5) + 2px);
  display: flex;
  flex-direction: column;
  border-radius: var(--r-3);
  /* Иначе широкое содержимое растягивает карточку за пределы сетки */
  min-width: 0;
  max-width: 100%;
}

.section-head {
  margin-bottom: 0; display: flex; align-items: flex-start; gap: 12px; margin-bottom: 16px; }
.section-title { font-family: var(--font-display); font-size: 0.95rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; }
.section-sub { font-size: 0.75rem; color: var(--text-3); margin-top: 2px; }



/* Тело раздела: единый ритм между заголовком и содержимым */
.section-head { display: flex; align-items: center; gap: var(--s-3); min-width: 0; }
.section-body { padding-top: var(--s-4); min-width: 0; }