/* DesignBox core — primitives every widget inherits.
   Token names mirror the Infobric Web Design System Figma variables:
   --db-color-text-primary == --web-color-text-primary.
   Never hard-code a color, size or radius here. */

.db {
	--db-local-gap: var(--db-space-5);
	box-sizing: border-box !important;
	color: var(--db-color-text-primary) !important;
	font-family: var(--db-font-sans) !important;
	font-size: var(--db-text-body-sm) !important;
	font-weight: var(--db-weight-regular) !important;
	line-height: var(--db-leading-body) !important;
	letter-spacing: var(--db-tracking-default) !important;
}

.db *,
.db *::before,
.db *::after {
	box-sizing: inherit !important;
}

/* The theme sets font-family on bare `p`/`h1..h6`, which beats inheritance from
   `.db`. :where() keeps specificity at one class so widget Typography controls
   still win. */
.db :where(p, h1, h2, h3, h4, h5, h6, span, a, li, button, input, select, textarea, label, strong, em) {
	font-family: var(--db-font-sans) !important;
}

/* Surfaces --------------------------------------------------------------- */

.db--surface {
	background-color: var(--db-color-background-page) !important;
}

.db--surface-alt {
	background-color: var(--db-color-background-surface) !important;
}

.db--surface-feature {
	background-color: var(--db-color-background-feature) !important;
}

.db--raised {
	background-color: var(--db-color-background-surface) !important;
	border-radius: var(--db-radius-module) !important;
	box-shadow: inset 0 0 0 var(--db-border-width) var(--db-color-border-default) !important;
}

/* Layout ----------------------------------------------------------------- */

.db__container {
	width: 100% !important;
	max-width: var(--db-container) !important;
	margin-inline: auto !important;
	padding-inline: var(--db-gutter) !important;
}

.db__container--narrow {
	max-width: var(--db-container-narrow) !important;
}

@media (min-width: 768px) {
	.db__container { padding-inline: var(--db-gutter-lg) !important; }
}

.db__stack > * + * {
	margin-block-start: var(--db-local-gap) !important;
}

.db__grid {
	display: grid !important;
	gap: var(--db-local-gap) !important;
}

.db__cluster {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	gap: var(--db-space-3) !important;
}

/* Typography roles ------------------------------------------------------- */
/* The role class controls the look, the HTML tag controls the document
   outline. Never pick a tag for its size. */

.db__h1,
.db__h2,
.db__h3,
.db__h4,
.db__h5,
.db__h6 {
	margin: 0 !important;
	color: var(--db-color-text-primary) !important;
	font-family: var(--db-font-sans) !important;
	font-weight: var(--db-weight-black) !important;
	line-height: var(--db-leading-headline) !important;
	letter-spacing: var(--db-tracking-default) !important;
	overflow-wrap: anywhere !important;
}

/* Mobile first: roles step down, then climb back at 768 and 1024. */
.db__h1 { font-size: var(--db-text-h3) !important; }
.db__h2 { font-size: var(--db-text-h4) !important; }
.db__h3 { font-size: var(--db-text-h5) !important; }
.db__h4 { font-size: var(--db-text-h6) !important; }
.db__h5 { font-size: var(--db-text-body) !important; }
.db__h6 { font-size: var(--db-text-body-sm) !important; }

@media (min-width: 768px) {
	.db__h1 { font-size: var(--db-text-h2) !important; }
	.db__h2 { font-size: var(--db-text-h3) !important; }
	.db__h3 { font-size: var(--db-text-h4) !important; }
	.db__h4 { font-size: var(--db-text-h5) !important; }
	.db__h5 { font-size: var(--db-text-h6) !important; }
}

@media (min-width: 1024px) {
	.db__h1 { font-size: var(--db-text-h1) !important; }
	.db__h2 { font-size: var(--db-text-h2) !important; }
	.db__h3 { font-size: var(--db-text-h3) !important; }
	.db__h4 { font-size: var(--db-text-h4) !important; }
	.db__h5 { font-size: var(--db-text-h5) !important; }
	.db__h6 { font-size: var(--db-text-h6) !important; }
}

/* Type roles set size, weight and leading ONLY — never colour. A role is a
   size choice, so `db__body` on a heading must not mute it. Colour comes from
   `.db` (text-primary) or from the widget's own colour control. */
.db__body,
.db__body-sm,
.db__caption {
	margin: 0 !important;
	font-weight: var(--db-weight-regular) !important;
	line-height: var(--db-leading-body) !important;
	overflow-wrap: anywhere !important;
}

.db__body    { font-size: var(--db-text-body-sm) !important; }
.db__body-sm { font-size: var(--db-text-body-sm) !important; }
.db__caption { font-size: var(--db-text-caption) !important; }

/* Subheadline is its own Figma role: semibold, 140% leading. */
.db__subheading {
	margin: 0 !important;
	font-size: var(--db-text-body) !important;
	font-weight: var(--db-weight-semibold) !important;
	line-height: var(--db-leading-ui) !important;
	overflow-wrap: anywhere !important;
}

/* Body primary steps 16 -> 18 at tablet; body small stays 16 everywhere. */
@media (min-width: 768px) {
	.db__body       { font-size: var(--db-text-body) !important; }
	.db__subheading { font-size: var(--db-text-subheading) !important; }
}

/* Inline links ------------------------------------------------------------
   The underline stays visible in every state, so a link is never identified
   by colour alone. */

.db__link,
.db__body a,
.db__body-sm a,
.db__caption a {
	border-radius: var(--db-radius-check) !important;
	color: var(--db-color-link-default) !important;
	text-decoration: underline !important;
	text-decoration-skip-ink: none !important;
	text-underline-position: from-font !important;
	transition: color var(--db-duration) var(--db-ease) !important;
}

.db__link:hover,
.db__body a:hover,
.db__body-sm a:hover,
.db__caption a:hover {
	color: var(--db-color-link-hover) !important;
	text-decoration: underline !important;
}

.db__link:active,
.db__body a:active,
.db__body-sm a:active,
.db__caption a:active {
	color: var(--db-color-link-pressed) !important;
}

/* Editorial and resource content only. */
.db__link--editorial:visited {
	color: var(--db-color-link-visited) !important;
}

.db__link:focus-visible,
.db__body a:focus-visible,
.db__body-sm a:focus-visible,
.db__caption a:focus-visible {
	outline: var(--db-focus-width) solid var(--db-color-link-default) !important;
	outline-offset: 2px !important;
}

.db__link--sm { font-size: var(--db-text-body-sm) !important; }

/* Eyebrow — stroked pill, sentence case. */
.db__eyebrow {
	display: inline-flex !important;
	align-items: center !important;
	margin: 0 !important;
	padding: var(--db-space-1) var(--db-space-4) !important;
	border: var(--db-border-width) solid var(--db-color-eyebrow-neutral) !important;
	border-radius: var(--db-radius-pill) !important;
	color: var(--db-color-eyebrow-neutral) !important;
	font-size: var(--db-text-caption) !important;
	font-weight: var(--db-weight-semibold) !important;
	line-height: var(--db-leading-body) !important;
	overflow-wrap: anywhere !important;
}

.db__eyebrow--filled {
	border-color: transparent !important;
	background-color: var(--db-color-background-tint) !important;
}

/* Alignment -------------------------------------------------------------- */

.db--align-left   { text-align: left !important; }
.db--align-center { text-align: center !important; }
.db--align-right  { text-align: right !important; }
.db--align-center .db__cluster { justify-content: center !important; }
.db--align-right  .db__cluster { justify-content: flex-end !important; }

/* Buttons ---------------------------------------------------------------- */

.db__btn {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: var(--db-space-2) !important;
	min-height: var(--db-control-sm) !important;
	max-width: 100% !important;
	padding: 0 var(--db-space-5) !important;
	border: 0 !important;
	border-radius: var(--db-radius-pill) !important;
	font-family: inherit !important;
	font-size: var(--db-text-button-sm) !important;
	font-weight: var(--db-weight-semibold) !important;
	line-height: var(--db-leading-headline) !important;
	text-align: center !important;
	text-decoration: none !important;
	overflow-wrap: anywhere !important;
	cursor: pointer !important;
	transition: background-color var(--db-duration) var(--db-ease),
	            box-shadow var(--db-duration) var(--db-ease),
	            color var(--db-duration) var(--db-ease) !important;
}

@media (min-width: 768px) {
	.db__btn {
		min-height: var(--db-control-md) !important;
		font-size: var(--db-text-button) !important;
	}
}

.db__btn--primary {
	background-color: var(--db-color-action-primary-background) !important;
	color: var(--db-color-action-primary-content) !important;
}

@media (hover: hover) {
	.db__btn--primary:hover {
		background-color: transparent !important;
		box-shadow: inset 0 0 0 var(--db-border-width) var(--db-color-action-primary-background) !important;
		color: var(--db-color-text-primary) !important;
	}
}

.db__btn--primary:active {
	background-color: var(--db-color-action-primary-background) !important;
	box-shadow: inset 0 0 0 var(--db-border-width) var(--db-color-action-primary-content) !important;
	color: var(--db-color-action-primary-content) !important;
	transition-duration: var(--db-duration-fast) !important;
}

.db__btn--secondary {
	background-color: var(--db-color-action-secondary-background) !important;
	color: var(--db-color-action-secondary-content) !important;
}

@media (hover: hover) {
	.db__btn--secondary:hover {
		background-color: transparent !important;
		box-shadow: inset 0 0 0 var(--db-border-width) var(--db-color-action-secondary-background) !important;
		color: var(--db-color-text-primary) !important;
	}
}

.db__btn--outline {
	background-color: transparent !important;
	box-shadow: inset 0 0 0 var(--db-border-width) var(--db-color-border-strong) !important;
	color: var(--db-color-text-primary) !important;
}

.db__btn--outline:hover {
	box-shadow: inset 0 0 0 var(--db-border-width) var(--db-color-action-primary-background) !important;
	color: var(--db-color-action-primary-background) !important;
}

.db__btn--ghost {
	background-color: transparent !important;
	padding-inline: var(--db-space-2) !important;
	color: var(--db-color-link-default) !important;
}

.db__btn--ghost:hover { color: var(--db-color-link-hover) !important; }

.db__btn[aria-disabled="true"],
.db__btn:disabled {
	background-color: var(--db-color-action-disabled-background) !important;
	box-shadow: none !important;
	color: var(--db-color-action-disabled-content) !important;
	cursor: not-allowed !important;
}

/* Focus — one ring everywhere, orange per the focus spec. */
.db :focus-visible,
.db__btn:focus-visible {
	outline: var(--db-focus-width) solid var(--db-color-focus-ring) !important;
	outline-offset: var(--db-focus-offset) !important;
}

/* Status badges ---------------------------------------------------------- */

.db__badge {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--db-space-1) !important;
	padding: var(--db-space-1) var(--db-space-3) !important;
	border-radius: var(--db-radius-pill) !important;
	background-color: var(--db-color-status-info-soft) !important;
	color: var(--db-color-status-info) !important;
	font-size: var(--db-text-caption) !important;
	font-weight: var(--db-weight-semibold) !important;
}

.db__badge--success { background-color: var(--db-color-status-success-soft) !important; color: var(--db-color-status-success) !important; }
.db__badge--warning { background-color: var(--db-color-status-warning-soft) !important; color: var(--db-color-status-warning) !important; }
.db__badge--error   { background-color: var(--db-color-status-error-soft) !important;   color: var(--db-color-status-error) !important; }

/* Media ------------------------------------------------------------------ */

.db__media img,
.db__media svg,
.db__media video {
	display: block !important;
	max-width: 100% !important;
	height: auto !important;
	border-radius: var(--db-radius-module) !important;
}

.db__divider {
	height: var(--db-border-width) !important;
	margin: 0 !important;
	border: 0 !important;
	background-color: var(--db-color-border-default) !important;
}

/* Theme toggle ----------------------------------------------------------- */

.db-toggle {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--db-space-1) !important;
	padding: var(--db-space-1) !important;
	border: var(--db-border-width) solid var(--db-color-border-default) !important;
	border-radius: var(--db-radius-pill) !important;
	background-color: var(--db-color-background-page) !important;
}

.db-toggle__btn {
	display: inline-flex !important;
	align-items: center !important;
	gap: var(--db-space-2) !important;
	padding: var(--db-space-2) var(--db-space-3) !important;
	border: 0 !important;
	border-radius: var(--db-radius-pill) !important;
	background: transparent !important;
	color: var(--db-color-text-secondary) !important;
	font: inherit !important;
	font-size: var(--db-text-caption) !important;
	line-height: 1 !important;
	cursor: pointer !important;
	transition: background-color var(--db-duration) var(--db-ease), color var(--db-duration) var(--db-ease) !important;
}

.db-toggle__btn:hover { color: var(--db-color-text-primary) !important; }

.db-toggle__btn[aria-pressed="true"] {
	background-color: var(--db-color-background-surface) !important;
	color: var(--db-color-text-primary) !important;
	box-shadow: var(--db-shadow-sm) !important;
}

.db-toggle__btn svg {
	width: 1.125em !important;
	height: 1.125em !important;
	flex: none !important;
}

.db-toggle--icons .db-toggle__label {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Video play button (Figma "Button / Video play", 1950:131) ------------- */

.db__play {
	--db-play-size: 100px;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--db-play-size) !important;
	height: var(--db-play-size) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--db-color-action-secondary-background) !important;
	color: var(--db-color-action-secondary-content) !important;
	cursor: pointer !important;
	transition: transform var(--db-duration) var(--db-ease),
	            background-color var(--db-duration) var(--db-ease) !important;
}

.db__play svg {
	width: 50% !important;
	height: 50% !important;
	display: block !important;
}

@media (hover: hover) {
	.db__play:hover {
		background: var(--db-color-action-primary-background) !important;
		color: var(--db-color-action-primary-content) !important;
		transform: scale(1.06) !important;
	}
}

.db__play:active { transform: scale(.98) !important; }

.db__play:focus-visible {
	outline: var(--db-focus-width) solid var(--db-color-focus-ring) !important;
	outline-offset: var(--db-focus-offset) !important;
}

.db__play--compact { --db-play-size: 64px; }

.db__play[disabled] {
	background: var(--db-color-action-disabled-background) !important;
	color: var(--db-color-action-disabled-content) !important;
	cursor: not-allowed !important;
}

@media (prefers-reduced-motion: reduce) {
	.db__play { transition: none !important; }
}

/* Video play button ------------------------------------------------------
   Figma "Button / Video play" (1950:131): 100px surface, 50px monoline play
   icon, shared semantic secondary action tokens, so it flips with the theme. */

.db__play {
	--db-play-size: 100px;

	position: relative !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: var(--db-play-size) !important;
	height: var(--db-play-size) !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background: var(--db-color-action-secondary-background) !important;
	color: var(--db-color-action-secondary-content) !important;
	cursor: pointer !important;
	transition: transform var(--db-duration) var(--db-ease),
	            background-color var(--db-duration) var(--db-ease),
	            color var(--db-duration) var(--db-ease) !important;
}

.db__play--compact { --db-play-size: 64px; }

.db__play svg {
	width: 50% !important;
	height: 50% !important;
	/* Optical centring: the triangle's visual mass sits left of its box. */
	margin-inline-start: 6% !important;
}

@media (hover: hover) {
	.db__play:hover {
		background: var(--db-color-action-primary-background) !important;
		color: var(--db-color-action-primary-content) !important;
		transform: scale(1.06) !important;
	}
}

.db__play:active {
	transform: scale(.97) !important;
	transition-duration: var(--db-duration-fast) !important;
}

.db__play:focus-visible {
	outline: var(--db-focus-width) solid var(--db-color-focus-ring) !important;
	outline-offset: var(--db-focus-offset) !important;
}

.db__play[aria-disabled="true"] {
	background: var(--db-color-action-disabled-background) !important;
	color: var(--db-color-action-disabled-content) !important;
	cursor: not-allowed !important;
}

@media (prefers-reduced-motion: reduce) {
	.db__play { transition: none !important; }
	.db__play:hover,
	.db__play:active { transform: none !important; }
}

/* Animated single-button switcher ---------------------------------------- */

.db-switch {
	display: inline-flex !important;
	align-items: center !important;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	color: var(--db-color-text-primary) !important;
	cursor: pointer !important;
	line-height: 0 !important;
}

.db-switch__sr {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	white-space: nowrap !important;
}

.db-switch__track {
	position: relative !important;
	display: block !important;
	width: 52px !important;
	height: 28px !important;
	border: var(--db-border-width) solid var(--db-color-border-default) !important;
	border-radius: var(--db-radius-pill) !important;
	background: var(--db-color-background-subtle) !important;
	transition: background-color var(--db-duration-slow) var(--db-ease),
	            border-color var(--db-duration-slow) var(--db-ease) !important;
}

.db-switch__thumb {
	position: absolute !important;
	top: 50% !important;
	inset-inline-start: 2px !important;
	display: grid !important;
	place-items: center !important;
	width: 22px !important;
	height: 22px !important;
	border-radius: 50% !important;
	background: var(--db-color-background-surface) !important;
	color: var(--db-color-text-primary) !important;
	transform: translateY(-50%) !important;
	box-shadow: var(--db-shadow-sm) !important;
	transition: inset-inline-start var(--db-duration-slow) var(--db-ease),
	            background-color var(--db-duration-slow) var(--db-ease) !important;
}

.db-switch__thumb svg {
	grid-area: 1 / 1 !important;
	width: 14px !important;
	height: 14px !important;
	transition: opacity var(--db-duration-slow) var(--db-ease),
	            transform var(--db-duration-slow) var(--db-ease) !important;
}

.db-switch__moon {
	opacity: 0 !important;
	transform: rotate(-70deg) scale(.5) !important;
}

.db-switch__sun {
	opacity: 1 !important;
	transform: rotate(0deg) scale(1) !important;
}

/* Dark state: thumb slides, sun swaps for moon. */
[data-db-theme="dark"] .db-switch__track {
	background: var(--db-color-action-primary-background) !important;
	border-color: var(--db-color-action-primary-background) !important;
}

[data-db-theme="dark"] .db-switch__thumb {
	inset-inline-start: 26px !important;
	background: var(--db-color-navy-1000) !important;
	color: var(--db-color-neutral-white) !important;
}

[data-db-theme="dark"] .db-switch__sun {
	opacity: 0 !important;
	transform: rotate(70deg) scale(.5) !important;
}

[data-db-theme="dark"] .db-switch__moon {
	opacity: 1 !important;
	transform: rotate(0deg) scale(1) !important;
}

.db-switch:focus-visible {
	outline: var(--db-focus-width) solid var(--db-color-focus-ring) !important;
	outline-offset: var(--db-focus-offset) !important;
	border-radius: var(--db-radius-pill) !important;
}

/* Placements */
.db-switch__item {
	display: flex !important;
	align-items: center !important;
}

.db-switch--in-menu { margin-inline-start: var(--db-space-3) !important; }

.db-switch__float {
	position: fixed !important;
	inset-block-end: var(--db-space-5) !important;
	z-index: 9999 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.db-switch__float--right { inset-inline-end: var(--db-space-5) !important; }
.db-switch__float--left  { inset-inline-start: var(--db-space-5) !important; }

.db-switch--mounted { margin-inline-start: var(--db-space-3) !important; }

@media (prefers-reduced-motion: reduce) {
	.db-switch__track,
	.db-switch__thumb,
	.db-switch__thumb svg {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.db *,
	.db *::before,
	.db *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}