/* calendar.css — стили фазы F1 «Календарь + семья».
   Только токены из tokens.css (никаких хардкод-цветов, кроме цвета слоя/категории,
   который приходит данными и подставляется через --ev).
   Тёмная тема наследуется автоматически: все поверхности/линии — переменные.
   Моторика — из motion.css/CSMotion; здесь только статичный визуал и микро-переходы. */

/* ── Общие мелочи ─────────────────────────────────────────────────── */
.hc-visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.hc-row { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; }
.hc-row--tight { gap: var(--sp-2); }
.hc-row--two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.hc-row--split { justify-content: space-between; gap: var(--sp-3); }
.hc-row__label { font-size: var(--fs-sm); color: var(--ink-dim); min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hc-section-title--sm { font-size: var(--fs-body); margin: var(--sp-4) 0 var(--sp-2); }

.hc-textarea { resize: vertical; min-height: 60px; font: 400 var(--fs-sm)/1.5 var(--body); }
.hc-input--mini { max-width: 110px; }

.hc-linkbtn {
  align-self: flex-start; background: none; border: none; cursor: pointer; padding: 2px 0;
  color: var(--brand-strong); font: 500 var(--fs-xs)/1.4 var(--body); text-decoration: underline;
  text-underline-offset: 3px;
}
.hc-linkbtn:hover { color: var(--brand); }

.hc-iconbtn {
  width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  background: var(--surface); color: var(--ink-dim); cursor: pointer; font-size: 1.05rem;
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear, border-color var(--dur-fast) linear;
}
.hc-iconbtn:hover { background: var(--surface-2); color: var(--ink); border-color: var(--line-strong); }
.hc-iconbtn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.hc-details { border-top: 1px solid var(--line); padding-top: var(--sp-3); }
.hc-details > summary { cursor: pointer; font: 500 var(--fs-sm)/1.4 var(--body); color: var(--ink-dim); }
.hc-details > summary:hover { color: var(--ink); }
.hc-details > div { margin-top: var(--sp-3); }

/* Набор чипов-переключателей (напоминания, дни недели, значки) */
.hc-chipset { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.hc-chiptog {
  border: 1px solid var(--line-mid); background: var(--surface); color: var(--ink-dim);
  border-radius: var(--r-pill); padding: 6px 12px; cursor: pointer;
  font: 500 var(--fs-xs)/1.2 var(--body);
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear,
              border-color var(--dur-fast) linear, transform var(--dur-fast) var(--spring);
}
.hc-chiptog:hover { border-color: var(--line-strong); color: var(--ink); transform: translateY(-1px); }
.hc-chiptog.is-on { background: var(--brand-soft); border-color: var(--brand-mid); color: var(--brand-strong); }
.hc-chiptog:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.hc-swatch {
  width: 26px; height: 26px; border-radius: var(--r-pill); cursor: pointer;
  border: 2px solid transparent; background: var(--sw);
  box-shadow: inset 0 0 0 1px var(--line-mid);
  transition: transform var(--dur-fast) var(--spring), border-color var(--dur-fast) linear;
}
.hc-swatch:hover { transform: scale(1.08); }
.hc-swatch.is-on { border-color: var(--ink); }
.hc-swatch:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-colorinput {
  width: 38px; height: 32px; padding: 2px; cursor: pointer;
  border: 1px solid var(--line-mid); border-radius: var(--r-sm); background: var(--surface);
}

/* ── Шапка календаря ──────────────────────────────────────────────── */
/* pan-y на ВСЁМ экране календаря, а не только на сетке: с 17.09.2026 pinch слушается
   на .hc-page--cal (см. mountPinchZoom в screens/calendar.js — сетка на телефоне почти
   целиком под сгибом). Без этого браузер в шапке и в переключателе видов забирал бы
   сведение пальцев себе под нативный зум страницы, и жест снова выглядел бы нерабочим. */
.hc-page--cal { max-width: none; touch-action: pan-y; }
.hc-calbar {
  display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  margin-bottom: var(--sp-4);
}
.hc-calnav { display: flex; align-items: center; gap: var(--sp-2); }
.hc-seg--wide { width: 100%; }
.hc-seg--wide .hc-seg__opt { flex: 1; }

/* ── Быстрый ввод ─────────────────────────────────────────────────── */
.hc-quick { margin-bottom: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); }
.hc-quick__bar { display: flex; gap: var(--sp-2); align-items: stretch; }
.hc-quick__input { flex: 1; min-width: 0; }
/* Высота, а не только ширина: замер 23.09 на 390×844 дал 🎙 44×36 рядом с «Разобрать»
   44px — в одном ряду две кнопки разной высоты (жалоба владельца про «разные визуальные
   языки» в этой области), и 36px к тому же ниже тач-пола 44px. */
.hc-quick__mic { width: 44px; min-height: 2.75rem; }
.hc-quick__mic.is-rec {
  border-color: var(--danger); color: var(--danger-strong); background: var(--danger-soft);
  animation: hc-rec 1.4s var(--ease-out) infinite;
}
@keyframes hc-rec { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--danger) 40%, transparent); } 50% { box-shadow: 0 0 0 6px transparent; } }

.hc-quick__card {
  border: 1px solid var(--brand-mid); background: var(--brand-soft);
  border-radius: var(--r); padding: var(--sp-4);
  display: flex; flex-direction: column; gap: var(--sp-3);
}
.hc-quick__row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.hc-quick__title { font-size: var(--fs-body); }
.hc-quick__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-dim); }

/* ── Раскладка: сетка + панель слоёв ──────────────────────────────── */
.hc-calbody { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: var(--sp-5); align-items: start; }
/* pan-y (не auto) — оставляем вертикальный скролл сетки браузеру, но выключаем
   нативный pinch-to-zoom страницы: иначе он конкурирует с нашим жестом смены вида. */
.hc-calgrid { min-width: 0; touch-action: pan-y; }
.hc-calaside {
  position: sticky; top: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--sp-4);
}

/* ── Сетка дня/недели ─────────────────────────────────────────────── */
.hc-grid {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  overflow: hidden;
}
.hc-grid__head { display: grid; grid-template-columns: 56px 1fr; border-bottom: 1px solid var(--line); }
.hc-grid__head-gutter { border-right: 1px solid var(--line); }
.hc-grid__head-cells { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.hc-grid__daybtn {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--sp-3) 4px; background: none; border: none; cursor: pointer;
  border-left: 1px solid var(--line); color: var(--ink-dim);
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.hc-grid__daybtn:first-child { border-left: none; }
.hc-grid__daybtn:hover { background: var(--surface-2); color: var(--ink); }
.hc-grid__dow { font: 500 var(--fs-xs)/1 var(--body); text-transform: lowercase; }
.hc-grid__dnum { font: 600 var(--fs-h3)/1 var(--disp); color: var(--ink); }
.hc-grid__daybtn.is-today .hc-grid__dnum {
  background: var(--brand); color: var(--ink-on-brand);
  width: 32px; height: 32px; border-radius: var(--r-pill);
  display: grid; place-items: center;
}

.hc-grid__allday { display: grid; grid-template-columns: 56px 1fr; border-bottom: 1px solid var(--line); background: var(--bg-sunk); }
.hc-grid__allday-label { font: 500 var(--fs-xs)/1.2 var(--body); color: var(--ink-dim); padding: var(--sp-2); border-right: 1px solid var(--line); }
/* Подписи жёлоба («Весь день», «Задачи») — одно правило на обе: в колонке 42-56px
   текст переносился по словам/слогам и вырастал в 3-4 строки (замер 23.09: «☐ Задачи»
   -> height 66px, 4.4 строки) — на экране это читалось как «подпись расположена криво».
   Держим их в одну-две строки, по центру жёлоба, без переноса внутри слова. */
.hc-grid__allday-label, .hc-grid__tasks-label {
  display: flex; align-items: center; justify-content: flex-start;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  hyphens: none; word-break: normal;
}
.hc-grid__allday-cells { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.hc-grid__allday-cell { border-left: 1px solid var(--line); padding: 4px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.hc-grid__allday-cell:first-child { border-left: none; }

.hc-pill {
  border: none; cursor: pointer; text-align: left;
  background: color-mix(in oklch, var(--ev) 18%, var(--surface));
  color: var(--ink); border-left: 3px solid var(--ev);
  border-radius: 6px; padding: 3px 6px; font: 500 var(--fs-xs)/1.25 var(--body);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-pill:hover { background: color-mix(in oklch, var(--ev) 28%, var(--surface)); }
.hc-pill--busy { font-style: italic; color: var(--ink-dim); }

/* Списочная раскладка полосы «Весь день» — узкий экран + многодневный вид (см. шапку
   allDayRow в calendar.js): тот же приём, что у hc-grid__tasks-list — день в бейдж
   слева, название забирает всю освободившуюся ширину. */
.hc-grid__allday-list { display: flex; flex-direction: column; gap: 6px; padding: 6px; min-width: 0; }
.hc-allday-item {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0;
  min-height: 2.75rem; cursor: pointer; text-align: left; font: inherit; color: inherit;
  border: none; border-left: 3px solid var(--ev); border-radius: var(--r-sm); padding: 4px 8px;
  background: color-mix(in oklch, var(--ev) 18%, var(--surface));
}
.hc-allday-item--busy { font-style: italic; color: var(--ink-dim); }
.hc-allday-item__day {
  flex: none; min-width: 2.75rem;
  font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-dim);
}
.hc-allday-item__title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 var(--fs-xs)/1.25 var(--body); color: var(--ink);
}

/* Задачи (5.14) в сетке дня/недели — своя полоса НАД часами, отдельно от «Весь день»:
   у задачи нет времени, но она и не событие, поэтому не разделяет с ним ни строку,
   ни стиль плашки (см. hc-task-chip ниже — чекбокс + пунктир, а не заливка цветом слоя). */
.hc-grid__tasks { display: grid; grid-template-columns: 56px 1fr; border-bottom: 1px solid var(--line); background: color-mix(in oklch, var(--warn) 7%, var(--surface)); }
.hc-grid__tasks-label { font: 500 var(--fs-xs)/1.2 var(--body); color: var(--ink-dim); padding: var(--sp-2); border-right: 1px solid var(--line); }
.hc-grid__tasks-cells { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.hc-grid__tasks-cell { border-left: 1px solid var(--line); padding: 6px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.hc-grid__tasks-cell:first-child { border-left: none; }

/* Списочная раскладка полосы задач — узкий экран + многодневный вид (см. шапку tasksRow
   в calendar.js): колонка дня 44px не вмещает название, поэтому день уходит в бейдж
   слева, а название забирает всю освободившуюся ширину. Рамка/заливка/скругление —
   те же, что у hc-task-chip, чтобы задача оставалась узнаваемо задачей, а не событием. */
.hc-grid__tasks-list { display: flex; flex-direction: column; gap: 6px; padding: 6px; min-width: 0; }
.hc-task-row {
  display: flex; align-items: center; gap: 6px; width: 100%; min-width: 0;
  min-height: 2.75rem; cursor: pointer; text-align: left; font: inherit; color: inherit;
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm); padding: 4px 8px;
}
.hc-task-row.is-done { background: var(--bg-sunk); border-style: solid; }
.hc-task-row.is-done .hc-task-chip__dot { background: var(--ok-strong); border-color: var(--ok-strong); }
.hc-task-row__day {
  flex: none; min-width: 2.75rem;
  font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-dim);
}
.hc-task-row.is-done .hc-task-chip__title { color: var(--ink-dim); text-decoration: line-through; }

.hc-task-chip {
  display: flex; align-items: center; gap: 6px; min-width: 0;
  background: var(--surface); border: 1px dashed var(--line-strong);
  border-radius: var(--r-sm); padding: 4px 8px;
}
.hc-task-chip.is-done { background: var(--bg-sunk); border-style: solid; }
.hc-task-chip--sm { padding: 1px 4px; gap: 4px; }

/* Компактный чип — узкие многоколоночные виды (неделя, месяц). Вся карточка целиком
   кликабельна и открывает задачу; отдельного чекбокса здесь НЕТ намеренно (см. шапку
   taskChip в calendar.js): его тач-пол 44px не помещается в 44.8px колонку дня и
   съедал под собой и название, и сам тап. Тач-пол берётся высотой карточки и полной
   шириной ячейки, а не размером иконки. */
.hc-task-chip--compact {
  width: 100%; min-height: 2.75rem; cursor: pointer; text-align: left;
  font: inherit; color: inherit; padding: 4px 6px; gap: 5px;
}
.hc-task-chip--compact.hc-task-chip--sm { min-height: 1.5rem; padding: 2px 4px; gap: 4px; }
/* Индикатор статуса — фиксированный кружок с тем же отступом, что и у текста:
   раньше это был глиф чекбокса переменной ширины, прилепленный к краю карточки. */
.hc-task-chip__dot {
  flex: none; width: 8px; height: 8px; border-radius: var(--r-pill);
  border: 1.5px solid var(--warn-strong); background: transparent;
}
.hc-task-chip--compact.is-done .hc-task-chip__dot { background: var(--ok-strong); border-color: var(--ok-strong); }
.hc-task-chip--compact .hc-task-chip__title {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 500 var(--fs-xs)/1.4 var(--body); color: var(--ink);
}
.hc-task-chip--compact.is-done .hc-task-chip__title { color: var(--ink-dim); text-decoration: line-through; }
/* Чекбокс — визуально прежний глиф, но кликабельная область доведена до тач-пола
   44×44 (padding вокруг иконки, а не увеличение самого символа) — иначе на мобильном
   промахи по соседним пунктам списка задач дня. В --sm (мини-плашки месяца, где
   ячейка сама меньше 44px) тач-пол не применяем — там держим исходный компактный вид. */
.hc-task-chip__cb {
  background: none; border: none; cursor: pointer; padding: 0; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.75rem; min-height: 2.75rem;
  font-size: 0.85rem; line-height: 1; color: var(--warn-strong);
}
.hc-task-chip.is-done .hc-task-chip__cb { color: var(--ok-strong); }
.hc-task-chip--sm .hc-task-chip__cb {
  min-width: 0; min-height: 0; margin: 0; padding: 0;
}
.hc-task-chip__title {
  background: none; border: none; cursor: pointer; padding: 0; flex: 1; min-width: 0;
  text-align: left; font: 500 var(--fs-xs)/1.4 var(--body); color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hc-task-chip.is-done .hc-task-chip__title { color: var(--ink-dim); text-decoration: line-through; }

.hc-grid__body { display: grid; grid-template-columns: 56px 1fr; max-height: 62vh; overflow: auto; position: relative; }
.hc-grid__gutter { border-right: 1px solid var(--line); }
.hc-grid__hour {
  display: flex; justify-content: flex-end; padding-right: 6px;
  font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-ghost);
  border-top: 1px solid var(--line);
}
.hc-grid__hour:first-child { border-top: none; }
.hc-grid__hour span { transform: translateY(-6px); }
.hc-grid__cols { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); }
.hc-grid__col { position: relative; border-left: 1px solid var(--line); min-width: 0; }
.hc-grid__col:first-child { border-left: none; }
.hc-grid__col.is-today { background: color-mix(in oklch, var(--brand) 4%, transparent); }
.hc-grid__slot { border-top: 1px solid var(--line); }
.hc-grid__slot:first-child { border-top: none; }
.hc-grid__slot:hover { background: color-mix(in oklch, var(--brand) 6%, transparent); }
.hc-grid__now { position: absolute; left: 0; right: 0; height: 2px; background: var(--danger); z-index: 3; }
.hc-grid__now::before {
  content: ''; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--danger);
}
.hc-grid__note { margin-top: var(--sp-3); }

.hc-ev {
  position: absolute; z-index: 2; overflow: hidden; text-align: left; cursor: pointer;
  background: color-mix(in oklch, var(--ev) 16%, var(--surface));
  border: 1px solid color-mix(in oklch, var(--ev) 45%, transparent);
  border-left: 3px solid var(--ev);
  border-radius: 8px; padding: 3px 6px;
  display: flex; flex-direction: column; gap: 1px; color: var(--ink);
  transition: transform var(--dur-fast) var(--spring), box-shadow var(--dur-fast) var(--ease-out);
}
.hc-ev:hover { transform: translateY(-1px); box-shadow: var(--shadow); z-index: 4; }
.hc-ev:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.hc-ev__time { font: 500 var(--fs-xs)/1 var(--mono); color: var(--ink-dim); }
.hc-ev__title { font: 600 var(--fs-xs)/1.2 var(--body); overflow: hidden; text-overflow: ellipsis; }
.hc-ev__loc { font: 400 var(--fs-xs)/1.2 var(--body); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; }
/* «Занято» — чужое событие с видимостью busy_only: без деталей, штриховкой. */
.hc-ev--busy {
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, var(--bg-sunk) 6px, var(--bg-sunk) 12px);
  color: var(--ink-dim); font-style: italic;
}
.hc-ev--repeat .hc-ev__time::after { content: ' ↻'; opacity: 0.7; }

/* ── Месяц ────────────────────────────────────────────────────────── */
.hc-month { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.hc-month__dow {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--line); background: var(--bg-sunk);
}
.hc-month__dow span { padding: var(--sp-2); text-align: center; font: 500 var(--fs-xs)/1 var(--body); color: var(--ink-dim); }
.hc-month__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: minmax(96px, auto); }
.hc-month__cell {
  border-left: 1px solid var(--line); border-top: 1px solid var(--line);
  padding: 4px; display: flex; flex-direction: column; gap: 2px; min-width: 0;
}
.hc-month__cell:nth-child(7n + 1) { border-left: none; }
.hc-month__cell.is-out { background: var(--bg-sunk); }
.hc-month__cell.is-out .hc-month__num { color: var(--ink-ghost); }
.hc-month__cell.is-today { background: color-mix(in oklch, var(--brand) 5%, transparent); }
.hc-month__num {
  align-self: flex-start; background: none; border: none; cursor: pointer;
  font: 600 var(--fs-sm)/1 var(--body); color: var(--ink-dim);
  width: 26px; height: 26px; border-radius: var(--r-pill);
  transition: background var(--dur-fast) linear, color var(--dur-fast) linear;
}
.hc-month__num:hover { background: var(--surface-2); color: var(--ink); }
.hc-month__cell.is-today .hc-month__num { background: var(--brand); color: var(--ink-on-brand); }
.hc-month__ev {
  display: flex; align-items: center; gap: 5px; min-width: 0;
  background: none; border: none; cursor: pointer; padding: 2px 4px; border-radius: 6px;
  font: 500 var(--fs-xs)/1.25 var(--body); color: var(--ink); text-align: left;
}
.hc-month__ev:hover { background: var(--surface-2); }
.hc-month__ev.is-busy { color: var(--ink-dim); font-style: italic; }
.hc-month__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ev); flex: none; }
.hc-month__evtitle { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-month__more {
  background: none; border: none; cursor: pointer; text-align: left; padding: 1px 4px;
  font: 500 var(--fs-xs)/1.2 var(--body); color: var(--brand-strong);
}

/* ── Таймлайн ─────────────────────────────────────────────────────── */
.hc-timeline { display: flex; flex-direction: column; gap: var(--sp-4); }
.hc-timeline__day { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--sp-3); }
.hc-timeline__date {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  color: var(--ink-dim); padding-top: 6px;
}
.hc-timeline__date b { font: 600 var(--fs-h3)/1 var(--disp); color: var(--ink); }
.hc-timeline__date span { font-size: var(--fs-xs); }
.hc-timeline__date.is-today b { color: var(--brand-strong); }
.hc-timeline__items { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.hc-tline {
  display: flex; align-items: flex-start; gap: var(--sp-3); text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--ev);
  border-radius: var(--r); padding: var(--sp-3) var(--sp-4); min-width: 0;
  transition: transform var(--dur-fast) var(--spring), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) linear;
}
.hc-tline:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: var(--line-mid); }
.hc-tline:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-tline.is-busy { background: var(--bg-sunk); color: var(--ink-dim); font-style: italic; }
/* Задача в ленте — пунктирная граница вместо сплошной цветной (border-left: var(--ev)
   у обычной hc-tline), чекбокс вместо времени: тот же принцип различия, что и в сетке. */
.hc-tline--task { border-left-style: dashed; border-left-color: var(--warn); }
.hc-tline--task.is-done { border-left-color: var(--ok); }
.hc-tline--task.is-done .hc-tline__title { color: var(--ink-dim); text-decoration: line-through; }
.hc-tline__cb { font-size: 1rem; text-align: center; }
.hc-tline__time { font: 600 var(--fs-sm)/1.4 var(--mono); color: var(--ink-dim); flex: none; min-width: 52px; }
.hc-tline__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.hc-tline__title { font-size: var(--fs-body); overflow: hidden; text-overflow: ellipsis; }
.hc-tline__meta { display: flex; flex-wrap: wrap; gap: var(--sp-2); font-size: var(--fs-xs); color: var(--ink-dim); }

/* ── Панель слоёв ─────────────────────────────────────────────────── */
.hc-layers__list { display: flex; flex-direction: column; gap: 2px; margin-bottom: var(--sp-3); }
.hc-layer {
  display: flex; align-items: center; gap: var(--sp-2); cursor: pointer;
  padding: 6px 8px; border-radius: var(--r-sm); min-width: 0;
  transition: background var(--dur-fast) linear;
}
.hc-layer:hover { background: var(--surface-2); }
.hc-layer__cb { accent-color: var(--brand); width: 16px; height: 16px; flex: none; }
.hc-layer__dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.hc-layer__name { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-layer .hc-chip { font-size: 0.7rem; padding: 2px 6px; }
.hc-layer .hc-iconbtn { width: 28px; height: 28px; font-size: 0.9rem; }
.hc-layers__actions { margin-bottom: var(--sp-2); }

/* ── Категории ────────────────────────────────────────────────────── */
.hc-catrow {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-sm);
  background: var(--surface); min-width: 0;
}
.hc-catrow__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.hc-catrow__ic { flex: none; }
.hc-catrow__name { flex: 1; min-width: 0; font-size: var(--fs-sm); overflow: hidden; text-overflow: ellipsis; }
.hc-catrow__actions { display: flex; gap: 4px; flex: none; }
.hc-catform {
  display: flex; flex-direction: column; gap: var(--sp-3);
  border: 1px dashed var(--line-strong); border-radius: var(--r); padding: var(--sp-4);
}
.hc-catform .hc-btn { align-self: flex-start; }

/* ── Уведомления ──────────────────────────────────────────────────── */
.hc-notifhead { margin-bottom: var(--sp-4); }
.hc-notif {
  display: flex; align-items: flex-start; gap: var(--sp-3); width: 100%; text-align: left;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--sp-3) var(--sp-4); cursor: pointer;
  transition: background var(--dur-fast) linear, transform var(--dur-fast) var(--spring);
}
.hc-notif:hover { background: var(--surface-2); transform: translateX(2px); }
.hc-notif:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hc-notif.is-read { opacity: 0.62; }
.hc-notif__ic {
  width: 30px; height: 30px; border-radius: var(--r-pill); flex: none;
  display: grid; place-items: center; font-size: 0.9rem;
}
.hc-notif__body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.hc-notif__title { font-size: var(--fs-sm); }
.hc-notif__text { font-size: var(--fs-xs); color: var(--ink-dim); overflow: hidden; text-overflow: ellipsis; }
.hc-notif__ts { font: 400 var(--fs-xs)/1.4 var(--mono); color: var(--ink-ghost); flex: none; }

/* Счётчик непрочитанных на пункте навигации */
.hc-nav__badge {
  min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-pill);
  background: var(--brand); color: var(--ink-on-brand);
  font: 600 0.68rem/18px var(--body); text-align: center; flex: none;
}
.hc-nav--bottom .hc-nav__badge { position: absolute; top: 2px; right: calc(50% - 18px); }
.hc-nav--side .hc-nav__badge { margin-left: auto; }

/* ── Выбор места события (виджет F1, Яндекс-геокодер) ────────────── */
.hc-locpick { position: relative; flex: 1 1 200px; }
.hc-locpick__row { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; }
.hc-locpick__drop {
  position: absolute; z-index: 20; left: 0; right: 0; top: 100%; margin-top: 2px;
  background: var(--surface); border: 1px solid var(--line-mid); border-radius: var(--r-sm);
  box-shadow: 0 8px 24px rgba(0, 0, 0, .28); max-height: 220px; overflow-y: auto;
}
.hc-locpick__opt {
  display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2);
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 8px 10px; color: var(--ink); font: 400 var(--fs-sm)/1.4 var(--body);
}
.hc-locpick__opt:hover, .hc-locpick__opt:focus-visible { background: var(--surface-2); }
.hc-locpick__opt-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-locpick__opt-meta { flex: none; color: var(--ink-dim); font-size: var(--fs-xs); }
.hc-locpick__coords { color: var(--ink-dim); font-size: var(--fs-xs); }
.hc-locpick__route { align-self: flex-start; }

/* ── Адаптив ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .hc-calbody { grid-template-columns: minmax(0, 1fr); }
  .hc-calaside { position: static; order: 2; }
}
@media (max-width: 640px) {
  /* Жёлоб 48px, а не 42px: в 42px подпись «Задачи» не помещалась в строку и ломалась
     переносом. Меняется СРАЗУ у всех четырёх рядов — иначе разъедется выравнивание
     ячеек задач относительно колонок часовой сетки (оно замерено ровным, 0.0px). */
  .hc-grid__head, .hc-grid__allday, .hc-grid__tasks, .hc-grid__body { grid-template-columns: 48px 1fr; }
  /* 0.62rem, а не --fs-xs: замер 23.09 — «Задачи» при 0.7rem требует 51px, а в жёлобе
     48px под текст остаётся 47px, и слово уезжало на вторую строку. Подпись жёлоба —
     служебная надпись того же ранга, что номера часов рядом, мельче основного текста. */
  .hc-grid__allday-label, .hc-grid__tasks-label { padding: var(--sp-1); font-size: 0.62rem; letter-spacing: -0.01em; }
  .hc-grid__dnum { font-size: var(--fs-body); }
  .hc-month__grid { grid-auto-rows: minmax(72px, auto); }
  .hc-month__evtitle { display: none; }          /* на узком — только точки-индикаторы */
  .hc-month__ev { padding: 1px 2px; }
  .hc-row--two { grid-template-columns: 1fr; }
  .hc-timeline__day { grid-template-columns: 44px minmax(0, 1fr); }
  .hc-quick__bar { flex-wrap: wrap; }
  .hc-quick__input { flex: 1 1 100%; }
}

/* ── Reduced motion ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hc-quick__mic.is-rec { animation: none; }
  .hc-ev:hover, .hc-tline:hover, .hc-notif:hover, .hc-chiptog:hover, .hc-swatch:hover { transform: none; }
}