/* ── строки ── */
.grid-body{
  min-height:calc(100% - 46px);overflow:visible;
  display:flex;flex-direction:column;position:relative;
}
.g-row{
  display:flex;height:var(--row-h);flex:none;
  width:calc(var(--label-w) + (100% - var(--label-w)) * var(--strip-scale,1));
}
/* Разделитель строк живёт на ячейках, а не на самой строке. На строке
   он давал однопиксельную полосу, где фона закреплённой метки нет,
   и сквозная линия «сейчас» просвечивала там красными точками. */
.g-row > .g-label,.g-row > .g-track{border-bottom:1px solid var(--rule-2)}
.g-filler{flex:1 1 auto;height:auto;min-height:0}
.g-filler > .g-label,.g-filler > .g-track{border-bottom:none}
.g-filler .g-track,.g-filler .g-label{
  background-image:repeating-linear-gradient(to bottom,transparent 0 calc(var(--row-h) - 1px),var(--rule) calc(var(--row-h) - 1px) var(--row-h));
}
.g-filler .g-label{border-right:1px solid var(--rule)}
.g-add{border-bottom:1px solid var(--rule-2)}
.g-add .g-label{padding:8px 10px}
.addres{
  display:flex;align-items:center;gap:6px;width:100%;
  padding:6px 8px;border-radius:var(--r-sm);
  border:1px dashed var(--rule);color:var(--ink-3);
  font-size:var(--fs-s);font-weight:500;transition:var(--t-tap) var(--ease);transition-property:color,background-color,border-color;
}
.addres svg{width:13px;height:13px}
@media (hover:hover) and (pointer:fine){
  .addres:hover{border-color:var(--ink-3);border-style:solid;color:var(--ink);background:var(--card)}
  .g-row:hover .g-label{background:var(--sunk)}
}
.grid-body{background:var(--card)}
.g-label{
  width:var(--label-w);flex-shrink:0;padding:8px 12px 8px 14px;background:var(--paper);
  position:relative;
  border-right:1px solid var(--rule);
  display:flex;align-items:center;gap:10px;transition:var(--t-tap) var(--ease);transition-property:background-color;
  /* Название строки всегда выше броней, уходящих за левую границу периода,
     но ниже закреплённой линейки времени. */
  position:sticky;left:0;z-index:19;
}
.g-label-t b{display:block;font-size:var(--fs-s);font-weight:600;letter-spacing:-.015em;line-height:1.25}
/* Значок «i» появляется при наведении: одиннадцать постоянных значков
   подряд вернули бы однотонность, ради которой колонку и разбирали.
   Вынут из потока: название не меняет ширину при наведении, а белой
   растушёвки у значка нет. */
.g-info{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:20px;height:20px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);opacity:0;transition:var(--t-tap) var(--ease);transition-property:color,background-color,opacity,transform;
}
@media (hover:hover) and (pointer:fine){
  .g-row:hover .g-info{background:var(--paper)}
}
.g-info svg{width:14px;height:14px}
.g-row:hover .g-info,.g-info:focus-visible{opacity:1}
@media (hover:hover) and (pointer:fine){
  .g-info:hover{background:var(--sunk);color:var(--ink)}
}

.g-label-t{min-width:0;flex:1}
.g-label-t b{
  display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

/* Значок без плитки: белый прямоугольник повторялся одиннадцать раз
   и сам создавал ощущение штампа. Глиф справляется и без оправы. */
.ricon{
  width:21px;height:21px;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
  color:var(--ink-3);transition:var(--t-tap) var(--ease);transition-property:color,border-color,opacity;
}
.ricon svg{width:20px;height:20px}
@media (hover:hover) and (pointer:fine){
  .g-row:hover .ricon{color:var(--ink-2)}
}

/* Уровень загрузки — вертикальная шкала у края строки. Столбик засечек
   разной высоты даёт колонке ритм, которого не было у одинаковых полосок,
   и высота эта означает данные, а не оформление. Рельс нужен, чтобы
   засечка читалась как показание, а не как обрывок. */
.g-label::before{
  content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;
  border-radius:0 2px 2px 0;background:var(--sunk);
}
.g-level{
  position:absolute;left:0;bottom:8px;width:4px;border-radius:0 2px 2px 0;
  height:calc(var(--load, 0) * (100% - 16px));
  min-height:2px;
  background:var(--ink-2);
  opacity:calc(.3 + var(--load, 0) * .7);
  transition:height .5s cubic-bezier(.2,.8,.3,1), opacity .5s ease;
}
@media (hover:hover) and (pointer:fine){
  .g-row:hover .g-level{background:var(--ink-2)}
}

/* Заголовок группы: опора для глаза в длинном списке */
.g-group{height:27px}
.g-group .g-label{
  align-items:center;padding-top:0;padding-bottom:0;
  background:var(--paper);
}
.g-group .g-label::before{content:none}
.g-group .g-label b{
  font-size:11px;font-weight:500;
  color:var(--ink-3);
}
.g-group .g-track{opacity:.5}
@media (hover:hover) and (pointer:fine){
  .g-row:hover .ricon{border-color:var(--ink-3)}
}


.g-track{flex:1;position:relative;min-width:0;container-type:inline-size;overflow:visible}
.timeline-strip{
  position:absolute;inset:0;width:100%;
}
.g-bg{position:absolute;inset:0;display:flex}
.g-bg i{
  flex:1;border-right:1px solid var(--rule);position:relative;
  /* деления каждые 2 часа — совпадают с метками линейки */
  background-image:repeating-linear-gradient(to right,var(--rule-2) 0 1px,transparent 1px calc(100% / 6));
  transition:background-color .12s;background-clip:padding-box;
}
.g-bg i:last-child{border-right:none}
.g-bg i.we{background-color:var(--off-paper)}
/* колонка сегодня обозначена краями, а не тоном: тон красил брони */
.g-bg i.today{
  background-color:rgba(184,69,63,.018);
  box-shadow:inset 1px 0 0 rgba(184,69,63,.16), inset -1px 0 0 rgba(184,69,63,.16);
}
/* пустая ячейка зовёт завести бронь */
@media (hover:hover) and (pointer:fine){
  .g-bg i:hover{background-color:rgba(var(--ink-rgb),.045);cursor:pointer}
}
.g-bg i::after{
  content:"+";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:15px;font-weight:400;color:var(--ink-3);opacity:0;transition:var(--t-tap) var(--ease);transition-property:opacity;
}
.g-bg i:hover::after{opacity:.7}
.g-filler .g-bg i::after,.g-add .g-bg i::after{content:none}

/* «Сейчас» — одна линия на всю сетку, а не по линии в каждой строке.
   Раньше градиент начинался заново в каждой строке, и на границах
   цвет скакал: линия выглядела рваной. Теперь элемент один, поэтому
   ослабление идёт непрерывно сверху вниз. */
.grid-body > .nowline{
  position:absolute;top:0;bottom:0;width:1.5px;z-index:8;pointer-events:none;
  left:calc(var(--label-w)
    + var(--p) * (100% - var(--label-w)) * var(--strip-scale,1) / var(--span));
  background:linear-gradient(to bottom,
    var(--now) 0,
    color-mix(in srgb, var(--now) 55%, transparent) 38%,
    color-mix(in srgb, var(--now) 20%, transparent) 100%);
}

/* В недельной линейке линия начинается под отметкой дня и показывает,
   где сейчас на шкале часов. В дневном масштабе она поднимается до края,
   потому что отметки даты там нет. */
.r-now{
  position:absolute;top:26px;bottom:0;width:1.5px;background:var(--now);
  left:calc(var(--p) * 100% / var(--span));pointer-events:none;z-index:3;
}
.day .r-now{top:0}
/* Головки у линии нет: она повторяла бы то же, что и начало самой линии,
   и в полосе высотой 47 px сталкивалась с плашкой числа. */
/* Плашка времени нужна и на неделе: число говорит «сегодня», а плашка
   указывает точный момент в его колонке. */
.r-now em{
  display:block;
  position:absolute;bottom:0;left:50%;transform:translateX(-50%);
  font-size:11px;font-style:normal;font-weight:500;
  letter-spacing:-.01em;white-space:nowrap;line-height:1.35;
  background:var(--now);color:var(--on-status);padding:2.5px 7px;border-radius:var(--r-xs);
}
/* В дневном масштабе у плашки больше воздуха: там нет числа дня,
   которое могло бы пересекаться с ней. */
.day .r-now em{
  bottom:4px;
  /* кольцо цветом полосы гасит линию вокруг плашки: линия упирается
     в неё, а не рассекает цифры */
  box-shadow:0 0 0 3px var(--band), 0 2px 6px rgba(184,69,63,.35);
}