/* ux_forms.css — layout-only polish for Бренд / Налаштування / Менеджер.
   Not linked from index.html yet — orchestrator must add:
   <link rel="stylesheet" href="/css/ux_forms.css">
   next to the other css links (after style.css so overrides win).
   No new colors here — everything reuses existing var(--...) tokens
   already defined in style.css, so light/dark both just work. */

/* Опитування бренду — banner-card should read as one compact row, not a
   giant slab. Trim the extra breathing room .brand-card gives every card. */
.ux-banner-compact{
  padding: 14px 18px;
}
.ux-banner-compact .bs-banner-row{ gap: var(--sp-14); }
.ux-banner-compact .bs-banner-text{ gap: var(--sp-2); }

/* Cards on these three pages should feel tighter and more consistent than
   the default .brand-card spacing (which was tuned for a wider page). */
.page-narrow .brand-card,
.page-mid .brand-card{
  padding: 16px 18px;
}
.page-narrow .brand-card-head,
.page-mid .brand-card-head{
  margin-bottom: 12px;
}

/* Settings sub-sections (conn-grid / svc-grid / keys-list / autonomy-list)
   already render as cards via style.css `.prov-card, ... .autonomy-row,
   .key-row ...` selector — just tighten the shead-to-content rhythm so
   the narrower column doesn't look like it has extra dead air. */
.page-mid .shead{ margin-top: 26px; }
.page-mid .shead:first-child{ margin-top: 0; }

/* 2026-07-16 settings redesign — give each section its own breathing room
   (was "all glued together"). .set-section wraps a <div class="shead"> +
   its content in settings.html so each block gets consistent top spacing
   and the last one doesn't leave dangling margin at the page end. */
.set-section{ margin-bottom: 8px; }
.set-section:last-child{ margin-bottom: 0; }
.set-section + .set-section{ margin-top: 8px; }

/* 2026-07-16 — «Підключення» card redesign. Was: title/badge on one row that
   wrapped and shoved the badge around, account name jammed against the
   badge, disconnect button floating at whatever height the content left it.
   Now: icon+name+status badge in one tidy row, handle on its own line,
   token line in plain language (warn color under 14 days), disconnect
   button always pinned to the bottom via margin-top:auto — same height
   across all three cards (grid stretches rows; card is a full-height
   flex column). */
.conn-grid{ align-items: stretch; }
.prov-card{
  flex-direction: column; align-items: stretch; gap: var(--sp-8);
  height: 100%; box-sizing: border-box;
}
.prov-card .pc-top{
  display: flex; align-items: center; gap: var(--sp-10); flex-wrap: wrap;
}
/* 🛑 display:block ОБОВ'ЯЗКОВИЙ. style.css робить .pc-name флекс-контейнером,
   а в флекс-контейнері text-overflow:ellipsis не працює — текст просто
   обрізався без трьох крапок і налазив на бейдж («LinkedIn (» замість
   «LinkedIn (сторінка компанії)»). Тому не ellipsis, а перенос: назва
   провайдера — це те, за чим користувач розрізняє картки, ховати її не можна.
   Кнопка внизу все одно притиснута margin-top:auto, тож різна висота
   заголовків не ламає ряд. */
/* flex-basis 150px + wrap на .pc-top: коли назві тісно, ВНИЗ переїжджає
   бейдж, а не рветься заголовок. З `flex:1 1 auto` бейдж лишався в рядку і
   тиснув назву в 110-піксельну колонку — «LinkedIn · сторінка» ставало
   трьома рядками по слову. */
.prov-card .pc-top .pc-name{
  display: block; flex: 1 1 150px; min-width: 0; margin: 0;
  white-space: normal; overflow-wrap: break-word;
}
.prov-card .pc-top .badge{ flex: none; }
.prov-card .pc-handle{
  font: 600 var(--fs-12)/1.4 var(--sans); color: var(--text-dim);
}
.prov-card .pc-token{
  font: 500 var(--fs-11)/1.4 var(--sans); color: var(--text-mute);
}
.prov-card .pc-token-warn{ color: var(--warn); }
.prov-card .pc-actions{ margin-top: auto; padding-top: 4px; }
.prov-card .pc-actions .btn{ width: 100%; }

/* Картки підключень: 240px мінімум дає рівно чотири колонки на 1180px, тож
   усі мережі стають одним акуратним рядом, а не «три плюс одна самотня». */
.conn-grid{ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Сервіси (Claude / Higgsfield / Apify / Meta / LinkedIn).
   Було: minmax(280px) + align-items:stretch — на широкому екрані виходило
   п'ять вузьких колонок, і КОЖНА картка розтягувалась по висоті найбільшої
   (Claude з трьома рядками статусу). Через це під короткими картками зяяла
   порожнеча на пів висоти, і сторінка виглядала недобудованою.
   Стало: ширші колонки (картки містять поля вводу, їм тісно в 280px) і
   природна висота. Нерівний низ ряду — нормально; порожній низ — ні. */
.svc-grid{ grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); align-items: start; }
.svc-card{
  display: flex; flex-direction: column; gap: var(--sp-2);
  box-sizing: border-box;
}

/* Autonomy toggles — consistent card height + rhythm (was: rows melting
   into each other with no vertical separation). Each row becomes its own
   card, same padding/min-height, with a gap between cards instead of a
   border-only split. */
.autonomy-list{ display: flex; flex-direction: column; gap: var(--sp-10); }
.autonomy-list .autonomy-row{
  background: var(--panel); border: 1px solid var(--border-soft);
  border-radius: var(--radius-sm); padding: 14px 16px;
  min-height: 64px; box-sizing: border-box;
}

/* Відео-рушій subblock inside the Claude services card — a plain-language
   status line instead of a raw filesystem path front-and-center. The path
   itself still lives in the DOM (title attribute) for anyone who wants it. */
.svc-video-engine{ margin-top: 4px; }
.svc-video-path{
  display: block; max-width: 100%; font: 500 var(--fs-10)/1.3 var(--mono); color: var(--text-mute);
  margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "+ ffprobe ✓" — a small inline mention next to the ffmpeg badge, not its
   own full-width status row (was two rows, easy to mistake for two tools). */
.svc-video-probe{
  display: inline-flex; align-items: center; gap: 3px;
  font: 600 var(--fs-11)/1.3 var(--sans); color: var(--text-mute); white-space: nowrap;
}
.svc-video-probe svg{ width: 12px; height: 12px; flex: none; }
.svc-video-probe-ok{ color: var(--ok); }
.svc-video-probe-warn{ color: var(--warn); }

/* CLI row: badge stays a short fixed label ("Встановлено"); the raw resolved
   path (if shown at all) is a single ellipsis-truncated line underneath,
   not the badge text itself. */
.svc-row + .svc-video-path{ margin-top: -2px; margin-bottom: 4px; }

/* ── Sidebar pinned-footer layout ─────────────────────────────────────────
   13 nav items pushed the nav-foot-block (Оновлення/Онбординг + version)
   past the bottom edge on short viewports (700-800px) because .nav had no
   bounded height — it just grew with its content and the footer scrolled
   off with the rest of the page. Fix: give .nav an explicit height on
   desktop (sticky under the topbar) and make the item list its own
   scroll region (flex:1; overflow-y:auto; min-height:0) so the footer
   (flex:none, pushed down by nav-foot-block's margin-top:auto) always
   stays pinned to the bottom and visible. On mobile the drawer already
   gets a bounded height from style.css (top/bottom anchors on
   position:fixed), so only overflow:hidden is needed there — the same
   inner .nav-items scroll region applies at every width. */
.nav{ overflow: hidden; }
.nav-items{
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column; gap: var(--sp-2);
}
@media (min-width: 861px){
  .nav{
    /* 🛑 --banner-h ОБОВʼЯЗКОВИЙ. Тут віднімалась сама шапка, але між нею
       й сценою стоїть смуга «жодної мережі не підключено». Виміряно при
       вікні 900: рейка виходила на 949, overflow у неї hidden — і «Старт»,
       єдине, що стоїть між новою людиною й працюючим продуктом, просто
       зрізало за краєм екрана. Висоту віддає сам елемент живим розміром
       (onboarding.js, publishBannerHeight): смуга переносить рядок на
       вузьких вікнах, і числом у CSS її не вгадати.

       `top` навмисно лишається без доданка: смуга статична й при
       прокручуванні йде геть, а липка шапка лишається. Прикріпити рейку
       нижче за смугу означало б лишити під шапкою порожню щілину рівно
       тоді, коли смуги вже немає. */
    height: calc(100vh - var(--topbar-h) - var(--banner-h, 0px));
    position: sticky; top: var(--topbar-h);
  }
}

/* Підвал бічного меню (кнопки «Оновлення»/«Гід запуску», номер версії
   і поповер оновлювача) прибраний 2026-08-09 разом із розміткою в
   nav.js. Оновлювача на сервері немає за побудовою, а «Гід запуску»
   був другим входом у розділ, що стоїть у меню рядком вище. */