/*
 * eID Design Guide. Inherits theme fonts and colours.
 * Override the custom properties below from the theme's additional CSS.
 */
.eid-dg {
	--eid-dg-accent: currentColor;
	--eid-dg-border: rgba(0, 0, 0, 0.2);
	--eid-dg-surface: rgba(0, 0, 0, 0.04);
	--eid-dg-muted: rgba(0, 0, 0, 0.65);
	--eid-dg-radius: 6px;
	--eid-dg-gap: 1rem;
	margin-block: 1.5rem;
	position: relative;
}

@supports (color: color-mix(in srgb, red, blue)) {
	.eid-dg {
		--eid-dg-border: color-mix(in srgb, currentColor 22%, transparent);
		--eid-dg-surface: color-mix(in srgb, currentColor 5%, transparent);
		--eid-dg-muted: color-mix(in srgb, currentColor 68%, transparent);
	}
}

.eid-dg__sr {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.eid-dg__empty {
	border: 1px dashed var(--eid-dg-border);
	padding: 1rem;
}

/* Tabs (added by JS when there is more than one section). */
.eid-dg .eid-dg__tabs {
	border-bottom: 1px solid var(--eid-dg-border);
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	margin-bottom: 1.5rem;
}

.eid-dg .eid-dg__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	border-radius: 0;
	box-shadow: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	letter-spacing: normal;
	margin: 0 0 -1px;
	padding: 0.6rem 1rem;
	text-transform: none;
}

.eid-dg .eid-dg__tab:hover {
	background: var(--eid-dg-surface);
	color: inherit;
}

.eid-dg .eid-dg__tab[aria-selected="true"] {
	border-bottom-color: var(--eid-dg-accent);
	font-weight: 600;
}

.eid-dg .eid-dg__tab:focus-visible,
.eid-dg .eid-dg__copy:focus-visible,
.eid-dg__table-wrap:focus-visible,
.eid-dg__guide > summary:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.eid-dg--tabs .eid-dg__heading {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	white-space: nowrap;
	width: 1px;
}

.eid-dg__panel[hidden] {
	display: none;
}

.eid-dg__intro {
	margin-bottom: 1.25rem;
}

/* Colours. */
.eid-dg__swatches {
	display: grid;
	gap: var(--eid-dg-gap);
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	list-style: none;
	margin: 0 0 2rem;
	padding: 0;
}

.eid-dg__swatch {
	align-items: center;
	border: 1px solid var(--eid-dg-border);
	border-radius: var(--eid-dg-radius);
	display: flex;
	gap: 0.75rem;
	margin: 0;
	padding: 0.6rem;
}

.eid-dg__chip {
	border: 1px solid var(--eid-dg-border);
	border-radius: var(--eid-dg-radius);
	flex: 0 0 3rem;
	height: 3rem;
}

.eid-dg__swatch-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.eid-dg .eid-dg__copy {
	appearance: none;
	background: var(--eid-dg-surface);
	border: 1px solid var(--eid-dg-border);
	border-radius: 4px;
	box-shadow: none;
	color: inherit;
	cursor: copy;
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85em;
	letter-spacing: normal;
	padding: 0.05rem 0.4rem;
	text-align: left;
	text-transform: none;
	width: fit-content;
}

.eid-dg .eid-dg__copy:hover {
	background: var(--eid-dg-surface);
	color: inherit;
}

.eid-dg__rgb,
.eid-dg__usage {
	color: var(--eid-dg-muted);
	font-size: 0.85em;
}

/* Contrast matrix. */
.eid-dg__subheading {
	margin: 1.5rem 0 0.5rem;
}

.eid-dg__legend {
	color: var(--eid-dg-muted);
	display: flex;
	flex-wrap: wrap;
	font-size: 0.85em;
	gap: 0.25rem 1.25rem;
	list-style: none;
	margin: 0 0 0.75rem;
	padding: 0;
}

.eid-dg__table-wrap {
	overflow-x: auto;
	position: relative;
}

.eid-dg__matrix,
.eid-dg__table {
	border-collapse: collapse;
	font-size: 0.85em;
	width: 100%;
}

.eid-dg__matrix th,
.eid-dg__matrix td,
.eid-dg__table th,
.eid-dg__table td {
	border: 1px solid var(--eid-dg-border);
	padding: 0.4rem 0.6rem;
	text-align: left;
	vertical-align: top;
}

.eid-dg__matrix thead th,
.eid-dg__table thead th {
	background: var(--eid-dg-surface);
}

.eid-dg__matrix tbody th {
	white-space: nowrap;
}

.eid-dg__corner {
	background: var(--eid-dg-surface);
	font-weight: 600;
}

.eid-dg__dot {
	border: 1px solid var(--eid-dg-border);
	border-radius: 50%;
	display: inline-block;
	height: 0.8em;
	vertical-align: -0.05em;
	width: 0.8em;
}

.eid-dg__cell {
	white-space: nowrap;
}

.eid-dg__sample {
	border: 1px solid var(--eid-dg-border);
	border-radius: 3px;
	display: inline-block;
	font-weight: 600;
	line-height: 1;
	margin-right: 0.3rem;
	padding: 0.2rem 0.35rem;
}

.eid-dg__ratio {
	font-variant-numeric: tabular-nums;
}

.eid-dg__rating {
	color: var(--eid-dg-muted);
	margin-left: 0.2rem;
}

.eid-dg__cell--fail .eid-dg__rating {
	font-weight: 600;
}

.eid-dg__same {
	background: var(--eid-dg-surface);
}

/* Cards: typography and page types. */
.eid-dg__cards {
	display: grid;
	gap: var(--eid-dg-gap);
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

.eid-dg__card {
	border: 1px solid var(--eid-dg-border);
	border-radius: var(--eid-dg-radius);
	padding: 1rem;
}

.eid-dg__card-title {
	font-size: 1rem;
	margin: 0 0 0.5rem;
}

.eid-dg__font-sample {
	margin: 0 0 0.75rem;
	overflow-wrap: anywhere;
}

.eid-dg__specs {
	color: var(--eid-dg-muted);
	font-size: 0.85em;
	margin: 0;
}

.eid-dg__specs > div {
	display: flex;
	gap: 0.5rem;
}

.eid-dg__specs dt {
	flex: 0 0 8.5em;
	font-weight: 600;
}

.eid-dg__specs dd {
	margin: 0;
}

/* Guides. */
.eid-dg__group {
	margin-bottom: 1.5rem;
}

.eid-dg__group-title {
	margin: 0 0 0.5rem;
}

.eid-dg__guide {
	border: 1px solid var(--eid-dg-border);
	border-radius: var(--eid-dg-radius);
	margin-bottom: 0.5rem;
}

.eid-dg__guide > summary {
	cursor: pointer;
	font-weight: 600;
	padding: 0.75rem 1rem;
}

.eid-dg__guide-body {
	padding: 0 1rem 1rem;
}

.eid-dg__embed iframe,
.eid-dg__embed video {
	aspect-ratio: 16 / 9;
	border: 0;
	display: block;
	height: auto;
	max-width: 100%;
	width: 100%;
}

.eid-dg__guide-link {
	font-size: 0.85em;
	margin: 0.5rem 0 0;
}

@media (max-width: 600px) {
	.eid-dg .eid-dg__tab {
		padding: 0.5rem 0.7rem;
	}
}