.salimpick-tool-page {
	max-width: 640px;
}

.salimpick-tool-page__breadcrumb {
	display: flex;
	gap: 6px;
	font-size: var(--sp-font-size-sm);
	color: var(--sp-color-text-muted);
	margin-bottom: var(--sp-space-4);
}

.salimpick-tool-page__breadcrumb a {
	color: var(--sp-color-text-muted);
	text-decoration: none;
}

.salimpick-tool-page__breadcrumb a:hover {
	color: var(--sp-color-primary);
}

.salimpick-tool-page__title {
	font-size: var(--sp-font-size-2xl);
	margin: 0 0 var(--sp-space-5);
	word-break: keep-all;
	overflow-wrap: break-word;
}

.salimpick-tool-page__content {
	margin-bottom: var(--sp-space-6);
}

.salimpick-tool-page__back {
	font-size: var(--sp-font-size-sm);
}

.salimpick-tool-page__back a {
	color: var(--sp-color-text-muted);
	text-decoration: none;
}

.salimpick-tool-page__back a:hover {
	color: var(--sp-color-primary);
}

@media (max-width: 599px) {
	.salimpick-tool-page__title {
		font-size: var(--sp-font-size-xl);
	}
}

/* 2026-10-01 design recovery (rendered 1280): on a tool page the
   calculator looked like a plugin form dropped into a blog -- a 420px
   card in the left of a 640px column with an empty right side, its own
   h2 repeating the page h1 directly underneath, no space before the
   explanation that follows, and a white-on-sage submit button at ~3:1.
   Scoped to tool pages; the plugin's own styles are untouched. */
.salimpick-tool-page .salimpick-tool {
	max-width: none;
	padding: var(--sp-space-5);
	margin-bottom: var(--sp-space-7);
}

/* The page h1 already names the tool; keep the card's h2 for screen
   readers and the document outline, but not on screen. */
.salimpick-tool-page .salimpick-tool__title {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Submit only (row add/remove buttons in the multi tool are type=button). */
.salimpick-tool-page .salimpick-tool__form button:not([type="button"]) {
	background: var(--sp-color-link-accessible);
}

.salimpick-tool-page .salimpick-tool__form button:not([type="button"]):hover {
	background: var(--sp-color-text);
}

/* Helper and note text inside the tool broke mid-word at 390 ("있어 / 요"). */
.salimpick-tool-page .salimpick-tool {
	word-break: keep-all;
	overflow-wrap: break-word;
}