/* ================================================================
       Шапка сайта
       ================================================================
       Две шапки на весь сайт вместо семи разных:

       data-header="public" — для тех, кто ещё не вошёл (главная, о
         сервисе, документы, подтверждение почты). Вверху страницы у неё
         нет ни фона, ни рамки: небо страницы доходит до самого верха, а
         навигацию отделяет линия горизонта. При прокрутке собирается в
         обычную стеклянную полосу — читаемость важнее эффекта.

       data-header="work" — для вошедшего (кабинет, проект, этап,
         профиль). Путь вместо трёх разных «назад», меню аккаунта, а на
         страницах проекта нижним краем шапки становится трасса этапов.

       Разметку заполняет header.js; здесь только оформление.
       Цвета — токены из theme.css, поэтому обе темы работают сами.
       ================================================================ */

    .site-header {
      position: fixed;
      top: 0; left: 0; right: 0;
      z-index: 50;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 13px clamp(16px, 3vw, 40px);
      color: var(--ink);
      transition: background-color 0.25s ease, backdrop-filter 0.25s ease, padding 0.25s ease;
    }

    /* ---------- общий вид: стеклянная полоса ---------- */

    .site-header--solid {
      border-bottom: 1px solid transparent;   /* линию рисует ::after */
      background: rgba(var(--surface-rgb), 0.44);
      -webkit-backdrop-filter: blur(14px);
              backdrop-filter: blur(14px);
    }

    /* Линия горизонта вместо серой рамки: тёплая слева, холодная
       справа. Это же место занимает трасса этапов, когда она есть. */
    .site-header--solid::after {
      content: "";
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 1px;
      background: linear-gradient(90deg,
        rgba(255, 194, 122, 0.5) 0%,
        rgba(127, 217, 189, 0.4) 45%,
        rgba(12, 151, 250, 0.35) 100%);
    }

    :root[data-theme="dark"] .site-header--solid::after,
    .site-header--solid.is-dark::after {
      background: linear-gradient(90deg,
        rgba(255, 194, 122, 0.4) 0%,
        rgba(53, 196, 140, 0.32) 45%,
        rgba(12, 151, 250, 0.3) 100%);
    }

    /* Один луч слева направо при загрузке страницы. Именно один: не
       цикл, не при каждом действии. */
    .site-header__sweep {
      position: absolute;
      left: 0; bottom: -1px;
      height: 2px;
      width: 38%;
      pointer-events: none;
      background: linear-gradient(90deg,
        rgba(255, 231, 186, 0) 0%,
        rgba(255, 231, 186, 0.9) 55%,
        rgba(255, 231, 186, 0) 100%);
      animation: header-sweep 1.5s cubic-bezier(0.4, 0, 0.2, 1) 1 both;
    }

    @keyframes header-sweep {
      from { transform: translateX(-38%); opacity: 0; }
      15%  { opacity: 1; }
      70%  { opacity: 1; }
      to   { transform: translateX(263%); opacity: 0; }
    }

    /* ---------- публичная: вверху страницы коробки нет ---------- */

    .site-header--public.is-top {
      background: transparent;
      -webkit-backdrop-filter: none;
              backdrop-filter: none;
      padding-top: 22px;
      padding-bottom: 22px;
    }

    .site-header--public.is-top .brand__name { font-size: 19px; }
    .site-header--public.is-top .brand__mark { height: 36px; }
    .site-header--public.is-top .brand__fallback { width: 36px; height: 36px; }

    /* Горизонт публичной шапки — отдельным элементом, потому что на нём
       стоит светило и он живёт по своим правилам (не край полосы, а
       линия внутри неба). */
    .site-horizon {
      position: absolute;
      left: clamp(16px, 3vw, 48px);
      right: clamp(16px, 3vw, 48px);
      bottom: -4px;
      height: 26px;
      pointer-events: none;
      opacity: 0;
      transition: opacity 0.25s ease;
    }

    .site-header--public.is-top .site-horizon { opacity: 1; }
    .site-horizon svg { display: block; width: 100%; height: 100%; overflow: visible; }

    /* ---------- логотип ---------- */

    .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: inherit; flex: none; }
    .brand__mark { display: flex; flex: none; align-items: center; height: var(--logo-height); transition: height 0.25s ease; }
    .brand__fallback { display: block; width: var(--logo-height); height: var(--logo-height); transition: width 0.25s ease, height 0.25s ease; }
    .brand__img { display: none; width: auto; max-width: 180px; height: 100%; object-fit: contain; }
    .brand__mark.has-custom-logo .brand__img { display: block; }
    .brand__mark.has-custom-logo .brand__fallback { display: none; }
    .brand__name { font-size: 17px; font-weight: 400; letter-spacing: 0.06em; white-space: nowrap; transition: font-size 0.25s ease; }
    .brand__name span { font-weight: 300; opacity: 0.8; }

    /* ---------- путь ---------- */

    .site-path {
      display: flex;
      align-items: center;
      gap: 9px;
      min-width: 0;
      flex: 1 1 auto;
      font-size: 14px;
      letter-spacing: 0.02em;
    }

    .site-path a { color: var(--ink-soft); text-decoration: none; white-space: nowrap; }
    .site-path a:hover { color: var(--ink); }
    .site-path__sep { color: var(--ink-soft); opacity: 0.45; }
    .site-path__here { color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .site-path__name { overflow: hidden; text-overflow: ellipsis; max-width: 280px; }
    .site-path__up { display: none; flex: none; color: var(--ink-soft); }
    .site-path__up svg { display: block; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

    /* ---------- правая группа ---------- */

    .site-actions { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 26px); flex: none; }
    .site-actions a { font-size: 14px; letter-spacing: 0.03em; text-decoration: none; color: var(--ink-soft); white-space: nowrap; }
    .site-actions a:hover { color: var(--ink); }
    .site-actions a.is-strong { color: var(--ink); }

    .site-cta {
      display: inline-flex;
      align-items: center;
      height: 36px;
      padding: 0 18px;
      border: 1px solid transparent;
      border-radius: 999px;
      background: var(--ink-solid);
      color: #fff !important;
      font-size: 14px;
      letter-spacing: 0.02em;
      text-decoration: none;
    }

    /* Вверху страницы, на небе, сплошная кнопка выглядит тяжело —
       там она контурная и пропускает небо сквозь себя. */
    .site-header--public.is-top .site-cta {
      height: 38px;
      border-color: rgba(var(--line-rgb), 0.35);
      background: rgba(var(--surface-rgb), 0.4);
      color: var(--ink) !important;
    }

    /* ---------- аккаунт ---------- */

    .site-account { position: relative; flex: none; }

    .site-account__btn {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      height: 36px;
      padding: 0 8px 0 6px;
      border: none;
      border-radius: 999px;
      background: transparent;
      color: var(--ink);
      font: inherit;
      font-size: 13.5px;
      cursor: pointer;
      transition: background-color 0.2s ease;
    }

    .site-account__btn:hover,
    .site-account__btn[aria-expanded="true"] { background: rgba(var(--line-rgb), 0.08); }

    .site-account__avatar {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 26px; height: 26px;
      flex: none;
      border-radius: 999px;
      background: var(--ink-solid);
      color: #fff;
      font-size: 11px;
      letter-spacing: 0.02em;
    }

    .site-account__name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .site-account__chev { flex: none; width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; opacity: 0.7; transition: transform 0.2s ease; }
    .site-account__btn[aria-expanded="true"] .site-account__chev { transform: rotate(180deg); }

    .site-account__menu {
      position: absolute;
      top: calc(100% + 10px);
      right: 0;
      width: 264px;
      padding: 8px;
      border: 1px solid rgba(var(--line-rgb), 0.14);
      border-radius: 14px;
      background: rgba(var(--surface-rgb), 0.97);
      -webkit-backdrop-filter: blur(14px);
              backdrop-filter: blur(14px);
      box-shadow: 0 14px 40px rgba(var(--line-rgb), 0.18);
    }

    .site-account__menu[hidden] { display: none; }

    .site-account__who { padding: 10px 12px 12px; border-bottom: 1px solid rgba(var(--line-rgb), 0.12); }
    .site-account__email { font-size: 13.5px; color: var(--ink); word-break: break-all; }
    .site-account__hint { margin-top: 3px; font-size: 12px; color: var(--ink-soft); }

    .site-account__menu a {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      margin-top: 4px;
      border-radius: 9px;
      text-decoration: none;
      color: var(--ink);
      font-size: 14px;
    }

    .site-account__menu a:hover { background: rgba(var(--line-rgb), 0.08); }
    .site-account__menu a.is-exit { color: var(--warn); }
    .site-account__menu a svg { flex: none; width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

    /* ---------- трасса этапов ---------- */
    /* Нижний край шапки на страницах проекта: страница стоит на дуге
       собственного проекта. Пройденный участок тёплый, текущий узел —
       солнце, впереди контуры. */

    .site-track {
      position: absolute;
      left: 0; right: 0; bottom: -1px;
      height: 30px;
      pointer-events: none;
    }

    .site-track svg { display: block; width: 100%; height: 30px; overflow: visible; }
    .site-track a { pointer-events: auto; }
    .site-track a:focus-visible circle { stroke: var(--ink); stroke-width: 2; }

    /* Когда трасса есть, собственную линию горизонта у полосы убираем —
       иначе две линии в одном месте. */
    .site-header--track.site-header--solid::after { display: none; }
    .site-header--track { padding-bottom: 24px; }

    /* ---------- тумблер темы (рядом с остальным в шапке) ---------- */

    .site-header .theme-toggle { flex: none; }

    /* ---------- узкий экран ---------- */

    @media (max-width: 860px) {
      .site-actions { gap: 10px; }
      .site-actions a.is-hideable { display: none; }
      .site-account__name { display: none; }
      .site-account__chev { display: none; }
      .site-account__btn { padding: 0; }
      .site-path__name { max-width: 150px; }
    }

    @media (max-width: 640px) {
      /* Путь сжимается до стрелки «на уровень вверх» и текущего места */
      .site-path__crumb { display: none; }
      .site-path__sep { display: none; }
      .site-path__up { display: inline-flex; }
      .brand__name { display: none; }
      .site-header--public.is-top { padding-top: 14px; padding-bottom: 14px; }
      .site-horizon { display: none; }
      .site-track { height: 22px; }
      .site-track svg { height: 22px; }
      .site-header--track { padding-bottom: 18px; }
    }

    @media (prefers-reduced-motion: reduce) {
      .site-header, .brand__name, .brand__mark, .brand__fallback,
      .site-account__btn, .site-account__chev, .site-horizon { transition: none; }
      .site-header__sweep { display: none; }
    }