/* Модуль «Отпуска и график»: табель отсутствий (клетка на день и человека,
   макет 1 октября 2026), строка сводки и заявки над ним, неделя и месяц
   календаря, повестка недели на телефоне, признак «видно не всем» у вкладок
   решающих.

   Перенесено из public/styles.css (24 сентября 2026). Порядок правил
   сохранён: подписи чисел (`.vstat__label`) стояли в общем списке
   «подписей как в штампе» ниже по файлу и перебивали собственный кегль —
   это правило здесь же, последним в своём блоке, чтобы вид не сдвинулся. */

/* Статистика отпуска */
/* Свой отпуск — то, ради чего сотрудник сюда и заходит: сколько накоплено,
   сколько потрачено, сколько осталось. Числа были набраны почти как обычный
   текст, а подписи под ними — мельче некуда, и весь блок читался служебной
   строкой над табелем. Теперь это четыре крупных числа с внятными подписями:
   их видно, не наклоняясь к экрану. */
.vstats { display: flex; gap: var(--s-6); flex-wrap: wrap; }
.vstat__value {
  font-size: var(--t-2xl); font-weight: 600; letter-spacing: -.3px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.vstat__value.is-neg { color: var(--late-fg); }
.vstat__value.is-pos { color: var(--ok-fg); }
.vstat__label { font-size: var(--t-base); color: var(--text-dim); margin-top: var(--s-1); }

/* Кто сегодня отсутствует — словами над сеткой */
.vaway { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; }
.vstat__hint { font-size: var(--t-xs); color: var(--text-faint); margin-top: var(--s-05); }

/* Признак «видно не всем» — замком после названия вкладки */
.tab__priv { margin-left: var(--s-1); display: inline-flex; opacity: .7; }
.vstat__value.is-adv { color: var(--warn-fg); }

/* Подписи чисел — как надписи в штампе листа, тем же приёмом, что поля
   форм и шапки таблиц портала (было в общем списке public/styles.css). */
.vstat__label {
  text-transform: uppercase;
  letter-spacing: .1em;
  font-size: var(--t-2xs);
  font-weight: 600;
}
/* Крупные значения — моноширинные, но своим кеглем, а не кеглем размерных
   надписей портала. */
.vstat__value { font-family: var(--mono); letter-spacing: -.01em; }

/* ── Редизайн, 27 сентября 2026: две вкладки ─────────────────────────────────

   «События» — неделя колонками с полосой «весь день» (кто отсутствует,
   многодневное, сроки) или месяц сеткой; «Отпуска и отсутствия» — строка
   сводки, ждущие заявки, табель на квартал, свои заявки (с 1 октября 2026,
   до этого — четыре числа плитками). Цвет только токенами, кегль, отступы
   и радиусы — шкалами. */

.caltab { display: inline-flex; align-items: center; gap: var(--s-2); }
.caltab svg { flex: none; }

/* Шапка вида: название недели слева, листание, вид и «+ Событие» справа */
.calhead {
  display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
  margin-bottom: var(--s-3);
}
.calhead > .spacer { flex: 1 1 auto; }
.calhead__name { min-width: 0; }
.calhead__title { margin: 0; font-size: var(--t-xl); line-height: 1.2; }
.calhead__sub { font-size: var(--t-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.calhead__nav { display: inline-flex; gap: var(--s-1); }
.calhead__away { margin-bottom: var(--s-3); }

/* Плашка отсутствия, срока, многодневного события. Одна форма на неделю,
   повестку телефона и подпись цветов — различает её только цвет. */
.calbar {
  display: block; min-width: 0; padding: var(--s-05) var(--s-2);
  border: none; border-radius: var(--radius-sm); font: inherit;
  font-size: var(--t-sm); line-height: 1.35; text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--sunken); color: var(--text);
}
.calbar b { font-weight: 600; }
button.calbar { cursor: pointer; }
.calbar--paid   { background: var(--ok-soft); color: var(--ok-fg); }
.calbar--unpaid { background: var(--ok-soft); color: var(--text-dim); }
.calbar--dayoff { background: var(--auto-soft); color: var(--auto); }
.calbar--sick   { background: var(--late-soft); color: var(--late-fg); }
.calbar--plan {
  background: var(--warn-soft); color: var(--warn-fg);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--warn) 45%, transparent);
}
.calbar--srok { background: var(--accent-soft); color: var(--accent-fg); font-weight: 600; }
.calbar--ev   { background: var(--well); color: var(--text); box-shadow: inset 3px 0 0 var(--accent); }

/* Событие в колонке дня: время моноширинным, название — в две строки */
.calev {
  display: flex; flex-direction: column; gap: 0; width: 100%; min-width: 0;
  padding: var(--s-1) var(--s-2); border: none; border-radius: var(--radius-sm);
  background: var(--well); color: var(--text); font: inherit; font-size: var(--t-sm);
  text-align: left; box-shadow: inset 3px 0 0 var(--accent);
}
button.calev { cursor: pointer; }
button.calev:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.calev__time { font-family: var(--mono); font-size: var(--t-xs); color: var(--text-dim); }
.calev__name {
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  line-height: 1.3;
}
/* Своё — пунктиром: его видите только вы */
.calev--mine { box-shadow: inset 3px 0 0 var(--text-faint); }
/* Из подключённого календаря — только читается */
.calev--feed { box-shadow: inset 3px 0 0 var(--line-2); color: var(--text-dim); }

/* Неделя: у всех строк одна раскладка столбцов, поэтому шапка, полоса
   «весь день» и колонки стоят друг под другом без таблицы */
.calweek { overflow: hidden; }
.calweek__row {
  display: grid; grid-template-columns: 88px repeat(7, minmax(0, 1fr));
}
.calweek__label {
  padding: var(--s-2); font-size: var(--t-xs); color: var(--text-faint);
  text-transform: uppercase; font-family: var(--mono); font-weight: 500; letter-spacing: .08em;
}
.calweek__head { border-bottom: 1px solid var(--border); }
.calweek__day {
  display: flex; align-items: baseline; gap: var(--s-2); padding: var(--s-2) var(--s-3);
  color: var(--text-dim); font-size: var(--t-sm);
}
.calweek__day b { font-size: var(--t-lg); font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }
.calweek__day.is-off b { color: var(--text-faint); }
.calweek__day.is-today { color: var(--accent-fg); }
.calweek__day.is-today b {
  color: var(--accent-ink); background: var(--accent); border-radius: var(--radius-full);
  padding: 0 var(--s-2);
}
.calweek__wd { text-transform: lowercase; }
/* Полоса «весь день»: отрезки встают на свои столбцы, строки — плотно */
.calweek__allday {
  grid-auto-flow: row dense; gap: var(--s-1) var(--s-1);
  padding: var(--s-2) var(--s-1) var(--s-2) 0; border-bottom: 1px solid var(--border);
  /* Без серой заливки (сверка 28 сентября 2026): полоса «весь день»
     на утопленном тоне читалась серой лентой поперёк карточки. Её
     отделяют черта снизу и цветные плашки, как в макете. */
}
.calweek__allday > .calweek__label { grid-column: 1; grid-row: 1; padding-top: var(--s-05); }
.calweek__none { grid-column: 2 / -1; font-size: var(--t-sm); color: var(--text-faint); padding: var(--s-05) var(--s-2); }
.calweek__cols { min-height: 220px; }
.calweek__col {
  display: flex; flex-direction: column; gap: var(--s-1);
  padding: var(--s-2) var(--s-1); border-left: 1px solid var(--border); cursor: pointer;
}
.calweek__col:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.calweek__col.is-off { background: var(--sunken); }
.calweek__col.is-today { background: color-mix(in srgb, var(--accent) 5%, transparent); }
/* Наведение видно и на выходном, и на сегодняшнем столбце: их заливка
   стояла ниже по файлу с той же силой и перебивала :hover */
.calweek__col.is-off:hover:where([data-hover="mouse"] *), .calweek__col.is-today:hover:where([data-hover="mouse"] *) { background: var(--hover); }
/* Сегодня уже помечено кружком числа в шапке; столбец — едва тронут
   акцентом, иначе голубая колонна перетягивала взгляд с событий. */


/* Месяц: семь столбцов, клетка — число, до трёх пунктов, сколько нет */
.calmonth { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); overflow: hidden; }
.calmonth__wd {
  padding: var(--s-2) var(--s-3); font-size: var(--t-xs); color: var(--text-faint);
  text-transform: uppercase; font-family: var(--mono); font-weight: 500; letter-spacing: .08em; border-bottom: 1px solid var(--border);
}
.calmonth__cell {
  display: flex; flex-direction: column; align-items: stretch; gap: var(--s-05);
  min-width: 0; min-height: 104px; padding: var(--s-1) var(--s-1) var(--s-2);
  border: none; border-top: 1px solid var(--border); border-left: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; text-align: left; cursor: pointer;
}
.calmonth__cell:nth-child(7n + 1) { border-left: none; }
.calmonth__cell:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.calmonth__cell.is-off { background: var(--sunken); }
.calmonth__cell.is-off:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.calmonth__cell.is-other { color: var(--text-faint); }
.calmonth__cell.is-other .calmonth__item { opacity: .6; }
.calmonth__n {
  align-self: flex-start; padding: 0 var(--s-1); font-size: var(--t-sm); font-weight: 600;
  font-variant-numeric: tabular-nums; border-radius: var(--radius-full);
}
.calmonth__cell.is-today .calmonth__n { background: var(--accent); color: var(--accent-ink); }
.calmonth__item {
  padding: 0 var(--s-1); border-radius: var(--radius-sm); font-size: var(--t-xs); line-height: 1.5;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  background: var(--well); box-shadow: inset 2px 0 0 var(--accent);
}
.calmonth__item--srok { background: var(--accent-soft); color: var(--accent-fg); box-shadow: none; font-weight: 600; }
.calmonth__more { font-size: var(--t-xs); color: var(--text-faint); padding: 0 var(--s-1); }
.calmonth__away {
  margin-top: auto; align-self: flex-start; padding: 0 var(--s-1);
  font-size: var(--t-xs); border-radius: var(--radius-sm);
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Подпись цветов под неделей и месяцем */
.calleg { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3); }
.calleg__item { display: inline-flex; align-items: center; gap: var(--s-1); font-size: var(--t-sm); color: var(--text-dim); }
.calleg__item .calbar { display: inline-block; width: 18px; height: 12px; padding: 0; }
/* Событие в подписи — кружком цвета акцента: плашка с полоской слева,
   сжатая до 18 точек, читалась полумесяцем (владелец, 29.09.2026) */
.calleg__item .calbar--ev {
  width: 10px; height: 10px; margin: 0 var(--s-05);
  border-radius: var(--radius-full); background: var(--accent); box-shadow: none;
}

.calsec { margin: var(--s-5) 0 var(--s-3); font-size: var(--t-lg); }

/* Ближайшие сроки под сеткой (до 28 сентября 2026 — в колонке «Календаря»):
   строки на карточке, наведение — --hover, как строки задач */
.calsoon { display: flex; flex-direction: column; padding: var(--s-2); }
.calsoon__row {
  display: flex; align-items: baseline; gap: var(--s-3); padding: var(--s-2); min-width: 0;
  border: none; border-radius: var(--radius); background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left; transition: background var(--fast);
}
.calsoon__row:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.calsoon__date { flex: none; font-family: var(--mono); font-size: var(--t-xs); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.calsoon__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calsoon__proj { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-sm); color: var(--ink-3); }

/* ── Повестка недели — на телефоне (макет 1 октября 2026) ────────────────────
   Одна карточка: многодневные отсутствия — полосами над неделей, ниже дни
   строками «день · что в нём», пустые подряд — одной строкой. */
.calagenda { display: none; padding: var(--s-3) var(--s-4); }
.calagenda__band {
  padding: var(--s-1) var(--s-3); margin-bottom: var(--s-2); border-radius: 0;
  font-size: var(--t-sm); line-height: 1.4;
}
.calagenda__band b { font-weight: 600; }
.calagenda__day {
  display: grid; grid-template-columns: 112px minmax(0, 1fr) auto; gap: var(--s-2);
  align-items: center; padding: var(--s-1) 0; min-height: 40px;
  border-top: 1px solid var(--line); font-size: var(--t-sm);
}
.calagenda > .calagenda__day:first-child, .calagenda__band + .calagenda__day { border-top: 0; }
.calagenda__k { color: var(--text-faint); white-space: nowrap; }
.calagenda__day.is-today .calagenda__k { color: var(--accent-fg); font-weight: 600; }
.calagenda__what { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.calagenda__day.is-empty .calagenda__what, .calagenda__what:not(:has(> *)) { color: var(--text-faint); }
.calagenda__srok {
  display: block; min-width: 0; padding: 0; border: none; background: none; cursor: pointer;
  font: inherit; font-weight: 600; color: var(--accent-fg); text-align: left;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.calagenda__srok:hover:where([data-hover="mouse"] *) { text-decoration: underline; }

/* ── Табель отсутствий (макет утверждён владельцем 1 октября 2026) ───────────
   Клетка на день и человека, как в документальном табеле: закрашенный
   день — чёткий прямоугольник без скругления, сетку рисует просвет в точку
   между клетками (фон сетки — черта), а не рамка у каждой клетки.
   Выходные — тоном, праздник — своим, согласованное — сплошной заливкой
   цвета вида, ждущее решения — штриховкой того же размера. Сегодня —
   рамкой акцента по столбцу. Размер клетки — у вида: квартал на 2560
   встаёт целиком, на 1920 уезжает вбок прокруткой внутри карточки. */
.tabelcard { padding: var(--s-4) var(--s-4) var(--s-3); min-width: 0; }
.tabelhead { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; margin-bottom: var(--s-3); }
.tabelhead__title { margin: 0 var(--s-2) 0 var(--s-1); font-size: var(--t-md); font-weight: 600; }
.tabelhead > .spacer { flex: 1 1 auto; }
.tabelwrap { overflow-x: auto; }
.tabel {
  --tabel-name: 220px; --tabel-tot: 48px; --tabel-day: 26px;
  display: grid; gap: 1px; width: max-content; min-width: 100%;
  background: var(--line); border: 1px solid var(--line);
}
.tabel--quarter { --tabel-day: 18px; }
.tabel--week { --tabel-day: 88px; }
/* В году на день три точки: просветов между днями нет, границу месяца
   держит черта у первого числа */
.tabel--year { --tabel-day: 3px; column-gap: 0; }
.tabel__row { display: contents; }
.tabel__row > * { background: var(--solid); min-width: 0; }
/* Имя стоит на месте, когда табель листают вбок */
.tabel__row > :first-child {
  position: sticky; left: 0; z-index: 1; box-shadow: 1px 0 0 var(--line);
}
.tabel__h {
  font-size: var(--t-xs); line-height: 20px; color: var(--text-faint);
  text-align: center; white-space: nowrap; overflow: hidden;
}
.tabel__wd { line-height: 16px; }
.tabel__mon { text-align: left; padding-left: var(--s-2); font-size: var(--t-sm); font-weight: 600; color: var(--text);; text-overflow: ellipsis; }
/* Имя месяца не раздвигает дни: без этого «сентябрь» над тремя днями
   расширял до своей ширины все девяносто один столбец квартала */
.tabel__mon { contain: inline-size; }
.tabel--year .tabel__mon { padding-left: var(--s-1); font-size: var(--t-xs); box-shadow: inset 1px 0 0 var(--line); }
.tabel__who { text-align: left; padding-left: var(--s-3); }
.tabel__h.tabel__tot { text-align: right; justify-content: flex-end; }
.tabel__nm {
  display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-3);
  font-size: var(--t-sm); white-space: nowrap; overflow: hidden;
}
.tabel__nm > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tabel__nm--ev { color: var(--text-dim); font-weight: 600; }
.tabel__row.is-me > .tabel__nm { font-weight: 600; }
/* Наведение на строку — подложкой имени и итога, клетки дней не трогаем:
   их цвет и есть содержание */
.tabel__row.is-p:hover:where([data-hover="mouse"] *) > .tabel__nm, .tabel__row.is-p:hover:where([data-hover="mouse"] *) > .tabel__tot { background: var(--hover-solid); }
.tabel__short { display: none; }
.tabel__d { height: 28px; }
.tabel--year .tabel__d { height: 22px; }
.tabel__tot {
  display: flex; align-items: center; justify-content: flex-end; padding-right: var(--s-2);
  font-size: var(--t-xs); color: var(--text-dim);
}
.tabel__foot { display: flex; align-items: center; padding: 0 var(--s-3); font-size: var(--t-xs); color: var(--text-faint); }
.tabel__cnt { font-size: var(--t-xs); line-height: 22px; text-align: center; color: var(--text-faint); }
.tabel__cnt.is-low { color: var(--late-fg); font-weight: 600; }
/* В году числа не встают — день, где нет двоих и больше, помечен цветом */
.tabel--year .tabel__row > .tabel__cnt.is-low { background: var(--late-soft); }

/* Цвет дня — тот же в табеле, на полосе телефона и в подписи */
.tabel__d--paid   { background: var(--ok); }
.tabel__d--unpaid { background: color-mix(in oklab, var(--ok) 45%, var(--solid)); }
.tabel__d--dayoff { background: var(--auto); }
.tabel__d--sick   { background: var(--late); }
.tabel__d--plan   { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, transparent 3px 6px), var(--solid); }
.tabel .tabel__row > .is-off, .tabelph .is-off, .tabelleg .is-off { background: color-mix(in srgb, var(--ink) 6%, var(--solid)); }
.tabel .tabel__row > .is-hol, .tabelph .is-hol, .tabelleg .is-hol { background: var(--late-soft); }
/* Сегодня — рамкой акцента по всему столбцу */
.tabel .is-today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); }
.tabel__h.is-today { color: var(--accent-fg); font-weight: 600; }
/* Выбор дней заявки: свои клетки нажимаются, выбранные — обводкой */
.tabel__d.is-pick { cursor: pointer; }
.tabel__d.is-pick:hover:where([data-hover="mouse"] *):not(.is-picked) { outline: 1px solid var(--ink-3); outline-offset: -1px; }
.tabel__d.is-picked { outline: 2px solid var(--accent); outline-offset: -2px; }

/* События и сроки строками над людьми (заявка на отпуск) */
.tabel__ev {
  display: grid; place-items: center; min-width: 0; height: 24px; padding: 0 var(--s-1);
  border: none; border-radius: 0; font: inherit; color: inherit; cursor: pointer;
}
div.tabel__ev { cursor: default; }
.tabel .tabel__row > .tabel__ev.is-off { background: color-mix(in srgb, var(--ink) 6%, var(--solid)); }
.tabel .tabel__row > button.tabel__ev:hover:where([data-hover="mouse"] *), .tabelph button.tabel__ev:hover:where([data-hover="mouse"] *) { background: var(--hover-solid); }
.tabel__evname {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--t-xs); font-weight: 600; color: var(--ok-fg);
}
.tabel__evname--srok { color: var(--accent-fg); }
.tabel__dot { display: block; width: 6px; height: 6px; border-radius: var(--radius-full); background: var(--accent); }
.tabel__dot--ev { background: var(--ok); }

/* Подпись цветов */
.tabelleg {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-3);
  font-size: var(--t-sm); color: var(--text-dim);
}
.tabelleg__item { display: inline-flex; align-items: center; gap: var(--s-2); }
.tabelleg__sw { display: inline-block; width: 14px; height: 14px; background: var(--solid); box-shadow: inset 0 0 0 1px var(--line); }
.tabelleg__sw.tabel__d--paid { background: var(--ok); }
.tabelleg__sw.tabel__d--unpaid { background: color-mix(in oklab, var(--ok) 45%, var(--solid)); }
.tabelleg__sw.tabel__d--dayoff { background: var(--auto); }
.tabelleg__sw.tabel__d--sick { background: var(--late); }
.tabelleg__sw.tabel__d--plan { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, transparent 3px 6px), var(--solid); }
.tabelleg__sw.is-today { box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent), inset 0 0 0 1px var(--line); }

/* Телефон: имя строкой, под ним полоса из клеток во всю ширину */
.tabelph { display: flex; flex-direction: column; gap: var(--s-3); }
.tabelph__nums {
  display: grid; margin-bottom: calc(-1 * var(--s-2)); border: solid transparent; border-width: 0 1px;
  font-size: var(--t-2xs); line-height: 1.2; color: var(--text-faint);
}
.tabelph__nums > span { white-space: nowrap; overflow: visible; }
.tabelph__nums > .is-today { color: var(--accent-fg); font-weight: 600; }
.tabelph__who {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2);
  margin-bottom: var(--s-1); font-size: var(--t-sm);
}
.tabelph__who b { font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tabelph__p.is-me .tabelph__who b { font-weight: 600; }
.tabelph__who span { flex: none; max-width: 55%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-faint); font-size: var(--t-xs); }
.tabelph__strip { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
.tabelph__strip > * { height: 18px; min-width: 0; padding: 0; background: var(--solid); }
.tabelph__strip--pick > * { height: 30px; }
.tabelph__strip--ev > * { height: 16px; }
.tabelph .tabelph__strip > .tabel__d--paid { background: var(--ok); }
.tabelph .tabelph__strip > .tabel__d--unpaid { background: color-mix(in oklab, var(--ok) 45%, var(--solid)); }
.tabelph .tabelph__strip > .tabel__d--dayoff { background: var(--auto); }
.tabelph .tabelph__strip > .tabel__d--sick { background: var(--late); }
.tabelph .tabelph__strip > .tabel__d--plan { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, transparent 3px 6px), var(--solid); }
.tabelph .tabelph__strip > .is-today { box-shadow: inset 0 0 0 1.5px var(--accent); }
.tabelph .tabel__dot { width: 4px; height: 4px; }

/* ── Строка сводки и заявки над табелем ──────────────────────────────────────
   Вместо четырёх плиток с крупными числами — одна строка: кого нет,
   сколько заявок ждёт, ближайший уход, мой остаток у правого края. */
.otsum {
  display: flex; align-items: center; gap: var(--s-3); flex-wrap: wrap;
  padding: var(--s-3) var(--s-4); margin-bottom: var(--s-3); color: var(--text-dim);
}
.otsum b { font-weight: 600; color: var(--text); }
.otsum__sep { width: 1px; height: 18px; background: var(--line); flex: none; }
/* Нажимаемое в строке — подложкой под мышью; поля съедены отрицательным
   отступом, поэтому соседи не сдвигаются */
.otsum__link, .otsum__mine {
  padding: var(--s-05) var(--s-2); margin: calc(-1 * var(--s-05)) calc(-1 * var(--s-2));
  border: none; border-radius: var(--radius-full); background: none; cursor: pointer;
  font: inherit; color: inherit; text-align: left; transition: background var(--fast);
}
.otsum__link:hover:where([data-hover="mouse"] *), .otsum__mine:hover:where([data-hover="mouse"] *) { background: var(--hover); }
.otsum__link b { color: var(--warn-fg); }
.otsum__mine { margin-left: auto; position: relative; display: inline-flex; align-items: center; gap: var(--s-1); }
.otsum__mine.is-adv b { color: var(--warn-fg); }
.otsum__q {
  display: inline-grid; place-items: center; width: 14px; height: 14px; flex: none;
  border-radius: var(--radius-full); box-shadow: inset 0 0 0 1px var(--text-faint);
  color: var(--text-faint); font-size: var(--t-2xs); line-height: 1;
}
.otsum__mine:hover:where([data-hover="mouse"] *) .otsum__q { color: var(--text-dim); box-shadow: inset 0 0 0 1px var(--text-dim); }
/* Раскрытая подсказка — всплывашкой под строкой, строку не вытягивает */
.otsum__more {
  position: absolute; z-index: 5; top: calc(100% + var(--s-1)); right: 0; width: min(360px, 80vw);
  padding: var(--s-3); border-radius: var(--radius); background: var(--solid); box-shadow: var(--sh-3);
  font-size: var(--t-sm); font-weight: 400; color: var(--text-dim); line-height: 1.45;
}
.otsum__short { display: none; }
.otreqs > .card + .card { margin-top: var(--s-2); }
.otreqs:not(:empty) { margin-bottom: var(--s-3); }
.otreq {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--s-3); align-items: center;
  padding: var(--s-3) var(--s-4);
}
.otreq b { font-weight: 500; }
.otreq__note { font-size: var(--t-sm); color: var(--text-faint); }
.otmine { margin-top: var(--s-4); }

@media (max-width: 1100px) {
  .tabel { --tabel-name: 150px; }
  .tabel__full { display: none; }
  .tabel__short { display: inline; }
}

@media (max-width: 760px) {
  .calweek { display: none; }
  .calagenda { display: flex; flex-direction: column; padding: var(--s-3); }
  .calagenda__day { grid-template-columns: 96px minmax(0, 1fr) auto; }
  .calhead__title { font-size: var(--t-lg); }
  .calmonth__cell { min-height: 56px; padding: var(--s-05); }
  .calmonth__item, .calmonth__more { display: none; }
  /* В клетке телефона места на названия нет — есть ли что-то, говорит точка */
  .calmonth__cell.has-items .calmonth__n { box-shadow: inset 0 -2px 0 var(--accent); border-radius: 0; }
  .calmonth__cell.is-today .calmonth__n { border-radius: var(--radius-full); box-shadow: none; }
  .calmonth__wd { padding: var(--s-1); text-align: center; }
  .calmonth__away { font-size: var(--t-2xs); }
  .tabelcard { padding: var(--s-3); }
  .tabelhead__title { margin: 0 auto 0 var(--s-1); }
  .otsum { flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: var(--s-3); }
  .otsum__sep { display: none; }
  .otsum__mine { margin-left: calc(-1 * var(--s-2)); }
  .otsum__more { left: 0; right: auto; }
  .otsum__long { display: none; }
  .otsum__short { display: inline; }
  .otreq { grid-template-columns: auto minmax(0, 1fr); padding: var(--s-3); }
  .otreq > .table__actions { grid-column: 1 / -1; justify-content: flex-start; }
}