/*
 * Claritas reports, front end styles.
 *
 * The theme owns the tokens; every one of them has a fallback here so the
 * plugin still looks like itself when the theme is not active.
 */

.claritas-reports,
.claritas-report-cover,
.claritas-report-guarantee {
	--r-paper: var(--paper, #F8F2EC);
	--r-paper-2: var(--paper-2, #FBF7F2);
	--r-ink: var(--ink, #33243A);
	--r-ink-soft: var(--ink-soft, #6C5A72);
	--r-rose: var(--rose, #C9697E);
	/* The fill of a solid button: white on --rose is 3.58:1, on this 5.25:1. */
	--r-rose-strong: var(--rose-strong, #A94F66);
	--r-rose-deep: var(--rose-deep, #9E4459);
	--r-rose-soft: var(--rose-soft, #F3D9DE);
	--r-gold: var(--gold, #C39A55);
	--r-line: var(--line, rgba(51, 36, 58, .14));
	--r-display: var(--display, "Fraunces", Georgia, "Times New Roman", serif);
	--r-body: var(--body, "Alegreya Sans", "Gill Sans", Calibri, system-ui, sans-serif);
}

.claritas-reports {
	color: var(--r-ink);
	font-family: var(--r-body);
	line-height: 1.6;
	max-width: 46rem;
	margin: 0 auto;
}

.claritas-reports *,
.claritas-reports *::before,
.claritas-reports *::after {
	box-sizing: border-box;
}

.claritas-reports p {
	margin: 0 0 1rem;
}

.claritas-reports [hidden] {
	display: none !important;
}

.claritas-reports h1,
.claritas-reports h2,
.claritas-reports h3 {
	font-family: var(--r-display);
	font-weight: 500;
	color: var(--r-ink);
	line-height: 1.2;
	margin: 0 0 .6rem;
}

.claritas-reports-title {
	font-family: var(--r-display);
	font-size: 1.7rem;
	margin: 0 0 .5rem;
}

.claritas-reports-lede {
	color: var(--r-ink-soft);
}

/* ---------- buttons ---------- */

.claritas-reports-btn {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	background: var(--r-rose-strong);
	color: #fff;
	border: 0;
	border-radius: 12px;
	padding: .85rem 1.4rem;
	font: 500 1rem/1 var(--r-body);
	text-decoration: none;
	cursor: pointer;
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 12px 22px -14px rgba(169, 79, 102, .8);
	transition: transform .25s ease, box-shadow .25s ease;
}

.claritas-reports-btn:hover,
.claritas-reports-btn:focus {
	color: #fff;
	transform: translateY(-1px);
}

.claritas-reports-btn:focus-visible {
	outline: 2px solid var(--r-rose-deep);
	outline-offset: 3px;
}

.claritas-reports-btn[disabled] {
	opacity: .6;
	cursor: default;
	transform: none;
}

/* ---------- the intake form ---------- */

.claritas-report-card {
	background: var(--r-paper-2);
	border: 1px solid var(--r-line);
	border-radius: 16px;
	padding: 1.6rem 1.5rem;
	margin: 0 0 1.5rem;
}

.claritas-report-card__name {
	font-size: 1.35rem;
	margin: 0 0 .2rem;
}

.claritas-report-card__line {
	color: var(--r-ink-soft);
	margin: 0 0 1.2rem;
}

.claritas-reports-field {
	margin: 0 0 1.2rem;
	border: 0;
	padding: 0;
}

.claritas-reports-field label,
.claritas-reports-field legend {
	display: block;
	font-size: .95rem;
	color: var(--r-ink-soft);
	margin: 0 0 .35rem;
	padding: 0;
}

.claritas-reports-field input[type="text"],
.claritas-reports-field input[type="date"],
.claritas-reports-field input[type="email"],
.claritas-reports-field textarea {
	width: 100%;
	background: #fff;
	border: 1px solid var(--r-line);
	border-radius: 12px;
	padding: .8rem .9rem;
	font: 400 1.05rem/1.5 var(--r-body);
	color: var(--r-ink);
}

.claritas-reports-field textarea {
	resize: vertical;
	min-height: 9rem;
}

.claritas-reports-field input:focus,
.claritas-reports-field textarea:focus {
	outline: 2px solid var(--r-rose);
	outline-offset: 1px;
	border-color: transparent;
}

.claritas-reports-hint {
	display: block;
	margin: .35rem 0 0;
	font-size: .85rem;
	color: var(--r-ink-soft);
}

.claritas-reports-chips {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.claritas-reports-chip {
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--r-line);
	background: #fff;
	border-radius: 999px;
	padding: .45rem .9rem;
	cursor: pointer;
	font-size: .95rem;
	color: var(--r-ink);
	margin: 0;
}

.claritas-reports-chip input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.claritas-reports-chip.is-on {
	background: var(--r-rose-soft);
	border-color: var(--r-rose);
	color: var(--r-rose-deep);
}

.claritas-reports-chip:focus-within {
	outline: 2px solid var(--r-rose);
	outline-offset: 2px;
}

/* Three moods is the limit, and the script switches the rest off. Saying so
   with a look, rather than leaving them quietly unresponsive. */
.claritas-reports-chip:has(input:disabled) {
	opacity: .5;
	cursor: default;
}

.claritas-reports-consent label {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	font-size: .9rem;
	color: var(--r-ink-soft);
}

.claritas-reports-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.claritas-reports-errors {
	background: var(--r-rose-soft);
	border-radius: 12px;
	padding: 1rem 1.1rem;
	margin: 0 0 1.2rem;
	color: var(--r-rose-deep);
}

.claritas-reports-errors ul {
	margin: .3rem 0 0 1.1rem;
	padding: 0;
}

.claritas-reports-status {
	background: var(--r-paper);
	border-left: 3px solid var(--r-gold);
	padding: .9rem 1rem;
	border-radius: 0 12px 12px 0;
}

.claritas-reports-note {
	background: var(--r-paper-2);
	border: 1px solid var(--r-line);
	border-radius: 16px;
	padding: 1.6rem 1.5rem;
}

/* ---------- the report page ---------- */

.claritas-report {
	font-size: 1.06rem;
}

.claritas-report__head {
	text-align: center;
	margin: 0 0 2.4rem;
}

.claritas-report__kicker {
	font-size: .78rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--r-rose-deep);
	margin: 0 0 .6rem;
}

.claritas-report__title {
	font-size: 2.1rem;
	margin: 0 0 .4rem;
}

.claritas-report__for {
	color: var(--r-ink-soft);
	font-style: italic;
	margin: 0 0 1rem;
}

.claritas-report__rule {
	width: 72px;
	height: 1px;
	background: var(--r-gold);
	margin: 0 auto 1.4rem;
}

.claritas-report__dear {
	font-family: var(--r-display);
	font-style: italic;
	font-size: 1.25rem;
	margin: 0 0 .6rem;
}

.claritas-report__letter p:first-child::first-letter {
	font-family: var(--r-display);
	font-size: 2.6rem;
	line-height: .9;
	float: left;
	margin: .28rem .5rem 0 0;
	color: var(--r-rose-deep);
}

.claritas-report__section {
	margin: 0 0 2rem;
}

.claritas-report__section h2,
.claritas-report__cards h2,
.claritas-report__followup h2 {
	font-size: 1.4rem;
	color: var(--r-rose-deep);
	margin: 2rem 0 .8rem;
}

.claritas-report__card {
	display: flex;
	gap: 1.2rem;
	align-items: flex-start;
	margin: 0 0 2rem;
}

.claritas-report__card-art {
	flex: 0 0 108px;
	width: 108px;
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 18px 30px -22px rgba(74, 40, 50, .7);
	background: var(--r-rose-soft);
}

.claritas-report__card-art img {
	display: block;
	width: 100%;
	/* The tag carries no width or height, so the box is held open here: every
	   card in the deck is drawn three by five. */
	aspect-ratio: 3 / 5;
	height: auto;
	object-fit: cover;
}

.claritas-report__card-art.is-reversed img {
	transform: rotate(180deg);
}

.claritas-report__card-art--plain {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 180px;
	padding: .8rem;
	text-align: center;
	font-family: var(--r-display);
	font-size: .95rem;
	color: var(--r-rose-deep);
	border: 1px solid var(--r-rose);
}

.claritas-report__card-text {
	flex: 1 1 auto;
	min-width: 0;
}

.claritas-report__card-position {
	font-size: .75rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--r-rose-deep);
	margin: 0 0 .2rem;
}

.claritas-report__card-name {
	font-size: 1.25rem;
	margin: 0 0 .1rem;
}

.claritas-report__card-orientation {
	font-style: italic;
	color: var(--r-ink-soft);
	margin: 0 0 .7rem;
}

.claritas-report__honest {
	background: var(--r-paper-2);
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
	border: 1px solid var(--r-line);
}

.claritas-report__honest h2 {
	margin-top: 0;
}

.claritas-report__step {
	background: var(--r-rose-soft);
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
	margin: 2rem 0;
}

.claritas-report__step-label,
.claritas-report__road-label {
	font-size: .75rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--r-rose-deep);
	margin: 0 0 .5rem;
}

.claritas-report__step-text {
	font-family: var(--r-display);
	font-size: 1.2rem;
	margin: 0;
}

.claritas-report__closing {
	margin: 2rem 0 0;
}

.claritas-report__sign {
	font-family: var(--r-display);
	font-style: italic;
	font-size: 1.2rem;
	color: var(--r-rose-deep);
	margin: .4rem 0 0;
}

.claritas-report__road {
	border: 1px dashed var(--r-gold);
	border-radius: 16px;
	padding: 1.4rem 1.5rem;
	margin: 2.4rem 0;
}

.claritas-report__road-card {
	font-family: var(--r-display);
	font-size: 1.25rem;
	margin: 0 0 .6rem;
}

.claritas-report__followup {
	border-top: 1px solid var(--r-line);
	padding-top: 1.4rem;
	margin: 2.4rem 0 0;
}

.claritas-report__followup-question {
	font-style: italic;
	color: var(--r-ink-soft);
}

.claritas-report__foot {
	border-top: 1px solid var(--r-line);
	margin: 2.4rem 0 0;
	padding-top: 1.2rem;
	font-size: .9rem;
	color: var(--r-ink-soft);
}

.claritas-report__legal {
	font-size: .8rem;
}

/* ---------- the shop cover, until there is a photograph ---------- */

.claritas-report-cover {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	aspect-ratio: 3 / 4;
	width: 100%;
	padding: 1.4rem;
	border-radius: 12px;
	background:
		radial-gradient(120% 90% at 50% 0%, rgba(255, 255, 255, .75), rgba(255, 255, 255, 0)),
		linear-gradient(160deg, var(--r-rose-soft), var(--r-paper) 55%, #E7DCEA);
	color: var(--r-ink);
	overflow: hidden;
}

.claritas-report-cover__rule {
	width: 48px;
	height: 1px;
	background: var(--r-gold);
	margin: 0 0 .9rem;
}

.claritas-report-cover__kicker {
	font-family: var(--r-body);
	font-size: .68rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--r-rose-deep);
	margin: 0 0 .5rem;
}

.claritas-report-cover__title {
	font-family: var(--r-display);
	font-size: 1.15rem;
	line-height: 1.25;
	margin: 0 0 .5rem;
}

.claritas-report-cover__line {
	font-size: .82rem;
	color: var(--r-ink-soft);
	max-width: 22ch;
}

.claritas-report-cover--single {
	max-width: 520px;
}

.claritas-report-photo {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 12px;
}

.claritas-report-guarantee {
	margin: 1.2rem 0 0;
	padding: 1rem 1.1rem;
	background: var(--paper-2, #FBF7F2);
	border: 1px solid var(--line, rgba(51, 36, 58, .14));
	border-radius: 12px;
	font-size: .92rem;
	color: var(--ink, #33243A);
}

.claritas-report-guarantee p {
	margin: 0 0 .5rem;
}

.claritas-report-guarantee__legal {
	font-size: .8rem;
	color: var(--ink-soft, #6C5A72);
	margin: 0;
}

/* ---------- small screens and quiet motion ---------- */

@media (max-width: 640px) {
	.claritas-report__card {
		flex-direction: column;
	}

	.claritas-report__card-art {
		flex: 0 0 auto;
		width: 132px;
	}

	.claritas-report__title {
		font-size: 1.7rem;
	}

	/* Nothing under 15px on a phone. These are all .75rem to .9rem, which is
	   12px to 14.4px against a 16px root. */
	.claritas-reports-hint,
	.claritas-reports-consent label,
	.claritas-report__kicker,
	.claritas-report__card-position,
	.claritas-report__step-label,
	.claritas-report__road-label,
	.claritas-report__foot,
	.claritas-report__legal,
	.claritas-report-guarantee,
	.claritas-report-guarantee__legal {
		font-size: .95rem;
	}

	/* A chip is a tap target before it is a label. */
	.claritas-reports-chip {
		min-height: 44px;
		padding: .5rem 1rem;
	}

	.claritas-reports-btn {
		min-height: 48px;
		width: 100%;
		justify-content: center;
	}

	.claritas-reports-field input[type="date"] {
		min-height: 48px;
	}

	.claritas-report__card-art {
		width: 120px;
	}

	/* The cover stands in for a photograph until there is one, but it is still
	   the only thing a customer reads in the shop listing. */
	.claritas-report-cover__kicker {
		font-size: .95rem;
	}

	.claritas-report-cover__line {
		font-size: .95rem;
		max-width: 26ch;
	}
}

/* ---------- a report on paper ----------
   People print these, and one that has been paid for should come off a
   printer looking like the thing they paid for. */

@media print {
	.claritas-reports-form,
	.claritas-reports-intake,
	.claritas-report__followup,
	.claritas-reports-btn,
	.claritas-report-guarantee {
		display: none !important;
	}

	.claritas-reports {
		max-width: none;
		font-size: 11.5pt;
		line-height: 1.5;
		color: #000;
	}

	.claritas-report__head {
		margin-bottom: 1.6rem;
	}

	.claritas-report__card {
		flex-direction: row;
		break-inside: avoid;
	}

	.claritas-report__card-art {
		flex: 0 0 84px;
		width: 84px;
		box-shadow: none;
	}

	.claritas-report__honest,
	.claritas-report__step,
	.claritas-report__road,
	.claritas-report__closing {
		break-inside: avoid;
		border: 1px solid #bbb;
		background: none;
	}

	.claritas-report__section h2,
	.claritas-report__cards h2 {
		break-after: avoid;
	}

	.claritas-report__foot {
		font-size: 9pt;
	}

	a {
		color: #000;
		text-decoration: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.claritas-reports-btn {
		transition: none;
	}

	.claritas-reports-btn:hover,
	.claritas-reports-btn:focus {
		transform: none;
	}
}