/*!
 * DesignKit for Advanced Slides — structural styles
 * Component layout only. Colors/typography come from the active theme
 * through the --dk-* variables (every one has a fallback, so the
 * components also look reasonable on the stock reveal themes).
 */

.reveal {
	--dk-accent: var(--r-link-color, #42affa);
	--dk-accent-2: var(--r-link-color-hover, #8dcffc);
	--dk-muted: rgba(128, 128, 128, 0.9);
	--dk-card-bg: rgba(128, 128, 128, 0.13);
	--dk-card-color: inherit;
	--dk-border: rgba(128, 128, 128, 0.35);
	--dk-radius: 14px;
	--dk-display-font: var(--r-heading-font);
	--dk-mono-font: var(--r-code-font, monospace);
	--dk-grid-min: 7.2em;
}

/* ------------------------------------------------ chrome shell */

.reveal .dk-chrome {
	position: absolute;
	inset: 0;
	pointer-events: none;
	z-index: 30;
}

.reveal .dk-decor,
.reveal .dk-tabs,
.reveal .dk-pageno,
.reveal .dk-secnum {
	display: none;
}

.reveal section.clean .dk-chrome {
	display: none;
}

/* base looks used once a theme switches a piece on */

.reveal .dk-pageno {
	position: absolute;
	right: 1.1em;
	bottom: 0.9em;
	align-items: baseline;
	gap: 0.35em;
	font-family: var(--dk-mono-font);
	font-size: 0.38em;
	letter-spacing: 0.14em;
	color: var(--dk-muted);
}

.reveal .dk-pageno .dk-page-total::before {
	content: "/ ";
	opacity: 0.6;
}

.reveal .dk-tabs {
	position: absolute;
	top: 1em;
	right: 1.2em;
	gap: 1.4em;
	font-size: 0.34em;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--dk-muted);
}

.reveal .dk-tab.dk-active {
	color: var(--dk-accent);
}

.reveal .dk-secnum {
	position: absolute;
	top: 0.45em;
	left: 0.55em;
	font-family: var(--dk-display-font);
	font-size: 2.6em;
	font-weight: 800;
	line-height: 1;
	opacity: 0.9;
	color: var(--dk-accent);
}

.reveal .dk-decor {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.reveal .dk-d {
	position: absolute;
	display: block;
	pointer-events: none;
}

/* ------------------------------------------------ kicker + quote */

.reveal .dk-kicker {
	font-size: 0.44em;
	font-weight: 600;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--dk-accent);
	margin-bottom: 0.6em;
}

.reveal section.quote blockquote,
.reveal section.quote .dk-content > p:not(.dk-cite):not(.dk-kicker) {
	font-family: var(--dk-display-font);
	font-size: 1.35em;
	line-height: 1.35;
	font-style: normal;
	background: none;
	box-shadow: none;
	border: none;
	width: 85%;
	margin: 0.3em auto;
}

.reveal .dk-cite {
	font-size: 0.5em !important;
	font-family: var(--r-main-font);
	letter-spacing: 0.08em;
	color: var(--dk-muted);
	margin-top: 1.2em;
}

/* ------------------------------------------------ stats */

.reveal .dk-stats {
	display: grid;
	gap: 0.55em;
	width: 100%;
	margin: var(--r-block-margin, 20px) 0;
	grid-template-columns: repeat(var(--dk-grid-cols, 3), minmax(0, 1fr));
	text-align: left;
}

.reveal .dk-stats.dk-n1 { --dk-grid-cols: 1; }
.reveal .dk-stats.dk-n2 { --dk-grid-cols: 2; }
.reveal .dk-stats.dk-n4 { --dk-grid-cols: 4; }
.reveal .dk-stats.dk-n5,
.reveal .dk-stats.dk-n6 { --dk-grid-cols: 3; }

.reveal .dk-stat {
	display: flex;
	flex-direction: column;
	gap: 0.18em;
	padding: 0.8em 0.75em;
	background: var(--dk-card-bg);
	color: var(--dk-card-color);
	border-radius: var(--dk-radius);
	min-width: 0;
}

.reveal .dk-stat-value {
	font-family: var(--dk-display-font);
	font-size: 1.55em;
	font-weight: 800;
	line-height: 1.05;
	color: var(--dk-accent);
}

.reveal .dk-stat-label {
	font-size: 0.52em;
	font-weight: 600;
	line-height: 1.3;
}

.reveal .dk-stat-note {
	font-size: 0.4em;
	line-height: 1.35;
	color: var(--dk-muted);
}

/* ------------------------------------------------ cards */

.reveal .dk-cards {
	display: grid;
	gap: 0.55em;
	width: 100%;
	margin: var(--r-block-margin, 20px) 0;
	grid-template-columns: repeat(var(--dk-grid-cols, 3), minmax(0, 1fr));
	text-align: left;
}

.reveal .dk-cards.dk-n1 { --dk-grid-cols: 1; }
.reveal .dk-cards.dk-n2 { --dk-grid-cols: 2; }
.reveal .dk-cards.dk-n4 { --dk-grid-cols: 2; }

.reveal .dk-card {
	display: flex;
	flex-direction: column;
	gap: 0.35em;
	padding: 0.85em 0.8em;
	background: var(--dk-card-bg);
	color: var(--dk-card-color);
	border-radius: var(--dk-radius);
	min-width: 0;
}

.reveal .dk-card-title {
	font-family: var(--dk-display-font);
	font-size: 0.62em;
	font-weight: 700;
	line-height: 1.25;
}

.reveal .dk-card-body p {
	font-size: 0.46em;
	line-height: 1.45;
	margin: 0 0 0.45em 0;
	color: var(--dk-muted);
}

.reveal .dk-card-body p:last-child {
	margin-bottom: 0;
}

/* ------------------------------------------------ steps */

.reveal .dk-steps {
	display: flex;
	flex-direction: column;
	gap: 0.5em;
	width: 100%;
	margin: var(--r-block-margin, 20px) 0;
	text-align: left;
}

.reveal .dk-step {
	display: flex;
	align-items: flex-start;
	gap: 0.6em;
	padding: 0.45em 0.2em;
	border-bottom: 1px solid var(--dk-border);
}

.reveal .dk-step:last-child {
	border-bottom: none;
}

.reveal .dk-step-num {
	font-family: var(--dk-mono-font);
	font-size: 0.75em;
	font-weight: 700;
	line-height: 1.25;
	color: var(--dk-accent);
	flex: 0 0 auto;
}

.reveal .dk-step-title {
	font-family: var(--dk-display-font);
	font-size: 0.62em;
	font-weight: 700;
	line-height: 1.3;
}

.reveal .dk-step-text {
	font-size: 0.46em;
	line-height: 1.45;
	color: var(--dk-muted);
	margin-top: 0.15em;
}

/* horizontal variant — themes set --dk-steps: row */

/* ------------------------------------------------ split */

.reveal .dk-content.dk-split-root {
	flex-direction: row !important;
	align-items: stretch !important;
	justify-content: flex-start !important;
	padding: 0 !important;
	gap: 0;
}

.reveal .dk-split-root .dk-left,
.reveal .dk-split-root .dk-right {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	box-sizing: border-box;
	text-align: left;
}

.reveal .dk-split-root .dk-left {
	flex: 0 0 42%;
	padding: 1.2em 1em 1.2em 1.3em;
}

.reveal .dk-split-root .dk-right {
	flex: 1 1 58%;
	padding: 1.2em 1.3em 1.2em 1em;
}

/* ------------------------------------------------ responsive export shell */

.reveal.dk-compact,
.reveal.dk-narrow {
	font-size: min(var(--r-main-font-size), 34px);
}

.reveal.dk-portrait {
	font-size: min(var(--r-main-font-size), 30px);
}

.reveal.dk-portrait .slides {
	width: 100% !important;
	height: 100% !important;
	inset: 0 !important;
	transform: none !important;
}

.reveal.dk-portrait .slides > section,
.reveal.dk-portrait .slides > section > section,
.reveal.dk-portrait .backgrounds,
.reveal.dk-portrait .slide-background {
	width: 100% !important;
	height: 100% !important;
}

.reveal.dk-portrait .slides > section,
.reveal.dk-portrait .slides > section > section {
	left: 0 !important;
	top: 0 !important;
}

.reveal.dk-compact.reveal h1,
.reveal.dk-narrow.reveal h1 {
	font-size: min(var(--r-heading1-size), 2.1em);
}

.reveal.dk-compact.reveal h2,
.reveal.dk-narrow.reveal h2 {
	font-size: min(var(--r-heading2-size), 1.35em);
}

.reveal.dk-compact.reveal h3,
.reveal.dk-narrow.reveal h3 {
	font-size: min(var(--r-heading3-size), 1em);
}

.reveal.dk-compact.reveal .dk-content,
.reveal.dk-narrow.reveal .dk-content {
	padding: 1.05em 1.15em !important;
	overflow: hidden;
}

.reveal.dk-portrait.reveal .dk-content {
	justify-content: flex-start !important;
	padding: 2.35em 0.95em 1em 0.95em !important;
	width: 100vw !important;
	height: 100vh !important;
	max-width: 100vw !important;
	max-height: 100vh !important;
	box-sizing: border-box;
}

.reveal.dk-portrait.reveal section.title .dk-content,
.reveal.dk-portrait.reveal section.section .dk-content,
.reveal.dk-portrait.reveal section.end .dk-content {
	padding-top: max(2.35em, 8.5vh) !important;
}

.reveal.dk-portrait .dk-chrome {
	position: fixed;
	inset: 0;
}

.reveal.dk-compact .controls,
.reveal.dk-narrow .controls,
.reveal.dk-portrait .controls {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.reveal.dk-compact .progress,
.reveal.dk-narrow .progress,
.reveal.dk-portrait .progress {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
}

.reveal.dk-compact #customcontrols,
.reveal.dk-narrow #customcontrols,
.reveal.dk-portrait #customcontrols {
	display: none !important;
	visibility: hidden !important;
	opacity: 0 !important;
	pointer-events: none !important;
}

.reveal.dk-portrait.reveal h1 {
	font-size: min(var(--r-heading1-size), 1.58em);
	line-height: 1.02;
	overflow-wrap: anywhere;
}

.reveal.dk-portrait.reveal h2 {
	font-size: min(var(--r-heading2-size), 1.1em);
	line-height: 1.08;
	overflow-wrap: anywhere;
}

.reveal.dk-portrait.reveal p {
	font-size: min(0.52em, 16px);
	max-width: 100%;
}

@media (max-width: 420px) {
	.reveal.dk-portrait {
		font-size: min(var(--r-main-font-size), 26px);
	}

	.reveal.dk-portrait.reveal .dk-content {
		padding-left: 0.9em !important;
		padding-right: 0.9em !important;
	}

	.reveal.dk-portrait.reveal h1 {
		font-size: min(var(--r-heading1-size), 1.1em) !important;
		max-width: calc(100vw - 2.2em) !important;
		overflow-wrap: anywhere !important;
		word-break: normal;
	}

	.reveal.dk-portrait.reveal h2 {
		font-size: min(var(--r-heading2-size), 0.95em) !important;
		max-width: calc(100vw - 2.2em) !important;
		overflow-wrap: anywhere !important;
		word-break: normal;
	}

	.reveal.dk-portrait.reveal p,
	.reveal.dk-portrait.reveal li {
		font-size: min(0.5em, 14px) !important;
		max-width: calc(100vw - 2.2em) !important;
		overflow-wrap: anywhere !important;
		word-break: normal;
	}

	.reveal.dk-portrait.reveal pre,
	.reveal.dk-portrait.reveal .code-wrapper {
		max-width: calc(100vw - 2.2em) !important;
	}

	.reveal.dk-portrait.reveal p code,
	.reveal.dk-portrait.reveal li code {
		display: inline !important;
		width: auto !important;
		max-width: 100% !important;
		white-space: normal !important;
		overflow-wrap: anywhere !important;
		word-break: break-word;
	}

	.reveal.dk-portrait.reveal .dk-card,
	.reveal.dk-portrait.reveal .dk-stat {
		max-width: calc(100vw - 2.2em) !important;
	}
}

.reveal.dk-compact.reveal p,
.reveal.dk-narrow.reveal p,
.reveal.dk-compact.reveal li,
.reveal.dk-narrow.reveal li {
	line-height: 1.28;
}

.reveal.dk-compact.reveal .dk-kicker,
.reveal.dk-narrow.reveal .dk-kicker {
	font-size: 0.34em;
	letter-spacing: 0.18em;
	margin-bottom: 0.45em;
}

.reveal.dk-compact.reveal .dk-stats,
.reveal.dk-compact.reveal .dk-cards,
.reveal.dk-narrow.reveal .dk-stats,
.reveal.dk-narrow.reveal .dk-cards {
	gap: 0.4em;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--dk-grid-min)), 1fr));
}

.reveal.dk-portrait.reveal .dk-stats,
.reveal.dk-portrait.reveal .dk-cards {
	--dk-grid-min: 100%;
}

.reveal.dk-compact.reveal .dk-stat,
.reveal.dk-compact.reveal .dk-card,
.reveal.dk-narrow.reveal .dk-stat,
.reveal.dk-narrow.reveal .dk-card {
	border-radius: min(var(--dk-radius), 10px);
	gap: 0.2em;
	padding: 0.55em 0.6em;
}

.reveal.dk-compact.reveal .dk-stat-value,
.reveal.dk-narrow.reveal .dk-stat-value {
	font-size: 1.15em;
}

.reveal.dk-compact.reveal .dk-stat-label,
.reveal.dk-narrow.reveal .dk-stat-label,
.reveal.dk-compact.reveal .dk-card-title,
.reveal.dk-narrow.reveal .dk-card-title,
.reveal.dk-compact.reveal .dk-step-title,
.reveal.dk-narrow.reveal .dk-step-title {
	font-size: 0.48em;
	line-height: 1.2;
}

.reveal.dk-compact.reveal .dk-stat-note,
.reveal.dk-narrow.reveal .dk-stat-note,
.reveal.dk-compact.reveal .dk-card-body p,
.reveal.dk-narrow.reveal .dk-card-body p,
.reveal.dk-compact.reveal .dk-step-text,
.reveal.dk-narrow.reveal .dk-step-text {
	font-size: 0.36em;
	line-height: 1.32;
}

.reveal.dk-compact.reveal .dk-step,
.reveal.dk-narrow.reveal .dk-step {
	gap: 0.45em;
	padding: 0.32em 0.1em;
}

.reveal.dk-compact.reveal .dk-step-num,
.reveal.dk-narrow.reveal .dk-step-num {
	font-size: 0.55em;
}

.reveal.dk-compact.reveal .dk-content.dk-split-root,
.reveal.dk-narrow.reveal .dk-content.dk-split-root {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0.65em;
	padding: 0.9em 1em !important;
}

.reveal.dk-portrait.reveal section.split .dk-content.dk-split-root {
	flex-direction: column !important;
	align-items: stretch !important;
	gap: 0.6em;
	padding: max(4.55em, 12vh) 1.05em 2.2em 1.05em !important;
}

.reveal.dk-compact.reveal .dk-split-root .dk-left,
.reveal.dk-narrow.reveal .dk-split-root .dk-left,
.reveal.dk-compact.reveal .dk-split-root .dk-right,
.reveal.dk-narrow.reveal .dk-split-root .dk-right {
	flex: 0 1 auto;
	padding: 0.65em !important;
	border-right: 0;
	min-height: 0;
}

.reveal.dk-portrait.reveal section.split .dk-split-root .dk-left,
.reveal.dk-portrait.reveal section.split .dk-split-root .dk-right {
	flex: 0 1 auto;
	width: 100%;
	padding: 0 !important;
	border-right: 0;
	min-height: 0;
}

.reveal.dk-compact.reveal section.quote blockquote,
.reveal.dk-narrow.reveal section.quote blockquote,
.reveal.dk-compact.reveal section.quote .dk-content > p:not(.dk-cite):not(.dk-kicker),
.reveal.dk-narrow.reveal section.quote .dk-content > p:not(.dk-cite):not(.dk-kicker) {
	font-size: 0.95em;
	line-height: 1.22;
	width: 100%;
}

.reveal.dk-portrait.reveal section.quote blockquote,
.reveal.dk-portrait.reveal section.quote .dk-content > p:not(.dk-cite):not(.dk-kicker) {
	font-size: 0.82em;
}

.reveal.dk-compact.reveal .dk-tabs,
.reveal.dk-narrow.reveal .dk-tabs {
	gap: 0.6em;
	font-size: 0.26em;
	letter-spacing: 0.08em;
	max-width: calc(100% - 4.5em);
	overflow: hidden;
}

.reveal.dk-compact.reveal .dk-tab,
.reveal.dk-narrow.reveal .dk-tab {
	max-width: 9em;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.reveal.dk-compact.reveal .dk-pageno,
.reveal.dk-narrow.reveal .dk-pageno {
	font-size: 0.28em;
	letter-spacing: 0.08em;
}

.reveal.dk-compact.reveal .dk-secnum,
.reveal.dk-narrow.reveal .dk-secnum {
	font-size: 2.2em !important;
	opacity: 0.55;
}

.reveal.dk-compact.reveal pre,
.reveal.dk-narrow.reveal pre,
.reveal.dk-compact.reveal table,
.reveal.dk-narrow.reveal table {
	width: 100%;
	max-width: 100%;
}

.reveal.dk-compact.reveal pre,
.reveal.dk-narrow.reveal pre {
	font-size: 0.38em;
	max-height: 46vh;
}

.reveal.dk-compact.reveal pre code,
.reveal.dk-narrow.reveal pre code {
	max-height: 46vh;
}

.reveal.dk-compact.reveal table,
.reveal.dk-narrow.reveal table {
	display: block;
	font-size: 0.42em;
	overflow-x: auto;
}
