/* Mini App «Сводка здравоохранения». Макет согласован 17.10.2026.
   Цвета свои, а не themeParams Telegram: у hint_color светлой темы контраст ниже 4.5:1.
   Схема (светлая/тёмная) — из Telegram.WebApp.colorScheme, вне Telegram — из настроек системы. */
:root {
  --bg: #FFFFFF;
  --text: #17191C;
  --muted: #5B6168;
  --line: #E3E5E8;
  --line-soft: #EEF0F2;
  --control-border: #D5D8DC;
  --accent: #1F5FA8;
  --accent-hover: #164A84;
  --on-accent: #FFFFFF;
  --imp-bg: #FFF1E6;
  --imp: #A8410A;
  --mark-bg: #FFE08A;
  --skeleton: #EEF0F2;
  --fs: 17px;
  color-scheme: light;
}
:root[data-scheme="dark"] {
  --bg: #17212B;
  --text: #F2F4F6;
  --muted: #9BA6B2;
  --line: #2B3744;
  --line-soft: #243140;
  --control-border: #3A4757;
  --accent: #6AB2F2;
  --accent-hover: #8EC5F5;
  --on-accent: #0E1621;
  --imp-bg: #3A2A1C;
  --imp: #F5B26B;
  --mark-bg: #6B5413;
  --skeleton: #243140;
  color-scheme: dark;
}
:root.big { --fs: 20px; }

* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--text); }
body {
  font-family: 'PT Sans', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}
a { color: var(--accent); }
a:hover { color: var(--accent-hover); }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; touch-action: manipulation; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.serif { font-family: 'PT Serif', Georgia, serif; font-weight: 700; }
.muted { color: var(--muted); }

/* сверху закреплена только шапка: фильтры в 2–3 строки на узком экране заняли бы треть высоты */
.bar {
  position: sticky; top: 0; z-index: 10; background: var(--bg);
  display: flex; align-items: center; gap: 8px;
  padding: 16px 16px 12px 20px; border-bottom: 1px solid var(--line);
}
.bar-title { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.bar-title h1 { margin: 0; font-size: 22px; line-height: 1.2; }
.bar-title div { font-size: 14px; }
.icon-btn {
  width: 48px; height: 48px; flex: none; border-radius: 12px;
  border: 1px solid var(--control-border); background: var(--bg); color: var(--text);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 19px; font-weight: 700; text-decoration: none;
}
.icon-btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line); }
.chip {
  min-height: 44px; padding: 0 16px; border-radius: 22px;
  border: 1px solid var(--control-border); background: var(--bg); font-size: 16px;
}
.chip[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); font-weight: 700; }

/* лента */
.day h2 { margin: 0; padding: 20px 20px 4px; font-size: 20px; line-height: 1.3; }
.group h3 {
  margin: 0; padding: 14px 20px 6px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted);
}
.item { display: flex; flex-direction: column; gap: 6px; padding: 10px 20px 6px; border-bottom: 1px solid var(--line-soft); }
.item p { margin: 0; font-size: var(--fs); line-height: 1.5; }
.badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px 3px 8px; border-radius: 6px; background: var(--imp-bg); color: var(--imp);
  font-size: 14px; font-weight: 700;
}
.meta { display: flex; flex-wrap: wrap; align-items: center; column-gap: 10px; font-size: 15px; color: var(--muted); }
.meta .npa { font-style: italic; }
.src {
  display: inline-flex; align-items: center; gap: 4px; min-height: 44px;
  font-size: 16px; font-weight: 700; text-decoration: none;
}
.item .kicker { font-size: 14px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
mark { background: var(--mark-bg); color: var(--text); padding: 0 2px; border-radius: 3px; }

.note { padding: 24px 20px 16px; font-size: 14px; text-align: center; color: var(--muted); }
.state { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 56px 32px 24px; text-align: center; }
.state h2 { margin: 0; font-size: 22px; line-height: 1.3; }
.state p { margin: 0; font-size: 17px; color: var(--muted); }
.btn {
  min-height: 52px; padding: 0 28px; border-radius: 12px; border: 0;
  background: var(--accent); color: var(--on-accent); font-size: 18px; font-weight: 700;
}

/* поиск */
.search-head { display: flex; flex-direction: column; gap: 12px; padding: 12px 16px 16px; border-bottom: 1px solid var(--line); }
.back { display: inline-flex; align-items: center; gap: 4px; align-self: flex-start; min-height: 44px; font-size: 17px; font-weight: 700; text-decoration: none; }
.search-head label { font-size: 22px; line-height: 1.2; }
.field {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 14px;
  border: 2px solid var(--accent); border-radius: 12px;
}
.field input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: 18px; }
.field input::-webkit-search-cancel-button { -webkit-appearance: none; }
.summary { font-size: 15px; color: var(--muted); }

/* загрузка */
.skel { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.skel div { height: 16px; border-radius: 8px; background: var(--skeleton); }
.skel div:nth-child(3n) { width: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .skel div { animation: pulse 1.2s ease-in-out infinite alternate; }
}
@keyframes pulse { from { opacity: 1; } to { opacity: 0.45; } }