:root {
  --bg: #0f1419;
  --panel: #1a212b;
  --panel-2: #232c38;
  --fg: #e6edf3;
  --muted: #8b98a9;
  --accent: #5aa9e6;
  --accent-2: #3fb950;
  --border: #2b3543;
  --term-bg: #0a0e13;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: system-ui, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--fg);
  line-height: 1.55;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.muted { color: var(--muted); }
.small { font-size: 0.85em; }

/* --- topbar --- */
.topbar {
  display: flex; align-items: center; gap: 2rem;
  padding: 0.8rem 1.5rem;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
.brand { font-weight: 700; font-size: 1.15rem; color: var(--fg); }
.brand span { color: var(--accent); }
.mainnav { display: flex; gap: 1.2rem; }
.mainnav a { color: var(--muted); padding: 0.2rem 0; border-bottom: 2px solid transparent; }
.mainnav a:hover { color: var(--fg); text-decoration: none; }
.mainnav a.is-active { color: var(--fg); border-bottom-color: var(--accent); }

.content { max-width: 1100px; margin: 0 auto; padding: 2rem 1.5rem; }
.footer { text-align: center; color: var(--muted); padding: 2rem; font-size: 0.85rem; }

/* --- home --- */
.hero h1 { font-size: 2rem; margin-bottom: 0.4rem; }
.lead { color: var(--muted); font-size: 1.1rem; max-width: 60ch; }
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; margin-top: 2rem; }
.card {
  display: block; padding: 1.2rem; background: var(--panel);
  border: 1px solid var(--border); border-radius: 10px; color: var(--fg);
}
.card:hover { border-color: var(--accent); text-decoration: none; }
.card h2 { margin: 0 0 0.4rem; font-size: 1.15rem; }
.card p { margin: 0; color: var(--muted); font-size: 0.92rem; }

/* --- listings --- */
.tag {
  display: inline-block; padding: 0.05rem 0.5rem; margin-left: 0.3rem;
  font-size: 0.75rem; background: var(--panel-2); color: var(--muted);
  border-radius: 999px; vertical-align: middle;
}
.termlist, .tasklist { list-style: none; padding: 0; }
.termlist li, .tasklist li {
  padding: 0.7rem 0; border-bottom: 1px solid var(--border);
}

/* --- glossary hover plaque --- */
.term {
  position: relative; border-bottom: 1px dashed var(--accent);
  cursor: help; color: var(--fg);
}
.term-popover { position: absolute; left: 0; top: 100%; z-index: 20; }
.term-popover-card {
  display: none; position: absolute; left: 0; top: 0.3rem; width: 280px;
  padding: 0.7rem 0.9rem; background: var(--panel-2); border: 1px solid var(--border);
  border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.4); font-size: 0.88rem;
}
.term:hover .term-popover-card, .term:focus .term-popover-card { display: block; }
.term-popover-short { display: block; color: var(--muted); margin: 0.3rem 0; }

/* --- practice lab layout (Katacoda: задание | терминал) --- */
/* minmax(0,1fr) + min-width:0 — чтобы широкий <pre>/код в описании НЕ раздувал
   колонку и не «прыгала» ширина терминала; контент скроллится внутри колонки. */
.lab { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1rem; min-height: 70vh; }
.lab-task, .lab-term {
  min-width: 0;
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.2rem;
}
.lab-term {
  display: flex; flex-direction: column; background: var(--panel);
  position: sticky; top: 1rem; max-height: calc(100vh - 2rem);
}
.lab-term-head { margin-bottom: 0.6rem; font-weight: 600; color: var(--muted); }
.lab-actions { display: flex; gap: 0.5rem; margin: 1rem 0 0.4rem; flex-wrap: wrap; }
.term-screen {
  flex: 1; min-height: 440px; background: var(--term-bg);
  border: 1px solid var(--border); border-radius: 6px; padding: 0.5rem 0.5rem 0.5rem 0.6rem;
  overflow: hidden;            /* xterm сам скроллит; контейнер не должен дёргать ширину */
  scrollbar-gutter: stable;
}
.term-screen .xterm { height: 100%; }
/* overflow-y: scroll (а не auto) — скроллбар всегда в потоке, поэтому xterm меряет
   его ширину при открытии и FitAddon резервирует место: текст не уезжает под него. */
.term-screen .xterm-viewport { overflow-y: scroll; scrollbar-width: thin; scrollbar-color: var(--border) transparent; }
.term-screen .xterm-viewport::-webkit-scrollbar { width: 9px; }
.term-screen .xterm-viewport::-webkit-scrollbar-track { background: transparent; }
.term-screen .xterm-viewport::-webkit-scrollbar-thumb { background: var(--border); border-radius: 5px; }
.term-screen .xterm-viewport::-webkit-scrollbar-thumb:hover { background: var(--muted); }

/* результат проверки / сообщения сессии */
.verify-result { margin-top: 0.6rem; }
.verify { padding: 0.5rem 0.8rem; border-radius: 6px; border: 1px solid var(--border); font-weight: 600; }
.verify.is-ok { color: var(--accent-2); border-color: var(--accent-2); background: rgba(63,185,80,.08); }
.verify.is-bad { color: #e5534b; border-color: #e5534b; background: rgba(229,83,75,.08); }
.verify.is-info { color: var(--accent); border-color: var(--accent); background: rgba(90,169,230,.08); font-weight: 500; }

/* --- task description / hints --- */
.lab-desc { margin: 0.5rem 0 1rem; }
.lab-desc h1 { font-size: 1.4rem; margin-top: 0; }
.lab-desc h2 { font-size: 1.1rem; }
.lab-desc code, .hint-body code {
  background: var(--term-bg); padding: 0.1rem 0.35rem; border-radius: 4px;
  font-family: "Cascadia Code", "Consolas", monospace; font-size: 0.85em;
}
.lab-desc pre { background: var(--term-bg); padding: 0.8rem; border-radius: 6px; overflow: auto; }
.lab-desc blockquote {
  margin: 1rem 0; padding: 0.3rem 0.9rem; border-left: 3px solid var(--accent);
  color: var(--muted);
}
.lab-hints { margin-top: 1.2rem; border-top: 1px solid var(--border); padding-top: 0.8rem; }
.lab-hints h2 { font-size: 1.05rem; }
.lab-hints details {
  background: var(--panel-2); border: 1px solid var(--border); border-radius: 6px;
  padding: 0.4rem 0.7rem; margin-bottom: 0.5rem;
}
.lab-hints summary { cursor: pointer; color: var(--accent); }
.hint-body { margin-top: 0.5rem; }

/* --- wiki --- */
.wiki-filter { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1rem 0 1.5rem; }
.wiki-filter a {
  padding: 0.2rem 0.7rem; background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-radius: 999px; font-size: 0.85rem;
}
.wiki-filter a:hover { color: var(--fg); text-decoration: none; }
.wiki-filter a.is-active { color: var(--fg); border-color: var(--accent); }
.wiki-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1rem; }
.wiki-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
  padding: 1rem 1.2rem; scroll-margin-top: 5rem;
}
.wiki-card header { display: flex; align-items: baseline; gap: 0.5rem; }
.wiki-card h2 { font-size: 1.1rem; margin: 0; }
.wiki-body { font-size: 0.92rem; margin-top: 0.5rem; }
.wiki-body code, .theory-body code, .term-popover-card code {
  background: var(--term-bg); padding: 0.1rem 0.35rem; border-radius: 4px;
  font-family: "Cascadia Code", "Consolas", monospace; font-size: 0.85em;
}
.wiki-body pre, .theory-body pre {
  background: var(--term-bg); padding: 0.8rem; border-radius: 6px; overflow: auto;
}
.wiki-seealso { font-size: 0.85rem; color: var(--muted); margin-top: 0.6rem; }

/* --- wiki KB: layout + tree + tabs --- */
.wiki-layout { display: grid; grid-template-columns: 250px 1fr; gap: 1.5rem; align-items: start; }
@media (max-width: 820px) { .wiki-layout { grid-template-columns: 1fr; } }
.wiki-tree {
  position: sticky; top: 1rem; background: var(--panel); border: 1px solid var(--border);
  border-radius: 10px; padding: 0.8rem; font-size: 0.9rem; max-height: 88vh; overflow: auto;
}
.wiki-search input {
  width: 100%; padding: 0.45rem 0.6rem; background: var(--term-bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; margin-bottom: 0.5rem;
}
.wiki-tree details { margin: 0.3rem 0; }
.wiki-tree summary { cursor: pointer; font-weight: 600; padding: 0.2rem 0; }
.wiki-tree ul { list-style: none; padding-left: 0.7rem; margin: 0.2rem 0; }
.wiki-tree li { padding: 0.15rem 0; }
.wiki-tree a { color: var(--muted); }
.wiki-tree a:hover, .wiki-tree a.is-active { color: var(--fg); }
.wiki-tree a.is-active { font-weight: 600; }
.wiki-tree-foot { margin-top: 0.8rem; border-top: 1px solid var(--border); padding-top: 0.6rem; }
.wiki-searchlist { list-style: none; padding: 0; margin: 0 0 0.6rem; }
.wiki-searchlist li { padding: 0.25rem 0; border-bottom: 1px solid var(--border); }

/* Закреплённое «точное совпадение» по команде — над списком результатов. */
.wiki-exact {
  display: block; margin: 0 0 0.6rem; padding: 0.5rem 0.6rem;
  background: var(--term-bg); border: 1px solid var(--accent, #5aa9e6);
  border-radius: 8px; color: var(--fg);
}
.wiki-exact:hover { border-color: var(--fg); }
.wiki-exact-badge {
  display: inline-block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.03em;
  background: var(--accent, #5aa9e6); color: #06121f; border-radius: 4px;
  padding: 0.05rem 0.35rem; margin-right: 0.4rem; vertical-align: middle;
}
.wiki-exact-title { font-weight: 600; }
.wiki-exact-sum { display: block; margin-top: 0.2rem; }

.wiki-main { min-width: 0; }
.wiki-tagcloud { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1.5rem; }
.wiki-tagcloud .tag { margin: 0; }
.wiki-catgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1rem; }
.wiki-catcard { background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 0.9rem 1.1rem; }
.wiki-catcard h3 { margin: 0 0 0.5rem; font-size: 1rem; }
.wiki-catcard ul { list-style: none; padding: 0; margin: 0; }
.wiki-catcard li { padding: 0.18rem 0; }

.wiki-head { border-bottom: 1px solid var(--border); padding-bottom: 0.8rem; margin-bottom: 1rem; }
.wiki-head h1 { margin-bottom: 0.4rem; }
.wiki-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.badge { display: inline-block; padding: 0.1rem 0.55rem; font-size: 0.75rem; border-radius: 6px;
  background: var(--accent); color: #06121f; font-weight: 600; }
.badge-ver { background: var(--panel-2); color: var(--muted); border: 1px solid var(--border); }
.wiki-badges .tag { margin: 0; }
.wiki-head .lead { margin-top: 0.6rem; }

.wiki-tabs { display: flex; flex-wrap: wrap; gap: 0.3rem; border-bottom: 1px solid var(--border); margin-bottom: 1rem; }
.wiki-tab {
  padding: 0.45rem 0.9rem; background: none; color: var(--muted); border: none;
  border-bottom: 2px solid transparent; cursor: pointer; font-size: 0.95rem;
}
.wiki-tab:hover { color: var(--fg); }
.wiki-tab.is-active { color: var(--fg); border-bottom-color: var(--accent); font-weight: 600; }
.wiki-panel.is-hidden { display: none; }
.wiki-panel h3 { margin-top: 1.3rem; }
.wiki-seealso-box { margin-top: 2rem; border-top: 1px solid var(--border); padding-top: 1rem; }
.wiki-seealso-box ul { list-style: none; padding: 0; }
.wiki-seealso-box li { padding: 0.25rem 0; }

/* --- theory --- */
.theory-toc { list-style: none; padding: 0; }
.theory-toc li { padding: 0.5rem 0; border-bottom: 1px solid var(--border); }
.theory-body { max-width: 75ch; }
.theory-body h2 { margin-top: 1.6rem; }
.theory-body blockquote {
  margin: 1rem 0; padding: 0.3rem 0.9rem; border-left: 3px solid var(--accent); color: var(--muted);
}
.theory-cta {
  display: flex; gap: 0.7rem; flex-wrap: wrap; margin: 1.5rem 0;
  padding: 1rem; background: var(--panel); border: 1px solid var(--border); border-radius: 10px;
}
.btn {
  display: inline-block; padding: 0.45rem 1rem; border-radius: 6px;
  background: var(--accent); color: #06121f; font-weight: 600; border: none;
  cursor: pointer;
}
.btn:disabled { cursor: not-allowed; opacity: 0.6; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-ghost { background: var(--panel-2); color: var(--fg); border: 1px solid var(--border); }

/* --- quizzes --- */
.quiz { display: flex; flex-direction: column; gap: 1rem; }
.q-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 1.1rem 1.3rem;
}
.q-prompt { font-weight: 600; margin: 0 0 0.7rem; }
.q-code {
  background: var(--term-bg); padding: 0.7rem; border-radius: 6px; overflow: auto;
  font-family: "Cascadia Code", "Consolas", monospace; font-size: 0.85rem;
}
.q-choices { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.8rem; }
.q-opt { cursor: pointer; }
.q-opt input { margin-right: 0.5rem; }
.q-fill {
  width: 100%; max-width: 420px; padding: 0.5rem; background: var(--term-bg); color: var(--fg);
  border: 1px solid var(--border); border-radius: 6px; font-family: monospace;
}
.q-result { margin-top: 0.7rem; }
.q-verdict { font-weight: 700; }
.q-verdict.is-ok { color: var(--accent-2); }
.q-verdict.is-bad { color: #e5534b; }
.q-answer { margin: 0.4rem 0; }
.q-expl { color: var(--muted); font-size: 0.92rem; }
.q-expl code { background: var(--term-bg); padding: 0.1rem 0.35rem; border-radius: 4px; font-family: monospace; }

/* === Адаптив / мобильная вёрстка ========================================== */
html, body { max-width: 100%; overflow-x: hidden; }   /* без горизонтального скролла */
img, pre, table { max-width: 100%; }
.btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Вкладки задание/терминал — на десктопе скрыты (обе панели рядом). */
.lab-tabs { display: none; gap: 0.3rem; margin-bottom: -1px; position: relative; z-index: 1; }
.lab-tab {
  flex: 1; padding: 0.6rem 0.9rem; font-weight: 600; font-size: 0.95rem; cursor: pointer;
  background: var(--panel-2); color: var(--muted);
  border: 1px solid var(--border); border-bottom-color: transparent;
  border-radius: 9px 9px 0 0; -webkit-tap-highlight-color: transparent;
}
.lab-tab.is-active { background: var(--panel); color: var(--fg); }

/* Планшет/телефон: одна колонка + переключение вкладками (без пролистывания). */
@media (max-width: 860px) {
  .lab-tabs { display: flex; }
  .lab { grid-template-columns: 1fr; min-height: 0; }
  .lab-term { position: static; max-height: none; }
  .lab-task, .lab-term { border-top-left-radius: 0; border-top-right-radius: 0; }
  .lab[data-mobile-tab="task"] .lab-term { display: none; }
  .lab[data-mobile-tab="term"] .lab-task { display: none; }
  .lab[data-mobile-tab="term"] .lab-term { display: flex; }
  .lab-term-head { display: none; }          /* дублирует вкладку «Терминал» */
  .term-screen { min-height: 60vh; }
}

/* Телефон. */
@media (max-width: 600px) {
  .content { padding: 1.1rem 0.9rem; }

  /* Топбар: бренд сверху, нав — горизонтальной лентой со скроллом (не переполняется). */
  .topbar { flex-wrap: wrap; gap: 0.5rem 1rem; padding: 0.65rem 0.9rem; }
  .brand { font-size: 1.05rem; }
  .mainnav {
    width: 100%; gap: 0.2rem; overflow-x: auto; -webkit-overflow-scrolling: touch;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .mainnav::-webkit-scrollbar { display: none; }
  .mainnav a { white-space: nowrap; padding: 0.35rem 0.6rem; border-bottom: none; border-radius: 6px; }
  .mainnav a.is-active { background: var(--panel-2); color: var(--fg); }

  /* Лаборатория. */
  .lab-task, .lab-term { padding: 0.9rem; border-radius: 0 0 9px 9px; }
  .term-screen { min-height: 62vh; padding: 0.4rem; }
  .lab-desc h1 { font-size: 1.2rem; }

  /* Кнопки — крупнее под палец, тянутся по ширине. */
  .lab-actions { gap: 0.5rem; }
  .lab-actions .btn { flex: 1 1 auto; text-align: center; padding: 0.6rem 0.9rem; }
  .theory-cta { padding: 0.9rem; }
  .theory-cta .btn { flex: 1 1 auto; text-align: center; }

  /* Сетки карточек — одна колонка, аккуратные отступы. */
  .cards, .wiki-cards, .wiki-catgrid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 1.6rem; }
  .lead { font-size: 1rem; }

  /* Вики-дерево — не sticky на телефоне, обычным блоком. */
  .wiki-tree { position: static; max-height: none; }
  .wiki-tabs { gap: 0.15rem; }
  .wiki-tab { padding: 0.4rem 0.6rem; font-size: 0.9rem; }

  /* Поповер термина шире экрана — ограничим. */
  .term-popover-card { width: min(280px, 86vw); }
}