/* ═══════════════════════════════════════════════════════════
   ШАХМАТКА. Приборная полоса — сигнатурный элемент.
   ═══════════════════════════════════════════════════════════ */
.work{flex:1;display:flex;min-height:0;padding:14px 20px 16px}
.cal{
  flex:1;min-width:0;display:flex;flex-direction:column;
  background:var(--card);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden;
}
/* Шапка периода светлая. Тёмной она была пробой — «календарь самый
   тёмный элемент» верно для приборной линейки ленты, но целая чёрная
   полоса поверх светлого экрана уводит продукт в чёрно-белое.
   Идея остаётся для тёмной темы. */
/* Порядок наложения задан явно, как у шапки экрана: всплывашки фильтров
   и вида растут отсюда поверх шахматки (см. styles/topbar.css). */
.cal-top{
  position:relative;z-index:25;
  display:flex;align-items:center;justify-content:space-between;
  padding:11px 14px;border-bottom:1px solid var(--rule);
}
.cal-nav{display:flex;align-items:center;gap:5px}
.ico-btn{
  width:26px;height:26px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--card);
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,box-shadow;
}
@media (hover:hover) and (pointer:fine){
  .ico-btn:hover{background:var(--sunk);color:var(--ink)}
}
.ico-btn svg{width:13px;height:13px}
.cal-when{margin:0 10px 0 6px;display:flex;flex-direction:column;gap:1px}
.cal-range{
  font-size:19px;font-weight:600;letter-spacing:-.035em;line-height:1.05;
  font-variant-numeric:tabular-nums;
}
/* Стрелки и «Сегодня» двигают один и тот же период, поэтому собраны
   в один орган управления. Раньше «Сегодня» была фишкой того же класса,
   что и подписи легенды внизу: действие выглядело как подпись. */
.period-nav{
  display:flex;align-items:stretch;flex-shrink:0;
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-sm);box-shadow:var(--sh-1);overflow:hidden;
}
.period-nav .ico-btn{
  border:none;border-radius:0;background:none;box-shadow:none;
  width:29px;height:28px;
}
.period-nav .nav-now{
  padding:0 12px;font-size:11.5px;font-weight:550;color:var(--ink-2);
  border-left:1px solid var(--rule);border-right:1px solid var(--rule);
  transition:var(--t-tap) var(--ease);transition-property:color,background-color;white-space:nowrap;
}
@media (hover:hover) and (pointer:fine){
  .period-nav button:hover{background:var(--sunk);color:var(--ink)}
}
.period-nav button:active{background:var(--rule-2)}

/* Подпись легенды внизу шахматки: знак и слово, без рамки — это пояснение,
   а не кнопка. */
.chip{
  display:inline-flex;align-items:center;gap:5px;
  font-size:10.5px;font-weight:450;color:var(--ink-3);
}
.chip i{width:7px;height:7px;border-radius:2px;display:block}
.chip.ok i{background:var(--ok)} .chip.wait i{background:var(--wait)} .chip.stop i{background:var(--stop)}
.chip.late i{background:var(--late)}
/* форма несёт режим оплаты — легенда показывает её силуэтом, а не словом */
.chip.shape i{background:var(--ink-3)}
.chip.sh-night i{width:7px;height:14px;border-radius:1.5px}
.chip.sh-hour i{width:7px;height:6px;border-radius:var(--r-pill)}
.chip.live i{background:var(--ok);box-shadow:0 0 0 1.5px var(--paper),0 0 0 3px var(--ok);border-radius:50%}
.chip.buf i{background:repeating-linear-gradient(45deg,var(--ink-3),var(--ink-3) 1.5px,transparent 1.5px,transparent 3px)}
.cal-ctl{display:flex;align-items:center;gap:8px}
.btn-sm{padding:5.5px 10px;font-size:11.5px}
/* Кнопка фильтра говорит, что шахматка неполная: счёт скрытого стоит
   прямо на ней. Без него отфильтрованный экран выглядит сломанным. */
.btn-n:empty{display:none}
.btn-n{
  margin-left:1px;min-width:15px;padding:0 4px;border-radius:var(--r-pill);
  font-size:10px;font-weight:500;letter-spacing:-.01em;
  line-height:15px;text-align:center;background:var(--accent);color:var(--accent-ink);
}
.btn-filter.has-filter{border-color:var(--ink-3);color:var(--ink)}
.sepv{width:1px;height:12px;background:var(--rule)}

.cal-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:8px 14px;border-top:1px solid var(--rule);
  background:var(--paper);flex-shrink:0;
}
.legend{display:flex;align-items:center;gap:14px}
.foot-r{display:flex;align-items:center;gap:12px}
.foot-n{font-size:10.5px;color:var(--ink-3)}
.seg-sm{padding:1.5px}
.seg-sm button{padding:3.5px 9px;font-size:10.5px}


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

   Цвета нет ни одного, различает вес чернил: нерабочий день погромче,
   рабочий со спросом потише, скорбная дата тише всех. Цвет в этом
   инструменте принадлежит статусам броней. */
.hol{
  display:inline-flex;flex-shrink:0;width:13px;height:13px;
  color:var(--ink-2);cursor:default;transition:color .12s;
}
.hol svg{width:100%;height:100%}
.hol.folk{color:var(--ink-3)}
/* Скорбная дата не говорит о спросе и звучит тише прочих. */
.hol.memory{color:var(--ink-3);opacity:.6}

/* Карточка даты при наведении. Держится в body, а не в клетке: сетка
   перерисовывается при листании, и карточка исчезала бы вместе с днём,
   над которым стоит курсор.

   Говорит делом — как день называется, рабочий он или нет, что это
   значит для цены и не начало ли это длинных выходных. Поздравление
   было тут самой крупной строкой и отвечало на вопрос, которого
   администратор не задавал. */
.hol-card{
  position:fixed;z-index:70;width:242px;overflow:hidden;
  background:var(--card);border-radius:var(--r-lg);box-shadow:var(--sh-3);
  opacity:0;transform:translateY(4px) scale(.985);pointer-events:none;
  transform-origin:top center;
  transition:opacity .13s ease, transform .17s cubic-bezier(.2,.8,.3,1);
}
.hol-card.on{opacity:1;transform:none}

.hol-top{
  position:relative;display:flex;align-items:flex-start;gap:10px;
  padding:11px 14px 10px 16px;
  border-bottom:1px solid var(--rule-2);background:var(--paper);
}
/* Кромка вместо заливки — тот же знак, которым говорит состояние
   в карточке брони и в шапке. */
.hol-top::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--ink-2);
}
.hol-top.folk::before,.hol-top.memory::before{background:var(--rule)}
/* Знак в шапке крупнее, чем в клетке: здесь он не пометка на числе,
   а лицо карточки. */
.hol-top>i{display:flex;width:22px;height:22px;flex-shrink:0;color:var(--ink-2);margin-top:1px}
.hol-top>i svg{width:100%;height:100%;stroke-width:1.5}
.hol-top.folk>i,.hol-top.memory>i{color:var(--ink-3)}
.hol-top>div{min-width:0}
.hol-top b{
  display:block;font-size:13.5px;font-weight:600;letter-spacing:-.02em;
  line-height:1.25;color:var(--ink);
}
.hol-top span{
  display:block;margin-top:3px;font-size:10px;
  letter-spacing:0;color:var(--ink-3);
}

.hol-facts{padding:4px 14px 11px 16px}
.hol-fact{display:flex;align-items:baseline;gap:8px;padding-top:8px}
.hol-fact b{font-size:11.5px;font-weight:550;letter-spacing:-.01em;color:var(--ink)}
.hol-fact span{
  flex:1;min-width:0;text-align:right;font-size:10.5px;color:var(--ink-3);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
/* Длинные выходные — главное, ради чего календарь страны здесь и нужен:
   усадьбу бронируют блоком, а не одиночной датой. Поэтому у строки
   своя черта и свой вес. */
.hol-fact.run{
  display:block;margin-top:9px;padding-top:9px;border-top:1px solid var(--rule-2);
}
.hol-fact.run b{display:block;font-size:12px;font-weight:600;color:var(--ink)}
.hol-fact.run span{
  display:block;text-align:left;margin-top:2px;
  font-size:10.5px;letter-spacing:0;color:var(--ink-2);
}

@media (prefers-reduced-motion:reduce){
  .hol-card{transition:opacity .12s ease}
  .hol-card,.hol-card.on{transform:none}
}