/* Задачник Sappa — основа оформления в стиле iOS (docs/дизайн.md): шрифт, токены светлой и тёмной темы, сброс,
   типографика, общие элементы Z.ui (панель навигации, поиск, группы строк, плитки, задача, событие, смахивание,
   меню, сегменты, переключатель, плашки, шторка), раскладка телефон / ПК и страницы входа.
   Стили экранов — в lists.css, sheets.css, calendar.css: там только своё, общее — здесь. */

/* ── шрифт Inter (OFL, fonts/OFL-Inter.txt) — для Windows; на iPhone и Mac берётся системный SF ── */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-cyrillic.de93fdc85e3d.woff2") format("woff2");
  unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-latin-ext.1ad231aac0a8.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url("fonts/inter-latin.260c81a4759b.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── токены (системные цвета iOS) ── */
:root{
  color-scheme:light;
  --bg:#F2F2F7;
  --card:#FFFFFF;
  --card-2:#FFFFFF;
  --fill:rgba(118,118,128,.12);
  --sep:rgba(60,60,67,.29);
  --label:#000000;
  --label-2:rgba(60,60,67,.6);
  --label-3:rgba(60,60,67,.3);
  --blue:#007AFF;
  --red:#FF3B30;
  --orange:#FF9500;
  --yellow:#FFCC00;
  --yellow-text:#946400;        /* текст цвета «Щитов»: жёлтый на светлом не читается (1,35:1), этот — 4,6:1 */
  --on-yellow:#3D2E00;          /* символ на жёлтом значке и галочке */
  --green:#34C759;
  --indigo:#5856D6;
  --gray:#8E8E93;
  --graphite:#5B5B60;          /* плитка «Все» */
  --on-color:#FFFFFF;           /* текст и символы на цветном */
  --bar:rgba(249,249,249,.94);  /* панели навигации и вкладок, «стекло» */
  --bar-sep:rgba(0,0,0,.3);
  --sheet-bg:#F2F2F7;
  --sidebar-bg:#EBEBF0;
  --seg-thumb:#FFFFFF;
  --switch-off:rgba(120,120,128,.16);
  --pressed:#D1D1D6;            /* нажатая строка */
  --hover:rgba(0,0,0,.035);
  --sel:rgba(118,118,128,.16);  /* выбранная строка боковой панели */
  --menu-bg:rgba(250,250,250,.95);
  --menu-sep:rgba(0,0,0,.08);   /* промежуток между группами пунктов меню */
  --netbar-fg:#C00011;          /* «Нет связи»: красный темнее системного — 5:1 на светлом */
  --toast-bg:rgba(28,28,30,.94);
  --toast-action:#64B5FF;
  --shadow-pop:0 12px 40px rgba(0,0,0,.18),0 0 0 .5px rgba(0,0,0,.06);
  --ease:cubic-bezier(.32,.72,0,1);
  --dur:.33s;
  --font:-apple-system,BlinkMacSystemFont,"Inter",system-ui,sans-serif;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);
  --safe-r:env(safe-area-inset-right,0px);
  --nav-h:44px;
  --netbar-h:0px;               /* полоса «Нет связи» под панелью навигации (видна — 28 px, html.is-offline) */
  --kb:0px;                     /* высота клавиатуры iPhone над низом окна (Z.ui, visualViewport) */
  --tabbar-h:calc(49px + var(--safe-b));
  --inset:16px;                 /* отступ групп от краёв экрана */
}
html.is-offline{--netbar-h:28px}
@media (prefers-color-scheme:dark){
  :root{
    color-scheme:dark;
    --bg:#000000;
    --card:#1C1C1E;
    --card-2:#2C2C2E;
    --fill:rgba(118,118,128,.24);
    --sep:rgba(84,84,88,.65);
    --label:#FFFFFF;
    --label-2:rgba(235,235,245,.6);
    --label-3:rgba(235,235,245,.3);
    --blue:#0A84FF;
    --red:#FF453A;
    --orange:#FF9F0A;
    --yellow:#FFD60A;
    --yellow-text:#FFD60A;
    --on-yellow:#1E1A03;
    --green:#30D158;
    --indigo:#5E5CE6;
    --gray:#8E8E93;
    --graphite:#7C7C80;
    --bar:rgba(22,22,24,.9);
    --bar-sep:rgba(255,255,255,.16);
    --sheet-bg:#1C1C1E;
    --sidebar-bg:#161618;
    --seg-thumb:#636366;
    --switch-off:rgba(120,120,128,.32);
    --pressed:#3A3A3C;
    --hover:rgba(255,255,255,.04);
    --sel:rgba(118,118,128,.3);
    --menu-bg:rgba(40,40,42,.96);
    --menu-sep:rgba(0,0,0,.35);
    --netbar-fg:#FF453A;
    --toast-bg:rgba(58,58,60,.96);
    --toast-action:#64B5FF;
    --shadow-pop:0 12px 40px rgba(0,0,0,.5),0 0 0 .5px rgba(255,255,255,.08);
  }
}
/* «Увеличить контраст» в настройках устройства — контрастные варианты системных цветов Apple
   (тёмная тема — следующим блоком: он переопределяет те же токены) */
@media (prefers-contrast:more){
  :root{
    --blue:#0040DD;--red:#D70015;--orange:#C93400;--yellow:#B25000;--yellow-text:#7A5200;--on-yellow:#FFFFFF;--green:#248A3D;--indigo:#3634A3;
    --gray:#6C6C70;--graphite:#46464B;
    --label-2:rgba(60,60,67,.82);--label-3:rgba(60,60,67,.55);--sep:rgba(60,60,67,.5);--netbar-fg:#A1000E;
  }
}
@media (prefers-contrast:more) and (prefers-color-scheme:dark){
  :root{
    --blue:#409CFF;--red:#FF6961;--orange:#FFB340;--yellow:#FFD426;--yellow-text:#FFD426;--on-yellow:#1E1A03;--green:#30DB5B;--indigo:#7D7AFF;
    --gray:#AEAEB2;--graphite:#98989D;
    --label-2:rgba(235,235,245,.82);--label-3:rgba(235,235,245,.55);--sep:rgba(84,84,88,.9);--netbar-fg:#FF6961;
  }
}

/* цвет направления: --area (свои направления с hue — через el.style, Z.ui.paintArea) */
/* --area-text — текст цвета направления (у «Щитов» жёлтый текст не читается), --on-area — символ на цвете направления */
[data-area]{--area:var(--gray);--area-text:var(--area);--on-area:var(--on-color)}
[data-area="shields"]{--area:var(--yellow);--area-text:var(--yellow-text);--on-area:var(--on-yellow)}
[data-area="smart"]{--area:var(--blue)}
[data-area="software"]{--area:var(--indigo)}
[data-area="org"]{--area:var(--gray)}
[data-area="personal"]{--area:var(--green)}

/* ── сброс ── */
*,*::before,*::after{box-sizing:border-box}
html{height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent}
body{
  margin:0;height:100%;overflow:hidden;overscroll-behavior:none;
  background:var(--bg);color:var(--label);
  font:400 16px/21px var(--font);letter-spacing:-.025em;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
button,input,select,textarea{font:inherit;color:inherit;letter-spacing:inherit}
button{margin:0;padding:0;border:0;background:none;text-align:inherit;cursor:pointer;-webkit-appearance:none;appearance:none}
button:disabled{cursor:default}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4,p,ul,ol,figure{margin:0}
ul,ol{padding:0;list-style:none}
img,svg{display:block}
[hidden]{display:none!important}
:focus{outline:none}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* строки во всю ширину группы и меню: рамка фокуса — внутри (снаружи её обрезает скругление группы,
   а снизу закрывает соседняя строка) */
.cell:focus-visible,.task-main:focus-visible,.ev-main:focus-visible,.sh-main:focus-visible,.menu-item:focus-visible{outline-offset:-2px}
.cell:focus-visible{z-index:2}
/* заголовок экрана получает фокус при смене экрана (Z.ui, mount) — для чтения с экрана, без рамки */
h1[tabindex="-1"]:focus-visible{outline:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* иконки спрайта: толщина линии наследуется от <svg class="icon i-имя"> (Z.ui.icon) */
.icon{width:1em;height:1em;flex:none;fill:none;stroke:currentColor;stroke-width:2;overflow:visible}
.i-check,.i-xmark,.i-plus,.i-search{stroke-width:2.2}
.i-chevron-left,.i-chevron-right,.i-chevron-down,.i-chevron-up{stroke-width:2.4}
.i-circle{stroke-width:1.8}

/* ── типографика iOS ── */
.t-large{font:700 33px/40px var(--font);letter-spacing:.011em}
.t-title2{font:700 21px/27px var(--font);letter-spacing:-.012em}
.t-title3{font:600 19px/24px var(--font);letter-spacing:-.022em}
.t-headline{font:600 16px/21px var(--font);letter-spacing:-.025em}
.t-body{font:400 16px/21px var(--font);letter-spacing:-.025em}
.t-callout{font:400 15px/20px var(--font);letter-spacing:-.02em}
.t-sub{font:400 14px/19px var(--font);letter-spacing:-.015em}
.t-foot{font:400 12px/17px var(--font);letter-spacing:-.006em}
.t-caption{font:400 11px/15px var(--font);letter-spacing:0}
.t-2{color:var(--label-2)}
.t-3{color:var(--label-3)}
.t-blue{color:var(--blue)}
.t-red{color:var(--red)}
.inset{margin-left:var(--inset);margin-right:var(--inset)}
.pad{padding-left:var(--inset);padding-right:var(--inset)}

/* ── раскладка: телефон — стек экранов и панель вкладок ── */
.app{position:relative;display:flex;height:100%;height:100dvh;overflow:hidden}
.sidebar{display:none}
.main{position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden;background:var(--bg)}
.screen{
  position:absolute;inset:0;display:flex;flex-direction:column;
  overflow-x:hidden;overflow-y:auto;overscroll-behavior-y:contain;-webkit-overflow-scrolling:touch;
  padding-left:var(--safe-l);padding-right:var(--safe-r);background:var(--bg);
  /* фокус с клавиатуры и scrollIntoView не оставляют строку под липкой панелью сверху или «Новой задачей» снизу */
  scroll-padding-top:calc(var(--safe-t) + var(--nav-h) + var(--netbar-h) + 8px);
  scroll-padding-bottom:calc(var(--tabbar-h) + 64px);
}
.screen > *{flex-shrink:0}
.screen-pad{height:var(--tabbar-h)}
/* полосы прокрутки — тонкие, как на Mac: на Windows иначе широкие серые, со стрелками */
@media (pointer:fine){
  .screen,.sidebar,.sheet-body{scrollbar-width:thin;scrollbar-color:var(--label-3) transparent}
}
.screen.is-push-in{z-index:2;animation:screen-push-in var(--dur) var(--ease) both;box-shadow:-10px 0 30px rgba(0,0,0,.1)}
.screen.is-push-out{z-index:1;animation:screen-push-out var(--dur) var(--ease) both;pointer-events:none}
.screen.is-pop-in{z-index:1;animation:screen-pop-in var(--dur) var(--ease) both}
.screen.is-pop-out{z-index:2;animation:screen-pop-out var(--dur) var(--ease) both;pointer-events:none}
@keyframes screen-push-in{from{transform:translate3d(100%,0,0)}to{transform:none}}
@keyframes screen-push-out{from{transform:none}to{transform:translate3d(-30%,0,0)}}
@keyframes screen-pop-in{from{transform:translate3d(-30%,0,0)}to{transform:none}}
@keyframes screen-pop-out{from{transform:none}to{transform:translate3d(100%,0,0)}}

.tabbar{
  position:fixed;z-index:20;left:0;right:0;bottom:0;display:flex;
  height:var(--tabbar-h);padding:0 var(--safe-r) var(--safe-b) var(--safe-l);
  background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 -.5px 0 var(--bar-sep);
}
/* подписи — Caption 12/16 (docs/дизайн.md, «Шрифт и размеры»); 6 + 25 + 1 + 16 = 48 px из 49 */
.tab{
  flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:1px;padding-top:6px;
  color:var(--gray);font:400 11px/15px var(--font);letter-spacing:0;
}
.tab .icon{width:25px;height:25px}
.tab.is-active{color:var(--blue)}
html.has-sheet .tabbar{pointer-events:none}

/* ── ПК (от 900 px): боковая панель 320 px + содержимое ── */
@media (min-width:900px){
  /* панели вкладок нет; снизу остаётся только безопасная зона (полоска «домой» iPad, iPhone Plus/Pro Max боком) */
  :root{--tabbar-h:var(--safe-b)}
  .tabbar{display:none}
  /* iPhone боком шире 900 px: вырез слева закрывает боковая панель, содержимое справа отступает от выреза само */
  .sidebar{
    display:flex;flex-direction:column;flex:0 0 auto;width:calc(320px + var(--safe-l));height:100%;
    overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;
    padding-top:var(--safe-t);padding-left:var(--safe-l);background:var(--sidebar-bg);border-right:.5px solid var(--sep);
  }
  .sidebar{--inset:16px}
  .screen{padding-left:0}
  .screen{--inset:max(24px, calc((100% - 860px) / 2))}
  .screen[data-route="calendar"]{--inset:max(24px, calc((100% - 1120px) / 2))}  /* календарю — шире, как на Mac */
  .screen-pad{height:24px}
}

/* ── панель навигации и большой заголовок ── */
/* пока экран не прокручен, панель — цвета фона (не прозрачная): большой заголовок уходит под неё и обрезается её краем,
   как в iOS, а не проходит под «‹ Списки» и «⋯»; прокрутили дальше 40 px — «стекло» с размытием и заголовок 17 px */
.nav{position:sticky;top:0;z-index:10;padding-top:var(--safe-t);background:var(--bg);transition:background-color .2s,box-shadow .2s}
.screen.is-scrolled .nav,.nav.is-solid{
  background:var(--bar);-webkit-backdrop-filter:saturate(180%) blur(20px);backdrop-filter:saturate(180%) blur(20px);
  box-shadow:0 .5px 0 var(--bar-sep);
}
.nav-bar{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;height:var(--nav-h);padding:0 8px}
.nav-side{display:flex;align-items:center;min-width:0}
.nav-right{justify-content:flex-end}
.nav-title{
  max-width:min(60vw,420px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;
  font:600 16px/21px var(--font);letter-spacing:-.025em;transition:opacity .2s;
}
.nav.has-large .nav-title{opacity:0}
.screen.is-scrolled .nav.has-large .nav-title{opacity:1}
.nav-back{display:inline-flex;align-items:center;min-width:44px;max-width:100%;min-height:44px;padding-right:8px;color:var(--blue);font:400 16px/21px var(--font);white-space:nowrap}
.nav-back .icon{width:26px;height:26px;margin:0 -2px 0 -6px}
.nav-back span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.nav-btn{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:44px;min-height:44px;padding:0 8px;color:var(--blue);font:400 16px/21px var(--font)}
.nav-btn .icon{width:24px;height:24px}
.nav-btn.is-bold{font-weight:600}
.nav-btn:disabled{color:var(--label-3)}
/* текстовые кнопки без фона: рамка фокуса с клавиатуры — скруглённая, а не прямоугольник */
.nav-back,.nav-btn,.sheet-btn,.addbar-btn,.ev-add{border-radius:8px}
.nav-large{padding:0 var(--inset) 10px}
.large-title{font:700 33px/40px var(--font);letter-spacing:.011em;overflow-wrap:anywhere}
.large-sub{margin-top:2px;font:400 14px/19px var(--font);color:var(--label-2)}
/* высота полосы — 28 px (5 + 18 + 5), она же --netbar-h: на неё отступают липкие заголовки и scroll-padding */
.netbar{
  display:none;align-items:center;justify-content:center;gap:6px;height:28px;padding:5px 16px;overflow:hidden;
  background:rgba(255,59,48,.12);color:var(--netbar-fg);font:500 12px/17px var(--font);letter-spacing:-.006em;white-space:nowrap;
}
.netbar .icon{width:16px;height:16px}
html.is-offline .netbar{display:flex}
@media (pointer:fine){
  .nav-back:hover,.nav-btn:hover{opacity:.7}
}

/* ── поиск ── */
.search{position:relative;display:flex;align-items:center;height:36px;border-radius:10px;background:var(--fill);color:var(--label-2)}
.search-icon{position:absolute;left:8px;width:18px;height:18px;pointer-events:none}
.search-input{
  flex:1 1 auto;min-width:0;height:100%;padding:0 34px 0 32px;border:0;border-radius:10px;background:transparent;
  color:var(--label);font:400 16px/21px var(--font);outline:0;-webkit-appearance:none;appearance:none;
}
.search-input::placeholder{color:var(--label-2);opacity:1}
.search-input::-webkit-search-cancel-button,.search-input::-webkit-search-decoration{-webkit-appearance:none;appearance:none}
.search-clear{position:absolute;right:2px;display:none;place-items:center;width:34px;height:34px}
.search-clear::before{content:"";position:absolute;inset:-5px}  /* нажимается на 44×44 */
.search-clear-dot{display:grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--label-2);color:var(--bg)}
.search-clear-dot .icon{width:11px;height:11px;stroke-width:3}
.search.has-value .search-clear{display:grid}

/* ── группы строк (inset grouped) ── */
.group{margin:0 var(--inset) 24px}
.group-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:18px;padding:0 16px 7px}
.group-title{font:400 12px/17px var(--font);letter-spacing:-.006em;text-transform:uppercase;color:var(--label-2);overflow-wrap:anywhere}
.group.is-big .group-head{padding:0 4px 8px}
.group.is-big .group-title{font:700 19px/24px var(--font);letter-spacing:-.022em;text-transform:none;color:var(--label)}
.group-head .nav-btn,.group-head .link{min-height:0;padding:0;font:400 14px/19px var(--font);color:var(--blue)}
.group-foot{padding:7px 16px 0;font:400 12px/17px var(--font);letter-spacing:-.006em;color:var(--label-2)}
.list{border-radius:10px;background:var(--card);overflow:hidden;isolation:isolate}
.list:empty{display:none}
.row{position:relative;--sep-l:16px;background:var(--card)}
.row.has-icon{--sep-l:60px}
.row + .row::before{
  content:"";position:absolute;z-index:3;top:0;left:var(--sep-l);right:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:0 0;pointer-events:none;
}
.cell{
  position:relative;z-index:1;display:flex;align-items:center;gap:14px;width:100%;min-height:44px;padding:11px 16px;
  background:var(--card);color:var(--label);text-align:left;font:400 16px/21px var(--font);
}
a.cell,button.cell{cursor:pointer}
/* ссылки-строки, плитки, вкладки: долгое нажатие на iPhone — не системное меню ссылки с превью адреса */
a.cell,.tile,.tab{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
a.cell:active,button.cell:active{background:var(--pressed)}
.cell-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
.cell-title{overflow-wrap:anywhere}
.cell-sub{font:400 14px/19px var(--font);letter-spacing:-.015em;color:var(--label-2)}
.cell-detail{flex:none;max-width:55%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:var(--label-2);font-variant-numeric:tabular-nums}
.cell-chevron{width:17px;height:17px;margin-right:-6px;color:var(--label-3)}
.cell-check{width:20px;height:20px;color:var(--blue)}
.row.is-danger > .cell{color:var(--red)}
.row.is-accent > .cell{color:var(--blue)}
.row.is-selected > .cell{background:var(--sel)}
.row.is-menu > .cell,.swipe-host.is-menu > .cell{background:var(--pressed)}
@media (pointer:fine){
  a.cell:hover,button.cell:hover{background:var(--hover)}
  .row.is-selected > a.cell:hover{background:var(--sel)}
}

/* значок направления: белый символ в цветном круге */
.badge{display:inline-grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--area);color:var(--on-area,var(--on-color))}
.badge .icon{width:17px;height:17px}
.badge[data-color="red"]{background:var(--red)}
.badge[data-color="blue"]{background:var(--blue)}
.badge[data-color="orange"]{background:var(--orange)}
.badge[data-color="green"]{background:var(--green)}
.badge[data-color="indigo"]{background:var(--indigo)}
.badge[data-color="gray"]{background:var(--gray)}
.badge[data-color="graphite"]{background:var(--graphite)}
.badge.is-sm{width:24px;height:24px}
.badge.is-sm .icon{width:14px;height:14px}

/* ── плитки 2×2 ── */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 var(--inset) 24px}
.tile{
  --tile-c:var(--blue);
  display:flex;flex-direction:column;gap:6px;min-width:0;min-height:84px;padding:10px 12px 10px 10px;
  border-radius:12px;background:var(--card);color:var(--label);text-align:left;
}
.tile[data-color="red"]{--tile-c:var(--red)}
.tile[data-color="graphite"]{--tile-c:var(--graphite)}
.tile[data-color="orange"]{--tile-c:var(--orange)}
.tile[data-color="gray"]{--tile-c:var(--gray)}
.tile[data-color="green"]{--tile-c:var(--green)}
.tile[data-color="indigo"]{--tile-c:var(--indigo)}
.tile-top{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.tile-icon{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--tile-c);color:var(--on-color)}
.tile-icon .icon{width:17px;height:17px}
.tile-count{font:700 27px/31px var(--font);letter-spacing:.01em;font-variant-numeric:tabular-nums}
.tile-title{font:600 14px/19px var(--font);letter-spacing:-.015em;color:var(--label-2);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.tile-note{margin-top:-6px;font:400 12px/15px var(--font);color:var(--red)}
.tile:active{background:var(--pressed)}
.tile.is-selected{background:var(--tile-c);color:var(--on-color)}
.tile.is-selected .tile-icon{background:var(--on-color);color:var(--tile-c)}
.tile.is-selected .tile-title,.tile.is-selected .tile-note{color:var(--on-color)}

/* ── строка задачи ── */
.row.task{--sep-l:50px}
/* touch-action: вертикальная прокрутка и увеличение двумя пальцами остаются браузеру, горизонтальный жест — смахиванию */
.task-cell{
  align-items:flex-start;gap:12px;padding:0 16px;
  touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
.check{
  position:relative;flex:none;display:grid;place-items:center;width:22px;height:22px;margin:11px 0 0;
  border:1.5px solid var(--label-3);border-radius:50%;color:var(--on-area,var(--on-color));
  transition:background-color .2s,border-color .2s;
}
.check::before{content:"";position:absolute;inset:-11px -12px -11px -16px}
.check .icon{width:13px;height:13px;stroke-width:3;opacity:0;transform:scale(.4);transition:opacity .15s,transform .3s var(--ease)}
.check.is-on{border-color:var(--area);background:var(--area)}
.check.is-on .icon{opacity:1;transform:none}
.check.is-pop{animation:check-pop .32s var(--ease)}
@keyframes check-pop{35%{transform:scale(.82)}100%{transform:none}}
@media (pointer:fine){
  .check:not(.is-on):hover{border-color:var(--area)}
}
/* поля 4 px по бокам (и −4 px снаружи): рамка фокуса внутри кнопки не наезжает на текст, а текст стоит там же */
.task-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:11px 4px;border-radius:6px;text-align:left;color:var(--label)}
.task-title{font:400 16px/21px var(--font);letter-spacing:-.025em;overflow-wrap:anywhere;transition:color .2s}
.row.task.is-done .task-title{color:var(--label-2)}
.dot-new{display:inline-block;width:8px;height:8px;margin:0 6px 2px 0;border-radius:50%;background:var(--blue);vertical-align:middle}
.task-sub{display:block;font:400 14px/19px var(--font);letter-spacing:-.015em;color:var(--label-2);overflow-wrap:anywhere}
.task-sub > * + *::before{content:"·";margin:0 .35em;color:var(--label-2)}
.task-due.is-over,.task-ev.is-over{color:var(--red)}
.task-ev{white-space:nowrap}
.task-ev .icon{display:inline-block;width:14px;height:14px;margin-right:3px;vertical-align:-2px}
.task-notes{
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  font:400 14px/19px var(--font);letter-spacing:-.015em;color:var(--label-2);white-space:pre-line;overflow-wrap:anywhere;
}
@media (pointer:fine){
  .task-main:hover .task-title{color:var(--blue)}
  .row.task.is-done .task-main:hover .task-title{color:var(--label-2)}
}

/* ── строка события ── */
.row.event{--sep-l:16px}
.ev-cell{align-items:stretch;gap:10px;padding:0 16px;touch-action:pan-y pinch-zoom;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.ev-time{
  flex:none;display:flex;flex-direction:column;width:48px;padding:11px 0;
  font:400 14px/19px var(--font);letter-spacing:-.015em;font-variant-numeric:tabular-nums;color:var(--label);
}
.ev-end{color:var(--label-2)}
.ev-time.is-allday{font-size:12px;line-height:17px;color:var(--label-2)}
.ev-bar{flex:none;width:4px;margin:10px 0;border-radius:2px;background:var(--area)}
.ev-main{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px;margin:0 -4px;padding:11px 4px;border-radius:6px;text-align:left;color:var(--label)}
.ev-title{font:600 16px/21px var(--font);letter-spacing:-.025em;overflow-wrap:anywhere}
.ev-meta{font:400 14px/19px var(--font);letter-spacing:-.015em;color:var(--label-2);overflow-wrap:anywhere}
.ev-notes{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font:400 14px/19px var(--font);color:var(--label-2);white-space:pre-line;overflow-wrap:anywhere}
.ev-tasks{position:relative;margin-left:72px}
.ev-tasks .row.task:first-child::before{
  content:"";position:absolute;z-index:3;top:0;left:var(--sep-l);right:0;height:1px;
  background:var(--sep);transform:scaleY(.5);transform-origin:0 0;
}
.ev-tasks .task-title{font-size:15px;line-height:21px}
.ev-foot{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:36px;padding:0 16px 4px 88px;font:400 12px/17px var(--font);color:var(--label-2)}
/* «+ Задача»: нажимается на 44 px, а строка под событием остаётся низкой (отрицательные поля) */
.ev-add{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:-4px 0;padding:0 2px;color:var(--blue);font:400 14px/19px var(--font)}
.ev-add .icon{width:16px;height:16px}
@media (pointer:fine){
  .ev-main:hover .ev-title{color:var(--blue)}
}

/* ── смахивание строки ── */
.swipe-host{position:relative;overflow:hidden}
.swipe-acts{position:absolute;top:0;bottom:0;z-index:0;display:flex;width:0;overflow:hidden}
.swipe-lead{left:0}
.swipe-trail{right:0;justify-content:flex-end}
.swipe-btn{
  flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:0 4px;
  color:var(--on-color);font:500 12px/15px var(--font);letter-spacing:-.006em;white-space:nowrap;overflow:hidden;
  transition:flex-grow .2s var(--ease);
}
.swipe-btn .icon{width:22px;height:22px}
.swipe-btn.is-green{background:var(--green)}
.swipe-btn.is-orange{background:var(--orange)}
.swipe-btn.is-red{background:var(--red)}
.swipe-btn.is-blue{background:var(--blue)}
.swipe-btn.is-gray{background:var(--gray)}
.swipe-trail.is-full .swipe-btn:not(:last-child),.swipe-lead.is-full .swipe-btn:not(:first-child){flex-grow:0;flex-basis:0;padding:0}
.swipe-host.is-animating > .cell,.swipe-host.is-animating > .swipe-acts{transition:transform var(--dur) var(--ease),width var(--dur) var(--ease)}
.swipe-host.is-dragging > .cell{cursor:grabbing}

/* ── меню (правая кнопка, долгое нажатие) ── */
.menu-layer{position:fixed;inset:0;z-index:70}
.menu-backdrop{position:absolute;inset:0}
.menu{
  position:absolute;min-width:230px;max-width:290px;border-radius:13px;overflow:hidden;
  background:var(--menu-bg);-webkit-backdrop-filter:saturate(180%) blur(30px);backdrop-filter:saturate(180%) blur(30px);
  box-shadow:var(--shadow-pop);animation:menu-in .22s var(--ease) both;transform-origin:top left;
}
@keyframes menu-in{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}
.menu-item{
  display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;min-height:44px;padding:11px 16px;
  color:var(--label);font:400 16px/21px var(--font);text-align:left;
}
.menu-item + .menu-item{box-shadow:inset 0 .5px 0 var(--sep)}
.menu-item .icon{width:20px;height:20px}
.menu-item.is-danger{color:var(--red)}
.menu-item:disabled{color:var(--label-3)}
.menu-item:active{background:var(--fill)}
.menu-sep{height:8px;background:var(--menu-sep)}
@media (min-width:900px) and (pointer:fine){
  .menu{min-width:200px;padding:5px;border-radius:9px}
  .menu-item{min-height:26px;padding:4px 10px;border-radius:5px;font-size:13px;line-height:18px}
  .menu-item + .menu-item{box-shadow:none}
  .menu-item .icon{width:16px;height:16px}
  .menu-item:hover,.menu-item:focus-visible{background:var(--blue);color:#fff;outline:0}
  .menu-sep{height:1px;margin:5px 10px;background:var(--sep)}
}

/* ── сегменты и переключатель ── */
.seg{display:flex;padding:2px;border-radius:8px;background:var(--fill)}
.seg-btn{
  position:relative;flex:1 1 0;min-width:0;min-height:28px;padding:3px 10px;border-radius:7px;
  color:var(--label);font:500 12px/17px var(--font);letter-spacing:-.006em;white-space:nowrap;text-align:center;
  transition:background-color .2s,box-shadow .2s;
}
/* вид — как системный переключатель iOS (32 px), а нажимается на 44 px по высоте */
.seg-btn::before{content:"";position:absolute;inset:-8px 0}
.seg-btn[aria-pressed="true"]{background:var(--seg-thumb);box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);font-weight:600}
.switch{position:relative;display:inline-block;flex:none;width:51px;height:31px}
.switch-input{position:absolute;z-index:1;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.switch-track{position:absolute;inset:0;border-radius:16px;background:var(--switch-off);transition:background-color .25s}
.switch-track::after{
  content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06);transition:transform .25s var(--ease);
}
.switch-input:checked + .switch-track{background:var(--green)}
.switch-input:checked + .switch-track::after{transform:translateX(20px)}
.switch-input:focus-visible + .switch-track{outline:2px solid var(--blue);outline-offset:2px}

/* ── пустое состояние, загрузка ── */
.empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:64px 32px;text-align:center;color:var(--label-2);font:400 16px/21px var(--font)}
.screen > .empty{flex-grow:1;padding-bottom:96px}  /* пустой список — надпись посередине экрана, как в iOS */
.empty-icon{width:56px;height:56px;color:var(--label-3);stroke-width:1.6}
.spinner{width:24px;height:24px;border:2.5px solid var(--label-3);border-top-color:var(--label-2);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── «⊕ Новая задача» внизу экрана ── */
.addbar{
  position:sticky;z-index:5;bottom:var(--tabbar-h);margin-top:auto;display:flex;padding:4px var(--inset) 6px;
  background:linear-gradient(to top,var(--bg) 70%,rgba(242,242,247,0));
}
.addbar-btn{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 4px 0 0;color:var(--blue);font:600 16px/21px var(--font)}
.addbar-btn .icon{width:24px;height:24px}
@media (prefers-color-scheme:dark){
  .addbar{background:linear-gradient(to top,var(--bg) 70%,rgba(0,0,0,0))}
}
@media (pointer:fine){
  .addbar-btn:hover{opacity:.75}
}

/* ── плашки ── */
/* над «Новой задачей» и панелью вкладок; открыта клавиатура iPhone (--kb) — над клавиатурой */
.toast-root{
  position:fixed;z-index:60;left:0;right:0;bottom:max(calc(var(--tabbar-h) + 60px), calc(var(--kb) + 12px));
  display:flex;justify-content:center;padding:0 16px;pointer-events:none;
}
.toast{
  display:flex;align-items:center;gap:12px;max-width:min(92vw,480px);min-height:44px;padding:11px 18px;border-radius:22px;
  background:var(--toast-bg);color:#fff;font:400 14px/19px var(--font);letter-spacing:-.015em;
  box-shadow:0 8px 28px rgba(0,0,0,.22);pointer-events:auto;
  opacity:0;transform:translate3d(0,14px,0) scale(.98);transition:opacity .22s,transform .3s var(--ease);
}
.toast.is-in{opacity:1;transform:none}
.toast:not(.is-in){pointer-events:none}  /* гаснущая плашка не нажимается: «Отменить» после конца срока не сработает молча */
.toast.has-action{padding-right:6px}
.toast-action{position:relative;flex:none;min-height:34px;padding:0 12px;border-radius:17px;color:var(--toast-action);font-weight:600}
.toast-action::before{content:"";position:absolute;inset:-5px 0}  /* нажимается на 44 px по высоте */
.toast-action:active{background:rgba(255,255,255,.12)}
@media (min-width:900px){
  .toast-root{left:calc(320px + var(--safe-l));bottom:max(calc(28px + var(--safe-b)), calc(var(--kb) + 12px))}
}

/* ── шторка ── */
.sheet-layer{position:fixed;inset:0;z-index:50}
.sheet-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4);opacity:0;transition:opacity var(--dur) var(--ease)}
.sheet-layer.is-open .sheet-backdrop{opacity:1}
.sheet{
  --card:var(--card-2);--inset:16px;
  position:absolute;left:0;right:0;bottom:0;top:calc(var(--safe-t) + 10px);display:flex;flex-direction:column;
  border-radius:12px 12px 0 0;background:var(--sheet-bg);overflow:hidden;
  padding-left:var(--safe-l);padding-right:var(--safe-r);  /* телефон боком: поля не уходят под вырез */
  transform:translate3d(0,100%,0);transition:transform var(--dur) var(--ease);
}
.sheet-layer.is-open .sheet{transform:none}
.sheet.is-dragging{transition:none}
.sheet:focus-visible{outline:none}
.sheet-grabber{flex:none;display:flex;justify-content:center;padding-top:5px;touch-action:none}
.sheet-grabber span{width:36px;height:5px;border-radius:3px;background:var(--label-3)}
.sheet-stack{position:relative;flex:1 1 auto;min-height:0;overflow:hidden}
.sheet-page{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--sheet-bg);transition:transform var(--dur) var(--ease)}
.sheet-page.is-under{transform:translate3d(-30%,0,0)}
.sheet-page.is-entering,.sheet-page.is-leaving{transform:translate3d(100%,0,0)}
.sheet-page.is-entering{transition:none}
.sheet-head{flex:none;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;min-height:52px;padding:0 8px;touch-action:none}
.sheet-head-side{display:flex;min-width:0}
.sheet-head-side.is-right{justify-content:flex-end}
.sheet-title{max-width:min(56vw,320px);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;text-align:center;font:600 16px/21px var(--font);letter-spacing:-.025em}
.sheet-btn{display:inline-flex;align-items:center;min-height:44px;padding:0 8px;color:var(--blue);font:400 16px/21px var(--font);white-space:nowrap}
.sheet-btn.is-bold{font-weight:600}
.sheet-btn:disabled{color:var(--label-3)}
.sheet-head-side .sheet-btn{min-width:0;max-width:100%}  /* длинная подпись «‹ …» сжимается, а не наезжает на заголовок */
.sheet-back .icon{width:26px;height:26px;margin:0 -2px 0 -6px}
.sheet-back span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.sheet-page.is-busy .sheet-body{opacity:.6;pointer-events:none}
.sheet-body{
  flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:8px 0 calc(24px + var(--safe-b));
}
.sheet .group{margin-left:16px;margin-right:16px}
@media (min-width:900px){
  .sheet{
    left:50%;top:50%;right:auto;bottom:auto;width:560px;max-width:calc(100vw - 48px);height:min(720px, calc(100dvh - 64px));
    padding-left:0;padding-right:0;
    border-radius:14px;box-shadow:0 24px 70px rgba(0,0,0,.28),0 0 0 .5px rgba(0,0,0,.1);
    opacity:0;transform:translate(-50%,-50%) scale(.96);transition:transform .28s var(--ease),opacity .2s;
  }
  .sheet-layer.is-open .sheet{opacity:1;transform:translate(-50%,-50%)}
  .sheet-grabber{display:none}
  .sheet-head{touch-action:auto;min-height:56px}
  .sheet-body{padding-bottom:24px}
}
@media (min-width:900px) and (prefers-color-scheme:dark){
  .sheet{box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 .5px rgba(255,255,255,.14)}  /* край окна на тёмном, как на Mac */
}

/* ── вход и «Нет связи» ── */
.auth{overflow:auto}
.auth-wrap{
  display:flex;flex-direction:column;align-items:center;min-height:100%;min-height:100dvh;
  padding:calc(var(--safe-t) + max(40px, 12vh)) 16px calc(var(--safe-b) + 32px);
}
.auth-icon{width:84px;height:84px;border-radius:19px;box-shadow:0 1px 4px rgba(0,0,0,.14)}
.auth-title{margin:16px 0 28px;font:700 27px/33px var(--font);letter-spacing:.01em;text-align:center}
.auth-text{max-width:400px;margin:-12px 0 28px;color:var(--label-2);text-align:center}
.auth-strong{display:block;margin-bottom:4px;color:var(--label);font-weight:600}
.auth-error{width:100%;max-width:400px;margin:-8px 0 20px;padding:11px 16px;border-radius:10px;background:rgba(255,59,48,.12);color:var(--red);font:400 14px/19px var(--font);text-align:center}
.auth-form{display:flex;flex-direction:column;gap:24px;width:100%;max-width:400px}
.auth-group{border-radius:10px;background:var(--card);overflow:hidden}
.auth-field{position:relative;display:block}
.auth-field + .auth-field::before{content:"";position:absolute;top:0;left:16px;right:0;height:1px;background:var(--sep);transform:scaleY(.5);transform-origin:0 0}
.auth-input{
  display:block;width:100%;height:50px;padding:0 16px;border:0;background:transparent;
  color:var(--label);font:400 16px/21px var(--font);outline:0;-webkit-appearance:none;appearance:none;
}
.auth-input::placeholder{color:var(--label-3);opacity:1}
.btn-big{
  display:flex;align-items:center;justify-content:center;width:100%;height:50px;padding:0 20px;border-radius:12px;
  background:var(--blue);color:#fff;font:600 16px/21px var(--font);text-align:center;
}
.btn-big:active{opacity:.8}
.auth-wrap .btn-big{max-width:400px}

/* ── без анимаций, если так настроено устройство ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}