/* ═══════════ Неделя карточками объектов ══════════════════════
   У каждого объекта свой календарь: карточка с шапкой и своей
   неделей из семи колонок. Общей колонки названий и общей приборной
   полосы здесь нет — полоса остаётся сигнатурой ленты, а опору
   взгляду дают сами карточки. Взамен вся ширина уходит колонкам:
   на 1440 в колонке ~170 px вместо ~120, и «16:00–20:00» с именем
   и составом брони помещаются без сокращений.

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

/* Масштаб от числа объектов. У базы из трёх домов неделя помещается
   на экран и место можно тратить щедро; у базы из двадцати то же
   расстояние превращает список в бесконечную прокрутку. Ось независима
   от «Плотно/Свободно»: та задаёт кегль и зазоры, эта — сколько места
   отдать каждому объекту. */
/* Высота часа в дневной сетке и ширина часовой линейки живут здесь же:
   это тот же масштаб, только по вертикали. */
.dgrid{
  --dc-hour:calc(40px * var(--ui));
  --dc-rail:calc(52px * var(--ui));
  --dc-col:calc(152px * var(--ui));
  --dc-head-h:calc(44px * var(--ui));
}
.dg-page{
  --dg-cell-min:calc(66px * var(--ui)); --dg-card-min:calc(42px * var(--ui));
  --dg-card-pad:var(--dg-pad);
  --dg-stack:calc(11px * var(--ui)); --dg-head-h:calc(38px * var(--ui));
  --dg-scale-h:calc(4px * var(--ui));
}
.dg-page[data-scale="roomy"]{
  --dg-cell-min:calc(104px * var(--ui)); --dg-card-min:calc(50px * var(--ui));
  --dg-card-pad:calc(10px * var(--ui)) calc(10px * var(--ui));
  --dg-stack:calc(14px * var(--ui)); --dg-head-h:calc(42px * var(--ui));
  --dg-scale-h:calc(5px * var(--ui));
}
.dg-page[data-scale="dense"]{
  --dg-cell-min:calc(48px * var(--ui)); --dg-card-min:calc(34px * var(--ui));
  --dg-card-pad:calc(4px * var(--ui)) calc(6px * var(--ui));
  --dg-stack:calc(7px * var(--ui)); --dg-head-h:calc(32px * var(--ui));
  --dg-scale-h:calc(3px * var(--ui));
}

/* Карточки лежат на бумаге, а не на белом: иначе граница карточки —
   единственное, что их разделяет, и одиннадцать штук сливаются. */
.dgrid{background:var(--paper)}
.dg-scroll{scroll-snap-type:none;scroll-padding-left:0}
/* Карточка объекта и есть панель, поэтому внешняя рамка ей не нужна:
   поля вокруг сжаты до отбивки, и вся ширина уходит колонкам дня. */
[data-layout="days"] .work{padding:9px 11px 11px}
.dg-body{
  display:flex;flex-direction:column;gap:var(--dg-stack);
  padding:9px 8px 12px;
}

/* ── карточка объекта ── */
.dg-res{
  background:var(--card);border:1px solid var(--rule);
  border-radius:var(--r-lg);overflow:hidden;
}

.dg-head{
  display:flex;align-items:center;gap:9px;
  height:var(--dg-head-h);padding:0 11px 0 12px;
  border-bottom:1px solid var(--rule);
}
.dg-head .ricon{width:22px;height:22px;color:var(--ink-3);flex-shrink:0}
.dg-head .ricon svg{width:21px;height:21px}
@media (hover:hover) and (pointer:fine){
  .dg-res:hover .ricon{color:var(--ink-2)}
}
.dg-name{
  font-size:var(--fs);font-weight:600;letter-spacing:-.025em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
/* Режим — свойство объекта, а не фраза о нём: набран так же,
   как остальные служебные подписи продукта. */
.dg-sub{
  font-size:11px;font-weight:500;
  color:var(--ink-3);white-space:nowrap;flex-shrink:0;
  padding-left:1px;
}
/* Значок «i» появляется при наведении: одиннадцать постоянных значков
   подряд дали бы ту самую однотонность, от которой уводили. */
.dg-head .g-info{
  position:static;transform:none;opacity:0;flex-shrink:0;
  width:19px;height:19px;
}
.dg-res:hover .g-info,.dg-head .g-info:focus-visible{opacity:1}

/* Загрузка за неделю — полосой, а не числом: доля нужна взглядом,
   точное значение остаётся в подсказке. Счёт броней держит полосу
   при себе, иначе она висит у правого края обрывком. */
.dg-meter{
  margin-left:auto;flex-shrink:0;
  display:flex;align-items:center;gap:9px;
}
.dg-count{
  font-size:var(--fs-xs);color:var(--ink-3);white-space:nowrap;
  font-variant-numeric:tabular-nums;
}
.dg-load{
  flex-shrink:0;width:58px;height:4px;border-radius:var(--r-pill);background:var(--sunk);
}
/* Тумблер гасит только полосу: счёт броней — не загрузка. */
.no-load .dg-load{display:none}
.dg-load i{
  display:block;height:100%;border-radius:2px;
  width:calc(var(--load, 0) * 100%);background:var(--ink-2);
  opacity:calc(.35 + var(--load, 0) * .65);
  transition:width .55s cubic-bezier(.2,.8,.3,1), opacity .55s ease;
}

/* ── неделя объекта ── */
.dg-week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
.dg-col{
  display:flex;flex-direction:column;min-width:0;
  border-right:1px solid var(--rule-2);
}
.dg-col:last-child{border-right:none}
.dg-col.we{background-color:var(--off-paper)}
.no-we .dg-col.we{background-color:transparent}
/* Колонка сегодня тонирована слабее, чем плашка числа: сигнал даёт
   число, тон только держит колонку. */
.dg-col.today{background-color:rgba(184,69,63,.028)}

/* ── дата дня ── */
.dg-day{
  display:flex;align-items:center;gap:5px;
  height:calc(30px * var(--ui));padding:0 7px 0 9px;
  background:rgba(var(--ink-rgb),.022);
}

/* ── приборная шкала дня ────────────────────────────────────
   В карточной раскладке вертикаль означает порядок, а не время.
   Полоса возвращает «когда»: рабочее окно 08:00–24:00 в пропорции,
   занятые отрезки залиты. Забитый день читается сплошной полосой,
   вечерний сеанс — меткой справа, сутки — полосой целиком.

   Она же разделяет дату и брони: вторая линия рядом была бы
   повтором того, что полоса делает собой. */
.dg-scale{
  position:relative;height:var(--dg-scale-h);flex-shrink:0;
  background:rgba(var(--ink-rgb),.05);
  border-bottom:1px solid var(--rule);
}
.dg-scale i{
  position:absolute;top:0;bottom:0;
  left:calc(var(--a) * 100%);width:calc((var(--b) - var(--a)) * 100%);
  background:var(--band);opacity:.32;
}
/* Риска «сейчас» — единственное место в раскладке, где у времени
   есть положение. Светлая обводка отделяет её от заливки под ней. */
.dg-tick{
  position:absolute;top:-2px;bottom:-2px;width:1.5px;
  left:calc(var(--p) * 100%);margin-left:-.75px;
  background:var(--now);box-shadow:0 0 0 1px rgba(255,255,255,.65);
}
.no-now .dg-tick{display:none}
.dg-day .r-date{
  display:flex;align-items:baseline;gap:4px;
  width:auto;padding:0;background:none;border:0;cursor:pointer;min-width:0;
}
.dg-day .r-date b{
  font-size:11px;font-weight:500;
  color:var(--ink-3);padding:0;transition:color .13s;
}
.dg-day .r-date span{
  font-size:var(--fs-date);font-weight:500;
  color:var(--ink);letter-spacing:-.01em;line-height:1.4;
  padding:0 4px;border-radius:var(--r-sm);background:transparent;
  transition:background .13s, color .13s;
}
.dg-day .r-date u{
  font-size:9.5px;text-decoration:none;color:var(--ink-3);letter-spacing:-.01em;
}
@media (hover:hover) and (pointer:fine){
  .dg-day .r-date:hover b,.dg-day .r-date:hover u{color:var(--ink-2)}
  .dg-day .r-date:hover span{background:var(--sunk)}
}
.dg-day .r-date:focus-visible{outline:none}
.dg-day .r-date:focus-visible span{outline:2px solid var(--ink);outline-offset:1px}
/* Сегодня названо плашкой на числе — тем же приёмом, что в линейке ленты. */
.dg-col.today .r-date span{background:var(--now);color:var(--on-status);font-weight:600}
.dg-col.today .r-date b,.dg-col.today .r-date u{color:var(--ink-2)}
@media (hover:hover) and (pointer:fine){
  .dg-col.today .r-date:hover span{background:color-mix(in srgb,var(--now) 84%,var(--card))}
}
/* «Сейчас» в продукте — тонкая красная черта: она стоит в шахматке,
   на ленте брони и на смене. Здесь тот же знак — черта и время рядом,
   а не залитая плашка: плашка спорила с плашкой числа в двух шагах.
   Время встало справа, на место кнопки: у края колонки одно место. */
.dg-now{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-shrink:0;
  font-size:10.5px;font-style:normal;font-weight:500;
  letter-spacing:-.01em;line-height:1;white-space:nowrap;color:var(--now);
}
.dg-now::before{
  content:"";width:2px;height:12px;border-radius:1px;background:var(--now);
}
.no-now .dg-now{display:none}
/* Метка даты стоит при числе, а не у правого края: справа живёт время
   или кнопка добавления, и там она относилась бы к ним. */
.dg-day .hol{margin:0 auto 0 -3px;align-self:center}

.dg-day .r-add{
  position:static;margin-left:auto;flex-shrink:0;
  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;
}
.dg-day .r-add svg{width:12px;height:12px}
.dg-col:hover .r-add,.dg-day:focus-within .r-add{opacity:1;pointer-events:auto}
@media (hover:hover) and (pointer:fine){
  .dg-day .r-add:hover{border-color:var(--ink-3);color:var(--ink);background:var(--sunk)}
}
.dg-day .r-add:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ── брони в колонке ── */
.dg-cell{
  flex:1;display:flex;flex-direction:column;gap:var(--dg-gap);
  padding:var(--dg-pad-y) 6px;min-height:var(--dg-cell-min);
}
/* В ленте бронь стоит на координате шкалы, здесь — в потоке колонки.
   Класс .bk сохранён намеренно: подсказка при наведении, подсветка
   пакета и цвета статусов должны быть теми же. */
.dg-cell > .bk{
  position:relative;top:auto;bottom:auto;left:auto;width:auto;
  padding:var(--dg-card-pad);border-radius:var(--r);gap:2px;
  min-height:var(--dg-card-min);justify-content:center;line-height:1.35;
}
.dg-cell > .bk .bk-t b{font-size:var(--fs-s)}
.dg-who{display:flex;align-items:center;gap:5px;min-width:0}
.dg-who .bk-name{flex:1;min-width:0}
.dg-cell > .bk .bk-s{font-size:var(--fs-xs)}

/* Плоский край — та же бронь продолжается в соседнем дне. Заезд прижат
   к низу колонки, продолжение — к верху следующей, и через неделю
   бронь читается ступенькой, а не пунктиром. */
.dg-cell > .cont-up{
  margin-top:calc(-1 * var(--dg-pad-y));
  border-top-left-radius:0;border-top-right-radius:0;
}
.dg-cell > .cont-down{
  margin-bottom:calc(-1 * var(--dg-pad-y));
  border-bottom-left-radius:0;border-bottom-right-radius:0;
}
.dg-cell > .cont-down:not(.cont-up){margin-top:auto}
.dg-cell > .cont-up.cont-down{flex:1}
/* Сутки целиком: подпись служебная, и голос ей нужен тише имени. */
.dg-middle .bk-t b{color:var(--ink-3);font-weight:400}

/* Уборка после выезда: занято, но это не бронь — поэтому штриховка. */
.dg-cell > .dg-buf{
  height:5px;min-height:0;padding:0;margin:-3px 5px 0;
  border-radius:0 0 var(--r-sm) var(--r-sm);
}

/* Стопка в дне ограничена: сверх предела — «ещё N». Она не бронь и не
   кнопка добавления, поэтому набрана служебно и без заливки, а ведёт
   туда, где брони этого дня помещаются целиком, — в ленту дня. */
.dg-more{
  flex-shrink:0;padding:5px 7px;border-radius:var(--r);
  border:1px dashed var(--rule);background:none;
  font-size:var(--fs-xs);font-weight:550;color:var(--ink-2);
  text-align:center;cursor:pointer;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
@media (hover:hover) and (pointer:fine){
  .dg-more:hover{border-style:solid;border-color:var(--ink-3);color:var(--ink);background:var(--card)}
}
.dg-more:focus-visible{outline:2px solid var(--ink);outline-offset:1px}

/* ── пустое место в колонке ──
   Не пунктирная плашка в каждом дне: семьдесят семь плашек на экране
   превращают неделю в лист наклеек. Клетка сама зона добавления,
   «плюс» проявляется при наведении и доступен с клавиатуры.
   День, занятый сутками целиком, зоны добавления не получает вовсе. */
.dg-plus{
  flex:1 1 auto;min-height:20px;max-height:44px;
  display:grid;place-items:center;border-radius:var(--r);
  border:1px dashed transparent;color:var(--ink-3);
  opacity:0;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color,opacity;
}
.dg-plus svg{width:13px;height:13px}
.dg-col:hover .dg-plus{opacity:1;border-color:var(--rule)}
@media (hover:hover) and (pointer:fine){
  .dg-plus:hover{border-style:solid;border-color:var(--ink-3);color:var(--ink);background:var(--card)}
}
.dg-plus:focus-visible{opacity:1;outline:2px solid var(--ink);outline-offset:-2px}


/* На узком экране колонке важнее её 68 px под время, чем поля вокруг. */
@media (max-width:1120px){
  .dg-body{padding:8px 6px 12px;gap:9px}
  .dg-cell{padding:var(--dg-pad-y) 4px}
  .dg-cell > .bk{padding-inline:6px}
  .dg-day{padding:0 5px 0 7px}
}


/* В раскладке по дням знак идёт сразу за числом, до времени и кнопки. */
.dg-day .hol{margin-left:4px}