/**
 * components.css — the pieces that appear across several template types.
 *
 * Ads, the newsletter block, reactions, share, comments, the account forms and
 * the "More like this" rail. Kept in one file because a page that has any of
 * them usually has two or three, and five separate requests to save a few bytes
 * is a bad trade.
 *
 * Everything reads from tokens.css. No colour is written literally here.
 */

/* =====================================================================
   Buttons and fields — shared by the account pages and the newsletter
   ================================================================== */

.ils-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.7em 1.4em;
	border: 1px solid var(--ils-rule-strong);
	background: var(--ils-white);
	color: var(--ils-fg);
	font-family: inherit;
	font-size: var(--ils-fs-base);
	font-weight: 700;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: background var(--ils-transition), border-color var(--ils-transition), color var(--ils-transition);
}

.ils-btn:hover {
	border-color: var(--ils-fg);
	color: var(--ils-fg);
}

.ils-btn--primary {
	border-color: var(--ils-red);
	background: var(--ils-red);
	color: var(--ils-white);
}

.ils-btn--primary:hover {
	border-color: var(--ils-red-dark);
	background: var(--ils-red-dark);
	color: var(--ils-white);
}

.ils-btn--quiet {
	border-color: transparent;
	color: var(--ils-fg-muted);
}

.ils-field {
	margin: 0 0 var(--ils-sp-4);
}

.ils-field__label {
	display: block;
	margin-bottom: var(--ils-sp-1);
	font-size: var(--ils-fs-sm);
	font-weight: 700;
}

.ils-field__optional {
	color: var(--ils-fg-muted);
	font-weight: 400;
}

.ils-field__input {
	width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid var(--ils-rule-strong);
	background: var(--ils-white);
	color: var(--ils-fg);
	font-family: inherit;
	font-size: var(--ils-fs-base);
}

.ils-field__input:focus {
	border-color: var(--ils-red);
	outline: var(--ils-focus-ring);
	outline-offset: var(--ils-focus-offset);
}

.ils-field__help {
	display: block;
	margin-top: var(--ils-sp-1);
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

.ils-field--check {
	display: flex;
	gap: var(--ils-sp-2);
	align-items: baseline;
	font-size: var(--ils-fs-sm);
}

/*
 * Honeypot. Visually removed without display:none, because some form-fillers
 * deliberately skip display:none fields — which would defeat the trap.
 */
.ils-hp {
	position: absolute !important;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* =====================================================================
   Ads
   ================================================================== */

.ils-ad {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: var(--ils-sp-5) auto;
	padding: var(--ils-sp-2) 0;
	text-align: center;
}

/*
 * The "Advertisement" label is a disclosure requirement, not decoration — it is
 * always present, always above the creative, and never styled to disappear.
 */
.ils-ad__label {
	margin-bottom: var(--ils-sp-2);
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ils-ad__link {
	display: block;
	max-width: 100%;
}

.ils-ad__img {
	display: block;
	width: auto;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
}

.ils-ad--leaderboard {
	max-width: var(--ils-max-width);
	padding: var(--ils-sp-3) var(--ils-gutter);
	border-bottom: var(--ils-border-hairline);
}

.ils-ad--in-article,
.ils-ad--sidebar {
	padding: var(--ils-sp-3);
	background: var(--ils-surface);
}

.ils-ad--sidebar {
	margin-top: var(--ils-sp-5);
}

/* =====================================================================
   Newsletter
   ================================================================== */

.ils-newsletter {
	margin: var(--ils-sp-6) 0;
	padding: var(--ils-sp-5);
	border: 1px solid var(--ils-rule);
	border-top: var(--ils-accent-line);
	background: var(--ils-bg);
}

.ils-newsletter__heading {
	margin: 0 0 var(--ils-sp-2);
	font-size: var(--ils-fs-lg);
	line-height: var(--ils-lh-tight);
}

.ils-newsletter__blurb {
	margin: 0 0 var(--ils-sp-4);
	color: var(--ils-gray-700);
	font-size: var(--ils-fs-sm);
	line-height: var(--ils-lh-normal);
}

.ils-newsletter__row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ils-sp-2);
}

.ils-newsletter__input {
	flex: 1 1 14rem;
	min-width: 0;
	padding: 0.75em 0.8em;
	border: 1px solid var(--ils-rule-strong);
	background: var(--ils-white);
	font-family: inherit;
	font-size: var(--ils-fs-base);
}

.ils-newsletter__input:focus {
	border-color: var(--ils-red);
	outline: var(--ils-focus-ring);
	outline-offset: var(--ils-focus-offset);
}

.ils-newsletter__submit {
	flex: 0 0 auto;
	padding: 0.75em 1.5em;
	border: 0;
	background: var(--ils-red);
	color: var(--ils-white);
	font-family: inherit;
	font-size: var(--ils-fs-base);
	font-weight: 700;
	cursor: pointer;
	transition: background var(--ils-transition);
}

.ils-newsletter__submit:hover {
	background: var(--ils-red-dark);
}

.ils-newsletter__small {
	margin: var(--ils-sp-3) 0 0;
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
	line-height: var(--ils-lh-normal);
}

.ils-newsletter__message {
	margin: 0 0 var(--ils-sp-3);
	padding: var(--ils-sp-2) var(--ils-sp-3);
	border-left: 3px solid var(--ils-up);
	background: var(--ils-white);
	font-size: var(--ils-fs-sm);
}

.ils-newsletter__message--error {
	border-left-color: var(--ils-red);
}

.ils-newsletter--compact {
	padding: var(--ils-sp-4);
}

.ils-newsletter--compact .ils-newsletter__heading {
	font-size: var(--ils-fs-base);
}

.ils-newsletter--compact .ils-newsletter__row {
	flex-direction: column;
}

/* =====================================================================
   Share
   ================================================================== */

.ils-share-bar {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ils-sp-2);
	align-items: center;
}

.ils-share-bar__label {
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ils-share {
	display: inline-flex;
	gap: var(--ils-sp-2);
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid var(--ils-rule);
	background: var(--ils-white);
	color: var(--ils-fg);
	cursor: pointer;
	transition: border-color var(--ils-transition), color var(--ils-transition);
}

.ils-share:hover {
	border-color: var(--ils-red);
	color: var(--ils-red);
}

.ils-icon {
	width: 18px;
	height: 18px;
	fill: currentColor;
}

/* Compact row in the byline: icons only. */
.ils-share-bar--meta .ils-share {
	width: 34px;
	height: 34px;
	border-radius: 50%;
}

.ils-share-bar--meta .ils-share__text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* Labelled row under the article. */
.ils-share-bar--footer {
	margin: var(--ils-sp-6) 0 var(--ils-sp-4);
	padding: var(--ils-sp-4) 0;
	border-top: var(--ils-border-hairline);
	border-bottom: var(--ils-border-hairline);
}

.ils-share-bar--footer .ils-share {
	padding: 0.55em 0.9em;
	font-size: var(--ils-fs-sm);
	font-weight: 700;
}

.ils-share.is-copied {
	border-color: var(--ils-up);
	color: var(--ils-up);
}

.ils-share-bar__status {
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

/* =====================================================================
   Reactions
   ================================================================== */

.ils-reactions {
	margin: var(--ils-sp-6) 0;
	padding: var(--ils-sp-5) 0;
	border-top: var(--ils-border-hairline);
}

.ils-reactions__heading {
	margin: 0 0 var(--ils-sp-4);
	font-size: var(--ils-fs-base);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ils-reactions__list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--ils-sp-2);
	margin: 0;
	padding: 0;
	list-style: none;
}

.ils-reactions__btn {
	display: inline-flex;
	gap: var(--ils-sp-2);
	align-items: center;
	padding: 0.5em 0.9em;
	border: 1px solid var(--ils-rule-strong);
	border-radius: 2em;
	background: var(--ils-white);
	color: var(--ils-fg);
	font-family: inherit;
	font-size: var(--ils-fs-sm);
	cursor: pointer;
	transition: border-color var(--ils-transition), background var(--ils-transition);
}

.ils-reactions__btn:hover {
	border-color: var(--ils-fg);
}

.ils-reactions__btn.is-active {
	border-color: var(--ils-red);
	background: var(--ils-red);
	color: var(--ils-white);
}

.ils-reactions__glyph {
	display: inline-flex;
	line-height: 1;
}

/*
 * Inherits the button's colour, so the active (red) button's icon flips to
 * white with it. An emoji could not do that — which is most of why these are
 * drawn icons.
 */
.ils-reactions__glyph .ils-icon {
	width: 18px;
	height: 18px;
	color: inherit;
}

.ils-reactions__count {
	font-variant-numeric: tabular-nums;
	font-weight: 700;
}

.ils-reactions__total {
	margin: var(--ils-sp-3) 0 0;
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

/* =====================================================================
   Comments
   ================================================================== */

.ils-comments {
	margin: var(--ils-sp-7) 0;
	padding-top: var(--ils-sp-5);
	border-top: var(--ils-rule-section);
}

.ils-comments__heading {
	margin: 0 0 var(--ils-sp-5);
	font-size: var(--ils-fs-lg);
}

.ils-comments__list,
.ils-comments__list .children {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ils-comments__list .children {
	margin-left: var(--ils-sp-5);
	padding-left: var(--ils-sp-4);
	border-left: 2px solid var(--ils-rule);
}

.ils-comment {
	padding: var(--ils-sp-4) 0;
	border-bottom: var(--ils-border-hairline);
}

.ils-comment__header {
	display: flex;
	gap: var(--ils-sp-3);
	align-items: center;
	margin-bottom: var(--ils-sp-2);
}

.ils-comment__avatar img {
	display: block;
	border-radius: 50%;
}

.ils-comment__author {
	display: block;
	font-size: var(--ils-fs-sm);
	font-weight: 700;
}

/* Staff badge, so an official reply is obvious in a long thread. */
.ils-comment__badge {
	display: inline-block;
	margin-left: var(--ils-sp-1);
	padding: 0.1em 0.4em;
	border: 1px solid var(--ils-red);
	color: var(--ils-red);
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	vertical-align: middle;
}

.ils-comment__time {
	display: block;
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

.ils-comment__text {
	font-size: var(--ils-fs-base);
	line-height: var(--ils-lh-normal);
}

.ils-comment__text p {
	margin: 0 0 var(--ils-sp-3);
}

.ils-comment__pending {
	margin: 0 0 var(--ils-sp-2);
	color: var(--ils-red);
	font-size: var(--ils-fs-xs);
	font-style: italic;
}

.ils-comment__footer {
	display: flex;
	gap: var(--ils-sp-3);
	margin-top: var(--ils-sp-2);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
}

.ils-comment-form {
	margin-top: var(--ils-sp-6);
	padding: var(--ils-sp-5);
	background: var(--ils-surface);
}

.ils-comment-form__title {
	margin: 0 0 var(--ils-sp-3);
	font-size: var(--ils-fs-base);
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.ils-comment-form__notes {
	margin: 0 0 var(--ils-sp-4);
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

.ils-comment-form__field {
	margin: 0 0 var(--ils-sp-4);
}

.ils-comment-form__field label {
	display: block;
	margin-bottom: var(--ils-sp-1);
	font-size: var(--ils-fs-sm);
	font-weight: 700;
}

.ils-comment-form__field input,
.ils-comment-form__field textarea {
	width: 100%;
	padding: 0.7em 0.8em;
	border: 1px solid var(--ils-rule-strong);
	background: var(--ils-white);
	font-family: inherit;
	font-size: var(--ils-fs-base);
}

.ils-comment-form__field textarea {
	line-height: var(--ils-lh-normal);
	resize: vertical;
}

.ils-comment-form__consent {
	display: flex;
	gap: var(--ils-sp-2);
	align-items: baseline;
	margin: 0 0 var(--ils-sp-4);
	font-size: var(--ils-fs-sm);
}

.ils-comment-form__submit {
	padding: 0.75em 1.6em;
	border: 0;
	background: var(--ils-red);
	color: var(--ils-white);
	font-family: inherit;
	font-size: var(--ils-fs-base);
	font-weight: 700;
	cursor: pointer;
}

.ils-comment-form__submit:hover {
	background: var(--ils-red-dark);
}

.ils-required {
	color: var(--ils-red);
}

/* =====================================================================
   More like this
   ================================================================== */

.ils-more-like-this {
	min-width: 0;
}

.ils-more-like-this__heading {
	margin: 0 0 var(--ils-sp-1);
	padding: var(--ils-sp-3) 0;
	border-top: var(--ils-accent-line);
	font-family: var(--ils-font-sans);
	font-size: var(--ils-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.ils-more-like-this__section {
	margin: var(--ils-sp-2) 0 var(--ils-sp-3);
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ils-more-like-this__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.ils-more-like-this__item {
	display: grid;
	grid-template-columns: 84px 1fr;
	gap: var(--ils-sp-3);
	padding: var(--ils-sp-3) 0;
	border-bottom: var(--ils-border-hairline);
}

.ils-more-like-this__item--no-thumb {
	grid-template-columns: 1fr;
}

.ils-more-like-this__thumb {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.ils-more-like-this__title {
	margin: 0;
	font-size: var(--ils-fs-sm);
	line-height: var(--ils-lh-snug);
}

.ils-more-like-this__time {
	display: block;
	margin-top: var(--ils-sp-1);
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

.ils-more-like-this__all {
	display: inline-block;
	margin-top: var(--ils-sp-3);
	font-size: var(--ils-fs-sm);
	font-weight: 700;
	color: var(--ils-red);
}

/* =====================================================================
   Account pages
   ================================================================== */

.ils-main--account {
	display: block;
}

.ils-account {
	max-width: 30rem;
	margin: var(--ils-sp-7) auto;
	padding: 0 var(--ils-gutter);
}

.ils-account__title {
	margin: 0 0 var(--ils-sp-3);
	font-size: var(--ils-fs-xl);
	line-height: var(--ils-lh-tight);
}

.ils-account__subtitle {
	margin: var(--ils-sp-6) 0 var(--ils-sp-3);
	padding-bottom: var(--ils-sp-2);
	border-bottom: 2px solid var(--ils-red);
	font-size: var(--ils-fs-base);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.ils-account__intro {
	margin: 0 0 var(--ils-sp-5);
	color: var(--ils-gray-700);
	font-size: var(--ils-fs-sm);
	line-height: var(--ils-lh-normal);
}

.ils-account__notice {
	margin: 0 0 var(--ils-sp-4);
	padding: var(--ils-sp-3);
	border-left: 3px solid var(--ils-red);
	background: var(--ils-surface);
	font-size: var(--ils-fs-sm);
}

.ils-account__actions {
	display: flex;
	gap: var(--ils-sp-3);
	margin: var(--ils-sp-5) 0 0;
}

.ils-account__alt {
	margin: var(--ils-sp-3) 0 0;
	font-size: var(--ils-fs-sm);
}

.ils-account__small {
	margin: var(--ils-sp-4) 0 0;
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

.ils-account__details {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: var(--ils-sp-2) var(--ils-sp-4);
	margin: 0;
	font-size: var(--ils-fs-sm);
}

.ils-account__details dt {
	color: var(--ils-fg-muted);
}

.ils-account__details dd {
	margin: 0;
	font-weight: 700;
}

.ils-account__comments {
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--ils-fs-sm);
}

.ils-account__comments li {
	padding: var(--ils-sp-2) 0;
	border-bottom: var(--ils-border-hairline);
}

.ils-account__comments time {
	display: block;
	color: var(--ils-fg-muted);
	font-size: var(--ils-fs-xs);
}

/* =====================================================================
   Tablet and up
   ================================================================== */

@media (min-width: 48em) {
	.ils-newsletter--compact .ils-newsletter__row {
		flex-direction: row;
	}

	.ils-comment-form__field--half {
		display: inline-block;
		width: calc(50% - var(--ils-sp-2));
	}

	.ils-comment-form__field--half + .ils-comment-form__field--half {
		margin-left: var(--ils-sp-3);
	}
}