/* Стили экрана «Задачи» — календарь: часы, «НА ДЕНЬ», плашки, черта «сейчас», «2 дня», «Неделя», «Месяц», перетаскивание (часть 3, этапы К1, К3 и К4; SPEC-NEW-LOOK-3, 1.1 и 1.2; макеты design/новый-вид/часть-3/html/01, 03, 04, 05).
   ЗАГОТОВКА этапа 3.0 («строки заранее», 1.8) наполняется по очереди (одна линия, конфликта в файле нет): К1 («День») сделан — шапка дня, полоса «НА ДЕНЬ», часы, плашки, «+N», черта «сейчас», сдвиг при листании;
   наполняют этапы К3 («2 дня», «Неделя», «Месяц») и К4 (подъём плашки и цель).
   Корень экрана (#scrTasks, класс tasks-screen: растянуть на область, flex-колонка, position: relative для панели «Без даты») и #calRoot: разметка в index.html, скрыта до Frame.tasksReady(true), внутри разметку кладёт 090-cal.js.
   Область часов — родная прокрутка (overflow-y: auto, touch-action: pan-y, overscroll-behavior: contain); плашка получает из кода только числа-переменные (--m, --len, --col, --cols), пиксели считает CSS (--cal-min).
   Только переменные из 10-tokens.css (свои — в блоках «часть 3 · К1», «К3» и «К4»): цветов, радиусов и размеров текста числами здесь быть не должно (сторож — tests/web-tokens.test.ts, файлы 7x и 8x).
   Зоны нажатия не меньше --tap: у «Сегодня», «таблеток» и низких плашек зона шире видимой формы (::after; у плашек она лежит под всеми плашками — z-index: -1 внутри .cal-plates, — поэтому занимает только свободное место
   и не отбирает нажатие у соседней плашки). */

/* ---------- корень экрана ---------- */
.tasks-screen { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; }
.tasks-screen[hidden] { display: none; }
.cal-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ---------- шапка: дата, строка «сегодня · сделано 2 из 7», стрелки, «Сегодня» ---------- */
.cal-head { flex: none; display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-2) var(--sp-6) var(--sp-6) calc(var(--gutter) + var(--sp-4)); }
.cal-titles { flex: 1; min-width: 0; }
.cal-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-bold); color: var(--c-text); }
.cal-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2); }
.cal-arrow { flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; border-radius: var(--r-round); color: var(--c-text-2); }
.cal-arrow:active { background: var(--c-field); }
.cal-today {
  position: relative; flex: none; height: var(--tap-chip); padding: 0 var(--sp-12); border: 1px solid var(--c-line); border-radius: var(--r-pill);
  font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text);
}
.cal-today::after { content: ""; position: absolute; inset: calc((var(--tap-chip) - var(--tap)) / 2) 0; }   /* зона нажатия — не меньше --tap */
.cal-today.is-here { color: var(--c-text-2); }                                   /* день уже сегодняшний: кнопка приглушена, но нажимается — прокручивает к «сейчас» */
.cal-today:active { background: var(--c-field); }

/* пометка у дней дальше месяца назад: сделанное за них состояние не несёт (090-cal.js) */
.cal-note { flex: none; padding: 0 var(--gutter) var(--sp-8) calc(var(--gutter) + var(--sp-4)); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2); }
.cal-note[hidden] { display: none; }

/* ---------- строка под шапкой: диапазоны «День · 2 дня · Неделя · Месяц» и «Без даты» (этапы К3 и К2; пока пуста и скрыта) ---------- */
.cal-tools { flex: none; display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--gutter) var(--sp-8); }
.cal-tools[hidden] { display: none; }

/* ---------- «НА ДЕНЬ»: над часами, не прокручивается вместе с ними ---------- */
.cal-allday { flex: none; display: flex; align-items: center; gap: var(--sp-6); padding: 0 var(--gutter) var(--sp-8); }
.cal-allday[hidden] { display: none; }
.cal-allday-k { flex: none; font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); color: var(--c-allday); }
.cal-pills {
  flex: 1; min-width: 0; display: flex; gap: var(--sp-6); padding: var(--sp-4) 0;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x;
}
.cal-pills::-webkit-scrollbar { display: none; }
.cal-pill {
  position: relative; flex: none; max-width: 100%; height: var(--tap-chip); display: flex; align-items: center; gap: var(--sp-6); padding: 0 var(--sp-10);
  border: 1px solid var(--c-allday-line); border-radius: var(--r-10); background: var(--c-allday-bg); color: var(--c-allday-text);
  font-size: var(--fs-small); line-height: var(--lh-small); white-space: nowrap;
}
.cal-pill::after { content: ""; position: absolute; inset: calc((var(--tap-chip) - var(--tap)) / 2) 0; }   /* зона нажатия — не меньше --tap */
.cal-pill > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-pill:active { opacity: .8; }
.cal-pill.is-urgent { border-color: var(--c-urgent-line); background: var(--c-urgent-bg); color: var(--c-urgent-text); }
.cal-mark { flex: none; font-style: normal; font-weight: var(--fw-semibold); color: var(--c-text-2); }   /* пометка дня у дела, что тянется с прошлого: «вчера», «вт» */
.cal-pill.is-urgent .cal-mark { color: var(--c-urgent-text); }

/* ---------- часы: родная прокрутка вверх-вниз ---------- */
.cal-scroll {
  flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: none; touch-action: pan-y;
  border-top: 1px solid color-mix(in srgb, var(--c-line) 55%, transparent);
  -webkit-tap-highlight-color: transparent;
}
.cal-scroll::-webkit-scrollbar { display: none; }
.cal-body { position: relative; height: calc(24 * var(--cal-hour) + var(--cal-pad) + var(--cal-plate-min-h)); }   /* сутки целиком; запас снизу — для самой низкой плашки в 23:50 */
.cal-track { position: absolute; left: 0; right: 0; top: var(--cal-pad); height: calc(24 * var(--cal-hour)); -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }

/* сетка часов: подпись слева, линия до правого поля; рисуется один раз */
.cal-grid { position: absolute; inset: 0; pointer-events: none; }
.cal-hr { position: absolute; left: 0; right: 0; top: calc(var(--hr) * var(--cal-hour)); height: 0; }
.cal-hl {
  position: absolute; left: 0; width: calc(var(--cal-gutter-w) - var(--sp-8)); top: calc(var(--lh-micro) / -2); text-align: right;
  font-size: var(--fs-micro); line-height: var(--lh-micro); font-variant-numeric: tabular-nums; color: var(--c-text-2);
}
.cal-hline { position: absolute; left: var(--cal-gutter-w); right: var(--gutter); top: 0; border-top: 1px solid color-mix(in srgb, var(--c-line) 55%, transparent); }

/* ---------- плашки ---------- */
.cal-plates { position: absolute; top: 0; bottom: 0; left: var(--cal-gutter-w); right: var(--gutter); isolation: isolate; }
.cal-plate {
  position: absolute; top: calc(var(--m) * var(--cal-min)); height: max(calc(var(--len) * var(--cal-min) - var(--sp-2)), var(--cal-plate-min-h));
  left: calc(100% * var(--col) / var(--cols)); width: calc(100% / var(--cols) - var(--sp-2));
  display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4) var(--sp-8); text-align: left;
  border: 1px solid var(--c-edge); border-radius: var(--r-8); background: var(--c-card); color: var(--c-text);
  font-size: var(--fs-small); line-height: var(--lh-small);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
/* зона нажатия не меньше --tap: у низкой плашки продолжается за её края, но под всеми плашками (z-index: -1 внутри .cal-plates), то есть только в свободное место */
.cal-plate::after { content: ""; position: absolute; left: 0; right: 0; z-index: -1; top: min(0px, calc((100% - var(--tap)) / 2)); bottom: min(0px, calc((100% - var(--tap)) / 2)); }
.cal-plate:active { opacity: .8; }
.cal-time {
  flex: none; display: flex; align-items: center; gap: var(--sp-4); max-width: 100%; overflow: hidden; white-space: nowrap;
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-variant-numeric: tabular-nums; opacity: .85;
}
.cal-name {
  flex: 1; min-width: 0; min-height: 0; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: var(--lines, 1); line-clamp: var(--lines, 1);   /* число строк ставит код по длине плашки (Cal.lines), чтобы вторая строка не резалась по высоте */
  font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-semibold);
}
.cal-sph { position: absolute; top: var(--sp-8); right: var(--sp-8); width: 7px; height: 7px; border-radius: var(--r-round); background: var(--c); }   /* цвет сферы: --c ставит разметка */
.cal-plate .cal-time { padding-right: var(--sp-12); }                            /* время не заходит под точку сферы */
.cal-flag { font-size: var(--fs-micro); line-height: var(--lh-micro); font-weight: var(--fw-bold); letter-spacing: var(--ls-caps); }

/* низкая плашка (до 45 минут): время и название в одну строку */
.cal-plate.is-row { flex-direction: row; align-items: center; gap: var(--sp-6); padding-top: 0; padding-bottom: 0; }
.cal-plate.is-row .cal-time { padding-right: 0; opacity: .85; }
.cal-plate.is-row .cal-name { display: block; white-space: nowrap; text-overflow: ellipsis; line-clamp: none; -webkit-line-clamp: none; font-size: var(--fs-small); line-height: var(--lh-small); }
.cal-plate.is-row .cal-sph { position: static; flex: none; }
/* узкая плашка (дела рядом): в одну строку остаётся одно название, без метки «СРОЧНО» */
.cal-plate.is-narrow { padding-left: var(--sp-6); padding-right: var(--sp-6); }
.cal-plate.is-narrow.is-row .cal-time, .cal-plate.is-narrow .cal-flag { display: none; }

/* срочное: красная плашка, рамка и лёгкое свечение */
.cal-plate.is-urgent {
  border-color: var(--c-urgent-line); background: var(--c-urgent-bg);
  box-shadow: inset 0 0 0 1px var(--c-urgent-line), 0 0 var(--sp-10) color-mix(in srgb, var(--c-urgent-line) 45%, transparent);
}
.cal-plate.is-urgent .cal-time { color: var(--c-urgent-text); font-weight: var(--fw-bold); opacity: 1; }
.cal-plate.is-urgent .cal-name { font-weight: var(--fw-bold); }
/* встреча: синяя */
.cal-plate.is-meet { border-color: color-mix(in srgb, var(--c-meet) 35%, transparent); background: var(--c-meet-bg); }
.cal-plate.is-meet .cal-time { color: var(--c-meet-text); }
/* продолжение встречи, начатой накануне: верхний край пунктиром */
.cal-plate.is-cont { border-top-style: dashed; }
/* сделанное: бледное и зачёркнутое */
.cal-plate.is-done { border-color: var(--c-line); background: transparent; color: var(--c-text-2); }
.cal-plate.is-done .cal-name { text-decoration: line-through; font-weight: var(--fw-medium); }
.cal-check { display: flex; flex: none; color: var(--c-done); }
.cal-check .ico { width: 13px; height: 13px; stroke-width: 3; }
/* «+N»: лишнее сверх столбцов; касание раскрывает день */
.cal-plate.is-more { align-items: center; justify-content: center; padding: 0; background: var(--c-field); border-color: var(--c-line); color: var(--c-text-2); font-weight: var(--fw-semibold); }

/* ---------- черта «сейчас» (только у сегодняшнего дня), цвет акцента ---------- */
.cal-nowbox { position: absolute; inset: 0; z-index: 1; pointer-events: none; }                 /* над плашками (они в своём изолированном слое), нажатия пропускает */
.cal-now { position: absolute; left: 0; right: var(--gutter); top: calc(var(--m) * var(--cal-min)); height: 0; }
.cal-now::before { content: ""; position: absolute; left: calc(var(--cal-gutter-w) - var(--sp-4)); right: 0; top: calc(var(--cal-now-h) / -2); height: var(--cal-now-h); border-radius: var(--r-pill); background: var(--c-cal-now); }
.cal-now-t {
  position: absolute; left: var(--sp-2); top: calc(var(--lh-caption) / -2); padding: 0 var(--sp-4); border-radius: var(--r-pill);
  background: var(--c-cal-now); color: var(--c-on-accent); font-size: var(--fs-micro); line-height: var(--lh-caption); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums;
}

/* ---------- листание дня: короткая смена (без движения за пальцем); при «уменьшить движение» — без анимации ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cal-body.slide-next { animation: cal-in-next var(--d-mid) var(--ease-out); }
  .cal-body.slide-prev { animation: cal-in-prev var(--d-mid) var(--ease-out); }
}
@keyframes cal-in-next { from { opacity: 0; transform: translateX(var(--cal-slide)); } to { opacity: 1; transform: none; } }
@keyframes cal-in-prev { from { opacity: 0; transform: translateX(calc(-1 * var(--cal-slide))); } to { opacity: 1; transform: none; } }