/* ============================================================
   MktFlow Wiki — доска терминов
   Dark Blueprint environment — стиль платформы (lms.mktflow.ru)
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --teal-950: #083229;
  --teal-900: #0D4C3C;
  --teal-800: #1A5C4A;
  --teal-700: #265C4C;
  --teal-mist: #D9E5E0;

  --cream-100: #F4EADE;
  --cream-80:  rgba(244,234,222,0.80);
  --cream-60:  rgba(244,234,222,0.60);
  --cream-40:  rgba(244,234,222,0.40);
  --cream-20:  rgba(244,234,222,0.20);
  --cream-10:  rgba(244,234,222,0.08);

  --amber-600: #B9892E;
  --amber-400: #D4AB5C;

  --mono: 'JetBrains Mono', 'SF Mono', monospace;
  --serif: 'IBM Plex Serif', Georgia, serif;
  --max-w: 1280px;

  --dot-colors: var(--amber-600), var(--amber-400), var(--cream-100), var(--teal-mist);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', Arial, Helvetica, sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--cream-100);
  background: #06120F;
  position: relative;
}

/* Blueprint dot grid — mandated background treatment */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, var(--cream-10) 1px, transparent 1px);
  background-size: 22px 22px;
}

/* Exoskeleton — faint node/line network, blueprint aesthetic */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='480' viewBox='0 0 560 480'%3E%3Cg fill='none' stroke='%23F4EADE' stroke-opacity='0.14' stroke-width='1'%3E%3Cline x1='40' y1='30' x2='150' y2='90'/%3E%3Cline x1='150' y1='90' x2='120' y2='190'/%3E%3Cline x1='420' y1='40' x2='500' y2='120'/%3E%3Cline x1='420' y1='40' x2='340' y2='110'/%3E%3Cline x1='60' y1='320' x2='150' y2='380'/%3E%3Cline x1='150' y1='380' x2='260' y2='360'/%3E%3Cline x1='400' y1='340' x2='480' y2='400'/%3E%3Cline x1='480' y1='400' x2='430' y2='460'/%3E%3C/g%3E%3Cg fill='%23F4EADE' fill-opacity='0.5'%3E%3Ccircle cx='40' cy='30' r='1.6'/%3E%3Ccircle cx='150' cy='90' r='1.6'/%3E%3Ccircle cx='120' cy='190' r='1.6'/%3E%3Ccircle cx='420' cy='40' r='1.6'/%3E%3Ccircle cx='500' cy='120' r='1.6'/%3E%3Ccircle cx='340' cy='110' r='1.6'/%3E%3Ccircle cx='60' cy='320' r='1.6'/%3E%3Ccircle cx='150' cy='380' r='1.6'/%3E%3Ccircle cx='260' cy='360' r='1.6'/%3E%3Ccircle cx='400' cy='340' r='1.6'/%3E%3Ccircle cx='480' cy='400' r='1.6'/%3E%3Ccircle cx='430' cy='460' r='1.6'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 560px 480px;
}

body > * { position: relative; z-index: 1; }

a { color: inherit; text-decoration: none; }
a:link, a:visited { color: var(--amber-400); }
a:hover { color: var(--amber-600); }
ul { list-style: none; }

.container { max-width: var(--max-w); margin: 0 auto; padding: 0 40px; }

/* ── HEADER ─────────────────────────────────────────────────── */
.wiki-header {
  position: sticky;
  top: 0;
  z-index: 200;
  background: #06120F;
  border-bottom: 1px solid var(--cream-10);
}
.wiki-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
}
.wiki-logo {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--cream-100);
  display: flex;
  align-items: center;
  height: 28px;
}
.wiki-logo span { color: var(--amber-400); }
.wiki-back {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--cream-60);
  border: 1px solid var(--cream-20);
  padding: 7px 16px;
  border-radius: 999px;
  transition: color .15s ease, border-color .15s ease;
}
.wiki-back:hover { color: var(--cream-100); border-color: var(--cream-40); }

/* ── HERO ───────────────────────────────────────────────────── */
.wiki-hero { padding: 56px 0 36px; }
.wiki-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber-600);
  margin-bottom: 18px;
}
.wiki-hero h1 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 44px;
  line-height: 1.15;
  color: var(--cream-100);
  letter-spacing: -0.01em;
  margin-bottom: 16px;
}
.wiki-hero p {
  max-width: 620px;
  color: var(--cream-80);
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 0;
}
.wiki-hero-meta {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--cream-10);
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cream-40);
}
.wiki-hero-meta strong { color: var(--amber-400); font-weight: 400; }

/* ── CONTROLS: search + chapter filter ─────────────────────── */
.wiki-controls { padding: 0 0 28px; }
.wiki-search-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}
.wiki-search {
  flex: 1 1 320px;
  max-width: 420px;
  font: inherit;
  font-size: 14px;
  padding: 11px 16px;
  border: 1px solid var(--cream-20);
  border-radius: 999px;
  background: var(--cream-10);
  color: var(--cream-100);
}
.wiki-search::placeholder { color: var(--cream-40); }
.wiki-search:focus {
  outline: none;
  border-color: var(--amber-600);
  background: var(--cream-20);
}
.wiki-search-abbrev {
  font-family: var(--mono);
  border-style: dashed;
}
.wiki-search-abbrev:focus { border-color: var(--amber-400); }
.wiki-chapters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.wiki-chapter-pill {
  font: inherit;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--cream-60);
  background: transparent;
  border: 1px solid var(--cream-20);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: color .15s, border-color .15s, background .15s;
  white-space: nowrap;
}
.wiki-chapter-pill:hover { color: var(--cream-100); border-color: var(--cream-40); }
.wiki-chapter-pill.is-active {
  color: var(--teal-950);
  background: var(--amber-400);
  border-color: var(--amber-400);
}

/* ── TERM GROUPS ────────────────────────────────────────────── */
.wiki-grid-section { padding: 8px 0 96px; }
.term-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 8px;
}
.term-group {
  position: relative;
  background: rgba(26,92,74,0.35);
  border: 1px solid var(--cream-10);
  border-radius: 12px;
  padding: 22px 22px 18px;
  transition: border-color .18s ease, background .18s ease;
}
.term-group:hover {
  border-color: var(--amber-600);
  background: rgba(26,92,74,0.5);
}
.term-group:hover .corner { border-color: var(--amber-600) !important; }
.corner { position: absolute; width: 11px; height: 11px; pointer-events: none; transition: border-color .18s ease; }
.corner-tl { top: 7px; left: 7px; border-top: 1px dotted var(--cream-40); border-left: 1px dotted var(--cream-40); }
.corner-tr { top: 7px; right: 7px; border-top: 1px dotted var(--cream-40); border-right: 1px dotted var(--cream-40); }
.corner-bl { bottom: 7px; left: 7px; border-bottom: 1px dotted var(--cream-40); border-left: 1px dotted var(--cream-40); }
.corner-br { bottom: 7px; right: 7px; border-bottom: 1px dotted var(--cream-40); border-right: 1px dotted var(--cream-40); }

.term-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.term-group-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  flex-shrink: 0;
}
.term-group-head h2 {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 16px;
  color: var(--cream-100);
  line-height: 1.3;
}
.term-group-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.term-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  width: 100%;
  background: none;
  border: none;
  border-radius: 6px;
  padding: 8px 8px;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  transition: background .15s ease;
}
.term-row:hover, .term-row:focus-visible {
  background: var(--cream-20);
  outline: none;
}
.term-row-badge {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--amber-400);
  border: 1px solid var(--cream-20);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
  line-height: 1.4;
}
.term-row-title {
  font-size: 13px;
  font-weight: 400;
  color: var(--cream-100);
  line-height: 1.4;
}
.term-row-en {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--cream-40);
  margin-left: 8px;
}

.wiki-empty {
  color: var(--cream-40);
  font-size: 13px;
  padding: 40px 0;
}

/* ── MODAL ──────────────────────────────────────────────────── */
.wiki-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: none;
}
.wiki-modal.is-open { display: block; }

.wiki-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(8, 50, 41, 0.72);
  backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity .2s ease;
}
.wiki-modal.is-open .wiki-modal-backdrop { opacity: 1; }

.wiki-modal-panel {
  position: absolute;
  top: 4%;
  left: 50%;
  transform: translate(-50%, -12px);
  width: min(1100px, 92vw);
  height: 92vh;
  background: var(--teal-900);
  border: 1px solid var(--cream-10);
  border-radius: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.4);
  opacity: 0;
  overflow: hidden;
  transition: opacity .2s ease, transform .2s ease;
}
.wiki-modal.is-open .wiki-modal-panel {
  opacity: 1;
  transform: translate(-50%, 0);
}

.wiki-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
  width: 34px;
  height: 34px;
  border: 1px solid var(--cream-20);
  border-radius: 999px;
  background: var(--teal-800);
  color: var(--cream-100);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s ease;
}
.wiki-modal-close:hover { background: var(--teal-700); }

.wiki-modal-iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: var(--cream-100);
}
.wiki-modal-iframe[hidden],
.wiki-modal-definition[hidden] {
  display: none;
}

/* Compact panel for inline glossary definitions (no iframe) */
.wiki-modal-panel.is-definition {
  height: auto;
  max-height: 80vh;
  width: min(560px, 92vw);
  top: 10%;
}
.wiki-modal-definition {
  padding: 40px 32px 32px;
  overflow-y: auto;
  max-height: 80vh;
}
.wiki-modal-definition-cat {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--amber-400);
  margin-bottom: 14px;
}
.wiki-modal-definition-title {
  font-family: var(--serif);
  font-weight: 600;
  font-size: 24px;
  color: var(--cream-100);
  margin-bottom: 4px;
}
.wiki-modal-definition-en {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--cream-40);
  margin-bottom: 20px;
}
.wiki-modal-definition-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--cream-80);
}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 1180px) {
  .container { padding: 0 28px; }
  .term-groups { grid-template-columns: repeat(2, 1fr); }
  .wiki-modal-panel { width: 96vw; height: 94vh; }
  .wiki-modal-panel.is-definition { height: auto; max-height: 86vh; }
}
@media (max-width: 640px) {
  .container { padding: 0 18px; }
  .term-groups { grid-template-columns: 1fr; }
  .wiki-hero h1 { font-size: 30px; }
  .wiki-modal-panel.is-definition { width: 96vw; top: 6%; }
}