/**
 * Портал cdto.life — критический first-paint (inline в <head>).
 *
 * Слои загрузки (anti-CLS):
 *   L0 — этот файл: геометрия chrome = финальный кадр (до admin-rail.css / JS)
 *   L1 — HTML скелет меню (data-cdto-first-paint) + App Bar 58px
 *   L2 — rails DOM (opacity fade; место уже зарезервировано margin 52px)
 *   L3 — контент главной (уже на финальной Y-координате)
 *
 * Эталон ушей: tasks.cdto.life — #0f766e + нижняя граница меню (rgba + #0a5c56).
 * v1.2.0: layout chrome в critical (устранение вертикального скачка Solo→rails).
 */

/* Skip-link до CSS Drupal: иначе display:inline h≈17 → pwTop≈18 и скачок контента */
body.cdto-space-admin-rail-pending > a.visually-hidden,
body.cdto-space-admin-rail-ready > a.visually-hidden,
body.cdto-space-right-rail-ready > a.visually-hidden,
body.cdto-space-admin-rail-pending > a.skip-link,
body.cdto-space-admin-rail-ready > a.skip-link,
body.cdto-space-right-rail-ready > a.skip-link {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

body.cdto-space-admin-rail-pending > a.visually-hidden.focusable:focus,
body.cdto-space-admin-rail-pending > a.visually-hidden.focusable:focus-within,
body.cdto-space-admin-rail-ready > a.visually-hidden.focusable:focus,
body.cdto-space-admin-rail-ready > a.visually-hidden.focusable:focus-within,
body.cdto-space-right-rail-ready > a.visually-hidden.focusable:focus,
body.cdto-space-right-rail-ready > a.visually-hidden.focusable:focus-within {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

/* UA body margin:8px до Solo → page-wrapper top:26 и скачок main 137→111 */
html {
  margin: 0 !important;
  padding: 0 !important;
  scrollbar-gutter: stable;
  /* Единый эталон Телеграф (Element): thin / 6px — без сдвига vs Трекер/Почта */
  scrollbar-width: thin;
  scrollbar-color: rgba(0, 0, 0, 0.2) transparent;
}

html * {
  scrollbar-width: thin;
}

html::-webkit-scrollbar,
html ::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

html::-webkit-scrollbar-thumb,
html ::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

body.cdto-space-admin-rail-pending,
body.cdto-space-admin-rail-ready,
body.cdto-space-right-rail-ready {
  --cdto-space-menu-h: 53px; /* 52 + border; = ceil(getBoundingClientRect) после paint */
  --cdto-space-app-bar-h: 58px;
  --cdto-admin-rail-nav-width: 52px;
  --cdto-admin-rail-collapsed-width: 52px;
  --cdto-app-bar-logo-h: 40px;
  /* Контент/App Bar — на всю ширину между рэйлами (как Трекер); меню — колонка 1600 */
  --cdto-portal-column-max: none;
  --cdto-portal-column-pad-x: 12px;
  --cdto-page-content-pad-x: 12px;
  /* Края пунктов = края блоков тела: rail 52px + pad контента 20px.
     Справа ещё scrollbar-gutter (stable), иначе «Выход» выступает на ~10px. */
  --cdto-space-menu-content-pad: 20px;
  --cdto-space-scrollbar-gutter: 10px;
  --cdto-space-menu-inset-x: calc(
    var(--cdto-admin-rail-collapsed-width, 52px) + var(--cdto-space-menu-content-pad, 20px)
  );
  --cdto-space-menu-inset-right: calc(
    var(--cdto-space-menu-inset-x) + var(--cdto-space-scrollbar-gutter, 10px)
  );
  --cdto-space-menu-column-max: none;
  --cdto-app-bar-bg: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
  --cdto-app-bar-border-color: #e2e8f0;
  --cdto-app-bar-shadow: 0 1px 0 rgba(15, 118, 110, 0.05);
  margin: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-bottom: 0 !important;
}

/*
 * Резерв под fixed-меню + App Bar 58px + поля rails.
 * Без этого Solo рисует шапку ~79px и меню в потоке → mainTop≈132, затем скачок на ≈111.
 */
/*
 * Резерв под fixed chrome: меню (53) + App Bar (58) = 111.
 * display:block — Solo grid+order даёт нестабильные auto-rows (+26px CLS).
 */
body.cdto-space-admin-rail-pending #page-wrapper.page-wrapper,
body.cdto-space-admin-rail-ready #page-wrapper.page-wrapper,
body.cdto-space-right-rail-ready #page-wrapper.page-wrapper {
  display: block !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  margin-top: 0 !important;
  transform: none !important;
  padding-top: calc(
    var(--cdto-space-menu-h, 53px) + var(--cdto-space-app-bar-h, 58px)
  ) !important;
  box-sizing: border-box !important;
  /* whitespace/text nodes между блоками → anonymous line ~16px (1em) до theme CSS */
  font-size: 0 !important;
  line-height: 0 !important;
}

body.cdto-space-admin-rail-pending #page-wrapper.page-wrapper > *,
body.cdto-space-admin-rail-ready #page-wrapper.page-wrapper > *,
body.cdto-space-right-rail-ready #page-wrapper.page-wrapper > * {
  font-size: 1rem !important;
  line-height: normal !important;
}

body.cdto-space-admin-rail-pending #page-wrapper.page-wrapper > :not(#primary-menu):not(#header),
body.cdto-space-admin-rail-ready #page-wrapper.page-wrapper > :not(#primary-menu):not(#header),
body.cdto-space-right-rail-ready #page-wrapper.page-wrapper > :not(#primary-menu):not(#header) {
  margin-left: var(--cdto-admin-rail-collapsed-width, 52px) !important;
  margin-right: var(--cdto-admin-rail-collapsed-width, 52px) !important;
  /* Как Трекер #wrapper: только margin, без 100vw — иначе gutter/scrollbar съедает правый pad */
  max-width: none !important;
  box-sizing: border-box !important;
}

body.cdto-space-admin-rail-pending #page-wrapper.page-wrapper > :not(#primary-menu):not(#header):not(#footer-menu):not(#copyright),
body.cdto-space-admin-rail-ready #page-wrapper.page-wrapper > :not(#primary-menu):not(#header):not(#footer-menu):not(#copyright),
body.cdto-space-right-rail-ready #page-wrapper.page-wrapper > :not(#primary-menu):not(#header):not(#footer-menu):not(#copyright) {
  width: auto !important;
}

/* Подвал на всю ширину между левым и правым rail (L0, до theme CSS).
   :not(#id) — выше специфичности width:auto у соседнего правила. */
body.cdto-space-admin-rail-pending #page-wrapper.page-wrapper > #footer-menu:not(#primary-menu):not(#header),
body.cdto-space-admin-rail-ready #page-wrapper.page-wrapper > #footer-menu:not(#primary-menu):not(#header),
body.cdto-space-right-rail-ready #page-wrapper.page-wrapper > #footer-menu:not(#primary-menu):not(#header),
body.cdto-space-admin-rail-pending #page-wrapper.page-wrapper > #copyright:not(#primary-menu):not(#header),
body.cdto-space-admin-rail-ready #page-wrapper.page-wrapper > #copyright:not(#primary-menu):not(#header),
body.cdto-space-right-rail-ready #page-wrapper.page-wrapper > #copyright:not(#primary-menu):not(#header) {
  width: calc(100% - var(--cdto-admin-rail-collapsed-width, 52px) - var(--cdto-admin-rail-collapsed-width, 52px)) !important;
  max-width: none !important;
}

/*
 * #primary-menu: absolute h=0 (не relative) — иначе пустые блоки/whitespace
 * дают щель ~16px перед #main-container до theme CSS.
 */
body.cdto-space-admin-rail-pending #primary-menu.primary-menu,
body.cdto-space-admin-rail-pending #primary-menu.cdto-space-primary-menu--unified,
body.cdto-space-admin-rail-ready #primary-menu.primary-menu,
body.cdto-space-admin-rail-ready #primary-menu.cdto-space-primary-menu--unified,
body.cdto-space-right-rail-ready #primary-menu.primary-menu,
body.cdto-space-right-rail-ready #primary-menu.cdto-space-primary-menu--unified {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  order: -1 !important;
  width: 100% !important;
  max-width: none !important;
  height: 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  transform: none !important;
  z-index: 1100 !important;
  box-sizing: border-box !important;
  overflow: visible !important;
  background: transparent !important;
  background-color: transparent !important;
  pointer-events: none !important;
}

body.cdto-space-admin-rail-pending #primary-menu > nav.cdto-space-menu,
body.cdto-space-admin-rail-ready #primary-menu > nav.cdto-space-menu,
body.cdto-space-right-rail-ready #primary-menu > nav.cdto-space-menu {
  pointer-events: auto !important;
}

/* Пустой system-messages не занимает место до прихода Solo grid */
body.cdto-space-admin-rail-pending #system-messages:not(:has(.messages)),
body.cdto-space-admin-rail-ready #system-messages:not(:has(.messages)),
body.cdto-space-right-rail-ready #system-messages:not(:has(.messages)) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* App Bar — fixed под меню (L1); между рэйлами 52px (не поверх chevron) */
body.cdto-space-admin-rail-pending #header.header,
body.cdto-space-admin-rail-ready #header.header,
body.cdto-space-right-rail-ready #header.header {
  position: fixed !important;
  top: var(--cdto-space-menu-h, 53px) !important;
  left: var(--cdto-admin-rail-collapsed-width, 52px) !important;
  right: var(--cdto-admin-rail-collapsed-width, 52px) !important;
  width: auto !important;
  max-width: none !important;
  z-index: 1095 !important;
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  min-height: var(--cdto-space-app-bar-h, 58px) !important;
  max-height: var(--cdto-space-app-bar-h, 58px) !important;
  height: var(--cdto-space-app-bar-h, 58px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: var(--cdto-app-bar-bg) !important;
  background-color: #ffffff !important;
  border: none !important;
  border-bottom: 1px solid var(--cdto-app-bar-border-color, #e2e8f0) !important;
  box-shadow: var(--cdto-app-bar-shadow) !important;
}

/* Убрать Solo-отступы, дающие щель header→main до theme CSS */
body.cdto-space-admin-rail-pending #system-messages,
body.cdto-space-admin-rail-ready #system-messages,
body.cdto-space-right-rail-ready #system-messages,
body.cdto-space-admin-rail-pending #main-container,
body.cdto-space-admin-rail-ready #main-container,
body.cdto-space-right-rail-ready #main-container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

body.cdto-space-admin-rail-pending #header #header-inner,
body.cdto-space-admin-rail-ready #header #header-inner,
body.cdto-space-right-rail-ready #header #header-inner {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex: 1 1 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-height: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  padding: 0 var(--cdto-portal-column-pad-x, 12px) !important;
  max-width: var(--cdto-portal-column-max, none) !important;
  box-sizing: border-box !important;
}

body.cdto-space-admin-rail-pending #header #block-solo-branding .branding-wrapper,
body.cdto-space-admin-rail-ready #header #block-solo-branding .branding-wrapper,
body.cdto-space-right-rail-ready #header #block-solo-branding .branding-wrapper {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  flex-wrap: nowrap !important;
  gap: 0.65rem 1rem !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cdto-space-admin-rail-pending #header #block-solo-branding .site-logo-img,
body.cdto-space-admin-rail-ready #header #block-solo-branding .site-logo-img,
body.cdto-space-right-rail-ready #header #block-solo-branding .site-logo-img {
  display: block !important;
  width: auto !important;
  height: var(--cdto-app-bar-logo-h, 40px) !important;
  max-width: min(207px, 38vw) !important;
  max-height: var(--cdto-app-bar-logo-h, 40px) !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
}

body.cdto-space-admin-rail-pending #header #block-solo-branding .site-slogan,
body.cdto-space-admin-rail-ready #header #block-solo-branding .site-slogan,
body.cdto-space-right-rail-ready #header #block-solo-branding .site-slogan {
  margin: 0 !important;
  font-size: calc(52 * var(--cdto-app-bar-logo-h, 40px) / 56) !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  height: var(--cdto-app-bar-logo-h, 40px) !important;
  display: flex !important;
  align-items: center !important;
  text-transform: uppercase !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

body.cdto-space-admin-rail-pending #primary-menu #primary-menu-inner,
body.cdto-space-admin-rail-ready #primary-menu #primary-menu-inner,
body.cdto-space-right-rail-ready #primary-menu #primary-menu-inner {
  display: none !important;
}

/* nav — на всю ширину viewport (как body > nav на Трекере). */
body.cdto-space-admin-rail-pending #primary-menu > nav.cdto-space-menu,
body.cdto-space-admin-rail-ready #primary-menu > nav.cdto-space-menu,
body.cdto-space-right-rail-ready #primary-menu > nav.cdto-space-menu {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  width: 100% !important;
  max-width: 100vw !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  height: var(--cdto-space-menu-h, 53px) !important;
  min-height: var(--cdto-space-menu-h, 53px) !important;
  max-height: var(--cdto-space-menu-h, 53px) !important;
  overflow: hidden !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 1px 0 0 #0a5c56 !important;
  background-color: #0f766e !important;
  background-image: none !important;
  box-sizing: border-box !important;
  z-index: 1100 !important;
}

body.cdto-space-admin-rail-pending #primary-menu > nav.cdto-space-menu::before,
body.cdto-space-admin-rail-ready #primary-menu > nav.cdto-space-menu::before,
body.cdto-space-right-rail-ready #primary-menu > nav.cdto-space-menu::before {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: var(--cdto-admin-rail-nav-width, 52px) !important;
  height: var(--cdto-space-menu-h, 53px) !important;
  background: #0f766e !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 1px 0 0 #0a5c56 !important;
  z-index: 10050 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

body.cdto-space-admin-rail-pending #primary-menu > nav.cdto-space-menu::after,
body.cdto-space-admin-rail-ready #primary-menu > nav.cdto-space-menu::after,
body.cdto-space-right-rail-ready #primary-menu > nav.cdto-space-menu::after {
  content: "" !important;
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  width: var(--cdto-admin-rail-nav-width, 52px) !important;
  height: var(--cdto-space-menu-h, 53px) !important;
  background: #0f766e !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 1px 0 0 #0a5c56 !important;
  z-index: 10050 !important;
  pointer-events: none !important;
  box-sizing: border-box !important;
}

/* Колонка пунктов + flex с первого кадра (анти стопка → CLS). */
body.cdto-space-admin-rail-pending #primary-menu nav.cdto-space-menu .cdto-space-menu__frame,
body.cdto-space-admin-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__frame,
body.cdto-space-right-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__frame {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body.cdto-space-admin-rail-pending #primary-menu nav.cdto-space-menu .cdto-space-menu__bar,
body.cdto-space-admin-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__bar,
body.cdto-space-right-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__bar {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  max-width: var(--cdto-space-menu-column-max, 1600px) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--cdto-space-menu-inset-x, 72px) !important;
  padding-right: var(--cdto-space-menu-inset-right, 82px) !important;
  box-sizing: border-box !important;
  min-height: 0 !important;
  height: 100% !important;
}

body.cdto-space-admin-rail-pending #primary-menu nav.cdto-space-menu .cdto-space-menu__list,
body.cdto-space-admin-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__list,
body.cdto-space-right-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__list {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
  min-width: 0 !important;
}

body.cdto-space-admin-rail-pending #primary-menu nav.cdto-space-menu .cdto-space-menu__item,
body.cdto-space-admin-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__item,
body.cdto-space-right-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__item {
  display: flex !important;
  align-items: stretch !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
}

body.cdto-space-admin-rail-pending #primary-menu nav.cdto-space-menu .cdto-space-menu__item a,
body.cdto-space-admin-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__item a,
body.cdto-space-right-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__item a {
  display: flex !important;
  align-items: center !important;
  box-sizing: border-box !important;
  padding: 10px 12px !important;
  white-space: nowrap !important;
}

body.cdto-space-admin-rail-pending #primary-menu nav.cdto-space-menu .cdto-space-menu__auth,
body.cdto-space-admin-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__auth,
body.cdto-space-right-rail-ready #primary-menu nav.cdto-space-menu .cdto-space-menu__auth {
  display: flex !important;
  flex-shrink: 0 !important;
  align-items: stretch !important;
  margin-left: auto !important;
  min-width: 7.5rem !important;
}

body.cdto-space-admin-rail-pending #cdto-space-menu-placeholder,
body.cdto-space-admin-rail-ready #cdto-space-menu-placeholder,
body.cdto-space-right-rail-ready #cdto-space-menu-placeholder {
  left: var(--cdto-admin-rail-nav-width, 52px) !important;
  right: var(--cdto-admin-rail-nav-width, 52px) !important;
  width: auto !important;
}

.cdto-space-menu-junction {
  background: #0f766e !important;
  border: none !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.32) !important;
  box-shadow: 0 1px 0 0 #0a5c56 !important;
  height: var(--cdto-space-menu-h, 53px) !important;
  z-index: 10050 !important;
}

/* L2: rails появляются поверх уже зарезервированных 52px (без сдвига контента) */
#cdto-space-admin-rail,
#cdto-space-right-rail {
  opacity: 0;
}

body.cdto-space-admin-rail-ready #cdto-space-admin-rail,
body.cdto-space-right-rail-ready #cdto-space-right-rail {
  opacity: 1;
  transition: opacity 0.18s ease;
}