/* COI Keep reading (PTECH-10513, T7). Loaded only when the design switch is on,
   on single posts. Every rule is scoped under .coi-v2. Sizes are rem (1px
   borders aside). Colors come from the --coi- tokens, never from this file.
   Breakpoint 922px: below it the box sits under the article, from it up the
   box sits in the right rail under the ad. The surrounding template owns the
   gap above the box (the rail uses a flex gap, the article has the share row),
   so this file sets no top margin (PTECH-10513, PTECH-10514). */

.coi-v2 .coi-keep {
	padding: 1rem;
	background: var(--coi-bg);
	border: 1px solid var(--coi-border);
	border-top: var(--coi-box-rule-w) solid var(--coi-box-rule);
	border-radius: var(--coi-radius);
}

.coi-v2 .coi-keep__title {
	margin: 0 0 0.7rem;
	font-size: 0.78rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--coi-label);
}

.coi-v2 .coi-keep__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.coi-v2 .coi-keep__link {
	display: grid;
	grid-template-columns: 3.6rem 1fr;
	gap: 0.7rem;
	padding: 0.7rem 0;
	border-top: 1px solid var(--coi-border);
	color: var(--coi-primary);
	text-decoration: none;
}

.coi-v2 .coi-keep__item:first-child .coi-keep__link {
	padding-top: 0;
	border-top: 0;
}

.coi-v2 .coi-keep__link img,
.coi-v2 .coi-keep__noimg {
	display: block;
	width: 3.6rem;
	height: 3.6rem;
	border-radius: 0.3rem;
}

.coi-v2 .coi-keep__link img {
	object-fit: cover;
}

.coi-v2 .coi-keep__noimg {
	background: var(--coi-surface);
}

.coi-v2 .coi-keep__headline {
	display: block;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.25;
}

.coi-v2 .coi-keep__meta {
	color: var(--coi-muted);
	font-size: 0.72rem;
}

.coi-v2 .coi-keep__link:hover .coi-keep__headline,
.coi-v2 .coi-keep__link:focus-visible .coi-keep__headline {
	text-decoration: underline;
}

.coi-v2 .coi-keep__link:focus-visible {
	outline: 0.18rem solid var(--coi-accent-2);
	outline-offset: 0.18rem;
}

/* One box at a time: under the article below 922px, in the right rail from 922px up. */
.coi-v2 .coi-keep--rail {
	display: none;
}

.coi-v2 .coi-keep--article {
	display: block;
}

/* stylelint-disable-next-line unit-disallowed-list -- 922px is the design breakpoint from the Requirements page, not a design size */
@media (min-width: 922px) {
	.coi-v2 .coi-keep--rail {
		display: block;
	}

	.coi-v2 .coi-keep--article {
		display: none;
	}
}