/* Блок «Сегодня» над лентой «Разговора» (этап 2б; разметка и поведение — 088-today.js, макеты design/новый-вид/часть-1/html/01–05).
   Сверху вниз: неделя Пн–Вс → заголовок дня → строка «НА ДЕНЬ» → ряд карточек; свёрнутый вид — одна строка (td-fold).
   Только токены из 10-tokens.css: цветов, радиусов и размеров текста числами здесь нет (проверяет tests/web-tokens.test.ts).
   Ряд карточек и строка «НА ДЕНЬ» прокручиваются родным overflow-x: auto и touch-action: pan-x (084-viewport.js такой жест, в том числе косой, не гасит), у них overflow-y: hidden — вертикально они не едут;
   у полосы недели прокрутки нет: листание недели — жест в 088-today.js. Зоны нажатия не меньше --tap: у «таблетки» зона шире видимой формы (::after). */

.today-slot[hidden] { display: none; }

/* ---------- панель ---------- */
.td-full {
  margin: 0 var(--gutter); padding: var(--sp-8) 0 var(--sp-6);
  background: var(--c-surface); border: 1px solid var(--c-edge); border-radius: var(--r-16);
}

/* ---------- неделя ---------- */
.td-week {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: var(--sp-2); padding: 0 var(--sp-8);
  -webkit-user-select: none; user-select: none;
}
.td-day {
  position: relative; min-height: var(--tap-btn); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  border-radius: var(--r-10); color: var(--c-text);
}
.td-wd { font-size: var(--fs-micro); line-height: var(--lh-micro); color: var(--c-text-2); }
.td-dom { font-size: var(--fs-lead); line-height: var(--lh-small); font-weight: var(--fw-semibold); }
.td-dots { display: flex; gap: var(--sp-2); height: var(--sp-4); }
.td-dot { width: var(--sp-4); height: var(--sp-4); border-radius: var(--r-round); background: var(--c-text-2); }
.td-dot.is-urgent { background: var(--c-urgent); }
.td-day.is-today { box-shadow: inset 0 0 0 2px var(--c-accent); }               /* сегодня всегда обведено */
.td-day.is-sel { background: var(--c-text); color: var(--c-inverse); }          /* выбранный день залит */
.td-day.is-sel .td-wd { color: var(--c-inverse); }
.td-day.is-sel .td-dom { font-weight: var(--fw-bold); }
.td-day.is-sel .td-dot { background: var(--c-inverse); }
.td-day.is-sel .td-dot.is-urgent { background: var(--c-urgent); }

/* ---------- заголовок дня ---------- */
.td-head { display: flex; align-items: center; gap: var(--sp-8); padding: 0 var(--sp-4) 0 var(--sp-12); }
.td-title {
  flex: 1; min-width: 0; min-height: var(--tap); text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-sub); line-height: var(--lh-sub); font-weight: var(--fw-semibold); color: var(--c-text);
}
.td-sum { flex: none; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--c-text-2); }
.td-chev { flex: none; width: var(--tap); height: var(--tap); display: grid; place-items: center; color: var(--c-text-2); }
.td-chev .ico { width: 16px; height: 16px; transform: rotate(-90deg); }          /* шеврон вверх: «свернуть» */

/* ---------- «НА ДЕНЬ» ---------- */
.td-allday { display: flex; align-items: center; gap: var(--sp-6); padding: 0 var(--sp-12); }
.td-allday[hidden] { display: none; }
.td-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); }
.td-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;
}
.td-pills::-webkit-scrollbar { display: none; }
.td-pill {
  position: relative; flex: none; 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;
}
.td-pill::after { content: ""; position: absolute; inset: calc((var(--tap-chip) - var(--tap)) / 2) 0; }   /* зона нажатия — не меньше --tap */
.td-pill.is-urgent { border-color: var(--c-urgent-line); background: var(--c-urgent-bg); color: var(--c-urgent-text); }
.td-pill .td-sph { position: static; }

/* ---------- ряд карточек ---------- */
.td-row {
  position: relative; display: flex; align-items: stretch; gap: var(--sp-8); padding: var(--sp-10) var(--sp-12);
  overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scrollbar-width: none; touch-action: pan-x;   /* вбок — родная прокрутка; вертикальный жест над рядом ничего не двигает */
}
.td-row[hidden] { display: none; }                                                 /* в этот день нечего показывать в ряду — полосы нет */
.td-row::-webkit-scrollbar { display: none; }
.td-row::after { content: ""; flex: none; width: var(--sp-4); }                  /* правый отступ: padding у прокручиваемого ряда не всегда входит в длину прокрутки */

.td-card {
  position: relative; flex: none; width: var(--card-w); height: var(--card-h); padding: var(--sp-8) var(--sp-10);
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sp-2); text-align: left;
  border: 1px solid var(--c-edge); border-radius: var(--r-12); background: var(--c-card); color: var(--c-text);
}
.td-card:active, .td-pill:active, .td-done:active { opacity: .8; }
.td-time {
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold);
}
.td-name {
  width: 100%; overflow: hidden; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2;
  font-size: var(--fs-small); line-height: var(--lh-small);
}
.td-sph { position: absolute; top: var(--sp-12); right: var(--sp-10); width: 7px; height: 7px; border-radius: var(--r-round); background: var(--c); }   /* цвет сферы: --c ставит разметка */
.td-card .td-time { padding-right: var(--sp-12); }                                 /* время не заходит под точку сферы */

/* срочное: красная карточка, рамка и лёгкое свечение */
.td-card.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);
}
.td-card.is-urgent .td-time { color: var(--c-urgent-text); font-weight: var(--fw-bold); }
.td-card.is-urgent .td-name { font-weight: var(--fw-bold); }
/* встреча: синяя */
.td-card.is-meet { border-color: color-mix(in srgb, var(--c-meet) 35%, transparent); background: var(--c-meet-bg); }
.td-card.is-meet .td-time { color: var(--c-meet-text); }
/* тянется с прошлого дня: пометка дня вместо времени — приглушена (у срочного остаётся красной) */
.td-card.is-late:not(.is-urgent) .td-time { color: var(--c-text-2); }
/* сделанное, раскрытое по «✓ N» */
.td-card.is-done { background: var(--c-field); }
.td-card.is-done .td-time { color: var(--c-done); }
.td-card.is-done .td-name { color: var(--c-text-2); text-decoration: line-through; }

/* черта «сейчас» между прошедшим и будущим */
.td-now { flex: none; width: var(--sp-2); border-radius: var(--r-pill); background: var(--c-now); }

/* «✓ N» в начале ряда: сделанные свёрнуты; касание раскрывает */
.td-done {
  flex: none; width: var(--tap); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  border-radius: var(--r-12); background: var(--c-field); color: var(--c-text-2); font-size: var(--fs-caption); line-height: var(--lh-caption);
}
.td-done .ico { width: 14px; height: 14px; stroke-width: 3; }
.td-done.is-open { color: var(--c-done); }

/* ---------- свёрнутый вид: одна строка ---------- */
.td-fold {
  display: none; width: calc(100% - 2 * var(--gutter)); min-height: var(--field-h); margin: 0 var(--gutter);
  align-items: center; gap: var(--sp-10); padding: var(--sp-6) var(--sp-12); text-align: left;
  border: 1px solid var(--c-edge); border-radius: var(--r-14); background: var(--c-surface); color: var(--c-text);
}
.today-slot.is-fold .td-fold, .phone.kb .td-fold { display: flex; }
.today-slot.is-fold .td-full, .phone.kb .td-full { display: none; }              /* при открытой клавиатуре — сразу, не дожидаясь скрипта */
.td-fold-day {
  flex: none; padding: var(--sp-2) var(--sp-6); border-radius: var(--r-8); background: var(--c-text); color: var(--c-inverse);
  font-size: var(--fs-caption); line-height: var(--lh-caption); font-weight: var(--fw-bold);
}
.td-fold-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.td-fold-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-2); }
.td-fold-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); }
.td-fold-cnt { flex: none; font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--c-text-2); }
.td-fold-chev { width: 16px; height: 16px; color: var(--c-text-2); transform: rotate(90deg); }   /* шеврон вниз: «развернуть» */

/* «+» в конце ряда: новое дело на этот день (088-today.js, data-act="add"; Details.openNew). Лежит в ряду, но карточкой не является; у прошлых дней его нет */
.td-add {
  flex: none; width: var(--tap-big); height: var(--card-h); display: grid; place-items: center;
  border: 1px dashed var(--c-line); border-radius: var(--r-12); background: transparent; color: var(--c-text-2);
}
.td-add:only-child { width: var(--card-w); }                                       /* в ряду ничего нет, кроме «+»: он пошире */
.td-add .ico { width: 20px; height: 20px; }
.td-add:active { opacity: .8; }