/* ---------- «План»: доска дня по зонам (колонка = день; зоны Утро · День · Вечер; сверху «Без времени») ---------- */
.cal-root, .cal-root * { box-sizing: border-box; }
.cal-root {
  --cal-n: 4;
  --cal-p: 2px;                 /* поля доски */
  --cal-i: 3px;                 /* отступ зоны от края колонки */
  --cal-g: 6px;                 /* промежуток между карточками */
  --cal-card: var(--surface);
  --cal-ring: color-mix(in srgb, var(--line) 85%, transparent);
  --cal-lift: 0 1px 2px color-mix(in srgb, var(--shade) var(--shade-s), transparent);
  --cal-edge: color-mix(in srgb, var(--muted) 40%, transparent);
  --cal-zm: color-mix(in srgb, var(--doing) 9%, var(--bg));
  --cal-zd: color-mix(in srgb, var(--muted) 10%, var(--bg));
  --cal-ze: color-mix(in srgb, var(--snooze) 9%, var(--bg));
  --cal-zt: color-mix(in srgb, var(--muted) 5%, var(--bg));
  --cal-zl: color-mix(in srgb, var(--text) 62%, var(--bg));
  --cal-tint: color-mix(in srgb, var(--accent) 5%, transparent);
  position: relative; isolation: isolate; height: 100%; min-height: 0;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--bg); color: var(--text); font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .cal-root {
    --cal-card: var(--surface-2);
    --cal-ring: color-mix(in srgb, var(--line) 70%, transparent);
    --cal-zm: color-mix(in srgb, var(--doing) 5%, var(--surface));
    --cal-zd: color-mix(in srgb, var(--muted) 7%, var(--surface));
    --cal-ze: color-mix(in srgb, var(--snooze) 9%, var(--surface));
    --cal-zt: color-mix(in srgb, var(--muted) 4%, var(--bg));
    --cal-tint: color-mix(in srgb, var(--accent) 8%, transparent);
  }
}
:root[data-theme="dark"] .cal-root {
  --cal-card: var(--surface-2);
  --cal-ring: color-mix(in srgb, var(--line) 70%, transparent);
  --cal-zm: color-mix(in srgb, var(--doing) 5%, var(--surface));
  --cal-zd: color-mix(in srgb, var(--muted) 7%, var(--surface));
  --cal-ze: color-mix(in srgb, var(--snooze) 9%, var(--surface));
  --cal-zt: color-mix(in srgb, var(--muted) 4%, var(--bg));
  --cal-tint: color-mix(in srgb, var(--accent) 8%, transparent);
}
.cal-root [hidden] { display: none !important; }
:where(.cal-root) button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: left; -webkit-tap-highlight-color: transparent; }
:where(.cal-root) button:disabled { cursor: default; }
.cal-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

/* шапка: диапазон слева, «Сегодня» и стрелки справа */
.cal-head { flex: none; display: flex; align-items: center; gap: 4px; min-height: 48px; padding: 0 8px 0 16px; }
.cal-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 17px; line-height: 24px; font-weight: 600; letter-spacing: -.01em; }
.cal-today-btn { flex: none; min-height: 44px; padding: 0 16px; border-radius: 22px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); color: var(--accent); font-size: 15px; line-height: 20px; font-weight: 600; text-align: center; }
.cal-today-btn:active { background: var(--surface-2); }
.cal-nav { flex: none; width: 44px; height: 44px; display: grid; place-items: center; border-radius: 22px; color: var(--text); text-align: center; }
.cal-nav:active { background: var(--surface-2); }
.cal-nav:disabled { opacity: .35; background: none; }

/* спокойная полоска «со вчера» */
.cal-tails { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; margin: 0 8px 4px; padding: 0 2px 0 16px; border-radius: 16px; background: color-mix(in srgb, var(--muted) 10%, transparent); font-size: 14px; line-height: 20px; color: var(--muted); }
.cal-tails-b { flex: none; min-height: 44px; padding: 0 12px; border-radius: 16px; color: var(--accent); font-size: 15px; line-height: 20px; font-weight: 600; text-align: center; }
.cal-tails-b:active { background: color-mix(in srgb, var(--muted) 12%, transparent); }

/* прокручиваемая доска; строка дней прилипает сверху */
.cal-scroll { position: relative; flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.cal-scroll::-webkit-scrollbar { display: none; }
.cal-days, .cal-board { display: grid; grid-template-columns: repeat(var(--cal-n), minmax(0, 1fr)); padding: 0 var(--cal-p); }
.cal-days { position: sticky; top: 0; z-index: 4; background: var(--bg); }
.cal-root.is-scrolled .cal-days { box-shadow: 0 1px 0 var(--line); }
.cal-board { grid-template-rows: repeat(var(--cal-r, 3), auto); padding-bottom: var(--cal-pb, 16px); }

/* заголовок дня; у сегодняшнего — верхняя часть рамки колонки */
.cal-d { min-width: 0; margin: 0 -1px; display: flex; flex-direction: column; align-items: center; gap: 0; padding: 4px 0; border: 1.5px solid transparent; border-bottom: 0; border-radius: 16px 16px 0 0; color: var(--text); text-align: center; }
.cal-wd { font-size: 12px; line-height: 16px; color: var(--muted); }
.cal-dd { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; font-size: 16px; line-height: 20px; font-weight: 600; }
.cal-d.is-today { border-color: var(--accent); background: var(--cal-tint); }
.cal-d.is-today .cal-dd { background: var(--accent); color: var(--on-color); }
.cal-d.is-today .cal-wd { color: var(--accent); font-weight: 600; }
.cal-d.is-past .cal-dd { color: var(--muted); font-weight: 500; }
button.cal-d:active { opacity: .7; }

/* рамка сегодняшней колонки: ячейка доски поверх колонки, нижняя часть рамки */
.cal-frame { pointer-events: none; z-index: 0; margin: 0 -1px; border: 1.5px solid var(--accent); border-top: 0; border-radius: 0 0 16px 16px; background: var(--cal-tint); }

/* ---------- зоны ---------- */
.cal-zone { position: relative; z-index: 1; min-width: 0; min-height: 72px; display: flex; flex-direction: column; gap: var(--cal-g); margin: 0 var(--cal-i) 4px; padding: 0 3px 3px; border-radius: 12px; background: var(--cal-zone-bg, var(--cal-zd)); }
.cal-z-m { --cal-zone-bg: var(--cal-zm); }
.cal-z-d { --cal-zone-bg: var(--cal-zd); }
.cal-z-e { --cal-zone-bg: var(--cal-ze); }
.cal-z-t { --cal-zone-bg: var(--cal-zt); min-height: 0; }
.cal-zone.is-blank { background: none; padding: 0; min-height: 0; }
.cal-zl { flex: none; margin-bottom: -2px; padding: 6px 0 0 3px; font-size: 11px; line-height: 12px; font-weight: 600; color: var(--cal-zl); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* пустая зона: едва заметный «+» на всю зону; у зоны с карточками — строка с «+» под ними (есть всегда, даже когда зона заполнена) */
.cal-add { position: absolute; inset: 0; z-index: 0; border-radius: 12px; display: grid; place-items: center; color: var(--muted); }
.cal-plus { width: 20px; height: 20px; opacity: .4; stroke-width: 1.8; }
.cal-add:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cal-add:active .cal-plus { opacity: .8; color: var(--accent); }
.cal-fill { flex: 1 1 0; min-height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--muted); }
.cal-fill .cal-plus { width: 16px; height: 16px; }
.cal-fill:active { background: color-mix(in srgb, var(--accent) 8%, transparent); }
.cal-fill:active .cal-plus { opacity: .8; color: var(--accent); }

/* ---------- карточки ---------- */
.cal-card { position: relative; flex: none; width: 100%; min-height: 44px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 6px 3px 6px 4px; border-left: 2px solid var(--cal-c, var(--cal-edge)); border-radius: 8px; background: var(--cal-card); color: var(--text); text-align: left; box-shadow: 0 0 0 1px var(--cal-ring), var(--cal-lift); }
.cal-card:active { background: color-mix(in srgb, var(--cal-card) 88%, var(--accent)); }
.cal-ct { display: flex; align-items: center; justify-content: space-between; gap: 4px; min-height: 12px; font-size: 11px; line-height: 12px; font-weight: 500; color: var(--muted); }
.cal-ct time { font-variant-numeric: tabular-nums; }
.cal-tt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden; overflow-wrap: break-word; -webkit-hyphens: auto; hyphens: auto; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: -.01em; }
.cal-urg { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--urgent); }
.cal-urg-in { display: inline-block; margin: 0 4px 1px 0; vertical-align: middle; }
/* в работе: обводка; сделано: приглушено и зачёркнуто; сегодня прошедшее несделанное чуть приглушено */
.cal-card.is-doing { box-shadow: 0 0 0 1.5px var(--doing), var(--cal-lift); }
.cal-card.is-done { background: color-mix(in srgb, var(--cal-card) 45%, transparent); color: var(--muted); box-shadow: 0 0 0 1px var(--cal-ring); border-left-color: color-mix(in srgb, var(--cal-c, var(--muted)) 40%, transparent); }
.cal-card.is-done .cal-tt { text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.cal-card.is-past { opacity: .72; }

/* линия «сейчас»: подпись и тонкая линия, отделяют прошедшее от предстоящего */
.cal-now { flex: none; display: flex; flex-direction: column; gap: 2px; margin: -2px 0; color: var(--accent); pointer-events: none; }
.cal-now-t { padding: 0 3px; font-size: 11px; line-height: 12px; font-weight: 600; white-space: nowrap; }
.cal-now::after { content: ""; height: 1.5px; border-radius: 1px; background: var(--accent); }

/* «+N ещё» / «Свернуть» */
.cal-more { flex: none; width: 100%; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 4px; border-radius: 8px; background: color-mix(in srgb, var(--accent) 9%, transparent); color: var(--accent); font-size: 12px; line-height: 16px; font-weight: 600; text-align: center; }
.cal-more:active { background: color-mix(in srgb, var(--accent) 16%, transparent); }
.cal-more .cal-ico { width: 16px; height: 16px; }

/* ---------- неделя: спокойный обзор ---------- */
.cal-wk { --cal-i: 2px; }
.cal-wk .cal-d { padding: 4px 0; }
.cal-wn { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 0 var(--cal-i) 4px; padding: 0 4px 4px; cursor: pointer; }
.cal-wn b { min-width: 24px; padding: 0 6px; border-radius: 10px; background: color-mix(in srgb, var(--muted) 14%, transparent); font-size: 12px; line-height: 20px; font-weight: 600; text-align: center; }
.cal-wn.is-zero b { background: none; color: var(--muted); font-weight: 500; }
.cal-wn.is-today b { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.cal-bar { display: block; width: 100%; height: 4px; border-radius: 2px; background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.cal-bar i { display: block; height: 100%; border-radius: 2px; background: var(--accent); }
.cal-wz { min-width: 0; min-height: 52px; display: flex; flex-direction: column; gap: 4px; margin: 0 var(--cal-i) 4px; padding: 0 3px 4px; border-radius: 8px; background: var(--cal-zone-bg, var(--cal-zd)); cursor: pointer; }
.cal-wz:active { opacity: .7; }
.cal-wz .cal-zl { padding: 4px 0 0; margin: 0; font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: -.02em; color: var(--muted); white-space: normal; overflow: visible; }
.cal-dots { display: flex; flex-wrap: wrap; align-items: center; gap: 3px 2px; }
.cal-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cal-c, var(--muted)); }
.cal-dot.is-done { opacity: .35; }
.cal-dmore { font-size: 10px; line-height: 12px; font-weight: 600; color: var(--muted); }

/* широкие колонки (контейнер шире телефона) */
.cal-wide .cal-tt { font-size: 13px; }
.cal-wide .cal-ct { font-size: 12px; }

/* листание */
@keyframes cal-in-next { from { opacity: .3; transform: translateX(28px); } to { opacity: 1; transform: none; } }
@keyframes cal-in-prev { from { opacity: .3; transform: translateX(-28px); } to { opacity: 1; transform: none; } }
.cal-go-next .cal-days, .cal-go-next .cal-board { animation: cal-in-next .24s var(--ease-out) both; }
.cal-go-prev .cal-days, .cal-go-prev .cal-board { animation: cal-in-prev .24s var(--ease-out) both; }
@media (prefers-reduced-motion: reduce) {
  .cal-go-next .cal-days, .cal-go-next .cal-board, .cal-go-prev .cal-days, .cal-go-prev .cal-board { animation: none; }
}