/* 2026-09-01 — Створено. Спільний каркас хабу: верхня смуга, повернення
   до хабу, вибір теми, меню акаунта.

   Навіщо. Токени зрівняли колір і шрифт, але кожен сервіс усе одно починався
   по-своєму: аналітика — синьою рейкою з маркою і виходом унизу, накладні —
   білою шапкою, лаунчер — третьою шапкою, склад — четвертою. Людина, яка за
   день проходить усі чотири, щоразу шукала «де тут вихід» і «як повернутись».
   Тепер перші 52 px екрана однакові скрізь: марка й поточний сервіс ліворуч,
   тема й акаунт праворуч. Усе, що нижче цієї смуги, лишається за модулем — це
   каркас, а не оболонка.

   Смуга синя в обох темах навмисно. Вона — не поверхня документа, а рамка
   продукту; якщо перефарбовувати її разом із темою, зникає єдина стала
   опора на екрані. Через це всередині смуги спільні токени --ink-* не
   годяться (на navy вони нечитні) і живуть власні --bar-ink-*.

   Порядок підключення: hub/tokens.css → hub/shell.css → style.css модуля. */

:root {
  --hub-bar-h:52px;
  /* Чорнило на синьому. Значення зняті з рейки аналітики, де їх уже
     доводили до 4.6+ на найгіршому місці — під бірюзовим засвітом угорі. */
  --bar-ink:#FFFFFF; --bar-ink-2:#C9D4E6; --bar-ink-3:#9DAABF;
  --bar-bg:var(--navy); --bar-line:#2A3C5E; --bar-lift:var(--navy-lift);
}

/* ─── Смуга ─────────────────────────────────────────────────────── */
.hub-bar[hidden] { display:none; }
.hub-bar {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:var(--s-3);
  height:var(--hub-bar-h); padding:0 var(--s-3);
  color:var(--bar-ink-2);
  background:
    radial-gradient(420px 160px at 12% -40%, rgba(31,200,194,.16), transparent 70%),
    linear-gradient(180deg, var(--bar-bg) 0%, var(--navy-deep) 100%);
  /* Волосінь замість тіні: смуга стоїть на світлому й на темному тлі, і тінь
     під нею на темному тлі не читається взагалі. */
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07);
}

.hub-mark {
  display:flex; align-items:center; gap:8px; flex:none;
  padding:6px 4px; border-radius:var(--r-s);
  color:var(--bar-ink); text-decoration:none;
  transition:background var(--t-fast) var(--ease);
}
.hub-mark b { font-size:15.5px; font-weight:700; letter-spacing:-.02em; }
@media (hover: hover) { .hub-mark:hover { background:rgba(255,255,255,.07); } }
/* На самому хабі марка — теж посилання (до вітрини), тож тримає ту саму 44px. */
@media (pointer: coarse) { .hub-mark { min-height:44px; } }

/* ─── Повернення до хабу ───────────────────────────
   Сервіси між собою не зв’язані: з будь-якого з них виходять у хаб і вже
   звідти йдуть далі. Тому в смузі немає ні ряда закладок, ні виспадного
   списку — одна кнопка ліворуч і назва того, де ти зараз. Марка всередині
   кнопки, а не поруч із нею: два сусідні елементи з одним і тим самим
   переходом — це питання «а чому їх два», а не зручність. */
.hub-back {
  display:flex; align-items:center; gap:6px; flex:none; cursor:pointer;
  padding:5px 10px 5px 6px; border-radius:var(--r-s);
  color:var(--bar-ink); text-decoration:none;
  font-size:14px; font-weight:600; letter-spacing:-.01em; line-height:1.2;
  background:rgba(255,255,255,.07);
  transition:background var(--t-fast) var(--ease);
}
.hub-back > svg:first-child { flex:none; opacity:.75; }
@media (hover: hover) { .hub-back:hover { background:rgba(255,255,255,.14); } }
.hub-back:active { transform:scale(.97); }
@media (pointer: coarse) { .hub-back { min-height:44px; } }

/* Назва поточного сервісу — підпис, а не контрол. Стискається першою,
   бо втрата хвоста слова тут дешевша за зірвану кнопку. */
.hub-now {
  flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--bar-ink);
}

/* ─── Правий бік ────────────────────────────────────────────────── */
.hub-right { display:flex; align-items:center; gap:6px; flex:none; margin-left:auto; }

.hub-tenant {
  padding:4px 10px; border-radius:99px; white-space:nowrap;
  font-family:var(--font-mono); font-size:11px; letter-spacing:.02em;
  color:var(--bar-ink-2); background:rgba(255,255,255,.08);
}

.hub-acc {
  display:grid; place-items:center; flex:none; cursor:pointer;
  width:36px; height:36px; padding:0; background:none; border:0; border-radius:99px;
  transition:box-shadow var(--t-fast) var(--ease);
}
.hub-av {
  display:grid; place-items:center; width:30px; height:30px; border-radius:99px;
  font-size:11.5px; font-weight:700; letter-spacing:.02em;
  color:var(--on-teal); background:var(--teal);
}
.hub-acc[aria-expanded="true"], .hub-acc:focus-visible { box-shadow:0 0 0 2px rgba(255,255,255,.35); }
@media (pointer: coarse) { .hub-acc { width:44px; height:44px; } }

/* ─── Меню акаунта ──────────────────────────────────────────────── */
.hub-menu {
  position:fixed; top:calc(var(--hub-bar-h) + 6px); right:8px; z-index:70;
  width:min(280px, calc(100vw - 16px));
  display:flex; flex-direction:column;
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-lift);
  animation:hub-menu-in var(--t-base) var(--ease);
}
.hub-menu[hidden] { display:none; }
@keyframes hub-menu-in { from { opacity:0; transform:translateY(-6px); } }

.hub-who { padding:12px 14px 10px; border-bottom:1px solid var(--line); }
.hub-who b { display:block; font-size:14px; font-weight:650; line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hub-who small { display:block; font-size:12px; color:var(--ink-3); }

.hub-sec { padding:10px 14px; border-bottom:1px solid var(--line); }
.hub-lab {
  display:block; margin-bottom:6px;
  font-family:var(--font-mono); font-size:10px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--ink-3);
}

/* Перемикач теми. Три стани, а не два: «авто» — це не третій колір, а відмова
   від вибору, і людина має змогу до неї повернутись. */
.hub-seg { display:flex; gap:2px; padding:2px; background:var(--sunken);
  border:1px solid var(--line); border-radius:var(--r-s); }
.hub-seg button {
  flex:1; cursor:pointer; padding:7px 4px; border:0; border-radius:6px;
  font-size:12.5px; font-weight:550; color:var(--ink-2); background:none;
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hub-seg button[aria-checked="true"] {
  background:var(--surface); color:var(--ink); box-shadow:var(--shadow-s);
}
@media (hover: hover) { .hub-seg button:hover:not([aria-checked="true"]) { color:var(--ink); } }
/* Три стани теми — такі самі кнопки, як решта меню: на дотик 44px. */
@media (pointer: coarse) { .hub-seg button { min-height:44px; } }

.hub-acts { padding:6px; display:flex; flex-direction:column; }
.hub-item {
  display:flex; align-items:center; gap:9px; width:100%; text-align:left; cursor:pointer;
  padding:9px 8px; font-size:13.5px; color:var(--ink-2); text-decoration:none;
  background:none; border:0; border-radius:var(--r-s);
  transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.hub-item[hidden] { display:none; }
.hub-item svg { flex:none; opacity:.7; }
@media (hover: hover) { .hub-item:hover { background:var(--sunken); color:var(--ink); } }
@media (pointer: coarse) { .hub-item { min-height:44px; padding:11px 8px; } }
.hub-item.danger { color:var(--neg-ink); }
@media (hover: hover) { .hub-item.danger:hover { background:var(--neg-soft); } }

/* Клацання повз меню закриває його. Прозора підкладка замість слухача на
   document: та вміє закритись раніше, ніж спрацює кнопка всередині. */
.hub-scrim { position:fixed; inset:0; z-index:65; background:transparent; }
.hub-scrim[hidden] { display:none; }

/* ─── Вузький екран ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  .hub-tenant { display:none; }
  .hub-bar { padding:0 8px; gap:8px; }
}

/* ─── Тема на екранах без смуги ─────────────────────────────────────
   Вхід, зміна пароля, «доступ закрито» — там смуги немає, бо немає ні сесії,
   ні сервісів, між якими ходити. Вибір теми там потрібен так само: людина
   вводить пароль о шостій ранку в тому ж підвалі. */
.hub-fab {
  position:fixed; top:12px; right:12px; z-index:50;
  display:grid; place-items:center; width:38px; height:38px; padding:0; cursor:pointer;
  color:var(--ink-2); background:var(--surface);
  border:1px solid var(--line); border-radius:var(--r-s); box-shadow:var(--shadow-s);
  transition:color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.hub-fab[hidden] { display:none; }
@media (hover: hover) { .hub-fab:hover { color:var(--ink); border-color:var(--line-strong); } }
.hub-fab:active { transform:scale(.94); }
@media (pointer: coarse) { .hub-fab { width:44px; height:44px; } }
/* 01.09.2026 — Вітрина має власну шапку на темному тлі, і біла плавка лягала
   просто поверх неї. Тут та сама кнопка стає звичайним елементом рядка й бере
   колір від шапки, а не від сторінки. */
.hub-fab.hub-fab-inline {
  position:static; width:38px; height:38px; flex:none;
  color:inherit; background:transparent;
  border-color:currentColor; box-shadow:none; opacity:.75;
}
@media (hover: hover) { .hub-fab.hub-fab-inline:hover { color:inherit; opacity:1; } }
@media (pointer: coarse) { .hub-fab.hub-fab-inline { width:44px; height:44px; } }

/* ─── Нижній док ─── 02.09.2026 ────────────────────────────────────
   Один футер на всі сервіси. Ліворуч — повернення всередині модуля,
   праворуч — вихід до хабу, посередині — головна дія самого сервісу
   (зняти накладну, почати перерахунок, покликати асистента). Форма взята
   з дока аналітики: він уже стояв там місяць і його не переучували.

   Чому це замінило верхню смугу в сервісах. Смуга займала 52 px угорі —
   там, куди великий палець не дістає, — і повторювала те, що вже написано
   заголовком екрана. Низ під пальцем, тому назад-і-хаб живуть тут, а сама
   смуга лишилась там, де вона справді потрібна: на хабі, де з неї заходять
   у профіль. Тема й вихід — теж там, у меню акаунта: у сервісах їх немає
   навмисно, бо сервіс не знає ні імені людини, ні як її вивести.

   Модуль сам додає собі нижній відступ на висоту дока: padding-bottom:
   var(--hub-dock-h) на тому блоці, що гортається. */
:root { --hub-dock-h:calc(64px + env(safe-area-inset-bottom)); }

/* z-index навмисно низький: док — це частина сторінки, а не шар над нею.
   Будь-яка шторка чи діалог модуля (у складі затемнення 30 і панель 40, у
   накладних вікно 50) має накривати його собою — інакше кнопка «Сканувати»
   світиться поверх власного діалогу й ріже його нижній рядок. */
.hub-dock {
  position:fixed; left:0; right:0; bottom:0; z-index:25;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  height:var(--hub-dock-h);
  padding:0 14px env(safe-area-inset-bottom);
  background:color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter:blur(14px) saturate(1.2);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  border-top:1px solid var(--line);
}
.hub-dock[hidden] { display:none; }

.hub-dock-side {
  display:flex; flex-direction:column; align-items:center; gap:2px;
  justify-self:center; width:72px; padding:6px 0;
  color:var(--ink-2); text-decoration:none; cursor:pointer;
  background:none; border:0; border-radius:var(--r-m);
  transition:color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease),
             opacity var(--t-fast) var(--ease);
}
.hub-dock-side em { font-style:normal; font-size:10px; letter-spacing:.02em; color:var(--ink-3); }
.hub-dock-side:active { transform:scale(.94); }
/* Неактивна «Назад» лишається на місці приглушеною: зникни вона — док
   стрибав би щоразу, коли нема куди вертатись. */
.hub-dock-side[disabled], .hub-dock-side[aria-disabled="true"] { opacity:.32; pointer-events:none; }
@media (hover: hover) { .hub-dock-side:hover { color:var(--ink); } }

/* Центр — пігулка, а не кружок: дії сервісів підписані словами
   («Почати перерахунок» у кружок не влазить), і підпис тут головний. */
.hub-dock-main {
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:48px; margin-top:-12px; padding:0 20px; cursor:pointer;
  max-width:min(62vw, 280px);
  font-size:14px; font-weight:640; letter-spacing:-.01em; white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
  color:var(--on-teal); -webkit-tap-highlight-color:transparent;
  background:linear-gradient(150deg, var(--teal-hover), var(--teal));
  border:3px solid var(--surface); border-radius:99px;
  box-shadow:0 8px 22px -8px rgba(31,200,194,.75), var(--shadow-s);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-base) var(--ease);
}
.hub-dock-main svg { flex:none; }
.hub-dock-main:active { transform:scale(.96); }
.hub-dock-main[hidden] { display:none; }
.hub-dock-main[disabled] { opacity:.5; pointer-events:none; box-shadow:none; }

@media (prefers-reduced-motion: reduce) {
  .hub-dock-main:active, .hub-dock-side:active { transform:none; }
}