/* Child Theme visual layer for the Plugin-owned web tools. */
.stc-tools-directory,
.stc-tools-ticket,
.stc-place-finder,
.stc-taxi-card {
	--stc-tool-jade: var(--stc-color-jade);
	--stc-tool-ink: var(--stc-color-ink);
	--stc-tool-muted: var(--stc-color-muted);
	font-family: var(--stc-font-sans);
}

.stc-tool-card,
.stc-place-finder__form,
.stc-taxi-card__form {
	background: var(--stc-color-surface);
	border-color: var(--stc-color-line);
	border-radius: var(--stc-radius-lg);
	box-shadow: var(--stc-shadow-card);
	min-width: 0;
}

.stc-page-section--tools {
	background: color-mix(in srgb, var(--stc-color-jade) 6%, var(--stc-color-canvas));
	border: 1px solid color-mix(in srgb, var(--stc-color-jade) 18%, var(--stc-color-line));
	border-radius: calc(var(--stc-radius-lg) + .5rem);
	margin-top: 2rem;
	padding: clamp(1.5rem, 4vw, 3rem);
}

.stc-tools-ticket .stc-ticket-tool {
	background: var(--stc-color-surface);
	border-color: color-mix(in srgb, var(--stc-color-jade) 20%, var(--stc-color-line));
	box-shadow: var(--stc-shadow-raised);
}

.stc-tool-card h3,
.stc-tools-directory__heading h2,
.stc-tool-intro :is(h2, h3),
.stc-place-result-card h3,
.stc-taxi-card__chinese,
.stc-driver-mode__inner > strong {
	font-family: var(--stc-font-display);
}

.stc-tool-card__icon,
.stc-place-upload__icon {
	background: color-mix(in srgb, var(--stc-color-jade) 10%, var(--stc-color-surface));
	color: var(--stc-color-jade);
}

.stc-tool-primary,
.stc-taxi-card__actions button:first-child {
	background: var(--stc-color-jade);
}

.stc-tool-primary:hover,
.stc-taxi-card__actions button:first-child:hover {
	background: var(--stc-color-jade-hover);
}

.stc-place-upload,
.stc-place-result-card,
.stc-place-choices,
.stc-place-low,
.stc-taxi-card__card {
	border-color: var(--stc-color-line);
}

.stc-driver-mode {
	background: var(--stc-color-ink);
}

.stc-taxi-card__card,
.stc-driver-mode__inner {
	overflow-wrap: anywhere;
}

.stc-tool-primary,
.stc-taxi-card__actions button {
	min-height: 2.75rem;
	transition: background-color var(--stc-motion-duration-fast) var(--stc-motion-ease-standard), transform var(--stc-motion-duration-fast) var(--stc-motion-ease-standard);
}

.stc-tool-primary:active,
.stc-taxi-card__actions button:active {
	transform: scale(0.985);
}

@media (hover: hover) and (pointer: fine) {
	.stc-tool-card:hover {
		border-color: color-mix(in srgb, var(--stc-color-jade) 48%, var(--stc-color-line));
		box-shadow: var(--stc-shadow-raised);
		transform: translateY(-2px);
	}
}

@media (prefers-reduced-motion: reduce) {
	.stc-tool-card,
	.stc-tool-primary,
	.stc-taxi-card__actions button { transition: none; transform: none; }
}

@media (max-width: 47.99rem) {
	.stc-page-section--tools {
		border-left: 0;
		border-radius: 0;
		border-right: 0;
		margin-top: 1rem;
		padding: 1.5rem 1rem;
	}
}