/*
  Фирменная система RAINZ — та же, что в материалах сервисной службы
  (Сервис/index.html и economics.html). Скопирована не «на глаз»: те же
  переменные, те же скругления, тот же чёрно-белый каркас с циановым
  акцентом. Между двумя приложениями не должно быть заметно шва.

  База — белая, а не тёмная: в эталоне тёмная тема принудительно
  переопределена в светлую, потому что материал показывают на проекторе
  и печатают. Цвет здесь работает как навигация и статус:
  синий #1F26A0 — утверждённое и основное, фиолетовый #8654F5 — то, что
  требует решения, циан #37E4FE — активное и текущее.
*/

@font-face{font-family:"TT Norms Pro";src:url("assets/TTNormsPro-Regular.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url("assets/TTNormsPro-Medium.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"TT Norms Pro";src:url("assets/TTNormsPro-Bold.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root,
:root[data-theme="dark"]{
  --ground:#000000;--panel:#FFFFFF;--panel-2:#FFFFFF;
  --line:rgba(0,0,0,.18);--line-soft:rgba(0,0,0,.09);
  --ink:#000000;--muted:rgba(0,0,0,.68);--faint:rgba(0,0,0,.48);
  --accent:#1F26A0;--accent-2:#8654F5;--cyan:#37E4FE;
  --accent-soft:rgba(31,38,160,.08);--violet-soft:rgba(134,84,245,.09);
  --shadow:0 18px 50px -34px rgba(0,0,0,.28);
  --font:"TT Norms Pro",Arial,sans-serif;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --ground:#000000;--panel:#FFFFFF;--panel-2:#FFFFFF;
  --line:rgba(0,0,0,.18);--line-soft:rgba(0,0,0,.09);
  --ink:#000000;--muted:rgba(0,0,0,.68);--faint:rgba(0,0,0,.48);
  --accent:#1F26A0;--accent-2:#8654F5;
}}

*{box-sizing:border-box}
body{margin:0;background:#000;color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
button,select,input{font-family:inherit;font-size:inherit;color:inherit}

/* ---------- каркас ---------- */

/*
  Витрина занимает весь экран и подстраивается под него.

  ПОЧЕМУ НЕ ФИКСИРОВАННАЯ ШИРИНА. Раньше стояло max-width:1540px, и на
  мониторе 2560 в чёрные поля уходил 1021 пиксель — больше трети экрана,
  — пока в диаграмме сроков не помещались 84 названия задач из ста. Для
  страницы со сплошным текстом ограничение ширины правильно, для рабочего
  экрана с таблицами и Гантом — нет: ему нужно место.

  ОТСТУП И БОКОВАЯ КОЛОНКА — ПЕРЕМЕННЫЕ, И ЭТО НЕ ЩЕГОЛЬСТВО. Отступ main
  повторялся в трёх местах: у самого main, в отрицательном поле героя (он
  выходит на всю ширину) и в положении логотипа. В узком медиазапросе — ещё
  в трёх. Шесть чисел, которые обязаны совпадать, разъезжаются при первой же
  правке: герой уезжает на пару пикселей, и это видно.

  Читаемость текста при этом никуда не девается: заголовок и лид героя
  по-прежнему ограничены по ширине — длина строки задаётся типографикой,
  а не шириной окна.
*/
:root{
  --rail: clamp(244px, 15vw, 340px);
  --gutter: clamp(24px, 2.6vw, 76px);
}

.shell{width:100%;min-height:100vh;display:grid;grid-template-columns:var(--rail) minmax(0,1fr);background:#fff}
main{min-width:0;padding:0 var(--gutter) 96px;display:flex;flex-direction:column;gap:64px;background:#fff}
main>*{min-width:0}
.loading{padding:54px 0;color:var(--faint)}

/* ---------- боковая колонка ---------- */
nav.toc{position:sticky;top:0;height:100vh;overflow-y:auto;padding:34px clamp(20px,1.5vw,32px);background:#000;color:#fff;border-right:1px solid #1c1c1c;display:flex;flex-direction:column;gap:22px}
nav.toc .brand img{display:block;width:132px;height:auto}
nav.toc .grp{display:flex;flex-direction:column;gap:2px}
nav.toc .gl{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42);padding-bottom:6px}
nav.toc a,nav.toc .it{display:block;font-size:14px;color:rgba(255,255,255,.66);text-decoration:none;padding:6px 0 6px 13px;border-left:2px solid rgba(255,255,255,.14);cursor:pointer;line-height:1.3}
nav.toc a:hover,nav.toc .it:hover{color:#fff}
nav.toc .it.on,nav.toc a[aria-current="true"]{color:#fff;border-left-color:var(--cyan);font-weight:500}
nav.toc .acts{margin-top:auto;gap:8px}
nav.toc button{text-align:left;background:transparent;border:1px solid rgba(255,255,255,.28);border-radius:999px;color:rgba(255,255,255,.8);padding:9px 16px;font-size:13.5px;cursor:pointer}
nav.toc button:hover{border-color:var(--cyan);color:#fff}
/* Кто вошёл — над кнопкой «Выйти». Строка нужна не для красоты: с учётными
   записями действия подписываются именем, и человек должен видеть, чьим
   именем он сейчас подписывается. Приглушена намеренно — это подпись
   к экрану, а не пункт навигации. */
nav.toc .who{font-size:12px;line-height:1.35;color:rgba(255,255,255,.45);padding:2px 0 4px}

/* ---------- герой ---------- */
.hero{position:relative;isolation:isolate;margin:0 calc(-1 * var(--gutter));padding:132px var(--gutter) 48px;min-height:520px;display:flex;flex-direction:column;justify-content:flex-start;gap:18px;overflow:hidden;background:#000;color:#fff}
.hero-logo{position:absolute;top:44px;left:var(--gutter);width:150px;height:auto}
.hero .eyebrow{font-size:12px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--cyan)}
.hero h1{margin:0;max-width:900px;font-size:clamp(40px,5.2vw,72px);font-weight:500;letter-spacing:-.045em;line-height:1.03;text-wrap:balance}
.hero .lead{margin:0;font-size:clamp(18px,1.7vw,22px);line-height:1.35;color:rgba(255,255,255,.82);max-width:820px}
.hero .rule{height:2px;max-width:360px;background:var(--cyan)}
.hero .meta{display:flex;flex-wrap:wrap;gap:6px 26px;font-size:13.5px;color:rgba(255,255,255,.68)}
.hero .meta b{color:#fff;font-weight:500}

/* ---------- плитки итога ---------- */
.tiles{margin-top:-38px;position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 24px 60px -40px rgba(0,0,0,.45)}
.tiles .t{background:#fff;min-height:132px;padding:20px 22px;display:flex;flex-direction:column;gap:6px}
.tiles .k{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.tiles .v{font-size:30px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.1}
.tiles .s{font-size:13px;color:var(--muted);line-height:1.35}
.v.good{color:var(--accent)} .v.bad{color:var(--accent-2)} .v.calm{color:var(--ink)}

/* ---------- разделы ---------- */
section{display:flex;flex-direction:column;gap:18px;scroll-margin-top:24px}
h2{margin:0;font-size:clamp(26px,3vw,38px);font-weight:500;letter-spacing:-.035em;line-height:1.1}
.secnum{font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}

/* ---------- дорожная карта ---------- */
.roadmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.roadmap article{position:relative;min-height:260px;padding:24px;border:1px solid var(--line);border-radius:16px;background:#fff;display:flex;flex-direction:column;gap:10px}
.roadmap article.now{border-color:var(--accent)}
.roadmap .phase{display:block;color:var(--accent);font-size:12px;font-weight:500;letter-spacing:.09em;text-transform:uppercase}
.roadmap h3{margin:0;font-size:22px;font-weight:500;line-height:1.15;letter-spacing:-.02em}
.roadmap p{margin:0;font-size:14px;color:var(--muted)}
.bar{height:4px;background:var(--line-soft);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;background:var(--accent);border-radius:999px}
.roadmap .gate{margin-top:auto;padding-top:14px;border-top:1px solid var(--line-soft);font-size:13px;display:flex;flex-direction:column;gap:5px}
.roadmap .gate .lbl{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--accent-2)}
.roadmap .gate div{color:var(--muted)}

/* ---------- диаграмма сроков ---------- */
.gantt{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
/* Колонка названий тянется вместе с экраном: при 300px на широком мониторе
   обрезались 84 названия из ста, а место под них было.
   Нижняя граница ровно 300px — прежнее значение. Без неё формула 18vw на
   ноутбуке 1440 давала 259px, то есть делала хуже, чем было: правка, которая
   чинит широкий монитор за счёт обычного, — не улучшение. Узкие экраны
   переопределяются отдельно, ниже. */
.gantt .row,.gantt .head{display:grid;grid-template-columns:clamp(300px,18vw,520px) minmax(0,1fr)}
.gantt .row{border-top:1px solid var(--line-soft);align-items:center}
.gantt .row:hover{background:rgba(31,38,160,.03)}
.gantt .nm{padding:9px 16px;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;border-right:1px solid var(--line-soft)}
.gantt .nm .who{color:var(--faint);font-size:12px}
.gantt .head .nm{color:var(--faint);font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;cursor:default}
.gantt .track{position:relative;height:34px}
.gantt .b{position:absolute;top:11px;height:12px;border-radius:999px;background:var(--accent)}
.gantt .b.crit{background:var(--cyan)}
.gantt .b.done{background:rgba(0,0,0,.22)}
.gantt .b.base{top:8px;height:18px;background:transparent;border:1px dashed var(--line);border-radius:999px}
.gantt .months{position:relative;height:30px}
.gantt .months span{position:absolute;top:8px;font-size:11px;font-weight:500;letter-spacing:.06em;text-transform:uppercase;color:var(--faint);border-left:1px solid var(--line-soft);padding-left:7px}
.today{position:absolute;top:0;bottom:0;width:2px;background:var(--accent-2)}

/* ---------- списки ---------- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:22px}
.list{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.list .i{background:#fff;padding:15px 20px;display:flex;flex-direction:column;gap:4px;cursor:pointer}
.list .i:hover{background:rgba(31,38,160,.03)}
.list .i .h{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.list .i .ti{font-size:14.5px}
.list .i .sub{font-size:13px;color:var(--faint)}
.list .empty{background:#fff;padding:18px 20px;color:var(--faint);font-size:14px}
.tag{font-size:10.5px;font-weight:500;letter-spacing:.07em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:var(--accent-soft);color:var(--accent);white-space:nowrap}
.tag.crit{background:rgba(55,228,254,.22);color:#0B6C7D}
.tag.late{background:var(--violet-soft);color:var(--accent-2)}
.tag.dec{background:var(--violet-soft);color:var(--accent-2)}

/* ---------- таблицы ---------- */
.scroll{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:#fff}
table{width:100%;min-width:660px;border-collapse:collapse;font-size:14px}
th{text-align:left;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);padding:12px 16px;border-bottom:1px solid var(--line)}
td{padding:11px 16px;border-bottom:1px solid var(--line-soft);vertical-align:top}
tbody tr:last-child td{border-bottom:none}
tr.done td{color:var(--faint)}
td.n{font-variant-numeric:tabular-nums;white-space:nowrap}
.pointer{cursor:pointer}
select.st{background:#fff;border:1px solid var(--line);border-radius:8px;padding:6px 10px;font-size:13.5px;max-width:180px}
select.st:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---------- фильтры ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:6px 15px;font-size:13.5px;color:var(--muted);cursor:pointer}
.chip:hover{border-color:var(--accent)}
.chip.on{border-color:var(--accent);background:var(--accent-soft);color:var(--accent);font-weight:500}

/* ---------- выноска ---------- */
.callout{border-radius:12px;border:1px solid rgba(31,38,160,.22);background:rgba(31,38,160,.06);padding:18px 20px;font-size:14px}
.callout.dec{border-color:rgba(134,84,245,.24);background:var(--violet-soft)}

/* ---------- карточка задачи ---------- */
.sheet{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;justify-content:flex-end;z-index:40}
.sheet[hidden]{display:none}
.sheet-body{background:#fff;width:min(580px,100%);height:100%;overflow-y:auto;padding:32px 34px;position:relative}
.close{position:absolute;top:18px;right:20px;background:none;border:0;font-size:28px;color:var(--faint);cursor:pointer;line-height:1}
.sheet h3{margin:0 0 8px;font-size:24px;font-weight:500;letter-spacing:-.02em;line-height:1.15}
.kv{display:grid;grid-template-columns:170px minmax(0,1fr);gap:9px 16px;margin:22px 0;font-size:14px}
.kv .k{color:var(--faint)}
.note{font-size:14px;color:var(--muted);border-left:2px solid var(--accent);padding-left:14px}

/* ---------- широкие экраны ---------- */

/*
  На мониторе от 1800 плитки итога встают в один ряд вместо двух: шесть
  показателей, которые видно одним взглядом, — это и есть сводка, а два
  ряда по три заставляют переводить глаза. auto-fit сам решает, сколько
  влезет, и не ломается, если показателей станет больше или меньше:
  пустые дорожки схлопываются, оставшиеся делят место поровну.
*/
@media (min-width:1800px){.tiles{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}}

/*
  Ограничение длины строки для сплошного текста в разделах. Ширину экрана
  мы отпустили, но строка в двести знаков не читается: глаз теряет начало
  следующей. Карточек и таблиц это не касается — там короткие поля.
*/
main section > p{max-width:96ch}

/* ---------- узкие экраны ---------- */
@media (max-width:1100px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:1040px){
  .shell{display:block}
  body{overflow-x:hidden}
  nav.toc{position:static;height:auto;flex-direction:row;align-items:center;gap:16px;padding:14px 20px;overflow-x:auto;overflow-y:hidden;border-right:0}
  nav.toc .grp{flex-direction:row;align-items:center;gap:8px}
  nav.toc .gl{display:none}
  nav.toc a,nav.toc .it{white-space:nowrap;border-left:0;border-bottom:2px solid transparent;padding:6px 2px}
  nav.toc .it.on{border-bottom-color:var(--cyan)}
  nav.toc .acts{margin-top:0}
  nav.toc button{white-space:nowrap;padding:7px 13px}
  main{gap:44px;padding-bottom:72px}
  .hero{padding-top:118px;padding-bottom:42px;min-height:440px}
  .hero-logo{top:38px}
  .gantt .row,.gantt .head{grid-template-columns:160px minmax(0,1fr)}
}
@media (max-width:640px){.tiles{grid-template-columns:1fr;margin-top:-18px}}

@media print{
  body,.shell,main{background:#fff}
  .shell{display:block}
  nav.toc,.filters{display:none!important}
  main{padding:0 18mm}
  .tiles{margin-top:8mm;box-shadow:none}
  .hero{break-after:page}
  .roadmap article,.list,.scroll,.gantt{break-inside:avoid}
}

/* ---------- форма новой задачи ---------- */
.chip.add{border-color:var(--accent);color:var(--accent);font-weight:500}
.form{border:1px solid var(--line);border-radius:14px;background:#fff;padding:20px 22px;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:14px 20px}
.fr{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.fl{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--faint)}
.fh{font-size:12.5px;color:var(--faint)}
.form input[type=text],.form input[type=number]{border:1px solid var(--line);border-radius:999px;padding:9px 15px;font-size:14px;background:#fff;width:100%}
.form input:focus-visible,.form select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.form select[multiple]{border-radius:12px;padding:8px;max-width:none}
.fr.check{flex-direction:row;align-items:center;gap:9px;font-size:14px}
.facts{display:flex;gap:10px;align-items:center;grid-column:1/-1}
.facts button{border:1px solid var(--line);background:#fff;border-radius:999px;padding:10px 20px;font-size:14px;cursor:pointer}
.facts button.primary{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:500}
.facts button:hover:not(:disabled){border-color:var(--accent)}
.facts button:disabled{opacity:.5;cursor:default}
.fr.wide{grid-column:1/-1}
.preview{font-size:13.5px;color:var(--muted);border-left:2px solid var(--accent);padding-left:14px;display:flex;flex-direction:column;gap:4px}
.preview b{color:var(--ink);font-weight:500}
.preview-list{display:flex;flex-direction:column;gap:3px;margin-top:4px}
.preview-list a{color:var(--accent);text-decoration:none;font-size:13px}
.preview-list a:hover{text-decoration:underline}
.tag.crm{background:rgba(31,38,160,.1);color:var(--accent);text-decoration:none}
.tag.crm:hover{background:var(--accent);color:#fff}

/* ---------- прогресс в боковом меню ---------- */
nav.toc .it{padding-bottom:10px}
nav.toc .mini{position:relative;height:3px;border-radius:999px;background:rgba(255,255,255,.14);margin:7px 0 4px;overflow:hidden;display:flex}
nav.toc .mini i{display:block;height:100%;background:var(--cyan);transition:width .8s cubic-bezier(.2,0,.2,1)}
nav.toc .mini u{display:block;height:100%;background:rgba(55,228,254,.32)}
nav.toc .mini-t{display:block;font-size:11px;color:rgba(255,255,255,.42)}
nav.toc .it.on .mini-t{color:rgba(255,255,255,.7)}

/* ---------- шкала выполнения ---------- */
.progress{border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:#fff;display:grid;grid-template-columns:1fr auto;gap:10px 20px;align-items:center}
.progress .ph{grid-column:1;display:flex;flex-direction:column;gap:2px;font-size:14px}
.progress .ph b{font-weight:500}
.progress .ph span{color:var(--faint);font-size:13px}
.progress .pnum{grid-column:2;grid-row:1/3;font-size:34px;font-weight:500;letter-spacing:-.03em;font-variant-numeric:tabular-nums;color:var(--accent)}
.ptrack{grid-column:1;display:flex;height:10px;border-radius:999px;background:var(--line-soft);overflow:hidden}
.ptrack i{display:block;width:0;height:100%;transition:width 1.1s cubic-bezier(.2,0,.2,1)}
.ptrack i.done{background:var(--accent)}
.ptrack i.work{background:var(--cyan)}

/* ---------- состояние строки задачи ---------- */
tbody tr.done td{color:var(--faint)}
tbody tr.done td:first-child{text-decoration-color:var(--faint)}
tbody tr.work{background:rgba(55,228,254,.09)}
tbody tr.work td:first-child{box-shadow:inset 3px 0 0 var(--cyan)}
tbody tr.accept{background:rgba(31,38,160,.05)}
tbody tr.accept td:first-child{box-shadow:inset 3px 0 0 var(--accent)}
tbody tr.wait td:first-child{box-shadow:inset 3px 0 0 var(--accent-2)}
tbody tr.cancelled td{color:var(--faint);text-decoration:line-through;text-decoration-thickness:1px}
tbody tr.done td:first-child::before{content:'✓ ';color:var(--accent);font-weight:500}

/* ---------- страница входа ---------- */
/* Единственный экран, который видят до пароля. Чёрный фон — тот же, что
   у героя и боковой колонки: приложение должно узнаваться ещё до входа. */
body.login-page{background:#000;color:#fff;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login{width:100%;max-width:392px;display:flex;flex-direction:column;gap:14px}
.login-logo{width:132px;height:auto;margin-bottom:14px}
.login h1{margin:0;font-size:30px;font-weight:500;letter-spacing:-.035em;line-height:1.1}
.login-hint{margin:0 0 8px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.62)}
.login label{display:flex;flex-direction:column;gap:7px}
.login label span{font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.login input{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.22);border-radius:14px;color:#fff;padding:13px 16px;outline:none}
.login input:focus{border-color:var(--cyan);background:rgba(255,255,255,.1)}
.login input:disabled{opacity:.45}
.login-error{margin:0;font-size:14px;color:var(--cyan)}
.login-go{margin-top:6px;border:0;border-radius:999px;background:#fff;color:#000;font-weight:500;padding:13px 26px;cursor:pointer}
.login-go:hover:not(:disabled){background:var(--cyan)}
.login-go:disabled{opacity:.4;cursor:default}