/* Описание лисы на английском языке. BEGIN */

/* 11111111111111111111111111111111 */
	:root {
		--brand: #1a4f8b;
		--ink: #1d2433;
		--muted: #6b7c97;
		--yellow: #fff3bf;
		--popover: #1a4f8b;
		--white: #fff;
	}

	html,
	body {
		margin: 0;
		background: #fff
	}

	body {
		font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
		color: var(--ink);
		line-height: 1.8;
		font-size: 20px;
		-webkit-text-size-adjust: 100%;
		text-size-adjust: 100%;
	}

	.intro-block {
		background: linear-gradient(180deg, #eef4fd 0%, #f6f9ff 100%);
		padding: 28px 20px;
		border-bottom: 1px solid #dfe9fb
	}

	.red-bold {
		color: red;
		font-weight: bold;
	}

	.intro-block p {
		max-width: 980px;
		margin: 0 auto;
		font-size: 20px;
		color: #20304a;
		line-height: 1.9
	}

	.content-block {
		max-width: 980px;
		margin: 28px auto 40px;
		padding: 0 20px;
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}

	.content-block h2 {
		margin: 0 0 18px;
		text-align: center;
		font-size: 38px;
		font-weight: 800;
		color: var(--brand)
	}

	/* Figure */
	.figure {
		margin: 16px 0
	}

	.figure img {
		display: block;
		width: 100%;
		max-width: 100%;
		height: auto;
		border-radius: 12px;
		box-shadow: 0 8px 26px rgba(26, 79, 139, .12);
		margin: 0 auto;
		-webkit-user-drag: none;
		user-select: none;
	}

	.figcap {
		text-align: center;
		font-size: 16px;
		color: var(--muted);
		margin-top: 10px
	}

	/* Text */
	p {
		margin-bottom: 16px
	}

	.keyword {
		color: #1a4f8b;
		font-weight: 800;
		padding: 0 4px;
		border-radius: 4px
	}

	.term {
		color: #064d06;
		font-weight: 700
	}

	.invention {
		color: #8b0000;
		font-weight: 700
	}

	.w {
		cursor: pointer;
		user-select: none
	}

	.w.sel {
		background: var(--yellow);
		border-radius: 4px;
		padding: 0 2px;
		box-shadow: inset 0 -2px 0 rgba(255, 193, 7, .45);
		color: #222;
		transition: background .08s ease-in;
	}

	/* Popover */
	#translate-popover {
		position: fixed;
		top: -9999px;
		left: -9999px;
		background: var(--popover);
		color: var(--white);
		padding: 10px 12px;
		border-radius: 10px;
		font-size: 16px;
		z-index: 2147483647;
		box-shadow: 0 10px 30px rgba(26, 79, 139, .25);
		max-width: min(80vw, 520px);
		user-select: none;
	}

	#translate-popover.hidden {
		display: none !important
	}

	#translate-popover .row {
		display: flex;
		gap: 10px;
		align-items: center;
		flex-wrap: nowrap
	}

	#translate-popover .word {
		font-weight: 800;
		white-space: nowrap
	}

	#translate-popover .spacer {
		flex: 1
	}

	#translate-popover .btn {
		cursor: pointer;
		background: rgba(255, 255, 255, .15);
		border: 0;
		border-radius: 6px;
		padding: 2px 6px
	}

	#translate-popover .btn:hover {
		background: rgba(255, 255, 255, .25)
	}

	#translate-popover .tip {
		position: absolute;
		width: 10px;
		height: 10px;
		background: var(--popover);
		transform: rotate(45deg);
		bottom: -5px;
		left: 16px
	}

	#translate-popover .phon {
		margin-top: 6px;
		font-family: system-ui, Arial;
		opacity: .95;
		display: block
	}

	#translate-popover .ru {
		margin-top: 4px;
		display: block;
		word-break: break-word
	}

	/* Mobile tweaks */
	@media (max-width:480px) {
		.figure {
			margin: 14px -4px 8px
		}

		.figure img {
			max-height: 44vh;
			object-fit: contain
		}

		.figcap {
			font-size: 14px;
			padding: 0 6px
		}

		#translate-popover {
			font-size: 15px;
			line-height: 1.5
		}

		#translate-popover .row {
			gap: 6px
		}

		#translate-popover .word {
			max-width: 55vw;
			overflow: hidden;
			text-overflow: ellipsis
		}
	}

	@media (max-width:360px) {
		.figure img {
			max-height: 40vh
		}
	}

	/* ========================= Stylish H1 titles (scoped) ========================= */
	.cat-heading {
		display: block;
		margin: 8px 0 14px;
		color: var(--ink);
		font-family: -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", Roboto, Arial, sans-serif;
		font-weight: 800;
		line-height: 1.15;
		letter-spacing: .2px;
		font-size: clamp(26px, 4.6vw, 40px);
		text-align: left;
		/* не центрируем, как h2 */
	}

	/* мягкий подложный штрих под текстом */
	.cat-heading .label {
		display: inline;
		padding: 2px .35em;
		border-radius: .6rem;
		background: linear-gradient(90deg, color-mix(in srgb, var(--brand), #ffffff 85%), transparent);
	}

	/* бейдж для числа */
	.cat-heading .num {
		display: inline-block;
		margin-right: .55rem;
		padding: .16rem .6rem;
		border-radius: 999px;
		font-weight: 800;
		font-size: .75em;
		line-height: 1.2;
		background: color-mix(in srgb, var(--brand), #ffffff 85%);
		color: var(--brand);
		vertical-align: .08em;
		user-select: none;
	}

	/* акцентная полоска снизу */
	.cat-heading::after {
		content: "";
		display: block;
		height: 4px;
		width: 72px;
		margin-top: 10px;
		border-radius: 4px;
		background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand), #ffffff 60%));
	}

	/* --- Only for <yt-caption-note> text --- */
	yt-caption-note {
		display: block;
	}

	yt-caption-note p {
		margin: 0;
		/* как у тебя и было */
		text-align: justify;
		/* растянуть строки */
		text-justify: inter-word;
		/* распределять пробелы между словами */
		text-align-last: left;
		/* последнюю строку оставить слева */
		-webkit-hyphens: auto;
		/* мягкие переносы (Safari/iOS) */
		hyphens: auto;
		overflow-wrap: break-word;
		/* без вылезания за рамку */
	}

	/* Если где-то было центрирование самого блока, снимаем его внутри */
	yt-caption-note,
	yt-caption-note * {
		text-align: inherit;
	}



	@media (max-width:420px) {
		.cat-heading {
			margin: 6px 0 12px
		}

		.cat-heading::after {
			width: 60px
		}
	}
/* 11111111111111111111111111111111 */


/* ====== ТАБЛИЦА 4 СТОЛБЦА (изолировано) ====== */
	/* ==== SCOPE: только внутри #cat-table ==== */
	#cat-table .styled-table {
		width: 100%;
		border-collapse: separate;
		border-spacing: 0;
		border-radius: 12px;
		overflow: hidden;
		margin: 20px 0;
		font-size: 16px;
		text-align: left;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		table-layout: auto;
		/* авто, чтобы таблица могла расширяться под контент */
	}

	#cat-table .blue {
		color: #0000ff;
	}

	#cat-table .bold {
		font-weight: 700;
	}

	#cat-table .styled-table th,
	#cat-table .styled-table td {
		padding: 12px;
		border: 1px solid #ddd;
		white-space: normal;
		word-wrap: break-word;
		hyphens: auto;
		text-align: left;
		vertical-align: top;
	}

	/* ====== HEADER ====== */
	#cat-table .styled-table thead {
		background: #0074D9;
	}

	#cat-table .styled-table thead th,
	#cat-table .styled-table thead th a,
	#cat-table .styled-table thead th span {
		color: #fff !important;
		font-weight: 700 !important;
	}

	/* ====== BODY ====== */
	#cat-table .styled-table td {
		font-size: 16px;
		background: #fff;
	}

	#cat-table .styled-table tr:nth-child(even) td {
		background: #f8f8f8;
	}

	/* скругления */
	#cat-table .styled-table th:first-child,
	#cat-table .styled-table td:first-child {
		border-top-left-radius: 12px;
		border-bottom-left-radius: 12px;
		text-align: center;
	}

	#cat-table .styled-table th:last-child,
	#cat-table .styled-table td:last-child {
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
	}

	#cat-table .table-container {
		width: 100%;
		margin: auto;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		padding: 10px;
	}

	#cat-table .hyphenate {
		hyphens: auto;
		white-space: normal;
		word-wrap: break-word;
	}

	#cat-table .prefix-blue {
		color: #0000ff;
		font-weight: 700;
	}

	/* ====== жирным только 2-й столбец ====== */
	#cat-table .styled-table tbody td:nth-child(2),
	#cat-table .styled-table tbody td.col-english {
		font-weight: 700 !important;
	}

	#cat-table .styled-table tbody td.col-english a,
	#cat-table .styled-table tbody td.col-english span {
		font-weight: 700 !important;
	}

	/* ==== Десктоп: EN и IPA без переносов ==== */
	#cat-table .col-english,
	#cat-table .col-transcription {
		white-space: nowrap !important;
		word-break: keep-all !important;
		overflow-wrap: normal !important;
		hyphens: none !important;
		-webkit-hyphens: none !important;
		font-variant-ligatures: none;
		min-width: max-content;
	}

	/* Размер транскрипции */
	#cat-table .col-transcription {
		font-size: clamp(11px, 2.8vw, 16px);
		line-height: 1.3;
	}

	@media (max-width:1280px) {
		#cat-table .col-transcription {
			font-size: 15px;
		}
	}

	@media (max-width:1024px) {
		#cat-table .col-transcription {
			font-size: 14px;
		}
	}

	@media (max-width:820px) {
		#cat-table .col-transcription {
			font-size: 13px;
		}
	}

	@media (max-width:640px) {
		#cat-table .col-transcription {
			font-size: 12.5px;
		}
	}

	@media (max-width:480px) {
		#cat-table .col-transcription {
			font-size: 12px;
		}
	}

	@media (max-width:360px) {
		#cat-table .col-transcription {
			font-size: 11.5px;
		}
	}

	/* ====== MOBILE: слово НЕ переносим, сжимается/переносится ТОЛЬКО транскрипция ====== */
	@media screen and (max-width:768px) {

		/* важно: даём браузеру саморегулировать ширины по содержимому */
		#cat-table .styled-table {
			table-layout: auto;
		}

		#cat-table .styled-table th,
		#cat-table .styled-table td {
			font-size: 14px;
			padding: 10px;
		}

		#cat-table .styled-table thead th,
		#cat-table .styled-table thead th a,
		#cat-table .styled-table thead th span {
			color: #fff !important;
			font-weight: 700 !important;
		}

		/* Базовые доли: 1) №, 2) EN (auto), 3) IPA (может ужиматься), 4) RU */
		#cat-table .styled-table th:nth-child(1),
		#cat-table .styled-table td:nth-child(1) {
			width: 10%;
		}

		#cat-table .styled-table th:nth-child(2),
		#cat-table .styled-table td:nth-child(2) {
			width: auto;
		}

		/* Английский — занимает сколько нужно */
		#cat-table .styled-table th:nth-child(3),
		#cat-table .styled-table td:nth-child(3) {
			width: 1%;
		}

		/* Транскрипция — позволяет сжаться и переноситься */
		#cat-table .styled-table th:nth-child(4),
		#cat-table .styled-table td:nth-child(4) {
			width: auto;
		}

		/* АНГЛИЙСКОЕ СЛОВО: НЕ переносим вообще, даже через дефис */
		#cat-table .col-english {
			white-space: nowrap !important;
			word-break: keep-all !important;
			overflow-wrap: normal !important;
			hyphens: none !important;
			min-width: max-content !important;
			/* столбец расширится под слово */
		}

		/* ТРАНСКРИПЦИЯ: может ужиматься и переноситься на новую строку */
		#cat-table .col-transcription {
			white-space: normal !important;
			word-break: break-word !important;
			overflow-wrap: anywhere !important;
			hyphens: none !important;
			/* IPA без дефисов */
			min-width: 0 !important;
			/* разрешаем ужиматься */
		}
	}
/* Описание лисы на английском языке. END */