/* Дизайн-система XTRELA (TASKS 4.2): токены двух тем, каркас, кружки с инициалами.
   Значения токенов взяты из утверждённого макета (docs/design/mockup). Подключается после app.css и work.css. */

:root{
  --field-fs:14px;
  color-scheme:light;
  --bg:#DFE0E3;--surface:#ECEDEF;--surface2:#E4E5E8;--line:#D2D3D8;--fg:#1B1A22;--muted:#585568;
  --accent:#6A45D9;--on-accent:#FFFFFF;--accent-text:#5530C4;--accent2:#8E26A6;
  --danger:#B0242D;--on-danger:#FFFFFF;--warn:#2E4BA8;--ok:#23692F;--on-ok:#FFFFFF;
  --accent-soft:rgba(106,69,217,.13);--danger-soft:rgba(176,36,45,.10);--warn-soft:rgba(46,75,168,.11);
  --tab-line:linear-gradient(90deg,#6A45D9,#3F5FCC);--over-bg:#FFFFFF;
  --shadow:0 1px 2px rgba(27,26,34,.05),0 8px 24px rgba(27,26,34,.06);
  --over-line:#D7262F;
  /* Прежние имена, на которых ещё держатся экраны до задач 5.x. */
  --card:var(--surface);--nav:var(--surface);--sidebar:var(--surface);--text:var(--fg);
  --green:var(--accent);--purple:var(--accent2);--border:var(--line);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#1F2023;--surface:#292A2E;--surface2:#313236;--line:#3A3B40;--fg:#EEEDF2;--muted:#A7A4B3;
    --accent:#B593FF;--on-accent:#1A1230;--accent-text:#C4ABFF;--accent2:#E796F7;
    --danger:#FF7A82;--on-danger:#2A0D10;--warn:#8FA6FF;--ok:#7DD98B;--on-ok:#10291A;
    --accent-soft:rgba(181,147,255,.16);--danger-soft:rgba(255,122,130,.13);--warn-soft:rgba(143,166,255,.14);
    --tab-line:linear-gradient(90deg,#B593FF,#8FA6FF);--over-bg:#292A2E;--over-line:#EB3D45;
    --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.22);
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#1F2023;--surface:#292A2E;--surface2:#313236;--line:#3A3B40;--fg:#EEEDF2;--muted:#A7A4B3;
  --accent:#B593FF;--on-accent:#1A1230;--accent-text:#C4ABFF;--accent2:#E796F7;
  --danger:#FF7A82;--on-danger:#2A0D10;--warn:#8FA6FF;--ok:#7DD98B;--on-ok:#10291A;
  --accent-soft:rgba(181,147,255,.16);--danger-soft:rgba(255,122,130,.13);--warn-soft:rgba(143,166,255,.14);
  --tab-line:linear-gradient(90deg,#B593FF,#8FA6FF);--over-bg:#292A2E;--over-line:#EB3D45;
  --shadow:0 1px 2px rgba(0,0,0,.25),0 10px 28px rgba(0,0,0,.22);
}

html{background:var(--bg);color:var(--fg);-webkit-font-smoothing:antialiased}
body{background:var(--bg)}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.skip-link{background:var(--accent);color:var(--on-accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.num{font-family:'IBM Plex Sans',sans-serif;font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* Иконки: один спрайт static/icons.svg, линия 2 px. */
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ic-s{width:16px;height:16px}
.ic-l{width:22px;height:22px}

/* Кружки с инициалами: восемь постоянных цветов, белый текст ≥ 4,5:1 (crm.tests.test_design_system). */
.av{width:28px;height:28px;border-radius:50%;display:inline-grid;place-items:center;color:#FFFFFF;font-size:11px;font-weight:800;letter-spacing:.02em;line-height:1;flex:none;text-transform:uppercase}
.av-s{width:24px;height:24px;font-size:10px}
.av-xs{width:22px;height:22px;font-size:9px}
.av-l{width:64px;height:64px;font-size:22px}
.av-c0{background:#6A45D9}.av-c1{background:#0F766E}.av-c2{background:#B4462A}.av-c3{background:#2F5BB7}
.av-c4{background:#8E26A6}.av-c5{background:#166534}.av-c6{background:#BE185D}.av-c7{background:#475569}

/* Каркас */
.shell{display:grid;grid-template-columns:76px minmax(0,1fr);min-height:100dvh;background:var(--bg)}
.shell>*{min-width:0}
.rail{position:sticky;top:0;height:100dvh;overflow-y:auto;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 0;background:var(--surface);border-right:1px solid var(--line)}
.rail>*{flex-shrink:0}
.logo{width:40px;height:40px;border-radius:12px;background:linear-gradient(135deg,#A040CF,#6A45D9);color:#FFFFFF;display:grid;place-items:center;font-weight:800;font-size:18px;line-height:1}
.rail .logo{margin-bottom:16px}
.rail-btn{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;color:var(--muted);background:none;border:0;padding:0;cursor:pointer}
.rail-btn:hover{background:var(--surface2);color:var(--fg)}
.rail-btn[aria-current="page"]{background:var(--accent);color:var(--on-accent)}
.rail-sp{flex:1 1 auto;min-height:8px}
.rail-user{display:grid;place-items:center;width:48px;height:48px;border-radius:50%;margin-top:6px}
.rail-user:hover .av{box-shadow:0 0 0 3px var(--line)}
.rail-user[aria-current="page"] .av{box-shadow:0 0 0 3px var(--accent)}
.shell .main{padding:28px 32px 56px;min-width:0;background:var(--bg)}
.shell .main h1{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.main :where(.network-hint,[data-pwa-notice]):empty{display:none}

/* Тема: показываем иконку того, на что переключаем. */
[data-theme-toggle] .ic-sun{display:none}
:root[data-theme="dark"] [data-theme-toggle] .ic-sun{display:block}
:root[data-theme="dark"] [data-theme-toggle] .ic-moon{display:none}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) [data-theme-toggle] .ic-sun{display:block}
  :root:not([data-theme="light"]) [data-theme-toggle] .ic-moon{display:none}
}

/* Шапка и нижняя панель — только на iPhone. */
.m-head,.tabbar{display:none}
.icon-btn{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;color:var(--muted);background:none;border:0;padding:0;cursor:pointer;flex:none}
.icon-btn:hover,.icon-btn:active{background:var(--surface2);color:var(--fg)}
.icon-btn[aria-current="page"]{background:var(--accent-soft);color:var(--accent-text)}

@media (max-width:899.98px){
  .shell{display:block;padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))}
  .rail{display:none}
  /* Одна строка шапки (макет, .ptop): крупный заголовок экрана, справа действия экрана, тема, шестерёнка. */
  .m-head{display:flex;align-items:center;gap:8px;min-height:44px;padding:calc(env(safe-area-inset-top,0px) + 12px) calc(8px + env(safe-area-inset-right,0px)) 4px calc(16px + env(safe-area-inset-left,0px));background:var(--bg)}
  .m-head>*{flex-shrink:0}
  .m-title{flex:1 1 auto;min-width:0;margin:0;font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .shell .main{padding:8px calc(16px + env(safe-area-inset-right,0px)) 32px calc(16px + env(safe-area-inset-left,0px))}
  .main h1[data-screen-title]{display:none}
  .main :where([data-refresh-note],[data-pwa-notice],.network-hint):empty{display:none}
  .shell .main h1{font-size:28px}
  .tabbar{display:flex;align-items:flex-start;justify-content:space-around;position:fixed;left:0;right:0;bottom:0;z-index:40;padding:6px calc(8px + env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));background:var(--surface);border-top:1px solid var(--line)}
  .tab{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;padding:4px 0 0;font-size:11px;font-weight:700;color:var(--muted);border-radius:12px}
  .tab[aria-current="page"]{color:var(--accent-text)}
  .tab>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .tab-gap{flex:none;width:68px}
  .tab-plus{flex:none;width:56px;height:56px;margin:-14px 6px 0;border-radius:20px;background:linear-gradient(135deg,#A040CF,#6A45D9);color:#FFFFFF;display:grid;place-items:center;box-shadow:0 8px 20px rgba(106,69,217,.4)}
  .keyboard-open .tabbar{display:none}
  .keyboard-open .shell{padding-bottom:0}
  [data-mobile-footer]:empty{display:none}
  [data-mobile-footer]{padding:0 16px 24px}
}
@media (min-width:900px){
  [data-mobile-footer]{display:none}
}

/* Вход */
.signin{min-height:100dvh;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;position:relative;padding:24px;background:var(--bg)}
.signin-theme{position:absolute;top:calc(16px + env(safe-area-inset-top,0px));right:16px}
.signin-card{width:400px;max-width:100%;min-width:0;background:var(--surface);border-radius:28px;box-shadow:var(--shadow);padding:32px;display:flex;flex-direction:column;gap:18px}
.signin-card .brand{display:flex;align-items:center;gap:12px;font-size:20px;font-weight:800;letter-spacing:.06em}
.signin-card h1{font-size:28px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.signin-help{color:var(--muted);font-size:13px}

@media (prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}}

.signin-form{display:flex;flex-direction:column;gap:16px}
.signin-card .notice{margin:0;overflow-wrap:anywhere}
.signin-card .brand{min-height:44px}
.signin-form .field{gap:8px}
.signin-form .field label{font-size:13px;font-weight:700}
/* Шрифт полей не меньше 16 px: Safari на iPhone не увеличивает страницу при фокусе. */
.signin-form input{font-size:16px;min-height:48px;border-radius:12px}
.signin-form :is(input,button){scroll-margin-block:96px}
.signin-theme{z-index:1}
@media (max-width:899.98px){
  /* Карточка прижата кверху: клавиатура Safari закрывает нижнюю часть экрана, а не поля и кнопку. */
  .signin{align-content:start;padding:calc(72px + env(safe-area-inset-top,0px)) 16px 24px}
  .signin-card{padding:28px 22px}
}
.signin-submit{width:100%;min-height:48px;border-radius:999px;font-weight:700}

/* Доводка для iPhone (TASKS 6.1а). Поля ввода на ширине телефона — не меньше 16 px: иначе Safari увеличивает страницу при фокусе. */
@media (max-width:899.98px){:root{--field-fs:16px}}
/* Поворот: Safari сам раздувает текст в альбомной ориентации. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* Двойное касание не увеличивает кнопки и ссылки (масштаб страницы щипком остаётся). */
:where(a,button,input,select,textarea,summary,label,[role=button],[role=option]){touch-action:manipulation}
/* Поле поиска в Safari без своей рамки и тени: вид задают наши стили. */
:where(input[type=search]){-webkit-appearance:none;appearance:none}
/* Быстрые действия на карточке видны только при наведении; где наведения нет (планшет, касание), они показаны всегда. */
@media (hover:none) and (min-width:900px){.tk .card:has(.acts) .acts{opacity:1;pointer-events:auto}}