/* ------------------------------------------------------------------
   /war — мапа війни.

   Успадковує від site.css: біле поле, IBM Plex, шапку-документ,
   службовий рядок, підвал. Своя ІА: мапа — не §-документ і не пошук,
   тому замість «рейка + колонка тексту» тут «рейка + об'єкт».

   Мапа малюється власною геометрією на canvas: жодного чужого
   тайл-сервера, жодного ключа, жодного зовнішнього запиту зі сторінки.
   ------------------------------------------------------------------ */

.war {
  /* кольори шарів */
  --occ:     #8C2F1E;              /* окуповано з 2022 */
  --occ-f:   rgba(140, 47, 30, .34);
  --old:     #6E4A3A;              /* Крим і ОРДЛО — те саме, але тихіше */
  --old-f:   rgba(110, 74, 58, .26);
  --lib-f:   rgba(201, 162, 39, .3);
  --unk-f:   rgba(118, 123, 131, .22);
  --land:    #FFFFFF;              /* Україна */
  --land-l:  #EDEDE8;              /* сусідні країни */
  --sea:     #D6DAD9;              /* море і фон кадру */

  /* три криві за ролями: показ, тіло, дрібна механіка */
  --e-display: cubic-bezier(.16, 1, .3, 1);
  --e-body:    cubic-bezier(.25, .46, .45, .94);
  --e-ui:      cubic-bezier(.4, 0, .2, 1);
}

/* ---------- каркас сторінки мапи: на весь екран ---------- */

/* Мапа — інструмент, а не документ: вона займає весь екран, сторінка не
   гортається, а керування живе у вузькій плашці зліва. Статистика і хроніка
   лишаються звичайними сторінками сайту з рейкою і колонкою. */
.war--map { overflow: hidden; }

.shell {
  display: grid;
  height: calc(100dvh - var(--chrome, 116px));
  min-height: 420px;
}
@media (min-width: 900px) {
  .shell { grid-template-columns: var(--dock, 296px) minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .shell { grid-template-rows: minmax(0, 1fr) auto; height: calc(100dvh - var(--chrome, 150px)); }
}

.dock {
  border-right: 1px solid var(--rule);
  padding: 16px var(--gut) 18px;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex; flex-direction: column; gap: 0;
}
@media (max-width: 899px) {
  .dock {
    order: 2; border-right: 0; border-top: 1px solid var(--ink);
    max-height: 42dvh; padding-block: 12px 16px;
  }
}
.dock__go {
  margin-top: auto; padding-top: 1.2rem;
  display: grid; gap: .35rem;
}
.dock__go a {
  color: var(--muted); text-decoration: none; font-size: .74rem;
  display: inline-flex; align-items: center; min-height: 30px;
}
.dock__go a:hover { color: var(--ink); }

.ttl {
  margin: 0 0 1.1rem;
  font-size: clamp(40px, 6vw, 76px);
  line-height: .9;
  letter-spacing: -.03em;
  font-weight: 600;
  color: var(--ink);
}

/* ---------- лічильники ---------- */

.nums {
  margin-top: clamp(22px, 2.6vw, 34px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ink);
}
.num {
  padding: .85rem 1rem .95rem 0;
  border-bottom: 1px solid var(--rule);
}
.num:nth-child(odd) { border-right: 1px solid var(--rule); padding-right: 1rem; }
.num:nth-child(even) { padding-left: 1rem; }

.num b {
  font-size: clamp(1.9rem, 2.4vw, 2.5rem);
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  letter-spacing: -.02em;
}
.num i {
  font-style: normal;
  font-family: var(--mono);
  font-size: .74rem;
  color: var(--muted);
  margin-left: .3em;
}
.num span {
  display: block;
  margin-top: .35rem;
  font-size: .8rem;
  line-height: 1.35;
  color: var(--muted);
}
.num--sub b { font-size: clamp(1.3rem, 1.6vw, 1.6rem); }

/* єдиний акцент кольором на всій сторінці, крім самої мапи:
   тривога — це подія, а не фарба */
.num[data-alert="on"] b { color: var(--flag); }
.num[data-alert="on"]::before {
  content: ""; float: left; width: 7px; height: 7px; border-radius: 50%;
  background: var(--flag); margin: .55em .45em 0 0;
  animation: pulse 2.4s var(--e-body) infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1 } 50% { opacity: .25 } }

/* ---------- шари ---------- */

.layers {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0;
}
.layers legend {
  padding: 0 0 .55rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: .7rem;
}
.layers label {
  display: flex;
  align-items: center;
  gap: .65rem;
  min-height: 44px;
  padding: .1rem 0;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  color: var(--ink-2);
  transition: color .18s var(--e-ui);
}
.layers label:hover { color: var(--ink); }
.layers label:first-of-type { border-top: 1px solid var(--rule); }
.layers input {
  appearance: none;
  width: 15px; height: 15px;
  border: 1px solid var(--rule-2);
  background: var(--paper);
  flex: none;
  transition: background-color .18s var(--e-ui), border-color .18s var(--e-ui);
}
.layers input:checked { background: var(--ink); border-color: var(--ink); }
.layers input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.layers span { font-size: .9rem; }
/* назва шару має вміщатись у рядок: перенос робить список драбиною */
.layers label { min-height: 40px; }

/* ---------- період подій ---------- */

.per {
  margin-top: 1rem;
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
}
.per > span { color: var(--muted); font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; }
.per button {
  min-height: 34px; padding: .2rem .62rem;
  border: 1px solid var(--rule-2); background: var(--paper);
  font: 400 .8rem/1 var(--sans); color: var(--ink-2);
  cursor: pointer;
  transition: color .16s var(--e-ui), border-color .16s var(--e-ui), background-color .16s var(--e-ui);
}
.per button:hover { color: var(--ink); border-color: var(--ink); }
.per button[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--paper); }
@media (max-width: 700px) { .per button { min-height: 44px; padding-inline: .8rem; } }

/* тип події — той самий елемент, що й період, але переносний у кілька рядів */
.per--cat { margin-top: .7rem; }
.per--cat button { font-size: .76rem; padding: .2rem .55rem; }

/* ---------- легенда ---------- */

.legend {
  margin-top: 1.1rem;
  display: grid;
  gap: .42rem;
  color: var(--muted);
  font-size: .74rem;
}
.legend span { display: flex; align-items: center; gap: .5rem; }
.sw { width: 16px; height: 10px; flex: none; border: 1px solid var(--rule-2); }
.sw--occ { background: var(--occ-f); border-color: var(--occ); }
.sw--old { background: var(--old-f); border-color: var(--old); border-style: dashed; }
.sw--lib { background: var(--lib-f); border-color: var(--gold-2); }
.sw--unk { background: var(--unk-f); }
.sw--att { width: 0; height: 0; border: 0; border-left: 6px solid transparent;
           border-right: 6px solid transparent; border-top: 9px solid var(--occ); }

.side__note {
  margin-top: 1.4rem;
  color: var(--muted);
  font-size: .74rem;
  line-height: 1.5;
  max-width: 34ch;
}

/* ---------- мапа ---------- */

.map {
  position: relative;
  background: var(--sea);
  touch-action: none;
  min-height: 0;   /* без цього grid-осередок не стискається і canvas розпирає екран */
}
@media (max-width: 899px) { .map { order: 1; border-left: 0; } }
#cv { display: block; width: 100%; height: 100%; cursor: grab; }
#cv.drag { cursor: grabbing; }

.map__ui {
  position: absolute; right: 14px; top: 14px;
  display: grid; gap: 6px;
}
.zoom {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  border: 1px solid var(--rule-2);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(3px);
  color: var(--ink-2);
  font: 500 15px/1 var(--sans);
  cursor: pointer;
  transition: color .16s var(--e-ui), border-color .16s var(--e-ui), background-color .16s var(--e-ui);
}
.zoom:hover { color: var(--ink); border-color: var(--ink); background: #fff; }
.zoom--r { font-size: 12px; margin-top: 4px; }

.map__hint {
  position: absolute; left: 14px; bottom: 12px;
  color: var(--muted); font-size: .68rem;
  pointer-events: none;
  transition: opacity .5s var(--e-body);
}
.map.moved .map__hint { opacity: 0; }

/* картка події */
.pop {
  position: absolute; left: 14px; bottom: 40px;
  width: min(330px, calc(100% - 28px));
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: .85rem 1rem 1rem;
  box-shadow: 0 10px 34px -18px rgba(20, 22, 26, .45);
  animation: popin .3s var(--e-display) both;
}
@keyframes popin { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
.pop[hidden] { display: none; }
.pop__x {
  position: absolute; right: 4px; top: 2px;
  width: 30px; height: 30px; border: 0; background: none;
  color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer;
}
.pop__x:hover { color: var(--ink); }
.pop__d { color: var(--muted); font-size: .7rem; margin-bottom: .35rem; padding-right: 26px; }
.pop__t { font-size: .9rem; line-height: 1.45; color: var(--ink); }
.pop__u {
  display: inline-flex; align-items: center; min-height: 34px;
  margin-top: .5rem; font-size: .72rem;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
}
.pop__u:hover { color: var(--gold); border-bottom-color: var(--gold); }

/* ---------- історія ---------- */

.hist { border-top: 1px solid var(--ink); }
.hist__in { max-width: 1240px; margin-inline: auto; padding: 22px var(--gut) 30px; }
.hist__h {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; color: var(--muted); font-size: .72rem;
}
.hist__now b { color: var(--ink); font-size: .95rem; font-variant-numeric: tabular-nums; }
#hc { display: block; width: 100%; height: 150px; margin-top: .7rem; }
.hist__note { margin-top: .5rem; color: var(--muted); font-size: .68rem; }

/* ---------- джерела ---------- */

.src { border-top: 1px solid var(--rule); background: var(--paper-2); }
.src__in { max-width: 1240px; margin-inline: auto; padding: 26px var(--gut) 34px; }
.src__in h2 {
  margin: 0 0 .9rem; font-size: .72rem; font-weight: 400;
  text-transform: uppercase; letter-spacing: .1em; color: var(--muted);
}
.src__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.src__list li {
  display: grid; gap: .1rem .9rem; padding: .6em 0;
  border-bottom: 1px solid var(--rule); font-size: .88rem;
}
@media (min-width: 760px) { .src__list li { grid-template-columns: 15rem 1fr; } }
.src__list b { color: var(--ink); font-weight: 500; }
.src__list span { color: var(--muted); }
.src__warn {
  margin-top: 1.2rem; padding: .9rem 1.1rem;
  border-left: 3px solid var(--flag); background: var(--paper);
  font-size: .88rem; line-height: 1.5; max-width: 74ch;
}
.src__warn b { color: var(--ink); }
/* друга врізка — про метод, а не про небезпеку: тому золота лінійка, не червона */
.src__warn--soft { border-left-color: var(--gold-2); margin-top: .8rem; }

/* ---------- шар руху ---------- */

body.anim [data-anim] {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .62s var(--e-display), transform .62s var(--e-display);
}
[data-anim="nums"]   { transition-delay: .10s; }
[data-anim="layers"] { transition-delay: .18s; }
[data-anim="map"]    { transition-delay: 0s; transform: translateY(14px); }
body.anim [data-anim].in { opacity: 1; transform: none; }

/* заголовок з'їжджає з маски — рядок за рядком */
.ttl { --m: 100%; }
.war.ready .ttl { animation: none; }

@media (prefers-reduced-motion: reduce) {
  body.anim [data-anim] { transition: opacity .2s linear; transform: none; }
  body.anim [data-anim].in { transform: none; }
  .num[data-alert="on"]::before { animation: none; }
  .pop { animation: none; }
}

/* ------------------------------------------------------------------
   Сторінка статистики: звичайна геометрія сайту (рейка + колонка),
   а числа подаються смугами. Смуга чесніша за пиріг: довжину порівнюєш
   очима без легенди, і нуль видно як нуль.
   ------------------------------------------------------------------ */

.war--stat .rail__kicker,
.war--news .rail__kicker {
  margin-top: 1.1rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; font-size: .7rem;
}
.war--stat .rail__note,
.war--news .rail__note { margin-top: .7rem; font-size: .8rem; line-height: 1.5; color: var(--muted); }
.war--stat .dock__go,
.war--news .dock__go { margin-top: 1.4rem; padding-top: 0; }

.nums--wide { max-width: none; }

.bars { width: 100%; border-collapse: collapse; margin-top: .2rem; }
.bars td { padding: .5em 0; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.bars td:first-child { width: 40%; color: var(--ink); font-size: .93rem; padding-right: 1rem; }
.bars td:last-child {
  width: 5.6em; text-align: right; font-family: var(--mono); font-size: .8rem;
  color: var(--muted); font-variant-numeric: tabular-nums;
}
.bars .bar { display: block; height: 9px; background: var(--occ-f); border-left: 2px solid var(--occ); }
.bars tr[data-k="crimea"] .bar,
.bars tr[data-k="ordlo"] .bar { background: var(--old-f); border-left-color: var(--old); }
.bars tr[data-k="unknown"] .bar { background: var(--unk-f); border-left-color: var(--rule-2); }
.bars tr[data-k="civil"] .bar { background: rgba(140,47,30,.28); border-left-color: var(--flag); }

.bars--state td:nth-child(2) { width: auto; }
.bars--state .st { font-family: var(--mono); font-size: .76rem; color: var(--muted); }
.bars--state .st--on { color: var(--flag); }
.bars--state .st--on::before {
  content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--flag); margin-right: .45em; vertical-align: .1em;
  animation: pulse 2.4s var(--e-body) infinite;
}

#hc { display: block; width: 100%; height: 170px; margin-top: .6rem; }
#mc { display: block; width: 100%; height: 130px; margin-top: .5rem; }

/* ------------------------------------------------------------------
   Хроніка: список коротких заміток. Кожна веде на мапу і на першоджерело —
   без цих двох посилань замітка перетворюється на переказ без доказу.
   ------------------------------------------------------------------ */

.col--news { max-width: 74ch; }

.feed { list-style: none; margin: 1.6rem 0 0; padding: 0; }
.feed li {
  padding: 1.05rem 0 1.15rem;
  border-top: 1px solid var(--rule);
  scroll-margin-top: 120px;
}
.feed li:target { background: var(--paper-2); box-shadow: -10px 0 0 var(--paper-2), 10px 0 0 var(--paper-2); }
.feed__d {
  display: flex; gap: .9rem; flex-wrap: wrap; align-items: baseline;
  color: var(--muted); font-size: .72rem; margin-bottom: .4rem;
}
.feed__d b { color: var(--ink); font-weight: 500; }
.feed__cat { color: var(--gold); }
.feed h3 { margin: 0 0 .35rem; font-size: 1.06rem; line-height: 1.35; font-weight: 600; color: var(--ink); }
.feed p { font-size: .95rem; line-height: 1.55; color: var(--ink-2); }
.feed__links { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: .6rem; font-size: .72rem; }
.feed__links a {
  color: var(--muted); text-decoration: none;
  border-bottom: 1px solid var(--rule-2);
  display: inline-flex; align-items: center; min-height: 30px;
}
.feed__links a:hover { color: var(--ink); border-bottom-color: var(--ink); }
.feed__empty { margin-top: 2rem; color: var(--muted); }
.feed__more {
  margin: 1.6rem 0 0; min-height: 44px; padding: .4rem 1.4rem;
  border: 1px solid var(--ink); background: var(--paper); color: var(--ink);
  font: 400 .93rem/1 var(--sans); cursor: pointer;
  transition: color .16s var(--e-ui), border-color .16s var(--e-ui);
}
.feed__more:hover { color: var(--gold); border-color: var(--gold); }

/* картка події на мапі: два посилання в рядок */
.pop__links { display: flex; gap: 1rem; flex-wrap: wrap; margin-top: .55rem; }
.pop__links a {
  color: var(--ink); text-decoration: none; font-size: .72rem;
  border-bottom: 1px solid var(--rule-2);
  display: inline-flex; align-items: center; min-height: 32px;
}
.pop__links a:hover { color: var(--gold); border-bottom-color: var(--gold); }