/**
 * Canadian Solar Module Verification — public styles.
 *
 * Built to the reference portal's design: a white card over a full-bleed
 * photograph, brand red on the actions, and the answer in a bordered table
 * inside a modal.
 *
 * Improvements on the original, all of them things that bite on a phone:
 * the 550px card is fluid rather than fixed, the footer sits in the flow
 * instead of being position:fixed over the content, the modal scrolls
 * properly when the table is long, and everything focusable has a visible
 * focus ring.
 */

/* ==================================================================
   Tokens
   ================================================================== */

.csq {
	--csq-red: #CE0412;
	--csq-head: #4A4A4A;
	--csq-foot: #535353;

	--csq-ink: #000000;
	--csq-ink-2: #333333;
	--csq-muted: #4F4F4F;
	--csq-line: #D8D8D8;
	--csq-line-2: #ECECEC;
	--csq-card: #ffffff;

	--csq-r: 5px;
	--csq-shadow: 0 0 30px rgba(0, 0, 0, .5);

	--csq-serif: Georgia, "Times New Roman", Times, serif;
	--csq-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	/* Escape a block theme's narrow content measure. Twenty Twenty-Five
	   clamps post content to about 645px, which would crush the layout. */
	max-width: none;
	width: auto;
	margin: 0;

	font-family: var(--csq-sans);
	color: var(--csq-ink-2);
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

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

/* The base rule is wrapped in :where() so it carries no specificity. A plain
   `.csq p` beats `.csq-foot__note` on a <p>, which silently cancels the
   component's own margins — including `margin: 0 auto`, so centred text
   drifts left. */
.csq :where(p) {
	margin: 0 0 1em;
}

.csq :where(h1, h2, h3) {
	margin: 0;
	line-height: 1.2;
}

.csq-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Programmatic focus — the modal takes focus when it opens — must not paint
   a ring. Several themes style :focus globally, which put a black box around
   the close button every time a result appeared. Keyboard users still get a
   ring, in the brand colour. */
.csq :focus:not(:focus-visible) {
	outline: none;
}

.csq :focus-visible {
	outline: 3px solid var(--csq-red);
	outline-offset: 2px;
}

.csq-modal:focus {
	outline: none;
}

.csq-locked,
.csq-locked body {
	overflow: hidden;
}

/* ==================================================================
   Page shell
   ================================================================== */

.csq-page {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	min-height: 100svh;
}

/* The photograph sits behind everything, fixed, with a scrim so white text
   and the card's shadow both read against it. */
.csq-bg {
	position: fixed;
	inset: 0;
	z-index: 0;
	background-color: #1b1b1b;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}

.csq-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .45);
}

/* ==================================================================
   Header
   ================================================================== */

/* A flat slab of grey read as unfinished and, against the dark hero photo,
   had no edge at all — you could not tell where the bar stopped. Depth comes
   from a slight vertical gradient, and the brand rule along the bottom both
   separates it from the hero and puts the brand colour on every screen. */
.csq-head {
	position: relative;
	z-index: 3;
	background-color: var(--csq-head);
	background-image: linear-gradient(180deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 42%, rgba(0, 0, 0, .16) 100%);
	border-bottom: 3px solid var(--csq-red);
	box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
}

.csq-head__inner {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	min-height: 74px;
}

.csq-head__brand {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	padding: 10px 0;
	min-width: 0;
}

/* The logo was fixed at 260px and only capped at 62vw, so on a 390px phone it
   ran most of the way across the bar. It now scales with the viewport
   between a readable floor and the full desktop size. */
.csq-head__logo {
	display: block;
	width: clamp(150px, 38vw, 260px);
	height: auto;
}

/* Shown when no logo is set, or when the file fails to load. */
.csq-head__word {
	font-family: var(--csq-serif);
	font-size: clamp(19px, 5.2vw, 27px);
	font-weight: 700;
	letter-spacing: .01em;
	line-height: 1.15;
	color: var(--csq-head-ink, #ffffff);
	white-space: nowrap;
}

/* Fills the empty right half of a wide bar. Hidden once it would crowd the
   logo rather than being allowed to wrap into it. */
.csq-head__tag {
	flex: 0 1 auto;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--csq-head-dim, rgba(255, 255, 255, .72));
	white-space: nowrap;
	padding-left: 16px;
	border-left: 1px solid var(--csq-head-dim, rgba(255, 255, 255, .28));
	border-left-color: color-mix(in srgb, var(--csq-head-ink, #fff) 24%, transparent);
}

@media (max-width: 860px) {
	.csq-head__tag {
		display: none;
	}
}

/* ==================================================================
   The search card
   ================================================================== */

.csq-wrap {
	position: relative;
	z-index: 2;
	flex: 1 0 auto;
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 60px 20px;
}

.csq-card {
	width: 100%;
	max-width: 550px;
	background: var(--csq-card);
	border-radius: var(--csq-r);
	box-shadow: var(--csq-shadow);
	padding: 30px 55px;
}

.csq-card__title {
	font-family: var(--csq-serif);
	font-size: 38px;
	font-weight: 700;
	color: var(--csq-ink);
	padding-bottom: 10px;
	margin-bottom: 22px;
	border-bottom: 3px solid var(--csq-ink);
}

.csq-field {
	margin-bottom: 20px;
}

.csq-field__label {
	display: block;
	font-size: 20px;
	color: var(--csq-ink);
	margin-bottom: 6px;
}

.csq-field__label label {
	cursor: pointer;
}

.csq-field input[type="text"] {
	display: block;
	width: 100%;
	padding: 10px;
	font-size: 16px;
	font-family: inherit;
	color: var(--csq-ink);
	background: #fff;
	border: 1px solid var(--csq-line);
	border-radius: var(--csq-r);
	/* Some themes force content-box on specific input types, which makes a
	   100%-wide field render wider than its column and clip. */
	box-sizing: border-box;
	min-width: 0;
}

.csq-field input[type="text"]:focus {
	border-color: var(--csq-red);
	outline: none;
	box-shadow: 0 0 0 3px rgba(206, 4, 18, .12);
}

#csq-serial {
	letter-spacing: .04em;
}

/* Where the serial is printed. */
.csq-plate {
	margin: 0 0 22px;
}

.csq-plate img {
	display: block;
	width: 300px;
	max-width: 100%;
	height: auto;
	border-radius: 4px;
}

.csq-plate span {
	display: block;
	font-size: 15px;
	line-height: 1.45;
	color: var(--csq-muted);
	margin: 8px 0 0;
}

/* ==================================================================
   Verification code
   ================================================================== */

.csq-code__row {
	display: flex;
	align-items: stretch;
	gap: 14px;
}

.csq-code__row input {
	flex: 1 1 auto;
	min-width: 0;
	letter-spacing: .3em;
	font-size: 18px;
}

.csq-code__img {
	flex: 0 0 auto;
	padding: 0;
	border: 1px solid var(--csq-line);
	border-radius: var(--csq-r);
	background: #fafafa;
	cursor: pointer;
	overflow: hidden;
	line-height: 0;
}

.csq-code__img img {
	display: block;
	width: 140px;
	height: 44px;
	object-fit: cover;
}

.csq-code__fallback {
	margin: 8px 0 0;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: .3em;
	color: var(--csq-red);
}

/* ==================================================================
   Scanning
   ================================================================== */

.csq-scan {
	margin: 0 0 22px;
}

.csq-scan__toggle {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	width: 100%;
	justify-content: center;
	padding: 11px 14px;
	font-family: inherit;
	font-size: 16px;
	font-weight: 600;
	color: var(--csq-ink-2);
	background: #fff;
	border: 1px solid var(--csq-line);
	border-radius: var(--csq-r);
	cursor: pointer;
}

.csq-scan__toggle:hover {
	border-color: var(--csq-red);
	color: var(--csq-red);
}

.csq-scan__toggle svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.csq-scan__toggle.is-active {
	border-color: var(--csq-red);
	color: var(--csq-red);
}

.csq-scan__stage {
	margin-top: 12px;
	border: 1px solid var(--csq-line);
	border-radius: var(--csq-r);
	overflow: hidden;
	background: #000;
}

#csq-reader {
	width: 100%;
}

#csq-reader video {
	display: block;
	width: 100% !important;
	height: auto !important;
}

.csq-scan__error {
	margin: 10px 0 0;
	font-size: 14px;
	color: var(--csq-red);
}

.csq-scan__alt {
	margin: 12px 0 0;
	font-size: 14px;
	text-align: center;
}

.csq-scan__alt label {
	color: var(--csq-ink-2);
	text-decoration: underline;
	cursor: pointer;
}

.csq-scan__alt label:hover {
	color: var(--csq-red);
}

.csq-scan__alt input[type="file"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* ==================================================================
   Submit
   ================================================================== */

.csq-submit button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: 12px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 800;
	color: #fff;
	background: var(--csq-red);
	border: 0;
	border-radius: var(--csq-r);
	cursor: pointer;
}

.csq-submit button:hover {
	filter: brightness(1.08);
}

.csq-submit button[disabled] {
	opacity: .72;
	cursor: default;
	filter: none;
}

.csq-spinner {
	width: 17px;
	height: 17px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	animation: csq-spin .7s linear infinite;
}

@keyframes csq-spin {
	to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
	.csq-spinner { animation-duration: 3s; }
}

/* ==================================================================
   Result modal
   ================================================================== */

.csq-overlay {
	position: fixed;
	inset: 0;
	z-index: 998;
	background: rgba(0, 0, 0, .7);
}

.csq-modal {
	position: fixed;
	z-index: 999;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: calc(100% - 32px);
	max-width: 550px;
	max-height: 90vh;
	max-height: 90svh;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: var(--csq-shadow);
}

.csq-modal[hidden] {
	display: none;
}

.csq-modal__bar {
	flex: 0 0 auto;
	display: flex;
	justify-content: flex-end;
	background: var(--csq-red);
	padding: 10px 20px;
}

.csq-modal__x {
	padding: 2px;
	background: transparent;
	border: 0;
	cursor: pointer;
	line-height: 0;
}

.csq-modal__x svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: #fff;
	stroke-width: 2.5;
	stroke-linecap: round;
}

.csq-modal__body {
	flex: 1 1 auto;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
	padding: 0 0 24px;
}

.csq-modal__title {
	font-family: var(--csq-serif);
	font-size: 34px;
	font-weight: 800;
	color: var(--csq-red);
	text-align: center;
	padding: 28px 20px 20px;
}

.csq-modal__title--small {
	font-size: 26px;
	padding-bottom: 8px;
}

.csq-modal__msg {
	margin: 0;
	padding: 8px 32px 20px;
	font-size: 19px;
	line-height: 1.5;
	text-align: center;
	color: var(--csq-ink);
}

/* The two-column table. Borders on the container plus bottom/right on each
   cell is what gives the reference its even single-pixel grid. */
.csq-table {
	width: 80%;
	margin: 0 auto;
	border-collapse: collapse;
	border-left: 1px solid var(--csq-line);
	border-top: 1px solid var(--csq-line);
	table-layout: fixed;
}

.csq-table th,
.csq-table td {
	padding: 10px;
	border-bottom: 1px solid var(--csq-line);
	border-right: 1px solid var(--csq-line);
	font-size: 17px;
	line-height: 1.4;
	color: var(--csq-ink);
	text-align: center;
	vertical-align: middle;
	word-break: break-word;
}

.csq-table th {
	width: 44%;
	font-weight: 400;
	background: #fcfcfc;
}

.csq-table td {
	font-weight: 600;
}

.csq-modal__note {
	margin: 0;
	padding: 12px 24px 0;
	font-size: 14px;
	line-height: 1.45;
	text-align: center;
	color: var(--csq-red);
}

.csq-shots {
	padding: 20px 24px 0;
}

.csq-shots__h {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--csq-muted);
	text-align: center;
}

.csq-shots__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
	gap: 8px;
}

.csq-shots__item img {
	display: block;
	width: 100%;
	height: 90px;
	object-fit: cover;
	border: 1px solid var(--csq-line);
	border-radius: 4px;
}

/* ==================================================================
   Footer
   ================================================================== */

.csq-foot {
	position: relative;
	z-index: 2;
	flex: 0 0 auto;
	background: var(--csq-foot);
	padding: 16px 20px;
}

.csq-foot__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.csq-foot__attr {
	margin: 0;
	font-size: 14px;
	font-weight: 700;
	color: var(--csq-foot-ink, #fff);
}

.csq-foot__note {
	margin: 5px auto 0;
	max-width: 680px;
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--csq-foot-dim, rgba(255, 255, 255, .72));
}

.csq-foot__contact {
	margin: 7px 0 0;
	font-size: 13px;
	color: var(--csq-foot-dim, rgba(255, 255, 255, .72));
}

.csq-foot__contact a {
	color: var(--csq-foot-ink, #fff);
	text-decoration: none;
}

.csq-foot__contact a:hover {
	text-decoration: underline;
}

/* ==================================================================
   Narrow screens
   ================================================================== */

@media (max-width: 640px) {
	.csq-wrap {
		padding: 28px 14px 40px;
	}

	.csq-card {
		padding: 24px 20px;
	}

	.csq-card__title {
		font-size: 28px;
		margin-bottom: 18px;
	}

	.csq-field__label {
		font-size: 17px;
	}

	.csq-head__inner {
		min-height: 58px;
		padding: 0 14px;
	}

	.csq-head__brand {
		padding: 8px 0;
	}

	.csq-modal__title {
		font-size: 26px;
		padding: 22px 16px 16px;
	}

	.csq-modal__title--small {
		font-size: 21px;
	}

	.csq-modal__msg {
		font-size: 17px;
		padding: 6px 20px 18px;
	}

	/* The reference keeps the table at 80% on a phone, which leaves long
	   values like an importer's name wrapping to four lines. */
	.csq-table {
		width: calc(100% - 28px);
	}

	.csq-table th,
	.csq-table td {
		font-size: 14.5px;
		padding: 9px 7px;
	}

	.csq-table th {
		width: 42%;
	}

	.csq-submit button {
		font-size: 18px;
	}

	.csq-code__img img {
		width: 118px;
	}
}

@media (max-width: 380px) {
	.csq-code__row {
		gap: 10px;
	}

	.csq-code__img img {
		width: 100px;
	}
}

/* ==================================================================
   Operator portal
   ================================================================== */

.csq-hidden {
	display: none !important;
}

.csq-page--work {
	background: #f4f5f7;
}

.csq-card--login {
	max-width: 480px;
}

.csq-login__lead {
	margin: -8px 0 20px;
	font-size: 14.5px;
	line-height: 1.5;
	color: var(--csq-muted);
}

.csq-work {
	position: relative;
	z-index: 2;
	flex: 1 0 auto;
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
	padding: 28px 20px 56px;
}

.csq-work__head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}

.csq-work__head h1 {
	font-family: var(--csq-serif);
	font-size: 28px;
	color: var(--csq-ink);
}

.csq-work__head p {
	margin: 4px 0 0;
	font-size: 14px;
	color: var(--csq-muted);
}

.csq-work__out {
	font-size: 14px;
	font-weight: 600;
	color: var(--csq-red);
	text-decoration: none;
	border: 1px solid var(--csq-line);
	background: #fff;
	border-radius: var(--csq-r);
	padding: 8px 14px;
}

.csq-work__out:hover {
	border-color: var(--csq-red);
}

/* Tabs */

.csq-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: 18px;
	border-bottom: 2px solid var(--csq-line);
}

.csq-tab {
	padding: 10px 16px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 600;
	color: var(--csq-muted);
	background: transparent;
	border: 0;
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
	cursor: pointer;
}

.csq-tab:hover {
	color: var(--csq-ink);
}

.csq-tab.is-on {
	color: var(--csq-red);
	border-bottom-color: var(--csq-red);
}

/* Steps */

.csq-sheet {
	display: block;
}

.csq-step {
	background: #fff;
	border: 1px solid var(--csq-line);
	border-radius: 8px;
	margin-bottom: 16px;
	overflow: hidden;
}

.csq-step__head {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 16px 18px;
	border-bottom: 1px solid var(--csq-line-2);
	background: #fcfcfd;
}

.csq-step__n {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--csq-red);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
}

.csq-step__head h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--csq-ink);
}

.csq-step__head p {
	margin: 4px 0 0;
	font-size: 14px;
	line-height: 1.5;
	color: var(--csq-muted);
}

.csq-step__body {
	padding: 18px;
}

/* Fields */

.csq-grid2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 14px 16px;
}

.csq-fld {
	min-width: 0;
}

.csq-fld label {
	display: block;
	font-size: 14px;
	font-weight: 600;
	color: var(--csq-ink-2);
	margin-bottom: 5px;
}

.csq-req {
	color: var(--csq-red);
	margin-left: 2px;
}

.csq-fld input,
.csq-fld select,
.csq-fld textarea,
.csq-find__row input {
	display: block;
	width: 100%;
	padding: 9px 10px;
	font-family: inherit;
	font-size: 15px;
	color: var(--csq-ink);
	background: #fff;
	border: 1px solid var(--csq-line);
	border-radius: var(--csq-r);
	/* Several themes force content-box on date and number inputs
	   specifically, which renders them wider than their column and clips
	   them inside a collapsed section. */
	box-sizing: border-box;
	min-width: 0;
}

.csq-fld textarea {
	resize: vertical;
}

.csq-fld input:focus,
.csq-fld select:focus,
.csq-fld textarea:focus,
.csq-find__row input:focus {
	border-color: var(--csq-red);
	outline: none;
	box-shadow: 0 0 0 3px rgba(206, 4, 18, .12);
}

.csq-fld__hint {
	margin: 5px 0 0;
	font-size: 12.5px;
	line-height: 1.45;
	color: var(--csq-muted);
}

/* Photo drop zone */

.csq-drop {
	display: grid;
	place-items: center;
	gap: 3px;
	padding: 26px 16px;
	text-align: center;
	border: 2px dashed var(--csq-line);
	border-radius: 8px;
	background: #fcfcfd;
	cursor: pointer;
}

.csq-drop:hover {
	border-color: var(--csq-red);
	background: #fff7f7;
}

.csq-drop svg {
	width: 26px;
	height: 26px;
	fill: none;
	stroke: var(--csq-red);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.csq-drop strong {
	font-size: 15px;
	color: var(--csq-ink);
}

.csq-drop span {
	font-size: 13px;
	color: var(--csq-muted);
}

#csq-images,
#csq-sheet {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

.csq-thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 12px;
}

.csq-thumb {
	position: relative;
	width: 78px;
	height: 78px;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--csq-line);
}

.csq-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.csq-thumb__x {
	position: absolute;
	top: 2px;
	right: 2px;
	width: 20px;
	height: 20px;
	border: 0;
	border-radius: 50%;
	background: rgba(0, 0, 0, .62);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
}

/* Collapsed groups */

.csq-acc {
	border: 1px solid var(--csq-line);
	border-radius: 7px;
	margin-bottom: 10px;
	background: #fff;
}

.csq-acc > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
	font-size: 15px;
	font-weight: 600;
	color: var(--csq-ink-2);
	cursor: pointer;
	list-style: none;
}

.csq-acc > summary::-webkit-details-marker {
	display: none;
}

.csq-acc__opt {
	font-size: 12px;
	font-weight: 500;
	color: var(--csq-muted);
	border: 1px solid var(--csq-line);
	border-radius: 20px;
	padding: 2px 9px;
}

.csq-acc[open] > summary {
	border-bottom: 1px solid var(--csq-line-2);
}

.csq-acc > .csq-grid2 {
	padding: 14px;
}

/* Checkbox rows */

.csq-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin-top: 14px;
	font-size: 14px;
	line-height: 1.45;
	color: var(--csq-ink-2);
	cursor: pointer;
}

.csq-check input {
	margin-top: 2px;
	flex: 0 0 auto;
	accent-color: var(--csq-red);
}

/* Buttons */

.csq-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 10px 18px;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	border-radius: var(--csq-r);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
}

.csq-btn--primary {
	background: var(--csq-red);
	color: #fff;
}

.csq-btn--primary:hover {
	filter: brightness(1.08);
}

.csq-btn--ghost {
	background: #fff;
	color: var(--csq-ink-2);
	border-color: var(--csq-line);
}

.csq-btn--ghost:hover {
	border-color: var(--csq-red);
	color: var(--csq-red);
}

.csq-btn--lg {
	padding: 13px 26px;
	font-size: 17px;
}

.csq-btn--sm {
	padding: 7px 12px;
	font-size: 13.5px;
}

.csq-btn[disabled] {
	opacity: .7;
	cursor: default;
	filter: none;
}

.csq-rec__del:hover {
	border-color: var(--csq-red);
	color: var(--csq-red);
}

.csq-sheet__foot {
	display: flex;
	justify-content: flex-end;
	padding-top: 4px;
}

/* Notices */

.csq-notice {
	padding: 11px 14px;
	border-radius: 7px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid;
	margin-bottom: 12px;
}

.csq-notice ul {
	margin: 8px 0 0;
	padding-left: 18px;
}

.csq-notice code {
	font-size: 13px;
	word-break: break-all;
}

.csq-notice--info {
	background: #f3f6fb;
	border-color: #d8e0ee;
	color: #30425c;
}

.csq-notice--ok {
	background: #eff9f1;
	border-color: #c8e7d0;
	color: #1d6b33;
}

.csq-notice--err {
	background: #fdf1f1;
	border-color: #f3cfcf;
	color: #96241f;
}

/* Saved confirmation */

.csq-saved {
	background: #eff9f1;
	border: 1px solid #c8e7d0;
	border-radius: 8px;
	padding: 16px 18px;
	margin-bottom: 16px;
}

.csq-saved__msg {
	margin: 0 0 10px;
	font-size: 16px;
	font-weight: 700;
	color: #1d6b33;
}

.csq-saved__row {
	display: flex;
	flex-wrap: wrap;
	gap: 18px;
	align-items: center;
}

.csq-saved__k {
	display: block;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--csq-muted);
}

.csq-saved__v {
	display: block;
	font-size: 16px;
	font-weight: 700;
	color: var(--csq-ink);
	word-break: break-all;
}

.csq-saved__thumb img {
	width: 56px;
	height: 56px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--csq-line);
	display: block;
}

.csq-saved__acts {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
	margin-top: 14px;
}

/* Editing bar */

.csq-editbar {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	justify-content: space-between;
	background: #fff8e6;
	border: 1px solid #f0dca8;
	border-radius: 8px;
	padding: 11px 15px;
	margin-bottom: 14px;
	font-size: 14.5px;
	color: #6b5312;
}

/* Import progress */

.csq-progress {
	margin: 4px 0 14px;
}

.csq-progress__bar {
	height: 9px;
	border-radius: 20px;
	background: var(--csq-line-2);
	overflow: hidden;
}

.csq-progress__bar span {
	display: block;
	height: 100%;
	width: 0;
	background: var(--csq-red);
	transition: width .2s ease;
}

.csq-progress__status {
	margin: 7px 0 0;
	font-size: 13.5px;
	color: var(--csq-muted);
}

/* Find and edit */

.csq-find {
	margin-bottom: 14px;
}

.csq-find__row {
	display: flex;
	gap: 9px;
}

.csq-find__row input {
	flex: 1 1 auto;
}

.csq-find__hint {
	margin: 7px 0 0;
	font-size: 13px;
	color: var(--csq-muted);
}

.csq-rec {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	background: #fff;
	border: 1px solid var(--csq-line);
	border-radius: 8px;
	padding: 12px 14px;
	margin-bottom: 9px;
}

.csq-rec__main {
	display: flex;
	gap: 12px;
	align-items: center;
	min-width: 0;
	flex: 1 1 260px;
}

.csq-rec__thumb {
	width: 48px;
	height: 48px;
	object-fit: cover;
	border-radius: 6px;
	border: 1px solid var(--csq-line);
	flex: 0 0 auto;
}

.csq-rec__text {
	min-width: 0;
}

.csq-rec__serial {
	display: block;
	font-size: 15.5px;
	font-weight: 700;
	color: var(--csq-ink);
	word-break: break-all;
}

.csq-rec__sub {
	display: block;
	font-size: 13px;
	color: var(--csq-muted);
}

.csq-rec__code {
	display: block;
	font-size: 12.5px;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	color: var(--csq-red);
	word-break: break-all;
}

.csq-rec__acts {
	display: flex;
	gap: 7px;
	flex: 0 0 auto;
}

@media (max-width: 640px) {
	.csq-work {
		padding: 20px 14px 40px;
	}

	.csq-work__head h1 {
		font-size: 22px;
	}

	.csq-step__body {
		padding: 14px;
	}

	.csq-sheet__foot .csq-btn {
		width: 100%;
	}

	.csq-rec__acts {
		width: 100%;
	}

	.csq-rec__acts .csq-btn {
		flex: 1 1 auto;
	}
}

/* ==================================================================
   Landing page
   ================================================================== */

.csq-page--home {
	background: #ffffff;
}

/* The photograph is confined to the hero here, rather than sitting behind
   the whole page as it does on the check screen. */
.csq-bg--home {
	position: absolute;
	inset: 0 0 auto 0;
	height: 560px;
}

.csq-bg--home::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, .62) 0%, rgba(0, 0, 0, .72) 100%);
}

.csq-hero {
	position: relative;
	z-index: 2;
	padding: 72px 20px 84px;
	color: #fff;
}

.csq-hero__inner {
	max-width: 760px;
	margin: 0 auto;
	text-align: center;
}

.csq-hero__eyebrow {
	display: inline-block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	background: var(--csq-red);
	border-radius: 20px;
	padding: 5px 14px;
	margin-bottom: 18px;
}

.csq-hero h1 {
	font-family: var(--csq-serif);
	font-size: 46px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}

.csq-hero__lead {
	max-width: 620px;
	margin: 16px auto 0;
	font-size: 18px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .88);
}

.csq-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
	margin-top: 28px;
}

.csq-hero__cta svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* A ghost button needs a different treatment over a photograph than it does
   on white, or it disappears. */
.csq-btn--onhero {
	background: rgba(255, 255, 255, .1);
	color: #fff;
	border-color: rgba(255, 255, 255, .55);
	backdrop-filter: blur(2px);
}

.csq-btn--onhero:hover {
	background: #fff;
	color: var(--csq-ink);
	border-color: #fff;
}

.csq-hero__note {
	margin: 16px 0 0;
	font-size: 13.5px;
	color: rgba(255, 255, 255, .7);
}

/* Sections */

.csq-sec {
	position: relative;
	z-index: 2;
	padding: 60px 20px;
	background: #fff;
}

.csq-sec--tint {
	background: #f5f6f8;
}

.csq-sec__inner {
	max-width: 1080px;
	margin: 0 auto;
}

.csq-sec__h {
	font-family: var(--csq-serif);
	font-size: 30px;
	color: var(--csq-ink);
	text-align: center;
	margin: 0 0 32px;
}

.csq-sec__cta {
	margin-top: 34px;
	text-align: center;
}

.csq-split {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 36px;
	align-items: center;
}

.csq-split--rev .csq-split__art {
	order: 2;
}

.csq-split__art img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
}

.csq-split__art--photo img {
	height: 320px;
	object-fit: cover;
	border: 1px solid var(--csq-line);
}

.csq-split__text h2 {
	font-family: var(--csq-serif);
	font-size: 28px;
	color: var(--csq-ink);
	margin: 0 0 14px;
}

.csq-split__text p {
	font-size: 16px;
	line-height: 1.65;
	color: var(--csq-ink-2);
}

.csq-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
}

.csq-list li {
	position: relative;
	padding: 0 0 0 26px;
	margin-bottom: 13px;
	font-size: 15.5px;
	line-height: 1.6;
	color: var(--csq-ink-2);
}

.csq-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 8px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--csq-red);
}

.csq-list strong {
	display: block;
	color: var(--csq-ink);
}

/* How it works */

.csq-steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 18px;
}

.csq-stepcard {
	background: #fff;
	border: 1px solid var(--csq-line);
	border-top: 3px solid var(--csq-red);
	border-radius: 8px;
	padding: 22px 20px;
}

.csq-stepcard__n {
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--csq-red);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	margin-bottom: 12px;
}

.csq-stepcard h3 {
	font-size: 17px;
	font-weight: 700;
	color: var(--csq-ink);
	margin: 0 0 6px;
}

.csq-stepcard p {
	margin: 0;
	font-size: 15px;
	line-height: 1.6;
	color: var(--csq-muted);
}

/* Help strip */

.csq-help {
	position: relative;
	z-index: 2;
	background: var(--csq-ink);
	color: #fff;
	padding: 46px 20px;
	text-align: center;
}

.csq-help h2 {
	font-family: var(--csq-serif);
	font-size: 26px;
	color: #fff;
	margin: 0 0 10px;
}

.csq-help p {
	max-width: 620px;
	margin: 0 auto;
	font-size: 15.5px;
	line-height: 1.6;
	color: rgba(255, 255, 255, .78);
}

.csq-help__contact {
	margin-top: 16px !important;
	font-size: 17px;
	font-weight: 700;
}

.csq-help__contact a {
	color: #fff;
	text-decoration: none;
	border-bottom: 2px solid var(--csq-red);
}

@media (max-width: 640px) {
	.csq-hero {
		padding: 44px 16px 56px;
	}

	.csq-hero h1 {
		font-size: 30px;
	}

	.csq-hero__lead {
		font-size: 16px;
	}

	.csq-hero__cta .csq-btn {
		width: 100%;
	}

	.csq-bg--home {
		height: 460px;
	}

	.csq-sec {
		padding: 40px 16px;
	}

	.csq-sec__h,
	.csq-split__text h2 {
		font-size: 23px;
	}

	/* Reversed order is a desktop nicety; on a phone the picture always
	   belongs above the words it illustrates. */
	.csq-split--rev .csq-split__art {
		order: 0;
	}

	.csq-split__art--photo img {
		height: 220px;
	}
}

/* Portal: the Recent tab's summary tiles */

.csq-tiles {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 12px;
	margin-bottom: 18px;
}

.csq-tile {
	background: #fff;
	border: 1px solid var(--csq-line);
	border-left: 4px solid var(--csq-red);
	border-radius: 8px;
	padding: 14px 16px;
	font-size: 13px;
	color: var(--csq-muted);
}

.csq-tile span {
	display: block;
	font-size: 26px;
	font-weight: 700;
	line-height: 1.1;
	color: var(--csq-ink);
	margin-bottom: 2px;
}