/* Главные экраны: календарь (месяц), день (лента времени), задачи */

/* ---------- Календарь: месяц ---------- */
.dow{flex:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));padding:0 8px;color:var(--muted);font-size:11px;font-weight:700;text-align:center;letter-spacing:.05em;text-transform:uppercase}
.dow span{padding:6px 0 7px}
.month{flex:1;min-height:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr));padding:0 8px}
.cell{position:relative;display:flex;flex-direction:column;align-items:stretch;gap:3px;min-width:0;min-height:0;overflow:hidden;padding:5px 2px 2px;text-align:left;border-top:1px solid var(--line);transition:background .15s}
.cell .num{align-self:center;display:grid;place-items:center;min-width:25px;height:25px;padding:0 4px;border-radius:999px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums}
.cell.is-out>*{opacity:.36}
.cell.is-today .num{background:var(--accent);color:var(--on-accent);font-weight:700}
.cell.is-selected{background:var(--accent-soft)}
.evs{display:flex;flex-direction:column;gap:2px;min-width:0}
.ev{display:block;flex:none;overflow:hidden;white-space:nowrap;font-size:9.5px;line-height:1.3;font-weight:600;padding:1.5px 4px;border-radius:5px;
  background:color-mix(in srgb,var(--c) 14%,transparent);color:color-mix(in srgb,var(--c) 70%,var(--text))}
.ev.cut{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 11px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 11px),transparent)}
.more{font-size:9.5px;font-weight:700;color:var(--muted);padding-left:4px}
.app[data-device="desktop"] .dow{padding:0 28px;text-align:left}
.app[data-device="desktop"] .dow span{padding-left:10px}
.app[data-device="desktop"] .month{padding:0 28px 24px}
.app[data-device="desktop"] .cell{padding:8px 8px 6px;gap:5px}
.app[data-device="desktop"] .cell .num{align-self:flex-start}
.app[data-device="desktop"] .ev{font-size:12px;padding:3px 8px;border-radius:7px}
.app[data-device="desktop"] .more{font-size:11.5px;padding-left:8px}
/* «Мягкий»: плитки с мягкими углами, записи — пастельные «таблетки» */
.app[data-variant="b"] .month{gap:4px;padding:0 10px}
.app[data-variant="b"] .cell{border-top:0;border-radius:14px;background:var(--surface)}
.app[data-variant="b"] .cell.is-today .num{border-radius:9px}
.app[data-variant="b"] .cell.is-selected{background:var(--surface);box-shadow:inset 0 0 0 2px var(--accent)}
.app[data-variant="b"] .ev{border-radius:999px;background:color-mix(in srgb,var(--c) 27%,var(--surface));color:var(--text)}
.app[data-variant="b"][data-device="desktop"] .month{gap:6px;padding:0 28px 24px}
.app[data-variant="b"][data-device="desktop"] .cell{border-radius:16px}
/* Палитра записей. У записи свой цвет (--c), палитра решает, каким его показать: пастельным (как выше), ярким или нюдовым.
   Карточка выбора палитры (.pal-card) показывает записи в своей палитре независимо от текущей. */
.app[data-palette="bright"] .ev,.app .pal-card[data-palette="bright"] .ev{background:color-mix(in srgb,var(--c) 94%,#000);color:var(--bright-ink)}
.app[data-palette="nude"] .ev,.app .pal-card[data-palette="nude"] .ev{background:color-mix(in srgb,color-mix(in srgb,var(--c) 34%,var(--nude)) 80%,var(--surface));color:color-mix(in srgb,var(--c) 30%,var(--nude-ink))}
.app .pal-card[data-palette="pastel"] .ev{background:color-mix(in srgb,var(--c) 14%,transparent);color:color-mix(in srgb,var(--c) 70%,var(--text))}
.app[data-variant="b"] .pal-card[data-palette="pastel"] .ev{background:color-mix(in srgb,var(--c) 27%,var(--surface));color:var(--text)}

/* ---------- День: неделя, сводка, лента времени ---------- */
.weekstrip{flex:none;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;padding:0 14px 12px}
.wd{display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 0 7px;border-radius:var(--r);color:var(--muted);font-size:11px;font-weight:700}
.wd b{font-size:16px;font-weight:600;color:var(--text)}
.wd .dot{width:4px;height:4px;border-radius:50%;background:transparent}
.wd .dot.has{background:var(--c-work)}
.wd.on{background:var(--accent);color:var(--on-accent)}
.wd.on b{color:inherit}
.wd.on .dot.has{background:currentColor}
.summary{flex:none;display:flex;align-items:center;gap:9px;min-width:0;height:42px;margin:0 16px 14px;padding:0 14px;border-radius:var(--r);background:var(--surface-2);font-size:13px;color:var(--muted)}
.summary svg.lucide{width:16px;height:16px;color:var(--c-work)}
.summary span{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.summary b{color:var(--text);font-weight:700}
.summary strong{flex:none;color:var(--text);font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.tl-head,.tl{display:grid;grid-template-columns:44px minmax(0,1fr) minmax(0,1.3fr);column-gap:8px;padding:0 16px 0 8px}
.tl-head{flex:none;padding-bottom:8px;font-size:10.5px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.tl{position:relative;--h:58px;margin-top:8px}
.app[data-device="phone"] .tl-head,.app[data-device="phone"] .tl{grid-template-columns:44px minmax(0,.72fr) minmax(0,1.5fr)}
.tl-hour{height:var(--h);font-size:11px;color:var(--muted);text-align:right;padding-right:4px;font-variant-numeric:tabular-nums}
.tl-hour span{display:block;transform:translateY(-7px)}
.tl-lane{position:relative;background-image:linear-gradient(var(--line) 1px,transparent 1px);background-size:100% var(--h)}
.blk{position:absolute;left:0;right:0;overflow:clip;padding:8px 10px;border-radius:12px;font-size:12px;line-height:1.3;
  background:color-mix(in srgb,var(--c) 13%,var(--surface));border-left:3px solid var(--c)}
.blk b{display:block;font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk small{display:block;color:var(--muted);font-size:11.5px;margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.blk.sm{padding:5px 10px}
.blk-in{position:sticky;top:8px}
.mark{position:absolute;left:0;right:0;display:flex;align-items:center;gap:7px;height:30px;padding:0 10px;overflow:hidden;white-space:nowrap;border-radius:999px;font-size:12px;font-weight:700;background:var(--surface);box-shadow:0 0 0 1px var(--line)}
.mark svg.lucide{width:15px;height:15px;color:var(--c)}
.mark span{overflow:hidden;text-overflow:ellipsis}
.nowline{position:absolute;left:46px;right:10px;height:0;border-top:2px solid var(--accent);z-index:3;pointer-events:none}
.nowline::before{content:'';position:absolute;left:-4px;top:-5px;width:8px;height:8px;border-radius:50%;background:var(--accent)}
.app[data-device="desktop"] .weekstrip{padding:0 24px 14px;gap:8px}
.app[data-device="desktop"] .summary{margin:0 28px 16px;height:46px;font-size:14px}
.app[data-device="desktop"] .tl-head,.app[data-device="desktop"] .tl{padding:0 28px 0 16px;grid-template-columns:52px minmax(0,1fr) minmax(0,1.3fr);column-gap:12px}
.app[data-device="desktop"] .nowline{left:62px;right:28px}
.app[data-variant="b"] .summary{background:var(--surface);box-shadow:var(--shadow)}
.app[data-variant="b"] .wd{background:var(--surface)}
.app[data-variant="b"] .wd.on{background:var(--accent)}
.app[data-variant="b"] .blk{border-left:0;border-radius:18px;background:color-mix(in srgb,var(--c) 25%,var(--surface))}
.app[data-variant="b"] .mark{box-shadow:var(--shadow)}
.app[data-palette="bright"] .blk{background:color-mix(in srgb,var(--c) 92%,#000);color:var(--bright-ink);border-left-color:transparent}
.app[data-palette="bright"] .blk small{color:color-mix(in srgb,var(--bright-ink) 78%,transparent)}
.app[data-palette="nude"] .blk{background:color-mix(in srgb,color-mix(in srgb,var(--c) 34%,var(--nude)) 66%,var(--surface));border-left-color:color-mix(in srgb,var(--c) 40%,var(--nude))}

/* ---------- Задачи ---------- */
.quick{display:flex;align-items:center;gap:10px;height:48px;margin:2px 20px 14px;padding:0 14px;border-radius:var(--r);background:var(--surface-2);color:var(--muted)}
.quick input{flex:1;min-width:0;border:0;outline:0;background:none;font-size:15px}
.quick input::placeholder{color:var(--muted)}
.now{margin:0 20px 14px;padding:18px;border-radius:calc(var(--r) + 4px);background:var(--accent-soft)}
.now .k{display:flex;align-items:center;gap:6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-ink)}
.now h3{margin:9px 0 4px;font-size:21px;line-height:1.2;font-weight:var(--head-w);letter-spacing:var(--head-track)}
.now p{color:var(--muted);font-size:13.5px}
.now .row{display:flex;gap:8px;margin-top:14px}
.gentle{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 20px 6px;padding:12px 14px;border-radius:var(--r);border:1px dashed color-mix(in srgb,var(--muted) 45%,transparent);color:var(--muted);font-size:13.5px}
.gentle button{color:var(--accent-ink);font-weight:800;white-space:nowrap}
.group{padding:12px 20px 2px}
.group h2{display:flex;align-items:center;gap:8px;margin-bottom:2px;font-size:13px;font-weight:700;color:var(--muted)}
.group h2 em{font-style:normal;font-weight:600} /* Число — тем же серым, что и заголовок, без прозрачности: с ней контраст ниже 4,5:1 */
.task{display:flex;align-items:center;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);cursor:pointer}
.task:last-child{border-bottom:0}
.t-main{flex:1;min-width:0}
.t-title{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:15.5px;font-weight:500}
.t-meta{display:flex;align-items:center;gap:6px;margin-top:2px;color:var(--muted);font-size:12.5px}
.t-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c)}
.task.done .t-title{text-decoration:line-through;color:var(--muted)}
.task.open .t-title{white-space:normal;overflow:visible;text-overflow:clip} /* Нажали на текст задания — он виден целиком, а не обрывается многоточием */
.app[data-device="phone"] .top.stack{flex-wrap:wrap;gap:14px;padding-bottom:14px}
.app[data-device="phone"] .top.stack .top-actions,.app[data-device="phone"] .top.stack .seg{width:100%}
.app[data-device="phone"] .top.stack .seg button{flex:1}
.app[data-device="phone"] .top.stack .seg .mx-seg{max-width:none}
.app[data-variant="b"] .quick{background:var(--surface);box-shadow:var(--shadow)}
.app[data-variant="b"] .now{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 22%,var(--surface)),color-mix(in srgb,#ffd98a 38%,var(--surface)))}
.app[data-variant="b"][data-theme="dark"] .now{background:linear-gradient(135deg,color-mix(in srgb,var(--accent) 28%,var(--surface)),color-mix(in srgb,#ffd98a 14%,var(--surface)))}
.app[data-variant="b"] .group{margin:0 14px 12px;padding:14px 16px 4px;border-radius:var(--r);background:var(--surface);box-shadow:var(--shadow)}
.app[data-variant="b"] .group h2{font-size:16px;font-weight:800;color:var(--text)}
.app[data-variant="b"] .gentle{margin:0 14px 12px;border:0;background:var(--surface-2)}
/* Телефон: шапка календаря компактная — название месяца всегда в одну строку (длинный «Сентябрь» иначе переносится и съедает сетку), отступы меньше;
   сетка целиком стоит над панелью вкладок — ни одна неделя не прячется за ней */
.app[data-device="phone"] .cal-top{padding:14px 16px 6px;align-items:center}
html.tg-fullscreen .app[data-device="phone"] .cal-top{padding-top:calc(14px + var(--tg-content-safe-area-inset-top,0px) + var(--tg-safe-area-inset-top,0px))}
.app[data-device="phone"] .cal-top h1{white-space:nowrap;font-size:clamp(21px,7.2vw,var(--h1))}.app[data-device="phone"] .cal-top h1 span{font-size:.85em}
.app[data-device="phone"] .screen .dow span{padding:4px 0 5px}
.app[data-device="phone"] .screen .month{padding-bottom:calc(84px + var(--tg-safe-area-inset-bottom,0px))}
/* Телефон: --zone — место под панелью вкладок (панель 64 px + 16 px от низа: неделя следующего месяца начинается ровно у верхнего края панели, над ней — обычный зазор между неделями; во весь экран — ещё нижний край iPhone).
   Над ним — ровно недели месяца, неделю следующего месяца закрывает панель (см. month() в calendar.js); --rg — зазор между неделями */
.app{--zone:80px}html.tg-fullscreen .app{--zone:calc(80px + var(--tg-safe-area-inset-bottom,0px))}
.month{--rg:0px}.app[data-variant="b"] .month{--rg:4px}
.app[data-device="phone"] .screen .month.under{padding-bottom:0}
/* Разметка смен: сетка целиком над панелью разметки (она выше панели вкладок) */
.app[data-device="phone"] .screen .month:not(.under){padding-bottom:calc(100px + var(--tg-safe-area-inset-bottom,0px))}
/* Компьютер: только недели месяца, сетка доходит почти до низа окна — небольшой отступ снизу */
.app[data-device="desktop"] .month,.app[data-variant="b"][data-device="desktop"] .month{padding-bottom:12px}
/* Телефон: месяц, неделя и день листаются лентой за пальцем (js/pager.js). Рядом с текущим периодом лежат оба соседних, нарисованные
   заранее: у месяца — выше и ниже, у недели и дня — слева и справа, за краем. Нажать на них нельзя, экранный чтец их не читает.
   Лента и страницы прозрачные: между периодами — фон приложения, в тёмной теме без светлых полос. Неделю и день вверх-вниз
   прокручивает сам браузер (pan-y), месяц не прокручивается вовсе */
.pager{position:relative;flex:1;min-height:0;overflow:hidden}
.pg-x{touch-action:pan-y}.pg-y{touch-action:none}
.pg-track{position:relative;height:100%}
.pg-track>.pg-page,.pg-side,.pg-side>.pg-page{height:100%}
.pg-side{position:absolute;left:0;top:0;width:100%;pointer-events:none}
.pg-x>.pg-track>.pg-side[data-pg="-1"]{transform:translateX(-100%)}.pg-x>.pg-track>.pg-side[data-pg="1"]{transform:translateX(100%)}
/* Соседний месяц начинается сразу под последней неделей текущего. --pg-cut — низ страницы, где нет её недель: у месяца с неделей
   под панелью вкладок (pg-under) — место панели (--zone; зазор «Мягкого» между неделями уже в нём); при разметке смен под сеткой
   пусто — там соседний месяц за краем страницы, в «Мягком» — через тот же зазор, что между неделями */
.pg-y{--pg-gap:0px;--pg-cut:calc(0px - var(--pg-gap))}.app[data-variant="b"] .pg-y{--pg-gap:4px}.pg-y.pg-under{--pg-cut:var(--zone)}
.pg-y>.pg-track>.pg-side[data-pg="-1"]{transform:translateY(calc(var(--pg-cut) - 100%))}.pg-y>.pg-track>.pg-side[data-pg="1"]{transform:translateY(calc(100% - var(--pg-cut)))}
/* Неделя под панелью вкладок — у текущего месяца, пока лента стоит. Лента в движении (pg-live): под последней неделей месяца —
   сразу соседний месяц, недели идут по порядку (повторяется только общая неделя на стыке месяцев). В покое соседние месяцы
   спрятаны: нижний лёг бы на неделю под панелью */
.pg-side .cell.is-under,.pg-live>.pg-track>.pg-page>.cell.is-under{visibility:hidden}
.pg-under:not(.pg-live)>.pg-track>.pg-side{visibility:hidden}
/* Второй бросок, пока лента доезжает после первого: период ещё на шаг дальше виден, пока лента не встанет (js/pager.js, swap) */
.pg-far{position:absolute;left:0;top:0;width:100%;height:100%}.pg-far>.pg-page{height:100%}
.pg-x .pg-side[data-pg="-1"]>.pg-far{transform:translateX(-100%)}.pg-x .pg-side[data-pg="1"]>.pg-far{transform:translateX(100%)}
.pg-y .pg-side[data-pg="-1"]>.pg-far{transform:translateY(calc(var(--pg-cut) - 100%))}.pg-y .pg-side[data-pg="1"]>.pg-far{transform:translateY(calc(100% - var(--pg-cut)))}
.pager .month{overflow:hidden}
.pg-scroll{overflow-y:auto;overflow-x:hidden;overscroll-behavior:none;scrollbar-width:thin;padding-bottom:112px}
.day-page{display:flex;flex-direction:column}.day-page>.pg-scroll{flex:1;min-height:0}