/* Складники сторінок: картки, мітки, кнопки, Історія, цитати, форми, вікна.
   Матеріал один — біла картка з м'якою тінню на світло-сірому. Вибране й головна дія — колір акценту. */

/* картки */
.card{background:var(--card); border-radius:var(--r-card); padding:16px 18px; box-shadow:var(--shadow)}
/* Головна картка сторінки (бриф, підсумок місяця й року, пункт профілю, знайдена людина чи тема): коротка риска на лівому
   краю навпроти мітки («Підсумок місяця», «Бриф»), решта краю чиста. Вибрано 12 листопада з п'яти варіантів (лінія вздовж
   прямого краю, риска, тонка рамка, відтінок, смуга як було). До того була смуга 3 px на всю висоту: на заокруглених
   кутах вона вигиналася серпиком. Риска стоїть на прямому відрізку краю, тож кута не торкається. */
.card.accent{position:relative; background:var(--card)}
.card.accent::before{content:""; position:absolute; left:0; top:17px; width:3px; height:18px;
  border-radius:0 3px 3px 0; background:var(--accent); pointer-events:none}
.card.muted{background:var(--fill); box-shadow:none}
.card.warn{background:var(--warn-soft); box-shadow:none}
.card > * + *{margin-top:10px}
.card-top{display:flex; justify-content:space-between; align-items:baseline; gap:8px}
.card-top .sub{text-align:right}
.label{font-size:11.5px; font-weight:var(--w-strong); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-ink)}
/* Заголовок другорядної картки («Теми», «Ваші слова», «Побіжне»; <h3 class="label plain">) — така сама мітка, як «Бриф»,
   лише сіра: колір акценту лишається за головною карткою й посиланнями. До 12 листопада тут стояв звичайний жирний h3,
   і головна тема під ним виглядала ще одним заголовком. */
.label.plain{color:var(--ink-soft)}
/* заввишки з рядок «Бриф · хто написав» (.card-top), щоб мітка стояла на тій самій висоті, що й «Бриф» у картці вище */
.card > h3.label{line-height:20px}
.label.warn{color:var(--warn)}
a.card{display:block; text-decoration:none; color:inherit; transition:box-shadow .2s, transform .2s}
a.card:hover{box-shadow:var(--shadow-hover); transform:translateY(-1px)}

/* мітки */
.chips{display:flex; flex-wrap:wrap; gap:6px}
.chip{display:inline-flex; align-items:center; gap:5px; font-size:12.5px; font-weight:var(--w-mid); line-height:1.3;
  padding:4px 10px; border-radius:var(--r-xs); background:var(--fill); color:var(--ink-soft); white-space:nowrap}
.chip svg{width:13px; height:13px}
.chip.accent{background:var(--accent-soft); color:var(--accent-ink)}
.chip.good{background:var(--good-soft); color:var(--good)}
.chip.warn{background:var(--warn-soft); color:var(--warn)}
.chip.bad{background:var(--bad-soft); color:var(--bad)}
.chip.line{background:transparent; box-shadow:inset 0 0 0 1px var(--btn-line); color:var(--ink-faint)}
button.chip{transition:background-color .15s}
button.chip:hover{background:var(--accent-paper)}
a.chip{text-decoration:none}

/* резюме брифу чи підсумку: вільний текст абзацами */
.resume{display:flex; flex-direction:column; gap:10px; font-size:16px; line-height:1.55}
.resume p{margin:0}

/* теми розмови: рядок на кожну тему. Праворуч — репліка, з якої тема починається; під рядком — наскрізна тема й люди.
   Теми — зміст брифу, а не заголовки (12 листопада): вони тонкі, як текст брифу, і трохи дрібніші за нього, тож бриф над
   ними важить більше. Головна тема відрізняється від побіжної лише кольором, побіжна ще й з міткою. Репліка праворуч —
   тиха сіра довідка з підкресленням, як наскрізна тема під рядком; колір акценту — лише під курсором. */
.topics{list-style:none; margin:0; padding:0}
/* як і з цитатами: margin:0 вище перебивав відступ картки (.card > * + *), і перша тема стояла впритул до заголовка */
.card > * + .topics{margin-top:10px}
.topic{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 14px; align-items:baseline; padding:10px 0; border-top:1px solid var(--line-soft)}
.topic:first-child{border-top:0; padding-top:0}
.topic:last-child{padding-bottom:0}
.topic .tt{font-size:15px; font-weight:var(--w-text)}
.topic.side .tt{color:var(--ink-soft)}
.topic .tt .chip{margin-left:4px; font-size:11.5px; padding:2px 8px; vertical-align:1px}
.topic .at{font-size:13px; font-weight:var(--w-text); color:var(--ink-faint); white-space:nowrap;
  text-decoration:underline; text-decoration-color:var(--btn-line); text-underline-offset:3px}
.topic .at:hover{color:var(--accent-ink)}
.topic .tm{grid-column:1 / -1; font-size:13px; color:var(--ink-faint)}
.topic .tm a{color:inherit; text-decoration:underline; text-decoration-color:var(--btn-line); text-underline-offset:3px}
.topic .tm a:hover{color:var(--accent-ink)}

/* посилання на джерело біля твердження підсумку («№16») */
a.src{font-size:13px; font-weight:var(--w-mid); text-decoration:none; white-space:nowrap}
a.src:hover{text-decoration:underline}
a.plain{color:inherit; text-decoration:none}
a.plain:hover{color:var(--accent-ink)}

/* Профіль: одна картка. Угорі — кнопки й перемикач «Списком / Текстом», під ними список чи текст. Один факт — один рядок.
   Подробиці розгортаються на місці й розсувають сусідів. Мітка «нове» / «змінено» — зміна з минулого заходу.
   Зелена галочка — пункт, який ви перевірили самі; стрілка повертається, коли рядок розгорнуто. */
.card.facts{padding-top:12px; padding-bottom:6px}
.card.facts > *{margin-top:0}
.fact-tools{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 12px; padding-bottom:10px}
.fact-tool-acts{display:flex; flex-wrap:wrap; gap:8px}
.fact-tools .switch.fact-view{flex:none; margin:0}
.fact-tools .switch.fact-view button{padding:0 12px}
/* «Виправити» / «прибрати» під розгорнутим пунктом — квадратні кнопки, як у Щоденнику (.d-act).
   «Підтвердити» — кнопка зі словом: три кнопки зі словами в рядок на телефоні не вміщаються. */
.fact-acts{gap:6px; margin-top:2px}
.fact-acts .d-act{width:38px; height:38px}
/* «Списком»: пункти й заголовки розділів — рядки одного списку; праворуч у кожному ручка (⋮⋮), за яку тягнуть.
   Рядок, який тягнуть, піднімається над сусідами; сусіди з'їжджають плавно (як картки ролей). */
.fact-list{position:relative; border-top:1px solid var(--line-soft)}
.fact-row, .sec-row{position:relative; display:flex; align-items:flex-start; gap:2px; background:var(--card);
  border-top:1px solid var(--line-soft); transition:transform .18s ease}
.fact-list > :first-child{border-top:0}
.fact-row > details.fact, .fact-row > .fact-edit, .sec-row > .sec-edit{flex:1; min-width:0}
.fact-row > .grip, .sec-row > .grip{width:34px; height:40px; margin-top:0; border-radius:var(--r-sm)}
.sec-row > .grip{height:44px}
.fact-list.sorting{user-select:none; -webkit-user-select:none}
.fact-list.sorting .grip{cursor:grabbing}
.fact-row.dragging, .sec-row.dragging{z-index:2; transition:none; border-radius:var(--r-sm);
  box-shadow:var(--shadow-hover), 0 0 0 2px var(--accent)}
/* Заголовок розділу: дотик до назви згортає й розгортає; у згорнутого поруч із назвою — скільки в ньому пунктів. */
.sec-row{align-items:center; margin-top:6px}
.fact-list > .sec-row:first-child{margin-top:0}
.sec-toggle{flex:1; min-width:0; display:flex; align-items:center; gap:8px; min-height:44px; padding:0; border:0; background:none;
  color:var(--accent-ink); font:inherit; font-size:15px; font-weight:var(--w-strong); text-align:left; cursor:pointer}
.sec-toggle .chev{flex:none; width:18px; height:18px; color:var(--ink-faint); transform:rotate(90deg); transition:transform .18s}
.sec-row.shut .sec-toggle .chev{transform:none}
.sec-name{min-width:0; overflow-wrap:anywhere}
.sec-count{flex:none; min-width:22px; padding:1px 7px; border-radius:var(--r-xs); background:var(--fill); color:var(--ink-soft);
  font-size:12px; font-weight:var(--w-mid); text-align:center}
.sec-row > .d-act{flex:none; width:34px; height:34px}
/* Правка на місці, як у Щоденнику (.d-edit): рядок пункту чи назва розділу стає полем, під ним «Скасувати» й «Зберегти». */
.fact-edit, .sec-edit{display:flex; flex-direction:column; gap:8px; padding:10px 0 12px}
.fact-edit textarea.f{min-height:52px; resize:none; overflow:hidden; font-size:16px; line-height:1.5}
.fact-edit .btn-row, .sec-edit .btn-row{justify-content:flex-end; flex-wrap:wrap}
/* «Текстом»: увесь профіль одним записом. Рядки — пункти, заголовки — розділи: вони крупніші й кольору акценту. */
.fact-text{min-height:140px; padding:12px 2px 14px; border-top:1px solid var(--line-soft); outline:none;
  font-size:15.5px; line-height:1.6; overflow-wrap:anywhere; cursor:text}
.fact-text p, .fact-text div{margin:0 0 6px}
.fact-text h1, .fact-text h2, .fact-text h3, .fact-text h4, .fact-text h5, .fact-text h6{margin:18px 0 6px; color:var(--accent-ink);
  font-size:17px; font-weight:var(--w-strong); line-height:1.35}
.fact-text > :first-child{margin-top:0}
.fact-text:focus-visible{box-shadow:none}
details.fact > summary{display:flex; gap:10px; align-items:center; min-height:40px; padding:7px 0}
details.fact .ft{flex:1; min-width:0; transition:color .15s}
details.fact > summary .chip{flex:none; font-size:11.5px; padding:2px 8px}
details.fact > summary:hover .ft{color:var(--accent-ink)}
details.fact[open] > summary .ft{font-weight:var(--w-strong)}
details.fact .fm{display:inline-flex; color:var(--good)}
details.fact .fm svg{width:16px; height:16px}
details.fact .chev{width:18px; height:18px; color:var(--ink-faint); transition:transform .18s}
details.fact[open] > summary .chev{transform:rotate(90deg)}
.fact-body{display:flex; flex-direction:column; gap:8px; padding:0 0 14px}

/* кнопки: звичайна — біла, головна — колір акценту */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:7px; min-height:46px; padding:0 20px;
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--card); color:var(--ink);
  font-weight:var(--w-strong); font-size:14.5px; text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background-color .15s, box-shadow .15s, transform .12s, filter .15s}
.btn:hover{background:var(--fill)}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent); border-color:transparent; color:var(--on-accent); box-shadow:var(--pill-shadow)}
.btn.primary:hover{filter:brightness(1.1)}
/* на кольоровій шапці головна кнопка біла, інакше зливається з тлом */
.hero .btn.primary{background:#fff; color:#3a2fb5; box-shadow:0 8px 18px -10px rgba(0,0,0,.35)}
.btn.danger{color:var(--bad)}
.btn.primary.danger-solid{background:#c2402f; color:#fff; box-shadow:0 8px 18px -10px rgba(160,40,30,.6)}
/* Мала кнопка: значок трохи менший і ближче до краю, тож три кнопки з обведенням уміщаються в рядок на телефоні.
   Дії з даними в рядках і картках (Додати / Відхилити, Завершити, Виправити, Повернути) — саме такі кнопки з обведенням
   (12 листопада): прозорі читалися як підписи. Посиланням лишається лише те, що продовжує текст («читати далі»). */
.btn.sm{min-height:38px; padding:0 13px; gap:5px; font-size:13.5px; border-radius:var(--r-sm)}
.btn.sm svg{width:16px; height:16px}
.btn.sm > svg:first-child{margin-left:-2px}
.btn.danger:not(.primary):hover{background:var(--bad-soft)}
.btn:disabled{opacity:.5; cursor:default; transform:none}
.btn svg{width:18px; height:18px}
.btn-row{display:flex; flex-wrap:wrap; gap:8px}
.icon-btn{width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; flex:none;
  border:0; border-radius:var(--r-sm); background:var(--card); color:var(--ink-soft); cursor:pointer; padding:0; text-decoration:none;
  box-shadow:var(--shadow); transition:background-color .15s, color .15s}
.icon-btn:hover{color:var(--ink)}
.icon-btn:disabled{color:var(--ink-off); cursor:default}
.icon-btn svg{width:22px; height:22px}
.icon-btn.sm{width:38px; height:38px}
.icon-btn.sm svg{width:20px; height:20px}
.link{display:inline-flex; align-items:center; gap:4px; min-height:32px; font-weight:var(--w-strong); font-size:14px;
  text-decoration:none; color:var(--accent-ink); background:none; border:0; padding:0; cursor:pointer}
.link:hover{text-decoration:underline}

/* перемикачі: біла доріжка, вибране — колір акценту. Рамку невибраним часткам пробували 12 листопада й прибрали: з нею гірше.
   Вибране переїжджає (js/app.js, glideSwitch): на час переїзду під частками лежить плашка .sw-pill, а сама вибрана частка
   стоїть без заливки (.gliding). Написи тим часом перетікають: .sw-was — початок для щойно покинутої частки (світлий
   напис), .sw-will — для нової (ще темний); .sw-snap ставить цей початок миттєво, без переходів. .glided — один кадр після
   переїзду без переходу заливки, щоб плашка й заливка частки змінили одна одну непомітно. */
.switch{position:relative; isolation:isolate; display:grid; grid-auto-columns:minmax(0,1fr); grid-auto-flow:column; gap:4px; padding:4px;
  background:var(--card); border-radius:var(--r-md); margin-bottom:14px; box-shadow:var(--shadow)}
.card .switch{background:var(--fill); box-shadow:none}
.switch a,.switch button{position:relative; display:flex; align-items:center; justify-content:center; gap:6px; min-height:40px;
  border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink-soft); text-decoration:none;
  font-size:14px; font-weight:var(--w-mid); cursor:pointer; padding:0 6px; text-align:center; line-height:1.2;
  transition:background-color .2s, color .2s}
.switch a:hover,.switch button:hover{color:var(--ink)}
.switch .on,.switch [aria-pressed="true"]{background:var(--accent); color:var(--on-accent); font-weight:var(--w-strong)}
/* під курсором вибрана частка лишається світлою: правило вище (:hover) інакше робило б її напис темним на акценті */
.switch .on:hover,.switch [aria-pressed="true"]:hover{color:var(--on-accent)}
.sw-pill{position:absolute; z-index:-1; background:var(--accent); transform-origin:0 50%; pointer-events:none; will-change:transform}
.switch.gliding .on,.switch.gliding [aria-pressed="true"]{background:transparent}
.switch.gliding > *,.switch.glided > *{transition:color .28s}
.switch.sw-snap > *{transition:none}
.switch > .sw-was{color:var(--on-accent)}
.switch > .sw-will.on,.switch > .sw-will[aria-pressed="true"]{color:var(--ink-soft)}
/* тихе число біля назви вкладки — не знак збою */
.switch .tally{min-width:20px; padding:0 6px; border-radius:var(--r-xs); background:var(--accent-soft); color:var(--accent-ink);
  font-size:12px; line-height:20px; text-align:center; font-variant-numeric:tabular-nums}
.switch .on .tally{background:color-mix(in srgb,var(--on-accent) 20%,transparent); color:var(--on-accent)}
/* на вибраній вкладці знак збою лежить на кольорі акценту — даємо йому суцільне тло картки */
.switch .on .alert-mark{background:var(--card)}
/* перемикач-фільтр: усі варіанти в один рядок. Частка завширшки як її слово, вільне місце ділиться між частками порівну;
   на вузькому телефоні шрифт трохи меншає */
.switch.fit{grid-auto-columns:minmax(0,auto); gap:2px; margin-bottom:0}
.switch.fit button{min-height:38px; padding:0 clamp(3px,(100vw - 300px)/8,8px); white-space:nowrap; overflow:hidden; font-size:clamp(12.5px,3.7vw,14px)}
.switch.fit svg{width:16px; height:16px; flex:none}
/* під словом лежить невидима жирна копія: вибране слово жирнішає, а ширина частки не стрибає */
.switch.fit .lb{display:inline-flex; flex-direction:column; align-items:center}
.switch.fit .lb::after{content:attr(data-t); height:0; overflow:hidden; visibility:hidden; font-weight:var(--w-strong)}
.filters{display:flex; gap:6px; overflow-x:auto; padding:2px 2px 10px; margin:0 -2px 2px; scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters a,.filters button{flex:none; display:inline-flex; align-items:center; gap:6px; min-height:38px; padding:0 15px;
  border:0; border-radius:var(--r-sm); background:var(--card); color:var(--ink-soft); box-shadow:0 1px 2px rgba(0,0,0,.05);
  font-size:14px; font-weight:var(--w-mid); text-decoration:none; cursor:pointer; white-space:nowrap}
.filters a:hover,.filters button:hover{color:var(--ink)}
.filters .on,.filters .on:hover{background:var(--accent); color:var(--on-accent); font-weight:var(--w-strong)}
/* Липкий ряд фільтрів (Історія, 11 листопада): під час гортання стоїть угорі — на телефоні під рядом меню, на комп'ютері
   на самому верху. Під ним так само липне заголовок дня (.day-group > h2 нижче). --stick-top — де вони зупиняються,
   --filters-h — висота ряду: заголовок дня стає впритул під нього. Коли ряд прилип (клас stuck ставить js/app.js),
   і він, і заголовок дня мають тло сторінки, щоб записи під ними не просвічували. */
:root{--stick-top:0px; --filters-h:52px; --stick-bg:color-mix(in srgb,var(--ground) 94%,transparent)}
.filters.stick{position:sticky; top:var(--stick-top); z-index:6; align-items:center; height:var(--filters-h);
  margin:14px -10px 0; padding:0 10px}
.filters.stick.stuck,.filters.stick.stuck ~ .stack .day-group > h2{background:var(--stick-bg);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px)}
@media (max-width:959px){
  :root{--stick-top:env(safe-area-inset-top, 0px)}
  .filters.stick{margin:8px -16px 0; padding:0 16px}
  /* на телефоні над фільтрами стоїть ряд меню: тло тягнеться й під нього (тінь, зсунута вгору), щоб записи не просвічували між кнопками */
  .filters.stick.stuck{box-shadow:0 calc(-1 * var(--stick-top)) 0 0 var(--ground)}
}
/* Згасання по краях ряду (12 листопада): ряд, що тягнеться за край, м'яко згасає до цього краю — з обох боків.
   --fade / --fade-r — ширина згасання зліва й справа (ставить js/app.js: скільки ряду за краєм, до 24 px; ряд
   закінчується — нуль, і крайній пункт видно цілком).
   Прилиплий ряд має своє тло, тож у нього згасання — дві накладки над пунктами, що липнуть до країв ряду: ::before
   зліва, ::after справа, кожна від тла до прозорого. Неприлиплий ряд тла не має, а під ним може бути фон у глибині
   (Налаштування → Вигляд), тож його пункти тануть по-справжньому: маска робить краї ряду прозорими.
   Відступів усередині ряду немає: їх дають самі накладки (їхня ширина плюс від'ємний відступ), тож накладки стоять
   точно біля країв. На телефоні в ::before ще й стає куля «Головна» (нижче, біля поля пошуку). */
.filters.stick{padding-left:0; padding-right:0}
.filters.stick::before,.filters.stick::after{content:""; position:sticky; z-index:1; flex:none; align-self:stretch; width:24px; pointer-events:none}
.filters.stick::before{left:0; margin-right:-20px; background:linear-gradient(to right, var(--ground), transparent var(--fade, 0px))}
.filters.stick::after{right:0; margin-left:-20px; background:linear-gradient(to left, var(--ground), transparent var(--fade-r, 0px))}
.filters.stick:not(.stuck)::before,.filters.stick:not(.stuck)::after{background:none}
.filters.stick:not(.stuck){
  -webkit-mask-image:linear-gradient(to right, transparent, #000 var(--fade, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent);
  mask-image:linear-gradient(to right, transparent, #000 var(--fade, 0px), #000 calc(100% - var(--fade-r, 0px)), transparent)}

/* сповіщення всередині сторінки */
.notice{display:flex; gap:10px; align-items:flex-start; padding:12px 16px; border-radius:var(--r-md); font-size:14px;
  background:var(--card); color:var(--ink-soft); box-shadow:inset 3px 0 0 var(--accent), var(--shadow)}
.notice.warn{box-shadow:inset 3px 0 0 var(--warn-dot), var(--shadow)}
.notice.warn svg,.notice.warn b{color:var(--warn)}
.notice.good{box-shadow:inset 3px 0 0 var(--good), var(--shadow)}
.notice.good svg,.notice.good b{color:var(--good)}
.notice.plain{box-shadow:var(--shadow)}
.notice svg{width:18px; height:18px; flex:none; margin-top:2px; color:var(--accent-ink)}
.notice b{font-weight:var(--w-strong); color:var(--ink)}
.notice .grow > * + *{margin-top:6px}
.card .notice{box-shadow:none; background:var(--fill)}

/* Історія: рядок події */
/* Згорнута картка-рядок: назва й стрілка («Незавершені розмови» в Історії). Згорнута — того ж розміру, що й поле
   пошуку (12 листопада): 54 px заввишки, ті самі кути, напис звичайним шрифтом 16 px, а не шрифтом заголовків. */
.arch{padding:0 18px; border-radius:var(--r-md)}
.arch summary{display:flex; align-items:center; gap:12px; min-height:54px}
.arch summary h2{flex:1; min-width:0; margin:0; font:var(--w-mid) 16px/1.3 var(--text); transition:color .15s}
.arch summary:hover h2{color:var(--accent-ink)}
.arch summary .chev{flex:none; width:20px; height:20px; color:var(--ink-faint); transition:transform .18s}
.arch details[open] > summary .chev{transform:rotate(90deg)}
/* Блок «Архіваріус» у Налаштуваннях → «Архів» (MA.autoSection у js/ui.js): дві частини, «Профіль» і «Щоденник»,
   кожна з повзунком і перемикачем; друга відділена тонкою лінією. */
.arch-part{display:flex; flex-direction:column; gap:14px}
.arch-part + .arch-part{padding-top:16px; border-top:1px solid var(--line-soft)}
.arch-part h3 a{color:inherit; text-decoration:none}
.arch-part h3 a:hover{color:var(--accent-ink)}
.arch-part .field{gap:10px}
/* Блоки «Незавершені розмови» і «Кошик» вгорі Історії (foldBlock у js/pages/history.js): та сама згорнута картка, але
   без значка — напис, число поруч із ним і стрілка скраю. Усередині рядок на кожне: назва (у незавершених — посилання
   на розмову, у Кошику — просто текст) і кнопка праворуч: «Завершити» чи «Повернути». */
.arch.fold-block summary h2{flex:0 1 auto}
.arch.fold-block summary .chip{flex:none; font-variant-numeric:tabular-nums}
.arch.fold-block summary .chev{margin-left:auto}
.open-list{padding-bottom:6px}
.open-row{display:flex; align-items:center; gap:8px; padding:9px 0; border-top:1px solid var(--line-soft)}
.open-row > a,.open-row > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; color:inherit; text-decoration:none}
.open-row > a b,.open-row > div b{font-weight:var(--w-strong); line-height:1.4; transition:color .15s}
.open-row > a:hover b{color:var(--accent-ink)}
.open-row > a > span:not(.sub),.open-row > div > span:not(.sub){font-size:14px; color:var(--ink-soft)}
/* «Завершити» і «Повернути» — звичайні малі кнопки з обведенням. Головна, кольорова, — лише на сторінці самої розмови:
   тут їх кілька підряд, і кольорові кричали б. */
.open-row .btn{flex:none}
/* У Кошику праворуч від «Повернути» — квадратна «Видалити остаточно», заввишки як ця кнопка. */
.open-row .d-act{flex:none; width:38px; height:38px}

/* Повзунок: тиха заливка на всю довжину, квадратна ручка кольору акценту (кути — як у часток перемикача вкладок),
   під нею світліший слід від початку. --th — сторона ручки, --p — де вона зараз (0…1). Ручка — рідна ручка
   input type="range", тож тягнеться сама. Крапки — позначки рівнів: стоять рівно там, де зупиняється центр ручки. */
.slide{--th:40px; position:relative; padding:4px; border-radius:var(--r-md); background:var(--fill)}
.slide-fill{position:absolute; left:4px; top:4px; height:var(--th); width:calc(var(--th) + (100% - 8px - var(--th)) * var(--p));
  border-radius:var(--r-sm); background:var(--accent-soft); transition:width .18s; pointer-events:none}
.slide.drag .slide-fill{transition:none}
.slide-ticks{position:absolute; left:calc(4px + var(--th) / 2); right:calc(4px + var(--th) / 2); top:50%; display:flex; justify-content:space-between; pointer-events:none}
.slide-ticks i{position:relative; width:0; height:0}
.slide-ticks i::after{content:""; position:absolute; left:-3px; top:-3px; width:6px; height:6px; border-radius:50%; background:var(--ink-faint); opacity:.5}
.slide input{position:relative; display:block; width:100%; height:var(--th); margin:0; padding:0; border:0; background:none;
  -webkit-appearance:none; appearance:none; cursor:pointer; touch-action:pan-y}
.slide input:focus{outline:none}
.slide input::-webkit-slider-runnable-track{height:var(--th); background:none}
.slide input::-moz-range-track{height:var(--th); background:none}
.slide input::-webkit-slider-thumb{-webkit-appearance:none; width:var(--th); height:var(--th); border:0; border-radius:var(--r-sm); cursor:grab;
  background:radial-gradient(circle,var(--on-accent) 0 3.5px,transparent 4.5px),var(--accent); box-shadow:var(--pill-shadow)}
.slide input::-moz-range-thumb{width:var(--th); height:var(--th); border:0; border-radius:var(--r-sm); cursor:grab;
  background:radial-gradient(circle,var(--on-accent) 0 3.5px,transparent 4.5px),var(--accent); box-shadow:var(--pill-shadow)}
.slide input:active::-webkit-slider-thumb{cursor:grabbing}
.slide input:active::-moz-range-thumb{cursor:grabbing}
.slide input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 4px var(--accent-soft),var(--pill-shadow)}
.slide input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 4px var(--accent-soft),var(--pill-shadow)}
.scale-now{display:flex; flex-direction:column; gap:2px; margin:0 4px; font-size:15.5px}
.scale-now b{font-weight:var(--w-strong)}

/* Перемикач «увімкнено / вимкнено»: уся смуга — кнопка, праворуч повзунок */
.tgl{display:flex; align-items:center; gap:14px; width:100%; padding:14px 4px 0; border:0; border-top:1px solid var(--line-soft); background:none;
  text-align:left; cursor:pointer; color:inherit; font:inherit}
.tgl .grow{display:flex; flex-direction:column; gap:2px; min-width:0}
.tgl b{font-weight:var(--w-strong)}
.tgl .knob{position:relative; flex:none; width:50px; height:30px; border-radius:15px; background:var(--btn-line); transition:background-color .15s}
.tgl .knob::after{content:""; position:absolute; left:3px; top:3px; width:24px; height:24px; border-radius:50%; background:var(--card); box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .15s}
.tgl[aria-checked="true"] .knob{background:var(--accent); box-shadow:var(--pill-shadow-sm)}
.tgl[aria-checked="true"] .knob::after{transform:translateX(20px)}
.tgl:disabled{opacity:.45; cursor:default}
.tgl:focus-visible{outline:2px solid var(--accent); outline-offset:4px; border-radius:var(--r-sm)}

/* Те, що вніс архіваріус і що чекає вашого підтвердження (вгорі Профілю й Щоденника) */
.pend{display:flex; flex-direction:column; gap:6px; padding:12px 0; border-top:1px solid var(--line-soft)}
.pend:first-of-type{border-top:0; padding-top:4px}
.pend-text{font-size:15.5px; line-height:1.5}
.pend .row{gap:8px; margin-top:4px}

/* Щоденник (js/pages/diary.js): поле нового запису й один суцільний текст за днями, без картки на кожен запис */
/* Сторінка «Щоденник»: згорнута кнопка «Додати запис» (того самого зросту й форми, що поле пошуку під нею),
   поле пошуку по щоденнику (липке, лише коли в ньому щось є, — клас stick ставить js/pages/diary.js) і записи.
   Розгорнуте поле нового запису займає екран донизу; висоту йому дає js/pages/diary.js. */
/* «Додати запис» — головна кнопка сторінки: залита кольором акценту, як .btn.primary, тільки на всю ширину й вища */
.add-entry{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:54px; padding:0 20px; border:0;
  border-radius:var(--r-md); background:var(--accent); color:var(--on-accent); font:inherit; font-size:15.5px; font-weight:var(--w-strong);
  box-shadow:var(--shadow); cursor:pointer; transition:filter .15s, transform .1s}
.add-entry:hover{filter:brightness(1.08)}
.add-entry:active{transform:scale(.985)}
.add-entry:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
.add-entry svg{width:21px; height:21px}
.diary-search input,.hist-search input{padding-right:54px}
/* Пошук в Історії (js/pages/history.js): над рядом фільтрів, під згорнутими блоками; сам не липне — липне ряд фільтрів */
.hist-find{margin-top:12px}
.hero + .hist-find{margin-top:16px}
.diary-new{display:flex; flex-direction:column; gap:10px}
.diary-new textarea.f{min-height:92px; resize:none; overflow:hidden}
.diary-new .btn-row{justify-content:flex-end}
.diary{padding:4px 20px 16px}
.d-day > h2{margin:16px 0 2px; font:500 17px/1.3 var(--display)}
.d-day + .d-day{margin-top:16px; border-top:1px solid var(--line-soft)}
.d-entry{padding:10px 0 2px; scroll-margin-top:120px}
.d-entry + .d-entry{margin-top:8px}
.d-meta{font-size:12.5px; color:var(--ink-faint)}
/* Рядок над записом: час ліворуч, два маленькі значки праворуч (виправити, видалити). Значки бліді, яскравішають під мишею. */
.d-top{display:flex; align-items:center; gap:8px}
.d-top .d-meta{flex:1; min-width:0}
/* Перший запис дня ставить свої кнопки в рядок із датою (.d-head); наступні записи того самого дня — у рядок зі своїм часом. */
.d-head{display:flex; align-items:center; gap:8px; margin:16px 0 2px}
.d-head h2{flex:1; min-width:0; margin:0; font:500 17px/1.3 var(--display)}
/* день тижня в заголовку: повний («, вівторок»), а на вузькому телефоні короткий («, вт»), щоб заголовок поруч
   із кнопками не переносився на другий рядок (js/pages/diary.js, dayHead) */
.d-head .wd.narrow{display:none}
@media (max-width:480px){
  .d-head .wd.wide{display:none}
  .d-head .wd.narrow{display:inline}
}
/* Значки — квадратні кнопки того самого вигляду, що й звичайна .btn: обведення, тло картки, натискання.
   Так само виглядає «+» біля назви розділу в Профілі. */
.d-acts{display:flex; gap:6px; flex:none}
.d-act{width:34px; height:34px; display:inline-flex; align-items:center; justify-content:center; padding:0;
  border:1px solid var(--line); border-radius:var(--r-sm); background:var(--card); color:var(--ink-soft); cursor:pointer;
  transition:background-color .15s, color .15s, transform .12s}
.d-act svg{width:16px; height:16px}
.d-act:hover,.d-act:focus-visible{color:var(--ink); background:var(--fill)}
.d-act:active{transform:scale(.94)}
.d-act.danger{color:var(--bad)}
.d-act.danger:hover,.d-act.danger:focus-visible{background:var(--bad-soft)}
.d-edit{display:flex; flex-direction:column; gap:8px}
.d-edit textarea.f{min-height:92px; resize:none; overflow:hidden; font-size:16px; line-height:1.65}
.d-edit .btn-row{justify-content:flex-end}
.d-meta a{color:inherit}
.d-text{margin-top:4px; font-size:16px; line-height:1.65; overflow-wrap:anywhere}
.d-text p{margin:0; white-space:pre-line}
.d-text p + p{margin-top:.7em}
.d-entry.hit{margin:0 -10px; padding:10px 10px 6px; border-radius:var(--r-md); background:var(--accent-soft)}

/* День в Історії: заголовок дня, а під ним — окрема компактна картка на кожен запис (11 листопада). Раніше день був
   однією карткою, а записи в ній розділяли тонкі лінії — дії одного дня зливалися. Сам .day-group тепер лише тримає
   картки стовпчиком: тла й тіні в нього немає. */
.card.day-group{display:flex; flex-direction:column; gap:8px; padding:0; border-radius:0; background:none; box-shadow:none}
.card.day-group > *{margin-top:0}
/* заголовок дня липне під рядом фільтрів, доки на екрані записи цього дня; наступний день виштовхує його вгору */
.day-group > h2{position:sticky; top:calc(var(--stick-top) + var(--filters-h)); z-index:5; margin:0 -10px; padding:6px 16px 6px;
  font:500 17px/1.3 var(--display)}
@media (max-width:959px){ .day-group > h2{margin:0 -16px; padding:6px 22px} }
/* Запис Історії, стислий (10 листопада). Окремої колонки для значка немає: він стоїть у рядку перед заголовком, тож текст
   і плашки під ним займають усю ширину картки. Рядок заголовка: значок, назва, час, перехід (стрілка).
   Запис розмови — весь посилання (a.entry); у записі зміни перехід — номер розмови зі стрілкою (.entry-go).
   Нове з минулого разу — цятка на куті значка (.entry-ic.new). */
.entry{display:flex; flex-direction:column; gap:5px; min-width:0; padding:11px 14px 12px; border-radius:var(--r-lg);
  background:var(--card); box-shadow:var(--shadow)}
a.entry{color:inherit; text-decoration:none; transition:box-shadow .2s}
a.entry:hover{box-shadow:var(--shadow-hover)}
.entry-top{display:flex; align-items:flex-start; gap:9px; min-width:0}
.entry-top > b{flex:1 1 auto; min-width:0; padding-top:2px; font-weight:var(--w-strong); line-height:1.4; transition:color .15s}
.entry-top > .chip{flex:none; margin-top:1px}
.entry-top > .sub{flex:none; white-space:nowrap; line-height:25px}
.entry-top > .chev{flex:none; width:18px; height:18px; margin:4px -5px 0 -5px; color:var(--ink-faint); transition:color .15s}
a.entry:hover .entry-top > b,a.entry:hover .chev{color:var(--accent-ink)}
.entry-ic{position:relative; flex:none; width:25px; height:25px; border-radius:var(--r-xs); display:flex; align-items:center; justify-content:center}
.entry-ic svg{width:15px; height:15px}
.entry-ic.new::after{content:""; position:absolute; top:-3px; right:-3px; width:9px; height:9px; border-radius:50%;
  background:var(--accent); box-shadow:0 0 0 2px var(--card)}
.entry-go{flex:none; display:inline-flex; align-items:center; min-height:25px; margin-right:-5px; font-size:13px; font-weight:var(--w-strong);
  color:var(--accent-ink); text-decoration:none; white-space:nowrap}
.entry-go svg{width:18px; height:18px}
.entry-go:hover{text-decoration:underline}
.entry-on{color:var(--warn); font-weight:var(--w-mid)}
.entry-act{margin-top:3px}
.entry-act .btn{min-height:32px; font-size:13px}
.entry-what{font-size:14.5px; font-weight:var(--w-strong)}
/* розмову знайдено за темою, якої в назві немає: ці теми — тихим рядком під назвою */
.entry-more{font-size:14px; color:var(--ink-soft)}
.ic-add{background:var(--accent-soft); color:var(--accent-ink)}
.ic-edit{background:var(--warn-soft); color:var(--warn)}
.ic-remove{background:var(--bad-soft); color:var(--bad)}
.ic-revert{background:var(--fill); color:var(--ink-soft)}
.ic-chat{background:var(--accent-soft); color:var(--accent-ink)}
.ic-doc{background:var(--violet-soft); color:var(--violet)}
.ic-reject{background:var(--fill); color:var(--ink-faint)}
.reverted{opacity:.62}

/* Було / Стало */
.diff{display:flex; flex-direction:column; gap:6px}
.was,.now,.plain-box{border-radius:var(--r-md); padding:9px 13px; font-size:14px; white-space:pre-line; overflow-wrap:anywhere}
.was{background:var(--bad-soft)}
.now{background:var(--accent-soft)}
.plain-box{background:var(--fill)}
.was > b,.now > b{display:block; font-size:11px; font-weight:var(--w-strong); letter-spacing:.07em; text-transform:uppercase}
.was > b{color:var(--bad)}
.now > b{color:var(--accent-ink)}
.removed{color:var(--ink-faint); text-decoration:line-through}
.clamp{max-height:9.5em; overflow:hidden; position:relative}
.clamp.open{max-height:none}

/* слова людини дослівно */
.quote{position:relative; margin:0; padding:10px 14px 10px 16px; background:var(--accent-paper);
  border-left:2px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0; font-size:14.5px; line-height:1.5}
/* .quote{margin:0} стоїть пізніше за .card > * + * і перебивав його, тож цитати в картці злипалися між собою й із заголовком */
.card > * + .quote{margin-top:10px}
.quote footer{margin-top:4px; font-size:12.5px; color:var(--ink-faint)}
/* «розмова №14», «репліка 2» — тиха довідка, як репліка в темах (.topic .at): сіра, з підкресленням, акцент — під курсором */
.quote footer a{color:inherit; text-decoration:underline; text-decoration-color:var(--btn-line); text-underline-offset:3px}
.quote footer a:hover{color:var(--accent-ink)}

/* повний запис розмови: ваші репліки — кольором акценту, відповіді — білі */
.transcript{display:flex; flex-direction:column; gap:8px}
.bubble{max-width:86%; padding:11px 14px; border-radius:var(--r-lg); font-size:15px; line-height:1.5; white-space:pre-line}
.bubble.me{align-self:flex-end; background:var(--accent); color:var(--on-accent); border-bottom-right-radius:4px}
.bubble.ai{align-self:flex-start; background:var(--card); border-bottom-left-radius:4px; box-shadow:0 1px 2px rgba(0,0,0,.05)}
.bubble .who{display:block; font-size:11px; font-weight:var(--w-strong); letter-spacing:.05em; text-transform:uppercase; opacity:.72; margin-bottom:3px}
.bubble .who .tm,.bubble .who .no{font-weight:var(--w-text); letter-spacing:0; margin-left:7px}
/* репліка, до якої прийшли за посиланням із теми брифу, цитати чи пошуку */
.bubble{scroll-margin:96px}
.bubble.hit{box-shadow:0 0 0 3px var(--warn-dot)}
.day-sep{align-self:center; font-size:12.5px; font-weight:var(--w-mid); color:var(--ink-faint); padding:8px 0 2px}
.tool-call{align-self:center; font-size:12.5px; color:var(--ink-faint); display:flex; gap:6px; align-items:center}
.tool-call svg{width:14px; height:14px}
/* Тут Claude стиснув чат (план v0.11, розділ 6.2): межа на всю ширину запису, тонкі риски обабіч напису */
.compact-mark{display:flex; gap:6px; align-items:center; padding:6px 0; font-size:12.5px; color:var(--ink-faint)}
.compact-mark::before,.compact-mark::after{content:""; flex:1; border-top:1px dashed var(--line)}
.compact-mark svg{width:14px; height:14px; flex:none}
/* над записом: скільки архів віддав у розмову (розділ 3.3) — тихо, як службові рядки */
.took{display:flex; gap:6px; align-items:center; margin:0 0 12px; font-size:12.5px; color:var(--ink-faint)}
.took svg{width:14px; height:14px; flex:none}
/* картка матеріалу під вашою реплікою (план v0.11, розділ 6.2): вкладення модель не передруковує, у записі лишається суть */
.mat-card{align-self:flex-end; max-width:86%; margin-top:-2px; padding:10px 14px; border-radius:var(--r-lg); background:var(--card);
  box-shadow:0 0 0 1px var(--line-soft); display:flex; flex-direction:column; gap:4px; font-size:14px; line-height:1.45}
.mat-card .mc-k{display:flex; align-items:center; gap:6px; font-size:11px; font-weight:var(--w-strong); letter-spacing:.05em; text-transform:uppercase; color:var(--ink-faint)}
.mat-card .mc-k svg{width:14px; height:14px}
.mat-card .mc-t{font-weight:var(--w-strong)}
.mat-card p{margin:0}
.mat-card .mc-l{color:var(--ink-soft)}
.mat-card .mc-why{color:var(--ink-soft); font-size:13px}
/* у шапці розмови: текст ролі змінили після неї — тихий рядок із посиланням на Історію ролі */
.hero-extra.role-ver{margin-top:8px; font-size:13px}

/* списки-оглавлення */
.list{background:var(--card); border-radius:var(--r-card); padding:4px 8px; box-shadow:var(--shadow)}
.card .list{background:var(--fill); box-shadow:none}
.list > a,.list > .li{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:4px 12px; align-items:center;
  min-height:58px; padding:11px 10px; text-decoration:none; color:var(--ink); border-bottom:1px solid var(--line-soft)}
.list > a:last-child,.list > .li:last-child{border-bottom:0}
.list > a{transition:background-color .15s}
.list > a:hover{background:var(--fill); border-radius:var(--r-md)}
/* overflow-wrap: довге слово без пробілів (посилання в записі щоденника чи пункті профілю) переноситься в межах рядка,
   а не лізе під дату й за край картки (12 листопада: так було в результатах пошуку) */
.list .t{font-weight:var(--w-strong); display:flex; align-items:center; gap:7px; overflow-wrap:anywhere}
.list .t > span{min-width:0}
.list .d{font-size:13.5px; color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere}
.list .r{font-size:13px; color:var(--ink-faint); text-align:right; white-space:nowrap}
.list svg.chev{width:18px; height:18px; color:var(--ink-faint)}

/* поля форм */
.field{display:flex; flex-direction:column; gap:6px}
.field > label,.f-label{font-size:13px; font-weight:var(--w-strong); color:var(--ink-soft)}
/* 16 px — не з ієрархії тексту: з меншим шрифтом iPhone збільшує сторінку, щойно торкнешся поля */
input.f,select.f,textarea.f{width:100%; padding:11px 14px; font-size:16px; background:var(--fill); border:1px solid transparent;
  border-radius:var(--r-field); min-height:46px; transition:border-color .15s, box-shadow .15s, background-color .15s}
textarea.f{line-height:1.55; resize:vertical; min-height:120px}
textarea.f.tall{min-height:300px}
input.f::placeholder,textarea.f::placeholder{color:var(--ink-faint); opacity:.85}
input.f:focus,select.f:focus,textarea.f:focus{background:var(--card); border-color:var(--accent); outline:none; box-shadow:0 0 0 4px var(--accent-soft)}
.radio{display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md); cursor:pointer;
  transition:background-color .15s, border-color .15s}
.radio:hover{background:var(--fill)}
.radio:has(input:checked){background:var(--accent-paper); border-color:var(--accent)}
.radio input{margin-top:4px; accent-color:var(--accent)}
.radio b{font-weight:var(--w-strong); display:block}
.radio .sub{display:block}

/* пошук — біле поле з тінню */
.search-box{position:relative}
.search-box > svg{position:absolute; z-index:1; left:18px; top:50%; transform:translateY(-50%); width:20px; height:20px; color:var(--ink-faint); pointer-events:none}
.search-box input{padding-left:48px; font-size:16px; min-height:54px; border-radius:var(--r-md); background:var(--card); box-shadow:var(--shadow)}
.search-box input:focus{background:var(--card)}
/* Поле пошуку на Головній липке (11 листопада): під час гортання стоїть угорі — на телефоні під рядом меню, на комп'ютері
   біля верху. Тла під ним немає, як і під кнопками меню: сторінка їде під ним, а коли поле прилипло (клас stuck ставить
   js/app.js), тінь у нього помітніша. Праворуч у полі — кнопка фільтрів; крапка на ній (.on) — фільтри звужено. */
.search-box.stick{position:sticky; top:calc(var(--stick-top) + 2px); z-index:6}
/* на комп'ютері поле липне під верхньою панеллю (--stick-top = її висота, css/nav.css) */
@media (min-width:960px){ .search-box.stick{top:calc(var(--stick-top) + 6px)} }
.search-box.stick input{padding-right:54px}
/* обвідка — всередині поля: зовнішня робила прилипле поле на 2 px більшим (до 12 листопада) */
.search-box.stick.stuck input:not(:focus){box-shadow:inset 0 0 0 1px var(--line-soft), var(--shadow-lg)}
.sb-btn{position:absolute; z-index:1; right:7px; top:50%; transform:translateY(-50%); width:40px; height:40px; display:inline-flex;
  align-items:center; justify-content:center; padding:0; border:0; border-radius:var(--r-sm); background:transparent; color:var(--ink-soft);
  cursor:pointer; transition:background-color .15s, color .15s}
.sb-btn:hover{color:var(--ink); background:var(--fill)}
.sb-btn svg{width:20px; height:20px}
.sb-btn[aria-expanded="true"]{background:var(--accent-soft); color:var(--accent-ink)}
.sb-btn.on::after{content:""; position:absolute; top:7px; right:7px; width:7px; height:7px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 2px var(--card)}
/* Пошук розкрито, і поле прилипло: над ним і за ним — тло сторінки аж до верху екрана (як у липкого ряду в Історії).
   Сторінка тоді стоїть якраз там, де з-за ряду меню ще визирав би низ шапки з плитками; тло його прикриває,
   а результати зникають під полем м'яко, а не посеред рядка. Поки пошук не розкрито, тла немає. */
.search-box.stick::before{content:""; position:absolute; z-index:-1; left:-16px; right:-16px; top:calc(-1 * var(--stick-top) - 12px); bottom:-14px;
  background:linear-gradient(to bottom,var(--ground) calc(100% - 14px),transparent); opacity:0; pointer-events:none; transition:opacity .2s}
.find-on > .search-box.stick.stuck::before{opacity:1}
/* Телефон: ряду меню вгорі більше немає (11 листопада), тож липке стає на самий верх екрана, де в лівому куті стоїть
   куля «Головна». Доїхавши туди, поле пошуку й ряд фільтрів Історії посуваються праворуч і стають поруч із кулею. */
/* Прилипле поле пошуку стає в один ряд із кулею (12 листопада): заввишки як вона (46 px замість 54) і на тій самій
   висоті — за 3 px від верху, як куля. До того воно стояло за 2 px від верху й виступало над кулею й під нею.
   Місце поля в сторінці не міняється (54 px): що поле нижче, то більші відступи над ним і під ним, тож результати під
   полем не зсуваються. Липне поле на 1 px вище краю, а відступ 4 px ставить його на 3 px. */
@media (max-width:959px){
  .search-box.stick{top:calc(var(--stick-top) - 1px); transition:padding .18s}
  .search-box.stick > svg{transition:left .18s}
  .search-box.stick.stuck{padding:4px 0 4px 54px}
  .search-box.stick.stuck > svg{left:72px}
  .search-box.stick input{transition:min-height .18s, padding .18s, border-color .15s, box-shadow .15s, background-color .15s}
  .search-box.stick.stuck input{min-height:46px; padding-top:7px; padding-bottom:7px}
  /* Ряд фільтрів: ліва накладка, прилипнувши, виростає в поле з кулею (12 листопада). Відступу всередині ряду мало:
     ряд гортається вбік, і відступ виїжджав разом із пунктами, а ті заходили під кулю. Поле ж липне до краю. Його
     ширину веде js/app.js через --k (0 — ряд не прилип, 1 — прилип; переходу в CSS немає: ширина й прокрутка ряду
     рухаються разом, кадр у кадр). Під кулею (до 62 px) поле має тло сторінки, далі — згасання на --fade. Перший
     пункт неприлиплого ряду стоїть на 16 px, прилиплого — там само, де поле пошуку (70 px); після останнього — 16 px. */
  .filters.stick::before{width:calc(62px * var(--k, 0) + 24px); margin-right:calc(-14px - 8px * var(--k, 0));
    background:linear-gradient(to right, var(--ground) calc(62px * var(--k, 0)), transparent calc(62px * var(--k, 0) + var(--fade, 0px)))}
  .filters.stick::after{margin-left:-14px}
  /* ряд щойно відлип, а поле з кулею ще стискається (--k іде до 0) — маска ховає те, що під ним */
  .filters.stick:not(.stuck){
    -webkit-mask-image:linear-gradient(to right, transparent calc(62px * var(--k, 0)), #000 calc(62px * var(--k, 0) + var(--fade, 0px)), #000 calc(100% - var(--fade-r, 0px)), transparent);
    mask-image:linear-gradient(to right, transparent calc(62px * var(--k, 0)), #000 calc(62px * var(--k, 0) + var(--fade, 0px)), #000 calc(100% - var(--fade-r, 0px)), transparent)}
}
/* ряд «де шукати» з п'яти часток: кожна завширшки зі своє слово плюс рівна частка вільного місця */
.switch.fit.flexrow{display:flex}
.switch.fit.flexrow button{flex:1 1 auto}
/* Пошук розкрито: те, що під полем, займає щонайменше екран — поле лишається вгорі, хоч би скільки знайшлося */
.find-on > #home-body{min-height:calc(100vh - var(--stick-top) - 100px); min-height:calc(100dvh - var(--stick-top) - 100px)}
mark{background:var(--warn-soft); color:inherit; border-radius:4px; padding:0 2px}
/* рамки пошуку: перемикач «де шукати» й перемикач «за який час», під ними за потреби календар */
.frames{display:flex; flex-direction:column; gap:8px}
/* вибраний свій період — тихий рядок під календарною часткою перемикача */
.frames .own-span{margin:-2px 16px 0; text-align:right}

/* календар періоду. Початок і кінець — квадрати кольору акценту, дні між ними — тиха смуга того самого кольору;
   обведений день — сьогодні, крапка під числом — день, коли в архіві щось з'явилося */
.cal{max-width:400px; margin-top:6px; padding:14px 14px 12px}
.cal-head{display:flex; align-items:center; justify-content:space-between; gap:8px}
.cal-head b{font:500 17px/1.3 var(--display)}
.cal-head button{width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center; padding:0; border:0;
  border-radius:var(--r-sm); background:transparent; color:var(--ink-soft); cursor:pointer; transition:background-color .15s, color .15s}
.cal-head button:hover{background:var(--fill); color:var(--ink)}
.cal-head button:disabled{background:none; color:var(--ink-off); cursor:default}
.cal-head svg{width:20px; height:20px}
.cal-grid{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); row-gap:2px}
.cal-wd{padding:6px 0 4px; text-align:center; font-size:11.5px; font-weight:var(--w-strong); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.cal-day{display:flex; align-items:center; justify-content:center; height:40px; padding:0; border:0; background:transparent;
  font-size:14.5px; font-variant-numeric:tabular-nums; cursor:pointer}
.cal-day span{position:relative; display:flex; align-items:center; justify-content:center; width:38px; height:38px; border-radius:var(--r-sm);
  transition:background-color .15s, color .15s}
.cal-day:hover span{background:var(--fill)}
.cal-day:disabled{color:var(--ink-off); cursor:default}
.cal-day:disabled span{background:none}
.cal-day.today span{box-shadow:inset 0 0 0 1px var(--btn-line)}
.cal-day.has span::after{content:""; position:absolute; left:50%; bottom:5px; width:4px; height:4px; margin-left:-2px; border-radius:50%; background:var(--accent)}
.cal-day.in{background:var(--accent-soft)}
.cal-day.in:hover span{background:var(--accent-soft)}
.cal-day.a{background:linear-gradient(90deg,transparent 50%,var(--accent-soft) 50%)}
.cal-day.b{background:linear-gradient(90deg,var(--accent-soft) 50%,transparent 50%)}
/* смуга не виходить за край тижня й місяця: там вона закруглюється, а під квадратом на краю зникає */
.cal-day.a.b,.cal-day.a.we,.cal-day.b.ws{background:none}
.cal-day.in.ws{border-radius:var(--r-sm) 0 0 var(--r-sm)}
.cal-day.in.we{border-radius:0 var(--r-sm) var(--r-sm) 0}
.cal-day.in.ws.we{border-radius:var(--r-sm)}
.cal-day.a span,.cal-day.b span{background:var(--accent); color:var(--on-accent); font-weight:var(--w-strong)}
.cal-day.a.has span::after,.cal-day.b.has span::after{background:var(--on-accent)}
.cal-foot{display:flex; align-items:center; gap:6px; min-height:38px}

/* спливні повідомлення */
.toasts{position:fixed; left:50%; bottom:calc(24px + env(safe-area-inset-bottom)); transform:translateX(-50%); z-index:40;
  display:flex; flex-direction:column; gap:8px; width:min(440px, calc(100vw - 32px))}
@media (min-width:960px){ .toasts{bottom:28px} }
.toast{display:flex; align-items:center; gap:12px; padding:10px 10px 10px 18px; min-height:52px; border-radius:var(--r-md);
  background:var(--ink); color:var(--ground); font-size:14px; font-weight:var(--w-mid); box-shadow:var(--shadow-lg); animation:rise .2s ease-out}
.toast button{margin-left:auto; flex:none; border:0; background:color-mix(in srgb,currentColor 14%,transparent); color:inherit;
  font-weight:var(--w-strong); cursor:pointer; padding:7px 14px; border-radius:var(--r-sm)}
@keyframes rise{from{opacity:0; transform:translateY(10px)}}

/* вікно підтвердження */
.dialog{border:0; padding:0; border-radius:var(--r-xl); width:min(440px, calc(100vw - 32px)); background:var(--card); color:var(--ink); box-shadow:var(--shadow-lg)}
.dialog::backdrop{background:rgba(14,16,30,.42)}
.dialog form{padding:22px; display:flex; flex-direction:column; gap:12px}
.dialog h2{font:400 22px/1.2 var(--display)}
.dialog .btn-row{justify-content:flex-end; margin-top:6px}
.dialog .btn-row .btn{flex:1 1 auto; padding:0 16px}

/* розкривні блоки */
details > summary{cursor:pointer; list-style:none}
details > summary::-webkit-details-marker{display:none}
details.fold > summary{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:28px}
details.fold > summary::after{content:"показати"; flex:none; font-size:13px; font-weight:var(--w-strong); color:var(--accent-ink)}
details.fold[open] > summary::after{content:"сховати"}
/* позначка довідки біля заголовка поля: натиск на заголовок чи знак розгортає пояснення під ним */
details.help > summary{display:inline-flex; align-items:center; gap:7px; min-height:28px}
.help-mark{display:inline-flex; color:var(--ink-faint); transition:color .15s}
.help-mark svg{width:18px; height:18px}
details.help > summary:hover .help-mark,details.help[open] .help-mark{color:var(--accent-ink)}
.help-body{display:flex; flex-direction:column; gap:6px; margin-top:4px; padding:12px 14px; border-radius:var(--r-md);
  background:var(--fill); font-size:13px; color:var(--ink-soft)}
.help-body ul{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:3px}
/* та сама позначка замість заголовка розділу (Підсумки → «Місяці»): MA.help(…, "sec") */
details.help.sec{margin:20px 4px 2px}
details.help.sec h2{font:500 19px/1.3 var(--display); letter-spacing:-.005em}
details.help.sec .help-body{margin-top:8px}
/* рядок над списком: зліва слово «Довідка» з позначкою, справа кнопка (Ролі → «Нова роль»). Кнопка стоїть у куті
   поверх рядка, тож розгорнуте пояснення займає всю ширину під ними */
.help-row{position:relative; padding:0 4px}
.help-row > .btn{position:absolute; top:0; right:0}
.help-row details.help > summary{min-height:38px}
.help-row .help-body{margin-top:8px}
.help-t{font-size:14px; font-weight:var(--w-mid); color:var(--ink-soft)}
/* тихий рядок із позначкою довідки: підсумок картини на тему в Пошуку. Рядок буває довгий, тож на телефоні
   переноситься, а позначка лишається праворуч від тексту */
details.help.pic-head{margin:-2px 14px 0}
details.help.pic-head > summary{display:flex; align-items:flex-start; justify-content:space-between}
details.help.pic-head .help-mark{flex:none; margin-top:1px}
details.help.pic-head .help-body{margin-top:8px}

/* сторінка «Поради у користуванні»: що сказати в чаті — і що це робить */
.tips{margin:0; display:flex; flex-direction:column; gap:12px}
.tips > div + div{border-top:1px solid var(--line-soft); padding-top:12px}
.tips dt{font-weight:var(--w-strong)}
.tips dd{margin:2px 0 0; font-size:14px; color:var(--ink-soft)}
/* Довідка з 14 листопада: кожен розділ — згорнута картка .arch (назва й стрілка), спершу згорнута; вміст — під назвою */
.tip-body{display:flex; flex-direction:column; gap:12px; padding:2px 0 18px}
.tip-body p{margin:0}
/* «Стандартні команди»: група — тихий заголовок, далі рядки «команда — що робить». На телефоні пояснення під
   командою, ширше — праворуч від неї, у дві колонки */
.cmd-group + .cmd-group{margin-top:8px}
.cmd-group h3{margin:0 0 2px; font-size:13px; font-weight:var(--w-mid); color:var(--ink-faint)}
.cmds{margin:0}
.cmds > div{padding:8px 0; border-top:1px solid var(--line-soft)}
.cmds dt{font-weight:var(--w-strong)}
.cmds dd{margin:2px 0 0; font-size:14px; color:var(--ink-soft)}
@media (min-width:560px){
  .cmds > div{display:grid; grid-template-columns:minmax(0, 1fr) minmax(0, 1fr); gap:16px; align-items:baseline}
  .cmds dd{margin:0}
}

@media (max-width:420px){
  .bubble,.mat-card{max-width:92%}
}

/* меню «Ролі»: картки з ручкою зліва; порядок міняють перетягуванням за ручку (або стрілками з клавіатури) */
.role-cards{position:relative; display:flex; flex-direction:column; gap:12px}
.role-card{display:flex; align-items:stretch; padding:0; position:relative; transition:box-shadow .2s, transform .18s ease}
.role-card:hover{box-shadow:var(--shadow-hover)}
.role-card > .role-link{margin-top:0}
.role-link{flex:1; min-width:0; display:flex; flex-direction:column; gap:10px; padding:16px 18px 16px 2px; color:inherit; text-decoration:none}
.role-link:hover h3{color:var(--accent-ink)}
/* «Без ролі» — картка без ручки: її не пересувають. Текст починається там само, де в карток із ручкою (40 px ручки
   і 2 px відступу), тож назви всіх ролей стоять на одній лінії. */
.role-card.fixed .role-link{padding-left:42px}
/* перший рядок тексту ролі під назвою: не довше двох рядків на картці */
.role-lead{display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden}
.grip{flex:none; width:40px; display:flex; align-items:center; justify-content:center; border:0; background:none; padding:0;
  color:var(--ink-off); cursor:grab; touch-action:none; border-radius:var(--r-card) 0 0 var(--r-card); transition:color .15s}
.grip:hover, .grip:focus-visible{color:var(--accent-ink)}
.grip svg{width:20px; height:20px}
.role-cards.sorting{user-select:none; -webkit-user-select:none}
.role-cards.sorting .grip{cursor:grabbing}
.role-card.dragging{z-index:2; transition:box-shadow .2s; box-shadow:var(--shadow-hover), 0 0 0 2px var(--accent)}

/* ---------- зона дотику на телефоні (12 листопада) ----------
   Дрібні посилання й кнопки ловлять палець ширше, ніж виглядають: довкола них невидиме поле, як у перемикача теми
   (css/nav.css). Вигляд не змінюється. Поля не заходять на сусідні кнопки й посилання:
   - стрілка переходу в записі Історії (була 18×25 px — єдиний спосіб відкрити розмову із запису про зміну);
   - «репліка N» біля теми брифу (поле більше вгору: під нею буває рядок із посиланнями на тему й людей);
   - «Повернути як було» в записі Історії (заввишки 32 px);
   - квадратні кнопки «виправити» й «видалити» (34 px; убік лише на 3 px, бо стоять парою з проміжком 6 px);
   - «назад» біля назви сторінки (34 px). */
@media (max-width:959px){
  .entry-go,.topic .at,.entry-act .btn,.d-act,.page-head.has-back .back{position:relative}
  .entry-go::after,.topic .at::after,.entry-act .btn::after,.d-act::after,.page-head.has-back .back::after{content:""; position:absolute}
  .entry-go::after{inset:-10px -9px -10px -12px}
  .topic .at::after{inset:-12px -8px -4px}
  /* у цих двох є рамка 1 px, а поле рахується від її внутрішнього краю, тож воно на піксель більше */
  .entry-act .btn::after{inset:-7px 0}
  .d-act::after{inset:-6px -4px}
  .page-head.has-back .back::after{inset:-5px}
}