/* ============================================================
   Fortuna — WebUI по общекомандному гайду DESIGN.md
   (+ проектные уточнения guides/UI.md).
   Терминальная моно-иерархия: строки-«вывод», лид-маркеры,
   accent-инверсия победителя, каретка-курсор. Темы —
   theme-auto (default, prefers-color-scheme) / light / dark.
   Обязательные токены на <html>: --bg --card --border --text
   --muted --accent --on-accent --track --ok --bad; производные
   текстовые: --accent-ink, --bad-ink (контраст ≥4.5:1, тест
   contrast_test.go). Глифы — набор гайда (◉ ┃ …).
   Сетка: шаг 4px, контейнер 640px. Радиус 4px — только интерактив.
   Без теней, градиентов и глоу.
   ============================================================ */

/* ---------- Токены ---------- */

:root,
.theme-light {
	/* базовые (палитра гайда DESIGN.md) */
	--bg: #f6f7f9;          /* светлый фон */
	--text: #1f2530;        /* основной текст (14.3:1 на bg) */
	--accent: #11B69E;      /* brand: действие/метрика */
	--on-accent: #062a24;   /* текст на accent (6.0:1) */
	--ok: #11B69E;          /* норма = brand */
	--bad: #ff6583;         /* ошибка/необратимость (графика) */

	/* производные нейтральные оттенки палитры */
	--card: #eceef2;        /* подложки, поля, невыбранные варианты */
	--border: #d9dde3;      /* hairline-линейки реестра */
	--muted: #4b5563;       /* вторичный текст (7.0:1 на bg, 6.5:1 на card) */
	--track: #e0e3e9;       /* нейтральная подложка треков */

	/* производные текстовые варианты семантики (≥4.5:1 на bg/card) */
	--accent-ink: #086b5d;  /* ссылки/акцентный текст (6.0:1) */
	--bad-ink: #c92350;     /* текст ошибок (5.1:1) */
	--placeholder: #5a6474; /* плейсхолдеры полей на card */
	--accent-strong: #0ea18d; /* hover accent-кнопок */

	/* типографика — моно главный носитель характера */
	--font-ui: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	--font-display: var(--font-ui);

	/* движение и форма */
	--t-micro: 240ms;
	--ease: cubic-bezier(0.2, 0.6, 0.28, 1);
	--radius: 4px;
}

.theme-dark {
	--bg: #232323;          /* тёмный фон (палитра гайда) */
	--text: #edeef0;        /* основной текст (13.5:1 на bg) */
	--accent: #11B69E;
	--on-accent: #062a24;
	--ok: #11B69E;
	--bad: #ff6583;         /* на тёмном фоне читаем и как текст (5.6:1) */

	--card: #2b2b2b;
	--border: #3d3d3d;
	--muted: #a6adb8;       /* 7.0:1 на bg, 6.3:1 на card */
	--track: #3a3a3a;

	--accent-ink: #4ed8c4;  /* светлый brand-текст для тёмного фона (8.9:1) */
	--bad-ink: #ff6583;
	--placeholder: #8b93a1;
	--accent-strong: #0ea18d;
}

/* theme-auto: тёмная системная схема. Блок токенов держать
   синхронно с .theme-dark (проверяется тестом contrast_test.go). */
@media (prefers-color-scheme: dark) {
	.theme-auto {
		--bg: #232323;
		--text: #edeef0;
		--accent: #11B69E;
		--on-accent: #062a24;
		--ok: #11B69E;
		--bad: #ff6583;

		--card: #2b2b2b;
		--border: #3d3d3d;
		--muted: #a6adb8;
		--track: #3a3a3a;

		--accent-ink: #4ed8c4;
		--bad-ink: #ff6583;
		--placeholder: #8b93a1;
		--accent-strong: #0ea18d;
	}
}

/* ---------- Шрифты (self-host, cyrillic+latin, swap) ---------- */

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-500.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "JetBrains Mono";
	src: url("../fonts/jetbrains-mono-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* ---------- Сброс и база ---------- */

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: var(--text);
	background-color: var(--bg);
}

::selection { background-color: var(--card); color: var(--text); }

[hidden] { display: none !important; }
.hidden { display: none !important; }

a { color: var(--accent-ink); }

a:hover { text-decoration: underline; }

:focus-visible {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* ---------- Контейнер ---------- */

.container {
	max-width: 640px;
	margin: 0 auto;
	padding: clamp(20px, 4vh, 36px) 20px 64px;
}

/* ---------- Футер с версией (VERSIONING.md §7) ---------- */

.footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 16px;
	margin-top: 48px;
	padding-top: 16px;
	border-top: 1px solid var(--border);
	font-size: 13px;
	line-height: 20px;
	color: var(--muted);
}

/* ---------- Переключатель тем (guides/UI.md) ---------- */

.theme-bar {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 32px;
	padding: 0;
	border: 0;
	min-width: 0;
}

.theme-legend {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.theme-prefix {
	font-size: 13px;
	line-height: 20px;
	color: var(--muted);
}

.theme-chip {
	position: relative;
	cursor: pointer;
}

.theme-chip input {
	position: absolute;
	opacity: 0;
	width: 0;
}

.theme-chip-label {
	display: inline-block;
	padding: 2px 10px;
	font-size: 13px;
	line-height: 20px;
	color: var(--text);
	background-color: var(--card);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: background-color var(--t-micro) var(--ease),
		border-color var(--t-micro) var(--ease),
		color var(--t-micro) var(--ease);
}

.theme-chip:hover .theme-chip-label { border-color: var(--accent-ink); }

.theme-chip input:checked + .theme-chip-label {
	color: var(--on-accent);
	background-color: var(--accent);
	border-color: var(--accent);
}

.theme-chip input:focus-visible + .theme-chip-label {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

/* ---------- Знак-глиф «◉» (набор гайда DESIGN.md) ---------- */

.coin-mark {
	display: inline-block;
	font-weight: 700;
	line-height: 1;
	color: var(--accent);
}

/* ---------- Строка бренда: глиф + Fortuna + тэглайн ---------- */

.brand-line {
	display: flex;
	align-items: baseline;
	gap: 10px;
	margin: 0;
	color: var(--text);
	text-decoration: none;
}

a.brand-line:hover { text-decoration: none; }

.brand-line .coin-mark {
	align-self: center;
	flex: none;
	font-size: 24px;
}

.brand-name {
	font-size: 17px;
	font-weight: 700;
	line-height: 24px;
}

.brand-tag {
	font-size: 13px;
	line-height: 20px;
	color: var(--muted);
}

/* ---------- Шапка страниц жребия ---------- */

.page-head {
	margin: 0 0 36px;
	text-align: left;
}

/* ---------- Главная: герой ---------- */

.hero { margin: 0 0 44px; }

.hero .brand-line .coin-mark { font-size: 28px; }

.hero-title {
	margin: 24px 0 12px;
	font-size: clamp(2rem, 8vw, 2.75rem);
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: -0.02em;
}

/* Каретка-курсор после заголовка (глиф «┃» из набора гайда);
   reduced-motion — статична. */
.hero-title::after {
	content: "┃";
	margin-left: 0.08em;
	color: var(--accent);
	animation: caret-blink 1.1s steps(1) infinite;
}

@keyframes caret-blink {
	50% { opacity: 0; }
}

.hero-lead {
	margin: 20px 0 0;
	max-width: 36em;
	font-size: 14px;
	line-height: 20px;
	color: var(--muted);
}

/* ---------- Форма создания ---------- */

.create-form { margin: 0; }

.field { margin: 0 0 24px; }

.field label {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.hint {
	font-weight: 400;
	text-transform: none;
	color: var(--muted);
}

.field input,
.field textarea {
	width: 100%;
	padding: 12px 14px;
	font: inherit;
	line-height: 24px;
	color: var(--text);
	background-color: var(--card);
	border: none;
	border-radius: var(--radius);
}

.field textarea { resize: vertical; }

.field input::placeholder,
.field textarea::placeholder { color: var(--placeholder); }

.field input:focus,
.field textarea:focus {
	outline: 2px solid var(--text);
	outline-offset: 2px;
}

.options-counter {
	display: block;
	min-height: 20px;
	margin-top: 6px;
	font-size: 13px;
	line-height: 20px;
	color: var(--muted);
}

.field-error {
	margin: 8px 0 0;
	font-size: 14px;
	line-height: 20px;
	color: var(--bad-ink);
}

/* ---------- Тип жребия в форме (specs/006-draw-types) ----------
   Radio-чипы — рифма к переключателю тем: checked — accent. */

.type-field {
	margin: 0 0 24px;
	padding: 0;
	border: 0;
}

.type-legend {
	padding: 0;
	margin-bottom: 8px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: var(--text);
}

.type-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Поле «число победителей» — узкое число, не на всю ширину. */
.pick-n-input { max-width: 12ch; }

.form-error {
	margin-bottom: 24px;
	padding: 10px 14px;
	font-size: 14px;
	line-height: 20px;
	color: var(--bad-ink);
	border-inline-start: 3px solid var(--bad);
}

/* ---------- Кнопки ----------
   Базовая .btn — accent-кнопка (--accent/--on-accent);
   secondary переопределяет. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-ui);
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	min-height: 52px;
	padding: 12px 28px;
	color: var(--on-accent);
	background-color: var(--accent);
	border: 1px solid transparent;
	border-radius: var(--radius);
	cursor: pointer;
	text-decoration: none;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--t-micro) var(--ease),
		border-color var(--t-micro) var(--ease),
		color var(--t-micro) var(--ease),
		transform var(--t-micro) var(--ease);
}

.btn:hover { background-color: var(--accent-strong); }

.btn:active { transform: translateY(1px); }

.btn:disabled { cursor: default; opacity: 0.7; }

.btn-primary { width: 100%; }

.btn-reveal {
	width: 100%;
	min-height: 60px;
}

.btn-reveal.is-busy { opacity: 0.7; }

.btn-secondary {
	color: var(--text);
	background-color: var(--card);
}

.btn-secondary:hover {
	background-color: var(--card);
	border-color: var(--text);
}

.btn-secondary.is-copied {
	color: var(--accent-ink);
	border-color: var(--accent-ink);
}

/* ---------- Сцена жребия (ожидание и результат) ---------- */

.scene { text-align: center; }

.draw-title {
	margin: 0 0 8px;
	font-size: clamp(1.375rem, 5.5vw, 1.75rem);
	line-height: 1.3;
	font-weight: 700;
	overflow-wrap: anywhere;
}

.draw-desc {
	margin: 0 0 20px;
	font-size: 14px;
	line-height: 20px;
	color: var(--muted);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* Статус — терминальная метка в скобках: [ ЖРЕБИЙ ЖДЁТ ]. */
.draw-status {
	margin: 0 0 4px;
	font-size: 12px;
	line-height: 18px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--text);
}

.draw-status::before { content: "[ "; }

.draw-status::after { content: " ]"; }

.draw-date {
	display: block;
	margin: 0;
	font-size: 13px;
	line-height: 20px;
	color: var(--muted);
}

.draw-dates {
	display: flex;
	flex-direction: column;
	gap: 2px;
	align-items: center;
	margin: 24px 0 0;
	transition: opacity var(--t-micro) var(--ease);
}

/* Таймстемп броска — сразу под статусом «Жребий завершён». */
.reveal-mint { margin: 0 0 4px; }

/* Прогноз «что решит жребий» на странице ожидания (specs/006 US3):
   терминальная каретка «┃» — акцент, как у глифа бренда. */
.draw-verdict {
	margin: 2px 0 4px;
	font-size: 13px;
	line-height: 20px;
	color: var(--text);
}

.draw-verdict::before {
	content: "┃ ";
	font-weight: 700;
	color: var(--accent);
}

/* ---------- Реестр вариантов ----------
   Строки-«вывод» с лид-маркерами и hairline-линейками.
   Высота однострочных вариантов одинакова во всех состояниях. */

.registry {
	list-style: none;
	margin: 24px 0 20px;
	padding: 0;
	text-align: left;
	font-size: 15px;
	line-height: 22px;
}

.registry-row {
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 12px;
	border-bottom: 1px solid var(--border);
}

.rivet {
	flex: none;
	font-weight: 700;
	line-height: 22px;
	color: var(--text);
}

.rivet::before { content: ">"; }

.registry-text {
	min-width: 0;
	flex: 1;
	overflow-wrap: anywhere;
	hyphens: auto;
}

/* ---------- Результат: победитель «закоммичен» accent-инверсией ---------- */

.registry-done .registry-row {
	margin-bottom: 4px;
	background-color: var(--card);
	border-bottom-color: var(--bg);
	transition: background-color var(--t-micro) var(--ease),
		border-color var(--t-micro) var(--ease),
		color var(--t-micro) var(--ease);
}

.registry-done .rivet { color: var(--muted); }

.registry-done .registry-text { color: var(--muted); }

/* Победитель: accent-строка; маркер и текст — on-accent
   (тёмный на brand, контраст ≥4.5:1 в обеих темах). */
.registry-done .registry-row--winner {
	margin-bottom: 8px;
	background-color: var(--accent);
	border-bottom-color: transparent;
}

.registry-done .registry-row--winner .rivet { color: var(--on-accent); }

.registry-done .registry-row--winner .registry-text { color: var(--on-accent); }

/* Знак броска: акцентный квадрат над строкой победителя (CSS-only). */
.mint-coin {
	position: absolute;
	left: 50%;
	top: 50%;
	width: 12px;
	height: 12px;
	margin: -6px 0 0 -6px;
	display: none;
	background-color: var(--accent);
	pointer-events: none;
}

/* Маркер победителя «N из» (specs/006 US1): номер-отметка 1..N рядом
   с названием — не место, а флаг «выбран». Светлая рамка на
   accent-строке победителя (контраст — как у .rivet). */
.winner-mark {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 5px;
	font-size: 12px;
	line-height: 20px;
	font-weight: 700;
	color: var(--on-accent);
	border: 1px solid var(--on-accent);
	border-radius: var(--radius);
	opacity: 0.85;
}

/* До фиксации (is-shuffling) строка ещё светлая — маркер текстовым. */
.is-shuffling .registry-row--winner .winner-mark {
	color: var(--text);
	border-color: var(--text);
}

/* Номер позиции «Перемешать» (specs/006 US2): акцентная цифра 1..K —
   порядок назначен жребием; текст строки — как у невыбранных. */
.registry-row--ordered .order-num {
	flex: none;
	min-width: 2ch;
	font-weight: 700;
	line-height: 22px;
	color: var(--accent-ink);
}

.registry-row--ordered .order-num::after { content: "."; }

.scene-note {
	margin: 16px auto 20px;
	max-width: 30em;
	font-size: 14px;
	line-height: 20px;
	color: var(--muted);
}

.reveal-form { margin: 0 auto; text-align: center; }

.onetime-warning {
	margin: 14px auto 0;
	max-width: 30em;
	font-size: 14px;
	line-height: 20px;
	color: var(--bad-ink);
}

/* ---------- Бросок и фиксация (data-fresh, app.js) ----------
   Только transform/opacity; тайминги JS (1.4s / 240ms) не трогаем. */

.reveal-result .draw-status,
.reveal-result .share-block {
	transition: opacity var(--t-micro) var(--ease);
}

.is-shuffling .registry-row { will-change: transform; }

.is-shuffling .draw-status,
.is-shuffling .draw-dates,
.is-shuffling .share-block { opacity: 0; }

/* До посадки все строки — «живые» строки вывода, победитель не выделен. */
.is-shuffling .registry-done .registry-row {
	background-color: transparent;
	border-bottom-color: var(--border);
}

.is-shuffling .registry-done .rivet { color: var(--text); }

.is-shuffling .registry-done .registry-text { color: var(--text); }

.is-shuffling .mint-coin {
	display: block;
	animation: mark-spin 0.62s linear infinite;
}

@keyframes mark-spin {
	from { transform: rotate(0deg); }
	to { transform: rotate(360deg); }
}

/* Фиксация: масштаб-удар строки победителя после посадки. */
.is-minted .registry-row--winner { animation: mint-punch 0.5s var(--ease); }

@keyframes mint-punch {
	0% { transform: scale(0.97); }
	45% { transform: scale(1.02); }
	100% { transform: scale(1); }
}

/* ---------- Строка «поделиться» ----------
   Компактный виджет мета-зоны: link: URL [Скопировать], в один ряд
   под статусом (рифма к theme: [чипы]). URL усекается многоточием,
   полное значение — в title ссылки. */

.share-block {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 12px 0 20px;
	min-width: 0;
	flex-wrap: wrap;
}

.share-prefix {
	flex: none;
	font-size: 13px;
	line-height: 20px;
	color: var(--muted);
}

.share-url {
	flex: 1 1 12ch;
	min-width: 0;
	display: flex;
	font-size: 13px;
	line-height: 20px;
	color: var(--accent-ink);
	white-space: nowrap;
	text-decoration: none;
	text-align: left;
}

/* Хост усекается многоточием, «/d/{токен}» виден целиком. */
.share-url-host {
	flex: 0 1 auto;
	min-width: 3ch;
	overflow: hidden;
	text-overflow: ellipsis;
}

.share-url-path { flex: none; }

.share-url:hover { text-decoration: underline; }

/* Компактные кнопки виджета — не 52px CTA, а служебные 32px. */
.share-block .btn {
	flex: none;
	min-height: 32px;
	padding: 5px 12px;
	font-size: 13px;
	line-height: 20px;
}

.share-block .btn-secondary { background-color: transparent; }

/* Hover — рифма с чипами тем: только смена рамки, без заливки. */
.share-block .btn-secondary:hover {
	border-color: var(--text);
}

.share-block .btn-secondary.is-copied {
	color: var(--accent-ink);
	border-color: var(--accent-ink);
}

/* ---------- 404: статус-строка как watermark ---------- */

.notfound {
	padding: clamp(28px, 9vh, 72px) 0 0;
	text-align: center;
}

.notfound .coin-mark-dim {
	display: block;
	margin: 0 auto 12px;
	font-size: 28px;
	color: var(--border);
}

.notfound .coin-mark-dim::after {
	content: "404";
	display: block;
	font-size: clamp(3rem, 10vw, 4rem);
	line-height: 1.1;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--border);
}

.notfound-title {
	margin: 0 0 10px;
	font-size: clamp(1.375rem, 5.5vw, 1.75rem);
	line-height: 1.3;
	font-weight: 700;
}

.notfound-text {
	margin: 0 0 32px;
	font-size: 14px;
	line-height: 20px;
	color: var(--muted);
}

.notfound .btn-home { width: auto; }

/* ---------- Широкие экраны ---------- */

@media (min-width: 480px) {

	.btn-create,
	.btn-reveal { width: auto; min-width: 220px; }
}

/* Узкие экраны: строке-виджету нужен воздух — кнопки компактнее,
   URL уходит на свою строку (токен виден целиком, не под кнопкой),
   кнопки — строкой ниже, выравнены вправо. */
@media (max-width: 479px) {
	.share-block .btn {
		padding: 5px 8px;
		font-size: 12px;
	}

	.share-url {
		flex-basis: calc(100% - 52px);
	}

	.share-block .btn-copy {
		margin-left: auto;
	}
}

/* ---------- Доступность движения ---------- */

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}