/* Меню й верх шапки. Телефон (11 листопада): у лівому верхньому куті куля «Головна», поруч назва сторінки. Значки
   розділів — Налаштування, Довідка — стоять лише на Головній, праворуч від вітання, перед перемикачем теми;
   на інших сторінках праворуч від назви лише перемикач теми (з 12 листопада), і назва лишається великою. Ряду меню під
   назвою немає; низ екрана вільний. Комп'ютер (з 12 листопада): верхня панель над сторінкою — куля, перемикач розділів, Налаштування, Довідка й перемикач
   теми (унизу файлу); у шапці сторінки значків і перемикача теми немає.
   Сама куля намальована в look.css. Які розділи стоять значками — js/app.js (HEAD). */

/* ---------- перемикач теми ----------
   На кожній сторінці останнім праворуч у шапці (12 листопада; до того кнопка зі значком і лише на Головній): доріжка й кружок.
   Кружок ліворуч — світла тема, праворуч — темна; у кружку значок теперішньої теми. Клас flip ставить js/app.js одразу
   після натиску: кружок переїжджає, а не стрибає. ::before — невидиме поле довкола, щоб у вузький перемикач було легко
   влучити пальцем. */
.theme-switch{position:relative; flex:none; width:44px; height:24px; padding:0; border:0; border-radius:999px; cursor:pointer;
  background:var(--hero-glass); box-shadow:inset 0 0 0 1px var(--hero-edge); color:#191a21; transition:background-color .15s}
.theme-switch::before{content:""; position:absolute; inset:-8px -4px}
.theme-switch:hover{background:rgba(255,255,255,.24)}
.theme-switch:focus-visible{outline:2px solid var(--hero-ink); outline-offset:2px}
.theme-switch i{position:absolute; top:3px; left:3px; width:18px; height:18px; border-radius:50%; background:var(--hero-ink);
  display:flex; align-items:center; justify-content:center}
/* --sw — наскільки кружок від'їжджає праворуч: ширина доріжки мінус кружок і поля */
.theme-switch[aria-checked="true"] i{transform:translateX(var(--sw,20px))}
.theme-switch svg{width:12px; height:12px; stroke-width:2.4}
.theme-switch.flip i{animation:tsw-on .2s ease-out}
.theme-switch.flip[aria-checked="false"] i{animation-name:tsw-off}
@keyframes tsw-on{from{transform:translateX(0)}}
@keyframes tsw-off{from{transform:translateX(var(--sw,20px))}}
/* Вузький телефон (до 442 px): перемикач вужчий, щоб лишити місце назві (на Головній — вітанню й значкам). */
@media (max-width:442px){
  .theme-switch{--sw:16px; width:38px; height:22px}
  .theme-switch i{width:16px; height:16px}
  .theme-switch svg{width:11px; height:11px}
}
/* На комп'ютері перед перемикачем бувають кнопки сторінки (попередня / наступна розмова чи місяць): він стоїть трохи окремо
   від них, щоб не читався як ще одна з них. */
@media (min-width:960px){ .head-under + .theme-switch{margin-left:10px} }
/* Назва поруч із перемикачем мусила б здрібніти — перемикача на цій сторінці немає (js/app.js, fitTitle). Коли праворуч
   у шапці, крім нього, нічого й не було, зникає і сам правий край: інакше проміжок до нього забирав би в назви місце. */
.page-head.no-switch .theme-switch,
.page-head.no-switch .head-right:not(:has(> :not(.theme-switch))){display:none}

/* ---------- сторінки з «назад» ----------
   Комп'ютер: рядком над назвою — «назад» із підписом і кнопки праворуч, назва під ними на всю ширину.
   Телефон (нижче): «назад» — квадратна кнопка зі стрілкою в одному рядку з назвою, кнопки праворуч переходять під назву.
   Значків розділів на таких сторінках немає: звідси ведуть «назад» і куля. */
.home-orb,.head-side{display:none}
.page-head.has-back{flex-wrap:wrap; align-items:center; row-gap:14px}
.page-head.has-back .grow{order:2; flex:0 0 100%}
.page-head.has-back .head-right{margin-left:auto}
.has-back .head-right .icon-btn,.head-side .icon-btn{width:38px; height:38px}
.has-back .head-right .icon-btn svg,.head-side .icon-btn svg{width:20px; height:20px}

/* ---------- значки розділів у шапці (телефон) ----------
   Значки без підписів і без кружків (вигляд — css/home.css) праворуч від вітання; назва розділу — у підказці й для читачів екрана.
   Числа біля значка немає, знак «!» — збій.
   На комп'ютері їх немає: ті самі значки стоять у верхній панелі (унизу файлу). */
.head-nav{display:none}
/* кнопки сторінки без «назад» (попередній / наступний місяць): на комп'ютері — праворуч від назви, на телефоні — під нею */
.head-under{display:contents}
.head-under .icon-btn{width:38px; height:38px}
.head-under .icon-btn svg{width:20px; height:20px}
/* «назад» зі стрілкою вгору (сторінка розмови) стоїть трохи окремо від пари «попередня / наступна» */
.up-btn{margin-right:4px}

@media (max-width:959px){
  /* flow-root: верхній відступ кулі не «провалюється» крізь .wrap назовні */
  .wrap{display:flow-root}

  /* Куля «Головна»: лівий верхній кут. Стоїть на рівні назви сторінки, а під час гортання лишається в куті.
     Місця в потоці не займає: верхній відступ опускає її до назви, від'ємний нижній повертає решту на місце.
     Липке поле пошуку (Головна) й ряд фільтрів (Історія), доїхавши до верху, стають праворуч від неї (css/components.css). */
  .home-orb{display:block; position:sticky; z-index:12; top:calc(3px + env(safe-area-inset-top)); width:46px; height:46px; border-radius:50%;
    margin:calc(14px + env(safe-area-inset-top)) 0 calc(-60px - env(safe-area-inset-top))}
  .home-orb .ob{--s:46px; transition:transform .15s}
  .home-orb:active .ob{transform:scale(.94)}
  .home-orb .alert-mark{position:absolute; top:-3px; right:-5px; width:16px; height:16px; font-size:10.5px}

  /* Назва сторінки — праворуч від кулі, в один рядок заввишки з кулю. Не вміщається (поруч зі значками на Головній чи сама) —
     js/app.js (fitTitle) спершу прибирає перемикач теми (не на Головній), а коли й без нього тісно — зменшує назву:
     fit-m, а зовсім довгу — fit-s у два дрібні рядки. */
  .hero .page-head{padding-left:54px; align-items:center; flex-wrap:nowrap; gap:8px}
  .page-head .grow{min-width:0}
  .page-head h1{line-height:38px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .page-head h1.fit-m{font-size:23px; line-height:30px}
  .page-head h1.fit-s{font-size:18px; line-height:21px; white-space:normal; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical}

  /* значки розділів */
  .head-nav{display:flex; align-items:center; gap:4px}
  .head-under{display:none}
  .hero .head-right{flex:none; gap:4px !important}
  .head-nav .icon-btn,.head-nav + .icon-btn{position:relative; width:36px; height:36px}
  .head-nav .icon-btn svg,.head-nav + .icon-btn svg{width:19px; height:19px}
  .head-nav .icon-btn[aria-current="page"],.head-nav .icon-btn[aria-current="page"]:hover{background:var(--hero-ink); color:#191a21; box-shadow:none}
  .head-nav .alert-mark{position:absolute; top:-2px; right:-3px; width:16px; height:16px; font-size:10.5px}

  /* «назад» — квадратна кнопка зі стрілкою між кулею й назвою; кнопки праворуч (попередня, наступна) — під назвою справа,
     у рядку з назвою лишається тільки перемикач теми */
  .page-head.has-back{row-gap:0}
  .page-head.has-back .grow{order:0; flex:1 1 auto}
  .page-head.has-back .back{flex:none; width:34px; height:34px; min-height:0; padding:0; justify-content:center}
  .page-head.has-back .back span,.page-head.has-back .head-right > :not(.theme-switch){display:none}
  .head-side{display:flex; gap:6px; float:right; margin:8px 0 0 10px}
  .head-side + *{margin-top:8px}
  /* Кнопки (38 px) вищі за рядок під назвою, тож шапка мусить їх уміщати: інакше вони звисають нижче її краю, і картка,
     що наїжджає на шапку (.lift), підходить до них впритул (12 листопада: між ‹ › і підсумком місяця був 1 px). */
  .hero{display:flow-root}
}

/* ---------- верхня панель на комп'ютері (12 листопада; до того було бічне меню) ----------
   Ідея — з Woodify: розділи й меню угорі, однією смугою над сторінкою, а не стовпчиком збоку. Вигляд — як верх сторінки
   на телефоні: кольорова смуга шапки, на ній куля «Головна» (та сама, 46 px), поруч перемикач розділів «Історія · Профіль ·
   Ролі · Щоденник» скляними частками (вибране — біле, як вибраний значок на телефоні), праворуч Налаштування й Довідка значками
   без кружків і перемикач теми. На світлому тлі сторінки біла куля світлої теми губилася, тож верх кольоровий.
   Панель завширшки з колонку сторінки (.wrap: 760 px разом із полями 36 px), тож її краї — ті самі, що в карток під нею.
   Колір під панеллю — колір шапки сторінки: на комп'ютері він, як на телефоні, тягнеться на всю ширину вікна від самого
   верху й згасає під шапкою (.hero::before нижче), а панель поки прозора. Сторінку прогорнули — шапка поїхала вгору,
   і панель дістає свій колір того самого малюнка (.scrolled ставить js/app.js). Усе липке на сторінках (поле пошуку,
   ряд фільтрів Історії) стає під нею: --stick-top = її висота. Значків розділів і перемикача теми в шапці сторінки на
   комп'ютері немає: вони тут. */
.topbar{display:none}
@media (min-width:960px){
  :root{--bar-h:64px; --stick-top:var(--bar-h)}
  .topbar{display:block; position:sticky; top:0; z-index:20; height:var(--bar-h); color:var(--hero-ink);
    background-size:100% 460px; background-repeat:no-repeat; transition:box-shadow .2s}
  .topbar.scrolled{background-image:var(--hero); box-shadow:0 10px 24px -18px rgba(0,0,0,.55)}
  .topbar-in{max-width:760px; height:100%; margin:0 auto; padding:0 36px; display:flex; align-items:center; gap:16px}
  .orb-slot{flex:none; display:flex; width:46px; height:46px}
  .topbar .home-orb{display:block; position:relative; width:46px; height:46px; border-radius:50%}
  .topbar .home-orb .ob{--s:46px; transition:transform .15s}
  .topbar .home-orb:active .ob{transform:scale(.94)}
  .topbar .home-orb .alert-mark{position:absolute; top:-3px; right:-5px; width:16px; height:16px; font-size:10.5px}
  .top-nav{flex:1; min-width:0; display:flex; align-items:center; gap:12px}
  .topbar :focus-visible{outline-color:var(--hero-ink)}
  /* Перемикач розділів — скляний, як кнопки під вітанням на телефоні; кожна частка завширшки зі своє слово (з 13 листопада
     розділів чотири, і рівні частки на вузькому комп'ютері, 960 px, уже не лишали запасу). Вибране
     переїжджає, як у будь-якому перемикачі (js/app.js, glideSwitch): плашка тут біла, а не кольору акценту. */
  .switch.top-track{display:inline-grid; grid-auto-columns:auto; margin:0; gap:2px; padding:3px; border-radius:var(--r-md); background:rgba(255,255,255,.08); box-shadow:none}
  .switch.top-track a{min-height:38px; padding:0 14px; white-space:nowrap; color:var(--hero-soft)}
  .switch.top-track a:hover{color:var(--hero-ink); background:rgba(255,255,255,.08)}
  .switch.top-track:not(.gliding) .on,.switch.top-track:not(.gliding) .on:hover{background:var(--hero-ink); color:#191a21}
  .switch.top-track .sw-pill{background:var(--hero-ink)}
  .switch.top-track > .sw-was{color:#191a21}
  .switch.top-track > .sw-will.on{color:var(--hero-soft)}
  .switch.top-track svg{flex:none; width:18px; height:18px}
  .switch.top-track .tally{background:rgba(255,255,255,.2); color:var(--hero-ink)}
  .switch.top-track .on .tally{background:rgba(25,26,33,.12); color:#191a21}
  .switch.top-track .alert-mark{width:16px; height:16px; font-size:10.5px}
  /* праворуч: значки без кружків, як біля вітання на телефоні; сторінка, на якій ви зараз, — білий квадрат */
  .top-end{margin-left:auto; display:flex; align-items:center; gap:6px}
  .top-end .icon-btn{position:relative; width:40px; height:40px; background:none; box-shadow:none; color:var(--hero-soft)}
  .top-end .icon-btn svg{width:21px; height:21px}
  .top-end .icon-btn:hover{background:rgba(255,255,255,.12); color:var(--hero-ink)}
  .top-end .icon-btn[aria-current="page"],.top-end .icon-btn[aria-current="page"]:hover{background:var(--hero-ink); color:#191a21}
  .top-end .alert-mark{position:absolute; top:-3px; right:-4px; width:16px; height:16px; font-size:10.5px}
  .top-end .theme-switch{margin-left:6px}
  /* у шапці сторінки перемикача теми на комп'ютері немає: він у панелі */
  .hero .theme-switch{display:none}

  /* Шапка сторінки — не окрема кольорова картка, а смуга, як на телефоні: колір іде на всю ширину вікна від самого верху
     (під прозорою поки панеллю) й згасає за 100 px під вмістом шапки. Назва стоїть на лінії карток і кулі. */
  .hero{border-radius:0; padding:10px 0 30px}
  /* .wrap > — інакше перебиває inset:0 з css/look.css, що підключений пізніше */
  .wrap > .hero::before{left:calc(50% - 50vw); right:calc(50% - 50vw); top:calc(-6px - var(--bar-h)); bottom:-80px; border-radius:0;
    -webkit-mask:linear-gradient(to bottom,#000 calc(100% - 100px),rgba(0,0,0,.5) calc(100% - 50px),transparent);
            mask:linear-gradient(to bottom,#000 calc(100% - 100px),rgba(0,0,0,.5) calc(100% - 50px),transparent)}
  /* усе, що йде після шапки, лягає поверх її згасаючого кольору */
  .hero ~ *{position:relative; z-index:1}
}