/* ==========================================================================
   Fluviaweb login — порт сторінки входу publica.fluviaweb.com, виміряний по
   живому сайту через DevTools Protocol 31.08.2026 (computed styles і
   getBoundingClientRect на 6 ширинах у двох темах).

   Вимагає tokens.css зі скіла flowiteam-saas і --font-logo зі скіла
   flowiteam-header (Geologica 700). Підключати після них.

   Скелет сторінки: 50/50 від 1024px. Ліворуч — намальований SVG-постер на
   темно-синьому (НЕ фото), поверх нього вуаль і білий вертикальний рейл.
   Праворуч — форма БЕЗ картки, прямо на фоні сторінки: панель 490px,
   заголовок 26px, поля 48px без рамок на тонованій заливці, «так/ні» —
   перемикач, кнопка 48px з акцентною тінню і стрілкою.
   ========================================================================== */

.fit-auth {
  min-height: 100dvh;
}

@media (min-width: 1024px) {
  .fit-auth {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

/* ---- Ліва половина: постер -------------------------------------------------
   Фон фіксований (#0d1524 — постер намальований під темне в обох темах).
   Нижче 1024px половини немає зовсім — не зменшена: на телефоні вона
   зіпхнула б форму під згин, а форма — причина існування сторінки. */
.fit-auth__aside {
  position: relative;
  isolation: isolate;
  display: none;
  overflow: hidden;
  background: #0d1524;
}

@media (min-width: 1024px) {
  .fit-auth__aside {
    display: grid;
    place-items: center;
    padding: 48px 48px 48px 9.5rem;
  }
}

/* Постер — inline-SVG (шаблон у SKILL.md): три нахилені скляні картки з
   нумерованими перевагами продукту, конектори й точки лаймом. */
.fit-auth__poster {
  position: absolute;
  inset: 0;
  z-index: -20;
  width: 100%;
  height: 100%;
}

/* Вуаль поверх постера — постійна, не підігнана під картинку. */
.fit-auth__veil {
  position: absolute;
  inset: 0;
  z-index: -10;
  background: linear-gradient(rgba(9, 13, 24, .62), rgba(9, 13, 24, .8));
}

/* Рейл на постері: білі літери з тінню, WEB — лайм (поверхня завжди темна,
   тому темна половина акценту в обох темах — правило скіла saas). */
.fit-auth__rail {
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 9.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.fit-auth__rail-word {
  display: block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: var(--font-logo);
  font-size: clamp(3.5rem, 16.5vh, 10rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.018em;
  color: #fff;
  text-shadow: 0 2px 24px rgba(9, 13, 24, .55);
}

.fit-auth__rail-word .text-flow {
  color: var(--state-ok);
}

/* ---- Права половина: форма без картки ------------------------------------ */
.fit-auth__main {
  display: grid;
  min-height: 100dvh;
  place-items: center;
  padding: 40px 20px;
  background: var(--bg-page);
}

@media (min-width: 768px) {
  .fit-auth__main { padding-inline: 32px; }
}

/* 490px тримає панель, не картка: place-items міряє колонку за вмістом. */
.fit-auth__panel {
  width: 100%;
  max-width: 30.625rem;
}

/* Нижче 1024px постера немає, і продукт називає себе над формою: вордмарк
   fluvia[web] 19px + назва продукту капітеллю в читабельному акценті. */
.fit-auth__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 32px;
}

@media (min-width: 1024px) {
  .fit-auth__brand { display: none; }
}

.fit-auth__brand .fit-wordmark {
  font-size: 19px;
}

.fit-auth__eyebrow {
  font-family: var(--font-body);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .055em;
  text-transform: uppercase;
  color: var(--accent-display);
}

/* Заголовок форми: 26px/700/-.018em. Постер уже сказав, що це за продукт,
   тому заголовок каже, для чого саме цей екран. */
.fit-auth__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -.018em;
  color: var(--text-strong);
}

.fit-auth__lede {
  margin: 8px 0 0;
  font-size: 13.5px;
  color: var(--text-soft);
}

.fit-auth__form {
  margin-top: 28px;
}

.fit-auth__form > * + * {
  margin-top: 20px;
}

/* ---- Поле: підпис 13/500, інпут 48px без рамки ---------------------------
   Заливка — м'який текст на 9% (той самий рецепт, що «привиди» шапки),
   радіус 12. Праворуч у рядку підпису може стояти службове посилання —
   «Забули пароль?» живе там, біля поля, в момент, коли пароль не підійшов. */
.fit-field {
  display: block;
}

.fit-field__label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-strong);
}

.fit-field__aside {
  font-size: 12.5px;
  font-weight: 400;
  color: var(--text-soft);
  text-decoration: none;
}

.fit-field__aside:hover {
  color: var(--text-strong);
}

.fit-input {
  width: 100%;
  height: 48px;
  padding-inline: 16px;
  border: 0;
  border-radius: 12px;
  background: color-mix(in srgb, var(--text-soft) 9%, transparent);
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text-strong);
}

.fit-input:focus-visible {
  outline: none;
  box-shadow: var(--ring);
}

.fit-input::placeholder {
  color: var(--text-faint);
}

.fit-field__hint {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--text-soft);
}

.fit-field--error .fit-input {
  box-shadow: inset 0 0 0 1px var(--err-600);
}

.fit-field__error {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--err-600);
}

/* ---- Перемикач: кожне «так/ні» -------------------------------------------
   Доріжка 40×24, повзунок 20 із тінню, 16px ходу. Рядок цілком — кнопка
   role="switch": натискання на підпис теж перемикає, клавіатура й читач
   екрана отримують справжній перемикач (правило скіла saas). */
.fit-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: none;
  text-align: start;
  font-family: var(--font-body);
  cursor: pointer;
}

.fit-switch__track {
  position: relative;
  flex: none;
  width: 40px;
  height: 24px;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--text-soft) 30%, transparent);
  transition: background var(--dur-1) var(--ease-out);
}

.fit-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: var(--r-pill);
  background: #fff;
  box-shadow: 0 1px 3px rgba(20, 29, 31, .3);
  transition: transform var(--dur-1) var(--ease-out);
}

.fit-switch[aria-checked="true"] .fit-switch__track {
  background: var(--accent);
}

.fit-switch[aria-checked="true"] .fit-switch__thumb {
  transform: translateX(16px);
}

.fit-switch__label {
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-strong);
}

.fit-switch:focus-visible {
  outline: none;
}

.fit-switch:focus-visible .fit-switch__track {
  box-shadow: var(--ring);
}

/* ---- Головна кнопка: 48px, акцент, тінь акцентом, стрілка -----------------
   Ширина за підписом, ніколи на всю панель: розтягнута кнопка — це
   кольорова смуга зі словом усередині (правило скіла saas). */
.fit-btn-accent {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 48px;
  padding-inline: 28px;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--accent);
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -.005em;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 32%, transparent);
  transition: transform var(--dur-1) var(--ease-out);
}

.fit-btn-accent:hover { transform: translateY(-1px); }
.fit-btn-accent:active { transform: translateY(1px); }
.fit-btn-accent:disabled { opacity: .4; cursor: default; transform: none; }

/* ---- Шлях до іншої форми: рядок по центру під формою ---------------------- */
.fit-auth__alt {
  margin: 28px 0 0;
  text-align: center;
  font-size: 13px;
  color: var(--text-soft);
}

.fit-auth__alt a {
  font-weight: 600;
  color: var(--accent-display);
  text-decoration: none;
}

.fit-auth__alt a:hover {
  text-decoration: underline;
}