/* ==========================================================
   Вікі — розкладка та дрібні деталі
   ----------------------------------------------------------
   Базові речі (шрифти, кольори, кнопки, картки, проза, хлібні
   крихти) беруться з theme.css — тут лише те, що є тільки у вікі:
   двоколонкова розкладка, список сторінок, анонси та горталка.
   ========================================================== */

.wiki{padding-bottom:96px}

/* ---------- двоколонкова розкладка ---------- */
.wiki__shell{
  display:grid;
  grid-template-columns:minmax(0,290px) minmax(0,1fr);
  gap:48px;
  align-items:start;
  margin-top:26px;
}

/* ---------- сайдбар зі сторінками ---------- */
.wiki__side{
  position:sticky;
  top:92px;                 /* висота навбара + відступ */
  align-self:start;
  max-height:calc(100vh - 120px);
  display:flex;
  flex-direction:column;
  gap:16px;
}
.wiki__side-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.wiki__side-title{
  display:flex;align-items:center;gap:10px;
  font-size:16px;color:var(--gold-l);
}
.wiki__side-title svg{
  width:19px;height:19px;flex:none;
  fill:none;stroke:var(--gold);stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round;
}
.wiki__side-toggle{display:none}

/* пошук */
.wiki__search{
  display:flex;align-items:center;gap:10px;
  padding:11px 14px;
  border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,var(--panel),var(--black-2));
  transition:border-color .25s,box-shadow .25s;
}
.wiki__search:focus-within{border-color:var(--line);box-shadow:0 0 0 3px rgba(245,197,66,.09)}
.wiki__search svg{
  width:17px;height:17px;flex:none;
  fill:none;stroke:#6b717c;stroke-width:1.8;stroke-linecap:round;
}
.wiki__search input{
  flex:1;min-width:0;background:none;border:0;outline:none;
  font-size:14.5px;color:var(--text);
}
.wiki__search input::placeholder{color:#6b717c}
.wiki__search input::-webkit-search-cancel-button{filter:invert(.6)}

/* список розділів — сам скролиться, щоб сторінка не «їхала» */
.wiki__cats{display:flex;flex-direction:column;gap:16px;overflow-y:auto;padding-right:4px}
.wiki__cats::-webkit-scrollbar{width:6px}
.wiki__cats::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px}

.wiki__cat-head{margin:0}
.wiki__cat-btn{
  width:100%;display:flex;align-items:center;gap:9px;
  background:none;border:0;padding:5px 2px;cursor:pointer;
  font-size:12.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-d);text-align:left;
  transition:color .2s;
}
.wiki__cat-btn:hover{color:var(--gold)}
.wiki__cat-chev{
  width:7px;height:7px;flex:none;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(-45deg);transition:transform .25s var(--ease);
}
.wiki__cat.is-open .wiki__cat-chev{transform:rotate(45deg)}
.wiki__cat-name{flex:1;min-width:0}
.wiki__cat-count{
  font-size:11.5px;letter-spacing:.02em;color:#6b717c;
  border:1px solid var(--line-2);border-radius:99px;padding:1px 8px;
}

.wiki__list{list-style:none;margin:6px 0 0;padding:0;display:none;flex-direction:column;gap:2px}
.wiki__cat.is-open .wiki__list{display:flex}
.wiki__list a{
  display:block;padding:7px 12px;border-radius:10px;
  font-size:14.5px;color:var(--muted);
  border-left:2px solid transparent;
  transition:background .2s,color .2s,border-color .2s;
}
.wiki__list a:hover{background:rgba(255,255,255,.04);color:var(--text)}
.wiki__list a.is-active{
  color:var(--gold-l);background:var(--gold-soft);
  border-left-color:var(--gold);font-weight:600;
}
.wiki__none{font-size:14px;color:#6b717c;padding:4px 2px}

/* ---------- головна вікі: заголовок і сітка гайдів ---------- */
.wiki__hero{padding:8px 0 40px;border-bottom:1px solid var(--line-2);margin-bottom:40px}
.wiki__hero h1{font-size:clamp(30px,5.2vw,50px);letter-spacing:-.02em}
.wiki__hero-sub{max-width:640px;margin-top:16px;color:var(--muted);font-size:17px}

.wiki__group{margin-bottom:44px}
.wiki__group-title{
  font-size:13px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--gold-d);margin-bottom:18px;
}
.wiki__cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:18px}
.wiki__card{
  display:flex;flex-direction:column;gap:10px;
  padding:22px;border:1px solid var(--line-2);border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(255,255,255,.028),var(--black-2));
  transition:transform .3s var(--ease),border-color .3s,box-shadow .3s;
}
.wiki__card:hover{transform:translateY(-5px);border-color:var(--line);box-shadow:var(--shadow)}
.wiki__card h3{font-size:18px;line-height:1.3}
.wiki__card p{flex:1;color:var(--muted);font-size:14.5px}
.wiki__card-more{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--gold-l);font-weight:600;font-size:14px;
}
.wiki__card-more svg{
  width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;
  transition:transform .3s var(--ease);
}
.wiki__card:hover .wiki__card-more svg{transform:translateX(4px)}

/* ---------- стаття ---------- */
.wiki__article-head{display:flex;align-items:center;gap:16px;margin-bottom:10px}
.wiki__article-ico{
  flex:none;display:grid;place-items:center;
  width:54px;height:54px;border-radius:16px;font-size:26px;line-height:1;
  background:linear-gradient(180deg,rgba(245,197,66,.16),rgba(245,197,66,.04));
  border:1px solid var(--line);
}
.wiki__article-ico:empty{display:none}
.wiki__article-head h1{font-size:clamp(28px,4.6vw,44px);letter-spacing:-.02em}
.wiki__updated{
  font-size:13px;color:#6b717c;margin-bottom:26px;
  padding-bottom:20px;border-bottom:1px solid var(--line-2);
}
.wiki__content{max-width:820px}

/* ---------- горталка «попередня / наступна» ---------- */
.wiki__pager{
  display:flex;gap:16px;flex-wrap:wrap;
  margin-top:52px;padding-top:28px;border-top:1px solid var(--line-2);
}
.wiki__pager-link{
  flex:1 1 220px;
  display:flex;flex-direction:column;gap:5px;
  padding:16px 18px;border:1px solid var(--line-2);border-radius:var(--r);
  background:linear-gradient(180deg,rgba(255,255,255,.028),var(--black-2));
  transition:border-color .25s,transform .25s var(--ease);
}
.wiki__pager-link:hover{border-color:var(--line);transform:translateY(-3px)}
.wiki__pager-link--next{text-align:right}
.wiki__pager-dir{font-size:12px;letter-spacing:.09em;text-transform:uppercase;color:var(--gold-d)}
.wiki__pager-name{color:var(--text);font-size:15px;font-weight:600}

/* ==========================================================
   Вміст сторінок вікі
   ----------------------------------------------------------
   Текст писався під стару вікі, тому поруч із нормальним HTML
   трапляються <font>, інлайнові кольори та картинки. Ці правила
   приводять таке до теми, не вимагаючи переписувати сам текст.
   ========================================================== */
.wiki__content font{color:inherit !important;font-size:inherit !important}
.wiki__content p:empty,.wiki__content div:empty{display:none}   /* порожні обгортки не створюють дірок */
.wiki__content img.wiki-img{margin:14px auto;border-radius:var(--r);border:1px solid var(--line-2)}
.wiki__content img[data-align="center"]{margin-left:auto;margin-right:auto}
.wiki__content table{width:100%;border-collapse:collapse;font-size:14.5px;margin:20px 0}
.wiki__content th,.wiki__content td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line-2)}
.wiki__content thead th{color:var(--gold-d);font-size:12px;letter-spacing:.11em;text-transform:uppercase}

/* Іконки предметів і блоків: у тексті вони стоять поряд із рядком. */
.mc-icon{
  display:inline-block;vertical-align:-.25em;
  width:22px;height:22px;object-fit:contain;margin:0 2px;
  image-rendering:pixelated;border:0;
}
.mc-icon-sm{width:18px;height:18px;margin-right:8px}
.mc-icon-lg{width:34px;height:34px;vertical-align:middle}

/* Кольорові вставки, якими в старій вікі виділяли важливе. */
.wiki-box{
  padding:16px 20px;border-radius:var(--r);margin:20px 0;
  border:1px solid var(--line);background:rgba(245,197,66,.06);
  border-left:3px solid var(--gold);
}
.wiki-box > *:first-child{margin-top:0}
.wiki-box > *:last-child{margin-bottom:0}
.wiki-box-info{border-color:var(--line-2);border-left-color:#4aadec;background:rgba(74,173,236,.07)}
.wiki-box-success{border-left-color:var(--ok);background:rgba(91,208,122,.07);border-color:rgba(91,208,122,.25)}
.wiki-box-warn{border-left-color:#E8A33D;background:rgba(232,163,61,.07);border-color:rgba(232,163,61,.25)}
.wiki-box-danger{border-left-color:var(--off);background:rgba(228,87,76,.07);border-color:rgba(228,87,76,.28)}

/* ==========================================================
   Мобільні
   ========================================================== */
@media (max-width:900px){
  .wiki__shell{grid-template-columns:minmax(0,1fr);gap:26px;margin-top:18px}
  .wiki__side{
    position:static;max-height:none;
    padding:16px;border:1px solid var(--line-2);border-radius:var(--r-lg);
    background:linear-gradient(180deg,var(--panel),var(--black-2));
  }
  .wiki__side-toggle{
    display:inline-flex;align-items:center;
    padding:7px 14px;border:1px solid var(--line);border-radius:99px;
    background:rgba(245,197,66,.08);color:var(--gold-l);
    font-size:13.5px;font-weight:600;cursor:pointer;
  }
  /* На телефоні список ховаємо під кнопку: інакше він з'їдає весь екран. */
  .wiki__cats{display:none}
  .wiki__cats.is-open{display:flex;max-height:60vh}
  .wiki__hero{padding:4px 0 28px;margin-bottom:28px}
  .wiki__cards{grid-template-columns:1fr}
  .wiki__article-head{gap:12px}
  .wiki__article-ico{width:44px;height:44px;border-radius:13px;font-size:22px}
  .wiki__pager-link{flex:1 1 100%}
  .wiki__pager-link--next{text-align:left}
}