/**
 * AppMin Docs — front-end styles.
 *
 * Scoped entirely under .amd-* so nothing here can reach the theme, Elementor
 * or any other plugin's markup. Colours come from custom properties, and the
 * accent is written per-page from the settings screen.
 */

/**
 * Defaults only. The settings screen writes the real values onto :root, so
 * anything set in the admin wins without touching this file.
 */
:root {
	--amd-accent: #0c80d4;
	--amd-bg: #030311;
	--amd-bg-2: #0d0d5c;
	--amd-content-w: none;
	--amd-side-pad: 9%;
	--amd-sidebar-w: 260px;
	--amd-toc-w: 240px;
	--amd-sticky: 156px;
	--amd-space-top: 7%;
	--amd-space-bottom: 6%;
	--amd-pull: 155px;
	--amd-gap-top: 44px;
}

.amd-page,
.amd-shell,
.amd-index,
.amd-tabsbar {
	--amd-panel: #08081c;
	--amd-text: #ffffff;
	--amd-text-2: #c7d2e6;
	--amd-muted: #9aa6c2;
	--amd-line: rgba(255, 255, 255, 0.08);
	--amd-line-2: rgba(255, 255, 255, 0.15);
	--amd-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/**
 * The background runs the full width of the screen; every child centres its
 * own content at --amd-content-w. That is the whole trick — no negative
 * margins, and it survives any theme container it lands in.
 */
/**
 * Full-bleed background.
 *
 * `width: 100%` is not enough: the theme wraps this template in its own
 * container, so 100% is 100% of THAT — which leaves white down both edges.
 * These four lines break the band out to the viewport regardless of how many
 * containers it is nested inside, while the inner columns stay at
 * --amd-content-w. This is the whole "full background, 1140 content" ask.
 */
.amd-page {
	/**
	 * No `width: 100vw` here on purpose. Viewport units include the scrollbar,
	 * so a 100vw box inside a scrolling page is a few pixels wider than the
	 * space available — which is the horizontal overflow on the right. Letting
	 * the negative margins alone define the width avoids it.
	 */
	margin-top: calc(-1 * var(--amd-pull));
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);

	/* The pull-up is added back as padding so the content does not ride up
	   under the header with the background. */
	padding-top: calc(var(--amd-space-top) + var(--amd-pull));
	padding-bottom: var(--amd-space-bottom);
	/**
	 * A flat page colour with one soft pool of light behind the top of the
	 * article, rather than a top-to-bottom gradient. The glow fades to
	 * --amd-bg rather than to `transparent`, because fading a colour to
	 * transparent interpolates through transparent BLACK and leaves a grey
	 * halo on the way out.
	 */
	background-color: var(--amd-bg);
	/* Centred on where the article actually starts, not on the top edge of the
	   band — the band's first --amd-pull pixels sit behind the site header, so
	   a glow at 0% would have half of itself hidden. */
	background-image: radial-gradient(115% 700px at 50% var(--amd-pull), var(--amd-bg-2) 0%, var(--amd-bg) 70%);
	background-repeat: no-repeat;
}

/**
 * Only on documentation pages, via a body class the plugin adds itself.
 * `clip` rather than `hidden` so no new scroll container is created — which
 * would break the sticky columns.
 */
body.amdocs-page {
	overflow-x: clip;
}

/* The tab strip sits on the glow, so it lets the background through. */
.amd-page .amd-tabsbar {
	background: transparent;
}

/**
 * The wrappers are included here, not just their descendants.
 *
 * Left as content-box, a 1140px max-width plus 24px of side padding renders
 * 1188px wide — which is exactly the "content is not 1140" problem.
 */
.amd-page,
.amd-shell,
.amd-tabsbar__inner,
.amd-index,
.amd-page *,
.amd-page *::before,
.amd-page *::after,
.amd-index *,
.amd-index *::before,
.amd-index *::after {
	box-sizing: border-box;
}

/**
 * Any theme that ships `svg { width: 100% }` — plenty do — would otherwise
 * blow every inline icon up to the width of its column. Icons carry explicit
 * width/height attributes too, so this is the second line of defence.
 */
.amd-page svg,
.amd-index svg {
	flex: none;
}

/**
 * Icons are sized in em and marked important.
 *
 * `!important` is not decoration here: themes commonly ship
 * `img, svg { width: 100% !important }`, and without matching that the little
 * chevrons and search glyphs stretch to the width of their column. Scoped to
 * this plugin's own namespace, so it cannot affect anything else on the page.
 */
.amd-page .amd-tab svg,
.amd-page .amd-navlist svg,
.amd-page .amd-navsearch svg,
.amd-page .amd-navsearch__clear svg,
.amd-page .amd-allcats svg,
.amd-page .amd-breadcrumb svg,
.amd-page .amd-meta svg,
.amd-page .amd-btn-sm svg,
.amd-page .amd-toc__title svg,
.amd-page .amd-toc-mobile svg,
.amd-page .amd-navtoggle svg,
.amd-index .amd-card svg {
	width: 1em !important;
	height: 1em !important;
	min-width: 0 !important;
	max-width: none !important;
	flex: none !important;
}

/* Body content is the author's own markup — their sizing wins there. */
.amd-page .amd-body svg {
	width: auto;
	height: auto;
	max-width: 100%;
}

/* ------------------------------------------------------------------ */
/* Category tabs                                                       */
/* ------------------------------------------------------------------ */

/**
 * The tab strip scrolls away with the page. Only the sidebar and the contents
 * list stay pinned — pinning a third bar as well left too little of the
 * article on screen.
 */
.amd-tabsbar {
	background: transparent;
	border-bottom: 1px solid var(--amd-line);
}


.amd-tabsbar__inner {
	max-width: var(--amd-content-w);
	margin: 0 auto;
	padding: 0 var(--amd-side-pad);
	display: flex;
	align-items: center;
	gap: 6px;
	overflow-x: auto;
	scrollbar-width: none;
}

.amd-tabsbar__inner::-webkit-scrollbar {
	display: none;
}

.amd-tab {
	position: relative;
	display: inline-flex;
	align-items: center;
	height: 52px;
	padding: 0 14px;
	white-space: nowrap;
	color: var(--amd-muted);
	font-weight: 600;
	font-size: 14.5px;
	text-decoration: none;
	transition: color 0.2s var(--amd-ease);
}

.amd-tab:hover {
	color: var(--amd-text-2);
}

.amd-tab.is-active {
	color: #fff;
}

.amd-tab.is-active::after {
	content: "";
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: -1px;
	height: 2px;
	background: var(--amd-accent);
	border-radius: 2px 2px 0 0;
}

/* ------------------------------------------------------------------ */
/* Shell                                                               */
/* ------------------------------------------------------------------ */

/**
 * Manrope throughout the docs layout.
 *
 * Set on the wrappers rather than on `body`, so it cannot leak out onto the
 * rest of the site, and with a real fallback stack so the page still reads
 * correctly if the webfont is blocked or slow.
 */
.amd-page,
.amd-page button,
.amd-page input,
.amd-page select,
.amd-page textarea,
.amd-index {
	font-family: "Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Code keeps a monospace face — Manrope would make samples unreadable. */
.amd-page code,
.amd-page pre,
.amd-page kbd,
.amd-page samp {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

.amd-shell {
	position: relative;
	max-width: var(--amd-content-w);
	margin: var(--amd-gap-top) auto 0;
	padding: 0 var(--amd-side-pad);
	display: grid;
	grid-template-columns: var(--amd-sidebar-w) minmax(0, 1fr) var(--amd-toc-w);
	gap: 48px;
	align-items: start;
	color: var(--amd-text-2);
	font-size: 16.5px;
	line-height: 1.62;
}

.amd-shell--no-sidebar {
	grid-template-columns: minmax(0, 1fr) var(--amd-toc-w);
}

.amd-shell--no-toc {
	grid-template-columns: var(--amd-sidebar-w) minmax(0, 1fr);
}

.amd-shell--no-sidebar.amd-shell--no-toc {
	grid-template-columns: minmax(0, 1fr);
}

.amd-shell a {
	color: #8fc7f2;
	text-decoration: none;
}

.amd-shell a:hover {
	color: #b7ddfa;
}

.amd-shell :focus-visible {
	outline: 2px solid var(--amd-accent);
	outline-offset: 3px;
	border-radius: 6px;
}

/* ------------------------------------------------------------------ */
/* Sidebar                                                             */
/* ------------------------------------------------------------------ */

.amd-sidebar {
	position: sticky;
	top: var(--amd-sticky);
	max-height: calc(100vh - var(--amd-sticky) - 20px);
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 0 8px 40px 0;
	scrollbar-width: thin;
}

.amd-sidebar::-webkit-scrollbar {
	width: 6px;
}

.amd-sidebar::-webkit-scrollbar-thumb {
	background: rgba(255, 255, 255, 0.12);
	border-radius: 99px;
}

.amd-navsearch {
	position: sticky;
	top: 0;
	z-index: 2;
	padding: 0 0 14px;
	background: linear-gradient(180deg, var(--amd-bg) 72%, transparent);
}

.amd-navsearch__field {
	display: flex;
	align-items: center;
	gap: 9px;
	height: 38px;
	padding: 0 11px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--amd-line);
	border-radius: 11px;
	transition: border-color 0.2s var(--amd-ease);
}

.amd-navsearch__field:focus-within {
	border-color: rgba(12, 128, 212, 0.55);
}

.amd-navsearch__field svg {
	width: 15px;
	height: 15px;
	color: var(--amd-muted);
	flex: none;
}

.amd-navsearch input {
	flex: 1;
	min-width: 0;
	background: transparent;
	border: 0;
	outline: none;
	color: #fff;
	font: inherit;
	font-size: 14px;
}

.amd-navsearch input::placeholder {
	color: var(--amd-muted);
}

.amd-navsearch__empty {
	display: none;
	padding: 10px 12px;
	margin: 0;
	font-size: 13.5px;
	color: var(--amd-muted);
}

.amd-navsearch__empty.is-on {
	display: block;
}

.amd-navgroup {
	margin-bottom: 22px;
}

.amd-navgroup[hidden],
.amd-navlist li[hidden] {
	display: none;
}

.amd-navgroup__title {
	font-size: 13px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
	padding-left: 12px;
}

.amd-navgroup__title a {
	color: #fff;
}

.amd-navlist {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.amd-navlist a {
	display: block;
	padding: 6px 12px;
	border-radius: 9px;
	color: var(--amd-text-2);
	font-size: 14px;
	line-height: 1.4;
	transition: color 0.18s var(--amd-ease), background 0.18s var(--amd-ease);
}

.amd-navlist a:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.05);
}

.amd-navlist a[aria-current="page"] {
	color: #fff;
	font-weight: 600;
	background: linear-gradient(90deg, rgba(12, 128, 212, 0.28), rgba(12, 128, 212, 0.1));
	box-shadow: inset 0 0 0 1px rgba(12, 128, 212, 0.34);
}

.amd-badge {
	display: inline-block;
	margin-left: 8px;
	padding: 1px 7px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 600;
	color: #9fc9ea;
	background: rgba(12, 128, 212, 0.16);
	border: 1px solid rgba(12, 128, 212, 0.28);
}

mark.amd-hit {
	background: rgba(12, 128, 212, 0.32);
	color: #fff;
	border-radius: 4px;
	padding: 0 2px;
}

/* ------------------------------------------------------------------ */
/* Article                                                             */
/* ------------------------------------------------------------------ */

.amd-content {
	min-width: 0;
	padding: 0 0 40px;
	max-width: 100%;
}

.amd-breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	font-size: 13.5px;
	color: var(--amd-muted);
	margin-bottom: 26px;
}

.amd-breadcrumb a {
	color: var(--amd-muted);
}

.amd-breadcrumb svg {
	width: 12px;
	height: 12px;
	opacity: 0.55;
}

.amd-shell .amd-title {
	font-size: clamp(34px, 4.4vw, 46px);
	font-weight: 800;
	letter-spacing: -0.028em;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 18px;
}

.amd-shell .amd-lede {
	font-size: 18.5px;
	line-height: 1.55;
	color: var(--amd-text-2);
	margin: 0 0 24px;
	max-width: 48em;
}

.amd-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 20px;
	padding-bottom: 28px;
	margin-bottom: 38px;
	border-bottom: 1px solid var(--amd-line);
	font-size: 13.5px;
	color: var(--amd-muted);
}

.amd-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}

.amd-meta__item svg {
	width: 14px;
	height: 14px;
	opacity: 0.75;
}

.amd-actions {
	margin-left: auto;
	display: flex;
	gap: 8px;
}

.amd-btn-sm {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 34px;
	padding: 0 13px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid var(--amd-line);
	border-radius: 10px;
	color: var(--amd-text-2);
	font: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.2s var(--amd-ease), color 0.2s var(--amd-ease);
}

.amd-btn-sm:hover {
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
}

.amd-btn-sm svg {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------------ */
/* Article body — styles the author's own HTML                         */
/* ------------------------------------------------------------------ */

.amd-body {
	color: var(--amd-text-2);
}

.amd-body h2 {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.2;
	color: #fff;
	margin: 44px 0 16px;
	scroll-margin-top: 90px;
}

.amd-body h3 {
	font-size: 18.5px;
	font-weight: 700;
	color: #fff;
	margin: 30px 0 12px;
	scroll-margin-top: 90px;
}

.amd-body h4 {
	font-size: 15.5px;
	font-weight: 600;
	color: #fff;
	margin: 26px 0 10px;
}

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

.amd-body p {
	margin: 0 0 14px;
	max-width: 50em;
}

.amd-body strong {
	color: #fff;
	font-weight: 600;
}

.amd-body ul,
.amd-body ol {
	margin: 0 0 16px;
	padding-left: 22px;
	max-width: 50em;
}

.amd-body li {
	margin-bottom: 5px;
	line-height: 1.58;
}

.amd-body a {
	color: #8fc7f2;
}

.amd-body code {
	font-size: 0.9em;
	font-weight: 600;
	color: #bfe0f8;
	background: rgba(12, 128, 212, 0.13);
	border: 1px solid rgba(12, 128, 212, 0.24);
	padding: 1.5px 7px;
	border-radius: 7px;
}

.amd-body pre {
	background: var(--amd-panel);
	border: 1px solid var(--amd-line);
	border-radius: 12px;
	padding: 16px 18px;
	overflow-x: auto;
	margin: 0 0 18px;
}

.amd-body pre code {
	background: none;
	border: 0;
	padding: 0;
	color: var(--amd-text-2);
	font-weight: 400;
}

.amd-body blockquote {
	margin: 18px 0;
	padding: 2px 0 2px 16px;
	border-left: 2px solid var(--amd-accent);
	max-width: 50em;
}

.amd-body img {
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}

.amd-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin: 20px 0;
	display: block;
	overflow-x: auto;
}

.amd-body th {
	text-align: left;
	font-weight: 600;
	color: var(--amd-text-2);
	padding: 0 18px 10px 0;
	border-bottom: 1px solid var(--amd-line-2);
	white-space: nowrap;
	font-size: 13.5px;
}

.amd-body td {
	padding: 12px 18px 12px 0;
	border-bottom: 1px solid var(--amd-line);
	vertical-align: top;
	line-height: 1.55;
}

.amd-body td:first-child {
	color: #fff;
	font-weight: 600;
}

/* ------------------------------------------------------------------ */
/* Table of contents                                                   */
/* ------------------------------------------------------------------ */

.amd-toc {
	position: sticky;
	top: var(--amd-sticky);
	max-height: calc(100vh - var(--amd-sticky) - 20px);
	overflow-y: auto;
	padding: 0 0 40px;
}

.amd-toc__title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 12.5px;
	font-weight: 700;
	color: var(--amd-text-2);
	margin: 0 0 14px;
	padding-left: 14px;
}

.amd-toc__title svg {
	width: 14px;
	height: 14px;
	opacity: 0.7;
}

.amd-toc__list {
	list-style: none;
	margin: 0;
	padding: 0;
	border-left: 1px solid var(--amd-line);
}

.amd-toc__list a {
	display: block;
	padding: 6px 12px;
	margin-left: -1px;
	border-left: 2px solid transparent;
	color: var(--amd-muted);
	font-size: 13.5px;
	line-height: 1.5;
	transition: color 0.18s var(--amd-ease), border-color 0.18s var(--amd-ease);
}

.amd-toc__list a:hover {
	color: var(--amd-text-2);
}

.amd-toc__list a.is-active {
	color: #fff;
	font-weight: 600;
	border-left-color: var(--amd-accent);
}

.amd-toc__list .amd-toc--h3 a {
	padding-left: 24px;
	font-size: 13px;
}

.amd-toc-mobile {
	display: none;
	margin: 0 0 30px;
	border: 1px solid var(--amd-line);
	border-radius: 18px;
	background: var(--amd-panel);
	overflow: hidden;
}

.amd-toc-mobile summary {
	list-style: none;
	cursor: pointer;
	padding: 14px 18px;
	font-size: 14.5px;
	font-weight: 600;
	color: #fff;
	display: flex;
	align-items: center;
	gap: 10px;
}

.amd-toc-mobile summary::-webkit-details-marker {
	display: none;
}

.amd-toc-mobile summary svg {
	width: 15px;
	height: 15px;
}

.amd-toc-mobile__chev {
	margin-left: auto;
	transition: transform 0.2s var(--amd-ease);
}

.amd-toc-mobile[open] .amd-toc-mobile__chev {
	transform: rotate(180deg);
}

.amd-toc-mobile ol {
	list-style: none;
	margin: 0;
	padding: 0 12px 14px;
}

.amd-toc-mobile ol a {
	display: block;
	padding: 8px 12px;
	border-radius: 9px;
	color: var(--amd-text-2);
	font-size: 14px;
}

/* ------------------------------------------------------------------ */
/* Pager                                                               */
/* ------------------------------------------------------------------ */

.amd-pager {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 44px;
	padding-top: 20px;
	border-top: 1px solid var(--amd-line);
}

.amd-pager a {
	display: flex;
	flex-direction: column;
	gap: 3px;
	color: #fff;
}

.amd-pager a:hover b {
	color: #5fb0ee;
}

.amd-pager small {
	font-size: 12.5px;
	color: var(--amd-muted);
}

.amd-pager b {
	font-size: 15.5px;
	font-weight: 600;
}

.amd-pager__next {
	text-align: right;
}

/* ------------------------------------------------------------------ */
/* Index / listings (shortcodes + category page)                       */
/* ------------------------------------------------------------------ */

.amd-index {
	color: var(--amd-text-2);
	font-size: 16.5px;
	line-height: 1.62;
}

.amd-index a {
	text-decoration: none;
}

.amd-index--cols-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 40px;
}

.amd-index--cols-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px;
}

.amd-index--cols-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 40px;
}

.amd-index__group {
	margin-bottom: 8px;
}

.amd-index .amd-index__title {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
	margin: 0 0 8px;
}

.amd-index .amd-index__title a {
	color: #fff;
}

.amd-index__desc {
	margin: 0 0 12px;
	font-size: 14.5px;
	color: var(--amd-muted);
}

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

.amd-index__list li {
	border-top: 1px solid var(--amd-line);
}

.amd-index__list a {
	display: block;
	padding: 11px 0;
	color: var(--amd-text-2);
	transition: color 0.18s var(--amd-ease);
}

.amd-index__list a:hover {
	color: #fff;
}

.amd-index__name {
	display: block;
	font-size: 15px;
	font-weight: 600;
	color: #fff;
}

.amd-index__lede {
	display: block;
	margin-top: 3px;
	font-size: 14px;
	color: var(--amd-muted);
	line-height: 1.5;
}

.amd-cards {
	display: grid;
	gap: 16px;
	margin: 0 0 34px;
}

.amd-cards--cols-2 {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.amd-cards--cols-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.amd-cards--cols-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

.amd-card {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	border: 1px solid var(--amd-line);
	border-radius: 14px;
	background: var(--amd-panel);
	transition: border-color 0.2s var(--amd-ease), transform 0.25s var(--amd-ease);
}

.amd-card:hover {
	border-color: rgba(12, 128, 212, 0.45);
	transform: translateY(-3px);
}

.amd-index .amd-card h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
}

.amd-card p {
	margin: 0;
	font-size: 14.5px;
	color: var(--amd-muted);
	line-height: 1.5;
}

.amd-card__count {
	margin-top: auto;
	padding-top: 8px;
	font-size: 12.5px;
	color: var(--amd-muted);
}

.amd-empty {
	color: var(--amd-muted);
	font-size: 15px;
}

/* ------------------------------------------------------------------ */
/* Mobile nav                                                          */
/* ------------------------------------------------------------------ */

.amd-navtoggle {
	display: none;
	align-items: center;
	gap: 9px;
	height: 40px;
	margin: 20px 0 0;
	padding: 0 14px;
	background: transparent;
	border: 1px solid var(--amd-line-2);
	border-radius: 10px;
	color: #fff;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

.amd-navtoggle svg {
	width: 17px;
	height: 17px;
}

.amd-backdrop {
	position: fixed;
	inset: 0;
	background: rgba(2, 2, 10, 0.6);
	z-index: 70;
	display: none;
}

.amd-backdrop.is-open {
	display: block;
}

/* ------------------------------------------------------------------ */
/* Responsive                                                          */
/* ------------------------------------------------------------------ */

@media (max-width: 1400px) {
	.amd-shell {
		gap: 44px;
		padding: 0 40px;
	}

	.amd-tabsbar__inner {
		padding: 0 40px;
	}
}

@media (max-width: 1200px) {
	.amd-shell,
	.amd-shell--no-sidebar {
		grid-template-columns: var(--amd-sidebar-w) minmax(0, 1fr);
	}

	.amd-shell--no-sidebar {
		grid-template-columns: minmax(0, 1fr);
	}

	.amd-toc {
		display: none;
	}

	.amd-toc-mobile {
		display: block;
	}
}

@media (max-width: 900px) {
	:root {
		--amd-gap-top: 28px;
	}

	.amd-shell {
		grid-template-columns: minmax(0, 1fr) !important;
		padding: 0 24px;
		gap: 0;
	}

	.amd-tabsbar__inner {
		padding: 0 24px;
	}

	.amd-navtoggle {
		display: inline-flex;
	}

	.amd-sidebar {
		position: fixed;
		top: 0;
		left: 0;
		bottom: 0;
		z-index: 80;
		width: 290px;
		max-height: none;
		height: 100%;
		background: var(--amd-bg);
		border-right: 1px solid var(--amd-line);
		padding: 22px 16px 40px;
		transform: translateX(-102%);
		transition: transform 0.3s var(--amd-ease);
	}

	.amd-sidebar.is-open {
		transform: none;
	}

	.amd-content {
		padding-top: 26px;
		max-width: none;
	}

	.amd-index--cols-2,
	.amd-index--cols-3,
	.amd-index--cols-4,
	.amd-cards--cols-2,
	.amd-cards--cols-3,
	.amd-cards--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}

	.amd-pager {
		grid-template-columns: minmax(0, 1fr);
	}

	.amd-pager__next {
		text-align: left;
	}
}

@media (max-width: 640px) {
	.amd-shell .amd-title {
		font-size: 31px;
	}

	.amd-shell .amd-lede {
		font-size: 16.5px;
	}

	.amd-body h2 {
		font-size: 24px;
	}

	.amd-actions {
		margin-left: 0;
		width: 100%;
	}
}

/* ------------------------------------------------------------------ */
/* Reduced motion                                                      */
/* ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.amd-shell *,
	.amd-index * {
		transition-duration: 1ms !important;
	}

	.amd-card:hover {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* Print                                                               */
/* ------------------------------------------------------------------ */

@media print {
	.amd-tabsbar,
	.amd-sidebar,
	.amd-toc,
	.amd-toc-mobile,
	.amd-actions,
	.amd-navtoggle,
	.amd-backdrop,
	.amd-pager {
		display: none !important;
	}

	.amd-shell {
		display: block;
		max-width: none;
		padding: 0;
		background: #fff;
		color: #111;
	}

	.amd-content {
		max-width: none;
		padding: 0;
	}

	.amd-shell .amd-title,
	.amd-body h2,
	.amd-body h3,
	.amd-body h4,
	.amd-body strong {
		color: #000;
	}

	.amd-body,
	.amd-shell .amd-lede {
		color: #1b2740;
	}

	.amd-body a {
		color: #0a5f9e;
	}
}

/* ------------------------------------------------------------------ */
/* Search: clear button, result count, back link                       */
/* ------------------------------------------------------------------ */

.amd-navsearch__clear {
	display: none;
	width: 20px;
	height: 20px;
	flex: none;
	place-items: center;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.08);
	color: var(--amd-text-2);
	cursor: pointer;
	padding: 0;
}

.amd-navsearch__clear.is-on {
	display: grid;
}

.amd-navsearch__clear svg {
	width: 11px;
	height: 11px;
}

.amd-navsearch__empty {
	font-variant-numeric: tabular-nums;
}

.amd-allcats {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0 0 18px 12px;
	font-size: 13px;
	font-weight: 600;
	color: var(--amd-muted);
}

.amd-allcats:hover {
	color: #fff;
}

.amd-allcats svg {
	width: 14px;
	height: 14px;
}

/* ------------------------------------------------------------------ */
/* Defences against theme rules                                        */
/* ------------------------------------------------------------------ */

/**
 * Themes that uppercase every heading and nav link turn "Modules" into
 * "MODULES" and the article title into a shout. Reset it on our own
 * furniture; the article body keeps whatever the author wrote.
 */
.amd-page .amd-tab,
.amd-page .amd-navgroup__title,
.amd-page .amd-navgroup__title a,
.amd-page .amd-navlist a,
.amd-page .amd-allcats,
.amd-page .amd-breadcrumb,
.amd-page .amd-breadcrumb a,
.amd-page .amd-breadcrumb span,
.amd-page .amd-toc__title,
.amd-page .amd-toc__list a,
.amd-page .amd-toc-mobile a,
.amd-page .amd-btn-sm,
.amd-page .amd-meta,
.amd-page .amd-meta__item,
.amd-page .amd-pager b,
.amd-page .amd-pager small,
.amd-page .amd-title,
.amd-page .amd-lede,
.amd-index .amd-index__name,
.amd-index .amd-index__title {
	text-transform: none;
}

/**
 * The pasted article carries its own class names, whose stylesheet is not
 * loaded here — so its colours fall through to whatever the theme sets, which
 * on a dark band is usually unreadable grey. Set a readable floor.
 */
.amd-page .amd-body,
.amd-page .amd-body p,
.amd-page .amd-body li,
.amd-page .amd-body td,
.amd-page .amd-body dd,
.amd-page .amd-body figcaption,
.amd-page .amd-body small {
	color: var(--amd-text-2);
}

.amd-page .amd-body h1,
.amd-page .amd-body h2,
.amd-page .amd-body h3,
.amd-page .amd-body h4,
.amd-page .amd-body h5,
.amd-page .amd-body h6,
.amd-page .amd-body dt,
.amd-page .amd-body strong,
.amd-page .amd-body b {
	color: #fff;
}

.amd-page .amd-body th {
	color: var(--amd-text-2);
}

/* An article pasted with its own light-background panels stays readable. */
.amd-page .amd-body [style*="background:#fff"],
.amd-page .amd-body [style*="background: #fff"],
.amd-page .amd-body [style*="background:#FFF"] {
	color: #132038;
}

/* A percentage gutter that reads well on desktop eats a phone screen. */
@media (max-width: 767px) {
	.amd-shell,
	.amd-tabsbar__inner {
		--amd-side-pad: 20px;
	}
}

/* ------------------------------------------------------------------ */
/* Buttons — themes style every <button> and <a> on the page           */
/* ------------------------------------------------------------------ */

/**
 * Download PDF is an <a>, and the sidebar toggle and search clear are real
 * <button>s — a theme's rules for either land on them, which is where the pink
 * came from. Themes and Elementor kits usually set those with !important, so
 * every visual property is restated the same way, across every state, leaving
 * the theme nothing to fill in. Both element types are listed because the same
 * class is used on both. The .amd-page scope keeps all of it off the rest of
 * the site.
 */
.amd-page a.amd-btn-sm,
.amd-page button.amd-btn-sm,
.amd-page a.amd-btn-sm:link,
.amd-page button.amd-btn-sm:link,
.amd-page a.amd-btn-sm:visited,
.amd-page button.amd-btn-sm:visited,
.amd-page a.amd-btn-sm:hover,
.amd-page button.amd-btn-sm:hover,
.amd-page a.amd-btn-sm:focus,
.amd-page button.amd-btn-sm:focus,
.amd-page a.amd-btn-sm:focus-visible,
.amd-page button.amd-btn-sm:focus-visible,
.amd-page a.amd-btn-sm:active,
.amd-page button.amd-btn-sm:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;
	width: auto !important;
	min-width: 0 !important;
	height: 34px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 13px !important;
	border: 1px solid var(--amd-line) !important;
	border-radius: 10px !important;
	background: rgba(255, 255, 255, 0.04) !important;
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	text-decoration: none !important;
	color: var(--amd-text-2) !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	font-style: normal !important;
	line-height: 1 !important;
	transform: none !important;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease !important;
	cursor: pointer !important;
	outline-offset: 2px;
}

/* Kill any ::before/::after a theme uses to draw its own button fill. */
.amd-page a.amd-btn-sm::before,
.amd-page a.amd-btn-sm::after,
.amd-page button.amd-btn-sm::before,
.amd-page button.amd-btn-sm::after {
	content: none !important;
	display: none !important;
}

.amd-page a.amd-btn-sm:hover,
.amd-page button.amd-btn-sm:hover,
.amd-page a.amd-btn-sm:focus,
.amd-page button.amd-btn-sm:focus,
.amd-page a.amd-btn-sm:focus-visible,
.amd-page button.amd-btn-sm:focus-visible {
	background: rgba(255, 255, 255, 0.09) !important;
	border-color: var(--amd-line-2) !important;
	color: #fff !important;
}

.amd-page a.amd-btn-sm:active,
.amd-page button.amd-btn-sm:active {
	background: rgba(255, 255, 255, 0.13) !important;
}

.amd-page a.amd-btn-sm.is-done,
.amd-page button.amd-btn-sm.is-done,
.amd-page a.amd-btn-sm.is-done:hover,
.amd-page button.amd-btn-sm.is-done:hover {
	border-color: rgba(60, 200, 140, 0.55) !important;
	color: #7ef0bd !important;
}

/* Same treatment for the two other buttons the layout renders. */
.amd-page button.amd-navtoggle,
.amd-page button.amd-navtoggle:hover,
.amd-page button.amd-navtoggle:focus,
.amd-page button.amd-navtoggle:active {
	background-image: none !important;
	box-shadow: none !important;
	filter: none !important;
	text-shadow: none !important;
	text-transform: none !important;
	letter-spacing: normal !important;
	font-family: inherit !important;
	font-size: 13.5px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
	transform: none !important;
}

.amd-page button.amd-navtoggle::before,
.amd-page button.amd-navtoggle::after,
.amd-page button.amd-navsearch__clear::before,
.amd-page button.amd-navsearch__clear::after {
	content: none !important;
	display: none !important;
}

.amd-page button.amd-navsearch__clear,
.amd-page button.amd-navsearch__clear:hover,
.amd-page button.amd-navsearch__clear:focus,
.amd-page button.amd-navsearch__clear:active {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 22px !important;
	height: 22px !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: rgba(255, 255, 255, 0.08) !important;
	background-image: none !important;
	box-shadow: none !important;
	text-shadow: none !important;
	color: var(--amd-text-2) !important;
	font-size: 12px !important;
	line-height: 1 !important;
	transform: none !important;
	cursor: pointer !important;
}

.amd-page button.amd-navsearch__clear:hover {
	background: rgba(255, 255, 255, 0.16) !important;
	color: #fff !important;
}

/* ------------------------------------------------------------------ */
/* Category icons                                                      */
/* ------------------------------------------------------------------ */

.amd-page .amd-tab {
	gap: 8px;
}

.amd-page .amd-tab .amd-icon,
.amd-page .amd-navgroup__title .amd-icon {
	width: 1em !important;
	height: 1em !important;
	flex: none !important;
	opacity: 0.85;
}

.amd-page .amd-tab.is-active .amd-icon {
	opacity: 1;
	color: var(--amd-accent);
}

.amd-page .amd-navgroup__title a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
}