/* ═══════════ Дневная шахматка ═══════════
   На дне 16 часов занимают всю ширину, а не седьмую её часть:
   ~70 px на час вместо ~15. Линейка получает деление на каждый
   час, а в бронях наконец помещается состав заказа.           */
.grid{display:flex;flex-direction:column;flex:1;min-height:0;position:relative;overflow:hidden}
.grid[hidden]{display:none}
.grid-page{display:flex;flex-direction:column;flex:1;min-height:0;width:100%}
.grid-scroll{
  flex:1;min-height:0;overflow:auto;position:relative;
  overscroll-behavior:contain;scroll-snap-type:x mandatory;
  scroll-padding-left:var(--label-w);
}
.grid-scroll::-webkit-scrollbar:horizontal{height:0}

.d-scale{position:relative}
.d-hours{flex:1;display:flex;height:100%;align-items:flex-end;padding-bottom:5px}
.d-hours i{
  flex:1;position:relative;font-style:normal;padding-left:6px;
  scroll-snap-align:start;
}
.d-hours i b{
  font-size:11px;font-weight:400;
  letter-spacing:-.01em;color:var(--band-ink-3);
}
.d-hours i.maj b{color:var(--band-ink);font-weight:500}
.d-hours i::before{
  content:"";position:absolute;left:0;bottom:-5px;width:1px;height:6px;
  background:rgba(255,255,255,.16);
}
.d-hours i.maj::before{background:rgba(255,255,255,.42);height:11px}
/* получасовые деления — мельче, чтобы масштаб читался без цифр */
.d-hours i::after{
  content:"";position:absolute;left:50%;bottom:-5px;width:1px;height:3px;
  background:rgba(255,255,255,.10);
}



.d-bg{position:absolute;inset:0;display:flex;pointer-events:none}
.d-bg i{flex:1;border-right:1px solid var(--rule-2);position:relative;transition:background-color .12s}
/* вне рабочего окна — не пустота, а закрыто */
.d-bg i.off{background:repeating-linear-gradient(45deg,rgba(var(--ink-rgb),.03),rgba(var(--ink-rgb),.03) 1px,transparent 1px,transparent 6px)}
@media (hover:hover) and (pointer:fine){
  .d-bg i:not(.off):hover{background-color:rgba(var(--ink-rgb),.045);cursor:pointer}
}
.d-bg i:not(.off)::after{
  content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:15px;color:var(--ink-3);opacity:0;transition:var(--t-tap) var(--ease);transition-property:opacity;
}
.d-bg i:not(.off):hover::after{opacity:.7}
.g-filler .d-bg i::after,.g-add .d-bg i::after{content:none}
.d-hours i.off b{color:var(--band-ink-3)}
.d-hours i.off.maj b{color:var(--band-ink-2)}
.d-bg i:nth-child(4n+1){border-left:1px solid var(--rule)}
.d-bg i:last-child{border-right:none}

/* на дне строки выше: помещается имя, деньги и состав заказа */
.day .grid-body{--row-h:96px}
.bk-d{
  left:calc(var(--p) * 100% / var(--span) + 2px);
  width:calc(var(--len) * 100% / var(--span) - 4px);
  padding:8px 11px;gap:2px;justify-content:flex-start;
}
.bk-d .bk-name{font-size:var(--fs);line-height:1.3}
.bk-d .bk-s{font-size:var(--fs-s);line-height:1.35}
.bk-chips{display:flex;gap:4px;margin-top:5px;flex-wrap:wrap;overflow:hidden;height:17px}
.bk-chips i{
  font-style:normal;font-size:var(--fs-xs);line-height:15px;height:17px;
  padding:0 6px;border-radius:var(--r-xs);white-space:nowrap;
  background:rgba(255,255,255,.55);border:1px solid currentColor;opacity:.6;
}
.bk-d.buf{padding:0;display:flex;align-items:center;justify-content:center}
.bufl{font-size:var(--fs-xs);color:var(--ink-3);letter-spacing:.02em}

/* В дневном масштабе весь день и есть сегодня, контрастировать не с чем:
   планка во всю ширину читалась бы как тревожная полоса. Здесь метку
   несут плашка времени и линия. */
.day .r-day.today{background:none;box-shadow:none}
.day .d-bg i.today{background:none;box-shadow:none}