/* ═══════════════════════════════════════════════════════════════════════════
   ЕРГОНОМІКА — шар легібельності, навігації та онбордингу V1 «ГОРИЗОНТ»
   ───────────────────────────────────────────────────────────────────────────
   Це НЕ редизайн: мова V1 (палітра / типопара / мотив «меридіан») незмінна.
   Тут лише — ПОВІТРЯ (розрідження щільності), ДОРОГОВКАЗИ (де я / хлібні крихти
   / активний розділ), ОНБОРДИНГ (що це · для кого · як почати) і акценти CTA.

   Вантажиться ОСТАННІМ на кожній сторінці (після {page}.css) → делікатні overrides.
   Скоуп — за унікальними класами сторінок, тож немає між-сторінкового витоку.
   Джерело токенів — CORE V1 (--sp*, --neon, --mezha…); власних кольорів не вводимо.
   Персистентність: файл РУЧНИЙ, білдом не генерується; <link> вставляє білд-скрипт.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 0. РУХ: reduced-motion глушиться повністю (Г32-safe) ───────────────────── */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important}
}

/* ── 1. ДОРОГОВКАЗ «ДЕ Я»: активний розділ у шапці видно, не лише aria ──────── */
.nav a[aria-current=page]{color:var(--neon)}
.nav a[aria-current=page]::after{
  content:"";position:absolute;left:2px;right:2px;bottom:-7px;height:2px;
  background:var(--neon);border-radius:2px;
  box-shadow:0 0 10px -1px rgba(53,224,230,.6)}
.nav a{position:relative}

/* ── 2. ХЛІБНІ КРИХТИ (спільний компонент; працює на будь-якій сторінці) ────── */
.krosh{display:flex;align-items:center;gap:var(--sp2);margin:0;
  padding:var(--sp5) 0 0;font-family:var(--mono);font-size:.8rem;
  color:var(--prygl-2);flex-wrap:wrap;line-height:1.4}
.krosh a{color:var(--prygl);display:inline-flex;align-items:center;gap:6px;
  min-height:32px;transition:color var(--t-fast) var(--ease)}
.krosh a:hover{color:var(--neon)}
.krosh .ik{width:14px;height:14px}
.krosh .sep{opacity:.45}
.krosh .tut{color:var(--prygl)}

/* ── 3. ІНТРО-СМУГА ЕКРАНА «що це і що тут робити» (.pidkaz) ────────────────── */
.pidkaz{display:flex;gap:var(--sp4);align-items:flex-start;
  margin:var(--sp5) 0 0;padding:var(--sp4) var(--sp5);max-width:82ch;
  background:var(--neon-tlo);border:1px solid var(--mezha);
  border-left:3px solid var(--neon-liniya);border-radius:var(--r);
  box-shadow:var(--tin-1)}
.pidkaz > .ik{width:20px;height:20px;color:var(--neon);flex:none;margin-top:1px}
.pidkaz .txt{min-width:0}
.pidkaz p{color:var(--prygl);font-size:.92rem;line-height:1.62;margin:0}
.pidkaz p + p{margin-top:var(--sp2)}
.pidkaz b{color:var(--tilo);font-weight:600}
.pidkaz .kbd{font-family:var(--mono);font-size:.82rem;color:var(--neon)}

/* ── 4. ПІДКАЗКА ФІЛЬТРІВ (тихіша, під тулбаром/чипами) ─────────────────────── */
.filtr-pidkaz{display:flex;align-items:center;gap:var(--sp2);
  margin-top:var(--sp3);font-size:.82rem;color:var(--prygl-2);line-height:1.5}
.filtr-pidkaz .ik{width:15px;height:15px;color:var(--prygl-2);flex:none}

/* ── 5. ОНБОРДИНГ-СМУГА ЛЕНДИНГУ «Що це · Для кого · Як почати» (.onbord) ───── */
.onbord{position:relative}
.onbord .ob-hd{display:flex;align-items:center;gap:var(--sp3);margin-bottom:var(--sp6)}
.onbord .ob-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp5)}
.onbord .ob{position:relative;display:flex;flex-direction:column;gap:var(--sp2);
  padding:var(--sp6);border:1px solid var(--mezha);border-radius:var(--r-lg);
  background:linear-gradient(180deg,var(--poverhnya),var(--tlo-2));
  box-shadow:var(--tin-1);text-decoration:none;color:inherit;
  transition:transform var(--t) var(--ease),box-shadow var(--t) var(--ease),
             border-color var(--t) var(--ease)}
.onbord a.ob:hover{transform:translateY(-3px);box-shadow:var(--tin-2);
  border-color:var(--rebro)}
.onbord .ob::before{content:"";position:absolute;inset:0 0 auto 0;height:2px;
  background:linear-gradient(90deg,transparent,var(--neon-liniya),transparent);
  opacity:.55;transition:opacity var(--t) var(--ease)}
.onbord a.ob:hover::before{opacity:1}
.onbord .ob .num{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  color:var(--neon);border:1px solid var(--rebro);border-radius:var(--r-sm);
  padding:2px 7px;align-self:flex-start}
.onbord .ob .zn{width:26px;height:26px;color:var(--neon);margin-bottom:var(--sp1)}
.onbord .ob h3{color:var(--tilo);letter-spacing:.02em}
.onbord .ob p{color:var(--prygl);font-size:.92rem;line-height:1.62}
.onbord .ob .go{margin-top:auto;padding-top:var(--sp3);display:inline-flex;
  align-items:center;gap:6px;font-family:var(--mono);font-size:.78rem;
  font-weight:700;letter-spacing:.03em;color:var(--neon)}
.onbord .ob .go .ik{width:15px;height:15px}

/* ── 6. ПОВІТРЯ — розрідження щільності на функційних екранах ───────────────── */
/*     Універсальні (не спричиняють горизонтального overflow): інтерліньяж,   */
/*     вертикальні відступи й gap. Бокові padding — лише ≥900px.               */

/* читабельні абзаци дихають */
.blok-k p,.panel p,.aud-hd .txt p,.k-proj .k-summary,.pidkaz p{line-height:1.66}

/* КАТАЛОГ: фасети й картки розсунуто */
.facets{gap:var(--sp5)}
.fopt{min-height:34px}
#sitka{gap:var(--sp6)}
.k-proj{gap:var(--sp4)}
.k-meta{gap:var(--sp3);margin-top:var(--sp2)}

/* КАРТКА ПРОЄКТУ: сайдбар і секції дихають */
.side{gap:var(--sp6)}
.blok-k + .blok-k{margin-top:var(--sp5)}

/* КАБІНЕТИ: сітка/блоки/плитки/рядки таблиць дихають */
.blok{margin-bottom:var(--sp10)}
.taily{margin-bottom:var(--sp10)}
.tabl-scroll table td,.tabl-scroll table th{
  padding-top:var(--sp3);padding-bottom:var(--sp3)}

/* бокові padding — тільки на широкому, щоб на 375 нічого не «поїхало» */
@media (min-width:900px){
  .panel{padding:var(--sp8)}
  .blok-k{padding:var(--sp8) var(--sp8) var(--sp8) calc(var(--sp8) + 4px)}
  .k-proj{padding:var(--sp6)}
  .kab-grid{gap:var(--sp10)}
}

/* ── 7. АДАПТИВ компонентів ергономіки ─────────────────────────────────────── */
@media (max-width:760px){
  .onbord .ob-grid{grid-template-columns:1fr}
  .pidkaz{padding:var(--sp4)}
}

/* ── 8. ЦІЛІСНИЙ АТМОСФЕРНИЙ ГРЕЙН — спільне «дороге» тло всього порталу ─────── */
/*   ОДИН фіксований overlay на весь сайт (цей файл вантажать усі 10 сторінок    */
/*   → калібрування в ОДНІЙ точці, тло ідентичне скрізь). Статичний data-URI     */
/*   feTurbulence-шум, self-contained (0 CDN, CSP-safe), reduced-motion-байдужий */
/*   (нема анімації). Кладеться ПІД контентом через z-index:-1: пофарбоване тло  */
/*   body (--tlo) → грейн → увесь контент вище. Тож грейн НЕ над текстом/кліками */
/*   (pointer-events:none + за z-порядком нижче), а Leaflet-canvas карти лежить у */
/*   нормальному потоці ВИЩЕ z-index:-1 і непрозорий — мапа лишається чіткою.    */
/*                                                                               */
/*   КАЛІБРУВАННЯ (головне): opacity .022, mix-blend soft-light. Це нижче за вже  */
/*   наявне ЗОННЕ зерно в ілюстраціях (overlay .045–.05 на hero/tab-scene/tarel  */
/*   /кабінетних сценах index/poslugy/gromady/кабінетів) — базовий шар не дає їм  */
/*   «подвоєння»: він проступає лише крізь прозорі зони тла, а сцени зі своїм     */
/*   непрозорим тлом лежать вище й перекривають його. soft-light м'якший за       */
/*   overlay → на #1B1C1F дає тонку атмосферу без просідання контрасту тексту.    */
/*   Палітра V1 незмінна → fatigue_budget лишається PASS; render_qa контраст ок.  */
:root{
  --grejn-fon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='gf'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23gf)'/%3E%3C/svg%3E");
  --grejn-syla:.022}
body::before{
  content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background-image:var(--grejn-fon);background-size:200px 200px;background-repeat:repeat;
  opacity:var(--grejn-syla);mix-blend-mode:soft-light}
@media (prefers-reduced-motion: reduce){body::before{opacity:var(--grejn-syla)}}

/* ── 9. АТМОСФЕРА-БЕНД — прийом героя (сяйво + mesh-сітка + віньєтка), tunable ───
   Багата атмосфера, що жила ЛИШЕ на .hero головної (подвійне радіальне сяйво +
   mesh-сітка 44px під радіальною маскою + м'яка нижня віньєтка), винесена у ДВІ
   НЕЗАЛЕЖНІ утиліти й розкочена по високоцінних бендах усіх сторінок.
     .atmo-glow → шар сяйва+віньєтки у ::before
     .atmo-mesh → mesh-сітка у ::after
   Розділено навмисно: бенд зі СВОЄЮ ДНК-текстурою (katalog-сканлайни живуть на
   ::after, kartka-блюпринт і kabinet-прилад — на обох псевдо) бере ЛИШЕ ВІЛЬНИЙ
   псевдоелемент — без клоберу різностилля (DIRECTION дод. A/B). Обидва шари
   pointer-events:none, z-index:0; isolation тримає ефект у власному контексті;
   реальний контент піднято z-index:1 → шар НЕ над текстом/кліками і НЕ над
   Leaflet (мапа лежить у власному .canvas вище й непрозора). Фон-псевдо box-bounded
   (inset:0) → без overflow:hidden (щоб не різати тіні вкладених панелей). Токени V1
   (neon 53,224,230 · plazma 154,134,255) — без нових кольорів; палітра незмінна →
   fatigue_budget лишається PASS. Різнобарвність по секціях — модифікатори .atmo--*
   (кут / акцент cyan↔plazma / щільність сітки). Reduced-motion байдужий (нема руху). */
.atmo-glow,.atmo-mesh{position:relative;isolation:isolate}
.atmo-glow>*,.atmo-mesh>*{position:relative;z-index:1}
.atmo-glow{
  /* сяйво голосніше — на рівні .hero::before (cyan .22 / plazma .20), ширший спред */
  --atmo-c1:rgba(53,224,230,.22);--atmo-c2:rgba(154,134,255,.20);
  --atmo-s1:54% 66%;--atmo-p1:78% 8%;--atmo-s2:48% 60%;--atmo-p2:18% 92%;
  --atmo-vin:rgba(20,21,24,.42)}
.atmo-glow::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(var(--atmo-s1) at var(--atmo-p1),var(--atmo-c1),transparent 66%),
    radial-gradient(var(--atmo-s2) at var(--atmo-p2),var(--atmo-c2),transparent 66%),
    linear-gradient(180deg,transparent,var(--atmo-vin))}
/* mesh тихіше: слабший колір, більша клітина, нижча непрозорість, сильніший fade + мʼякий блюр —
   щоб не було різкої регулярної сітки, що ріже око */
.atmo-mesh{--atmo-mesh-c:rgba(174,239,242,.028);--atmo-grid:64px;--atmo-mesh-op:.32;
  --atmo-mask:120% 100% at 60% 0}
.atmo-mesh::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:var(--atmo-mesh-op);filter:blur(.4px);
  background-image:
    linear-gradient(var(--atmo-mesh-c) 1px,transparent 1px),
    linear-gradient(90deg,var(--atmo-mesh-c) 1px,transparent 1px);
  background-size:var(--atmo-grid) var(--atmo-grid);
  -webkit-mask-image:radial-gradient(var(--atmo-mask),#000,transparent 58%);
  mask-image:radial-gradient(var(--atmo-mask),#000,transparent 58%)}
/* модифікатори різнобарвності (кожен бенд варіює кут/акцент/щільність) */
.atmo--split{--atmo-c1:rgba(53,224,230,.22);--atmo-c2:rgba(154,134,255,.20);--atmo-p1:82% 6%;--atmo-p2:12% 94%}
.atmo--cyan{--atmo-c1:rgba(53,224,230,.24);--atmo-c2:rgba(53,224,230,.10);--atmo-p1:84% 6%;--atmo-p2:14% 96%;--atmo-mask:120% 100% at 72% 0}
.atmo--plazma{--atmo-c1:rgba(154,134,255,.24);--atmo-c2:rgba(53,224,230,.12);--atmo-p1:16% 6%;--atmo-p2:88% 92%;--atmo-mask:120% 100% at 30% 0}
.atmo--calm{--atmo-c1:rgba(53,224,230,.18);--atmo-c2:rgba(154,134,255,.14);--atmo-grid:72px;--atmo-mesh-op:.24;--atmo-mask:130% 110% at 50% 0}
.atmo--warm{--atmo-c1:rgba(154,134,255,.20);--atmo-c2:rgba(53,224,230,.16);--atmo-p1:88% 10%;--atmo-p2:8% 88%;--atmo-mask:120% 100% at 46% 0}
/* адаптив: на вузькому трохи тихіше й дрібніше */
@media (max-width:760px){
  .atmo-glow{--atmo-c1:rgba(53,224,230,.18);--atmo-c2:rgba(154,134,255,.16)}
  .atmo-mesh{--atmo-grid:48px;--atmo-mesh-op:.26}
}

/* ═══════════════════════════════════════════════════════════════════════════
   СВІТЛА ТЕМА (data-theme="light") — 13.09.2026
   ───────────────────────────────────────────────────────────────────────────
   Дефолт лишається DARK (bare :root у page-CSS). Світла вмикається атрибутом
   data-theme="light" на <html> (праймінг у seo_head.html без FOUC; перемикач у
   шапці, персист localStorage['tema']). Оверрайд ТІЛЬКИ токенів + точкове
   приглушення dark-only ефектів (mix-blend:screen, атмосферні неон-радіали,
   важкі чорні тіні). Мова V1 незмінна; білий+графіт+бірюза, БЕЗ бежевого.
   Вантажиться ОСТАННІМ → перебиває :root page-CSS коректно.
   ═══════════════════════════════════════════════════════════════════════════ */
:root[data-theme="light"]{
  color-scheme:light;
  /* поверхні: off-white сторінка, білі картки, графітовий текст */
  --tlo:#F4F6F8;--tlo-2:#EAEEF2;--poverhnya:#FFFFFF;--poverhnya-2:#F0F3F6;
  --sklo:rgba(255,255,255,.82);
  --tilo:#161C22;--prygl:#48535E;--prygl-2:#68727D;
  /* акценти: глибша бірюза (контраст на білому), решта — темніші відповідники */
  --neon:#0B8790;--plazma:#6A4CE0;--poperedzhennya:#B26A08;--krytychne:#D23B3B;
  --neon-tlo:color-mix(in oklab,var(--neon) 12%,#fff);
  --neon-liniya:color-mix(in oklab,var(--neon) 55%,transparent);
  --amber-tlo:color-mix(in oklab,var(--poperedzhennya) 13%,#fff);
  --kryt-tlo:color-mix(in oklab,var(--krytychne) 11%,#fff);
  --plazma-tlo:color-mix(in oklab,var(--plazma) 11%,#fff);
  /* межі/ребра: графіт-бірюза замість світлого cyan (той на білому невидимий) */
  --mezha:rgba(18,38,44,.15);--mezha-m:rgba(18,38,44,.09);
  --rebro:color-mix(in oklab,var(--neon) 42%,transparent);
  /* глиф/текст НА бірюзовому бейджі/кнопці — тепер світлий (бірюза потемніла) */
  --na-neoni:#F2FEFF;
  /* тіні: м'які сірі замість чорних+неон-глоу */
  --tin-1:0 1px 2px rgba(18,28,38,.08),0 0 0 1px var(--mezha-m);
  --tin-2:0 2px 10px rgba(18,28,38,.09),0 18px 40px -24px rgba(11,135,144,.18),0 0 0 1px var(--mezha-m);
  --tin-neon:0 0 0 1px var(--rebro),0 0 18px -7px rgba(11,135,144,.28);
}
/* атмосфера (керована --atmo-*): на світлому — ледь відчутні тінти, не муть */
:root[data-theme="light"] .atmo-glow{
  --atmo-c1:rgba(11,135,144,.055);--atmo-c2:rgba(106,76,224,.045);
  --atmo-vin:rgba(120,132,144,.05)}
:root[data-theme="light"] .atmo-mesh{--atmo-mesh-c:rgba(18,38,44,.05);--atmo-mesh-op:.5}
:root[data-theme="light"] .atmo--split,
:root[data-theme="light"] .atmo--cyan,
:root[data-theme="light"] .atmo--plazma,
:root[data-theme="light"] .atmo--warm,
:root[data-theme="light"] .atmo--calm{
  --atmo-c1:rgba(11,135,144,.055);--atmo-c2:rgba(106,76,224,.045)}
/* dark-only screen-оверлеї (зникають/чорніють на світлому) — гасимо */
:root[data-theme="light"] .dyf-viz::before,
:root[data-theme="light"] .hero::after{opacity:0}
/* важкі декоративні тіні/глоу, захардкоджені під темну — м'якші на світлому */
:root[data-theme="light"] .dyf-viz{box-shadow:var(--tin-2)}
:root[data-theme="light"] .hud{box-shadow:var(--tin-1)}
:root[data-theme="light"] .hero::before{opacity:.5}
/* карта-прев'ю на головній: inline-SVG має захардкоджену темну поверхню (#mg градієнт),
   графітову сітку та світлі підписи — на світлому це темний блок. CSS fill/stroke
   перебиває inline-атрибути → адаптуємо поверхню/сітку/підписи, вузли-неон лишаємо. */
:root[data-theme="light"] .mapa-wrap svg rect[fill^="url"]{fill:var(--tlo-2)}
:root[data-theme="light"] .mapa-wrap svg [stroke^="rgba(174"]{stroke:rgba(18,38,44,.06)}
:root[data-theme="light"] .mapa-wrap svg text[fill="#8A9099"]{fill:var(--prygl-2)}
/* світлі підписи В ІЛЮСТРАЦІЯХ (inline-SVG, захардкоджені #EDEFF2/#C2C8CF) — на світлому
   невидимі. Усі такі — текст (не фігури, перевірено census), тож глобально робимо їх
   читабельними: #EDEFF2→основний текст, #C2C8CF→приглушений. Контур свіжості, карта тощо. */
:root[data-theme="light"] svg text[fill="#EDEFF2"],
:root[data-theme="light"] svg g[fill="#EDEFF2"] text{fill:var(--tilo)}
:root[data-theme="light"] svg text[fill="#C2C8CF"],
:root[data-theme="light"] svg g[fill="#C2C8CF"] text{fill:var(--prygl)}

/* ── ПЕРЕМИКАЧ ТЕМИ (шапка, біля UA/EN) ─────────────────────────────────────── */
.tema-tgl{display:inline-grid;place-items:center;width:40px;height:40px;flex:none;
  border:1px solid var(--mezha);border-radius:var(--r-sm);background:transparent;
  color:var(--prygl);cursor:pointer;padding:0;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),
    background var(--t-fast) var(--ease)}
.tema-tgl:hover{color:var(--neon);border-color:var(--rebro);background:var(--neon-tlo)}
.tema-tgl:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
.tema-tgl .ik{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;
  stroke-linecap:round;stroke-linejoin:round}
.tema-tgl .ik-moon{display:none}
:root[data-theme="light"] .tema-tgl .ik-sun{display:none}
:root[data-theme="light"] .tema-tgl .ik-moon{display:block}

/* ── ЗАГОЛОВОК ПОЗИЦІОНУВАННЯ: рівні переноси (13.09) ───────────────────────────
   Було max-width:22ch без балансування → «ПРАЙМ-ІНТЕГРАТОР» рвалось, «↔ КАПІТАЛ»»
   відривалось. text-wrap:balance вирівнює довжину рядків; hyphens:none — без переносів;
   трохи ширше поле. Розмітка доповнює: нерозривний дефіс + nbsp навколо «↔». */
.pozytsiya .big{text-wrap:balance;max-width:26ch;hyphens:none}

/* ═══════════════════════════════════════════════════════════════════════════
   МОБІЛЬНИЙ ШАР (13.09.2026) — глибокий прохід під вузький екран
   ───────────────────────────────────────────────────────────────────────────
   Пастки, знайдені аудитом на 375px: (1) навігація і перемикач мови зникали на
   мобільному БЕЗ заміни; (2) каталог давав 300px overflow — grid `1fr` не стискався
   нижче min-content підписів фільтрів; (3) тач-таргети ~38px. Виправлено тут (єдина
   точка, вантажиться останньою). Дефолт-десктоп не чіпаємо.
   ═══════════════════════════════════════════════════════════════════════════ */

/* hdr-nav: на ДЕСКТОПІ прозорий контейнер (діти течуть у flex шапки — розкладка
   ідентична попередній); на МОБІЛЬНОМУ — випадне меню під гамбургером. */
.hdr-nav{display:contents}
.burger{display:none}
.burger .b-close{display:none}

@media (max-width:900px){
  /* гамбургер видно, штовхаємо праворуч */
  .burger{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;
    margin-left:auto;border:1px solid var(--mezha);border-radius:var(--r-sm);
    background:transparent;color:var(--tilo);cursor:pointer;padding:0}
  .burger:hover{border-color:var(--rebro);color:var(--neon)}
  .burger:focus-visible{outline:2px solid var(--neon);outline-offset:2px}
  .burger svg{width:22px;height:22px;stroke:currentColor;stroke-width:2;fill:none;
    stroke-linecap:round;stroke-linejoin:round}
  .shapka.menu-open .burger .b-open{display:none}
  .shapka.menu-open .burger .b-close{display:block}
  /* меню-панель: прихована, розкривається класом .menu-open */
  .hdr-nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
    align-items:stretch;gap:var(--sp2);background:var(--poverhnya);
    border-bottom:1px solid var(--mezha);box-shadow:var(--tin-2);
    padding:var(--sp4);z-index:39;max-height:calc(100dvh - 66px);overflow-y:auto}
  .shapka.menu-open .hdr-nav{display:flex}
  .hdr-nav .roztyah{display:none}
  /* навігація — вертикальний список великих пунктів */
  .hdr-nav .nav{display:flex;flex-direction:column;gap:2px;margin:0;width:100%}
  .hdr-nav .nav a{min-height:48px;display:flex;align-items:center;width:100%;
    padding:0 var(--sp4);border-radius:var(--r-sm);font-size:1rem;color:var(--tilo)}
  .hdr-nav .nav a:hover{background:var(--neon-tlo)}
  .hdr-nav .nav a[aria-current=page]{background:var(--neon-tlo);color:var(--neon)}
  .hdr-nav .nav a[aria-current=page]::after{display:none}   /* без десктоп-підкреслення */
  /* мова — показати (десктоп ховав <600px), на всю ширину */
  .hdr-nav .perem{display:inline-flex;width:100%;min-height:44px}
  .hdr-nav .perem a{flex:1;justify-content:center;min-height:44px}
  /* тема + вхід — на всю ширину, читабельні */
  .hdr-nav .tema-tgl{width:100%;height:48px}
  .hdr-nav .kab{width:100%;justify-content:center;min-height:48px;margin-top:var(--sp1)}
  .hdr-nav .kab .kab-txt{display:inline}          /* показати підпис «Увійти» в меню */
  .brend small{display:none}                       /* компактний бренд у шапці */
}

/* ── КАТАЛОГ: анти-overflow (корінь — grid `1fr` не стискався нижче min-content) ── */
@media (max-width:1024px){
  .katalog-layout{grid-template-columns:minmax(0,1fr)}
  .facets-grid{grid-template-columns:minmax(0,1fr)}   /* один стовпчик акордеонів */
}
@media (max-width:640px){
  .sitka{grid-template-columns:minmax(0,1fr)}          /* 1 картка в ряд */
  .stat-smuga{grid-template-columns:repeat(2,minmax(0,1fr))}
}
.fopt,.fnm{min-width:0}
.fnm{overflow-wrap:anywhere}

/* ── ТАЧ-ТАРГЕТИ ≥44px на мобільному (було ~38) ─────────────────────────────── */
@media (max-width:760px){
  .perem a,.viewseg a,.viewseg-a,.ftabs button,.subtabs button,.fopt,
  .btn.mala,.reset-filter,.obl-index .oi{min-height:44px}
  .fopt{min-height:44px}
  .obl-index .oi{padding-top:6px;padding-bottom:6px}
}

/* ── МОБІЛЬНІ ФІКСИ КОМПОНЕНТІВ (з реальних скрінів iPhone, 13.09) ───────────── */
/* 1) Контур свіжості: SVG мав min-width:300px → на ~247px контейнері обрізався справа.
      viewBox масштабує сам, тож знімаємо min-width — loop вписується цілком. */
@media (max-width:640px){
  .kontur-scroll svg{min-width:0}
}
/* 2) Карта-прев'ю: два абсолютні оверлеї на короткій карті накладались. Readout
      «наведіть на вузол» некорисний на тачі (нема hover) → ховаємо; легенду+кнопку
      робимо статичними ПІД картою; кнопку — на всю ширину. */
@media (max-width:640px){
  .mapa-readout{display:none}
  .mapa-over{position:static;flex-direction:column;align-items:stretch;gap:var(--sp3);
    left:auto;right:auto;bottom:auto;padding:var(--sp4) var(--sp4) 0}
  .mapa-over .btn{width:100%;justify-content:center;min-height:44px}
  .mapa-names{padding:0 var(--sp4) var(--sp4)}
  .mapa-leg{gap:var(--sp3) var(--sp4)}
}

/* ── ДЕКОР-АКЦЕНТИ на мобільному: НЕ ховаємо, а зменшуємо+приглушуємо ─────────────
   .atlas-grat (тризуб) / .karta-grat (мапа) / .katalog-grat (місто) / .poslugy-grat
   (шестерні) — абсолютні top-right акценти. На мобільному текст на всю ширину, тож
   робимо їх маленьким приглушеним кутовим акцентом ЗА текстом (лишаються, але заголовок
   читається; лежать нижче контенту за z-index через .atmo-glow>*). */
@media (max-width:640px){
  .atlas-grat,.karta-grat,.katalog-grat,.poslugy-grat{
    width:82px!important;opacity:.38!important;top:6px!important;right:6px!important;z-index:0}
}

/* ── ДЕМО-ПЕРЕМИКАЧ РОЛЕЙ у кабінеті (показова платформа) ────────────────────── */
.demo-roles{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.7rem}
.demo-roles .dr-lb{color:var(--prygl-2);letter-spacing:.08em}
.demo-roles a{min-width:30px;min-height:34px;display:inline-grid;place-items:center;padding:0 6px;
  border:1px solid var(--mezha);border-radius:var(--r-sm);color:var(--prygl);text-decoration:none;font-weight:700;
  transition:color var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease),background var(--t-fast) var(--ease)}
.demo-roles a:hover{border-color:var(--rebro);color:var(--neon);background:var(--neon-tlo)}
@media (max-width:600px){.demo-roles .dr-lb{display:none}}