/* ============================================================================
   FABRIQA OS — базовый слой-клей. Идёт ПЕРЕД vd-v9.css: даёт скелет разметки
   (.app/.sidebar/.main), который в ВД задан слоем v7. Всё оформление — в v9.
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* [hidden] обязан прятать всегда: авторский display:grid/flex его перебивает. */
[hidden] { display: none !important; }
a { text-decoration: none; color: inherit; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; padding: 0; }
svg { display: block; }

.app { display: grid; min-height: 100vh; }
.sidebar {
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.main { min-width: 0; display: flex; flex-direction: column; }
.header { display: flex; align-items: center; justify-content: space-between; }
.grid { display: grid; }
.content > section { display: none; }
.content > section.active { display: flex; flex-direction: column; gap: var(--space-6); }
.table-wrap { overflow-x: auto; }
/* Внутри контейнера с overflow липкая шапка v9 (top: 64px) наезжает на первую
   строку — здесь таблицы скроллятся вместе со страницей, шапке липнуть некуда. */
.table-wrap table.vd thead th { position: static; }

.brand-word { font: 700 17px/1 var(--font-head); letter-spacing: -.02em; }
.brand-word .os {
  background: var(--brand-grad); -webkit-background-clip: text;
  background-clip: text; color: transparent;
}
.brand-sub { font: 400 11px/1.3 var(--font-body); color: var(--fg-soft); margin-top: 3px; }

.nav a .pill { margin-left: auto; }
.nav a .nav-soon {
  margin-left: auto; font: 500 10px/1 var(--font-body); letter-spacing: .05em;
  color: var(--fg-faint); box-shadow: inset 0 0 0 1px var(--border);
  border-radius: var(--r-pill); padding: 3px 7px;
}

/* Раздел «Переписки»: секция-обёртка не должна добавлять отступов и колонок. */
/* Фикс слоя vd-v9-inbox: его же правила display:flex для .inbox-panel/.inbox-thread
   идут ПОСЛЕ медиа-запросов display:none и перебивают их. Возвращаем задуманное
   поведение селектором повышенной специфичности. */
@media (max-width: 1500px) { .inbox.with-panel .inbox-panel { display: none; } }
@media (max-width: 1100px) { .inbox .inbox-thread { display: none; } }

.content.inbox-page > section.active { display: block; padding: 0; height: 100%; }
.content.inbox-page { display: block; }

@media (max-width: 860px) {
  .app { grid-template-columns: 1fr !important; }
  .sidebar { position: static; height: auto; }
}