/* --- Default / Light Theme --- */
.markdown-preview {
	--table-border: #ccc;
	--table-header-bg: #f5f5f5;
	--code-bg: #0d1117;
	/* dark code block, even in light theme */
	--code-color: #f0f6fc;
	/* light text on dark code block */
	line-height: 1.5;
	/* Single knob for overall text size: headings (em), inline code (%) and
       code blocks (em) are all relative to this, so bump it to scale everything
       uniformly. */
	font-size: 16px;
}

/* --- Dark Theme --- */
:where(.dark-mode *) .markdown-preview {
	--table-border: #2b3138;
	--table-header-bg: #161b22;
	/* Lift code blocks off the dark canvas (they're #0d1117 in light theme). */
	--code-bg: #161b22;
	/* The actual visible flip: dark canvas + light body text. Without these the
       toggle only changed accents and looked like it did nothing. */
	background-color: #0d1117;
	color: #e6edf3;
}

/* --- Text Spacing --- */
.markdown-preview p {
	margin: 16px 0;
}

.markdown-preview a {
	color: #279ae2;
}

/* --- Headings --- */
.markdown-preview h1 {
	font-size: 2em;
	font-weight: 700;
}

.markdown-preview h2 {
	font-size: 1.5em;
	font-weight: 700;
}

.markdown-preview h3 {
	font-size: 1.17em;
	font-weight: 700;
}

.markdown-preview h4 {
	font-size: 1em;
	font-weight: 700;
}

.markdown-preview h5 {
	font-size: 0.83em;
	font-weight: 700;
}

.markdown-preview h6 {
	font-size: 0.67em;
	font-weight: 700;
}

.markdown-preview h1,
.markdown-preview h2,
.markdown-preview h3,
.markdown-preview h4,
.markdown-preview h5,
.markdown-preview h6 {
	margin: 40px 0 16px 0;
	padding: 0;
}

.markdown-preview ul,
.markdown-preview ol {
	padding-left: 2em;
	margin: 0 0 16px 0;
}

.markdown-preview ul {
	list-style: disc;
}

.markdown-preview ol {
	list-style: decimal;
}

/* nested lists get distinct markers, GitHub-style */
.markdown-preview ul ul {
	list-style: circle;
}

.markdown-preview ul ul ul {
	list-style: square;
}

.markdown-preview li {
	display: list-item;
}

/* keep nested lists tight rather than double-spaced */
.markdown-preview li > ul,
.markdown-preview li > ol {
	margin: 0;
}

.markdown-preview blockquote {
	padding: 0 1em;
	margin: 0 0 16px 0;
	border-left: 0.25em solid #dfe2e5;
	color: #6a737d;
}

/* --- Callouts (note, tip, important, warning, caution, info) ---
   Severity tiers: blue (note, FYI) → amber (info, heads-up) → red (warning, danger).
   Background is a faint tint derived from each callout's accent color. */
.markdown-preview .markdown-alert {
	padding: 8px 16px;
	margin: 0 0 16px 0;
	border-left: 0.25em solid var(--alert-accent, #888);
	border-radius: 6px;
	background-color: color-mix(
		in srgb,
		var(--alert-accent, #888) 10%,
		transparent
	);
	color: inherit;
}

.markdown-preview .markdown-alert > :first-child {
	margin-top: 0;
}

.markdown-preview .markdown-alert > :last-child {
	margin-bottom: 0;
}

.markdown-preview .markdown-alert-title {
	display: flex;
	align-items: center;
	line-height: 1;
	font-weight: 600;
	margin: 0 0 8px 0;
	color: var(--alert-accent, #888);
}

.markdown-preview .markdown-alert-title .octicon {
	margin-right: 8px;
	fill: currentColor;
}

/* Accent colors — light theme */
.markdown-preview .markdown-alert-note {
	--alert-accent: #0969da;
}

/* blue */
.markdown-preview .markdown-alert-info {
	--alert-accent: #9a6700;
}

/* amber */
.markdown-preview .markdown-alert-warning {
	--alert-accent: #cf222e;
}

/* red */
.markdown-preview .markdown-alert-tip {
	--alert-accent: #1a7f37;
}

/* green */
.markdown-preview .markdown-alert-important {
	--alert-accent: #8250df;
}

/* purple */
.markdown-preview .markdown-alert-caution {
	--alert-accent: #cf222e;
}

/* red */
/* --- API key read box ([!APIKEY]) ---
   A plain box holding the postback URL as text — no title, no link, no input.
   Colors ride the table vars, which already flip for dark mode. */
.markdown-preview .api-key-box {
	/* Shrink to the URL width rather than filling the column; cap at the
       container so a very long URL still wraps instead of overflowing. */
	width: fit-content;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0 0 16px 0;
	padding: 8px 12px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	color: inherit;
	background: color-mix(in srgb, #cf222e 10%, transparent);
	border: 1px solid #cf222e;
	border-radius: 6px;
	word-break: break-all;
}

/* Dark theme: brighter red + a touch stronger tint against the dark page. */
:where(.dark-mode *) .markdown-preview .api-key-box {
	background: color-mix(in srgb, #f85149 15%, transparent);
	border-color: #f85149;
}

/* Accent colors — dark theme */
:where(.dark-mode *) .markdown-preview .markdown-alert-note {
	--alert-accent: #4493f8;
}

:where(.dark-mode *) .markdown-preview .markdown-alert-info {
	--alert-accent: #d29922;
}

:where(.dark-mode *) .markdown-preview .markdown-alert-warning {
	--alert-accent: #f85149;
}

:where(.dark-mode *) .markdown-preview .markdown-alert-tip {
	--alert-accent: #3fb950;
}

:where(.dark-mode *) .markdown-preview .markdown-alert-important {
	--alert-accent: #ab7df8;
}

:where(.dark-mode *) .markdown-preview .markdown-alert-caution {
	--alert-accent: #f85149;
}

/* Dark theme: tint a touch stronger so it reads against the dark page */
:where(.dark-mode *) .markdown-preview .markdown-alert {
	background-color: color-mix(
		in srgb,
		var(--alert-accent, #888) 15%,
		transparent
	);
}

/* --- Sections (::: section ... :::) ---
   A container block with a bar running down its left edge: grayish at rest,
   animating to red on hover. */
.markdown-preview .doc-section {
	border-left: 4px solid #d0d7de;
	padding-left: 16px;
	margin: 40px 0;
	transition: border-left-color 0.25s ease-in-out;
}

.markdown-preview .doc-section:hover {
	border-left-color: #cf222e;
}

/* Trim the leading/trailing child margins so the bar hugs the content. */
.markdown-preview .doc-section > :first-child {
	margin-top: 0;
}

.markdown-preview .doc-section > :last-child {
	margin-bottom: 0;
}

/* Dark theme: dimmer gray at rest, brighter red on hover so both read against
   the dark page. */
:where(.dark-mode *) .markdown-preview .doc-section {
	border-left-color: #484f58;
}

:where(.dark-mode *) .markdown-preview .doc-section:hover {
	border-left-color: #f85149;
}

/* --- Tables --- */
.markdown-preview table {
	border-collapse: collapse;
	display: block;
	width: 100%;
	overflow: auto;
	margin: 0 0 16px 0;
}

.markdown-preview th,
.markdown-preview td {
	border: 1px solid var(--table-border);
	padding: 12px 13px;
	text-align: left;
}

.markdown-preview th {
	background: var(--table-header-bg);
	font-weight: 600;
}

/* --- Code Blocks --- */
.markdown-preview pre {
	background-color: transparent !important;
	margin: 0 0 16px 0;
	border-radius: 6px;
	/* GitHub-style rounded corners */
}

.markdown-preview pre code {
	display: block;
	padding: 16px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	line-height: 1.45;
	white-space: pre;
	/* override inline-code break-spaces; don't wrap blocks */
	background: var(--code-bg);
	color: var(--code-color);
	border-radius: 6px;
	overflow: auto;
}

/* --- Inline Code (GitHub-style, follows page theme) --- */
.markdown-preview code {
	padding: 0.2em 0.4em;
	margin: 0;
	font-size: 85%;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	white-space: break-spaces;
	background-color: rgba(175, 184, 193, 0.2);
	border-radius: 6px;
}

:where(.dark-mode *) .markdown-preview code {
	background-color: rgba(110, 118, 129, 0.4);
}

/* --- Dark Mode Overrides (tables) --- */
:where(.dark-mode *) .markdown-preview th {
	background: var(--table-header-bg);
}

:where(.dark-mode *) .markdown-preview th,
:where(.dark-mode *) .markdown-preview td {
	border-color: var(--table-border);
}

/* ---------------------------------------------------------------------------
   Syntax highlighting — GitHub dark ("prettylights") palette.
   Token classes follow Chroma/Pygments short names. The code block is always
   dark, so a single palette covers both light and dark page themes.
   --------------------------------------------------------------------------- */

/* Comments */
.markdown-preview .c,
.markdown-preview .ch,
.markdown-preview .cm,
.markdown-preview .cp,
.markdown-preview .cpf,
.markdown-preview .c1,
.markdown-preview .cs {
	color: #8b949e;
	font-style: italic;
}

/* Keywords */
.markdown-preview .k,
.markdown-preview .kc,
.markdown-preview .kd,
.markdown-preview .kn,
.markdown-preview .kp,
.markdown-preview .kr,
.markdown-preview .kt,
.markdown-preview .ow {
	color: #ff7b72;
}

/* Functions / entities / classes / decorators */
.markdown-preview .nf,
.markdown-preview .fm,
.markdown-preview .nc,
.markdown-preview .nd,
.markdown-preview .nn {
	color: #d2a8ff;
}

/* Constants, numbers, builtins, attributes */
.markdown-preview .m,
.markdown-preview .mb,
.markdown-preview .mf,
.markdown-preview .mh,
.markdown-preview .mi,
.markdown-preview .mo,
.markdown-preview .il,
.markdown-preview .no,
.markdown-preview .nb,
.markdown-preview .bp,
.markdown-preview .na {
	color: #79c0ff;
}

/* Strings */
.markdown-preview .s,
.markdown-preview .sa,
.markdown-preview .sb,
.markdown-preview .sc,
.markdown-preview .dl,
.markdown-preview .sd,
.markdown-preview .s2,
.markdown-preview .se,
.markdown-preview .sh,
.markdown-preview .si,
.markdown-preview .sx,
.markdown-preview .s1,
.markdown-preview .ss {
	color: #a5d6ff;
}

/* Regex (GitHub renders these green) */
.markdown-preview .sr {
	color: #7ee787;
}

/* HTML/XML tags */
.markdown-preview .nt {
	color: #7ee787;
}

/* Variables */
.markdown-preview .nv,
.markdown-preview .vc,
.markdown-preview .vg,
.markdown-preview .vi {
	color: #ffa657;
}

/* Plain identifiers, operators, punctuation — default body color */
.markdown-preview .n,
.markdown-preview .nx,
.markdown-preview .nl,
.markdown-preview .py,
.markdown-preview .o,
.markdown-preview .p,
.markdown-preview .w {
	color: #c9d1d9;
}

/* Diff / generic output */
.markdown-preview .gd {
	color: #ffdcd7;
	background-color: #67060c;
}

.markdown-preview .gi {
	color: #aff5b4;
	background-color: #033a16;
}

.markdown-preview .gh,
.markdown-preview .gu {
	color: #79c0ff;
	font-weight: 600;
}

.markdown-preview .ge {
	font-style: italic;
}

.markdown-preview .gs {
	font-weight: 600;
}

.markdown-preview .gp {
	color: #8b949e;
}

/* Errors */
.markdown-preview .err {
	color: #f85149;
	background-color: rgba(248, 81, 73, 0.15);
}

/* --- Layout: split view + code tabs --- */
.markdown-preview {
	.split-view {
		display: flex;
		gap: 2rem;
	}

	.split-left {
		width: 66%;
		min-width: 0;
	}

	.split-right {
		width: 33%;
		min-width: 0;
		position: sticky;
		top: 1rem;
		align-self: flex-start;
	}

	@media (max-width: 1024px) {
		.split-view {
			flex-direction: column;
			gap: 1rem;
		}

		.split-left,
		.split-right {
			width: 100%;
		}

		.split-right {
			position: static;
		}
	}

	/* Code tabs */
	.code-tabs {
		border-radius: 6px;
		overflow: hidden;
	}

	.code-tabs-nav {
		display: flex;
		gap: 2px;
		background: #1e1e1e;
		padding: 8px 8px 0;
	}

	.code-tab-btn {
		padding: 6px 14px;
		border: none;
		background: transparent;
		color: #888;
		cursor: pointer;
		border-radius: 4px 4px 0 0;
		font-size: 0.85em;
	}

	.code-tab-btn.active {
		background: #2d2d2d;
		color: #fff;
	}

	.code-tab-btn:hover:not(.active) {
		color: #ccc;
	}

	.code-tab-panel {
		display: none;
	}

	.code-tab-panel.active {
		display: block;
	}

	.code-tab-panel pre,
	.code-tab-panel pre code {
		margin: 0;
		border-radius: 0;
		font-size: 0.9em;
	}

	/* Force tables to fill the panel */
	table {
		max-width: none !important;
		height: auto !important;
	}
}

/* ---------------------------------------------------------------------------
   Docs page chrome — dark theme.
   Scoped to #app (the documentation <section id="app">) so it themes only the
   docs reading area and can NEVER leak onto the shared marketing header/hero/
   footer, which live outside #app. The theme toggle sets .dark-mode on <html>.
   .markdown-preview inside #app is themed by its own rules above.
   --------------------------------------------------------------------------- */
html.dark-mode #app {
	background: #0d1117;
	color: #e6edf3;
}

/* Left navigation sidebar */
html.dark-mode #app .left-column {
	background: #010409;
	border-right: 1px solid #30363d;
}

/* Category nav links (navigation_v2.tpl) */
html.dark-mode #app .pgs-category-link {
	color: #e6edf3;
}

html.dark-mode #app .pgs-category-link:hover {
	color: #f43a3a;
}

html.dark-mode #app .pgs-category-link.active:not(.category-item) {
	color: #f43a3a;
}

html.dark-mode #app .pgs-icon-placeholder {
	color: #8b949e;
}

/* Collapse / single-page-menu toggle button */
html.dark-mode #app .collapse-toggle {
	background: #161b22;
	color: #e6edf3;
	border: 1px solid #30363d;
}

/* ---------------------------------------------------------------------------
   Feedback widget — dark theme.
   The widget's base (light) styles live in feedback-widget.tpl; these are the
   dark overrides. Loaded here so no frontend .tpl edit is needed. The widget
   classes are unique, so these are safe unscoped.
   --------------------------------------------------------------------------- */
html.dark-mode .feedback-widget-container {
	background-color: #161b22;
	border-color: #30363d;
	color: #e6edf3;
}

html.dark-mode .feedback-widget-modal-body {
	background-color: #161b22;
	border: 1px solid #30363d;
	box-shadow: 0 3px 9px rgba(0, 0, 0, 0.6);
}

html.dark-mode .feedback-widget-modal-content,
html.dark-mode .feedback-widget-modal-body h1 {
	color: #e6edf3;
}

html.dark-mode .feedback-widget-email-input,
html.dark-mode .feedback-widget-suggestion-box {
	background-color: #0d1117;
	color: #e6edf3;
	border-color: #30363d;
	/* overrides the light-dark() border */
}

html.dark-mode .feedback-widget-email-input::placeholder,
html.dark-mode .feedback-widget-suggestion-box::placeholder {
	color: #8b949e;
}

/* ---------------------------------------------------------------------------
   Theme toggle — sliding switch. #theme-toggle is the pill track; the knob
   slides and carries the current theme's glyph (sun = light, moon = dark).
   Icons come from {call remixicon} (ri-* font or svg); loaded via remixicon.tpl.
   --------------------------------------------------------------------------- */
.theme-switch {
	position: relative;
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	width: 52px;
	height: 28px;
	padding: 0;
	border: 1px solid #d0d7de;
	border-radius: 9999px;
	background: #eaeef2;
	cursor: pointer;
	transition:
		background-color 0.2s ease,
		border-color 0.2s ease;
}

/* The sliding knob */
.theme-switch-knob {
	position: absolute;
	top: 50%;
	left: 3px;
	transform: translateY(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #ffffff;
	color: #d4a72c;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
	transition:
		transform 0.2s ease,
		background-color 0.2s ease,
		color 0.2s ease;
}

/* Size the glyph whether {call remixicon} emits an <i class="ri-*"> or an svg. */
.theme-switch-knob i,
.theme-switch-knob [class^='ri-'],
.theme-switch-knob svg {
	font-size: 14px;
	width: 14px;
	height: 14px;
	line-height: 1;
}

/* Light: knob left, shows the sun. */
.theme-switch .theme-toggle-moon {
	display: none;
}

.theme-switch .theme-toggle-sun {
	display: inline-flex;
}

/* Dark: darken track, slide knob right, swap to the moon. */
html.dark-mode .theme-switch {
	background: #30363d;
	border-color: #444c56;
}

html.dark-mode .theme-switch-knob {
	transform: translateY(-50%) translateX(24px);
	background: #e6edf3;
	color: #3b4048;
}

html.dark-mode .theme-switch .theme-toggle-sun {
	display: none;
}

html.dark-mode .theme-switch .theme-toggle-moon {
	display: inline-flex;
}