/**
 * Visual design pass, implementing the Claude Design canvas
 * ("Cleanr CfWB110 Wizard.dc.html"). Every colour, radius and space value is
 * a custom property on .cfwb110 so future passes can swap the palette
 * without touching selectors or markup. Class names match assets/js/wizard.js.
 */

.cfwb110 {
	--cfwb-font: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
	--cfwb-ink: #14181D;
	--cfwb-ink-2: #4A5560;
	--cfwb-ink-3: #5F6A74;
	--cfwb-ink-faint: #8C959D;
	--cfwb-paper: #FCFCFD;
	--cfwb-surface: #FFFFFF;
	--cfwb-line: #E3E6EA;
	--cfwb-line-strong: #C6CBD2;
	--cfwb-accent: #022051;
	--cfwb-accent-ink: #021A42;
	--cfwb-accent-wash: #EDF0F6;
	--cfwb-note-wash: #F4F5F7;
	--cfwb-caution-ink: #7A4A06;
	--cfwb-caution-wash: #FDF4E5;
	--cfwb-caution-line: #C98A2E;
	--cfwb-radius: 16px;
	--cfwb-tap: 56px;
	--cfwb-gap: 16px;
	--cfwb-maxw: 720px;
	--cfwb-stripe: repeating-linear-gradient(135deg, #E9ECF0 0 6px, #F5F6F8 6px 12px);

	max-width: var(--cfwb-maxw);
	margin: 0 auto;
	font-family: var(--cfwb-font);
	color: var(--cfwb-ink);
	background: var(--cfwb-paper);
	border: 1px solid var(--cfwb-line);
	border-radius: var(--cfwb-radius);
	padding: 20px;
	font-size: 16px;
	line-height: 1.5;
}

@media (min-width: 640px) {
	.cfwb110 { padding: 36px; }
}

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

.cfwb110 a { color: var(--cfwb-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.cfwb110 a:hover { color: var(--cfwb-ink); }

@keyframes cfwbShimmer { 0% { background-position: -320px 0; } 100% { background-position: 320px 0; } }
@keyframes cfwbSpin { to { transform: rotate(360deg); } }

/* Progress ---------------------------------------------------------- */

.cfwb110__progress {
	margin: 0 0 24px;
}

.cfwb110__progress-tracks {
	display: none;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}

.cfwb110__progress-track {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cfwb110__progress-bar {
	height: 4px;
	border-radius: 2px;
	background: var(--cfwb-line);
}

.cfwb110__progress-track--is-done .cfwb110__progress-bar,
.cfwb110__progress-track--is-current .cfwb110__progress-bar {
	background: var(--cfwb-accent);
}

.cfwb110__progress-row {
	display: flex;
	align-items: center;
	gap: 8px;
}

.cfwb110__progress-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	font-size: 12px;
	font-weight: 600;
	border: 1px solid var(--cfwb-line-strong);
	color: var(--cfwb-ink-3);
}

.cfwb110__progress-track--is-done .cfwb110__progress-badge,
.cfwb110__progress-track--is-current .cfwb110__progress-badge {
	background: var(--cfwb-accent);
	color: #fff;
	border-color: var(--cfwb-accent);
}

.cfwb110__progress-label {
	font-size: 14px;
	font-weight: 500;
	color: var(--cfwb-ink-3);
}

.cfwb110__progress-track--is-current .cfwb110__progress-label {
	font-weight: 600;
	color: var(--cfwb-ink);
}

.cfwb110__progress-mobile {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.cfwb110__progress-mobile::before {
	content: "";
	display: block;
	height: 4px;
	border-radius: 2px;
	background: var(--cfwb-accent);
}

.cfwb110__progress-mobile-step,
.cfwb110__progress-mobile-next {
	display: inline-flex;
}

.cfwb110__progress-mobile > * {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.cfwb110__progress-mobile-step { font-size: 14px; font-weight: 600; }
.cfwb110__progress-mobile-next { font-size: 13px; color: var(--cfwb-ink-3); }

@media (min-width: 640px) {
	.cfwb110__progress-tracks { display: grid; }
	.cfwb110__progress-mobile { display: none; }
}

/* Headings + grids ---------------------------------------------------- */

.cfwb110__heading {
	margin: 0 0 8px;
	font-size: 1.375rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	line-height: 1.2;
}

.cfwb110__step { display: flex; flex-direction: column; gap: 20px; }

.cfwb110__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}

@media (min-width: 640px) {
	.cfwb110__grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}

.cfwb110__card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 9px;
	width: 100%;
	min-height: 104px;
	padding: 12px 10px;
	border: 1px solid var(--cfwb-line);
	border-radius: 12px;
	background: var(--cfwb-surface);
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.cfwb110__card:hover { border-color: var(--cfwb-line-strong); background: #F7F8FA; }

.cfwb110__card:focus-visible {
	outline: 3px solid var(--cfwb-accent);
	outline-offset: 2px;
}

.cfwb110__card img,
.cfwb110__swatch {
	max-width: 100%;
	height: 36px;
	width: 72px;
	border-radius: 4px;
	object-fit: contain;
	display: block;
}

.cfwb110__swatch--placeholder { background: var(--cfwb-stripe); }
.cfwb110__swatch--wide { width: 100%; height: 100%; min-height: 120px; border-radius: 0; }

/* Brand logos whose artwork already spells out the name (YETI, Owala, ...)
   run full-size with no redundant label underneath. */
.cfwb110__card .cfwb110__swatch--wordmark {
	width: 94%;
	max-width: 260px;
	height: 70px;
}

/* Model row cards (step 2) span full width, photo + text side by side */
.cfwb110__grid--model { grid-template-columns: 1fr; }

.cfwb110__card--model {
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	gap: 14px;
	min-height: 88px;
	padding: 12px;
	text-align: left;
}

.cfwb110__card--model .cfwb110__swatch {
	width: 64px;
	height: 64px;
	border-radius: 8px;
	flex: none;
}

.cfwb110__card-text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cfwb110__card-title { font-size: 16px; font-weight: 600; line-height: 1.3; }
.cfwb110__card-detail { font-size: 13px; line-height: 1.4; color: var(--cfwb-ink-2); }

.cfwb110__card--size {
	min-height: var(--cfwb-tap);
	font-size: 1.25rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

/* Skeleton loading ---------------------------------------------------- */

.cfwb110__skeleton-label {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: var(--cfwb-ink-2);
}

.cfwb110__skeleton-card {
	min-height: 96px;
	border: 1px solid var(--cfwb-line);
	border-radius: 12px;
	background: linear-gradient(90deg, #F4F5F7 25%, #FAFAFB 50%, #F4F5F7 75%);
	background-size: 320px 100%;
	animation: cfwbShimmer 1.4s linear infinite;
}

.cfwb110__spinner-row {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
	font-size: 16px;
	font-weight: 600;
}

.cfwb110__spinner {
	width: 26px;
	height: 26px;
	flex: none;
	border-radius: 50%;
	border: 3px solid var(--cfwb-line);
	border-top-color: var(--cfwb-accent);
	animation: cfwbSpin 0.8s linear infinite;
}

/* Error card ---------------------------------------------------------- */

.cfwb110__error-card {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 24px;
	border: 1px solid var(--cfwb-line);
	border-radius: var(--cfwb-radius);
	background: var(--cfwb-surface);
}

.cfwb110__error-actions { display: flex; gap: 10px; flex-wrap: wrap; }

/* Result --------------------------------------------------------------- */

.cfwb110__result { display: flex; flex-direction: column; gap: 24px; }

.cfwb110__result-header {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--cfwb-line);
}

.cfwb110__pill {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 11px;
	border-radius: 999px;
}

.cfwb110__pill--accent { background: var(--cfwb-accent); color: #fff; }
.cfwb110__pill--outline {
	background: var(--cfwb-note-wash);
	border: 1px solid var(--cfwb-line-strong);
	color: var(--cfwb-ink);
}

.cfwb110__result-meta { display: flex; gap: 14px; align-items: center; }

.cfwb110__result-photo { width: 58px; height: 58px; border-radius: 8px; flex: none; }

.cfwb110__result-titles .cfwb110__heading { margin-bottom: 3px; font-size: 20px; }

.cfwb110__result-subtitle { margin: 0; font-size: 14px; color: var(--cfwb-ink-2); }

/* !important throughout: this is a <button>, and some host themes ship a
   global button reset (background/padding/border-radius/white-space) that
   outranks a plain class selector, which silently turns this back into an
   undersized pill with clipped text. */
.cfwb110__change-bottle {
	align-self: flex-start !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	white-space: normal !important;
	color: var(--cfwb-accent-ink) !important;
	text-decoration: underline !important;
	text-underline-offset: 3px !important;
	cursor: pointer;
}

.cfwb110__result-summary { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cfwb-ink-2); }

@media (min-width: 640px) {
	.cfwb110__result-header { flex-direction: row; align-items: flex-start; gap: 18px; }
	.cfwb110__result-meta { flex: 1; }
	.cfwb110__result-photo { width: 76px; height: 76px; border-radius: 10px; }
	.cfwb110__change-bottle { margin-left: auto; white-space: nowrap; align-self: center; }
}

/* Adapter callout ------------------------------------------------------ */

.cfwb110__adapter-callout {
	display: flex;
	flex-direction: column;
	gap: 14px;
	padding: 18px;
	border: 2px solid var(--cfwb-accent);
	border-radius: 12px;
	background: var(--cfwb-accent-wash);
}

.cfwb110__adapter-main { display: flex; gap: 14px; align-items: flex-start; }

.cfwb110__adapter-photo {
	width: 56px;
	height: 56px;
	border-radius: 8px;
	flex: none;
	background: #fff;
	border: 1px solid var(--cfwb-line);
}

.cfwb110__adapter-copy { display: flex; flex-direction: column; gap: 5px; min-width: 0; }

.cfwb110__adapter-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cfwb-accent-ink);
}

.cfwb110__adapter-name { margin: 0; font-size: 19px; font-weight: 600; line-height: 1.25; }

.cfwb110__adapter-desc { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cfwb-ink); }

.cfwb110__adapter-actions { display: flex; flex-direction: column; gap: 10px; }

@media (min-width: 640px) {
	.cfwb110__adapter-photo { width: 88px; height: 88px; border-radius: 10px; }
	.cfwb110__adapter-callout { padding: 24px; flex-direction: row; align-items: flex-start; }
	.cfwb110__adapter-actions { flex: none; width: 220px; }
}

.cfwb110__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0 20px;
	border: none;
	border-radius: 10px;
	background: var(--cfwb-accent);
	color: #fff;
	font: inherit;
	font-size: 16px;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.cfwb110__btn--secondary {
	min-height: 48px;
	background: transparent;
	border: 1px solid var(--cfwb-accent);
	color: var(--cfwb-accent-ink);
	font-size: 15px;
}

/* Video + chapters ------------------------------------------------------ */

.cfwb110__video {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--cfwb-line);
	border-radius: 12px;
	background: var(--cfwb-surface);
	overflow: hidden;
}

.cfwb110__video-player,
.cfwb110__video-poster {
	aspect-ratio: 16 / 9;
	background: var(--cfwb-stripe);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	object-fit: cover;
}

.cfwb110__video-player--pending { padding: 0; }

.cfwb110__video-play {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--cfwb-ink);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
}

.cfwb110__video-duration {
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cfwb-ink-2);
}

.cfwb110__chapters { padding: 14px 16px 16px; display: flex; flex-direction: column; }

.cfwb110__chapters-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfwb-ink-3);
	padding-bottom: 8px;
}

/* !important throughout: this is a <button>, and some host themes ship a
   global button reset (background/padding/border-radius/white-space:nowrap)
   that outranks a plain class selector, which turns this into a fixed-width
   pill and clips the label instead of the plain list row it's meant to be. */
.cfwb110__chapter {
	display: flex !important;
	align-items: center !important;
	gap: 12px !important;
	min-height: 44px !important;
	height: auto !important;
	max-width: none !important;
	border: 0 !important;
	border-top: 1px solid var(--cfwb-line) !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit !important;
	font-size: 15px !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	color: var(--cfwb-ink) !important;
	text-align: left !important;
	white-space: normal !important;
	cursor: pointer;
	width: 100% !important;
	padding: 0 !important;
}

.cfwb110__chapter-time {
	font-variant-numeric: tabular-nums;
	font-size: 13px;
	font-weight: 600;
	color: var(--cfwb-ink-3);
	min-width: 38px;
	flex: none;
	white-space: nowrap;
}

.cfwb110__chapter-label {
	font-weight: 500;
	flex: 1 1 auto;
	min-width: 0;
	white-space: normal;
	overflow-wrap: break-word;
}

@media (min-width: 640px) {
	.cfwb110__video { flex-direction: row; }
	.cfwb110__video-player,
	.cfwb110__video-poster { width: auto; flex: 1; aspect-ratio: auto; min-height: 222px; }
	.cfwb110__chapters { border-left: 1px solid var(--cfwb-line); width: 244px; flex: none; }
}

/* Tools ------------------------------------------------------------ */

.cfwb110__tools {
	padding: 20px 22px;
	border: 1px solid var(--cfwb-line);
	border-radius: 12px;
	background: var(--cfwb-surface);
}

.cfwb110__tools h3 {
	margin: 0 0 10px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfwb-ink-3);
}

.cfwb110__tools ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
.cfwb110__tools li { font-size: 15px; line-height: 1.5; padding-left: 16px; position: relative; }
.cfwb110__tools li::before { content: "\00B7"; position: absolute; left: 2px; color: var(--cfwb-ink-faint); }

/* Steps ------------------------------------------------------------- */

.cfwb110__steps { list-style: none; margin: 0; padding: 0; }

.cfwb110__step-item {
	display: grid;
	grid-template-columns: 30px 1fr;
	gap: 12px;
	padding: 24px 0;
	border-top: 1px solid var(--cfwb-line);
	align-items: start;
}

.cfwb110__step-number {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--cfwb-ink);
	color: #fff;
	font-size: 14px;
	font-weight: 600;
}

.cfwb110__step-body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cfwb110__step-body h3 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.25; }
.cfwb110__step-body p { margin: 0; font-size: 15px; line-height: 1.6; color: var(--cfwb-ink-2); }

.cfwb110__watch-step {
	align-self: flex-start !important;
	width: auto !important;
	height: auto !important;
	min-height: 0 !important;
	max-width: none !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	box-shadow: none !important;
	font: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	white-space: normal !important;
	color: var(--cfwb-accent-ink) !important;
	cursor: pointer;
}

.cfwb110__note,
.cfwb110__caution {
	margin: 0;
	border-radius: 10px;
	padding: 13px 15px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 14px;
	line-height: 1.55;
}

.cfwb110__note { background: var(--cfwb-note-wash); color: var(--cfwb-ink); }
.cfwb110__note-label,
.cfwb110__caution-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	display: block;
	margin-bottom: 2px;
}
.cfwb110__note-label { color: var(--cfwb-ink-2); }

.cfwb110__caution { background: var(--cfwb-caution-wash); color: var(--cfwb-ink); border-left: 4px solid var(--cfwb-caution-line); font-weight: 500; }
.cfwb110__caution-label { color: var(--cfwb-caution-ink); }

.cfwb110__step-image {
	grid-column: 1 / -1;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	background: var(--cfwb-stripe);
}

@media (min-width: 640px) {
	.cfwb110__step-item { grid-template-columns: 30px 1fr 200px; gap: 16px; }
	.cfwb110__step-image { grid-column: 3; aspect-ratio: 4 / 3; }
}

/* Footer help --------------------------------------------------------- */

.cfwb110__footer-help {
	margin: 0;
	padding-top: 18px;
	border-top: 1px solid var(--cfwb-line);
	font-size: 15px;
	line-height: 1.6;
	color: var(--cfwb-ink-2);
}

.cfwb110__link-inline {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--cfwb-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* Incompatible alternatives --------------------------------------------- */

.cfwb110__incompatible-alts { display: flex; flex-direction: column; gap: 12px; }

.cfwb110__alts-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfwb-ink-3);
}

.cfwb110__alts-grid { display: flex; flex-direction: column; gap: 12px; }

@media (min-width: 640px) {
	.cfwb110__alts-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
}

.cfwb110__alt-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--cfwb-line);
	border-radius: 12px;
	background: var(--cfwb-surface);
}

.cfwb110__alt-card h4 { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.3; }
.cfwb110__alt-card p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--cfwb-ink-2); }

.cfwb110__alt-cta {
	margin-top: auto;
	font-size: 15px;
	font-weight: 600;
	min-height: 44px;
	display: flex;
	align-items: center;
}

/* Measure screen ------------------------------------------------------- */

.cfwb110__measure { display: flex; flex-direction: column; gap: 22px; }

.cfwb110__measure-diagram-block,
.cfwb110__measure-form,
.cfwb110__reference {
	border: 1px solid var(--cfwb-line);
	border-radius: 12px;
	background: var(--cfwb-surface);
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.cfwb110__measure-diagram {
	aspect-ratio: 16 / 10;
	border-radius: 10px;
	width: 100%;
	height: auto;
}

.cfwb110__measure-instructions { display: flex; flex-direction: column; gap: 12px; }

.cfwb110__measure-instruction { display: flex; gap: 12px; align-items: flex-start; }

.cfwb110__measure-instruction p { margin: 0; font-size: 15px; line-height: 1.55; }

.cfwb110__measure-instruction-n {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--cfwb-note-wash);
	border: 1px solid var(--cfwb-line-strong);
	font-size: 13px;
	font-weight: 600;
}

.cfwb110__measure-form-label { font-size: 15px; font-weight: 600; }

.cfwb110__measure-input-row { display: flex; gap: 10px; flex-wrap: wrap; }

.cfwb110__measure-input {
	flex: 1;
	min-width: 120px;
	min-height: var(--cfwb-tap);
	padding: 0 14px;
	border: 1px solid var(--cfwb-line-strong);
	border-radius: 10px;
	background: var(--cfwb-surface);
	font: inherit;
	font-size: 18px;
	color: var(--cfwb-ink);
}

.cfwb110__measure-input.is-invalid {
	border: 2px solid var(--cfwb-caution-line);
	background: var(--cfwb-caution-wash);
}

.cfwb110__unit-toggle {
	display: flex;
	border: 1px solid var(--cfwb-line-strong);
	border-radius: 10px;
	overflow: hidden;
	flex: none;
}

.cfwb110__unit-btn {
	min-height: var(--cfwb-tap);
	padding: 0 16px;
	border: none;
	background: var(--cfwb-surface);
	color: var(--cfwb-ink-2);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	cursor: pointer;
}

.cfwb110__unit-btn + .cfwb110__unit-btn { border-left: 1px solid var(--cfwb-line-strong); }

.cfwb110__unit-btn.is-active { background: var(--cfwb-accent); color: #fff; }

.cfwb110__measure-help {
	margin: 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--cfwb-ink-3);
}

.cfwb110__measure-error {
	display: flex;
	gap: 8px;
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--cfwb-caution-ink);
	font-weight: 500;
}

.cfwb110__measure-result {
	display: flex;
	flex-direction: column;
	gap: 10px;
	align-items: flex-start;
	padding-top: 6px;
}

.cfwb110__reference-title {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--cfwb-ink-2);
}

.cfwb110__reference { background: var(--cfwb-note-wash); }

.cfwb110__reference-row {
	display: flex;
	justify-content: space-between;
	gap: 14px;
	font-size: 15px;
	line-height: 1.5;
	border-top: 1px solid var(--cfwb-line);
	padding-top: 9px;
}

.cfwb110__reference-range { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cfwb110__reference-result { color: var(--cfwb-ink-2); text-align: right; }

@media (min-width: 640px) {
	.cfwb110__measure-diagram-block { flex-direction: row; align-items: flex-start; padding: 22px; }
	.cfwb110__measure-diagram { width: 260px; flex: none; }
}

/* Actions ----------------------------------------------------------- */

.cfwb110__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--cfwb-line);
}

.cfwb110__link {
	min-height: 48px;
	padding: 0 18px;
	border: 1px solid var(--cfwb-line-strong);
	border-radius: 10px;
	background: var(--cfwb-surface);
	font: inherit;
	font-size: 15px;
	font-weight: 500;
	color: var(--cfwb-ink);
	cursor: pointer;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}

.cfwb110__link[data-restart] {
	border-color: transparent;
	background: transparent;
	color: var(--cfwb-ink-2);
}

.cfwb110__link[data-missing] {
	margin-left: auto;
	border-color: transparent;
	background: transparent;
	font-weight: 600;
	color: var(--cfwb-accent-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 639px) {
	.cfwb110__actions { flex-direction: column; align-items: stretch; }
	.cfwb110__link { justify-content: center; }
	.cfwb110__link[data-missing] { margin-left: 0; }
}