/* Сброс стандартных браузерных отступов, чтобы инструкция выглядела одинаково в разных браузерах. */
@import url("https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css");

/* Глобальный box-sizing: ширина элемента включает padding и border, так верстку проще считать. */
* {
  -webkit-font-smoothing: antialiased;
  box-sizing: border-box;
}

/* Базовые размеры страницы без внешних отступов браузера. */
html,
body {
  margin: 0px;
  min-height: 100%;
}

/* Видимая рамка при фокусе с клавиатуры, полезно для доступности. */
button:focus-visible {
  outline: 2px solid #4a90e2 !important;
  outline: -webkit-focus-ring-color auto 5px !important;
}

/* Ссылки без стандартного подчеркивания, если они появятся в инструкции. */
a {
  text-decoration: none;
}

/* Основной обычный шрифт, если он установлен в системе. */
@font-face {
  font-family: "HSE Sans-Regular";
  src: local("HSE Sans-Regular");
}

/* Жирный шрифт для заголовков и акцентов, если он установлен в системе. */
@font-face {
  font-family: "HSE Sans-Bold";
  src: local("HSE Sans-Bold");
}

:root {
  /* Общие дизайн-переменные: цвета, радиусы и тени всей страницы инструкции. */
  --green: #3aa163;
  --green-dark: #006b52;
  --green-soft: rgba(58, 161, 99, 0.11);
  --green-pale: #edf7f2;
  --ink: #11252f;
  --muted: #58776d;
  --line: rgba(17, 37, 47, 0.12);
  --dash: rgba(58, 161, 99, 0.62);
  --paper: #ffffff;
  --page: #f5f8f6;
  --note: #fff8ec;
  --radius: 10px;
  --shadow: 0 14px 40px rgba(17, 37, 47, 0.08);
}

body {
  /* Базовый фон, цвет текста и шрифт для всей HTML-инструкции. */
  min-width: 0;
  background: var(--page);
  color: var(--ink);
  font-family: "HSE Sans-Regular", Arial, sans-serif;
  line-height: 1.28;
}

.guide-page {
  /* Внешний контейнер: ограничивает ширину страницы и центрирует инструкцию. */
  width: min(100%, 980px);
  margin: 0 auto;
  padding: 28px 18px 42px;
}

.instruction-frame {
  /* Основная белая карточка, внутри которой лежит вся инструкция. */
  padding: 28px 24px 32px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

h1 {
  /* Заголовок страницы инструкции. */
  max-width: 720px;
  margin: 0 auto 24px;
  color: var(--green-dark);
  font-family: "HSE Sans-Bold", Arial, sans-serif;
  font-size: 30px;
  line-height: 1.15;
  text-align: center;
}

.instruction-layout {
  /* Главная сетка: левая колонка подсказок, центральный скрин, правая колонка. */
  display: grid;
  grid-template-columns: minmax(190px, 1fr) 300px minmax(220px, 1fr);
  align-items: start;
  gap: 22px;
}

.rail {
  /* Колонка с карточками-подсказками. */
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.rail-left {
  /* Левая колонка начинается с небольшим сдвигом и идет плотнее, чем раньше. */
  gap: 8px;
  padding-top: 36px;
}

.rail-right {
  /* Правая колонка начинается выше, чтобы глоссарий и подсказки плотнее совпадали со скрином. */
  gap: 8px;
  padding-top: 0;
}

.calculator-shot {
  /* Центральная область с единым скрином калькулятора. */
  position: relative;
  z-index: 1;
  overflow: hidden;
  width: 300px;
  margin-top: 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(17, 37, 47, 0.10);
}

.calculator-shot img {
  /* Скрин внутри центрального блока занимает всю его ширину и не искажает пропорции. */
  display: block;
  width: 100%;
  height: auto;
}

.calculator-image {
  /* Единый объединенный скрин: больше не используем отдельные верхнюю и нижнюю картинки. */
  border-radius: 16px;
}

.tip,
.glossary-card,
.warning-card {
  /* Общая форма карточек: подсказки, глоссарий и предупреждение. */
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--radius);
}

.tip {
  /* Карточка с номером и пояснением к конкретному полю калькулятора. */
  z-index: 3;
  min-height: 78px;
  padding: 14px 14px 14px 48px;
  background: var(--green-pale);
}

.tip::after {
  /* Пунктирная линия от карточки к центральному скрину.
     У каждой карточки ниже есть свои значения:
     --arrow-start-y двигает начало стрелки вверх/вниз внутри карточки;
     --arrow-start-x двигает начало стрелки ближе/дальше от карточки;
     --arrow-end-x двигает конец стрелки влево/вправо через длину линии;
     --arrow-end-y поднимает/опускает конец стрелки через небольшой наклон;
     --arrow-end-y-shift общая поправка для всех концов стрелок, если скрин двигается вверх/вниз. */
  content: "";
  position: absolute;
  top: var(--arrow-start-y, 50%);
  width: var(--arrow-end-x, 28px);
  border-top: 1.5px dashed var(--dash);
  pointer-events: none;
  transform: rotate(calc(var(--arrow-end-y, 0deg) + var(--arrow-end-y-shift, 0deg)));
}

.rail-left .tip::after {
  /* Направляет линии от левых карточек вправо. */
  left: calc(100% + 6px + var(--arrow-start-x, 0px));
  --arrow-end-y-shift: 16deg;
  transform-origin: left center;
}

.rail-right .tip::after {
  /* Направляет линии от правых карточек влево. */
  right: calc(100% + 6px + var(--arrow-start-x, 0px));
  --arrow-end-y-shift: -16deg;
  transform-origin: right center;
}

.num {
  /* Зеленый круг с номером подсказки. */
  position: absolute;
  top: 14px;
  left: 14px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  background: var(--green);
  border-radius: 50%;
  color: #ffffff;
  font-family: "HSE Sans-Bold", Arial, sans-serif;
  font-size: 12px;
}

.tip h2 {
  /* Название поля калькулятора внутри карточки. */
  margin: 0 0 7px;
  color: var(--green-dark);
  font-family: "HSE Sans-Bold", Arial, sans-serif;
  font-size: 13px;
  line-height: 1.18;
}

.tip p {
  /* Основной текст объяснения внутри карточки. */
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.tip p + p {
  margin-top: 7px;
}

.tip strong {
  /* Акцентные слова ВЫБЕРИТЕ / ВВЕДИТЕ. */
  color: var(--ink);
  font-family: "HSE Sans-Bold", Arial, sans-serif;
  text-transform: uppercase;
}

.glossary-card {
  /* Карточка глоссария справа сверху. */
  padding: 16px 18px;
  background: #fbfdfc;
}

.glossary-card h2 {
  margin: 0 0 10px;
  color: var(--green-dark);
  font-family: "HSE Sans-Bold", Arial, sans-serif;
  font-size: 15px;
  text-align: center;
}

.glossary-card p {
  position: relative;
  margin: 0;
  padding-left: 11px;
  color: var(--muted);
  font-size: 11px;
}

.glossary-card p::before {
  /* Зеленый маркер перед каждым термином в глоссарии. */
  content: "";
  position: absolute;
  top: 5px;
  left: 0;
  width: 4px;
  height: 4px;
  background: var(--green);
  border-radius: 50%;
}

.glossary-card p + p {
  margin-top: 5px;
}

.glossary-card strong {
  color: var(--ink);
  font-family: "HSE Sans-Bold", Arial, sans-serif;
}

.warning-card {
  /* Предупреждение о том, что расчет является предварительной оценкой. */
  display: grid;
  grid-template-columns: 42px 1fr;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
  padding: 12px 14px;
  background: var(--note);
  border-color: rgba(224, 123, 42, 0.24);
}

.hand-box {
  /* Квадратная подложка под иконку руки в предупреждении. */
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  background: var(--paper);
  border: 1px solid rgba(224, 123, 42, 0.22);
  border-radius: 9px;
}

.hand-box img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.warning-card p {
  margin: 0;
  color: var(--ink);
  font-size: 11px;
}

.warning-card strong {
  color: #a95416;
  font-family: "HSE Sans-Bold", Arial, sans-serif;
}

/* Индивидуальные настройки карточек и стрелок.
   margin-top двигает всю карточку вверх/вниз.
   --arrow-start-y двигает начало стрелки вверх/вниз внутри карточки: меньше % = выше, больше % = ниже.
   --arrow-start-x двигает начало стрелки влево/вправо от края карточки: положительное число = дальше от карточки, отрицательное = ближе к карточке.
   --arrow-end-x двигает конец стрелки по горизонтали: больше px = конец дальше к скрину, меньше px = ближе к карточке.
   --arrow-end-y двигает конец стрелки по вертикали через наклон: положительный/отрицательный угол слегка опускает или поднимает конец.
   Общая поправка после опускания скрина стоит выше: для левых стрелок +16deg, для правых -16deg. */
.tip-1 {
  /* Стрелка 1: тип сырья. */
  min-height: 92px;
  --arrow-start-y: 60%;
  --arrow-start-x: 0px;
  --arrow-end-x: 60px;
  --arrow-end-y: 40deg;
}

.tip-2 {
  /* Стрелка 2: объем сырья. */
  min-height: 104px;
  margin-top: 8px;
  --arrow-start-y: 30%;
  --arrow-start-x: 0px;
  --arrow-end-x: 30px;
  --arrow-end-y: 0deg;
}

.tip-3 {
  /* Стрелка 3: выбор установок. */
  min-height: 142px;
  margin-top: 8px;
  --arrow-start-y: 10%;
  --arrow-start-x: 0px;
  --arrow-end-x: 50px;
  --arrow-end-y: 30deg;
}

.tip-4 {
  /* Стрелка 4: содержание углерода. */
  min-height: 170px;
  margin-top: 8px;
  --arrow-start-y: 40%;
  --arrow-start-x: 0px;
  --arrow-end-x: 45px;
  --arrow-end-y: -50deg;
}

.tip-5 {
  /* Стрелка 5: логистика сырья и биочара. */
  min-height: 118px;
  margin-top: 20px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 60px;
  --arrow-end-y: 50deg;
}

.tip-6 {
  /* Стрелка 6: стоимость продажи УЕ. */
  min-height: 108px;
  margin-top: 12px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 40px;
  --arrow-end-y: -40deg;
}

.tip-7 {
  /* Стрелка 7: выбор реестра УЕ. */
  min-height: 86px;
  margin-top: 6px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 50px;
  --arrow-end-y: 0deg;
}

.tip-8 {
  /* Стрелка 8: процент продажи УЕ. */
  min-height: 132px;
  margin-top: 8px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 40px;
  --arrow-end-y: -40deg;
}

.tip-9 {
  /* Стрелка 9: размер риск-буфера. */
  min-height: 100px;
  margin-top: 6px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 70px;
  --arrow-end-y: 65deg;
}

.tip-10 {
  /* Стрелка 10: процент продажи биочара. */
  min-height: 116px;
  margin-top: 6px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 200px;
  --arrow-end-y: 50deg;
}
.tip-10::after {
  opacity: 0.35;
}

.tip-11 {
  /* Стрелка 11: срок проекта. */
  min-height: 112px;
  margin-top: 16px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 40px;
  --arrow-end-y: -10deg;
}


.tip-12 {
  /* Стрелка 12: валюта и ставка дисконтирования. */
  min-height: 94px;
  margin-top: 0;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 180px;
  --arrow-end-y: 40deg;
}

.tip-13 {
  /* Стрелка 13: прогноз курса рубля. */
  min-height: 92px;
  margin-top: 8px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 50px;
  --arrow-end-y: 10deg;
}

.tip-14 {
  /* Стрелка 14: инфляция в рублях и долларах. */
  min-height: 94px;
  margin-top: 8px;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 50px;
  --arrow-end-y: -30deg;
}

.tip-15 {
  /* Стрелка 15: кнопка расчета. */
  min-height: 76px;
  margin-top: 0;
  --arrow-start-y: 50%;
  --arrow-start-x: 0px;
  --arrow-end-x: 50px;
  --arrow-end-y: -10deg;
}

@media (max-width: 900px) {
  /* Мобильная версия: одна колонка, скрин сверху, все подсказки ниже. */
  .guide-page {
    width: min(100% - 20px, 980px);
    padding-top: 18px;
  }

  .instruction-frame {
    padding: 22px 16px 24px;
  }

  h1 {
    font-size: 25px;
  }

  .instruction-layout {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .calculator-shot {
    position: static;
    order: 1;
    width: min(100%, 360px);
    margin: 0 auto;
  }

  .rail-left,
  .rail-right {
    padding-top: 0;
  }

  .rail-left {
    order: 2;
  }

  .rail-right {
    order: 3;
  }

  .tip,
  .tip-1,
  .tip-2,
  .tip-3,
  .tip-4,
  .tip-5,
  .tip-6,
  .tip-7,
  .tip-8,
  .tip-9,
  .tip-10,
  .tip-11,
  .tip-12,
  .tip-13,
  .tip-14,
  .tip-15 {
    min-height: 0;
    margin-top: 0;
  }

  .tip::after {
    display: none;
  }
}