/* ============================================================
   ФУНКЦИЯ ДИЗАЙНА · БАЗА
   reset, типографика, кнопки, пилюли, карточка, шум,
   переключатель темы, утилиты. Зависит от tokens.css.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-sans);
  font-feature-settings:"ss01","ss02","cv01";
  background:hsl(var(--background));
  color:hsl(var(--foreground));
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  transition:background-color var(--dur) var(--ease),color var(--dur) var(--ease);
}
img,svg{max-width:100%;display:block}
a{color:inherit}

/* — Шумовой оверлей поверх фона — */
.noise-overlay{
  position:fixed;inset:0;pointer-events:none;opacity:.02;z-index:1;
  isolation:isolate;contain:strict;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.dark .noise-overlay{opacity:.04}

/* — Типографика — */
h1,h2,h3,h4{font-family:var(--font-display);letter-spacing:-.025em;line-height:1.12;margin:0 0 .5em}
h1{font-weight:700;font-size:var(--text-5xl)}
h2{font-weight:600;font-size:var(--text-3xl);letter-spacing:-.02em}
h3{font-weight:600;font-size:var(--text-xl)}
h4{font-weight:600;font-size:var(--text-lg)}
p{margin:0 0 1em}
strong{font-weight:600}

/* — Утилиты текста — */
.font-display{font-family:var(--font-display)}
.mono{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.muted{color:hsl(var(--muted-fg))}
.small{font-size:var(--text-sm)}
.text-xs{font-size:var(--text-xs)} .text-sm{font-size:var(--text-sm)}
.text-lg{font-size:var(--text-lg)} .text-xl{font-size:var(--text-xl)}
.text-2xl{font-size:var(--text-2xl)} .text-3xl{font-size:var(--text-3xl)}
.text-4xl{font-size:var(--text-4xl)} .text-5xl{font-size:var(--text-5xl)}
.uppercase{text-transform:uppercase;letter-spacing:.07em}
.center{text-align:center}

/* — Контейнеры / раскладка — */
.row{display:flex;gap:var(--space-md);align-items:center;flex-wrap:wrap}
.spacer{flex:1}
.stack>*+*{margin-top:var(--space-md)}

/* — Бейдж / пилюля (акцент уровня через --level) — */
.pill{
  display:inline-flex;align-items:center;gap:.5em;border-radius:var(--radius);
  background:color-mix(in srgb,var(--level) 12%,transparent);
  color:var(--level);padding:.35rem .85rem;font-size:.7rem;
  text-transform:uppercase;letter-spacing:.08em;font-weight:600;
  font-family:var(--font-mono);
}
.pill .dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--level);flex:none}

/* — Eyebrow — mono-капс надзаголовок-метка (атом). Акцент --level по умолчанию,
   .eyebrow.muted — тихий вариант (muted-fg). Канон вместо разрозненных
   .hero-eyebrow / .doc-hero-eyebrow / .row-eyebrow / .card-label / .level-eyebrow /
   .*-eyebrow — консолидация постепенно (как .title-bi). Используется:
   methodology .doc-hero (sd.html, spiraldynamics/methodology.html). */
.eyebrow{display:block;font-family:var(--font-mono);font-size:.72rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;line-height:1.3;color:var(--level);
  margin-bottom:var(--space-md)}
.eyebrow.muted{color:hsl(var(--muted-fg))}

/* — Цветной кружок уровня — */
.sw{width:13px;height:13px;border-radius:50%;display:inline-block;vertical-align:-1px;
  margin-right:7px;flex:none;background:var(--level);box-shadow:0 0 0 1px hsl(var(--border))}

/* — Кнопки — */
.btn{
  appearance:none;border:0;cursor:pointer;font-family:var(--font-sans);
  font-size:1rem;font-weight:500;padding:.85rem 1.6rem;border-radius:var(--radius);
  background:hsl(var(--primary));color:hsl(var(--primary-fg));text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:.5em;
  transition:background-color var(--dur-fast) var(--ease),transform .08s var(--ease),border-color var(--dur-fast) var(--ease);
}
.btn:hover{background:hsl(var(--primary) / .85)}
.btn:active{transform:translateY(1px)}
.btn.accent{background:var(--level);color:var(--level-contrast)}
.btn.accent:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;border:1px solid hsl(var(--border));color:hsl(var(--muted-fg));
  font-size:.875rem;padding:.6rem 1.1rem}
.btn.ghost:hover{color:hsl(var(--foreground));border-color:var(--level)}
/* опасное действие (удаление без восстановления) — заливка --danger. Применение:
   подтверждающая кнопка в alertdialog (.modal--danger), bulk-удаление в админке.
   FD-144: заменяет инлайн style={{background:var(--danger),color:#fff}} в демо. */
.btn.danger{background:var(--danger);color:#fff}
.btn.danger:hover{filter:brightness(1.08)}
/* крупная «сочная» CTA-кнопка (вариант .btn) — лендинг-тренажёр, «Начать обучение».
   Увеличенный размер + свечение акцентом, лёгкий подъём на ховере. */
.btn--xl{font-size:var(--text-lg);font-weight:600;padding:1.1rem 2.4rem;letter-spacing:-.01em}
.btn.accent.btn--xl{box-shadow:0 10px 34px -8px color-mix(in srgb,var(--level) 60%,transparent)}
.btn.accent.btn--xl:hover{transform:translateY(-2px);box-shadow:0 16px 44px -8px color-mix(in srgb,var(--level) 70%,transparent)}
/* кнопка на акцентной подложке (--level): инверсная заливка белым, текст — акцент */
.btn--on-accent{background:var(--level-contrast);color:var(--level)}
.btn--on-accent:hover{background:var(--level-contrast);filter:brightness(.96);transform:translateY(-2px)}

/* — Карточка — серая подложка + рамка, плоско, острые углы (стиль makers) — */
.card{
  background:hsl(var(--muted-bg));border:1px solid hsl(var(--border));
  border-radius:var(--radius-lg);padding:var(--space-xl);
}

/* — Переключатель темы (общий, fixed) — */
/* Переключатель темы — фиксированный круг с иконкой по центру (размер не
   зависит от ширины ☀/☾). Ховер — монохромный. */
.theme-toggle{
  position:fixed;top:16px;right:16px;z-index:60;border:1px solid hsl(var(--border));
  background:hsl(var(--background) / .7);-webkit-backdrop-filter: blur(12px); backdrop-filter:blur(12px);color:hsl(var(--muted-fg));
  border-radius:50%;width:38px;height:38px;padding:0;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;line-height:1;cursor:pointer;font-family:var(--font-sans);
  transition:color var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.theme-toggle:hover{color:hsl(var(--foreground));border-color:hsl(var(--foreground))}

/* — Появление — */
.fade{animation:fadein .35s var(--ease)}
@keyframes fadein{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* — Доступность — */
:focus-visible{outline:2px solid var(--level);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
}

/* — Бургер-меню сайта: открывает основную навигацию на мобиле (≤720px).
   Логика в site-header.js (класс .nav-open на .site-header). Стили здесь
   (base.css грузится на всех страницах); перекрывают .site-nav{display:none}
   из layout.css повышенной специфичностью .site-header.nav-open. — */
.site-burger{display:none;flex:none;width:40px;height:40px;padding:0;cursor:pointer;
  background:none;border:1px solid hsl(var(--border));border-radius:var(--radius);
  align-items:center;justify-content:center;flex-direction:column;gap:4px}
.site-burger span{display:block;width:18px;height:2px;background:hsl(var(--foreground));
  transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.site-header.nav-open .site-burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.site-header.nav-open .site-burger span:nth-child(2){opacity:0}
.site-header.nav-open .site-burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media(max-width:720px){
  .site-burger{display:inline-flex}
  .site-header.nav-open .site-nav{
    display:flex;flex-direction:column;gap:.15rem;flex:none;
    position:absolute;top:100%;left:0;right:0;
    background:hsl(var(--background));border-bottom:1px solid hsl(var(--border));
    padding:var(--space-sm) clamp(1rem,4vw,2rem) var(--space-md);
    box-shadow:var(--shadow-lg)}
  .site-header.nav-open .site-nav__links{flex-direction:column;gap:.15rem;flex-wrap:nowrap;align-items:stretch}
  .site-header.nav-open .site-nav a{font-size:1rem;padding:.7rem .5rem}
  /* FD-1: блок пользователя (имя + вход/выход) в бургер-меню — отдельной строкой снизу */
  .site-header.nav-open .site-actions{
    margin-left:0;margin-top:var(--space-xs);padding-top:var(--space-sm);
    border-top:1px solid hsl(var(--border));gap:var(--space-md)}
  .site-header.nav-open .site-user{font-size:.9rem}
}