/*
 * Оформление подробных инструкций базы знаний.
 *
 * Подключается на страницах /it/kb/*.html. Здесь собраны стили статьи:
 * верхняя панель с кнопкой «Назад», карточка-заголовок, содержание,
 * пошаговые блоки, предупреждения и нижняя навигация. Комментарии оставлены
 * на русском языке, чтобы новичку было проще найти нужный визуальный блок.
 */

.kb-article-wrap{
  max-width:1080px;
  margin:0 auto;
  padding:24px 16px 56px;
}

/* Верхняя строка навигации. Кнопка возвращает к списку инструкций или назад в истории браузера. */
.kb-back-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:16px;
}

.kb-back{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:40px;
}

.kb-updated{
  color:var(--muted);
  font-size:13px;
}

/* Главный блок статьи: кратко объясняет, кому нужна инструкция и что получится в итоге. */
.kb-hero{
  padding:24px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.18);
  background:
    radial-gradient(900px 260px at 18% 0%, rgba(255,140,0,.16), transparent 62%),
    linear-gradient(135deg, rgba(7,30,61,.88), rgba(5,38,75,.78));
  box-shadow:0 18px 48px rgba(0,0,0,.28);
  backdrop-filter:blur(10px) saturate(170%);
  -webkit-backdrop-filter:blur(10px) saturate(170%);
}

.kb-hero h1{
  margin:8px 0 10px;
}

.kb-lead{
  max-width:78ch;
  color:#dbeafe;
  font-size:16px;
}

.kb-meta-pills{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.kb-pill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.07);
  color:var(--text);
  padding:5px 10px;
  font-size:12px;
}

.kb-pill--accent{
  color:var(--brand);
  border-color:rgba(255,140,0,.42);
  background:rgba(255,140,0,.12);
}

/* Основная раскладка: слева содержание, справа текст инструкции. */
.kb-layout{
  display:grid;
  grid-template-columns:minmax(220px,280px) minmax(0,1fr);
  gap:18px;
  margin-top:18px;
}

.kb-toc,
.kb-section,
.kb-related{
  border:1px solid rgba(255,255,255,.16);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(8,28,58,.78), rgba(6,20,43,.72));
  box-shadow:0 14px 34px rgba(0,0,0,.24);
  backdrop-filter:blur(8px) saturate(160%);
  -webkit-backdrop-filter:blur(8px) saturate(160%);
}

.kb-toc{
  position:sticky;
  top:96px;
  align-self:start;
  padding:16px;
}

.kb-toc h2{
  margin:0 0 10px;
  font-size:18px;
}

.kb-toc a{
  display:block;
  padding:7px 0;
  color:var(--muted);
  text-decoration:none;
}

.kb-toc a:hover{
  color:var(--brand);
  text-decoration:none;
}

.kb-content{
  display:grid;
  gap:16px;
}

.kb-section{
  padding:20px;
}

.kb-section h2{
  margin-top:0;
}

.kb-section ol,
.kb-section ul{
  margin:10px 0 0 20px;
  padding:0;
}

.kb-section li{
  margin:8px 0;
}

/* Цветные подсказки: используются для важных замечаний и предупреждений. */
.kb-callout,
.kb-warning,
.kb-success{
  margin-top:14px;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
}

.kb-callout{
  background:rgba(0,164,219,.10);
  border-color:rgba(0,164,219,.26);
}

.kb-warning{
  background:rgba(231,76,60,.10);
  border-color:rgba(231,76,60,.30);
}

.kb-success{
  background:rgba(46,204,113,.10);
  border-color:rgba(46,204,113,.30);
}

.kb-check-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
}

.kb-check{
  padding:12px;
  border-radius:14px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}

/* Карточки типовых проблем: пользователь видит симптом, причину и конкретное решение. */
.kb-problem-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  gap:12px;
  margin-top:12px;
}

.kb-problem{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}

.kb-problem h3{
  margin:0 0 8px;
  font-size:17px;
}

.kb-problem p{
  margin:7px 0;
}

.kb-problem .kb-do{
  color:#d8f6df;
}

/* Таблицы, раскрывающиеся подсказки и клавиши нужны для более подробных инструкций. */
.kb-table{
  width:100%;
  border-collapse:collapse;
  overflow:hidden;
  border-radius:14px;
  margin-top:12px;
}

.kb-table th,
.kb-table td{
  padding:10px 12px;
  border:1px solid rgba(255,255,255,.12);
  text-align:left;
  vertical-align:top;
}

.kb-table th{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.kb-table td{
  background:rgba(255,255,255,.04);
}

.kb-section details{
  margin:10px 0;
  padding:12px 14px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.045);
}

.kb-section summary{
  cursor:pointer;
  font-weight:700;
  color:#fff;
}

kbd{
  display:inline-block;
  padding:2px 7px;
  border-radius:7px;
  border:1px solid rgba(255,255,255,.22);
  background:rgba(255,255,255,.10);
  color:#fff;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.28);
}

.kb-related{
  padding:18px;
}

.kb-related-list{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.kb-bottom-actions{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

code{
  color:#ffdfa8;
}

@media (max-width:900px){
  .kb-layout{
    grid-template-columns:1fr;
  }

  .kb-toc{
    position:static;
  }

  .kb-check-grid{
    grid-template-columns:1fr;
  }
}