/* Insight Stories: front end. Kept small on purpose. It borrows your theme's fonts and
   colors, so only layout and the buttons are styled here. Override any rule in your
   theme's CSS. Every rule starts with .istories-* so it stays out of the way. */

.istories-app [hidden],
.istories-single [hidden],
.istories-story [hidden] {
	display: none !important;
}

.istories-tool-notice {
	margin: 0 0 1.25em;
	font-size: 0.9em;
	opacity: 0.85;
}

/* ---- Topic picker ---- */

.istories-category {
	margin: 0 0 1.5em;
}

.istories-category-title {
	margin: 0 0 0.5em;
}

.istories-topic-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 0;
	padding: 0;
	list-style: none;
}

.istories-topic-list li {
	margin: 0;
	padding: 0;
}

/* Buttons and topic links share one look: an outlined pill that follows the theme's text color. */
.istories-app .istories-topic,
.istories-app .istories-btn,
.istories-single .istories-btn,
.istories-story .istories-btn,
.istories-app .istories-tool,
.istories-single .istories-tool,
.istories-story .istories-tool {
	display: inline-block;
	min-height: 44px;
	box-sizing: border-box;
	padding: 0.6em 1em;
	border: 1px solid currentColor;
	border: 1px solid color-mix(in srgb, currentColor 45%, transparent);
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.95em;
	line-height: 1.3;
	text-align: left;
	text-decoration: none;
	cursor: pointer;
	box-shadow: none;
}

.istories-app .istories-topic:hover,
.istories-app .istories-btn:hover,
.istories-single .istories-btn:hover,
.istories-story .istories-btn:hover,
.istories-app .istories-tool:hover,
.istories-single .istories-tool:hover,
.istories-story .istories-tool:hover {
	border-color: currentColor;
	background: transparent;
	color: inherit;
	text-decoration: underline;
}

.istories-app a:focus-visible,
.istories-app button:focus-visible,
.istories-single a:focus-visible,
.istories-single button:focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

/* ---- Story ---- */

.istories-result {
	margin: 1.5em 0 0;
}

.istories-result:focus,
.istories-story-title:focus {
	outline: none;
}

.istories-support {
	margin: 0 0 1.25em;
	padding: 0.75em 1em;
	border-left: 4px solid currentColor;
	border-left-color: color-mix(in srgb, currentColor 45%, transparent);
	font-size: 0.95em;
}

.istories-support p {
	margin: 0 0 0.5em;
}

.istories-support p:last-child {
	margin-bottom: 0;
}

.istories-topic-line {
	margin: 0 0 1em;
	font-style: italic;
}

.istories-reflection {
	margin: 1.5em 0 1em;
	padding-top: 1em;
	border-top: 1px solid currentColor;
	border-top-color: color-mix(in srgb, currentColor 25%, transparent);
}

.istories-subheading {
	margin: 0 0 0.4em;
	font-size: 1.1em;
}

.istories-moves {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5em;
	margin: 1em 0;
}

.istories-tools {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5em 1em;
	margin: 1em 0 0;
}

.istories-back {
	color: inherit;
}

.istories-status {
	font-size: 0.9em;
}

/* ---- Printing: keep the story, drop the controls ---- */

@media print {
	.istories-topics,
	.istories-moves,
	.istories-tools,
	.istories-heading {
		display: none !important;
	}
}