/* ux_calendar.css — Calendar view (wave 2): keep the week grid wide/scannable
   on big monitors, but stop the header/approvals strip from smearing edge-
   to-edge on ultra-wide screens.
   Colors: reuses existing var(--...) tokens only, no new literals. */

.cal-page{
  max-width: 1560px;
  margin: 0 auto;
}

/* On very wide viewports the 7-column week grid stretches each day cell far
   beyond what a post card needs — cap the day min-height growth and let the
   grid gap absorb extra width instead of the cells themselves ballooning. */
@media (min-width: 1600px){
  .cal-day{ max-width: 260px; margin: 0 auto; width: 100%; }
}

/* ══════════════════════════════════════════════════════════════════════
   МІСЯЧНА СІТКА (2026-08). Раніше показувалось рухоме вікно з 4 тижнів, а
   стрілки зсували його на один тиждень — місяць не збігався з жодним рядком
   і незрозуміло було, що саме ти дивишся. Тепер сітка — календарний місяць
   (js/calendar.js::viewDays), а тут — те, що з цього випливає візуально.
   ═══════════════════════════════════════════════════════════════════════ */

/* Дні сусідніх місяців, якими добиваються перший і останній тиждень. Вони
   потрібні (пост можна перетягнути на 31-ше з серпневої сітки), але не мають
   конкурувати за увагу з днями поточного місяця. */
.cal-day.other-month{ opacity: .48; background: transparent; }
.cal-day.other-month:hover{ opacity: .78; }
.cal-day.other-month .cal-day-date{ color: var(--text-mute); font-weight: 600; }

/* 1-ше число підписуємо скороченою назвою місяця — межа місяця всередині
   тижневого рядка інакше не читається. */
.cal-day-date i{ font: 700 var(--fs-10)/1 var(--sans); color: var(--text-mute); font-style: normal; }
.cal-day.today .cal-day-date i{ display: none; }   /* у кружечку «сьогодні» місця немає */

/* Гортання місяців. Новий місяць в'їжджає з того боку, куди рухається час:
   вперед — справа, назад — зліва. Рядки заходять із мікрозатримкою, щоб рух
   читався як розгортання сітки, а не як ривок цілого блока. */
@keyframes calInFromRight{ from{ opacity: 0; transform: translate3d(30px, 0, 0); } to{ opacity: 1; transform: none; } }
@keyframes calInFromLeft { from{ opacity: 0; transform: translate3d(-30px, 0, 0); } to{ opacity: 1; transform: none; } }

.cal-in-right .cal-week{ animation: calInFromRight .3s cubic-bezier(.22,.61,.36,1) both; }
.cal-in-left  .cal-week{ animation: calInFromLeft  .3s cubic-bezier(.22,.61,.36,1) both; }
.cal-in-right .cal-week:nth-child(1),
.cal-in-left  .cal-week:nth-child(1){ animation-delay: 0ms; }
.cal-in-right .cal-week:nth-child(2),
.cal-in-left  .cal-week:nth-child(2){ animation-delay: 35ms; }
.cal-in-right .cal-week:nth-child(3),
.cal-in-left  .cal-week:nth-child(3){ animation-delay: 70ms; }
.cal-in-right .cal-week:nth-child(4),
.cal-in-left  .cal-week:nth-child(4){ animation-delay: 105ms; }
.cal-in-right .cal-week:nth-child(5),
.cal-in-left  .cal-week:nth-child(5){ animation-delay: 140ms; }
.cal-in-right .cal-week:nth-child(6),
.cal-in-left  .cal-week:nth-child(6){ animation-delay: 175ms; }

/* Анімація — прикраса, а не спосіб щось повідомити: кому рух заважає, той
   отримує ту саму сітку миттєво. */
@media (prefers-reduced-motion: reduce){
  .cal-in-right .cal-week, .cal-in-left .cal-week{ animation: none; }
}

/* ══════════════════════════════════════════════════════════════════════
   КАРТКА ПОСТА В КАЛЕНДАРІ (модалка). Була пласким списком «поле: значення»
   — Опис / Медіа / Мережі / Дата й час / Результати — де опис на 900 знаків
   йшов суцільною стіною, мініатюра була 64×64, а посилання друкувалося сирим
   URL на 80 символів. Для опублікованого поста це не форма, а ПЕРЕГЛЯД:
   мережа й час у підзаголовку, текст читабельним блоком, медіа велике й
   клікабельне, результат — дія «Відкрити», а не адреса.
   ═══════════════════════════════════════════════════════════════════════ */

.modal-sub{
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap;
  margin: -2px 0 14px; font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim);
}
.modal-sub .modal-nets{ gap: var(--sp-6); }
.modal-when{ white-space: nowrap; }
.modal-upd{ margin-left: auto; font-size:  var(--fs-11); color: var(--text-mute); }

/* Опис: зберігаємо переноси рядків автора (їх з'їдав звичайний div) і не
   даємо довгому тексту виштовхати медіа та кнопки за межу екрана. */
.modal-caption{
  font: 500 var(--fs-13)/1.65 var(--sans); color: var(--text);
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: 320px; overflow-y: auto;
  padding: 12px 14px; border-radius: var(--ctl-radius-sm);
  background: var(--panel-2); border: 1px solid var(--border-soft);
}

/* Медіа в картці — не іконка поруч із текстом, а власне вміст поста. */
.modal-media img, .modal-media video{
  width: 148px; height: 148px; object-fit: cover; border-radius: var(--ctl-radius-sm);
  transition: transform .14s var(--ease), border-color .14s var(--ease);
}
.modal-media img:hover, .modal-media video:hover{
  transform: scale(1.02); border-color: var(--accent);
}

.modal-res{ display: flex; align-items: center; gap: var(--sp-8); padding: 9px 12px; border-radius: var(--ctl-radius-sm);
  background: var(--panel-2); border: 1px solid var(--border-soft);
  font: 500 var(--fs-12)/1.4 var(--sans); color: var(--text-dim); }
.modal-res b{ color: var(--text); font-weight: 700; }
.modal-res.ok{ border-left: 3px solid var(--ok, var(--accent)); }
.modal-res.bad{ border-left: 3px solid var(--danger, var(--warn)); }
.modal-res a{ margin-left: auto; display: inline-flex; align-items: center; gap: 5px;
  color: var(--accent); text-decoration: none; font-weight: 700; white-space: nowrap; }
.modal-res a:hover{ text-decoration: underline; }

/* ── Медіа на весь екран (SocialOS.UI.lightbox, ui.js) ─────────────────── */
.ui-lightbox{
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 120;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-14);
  padding: 40px 24px; background: rgba(0,0,0,.88); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  animation: uiLbIn .16s var(--ease) both;
}
.ui-lightbox[hidden]{ display: none; }
@keyframes uiLbIn{ from{ opacity: 0; } to{ opacity: 1; } }
/* Медіа масштабуємо ПО ОБОХ осях: лише max-width лишав високе вертикальне
   відео вищим за екран, і низ кадру доводилося скролити. */
.ui-lb-stage img, .ui-lb-stage video{
  display: block; max-width: min(1200px, 92vw); max-height: 82vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--ctl-radius-sm); box-shadow: 0 24px 70px rgba(0,0,0,.6);
}
.ui-lb-cap{ max-width: min(1200px, 92vw); text-align: center;
  font: 500 var(--fs-13)/1.5 var(--sans); color: rgba(255,255,255,.82); }
.ui-lb-close{
  position: absolute; top: 18px; right: 22px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.22); background: rgba(255,255,255,.08);
  color: #fff; font-size: 16px; line-height: 1; cursor: pointer;
}
.ui-lb-close:hover{ background: rgba(255,255,255,.16); }

/* ── запас черги ────────────────────────────────────────────────────────
   Стоїть під назвою розділу, ліворуч, тобто читається ДО кнопки, яка його
   лагодить. Не число-герой у 32px: це не звіт, це рядок стану, і герой на
   цьому екрані вже є — сам план. */
.cal-head-l{ display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0 }
.cal-runway{
  font: 500 var(--fs-12)/var(--lh-base) var(--sans);
  color: var(--text-mute);
}
/* Близький кінець черги — попередження, а не аварія: нічого не зламалось,
   просто скоро нічого не вийде. Тому --warn, а не --danger. */
.cal-runway.warn{ color: var(--warn) }