/**
 * Reading cards, front end and editor alike.
 *
 * Two things this file takes seriously. Heavy themes style headings, figures,
 * blockquotes and summaries hard, and several of those properties inherit, so
 * everything we own is stated explicitly. And every colour is a variable, which
 * is what lets a block's own colour settings or a theme's palette override a
 * card without fighting the stylesheet.
 */

.sigtk-card {
	--sigtk-tone: #2a6cb0;
	--sigtk-tone-bg: #f2f7fc;
	--sigtk-tone-border: #cfe0f0;
	--sigtk-card-ink: #1d2327;
	--sigtk-card-muted: #5c6169;
	--sigtk-card-radius: 10px;

	/* The frame of a card. The settings write over these three, and every
	   padding in this file is measured from the spacing one, so one number
	   moves them all without losing the rhythm between the card types. */
	--sigtk-card-border-width: 1px;
	--sigtk-card-stripe-width: 4px;
	--sigtk-card-padding: 16px;
	--sigtk-card-shadow: none;
	--sigtk-card-icon-radius: 8px;
	--sigtk-card-icon-bg: rgba( 255, 255, 255, 0.75 );

	box-sizing: border-box;
	margin: 0 0 28px;
	color: var(--sigtk-card-ink);
}

.sigtk-card * {
	box-sizing: border-box;
}

.sigtk-card--info {
	--sigtk-tone: #2a6cb0;
	--sigtk-tone-bg: #f2f7fc;
	--sigtk-tone-border: #cfe0f0;
}

.sigtk-card--tip {
	--sigtk-tone: #1f7a5a;
	--sigtk-tone-bg: #f1f9f5;
	--sigtk-tone-border: #cbe7d9;
}

.sigtk-card--warning {
	--sigtk-tone: #b26a00;
	--sigtk-tone-bg: #fff8ec;
	--sigtk-tone-border: #f0dcb8;
}

.sigtk-card--alert {
	--sigtk-tone: #c92f4c;
	--sigtk-tone-bg: #fdf2f4;
	--sigtk-tone-border: #f3d2d9;
}

.sigtk-card--summary {
	--sigtk-tone: #4a4f8c;
	--sigtk-tone-bg: #f5f5fb;
	--sigtk-tone-border: #dcdcee;
}

.sigtk-card--neutral {
	--sigtk-tone: #5c6169;
	--sigtk-tone-bg: #f6f7f8;
	--sigtk-tone-border: #e2e4e7;
}

/* --- callout --- */
.sigtk-card--callout {
	display: flex;
	gap: 14px;
	align-items: flex-start;
	padding: var(--sigtk-card-padding) calc( var(--sigtk-card-padding) + 2px );
	border: var(--sigtk-card-border-width) solid var(--sigtk-tone-border);
	border-left: var(--sigtk-card-stripe-width) solid var(--sigtk-tone);
	border-radius: var(--sigtk-card-radius);
	background: var(--sigtk-tone-bg);
	box-shadow: var(--sigtk-card-shadow);
	line-height: 1.6;
}

.sigtk-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: var(--sigtk-card-icon-radius);
	background: var(--sigtk-card-icon-bg);
	color: var(--sigtk-tone);
}

.sigtk-card__icon svg {
	display: block;
}

.sigtk-card__body {
	min-width: 0;
	flex: 1 1 auto;
}

.sigtk-card__title {
	margin: 0 0 4px;
	padding: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sigtk-card-ink);
}

.sigtk-card__content > *:first-child {
	margin-top: 0;
}

.sigtk-card__content > *:last-child {
	margin-bottom: 0;
}

.sigtk-card__content a {
	color: var(--sigtk-tone);
}

/* --- quote --- */
.sigtk-card--quote {
	padding: calc( var(--sigtk-card-padding) + 6px ) calc( var(--sigtk-card-padding) + 8px );
	border: var(--sigtk-card-border-width) solid #e6e8ea;
	border-radius: var(--sigtk-card-radius);
	background: #fbfbfc;
	box-shadow: var(--sigtk-card-shadow);
}

.sigtk-quote__text {
	margin: 0;
	padding: 0;
	border: 0;
	quotes: none;
	font-size: 1.15em;
	font-style: normal;
	font-weight: 500;
	line-height: 1.55;
	color: var(--sigtk-card-ink);
}

.sigtk-quote__text p {
	margin: 0 0 0.6em;
}

.sigtk-quote__text p:last-child {
	margin-bottom: 0;
}

.sigtk-quote__text::before {
	content: "";
	display: block;
	width: 26px;
	height: 3px;
	margin-bottom: 14px;
	border-radius: 2px;
	background: var(--sigtk-tone);
}

.sigtk-quote__by {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	font-style: normal;
	text-align: left;
}

.sigtk-quote__avatar {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 50%;
	object-fit: cover;
}

.sigtk-quote__meta {
	display: flex;
	flex-direction: column;
	min-width: 0;
}

.sigtk-quote__author {
	font-size: 0.95em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sigtk-card-ink);
}

.sigtk-quote__source {
	font-size: 0.85em;
	line-height: 1.35;
	color: var(--sigtk-card-muted);
}

/* --- link --- */
.sigtk-card--link {
	border: var(--sigtk-card-border-width) solid #e6e8ea;
	border-radius: var(--sigtk-card-radius);
	background: #fbfbfc;
	box-shadow: var(--sigtk-card-shadow);
	overflow: hidden;
	transition: border-color 0.15s ease;
}

.sigtk-card--link:hover {
	border-color: var(--sigtk-tone);
}

.sigtk-link__anchor {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: var(--sigtk-card-padding) calc( var(--sigtk-card-padding) + 4px );
	color: var(--sigtk-card-ink);
	text-decoration: none;
	box-shadow: none;
}

.sigtk-link__anchor:hover,
.sigtk-link__anchor:focus {
	color: var(--sigtk-card-ink);
	text-decoration: none;
}

.sigtk-link__anchor:focus-visible {
	outline: 2px solid var(--sigtk-tone);
	outline-offset: -2px;
}

.sigtk-link__body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
	flex: 1 1 auto;
}

.sigtk-link__title {
	margin: 0;
	padding: 0;
	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sigtk-card-ink);
}

.sigtk-link__description {
	display: block;
	margin: 0;
	padding: 0;
	font-size: 0.95em;
	line-height: 1.5;
	color: var(--sigtk-card-muted);
}

.sigtk-link__domain {
	display: block;
	margin-top: 3px;
	font-size: 0.82em;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--sigtk-tone);
}

.sigtk-link__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sigtk-tone-bg);
	color: var(--sigtk-tone);
	transition: transform 0.15s ease;
}

.sigtk-link__arrow svg {
	display: block;
}

.sigtk-card--link:hover .sigtk-link__arrow {
	transform: translateX( 3px );
}

/* --- questions and answers --- */
.sigtk-card--faq {
	padding: 0;
}

.sigtk-faq__heading {
	margin: 0 0 12px;
	padding: 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sigtk-card-ink);
}

.sigtk-faq__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.sigtk-faq__item {
	border: var(--sigtk-card-border-width) solid #e2e4e7;
	border-radius: var(--sigtk-card-radius);
	background: #fff;
	box-shadow: var(--sigtk-card-shadow);
	overflow: hidden;
}

.sigtk-faq__item[open] {
	border-color: #d3d6da;
}

.sigtk-faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: calc( var(--sigtk-card-padding) - 2px ) calc( var(--sigtk-card-padding) + 2px );
	font-size: 1em;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sigtk-card-ink);
	cursor: pointer;
	list-style: none;
}

/* The default disclosure triangle, gone in every engine. */
.sigtk-faq__question::-webkit-details-marker {
	display: none;
}

.sigtk-faq__question::marker {
	content: "";
}

.sigtk-faq__question:hover {
	background: #fafbfb;
}

.sigtk-faq__question:focus-visible {
	outline: 2px solid var(--sigtk-tone);
	outline-offset: -2px;
}

.sigtk-faq__question-text {
	min-width: 0;
}

.sigtk-faq__marker {
	position: relative;
	flex: none;
	width: 16px;
	height: 16px;
}

.sigtk-faq__marker::before,
.sigtk-faq__marker::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	border-radius: 2px;
	background: var(--sigtk-card-muted);
	transform: translate( -50%, -50% );
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.sigtk-faq__marker::after {
	transform: translate( -50%, -50% ) rotate( 90deg );
}

.sigtk-faq__item[open] .sigtk-faq__marker::after {
	transform: translate( -50%, -50% ) rotate( 0deg );
	opacity: 0;
}

.sigtk-faq__answer {
	padding: 0 calc( var(--sigtk-card-padding) + 2px ) var(--sigtk-card-padding);
	line-height: 1.65;
}

.sigtk-faq__answer > *:first-child {
	margin-top: 0;
}

.sigtk-faq__answer > *:last-child {
	margin-bottom: 0;
}

/* --- steps --- */
.sigtk-card--steps {
	padding: 0;
}

.sigtk-steps__heading,
.sigtk-checklist__heading {
	margin: 0 0 14px;
	padding: 0;
	font-size: 1.25em;
	font-weight: 700;
	line-height: 1.3;
	color: var(--sigtk-card-ink);
}

.sigtk-steps__list {
	counter-reset: sigtk-step;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sigtk-steps__item {
	counter-increment: sigtk-step;
	position: relative;
	margin: 0;
	padding: 0 0 22px 46px;
	list-style: none;
	line-height: 1.65;
}

.sigtk-steps__item::before {
	content: counter( sigtk-step );
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--sigtk-tone);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

/* The line that ties the steps together, stopping at the last one. */
.sigtk-steps__item::after {
	content: "";
	position: absolute;
	top: 34px;
	bottom: 6px;
	left: 14px;
	width: 2px;
	background: var(--sigtk-tone-border);
}

.sigtk-steps__item:last-child {
	padding-bottom: 0;
}

.sigtk-steps__item:last-child::after {
	display: none;
}

.sigtk-steps__title {
	margin: 4px 0 4px;
	padding: 0;
	font-size: 1.02em;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: normal;
	text-transform: none;
	color: var(--sigtk-card-ink);
}

.sigtk-steps__body > *:first-child {
	margin-top: 0;
}

.sigtk-steps__body > *:last-child {
	margin-bottom: 0;
}

.sigtk-card--steps {
	--sigtk-tone: #4a4f8c;
	--sigtk-tone-border: #dcdcee;
}

/* --- checklist --- */
.sigtk-card--checklist {
	padding: calc( var(--sigtk-card-padding) + 2px ) calc( var(--sigtk-card-padding) + 4px );
	border: var(--sigtk-card-border-width) solid var(--sigtk-tone-border);
	border-radius: var(--sigtk-card-radius);
	background: var(--sigtk-tone-bg);
	box-shadow: var(--sigtk-card-shadow);
	--sigtk-tone: #1f7a5a;
	--sigtk-tone-bg: #f7faf8;
	--sigtk-tone-border: #dbe7e1;
}

.sigtk-checklist__list ul,
.sigtk-checklist__list ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.sigtk-checklist__list li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 30px;
	list-style: none;
	line-height: 1.6;
}

.sigtk-checklist__list li:last-child {
	margin-bottom: 0;
}

/*
 * The mark is painted, not drawn: the shape is a mask and the colour comes from
 * the tone, so a site that picks its own accent gets marks in that colour too.
 */
.sigtk-checklist__list li::before {
	position: absolute;
	top: 2px;
	left: 0;
	width: 20px;
	height: 20px;
	background-color: var(--sigtk-tone);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 18px 18px;
	mask-size: 18px 18px;
	content: "";
}

.sigtk-checklist--check .sigtk-checklist__list li::before {
	-webkit-mask-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1.4%2014.6-4.2-4.2%201.4-1.4%202.8%202.8%205.6-5.6%201.4%201.4z%22%2F%3E%3C%2Fsvg%3E" );
	mask-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M12%202a10%2010%200%201%200%200%2020%2010%2010%200%200%200%200-20zm-1.4%2014.6-4.2-4.2%201.4-1.4%202.8%202.8%205.6-5.6%201.4%201.4z%22%2F%3E%3C%2Fsvg%3E" );
}

.sigtk-checklist--document .sigtk-checklist__list li::before {
	-webkit-mask-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%202h8l4%204v16H6zm7.4%201.8V7H17zM8%2011h8v1.6H8zm0%203.4h8V16H8z%22%2F%3E%3C%2Fsvg%3E" );
	mask-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%202h8l4%204v16H6zm7.4%201.8V7H17zM8%2011h8v1.6H8zm0%203.4h8V16H8z%22%2F%3E%3C%2Fsvg%3E" );
}

@media screen and ( max-width: 600px ) {
	.sigtk-card--callout {
		padding: calc( var(--sigtk-card-padding) - 2px );
	}

	.sigtk-card--quote {
		padding: calc( var(--sigtk-card-padding) + 2px );
	}

	.sigtk-link__anchor {
		padding: calc( var(--sigtk-card-padding) - 2px );
	}

	.sigtk-faq__question {
		padding: calc( var(--sigtk-card-padding) - 4px ) calc( var(--sigtk-card-padding) - 2px );
	}

	.sigtk-faq__answer {
		padding: 0 calc( var(--sigtk-card-padding) - 2px ) calc( var(--sigtk-card-padding) - 2px );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.sigtk-faq__marker::before,
	.sigtk-faq__marker::after {
		transition: none;
	}

	.sigtk-card--link,
	.sigtk-link__arrow {
		transition: none;
	}
}