@charset "utf-8";
/* ⛔ ОБОЛОЧКА ПРОДУКТА — ОДНА ШАПКА НА ЧЕТЫРЕ ВЕБ-КОНТУРА (веб-пакет «один продукт», волна 1).
   ОДИН ФАЙЛ НА ВСЕ ЧЕТЫРЕ: раскладывается из src/Shared.Ui в каждый wwwroot тем же
   механизмом, что ui-tokens.css и nav.css (Оформление.props), копии сверяет
   tools/contrast/check.py. Своя копия в каждом контуре разошлась бы на первой правке.

   ⛔ ВСЁ ПОД ФЛАГОМ  :root[data-оболочка="2"].  Флаг стоит в разметке контура
   (<html data-оболочка="2">), а снимает его СЛУЖБА до отдачи страницы — настройкой WebShell
   (любое значение, кроме 2; Shared.WebAuth/ОткатОболочки.cs, во всех четырёх службах между
   UseDefaultFiles и UseStaticFiles). Решение живёт в самой отданной странице: без прыжка
   после первой отрисовки и без зависимости от сети (прежний откат полем ответа /api/mode
   наступал после отрисовки и не наступал при отказе сети — ревью волны 1, 26.09.2026).
   Без флага НИ ОДНО правило отсюда не действует, и контур выглядит как до пакета: классы
   оболочки ДОБАВЛЯЮТСЯ к прежним (header.top, nav.tabs, прежние id), правила контуров
   остаются на месте. Откат — флагом, а не файлом: раздача Оформление.props общая.

   РАСКЛАДКА (её ставит разметка контура; часть 2 волны 1 обязана ей следовать):
     header.top.сис-шапка
       div.сис-верх          строка высотой --высота-шапки:
                             .сис-название · .сис-контуры[data-место-контуров] (слот nav.js;
                             без пробелов внутри — пустой прячется) · .сис-поиск (только где
                             есть поставщик поиска) · .сис-кто · .сис-сборка · .сис-выход
       nav.tabs.сис-вкладки  ПРЯМОЙ ребёнок header.top: обходы браузером жмут
                             `.tabs button[data-tab]`, app.js планировщика вставляет
                             подпись роли #roleNote перед рядом (insertBefore в header.top)
       прочие дети шапки     (подпись роли и родня) — строка приглушённым текстом, правило ниже
     .сис-полоса             полоса «знак + слово» вместо плиты, под шапкой; тона
                             -внимание, -тревога, -нет-данных, -демо; знак — .сис-полоса-знак
     .сис-строка-состояния   нижняя строка экрана (по желанию контура)
     .сис-шапка-на-листе     разрешение вернуть шапку на печать (см. ПЕЧАТЬ)

   ⛔ ОБЯЗАТЕЛЬСТВА ЧАСТИ 2 (ревью волны 1, 26.09.2026; без них раскладка не сходится):
     · ПОЛОСА: база .сис-полоса — в разметке; ТОН и знак ставит скрипт контура через
       classList и дочерние узлы (bad → .сис-полоса-тревога, warn → .сис-полоса-внимание).
       Присваивание `узел.className = 'bad'` стирает классы оболочки: так сейчас делают
       app.js планировщика (#contourBanner, #settingsProblem, #srcBanner, #roBanner) и app.js
       финконтура (#modeBar). Сторож ПолосыОболочкиНеСтираютсяTests краснеет, как только
       полоса из разметки получит className без .сис-полоса.
     · ПОДПИСЬ ДАННЫХ И «С ЧЕГО НАЧАТЬ» — ВНУТРИ <main>: #stamp финконтура (main оборачивает
       #stamp и div#view, id сохраняются, innerHTML пишется в #view), #stamp и #basis писем,
       #firstRun планировщика. Это содержимое экрана, в бюджете шапки их нет.
     · ПОДПИСЬ РОЛИ #roleNote планировщика (≈20 px) в бюджете есть: с ней и двумя полосами
       шапка 173 px > 160. Часть 2 переносит её в начало <main> — правкой app.js
       (insertBefore в header.top) и ПорядокВкладокРешаетСлужбаTests в одном коммите (спека
       §2 п. 6); до того правило «прочие дети шапки» держит её читаемой.
     · ШТАМП .сис-сборка — window.ШтампСборки от версии службы: планировщик — /api/about,
       институт — /api/health (fullVersion; /api/about института открыт только администратору),
       финконтур — /api/about поле «версия», письма — /api/about «version»; у финконтура и писем
       /api/about отвечает только после входа (до входа — «—»).
     · ПИСЬМА: nav.js подключается в той же правке, где /api/mode писем получает `контуры`
       (слот «Контуры»); ворота «шапка ≤ 160 px» для писем — отдельным замером (ux-snap
       журнал писем пропускает).
     · Поле DEMO из window.РежимКонтура служба кладёт в ОБЕ ветки ответа, до входа и после:
       промис — снимок на загрузке страницы (nav.js).

   ⛔ ЧЕГО ЗДЕСЬ НЕТ И НЕ БУДЕТ (спека веб-пакета §2) — и кто это держит:
     · движения и своих шрифтов (п. 2) — сторож БезДвиженияИШрифтовTests;
     · липкой шапки (п. 10: липкая панель спорит с липкими шапками таблиц в окнах прокрутки)
       и новых возможностей селекторов и окон — has, popover, inert, container (п. 3: браузер
       VDI Заказчика не замерен) — сторож НеизмеренныеВозможностиБраузераTests; шапку,
       липкую у самого контура (header института), оболочка делает обычной;
     · литералов цвета и кегля и необъявленных ролей — сторожа ЦветИКегльВнеТокеновTests и
       НеобъявленныеТокеныTests: только роли ui-tokens.css; высоты — ролями
       --высота-шапки, --высота-вкладок, --высота-полосы, --толщина-подчёркивания.

   ⛔ СПЕЦИФИЧНОСТЬ. Каждое правило начинается с :root[data-оболочка="2"] (два признака
   поверх класса) и потому перекрывает классовые правила контуров (`header.top`,
   `.tabs button`, `.jumpbar input`) без !important. Правила ПО ID (`#whoami`,
   `#contourBanner` планировщика) оно НЕ перекрывает — их контур переводит под
   `:root:not([data-оболочка="2"])` у себя (часть 2 волны 1).

   ⛔ `display` СТАВИТСЯ ТОЛЬКО ТАМ, ГДЕ БЕЗ НЕГО НЕЛЬЗЯ, и у каждого такого класса есть
   правило для [hidden]: авторское `display` перекрывает браузерное `[hidden]`, и
   скрытый атрибутом орган стал бы видимым. Кнопкам вкладок и полосам `display`
   не задаётся вовсе — контуры прячут их и атрибутом, и `style.display`, и правилами по id. */

/* ── ШАПКА ЦЕЛИКОМ. Поверхность, а не заливка акцентом: подчёркивание выбранной
   вкладки цветом акцента на акцентном фоне не видно. Обычная, а не липкая: у института
   header{position:sticky} свой, и полоса стенда (sticky, поверх всего) закрывала бы им
   строку шапки (спека §2 п. 10). */
:root[data-оболочка="2"] .сис-шапка {
  display: block;
  position: static;
  margin: 0;
  padding: 0;
  color: var(--цвет-текст);
  background: var(--цвет-поверхность);
  border: 0;
  border-bottom: 1px solid var(--цвет-граница);
  box-shadow: none;
}

/* ── СТРОКА ШАПКИ. Высота ФИКСИРОВАНА (бюджет до первой строки экрана); что не влезло по
   ширине — уступает по очереди, а не переносится второй строкой.
   ⚠ overflow здесь НЕ скрывается: выпадающий список поиска висит ниже строки.
   ⛔ ПОРЯДОК УСТУПОК — ОЧЕРЕДЬ, А НЕ ДОЛЕВОЙ РАЗДЕЛ (найдено браузером на 1366 px: при равных
   правах сжатия flex резал название контура и переключатель посреди слова). Название,
   переключатель, сборка и «Выйти» не сжимаются вовсе. Первым уступает «кто я» — до пола
   80 px (многоточие, полное — в title), вторым — поле поиска до пола 160 px. Очередь держит
   ВЕС сжатия: flex делит нехватку пропорционально «вес × основа», и при весе 1000 у «кто я»
   против 1 у поиска поиск отдаёт меньше пикселя, пока «кто я» не упрётся в пол (при весе 4
   они уступали вместе: 465/313 px на 1366 — ревью волны 1). Проверено браузером. */
:root[data-оболочка="2"] .сис-верх {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: var(--отступ-средний);
  box-sizing: border-box;
  height: var(--высота-шапки);
  margin: 0;
  padding: 0 var(--отступ-крупный);
  font-family: var(--шрифт);
  font-size: var(--кегль-таблица);
  line-height: var(--интерлиньяж-плотный);
  white-space: nowrap;
}

:root[data-оболочка="2"] .сис-название {
  flex: 0 0 auto;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--шрифт);
  font-size: var(--кегль-основной);
  font-weight: var(--начертание-выделенное);
  line-height: var(--интерлиньяж-плотный);
  color: var(--цвет-текст);
}

/* Слот переключателя контуров: nav.js кладёт сюда панель `.prodnav.prodnav-slot`.
   Пустой слот места не занимает (разметка пишет его без пробелов внутри). */
:root[data-оболочка="2"] .сис-контуры {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  min-width: 0;
  overflow: hidden;
}
:root[data-оболочка="2"] .сис-контуры:empty { display: none; }

/* Поиск — только там, где у контура есть поставщик (у планировщика — #jumpInput). */
:root[data-оболочка="2"] .сис-поиск {
  position: relative;
  flex: 1 1 var(--ширина-поиска);
  min-width: calc(var(--шаг) * 40);
  max-width: var(--ширина-поиска);
  margin: 0;
}
:root[data-оболочка="2"] .сис-поиск input {
  box-sizing: border-box;
  width: 100%;
  height: var(--высота-органа);
  min-height: var(--высота-органа);
  margin: 0;
  padding: 0 var(--отступ-малый);
  font-family: var(--шрифт);
  font-size: var(--кегль-таблица);
  color: var(--цвет-текст);
  background: var(--цвет-поверхность);
  border: 1px solid var(--цвет-граница-сильная);
  border-radius: var(--скругление);
}
:root[data-оболочка="2"] .сис-поиск input:focus-visible {
  outline: var(--обводка-фокуса) solid var(--цвет-фокус);
  outline-offset: var(--отступ-обводки-фокуса);
}

/* Кто я — прижат вправо; длинное ФИО обрезается первым (вес сжатия 1000 — очередь, см.
   строку шапки), полное — в title органа; пол — чтобы от фамилии осталось больше многоточия. */
:root[data-оболочка="2"] .сис-кто {
  flex: 0 1000 auto;
  min-width: calc(var(--шаг) * 20);
  margin: 0 0 0 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--кегль-служебный);
  color: var(--цвет-текст-2);
}

/* Штамп сборки — короткий (window.ШтампСборки), полный — в title. */
:root[data-оболочка="2"] .сис-сборка {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
  white-space: nowrap;
  font-size: var(--кегль-подпись);
  font-variant-numeric: tabular-nums;
  color: var(--цвет-текст-3);
}

:root[data-оболочка="2"] .сис-выход {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-height: var(--высота-органа);
  min-width: var(--цель-нажатия);
  margin: 0;
  padding: 0 var(--отступ-средний);
  font-family: var(--шрифт);
  font-size: var(--кегль-таблица);
  font-weight: var(--начертание-обычное);
  line-height: var(--интерлиньяж-плотный);
  color: var(--цвет-текст);
  background: var(--цвет-поверхность);
  border: 1px solid var(--цвет-граница-сильная);
  border-radius: var(--скругление);
  text-decoration: none;
  cursor: pointer;
}
:root[data-оболочка="2"] .сис-выход:hover { background: var(--цвет-фон-наведение); }
:root[data-оболочка="2"] .сис-выход:focus-visible {
  outline: var(--обводка-фокуса) solid var(--цвет-фокус);
  outline-offset: var(--отступ-обводки-фокуса);
}

/* ── РЯД ВКЛАДОК. Одна строка; не влезло — ряд прокручивается, и у края, за которым
   есть ещё вкладки, лежит тень. ⛔ ТОЛЬКО CSS, без обработчиков resize: два слоя-крышки
   цвета поверхности едут вместе с содержимым (local) и закрывают тени, прибитые к краям
   окна ряда (scroll). Ряд у начала — левая крышка на месте, левой тени нет; ряд
   не доехал до конца — правая крышка за краем, правая тень видна.
   ⛔ Высота РЯДА ФИКСИРОВАНА (--высота-вкладок): обычная полоса прокрутки (на VDI Заказчика
   она видна, ≈10 px; headless-снимки её прячут) берёт место у кнопок, а не у бюджета шапки —
   кнопка 34–44 px, пол — --цель-нажатия (24 px, WCAG 2.2 SC 2.5.8). Правило «кнопка вкладки
   44 px» (app.css планировщика, SC 2.5.5) действует без флага; под флагом его сознательно
   заменяет высота ряда: ряд 44 плюс полоса прокрутки дали бы 48 + 54 + 1 + 2 × 30 = 163 > 160
   (ворота волны 1). Оба правила держит сторож ПечатнаяШапкаЛистаTests. */
:root[data-оболочка="2"] .сис-вкладки {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  gap: 0;
  box-sizing: border-box;
  height: var(--высота-вкладок);
  margin: 0;
  padding: 0 var(--отступ-малый);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: thin;
  border: 0;
  background-color: var(--цвет-поверхность);
  background-image:
    linear-gradient(to right, var(--цвет-поверхность) 33%, transparent),
    linear-gradient(to left, var(--цвет-поверхность) 33%, transparent),
    radial-gradient(farthest-side at 0 50%, var(--цвет-тень-края), transparent),
    radial-gradient(farthest-side at 100% 50%, var(--цвет-тень-края), transparent);
  background-position: left center, right center, left center, right center;
  background-repeat: no-repeat;
  background-size:
    calc(var(--ширина-тени-края) * 3) 100%,
    calc(var(--ширина-тени-края) * 3) 100%,
    var(--ширина-тени-края) 100%,
    var(--ширина-тени-края) 100%;
  background-attachment: local, local, scroll, scroll;
}

/* Кнопка вкладки прозрачна: иначе она закрыла бы тень края. */
:root[data-оболочка="2"] .сис-вкладки button {
  flex: 0 0 auto;
  box-sizing: border-box;
  min-width: var(--цель-нажатия);
  min-height: var(--цель-нажатия);
  margin: 0;
  padding: 0 var(--отступ-средний);
  font-family: var(--шрифт);
  font-size: var(--кегль-таблица);
  font-weight: var(--начертание-выделенное);
  line-height: var(--интерлиньяж-плотный);
  white-space: nowrap;
  color: var(--цвет-текст-2);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
}
:root[data-оболочка="2"] .сис-вкладки button:hover {
  color: var(--цвет-текст);
  background: var(--цвет-фон-наведение);
}

/* ВЫБРАННАЯ ВКЛАДКА — подчёркивание цветом акцента. Признак выбора у контуров разный
   (`.active` у планировщика, института и писем, `.on` у финконтура), и классы-якоря
   обходов не меняются — поэтому перечислены все. Подчёркивание — внутренней тенью:
   бокс кнопки не меняется, ряд не прыгает. */
:root[data-оболочка="2"] .сис-вкладки button.active,
:root[data-оболочка="2"] .сис-вкладки button.on,
:root[data-оболочка="2"] .сис-вкладки button[aria-selected="true"],
:root[data-оболочка="2"] .сис-вкладки button[aria-current="page"] {
  color: var(--цвет-текст);
  background: transparent;
  box-shadow: inset 0 calc(-1 * var(--толщина-подчёркивания)) 0 var(--цвет-акцент);
}

/* ФОКУС ≠ ВЫБОР. Обводка со всех четырёх сторон и с отступом ВНУТРЬ кнопки (снаружи её
   срезал бы край прокручиваемого ряда) — рамка, а не черта снизу: выбранную и
   сфокусированную вкладку глаз не путает. */
:root[data-оболочка="2"] .сис-вкладки button:focus-visible {
  outline: var(--обводка-фокуса) solid var(--цвет-фокус);
  outline-offset: calc(-1 * (var(--обводка-фокуса) + var(--отступ-обводки-фокуса)));
}

/* ── ПРОЧИЕ ДЕТИ ШАПКИ — подпись роли #roleNote планировщика и родня, вставленные скриптом
   прямо в header.top. Правила контуров красили их под акцентную заливку (цвет текста на
   акценте), а шапка оболочки — поверхность: без этого правила подпись шла белым по белому
   (ревью волны 1). Строка приглушённым текстом; её высота — в бюджете (обязательства части 2). */
:root[data-оболочка="2"] .сис-шапка > :not(.сис-верх):not(.сис-вкладки) {
  margin: 0;
  padding: var(--отступ-микро) var(--отступ-крупный) 0;
  font-size: var(--кегль-подпись);
  line-height: var(--интерлиньяж-плотный);
  color: var(--цвет-текст-2);
  opacity: 1;
}

/* ── ПОЛОСЫ ВМЕСТО ПЛИТ. Знак и слово первыми; высота — не меньше --высота-полосы, а длинный
   текст ПЕРЕНОСИТСЯ, не обрезаясь: предупреждение нельзя сворачивать и прятать смысл в title
   (спека §2 п. 8; консилиум UX 17.09.2026 §3 «вредные починки» — ревью волны 1 нашло
   многоточие и срезанную вторую строку #modeBar финконтура). Однострочная полоса — ровно
   --высота-полосы: поля + строка + черта; в бюджет шапки идёт фактическая высота.
   ⛔ Значение несут знак и слово, а не фон (закон 1 ui-tokens.css): подсветка на бумаге
   исчезает, слово остаётся. */
:root[data-оболочка="2"] .сис-полоса {
  box-sizing: border-box;
  min-height: var(--высота-полосы);
  margin: 0;
  padding: var(--отступ-микро) var(--отступ-крупный);
  overflow-wrap: break-word;
  font-family: var(--шрифт);
  font-size: var(--кегль-таблица);
  font-weight: var(--начертание-обычное);
  line-height: calc(var(--высота-полосы) - 1px - 2 * var(--отступ-микро));
  color: var(--цвет-текст);
  background: var(--цвет-поверхность-утопленная);
  border: 0;
  border-bottom: 1px solid var(--цвет-граница);
  border-radius: 0;
  box-shadow: none;
}
:root[data-оболочка="2"] .сис-полоса-знак {
  margin-right: var(--отступ-малый);
  font-weight: var(--начертание-выделенное);
}
:root[data-оболочка="2"] .сис-полоса-внимание {
  color: var(--цвет-текст);
  background: var(--подсветка-внимание);
  border-bottom-color: var(--цвет-внимание);
}
:root[data-оболочка="2"] .сис-полоса-внимание .сис-полоса-знак { color: var(--цвет-внимание); }
/* «Горит»: красную полосу («КОНТУР НЕ НАЗНАЧЕН» и родня) не сворачивать и не бледнить —
   консилиум UX 17.09.2026, §3 «вредные починки». */
:root[data-оболочка="2"] .сис-полоса-тревога {
  font-weight: var(--начертание-выделенное);
  color: var(--цвет-тревога-текст);
  background: var(--подсветка-тревога);
  border-bottom-color: var(--цвет-тревога-текст);
}
:root[data-оболочка="2"] .сис-полоса-нет-данных {
  color: var(--цвет-текст-2);
  background: var(--цвет-поверхность-утопленная);
}
:root[data-оболочка="2"] .сис-полоса-нет-данных .сис-полоса-знак { color: var(--цвет-текст-3); }
:root[data-оболочка="2"] .сис-полоса-демо {
  color: var(--цвет-акцент);
  background: var(--подсветка-акцент);
  border-bottom-color: var(--цвет-акцент);
}

/* ── НИЖНЯЯ СТРОКА СОСТОЯНИЯ (по желанию контура): как полоса — не ниже --высота-полосы,
   длинное переносится, а не обрезается. */
:root[data-оболочка="2"] .сис-строка-состояния {
  box-sizing: border-box;
  min-height: var(--высота-полосы);
  margin: 0;
  padding: var(--отступ-микро) var(--отступ-крупный);
  overflow-wrap: break-word;
  font-family: var(--шрифт);
  font-size: var(--кегль-служебный);
  line-height: calc(var(--высота-полосы) - 1px - 2 * var(--отступ-микро));
  color: var(--цвет-текст-2);
  background: var(--цвет-поверхность-утопленная);
  border-top: 1px solid var(--цвет-граница);
}

/* ── [hidden] СИЛЬНЕЕ display ОБОЛОЧКИ (см. шапку файла). */
:root[data-оболочка="2"] .сис-шапка[hidden],
:root[data-оболочка="2"] .сис-верх[hidden],
:root[data-оболочка="2"] .сис-контуры[hidden],
:root[data-оболочка="2"] .сис-вкладки[hidden] { display: none; }

/* ── ПЕЧАТЬ. Вкладки, поиск, переключатель контуров и «Выйти» — органы экрана, на бумаге
   им делать нечего; название контура, кто смотрит и сборка остаются, если шапка на листе.
   ⛔ «ШАПКА НА ЛИСТЕ» РЕШАЕТ КОНТУР. Планировщик прячет header.top на печати
   (display:none !important) намеренно — у него своя шапка листа #printHead, и возврат шапки
   поверх его решения давал два названия на листе (ревью волны 1). Контур без своей шапки
   листа, который тоже прячет header.top, возвращает её классом-разрешением
   .сис-шапка-на-листе на header: !important с большей специфичностью сильнее. */
@media print {
  :root[data-оболочка="2"] .сис-шапка.сис-шапка-на-листе:not([hidden]) { display: block !important; }
  :root[data-оболочка="2"] .сис-верх { padding: 0; }
  :root[data-оболочка="2"] .сис-вкладки,
  :root[data-оболочка="2"] .сис-поиск,
  :root[data-оболочка="2"] .сис-контуры,
  :root[data-оболочка="2"] .сис-выход { display: none !important; }
}

/* ══ ПЛАНШЕТ: ПАЛЕЦ, ШИРОКОЕ, «ТЕЗИС + ?», ОФОРМЛЕНИЕ (показ с планшета, 28.09.2026) ══════════
   Всё под тем же флагом. Поведение — nav.js (улучшение .сис-подробно, органы «Оформление» и
   «Установить» в строке шапки); модули только размечают. ⛔ Без :has, @container, popover,
   inert, sticky; ⛔ только роли ui-tokens.css. Устройство показа — Chrome на iPad, то есть
   движок WebKit: здесь нет свойств, которым Safari нужен префикс, а line-clamp не
   используется вовсе (первая строка — многоточием одной строки). */

/* ── ПАЛЕЦ. На (pointer: coarse) — планшет, телефон — пол цели нажатия 40 px вместо 24: роль
   --цель-нажатия поднимается ролью --цель-нажатия-пальцем, и за ней — всё, что от неё считается
   (--высота-органа: «Выйти», поле поиска, органы шапки; кнопки вкладок, плитки, кнопка «?»).
   Мышь и перо остаются на 24 (ворота волн 1–3 сняты мышью). */
@media (pointer: coarse) {
  :root[data-оболочка="2"] {
    --цель-нажатия: var(--цель-нажатия-пальцем);
  }
  :root[data-оболочка="2"] .сис-вкладки,
  :root[data-оболочка="2"] .сис-прокрутка {
    -webkit-overflow-scrolling: touch;
  }
  :root[data-оболочка="2"] .сис-вкладки button,
  :root[data-оболочка="2"] .сис-выход,
  :root[data-оболочка="2"] .сис-орган,
  :root[data-оболочка="2"] .сис-вопрос {
    touch-action: manipulation;
  }
}

/* ── РОДНЫЕ ОРГАНЫ БРАУЗЕРА В ТЁМНОЙ ТЕМЕ. Флажок, переключатель, раскрытый список и полосы
   прокрутки браузер рисует по color-scheme, а не по ролям цвета: без неё в теме sith флажки «Только
   мои» у планировщика стояли белыми квадратами на тёмном экране (браузер, 28.09.2026). Бумага — светлая. */
:root[data-оболочка="2"][data-тема="sith"] { color-scheme: dark; }
@media print {
  :root[data-оболочка="2"][data-тема="sith"] { color-scheme: light; }
}

/* ── ШИРОКОЕ ВНУТРИ СЕБЯ. Таблица или полотно шире экрана — в div.сис-прокрутка (разметка
   модуля): прокрутка по горизонтали внутри обёртки, страница целиком вбок не едет. display не
   задаётся — пары [hidden] не нужно. */
:root[data-оболочка="2"] .сис-прокрутка {
  box-sizing: border-box;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

/* ── СТРОКА ШАПКИ НА ПЛАНШЕТЕ (768–1366). Органы «Оформление» и «Установить» — одним узлом
   .сис-органы перед «Выйти» (кладёт nav.js); в сетке узкой шапки планировщика (app.css, ≤ 900 px)
   узел встаёт в свободную клетку первого ряда и прижимается вправо. Название и переключатель
   контуров не сжимаются; уступают «кто я» (до пола) и поиск; штамп сборки уже 1280 px уходит
   (полный — в «О системе» и в title), чтобы строка не вылезла за край. */
:root[data-оболочка="2"] .сис-органы {
  position: relative;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: var(--отступ-микро);
  justify-self: end;
  margin: 0;
}
:root[data-оболочка="2"] .сис-органы[hidden] { display: none; }
:root[data-оболочка="2"] .сис-орган {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--отступ-микро);
  min-width: var(--высота-органа);
  min-height: var(--высота-органа);
  height: var(--высота-органа);
  margin: 0;
  padding: 0 var(--отступ-малый);
  font-family: var(--шрифт);
  font-size: var(--кегль-таблица);
  font-weight: var(--начертание-обычное);
  line-height: var(--интерлиньяж-плотный);
  white-space: nowrap;
  color: var(--цвет-текст);
  background: var(--цвет-поверхность);
  border: 1px solid var(--цвет-граница-сильная);
  border-radius: var(--скругление);
  cursor: pointer;
}
:root[data-оболочка="2"] .сис-орган[hidden] { display: none; }
:root[data-оболочка="2"] .сис-орган:hover { background: var(--цвет-фон-наведение); }
:root[data-оболочка="2"] .сис-орган[aria-expanded="true"] {
  color: var(--цвет-текст-выбрано);
  background: var(--цвет-фон-выбрано);
  border-color: var(--цвет-фон-выбрано);
}
:root[data-оболочка="2"] .сис-орган:focus-visible {
  outline: var(--обводка-фокуса) solid var(--цвет-фокус);
  outline-offset: var(--отступ-обводки-фокуса);
}
/* Знак органа — генерируемым содержимым (кодом, а не литералом): в textContent его нет. */
:root[data-оболочка="2"] .сис-орган-оформление::before {
  content: "\25D0";
  font-size: var(--кегль-основной);
  line-height: 1;
}
:root[data-оболочка="2"] .сис-орган-установить::before {
  content: "\2193";
  font-size: var(--кегль-основной);
  font-weight: var(--начертание-выделенное);
  line-height: 1;
}
@media (max-width: 1023.98px) {
  :root[data-оболочка="2"] .сис-орган-подпись {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}
@media (max-width: 1279.98px) {
  :root[data-оболочка="2"] .сис-верх > .сис-сборка { display: none; }
}
@media (max-width: 1366px) {
  :root[data-оболочка="2"] .сис-верх {
    gap: var(--отступ-малый);
    padding: 0 var(--отступ-средний);
  }
}

/* Панель органа («Оформление», подсказка «Установить») — под органом, над экраном. Не popover: окно слоем и кнопка, закрытие —
   повторным нажатием, Esc или нажатием мимо (nav.js). */
:root[data-оболочка="2"] .сис-панель-органа {
  position: absolute;
  top: calc(100% + var(--отступ-микро));
  right: 0;
  z-index: 60;
  box-sizing: border-box;
  display: grid;
  gap: var(--отступ-средний);
  min-width: calc(var(--шаг) * 92);   /* три пункта темы — одной строкой (браузер, 820 px) */
  max-width: calc(100vw - 2 * var(--отступ-средний));
  margin: 0;
  padding: var(--отступ-средний) var(--отступ-крупный) var(--отступ-крупный);
  white-space: normal;
  font-family: var(--шрифт);
  font-size: var(--кегль-таблица);
  line-height: var(--интерлиньяж-плотный);
  color: var(--цвет-текст);
  background: var(--цвет-поверхность);
  border: 1px solid var(--цвет-граница-сильная);
  border-radius: var(--скругление-крупное);
  box-shadow: var(--тень-парения);
}
:root[data-оболочка="2"] .сис-панель-органа[hidden] { display: none; }
:root[data-оболочка="2"] .сис-панель-органа h2 {
  margin: 0;
  font-size: var(--кегль-основной);
  font-weight: var(--начертание-выделенное);
  color: var(--цвет-текст);
}
:root[data-оболочка="2"] .сис-панель-органа fieldset {
  display: grid;
  gap: var(--отступ-микро);
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
:root[data-оболочка="2"] .сис-панель-органа legend {
  margin: 0 0 var(--отступ-микро);
  padding: 0;
  font-size: var(--кегль-служебный);
  color: var(--цвет-текст-2);
}
:root[data-оболочка="2"] .сис-панель-органа .сис-сегмент {
  display: flex;
  flex-wrap: wrap;
}
:root[data-оболочка="2"] .сис-панель-органа .сис-сегмент > button {
  flex: 1 1 auto;
  min-height: var(--высота-кнопки);
  padding: 0 var(--отступ-средний);
}
/* display — явно: панель лежит в header.top, а планировщик на низком экране прячет `header.top p`
   (app.css, max-height 820 px) — подсказка «Установить» теряла все шаги (браузер, 1024×768). */
:root[data-оболочка="2"] .сис-панель-органа p {
  display: block;
  margin: 0;
  font-size: var(--кегль-служебный);
  line-height: var(--интерлиньяж-обычный);
  color: var(--цвет-текст-2);
}
:root[data-оболочка="2"] .сис-панель-органа p.сис-подсказка-шаг {
  font-size: var(--кегль-таблица);
  color: var(--цвет-текст);
}

/* ── «ТЕЗИС + ?». Модуль размечает узел классом .сис-подробно и (по желанию) data-тезис — коротким
   тезисом для руководителя; текст не удаляет. nav.js оборачивает содержимое в span.сис-полно
   (textContent не меняется), добавляет пустую кнопку button.сис-вопрос и держит состояние в
   атрибуте data-сис-раскрыто. Свёрнуто: есть тезис — видим тезис (::before), нет — первая строка
   полного текста многоточием; знак «?» — генерируемым содержимым кнопки. Раскрыто — полный текст.
   Печать — всегда полный текст, без кнопки. Без флага и без nav.js — текст как был. */
:root[data-оболочка="2"] .сис-подробно[data-тезис]:not([data-сис-раскрыто]) > .сис-полно {
  display: none;
}
:root[data-оболочка="2"] .сис-подробно[data-тезис][data-сис-улучшено]:not([data-сис-раскрыто])::before {
  content: attr(data-тезис);
}
:root[data-оболочка="2"] .сис-подробно:not([data-тезис]):not([data-сис-раскрыто]) > .сис-полно {
  display: inline-block;
  box-sizing: border-box;
  max-width: calc(100% - var(--цель-нажатия) - var(--отступ-малый));
  max-height: calc(1em * var(--интерлиньяж-обычный));
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  vertical-align: bottom;
}
:root[data-оболочка="2"] .сис-подробно:not([data-тезис]):not([data-сис-раскрыто]) > .сис-полно * {
  display: inline;
  margin: 0;
  padding: 0;
}
:root[data-оболочка="2"] .сис-вопрос {
  position: relative;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--шаг) * 6);
  min-width: 0;
  height: calc(var(--шаг) * 6);
  min-height: 0;
  margin: 0 0 0 var(--отступ-малый);
  padding: 0;
  vertical-align: middle;
  font-family: var(--шрифт);
  font-size: var(--кегль-служебный);
  font-weight: var(--начертание-выделенное);
  line-height: 1;
  color: var(--цвет-акцент);
  background: var(--цвет-поверхность);
  border: 1px solid var(--цвет-акцент);
  border-radius: 50%;
  cursor: pointer;
}
:root[data-оболочка="2"] .сис-вопрос::before { content: "?"; }
:root[data-оболочка="2"] .сис-вопрос[aria-expanded="true"] {
  color: var(--цвет-текст-на-акценте);
  background: var(--цвет-акцент);
}
:root[data-оболочка="2"] .сис-вопрос:hover { background: var(--цвет-фон-наведение); }
:root[data-оболочка="2"] .сис-вопрос[aria-expanded="true"]:hover { background: var(--цвет-акцент); }
:root[data-оболочка="2"] .сис-вопрос:focus-visible {
  outline: var(--обводка-фокуса) solid var(--цвет-фокус);
  outline-offset: var(--отступ-обводки-фокуса);
}
/* Цель нажатия больше видимого кружка: прозрачный слой вокруг до --цель-нажатия (24 мышью, 40
   пальцем), строка текста при этом не растёт. */
:root[data-оболочка="2"] .сис-вопрос::after {
  content: "";
  position: absolute;
  top: calc((var(--шаг) * 6 - var(--цель-нажатия)) / 2);
  right: calc((var(--шаг) * 6 - var(--цель-нажатия)) / 2);
  bottom: calc((var(--шаг) * 6 - var(--цель-нажатия)) / 2);
  left: calc((var(--шаг) * 6 - var(--цель-нажатия)) / 2);
}

@media print {
  :root[data-оболочка="2"] .сис-органы,
  :root[data-оболочка="2"] .сис-вопрос { display: none !important; }
  :root[data-оболочка="2"] .сис-подробно > .сис-полно {
    display: inline !important;
    max-width: none !important;
    max-height: none !important;
    overflow: visible !important;
    white-space: normal !important;
  }
  :root[data-оболочка="2"] .сис-подробно[data-тезис]::before { content: none !important; }
  :root[data-оболочка="2"] .сис-прокрутка { overflow: visible; }
}