/* ───────────────────────────────────────────────────────────────
   ncua.no — статистика української громади в Норвегії.
   Спільний файл для двох мовних версій сторінки:
     /statistikk/ukrainere-i-norge        (норвезька)
     /ua/statistikk/ukrainere-i-norge     (українська)

   ДВА КОЛЬОРИ, ДВА ЗНАЧЕННЯ. Золото завжди означає «скільки
   людей», блакить — «яка частка населення». Ніде більше на
   сторінці ці два кольори не несуть змісту, і третього
   змістовного кольору немає: щойно з'явиться, читач почне
   розшифровувати палітру замість читати число.

   Сторінка темна від початку до кінця, як і /bedrifter.
   ─────────────────────────────────────────────────────────────── */

/* ── шапка сторінки ─────────────────────────────────────────── */
.bf-header{position:sticky;top:0;z-index:30;padding:12px 0;
  border-bottom:1px solid var(--ink-600);background:var(--ink-900)}
.bf-header__inner{display:flex;align-items:center;gap:16px;
  justify-content:space-between}
.bf-header img{display:block;height:26px;width:auto}
.bf-header__right{display:flex;align-items:center;gap:10px}

/* Перемикач мови тут — не декоративний: це єдиний шлях між двома
   версіями сторінки, і той самий зв'язок, що описує hreflang. */
.bf-lang{display:flex;gap:2px;border:1px solid var(--ink-600);
  border-radius:999px;padding:2px;background:var(--ink-800)}
.bf-lang a{display:block;padding:4px 11px;border-radius:999px;
  font-size:var(--fs-xs);font-weight:600;letter-spacing:.04em;
  color:var(--ink-400);text-decoration:none;line-height:1.4}
.bf-lang a:hover{color:var(--paper)}
.bf-lang a[aria-current="true"]{background:var(--gold-500);color:var(--ink-900)}

/* ── герой: питання, і одразу відповідь ─────────────────────── */
.bf-hero{padding:52px 0 34px}
.bf-hero h1{margin:0 0 14px;font-family:var(--font-display);
  font-size:var(--fs-h2);line-height:1.08;max-width:20ch}
.bf-answer{display:flex;align-items:baseline;gap:18px;flex-wrap:wrap;
  margin:0 0 18px}
.bf-answer__n{font-family:var(--font-body);font-weight:600;
  font-size:clamp(3.2rem,9vw,5.4rem);line-height:1;color:var(--gold-500);
  font-variant-numeric:proportional-nums}
.bf-answer__cap{color:var(--ink-400);font-size:var(--fs-sm);max-width:30ch}
.bf-hero p.lead{margin:0;max-width:66ch;color:var(--ink-400)}
.bf-updated{margin-top:20px;font-size:var(--fs-xs);color:var(--ink-400)}
.bf-updated b{color:var(--paper);font-weight:500}

/* ── плитки з цифрами ───────────────────────────────────────── */
.bf-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));
  gap:12px;margin-top:30px}
.bf-tile{background:var(--ink-700);border:1px solid var(--ink-600);
  border-radius:12px;padding:14px 16px}
.bf-tile__label{color:var(--ink-400);font-size:var(--fs-xs);margin:0 0 6px}
.bf-tile__v{font-weight:600;font-size:1.65rem;line-height:1.05;
  font-variant-numeric:proportional-nums}
.bf-tile__v .bf-arrow{color:var(--gold-500);padding:0 3px}
/* Дві цифри зі стрілкою між ними не влазять у плитку в один рядок при
   тому ж кеглі, а перенесення розриває пару «було → стало» навпіл. */
.bf-tile__v--pair{font-size:1.15rem;white-space:nowrap;padding-block:5px}
.bf-tile__note{color:var(--ink-400);font-size:11.5px;margin:6px 0 0;line-height:1.45}

/* ── карти ──────────────────────────────────────────────────── */
.bf-maps{padding:20px 0 10px}
.bf-mapgrid{display:grid;grid-template-columns:1fr;gap:18px}
@media(min-width:900px){.bf-mapgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}

.bf-card{background:var(--ink-800);border:1px solid var(--ink-600);
  border-radius:14px;padding:18px 20px 16px}
.bf-card h2{margin:0 0 2px;font-size:var(--fs-h4)}
.bf-card p.bf-sub{margin:0 0 14px;color:var(--ink-400);font-size:var(--fs-xs);
  max-width:46ch}

.bf-mapwrap{position:relative;background:var(--ink-900);
  border:1px solid var(--ink-600);border-radius:10px;overflow:hidden;
  padding:8px 4px;min-height:280px}
.bf-mapwrap .norgemap{width:100%;height:auto}
/* Без JS карти не буде — і замість порожньої рамки сторінка каже це
   словами. Уся статистика нижче лишається читомою. */
html:not(.js) .bf-mapwrap{display:none}
.bf-nojs{display:none;color:var(--ink-400);font-size:var(--fs-xs);
  padding:10px 0}
html:not(.js) .bf-nojs{display:block}

.bf-mapwrap path{stroke:var(--ink-600);stroke-width:.5;
  vector-effect:non-scaling-stroke;transition:fill .12s linear}
.bf-mapwrap path.is-hi{stroke:var(--paper);stroke-width:1.4}
.bf-bubble{fill:rgba(242,194,0,.6);stroke:var(--gold-400);stroke-width:.9;
  vector-effect:non-scaling-stroke;pointer-events:none}
.bf-bubble.is-hi{fill:rgba(255,216,77,.95)}

.bf-legend{display:flex;gap:0;margin-top:12px}
.bf-legend__step{flex:1;min-width:0}
.bf-legend__step i{display:block;height:8px}
.bf-legend__step span{display:block;margin-top:6px;font-size:11px;
  color:var(--ink-400);font-variant-numeric:tabular-nums;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Легенда кіл — три опорні розміри. Площа пропорційна числу, бо
   око порівнює саме площу; радіус ∝ числу перебільшив би Осло. */
.bf-blegend{display:flex;align-items:flex-end;gap:18px;margin-top:12px}
.bf-blegend__item{display:flex;flex-direction:column;align-items:center;gap:6px}
.bf-blegend svg{display:block;overflow:visible}
.bf-blegend circle{fill:rgba(242,194,0,.6);stroke:var(--gold-400);stroke-width:1}
.bf-blegend span{font-size:11px;color:var(--ink-400);
  font-variant-numeric:tabular-nums}

.bf-tip{position:absolute;z-index:5;pointer-events:none;opacity:0;
  transform:translate(-50%,-100%);transition:opacity .1s linear;
  background:var(--ink-900);border:1px solid var(--ink-500);border-radius:8px;
  padding:9px 12px;min-width:170px;box-shadow:0 10px 30px rgba(0,0,0,.5)}
.bf-tip.is-on{opacity:1}
.bf-tip__name{font-weight:600;font-size:var(--fs-sm)}
.bf-tip__fylke{color:var(--ink-400);font-size:11px;margin-bottom:6px}
.bf-tip dl{display:grid;grid-template-columns:auto auto;gap:1px 12px;margin:0;
  font-size:12px}
.bf-tip dt{color:var(--ink-400)}
.bf-tip dd{margin:0;text-align:right;font-weight:600;
  font-variant-numeric:tabular-nums}
.bf-tip .bf-n{color:var(--gold-500)}
.bf-tip .bf-s{color:#84D6ED}

/* ── таблиці ────────────────────────────────────────────────── */
.bf-tables{padding:24px 0}
.bf-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.bf-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm);
  font-variant-numeric:tabular-nums}
table.bf-table caption{text-align:left;color:var(--ink-400);
  font-size:var(--fs-xs);padding-bottom:10px}
table.bf-table th,table.bf-table td{padding:7px 10px;text-align:right;
  border-bottom:1px solid var(--ink-600);white-space:nowrap}
table.bf-table th:first-child,table.bf-table td:first-child,
table.bf-table th.bf-l,table.bf-table td.bf-l{text-align:left}
table.bf-table thead th{color:var(--ink-400);font-weight:500;
  font-size:var(--fs-xs);position:sticky;top:0;background:var(--ink-800);
  z-index:1}
table.bf-table tbody tr:hover{background:var(--ink-700)}
table.bf-table tbody tr.is-hi{background:var(--gold-glow)}
table.bf-table td.bf-num{color:var(--gold-500);font-weight:600}
table.bf-table td.bf-share{color:#84D6ED}
table.bf-table td.bf-unknown{color:var(--ink-400)}

/* Повний список усіх 357 комун лишається в розмітці, а не в JS:
   людина, яка шукає свою комуну, має знайти її пошуком у пошуковій
   системі, а не лише всередині сторінки. Прокрутка — тільки візуальна. */
.bf-all{max-height:520px;overflow:auto;border:1px solid var(--ink-600);
  border-radius:10px}
.bf-filter{margin:0 0 12px}
.bf-filter input{width:100%;max-width:340px;padding:9px 12px;
  border:1px solid var(--ink-600);border-radius:8px;background:var(--ink-900);
  color:var(--paper);font:inherit;font-size:var(--fs-sm)}
.bf-filter input:focus-visible{outline:2px solid var(--gold-500);outline-offset:1px}
.bf-empty{padding:14px 12px;color:var(--ink-400);font-size:var(--fs-sm)}

/* ── FAQ ────────────────────────────────────────────────────── */
.bf-faq{padding:26px 0}
.bf-faq .accordion{max-width:none}
/* Без JS акордеон лишається відкритим. Механізм той самий, що в
   pages/membership.css, а не свій: панель — це грід, і відкриває її
   висота рядка, а не display. */
html:not(.js) .bf-faq .accordion__panel{grid-template-rows:1fr}

/* ── метод і джерела ────────────────────────────────────────── */
.bf-method{padding:30px 0}
.bf-method h2{margin:0 0 14px;font-size:var(--fs-h3)}
.bf-method h3{margin:26px 0 8px;font-size:var(--fs-h4);color:var(--gold-500)}
.bf-method p,.bf-method li{max-width:74ch;color:var(--ink-400)}
.bf-method p b,.bf-method li b{color:var(--paper);font-weight:500}
.bf-method code{font-family:ui-monospace,"SF Mono",Menlo,monospace;
  font-size:.88em;background:var(--ink-800);border:1px solid var(--ink-600);
  border-radius:4px;padding:1px 5px;color:#F4E4A8}
.bf-warn{margin-top:14px;padding:12px 16px;border-left:3px solid var(--gold-500);
  background:var(--gold-glow);color:#F4E4A8;font-size:var(--fs-sm);
  max-width:74ch;border-radius:0 8px 8px 0}
.bf-warn b{color:#FFE9A8}

.bf-foot{padding:26px 0 56px;border-top:1px solid var(--ink-600);
  color:var(--ink-400);font-size:var(--fs-sm)}
.bf-foot a{color:var(--gold-500)}
.bf-foot p{max-width:80ch}

@media (prefers-reduced-motion:reduce){
  .bf-mapwrap path,.bf-tip{transition:none}
}

/* ── хлібні крихти ──────────────────────────────────────────── */
.bf-crumbs{padding:16px 0 0}
.bf-crumbs ol{display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0 24px;
  list-style:none;max-width:1240px;margin-inline:auto;
  font-size:var(--fs-xs);color:var(--ink-400)}
.bf-crumbs li+li::before{content:"›";margin-inline-end:10px;color:var(--ink-500)}
.bf-crumbs a{color:var(--ink-400);text-decoration:none}
.bf-crumbs a:hover{color:var(--gold-500);text-decoration:underline}
.bf-crumbs [aria-current]{color:var(--paper)}

/* ── ряд по роках ───────────────────────────────────────────── */
/* Стовпчик малюється шириною у відсотках, без скрипта й без картинки:
   так він лишається в розмітці, читається пошуком і не зникає, коли
   JavaScript вимкнено. Саме число стоїть поруч, тому екранний читач
   нічого не втрачає — стовпчик для нього просто порожня клітинка. */
table.bf-timeline td.bf-barcell{width:38%;min-width:110px;padding-block:10px}
table.bf-timeline .bf-bar{display:block;height:10px;border-radius:2px;
  background:linear-gradient(90deg,var(--gold-600),var(--gold-500))}
table.bf-timeline th[scope="row"]{font-weight:500;color:var(--paper)}

/* Поки карту не намальовано, бокс не має виглядати зламаним. Цей рядок
   прибирає сам NorgeMap: його конструктор очищає контейнер перед тим,
   як покласти туди <svg>. Тому окремої логіки ховання не існує — і
   нема чого забути викликати. */
.bf-mapload{margin:0;padding:120px 16px;text-align:center;color:var(--ink-400);
  font-size:var(--fs-xs)}