/* Bookmark archive drawers, index cards and Stream scraps. */

.cr-bookmark-drawers .pkiw-grouped {
	--cr-bookmark-gap: var(--cr-space-lg);
	--cr-bookmark-columns: 1;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: var(--cr-bookmark-gap);
}

/* The drawer is a two-row grid: the cards stand in the open drawer, and the
   front panel below them carries the label plate and the round pull. The
   front and the pull are the section's own grid pseudo-elements. */
.cr-bookmark-drawers .pkiw-group {
	--cr-bookmark-pull: var(--cr-space-xl);
	position: relative;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	grid-template-rows: auto auto;
	row-gap: var(--cr-space-md);
	flex: 0 0 calc( ( 100% - ( var(--cr-bookmark-columns) - 1 ) * var(--cr-bookmark-gap) ) / var(--cr-bookmark-columns) );
	min-width: 0;
	margin-block: 0;
	padding: var(--cr-space-md) var(--cr-space-md) 0;
	border: 2px solid var(--cr-ink);
	background: var(--cr-prussian-blue);
	box-shadow: var(--cr-shadow-hard);
}

.cr-bookmark-drawers .pkiw-group::after {
	content: "";
	grid-row: 2;
	grid-column: 1;
	z-index: 0;
	margin-inline: calc(-1 * var(--cr-space-md));
	border-block-start: 2px solid var(--cr-ink);
	background: var(--cr-cerulean);
	pointer-events: none;
}

.cr-bookmark-drawers .pkiw-group::before {
	content: "";
	grid-row: 2;
	grid-column: 1;
	z-index: 1;
	align-self: end;
	justify-self: center;
	box-sizing: border-box;
	inline-size: var(--cr-bookmark-pull);
	block-size: var(--cr-bookmark-pull);
	margin-block-end: var(--cr-space-md);
	border: 2px solid var(--cr-ink);
	border-radius: var(--cr-radius-full);
	background: var(--cr-selective-yellow);
	pointer-events: none;
}

.cr-bookmark-drawers .pkiw-group__heading {
	position: relative;
	z-index: 1;
	grid-row: 2;
	grid-column: 1;
	align-self: start;
	justify-self: center;
	box-sizing: border-box;
	inline-size: fit-content;
	min-inline-size: 70%;
	max-inline-size: 100%;
	margin: var(--cr-space-md) 0 calc(var(--cr-bookmark-pull) + 2 * var(--cr-space-md));
	padding: var(--cr-space-xs) var(--cr-space-lg);
	border: 2px solid var(--cr-ink);
	background: var(--cr-printer-ivory);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-size: max( var(--cr-text-lg), var(--cr-text-floor) );
	line-height: var(--cr-leading-tight);
	overflow-wrap: anywhere;
	text-align: center;
}

.cr-bookmark-drawers .pkiw-group__heading::before,
.cr-bookmark-drawers .pkiw-group__heading::after {
	content: "";
	position: absolute;
	inset-block-start: 50%;
	width: var(--cr-space-xs);
	height: var(--cr-space-xs);
	border: 2px solid var(--cr-ink);
	border-radius: var(--cr-radius-full);
	background: var(--cr-cerulean);
	pointer-events: none;
}

.cr-bookmark-drawers .pkiw-group__heading::before {
	inset-inline-start: var(--cr-space-sm);
}

.cr-bookmark-drawers .pkiw-group__heading::after {
	inset-inline-end: var(--cr-space-sm);
}

.cr-bookmark-drawers .pkiw-group__items {
	grid-row: 1;
	grid-column: 1;
	display: grid;
	gap: var(--cr-space-md);
	max-width: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cr-bookmark-drawers .pkiw-group__items > li.wp-block-post {
	min-width: 0;
}

.cr-index-card {
	position: relative;
	box-sizing: border-box;
	padding: var(--cr-space-lg) var(--cr-space-md) var(--cr-space-md) calc(var(--cr-space-xl) + var(--cr-space-sm));
	border: 2px solid var(--cr-russian-violet);
	background-color: var(--cr-printer-ivory);
	background-image:
		linear-gradient(90deg, transparent 0, transparent var(--cr-space-xl), var(--cr-ut-orange) var(--cr-space-xl), var(--cr-ut-orange) calc(var(--cr-space-xl) + var(--cr-space-3xs)), transparent calc(var(--cr-space-xl) + var(--cr-space-3xs))),
		repeating-linear-gradient(180deg, transparent 0, transparent calc(var(--cr-leading-normal) * 1em - var(--cr-space-3xs)), var(--cr-sky-blue) calc(var(--cr-leading-normal) * 1em - var(--cr-space-3xs)), var(--cr-sky-blue) calc(var(--cr-leading-normal) * 1em));
	color: var(--cr-russian-violet);
	overflow-wrap: anywhere;
}

/* Archive cards carry the plugin's .pk-card class, whose badge grid and tint
   don't apply to an index card. Children go static so the title overlay
   covers the whole card. */
.cr-bookmark-drawers .cr-index-card {
	display: block;
	grid-template-columns: none;
	gap: 0;
	max-width: none;
}

.cr-bookmark-drawers .cr-index-card::before {
	content: none;
}

.cr-bookmark-drawers .cr-index-card > * {
	position: static;
}

.cr-index-card__title {
	margin: 0;
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-size: max( var(--cr-text-md), var(--cr-text-floor) );
	line-height: var(--cr-leading-tight);
}

.cr-index-card__title a {
	color: var(--cr-russian-violet);
	text-decoration: none;
}

.cr-index-card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cr-index-card__host,
.cr-bookmark-stream__host {
	margin: var(--cr-space-sm) 0 0;
	font-family: var(--cr-font-mono);
	font-size: max( var(--cr-text-sm), var(--cr-text-floor) );
	overflow-wrap: anywhere;
}

.cr-index-card__label,
.cr-bookmark-stream__label {
	display: flex;
	align-items: center;
	gap: var(--cr-space-xs);
	margin: 0 0 var(--cr-space-sm);
	padding-inline-end: var(--cr-space-3xl);
	font-family: var(--cr-font-mono);
	font-size: max( var(--cr-text-xs), var(--cr-text-floor) );
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-eyebrow);
	line-height: var(--cr-leading-tight);
	text-transform: uppercase;
}

.cr-index-card__glyph,
.cr-bookmark-stream__glyph {
	display: inline-flex;
	width: 1.25rem;
	height: 1.25rem;
}

.cr-index-card__glyph svg,
.cr-bookmark-stream__glyph svg {
	width: 100%;
	height: auto;
}

/* The pulled card: a drawer body behind it (narrower than the card), the
   drawer-label tab tucked behind the card's top edge, and the drawer front
   (wider than the card) covering the card's padded bottom. */
.cr-bookmark-single {
	--cr-bookmark-front: var(--cr-space-3xl);
	--cr-bookmark-tuck: var(--cr-space-lg);
	--cr-bookmark-after: var(--cr-space-lg);
	position: relative;
	box-sizing: border-box;
	margin-block: var(--cr-space-xl);
	padding: var(--cr-space-md) var(--cr-space-md) calc(var(--cr-bookmark-front) - var(--cr-bookmark-tuck) + var(--cr-bookmark-after));
}

.cr-bookmark-single::before,
.cr-bookmark-single::after {
	content: "";
	position: absolute;
	box-sizing: border-box;
	border: 2px solid var(--cr-ink);
	box-shadow: var(--cr-shadow-hard);
	pointer-events: none;
}

.cr-bookmark-single::before {
	inset-block: 0 calc(var(--cr-space-md) + var(--cr-bookmark-after));
	inset-inline: var(--cr-space-xl);
	background: var(--cr-prussian-blue);
}

.cr-bookmark-single::after {
	z-index: 3;
	inset-inline: 0;
	inset-block-end: var(--cr-bookmark-after);
	block-size: var(--cr-bookmark-front);
	background: var(--cr-cerulean);
}

.cr-bookmark-single__tab {
	position: relative;
	z-index: 1;
	box-sizing: border-box;
	inline-size: fit-content;
	max-inline-size: min(20rem, 100% - 2 * var(--cr-space-2xl));
	margin: 0 0 calc(-1 * var(--cr-space-xs)) var(--cr-space-2xl);
	padding: var(--cr-space-xs) var(--cr-space-md) var(--cr-space-sm);
	border: 2px solid var(--cr-ink);
	border-block-end: 0;
	background: var(--cr-sky-blue);
	color: var(--cr-russian-violet);
	font-family: var(--cr-font-accent);
	font-size: max( var(--cr-text-sm), var(--cr-text-floor) );
	line-height: var(--cr-leading-tight);
	overflow-wrap: anywhere;
}

.cr-index-card--single {
	z-index: 2;
	width: 100%;
	max-width: none;
	padding-block-end: calc(var(--cr-space-md) + var(--cr-bookmark-tuck));
}

.cr-index-card__cited {
	margin: 0 0 var(--cr-space-md);
	font-family: var(--cr-font-accent);
	font-size: max( var(--cr-text-lg), var(--cr-text-floor) );
	font-weight: var(--cr-weight-bold);
	line-height: var(--cr-leading-snug);
}

.cr-index-card__body {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--cr-space-lg);
}

.cr-index-card__fields {
	display: grid;
	gap: var(--cr-space-xs);
	min-width: 0;
	margin: 0;
}

.cr-index-card__row {
	display: grid;
	grid-template-columns: minmax(7rem, 0.7fr) minmax(0, 2fr);
	gap: var(--cr-space-sm);
	align-items: baseline;
	padding-block: var(--cr-space-sm);
	border-bottom: 1px solid var(--cr-sky-blue);
}

.cr-index-card__row dt {
	margin: 0;
	font-family: var(--cr-font-mono);
	font-size: max( var(--cr-text-sm), var(--cr-text-floor) );
	font-weight: var(--cr-weight-bold);
	letter-spacing: var(--cr-tracking-wide);
	text-transform: uppercase;
}

.cr-index-card__row dd {
	min-width: 0;
	margin: 0;
	font-size: var(--cr-text-md);
	overflow-wrap: anywhere;
}

.cr-index-card__row--source a {
	color: var(--cr-cerulean);
	text-decoration: underline;
}

.cr-index-card__note {
	font-family: var(--cr-font-body);
}

.cr-index-card__picture {
	display: grid;
	min-width: 0;
	margin: 0;
	place-items: center;
}

.cr-index-card__picture.cr-cover--failed {
	display: none;
}

.cr-index-card__image {
	width: auto;
	max-width: 100%;
	height: auto;
	object-fit: contain;
}

.cr-stream-page .pk-card.k-bookmark {
	position: relative;
	box-sizing: border-box;
	width: 88%;
	max-width: 100%;
	padding: 0.9rem 1rem 1rem;
	border: 2px solid var(--cr-ink);
	background: var(--cr-surface-elevated);
	box-shadow: var(--cr-shadow-hard);
	color: var(--cr-ink);
	overflow-wrap: anywhere;
}

.cr-stream-page .pk-card.k-bookmark:has(:focus-visible) {
	outline: 3px solid var(--cr-focus-ring);
	outline-offset: 2px;
	box-shadow: var(--cr-shadow-hard), 0 0 0 7px var(--cr-focus-halo);
}

.cr-stream-page .wp-block-post-template > li:nth-child(even) .pk-card.k-bookmark {
	margin-left: auto;
}

.cr-stream-page .pk-card.k-bookmark::after {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	border-style: solid;
	border-width: 0 1.4rem 1.4rem 0;
	border-color: transparent var(--cr-sky-blue) transparent transparent;
	pointer-events: none;
}

.cr-stream-page .pk-card.k-bookmark .pk-title {
	margin: 0;
	padding: 0 var(--cr-space-4xl) 0 0;
	font-family: var(--cr-font-accent);
	font-size: 1rem;
	line-height: var(--cr-leading-tight);
	overflow-wrap: anywhere;
}

.cr-stream-page .pk-card.k-bookmark .pk-title a {
	color: var(--cr-ink);
	text-decoration: none;
}

.cr-stream-page .pk-card.k-bookmark .pk-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cr-bookmark-stream__label,
.cr-bookmark-stream__host,
.cr-bookmark-stream__date {
	padding-inline-end: var(--cr-space-4xl);
}

.cr-bookmark-stream__date {
	margin: var(--cr-space-xs) 0 0;
	font-family: var(--cr-font-mono);
	font-size: max( var(--cr-text-sm), var(--cr-text-floor) );
}

.cr-bookmark-stream__stamp {
	position: absolute;
	inset-block-start: var(--cr-space-md);
	inset-inline-end: var(--cr-space-md);
	width: min(6rem, 32%);
	pointer-events: none;
}

.cr-bookmark-stream__stamp .cr-stamp-mark {
	display: block;
}

.cr-bookmark-stream__stamp svg {
	width: 100%;
	height: auto;
}

.cr-bookmark-drawers .wp-block-query-pagination {
	margin-block-start: var(--cr-space-xl);
}

@media (min-width: 600px) {

	.cr-bookmark-drawers .pkiw-grouped {
		--cr-bookmark-columns: 2;
	}
}

@media (min-width: 1200px) {

	.cr-bookmark-drawers .pkiw-grouped {
		--cr-bookmark-columns: 4;
	}
}

@media (min-width: 1100px) {

	.cr-index-card__body:has(.cr-index-card__picture:not(.cr-cover--failed)) {
		grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.8fr);
		align-items: start;
	}
}

@media (max-width: 480px) {

	.cr-index-card {
		padding-inline: calc(var(--cr-space-xl) + var(--cr-space-sm)) var(--cr-space-sm);
	}

	.cr-index-card__row {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--cr-space-2xs);
	}

	.cr-bookmark-single {
		padding-inline: var(--cr-space-xs);
	}

	.cr-bookmark-single::before {
		inset-inline: var(--cr-space-md);
	}

	.cr-bookmark-single__tab {
		max-inline-size: calc(100% - 2 * var(--cr-space-lg));
		margin-inline-start: var(--cr-space-lg);
	}

	.cr-stream-page .pk-card.k-bookmark .pk-title,
	.cr-bookmark-stream__label,
	.cr-bookmark-stream__host,
	.cr-bookmark-stream__date {
		padding-inline-end: 0;
	}

	.cr-bookmark-stream__stamp {
		position: static;
		display: block;
		margin-block-start: var(--cr-space-sm);
		width: 7rem;
	}
}

@media (forced-colors: active) {

	.cr-bookmark-drawers .pkiw-group {
		border: 2px solid CanvasText;
		box-shadow: none;
		background-image: none;
	}

	.cr-bookmark-drawers .pkiw-group__heading {
		border: 2px solid CanvasText;
		box-shadow: none;
		background-image: none;
	}

	.cr-index-card {
		border: 2px solid CanvasText;
		box-shadow: none;
		background-image: none;
	}

	.cr-bookmark-stream,
	.cr-stream-page .pk-card.k-bookmark,
	.cr-bookmark-single::before,
	.cr-bookmark-single::after {
		border: 2px solid CanvasText;
		box-shadow: none;
		background-image: none;
	}

	.cr-bookmark-drawers .pkiw-group::before,
	.cr-bookmark-drawers .pkiw-group::after,
	.cr-bookmark-drawers .pkiw-group__heading::before,
	.cr-bookmark-drawers .pkiw-group__heading::after,
	.cr-stream-page .pk-card.k-bookmark::after,
	.cr-bookmark-stream__stamp {
		display: none;
	}

	.cr-index-card a,
	.cr-bookmark-stream a {
		color: LinkText;
	}
}