/* Хром сайта: шапка, навигация по темам, подвал.
 * Один на весь портал. В Go-версии шапок было столько же, сколько скинов.
 *
 * Главное действие на этом сайте — найти один факт, поэтому поиск стоит в
 * шапке как основной элемент, а не прячется под иконку.
 */

.site-head {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.site-head__inner {
  display: flex;
  align-items: center;
  gap: var(--sp-5);
  padding-block: var(--sp-4);
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--sp-2);
  font-weight: var(--fw-black);
  font-size: var(--fs-md);
  letter-spacing: var(--ls-tight);
  color: var(--ink);
  text-decoration: none;
  flex: none;
}

/* «.kz» в логотипе — часть имени, но не ударная: тон и вес у неё свои. */
.brand__tld { color: var(--muted); font-weight: var(--fw-medium); }

.brand__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--theme);
  align-self: center;
}

.search {
  flex: 1 1 20rem;
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--paper);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  min-width: 0;
}

.search__input {
  font: inherit;
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--ink);
}

.search__input::placeholder { color: var(--muted); }
.search__input:focus { outline: none; }
.search:focus-within { border-color: var(--theme); }

.search__hint {
  font-family: var(--ff-data);
  font-size: var(--fs-xs);
  color: var(--muted);
  flex: none;
}

.lang {
  display: flex;
  flex: none;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.lang a {
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-decoration: none;
}

.lang a[aria-current="true"] { background: var(--theme); color: var(--on-hue); }

/* --- навигация по темам --- */

.topics-nav {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
}

.topics-nav__list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-5);
  list-style: none;
  margin: 0;
  padding: 0;
  padding-block: var(--sp-3);
}

.topics-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-block: var(--sp-1);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--muted);
  text-decoration: none;
}

.topics-nav__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--theme); flex: none; }
.topics-nav a[aria-current="page"] { color: var(--ink); }

@media (hover: hover) {
  .topics-nav a:hover { color: var(--ink); }
}

/* --- каркас страницы --- */

.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--sp-6);
  padding-block: var(--sp-6) var(--sp-8);
}

.layout--aside {
  grid-template-columns: minmax(0, 1fr);
}

@media (min-width: 900px) {
  .layout--aside { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--sp-7); }
  .layout--aside > .layout__aside { order: -1; position: sticky; top: var(--sp-5); align-self: start; }
}

.page-title { display: flex; flex-direction: column; gap: var(--sp-3); }
.page-title h1 { font-size: var(--fs-2xl); }

/* Длинное название — не повод занять им экран. У медицинского изделия
   заголовок это полная регистрационная формулировка на две-три строки, и
   крупный кегль вытеснял со страницы сам факт. */
.page-title--long h1 { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.page-title__meta { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }
.page-title__sub { color: var(--muted); max-width: var(--w-prose); }

/* --- главная: темы --- */

.topics {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--sp-4);
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}

.topic-card {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--theme);
  border-radius: var(--r-md);
}

.topic-card a {
  font-size: var(--fs-md);
  font-weight: var(--fw-semi);
  color: var(--ink);
  text-decoration: none;
}

@media (hover: hover) {
  .topic-card a:hover { color: var(--theme); }
}

.topic-card__count {
  font-family: var(--ff-data);
  font-size: var(--fs-sm);
  color: var(--muted);
}

/* --- подвал --- */

.site-foot {
  background: var(--surface);
  border-top: 1px solid var(--line);
  padding-block: var(--sp-7) var(--sp-8);
  margin-top: var(--sp-8);
}

.site-foot__cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--sp-5);
}

.site-foot h3 { font-size: var(--fs-sm); color: var(--muted); font-weight: var(--fw-semi); letter-spacing: var(--ls-label); text-transform: uppercase; }
.site-foot ul { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.site-foot a { color: var(--ink); text-decoration: none; font-size: var(--fs-sm); }

@media (hover: hover) {
  .site-foot a:hover { text-decoration: underline; }
}

.site-foot__legal {
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--line);
  font-size: var(--fs-sm);
  color: var(--muted);
  max-width: var(--w-prose);
}

@media (max-width: 560px) {
  .site-head__inner { flex-wrap: wrap; gap: var(--sp-3); }
  .search { flex-basis: 100%; order: 3; }
}

/* === gate — страница проверки браузера =================================
 * Стоит отдельно от остального хрома: у неё нет ни навигации, ни подвала,
 * и открывается она в единственном случае — когда запрос не похож на
 * браузер. Ширина узкая: на странице один абзац и полоса прогресса.
 */

.gate {
  max-width: 34rem;
  margin-inline: auto;
  padding-block: var(--sp-8);
}

.gate__row { display: flex; justify-content: space-between; align-items: center; gap: var(--sp-3); }

/* Полоса прогресса: значение ширины ставит скрипт — это данные, а не стиль. */
.gate__meter {
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--surface-2);
  overflow: hidden;
}

.gate__bar {
  height: 100%;
  width: 0;
  background: var(--theme);
  transition: width var(--dur) var(--ease);
}

.gate__note { font-size: var(--fs-sm); color: var(--muted); }

/* Подпись в штампе гейта — обычный текст, а не данные: моноширинное
   начертание здесь читается как код, которым она не является. */
.stamp__value--text { font-family: var(--ff-ui); }