@charset "UTF-8";

/*
	Veea Support Center -- the Zendesk Guide theme for support.veea.com.

	A Copenhagen 2.6 fork redressed in the Veea Phoenix theme's language
	(../css/ in this repo). Every Copenhagen selector is kept so all twenty
	page templates render styled; what changed is the surface: tokens, type,
	buttons, fields, hairline lists and cards, all mirroring the HubSpot theme.

	RULES THAT BIND THIS FILE
	- The :root block below is a COPY of the values in ../css/consts.css, not a
	  second source of truth. When a token changes there, change it here. Never
	  add a value here that has no counterpart there without a comment saying
	  why the support site differs.
	- No settings variables from manifest.json are read for colors or fonts:
	  the design flows from tokens, mirroring the HubSpot theme's "no theme
	  settings" rule. Only the asset references below use the Zendesk
	  preprocessor.
	- Hover transitions only, on named properties. A help center is a
	  directory: no reveal system, no ambient motion (CLAUDE.md, hard rule 5,
	  "the one place this rule inverts").
	- Tabs, ASCII, US spelling.
*/

/* ============================================================
	TOKENS -- copied from ../css/consts.css (see the header comment)
	============================================================ */

:root {
	/* brand */
	--color-primary: #1865e8;
	--color-primary-hover: #0f4bb5;
	--color-secondary: #5aa87f;
	--color-secondary-hover: #4a8f6b;
	--color-dark-highlight: #ffc524;

	/* surfaces */
	--surface-white: #ffffff;
	--surface-light: #f2f6fc;
	--surface-dark: #0f192d;
	--surface-black: #020a1b;
	--surface-dark-alt: #0a0e22;
	--surface-dark-card: #1a1e42;

	/* gradients */
	--gradient-hero-navy: linear-gradient(120deg, #050814 0%, #09163f 65%, #13255c 100%);

	/* text */
	--text-body-on-light: #3c485b;
	--text-heading-on-light: #000000;
	--text-body: var(--text-body-on-light);
	--text-heading: var(--text-heading-on-light);
	--text-body-on-dark: rgba(255, 255, 255, 0.75);
	--text-heading-on-dark: #ffffff;
	--text-muted: #888888;

	/* links */
	--link-active-on-light: #103068;
	--link: var(--color-primary);
	--link-hover: var(--color-primary-hover);
	--link-active: var(--link-active-on-light);
	--link-on-dark: #6fa3f5;
	--link-hover-on-dark: #97bdf8;
	--link-active-on-dark: #bcd5fb;

	/* semantic accents */
	--accent-success: #2e9e5b;
	--accent-warning: #efa22f;
	--accent-danger: #e5484d;
	--accent-info: var(--color-primary);

	/* borders */
	--border: #bbbbbb;
	--border-light: #dddddd;
	--border-on-dark: rgba(255, 255, 255, 0.1);

	/* overlays */
	--overlay-white-10: rgba(255, 255, 255, 0.1);
	--overlay-black-10: rgba(0, 0, 0, 0.1);

	/* typography */
	--font-body: "Manrope", Helvetica, Arial, sans-serif;
	--font-heading: "Manrope", Helvetica, Arial, sans-serif;
	--font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

	--fs-xs: 11px;
	--fs-sm: 13px;
	--fs-base: 16px;
	--fs-md: 18px;
	--fs-lg: 20px;
	--fs-xl: 24px;
	--fs-h6: 16px;
	--fs-h5: 18px;
	--fs-h4: 20px;
	--fs-h3: 26px;
	--fs-h2: clamp(26px, 3.5vw, 38px);
	--fs-h1: clamp(35px, 8vw, 55px);

	--fw-regular: 400;
	--fw-body: 500;
	--fw-semibold: 600;
	--fw-heading: 700;
	--fw-button: 800;

	--lh-body: 1.8;
	--lh-h1: 1.15;
	--lh-h2: 1.2;
	--lh-h3: 1.5;
	--lh-heading: 1.6;
	--lh-tight: 1;

	--ls-h1: -0.02em;
	--ls-h2: -0.015em;
	--ls-button: 2px;

	--mb-heading: 0.4em;

	/* spacing (10px grid) */
	--space-xxs: 5px;
	--space-xs: 10px;
	--space-sm: 15px;
	--space-md: 20px;
	--space-lg: 30px;
	--space-xl: 40px;
	--space-2xl: 60px;
	--space-3xl: 80px;
	--section-y: 100px;

	/* buttons */
	--btn-padding: 8px 20px;

	/* form fields (the filled slab, see ../css/form.css) */
	--field-bg: var(--surface-white);
	--field-border: transparent;
	--field-border-focus: var(--color-primary);
	--field-text: var(--text-heading);
	--field-placeholder: var(--text-muted);
	--field-ring: 0 0 0 3px color-mix(in srgb, var(--color-primary) 18%, transparent);
	--field-padding: 14px 16px;

	/* border-drawn caret */
	--caret-size: 0.42em;
	--caret-weight: 2px;
	--caret-down: translateY(-0.15em) rotate(45deg);
	--caret-up: translateY(0.1em) rotate(-135deg);

	/* radius */
	--radius-sm: 3px;
	--radius-button: 6px;
	--radius-md: 8px;
	--radius-card: 10px;
	--radius-lg: 14px;
	--radius-pill: 30px;

	/* shadows */
	--shadow-card: 8px 8px 40px 0 rgba(0, 0, 0, 0.1);
	--shadow-header-scrolled: 0 1px 1px rgba(0, 0, 0, 0.08), 0 2px 3px rgba(0, 0, 0, 0.045);

	/* motion */
	--duration-fast: 150ms;
	--duration-base: 300ms;
	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

	/* pulse-grid static base (the hero) */
	--pulse-grid-tilt: 20deg;
	--pulse-grid-cell: 30px;
	--pulse-grid-overshoot: 18vw;

	/* layout */
	--container-max: 1800px;
	--container-narrow: 1100px;
	--container-gutter: 40px;
	--header-height: 80px;

	/* SUPPORT-SITE ONLY: the reading measure for an article body. Mirrors the
		68ch of ../css/legal.css, which styles raw richtext the same way. */
	--measure-article: 68ch;
	/* SUPPORT-SITE ONLY: the page track. A help center is a directory of
		short rows and cards; at consts.css's 1800px the rows run past what a
		reader scans in one sweep and the home cards spread into four thin
		columns. 1400px gives the home three even columns and keeps every
		list inside one eye-span. Not a change to the copied --container-max. */
	--container-max-support: 1400px;
	/* SUPPORT-SITE ONLY: the intersite strip above the header. */
	--intersite-height: 36px;
}

@media (max-width: 780px) {
	:root {
		--container-gutter: 15px;
		--section-y: 60px;
	}
}

/* ============================================================
	FONT -- Manrope, self-hosted from assets/ (one variable file per subset,
	the same six files as ../fonts/). Zendesk resolves an asset in CSS through
	its "assets" variable: the filename lowercased with the dot swapped for a
	hyphen. The unicode ranges mirror ../css/font.css exactly.
	============================================================ */

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: fallback;
	src: url("/hc/theming_assets/01M1HG5NEKBVEBEEGWNTV9531G") format("woff2");
	unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: fallback;
	src: url("/hc/theming_assets/01M1HG5NJSZ5X29ZTAGEN83ZVA") format("woff2");
	unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: fallback;
	src: url("/hc/theming_assets/01M1HG5NGG1FZN780V5EH00S43") format("woff2");
	unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: fallback;
	src: url("/hc/theming_assets/01M1HG5NGJB5RT6SDS1PFQNCN0") format("woff2");
	unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: fallback;
	src: url("/hc/theming_assets/01M1HG5N5JKKN9RERN6JQ94HTE") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
	font-family: "Manrope";
	font-style: normal;
	font-weight: 200 800;
	font-display: fallback;
	src: url("/hc/theming_assets/01M1HG5NG9WXRRJM2Z4BH0RYMS") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
	RESET -- the essentials of ../css/reset.css. Element look and feel is
	built up in the sections that follow, never here.
	============================================================ */

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

* {
	margin: 0;
	padding: 0;
}

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

body {
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

main {
	display: block;
}

img,
svg {
	display: inline-block;
	max-width: 100%;
	height: auto;
	border: 0;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: none;
	cursor: pointer;
}

[hidden],
template {
	display: none !important;
}

details {
	display: block;
}

summary {
	display: list-item;
}

/* ============================================================
	BASE -- body, headings, links, lists, code (../css/typography.css)
	============================================================ */

body {
	background: var(--surface-white);
	color: var(--text-body);
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-body);
	line-height: var(--lh-body);
	overflow-wrap: break-word;
}

@media (min-width: 1024px) {
	body > main {
		min-height: 65vh;
	}
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--text-heading);
	font-family: var(--font-heading);
	font-weight: var(--fw-heading);
	line-height: var(--lh-heading);
	margin: 0 0 var(--mb-heading);
	text-wrap: balance;
}

h1 {
	font-size: var(--fs-h1);
	letter-spacing: var(--ls-h1);
	line-height: var(--lh-h1);
}

h2 {
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
}

h3 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
}

h4 {
	font-size: var(--fs-h4);
}

h5 {
	font-size: var(--fs-h5);
}

h6 {
	font-size: var(--fs-h6);
}

p {
	margin: 0 0 var(--space-sm);
}

p:last-child {
	margin-bottom: 0;
}

a {
	color: var(--link);
	cursor: pointer;
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

a:hover {
	color: var(--link-hover);
}

a:active {
	color: var(--link-active);
}

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible {
	border-radius: var(--radius-sm);
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

/* Links inside running text get an underline (hard rule 6). */
p a,
li a,
td a,
blockquote a {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* Copenhagen's markup uses <ul> for navigation everywhere; bullets come back
	only inside authored content (article, comment and post bodies). */
ul,
ol {
	list-style: none;
}

b,
strong {
	font-weight: var(--fw-heading);
}

small {
	font-size: var(--fs-sm);
}

sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

abbr[title] {
	text-decoration: underline dotted;
}

hr {
	border: 0;
	border-top: 1px solid var(--border-light);
	margin: var(--space-lg) 0;
}

pre,
code,
kbd,
samp {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

pre {
	overflow: auto;
}

/* ============================================================
	LAYOUT -- one measure for every band (../css/layout.css)
	============================================================ */

.container,
.content-wrapper,
.header,
.footer-inner,
.error-page {
	width: 100%;
	max-width: var(--container-max-support);
	margin: 0 auto;
	padding: 0 var(--container-gutter);
}

.container-divider {
	display: none;
}

.visibility-hidden,
.recent-activity-accessibility-label,
.pagination-first-text,
.pagination-last-text {
	border: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	white-space: nowrap;
}

/* ============================================================
	BUTTONS (../css/button.css)

	Copenhagen's plain .button is the theme's default white button; its
	.button-primary, .button-large and submit inputs are the theme's .primary;
	its .button-secondary is the theme's .outline. Never restyle a button
	elsewhere in this file -- add to these lists.
	============================================================ */

.button,
.button-large,
input[type="submit"],
.split-button button,
.section-subscribe button,
.article-subscribe button,
.community-follow button,
.requests-table-toolbar .organization-subscribe button,
.subscriptions-subscribe button,
.pagination-next-link,
.pagination-prev-link,
.pagination-first-link,
.pagination-last-link,
.nav-wrapper a.submit-a-request {
	cursor: pointer;
	display: inline-block;
	text-align: center;
	white-space: normal;
	padding: var(--btn-padding);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-button);
	line-height: var(--lh-body);
	border-radius: var(--radius-button);
	text-transform: uppercase;
	letter-spacing: var(--ls-button);
	text-decoration: none;
	border: 1px solid rgba(150, 150, 150, 0.3);
	background: var(--surface-white);
	color: var(--text-heading);
	user-select: none;
	-webkit-touch-callout: none;
	transition:
		background-color var(--duration-fast) linear,
		border-color var(--duration-fast) linear,
		color var(--duration-fast) linear;
}

/* Full width on phones: the tap target rule. */
.button,
.button-large,
input[type="submit"],
.section-subscribe button,
.article-subscribe button,
.community-follow button,
.subscriptions-subscribe button {
	width: 100%;
}

@media (min-width: 768px) {
	.button,
	.button-large,
	input[type="submit"],
	.section-subscribe button,
	.article-subscribe button,
	.community-follow button,
	.subscriptions-subscribe button {
		width: auto;
	}
}

.button:hover,
.button-large:hover,
input[type="submit"]:hover,
.split-button button:hover,
.section-subscribe button:hover,
.article-subscribe button:hover,
.community-follow button:hover,
.requests-table-toolbar .organization-subscribe button:hover,
.subscriptions-subscribe button:hover,
.pagination-next-link:hover,
.pagination-prev-link:hover,
.pagination-first-link:hover,
.pagination-last-link:hover {
	background: rgba(250, 250, 250, 0.75);
	border-color: rgba(150, 150, 150, 0.4);
	color: var(--text-heading);
	text-decoration: none;
}

/* Primary: the blue fill. A selected state on a toggle (follow, vote) is the
	same fill, which is what selected_class="button-primary" hands us. */
.button-primary,
.button-large,
input[type="submit"],
.split-button button,
.section-subscribe button[data-selected="true"],
.article-subscribe button[data-selected="true"],
.community-follow button[data-selected="true"],
.requests-table-toolbar .organization-subscribe button[data-selected="true"],
.subscriptions-subscribe button[data-selected="true"],
.nav-wrapper a.submit-a-request {
	background-color: var(--color-primary);
	border-color: var(--color-primary);
	color: var(--surface-white);
}

.button-primary:hover,
.button-primary:focus,
.button-large:hover,
.button-large:focus,
input[type="submit"]:hover,
input[type="submit"]:focus,
.split-button button:hover,
.section-subscribe button[data-selected="true"]:hover,
.article-subscribe button[data-selected="true"]:hover,
.community-follow button[data-selected="true"]:hover,
.requests-table-toolbar .organization-subscribe button[data-selected="true"]:hover,
.subscriptions-subscribe button[data-selected="true"]:hover,
.nav-wrapper a.submit-a-request:hover,
.nav-wrapper a.submit-a-request:focus {
	background-color: var(--color-primary-hover);
	border-color: var(--color-primary-hover);
	color: var(--surface-white);
	text-decoration: none;
}

/* Outline: transparent, drawn from currentColor, so it serves light and dark. */
.button-secondary {
	background-color: transparent;
	border-color: color-mix(in srgb, currentColor 30%, transparent);
	color: var(--text-heading);
}

.button-secondary:hover,
.button-secondary:focus,
.button-secondary:active {
	background-color: color-mix(in srgb, currentColor 10%, transparent);
	border-color: color-mix(in srgb, currentColor 60%, transparent);
	color: var(--text-heading);
}

.button[data-disabled],
.button-large[disabled],
input[type="submit"][disabled],
.split-button button[data-disabled],
.section-subscribe button[data-disabled],
.article-subscribe button[data-disabled],
.community-follow button[data-disabled],
.subscriptions-subscribe button[data-disabled],
.pagination-next-link[data-disabled],
.pagination-prev-link[data-disabled],
.pagination-first-link[data-disabled],
.pagination-last-link[data-disabled] {
	cursor: default;
	background-color: #d0d0d0;
	border-color: #d0d0d0;
	color: #e6e6e6;
}

/* Split button: two primaries sharing one outline. */
.split-button {
	display: flex;
}

.split-button button {
	width: auto;
}

[dir="ltr"] .split-button button:not(:only-child):first-child {
	border-right: 1px solid color-mix(in srgb, var(--surface-white) 40%, transparent);
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

[dir="rtl"] .split-button button:not(:only-child):first-child {
	border-left: 1px solid color-mix(in srgb, var(--surface-white) 40%, transparent);
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.split-button button:not(:only-child):last-child {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 34px;
	min-width: 34px;
	padding: 0;
}

[dir="ltr"] .split-button button:not(:only-child):last-child {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

[dir="rtl"] .split-button button:not(:only-child):last-child {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

/* ============================================================
	FORMS -- the filled slab field (../css/form.css)
	============================================================ */

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"])),
select,
textarea,
.form-field .nesty-input,
.form-field .hc-multiselect-toggle {
	display: block;
	width: 100%;
	max-width: 100%;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	font-weight: var(--fw-body);
	line-height: 1.4;
	color: var(--field-text);
	background-color: var(--field-bg);
	border: 1px solid var(--field-border);
	border-radius: var(--radius-md);
	padding: var(--field-padding);
	transition:
		border-color var(--duration-fast) var(--ease-standard),
		box-shadow var(--duration-fast) var(--ease-standard);
}

/* On the white page surface a white slab has no edge: fields sit on the
	light surface there. The hero re-points this so its search box is white. */
.form input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="file"])),
.form select,
.form textarea,
.form-field .nesty-input,
.form-field .hc-multiselect-toggle,
.sub-nav input[type="search"],
.requests-table-toolbar input[type="search"],
.requests-table-toolbar select,
.comment-form textarea,
.comment-form input[type="text"] {
	--field-bg: var(--surface-light);
}

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

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"])):hover,
select:hover,
textarea:hover {
	border-color: var(--border-light);
}

input:where(:not([type="checkbox"]):not([type="radio"]):not([type="submit"])):focus,
select:focus,
textarea:focus,
.form-field .nesty-input:focus,
.form-field .hc-multiselect-toggle:focus,
.request-main .form-field.comment-ccs > ul[data-hc-focus="true"] {
	outline: none;
	border-color: var(--field-border-focus);
	box-shadow: var(--field-ring);
	text-decoration: none;
}

input[disabled],
textarea[disabled],
select[disabled] {
	background-color: #d0d0d0;
	color: var(--text-muted);
}

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus {
	-webkit-box-shadow: 0 0 0 100px var(--field-bg) inset;
	-webkit-text-fill-color: var(--field-text);
	caret-color: var(--field-text);
}

[type="search"] {
	-webkit-appearance: none;
	appearance: none;
}

[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

[type="checkbox"],
[type="radio"] {
	accent-color: var(--color-primary);
	width: 16px;
	height: 16px;
	vertical-align: middle;
}

textarea {
	min-height: 140px;
	resize: vertical;
}

/* Select: native control off, the border-drawn caret on. */
select {
	appearance: none;
	-webkit-appearance: none;
	cursor: pointer;
	padding-right: calc(var(--space-xl) + var(--space-xxs));
	background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
	background-position:
		calc(100% - 22px) calc(50% - 2px),
		calc(100% - 16px) calc(50% - 2px);
	background-size: 6px 6px;
	background-repeat: no-repeat;
}

select::-ms-expand {
	display: none;
}

.form {
	max-width: 650px;
}

/* The request page: one centered column holding the title and the form.
	Centering the form alone strands the h1 at the left edge. */
.request-column {
	max-width: 680px;
	margin: 0 auto;
}

.request-column h1 {
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
	margin: var(--space-lg) 0 var(--space-md);
}

.request-column .form {
	max-width: none;
}

.form-field ~ .form-field {
	margin-top: var(--space-md);
}

.form-field label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
	margin-bottom: var(--space-xxs);
}

.form-field input[type="checkbox"] {
	width: auto;
}

.form-field input[type="checkbox"] + label {
	display: inline;
	margin: 0 0 0 var(--space-xs);
}

.form-field .nesty-input {
	line-height: 1.4;
	vertical-align: middle;
}

.form-field textarea {
	vertical-align: middle;
}

.form-field .optional {
	color: var(--text-muted);
	font-weight: var(--fw-regular);
	margin-left: 4px;
}

.form-field p {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin: var(--space-xxs) 0;
}

.form footer {
	margin-top: var(--space-xl);
	padding-top: var(--space-lg);
	border-top: 1px solid var(--border-light);
}

.form footer a {
	color: var(--text-body);
	cursor: pointer;
	margin-right: var(--space-sm);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.form .suggestion-list {
	font-size: var(--fs-sm);
	margin-top: var(--space-lg);
}

.form .suggestion-list label {
	border-bottom: 1px solid var(--border-light);
	display: block;
	padding-bottom: var(--space-xxs);
}

.form .suggestion-list li {
	padding: var(--space-xs) 0;
}

fieldset {
	border: 0;
	padding: 0;
}

legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

.upload-dropzone {
	border: 1px dashed var(--border-light);
	border-radius: var(--radius-md);
	padding: var(--space-md);
	margin-top: var(--space-md);
	text-align: center;
	background: var(--surface-light);
}

.upload-dropzone span {
	color: var(--text-muted);
}

/* ============================================================
	TABLES -- Copenhagen's .table (my activities, requests) and authored
	tables inside article bodies (../css/table.css)
	============================================================ */

table {
	border-collapse: collapse;
	border-spacing: 0;
	margin-bottom: 1.4rem;
	overflow-wrap: break-word;
}

td,
th {
	vertical-align: top;
	text-align: left;
	padding: 0.75rem;
}

[dir="rtl"] td,
[dir="rtl"] th {
	text-align: right;
}

thead th {
	vertical-align: bottom;
}

/* Authored tables: hairlines, a tinted header row, no hard borders. */
.article-body table,
.comment-body table,
.post-body table {
	width: 100%;
	font-size: 0.95em;
}

.article-body th,
.comment-body th,
.post-body th {
	background: var(--surface-light);
	color: var(--text-heading);
	font-weight: var(--fw-semibold);
	border-bottom: 1px solid var(--border-light);
}

.article-body td,
.comment-body td,
.post-body td {
	border-bottom: 1px solid var(--border-light);
}

.table {
	width: 100%;
	table-layout: fixed;
	margin: 0;
}

@media (min-width: 768px) {
	.table {
		table-layout: auto;
	}
}

.table th,
.table th a {
	color: var(--text-muted);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 1px;
	text-transform: uppercase;
	text-align: left;
}

[dir="rtl"] .table th,
[dir="rtl"] .table th a {
	text-align: right;
}

.table tr {
	border-bottom: 1px solid var(--border-light);
	display: block;
	padding: var(--space-md) 0;
}

@media (min-width: 768px) {
	.table tr {
		display: table-row;
	}
}

.table td {
	display: block;
	padding: 0;
}

@media (min-width: 768px) {
	.table td {
		display: table-cell;
	}

	.table td,
	.table th {
		padding: var(--space-xs) var(--space-md);
		height: 60px;
		vertical-align: middle;
	}
}

@media (min-width: 1024px) {
	.table td,
	.table th {
		padding: var(--space-md) var(--space-lg);
	}
}

/* ============================================================
	INTERSITE STRIP -- the property switcher above the header. Kept SEPARATE
	from the veea.com navigation on purpose (owner): it lists the Veea
	properties, not the site's pages.
	============================================================ */

#intersite-navigation {
	background: var(--surface-dark-alt);
	height: var(--intersite-height);
}

#intersite-navigation > div {
	display: flex;
	flex-direction: row;
	gap: var(--space-md);
	height: 100%;
	overflow-x: auto;
	scrollbar-width: none;
}

#intersite-navigation > div::-webkit-scrollbar {
	display: none;
}

#intersite-navigation a {
	color: var(--text-body-on-dark);
	display: inline-flex;
	align-items: center;
	gap: var(--space-xs);
	flex: 0 0 auto;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 1px;
	text-transform: uppercase;
	line-height: var(--intersite-height);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

#intersite-navigation a:hover,
#intersite-navigation a:focus {
	color: var(--text-heading-on-dark);
}

/* The back caret, drawn from the shared caret tokens in currentColor. */
#intersite-navigation a::before {
	content: "";
	width: var(--caret-size);
	height: var(--caret-size);
	border-left: var(--caret-weight) solid currentColor;
	border-bottom: var(--caret-weight) solid currentColor;
	transform: rotate(45deg);
	transition: transform var(--duration-fast) var(--ease-standard);
}

[dir="rtl"] #intersite-navigation a::before {
	transform: rotate(-135deg);
}

@media (prefers-reduced-motion: no-preference) {
	#intersite-navigation a:hover::before {
		transform: translateX(-3px) rotate(45deg);
	}
}

/* ============================================================
	HEADER
	============================================================ */

#header-container {
	background: var(--surface-white);
	box-shadow: var(--shadow-header-scrolled);
	position: relative;
	z-index: 10;
}

.header {
	position: relative;
	align-items: center;
	display: flex;
	height: var(--header-height);
	justify-content: space-between;
	gap: var(--space-md);
}

.logo a {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	color: var(--text-heading);
	text-decoration: none;
}

.logo img {
	display: block;
	height: 26px;
	width: auto;
	max-height: none;
}

.logo p {
	margin: 0;
	color: var(--text-heading);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: -0.01em;
	white-space: nowrap;
	line-height: 1;
	padding-left: var(--space-sm);
	border-left: 1px solid var(--border-light);
}

.nav-wrapper {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.user-nav {
	display: inline-block;
	position: absolute;
	white-space: nowrap;
}

@media (min-width: 768px) {
	.user-nav {
		position: relative;
	}
}

.user-nav[aria-expanded="true"] {
	background-color: var(--surface-white);
	box-shadow: var(--shadow-card);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	right: 0;
	left: 0;
	top: calc(var(--header-height) + 1px);
	z-index: 1;
}

/* Hidden on a phone until the burger opens the panel. Order matters: this
	must beat the button rule that shows .submit-a-request (earlier in the file,
	same specificity) and lose to the expanded rule below it (same again). */
.nav-wrapper .user-nav > a {
	display: none;
}

.user-nav[aria-expanded="true"] > a {
	display: block;
	margin: var(--space-md);
}

@media (min-width: 768px) {
	.nav-wrapper .user-nav > a {
		display: inline-block;
	}
}

.nav-wrapper a.sign-in {
	display: inline-block;
}

@media (max-width: 767px) {
	.nav-wrapper .hide-on-mobile {
		border: 0;
		clip: rect(0 0 0 0);
		clip-path: inset(50%);
		height: 1px;
		margin: -1px;
		overflow: hidden;
		padding: 0;
		position: absolute;
		width: 1px;
		white-space: nowrap;
	}
}

.nav-wrapper .menu-button {
	background: none;
	border: 0;
	color: var(--text-heading);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--radius-button);
}

@media (min-width: 768px) {
	.nav-wrapper .menu-button {
		display: none;
	}
}

.nav-wrapper .menu-button .icon-menu {
	width: 18px;
	height: 18px;
}

.nav-wrapper .menu-button:hover,
.nav-wrapper .menu-button:focus {
	background-color: var(--surface-light);
}

.skip-navigation {
	align-items: center;
	background-color: var(--surface-dark);
	color: var(--text-heading-on-dark);
	display: flex;
	font-size: var(--fs-sm);
	justify-content: center;
	left: -999px;
	margin: var(--space-md);
	padding: var(--space-md);
	overflow: hidden;
	position: absolute;
	top: auto;
	z-index: -999;
	border-radius: var(--radius-button);
}

[dir="rtl"] .skip-navigation {
	left: initial;
	right: -999px;
}

.skip-navigation:focus,
.skip-navigation:active {
	left: auto;
	overflow: auto;
	text-align: center;
	text-decoration: none;
	top: auto;
	z-index: 999;
}

[dir="rtl"] .skip-navigation:focus,
[dir="rtl"] .skip-navigation:active {
	left: initial;
	right: auto;
}

/* Signed-in user menu */
.user-info {
	display: inline-block;
}

.user-info > button {
	border: 0;
	color: var(--text-heading);
	min-width: 0;
	padding: 0;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: var(--space-xxs);
}

.user-info > button:hover,
.user-info > button:focus {
	background-color: transparent;
}

#user #user-name {
	display: none;
	font-size: var(--fs-sm);
}

@media (min-width: 768px) {
	#user #user-name {
		display: inline-block;
	}
}

.user-avatar {
	height: 28px;
	width: 28px;
	border-radius: 50%;
	display: inline-block;
	vertical-align: middle;
}

.avatar {
	display: inline-block;
	position: relative;
}

.avatar img {
	height: 40px;
	width: 40px;
	border-radius: 50%;
}

.avatar .icon-agent {
	color: var(--color-primary);
	border: 2px solid var(--surface-white);
	border-radius: 50%;
	bottom: -4px;
	background-color: var(--surface-white);
	font-size: 17px;
	height: 17px;
	line-height: 17px;
	position: absolute;
	right: -2px;
	text-align: center;
	width: 17px;
}

/* ============================================================
	FOOTER
	============================================================ */

.footer {
	border-top: 1px solid var(--border-light);
	margin-top: var(--space-2xl);
	padding: var(--space-lg) 0;
}

.footer-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--space-md);
	flex-wrap: wrap;
}

.footer p {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	margin: 0;
}

.footer a {
	color: var(--text-body);
}

.footer-language-selector button {
	color: var(--text-body);
	display: inline-block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

/* ============================================================
	BREADCRUMBS -- separator is the border-drawn caret in currentColor
	============================================================ */

.breadcrumbs {
	margin: 0 0 var(--space-sm) 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}

@media (min-width: 768px) {
	.breadcrumbs {
		margin: 0;
	}
}

.breadcrumbs li {
	color: var(--text-muted);
	display: inline-flex;
	align-items: center;
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	max-width: 450px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.breadcrumbs li + li::before {
	content: "";
	display: inline-block;
	width: var(--caret-size);
	height: var(--caret-size);
	margin: 0 var(--space-xs);
	border-right: var(--caret-weight) solid currentColor;
	border-bottom: var(--caret-weight) solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.5;
	flex: 0 0 auto;
}

[dir="rtl"] .breadcrumbs li + li::before {
	transform: rotate(135deg);
}

.breadcrumbs li a {
	color: var(--link);
	text-decoration: none;
}

.breadcrumbs li a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ============================================================
	SEARCH FIELD -- the slab with the glyph inside its left edge
	============================================================ */

.search,
.search-container {
	position: relative;
}

.search input[type="search"] {
	height: 48px;
	padding-left: 46px;
	padding-right: var(--space-md);
	padding-top: 0;
	padding-bottom: 0;
	border-radius: var(--radius-md);
}

[dir="rtl"] .search input[type="search"] {
	padding-right: 46px;
	padding-left: var(--space-md);
}

.search-icon {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 16px;
	z-index: 1;
	width: 18px;
	height: 18px;
	color: var(--text-muted);
	pointer-events: none;
}

[dir="rtl"] .search-icon {
	right: 16px;
	left: auto;
}

/* ============================================================
	HERO -- the navy band with the pulse-grid's STATIC lattice, no JS.
	Copied from ../css/pulse-grid.css: a dot lattice on a plane tilted
	--pulse-grid-tilt, overshooting the band so the rotation still covers the
	corners. Nothing here animates; the canvas engine is not ported.
	============================================================ */

.hero {
	--text-heading: var(--text-heading-on-dark);
	--text-body: var(--text-body-on-dark);
	--link: var(--link-on-dark);
	--link-hover: var(--link-hover-on-dark);
	--link-active: var(--link-active-on-dark);
	--field-bg: var(--surface-white);
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--surface-dark-alt);
	background-image: var(--gradient-hero-navy);
	padding: var(--space-3xl) var(--container-gutter);
	text-align: center;
	width: 100%;
}

.hero::before {
	content: "";
	position: absolute;
	inset: calc(-1 * var(--pulse-grid-overshoot)) -35%;
	z-index: 0;
	transform: rotate(var(--pulse-grid-tilt));
	background-image: radial-gradient(circle, var(--overlay-white-10) 1px, transparent 1.5px);
	background-size: var(--pulse-grid-cell) var(--pulse-grid-cell);
	pointer-events: none;
}

/* The screen-aligned vignette: fades the lattice toward the band's edges so
	the copy sits on the calmest part of it. */
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: radial-gradient(ellipse 70% 80% at 50% 50%, transparent 0%, color-mix(in srgb, var(--surface-dark-alt) 70%, transparent) 100%);
	pointer-events: none;
}

.hero-inner {
	position: relative;
	z-index: 1;
	max-width: 640px;
	margin: 0 auto;
}

.hero h1 {
	color: var(--text-heading);
	font-size: var(--fs-h2);
	margin-bottom: var(--space-md);
}

.hero .search input[type="search"] {
	box-shadow: var(--shadow-card);
}

.community-hero {
	margin-bottom: var(--space-xs);
}

/* ============================================================
	PAGE HEADER + SUB NAV (category, section, community pages)
	============================================================ */

.page-header {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	margin: var(--space-xs) 0;
}

@media (min-width: 768px) {
	.page-header {
		align-items: baseline;
		flex-direction: row;
		margin: 0 0 var(--space-lg);
	}
}

.page-header h1 {
	flex-grow: 1;
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
	margin-bottom: var(--space-xs);
}

.page-header .section-subscribe {
	flex-shrink: 0;
	margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
	.page-header .section-subscribe {
		margin-bottom: 0;
	}
}

.page-header-description {
	font-style: normal;
	font-size: var(--fs-md);
	margin: 0;
	word-break: break-word;
	max-width: var(--measure-article);
}

@media (min-width: 1024px) {
	.page-header-description {
		flex-basis: 100%;
	}
}

.page-header .icon-lock {
	height: 20px;
	width: 20px;
	position: relative;
	left: -5px;
	vertical-align: baseline;
}

.sub-nav {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-sm);
	margin: var(--space-md) 0 var(--space-lg);
	padding-bottom: var(--space-sm);
	border-bottom: 1px solid var(--border-light);
}

@media (min-width: 768px) {
	.sub-nav {
		align-items: center;
		flex-direction: row;
	}

	.sub-nav .search-container,
	.sub-nav .search {
		min-width: 320px;
	}
}

/* ============================================================
	BLOCKS -- the category cards on the homepage and the topics grid.
	The theme's card: a light surface, --radius-card, a hairline mixed from
	ink, and the lift on hover. The icon sits in a white tile so it reads as
	part of the card rather than a sticker floating beside it. The whole card
	is the link, so the title sits in heading ink at rest and the hover carries
	the clickability three ways: shadow, lift, and the title turning link-blue
	(hard rule 6).
	============================================================ */

.blocks-list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr));
	gap: var(--space-md);
	list-style: none;
	padding: 0;
	margin: var(--space-lg) 0 0;
}

.blocks-list.smaller {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
	gap: var(--space-sm);
}

.blocks-item {
	display: flex;
	background: var(--surface-light);
	border: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
	border-radius: var(--radius-card);
	transition:
		box-shadow var(--duration-base) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		transform var(--duration-base) var(--ease-standard);
}

.blocks-item:hover,
.blocks-item:focus-within {
	box-shadow: var(--shadow-card);
	border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
}

@media (prefers-reduced-motion: no-preference) {
	.blocks-item:hover,
	.blocks-item:focus-within {
		transform: translateY(-2px);
	}
}

.blocks-item-internal {
	background-color: transparent;
	border: 1px solid var(--border-light);
}

.blocks-item-internal .icon-lock {
	height: 15px;
	width: 15px;
	bottom: 5px;
	position: relative;
}

/* A row: the icon tile, then the text column. Grid rather than flex so the
	description always starts under the title, never under the icon. */
.blocks-item-link {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	column-gap: var(--space-md);
	align-items: center;
	align-content: center;
	flex: 1;
	padding: var(--space-md);
	border-radius: inherit;
	color: var(--text-body);
	text-align: left;
	text-decoration: none;
}

[dir="rtl"] .blocks-item-link {
	text-align: right;
}

.blocks-item-link.no-icon {
	grid-template-columns: 1fr;
}

.blocks-list.smaller .blocks-item-link {
	padding: var(--space-sm) var(--space-md);
}

.blocks-item-link:hover,
.blocks-item-link:active {
	text-decoration: none;
	color: var(--text-body);
}

.blocks-item-link:focus-visible {
	outline-offset: -2px;
	border-radius: inherit;
}

.cat-icon {
	grid-row: 1 / span 2;
	width: 56px;
	height: 56px;
	padding: 10px;
	box-sizing: border-box;
	object-fit: contain;
	background: var(--surface-white);
	border-radius: var(--radius-md);
	border: 1px solid color-mix(in srgb, var(--text-heading) 6%, transparent);
}

.blocks-item-title {
	display: block;
	grid-column: 2;
	color: var(--text-heading);
	font-size: var(--fs-md);
	font-weight: var(--fw-heading);
	line-height: var(--lh-h3);
	transition: color var(--duration-fast) var(--ease-standard);
}

.blocks-item-link.no-icon .blocks-item-title {
	grid-column: 1;
}

.blocks-item:hover .blocks-item-title,
.blocks-item:focus-within .blocks-item-title {
	color: var(--link);
}

.blocks-list.smaller .blocks-item-title {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
}

.blocks-item-description {
	display: block;
	grid-column: 2;
	margin: 0;
	font-size: var(--fs-sm);
	line-height: var(--lh-heading);
	color: var(--text-body);
}

.blocks-item-link.no-icon .blocks-item-description {
	grid-column: 1;
}

.blocks-item-description:empty {
	display: none;
}

/* ============================================================
	HOMEPAGE SECTIONS -- the heading over a group is the theme's .group-head:
	a title with a hairline running out from it.
	============================================================ */

.section {
	margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
	.section {
		margin-bottom: var(--space-xl);
	}
}

.home-section {
	margin-top: var(--space-xl);
}

.home-section h2,
.community-header .title,
.community-featured-posts .title,
.search-results-subheading {
	display: flex;
	align-items: center;
	gap: var(--space-sm);
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: 0;
	margin-top: var(--space-xl);
	margin-bottom: var(--space-sm);
	color: var(--text-heading);
}

.home-section h2::after,
.community-header .title::after,
.community-featured-posts .title::after,
.search-results-subheading::after {
	content: "";
	flex: 1;
	height: 1px;
	background: var(--border-light);
}

.home-section .blocks-list {
	margin-top: var(--space-md);
}

.container .section.knowledge-base .categories.blocks {
	margin-bottom: var(--space-xl);
}

/* ============================================================
	PROMOTED ARTICLES, RECENT ACTIVITY, ARTICLE LISTS -- the hairline
	list-of-links (../css/row-list.css): a separator between rows and one
	closing the list, blue at rest, a wash on hover.
	============================================================ */

.promoted-articles {
	display: grid;
	grid-template-columns: 1fr;
	column-gap: var(--space-xl);
}

@media (min-width: 1024px) {
	.promoted-articles {
		grid-template-columns: repeat(3, 1fr);
	}
}

.promoted-articles-item {
	border-bottom: 1px solid var(--border-light);
}

.promoted-articles-item a {
	display: block;
	padding: var(--space-sm) var(--space-xs);
	color: var(--link);
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-decoration: none;
	border-radius: var(--radius-sm);
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.promoted-articles-item a:hover {
	background-color: color-mix(in srgb, var(--text-heading) 5%, transparent);
	color: var(--link-hover);
}

.promoted-articles-item .icon-lock {
	vertical-align: baseline;
}

/* Recent activity */
.recent-activity-header {
	margin-bottom: var(--space-xs);
}

.recent-activity-list {
	padding: 0;
}

.recent-activity-item {
	border-bottom: 1px solid var(--border-light);
	overflow: auto;
	padding: var(--space-md) 0;
}

.recent-activity-item-parent,
.recent-activity-item-link {
	display: inline-block;
	width: 100%;
	margin: 0;
}

@media (min-width: 768px) {
	.recent-activity-item-parent,
	.recent-activity-item-link {
		width: 70%;
	}
}

.recent-activity-item-parent {
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.recent-activity-item-link {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	color: var(--link);
}

.recent-activity-item-meta {
	margin: var(--space-sm) 0 0 0;
	float: none;
}

@media (min-width: 768px) {
	.recent-activity-item-meta {
		margin: 0;
		float: right;
	}

	[dir="rtl"] .recent-activity-item-meta {
		float: left;
	}
}

.recent-activity-item-time,
.recent-activity-item-comment {
	color: var(--text-muted);
	display: inline-block;
	font-size: var(--fs-sm);
}

.recent-activity-item-comment {
	padding-left: var(--space-xxs);
}

[dir="rtl"] .recent-activity-item-comment {
	padding: 0 var(--space-xxs) 0 0;
}

.recent-activity-controls {
	padding-top: var(--space-sm);
}

.recent-activity-comment-icon svg {
	vertical-align: middle;
	color: var(--color-primary);
	width: 16px;
	height: 16px;
}

.recent-activity-comment-icon::after {
	content: attr(data-comment-count);
	margin-left: 3px;
}

[dir="rtl"] .recent-activity-comment-icon::after {
	margin-left: 0;
	margin-right: 3px;
}

/* ============================================================
	CATEGORY PAGE -- the section tree
	============================================================ */

/* Full width: Copenhagen reserved the other 20% for a category sidebar this
	theme never renders, which pushed both pages right against nothing. */
.category-content,
.section-content {
	min-width: 0;
}

.section-tree {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg) var(--space-2xl);
}

@media (min-width: 768px) {
	.section-tree {
		grid-template-columns: 1fr 1fr;
	}
}

.section-tree .section {
	margin: 0;
	min-width: 0;
}

.section-tree-title {
	margin-bottom: var(--space-xs);
	font-size: var(--fs-md);
	font-weight: var(--fw-heading);
	line-height: var(--lh-heading);
	letter-spacing: 0;
	padding-bottom: var(--space-xs);
	border-bottom: 1px solid var(--border-light);
}

.section-tree-title a {
	color: var(--text-heading);
	text-decoration: none;
}

.section-tree-title a:hover {
	color: var(--link);
}

.section-tree .see-all-articles {
	display: block;
	padding: var(--space-xs) 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.article-list {
	margin: 0;
	padding: 0;
}

/* One row: an optional promoted star, the link, an optional lock -- all
	siblings in the markup, so the row is the flex container and the link
	takes the remaining width. The hover wash is on the ROW, not the link, so
	the star and the lock sit inside it instead of beside it. */
.article-list-item {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
	font-size: var(--fs-base);
	border-bottom: 1px solid var(--border-light);
	padding: 0 var(--space-xs);
	transition: background-color var(--duration-fast) var(--ease-standard);
}

.article-list-item:hover {
	background-color: color-mix(in srgb, var(--text-heading) 5%, transparent);
}

.article-list-item .icon-lock {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
	color: var(--text-muted);
}

.article-list-item a {
	display: block;
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--space-xs) 0;
	color: var(--link);
	line-height: var(--lh-heading);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-standard);
}

.article-list-item:hover a {
	color: var(--link-hover);
}

.icon-star {
	flex: 0 0 auto;
	color: var(--color-dark-highlight);
	width: 14px;
	height: 14px;
}

.category-empty,
.section-empty {
	color: var(--text-muted);
	padding: var(--space-md) 0;
}

/* ============================================================
	SECTION PAGE -- the article rows
	============================================================ */

.section-list {
	margin: var(--space-xl) 0;
}

.section-list-item {
	border-bottom: 1px solid var(--border-light);
	font-size: var(--fs-base);
}

.section-list-item a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	color: var(--link);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-heading);
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.section-list-item a:hover {
	background-color: color-mix(in srgb, var(--text-heading) 5%, transparent);
	color: var(--link-hover);
}

/* The trailing chevron, drawn from the caret tokens in currentColor. */
.section-list-item a::after {
	content: "";
	flex: 0 0 auto;
	width: var(--caret-size);
	height: var(--caret-size);
	border-right: var(--caret-weight) solid currentColor;
	border-bottom: var(--caret-weight) solid currentColor;
	transform: rotate(-45deg);
	opacity: 0.6;
	transition:
		opacity var(--duration-fast) var(--ease-standard),
		transform var(--duration-fast) var(--ease-standard);
}

[dir="rtl"] .section-list-item a::after {
	transform: rotate(135deg);
}

.section-list-item a:hover::after {
	opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
	.section-list-item a:hover::after {
		transform: translateX(3px) rotate(-45deg);
	}

	[dir="rtl"] .section-list-item a:hover::after {
		transform: translateX(-3px) rotate(135deg);
	}
}

.see-all-sections-trigger {
	cursor: pointer;
	display: block;
	padding: var(--space-sm);
	text-align: center;
}

.see-all-sections-trigger[aria-hidden="true"] {
	display: none;
}

/* ============================================================
	ARTICLE PAGE
	Sidebar | Content, 20% | 80% on desktop, stacked below.
	============================================================ */

.article-container {
	display: flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.article-container {
		flex-direction: row;
		align-items: flex-start;
	}
}

.article {
	flex: 1 0 auto;
	min-width: 0;
}

@media (min-width: 1024px) {
	.article {
		flex: 1 0 70%;
		padding-left: var(--space-xl);
		border-left: 1px solid var(--border-light);
		margin-left: var(--space-lg);
	}

	[dir="rtl"] .article {
		padding-left: 0;
		padding-right: var(--space-xl);
		border-left: 0;
		border-right: 1px solid var(--border-light);
		margin-left: 0;
		margin-right: var(--space-lg);
	}
}

/* With a rail: the article becomes two columns -- the title spans both, the
	body takes the first, the rail sits sticky in the second. Gated on the rail
	existing so a short article keeps its full width. */
@media (min-width: 1200px) {
	.article:has(> .article-toc) {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 220px;
		column-gap: var(--space-xl);
		align-items: start;
	}

	.article:has(> .article-toc) .article-header {
		grid-column: 1 / -1;
	}

	.article-main {
		grid-column: 1;
		min-width: 0;
	}

	.article-toc {
		grid-column: 2;
		grid-row: 2;
		position: sticky;
		top: var(--space-md);
		max-height: calc(100vh - var(--space-xl));
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

.article-header {
	align-items: flex-start;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
	margin-top: var(--space-md);
}

@media (min-width: 768px) {
	.article-header {
		flex-direction: row;
		margin-top: 0;
	}

	.article-title {
		flex-basis: 100%;
	}
}

.article-title {
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
	max-width: var(--measure-article);
}

.article-title .icon-lock {
	position: relative;
	left: -5px;
	vertical-align: baseline;
}

.article-avatar {
	margin-right: var(--space-xs);
}

.article-author {
	margin-bottom: var(--space-xs);
}

.article [role="button"] {
	flex-shrink: 0;
	width: 100%;
}

@media (min-width: 768px) {
	.article [role="button"] {
		width: auto;
	}
}

.article-info {
	max-width: 100%;
}

.article-meta {
	display: inline-block;
	vertical-align: middle;
}

.article-content {
	margin: var(--space-xs) 0 var(--space-lg) 0;
	word-wrap: break-word;
}

/* ---- Authored richtext: article, comment and post bodies ----
	These style RAW editor output, so they assume no class inside. The article
	body is capped at the reading measure; media and tables may run wider. */

.article-body,
.comment-body,
.post-body {
	line-height: var(--lh-body);
	overflow-wrap: break-word;
	-webkit-hyphens: auto;
	hyphens: auto;
}

.article-body {
	max-width: var(--measure-article);
}

.article-body > p:last-child {
	margin-bottom: 0;
}

.article-body h1,
.article-body h2,
.article-body h3,
.article-body h4 {
	margin-top: 1.5em;
	text-wrap: pretty;
}

.article-body h1 {
	font-size: var(--fs-h3);
	line-height: var(--lh-h3);
	letter-spacing: 0;
}

.article-body h2 {
	font-size: var(--fs-xl);
	line-height: var(--lh-h3);
	letter-spacing: 0;
	padding-top: var(--space-md);
	border-top: 1px solid var(--border-light);
}

.article-body h3 {
	font-size: var(--fs-lg);
	line-height: var(--lh-heading);
}

.article-body h4 {
	font-size: var(--fs-md);
}

.article-body a {
	font-weight: var(--fw-semibold);
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.article-body img,
.comment-body img,
.post-body img {
	height: auto;
	max-width: 100%;
	border-radius: var(--radius-md);
}

.article-body ul,
.article-body ol,
.comment-body ul,
.comment-body ol,
.post-body ul,
.post-body ol {
	list-style-position: outside;
	margin: 0 0 var(--space-md) var(--space-lg);
	padding: 0;
}

[dir="rtl"] .article-body ul,
[dir="rtl"] .article-body ol,
[dir="rtl"] .comment-body ul,
[dir="rtl"] .comment-body ol,
[dir="rtl"] .post-body ul,
[dir="rtl"] .post-body ol {
	margin: 0 var(--space-lg) var(--space-md) 0;
}

.article-body li > ul,
.article-body li > ol,
.comment-body li > ul,
.comment-body li > ol,
.post-body li > ul,
.post-body li > ol {
	margin-bottom: 0;
}

.article-body ul,
.comment-body ul,
.post-body ul {
	list-style-type: disc;
}

.article-body ol,
.comment-body ol,
.post-body ol {
	list-style-type: decimal;
}

.article-body li,
.comment-body li,
.post-body li {
	padding: 4px 0;
}

.article-body code,
.comment-body code,
.post-body code {
	background: var(--surface-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-sm);
	padding: 1px 6px;
	margin: 0 2px;
}

.article-body pre,
.comment-body pre,
.post-body pre {
	background: var(--surface-light);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	padding: var(--space-sm) var(--space-md);
	margin: 0 0 var(--space-md);
	overflow: auto;
	white-space: pre;
	line-height: 1.6;
}

.article-body pre code,
.comment-body pre code,
.post-body pre code {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}

.article-body blockquote,
.comment-body blockquote,
.post-body blockquote {
	border-left: 3px solid var(--color-primary);
	color: var(--text-body);
	padding: var(--space-xxs) var(--space-md);
	margin: 0 0 var(--space-md);
}

[dir="rtl"] .article-body blockquote,
[dir="rtl"] .comment-body blockquote,
[dir="rtl"] .post-body blockquote {
	border-left: 0;
	border-right: 3px solid var(--color-primary);
}

.article-body figure {
	margin: var(--space-md) 0;
}

figcaption {
	font-size: var(--fs-sm);
	color: var(--text-muted);
	font-weight: var(--fw-semibold);
	margin-top: var(--space-xs);
	margin-bottom: var(--space-md);
	text-align: left;
}

figcaption::before {
	content: "\2191";
	margin-right: var(--space-xs);
	color: var(--text-heading);
}

/* ---- Authored callouts (classes editors put on a div in the article) ---- */

.note,
.warning {
	padding: var(--space-sm) var(--space-md);
	margin: var(--space-md) 0;
	border-radius: var(--radius-md);
	border-left: 4px solid var(--accent-info);
	background: color-mix(in srgb, var(--accent-info) 7%, var(--surface-white));
}

.warning {
	border-left-color: var(--accent-warning);
	background: color-mix(in srgb, var(--accent-warning) 10%, var(--surface-white));
}

.note > :last-child,
.warning > :last-child {
	margin-bottom: 0;
}

.mb-10 {
	margin-bottom: 2rem;
}

.mt-10 {
	margin-top: 2rem;
}

/* ---- Next step: the primary button's geometry as a full-width row, the
	caret drawn from the shared tokens in place of the PNG arrow. ---- */

a.next-step {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	margin-top: var(--space-xl);
	padding: var(--space-sm) var(--space-md);
	background: var(--color-primary);
	color: var(--surface-white);
	border-radius: var(--radius-button);
	font-weight: var(--fw-semibold);
	text-decoration: none;
	transition: background-color var(--duration-fast) linear;
}

a.next-step:hover,
a.next-step:focus {
	background: var(--color-primary-hover);
	color: var(--surface-white);
	text-decoration: none;
}

/* Hand-authored next-step links in older articles carry a div for the title
	and the old PNG arrow as an img; those keep working at the button's scale. */
a.next-step > div {
	flex: 1 1 auto;
}

a.next-step img,
a.next-step .next-step-container-img {
	flex: 0 0 auto;
	width: auto;
	height: 1.1em;
	margin: 0;
	padding: 0;
	border-radius: 0;
}

.next-step-label {
	font-size: var(--fs-xs);
	font-weight: var(--fw-button);
	letter-spacing: var(--ls-button);
	text-transform: uppercase;
	opacity: 0.8;
	display: block;
}

.next-step-title {
	display: block;
	font-size: var(--fs-base);
}

.next-step-caret {
	flex: 0 0 auto;
	width: 0.6em;
	height: 0.6em;
	border-right: var(--caret-weight) solid currentColor;
	border-bottom: var(--caret-weight) solid currentColor;
	transform: rotate(-45deg);
}

[dir="rtl"] .next-step-caret {
	transform: rotate(135deg);
}

/* ---- Article footer: votes, return to top, relatives ---- */

.article-footer {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding-bottom: var(--space-md);
}

.article-comment-count {
	color: var(--text-muted);
}

.article-comment-count:hover {
	text-decoration: none;
}

.article-comment-count-icon {
	vertical-align: middle;
	color: var(--color-primary);
	width: 18px;
	height: 18px;
}

.article-votes {
	border-top: 1px solid var(--border-light);
	padding: var(--space-lg) 0;
	text-align: center;
}

.article-votes-question {
	display: block;
	color: var(--text-heading);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-xs);
}

.article-vote {
	margin: var(--space-xxs);
	min-width: 90px;
	width: auto;
}

.article-votes-count {
	display: block;
	color: var(--text-muted);
	margin-top: var(--space-xs);
}

.article-more-questions {
	margin: 0;
	text-align: center;
}

.article-return-to-top {
	border-top: 1px solid var(--border-light);
}

@media (min-width: 1024px) {
	.article-return-to-top {
		display: none;
	}
}

.article-return-to-top a {
	color: var(--text-body);
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--space-md) 0;
	font-weight: var(--fw-semibold);
}

.article-return-to-top a:hover,
.article-return-to-top a:focus {
	text-decoration: none;
	color: var(--link);
}

.article-return-to-top-icon {
	transform: rotate(0.5turn);
}

.article-relatives {
	border-top: 1px solid var(--border-light);
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	padding: var(--space-lg) 0;
}

@media (min-width: 768px) {
	.article-relatives {
		flex-direction: row;
	}
}

.article-relatives > * {
	flex: 1 0 50%;
	min-width: 0;
	overflow-wrap: break-word;
}

@media (min-width: 768px) {
	.article-relatives > * {
		padding-right: var(--space-md);
	}

	.article-relatives > *:last-child {
		padding-right: 0;
	}
}

.recent-articles li,
.related-articles li {
	padding: var(--space-xs) 0;
	border-bottom: 1px solid var(--border-light);
	font-size: var(--fs-base);
	line-height: var(--lh-heading);
}

.recent-articles li:last-child,
.related-articles li:last-child {
	border-bottom: 0;
}

.recent-articles li a,
.related-articles li a {
	text-decoration: none;
	font-weight: var(--fw-semibold);
}

.recent-articles li a:hover,
.related-articles li a:hover {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

/* ---- Article sidebar: the section's article list ---- */

.article-sidebar {
	/* No top rule: .sub-nav draws that line already. */
	border-bottom: 1px solid var(--border-light);
	flex: 1 0 auto;
	margin-bottom: var(--space-md);
	padding: 0;
}

@media (min-width: 1024px) {
	.article-sidebar {
		border: 0;
		flex: 0 0 20%;
		height: auto;
		position: sticky;
		top: var(--space-md);
		max-height: calc(100vh - var(--space-xl));
		overflow-y: auto;
	}
}

.sidenav-title {
	display: block;
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--text-muted);
	position: relative;
}

.collapsible-sidebar-body ul {
	margin-top: var(--space-md);
}

.collapsible-sidebar-body li {
	border-bottom: 1px solid var(--border-light);
}

.sidenav-item {
	display: block;
	color: var(--text-body);
	font-size: var(--fs-sm);
	font-weight: var(--fw-body);
	line-height: var(--lh-heading);
	padding: var(--space-xs) var(--space-sm);
	border-left: 3px solid transparent;
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

[dir="rtl"] .sidenav-item {
	border-left: 0;
	border-right: 3px solid transparent;
}

.sidenav-item:hover,
.sidenav-item:focus {
	background-color: color-mix(in srgb, var(--text-heading) 5%, transparent);
	color: var(--link);
	text-decoration: none;
}

.sidenav-item.current-article,
.sidenav-item.current {
	background-color: var(--surface-light);
	border-left-color: var(--color-primary);
	color: var(--text-heading);
	font-weight: var(--fw-semibold);
}

[dir="rtl"] .sidenav-item.current-article,
[dir="rtl"] .sidenav-item.current {
	border-right-color: var(--color-primary);
}

.article-sidebar-item.see-more {
	display: block;
	padding: var(--space-xs) var(--space-sm);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

/* ---- On this page: the article's own heading rail ----

	Ported from ../modules/page-toc.module/module.css, the HubSpot theme's
	in-page navigation rail, with .article-toc for its custom element. The rail
	is built by buildArticleToc() in script.js from the rendered article body.

	Rail links take the heading color at rest and --link plus a solid left bar
	for the current one, so hard rule 6 is satisfied by color, the bar and a
	hover state. The current row is MARKED OFF THE ATTRIBUTE, never a class:
	aria-current="true" is written by buildArticleToc() and by nothing else, so
	the visual state and the announced state cannot drift.

	ZERO dark rules: every color mixes from --text-heading or --link. */

.article-toc {
	display: block;
	margin-bottom: var(--space-md);
}

/* ---- The state checkbox + its label ----

	Visually hidden with the clip-path technique, never display:none or
	visibility:hidden below 1200px: it is a real control there and must stay
	focusable and announced. */
.article-toc .toc-state {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/* On a phone this is a control and is dressed as one: a bordered row, a caret,
	and a 48px tap target (the tap target, not a look). From 1200px the same
	element becomes the rail's quiet uppercase title. */
.article-toc .toc-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	min-height: 48px;
	padding: var(--space-xs) var(--space-sm);
	border: 1px solid color-mix(in srgb, var(--text-heading) 14%, transparent);
	border-radius: var(--radius-md);
	cursor: pointer;
	color: var(--text-heading);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 1.5px;
	text-transform: uppercase;
	transition:
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard);
}

.article-toc .toc-summary:hover {
	border-color: color-mix(in srgb, var(--link) 45%, transparent);
	color: var(--link);
}

/* The focus ring belongs to the hidden checkbox, so it is drawn on the thing
	the reader can actually see. */
.article-toc .toc-state:focus-visible + .toc-summary {
	outline: 2px solid var(--link);
	outline-offset: 2px;
}

/* The shared border-drawn caret (--caret-* in the :root block), in
	currentColor, so hover needs no rule of its own. */
.article-toc .toc-summary::after {
	content: "";
	flex: 0 0 auto;
	width: var(--caret-size);
	height: var(--caret-size);
	margin-right: 3px;
	border-right: var(--caret-weight) solid currentColor;
	border-bottom: var(--caret-weight) solid currentColor;
	font-size: var(--fs-md);
	transform: var(--caret-down);
	transition: transform var(--duration-base) var(--ease-standard);
}

.article-toc .toc-state:checked + .toc-summary::after {
	transform: var(--caret-up);
}

/* ---- The list ----

	Closed by default below 1200px and revealed by the checkbox through a plain
	sibling combinator -- no :has(), so there is no engine that loses the reveal
	and strands the list shut. */
.article-toc .toc-nav {
	display: none;
}

.article-toc .toc-state:checked ~ .toc-nav {
	display: block;
	margin-top: var(--space-sm);
}

.article-toc .toc-list {
	margin: 0;
	padding: 0;
}

/* The stack of left borders IS the rail -- one continuous hairline that the
	current row turns solid --link. min-height is the phone tap target; from
	1200px the rows tighten to their own padding. */
.article-toc .toc-list a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: var(--space-xs) var(--space-sm);
	border-left: 2px solid color-mix(in srgb, var(--text-heading) 14%, transparent);
	color: var(--text-heading);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	line-height: 1.4;
	text-decoration: none;
	transition:
		color var(--duration-fast) var(--ease-standard),
		border-color var(--duration-fast) var(--ease-standard),
		background-color var(--duration-fast) var(--ease-standard);
}

.article-toc .toc-list a:hover,
.article-toc .toc-list a:focus-visible {
	border-left-color: color-mix(in srgb, var(--link) 45%, transparent);
	color: var(--link);
	text-decoration: none;
}

.article-toc .toc-list a:active {
	color: var(--link-active);
}

/* THE CURRENT SECTION. Written by buildArticleToc()'s scroll spy and by
	nothing else: no template emits this attribute, so before the spy has
	spoken the rail marks nothing at all. */
.article-toc .toc-list a[aria-current="true"] {
	background: color-mix(in srgb, var(--link) 7%, transparent);
	border-left-color: var(--link);
	color: var(--link);
}

/* ---- Desktop: the rail's title ----

	1200px, not the module's 1024: the 20% article sidebar plus a 68ch body plus
	this rail do not fit at 1024, and ../css/header.css already switches at 1199,
	so 1200 is precedent. The control becomes a title: no border, no caret, no
	pointer, and the checkbox leaves the tab order entirely, because from here
	the list is shown unconditionally and the control would change nothing. */
@media (min-width: 1200px) {
	.article-toc .toc-state {
		display: none;
	}

	.article-toc .toc-summary {
		display: block;
		min-height: 0;
		padding: 0 0 var(--space-sm) var(--space-sm);
		border: 0;
		cursor: default;
		color: var(--text-body);
	}

	.article-toc .toc-summary:hover {
		color: var(--text-body);
	}

	.article-toc .toc-summary::after {
		content: none;
	}

	.article-toc .toc-nav,
	.article-toc .toc-state:checked ~ .toc-nav {
		display: block;
		margin-top: 0;
	}

	.article-toc .toc-list a {
		min-height: 0;
		padding: var(--space-xxs) var(--space-sm);
	}
}

/* A sub-heading (the tier below the body's shallowest level) indents under
	its lead and drops to body weight. LAST in this block on purpose: both
	padding rules above are shorthands at the same specificity, so this
	longhand has to come after them to survive. */
.article-toc .toc-sub a {
	padding-left: calc(var(--space-sm) + var(--space-sm));
	font-weight: var(--fw-body);
}

/* ---- Attachments ---- */

.attachments {
	display: flex;
	flex-direction: column;
	margin-top: var(--space-lg);
	border-top: 1px solid var(--border-light);
}

.attachments .attachment-item {
	position: relative;
	padding: var(--space-sm) 0 var(--space-sm) var(--space-lg);
	border-bottom: 1px solid var(--border-light);
	font-weight: var(--fw-semibold);
}

.attachments .attachment-item .attachment-icon {
	color: var(--text-muted);
	left: 0;
	position: absolute;
	top: calc(var(--space-sm) + 4px);
	width: 16px;
	height: 16px;
}

.attachments .attachment-item .attachment-meta {
	display: none;
}

[dir="rtl"] .attachments .attachment-item {
	padding-left: 0;
	padding-right: var(--space-lg);
}

[dir="rtl"] .attachments .attachment-item .attachment-icon {
	left: auto;
	right: 0;
}

/* ---- Share ---- */

.share {
	padding: 0;
	white-space: nowrap;
}

.share li,
.share a {
	display: inline-block;
}

.share li {
	height: 25px;
	width: 25px;
}

.share a {
	color: var(--text-muted);
}

.share a:hover {
	text-decoration: none;
	color: var(--color-primary);
}

.share a svg {
	height: 18px;
	width: 18px;
	display: block;
}

/* ============================================================
	COMMENTS (articles, posts, requests)
	============================================================ */

.comment {
	border-bottom: 1px solid var(--border-light);
	padding: var(--space-md) 0;
}

.comment-heading,
.recent-articles-title,
.related-articles-title {
	margin-bottom: var(--space-sm);
	margin-top: 0;
	font-size: var(--fs-md);
	font-weight: var(--fw-heading);
	line-height: var(--lh-heading);
	letter-spacing: 0;
}

.comment-overview {
	border-bottom: 1px solid var(--border-light);
	border-top: 1px solid var(--border-light);
	padding: var(--space-md) 0;
}

.comment-overview p {
	margin-top: 0;
}

.comment-callout {
	color: var(--text-muted);
	display: inline-block;
	font-size: var(--fs-sm);
	margin-bottom: 0;
}

.comment-callout a {
	color: var(--link);
}

.comment-sorter {
	display: inline-block;
	float: right;
}

.comment-sorter .dropdown-toggle {
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

[dir="rtl"] .comment-sorter {
	float: left;
}

.comment-wrapper {
	display: flex;
	position: relative;
}

.comment-wrapper.comment-official {
	border: 1px solid var(--color-primary);
	border-radius: var(--radius-md);
	padding: var(--space-xl) var(--space-md) var(--space-md);
}

@media (min-width: 768px) {
	.comment-wrapper.comment-official {
		padding-top: var(--space-md);
	}
}

.comment-info {
	min-width: 0;
	padding-right: var(--space-md);
	width: 100%;
}

[dir="rtl"] .comment-info {
	padding-right: 0;
	padding-left: var(--space-md);
}

.comment-author {
	align-items: flex-end;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: var(--space-md);
}

@media (min-width: 768px) {
	.comment-author {
		justify-content: space-between;
	}
}

.comment-avatar {
	margin-right: var(--space-xs);
}

[dir="rtl"] .comment-avatar {
	margin-left: var(--space-xs);
	margin-right: 0;
}

.comment-meta {
	flex: 1 0 auto;
}

.comment-labels {
	flex-basis: 100%;
}

@media (min-width: 768px) {
	.comment-labels {
		flex-basis: auto;
	}
}

.comment .status-label:not(.status-label-official) {
	margin-top: var(--space-xs);
}

@media (min-width: 768px) {
	.comment .status-label:not(.status-label-official) {
		margin-top: 0;
	}
}

.comment-form {
	display: flex;
	padding-top: var(--space-lg);
	word-wrap: break-word;
}

.comment-container {
	width: 100%;
}

.comment-form-controls {
	display: none;
	margin-top: var(--space-xs);
	text-align: left;
}

@media (min-width: 768px) {
	[dir="ltr"] .comment-form-controls {
		text-align: right;
	}
}

.comment-form-controls input[type="submit"] {
	margin-top: var(--space-sm);
}

@media (min-width: 1024px) {
	.comment-form-controls input[type="submit"] {
		margin-left: var(--space-sm);
	}

	[dir="rtl"] .comment-form-controls input[type="submit"] {
		margin-left: 0;
		margin-right: var(--space-sm);
	}
}

.comment-form-controls input[type="checkbox"] {
	margin-right: var(--space-xxs);
}

.comment-ccs {
	display: none;
}

.comment-ccs + textarea {
	margin-top: var(--space-xs);
}

.comment-attachments {
	margin-top: var(--space-xs);
}

.comment-attachments a {
	color: var(--link);
}

.comment-body {
	word-break: break-word;
	overflow-x: auto;
}

.comment-mark-as-solved {
	display: inline-block;
}

/* Vote (comments, posts) */
.vote {
	display: flex;
	flex-direction: column;
	text-align: center;
}

.vote a:active,
.vote a:hover,
.vote a:focus {
	text-decoration: none;
}

.vote-sum {
	color: var(--text-muted);
	display: block;
	margin: 3px 0;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

[dir="rtl"] .vote-sum {
	direction: ltr;
	unicode-bidi: bidi-override;
}

.vote-up svg {
	transform: scale(1, -1);
}

.vote-up,
.vote-down {
	appearance: none;
	background-color: transparent;
	border: none;
	color: var(--text-muted);
	cursor: pointer;
	min-height: 35px;
	min-width: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-button);
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

.vote-up:hover,
.vote-down:hover {
	color: var(--color-primary);
	background-color: var(--surface-light);
}

.vote-voted {
	color: var(--color-primary);
}

.vote-voted:hover {
	color: var(--color-primary-hover);
}

/* Actions (edit, delete, change status) */
.actions {
	text-align: center;
	flex-shrink: 0;
}

.actions button {
	appearance: none;
	background-color: transparent;
	border: none;
	cursor: pointer;
	min-height: 35px;
	min-width: 35px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: var(--radius-button);
}

.actions button:hover {
	background-color: var(--surface-light);
}

/* ============================================================
	COMMUNITY
	============================================================ */

.community {
	text-align: center;
}

.community,
.activity {
	padding: var(--space-xs) 0;
}

.community-footer {
	padding-top: var(--space-2xl);
	text-align: center;
}

.community-footer-title {
	font-size: var(--fs-md);
	margin-bottom: var(--space-md);
}

.community-featured-posts,
.community-activity {
	padding-top: var(--space-xl);
	width: 100%;
}

.community-header {
	margin-bottom: var(--space-lg);
}

.post-to-community {
	margin-top: var(--space-xs);
}

@media (min-width: 768px) {
	.post-to-community {
		margin: 0;
	}
}

.topics {
	max-width: none;
	width: 100%;
}

.topics-item .meta-group {
	justify-content: center;
	margin-top: var(--space-md);
}

.topic-header {
	border-bottom: 1px solid var(--border-light);
	font-size: var(--fs-sm);
}

@media (min-width: 768px) {
	.topic-header {
		padding-bottom: var(--space-xs);
	}
}

.topic-header .dropdown {
	display: block;
	border-top: 1px solid var(--border-light);
	padding: var(--space-xs) 0;
}

@media (min-width: 768px) {
	.topic-header .dropdown {
		border-top: 0;
		display: inline-block;
		margin-right: var(--space-md);
		padding: 0;
	}
}

.no-posts-with-filter {
	margin-top: var(--space-md);
	margin-bottom: var(--space-md);
}

/* Follow button with its follower count */
.community-follow {
	margin-bottom: var(--space-xs);
	width: 100%;
}

@media (min-width: 768px) {
	.community-follow {
		margin-bottom: 0;
		width: auto;
	}
}

.community-follow button {
	position: relative;
	padding-right: var(--space-md);
}

.community-follow button::after {
	content: attr(data-follower-count);
	display: inline-block;
	margin-left: var(--space-sm);
	padding-left: var(--space-xs);
	border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
}

[dir="rtl"] .community-follow button::after {
	border-left: 0;
	border-right: 1px solid color-mix(in srgb, currentColor 30%, transparent);
	margin: 0 var(--space-sm) 0 0;
	padding: 0 var(--space-xs) 0 0;
}

/* Striped list (posts, requests) */
.striped-list {
	padding: 0;
}

.striped-list-item {
	align-items: flex-start;
	border-bottom: 1px solid var(--border-light);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: var(--space-md) 0;
}

@media (min-width: 768px) {
	.striped-list-item {
		align-items: center;
		flex-direction: row;
	}
}

.striped-list-info {
	flex: 2;
	min-width: 0;
}

.striped-list-title {
	color: var(--link);
	font-weight: var(--fw-semibold);
	margin-bottom: var(--space-xs);
	margin-right: var(--space-xxs);
}

.striped-list-title:hover,
.striped-list-title:focus,
.striped-list-title:active {
	text-decoration: underline;
	text-underline-offset: 0.15em;
}

.striped-list-title:visited {
	color: var(--link-active);
}

.striped-list .meta-group {
	margin: var(--space-xxs) 0;
}

.striped-list-count {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	justify-content: flex-start;
	text-transform: capitalize;
}

@media (min-width: 768px) {
	.striped-list-count {
		display: flex;
		flex: 1;
		justify-content: space-around;
	}
}

.striped-list-count-item::after {
	content: "\00B7";
	display: inline-block;
	padding: 0 var(--space-xxs);
}

@media (min-width: 768px) {
	.striped-list-count-item::after {
		display: none;
	}
}

.striped-list-count-item:last-child::after {
	display: none;
}

.striped-list-number {
	text-align: center;
}

@media (min-width: 768px) {
	.striped-list-number {
		color: var(--text-heading);
		display: block;
		font-weight: var(--fw-semibold);
	}
}

/* Status labels: a small pill per state, hues from the accent tokens. */
.status-label {
	background-color: var(--accent-success);
	border-radius: var(--radius-pill);
	color: var(--surface-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.5px;
	text-transform: uppercase;
	margin-right: 2px;
	padding: 3px var(--space-xs);
	vertical-align: middle;
	white-space: nowrap;
	display: inline-block;
	line-height: 1.6;
}

.status-label:hover,
.status-label:active,
.status-label:focus {
	text-decoration: none;
}

.status-label-pinned,
.status-label-featured,
.status-label-official,
.status-label-answered,
.status-label-completed {
	background-color: var(--color-primary);
}

.status-label-official {
	border-radius: 0;
	margin-right: 0;
	position: absolute;
	right: 0;
	text-align: center;
	top: 0;
	width: 100%;
}

@media (min-width: 768px) {
	.status-label-official {
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);
		right: var(--space-lg);
		width: auto;
	}
}

[dir="rtl"] .status-label-official {
	left: var(--space-lg);
	right: auto;
}

.status-label-not-planned,
.status-label-closed {
	background-color: var(--surface-light);
	color: var(--text-body);
}

.status-label-pending,
.status-label-pending-moderation,
.status-label-planned {
	background-color: var(--accent-info);
	text-align: center;
}

.status-label-open {
	background-color: var(--accent-danger);
}

.status-label-solved {
	background-color: var(--text-muted);
}

.status-label-new {
	background-color: var(--accent-warning);
	color: var(--text-heading);
}

.status-label-hold {
	background-color: var(--surface-dark);
}

/* Post page */
.post {
	flex: 1;
	margin-bottom: var(--space-xs);
	min-width: 0;
}

@media (min-width: 1024px) {
	.post {
		flex: 1 0 70%;
		max-width: 70%;
	}
}

.post-container {
	display: flex;
	flex-direction: column;
}

@media (min-width: 1024px) {
	.post-container {
		flex-direction: row;
	}
}

.post-header {
	align-items: center;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	margin-bottom: var(--space-xs);
}

@media (min-width: 768px) {
	.post-header {
		align-items: baseline;
		flex-direction: row;
	}
}

.post-header .status-label {
	vertical-align: super;
}

.post-title {
	margin-bottom: var(--space-md);
	width: 100%;
}

@media (min-width: 768px) {
	.post-title {
		margin-bottom: 0;
		padding-right: var(--space-xs);
	}
}

.post-title h1 {
	display: inline;
	vertical-align: middle;
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
}

@media (min-width: 768px) {
	.post-title h1 {
		margin-right: var(--space-xxs);
	}
}

.post-author {
	align-items: flex-start;
	display: flex;
	justify-content: space-between;
}

.post-avatar {
	margin-bottom: var(--space-lg);
}

.post-content {
	line-height: var(--lh-body);
	word-break: break-word;
}

.post-info-container {
	display: flex;
	margin-bottom: var(--space-xl);
}

.post-info {
	min-width: 0;
	padding-right: var(--space-md);
	width: 100%;
}

[dir="rtl"] .post-info {
	padding-right: 0;
	padding-left: var(--space-md);
}

.post-meta {
	display: inline-block;
	flex: 1;
	margin-left: var(--space-xs);
	vertical-align: middle;
}

[dir="rtl"] .post-meta {
	margin-left: 0;
	margin-right: var(--space-xs);
}

.post-footer {
	align-items: center;
	display: flex;
	justify-content: space-between;
	padding-bottom: var(--space-md);
}

.post-comment-count {
	color: var(--text-muted);
}

.post-comment-count:hover {
	text-decoration: none;
}

.post-comment-count .icon-comments {
	color: var(--color-primary);
	display: inline-block;
	width: 18px;
	height: 18px;
	margin: var(--space-xxs);
	vertical-align: middle;
}

.post-sidebar {
	border-top: 1px solid var(--border-light);
	flex: 1;
	padding: var(--space-lg) 0;
	text-align: center;
}

@media (min-width: 1024px) {
	.post-sidebar {
		border: 0;
		flex: 1 0 30%;
		padding: 0 0 0 50px;
		text-align: initial;
	}

	[dir="rtl"] .post-sidebar {
		padding: 0 50px 0 0;
	}
}

.post-sidebar-title {
	font-size: var(--fs-md);
	font-weight: var(--fw-heading);
	letter-spacing: 0;
}

.post-comments {
	margin-bottom: var(--space-md);
}

@media (min-width: 1024px) {
	.post-comments {
		margin-bottom: 0;
	}
}

/* Community badges */
.community-badge-titles {
	background-color: var(--surface-dark);
	border-radius: var(--radius-pill);
	color: var(--surface-white);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	padding: 2px var(--space-xs);
	vertical-align: middle;
	white-space: nowrap;
	display: inline-flex;
	line-height: 20px;
	margin: 0 2px;
}

.community-badge-container-achievements {
	padding-top: var(--space-xxs);
}

.community-badge-achievements {
	display: inline-block;
	margin: 0 3px 0 0;
}

[dir="rtl"] .community-badge-achievements {
	margin: 0 0 0 3px;
}

.community-badge-achievements img {
	width: 22px;
	height: 22px;
}

.community-badge-titles img {
	width: 20px;
	height: 20px;
}

.profile-info .community-badge-achievements img {
	width: 40px;
	height: 40px;
}

/* ============================================================
	COLLAPSIBLE NAV (my activities tabs) and COLLAPSIBLE SIDEBAR
	Structural breakpoints are Copenhagen's: script.js toggles depend on them.
	============================================================ */

.collapsible-nav {
	flex-direction: column;
	font-size: var(--fs-sm);
	position: relative;
}

@media (min-width: 768px) {
	.collapsible-nav {
		flex-direction: row;
	}
}

.collapsible-nav-border {
	border-bottom: 1px solid var(--border-light);
	border-top: 1px solid var(--border-light);
}

@media (min-width: 768px) {
	.collapsible-nav-border {
		border-top: 0;
	}
}

.collapsible-nav-toggle,
.collapsible-sidebar-toggle {
	position: absolute;
	top: calc(45px / 2);
	transform: translateY(-50%);
	right: 0;
	padding: 0;
	border: 0;
	background: none;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	color: var(--text-heading);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.collapsible-nav-toggle:hover,
.collapsible-sidebar-toggle:hover {
	background: var(--surface-light);
}

@media (min-width: 768px) {
	.collapsible-nav-toggle {
		display: none;
	}
}

[dir="rtl"] .collapsible-nav-toggle,
[dir="rtl"] .collapsible-sidebar-toggle {
	left: 0;
	right: auto;
}

.collapsible-nav-toggle-icon,
.collapsible-sidebar-toggle-icon {
	display: none;
}

.collapsible-nav-toggle[aria-expanded="false"] .chevron-icon,
.collapsible-sidebar-toggle[aria-expanded="false"] .chevron-icon,
.collapsible-nav-toggle[aria-expanded="true"] .x-icon,
.collapsible-sidebar-toggle[aria-expanded="true"] .x-icon {
	display: inline-block;
}

.collapsible-nav-list {
	display: flex;
	flex-direction: column;
}

@media (min-width: 768px) {
	.collapsible-nav-list {
		flex-direction: row;
		gap: var(--space-lg);
	}
}

.collapsible-nav-list li {
	color: var(--text-body);
	line-height: 45px;
	order: 1;
	font-weight: var(--fw-semibold);
}

.collapsible-nav-list li a {
	color: var(--text-body);
	display: block;
	text-decoration: none;
}

@media (min-width: 768px) {
	.collapsible-nav-list li {
		line-height: normal;
		border-bottom: 3px solid transparent;
		transition: border-color var(--duration-fast) var(--ease-standard);
	}

	.collapsible-nav-list li a {
		padding: var(--space-sm) 0;
	}

	.collapsible-nav-list li:hover {
		border-bottom-color: var(--border-light);
	}
}

.collapsible-nav-list li:not([aria-selected="true"]),
.collapsible-nav-list li:not(.current) {
	display: none;
}

@media (min-width: 768px) {
	.collapsible-nav-list li:not([aria-selected="true"]),
	.collapsible-nav-list li:not(.current) {
		display: block;
	}
}

.collapsible-nav-list li[aria-selected="true"],
.collapsible-nav-list li.current {
	order: 0;
	position: relative;
}

@media (min-width: 768px) {
	.collapsible-nav-list li[aria-selected="true"],
	.collapsible-nav-list li.current {
		border-bottom-color: var(--color-primary);
		order: 1;
	}
}

.collapsible-nav-list li[aria-selected="true"] a,
.collapsible-nav-list li.current a {
	color: var(--text-heading);
}

.collapsible-nav[aria-expanded="true"] li:not([aria-selected="true"]),
.collapsible-nav[aria-expanded="true"] li:not(.current) {
	display: block;
}

.collapsible-sidebar {
	flex: 1;
	max-height: 45px;
	overflow: hidden;
	padding: var(--space-xs) 0;
	position: relative;
}

@media (min-width: 1024px) {
	.collapsible-sidebar {
		max-height: none;
		padding: 0;
	}

	.collapsible-sidebar-toggle {
		display: none;
	}
}

.collapsible-sidebar-title {
	margin-top: 0;
	line-height: 25px;
}

.collapsible-sidebar-body {
	display: none;
}

@media (min-width: 1024px) {
	.collapsible-sidebar-body {
		display: block;
	}
}

.collapsible-sidebar[aria-expanded="true"] {
	max-height: none;
}

.collapsible-sidebar[aria-expanded="true"] .collapsible-sidebar-body {
	display: block;
}

/* ============================================================
	MY ACTIVITIES, REQUESTS
	============================================================ */

.my-activities-nav,
.profile-nav {
	background-color: var(--surface-light);
	margin-bottom: var(--space-md);
}

.my-activities-sub-nav {
	margin-bottom: var(--space-lg);
}

.my-activities-table .striped-list-title {
	display: block;
	margin-bottom: var(--space-xs);
	max-width: 350px;
	white-space: normal;
}

@media (min-width: 1024px) {
	.my-activities-table .striped-list-title {
		margin-bottom: 0;
		max-width: 500px;
		min-width: 350px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

.my-activities-table thead,
.requests .requests-table thead {
	display: none;
}

@media (min-width: 768px) {
	.my-activities-table thead,
	.requests .requests-table thead {
		display: table-header-group;
	}
}

.my-activities-table th:first-child,
.my-activities-table td:first-child {
	padding-left: 0;
}

@media (min-width: 1024px) {
	.my-activities-table th:first-child,
	.my-activities-table td:first-child {
		width: 500px;
	}
}

.my-activities-table th:last-child,
.my-activities-table td:last-child {
	padding-right: 0;
}

.my-activities-table td:not(:first-child) {
	display: none;
}

@media (min-width: 768px) {
	.my-activities-table td:not(:first-child) {
		display: table-cell;
	}
}

.requests-search {
	width: 100%;
}

.requests-table-toolbar {
	align-items: flex-end;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

@media (min-width: 768px) {
	.requests-table-toolbar {
		flex-direction: row;
	}
}

.requests-table-toolbar .search {
	flex: 1;
	width: 100%;
}

.requests-table-toolbar .request-table-filter {
	width: 100%;
}

@media (min-width: 768px) {
	.requests-table-toolbar .request-table-filter {
		width: auto;
	}
}

.requests-table-toolbar .request-filter {
	display: block;
}

.requests-table-toolbar .request-filter-label {
	display: block;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	color: var(--text-heading);
	margin-bottom: var(--space-xxs);
}

.requests-table-toolbar select {
	width: 100%;
	padding-top: 12px;
	padding-bottom: 12px;
}

@media (min-width: 768px) {
	.requests-table-toolbar select {
		max-width: 300px;
		width: auto;
	}
}

.requests-table-toolbar .organization-subscribe button {
	white-space: nowrap;
}

.requests-table-toolbar + .requests-search-info {
	margin-top: var(--space-sm);
}

.requests-table-toolbar + .requests-search-info.meta-data::after {
	content: "";
	margin: 0;
}

.requests-table-toolbar + .requests-search-info + .requests {
	margin-top: var(--space-md);
}

.requests-table-toolbar + .requests {
	margin-top: var(--space-xl);
}

.requests .requests-table-meta {
	display: block;
}

@media (min-width: 768px) {
	.requests .requests-table-meta {
		display: none;
	}
}

.requests .requests-table-info {
	display: block;
}

@media (min-width: 768px) {
	.requests .requests-table-info {
		display: table-cell;
		vertical-align: middle;
		width: auto;
	}
}

.requests .requests-table .requests-link {
	position: relative;
}

.requests .requests-table .requests-sort-symbol {
	position: absolute;
	left: calc(100% + 3px);
	bottom: 0;
	font-size: 10px;
}

.subscriptions-table td:last-child {
	display: block;
}

@media (min-width: 768px) {
	.subscriptions-table td:last-child {
		display: table-cell;
	}
}

.subscriptions-table td:first-child {
	display: flex;
	align-items: center;
}

.subscriptions-table .user-avatar {
	margin-right: var(--space-xs);
}

.subscriptions .striped-list-title {
	display: inline-block;
	vertical-align: middle;
}

.contributions-table td:last-child {
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

@media (min-width: 768px) {
	.contributions-table td:last-child {
		color: inherit;
		font-size: inherit;
	}
}

.no-activities {
	color: var(--text-muted);
}

/* Request page */
.request-container {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media (min-width: 1024px) {
	.request-container {
		align-items: flex-start;
		flex-direction: row;
	}
}

.request-container .comment-container {
	min-width: 0;
}

.request-breadcrumbs {
	margin-bottom: var(--space-xl);
}

@media (min-width: 1024px) {
	.request-breadcrumbs {
		margin-bottom: var(--space-2xl);
	}
}

.request-main {
	flex: 1 0 auto;
	order: 1;
}

.request-main .comment-fields,
.request-main .request-submit-comment {
	display: none;
}

.request-main .comment-fields.shown {
	display: block;
}

.request-main .request-submit-comment.shown {
	display: inline;
}

@media (min-width: 1024px) {
	.request-main {
		flex: 0 0 66%;
		order: 0;
		min-width: 0;
	}
}

.request-main .comment-form-controls,
.request-main .comment-ccs {
	display: block;
}

.request-main .comment-show-container {
	border-radius: var(--radius-md);
	border: 1px dashed var(--border-light);
	background: var(--surface-light);
	color: var(--text-muted);
	text-align: inherit;
	padding: var(--space-sm) var(--space-md);
	width: 100%;
	cursor: text;
}

.request-main .comment-show-container.hidden {
	display: none;
}

.request-main .form-field.comment-ccs > ul {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
}

.request-main .form-field.comment-ccs > input[type="text"] {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
	border-bottom: 0;
}

.request-main .comment-ccs + textarea {
	border-top-left-radius: 0;
	border-top-right-radius: 0;
	margin-top: 0;
}

.request-main input#mark_as_solved {
	display: none;
}

.request-title {
	width: 100%;
	font-size: var(--fs-h2);
	letter-spacing: var(--ls-h2);
	line-height: var(--lh-h2);
}

@media (min-width: 1024px) {
	.request-title {
		border-bottom: 1px solid var(--border-light);
		margin-bottom: 0;
		max-width: 66%;
		padding-bottom: var(--space-md);
	}
}

.request-sidebar {
	border-bottom: 1px solid var(--border-light);
	border-top: 1px solid var(--border-light);
	flex: 1 0 auto;
	order: 0;
}

@media (min-width: 1024px) {
	.request-sidebar {
		background-color: var(--surface-light);
		border: 0;
		border-radius: var(--radius-card);
		font-size: var(--fs-sm);
		flex: 0 0 auto;
		padding: 0 var(--space-md);
		width: 30%;
	}
}

.request-sidebar h2 {
	font-size: var(--fs-base);
	font-weight: var(--fw-semibold);
	letter-spacing: 0;
	line-height: var(--lh-heading);
	position: relative;
}

@media (min-width: 1024px) {
	.request-sidebar h2 {
		display: none;
	}
}

.request-details {
	border-bottom: 1px solid var(--border-light);
	font-size: 0;
	margin: 0;
	padding-bottom: var(--space-md);
}

.request-details:last-child {
	border: 0;
}

.request-details dt,
.request-details dd {
	display: inline-block;
	vertical-align: top;
	font-size: var(--fs-sm);
	margin: var(--space-md) 0 0 0;
}

.request-details dd {
	padding: 0 var(--space-xs);
	width: 60%;
}

.request-details dd::after {
	content: "\A";
	white-space: pre;
}

.request-details dt {
	color: var(--text-muted);
	width: 40%;
}

.request-details .request-collaborators {
	display: inline-block;
}

.request-attachments dt,
.request-attachments dd {
	width: 100%;
}

.request-attachments dd {
	margin: var(--space-xs) 0 0 0;
}

.request-form textarea {
	min-height: 120px;
}

.request-follow-up {
	padding-top: var(--space-md);
}

/* ============================================================
	PAGINATION, METADATA
	============================================================ */

.pagination {
	margin: var(--space-md) 0;
	text-align: center;
	display: flex;
	justify-content: center;
	gap: var(--space-xxs);
}

.pagination:empty {
	display: none;
}

.pagination-next,
.pagination-prev,
.pagination-first,
.pagination-last {
	display: inline-block;
}

.pagination-first-link,
.pagination-last-link {
	padding-left: var(--space-xs);
	padding-right: var(--space-xs);
}

.meta-group {
	display: block;
}

.meta-group-opposite {
	float: right;
}

[dir="rtl"] .meta-group-opposite {
	float: left;
}

.meta-group * {
	display: inline;
}

.meta-data {
	color: var(--text-muted);
	font-size: var(--fs-sm);
}

.meta-data:not(:last-child)::after {
	content: "\00B7";
	margin: 0 var(--space-xxs);
}

/* ============================================================
	USER PROFILES
	============================================================ */

.profile-header {
	padding: var(--space-lg) 0;
	background-color: var(--surface-light);
}

.profile-header .container {
	display: flex;
	flex-wrap: wrap;
}

@media (min-width: 768px) {
	.profile-header .container {
		flex-wrap: nowrap;
	}
}

.profile-header .profile-info {
	flex-basis: 100%;
	display: flex;
	flex-wrap: wrap;
	min-width: 0;
}

.profile-avatar {
	position: relative;
	line-height: 0;
	align-self: center;
	margin-right: var(--space-xs);
}

[dir="rtl"] .profile-avatar {
	margin-left: var(--space-xs);
	margin-right: 0;
}

.profile-avatar .user-avatar {
	width: 80px;
	height: 80px;
}

.profile-avatar .icon-agent {
	bottom: 0;
	right: 0;
}

.profile-header .basic-info {
	word-break: break-word;
	display: flex;
	flex-direction: column;
	justify-content: center;
	flex-grow: 1;
	flex-basis: 0;
	min-width: 0;
}

.profile-header .basic-info .name {
	margin: 0;
	line-height: 25px;
	font-size: var(--fs-xl);
	letter-spacing: 0;
}

.profile-header .options {
	display: flex;
	flex-basis: 100%;
	margin-top: 12px;
	align-items: flex-start;
	flex-wrap: wrap;
	gap: var(--space-xs);
}

@media (min-width: 768px) {
	.profile-header .options {
		flex-wrap: nowrap;
		flex-basis: auto;
		margin-top: 0;
		margin-left: var(--space-xs);
	}

	[dir="rtl"] .profile-header .options {
		margin-left: 0;
		margin-right: var(--space-xs);
	}
}

.user-profile-actions {
	width: 100%;
	margin-bottom: var(--space-sm);
}

.profile-header .description {
	word-break: break-word;
	margin: var(--space-sm) 0;
	flex-basis: 100%;
}

.profile-stats {
	font-size: var(--fs-sm);
	display: flex;
	flex-direction: column;
	flex-basis: 100%;
}

.profile-stats .stat {
	display: flex;
	margin-bottom: var(--space-xs);
}

.profile-stats .stat-label {
	color: var(--text-muted);
	flex: 0 0 100px;
	margin-right: var(--space-xs);
}

[dir="rtl"] .profile-stats .stat-label {
	margin-left: var(--space-xs);
	margin-right: 0;
}

.profile-stats-activity {
	border-top: solid 1px var(--border-light);
	margin-top: var(--space-sm);
}

@media (min-width: 768px) {
	.profile-stats-activity {
		border-top: 0;
		flex-direction: row;
	}

	.profile-stats-activity .stat {
		flex-direction: column;
	}
}

.profile-stats-activity .stat:first-child {
	margin-top: var(--space-xs);
}

@media (min-width: 768px) {
	.profile-stats-activity .stat:first-child {
		margin-top: 0;
	}

	.profile-stats-activity .stat:not(:last-child) {
		margin-right: var(--space-xl);
	}

	[dir="rtl"] .profile-stats-activity .stat:not(:last-child) {
		margin-left: var(--space-xl);
		margin-right: 0;
	}

	.profile-stats-activity .stat-label {
		flex: 0 1 auto;
	}
}

.profile-stats-counters {
	border-bottom: solid 1px var(--border-light);
}

@media (min-width: 768px) {
	.profile-stats-counters {
		flex: 0 0 200px;
		border-bottom: 0;
		margin-left: var(--space-xl);
	}

	[dir="rtl"] .profile-stats-counters {
		margin-left: 0;
		margin-right: var(--space-xl);
	}

	.profile-stats-counters .stat {
		flex-direction: column;
	}

	.profile-stats-counters .stat:not(:last-child) {
		margin-bottom: var(--space-sm);
	}

	.profile-stats-counters .stat-label {
		flex: 0 1 auto;
	}
}

@media (min-width: 1024px) {
	.profile-stats-counters {
		flex: 0 0 270px;
		margin-left: var(--space-2xl);
	}

	[dir="rtl"] .profile-stats-counters {
		margin-right: var(--space-2xl);
		margin-left: 0;
	}

	.profile-stats-counters .stat {
		flex-direction: row;
	}

	.profile-stats-counters .stat-label {
		flex: 0 0 100px;
	}
}

.profile-private-badge {
	flex-basis: 100%;
	border: solid 1px var(--color-primary);
	border-radius: var(--radius-pill);
	color: var(--color-primary);
	padding: var(--space-xxs) var(--space-md);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	text-align: center;
}

.profile-private-badge .profile-private-icon {
	margin-left: var(--space-xxs);
	line-height: 15px;
}

@media (min-width: 768px) {
	.profile-private-badge {
		flex-basis: auto;
	}
}

.profile-nav {
	margin-bottom: 37px;
}

.profile-section {
	width: 100%;
}

@media (min-width: 1024px) {
	.profile-section {
		width: calc(100% - 330px);
	}
}

.profile-section-header {
	display: flex;
	flex-wrap: wrap;
}

.profile-section-title {
	flex-basis: 100%;
	margin-bottom: 0;
}

.profile-section-description {
	flex-basis: 100%;
	padding: var(--space-xs) 0;
	color: var(--text-muted);
	font-size: var(--fs-sm);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

@media (min-width: 768px) {
	.profile-section-description {
		flex: 1 0 50%;
		padding-bottom: 0;
	}
}

.profile-section-sorter {
	flex-basis: 100%;
	border-top: solid 1px var(--border-light);
	font-size: var(--fs-sm);
}

.profile-section-sorter .dropdown-toggle {
	padding: var(--space-xs) 0;
	width: 100%;
}

.profile-section-sorter .dropdown-toggle::after {
	position: absolute;
	right: 0;
}

[dir="rtl"] .profile-section-sorter .dropdown-toggle::after {
	left: 0;
	right: initial;
}

@media (min-width: 768px) {
	.profile-section-sorter .dropdown-toggle::after {
		position: relative;
	}

	.profile-section-sorter {
		flex: 0 1 auto;
		padding-top: 0;
		border-top: 0;
		margin-left: var(--space-md);
	}

	[dir="rtl"] .profile-section-sorter {
		margin-left: 0;
		margin-right: var(--space-md);
	}
}

.profile-badges-items {
	margin-top: 25px;
}

.profile-badges-item {
	border-top: 1px solid var(--border-light);
	display: flex;
	flex: 1;
	flex-direction: row;
	justify-content: flex-start;
	padding: 27px 12px;
}

.profile-badges-item > div {
	padding-right: 12px;
	padding-left: 12px;
}

.profile-badges-item-image {
	height: 40px;
	width: 40px;
	margin-right: 12px;
}

.profile-badges-item-image img {
	max-height: 40px;
}

[dir="rtl"] .profile-badges-item-image {
	margin-left: 12px;
	margin-right: 0;
}

.profile-badges-item-title,
.profile-badges-item-metadata-title {
	font-size: var(--fs-base);
	margin-bottom: var(--space-xs);
}

.profile-badges-item-title {
	font-weight: var(--fw-semibold);
}

.profile-badges-item-description,
.profile-badges-item-metadata-description {
	color: var(--text-muted);
	font-size: var(--fs-sm);
	margin: 0;
}

.profile-badges-item-metadata {
	margin-left: auto;
	text-align: right;
}

[dir="rtl"] .profile-badges-item-metadata {
	margin-left: 0;
	margin-right: auto;
	text-align: left;
}

.profile-contribution {
	word-break: break-word;
	padding: var(--space-md) 0;
	position: relative;
}

.profile-contribution-header {
	margin-bottom: var(--space-xxs);
}

.profile-contribution-title {
	margin: 0 0 var(--space-xxs) 0;
	display: inline;
	line-height: 21px;
	font-size: var(--fs-base);
	letter-spacing: 0;
	vertical-align: middle;
}

.profile-contribution-body {
	margin: var(--space-xs) 0;
}

.profile-contribution-list > .profile-contribution {
	border-top: 1px solid var(--border-light);
}

@media (min-width: 768px) {
	.profile-contribution-list > .profile-contribution {
		padding-left: var(--space-lg);
	}

	[dir="rtl"] .profile-contribution-list > .profile-contribution {
		padding-right: var(--space-lg);
		padding-left: 0;
	}
}

.profile-contribution-list > .profile-contribution:last-child {
	border-bottom: 1px solid var(--border-light);
}

.profile-contribution-icon {
	left: 0;
	position: absolute;
	color: var(--text-muted);
	line-height: 25px;
}

[dir="rtl"] .profile-contribution-icon {
	right: 0;
}

.profile-contribution-icon svg {
	vertical-align: middle;
}

.profile-contribution-list .profile-contribution-header,
.profile-comments .profile-contribution-breadcrumbs {
	margin-left: var(--space-lg);
}

[dir="rtl"] .profile-contribution-list .profile-contribution-header,
[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
	padding-right: var(--space-lg);
	padding-left: 0;
}

@media (min-width: 768px) {
	.profile-contribution-list .profile-contribution-header,
	.profile-comments .profile-contribution-breadcrumbs {
		margin-left: 0;
	}

	[dir="rtl"] .profile-contribution-list .profile-contribution-header,
	[dir="rtl"] .profile-comments .profile-contribution-breadcrumbs {
		padding-right: 0;
	}
}

.profile-section .no-activity,
.profile-section .private-activity {
	display: block;
	margin-top: var(--space-xl);
	color: var(--text-muted);
}

.private-activity-icon {
	margin-right: var(--space-xs);
}

[dir="rtl"] .private-activity-icon {
	margin-right: 0;
	margin-left: var(--space-xs);
}

.profile-activity-list {
	margin-top: 25px;
}

.profile-activity {
	position: relative;
	padding-bottom: var(--space-lg);
}

@media (min-width: 768px) {
	.profile-activity {
		padding-left: var(--space-md);
	}

	[dir="rtl"] .profile-activity {
		padding-right: var(--space-md);
		padding-left: 0;
	}

	.profile-activity:not(:last-child) {
		border-left: 1px solid var(--border-light);
	}

	[dir="rtl"] .profile-activity:not(:last-child) {
		border-left: 0;
		border-right: 1px solid var(--border-light);
	}
}

.profile-activity-header {
	display: flex;
	align-items: center;
	margin-left: 35px;
}

[dir="rtl"] .profile-activity-header {
	margin-left: 0;
	margin-right: 35px;
}

@media (min-width: 768px) {
	.profile-activity-header {
		margin-left: 0;
	}

	[dir="rtl"] .profile-activity-header {
		margin-right: 0;
	}
}

.profile-activity-header .user-avatar {
	width: 40px;
	height: 40px;
	margin-right: var(--space-xs);
	min-width: 40px;
	align-self: flex-start;
}

[dir="rtl"] .profile-activity-header .user-avatar {
	margin-left: var(--space-xs);
	margin-right: 0;
}

.profile-activity-description {
	word-break: break-word;
	margin: 0;
	min-width: 0;
	width: 100%;
}

.profile-activity-description span:first-child {
	font-weight: var(--fw-semibold);
	display: inline;
}

.profile-activity-contribution {
	padding: var(--space-md);
	margin-top: var(--space-xs);
	border-radius: var(--radius-md);
	background-color: var(--surface-light);
}

@media (min-width: 768px) {
	.profile-activity-contribution {
		margin-top: 0;
		margin-left: 50px;
	}

	[dir="rtl"] .profile-activity-contribution {
		margin-left: 0;
		margin-right: 50px;
	}
}

.profile-activity-icon {
	position: absolute;
	left: 0;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background-color: var(--surface-white);
	text-align: center;
	color: var(--text-muted);
}

[dir="rtl"] .profile-activity-icon {
	right: 0;
}

@media (min-width: 768px) {
	.profile-activity-icon {
		left: -14px;
	}

	[dir="rtl"] .profile-activity-icon {
		right: -14px;
	}
}

.profile-activity-icon svg {
	position: relative;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1em;
	margin: auto;
}

/* ============================================================
	SEARCH RESULTS
	============================================================ */

.search-results {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: space-between;
}

@media (min-width: 1024px) {
	.search-results {
		flex-direction: row;
	}
}

.search-results-column {
	flex: 1;
	min-width: 0;
}

@media (min-width: 1024px) {
	.search-results-column {
		flex: 0 0 75%;
	}
}

.search-results-sidebar {
	border-top: 1px solid var(--border-light);
	flex: 1 0 auto;
	margin-bottom: var(--space-md);
	padding: 0;
}

@media (min-width: 1024px) {
	.search-results-sidebar {
		border: 0;
		flex: 0 0 20%;
		height: auto;
	}
}

.search-results-sidebar .sidenav-subitem {
	unicode-bidi: embed;
}

.search-results-sidebar .collapsible-sidebar {
	margin-bottom: var(--space-lg);
}

.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
	display: none;
}

@media (min-width: 1024px) {
	.search-results-sidebar .collapsible-sidebar[aria-expanded="false"] .multibrand-filter-list {
		display: block;
	}
}

.search-results-sidebar .multibrand-filter-list--collapsed li:nth-child(1n + 6) {
	display: none;
}

.search-results-sidebar .multibrand-filter-list .doc-count {
	color: var(--text-muted);
	font-size: var(--fs-xs);
	margin-left: var(--space-xxs);
}

.search-results-sidebar .see-all-filters {
	background: none;
	border: none;
	cursor: pointer;
	display: block;
	padding: var(--space-xs);
	color: var(--link);
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
}

.search-results-sidebar .see-all-filters[aria-hidden="true"] {
	display: none;
}

.search-results-sidebar .see-all-filters:hover {
	text-decoration: underline;
}

.search-results-list {
	margin-bottom: 25px;
}

.search-results-list > li {
	padding: var(--space-md) 0;
	border-bottom: 1px solid var(--border-light);
}

.search-results-list > li h2 {
	margin-bottom: 0;
}

.search-results .meta-group {
	display: block;
	align-items: center;
	clear: both;
	color: var(--text-muted);
}

@media (min-width: 1024px) {
	.search-results .meta-group {
		display: flex;
	}
}

.search-results .meta-group > li {
	display: block;
}

@media (min-width: 1024px) {
	.search-results .meta-group > li {
		display: inline;
	}

	.search-results .meta-group li:first-child {
		flex: 1;
	}
}

.search-results .meta-group .meta-data {
	color: inherit;
}

[dir="ltr"] .search-results .meta-group .meta-data:not(:last-child) {
	margin-right: var(--space-md);
}

[dir="rtl"] .search-results .meta-group .meta-data:not(:last-child) {
	margin-left: var(--space-md);
}

.search-results .meta-group .meta-data::after {
	content: none;
}

.search-results-description {
	margin-top: var(--space-xs);
	word-break: break-word;
	max-width: var(--measure-article);
}

.search-result-title {
	font-size: var(--fs-md);
	font-weight: var(--fw-semibold);
	display: inline-block;
	line-height: var(--lh-heading);
}

[dir="ltr"] .search-result-icons {
	float: right;
}

[dir="rtl"] .search-result-icons {
	float: left;
}

.search-result-votes,
.search-result-meta-count {
	color: var(--text-muted);
	display: inline-block;
	font-size: var(--fs-sm);
	padding: 4px 5px;
	position: relative;
}

.search-result-votes-icon,
.search-result-meta-count-icon {
	color: var(--color-primary);
	vertical-align: middle;
	width: 13px;
	height: 13px;
}

[dir="ltr"] .search-result-votes,
[dir="ltr"] .search-result-meta-count {
	margin-left: var(--space-xxs);
}

[dir="rtl"] .search-result-votes,
[dir="rtl"] .search-result-meta-count {
	margin-right: var(--space-xxs);
}

.search-result .meta-group {
	align-items: center;
}

.search-result-breadcrumbs {
	margin: 0;
}

.search-result-breadcrumbs li,
.search-result-breadcrumbs li a,
.search-result-breadcrumbs li a:visited {
	color: inherit;
}

/* Highlighted terms: weight, not italics. */
.search-results-description em {
	font-style: normal;
	font-weight: var(--fw-heading);
	color: var(--text-heading);
}

html[lang|="zh"] .search-results-description em {
	background: color-mix(in srgb, var(--color-dark-highlight) 40%, transparent);
}

/* ============================================================
	NOTIFICATIONS -- Zendesk's flash messages, tinted from the accents
	============================================================ */

.notification {
	border: 1px solid;
	display: table;
	font-size: var(--fs-sm);
	font-weight: var(--fw-semibold);
	padding: 13px var(--space-sm);
	width: 100%;
	color: var(--text-heading);
}

.notification a {
	color: var(--link);
	text-decoration: underline;
}

.notification-inner {
	margin: 0 auto;
	padding: 0 var(--space-md);
	max-width: var(--container-narrow);
}

.notification-icon,
.notification-text,
.notification-dismiss {
	display: table-cell;
	vertical-align: middle;
}

.notification-text {
	padding: 0 var(--space-sm);
	width: 100%;
}

.notification + .notification {
	margin-bottom: -1px;
	position: relative;
	top: -1px;
}

.notification-error {
	background: color-mix(in srgb, var(--accent-danger) 8%, var(--surface-white));
	border-color: color-mix(in srgb, var(--accent-danger) 40%, transparent);
}

.notification-notice {
	background: color-mix(in srgb, var(--accent-info) 8%, var(--surface-white));
	border-color: color-mix(in srgb, var(--accent-info) 40%, transparent);
}

.notification-alert {
	background: color-mix(in srgb, var(--accent-warning) 12%, var(--surface-white));
	border-color: color-mix(in srgb, var(--accent-warning) 50%, transparent);
}

.notification-icon::before,
.notification-inline.notification-error::before {
	background-size: cover;
	content: "";
	display: inline-block;
	height: 14px;
	width: 14px;
	vertical-align: middle;
}

.notification-error .notification-icon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e5484d'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e5484d'/%3E%3C/svg%3E");
}

.notification-notice .notification-icon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%231865e8'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3.5 6l2 2L9 4.5'/%3E%3Ccircle cx='6' cy='6' r='5.5'/%3E%3C/g%3E%3C/svg%3E");
}

.notification-alert .notification-icon::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23efa22f' stroke-linecap='round' d='M5.06 1.27l-4.5 8.5c-.18.33.06.73.44.73h9c.38 0 .62-.4.44-.73l-4.5-8.5a.494.494 0 00-.88 0zM5.5 4v2'/%3E%3Ccircle cx='5.5' cy='8' r='.8' fill='%23efa22f'/%3E%3C/svg%3E");
}

.notification-dismiss,
a.notification-dismiss {
	color: var(--text-heading);
	cursor: pointer;
	opacity: 0.6;
	transition: opacity var(--duration-fast) var(--ease-standard);
	text-decoration: none !important;
}

.notification-dismiss:hover {
	opacity: 1;
}

.notification-inline {
	border-radius: var(--radius-sm);
	line-height: 14px;
	margin-top: var(--space-xxs);
	padding: var(--space-xxs);
	position: relative;
	text-align: left;
	vertical-align: middle;
}

[dir="rtl"] .notification-inline {
	text-align: right;
}

.notification-inline[aria-hidden="true"] {
	display: none;
}

.notification-inline.notification-error::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' focusable='false' viewBox='0 0 12 12'%3E%3Cg fill='none' stroke='%23e5484d'%3E%3Ccircle cx='5.5' cy='6.5' r='5'/%3E%3Cpath stroke-linecap='round' d='M5.5 3.5v3'/%3E%3C/g%3E%3Ccircle cx='5.5' cy='9' r='1' fill='%23e5484d'/%3E%3C/svg%3E");
	margin: -2px var(--space-xxs) 0 0;
}

[dir="rtl"] .notification-inline.notification-error::before {
	margin: 0 0 0 var(--space-xxs);
}

.notification-inline.notification-error {
	background-color: color-mix(in srgb, var(--accent-danger) 8%, var(--surface-white));
	border: 1px solid var(--accent-danger);
	color: var(--accent-danger);
}

.notification-inline.notification-large {
	padding: 13px var(--space-sm);
	margin-bottom: 25px;
}

.notification-left-aligned {
	text-align: left;
	padding-left: 0;
}

html[dir="rtl"] .notification-left-aligned {
	text-align: right;
	padding-right: 0;
}

/* ============================================================
	DROPDOWN
	============================================================ */

.dropdown {
	position: relative;
	display: inline-block;
}

.dropdown-toggle {
	cursor: pointer;
	background: none;
	border: 0;
	display: inline-block;
	padding: 0;
	text-align: initial;
	vertical-align: middle;
}

.dropdown-toggle:hover {
	text-decoration: none;
}

.dropdown-toggle > * {
	display: inline-block;
}

.dropdown-chevron-icon {
	vertical-align: middle;
}

.dropdown-menu {
	background: var(--surface-white);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-card);
	display: none;
	font-size: var(--fs-sm);
	font-style: normal;
	font-weight: var(--fw-body);
	left: 0;
	margin-top: var(--space-xxs);
	min-width: 190px;
	padding: var(--space-xs) 0;
	position: absolute;
	text-align: left;
	z-index: 1000;
}

[dir="rtl"] .dropdown-menu {
	left: auto;
	right: 0;
	text-align: right;
}

.dropdown-menu[aria-expanded="true"] {
	display: block;
}

.dropdown-menu [role="separator"] {
	border-bottom: 1px solid var(--border-light);
	color: var(--text-muted);
	display: block;
	font-size: var(--fs-xs);
	padding: var(--space-xxs) 0;
	margin: var(--space-xxs) var(--space-md) var(--space-xs);
}

.dropdown-menu [role="menuitem"] {
	color: var(--text-body);
	cursor: pointer;
	display: block;
	padding: 7px var(--space-xl) 7px var(--space-md);
	white-space: nowrap;
	background-color: transparent;
	border: 0;
	appearance: none;
	text-align: start;
	line-height: inherit;
	width: 100%;
	text-decoration: none;
	transition:
		background-color var(--duration-fast) var(--ease-standard),
		color var(--duration-fast) var(--ease-standard);
}

[dir="rtl"] .dropdown-menu [role="menuitem"] {
	padding: 7px var(--space-md) 7px var(--space-xl);
}

.dropdown-menu [role="menuitem"]:hover,
.dropdown-menu [role="menuitem"]:focus {
	background: var(--surface-light);
	text-decoration: none;
	color: var(--text-heading);
}

.dropdown-menu [role="menuitem"][aria-selected="true"] {
	cursor: default;
	color: var(--text-heading);
	font-weight: var(--fw-semibold);
}

.dropdown-menu [role="menuitem"][aria-selected="true"]::after {
	content: "";
	background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='currentColor' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M1 7l3 3 7-7'%3E%3C/path%3E%3C/svg%3E");
	display: inline-block;
	height: 12px;
	margin-left: var(--space-xs);
	width: 12px;
}

[dir="rtl"] .dropdown-menu [role="menuitem"][aria-selected="true"]::after {
	margin-left: 0;
	margin-right: var(--space-xs);
	float: left;
}

.dropdown-menu [role="menuitem"][hidden],
.dropdown-menu [role="menuitem"][aria-hidden="true"] {
	display: none !important;
}

.dropdown-menu-end {
	left: auto;
	right: 0;
}

[dir="rtl"] .dropdown-menu-end {
	left: 0;
	right: auto;
}

.dropdown-menu-top {
	bottom: 100%;
	margin-bottom: var(--space-xxs);
}

/* ============================================================
	ERROR PAGE
	============================================================ */

.error-page {
	padding-top: var(--space-2xl);
	padding-bottom: var(--space-2xl);
	max-width: var(--container-narrow);
}

.error-page h2 {
	font-size: var(--fs-h3);
	letter-spacing: 0;
}

/* ============================================================
	REDUCED MOTION -- every transition above is a color, opacity or
	transform hover; this switches them all off.
	============================================================ */

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