/* Спільний каркас застосунку: фіксоване ліве меню + зсув контенту.
   Ретрофіт у наявні standalone-сторінки без перебудови DOM: сайдбар додає JS,
   тіло отримує клас .has-shell, контент зсувається margin-left.
   Токени беруться зі сторінкового CSS; фолбеки — щоб працювало на будь-якій. */

:root{ --shell-w:236px; --shell-w-min:66px; }

/* Контент і верхні смуги (сповіщення, тестовий банер) зсуваються праворуч від
   фіксованого сайдбару — інакше їхня ліва частина ховається під ним. */
body.has-shell .wrap,
body.has-shell #__annBanner,
body.has-shell #__testEnvBanner{ margin-left:var(--shell-w); }
body.has-shell.shell-collapsed .wrap,
body.has-shell.shell-collapsed #__annBanner,
body.has-shell.shell-collapsed #__testEnvBanner{ margin-left:var(--shell-w-min); }
/* Старий верхній нав і лого — сайдбар їх замінює. */
body.has-shell .site-nav{ display:none !important; }
body.has-shell .text-logo{ display:none; }

.app-sidebar{
  position:fixed; top:0; left:0; bottom:0; width:var(--shell-w); z-index:40;
  background:var(--panel,#24282c); border-right:1px solid var(--line,#383e43);
  display:flex; flex-direction:column; padding:16px 12px;
  font-family:-apple-system,system-ui,"Segoe UI",Roboto,sans-serif;
}
.shell-brand{ display:flex; align-items:center; gap:10px; padding:4px 8px 16px;
  border-bottom:1px solid var(--line,#383e43); margin-bottom:12px; }
.shell-brand .logo{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-weight:600;
  letter-spacing:.04em; font-size:15px; color:var(--text,#eef1f3); }
.shell-brand .logo b{ color:var(--amber,#f2a900); }

.shell-nav{ display:flex; flex-direction:column; gap:2px; flex:1; overflow-y:auto; min-height:0; }
/* Явний стиль, незалежний від сторінкового `button{}`: під нав застосунку
   (IBM Plex Mono, uppercase — як .nav-link), а не випадковий Oswald-леак. */
.shell-sec{ border:none; background:none; color:var(--muted,#9aa3ab);
  font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:12.5px;
  text-transform:uppercase; letter-spacing:.05em; font-weight:400;
  text-align:left; display:flex; align-items:center;
  gap:11px; padding:10px; border-radius:8px; cursor:pointer; width:100%; }
.shell-sec:hover{ background:var(--panel-2,#2c3135); color:var(--text,#eef1f3); }
.shell-sec svg.ic{ width:19px; height:19px; flex:none; }
.shell-sec .chev{ margin-left:auto; width:14px; height:14px; opacity:.6; transition:transform .15s; }
.shell-sec.open{ color:var(--text,#eef1f3); }
.shell-sec.open .chev{ transform:rotate(90deg); }
.shell-sec.active{ color:var(--amber,#f2a900); }

.shell-subs{ display:flex; flex-direction:column; gap:1px; margin:2px 0 6px 19px;
  padding-left:12px; border-left:1px solid var(--line,#383e43); }
.shell-sub{ color:var(--muted,#9aa3ab); font-size:13.5px; text-decoration:none;
  padding:8px 12px; border-radius:7px; cursor:pointer; display:flex; align-items:center; }
.shell-sub:hover{ background:var(--panel-2,#2c3135); color:var(--text,#eef1f3); }
.shell-sub.active{ background:rgba(242,169,0,.1); color:var(--amber,#f2a900); }
.shell-sub.soon{ cursor:default; opacity:.65; }
.shell-sub.soon:hover{ background:none; color:var(--muted,#9aa3ab); }
.shell-tag{ font-family:'IBM Plex Mono',ui-monospace,monospace; font-size:9.5px;
  letter-spacing:.05em; color:var(--muted,#9aa3ab); border:1px solid var(--line,#383e43);
  border-radius:4px; padding:1px 5px; margin-left:auto; }

.shell-foot{ border-top:1px solid var(--line,#383e43); padding-top:8px; margin-top:8px; }
.shell-user{ display:flex; align-items:center; gap:10px; padding:8px; }
.shell-user .av{ width:30px; height:30px; border-radius:50%; flex:none;
  background:rgba(242,169,0,.15); color:var(--amber,#f2a900); display:flex;
  align-items:center; justify-content:center; font-family:'IBM Plex Mono',monospace;
  font-size:12px; font-weight:600; }
.shell-user .nm{ font-size:13px; color:var(--text,#eef1f3); }
.shell-user .logout{ font-size:11px; color:var(--muted,#9aa3ab); text-decoration:none;
  border-bottom:1px dashed var(--muted,#9aa3ab); }
.shell-user .logout:hover{ color:var(--red,#d64545); border-bottom-color:var(--red,#d64545); }

/* Плашка часового поясу — з'являється, лише коли зона не київська (див.
   tzChipHtml в appShell.js). Навмисно тиха: це не попередження, а виноска. */
.shell-tz{ display:flex; align-items:center; gap:6px; padding:5px 8px; margin-bottom:2px;
  font-size:11px; color:var(--muted,#9aa3ab); cursor:default; }
.shell-tz svg{ width:13px; height:13px; flex:none; }
.shell-tz span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* У згорнутому меню (icon-rail) лишається сам годинник — підпис не влізе. */
.shell-collapsed .shell-tz{ justify-content:center; padding:5px 0; }
.shell-collapsed .shell-tz span{ display:none; }

/* Кнопка згортання меню (у шапці сайдбару). */
.shell-brand{ justify-content:space-between; }
.shell-collapse{ border:none; background:none; color:var(--muted,#9aa3ab); cursor:pointer;
  width:26px; height:26px; padding:0; flex:none; border-radius:6px;
  display:flex; align-items:center; justify-content:center; }
.shell-collapse:hover{ background:var(--panel-2,#2c3135); color:var(--text,#eef1f3); }
.shell-collapse svg{ width:18px; height:18px; }

/* Згорнутий стан: лише іконки (icon-rail). */
body.has-shell.shell-collapsed .app-sidebar{ width:var(--shell-w-min); padding:16px 8px; }
.shell-collapsed .shell-brand{ justify-content:center; }
.shell-collapsed .shell-brand .logo{ display:none; }
.shell-collapsed .shell-collapse svg{ transform:rotate(180deg); }
.shell-collapsed .shell-sec{ justify-content:center; gap:0; padding:10px 0; }
.shell-collapsed .shell-lbl,
.shell-collapsed .shell-sec .chev,
.shell-collapsed .shell-subs,
.shell-collapsed .shell-tag,
.shell-collapsed .shell-user .nm,
.shell-collapsed .shell-user .logout{ display:none; }
.shell-collapsed .shell-user{ justify-content:center; padding:8px 0; }

/* Мобільний: сайдбар ховається, показується кнопка-гамбургер. */
.shell-toggle{ display:none; position:fixed; top:12px; left:12px; z-index:41;
  width:40px; height:40px; border-radius:8px; border:1px solid var(--line,#383e43);
  background:var(--panel,#24282c); color:var(--text,#eef1f3); cursor:pointer;
  align-items:center; justify-content:center; }
.shell-scrim{ display:none; position:fixed; inset:0; z-index:39; background:rgba(0,0,0,.45); }
@media(max-width:820px){
  .app-sidebar{ transform:translateX(-100%); transition:transform .2s; }
  body.has-shell .wrap, body.has-shell #__annBanner, body.has-shell #__testEnvBanner,
  body.has-shell.shell-collapsed .wrap,
  body.has-shell.shell-collapsed #__annBanner,
  body.has-shell.shell-collapsed #__testEnvBanner{ margin-left:0; }
  body.has-shell .wrap{ padding-top:60px; }
  body.has-shell .shell-toggle{ display:flex; }
  body.shell-open .app-sidebar{ transform:none; }
  body.shell-open .shell-scrim{ display:block; }
}

/* ── Закладки користувача (наскрізні, під меню) ─────────────────────────── */
.shell-bm{ border-top:1px solid var(--line,#383e43); margin-top:8px; padding-top:4px;
  display:flex; flex-direction:column; min-height:0; flex:1 1 auto; }
.shell-bm-h{ display:flex; align-items:center; gap:8px; padding:8px 10px 6px; }
.shell-bm-h .t{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint,#6a727a); }
.shell-bm-h .n{ font-family:'IBM Plex Mono',monospace; font-size:9.5px; color:var(--faint,#6a727a);
  background:var(--panel-2,#2c3135); border-radius:20px; padding:1px 7px; }
.shell-bm-h .clr{ margin-left:auto; font-size:10.5px; color:var(--faint,#6a727a);
  background:none; border:none; cursor:pointer; }
.shell-bm-h .clr:hover{ color:var(--red,#d64545); }
.shell-bm-list{ overflow-y:auto; padding:0 6px 8px; display:flex; flex-direction:column; gap:3px; min-height:0; }

.shell-bmi{ display:flex; align-items:center; gap:9px; padding:7px 8px; border-radius:9px;
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  color:var(--muted,#9aa3ab); font:inherit; }
.shell-bmi:hover{ background:var(--panel-2,#2c3135); color:var(--text,#eef1f3); }
.shell-bmi.on{ background:rgba(242,169,0,.12); box-shadow:inset 2px 0 0 var(--amber,#f2a900);
  color:var(--text,#eef1f3); }
.shell-bmi .ic{ width:24px; height:24px; border-radius:7px; display:grid; place-items:center;
  flex:none; background:var(--panel-3,#31363b); color:var(--muted,#9aa3ab); position:relative; }
.shell-bmi.on .ic{ color:var(--amber,#f2a900); }
.shell-bmi .ic svg{ width:13px; height:13px; }
.shell-bmi .tx{ min-width:0; flex:1; display:block; overflow:hidden; }
.shell-bmi .t1{ display:block; font-family:'IBM Plex Mono',monospace; font-size:12px; font-weight:600;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.shell-bmi.on .t1{ color:var(--amber,#f2a900); }
.shell-bmi .t2{ display:block; font-size:10.5px; color:var(--faint,#6a727a);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px; }
.shell-bmi .sd{ width:7px; height:7px; border-radius:50%; flex:none; background:var(--bmc,transparent); }
.shell-bmi .x{ width:20px; height:20px; border-radius:6px; display:grid; place-items:center;
  font-size:11px; color:var(--faint,#6a727a); flex:none; opacity:0; }
.shell-bmi:hover .x, .shell-bmi.on .x{ opacity:1; }
.shell-bmi .x:hover{ background:rgba(214,69,69,.18); color:var(--red,#d64545); }
.shell-bm-empty{ padding:10px 12px; color:var(--faint,#6a727a); font-size:11px; line-height:1.6; text-align:center; }

/* Згорнуте меню — самі іконки, статус крапкою на іконці */
.shell-collapsed .shell-bm-h{ justify-content:center; padding:8px 0 6px; }
.shell-collapsed .shell-bm-h .t, .shell-collapsed .shell-bm-h .clr{ display:none; }
.shell-collapsed .shell-bm-list{ padding:0 4px 8px; }
.shell-collapsed .shell-bmi{ justify-content:center; padding:7px 0; }
.shell-collapsed .shell-bmi .tx, .shell-collapsed .shell-bmi .x, .shell-collapsed .shell-bmi .sd{ display:none; }
.shell-collapsed .shell-bmi .ic::after{ content:""; position:absolute; top:-2px; right:-2px;
  width:7px; height:7px; border-radius:50%; background:var(--bmc,transparent); }
.shell-collapsed .shell-bm-empty{ display:none; }

/* ── Перехід між документами без «спалаху» ──────────────────────────────
   Сторінки PLAN — окремі документи. View Transitions робить перехід
   плавним, і разом із prerender (Speculation Rules у appShell.js) це
   читається як перемикання всередині одного вікна, а не завантаження. */
@view-transition { navigation: auto; }

/* Ліва панель не має «перелітати» — вона однакова на всіх сторінках. */
.app-sidebar { view-transition-name: tp-sidebar; }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

/* Закладка тепер <a> — знімаємо типове оформлення посилання. */
.shell-bmi { text-decoration: none; }

/* ---------- Панель «Перевіряємо вхід…» ----------
   Кожна сторінка при завантаженні питає /api/auth/me і, поки чекає, показує цю
   панель. Відповідь іде ~140 мс, із яких ~100 мс — сама дорога до сервера
   (стільки ж займає статичний файл). Тобто потужніший сервер тут не рятує:
   блимало б майже так само.

   Тому не пришвидшуємо перевірку, а не показуємо панель, доки вона не стала
   доречною: перші 400 мс вона невидима й у звичайному випадку не з'являється
   взагалі, а на поганому зв'язку проявляється — і видно, що сторінка не зависла.

   Ховає CSS (щоб не блимнуло ще до виконання скриптів), а повертає таймер у
   /js/api.js. Через CSS-анімацію робити не можна: у фоновій вкладці браузер її
   гальмує, і панель не з'явилася б навіть тоді, коли вона потрібна. */
#autoLoginPanel { visibility: hidden; }