/* 05_plan.css — частина style.css, винесена без перестановки правил.
   Календар і Аналітика.
   Порядок підключення в index.html повторює порядок частин:
   каскад від розділення не змінився (перевірено побайтно). */
/* ── Calendar ─────────────────────────────────────────────────────────── */
.cal-head{
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--sp-12);
  margin-bottom: 16px;
}
.cal-head-r{ display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; }
.cal-nav{ display: flex; gap: var(--sp-6); }
.badge-mode{ font: 700 var(--fs-11)/1.4 var(--mono); }
.badge-mode.auto{ color: var(--ok); border-color: rgba(var(--ok-rgb),.3); background: rgba(var(--ok-rgb),.08); }
.badge-mode.manual{ color: var(--warn); border-color: rgba(245,185,66,.3); background: rgba(245,185,66,.08); }

/* Індикатор здоров'я планувальника (шапка календаря) */
.cal-health{ font-size:  var(--fs-14); line-height: 1; cursor: help; color: var(--text-mute); }
.cal-health.ok{ color: var(--ok); }
.cal-health.warn{ color: var(--warn); }
.cal-health.bad{ color: var(--danger); }

/* Зірочка «найкращий час» у шапці дня */
.cal-day-best{
  font: 700 var(--fs-10)/1 var(--mono); color: var(--warn); cursor: help; white-space: nowrap;
}

/* Трей чернеток без дати */
.cal-tray{
  background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px; display: flex; flex-direction: column; gap: var(--sp-8);
}
.cal-tray-head{ font: 700 var(--fs-11)/1.4 var(--sans); color: var(--text-mute);letter-spacing: .04em; }
.cal-tray-hint{ font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute); text-transform: none; letter-spacing: 0; margin-left: 8px; }
.cal-tray-list{ display: flex; flex-wrap: wrap; gap: var(--sp-8); }
.cal-tray-item{
  display: flex; align-items: center; gap: var(--sp-8); cursor: grab; max-width: 340px;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; transition: var(--t-fast) var(--ease);
}
.cal-tray-item:hover{ border-color: var(--border-hover); }
.cal-tray-item.dragging{ opacity: .5; }
.cal-tray-item .ct-desc{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-tray-item .ct-nets{ display: flex; gap: 3px; }
.cal-tray-item .ct-enqueue{ padding: 3px 8px; font-size:  var(--fs-10); white-space: nowrap; }

/* Модалка сітки слотів */
.cal-slots-hint{ font: 500 var(--fs-12)/1.5 var(--sans); color: var(--text-mute); margin-bottom: 8px; }
.cal-slots-best{ font: 600 var(--fs-11)/1.5 var(--sans); color: var(--warn); margin-bottom: 8px; }
.cal-slots-list{ display: flex; flex-direction: column; gap: var(--sp-6); margin-bottom: 10px; }
.cal-slot-row{ display: flex; align-items: center; gap: var(--sp-8); }
.cal-slot-row select, .cal-slot-row input[type="time"]{
  background: var(--panel-2); color: var(--text); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 5px 8px; font: 600 var(--fs-12)/1.4 var(--sans);
}
.cal-slot-del{ padding: 3px 8px; }

.appr-strip{
  display: flex; flex-direction: column; gap: var(--sp-10);
  background: rgba(245,185,66,.08); border: 1px solid rgba(245,185,66,.3); border-radius: var(--radius);
  padding: 10px 14px; margin-bottom: 16px;
}
.appr-strip:empty{ display: none; padding: 0; border: 0; margin: 0; }
.appr-strip .as-banner{ display: flex; align-items: center; gap: var(--sp-12); flex-wrap: wrap; }
.appr-strip .as-text{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--warn); display: flex; align-items: center; gap: var(--sp-8); }
.appr-strip .as-show{ margin-left: auto; }
.appr-strip .as-list{ display: flex; flex-direction: column; gap: var(--sp-6); }
.appr-strip .as-row{
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap; cursor: pointer;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm); padding: 8px 10px; transition: var(--t-fast) var(--ease);
}
.appr-strip .as-row:hover{ border-color: var(--border-hover); border-left-color: var(--warn); }
.appr-strip .as-row-desc{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text); flex: 1; min-width: 160px; word-break: break-word; }
.appr-strip .as-row-nets{ display: flex; gap: 3px; }
.appr-strip .as-row-actions{ display: flex; gap: var(--sp-6); margin-left: auto; }
.appr-strip .as-row-actions .btn{ padding: 4px 8px; font-size:  var(--fs-10); }

.post-card.appr-highlight, .appr-strip .as-list.appr-highlight{
  animation: apprHighlight 1.6s var(--ease);
}
@keyframes apprHighlight{
  0%{ box-shadow: 0 0 0 3px rgba(245,185,66,.55); }
  100%{ box-shadow: none; }
}
.pc-appr-actions{ display: flex; gap: var(--sp-6); margin-top: 6px; }
.pc-appr-actions .btn{ flex: 1; padding: 4px 6px; font-size:  var(--fs-10); }

/* ═══ ПОТІК ДНІВ — типовий вигляд календаря ═══════════════════════════════
   Місячна сітка малює 42 клітинки, з яких зайняті одиниці. Людина приходить
   із питанням «що виходить найближчими днями», а сітка відповідає картою
   порожнечі, де відповідь треба вишукувати очима.

   Потік показує підряд лише те, що заплановано, а порожні дні згортає в
   ОДИН рядок. Порожнеча стає одним фактом замість двадцяти порожніх
   коробок — і саме тому тут немає жодної рамки: форму рядка тримає
   заливка дати ліворуч, а не оправа навколо. */
.cal-flow{ display:flex; flex-direction:column; gap:8px }

.cf-day{
  display:grid; grid-template-columns:64px minmax(0,1fr); gap:var(--sp-16);
  align-items:start; padding:12px; border-radius:var(--radius-md);
  background:var(--fill-0);
}
/* Сьогодні — єдиний рядок із помітнішою заливкою. Бурштин сюди не йде:
   він на цьому екрані належить головній дії в шапці. */
.cf-day.today{ background:var(--fill-2) }

.cf-date{
  display:flex; flex-direction:column; align-items:center; gap:var(--sp-2);
  padding:8px 0; border-radius:var(--radius-sm); background:var(--fill-1);
}
.cf-date b{ font-size:22px; line-height:1; font-weight:700; color:var(--text) }
.cf-date span{ font-size: var(--fs-11); color:var(--text-mute) }
/* 🛑 Було бурштином. Сесія 3: «бурштин на екрані вже витрачений на
   кнопку плану; сьогоднішній день виділяє підкладка й підпис». Число
   дня — не дія, і фарбувати його кольором дії означає щодня
   пропонувати натиснути на дату. Виділяє його заливка рядка. */
.cf-day.today .cf-date b{ color:var(--text) }

.cf-posts{ display:flex; flex-wrap:wrap; gap:var(--sp-8); align-items:stretch }
.cf-posts .post-card{ width:210px }

/* Кнопка додавання — пунктир, той самий, що й у порожніх станах: вона й
   означає «тут порожньо, і сюди можна класти». */
.cf-add{
  flex:0 0 auto; min-width:110px; padding:10px 14px;
  border:1px dashed var(--border-hover); border-radius:var(--radius-md);
  background:transparent; color:var(--text-mute); cursor:pointer;
  font-size: var(--fs-13); transition:color .16s var(--ease), border-color .16s var(--ease);
}
.cf-add:hover{ color:var(--text); border-color:var(--line-2); background:var(--fill-1) }

/* Проміжок. Один рядок замість N порожніх днів; лінія по центру показує,
   що час іде, а не що тут щось приховано. */
.cf-gap{
  display:flex; align-items:center; gap:var(--sp-12); padding:2px 12px;
  color:var(--text-mute); font-size: var(--fs-12);
}
.cf-gap::before,.cf-gap::after{
  content:""; flex:1; height:1px; background:var(--border-soft);
}

@media (max-width:720px){
  .cf-day{ grid-template-columns:52px minmax(0,1fr); gap:12px }
  .cf-posts .post-card{ width:100% }
}

.cal-grid{
  display: flex; flex-direction: column; gap: var(--sp-10);
}
.cal-week{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--sp-10);
}
/* Лінію між тижнями прибрано: рядки вже розділені проміжком, а п'ять
   пунктирів поперек сітки читались як частина плетива. */
.cal-week:not(:first-child){ padding-top: 10px; }
/* ── СІТКА ДНІВ, А НЕ СІТКА ЛІНІЙ ───────────────────────────────────────
   Виміряно на живому календарі: 74 елементи з рамками в одному кадрі. У
   місяці 30 днів, і кожен ніс власну лінію по колу, а всередині нього ще
   одна пунктирна — навколо кнопки «+». Разом виходило плетиво, крізь яке
   не видно того єдиного, заради чого на календар дивляться: де порожньо,
   а де вже щось стоїть.

   Форму дня тримає заливка. Порожній день тепер справді порожній —
   темніший за той, у якому щось є. Це не косметика: різницю «зайнято /
   вільно» тепер видно з відстані одним поглядом, і саме її шукає око,
   коли відкриває місяць. */
.cal-day{
  background: var(--fill-0); border: 0; border-radius: var(--radius);
  padding: 8px; display: flex; flex-direction: column; gap: var(--sp-6); min-height: 128px; transition: var(--t-fast) var(--ease);
}
/* День із постами світліший за порожній. Заповненість — головна
   інформація сітки, тож вона й отримує єдину видиму різницю. */
.cal-day.has-posts{ background: var(--fill-1); }
.cal-day:hover{ background: var(--fill-2); }
/* Форму сьогоднішнього дня тримає заливка (див. ui_rollout.css). Лінія
   звідси прибрана: вона була другою бурштиновою позначкою того самого
   дня, оголошеною в іншому файлі. */
.cal-day.drag-over{ background: var(--fill-3); box-shadow: inset 0 0 0 1.5px var(--accent-solid); }
.cal-day-head{ display: flex; align-items: baseline; justify-content: space-between; }
.cal-day-name{ font: 700 var(--fs-11)/1 var(--sans); color: var(--text-mute);letter-spacing: .04em; }
/* Назва дня в сьогодні не бурштинова: слово «Сьогодні» нижче вже
   називає це прямо, а колір дії на дні читається як заклик натиснути. */
.cal-day.today .cal-day-name{ color: var(--text) }
.cal-day-date{ font: 700 var(--fs-15)/1 var(--sans); color: var(--text); }
/* Число сьогодні — просто число, без кружка. Бурштиновий кружок був
   найпомітнішим предметом екрана й позначав ним дату, тобто не дію. */
.cal-day.today .cal-day-date{ color: var(--text) }
/* 🛑 Слово стоїть у РОЗМІТЦІ, а не в `content: attr(...)`. Спершу я поклав
   його в атрибут — і воно лишилось українським в англійському застосунку:
   перекладач ходить по текстових вузлах, а значення атрибута текстовим
   вузлом не є. Правило те саме, що з капсами в nav.js: те, чого немає в
   DOM як тексту, не лагодиться шаром, який працює з текстом. */
.cal-today-lab{
  font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute);
}
.cal-today-lab::before{ content: "·"; margin: 0 4px; opacity: .6 }
.cal-day-body{ display: flex; flex-direction: column; gap: var(--sp-6); flex: 1; min-height: 32px; max-height: 176px; overflow-y: auto; }
/* ── «+» З'ЯВЛЯЄТЬСЯ, А НЕ СТОЇТЬ ЗАВЖДИ ────────────────────────────────
   Сорок дві пунктирні рамки з п'ятдесяти в кадрі — це були саме вони: по
   кнопці «+» у кожному дні, і кожна обведена. Тридцять запрошень додати
   пост, показаних одночасно, не запрошують нікого: вони просто шум, крізь
   який доводиться шукати справжні пости.

   Кнопка лишається на місці й лишається клікабельною завжди — міняється
   тільки видимість. Вона проявляється, коли курсор у дні або коли на неї
   перейшли клавіатурою; на дотику (де наведення не буває) видима одразу,
   інакше на телефоні додати пост стало б неможливо. */
.cal-day-add{
  border: 0; background: transparent; color: var(--text-mute);
  border-radius: var(--radius-sm); padding: 6px; font: 600 var(--fs-11)/1 var(--sans); cursor: pointer;
  opacity: 0; transition: opacity var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.cal-day:hover .cal-day-add,
.cal-day-add:focus-visible{ opacity: 1; }
.cal-day-add:hover{ color: var(--text); background: var(--fill-2); }
@media (hover: none){ .cal-day-add{ opacity: .7; } }

/* Рамка навколо картки поста прибрана, риска зліва лишилась: вона
   кольорова й несе СТАТУС, тобто єдина лінія тут щось означає. Решта
   периметра означала лише «це картка», що заливка вже сказала. */
.post-card{
  background: var(--panel-2); border: 0; border-radius: var(--radius-sm);
  padding: 8px 9px; cursor: pointer; transition: var(--t-fast) var(--ease); border-left: 3px solid var(--text-mute);
}
.post-card:hover{ transform: translateY(-2px); box-shadow: var(--shadow-2); }
.post-card .pc-time{ font: 700 var(--fs-10)/1 var(--mono); color: var(--text-mute); }
.post-card .pc-desc{ font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text); margin: 4px 0; word-break: break-word; }
.post-card .pc-foot{ display: flex; align-items: center; gap: var(--sp-6); }
.post-card .pc-nets{ display: flex; gap: 3px; }
.post-card .pc-nets span{ font-size:  var(--fs-11); }
.post-card .pc-status{ margin-left: auto; font: 700 var(--fs-11)/1 var(--sans); }
.post-card .pc-overdue{ font-size:  var(--fs-10); padding: 1px 5px; }
.post-card[data-status="draft"]{ border-left-color: var(--text-mute); }
.post-card[data-status="pending_approval"]{ border-left-color: var(--warn); }
.post-card[data-status="scheduled"]{ border-left-color: var(--info); }
.post-card[data-status="publishing"]{ border-left-color: var(--accent); animation: pulse-dot 1.1s infinite; }
.post-card[data-status="published"]{ border-left-color: var(--ok); }
.post-card[data-status="failed"]{ border-left-color: var(--danger); }
.post-card[data-status="cancelled"]{ border-left-color: var(--text-mute); opacity: .55; }
.post-card[data-status="cancelled"] .pc-desc{ text-decoration: line-through; }
.post-card[data-status="draft"] .pc-status{ color: var(--text-mute); }
.post-card[data-status="pending_approval"] .pc-status{ color: var(--warn); }
.post-card[data-status="scheduled"] .pc-status{ color: var(--info); }
.post-card[data-status="publishing"] .pc-status{ color: var(--accent); }
.post-card[data-status="published"] .pc-status{ color: var(--ok); }
.post-card[data-status="failed"] .pc-status{ color: var(--danger); }
.post-card.dragging{ opacity: .4; }

.cal-toast{
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(8px);
  background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--card-shadow); color: var(--text); font: 600 var(--fs-12)/1.4 var(--sans);
  padding: 10px 16px; z-index: 9999; opacity: 0; pointer-events: none;
  transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease-out-back);
}
.cal-toast.show{ opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto; }
.cal-toast.error{ color: var(--danger); border-color: rgba(var(--danger-rgb),.35); }

.cal-quickform{
  background: var(--bg-soft); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px; display: flex; flex-direction: column; gap: var(--sp-6);
}
.cal-quickform textarea{
  width: 100%; min-height: 50px; resize: vertical; background: var(--panel); border: 1px solid var(--border);
  color: var(--text); border-radius: var(--radius-xs); padding: 6px 8px; font: 500 var(--fs-12)/1.4 var(--sans);
}
.cal-quickform textarea:focus{ outline: none; border-color: var(--accent); }
.cal-quickform-row{ display: flex; gap: var(--sp-6); align-items: center; flex-wrap: wrap; }
.cal-quickform input[type="time"]{
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: var(--radius-xs); padding: 4px 6px; font: 500 var(--fs-11)/1 var(--mono);
}
.cal-qf-nets{ display: flex; gap: var(--sp-6); flex-wrap: wrap; }
.cal-qf-net{ font: 600 var(--fs-11)/1 var(--sans); display: flex; align-items: center; gap: var(--sp-4); color: var(--text-dim); cursor: pointer; }
.cal-quickform-actions{ display: flex; gap: var(--sp-6); justify-content: flex-end; }

/* ── МІСЯЦЬ ЛИШАЄТЬСЯ МІСЯЦЕМ ───────────────────────────────────────────
   Раніше нижче 980px сітка ставала одним стовпчиком: 42 дні поспіль,
   3681px заввишки (виміряно на 715px). Це вже не календар — це список,
   у якому зникає єдине, заради чого відкривають місяць: форма зайнятості
   тижня. Стовпчиків лишається сім на будь-якій ширині, звужується вміст
   клітинки. Список днів у застосунку вже є — це вкладка «Потік». */
@media (max-width: 980px){
  .cal-grid{ gap: var(--sp-6) }
  .cal-week{ gap: var(--sp-6) }
  .cal-day{ min-height: 92px; padding: 6px; gap: var(--sp-4) }
  .cal-day-name{ display: none }          /* назва дня вже стоїть у шапці */
  .cal-day-body{ max-height: none; overflow: hidden }
  .cal-day-add{ opacity: 0 }              /* «+» звільняє два рядки під чипи */
  .cal-day:hover .cal-day-add,
  .cal-day:focus-within .cal-day-add{ opacity: 1 }
  .pcc-desc{ display: none }              /* лишається час — «коли», не «що» */
  .pc-chip{ padding: var(--sp-1) var(--sp-2) }
}
/* Нижче 640px підпис не потрібен навіть у часі: клітинка 78px завширшки
   вміщає «09:00» рівно, і це вже межа. Далі — крапка на день. */
@media (max-width: 640px){
  .cal-day{ min-height: 64px }
  .cal-day-date{ font-size: var(--fs-11) }
  .pc-chip{ width: 6px; height: 6px; padding: 0; border-radius: 50%;
            background: var(--fill-3) }
  .pcc-time{ display: none }
  .cal-day-body{ flex-direction: row; flex-wrap: wrap; gap: 3px;
                 align-items: center }
  .cal-more{ padding: 0; font-size: var(--fs-10) }
}

/* ── Analytics ────────────────────────────────────────────────────────── */
.ana-connect-notice{
  background: var(--panel); border: 1px dashed var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin-bottom: 16px; color: var(--text-dim); font-size:  var(--fs-13);
}
.ana-toolbar{
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12); flex-wrap: wrap;
  margin-bottom: 8px;
}
.ana-er-legend{ display: flex; gap: var(--sp-8); flex-wrap: wrap; }
.ana-refresh-error{
  color: var(--danger); font: 500 var(--fs-12)/1.5 var(--sans);
  background: rgba(var(--danger-rgb),.08); border: 1px solid rgba(var(--danger-rgb),.3);
  border-radius: var(--radius-sm); padding: 8px 12px; margin-bottom: 10px;
}
.ana-refresh-error[hidden]{ display: none; }
.ana-section{ margin-top: 26px; }
.ana-net-shead{ display: flex; align-items: center; gap: var(--sp-8); }
.ana-net-shead:empty{ display: none; }

.ana-er-legend{
  display: flex; align-items: center; gap: var(--sp-8); flex-wrap: wrap;
  margin: 14px 0 4px;
}
.ana-er-legend-lbl{ font: 700 var(--fs-11)/1 var(--sans); color: var(--text-mute);letter-spacing: .04em; margin-right: 2px; }

.ana-scrape-explainer{
  font: 500 var(--fs-12)/1.55 var(--sans); color: var(--text-dim);
  max-width: 720px; margin: 8px 0 12px;
}

.ana-li-limit-card{ padding: 14px 16px; margin-top: 14px; }
.ana-li-limit-h{ display: flex; align-items: center; gap: var(--sp-8); font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); margin-bottom: 8px; }
.ana-li-limit-list{ margin: 0; padding-left: 18px; font: 500 var(--fs-12)/1.6 var(--sans); color: var(--text-dim); }
.ana-li-limit-list li{ margin-bottom: 4px; }

.ana-kpis{ grid-template-columns: repeat(4, 1fr); }
.ana-best-time{ margin-top: 10px; font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }
.ana-best-time[hidden]{ display: none; }
@media (max-width: 640px){
  .ana-kpis{ grid-template-columns: repeat(2, 1fr); }
}

.ana-chart-panel{ min-height: 200px; }

/* Перемикач параметра над головним графіком */
.ana-chart-chips{ display: flex; gap: var(--sp-8); flex-wrap: wrap; margin: 12px 0 10px; }
/* 🛑 ТУТ БУВ ДРУГИЙ, СТАРІШИЙ ЧИП. Правило описувало власний вигляд
   (вага 700, своя рамка, градієнт на активному) — написане до того, як у
   продукті зʼявився `.chip`. Відтоді воно було МЕРТВИМ: skin.css
   вантажився пізніше й перекривав його цілком, тож на екрані ці чипи
   виглядали як усі інші.

   Дізнались про це, коли `.chip` звели в одне правило: skin.css зник, і
   стара вага 700 раптом ожила. Мертвий код, який чекає нагоди ожити, —
   гірший за видалений, бо виглядає діючим.

   Лишається тільки те, чого система не дає: цей чип живе в групі
   `.ana-chart-chips` (див. ui_rollout.css), яка робить із них
   сегментований контрол. */
.ana-chart-chip{ cursor: pointer; }

/* Головний лінійний графік — чистий SVG, без бібліотек */
.ana-linechart-wrap{ position: relative; }
/* height:auto keeps the viewBox aspect intact. The old fixed 260px height
   combined with width:100% forced a non-uniform stretch (the SVG carried
   preserveAspectRatio="none"), which thinned the stroke and squashed every
   label horizontally. */
.ana-line-svg{ width: 100%; height: auto; display: block; overflow: visible; }
.ana-grid-line{ stroke: var(--border-soft); stroke-width: 1; }
.ana-grid-label{ font: 600 var(--fs-10)/1 var(--mono); fill: var(--text-mute); }
.ana-x-label{ font: 600 var(--fs-10)/1 var(--mono); fill: var(--text-mute); }
.ana-chart-guide{ stroke: var(--border-hover); stroke-width: 1; stroke-dasharray: 3 3; pointer-events: none; }
.ana-line-dot{ fill: var(--panel); stroke-width: 1.6; }
.ana-line-hoverdot{ fill: var(--text); stroke: var(--panel); stroke-width: 2; pointer-events: none; }
.ana-line-axis{ display: flex; justify-content: space-between; font: 500 var(--fs-11)/1 var(--mono); color: var(--text-mute); margin-top: 8px; }

/* Headline above the plot: current value, movement over the window, and an
   explicit note when some days simply have no snapshot. */
.ana-chart-summary{ display: flex; align-items: baseline; gap: var(--sp-10); flex-wrap: wrap; margin: 2px 0 10px; }
.acs-val{ font: 800 22px/1 var(--sans); color: var(--text); letter-spacing: -.01em; }
.acs-delta{ font: 700 var(--fs-12)/1 var(--mono); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border); }
.acs-delta.up{ color: var(--ok); border-color: rgba(var(--ok-rgb),.3); background: rgba(var(--ok-rgb),.08); }
.acs-delta.down{ color: var(--danger); border-color: rgba(var(--danger-rgb),.3); background: rgba(var(--danger-rgb),.08); }
.acs-delta.flat{ color: var(--text-mute); background: var(--panel-2); }
.acs-period, .acs-gap{ font: 600 var(--fs-11)/1 var(--sans); color: var(--text-mute); }
.acs-gap{ cursor: help; }
.ana-line-tooltip{
  position: absolute; transform: translate(-50%, -100%); pointer-events: none;
  background: var(--panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 6px 10px; font: 600 var(--fs-11)/1.3 var(--sans); color: var(--text); white-space: nowrap;
  box-shadow: var(--shadow-2); z-index: 5;
}
.ana-line-tooltip b{ display: block; font-size:  var(--fs-13); }
.ana-line-tooltip span{ display: block; color: var(--text-mute); font-weight: 600; font-size:  var(--fs-10); margin-top: 1px; }

/* Сітка додаткових графіків під головним */
.ana-charts-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-16); margin-top: 16px; }
@media (max-width: 860px){ .ana-charts-grid{ grid-template-columns: 1fr; } }
.ana-chart-card{ min-height: 180px; }
.ana-chart-card-h{ font: 700 var(--fs-12)/1.3 var(--sans); color: var(--text); margin-bottom: 12px; }

/* Теплокарта «Найкращий час» */
.ana-heat-wrap{ display: flex; flex-direction: column; gap: 3px; }
.ana-heat-row{ display: flex; align-items: center; gap: var(--sp-6); }
.ana-heat-daylbl{ width: 26px; flex: none; font: 700 var(--fs-10)/1 var(--mono); color: var(--text-mute); text-align: right; }
.ana-heat-cells{ display: grid; grid-template-columns: repeat(24, 1fr); gap: var(--sp-2); flex: 1; }
.ana-heat-cell{ aspect-ratio: 1; border-radius: 2px; background: var(--ok); cursor: default; }
.ana-heat-empty{ background: var(--border-soft); opacity: .4; }
.ana-heat-hourlbls{ position: relative; height: 14px; margin-top: 6px; margin-left: 32px; font: 500 var(--fs-10)/1 var(--mono); color: var(--text-mute); }
.ana-heat-hourlbls span{ position: absolute; transform: translateX(-50%); }

/* «Ефективність постів» — горизонтальний бар-чарт */
.ana-posteff-list{ display: flex; flex-direction: column; gap: var(--sp-10); }
.ana-posteff-row{ display: grid; grid-template-columns: 150px 1fr auto; align-items: center; gap: var(--sp-10); }
.ana-posteff-lbl{ display: flex; align-items: center; gap: var(--sp-6); overflow: hidden; }
.ana-posteff-desc{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-posteff-bartrack{ height: 10px; border-radius: var(--radius-xs); background: var(--panel-2); overflow: hidden; }
/* Смуга значення: один тон, а не градієнт із двох платформ. Довжина
   смуги вже несе величину — колір мав нести лише «це наше число». */
.ana-posteff-bar{ height: 100%; border-radius: var(--radius-xs); background: var(--chart-1); min-width: 4px; }
@media (max-width: 560px){ .ana-posteff-row{ grid-template-columns: 110px 1fr auto; } }

/* «Розбивка взаємодій» — стек-бари по постах */
.ana-eng-legend{ display: flex; gap: var(--sp-14); flex-wrap: wrap; margin-bottom: 12px; font: 600 var(--fs-11)/1 var(--sans); color: var(--text-dim); }
.ana-eng-legend span{ display: inline-flex; align-items: center; gap: var(--sp-6); }
.ana-eng-legend .dot{ width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.ana-eng-list{ display: flex; flex-direction: column; gap: 9px; }
.ana-eng-row{ display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: var(--sp-10); }
.ana-eng-desc{ font: 600 var(--fs-12)/1.3 var(--sans); color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ana-eng-stack{ display: flex; height: 10px; border-radius: var(--radius-xs); overflow: hidden; background: var(--panel-2); }
.ana-eng-stack span{ display: block; height: 100%; }
.ana-eng-total{ font: 700 var(--fs-11)/1 var(--mono); color: var(--text-mute); }

.ana-table-wrap{ overflow-x: auto; border: 1px solid var(--border-soft); border-radius: var(--radius); }
.ana-table{ width: 100%; min-width: 640px; border-collapse: collapse; font-size:  var(--fs-12); }
.ana-table th, .ana-table td{ padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.ana-table th{ color: var(--text-mute); font: 700 var(--fs-11)/1 var(--sans); background: var(--panel-2); }
.ana-table td.ana-desc{ white-space: normal; max-width: 320px; color: var(--text); font-weight: 600; }
.ana-table tr:last-child td{ border-bottom: none; }
.ana-table a.ana-permalink{ color: var(--link); text-decoration: none; font-weight: 600; }
.ana-table a.ana-permalink:hover{ text-decoration: underline; }

.ana-insights-panel{ padding: 16px; }
.ana-insights-head{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-10); flex-wrap: wrap; margin-bottom: 10px; }
.ana-insights-updated{ font: 600 var(--fs-11)/1 var(--mono); color: var(--text-mute); }
.ana-insights-body.md-body h1, .ana-insights-body.md-body h2, .ana-insights-body.md-body h3{ margin: 14px 0 8px; font: 700 var(--fs-15)/1.3 var(--sans); }
.ana-insights-body.md-body h1:first-child, .ana-insights-body.md-body h2:first-child, .ana-insights-body.md-body h3:first-child{ margin-top: 0; }
.ana-insights-body.md-body p{ margin: 0 0 10px; font-size:  var(--fs-13); line-height: 1.6; color: var(--text-dim); }
.ana-insights-body.md-body ul, .ana-insights-body.md-body ol{ margin: 0 0 10px; padding-left: 20px; font-size:  var(--fs-13); color: var(--text-dim); }
.ana-insights-body.md-body li{ margin-bottom: 4px; }
.ana-insights-body.md-body strong{ color: var(--text); }
.ana-insights-body.md-body code{ font:var(--fs-12)/1.4 var(--mono); background: var(--code-bg); padding: 1px 5px; border-radius: var(--radius-xs); }

@media (max-width: 640px){
  .ana-toolbar{ align-items: flex-start; }
}


/* ═══ АВТОПІЛОТ ══════════════════════════════════════════════════════════
   Розділ зібраний з рецептів теми (t-card, t-row, t-num, t-lab). Власного
   тут рівно те, чого в темі немає: розкладка трьох блоків і повзунок.
   Це і є перевірка, що рецепти справді працюють на новому екрані, а не
   лише на тому, під який їх писали. */
.ap-page{ display: flex; flex-direction: column; gap: var(--sp-8) }

/* ── стан ─────────────────────────────────────────────────────────────── */
.ap-state{ display: flex; align-items: center; justify-content: space-between; gap: var(--sp-12) }
.ap-state-main{ display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0 }
/* Число й слово на одній лінії: «14 днів» читається як одна величина, а
   не як число й підпис під ним. */
.ap-runway{ display: flex; align-items: baseline; gap: var(--sp-2) }
.ap-runway span{ font: 500 var(--fs-15)/1 var(--sans); color: var(--text-dim) }
/* Мало днів — попередження, а не аварія: нічого не зламалось, просто скоро
   стрічка замовкне. */
.ap-runway .warn{ color: var(--warn) }
.ap-state-act{ flex: none }

/* ── план ─────────────────────────────────────────────────────────────── */
.ap-row-head{ display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-6); margin-bottom: var(--sp-6) }
.ap-fields{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--sp-8) var(--sp-12) }
.ap-field{ display: flex; flex-direction: column; gap: var(--sp-3); min-width: 0 }
.ap-field-wide{ grid-column: 1 / -1 }
.ap-seg{ align-self: start }

/* Повзунок. Зона дотику 34px при видимій колії 4px — палець цілиться в
   ручку, а не в лінію; без цього повзунок на дотику просто не береться. */
.ap-slider{ display: flex; align-items: center; gap: var(--sp-6) }
.ap-slider input[type="range"]{
  flex: 1; min-width: 0; height: 34px; margin: 0;
  appearance: none; background: transparent; cursor: pointer;
}
.ap-slider input[type="range"]::-webkit-slider-runnable-track{
  height: 4px; border-radius: var(--r-mark); background: var(--fill-2);
}
.ap-slider input[type="range"]::-webkit-slider-thumb{
  appearance: none; width: 16px; height: 16px; margin-top: -6px;
  border-radius: var(--r-chip); background: var(--text); border: 0;
}
.ap-slider input[type="range"]:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px }
.ap-slider-out{
  flex: none; min-width: 28px; text-align: right;
  font: 700 var(--fs-15)/1 var(--mono); color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* Вимкнена мережа: видно, що вона є, і видно, що нею скористатись не можна. */
.ap-net.off{ opacity: .45; cursor: not-allowed }

/* ── горизонт ─────────────────────────────────────────────────────────────
   Смужка днів між налаштуваннями й ціною — рівно там, де людина щойно
   зрушила повзунок і ще не натиснула. Порядок читання: скільки постів →
   куди вони лягають → скільки це коштує.

   День — поділка, а не квадратик із датою: тридцять дат тут читати ніхто
   не буде, а от нерівність «густо на початку, порожньо в кінці» видно
   однією фігурою. Тому висота однакова, а різницю несе заливка. */
.ap-horizon{ margin-top: var(--sp-8); display: flex; flex-direction: column;
  gap: var(--sp-4) }
.ap-hz-head{ display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sp-6) }
.ap-hz-strip{ display: flex; gap: 2px; align-items: stretch }
.ap-hz-d{
  flex: 1 1 0; min-width: 3px; height: 22px; border-radius: var(--radius-xs);
  /* 🛑 НЕ --fill-1: смужка лежить на картці --fill-1, і це був той самий
     колір — вільна поділка не існувала, видно було лише суцільну плашку.
     Порожнє малюється заглибиною, а не світлом (див. --well). */
  background: var(--well);
}
/* Зайнятий день — та сама шкала яскравості, що в чипах календаря:
   світліше означає «тут уже щось стоїть», і означає це в обох місцях
   однаково. Колір для цього не потрібен. */
.ap-hz-d.busy{ background: var(--fill-3) }
.ap-horizon p{ margin: 0 }
.ap-horizon .warn{ color: var(--warn) }

/* ── ціна ─────────────────────────────────────────────────────────────── */
.ap-price{ margin-top: var(--sp-8); padding-top: var(--sp-8);
  border-top: 1px solid var(--line) }
.ap-price-row{ display: flex; align-items: baseline; gap: var(--sp-4); flex-wrap: wrap }
.ap-price .warn{ color: var(--warn) }

/* ── підказка ─────────────────────────────────────────────────────────── */
.ap-tip-card{ display: flex; flex-direction: column; gap: var(--sp-2) }
.ap-tip-card p{ margin: 0 }
.ap-log-note{ margin: var(--sp-6) 0 0 }

@media (max-width: 760px){
  .ap-fields{ grid-template-columns: minmax(0, 1fr) }
  .ap-state{ flex-direction: column; align-items: flex-start; gap: var(--sp-8) }
  .ap-state-act{ align-self: stretch }
  .ap-state-act .btn{ width: 100% }
}

/* ── вільний слот черги ─────────────────────────────────────────────────
   Слот це «тут щось буде», пост — «ось що буде». Різна ФОРМА розрізняє їх
   з відстані: пост — суцільна картка з вмістом, слот — пунктирний рядок
   із самим часом. Дрібні написи цього не робили: щоб відрізнити, треба
   було вчитуватись.

   Пунктир тут доречний рівно тому, чому він недоречний у порожніх станах:
   він означає «місце, яке ще заповниться», і це буквально так. */
.cal-slot{
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-5); border-radius: var(--r-chip);
  border: 1px dashed rgba(255,255,255,.13);
  font: 600 var(--fs-11)/1 var(--mono); color: var(--text-mute);
}
.cal-slot + .cal-slot{ margin-top: var(--sp-1) }
.cal-slot-time{ font-variant-numeric: tabular-nums }
/* Крапка перед часом — той самий маркер стану, що на картках постів,
   тільки порожній: обіцянка ще не факт. */
.cal-slot::before{
  content: ""; flex: none; width: 7px; height: 7px; border-radius: var(--r-mark);
  border: 1px solid var(--line-2);
}
.cf-posts .cal-slot{ margin-bottom: var(--sp-1) }

/* ═══ МІСЯЦЬ: МИНУЛЕ СТИСНУТЕ, МАЙБУТНЄ ПОВНОРОЗМІРНЕ ═════════════════════
   Виміряно: у серпні 4 з 6 рядків — тижні, що минули, і вони займали
   466px із 804 (58% сітки). Поточний тиждень через це стояв рівно на
   згині, а останній — під ним. Тобто місяць показував переважно те, чого
   вже не змінити, і ховав те, що ще можна.

   Минуле не викидаємо: місяць має показувати місяць, і дірка на початку
   сітки зламала б сам вигляд. Але висота йому не належить. */
.cal-week.past .cal-day{
  min-height: 46px;
  background: var(--fill-0);
}
/* Дні минулого тижня приглушені як група, а не кожен окремо: це історія,
   і читати її по одному дню немає потреби. */
.cal-week.past{ opacity: .62 }
.cal-week.past:hover{ opacity: 1 }
/* Тіло дня в минулому тижні не розтягується: пости там показуються
   компактно, бо питання «що саме вийшло» ставлять не в сітці місяця, а в
   розділі «Опубліковане». */
/* 🛑 `min-height: 0` тут головніше за `max-height`. Порожнє тіло дня
   тримало 32px мінімальної висоти — виміряно на живій сторінці, це
   128px на чотири минулі рядки, тобто чверть усього, що ця правка
   намагається заощадити. Порожнє місце під нічим не потребує
   мінімальної висоти. */
.cal-week.past .cal-day-body{
  min-height: 0; max-height: 20px; overflow: hidden; gap: var(--sp-1);
}
/* Проміжок між минулими тижнями менший: 20px потрібні, щоб відділяти
   тижні з роботою; між рядками історії вистачає меншого, і це ще
   36px, які дістаються майбутньому. */
.cal-week.past + .cal-week.past{ margin-top: -12px }
.cal-week.past + .cal-week:not(.past){ margin-top: 4px }
/* Замість карток — рядок крапок: скільки постів того дня вийшло, видно
   периферійним зором і без читання. */
.cal-week.past .post-card{
  width: 6px; height: 6px; min-height: 0; padding: 0; border-radius: 50%;
  background: var(--fill-3); overflow: hidden; text-indent: -999px;
  flex: none;
}
.cal-week.past .cal-day-body{ flex-direction: row; align-items: center }
.cal-week.past .cal-day-date{ font-size: var(--fs-12) }
.cal-week.past .cal-day-name{ display: none }

/* Минулий день не приймає нових постів — і не вдає, що приймає. */
.cal-day.past .cal-day-add{ display: none }


/* ═══ ЧИП ПОСТА В КЛІТИНЦІ МІСЯЦЯ ════════════════════════════════════════
   Повна картка робила клітинку з двома постами заввишки 253px, а рядок
   сітки тягнеться за найвищою клітинкою — один зайнятий день роздував
   увесь тиждень. Тут час і короткий підпис; решту питань ставлять у
   потоці й на картці. */
.pc-chip{
  display: flex; align-items: baseline; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border-radius: var(--r-chip);
  background: var(--fill-1); cursor: pointer; min-height: 0;
  transition: background var(--dur-fast) var(--ease);
}
.pc-chip:hover{ background: var(--fill-2) }
.pcc-time{
  flex: none; font: 700 var(--fs-10)/1.3 var(--mono); color: var(--text-dim);
  font-variant-numeric: tabular-nums;
}
.pcc-desc{
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 var(--fs-11)/1.3 var(--sans); color: var(--text);
}
/* Стан — ЯСКРАВІСТЬ, а не колір і не підпис. П'ять станів п'ятьма
   кольорами дали б п'ять акцентів у комірці 105px; яскравість заливки
   означає «наскільки це ваша справа»: те, що чекає вас, світліше за те,
   що піде саме. */
.pc-chip[data-status="pending_approval"]{ background: var(--fill-2) }
.pc-chip[data-status="pending_approval"] .pcc-desc{ color: var(--text) }
.pc-chip[data-status="draft"]{ background: var(--fill-0) }
.pc-chip[data-status="draft"] .pcc-desc{ color: var(--text-dim) }
.pc-chip[data-status="published"]{ opacity: .7 }

/* Більше трьох постів у дні — решта за посиланням, а не нескінченна
   клітинка: висота рядка мусить лишатись передбачуваною. */
.cal-more{
  align-self: flex-start; padding: var(--sp-1) var(--sp-3);
  border: 0; background: none; cursor: pointer;
  font: 600 var(--fs-10)/1.3 var(--sans); color: var(--text-mute);
}
.cal-more:hover{ color: var(--text) }