/* ==================================================================
   ГІС Коблівської сільської територіальної громади — сторінка входу.
   Коригування масштабу/пропорцій/типографіки/адаптиву (без зміни концепції).
   SCOPED body.login-page. Логіку авторизації НЕ змінює.
   ================================================================== */

body.login-page{
  --ink:#0b2f4a; --muted:#5b6b78; --line:#dde5ec;
  --brand:#1685a8; --brand-d:#0f6d8c; --ring:rgba(22,133,168,.18);
  --panel:#ffffff; --err:#c0392b; --accent:#ffd76a;
  --pad:clamp(16px,4vw,48px);
  margin:0; min-height:100vh; overflow-x:hidden; color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Inter","Helvetica Neue",Arial,sans-serif;
  background:#08324b;
}

/* ---------- фон: слайдер + багатошаровий м'який оверлей ----------
   SSR: шаблон рендерить лише .s1; слайди 2–8 додає login.js після load (лінива загрузка, №7).
   Клас .run на #kob-bg стартує анімацію ВСІХ слайдів з однієї миті — таймлайни синхронні,
   темної «дірки» на стику слайдів немає (№14): крос-фейд 12.5%→14.5% = наступний слайд
   в'їжджає рівно тоді, коли поточний згасає. Фони — класами (без inline-стилів → чистий CSP). */
#kob-bg{position:fixed; inset:0; z-index:0; overflow:hidden; background:#08324b;}
#kob-bg .slide{position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;}
#kob-bg .slide.s1{background-image:url('slide1.jpg')} #kob-bg .slide.s2{background-image:url('slide2.jpg')}
#kob-bg .slide.s3{background-image:url('slide3.jpg')} #kob-bg .slide.s4{background-image:url('slide4.jpg')}
#kob-bg .slide.s5{background-image:url('slide5.jpg')} #kob-bg .slide.s6{background-image:url('slide6.jpg')}
#kob-bg .slide.s7{background-image:url('slide7.jpg')} #kob-bg .slide.s8{background-image:url('slide8.jpg')}
/* до старту циклу видно перший слайд */
#kob-bg:not(.run) .slide.s1{opacity:1;}
#kob-bg.run .slide{animation:kobFade 48s infinite;}
/* перший слайд у циклі стартує вже видимим і повертається наприкінці кола */
#kob-bg.run .slide.s1{animation-name:kobFadeFirst;}
#kob-bg::after{content:""; position:absolute; inset:0; background:
  linear-gradient(90deg, rgba(9,35,54,.72) 0%, rgba(9,35,54,.42) 34%, rgba(9,35,54,.08) 62%, rgba(9,35,54,.12) 100%),
  linear-gradient(0deg, rgba(4,25,40,.32) 0%, rgba(4,25,40,0) 42%);}
@keyframes kobFade{0%{opacity:0}2%{opacity:1}12.5%{opacity:1}14.5%{opacity:0}100%{opacity:0}}
@keyframes kobFadeFirst{0%{opacity:1}12.5%{opacity:1}14.5%{opacity:0}97%{opacity:0}100%{opacity:1}}
#kob-bg .slide:nth-child(1){animation-delay:0s}   #kob-bg .slide:nth-child(2){animation-delay:6s}
#kob-bg .slide:nth-child(3){animation-delay:12s}  #kob-bg .slide:nth-child(4){animation-delay:18s}
#kob-bg .slide:nth-child(5){animation-delay:24s}  #kob-bg .slide:nth-child(6){animation-delay:30s}
#kob-bg .slide:nth-child(7){animation-delay:36s}  #kob-bg .slide:nth-child(8){animation-delay:42s}
/* WCAG 2.2.2: коли користувач працює з формою — слайдер на паузі (№13) */
body.login-page:has(.form-control:focus) #kob-bg .slide{animation-play-state:paused;}

/* ---------- топбар: мова UA|EN + пауза слайдера (вгорі праворуч) ---------- */
#kob-topbar{position:fixed; top:18px; right:clamp(16px,3vw,48px); z-index:30;
  display:flex; align-items:center; gap:10px;}
#kob-lang{
  display:inline-flex; align-items:center; height:36px; border-radius:10px; overflow:hidden;
  border:1px solid rgba(255,255,255,.35); background:rgba(9,35,54,.7);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(0,10,20,.25);}
/* (v22) правило для legacy-режиму прибрано разом із legacy-гілкою login.js:
   #kob-lang існує лише в нашому SSR-шаблоні, тож :not(.kob-ssr) вже не міг збігтися */
/* пауза слайдера (WCAG 2.2.2, аудит р.3 С-1) */
#kob-pause{height:36px; min-width:36px; padding:0 10px; border-radius:10px; cursor:pointer;
  border:1px solid rgba(255,255,255,.35); background:rgba(9,35,54,.7); color:rgba(255,255,255,.92);
  font-size:15px; line-height:1;
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  box-shadow:0 4px 18px rgba(0,10,20,.25);}
#kob-pause:hover{background:rgba(255,255,255,.18);}
#kob-pause:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}
#kob-bg.kob-paused .slide{animation-play-state:paused !important;}
#kob-lang .kob-lang-btn{border:0; background:transparent; color:rgba(255,255,255,.85);
  font:inherit; font-size:12.5px; font-weight:700; letter-spacing:.03em;
  padding:0 12px; height:100%; cursor:pointer; transition:background .15s, color .15s;}
#kob-lang .kob-lang-btn:first-child{border-right:1px solid rgba(255,255,255,.3);}
#kob-lang .kob-lang-btn:hover{background:rgba(255,255,255,.16); color:#fff;}
#kob-lang .kob-lang-btn.on{background:rgba(255,255,255,.92); color:var(--ink); cursor:default;}
#kob-lang .kob-lang-btn:focus-visible{outline:2px solid var(--accent); outline-offset:-2px;}

/* ---------- каркас: єдина сітка 1440 ---------- */
#kob-layout{position:relative; z-index:5; min-height:100vh; display:flex; flex-direction:column;}
.kob-main{flex:1 0 auto; min-height:100vh; box-sizing:border-box;
  width:calc(100% - 96px); max-width:1440px; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(400px,460px);
  gap:clamp(32px,4vw,72px); align-items:stretch; padding:0 0 24px;}

/* ---------- ЛІВА колонка: бренд → партнери → copyright ---------- */
#kob-left{display:flex; flex-direction:column; color:#fff;
  text-shadow:0 2px 16px rgba(0,10,20,.5);}
.brand-content{flex:0 0 auto; padding-top:clamp(72px,9vh,120px);}
.brand-content .crest{height:clamp(124px,10vw,180px); width:auto; display:block; margin-bottom:24px;
  filter:drop-shadow(0 8px 20px rgba(0,0,0,.45));}
.brand-content h1{margin:0; max-width:560px; font-weight:750;
  font-size:clamp(38px,2.5vw,52px); line-height:1.08; letter-spacing:-.025em;}
.brand-content .region{margin:14px 0 0; font-size:18px; line-height:1.4; font-weight:500; opacity:.96;}
.brand-content .system{margin:12px 0 0; font-size:18px; line-height:1.4; font-weight:650; color:var(--accent);}
.brand-content .desc{margin:10px 0 0; max-width:560px; font-size:16px; line-height:1.55; font-weight:400; opacity:.94;}

.partners{margin-top:auto; padding-top:36px; display:flex; align-items:flex-end; gap:24px; flex-wrap:wrap;}
.partners .pl{flex:1 0 100%; font-size:13px; letter-spacing:.4px; text-transform:uppercase; opacity:.85; margin-bottom:-6px;}
.partners a.polaris{display:inline-block; line-height:0;}
.partners img.pol{height:clamp(34px,3.6vw,46px); width:auto;}
.partners img.don{height:clamp(24px,2.6vw,32px); width:auto; opacity:.96;}
.partners a.polaris:focus-visible{outline:3px solid var(--accent); outline-offset:4px; border-radius:6px;}

/* №15 → v16: підкладку-плашку ПРИБРАНО (Ернест: «якісь штуки обведені, вони не потрібні»).
   Читабельність на світлих слайдах тримає щільна двошарова тінь тексту, а не прямокутник.
   padding по горизонталі = 0, щоб текст став в одну лінію з гербом і заголовком. */
.copyright{flex:0 0 auto; margin-top:22px; margin-bottom:14px; padding:5px 0; font-size:12px; line-height:1.4;
  align-self:flex-start; background:none; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.7);}

/* ---------- ПРАВА колонка: картка + підпис ---------- */
#kob-right{display:flex; flex-direction:column; justify-content:center; align-items:flex-end;
  padding-top:clamp(40px,7vh,90px); padding-bottom:20px;}
body.login-page .login-box{width:min(100%,460px); margin:0;}
body.login-page .login-logo{display:none !important;}

/* v17: картка НАПІВПРОЗОРА (~40% прозорості, на прохання Ернеста) — «скляна» на тлі фото.
   Прозорість сама по собі вбила б читабельність на світлих слайдах, тому фон під карткою
   РОЗМИВАЄМО (backdrop-filter): розмите тло рівномірне, тому контраст тексту передбачуваний.
   Поля вводу лишаємо непрозоро-білими — вони мають читатись однозначно. */
body.login-page .login-box-body{
  background:rgba(255,255,255,.6);
  backdrop-filter:blur(22px) saturate(140%); -webkit-backdrop-filter:blur(22px) saturate(140%);
  border:1px solid rgba(255,255,255,.55); border-radius:22px;
  box-shadow:0 24px 70px rgba(10,37,58,.28); padding:42px 44px;
  animation:kobCard .2s ease-out both;}
/* Safari/Firefox без підтримки backdrop-filter: лишаємо майже непрозорий фон, щоб текст не «поплив» */
@supports not ((backdrop-filter:blur(2px)) or (-webkit-backdrop-filter:blur(2px))){
  body.login-page .login-box-body{background:rgba(255,255,255,.93);}
}
/* Через 40% прозорості крізь картку просвічує фото, і другорядний сірий текст (--muted #5b6b78)
   на темних слайдах ставав блідим. Робимо його темнішим САМЕ в картці — контраст повертається
   на будь-якому кадрі, вигляд «скла» лишається. */
body.login-page .login-box-body #kob-hint,
body.login-page .login-box-body #kob-help,
body.login-page .login-box-body .kob-reset{color:#2b4658;}
@keyframes kobCard{from{opacity:0; transform:translateY(8px)} to{opacity:1; transform:none}}

body.login-page .login-box-msg{margin:0; padding:0; text-align:left; text-transform:none;
  font-size:28px; line-height:1.2; font-weight:750; letter-spacing:-.02em; color:var(--ink);}
#kob-hint{margin:10px 0 30px; color:var(--muted); font-size:14px; line-height:1.5;}

.kob-field{margin:0 0 19px;}
.kob-field > label{display:block; margin:0 0 8px; font-size:14px; line-height:1.4; font-weight:600; color:var(--ink);}
body.login-page .form-group.has-feedback .glyphicon{display:none !important;}
/* ⚠️ v18: поля успадковували box-sizing:content-box (глобального reset немає), тому padding 2×16
   і рамка ДОДАВАЛИСЬ до 100% ширини: поле виходило 384×57.6, а кнопка (border-box) — 350×56.
   Візуально поля «вилазили» за кнопку праворуч на 33 px і були вищі. border-box вирівнює точно. */
body.login-page .form-control{
  box-sizing:border-box;
  width:100%; min-height:56px; height:56px; padding:0 16px; font-size:16px; line-height:1.4; color:var(--ink);
  border:1px solid #8296a5; border-radius:12px; background:#fff; box-shadow:none;
  transition:border-color .15s, box-shadow .15s;}   /* #8296a5 ≈3.1:1 — WCAG 1.4.11 (р.3 С-4) */
body.login-page .form-control::placeholder{color:#9aa7b1;}
body.login-page .form-control:hover{border-color:#9fb0bd;}
body.login-page .form-control:focus{border-color:var(--brand); box-shadow:0 0 0 4px var(--ring); outline:none;}
body.login-page .form-control:disabled{background:#f1f4f6; color:#9aa7b1;}
body.login-page .form-control:-webkit-autofill{-webkit-text-fill-color:var(--ink);
  -webkit-box-shadow:0 0 0 1000px #fff inset; box-shadow:0 0 0 1000px #fff inset;}

.kob-pass{position:relative;}
.kob-pass .form-control{padding-right:96px;}
/* ⚠️ БУЛО top:50% + translateY(-50%) — але контейнер .kob-pass містить ЩЕ Й <label>,
   тому «середина контейнера» лежала вище середини самого поля і кнопка «Показати»
   з'їжджала вгору (Ернест: «пароль-показати кудись двинулося»).
   Прив'язуємо до НИЗУ контейнера — це рівно поле — і центруємо всередині його висоти. */
.kob-toggle{position:absolute; right:6px; top:auto; bottom:0; transform:none;
  height:56px; min-width:44px; padding:0 12px; border:0; background:transparent; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--brand-d); font-size:13px; font-weight:600; border-radius:8px;}
.kob-toggle:hover{background:#eef4f7;}
.kob-toggle:focus-visible{outline:3px solid var(--brand-d); outline-offset:2px;}

/* індикатор Caps Lock (підказка під полем пароля) */
#kob-caps{margin:-12px 0 16px; font-size:13px; font-weight:600; color:#8a6d1a;}
#kob-caps::before{content:"⇪ ";}

body.login-page .alert-danger{background:#fdecea; border:1px solid #f5c6c0; color:var(--err);
  border-radius:12px; padding:12px 14px; font-size:14.5px; margin:0 0 18px;}
body.login-page .alert-danger h4,
body.login-page .alert-danger .kob-err-title{margin:0 0 6px; font-size:15px; font-weight:700;}

body.login-page .form-group.recaptcha{margin:0 0 16px;}
body.login-page .form-group.recaptcha:empty{display:none;}

body.login-page .btn-primary{
  width:100%; min-height:56px; margin-top:22px; border:0; border-radius:12px;
  background:#137795; color:#fff; font-size:16px; line-height:1; font-weight:700; letter-spacing:.1px;
  text-transform:none; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:10px;
  transition:background .15s, transform .05s, box-shadow .15s;}   /* #137795 = 4.9:1 (AA), №10 */
body.login-page .btn-primary:hover{background:var(--brand-d);}
body.login-page .btn-primary:active{transform:translateY(1px);}
body.login-page .btn-primary:focus-visible{outline:3px solid var(--brand-d); outline-offset:3px;}
body.login-page .btn-primary:disabled{background:#9fc3d1; cursor:default;}
/* «Виконується вхід…» — статус, який треба ПРОЧИТАТИ: тримаємо контрастний фон (р.3 С-3) */
body.login-page .btn-primary.is-loading:disabled{background:#137795;}
.btn-primary.is-loading::before{content:""; width:18px; height:18px; border-radius:50%;
  border:2px solid rgba(255,255,255,.5); border-top-color:#fff; animation:kobSpin .8s linear infinite;}
@keyframes kobSpin{to{transform:rotate(360deg)}}

#kob-help{margin:28px 0 0; font-size:13px; line-height:1.5; color:var(--muted);}
#kob-help a{color:var(--brand-d); font-weight:600; text-decoration:underline;}
#kob-help a:hover{color:var(--brand);}
#kob-help a:focus-visible{outline:3px solid var(--brand-d); outline-offset:2px; border-radius:4px;}
.kob-reset{margin:16px 0 0; font-size:13px;}
.kob-reset a{color:var(--brand-d); font-weight:600;}

body.login-page .main-footer{display:none !important;}

/* v16: плашку прибрано (див. .copyright). padding по горизонталі = 0 → краї підпису
   збігаються з краями картки входу над ним. */
/* після прибирання «Технічної підтримки» лишився один підпис — тримаємо його праворуч,
   врівень із правим краєм картки (було space-between на два елементи) */
.kob-subfooter{width:min(100%,460px); margin:16px 0 0; padding:6px 0; box-sizing:border-box;
  display:flex; justify-content:flex-end; gap:14px;
  flex-wrap:wrap; font-size:12px; line-height:1.4; color:rgba(255,255,255,.92);
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 14px rgba(0,0,0,.7);
  background:none; border-radius:0; backdrop-filter:none; -webkit-backdrop-filter:none;}
.kob-subfooter a{color:rgba(255,255,255,.92); text-decoration:none; border-bottom:1px solid rgba(255,255,255,.4);}
.kob-subfooter a:hover{color:#fff; border-color:#fff;}
.kob-subfooter a:focus-visible{outline:2px solid var(--accent); outline-offset:2px;}

/* v16: НИЖНІ ПІДПИСИ НА ОДНІЙ ЛІНІЇ (Ернест: «вирівняти всі ці блоки, вони криві»).
   Було: копірайт ліворуч на 14px від низу колонки, а підпис праворуч — на 59px
   (бо #kob-right центрував увесь вміст разом із підписом). Тепер картка центрується
   сама (margin auto згори/знизу), а підпис притиснутий до низу тим самим відступом.
   Лише від 681px: на мобільних #kob-left/#kob-right = display:contents і margin:auto
   на картці зіпсував би порядок елементів. */
@media (min-width:681px){
  #kob-right{justify-content:flex-start; padding-bottom:14px;}
  body.login-page .login-box{margin-top:auto; margin-bottom:auto;}
  .kob-subfooter{margin-top:16px; margin-bottom:0;}
}

/* ================= 1200–1599 ================= */
@media (max-width:1599px){ .kob-main{grid-template-columns:minmax(0,1fr) minmax(400px,440px);} }

/* ================= ПЛАНШЕТ ≤1024 ================= */
@media (max-width:1024px){
  .kob-main{grid-template-columns:1fr; min-height:auto; gap:24px; width:calc(100% - 48px);
    align-content:start; justify-items:center; text-align:center;}
  #kob-left{align-items:center;}
  .brand-content{padding-top:clamp(40px,6vh,72px);}
  .brand-content h1{max-width:22ch;} .brand-content .desc{margin-left:auto; margin-right:auto;}
  .partners{margin-top:24px; justify-content:center; padding-top:8px;}
  .partners .pl{text-align:center;}
  .copyright{text-align:center; padding-bottom:6px;}
  #kob-right{align-items:center; justify-content:flex-start; padding-top:8px;}
  .kob-subfooter{justify-content:center;}
}

/* ================= МОБІЛЬНІ ≤680 ================= */
@media (max-width:680px){
  .kob-main{display:flex; flex-direction:column; width:calc(100% - 32px); gap:18px; padding-bottom:20px;}
  #kob-left, #kob-right{display:contents;}                 /* дозволяє переупорядкувати */
  .brand-content{order:1; padding-top:22px; text-align:center;}
  .brand-content .crest{height:100px; margin:0 auto 14px;}
  .brand-content h1{font-size:clamp(26px,7vw,34px); max-width:100%; margin:0 auto;}
  .brand-content .desc{display:none;}
  body.login-page .login-box{order:2; width:100%;}
  body.login-page .login-box-body{padding:24px 20px; border-radius:18px;}
  .kob-subfooter{order:3; width:100%; justify-content:center; margin-top:6px;}
  .partners{order:4; margin:6px auto 0; justify-content:center;}
  .copyright{order:5; text-align:center; padding-bottom:8px;}
  body.login-page .login-box-msg{font-size:24px;}
}

/* ================= МЕНШЕ РУХУ ================= */
@media (prefers-reduced-motion: reduce){
  #kob-bg .slide{animation:none;} #kob-bg .slide:nth-child(1){opacity:1;}
  body.login-page .login-box-body{animation:none;} .btn-primary.is-loading::before{animation:none;}
}

/* ================= QA: прибрати службові елементи (вхід + глобально) ================= */
/* P2-10: pace-прелоадер («100%» смуга) */
.pace, .pace-progress, .pace-activity{ display:none !important; }
/* P2-7: версія ПЗ у картці входу = <div><i>Version…</i></div> — останній нащадок .login-box.
   ЛИШЕ legacy: у SSR-шаблоні версії немає, а це правило матчило б саму .login-box-body
   і ховало всю форму (знайдено аудитом р.3, К-1). */
body.login-page:not(.kob-ssr) .login-box > div:last-child{ display:none !important; }
/* P1-6: cookie-банер (кукі сесійні/технічні, згоди не потребують) — прибрати. cookieconsent = .cc-window */
.cc-window, .cc-banner, .cc-floating, .cookieconsent{ display:none !important; }

/* ══ ВИПРАВЛЕННЯ ЗА НЕЗАЛЕЖНИМ АУДИТОМ (01.08) ════════════════════════════ */

/* 🔴 1. Пароль заходив ПІД кнопку «Показати/Приховати» на 73px.
   Причина — специфічність: `body.login-page .form-control{padding:0 16px}` (0,2,1)
   перебивав `.kob-pass .form-control{padding-right:96px}` (0,2,0), тож відступу
   просто не було. Ставимо з правильною специфічністю і з запасом: українське
   «Приховати» дає кнопку 83px, тому 96 було б впритул. */
body.login-page .kob-pass .form-control{ padding-right:104px !important; }

/* 🔴 2. Слайдер стояв на паузі З ПЕРШОЇ СЕКУНДИ: login.js автофокусить поле
   логіна, а правило `:has(.form-control:focus)` ставило анімацію на паузу.
   Тобто 1,42 МБ слайдів вантажились і майже ніколи не показувались, а кнопка
   паузи ще й показувала неправдивий стан (aria-pressed="false" при паузі).
   Вимогу WCAG 2.2.2 закриває САМА КНОПКА паузи — авто-пауза зайва.
   (.kob-paused нижче має !important, тож ручна пауза далі працює.) */
body.login-page:has(.form-control:focus) #kob-bg.run .slide{ animation-play-state:running; }

/* 🟠 3. Контраст: --brand-d #0f6d8c на напівпрозорій картці давав 3,07–4,22:1
   замість 4,5 (кнопка пароля, «Зв'яжіться з адміністратором», «Забули пароль?»).
   Темніший відтінок тієї ж гами. */
:root{ --brand-d:#0b5a75; }

/* 🟠 4. Кеш: картинки не мали ?v= при max-age=30 днів — браузери реально
   віддавали СТАРІ важкі версії (герб 580 КБ замість 76 КБ, slide3 567 КБ
   замість 288 КБ). Додаємо версію до фонів слайдів. */
#kob-bg .slide.s1{background-image:url('slide1.jpg?v=2')} #kob-bg .slide.s2{background-image:url('slide2.jpg?v=2')}
#kob-bg .slide.s3{background-image:url('slide3.jpg?v=2')} #kob-bg .slide.s4{background-image:url('slide4.jpg?v=2')}
#kob-bg .slide.s5{background-image:url('slide5.jpg?v=2')} #kob-bg .slide.s6{background-image:url('slide6.jpg?v=2')}
#kob-bg .slide.s7{background-image:url('slide7.jpg?v=2')} #kob-bg .slide.s8{background-image:url('slide8.jpg?v=2')}

/* 🟠 5а. inset:0 не має фолбека: у Safari <14.1 (iOS 14.0) і Firefox <66 фон
   схлопнувся б у нуль — лишився б суцільний #08324b без фото. */
#kob-bg{ top:0; right:0; bottom:0; left:0; }
#kob-bg .slide{ top:0; right:0; bottom:0; left:0; }
#kob-bg::after{ top:0; right:0; bottom:0; left:0; }

/* 🟠 5б. Мовні кнопки були 43×36 — менше за 44×44 (WCAG 2.5.5 / Apple HIG). */
#kob-lang button, #kob-lang a{ min-width:44px !important; min-height:44px !important; }

/* 🟠 5в. Реальне переповнення на 320px: лого донорів має природну ширину 324px
   при height:clamp(24px…), а контейнер лише 288px → scrollWidth 340 > 303.
   Оком не було видно тільки через overflow-x:hidden, тобто лого просто різалось. */
.partners img.don{ max-width:100% !important; height:auto !important; }

/* 🟠 5г. Фіксований топбар UA|EN лягав на поле логіна при прокрутці на телефоні
   (375×667 і 430×932 — сторінка там прокручується). На вузьких робимо його
   частиною потоку сторінки. */
@media (max-width: 680px){
  #kob-topbar{ position:absolute !important; top:12px !important; }
}

/* 🟡 Старий Safari (<15.4) не знає :focus-visible — на кнопках не було ЖОДНОГО
   індикатора фокуса. Дублюємо звичайним :focus (сучасні браузери й далі
   керуються :focus-visible, бо воно нижче в каскаді файлу). */
body.login-page button:focus, body.login-page .kob-toggle:focus{
  outline:2px solid var(--brand-d); outline-offset:2px;
}

/* ══ WebP ДЛЯ ФОНІВ (v22, 10.08) ═══════════════════════════════════════════
   Фолбек безкоштовний і не потребує @supports: браузер, який не знає
   image-set(), просто відкидає ці декларації як невалідні й лишається на
   JPG вище. Порядок навмисний:
     1) image-set(url(...) 1x)      — вмикає WebP у ВСІХ, хто знає image-set
        (Chrome 90+, Firefox 88+, Safari 15.4+). Усі вони вміють WebP давно,
        тож підміна безпечна. Саме цей рядок закриває «вікно» браузерів, які
        знають image-set, але ще не знають type() (Safari 15.4–16, FF 89–112):
        без нього вони качали б WebP з <link rel=preload> і ЩЕ РАЗ JPG із CSS.
     2) image-set(... type(...))    — повний синтаксис; там, де він працює,
        формат обирає сам браузер, і JPG лишається справжнім фолбеком.
   slide3 БЕЗ WebP свідомо: у WebP він виходить важчим за власний JPG
   (289 проти 282 КБ — дуже «шумний» кадр), тож для нього лишається JPG. */
#kob-bg .slide.s1{background-image:image-set(url('slide1.webp?v=1') 1x)}
#kob-bg .slide.s2{background-image:image-set(url('slide2.webp?v=1') 1x)}
#kob-bg .slide.s4{background-image:image-set(url('slide4.webp?v=1') 1x)}
#kob-bg .slide.s5{background-image:image-set(url('slide5.webp?v=1') 1x)}
#kob-bg .slide.s6{background-image:image-set(url('slide6.webp?v=1') 1x)}
#kob-bg .slide.s7{background-image:image-set(url('slide7.webp?v=1') 1x)}
#kob-bg .slide.s8{background-image:image-set(url('slide8.webp?v=1') 1x)}
#kob-bg .slide.s1{background-image:image-set(url('slide1.webp?v=1') type('image/webp'), url('slide1.jpg?v=2') type('image/jpeg'))}
#kob-bg .slide.s2{background-image:image-set(url('slide2.webp?v=1') type('image/webp'), url('slide2.jpg?v=2') type('image/jpeg'))}
#kob-bg .slide.s4{background-image:image-set(url('slide4.webp?v=1') type('image/webp'), url('slide4.jpg?v=2') type('image/jpeg'))}
#kob-bg .slide.s5{background-image:image-set(url('slide5.webp?v=1') type('image/webp'), url('slide5.jpg?v=2') type('image/jpeg'))}
#kob-bg .slide.s6{background-image:image-set(url('slide6.webp?v=1') type('image/webp'), url('slide6.jpg?v=2') type('image/jpeg'))}
#kob-bg .slide.s7{background-image:image-set(url('slide7.webp?v=1') type('image/webp'), url('slide7.jpg?v=2') type('image/jpeg'))}
#kob-bg .slide.s8{background-image:image-set(url('slide8.webp?v=1') type('image/webp'), url('slide8.jpg?v=2') type('image/jpeg'))}

/* <picture> у розмітці (герб, Polaris, донори) — лише обгортка навколо <img>.
   Вона не має змінювати ані сітку .partners (flex), ані центрування герба на
   мобільному, ані фікс переповнення на 320px (5в), де max-width:100% має
   рахуватись від контейнера, а не від самої обгортки. */
.brand-content picture{display:block;}
.partners picture{display:inline-flex; align-items:flex-end; line-height:0;
  min-width:0; max-width:100%;}