.item-id{
	font-size: var(--size-s);
	opacity: 0.5;
	font-weight: var(--text-semibold);
	margin: var(--size-s) 0;
	text-transform: uppercase;
}

/* Doc code blocks: surface + Highlight.js tokens (colours from wckd-ui.css design tokens) */
pre.doc-code {
	margin: var(--size-m) 0;
	padding: var(--size-l);
	overflow-x: auto;
	font-size: var(--text-s);
	line-height: 1.75;
	background-color: var(--background-color-dark);
	border: 1px solid var(--line-color);
	border-radius: var(--border-radius);
	box-shadow: var(--shadow);
	color: var(--text-color);
}

pre.doc-code code {
	white-space: pre;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
	background: transparent;
	padding: 0;
	border-radius: 0;
	color: var(--text-color);
}

pre.doc-code code.hljs {
	background: transparent;
}

pre.doc-code .hljs {
	color: var(--text-color);
	background: transparent;
}

pre.doc-code .hljs-comment,
pre.doc-code .hljs-quote {
	color: var(--text-color-secondary);
	font-style: italic;
}

pre.doc-code .hljs-keyword,
pre.doc-code .hljs-selector-tag,
pre.doc-code .hljs-subst {
	color: var(--pink);
	font-style: normal;
}

pre.doc-code .hljs-number,
pre.doc-code .hljs-literal,
pre.doc-code .hljs-variable,
pre.doc-code .hljs-template-variable,
pre.doc-code .hljs-type,
pre.doc-code .hljs-params {
	color: var(--secondary-color);
}

pre.doc-code .hljs-string,
pre.doc-code .hljs-meta .hljs-string,
pre.doc-code .hljs-doctag {
	color: var(--link-color);
}

pre.doc-code .hljs-title,
pre.doc-code .hljs-section,
pre.doc-code .hljs-selector-id {
	color: var(--purple);
	font-weight: var(--text-semibold);
}

pre.doc-code .hljs-selector-class,
pre.doc-code .hljs-selector-attr,
pre.doc-code .hljs-selector-pseudo,
pre.doc-code .hljs-attr,
pre.doc-code .hljs-attribute,
pre.doc-code .hljs-template-tag,
pre.doc-code .hljs-property {
	color: var(--primary-color);
}

pre.doc-code .hljs-tag,
pre.doc-code .hljs-name {
	color: var(--tertiary-color);
}

pre.doc-code .hljs-built_in,
pre.doc-code .hljs-builtin-name {
	color: var(--beige);
}

pre.doc-code .hljs-meta,
pre.doc-code .hljs-meta-keyword {
	color: var(--text-color-secondary);
}

pre.doc-code .hljs-symbol,
pre.doc-code .hljs-bullet,
pre.doc-code .hljs-link {
	color: var(--link-hover-color);
}

pre.doc-code .hljs-deletion {
	color: var(--surface-danger-text);
}

pre.doc-code .hljs-addition {
	color: var(--surface-success-text);
}

pre.doc-code .hljs-emphasis {
	font-style: italic;
	color: var(--text-color-secondary);
}

pre.doc-code .hljs-strong {
	font-weight: var(--text-bold);
	color: var(--text-color-header);
}

pre.doc-code .hljs-formula,
pre.doc-code .hljs-function .hljs-keyword,
pre.doc-code .hljs-regexp {
	color: var(--blue);
}

h2.sticky {
	background-color: var(--background-color);
	padding-top: var(--size-s);
	padding-bottom: var(--size-s);
}

/* Get started — package builder (doc site): list + narrow grid tweaks */
#package-builder > label.column > input[type="checkbox"] {
	flex-shrink: 0;
	margin-top: 0.2em;
}

@media (max-width: 520px) {
	#package-builder.columns.count-2 {
		--count: 1;
	}
}

#package-builder-output .package-builder-file-list,
#package-builder-output .package-builder-addon-list {
	margin: 0.35rem 0 0;
	padding-left: 1.25rem;
	max-width: 100%;
}

#package-builder-output .package-builder-file-list {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

#package-builder-output .package-builder-file-list li {
	white-space: nowrap;
}

#package-builder-output .package-builder-addon-list li {
	overflow-wrap: break-word;
}