/* ── брони ── */
.bk{
  position:absolute;top:5px;bottom:5px;border-radius:var(--r-sm);
  padding:4px 7px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;
  cursor:pointer;transition:var(--t-tap) var(--ease);transition-property:color,background-color,box-shadow,opacity,transform;
}
@media (hover:hover) and (pointer:fine){
  .bk:hover{transform:translateY(-1.5px);box-shadow:var(--sh-3);z-index:12}
}
/* Метка гостя (SPEC §4.7) — засечка по левому краю. Цвет здесь стоит
   один, без слова: плашка бывает шириной в час, и слово выдавило бы
   имя. Он не утверждение, а указатель — «про этого гостя что-то
   помечено»; что именно, называет поповер по наведению. */
.bk.gm::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--gm);border-radius:var(--r-sm) 0 0 var(--r-sm);
}
.bk.cut-l.gm::before{border-radius:0}
.bk-t{display:flex;align-items:center;gap:5px;min-width:0}
.bk-t b{
  font-size:var(--fs-s);font-weight:500;
  letter-spacing:-.02em;white-space:nowrap;
}
.bk-name{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:-.01em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.bk-s{
  font-size:var(--fs-xs);color:var(--ink-2);opacity:.8;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3;
}
.bk .pay{width:5px;height:5px;border-radius:50%;flex-shrink:0;margin-left:auto}

/* Продолжение с прошлого периода и на следующий: прямой край и штрих
   у него. Знак тот же, что у обрезанной строки текста, — «здесь не
   начало», и он же подсказывает, что бронь надо искать левее. */
.bk.cut-l{border-top-left-radius:0;border-bottom-left-radius:0}
.bk.cut-r{border-top-right-radius:0;border-bottom-right-radius:0}
.bk.cut-l::before,.bk.cut-r::after{
  content:"";position:absolute;top:0;bottom:0;width:3px;
  background:repeating-linear-gradient(180deg,
    currentColor 0 2px,transparent 2px 5px);opacity:.3;
}
.bk.cut-l::before{left:0}
.bk.cut-r::after{right:0}
.bk.cut-l{padding-left:10px}
.bk.cut-r{padding-right:10px}

/* Одна формула на все брони и оба масштаба. Позиция и длина — в часах
   сетки, ширина периода — в --span у самой сетки. SPEC §3.4: сутки —
   частный случай часа, поэтому и координата у них общая. */
.bk{
  left:calc(var(--p) * 100% / var(--span) + 1.5px);
  width:calc(var(--len) * 100% / var(--span) - 3px);
}

.bk.ok{background:var(--ok-bg);box-shadow:inset 3px 0 0 var(--ok),0 0 0 1px var(--ok-line)}
.bk.ok .pay{background:var(--ok)}
.bk.wait{background:var(--wait-bg);box-shadow:inset 3px 0 0 var(--wait),0 0 0 1px var(--wait-line)}
.bk.wait .pay{background:var(--wait);box-shadow:0 0 0 2px var(--wait-bg),0 0 0 3px var(--wait-line)}
/* Просрочена оплата. У конкурентов жёлтый — ждём в срок, красный — срок
   вышел. Разница существенная: по первому ждёшь, по второму звонишь. */
.bk.late{
  background:var(--late-bg);
  box-shadow:inset 3px 0 0 var(--late),0 0 0 1px var(--late-line);
}
.bk.late .bk-s{color:var(--late);opacity:1}
.bk.late .bk-t b,.bk.late .bk-name{color:var(--late)}

/* Гость на объекте прямо сейчас. Затемнение слева — сколько срока прошло. */
.bk.live{background:var(--ok-bg);box-shadow:inset 3px 0 0 var(--ok),0 0 0 1px var(--ok-line)}
.bk.live::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:var(--done,0%);
  background:rgba(30,85,64,.10);pointer-events:none;
}
.bk.live .pay{background:var(--ok);box-shadow:0 0 0 3px var(--ok-bg),0 0 0 4px var(--ok)}

.bk.stop{background:var(--stop-bg);box-shadow:inset 3px 0 0 var(--stop),0 0 0 1px var(--stop-line);color:var(--ink-2)}
.bk.stop .bk-name{font-weight:500}
.bk.buf{
  background:repeating-linear-gradient(45deg,rgba(var(--ink-rgb),.055),rgba(var(--ink-rgb),.055) 1.5px,transparent 1.5px,transparent 5px);
  box-shadow:inset 0 0 0 1px rgba(var(--ink-rgb),.04);pointer-events:none;
}
/* узкие: только час начала */
/* Порог узости — свойство недельного масштаба: там час ≈ 14 px.
   На дне час ≈ 70 px, и те же три часа держат полную подпись. */
.grid:not(.day) .bk[data-len="1"],
.grid:not(.day) .bk[data-len="2"],
.grid:not(.day) .bk[data-len="3"]{padding:4px 2px;align-items:center}
.grid:not(.day) .bk[data-len="1"] .bk-t,
.grid:not(.day) .bk[data-len="2"] .bk-t,
.grid:not(.day) .bk[data-len="3"] .bk-t{justify-content:center}
.grid:not(.day) .bk[data-len="1"] .bk-s,
.grid:not(.day) .bk[data-len="2"] .bk-s,
.grid:not(.day) .bk[data-len="3"] .bk-s,
.grid:not(.day) .bk[data-len="1"] u,
.grid:not(.day) .bk[data-len="2"] u,
.grid:not(.day) .bk[data-len="3"] u{display:none}
.bk-hr u{text-decoration:none} .bk-hr em{font-style:normal}

/* Порог «только час начала» не угадан, а посчитан от ширины поля.
   Диапазон «16–20» занимает 31 px; четырёхчасовой блок даёт под текст
   ширину_поля/21 − 17 px, значит перестаёт вмещать его ниже 1010 px. */
@container (max-width: 1010px){
  .bk-hr[data-len="4"]{padding:4px 2px;align-items:center}
  .bk-hr[data-len="4"] .bk-t{justify-content:center}
  .bk-hr[data-len="4"] .bk-s,.bk-hr[data-len="4"] u{display:none}
}
@container (max-width: 810px){
  .bk-hr[data-len="5"]{padding:4px 2px;align-items:center}
  .bk-hr[data-len="5"] .bk-t{justify-content:center}
  .bk-hr[data-len="5"] .bk-s,.bk-hr[data-len="5"] u{display:none}
}


/* ── Режим оплаты виден в посадке блока ──────────────────────
   Суточная и часовая бронь лежат на одной шкале (SPEC §3.4),
   но это разные вещи: ночёвка — непрерывный отрезок через ночь,
   час — сеанс внутри дня. Разводим не цветом: цвет отдан статусу,
   и второй смысл на него вешать нельзя.

   Ночёвка занимает всю высоту строки и почти без скругления —
   читается как сплошной отрезок. Часовой сеанс сидит внутри дня
   с отбивкой и заметным радиусом — читается как вставка.

   Режим — атрибут брони, а не ресурса: одна строка может нести
   и то и другое. Именно это и показывает «Дом Сосновый».        */
.bk[data-mode="night"]{top:2px;bottom:2px;border-radius:var(--r-xs)}
.bk[data-mode="hour"]{top:10px;bottom:10px;border-radius:var(--r)}
.day .bk[data-mode="hour"]{top:10px;bottom:10px}
.bk.stop{top:2px;bottom:2px;border-radius:var(--r-xs)}

/* ── работа до заезда ──────────────────────────────────────────
   Отметка «у этой брони есть услуга, которую надо успеть приготовить»
   (SPEC §6.2). Она стоит на самой броне в шахматке, а не внутри карточки:
   купель топят полтора часа, и увидеть это в момент заезда — значит не
   успеть. Знак один на любую услугу: набор их у каждого свой, и рисовать
   по значку на купель, зал и торт нельзя.

   Форма — уголок у левого верхнего края. Он не отнимает у брони ни
   строки, ни ширины: на часовой броне в тридцать пикселей места нет ни
   на что другое, а угол виден и там. */
.bk-mark{
  flex:none;display:flex;align-items:center;justify-content:center;
  width:12px;height:12px;color:var(--ink-3);
}
.bk-mark svg{width:11px;height:11px}
/* Пора начинать — знак темнеет; срок прошёл — берёт тон просрочки.
   Цвет здесь несёт состояние, а не украшает: он же и в «Дальше сегодня». */
.bk-mark.due{color:var(--wait)}
.bk-mark.late{color:var(--late)}
/* На живой броне фон темнее — знак светлеет, чтобы остаться виден:
   отметка, которую не разглядеть, отметкой не является. */
.bk.live .bk-mark{color:var(--band-ink-3)}
.bk.live .bk-mark.late{color:var(--late)}