@layer ui {
/* Календарь (ritm#15, ritm#340 — нарезано из today.css): шапка и карусель
   периодов, сетка дня и недели, месяц, перенос блоков, подписка на календарь.
   Все значения — из tokens.css, ни одного цвета мимо переменных: тёмная тема
   переопределяет только значения, и мимо переменной она не сработает. */

/* Календарь (ritm#15). Сетка — CSS grid: колонка часов плюс по колонке на день.
   Ширина колонки 96px и прокрутка вбок: в 390px семь колонок дали бы по сорок
   пикселей, а это полоска с обрезанным названием, а не колонка. */
/* Шапка календаря (ritm#165): переключатель периода — как строка даты на
   «Дне»: стрелки жмутся к названию, название — кнопка с выбором дня, справа
   пространство. Поиск и вид — одной строкой. Три ряда над сеткой съедали на
   телефоне четверть экрана. */
/* Шапка календаря и заголовок периода живут правилами `.tday-head` и
   `.tday-date` (ritm#251): своих отступов у них больше нет. */

.cal-tools {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0 var(--space-4) var(--space-2);
}

.cal-tools .seg {
  flex: none;
  margin: 0;
}

.cal-tools .seg-item {
  flex: none;
  padding: 0 var(--space-3);
}

.head-icon-flip .ic {
  transform: scaleX(-1);
}

.seg {
  display: flex;
  gap: var(--space-1);
  margin: 0 var(--space-4);
  padding: 3px;
  background: var(--surface-sunken);
  border-radius: 999px;
}

.seg-item {
  flex: 1;
  min-height: var(--control-h-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-sm);
}

.seg-on {
  background: var(--surface-raised);
  color: var(--text);
  font-weight: var(--weight-semibold);
}

/* Прокручивается сама сетка, а не страница: иначе четырнадцать часов растягивают
   лист на полторы тысячи пикселей, и прилипание шапки с днями и колонки часов
   становится бессмысленным — прилипать не к чему. */
/* Листание календаря каруселью (ritm#44): три панели — прошлый период, текущий,
   следующий — в полосе с привязкой прокрутки. Жест ведёт браузер, соседняя
   панель видна во время движения; переставляет панели calendar.js. Полоса не
   рубит цепочку прокрутки внутрь: в неделе колонки сетки листаются сами, а к
   соседней неделе уходят только с края. */
/* Карусель периодов на «Прогрессе» (ritm#92) — та же механика, что у дней в
   календаре: три панели в ряд, привязка по краю, соседи подгружены заранее.
   overflow-y здесь не режем: панель высокая, и страница листается по вертикали
   как обычно. */
.pg-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.pg-track::-webkit-scrollbar {
  display: none;
}

/* Соседние панели не участвуют в высоте полосы (ritm#135): их содержимое
   приходит через мгновение после загрузки, и если сосед выше показанного дня
   или периода, экран на этом подрастал — владелец видел это как дрожание и
   мелькнувшую полосу прокрутки. `contain: size` говорит браузеру считать
   размер панели независимо от содержимого; растянется она по показанной. */
.pg-prev,
.pg-next,
.tday-prev,
.tday-next {
  contain: size;
  overflow: hidden;
}

.pg-pane {
  flex: 0 0 100%;
  width: 100%;
  min-width: 0;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/* Листание мышью (ritm#464): пока полосу тянут, привязка снята — полоса идёт за
   указателем, а не прыгает к ближайшей панели; сетка шире окна — так же.
   Панели на время жеста глухи к указателю: под ним ничего не подсвечивается,
   ссылка дня не открывается, и ладонь видна на всём, в том числе над блоками.
   В покое курсор обычный — как у доски (замечание владельца 10.09). */
.cal-track.is-grabbing,
.grid-wrap.is-grabbing {
  scroll-snap-type: none;
}

.cal-track.is-grabbing {
  cursor: grabbing;
  user-select: none;
}

.cal-track.is-grabbing > .cal-pane {
  pointer-events: none;
}

.cal-fail {
  margin: var(--space-6) var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-secondary);
}

/* Привязка — на обычные клетки дня, а не на шапку: шапка липкая (`position:
   sticky`), и Chrome считает её область привязки по приклеенному положению —
   полоса вставала на середине колонки, а колонка часов на этом же месте
   отлипала (владелец 07.09, ritm#112). Клетки одного дня стоят на одной
   вертикали, поэтому точек привязки ровно столько же, сколько колонок. */
.cell[data-hour] {
  scroll-snap-align: start;
}

.grid[data-days="1"] {
  /* День занимает ширину экрана — здесь по содержимому мерить нечего. */
  width: auto;
  --days: 1;
  /* Колонка часов той же ширины, что в неделе (аудит 23.09, B18): в 56 px
     «без времени» стояло вплотную к линии. */
  grid-template-columns: 64px minmax(240px, 1fr);
}

.grid-corner,
.gday,
.grid-hour,
.cell {
  background: var(--surface-raised);
}

/* Шапка с днями и колонка часов прилипают: без них через три часа прокрутки
   непонятно, какой это день и который час. */
.gday,
.grid-corner {
  position: sticky;
  top: 0;
  /* Выше блоков и выше колонки часов: шапка перекрывает всё, что под неё
     уезжает (ritm#86). */
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: var(--space-2) 0;
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-xs);
}

.gday-num {
  font-size: var(--text-md);
  color: var(--text);
}

.gday-today .gday-num,
.gday-today .gday-label {
  color: var(--accent);
  font-weight: var(--weight-semibold);
}

.grid-hour {
  position: sticky;
  left: 0;
  /* Выше блоков событий: иначе карточки первого дня наезжали на подпись часа и
     на «без времени» (замечание владельца 07.09). */
  z-index: 3;
  padding: var(--space-2);
  font-size: var(--text-xs);
  color: var(--text-muted);
  text-align: right;
}

/* Ночные часы (ritm#40): сетка показывает сутки целиком, но 00–06 и 23 — тише,
   чтобы рабочий день читался первым. */
.grid-hour-night {
  color: var(--text-muted);
}

.cell-night {
  background: var(--surface-sunken);
}

/* Строка «без времени» прилипает под строкой дней (ritm#322): календарь
   открывается у текущего часа (B26), и дела без времени оставались выше
   видимой части. Отступ сверху — высота строки дней, его мерит calendar.js;
   у «Дня» строки дней нет — ноль. Подпись выше клеток строки: те уезжают под
   неё вбок; клетки выше блоков (1) и линии «сейчас» (3), едущих под ними. */
.grid-hour-free {
  top: var(--free-top, 0px);
  z-index: 5;
  font-size: var(--text-xs);
  box-shadow: 0 1px 0 var(--line);
}

/* Без скрипта — высота строки дней как на 390 и 1440 px. */
.grid:not([data-days="1"]) {
  --free-top: 56px;
}

/* Шапка дней — со своей нижней линией: под ней прилипает строка «без
   времени» и закрывает зазор сетки. */
.gday,
.grid-corner {
  box-shadow: 0 1px 0 var(--line);
}

/* Час — постоянной высоты: блок события считает своё место в пикселях от неё.
   Клетка не режет содержимое: блок на два часа выходит за её низ. */
.cell {
  position: relative;
  /* Высота часа — переменная сетки (ritm#281): щипок и настройка меняют её,
     клетка идёт следом. 54px по умолчанию = 48 плюс отступы по 3px. */
  height: calc(var(--hour-h) - 6px);
  padding: 3px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: visible;
}

/* Блок события (ritm#40): высота — длительность, положение — минуты начала,
   пересекающиеся по времени стоят рядом дорожками, в каждом свой заголовок.
   Тонкая рамка цвета клетки разделяет соседние дорожки. */
.ev-laid {
  position: absolute;
  z-index: 1;
  box-sizing: border-box;
  border: 1px solid var(--surface-raised);
  white-space: normal;
  overflow-wrap: anywhere;
}

/* В блоке время — своя мелкая строка, заголовок под ним переносится, а не
   режется: в неделе дорожка бывает в полколонки. */
.ev-laid .ev-time {
  display: block;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Короткие блоки (ritm#167): в получасовом строка времени не помещается —
   остаётся заголовок одной строкой; в четвертьчасовом и он мельче. Классы
   ставят calendar.js и caldrag.js по длительности; подсветка места переноса —
   те же. */
.ev-laid.ev-30 {
  padding-top: 1px;
  padding-bottom: 1px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.ev-laid.ev-30 .ev-time {
  display: none;
}

.ev-laid.ev-15 {
  padding-top: 0;
  padding-bottom: 0;
  font-size: 9px;
  line-height: 1;
}

.ev-drop.ev-15 .ev-drop-time {
  padding: 0 var(--space-1);
  font-size: 9px;
  line-height: 1;
}

.cell-free {
  position: sticky;
  top: var(--free-top, 0px);
  z-index: 4;
  height: auto;
  min-height: calc(min(var(--hour-h) / 2, 32px) + 2 * var(--space-1));
  background: var(--surface);
  /* Зазор сетки под прилипшей строкой показывал бы часы, едущие под ней. */
  box-shadow: 0 1px 0 var(--line);
}

/* Задача без времени — ростом в полчаса (ritm#171): в сетке она читается как
   получасовое дело, а не как тонкая полоска. Но не выше 32 px (ritm#322):
   строка прилипает, и при растянутом щипком часе две её строки занимали бы
   треть экрана. */
.cell-free .ev {
  box-sizing: border-box;
  min-height: min(calc(var(--hour-h) / 2), 32px);
  display: flex;
  align-items: center;
}

/* Не выше двух строк (ritm#322): у дня с тремя делами и больше видно первое и
   «ещё N», нажатие раскрывает строку у всех дней, «свернуть» у подписи —
   обратно. Что прятать, решает calendar.js: без скрипта строка целиком.
   `.cell-free` в селекторе — ради веса: десктопное `.cell:not([data-hour]) .ev`
   того же веса грузится позже и показывало спрятанное. */
.cal-pane:not([data-free-open]) .cell-free .ev-folded,
.cal-pane[data-free-open] .free-more,
.cal-pane:not([data-free-open]) .free-fold {
  display: none;
}

.free-more,
.free-fold {
  display: block;
  padding: 2px var(--space-1);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-secondary);
  font: inherit;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  text-align: left;
  cursor: pointer;
}

.free-fold {
  margin: var(--space-1) 0 0 auto;
  padding: 2px 0;
  color: var(--accent);
  text-align: right;
}

/* Задача в сетке — акцентная подложка, как в макете; событие рабочего календаря
   рисовалось бы обводкой слева, но источника для событий пока нет. */
.ev {
  display: block;
  padding: 2px var(--space-1);
  border-radius: var(--radius-sm);
  background: var(--accent-soft);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-xs);
  line-height: var(--leading-tight);
  overflow: hidden;
}

.ev-time {
  color: var(--text-secondary);
}

/* Мелкий масштаб (ritm#281): час ниже 44px — блок на полчаса меньше 20px, в нём
   помещается только название одной строкой; время прячем, переносы режем. */
.grid.is-dense .ev-time {
  display: none;
}

.grid.is-dense .cell[data-hour] .ev {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding-top: 0;
  padding-bottom: 0;
}

/* Критичная задача в сетке — акцентная полоса у левого края блока (ritm#185).
   Тенью, а не рамкой: рамка съела бы высоту блока и сдвинула бы раскладку. */
.ev-crit {
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: calc(var(--space-1) + 3px);
}

/* Перенос задач в календаре (ritm#157). Блок в сетке можно взять: тело —
   перенести, край — растянуть. Место, куда ляжет, подсвечено заранее. */
/* Переезд блока анимирует calendar.js (FLIP) — CSS-перехода на top/height
   здесь нет нарочно: он догонял курсор при растяжении и удваивал анимацию после
   отпускания, отчего блок дёргался (ritm#159). */
.cell[data-hour] .ev-laid {
  cursor: grab;
}

.cell[data-hour] .ev-laid.is-edge {
  cursor: ns-resize;
}

.cell-free .ev {
  cursor: grab;
}

/* Блок — ссылка, но тянуть его должен наш перенос, а не браузер: ни переноса
   ссылки мышью, ни меню «открыть в новой вкладке» по долгому нажатию пальцем
   (ritm#163; в Chrome его гасит contextmenu в caldrag.js, здесь — Safari). */
.cal-track .ev {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}

/* Пока блок несут, его старое место приглушено, а копия идёт за указателем. */
.ev-source {
  opacity: 0.35;
}

.ev-resizing {
  transition: none;
  z-index: 4;
  box-shadow: 0 0 0 2px var(--accent);
}

.ev-drag {
  position: fixed;
  z-index: 60;
  box-sizing: border-box;
  pointer-events: none;
  opacity: 0.92;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  transform-origin: top left;
}

/* Подсветка места: пунктир акцентом и время внутри. */
.ev-drop {
  position: absolute;
  z-index: 2;
  box-sizing: border-box;
  border: 1.5px dashed var(--accent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  pointer-events: none;
}

.ev-drop-time {
  display: block;
  padding: 2px var(--space-1);
  font-size: 10px;
  line-height: 1.2;
  color: var(--accent);
  white-space: nowrap;
}

/* В строке «без времени» подсветка — полоса во всю клетку. */
.ev-drop-free {
  position: static;
  display: block;
  min-height: 28px;
  margin: 2px 0;
}

body.cal-dragging {
  cursor: grabbing;
  user-select: none;
}

/* Пока идёт перенос, привязка колонок снята: с ней сетка на телефоне
   огрызалась на каждый шаг автопрокрутки и до соседнего дня доезжала с трудом
   (ritm#159). */
body.cal-dragging .grid-wrap {
  overscroll-behavior: contain;
  scroll-snap-type: none;
}

/* Подсказка листания (ritm#163): пока блок держат у края докрученной до конца
   сетки, у пальца стоит кружок со стрелкой, и кольцо на нём заполняется —
   заполнилось, перелистнулось. Прежние полосы по краям экрана висели весь
   перенос и не говорили, когда перелистнётся; владелец их снял. */
.cal-page-hint {
  position: fixed;
  z-index: 61;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--accent) calc(var(--p, 0) * 1turn), color-mix(in srgb, var(--accent) 20%, transparent) 0);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
  pointer-events: none;
}

.cal-page-hint::before,
.cal-page-hint::after {
  content: '';
  grid-area: 1 / 1;
  box-sizing: border-box;
}

.cal-page-hint::before {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--surface-raised);
}

/* Стрелка — уголок: вправо, влево — зеркально. */
.cal-page-hint::after {
  width: 9px;
  height: 9px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  transform: translateX(-2px) rotate(45deg);
}

.cal-page-hint.is-left::after {
  transform: translateX(2px) rotate(-135deg);
}

/* Закрытая задача (ritm#157): лёгкая зелёная подложка и рамка — видно, что
   сделана, но карточка не кричит. */
.card-closed {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.bcard[data-column="done"] {
  background: color-mix(in srgb, var(--accent) 8%, var(--surface-raised));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}

.bcard[data-column="done"] .bcard-title {
  color: var(--text-secondary);
}

/* Подложка события — тот же цвет, разбавленный до читаемого фона. */
.ev[data-color] {
  /* Смесь с поверхностью, а не с прозрачным: сквозь блок просвечивали линии
     часов и ночная заливка (аудит 23.09). Цвет тот же. */
  background: color-mix(in srgb, var(--cat, var(--accent)) 18%, var(--surface-raised));
}

/* Экземпляры регулярных задач в сетке (ritm#192): будущее — пунктиром (его ещё
   не было), пропущенное — приглушённой подложкой, сделанное — галочкой у
   времени. Правила стоят после заливки категорией: специфичность у них
   одинаковая, и решает порядок.

   Цвет категории держат все три состояния (замечание владельца 10.09): совсем
   прозрачный блок в ряду цветных читается не как «этого ещё не было», а как
   потерянные данные. Признак остаётся в рамке и в насыщенности, а не в том,
   есть ли у блока цвет вообще. */
.ev-virtual,
.ev-virtual[data-color] {
  background: color-mix(in srgb, var(--cat, var(--accent)) 9%, transparent);
  border: 1px dashed color-mix(in srgb, var(--cat, var(--accent)) 55%, var(--line-strong));
  color: var(--text-secondary);
}

.ev-missed,
.ev-missed[data-color] {
  background: color-mix(in srgb, var(--cat, var(--accent)) 7%, var(--surface-sunken));
  border: 1px solid color-mix(in srgb, var(--cat, var(--accent)) 30%, var(--line));
  color: var(--text-muted);
}

.ev-done .ev-time::after {
  content: " ✓";
  color: var(--accent);
}

.ev-done,
.ev-missed {
  cursor: default;
}

/* Пункты своего дня у регулярной «заново» (ritm#533): «✓ 2 / 5» той же
   записью, что в строке «Дня» (.chat-count), — в блоке недели, дня и в строке
   клетки месяца. Значок — под шрифт блока, а не 13 px строки «Дня»: в
   четвертьчасовом блоке шрифт 9 px, и значок выше строки выпирал из блока и
   резал подпись. Коробка счёта — высотой строки и прижата к её низу: число
   стоит на одной линии с названием. Счёт — одним куском: в узком однострочном
   блоке он уходит под многоточие целиком, а не обрывком «2 /…». */
.ev-check {
  gap: 0.15em;
  margin-left: 0.25em;
  vertical-align: bottom;
  white-space: nowrap;
}

.ev-check .ic {
  width: 0.95em;
  height: 0.95em;
}

/* Месяц (ritm#466): сетка, в которой день читается с одного взгляда. Клетки
   ровные, границы тонкие; выходные — своим тоном во всю колонку; дни соседних
   месяцев утоплены и приглушены, у первого числа — месяц; сегодня — кружок
   акцента и рамка клетки; текущая неделя — тоном акцента по строке. Заливки
   по числу дел нет (решение владельца 29.09): ежедневная регулярная красила
   весь месяц с даты своего начала, и заливка перестала говорить, где дел
   много, а спорила с сегодня и текущей неделей тем же зелёным. Тон клетки —
   в переменной, чтобы тон недели ложился поверх любого из них. */
.month {
  --mday-weekend: color-mix(in srgb, var(--surface-sunken) 55%, var(--surface-raised));
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: var(--space-3) var(--space-4);
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.month-head,
.month-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
  background: var(--line);
}

.month-head span {
  padding: var(--space-2) 0;
  text-align: center;
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: var(--surface-raised);
}

.month-head span:nth-child(n + 6) {
  color: var(--text-secondary);
  background: var(--mday-weekend);
}

.mday {
  --mday-bg: var(--surface-raised);
  min-height: 56px;
  padding: var(--space-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  background: var(--mday-bg);
  color: var(--text);
  text-decoration: none;
  font-size: var(--text-sm);
}

.mday:nth-child(n + 6) {
  --mday-bg: var(--mday-weekend);
}

.mday.mday-other {
  --mday-bg: var(--surface-sunken);
  color: var(--text-muted);
}

.mday-num {
  min-width: 22px;
  height: 22px;
  line-height: 22px;
  text-align: center;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.mday-other .mday-num {
  font-weight: var(--weight-regular);
}

.mday-mon {
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
}

.mday-other .dots,
.mday-other .mday-lines {
  opacity: 0.55;
}

.month-row-now .mday {
  background: color-mix(in srgb, var(--accent) 11%, var(--mday-bg));
}

/* У текущей недели — полоса акцента слева: тон строки на светлой теме едва
   заметен, а «где я сейчас» — первый вопрос к месяцу. */
.month-row-now .mday:first-child:not(.mday-today) {
  box-shadow: inset 3px 0 0 var(--accent);
}

.mday-today {
  box-shadow: inset 0 0 0 1.5px var(--accent);
}

.mday-today .mday-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: var(--on-accent);
  background: var(--accent);
  border-radius: 999px;
  font-weight: var(--weight-semibold);
}

.mday-today .mday-mon {
  color: inherit;
}

.dots {
  display: flex;
  gap: 2px;
}

.dots .dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--line-strong);
}

.dot[data-color] {
  background: var(--cat, var(--line-strong));
}

/* Отметка внимания — кольцо первым в ряду точек: в дне есть незакрытое
   критичное или просроченное. Кольцом, а не точкой — чтобы не спутать с цветом
   категории. */
.dot-attn {
  box-sizing: border-box;
  width: 6px;
  height: 6px;
  margin: -1px 1px 0 0;
  border: 1.5px solid var(--status-bad);
  border-radius: 50%;
}

/* Дела строками — только на широком экране (desktop.css): в клетке телефона
   шириной 48 px строка не живёт. */
.mday-lines {
  display: none;
}

/* День и неделя на телефоне (ritm#165): сетка идёт до нижнего меню и уходит под
   панель мысли, как лента «Дня», а не кончается над ней пустой полосой.
   Нижний отступ живёт внутри прокрутки сетки: последний час выезжает из-под
   пилюли. Месяц не трогаем — он не прокручивается внутри себя. */
.screen-wide[data-view="day"],
.screen-wide[data-view="week"] {
  padding-bottom: 0;
}

.screen-wide[data-view="day"] .grid-wrap,
.screen-wide[data-view="week"] .grid-wrap {
  margin-bottom: var(--space-2);
  padding-bottom: 72px;
}

/* Линия текущего времени (ritm#169): в колонке сегодняшнего дня, точка у левого
   края, над блоками. Подписи времени рядом нет (ritm#173): она наезжала на
   подпись часа, а какой день сегодня, видно по подсветке колонки. */
.now-line {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  height: 0;
  border-top: 2px solid var(--accent);
  pointer-events: none;
}

.now-dot {
  position: absolute;
  left: -1px;
  top: -5px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

/* Колонка сегодняшнего дня (ritm#173): лёгкий тон акцента поверх обычной
   подложки — колонка находится взглядом, но не спорит с задачами. В виде «день»
   колонка одна, различать нечего, поэтому подсветка только в неделе. */
.grid:not([data-days="1"]) .cell-today {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
}

.grid:not([data-days="1"]) .cell-today.cell-night {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface-sunken));
}

.grid:not([data-days="1"]) .cell-free.cell-today {
  background: color-mix(in srgb, var(--accent) 7%, var(--surface));
}

.grid:not([data-days="1"]) .gday-today {
  background: color-mix(in srgb, var(--accent) 10%, var(--surface-raised));
}

/* Подписка на календарь (ritm#207). Путь короткий: кнопка подписки во всю
   ширину сверху, ссылка под ней — на случай, когда касание не сработало, и
   только потом объяснения. Разделы инструкции — обычный details: раскрыт тот,
   что подходит устройству, остальные не мешают. */
.cal-sub {
  display: block;
  width: 100%;
  margin: var(--space-2) 0;
  text-align: center;
  text-decoration: none;
}

.cal-acts {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-2);
}

.cal-how {
  border-top: 1px solid var(--line);
  padding: var(--space-2) 0;
}
}