/* =========================================================
   ЧУУК — новые блоки интерфейса
   ---------------------------------------------------------
   Подключается ПОСЛЕДНИМ, после styles.css. Здесь живёт то,
   чего в старом файле не было: значки «Проверен», три окна
   на первом экране, игра «Пайплайн», плавающий чат.

   Старые стили отсюда не переопределяем — для правок
   существующих блоков есть styles.css.
   ========================================================= */

/* ===== ЗНАЧКИ НА КАРТОЧКЕ ПОДРЯДЧИКА =====
   Разметку рисует renderOfferMeta() в js/offer-ui.js, а правила
   для неё лежат внутри chuukEnsureSharedStyles() (cabinet.js:638)
   — но на главной эта функция не вызывалась, поэтому значки
   выглядели как обычный текст. Отсюда просьба владельца про
   синюю галочку «Проверен».

   Селекторы ниже намеренно с двумя классами: chuukEnsureSharedStyles
   вставляет свои стили в конец <head>, то есть ПОСЛЕ этого файла,
   и при равном весе победил бы он. */

.offer-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.offer-card-meta .chuuk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: var(--r-pill);
  background: var(--chuuk-surface-soft);
  color: var(--chuuk-muted);
  font-family: var(--font-text);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.offer-card-meta .chuuk-badge--legal {
  background: var(--chuuk-surface-soft);
  color: var(--chuuk-muted);
}

/* Галочка синяя и в кружке — как просил владелец.
   Символ «✓» приходит из JS внутри текста, поэтому текст
   гасим нулевым кеглем и рисуем значок и подпись сами:
   так галочка всегда ровная, а не «плывёт» по базовой линии. */
.offer-card-meta .chuuk-badge--verified {
  background: var(--chuuk-blue-soft);
  color: var(--chuuk-blue);
  font-weight: 700;
  font-size: 0;
  gap: 5px;
}

.offer-card-meta .chuuk-badge--verified::before {
  content: "✓";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--chuuk-blue);
  color: #fff;
  font-size: 9px;
  font-weight: 700;
}

.offer-card-meta .chuuk-badge--verified::after {
  content: "Проверен";
  font-size: 11px;
}

.offer-card-meta .chuuk-badge--pending {
  background: #fff3cd;
  color: #8a6800;
}


/* =========================================================
   ТРИ ОКНА НА ПЕРВОМ ЭКРАНЕ
   Игра · три шага калькулятора · маршрут текстом.
   Заменили прежний блок «Как это работает».
   ========================================================= */

.chuuk-landing {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 8px 0 0;
}

/* Белые карточки с мягкой тенью на светлом фоне —
   минимализм в духе гугловских страниц */
.chuuk-landing__card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 22px;
  background: var(--chuuk-surface);
  border: 1px solid var(--chuuk-line);
  border-radius: var(--r-card);
  color: var(--chuuk-ink);
}

.chuuk-landing__head {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.chuuk-landing__kicker {
  font-size: 12px;
  color: var(--chuuk-muted-light);
}

.chuuk-landing__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.chuuk-landing__note {
  margin-top: auto;
  font-size: 12px;
  line-height: 1.4;
  color: var(--chuuk-muted-light);
}

/* Три шага калькулятора */
.chuuk-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chuuk-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.chuuk-steps__num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--chuuk-blue-soft);
  color: var(--chuuk-blue);
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chuuk-steps__text {
  font-size: 14px;
  line-height: 1.45;
  color: var(--chuuk-muted);
}

/* Маршрут текстом */
.chuuk-route {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.chuuk-route__item {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--chuuk-muted);
}

.chuuk-route__item b {
  color: var(--chuuk-ink);
  font-weight: 500;
}

.chuuk-route__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--chuuk-blue);
}


/* ===== ИГРА «ПАЙПЛАЙН» ===== */

.chuuk-game {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #061d31;

  /* В игре зажимают кнопки и тапают по экрану — браузер принимал это
     за выделение текста и подсвечивал синим полкартинки. На телефоне
     сверху ещё и всплывало меню «копировать». */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.chuuk-game * {
  user-select: none;
  -webkit-user-select: none;
}

/* Холст маленький и растягивается без сглаживания —
   отсюда пиксельная картинка и пиксельные буквы */
#pipelineCanvas {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

/* Развёрнутый вид — окно размером с календарь, а не на весь
   экран: холст всего 320 пикселей в ширину, и при сильном
   растягивании вся картинка рассыпается на крупные квадраты. */
.chuuk-game.is-expanded {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100vw - 40px));
  height: auto;
  aspect-ratio: 16 / 9;
  z-index: 9500;
  box-shadow: 0 30px 80px rgba(3, 39, 63, .45);
}

body.chuuk-game-open {
  overflow: hidden;
}

.chuuk-game__expand {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 3;
  width: 26px;
  height: 26px;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .8);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background .15s;
}

.chuuk-game__expand:hover {
  background: rgba(255, 255, 255, .28);
  color: #fff;
}

/* Белая кнопка в окне игры: «Начать» на экране уровня */
.chuuk-game__play {
  padding: 9px 24px;
  border: none;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--chuuk-navy);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: transform .15s;
}

.chuuk-game__play:hover {
  transform: translateY(-1px);
}

/* На экран уровня кнопка приходит уже выбранной — чтобы уровень
   стартовал пробелом. Своя рамка вместо системной: жёлто-оранжевая
   обводка браузера в тёмном окне выглядит поломкой. */
.chuuk-game__play:focus {
  outline: none;
}

.chuuk-game__play:focus-visible {
  outline: 2px solid rgba(255, 255, 255, .55);
  outline-offset: 2px;
}

/* Этап и счёт стоят рядом слева, справа остаётся место
   под кнопки разворота и закрытия */
.chuuk-game__hud {
  position: absolute;
  top: 8px;
  left: 10px;
  right: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 500;
  color: rgba(255, 255, 255, .8);
  pointer-events: none;
}

.chuuk-game__hud span:last-child {
  color: rgba(255, 255, 255, .55);
}

.chuuk-game__hud[hidden] {
  display: none;
}

/* Секундомер: внизу по центру, чуть выше края — там пусто,
   и он не лезет ни в игру, ни в надпись «Рекорды» слева */
.chuuk-game__timer {
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  z-index: 2;
  padding: 3px 12px;
  border-radius: var(--r-pill);
  background: rgba(3, 39, 63, .55);
  color: rgba(255, 255, 255, .9);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .06em;
  pointer-events: none;
}

.chuuk-game__timer[hidden] {
  display: none;
}

.chuuk-game__over {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px;
  text-align: center;
  background: #061d31;
}

.chuuk-game__over[hidden] {
  display: none;
}

.chuuk-game__over-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.01em;
}

.chuuk-game__over-text {
  font-size: 12px;
  line-height: 1.4;
  color: rgba(255, 255, 255, .7);
  max-width: 220px;
}

.chuuk-game__restart {
  margin-top: 4px;
  padding: 9px 20px;
  border: none;
  border-radius: var(--r-pill);
  background: #fff;
  color: var(--chuuk-navy);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.chuuk-game__levels-btn {
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-text);
  font-size: 12px;
  cursor: pointer;
}


/* ===== ЭКРАН ЗАДАНИЯ ПЕРЕД УРОВНЕМ =====

   Собран той же вёрсткой, что первый экран и финал: сплошной фон,
   заголовок дисплейным шрифтом, подписи мелким моноширинным.
   Раньше этот экран рисовался прямо на холсте пиксельными буквами
   и рядом с остальными окнами выглядел куском другой игры. */

.chuuk-game__brief {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  background: #061d31;
  color: #fff;
  cursor: pointer;   /* экран запускается кликом в любое место */
}

.chuuk-game__brief[hidden] {
  display: none;
}

.chuuk-game__brief-step {
  font-size: 10px;
  color: rgba(255, 255, 255, .5);
}

/* Сам предмет уровня: тот же пиксельный рисунок, что в игре */
.chuuk-game__brief-item {
  width: 24px;
  height: 24px;
  margin: 2px 0;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.chuuk-game__brief-goal {
  font-size: 11px;
  color: #ffd166;
}

.chuuk-game__brief-avoid {
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
}

.chuuk-game__brief .chuuk-game__play {
  margin-top: 2px;
  padding: 7px 20px;
  font-size: 13px;
}



/* ===== ФИНАЛ: ПРОЕКТ СДАН ===== */

/* Всё должно помещаться в маленькое окно игры,
   поэтому кегли мелкие, а отступы плотные */
.chuuk-game__finish {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px;
  text-align: center;
  background: #061d31;
  color: #fff;
}

.chuuk-game__finish[hidden] {
  display: none;
}

.chuuk-game__finish-title {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}

/* Пункты пайплайна с галочками — как уровни */
.chuuk-game__checklist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
}

.chuuk-game__check {
  padding: 2px 7px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .12);
  font-size: 10px;
  color: rgba(255, 255, 255, .9);
}

.chuuk-game__time {
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
}

.chuuk-game__record {
  display: flex;
  gap: 5px;
  margin-top: 2px;
}

.chuuk-game__record[hidden] {
  display: none;
}

.chuuk-game__record input {
  width: 132px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 8px;
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font-family: var(--font-text);
  font-size: 12px;
}

.chuuk-game__record input::placeholder {
  color: rgba(255, 255, 255, .45);
}

.chuuk-game__record input:focus {
  outline: none;
  border-color: var(--chuuk-blue);
}

.chuuk-game__record button {
  padding: 6px 12px;
  border: none;
  border-radius: 8px;
  background: var(--chuuk-blue);
  color: #fff;
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}

.chuuk-game__best {
  font-size: 10px;
  color: rgba(255, 255, 255, .55);
}

.chuuk-game__finish-actions {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 6px;
}

/* Рекорды внутри окна игры — тот же тёмный экран, что и остальные */
.chuuk-game__records {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  text-align: center;
  background: #061d31;
  color: #fff;
}

.chuuk-game__records[hidden] { display: none; }

.chuuk-game__records-list {
  width: min(280px, 100%);
  max-height: 96px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 12px;
}

.chuuk-game__record-row {
  display: grid;
  grid-template-columns: 16px 1fr auto;
  gap: 8px;
  align-items: center;
  padding: 4px 8px;
  border-radius: 7px;
  background: rgba(255, 255, 255, .07);
  text-align: left;
}

.chuuk-game__record-row.is-me { background: rgba(77, 155, 255, .28); font-weight: 600; }

.chuuk-game__record-place { color: rgba(255, 255, 255, .5); font-size: 10px; }

.chuuk-game__record-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chuuk-game__record-time { font-variant-numeric: tabular-nums; }

.chuuk-game__records-empty {
  font-size: 11px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.4;
}

/* =========================================================
   ЗАСТАВКА ЗАГРУЗКИ
   ---------------------------------------------------------
   Держит экран, пока страница не собралась целиком: смета
   и кейс подтягивают обложки из закрытой корзины, и без неё
   видно, как картинки появляются рывком.

   Одна на обе страницы — смету и кейс. Показывается сразу,
   разметкой; убирает её страница, когда всё готово.
   ========================================================= */

.chuuk-loader {
  position: fixed;
  inset: 0;
  /* Выше плавающей кнопки «Чаты» (9000): пока грузимся,
     на белом экране не должно торчать ничего лишнего */
  z-index: 9600;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 26px;
  background: #fff;
  transition: opacity .35s ease;
}

.chuuk-loader.is-gone { opacity: 0; pointer-events: none; }

.chuuk-loader__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  animation: chuuk-loader-breathe 1.8s ease-in-out infinite;
}

.chuuk-loader__mark img { width: 38px; height: 38px; }

.chuuk-loader__mark span {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 30px;
  letter-spacing: -.01em;
  color: var(--chuuk-navy, #03273f);
}

/* Подпись под знаком — тем же узким плакатным шрифтом, что
   и «И СМЕТА ГОТОВА!» на заставке входа. Это её младшая сестра:
   те же слова через запятую после «ЧУУК». */
.chuuk-loader__tag {
  margin-top: -14px;
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: .01em;
  color: var(--chuuk-navy, #03273f);
  opacity: .75;
}

/* Колесо: не проценты, а признак жизни — сколько ехать,
   заранее неизвестно */
.chuuk-loader__wheel {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 3px solid rgba(3, 39, 63, .12);
  border-top-color: var(--chuuk-blue, #3a6ff7);
  animation: chuuk-loader-spin .8s linear infinite;
}

@keyframes chuuk-loader-breathe {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}

@keyframes chuuk-loader-spin {
  to { transform: rotate(360deg); }
}

/* Кому анимация мешает — просто белый экран со знаком */
@media (prefers-reduced-motion: reduce) {
  .chuuk-loader__mark,
  .chuuk-loader__wheel { animation: none; }
}

/* Готовую страницу проявляем целиком, а не по кусочкам */
.chuuk-fade { opacity: 0; transition: opacity .35s ease; }
.chuuk-fade.is-ready { opacity: 1; }

/* Пока держится заставка, плашку про куки не показываем: она
   выше по слоям и торчала бы поверх белого экрана. Заставка
   при готовности удаляется из страницы — и правило перестаёт
   действовать само. */
.chuuk-loader ~ .cookie-bar { display: none; }

/* На печати плашки быть не должно: смету уносят руководству */
@media print {
  .cookie-bar { display: none !important; }
}


/* Логотип на светлых страницах — смета и кейс. В шапке главной
   он белый поверх синего блока, здесь фон белый, поэтому берём
   ту же клавишу на тёмной плитке, что стоит значком вкладки.
   Отдельной копии буквы «Ч» не заводим: это тот же favicon.svg. */
.chuuk-logo--ink .chuuk-logo__name { color: var(--chuuk-navy, #03273f); }
.chuuk-logo--ink .chuuk-logo__key { width: 30px; height: 30px; }

/* Ссылка в плашке чата: «Открыть обращения» для админа */
.cw__admin-link {
  display: inline-block;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: var(--chuuk-blue);
  color: #fff;
  font-size: 12px;
  text-decoration: none;
}

.cw__admin-link:hover { background: #2f5fe0; }

/* «Рекорды» в левом нижнем углу — надпись, а не плашка */
.chuuk-game__records-link {
  position: absolute;
  left: 10px;
  bottom: 8px;
  z-index: 3;
  border: none;
  background: none;
  padding: 0;
  color: rgba(255, 255, 255, .55);
  font-family: var(--font-text);
  font-size: 11px;
  cursor: pointer;
}

.chuuk-game__records-link:hover { color: #fff; }
.chuuk-game__records-link[hidden] { display: none; }

.chuuk-game__finish .chuuk-game__restart {
  margin-top: 0;
  padding: 7px 16px;
  font-size: 12px;
}

/* Окно игры держит пропорции 16:9, поэтому на узком телефоне оно
   низкое: строки влезают впритык. Поджимаем отступы.

   Блок стоит в конце игровых стилей намеренно: выше у тех же
   классов заданы свои отступы, и при равном весе побеждает тот,
   кто ниже. Поднимешь выше — правило перестанет работать. */
@media (max-width: 420px) {
  .chuuk-game__brief { gap: 3px; padding: 8px; }
  .chuuk-game__brief-item { width: 18px; height: 18px; margin: 0; }

  /* Финал у гостя самый плотный: там ещё и поле для имени */
  .chuuk-game__finish { gap: 2px; padding: 8px; }
  .chuuk-game__finish-title { font-size: 15px; }
  .chuuk-game__finish-actions { gap: 8px; margin-top: 3px; }

  .chuuk-game__check { padding: 2px 6px; font-size: 9px; }

  /* На финале этапы стоят первой строкой во всю ширину, и кнопка
     разворота из правого верхнего угла наезжала на «Правки».
     Сужать этапы нельзя — они переносятся на вторую строку и окно
     перестаёт помещаться. Поэтому на телефоне кнопка уходит вниз:
     справа внизу пусто на всех экранах игры. */
  .chuuk-game__expand { top: auto; bottom: 6px; right: 6px; }
  .chuuk-game__record input,
  .chuuk-game__record button { padding: 4px 9px; font-size: 11px; }
  .chuuk-game__record input { width: 118px; }
}


/* =========================================================
   ЛИСТ PDF
   ---------------------------------------------------------
   Документ рисуется в невидимом блоке шириной 718 точек — это
   рабочая ширина листа A4. Из-за такой ширины срабатывали
   мобильные правила страницы сметы, и двухколоночная сетка
   схлопывалась в одну. Здесь возвращаем ей нормальный вид:
   лист — это лист, а не телефон.

   Селектор из двух классов специально: он должен перебивать
   правило внутри @media (max-width:900px) в estimate.html.
   ========================================================= */

.chuuk-pdf-sheet .estimate-doc__meta {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* =========================================================
   КОММЕНТАРИЙ К СМЕТЕ
   Кнопка и строка подтверждения под полем.
   ========================================================= */

.comment-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.comment-save {
  padding: 9px 16px;
  border: 1px solid var(--chuuk-line);
  border-radius: 10px;
  background: #fff;
  color: var(--chuuk-ink);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.comment-save:hover { border-color: var(--chuuk-blue); color: var(--chuuk-blue); }

/* Строка рядом с кнопкой комментария осталась пустой: подтверждение
   ушло во всплывающее окно. Правило держим на случай, если сюда
   когда-нибудь напишут ошибку — но зелёным здесь не пишем. */
.comment-state {
  font-size: 13px;
  color: var(--chuuk-muted);
}


/* =========================================================
   ЗАПРЕТ ЗЕЛЁНЫХ НАДПИСЕЙ В ОКНЕ ВХОДА
   ---------------------------------------------------------
   Владелец несколько раз ловил мелкую зелёную строчку, которая
   на секунду загоралась при входе и регистрации. Код мы вычистили,
   но окно входа собирается из нескольких мест, и надёжнее закрыть
   саму возможность: что бы туда ни написали, зелёным оно не станет.

   Ошибки (красные) и «идёт работа» (серые) правило не трогает —
   у них цвет задаётся прямо в разметке, а он сильнее.
   ========================================================= */

#authMsg:not([style*="color"]),
#entryVerifyMsg:not([style*="color"]) {
  color: var(--chuuk-muted);
}


/* =========================================================
   ПОДСКАЗКА «ЧТО ДАЛЬШЕ» НАД КАРТОЧКАМИ ПОДРЯДЧИКОВ
   ---------------------------------------------------------
   Новый человек досчитывает смету и застревает: кнопки «скачать»
   на первом экране нет, она живёт на странице подрядчика.
   Поэтому прямо над карточками стоит маршрут из двух шагов.
   ========================================================= */

.offer-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--chuuk-blue-soft);
}

.offer-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--chuuk-ink);
}

.offer-steps__num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  background: var(--chuuk-blue);
  color: #fff;
}

/* Пройденный шаг гасим, чтобы взгляд шёл на текущий */
.offer-steps__item.is-done { color: var(--chuuk-muted); }

.offer-steps__item.is-done .offer-steps__num {
  background: #fff;
  color: var(--chuuk-blue);
  border: 1px solid var(--chuuk-blue);
}

.offer-steps__item.is-now b { font-weight: 700; }


/* =========================================================
   ПОЛОЖЕНИЕ ЦЕНЫ НА КАРТОЧКЕ ПОДРЯДЧИКА
   ---------------------------------------------------------
   Цифры подобрал владелец вручную, инструментом «Двигать цену»
   (он был временный и уже убран): 22 пикселя вправо, 19 вниз.
   Так цена встаёт на одну линию с кружком логотипа.

   Сдвиг сделан через transform, а не через отступы: цена ездит,
   ни на что не влияя, — соседи и высота карточки на месте.
   ========================================================= */

.offer-producer-card .offer-ticket__price {
  transform: translate(22px, 19px);
}

/* =========================================================
   ЦЕНА ПЕРЕСЧИТЫВАЕТСЯ
   ---------------------------------------------------------
   Поменяли даты или доп — цена в карточке считается заново,
   и доли секунды там висит прежнее число. Человек успевал его
   прочитать, открыть оффер и увидеть другую сумму.

   Поэтому на время пересчёта число гаснет и под ним появляется
   подпись. Класс вешает markProducerCardsBusy() в js/offers.js —
   и только если пересчёт затянулся дольше трети секунды, иначе
   подпись бы просто мигала.
   ========================================================= */

.offer-producer-card .offer-ticket__price-current,
.offer-producer-card .offer-ticket__price-old {
  transition: opacity .18s ease;
}

.offer-producer-card.is-recalc .offer-ticket__price-current,
.offer-producer-card.is-recalc .offer-ticket__price-old {
  opacity: .25;
}

.offer-producer-card.is-recalc .offer-ticket__price {
  position: relative;
}

.offer-producer-card.is-recalc .offer-ticket__price::after {
  content: "считаем цену…";
  position: absolute;
  left: 0;
  top: 100%;
  margin-top: 2px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--chuuk-muted-light, #98a5b6);
  animation: chuuk-recalc 1.1s ease-in-out infinite;
}

@keyframes chuuk-recalc {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .offer-producer-card.is-recalc .offer-ticket__price::after { animation: none; }
}


/* =========================================================
   ЗАСТАВКА НА ВХОДЕ
   Клавиша нажимается сама, рядом маской открывается «ЧУУК».
   Разметку собирает js/intro.js, показывается раз за визит.
   ========================================================= */

.chuuk-intro {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--chuuk-navy);
  opacity: 1;
  transition: opacity .45s ease, transform .45s ease;
}

.chuuk-intro.is-leaving {
  opacity: 0;
  transform: scale(1.04);
  pointer-events: none;
}

body.chuuk-intro-open {
  overflow: hidden;
}

.chuuk-intro__stage {
  position: relative;
  text-align: center;
  padding: 20px;
}

/* Клавиша слева, слово справа — то же построение, что в логотипе */
.chuuk-intro__lockup {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(14px, 3vw, 28px);
}

/* Клавиша сначала проявляется — чуть подрастает из ничего.
   Только после этого нажимается, иначе нажатие происходит
   раньше, чем глаз успел заметить саму клавишу. */
.chuuk-intro__art {
  width: clamp(96px, 19vw, 176px);
  height: auto;
  display: block;
  flex-shrink: 0;
  opacity: 0;
  animation: chuuk-key-in .5s cubic-bezier(.2, .9, .3, 1) forwards;
}

@keyframes chuuk-key-in {
  from { opacity: 0; transform: scale(.82); }
  to   { opacity: 1; transform: scale(1); }
}

/* Клавиша нажимается сама.
   Верх съезжает ровно на высоту бока (16 единиц вьюбокса) —
   бок скрывается, и это читается как «клавиша утоплена».
   Вниз быстро и резко, назад мягко с лёгким перелётом:
   так ведёт себя настоящая клавиша.

   Проценты считаются от 2,4 с: до 25% (0,6 с) клавиша просто
   стоит — это время уходит на её появление. */
.chuuk-intro__cap {
  animation: chuuk-cap 2.4s forwards;
}

@keyframes chuuk-cap {
  0%,  25% { transform: translateY(0);    animation-timing-function: cubic-bezier(.5, 0, .9, .4); }
  30%      { transform: translateY(16px); animation-timing-function: linear; }
  34%      { transform: translateY(16px); animation-timing-function: cubic-bezier(.2, 1.5, .4, 1); }
  42%, 100%{ transform: translateY(0); }
}

/* Слово и подпись стоят колонкой справа от клавиши */
.chuuk-intro__text {
  text-align: center;
}

/* Слово открывается слева направо, будто из-под шторки.
   Шрифт тот же, что в шапке сайта. */
.chuuk-intro__word {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(36px, 10.5vw, 96px);
  letter-spacing: -.02em;
  line-height: 1;
  color: #fff;
  overflow: hidden;
}

.chuuk-intro__word span {
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: chuuk-reveal .7s cubic-bezier(.35, .9, .25, 1) forwards;
  animation-delay: .72s;   /* ровно в момент нажатия */
}

/* Подпись открывается той же маской, чуть позже слова.
   Шрифт узкий, плакатный — специально не как у «ЧУУК». */
.chuuk-intro__tag {
  margin-top: clamp(4px, 1vw, 10px);
  font-family: var(--font-condensed);
  font-weight: 600;
  font-size: clamp(20px, 4.6vw, 40px);
  letter-spacing: .01em;
  line-height: 1;
  color: #fff;
  overflow: hidden;
}

.chuuk-intro__tag span {
  display: block;
  clip-path: inset(0 100% 0 0);
  animation: chuuk-reveal .6s cubic-bezier(.35, .9, .25, 1) forwards;
  animation-delay: 1.07s;
}

@keyframes chuuk-reveal {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0 0 0); }
}

/* Кнопки «Пропустить» здесь больше нет: она портила кадр,
   а пропустить можно кликом по любому месту заставки. */


/* =========================================================
   ПЛАВАЮЩАЯ КНОПКА «ЧАТЫ»
   Правый нижний угол, на всех страницах.
   ========================================================= */

.cw {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9000;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  font-family: var(--font-text);
}

/* =========================================================
   ПОДВАЛ
   ---------------------------------------------------------
   Ссылки на страницы про данные должны быть видны всегда,
   а не только в плашке про куки: на неё отвечают один раз.
   ========================================================= */

/* Подвал прижат к низу окна, но остаётся своей нормальной высоты.
   Красить фон страницы в тёмный было ошибкой: на большом экране
   получалась полоса во весь остаток экрана. */
body:has(.site-footer) {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

body:has(.site-footer) .site-footer { margin-top: auto; }

.site-footer {
  flex: none;
  padding: 22px 20px 24px;
  background: var(--chuuk-navy, #03273f);
  color: rgba(255, 255, 255, .72);
}

.site-footer__inner {
  max-width: 1160px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 26px;
  font-size: 13.5px;
}

.site-footer__brand { font-weight: 600; color: #fff; }

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
}

.site-footer__links a,
.site-footer__link-btn {
  color: rgba(255, 255, 255, .78);
  text-decoration: none;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, .28);
  padding: 0 0 1px;
  background: none;
  font: inherit;
  cursor: pointer;
}

.site-footer__links a:hover,
.site-footer__link-btn:hover { color: #fff; border-bottom-color: #fff; }

.site-footer__links a:focus-visible,
.site-footer__link-btn:focus-visible { outline: 2px solid #ffb74d; outline-offset: 3px; }

/* На печати и в PDF от интерфейса не должно остаться ничего: смету
   уносят руководству как коммерческое предложение.

   Нижняя панель сюда попала не сама — она живёт в @media (max-width),
   а печать на компьютере идёт по ширине листа, и правило её не
   выключало. Владелец увидел мобильную панель на распечатке. */
@media print {
  .site-footer,
  .chuuk-tabbar,
  .offer-jump,
  .cw { display: none !important; }

  /* Отступ под панель на печати тоже не нужен */
  body.chuuk-has-tabbar { padding-bottom: 0 !important; }
}

/* Плашка про куки занимает низ экрана и перекрыла бы кнопку */
.cookie-bar:not([hidden]) ~ .cw {
  bottom: 120px;
}

.cw__fab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 20px;
  border: none;
  border-radius: var(--r-pill);
  background: var(--chuuk-navy);
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  box-shadow: var(--shadow-float);
  transition: transform .2s, background .2s;
}

.cw__fab:hover {
  transform: translateY(-2px);
  background: var(--chuuk-navy-hover);
}

.cw__fab-icon {
  display: flex;
  align-items: center;
}

.cw__dot {
  position: absolute;
  top: 6px;
  right: 10px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--chuuk-blue);
  border: 2px solid var(--chuuk-navy);
}

.cw__dot[hidden] {
  display: none;
}

/* Панель выезжает снизу вверх с лёгким затуханием.
   Порядок в разметке — панель над кнопкой, поэтому
   она «вырастает» из кнопки. */
.cw__panel {
  width: 340px;
  max-width: calc(100vw - 40px);
  max-height: min(70vh, 540px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--chuuk-surface);
  border: 1px solid var(--chuuk-line);
  border-radius: 18px;
  box-shadow: 0 20px 50px rgba(3, 39, 63, .22);

  transform-origin: bottom right;
  transition: opacity .2s ease, transform .22s cubic-bezier(.2, .8, .3, 1);
}

.cw__panel.is-hidden {
  opacity: 0;
  transform: translateY(12px) scale(.96);
  pointer-events: none;
}

.cw__panel[hidden] {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .cw__panel,
  .chuuk-tabbar {
    transition: none;
  }
}

/* Полоска, за которую окно перетаскивают */
.cw__grip {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding: 8px 10px;
  background: var(--chuuk-surface-soft);
  cursor: grab;
  touch-action: none;
}

.cw__panel.is-dragging .cw__grip {
  cursor: grabbing;
}

.cw__icon-btn {
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--chuuk-muted);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.cw__icon-btn:hover {
  background: var(--chuuk-line);
  color: var(--chuuk-ink);
}

/* Увеличенное окно для гостя: уходить ему некуда,
   поэтому «на весь экран» просто расширяет панель */
.cw__panel.is-big {
  width: min(560px, calc(100vw - 40px));
  max-height: min(80vh, 700px);
}

.cw__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--chuuk-line);
}

.cw__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--chuuk-ink);
}

.cw__back,
.cw__close {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  border: none;
  border-radius: 50%;
  background: var(--chuuk-surface-soft);
  color: var(--chuuk-muted);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

.cw__back[hidden] {
  display: none;
}

.cw__back:hover,
.cw__close:hover {
  background: var(--chuuk-line);
}

.cw__body {
  flex: 1;
  overflow-y: auto;
}

.cw__loading {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--chuuk-muted-light);
}

/* Список веток */
.cw__threads {
  list-style: none;
  margin: 0;
  padding: 6px;
}

.cw__thread {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 12px;
  border: none;
  border-radius: 12px;
  background: transparent;
  text-align: left;
  cursor: pointer;
  transition: background .15s;
}

.cw__thread:hover {
  background: var(--chuuk-surface-soft);
}

.cw__thread-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--chuuk-ink);
}

.cw__thread-sub {
  font-size: 12px;
  color: var(--chuuk-muted-light);
}

/* Лента внутри панели. Общие стили переписки приезжают
   из cabinet.js, здесь только подгонка под узкое окно. */
.cw .chuuk-chat {
  border: none;
  border-radius: 0;
  font-family: var(--font-text);
}

.cw .chuuk-chat__feed {
  max-height: 320px;
  padding: 14px;
}

/* Приветствие от поддержки — короткая инструкция при первом входе */
.cw__welcome {
  margin: 10px 12px 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--chuuk-blue-soft);
  font-size: 13px;
  line-height: 1.5;
  color: var(--chuuk-ink);
}

.cw__welcome-from {
  margin-bottom: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--chuuk-blue);
}

.cw__welcome p {
  margin: 0 0 6px;
}

.cw__welcome ol {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.cw__welcome-tail {
  margin: 8px 0 0 !important;
  color: var(--chuuk-muted);
}

/* Форма гостя */
.cw__guest {
  padding: 16px;
}

.cw__guest-note {
  margin: 0 0 14px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chuuk-muted);
}

.cw__guest input,
.cw__guest textarea {
  width: 100%;
  margin-bottom: 10px;
  padding: 11px 13px;
  border: 1px solid var(--chuuk-line);
  border-radius: 12px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--chuuk-ink);
  resize: vertical;
}

.cw__guest input:focus,
.cw__guest textarea:focus {
  outline: none;
  border-color: var(--chuuk-blue);
}

/* Согласие на обработку данных в гостевой форме поддержки.
   Галочка не отмечена заранее — так требует 152-ФЗ. */
.cw__consent {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 10px;
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.45;
  color: var(--chuuk-muted);
  cursor: pointer;
}

.cw__consent input {
  width: 16px;
  height: 16px;
  margin: 1px 0 0;
  flex: none;
  accent-color: var(--chuuk-blue);
  cursor: pointer;
}

.cw__consent a {
  color: var(--chuuk-blue);
  text-decoration: underline;
}

.cw__guest-send {
  width: 100%;
  height: 44px;
  border: none;
  border-radius: 12px;
  background: var(--chuuk-blue);
  color: #fff;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.cw__guest-send:hover {
  background: #1560cf;
}

.cw__guest-login {
  width: 100%;
  height: 44px;
  margin-top: 8px;
  border: none;
  border-radius: 12px;
  background: var(--chuuk-blue-soft);
  color: var(--chuuk-blue);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}

.cw__guest-done {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--chuuk-ink);
}


@media (max-width: 900px) {
  .chuuk-landing {
    grid-template-columns: 1fr;
  }

  /* Строка поиска в колонку: четыре поля в ряд на телефоне
     превращаются в нечитаемые полоски */
  .chuuk-search {
    flex-direction: column;
    border-radius: 16px;
  }

  .chuuk-search .info-row {
    flex-direction: column;
    gap: 8px;
  }

  .chuuk-search .quick-start-btn {
    height: 48px;
    width: 100%;
  }

  .chuuk-title {
    font-size: 28px;
  }

  .chuuk-header {
    margin: 28px 0 20px;
  }

  /* Ширина 420px оставалась от десктопа и вылезала за экран */
  .chuuk-price-card {
    width: auto !important;
    max-width: none !important;
    position: static !important;
  }
}

/* Оффер — первое, что человек должен увидеть: ради него он и пришёл.
   Когда колонки складываются в столбик, оффер оказывается под всеми
   настройками, и до него приходится долго листать. Порядком в
   разметке это не решить: на компьютере настройки обязаны стоять
   слева.

   Ровно 768, как и `flex-direction: column` у .chuuk-content
   в styles.css: пока колонки стоят рядом, order увёл бы оффер влево,
   а настройки вправо. */
@media (max-width: 768px) {
  .chuuk-price-card { order: -1; }
}

@media (max-width: 560px) {
  .cw {
    right: 12px;
    bottom: 12px;
  }

  .cw__fab-text {
    display: none;
  }

  .cw__fab {
    width: 52px;
    height: 52px;
    padding: 0;
    justify-content: center;
  }
}


/* =========================================================
   ОПЛАТА В СДЕЛКЕ
   ---------------------------------------------------------
   Полоса рядом с этапами: сколько и когда. Шаги считаются
   из статуса сделки и условий оплаты (chuukRenderPayment
   в cabinet.js), в базе ничего нового не заводится.
   ========================================================= */

.pay-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pay-step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--chuuk-line);
  border-radius: 12px;
  background: var(--chuuk-surface);
}

.pay-step__mark {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--chuuk-line);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

.pay-step__body { flex: 1; min-width: 0; }

.pay-step__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--chuuk-ink);
}

.pay-step__hint {
  font-size: 12px;
  color: var(--chuuk-muted);
  margin-top: 2px;
}

.pay-step__right { text-align: right; }

.pay-step__sum {
  font-size: 15px;
  font-weight: 700;
  color: var(--chuuk-ink);
  white-space: nowrap;
}

.pay-step__state {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--chuuk-muted);
  margin-top: 2px;
}

/* Прошло — зелёная галочка. Здесь зелёный уместен: это не надпись
   в форме, а отметка на шкале денег. */
.pay-step--done .pay-step__mark { background: #12805c; border-color: #12805c; }
.pay-step--done { background: #f4fbf8; border-color: #cfeade; }

/* Ждём именно этого — синяя рамка, шаг подсвечен */
.pay-step--now { border-color: var(--chuuk-blue); background: var(--chuuk-blue-soft); }
.pay-step--now .pay-step__mark { background: var(--chuuk-blue); border-color: var(--chuuk-blue); }
.pay-step--now .pay-step__state { color: var(--chuuk-blue); font-weight: 700; }

/* Ещё впереди — приглушённый */
.pay-step--later { opacity: .65; }


/* =========================================================
   МОИ ЦЕНЫ (кабинет подрядчика)
   ---------------------------------------------------------
   Форма нарочно простая: слева — что это за деньги словами,
   справа — сумма в рублях. Коэффициентов подрядчику не
   показываем, с ними без объяснения не разобраться.
   ========================================================= */

.price-state {
  padding: 14px 16px;
  border-radius: 12px;
  margin-bottom: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.price-state--wait { background: #fff3cd; color: #6b5200; }
.price-state--ok   { background: #eaf7f1; color: #0e6a4c; }
.price-state--no   { background: #fdecea; color: #a52217; }

/* Города — крупные переключатели, а не мелкие галочки */
.price-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.price-city {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--chuuk-line);
  border-radius: var(--r-pill);
  background: #fff;
  font-size: 14px;
  cursor: pointer;
  user-select: none;
}

.price-city input { margin: 0; cursor: pointer; }
.price-city.is-on { border-color: var(--chuuk-blue); background: var(--chuuk-blue-soft); }
.price-city.is-on span { color: var(--chuuk-blue); font-weight: 600; }

/* ---------- «Одна команда это не поднимет» ----------
   Не отказ, а предложение собрать людей из двух продакшенов.
   Поэтому спокойный синий блок, а не красное предупреждение. */

#capacityNotice[hidden] { display: none; }

.capacity-note {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
  padding: 16px 18px;
  border-radius: 14px;
  background: var(--chuuk-blue-soft, #e8f0fe);
  color: var(--chuuk-ink, #111827);
  font-size: 14px;
  line-height: 1.5;
  box-sizing: border-box;
}

.capacity-note__btn {
  align-self: flex-start;
  border: 0;
  border-radius: 999px;
  padding: 10px 20px;
  background: var(--chuuk-blue, #1b6fe8);
  color: #fff;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}


/* ---------- Цены подрядчика по шагам ----------
   Строк под сорок, и одним списком человек их листает, не понимая,
   где кончается съёмка и начинается монтаж. Точки сверху, «Назад /
   Далее» снизу — как в анкете подрядчика и в кейсе. */

.price-steps__nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.price-steps__dot {
  border: 1px solid var(--chuuk-line, #dbe3ea);
  background: var(--chuuk-surface, #fff);
  color: var(--chuuk-muted, #667085);
  padding: 8px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.price-steps__dot:hover { border-color: var(--chuuk-navy, #03273f); }

.price-steps__dot.is-active {
  background: var(--chuuk-navy, #03273f);
  border-color: var(--chuuk-navy, #03273f);
  color: #fff;
}

/* У .profile-card задан свой display, и браузерное правило для
   [hidden] ему проигрывает — скрытый шаг вылезал бы поверх
   открытого. В проекте это уже было со сметой и с анкетой. */
.price-step[hidden] { display: none; }

.price-steps__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
}

.price-steps__last {
  font-size: 13px;
  color: var(--chuuk-muted, #667085);
}

/* Шапка шага: где человек сейчас и что дальше. Девять шагов без
   этого читаются как бесконечная анкета — а это минут пять,
   и почти всё в них уже заполнено. */
.price-step__top {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.price-step__count { color: var(--chuuk-accent, #ff9800); }

.price-step__next {
  color: var(--chuuk-muted, #667085);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}

/* Две колонки на широком экране: строк в группе бывает десяток,
   и в один столбец шаг растягивается на два экрана. На телефоне
   колонка одна — там иначе не влезет ни поле, ни пояснение. */
.price-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 2px 32px;
  align-items: start;
}

/* Строка: название слева, поле справа, «было» под полем */
.price-row {
  display: grid;
  grid-template-columns: 1fr 150px;
  grid-template-areas: "head input" "min was";
  align-items: center;
  gap: 4px 16px;
  padding: 12px 0;
  border-bottom: 1px solid var(--chuuk-line);
}

.price-row:last-child { border-bottom: none; }

.price-row__head { grid-area: head; }

.price-row__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--chuuk-ink);
}

.price-row__hint {
  font-size: 12px;
  line-height: 1.4;
  color: var(--chuuk-muted);
  margin-top: 2px;
}

.price-row__input {
  grid-area: input;
  position: relative;
}

.price-row__input input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 30px 10px 12px;
  border: 1px solid var(--chuuk-line);
  border-radius: 10px;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  color: var(--chuuk-ink);
  text-align: right;
}

.price-row__input input:focus {
  outline: none;
  border-color: var(--chuuk-blue);
}

.price-row__cur {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--chuuk-muted);
  pointer-events: none;
}

/* Что подрядчик изменил — подсвечиваем и показываем прежнюю сумму */
.price-row__was {
  grid-area: was;
  justify-self: end;
  font-size: 12px;
  color: var(--chuuk-muted);
  min-height: 0;
}

.price-row.is-changed .price-row__input input {
  border-color: var(--chuuk-blue);
  background: var(--chuuk-blue-soft);
}

.price-row.is-changed .price-row__was { color: var(--chuuk-blue); }

/* Строка ниже минимума: цену нельзя опускать ниже средней по рынку */
.price-row.is-low .price-row__input input {
  border-color: #d64541;
  background: #fdecea;
}

.price-row.is-low .price-row__was { color: #a52217; }

/* Под полем слева стоит минимум, справа — прежняя сумма */
.price-row__min {
  grid-area: min;
  justify-self: start;
  font-size: 12px;
  color: var(--chuuk-muted);
}

/* ---------- Съёмка в другом городе: специалист / логистика ----------
   Две колонки цифр на одну профессию. Владелец просил именно такую
   раскладку: видно, что смена на выезде может остаться прежней,
   а меняется только дорога и проживание. */

.price-travel {
  display: grid;
  gap: 2px;
  max-width: 640px;   /* без него профессия и поля разъезжаются по краям */
}

.price-travel__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 160px 160px;
  gap: 8px 16px;
  align-items: start;
  padding: 14px 0;
  border-bottom: 1px solid var(--chuuk-line);
}

/* Название профессии стоит на одной линии с полями, а не по центру
   строки: под полями ещё живёт подпись с минимумом. */
.price-travel__role { padding-top: 10px; }

.price-travel__row:last-child { border-bottom: none; }

.price-travel__row--head {
  padding: 0 0 8px;
  align-items: end;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--chuuk-muted);
}

.price-travel__role {
  font-size: 14px;
  font-weight: 600;
  color: var(--chuuk-ink);
}

.price-travel__cell .price-row__input { position: relative; }
.price-travel__cell .price-row__min { margin-top: 4px; }

.price-travel__cell .price-row__input.is-low input {
  border-color: #d64541;
  background: #fdecea;
}

/* Подпись над полем нужна только там, где шапка таблицы не видна */
.price-travel__cap { display: none; }

/* На телефоне три колонки не встают: профессия строкой, под ней
   два поля рядом — и над каждым своя подпись, потому что шапку
   таблицы там показать негде. */
@media (max-width: 700px) {
  .price-travel__row { grid-template-columns: 1fr 1fr; }
  .price-travel__role { grid-column: 1 / -1; }
  .price-travel__row--head { display: none; }

  .price-travel__cap {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--chuuk-muted);
  }
}

/* Цифры состава и мощности — по две в строку. По одной в столбик
   шаг вытягивался на два экрана, хотя в каждом поле одно число. */
.price-setup__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 4px 28px;
  align-items: start;
}

/* Спокойная подсказка внутри шага, без вида ошибки */
.price-setup__note {
  margin: 4px 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--chuuk-blue-soft);
  border: 1px solid #dbe7f7;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chuuk-ink);
}

/* ---------- Пайплайн съёмочного дня ----------
   Ответы заказчика про площадку и вызывной лист команды.
   Живут в карточке сделки, поэтому оформление то же, что
   у остальных блоков «Статусов». */

.call-sheet__block {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--chuuk-surface-soft, #f4f6f8);
}

.call-sheet__subtitle {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chuuk-muted, #667085);
  margin-bottom: 6px;
}

.call-sheet__text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--chuuk-ink, #111827);
}

/* Окно вызывного листа шире обычного: в строке пять полей */
.call-sheet__box { max-width: 720px; }

.cs-row {
  margin: 10px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 12px;
}

.cs-row__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chuuk-muted, #667085);
  margin-bottom: 10px;
}

.cs-row__drop {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--chuuk-danger, #d32f2f);
  text-transform: none;
  letter-spacing: 0;
  cursor: pointer;
}

.cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 14px;
}

.cs-grid--timing { grid-template-columns: 140px minmax(0, 1fr); }

.cs-field span {
  display: block;
  margin-bottom: 4px;
  font-size: 12px;
  color: var(--chuuk-muted, #667085);
}

.cs-field input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 10px;
  font: inherit;
  font-size: 14px;
}

.cs-field input:focus { outline: none; border-color: var(--chuuk-blue, #1b6fe8); }

@media (max-width: 600px) {
  .cs-grid--timing { grid-template-columns: 1fr; }
}

/* Три плитки-объяснения над формой цен */
.price-notice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

.price-notice__card {
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--chuuk-blue-soft);
  border: 1px solid #dbe7f7;
}

.price-notice__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--chuuk-blue);
  margin-bottom: 5px;
}

.price-notice__text {
  font-size: 13px;
  line-height: 1.45;
  color: var(--chuuk-ink);
}

/* Форма работы: те же крупные переключатели, что и города */
.price-legal {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Сколько остаётся на руки */
.price-net {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 6px;
}

.price-net__cell {
  flex: 1 1 150px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f7f9fc;
  border: 1px solid var(--chuuk-line);
}

.price-net__cell--out { background: #fdf3e2; border-color: #f0dcb8; }
.price-net__cell--net { background: #eaf7f1; border-color: #cbe9db; }

.price-net__label {
  font-size: 12px;
  color: var(--chuuk-muted);
  margin-bottom: 4px;
}

.price-net__value {
  font-size: 19px;
  font-weight: 800;
  color: var(--chuuk-ink);
}

/* Сумму сделки можно вписать свою — поле выглядит как остальные цифры */
.price-net__input {
  display: flex;
  align-items: center;
  gap: 4px;
}

.price-net__input input {
  width: 100%;
  min-width: 0;
  padding: 2px 6px;
  border: 1px solid var(--chuuk-line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 19px;
  font-weight: 800;
  color: var(--chuuk-ink);
}

.price-net__input input:focus {
  outline: none;
  border-color: var(--chuuk-blue);
}

.price-net__input span {
  font-size: 17px;
  font-weight: 700;
  color: var(--chuuk-muted);
}

/* Ссылка-кнопка внутри пояснения */
.profile-link-btn {
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--chuuk-blue);
  text-decoration: underline;
  cursor: pointer;
}

.price-net__cell--net .price-net__value { color: #0e6a4c; }

/* Подпись под расчётом: сумма — нижняя граница, а не потолок.
   Важно, чтобы подрядчик не решил, что это всё, на что он может
   рассчитывать, и не ушёл с витрины. */
.price-net__note {
  margin: 6px 0 10px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f2f8f5;
  border: 1px solid #cfe7dc;
  font-size: 13.5px;
  line-height: 1.5;
  color: #14503c;
}

@media (max-width: 640px) {
  .price-row {
    grid-template-columns: 1fr;
    grid-template-areas: "head" "input" "min" "was";
  }

  .price-row__was { justify-self: start; }
}


/* Подписи в окнах игры — тем же шрифтом, что надписи на холсте:
   он рисуется как «bold 9px monospace». Разнобой шрифтов внутри
   одного окна сразу бросается в глаза.

   Блок стоит в конце игровых стилей намеренно: выше у этих же
   классов задан var(--font-text), и при равном весе побеждает
   тот, кто ниже. */
.chuuk-game__records-link,
.chuuk-game__record-row,
.chuuk-game__timer,
.chuuk-game__time,
.chuuk-game__best,
.chuuk-game__check,
.chuuk-game__brief-step,
.chuuk-game__brief-goal,
.chuuk-game__brief-avoid,
.chuuk-game__over-text {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-transform: uppercase;
  letter-spacing: .04em;
}


/* =========================================================
   НИЖНЯЯ ПАНЕЛЬ НА ТЕЛЕФОНЕ
   ---------------------------------------------------------
   Пять кнопок, приклеенных к низу экрана, как в приложении.
   Разметку собирает js/tabbar.js.

   Только до 768: на компьютере всё это есть в шапке, и вторая
   навигация там только мешала бы.
   ========================================================= */

.chuuk-tabbar { display: none; }

@media (max-width: 768px) {
  .chuuk-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99990;

    /* Панель приподнимается над адресной строкой браузера — это
       делает js/tabbar.js. Догнать браузер точно нельзя: строку
       он двигает сам, своей анимацией, а нам сообщает об этом
       с опозданием в кадр-другой. При быстром смахивании вверх
       между панелью и строкой на миг появлялась щель, сквозь
       которую видно страницу.

       Поэтому щель нечем показать: ниже панели лежит её же
       продолжение того же цвета (::after). Панель отстала —
       человек видит всё ту же тёмную полосу, а не дырку. */
    isolation: isolate;

    /* Короткое сглаживание: браузер сообщает о новой высоте окна
       рывком, уже после своей анимации. Без него панель дёргалась
       на месте, с ним — доезжает. Дольше делать нельзя: чем длиннее
       переход, тем заметнее отставание. */
    transition: transform .12s ease-out;

    display: flex;
    justify-content: space-around;
    align-items: stretch;
    gap: 2px;

    padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    background: var(--chuuk-navy, #03273f);
    box-shadow: 0 -8px 24px rgba(3, 39, 63, .18);
  }

  .chuuk-tabbar__item {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;

    padding: 7px 2px 5px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: rgba(255, 255, 255, .55);
    font: inherit;
    font-size: 11px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;

    -webkit-tap-highlight-color: transparent;
  }

  .chuuk-tabbar__item.is-active { color: #fff; }
  .chuuk-tabbar__item:active { background: rgba(255, 255, 255, .08); }

  .chuuk-tabbar__icon {
    position: relative;
    width: 24px;
    height: 24px;
    display: block;
  }

  .chuuk-tabbar__icon svg { width: 100%; height: 100%; display: block; }

  /* Кружок «есть новое» — тот же язык, что у кружков в шапке */
  .chuuk-tabbar__dot {
    position: absolute;
    top: -2px;
    right: -3px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3a6ff7;
    box-shadow: 0 0 0 2px var(--chuuk-navy, #03273f);
  }

  .chuuk-tabbar__label {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Продолжение панели вниз — то самое, что закрывает щель,
     когда панель на кадр отстала от адресной строки браузера.
     Уходит за нижний край экрана, поэтому ничего не загораживает. */
  .chuuk-tabbar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 160px;
    background: var(--chuuk-navy, #03273f);
    pointer-events: none;
  }

  /* Страница не должна заканчиваться под панелью */
  body.chuuk-has-tabbar { padding-bottom: 68px; }

  /* Плавающая кнопка «Чаты» на телефоне не нужна: поддержка
     теперь в панели, а вдвоём они спорят за один угол */
  body.chuuk-has-tabbar .cw { display: none; }

  /* ...но сам чат открываться обязан. Раньше скрыта была вся
     обёртка, и кнопка «Поддержка» в панели ничего не показывала:
     окно появлялось внутри скрытого блока. Теперь чат разворачивается
     во весь экран — как отдельная страница, из которой выходят
     крестиком. Класс ставит js/chat-widget.js. */
  body.chuuk-has-tabbar .cw.cw--open {
    display: flex;
    inset: 0;
    right: 0;
    bottom: 0;
    z-index: 100000;
    align-items: stretch;
    gap: 0;
  }

  /* Пузырь внутри развёрнутого окна не нужен */
  body.chuuk-has-tabbar .cw.cw--open .cw__fab { display: none; }

  body.chuuk-has-tabbar .cw.cw--open .cw__panel {
    width: 100%;
    max-width: none;
    height: 100%;
    max-height: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    transform: none;
    /* Окно ввода браузера и «чёлка» не должны съедать поле ответа */
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  /* Перетаскивать окно во весь экран незачем — остаётся крестик */
  body.chuuk-has-tabbar .cw.cw--open #cwFull { display: none; }

  /* Подвал и плашка про куки поднимаются над панелью */
  body.chuuk-has-tabbar .cookie-bar { bottom: 76px; }

  /* Ссылки подвала, которые повторяют нижнюю панель: «Поддержка»
     и «На главную». На компьютере панели нет — там они остаются */
  body.chuuk-has-tabbar .site-footer__link--dup { display: none; }

  /* В шапке остаётся только имя. «Профиль» и «Панель» стоят внизу,
     и вторые такие же кнопки наверху занимали место у логотипа.
     У кнопки админки inline-стиль display, поэтому !important. */
  body.chuuk-has-tabbar #adminPanelBtn { display: none !important; }
  body.chuuk-has-tabbar .profile-menu-wrap { display: none; }

  /* Имя не должно ломать строку с логотипом */
  body.chuuk-has-tabbar .auth-status {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}


/* ===== ИГРА: НИЧЕГО НЕ ВЫДЕЛЯЕТСЯ =====
   Кнопок ▲▼ под окном больше нет — владелец убрал их как лишние,
   играют нажатием прямо по игре, а под окном стоит подпись.

   Пока идёт уровень, страница не выделяется: палец съезжает
   с холста, и браузер подсвечивал синим заголовок карточки
   и текст вокруг. Класс вешает js/pipeline-game.js. */

body.chuuk-game-playing,
body.chuuk-game-playing * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* Касание по игре не должно прокручивать страницу под пальцем */
#pipelineCanvas { touch-action: none; }

/* =========================================================
   КНОПКА «К СМЕТЕ» — ВОЗВРАТ К ОФФЕРУ
   ---------------------------------------------------------
   Только на телефоне. На компьютере оффер стоит липкой колонкой
   и едет вместе со страницей — он всегда в кадре, и кнопка там
   не нужна: владелец её не просил и попросил вернуть как было.

   На телефоне колонки складываются в столбик, оффер уезжает
   наверх, и вот тогда кнопка нужна. Показывает её js/offer-ui.js.
   ========================================================= */

.offer-jump { display: none; }

/* ---------- Плашки над калькулятором (только телефон) ----------
   Разнесены по краям экрана, как поиск и корзина у Самоката:
   слева навигация, справа цена. Слово «К смете» убрано — стрелка
   и сумма говорят сами за себя.

   Плашки полупрозрачные, со размытием и светлым контуром: под ними
   проезжают тёмно-синие кнопки калькулятора, и сплошная синяя
   плашка с ними сливалась. */

/* Плашка с ценой нужна НЕ только на телефоне: на компьютере
   человек так же уходит вниз крутить настройки, и цена должна
   ехать с ним. Владелец: «не работает механика с ценой
   и возвратом наверх». Медиазапрос оставлен, но без границы —
   так правила внутри не пришлось переписывать. */
@media (min-width: 0px) {
  .offer-jump {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 24px;
    z-index: 99980;

    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 0 14px;

    /* Сам ряд ничего не ловит — нажимаются только плашки */
    pointer-events: none;

    opacity: 0;
    transform: translateY(14px);
    transition: opacity .32s ease, transform .32s ease;
  }

  .offer-jump.is-shown {
    opacity: 1;
    transform: translateY(0);
  }

  .offer-jump__left {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
  }

  .offer-jump__pill {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;

    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    /* Почти непрозрачные: на 82% сквозь плашку читался текст
       страницы, и цифра переставала быть цифрой */
    background: rgba(3, 39, 63, .94);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    color: #fff;

    font-family: var(--font-text);
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;

    box-shadow: 0 10px 26px rgba(3, 39, 63, .32);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }

  .offer-jump__pill:active { background: rgba(3, 39, 63, .95); }
  .offer-jump__pill[hidden] { display: none; }

  /* Стрелка — круг, только знак */
  .offer-jump__pill--up {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }

  .offer-jump__arrow { font-size: 19px; line-height: 1; }

  /* Город: название и знак «сменить». Появляется только когда
     городов больше одного. */
  .offer-jump__pill--city {
    height: 46px;
    padding: 0 14px;
    min-width: 0;
    font-size: 13px;
    font-weight: 600;
  }

  .offer-jump__city {
    max-width: 38vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .offer-jump__swap {
    font-size: 15px;
    opacity: .7;
  }

  /* Цена. Не оранжевая: белым по тёмному стеклу она читается
     и не спорит с оранжевым в самом калькуляторе. */
  .offer-jump__pill--price {
    height: 46px;
    padding: 0 18px;
    font-size: 16px;
    font-weight: 800;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
  }

  /* Пока считаем — цифра гаснет, а не подмигивает старым числом */
  .offer-jump__price.is-busy {
    font-size: 13px;
    font-weight: 700;
    opacity: .7;
  }

  /* Над нижней панелью — иначе плашки легли бы на неё */
  body.chuuk-has-tabbar .offer-jump { bottom: 82px; }
}

/* Кто-то просит меньше движения — тогда просто появляемся */
@media (prefers-reduced-motion: reduce) {
  .offer-jump { transition: opacity .2s ease; transform: none; }
  .offer-jump.is-shown { transform: none; }
}

/* ---------- Телефон: маркетплейс, а не поле из плюсов ----------
   Владелец показал Самокат: «нет ничего скопленного в один угол,
   всё правильно разделено». У нас было наоборот — счётчики
   тёмными квадратами по центру, каждый в четверть экрана, и экран
   читался как набор кнопок «плюс».

   Что делаем: подпись слева, компактный счётчик справа одной
   пилюлей; группы — карточки с воздухом между ними; вспомогательные
   строчки становятся тише. Только на телефоне: на компьютере места
   хватает и всё работает как было. */

@media (max-width: 768px) {
  /* Первый экран: город, категория, даты — отдельными полосками,
     а не одним белым прямоугольником в четыре строки. Скругление
     как у кнопок сервиса: так поле читается как поле, по которому
     можно нажать, а не как строчка в таблице. */
  .info-row {
    gap: 10px;
    background: transparent;
    border-radius: 0;
  }

  .info-item,
  .info-item:first-child,
  .info-item:last-child {
    padding: 15px 20px;
    background: #fff;
    /* Углы мягче обычных 16: просьба владельца — «ещё более
       гладкие», как у кнопки и у строки поиска */
    border-radius: 22px;
  }

  /* Разделительная линия между полями больше не нужна: между ними
     теперь зазор */
  .info-item + .info-item { box-shadow: none; }

  /* Список под полем — такая же карточка, как само поле: раньше он
     выезжал прямоугольником без углов и наезжал на соседнее поле,
     из-за чего выглядел криво. */
  .info-item .dropdown {
    top: calc(100% + 8px);
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 16px 32px rgba(3, 39, 63, .18);
  }

  .dropdown-option { padding: 14px 20px; font-size: 16px; }

  .info-label { font-size: 13px; }
  .info-value { font-size: 17px; }

  .settings-group {
    margin-bottom: 16px;
    padding: 18px 16px;
    background: #fff;
    border-radius: 18px;
    border: 1px solid var(--chuuk-line, #e9edf1);
  }

  /* Капс на телефоне читается тяжело и занимает больше места:
     заголовки блоков пишем обычными буквами. */
  .settings-title {
    font-size: 17px;
    text-transform: none;
    letter-spacing: -.01em;
    margin-bottom: 14px;
  }

  .chronometry-title,
  .rolls-title {
    text-transform: none;
    font-size: 14px;
  }

  /* Счётчик: подпись и кнопки в одну строку */
  .days-hours-controls { gap: 0; }

  .control-group {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid var(--chuuk-line, #eef1f4);
  }

  .control-group:last-child { border-bottom: 0; }

  .control-title {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    text-transform: none;
    color: var(--chuuk-ink, #111827);
  }

  /* Сама пилюля: светлая, кнопки круглые, число между ними */
  .hours-control,
  .days-control {
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--chuuk-surface-soft, #f2f5f8);
  }

  .control-btn {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #fff;
    color: var(--chuuk-navy, #03273f);
    font-size: 18px;
    box-shadow: 0 1px 2px rgba(3, 39, 63, .12);
  }

  .control-btn:disabled { background: #e8ecf0; color: #aab6c0; box-shadow: none; }

  .control-display {
    min-width: 44px;
    padding: 0 6px;
    font-size: 18px;
    background: transparent;
    border: 0;
  }

  /* Подсказки под счётчиками — шёпотом, а не в полный голос */
  .hint-text { width: 100%; margin: 0; font-size: 12px; color: #98a2b3; }

  /* ---- Один вид у всех переключателей ----
     Владелец: «очень много переключателей, может у них будет один
     дизайн и не будет разницы в размерах». Отметки были 20 пикселей
     и терялись под крупными тумблерами, а текст рядом — мелкий.
     Теперь все отметки одного размера, строка выше, текст крупнее,
     и палец попадает по всей строке, а не по значку. */
  /* Высота строки — 52 пикселя: палец попадает, и пустоты нет.
     box-sizing в проекте не глобальный (решение 19), поэтому
     min-height считается БЕЗ отступов — 30 + 11 + 11. */
  .option-row {
    min-height: 30px;
    margin-bottom: 0;
    padding: 11px 0;
    border-bottom: 1px solid var(--chuuk-line, #eef1f4);
  }

  .option-row:last-child { border-bottom: 0; }

  .option-label {
    font-size: 15px;
    color: var(--chuuk-ink, #111827);
    line-height: 1.35;
  }

  .radio-option,
  .switch-option { padding: 4px; }

  .radio-circle,
  .switch-box {
    width: 26px;
    height: 26px;
    border-width: 2px;
  }

  .switch-box { border-radius: 8px; }

  .radio-circle.selected::after { width: 10px; height: 10px; }

  .switch-box.selected::after { font-size: 15px; }

  /* Пояснения под строками — тем же размером, что и подсказки:
     разнобой в мелком тексте и создаёт ощущение «мелко, чтобы
     всё поместилось». */
  /* Строки «Дополнительной команды» устроены иначе — своей вёрсткой.
     Приводим их к тому же ритму, что и остальные переключатели. */
  .team-member {
    margin-bottom: 0;
    padding-bottom: 11px;
    border-bottom: 1px solid var(--chuuk-line, #eef1f4);
  }

  .team-member + .team-member { padding-top: 11px; }

  .team-member-header { margin-bottom: 0; }

  .team-member-title { font-size: 15px; }

  .team-member .option-hint { margin-top: 6px; }

  /* Те же счётчики поменьше — ролики, интервью, вертикалки, города.
     Раньше это были тёмные квадратики с рамкой вокруг числа: на одном
     экране их набиралось до десятка, и всё сливалось в «поле плюсов». */
  .rolls-control,
  .vt-counter,
  .iv-counter,
  .city-card__counter,
  .people-counter {
    gap: 4px;
    padding: 4px;
    border-radius: 999px;
    background: var(--chuuk-surface-soft, #f2f5f8);
  }

  .counter-btn,
  .people-counter-btn,
  .rolls-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #fff;
    color: var(--chuuk-navy, #03273f);
    font-size: 17px;
    font-weight: 700;
    box-shadow: 0 1px 2px rgba(3, 39, 63, .12);
  }

  .counter-btn:disabled,
  .people-counter-btn:disabled { background: #e8ecf0; color: #aab6c0; box-shadow: none; }

  .counter-display,
  .people-counter-display,
  .rolls-display {
    min-width: 38px;
    padding: 0 4px;
    background: transparent;
    border: 0;
    font-size: 16px;
  }
}

/* ---------- Длинный блок как отдельный экран (телефон) ----------
   Интервью и вертикалки спрашивают многое, и посреди калькулятора
   это превращалось в простыню, которую надо листать. На телефоне
   они раскрываются отдельным экраном: сверху «Назад», внизу свои
   кнопки. На компьютере всё как было — полоса «Назад» там скрыта. */

.iv-sheet-bar { display: none; }

@media (max-width: 768px) {
  .iv-steps.is-sheet,
  .vt-details.is-sheet {
    position: fixed;
    inset: 0;
    z-index: 99990;

    margin: 0;
    padding: 0 16px 28px;
    border-radius: 0;
    border: 0;

    background: var(--chuuk-bg, #f4f6f8);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
  }

  /* Пока открыт экран, страница под ним не едет */
  body.chuuk-sheet-open { overflow: hidden; }

  /* Нижняя панель и плашка с ценой легли бы поверх чужого экрана */
  body.chuuk-sheet-open .chuuk-tabbar,
  body.chuuk-sheet-open .offer-jump,
  body.chuuk-sheet-open .cw { display: none !important; }

  .is-sheet .iv-sheet-bar {
    position: sticky;
    top: 0;
    z-index: 2;

    display: flex;
    align-items: center;
    gap: 12px;

    margin: 0 -16px 12px;
    padding: 12px 16px;

    background: var(--chuuk-bg, #f4f6f8);
    border-bottom: 1px solid var(--chuuk-line, #dbe3ea);
  }

  .iv-sheet-back {
    border: 0;
    background: none;
    padding: 0;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--chuuk-blue, #1b6fe8);
    cursor: pointer;
  }

  .iv-sheet-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--chuuk-ink, #111827);
  }

  /* Кнопки шага держим внизу экрана: рука с ними рядом, и до них
     не нужно долистывать. «Готово» здесь не показываем — выход
     стоит сверху, «Назад», и две одинаковые двери подряд читаются
     как мусор. */
  .is-sheet .iv-actions {
    position: sticky;
    bottom: 0;
    margin: 18px -16px 0;
    padding: 12px 16px;
    background: var(--chuuk-bg, #f4f6f8);
    border-top: 1px solid var(--chuuk-line, #dbe3ea);
  }

  .is-sheet .iv-btn--done { display: none; }
  .is-sheet .iv-btn--link { margin-left: auto; }

  /* Итог под кнопками — он теперь под липким рядом, дадим воздуха */
  .is-sheet .iv-summary { margin-top: 14px; }
}

/* Подпись на месте картинки, которая не загрузилась. Пустой
   прямоугольник читается как «у команды нет работ» — а это
   может быть просто заснувшая база. */
.chuuk-file-missing {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 10px;
  text-align: center;
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #475569;
}

/* =========================================================
   НИЧЕГО НЕ УЕЗЖАЕТ ВБОК
   ---------------------------------------------------------
   Владелец: «почти везде в админ-панели текст заходит вправо,
   приходится его свайпать». Причина одна на все страницы:
   стоит одному блоку оказаться шире экрана — таблице, длинной
   строке, картинке, — и вбок уезжает вся страница целиком,
   вместе с текстом, который в неё помещался.

   Здесь два уровня. Первый — предохранитель на самой странице:
   вбок она не прокручивается никогда. Второй — колонки сеток,
   которым разрешено сжиматься: `1fr` сам по себе меньше своего
   содержимого не становится, для этого нужен minmax(0, 1fr).
   Без второго широкий блок просто обрезался бы.
   ========================================================= */

html,
body {
  max-width: 100%;
  /* `hidden` делает страницу контейнером прокрутки, и внутри неё
     перестаёт работать `position: sticky` — именно так «отклеился»
     оффер, который должен ехать рядом с настройками. `clip` режет
     то же самое, но контейнером прокрутки не становится. Строку
     с `hidden` оставляем первой: браузер, который не знает `clip`,
     возьмёт её. */
  overflow-x: hidden;
  overflow-x: clip;
}

/* Длинные слова и ссылки переносим, а не растягиваем ими страницу */
body {
  overflow-wrap: break-word;
}

/* Картинки не шире своего места */
img,
video,
canvas,
iframe {
  max-width: 100%;
}

/* Колонки, которым можно сжиматься. Именно из-за `1fr` в админке
   текст уходил за правый край: колонка держала ширину самого
   широкого блока внутри — обычно таблицы. */
.admin-layout,
.admin-main,
.profile-layout,
.profile-content,
.bible__layout {
  min-width: 0;
}

@media (max-width: 900px) {
  .admin-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Таблицы прокручиваются внутри своей рамки, а не тянут страницу */
.admin-main table,
.bible table {
  max-width: 100%;
}

.admin-table-wrap,
.bible__table-wrap {
  max-width: 100%;
  overflow-x: auto;
}

/* Поля ввода в чате считали ширину без рамок и вылезали за край */
.cw__panel input,
.cw__panel textarea,
.cw__panel select {
  box-sizing: border-box;
  max-width: 100%;
}

/* ===== ВРЕМЯ СДАЧИ РОЛИКА =====
   Отдельный блок под «Кол-вом роликов»: слева дата (подставляется сама
   из дедлайна), справа часы и минуты. Раньше время сдачи стояло
   маленьким списком в шапке каждого ролика и терялось. */

.delivery-list {
  display: grid;
  gap: 10px;
}

.delivery-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 12px;
  box-sizing: border-box;
}

.delivery-row__left {
  min-width: 0;
}

.delivery-row__roll {
  font-size: 13px;
  font-weight: 700;
  color: var(--chuuk-navy, #03273f);
}

.delivery-row__date {
  margin-top: 2px;
  font-size: 15px;
  color: var(--chuuk-ink, #111827);
}

.delivery-row__date.is-empty {
  color: var(--chuuk-muted-light, #98a2b3);
}

.delivery-row__tag {
  display: inline-block;
  margin-top: 6px;
  padding: 2px 8px;
  border-radius: var(--r-pill, 999px);
  background: var(--chuuk-blue-soft, #e8f0fe);
  color: var(--chuuk-blue, #1b6fe8);
  font-size: 11px;
  font-weight: 700;
}

.delivery-row__right {
  display: flex;
  align-items: center;
  gap: 4px;
}

.delivery-row__colon {
  color: var(--chuuk-muted, #667085);
}

/* Подпись про минимум идёт во всю ширину карточки, под обеими колонками */
.delivery-row__note {
  grid-column: 1 / -1;
  font-size: 12px;
  color: var(--chuuk-muted, #667085);
  line-height: 1.4;
}

.delivery-suggest {
  margin-top: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--chuuk-blue-soft, #e8f0fe);
  box-sizing: border-box;
}

.delivery-suggest__text {
  font-size: 14px;
  color: var(--chuuk-navy, #03273f);
  line-height: 1.4;
}

.delivery-suggest__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.delivery-suggest__yes,
.delivery-suggest__no {
  padding: 9px 16px;
  border-radius: var(--r-pill, 999px);
  border: 1px solid transparent;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.delivery-suggest__yes {
  background: var(--chuuk-navy, #03273f);
  color: #fff;
}

.delivery-suggest__no {
  background: transparent;
  border-color: var(--chuuk-line, #dbe3ea);
  color: var(--chuuk-muted, #667085);
}

/* На телефоне время уезжает под дату: в строку они не помещаются */
@media (max-width: 520px) {
  .delivery-row {
    grid-template-columns: minmax(0, 1fr);
  }

  .delivery-row__right {
    justify-content: flex-start;
  }
}

/* Подсказка под опцией: те же правила, что у подписи к интервью */
.option-hint {
  margin-top: 10px;
  font-size: 12px;
  font-style: italic;
  line-height: 1.4;
  color: var(--chuuk-muted, #666);
}

/* Ступени количества вопросов: 10 / 15 / 30. Счётчик «плюс-минус
   один» здесь не годится — человек должен видеть, что он выбирает
   и сколько это стоит. */
.question-steps-block {
  margin-top: 12px;
}

.question-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.question-step {
  display: grid;
  gap: 2px;
  padding: 12px 14px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--chuuk-ink, #111827);
}

.question-step__count {
  font-size: 15px;
  font-weight: 600;
}

.question-step__price {
  font-size: 13px;
  color: var(--chuuk-muted, #667085);
}

.question-step.is-on {
  border-color: var(--chuuk-navy, #03273f);
  background: var(--chuuk-navy, #03273f);
  color: #fff;
}

.question-step.is-on .question-step__price {
  color: rgba(255, 255, 255, .8);
}

/* ===== ИНТЕРВЬЮ ПО ШАГАМ =====
   Вводных много: спикеры, свой интервьюер, кто снимает, язык, свет.
   Одной страницей это анкета, которую закрывают не дочитав, поэтому
   спрашиваем по одному экрану за раз — как подрядчик выкладывает кейс. */

.iv-steps {
  margin-top: 12px;
}

.iv-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.iv-dots {
  display: flex;
  gap: 6px;
}

.iv-dot {
  width: 26px;
  height: 6px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: var(--chuuk-line, #dbe3ea);
  cursor: pointer;
}

.iv-dot.is-done { background: var(--chuuk-blue, #1b6fe8); opacity: .45; }
.iv-dot.is-now  { background: var(--chuuk-navy, #03273f); }

.iv-step-name {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--chuuk-muted, #667085);
}

.iv-question {
  font-size: 16px;
  font-weight: 600;
  color: var(--chuuk-navy, #03273f);
  margin-bottom: 6px;
  text-wrap: balance;
}

.iv-question--second {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--chuuk-line, #dbe3ea);
}

.iv-note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--chuuk-muted, #667085);
  margin-bottom: 12px;
}

.iv-cards {
  display: grid;
  gap: 10px;
  margin-top: 10px;
}

.iv-cards--pair {
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.iv-card {
  display: grid;
  gap: 4px;
  padding: 14px 16px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 14px;
  background: #fff;
  text-align: left;
  font: inherit;
  cursor: pointer;
  color: var(--chuuk-ink, #111827);
}

.iv-card b {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.3;
}

.iv-card span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--chuuk-muted, #667085);
}

.iv-card__warn { color: #a15c00; }

.iv-card.is-on {
  border-color: var(--chuuk-navy, #03273f);
  box-shadow: inset 0 0 0 1px var(--chuuk-navy, #03273f);
  background: var(--chuuk-blue-soft, #e8f0fe);
}

.iv-card.is-on .iv-card__warn { color: #8a4f00; }

.iv-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--chuuk-blue, #1b6fe8);
  color: #fff;
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  vertical-align: middle;
}

.iv-actions {
  display: flex;
  gap: 8px;
  margin-top: 18px;
}

.iv-btn {
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid transparent;
  font: inherit;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}

.iv-btn--main { background: var(--chuuk-navy, #03273f); color: #fff; }
.iv-btn--ghost {
  background: transparent;
  border-color: var(--chuuk-line, #dbe3ea);
  color: var(--chuuk-muted, #667085);
}

.iv-btn:disabled { opacity: .4; cursor: default; }

.iv-summary {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--chuuk-line, #dbe3ea);
  font-size: 13px;
  line-height: 1.5;
  color: var(--chuuk-muted, #667085);
}

/* У экранов шага свой display, поэтому браузерное [hidden] проигрывает —
   в проекте это уже было со сметой и с анкетой подрядчика */
.iv-pane[hidden] { display: none; }

/* Дата сдачи — выбор, а не подпись: второй ролик обычно сдают
   позже первого, и двигать его надо здесь же */
.delivery-row__date-picker {
  margin-top: 4px;
  max-width: 100%;
  padding: 6px 8px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--chuuk-ink, #111827);
}

/* Язык интервьюера в «Дополнительной команде»: то же поле, что
   на шаге интервью, показанное во втором месте */
.team-lang {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.team-lang__btn {
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  background: #fff;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--chuuk-muted, #667085);
}

.team-lang__btn.is-on {
  background: var(--chuuk-navy, #03273f);
  border-color: var(--chuuk-navy, #03273f);
  color: #fff;
}

/* Камеры в зоне интервью и счётчик смонтированных интервью */
.iv-cameras {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.iv-camera {
  display: grid;
  justify-items: center;
  gap: 2px;
  min-width: 74px;
  padding: 10px 14px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 12px;
  background: #fff;
  font: inherit;
  cursor: pointer;
  color: var(--chuuk-ink, #111827);
}

.iv-camera__count {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.iv-camera__text {
  font-size: 12px;
  color: var(--chuuk-muted, #667085);
}

.iv-camera.is-on {
  background: var(--chuuk-navy, #03273f);
  border-color: var(--chuuk-navy, #03273f);
  color: #fff;
}

.iv-camera.is-on .iv-camera__text { color: rgba(255, 255, 255, .75); }

.iv-counter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.iv-counter__input {
  width: 84px;
  padding: 9px 10px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 10px;
  font: inherit;
  font-size: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.iv-counter__hint {
  font-size: 13px;
  color: var(--chuuk-muted, #667085);
}

/* У блоков шага свой display — браузерное [hidden] проигрывает */
#interviewCamerasBlock[hidden],
#interviewEditBlock[hidden] { display: none; }

/* Развилка перед шагами и свёрнутый итог.
   Пять шагов подряд читаются как анкета, поэтому сначала
   предлагаем готовый набор: одно нажатие вместо пяти экранов. */
.iv-quick {
  margin-top: 12px;
}

.iv-chosen {
  margin-top: 12px;
  padding: 16px 18px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 14px;
  background: #fff;
}

.iv-chosen__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.iv-chosen__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--chuuk-navy, #03273f);
}

.iv-chosen__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chuuk-muted, #667085);
}

.iv-quick[hidden],
.iv-chosen[hidden],
.iv-steps[hidden] { display: none; }

/* «Готово» — выход из шагов. Стоит справа, отдельно от «Назад/Далее»:
   это не шаг вперёд, а выход из настройки. */
.iv-actions { flex-wrap: wrap; }

.iv-btn--done {
  margin-left: auto;
  background: transparent;
  border-color: var(--chuuk-navy, #03273f);
  color: var(--chuuk-navy, #03273f);
}

/* На узком экране три кнопки в ряд не помещаются, и «Готово»
   повисала справа отдельной пилюлей. Пусть занимает свою строку. */
@media (max-width: 520px) {
  .iv-btn--done {
    margin-left: 0;
    width: 100%;
  }
}

/* «Другой набор» — не кнопка-действие, а ссылка: она уводит назад,
   к трём карточкам, и не должна спорить с «Готово». */
.iv-btn--link {
  background: transparent;
  border-color: transparent;
  color: var(--chuuk-muted, #667085);
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-left: 8px;
  padding-right: 8px;
}

.iv-chosen__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

@media (max-width: 520px) {
  /* Своя строка нужна только той ссылке, что стоит под кнопками
     шагов. В свёрнутом виде «Настроить» и «Другой набор» обязаны
     остаться в ряд — иначе строка итога рассыпается в столбик. */
  .iv-actions .iv-btn--link { width: 100%; }

  /* Название набора и кнопки в одну строку не помещаются: карточке
     остаётся 225 точек, а кнопкам нужно 228. Ставим название
     отдельной строкой и ужимаем боковые отступы — тогда «Настроить»
     и «Другой набор» стоят рядом, как задумано. */
  .iv-chosen__head { flex-direction: column; align-items: flex-start; }
  .iv-chosen__actions { width: 100%; }
  .iv-chosen__actions .iv-btn { padding-left: 14px; padding-right: 14px; }
}

/* ===== ВЕРТИКАЛЬНЫЕ РОЛИКИ =====
   Два вида в одном блоке: нарезка из отснятого и съёмка отдельно.
   Их часто берут вместе, поэтому не два тумблера в списке опций,
   а карточки рядом — видно разницу и можно взять оба. */
.vt-block { margin-top: 12px; }

.vt-note {
  font-size: 13px;
  line-height: 1.45;
  color: var(--chuuk-muted, #667085);
  margin-bottom: 12px;
}

.vt-kinds {
  display: grid;
  gap: 10px;
}

.vt-kind {
  padding: 14px 16px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 14px;
  background: #fff;
}

.vt-kind.is-on {
  border-color: var(--chuuk-navy, #03273f);
  background: var(--chuuk-blue-soft, #e8f0fe);
}

.vt-kind__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.vt-kind__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--chuuk-navy, #03273f);
}

.vt-kind__price {
  font-size: 13px;
  color: var(--chuuk-blue, #1b6fe8);
  font-weight: 600;
  margin-top: 2px;
}

.vt-kind__text {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--chuuk-muted, #667085);
}

.vt-kind__warn {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: #a15c00;
}

.vt-counter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  flex-wrap: wrap;
}

.vt-counter__label {
  font-size: 13px;
  color: var(--chuuk-muted, #667085);
  margin-right: 4px;
}

.vt-interview {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--chuuk-blue-soft, #e8f0fe);
}

.vt-interview__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.vt-kind__warn[hidden],
.vt-counter[hidden],
.vt-interview[hidden] { display: none; }

/* Подсказка в карточке вида: успеваем ли снять анонс */
.vt-kind__note {
  margin-top: 8px;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--chuuk-muted, #667085);
}

.vt-kind__note[hidden] { display: none; }


/* ---------- Вертикалки по съёмочным дням ----------
   Показывается, только когда съёмочных дней несколько. Строка на
   день: дата, сколько роликов, когда отдаём. При одном дне блока
   нет вовсе — там по-прежнему один счётчик и одна пара дат. */

.vt-days {
  margin-top: 15px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--chuuk-surface-soft, #f4f6f8);
  box-sizing: border-box;
}

.vt-days[hidden] { display: none; }

.vt-days__head {
  font-size: 13px;
  color: var(--chuuk-muted, #667085);
  margin-bottom: 10px;
}

.vt-days__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.vt-day {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--chuuk-line, #dbe3ea);
}

.vt-day:last-child { border-bottom: 0; padding-bottom: 0; }

.vt-day__date {
  font-size: 15px;
  font-weight: 600;
  color: var(--chuuk-ink, #111827);
}

.vt-day__num {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--chuuk-muted-light, #98a2b3);
}

.vt-day__counter {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Дата сдачи занимает всю ширину под строкой: список длинный,
   в один ряд с счётчиком он не помещается даже на компьютере. */
.vt-day__deliver {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.vt-day__picker {
  flex: 1 1 180px;
  min-width: 0;
  padding: 8px 10px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 10px;
  background: var(--chuuk-surface, #fff);
  font-family: inherit;
  font-size: 14px;
  color: var(--chuuk-ink, #111827);
}

.vt-day__urgent {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--chuuk-accent, #ff9800);
}

.vt-day__empty {
  font-size: 13px;
  color: var(--chuuk-muted-light, #98a2b3);
}

.vt-days__total {
  margin-top: 12px;
  font-size: 13px;
  color: var(--chuuk-muted, #667085);
}


/* Вход в проект по нескольким городам — тумблер под строкой полей.

   Сначала это была надпись со значком маршрута, но так получалась
   копия «сложного маршрута» у Авиасейлс. Тумблер честнее: это
   не ссылка куда-то, а включённый режим. */
.hero-complex {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 12px 0 0;
  border: 0;
  background: none;
  padding: 4px 0;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  color: #b9d2e6;
  cursor: pointer;
}

.hero-complex__track {
  position: relative;
  width: 42px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, .22);
  transition: background .18s ease;
}

.hero-complex__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .18s ease;
}

.hero-complex:hover .hero-complex__track { background: rgba(255, 255, 255, .32); }

.hero-complex.is-on { color: #fff; }
.hero-complex.is-on .hero-complex__track { background: var(--chuuk-blue, #1b6fe8); }
.hero-complex.is-on .hero-complex__knob { transform: translateX(18px); }

@media (prefers-reduced-motion: reduce) {
  .hero-complex__track, .hero-complex__knob { transition: none; }
}

#citiesGroup[hidden] { display: none; }


/* ---------- Съёмка в нескольких городах ----------
   Клиент едет в тур: похожее мероприятие в каждом городе. Проект
   при этом один — ролики и сроки сдачи общие, а у города свои
   съёмочные дни и выезд команды. */

.city-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px;
}

.city-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border-radius: 14px;
  background: var(--chuuk-surface-soft, #f4f6f8);
  box-sizing: border-box;
}

.city-card--first { background: var(--chuuk-blue-soft, #e8f0fe); }

.city-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.city-card__title {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chuuk-muted, #667085);
}

.city-card__remove {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--chuuk-danger, #d32f2f);
  cursor: pointer;
}

.city-card__main {
  font-size: 18px;
  font-weight: 700;
  color: var(--chuuk-ink, #111827);
}

.city-card__select {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 10px;
  background: var(--chuuk-surface, #fff);
  font-family: inherit;
  font-size: 15px;
  color: var(--chuuk-ink, #111827);
}

.city-card__dates { position: relative; }

.city-card__label {
  font-size: 12px;
  color: var(--chuuk-muted, #667085);
  margin-bottom: 4px;
}

.city-card__dates .info-value {
  padding: 10px 12px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  border-radius: 10px;
  background: var(--chuuk-surface, #fff);
  font-size: 15px;
  color: var(--chuuk-ink, #111827);
  cursor: pointer;
}

.city-card__time-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.city-card__end {
  font-size: 12.5px;
  color: var(--chuuk-muted, #667085);
  margin-left: 4px;
}

.city-card__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 14px;
  color: var(--chuuk-ink, #111827);
}

.city-card__counter {
  display: flex;
  align-items: center;
  gap: 8px;
}

.city-card__note {
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--chuuk-muted, #667085);
}

.city-card__note--travel { color: var(--chuuk-accent, #ff9800); font-weight: 600; }

.city-add {
  align-self: start;
  border: 1px dashed var(--chuuk-line, #dbe3ea);
  background: none;
  padding: 14px 18px;
  border-radius: 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--chuuk-blue, #1b6fe8);
  cursor: pointer;
}

.city-add:hover { border-color: var(--chuuk-blue, #1b6fe8); }


/* ---------- Какой город настраиваем ----------
   Рамка под оффером: мягкий контур без заливки, чтобы не спорить
   с карточкой предложения, но было видно боковым зрением. Здесь же
   переключение между городами — чтобы не листать наверх. */

.city-focus {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 2px solid rgba(255, 152, 0, .55);
  border-radius: 16px;
  background: transparent;
  box-sizing: border-box;
}

.city-focus[hidden] { display: none; }

.city-focus__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--chuuk-accent, #ff9800);
}

.city-focus__name {
  margin-top: 2px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}

.city-focus__switch {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.city-focus__btn {
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: #b9d2e6;
  padding: 7px 14px;
  border-radius: 999px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

.city-focus__btn:hover { border-color: rgba(255, 152, 0, .7); color: #fff; }

.city-focus__btn.is-on {
  border-color: var(--chuuk-accent, #ff9800);
  color: var(--chuuk-accent, #ff9800);
}

/* «Настроить этот город» прямо под оффером: раскрывает карточку
   наверху, чтобы не листать туда руками */
.city-focus__edit {
  margin-top: 10px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--chuuk-accent, #ff9800);
  cursor: pointer;
  text-align: left;
}

/* Карточки городов: свёрнутая — вкладка, раскрытая — настройки */
.city-card--folded {
  text-align: left;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  cursor: pointer;
  font-family: inherit;
}

.city-card--folded:hover { border-color: var(--chuuk-accent, #ff9800); }

/* Выбранный, но не раскрытый город. Выбор и раскрытие — разные вещи:
   владелец просил, чтобы второй город не разворачивался каждый раз,
   когда его выбирают. */
.city-card--folded.is-picked {
  border-color: var(--chuuk-accent, #ff9800);
  background: var(--chuuk-blue-soft, #e8f0fe);
}

.city-card__head-btns {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* «Настроить» / «Свернуть» — надпись, а не плашка: рядом уже стоит
   красное «Убрать», и две кнопки подряд читались бы как спор. */
.city-card__edit {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--chuuk-blue, #1b6fe8);
  cursor: pointer;
}

.city-card--open {
  border: 2px solid rgba(255, 152, 0, .55);
}


/* Подзаголовок внутри сметы: «Только в городе …».
   Смета остаётся одной, но видно, что к чему относится. */
.estimate-doc__row--heading {
  border-bottom: 0;
  padding-top: 14px;
}

.estimate-doc__row--heading .estimate-doc__cell--name {
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--chuuk-muted, #667085);
}


/* ---------- Подписи под строками на телефоне ----------
   Лежит в самом конце файла нарочно: правила .option-hint,
   .iv-note и .vt-note объявлены ниже мобильного блока выше,
   и при равном весе побеждает тот, кто ниже. В проекте это
   уже было — с игрой и с календарём. */
@media (max-width: 768px) {
  .option-hint,
  .interview-hint,
  .iv-note,
  .vt-note {
    font-size: 13px;
    line-height: 1.45;
    /* Курсив на телефоне читается тяжелее, а этих подписей много */
    font-style: normal;
  }

  /* Пустая подпись всё равно занимала место, и под строкой висела
     дырка в два десятка пикселей */
  .option-hint:empty,
  .interview-hint:empty,
  .iv-note:empty,
  .vt-note:empty { display: none; }
}


/* ---------- Выбор времени на телефоне ----------
   Системные списки часов и минут выглядели чужими: серые рамки
   со стрелками iOS посреди нашей вёрстки. Теперь поле — наша
   плашка, а по нажатию снизу выезжает лист с двумя столбиками
   и кнопкой «Готово». Лежит в конце файла: правила .time-picker
   объявлены в styles.css, и перебить их надо наверняка. */

@media (max-width: 768px) {
  select.time-picker {
    -webkit-appearance: none;
    appearance: none;
    min-width: 68px;
    padding: 11px 14px;
    border: 1px solid var(--chuuk-line, #dbe3ea);
    border-radius: 14px;
    background: #fff;
    font-family: var(--font-text);
    font-size: 17px;
    font-weight: 700;
    color: var(--chuuk-ink, #111827);
    text-align: center;
  }

  .time-sheet {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: flex-end;
    background: rgba(3, 39, 63, .45);
  }

  .time-sheet__box {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: #fff;
    border-radius: 24px 24px 0 0;
    animation: chuukTimeSheetUp .22s ease;
  }

  @keyframes chuukTimeSheetUp {
    from { transform: translateY(18px); opacity: .6; }
    to   { transform: translateY(0);    opacity: 1; }
  }

  .time-sheet__grip {
    width: 44px;
    height: 4px;
    margin: 0 auto 12px;
    border-radius: 999px;
    background: #dbe3ea;
  }

  .time-sheet__title {
    margin-bottom: 10px;
    text-align: center;
    font-family: var(--font-text);
    font-size: 15px;
    font-weight: 800;
    color: var(--chuuk-ink, #111827);
  }

  .time-sheet__cols {
    display: flex;
    gap: 10px;
  }

  .time-sheet__col {
    flex: 1;
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 2px;
  }

  .time-sheet__item {
    display: block;
    width: 100%;
    padding: 13px 0;
    margin-bottom: 4px;
    border: 0;
    border-radius: 14px;
    background: var(--chuuk-surface-soft, #f2f5f8);
    font-family: var(--font-text);
    font-size: 18px;
    font-weight: 700;
    color: var(--chuuk-ink, #111827);
    cursor: pointer;
    font-variant-numeric: tabular-nums;
  }

  .time-sheet__item.is-on {
    background: var(--chuuk-navy, #03273f);
    color: #fff;
  }

  /* Города и категории: список в одну колонку, строки во всю ширину */
  .time-sheet__list {
    max-height: 46vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    padding: 2px;
  }

  .time-sheet__item--wide {
    padding: 15px 18px;
    text-align: left;
    font-size: 17px;
  }

  .time-sheet__done {
    width: 100%;
    margin-top: 14px;
    padding: 15px 0;
    border: 0;
    border-radius: 16px;
    background: var(--chuuk-navy, #03273f);
    color: #fff;
    font-family: var(--font-text);
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
  }
}

/* На компьютере лист не нужен вовсе */
@media (min-width: 769px) {
  .time-sheet { display: none; }
}


/* =========================================================
   «КАК РАБОТАЕТ СЕРВИС» — ОКНО ВМЕСТО БЛОКОВ НА ГЛАВНОЙ
   ---------------------------------------------------------
   Первый экран должен спрашивать цену, а не объяснять
   устройство сервиса. Поэтому игра, «три шага» и пайплайн
   уехали сюда, под кнопку в шапке.

   Правила лежат в конце файла намеренно: у .chuuk-landing
   выше задан свой display, и при равном весе побеждает тот,
   кто ниже (та же история, что с игрой и календарём).
   ========================================================= */

.how-btn {
  border: 1px solid rgba(255, 255, 255, .28);
  background: transparent;
  color: rgba(255, 255, 255, .88);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 500;
  padding: 9px 16px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;
  margin-right: 10px;
  transition: background .15s, border-color .15s;
}

.how-btn:hover {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .5);
}

/* Окно светлое, а не тёмное поверх тёмного: так в нём читается
   текст, и оно перестаёт выглядеть перегруженным. */
.how-overlay {
  position: fixed;
  inset: 0;
  z-index: 1400;
  background: var(--chuuk-bg, #eceef0);
  overflow-y: auto;
  padding: 24px 16px 48px;
  display: block;
}

/* Своего display у оверлея нет без этой строки: атрибут hidden
   проигрывает классу — в проекте это уже было со сметой и анкетой */
.how-overlay[hidden] { display: none; }

.how-sheet {
  max-width: 1100px;
  margin: 0 auto;
}

.how-sheet__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.how-sheet__title {
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--chuuk-ink);
  margin: 0;
}

.how-sheet__x {
  width: 38px;
  height: 38px;
  flex: none;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, .08);
  color: var(--chuuk-ink);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}

.how-sheet__x:hover { background: rgba(17, 24, 39, .16); }

/* Цифры шагов — без кружков: синяя цифра на голубом кружке
   не читалась, а сами кружки добавляли окну лишнего шума.
   Просьба владельца: «такие окна перегружены». */
.how-overlay .chuuk-steps__num {
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--chuuk-muted-light);
  font-size: 15px;
  font-weight: 600;
  min-width: 16px;
}

/* Внутри окна карточки идут в столбик: объединённый алгоритм
   первым, игра следом — так просил владелец. Порядок в разметке
   обратный (игра размечена первой), поэтому разводим их order. */
.how-overlay .chuuk-landing {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  max-width: none;
}

.how-overlay .chuuk-landing__card { order: 1; }
.how-overlay .chuuk-landing__card--game { order: 2; }

/* Подзаголовок внутри объединённого окна: пайплайн теперь
   продолжение «трёх шагов», а не отдельная карточка */
.chuuk-landing__head--sub {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid var(--chuuk-line);
}

@media (max-width: 768px) {
  .how-btn {
    font-size: 13px;
    padding: 8px 13px;
    margin-right: 8px;
  }

  .how-sheet__title { font-size: 21px; }
  .how-overlay { padding: 16px 12px 40px; }
}

/* На узком экране надпись целиком выталкивала логотип и «Профиль»
   за край. Оставляем знак вопроса: путь к объяснению сохраняется,
   а место занимает кружок в 34 точки. */
@media (max-width: 560px) {
  .how-btn {
    width: 34px;
    height: 34px;
    padding: 0;
    font-size: 0;
    flex: none;
    display: inline-grid;
    place-items: center;
  }

  .how-btn::before {
    content: "?";
    font-size: 16px;
    font-weight: 600;
    line-height: 1;
  }
}


/* =========================================================
   КАРТОЧКА ПРЕДЛОЖЕНИЯ: МЕХАНИКА, СЛОЖНОСТЬ, БЕЙДЖ
   ---------------------------------------------------------
   Карточка должна читаться целиком: что снимаем, когда сдаём,
   сколько длится смена, насколько тяжёлый проект и сколько стоит.
   Раньше половина этого стояла общим блоком над списком.
   ========================================================= */

.offer-producer-card { position: relative; }

/* Бейдж висит над верхней границей карточки, поэтому ленте нужен
   запас сверху — иначе его срезает край прокрутки */
.offer-card-best {
  position: absolute;
  top: -9px;
  left: 16px;
  z-index: 2;
  background: var(--chuuk-accent);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .01em;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
}

.offer-card-best[hidden] { display: none; }

/* ─── механика смены ─── */

.offer-card-mech {
  background: var(--chuuk-surface-soft, #f4f6f8);
  border-radius: 16px;
  padding: 12px 14px;
  margin: 12px 0 10px;
}

.ocm__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ocm__label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--chuuk-muted);
}

.ocm__date {
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -.02em;
  color: var(--chuuk-ink);
  font-variant-numeric: tabular-nums;
}

.ocm__arrow {
  color: var(--chuuk-muted);
  font-size: 16px;
  flex: none;
}

.ocm__time {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 11px;
}

.ocm__hour {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--chuuk-ink);
  font-variant-numeric: tabular-nums;
}

.ocm__line {
  flex: 1;
  height: 2px;
  min-width: 14px;
  background: var(--chuuk-ink);
  position: relative;
}

/* Стрелка только у правого отрезка — он упирается в конец смены */
.ocm__line:last-of-type::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -3px;
  border-left: 7px solid var(--chuuk-ink);
  border-top: 4px solid transparent;
  border-bottom: 4px solid transparent;
}

.ocm__dur {
  font-size: 11px;
  font-weight: 700;
  color: var(--chuuk-ink);
  white-space: nowrap;
}

/* ─── сложность: три кружка вместо молний ─── */

.offer-card-hard {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}

.och__dots { display: flex; gap: 3px; }

.och__dots i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #dfe4ea;
  display: block;
}

.och__dots--lvl1 i:nth-child(-n+1) { background: var(--chuuk-success); }
.och__dots--lvl2 i:nth-child(-n+2) { background: #e0a106; }
.och__dots--lvl3 i:nth-child(-n+3) { background: var(--chuuk-danger); }

.och__text {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--chuuk-muted);
}

/* Механика переехала внутрь карточки предложения, поэтому
   в сводке над списком она больше не нужна — это был бы один
   и тот же рассказ дважды на одном экране.

   Блок не удалён, а скрыт: по его id калькулятор пишет даты
   и часы, а chuukFillOfferCards читает их оттуда в карточки.
   Заодно уходит пустая зелёная плашка со значком молнии —
   она жила внутри строки маршрута. */
.offer-panel--summary .offer-ticket__route,
.offer-panel--summary .offer-ticket__timeline {
  display: none;
}

/* Тело карточки было строкой: логотип | цена. Когда внутрь
   добавились механика смены и сложность, они встали в ту же
   строку и вытолкнули цену с кнопкой за правый край.

   Теперь это столбик, как в макете: бренд → механика →
   сложность → цена с кнопкой. */
.offer-producer-card .offer-card-body {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
}

/* Цена и «Подробнее» — по краям одной строки, а не столбиком */
.offer-producer-card .offer-card-money {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex: none;
}

/* Логотип с названием — своей строкой сверху */
.offer-producer-card .offer-brand-block {
  margin-bottom: 2px;
}


/* =========================================================
   ЛЕНТА ПРЕДЛОЖЕНИЙ ВМЕСТО СЛАЙДЕРА ПО ОДНОЙ КАРТОЧКЕ
   ---------------------------------------------------------
   Было: видна одна карточка, соседняя — узкой полоской в 104
   точки, остальные спрятаны display:none. Владелец попросил
   как у Авиасейлс: несколько предложений сразу, третье
   выглядывает, листается стрелками.

   Правила в конце файла намеренно: выше у этих же классов
   заданы свои display и width, и при равном весе побеждает
   тот, кто ниже.
   ========================================================= */

.offer-panel__cards {
  display: grid;
  grid-auto-flow: column;
  /* Полторы карточки в колонке оффера: вторая выглядывает
     и показывает, что лента листается */
  grid-auto-columns: 88%;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* scroll-behavior: smooth здесь НЕ ставим: с ним программная
     установка scrollLeft просто не применяется — проверено,
     значение откатывается обратно. Плавность задаём в самом
     клике через scrollBy({behavior:'smooth'}). */
  /* Запас сверху — иначе лента срезает бейдж «Самая выгодная»,
     он висит над верхней границей карточки */
  padding: 10px 2px 8px;
  margin: -10px -2px -8px;
  scrollbar-width: none;
}

.offer-panel__cards::-webkit-scrollbar { display: none; }

/* Все карточки видны: прятать соседние больше не нужно */
.offer-panel__cards .offer-producer-card:not(.offer-producer-card--active):not(.offer-producer-card--next) {
  display: block;
}

.offer-panel__cards .offer-producer-card,
.offer-panel__cards .offer-producer-card--active,
.offer-panel__cards .offer-producer-card--next {
  width: auto;
  flex: none;
  opacity: 1;
  pointer-events: auto;
  transform: none;
  scroll-snap-align: start;
}

/* Соседняя карточка больше не «корешок» в 104 точки */
.offer-panel__cards .offer-producer-card--next .offer-card-cloud {
  align-self: auto;
  padding: 5px 10px;
  font-size: 10px;
  min-height: 0;
}

/* Стрелки крупнее и ближе к краю — их теперь видно всегда,
   когда карточек больше одной */
.offer-panel__side-btn {
  width: 36px;
  height: 36px;
  z-index: 4;
}

.offer-panel__side-btn[disabled] {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  /* На телефоне листают пальцем — стрелки только занимают место */
  .offer-panel__side-btn { display: none !important; }
  .offer-panel__cards { grid-auto-columns: 92%; }
}

/* Шапка ленты предложений: название и правило сортировки */
.offer-panel__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.offer-panel__head .offer-panel__title {
  margin: 0;
  text-transform: none;
  letter-spacing: -.02em;
}

.offer-panel__rule {
  font-family: var(--font-text);
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .6);
}

@media (max-width: 768px) {
  .offer-panel__rule { font-size: 11.5px; }
}


/* =========================================================
   ГОТОВЫЕ ПАКЕТЫ И «РАСШИРЕННЫЕ НАСТРОЙКИ»
   ---------------------------------------------------------
   Три набора сверху, всё остальное — под кнопкой. Человек
   пришёл за роликом, а не за настройкой тридцати полей.
   ========================================================= */

.packs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.pack {
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  padding: 16px 16px 14px;
  background: #fff;
  border: 1.5px solid var(--chuuk-line, #dbe3ea);
  border-radius: 20px;
  cursor: pointer;
  font-family: var(--font-text);
  transition: border-color .15s, box-shadow .15s, transform .15s;
}

.pack:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(3, 39, 63, .1);
}

.pack.is-on {
  border-color: var(--chuuk-blue);
  box-shadow: 0 0 0 3px rgba(27, 111, 232, .12);
}

.pack__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.pack__name {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -.015em;
  color: var(--chuuk-ink);
}

.pack__dot {
  width: 19px;
  height: 19px;
  flex: none;
  border-radius: 50%;
  border: 2px solid var(--chuuk-line, #dbe3ea);
  display: grid;
  place-items: center;
}

.pack.is-on .pack__dot {
  border-color: var(--chuuk-blue);
  background: var(--chuuk-blue);
}

.pack.is-on .pack__dot::after {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #fff;
}

.pack__list { display: grid; gap: 3px; }

.pack__li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--chuuk-muted);
  padding-left: 13px;
  position: relative;
}

.pack__li::before {
  content: "·";
  position: absolute;
  left: 3px;
  color: var(--chuuk-muted-light);
}

.pack__note {
  margin-top: auto;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--chuuk-muted-light);
}

/* ─── полоса «Расширенные настройки» ─── */

.packs-adv {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 16px;
  background: #fff;
  border-radius: 20px;
  border: 1px solid var(--chuuk-line, #dbe3ea);
  margin-bottom: 16px;
}

.packs-adv__text { flex: 1 1 15rem; min-width: 0; }

.packs-adv__text b {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--chuuk-ink);
  margin-bottom: 2px;
}

.packs-adv__text span {
  font-size: 13px;
  line-height: 1.45;
  color: var(--chuuk-muted);
}

.packs-adv__btn {
  flex: none;
  border: 1.5px solid var(--chuuk-navy);
  background: transparent;
  color: var(--chuuk-navy);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 650;
  padding: 11px 18px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}

.packs-adv__btn:hover {
  background: var(--chuuk-navy);
  color: #fff;
}

/* Своего display у блока нет без этой строки: атрибут hidden
   проигрывает классу — в проекте это уже было со сметой и анкетой */
.adv-settings[hidden] { display: none; }

@media (max-width: 768px) {
  .packs { grid-template-columns: 1fr; }
  .packs-adv { flex-direction: column; align-items: stretch; }
  .packs-adv__btn { width: 100%; }
}


/* =========================================================
   ПЕРВЫЙ ЭКРАН ПО УТВЕРЖДЁННОМУ МАКЕТУ
   ---------------------------------------------------------
   Три вещи, которых не хватало, и владелец их назвал:

   1. Оффер стоял колонкой в 420 точек справа. В макете он
      горизонтальной лентой ПОД поиском, во всю ширину, и уже
      под ним — пакеты. «Загнать в такую же рамку, как
      у Авиасейлс».
   2. Страница разрывалась надвое: синий верх и светло-серый
      низ. В макете фон один на всё — «открывается на той же
      странице, один фон».
   3. Пакеты были белыми карточками (они рисовались для серого
      фона). На синем им полагается стекло, как в макете.

   Правила в конце файла намеренно: выше у тех же классов
   заданы свои ширина и фон, и при равном весе побеждает
   тот, кто ниже.
   ========================================================= */

/* ─── одна колонка вместо двух ─── */

.chuuk-content {
  flex-direction: column;
  gap: 18px;
}

.chuuk-price-card {
  flex: none;
  width: 100%;
  max-width: none;
  /* Прилипать больше не к чему: оффер и так стоит первым.
     Со sticky он бы ехал поверх настроек. */
  position: static;
  order: -1;
}

.chuuk-settings {
  width: 100%;
  min-width: 0;
}

/* ─── общий фон ─── */

/* Фон красим у СТРАНИЦЫ, а не у .chuuk-calculator: та — колонка
   в 1200 точек по центру, и синий выходил заплаткой посреди
   серого поля. Класс page-home стоит только на index.html,
   у сметы и кейса фон остаётся светлым. */
body.page-home {
  background: var(--chuuk-navy);
}

.chuuk-calculator {
  background: transparent;
  padding-bottom: 48px;
}

.settings-section {
  background: transparent;
}

/* Полоса «Вы уже начинали смету» и название проекта стоят
   на том же синем — им нужен светлый текст */
.chuuk-calculator .section-label,
.chuuk-calculator .project-name-label {
  color: rgba(255, 255, 255, .62);
}

/* ─── лента на всю ширину: две карточки и край третьей ─── */

@media (min-width: 900px) {
  .offer-panel__cards {
    grid-auto-columns: calc((100% - 20px) / 2.35);
  }
}

/* ─── пакеты: стекло на синем, как в макете ─── */

.chuuk-settings .pack {
  background: rgba(255, 255, 255, .07);
  border-color: transparent;
}

.chuuk-settings .pack:hover {
  background: rgba(255, 255, 255, .12);
  box-shadow: none;
}

.chuuk-settings .pack.is-on {
  background: rgba(255, 255, 255, .14);
  border-color: var(--chuuk-blue);
  box-shadow: none;
}

.chuuk-settings .pack__name { color: #fff; }
.chuuk-settings .pack__li { color: rgba(255, 255, 255, .72); }
.chuuk-settings .pack__li::before { color: rgba(255, 255, 255, .45); }
.chuuk-settings .pack__note { color: rgba(255, 255, 255, .52); }
.chuuk-settings .pack__dot { border-color: rgba(255, 255, 255, .3); }

.chuuk-settings .packs-adv {
  background: rgba(255, 255, 255, .07);
  border-color: transparent;
}

.chuuk-settings .packs-adv__text b { color: #fff; }
.chuuk-settings .packs-adv__text span { color: rgba(255, 255, 255, .66); }

.chuuk-settings .packs-adv__btn {
  border-color: rgba(255, 255, 255, .35);
  color: #fff;
}

.chuuk-settings .packs-adv__btn:hover {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .6);
  color: #fff;
}

/* ─── раскрытые настройки остаются светлыми карточками ─── */

/* Перекрашивать весь калькулятор в тёмный нельзя: там календари,
   списки и десятки полей, которые на синем станут нечитаемыми.
   Белые карточки на синем фоне — это и есть раскладка Авиасейлс. */
.adv-settings .settings-group {
  background: #fff;
  border-radius: 20px;
  border: none;
}

/* ─── «Посчитать смету» → «ЧУУК» рыжим при наведении ─── */

.quick-start-btn {
  position: relative;
}

.quick-start-btn__text,
.quick-start-btn__chuuk {
  transition: opacity .16s ease, transform .16s ease;
}

.quick-start-btn__chuuk {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 20px;
  letter-spacing: .04em;
  color: #fff;
  opacity: 0;
  transform: translateY(4px);
}

/* Только для мыши: на сенсорном экране наведение залипает после
   нажатия, и кнопка осталась бы с чужим словом */
@media (hover: hover) {
  .quick-start-btn:hover,
  .quick-start-btn.active:hover {
    background: var(--chuuk-accent);
    box-shadow: 0 8px 26px rgba(255, 152, 0, .42);
  }

  .quick-start-btn:hover .quick-start-btn__text {
    opacity: 0;
    transform: translateY(-4px);
  }

  .quick-start-btn:hover .quick-start-btn__chuuk {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ─── лента стоит прямо на фоне, без лишних панелей ─── */

/* Сводка состава и подсказка «что дальше» в макете отсутствуют:
   состав теперь тегами внутри карточки, а подсказка повторяла
   то, что и так написано на кнопке «Подробнее». Сводку не
   удаляем — по её id калькулятор пишет даты, часы и состав,
   а chuukFillOfferCards читает их оттуда в карточки. */
.offer-panel--summary,
.offer-panel--pricing .offer-steps {
  display: none;
}

/* Синяя подложка вокруг ленты больше не нужна: фон и так синий */
.chuuk-price-card .offer-stack,
.offer-panel--pricing {
  background: transparent;
  padding: 0;
  border: none;
  box-shadow: none;
}

/* Теги состава внутри карточки */
.offer-card-tagline {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin: 10px 0 2px;
}

.oct__tag {
  font-size: 11.5px;
  font-weight: 620;
  color: #3a4553;
  background: #f1f4f8;
  border-radius: 999px;
  padding: 4px 10px;
  white-space: nowrap;
}

/* Скидка — стеклом на синем, а не белой полосой */
.chuuk-price-card .auth-discount-toggle {
  background: rgba(255, 255, 255, .07);
  border-radius: 20px;
  border: none;
  margin-top: 14px;
}

.chuuk-price-card .auth-discount-toggle,
.chuuk-price-card .auth-discount-toggle * {
  color: #fff;
}

/* ─── одна команда в выдаче ─── */

/* Карточка остаётся ТОЙ ЖЕ формы, что в утверждённом макете:
   вертикальной, слева, шириной в одну позицию ленты. Растянутая
   во всю ширину она теряет форму и непонятно, где что — владелец
   забраковал. Пустое поле справа честнее: там встанут следующие
   команды, когда они появятся. */
@media (min-width: 900px) {
  .offer-panel__cards.is-single {
    grid-auto-columns: calc((100% - 20px) / 2.35);
    justify-content: start;
  }
}




/* Смайлик огня у заголовка «Предложения» убран: владелец назвал
   его колхозным, и в утверждённом макете его нет. */
.offer-panel__title::after { content: none; }

/* =========================================================
   ОКНО «УПС» — В СТИЛЕ ПЛАШКИ ПРО КУКИ
   ---------------------------------------------------------
   Владелец попросил «аккуратное небольшое со скруглёнными
   краями, примерно как куки», а не модальное окно во весь
   экран. Поэтому берём ту же светлую карточку: радиус 16,
   мягкая тень, ширина по содержимому.
   ========================================================= */

.chuuk-oops {
  /* Затемнение мягче, чем у окон подтверждения: это сообщение,
     а не вопрос, на который нужно ответить */
  background: rgba(3, 39, 63, .34);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
}

.chuuk-oops .chuuk-ask__box {
  position: relative;
  width: max-content;
  max-width: min(420px, calc(100vw - 32px));
  padding: 20px 22px 18px;
  border-radius: 16px;
  background: #fbfaf7;
  color: #14212b;
  box-shadow: 0 14px 40px rgba(3, 39, 63, .22);
  text-align: left;
}

.chuuk-oops .chuuk-ask__title {
  font-family: var(--font-text);
  font-size: 17px;
  font-weight: 700;
  color: #14212b;
  margin: 0 28px 6px 0;
  text-align: left;
}

.chuuk-oops .chuuk-ask__text {
  font-size: 14px;
  line-height: 1.45;
  color: #45535f;
  margin: 0;
  text-align: left;
}

/* КАЖДЫЙ ПУНКТ — СВОЯ КАРТОЧКА.
   Раньше это был список со стрелками, и пять жирных строк подряд
   читались, по словам владельца, «как паспорт»: сплошная плотная
   масса, в которой не за что зацепиться глазом. Теперь у пункта
   есть заголовок и пояснение, а между пунктами — воздух. */
.chuuk-oops__list {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.chuuk-oops__item {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(3, 39, 63, .09);
}

.chuuk-oops__body {
  display: grid;
  gap: 3px;
  min-width: 0;
}

/* Пустой кружок — «здесь ещё не заполнено». Он же задаёт ритм:
   взгляд идёт по левому краю сверху вниз, а не по жирным словам
   вразнобой. Плотный цвет — только у ободка, заливки нет:
   точка не должна спорить с текстом. */
.chuuk-oops__dot {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  border: 2px solid var(--chuuk-accent, #ff9800);
  background: none;
}

.chuuk-oops__item-title {
  font-size: 14px;
  font-weight: 700;
  color: #14212b;
  line-height: 1.3;
}

.chuuk-oops__item-text {
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.45;
  color: #45535f;
}

/* Простой пункт — для окна «Упс»: там строки короткие
   («выберите город»), и обрамление делало бы из подсказки анкету */
.chuuk-oops__item--plain {
  padding: 0;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 600;
  color: #14212b;
}

.chuuk-oops__list:has(.chuuk-oops__item--plain) { gap: 6px; }

/* ===== АНКЕТА ПОДРЯДЧИКА: ПРОЦЕНТ ЗА ВЫЕЗД И НЕСКОЛЬКО ГОРОДОВ ===== */

.entry-percent {
  display: flex;
  align-items: center;
  gap: 10px;
}

.entry-percent .entry-input {
  width: 110px;
  flex: none;
}

.entry-percent__sign {
  font-size: 15px;
  font-weight: 600;
  color: var(--chuuk-ink, #14212b);
}

/* Добавленные города — плашками под полем, с крестиком у каждой */
.entry-cities {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.entry-city {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 8px 6px 12px;
  border-radius: 999px;
  background: rgba(3, 39, 63, .07);
  font-size: 14px;
  font-weight: 600;
  color: var(--chuuk-ink, #14212b);
}

.entry-city__x {
  width: 18px;
  height: 18px;
  border: none;
  border-radius: 50%;
  background: rgba(3, 39, 63, .12);
  color: #45535f;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
}

.entry-city__x:hover { background: rgba(3, 39, 63, .22); }

.entry-city-add {
  margin-top: 10px;
  border: 1px dashed rgba(3, 39, 63, .26);
  border-radius: 10px;
  background: none;
  padding: 9px 14px;
  font-size: 14px;
  font-weight: 600;
  color: var(--chuuk-ink, #14212b);
  cursor: pointer;
}

.entry-city-add:hover { background: rgba(3, 39, 63, .05); }

.chuuk-oops__x {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border: none;
  border-radius: 50%;
  background: rgba(17, 24, 39, .07);
  color: #45535f;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
}

.chuuk-oops__x:hover { background: rgba(17, 24, 39, .14); }

.chuuk-oops__actions {
  margin-top: 16px;
  justify-content: flex-start;
}

.chuuk-oops .chuuk-ask__btn--primary {
  background: var(--chuuk-navy, #03273f);
  min-width: 0;
  padding: 10px 20px;
  font-size: 14px;
}

/* Строка `.offer-jump { display: none }` выше гасила плашку
   везде, кроме телефона. Теперь ряд виден всегда — показывает
   и прячет его класс is-shown, который ставит chuukSyncJumpButton. */
.offer-jump { display: flex; }

/* ─── первый экран: поля по центру, после расчёта поднимаются ─── */

/* Центрируем ОТСТУПОМ, а не флексом на .chuuk-hero.
   Флекс тянул вниз всё содержимое героя, включая шапку:
   логотип и «Профиль» уезжали к середине экрана вместе
   с полями. Шапка должна стоять наверху всегда. */
@media (min-width: 900px) {
  .chuuk-header {
    margin-top: 16vh;
    transition: margin-top .35s ease;
  }

  .chuuk-hero {
    padding-bottom: 12vh;
    transition: padding-bottom .35s ease;
  }

  /* Калькулятор раскрыт — экран отдаёт место предложениям */
  body.chuuk-calc-open .chuuk-header {
    margin-top: 34px;
  }

  body.chuuk-calc-open .chuuk-hero {
    padding-bottom: 28px;
  }
}

/* Приставка «от» в плашке с ценой: там стоит цена самой выгодной
   команды, а не итог заказа. Пока идёт пересчёт — прячется вместе
   с цифрой, иначе висело бы «от считаем…». */
.offer-jump__from {
  font-size: 12px;
  font-weight: 600;
  opacity: .62;
  margin-right: -2px;
}

.offer-jump__price.is-busy ~ .offer-jump__from,
.offer-jump__pill--price:has(.offer-jump__price.is-busy) .offer-jump__from {
  display: none;
}

/* На телефоне блок «Нужен свой состав» растягивался по высоте:
   .packs-adv лежит в сетке настроек, и его тянуло до высоты
   соседа. Между текстом и кнопкой зияла пустота. */
@media (max-width: 768px) {
  .chuuk-settings .packs-adv {
    align-self: start;
    gap: 12px;
  }

  .chuuk-settings .packs-adv__text { flex: 0 1 auto; }
}

/* =========================================================
   ШИРЕ НА БОЛЬШОМ ЭКРАНЕ + БЕЗ «НАЗВАНИЯ ПРОЕКТА»
   ---------------------------------------------------------
   Владелец: «он как-то сузил всё в центр». У колонки потолок
   1200 точек, и на его мониторе по бокам оставались широкие
   пустые поля — поля поиска выглядели сжатыми. В утверждённом
   макете они идут почти во всю ширину.
   ========================================================= */

@media (min-width: 1400px) {
  .chuuk-hero__inner,
  .chuuk-calculator {
    max-width: 1560px;
  }
}

/* Ширину задаём явно. body — флекс-колонка (ею прижат подвал,
   решение 55), а внутри флекса «margin: 0 auto» перестаёт
   центрировать и начинает ужимать блок по содержимому: калькулятор
   выходил 899 точек вместо 1560, и лента предложений вместе с ним.
   Ту же граблю уже ловили на .chuuk-hero__inner. */
/* body — флекс-колонка, а внутри флекса `margin: 0 auto` не
   центрирует, а ужимает блок по содержимому: калькулятор выходил
   899 точек вместо полной ширины, и лента с карточкой были уже,
   чем в макете. Лечится явной шириной.

   Вместе с ней обязателен `box-sizing`: у блока отступы по 20,
   и без него 100% складывались с ними — на телефоне калькулятор
   выходил 415 при экране 375, правый край уезжал под обрез
   (`overflow-x: clip`). Это ловушка решения 19: box-sizing
   в проекте включён точечно, каждому новому блоку руками. */
.chuuk-calculator {
  width: 100%;
  box-sizing: border-box;
}

/* Строка «НАЗВАНИЕ ПРОЕКТА» на первом экране — лишний шум:
   в макете её нет, а само название подставляется само
   («Видеоролик · 23 октября»). Поменять его можно на странице
   сметы, там своё поле (#projectNameInput).

   Блок НЕ удаляем из разметки: значение #calcProjectName
   читают js/offer-ui.js и черновик калькулятора. Скрыли —
   значение на месте, логика цела. */
.project-name-row {
  display: none !important;
}

/* =========================================================
   ВЕРХ КАРТОЧКИ — КАК В УТВЕРЖДЁННОМ МАКЕТЕ
   ---------------------------------------------------------
   Логотип, рядом название команды, под ним одной строкой
   «✓ Проверен · Свободны 23 окт.». Плашек «ПРОДАКШН»
   и «ИП · СЗ» на карточке больше нет: роль и форма работы
   видны на странице сметы, а здесь добавляли шум.
   ========================================================= */

.offer-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  flex: 1;
}

.offer-card-head .offer-brand-block {
  width: 56px;
  height: 56px;
  flex: none;
  margin: 0;
}

.offer-card-ident { min-width: 0; }

.offer-card-name {
  font-family: var(--font-text);
  font-size: 19px;
  font-weight: 760;
  letter-spacing: -.02em;
  color: var(--chuuk-ink);
  line-height: 1.2;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.offer-card-status {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--chuuk-muted);
}

/* Внутри статуса живут значки, которые собирает renderOfferMeta.
   В макете это не плашки, а простой текст со светлой галочкой. */
.offer-card-status .chuuk-badge {
  background: none;
  border: none;
  padding: 0;
  font-size: 13px;
  font-weight: 600;
}

.offer-card-status .chuuk-badge--verified,
.offer-card-free { color: #178a4d; }

/* «Проверен» — кнопка, а не надпись: она открывает объяснение,
   что именно мы проверяли. Выглядит при этом как текст — плашка
   посреди строки статуса была бы шумом. */
.offer-card-verified {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: none;
  background: none;
  padding: 0;
  font: inherit;
  color: #178a4d;
  cursor: pointer;
}

.offer-card-verified__q {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: rgba(23, 138, 77, .14);
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
}

.offer-card-verified:hover .offer-card-verified__q {
  background: rgba(23, 138, 77, .28);
}

/* Скидка за разрешение показать работу — подпись под заголовком
   строки, чтобы в оффере было видно, за что именно платим */
.auth-discount-toggle__hint {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  font-weight: 500;
  opacity: .72;
}

/* В расширенных настройках — плашка с размером скидки рядом
   с подписью: цифра должна быть видна раньше, чем текст прочитан */
.portfolio-bonus {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(23, 138, 77, .12);
  color: #178a4d;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.offer-card-status .chuuk-badge--legal { display: none; }

/* У плашки роли задан свой display, и браузерное правило для hidden
   ему проигрывает — в проекте это уже было со сметой и анкетой. */
.offer-card-cloud[hidden] { display: none; }

/* Точка между «✓ Проверен» и «Свободны 23 окт.» Ставится только
   когда перед свободными датами что-то стоит, иначе строка
   начиналась бы с точки. */
.offer-card-free { font-size: 13px; font-weight: 600; }
.offer-card-status .chuuk-badge--verified + .offer-card-free::before {
  content: "·";
  margin-right: 6px;
  color: var(--chuuk-muted);
}

/* На телефоне карточка 345 точек, и в одну строку не влезает ни
   длинное название («ЧЕСТНОСЛОВО про…»), ни статус целиком. Даём
   названию две строки, а статус ставим столбиком — тогда и точка-
   разделитель не нужна: она оказывалась в начале новой строки. */
@media (max-width: 768px) {
  /* Карточка 345 точек, и в одну строку длинное название
     не влезает — даём ему две. Логотип меньше, чтобы текста
     помещалось больше. */
  .offer-card-head { gap: 10px; }
  .offer-card-head .offer-brand-block { width: 48px; height: 48px; }

  .offer-card-name {
    white-space: normal;
    font-size: 16px;
    line-height: 1.2;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }

  /* А вот статус рвать нельзя. Перенос ставил «2 ноя.» отдельной
     строкой, и хвост висел с отступом от логотипа — читалось
     как съехавшая вёрстка. Строка короткая, просто делаем её
     мельче и запрещаем перенос. */
  .offer-card-status {
    flex-wrap: nowrap;
    white-space: nowrap;
    font-size: 12px;
    line-height: 1.3;
  }

  .offer-card-status .chuuk-badge,
  .offer-card-free { font-size: 12px; }

  /* Строка стоит в одну линию и в 345 точках идёт впритык к краю.
     Слово «ЧУУК» здесь можно опустить: чей это сервис, человек
     и так видит — логотип в шапке. Нажатие объяснит остальное. */
  .offer-card-verified__who { display: none; }
}


/* Сердечко остаётся — избранное живая функция, просто уходит
   в правый верхний угол, как в макете */
.offer-producer-card .offer-card-top {
  align-items: flex-start;
  gap: 12px;
}