/* ═══════════════════════════════════════════════════════════════════════════
   МАЙСТЕР ПЛАНУ — шар вигляду
   ═══════════════════════════════════════════════════════════════════════════

   Знято з живого екрана 2026-09-07. Майстер лишався єдиним місцем
   застосунку, де на екрані стояли СИСТЕМНІ контроли браузера: сині
   галочки Windows і поля дати з власною іконкою ОС. Решта продукту вже
   говорить своєю мовою (чипи, сегменти, картки), тож майстер читався не
   як «інший розділ», а як чужа програма всередині нашої.

   🛑 ЧОМУ ЦЕ ОКРЕМИЙ ФАЙЛ, А НЕ ПРАВКА 09_manager_plan.css. Там лежить
   РОЗКЛАДКА майстра (оверлей, шапка, степер, тіло) — вона працює й
   переписувати її не треба. Тут лише вигляд, і його видно однією теч
   кою: що саме змінилось у зовнішності, без пошуку по 747 рядках. Той
   самий поділ, що вже застосований у skin.css.

   🛑 ГАЛОЧКА ЛИШАЄТЬСЯ ГАЛОЧКОЮ. Спокуса була замінити ``<input
   type=checkbox>`` на кнопки-чипи — і це переписало б два десятки
   обробників, кожен з яких читає ``.checked``. Замість цього
   ``appearance: none`` і власний малюнок: жодного рядка JS, і полагоджені
   ОДРАЗУ всі галочки майстра — мережі, формати, продукти, «генерувати
   медіа», додавання поста.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Власна галочка ────────────────────────────────────────────────────────
   Малюємо коробку самі. `appearance: none` прибирає системний віджет,
   решта — наші токени. */
.pw-shell input[type="checkbox"]{
  appearance: none; -webkit-appearance: none;
  width: 18px; height: 18px; flex: none; margin: 0;
  border: 1.5px solid var(--fill-3); border-radius: var(--r-chip);
  background: var(--bg-soft); cursor: pointer;
  display: inline-grid; place-content: center;
  transition: var(--dur-fast) var(--ease);
}
.pw-shell input[type="checkbox"]::before{
  content: ""; width: 10px; height: 10px;
  transform: scale(0); transition: var(--dur-fast) var(--ease);
  background: var(--bg);
  /* Пташка малюється маскою, а не символом: гліф «✓» різний у кожному
     шрифті й з'їжджає з центру коробки. */
  clip-path: polygon(14% 44%, 0 60%, 40% 100%, 100% 18%, 84% 4%, 38% 68%);
}
.pw-shell input[type="checkbox"]:checked{
  background: var(--grad-brand); border-color: transparent;
}
.pw-shell input[type="checkbox"]:checked::before{ transform: scale(1) }
.pw-shell input[type="checkbox"]:focus-visible{
  outline: 2px solid var(--accent); outline-offset: 2px;
}
.pw-shell input[type="checkbox"]:disabled{ opacity: .4; cursor: not-allowed }

/* ── Поля дати й часу ──────────────────────────────────────────────────────
   `color-scheme: dark` — єдиний спосіб змусити браузер намалювати ВЛАСНУ
   іконку календаря світлою. Без нього вона лишається чорною на темному
   полі, тобто невидимою. */
.pw-shell input[type="date"],
.pw-shell input[type="time"],
.pw-shell input[type="number"],
.pw-shell select{ color-scheme: dark }
:root[data-theme="light"] .pw-shell input[type="date"],
:root[data-theme="light"] .pw-shell input[type="time"],
:root[data-theme="light"] .pw-shell input[type="number"],
:root[data-theme="light"] .pw-shell select{ color-scheme: light }

.pw-date-input, .pw-time-input, .pw-num-input, .pw-text-input, .pw-select{
  border-radius: var(--r-control);
  border-color: var(--fill-2);
  padding: 9px 12px;
}

/* ── Картка вибору (мережа, формат, продукт) ───────────────────────────────
   Була сірою коробкою з системною галочкою. Стає карткою, яка ВИДНО
   обрана: підсвічена рамка й тепла заливка замість самої лише пташки. */
/* 🛑 ДВА РЯДКИ ЗАВЖДИ, і це не примха вирівнювання. Підпис-мітка стояв
   у тому ж рядку, що й назва, тож у «LinkedIn · personal» він переносився,
   а в «Facebook» — ні: сусідні картки виходили різної висоти, і сітка
   виглядала обсипаною. Сталий каркас (назва зверху, мітка знизу) робить
   усі картки однаковими незалежно від довжини назви. */
.pw-net-cb, .pw-fmt-cb{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--sp-2) var(--sp-6);
  padding: var(--sp-6) var(--sp-7);
  border-radius: var(--r-control);
  border-color: var(--fill-2);
  background: var(--panel);
  position: relative;
}
/* Мітка — власний рядок під назвою, на всю ширину картки. */
.pw-net-hint, .pw-fmt-note{ grid-column: 1 / -1; justify-self: start }
.pw-net-cb:hover:not(.disabled), .pw-fmt-cb:hover:not(.disabled){
  border-color: var(--fill-3);
  background: var(--panel-2);
}
/* 🛑 Стан «обрано» читається з ВЛАСНОЇ галочки всередині — :has() дає
   зробити це без жодного класу з JS. Там, де :has() не підтримується,
   картка просто лишається звичайною, а галочка все одно видима: деградація
   тиха й нешкідлива. */
.pw-net-cb:has(input:checked), .pw-fmt-cb:has(input:checked){
  border-color: var(--accent-t-edge);
  background: linear-gradient(180deg,
              rgba(var(--accent-rgb), .07), rgba(var(--accent-rgb), .02));
}
.pw-net-cb > span, .pw-fmt-cb > span{ display: flex; align-items: center; gap: var(--sp-3) }

/* Підпис «не підключено» був червоним моноширинним рядком і повторювався
   чотири рази поспіль — екран читався як список помилок. Насправді це не
   помилка: план складеться, і про підключення сказано нижче одним разом.
   Тому — тиха мітка, а не тривога. */
.pw-net-hint{
  font: 600 var(--fs-10)/1 var(--sans); color: var(--text-mute);
  background: var(--fill-2); border-radius: var(--r-chip);
  padding: 3px var(--sp-3); letter-spacing: .01em;
}
.pw-fmt-note{ color: var(--text-mute) }

/* ── Розділи кроку 0 ───────────────────────────────────────────────────────
   Було одинадцять рівноцінних полів однією стрічкою — щоб дійти до
   кнопки, треба прокрутити весь список, не розуміючи, де він скінчиться.
   Тепер три блоки з тихими заголовками: обсяг, зміст, як працювати. */
.pw-sec{
  display: flex; flex-direction: column; gap: var(--sp-10);
  padding: var(--sp-12);
  border: 1px solid var(--border-soft); border-radius: var(--r-card);
  background: var(--panel);
}
.pw-sec-head{
  display: flex; align-items: baseline; gap: var(--sp-6);
  padding-bottom: var(--sp-6);
  border-bottom: 1px solid var(--border-soft);
}
.pw-sec-n{
  font: 600 var(--fs-10)/1 var(--mono); color: var(--accent);
  letter-spacing: .08em; text-transform: uppercase;
}
.pw-sec-t{ font: 700 var(--fs-14)/1 var(--sans); letter-spacing: -.01em }
.pw-sec-sub{ font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute); margin-left: auto }

/* Ширину й розкладку кроку 0 задає блок «ОПИС ЛІВОРУЧ» нижче. Тут
   лишається лише типографіка підписів: два правила на один селектор у
   різних місцях файла — це рівно та пастка, коли пізніше правиш верхнє й
   не розумієш, чому нічого не змінилось. */
.pw-step0 .modal-label{
  font: 500 var(--fs-12)/1 var(--sans); color: var(--text-mute);
}

/* Стара права кнопка більше не потрібна: дія переїхала в липку панель.
   Правило лишається на випадок, якщо розмітку десь відрендерять по-старому. */
.pw-actions:empty{ display: none }

/* ── Режим роботи ──────────────────────────────────────────────────────────
   Дві картки були однакові за вагою, хоч одна з них рекомендована. */
.pw-mode-card{ align-items: flex-start; text-align: left; padding: var(--sp-10) }
.pw-mode-ic{ font-size: 20px; color: var(--text-dim) }
.pw-mode-card.active .pw-mode-ic{ color: var(--accent) }

@media (max-width: 720px){
  .pw-sticky{ align-items: stretch }
  .pw-sticky .pw-start-btn{ margin-left: 0; width: 100% }
}

/* Попередження про кредити — тепер кілька окремих вузлів (щоб словник мови
   мав короткі ключі), тож їх треба розкласти, а не лишити суцільним
   рядком. Розрахунок тихіший за суму: він пояснює число, а не сперечається
   з ним. */
.pw-warn{ display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--sp-2) var(--sp-6) }
.pw-warn-calc{ color: var(--text-mute); font-weight: 500 }

/* ══ ЕКРАНИ РЕЦЕНЗІЇ ═══════════════════════════════════════════════════════
   Знято з живого екрана: на кожній картці стояли ЧОТИРИ кнопки на всю
   ширину, одна під одною — «Схвалити», «Переробити», «Редагувати»,
   «Відхилити». На рецензії з шести постів це двадцять чотири смуги, з яких
   шість помаранчевих. Керування важило більше за те, що оцінюють, а
   рішення тут ухвалюють ПРО ТЕКСТ, не про кнопки.

   Правило просте: судять зміст — отже зміст головний, дії тихі. Головна
   дія лишається помітною, решта відступає до вторинних. */
.pw-card{
  padding: var(--sp-10) var(--sp-12);
  border-radius: var(--r-card);
  border-color: var(--fill-2);
  gap: var(--sp-6);
}
.pw-card-head{ gap: var(--sp-4) var(--sp-6) }
/* Стан переїхав у шапку: окремим рядком під датою він давав третій рівень
   там, де досить одного. */
.pw-card-state{ margin-left: auto }

.pw-card-title{ font: 700 var(--fs-15)/1.35 var(--sans); letter-spacing: -.01em }
.pw-card-concept{ font: 500 var(--fs-13)/var(--lh-read) var(--sans); color: var(--text-dim) }

/* 🛑 Дії в РЯД і по вмісту, а не смугами на всю ширину. Саме
   `flex: 1 1 auto` у core/09 робив із них чотири банери. */
.pw-card-actions{
  margin-top: var(--sp-4); padding-top: var(--sp-6);
  border-top: 1px solid var(--border-soft);
  gap: var(--sp-4);
}
/* 🛑 `width: auto` тут не зайве. У core/09 нижче 768px стоїть
   `width: 100%`, і сама лише правка `flex` його не перебиває — саме тому
   кнопки лишались смугами навіть після зміни розкладки. */
.pw-card-actions .btn{ flex: 0 0 auto; width: auto }
/* Другорядні дії — без заливки, лише текст: вони мають бути доступні, а
   не наполягати. */
.pw-card-actions .btn:not(.btn-primary){ background: none; border-color: transparent }
.pw-card-actions .btn:not(.btn-primary):hover{ background: var(--fill-2) }
/* Знищувальна дія тепер у шапці (див. ``rejectBtnHtml``): значок без
   підпису, тихий доти, доки на нього не наведуть. */
.pw-card .pw-act-reject{
  flex: none; padding: var(--sp-2); color: var(--text-mute);
  background: none; border-color: transparent;
}
.pw-card .pw-act-reject:hover{ color: var(--danger); background: var(--fill-2) }
.pw-card-state + .pw-act-reject{ margin-left: var(--sp-2) }

/* 🛑 «Відхилити» БЕЗ ``margin-left: auto``. Виміряно на живому екрані: у
   тривимірній сітці картка завширшки ~330px, і кнопка, відштовхнута
   вправо, зривалась у другий рядок сама — вийшов ряд із трьох дій і
   самотній четвертий рядок. Дії йдуть підряд, а різницю ваги несе колір,
   не позиція. */
.pw-card-actions .pw-act-reject{ color: var(--danger) }
/* Дрібніші відступи всередині картки: чотири дії мусять поміститись у
   рядок, інакше ряд знову розпадається. */
.pw-card-actions .btn{ padding-left: var(--sp-5); padding-right: var(--sp-5) }

/* Прийнята картка не потребує кольорової рамки навколо всього — досить
   смужки з боку: так у сітці видно стан, і жодна картка не «горить». */
.pw-card[data-status="approved"],
.pw-card[data-status="rejected"]{ border-color: var(--fill-2); position: relative }
.pw-card[data-status="approved"]::before,
.pw-card[data-status="rejected"]::before{
  content: ""; position: absolute; left: 0; top: var(--sp-6); bottom: var(--sp-6);
  width: 3px; border-radius: 0 var(--r-mark) var(--r-mark) 0;
}
.pw-card[data-status="approved"]::before{ background: var(--ok) }
.pw-card[data-status="rejected"]::before{ background: var(--danger) }

.pw-review-head h3{ font-size: var(--fs-18) }
.pw-plan-concept{ border-radius: var(--r-card) }

/* Межу беремо ТУ САМУ, що в core/09 (768px), а не свою: дві близькі межі
   дають смугу ширин, де половина правил уже мобільна, а половина ще ні. */
@media (max-width: 768px){
  /* На вузькому екрані смуги виправдані — палець не влучає в текстову
     кнопку. Повертаємо саме там, де це має сенс. */
  .pw-card-actions .btn{ flex: 1 1 auto; width: 100% }
  .pw-card-actions .pw-act-reject{ margin-left: 0 }
}

/* ══ КРОК 0: ОПИС ЛІВОРУЧ, ЗАМОВЛЕННЯ ПРАВОРУЧ ════════════════════════════
   🛑 Це заміна ФОРМ-ФАКТОРА, а не стилю. Крок 0 був анкетою: одинадцять
   полів наосліп і кнопка внизу — що саме замовляєш, ставало видно вже
   після оплати.

   Еталон із розвідки 2026-09-07: у зрілих інструментах, де модель щось
   генерує, ліва половина — ОПИС бажаного, права — РЕЗУЛЬТАТ (Lovable,
   v0, side-panel асистенти). Тут праворуч живе саме замовлення: скільки
   постів, на які дні лягають, з чого складаються, скільки коштують.

   Полотно ЛИПНЕ: бриф гортається, замовлення лишається на очах. Саме
   через це зникла нижня панель — вона відповідала лише на «скільки це». */
.pw-step0{
  display: grid;
  /* Бриф має СТЕЛЮ ширини: поле форми, розтягнуте на 900px, читається
     гірше за вузьке — око губить початок рядка, а чипи розповзаються по
     порожньому. 620px це ~90 символів, класична межа читабельності. */
  grid-template-columns: minmax(0, 620px) minmax(320px, 380px);
  justify-content: center;
  gap: var(--sp-14);
  max-width: 1060px; margin: 0 auto; padding-bottom: 0;
  align-items: start;
}
.pw-brief{ display: flex; flex-direction: column; gap: var(--sp-10); min-width: 0 }

.pw-canvas{
  position: sticky; top: 0;
  display: flex; flex-direction: column; gap: var(--sp-10);
  padding: var(--sp-12);
  border: 1px solid var(--fill-2); border-radius: var(--r-card);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(var(--accent-rgb), .08), transparent 60%),
    var(--panel);
}

/* Число — герой полотна: воно відповідає на перше питання людини. */
.pw-cv-top{ display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-8) }
.pw-cv-metric{ display: flex; align-items: baseline; gap: var(--sp-3); min-width: 0 }
.pw-cv-num-hero{
  font: 700 var(--fs-32)/1 var(--sans); letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}
.pw-cv-lab, .pw-cv-costlab{ font: 500 var(--fs-13)/1 var(--sans); color: var(--text-mute) }
.pw-cv-cost{
  font: 700 var(--fs-24)/1 var(--sans); color: var(--accent);
  font-variant-numeric: tabular-nums; letter-spacing: -.02em;
}
.pw-cv-cost.warn{ color: var(--warn) }
.pw-cv-free{ font: 500 var(--fs-12)/1.3 var(--sans); color: var(--text-mute) }

.pw-cv-block{ display: flex; flex-direction: column; gap: var(--sp-4) }
.pw-cv-block p{ margin: 0 }
.pw-cv-head{ display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-6) }

/* ── Горизонт ──────────────────────────────────────────────────────────────
   Дні смужкою, з номером і крапками щільності. Це НЕ розклад: точні дні
   обирає агент, і підпис під смужкою каже це прямо. */
.pw-cv-strip{
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px;
}
.pw-cv-day{
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  padding: var(--sp-2) 0 3px;
  border-radius: var(--r-chip);
  background: var(--bg-soft); border: 1px solid transparent;
  min-height: 46px;
}
.pw-cv-day.we{ background: color-mix(in oklab, var(--bg-soft) 88%, #000) }
.pw-cv-day.on{
  border-color: var(--accent-t-edge);
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), rgba(var(--accent-rgb), .03));
}
.pw-cv-wd{ font: 600 8px/1 var(--mono); color: var(--text-mute); text-transform: uppercase }
.pw-cv-num{ font: 600 var(--fs-11)/1 var(--sans); font-variant-numeric: tabular-nums }
.pw-cv-day.on .pw-cv-num{ color: var(--text) }
.pw-cv-dots{ font: 700 9px/1 var(--sans); color: var(--accent); letter-spacing: -1px; min-height: 9px }

/* ── Склад ─────────────────────────────────────────────────────────────────
   Одна смуга замість трьох чисел: пропорція читається без арифметики. */
.pw-cv-mix{ display: flex; gap: 2px; height: 8px }
.pw-cv-seg{ border-radius: var(--r-mark); min-width: 4px }
.pw-cv-video{ background: var(--accent) }
.pw-cv-image{ background: color-mix(in oklab, var(--accent) 45%, var(--fill-3)) }
.pw-cv-text{ background: var(--fill-3) }
.pw-cv-legend{ display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-6) }
.pw-cv-leg{
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font: 500 var(--fs-11)/1 var(--sans); color: var(--text-mute);
}
.pw-cv-dot{ width: 8px; height: 8px; border-radius: 2px; display: inline-block }

.pw-cv-go{
  display: flex; align-items: center; gap: var(--sp-6);
  margin-top: auto; padding-top: var(--sp-8);
  border-top: 1px solid var(--border-soft);
}
.pw-cv-go .btn{ margin-left: auto; flex: none }

.chip-sm{ padding: 3px var(--sp-4); font-size: var(--fs-11) }

/* Вузький екран: замовлення переїжджає НАГОРУ — воно важливіше за поля,
   і людина має бачити його ще до того, як почне гортати бриф. */
@media (max-width: 980px){
  .pw-step0{ grid-template-columns: minmax(0, 1fr) }
  .pw-canvas{ position: static; order: -1 }
}

/* Попередження про непідключені мережі — це НЕ помилка: план складеться,
   тексти й медіа згенеруються. Червоний абзац на пів екрана казав
   протилежне й тягнув на себе увагу, потрібну формі. Робимо його
   інформаційним: колір лишається на значку й на головній фразі. */
/* 🛑 ПОПЕРЕДЖЕННЯ — ЦЕ АБЗАЦ, А НЕ РЯД. Заради словника мови я розбив
   фразу на кілька вузлів (текст зіставляється цілком, тож довгий рядок із
   назвами мереж не мав би ключа). Але ``display: flex`` перетворив ці
   вузли на елементи ряду: між частинами речення зʼявились однакові
   проміжки, шматки почали ламатись у різних місцях, і читалось воно як
   набір уламків.

   Лікується поверненням до текстового потоку: вузли лишаються (словник
   їх бачить), а виглядають знову одним реченням. */
.pw-warn{
  display: block;
  color: var(--text-dim); font-weight: 500;
  line-height: var(--lh-read);
  background: var(--bg-soft); border-color: var(--fill-2);
  border-radius: var(--r-control); padding: var(--sp-6) var(--sp-7);
}
.pw-warn > span, .pw-warn > b{ display: inline }
.pw-warn > b{ color: var(--warn); font-weight: 600 }
.pw-warn > .svg-ic{
  color: var(--warn); display: inline-block;
  vertical-align: -2px; margin-right: var(--sp-2);
}
/* Перелік мереж усередині попередження — не «розрахунок», а підмет
   речення: тому звичайним кольором тексту. */
.pw-warn .pw-warn-calc{ color: var(--text); font-weight: 600 }

/* ══ РЕЦЕНЗІЯ СПИСКОМ ══════════════════════════════════════════════════════
   🛑 Плитка була неправильним форм-фактором, а не просто негарним. План
   на два тижні — це 10-30 позицій, які переглядають ПОСПІЛЬ; сітка з
   трьох колонок змушує водити очима зигзагом і гортати екранами, а
   висота картки стрибає від довжини тексту.

   Еталон (розвідка 2026-09-07): у планувальниках масовий перегляд і
   масові дії живуть СПИСКОМ, плитка лишається для візуального прев'ю
   стрічки. Тому тут рядки: зміст ліворуч, дії сталою колонкою праворуч. */
.pw-cards{ grid-template-columns: minmax(0, 1fr); gap: var(--sp-4) }
.pw-card{
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: start; gap: var(--sp-10);
}
.pw-card-main{ display: flex; flex-direction: column; gap: var(--sp-4); min-width: 0 }
.pw-card-side{ display: flex; align-items: center; gap: var(--sp-4) }

/* Дії більше не смуга під текстом — вони стоять збоку, тож рамка згори
   тут зайва. */
.pw-card-side .pw-card-actions{
  margin: 0; padding: 0; border: none; flex-wrap: nowrap;
}
/* Опис обрізається двома рядками: у списку важлива ОДНАКОВА висота рядка,
   інакше зникає сам сенс списку. Повний текст — у «Редагувати». */
.pw-card-concept{
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.pw-card-title{ font-size: var(--fs-14) }

@media (max-width: 768px){
  /* На вузькому дії повертаються під зміст: колонка збоку з'їла б half
     ширини рядка. */
  .pw-card{ grid-template-columns: minmax(0, 1fr) }
  .pw-card-side{ width: 100% }
  .pw-card-side .pw-card-actions{ flex-wrap: wrap; width: 100% }
}

/* 🛑 «Схвалити» в рядку — НЕ головна дія екрана. Головна тут одна:
   «Далі». Коли ж кожен рядок носив залиту бурштином кнопку, у списку з
   десяти позицій світилось десять «головних дій», і справжня губилась.

   Тому рядкова дія бере СВІЙ колір за змістом (схвалити — зелений,
   відхилити — червоний), а бурштин лишається за стадією. */
.pw-card-actions .pw-act-approve{
  background: none;
  border: 1px solid color-mix(in oklab, var(--ok) 45%, transparent);
  color: var(--ok);
  box-shadow: none;
}
.pw-card-actions .pw-act-approve:hover{
  background: color-mix(in oklab, var(--ok) 14%, transparent);
  border-color: var(--ok);
}

/* ══ КАЛЕНДАР РЕЦЕНЗІЇ ═════════════════════════════════════════════════════
   🛑 Список і календар відповідають на РІЗНІ питання, і саме тому їх два,
   а не один компроміс. Список: що ми публікуємо (тут судять текст).
   Календар: коли (тут видно, що на четвер припало три пости, а пʼятниця
   порожня). Звести їх в один вигляд означає програти обидва.

   Колонки — дні поспіль від першого до останнього, включно з порожніми:
   саме порожні й показують провали в ритмі. */
.pw-cal{
  display: grid;
  /* 104px — щоб ТИЖДЕНЬ (сім колонок) вміщався в один ряд на звичайній
     ширині: 7x120 не влазило, і останній день зривався в другий ряд сам,
     ніби він з іншого тижня. Довші плани переносяться нормально — це і є
     правильна поведінка для місяця. */
  grid-template-columns: repeat(auto-fit, minmax(104px, 1fr));
  gap: var(--sp-3);
  align-items: start;
}
.pw-cal-day{
  display: flex; flex-direction: column; gap: var(--sp-3);
  min-height: 110px; padding: var(--sp-4);
  border: 1px solid var(--border-soft); border-radius: var(--r-control);
  background: var(--panel);
  transition: var(--dur-fast) var(--ease);
}
.pw-cal-day.we{ background: var(--bg-soft) }
.pw-cal-day.empty{ border-style: dashed; opacity: .7 }
/* Ціль перетягування мусить бути ВИДИМОЮ ще до відпускання — інакше
   людина кидає навмання й дізнається результат постфактум. */
.pw-cal-day.over{
  border-color: var(--accent); border-style: solid;
  background: linear-gradient(180deg, rgba(var(--accent-rgb), .12), transparent);
}
.pw-cal-head{ display: flex; align-items: baseline; gap: var(--sp-2) }
.pw-cal-wd{ font: 600 9px/1 var(--mono); color: var(--text-mute); text-transform: uppercase }
.pw-cal-num{ font: 700 var(--fs-13)/1 var(--sans); font-variant-numeric: tabular-nums }
.pw-cal-count{
  margin-left: auto; font: 600 var(--fs-10)/1 var(--sans); color: var(--text-mute);
  background: var(--fill-2); border-radius: var(--r-pill); padding: 2px var(--sp-3);
}
.pw-cal-slots{ display: flex; flex-direction: column; gap: var(--sp-2) }

.pw-chip-post{
  /* Час і заголовок — різні за вагою рядки, тож вирівнюємо ЗВЕРХУ, а не
     по базовій лінії: інакше багаторядковий заголовок з'їжджає вбік і
     чип читається як зламаний. */
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3); border-radius: var(--r-chip);
  background: var(--panel-2); border: 1px solid var(--fill-2);
  border-left: 3px solid var(--fill-3);
  cursor: grab; min-width: 0;
}
.pw-chip-post:hover{ border-color: var(--fill-3); background: var(--fill-2) }
.pw-chip-post.dragging{ opacity: .45; cursor: grabbing }
/* Стан — смужкою зліва, як у рядку списку: одна мова на два вигляди. */
.pw-chip-post[data-status="approved"]{ border-left-color: var(--ok) }
.pw-chip-post[data-status="rejected"]{ border-left-color: var(--danger) }
.pw-chip-post[data-status="proposed"]{ border-left-color: var(--warn) }
/* Час — КНОПКА, бо його редагують просто тут. Виглядає як підпис, доки
   на нього не наведуть: інакше в кожному чипі світилась би ще одна дія. */
.pw-chip-time{
  font: 600 var(--fs-10)/1.35 var(--mono); color: var(--text-mute); flex: none;
  padding: 1px var(--sp-1) 0; margin: -1px 0 0 -2px;
  background: none; border: 1px solid transparent; border-radius: var(--r-mark);
  cursor: text;
}
.pw-chip-time:hover{ color: var(--text); background: var(--fill-2) }
.pw-chip-time:focus-visible{ outline: 2px solid var(--accent); outline-offset: 1px }
.pw-chip-time-input{
  font: 600 var(--fs-10)/1.2 var(--mono); color: var(--text);
  background: var(--bg-soft); border: 1px solid var(--accent);
  border-radius: var(--r-mark); padding: 1px var(--sp-2);
  width: 4.6em; flex: none; color-scheme: dark;
}
:root[data-theme="light"] .pw-chip-time-input{ color-scheme: light }
.pw-chip-title{
  font: 500 var(--fs-11)/1.35 var(--sans); min-width: 0;
  flex: 1 1 auto; text-align: left;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* Шпилька теж кнопка: закріпив помилково — натиснув і віддав день назад
   агенту. Закріплення без способу зняти було б вироком на весь прогін. */
.pw-chip-pin{
  margin-left: auto; color: var(--accent); flex: none; opacity: .8;
  background: none; border: none; padding: 0 1px; cursor: pointer;
  line-height: 1;
}
.pw-chip-pin:hover{ opacity: 1; color: var(--warn) }
.pw-chip-pin svg{ width: 11px; height: 11px }
.pw-cal-note{ margin: var(--sp-6) 0 0 }

.pw-view-seg{ flex: none }
.pw-view-btn .svg-ic svg{ width: 13px; height: 13px }