/* ── Общая шапка ───────────────────────────────────────────────────
   Раньше на главной она вела себя иначе, чем на прочих страницах, а
   разделов со временем стало больше, чем помещается в строку. Теперь
   поведение одно на всех страницах, а справочники убраны в список. */
.topbar{
  position:sticky;top:0;z-index:60;
  background:rgba(7,11,28,0);
  transition:background var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.topbar.lit{
  background:rgba(7,11,28,.9);
  backdrop-filter:blur(14px);
  box-shadow:0 1px 0 rgba(201,162,39,.24);
}
.topbar .row{
  max-width:var(--w-full);margin:0 auto;padding:0 26px;min-height:58px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.topbar .brand{display:inline-flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--vellum)}
.topbar .brand .n{font-family:var(--display);font-size:var(--fs-large);letter-spacing:.1em;text-transform:uppercase;line-height:1}
.topbar .brand .s{font-family:var(--mono);font-size:var(--fs-micro);color:var(--gold);letter-spacing:.26em;text-transform:uppercase}

.menu{display:flex;align-items:center;gap:22px;white-space:nowrap}
.menu > a,.menu > .drop > button{
  font-family:var(--display);font-size:var(--fs-lead);letter-spacing:.06em;text-transform:uppercase;
  color:var(--text-muted);text-decoration:none;background:none;border:0;cursor:pointer;
  padding:6px 0;transition:color var(--dur) var(--ease);
}
.menu > a:hover,.menu > .drop > button:hover,.menu > a[aria-current]{color:var(--gold-lit)}
@media(max-width:900px){.menu{display:none}}

/* Справочники: четыре системы не помещаются в строку */
.drop{position:relative}
.drop > button::after{content:"";display:inline-block;margin-left:8px;
  border:4px solid transparent;border-top-color:currentColor;transform:translateY(2px)}
.drop-list{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:rgba(11,16,38,.97);backdrop-filter:blur(12px);
  box-shadow:var(--edge),0 20px 40px -22px #000;
  padding:8px;min-width:210px;display:grid;gap:2px;
  opacity:0;visibility:hidden;transition:opacity var(--dur) var(--ease),
    transform var(--dur) var(--ease),visibility var(--dur);
}
.drop:hover .drop-list,.drop:focus-within .drop-list{
  opacity:1;visibility:visible;transform:translateX(-50%) translateY(0);
}
.drop-list a{
  display:flex;justify-content:space-between;gap:14px;align-items:baseline;
  padding:10px 12px;text-decoration:none;color:var(--text-soft);
  font-family:var(--body);font-size:var(--fs-caption);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.drop-list a:hover{background:rgba(201,162,39,.12);color:var(--gold-lit)}
.drop-list a b{font-family:var(--mono);font-size:var(--fs-micro);color:var(--gold-deep);font-weight:400}

/* Телефон: строка ссылок под шапкой, прокручивается вбок */
.mobile-menu{display:none}
@media(max-width:900px){
  .mobile-menu{
    display:flex;gap:18px;overflow-x:auto;scrollbar-width:none;
    padding:0 26px 12px;white-space:nowrap;
  }
  .mobile-menu::-webkit-scrollbar{display:none}
  .mobile-menu a{
    font-family:var(--display);font-size:var(--fs-caption);letter-spacing:.06em;
    text-transform:uppercase;color:var(--text-muted);text-decoration:none;flex:0 0 auto;
  }
  .mobile-menu a:hover{color:var(--gold-lit)}
}

/* ══════════════════════════════════════════════════════════════════
   КНОПКА ШАПКИ

   Кнопка «Сделать расклад» стоит в шапке и размечена одним классом
   `btn-gold`, без `btn`. Базовые свойства кнопки при этом жили только
   в card.css — на страницах без него (кабинет, главная, расклад, тарифы)
   от кнопки оставался жёлтый фон с подчёркнутым текстом.

   Правило живёт здесь, потому что шапка — зона ответственности этого
   файла, и он единственный подключён на всех страницах без исключения.
   Значения совпадают с card.css: два определения одного вида, а не спор.
   ══════════════════════════════════════════════════════════════════ */
.btn-gold,.btn-line{display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--body);font-weight:600;font-size:15px;letter-spacing:.085em;
  text-transform:uppercase;padding:14px 26px;text-decoration:none;
  border:1px solid transparent;background:transparent;
  transition:transform .22s var(--ease),background .25s,border-color .25s}
.btn-gold{background:linear-gradient(168deg,var(--gold-lit),var(--gold));color:#1A1405}
.btn-gold:hover{transform:translateY(-2px)}
.btn-line{border-color:rgba(201,162,39,.5);color:var(--gold-lit)}
.btn-line:hover{border-color:var(--gold);background:rgba(201,162,39,.1);transform:translateY(-2px)}

/* ══════════════════════════════════════════════════════════════════
   ШАПКА НА УЗКОМ ЭКРАНЕ

   Кнопка «Сделать расклад» в полном размере — 218 px. Вместе с логотипом
   и отступами она не помещалась в 360 px, растягивала строку шапки, а та
   тянула за собой весь документ: на телефоне появлялся горизонтальный
   скролл на каждой странице сайта.

   Лечим причину, а не симптом: `overflow-x:hidden` на корне спрятал бы
   полосу прокрутки и вместе с ней сам факт, что вёрстка не сходится.
   ══════════════════════════════════════════════════════════════════ */
@media(max-width:900px){
  .topbar .row{padding:0 18px;gap:14px;min-height:54px}
  .topbar .btn-gold{padding:10px 16px;font-size:13px;letter-spacing:.05em}
  .mobile-menu{padding:0 18px 12px}
}
@media(max-width:520px){
  /* Приписка «Таро» под логотипом уходит: имя бренда и так читается,
     а место нужнее кнопке. */
  .topbar .brand .s{display:none}
  .topbar .row{padding:0 14px;gap:10px}
  .topbar .btn-gold{padding:9px 12px;font-size:12px;letter-spacing:.03em}
  .mobile-menu{padding:0 14px 10px;gap:14px}
}
/* Ни одна часть шапки не имеет права расширять документ. Клип только по X:
   overflow:clip по обеим осям срезал выпадающий список «Справочники» на всех
   страницах — от него оставалась полоска высотой в шапку. clip не делает
   элемент scroll-контейнером, поэтому overflow-y:visible здесь работает. */
.topbar{max-width:100%;overflow-x:clip;overflow-y:visible}
.topbar .row{flex-wrap:nowrap;min-width:0}
.topbar .brand{min-width:0;flex:0 1 auto;overflow:hidden}
.topbar .btn-gold{flex:0 0 auto;white-space:nowrap}

/* Шапка блочная, и это не должно зависеть от страницы. На кабинете, тарифах
   и раскладе оставалось правило `header{display:flex}` от прежней самодельной
   шапки: оно ставило строку и мобильное меню в один ряд, строка сжималась до
   107 px, а кнопка «Сделать расклад» выпадала из вёрстки. Класс (0,1,0) бьёт
   голый тег (0,0,1), поэтому объявление ниже — предохранитель на будущее. */
.topbar{display:block}