/* =====================================================
   Тема «Закат Зума» для главной страницы perek.us.

   Кладётся ПОВЕРХ landing_perek.css и landing_perek_calc.css: разметка,
   размеры и поведение остаются общими, тема меняет только цвет, шрифт и
   форму. Поэтому файл состоит из двух частей — переменные (их читают и
   лендинг, и калькулятор) и отмена приёмов «печенья»: дырочек крекера,
   жёсткого оттиска, надкусанного края тёмных полос и пунктирных линий.
   Ничего из слов и порядка блоков тема не трогает: иначе в отчёте нельзя
   было бы сказать, что сработало — текст или расцветка.

   Мир темы взят у маскота Зума (см. bot/services/mascot.py): малиновый
   хвост, оранжевая спина, жёлтая голова, глубокая слива вместо чёрного.
   ===================================================== */

/* -------- Шрифты: рядом, не с fonts.googleapis.com --------
   По той же причине, что и Inter в fonts.css: лишний домен — это лишние DNS
   и TLS и зависимость от того, доступен ли Google из сети человека. Сабсеты
   те же, что у Inter: кириллица отдельно от латиницы, чтобы телефон не
   скачивал буквы, которых на странице нет. Оба шрифта под OFL. */
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/static/fonts/unbounded-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Unbounded;
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
  src: url(/static/fonts/unbounded-latin.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: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/manrope-cyrillic.woff2) format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: Manrope;
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url(/static/fonts/manrope-latin.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;
}

/* -------- Переменные --------
   Имена совпадают с landing_perek.css, поэтому калькулятор, кольцо нормы и
   график плана перекрашиваются сами. Два значения выключают приёмы базы
   целиком: --stamp (жёсткая тень-оттиск) и --holes (дырочки крекера) —
   прозрачные, --btn-base (карамельное «дно» кнопки) тоже. */
:root {
  --font-ui: Manrope, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: Unbounded, var(--font-ui);

  --primary: #d9166f;      /* малина: заливки, иконки, кольцо */
  --primary-600: #c2125f;  /* малина для текста (5.9:1 на белом) */
  --amber: #ffb020;        /* манго */
  --sky: #7e5bd0;          /* лаванда — третий акцент вместо фисташки */

  --bg: #fff6ea;
  --bg-2: #ffeedb;
  --card: #ffffff;
  --band: #2b1433;         /* бегущая строка — слива */
  --dark: #2b1433;         /* тёмные полосы */
  --cream: #fff3e2;

  --text: #2b1433;
  --text-2: #5e4863;
  --text-3: #735d78;
  --border: rgba(43, 20, 51, 0.12);
  --line: rgba(43, 20, 51, 0.1);
  --stamp: transparent;
  --holes: transparent;

  --btn-bg: #d9166f;
  --btn-fg: #ffffff;
  --btn-base: transparent;

  --r-sm: 14px;
  --r-md: 20px;
  --r-lg: 28px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #ff4d94;
    --primary-600: #ffa3c5;
    --amber: #ffc96b;
    --sky: #b49bff;

    --bg: #170f1e;
    --bg-2: #20152b;
    --card: #241830;
    --band: #120b18;
    --dark: #120b18;
    --cream: #f6e9f2;

    --text: #f6e9f2;
    --text-2: #c9b4d2;
    --text-3: #a992b5;
    --border: rgba(246, 233, 242, 0.14);
    --line: rgba(246, 233, 242, 0.1);
    --stamp: transparent;
    --holes: transparent;

    --btn-bg: #ff4d94;
    --btn-fg: #2b0f20;
    --btn-base: transparent;
  }
}

/* -------- Фон: закат вместо припёка с дырочками -------- */
body::before {
  background:
    radial-gradient(56vw 46vw at 92% -10%, color-mix(in srgb, var(--amber) 40%, transparent), transparent 70%),
    radial-gradient(52vw 42vw at 4% 4%, color-mix(in srgb, var(--primary) 12%, transparent), transparent 70%),
    radial-gradient(60vw 46vw at 50% 106%, color-mix(in srgb, var(--primary) 10%, transparent), transparent 70%);
}
/* Шоколадные крошки принадлежат печенью — у заката их нет. */
.chip { display: none !important; }

/* -------- Шрифты страницы -------- */
h1, h2, h3, .brand-name, .msgr-title, .plan-date, .ring-num {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.02em;
}
.hero-title { font-size: 30px; line-height: 1.16; }
.hero-sub { font-weight: 500; }
.section-head h2, .closing h2 { font-size: 24px; line-height: 1.2; }
.brand-name { font-size: 16px; }
.btn { font-weight: 800; }
/* Кольцо и даты остаются Manrope: у Unbounded цифры слишком широкие, и
   четырёхзначная норма в кольце переставала помещаться. */
.ring-num, .plan-date { font-family: var(--font-ui); font-weight: 800; }

/* Последнее слово заголовка — наклейка, а не волнистое подчёркивание. */
.hero-title .accent {
  display: inline-block;
  margin-top: 6px;
  padding: 0 0.22em 0.06em;
  border-radius: 0.3em;
  background: var(--primary);
  color: #ffffff;
  text-decoration: none;
  transform: rotate(-2.5deg);
}

/* -------- Кнопки: мягкая тень вместо прижимающегося печенья -------- */
.btn-primary {
  box-shadow: 0 14px 28px -14px color-mix(in srgb, var(--primary) 75%, transparent);
}
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 32px -14px color-mix(in srgb, var(--primary) 75%, transparent); }
.btn-primary:active { transform: translateY(1px); box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--primary) 75%, transparent); }
.btn-cream { background: var(--amber); color: #2b1433; box-shadow: none; }
.btn-cream:hover { transform: translateY(-2px); box-shadow: 0 14px 26px -14px rgba(0, 0, 0, 0.5); }
.btn-cream:active { transform: translateY(1px); box-shadow: none; }
.mobile-cta { box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--primary) 70%, transparent); }

/* -------- Карточки: бумага без контура и оттиска -------- */
.panel {
  position: relative;
  border: none;
  box-shadow: 0 30px 60px -32px rgba(90, 25, 60, 0.45);
}
@media (prefers-color-scheme: dark) {
  .panel { box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.75); }
}
.tile, .msgr-opt { border: none; }
.tile-accent { background: color-mix(in srgb, var(--amber) 26%, var(--card)); }
.brand-mark { box-shadow: none; }

/* Подпись-адресат варианта и «состав» на первом экране: пастель вместо
   пунктира и оттиска. Цвета по порядку — хвост, спина и голова Зума. */
.tag { border: none; background: color-mix(in srgb, var(--primary) 12%, var(--card)); }
.hero-chips li { border: none; font-weight: 700; }
.hero-chips li:nth-child(1) { background: color-mix(in srgb, var(--primary) 14%, var(--card)); }
.hero-chips li:nth-child(2) { background: color-mix(in srgb, var(--amber) 26%, var(--card)); }
.hero-chips li:nth-child(3) { background: color-mix(in srgb, var(--sky) 16%, var(--card)); }

/* -------- Бегущая строка: слива с манго -------- */
.ticker { border-top: none; border-bottom: none; color: var(--amber); }
.ticker-set b::after { background: #ff4d94; opacity: 1; }

/* -------- Шаги: сплошные линии, разноцветные номера -------- */
.step { border-bottom: 2px solid var(--line); }
.step:last-child { border-bottom: none; }
.step-num { box-shadow: none; }
.steps li:nth-child(1) .step-num { background: var(--primary); color: #ffffff; }
.steps li:nth-child(2) .step-num { background: #ff8a2a; color: #2b1433; }
.steps li:nth-child(3) .step-num { background: var(--amber); color: #2b1433; }
.step-ic { background: color-mix(in srgb, var(--amber) 22%, transparent); color: var(--primary-600); }
@media (min-width: 720px) {
  .step { border: none; box-shadow: 0 18px 36px -26px rgba(90, 25, 60, 0.45); }
}

/* -------- Тёмные полосы: ровный край вместо надкуса -------- */
.promise, .closing {
  -webkit-mask: none;
  mask: none;
}
.promise { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.closing { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.promise-ic { background: rgba(255, 243, 226, 0.14); }

/* -------- Вопросы: сплошные линии -------- */
.qa { border-bottom: 1.5px solid var(--line); }
.qa:last-child { border-bottom: none; }

/* -------- Калькулятор: карточка, а не этикетка -------- */
.calc-head { border-bottom: 1.5px solid var(--line); }
.calc-title { font-family: var(--font-ui); font-weight: 800; font-size: 15px; letter-spacing: 0; text-transform: none; }
.calc-badge {
  border: none;
  background: var(--amber);
  color: #2b1433;
  letter-spacing: 0.04em;
}
.calc-chip.is-on { box-shadow: none; }
.calc-cap { color: var(--text-3); }
/* Три оттенка заката вместо карамельных: малина, манго, лаванда. */
.b-p { background: #d9166f; }
.b-f { background: #ffb020; }
.b-c { background: #7e5bd0; }

/* -------- Маскот Зум --------
   Стоит на верхнем крае карточки калькулятора: лапы заходят на неё, голова
   поднимается над ней. Лежит внутри карточки, поэтому держится её угла при
   любой ширине экрана. Картинка декоративная и кликов не перехватывает. */
.zum {
  display: block;
  height: auto;
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}
.zum-hero {
  position: absolute;
  z-index: 2;
  width: 132px;
  right: 6px;
  top: -94px;
}
/* Место для маскота над карточкой: на телефоне первый экран идёт в одну
   колонку, и без этого отступа Зум наехал бы на подпись под кнопкой. */
@media (max-width: 939px) {
  .hero { gap: 104px; }
}
@media (min-width: 940px) {
  /* Место над карточкой на широком экране добирается отступом первого экрана,
     а не выносом Зума вбок: сбоку он на ширине около 1000 px упирался в край
     окна и обрезался, потому что свободного места рядом с карточкой там нет. */
  .hero { padding-top: 104px; }
  .zum-hero { width: 150px; top: -100px; right: 10px; }
  .hero-title { font-size: 38px; }
  .section-head h2, .closing h2 { font-size: 28px; }
}
@media (min-width: 1200px) {
  .hero-title { font-size: 42px; }
  .zum-hero { width: 162px; top: -108px; }
}
.zum-closing {
  width: 170px;
  margin: 0 auto 10px;
}

/* =====================================================
   Страницы продуктов (/food/*): та же тема поверх food_page.css.

   Они стоят на тех же базовых стилях, поэтому переменных выше хватает почти
   на всё. Здесь — только то, что принадлежит «печенью» именно в этом разделе:
   пунктирные линии внутри карточек и коричневое свечение липкой кнопки.
   Ротация тем сюда не приходит: тест оформления идёт на лендинге, а эти
   страницы носят основную тему сервиса (webapp/routers/food.py).
   ===================================================== */
.fp-norm { border-top: 1.5px solid var(--line); }
.fp-micro { border-bottom: 1.5px solid var(--line); }
.fp-table tbody tr + tr > * { border-top: 1.5px solid var(--line); }
.fp-bar { box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--primary) 70%, transparent); }
/* Поле «своя порция» остаётся с пунктиром: он здесь не украшение, а знак
   того, что число можно править. */
.fp-own input { border-bottom-style: dashed; }