/*
 * Слой приложения поверх дизайн-системы fewbase («techno monospace»).
 *
 * Здесь живёт только то, чего в системе нет: раскладка экранов infra-tracker
 * и правила таблицы состояний. Всё заскоуплено на .ds-fewbase, как и сама
 * система: так правила лежат в одном пространстве имён и переносить систему
 * заново можно заменой ds-fewbase.css целиком, не трогая этот файл.
 *
 * Цвета — только через токены системы. Литеральных значений здесь нет
 * намеренно: статус-цвета (green/yellow/red/grey) должны совпадать в бейдже,
 * в акценте строки и в подписи, а совпадать они могут только у одного
 * источника — переменных из ds-fewbase.css.
 */

/*
 * Шрифты лежат локально, а не тянутся с CDN — как в time-recorder: у
 * платформы один источник начертаний, и внешний CDN на пути к первому
 * экрану добавлял бы чужой домен, чужой отказ и чужую задержку. У IBM Plex
 * Sans и JetBrains Mono есть кириллические подмножества, поэтому русский
 * текст не падает в системный шрифт. Кэш на год задаёт public/_headers.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* ── Каркас страницы ── */

.ds-fewbase {
  margin: 0;
  min-height: 100vh;
}

/* ── Шапка ──
   Одна и та же во всех продуктах платформы (образец — time-recorder): знак и
   название, за ними разделы плитками, справа почта и выход. Человек,
   переходящий между инструментами, не должен искать навигацию заново.
   Полоса тянется во всю ширину окна и по колонке текста НЕ выравнивается:
   колонки у продуктов разной ширины (760, 1100, 1180), и выравнивание по
   каждой из них развело бы шапки обратно. */

.ds-fewbase .topbar {
  padding: 12px 24px;
  gap: 22px;
}

.ds-fewbase .topbar .nav {
  gap: 22px;
  flex: 1;
  flex-wrap: wrap;
}

/* Пункты навигации — плитки; текущий вывернут в светлое. */
.ds-fewbase .nav a,
.ds-fewbase .nav .nav-current {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.ds-fewbase .nav-current {
  background: var(--bg);
  color: var(--text);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
}

/* Знак с названием — не плитка, у неё своё внутреннее выравнивание. */
.ds-fewbase .nav-brand {
  padding: 0;
}

/* Знак продукта в шапке — рядом со словомаркой, как у витрины платформы. */
.ds-fewbase .brand-mark {
  display: block;
}

/* Знак, название и бейдж тарифа — одна группа со своим внутренним
   зазором (9px, тот же, что внутри .nav-brand), отдельная от общего
   зазора между пунктами шапки (22px, .topbar .nav) — иначе бейдж
   отъезжал бы от названия дальше, чем от соседней вкладки. */
.ds-fewbase .brand-group {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Контурный тег без заливки и точки — DS-компонент .badge (плотная
   плашка со светлым фоном) читался на тёмной полосе шапки чужеродным
   пятном. Здесь легче: только буквы и тонкая рамка, тон в цвет своей
   роли.

   Селектор несёт лишний класс `.nav` не для вложенности, а ради
   специфичности: бейдж свободного тарифа — ссылка (`<a>`), и без этого
   `.ds-fewbase .nav a` (ниже, паддинг и размер пунктов меню) её обгонял бы
   по специфичности и раздувал бы плашку до размера обычного пункта шапки
   — бейдж тарифа Pro (`<span>`, того же правила не касается) и бейдж
   Free выглядели бы разного размера. */
.ds-fewbase .nav .plan-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid;
}

.ds-fewbase .plan-badge-pro {
  color: var(--accent);
  border-color: var(--accent);
}

.ds-fewbase .plan-badge-free {
  color: var(--topbar-fg-soft);
  border-color: var(--topbar-fg-soft);
}

.ds-fewbase a.plan-badge-free:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

.ds-fewbase .nav .user-email {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--topbar-fg-soft);
  margin-left: auto;
  white-space: nowrap;
}

/* Форма выхода не должна ломать строку навигации. */
.ds-fewbase .nav form {
  display: inline-flex;
  margin: 0;
}

/* ── Колонка содержимого ── */

.ds-fewbase .wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-4) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/* Одиночная карточка: форма проекта, подтверждение удаления, пейволл.
   620, а не 460: в макете эти карточки держат по два поля в ряд, и в
   460 px ряд разваливается в столбик, теряя связь «имя — домен». */
.ds-fewbase .wrap-narrow {
  max-width: 620px;
}

/* Настройки — две колонки карточек (артборд 2k), а не узкая колонка.
   Признак берётся из содержимого тем же приёмом, что и у таблицы ниже. */
.ds-fewbase .wrap:has(.settings-grid) {
  max-width: 1120px;
}

/* Экраны с таблицей шире колонки текста: шести колонкам дашборда в 760 px
   тесно при любом кегле, а горизонтальная прокрутка в главном списке —
   худшее из решений. Признак берётся из содержимого, а не из ещё одного
   флага в Layout: «широкий» здесь буквально значит «тут таблица». Там, где
   :has не поддержан, экран остаётся узким, а таблица прокручивается
   внутри .table-scroll — верстка не ломается. */
.ds-fewbase .wrap:has(.table) {
  max-width: 1120px;
}

/* Шапка экрана: заголовок крупнее системного h3 и отделён линией. Отступ
   под заголовком система рассчитывает на плотный поток текста, а здесь под
   ним сразу таблица или форма — линия отделяет их надёжнее. */
.ds-fewbase .section-head,
.ds-fewbase .wrap > section > h3:first-child {
  border-bottom: 1px solid var(--text);
  padding-bottom: var(--s-3);
  margin-bottom: var(--s-4);
}

.ds-fewbase .section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}

.ds-fewbase .section-head h3,
.ds-fewbase .wrap > section > h3:first-child {
  font-size: 22px;
  line-height: 1.2;
}

/* Заголовок и его подпись — на одной базовой линии: подпись поясняет
   заголовок, а не начинает новый блок. */
.ds-fewbase .section-title {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.ds-fewbase .section-meta {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
}

/* ── Формы ── */

.ds-fewbase form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}

/* Поля рядами по два: имя и домен, срок и флажок — пары, и в столбик
   связь внутри пары теряется. align-items:start не даёт строке сетки
   растянуться по самому высокому полю ряда: без него ошибка под одним
   полем опускает поле соседа. */
.ds-fewbase .field-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: start;
}

/* Адрес проверки и хостинг длинные — им весь ряд. */
.ds-fewbase .field-wide {
  grid-column: 1 / -1;
}

/* Стоимость: три коротких числа и валюта в одну строку — рядом они
   читаются как одна сумма, в столбик как четыре не связанных поля. */
.ds-fewbase .field-grid-cost {
  grid-template-columns: 1fr 1fr 1fr 0.8fr;
}

/* Флажок в паре с полем встаёт на строку самого поля, а не на его метку и
   не под подсказку: пара читается как «поле и его переключатель». Отступ —
   высота метки над полем (mono 10px в 1.5) плюс зазор сетки. */
.ds-fewbase .field-check {
  align-self: start;
  padding-top: 21px;
}

/* Группа полей под своей подписью, отчёркнутая от предыдущей. */
.ds-fewbase .form-group {
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}

.ds-fewbase .form-group > h5 {
  margin-bottom: var(--s-3);
  font-weight: 700;
}

.ds-fewbase .form-actions {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-2);
}

/* Удаление — у противоположного края от сохранения: разрушающее действие
   не должно стоять под рукой, промахнувшейся мимо соседней кнопки. */
.ds-fewbase .form-actions-end {
  margin-left: auto;
}

/* Рамку поля с ошибкой красит система, подпись — нет. В форме из десяти
   полей одна красная рамка теряется: метка называет, что именно не так. */
.ds-fewbase .field-invalid > label {
  color: var(--danger);
}

/* Сводка ошибок над формой: сколько полей не прошло. Моношириная метка
   слева — та же «error ·», что и в макете. */
.ds-fewbase .form-error-summary {
  margin-bottom: var(--s-4);
}

.ds-fewbase .form-error-badge {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--danger-700);
}


/* Залитый красный — только для последнего необратимого шага (страница
   подтверждения удаления). В списке проектов у «Удалить» остаётся рамка:
   там это переход на подтверждение, а не само удаление. */
.ds-fewbase .btn-danger-solid {
  background: var(--danger);
  border-color: var(--danger-700);
  color: var(--surface-focus);
}

.ds-fewbase .btn-danger-solid:hover {
  background: var(--danger-700);
  border-color: var(--danger-700);
  color: var(--surface-focus);
}

/* ── Карточки страниц ── */

/* Форма и одностраничные подтверждения лежат на «бумаге», а не прямо на
   фоне: карточка отделяет содержимое, за которое человек отвечает, от
   хрома страницы. */
.ds-fewbase .form-card,
.ds-fewbase .page-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-5);
}

.ds-fewbase .page-card {
  padding: var(--s-6) var(--s-5);
}

/* Заголовок внутри карточки уже не «шапка экрана»: линия под ним лишняя,
   рамка карточки и так очерчивает блок. */
.ds-fewbase .page-card > h3 {
  border-bottom: 0;
  padding-bottom: 0;
  margin-bottom: var(--s-3);
}

/* Хлебная крошка — где человек находится, тем же моноширинным шрифтом,
   что и адреса в остальном интерфейсе. */
.ds-fewbase .crumb {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--n-600);
  margin-bottom: var(--s-3);
}

.ds-fewbase .page-card-body {
  font-size: 13.5px;
  color: var(--text-soft);
  max-width: 520px;
}

/* Факты о том, что произойдёт: короткие технические строки на подложке. */
.ds-fewbase .facts {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  background: var(--grey-bg);
  border: 1px solid var(--grey-line);
  padding: var(--s-3) var(--s-4);
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-soft);
}

/* Что даёт подписка — рамкой цвета текста: единственный блок страницы,
   который должен читаться раньше кнопки. */
.ds-fewbase .plan {
  border: 1px solid var(--text);
  padding: var(--s-4);
  margin-top: var(--s-4);
}

.ds-fewbase .plan-name {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 700;
}

.ds-fewbase .plan-features {
  list-style: none;
  margin: var(--s-3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  font-size: 13px;
  color: var(--text-soft);
}

.ds-fewbase .plan-features li::before {
  content: "— ";
}

/* ── Баннер лимита ── */

/* Баннер с заголовком, объяснением и действиями — не одна строка текста:
   лимит меняет то, что продукт делает с проектами, и требует решения. */
.ds-fewbase .banner {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.ds-fewbase .banner-title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 700;
  color: var(--yellow-fg);
}

.ds-fewbase .banner-body {
  color: var(--text-soft);
}

.ds-fewbase .banner-actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-top: var(--s-2);
  flex-wrap: wrap;
}

/* Второй, необязательный выход — ссылкой, а не второй кнопкой: рядом две
   кнопки читались бы равновеликими вариантами. */
.ds-fewbase .banner-link {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--yellow-fg);
  border-bottom: 1px solid var(--yellow-line);
}

/* ── Сводная полоса ── */

/* Суммы и счётчики состояний одной строкой над таблицей: вопрос «сколько
   это стоит и всё ли живо» задаётся раньше, чем вопрос о конкретной
   строке, и ответ на него должен стоять выше списка. */
.ds-fewbase .summary {
  display: flex;
  border: 1px solid var(--line);
  background: var(--surface);
  margin-bottom: var(--s-4);
  flex-wrap: wrap;
}

.ds-fewbase .summary-cell {
  padding: var(--s-3) var(--s-4);
  border-right: 1px solid var(--line);
  min-width: 180px;
}

.ds-fewbase .summary-value {
  font-size: 22px;
  font-weight: 700;
  margin-top: var(--s-1);
  white-space: nowrap;
}

.ds-fewbase .summary-sub {
  margin-top: 2px;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.ds-fewbase .summary-unit {
  font-size: 11px;
  color: var(--n-600);
  margin-left: var(--s-1);
}

.ds-fewbase .summary-counts {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-3) var(--s-4);
  flex: 1;
  flex-wrap: wrap;
}

/* ── Выбор бесплатных слотов ── */

/* Блок врезается между шапкой дашборда и таблицей: без собственной рамки
   он читался бы продолжением шапки, а не отдельным решением. */
.ds-fewbase .free-active {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-4);
}

.ds-fewbase .free-active-list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--line-soft);
}

.ds-fewbase .free-active-list li {
  border-bottom: 1px solid var(--line-soft);
}

.ds-fewbase .free-active > h4 {
  font-size: 15px;
}

.ds-fewbase .free-active-list label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  padding: 9px 0;
  cursor: pointer;
}

/* ── Пустые состояния ── */

.ds-fewbase .empty-state {
  padding: var(--s-7) var(--s-5);
  gap: var(--s-3);
}

.ds-fewbase .empty-state-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}

/* Объяснение под заголовком — колонкой в 460 px: во всю ширину пустой
   таблицы строка растягивается на два десятка слов и перестаёт читаться. */
.ds-fewbase .empty-state-body {
  max-width: 460px;
}

/* Кнопка внутри пустого состояния — единственное действие на экране, ей
   нужен воздух от текста. */
.ds-fewbase .empty-state .btn {
  margin-top: var(--s-3);
}

/* ── Таблицы ── */

/* Шапка на подложке: строк много, и при прокрутке она должна оставаться
   отличимой от первой строки данных. */
.ds-fewbase .table thead tr {
  background: var(--n-300);
}

.ds-fewbase .table th:not(:first-child),
.ds-fewbase .table td:not(:first-child) {
  border-left: 1px solid var(--line-soft);
}

/* Шести колонкам нужно чуть больше 760 px, и в окне между 700 px (там уже
   карточки) и шириной колонки таблица иначе вытолкнула бы за край всю
   страницу. Прокрутка остаётся внутри самой таблицы: заголовок, шапка и
   форма над ней стоят на месте. */
.ds-fewbase .table-scroll {
  overflow-x: auto;
}

/* ── Таблица состояний ── */

/* Данные моноширинные — так столбцы сроков и процентов выравниваются сами.
   Пояснения под бейджами это правило не касается: там связный текст, и в
   моноширинном он занимает вдвое больше места без выгоды. */
.ds-fewbase .status-table td {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ds-fewbase .status-table .note {
  font-family: var(--font-body);
}

/* Шесть колонок в 760 px помещаются только на узких полях. Бейджу при этом
   нужен запрет переноса: «В порядке» в две строки поднимает высоту строки
   вдвое ради одного пробела. */
.ds-fewbase .status-table th,
.ds-fewbase .status-table td {
  padding: 9px 8px;
}

.ds-fewbase .status-table .badge {
  white-space: nowrap;
}

.ds-fewbase .status-table th:nth-child(5),
.ds-fewbase .status-table th:nth-child(6),
.ds-fewbase .status-table td.cost {
  text-align: right;
}

.ds-fewbase .status-table td:first-child {
  white-space: nowrap;
}

/* Левый акцент по худшей проверке — тем же цветом, что и точка бейджа.
   Тень внутрь, а не border: при border-collapse рамка на строке достаётся
   браузеру на усмотрение, а тень на первой ячейке рисуется одинаково. */
.ds-fewbase .status-table .row-green > td:first-child { box-shadow: inset 3px 0 0 var(--green); }
.ds-fewbase .status-table .row-yellow > td:first-child { box-shadow: inset 3px 0 0 var(--yellow); }
.ds-fewbase .status-table .row-red > td:first-child { box-shadow: inset 3px 0 0 var(--red); }
.ds-fewbase .status-table .row-grey > td:first-child { box-shadow: inset 3px 0 0 var(--grey); }

/* Красный виден ещё и по фону строки: в длинном списке одной полоски мало. */
.ds-fewbase .status-table .row-red > td {
  background: var(--red-bg);
}

.ds-fewbase .project-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-weight: 500;
}

.ds-fewbase .cell-detail {
  margin-top: 3px;
}

/* Процент доступности за неделю: серый — норма, цвет появляется только
   когда есть о чём сообщить (см. uptimeTone). */
.ds-fewbase .uptime-green { color: var(--green-fg); }
.ds-fewbase .uptime-yellow { color: var(--yellow-fg); }
.ds-fewbase .uptime-red { color: var(--red-fg); }
.ds-fewbase .uptime-grey { color: var(--text-muted); }

.ds-fewbase .status-table .cost {
  white-space: nowrap;
}

.ds-fewbase .row-actions {
  display: flex;
  gap: var(--s-3);
  justify-content: flex-end;
  white-space: nowrap;
  font-size: 11.5px;
}

/* ── Журнал событий ── */

.ds-fewbase .log-table td {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.ds-fewbase .log-table td:first-child {
  white-space: nowrap;
}

.ds-fewbase .log-table .note {
  font-family: var(--font-body);
}

/* Тип события цветом, а не только словом: в сотне строк «упал» и
   «восстановился» иначе различаются только чтением. Тег, а не бейдж —
   точка бейджа в столбце из ста строк превращается в шум. */
.ds-fewbase .tag-green {
  border-color: var(--green-line);
  background: var(--green-bg);
  color: var(--green-fg);
}

.ds-fewbase .tag-yellow {
  border-color: var(--yellow-line);
  background: var(--yellow-bg);
  color: var(--yellow-fg);
}

.ds-fewbase .tag-red {
  border-color: var(--red-line);
  background: var(--red-bg);
  color: var(--red-fg);
}

.ds-fewbase .tag-grey {
  border-color: var(--grey-line);
  background: var(--grey-bg);
  color: var(--grey-fg);
}

.ds-fewbase .log-note {
  margin-top: var(--s-3);
  max-width: 620px;
}

/* ── Настройки ── */

/* Две колонки карточек. Форма — сетка, а не колонка по умолчанию из
   правила `form` выше. */
.ds-fewbase form.settings-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}

.ds-fewbase .settings-col {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.ds-fewbase .settings-grid .card {
  padding: var(--s-4);
}

.ds-fewbase .settings-grid .card > h5 {
  font-weight: 700;
  margin-bottom: var(--s-3);
}

/* Карточка, в которой нечего менять: приглушённая подложка вместо
   бумажной — она читается справкой, а не формой. */
/* Заголовок внутри карточки — тот же, что в subscriptions. */
.ds-fewbase .blk-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ds-fewbase .card-quiet {
  background: var(--grey-bg);
  border-color: var(--grey-line);
}

.ds-fewbase .check-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Канал, который заведомо ничего не доставит: чат не привязан. Флажок и
   подпись гаснут вместе — серым читается «сейчас недоступно», а не «выбор
   не сделан». */
.ds-fewbase .check-disabled {
  color: var(--text-muted);
}

.ds-fewbase .check-disabled input {
  cursor: not-allowed;
}

/* Пары «метка → значение» в карточке «только чтение» — тот же элемент, что
   в subscriptions: у платформы один вид у одинаковых по смыслу мест. */
.ds-fewbase .kv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-3);
}

.ds-fewbase .kv-grid p {
  margin-top: 3px;
}

.ds-fewbase .card-quiet .note {
  margin-top: var(--s-3);
}

/* ── Узкий экран ── */

@media (max-width: 700px) {
  .ds-fewbase .topbar .nav {
    padding: var(--s-2) var(--s-3);
    gap: var(--s-2) var(--s-3);
  }

  /* Адрес уходит на свою строку: вместе со ссылками он не помещается.
     order сдвигает его под них, не меняя разметку — на широком экране он
     должен остаться между названием и ссылками, как в макете. */
  .ds-fewbase .nav .user-email {
    order: 1;
    flex-basis: 100%;
  }

  .ds-fewbase .wrap {
    padding: var(--s-4) var(--s-3) var(--s-6);
    gap: var(--s-4);
  }

  /* Линия остаётся под заголовком, а не под кнопкой: она отделяет шапку
     экрана от содержимого, а кнопка — уже содержимое. */
  .ds-fewbase .section-head {
    flex-direction: column;
    align-items: stretch;
    gap: var(--s-3);
    border-bottom: 0;
    padding-bottom: 0;
  }

  .ds-fewbase .section-head h3 {
    border-bottom: 1px solid var(--text);
    padding-bottom: var(--s-2);
  }

  .ds-fewbase .section-head .btn {
    padding: 10px var(--s-4);
  }

  /* Пары полей и четвёрка стоимости складываются в столбик: 1fr 1fr на
     390 px даёт две колонки по полтора слова. */
  .ds-fewbase .field-grid,
  .ds-fewbase .field-grid-cost,
  .ds-fewbase form.settings-grid {
    grid-template-columns: 1fr;
  }

  .ds-fewbase .field-check {
    align-self: start;
    padding-bottom: 0;
  }

  .ds-fewbase .form-card,
  .ds-fewbase .page-card {
    padding: var(--s-4);
  }

  /* Сводная полоса — столбиком: три ячейки в ряд на узком экране дают
     колонку в одно число шириной. */
  .ds-fewbase .summary {
    flex-direction: column;
  }

  .ds-fewbase .summary-cell {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ds-fewbase .summary-counts {
    gap: var(--s-2);
  }


  /* Кнопки формы во всю ширину строки, но не сливаются в одну полосу. */
  .ds-fewbase .form-actions {
    flex-wrap: wrap;
  }

  .ds-fewbase .empty-state {
    padding: var(--s-5) var(--s-4);
  }

  /* Таблица состояний становится списком карточек: шесть колонок на 390 px
     не помещаются ни при какой ширине шрифта. */
  .ds-fewbase .status-table,
  .ds-fewbase .status-table tbody,
  .ds-fewbase .status-table tr,
  .ds-fewbase .status-table td {
    display: block;
  }

  .ds-fewbase .status-table thead {
    display: none;
  }

  .ds-fewbase .status-table {
    border: 0;
    background: none;
  }

  .ds-fewbase .status-table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: var(--s-3);
    margin-bottom: var(--s-2);
  }

  .ds-fewbase .status-table td,
  .ds-fewbase .status-table td.cost {
    border: 0;
    padding: 4px 0;
    white-space: normal;
    text-align: left;
  }

  /* Шапки больше нет — метка колонки уходит внутрь карточки префиксом.
     Текст метки берётся из data-label: он переведён там же, где и <th>. */
  .ds-fewbase td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: 2px;
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
  }

  /* Статус кодируется левой полосой карточки. Тень на первой ячейке в
     столбик превратилась бы в полоску над карточкой, а не рядом с ней. */
  .ds-fewbase .status-table tr.row-green > td:first-child,
  .ds-fewbase .status-table tr.row-yellow > td:first-child,
  .ds-fewbase .status-table tr.row-red > td:first-child,
  .ds-fewbase .status-table tr.row-grey > td:first-child {
    box-shadow: none;
  }

  .ds-fewbase .status-table tr.row-green { border-left: 3px solid var(--green); }
  .ds-fewbase .status-table tr.row-yellow { border-left: 3px solid var(--yellow); }
  .ds-fewbase .status-table tr.row-red { border-left: 3px solid var(--red); }
  .ds-fewbase .status-table tr.row-grey { border-left: 3px solid var(--grey); }

  .ds-fewbase .status-table .row-red > td {
    background: none;
  }

  /* Действия строки — блок высотой в палец: попасть можно, лишних кнопок
     нет. display возвращается явно: ячейки выше уже сложены в блоки, и без
     этого ссылки слиплись бы в одно слово. */
  .ds-fewbase .status-table td.row-actions {
    display: flex;
    justify-content: flex-start;
    gap: var(--s-4);
    min-height: 44px;
    align-items: center;
    font-size: 12px;
  }

  /* Журнал складывается так же: время остаётся заголовком записи. */
  .ds-fewbase .log-table,
  .ds-fewbase .log-table tbody,
  .ds-fewbase .log-table tr,
  .ds-fewbase .log-table td {
    display: block;
  }

  .ds-fewbase .log-table thead {
    display: none;
  }

  .ds-fewbase .log-table {
    border: 0;
    background: none;
  }

  .ds-fewbase .log-table tr {
    background: var(--surface);
    border: 1px solid var(--line);
    padding: var(--s-3);
    margin-bottom: var(--s-2);
  }

  .ds-fewbase .log-table td {
    border: 0;
    padding: 3px 0;
  }
}

/* Знак продукта в шапке — свой мотив, а не диагональ платформы.
   Пульс: три столбца разной высоты, пик в центре.
   Дизайн-система красит клетки 1, 5 и 9 (мотив самого fewbase), поэтому
   здесь перечислены ВСЕ девять: погашенные тоже, иначе от платформенной
   диагонали остались бы лишние акцентные клетки поверх нашего рисунка.
   Три класса против двух у системного правила — этим и перебивается. */
.ds-fewbase .topbar .mark i:nth-child(2),
.ds-fewbase .topbar .mark i:nth-child(5),
.ds-fewbase .topbar .mark i:nth-child(8) {
  background: var(--accent);
}

.ds-fewbase .topbar .mark i:nth-child(6),
.ds-fewbase .topbar .mark i:nth-child(7),
.ds-fewbase .topbar .mark i:nth-child(9) {
  background: var(--topbar-fg);
}

.ds-fewbase .topbar .mark i:nth-child(1),
.ds-fewbase .topbar .mark i:nth-child(3),
.ds-fewbase .topbar .mark i:nth-child(4) {
  background: var(--mark-dim);
}