/* Головна: шапка з привітанням, роллю й кнопкою «Щоденник», пошук, що наїжджає на шапку, стрічка й режим щоденника.
   Розділи застосунку — у верхній панелі (css/nav.css); плиток розділів тут немає (10 листопада). */

/* Верх Головної (11 листопада, вибрано з кількох варіантів): у шапці немає жодної обведеної плитки.
   Значки розділів праворуч від вітання (Налаштування, Довідка) — без кружків, за ними перемикач теми.
   Під вітанням один ряд, що повторює стрічку помаху (js/app.js): ліворуч «Історія» — її сторінка стоїть ліворуч від Головної,
   праворуч «Щоденник» — його сторінка праворуч, посередині «Ролі». З 12 листопада всі три — кнопки зі словом, як досі був
   лише «Щоденник» (до того «Історія» була квадратом зі значком, а «Ролі» — полем із тихим підписом і назвами ролей).
   Кнопки скляні — ледь світліші за шапку. */
.hero.home .head-right{gap:8px !important}
.hero.home .head-nav{gap:6px}
/* 12 листопада: значки більші (22 px замість 19) і стоять рідше; стоять по центру ряду, поруч із вітанням.
   На вузькому телефоні на це немає місця — там вони щільніші (унизу файлу). */
.hero.home .head-right .icon-btn{width:38px; height:38px; background:none; box-shadow:none; color:var(--hero-soft)}
.hero.home .head-right .icon-btn svg{width:22px; height:22px}
.hero.home .head-right .icon-btn:hover{background:rgba(255,255,255,.12); color:var(--hero-ink)}
/* перемикач теми — той самий, що на всіх сторінках (css/nav.css, .theme-switch) */

/* Ряд кнопок. На телефоні «Щоденник» займає пів ряду, а «Історія» й «Ролі» порівну ділять другу половину; значок там є
   лише в «Щоденника» (перо). Вужчою за своє слово кнопка не стає: якщо слову тісно, кнопка бере, скільки треба, а сусідні
   діляться рештою, — тож нічого не обрізається. Від 600 px значок стоїть біля кожного слова, кнопки завширшки зі свій
   вміст (у «Щоденника» ширші поля), і ряд не тягнеться на всю шапку. */
.top-pair{display:flex; gap:5px; margin-top:12px}
.top-tile{position:relative; flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:7px; height:46px; padding:0 12px;
  border-radius:var(--r-md); color:var(--hero-ink); text-decoration:none; cursor:pointer; transition:background-color .15s, color .15s}
.top-tile:focus-visible{outline:2px solid var(--hero-ink); outline-offset:2px}
.top-tile svg{flex:none; width:20px; height:20px}
.top-tile b{white-space:nowrap; font-size:15px; line-height:1.3; font-weight:var(--w-strong)}
@media (max-width:599px){ .top-tile svg{display:none} }
@media (max-width:374px){ .top-pair{gap:4px} .top-tile{padding:0 8px} }
@media (min-width:600px){ .top-pair{gap:8px} .top-tile{flex:none; padding:0 14px} }
/* На комп'ютері ряду кнопок під вітанням немає: Історія, Ролі й Щоденник стоять у верхній панелі (css/nav.css), над
   кожною сторінкою (12 листопада; до того Історія й Ролі були в бічному меню, а «Щоденник» лишався тут). */
@media (min-width:960px){ .top-pair{display:none} }

/* «Історія» й «Ролі» — скляні, на однаковому слабкому тлі. «Щоденник» помітно головніший: це єдиний розділ, де ви пишете
   самі (12 листопада: «цей розділ має унікальне значення, на відміну від Ролі та Історія»). Виділяє його розмір, а не колір:
   він теж скляний, лише трохи світліший, зате на телефоні займає пів ряду й має перо біля слова. Вибрано 12 листопада з трьох
   варіантів; кнопку, залиту кольором гами, і білу кнопку відкинуто. */
.top-tile{background:rgba(255,255,255,.07)}
.top-tile:hover{background:rgba(255,255,255,.14)}
.diary-tile{background:rgba(255,255,255,.18)}
.diary-tile:hover{background:rgba(255,255,255,.27)}
/* пів ряду задано прямо, а не flex-grow:2: відступи кнопок додаються до частки зверху, і вийшло б лише в 1,7 раза ширше */
@media (max-width:599px){
  .diary-tile{flex:0 0 50%}
  .top-pair .diary-tile svg{display:block}
}
@media (min-width:600px){ .diary-tile{padding:0 28px} }
/* число — усередині кнопки одразу після слова, такою ж плашкою, як на вкладках «Розмови / Профіль» */
.diary-tile .tally{flex:none; min-width:20px; padding:0 6px; border-radius:var(--r-xs); background:rgba(255,255,255,.2); color:var(--hero-ink);
  font-size:12px; font-weight:var(--w-strong); line-height:20px; text-align:center; font-variant-numeric:tabular-nums}

/* рідкісне повідомлення вузьким рядком під кнопками */
.hero-note{display:flex; align-items:center; gap:8px; margin-top:8px; padding:9px 12px; border-radius:var(--r-md); font-size:13px; text-decoration:none;
  color:var(--hero-ink); background:var(--hero-glass); box-shadow:inset 0 0 0 1px var(--hero-edge)}
.hero-note svg{width:18px; height:18px; flex:none}
.hero-note.warn{color:var(--hero-warn)}

/* перемикач «Розмови / Профіль» над стрічкою: той самий, що й на інших сторінках, тільки нижчий.
   На телефоні він на всю ширину, дві рівні частки; на ширшому екрані — завширшки з написи. Праворуч (на телефоні —
   рядком нижче) буває кнопка «Прочитано» для нового в профілі. Число на вкладці «Профіль» — .tally */
.feed-head{align-items:center; flex-wrap:wrap; margin:4px 0 2px}
.feed-head > .btn{margin-left:auto}
.switch.sm{flex:1 1 auto; margin:0; padding:3px}
.switch.sm button{min-height:36px; padding:0 6px}
.switch.sm [aria-pressed="true"] .tally{background:color-mix(in srgb,var(--on-accent) 20%,transparent); color:var(--on-accent)}
@media (min-width:600px){
  .switch.sm{flex:none; display:inline-grid}
  .switch.sm button{padding:0 18px}
}

/* Стрічка «Розмови»: періоди за часом, кожен — своя картка, тож межі місяців і років видно одразу.
   Картка місяця: угорі назва й підсумок (посилання на сторінку місяця), у куті кнопка «N розмов», що розгортає брифи;
   розгорнуті брифи стоять під тонкою лінією. Картка року — ледь підфарбована кольором акценту, назва більша. */
.feed{display:flex; flex-direction:column; gap:12px}
.brief-list{background:var(--card); border-radius:var(--r-card); padding:4px 18px; box-shadow:var(--shadow)}
.period-head{position:relative}
.period.open > .period-head{border-bottom:1px solid var(--line-soft)}
.ph-link{display:flex; flex-direction:column; gap:3px; padding:14px 0; color:var(--ink); text-decoration:none}
.ph-link b{padding-right:116px; font:500 19px/1.3 var(--display); letter-spacing:-.005em; transition:color .15s}
.ph-link:hover b{color:var(--accent-ink)}
.ph-toggle{position:absolute; top:11px; right:-8px; display:inline-flex; align-items:center; gap:3px; height:32px; padding:0 7px 0 12px;
  border:0; border-radius:var(--r-sm); background:var(--fill); color:var(--ink-soft); font:inherit; font-size:13px; font-weight:var(--w-mid);
  white-space:nowrap; cursor:pointer; transition:background-color .15s, color .15s}
.ph-toggle:hover{color:var(--ink)}
.ph-toggle svg{width:16px; height:16px; transform:rotate(90deg); transition:transform .15s}
.ph-toggle[aria-expanded="true"]{background:var(--accent-soft); color:var(--accent-ink)}
.ph-toggle[aria-expanded="true"] svg{transform:rotate(-90deg)}
.year-card{display:flex; flex-direction:column; gap:3px; padding:16px 18px; border-radius:var(--r-card); color:var(--ink); text-decoration:none;
  background:linear-gradient(var(--accent-soft),var(--accent-soft)), var(--card); box-shadow:var(--shadow)}
.year-card b{font:500 22px/1.25 var(--display); letter-spacing:-.005em; transition:color .15s}
.year-card:hover b{color:var(--accent-ink)}
.year-card > .sub{color:var(--accent-ink)}
/* рядок розмови */
.brief-row{display:flex; flex-direction:column; gap:3px; padding:14px 0; border-bottom:1px solid var(--line-soft); color:var(--ink); text-decoration:none}
.brief-row:last-child{border-bottom:0}
.brief-row b{font-weight:var(--w-strong); transition:color .15s}
/* рядок називає перша головна тема розмови: вона буває довгою, тож у стрічці — щонайбільше два рядки */
.brief-row .card-top > b{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.brief-row .card-top > .sub{flex:none; white-space:nowrap}
.brief-row:hover b{color:var(--accent-ink)}
.brief-head{font-size:14px; color:var(--ink-soft); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.more-row{display:flex; justify-content:center; padding:4px 0}

/* Телефон: верх шапки Головної такий самий заввишки, як у розділах (48 px), щоб ряд меню стояв на тій самій висоті.
   Дата — дрібним рядком над вітанням, вітання менше й в один рядок.
   Налаштування, Довідка й перемикач теми стоять на тій самій висоті, що перемикач у шапках розділів: їхня середина —
   на рівні назви розділу й кулі (12 листопада; до того ряд був на 2 px вище, і перемикач підстрибував при переході).
   Над назвою розділу відступ 6 px, тут 2 px — відступ над рядом повертає різницю, і він стає, як там. */
@media (max-width:959px){
  .hero.home .page-head{padding-top:2px}
  .hero.home .head-right{margin-top:4px}
  .hero.home .hero-date{margin:0; font-size:12.5px; line-height:16px}
  .hero.home h1{font-size:27px; line-height:30px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
}
/* Комп'ютер: у шапках розділів перемикач теми стоїть унизу смуги заввишки 48 px (з них 6 px — відступ над назвою), урівень
   із низом назви. На Головній над вітанням ще рядок дати, тож низ вітання нижчий, і притиснутий до нього перемикач стояв
   на 13 px нижче, ніж деінде (до 12 листопада). Тепер він угорі шапки, у такій самій смузі (48 − 6 = 42 px) — на тому самому
   місці, що в розділах. */
@media (min-width:960px){
  .hero.home .head-right{align-self:flex-start; height:42px; align-items:flex-end}
}
/* Вузький телефон (до 442 px): значки й перемикач стоять по центру ряду, поруч із вітанням, тож більшим і рідшим тут немає
   місця — інакше вітання дрібнішає («Доброго ранку» повного розміру поруч із великими значками вміщається лише від 443 px).
   Тому тут вони щільні: значки 20 px упритул, перемикач вужчий (css/nav.css) — разом 98 px, стільки ж, скільки займали
   до 12 листопада. */
@media (max-width:442px){
  .hero.home .page-head{gap:4px}
  .hero.home .head-right,.hero.home .head-nav{gap:2px !important}
  .hero.home .head-right .icon-btn{width:28px; height:36px}
  .hero.home .head-right .icon-btn svg{width:20px; height:20px}
}