/*
 * Drawing & Document Modal — front end.
 *
 * INVARIANTS (verified by tests/check-card-link.js — run before every release):
 *  1. The card link (.dfm-card__link) is pinned to the bottom of the card via
 *     `margin: auto 0 0` and lines up across a row regardless of text length.
 *  2. Card and modal spacing is not affected by theme rules for p / h2 / h3 /
 *     button / input / img (the high-specificity reset below).
 *  3. The card link is left-justified, bold, single-line, with no rule.
 *
 * Every visual value reads a CSS custom property that the plugin settings
 * write into :root. The fallback in each var() is the shipped default, so the
 * stylesheet still renders correctly if a setting is left empty.
 */

/* -------------------------------------------------- Grid */

/*
 * Column counts are driven by data-dfm-columns rather than a custom property:
 * repeat() only accepts a literal integer for its repetition count, so a
 * var()/min() there would silently invalidate the whole declaration.
 */
.dfm-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--dfm-gap, 24px);
	font-family: var(--dfm-font-family, inherit);
}

.dfm-grid[data-dfm-columns="1"] { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.dfm-grid[data-dfm-columns="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dfm-grid[data-dfm-columns="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dfm-grid[data-dfm-columns="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dfm-grid[data-dfm-columns="5"] { grid-template-columns: repeat(5, minmax(0, 1fr)); }

.dfm-grid--single {
	grid-template-columns: minmax(0, 1fr);
	max-width: 420px;
}

/* Tablet: never more than two columns. */
@media (max-width: 1024px) {
	.dfm-grid,
	.dfm-grid[data-dfm-columns="2"],
	.dfm-grid[data-dfm-columns="3"],
	.dfm-grid[data-dfm-columns="4"],
	.dfm-grid[data-dfm-columns="5"] {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dfm-grid[data-dfm-columns="1"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Phone: always one column. */
@media (max-width: 640px) {
	.dfm-grid,
	.dfm-grid[data-dfm-columns="1"],
	.dfm-grid[data-dfm-columns="2"],
	.dfm-grid[data-dfm-columns="3"],
	.dfm-grid[data-dfm-columns="4"],
	.dfm-grid[data-dfm-columns="5"] {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* -------------------------------------------------- Toolbar: search + group filters */

.dfm-collection {
	font-family: var(--dfm-font-family, inherit);
}

.dfm-toolbar {
	display: flex;
	flex-direction: column;
	gap: 18px;
	margin-bottom: 28px;
}

.dfm-toolbar__row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px 24px;
}

.dfm-search {
	flex: 1 1 320px;
	max-width: 440px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.dfm-search__label {
	display: block;
	color: var(--dfm-search-label-color, #5b6472);
	font-size: var(--dfm-search-label-font-size, 12px);
	font-weight: var(--dfm-search-label-font-weight, 700);
	line-height: var(--dfm-search-label-line-height, 1.3);
	letter-spacing: var(--dfm-search-label-letter-spacing, 0.16em);
	text-transform: var(--dfm-search-label-text-transform, uppercase);
	text-decoration-line: var(--dfm-search-label-text-decoration, none);
	text-decoration-style: var(--dfm-search-label-decoration-style, solid);
	text-decoration-thickness: var(--dfm-search-label-decoration-thickness, auto);
	text-decoration-color: var(--dfm-search-label-decoration-color, currentColor);
	text-underline-offset: var(--dfm-search-label-decoration-offset, auto);
}

.dfm-collection .dfm-toolbar .dfm-search__input {
	width: 100%;
	box-sizing: border-box;
	padding: var(--dfm-search-padding, 14px 16px);
	border: 1px solid var(--dfm-search-border, #d7dde6);
	border-radius: var(--dfm-search-radius, 4px);
	background: var(--dfm-search-bg, #f6f8fb);
	color: var(--dfm-search-text-color, #14171f);
	font: inherit;
	font-size: 15px;
	line-height: 1.3;
}

.dfm-search__input::placeholder {
	color: var(--dfm-search-text-color, #14171f);
	opacity: .5;
}

.dfm-collection .dfm-toolbar .dfm-search__input:focus-visible {
	outline: 2px solid var(--dfm-focus-color, #2f5f92);
	outline-offset: 1px;
}

.dfm-count {
	margin: 0;
	color: var(--dfm-count-text-color, #5b6472);
	font-size: var(--dfm-count-text-font-size, 15px);
	font-weight: var(--dfm-count-text-font-weight, 400);
	line-height: var(--dfm-count-text-line-height, 1.4);
	letter-spacing: var(--dfm-count-text-letter-spacing, 0);
	text-transform: var(--dfm-count-text-text-transform, none);
	text-decoration-line: var(--dfm-count-text-text-decoration, none);
	text-decoration-style: var(--dfm-count-text-decoration-style, solid);
	text-decoration-thickness: var(--dfm-count-text-decoration-thickness, auto);
	text-decoration-color: var(--dfm-count-text-decoration-color, currentColor);
	text-underline-offset: var(--dfm-count-text-decoration-offset, auto);
}

.dfm-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.dfm-collection .dfm-toolbar .dfm-filter {
	display: inline-flex;
	align-items: center;
	padding: var(--dfm-filter-btn-padding, 12px 18px);
	border: 1px solid var(--dfm-filter-btn-border, #d7dde6);
	border-radius: var(--dfm-filter-btn-radius, 4px);
	background: var(--dfm-filter-btn-bg, #fff);
	color: var(--dfm-filter-btn-color, #3b4d6b);
	cursor: pointer;
	font-family: inherit;
	font-size: var(--dfm-filter-btn-font-size, 13px);
	font-weight: var(--dfm-filter-btn-font-weight, 700);
	line-height: var(--dfm-filter-btn-line-height, 1.2);
	letter-spacing: var(--dfm-filter-btn-letter-spacing, 0.12em);
	text-transform: var(--dfm-filter-btn-text-transform, uppercase);
	text-decoration-line: var(--dfm-filter-btn-text-decoration, none);
	text-decoration-style: var(--dfm-filter-btn-decoration-style, solid);
	text-decoration-thickness: var(--dfm-filter-btn-decoration-thickness, auto);
	text-decoration-color: var(--dfm-filter-btn-decoration-color, currentColor);
	text-underline-offset: var(--dfm-filter-btn-decoration-offset, auto);
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.dfm-collection .dfm-toolbar .dfm-filter:hover,
.dfm-collection .dfm-toolbar .dfm-filter:focus-visible {
	background: var(--dfm-filter-btn-hover-bg, #f6f8fb);
	border-color: var(--dfm-filter-btn-hover-border, #1d2a44);
	color: var(--dfm-filter-btn-hover-color, #1d2a44);
	text-decoration-line: var(--dfm-filter-btn-hover-decoration, none);
}

.dfm-collection .dfm-toolbar .dfm-filter:focus-visible {
	outline: 2px solid var(--dfm-focus-color, #2f5f92);
	outline-offset: 2px;
}

.dfm-collection .dfm-toolbar .dfm-filter.is-active {
	background: var(--dfm-filter-btn-active-bg, #1d2a44);
	border-color: var(--dfm-filter-btn-active-border, #1d2a44);
	color: var(--dfm-filter-btn-active-color, #fff);
}

.dfm-collection .dfm-toolbar .dfm-filter.is-active:hover,
.dfm-collection .dfm-toolbar .dfm-filter.is-active:focus-visible {
	background: var(--dfm-filter-btn-active-hover-bg, #2f5f92);
	border-color: var(--dfm-filter-btn-active-hover-border, #2f5f92);
	color: var(--dfm-filter-btn-active-hover-color, #fff);
}

.dfm-card[hidden] {
	display: none;
}

.dfm-empty {
	margin: 0;
	padding: 32px 0;
	color: var(--dfm-count-text-color, #5b6472);
	font-size: var(--dfm-count-text-font-size, 15px);
	text-align: center;
}

.dfm-empty[hidden] {
	display: none;
}

/* -------------------------------------------------- Card */

.dfm-card {
	display: flex;
	flex-direction: column;
	background: var(--dfm-card-bg, #fff);
	border: 1px solid var(--dfm-card-border, #dfe4ea);
	border-radius: var(--dfm-card-radius, 4px);
	box-shadow: var(--dfm-card-shadow, none);
	overflow: hidden;
	font-family: var(--dfm-font-family, inherit);
}

.dfm-grid .dfm-card--clickable {
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.dfm-grid .dfm-card:hover,
.dfm-grid .dfm-card:focus-within {
	background: var(--dfm-card-hover-bg, var(--dfm-card-bg, #fff));
	border-color: var(--dfm-card-hover-border, var(--dfm-card-border, #dfe4ea));
}

/* Hovering anywhere on a clickable card lights its link up. */
.dfm-grid .dfm-card--clickable:hover .dfm-card__link {
	color: var(--dfm-card-link-hover-color, #2f5f92);
	text-decoration-line: var(--dfm-card-link-hover-decoration, none);
}

.dfm-grid .dfm-card .dfm-card__media {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	border-bottom: 1px solid var(--dfm-card-divider, #dfe4ea);
	background: var(--dfm-card-media-bg, #fff);
	cursor: pointer;
	position: relative;
	line-height: 0;
	border-radius: 0;
}

.dfm-card__media--static {
	cursor: default;
}

.dfm-card__image {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: var(--dfm-card-image-ratio, 4 / 3);
	object-fit: contain;
	object-position: center;
}

.dfm-card__body {
	/* Fills the card so the link can sit on the bottom edge of every card in a row. */
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 10px;
	padding: var(--dfm-card-padding, 22px);
}

/*
 * Themes commonly style p / h2 / h3 inside the content area with rules such
 * as `.entry-content p { margin-bottom: 1.75em }`, which would outrank a
 * plain class selector and blow the card open. Reset text spacing at a
 * specificity no theme content rule reaches.
 */
.dfm-grid .dfm-card .dfm-card__body > *,
.dfm-grid .dfm-card .dfm-card__body .dfm-card__link,
.dfm-modal .dfm-modal__dialog .dfm-modal__header > *,
.dfm-modal .dfm-modal__dialog .dfm-overview__header > *,
.dfm-modal .dfm-modal__dialog .dfm-specs__label,
.dfm-modal .dfm-modal__dialog .dfm-specs__value,
.dfm-modal .dfm-modal__dialog .dfm-related__heading,
.dfm-modal .dfm-modal__dialog .dfm-modal__fallback,
.dfm-collection .dfm-toolbar .dfm-count,
.dfm-collection .dfm-toolbar .dfm-search__label {
	margin: 0;
	padding: 0;
	max-width: none;
}

.dfm-grid .dfm-card .dfm-card__body .dfm-card__link {
	/* Re-assert after the margin reset above: auto top margin pins the link to
	   the bottom of the card so links line up across a row. */
	margin: auto 0 0;
	padding: var(--dfm-card-link-padding, 6px 0 0);
	background: var(--dfm-card-link-bg, transparent);
	border: var(--dfm-card-link-border-width, 0) solid var(--dfm-card-link-border-color, currentColor);
	border-radius: var(--dfm-card-link-radius, 0);
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	width: auto;
	line-height: var(--dfm-card-link-line-height, 1.3);
}

.dfm-grid .dfm-card .dfm-card__body .dfm-card__link:hover,
.dfm-grid .dfm-card .dfm-card__body .dfm-card__link:focus-visible {
	background: var(--dfm-card-link-hover-bg, var(--dfm-card-link-bg, transparent));
}

/* Images too: themes often add margins, borders or shadows to content images. */
.dfm-grid .dfm-card .dfm-card__image,
.dfm-modal .dfm-modal__dialog .dfm-modal__image,
.dfm-modal .dfm-modal__dialog .dfm-related__thumb {
	display: block;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	max-width: 100%;
}

/* Buttons and inputs get the same treatment: themes style them freely. */
.dfm-grid .dfm-card .dfm-card__media,
.dfm-modal .dfm-modal__dialog .dfm-modal__close,
.dfm-modal .dfm-modal__dialog .dfm-related__item,
.dfm-modal .dfm-modal__dialog .dfm-btn,
.dfm-collection .dfm-toolbar .dfm-filter,
.dfm-collection .dfm-toolbar .dfm-search__input {
	margin: 0;
	box-shadow: none;
	text-shadow: none;
	min-height: 0;
	width: auto;
}

.dfm-grid .dfm-card .dfm-card__media {
	width: 100%;
	padding: 0;
	border-width: 0 0 1px;
	border-radius: 0;
}

.dfm-modal .dfm-modal__dialog .dfm-modal__close {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
}

.dfm-modal .dfm-modal__dialog .dfm-related__item {
	width: 100%;
	padding: 12px 18px 12px 12px;
}

.dfm-modal .dfm-modal__dialog .dfm-btn {
	padding: var(--dfm-btn-padding, 16px 28px);
}

.dfm-modal .dfm-modal__dialog .dfm-btn--cta {
	width: 100%;
}

.dfm-collection .dfm-toolbar .dfm-filter {
	padding: var(--dfm-filter-btn-padding, 12px 18px);
}

.dfm-collection .dfm-toolbar .dfm-search__input {
	width: 100%;
	padding: var(--dfm-search-padding, 14px 16px);
}

.dfm-grid .dfm-card .dfm-card__body .dfm-card__title::before,
.dfm-grid .dfm-card .dfm-card__body .dfm-card__title::after,
.dfm-modal .dfm-modal__dialog .dfm-modal__title::before,
.dfm-modal .dfm-modal__dialog .dfm-modal__title::after {
	content: none;
}

.dfm-card__eyebrow {
	color: var(--dfm-card-eyebrow-color, #4a7fb5);
	font-size: var(--dfm-card-eyebrow-font-size, 13px);
	font-weight: var(--dfm-card-eyebrow-font-weight, 700);
	line-height: var(--dfm-card-eyebrow-line-height, 1.3);
	letter-spacing: var(--dfm-card-eyebrow-letter-spacing, 0.14em);
	text-transform: var(--dfm-card-eyebrow-text-transform, uppercase);
	text-decoration-line: var(--dfm-card-eyebrow-text-decoration, none);
	text-decoration-style: var(--dfm-card-eyebrow-decoration-style, solid);
	text-decoration-thickness: var(--dfm-card-eyebrow-decoration-thickness, auto);
	text-decoration-color: var(--dfm-card-eyebrow-decoration-color, currentColor);
	text-underline-offset: var(--dfm-card-eyebrow-decoration-offset, auto);
}

.dfm-card__title {
	color: var(--dfm-card-title-color, #14171f);
	font-size: var(--dfm-card-title-font-size, 21px);
	font-weight: var(--dfm-card-title-font-weight, 700);
	line-height: var(--dfm-card-title-line-height, 1.25);
	letter-spacing: var(--dfm-card-title-letter-spacing, -0.01em);
	text-transform: var(--dfm-card-title-text-transform, none);
	text-decoration-line: var(--dfm-card-title-text-decoration, none);
	text-decoration-style: var(--dfm-card-title-decoration-style, solid);
	text-decoration-thickness: var(--dfm-card-title-decoration-thickness, auto);
	text-decoration-color: var(--dfm-card-title-decoration-color, currentColor);
	text-underline-offset: var(--dfm-card-title-decoration-offset, auto);
}

.dfm-card__subtitle {
	color: var(--dfm-card-subtitle-color, #5b6472);
	font-size: var(--dfm-card-subtitle-font-size, 15px);
	font-weight: var(--dfm-card-subtitle-font-weight, 400);
	line-height: var(--dfm-card-subtitle-line-height, 1.4);
	letter-spacing: var(--dfm-card-subtitle-letter-spacing, 0);
	text-transform: var(--dfm-card-subtitle-text-transform, none);
	text-decoration-line: var(--dfm-card-subtitle-text-decoration, none);
	text-decoration-style: var(--dfm-card-subtitle-decoration-style, solid);
	text-decoration-thickness: var(--dfm-card-subtitle-decoration-thickness, auto);
	text-decoration-color: var(--dfm-card-subtitle-decoration-color, currentColor);
	text-underline-offset: var(--dfm-card-subtitle-decoration-offset, auto);
}

.dfm-card__meta {
	color: var(--dfm-card-meta-color, #7b8494);
	font-size: var(--dfm-card-meta-font-size, 13px);
	font-weight: var(--dfm-card-meta-font-weight, 500);
	line-height: var(--dfm-card-meta-line-height, 1.4);
	letter-spacing: var(--dfm-card-meta-letter-spacing, 0.1em);
	text-transform: var(--dfm-card-meta-text-transform, uppercase);
	text-decoration-line: var(--dfm-card-meta-text-decoration, none);
	text-decoration-style: var(--dfm-card-meta-decoration-style, solid);
	text-decoration-thickness: var(--dfm-card-meta-decoration-thickness, auto);
	text-decoration-color: var(--dfm-card-meta-decoration-color, currentColor);
	text-underline-offset: var(--dfm-card-meta-decoration-offset, auto);
}

.dfm-card__excerpt {
	color: var(--dfm-card-excerpt-color, #5b6472);
	font-size: var(--dfm-card-excerpt-font-size, 15px);
	font-weight: var(--dfm-card-excerpt-font-weight, 400);
	line-height: var(--dfm-card-excerpt-line-height, 1.55);
	letter-spacing: var(--dfm-card-excerpt-letter-spacing, 0);
	text-transform: var(--dfm-card-excerpt-text-transform, none);
	text-decoration-line: var(--dfm-card-excerpt-text-decoration, none);
	text-decoration-style: var(--dfm-card-excerpt-decoration-style, solid);
	text-decoration-thickness: var(--dfm-card-excerpt-decoration-thickness, auto);
	text-decoration-color: var(--dfm-card-excerpt-decoration-color, currentColor);
	text-underline-offset: var(--dfm-card-excerpt-decoration-offset, auto);
}

.dfm-grid .dfm-card .dfm-card__link {
	display: inline-flex;
	align-items: center;
	justify-content: flex-start;
	gap: 12px;
	/* Pushed to the bottom: cards in a row line their links up regardless of text length. */
	margin-top: auto;
	padding: 6px 0 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	white-space: nowrap;
	color: var(--dfm-card-link-color, #4a7fb5);
	font-family: inherit;
	font-size: var(--dfm-card-link-font-size, 14px);
	font-weight: var(--dfm-card-link-font-weight, 700);
	line-height: var(--dfm-card-link-line-height, 1.3);
	letter-spacing: var(--dfm-card-link-letter-spacing, 0.12em);
	text-transform: var(--dfm-card-link-text-transform, uppercase);
	text-decoration-line: var(--dfm-card-link-text-decoration, none);
	text-decoration-style: var(--dfm-card-link-decoration-style, solid);
	text-decoration-thickness: var(--dfm-card-link-decoration-thickness, auto);
	text-decoration-color: var(--dfm-card-link-decoration-color, currentColor);
	text-underline-offset: var(--dfm-card-link-decoration-offset, auto);
	transition: color .15s ease;
}

.dfm-grid .dfm-card .dfm-card__link:hover,
.dfm-grid .dfm-card .dfm-card__link:focus-visible {
	color: var(--dfm-card-link-hover-color, #2f5f92);
	text-decoration-line: var(--dfm-card-link-hover-decoration, none);
}

.dfm-card__rule {
	display: block;
	height: 1px;
	background: currentColor;
	/* Give the label priority: the rule shrinks before the text wraps. */
	flex: 0 1 42px;
	min-width: 10px;
}

/* -------------------------------------------------- Modal */

.dfm-modal[hidden] {
	display: none;
}

.dfm-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	font-family: var(--dfm-font-family, inherit);
}

.dfm-modal__backdrop {
	position: absolute;
	inset: 0;
	background: var(--dfm-overlay, rgba(11, 18, 32, .72));
	cursor: pointer;
}

.dfm-modal__dialog {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: var(--dfm-modal-max-width, 1040px);
	max-height: calc(100vh - 48px);
	background: var(--dfm-modal-bg, #fff);
	border-radius: var(--dfm-modal-radius, 4px);
	box-shadow: 0 24px 64px rgba(11, 18, 32, .35);
	overflow: hidden;
}

.dfm-modal__header {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: var(--dfm-modal-padding, 28px);
	padding-right: calc(var(--dfm-modal-padding, 28px) + 40px);
	background: var(--dfm-modal-header-bg, #f2f6fb);
	border-bottom: 1px solid var(--dfm-modal-header-border, #dbe4ef);
}


.dfm-modal .dfm-modal__dialog .dfm-modal__close {
	position: absolute;
	top: 14px;
	right: 14px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	color: var(--dfm-modal-close-color, #1d2430);
	cursor: pointer;
	transition: background .15s ease;
}

.dfm-modal .dfm-modal__dialog .dfm-modal__close:hover,
.dfm-modal .dfm-modal__dialog .dfm-modal__close:focus-visible {
	background: rgba(0, 0, 0, .07);
}

.dfm-modal__eyebrow {
	color: var(--dfm-modal-eyebrow-color, #4a7fb5);
	font-size: var(--dfm-modal-eyebrow-font-size, 13px);
	font-weight: var(--dfm-modal-eyebrow-font-weight, 700);
	line-height: var(--dfm-modal-eyebrow-line-height, 1.3);
	letter-spacing: var(--dfm-modal-eyebrow-letter-spacing, 0.14em);
	text-transform: var(--dfm-modal-eyebrow-text-transform, uppercase);
	text-decoration-line: var(--dfm-modal-eyebrow-text-decoration, none);
	text-decoration-style: var(--dfm-modal-eyebrow-decoration-style, solid);
	text-decoration-thickness: var(--dfm-modal-eyebrow-decoration-thickness, auto);
	text-decoration-color: var(--dfm-modal-eyebrow-decoration-color, currentColor);
	text-underline-offset: var(--dfm-modal-eyebrow-decoration-offset, auto);
}

.dfm-modal__title {
	color: var(--dfm-modal-title-color, #14171f);
	font-size: var(--dfm-modal-title-font-size, 28px);
	font-weight: var(--dfm-modal-title-font-weight, 700);
	line-height: var(--dfm-modal-title-line-height, 1.2);
	letter-spacing: var(--dfm-modal-title-letter-spacing, -0.015em);
	text-transform: var(--dfm-modal-title-text-transform, none);
	text-decoration-line: var(--dfm-modal-title-text-decoration, none);
	text-decoration-style: var(--dfm-modal-title-decoration-style, solid);
	text-decoration-thickness: var(--dfm-modal-title-decoration-thickness, auto);
	text-decoration-color: var(--dfm-modal-title-decoration-color, currentColor);
	text-underline-offset: var(--dfm-modal-title-decoration-offset, auto);
}

.dfm-modal__desc {
	color: var(--dfm-modal-desc-color, #5b6472);
	font-size: var(--dfm-modal-desc-font-size, 16px);
	font-weight: var(--dfm-modal-desc-font-weight, 400);
	line-height: var(--dfm-modal-desc-line-height, 1.5);
	letter-spacing: var(--dfm-modal-desc-letter-spacing, 0);
	text-transform: var(--dfm-modal-desc-text-transform, none);
	text-decoration-line: var(--dfm-modal-desc-text-decoration, none);
	text-decoration-style: var(--dfm-modal-desc-decoration-style, solid);
	text-decoration-thickness: var(--dfm-modal-desc-decoration-thickness, auto);
	text-decoration-color: var(--dfm-modal-desc-decoration-color, currentColor);
	text-underline-offset: var(--dfm-modal-desc-decoration-offset, auto);
}

/* -------------------------------------------------- Viewer */

.dfm-modal__viewer {
	flex: 1 1 auto;
	min-height: 240px;
	height: var(--dfm-modal-viewer-height, 58vh);
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dfm-modal-viewer-bg, #2b2b2b);
	overflow: auto;
}

.dfm-modal__frame {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.dfm-modal__image {
	display: block;
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	margin: auto;
}

.dfm-modal__fallback {
	margin: 0;
	padding: 24px;
	color: #fff;
	text-align: center;
}

.dfm-modal__fallback a {
	color: inherit;
}

/* -------------------------------------------------- Footer + buttons */

.dfm-modal__footer {
	flex: none;
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	padding: var(--dfm-modal-padding, 28px);
	background: var(--dfm-modal-footer-bg, #f2f6fb);
	border-top: 1px solid var(--dfm-modal-footer-border, #dbe4ef);
}

.dfm-modal .dfm-modal__dialog .dfm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--dfm-btn-padding, 16px 28px);
	border-style: solid;
	border-width: var(--dfm-btn-border-width, 2px);
	border-radius: var(--dfm-btn-radius, 2px);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.dfm-modal .dfm-modal__dialog .dfm-btn--primary {
	background: var(--dfm-btn-primary-bg, #5b8cc4);
	border-color: var(--dfm-btn-primary-border, #5b8cc4);
	color: var(--dfm-btn-primary-color, #fff);
	font-size: var(--dfm-btn-primary-font-size, 14px);
	font-weight: var(--dfm-btn-primary-font-weight, 700);
	line-height: var(--dfm-btn-primary-line-height, 1.2);
	letter-spacing: var(--dfm-btn-primary-letter-spacing, 0.12em);
	text-transform: var(--dfm-btn-primary-text-transform, uppercase);
	text-decoration-line: var(--dfm-btn-primary-text-decoration, none);
	text-decoration-style: var(--dfm-btn-primary-decoration-style, solid);
	text-decoration-thickness: var(--dfm-btn-primary-decoration-thickness, auto);
	text-decoration-color: var(--dfm-btn-primary-decoration-color, currentColor);
	text-underline-offset: var(--dfm-btn-primary-decoration-offset, auto);
}

.dfm-modal .dfm-modal__dialog .dfm-btn--primary:hover,
.dfm-modal .dfm-modal__dialog .dfm-btn--primary:focus-visible {
	background: var(--dfm-btn-primary-bg-hover, #4a7fb5);
	color: var(--dfm-btn-primary-hover-color, #fff);
	text-decoration-line: var(--dfm-btn-primary-hover-decoration, none);
}

.dfm-modal .dfm-modal__dialog .dfm-btn--secondary {
	background: var(--dfm-btn-secondary-bg, #fff);
	border-color: var(--dfm-btn-secondary-border, #14171f);
	color: var(--dfm-btn-secondary-color, #14171f);
	font-size: var(--dfm-btn-secondary-font-size, 14px);
	font-weight: var(--dfm-btn-secondary-font-weight, 700);
	line-height: var(--dfm-btn-secondary-line-height, 1.2);
	letter-spacing: var(--dfm-btn-secondary-letter-spacing, 0.12em);
	text-transform: var(--dfm-btn-secondary-text-transform, uppercase);
	text-decoration-line: var(--dfm-btn-secondary-text-decoration, none);
	text-decoration-style: var(--dfm-btn-secondary-decoration-style, solid);
	text-decoration-thickness: var(--dfm-btn-secondary-decoration-thickness, auto);
	text-decoration-color: var(--dfm-btn-secondary-decoration-color, currentColor);
	text-underline-offset: var(--dfm-btn-secondary-decoration-offset, auto);
}

.dfm-modal .dfm-modal__dialog .dfm-btn--secondary:hover,
.dfm-modal .dfm-modal__dialog .dfm-btn--secondary:focus-visible {
	background: var(--dfm-btn-secondary-bg-hover, #f2f6fb);
	color: var(--dfm-btn-secondary-hover-color, #14171f);
	text-decoration-line: var(--dfm-btn-secondary-hover-decoration, none);
}

/* -------------------------------------------------- Focus + utilities */

.dfm-card__media:focus-visible,
.dfm-card__link:focus-visible,
.dfm-modal__close:focus-visible,
.dfm-btn:focus-visible {
	outline: 2px solid var(--dfm-focus-color, #2f5f92);
	outline-offset: 2px;
}

.dfm-modal .screen-reader-text,
.dfm-card .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.dfm-scroll-locked {
	overflow: hidden !important;
}

@media (max-width: 640px) {
	.dfm-modal {
		padding: 0;
	}

	.dfm-modal__dialog {
		max-height: 100vh;
		height: 100%;
		border-radius: 0;
	}

	.dfm-modal__footer .dfm-btn {
		flex: 1 1 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dfm-btn,
	.dfm-card__link,
	.dfm-modal__close {
		transition: none;
	}
}

/* -------------------------------------------------- Overview modal */

.dfm-modal__dialog--overview {
	max-width: var(--dfm-overview-max-width, 680px);
	background: var(--dfm-overview-bg, #f2f6fb);
	overflow: auto;
}

.dfm-overview {
	padding: var(--dfm-modal-padding, 28px);
	padding-top: calc(var(--dfm-modal-padding, 28px) + 12px);
}

.dfm-overview__header {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding-right: 40px;
	margin-bottom: 26px;
}


.dfm-specs {
	margin: 0 0 28px;
	border-top: 1px solid var(--dfm-spec-border, #dbe4ef);
}

.dfm-specs__row {
	display: grid;
	grid-template-columns: minmax(120px, 34%) minmax(0, 1fr);
	gap: 16px;
	padding: 18px 0;
	border-bottom: 1px solid var(--dfm-spec-border, #dbe4ef);
}

.dfm-specs__label,
.dfm-specs__value {
	margin: 0;
}

.dfm-specs__label {
	color: var(--dfm-spec-label-color, #5b6472);
	font-size: var(--dfm-spec-label-font-size, 12px);
	font-weight: var(--dfm-spec-label-font-weight, 700);
	line-height: var(--dfm-spec-label-line-height, 1.4);
	letter-spacing: var(--dfm-spec-label-letter-spacing, 0.16em);
	text-transform: var(--dfm-spec-label-text-transform, uppercase);
	text-decoration-line: var(--dfm-spec-label-text-decoration, none);
	text-decoration-style: var(--dfm-spec-label-decoration-style, solid);
	text-decoration-color: var(--dfm-spec-label-decoration-color, currentColor);
}

.dfm-specs__value {
	color: var(--dfm-spec-value-color, #14171f);
	font-size: var(--dfm-spec-value-font-size, 16px);
	font-weight: var(--dfm-spec-value-font-weight, 400);
	line-height: var(--dfm-spec-value-line-height, 1.4);
	letter-spacing: var(--dfm-spec-value-letter-spacing, 0);
	text-transform: var(--dfm-spec-value-text-transform, none);
	text-decoration-line: var(--dfm-spec-value-text-decoration, none);
	text-decoration-style: var(--dfm-spec-value-decoration-style, solid);
	text-decoration-color: var(--dfm-spec-value-decoration-color, currentColor);
}

.dfm-related {
	padding-top: 22px;
	border-top: 1px solid var(--dfm-spec-border, #dbe4ef);
}

.dfm-specs + .dfm-related {
	border-top: 0;
	padding-top: 0;
}

.dfm-related__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 14px;
}

.dfm-related__heading {
	margin: 0;
	color: var(--dfm-related-heading-color, #5b6472);
	font-size: var(--dfm-related-heading-font-size, 12px);
	font-weight: var(--dfm-related-heading-font-weight, 700);
	line-height: var(--dfm-related-heading-line-height, 1.4);
	letter-spacing: var(--dfm-related-heading-letter-spacing, 0.16em);
	text-transform: var(--dfm-related-heading-text-transform, uppercase);
	text-decoration-line: var(--dfm-related-heading-text-decoration, none);
	text-decoration-color: var(--dfm-related-heading-decoration-color, currentColor);
}

.dfm-modal .dfm-modal__dialog .dfm-related__all {
	color: var(--dfm-all-link-color, #4a7fb5);
	font-size: var(--dfm-all-link-font-size, 13px);
	font-weight: var(--dfm-all-link-font-weight, 700);
	line-height: var(--dfm-all-link-line-height, 1.3);
	letter-spacing: var(--dfm-all-link-letter-spacing, 0.12em);
	text-transform: var(--dfm-all-link-text-transform, uppercase);
	text-decoration-line: var(--dfm-all-link-text-decoration, none);
	text-decoration-style: var(--dfm-all-link-decoration-style, solid);
	text-decoration-thickness: var(--dfm-all-link-decoration-thickness, auto);
	text-decoration-color: var(--dfm-all-link-decoration-color, currentColor);
	text-underline-offset: var(--dfm-all-link-decoration-offset, auto);
	white-space: nowrap;
}

.dfm-modal .dfm-modal__dialog .dfm-related__all:hover,
.dfm-modal .dfm-modal__dialog .dfm-related__all:focus-visible {
	color: var(--dfm-all-link-hover-color, #2f5f92);
	text-decoration-line: var(--dfm-all-link-hover-decoration, underline);
}

.dfm-related__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.dfm-related__li {
	margin: 0;
}

.dfm-modal .dfm-modal__dialog .dfm-related__item {
	display: flex;
	align-items: center;
	gap: 18px;
	width: 100%;
	padding: 12px 18px 12px 12px;
	border: 1px solid var(--dfm-related-item-border, #dbe4ef);
	border-radius: var(--dfm-card-radius, 4px);
	background: var(--dfm-related-item-bg, #fff);
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

div.dfm-related__item {
	cursor: default;
}

.dfm-modal .dfm-modal__dialog button.dfm-related__item:hover,
.dfm-modal .dfm-modal__dialog button.dfm-related__item:focus-visible {
	border-color: var(--dfm-related-item-hover-border, #2f5f92);
	box-shadow: inset 0 0 0 1px var(--dfm-related-item-hover-border, #2f5f92);
}

button.dfm-related__item:focus-visible {
	outline: 2px solid var(--dfm-focus-color, #2f5f92);
	outline-offset: 2px;
}

.dfm-related__media {
	flex: none;
	width: 120px;
	line-height: 0;
	border: 1px solid var(--dfm-related-item-border, #dbe4ef);
	background: #fff;
}

.dfm-related__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 3;
	object-fit: contain;
}

.dfm-related__text {
	display: flex;
	flex-direction: column;
	gap: 4px;
	min-width: 0;
}

.dfm-related__title {
	color: var(--dfm-related-title-color, #14171f);
	font-size: var(--dfm-related-title-font-size, 16px);
	font-weight: var(--dfm-related-title-font-weight, 700);
	line-height: var(--dfm-related-title-line-height, 1.3);
	letter-spacing: var(--dfm-related-title-letter-spacing, 0);
	text-transform: var(--dfm-related-title-text-transform, none);
	text-decoration-line: var(--dfm-related-title-text-decoration, none);
	text-decoration-color: var(--dfm-related-title-decoration-color, currentColor);
}

.dfm-related__meta {
	color: var(--dfm-related-meta-color, #7b8494);
	font-size: var(--dfm-related-meta-font-size, 12px);
	font-weight: var(--dfm-related-meta-font-weight, 500);
	line-height: var(--dfm-related-meta-line-height, 1.4);
	letter-spacing: var(--dfm-related-meta-letter-spacing, 0.14em);
	text-transform: var(--dfm-related-meta-text-transform, uppercase);
	text-decoration-line: var(--dfm-related-meta-text-decoration, none);
	text-decoration-color: var(--dfm-related-meta-decoration-color, currentColor);
}

.dfm-overview__footer {
	margin-top: 28px;
}

.dfm-modal .dfm-modal__dialog .dfm-btn--cta {
	width: 100%;
	background: var(--dfm-btn-cta-bg, #5b8cc4);
	border-color: var(--dfm-btn-cta-border, #5b8cc4);
	color: var(--dfm-btn-cta-color, #fff);
	font-size: var(--dfm-btn-cta-font-size, 15px);
	font-weight: var(--dfm-btn-cta-font-weight, 700);
	line-height: var(--dfm-btn-cta-line-height, 1.2);
	letter-spacing: var(--dfm-btn-cta-letter-spacing, 0.14em);
	text-transform: var(--dfm-btn-cta-text-transform, uppercase);
	text-decoration-line: var(--dfm-btn-cta-text-decoration, none);
	text-decoration-style: var(--dfm-btn-cta-decoration-style, solid);
	text-decoration-color: var(--dfm-btn-cta-decoration-color, currentColor);
}

.dfm-modal .dfm-modal__dialog .dfm-btn--cta:hover,
.dfm-modal .dfm-modal__dialog .dfm-btn--cta:focus-visible {
	background: var(--dfm-btn-cta-bg-hover, #4a7fb5);
	color: var(--dfm-btn-cta-hover-color, #fff);
	text-decoration-line: var(--dfm-btn-cta-hover-decoration, none);
}

@media (max-width: 640px) {
	.dfm-specs__row {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
		padding: 12px 0;
	}

	.dfm-related__media {
		width: 88px;
	}
}