/* Тепловая карта: каркас страницы, руки и нагрузка под клавиатурой, правая колонка
   с текстом.

   Здесь только то, чего нет на странице подбора слов. Клавиатура своя не нужна —
   она та же (keyboard.css), карту ей даёт компонент готовыми цветами, а тултип
   живёт там же, где клавиша.

   Файл подключается последним, после app.css, поэтому переопределения каркаса
   работают без !important — и по той же причине медиазапрос ниже обязателен:
   .page-keymap перебивает не только базовое правило .page, но и его медиазапрос.

   Порог один и тот же — 975 px, на котором две колонки схлопываются в одну.
   Четвёрка 1167/1071/975/640 общая на все файлы: сдвинуть порог здесь и забыть
   про остальные значит развалить каркас по ширине. */

/* Колонок две, а не три: панели параметров на этой странице нет. Слева три карточки —
   клавиатура, руки под ней и нагрузка под руками, все по своей высоте (auto); последний
   ряд пуст намеренно, он нужен, чтобы колонка с текстом тянулась во всю высоту (1fr):
   растянуть карточки нечем, лишней высоты им не отдать */
.page-keymap {
	grid-template-rows: auto auto auto 1fr;
	grid-template-areas:
		"keys  text"
		"hands text"
		"load  text"
		".     text";
}

/* Руки — отдельная карточка под клавиатурой, а не часть её: у карточки клавиатуры
   свой отступ, и рисунок внутри неё оказался бы прижат к рядам клавиш */
.pane-hands {
	grid-area: hands;
	background: #fff;
	padding: 15px;
	border-radius: 15px;
}

.hands {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
}

/* Ширину задаёт колонка (её ширина — ширина клавиатуры), высоту — пропорция рисунка.
   Потолок нужен, чтобы на широком окне руки не съели высоту у страницы: колонка
   с текстом фиксирована по вьюпорту, и всё, что забрали руки, теряет редактор.
   position — под тултип: он позиционируется от руки, а не от карточки */
.hand {
	position: relative;
	flex: 1 1 0;
	max-width: 11rem;
}

.hand svg {
	display: block;
	width: 100%;
	height: auto;
}

/* Левая рука — та же форма зеркально: руки обязаны быть отражением друг друга,
   и второй копии рисунка для этого не нужно (тот же приём, что у HandIcon) */
.hand.left svg {
	transform: scaleX(-1);
}

/* Заливка у пальца белая не для вида: капсула перекрывает линию ладони под пальцем,
   и силуэт остаётся цельным. Она же ловит наведение по всей площади пальца */
.hand .palm,
.hand .finger rect {
	fill: #fff;
	stroke: var(--bs-border-color);
	stroke-width: 1.5;
}

/* Подушечка без нагрева цвета не получает вовсе — «ни разу» и «редко» обязаны
   различаться. Контур у неё тоньше контура пальца: это деталь внутри фигуры */
.hand .pad {
	fill: #fff;
	stroke: var(--bs-border-color);
	stroke-width: 1;
}

/* Плашка встаёт над подушечкой: координата приходит инлайном из tipAnchor, а сдвиг
   на себя — здесь, чтобы JS не знал про размеры плашки. pointer-events снят: тултип
   висит над пальцем, и без этого он перехватывал бы наведение сам у себя.

   Своя плашка, а не .key-tip: тот привязан к клавише (позиционируется от её верхнего
   края и прижимается краем по def.align). Совпадать обязан только вид — тултипы
   на одной странице должны выглядеть одинаково */
.hand-tip {
	position: absolute;
	z-index: 5;
	transform: translate(-50%, calc(-100% - .5rem));
	padding: .3rem .55rem;
	border-radius: 4px;
	background: rgba(33, 37, 41, .95);
	color: #fff;
	font-size: .8125rem;
	line-height: 1.3;
	text-align: left;
	white-space: nowrap;
	pointer-events: none;
}

.hand-tip-title,
.hand-tip-total,
.hand-tip-note {
	display: block;
}

.hand-tip-note {
	color: rgba(255, 255, 255, .7);
}

/* Нагрузка — третья карточка левой колонки, тем же оформлением, что и руки:
   разрезы одного счётчика и стоять должны одинаково */
.pane-load {
	grid-area: load;
	background: #fff;
	padding: 15px;
	border-radius: 15px;
}

/* Три колонки на все пять рядов сразу: подпись и процент по своей ширине, полоса
   забирает остаток. Строки поэтому не обёрнуты в свой элемент — иначе колонки
   пришлось бы выравнивать между рядами вручную */
.load-rows {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: .35rem .6rem;
	font-size: .875rem;
}

.load-row-label {
	color: var(--bs-secondary-color);
}

/* Дорожка — весь текст, заливка — доля ряда в нём. Ширина именно от текста, а не
   от максимума ряда: нормировка на максимум растянула бы цифровой ряд до половины
   полосы и соврала бы про абсолют — сравнение рядов между собой даёт цвет */
.load-row-track {
	height: .5rem;
	border-radius: .25rem;
	background: var(--bs-secondary-bg);
	overflow: hidden;
}

.load-row-fill {
	display: block;
	height: 100%;
	border-radius: inherit;
}

/* Моноширинные цифры: без них проценты прыгают от строки к строке и колонка
   перестаёт читаться столбиком */
.load-row-percent {
	font-variant-numeric: tabular-nums;
	text-align: right;
}

.load-hits {
	display: flex;
	gap: 1rem;
	border-top: 1px dashed #666;
	margin-top: 1rem;
	padding-top: 1rem;
	font-variant-numeric: tabular-nums;
}

/* Сноска про Shift: без неё нагрузка мизинцев на картах выглядит заниженной,
   и непонятно, ошибка это или решение */
.load-note {
	margin-top: .35rem;
}

.pane-text {
	grid-area: text;
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	background: #fff;
	padding: 15px;
	border-radius: 20px;
}

/* Ввод занимает всё, что осталось от статистики снизу. Соседей в колонке трое
   (тулбар, редактор, дропзона), поэтому отступ между ними — gap контейнера,
   а не поля соседей */
.text-source {
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: .5rem;
	min-height: 0;
}

textarea.form-control {
	min-height: auto;
}

/* Редактор и дропзона делят остаток колонки 2:1. Базис нулевой явно: при auto
   пропорции считались бы от содержимого, а его высота случайна */
.text-editor {
	flex: 1 1 0;
	min-height: 6rem;
	resize: none;
}

/* Файлы: содержимого не показываем вовсе (файл может весить сотни мегабайт) — только
   имя, размер и прогресс чтения. Рамка пунктиром — приглашение бросить сюда файл.

   Зона перестала быть label: внутри неё живут карточки файлов, а крестик карточки —
   кнопка, которой в <label> не место (button — labelable-элемент). Кликом диалог
   открывает верхняя часть, .drop-zone-label; перетаскивание принимает вся зона */
.drop-zone {
	display: flex;
	flex-direction: column;
	flex: 1 1 0;
	/* min-height: 8rem; */
	min-width: 0;
	padding: 1rem;
	border: 1px solid #adb5bd;
	border-radius: var(--bs-border-radius);
	background: #eef2f7;
	text-align: center;
}

/* flex: 1 1 auto — пока файлов нет, подсказка стоит по центру зоны, как и раньше;
   с длинным списком она ужимается до своего содержимого, а прокручивается список */
.drop-zone-label {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	flex: 1 1 auto;
	cursor: pointer;
	padding: 1rem;
	border: 2px dashed #adb5bd;
	border-radius: var(--bs-border-radius);
	background-color: rgba(255, 255, 255, 0.5);
}

/* Фокус приходит на input, а он visually-hidden — своего кольца ему не показать,
   поэтому его рисует label. Кольцо то же, что у клавиши (keyboard.css,
   .key:focus-visible): фокус на странице обязан выглядеть одинаково.
   На label, а не на зоне: :focus-within у зоны зажигали бы и крестики, у которых своё,
   родное */
.drop-zone-label:focus-within {
	border-color: #78909c;
}

/* Обводка темнеет под курсором с файлом — единственный отклик, который зона может дать
   до того, как файл отпущен */
.drop-zone.over {
	border-color: #6c757d;
	background: #e4ebf3;
}

/* Полоса стоит внутри .drop-zone-label, под подсказкой, и центрируется его же
   align-items: center — своих полей ей не нужно */
.drop-zone-progress {
	width: min(100%, 14rem);
}

/* Список не даёт зоне расти от числа файлов: прокрутка внутри, и высота редактора
   от количества файлов не зависит */
.drop-zone-files {
	display: flex;
	justify-content: center;
	flex: 0 1 auto;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: .75rem;
	min-height: 0;
	overflow-y: auto;
	max-height: 12.5rem;
}

/* Крестик стоит абсолютом, поэтому справа у карточки поле под него: имя длинное,
   и уходить под кнопку ему нельзя */
.file-card {
	position: relative;
	padding: .5rem 2.5rem .5rem 1rem;
	background: #fff;
	max-width: 220px;
	border-radius: 12px;
}

/* Размер кнопки — родной, без уменьшения: у .btn-close это 1em глифа плюс .25em полей,
   то есть 24 px мишени, и мельчить её нельзя — крестик единственный способ убрать файл */
.file-card .btn-close {
	position: absolute;
	top: .65rem;
	right: .65rem;
	width: 0.4rem;
	height: 0.4rem;
}

.file-card .btn-close:focus {
	outline: none;
	box-shadow: none;
}

.file-card-progress {
	width: min(100%, 14rem);
}

/* Статистика — итог под текстом, поэтому отделена чертой, как список слов
   на соседней странице */
.text-stats {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 1rem 0 0;
}

/* Одна колонка — тот же порог, что и у .page (app.css): области свои, потому что
   правило выше перебило бы его медиазапрос. Высота страницы при этом остаётся
   на совести .page, здесь про неё знать не нужно */
@media (max-width: 975px) {
	.page-keymap {
		grid-template-rows: none;
		grid-template-areas:
			"keys"
			"hands"
			"load"
			"text";
	}

	/* Ниже порога фиксированной высоты у страницы нет, и пропорция 2:1 без неё ничего
	   не решает — работают именно минимумы */
	.text-editor {
		min-height: 12rem;
	}

	.drop-zone {
		/* min-height: 9rem; */
	}
}