/* Рейтинг доброчесності — оформлення в мові Громадянської Антикорупційної
   Платформи (antykor.org.ua) та інших проєктів АІЦО: великий заголовок
   великими літерами, зелено-бірюзовий градієнт, круглі кнопки-пігулки, білі
   картки з тонкою бірюзовою рамкою на крижаному тлі, темний блок для
   пояснень. Сторінка вбудовується в їхній сайт — вона має виглядати його
   частиною, а не гостем. */

/* «Маріуполь» — шрифт самої платформи: файли надіслав замовник 27.08.2026
   разом із дозволом поставити його на цю сторінку. Три накреслення, повна
   українська абетка. */
@font-face{
  font-family:Mariupol; font-style:normal; font-weight:400; font-display:swap;
  src:url(/static/mariupol-regular.woff2) format("woff2");
}
@font-face{
  font-family:Mariupol; font-style:normal; font-weight:500; font-display:swap;
  src:url(/static/mariupol-medium.woff2) format("woff2");
}
@font-face{
  font-family:Mariupol; font-style:normal; font-weight:600 800; font-display:swap;
  src:url(/static/mariupol-bold.woff2) format("woff2");
}
@font-face{
  font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/static/inter-cyrillic.woff2) format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:Inter; font-style:normal; font-weight:400 700; font-display:swap;
  src:url(/static/inter-latin.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
    U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
/* Inter лишається запасним — на випадок символів, яких немає в «Маріуполі».
   Обидва лежать у нас, а не в Google: сторінка обіцяє, що нічого стороннього
   не вантажить. Ліцензія Inter: /static/inter-OFL.txt. */

:root{
  --ice:#ebf6fb;
  --card:#fff;
  --card-2:#f6f8f9;
  --ink:#12242c;
  --ink-soft:#33505c;
  --muted:#5b7580;
  --line:#d5e7ed;
  --line-soft:#e6f0f4;

  --teal:#36b2ba;
  --teal-deep:#1c8b93;
  --teal-soft:#e2f3f4;
  --green:#64cf4d;
  --grad:linear-gradient(59deg,#64cf4d 0%,#0db5cd 100%);

  --slate:#121a29;
  --slate-2:#193b48;
  --slate-line:#2c4f5e;

  --sun:#ffd166;
  --amber-soft:#fff6e0;
  --amber-line:#f2e0b4;
  --amber-ink:#6b4e07;

  --bad:#b3352c; --warn:#a5700f; --ok:#16794c;
  --r:30px; --r-sm:15px;
  --shadow:0 10px 30px -18px rgba(15,60,70,.45);
  --shadow-lift:0 16px 36px -18px rgba(15,60,70,.5);
  --ff:Mariupol,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --ff-head:Mariupol,Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
}

@media (prefers-color-scheme:dark){
  :root{
    --ice:#0e1b21; --card:#17272f; --card-2:#1d303a; --ink:#e8f0f3; --ink-soft:#c2d4da;
    --muted:#93aab3; --line:#2a4550; --line-soft:#213842;
    --teal:#3ec2c9; --teal-deep:#2aa2a9; --teal-soft:#17343a;
    --slate:#0f2027; --slate-2:#18303a; --slate-line:#2c4b57;
    --amber-soft:#2c2415; --amber-line:#4a3c1c; --amber-ink:#e6cd93;
    --bad:#d1584e; --warn:#d9a03a; --ok:#3f9d70;
    --shadow:0 10px 30px -18px rgba(0,0,0,.8);
    --shadow-lift:0 16px 36px -18px rgba(0,0,0,.9);
  }
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;padding:0}
body{
  background:var(--ice); color:var(--ink);
  padding:0 22px;
  font:400 16px/1.55 var(--ff);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
:focus-visible{outline:3px solid var(--teal);outline-offset:2px;border-radius:8px}
@media (prefers-reduced-motion:reduce){*{transition:none !important;animation:none !important;scroll-behavior:auto !important}}

.wrap{max-width:916px;margin:0 auto;padding:0}
h1,h2,h3{margin:0;font-family:var(--ff-head);font-weight:600;line-height:1.18;letter-spacing:-.01em}
h1{font-size:clamp(23px,5.2vw,34px);text-transform:uppercase;letter-spacing:.005em}
h2{font-size:20px}

/* --------------------------------------------------------------- шапка */
.top{
  background:var(--grad);color:#fff;border-radius:30px;margin:16px auto 0;max-width:916px;
  padding:30px 0 32px;position:relative;overflow:hidden;
}
.top::after{
  content:"";position:absolute;right:-120px;top:-140px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.16),transparent 62%);pointer-events:none;
}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:18px;position:relative;
  max-width:none;padding:0 34px}
.brand{display:flex;align-items:center;gap:16px;min-width:0;text-decoration:none;color:inherit}
.mark{width:46px;height:53px;flex:none;display:block}
.mark .shield{fill:rgba(255,255,255,.14);stroke:#fff;stroke-width:2.2;stroke-opacity:.75}
.mark .bars{fill:#fff}
.mark .up{fill:var(--sun)}
.kicker{margin:8px 0 0;font-size:14.5px;line-height:1.45;opacity:.92;max-width:52ch;font-weight:400}
.topright{display:flex;flex-direction:column;align-items:flex-end;gap:9px;flex:none}
.platform{background:#fff;border-radius:14px;padding:10px 13px;display:block;line-height:0;
  box-shadow:0 4px 14px rgba(8,60,50,.16)}
.platform img{width:136px;height:auto;display:block}
.who{font-size:12.5px;opacity:.92;text-align:right;max-width:22ch;line-height:1.4}

/* ---------------------------------------------------------- смуга пілота */
.pilotbar .wrap{
  background:var(--amber-soft);border:1px solid var(--amber-line);color:var(--amber-ink);
  border-radius:var(--r-sm);font-size:13.5px;line-height:1.45;padding:12px 18px;
  max-width:916px;margin:14px auto 0;
}
.pilotbar{padding:0}

/* ------------------------------ чий це рейтинг і як перейти на платформу */
.parent .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  background:var(--teal-soft);border:1px solid var(--line);border-left:5px solid var(--teal);
  border-radius:var(--r-sm);padding:14px 18px;margin:14px auto 0;max-width:916px;
}
.parent p{margin:0;font-size:14.5px;line-height:1.5;color:var(--ink-soft);max-width:60ch}
.parent .btn{flex:none;text-decoration:none;padding:12px 20px;font-size:14px}

/* друга кнопка після голосування — того ж розміру, іншого кольору (замовник, 29.08) */
.btn.alt{
  background:var(--slate);border-color:var(--slate);color:#fff;text-decoration:none;
  display:inline-block;
}
.btn.alt:hover{background:var(--slate-2);border-color:var(--slate-2)}

/* ------------------------------------------------------------- категорії */
.tabs{
  position:sticky;top:0;z-index:5;background:var(--ice);max-width:916px;margin:0 auto;
  display:flex;gap:8px;overflow-x:auto;padding:14px 0 12px;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;background:var(--card);border:1px solid var(--line);border-radius:8px;
  color:var(--muted);font:500 14.5px/1 var(--ff-head);padding:11px 18px;cursor:pointer;white-space:nowrap;
  transition:color .15s ease,background .15s ease,border-color .15s ease;
}
.tab:hover:not([disabled]){color:var(--teal-deep);border-color:var(--teal)}
.tab[aria-selected="true"]{background:var(--teal);border-color:var(--teal);color:#fff;font-weight:600}
.tab[disabled]{opacity:.5;cursor:default}

/* ---------------------------------------------------------------- картки */
main{padding:6px 0 52px}
.card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:28px;margin:0 0 20px;
}
.lead{margin:0 0 22px;color:var(--muted);font-size:15.5px;max-width:68ch}
.step{margin-top:22px}
.step:first-of-type{margin-top:0}
.step h2{display:flex;align-items:center;gap:12px}
.num{
  display:inline-grid;place-items:center;width:30px;height:30px;flex:none;border-radius:50%;
  background:var(--grad);color:#fff;font:600 14px/1 var(--ff-head);
}

/* ------------------------------------------------------- вибір зі списку */
.grid{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));margin-top:18px}
.pick{
  text-align:left;background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 16px;font:500 15px/1.35 var(--ff);color:var(--ink);cursor:pointer;min-height:54px;
  transition:border-color .15s ease,background .15s ease,transform .12s ease,box-shadow .15s ease;
}
.pick:hover:not([disabled]){border-color:var(--teal);background:var(--teal-soft);transform:translateY(-1px);box-shadow:var(--shadow)}
.pick:active:not([disabled]){transform:translateY(0)}
.pick[disabled]{opacity:.45;cursor:not-allowed}
.pick small{display:block;color:var(--muted);font-weight:400;font-size:12.5px;margin-top:4px}
.pick.on{border-color:var(--teal);background:var(--teal-soft)}

/* ------------------------------------------------------------------ вхід */
.signin{
  display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between;
  background:var(--teal-soft);border:1px solid var(--line);border-left:5px solid var(--teal);
  border-radius:18px;padding:20px;margin-bottom:22px;
}
.signin b{font-size:16px;display:block;margin-bottom:2px;font-family:var(--ff-head);font-weight:600}
.signin p{margin:7px 0 0;color:var(--ink-soft);font-size:13.5px;line-height:1.55;max-width:56ch}
.signin p a{color:var(--teal-deep);text-underline-offset:2px}
.signin-btns{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.signin-btns .btn{text-decoration:none;display:inline-block}
.authmsg{
  margin:0 0 20px;padding:13px 16px;border-radius:var(--r-sm);font-size:14px;
  background:#e9f6ee;border:1px solid #c3ddcb;border-left:5px solid var(--ok);color:#1c5c3b;
}
.authmsg.bad{background:#fbeceb;border-color:#f0c9c6;border-left-color:var(--bad);color:#8f2f29}

/* ------------------------------------------------------------------ шкала */
.chosen{margin:12px 0 0;font-weight:600;font-size:16.5px;font-family:var(--ff-head)}
.scale{display:grid;gap:10px;margin-top:18px}
.opt{
  display:block;text-align:left;background:var(--card-2);border:1px solid var(--line);
  border-left:6px solid var(--line);border-radius:16px;padding:16px 18px;cursor:pointer;
  transition:border-color .15s ease,background .15s ease,transform .12s ease,box-shadow .15s ease;
}
.opt:hover{background:var(--card);transform:translateY(-1px);box-shadow:var(--shadow-lift)}
.opt b{display:block;font:600 16px/1.3 var(--ff-head);margin-bottom:4px}
.opt span span{color:var(--muted);font-size:13.5px;line-height:1.5;display:block}
.s1{border-left-color:var(--bad)} .s2{border-left-color:#c05f2c} .s3{border-left-color:var(--warn)}
.s4{border-left-color:#2f9e6a} .s5{border-left-color:var(--green)}
.s1:hover{border-color:var(--bad)} .s2:hover{border-color:#c05f2c} .s3:hover{border-color:var(--warn)}
.s4:hover{border-color:#2f9e6a} .s5:hover{border-color:var(--green)}

/* ------------------------------------------------------- кнопки-пігулки */
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
/* Кнопки на antykor прямокутні із заокругленням 8 і рамкою 2px, а не пігулки —
   пігулки я взяв був із «Ментал хелп», сусіднього проєкту, і це було не те. */
.chip,.btn{
  background:var(--teal);color:#fff;border:2px solid var(--teal);border-radius:8px;
  padding:16px 28px;font:600 15px/1 var(--ff-head);cursor:pointer;letter-spacing:.02em;
  transition:background .15s ease,border-color .15s ease,transform .12s ease;
}
.chip:hover,.btn:hover{background:var(--teal-deep);border-color:var(--teal-deep);transform:translateY(-1px)}
.chip:active,.btn:active{transform:translateY(0)}
.btn{padding:15px 26px}
.btn.ghost{background:transparent;color:var(--teal-deep);border:2px solid var(--teal)}
.btn.ghost:hover{background:var(--teal-soft)}
.rowbtn{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

/* ------------------------------------------------------------- результат */
.res{
  border:1px solid var(--line);border-radius:22px;padding:26px;margin-top:18px;
  background:var(--card-2);max-width:660px;
}
.res h3{margin:0 0 16px;font:600 17px/1.35 var(--ff-head)}
.idx{display:flex;align-items:baseline;gap:12px}
.idx b{font:700 66px/.92 var(--ff-head);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.idx small{color:var(--muted);font:600 12.5px/1 var(--ff-head);text-transform:uppercase;letter-spacing:.12em}
.bar{
  position:relative;height:14px;border-radius:999px;margin:26px 0 10px;
  background:linear-gradient(90deg,#eec5c0 0 30%,#f7e3ae 30% 70%,#b3e0c6 70% 100%);
  box-shadow:inset 0 0 0 1px rgba(18,36,44,.07);
}
.bar i{
  position:absolute;top:-6px;width:7px;height:26px;border-radius:4px;background:var(--ink);
  box-shadow:0 0 0 3px var(--card-2),0 3px 8px rgba(15,60,70,.3);margin-left:-3.5px;
}
.bar u{
  position:absolute;top:-2px;width:2px;height:18px;border-radius:1px;background:var(--muted);
  opacity:.6;margin-left:-1px;
}
.legend{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}
.warnbox{
  background:var(--amber-soft);border:1px solid var(--amber-line);border-left:5px solid #e0a41c;
  border-radius:var(--r-sm);padding:14px 16px;font-size:13.5px;line-height:1.5;
  color:var(--amber-ink);margin-top:18px;
}

/* ---------------------------------------------------------------- таблиця */
.boardtitle{text-transform:uppercase;letter-spacing:.01em;margin-bottom:4px;font-size:21px}
#boardfilter{margin:14px 0 2px}
#boardfilter label{color:var(--muted);font-size:14px}
.regionsel{
  margin-left:8px;padding:10px 14px;border-radius:8px;border:1px solid var(--line);
  background:var(--card);color:inherit;font:500 14.5px/1 var(--ff);max-width:100%;cursor:pointer;
}
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:16px}
table{width:100%;border-collapse:collapse;font-size:15px}
th,td{text-align:left;padding:13px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle}
thead th{
  font:600 11.5px/1 var(--ff-head);text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  padding-bottom:11px;border-bottom:1px solid var(--line);
}
tbody tr{transition:background .12s ease}
tbody tr:hover{background:var(--card-2)}
tbody tr:last-child td{border-bottom:0}
td:first-child{font-weight:600;line-height:1.35}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
td.reg{color:var(--muted);white-space:nowrap;font-size:13.5px}
/* Світлофор за твердими межами (замовник, 28.08): 70+ зелений, 30–69 жовтий,
   нижче 30 червоний. Жовтий — справжній жовтий із темним текстом: темний
   бурштин із білим текстом читався як коричневий, і 73 бали виглядали погано. */
.pill{
  display:inline-block;min-width:50px;text-align:center;padding:7px 13px;border-radius:8px;
  font:700 15px/1 var(--ff-head);color:#fff;font-variant-numeric:tabular-nums;
}
.pill.g{background:#1a8f4a}
.pill.y{background:#f5c518;color:#2f2405}
.pill.r{background:#d23b2e}
.pill.n{background:#8a97a4}
.idx b.g{color:#17864a} .idx b.y{color:#d9a006} .idx b.r{color:#c8362c}
.idx b.n{color:var(--muted)}
.hint{color:var(--muted);font-size:13.5px;line-height:1.5;margin:12px 0 0;max-width:72ch}

/* Право установи на відповідь обіцяне в застереженні, тож має бути видно й на
   екрані, а не лише в тексті. */
.replyrow td{padding-top:0}
.reply{background:var(--teal-soft);border:1px solid var(--line);border-left:5px solid var(--teal);
  border-radius:12px;padding:12px 15px;margin:0 0 6px}
.reply summary{cursor:pointer;font:600 13.5px/1.3 var(--ff-head);color:var(--teal-deep)}
.reply p{margin:9px 0 0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.reply .by{font-size:12.5px;color:var(--muted);margin-top:7px}
.res .reply{margin-top:16px}

/* ------------------------------------------------ як рахується: темний блок */
.card.dark{
  background:
    radial-gradient(circle at 94% 90%, #121a29 0%, rgba(18,26,41,0) 87%),
    radial-gradient(circle at 6% 88%, rgba(25,59,72,.99) 0%, rgba(25,59,72,0) 94%),
    radial-gradient(circle at 6% 13%, #121a29 0%, rgba(18,26,41,0) 100%),
    radial-gradient(circle at 94% 11%, #193b48 0%, rgba(25,59,72,0) 81%),
    #16293a;
  border-color:transparent;color:#e7f0f3;
}
.card.dark h2{color:#fff;text-transform:uppercase;letter-spacing:.01em;margin-bottom:18px;font-size:21px}
.card.dark p{font-size:15px;color:#bed2d9;margin:0 0 14px;max-width:74ch}
.card.dark p:last-of-type{margin-bottom:0}
.card.dark strong{color:#fff;font-weight:600}
.card.dark code{
  display:inline-block;background:rgba(255,255,255,.09);padding:4px 10px;border-radius:8px;
  color:#9fe4e6;font-size:13.5px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
.card.dark .disclaimer{
  margin-top:24px;padding:20px 22px;border:1px solid var(--slate-line);border-radius:18px;
  background:var(--slate-2);
}
.card.dark .disclaimer h3{
  margin:0 0 12px;font:600 12.5px/1 var(--ff-head);text-transform:uppercase;
  letter-spacing:.1em;color:#8fb6c0;
}
.card.dark .disclaimer p{font-size:14px;margin:0 0 11px;color:#c6d8de}
.card.dark .disclaimer p:last-child{margin-bottom:0}
details summary{cursor:pointer;font-weight:600;margin-top:14px}

/* ------------------------------------------------------------------ підвал */
.foot{color:var(--muted);font-size:13px;padding:10px 0 38px;text-align:center}
.foot p{margin:5px 0}
.doc a,.foot a{color:var(--teal-deep);text-underline-offset:2px}

/* --------------------------------------------------- сторінки-документи */
.doc{padding:20px 0 44px}
.doc .card h2{
  margin:28px 0 10px;font-size:17px;color:var(--ink);text-transform:none;letter-spacing:-.01em;
}
.doc .card h2:first-of-type{margin-top:0}
.doc .card p,.doc .card li{font-size:15px;color:var(--muted);line-height:1.62}
.doc .card ul{margin:8px 0 0;padding-left:22px}
.doc .card li{margin:6px 0}
.doc .card strong{color:var(--ink)}
.doc .lead{color:var(--ink);font-size:16.5px;font-weight:500;line-height:1.55}

/* ------------------------------------------------------------------ телефон */
@media (max-width:640px){
  body{padding:0 12px}
  .top{margin:10px auto 0;border-radius:20px;padding:24px 0 26px}
  .top .wrap{padding:0 18px}
  .mark{width:40px;height:46px}
  .pilotbar .wrap{padding:10px 14px;margin:10px auto 0}
  .parent .wrap{flex-direction:column;align-items:stretch;gap:12px;padding:14px}
  .parent .btn{text-align:center}
  .tabs{padding:12px 0 10px;gap:6px}
  .tab{padding:10px 15px;font-size:14px}
  main{padding:4px 0 40px}
  .card{padding:20px 17px;border-radius:20px}
  .grid{grid-template-columns:1fr 1fr;gap:8px}
  .pick{padding:13px;font-size:14px;min-height:50px}
  .who{display:none}
  /* На телефоні шапка стає стовпчиком: логотип поруч із заголовком не
     вміщався й накривав його. Лишається праворуч, але під назвою. */
  .top .wrap{flex-direction:column;align-items:stretch;gap:16px}
  .topright{align-items:flex-end}
  .platform{padding:8px 10px;border-radius:12px}
  .platform img{width:116px}
  .idx b{font-size:56px}
  .signin{padding:17px;gap:14px}
  .signin-btns{width:100%}
  .chip{width:100%;text-align:center}
  .res{padding:20px}
  .disclaimer{padding:16px 17px}

  /* рейтинг стає списком карток: тягати таблицю вбік на телефоні означає
     показати людині половину рейтингу */
  .tablewrap{overflow:visible}
  thead{display:none}
  table,tbody,tr,td{display:block}
  tbody tr{
    display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:14px;
    padding:14px 2px;border-bottom:1px solid var(--line-soft);
  }
  tbody tr:hover{background:none}
  td{border:0;padding:0}
  td:first-child{grid-column:1;grid-row:1;font-size:15px}
  td.reg{grid-column:1;grid-row:2;font-size:13px;margin-top:3px;white-space:normal}
  td.n{grid-column:2;grid-row:1/3;text-align:right}
}

@media (max-width:400px){
  .grid{grid-template-columns:1fr}
}