/* Стиль оформления «Спокойный» (2026-10-14; выбор стиля — профиль → «Оформление», prefs "style").
   Действует только при классе st-calm на <html> (его ставит base.html по настройке человека; у «Контрастного» —
   st-calm st-contrast). По умолчанию стиль «Классический» — это base.css + app.css без этого файла.
   Как устроено: плитки на тон темнее страницы (в тёмной теме — светлее) вместо белых карточек, заголовок блока над
   плиткой, внутри плитки белые «лунки»; кнопки синие плоские; один радиус у элементов управления; меню в цвет
   страницы. Правило для новых правил здесь: каждый селектор начинается с :where(.st-calm) — так специфичность
   остаётся как у обычного правила; переменные — в блоке :root.st-calm.
   Новый элемент интерфейса: собирать из общих классов (.card, .widget, .btn, .chips…) и токенов base.css
   (--blk-bg, --track, --well, --r-ctl, --btn) — тогда он сам выглядит правильно во всех стилях; проверять во всех
   трёх стилях и обеих темах. */
/* два уровня: --tone — плитка (контейнер), --well — то, что лежит внутри плитки: вложенные плитки, пустые клетки
   тепловой карты, дорожки полос и прогресса. В светлой теме «лунка» белая, в тёмной — на тон светлее плитки */
:root.st-calm{ --blk-bg: var(--tone); --blk-shadow: none; --blk-radius: 14px;
  --tone: rgba(var(--ink-rgb), .045); --tone-solid: #eeeff3; --tone-hover: rgba(var(--ink-rgb), .05);
  --well: #fff; --well-dim: rgba(255, 255, 255, .5); }
:root.st-calm[data-theme="dark"]{ --tone: rgba(var(--ink-rgb), .05); --tone-solid: #1a1f27; --well: rgba(var(--ink-rgb), .07);
  --well-dim: rgba(var(--ink-rgb), .03); }
@media (prefers-color-scheme: dark) { :root.st-calm:not([data-theme="light"]){ --tone: rgba(var(--ink-rgb), .05); --tone-solid: #1a1f27;
  --well: rgba(var(--ink-rgb), .07); --well-dim: rgba(var(--ink-rgb), .03); } }

/* фон страницы ровный: цветные пятна (.ambient) — наследие стеклянного стиля, на них тон плитки «гуляет» */
:where(.st-calm) .ambient{ display: none; }

/* плитка: все блоки контента с белым фоном */
:where(.st-calm) .card,
:where(.st-calm) .widget,
:where(.st-calm) .pp-stat,
:where(.st-calm) .hp-card,
:where(.st-calm) .hp-pg,
:where(.st-calm) .pj-kpi,
:where(.st-calm) .pj-flt,
:where(.st-calm) .stg-nav{
  background: var(--tone); border: 0; outline: 0; box-shadow: none; border-radius: 14px;
  -webkit-backdrop-filter: none; backdrop-filter: none; --hover-solid: var(--tone-hover); }
:where(.st-calm) .card{ --pt: 22px; --px: 24px; } :where(.st-calm) .widget{ --pt: 14px; --px: 18px; } :where(.st-calm) .hp-card{ --pt: 14px; --px: 14px; }

/* заголовок над плиткой: первая строка блока выносится вверх на 40px (строка 32px + зазор 8px), края — по краю
   плитки, как у блоков без фона в основной колонке */
:where(.st-calm) :is(.card, .widget, .hp-card):has(> :is(h2, h3, .w-head, .card-head, .chk-h, .pj-ms-h, .tpl-card-h):first-child){ margin-top: 40px; }
/* соседние карточки в обычном потоке: отступы схлопываются, поэтому заголовку нужен свой зазор от плитки выше */
:where(.st-calm) .card + .card:has(> :is(h2, h3, .w-head, .card-head, .chk-h, .pj-ms-h, .tpl-card-h):first-child){ margin-top: 58px; }
:where(.st-calm) :is(.card, .widget, .hp-card) > :is(h2, h3, .w-head, .card-head, .chk-h, .pj-ms-h, .tpl-card-h):first-child{
  display: flex; flex-wrap: wrap; align-content: flex-end; align-items: baseline; gap: 10px; height: 32px; box-sizing: border-box; padding: 0 0 2px;
  margin: calc(-40px - var(--pt)) calc(-1 * var(--px)) calc(var(--pt) + 8px); }

/* второй уровень: вложенные плитки и «пустое» в графиках внутри плитки — белые (на сером они сливались) */
:where(.st-calm) :is(.card, .widget, .pp-stat, .hp-card) :is(.card, .widget, .pj-kpi, .pp-stat, .hp-card, .hp-pg, .pq){ background: var(--well); }
:where(.st-calm) :where(.card, .widget, .pp-stat) :is(.rp-bt, .progress, .chk-bar, .mst-pb, .pj-stack, .md-part, .tt-seg, .tb, .tm-c){
  background-color: var(--well); }
:where(.st-calm) :where(.card, .widget, .pp-stat) .pp-bar i.lv-none,
:where(.st-calm) :where(.card, .widget) .rp-heat td.h0{ background-color: var(--well); }
:where(.st-calm) :where(.card, .widget) .rp-heat td.h0.we,
:where(.st-calm) :where(.card, .widget) .rp-ts :is(th, td).we{ background-color: var(--well-dim); }

/* токен дорожки для новых элементов: внутри плитки — «лунка», на фоне страницы — серая (как в «Классическом») */
:where(.st-calm) :is(.card, .widget, .pp-stat, .pq) { --track: var(--well); }
:where(.st-calm) .dash-main .widget { --track: rgba(var(--ink-rgb), .07); }

/* строки-плитки списков (проекты): тот же тон, рамка-акцент при наведении остаётся */
:where(.st-calm) .pq{ background: var(--tone); box-shadow: none; }

/* закреплённые колонки внутри плитки — непрозрачный тон, иначе под ними видно прокрутку */
:where(.st-calm) .card .wl2 .th-person,
:where(.st-calm) .card .wl2 .wl-person,
:where(.st-calm) .card .wl2 .gantt-name,
:where(.st-calm) .card .gt-person{ background: var(--tone-solid); }
:where(.st-calm) .stg-nav{ background: var(--tone-solid); }

/* скелетоны: крупные блоки — цветом плитки */
:where(.st-calm) .skg .gh-box{ background-color: var(--tone-solid) !important; }

/* в основной колонке главной блоки без плитки — дорожки остаются серыми, белое на фоне страницы теряется */
:where(.st-calm) .dash-main .widget :is(.rp-bt, .progress, .chk-bar, .mst-pb, .pj-stack, .md-part, .tt-seg, .tb, .tm-c){ background-color: rgba(var(--ink-rgb), .07); }

/* ── Кнопки и элементы управления (2026-10-14, «спокойный» вариант для работы весь день) ──
   основная — синяя плоская, без цветной тени и подъёма (чёрная была слишком контрастной); «Создать задачу» — фирменный
   переход синий → бирюзовый из логотипа; вторичная — белая «лунка» (на фоне — тонкая рамка, на плитке — без неё).
   Один радиус у всех элементов управления: 10px (высота 40) и 8px (32 и меньше). Теней у элементов управления нет —
   тень только у того, что всплывает. */
:root.st-calm{ --btn: #2b7de9; --btn-h: #1f6fd8; --r-ctl: 10px; --r-ctl-sm: 8px;
  --brand-grad: linear-gradient(115deg, #2b7de9 0%, #2a8ade 50%, #1aa3c2 100%); }
:root.st-calm[data-theme="dark"]{ --btn: #3b82e6; --btn-h: #4a8fee; }
@media (prefers-color-scheme: dark) { :root.st-calm:not([data-theme="light"]){ --btn: #3b82e6; --btn-h: #4a8fee; } }

:where(.st-calm) .btn{ background: var(--btn); color: #fff; border: 0; border-radius: var(--r-ctl); box-shadow: none; font-weight: 600;
  transition: background .15s, box-shadow .15s, transform .1s; }
:where(.st-calm) .btn:hover{ background: var(--btn-h); color: #fff; box-shadow: none; transform: none; }
:where(.st-calm) .btn:active{ background: var(--btn-h); box-shadow: none; transform: scale(.98); }
:where(.st-calm) .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; }
:where(.st-calm) .btn.small{ border-radius: var(--r-ctl-sm); }
:where(.st-calm) .btn.secondary{ background: var(--well); color: var(--ink); border: 0; box-shadow: inset 0 0 0 1px var(--border-strong); }
:where(.st-calm) :is(.card, .widget, .pp-stat, .hp-card, .pj-flt) .btn.secondary{ box-shadow: none; }
:where(.st-calm) .btn.secondary:hover,
:where(.st-calm) :is(.card, .widget, .pp-stat, .hp-card, .pj-flt) .btn.secondary:hover{ background: var(--well); color: var(--ink);
  box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .3); }
:where(.st-calm) .btn.secondary:active{ background: rgba(var(--ink-rgb), .06); }
:where(.st-calm) .btn.danger{ background: var(--crit-bg); color: var(--crit); border: 0; box-shadow: none; }
:where(.st-calm) .btn.danger:hover{ background: var(--crit-bg-strong); color: var(--crit); }
:where(.st-calm) .btn:disabled,
:where(.st-calm) .btn.disabled{ opacity: 1; background: rgba(var(--ink-rgb), .06); color: rgba(var(--ink-rgb), .38); box-shadow: none; transform: none; }
:where(.st-calm) .nav-create, :where(.st-calm) .nav-create:hover{ background: var(--brand-grad); }
:where(.st-calm) .nav-create:hover{ filter: brightness(1.06); }
:where(.st-calm) .dlg-choice.primary{ background: var(--btn); border-color: var(--btn); box-shadow: none; }
:where(.st-calm) .dlg-choice.primary:hover,
:where(.st-calm) .dlg-choice.primary:focus-visible{ background: var(--btn-h); border-color: var(--btn-h); box-shadow: 0 0 0 3px var(--accent-soft); }

/* поля и выпадающие — тот же радиус, без теней */
:where(.st-calm) select,
:where(.st-calm) input[type=text],
:where(.st-calm) input[type=email],
:where(.st-calm) input[type=password],
:where(.st-calm) input[type=url],
:where(.st-calm) textarea,
:where(.st-calm) .dd-btn,
:where(.st-calm) .dates-btn{ border-radius: var(--r-ctl); }
:where(.st-calm) .fl-search,
:where(.st-calm) .fl-tool,
:where(.st-calm) .fl-add,
:where(.st-calm) .fl-chip,
:where(.st-calm) details.menu summary{ border-radius: var(--r-ctl-sm); }
:where(.st-calm) details.menu summary{ box-shadow: none; }
:where(.st-calm) .hp-search{ border-radius: 12px; box-shadow: none; }
:where(.st-calm) .nt-ab{ box-shadow: inset 0 0 0 1px var(--border-strong); }
/* переключатели-сегменты: дорожка 10px, выбранный сегмент — белый, тень едва заметная */
:where(.st-calm) .chips,
:where(.st-calm) .rp-views,
:where(.st-calm) .rp-seg,
:where(.st-calm) .ta-seg{ border-radius: var(--r-ctl); padding: 3px; }
:where(.st-calm) .chip,
:where(.st-calm) .rp-views a,
:where(.st-calm) .rp-seg a,
:where(.st-calm) .ta-seg button{ border-radius: var(--r-ctl-sm); }
:where(.st-calm) .chip.active,
:where(.st-calm) .rp-views a.on,
:where(.st-calm) .rp-seg a.on,
:where(.st-calm) .ta-seg button.on{ box-shadow: 0 1px 2px rgba(var(--ink-rgb), .08); }
:where(.st-calm) :is(.card, .widget) :is(.chips, .rp-views, .rp-seg, .ta-seg){ background: rgba(var(--ink-rgb), .06); }

/* ── Типографика ── подписи колонок и разделов обычным регистром, без разрядки (заглавные с разрядкой — приём
   2016–2019, утомляет глаз); заголовки — 600 вместо 650–700 */
:where(.st-calm) th,
:where(.st-calm) .rp-t th,
:where(.st-calm) .hp-table th,
:where(.st-calm) .file-block-head,
:where(.st-calm) .dp-field span,
:where(.st-calm) .gt-head .gt-person,
:where(.st-calm) .gt-days,
:where(.st-calm) .gt-sub-label,
:where(.st-calm) .wl-pd-group,
:where(.st-calm) .fl-pop-h,
:where(.st-calm) .gx-lh,
:where(.st-calm) .gx-hrow.top .gx-seg,
:where(.st-calm) .gx-nod-h,
:where(.st-calm) .pj-card h3,
:where(.st-calm) .wf-sh,
:where(.st-calm) .bk-h,
:where(.st-calm) .sr-g,
:where(.st-calm) .tn-grp-h,
:where(.st-calm) .htree .ht-sh,
:where(.st-calm) .tpl-gh,
:where(.st-calm) .nt-day,
:where(.st-calm) .ns-g td{
  text-transform: none; letter-spacing: 0; font-size: 12px; font-weight: 600; }
:where(.st-calm) h1,
:where(.st-calm) h2,
:where(.st-calm) h3,
:where(.st-calm) .w-head h2,
:where(.st-calm) .md-head h2,
:where(.st-calm) .dlg-title,
:where(.st-calm) textarea.task-title-input,
:where(.st-calm) input.title-plain,
:where(.st-calm) .status-big,
:where(.st-calm) .ans-a, :where(.st-calm) .brand { font-weight: 600; }

/* названия задач в списках — цветом текста, синие при наведении: в длинном списке сплошной синий утомляет */
/* (класс tt-l — название внутри обёртки .tt, 2026-10-21; раньше у задач процесса значок шёл первым и правило не срабатывало) */
:where(.st-calm) table.tasks a.tt-l,
:where(.st-calm) table.past-table td > a:first-child{ color: var(--ink); font-weight: 500; }
:where(.st-calm) table.tasks a.tt-l:hover,
:where(.st-calm) table.past-table td > a:first-child:hover{ color: var(--accent); }

/* меню и верхняя панель — в цвет страницы: один слой, без «белой рамы» вокруг контента */
:where(.st-calm) .sidebar{ background: var(--paper); -webkit-backdrop-filter: none; backdrop-filter: none; }
:where(.st-calm) .topbar{ background: color-mix(in srgb, var(--paper) 88%, transparent); }

/* ── доводка по обходу всех экранов (2026-10-14) ── */
/* низ формы создания задачи и шаблона: была белая полоса на плитке; полоса липкая — поэтому непрозрачный тон */
:where(.st-calm) .tn-foot{ background: var(--tone-solid); border-top-color: var(--border-strong); }
/* полоса задач в строке проекта и портфеля: дорожка — «лунка», на тоне строки серое сливалось */
:where(.st-calm) .pq .pj-stack{ background-color: var(--well); }
/* таймшит: выходные в плитке — темнее будней (затенены), а не светлее */
:where(.st-calm) :where(.card, .widget) .rp-ts :is(th, td).we{ background-color: rgba(var(--ink-rgb), .045); }
/* дни недели под шкалой ганта — обычным регистром, как остальные подписи */
:where(.st-calm) .gx-hrow.bottom .gx-seg small{ text-transform: none; }
/* легенда нагрузки: пункт не переносится посередине («до 8 / ч») */
:where(.st-calm) .wl-legend{ display: block; line-height: 1.9; }
:where(.st-calm) .wl-legend .sw{ vertical-align: -1px; margin: 0 3px 0 8px; } :where(.st-calm) .wl-legend .sw:first-child{ margin-left: 0; }

/* «Ждут ответа» в окне верхней панели: вторичные кнопки с рамкой (белое на белом пропадало) */
:where(.st-calm) .wt-pop .btn.secondary,
:where(.st-calm) .dash-main .btn.secondary{ box-shadow: inset 0 0 0 1px var(--border-strong); }
:where(.st-calm) .wt-pop .btn.secondary:hover,
:where(.st-calm) .dash-main .btn.secondary:hover{ box-shadow: inset 0 0 0 1px rgba(var(--ink-rgb), .3); }

/* заголовок раздела настроек (.stg-h) и сразу под ним блок со своим заголовком над плиткой: без зазора два заголовка
   стояли вплотную («Оформление» / «Стиль») */
:where(.st-calm) .stg-h + .card:has(> :is(h2, h3, .w-head, .card-head, .chk-h, .pj-ms-h, .tpl-card-h):first-child),
:where(.st-calm) .stg-h + form > .card:first-child:has(> :is(h2, h3, .w-head, .card-head, .chk-h, .pj-ms-h, .tpl-card-h):first-child) {
  margin-top: 56px; }