/* Ask JI (Web). Colours and fonts can be matched to the theme by overriding these variables. */
.ji-ask {
	--ji-ask-red: #b8290f;
	--ji-ask-red-dark: #962009;
	--ji-ask-ink: #1f1414;
	--ji-ask-muted: #6b6464;
	--ji-ask-border: #e4dfdf;
	--ji-ask-surface: #faf8f8;
	--ji-ask-reader: #fbeeeb;
	--ji-ask-heading-font: inherit;
	--ji-ask-body-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	--ji-ask-radius: 12px;

	color: var(--ji-ask-ink);
	font-size: 16px;
	line-height: 1.5;
}

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

.ji-ask [hidden] {
	display: none !important;
}

/* Shared */

.ji-ask__title,
.ji-ask__heading {
	margin: 0;
	font-family: var(--ji-ask-heading-font);
	font-weight: 700;
	line-height: 1.15;
	color: var(--ji-ask-ink);
}

.ji-ask__title {
	font-size: 2rem;
}

.ji-ask__subtitle,
.ji-ask__intro,
.ji-ask__loading {
	margin: 0.25rem 0 0;
	color: var(--ji-ask-muted);
}

.ji-ask__button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0.6rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var(--ji-ask-red);
	color: #fff;
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.ji-ask__button:hover,
.ji-ask__button:focus-visible {
	background: var(--ji-ask-red-dark);
	color: #fff;
}

.ji-ask__button:disabled {
	opacity: 0.6;
	cursor: default;
}

.ji-ask__button--wide {
	width: 100%;
}

.ji-ask__link {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ji-ask-red);
	font: inherit;
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

.ji-ask__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
	margin: 1.25rem 0 0;
}

.ji-ask__form {
	display: grid;
	gap: 0.75rem;
	margin-top: 1.25rem;
}

.ji-ask__label {
	font-weight: 600;
}

.ji-ask__textarea {
	width: 100%;
	min-height: 6rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--ji-ask-border);
	border-radius: var(--ji-ask-radius);
	background: #fff;
	color: var(--ji-ask-ink);
	font: inherit;
	resize: vertical;
}

.ji-ask__textarea:focus {
	outline: 2px solid var(--ji-ask-red);
	outline-offset: 1px;
	border-color: transparent;
}

.ji-ask__form .ji-ask__button:not(.ji-ask__button--wide) {
	justify-self: end;
}

.ji-ask__error {
	margin: 0;
	color: var(--ji-ask-red-dark);
	font-weight: 600;
}

.ji-ask__notice {
	margin-top: 1.25rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ji-ask-border);
	border-radius: var(--ji-ask-radius);
	background: var(--ji-ask-surface);
}

.ji-ask__notice p {
	margin: 0 0 0.5rem;
}

.ji-ask__status {
	color: var(--ji-ask-muted);
	font-size: 0.875rem;
	font-weight: 600;
}

.ji-ask__status--new {
	color: #9a6400;
}

.ji-ask__status--in_progress {
	color: #1d5fa8;
}

/* Account: list */

.ji-ask__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.ji-ask__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ji-ask__card {
	display: block;
	padding: 1rem 1.25rem;
	border: 1px solid var(--ji-ask-border);
	border-radius: var(--ji-ask-radius);
	background: var(--ji-ask-surface);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.15s ease;
}

.ji-ask__card:hover,
.ji-ask__card:focus-visible {
	border-color: var(--ji-ask-red);
	color: inherit;
}

.ji-ask__card-top,
.ji-ask__card-bottom {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
}

.ji-ask__card-bottom {
	align-items: baseline;
	margin-top: 0.5rem;
}

.ji-ask__card-preview,
.ji-ask__card-article {
	min-width: 0;
}

.ji-ask__card-preview {
	display: -webkit-box;
	overflow: hidden;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	font-size: 1.05rem;
}

.ji-ask__card-date {
	flex-shrink: 0;
	color: var(--ji-ask-muted);
	font-size: 0.9rem;
	font-weight: 600;
}

.ji-ask__card-article {
	overflow: hidden;
	color: var(--ji-ask-muted);
	font-size: 0.875rem;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ji-ask__card--unread {
	border-color: var(--ji-ask-red);
	background: #fff;
}

.ji-ask__card--unread .ji-ask__card-preview {
	font-weight: 600;
}

.ji-ask__card-status {
	display: flex;
	flex-shrink: 0;
	align-items: baseline;
	gap: 0.6rem;
}

.ji-ask__new-reply {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--ji-ask-red);
	font-size: 0.875rem;
	font-weight: 700;
}

.ji-ask__new-reply::before {
	content: "";
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--ji-ask-red);
}

.ji-ask__empty {
	padding: 2rem 1.25rem;
	border: 1px dashed var(--ji-ask-border);
	border-radius: var(--ji-ask-radius);
	color: var(--ji-ask-muted);
	text-align: center;
}

.ji-ask__empty p {
	margin: 0;
}

/* Account: thread */

.ji-ask__back {
	display: inline-block;
	margin-bottom: 1rem;
	color: var(--ji-ask-red);
	font-weight: 600;
	text-decoration: none;
}

.ji-ask__thread-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.25rem 1rem;
	margin: 0.5rem 0 1.25rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--ji-ask-border);
}

.ji-ask__article-link {
	color: var(--ji-ask-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--ji-ask-red);
	text-underline-offset: 3px;
}

.ji-ask__messages {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.ji-ask__message {
	max-width: min(85%, 36rem);
}

.ji-ask__message--reader {
	justify-self: end;
}

.ji-ask__message-meta {
	margin: 0 0 0.25rem;
	color: var(--ji-ask-muted);
	font-size: 0.8rem;
}

.ji-ask__message--reader .ji-ask__message-meta {
	text-align: right;
}

.ji-ask__message-body {
	padding: 0.75rem 1rem;
	border-radius: var(--ji-ask-radius);
	background: var(--ji-ask-surface);
	border: 1px solid var(--ji-ask-border);
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.ji-ask__message--reader .ji-ask__message-body {
	background: var(--ji-ask-reader);
	border-color: transparent;
}

.ji-ask__message--system {
	justify-self: center;
	text-align: center;
}

.ji-ask__message--system .ji-ask__message-meta {
	display: none;
}

.ji-ask__message--system .ji-ask__message-body {
	padding: 0;
	border: 0;
	background: none;
	color: var(--ji-ask-muted);
	font-size: 0.9rem;
}

.ji-ask__closed-note {
	margin: 1.25rem 0 0;
	color: var(--ji-ask-muted);
	font-size: 0.9rem;
}

/* Article box */

/* The wrapper sits in the article like a paragraph: the theme gives it the same width and side
   padding as the text. Article paragraphs carry 30px of bottom padding, so 10px on top here plus
   40px below leaves an even 40px of space on both sides; the script evens it out on layouts
   that differ. */
.ji-ask-slot {
	padding-top: 10px;
	padding-bottom: 40px;
}

.ji-ask--article {
	margin: 0;
	padding: 1.5rem 1.5rem 1.75rem;
	border: 1px solid var(--ji-ask-border);
	border-top: 4px solid var(--ji-ask-red);
	border-radius: var(--ji-ask-radius);
	background: var(--ji-ask-surface);
}

/* Article body styles (e.g. "article p") would otherwise restyle the box's text. */
.ji-ask--article p,
.ji-ask--article label,
.ji-ask--article textarea,
.ji-ask--article button {
	font-family: var(--ji-ask-body-font);
	font-size: 1rem;
	line-height: 1.5;
}

/* The theme adds 30px of bottom padding to every article paragraph ("article .body p"). */
.ji-ask.ji-ask--article p:not(.ji-ask__pro-badge),
.ji-ask.ji-ask--article h2 {
	padding: 0;
}

.ji-ask--article .ji-ask__heading {
	margin: 0;
}

/* The theme blurs paragraphs and headings inside .paywalled-content for non-subscribers.
   The box sits there too, and its "available to Pro subscribers" message must stay readable. */
.ji-ask--article,
.ji-ask--article * {
	filter: none !important;
	user-select: auto !important;
}

.ji-ask--article .ji-ask__eyebrow {
	margin: 0 0 0.5rem;
	color: var(--ji-ask-red);
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ji-ask__heading {
	font-size: 1.75rem;
}

.ji-ask--article .ji-ask__intro {
	margin-top: 0.75rem;
}

.ji-ask--article .ji-ask__heading + .ji-ask__button {
	margin-top: 1.25rem;
}

/* The mid-article prompt's heading is a <p>; keep it styled as a heading. */
.ji-ask.ji-ask--article p.ji-ask__heading {
	font-family: var(--ji-ask-heading-font);
	font-size: 1.75rem;
	line-height: 1.15;
}

.ji-ask--article a.ji-ask__button {
	color: #fff;
	font-family: var(--ji-ask-body-font);
	font-size: 1rem;
	text-decoration: none;
}

/* Pro-only message */

.ji-ask__upsell {
	margin-top: 1rem;
}

.ji-ask--account .ji-ask__upsell {
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--ji-ask-border);
	border-top: 4px solid var(--ji-ask-red);
	border-radius: var(--ji-ask-radius);
	background: var(--ji-ask-surface);
}

/* Doubled class so it outranks the theme's article paragraph padding and the box's own text size. */
.ji-ask .ji-ask__pro-badge,
.ji-ask.ji-ask--article p.ji-ask__pro-badge {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	background: var(--ji-ask-ink);
	color: #fff;
	font-size: 0.75rem;
	line-height: 1.4;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.ji-ask__upsell .ji-ask__intro {
	margin: 0;
	color: var(--ji-ask-ink);
}

.ji-ask__login {
	color: var(--ji-ask-muted);
	font-size: 0.95rem;
}

.ji-ask__sent {
	margin-top: 1.25rem;
}

.ji-ask__sent p {
	margin: 0 0 0.5rem;
}

.ji-ask__sent-title {
	font-weight: 700;
}

/* Top-of-article "Ask JI" pill. Sits in theme markup, so it doesn't rely on .ji-ask variables. */

.ji-ask-pill {
	display: inline-flex;
	flex-shrink: 0;
	align-items: center;
	align-self: center;
	gap: 6px;
	/* The theme stretches the byline's author links to the row's height and underlines them with a
	   bottom border, so a button taller than the text would push those underlines down. Negative
	   margins keep the row at text height. */
	margin: -9px 0 -9px auto;
	padding: 9px 18px;
	border-radius: 999px;
	background: #b8290f;
	box-shadow: 0 2px 6px rgba(184, 41, 15, 0.25);
	color: #fff;
	font: 600 16px/1.2 -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.15s ease;
}

.ji-ask-pill.ji-ask-pill--inline {
	margin-left: 1rem;
}

/* Phone copy of the button, on its own row below the share buttons (see addTopButton in the script).
   Below 768px the theme wraps the byline and tucks the share row up under it, so the byline copy
   is hidden there. */
.ji-ask-pill-row {
	display: none;
}

@media (max-width: 767px) {
	.ji-ask-pill.ji-ask-pill--byline {
		display: none;
	}

	/* The theme leaves 20-50px under the share row to separate it from the article; with the button
	   in between, keep a little and let the button carry the gap to the text (set by the script). */
	.page-content .share.ji-ask-share--with-pill {
		padding-bottom: 14px !important;
	}

	/* clear: the theme floats the share row on phones. */
	.ji-ask-pill-row {
		display: flex;
		clear: both;
		padding: 0;
	}

	.ji-ask-pill-row--center {
		justify-content: center;
	}

	.ji-ask-pill-row .ji-ask-pill {
		margin: 0;
	}
}

.ji-ask-pill:hover,
.ji-ask-pill:focus-visible {
	background: #962009;
	color: #fff;
}

/* Reply alert: menu badge, "My account" dot and the notice. These sit in theme markup, so they
   don't rely on .ji-ask variables. */

.ji-ask-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	margin-left: 0.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: #b8290f;
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	vertical-align: middle;
}

.ji-ask-dot {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin-left: 0.35rem;
	border: 1px solid #fff;
	border-radius: 50%;
	background: #b8290f;
	vertical-align: top;
}

.ji-ask-toast {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 99999;
	width: min(360px, calc(100vw - 32px));
	padding: 1.1rem 1.25rem 1.25rem;
	border: 1px solid var(--ji-ask-border);
	border-top: 4px solid var(--ji-ask-red);
	border-radius: var(--ji-ask-radius);
	background: #fff;
	box-shadow: 0 12px 32px rgba(31, 20, 20, 0.18);
	font-family: var(--ji-ask-body-font);
	animation: ji-ask-toast-in 0.25s ease-out;
}

@keyframes ji-ask-toast-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.ji-ask-toast {
		animation: none;
	}
}

.ji-ask-toast p {
	margin: 0;
}

.ji-ask-toast__eyebrow {
	color: var(--ji-ask-red);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.ji-ask-toast__title {
	margin-top: 0.35rem !important;
	padding-right: 1.5rem;
	font-family: var(--ji-ask-heading-font);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1.25;
}

.ji-ask-toast__preview {
	display: -webkit-box;
	overflow: hidden;
	margin-top: 0.5rem !important;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	color: var(--ji-ask-muted);
	font-size: 0.95rem;
}

.ji-ask-toast__actions {
	margin-top: 1rem;
}

.ji-ask-toast__close {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	width: 2rem;
	height: 2rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--ji-ask-muted);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
}

.ji-ask-toast__close:hover,
.ji-ask-toast__close:focus-visible {
	background: var(--ji-ask-surface);
	color: var(--ji-ask-ink);
}

@media (max-width: 600px) {
	.ji-ask-toast {
		right: 16px;
		bottom: 16px;
		left: 16px;
		width: auto;
	}

	.ji-ask__title {
		font-size: 1.6rem;
	}

	.ji-ask__heading,
	.ji-ask.ji-ask--article p.ji-ask__heading {
		font-size: 1.4rem;
	}

	.ji-ask--article {
		padding: 1.25rem 1rem 1.5rem;
	}

	.ji-ask__message {
		max-width: 92%;
	}
}