/* Шапка застосунку за зразком сайту.
   ═══════════════════════════════════════════════════════════════════════

   Вантажиться ОСТАННІМ і навмисно: тут перевизначається геометрія топбару,
   яка приїхала з core/02_shell.css. Окремий файл, а не правка в тому — щоб
   «як було» відкочувалось одним рядком у index.html.

   Мірки взяті з site.css, а не підібрані на око: висота знака, крок між
   посиланнями й радіус пігулки мусять збігатися, інакше перехід з лендінга
   в застосунок читається як перехід у чужий продукт. Різниця лише в
   масштабі — 60px висоти шапки проти 72px на сайті, бо в застосунку під
   нею ще двадцять рядків роботи. */

/* ── знак ────────────────────────────────────────────────────────────── */
/* 🛑 ЗНАК ТОЧНО ТАКИЙ САМИЙ, ЯК НА САЙТІ — ДО КЕГЛЯ ВКЛЮЧНО.
   Спершу тут стояла Geologica 600: сайт малював Playfair Display 400, і це
   були два різні написи, тож перехід із сайту в застосунок читався як
   перехід у чужий продукт.

   Потім я лишив 20px замість 22px, міркуючи пропорцією: смуга тут 56px, а
   на сайті 72. Міркування правильне для окремо взятої смуги й хибне для
   продукту: людина не порівнює відсотки висоти, вона бачить два написи
   різного розміру й вирішує, що потрапила кудись інде. Панель мусить бути
   всюди однакова, тож кегль теж 22px. Місця вистачає з запасом —
   виміряно: у смузі 56px знак заввишки 22 лишає 34px повітря. */
.topbar .app-logo{
  display: inline-flex; align-items: center;
  font: 400 22px/1 var(--serif);
  /* Трек нульовий — пояснення в site.css, у правилі .logo: негативний
     трек дизайн-код задає для заголовків 40-84px, а на 22px він злипає
     засічки. Обидві шапки набрані однаково, тож і значення одне. */
  letter-spacing: 0; color: var(--text);
  text-decoration: none; margin-right: 6px; flex: none;
}
/* `<i>` тут за структуру, не за накреслення — курсив знімаємо.
   Підсвічені обидві: перша «S» і «OS». Пояснення в site.css — дві теплі
   опори по краях тримають слово як дужки. */
.topbar .app-logo i{
  font-style: normal; color: var(--accent);
  transition: text-shadow .6s var(--ease);
}
.topbar .app-logo span[aria-hidden]{
  position: relative;
  display: inline-block; transition: letter-spacing .5s var(--ease);
}
/* Промінь по знаку — той самий, що на сайті. Не миготіння й не пульс:
   одна смуга світла проходить зліва направо раз на цикл, решту часу знак
   стоїть спокійно. `background-clip:text` малює градієнт ПО ЛІТЕРАХ, тож
   підсвітка не виходить за їхні межі й не потребує зайвого елемента.
   Текст бере з `data-txt` — без атрибута правило просто нічого не малює. */
.topbar .app-logo span[aria-hidden]::after{
  content: attr(data-txt); position: absolute; inset: 0; pointer-events: none;
  /* 🛑 `plus-lighter` і .42, а не звичайне накладання й .92 — пояснення
     в site.css: білий на 92% не підсвічував літери, а замальовував їх,
     і бурштин на секунду зникав. Додавання світла робить бурштин
     яскравішим бурштином. Обидві шапки набрані однаково. */
  background: linear-gradient(100deg,
    transparent 38%, rgba(255,255,255,.42) 50%, transparent 62%);
  mix-blend-mode: plus-lighter;
  background-size: 280% 100%; background-position: 180% 0;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: appLogoSheen 7s var(--ease) 1.4s infinite;
}
@keyframes appLogoSheen{
  0%   { background-position: 180% 0 }
  22%  { background-position: -80% 0 }
  100% { background-position: -80% 0 }   /* решта циклу — спокій */
}
@media (prefers-reduced-motion: reduce){
  .topbar .app-logo span[aria-hidden]::after{ animation: none }
}
/* Ховер трохи стискає знак — рух, а не зміна кольору: колір тут уже
   зайнятий сенсом. */
.topbar .app-logo:hover span[aria-hidden]{ letter-spacing: -.01em; }
.topbar .app-logo:hover i{
  text-shadow: 0 0 18px var(--accent-t-glow-hi);
}

/* ── пошук по застосунку ──────────────────────────────────────────────
   Стилі приїхали з інлайну в index.html. Там вони посилались на змінні
   сайту (--line, --ink-dim), яких у застосунку немає, тож усе трималось
   на запасних значеннях після коми — тобто на хардкоді. */
.palette-open{
  display: inline-flex; align-items: center; gap: var(--sp-8);
  padding: 6px 10px; border-radius: var(--radius-sm);
  background: transparent; border: 1px solid var(--border);
  color: var(--text-mute); font: 500 var(--fs-12)/1 var(--sans); cursor: pointer;
  transition: var(--t-fast) var(--ease);
}
.palette-open:hover{ border-color: var(--border-hover); color: var(--text-dim); background: var(--panel-2); }
.palette-open kbd{
  font: 600 var(--fs-10)/1 var(--mono); border: 1px solid var(--border);
  border-radius: var(--radius-xs); padding: 3px 5px; opacity: .8;
}

/* ── кнопка акаунта ──────────────────────────────────────────────────── */
.acct-btn{
  display: inline-flex; align-items: center; gap: var(--sp-6);
  padding: 4px 8px 4px 4px; border-radius: 999px;
  background: var(--panel); border: 1px solid var(--border);
  color: var(--text-mute); cursor: pointer; flex: none;
  transition: var(--t-fast) var(--ease);
}
.acct-btn:hover{ border-color: var(--border-hover); background: var(--panel-2); }
.acct-btn[aria-expanded="true"]{ border-color: var(--accent); }
.acct-btn .av{
  width: 26px; height: 26px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: var(--on-brand);
  font: 700 var(--fs-11)/1 var(--sans);
}
.acct-chev{ opacity: .7; }

/* ── меню акаунта ────────────────────────────────────────────────────── */
.acct-overlay{ position: fixed; inset: 0; z-index: 60; background: transparent; }
.acct-menu{
  position: fixed; width: 268px; max-width: calc(100vw - 16px);
  /* Концентрично (сесія 6): панель 22, відступ 8, пункт 14 — тоді
     криві пункту й панелі паралельні. Було 6/14 при панелі 14, тобто
     пункт мав той самий радіус, що й панель навколо нього. */
  padding: 8px; border-radius: var(--radius-lg);
  background: var(--panel); border: 1px solid var(--border);
  box-shadow: var(--shadow-pop);
}
.am-head{ display: flex; align-items: center; gap: var(--sp-10); padding: 10px 10px 6px; }
.am-av{
  width: 36px; height: 36px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); color: var(--on-brand);
  font: 700 var(--fs-13)/1 var(--sans);
}
.am-who{ min-width: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.am-name{ font: 600 var(--fs-13)/1.2 var(--sans); color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-mail{ font: 500 var(--fs-11)/1.2 var(--sans); color: var(--text-mute);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.am-role{
  margin: 0 10px 8px; padding: 3px 8px; border-radius: 999px;
  display: inline-block; font: 600 var(--fs-10)/1.4 var(--sans);
  /* 🛑 Без бурштину: сесія 6 каже прямо — «у меню немає бурштину:
     жодна дія тут не коштує грошей». */
  letter-spacing: .04em; color: var(--text-mute); background: var(--fill-1);
}

/* 🛑 БЛОК `.am-plan` ВИДАЛЕНО РАЗОМ ІЗ РОЗМІТКОЮ. Це була сітка 2×2
   «Тариф / Кредитів», яка до завантаження показувала дві риски просто
   під іменем — на екрані це читалось як два зламані поля. Тариф пішов
   у підпис під іменем, залишок — значенням у пункті «Гроші». */

.am-sep{ height: 1px; margin: 6px 4px; background: var(--border-soft); }

.am-row{
  display: flex; align-items: center; gap: var(--sp-10); width: 100%;
  padding: 8px 10px; border: none; border-radius: var(--radius-sm);
  background: transparent; color: var(--text-dim);
  font: 500 var(--fs-13)/1 var(--sans); text-align: left; cursor: pointer;
  transition: var(--t-fast) var(--ease);
}
.am-row:hover{ background: var(--panel-2); color: var(--text); }
/* Значення праворуч — це і є «причина зайти»: залишок кредитів, скільки
   служб відвалилось, скільки кроків пройдено. Моноширинне, бо це
   показання, а не підпис. */
.am-val{
  margin-left: auto; flex: none;
  font: 600 var(--fs-11)/1 var(--mono); color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}
/* Зламане позначаємо тим самим червоним, що й решта збоїв у продукті:
   інакше довелось би заводити третій колір тривоги. */
.am-row-warn .am-val{ color: var(--danger); }
/* «Вийти» — єдиний червоний ПУНКТ: незворотне мусить виглядати інакше
   за вибір теми, і видно це має бути до наведення, а не після. */
.am-row-danger{ color: var(--danger); }
.am-row-danger .am-ic{ color: var(--danger); }
.am-row-danger:hover{ background: var(--btn-danger-bg); color: var(--danger); }

.am-ic{ width: 16px; height: 16px; flex: none; display: flex;
  align-items: center; justify-content: center; color: var(--text-mute); }
.am-ic svg{ width: 16px; height: 16px; }
.am-row:hover .am-ic{ color: var(--accent); }
.am-row[data-act="logout"]:hover{ color: var(--danger); }
.am-row[data-act="logout"]:hover .am-ic{ color: var(--danger); }

/* ── перемикачі теми й мови ──────────────────────────────────────────── */
.am-pref{
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-10); padding: 5px 10px;
  font: 500 var(--fs-12)/1 var(--sans); color: var(--text-mute);
}
.am-seg{ display: inline-flex; padding: 2px; border-radius: 999px;
  background: var(--panel-2); border: 1px solid var(--border); }
.ams{
  padding: 5px 10px; border: none; border-radius: 999px; cursor: pointer;
  background: transparent; color: var(--text-mute);
  font: 600 var(--fs-11)/1 var(--sans); transition: var(--t-fast) var(--ease);
}
.ams:hover{ color: var(--text); }
/* Вибір — яскравістю, не кольором. Те саме правило, що в `.ui-pick`
   (див. --pick-active-* у core/01_base.css), і тут воно ще й прямо
   вимагається сесією 6. */
.ams.on{ background: var(--pick-active-bg); color: var(--pick-active-fg); }

/* ── адаптив ─────────────────────────────────────────────────────────
   Порядок зникання — від найменш потрібного в цю мить. Розділи сайту
   йдуть першими: людина всередині застосунку працює, а не читає про
   тарифи. Останніми лишаються бренд і акаунт — те, чиїм іменем вона
   це робить. */
@media (max-width: 1000px){ .palette-open span{ display: none; } }
@media (max-width: 860px){
  .palette-open{ display: none; }
  .conn-pill{ display: none; }
  /* 44px — мінімальна ціль дотику, і в шапці це не формальність: усі ці
     кнопки стоять поруч, у два пальці шириною. Виміряно наскрізною
     перевіркою на 390px — було 34px у дзвінка, кредитів, бренду й
     акаунта, тобто промахнутись легше, ніж влучити.
     Ширина лишається як була: розтягувати нема куди, а висота нічого не
     ламає — шапка й так 60px. */
  .topbar .icon-btn,
  .topbar .runs-chip,
  .topbar .credits-chip,
  .topbar .brand-switch,
  .topbar .app-logo,
  .topbar .acct-btn{ min-height: 44px; }
  /* Знак лишається 20px на око, але його область натискання — 44px:
     висоту дає flex-центрування, а не збільшений шрифт. */
  .topbar .app-logo{ align-items: center; }
  .acct-btn{ padding: 6px 8px 6px 6px; }
  .acct-btn .av{ width: 30px; height: 30px; }
}

/* ── розділи сайту ─────────────────────────────────────────────────────
   Той самий набір і той самий порядок, що в шапці сайту: спільна шапка —
   це те, що робить лендінг і застосунок одним домом, а не двома різними
   місцями з однією назвою. */
.topnav{ display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.tnl{
  padding: 7px 11px; border-radius: 999px;
  font: 500 var(--fs-13)/1 var(--sans); color: var(--text-mute);
  text-decoration: none; white-space: nowrap;
  transition: color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.tnl:hover{ color: var(--text); background: var(--fill-1); }
/* 🛑 «Ціни» тут БЕЗ бурштину, хоч на сайті воно бурштинове — і це не
   недогляд, а різниця в тому, що бурштин означає у двох місцях.

   На сайті бурштин веде до покупки, і «Ціни» — головна дія сторінки.
   У приладі бурштин означає «дія, яка щось коштує», і він уже витрачений
   у цій самій шапці на залишок кредитів. Другий бурштин поруч зрівняв би
   посилання в прайс із залишком — тобто шапка робочого інструмента
   радила б купувати щоразу, як людина дивиться на баланс.

   Підсвічування лишається, але яскравістю: вибір — яскравість, дія —
   колір; той самий закон, що для рейки, вкладок і чипів. */
.tnl[data-site="pricing"]{ color: var(--text-dim); }
.tnl[data-site="pricing"]:hover{ color: var(--text); background: var(--fill-1); }

/* Нижче 1180px розділи ховаються: там за місце в шапці змагаються бренд,
   пошук і залишок, і в роботі вони потрібніші. Дорога на сайт лишається
   знаком ліворуч. */
/* 🛑 Поріг був 1180px — на 260 вище, ніж треба, і саме тому власник
   сказав «я не бачу чогось»: у вікні 1162 розділи сайту зникали
   цілком, а поруч у шапці стояв порожній розпірник на 361px. Ми
   ховали вміст і лишали дірку рівно там, де він би став.

   Виміряно на живій сторінці: навігація просить 305px, решта шапки
   займає 575px, тобто все вміщається вже з 920px. Поріг 1000 —
   це виміряні 920 плюс запас на українські слова, довші за
   англійські («Можливості» проти «Features»).

   Нижче порога розділи не зникають безслідно: вони лишаються в
   бічному меню під гамбургером — інакше вихід на сайт існував би
   лише через набір адреси руками. */
@media (max-width: 1000px){ .topnav{ display: none; } }

/* ── розділи сайту в підвалі рейки ──────────────────────────────────────
   Показуються рівно тоді, коли зникли з шапки. Один і той самий поріг у
   двох правилах — це навмисне дублювання: інакше на якійсь ширині вони
   або задвоюються, або зникають обидва. */
.nav-site{ display: none }
@media (max-width: 1000px){
  .nav-site{
    display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6);
    padding: var(--sp-6) var(--sp-6) var(--sp-8);
    margin-top: auto; border-top: 1px solid var(--line);
  }
  .nav-site a{
    font: 500 var(--fs-12)/var(--lh-base) var(--sans);
    color: var(--text-mute); text-decoration: none;
  }
  .nav-site a:hover{ color: var(--text) }
}

/* У світлій темі променя немає — див. site.css: додавання світла веде
   темні літери до світлого тла, тобто стирає напис. */
:root[data-theme="light"] .topbar .app-logo span[aria-hidden]::after{
  animation: none; background: none;
}
@media (prefers-color-scheme: light){
  :root:not([data-theme="dark"]) .topbar .app-logo span[aria-hidden]::after{
    animation: none; background: none;
  }
}