/**
 * Help: the help lines in the flows and the parts of the help section and
 * the changelog that no component draws. See docs/help.md.
 *
 * A help line is one sentence in supporting text and one inline link
 * (links.css), where a question comes up: under the package cards, at the
 * foot of the listing form, under a listing's status in the account, under
 * Create account. Two classes on every rule: MyListing sets every p and a.
 */

.sba-help-line.sba-help-line {
	margin: 12px 0 0;
	color: var(--sba-slate);
	font-family: var(--sba-font-sans);
	font-size: 14px;
	line-height: 20px;
}

.sba-help-line.sba-help-line a {
	color: var(--sba-charcoal);
	font-weight: inherit;
	text-decoration: underline;
	text-decoration-color: hsl(var(--sba-red-hsl) / 0.5);
	text-underline-offset: 4px;
	transition: text-decoration-color var(--sba-duration-hover) ease;
}

.sba-help-line.sba-help-line a:hover,
.sba-help-line.sba-help-line a:focus {
	color: var(--sba-charcoal);
	text-decoration-color: var(--sba-red);
}

/* The package step: under the cards, centered in their width. */
.sba-help-line.sba-plans-help {
	max-width: 56rem;
	margin: 24px auto 0;
	padding: 0 16px;
	text-align: center;
}

/* The listing form's notice, before its first section: the component's
   dashed box (its rules want the .sba-c around it), as wide as the form's
   sections, MyListing's 700px column, full width below 768px. */
#submit-job-form .sba-help-form-notice {
	width: 700px;
	max-width: 100%;
	margin: 0 auto 30px;
}

@media (max-width: 767px) {
	#submit-job-form .sba-help-form-notice {
		width: 100%;
	}
}

/* The confirmation after submitting: under the buttons, centered. */
.sba-submitted .sba-help-line.sba-submitted-help {
	margin-top: 24px;
	text-align: center;
}

/* The account dashboard: under a listing's status, and under "Add
   something new". */
.sba-dash .sba-help-line.sba-dash-help {
	margin-top: 6px;
}

/* Create account: under the form, before "Already have an account?". */
.sba-auth .sba-help-line.sba-auth-help {
	margin: 16px 0 0;
}

/* The edit form's foot: under all its buttons, the full width. */
.listing-form-submit-btn .sba-help-block {
	flex-basis: 100%;
	order: 1;
	margin: 4px 0 0;
}

.listing-form-submit-btn .sba-help-block .sba-help-line {
	margin: 0;
}

/* ---- The changelog ---------------------------------------------------- */

.sba-changelog .sba-changelog-day {
	display: grid;
	gap: 12px;
	max-width: 48rem;
	padding: 32px 0;
	border-top: 1px solid var(--sba-border);
}

.sba-changelog .sba-changelog-day:first-child {
	padding-top: 0;
	border-top: 0;
}

.sba-changelog .sba-changelog-date.sba-changelog-date {
	margin: 0;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

.sba-changelog .sba-changelog-list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sba-changelog .sba-changelog-entry {
	display: grid;
	grid-template-columns: 7rem minmax(0, 1fr);
	gap: 16px;
	align-items: baseline;
}

.sba-changelog .sba-changelog-kind {
	justify-self: start;
	padding: 2px 10px;
	border: 1px solid var(--sba-border);
	border-radius: 9999px;
	color: var(--sba-slate);
	font-size: 12px;
	font-weight: 500;
	line-height: 18px;
}

.sba-changelog .sba-changelog-kind-new {
	border-color: hsl(var(--sba-red-hsl) / 0.4);
	color: var(--sba-red-dark);
}

.sba-changelog .sba-changelog-text.sba-changelog-text {
	margin: 0;
	color: var(--sba-charcoal);
	font-size: 16px;
	line-height: 1.625;
}

.sba-changelog .sba-changelog-text a {
	color: var(--sba-charcoal);
	text-decoration: underline;
	text-decoration-color: hsl(var(--sba-red-hsl) / 0.5);
	text-underline-offset: 4px;
}

@media (max-width: 639px) {
	.sba-changelog .sba-changelog-entry {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

/* ---- The company guide's picture examples ------------------------------
 * raskin_help_picture_examples(): per picture the legacy hint beside a
 * "Don't" and a "Do", each what was uploaded above the preview card it
 * makes. The mock card follows listing-cards.css: the card's media ratio
 * 32 / 21, the gradient from charcoal at 75%, the 44px white tile with the
 * picture contained, 24px from the edges, the name at 20px. */

.sba-c-help-examples .sba-help-example {
	display: grid;
	gap: 24px 48px;
	padding: 40px 0;
	scroll-margin-top: 24px;
}

.sba-c-help-examples .sba-help-example + .sba-help-example {
	border-top: 1px solid var(--sba-border);
}

.sba-c-help-examples .sba-help-example:first-of-type {
	padding-top: 8px;
}

.sba-c-help-examples .sba-help-example-title.sba-help-example-title {
	margin: 0 0 12px;
	color: var(--sba-charcoal);
	font-family: var(--sba-font-sans);
	font-size: 20px;
	font-weight: 700;
	line-height: 28px;
}

.sba-c-help-examples .sba-help-example-text p {
	margin: 0 0 12px;
	color: var(--sba-charcoal);
	font-size: 16px;
	line-height: 1.625;
}

.sba-c-help-examples .sba-help-example-text .sba-help-example-note {
	color: var(--sba-slate);
	font-size: 14px;
	line-height: 20px;
}

.sba-c-help-examples .sba-help-example-pair {
	display: grid;
	gap: 24px;
}

.sba-c-help-examples .sba-help-example-figure {
	display: grid;
	gap: 12px;
	align-content: start;
	margin: 0;
	padding: 20px;
	border: 1px solid var(--sba-border);
	border-radius: var(--sba-radius);
	background: var(--sba-surface);
}

.sba-c-help-examples .sba-help-verdict.sba-help-verdict {
	display: inline-flex;
	justify-self: start;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 2px 10px 2px 8px;
	border-radius: var(--sba-radius-sm);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
}

.sba-c-help-examples .is-dont .sba-help-verdict {
	background: var(--sba-red-light);
	color: var(--sba-red-dark);
}

.sba-c-help-examples .is-do .sba-help-verdict {
	background: var(--sba-muted);
	color: var(--sba-charcoal);
}

.sba-c-help-examples .sba-help-verdict .sba-i {
	font-size: 16px;
}

.sba-c-help-examples .sba-help-example-label {
	display: block;
	margin-bottom: 6px;
	color: var(--sba-slate);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
}

.sba-c-help-examples figcaption {
	color: var(--sba-charcoal);
	font-size: 14px;
	line-height: 20px;
}

/* What was uploaded: the square icon file on white inside a dashed
   outline, the 2:1 cover whole. */
.sba-c-help-examples .sba-help-upload-square {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	aspect-ratio: 1;
	padding: 8px;
	border: 1px dashed var(--sba-input);
	background: #fff;
}

.sba-c-help-examples .sba-help-upload-square img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.sba-c-help-examples .sba-help-upload {
	position: relative;
	container-type: inline-size;
	aspect-ratio: 2 / 1;
	overflow: hidden;
}

.sba-c-help-examples .sba-help-example-upload .sba-help-upload {
	width: 60%;
	border-radius: var(--sba-radius-sm);
}

.sba-c-help-examples .sba-help-upload img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* The slogan a company sets into its cover, across the picture's width. */
.sba-c-help-examples .sba-help-upload-text {
	position: absolute;
	top: 34%;
	left: 4%;
	right: 4%;
	color: #fff;
	font-family: var(--sba-font-sans);
	font-size: 6.4cqw;
	font-weight: 700;
	line-height: 1.15;
	text-align: center;
	text-shadow: 0 1px 6px rgb(0 0 0 / 0.5);
}

/* The mock card. */
.sba-c-help-examples .sba-help-card {
	position: relative;
	aspect-ratio: 32 / 21;
	overflow: hidden;
	border-radius: var(--sba-radius);
	background: var(--sba-charcoal);
}

.sba-c-help-examples .sba-help-card-cover {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

/* The upload at 2:1, as tall as the card and centered: the card cuts its
   sides, as the directory's background-size: cover does. */
.sba-c-help-examples .sba-help-card-cover .sba-help-upload {
	position: absolute;
	top: 0;
	left: 50%;
	height: 100%;
	transform: translateX(-50%);
}

.sba-c-help-examples .sba-help-card::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		to top,
		hsl(var(--sba-charcoal-hsl) / 0.75) 0%,
		hsl(var(--sba-charcoal-hsl) / 0.2) 50%,
		hsl(var(--sba-charcoal-hsl) / 0) 100%
	);
}

.sba-c-help-examples .sba-help-card-info {
	position: absolute;
	right: 24px;
	bottom: 16px;
	left: 24px;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
}

.sba-c-help-examples .sba-help-card-tile {
	flex: 0 0 44px;
	height: 44px;
	border: 4px solid var(--sba-surface);
	border-radius: var(--sba-radius-md);
	background-color: var(--sba-surface);
	background-origin: content-box;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

.sba-c-help-examples .sba-help-card-name {
	color: #fff;
	font-family: var(--sba-font-sans);
	font-size: 20px;
	font-weight: var(--sba-heading-weight);
	letter-spacing: var(--sba-heading-tracking);
	line-height: 1.375;
}

@media (min-width: 640px) {
	.sba-c-help-examples .sba-help-example-pair {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.sba-c-help-examples .sba-help-example {
		grid-template-columns: 4fr 8fr;
	}
}