/* ═══════════════════════════════════════════════════════════════════════════
   Morrow Lab — светлая тема, единый источник цвета.

   Подключается ПОСЛЕДНИМ в <head>, после inline <style> каждой страницы.
   При равной специфичности побеждает правило, объявленное позже, поэтому
   :root отсюда переопределяет :root страницы — все var(--…) переключаются разом.

   Платформа (/platform/) и конструктор остаются тёмными: там рабочая среда,
   и главный объект на экране — рендер.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* ── бумага и поверхности ── */
  --bg:            #f2f1ec;   /* фон страницы */
  --surface:       #fffefb;   /* карточка */
  --surface-2:     #e9e6df;   /* вторая плита, полосы, «зебра» */
  --card:          #fffefb;
  --panel:         #fffefb;
  --warm:          #6f6250;   /* был тёплый светлый текст на чёрном */
  --warm-border:   rgba(111,98,80,.24);

  /* ── линии ── */
  --border:        #dcd8cf;
  --border2:       #c7c2b6;
  --border-2:      #c7c2b6;

  /* ── текст ── */
  --text:          #14140f;
  --text-soft:     rgba(20,20,15,.78);
  --soft:          rgba(20,20,15,.74);
  --muted:         rgba(20,20,15,.6);
  --gray:          #7b776d;
  --dim:           rgba(20,20,15,.42);

  /* ── акцент: лайм на бумаге работает заливкой, не цветом текста ── */
  --lime:          #dcf06a;   /* смягчён: #d1fe17 на бумаге бьёт по глазам */
  --lime-bright:   #d1fe17;   /* исходный — для мелких точечных акцентов */
  --lime-ink:      #12120c;   /* текст на лайме */
  --lime-text:     #5f7a04;   /* «лаймовый» текст там, где нужен читаемый акцент */
  --lime-border:   rgba(150,180,40,.55);
  --lime-soft:     rgba(220,240,106,.30);
  --lime-dim:      rgba(220,240,106,.22);
  --lime-glow:     rgba(220,240,106,.35);

  /* ── режим подрядчиков ── */
  --color-mode-contractors:      #6d28d9;
  --color-mode-contractors-soft: rgba(109,40,217,.16);
}

/* ── базовое: страницы задают color:#fff инлайном, перекрываем ── */
body{ background:var(--bg); color:var(--text); }
::selection{ background:var(--lime); color:var(--lime-ink); }

/* полосы прокрутки были подобраны под чёрный фон */
::-webkit-scrollbar-thumb{ background:#cfcabd; }
::-webkit-scrollbar-track{ background:transparent; }

/* ── шапка и подвал (общий css/morrow-shell.css) ──
   Сам shell не трогаем: его подключает и /platform/, где тема остаётся тёмной.
   Здесь перекрываем его правила — этот файл на платформу не подключён. */
.header{ background:rgba(242,241,236,.88); border-bottom:1px solid var(--border); }
.logo{ color:var(--text); }
.nav-link{ color:var(--text-soft); }
.nav-link:hover{ color:var(--text); background:rgba(20,20,15,.05); }
.nav-link.cur{ color:var(--lime-text); }
.nav-link.platform-cta{ color:var(--lime-text); background:var(--lime-soft); border-color:var(--lime-border); }
.nav-link.platform-cta:hover,.nav-link.platform-cta.cur{ background:rgba(209,254,23,.28); border-color:var(--lime-border); color:var(--lime-text); }
.btn-ghost{ border-color:var(--border2); color:var(--text); }
.btn-ghost:hover{ border-color:var(--text); color:var(--text); }
.burger span{ background:var(--text); }
.mob-menu{ background:var(--bg); }
.mob-menu a{ color:var(--text); }
.mob-close{ color:var(--muted); }
.mob-divider{ background:var(--border); }
.footer-wrap{ background:var(--bg); border-top:1px solid var(--border); }
.footer-logo{ color:var(--text); }
.footer-desc,.footer-copy,.footer-copy a,.footer-links a,.footer-col-title,.fc-title{ color:var(--muted); }
.footer-links a:hover,.footer-copy a:hover{ color:var(--lime-text); }

/* лаймовое свечение вокруг логотипа было рассчитано на чёрный фон */
.logo-icon,.logo-icon-sm{ box-shadow:none !important; }

/* ── типографика: белые заголовки должны стать чернильными ── */
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3{ color:var(--text); }
strong,b{ color:inherit; }

/* ── кнопки ── */
.btn-lime,.btn.lime,.cta,.tb-link.cta{ background:var(--lime); color:var(--lime-ink); }
.btn-outline{ border-color:var(--border2); color:var(--text); }

/* ── виджет поддержки ──
   Его стили лежат в общем support-widget.js, который грузит и тёмная платформа,
   поэтому сам виджет не трогаем: панель остаётся тёмной, а текст внутри неё
   наследовал бы теперь чернильный цвет от body — возвращаем светлый. */
#mw-panel{ color:#f2f1ec; }

/* оранжевая подпись подсказки на бумаге была слишком светлой */
.hint-label{ color:#c25a12; }

/* ── акцентные цвета страниц, подобранные под чёрный фон ──
   На бумаге пастельные оттенки не держат контраст, берём их плотные версии. */
:root{
  --orange: #b45309;
  --rose:   #be185d;
  --violet: #6d28d9;
  --blue:   #1d4ed8;
  --cyan:   #0e7490;
}

/* ── контур у лаймовых кнопок и блоков ──
   На бумаге лайм светлее фона по краю и «растекается»: тонкий тёмный контур
   возвращает кнопке форму. Берём outline, а не border: он не влияет на
   размеры элемента и не затирает существующие тени. */
.btn-lime, .btn.lime, .btn-primary, .btn-submit, .btn-save, .btn-ok, .btn-gen,
.auth-btn, .cta, .tb-link.cta, .hero-btn, .hm-btn.solid, .combo-cta.lime,
.sw-link, .bar-btn.solid, .cta-sm, .btn.solid, .price-cta, .fmt-cta,
.hm-nums, .band, .tier-h .badge, .numbers, .light .num{
  outline: 1px solid rgba(20,20,15,.22);
  outline-offset: -1px;
}
/* у крупных плит контур мягче — иначе читается как рамка */
.hm-nums, .band, .numbers, .light .num{
  outline-color: rgba(20,20,15,.14);
}

/* ── платформа (/platform/) ──
   У неё свой набор токенов: bg-deep, surface-2/3, border-3, whisper, ok/warn/bad
   и тени, рассчитанные на чёрный фон. Дополняем ими светлую тему. */
:root{
  --bg-deep:    #e9e6df;
  --surface-3:  #f7f6f2;
  --border-3:   #c7c2b6;
  --whisper:    rgba(20,20,15,.16);
  --warm-soft:  rgba(111,98,80,.07);

  /* статусы: на бумаге пастельные не читаются */
  --ok:   #128a5c;
  --warn: #b45309;
  --bad:  #c2334f;

  /* тени были почти чёрные — на светлом это грязь */
  --sh-low:  0 1px 2px rgba(20,20,15,.06);
  --sh-med:  0 8px 24px rgba(20,20,15,.10);
  --sh-high: 0 24px 60px rgba(20,20,15,.14);

  /* свечение лаймом по краю на бумаге выглядит грязным ореолом */
  --lime-glow:        0 0 0 1px rgba(160,190,20,.5);
  --lime-glow-strong: 0 0 0 1px rgba(120,150,10,.7);
  --lime-mid:         rgba(209,254,23,.32);
}


/* ── платформа: приглушаем зелень ──
   Лайм на светлом использовался и в заголовках, и в подписях, и в акцентах —
   в сумме рябило. Оставляем его как заливку кнопок и активных состояний,
   а текстовые заголовки делаем чернильными. */
.pf-title, .pf-h, .r-card h3, .r-card h4, .rh, .pf-step-title,
.pf-sec-title, .card-title, .pf-room-name{ color: var(--text); }

/* лаймовые подписи и мелкий текст — в приглушённый оттенок */
.pf-hint, .pf-sub, .pf-muted, .step-lbl, .step-sub{ color: var(--muted); }

/* свечение вокруг активного шага заменяем аккуратным кольцом */
.step.active .step-num{
  box-shadow: 0 0 0 4px var(--bg), 0 0 0 6px var(--lime-border) !important;
  animation: none !important;
}

/* ── платформа: зелёный только как индикатор состояния ──
   Крупный кегль лаймовым на белом читается плохо и в сумме рябит.
   Заголовки и названия — чернильные; зелёный остаётся у активных
   элементов (шаг, чип стиля, бейдж), где он несёт смысл «выбрано». */
.pf-hero-title em, .rh em, .r-card em, .card-title em,
h1 em, h2 em, h3 em, h4 em, .nc-name, .step-name,
[class*="title"] em, [class*="-h1"] em, [class*="-h2"] em, [class*="head"] em{ color: var(--text); }
.step-meta, .pf-note, .pf-caption{ color: var(--muted); }

/* активный шаг остаётся зелёным, но спокойнее */
.step.active .step-name{ color: var(--lime-text); }

/* бейджи-пилюли: приглушаем фон, чтобы их количество не бросалось */
.pill{ background: var(--lime-soft); color: #4f6604; }

/* ── подсказка «что входит в цифру» ──
   Любая цена без состава работ вводит в заблуждение: «под ключ» у одной
   компании 160 BYN/м², у другой 540 — потому что считают разное. Помечаем
   такие цифры значком, по нажатию раскрывается пояснение.
   Реализация без JS: <span class="hint" tabindex="0" data-hint="текст">.
   tabindex делает элемент фокусируемым, поэтому :focus срабатывает и по
   тапу на телефоне, где hover не существует. */
.hint{
  display:inline-flex; align-items:center; justify-content:center;
  width:16px; height:16px; margin-left:5px; vertical-align:middle;
  border-radius:50%; border:1px solid var(--border2);
  background:var(--surface); color:var(--gray);
  font-size:10.5px; font-weight:700; line-height:1; cursor:help;
  position:relative; flex-shrink:0; font-style:normal;
  transition:border-color .15s, color .15s;
}
.hint::before{ content:'?'; }
.hint:hover, .hint:focus{ border-color:var(--text); color:var(--text); outline:none; }

.hint::after{
  content: attr(data-hint);
  position:absolute; left:50%; bottom:calc(100% + 9px); transform:translateX(-50%);
  width:max-content; max-width:min(320px, 78vw);
  background:var(--text); color:var(--bg);
  font-size:12.5px; font-weight:400; font-style:normal; line-height:1.5;
  letter-spacing:0; text-align:left; text-transform:none;
  padding:10px 13px; border-radius:10px;
  box-shadow:0 10px 30px rgba(20,20,15,.22);
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .16s, visibility .16s;
  z-index:60; white-space:normal;
}
.hint:hover::after, .hint:focus::after{ opacity:1; visibility:visible; }

/* у края экрана подсказка уезжала за границу — прижимаем к правому краю */
.hint.hint-right::after{ left:auto; right:0; transform:none; }

/* ВНУТРИ ТАБЛИЦ ТУЛТИПЫ НЕ РАБОТАЮТ: у .tbl-scroll горизонтальная прокрутка
   для мобильных, и overflow обрезает всплывающий блок. Поэтому в таблицах
   ставим номерную сноску, а расшифровка идёт под таблицей блоком .fnotes. */
td .hint::after, th .hint::after{ display:none; }
td .hint, th .hint{ cursor:default; }

.fnotes{ margin-top:14px; display:flex; flex-direction:column; gap:9px; }
.fnote{ display:flex; gap:9px; align-items:flex-start;
  font-size:12.5px; line-height:1.55; color:var(--muted); }
.fnote b{ flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:17px; height:17px; margin-top:1px; border-radius:50%;
  background:var(--lime-soft); border:1px solid var(--lime-border);
  color:#4f6604; font-size:10.5px; font-weight:700; }
.fnote span b{ all:unset; color:var(--text); font-weight:600; }
.fmark{ display:inline-flex; align-items:center; justify-content:center;
  width:15px; height:15px; margin-left:5px; vertical-align:super;
  border-radius:50%; background:var(--lime-soft); border:1px solid var(--lime-border);
  color:#4f6604; font-size:9.5px; font-weight:700; line-height:1; font-style:normal; }

/* ── визуально скрытый заголовок ──
   Инструментальные страницы (песочница, кабинеты) не имеют выраженного
   заголовка в макете, но <h1> нужен: он задаёт структуру документа для
   скринридеров и поисковика. Прячем от глаза, оставляя в потоке чтения. */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0;
}
