/* Общие стили. Значения только из tokens.css (единственное исключение: границы media-запросов,
   в CSS они не могут быть переменными: 40em = 640px, 48em = 768px). */

@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-cyrillic-400.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-cyrillic-600.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-cyrillic-700.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("fonts/inter-latin-400.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap;
  src: url("fonts/inter-latin-600.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("fonts/inter-latin-700.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Запасной шрифт с метриками под Inter: подмена шрифта не двигает вёрстку */
@font-face {
  font-family: "Inter Fallback"; font-style: normal; font-weight: 400 700;
  src: local("Arial"), local("Liberation Sans"), local("Helvetica");
  size-adjust: 107.4%; ascent-override: 90.2%; descent-override: 22.5%; line-gap-override: 0%;
}

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

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

body {
  margin: 0;
  min-height: 100vh;
  background: var(--c-bg);
  color: var(--c-text);
  font: var(--fw-regular) var(--fs-md)/var(--lh-body) var(--font);
  overflow-wrap: anywhere;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }
a { color: var(--c-primary-text); text-underline-offset: 0.2em; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

:focus-visible {
  outline: var(--focus-width) solid var(--c-focus);
  outline-offset: var(--focus-offset);
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; inset-inline-start: var(--sp-3); top: var(--sp-3);
  transform: translateY(-200%);
  background: var(--c-surface); padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-1); z-index: 10;
}
.skip-link:focus { transform: none; }

.icon {
  width: var(--icon); height: var(--icon); flex: none;
  color: currentColor;
}

.container {
  width: 100%; max-width: var(--container);
  margin-inline: auto; padding-inline: var(--sp-4);
}

/* Баннер "Концепт" */
.banner {
  background: var(--c-on-accent); color: var(--c-accent);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  padding: var(--sp-2) var(--sp-4); text-align: center;
}

/* Верхняя панель */
.topbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
}
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: var(--sp-2) var(--sp-4);
  padding-block: var(--sp-2);
  min-height: calc(var(--touch) + var(--sp-4));
}
.topbar__spacer { flex: 1 1 auto; }
.brand {
  display: inline-flex; align-items: center; gap: var(--sp-2); min-height: var(--touch);
  font-weight: var(--fw-bold); font-size: var(--fs-lg);
  color: var(--c-text); text-decoration: none;
}
.brand__mark { color: var(--c-primary-text); }

/* Сегментный переключатель (язык, тема, вид) */
.seg {
  display: inline-flex; flex-wrap: wrap; max-width: 100%; padding: var(--sp-1); gap: var(--sp-1);
  background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--r-pill);
}
.seg__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch); min-width: var(--touch);
  padding-inline: var(--sp-3);
  border: 0; border-radius: var(--r-pill);
  background: transparent; color: var(--c-text-2);
  font-size: var(--fs-sm); font-weight: var(--fw-semi);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.seg__btn:hover { color: var(--c-text); }
.seg__btn[aria-pressed="true"], .seg__btn[aria-checked="true"] {
  background: var(--c-primary); color: var(--c-on-primary);
}

/* Кнопки и ссылки-кнопки */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--touch); padding: var(--sp-2) var(--sp-5);
  border: 1px solid transparent; border-radius: var(--r-pill);
  font-weight: var(--fw-semi); text-decoration: none; line-height: var(--lh-tight);
  transition: background var(--dur) var(--ease);
}
.btn--primary { background: var(--c-primary); color: var(--c-on-primary); }
.btn--ghost { background: transparent; color: var(--c-primary-text); border-color: var(--c-border-ui); }
.btn--primary:hover { filter: brightness(1.08); }
.btn--ghost:hover { background: var(--c-primary-soft); }

/* Метка "Концепт" */
.tag {
  display: inline-flex; align-items: center; min-height: 1.5rem;
  padding-inline: var(--sp-2); border-radius: var(--r-pill);
  background: var(--c-primary-soft); color: var(--c-text);
  font-size: var(--fs-xs); font-weight: var(--fw-semi);
}

.card {
  background: var(--c-surface); border: 1px solid var(--c-border);
  border-radius: var(--r-2); padding: var(--sp-5);
}

@media (max-width: 40em) {
  .topbar__inner { gap: var(--sp-2); }
  .container { padding-inline: var(--sp-3); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

.language { position: relative; color: var(--c-text); }
.language summary { display: flex; align-items: center; gap: var(--sp-2); min-height: var(--touch); padding: var(--sp-2) var(--sp-4); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-pill); background: var(--c-surface); cursor: pointer; list-style: none; }
.language summary::-webkit-details-marker { display: none; }
.language__list { position: absolute; inset-inline-end: 0; top: 100%; z-index: var(--z-language); min-width: var(--language-width); margin: var(--sp-2) 0 0; padding: var(--sp-2); list-style: none; background: var(--c-surface); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-2); box-shadow: var(--shadow-language); }
.language__list button { display: block; width: 100%; text-align: start; min-height: var(--touch); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-1); background: transparent; color: var(--c-text); cursor: pointer; }
.language__list button:hover, .language__list button[aria-checked="true"] { background: var(--c-primary-soft); color: var(--c-primary-text); }
/* Part 16: reusable choices and disclosures. */
.select-control { display: inline-flex; position: relative; min-width: 0; max-width: 100%; vertical-align: middle; }
.select-control__native { position: absolute; width: var(--border-w) !important; height: var(--border-w); min-height: 0 !important; padding: 0 !important; border: 0 !important; clip-path: inset(50%); overflow: hidden; }
.select-control__button { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); min-width: 0; width: 100%; min-height: var(--touch); padding: var(--sp-2) var(--sp-3); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-1); background: var(--c-surface); color: var(--c-text); text-align: start; font-size: var(--fs-sm); }
.select-control__button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.select-control__button[aria-expanded="true"] { border-color: var(--c-primary-text); background: var(--c-primary-soft); }
.select-options { position: fixed; left: var(--choice-left); width: min(var(--choice-width), calc(100vw - var(--sp-5))); min-width: min(var(--choice-min), calc(100vw - var(--sp-5))); max-height: min(var(--choice-max), var(--choice-room)); overflow-y: auto; overscroll-behavior: contain; z-index: var(--z-choice); padding: var(--sp-1); background: var(--c-surface); border: var(--border-w) solid var(--c-border-ui); border-radius: var(--r-1); box-shadow: var(--shadow-2); }
.select-options [role="option"] { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); width: 100%; min-height: var(--touch); padding: var(--sp-2) var(--sp-3); border: 0; border-radius: var(--r-1); background: transparent; color: var(--c-text); text-align: start; font-size: var(--fs-sm); overflow-wrap: normal; }
.select-options [role="option"]:hover, .select-options [role="option"]:focus-visible, .select-options [aria-selected="true"] { background: var(--c-primary-soft); color: var(--c-primary-text); }
button:disabled { cursor: default; opacity: 0.55; }
summary[data-ui-disclosure] { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); list-style: none; }
summary[data-ui-disclosure]::-webkit-details-marker { display: none; }
summary[data-ui-disclosure]::marker { content: ''; }
summary[data-ui-disclosure] > .icon:last-child { margin-inline-start: auto; transition: transform var(--dur) var(--ease); }
details[open] > summary[data-ui-disclosure] > .icon:last-child { transform: rotate(180deg); }
.how summary[data-ui-disclosure]::after, .article summary[data-ui-disclosure]::after { display: none; }
.seg--countries, .seg--scopes, .seg--themes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; max-width: var(--measure); border-radius: var(--r-2); }
.seg--countries .seg__btn, .seg--scopes .seg__btn, .seg--themes .seg__btn { min-width: 0; padding-inline: var(--sp-2); border-radius: var(--r-1); overflow-wrap: normal; }
.seg--scopes { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.f-sk-blue { fill: var(--flag-sk-blue); }
@media (max-width: 40em) {
  .seg--countries, .seg--scopes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .seg--themes .seg__btn { flex-direction: column; gap: var(--sp-1); padding-block: var(--sp-2); }
}