/* ── ЛИНЕЙКА ВРЕМЕНИ ─────────────────────────────────────── */
.ruler{
  display:flex;color:var(--band-ink);flex-shrink:0;
  background:linear-gradient(180deg,var(--band-2) 0%,var(--band) 62%);
  /* Шва с шапкой периода нет: сверху та же полоса, они читаются
     одним прибором, а низ отделён от сетки. */
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.07),0 1px 0 rgba(25,24,21,.12);
  position:sticky;top:0;z-index:20;
  width:calc(var(--label-w) + (100% - var(--label-w)) * var(--strip-scale,1));
}
.r-corner{
  width:var(--label-w);flex-shrink:0;padding:8px 14px 7px;
  border-right:1px solid rgba(255,255,255,.09);
  display:flex;flex-direction:column;justify-content:flex-end;
  position:sticky;left:0;z-index:4;
  background:linear-gradient(180deg,var(--band-2) 0%,var(--band) 62%);
}
.r-corner b{
  font-size:11px;font-weight:500;
  color:var(--band-ink-2);
}
.r-corner span{
  font-size:10px;color:var(--band-ink-3);
  letter-spacing:0;margin-top:2px;
}
.r-viewport{flex:1;min-width:0;overflow:hidden}
.r-days{
  width:100%;height:100%;
  display:flex;min-width:0;position:relative;
  background:linear-gradient(180deg,var(--band-2) 0%,var(--band) 62%);
}
.r-day{
  flex:1;min-width:0;border-right:1px solid rgba(255,255,255,.09);padding-top:7px;
  scroll-snap-align:start;position:relative;
}
.r-day:last-child{border-right:none}
.r-day.we{background:var(--off-band)}
/* Сегодня названо плашкой на числе. Верхней планки нет намеренно:
   плашка и планка говорили одно и то же, а два маркера на один смысл —
   лишние. Колонку держит слабый тон и края, положение — линия. */
.r-day.today{
  background:linear-gradient(to bottom, rgba(184,69,63,.10), rgba(184,69,63,.015) 70%);
}
/* Дата — кнопка: нажатие открывает этот день. */
.r-day-actions{width:100%}
.r-date{
  display:flex;align-items:baseline;gap:1px;width:100%;padding:0 31px 5px 4px;
  background:none;border:0;font:inherit;cursor:pointer;
}
.r-date b{
  font-size:11px;font-weight:500;
  color:var(--band-ink-2);
  padding-left:5px;transition:color .13s;
}
/* Подложка есть у всех чисел, а не только у сегодняшнего: иначе плашка
   сегодня сдвигала бы своё число относительно соседних. */
.r-date span{
  font-size:var(--fs-date);font-weight:500;
  color:var(--band-ink);letter-spacing:-.01em;
  padding:0 5px;border-radius:var(--r-sm);line-height:1.5;
  background:transparent;transition:background .13s, color .13s;
}
@media (hover:hover) and (pointer:fine){
  .r-date:hover b{color:var(--band-ink)}
  .r-date:hover span{background:rgba(255,255,255,.14)}
}
.r-date:focus-visible{outline:none}
.r-date:focus-visible span{outline:2px solid var(--band-ink);outline-offset:1px}
.r-add{
  position:absolute;right:5px;top:5px;width:21px;height:21px;padding:0;
  display:grid;place-items:center;border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-sm);background:rgba(255,255,255,.045);color:var(--band-ink-2);
  cursor:pointer;opacity:0;pointer-events:none;
  transition:background .13s,color .13s,border-color .13s,opacity .13s;
}
.r-add svg{width:12px;height:12px}
.r-day-actions:hover .r-add,
.r-day-actions:focus-within .r-add{opacity:1;pointer-events:auto}
@media (hover:hover) and (pointer:fine){
  .r-add:hover{
    color:var(--band-ink);background:rgba(255,255,255,.13);
    border-color:rgba(255,255,255,.22);
  }
}
.r-add:focus-visible{outline:2px solid var(--band-ink);outline-offset:1px}
.r-day.today .r-date b{color:var(--band-ink)}
/* Плашка плотная и по размеру числа: свечение и большой радиус
   превращали её в кляксу. Без тени — на тёмной полосе она и так
   единственная заливка. */
.r-day.today .r-date span{
  color:var(--on-status);font-weight:600;background:var(--now);
}
@media (hover:hover) and (pointer:fine){
  .r-day.today .r-date:hover span{background:color-mix(in srgb,var(--now) 82%,var(--card))}
}

/* деления: 12 14 16 18 20 22 — шесть меток на дневное окно */
.r-hours{display:flex;height:15px;align-items:flex-end}
.r-hours i{
  flex:1;position:relative;font-style:normal;
  font-size:9px;letter-spacing:-.02em;
  color:var(--band-ink-3);padding-left:3px;line-height:1;padding-bottom:3px;
}
.r-hours i::before{
  content:"";position:absolute;left:0;bottom:0;width:1px;height:5px;
  background:rgba(255,255,255,.22);
}
.r-hours i:first-child::before{background:rgba(255,255,255,.38);height:7px}


/* Метка даты идёт сразу за числом — как пометка на нём. У правого края
   она висела сама по себе и не относилась ни к чему.

   Свойства перечислены заново: правило `.r-date span` выше даёт числу
   поля и подложку, и метка, будучи тоже span, получала их вместе с ним —
   точка растягивалась в эллипс и теряла заливку. На тёмной полосе она
   и набрана чернилами полосы, а не бумаги. */
.r-date .hol{
  margin-left:5px;align-self:center;padding:0;background:none;
  width:13px;height:13px;color:var(--band-ink-2);
}
.r-date .hol.folk,.r-date .hol.memory{color:var(--band-ink-3)}