/*
	login.css — page-scoped stylesheet for /login.

	Moved here from login.ftlh's base inline <style> block + the small
	`.login-cta-link` block (2026-08-20, Task 9 fix round — reviewer/user
	ruling: only the `<#if siteId == "2">` brand-override block is exempt
	from extraction under frontend.md §7's pre-auth exception; base tokens
	and component rules move like any other page's CSS).

	Loaded render-blocking from <head> via
	`<@assets.pageAsset feature="auth" page="login" js=false />`, placed
	BEFORE the inline brand-override <style> block in login.ftlh's <head>
	so the override's `:root` rules cascade LAST and win for siteId=2 —
	same specificity (`:root`), so source order decides. A plain
	<link rel="stylesheet"> with no defer/async/preload is render-blocking
	by default, so there is no FOUC even though the JS <script type="module">
	for this page loads separately, at the end of <body>
	(`<@assets.pageAsset feature="auth" page="login" css=false />`).

	Class names kept verbatim, NOT renamed to a `.login__` BEM-lite prefix
	(Task 2/3 "split, don't rename" pattern) — this is a mechanical
	extraction of existing, working CSS. `.login__...` is the convention
	for any NEW page-specific classes added to this file going forward.
*/

/* ⚠ Ця сторінка self-contained: вона НЕ вантажить main.css і brand tokens.css
   (див. login.ftlh), тому :root нижче дублює частину дизайн-системи. Будь-яка
   правка глобальних токенів має бути продубльована тут і в reset_password.css —
   інакше pre-auth екрани мовчки лишаються на старих значеннях. */
:root {
	--bg-page: #d2d8db;
	--surface: #ffffff;
	--text-default: #0d0e13;
	--text-on-light: #323744;
	--text-muted: #595e6a;   /* 2026-08-24: було #6b7280 — DS §2.1/§16.3, WCAG 1.4.3 */
	--text-inverted: #fffaf2;
	--border-input: #bec5c8;
	--border-default: #eaeaea;
	--text-placeholder: #6d7788;   /* DS §2.1/§16.3 — було #9ba3af літералом
	                                  у .login-eye / .rp-eye / ::placeholder */
	--accent-disabled-bg: #9ba3af;
	--accent-primary: #005f6e;
	--accent-pressed: #024b57;

	/* ДС §10.22 (16.09) — вертикальний інсет самостійного центрованого екрана.
	   Скоуп вузький: тільки екрани-«вікна» — одна колонка по центру, без
	   сайдбара, без списків. Це вхід, запит доступу, відновлення пароля і два
	   екрани успіху. Окремий токен, а не крок --space-*: це поле СТОРІНКИ, а не
	   відстань між блоками; 64/80 у шкалі відступів одразу почали б уживати як
	   проміжок між групами. Більше згори на широких екранах — бо той самий
	   метричний відступ під важкою темною шапкою читається тіснішим.
	   ⚠ Той самий токен продубльовано в reset_password.css і main.css —
	   pre-auth сторінки self-contained, глобальні токени сюди не доходять. */
	--screen-inset-block: 48px;

	/* Текстова дія рівня tertiary (ДС §10.13): без фону, рамки й падінга, 14px,
	   БЕЗ підкреслення — стан показує колір. Inforeifen веде акцентом,
	   Oponytomy перебиває обидва рядки в login.ftlh (§10.20: акцент належить
	   Primary CTA, тому текстова дія там чорнилом). */
	--text-action:       var(--accent-primary);
	--text-action-hover: var(--accent-pressed);

	/* ДС §12.2 — focus-ring. Дубль значення з inforeisen/tokens.css. */
	--focus-ring: 0 0 0 3px rgba(0, 95, 110, 0.32);

	/* ── Компоненти форми кабінету (17.09) ────────────────────────────────
	   Прототип 16.09 зібрав форму входу з тих самих компонентів, що «Zmiana
	   hasła» (.ef-label / .ef-input / .info-card). Другий набір полів
	   розійшовся б із кабінетом на першій же правці токенів, тому сюди
	   заведені ЇХНІ значення — дубль з main.css, бо сторінка self-contained.
	   ⚠ Рамка поля — --hover-grey (#EAEAEA), а НЕ --border-input: саме її
	   вживає .ef-input у profile.css. Вона світліша за нашу стару рамку
	   (#bec5c8) і на білій картці ледве видима; це питання до всієї системи
	   .ef-input, а не до однієї сторінки — розійтись тут означало б знову
	   розвести вхід із кабінетом. */
	--hover-grey:            #EAEAEA;
	--control-height:        44px;
	--field-label-gap:       8px;
	--font-meta-size:        14px;
	--font-meta-line:        18px;
	--font-body-line:        20px;
	--radius-lg:             8px;
	--border-width-default:  1px;
	--focus-outline-width:   2px;
	--border-hover-strong:   #323744;
	--shadow-card:           0 1px 3px rgba(0, 0, 0, 0.08), 0 6px 24px rgba(0, 0, 0, 0.12);

	/* Вторинна кнопка (ДС §10.2) — у неї ДВІ формули, по одній на бренд.
	   Inforeifen: рамка 1.5px акцентом, текст --accent-pressed, ховер —
	   акцентний тінт. Oponytomy 16.09 (варіант «C»): текст чорнилом і рамка
	   --text-muted, заливки на ховері немає. Значення для OP — у login.ftlh. */
	--btn-cta-secondary-border-width: 1.5px;
	--btn-cta-secondary-border-color: var(--accent-primary);
	--btn-cta-secondary-color:        var(--accent-pressed);
	--btn-cta-secondary-hover-bg:     rgba(0, 95, 110, 0.06);
	--btn-cta-secondary-hover-border: var(--accent-primary);

	/* Коло-галочка екрана «Zgłoszenie wysłane». Inforeifen лишається зеленим
	   (його палітру окремо не переглядали), Oponytomy 16.09 переведений на
	   чорнило: екран двоколірний, а знак «зроблено» несе форма галочки. */
	--success-mark-bg: #1e6b3c;
	/* DS §7 (22.08.2026) — заголовок сторінки: JetBrains Mono, було Plus Jakarta. */
	--font-heading: 'JetBrains Mono', monospace;
	/* 2026-08-24: приведено до DS §2.5. --danger лишається локальним аліасом,
	   щоб не переписувати 5 споживачів; канонічне ім'я — --status-danger. */
	--status-danger: #b3261e;
	--danger: var(--status-danger);   /* було #dc2626 */

	/* Button geometry — Inforeisen canonical (mirrors main.css baseline) */
	--btn-cta-height:    48px;
	--btn-cta-radius:    8px;
	--btn-cta-font-size: 18px;
	--btn-font-weight:   500;
}
/* ДС §10.22 — брейкпоінти інсету. Канон §9: < 670 / 670–1039 / ≥ 1040. */
@media (min-width: 670px)  { :root { --screen-inset-block: 64px; } }
@media (min-width: 1040px) { :root { --screen-inset-block: 80px; } }
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
/* Флекс-колонка на всю висоту — щоб футер стояв унизу вікна, а не посеред
   екрана під короткою формою. Той самий прийом, що body.new-ui у base.css. */
body {
	background: var(--bg-page);
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	color: var(--text-default);
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}
/* Зростає на весь вільний простір і віддає футеру рівно низ. flex:1 0 auto, а не
   flex:1 — з basis:0 вміст на високих екранах поїхав би вгору нерівномірно. */
.login-main { flex: 1 0 auto; }
.login-page {
	/* 17.09: 420 → 480 ЗМІСТУ. У прототипі .signin-root має width:480 БЕЗ
	   горизонтальних падінгів, тобто 480 — це ширина картки; у нас інсет
	   24px живе всередині max-width, тож стеля 480+48. На 432 підзаголовок
	   ламався на два рядки. */
	max-width: 528px;
	margin: 0 auto;
	/* 16.09: було 32px 24px 40px — несиметрично і повз §10.22. Відступ
	   симетричний і належить кореню екрана; внутрішні блоки своїх
	   вертикальних полів не додають. */
	padding-block: var(--screen-inset-block);
	padding-inline: 24px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
/* Заголовок + лід стоять парою: 4px між ними, 16px до картки. У видах
   «відновлення» і «запит доступу» ту саму пару тримає .od-title-wrap--group. */
.login-head {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 16px;
}
.login-title {
	font-family: var(--font-heading);
	font-weight: 700;
	/* 17.09: 20/24 → 24/30 за прототипом (--section-title-size). */
	font-size: 24px;
	line-height: 30px;
	letter-spacing: -0.01em;
	/* DS §9.21: --text-default, не --text-on-light (той нижчого пріоритету). */
	color: var(--text-default);
}
.login-subtitle {
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: var(--text-muted);
	/* margin-top знято 2026-08-24 — 4px заголовок→підзаголовок тепер дає gap
	   на .od-title-wrap--group; margin поверх нього давав би 8px. */
	margin-top: 0;
}
/* .login-lang / .login-lang select видалені 17.09: перемикач мови переїхав у
   справжню шапку сайту (.header__lang, стилі в main.css). */
.login-alert {
	background: #fef2f2;
	border: 1px solid #fecaca;
	color: var(--danger);
	font-size: 14px;
	padding: 10px 12px;
	border-radius: 6px;
	margin-bottom: 12px;
}
.login-alert.success {
	background: #f0fdf4;
	border-color: #bbf7d0;
	color: #166534;
}
.login-alert.warning {
	background: #fffbeb;
	border-color: #fde68a;
	color: #92400e;
}
.login-card {
	background: var(--surface);
	border-radius: 8px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	/* 17.09: крок 20 → 12 (--space-md у прототипі) і тінь картки, якої тут не
	   було зовсім. Верхній відступ знято — його тепер тримає .login-head /
	   .od-title-wrap--group, інакше виходило 32px замість 16. */
	gap: 12px;
	box-shadow: var(--shadow-card);
}
.login-field {
	display: flex;
	flex-direction: column;
	gap: var(--field-label-gap);
}
/* 17.09: підпис поля — формула .ef-label з кабінету: Outfit 14/18, звичайна
   вага, ЗВИЧАЙНИЙ регістр, приглушений колір. Було моно 700 капслоком —
   драбина з капсу важила більше, ніж самі поля, і розходилась із кабінетом. */
.login-field-label {
	font-family: 'Outfit', sans-serif;
	font-weight: 400;
	font-size: var(--font-meta-size);
	line-height: var(--font-meta-line);
	color: var(--text-muted);
	text-transform: none;
}
/* Геометрія .ef-input: фіксована висота 44 замість падінгів, рамка 1px, radius
   8. Рамку малює обгортка, бо в ній живе ще й око пароля. */
.login-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	height: var(--control-height);
	border: var(--border-width-default) solid var(--hover-grey);
	border-radius: var(--radius-lg);
	padding: 0 12px;
	transition: border-color 160ms;
}
/* Фокус не фарбує рамку акцентом (так було): рамка темнішає до нейтрального,
   а клавіатурний фокус додає обід ДС §12.2 рівно по рамці, без просвіту. */
.login-input-wrap:focus-within {
	border-color: var(--text-placeholder);
}
.login-input-wrap:has(input:focus-visible) {
	outline: var(--focus-outline-width) solid var(--border-hover-strong);
	outline-offset: 0;
}
.login-input-wrap input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	/* 17.09: було normal — єдина розбіжність типографіки з прототипом після
	   заміру (там --font-body-line). */
	line-height: var(--font-body-line);
	color: var(--text-on-light);
	padding: 0;
	min-width: 0;
}
.login-eye {
	background: none;
	border: none;
	outline: none;
	cursor: pointer;
	padding: 2px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 26px;
	height: 26px;
	/* 2026-08-25: було #9ba3af — старе значення --text-placeholder Inforeifen,
	   захардкоджене, тож на Oponytomy іконка ока малювалась чужим сірим. */
	color: var(--text-placeholder);
}
.login-eye svg { width: 22px; height: 22px; }
/* Пара іконок: закреслене око = пароль прихований (стан за замовчуванням),
   відкрите = показаний. Видимість перемикає клас .is-shown, який ставить
   login.js. Без цього правила обидві лежали б одна на одній. */
.login-eye .login-eye-on { display: none; }
.login-eye.is-shown .login-eye-off { display: none; }
.login-eye.is-shown .login-eye-on { display: block; }
/* 16.09: дві службові дії одного рівня стоять одним рядком — «запам'ятай мене»
   і «не пам'ятаю пароля» обидві про вхід. Раніше друга жила праворуч від
   підпису «Hasło» і читалась як частина поля.
   Вирівнювання по центру, не по базовій лінії: ліворуч підпис усередині флекса
   з коробкою 18px, і baseline рахується від коробки, а не від тексту. */
.login-remember-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
/* 16.09: кегль 16 → 14. «Zapamiętaj mnie» — не поле форми, а необов'язкова
   опція під ним; на 16px вона важила стільки ж, скільки підписи «Użytkownik» /
   «Hasło», і читалась як третій рядок форми. min-height 24px лишає ціль
   натискання в нормі WCAG 2.5.8 — клікається вся мітка, не тільки коробка. */
.login-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 24px;
	cursor: pointer;
	user-select: none;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--text-on-light);
}
/* Заливка — основним ЧОРНИЛОМ, як у прототипі 16.09: §3.2 віддає акцент Primary
   CTA, а «Zapamiętaj mnie» — стан, а не дія; червона галочка поруч із червоною
   кнопкою на Oponytomy ще й змагалася б із нею за увагу.
   (17.09 тут побувала акцентна заливка — вертали за прототипом, звіреним
   заміром: INFR #323744, OP #282424, пташка кольором поверхні.)
   Коробка намальована, а не системна: accent-color фарбує лише залитий стан,
   а рамку порожнього браузер малює своїм сірим. */
.login-remember input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--text-on-light);
	border-radius: 4px;
	background: transparent;
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: background 140ms, border-color 140ms;
}
.login-remember input[type="checkbox"]:checked {
	background: var(--text-on-light);
	border-color: var(--text-on-light);
}
/* Пташка — та сама фігура, що в прототипі: clip-path на всю коробку, а не
   повернутий кут із рамок. Різниця не косметична — у border-варіанта штрих
   однакової товщини по обох плечах і зрізані кінці, у clip-path плечі різної
   довжини з рівними кінцями, і саме він стоїть у макеті.
   Координати 1:1 з прототипу (.signin-remember input:checked::after). */
.login-remember input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--surface);   /* пташка поверх чорнильної заливки */
	clip-path: polygon(20% 52%, 16% 58%, 42% 82%, 86% 28%, 80% 22%, 41% 68%);
}
.login-remember input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}
.login-submit {
	width: 100%;
	/* 4px поверх кроку форми = 16px від рядка з галочкою, як у прототипі.
	   Геометрія лишається канонічною для бренду (INFR 48/radius 8/18px):
	   прототип для Inforeifen міняє тільки кольори, не форму кнопки. */
	margin-top: 4px;
	height: var(--btn-cta-height);
	background: var(--accent-primary);
	border: none;
	border-radius: var(--btn-cta-radius);
	font-family: 'Outfit', sans-serif;
	font-weight: var(--btn-font-weight);
	font-size: var(--btn-cta-font-size);
	color: var(--text-inverted);
	cursor: pointer;
	transition: background 140ms, filter 140ms;
}
.login-submit:hover { filter: brightness(1.04); }
.login-submit:active { background: var(--accent-pressed); transform: scale(0.985); filter: none; }

/* DS §9.21 — канонічний breadcrumb. Замінює локальні .login-back-link /
   .rp-back-link зі структурою <span class="chev">«</span><span class="label">:
   ДС вимагає «завжди клас .od-breadcrumb, ніколи inline-span з окремою
   іконкою-стрілкою». Стрілка — SVG-маска 14×14, залита currentColor, тож
   hover працює сам; гліф «« брав ширину й baseline зі шрифту і «плавав».
   ⚠ Дубльовано з main.css навмисно — сторінка self-contained (див. :root вище). */
.od-breadcrumb {
	align-self: flex-start;
	display: inline-flex; align-items: center; gap: 4px;
	font-family: 'Outfit', sans-serif; font-weight: 400;
	font-size: 14px; line-height: 20px;
	color: var(--text-on-light);
	text-decoration: none; cursor: pointer;
	appearance: none; background: none; border: 0; padding: 0;
}
.od-breadcrumb::before {
	content: ''; width: 14px; height: 14px; flex: none;
	background: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 9 12l6-6'/%3E%3C/svg%3E") no-repeat center/contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 18 9 12l6-6'/%3E%3C/svg%3E") no-repeat center/contain;
}
.od-breadcrumb:hover { color: var(--text-default); }

/* DS §9.21 — група з підзаголовком: breadcrumb→заголовок 12px,
   заголовок→підзаголовок 4px, група→наступний блок 16px. */
.od-title-wrap--group {
	display: flex; flex-direction: column;
	gap: 4px; margin-bottom: 16px;
}
.od-title-head {
	display: flex; flex-direction: column; gap: 12px;
}
/* Стан «лист надіслано» на екрані відновлення. Колонка з рівним кроком: текст,
   головна дія, текстова дія. «Wyślij ponownie» тримається лівого краю, як решта
   текстових дій у цих формах, а не розтягується під ширину кнопки. */
.login-done {
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.login-done-text {
	margin: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	line-height: 20px;
	color: var(--text-on-light);
}
.login-done-again { align-self: flex-start; }
/* .login-done[style*="none"] не потрібен: видимість перемикає JS інлайном, як і
   в решти видів цієї сторінки. */

.login-success {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding-top: 20px;
}
.login-success span {
	font-family: 'Outfit', sans-serif;
	font-weight: 500;
	font-size: 18px;
	color: var(--text-default);
	text-align: center;
}
.login-input-wrap.is-error {
	border-color: var(--danger);
}
.login-field-error {
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--danger);
	padding-top: 2px;
}
.login-required {
	color: var(--danger);
	margin-left: 4px;
}
/* Складений контрол «код країни + номер» (форма доступу). Геометрія та сама, що
   в кабінеті: селект ліворуч без правої межі й із заокругленням тільки зліва,
   поле праворуч добирає решту ширини. Гліф шеврона — --chevron-url бренду,
   падінг під нього виражений токенами (8 + 14 + 8), а не магічним числом. */
.login-phone {
	display: flex;
	align-items: stretch;
}
.login-phone-cc {
	flex: none;
	/* Поле, а не селект, тож ширину треба назвати числом — беремо під найдовший
	   реальний код. 88px не вистачало: Chrome резервує під «+420» ~52px разом із
	   кареткою й власним запасом, а не 34px самого тексту, тож із падінгами
	   12+30 виходило 94 при 87 доступних — останню цифру зрізало.
	   Заміряно на «+48 / +380 / +420 / +9999»: на 104 не обрізається жоден. */
	width: 104px;
	height: var(--control-height);
	box-sizing: border-box;
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding: 0 calc(var(--space-sm, 8px) * 2 + var(--icon-xs, 14px)) 0 12px;
	border: var(--border-width-default) solid var(--hover-grey);
	border-right: 0;
	border-radius: var(--radius-lg) 0 0 var(--radius-lg);
	background-color: var(--bg-surface-light, var(--surface));
	background-image: var(--chevron-url);
	background-repeat: no-repeat;
	background-position: right var(--space-sm, 8px) center;
	background-size: var(--icon-xs, 14px) var(--icon-xs, 14px);
	/* Моно — за правилом «набори знаків, які звіряють посимвольно». */
	font-family: 'JetBrains Mono', monospace;
	font-size: 14px;
	color: var(--text-on-light);
}
/* Нативні декорації datalist прибираємо ПОВНІСТЮ з розкладки, а не ховаємо
   прозорістю: з opacity:0 значок лишався в потоці й забирав ~19px усередині
   поля — «+420» не влізало, останню цифру зрізало (заміряно: scrollWidth 95
   проти clientWidth 83). Свій гліф намальований фоном, тож нативний зайвий;
   підказки від цього не зникають — вони відкриваються з фокуса й набору.
   ⚠ Псевдоелементів ТРИ, бо рушії малюють цю кнопку по-різному: Chrome —
   ::-webkit-calendar-picker-indicator, Safari (і частина збірок Chrome) —
   ::-webkit-list-button, тобто чорний трикутник, який лишався поверх нашого
   шеврона. inner-spin-button додано на випадок числових полів. */
.login-phone-cc::-webkit-calendar-picker-indicator,
.login-phone-cc::-webkit-list-button,
.login-phone-cc::-webkit-inner-spin-button {
	display: none;
	-webkit-appearance: none;
	appearance: none;
}
.login-phone-cc:focus { outline: none; border-color: var(--text-placeholder); }
.login-phone-cc:focus-visible {
	outline: var(--focus-outline-width) solid var(--border-hover-strong);
	outline-offset: 0;
}
.login-phone .login-input-wrap {
	flex: 1 1 auto;
	min-width: 0;
	border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}

/* Standalone textarea for the "Dodatkowe uwagi" field — sets its own
   border/padding rather than nesting inside .login-input-wrap. Autogrows
   between 4 and 8 rows (line-height 18px + 20px vertical padding). */
.login-textarea {
	width: 100%;
	box-sizing: border-box;
	resize: vertical;
	overflow-y: auto;
	border: var(--border-width-default) solid var(--hover-grey);
	border-radius: var(--radius-lg);
	padding: 10px 12px;
	outline: none;
	font-size: 16px;
	line-height: 18px;
	color: var(--text-on-light);
	font-family: 'Outfit', sans-serif;
	background: transparent;
	min-height: calc(4 * 18px + 20px);
	max-height: calc(8 * 18px + 20px);
	transition: border-color 160ms;
}
.login-textarea:focus { border-color: var(--text-placeholder); }
.login-textarea.is-error { border-color: var(--danger); }
.login-textarea::placeholder { color: var(--text-placeholder); }

/* «Nie pamiętam hasła» — пара до «Zapamiętaj mnie» в одному рядку, тому той
   самий кегль 14px.
   17.09: колір приглушений → АКЦЕНТНИЙ, як у прототипі на Inforeifen
   (`.app[data-brand="if"] .signin-forgot` перебиває сірий колір рядка).
   Підкреслення НЕМАЄ — ні в спокої, ні на ховері: у прототипі його тут теж
   немає, стан показує сам колір. (Спробували підкреслити 17.09 і відкотили.)
   Колір через --text-action: в Inforeifen це акцент, в OponyToMy чорнило
   (§10.20 — акцент належить Primary CTA, а поруч тут стоїть червона кнопка).
   16.09: .login-field-label-row видалений разом із переїздом цієї дії — рядок
   існував тільки заради неї. */
.login-inline-link {
	background: none;
	border: none;
	outline: none;
	padding: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--text-action);
	cursor: pointer;
	text-decoration: none;
}
.login-inline-link:hover { color: var(--text-action-hover); }
.login-inline-link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 4px;
}

/* Інлайн-лінк усередині речення — випадок, якого §10.13 не описує: там
   текстова дія стоїть окремим елементом і її виділяє позиція. Тут дія
   всередині рядка, тому лишається кегль речення (16px, 16.09: було 14) і
   підкреслення — без нього ознакою була б сама лише різниця в кольорі, що
   суперечить WCAG 1.4.1. */
.login-cta-link {
	display: block;
	width: 100%;
	text-align: center;
	background: none;
	border: none;
	padding: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	color: var(--text-muted);
	text-decoration: none;
	margin-top: 16px;
	cursor: pointer;
}
.login-cta-link span {
	color: var(--text-action);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.login-cta-link:hover span { color: var(--text-action-hover); }
.login-cta-link:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
	border-radius: 4px;
}


/* ── Екран «Zgłoszenie wysłane» ────────────────────────────────────────────
   16.09, рішення користувачки: запит доступу закінчується ОКРЕМИМ екраном, а
   не смужкою під формою. Це інша задача, ніж вхід, у неї власний стан
   «відправлено», і на мобайлі успіх під формою гірший за сторінку.

   Компонент повторює .checkout-success-* із main.css — той самий знак
   (галочка), той самий блок «що буде далі» (там дата доставки, тут — коли
   подзвонять), той самий блок підтримки внизу. Людина вже бачила цей екран
   після замовлення, вдруге його вчити не треба.
   ⚠ Розмітка й геометрія дубльовані навмисно: /login self-contained і main.css
   не вантажить (див. :root угорі файлу). Правку компонента треба нести в обидва
   місця — тому назви класів свої (.login-sent-*), щоб дубль було видно грепом,
   а не приховано під однаковим іменем. */
.login-sent-root {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login-sent-card {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.login-sent-check {
	width: 48px; height: 48px;
	background: var(--success-mark-bg);
	border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 16px;
	color: var(--surface);
}
.login-sent-title {
	font-family: var(--font-heading);
	font-weight: 700; font-size: 20px; line-height: 24px;
	color: var(--text-on-light);
	text-align: center;
	margin: 0 0 40px 0;
}
/* Іконки телефона тут немає (16.09): блок і так називає дію словами, а знак
   телефона потрібніший нижче — там, де дзвонить сама людина. */
.login-sent-call {
	width: 100%;
	display: flex; flex-direction: column; gap: 2px;
	align-items: center; text-align: center;
	margin-bottom: 40px;
}
.login-sent-call-label {
	font-family: 'Outfit', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 20px;
	color: var(--text-muted);
}
.login-sent-call-value {
	font-family: 'Outfit', sans-serif; font-weight: 600;
	font-size: 18px; line-height: 22px;
	color: var(--text-on-light);
}
.login-sent-actions {
	width: 100%;
	display: flex; flex-direction: column; gap: 16px;
}
/* Вторинна кнопка — формула ДС §10.2, бренд задають токени вгорі файлу. */
.login-secondary {
	appearance: none;
	width: 100%;
	height: var(--btn-cta-height);
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box;
	background: transparent;
	border: var(--btn-cta-secondary-border-width) solid var(--btn-cta-secondary-border-color);
	border-radius: var(--btn-cta-radius);
	font-family: 'Outfit', sans-serif;
	font-weight: var(--btn-font-weight);
	font-size: var(--btn-cta-font-size);
	color: var(--btn-cta-secondary-color);
	text-decoration: none;
	cursor: pointer;
	transition: background 140ms, border-color 140ms, transform 100ms;
}
.login-secondary:hover {
	background: var(--btn-cta-secondary-hover-bg);
	border-color: var(--btn-cta-secondary-hover-border);
}
.login-secondary:active { transform: scale(0.985); }
.login-secondary:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.login-sent-support {
	width: 100%;
	margin-top: 60px;
	padding: 18px 12px;
	box-sizing: border-box;
}
.login-sent-support-head {
	display: flex; align-items: center; gap: 10px;
	margin-bottom: 8px;
	color: var(--text-on-light);
}
.login-sent-support-title {
	font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px;
	color: var(--text-on-light);
}
.login-sent-support-text {
	font-family: 'Outfit', sans-serif; font-weight: 400;
	font-size: 16px; line-height: 20px;
	color: var(--text-muted);
	margin: 0 0 16px 0;
}
.login-sent-phone {
	display: block;
	font-family: 'Outfit', sans-serif; font-weight: 600; font-size: 18px;
	color: var(--text-default);
	text-decoration: none;
	margin: 0 0 2px 0;
}
.login-sent-phone:hover { color: var(--text-action); }
.login-sent-email {
	display: block;
	font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 16px;
	color: var(--text-default);
	text-decoration: none;
	margin: 2px 0;
	word-break: break-all;
}
.login-sent-email:hover { color: var(--text-action); }
.login-sent-hours {
	font-family: 'Outfit', sans-serif; font-weight: 400; font-size: 16px;
	color: var(--text-muted);
	margin: 0;
}