/* =============================================================================
   905 — PLANNING CHRONO (Хронометраж)
   Подвкладка раздела "Задачи": облако кружков-дел, размер ∝ √минут,
   цвет ∝ минут (pastel → vivid).
   ============================================================================= */

/* Слой --planning-* общий с Задачами (900-planning.css) и держит запасные
   значения старого синего набора. Для экрана хронометража он переведён на роли
   v4: ниже по файлу ~200 обращений к --planning-* получают цвета набора
   (песочная, песочная тёмная, синяя, синяя тёмная) без правки каждого места.
   Задачи этим правилом не затронуты: оно действует только там, где есть
   .chrono-screen. */
.planning-tab:has(.chrono-screen) {
    --planning-surface: var(--v4-card, #f7efe2);
    --planning-surface-elevated: var(--v4-chip, #efe3cf);
    --planning-border: var(--v4-line, rgba(0, 0, 0, 0.08));
    --planning-border-soft: var(--v4-line, rgba(0, 0, 0, 0.08));
    --planning-accent: var(--v4-act, #c67139);
    --planning-accent-soft: var(--v4-accent-bg, #f0dcc6);
    --planning-text: var(--v4-ink, #201e1d);
    --planning-muted: var(--v4-ink-2, rgba(0, 0, 0, 0.56));
    --planning-muted-soft: var(--v4-ink-3, rgba(0, 0, 0, 0.45));
    background: var(--v4-bg, #fffaf1);
    font-family: Manrope, system-ui, sans-serif;
}

/* Подложка модалок хронометража — стандарт продукта: роль --scrim набора и
   единый blur --v4-modal-backdrop-blur (а не rgba(15,23,42,.3) и blur(8px)
   общего слоя Задач). */
.planning-tab:has(.chrono-screen) .planning-modal-overlay {
    background: var(--scrim, rgba(32, 30, 29, 0.5));
    -webkit-backdrop-filter: blur(var(--v4-modal-backdrop-blur, 2.5px));
    backdrop-filter: blur(var(--v4-modal-backdrop-blur, 2.5px));
}

/* planning-content по умолчанию (для list/calendar/gantt) — обычный
   overflow-y:auto без flex. Для нашего экрана хроно нужен flex-column,
   чтобы chrono-cloud по-настоящему растягивался по вертикали и баблы
   центрировались между strip и низом, а не прижимались к верху. */
.planning-tab:has(.chrono-screen) .planning-content {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chrono-screen {
    display: flex;
    flex-direction: column;
    width: 100%;
    /* Двойной механизм роста по высоте — на случай если `.planning-content`
       НЕ flex-родитель (например, если :has-селектор сверху не применился):
       flex: 1 работает когда parent — flex; height: 100% когда parent — block. */
    flex: 1 1 0;
    height: 100%;
    min-height: 0;
    padding: 18px 12px calc(88px + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    gap: 12px;
    /* Скролл на самом экране, а не на cloud — иначе breakdown-бар в режиме
       «неделя» как sibling cloud уезжает за низ экрана без возможности
       проскроллить. Теперь облако растёт под свой контент + minHeight, а
       весь экран листается, если содержимого больше высоты. */
    overflow-y: auto;
    overflow-x: hidden;
    /* Без bounce/pull-to-refresh: иначе при перетаскивании кружка к нижнему
       краю (к корзине) жест перехватывается overscroll'ом и drag срывается. */
    overscroll-behavior: contain;
}

/* На время перетаскивания кружка жёстко глушим прокрутку/жесты страницы,
   чтобы палец дотянул кружок до корзины в углу и жест не «оттягивал» экран.
   Класс вешает ChronoCloud на <html> в handleDragStart, снимает в handleDragEnd. */
html.chrono-bubble-dragging,
html.chrono-bubble-dragging body {
    overscroll-behavior: none;
    touch-action: none;
}
html.chrono-bubble-dragging .chrono-screen {
    /* НЕ overflow: hidden — иначе тащимый кружок обрезается по пути к корзине.
       touch-action:none гасит прокрутку контейнера, не обрезая контент. */
    touch-action: none;
}

/* --- Timer banner (активный таймер вверху экрана) --- */
.chrono-timer-banner {
    --hue: 200deg;
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border-radius: 12px;
    background: hsl(var(--hue) 35% 96%);
    border: 1px solid hsl(var(--hue) 35% 80%);
    color: hsl(var(--hue) 30% 22%);
    font-size: 13px;
    overflow: hidden;
}

.chrono-timer-banner__fill {
    position: absolute;
    inset: 0 auto 0 0;
    background: hsl(var(--hue) 55% 70% / 0.35);
    transition: width 0.5s linear;
    z-index: 0;
}

.chrono-timer-banner__emoji,
.chrono-timer-banner__name,
.chrono-timer-banner__time,
.chrono-timer-banner__paused,
.chrono-timer-banner__control,
.chrono-timer-banner__stop {
    position: relative;
    z-index: 1;
}

.chrono-timer-banner.is-paused .chrono-timer-banner__fill {
    opacity: 0.45;
}

.chrono-timer-banner__emoji {
    font-size: 18px;
    line-height: 1;
}

.chrono-timer-banner__name {
    flex: 1 1 auto;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-timer-banner__time {
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    font-size: 15px;
}

.chrono-timer-banner__paused {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.08);
    font-size: 11px;
    font-weight: 700;
}

.chrono-timer-banner__control,
.chrono-timer-banner__stop {
    border: none;
    background: transparent;
    color: var(--v4-warn-text, #a1471c);
    font-size: 16px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.chrono-timer-banner__control {
  position: relative;
    color: var(--v4-act-text, #8a4a20);
}

@media (hover: hover) {
  .chrono-timer-banner__control:hover,
.chrono-timer-banner__stop:hover {
    background: color-mix(in srgb, var(--v4-warn-soft, #c9922e) 12%, transparent);
}
}

@media (hover: hover) {
  .chrono-timer-banner__control:hover {
    background: color-mix(in srgb, var(--v4-act, #c67139) 12%, transparent);
}
}

/* --- Timer complete / stop modals --- */
.chrono-timer-complete,
.chrono-timer-stop {
    max-width: 380px;
    width: calc(100% - 24px);
}

.chrono-timer-complete__body,
.chrono-timer-stop__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chrono-timer-complete__activity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.chrono-timer-complete__emoji {
    font-size: 24px;
    line-height: 1;
}

.chrono-timer-complete__msg {
    color: var(--planning-muted, #64748b);
    font-size: 13px;
}

.chrono-timer-complete__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chrono-timer-complete__actions .planning-btn {
    width: 100%;
    justify-content: center;
}

/* --- Untracked past-day tail prompt --- */
.chrono-untracked-tail {
    width: calc(100% - 24px);
    max-width: 430px;
}

.chrono-untracked-tail__body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.chrono-untracked-tail__hero {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
    padding: 14px;
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--v4-act, #c67139) 8%, transparent), color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 8%, transparent));
    border: 1px solid color-mix(in srgb, var(--v4-act, #c67139) 14%, transparent);
}

.chrono-untracked-tail__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 80%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v4-act, #c67139) 12%, transparent);
    font-size: 22px;
}

.chrono-untracked-tail__copy {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 5px;
}

.chrono-untracked-tail__copy strong {
    color: var(--planning-text);
    font-size: 15px;
    line-height: 1.22;
}

.chrono-untracked-tail__copy span,
.chrono-untracked-tail__lead,
.chrono-untracked-tail__hint {
    margin: 0;
    color: var(--planning-muted);
    font-size: 13px;
    line-height: 1.35;
}

.chrono-untracked-tail__stack {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chrono-untracked-tail__list {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.chrono-untracked-tail__row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 8px;
    padding: 10px 11px;
    border-radius: 12px;
    border: 1px solid var(--planning-border-soft);
    background: var(--planning-surface-elevated);
}

.chrono-untracked-tail__date {
    font-size: 12px;
    font-weight: 800;
    color: var(--planning-text);
    white-space: nowrap;
}

.chrono-untracked-tail__meta {
    min-width: 0;
    overflow: hidden;
    color: var(--planning-muted);
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-untracked-tail__duration {
    color: var(--v4-act-text, #8a4a20);
    font-size: 12px;
    white-space: nowrap;
}

.chrono-untracked-tail__actions {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.chrono-untracked-tail__actions .planning-btn {
    width: 100%;
    justify-content: center;
}

/* --- Timer chips в duration-модалке --- */
.chrono-duration__timer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 14px;
    border-radius: 14px;
    background: var(--planning-surface-elevated, #f8fafc);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
}

.chrono-duration__timer-head {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.chrono-duration__timer-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--planning-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chrono-duration__timer-running {
    font-size: 11px;
    color: var(--v4-warn-text, #a1471c);
}

.chrono-duration__timer-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chrono-duration__timer-chip {
  position: relative;
    flex: 1 0 calc(50% - 4px);
    padding: 11px 10px;
    border-radius: 12px;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.1));
    background: var(--planning-surface, #fff);
    color: var(--planning-text, #0f172a);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .chrono-duration__timer-chip:hover:not(:disabled) {
    border-color: var(--planning-text, #0f172a);
    box-shadow: 0 1px 2px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.06),
        0 4px 10px -4px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.18);
    transform: translateY(-1px);
}
}

.chrono-duration__timer-chip:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Kind toggle [Цель|Лимит] в строке цели --- */
.chrono-duration__target-head {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
}

.chrono-duration__target-kind-toggle {
    margin-left: auto;
    display: inline-flex;
    background: var(--planning-surface, #fff);
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    border-radius: 999px;
    padding: 2px;
}

.chrono-duration__target-kind-btn {
  position: relative;
    border: none;
    background: transparent;
    color: var(--planning-muted, #64748b);
    font-size: 11px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chrono-duration__target-kind-btn.active {
    background: var(--planning-accent, #2563eb);
    color: var(--v4-btn-on-act, #2b1608);
}

/* Режим «Лимит»: заливка предупреждения, не goal-blue. hsl(28,85%,52%) был
   янтарной лестницей; --v4-warn-2 держит смысл «лимит» на песочном и синем. */
.chrono-duration__target.is-budget .chrono-duration__target-kind-btn.active {
    background: var(--v4-warn-2, #c67139);
}

.chrono-duration__target.is-budget .chrono-duration__target-save:not(.is-saved):not(:disabled) {
    background: var(--v4-warn-2, #c67139);
}

/* --- Scope bar (День/Неделя + дата + Сегодня — одна строка) --- */
.chrono-scope-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 0 0 auto;
    flex-wrap: nowrap;
}

.chrono-scope-bar__toggle {
    display: inline-flex;
    background: var(--planning-surface-elevated, #f1f5f9);
    border-radius: 999px;
    padding: 2px;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.08));
}

.chrono-scope-bar__toggle-item {
  position: relative;
    border: none;
    background: transparent;
    color: var(--planning-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.chrono-scope-bar__toggle-item.active {
    background: var(--planning-accent, #2563eb);
    color: var(--v4-btn-on-act, #2b1608);
}

.chrono-scope-bar__nav-btn {
  position: relative;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--planning-surface-elevated, #f1f5f9);
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.08));
    color: var(--planning-text, #0f172a);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.chrono-scope-bar__date {
    min-width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    font-size: 13px;
    color: var(--planning-text, #0f172a);
    flex: 0 1 auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-scope-bar__today {
  position: relative;
    margin-left: auto;
    padding: 4px 10px;
    border-radius: 999px;
    background: transparent;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.08));
    color: var(--planning-text, #0f172a);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    flex: 0 0 auto;
}

.chrono-scope-bar__icon-btn {
  position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--planning-surface, #fff);
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.1));
    color: var(--planning-text, #0f172a);
    font-size: 17px;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.chrono-scope-bar__nav-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

@media (hover: hover) {
  .chrono-scope-bar__today:hover {
    background: var(--planning-surface-elevated, #f1f5f9);
}
}

/* --- Strip (занятия без часов в выбранном охвате — «пресеты»). ---
   Тап → duration modal → запись → активность переезжает в облако. */
.chrono-strip {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-inline: -12px;
    padding: 10px 12px 12px;
    align-items: center;
    background: color-mix(in srgb, var(--v4-hero, #efe3cf) 72%, transparent);
    border-top: 1px solid color-mix(in srgb, var(--v4-act, #c67139) 18%, transparent);
}

.chrono-strip__item {
  position: relative;
    --hue: 210deg;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px;
    border-radius: 999px;
    background: var(--planning-surface-elevated, #f1f5f9);
    border: 1px solid hsl(var(--hue) 35% 78% / 0.6);
    color: var(--planning-text, #0f172a);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s ease, transform 0.1s ease, border-color 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

@media (hover: hover) {
  .chrono-strip__item:hover {
    background: hsl(var(--hue) 60% 92%);
    border-color: hsl(var(--hue) 50% 65%);
}
}

.chrono-strip__item:active {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-strip__emoji {
    font-size: 15px;
    line-height: 1;
}

.chrono-strip__name {
    line-height: 1;
}

.chrono-strip__item--add {
    background: var(--planning-accent, #2563eb);
    border-color: var(--v4-act-text, #8a4a20);
    color: var(--v4-btn-on-act, #2b1608);
    font-weight: 600;
}

.chrono-strip__trash {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 34px;
    border-radius: 12px;
    border: 1.5px dashed rgba(var(--v4-ink-rgb, 32, 30, 29), 0.7);
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 88%, transparent);
    color: var(--v4-ink-2, rgba(0, 0, 0, 0.56));
    box-shadow: 0 2px 8px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.06);
    pointer-events: none;
    transition: transform 0.18s ease,
                border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}

.chrono-strip__trash.is-dragging {
    border-color: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.9);
    color: var(--v4-ink, #201e1d);
}

.chrono-strip__trash.is-active {
    border-color: var(--v4-warn-1, #ef4444);
    background: color-mix(in srgb, var(--v4-val-bad, #a8382b) 14%, transparent);
    color: var(--v4-warn-2, #dc2626);
    transform: scale(1.08);
}

@media (hover: hover) {
  .chrono-strip__item--add:hover {
    background: var(--planning-accent, #2563eb);
    border-color: var(--v4-act-text, #8a4a20);
    color: var(--v4-btn-on-act, #2b1608);
    filter: brightness(1.08);
}
}

/* --- Insights --- */
.chrono-overview,
.chrono-insights {
    flex: 0 0 auto;
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.07));
    background: var(--planning-surface-elevated, #f8fafc);
    border-radius: 10px;
}

.chrono-overview {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: linear-gradient(135deg, color-mix(in srgb, var(--v4-bg, #fffaf1) 96%, transparent), color-mix(in srgb, var(--v4-hero, #efe3cf) 88%, transparent)),
        var(--planning-surface, #fff);
    box-shadow: 0 12px 34px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.06);
}

.chrono-overview-modal-overlay {
    z-index: 10050;
}

.chrono-overview-modal {
    width: calc(100% - 24px);
    max-width: 520px;
}

.chrono-overview-modal__body {
    max-height: 72vh;
    overflow-y: auto;
}

.chrono-overview--modal {
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.chrono-overview--modal .chrono-overview__ledger {
    padding: 0 0 8px;
}

.chrono-overview--modal .chrono-overview__last {
    padding: 0 0 10px;
}

.chrono-overview__ledger {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 0 14px 3px;
    min-width: 0;
}

.chrono-overview__ledger-row {
    appearance: none;
    width: 100%;
    position: relative;
    display: grid;
    grid-template-columns: 76px 55px minmax(0, 1fr);
    align-items: flex-start;
    column-gap: 4px;
    min-height: 21px;
    padding: 1px 0;
    border: 0;
    border-radius: 7px;
    background: transparent;
    min-width: 0;
    color: var(--planning-muted, #64748b);
    font-size: 11px;
    line-height: 1.12;
    text-align: left;
    cursor: pointer;
    touch-action: pan-y;
    transition: background 0.14s ease, box-shadow 0.14s ease, transform 0.14s ease;
}

@media (hover: hover) {
  .chrono-overview__ledger-row:hover {
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.04);
}
}

.chrono-overview__ledger-row:active {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-overview__ledger-row.is-reorder-mode {
    cursor: grabbing;
}

.chrono-overview__ledger-row.is-dragging {
    background: color-mix(in srgb, var(--v4-act, #c67139) 10%, transparent);
    box-shadow: 0 6px 14px -10px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.35);
    transform: translateX(4px);
}

.chrono-overview__ledger-handle {
    position: absolute;
    left: -12px;
    top: 1px;
    width: 8px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 11px;
    font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-weight: 700;
    line-height: 1;
    cursor: grab;
    touch-action: none;
    opacity: 0.32;
    transform: scale(0.86);
    transition: opacity 0.14s ease, transform 0.14s ease, background 0.14s ease;
}

.chrono-overview__ledger-row.is-reorder-mode .chrono-overview__ledger-handle {
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.06);
    opacity: 1;
    transform: scale(1);
}

@media (hover: hover) {
  .chrono-overview__ledger-row:hover .chrono-overview__ledger-handle {
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.06);
    opacity: 1;
    transform: scale(1);
}
}

.chrono-overview__ledger-row.is-dragging .chrono-overview__ledger-handle {
    cursor: grabbing;
    background: color-mix(in srgb, var(--v4-act, #c67139) 12%, transparent);
}

.chrono-overview__ledger-time {
    min-width: 0;
    color: var(--planning-text, #0f172a);
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    padding-top: 1px;
    white-space: nowrap;
}

.chrono-overview__ledger-duration {
    min-width: 0;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    color: var(--planning-muted, #64748b);
    padding-top: 1px;
    white-space: nowrap;
}

.chrono-overview__ledger-name {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: flex-start;
    gap: 3px;
    font-weight: 700;
}

.chrono-overview__ledger-name-dot {
    flex: 0 0 auto;
    line-height: 1.02;
}

.chrono-overview__ledger-name-text {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-height: 1.02;
    max-height: 3.06em;
    white-space: normal;
    overflow-wrap: anywhere;
}

.chrono-overview__last {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 14px 9px;
    color: var(--planning-muted, #64748b);
    line-height: 1.25;
    min-width: 0;
    flex-wrap: nowrap;
}

.chrono-overview__last-time {
    flex: 0 0 auto;
    color: var(--planning-text, #0f172a);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
}

.chrono-overview__last-detail {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 11px;
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-overview__last-now {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.chrono-overview__last-context {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--planning-muted, #64748b);
    font-size: 11px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-overview__untracked-text {
    flex: 0 1 auto;
    min-width: 0;
    margin-left: auto;
    text-align: right;
    color: var(--v4-bad-text, #a83c22);
    font-size: 11px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-overview__untracked-action {
    flex: 0 0 auto;
    appearance: none;
    position: relative;
    isolation: isolate;
    min-width: 92px;
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    background: transparent;
    color: var(--v4-bg, #ffffff);
    font-size: 12px;
    font-weight: 800;
    line-height: 1.1;
    white-space: nowrap;
    cursor: pointer;
}

.chrono-overview__untracked-action::before {
    content: '';
    position: absolute;
    inset: 5px 0;
    z-index: -1;
    border-radius: 10px;
    background: var(--planning-accent, #2563eb);
    border: 1px solid color-mix(in srgb, var(--v4-act, #c67139) 18%, transparent);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--v4-act, #c67139) 16%, transparent);
    transition: box-shadow 0.16s ease, filter 0.16s ease, transform 0.16s ease;
}

.chrono-overview__untracked-action:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--v4-act, #c67139) 72%, transparent);
    outline-offset: 2px;
}

@media (hover: hover) {
  .chrono-overview__untracked-action:hover {
    filter: none;
}
}

@media (hover: hover) {
  .chrono-overview__untracked-action:hover::before {
    filter: brightness(1.04);
    box-shadow: 0 5px 12px color-mix(in srgb, var(--v4-act, #c67139) 20%, transparent);
}
}

.chrono-overview__untracked-action.active {
    background: transparent;
    box-shadow: none;
    transform: none;
}

.chrono-overview__untracked-action.active::before {
    background: linear-gradient(135deg, var(--v4-ok-fill, #7a8a5e) 0%, var(--v4-ok-text, #5c6a45) 100%);
    border-color: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 28%, transparent);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 12%, transparent), 0 5px 12px color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 16%, transparent);
    transform: translateY(-1px);
}

.chrono-overview__last--badge-only .chrono-overview__untracked-action {
    margin-left: auto;
}

.chrono-overview__total {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 14px 10px;
    border-top: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
    color: var(--planning-muted, #64748b);
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.chrono-overview__total-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-overview__total-value {
    flex: 0 0 auto;
    color: var(--v4-act-text, #8a4a20);
    font-size: 14px;
    line-height: 1;
}

.chrono-untracked-flow {
    flex: 0 0 auto;
    position: relative;
    z-index: 20;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 9px 10px 10px;
    border: 1px solid color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 28%, transparent);
    border-radius: 14px;
    background: linear-gradient(135deg, color-mix(in srgb, var(--v4-ok-bg, #eaefe0) 94%, transparent), color-mix(in srgb, var(--v4-bg, #fffaf1) 92%, transparent)),
        var(--planning-surface, #fff);
    box-shadow: 0 10px 24px -18px color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 45%, transparent);
}

.chrono-untracked-flow__head,
.chrono-untracked-flow__single-row,
.chrono-untracked-flow__slider-top,
.chrono-untracked-flow__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chrono-untracked-flow__title {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--v4-ok-text, #5c6a45);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-untracked-flow__total,
.chrono-untracked-flow__minutes {
    flex: 0 0 auto;
    color: var(--planning-text, #0f172a);
    font-size: 12px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chrono-untracked-flow__close {
  position: relative;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border: 0;
    border-radius: 50%;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.06);
    color: var(--planning-muted, #64748b);
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
}

.chrono-untracked-flow__single,
.chrono-untracked-flow__sliders {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chrono-untracked-flow__sliders {
    max-height: 244px;
    overflow-y: auto;
    padding-right: 1px;
}

.chrono-untracked-flow__single.is-parallel {
    padding: 8px 9px;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 16%, transparent);
    background: color-mix(in srgb, var(--v4-ok-bg, #eaefe0) 58%, transparent);
}

.chrono-untracked-flow__activity {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--planning-text, #0f172a);
    font-size: 13px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-untracked-flow__remove {
  position: relative;
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.22);
    border-radius: 50%;
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 72%, transparent);
    color: var(--planning-muted, #64748b);
    font-size: 15px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
}

.chrono-untracked-flow__remove:focus-visible {
    border-color: color-mix(in srgb, var(--v4-val-bad, #a8382b) 28%, transparent);
    background: color-mix(in srgb, var(--v4-tint, #f6e6dd) 90%, transparent);
    color: var(--v4-bad-text, #a83c22);
}

@media (hover: hover) {
  .chrono-untracked-flow__remove:hover {
    border-color: color-mix(in srgb, var(--v4-val-bad, #a8382b) 28%, transparent);
    background: color-mix(in srgb, var(--v4-tint, #f6e6dd) 90%, transparent);
    color: var(--v4-bad-text, #a83c22);
}
}

.chrono-untracked-flow__bar {
    height: 10px;
    overflow: hidden;
    border-radius: 999px;
    background: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 14%, transparent);
}

.chrono-untracked-flow__bar-fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, var(--v4-ok-fill, #7a8a5e), var(--v4-ok-fill, #7a8a5e));
}

.chrono-untracked-flow__slider-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 9px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 54%, transparent);
    border: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.04);
}

.chrono-untracked-flow__slider-row.is-parallel {
    border-color: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 18%, transparent);
    background: color-mix(in srgb, var(--v4-ok-bg, #eaefe0) 62%, transparent);
}

.chrono-untracked-flow__parallel-toggle {
  position: relative;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 24px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
}

.chrono-untracked-flow__parallel-toggle.active {
    background: transparent;
}

.chrono-untracked-flow__parallel-switch {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 20px;
    border-radius: 999px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.24);
    transition: background 0.16s ease;
}

.chrono-untracked-flow__parallel-knob {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--v4-bg, #fff);
    box-shadow: 0 1px 3px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.22);
    transition: transform 0.16s ease;
}

.chrono-untracked-flow__parallel-toggle.active .chrono-untracked-flow__parallel-switch {
    background: var(--v4-ok-text, #16a34a);
}

.chrono-untracked-flow__parallel-toggle.active .chrono-untracked-flow__parallel-knob {
    transform: translateX(14px);
}

.chrono-untracked-flow__range {
  position: relative;
    --chrono-range-fill: var(--v4-ok-text, #16a34a);
    --chrono-range-track: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.13);
    --chrono-range-shadow: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 28%, transparent);
    --chrono-range-pct: 0%;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    cursor: pointer;
    /* Ползунок целиком забирает жест пальца: с pan-y браузер отдавал диагональный
       свайп прокрутке списка, и двигался только тап (pointercancel). */
    touch-action: none;
}

.chrono-untracked-flow__range:disabled {
    --chrono-range-fill: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.28);
    --chrono-range-track: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.14);
    --chrono-range-shadow: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.16);
    cursor: default;
}

.chrono-untracked-flow__slider-row.is-parallel .chrono-untracked-flow__range:disabled {
    --chrono-range-fill: var(--v4-ok-text, #16a34a);
    --chrono-range-track: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 18%, transparent);
    --chrono-range-shadow: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 20%, transparent);
}

.chrono-untracked-flow__range::-webkit-slider-runnable-track {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(
        90deg,
        var(--chrono-range-fill) 0%,
        var(--v4-ok-fill, #22c55e) var(--chrono-range-pct),
        var(--chrono-range-track) var(--chrono-range-pct),
        var(--chrono-range-track) 100%
    );
    box-shadow: inset 0 0 0 1px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.06);
}

.chrono-untracked-flow__range:disabled::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--chrono-range-fill), var(--chrono-range-track));
}

.chrono-untracked-flow__slider-row.is-parallel .chrono-untracked-flow__range:disabled::-webkit-slider-runnable-track {
    background: linear-gradient(90deg, var(--v4-ok-fill, #7a8a5e), var(--v4-ok-fill, #7a8a5e));
}

.chrono-untracked-flow__range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -7px;
    border: 3px solid var(--v4-bg, #fff);
    border-radius: 50%;
    background: var(--chrono-range-fill);
    box-shadow: 0 8px 18px var(--chrono-range-shadow),
        0 1px 3px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.24);
}

.chrono-untracked-flow__range:disabled::-webkit-slider-thumb {
    width: 18px;
    height: 18px;
    margin-top: -4px;
    border-color: color-mix(in srgb, var(--v4-bg, #fffaf1) 82%, transparent);
    background: color-mix(in srgb, var(--v4-ink, #201e1d) 25%, var(--v4-bg, #fffaf1));
    box-shadow: none;
}

.chrono-untracked-flow__slider-row.is-parallel .chrono-untracked-flow__range:disabled::-webkit-slider-thumb {
    border-color: var(--v4-bg, #fff);
    background: var(--v4-ok-text, #16a34a);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 18%, transparent);
}

.chrono-untracked-flow__range::-moz-range-track {
    height: 10px;
    border-radius: 999px;
    background: var(--chrono-range-track);
    box-shadow: inset 0 0 0 1px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.06);
}

.chrono-untracked-flow__range::-moz-range-progress {
    height: 10px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--chrono-range-fill), var(--v4-ok-fill, #7a8a5e));
}

.chrono-untracked-flow__range::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border: 3px solid var(--v4-bg, #fff);
    border-radius: 50%;
    background: var(--chrono-range-fill);
    box-shadow: 0 8px 18px var(--chrono-range-shadow),
        0 1px 3px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.24);
}

.chrono-untracked-flow__range:disabled::-moz-range-progress {
    background: var(--chrono-range-fill);
}

.chrono-untracked-flow__range:disabled::-moz-range-thumb {
    width: 14px;
    height: 14px;
    border-color: color-mix(in srgb, var(--v4-bg, #fffaf1) 82%, transparent);
    background: color-mix(in srgb, var(--v4-ink, #201e1d) 25%, var(--v4-bg, #fffaf1));
    box-shadow: none;
}

.chrono-untracked-flow__slider-row.is-parallel .chrono-untracked-flow__range:disabled::-moz-range-thumb {
    border-color: var(--v4-bg, #fff);
    background: var(--v4-ok-text, #16a34a);
    box-shadow: 0 4px 10px color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 18%, transparent);
}

.chrono-untracked-flow__actions {
    justify-content: flex-end;
    gap: 8px;
    padding-top: 2px;
}

.chrono-untracked-flow__confirm,
.chrono-untracked-flow__confirm-now {
    min-height: 34px;
    padding: 7px 12px;
    border-radius: 999px;
    font-size: 12px;
    white-space: nowrap;
}

.chrono-untracked-flow__confirm {
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 72%, transparent);
    border: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.28);
    color: var(--planning-muted, #64748b);
}

.chrono-untracked-flow__confirm-now {
    background: var(--v4-ok-text, #16a34a);
    border-color: var(--v4-ok-text, #16a34a);
    box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 65%, transparent);
}

.chrono-overview__body {
    display: grid;
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.35fr);
    gap: 0;
    border-top: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
}

.chrono-overview__top {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 14px 16px;
    border-right: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.06);
}

.chrono-overview__eyebrow {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--planning-muted, #64748b);
}

.chrono-overview__top-value {
    min-width: 0;
    font-size: 18px;
    line-height: 1.12;
    color: var(--planning-text, #0f172a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chrono-overview__top-detail {
    font-size: 13px;
    font-weight: 650;
    color: var(--planning-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.chrono-overview__alerts {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.chrono-overview__alert {
    max-width: 100%;
    border-radius: 999px;
    padding: 4px 8px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.05);
    color: var(--planning-muted, #64748b);
    font-size: 11px;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.chrono-overview__alert.is-over {
    background: color-mix(in srgb, var(--v4-val-bad, #a8382b) 8%, transparent);
    color: var(--v4-bad-text, #a83c22);
}

.chrono-overview__alert.is-under {
    background: color-mix(in srgb, var(--v4-act, #c67139) 8%, transparent);
    color: var(--v4-act-text, #1d4ed8);
}

.chrono-overview__balance {
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 14px 16px;
}

.chrono-overview__stack {
    display: flex;
    width: 100%;
    height: 12px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.07);
}

.chrono-overview__segment {
    min-width: 4px;
    height: 100%;
    background: var(--chrono-category-color, var(--planning-accent, #2563eb));
}

.chrono-overview__segment + .chrono-overview__segment {
    box-shadow: inset 1px 0 color-mix(in srgb, var(--v4-bg, #fffaf1) 86%, transparent);
}

.chrono-overview__legend {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 7px;
}

.chrono-overview__chip {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 999px;
    padding: 5px 8px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.035);
    color: var(--planning-text, #0f172a);
    font-size: 11px;
    font-weight: 750;
    line-height: 1;
}

.chrono-overview__chip-label {
    max-width: 76px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-overview__chip strong {
    font-variant-numeric: tabular-nums;
}

.chrono-overview__dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: var(--chrono-category-color, var(--planning-accent, #2563eb));
    flex: 0 0 auto;
}

/* --- Стрики попадания в цель ---
   Янтарная лестница → роли warn (внимание к серии). Замер на песочном и синем:
   фон color-mix от --v4-warn-1, подпись --v4-warn-text; наборы различаются. */
.chrono-overview__streaks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
}

.chrono-overview__streak {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    border-radius: 999px;
    padding: 5px 9px;
    background: color-mix(in srgb, var(--v4-warn-1, #d99a63) 10%, transparent);
    color: var(--v4-warn-text, #a1471c);
    font-size: 11px;
    font-weight: 800;
    line-height: 1;
}

.chrono-overview__streak.is-best {
    background: color-mix(in srgb, var(--v4-warn-1, #d99a63) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v4-warn-1, #d99a63) 35%, transparent);
}

.chrono-overview__streak.is-budget {
    background: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 10%, transparent);
    color: var(--v4-ok-text, #5c6a45);
}

.chrono-overview__streak.is-budget.is-best {
    background: color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--v4-ok-fill, #7a8a5e) 35%, transparent);
}

.chrono-overview__streak strong {
    font-variant-numeric: tabular-nums;
}

/* --- Паттерн времени суток --- */
.chrono-overview__pattern {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--planning-muted, #64748b);
}

.chrono-insights {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1px;
    overflow: hidden;
}

.chrono-insights__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    min-width: 0;
    background: var(--planning-surface, #fff);
}

.chrono-insights__title {
    font-size: 11px;
    color: var(--planning-muted, #64748b);
}

.chrono-insights__value {
    font-size: 13px;
    font-weight: 700;
    color: var(--planning-text, #0f172a);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-insights__detail {
    font-size: 12px;
    color: var(--planning-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.chrono-category-balance {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--planning-surface-elevated, #f8fafc);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.07));
}

.chrono-category-balance__item {
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) 38px;
    align-items: center;
    gap: 8px;
}

.chrono-category-balance__label,
.chrono-category-balance__value {
    font-size: 11px;
    font-weight: 700;
    color: var(--planning-muted, #64748b);
}

.chrono-category-balance__value {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.chrono-category-balance__bar {
    height: 5px;
    border-radius: 999px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.07);
    overflow: hidden;
}

.chrono-category-balance__fill {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--chrono-category-color, var(--planning-accent, #2563eb));
}

.tone-blue { --chrono-category-color: var(--v4-act, #2563eb); }
.tone-green { --chrono-category-color: var(--v4-ok-text, #16a34a); }
.tone-teal { --chrono-category-color: var(--v4-ok-text, #5c6a45); }
.tone-rose { --chrono-category-color: #e11d48; }
.tone-slate { --chrono-category-color: var(--v4-ink-2, #64748b); }
.tone-amber { --chrono-category-color: var(--v4-wgt-amber, #d99a63); }
.tone-red { --chrono-category-color: var(--v4-warn-2, #dc2626); }

/* --- Cloud (bubbles) ---
   Облако занимает верхнюю свободную область, а списки и чипы после него
   собираются у нижнего края экрана. */
.chrono-cloud {
    /* Занимает оставшуюся высоту между верхней навигацией и нижним стеком. */
    flex: 1 1 0;
    min-height: 0;
    box-sizing: border-box;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8px 4px 12px;
}

.chrono-cloud--week {
    flex: 0 0 auto;
    min-height: 380px;
    min-height: clamp(360px, 52svh, 460px);
    padding: 18px 4px 22px;
    overflow: visible;
}

.chrono-cloud__items {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
    align-content: center;
    max-width: 100%;
}

/* Radial layout: phyllotaxis-spiral positions (computed in JS).
   Каждый slot — абсолютный контейнер с CSS-переменными --slot-x/--slot-y
   относительно центра .chrono-cloud__items. Внутри slot — обычный
   .chrono-bubble-wrap, который продолжает плавать через свой transform. */
.chrono-cloud__items--radial {
    position: relative;
    width: 100%;
    height: var(--cloud-height, 320px);
    display: block;
}

.chrono-cloud__slot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(
        calc(-50% + var(--slot-x, 0px) + var(--drag-dx, 0px)),
        calc(-50% + var(--slot-y, 0px) + var(--drag-dy, 0px))
    );
    /* Slow liquid motion: соседние пузырьки не прыгают, а медленно перетекают
       в новое место вокруг dragged bubble. */
    transition: transform 1.25s cubic-bezier(0.22, 1, 0.36, 1);
    line-height: 0;
    touch-action: none;
}

.chrono-cloud__items--radial.is-layout-snap .chrono-cloud__slot {
    transition: none;
}

.chrono-cloud__slot.is-dragged {
    transition: transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 10;
}

.chrono-cloud__items--radial.is-releasing .chrono-cloud__slot {
    transition: transform 3.2s cubic-bezier(0.22, 1, 0.36, 1);
}

/* dragged-кружок во время release-фазы анимируется JS-rAF smoothstep'ом
   (см. ChronoCloud handleDragEnd); CSS transition выключаем, чтобы не
   складывать две анимации поверх друг друга. */
.chrono-cloud__items--radial.is-releasing .chrono-cloud__slot.is-dragged {
    transition: none;
}

.chrono-cloud__slot.is-dragged .chrono-bubble {
    box-shadow: 0 8px 24px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.18),
        0 2px 6px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.10);
    filter: brightness(1.04);
}

/* Корзина — появляется при drag'е любого кружка, hit-detection через
   getBoundingClientRect (см. ChronoCloud handleDragMove). pointer-events:none,
   чтобы palец продолжал captured на bubble'е. */
/* Fallback-корзина для изолированного ChronoCloud без внешней drop-зоны. */
.chrono-cloud__trash {
    position: fixed;
    /* Корзина — в правом углу (стабильная цель для drag-to-trash). Тотал
       («всего: …») живёт слева от неё (right:96), поэтому при длинном
       «10ч 30м» время больше не наезжает на корзину — растёт в пустоту. */
    right: calc(16px + env(safe-area-inset-right, 0px));
    bottom: calc(var(--planning-main-tabs-height, calc(76px + env(safe-area-inset-bottom, 0px))) + 4px);
    width: 72px;
    height: 36px;
    border-radius: 12px;
    border: 1.5px dashed rgba(var(--v4-ink-rgb, 32, 30, 29), 0.7);
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 92%, transparent);
    color: var(--v4-ink-2, rgba(0, 0, 0, 0.56));
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 1;
    transition: transform 0.18s ease,
                border-color 0.18s ease, background-color 0.18s ease, color 0.18s ease;
    z-index: 940;
    box-shadow: 0 2px 8px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.08);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}

.chrono-cloud__trash.is-dragging {
    border-color: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.85);
    color: var(--v4-ink, #201e1d);
}

.chrono-cloud__trash.is-active {
    border-color: var(--v4-warn-1, #ef4444);
    background: color-mix(in srgb, var(--v4-val-bad, #a8382b) 15%, transparent);
    color: var(--v4-warn-1, #ef4444);
    transform: scale(1.12);
    transform-origin: center center;
}

@media (prefers-reduced-motion: reduce) {
    .chrono-cloud__slot {
        transition: none;
    }
}

@keyframes chrono-float {
    0%   { transform: translate3d(0, 0, 0); }
    25%  { transform: translate3d(var(--float-x, 5px), calc(var(--float-y, 4px) * -1), 0); }
    50%  { transform: translate3d(calc(var(--float-x, 5px) * -0.6), var(--float-y, 4px), 0); }
    75%  { transform: translate3d(calc(var(--float-x, 5px) * 0.4), calc(var(--float-y, 4px) * -0.5), 0); }
    100% { transform: translate3d(0, 0, 0); }
}

.chrono-empty {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--planning-muted, #64748b);
    font-size: 14px;
    text-align: center;
    padding: 24px;
}

/* Wrapper несёт размер, плавающую анимацию и единое кольцо план-факта. */
.chrono-bubble-wrap {
    --size: 56px;
    --ring-thickness: 4px;
    position: relative;
    width: var(--size);
    height: var(--size);
    box-sizing: border-box;
    border-radius: 50%;
    display: inline-block;
    flex: 0 0 auto;
    transition: width 0.25s ease, height 0.25s ease;
    animation: chrono-float var(--float-dur, 9s) ease-in-out infinite;
    animation-delay: var(--float-delay, 0s);
    will-change: transform;
}

.chrono-bubble-wrap.has-progress {
    width: calc(var(--size) + var(--ring-thickness) * 2);
    height: calc(var(--size) + var(--ring-thickness) * 2);
    padding: var(--ring-thickness);
    background: conic-gradient(
        var(--ring-color, var(--planning-accent, #2563eb)) var(--progress-deg, 0deg),
        rgba(var(--v4-ink-rgb, 32, 30, 29), 0.08) var(--progress-deg, 0deg)
    );
}

.chrono-bubble-wrap.has-progress.is-complete {
    box-shadow: 0 0 0 1px var(--ring-color, var(--planning-accent, #2563eb)),
                0 4px 14px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.18);
}

/* Перебор лимита (budget) — кольцо полностью красное + красноватая тень. */
.chrono-bubble-wrap.is-over {
    box-shadow: 0 0 0 1px hsl(0, 80%, 52%),
                0 4px 14px color-mix(in srgb, var(--v4-val-bad, #a8382b) 30%, transparent);
}

.chrono-bubble-wrap.is-over .chrono-bubble__time {
    color: hsl(0, 70%, 35%);
}

.chrono-bubble {
    --bg: hsl(210, 35%, 82%);
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--bg);
    border: none;
    box-shadow: 0 4px 12px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.12);
    /* Текст поверх цвета активности: фон кружка задаёт пользователь (светлый
       пастельный hsl в любой теме), поэтому чернила не следуют за темой. */
    color: rgba(32, 30, 29, 0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: clamp(3px, calc(var(--size, 56px) * 0.05), 9px);
    padding: 4px;
    cursor: pointer;
    transition: background 0.25s ease, box-shadow 0.15s ease, filter 0.15s ease;
    overflow: hidden;
    text-align: center;
    -webkit-tap-highlight-color: transparent;
    /* Появление-«хлопок» при первом монтировании — играет один раз браузером.
       Повторно при re-render не запускается, так что бабл не дёргается на
       каждый тап (это нам делает badge выше). */
    animation: chrono-spawn 0.42s cubic-bezier(0.4, 0, 0.2, 1.25);
    transform-origin: center;
}

@media (hover: hover) {
  .chrono-bubble:hover {
    box-shadow: 0 6px 18px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.22);
    filter: brightness(1.06);
}
}

.chrono-bubble:active {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-bubble--with-plan {
    gap: clamp(1px, calc(var(--size, 56px) * 0.025), 5px);
    padding: 5px;
}

.chrono-bubble--with-plan .chrono-bubble__name {
    -webkit-line-clamp: 2;
}

.chrono-bubble--compact-plan .chrono-bubble__emoji {
    display: none;
}

@keyframes chrono-spawn {
    0%   { transform: scale(0.55); opacity: 0.4; }
    100% { transform: scale(1);    opacity: 1; }
}

.chrono-bubble__badge {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translate(-50%, -6px);
    background: var(--badge-bg, var(--planning-accent, #2563eb));
    color: var(--v4-bg, #fff);
    font-size: 13px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
    pointer-events: none;
    white-space: nowrap;
    z-index: 2;
    box-shadow: 0 4px 12px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.24);
    animation: chrono-badge-float 1.35s ease-out forwards;
}

@keyframes chrono-badge-float {
    0%   { transform: translate(-50%, -4px); opacity: 0; }
    15%  { opacity: 1; }
    100% { transform: translate(-50%, -52px); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .chrono-bubble-wrap { animation: none; }
    .chrono-bubble { animation: none; }
    .chrono-bubble__badge { animation: chrono-badge-float-reduced 1.2s linear forwards; }
}
@keyframes chrono-badge-float-reduced {
    0%, 90% { opacity: 1; }
    100% { opacity: 0; }
}

.chrono-bubble__emoji {
    font-size: clamp(18px, calc(var(--size) * 0.28), 32px);
    line-height: 1;
}

.chrono-bubble__name {
    /* JS считает от фактического диаметра bubble, чтобы текст рос синхронно
       с минутами, а не только с viewport/CSS-контейнером. */
    font-size: var(--bubble-name-font, clamp(10px, calc(var(--size) * 0.125), 20px));
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
    max-width: 94%;
}

.chrono-bubble__time {
    font-size: var(--bubble-time-font, clamp(12px, calc(var(--size) * 0.145), 23px));
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    opacity: 0.92;
    font-variant-numeric: tabular-nums;
    /* «1ч 30м» одной строкой — не переносим на 2 строки внутрь кружка. */
    white-space: nowrap;
    max-width: 96%;
}

.chrono-bubble__plan {
    max-width: 96%;
    overflow: hidden;
    color: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.68);
    font-size: var(--bubble-plan-font, 10px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.chrono-bubble__plan.is-missing {
    color: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.56);
}

.chrono-history__tiny-btn {
  position: relative;
    border: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.1);
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 92%, transparent);
    color: var(--planning-text, #0f172a);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    width: 26px;
    height: 26px;
    min-width: 26px;
    padding: 0;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* --- Activity picker --- */
.chrono-picker-overlay {
    z-index: 10030;
}

.chrono-picker {
    max-width: 480px;
    width: calc(100% - 24px);
}

.chrono-picker__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 70vh;
    overflow-y: auto;
}

.chrono-picker__search {
    width: 100%;
}

.chrono-picker__list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chrono-picker__empty {
    padding: 12px;
    color: var(--planning-muted, #64748b);
    font-size: 13px;
    text-align: center;
}

.chrono-picker__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: var(--planning-surface-elevated, #f1f5f9);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.05));
}

.chrono-picker__row.is-archived {
    opacity: 0.62;
}

.chrono-picker__toolbar {
    display: flex;
    justify-content: flex-end;
}

.chrono-picker__archive-toggle {
  position: relative;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    background: var(--planning-surface, #fff);
    color: var(--planning-muted, #64748b);
    border-radius: 999px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}

.chrono-picker__archive-toggle.active {
    background: var(--planning-accent, #2563eb);
    border-color: var(--v4-act-text, #8a4a20);
    color: var(--v4-btn-on-act, #2b1608);
}

.chrono-picker__row--editing {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}

.chrono-picker__edit-line {
    display: flex;
    align-items: center;
    gap: 8px;
}

.chrono-picker__emoji {
    font-size: 22px;
    line-height: 1;
    width: 28px;
    text-align: center;
    flex: 0 0 auto;
}

.chrono-picker__emoji--btn {
  position: relative;
    background: transparent;
    border: 1px dashed var(--planning-border, rgba(15, 23, 42, 0.12));
    border-radius: 8px;
    padding: 4px;
    cursor: pointer;
    width: 36px;
    height: 36px;
}

.chrono-picker__emoji--btn.active {
    background: color-mix(in srgb, var(--v4-act, #c67139) 8%, transparent);
    border-color: var(--planning-accent, #434587);
}

.chrono-picker__name {
    flex: 1 1 auto;
    font-size: 14px;
    color: var(--planning-text, #0f172a);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-picker__name-block {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.chrono-picker__name-block .chrono-picker__name {
    flex: 0 0 auto;
}

.chrono-picker__target {
    font-size: 11px;
    color: var(--planning-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.chrono-picker__target-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 4px;
}

.chrono-picker__target-label {
    font-size: 12px;
    color: var(--planning-muted, #64748b);
    flex: 1 1 auto;
}

.chrono-picker__target-input {
    width: 80px;
    flex: 0 0 auto;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.chrono-picker__input {
    flex: 1 1 auto;
    font-size: 14px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    background: var(--planning-surface, #fff);
    color: var(--planning-text, #0f172a);
    min-width: 0;
}

.chrono-picker__row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
}

.chrono-picker__icon-btn {
  position: relative;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--planning-muted, #64748b);
    cursor: pointer;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

@media (hover: hover) {
  .chrono-picker__icon-btn:hover {
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.06);
    color: var(--planning-text, #0f172a);
}
}

@media (hover: hover) {
  .chrono-picker__icon-btn--danger:hover {
    background: color-mix(in srgb, var(--v4-val-bad, #a8382b) 10%, transparent);
    color: var(--v4-warn-1, #ef4444);
}
}

.chrono-picker__create {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--v4-act, #c67139) 6%, transparent);
    border: 1px dashed color-mix(in srgb, var(--v4-act, #c67139) 30%, transparent);
}

.chrono-picker__create-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.chrono-picker__create-preview {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    min-width: 0;
}

.chrono-picker__create-btn {
  position: relative;
    flex: 0 0 auto;
    padding: 6px 14px;
    background: var(--planning-accent, #2563eb);
    color: var(--v4-btn-on-act, #2b1608);
    border: none;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

/* --- Emoji palette --- */
.chrono-emoji-palette {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 4px;
}

.chrono-picker__emoji-panel {
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.08));
    border-radius: 12px;
    background: var(--planning-surface, #fff);
    padding: 8px;
    max-height: 96px;
    overflow-y: auto;
}

.chrono-picker__emoji-panel .chrono-emoji-palette {
    grid-template-columns: repeat(8, minmax(0, 1fr));
}

.chrono-emoji-palette__item {
  position: relative;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: var(--planning-surface, #fff);
    font-size: 18px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

@media (hover: hover) {
  .chrono-emoji-palette__item:hover {
    background: var(--planning-surface-elevated, #f1f5f9);
}
}

.chrono-emoji-palette__item.active {
    border-color: var(--v4-act-text, #8a4a20);
    background: color-mix(in srgb, var(--v4-act, #c67139) 8%, transparent);
}

/* --- Delete modal --- */
.chrono-delete-overlay {
    z-index: 10040;
}

.chrono-delete {
    max-width: 420px;
    width: calc(100% - 24px);
}

.chrono-delete__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.chrono-delete__activity {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
}

.chrono-delete__emoji {
    font-size: 24px;
    line-height: 1;
}

.chrono-delete__name {
    color: var(--planning-text, #0f172a);
}

.chrono-delete__history {
    color: var(--planning-muted, #64748b);
    font-size: 13px;
}

.chrono-delete__actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chrono-delete__actions .planning-btn {
    width: 100%;
    justify-content: center;
}

.chrono-delete__merge-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 220px;
    overflow-y: auto;
    margin: 4px 0 8px;
}

.chrono-delete__merge-option {
  position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.05));
    background: var(--planning-surface-elevated, #f1f5f9);
    color: var(--planning-text, #0f172a);
    font-size: 14px;
    cursor: pointer;
    text-align: left;
}

.chrono-delete__merge-option.active {
    border-color: var(--v4-act-text, #8a4a20);
    background: color-mix(in srgb, var(--v4-act, #c67139) 8%, transparent);
}

/* --- History modal (long-press на кружок) --- */
.chrono-history-overlay {
    z-index: 10035;
}

.chrono-history {
    max-width: 420px;
    width: calc(100% - 24px);
}

.chrono-history__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 70vh;
    overflow-y: auto;
}

.chrono-history__emoji {
    margin-right: 4px;
}

.chrono-history__summary {
    font-size: 13px;
    color: var(--planning-muted, #64748b);
}

.chrono-history__empty {
    padding: 12px;
    text-align: center;
    color: var(--planning-muted, #64748b);
    font-size: 13px;
}

.chrono-history__list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.chrono-history__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--planning-surface-elevated, #f1f5f9);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.05));
}

.chrono-history__row--editing {
    grid-template-columns: minmax(0, 1fr) auto auto;
}

.chrono-history__edit-input {
    min-width: 0;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    background: var(--planning-surface, #fff);
    color: var(--planning-text, #0f172a);
    font-variant-numeric: tabular-nums;
}

.chrono-history__tiny-btn {
    width: 28px;
    min-width: 28px;
    height: 26px;
    box-shadow: none;
}

.chrono-history__row-time {
    font-weight: 700;
    color: var(--planning-text, #0f172a);
    font-variant-numeric: tabular-nums;
    flex: 0 0 auto;
}

.chrono-history__row-when {
    flex: 1 1 auto;
    font-size: 13px;
    color: var(--planning-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.chrono-history__section-title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--planning-muted, #64748b);
    font-weight: 700;
    margin-top: 4px;
}

/* --- Entry edit modal (tap on summary ledger row) --- */
.chrono-entry-edit-overlay {
    z-index: 10036;
}

.chrono-entry-edit {
    max-width: 420px;
    width: calc(100% - 24px);
}

.chrono-entry-edit__body {
    display: flex;
    flex-direction: column;
    gap: 9px;
    max-height: 72vh;
    overflow-y: auto;
}

.chrono-entry-edit__summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    background: var(--planning-surface-elevated, #f8fafc);
    color: var(--planning-text, #0f172a);
    font-size: 13px;
    font-weight: 800;
}

.chrono-entry-edit__badge {
    flex: 0 0 auto;
    padding: 3px 7px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--v4-act, #c67139) 10%, transparent);
    color: var(--v4-act-text, #1d4ed8);
    font-size: 11px;
    font-weight: 800;
}

.chrono-entry-edit__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.chrono-entry-edit__label {
    font-size: 11px;
    font-weight: 800;
    color: var(--planning-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.chrono-entry-edit__select:disabled {
    opacity: 0.72;
}

.chrono-entry-edit__minutes-row {
    display: grid;
    grid-template-columns: auto minmax(80px, 1fr) auto auto;
    gap: 6px;
    align-items: center;
}

.chrono-entry-edit__minutes {
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.chrono-entry-edit__minutes-label {
    min-width: 58px;
    color: var(--planning-text, #0f172a);
    font-size: 13px;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.chrono-entry-edit__actions {
    display: flex;
    gap: 7px;
    margin-top: 1px;
}

.chrono-entry-edit__actions .planning-btn {
    flex: 1 1 0;
    justify-content: center;
}

.chrono-entry-edit .chrono-duration__category,
.chrono-entry-edit .chrono-duration__target,
.chrono-entry-edit .chrono-duration__link {
    padding: 10px 12px;
    border-radius: 12px;
}

.chrono-entry-edit .chrono-duration__category-list {
    gap: 6px;
}

.chrono-entry-edit .chrono-duration__target {
    gap: 8px;
}

.chrono-entry-edit .chrono-duration__link {
    gap: 7px;
}

/* ---- Heatmap (13 недель × 7 дней) ---- */
.chrono-heatmap {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 6px;
    align-items: stretch;
}

.chrono-heatmap__row-labels {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 9px;
    color: var(--planning-muted, #64748b);
    padding: 2px 0;
}

.chrono-heatmap__grid {
    display: grid;
    gap: 3px;
}

.chrono-heatmap__col {
    display: grid;
    grid-template-rows: repeat(7, 1fr);
    gap: 3px;
}

.chrono-heatmap__cell {
    aspect-ratio: 1 / 1;
    border-radius: 3px;
    min-height: 10px;
    transition: transform 0.1s ease;
}

.chrono-heatmap__cell--empty {
    background: transparent !important;
}

@media (hover: hover) {
  .chrono-heatmap__cell:hover {
    transform: scale(1.4);
    z-index: 2;
    position: relative;
}
}

.chrono-heatmap__legend {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--planning-muted, #64748b);
    margin-top: 6px;
}

.chrono-heatmap__legend > span:not(:first-child):not(:last-child) {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

/* ---- Week breakdown (стек-бар по 7 дням) ---- */
.chrono-week-breakdown {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-end;
    gap: 6px;
    height: 100px;
    padding: 0 4px;
}

.chrono-week-breakdown__col {
    flex: 1 1 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    gap: 4px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    -webkit-tap-highlight-color: transparent;
}

.chrono-week-breakdown__col-fill {
    width: 100%;
    min-height: 2px;
    display: flex;
    flex-direction: column;
    border-radius: 4px 4px 2px 2px;
    overflow: hidden;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.04);
    transition: filter 0.15s ease, transform 0.12s ease;
}

@media (hover: hover) {
  .chrono-week-breakdown__col:hover .chrono-week-breakdown__col-fill {
    filter: brightness(1.08);
}
}

.chrono-week-breakdown__col:active {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-week-breakdown__col.is-active .chrono-week-breakdown__col-fill {
    box-shadow: 0 0 0 2px var(--planning-accent, #2563eb);
}

.chrono-week-breakdown__col.is-today .chrono-week-breakdown__label {
    color: var(--v4-act-text, #8a4a20);
    font-weight: 700;
}

.chrono-week-breakdown__seg {
    width: 100%;
    flex: 0 0 auto;
}

.chrono-week-breakdown__label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--planning-muted, #64748b);
    font-weight: 600;
}

/* ---- Period toggle (день/неделя) в модалках цели ---- */
.chrono-duration__target-period {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.chrono-duration__target-period-toggle,
.chrono-picker__target-period-toggle {
    display: inline-flex;
    background: var(--planning-surface, #fff);
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    border-radius: 999px;
    padding: 2px;
    flex: 0 0 auto;
}

.chrono-picker__target-period-btn {
    position: relative;
    border: none;
    background: transparent;
    color: var(--planning-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    min-width: 44px;
}

.chrono-picker__target-period-btn.active {
    background: var(--planning-accent, #2563eb);
    color: var(--v4-btn-on-act, #2b1608);
}


/* --- Duration modal --- */
.chrono-duration-overlay {
    z-index: 10030;
    flex-direction: column;
    gap: 8px;
    animation: chrono-duration-overlay-in 0.18s ease-out both;
}

@keyframes chrono-duration-overlay-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes chrono-duration-modal-in {
    from {
        opacity: 0;
        transform: scale(0.96) translateY(8px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .chrono-duration-overlay,
    .chrono-duration-overlay .chrono-duration {
        animation: none;
    }
}

.chrono-duration {
    max-width: 400px;
    width: calc(100% - 24px);
    padding: 0;
    border-radius: 22px;
    box-shadow: 0 1px 2px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.06),
        0 12px 32px -8px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.18),
        0 24px 60px -12px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.22);
    animation: chrono-duration-modal-in 0.22s cubic-bezier(0.2, 0.7, 0.3, 1) both;
    transform-origin: center center;
}

.chrono-duration__step-pill {
    width: calc(100% - 24px);
    max-width: 400px;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px;
    overflow-x: auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 92%, transparent);
    border: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.08);
    box-shadow: 0 10px 28px -20px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.35);
}

.chrono-duration__step-pill-item {
    flex: 0 0 auto;
    max-width: 150px;
    padding: 6px 10px;
    border-radius: 999px;
    color: var(--planning-muted, #64748b);
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.05);
    font-size: 12px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-duration__step-pill-item.active {
    color: var(--v4-bg, #fff);
    background: var(--planning-text, #0f172a);
}

.chrono-duration__body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px 18px 18px;
}

/* Sticky header: название активности + крестик остаются видны при скролле.
   `.planning-modal` (родитель) — scroll container, padding обнулён сверху,
   поэтому header держит свой собственный padding и тонкий divider снизу. */
.chrono-duration .planning-modal__header {
    position: sticky;
    top: 0;
    margin: 0;
    padding: 13px 18px 11px;
    background: var(--planning-surface);
    border-bottom: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
    z-index: 5;
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--planning-text);
}

/* Компактные колёса часы:минуты в chrono-модалке — узкие колонки 64px,
   шрифт мельче. Viewport НЕ переопределяем: WheelColumn хардкодит
   `translateY(offset + itemHeight * 2)` под 220px (5 строк); кастомный
   height сдвигает selected ниже центра на одну строку. */
.chrono-duration .wheel-column {
    width: 64px;
}

.chrono-duration .wheel-label {
    margin-bottom: 4px;
    font-size: 11px;
}

.chrono-duration .wheel-item {
    font-size: 18px;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.01em;
    color: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.42);
    transition: color 0.18s ease, opacity 0.18s ease, font-weight 0.18s ease;
}

.chrono-duration .wheel-item.selected {
    font-size: 20px;
    font-weight: 700;
    color: var(--planning-text, #0f172a);
}

/* iOS-like refined highlight: вместо плашки — две тонкие горизонтальные линии
   сверху и снизу central row. Подчёркивает selected без заливки фоном. */
.chrono-duration .wheel-highlight {
    background: transparent;
    border-top: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    border-bottom: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    border-radius: 0;
}

/* Refined крестик закрытия — graphite вместо ярко-розового.
   chrono-history/delete/picker остаются на прежнем розовом — апгрейд
   касается только модалки активности (chrono-duration). */
.chrono-history .planning-modal__close,
.chrono-delete .planning-modal__close,
.chrono-picker .planning-modal__close {
    width: 36px;
    height: 36px;
    font-size: 22px;
    line-height: 1;
    color: var(--v4-warn-text, #a1471c);
    border-radius: 50%;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

@media (hover: hover) {
  .chrono-history .planning-modal__close:hover,
.chrono-delete .planning-modal__close:hover,
.chrono-picker .planning-modal__close:hover {
    background: color-mix(in srgb, var(--v4-warn-soft, #c9922e) 12%, transparent);
    color: var(--v4-warn-text, #a1471c);
}
}

.chrono-history .planning-modal__close:active,
.chrono-delete .planning-modal__close:active,
.chrono-picker .planning-modal__close:active {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-duration .planning-modal__close {
    width: 32px;
    height: 32px;
    font-size: 20px;
    line-height: 1;
    color: var(--planning-muted, #64748b);
    background: transparent;
    border-radius: 10px;
    transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

@media (hover: hover) {
  .chrono-duration .planning-modal__close:hover {
    background: var(--planning-surface-elevated, rgba(15, 23, 42, 0.05));
    color: var(--planning-text, #0f172a);
}
}

.chrono-duration .planning-modal__close:active {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-duration__emoji {
    margin-right: 8px;
    font-size: 20px;
    vertical-align: -2px;
}

.chrono-duration__current {
    font-size: 12px;
    font-weight: 600;
    color: var(--planning-muted, #64748b);
    line-height: 1.4;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

.chrono-duration__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.chrono-duration__preset {
    min-height: 48px;
    padding: 10px 6px;
    border-radius: 12px;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.08));
    background: var(--planning-surface, #fff);
    color: var(--planning-text, #0f172a);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.04);
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

@media (hover: hover) {
  .chrono-duration__preset:hover {
    background: var(--planning-surface, #fff);
    border-color: var(--planning-text, #0f172a);
    box-shadow: 0 1px 2px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.06),
        0 6px 14px -6px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.18);
    transform: translateY(-1px);
}
}

.chrono-duration__preset:active {
    transform: translateY(0);
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-duration__custom-label {
    margin-top: 0;
    font-size: 11px;
    font-weight: 700;
    color: var(--planning-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chrono-duration__custom {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: stretch;
}

.chrono-duration__wheels {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.chrono-duration__wheel-sep {
    font-size: 22px;
    font-weight: 600;
    color: var(--planning-muted, #64748b);
    padding: 0 4px;
}

.chrono-duration__custom-add {
    align-self: stretch;
    justify-content: center;
}

.chrono-duration__parallel {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 0;
    padding: 9px 12px;
    border-radius: 14px;
    background: var(--planning-surface-elevated, #f8fafc);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
}

.chrono-duration__parallel-toggle {
    position: relative;
    width: 100%;
    border: none;
    background: transparent;
    color: var(--planning-text, #0f172a);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0;
    cursor: pointer;
    text-align: left;
}

.chrono-duration__parallel-toggle:disabled {
    cursor: default;
    opacity: 0.5;
}

.chrono-duration__parallel-copy {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chrono-duration__parallel-title {
    font-size: 13px;
    font-weight: 800;
    color: var(--planning-text, #0f172a);
    letter-spacing: 0;
}

.chrono-duration__parallel-subtitle {
    font-size: 12px;
    font-weight: 600;
    color: var(--planning-muted, #64748b);
    line-height: 1.25;
    letter-spacing: 0;
}

.chrono-duration__parallel-switch {
    position: relative;
    flex: 0 0 auto;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--v4-ink, #201e1d) 25%, var(--v4-bg, #fffaf1));
    box-shadow: inset 0 1px 2px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.14);
    transition: background 0.18s ease;
}

.chrono-duration__parallel-knob {
    position: absolute;
    left: 3px;
    top: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--v4-bg, #fff);
    box-shadow: 0 1px 3px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.24);
    transition: transform 0.18s ease;
}

.chrono-duration__parallel-toggle.active .chrono-duration__parallel-switch {
    background: var(--planning-accent, #2563eb);
}

.chrono-duration__parallel-toggle.active .chrono-duration__parallel-knob {
    transform: translateX(18px);
}

.chrono-duration__parallel-select {
    width: 100%;
}

/* Цель в день — встроена в модалку, чтобы можно было задать/править/убрать
   в тот же момент, когда уже думаешь про время. Менять можно сколько угодно,
   change сохраняется на blur, Enter, или одновременно с добавлением минут. */
.chrono-duration__target {
    margin-top: 0;
    padding: 14px 14px;
    border-radius: 14px;
    background: var(--planning-surface-elevated, #f8fafc);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.chrono-duration__target-label {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--planning-muted, #64748b);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chrono-duration__target-input {
    width: 80px;
    flex: 0 0 auto;
    text-align: center;
    font-variant-numeric: tabular-nums;
}

.chrono-duration__target-unit-toggle {
    flex: 0 0 auto;
    display: inline-flex;
    background: var(--planning-surface, #fff);
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.12));
    border-radius: 999px;
    padding: 2px;
}

.chrono-duration__target-unit-btn {
  position: relative;
    border: none;
    background: transparent;
    color: var(--planning-muted, #64748b);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
    min-width: 32px;
}

.chrono-duration__target-unit-btn.active {
    background: var(--planning-accent, #2563eb);
    color: var(--v4-btn-on-act, #2b1608);
}

.chrono-duration__target-value {
    flex: 1 1 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
}

.chrono-duration__target-value .chrono-duration__target-input {
    flex: 0 1 70px;
    min-width: 56px;
}

.chrono-duration__target-clear {
  position: relative;
    flex: 0 0 auto;
    border: none;
    background: transparent;
    color: var(--planning-muted, #64748b);
    cursor: pointer;
    font-size: 14px;
    padding: 4px 8px;
    border-radius: 8px;
}

@media (hover: hover) {
  .chrono-duration__target-clear:hover {
    background: color-mix(in srgb, var(--v4-val-bad, #a8382b) 10%, transparent);
    color: var(--v4-warn-1, #ef4444);
}
}

/* Кнопка Сохранить/Обновить — синяя, при flash зеленеет на 900мс
   (тот же savedFlash-стейт, что и инпут). */
.chrono-duration__target-save {
  position: relative;
    margin-left: auto;
    flex: 0 0 auto;
    border: none;
    background: var(--planning-accent, #2563eb);
    color: var(--v4-btn-on-act, #2b1608);
    font-size: 13px;
    font-weight: 700;
    padding: 7px 14px;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease, opacity 0.15s ease;
    white-space: nowrap;
}

@media (hover: hover) {
  .chrono-duration__target-save:hover:not(:disabled) {
    filter: brightness(1.06);
}
}

.chrono-duration__target-save:active:not(:disabled) {
    opacity: 0.7;
    transition: opacity 120ms ease;
}

.chrono-duration__target-save:disabled {
    opacity: 0.4;
    cursor: default;
}

.chrono-duration__target-save.is-saved {
    background: var(--v4-ok-fill, #22c55e);
}

/* Зелёный flash на инпуте + плашка «✓ сохранено» — фидбек что значение
   ушло в стор. Длится 900мс синхронно с savedFlash-стейтом в JS. */
.chrono-duration__target-input {
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.chrono-duration__target-input.is-saved {
    background-color: var(--v4-ok-bg, #dcfce7);
    border-color: var(--v4-ok-fill, #22c55e);
}

.chrono-duration__target-saved {
    flex: 0 0 100%;
    font-size: 12px;
    font-weight: 600;
    color: var(--v4-ok-text, #16a34a);
    animation: chrono-target-saved 0.9s ease-out forwards;
}

.chrono-duration__link {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 0;
    padding: 14px 14px;
    border-radius: 14px;
    background: var(--planning-surface-elevated, #f8fafc);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
}

.chrono-duration__link-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--planning-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chrono-duration__link-select {
    width: 100%;
}

.chrono-duration__category,
.chrono-duration__smart {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 0;
    padding: 14px 14px;
    border-radius: 14px;
    background: var(--planning-surface-elevated, #f8fafc);
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
}

.chrono-duration__category-title,
.chrono-duration__smart-title {
    font-size: 11px;
    font-weight: 700;
    color: var(--planning-muted, #64748b);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.chrono-duration__category-list,
.chrono-duration__smart-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.chrono-duration__category-chip,
.chrono-duration__smart-chip {
    position: relative;
    border: 1px solid var(--planning-border, rgba(15, 23, 42, 0.1));
    background: var(--planning-surface, #fff);
    color: var(--planning-text, #0f172a);
    border-radius: 999px;
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: -0.005em;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

@media (hover: hover) {
  .chrono-duration__category-chip:hover,
.chrono-duration__smart-chip:hover {
    border-color: var(--planning-text, #0f172a);
}
}

.chrono-duration__category-chip.active {
    background: var(--chrono-category-color, var(--planning-accent, #2563eb));
    border-color: var(--chrono-category-color, var(--planning-accent, #2563eb));
    color: var(--v4-bg, #fff);
}

.chrono-duration__smart-chip {
    background: color-mix(in srgb, var(--v4-act, #c67139) 8%, transparent);
    border-color: color-mix(in srgb, var(--v4-act, #c67139) 20%, transparent);
    color: var(--v4-act-text, #8a4a20);
}

/* --- Timeline + weekly report --- */
.chrono-timeline-overlay {
    z-index: 10050;
}

.chrono-timeline {
    max-width: 520px;
    width: calc(100% - 24px);
}

.chrono-timeline__body {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 70vh;
    overflow-y: auto;
}

.chrono-timeline__empty {
    padding: 18px 12px;
    text-align: center;
    color: var(--planning-muted, #64748b);
}

.chrono-timeline__row {
  position: relative;
    display: grid;
    grid-template-columns: 52px 12px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: center;
    border: 1px solid var(--planning-border-soft, rgba(15, 23, 42, 0.06));
    background: var(--planning-surface, #fff);
    color: var(--planning-text, #0f172a);
    border-radius: 10px;
    padding: 10px;
    text-align: left;
    cursor: pointer;
}

.chrono-timeline__time {
    font-size: 12px;
    font-weight: 700;
    color: var(--planning-muted, #64748b);
    font-variant-numeric: tabular-nums;
}

.chrono-timeline__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--chrono-category-color, var(--planning-accent, #2563eb));
}

.chrono-timeline__main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.chrono-timeline__name {
    font-size: 14px;
    font-weight: 800;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.chrono-timeline__cat {
    font-size: 11px;
    color: var(--planning-muted, #64748b);
}

.chrono-timeline__minutes {
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

.chrono-weekly-report {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 15px;
    border-radius: 14px;
    background: linear-gradient(155deg, color-mix(in srgb, var(--v4-bg, #fffaf1) 98%, transparent), color-mix(in srgb, var(--v4-hero, #efe3cf) 76%, transparent)),
        var(--planning-surface, #fff);
    border: 1px solid color-mix(in srgb, var(--v4-act, #c67139) 16%, transparent);
    box-shadow: 0 18px 40px -30px color-mix(in srgb, var(--v4-act, #c67139) 58%, transparent),
        inset 0 1px 0 color-mix(in srgb, var(--v4-bg, #fffaf1) 72%, transparent);
}

.chrono-weekly-report__head {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.chrono-weekly-report__eyebrow,
.chrono-weekly-report__label {
    font-size: 11px;
    color: var(--planning-muted, #64748b);
    font-weight: 800;
    letter-spacing: 0;
}

.chrono-weekly-report__title {
    font-size: 16px;
    font-weight: 900;
    color: var(--planning-text, #0f172a);
}

.chrono-weekly-report__score {
    appearance: none;
    border: 0;
    min-width: 58px;
    min-height: 48px;
    padding: 6px 10px;
    border-radius: 14px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--v4-act, #c67139);
    color: var(--v4-btn-on-act, #2b1608);
    box-shadow: 0 10px 24px -16px color-mix(in srgb, var(--v4-act, #c67139) 85%, transparent);
    cursor: pointer;
    font: inherit;
}

.chrono-weekly-report__score:focus-visible,
.chrono-weekly-report__day:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--v4-act, #c67139) 72%, transparent);
    outline-offset: 2px;
}

.chrono-weekly-report__score span {
    font-size: 9px;
    font-weight: 800;
    line-height: 1.1;
    opacity: 0.78;
}

.chrono-weekly-report__score strong {
    font-size: 18px;
    font-weight: 900;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.chrono-weekly-report__score-details {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: -4px;
}

.chrono-weekly-report__score-details span {
    padding: 5px 8px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--v4-act, #c67139) 7%, transparent);
    color: var(--planning-muted, #64748b);
    font-size: 11px;
    font-weight: 800;
    line-height: 1.15;
}

.chrono-weekly-report__lead {
    padding: 10px 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--v4-act, #c67139) 6%, transparent);
    color: var(--planning-text, #0f172a);
    font-size: 13px;
    font-weight: 800;
    line-height: 1.35;
}

.chrono-weekly-report__days {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.chrono-weekly-report__day-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
}

.chrono-weekly-report__day {
    appearance: none;
    min-width: 0;
    min-height: 54px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--planning-muted, #64748b);
    display: grid;
    grid-template-rows: 36px auto;
    gap: 4px;
    cursor: pointer;
    font: inherit;
}

.chrono-weekly-report__day-bar {
    width: 100%;
    height: 36px;
    padding: 3px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--v4-act, #c67139) 6%, transparent);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}

.chrono-weekly-report__day-bar > span {
    width: 100%;
    height: max(4px, calc(var(--day-level) * 100%));
    border-radius: 5px;
    background: var(--v4-act, #c67139);
    transition: height 180ms ease;
}

.chrono-weekly-report__day.is-empty .chrono-weekly-report__day-bar > span {
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.2);
}

.chrono-weekly-report__day-label {
    font-size: 10px;
    font-weight: 800;
    line-height: 1;
}

.chrono-weekly-report__metrics {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.chrono-weekly-report__metric {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 9px 10px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--v4-bg, #fffaf1) 72%, transparent);
    border: 1px solid color-mix(in srgb, var(--v4-act, #c67139) 8%, transparent);
}

.chrono-weekly-report__metric strong {
    font-size: 13px;
    line-height: 1.18;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--planning-text, #0f172a);
}

.chrono-weekly-report__signal {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 3px 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.035);
    border: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.055);
}

.chrono-weekly-report__signal-label {
    grid-column: 1 / -1;
    font-size: 11px;
    font-weight: 800;
    color: var(--planning-muted, #64748b);
}

.chrono-weekly-report__signal strong {
    min-width: 0;
    font-size: 13px;
    color: var(--planning-text, #0f172a);
}

.chrono-weekly-report__signal-value {
    font-size: 13px;
    font-weight: 900;
    font-variant-numeric: tabular-nums;
}

.chrono-weekly-report__signal.is-good .chrono-weekly-report__signal-value { color: var(--v4-ok-text, #5c6a45); }
.chrono-weekly-report__signal.is-bad .chrono-weekly-report__signal-value { color: var(--v4-warn-2, #dc2626); }
.chrono-weekly-report__signal.is-neutral .chrono-weekly-report__signal-value { color: var(--v4-act-text, #8a4a20); }

@keyframes chrono-target-saved {
    0%   { opacity: 0; transform: translateY(-4px); }
    20%  { opacity: 1; transform: translateY(0); }
    80%  { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(0); }
}

/* --- Undo toast --- */
.chrono-undo-toast {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(var(--planning-main-tabs-height, 96px) + var(--planning-subnav-height, 44px) + 24px);
    z-index: 950;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 999px;
    background: rgba(var(--v4-ink-rgb, 32, 30, 29), 0.92);
    color: var(--v4-bg, #fff);
    box-shadow: 0 8px 24px rgba(var(--v4-shadow-rgb, 80, 50, 20), 0.24);
    font-size: 13px;
    max-width: calc(100vw - 24px);
}

.chrono-undo-toast__text {
    white-space: nowrap;
}

.chrono-undo-toast__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--v4-act, #c67139) 55%, var(--v4-bg, #fffaf1));
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
}

.chrono-undo-toast__close {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: color-mix(in srgb, var(--v4-bg, #fffaf1) 70%, transparent);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    padding: 0;
}

/* --- Narrow viewport --- */
@media (max-width: 480px) {
    .chrono-cloud { gap: 12px; }
    .chrono-bubble { --size: 52px; }
    .chrono-emoji-palette { grid-template-columns: repeat(7, 1fr); }
    .chrono-picker__emoji-panel .chrono-emoji-palette { grid-template-columns: repeat(7, minmax(0, 1fr)); }
    .chrono-duration__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .chrono-scope-bar { row-gap: 6px; }
    .chrono-overview { grid-template-columns: minmax(0, 1fr); }
    .chrono-overview__top { border-right: 0; border-bottom: 1px solid rgba(var(--v4-ink-rgb, 32, 30, 29), 0.06); }
    .chrono-insights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* polosa5-tap-inset */
.chrono-timer-banner__control::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.chrono-duration__timer-chip::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}

.chrono-duration__target-kind-btn::after {
  content: '';
  position: absolute;
  inset: -13px 0;
}

.chrono-scope-bar__toggle-item::after {
  content: '';
  position: absolute;
  inset: -11px 0;
}

.chrono-scope-bar__nav-btn::after {
  content: '';
  position: absolute;
  inset: -8px;
}

.chrono-scope-bar__today::after {
  content: '';
  position: absolute;
  inset: -11px 0;
}

.chrono-scope-bar__icon-btn::after {
  content: '';
  position: absolute;
  inset: -5px;
}

.chrono-strip__item::after {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.chrono-overview__ledger-row::after {
  content: '';
  position: absolute;
  inset: -12px 0;
}

.chrono-untracked-flow__close::after {
  content: '';
  position: absolute;
  inset: -11px;
}

.chrono-untracked-flow__remove::after {
  content: '';
  position: absolute;
  inset: -10px;
}

.chrono-untracked-flow__parallel-toggle::after {
  content: '';
  position: absolute;
  inset: -10px -3px;
}

.chrono-untracked-flow__range::after {
  content: '';
  position: absolute;
  inset: -4px 0;
}

.chrono-history__tiny-btn::after {
  content: '';
  position: absolute;
  inset: -9px;
}

.chrono-picker__archive-toggle::after {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.chrono-picker__emoji--btn::after {
  content: '';
  position: absolute;
  inset: -4px;
}

.chrono-picker__icon-btn::after {
  content: '';
  position: absolute;
  inset: -7px;
}

.chrono-picker__create-btn::after {
  content: '';
  position: absolute;
  inset: -9px 0;
}

.chrono-emoji-palette__item::after {
  content: '';
  position: absolute;
  inset: -4px;
}

.chrono-delete__merge-option::after {
  content: '';
  position: absolute;
  inset: -6px 0;
}

.chrono-duration__target-unit-btn::after {
  content: '';
  position: absolute;
  inset: -11px -6px;
}

.chrono-duration__target-clear::after {
  content: '';
  position: absolute;
  inset: -10px 0;
}

.chrono-duration__target-save::after {
  content: '';
  position: absolute;
  inset: -8px 0;
}

.chrono-timeline__row::after {
  content: '';
  position: absolute;
  inset: -3px 0;
}

.chrono-duration__smart-chip::after {
  content: '';
  position: absolute;
  inset: -9px 0;
}

.chrono-picker__target-period-btn::after {
  content: '';
  position: absolute;
  inset: -11px 0;
}

.chrono-duration__parallel-toggle::after {
  content: '';
  position: absolute;
  inset: -22px 0;
}

.chrono-undo-toast__action::after {
  content: '';
  position: absolute;
  inset: -22px;
}

.chrono-undo-toast__close::after {
  content: '';
  position: absolute;
  inset: -22px;
}


/* Keep the activity map and its editor in separate layout regions. */
.chrono-screen { --chrono-action: var(--v4-act, #c67139); }
.chrono-screen .chrono-strip { background: var(--v4-bg, #fffaf1); }
.chrono-screen .chrono-scope-bar__toggle-item.active,
.chrono-screen .chrono-untracked-flow__confirm-now { background: var(--chrono-action); color: var(--v4-btn-on-act, #2b1608); }
.chrono-screen .chrono-strip__item--add { background: transparent; color: var(--text, #302b27); border: 1px solid currentColor; }
.chrono-screen .chrono-bubble__emoji { order: 0; font-size: clamp(14px, calc(var(--size) * .16), 24px); }
.chrono-screen .chrono-bubble__time { order: 1; }
.chrono-screen .chrono-bubble__name { order: 2; display: block; white-space: nowrap; font-size: clamp(10px, calc(var(--size) * .089), 14px); }
.chrono-screen .chrono-bubble__plan { order: 3; }
.chrono-screen .chrono-overview__total { width: 100%; color: inherit; font: inherit; }
.chrono-screen .chrono-overview__total-value { color: var(--chrono-action); }
.chrono-screen.is-distributing .chrono-cloud { min-height: 84px; overflow-y: auto; }
/* Во время распределения времени кружки остаются облаком: если места мало,
   раскладка уменьшает их масштаб (computeRadialLayoutFit), а не строит ряд. */
.chrono-screen.is-distributing .chrono-bubble-wrap { animation: none; }
/* Совсем мелкий кружок (много активностей или мало места) — только значок и время:
   название и план в него уже не помещаются. */
.chrono-screen .chrono-bubble--mini .chrono-bubble__name,
.chrono-screen .chrono-bubble--mini .chrono-bubble__plan { display: none; }
.chrono-screen .chrono-bubble--mini .chrono-bubble__time { font-size: 11px; }

.chrono-screen .chrono-overview:not(.chrono-overview--modal) {
  background: var(--v4-bg, #fffaf1);
  border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
  border-radius: 16px;
  box-shadow: none;
}
.chrono-screen .chrono-overview__total {
  appearance: none;
  box-sizing: border-box;
  min-height: 52px;
  padding: 9px 16px;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-family: system-ui, sans-serif;
  text-align: start;
}
.chrono-screen .chrono-overview__last + .chrono-overview__total {
  border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}
.chrono-screen .chrono-overview__total-label { font-size: 13px; font-weight: 500; color: var(--planning-muted, #66635e); }
.chrono-screen .chrono-overview__total-value { margin-inline-start: auto; font-size: 18px; color: inherit; letter-spacing: -.025em; }
.chrono-overview__total-value small { font-size: 11px; font-weight: 500; color: var(--planning-muted, #66635e); letter-spacing: normal; }
button.chrono-overview__total { cursor: pointer; }
button.chrono-overview__total::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); opacity: .55; }
button.chrono-overview__total[aria-expanded="true"]::after { transform: rotate(225deg); }
.chrono-screen .chrono-overview__untracked-action { background: var(--chrono-action); box-shadow: none; }
.chrono-screen .chrono-untracked-flow__activity { white-space: normal; }
@media (max-width: 400px) { .chrono-screen .chrono-scope-bar { flex-wrap: wrap; row-gap: 4px; } }

/* The day overview uses the same hero, surface and action roles as Activity. */
.chrono-screen .chrono-overview:not(.chrono-overview--modal) {
  background: var(--v4-hero, #efe3cf); color: var(--v4-ink, #201e1d); border: none; border-radius: 20px;
}
.chrono-screen .chrono-overview__last { padding: 8px 14px; align-items: center; }
.chrono-screen .chrono-overview__last + .chrono-overview__total { border-color: var(--v4-line, rgba(0, 0, 0, 0.08)); }
.chrono-screen .chrono-overview__total-value { color: var(--v4-ink, #201e1d); font-size: 22px; }
.chrono-screen .chrono-overview__total-label,
.chrono-screen .chrono-overview__total-value small,
.chrono-screen .chrono-overview__last-now { color: var(--v4-ink-2, rgba(0, 0, 0, 0.56)); }
.chrono-screen .chrono-overview__untracked-text { color: var(--v4-act-text, #8a4a20); }
.chrono-screen .chrono-overview__untracked-action,
.chrono-screen .chrono-overview__untracked-action.active { background: transparent; color: var(--v4-btn-on-act, #2b1608); }
.chrono-screen .chrono-overview__untracked-action::before { border: 0; background: var(--v4-act, #c67139); box-shadow: none; border-radius: 999px; }
.chrono-screen .chrono-scope-bar__toggle,
.chrono-screen .chrono-scope-bar__nav-btn,
.chrono-screen .chrono-scope-bar__today,
.chrono-screen .chrono-scope-bar__icon-btn,
.chrono-screen .chrono-strip__item { background: var(--v4-c1, #f7efe2); border-color: transparent; color: var(--v4-ink, #201e1d); }
.chrono-screen .chrono-untracked-flow { background: var(--v4-c1, #f7efe2); color: var(--v4-ink, #201e1d); border: 0; box-shadow: none; }
.chrono-screen .chrono-untracked-flow__title { color: var(--v4-ink-2, rgba(0, 0, 0, 0.56)); }
.chrono-screen .chrono-untracked-flow__slider-row { background: var(--v4-bg, #fffaf1); border: 0; }

.chrono-screen .chrono-overview__last { padding: 0 12px; min-height: 44px; }
.chrono-screen .chrono-overview__total { min-height: 40px; padding: 6px 12px; }
.chrono-screen .chrono-overview__total-value { font-size: 19px; }
.chrono-screen .chrono-overview__untracked-action { min-height: 44px; min-width: 84px; padding-inline: 12px; }
.chrono-screen .chrono-overview__untracked-action::before { inset-block: 6px; }
.chrono-screen .chrono-untracked-flow__range { --chrono-range-fill: var(--v4-ok-fill, #7a8a5e); --chrono-range-track: var(--v4-track, rgba(0, 0, 0, 0.12)); }
.chrono-screen .chrono-untracked-flow__range::-webkit-slider-runnable-track {
  background: linear-gradient(90deg, var(--chrono-range-fill) var(--chrono-range-pct), var(--chrono-range-track) var(--chrono-range-pct));
  box-shadow: none;
}
.chrono-screen .chrono-untracked-flow__slider-row.is-parallel .chrono-untracked-flow__range:disabled::-webkit-slider-runnable-track { background: var(--v4-ok-fill, #7a8a5e); }
.chrono-screen .chrono-untracked-flow__range::-webkit-slider-thumb,
.chrono-screen .chrono-untracked-flow__slider-row.is-parallel .chrono-untracked-flow__range:disabled::-webkit-slider-thumb { box-shadow: none; background: var(--v4-ok-fill, #7a8a5e); }
.chrono-screen .chrono-untracked-flow__range::-moz-range-progress { background: var(--v4-ok-fill, #7a8a5e); }
.chrono-screen .chrono-untracked-flow__range::-moz-range-thumb { box-shadow: none; }