/*
 * Record Core front end.
 *
 * Monospace carries the data, the theme's own face carries the prose. The two
 * mark the boundary between what a machine produced and what a human wrote.
 * Added and removed use the diff vocabulary everyone already knows, with a
 * leading glyph so the meaning survives colour blindness and greyscale print.
 */

.mvrc-record,
.mvrc-change-page {
	/*
	 * These components live inside whatever theme the site runs, so they must
	 * inherit from the page rather than from the operating system. Following
	 * prefers-color-scheme here produced a dark card on a light theme with dark
	 * text on it, which is unreadable. Colours are therefore derived from the
	 * theme's own text colour with colour-mix, so the component is legible on a
	 * light theme and on a dark one without knowing which it is in.
	 */
	--mvrc-ink: currentColor;
	--mvrc-soft: color-mix(in srgb, currentColor 62%, transparent);
	--mvrc-faint: color-mix(in srgb, currentColor 38%, transparent);
	--mvrc-rule: color-mix(in srgb, currentColor 16%, transparent);
	--mvrc-surface: color-mix(in srgb, currentColor 4%, transparent);
	--mvrc-add: #1f6b38;
	--mvrc-add-bg: color-mix(in srgb, #1f6b38 12%, transparent);
	--mvrc-del: #96262a;
	--mvrc-del-bg: color-mix(in srgb, #96262a 12%, transparent);
	--mvrc-warn: #7d5300;
	--mvrc-warn-bg: color-mix(in srgb, #7d5300 12%, transparent);
	--mvrc-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

	max-width: 78ch;
	margin-inline: auto;
	padding-inline: 1.25rem;
}

/* On a dark page the semantic colours need lifting to stay legible. */
@supports (color: color-mix(in srgb, white 50%, transparent)) {
	.mvrc-record,
	.mvrc-change-page {
		--mvrc-add: color-mix(in srgb, #2e8b4f 70%, currentColor);
		--mvrc-del: color-mix(in srgb, #b5383c 70%, currentColor);
		--mvrc-warn: color-mix(in srgb, #9a6a10 70%, currentColor);
	}
}



.mvrc-record__register {
	font-family: var(--mvrc-mono);
	font-size: .75rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mvrc-soft);
	margin: 0 0 .4rem;
}

.mvrc-record__head h1 { margin: 0 0 .75rem; text-wrap: balance; }

.mvrc-status {
	font-family: var(--mvrc-mono);
	font-size: .9rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1rem;
	align-items: baseline;
	margin: 0 0 1rem;
}

.mvrc-status__word { font-weight: 700; text-transform: uppercase; letter-spacing: .06em; }
.mvrc-status--removed .mvrc-status__word { color: var(--mvrc-del); }
.mvrc-status--listed .mvrc-status__word { color: var(--mvrc-add); }
.mvrc-status__streak,
.mvrc-status__changes { color: var(--mvrc-soft); }

.mvrc-stale {
	background: var(--mvrc-warn-bg);
	border-left: 3px solid var(--mvrc-warn);
	color: var(--mvrc-ink);
	padding: .75rem 1rem;
	margin: 1rem 0;
	font-size: .95rem;
}

.mvrc-section { margin: 2.5rem 0; }
.mvrc-section > h2 { font-size: 1.25rem; margin: 0 0 1rem; }

/* Changes and diffs */

.mvrc-change {
	border: 1px solid var(--mvrc-rule);
	border-left: 3px solid var(--mvrc-rule);
	background: var(--mvrc-surface);
	padding: 1rem 1.15rem;
	margin: 0 0 1rem;
}

.mvrc-change--removed { border-left-color: var(--mvrc-del); }
.mvrc-change--added { border-left-color: var(--mvrc-add); }
.mvrc-change--modified { border-left-color: var(--mvrc-warn); }
.mvrc-change--relisted { border-left-color: var(--mvrc-add); }

.mvrc-change__head {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .75rem;
	align-items: center;
	font-family: var(--mvrc-mono);
	font-size: .8rem;
	margin-bottom: .5rem;
}

.mvrc-change__id { text-decoration: none; color: var(--mvrc-soft); }
.mvrc-change__summary { margin: 0 0 .75rem; font-weight: 600; }

.mvrc-kind {
	font-family: var(--mvrc-mono);
	font-size: .7rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	border: 1px solid currentColor;
	border-radius: 2px;
	padding: .1rem .4rem;
}

.mvrc-kind--added { color: var(--mvrc-add); }
.mvrc-kind--removed { color: var(--mvrc-del); }
.mvrc-kind--modified { color: var(--mvrc-warn); }
.mvrc-kind--relisted { color: var(--mvrc-add); }

.mvrc-silent {
	font-family: var(--mvrc-mono);
	font-size: .7rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mvrc-warn);
}

.mvrc-diff__field { margin: 0 0 1rem; }
.mvrc-diff__field:last-child { margin-bottom: 0; }

.mvrc-diff__name {
	font-family: var(--mvrc-mono);
	font-size: .75rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--mvrc-soft);
	margin: 0 0 .35rem;
}

.mvrc-diff__line {
	font-family: var(--mvrc-mono);
	font-size: .85rem;
	line-height: 1.5;
	margin: 0;
	padding: .3rem .5rem;
	overflow-wrap: anywhere;
}

.mvrc-diff__line--del { background: var(--mvrc-del-bg); color: var(--mvrc-del); }
.mvrc-diff__line--ins { background: var(--mvrc-add-bg); color: var(--mvrc-add); }
.mvrc-diff__glyph { font-weight: 700; display: inline-block; width: 1ch; }
.mvrc-diff__empty { opacity: .7; font-style: italic; }

.mvrc-diff__text {
	font-size: .95rem;
	line-height: 1.6;
	margin: 0;
}

.mvrc-diff__del { background: var(--mvrc-del-bg); color: var(--mvrc-del); text-decoration: line-through; }
.mvrc-diff__ins { background: var(--mvrc-add-bg); color: var(--mvrc-add); text-decoration: none; }

/* Fields */

.mvrc-fields {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	gap: .1rem 1.25rem;
	margin: 0;
}

.mvrc-fields dt {
	font-family: var(--mvrc-mono);
	font-size: .75rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mvrc-soft);
	padding: .5rem 0;
	border-top: 1px solid var(--mvrc-rule);
}

.mvrc-fields dd {
	margin: 0;
	padding: .5rem 0;
	border-top: 1px solid var(--mvrc-rule);
	overflow-wrap: anywhere;
}

@media (max-width: 640px) {
	.mvrc-fields { grid-template-columns: 1fr; }
	.mvrc-fields dd { border-top: 0; padding-top: 0; }
}

.mvrc-hash,
.mvrc-mono {
	font-family: var(--mvrc-mono);
	font-size: .78rem;
	color: var(--mvrc-soft);
	overflow-wrap: anywhere;
}

/* Versions and timeline */

.mvrc-versions,
.mvrc-timeline__list,
.mvrc-feed {
	list-style: none;
	margin: 0;
	padding: 0;
}

.mvrc-versions li,
.mvrc-timeline__item,
.mvrc-feed__item {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .9rem;
	align-items: baseline;
	padding: .55rem 0;
	border-bottom: 1px solid var(--mvrc-rule);
}

.mvrc-timeline__date,
.mvrc-feed__date {
	font-family: var(--mvrc-mono);
	font-size: .78rem;
	color: var(--mvrc-soft);
	min-width: 8.5em;
	font-variant-numeric: tabular-nums;
}

.mvrc-feed__title { font-weight: 600; }
.mvrc-feed__summary { color: var(--mvrc-soft); text-decoration: none; }
.mvrc-feed__summary:hover { text-decoration: underline; }

.mvrc-feed__fields {
	font-family: var(--mvrc-mono);
	font-size: .72rem;
	color: var(--mvrc-soft);
}

.mvrc-vanish {
	font-family: var(--mvrc-mono);
	font-size: .82rem;
	background: var(--mvrc-warn-bg);
	color: var(--mvrc-warn);
	padding: .5rem .75rem;
	margin: .75rem 0;
	border-left: 3px solid currentColor;
}

.mvrc-vanish--past { background: var(--mvrc-add-bg); color: var(--mvrc-add); }

/* Scrubber */

.mvrc-scrubber { margin: 1.5rem 0; }

.mvrc-scrubber__bar {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem;
	align-items: center;
	border: 1px solid var(--mvrc-rule);
	background: var(--mvrc-surface);
	padding: .75rem 1rem;
}

.mvrc-scrubber__label {
	font-family: var(--mvrc-mono);
	font-size: .78rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--mvrc-soft);
}

.mvrc-scrubber__input { font-family: var(--mvrc-mono); padding: .35rem .5rem; }
.mvrc-scrubber__note { font-size: .85rem; color: var(--mvrc-soft); margin: .5rem 0 0; }
.mvrc-asof { margin-top: 1.25rem; }
.mvrc-asof__head { font-size: 1.05rem; margin: 0 0 .75rem; }

/* Receipt */

.mvrc-receipt {
	border: 1px solid var(--mvrc-rule);
	background: var(--mvrc-surface);
	padding: 1.25rem 1.4rem;
	margin: 2.5rem 0;
}

.mvrc-receipt h2,
.mvrc-receipt__head {
	font-family: var(--mvrc-mono);
	font-size: .8rem;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--mvrc-soft);
	margin: 0 0 .9rem;
}

.mvrc-receipt__list {
	display: grid;
	grid-template-columns: minmax(140px, 240px) 1fr;
	gap: .1rem 1.25rem;
	margin: 0 0 1rem;
}

.mvrc-receipt__list dt {
	font-family: var(--mvrc-mono);
	font-size: .74rem;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--mvrc-soft);
	padding: .4rem 0;
}

.mvrc-receipt__list dd {
	margin: 0;
	padding: .4rem 0;
	font-family: var(--mvrc-mono);
	font-size: .8rem;
	overflow-wrap: anywhere;
}

@media (max-width: 640px) {
	.mvrc-receipt__list { grid-template-columns: 1fr; }
	.mvrc-receipt__list dd { padding-top: 0; }
}

.mvrc-receipt__verify,
.mvrc-receipt__disclaimer,
.mvrc-citation {
	font-size: .85rem;
	color: var(--mvrc-soft);
	margin: .5rem 0 0;
}

.mvrc-citation { font-family: var(--mvrc-mono); overflow-wrap: anywhere; }

/* Embeds */

.mvrc-embed textarea {
	width: 100%;
	font-family: var(--mvrc-mono);
	font-size: .78rem;
	padding: .6rem;
	border: 1px solid var(--mvrc-rule);
	background: var(--mvrc-surface);
	color: var(--mvrc-ink);
}

.mvrc-embed__note,
.mvrc-embed__sub { font-size: .85rem; color: var(--mvrc-soft); margin: .3rem 0 .5rem; }

.mvrc-empty { color: var(--mvrc-soft); font-style: italic; }

.mvrc-placeholder {
	border: 1px dashed #bbb;
	padding: 1rem;
	color: #777;
	font-size: .9rem;
	text-align: center;
}