/* Birchfold - стили сайта.
   Никаких внешних зависимостей: шрифты системные, иконки - svg в разметке.

   Лицо сайта собрано из токенов: палитра, шрифты, ширина, отступы, форма карточек
   и списков. Значения ниже - базовый вид; каждый вариант приманки переопределяет
   часть из них своим блоком в конце файла (см. make-variants.py). */

:root {
  color-scheme: light dark;

  /* палитра */
  --ink: #0e1719;
  --ink-2: #3b4a52;
  --ink-3: #697881;
  --paper: #fdfffd;
  --mist: #f3f9f6;
  --line: #dee7e7;
  --line-2: #c9d5d8;
  /* цвет конторы: кнопки, точка состояния, врезка-надзаголовок, подчёркивание ссылок */
  --tint: #0e1719;
  --tint-hover: #000200;
  --tint-soft: var(--mist);

  --accent: #0e1719;
  --accent-ink: #000200;
  --ok: var(--tint);

  --btn-bg: var(--tint);
  --btn-bg-hover: var(--tint-hover);
  --btn-ink: #fdfffd;

  /* ширина и отступы */
  --w-narrow: 44rem;
  --w-page: 68rem;
  --sec-pad: 3rem;
  --hero-pad: 4.5rem 0 3rem;
  --body-bg: var(--paper);
  --hero-align: left;
  --gap-block: 1rem;

  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 0.75rem;
  --s4: 1rem;
  --s5: 1.5rem;
  --s6: 2rem;
  --s7: 3rem;
  --s8: 4.5rem;

  /* форма */
  --radius: 3px;
  --shadow: 0 1px 2px rgba(16, 21, 27, 0.04), 0 8px 24px -12px rgba(16, 21, 27, 0.12);
  --btn-radius: var(--radius);
  --btn-shadow: none;
  --btn-border-w: 1px;
  --btn-row-justify: flex-start;

  /* шрифты */
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: var(--font);
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --body-size: 1rem;
  --body-lh: 1.6;
  --link-underline: underline;

  /* заголовки */
  --h1-size: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  --h1-weight: 600;
  --h1-spacing: -0.02em;
  --h1-case: none;
  --h1-max: 34rem;
  --h2-size: clamp(1.375rem, 1rem + 1.2vw, 1.875rem);
  --h2-case: none;
  --h3-size: 1.0625rem;
  --h3-case: none;
  --lede-size: clamp(1.0625rem, 0.95rem + 0.5vw, 1.25rem);
  --lede-max: 38rem;

  /* полоса состояния сверху */
  --topline-display: flex;
  --topline-bg: var(--mist);
  --topline-border: 1px solid var(--line);

  /* шапка */
  --head-dir: row;
  --head-align: center;
  --head-justify: space-between;
  --head-min-h: 4.25rem;
  --head-pad: 0;
  --brand-size: 0.9375rem;
  --brand-spacing: 0.14em;
  --brand-case: none;
  --brand-weight: 600;
  --nav-size: 0.9375rem;
  --nav-gap: 1.5rem;
  --nav-case: none;
  --nav-spacing: 0;
  --nav-weight: 400;

  /* врезка-надзаголовок */
  --eyebrow-display: block;

  /* карточки */
  --cards-cols-3: 3;
  --cards-cols-2: 2;
  --cards-gap: 1px;
  --cards-bg: var(--line);
  --cards-border: 1px solid var(--line);
  --card-bg: var(--paper);
  --card-pad: 1.5rem;
  --card-border: 0 solid transparent;
  --card-radius: 0;
  --card-left-w: 0;

  /* список «ключ - значение» */
  --list-k-width: 11rem;
  --list-dir: row;
  --list-gap: 1rem;
  --list-pad: 1rem;
  --list-border: 1px solid var(--line);
  --list-k-font: var(--mono);
  --list-k-size: 0.8125rem;
  --list-k-case: none;
  --list-k-spacing: 0;

  /* таблицы */
  --tbl-border: 1px solid var(--line);
  --tbl-pad: 0.6875rem 1rem 0.6875rem 0;
  --tbl-th-bg: transparent;

  /* подвал */
  --foot-bg: var(--mist);
  --foot-dir: row;
  --foot-justify: space-between;
  --foot-align: flex-start;
}

/* Тёмная тема: по умолчанию следует системной настройке, но кнопка в шапке
   может переопределить выбор - он запоминается в localStorage. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #ecf3f2;
    --ink-2: #b7c3c7;
    --ink-3: #828f94;
    --paper: #0c1312;
    --mist: #131b1b;
    --line: #222d2f;
    --line-2: #313e42;
    --tint: #ecf3f2;
    --tint-hover: #fdfffd;
    --tint-soft: var(--mist);

    --accent: #ecf3f2;
    --accent-ink: #fdfffd;
    --ok: var(--tint);

    --btn-bg: var(--tint);
    --btn-bg-hover: var(--tint-hover);
    --btn-ink: #0c1312;
  }
}

:root[data-theme="dark"] {
  --ink: #ecf3f2;
  --ink-2: #b7c3c7;
  --ink-3: #828f94;
  --paper: #0c1312;
  --mist: #131b1b;
  --line: #222d2f;
  --line-2: #313e42;
  --tint: #ecf3f2;
  --tint-hover: #fdfffd;
  --tint-soft: var(--mist);

  --accent: #ecf3f2;
  --accent-ink: #fdfffd;
  --ok: var(--tint);

  --btn-bg: var(--tint);
  --btn-bg-hover: var(--tint-hover);
  --btn-ink: #0c1312;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--body-bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--body-size);
  line-height: var(--body-lh);
  font-feature-settings: "kern" 1;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; height: auto; display: block; }

a {
  color: var(--accent-ink);
  text-decoration-line: var(--link-underline);
  text-decoration-color: var(--tint);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--accent); }

:focus-visible {
  outline: 2px solid var(--tint);
  outline-offset: 2px;
  border-radius: 2px;
}

.skip {
  position: absolute;
  left: -9999px;
}
.skip:focus {
  left: var(--s4);
  top: var(--s4);
  z-index: 10;
  background: var(--paper);
  padding: var(--s2) var(--s3);
  border: 1px solid var(--line-2);
}

/* -- раскладка ------------ */

.wrap {
  max-width: var(--w-page);
  margin: 0 auto;
  padding: 0 var(--s5);
}

.wrap--narrow { max-width: var(--w-narrow); }

section { padding: var(--sec-pad) 0; }
section + section { border-top: 1px solid var(--line); }

/* -- шапка ------------ */

.topline {
  display: var(--topline-display);
  border-bottom: var(--topline-border);
  background: var(--topline-bg);
  font-size: 0.8125rem;
  color: var(--ink-3);
}

.topline__in {
  display: flex;
  gap: var(--s4);
  align-items: center;
  justify-content: space-between;
  min-height: 2.25rem;
  flex-wrap: wrap;
  width: 100%;
}

.status {
  display: flex;
  align-items: center;
  gap: var(--s2);
  white-space: nowrap;
}

.status__dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--ok);
  flex: none;
}

.status__regions {
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

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

.head__in {
  display: flex;
  flex-direction: var(--head-dir);
  align-items: var(--head-align);
  justify-content: var(--head-justify);
  gap: var(--s4);
  min-height: var(--head-min-h);
  padding: var(--head-pad) 0;
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-weight: var(--brand-weight);
  letter-spacing: var(--brand-spacing);
  text-transform: var(--brand-case);
  font-size: var(--brand-size);
  color: var(--ink);
  text-decoration: none;
}

.brand svg { width: 1.5rem; height: 1.5rem; }
.brand:hover { color: var(--ink); }

.nav ul {
  display: flex;
  gap: var(--nav-gap);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--nav-size);
  text-transform: var(--nav-case);
  letter-spacing: var(--nav-spacing);
  font-weight: var(--nav-weight);
  flex-wrap: wrap;
}

.nav a { color: var(--ink-2); text-decoration: none; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--tint); font-weight: 600; }

/* -- типографика ------------ */

h1, h2, h3 { line-height: 1.15; margin: 0 0 var(--gap-block); font-weight: 600; font-family: var(--font-head); }
h1 { font-size: var(--h1-size); font-weight: var(--h1-weight); letter-spacing: var(--h1-spacing); text-transform: var(--h1-case); }
h2 { font-size: var(--h2-size); letter-spacing: -0.02em; text-transform: var(--h2-case); }
h3 { font-size: var(--h3-size); letter-spacing: -0.005em; text-transform: var(--h3-case); }

p { margin: 0 0 var(--gap-block); }
p:last-child { margin-bottom: 0; }

.lede {
  font-size: var(--lede-size);
  color: var(--ink-2);
  max-width: var(--lede-max);
}

.eyebrow {
  display: var(--eyebrow-display);
  font-family: var(--mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--tint);
  margin: 0 0 var(--s3);
}

.muted { color: var(--ink-3); }
.small { font-size: 0.875rem; }

/* -- кнопки ------------ */

.btn {
  display: inline-block;
  padding: 0.6875rem 1.125rem;
  border: var(--btn-border-w) solid var(--btn-bg);
  border-radius: var(--btn-radius);
  background: var(--btn-bg);
  box-shadow: var(--btn-shadow);
  color: var(--btn-ink);
  font: inherit;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
}

.btn:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-ink); }

.btn--quiet {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-2);
  box-shadow: none;
}
.btn--quiet:hover { background: var(--mist); color: var(--ink); }

.btn-row { display: flex; justify-content: var(--btn-row-justify); gap: var(--s3); flex-wrap: wrap; margin-top: var(--s5); }

/* переключатель темы */
.theme {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  padding: 0;
  border: 1px solid var(--line-2);
  border-radius: var(--btn-radius);
  background: transparent;
  color: var(--ink-2);
  cursor: pointer;
}

.theme:hover { color: var(--ink); border-color: var(--ink-3); }
.theme svg { width: 1.125rem; height: 1.125rem; }

/* -- главный блок ------------ */

.hero { padding: var(--hero-pad); text-align: var(--hero-align); }
.hero h1 { max-width: var(--h1-max); }

/* -- карточки ------------ */

.cards {
  display: grid;
  gap: var(--cards-gap);
  background: var(--cards-bg);
  border: var(--cards-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.cards--3 { grid-template-columns: repeat(var(--cards-cols-3), minmax(0, 1fr)); }
.cards--2 { grid-template-columns: repeat(var(--cards-cols-2), minmax(0, 1fr)); }

.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-left-width: var(--card-left-w);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
}

.card h3 { margin-bottom: var(--s2); }
.card p { font-size: 0.9375rem; color: var(--ink-2); }

/* -- таблицы ------------ */

.tbl { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.tbl th, .tbl td { text-align: left; padding: var(--tbl-pad); border-bottom: var(--tbl-border); vertical-align: top; }
.tbl th { font-weight: 600; color: var(--ink); background: var(--tbl-th-bg); border-bottom-color: var(--tint); }
.tbl td { color: var(--ink-2); }
.tbl tr:last-child th, .tbl tr:last-child td { border-bottom: 0; }
.tbl .num { font-family: var(--mono); white-space: nowrap; color: var(--ink); }

/* -- список с разделителями ------------ */

.list { list-style: none; margin: 0; padding: 0; border-top: var(--list-border); }
.list li {
  padding: var(--list-pad) 0;
  border-bottom: var(--list-border);
  display: flex;
  flex-direction: var(--list-dir);
  gap: var(--list-gap);
  align-items: baseline;
}
.list .k {
  flex: none;
  width: var(--list-k-width);
  font-family: var(--list-k-font);
  font-size: var(--list-k-size);
  text-transform: var(--list-k-case);
  letter-spacing: var(--list-k-spacing);
  color: var(--ink-3);
}
.list .v { color: var(--ink-2); }
.list .v strong { color: var(--ink); font-weight: 600; }

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

.foot {
  border-top: 1px solid var(--line);
  background: var(--foot-bg);
  padding: var(--s6) 0;
  font-size: 0.875rem;
  color: var(--ink-3);
}
.foot__in {
  display: flex;
  flex-direction: var(--foot-dir);
  align-items: var(--foot-align);
  gap: var(--s6);
  justify-content: var(--foot-justify);
  flex-wrap: wrap;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s4); flex-wrap: wrap; }
.foot a { color: var(--ink-2); text-decoration: none; }
.foot a:hover { text-decoration: underline; }

/* -- мобильный ------------ */

@media (max-width: 60rem) {
  .cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 44rem) {
  .wrap { padding: 0 var(--s4); }

  .nav { order: 3; width: 100%; }
  .head__in { flex-wrap: wrap; padding: var(--s3) 0; gap: var(--s2) var(--s3); }
  .brand { margin-right: auto; }
  .nav ul { gap: var(--s3) var(--s4); padding-bottom: var(--s2); font-size: 0.875rem; }

  .hero { padding: var(--s6) 0 var(--s5); }

  .cards--3, .cards--2 { grid-template-columns: 1fr; }
  .list li { flex-direction: column; gap: var(--s1); }
  .list .k { width: auto; }

  /* таблица превращается в список: заголовок колонок скрыт, первый столбец - заголовком */
  .tbl thead { display: none; }
  .tbl tr { display: block; border-bottom: 1px solid var(--line); padding: var(--s3) 0; }
  .tbl tr:last-child { border-bottom: 0; }
  .tbl th, .tbl td { display: block; border: 0; padding: 0.125rem 0; }
  .tbl th:first-child, .tbl td:first-child { font-weight: 600; color: var(--ink); }

  .topline__in { padding: var(--s2) 0; }
  .status__regions { font-size: 0.6875rem; letter-spacing: 0; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

:root {
  --tint: #295f41;
  --tint-hover: #1d472f;
  --tint-soft: #ecf6ee;
  --w-page: 80rem;
  --radius: 0;
  --btn-radius: 0;
  --sec-pad: 2.25rem;
  --hero-pad: 3.5rem 0 2.5rem;
  --h1-case: uppercase;
  --h1-size: clamp(1.6rem, 1rem + 2.2vw, 2.5rem);
  --h1-spacing: 0.02em;
  --h1-max: none;
  --h2-case: uppercase;
  --h2-size: clamp(1.25rem, 1rem + 0.9vw, 1.6rem);
  --nav-case: uppercase;
  --nav-spacing: 0.08em;
  --nav-size: 0.8125rem;
  --link-underline: none;
  --topline-bg: var(--tint-soft);
  --cards-bg: transparent;
  --cards-border: 0 solid transparent;
  --card-bg: var(--mist);
  --card-pad: 1.25rem;
  --card-radius: 0;
  --list-k-case: uppercase;
  --list-k-spacing: 0.06em;
}


/* цвет конторы в тёмной теме - светлее и мягче */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --tint: #7dc299;
    --tint-hover: #a0d8b6;
    --tint-soft: var(--mist);
  }
}

:root[data-theme="dark"] {
    --tint: #7dc299;
    --tint-hover: #a0d8b6;
    --tint-soft: var(--mist);
}