/* ═══════════ День колонками объектов ════════════════════════
   В недельной раскладке колонка — это день, и время внутри неё идёт
   порядком. В дневной день один, делить ширину между днями незачем —
   её получают объекты, а время становится настоящей шкалой: бронь
   стоит там, где начинается, и такой длины, сколько идёт.

   Окно полное, 00:00–24:00: ночёвка кончается в 12:00, и без ночных
   часов её в дне не видно.                                        */

.dc-page{display:flex;flex-direction:column;flex:1;min-height:0;background:var(--card)}

/* Колонке объекта дана своя ширина, а не доля экрана: одиннадцать долей
   превращают названия в «Дом «Со…» и сливают колонки в полосатый фон.
   Не помещается — сетка едет вбок, часовая линейка и шапка остаются. */
.dc-scroll{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.dc-sheet{min-width:100%;width:max-content}

/* ── шапка колонок ── */
.dc-top{
  display:flex;position:sticky;top:0;z-index:8;min-height:var(--dc-head-h);
  border-bottom:1px solid var(--rule);background:var(--paper);
}
/* Над часовой линейкой стоит её имя, а не дата: дата уже названа
   в шапке периода, а в пятьдесят пикселей она не влезала и наезжала
   на первую колонку. */
.dc-corner{
  width:var(--dc-rail);flex-shrink:0;
  position:sticky;left:0;z-index:2;background:var(--paper);
  display:flex;align-items:center;justify-content:center;
  font-size:11px;font-weight:500;
  color:var(--ink-3);
  border-right:1px solid var(--rule);
}
/* Шапка и сетка делят одну ширину: у шапки содержимое шире колонки —
   название с подписью, — и она тянулась по нему, а сетка оставалась
   по колонкам. Разница в треть пикселя копилась и к десятой колонке
   разводила линии на три. */
.dc-heads{display:flex;flex:1;min-width:0}
.dc-head{
  flex:1 0 var(--dc-col);min-width:0;position:relative;
  display:flex;align-items:center;gap:8px;padding:7px 10px;
  border-right:1px solid var(--rule);
}
.dc-head:last-child{border-right:none}
.dc-head .ricon{width:20px;height:20px;flex-shrink:0;color:var(--ink-3);
  display:flex;align-items:center;justify-content:center}
.dc-head .ricon svg{width:19px;height:19px}
.dc-name{display:flex;flex-direction:column;gap:2px;min-width:0}
.dc-head b{
  font-size:var(--fs-s);font-weight:600;letter-spacing:-.02em;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2;
}
/* Режим сдачи — той же тихой подписью, что на недельных карточках. */
.dc-mode{
  font-size:11px;font-weight:500;
  color:var(--ink-3);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.dc-head .r-add{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:19px;height:19px;border-radius:var(--r-sm);
  border:1px solid var(--rule);background:var(--card);color:var(--ink-3);
  opacity:0;pointer-events:none;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,opacity;
}
.dc-head .r-add svg{width:12px;height:12px}
.dc-head:hover .r-add,.dc-head:focus-within .r-add{opacity:1;pointer-events:auto}
@media (hover:hover) and (pointer:fine){
  .dc-head .r-add:hover{border-color:var(--ink-3);color:var(--ink);background:var(--sunk)}
}
.dc-head .r-add:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ── сетка суток ── */
.dc-body{display:flex;position:relative}
.dc-hours{
  width:var(--dc-rail);flex-shrink:0;position:sticky;left:0;z-index:6;
  background:var(--paper);border-right:1px solid var(--rule);
}
/* Час — деление приборной шкалы: подпись сидит на самой линии, а не
   между линиями, иначе непонятно, к какой из них она относится. */
.dc-hours i{
  display:block;height:var(--dc-hour);position:relative;
  font-size:10px;font-style:normal;font-weight:500;
  letter-spacing:-.01em;color:var(--ink-3);
  padding:2px 0 0 9px;box-sizing:border-box;
}
.dc-hours i:first-child{color:transparent}   /* полночь подписана краем сетки */
.dc-hours i::after{
  content:"";position:absolute;right:0;top:0;width:5px;height:1px;background:var(--rule);
}

.dc-grid{display:flex;flex:1;min-width:0;position:relative}
/* Граница между объектами той же силы, что у часовой линейки: волосяная
   --rule-2 при десятке колонок сливается в фон. */
.dc-col{flex:1 0 var(--dc-col);min-width:0;position:relative;border-right:1px solid var(--rule)}
.dc-col:last-child{border-right:none}
.dc-lines{position:absolute;inset:0;pointer-events:none}
.dc-lines i{
  display:block;height:var(--dc-hour);
  border-top:1px solid var(--rule-2);
}
/* Ночные часы приглушены: в них ничего не продают, но занятость видна. */
.dc-lines i.off{background:rgba(var(--ink-rgb),.018)}

/* ── брони на координатах времени ── */
/* Селектор с колонкой не для красоты: в booking.css посадка брони задана
   через `.bk[data-mode="night"]`, и без веса координата времени проигрывала
   ей — все брони липли к верху колонки. */
/* Между соседними бронями остаётся волосяной зазор: встык они читались
   одним длинным блоком, и было не видно, где кончается одна и начинается
   другая. Зазор берётся из самой карточки, а не из сетки, — время при
   этом не смещается, отрезок остаётся на своём месте. */
.dc-col .dc-bk{
  position:absolute;right:auto;
  top:calc(var(--from) * 100% + 1.5px);
  height:calc((var(--to) - var(--from)) * 100% - 3px);
  left:calc(var(--lane) * 100% / var(--lanes));
  width:calc(100% / var(--lanes));
  margin:0 3px;
  padding:5px 7px;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;gap:1px;justify-content:flex-start;
  line-height:1.3;cursor:pointer;
}
/* Подпись стоит у того края, который что-то значит. У обычной брони это
   верх — там она начинается. У пришедшей из вчера верх срезан полуночью
   и уходит за экран, зато низ — это её выезд, и подпись едет туда.
   Липкой её сделать нельзя: у карточки overflow:hidden, и она сама
   становится скроллпортом — подпись уезжала бы вниз внутри карточки. */
.dc-label{display:flex;flex-direction:column;gap:1px}
.dc-col .dc-bk.clip-t{justify-content:flex-end}
/* Бронь через все сутки: ни один край не значит ничего, подпись в середине —
   там её видно, куда бы ни была прокручена сетка. */
.dc-col .dc-bk.clip-t.clip-b{justify-content:center}
.dc-col .dc-bk .bk-t b{font-size:var(--fs-s)}
.dc-who{display:flex;align-items:center;gap:5px;min-width:0}
.dc-bk .bk-name{font-size:var(--fs-xs)}
.dc-bk .bk-s{font-size:var(--fs-xs)}
/* Срезанный край — бронь пришла из вчера или уходит в завтра. */
.dc-col .dc-bk.clip-t{border-top-left-radius:0;border-top-right-radius:0}
.dc-col .dc-bk.clip-b{border-bottom-left-radius:0;border-bottom-right-radius:0}
/* Уборка после выезда — своим блоком, штриховкой: занято, но не бронь. */
.dc-col .dc-buf{
  position:absolute;left:3px;right:3px;
  top:calc(var(--from) * 100% + 1.5px);
  height:calc((var(--to) - var(--from)) * 100% - 3px);
  border-radius:0 0 var(--r-sm) var(--r-sm);pointer-events:none;
}

/* ── сейчас ── */
.dc-now{
  position:absolute;left:0;right:0;top:calc(var(--p) * 100%);
  height:1.5px;background:var(--now);z-index:12;pointer-events:none;
}
.dc-now em{
  position:absolute;left:0;top:50%;transform:translate(-100%,-50%);
  margin-left:-4px;
  font-size:10px;font-style:normal;font-weight:500;
  letter-spacing:-.01em;line-height:1.35;white-space:nowrap;
  background:var(--now);color:var(--on-status);padding:2px 6px;border-radius:var(--r-xs);
}
.no-now .dc-now{display:none}