/*
	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;
	/* 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;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100vh; }
body {
	background: var(--bg-page);
	font-family: 'Outfit', system-ui, -apple-system, sans-serif;
	color: var(--text-default);
}
.login-page {
	max-width: 420px;
	margin: 0 auto;
	padding: 32px 24px 40px;
	display: flex;
	flex-direction: column;
	gap: 0;
}
.login-title {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 20px;
	line-height: 24px;
	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 {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 16px;
}
.login-lang select {
	appearance: none;
	background: transparent;
	border: 1px solid var(--border-input);
	border-radius: 6px;
	padding: 6px 24px 6px 10px;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--text-on-light);
	cursor: pointer;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 14 14' fill='none'><path d='M3.8 5.4 7 8.6l3.2-3.2' stroke='%23323744' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/></svg>");
	background-repeat: no-repeat;
	background-position: right 8px center;
}
.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;
	gap: 20px;
	margin-top: 16px;
}
.login-field {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.login-field-label {
	font-family: 'JetBrains Mono', monospace;
	font-weight: 700;
	font-size: 14px;
	color: var(--text-on-light);
	text-transform: uppercase;
}
.login-input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	border: 1.5px solid var(--border-input);
	border-radius: 6px;
	padding: 10px 12px;
	transition: border-color 160ms;
}
.login-input-wrap:focus-within {
	border-color: var(--accent-primary);
}
.login-input-wrap input {
	flex: 1;
	border: none;
	outline: none;
	background: transparent;
	font-family: 'Outfit', sans-serif;
	font-size: 16px;
	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-remember {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	user-select: none;
}
.login-remember input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--border-input);
	border-radius: 4px;
	background: var(--surface);
	cursor: pointer;
	position: relative;
	flex-shrink: 0;
	transition: background 140ms, border-color 140ms;
}
.login-remember input[type="checkbox"]:checked {
	background: var(--accent-primary);
	border-color: var(--accent-primary);
}
.login-remember input[type="checkbox"]:checked::after {
	content: '';
	position: absolute;
	left: 4px;
	top: 1px;
	width: 6px;
	height: 10px;
	border: solid var(--text-inverted);   /* галочка поверх accent-заливки */
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}
.login-remember label {
	font-family: 'Outfit', sans-serif;
	font-size: 15px;
	color: var(--text-on-light);
	cursor: pointer;
}
.login-submit {
	width: 100%;
	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;
}
.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;
}
/* 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: 1.5px solid var(--border-input);
	border-radius: 6px;
	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(--accent-primary); }
.login-textarea.is-error { border-color: var(--danger); }
.login-textarea::placeholder { color: var(--text-placeholder); }

/* Flex row for label + inline action (used for "Zapomniałeś hasła?"). */
.login-field-label-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.login-inline-link {
	background: none;
	border: none;
	outline: none;
	padding: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--accent-primary);
	cursor: pointer;
	text-decoration: none;
}
.login-inline-link:hover { color: var(--accent-pressed); text-decoration: underline; }

.login-cta-link {
	display: block;
	width: 100%;
	text-align: center;
	background: none;
	border: none;
	padding: 0;
	font-family: 'Outfit', sans-serif;
	font-size: 14px;
	color: var(--text-muted);
	text-decoration: none;
	margin-top: 16px;
	cursor: pointer;
}
.login-cta-link span {
	color: var(--accent-primary);
	text-decoration: underline;
}
.login-cta-link:hover span { color: var(--accent-pressed); }
