/* Единственное место, где живут цвета, отступы, радиусы и шрифты окна
   (Правило 4). Остальной CSS и Rust берут их только через var(--…): цвет
   литералом вне этого файла не пройдёт тест crates/app/tests/tokens.rs.

   Палитра — из дизайна «Kvartik Design» (решение человека 2026-10-14):
   кремовый фон, терракотовый акцент, оливковый второй цвет. Где пара
   дизайна не держала порог, цвет сдвинут, а не порог: главная кнопка —
   #a85b27 вместо #b2622d (светлый текст на ней — 4.1:1), рамка поля —
   #82796a вместо #dcd3c4 (1.3:1 на фоне поля).

   Две темы: светлая и тёмная — по настройке системы (prefers-color-scheme;
   решение человека 2026-10-11). В дизайне тёмной нет, и она собрана из тех
   же оттенков: фон — тёмные тона нейтральной гаммы, акцент и статусы —
   светлые тона своих гамм. Каждый цвет светлой темы обязан быть и в тёмной:
   иначе тёмная взяла бы светлый цвет на тёмном фоне.

   Цвет — только #rrggbb, без прозрачности: контраст полупрозрачного цвета
   зависит от того, что под ним, и тест его посчитать не может.

   Имя цвета говорит, с чем он обязан контрастировать (WCAG 2.1, тест
   перебирает все сочетания в обеих темах):
     --surface…           фоны: страница, карточка, поле ввода;
     --text…, …-text      текст: 4.5:1 на каждом фоне;
     --fill-…             заливка плашки или карточки, на которой свой текст;
     --on-X               текст на заливке --X: 4.5:1 на ней;
     --on-X-…             второй текст на той же заливке: --on-fill-paper-muted;
     --border-strong,     рамки полей и кнопок, кольцо фокуса, заливка
     --focus, --accent    кнопки: 3:1 на каждом фоне (WCAG 1.4.11);
     --border, --decor-…  разделитель и украшение: без порога.
   В комментарии у цвета — его коэффициенты, округлённые вниз; тест
   сверяет и их, так что число в комментарии не устаревает молча.
   Не проходит порог — менять цвет, а не порог.

   Статус никогда не говорит одним цветом: «оплачен», «просрочен» — это
   слово и значок, а цвет только помогает (Правило 4). */

:root {
  /* Встроенные части браузера (полосы прокрутки, поля дат) берут тему
     отсюда же. */
  color-scheme: light dark;

  /* Фоны: страница, карточка и поле ввода, утопленная дорожка. */
  --surface: #f5ead8;
  --surface-raised: #f9f4ed;
  --surface-sunken: #ebddc5;

  /* Текст. */
  --text: #201e1d; /* 13.9 на surface; 15.1 на surface-raised; 12.3 на surface-sunken */
  --text-muted: #645c50; /* 5.5 на surface; 6.0 на surface-raised; 4.9 на surface-sunken */

  /* Рамки. */
  --border: #dcd3c4;
  --border-strong: #82796a; /* 3.6 на surface; 3.9 на surface-raised; 3.2 на surface-sunken */
  --focus: #b2622d; /* 3.7 на surface; 4.1 на surface-raised; 3.3 на surface-sunken */

  /* Акцент: главная кнопка и ссылки. */
  --accent: #a85b27; /* 4.2 на surface; 4.5 на surface-raised; 3.7 на surface-sunken */
  --on-accent: #fffaf3; /* 4.8 на accent */
  --accent-text: #8c491a; /* 5.7 на surface; 6.2 на surface-raised; 5.0 на surface-sunken */

  /* Слова о сделанном, о том, что требует внимания, и об ошибке. */
  --success-text: #56633f; /* 5.4 на surface; 5.9 на surface-raised; 4.8 на surface-sunken */
  --warning-text: #7a3f15; /* 6.9 на surface; 7.5 на surface-raised; 6.1 на surface-sunken */
  --danger-text: #a3301f; /* 5.8 на surface; 6.3 на surface-raised; 5.2 на surface-sunken */

  /* Плашки статуса документа: ждёт оплаты, просрочен, готов, черновик. */
  --fill-waiting: #ffe1d0;
  --on-fill-waiting: #643312; /* 8.3 на fill-waiting */
  --fill-late: #8c491a;
  --on-fill-late: #fff2eb; /* 6.2 на fill-late */
  --fill-done: #e1eecc;
  --on-fill-done: #3d472b; /* 8.1 на fill-done */
  --fill-muted: #eee7db;
  --on-fill-muted: #474238; /* 8.1 на fill-muted */

  /* Карточка, которая просит действия: напоминание о копии. */
  --fill-notice: #ffe1d0;
  --on-fill-notice: #402310; /* 11.5 на fill-notice */

  /* Открытый раздел в меню на компьютере. */
  --fill-selected: #ffe1d0;
  --on-fill-selected: #402310; /* 11.5 на fill-selected */

  /* Кружки с инициалами клиентов — четыре оттенка — и карточка ИП
     в профиле. */
  --fill-avatar-1: #ccdbb2;
  --on-fill-avatar-1: #272e1b; /* 9.6 на fill-avatar-1 */
  --fill-avatar-2: #ffc6a5;
  --on-fill-avatar-2: #402310; /* 9.4 на fill-avatar-2 */
  --fill-avatar-3: #dcd3c4;
  --on-fill-avatar-3: #2e2b25; /* 9.5 на fill-avatar-3 */
  --fill-avatar-4: #e1eecc;
  --on-fill-avatar-4: #272e1b; /* 11.5 на fill-avatar-4 */
  --fill-identity: #e1eecc;
  --on-fill-identity: #272e1b; /* 11.5 на fill-identity */

  /* Главная карточка экрана — оливковая, с кругом-украшением. */
  --fill-hero: #56633f;
  --on-fill-hero: #f0fae1; /* 5.9 на fill-hero */
  --decor-hero: #728157;

  /* Круги первого запуска — только украшают и под текст не заходят. */
  --decor-olive: #ccdbb2;
  --decor-clay: #ffc6a5;

  /* Бумага — превью счёта и акта (задача 12): белый лист и в тёмной теме,
     как сам PDF. Цвета текста и линий — те, что пишет PDF (`doc::pdf::rgb`
     в ядре), и тест tests/tokens.rs сверяет, что это одни и те же числа. */
  --fill-paper: #ffffff;
  --on-fill-paper: #201e1d; /* 16.6 на fill-paper */
  --on-fill-paper-muted: #645c50; /* 6.5 на fill-paper */
  --on-fill-paper-accent: #8c491a; /* 6.8 на fill-paper */
  --decor-paper-rule: #dcd3c4;

  /* Шрифты (fonts.css): текст — Noto Sans, заголовки — Noto Serif, крупные
     суммы и «Kvartik» — Caprasimo. Системные — пока файл не пришёл и для
     знаков, которых в нём нет. Начертаний у текста два, у заголовков одно:
     другой вес браузер нарисовал бы утолщением, а это выглядит грязно.
     У крупного шрифта следом идут заголовки: ֏ в Caprasimo нет, а жирный
     Noto Serif Armenian ближе к нему, чем тонкий Noto Sans. */
  --font-sans: "Kvartik Sans", system-ui, sans-serif;
  --font-serif: "Kvartik Serif", "Kvartik Sans", serif;
  --font-display: "Kvartik Display", "Kvartik Serif", "Kvartik Sans", serif;
  --weight-regular: 400;
  --weight-strong: 600;
  --weight-heading: 800;

  /* Размеры текста. В rem: человек, увеличивший шрифт в системе, получает
     крупнее всё окно. */
  --font-size-xs: 0.75rem;
  --font-size-sm: 0.875rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.0625rem;
  --font-size-xl: 1.375rem;
  --font-size-2xl: 1.75rem;
  --font-size-3xl: 2.125rem;
  --font-size-hero: 2.625rem;
  /* Межстрочный: армянские буквы выше и глубже латинских, и 1.5 им нужно,
     чтобы строки не слипались. */
  --leading-tight: 1.2;
  --leading-normal: 1.5;

  /* Отступы: шаг 4 px. */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-7: 2rem;
  --space-8: 3rem;

  /* Радиусы: мелкие вещи — пилюлей (--radius-round), карточки — крупно. */
  --radius-sm: 0.5rem;
  --radius-md: 1rem;
  --radius-lg: 1.25rem;
  --radius-xl: 1.75rem;
  --radius-round: 999px;

  /* Наименьшая цель для пальца — 44 px (Apple, Human Interface Guidelines).
     Главные кнопки и поля — 56 px: «крупные кнопки» из дизайна. */
  --touch: 2.75rem;
  --control: 3.5rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --surface: #1d1b18;
    --surface-raised: #2a2722;
    --surface-sunken: #141210;

    --text: #f5ead8; /* 14.4 на surface; 12.4 на surface-raised; 15.7 на surface-sunken */
    --text-muted: #c0b6a5; /* 8.5 на surface; 7.4 на surface-raised; 9.3 на surface-sunken */

    --border: #3d3830;
    --border-strong: #8a8172; /* 4.4 на surface; 3.8 на surface-raised; 4.8 на surface-sunken */
    --focus: #f6a06b; /* 8.3 на surface; 7.1 на surface-raised; 9.0 на surface-sunken */

    --accent: #e9915a; /* 7.0 на surface; 6.1 на surface-raised; 7.7 на surface-sunken */
    --on-accent: #1d1b18; /* 7.0 на accent */
    --accent-text: #f6a06b; /* 8.3 на surface; 7.1 на surface-raised; 9.0 на surface-sunken */

    --success-text: #aebf92; /* 8.7 на surface; 7.5 на surface-raised; 9.4 на surface-sunken */
    --warning-text: #ffc6a5; /* 11.3 на surface; 9.8 на surface-raised; 12.3 на surface-sunken */
    --danger-text: #ff9b87; /* 8.4 на surface; 7.2 на surface-raised; 9.1 на surface-sunken */

    --fill-waiting: #4d2b15;
    --on-fill-waiting: #ffd9c2; /* 9.5 на fill-waiting */
    --fill-late: #f6a06b;
    --on-fill-late: #2b1608; /* 8.3 на fill-late */
    --fill-done: #34402a;
    --on-fill-done: #e1eecc; /* 9.0 на fill-done */
    --fill-muted: #3a3630;
    --on-fill-muted: #eee7db; /* 9.7 на fill-muted */

    --fill-notice: #4d2b15;
    --on-fill-notice: #ffe1d0; /* 10.1 на fill-notice */

    --fill-selected: #4d2b15;
    --on-fill-selected: #ffe1d0; /* 10.1 на fill-selected */

    --fill-avatar-1: #56633f;
    --on-fill-avatar-1: #f0fae1; /* 5.9 на fill-avatar-1 */
    --fill-avatar-2: #8c491a;
    --on-fill-avatar-2: #fff2eb; /* 6.2 на fill-avatar-2 */
    --fill-avatar-3: #645c50;
    --on-fill-avatar-3: #f9f4ed; /* 6.0 на fill-avatar-3 */
    --fill-avatar-4: #3d472b;
    --on-fill-avatar-4: #e1eecc; /* 8.1 на fill-avatar-4 */
    --fill-identity: #34402a;
    --on-fill-identity: #e1eecc; /* 9.0 на fill-identity */

    --fill-hero: #3d472b;
    --on-fill-hero: #f0fae1; /* 9.1 на fill-hero */
    --decor-hero: #4a5636;

    --decor-olive: #34402a;
    --decor-clay: #4d2b15;

    --fill-paper: #ffffff;
    --on-fill-paper: #201e1d; /* 16.6 на fill-paper */
    --on-fill-paper-muted: #645c50; /* 6.5 на fill-paper */
    --on-fill-paper-accent: #8c491a; /* 6.8 на fill-paper */
    --decor-paper-rule: #dcd3c4;
  }
}

/* Шрифты окна: «Kvartik Sans» — Noto Sans и Noto Sans Armenian, текст;
   «Kvartik Serif» — Noto Serif и Noto Serif Armenian, заголовки;
   «Kvartik Display» — Caprasimo, «Kvartik» и крупные суммы. Файл пишет
   tools/fonts.py — руками не править: диапазоны здесь обязаны совпадать
   с набором знаков в файлах, и это держит тест crates/app/tests/fonts.rs.
   Почему TTF, статические начертания и диапазоны Google Fonts — в шапке
   tools/fonts.py.

   `swap`: текст виден сразу системным шрифтом и подменяется, когда
   файл пришёл, — пустой страницы на медленной сети нет (Правило 1). */

@font-face {
  font-family: "Kvartik Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/fonts/noto-sans-latin-400.ttf") format("truetype");
  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: "Kvartik Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/fonts/noto-sans-latin-ext-400.ttf") format("truetype");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kvartik Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/fonts/noto-sans-cyrillic-400.ttf") format("truetype");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Kvartik Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/fonts/noto-sans-armenian-400.ttf") format("truetype");
  unicode-range: U+0530-058F, U+FB13-FB17;
}

@font-face {
  font-family: "Kvartik Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/app/fonts/noto-sans-latin-600.ttf") format("truetype");
  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: "Kvartik Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/app/fonts/noto-sans-latin-ext-600.ttf") format("truetype");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: "Kvartik Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/app/fonts/noto-sans-cyrillic-600.ttf") format("truetype");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Kvartik Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/app/fonts/noto-sans-armenian-600.ttf") format("truetype");
  unicode-range: U+0530-058F, U+FB13-FB17;
}

@font-face {
  font-family: "Kvartik Serif";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/app/fonts/noto-serif-latin-800.ttf") format("truetype");
  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: "Kvartik Serif";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/app/fonts/noto-serif-cyrillic-800.ttf") format("truetype");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Kvartik Serif";
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url("/app/fonts/noto-serif-armenian-800.ttf") format("truetype");
  unicode-range: U+0530-058F, U+FB13-FB17;
}

@font-face {
  font-family: "Kvartik Display";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/app/fonts/caprasimo-latin-400.ttf") format("truetype");
  unicode-range: U+0020, U+0024-0025, U+002B-002E, U+0030-0039, U+0041, U+0044, U+004B, U+004D, U+0061, U+0069, U+006B, U+0072, U+0074, U+0076, U+00A0, U+20AC;
}

/* Лендинг (задача 34): страницы kvartik.com. Сборка кладёт перед этим
   файлом tokens.css и fonts.css окна — одним файлом с хэшем в имени
   (crates/sw/src/landing.rs), — поэтому здесь только переменные tokens.css
   (Правило 4): ни одного цвета литералом, это держит тест
   crates/app/tests/tokens.rs. Вид — как у окна по дизайну «Kvartik Design»:
   кремовый фон, круги первого запуска, кнопки пилюлей высотой 56 px,
   заголовки засечками, «Kvartik» — Caprasimo. Каждая пара «текст на фоне»
   здесь — из тех, что тест уже считает: текст и ссылки — на --surface
   и --surface-raised, языки — на --surface-sunken. */

html {
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  line-height: var(--leading-normal);
  color: var(--text);
  background: var(--surface);
  /* Цифры одной ширины, как у окна. */
  font-variant-numeric: tabular-nums;
  /* Телефон в альбомной ориентации не увеличивает текст сам. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  position: relative;
  margin: 0;
}

/* Спрятанное не видно, что бы ни говорили его классы: `display` у класса
   (`.field` — сетка) перебил бы атрибут `hidden`, и поле калькулятора,
   которое ответ ядра спрятал, осталось бы на виду (глазной прогон задачи
   34). Так же — у окна, base.css. */
[hidden] {
  display: none !important;
}

/* Круги в углу, как на первом экране окна: только украшают (у их цветов
   нет порога контраста — tokens.css) и под текст не заходят — заголовок
   начинается ниже них (`.hero`), а языки лежат на своей дорожке. Свой слой
   с обрезкой: за правым краем страницы круги не дают прокрутки вбок. */
.decor {
  position: absolute;
  top: 0;
  right: 0;
  width: 12.5rem;
  height: 11rem;
  overflow: hidden;
  pointer-events: none;
}

.decor span {
  position: absolute;
  border-radius: var(--radius-round);
}

.decor span:first-child {
  top: -10.25rem;
  right: -9rem;
  width: 21.25rem;
  height: 21.25rem;
  background: var(--decor-olive);
}

.decor span:last-child {
  top: 3rem;
  right: 4.375rem;
  width: 7.5rem;
  height: 7.5rem;
  background: var(--decor-clay);
}

/* Колонка страницы: на телефоне — во всю ширину с полями, на компьютере —
   не шире 64rem. Поверх кругов украшения: они раньше в разметке. */
.top,
main,
footer {
  position: relative;
  box-sizing: border-box;
  max-width: 64rem;
  margin-inline: auto;
  padding-inline: var(--space-5);
}

.top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding-block: var(--space-4);
}

.brand {
  font-family: var(--font-display);
  font-size: var(--font-size-2xl);
  line-height: var(--leading-tight);
  color: var(--text);
  text-decoration: none;
}

/* Языки — пилюлями на дорожке, как переключатель окна. Текущий —
   приподнятым и жирным, а не одним цветом (Правило 4). */
.langs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  padding: var(--space-1);
  border-radius: var(--radius-lg);
  background: var(--surface-sunken);
}

.langs a {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch);
  padding-inline: var(--space-4);
  border-radius: var(--radius-round);
  color: var(--text);
  text-decoration: none;
}

.langs a[aria-current="page"] {
  background: var(--surface-raised);
  font-weight: var(--weight-strong);
}

h1,
h2 {
  font-family: var(--font-serif);
  font-weight: var(--weight-heading);
  line-height: var(--leading-tight);
  text-wrap: balance;
}

h1 {
  margin: 0;
  font-size: var(--font-size-3xl);
}

h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-2xl);
}

h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

p {
  margin: 0 0 var(--space-3);
  text-wrap: pretty;
}

p:last-child {
  margin-bottom: 0;
}

a {
  color: var(--accent-text);
}

/* Кольцо фокуса — --focus: 3:1 на каждом фоне (tokens.css). */
a:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Первый экран. Заголовок — ниже кругов украшения при любой ширине: 6rem
   над ним и шапка выше — больше их высоты (11rem), как у первого экрана
   окна. Ширина строки — не больше ~70 знаков. */
.hero {
  display: grid;
  gap: var(--space-4);
  max-width: 40rem;
  padding-block: 6rem var(--space-7);
}

.lead {
  margin: 0;
  font-size: var(--font-size-xl);
}

.actions {
  margin: 0;
}

.trial {
  margin: 0;
  color: var(--text-muted);
}

/* Главная кнопка — как у окна: заливка --accent, текст --on-accent, пилюля
   высотой 56 px. Ссылка, а не кнопка: она ведёт на другую страницу.
   Подпись в две строки (армянская на телефоне) не прижимается к краям. */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--control);
  padding: var(--space-2) var(--space-6);
  border: 0;
  border-radius: var(--radius-round);
  background: var(--accent);
  color: var(--on-accent);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
  text-align: center;
  text-decoration: none;
}

/* Второстепенная — рамкой без заливки: рядом с главной видно, какая
   главная. Рамка --border-strong — 3:1 на каждом фоне (WCAG 1.4.11). */
.button.secondary {
  border: 2px solid var(--border-strong);
  background: none;
  color: var(--text);
}

/* Отклик на наведение — только там, где есть мышь: на телефоне оно
   залипает после касания. */
@media (hover: hover) {
  .button.secondary:hover {
    background: var(--surface);
  }

  .langs a:hover:not([aria-current="page"]) {
    background: var(--surface);
  }
}

main > section + section {
  margin-top: var(--space-8);
}

/* Что умеет Kvartik — карточками: на телефоне столбцом, шире — в две
   и в три колонки. */
.cards {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.cards li,
.card {
  box-sizing: border-box;
  padding: var(--space-5);
  border-radius: var(--radius-lg);
  background: var(--surface-raised);
}

/* Карточка — во всю колонку, вровень с карточками выше, а строка в ней —
   не длиннее ~90 знаков. */
.card > * {
  max-width: 48rem;
}

.card .actions {
  margin-block: var(--space-4);
}

.hint,
.address {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

/* Адрес календаря вставляют в календарь сами: он длиннее строки телефона
   и выделяется целиком одним касанием. */
.address {
  overflow-wrap: anywhere;
  user-select: all;
}

/* Калькулятор (задача 34): поля — как у окна, пилюлями высотой 56 px
   с рамкой --border-strong (3:1 на каждом фоне), подпись над полем. На
   телефоне — столбцом, шире — в две колонки. */
.fields {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-4);
}

.field {
  display: grid;
  gap: var(--space-2);
  align-content: start;
  font-size: var(--font-size-sm);
  font-weight: var(--weight-strong);
}

/* Вид деятельности — во всю ширину: армянское «Կառավարության ցանկի բարձր
   տեխնոլոգիաներ» в половине строки обрезалось. */
.field:first-child {
  grid-column: 1 / -1;
}

.field input,
.field select {
  box-sizing: border-box;
  width: 100%;
  min-height: var(--control);
  margin: 0;
  padding: 0 var(--space-5);
  border: 2px solid var(--border-strong);
  border-radius: var(--radius-round);
  background-color: var(--surface-raised);
  color: var(--text);
  font: inherit;
  font-size: var(--font-size-lg);
  font-weight: var(--weight-regular);
}

.field input:focus-visible,
.field select:focus-visible {
  border-color: var(--focus);
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Список выбора — своей стрелкой, как у окна: у системной свой вид в каждом
   браузере, а на пилюле она прилипает к краю. Стрелка — два треугольника
   цвета текста (`currentColor`), без картинки. */
.field select {
  padding-right: var(--space-8);
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, currentColor 50%),
    linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position:
    right var(--space-6) center,
    right calc(var(--space-6) - 0.375rem) center;
  background-size: 0.375rem 0.375rem;
  background-repeat: no-repeat;
}

/* Ошибка поля — словами под ним, а цвет только помогает её заметить
   (Правило 4). */
.field .error,
.note[data-state="failed"] {
  color: var(--danger-text);
  font-weight: var(--weight-regular);
}

/* Ответ: заголовки частей, суммы крупно и жирно, строки расчёта и слова
   о допущениях мельче и тише. */
.result {
  display: grid;
  gap: var(--space-2);
  margin-block: var(--space-4);
}

.result > * {
  margin: 0;
}

.result .head {
  margin-top: var(--space-3);
  font-size: var(--font-size-lg);
  font-weight: var(--weight-strong);
  line-height: var(--leading-tight);
}

.result .head:first-child {
  margin-top: 0;
}

.result .sum {
  font-size: var(--font-size-xl);
  font-weight: var(--weight-strong);
}

.note {
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

footer {
  margin-top: var(--space-8);
  padding-block: var(--space-6) var(--space-8);
  border-top: 1px solid var(--border);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
}

footer p {
  max-width: 48rem;
}

@media (min-width: 40rem) {
  .cards,
  .fields {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

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

  h1 {
    font-size: var(--font-size-hero);
  }
}