/* ── пустое состояние ──
   Одна форма на весь продукт (scripts/blank.mjs). До неё пустота жалась в
   левый верхний угол панели, а остальные три четверти экрана оставались
   белыми: экран читался сломанным, а не пустым. Поэтому первое правило здесь
   не про красоту, а про место — блок занимает всю высоту своей панели и стоит
   в её середине.

   Рисунок нарисован линией и в том же строе, что значки продукта, и он не
   серый скелет: скелет в любом интерфейсе значит «грузится». Здесь показана
   форма будущего — как экран выглядит, когда на нём есть работа.

   Шкала своя, но в шкале продукта: заголовок 15, строка 12.5, рисунок 92 —
   он иллюстрация, а не орган управления, и мельчить ему незачем. */

.blank{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  /* Доля высоты здесь ненадёжна: у панели своя высота тоже задана долей,
     и проценты замыкаются сами на себя. Растягивает блок рост во flex,
     а число — это нижняя граница для панелей, не названных ниже. */
  flex:1 1 auto;min-height:340px;padding:44px 24px 52px;text-align:center;
}

/* Панели, в которых живёт пустота, блочные: доля высоты в них не считается,
   и блок садился в верхнюю треть, оставляя под собой пустое поле — ровно то,
   от чего мы уходили. Поэтому панель называется колонкой явно, и блок в ней
   растягивается. Перечислены они поимённо: `:has` на всё подряд дорог и
   ломает разметку там, где у пустоты есть соседи. */
.jr-feed:has(> .blank),
.gs-list:has(> .blank),
.gs-sheet:has(> .blank),
.tk-body:has(> .blank),
.bl-body:has(> .blank),
.ac-body:has(> .blank){
  display:flex;flex-direction:column;min-height:100%;
  /* Ленты держат внизу разгон для прокрутки — у журнала это треть экрана.
     Пустоте прокручиваться некуда, и разгон сталкивал её вверх. */
  padding-bottom:0;
}

.blank-art{
  display:block;width:92px;color:var(--ink-3);
}
.blank-art svg{display:block;width:100%;height:auto}

.blank>b{
  margin-top:20px;max-width:24ch;
  font-size:15px;font-weight:600;line-height:1.25;letter-spacing:-.025em;color:var(--ink);
  text-wrap:balance;
}
.blank>p{
  margin-top:7px;max-width:40ch;
  font-size:12.5px;line-height:1.55;color:var(--ink-3);
}
.blank-do{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:20px}

/* Пустота по отбору. Экран не пуст — пуст отбор, и говорить об этом во весь
   рост нечестно: рисунка нет, кегль обычный, места занято вдвое меньше. */
.blank.lite{padding:38px 24px 42px;min-height:0}
.blank.lite>b{margin-top:0;font-size:13.5px}
.blank.lite>p{font-size:12px}
.blank.lite .blank-do{margin-top:14px}

/* Появление: рисунок собирается, слова приходят следом. Пустой экран
   перерисовывается на каждый удар по строке поиска — поэтому движение
   короткое и без сдвига, иначе набор превращается в мигание. */
@media (prefers-reduced-motion:no-preference){
  .blank-art{animation:blank-in .34s var(--ease) both}
  .blank>b{animation:blank-in .3s var(--ease) .06s both}
  .blank>p{animation:blank-in .3s var(--ease) .1s both}
  .blank-do{animation:blank-in .3s var(--ease) .16s both}
  .blank.lite>b{animation-delay:0s}
}
@keyframes blank-in{from{opacity:0}to{opacity:1}}

@media (max-width:720px){
  .blank{padding:32px 18px 38px}
  .blank-art{width:78px}
  .blank-do{width:100%;flex-direction:column}
  .blank-do .btn{width:100%}
}

/* ── записка на пустой шахматке ──
   Не заглушка во весь экран: сетка с объектами, днями и часами — уже прибор,
   и прятать его нельзя. Не хватает в ней одного — того, что с ней делать.
   Записка кладётся поверх и уходит сама с первой бронью в периоде.

   Тень глубже обычной: записка лежит НА расписании, а не в нём, и это должно
   читаться с первого взгляда. */
.grid-blank{
  position:absolute;left:50%;top:50%;z-index:6;
  width:min(330px,calc(100% - 32px));
  transform:translate(-50%,-50%);
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-3);
}
.grid-blank .blank{min-height:0;padding:22px 22px 24px}
.grid-blank .blank-art{width:76px}
.grid-blank .blank>b{margin-top:15px;font-size:14px}
.grid-blank .blank>p{margin-top:6px;font-size:12px;max-width:32ch}
.grid-blank .blank-do{margin-top:16px}

@media (prefers-reduced-motion:no-preference){
  /* Записку кладут, а не проявляют: она приходит сверху и садится. */
  .grid-blank{animation:grid-blank-in .34s var(--ease) both}
}
@keyframes grid-blank-in{
  from{opacity:0;transform:translate(-50%,calc(-50% - 8px)) scale(.98)}
  to{opacity:1;transform:translate(-50%,-50%) scale(1)}
}

@media (max-width:720px){
  .grid-blank{width:min(300px,calc(100% - 24px))}
  .grid-blank .blank-art{width:64px}
  .grid-blank .blank-do{width:auto;flex-direction:row}
  .grid-blank .blank-do .btn{width:auto}
}