/* Панель сайту — та сама, що на посадковій сторінці
   (`web/reference/bluehour/landing.html`), перенесена сюди компонентом, а не
   скопійованим шматком розмітки. Числа звідти ж, не підібрані наново.

   `--ease-rise` і радіус аркуша живуть тут: у `tokens.css` їх немає, бо там
   лише те, що є в `DesignSystem/Tokens.swift`, а це — веб-специфіка. */
.sitenav {
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 0;
  display: flex; justify-content: center; pointer-events: none;
}
.sitenav-wrap {
  max-width: min(94vw, 1680px); pointer-events: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 30px;
  background: rgba(20, 20, 20, 0.84); backdrop-filter: blur(30px);
  border-radius: var(--radius-card); padding: 9px 9px 9px 22px;
}
.sitenav-wrap .wordmark-name { font-size: 22px; }

/* Речення рядковим шрифтом: широко розбиті капітелі читаються як підпис,
   а не як меню. */
.sitenav-menu {
  display: flex; align-items: center; gap: clamp(16px, 1.7vw, 24px);
  font: 400 clamp(15px, 1.15vw, 17px)/1 var(--body);
  letter-spacing: -0.005em; color: var(--text-2);
}
.sitenav-menu a {
  text-decoration: none; color: inherit; white-space: nowrap;
  padding: 7px 11px; border-radius: var(--radius-pill);
  transition: color 0.18s ease, background 0.18s ease;
}
.sitenav-menu a:hover { color: var(--text); }

.sitenav-acts { display: flex; align-items: center; gap: 8px; flex: none; }
.sitenav-cta {
  display: inline-flex; align-items: center; gap: 10px; flex: none;
  background: #fff; color: var(--on-light); border-radius: var(--radius-pill);
  padding: 11px 20px; text-decoration: none;
  font: 600 clamp(15px, 1.15vw, 17px)/1 var(--body); white-space: nowrap;
  transition: transform 0.3s ease-out, background 0.18s ease;
}
.sitenav-cta svg { fill: var(--on-light); flex: none; }
.sitenav-cta:hover { background: #f0f0f0; transform: translateY(-2px); }

/* На телефоні замість пігулки — плюс, і він відкриває аркуш. Окремий
   елемент, а не переодягнене посилання: кнопка й посилання поводяться
   по-різному. На ширшому екрані плюса немає — там усі розділи в рядку. */
.sitenav-plus {
  display: none; width: 42px; height: 42px; padding: 0; border: 0; flex: none;
  background: none; color: var(--text); cursor: pointer;
  align-items: center; justify-content: center;
  font: 400 28px/1 var(--body);
}
.sitenav-plus span { display: block; margin-top: -2px; transition: transform 0.34s var(--ease-rise); }
.sitenav-plus[aria-expanded='true'] span { transform: rotate(45deg); }

@media (max-width: 700px) {
  /* Угорі, а не внизу: там її місце і на посадковій. */
  .sitenav { top: 0; bottom: auto; padding: 10px 0; }
  .sitenav-wrap { gap: 12px; padding: 8px 8px 8px 16px; }
  .sitenav-menu, .sitenav-badge { display: none; }
  .sitenav-wrap .wordmark-name { font-size: 19px; }
  .sitenav-acts .sitenav-cta { display: none; }
  .sitenav-plus { display: flex; }
}

/* Аркуш РОЗКЛАДАЄТЬСЯ З ПАНЕЛІ, а не падає з-за екрана: він завжди лежить
   на своєму місці, а видно з нього лише те, що окреслює clip-path. Закритий
   стан — рівно прямокутник пігулки, і його рахує скрипт із її СПРАВЖНІХ
   координат, тож форма збігається з панеллю точно, а не приблизно.
   dvh, а не vh: динамічна панель браузера інакше зрізає низ. */
.sitesheet {
  --ease-rise: cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed; z-index: 40; top: 8px; left: 8px; right: 8px;
  height: calc(100dvh - 16px);
  background: var(--card); border-radius: 30px;
  padding: clamp(20px, 5vw, 28px);
  display: flex; flex-direction: column;
  visibility: hidden;
  clip-path: inset(0 0 100% 0 round var(--radius-card));
  transition: clip-path 0.44s var(--ease-rise), visibility 0s linear 0.44s;
}
.sitesheet[data-open='true'] { visibility: visible; transition-delay: 0s; }
/* Вміст проявляється трохи згодом: поки коробка ще вузька, рядки в ній
   виглядали б стиснутими. */
.sitesheet > * { opacity: 0; transition: opacity 0.2s linear; }
.sitesheet[data-open='true'] > * { opacity: 1; transition: opacity 0.26s linear 0.16s; }
.sitesheet-top { display: flex; align-items: center; justify-content: space-between; }
.sitesheet-x {
  width: 42px; height: 42px; padding: 0; border: 0; background: none;
  color: var(--text-2); cursor: pointer; font-size: 26px; line-height: 1;
}
.sitesheet-x:hover { color: var(--text); }
.sitesheet-links { margin-top: auto; display: flex; flex-direction: column; gap: 24px; }
.sitesheet-links a {
  font-family: var(--display); font-weight: 400;
  font-size: clamp(30px, 9vw, 40px); line-height: 1.05; letter-spacing: -0.025em;
  color: var(--text); text-decoration: none;
}
.sitesheet-cta { margin-top: auto; justify-content: center; width: 100%; }
@media (min-width: 701px) { .sitesheet { display: none; } }

/* Панель стоїть над вмістом, тож сторінці потрібен запас під неї. Запас на
   САМІЙ рамці, а не на `main`: підвал — сусід `main`, а не його вміст, і з
   запасом усередині він лягав рівно під скло (виміряно на 1440: підвал
   924..1000, панель 927..986). */
.has-sitenav { padding-bottom: 96px; }
/* Документ починається згори, а не з середини екрана. `main` центрує вміст
   заради коротких екранів застосунку (запрошення, головна); на сторінці з
   перемикачем документів це лишало під панеллю порожнє поле в пів екрана,
   а сам перемикач висів ні на чому. */
.has-sitenav > main { justify-content: flex-start; }
@media (max-width: 700px) { .has-sitenav { padding-bottom: 0; padding-top: 76px; } }