/* Stylesheet for the static help section
   Tokens mirror the landing page (src/components/app/global.sss and styles.sss) so that
   /help reads as part of the same site: same Montserrat, same background gradient, same
   container width and link colour */

:root {
	--gg-ink: #000;
	--gg-ink-muted: #5b6577;
	--gg-link: #3c3c3c;
	--gg-accent: #454e6d;
	--gg-logo: #809cbb;
	--gg-card: #fff;
	--gg-rule: #dde4ed;
	--gg-container: 1220px;
	--gg-reading: 820px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	-webkit-tap-highlight-color: transparent;
}

body {
	margin: 0;
	min-height: 100vh;
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--gg-ink);
	background-color: #d6dee8;
	background-image: linear-gradient(180deg, #ced6e1 0%, #f3faff 100%);
	background-attachment: fixed;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.container {
	width: 100%;
	max-width: var(--gg-container);
	margin: 0 auto;
	padding: 0 15px;
}

@media (min-width: 375px) {
	.container {
		padding: 0 30px;
	}
}

a {
	color: var(--gg-link);
	text-decoration: none;
	transition: color .2s ease;
}

a:hover {
	color: var(--gg-accent);
}

/* Header */

.siteHeader {
	display: flex;
	align-items: center;
	padding: 25px 0;
}

.siteHeader__right {
	display: flex;
	align-items: center;
	margin-left: auto;
}

.siteHeader__logo {
	display: inline-flex;
	align-items: center;
	color: var(--gg-logo);
}

.siteHeader__logo svg {
	display: block;
	fill: currentColor;
}

.siteHeader__logo svg + svg {
	margin: 0 0 0 12px;
}

/* Language selector — mirrors the landing page's dropdown (styles.sss .langSelector*)
   so the same control appears here, backed by the same `lang` cookie */

.langSelector {
	position: relative;
}

.langSelectorBtn {
	display: flex;
	align-items: center;
	padding: 13px 12px;
	background: none;
	border: 2px solid rgba(128, 156, 187, .25);
	border-radius: 4px;
	cursor: pointer;
}

.langSelectorBtn__flag {
	flex: none;
	display: flex;
	width: 20px;
	height: 14px;
}

.langSelectorBtn__flag svg {
	width: 20px;
	height: 14px;
}

.langSelectorBtn__arrowWrap {
	flex: none;
	display: flex;
	margin: 0 0 0 9px;
	color: var(--gg-logo);
}

.langSelectorBtn__arrowWrap svg {
	fill: currentColor;
	transform: rotate(180deg);
	transition: transform .2s ease;
}

.langSelector_open .langSelectorBtn__arrowWrap svg {
	transform: rotate(0);
}

.langSelectorBody {
	position: absolute;
	top: 100%;
	right: 0;
	min-width: 150px;
	margin: 8px 0 0;
	background-color: #ebeff2;
	border-radius: 4px;
	box-shadow: 0 2px 4px rgba(69, 78, 109, .15);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, visibility .2s ease, transform .2s ease;
	z-index: 20;
}

.langSelector_open .langSelectorBody {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.langSelectorBody__item + .langSelectorBody__item {
	border-top: 1px solid rgba(69, 78, 109, .1);
}

.langSelectorLang {
	display: flex;
	align-items: center;
	width: 100%;
	padding: 12px;
	background-color: transparent;
	border: 0;
	font-family: inherit;
	font-size: 14px;
	color: var(--gg-logo);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.langSelectorBody__item:first-child .langSelectorLang {
	border-radius: 4px 4px 0 0;
}

.langSelectorBody__item:last-child .langSelectorLang {
	border-radius: 0 0 4px 4px;
}

.langSelectorLang:not(.langSelectorLang_active):hover,
.langSelectorLang_active {
	background-color: var(--gg-accent);
	color: #fff;
}

.langSelectorLang__flag {
	flex: none;
	display: flex;
	width: 20px;
	height: 14px;
}

.langSelectorLang__flag svg {
	width: 20px;
	height: 14px;
}

.langSelectorLang__name {
	margin: 0 0 0 10px;
	white-space: nowrap;
}

/* Page shell */

.page {
	padding: 10px 0 60px;
}

.breadcrumbs {
	max-width: var(--gg-reading);
	margin: 0 auto 18px;
	font-size: 14px;
	color: var(--gg-ink-muted);
}

.breadcrumbs a {
	color: var(--gg-ink-muted);
}

.breadcrumbs a:hover {
	color: var(--gg-accent);
}

.breadcrumbs__sep {
	margin: 0 8px;
	opacity: .5;
}

/* The current topic, which can be a full article title — allowed to wrap rather than
   overflow the container on narrow screens */
.breadcrumbs__current {
	overflow-wrap: anywhere;
}

.card {
	max-width: var(--gg-reading);
	margin: 0 auto;
	padding: 34px 30px 40px;
	background-color: var(--gg-card);
	border-radius: 14px;
	box-shadow: 0 6px 28px rgba(69, 78, 109, .1);
}

@media (min-width: 768px) {
	.card {
		padding: 46px 54px 54px;
	}
}

.pageTitle {
	margin: 0 0 10px;
	font-size: 28px;
	font-weight: 600;
	line-height: 1.25;
	color: var(--gg-accent);
}

@media (min-width: 768px) {
	.pageTitle {
		font-size: 34px;
	}
}

.pageMeta {
	margin: 0 0 26px;
	font-size: 13px;
	color: var(--gg-ink-muted);
}

/* Article body — the tags the ingest allow-list can emit */

.prose {
	font-size: 16px;
}

.prose > *:first-child {
	margin-top: 0;
}

.prose > *:last-child {
	margin-bottom: 0;
}

.prose p {
	margin: 0 0 16px;
}

.prose a {
	color: #2f6db3;
	text-decoration: underline;
	text-decoration-color: rgba(47, 109, 179, .35);
	text-underline-offset: 2px;
	overflow-wrap: anywhere;
}

.prose a:hover {
	color: #1d4d84;
	text-decoration-color: currentColor;
}

.prose strong {
	font-weight: 600;
}

.prose h2,
.prose h3,
.prose h4 {
	margin: 32px 0 12px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--gg-accent);
}

.prose h2 {
	font-size: 24px;
}

.prose h3 {
	font-size: 20px;
}

.prose h4 {
	font-size: 18px;
}

.prose ol,
.prose ul {
	margin: 0 0 16px;
	padding-left: 24px;
}

.prose li {
	margin: 0 0 8px;
}

.prose code {
	padding: 2px 6px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .9em;
	background-color: #f1f4f9;
	border-radius: 4px;
}

.prose pre {
	margin: 0 0 16px;
	padding: 14px 16px;
	overflow-x: auto;
	background-color: #f1f4f9;
	border-radius: 8px;
}

.prose pre code {
	padding: 0;
	background: none;
}

/* Screenshots keep their intrinsic width/height attributes, so reserving space via
   aspect-ratio costs nothing and stops the page jumping as they load */
.prose figure {
	margin: 26px 0;
}

.prose img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--gg-rule);
	border-radius: 8px;
}

.prose figcaption {
	margin: 10px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--gg-ink-muted);
	text-align: center;
}

/* Article footer — language switch */

.articleFooter {
	max-width: var(--gg-reading);
	margin: 22px auto 0;
	font-size: 14px;
	text-align: center;
	color: var(--gg-ink-muted);
}

.articleFooter a {
	color: var(--gg-accent);
	font-weight: 500;
}

/* Index */

.indexIntro {
	margin: 0 0 22px;
	color: var(--gg-ink-muted);
}

.searchBox {
	margin: 0 0 8px;
}

.searchBox__input {
	width: 100%;
	padding: 13px 16px;
	font-family: inherit;
	font-size: 15px;
	color: var(--gg-ink);
	background-color: #f7f9fc;
	border: 2px solid rgba(128, 156, 187, .25);
	border-radius: 8px;
	transition: border-color .2s ease, background-color .2s ease;
	-webkit-appearance: none;
	appearance: none;
}

.searchBox__input::placeholder {
	color: #93a0b4;
}

.searchBox__input:focus {
	outline: none;
	background-color: #fff;
	border-color: var(--gg-logo);
}

.articleList {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* border-bottom on every row rather than a sibling selector, so rows disappearing to the
   language filter or the search cannot leave a stray rule behind */
.articleList__item {
	border-bottom: 1px solid var(--gg-rule);
}

.articleList__item[hidden] {
	display: none;
}

/* Language filtering
   The early inline script stamps data-content-lang on <html> before the body is parsed, so
   the list is already correct on first paint. With scripting off no attribute is set and
   every article stays listed, which is also what crawlers see */
html[data-content-lang="en"] .articleList__item[data-lang="ru"],
html[data-content-lang="ru"] .articleList__item[data-lang="en"] {
	display: none;
}

.articleLink {
	display: block;
	padding: 18px 0;
}

/* Preview — the article's lead screenshot, as the old channel showed per post.
   Sitting below the text it needs no fixed box, so there is nothing to letterbox against
   and nothing to crop: the width/height attributes carry the real aspect ratio and the
   height cap just scales it down. These are pictures of error dialogs, and both cropping
   and letterboxing made them worse */
.articleLink__preview {
	display: block;
	margin: 14px 0 0;
}

.articleLink__preview img {
	display: block;
	/* Bounded by both edges, never upscaled: auto sizing plus the two maxima keeps the
	   real aspect ratio, so a tall screenshot uses the height and a wide one the width */
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 340px;
	border: 1px solid var(--gg-rule);
	border-radius: 6px;
}

.articleLink__preview_empty {
	display: none;
}

.articleLink__body {
	display: block;
}

.articleLink__title {
	display: block;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--gg-accent);
}

.articleLink__description {
	display: block;
	margin: 6px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--gg-ink-muted);
}

/* Less vertical room on a phone, so the screenshots take a little less of it */
@media (max-width: 560px) {
	.articleLink__preview img {
		max-height: 200px;
	}
}

/* "Help topic not found" banner on the 404 document */
.notFound {
	max-width: var(--gg-reading);
	margin: 0 auto 16px;
	padding: 14px 18px;
	font-size: 15px;
	font-weight: 500;
	color: #8a4b16;
	background-color: #fdf1e3;
	border: 1px solid #f0d5b4;
	border-radius: 10px;
}

.searchEmpty {
	margin: 22px 0 0;
	color: var(--gg-ink-muted);
	text-align: center;
}

.searchEmpty[hidden] {
	display: none;
}

/* Share row */

.shareRow {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 12px;
	max-width: var(--gg-reading);
	margin: 20px auto 0;
}

.shareRow__label {
	font-size: 14px;
	color: var(--gg-ink-muted);
}

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

.shareRow__item {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	color: #fff;
	background-color: var(--gg-logo);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
	transition: transform .15s ease, filter .2s ease;
}

.shareRow__item:hover {
	color: #fff;
	transform: translateY(-2px);
	filter: brightness(1.08);
}

.shareRow__item svg {
	fill: currentColor;
}

.shareRow__item_telegram {
	background-color: #2aabee;
}

.shareRow__item_vk {
	background-color: #0077ff;
}

.shareRow__item_x {
	background-color: #000;
}

.shareRow__item_facebook {
	background-color: #1877f2;
}

.shareRow__item_copy {
	background-color: var(--gg-accent);
}

.shareRow__copied {
	font-size: 13px;
	font-weight: 500;
	color: #2f7a3f;
}

.shareRow__copied[hidden] {
	display: none;
}

/* Support call to action */

.support {
	max-width: var(--gg-reading);
	margin: 26px auto 0;
	text-align: center;
}

.support__hint {
	margin: 0 0 12px;
	font-size: 14px;
	color: var(--gg-ink-muted);
}

.supportButton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 28px;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	background-color: var(--gg-accent);
	border-radius: 8px;
	box-shadow: 0 4px 14px rgba(69, 78, 109, .22);
	transition: background-color .2s ease, transform .2s ease;
}

.supportButton:hover {
	color: #fff;
	background-color: #363d57;
	transform: translateY(-1px);
}

/* Footer */

.siteFooter {
	padding: 30px 0 40px;
	font-size: 13px;
	color: var(--gg-ink-muted);
	text-align: center;
}