/* ============================================================
   САВКА • НОВА ЕРА — вигляд вітрини /nova/ (§8).

   ТРИ ПРАВИЛА, ЯКІ ТУТ ГОЛОВНІШІ ЗА КРАСУ.

   1. ІЗОЛЯЦІЯ. Жодного правила на html/body і жодного класу без
      префікса .nv-. Nova лежить на тому самому домені, що й старий
      сайт Каті, і одне глобальне `body{}` звідси одного дня поїхало б
      у спільний кеш і зіпсувало б їй прод. Тому корінь — position:fixed
      і малює фон САМ: чужі відступи body йому байдужі.

   2. АНІМУЄМО ТІЛЬКИ transform І opacity. Ніякого backdrop-filter:
      він морозить скріншоти і дає 15 fps на дешевому телефоні
      (перевірено на інших проєктах). Тінь і колір теж не анімуємо —
      це перемальовування всього шару.

   3. РУХ МАЄ БУТИ ПОМІТНИЙ, АЛЕ НЕ ОБОВʼЯЗКОВИЙ. Гість має бачити,
      що сайтом керує третій, — тому сцени вʼїжджають, картки
      зʼявляються по черзі, підсвітка пульсує. Але той, хто попросив
      prefers-reduced-motion, просив не про смак, а про запаморочення:
      наприкінці файлу весь рух вимикається одним блоком.
   ============================================================ */

/* ---- шрифти Каті. Лежать на savka.estate; локально їх нема, і це
        не поломка: font-display:swap лишає системний запасний. ---- */
@font-face{ font-family:'NovaRaleway'; font-style:normal; font-weight:400; font-display:swap; src:url(/assets/fonts/raleway-400.woff2) format('woff2'); }
@font-face{ font-family:'NovaRaleway'; font-style:normal; font-weight:600; font-display:swap; src:url(/assets/fonts/raleway-600.woff2) format('woff2'); }
@font-face{ font-family:'NovaRaleway'; font-style:normal; font-weight:700; font-display:swap; src:url(/assets/fonts/raleway-700.woff2) format('woff2'); }
/* ПАСТКА, видима лише очима. Nauryz — русифікований дисплейний шрифт,
   дописаний під українську; у його cmap є «²», «·» і «№», але малює він
   їх порожньою рамкою. Браузер вважає символ покритим і НЕ йде далі по
   ланцюжку — заголовок «Будинок 48 м² · Білогородка» перетворюється на
   «48 м▯ ▯». Тому діапазон обмежений тим, що Nauryz справді вміє:
   решта символів чесно дістається Raleway. */
@font-face{
  font-family:'NovaNauryz'; font-style:normal; font-weight:400 900; font-display:swap;
  src:url(/assets/fonts/nauryz.woff2) format('woff2');
  unicode-range:U+0020-0021, U+0025-0029, U+002C-003B, U+003F, U+0041-005A, U+0061-007A,
                U+00A0, U+0404, U+0406-0407, U+0410-044F, U+0454, U+0456-0457, U+0490-0491,
                U+2013-2014, U+2018-201D, U+2026, U+20B4;
}

/* ============================================================
   ТОКЕНИ. Імена й значення — ті самі, що на savka.estate, але живуть
   ВСЕРЕДИНІ .nv-root, а не в :root: так бренд один, а витоку нема.
   ============================================================ */
.nv-root{
  --paper:#FCF8FA; --white:#ffffff; --ink:#16121A; --ink-2:#4A4350;
  --pink-50:#FBEAF1; --pink-100:#F7D6E4; --pink-300:#EFA3C6;
  --pink-500:#E0589B; --pink-600:#CE3F86;
  --red:#E63148; --blue:#1E3FD0; --ok:#1F9D6B;

  --nv-pink:var(--pink-500);
  --nv-line:rgba(22,18,26,.10);
  --nv-soft:rgba(224,88,155,.10);
  --nv-shadow:0 18px 50px rgba(206,63,134,.14);
  --nv-shadow-sm:0 8px 24px rgba(22,18,26,.08);
  --nv-r:22px; --nv-r-sm:14px;
  --nv-ff-h:'NovaNauryz','NovaRaleway',Georgia,serif;
  --nv-ff:'NovaRaleway',system-ui,-apple-system,'Segoe UI',sans-serif;
  --nv-rail:min(390px,34vw);
  --nv-ease:cubic-bezier(.22,.68,.24,1);
  --nv-t:.42s;
}

.nv-root[data-theme="dark"]{
  --paper:#131019; --white:#1E1825; --ink:#F2ECF6; --ink-2:#ADA2BC;
  --pink-50:#2A1C29; --pink-100:#3A2839; --pink-300:#B6749C;
  --pink-500:#E86FAC; --pink-600:#F49AC8;
  --red:#FF5268; --blue:#7C92FF; --ok:#4FD1A0;
  --nv-line:rgba(255,255,255,.12);
  --nv-soft:rgba(232,111,172,.14);
  --nv-shadow:0 18px 50px rgba(0,0,0,.55);
  --nv-shadow-sm:0 8px 24px rgba(0,0,0,.45);
  color-scheme:dark;
}

/* Скидання рівно в межах вітрини і не ширше. */
.nv-root, .nv-root *, .nv-root *::before, .nv-root *::after{ box-sizing:border-box; }
/* ПАСТКА: [hidden] у браузера — це звичайне `display:none` з таблиці
   агента, і будь-яке наше `display:grid` нижче його мовчки перебиває.
   Галерея тоді лежить розгорнутою поверх сцени з першого кадру. */
.nv-root [hidden]{ display:none !important; }
.nv-root p, .nv-root h1, .nv-root h2, .nv-root h3, .nv-root dl, .nv-root dd, .nv-root figure{ margin:0; }
.nv-root button, .nv-root input, .nv-root textarea, .nv-root select{ font:inherit; color:inherit; }

.nv-root{
  position:fixed; inset:0;
  display:grid;
  grid-template-columns:1fr var(--nv-rail);
  grid-template-rows:auto 1fr;
  background:var(--paper); color:var(--ink);
  font-family:var(--nv-ff); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;
}

/* ============================================================
   ШАПКА
   ============================================================ */
.nv-top{
  grid-column:1/-1;
  display:flex; align-items:center; gap:18px;
  padding:12px clamp(14px,2.4vw,30px);
  border-bottom:1px solid var(--nv-line);
  background:var(--white);
  z-index:5;
}
.nv-brand{ display:flex; align-items:center; gap:10px; flex:0 0 auto; }
.nv-brand__mark{
  width:38px; height:38px; border-radius:12px; flex:0 0 auto;
  display:grid; place-items:center;
  background:var(--pink-500); color:#fff;
  font-family:var(--nv-ff-h); font-size:15px; letter-spacing:.04em;
}
.nv-brand__txt{ display:flex; flex-direction:column; line-height:1.15; }
.nv-brand__txt b{ font-family:var(--nv-ff-h); font-weight:700; font-size:15px; }
.nv-brand__txt i{ font-style:normal; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-600); }

.nv-track{ display:flex; gap:6px; margin-inline:auto; flex-wrap:wrap; justify-content:center; }
.nv-track__b{
  border:1px solid transparent; background:transparent; color:var(--ink-2);
  padding:7px 13px; border-radius:999px; cursor:pointer;
  font-size:13px; white-space:nowrap;
  transition:transform .2s var(--nv-ease), opacity .2s;
}
.nv-track__b:hover{ background:var(--nv-soft); color:var(--ink); }
.nv-track__b.is-on{ background:var(--pink-500); border-color:var(--pink-500); color:#fff; }
.nv-track__b.is-done{ color:var(--pink-600); }

.nv-tools{ display:flex; gap:6px; flex:0 0 auto; }
.nv-tool{
  display:inline-flex; align-items:center; gap:6px;
  border:1px solid var(--nv-line); background:var(--white); color:var(--ink-2);
  padding:8px 12px; border-radius:999px; cursor:pointer; font-size:13px;
  transition:transform .18s var(--nv-ease);
}
.nv-tool:hover{ transform:translateY(-1px); color:var(--ink); border-color:var(--pink-300); }
.nv-tool[aria-pressed="true"]{ background:var(--pink-50); border-color:var(--pink-300); color:var(--pink-600); }
.nv-tool__t{ display:inline; }

/* ============================================================
   СЦЕНА. Одна думка на весь екран; решта не просто прозора, а
   visibility:hidden — інакше руки ведучої знайшли б у ній елемент і
   «показали» гостю те, чого він не бачить.
   ============================================================ */
.nv-stage{ position:relative; overflow:hidden; }
.nv-scene{
  position:absolute; inset:0;
  overflow-y:auto; overscroll-behavior:contain;
  padding:clamp(18px,3vw,44px) clamp(16px,3vw,52px) 64px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(18px) scale(.995);
  transition:opacity var(--nv-t) var(--nv-ease), transform var(--nv-t) var(--nv-ease), visibility 0s linear var(--nv-t);
}
.nv-scene.is-on{
  opacity:1; visibility:visible; pointer-events:auto; transform:none;
  transition:opacity var(--nv-t) var(--nv-ease), transform var(--nv-t) var(--nv-ease), visibility 0s;
}
/* Назад — рух у зворотний бік, щоб «назад» відчувалось назад. */
.nv-root.is-back .nv-scene{ transform:translateY(-18px) scale(.995); }
.nv-root.is-back .nv-scene.is-on{ transform:none; }

/* Герой центрується у своєму екрані. margin:auto на .nv-hero у flex-контейнері
   центрує обидва боки й КОРЕКТНО колапсує в 0, коли вміст вищий за екран
   (на телефоні), — тому нічого не зрізається, на відміну від justify-center. */
#nv-scene-hero{ display:flex; }

.nv-h{ font-family:var(--nv-ff-h); font-weight:700; font-size:clamp(24px,3.2vw,38px); line-height:1.12; letter-spacing:-.01em; }
.nv-h--sm{ font-size:clamp(19px,2vw,24px); }
.nv-lead{ color:var(--ink-2); max-width:60ch; margin-top:10px; }

/* ---- hero ----
   Сцена-герой центрує вміст по вертикалі (display:flex у #nv-scene-hero
   нижче): без цього короткий блок висів угорі, а під ним лишалась чорна
   порожнеча — герой «обривався», а не закінчувався. */
.nv-hero{ max-width:900px; margin:auto; padding-block:clamp(10px,4vh,48px); width:100%; }
.nv-hero__kicker{ font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--pink-600); }
.nv-hero__h{ font-family:var(--nv-ff-h); font-weight:800; font-size:clamp(32px,6vw,68px); line-height:1.03; letter-spacing:-.02em; margin-top:14px; }
.nv-hero__p{ color:var(--ink-2); max-width:56ch; margin-top:16px; font-size:clamp(15px,1.4vw,18px); }
.nv-hero__go{ display:flex; flex-wrap:wrap; gap:10px; margin-top:26px; }
/* Кожна цифра — окрема комірка з підписом ПІД нею. Раніше dt і dd були
   прямими дітьми сітки auto-fit і розбігались по різних колонках: «6» і
   «4» опинялись окремо від своїх підписів. Тепер пара нерозривна. */
.nv-hero__facts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:20px 24px; margin-top:30px; padding-top:22px; border-top:1px solid var(--nv-line); }
.nv-fact{ display:flex; flex-direction:column; gap:3px; min-width:0; }
/* Цифра — Raleway, не дисплейний Nauryz: у нього «1» схожа на «/», а
   «28 800» читається як «28 8OO». Ціну, яку не прочитати з першого разу,
   втрачаєш разом із клієнтом (§8). tabular-nums вирівнює розряди. */
.nv-hero__facts dt{ font-family:var(--nv-ff); font-weight:700; font-size:clamp(24px,2.6vw,32px); line-height:1.02; color:var(--pink-600); font-variant-numeric:tabular-nums; }
.nv-hero__facts dd{ font-size:13px; line-height:1.3; color:var(--ink-2); }
/* Підпис-«підлога» героя: дає йому чіткий кінець замість обриву в темряву. */
.nv-hero__foot{ margin-top:28px; font-size:13.5px; color:var(--ink-2); }
.nv-hero__foot b{ font-family:var(--nv-ff); font-weight:700; color:var(--pink-600); font-variant-numeric:tabular-nums; }

/* ---- потреба ---- */
.nv-need{ max-width:900px; margin:auto; }
.nv-need__rows{ display:grid; gap:18px; margin-top:26px; }
.nv-needrow{ background:var(--white); border:1px solid var(--nv-line); border-radius:var(--nv-r); padding:16px 18px; box-shadow:var(--nv-shadow-sm); }
.nv-needrow__q{ font-family:var(--nv-ff); font-weight:700; font-size:18px; }
.nv-needrow__a{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
.nv-need__sum{ margin-top:20px; padding:14px 18px; border-radius:var(--nv-r-sm); background:var(--pink-50); border:1px solid var(--pink-100); font-size:15px; }

/* ============================================================
   СТІЛ ПОКАЗУ. Максимум три картки в кадрі, крупно, як рієлтор
   розкладає перед клієнтом. Сітка на 81 картку тут заборонена
   свідомо: вона перетворює розмову на пошук.
   ============================================================ */
.nv-catalog{ max-width:1240px; margin:auto; min-width:0; }
/* Фільтри переносяться рядками, а КОЖНА група теж уміє перенести свої чіпи
   (flex-wrap:wrap). Без цього одна широка група («ЖК: Емірати · Бельгійське
   містечко · …») ставала одним нерозривним flex-елементом, ширшим за колонку,
   і мовчки вилазила за правий край на 1100/900 px (§5). Тепер найширша
   нерозривна одиниця — це один чіп, а він завжди вужчий за екран. */
.nv-filters{ display:flex; flex-wrap:wrap; gap:8px 4px; align-items:flex-start; max-width:100%; min-width:0; }
.nv-fgroup{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding-right:10px; margin-right:4px; border-right:1px solid var(--nv-line); min-width:0; }
.nv-fgroup:last-child{ border-right:0; margin-right:0; padding-right:0; }
.nv-fgroup__t{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); flex:0 0 auto; }
.nv-chip{
  border:1px solid var(--nv-line); background:var(--white); color:var(--ink-2);
  padding:7px 13px; border-radius:999px; cursor:pointer; font-size:13px; white-space:nowrap;
  transition:transform .18s var(--nv-ease);
}
.nv-chip:hover{ transform:translateY(-1px); border-color:var(--pink-300); color:var(--ink); }
.nv-chip.is-on{ background:var(--pink-500); border-color:var(--pink-500); color:#fff; }
.nv-chip--clear{ color:var(--red); }

.nv-deck{
  display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(12px,1.6vw,22px);
  margin-top:22px; align-items:start;
}
.nv-card{
  display:flex; flex-direction:column; text-align:left;
  background:var(--white); border:1px solid var(--nv-line); border-radius:var(--nv-r);
  overflow:hidden; cursor:pointer; padding:0;
  box-shadow:var(--nv-shadow-sm);
  transition:transform .22s var(--nv-ease);
  animation:nv-in .5s var(--nv-ease) backwards;
  animation-delay:calc(var(--i,0) * .09s);
}
.nv-card:hover{ transform:translateY(-4px); }
.nv-card__ph{ position:relative; aspect-ratio:4/3; background:var(--pink-50); overflow:hidden; }
.nv-card__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
/* Чесний плейсхолдер замість битої картинки: гість має розуміти, що
   фото поки нема, а не бачити зламану іконку і думати про сайт погане. */
.nv-noph{
  position:absolute; inset:0; display:grid; place-content:center; gap:6px; text-align:center;
  background:
    repeating-linear-gradient(135deg, var(--pink-50) 0 14px, var(--white) 14px 28px);
  color:var(--pink-600);
}
.nv-noph b{ font-family:var(--nv-ff); font-weight:700; font-size:22px; }
.nv-noph span{ font-size:11px; color:var(--ink-2); }
.nv-card__badges{ position:absolute; left:10px; top:10px; display:flex; gap:6px; flex-wrap:wrap; }
.nv-badge{ background:var(--white); color:var(--pink-600); border:1px solid var(--pink-100); border-radius:999px; padding:3px 9px; font-size:11px; }
.nv-badge--rent{ color:var(--blue); border-color:var(--blue); }
.nv-card__b{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1; }
/* Назва картки й ціна — Raleway: це те, що гість читає в першу чергу, і
   плутати «12 334» тут не можна (§8). Nauryz лишається на заголовках сцен. */
.nv-card__t{ font-family:var(--nv-ff); font-weight:700; font-size:16.5px; line-height:1.25; }
.nv-card__meta{ font-size:13px; color:var(--ink-2); font-variant-numeric:tabular-nums; }
.nv-card__price{ font-family:var(--nv-ff); font-weight:800; font-size:23px; color:var(--pink-600); margin-top:auto; font-variant-numeric:tabular-nums; }
.nv-card__price i{ font-style:normal; font-size:13px; font-weight:600; color:var(--ink-2); }
.nv-card__why{ font-size:12px; color:var(--ink-2); border-top:1px dashed var(--nv-line); padding-top:8px; }
.nv-card__acts{ display:flex; gap:6px; flex-wrap:wrap; }

.nv-deck__foot{ display:flex; align-items:center; gap:14px; margin-top:22px; }
.nv-count{ font-size:13px; color:var(--ink-2); }
.nv-empty{ grid-column:1/-1; padding:34px; text-align:center; border:1px dashed var(--nv-line); border-radius:var(--nv-r); color:var(--ink-2); }

/* ============================================================
   ОБʼЄКТ і ПОРІВНЯННЯ
   ============================================================ */
.nv-object{ max-width:1180px; margin:auto; }
.nv-obj{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(16px,2vw,32px); }
.nv-obj__ph{ position:relative; border-radius:var(--nv-r); overflow:hidden; aspect-ratio:4/3; background:var(--pink-50); border:1px solid var(--nv-line); cursor:zoom-in; }
.nv-obj__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.nv-obj__more{ position:absolute; right:12px; bottom:12px; background:var(--white); border:1px solid var(--nv-line); border-radius:999px; padding:6px 12px; font-size:12px; }
.nv-obj__price{ font-family:var(--nv-ff); font-weight:800; font-size:clamp(30px,4vw,44px); color:var(--pink-600); line-height:1; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
.nv-obj__sub{ font-size:13px; color:var(--ink-2); margin-top:4px; }
.nv-specs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:10px; margin-top:18px; }
.nv-spec{ background:var(--white); border:1px solid var(--nv-line); border-radius:var(--nv-r-sm); padding:10px 12px; }
.nv-spec dt{ font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--ink-2); }
.nv-spec dd{ font-family:var(--nv-ff); font-weight:700; font-size:18px; font-variant-numeric:tabular-nums; }
.nv-why{ margin-top:18px; display:grid; gap:10px; }
.nv-why__i{ padding:12px 14px; border-radius:var(--nv-r-sm); border:1px solid var(--nv-line); background:var(--white); font-size:14px; }
.nv-why__i b{ display:block; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--pink-600); margin-bottom:4px; }
.nv-why__i--minus b{ color:var(--ink-2); }
.nv-obj__acts{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.nv-obj__desc{ margin-top:18px; font-size:14px; color:var(--ink-2); white-space:pre-line; max-height:15em; overflow:auto; }

.nv-cmp{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(12px,1.6vw,22px); }
.nv-cmp__col{ background:var(--white); border:1px solid var(--nv-line); border-radius:var(--nv-r); overflow:hidden; }
.nv-cmp__ph{ aspect-ratio:16/10; position:relative; background:var(--pink-50); }
.nv-cmp__ph img{ width:100%; height:100%; object-fit:cover; display:block; }
.nv-cmp__b{ padding:14px 16px; }
.nv-cmp table{ width:100%; border-collapse:collapse; margin-top:18px; grid-column:1/-1; font-size:14px; }
.nv-cmp th{ text-align:left; font-weight:400; color:var(--ink-2); font-size:12px; letter-spacing:.08em; text-transform:uppercase; padding:8px 10px; }
.nv-cmp td{ padding:9px 10px; border-top:1px solid var(--nv-line); }
.nv-cmp tr.is-diff td{ background:var(--nv-soft); }

/* ============================================================
   РОЗРАХУНОК
   ============================================================ */
.nv-calc{ max-width:900px; margin:auto; }
.nv-calc__grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:14px; margin-top:20px; }
.nv-money{ background:var(--white); border:1px solid var(--nv-line); border-radius:var(--nv-r); padding:16px 18px; }
.nv-money dt{ font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); }
.nv-money dd{ font-family:var(--nv-ff); font-weight:800; font-size:clamp(23px,3vw,32px); color:var(--ink); margin-top:4px; font-variant-numeric:tabular-nums; letter-spacing:-.005em; }
.nv-money--main{ background:var(--pink-500); border-color:var(--pink-500); }
.nv-money--main dt{ color:rgba(255,255,255,.8); }
.nv-money--main dd{ color:#fff; }
.nv-ctrl{ display:grid; gap:6px; margin-top:20px; }
.nv-ctrl label{ font-size:13px; color:var(--ink-2); display:flex; justify-content:space-between; gap:10px; }
.nv-ctrl input[type=range]{ width:100%; accent-color:var(--pink-500); }
.nv-terms{ display:flex; gap:6px; flex-wrap:wrap; }
.nv-note{ margin-top:18px; padding:12px 14px; border-radius:var(--nv-r-sm); background:var(--pink-50); border:1px solid var(--pink-100); font-size:13px; color:var(--ink-2); }

/* ============================================================
   ПЕРЕГЛЯД: слоти + форма
   ============================================================ */
.nv-view{ max-width:1000px; margin:auto; display:grid; grid-template-columns:minmax(0,1fr) minmax(320px,.85fr); gap:clamp(16px,2vw,32px); align-items:start; }
.nv-slots__two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:16px; }
.nv-slot{
  border:1px solid var(--nv-line); background:var(--white); border-radius:var(--nv-r-sm);
  padding:14px 16px; cursor:pointer; text-align:left;
  transition:transform .18s var(--nv-ease);
}
.nv-slot:hover{ transform:translateY(-2px); border-color:var(--pink-300); }
.nv-slot.is-on{ background:var(--pink-500); border-color:var(--pink-500); color:#fff; }
.nv-slot b{ display:block; font-family:var(--nv-ff); font-weight:700; font-size:18px; }
.nv-slot span{ font-size:12px; opacity:.8; }
.nv-slots__rest{ display:flex; flex-wrap:wrap; gap:6px; margin-top:12px; }
.nv-slots__day{ font-size:12px; color:var(--ink-2); margin-top:12px; }

.nv-form{ background:var(--white); border:1px solid var(--nv-line); border-radius:var(--nv-r); padding:18px; box-shadow:var(--nv-shadow-sm); display:grid; gap:12px; }
.nv-form__note{ font-size:13px; color:var(--ink-2); }
.nv-field{ display:grid; gap:5px; font-size:13px; color:var(--ink-2); }
.nv-field__hint{ font-style:normal; opacity:.75; }
.nv-field input, .nv-field textarea{
  width:100%; padding:11px 13px; border-radius:var(--nv-r-sm);
  border:1px solid var(--nv-line); background:var(--paper); color:var(--ink);
  resize:vertical;
}
.nv-field input:focus, .nv-field textarea:focus{ outline:2px solid var(--pink-300); outline-offset:1px; }
.nv-field.is-bad input{ border-color:var(--red); }
.nv-form__go{ display:flex; gap:8px; flex-wrap:wrap; }
.nv-form__msg{ font-size:13px; min-height:1.2em; }
.nv-form__msg.is-ok{ color:var(--ok); }
.nv-form__msg.is-bad{ color:var(--red); }

/* ============================================================
   КНОПКИ
   ============================================================ */
.nv-btn{
  display:inline-flex; align-items:center; gap:7px; justify-content:center;
  border:1px solid var(--nv-line); background:var(--white); color:var(--ink);
  padding:11px 18px; border-radius:999px; cursor:pointer; font-size:14px;
  text-decoration:none;
  transition:transform .18s var(--nv-ease);
}
.nv-btn:hover{ transform:translateY(-2px); border-color:var(--pink-300); }
.nv-btn--main{ background:var(--pink-500); border-color:var(--pink-500); color:#fff; box-shadow:var(--nv-shadow); }
.nv-btn--ghost{ background:transparent; }
.nv-btn--sm{ padding:7px 13px; font-size:13px; }
.nv-btn[disabled]{ opacity:.5; cursor:default; transform:none; }

/* ============================================================
   ПАНЕЛЬ ВЕДУЧОЇ
   ============================================================ */
.nv-rail{
  grid-column:2; display:flex; flex-direction:column; gap:12px;
  padding:16px; border-left:1px solid var(--nv-line);
  background:var(--white); overflow:hidden; min-height:0;
}
.nv-rail__head{ display:flex; align-items:center; gap:12px; }

/* Запасний орб: рівно те, що бачить гість, коли bulka.js не приїхав.
   Не «заглушка на потім» — падіння одного файлу не має лишати панель
   ведучої з діркою посеред. */
.nv-orb{
  width:56px; height:56px; border-radius:50%; flex:0 0 auto; position:relative;
  background:radial-gradient(circle at 34% 32%, var(--pink-300), var(--pink-500) 62%, var(--pink-600));
  box-shadow:0 0 0 6px var(--nv-soft);
  animation:nv-breathe 4.2s ease-in-out infinite;
}
.nv-orb[data-state="listen"]{ animation-duration:2.4s; }
.nv-orb[data-state="think"]{ animation:nv-spin 1.1s linear infinite; }
.nv-orb[data-state="talk"]{ animation:nv-breathe .7s ease-in-out infinite; }
.nv-orb[data-state="think"]::after{
  content:''; position:absolute; inset:-7px; border-radius:50%;
  border:2px solid var(--pink-300); border-top-color:transparent;
}
/* Обличчя приїхало і взяло елемент під себе — наш орб мовчки зникає.
   Розмір задаємо тут: bulka.css сама по собі метить на 260 px, а це вся
   панель ведучої разом із субтитрами. */
.nv-orb.nv-bulka{
  width:auto; height:auto; border-radius:0; box-shadow:none; animation:none;
  background:none; flex:0 0 auto;
  --bk-size:clamp(88px,9vw,124px);
}
.nv-orb.nv-bulka::after{ content:none; }
.nv-who{ display:flex; flex-direction:column; line-height:1.2; flex:1; min-width:0; }
.nv-who b{ font-family:var(--nv-ff-h); font-size:16px; }
.nv-who span{ font-size:12px; color:var(--ink-2); }
.nv-rail__fold{ border:1px solid var(--nv-line); background:transparent; border-radius:50%; width:30px; height:30px; cursor:pointer; display:none; }

.nv-sub{
  font-size:15px; line-height:1.45; padding:12px 14px; border-radius:var(--nv-r-sm);
  background:var(--pink-50); border:1px solid var(--pink-100); color:var(--ink);
  min-height:3em;
}

.nv-figures{ border:1px solid var(--nv-line); border-radius:var(--nv-r-sm); padding:10px 12px; }
.nv-figures h3{ font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink-2); font-weight:600; }
.nv-figures dl{ display:grid; grid-template-columns:auto 1fr; gap:4px 12px; margin-top:8px; align-items:baseline; }
.nv-figures dt{ font-size:12px; color:var(--ink-2); }
.nv-figures dd{ font-family:var(--nv-ff); font-weight:800; font-size:16px; text-align:right; color:var(--pink-600); font-variant-numeric:tabular-nums; }
.nv-figures dd.is-new{ animation:nv-pop .5s var(--nv-ease); }

.nv-log{ flex:1; min-height:60px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; padding-right:4px; }
.nv-msg{ font-size:13.5px; line-height:1.45; padding:8px 11px; border-radius:12px; max-width:92%; }
.nv-msg--bulka{ background:var(--pink-50); border:1px solid var(--pink-100); align-self:flex-start; border-bottom-left-radius:4px; }
.nv-msg--guest{ background:var(--paper); border:1px solid var(--nv-line); align-self:flex-end; border-bottom-right-radius:4px; }
.nv-msg--site{ background:transparent; border:1px dashed var(--nv-line); align-self:flex-start; color:var(--ink-2); }
.nv-msg--act{ align-self:center; background:transparent; color:var(--ink-2); font-size:11.5px; letter-spacing:.03em; padding:2px 8px; opacity:.9; }
.nv-msg--act::before{ content:'⟡ '; color:var(--pink-500); }

.nv-quick{ display:flex; flex-wrap:wrap; gap:6px; }
.nv-ask{ display:flex; gap:6px; }
.nv-ask input{
  flex:1; min-width:0; padding:11px 14px; border-radius:999px;
  border:1px solid var(--nv-line); background:var(--paper); color:var(--ink);
}
.nv-ask input:focus{ outline:2px solid var(--pink-300); outline-offset:1px; }
.nv-ask__go{
  width:44px; flex:0 0 auto; border-radius:50%; border:1px solid var(--pink-500);
  background:var(--pink-500); color:#fff; cursor:pointer; font-size:18px;
}

/* ============================================================
   ПІДСВІТКА, ПЛАШКА «ВЕДЕ БУЛКА», ГАЛЕРЕЯ
   ============================================================ */
.nv-point{ animation:nv-point 2.4s var(--nv-ease); position:relative; z-index:2; }
@keyframes nv-point{
  0%{ box-shadow:0 0 0 0 rgba(224,88,155,.55); transform:scale(1); }
  18%{ transform:scale(1.03); }
  60%{ box-shadow:0 0 0 16px rgba(224,88,155,0); }
  100%{ box-shadow:0 0 0 0 rgba(224,88,155,0); transform:scale(1); }
}

.nv-hand{
  position:absolute; left:50%; top:10px; z-index:9;
  transform:translate(-50%,-14px); opacity:0;
  background:var(--ink); color:var(--paper);
  padding:8px 16px; border-radius:999px; font-size:13px; white-space:nowrap;
  box-shadow:var(--nv-shadow-sm);
  transition:opacity .28s var(--nv-ease), transform .28s var(--nv-ease);
  pointer-events:none;
}
.nv-hand.is-on{ opacity:1; transform:translate(-50%,0); }
.nv-hand b{ color:var(--pink-300); font-weight:400; }

/* Хвиля по сцені в момент дії: гість мусить бачити чужу руку. */
.nv-stage::after{
  content:''; position:absolute; left:0; right:0; top:0; height:3px; z-index:8;
  background:linear-gradient(90deg, transparent, var(--pink-500), transparent);
  transform:translateX(-100%); opacity:0; pointer-events:none;
}
.nv-root.is-led .nv-stage::after{ animation:nv-sweep .9s var(--nv-ease); }

.nv-lb{ position:absolute; inset:0; z-index:20; background:rgba(10,7,14,.92); display:grid; grid-template-rows:1fr auto; padding:18px; }
.nv-lb img{ width:100%; height:100%; object-fit:contain; min-height:0; }
.nv-lb__bar{ display:flex; align-items:center; justify-content:center; gap:10px; padding-top:12px; color:#fff; }
.nv-lb__bar button{ border:1px solid rgba(255,255,255,.3); background:transparent; color:#fff; border-radius:999px; padding:8px 16px; cursor:pointer; }

.nv-toast{
  position:absolute; left:50%; bottom:22px; z-index:30; transform:translate(-50%,10px); opacity:0;
  background:var(--ink); color:var(--paper); padding:10px 18px; border-radius:999px; font-size:14px;
  transition:opacity .25s, transform .25s var(--nv-ease); pointer-events:none; max-width:80vw; text-align:center;
}
.nv-toast.is-on{ opacity:1; transform:translate(-50%,0); }

/* ============================================================
   АНІМАЦІЇ
   ============================================================ */
@keyframes nv-in{ from{ opacity:0; transform:translateY(16px) scale(.98); } to{ opacity:1; transform:none; } }
@keyframes nv-pop{ 0%{ transform:scale(.7); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:none; opacity:1; } }
@keyframes nv-breathe{ 0%,100%{ transform:scale(1); } 50%{ transform:scale(1.07); } }
@keyframes nv-spin{ to{ transform:rotate(360deg); } }
@keyframes nv-sweep{ 0%{ transform:translateX(-100%); opacity:1; } 100%{ transform:translateX(100%); opacity:0; } }

/* ============================================================
   ВУЗЬКИЙ ЕКРАН. Панель ведучої стає нижньою шухлядою: у метро
   гість тримає телефон однією рукою, і кнопки-дублери мають бути
   під великим пальцем, а не десь угорі.
   ============================================================ */
/* Шість сцен + чотири інструменти в один рядок не влазять раніше, ніж
   здається: підписи інструментів ідуть першими, бо їхні іконки читаються
   й без слів, а назви сцен — ні. */
@media (max-width:1240px){
  .nv-tool__t{ display:none; }
  .nv-tool{ padding:8px 11px; }
}

@media (max-width:1080px){
  /* minmax(0,1fr), а не 1fr: інакше нерозривний вміст (смуга-скрол маршруту
     сцен) роздуває колонку до свого min-content, шапка стає ширшою за екран
     і кнопки-інструменти їдуть за правий край під обріз. */
  .nv-root{ grid-template-columns:minmax(0,1fr); grid-template-rows:auto 1fr auto; }
  .nv-top{ min-width:0; }
  .nv-stage{ grid-column:1; min-width:0; }
  .nv-rail{
    grid-column:1; min-width:0; border-left:0; border-top:1px solid var(--nv-line);
    max-height:46vh; padding:12px 14px calc(12px + env(safe-area-inset-bottom));
  }
  .nv-rail__fold{ display:block; }
  .nv-root.is-folded .nv-rail{ max-height:none; }
  .nv-root.is-folded .nv-log,
  .nv-root.is-folded .nv-figures,
  .nv-root.is-folded .nv-quick{ display:none; }
  .nv-deck{ grid-template-columns:1fr; }
  .nv-obj, .nv-view{ grid-template-columns:1fr; }
  .nv-cmp{ grid-template-columns:1fr 1fr; }
  .nv-tool__t{ display:none; }
  .nv-tool{ padding:8px 11px; }
  /* Маршрут сцен — окремою смугою на весь рядок, у ОДИН ряд із горизонтальним
     скролом. flex-wrap:nowrap тут критичний: без нього overflow-x:auto нічого
     не дає — flex просто переносить кнопки в другий ряд (шість кнопок у два
     ряди — саме те, що просили прибрати). */
  /* width:100% + min-width:0 разом: смуга займає рядок, але НЕ нав'язує
     батькові свою повну ширину — саме min-width:0 дозволяє overflow-x:auto
     справді утримати вміст, а не розсунути шапку. */
  .nv-track{ order:3; width:100%; min-width:0; margin:0; justify-content:flex-start; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .nv-track::-webkit-scrollbar{ display:none; }
  .nv-track__b{ flex:0 0 auto; }
  .nv-top{ flex-wrap:wrap; }
  /* На дотик цілі не менші за палець. */
  .nv-chip, .nv-btn--sm{ padding:10px 15px; }
}

/* ============================================================
   ТЕЛЕФОН. Тут головна платформа, і головне правило екрана: гість
   одразу бачить те, ЩО ЙОМУ ПОКАЗУЮТЬ (картку), а не шапку й фільтри.
   Тому шапка стискається, фільтри стають одним рядом-скролом, а панель
   ведучої — компактною смугою, що згортається (app.js складає її на
   старті, лишаючи обличчя + субтитр).
   ============================================================ */
@media (max-width:720px){
  /* Компактна шапка: бренд + інструменти в один рядок; маршрут — смугою нижче. */
  .nv-top{ gap:8px; padding:8px 12px; }
  .nv-brand__mark{ width:32px; height:32px; border-radius:10px; font-size:13px; }
  .nv-brand__txt b{ font-size:13px; }
  .nv-brand__txt i{ font-size:9px; letter-spacing:.14em; }
  .nv-tools{ gap:4px; margin-left:auto; }
  .nv-tool{ padding:8px 10px; font-size:16px; line-height:1; }
  .nv-track{ gap:4px; }
  .nv-track__b{ padding:7px 12px; font-size:12.5px; }

  /* Сцени тісніше до країв — кожен піксель висоти йде картці. */
  .nv-scene{ padding:12px 12px 36px; }
  .nv-catalog, .nv-object, .nv-calc, .nv-view, .nv-need, .nv-hero{ max-width:none; }

  /* Фільтри — ОДИН ряд горизонтального скролу у власному контейнері (§5):
     не чотири ряди, що з'їдають екран, і не переповнення за правий край. */
  .nv-filters{ flex-wrap:nowrap; overflow-x:auto; gap:8px; padding-bottom:4px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .nv-filters::-webkit-scrollbar{ display:none; }
  .nv-fgroup{ flex-wrap:nowrap; flex:0 0 auto; }

  /* Два поруч і два слоти — в один стовпчик: на 360 px поряд вони не читаються. */
  .nv-cmp{ grid-template-columns:1fr; }
  .nv-slots__two{ grid-template-columns:1fr; }

  /* Панель ведучої — компактна смуга. Обличчя менше, субтитр без зайвої висоти. */
  .nv-rail{ max-height:60vh; gap:10px; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); }
  .nv-rail__head{ gap:10px; }
  .nv-orb{ width:44px; height:44px; }
  .nv-orb.nv-bulka{ --bk-size:clamp(46px,13vw,58px); }
  .nv-sub{ font-size:14px; padding:10px 12px; min-height:0; }

  /* Згорнута смуга: лишаються тільки обличчя + субтитр; історія, цифри,
     кнопки-дублери й поле вводу ховаються до дотику по стрілці. */
  .nv-root.is-folded .nv-rail{ max-height:none; }
  .nv-root.is-folded .nv-ask{ display:none; }
}

@media (pointer:coarse){
  .nv-chip, .nv-track__b{ min-height:40px; }
  .nv-btn{ min-height:46px; }
}

/* ============================================================
   ПОВАГА ДО prefers-reduced-motion. Це не про смак — це про
   запаморочення, тому вимикається ВЕСЬ рух, а не «майже весь».
   ============================================================ */
@media (prefers-reduced-motion: reduce){
  .nv-root *, .nv-root *::before, .nv-root *::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .nv-scene{ transform:none; }
  /* Замість руху — колірна мітка: побачити чужу руку гість мусить усе одно. */
  .nv-point{ outline:3px solid var(--pink-500); outline-offset:3px; }
}