/* ------------------------------------------------------------------
   majdan.org.ua/donate — «кому донатити».

   Спадкоємність із рештою сайту обов'язкова (IBM Plex, біле поле,
   шапка-документ, 1240), але жанр інший: не §-документ і не пошук,
   а РЕЄСТР. Звідси інша інформаційна архітектура:

   * зверху — шкала напрямів: вісім клітин із числами й часткою смугою.
     Це не меню, це розподіл: видно, де організацій багато, а де три;
   * нижче — рядки реєстру на всю ширину, без карток-плиток;
   * у кожного рядка — смуга перевірки з шести клітин. Заповнена клітина
     означає рівно одне перевірене твердження, не «рейтинг довіри».

   Колонка з ~120 різних візерунків клітин і є об'єктом сторінки:
   масу дає щільність даних, а не декорація.
   ------------------------------------------------------------------ */

:root {
  --e-display: cubic-bezier(.16, 1, .3, 1);
  --e-body:    cubic-bezier(.25, .46, .45, .94);
  --e-ui:      cubic-bezier(.4, 0, .2, 1);
  --cell-on:   #2A2E34;
  --cell-off:  #E4E4E0;
}

/* ---------- шапка розділу ---------- */

.dhead { max-width: 1240px; margin-inline: auto; padding: clamp(30px, 4.5vw, 62px) var(--gut) 0; }
.dhead__in { display: grid; gap: clamp(16px, 2vw, 26px); }
@media (min-width: 900px) { .dhead__in { grid-template-columns: minmax(0, 1fr) 330px; column-gap: clamp(40px, 5vw, 90px); align-items: start; } }

.dhead h1 {
  margin: 0;
  font-size: clamp(2.1rem, 5.6vw, 4.1rem);
  line-height: .9;
  letter-spacing: -.028em;
  font-weight: 600;
  color: var(--ink);
  max-width: 15ch;
}
.dhead__lede { margin-top: .85rem; font-size: clamp(1.06rem, .55vw + .92rem, 1.28rem); line-height: 1.45; color: var(--ink); max-width: 46ch; }
.dhead__note { margin-top: .8rem; color: var(--muted); font-size: .93rem; line-height: 1.55; max-width: 52ch; }
.dhead__aside { border-top: 1px solid var(--ink); padding-top: .8rem; }
.dhead__aside p { color: var(--muted); font-size: .82rem; line-height: 1.5; }
.dhead__aside b { color: var(--ink); font-weight: 500; }
.dhead__aside a { color: var(--ink); }

/* ---------- шкала напрямів ---------- */

.dirs {
  max-width: 1240px; margin: clamp(26px, 3.4vw, 44px) auto 0; padding-inline: var(--gut);
  display: grid; gap: 0 clamp(10px, 1.4vw, 22px);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border-top: 1px solid var(--ink);
}
@media (min-width: 620px) { .dirs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 900px) { .dirs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (min-width: 1150px) { .dirs { grid-template-columns: repeat(9, minmax(0, 1fr)); } }

.dir {
  appearance: none; -webkit-appearance: none; background: none; border: 0;
  border-bottom: 1px solid var(--rule);
  padding: .85em 0 .7em; text-align: left; cursor: pointer; font: inherit; color: var(--ink-2);
  display: grid; gap: .34em; align-content: start;
}
.dir__n {
  font-family: var(--mono); font-size: 1.32rem; line-height: 1; color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.dir__t { font-size: .8rem; line-height: 1.25; min-height: 2.5em; }
.dir__bar { height: 3px; background: var(--paper-3); position: relative; overflow: hidden; }
.dir__bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink-2); transition: width .9s var(--e-display); }
.dir:hover { color: var(--ink); }
.dir:hover .dir__bar i { background: var(--gold); }
.dir[aria-pressed="true"] { color: var(--ink); }
.dir[aria-pressed="true"] .dir__n { color: var(--gold); }
.dir[aria-pressed="true"] .dir__bar i { background: var(--gold-2); }
.dir[aria-pressed="true"] .dir__t { font-weight: 600; }

/* ---------- панель пошуку ---------- */

.dbar {
  max-width: 1240px; margin: clamp(20px, 2.6vw, 34px) auto 0; padding-inline: var(--gut);
  display: flex; flex-wrap: wrap; gap: .9rem 1.4rem; align-items: center; justify-content: space-between;
}
.dbar__find { position: relative; flex: 1 1 260px; max-width: 420px; }
.dbar__find input {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink); background: var(--paper);
  border: 0; border-bottom: 1px solid var(--ink); padding: .55em 1.8em .5em 0; border-radius: 0;
}
.dbar__find input::placeholder { color: var(--muted); }
.dbar__find input:focus { outline: none; border-bottom-color: var(--gold); }
.dbar__find::after {
  content: ""; position: absolute; right: .1em; bottom: .95em; width: 11px; height: 11px;
  border: 1.5px solid var(--muted); border-radius: 50%;
  box-shadow: 6px 6px 0 -4.4px var(--muted); pointer-events: none;
}
.dbar__right { display: flex; gap: 1.2rem; align-items: baseline; color: var(--muted); }
.dbar__sort { display: flex; gap: .7rem; }
.dbar__sort button {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font-family: var(--mono); font-size: .78rem; color: var(--muted); border-bottom: 1px solid transparent;
}
.dbar__sort button[aria-pressed="true"] { color: var(--ink); border-bottom-color: var(--gold); }
.dbar__count { font-family: var(--mono); font-size: .78rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- реєстр ---------- */

.reg { max-width: 1240px; margin: clamp(18px, 2.2vw, 28px) auto 0; padding-inline: var(--gut); }
.reg__head {
  display: none; border-bottom: 1px solid var(--rule-2); padding-bottom: .5em;
  font-family: var(--mono); font-size: .7rem; text-transform: uppercase; letter-spacing: .12em; color: var(--muted);
}
@media (min-width: 900px) {
  .reg__head { display: grid; grid-template-columns: 2.6em minmax(0, 15.5em) minmax(0, 1fr) 11.5em 1.6em; gap: 1.2em; }
}
.reg__list { list-style: none; margin: 0; padding: 0; }
.reg__row { border-bottom: 1px solid var(--rule); }
.reg__row a {
  display: grid; gap: .3em 1.2em; padding: .95em 0 .9em; text-decoration: none; color: var(--ink-2);
  grid-template-columns: 2.6em minmax(0, 1fr);
  transition: background-color .2s var(--e-ui);
}
@media (min-width: 900px) {
  .reg__row a { grid-template-columns: 2.6em minmax(0, 15.5em) minmax(0, 1fr) 11.5em 1.6em; align-items: baseline; }
}
.reg__row a:hover, .reg__row a:focus-visible {
  background: var(--paper-2); box-shadow: 0 0 0 var(--gut) var(--paper-2); outline: none;
}
.reg__no { font-family: var(--mono); font-size: .74rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.reg__name { color: var(--ink); font-weight: 600; font-size: 1.02rem; line-height: 1.25; }
.reg__kind { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 400; color: var(--muted); margin-top: .25em; letter-spacing: .02em; }
.reg__does { color: var(--ink-2); font-size: .88rem; line-height: 1.4; grid-column: 2 / -1; }
@media (min-width: 900px) { .reg__does { grid-column: auto; } }
.reg__does span + span::before { content: " · "; color: var(--rule-2); }
.reg__go { display: none; color: var(--muted); transition: transform .25s var(--e-ui), color .25s var(--e-ui); }
@media (min-width: 900px) { .reg__go { display: block; text-align: right; } }
.reg__row a:hover .reg__go { transform: translateX(4px); color: var(--gold); }
.reg__row a:hover .reg__name { color: var(--ink); }

/* смуга перевірки */
.marks { display: flex; gap: 3px; grid-column: 2 / -1; margin-top: .15em; }
@media (min-width: 900px) { .marks { grid-column: auto; margin-top: 0; } }
.marks i {
  width: 13px; height: 15px; background: var(--cell-off); display: block;
  transform-origin: left center;
}
.marks i.on { background: var(--cell-on); }
.marks--dead i { opacity: .45; }
.reg__row a:hover .marks i.on { background: var(--gold); }

/* стан «нічого не знайшлося» */
.reg__empty { padding: 2.4em 0; color: var(--muted); display: none; }
.reg__empty.on { display: block; }

/* ---------- пояснення смуги ---------- */

.legend { max-width: 1240px; margin: clamp(30px, 4vw, 54px) auto 0; padding: 0 var(--gut); }
.legend__in { border-top: 1px solid var(--ink); padding-top: 1.1rem; display: grid; gap: 1.4rem; }
@media (min-width: 860px) { .legend__in { grid-template-columns: 300px minmax(0, 1fr); column-gap: clamp(40px, 5vw, 84px); } }
.legend h2 { margin: 0; font-size: 1.06rem; font-weight: 600; color: var(--ink); }
.legend p { color: var(--muted); font-size: .88rem; line-height: 1.6; margin-top: .5rem; max-width: 60ch; }
.legend__items { list-style: none; margin: 0; padding: 0; display: grid; gap: .55em; }
@media (min-width: 620px) { .legend__items { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.2rem; } }
.legend__items li { display: grid; grid-template-columns: 15px 1fr; gap: .7em; align-items: baseline; font-size: .88rem; }
.legend__items i { width: 13px; height: 15px; background: var(--cell-on); display: block; }
.legend__items b { color: var(--ink); font-weight: 600; }
.legend__items span { color: var(--muted); }

/* ---------- картка організації ---------- */

/* Одна сітка на всю сторінку, а не дві: у першій версії шапка й тіло були
   окремими ґратками з тією самою правою колонкою, і між ними зяяла діра
   заввишки з праву колонку. Права колонка липка — паспорт перевірки їде
   поруч із текстом. */
.org { max-width: 1240px; margin-inline: auto; padding: clamp(28px, 4vw, 58px) var(--gut) 0; display: grid; gap: clamp(20px, 2.6vw, 34px); }
@media (min-width: 960px) {
  .org { grid-template-columns: minmax(0, 1fr) 342px; column-gap: clamp(40px, 5vw, 86px); align-items: start; }
  .org__side { position: sticky; top: clamp(16px, 2vw, 28px); }
}
.org__main { max-width: 68ch; padding-bottom: clamp(20px, 3vw, 40px); }

.org__eyebrow { font-family: var(--mono); font-size: .74rem; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.org__eyebrow a { color: var(--muted); text-decoration: none; }
.org__eyebrow a:hover { color: var(--gold); }
.org h1 {
  margin: .5rem 0 0; font-size: clamp(1.95rem, 4.6vw, 3.5rem); line-height: .94;
  letter-spacing: -.026em; font-weight: 600; color: var(--ink); max-width: 17ch;
}
.org__en { margin-top: .5rem; font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.org__lede { margin-top: 1.1rem; font-size: clamp(1.06rem, .5vw + .95rem, 1.24rem); line-height: 1.5; color: var(--ink); max-width: 54ch; }
.org__does { list-style: none; margin: 1.1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em; max-width: 54ch; }
.org__does li {
  font-family: var(--mono); font-size: .76rem; color: var(--ink-2);
  border: 1px solid var(--rule-2); padding: .34em .7em; border-radius: 2px;
}
.org__src { margin-top: .9rem; color: var(--muted); font-size: .8rem; }

/* права колонка — паспорт перевірки */
.pass { border: 1px solid var(--ink); padding: 1.15rem 1.25rem 1.35rem; }
.pass__h { font-family: var(--mono); font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--muted); }
.pass__list { list-style: none; margin: .85rem 0 0; padding: 0; display: grid; gap: .5em; }
.pass__list li { display: grid; grid-template-columns: 15px 1fr; gap: .75em; align-items: baseline; font-size: .9rem; }
.pass__list i { width: 13px; height: 15px; background: var(--cell-off); display: block; }
.pass__list li.on i { background: var(--cell-on); }
.pass__list li.on b { color: var(--ink); }
.pass__list b { font-weight: 500; color: var(--muted); }
.pass__list span { grid-column: 2; color: var(--muted); font-size: .78rem; line-height: 1.45; }
.pass__when { margin-top: 1rem; padding-top: .8rem; border-top: 1px solid var(--rule); font-family: var(--mono); font-size: .72rem; color: var(--muted); display: grid; gap: .3em; }
.pass__when b { color: var(--ink); font-weight: 500; }

.cta {
  display: block; margin-bottom: .7rem; text-align: center; text-decoration: none;
  background: var(--ink); color: var(--paper); padding: .95em 1.2em;
  font-weight: 600; font-size: 1rem; letter-spacing: -.01em;
  transition: background-color .25s var(--e-ui), transform .25s var(--e-ui);
}
.cta:hover { background: var(--gold); color: var(--paper); transform: translateY(-1px); }
.cta--ghost { background: none; color: var(--ink); border: 1px solid var(--rule-2); font-weight: 500; font-size: .92rem; padding: .8em 1.2em; }
.cta--ghost:hover { background: var(--paper-2); color: var(--ink); border-color: var(--ink); transform: none; }
.cta__sub { display: block; font-family: var(--mono); font-size: .68rem; font-weight: 400; opacity: .72; margin-top: .3em; letter-spacing: .02em; }

.warn { margin-top: 1rem; border-left: 3px solid var(--flag); background: var(--paper-2); padding: .9rem 1rem; font-size: .86rem; line-height: 1.55; color: var(--ink-2); }

.osec { padding-top: clamp(26px, 3.4vw, 44px); }
.osec__h { display: grid; grid-template-columns: 2.6em 1fr; align-items: baseline; gap: .4em; border-top: 1px solid var(--ink); padding-top: .8rem; margin-bottom: 1rem; }
.osec__h i { font-family: var(--mono); font-style: normal; font-size: .78rem; color: var(--gold); }
.osec__h h2 { margin: 0; font-size: clamp(1.16rem, 1.5vw, 1.44rem); font-weight: 600; color: var(--ink); line-height: 1.25; }
.osec p + p { margin-top: .85em; }

.ways { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45em; }
.ways li { font-family: var(--mono); font-size: .78rem; color: var(--ink); background: var(--paper-2); padding: .4em .75em; }

.facts { width: 100%; border-collapse: collapse; font-size: .93rem; }
.facts th, .facts td { text-align: left; padding: .6em 0; border-bottom: 1px solid var(--rule); vertical-align: baseline; }
.facts th { font-weight: 400; color: var(--muted); width: 34%; padding-right: 1.2em; }
.facts td { color: var(--ink); }
.facts td.mono, .facts td .mono { font-family: var(--mono); font-size: .82rem; }
.facts td.no { color: var(--muted); }

.srcs { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; }
.srcs li { font-size: .88rem; }
.srcs a { word-break: break-word; }
.srcs .mono { color: var(--muted); }

.jump { display: flex; flex-wrap: wrap; gap: .5em 1.4rem; margin-top: 1.6rem; }
.jump a { font-family: var(--mono); font-size: .78rem; color: var(--muted); text-decoration: none; border-bottom: 1px solid var(--rule); }
.jump a:hover { color: var(--ink); border-bottom-color: var(--gold); }

/* ---------- сторінка «як перевірити» ---------- */

.doc { max-width: 1240px; margin-inline: auto; padding-inline: var(--gut); display: grid; }
@media (min-width: 1000px) { .doc { grid-template-columns: var(--rail) minmax(0, 1fr); column-gap: clamp(40px, 5vw, 84px); } }
.doc__col { padding-block: clamp(30px, 4vw, 56px) clamp(40px, 6vw, 90px); max-width: 68ch; }
.doc__rail { padding-block: clamp(28px, 4vw, 52px) 0; }
@media (min-width: 1000px) { .doc__rail { position: sticky; top: 0; align-self: start; height: 100vh; padding-bottom: 24px; } }
.steps { list-style: none; margin: 0; padding: 0; counter-reset: st; }
.steps li { counter-increment: st; display: grid; grid-template-columns: 3.1em 1fr; gap: .4em; padding: .95em 0; border-bottom: 1px solid var(--rule); }
.steps li:first-child { border-top: 1px solid var(--rule); }
.steps li::before { content: counter(st); font-family: var(--mono); font-size: .78rem; color: var(--gold); padding-top: .25em; }
.steps b { grid-column: 2; color: var(--ink); font-weight: 600; }
.steps span { grid-column: 2; margin-top: .25em; }

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

/* Специфічність тут вирішує все: правило-схованка має body.anim попереду,
   тому й правило-показ мусить його мати — інакше .in програє за вагою
   і сторінка лишається порожньою назавжди. Спалилось на першому ж знімку. */
body.anim [data-anim] { opacity: 0; }
body.anim [data-anim="up"] { transform: translateY(12px); }
body.anim [data-anim].in { opacity: 1; transform: none; transition: opacity .6s var(--e-body), transform .7s var(--e-display); }

/* клітини заповнюються зліва направо — «перевірка йде» */
body.anim .marks i, body.anim .pass__list i { transform: scaleX(0); }
body.anim .marks.in i, body.anim .pass__list.in i { transform: none; transition: transform .34s var(--e-display); }

/* перестановка рядків при фільтрі */
.reg__row.moving { transition: transform .28s var(--e-ui); }
.reg__row.hide { display: none; }

@media (prefers-reduced-motion: reduce) {
  body.anim [data-anim], body.anim .marks i, body.anim .pass__list i { opacity: 1; transform: none; }
  [data-anim].in, .marks.in i, .pass__list.in i, .reg__row.moving, .dir__bar i { transition: none; }
  .cta:hover { transform: none; }
}

/* ---------- вузький екран ---------- */

@media (max-width: 700px) {
  /* Шапка сайту з двома випадними меню з'їдала на телефоні 630 px до
     заголовка: пункти обох меню стоять розгорнутими. На вузькому лишаємо
     самі розділи — «Перелік» дублює «Кому донатити», а «Як перевірити фонд»
     є і в тексті вступу, і в підвалі, і внизу кожної картки. */
  .navdrop__menu { display: none; }
}

@media (max-width: 899px) {
  .dhead h1 { max-width: 12ch; }
  .reg__head { display: none; }
  .reg__row a { padding: 1em 0; }
  .marks i { width: 12px; height: 14px; }
  /* Порядок читання на телефоні: чия це сторінка → як задонатити → решта.
     display:contents розкриває .org__main, щоб три блоки стали сусідами
     у флексі й можна було переставити середній. */
  .org { display: flex; flex-direction: column; }
  .org__main { display: contents; }
  .org__head { order: 1; }
  .org__side { order: 2; }
  .org__secs { order: 3; }
}