/* =====================================================================
   Информационные страницы с табами (Legal Info: Advertise, FAQ, Terms, Privacy,
   DMCA, Content Removal, 2257, Token) — светлая тема.

   Разметка (page-legal-info.php):
     .container-sub-info
       .headline-sub-info > .headline-sub-info-box > h1
       .head-sub-info > ul > li > a.tab[.sel] > span
       .content-sub-info > .content-sub-info-page (h2, p, a, strong, em, ol, ul, table, blockquote)

   Это полная замена прежнего файла. Прежний был рассчитан на тёмный фон и переключал
   светлую версию через @media (prefers-color-scheme: light) и body.dark — из-за этого
   на светлом фоне сайта текст и активная вкладка оставались белыми на белом (невидимы):
   .content-sub-info-page{color:#fff}, th{color:#fff}, .tab.sel{color:#fff}.
   Здесь светлая тема — единственная и заявлена как обычный CSS, без условий на тему ОС.

   Цвета из --mf-* (models-filter.css), при их отсутствии — запасные значения.
   ===================================================================== */

.container-sub-info {
	--li-fg: var(--mf-fg, #1c2130);
	--li-muted: var(--mf-muted, #6a7282);
	--li-line: var(--mf-line, #dfe3ea);
	--li-soft: var(--mf-soft, #f3f5f9);
	--li-accent: var(--mf-accent, rgb(var(--kink-primary-rgb, 230, 24, 78)));
	--li-accent-soft: var(--mf-accent-soft, rgba(var(--kink-primary-rgb, 230, 24, 78), .10));
	width: 100%;
	color: var(--li-fg);
}
.container-sub-info *, .container-sub-info *::before, .container-sub-info *::after { box-sizing: border-box; }

/* =====================================================================
   Заголовок страницы (headline-sub-info)
   ===================================================================== */
.headline-sub-info { margin: 8px 0 16px; }
.headline-sub-info-box { display: flex; align-items: center; gap: 12px; padding: 6px 0; }

.headline-sub-info-box::before {
	content: "";
	flex: none;
	width: 6px;
	height: 32px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--li-accent), color-mix(in srgb, var(--li-accent) 70%, #7a1030));
	box-shadow: 0 0 0 2px var(--li-accent-soft);
}

.headline-sub-info-box h1 {
	margin: 0;
	font-weight: 800;
	font-size: clamp(22px, 2.4vw, 34px);
	line-height: 1.25;
	letter-spacing: .2px;
	color: var(--li-fg);
}

/* =====================================================================
   Полоса вкладок (head-sub-info)
   ===================================================================== */
.head-sub-info {
	width: 100%;
	margin: 8px 0 18px;
	background: var(--li-soft);
	border: 1px solid var(--li-line);
	border-radius: 14px;
}

.head-sub-info ul {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 10px;
	list-style: none;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: thin;
}
.head-sub-info ul::-webkit-scrollbar { height: 6px; }
.head-sub-info ul::-webkit-scrollbar-thumb { background: var(--li-line); border-radius: 6px; }

.head-sub-info .tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	height: 40px;
	padding: 0 18px;
	color: var(--li-muted);
	font-weight: 700;
	font-size: 14px;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	background: #fff;
	border: 1px solid var(--li-line);
	border-radius: 999px;
	transition: color .15s ease, background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.head-sub-info .tab > span { line-height: 1; }

.head-sub-info .tab:hover,
.head-sub-info .tab:focus-visible {
	color: var(--li-accent);
	background: var(--li-accent-soft);
	border-color: var(--li-accent);
	outline: 0;
}
.head-sub-info .tab:active { transform: translateY(1px); }

/* активная вкладка: заливка акцентом, текст всегда белый — контраст держится вне зависимости от --li-accent */
.head-sub-info .tab.sel,
.head-sub-info .tab.sel:hover,
.head-sub-info .tab.sel:focus-visible {
	color: #fff;
	background: linear-gradient(180deg, var(--li-accent), color-mix(in srgb, var(--li-accent) 82%, #000));
	border-color: transparent;
	box-shadow: 0 6px 16px var(--li-accent-soft);
}
.head-sub-info .tab.sel > span { color: inherit; }

/* =====================================================================
   Контент (content-sub-info-page)
   ===================================================================== */
.content-sub-info { width: 100%; max-width: 100%; margin: 12px 0 40px; }

.content-sub-info-page {
	color: var(--li-fg);
	font-size: 16.5px;
	line-height: 1.75;
	letter-spacing: .1px;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	hyphens: auto;
}

.content-sub-info-page h2 {
	position: relative;
	margin: 28px 0 12px;
	padding-left: 14px;
	color: var(--li-fg);
	font-weight: 800;
	font-size: clamp(18px, 1rem + .9vw, 22px);
	line-height: 1.3;
	letter-spacing: .2px;
}
.content-sub-info-page h2:first-child { margin-top: 0; }
.content-sub-info-page h2::before {
	content: "";
	position: absolute;
	top: .2em;
	bottom: .2em;
	left: 0;
	width: 4px;
	border-radius: 4px;
	background: linear-gradient(180deg, var(--li-accent), color-mix(in srgb, var(--li-accent) 70%, #7a1030));
}

.content-sub-info-page p { margin: 0 0 14px; }
.content-sub-info-page :last-child { margin-bottom: 0; }

/* ссылки */
.content-sub-info-page a {
	color: var(--li-accent);
	text-decoration: underline;
	text-decoration-color: var(--li-accent-soft);
	text-underline-offset: 2px;
	transition: color .15s ease, text-decoration-color .15s ease;
}
.content-sub-info-page a:hover { color: color-mix(in srgb, var(--li-accent) 80%, #000); text-decoration-color: currentColor; }

/* акценты текста — наследуют цвет абзаца, не перекрашиваются в белый */
.content-sub-info-page strong { color: inherit; font-weight: 800; }
.content-sub-info-page em {
	color: inherit;
	font-style: italic;
	text-decoration: underline dotted var(--li-accent-soft);
	text-underline-offset: 2px;
}

/* нумерованные списки: цифра в кружке-чипе */
.content-sub-info-page ol { counter-reset: item; list-style: none; margin: 0 0 16px; padding: 0; }
.content-sub-info-page ol > li { position: relative; counter-increment: item; margin: 8px 0 10px; padding-left: 44px; }
.content-sub-info-page ol > li::before {
	content: counter(item) ".";
	position: absolute;
	top: .1em;
	left: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 26px;
	color: var(--li-accent);
	font-weight: 700;
	background: var(--li-accent-soft);
	border-radius: 8px;
}

/* маркированные списки: точка-акцент */
.content-sub-info-page ul { list-style: none; margin: 0 0 16px; padding: 0; }
.content-sub-info-page ul > li { position: relative; margin: 8px 0; padding-left: 28px; }
.content-sub-info-page ul > li::before {
	content: "";
	position: absolute;
	top: .72em;
	left: 6px;
	width: 10px;
	height: 10px;
	background: var(--li-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px var(--li-accent-soft);
}
.content-sub-info-page li ul,
.content-sub-info-page li ol { margin-top: 8px; }

/* таблицы */
.content-sub-info-page table { width: 100%; margin: 16px 0; font-size: 15px; border-collapse: collapse; }
.content-sub-info-page th,
.content-sub-info-page td { padding: 10px 12px; border: 1px solid var(--li-line); }
.content-sub-info-page th { color: var(--li-fg); font-weight: 700; text-align: left; background: var(--li-soft); }

/* цитаты */
.content-sub-info-page blockquote {
	margin: 14px 0;
	padding: 12px 14px;
	color: var(--li-fg);
	background: var(--li-accent-soft);
	border-left: 4px solid var(--li-accent);
	border-radius: 6px;
}

/* =====================================================================
   Адаптив
   ===================================================================== */
@media (max-width: 1024px) {
	.head-sub-info ul { padding: 8px; }
	.head-sub-info .tab { height: 38px; padding: 0 14px; font-size: 13.5px; }
}
@media (max-width: 640px) {
	.head-sub-info .tab { height: 36px; padding: 0 12px; font-size: 13px; }
	.content-sub-info-page { font-size: 15.5px; }
}

@media (prefers-reduced-motion: reduce) {
	.head-sub-info .tab, .content-sub-info-page a { transition: none; }
}