/* HighTime Design System for MkDocs */
/* Минималистичный, технический стиль. Монохромная основа с цветными пятнами на фоне. */

/* =====================================================
   ШРИФТЫ
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@200;300;400;500;600&display=swap');

:root {
  /* Основные цвета */
  --ht-black: #1a1a1a;
  --ht-bg: #fafaf9;
  --ht-text-primary: #1a1a1a;
  --ht-text-secondary: #333;
  --ht-text-tertiary: #555;
  --ht-text-muted: #888;
  --ht-text-light: #ccc;

  /* Разделители и обводки */
  --ht-divider: rgba(0,0,0,0.08);
  --ht-border: rgba(0,0,0,0.1);
  --ht-border-strong: rgba(0,0,0,0.15);

  /* Полупрозрачные фоны */
  --ht-glass-light: rgba(255,255,255,0.4);
  --ht-glass-medium: rgba(255,255,255,0.6);
  --ht-glass-header: rgba(250,250,249,0.8);

  /* Цвета блобов */
  --blob-peach: #FFB7B2;
  --blob-coral: #FFDAC1;
  --blob-lime: #E2F0CB;
  --blob-mint: #B5EAD7;
  --blob-lavender: #C7CEEA;
  --blob-blue: #B5D8EB;
  --blob-purple: #D4A5FF;
  --blob-teal: #A0E7E5;

  /* MkDocs Material overrides */
  --md-default-bg-color: var(--ht-bg);
  --md-default-fg-color: var(--ht-text-primary);
  --md-primary-fg-color: var(--ht-black);
  --md-primary-bg-color: var(--ht-bg);
  --md-accent-fg-color: var(--ht-black);
  --md-typeset-a-color: var(--ht-text-secondary);
}

/* =====================================================
   ТИПОГРАФИКА
   ===================================================== */
body,
.md-typeset {
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 13px;
  line-height: 1.6;
  color: var(--ht-text-primary);
  -webkit-font-smoothing: antialiased;
}

/* Заголовок страницы */
.md-typeset h1 {
  font-size: 28px !important;
  font-weight: 600 !important;
  color: var(--ht-text-primary) !important;
  letter-spacing: -0.5px;
  margin-bottom: 24px !important;
}

/* Заголовок секции */
.md-typeset h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: var(--ht-text-primary) !important;
  text-transform: none;
  letter-spacing: 0;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
  padding-bottom: 0 !important;
  border-bottom: none !important;
}

/* Подзаголовок */
.md-typeset h3 {
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--ht-text-primary) !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
}

/* =====================================================
   ФОНОВЫЕ ПЯТНА (BLOBS)
   ===================================================== */
.md-main {
  position: relative;
  background: var(--ht-bg) !important;
}

/* Блобы добавляются через ::before и ::after на контейнере */
.md-main::before,
.md-main::after,
.md-content::before,
.md-content::after {
  content: '';
  position: fixed;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}

.md-main::before {
  background: var(--blob-peach);
  width: 180px;
  height: 180px;
  top: 60px;
  left: -50px;
  opacity: 0.5;
}

.md-main::after {
  background: var(--blob-mint);
  width: 200px;
  height: 200px;
  top: 300px;
  right: -50px;
  opacity: 0.5;
}

.md-content::before {
  background: var(--blob-lavender);
  width: 160px;
  height: 160px;
  top: 550px;
  left: -30px;
  opacity: 0.5;
}

.md-content::after {
  background: var(--blob-coral);
  width: 180px;
  height: 180px;
  top: 800px;
  right: -30px;
  opacity: 0.4;
}

/* Контент поверх блобов */
.md-content__inner {
  position: relative;
  z-index: 1;
}

/* =====================================================
   ШАПКА
   ===================================================== */
.md-header {
  background: var(--ht-glass-header) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--ht-divider) !important;
  box-shadow: none !important;
}

.md-header__title {
  font-size: 11px !important;
  font-weight: 600 !important;
  color: var(--ht-text-primary) !important;
  letter-spacing: 0;
}

.md-header__topic {
  font-weight: 600 !important;
}

/* =====================================================
   НАВИГАЦИЯ (ТАБЫ)
   ===================================================== */
.md-tabs {
  background: rgba(250,250,249,0.6) !important;
  border-bottom: 1px solid var(--ht-divider) !important;
}

.md-tabs__link {
  font-size: 11px !important;
  font-weight: 400 !important;
  color: var(--ht-text-muted) !important;
  padding: 14px 16px !important;
  opacity: 1 !important;
}

.md-tabs__link--active,
.md-tabs__link:hover {
  font-weight: 600 !important;
  color: var(--ht-text-primary) !important;
}

.md-tabs__link--active {
  border-bottom: 2px solid var(--ht-black) !important;
}

/* =====================================================
   САЙДБАР
   ===================================================== */
.md-sidebar {
  background: transparent !important;
}

.md-nav__link {
  font-size: 12px !important;
  color: var(--ht-text-secondary) !important;
}

.md-nav__link:hover {
  color: var(--ht-text-primary) !important;
}

.md-nav__item--active > .md-nav__link {
  font-weight: 600 !important;
  color: var(--ht-text-primary) !important;
}

/* =====================================================
   ADMONITIONS (БЛОКИ ВНИМАНИЯ)
   ===================================================== */
.md-typeset .admonition,
.md-typeset details {
  border-radius: 0 !important;
  border: none !important;
  border-left: none !important;
  background: var(--ht-glass-light) !important;
  box-shadow: none !important;
  padding: 12px 14px !important;
  margin: 16px 0 !important;
}

/* Вертикальная линия ТОЛЬКО для деталей Job Story */
.md-typeset .admonition.job-story-detail,
.md-typeset details.job-story-detail {
  border-left: 2px solid var(--ht-black) !important;
}

.md-typeset .admonition-title,
.md-typeset details summary {
  background: transparent !important;
  border: none !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--ht-text-primary) !important;
  padding: 0 !important;
  margin-bottom: 8px !important;
}

.md-typeset .admonition-title::before,
.md-typeset details summary::before {
  display: none !important;
}

/* Danger (критические проблемы) */
.md-typeset .admonition.danger,
.md-typeset details.danger {
  border-left-color: var(--ht-black) !important;
}

/* Warning (требует внимания) */
.md-typeset .admonition.warning,
.md-typeset details.warning {
  border-left-color: var(--ht-black) !important;
}

/* Success (сильные стороны) */
.md-typeset .admonition.success,
.md-typeset details.success {
  border-left-color: var(--ht-black) !important;
}

/* Info */
.md-typeset .admonition.info,
.md-typeset details.info {
  border-left-color: var(--ht-black) !important;
}

/* =====================================================
   ТАБЛИЦЫ
   ===================================================== */
.md-typeset table:not([class]) {
  border-radius: 0 !important;
  border: 1px solid var(--ht-border) !important;
  box-shadow: none !important;
  font-size: 12px !important;
  background: var(--ht-glass-light) !important;
}

.md-typeset table:not([class]) thead {
  background: transparent !important;
}

.md-typeset table:not([class]) th {
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--ht-text-muted) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  border-bottom: 1px solid var(--ht-divider) !important;
  padding: 12px !important;
}

.md-typeset table:not([class]) td {
  border-bottom: 1px solid var(--ht-divider) !important;
  padding: 10px 12px !important;
  color: var(--ht-text-primary) !important;
}

.md-typeset table:not([class]) tbody tr:hover {
  background: rgba(0,0,0,0.02) !important;
}

/* =====================================================
   БЕЙДЖИ И ОЦЕНКИ
   ===================================================== */
.score-badge {
  display: inline-block;
  font-size: 10px !important;
  color: var(--ht-text-primary) !important;
  border: 1px solid var(--ht-border-strong) !important;
  padding: 2px 6px !important;
  font-variant-numeric: tabular-nums;
  background: transparent !important;
  border-radius: 0 !important;
}

/* Большие числа (оценки) */
.health-index,
.score-large {
  font-size: 48px !important;
  font-weight: 300 !important;
  color: var(--ht-text-primary) !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  -webkit-text-fill-color: var(--ht-text-primary) !important;
  background-clip: unset !important;
}

.score-max {
  font-size: 14px !important;
  color: var(--ht-text-muted) !important;
}

/* =====================================================
   ССЫЛКИ
   ===================================================== */
.md-typeset a {
  color: var(--ht-text-secondary) !important;
  text-decoration: none !important;
  border-bottom: 1px solid var(--ht-divider) !important;
}

.md-typeset a:hover {
  color: var(--ht-text-primary) !important;
  border-bottom-color: var(--ht-text-primary) !important;
}

/* =====================================================
   КОД
   ===================================================== */
.md-typeset code {
  background: var(--ht-glass-light) !important;
  color: var(--ht-text-primary) !important;
  border-radius: 0 !important;
  border: 1px solid var(--ht-border) !important;
  padding: 2px 6px !important;
  font-size: 11px !important;
}

.md-typeset pre {
  background: var(--ht-glass-light) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 0 !important;
}

/* =====================================================
   КНОПКИ
   ===================================================== */
.md-typeset .md-button {
  background: var(--ht-black) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 0 !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  padding: 14px 24px !important;
  font-family: 'JetBrains Mono', monospace !important;
}

.md-typeset .md-button:hover {
  background: var(--ht-text-secondary) !important;
}

/* =====================================================
   СПИСКИ
   ===================================================== */
.md-typeset ul li,
.md-typeset ol li {
  font-size: 12px !important;
  margin-bottom: 8px !important;
}

/* Списки с галочками */
.md-typeset ul.check-list {
  list-style: none !important;
  padding: 0 !important;
}

.md-typeset ul.check-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ht-divider);
}

.md-typeset ul.check-list li::before {
  content: 'check';
  font-size: 12px;
  margin-right: 10px;
}

/* =====================================================
   РАЗДЕЛИТЕЛИ
   ===================================================== */
.md-typeset hr {
  height: 1px !important;
  background: var(--ht-divider) !important;
  border: none !important;
  margin: 24px 0 !important;
}

/* =====================================================
   ФУТЕР
   ===================================================== */
.md-footer {
  background: transparent !important;
  border-top: 1px solid var(--ht-divider) !important;
}

.md-footer-meta {
  background: var(--ht-glass-header) !important;
}

/* =====================================================
   ПОИСК
   ===================================================== */
.md-search__input {
  background: var(--ht-glass-light) !important;
  border: 1px solid var(--ht-border) !important;
  border-radius: 0 !important;
  font-family: 'JetBrains Mono', monospace !important;
  font-size: 12px !important;
}

/* =====================================================
   СТАТУСНЫЕ БЛОКИ (без цвета)
   ===================================================== */
/* Критические проблемы */
.critical-block {
  border-left: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.critical-block .title {
  font-size: 13px;
  font-weight: 600;
  color: var(--ht-text-primary);
  margin-bottom: 6px;
}

.critical-block .description {
  font-size: 12px;
  color: var(--ht-text-secondary);
  line-height: 1.5;
  margin-bottom: 6px;
}

.critical-block .impact {
  font-size: 11px;
  color: var(--ht-text-tertiary);
  font-style: italic;
}

/* Сильные стороны */
.strength-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--ht-divider);
}

.strength-item .label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  color: var(--ht-text-primary);
}

.strength-item .score {
  font-size: 11px;
  color: var(--ht-text-muted);
  font-variant-numeric: tabular-nums;
}

/* =====================================================
   CTA БЛОК
   ===================================================== */
.cta-block {
  padding: 12px 14px;
  border-left: none;
  background: var(--ht-glass-medium);
  margin-top: 24px;
}

.cta-block .label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ht-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.cta-block .text {
  font-size: 12px;
  color: var(--ht-text-primary);
  line-height: 1.4;
}

/* =====================================================
   СТАТИСТИКА В РЯД
   ===================================================== */
.stats-row {
  display: flex;
  gap: 32px;
  margin-top: 24px;
}

.stat-item .label {
  font-size: 10px;
  color: var(--ht-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}

.stat-item .value {
  font-size: 18px;
  font-weight: 500;
}

.stat-item .value-muted {
  color: var(--ht-text-light);
}

/* =====================================================
   СЕКЦИИ С ИКОНКАМИ
   ===================================================== */
.section-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.section-header .icon-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--ht-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  background: var(--ht-glass-light);
  flex-shrink: 0;
}

.section-header h2 {
  margin: 0 !important;
}

/* =====================================================
   СКРЫТИЕ ЭЛЕМЕНТОВ MkDocs
   ===================================================== */
/* Убираем иконки из admonitions */
.md-typeset .admonition > .admonition-title::before,
.md-typeset details > summary::before {
  content: none !important;
  display: none !important;
}

/* Убираем цветные полоски по умолчанию */
[data-md-color-scheme="default"] {
  --md-default-bg-color: var(--ht-bg);
}

/* =====================================================
   RESPONSIVE
   ===================================================== */
@media screen and (max-width: 76.1875em) {
  .md-main::before,
  .md-main::after {
    display: none;
  }
}

@media screen and (max-width: 60em) {
  .stats-row {
    flex-wrap: wrap;
    gap: 16px;
  }

  .stat-item {
    min-width: 80px;
  }
}

/* =====================================================
   СКРОЛЛБАР
   ===================================================== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: var(--ht-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--ht-border-strong);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ht-text-muted);
}

/* =====================================================
   JOB STORY ДЕТАЛИ
   ===================================================== */
/* Метки (Когда, Я хочу, Чтобы, Но) — тусклые */
.job-story-label {
  color: var(--ht-text-muted) !important;
  font-weight: 400 !important;
}

/* Текст после двоеточия — черный */
.job-story-value {
  color: var(--ht-text-primary) !important;
  font-weight: 400 !important;
}

/* Блок Job Story детали с вертикальной линией */
.job-story-detail-block {
  border-left: 2px solid var(--ht-black);
  padding-left: 14px;
  margin-bottom: 16px;
}

.job-story-detail-block p {
  margin: 4px 0 !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

/* =====================================================
   НАЗВАНИЯ КОНКУРЕНТОВ — КРУПНЕЕ
   ===================================================== */
.competitor-name,
.md-typeset h2.competitor-name,
.md-typeset h3.competitor-name {
  font-size: 20px !important;
  font-weight: 600 !important;
  margin-top: 32px !important;
  margin-bottom: 16px !important;
}

/* =====================================================
   ЗАГОЛОВКИ РАЗДЕЛОВ — КРУПНЕЕ
   ===================================================== */
/* Критичные пробелы, Средние пробелы, Сильные стороны */
.section-title-large,
.md-typeset h2.section-title-large {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-top: 32px !important;
  margin-bottom: 20px !important;
}

/* =====================================================
   ИТОГИ — УВЕЛИЧЕННЫЙ ШРИФТ ТЕКСТА
   ===================================================== */
.summary-page .md-typeset,
.summary-page .md-typeset p,
.summary-page .md-typeset li {
  font-size: 15px !important;
  line-height: 1.7 !important;
}

.summary-page .md-typeset .admonition p,
.summary-page .md-typeset details p {
  font-size: 14px !important;
}

/* =====================================================
   CTA БЛОК — КОНТАКТ ТЕЛЕГРАМ
   ===================================================== */
.cta-contact {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ht-text-secondary);
}

.cta-contact a {
  color: var(--ht-text-primary) !important;
  font-weight: 500;
}

/* =====================================================
   БЛОКИ ДЛЯ СТРАНИЦЫ ИТОГОВ
   ===================================================== */
/* Подзаголовок страницы */
.subtitle {
  font-size: 14px !important;
  color: var(--ht-text-secondary) !important;
  margin-top: -16px !important;
  margin-bottom: 24px !important;
}

/* Блок проблемы */
.problem-block {
  background: var(--ht-glass-light);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.problem-block p {
  margin: 0 0 8px 0 !important;
}

.problem-block p:last-child {
  margin-bottom: 0 !important;
}

/* Блок цитаты */
.quote-block {
  background: var(--ht-glass-light);
  padding: 12px 16px;
  margin: 16px 0;
  font-style: italic;
  color: var(--ht-text-secondary);
  font-size: 13px !important;
}

/* Правки для summary-page h2 и h3 внутри summary-page */
.summary-page h2.section-title-large {
  font-size: 18px !important;
  font-weight: 600 !important;
  margin-top: 32px !important;
  margin-bottom: 20px !important;
  color: var(--ht-text-primary) !important;
}

.summary-page h3 {
  font-size: 15px !important;
  font-weight: 600 !important;
  margin-top: 24px !important;
  margin-bottom: 12px !important;
  color: var(--ht-text-primary) !important;
}