/* Перенесено из итога этапа 1 (build/ui-kits.js) как есть — раскладка и оформление утверждённых страниц. Цвета — переменные системы. */
/* focustrack · Направление А · раскладка страниц платформы.
   Ни одного цвета значением: всё — переменные из css/variables.css и css/theme-dark.css.
   Файл добавляет только оболочку окна (шапка, меню, рабочая область, зоны); плотность одна — обычная, из variables.css;
   сами элементы — кнопки, поля, карточки, ползунки, плашки — взяты из ../../css/sheet.css,
   приёмы навыков — из css/skills.css.
   Вид устройства определяется шириной рамки предпросмотра, а не окна браузера: @container. */

/* Скрытое скрыто при любом display: правила по классу иначе перебивают браузерное [hidden] */
.app [hidden], .rv-stage [hidden] { display: none !important; }

/* ══ Полоса просмотра: не часть продукта, а рамка для показа ══ */
.rv-top { position: sticky; top: 0; z-index: 40; display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-5); background: var(--bg-header); border-bottom: var(--border-thin) solid var(--border-divider); box-shadow: var(--elev-2); }
.rv-top .grow { flex: 1 1 auto; }
.rv-top .back { font-size: var(--font-size-3); color: var(--text-secondary); text-decoration: none; }
.rv-top .back:hover { color: var(--text-primary); }
.rv-name { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--font-size-4); }
.rv-pages { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.rv-pages a { font-size: var(--font-size-2); color: var(--text-secondary); text-decoration: none; padding: 4px var(--space-2); border-radius: var(--radius-sm); border: var(--border-thin) solid transparent; }
.rv-pages a:hover { background: var(--action-secondary-hover); color: var(--text-primary); }
.rv-pages a[aria-current="page"] { background: var(--bg-selection); color: var(--text-primary); border-color: var(--border-divider); }
.rv-stage { overflow-x: clip; display: flex; justify-content: center; padding: var(--space-5) var(--space-4) var(--space-8); background: var(--bg-menu); border-bottom: var(--border-thin) solid var(--border-divider); }
.rv-note { max-width: 78ch; margin: 0 auto; padding: 0 var(--space-4) var(--space-6); font-size: var(--font-size-2); color: var(--text-muted); text-wrap: pretty; }

/* Рамка устройства: ширина задана видом, содержимое внутри считает себя по ней */
.frame { container-type: inline-size; background: var(--bg-page); border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-lg); box-shadow: var(--elev-3); overflow: hidden; transform-origin: top center; }
.frame[data-view="desktop"] { width: 1440px; }
.frame[data-view="phone"] { width: 390px; border-radius: var(--radius-lg); }

/* ══ Окно платформы ══ */
.app { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; min-height: 720px; background: var(--bg-page); color: var(--text-primary); font-size: var(--font-size-4); line-height: var(--line-height-text); }
.frame[data-view="phone"] .app { min-height: 780px; }
.app-top { display: flex; align-items: center; gap: var(--space-3); height: 70px; padding: 0 var(--space-5); background: var(--bg-header); color: var(--text-header); box-shadow: var(--elev-2); position: relative; z-index: 12; }
.app-top .grow { flex: 1 1 auto; }
.app-line { height: var(--gl-thin); }
.app-burger { display: none; width: 36px; height: 36px; align-items: center; justify-content: center; border: var(--border-regular) solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-input); color: var(--text-primary); cursor: pointer; padding: 0; }
.app-link { font-size: var(--font-size-3); color: var(--text-link); text-decoration: none; white-space: nowrap; }
.app-link:hover { text-decoration: underline; }
/* в шапке переключатель языка сдвинут влево на 5 % ширины шапки; соседи остаются на местах */
.app-top .lang { position: relative; right: 5cqw; }
.logo-link { display: inline-flex; color: inherit; text-decoration: none; border-radius: var(--radius-control); }
.logo-link:hover { opacity: .85; }
.logo-link:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
.lang { display: inline-flex; border: var(--border-regular) solid var(--border-default); border-radius: var(--radius-control); overflow: hidden; background: var(--bg-input); }
.lang a { min-width: 40px; padding: 5px var(--space-2); font-size: var(--font-size-2); font-family: var(--font-mono); text-align: center; color: var(--text-secondary); text-decoration: none; }
.lang a + a { border-left: var(--border-thin) solid var(--border-divider); }
.lang a:hover { background: var(--action-secondary-hover); color: var(--text-primary); }
.lang a[aria-current="true"] { background: var(--action-primary); color: var(--action-primary-text); }
.pay-due { display: inline-flex; align-items: center; gap: 6px; padding: 4px var(--space-2); border-radius: var(--radius-sm); background: var(--state-warning-bg); color: var(--state-warning); font-size: var(--font-size-2); white-space: nowrap; flex: none; }
/* кошелёк и значок человека: в css/sheet.css они описаны только для образца шапки (.ft-header) */
.app-top .wallet { flex: none; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; padding: 0 var(--space-2); border-radius: var(--radius-control); font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-size-3); color: var(--text-header); cursor: pointer; }
.app-top .wallet:hover { background: var(--action-secondary-hover); }
.app-top .avatar { flex: none; white-space: nowrap; display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-round); background: var(--bg-selection); color: var(--text-primary); font-size: var(--font-size-2); font-weight: var(--weight-medium); cursor: pointer; }
/* Напоминание об оплате строкой в рабочей области: на телефоне в шапке для него нет ширины */
.pay-note { display: none; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--state-warning-bg); color: var(--text-primary); font-size: var(--font-size-3); }
.pay-note svg { color: var(--state-warning); flex: none; }

/* шторка «Статистика»: справа, 20 % ширины рабочей области, поверх перечня; перечень под ней не перестраивается */
.app-body:has(.stats-drawer) { position: relative; }
.stats-drawer { position: absolute; top: 0; right: 0; bottom: 0; z-index: 9; width: max(20%, 300px); display: grid; align-content: start; gap: var(--space-3); padding: var(--space-4); background: var(--bg-drawer); border-left: var(--border-thin) solid var(--border-divider); box-shadow: var(--elev-3); overflow-y: auto; animation: stats-in var(--motion-drawer) var(--motion-ease-enter) both; }
.stats-drawer > .stats-head { position: sticky; top: calc(var(--space-4) * -1); z-index: 2; background: var(--bg-drawer); padding-block: var(--space-2); }
.stats-drawer .stats-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.stats-drawer .dash-slot { position: relative; top: auto; min-height: 420px; }
@keyframes stats-in { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stats-drawer { animation-name: ft-fade; } }
/* настольный вид (от 1200): сводка раздела и подсказка — постоянная колонка справа, 25 % ширины; кнопки «Статистика» и «Закрыть» не нужны */
@container (min-width: 1200px) {
  /* отбор — во всю ширину рабочей области; колонка сводки (25 % окна платформы) начинается под ним, рядом с задачами */
  .app-work:has(> .stats-drawer) { grid-template-columns: minmax(0, 1fr) 25cqw; column-gap: var(--space-4); }
  .app-work:has(> .stats-drawer) > .pz:first-child { grid-column: 1 / -1; }
  .app-work > .stats-drawer ~ .pz { grid-column: 1; grid-row: 2; }
  /* плашки задач — во всю колонку, но ниже: поля меньше, заголовок и подписи плотнее */
  .app-work > .stats-drawer ~ .pz .row-card { padding-block: var(--space-2); gap: var(--space-2) var(--space-3); }
  .app-work > .stats-drawer ~ .pz .row-card .card-body { gap: 2px; }
  .app-work > .stats-drawer ~ .pz .rows { gap: var(--space-2); }
  .app-work > .stats-drawer, .app-work > .stats-drawer[hidden] { grid-column: 2; grid-row: 2; border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); display: grid !important; position: sticky; top: 0; bottom: auto; right: auto; width: auto; max-height: 100vh; align-self: start; box-shadow: none; animation: none; z-index: 1; }
  .stats-drawer [data-stats-close], .app-work:has(> .stats-drawer) [data-stats-open] { display: none; }
}
/* планшет (768–1199): сводка раздела стоит под перечнем во всю ширину, без шторки и без кнопок */
@container (min-width: 768px) and (max-width: 1199px) {
  .app-work > .stats-drawer ~ .pz { grid-row: 2; }
  .app-work > .stats-drawer, .app-work > .stats-drawer[hidden] { grid-row: 3; display: grid !important; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; position: static; width: auto; max-height: none; overflow: visible; border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); box-shadow: none; animation: none; z-index: auto; }
  .app-work > .stats-drawer > .stats-head { grid-column: 1 / -1; position: static; }
  .stats-drawer [data-stats-close], .app-work:has(> .stats-drawer) [data-stats-open] { display: none; }
}
.stats-hint { min-width: 0; }
.tl-rows { padding-top: 0; }
/* перечень задач: страницы по сто карточек */
.row-card[data-page-off], .row-card[data-pick-off] { display: none; }
/* плашка отбора из дашборда над перечнем */
.tl-picked { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4); padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--bg-selection); font-size: var(--font-size-3); color: var(--text-primary); }
.pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2) var(--space-4); }
.pager-pages { display: flex; flex-wrap: wrap; gap: var(--space-1); }
.pager-pages[hidden], .pager-pages .chip[hidden] { display: none; }
.pager-pages .chip { min-width: 40px; justify-content: center; font-variant-numeric: tabular-nums; }
.pager-pages .chip:disabled { opacity: .45; cursor: default; }
/* перечень задач: первая задача сразу под кнопками и отбором */
.app-work:has(> .stats-drawer) { row-gap: var(--space-3); }
.search-bar:has([data-stats-open]) { padding-bottom: var(--space-2); }
.app-body { display: grid; grid-template-columns: minmax(180px, 20%) minmax(0, 1fr); align-items: start; }
.app-menu { background: var(--bg-menu); border-right: var(--border-thin) solid var(--border-divider); padding: var(--space-4) var(--space-3); display: grid; gap: 2px; align-content: start; position: sticky; top: 0; }
.app-menu a { display: flex; align-items: center; flex-wrap: wrap; gap: 4px var(--space-2); min-height: var(--control-height); padding: 4px var(--space-3); border-radius: var(--radius-control); font-size: var(--font-size-3); color: var(--text-secondary); text-decoration: none; }
.app-menu .pill { font-size: var(--font-size-1); padding: 1px 6px; }
.app-menu a svg { flex: none; color: var(--text-muted); }
.app-menu a:hover { background: var(--action-secondary-hover); color: var(--text-primary); }
.app-menu a:hover svg { color: var(--text-secondary); }
.app-menu a[aria-current="page"] { background: var(--bg-selection); color: var(--text-primary); font-weight: var(--weight-medium); }
.app-menu a[aria-current="page"] svg { color: var(--action-primary); }
.app-menu a[aria-disabled="true"] { opacity: .45; cursor: default; }
.app-menu .menu-note { font-size: var(--font-size-1); color: var(--text-muted); padding: 0 var(--space-3); }
.app-menu .menu-group { font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); padding: var(--space-3) var(--space-3) var(--space-1); }
.app-work { display: grid; gap: var(--gap-zone); padding: var(--space-5); min-width: 0; align-content: start; }
.app-foot { display: flex; gap: var(--space-2) var(--space-5); flex-wrap: wrap; align-items: center; padding: var(--space-4) var(--space-5); border-top: var(--border-thin) solid var(--border-divider); font-size: var(--font-size-2); color: var(--text-secondary); }
.app-foot a { color: var(--text-link); }
.app-foot .grow { flex: 1 1 auto; }

.app-work h3 { font-size: var(--font-size-5); }
.app-work h3:not(:first-child) { margin-top: var(--space-2); }

/* ══ Главная до входа: сначала на весь экран только заставка; панель и зоны ниже — после неё ══ */
.app[data-guest="intro"] .app-menu, .app[data-guest="intro"] .app-burger, .app[data-guest="intro"] [data-after-intro] { display: none; }
.app[data-guest="intro"] .app-body { grid-template-columns: minmax(0, 1fr); }
.app[data-guest="open"] .app-menu { animation: guest-in var(--motion-rise) var(--motion-ease-enter) both; }
@keyframes guest-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
.app-wide { grid-column: 1 / -1; display: grid; gap: var(--gap-zone); padding: 0 var(--space-5) var(--space-5); min-width: 0; }
/* На главной высоту первого ряда задаёт рабочая область, а не панель: панель не длиннее кольца и листается сама,
   поэтому широкие зоны начинаются сразу под кольцом */
.app[data-screen-now="home"] .app-menu { height: 0; min-height: 100%; overflow-y: auto; }
.app[data-screen-now="home"] .app-work { padding-bottom: 0; }
.app[data-guest="intro"] .app-wide { display: none; }
/* главная после входа: высоту первого ряда задаёт сцена, панель не длиннее её; плашки сроков и ниже — от левого края окна */
@container (min-width: 768px) {
  .app-body:has(> .ws-wide) > .app-menu { height: 0; min-height: 100%; overflow-y: auto; overflow-x: hidden; }
  .app-body:has(> .ws-wide) > .app-work { padding-bottom: 0; }
}
.ws-wide { padding-top: var(--space-5); }
.screen { display: grid; gap: var(--gap-zone); min-width: 0; align-content: start; }
/* Первый экран: заголовок, кольцо и кнопка по середине, высота — один экран окна платформы */
/* Заголовок — в самом верху, до кольца 30 точек; узлы кольца выступают за дорожку на 28, это входит в отступ кольца */
.pz.pz-hero { justify-items: center; align-content: start; text-align: center; gap: 30px; }
.pz-hero .pz-head { justify-content: center; }
.pz-hero .ring { min-height: 0; padding-block: 28px; }
/* Кнопка заставки — внутри круга, под надписями середины */
.ring-core .intro-start { flex-direction: column; gap: var(--space-1); margin-top: calc(var(--space-2) + 1lh); }
.ring-core .intro-note { font-size: var(--font-size-1); color: var(--text-muted); }
.pz-hero .intro { justify-self: stretch; text-align: left; }
/* Пометка примера: на каждом экране с показательными данными */
.demo-banner { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-selection); border: var(--border-regular) solid var(--border-focus); }
.demo-banner p { flex: 1 1 320px; min-width: 0; font-size: var(--font-size-3); color: var(--text-primary); text-wrap: pretty; }
.demo-badge { position: relative; border: 0; cursor: pointer; font-family: var(--font-mono); line-height: 1.4; font-family: var(--font-mono); font-size: var(--font-size-2); font-weight: var(--weight-bold); text-transform: uppercase; letter-spacing: .06em; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--action-primary); color: var(--action-primary-text); }
.viz { display: grid; gap: var(--space-3); }
/* Волны от кнопки «Пример»: бесконечное движение — только в псевдоэлементах; после нажатия смолкают на 60 с */
.demo-badge::before, .demo-badge::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: var(--border-regular) solid var(--action-primary); pointer-events: none; animation: demo-wave var(--motion-loop-wave) var(--motion-ease) infinite; }
.demo-badge::after { animation-delay: calc(var(--motion-loop-wave) / 2); }
@keyframes demo-wave { from { opacity: .7; transform: scale(1); } to { opacity: 0; transform: scale(1.9, 2.6); } }
.app[data-waves="off"] .demo-badge::before, .app[data-waves="off"] .demo-badge::after { animation: none; opacity: 0; }
.demo-badge:hover { background: var(--action-primary-hover); }
.demo-badge:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
/* Экран раздела: справа 20 % ширины — место объёмного дашборда */
.screen-grid { display: grid; grid-template-columns: minmax(0, 1fr) 20%; gap: var(--space-5); align-items: start; }
.screen-grid.is-single { grid-template-columns: minmax(0, 1fr); }
.dash-slot { position: sticky; top: var(--space-3); display: grid; min-height: 420px; align-content: start; padding: var(--space-4); border: var(--border-regular) dashed var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; }
.dash-slot .scene-grid { height: 45%; background-size: 32px 18px, 32px 18px; }
.dash-body { position: relative; display: grid; gap: var(--space-2); justify-items: start; }
.dash-body b { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--font-size-4); }
.dash-body p, .dash-body ol { font-size: var(--font-size-2); color: var(--text-secondary); text-wrap: pretty; }
.dash-body ol { padding-left: 1.2em; display: grid; gap: 2px; }

/* Наклон плашек и карточек к курсору (tilt-card): точка схода — на родителе ряда */
.rows, .steps, .metrics, .links-grid, .pz { perspective: var(--tc-perspective); }

/* ── Зона: промежутком и заголовком, без смены фона ── */
.pz { display: grid; gap: var(--space-3); min-width: 0; }
.pz-head { display: flex; align-items: baseline; gap: var(--space-3); flex-wrap: wrap; }
.pz-title { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--font-size-6); line-height: 1.2; }
.pz-note { font-size: var(--font-size-3); color: var(--text-secondary); text-wrap: pretty; }
.pz-count { font-family: var(--font-mono); font-size: var(--font-size-3); color: var(--text-muted); }

/* ── Полоса поиска: прилипает к верху рабочей области, поднимаясь на второй этаж ── */
.search-bar { position: sticky; top: 0; z-index: 8; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; padding: var(--space-3); margin: calc(var(--space-5) * -1) calc(var(--space-5) * -1) 0; padding-inline: var(--space-5); background: var(--bg-page); border-bottom: var(--border-thin) solid transparent; transition: box-shadow var(--motion-stick) var(--motion-ease-rise), border-color var(--motion-stick) var(--motion-ease-rise); }
.search-bar[data-stuck] { box-shadow: var(--elev-2); border-color: var(--border-divider); }

.search-input { position: relative; flex: 1 1 260px; min-width: 0; display: flex; align-items: center; }
.search-input svg { position: absolute; left: var(--space-3); color: var(--text-muted); pointer-events: none; }
.search-input .input { padding-left: calc(var(--space-3) * 2 + 20px); }

/* ── Полоса отбора ── */
.filters { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.filters .label { font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.chip-row { display: flex; gap: var(--space-1); flex-wrap: wrap; }
.chip { min-height: 28px; display: inline-flex; align-items: center; gap: 6px; padding: 0 var(--space-3); border-radius: var(--radius-control); border: var(--border-regular) solid var(--border-default); background: var(--bg-input); color: var(--text-secondary); font: inherit; font-size: var(--font-size-3); cursor: pointer; white-space: nowrap; }
.chip:hover { border-color: var(--border-hover); color: var(--text-primary); }
.chip[aria-pressed="true"] { background: var(--action-primary); border-color: var(--action-primary-edge); color: var(--action-primary-text); }
.chip:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 1px; }
.select { min-height: var(--control-height); padding: 0 var(--space-3); border: var(--border-regular) solid var(--border-default); border-radius: var(--radius-control); background: var(--bg-input); color: var(--text-primary); font: inherit; font-size: var(--font-size-3); }

/* ── Карточки показателей: три в ряд на настольном ── */
.metrics { display: grid; gap: var(--gap-card); grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.metric { background: var(--bg-card); border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--elev-1); display: grid; gap: var(--space-1); align-content: start; min-width: 0; }
.metric b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-size-7); font-weight: var(--weight-bold); line-height: 1.1; }
.metric > span { font-size: var(--font-size-3); color: var(--text-secondary); }
.metric > small { font-size: var(--font-size-2); color: var(--text-muted); }
.metric.is-alert b { color: var(--state-error); }

/* ── Строка перечня: карточка записи в один столбец ── */
.rows { display: grid; gap: var(--gap-card); }
.row-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-3); align-items: center; }
.row-card .card-body { gap: var(--space-2); }
.row-main { display: flex; gap: var(--space-3); align-items: baseline; flex-wrap: wrap; }
.row-main .card-title { flex: 1 1 260px; min-width: 0; }
.row-side { display: grid; gap: var(--space-2); justify-items: end; }
.row-sliders { display: grid; gap: var(--space-1); width: 190px; }
.row-sliders .slider { grid-template-columns: 66px minmax(60px, 1fr) auto; gap: var(--space-2); }
.row-sliders .slider label { grid-column: auto; font-size: var(--font-size-1); }
.row-sliders .slider output { font-size: var(--font-size-4); min-width: 2ch; }
.row-acts { display: flex; gap: var(--space-1); opacity: 0; transition: opacity var(--motion-rise) var(--motion-ease-fade); }
.row-card:hover .row-acts, .row-card:focus-within .row-acts { opacity: 1; }
.icon-btn { width: 32px; height: 32px; display: inline-grid; place-items: center; border: var(--border-regular) solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); cursor: pointer; padding: 0; }
.icon-btn:hover { background: var(--action-secondary-hover); border-color: var(--border-default); color: var(--text-primary); }
.icon-btn:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 1px; }
.dash { color: var(--text-muted); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px var(--space-2); border-radius: var(--radius-sm); background: var(--bg-page); border: var(--border-thin) solid var(--border-divider); font-size: var(--font-size-2); color: var(--text-secondary); white-space: nowrap; }
.row-card[data-open] { background: var(--bg-selection); }

/* ── Заготовка объёмной сцены ── */
.scene-slot { position: relative; display: grid; align-content: end; gap: var(--space-3); min-height: 320px; padding: var(--space-4); border: var(--border-regular) dashed var(--border-default); border-radius: var(--radius-md); background: var(--bg-card); overflow: hidden; }
.scene-slot .scene-mark { position: absolute; inset: var(--space-4) var(--space-4) auto auto; font-size: var(--font-size-2); color: var(--text-muted); text-align: right; max-width: 22ch; }
.scene-grid { position: absolute; left: 0; right: 0; bottom: 0; height: 60%; background-image: linear-gradient(var(--border-default) var(--border-regular), transparent var(--border-regular)), linear-gradient(90deg, var(--border-default) var(--border-regular), transparent var(--border-regular)); background-size: 64px 26px, 64px 26px; transform: perspective(520px) rotateX(60deg); transform-origin: bottom center; }
.scene-nums { position: relative; display: grid; gap: var(--gap-card); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.scene-nums .metric { background: var(--bg-drawer); box-shadow: var(--elev-2); }
/* плашки сводки наклоняются и раскрывают перечень своих задач */
.scene-nums .metric[data-metric] { cursor: pointer; }
.scene-nums .metric[aria-expanded="true"] { outline: var(--border-strong) solid var(--action-primary); outline-offset: -2px; }
.scene-nums .metric:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
.metric-list { display: grid; gap: var(--space-3); padding: var(--space-4); border-radius: var(--radius-md); border: var(--border-thin) solid var(--border-divider); background: var(--bg-card); }
.metric-list[hidden] { display: none; }
.scene-nums > .metric-list { grid-column: 1 / -1; }
/* перечень выезжает из-под строки плашек за 0,3 с */
.metric-list[data-in] { animation: ml-in var(--motion-hint) var(--motion-ease-enter) both; transform-origin: 50% 0; }
@keyframes ml-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .metric-list[data-in] { animation-name: ft-fade; } }
.scene-nums.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.ml-title { display: flex; gap: var(--space-2); align-items: baseline; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--font-size-4); }
.ml-title .mono { color: var(--text-secondary); font-size: var(--font-size-3); }
.ml-rows { display: grid; gap: var(--space-2); }
.ml-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) 0; border-top: var(--border-thin) solid var(--border-divider); }
.ml-body { display: grid; gap: 2px; min-width: 0; }
.ml-t { display: inline-flex; gap: 6px; align-items: center; font-size: var(--font-size-3); text-wrap: pretty; }
.ml-row.is-over .ml-t { color: var(--state-error); }
.ml-meta { font-size: var(--font-size-2); color: var(--text-secondary); }
.ml-row:has([aria-checked="true"]) .ml-t { color: var(--text-muted); text-decoration: line-through; }
/* кнопки стопок: левый верхний угол поля сцены; нажата — стопка показана */
.dash-keys { position: absolute; left: var(--space-3); top: var(--space-3); right: var(--space-3); z-index: 2; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2) var(--space-3); align-items: stretch; pointer-events: none; }
.dash-keys > * { pointer-events: auto; }
/* пьедестал: зона кнопок одного набора, надпись сверху */
.dash-zone { display: grid; gap: var(--space-1); padding: var(--space-2); border-radius: var(--radius-md); border: var(--border-thin) solid var(--border-default); background: var(--bg-drawer); box-shadow: 0 3px 0 var(--border-default), var(--elev-1); transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.dash-zone.is-off { opacity: .315; box-shadow: none; }
.dash-zone.is-off .dash-key-btn { cursor: default; }
.dash-zone-keys { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.dash-zone-t { font-size: 11px; font-weight: var(--weight-medium); letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); }
/* настольный: «Туда-сюда» над обычным переключателем; названия наборов по сторонам — только на телефоне */
.dash-range { display: grid; gap: var(--space-1); justify-items: center; align-content: center; padding: 0 var(--space-1); }
.dash-range .dash-range-t { display: none; }
.dash-range-t { border: 0; background: none; padding: 0; font: inherit; font-size: var(--font-size-2); color: var(--text-muted); cursor: pointer; white-space: nowrap; }
.dash-range-t.is-on { color: var(--text-primary); font-weight: var(--weight-medium); }
.dash-range-t:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }
.dash-key-btn { min-height: 28px; white-space: nowrap; padding: 0 var(--space-3); border-radius: var(--radius-sm); border: var(--border-thin) solid var(--border-default); background: var(--bg-card); color: var(--text-primary); font: inherit; font-size: var(--font-size-2); cursor: pointer; box-shadow: 0 2px 0 var(--border-default); transform: translateY(-2px); transition: transform var(--motion-rise) var(--motion-ease-rise), box-shadow var(--motion-rise) var(--motion-ease-rise), background-color var(--motion-rise) var(--motion-ease-rise); }
.dash-key-btn[aria-pressed="true"] { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-dark); box-shadow: 0 0 0 var(--border-default); transform: none; }
.dash-key-btn:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
.dl.is-key { transform-origin: 50% 50%; padding: 2px 10px; font-family: var(--font-text); font-size: 12px; cursor: pointer; }
.dl.is-key.is-on { background: var(--action-primary); border-color: var(--action-primary); color: var(--text-on-dark); }
.dl.is-key[hidden], .dl[hidden] { display: none; }
.scene-foot { position: relative; display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; font-size: var(--font-size-2); color: var(--text-muted); }

/* ── Объёмный дашборд «Сводка дня» (a/js/dash-day.js): сцена, подписи, подсказка, плоский вид, таблица ── */
.dash { display: grid; gap: var(--space-3); min-width: 0; }
.dash-bar { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; justify-content: space-between; }
.dash-idea { font-size: var(--font-size-2); color: var(--text-secondary); max-width: 90ch; text-wrap: pretty; }
.dash-stage { position: relative; height: 500px; border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); background: var(--bg-menu); overflow: hidden; touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
.dash-stage[hidden] { display: none; }
.dash-stage.is-drag { cursor: grabbing; }
.dash-stage:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
.dash-stage > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.dash-stage > .scene-grid { height: 55%; }
.dash-status { position: absolute; left: 0; right: 0; bottom: var(--space-4); text-align: center; font-size: var(--font-size-2); color: var(--text-secondary); }
.dash[data-ready] .dash-stage > .scene-grid, .dash[data-ready] .dash-status { display: none; }
/* подписи фигур: число всегда рядом с фигурой; появляются последними */
.dash-labels { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity var(--motion-normal) var(--motion-ease-fade); }
.dash-labels.is-in { opacity: 1; }
.dl { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; border-radius: var(--radius-sm); border: var(--border-thin) solid var(--border-divider); background: var(--bg-card); color: var(--text-primary); font-family: var(--font-mono); font-size: 12px; line-height: 1.5; white-space: nowrap; text-decoration: none; pointer-events: auto; will-change: transform; transition: opacity var(--motion-rise) var(--motion-ease-fade), background-color var(--motion-rise) var(--motion-ease-rise), color var(--motion-rise) var(--motion-ease-rise); }
.dl b { font-weight: 600; }
.dl span { font-family: var(--font-text); color: var(--text-secondary); }
.dl small { font-size: 11px; color: var(--state-success); }
.dl.is-goal { display: inline-grid; justify-items: center; gap: 0; grid-auto-flow: row; line-height: 1.3; padding: 2px 8px; }
.dl.is-goal b { font-size: 13px; }
.dl.is-stack { gap: 6px; padding: 2px 8px; }
.dl.is-over { color: var(--state-error); border-color: var(--state-error); }
/* ушедшие под землю карточки: подпись пунктиром, счёт — в подписи стопки */
.dl.is-under { border-style: dashed; background: transparent; }
.dl .dl-under { color: var(--text-secondary); }
/* прирост за неделю: при наведении — пояснение */
.dl [data-tip] { position: relative; cursor: help; }
.dl [data-tip]:hover::after, .dl:focus-visible [data-tip]::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); padding: 4px 8px; border-radius: var(--radius-sm); background: var(--text-primary); color: var(--bg-card); font-family: var(--font-text); font-size: 12px; white-space: nowrap; pointer-events: none; z-index: 5; }
/* полоса прокрутки поездов: справа от путей, ползунок — доля видимых целей */
.dash-scroll { position: absolute; left: 0; top: 0; z-index: 2; width: 10px; border-radius: 5px; background: var(--bg-selection); cursor: pointer; touch-action: none; }
.dash-scroll[hidden] { display: none; }
.dash-scroll > i { position: absolute; left: 0; right: 0; border-radius: 5px; background: var(--border-hover); cursor: grab; }
.dash-scroll:hover > i, .dash-scroll:focus-visible > i { background: var(--action-primary); }
.dash-scroll:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
.dl.is-measure { color: var(--state-error); border-color: var(--state-error); }
.dl.is-measure small { color: var(--text-secondary); }
.dl.is-tick.is-covered { visibility: hidden; }
/* телефон: название цели — в просвете между своим путём и задним, поезд не закрывает */
.dl .dl-goal { font-family: var(--font-text); color: var(--text-secondary); }
.dl.is-goal-bar.is-stacked { display: inline-grid; grid-template-columns: auto auto; column-gap: 4px; row-gap: 0; line-height: 1.25; }
.dl.is-goal-bar.is-stacked .dl-goal { grid-column: 1 / -1; font-size: 11px; }
.dl.is-tick { opacity: .6;  font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); transform-origin: 50% 0; }
.dl-ico { display: inline-grid; place-items: center; flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--state-error); color: var(--bg-card); font-family: var(--font-text); font-style: normal; font-weight: 700; font-size: 10px; line-height: 1; }
.dl.is-row { background: transparent; border-color: transparent; color: var(--text-secondary); font-family: var(--font-text); pointer-events: none; padding: 0; }
.dl.is-hot { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); z-index: 2; }
.dl.is-hot span, .dl.is-hot small { color: inherit; }
.dl.is-dim { opacity: .2; }
.dl:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; }
/* телефон: подписи задач — только у выбранной; доля и название цели видны всегда */
.dash[data-mobile] .dl:not(.is-hot):not(.is-row):not(.is-goal-bar) { opacity: 0; pointer-events: none; }
/* подсказка у фигуры: название, значение, изменение */
.dash-tip { position: absolute; left: 0; top: 0; z-index: 3; display: grid; gap: 2px; max-width: 280px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); border: var(--border-thin) solid var(--border-divider); background: var(--bg-drawer); color: var(--text-primary); box-shadow: var(--elev-3); font-size: var(--font-size-2); pointer-events: none; }
.dash-tip[hidden] { display: none; }
.dash-tip b { display: inline-flex; gap: 6px; align-items: center; font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--font-size-3); text-wrap: pretty; }
.dash-tip .v { font-family: var(--font-mono); }
.dash-tip .c { color: var(--text-secondary); text-wrap: pretty; }
.dash-key { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; font-size: var(--font-size-2); color: var(--text-secondary); }
.dash-key[hidden] { display: none; }
.dash-key li { display: inline-flex; align-items: center; gap: 6px; }
.dk-scale { display: inline-flex; gap: 1px; }
.dk-scale i { width: 10px; height: 10px; border-radius: 2px; }
.dash-meta { font-size: var(--font-size-2); color: var(--text-secondary); }
.dash-meta a { color: var(--text-link); }
.dash-bar .chip:disabled { opacity: .45; cursor: default; }
.dash-flat { display: grid; gap: var(--space-3); }
.dash-flat[hidden], .dash-table[hidden] { display: none; }
.df-rows { display: grid; gap: var(--space-3); }
.df-row { display: grid; grid-template-columns: 12ch minmax(0, 1fr); gap: var(--space-3); align-items: start; }
.df-name { font-size: var(--font-size-2); color: var(--text-secondary); padding-top: 2px; }
.df-bars { display: grid; gap: var(--space-2); }
.df-bar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(80px, 240px) 3ch; gap: var(--space-3); align-items: center; color: var(--text-primary); text-decoration: none; font-size: var(--font-size-3); }
.df-bar:hover .df-t { text-decoration: underline; }
.df-bar.is-over { color: var(--state-error); }
.df-t { display: inline-flex; gap: 6px; align-items: center; min-width: 0; }
.df-fill { height: 10px; border-radius: 5px; background: linear-gradient(90deg, var(--c) var(--w), var(--bg-selection) var(--w)); }
.df-bar b { font-family: var(--font-mono); text-align: right; }
.df-goals { display: grid; gap: var(--space-3); }
.df-goal { display: grid; grid-template-columns: minmax(0, 1fr) minmax(200px, 560px) 6ch 16ch; gap: var(--space-3); align-items: center; color: var(--text-primary); text-decoration: none; font-size: var(--font-size-3); }
.df-goal small { color: var(--text-secondary); font-size: var(--font-size-2); }
.dash-table { display: grid; gap: var(--space-4); overflow-x: auto; overflow-y: hidden; }
.dt { width: 100%; border-collapse: collapse; font-size: var(--font-size-3); }
.dt caption { text-align: left; padding-bottom: var(--space-2); font-family: var(--font-heading); font-weight: var(--weight-heading); }
.dt th, .dt td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: var(--border-thin) solid var(--border-divider); }
.dt th { font-size: var(--font-size-2); font-weight: var(--weight-medium); color: var(--text-secondary); }
.dt .n { text-align: right; white-space: nowrap; }
.dt td.n { font-family: var(--font-mono); }
.dt tr.is-over td:first-child { color: var(--state-error); }
.dt a { color: var(--text-link); }
.dash .is-picked { background: var(--bg-selection); border-radius: var(--radius-sm); }
.dash tr.is-picked { border-radius: 0; }

/* ── Кольцо заставки: сущности по кругу, ход по кругу отмечается подсветкой ── */
.ring { position: relative; display: grid; place-items: center; width: 100%; min-height: 380px; }
.ring-track { position: relative; width: 340px; height: 340px; border-radius: 50%; border: var(--border-regular) solid var(--border-divider); }
.ring-track::before { content: ""; position: absolute; inset: -8px; border-radius: 50%; background: conic-gradient(from 0deg, transparent 0 70%, var(--action-primary) 86%, transparent 92%); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px)); animation: ring-turn var(--motion-loop-turn) var(--motion-ease-steady) infinite; opacity: .85; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
.ring-node { position: absolute; left: 50%; top: 50%; width: 116px; margin: -26px 0 0 -58px; display: grid; gap: 2px; justify-items: center; text-align: center; padding: 3px 4px; border-radius: var(--radius-sm); background: var(--bg-page); transform: translate(calc(cos(var(--a)) * 172px), calc(sin(var(--a)) * 172px)); }
.ring-node b { font-size: var(--font-size-3); font-weight: var(--weight-medium); }
.ring-node span { font-size: var(--font-size-1); color: var(--text-muted); }
.ring-node i { width: 12px; height: 12px; border-radius: 50%; background: var(--w, var(--entity-task)); box-shadow: 0 0 0 4px var(--bg-page); }
.ring-node[data-on] b { color: var(--action-primary); }
.ring-node[data-on] i { box-shadow: 0 0 0 4px var(--bg-page), 0 0 0 7px var(--bg-selection); }
.ring-core { display: grid; gap: var(--space-1); justify-items: center; text-align: center; max-width: 180px; }
.ring-core { background: var(--bg-page); padding: var(--space-2); border-radius: var(--radius-md); }
.ring-core b { font-family: var(--font-heading); font-weight: var(--weight-heading); font-size: var(--font-size-4); line-height: 1.3; }
.ring-core span { font-size: var(--font-size-2); color: var(--text-secondary); }

/* ── Как это работает: три карточки ── */
.steps { display: grid; gap: var(--gap-card); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step { background: var(--bg-card); border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--elev-1); display: grid; gap: var(--space-2); align-content: start; }
.step .step-n { font-family: var(--font-mono); font-size: var(--font-size-2); color: var(--text-muted); }
.step h3 { font-size: var(--font-size-5); }
.step p { font-size: var(--font-size-3); color: var(--text-secondary); }
.step svg { color: var(--action-primary); }

/* ── Приглашение ── */
.invite { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); background: var(--bg-card); box-shadow: var(--elev-1); }
.invite h2 { font-size: var(--font-size-6); }
.invite p { font-size: var(--font-size-3); color: var(--text-secondary); max-width: 62ch; }
.invite .btn-row { margin-top: var(--space-1); }

/* ── Плашки внизу страницы: счётчики, язык ── */
.bottom-plaques { position: sticky; bottom: 0; display: grid; gap: var(--space-2); padding: var(--space-3) var(--space-5) var(--space-4); }
.plaque { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--bg-drawer); border: var(--border-thin) solid var(--border-divider); box-shadow: var(--elev-4); font-size: var(--font-size-3); }
.plaque p { color: var(--text-secondary); }
.plaque b { display: block; font-weight: var(--weight-medium); color: var(--text-primary); }
.plaque .btn-row { flex-wrap: nowrap; }
.plaque p a { color: var(--text-link); }
/* Кнопки плашек отличаются от рабочих: тушь вместо синего и тонкий контур — это вопрос к человеку, а не действие в платформе.
   «Принять» и «Отклонить всё» одного вида: отказ не менее заметен, чем согласие */
.plaque .btn { box-shadow: none; background-image: none; }
.plaque .btn::before, .plaque .btn::after { display: none; }
.plaque .btn-primary { background: var(--text-primary); border-color: var(--text-primary); color: var(--bg-card); }
.plaque .btn-primary:hover { background: var(--text-secondary); border-color: var(--text-secondary); }
.plaque .btn-secondary { background: transparent; border: var(--border-regular) solid var(--text-primary); color: var(--text-primary); }
.plaque .btn-secondary:hover { background: var(--bg-selection); }
/* Настройки cookie: раскрываются под плашкой на всю её ширину */
.ck-panel { grid-column: 1 / -1; display: grid; gap: var(--space-3); padding-top: var(--space-3); border-top: var(--border-thin) solid var(--border-divider); }
.ck-panel[hidden] { display: none; }
.ck-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; }
.ck-row .toggle { width: 44px; height: 24px; min-width: 44px; min-height: 0; } /* переключатель cookie — 44 × 24 на столе и на телефоне */
.ck-panel .btn-row { justify-content: flex-end; }

/* ── Групповая плашка встречи ── */
.group-hint { display: grid; gap: var(--space-3); }
.group-hint .hint-rows { display: grid; gap: var(--space-2); }
.hint-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: start; padding: var(--space-2); border-radius: var(--radius-sm); background: var(--bg-card); border: var(--border-thin) solid var(--border-divider); }
.hint-row .why { font-size: var(--font-size-2); color: var(--text-muted); }
.hint-row[aria-disabled="true"] { opacity: .55; }

/* ── Доля достижения цели: три вида показа ── */
.goal-progress { display: grid; gap: var(--space-3); }
.gp-view { display: none; }
[data-goal-view="bar"] .gp-view.gp-bar, [data-goal-view="bars"] .gp-view.gp-bars, [data-goal-view="ring"] .gp-view.gp-ring { display: grid; gap: var(--space-2); }
.bar { position: relative; height: 12px; border-radius: var(--radius-round); background: var(--bg-selection); overflow: hidden; }
.bar > i { position: absolute; inset: 0 auto 0 0; width: var(--p, 45%); background: var(--action-primary); border-radius: inherit; }
.bar-label { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--font-size-3); color: var(--text-secondary); }
.bar-label b { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-primary); white-space: nowrap; }
.gp-bars .bar > i { background: var(--w, var(--action-primary)); }
/* Доля цели в карточке перечня: шкала от синего к зелёному с делениями через 10 %; непройденная часть закрыта полосой дорожки */
/* ширина 560: на деление приходится 56 точек, между соседними подписями не меньше двадцати */
.goal-scale { display: grid; gap: 2px; max-width: 560px; padding-right: 20px; }
.goal-bar { height: 10px; background: linear-gradient(90deg, var(--action-primary), var(--state-success)); }
.goal-bar > i { left: var(--p); right: 0; width: auto; border-radius: 0; background: var(--bg-selection); }
.goal-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), var(--bg-card) calc(10% - 1px) 10%); pointer-events: none; }
.goal-ticks { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); font-family: var(--font-mono); font-size: var(--font-size-1); color: var(--text-muted); }
/* подпись стоит по середине своего деления; у «100%» место справа оставлено отступом шкалы */
.goal-ticks span { text-align: center; transform: translateX(50%); white-space: nowrap; }
/* Голова робота у подсказки: от неё расходятся волны, на 60 % тише волн кнопки «Пример» */
.hint-bot { position: relative; display: inline-grid; place-items: center; flex: none; border-radius: 50%; }
.hint-bot::before, .hint-bot::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: var(--border-regular) solid var(--action-primary); pointer-events: none; animation: bot-wave var(--motion-loop-wave) var(--motion-ease) infinite; }
.hint-bot::after { animation-delay: calc(var(--motion-loop-wave) / 2); }
@keyframes bot-wave { from { opacity: .28; transform: scale(1); } to { opacity: 0; transform: scale(1.9); } }
/* Надпись-муляж: появляется над нижними плашками при щелчке по карточке */
/* закреплена к окну браузера: рамка показа держит закреплённое внутри себя, поэтому надпись лежит вне её */
.demo-toast { position: fixed; left: var(--tl, 50%); bottom: 24px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: min(60ch, var(--tw, calc(100vw - 32px))); box-sizing: border-box; overflow-wrap: anywhere; color: var(--text-primary); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); background: var(--state-warning-bg); border: var(--border-strong) solid var(--entity-project); box-shadow: var(--elev-4); font-size: var(--font-size-3); text-align: center; text-wrap: pretty; }
/* тёплая рамка: янтарь проекта по краю, фон предупреждения; текст — основная тушь, на этом фоне контраст выше 4,5 : 1 */
.demo-toast a { color: var(--text-link); }
/* Появление «джином»: из точки щелчка — узкой струйкой, затем расправляется на своём месте и чуть отскакивает */
.demo-toast[data-genie] { transform-origin: 50% 50%; animation: genie var(--motion-count) var(--motion-ease-enter) both; }
@keyframes genie {
  0% { opacity: 0; transform: translate(calc(-50% + var(--gx, 0px)), var(--gy, 0px)) scale(.04, .02); }
  18% { opacity: 1; transform: translate(calc(-50% + var(--gx, 0px) * .8), calc(var(--gy, 0px) * .8)) scale(.08, .35); }
  55% { transform: translate(calc(-50% + var(--gx, 0px) * .12), calc(var(--gy, 0px) * .12)) scale(.55, 1.12); }
  78% { transform: translate(-50%, 0) scale(1.05, .96); }
  100% { opacity: 1; transform: translate(-50%, 0) scale(1); }
}
.demo-toast[data-ft-out] { opacity: 0; transition: opacity var(--motion-count) var(--motion-ease-exit); }
@media (prefers-reduced-motion: reduce) { .demo-toast[data-genie] { animation-name: ft-fade; transform: translateX(-50%); } }
.gp-ring { justify-items: start; }
.ring-chart { position: relative; width: 132px; height: 132px; border-radius: 50%; background: conic-gradient(var(--action-primary) calc(var(--p) * 1%), var(--bg-selection) 0); display: grid; place-items: center; }
.ring-chart::after { content: ""; position: absolute; inset: 14px; border-radius: 50%; background: var(--bg-card); }
.ring-chart b { position: relative; font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-size-6); }

/* ── Признаки достижения и план ── */
.checklist { display: grid; gap: var(--space-2); }
.checklist .check { align-items: start; font-size: var(--font-size-3); }
.checklist [aria-checked="true"] .check-text { color: var(--text-muted); text-decoration: line-through; }
.plan { display: grid; gap: var(--space-2); }
.plan-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--bg-card); border: var(--border-thin) solid var(--border-divider); font-size: var(--font-size-3); }
.plan-step .by { font-size: var(--font-size-2); color: var(--text-muted); }
.plan-step[data-done] .step-name { color: var(--text-muted); text-decoration: line-through; }

/* ── Связи ── */
.links-grid { display: grid; gap: var(--gap-card); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.link-card { background: var(--bg-card); border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); box-shadow: var(--elev-1); display: grid; gap: var(--space-1); }
.link-card .label { font-size: var(--font-size-1); text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); }
.link-card a { font-size: var(--font-size-3); }

/* ── Запись встречи ── */
.rec { display: grid; gap: var(--space-5); justify-items: center; padding: var(--space-6) var(--space-4); text-align: center; }
.rec-state { display: none; gap: var(--space-4); justify-items: center; }
[data-rec="ready"] .rec-state[data-state="ready"], [data-rec="run"] .rec-state[data-state="run"], [data-rec="work"] .rec-state[data-state="work"] { display: grid; }
.rec-btn { width: 132px; height: 132px; border-radius: 50%; border: 0; background: var(--action-danger); color: var(--action-primary-text); font-family: var(--font-mono); font-size: var(--font-size-7); font-weight: var(--weight-bold); letter-spacing: .04em; cursor: pointer; box-shadow: var(--elev-2); }
.rec-btn:hover { background: var(--action-danger-hover); box-shadow: var(--elev-3); }
.rec-btn:active:not(:disabled) { box-shadow: var(--elev-0); transform: scale(.92); transition-duration: var(--motion-fall); transition-timing-function: var(--motion-ease-fall); }
.rec-btn:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 3px; }
.rec-btn.is-stop { background: var(--action-secondary); color: var(--text-primary); border: var(--border-regular) solid var(--border-default); font-size: var(--font-size-6); }
.rec-btn:disabled { opacity: .45; cursor: default; box-shadow: none; }
.rec-clock { font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: var(--font-size-7); }
.rec-note { font-size: var(--font-size-3); color: var(--text-secondary); max-width: 52ch; }
.level { display: flex; gap: 4px; align-items: flex-end; height: 56px; }
.level i { position: relative; width: 6px; height: 100%; border-radius: var(--radius-sm); background: var(--bg-selection); overflow: hidden; }
.level i::before { content: ""; position: absolute; inset: auto 0 0 0; height: 100%; background: var(--action-primary); transform-origin: bottom; transform: scaleY(.2); animation: level-wave var(--motion-loop-level) var(--motion-ease-loop) infinite; }
.level i:nth-child(2n)::before { animation-duration: calc(var(--motion-loop-level) * .82); animation-delay: calc(var(--motion-loop-level) * -.18); }
.level i:nth-child(3n)::before { animation-duration: calc(var(--motion-loop-level) * 1.27); animation-delay: calc(var(--motion-loop-level) * -.45); }
.level i:nth-child(5n)::before { animation-duration: calc(var(--motion-loop-level) * .64); animation-delay: calc(var(--motion-loop-level) * -.73); }
@keyframes level-wave { 0%, 100% { transform: scaleY(.12); } 50% { transform: scaleY(.9); } }
.rec-steps { display: grid; gap: var(--space-2); width: min(520px, 100%); text-align: left; }
.rec-step { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: var(--space-3); align-items: center; font-size: var(--font-size-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); border: var(--border-thin) solid var(--border-divider); background: var(--bg-card); }
.rec-step .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--text-secondary); }
.rec-step[data-now] { border-color: var(--border-focus); background: var(--bg-selection); }
.rec-step[data-done] .rec-step-name { color: var(--text-muted); }

/* ── Пустое место и заготовки ── */
.empty { display: grid; gap: var(--space-3); justify-items: start; padding: var(--space-5); border: var(--border-thin) dashed var(--border-divider); border-radius: var(--radius-md); }
.empty p { font-size: var(--font-size-3); color: var(--text-secondary); }

/* ══ Телефонный вид: определяется шириной рамки ══ */
@container (max-width: 767px) {
  .app { --control-height: 44px; }
  .stats-drawer { width: 100%; }
  .app-top { padding: 0 var(--space-3); gap: var(--space-2); }
  .app-top .logo { display: none; }
  .dash-slot .scene-grid { display: none; }
  /* 44 + 32 + 190 + кошелёк + значок в 390 точек не помещаются: плашка оплаты уходит строкой в рабочую область */
  .app-top .pay-due { display: none; }
  .pay-note { display: flex; }
  .app-top .wallet { display: inline-flex; align-items: center; min-height: 44px; }
  .app-top .avatar { display: inline-grid; place-items: center; width: 44px; height: 44px; min-height: 44px; border-radius: var(--radius-round); }
  .app-top .lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
  .app-top .app-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: var(--space-2); }
  .app-burger { display: inline-flex; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  /* меню шторкой на всю ширину: положение считается от окна платформы, не от окна браузера */
  .app-menu { position: absolute; top: 70px; left: 0; right: 0; z-index: 20; display: none; border-right: 0; border-bottom: var(--border-thin) solid var(--border-divider); box-shadow: var(--elev-3); background: var(--bg-drawer); }
  .app[data-menu="open"] .app-menu { display: grid; }
  .app-work { padding: var(--space-4) var(--space-3); }
  .search-bar { margin: calc(var(--space-4) * -1) calc(var(--space-3) * -1) 0; padding-inline: var(--space-3); }
  /* раздел 14 задания: ни одна область нажатия на телефоне не мельче 44 точек */
  .btn { min-height: 44px; }
  .btn-sm { min-height: 44px; }
  .chip { min-height: 44px; min-width: 44px; justify-content: center; }
  .app-burger { width: 44px; height: 44px; flex: none; }
  .icon-btn { width: 44px; height: 44px; }
  [data-direction="a"] .check { min-height: 44px; }
  [data-direction="a"] .check-box { width: 28px; height: 28px; }
  /* отметка без подписи: ширину даёт только квадрат, поэтому область нажатия задаётся всем таким отметкам разом */
  [data-direction="a"] .check:not(:has(.check-text)) { min-width: 44px; justify-content: center; }
  .row-card > .check { align-self: start; }
  /* строчные ссылки-действия рабочей области и подвала — та же норма 44 */
  .app-work a:not(.btn), .pay-note a { display: inline-flex; align-items: center; min-height: 44px; }
  .slider input[type="range"] { height: 44px; }
  /* всплывающая подсказка в шапке прижата к правому краю: рамку она не перерастает */
  .app-top .uf-tip-body { right: 0; left: auto; transform: none; }
  .metrics, .scene-nums { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .steps, .links-grid { grid-template-columns: minmax(0, 1fr); }
  /* строка в две линии: ползунки и связи переезжают внутрь карточки */
  .row-card { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
  .row-side, .row-sliders, .row-acts { grid-column: 2; justify-items: start; width: 100%; }
  .row-acts { opacity: 1; justify-content: flex-start; }
  .phone-hide { display: none; }
  /* на телефоне у узлов остаются только названия: подписи и середина иначе наезжают друг на друга */
  .ring-track { width: 240px; height: 240px; }
  .ring-node { width: 92px; margin: -14px 0 0 -46px; transform: translate(calc(cos(var(--a)) * 120px), calc(sin(var(--a)) * 120px)); }
  .ring-node span { display: none; }
  .ring-node b { font-size: var(--font-size-2); }
  .ring-core { max-width: 124px; padding: var(--space-1); }
  .ring-core b { font-size: var(--font-size-3); }
  .ring-core span { display: none; }
  .ring { min-height: 300px; }
  .pz-hero .ring { padding-block: 18px; }
  .ring-core { max-width: 150px; }
  .ring-core .intro-start .btn { min-height: 44px; padding-inline: var(--space-2); font-size: var(--font-size-2); }
  .screen-grid { grid-template-columns: minmax(0, 1fr); }
  .app[data-screen-now="home"] .app-menu { height: auto; min-height: 0; }
  .dash-slot { position: static; min-height: 260px; }
  .scene-slot { min-height: 260px; }
  .dash-stage { height: 520px; }
  /* телефон: видна только действующая зона кнопок и переключатель; кнопки не мельче 44 точек */
  /* телефон: вверху поля — сцена, ниже — кнопки действующего набора, в самом низу — «Туда-сюда»; всё по центру */
  .dash-keys { left: var(--space-2); right: var(--space-2); top: auto; bottom: var(--space-2); gap: var(--space-2); }
  .dash-zone.is-off { display: none; }
  .dash-zone { flex: 1 1 100%; order: 1; padding: var(--space-2); }
  /* телефон: переключатель посередине, на 30 % крупнее; слева и справа — названия наборов, они тоже переключают */
  .dash-range { order: 2; flex: 1 1 100%; display: flex; gap: var(--space-2); align-items: center; justify-content: center; }
  .dash-range .dash-range-name { display: none; }
  .dash-range .dash-range-t { display: inline-flex; align-items: center; min-height: 44px; }
  .dash-range .toggle { width: 63px; height: 34px; }
  .dash-range .toggle::before { content: ""; position: absolute; inset: -5px 0; } /* область нажатия 63 × 44, рисунок прежний */
  .dash-range .toggle::after { top: 4px; left: 4px; width: 26px; height: 26px; }
  .dash-range .toggle[aria-checked="true"]::after { transform: translateX(29px); }
  /* кнопки плотнее: краткосрочные — в один ряд, дальние — в два; заголовок пьедестала не нужен — названия у переключателя */
  .dash-zone-keys { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); }
  .dash-zone > .dash-zone-t { display: none; }
  .dash-zone { padding: var(--space-1); }
  .dash-key-btn { min-height: 44px; min-width: 68px; padding: 0 var(--space-2); font-size: 12px; }
  .dash-scroll { width: 16px; border-radius: 8px; }
  .dash-scroll > i { border-radius: 8px; }
  .dash[data-mobile] .dl.is-tick:not(.is-major) { display: none; }
  .scene-nums.is-five { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ws-wide { padding: var(--space-4) var(--space-3) var(--space-5); }
  .ml-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-2); }
  .df-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .df-bar { grid-template-columns: minmax(0, 1fr) 3ch; row-gap: var(--space-1); }
  .df-bar .df-fill { grid-column: 1 / -1; grid-row: 2; }
  .df-goal { grid-template-columns: minmax(0, 1fr) auto; }
  .df-goal > span, .df-goal .goal-scale { grid-column: 1 / -1; }
  .scene-slot .scene-mark { position: static; inset: auto; max-width: none; text-align: left; }
  .rec-btn { width: 116px; height: 116px; }
  .plaque { grid-template-columns: minmax(0, 1fr); }
  .plaque .btn-row { flex-wrap: wrap; }
  .ck-panel .btn-row { justify-content: stretch; }
  .ck-row .toggle { width: 44px; height: 24px; min-height: 0; }
  .ck-row .toggle::before { content: ""; position: absolute; inset: -10px 0; } /* область нажатия 44 × 44, рисунок прежний — как у .dash-range .toggle */
  .bottom-plaques { padding: var(--space-3); }
  .app-foot { gap: var(--space-1) var(--space-4); }
  .app-foot a { display: inline-flex; align-items: center; min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .demo-badge::before, .demo-badge::after, .hint-bot::before, .hint-bot::after { animation: none; opacity: 0; }
  .ring-track::before { animation: none; }
  /* полоса звука при записи остаётся — раздел 10 */
  .level i::before { transform: scaleY(.45); }
}

/* ══ Объёмные дашборды a/js/dash3d.js: сводка раздела, визуализация связей, расход и пределы ══ */
.dash-stage.d3-stage { height: var(--d3-h, 460px); }
.dash3d .chip:disabled { opacity: .45; cursor: default; }
.dash3d .dl small { color: var(--text-secondary); }
.dl .dl-ghost { border-top: 1px dashed var(--border-default); padding-top: 1px; }
.dl.is-ghost { background: transparent; border-style: dashed; color: var(--text-secondary); }
.dl.is-muted, .dl.is-minor { color: var(--text-secondary); font-size: 11px; }
.dl.is-stackv { display: inline-grid; justify-items: center; gap: 0; line-height: 1.2; padding: 1px 5px; }
.dl.is-limit { color: var(--state-error); border-color: var(--state-error); }
.dl.is-on-fill { background: var(--bg-card); }
.dl.is-compact { display: inline-grid; justify-items: center; gap: 0; line-height: 1.15; padding: 1px 4px; font-size: 10px; }
.dl.is-compact span { max-width: 9ch; overflow: hidden; text-overflow: ellipsis; }
.df-bar.is-ghost { color: var(--text-secondary); }
.df-tree { margin: 0; padding-left: var(--space-4); display: grid; gap: var(--space-2); font-size: var(--font-size-3); }
.df-tree ul { margin: var(--space-1) 0 0; padding-left: var(--space-4); display: grid; gap: 2px; color: var(--text-secondary); }
.goal-bar.is-limit { background: linear-gradient(90deg, var(--state-success), var(--state-error)); }
/* шторка «Статистика»: сцена сводки раздела во всю ширину шторки */
.stats-drawer .dash3d { gap: var(--space-2); }
.stats-drawer .dash-bar { gap: var(--space-2); justify-content: center; }
.stats-drawer .chip-row { gap: 4px; justify-content: center; }
.stats-drawer .chip { padding-inline: 8px; font-size: 12px; }
.stats-drawer .dash-key { flex-direction: column; gap: 2px; }
.stats-drawer .dt { font-size: var(--font-size-2); }
.stats-drawer .dt th, .stats-drawer .dt td { padding: 4px 6px; }
.stats-drawer .df-row { grid-template-columns: minmax(0, 1fr); gap: 2px; }
/* число справа — по своему содержимому («42 мин», «1,4 ГБ»), не переносится; прежние 3ch обрезали его */
.stats-drawer .df-bar { grid-template-columns: minmax(0, 1fr) max-content; }
.stats-drawer .df-bar > b { white-space: nowrap; }
.stats-drawer .df-bar .df-fill { grid-column: 1 / -1; grid-row: 2; }
/* кошелёк: остаток крупно, кнопка, цена; ниже — сцена расхода */
.wallet-zone { display: grid; gap: var(--space-4); padding: var(--space-5); border: var(--border-thin) solid var(--border-divider); border-radius: var(--radius-md); background: var(--bg-card); }
.wallet-top { display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); align-items: center; }
.wallet-sum { display: grid; gap: 2px; }
.wallet-sum span { font-size: var(--font-size-2); color: var(--text-secondary); }
.wallet-sum b { font-size: var(--font-size-7); line-height: 1.1; }
.wallet-top .pz-note { flex: 1 1 280px; }
@container (max-width: 767px) {
  .dash-stage.d3-stage { height: var(--d3-hp, 440px); }
  .wallet-zone { padding: var(--space-3); }
}

/* перечень задач: промежуток и отбор — одной строкой, на узком виде переносятся */
.filters-line { display: flex; flex-wrap: nowrap; gap: var(--space-3) var(--space-4); align-items: center; }
/* строка не шире колонки: зона не растягивается под неё, поля отбора делят оставшееся место */
.app-work > .pz, .filters-line { min-width: 0; max-width: 100%; }
.filters-line > .filters { flex: 0 0 auto; min-width: 0; flex-wrap: nowrap; }
.filters-line > .filters + .filters { flex: 1 1 0; }
.filters-line .chip-row { flex-wrap: nowrap; }
.filters-line .chip { padding-inline: 10px; white-space: nowrap; }
.filters-line .select { flex: 1 1 0; width: 0; min-width: 88px; max-width: 150px; }
@container (max-width: 767px) {
  .filters-line, .filters-line > .filters, .filters-line .chip-row { flex-wrap: wrap; }
  .filters-line .select { max-width: none; }
}

/* свёрнутая подсказка: одна строка; раскрытая — как обычная */
.hint.is-fold:not([data-open]) > :not(.hint-fold) { display: none; }
.hint-fold { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-width: 0; border: 0; background: none; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.hint-fold .hint-line { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hint.is-fold[data-open] .hint-line { white-space: normal; }
.hint-fold:focus-visible { outline: var(--border-strong) solid var(--border-focus); outline-offset: 2px; border-radius: var(--radius-sm); }

/* перечень задач: все кнопки промежутка и поля отбора — одинаковые ячейки одной сетки */
.filters-line { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: var(--space-2); }
.filters-line > .filters, .filters-line .chip-row { display: contents; }
.filters-line .chip, .filters-line .select { width: 100%; min-width: 0; max-width: none; height: var(--control-height); box-sizing: border-box; justify-content: center; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding-inline: 8px; }
@container (max-width: 767px) {
  .filters-line { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* перечень задач на телефоне: кнопки поиска во всю ширину, отбор — в расхлопе «Фильтры», у задачи только название, щелчок раскрывает остальное */
.filters-fold { display: grid; gap: var(--space-2); min-width: 0; }
.filters-toggle { display: none; }
@container (max-width: 767px) {
  /* поиск во всю ширину, под ним «Фильтры», «Статистика», «Создать задачу» одной строкой */
  .search-bar:has([data-stats-open]) > .search-input { flex: 1 1 100%; }
  .search-bar:has([data-stats-open]) > .btn { flex: 1 1 auto; min-width: 0; justify-content: center; gap: var(--space-1); padding-inline: var(--space-2); white-space: nowrap; }
  .filters-toggle { display: inline-flex; }
  .filters-chev { flex: 0 0 auto; width: 8px; height: 8px; border-right: var(--border-strong) solid currentColor; border-bottom: var(--border-strong) solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform var(--motion-rise) var(--motion-ease-rise); }
  [data-filters][data-open] .filters-chev { transform: translateY(2px) rotate(-135deg); }
  [data-filters]:not([data-open]) .filters-fold { display: none; }
  .tl-rows .row-card { cursor: pointer; }
  .tl-rows .row-card:not([data-open]) .card-meta, .tl-rows .row-card:not([data-open]) .row-sliders, .tl-rows .row-card:not([data-open]) .row-acts { display: none; }
  .tl-rows .row-card:not([data-open]) { align-items: center; }
  .tl-rows .row-card:not([data-open]) > .check { align-self: center; }
  .tl-rows .row-card[data-open] .card-meta, .tl-rows .row-card[data-open] .row-sliders, .tl-rows .row-card[data-open] .row-acts { animation: row-open var(--motion-expand) var(--motion-ease-enter) both; }
}
@keyframes row-open { from { opacity: 0; } to { opacity: 1; } }

/* визуализация связей: длинное название (больше 12 знаков) переносится по словам, число — рядом */
.dl.is-wrap { white-space: normal; }
.dl.is-wrap span, .dl.is-compact.is-wrap span { display: block; max-width: 13ch; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: normal; text-align: center; line-height: 1.2; text-wrap: balance; }

/* плоский вид в узком месте (колонка сводки, шторка): подпись над шкалой, число справа; шкала — во всю ширину своей строкой */
.dash-flat { container-type: inline-size; }
@container (max-width: 560px) {
  .df-row { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); }
  .df-bar { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .df-bar .df-t { min-width: 0; overflow-wrap: anywhere; }
  .df-bar .df-fill { grid-column: 1 / -1; grid-row: 2; }
  .df-goal { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-1); }
  .df-goal > span { grid-column: 1; grid-row: 1; }
  .df-goal > b { grid-column: 2; grid-row: 1; }
  .df-goal .goal-scale { grid-column: 1 / -1; grid-row: 2; }
  .df-goal > small { grid-column: 1 / -1; grid-row: 3; }
  .df-goal .goal-ticks span:nth-child(odd) { visibility: hidden; }
}

/* подпись сцены без места рядом с фигурой: только число; выноска к фигуре, если подпись отведена в свободное место */
.dl.is-num > span, .dl.is-num > small { display: none; }
.dl-leads { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.dl-leads path { fill: none; stroke: var(--text-muted); stroke-width: 1; }

/* ══ Задачи — тонкие плашки: название и отметка «выполнено»; первый щелчок раскрывает сведения ══ */
.row-card[data-task], .row-card[data-task-row] { cursor: pointer; }
.row-card[data-task]:not([data-open]), .row-card[data-task-row]:not([data-open]) { padding-block: var(--space-2); align-items: center; }
.row-card[data-task]:not([data-open]) > .check, .row-card[data-task-row]:not([data-open]) > .check { align-self: center; }
.row-card[data-task]:not([data-open]) .card-meta, .row-card[data-task]:not([data-open]) .row-sliders, .row-card[data-task]:not([data-open]) .row-acts, .row-card[data-task]:not([data-open]) .row-side,
.row-card[data-task-row]:not([data-open]) .card-meta, .row-card[data-task-row]:not([data-open]) .row-side { display: none; }
.row-card[data-task]:not([data-open]) .card-body, .row-card[data-task-row]:not([data-open]) .card-body { gap: 0; }
.row-card[data-task][data-open] .card-meta, .row-card[data-task][data-open] .row-sliders, .row-card[data-task][data-open] .row-acts,
.row-card[data-task-row][data-open] .card-meta, .row-card[data-task-row][data-open] .row-side { animation: row-open var(--motion-expand) var(--motion-ease-enter) both; }
.row-card[data-task-row] > .check { align-self: start; }
/* сведения строки проявляются без сдвига — остаются и при уменьшенном движении */

/* полоса показа: вид устройства и тема одной группой, переносятся вместе */
.rv-ctl { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }

/* ══ Планшетный вид: планшет лёжа, 1180 точек при соотношении 1,45 ══ */
.frame[data-view="tablet"] { width: 1180px; }
.frame[data-view="tablet"] .app { min-height: 814px; }
@container (min-width: 768px) and (max-width: 1199px) {
  /* меню шторкой слева, рабочая область во всю ширину; сводка под перечнем — правило pages.css */
  .app:not([data-guest="intro"]) .app-burger { display: inline-flex; }
  .app-body { grid-template-columns: minmax(0, 1fr); }
  .app-body > .app-menu, .app-body:has(> .ws-wide) > .app-menu, .app[data-screen-now="home"] .app-menu { position: absolute; top: calc(70px + var(--gl-thin)); left: 0; bottom: 0; z-index: 20; width: 300px; height: auto; min-height: 0; display: none; align-content: start; overflow-y: auto; background: var(--bg-drawer); box-shadow: var(--elev-3); }
  .app[data-menu="open"] .app-menu { display: grid; animation: menu-in var(--motion-drawer) var(--motion-ease-enter) both; }
  .app[data-guest="open"] .app-menu { animation: none; }
  .app[data-guest="open"][data-menu="open"] .app-menu { animation: menu-in var(--motion-drawer) var(--motion-ease-enter) both; }
  .scene-nums.is-five { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@keyframes menu-in { from { opacity: 0; transform: translateX(-16px); } to { opacity: 1; transform: none; } }


/* рамка показа держит свою ширину (1440, 1180, 390): под размер окна её уменьшает transform, а не сжатие во flex */
.rv-stage > .frame { flex: none; }

/* визуализация связей на телефоне: поле выше, подписи только по касанию, подсказка об этом — под полем */
@container (max-width: 767px) {
  [data-dash3d="links"] .dash-stage.d3-stage { height: 560px; }
  [data-dash3d="links"].is-tap-labels .dash-key::before { content: "Коснитесь фигуры — появятся сведения о ней, двойное касание — переход"; display: block; width: 100%; color: var(--text-secondary); }
}

/* плоский вид в узкой колонке: число справа по своему содержимому и не переносится, полоса не выталкивает строку за край */
@container (max-width: 560px) {
  .df-bar { grid-template-columns: minmax(0, 1fr) max-content; min-width: 0; max-width: 100%; }
  .df-bar > b { white-space: nowrap; }
  .df-bar .df-fill { max-width: 100%; }
  .df-row, .df-bars { min-width: 0; }
}

/* таблица на узком поле (телефон, шторка): строка — карточка, у каждого числа подпись столбца; вбок ничего не уходит */
.dash-table { container-type: inline-size; }
@container (max-width: 560px) {
  .dash-table .dt, .dash-table .dt tbody, .dash-table .dt tfoot, .dash-table .dt tr, .dash-table .dt td, .dash-table .dt tbody th, .dash-table .dt tfoot th { display: block; width: 100%; }
  .dash-table .dt caption { display: block; }
  .dash-table .dt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .dash-table .dt tr { display: grid; gap: 2px; padding: var(--space-2) 0; border-bottom: var(--border-thin) solid var(--border-divider); }
  .dash-table .dt td, .dash-table .dt tbody th, .dash-table .dt tfoot th { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-3); padding: 0; border: 0; text-align: right; white-space: normal; overflow-wrap: anywhere; min-width: 0; }
  .dash-table .dt td::before, .dash-table .dt tbody th::before, .dash-table .dt tfoot th::before { content: attr(data-label); flex: none; max-width: 50%; text-align: left; font-family: var(--font-body); font-size: var(--font-size-2); color: var(--text-secondary); }
  .dash-table .dt tr > :first-child { justify-content: flex-start; text-align: left; font-weight: var(--weight-medium); }
  .dash-table .dt tr > :first-child::before, .dash-table .dt td:not([data-label])::before { content: none; }
}

/* ══ Движение страниц по приложению Л, разделы 3–8 · сдержанный характер, решение № 107 ══
   Длительности и кривые — только переменные --motion-*. Движутся transform и opacity; обводка (stroke-dashoffset) и дыхание тени
   раскладку не трогают — их велит приложение. Раскадровка с файлами и классами — guidelines/motion.html. */
@keyframes ft-fade { from { opacity: 0; } }
@keyframes ft-up { from { opacity: 0; transform: translateY(12px); } }
@keyframes ft-down { from { opacity: 0; transform: translateY(-8px); } }
@keyframes ft-grow-x { from { transform: scaleX(0); } }
@keyframes ft-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes ft-breath-rec { 50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--action-danger) 22%, transparent); } }
@keyframes ft-breath-invite { 50% { box-shadow: 0 0 0 var(--border-thin) var(--action-primary-edge), var(--fb-shadow-hover), 0 0 32px -2px var(--fb-glow-primary); } }
/* появление по мере прокрутки: js/pages.js ставит data-ft-wait, IntersectionObserver меняет его на data-ft-in */
.steps[data-ft-wait] > *, .row-card[data-ft-wait] { opacity: 0; }
.steps[data-ft-in] > * { animation: ft-up var(--motion-hint) var(--motion-ease-enter) backwards; }
.steps[data-ft-in] > :nth-child(2) { animation-delay: var(--motion-stagger); }
.steps[data-ft-in] > :nth-child(3) { animation-delay: calc(var(--motion-stagger) * 2); }
.steps[data-ft-in] > :nth-child(4) { animation-delay: calc(var(--motion-stagger) * 3); }
.row-card[data-ft-in] { animation: ft-fade var(--motion-rise) var(--motion-ease-fade) backwards; animation-delay: calc(var(--ft-i, 0) * var(--motion-stagger-row)); }
.invite .btn-primary:hover:not(:disabled) { animation: ft-breath-invite var(--motion-loop-invite) var(--motion-ease-loop) infinite; }
/* перечень: смена страницы и отбора — проявление без сдвига; содержимое сменяет заготовку так же; плашка ошибки или пустоты — за --motion-swap */
.rows > .row-card { animation: ft-fade var(--motion-rise) var(--motion-ease-fade) backwards; }
[data-zone] > :not(.ui-sk-card):not(.zs) { animation: ft-fade var(--motion-rise) var(--motion-ease-fade) backwards; }
.zs, .block-error { animation: ft-fade var(--motion-swap) var(--motion-ease-fade) backwards; }
/* отметка «выполнено»: галочка обводкой, строка гаснет до 55 % и уходит вниз списка — js/pages.js, doneMotion */
.check.is-drawn .check-box .tick [data-ft-draw] { stroke-dasharray: 1; animation: ft-draw var(--motion-draw) var(--motion-ease-draw) backwards; }
.row-card[data-ft-sink] { opacity: .55; transition: opacity var(--motion-draw) var(--motion-ease-fade); }
/* плашка подсказки и групповая плашка — сверху; строки групповой — по очереди; снятая строка гаснет до 55 % */
.hint { animation: ft-down var(--motion-hint) var(--motion-ease-enter) backwards; }
.hint-rows > * { animation: ft-fade var(--motion-rise) var(--motion-ease-fade) backwards; }
.hint-rows > :nth-child(2) { animation-delay: var(--motion-stagger-row); }
.hint-rows > :nth-child(3) { animation-delay: calc(var(--motion-stagger-row) * 2); }
.hint-rows > :nth-child(4) { animation-delay: calc(var(--motion-stagger-row) * 3); }
.hint-rows > :nth-child(5) { animation-delay: calc(var(--motion-stagger-row) * 4); }
.hint-rows > :nth-child(n+6) { animation-delay: calc(var(--motion-stagger-row) * 5); }
[data-hint-row] { transition: opacity var(--motion-rise) var(--motion-ease-fade); }
[data-hint-row][aria-checked="false"] { opacity: .55; }
/* применение отмеченных: галочки перерисовываются по очереди */
.hint.is-accepted .hint-rows > [aria-checked="true"] .tick [data-ft-draw] { stroke-dasharray: 1; animation: ft-draw var(--motion-draw) var(--motion-ease-draw) backwards; }
.hint.is-accepted .hint-rows > :nth-child(2) .tick [data-ft-draw] { animation-delay: var(--motion-stagger-row); }
.hint.is-accepted .hint-rows > :nth-child(3) .tick [data-ft-draw] { animation-delay: calc(var(--motion-stagger-row) * 2); }
.hint.is-accepted .hint-rows > :nth-child(4) .tick [data-ft-draw] { animation-delay: calc(var(--motion-stagger-row) * 3); }
.hint.is-accepted .hint-rows > :nth-child(n+5) .tick [data-ft-draw] { animation-delay: calc(var(--motion-stagger-row) * 4); }
/* оповещение выезжает снизу на 12 точек с проявлением */
.toast:not(.is-gone), .ui-toast { animation: ft-up var(--motion-normal) var(--motion-ease-enter) backwards; }
/* сведения о себе и кошелёк: полосы пределов растут от нуля при первом показе */
.ui-meter .ui-bar > i:not(.is-buf) { transform-origin: 0 50%; animation: ft-grow-x var(--motion-slow) var(--motion-ease-rise) backwards; }
/* запись встречи, раздел 7 */
.rec-btn { transition: transform var(--motion-rise) var(--motion-ease-rise), box-shadow var(--motion-rise) var(--motion-ease-rise), background-color var(--motion-rise) var(--motion-ease-rise); }
[data-rec="ready"] .rec-btn:not(.is-stop):not(:disabled):not(:hover) { animation: ft-breath-rec var(--motion-loop-breath) var(--motion-ease-loop) infinite; }
.rec-state { animation: ft-fade var(--motion-normal) var(--motion-ease-fade) backwards; }
.rec-state[data-state="done"] .btn, .rec-state[data-state="done"] a { animation: ft-up var(--motion-hint) var(--motion-ease-enter) backwards; }
@media (prefers-reduced-motion: reduce) {
  /* раздел 10: сдвиги, увеличения и дыхание выключены, проявление остаётся; появление по прокрутке js/pages.js не ставит */
  .steps[data-ft-in] > *, .hint, .toast:not(.is-gone), .ui-toast, .rec-state[data-state="done"] .btn, .rec-state[data-state="done"] a { animation-name: ft-fade; }
  .invite .btn-primary:hover:not(:disabled), [data-rec="ready"] .rec-btn:not(.is-stop):not(:disabled):not(:hover) { animation: none; }
  /* вес селектора отказа — не ниже правила движения: иначе движение побеждает */
  .check.is-drawn .check-box .tick [data-ft-draw], .ui-meter .ui-bar > i:not(.is-buf) { animation: none; }
  .hint.is-accepted .hint-rows > [aria-checked] .tick [data-ft-draw], .hint.is-accepted .hint-rows > :nth-child(n) .tick [data-ft-draw] { animation: none !important; }
  .out-ic.is-ok [data-ft-draw] { animation: none !important; }
  .app[data-guest="open"] .app-menu, .app[data-guest="open"][data-menu="open"] .app-menu { animation-name: ft-fade !important; }
  .filters-chev { transition: none !important; }
  .dash-key-btn { transition-property: box-shadow, background-color !important; transform: none !important; }
  .rec-btn { transition-property: box-shadow, background-color; }
  .rec-btn:active:not(:disabled) { transform: none; }
  .demo-toast[data-ft-out] { transition-property: opacity; }
}