/* Hand-written additions: style.css is a compiled Tailwind build without its source, so classes it lacks live here. */

/* Number of favorites next to the header link. */
.calcdash-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 .375rem;
	border-radius: 9999px;
	background: var(--color-primary-600, #4f46e5);
	color: #fff;
	font-size: .75rem;
	font-weight: 600;
	line-height: 1;
}

.calcdash-count[hidden] {
	display: none;
}

/* Color picker in the footer: opens upwards, centred on phones, aligned right from md. */
.calcdash-color-menu {
	position: absolute;
	bottom: 100%;
	left: 50%;
	width: min(24rem, calc(100vw - 2rem));
	margin-bottom: .5rem;
	transform: translateX(-50%);
	text-align: start;
}

@media (min-width: 768px) {
	.calcdash-color-menu {
		right: 0;
		left: auto;
		transform: none;
	}
}

/* Language switcher of WPCalc AI Studio in the header. */
.header-search .wpcalc-languages--dropdown > summary {
	height: 2.5rem;
	padding: 0 .625rem;
	border-radius: .25rem;
	color: var(--color-gray-500, #6b7280);
	font-size: .875rem;
	font-weight: 500;
}

.dark .header-search .wpcalc-languages--dropdown > summary {
	color: var(--color-gray-400, #9ca3af);
}

.header-search .wpcalc-languages--dropdown .wpcalc-languages__list {
	font-size: .875rem;
}

/* Breadcrumbs: crumbs wrap as whole units instead of breaking mid-name, long names get an ellipsis. */
.calcdash-breadcrumb {
	display: flex;
	padding: .5rem .75rem;
}

.calcdash-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .125rem .5rem;
	min-width: 0;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.25rem;
}

.calcdash-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	max-width: 100%;
	min-width: 0;
	white-space: nowrap;
}

.calcdash-breadcrumb__link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-width: 0;
	min-height: 1.75rem; /* touch target, WCAG 2.5.8 */
}

.calcdash-breadcrumb__sep {
	flex: none;
	font-size: .75rem;
}

.calcdash-breadcrumb__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* On phones the current page is the H1 right below, so its crumb is dropped. */
.calcdash-breadcrumb__item--current {
	display: none;
}

@media (min-width: 768px) {
	.calcdash-breadcrumb {
		padding: .75rem 1.25rem;
	}

	.calcdash-breadcrumb__list {
		gap: .25rem .75rem;
	}

	.calcdash-breadcrumb__item--current {
		display: inline-flex;
		flex: 1 1 0;
	}
}

/* Tag cards on category archives. */
.calcdash-term-card {
	display: flex;
}

.calcdash-term-card__body {
	display: flex;
	flex: 1;
	align-items: center;
	gap: .75rem;
	min-height: 4rem;
	padding: .5rem .75rem .5rem .5rem;
}

.calcdash-term-card__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.125rem;
}

.calcdash-term-card__title {
	flex: 1;
	min-width: 0;
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}

.calcdash-term-card__count {
	flex: none;
	min-width: 1.75rem;
	padding: .125rem .5rem;
	border-radius: 9999px;
	font-size: .75rem;
	font-weight: 500;
	line-height: 1rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

/* Display formulas: a wide equation scrolls inside its own box instead of being clipped by the screen. */
.katex-display {
	max-width: 100%;
	margin: 1rem 0;
	padding: .625rem .875rem;
	overflow-x: auto;
	overflow-y: hidden;
	border-radius: .375rem;
	background-color: var(--color-gray-100);
	scrollbar-width: thin;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.dark .katex-display {
	background-color: var(--color-gray-800);
}

.katex-display > span.katex { /* outranks katex.min.css, which loads later */
	display: inline-block;
	min-width: 100%;
	max-width: none;
	padding: 0;
	background-color: transparent;
	text-align: center;
}

/* Inline formulas never push the text column wider than the screen. */
.katex {
	max-width: 100%;
}

#formula .katex-display {
	padding: 0;
	border-radius: 0;
	background-color: transparent;
}

#formula .katex-display > .katex {
	text-align: left;
}

/* Calculator form: errors under the fields (set by the script). */
.calculator .field-error {
	margin-top: .375rem;
	color: var(--color-red-700, #b91c1c);
	font-size: .8125rem;
	line-height: 1.25rem;
}

.dark .calculator .field-error {
	color: var(--color-red-400, #f87171);
}

.calculator [aria-invalid="true"] {
	outline: 2px solid var(--color-red-600, #dc2626) !important;
	outline-offset: -2px !important;
}

/* A result that no longer matches the fields stays visible, dimmed, with a note. */
.fieldset-result.is-stale .result-box {
	opacity: .45;
	transition: opacity .2s;
}

.result-stale-note {
	margin: .75rem 1rem 0;
	padding: .5rem .75rem;
	border-radius: .375rem;
	background: var(--color-amber-50, #fffbeb);
	color: var(--color-amber-900, #78350f);
	font-size: .875rem;
	line-height: 1.25rem;
}

.dark .result-stale-note {
	background: var(--color-gray-800, #1f2937);
	color: var(--color-amber-200, #fde68a);
}

/* "Copy link to this calculation" under the results. */
.result-actions {
	display: flex;
	justify-content: flex-end;
	padding: 0 1rem 1rem;
}

.copy-link {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .375rem .75rem;
	border-radius: .375rem;
	color: var(--color-primary-700, #4338ca);
	font-size: .875rem;
	line-height: 1.25rem;
	cursor: pointer;
}

.copy-link:hover,
.copy-link.active {
	background: var(--color-primary-50, #eef2ff);
}

.copy-link svg {
	width: 1rem;
	height: 1rem;
	flex: none;
}

.dark .copy-link {
	color: var(--color-primary-300, #a5b4fc);
}

.dark .copy-link:hover,
.dark .copy-link.active {
	background: var(--color-gray-800, #1f2937);
}

/* Phones: the result has no frame, the button lines up with the text. */
@media (max-width: 639.98px) {
	.result-actions {
		justify-content: flex-start;
		padding-inline: 0;
	}

	.copy-link {
		margin-inline-start: -.75rem;
	}
}

/* The result heading gets focus after "Calculate": room above it when scrolled to, no ring on click. */
.fieldset-result {
	scroll-margin-top: 1rem;
}

.result-title:focus:not(:focus-visible) {
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.result-updated {
		animation: none;
	}
}

/* iOS Safari zooms into any field under 16px when it gets focus. */
@media (max-width: 639.98px), (pointer: coarse) {
	.calculator input,
	.calculator select,
	.calculator textarea,
	.search-field {
		font-size: 16px !important;
	}
}

/* Theme toggle icon follows the class set before the first paint, not the script. */
.dark #theme-toggle-dark-icon {
	display: block;
}

.dark #theme-toggle-light-icon {
	display: none;
}

/* "Skip to content": hidden until a keyboard user tabs to it, then shown on top of the header. */
.calcdash-skip-link {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.calcdash-skip-link:focus {
	position: fixed;
	z-index: 100;
	top: .75rem;
	left: .75rem;
	width: auto;
	height: auto;
	padding: .75rem 1rem;
	clip-path: none;
	border-radius: .375rem;
	background: var(--color-primary-700, #4338ca);
	color: #fff;
	font-weight: 600;
	box-shadow: 0 4px 12px rgb(0 0 0 / .2);
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* Page H1: smaller on phones so the title does not fill the screen, balanced line breaks. */
.calcdash-page-title {
	font-size: 1.875rem;
	line-height: 1.2;
	text-wrap: balance;
	overflow-wrap: break-word;
	hyphens: auto;
}

@media (min-width: 768px) {
	.calcdash-page-title {
		font-size: 2.25rem;
		line-height: 1.15;
	}
}

/* Secondary text in the form had gray-400 on white (about 2.5:1); gray-500 meets WCAG AA (4.8:1). */
.calculator .field .unit,
.calculator .field .term,
.calculator .field small,
.result-term,
.formula-title {
	color: var(--color-gray-500);
}

.calculator input::placeholder,
.calculator textarea::placeholder {
	color: var(--color-gray-500);
	opacity: 1;
}

.dark .calculator .field .unit,
.dark .calculator .field .term,
.dark .calculator .field small,
.dark .result-term,
.dark .formula-title,
.dark .calculator input::placeholder,
.dark .calculator textarea::placeholder {
	color: var(--color-gray-400);
}

/* Favorite button hint: hover (mouse only), keyboard focus, or briefly after a press. */
.calcdash-favorite {
	position: relative;
	display: inline-block;
}

.calcdash-favorite__tip {
	position: absolute;
	z-index: 10;
	top: 50%;
	right: 100%;
	width: max-content;
	max-width: 14rem;
	margin-right: .5rem;
	padding: .375rem .625rem;
	border-radius: .25rem;
	background: var(--color-gray-800, #1f2937);
	color: #fff;
	font-size: .75rem;
	line-height: 1rem;
	box-shadow: 0 4px 12px rgb(0 0 0 / .15);
	opacity: 0;
	transform: translateY(-50%);
	transition: opacity .2s;
	pointer-events: none;
}

.calcdash-favorite.is-tip-visible .calcdash-favorite__tip,
.calcdash-favorite .favorite:focus-visible + .calcdash-favorite__tip {
	opacity: 1;
}

@media (hover: hover) {
	.calcdash-favorite:hover .calcdash-favorite__tip {
		opacity: 1;
	}
}

/* Reaction counts appear once the visitor has reacted (space kept, so nothing jumps). */
#calc-reactions:not(.is-voted) .reaction-count {
	visibility: hidden;
}

.reaction-btn[aria-pressed="true"] .reaction-description {
	font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
	.calcdash-favorite__tip,
	.reaction-btn {
		transition: none !important;
	}

	.reaction-btn:hover {
		transform: none !important;
	}
}

/* Star button: a 40px target instead of the bare icon. */
.calcdash-favorite .favorite {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.5rem;
	min-height: 2.5rem;
	border-radius: .375rem;
}

/* Categories menu: full width of the header row on phones (no sideways scroll), 640px centred
   from sm; long lists scroll inside the panel. */
.calcdash-categories {
	right: 0;
	left: 0;
}

.calcdash-categories__panel {
	max-height: calc(100vh - 9rem);
	max-height: calc(100dvh - 9rem);
	overflow-y: auto;
	overscroll-behavior: contain;
}

@media (min-width: 640px) {
	.calcdash-categories {
		right: auto;
		left: 50%;
		width: 640px;
		max-width: calc(100vw - 2rem);
		transform: translateX(-50%);
	}
}

/* Colour picker: the current colour is outlined. */
#color-menu button[aria-pressed="true"] {
	box-shadow: inset 0 0 0 2px var(--color-primary-500, #6366f1);
	font-weight: 600;
}

/* Previous / next calculator: stacked cards on phones, two columns from sm. */
.calcdash-post-nav {
	display: grid;
	gap: .75rem;
}

.calcdash-post-nav__prev,
.calcdash-post-nav__next {
	position: relative;
	padding: .75rem 1rem;
	border: 1px solid var(--color-gray-200, #e5e7eb);
	border-radius: .5rem;
}

.dark .calcdash-post-nav__prev,
.dark .calcdash-post-nav__next {
	border-color: var(--color-gray-700, #374151);
}

.calcdash-post-nav__prev:hover,
.calcdash-post-nav__next:hover {
	border-color: var(--color-primary-300, #a5b4fc);
}

.calcdash-post-nav__link {
	display: flex;
	align-items: center;
	gap: .375rem;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.375;
}

/* The whole card is the link. */
.calcdash-post-nav__link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.calcdash-post-nav__link:focus-visible {
	outline: none;
}

.calcdash-post-nav__link:focus-visible::after {
	outline: 2px solid var(--color-primary-600, #4f46e5);
	outline-offset: 2px;
}

.calcdash-post-nav__next {
	text-align: right;
}

.calcdash-post-nav__next .calcdash-post-nav__link {
	justify-content: flex-end;
}

@media (min-width: 640px) {
	.calcdash-post-nav {
		grid-template-columns: 1fr 1fr;
	}

	/* A lone "Next" stays on the right. */
	.calcdash-post-nav__next:only-child {
		grid-column: 2;
	}
}

/* Reduced motion: no smooth scrolling, animations or transitions anywhere. */
@media (prefers-reduced-motion: reduce) {
	html.scroll-smooth,
	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Calculator lists: category, tag, home, search ---------- */

[data-calc-list] [hidden],
[data-home-search] [hidden],
.calcdash-list-empty[hidden] {
	display: none !important;
}

/* Calculator card: icon, title on up to two lines, short description. */
.calcdash-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: .25rem 1rem;
}

@media (min-width: 640px) {
	.calcdash-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.calcdash-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.calcdash-calc-card__link {
	display: flex;
	align-items: center;
	gap: .875rem;
	height: 100%;
	min-height: 4rem;
	padding: .625rem .75rem;
	border-radius: .5rem;
}

.calcdash-calc-card__icon {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	font-size: 1.25rem;
}

.calcdash-calc-card__text {
	flex: 1;
	min-width: 0;
}

.calcdash-calc-card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: .9375rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
}

.calcdash-calc-card__excerpt {
	display: -webkit-box;
	margin: .125rem 0 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	font-size: .8125rem;
	line-height: 1.35;
}

.calcdash-calc-card__arrow {
	flex: none;
	opacity: 0;
	transform: translateX(-.25rem);
	transition: opacity .2s, transform .2s;
}

.calcdash-calc-card__link:hover .calcdash-calc-card__arrow,
.calcdash-calc-card__link:focus-visible .calcdash-calc-card__arrow {
	opacity: 1;
	transform: none;
}

.calcdash-calc-card__link:focus-visible {
	outline: 2px solid var(--color-primary-600, #4f46e5);
	outline-offset: 1px;
}

/* In-list ad: a full row of the grid, between calculators. */
.calcdash-list-ad {
	grid-column: 1 / -1;
}

/* Collapsible description: cut to 4 lines by CSS before the first paint (html.js). */
.js .calcdash-desc:not(.is-open):not(.is-short) .calcdash-desc__body {
	max-height: 7.2em;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent);
	mask-image: linear-gradient(to bottom, #000 60%, transparent);
}

.calcdash-desc__body > :first-child {
	margin-top: 0;
}

.calcdash-desc__toggle {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	margin-top: .25rem;
	color: var(--color-primary-700, #4338ca);
	font-size: .875rem;
	font-weight: 600;
	cursor: pointer;
}

.dark .calcdash-desc__toggle {
	color: var(--color-primary-300, #a5b4fc);
}

.calcdash-desc__toggle:hover {
	text-decoration: underline;
}

/* Chips: subcategories, sibling sections, recently used. One scrolling row on phones. */
.calcdash-chips__list {
	display: flex;
	gap: .5rem;
	margin: 0;
	padding: .125rem 0 .5rem;
	overflow-x: auto;
	list-style: none;
	scrollbar-width: none;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
}

.calcdash-chips__list::-webkit-scrollbar {
	display: none;
}

@media (min-width: 768px) {
	.calcdash-chips .calcdash-chips__list,
	.calcdash-recent .calcdash-chips__list {
		flex-wrap: wrap;
		overflow: visible;
	}
}

.calcdash-chips__list > li {
	flex: none;
}

.calcdash-chip {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.5rem;
	padding: .375rem .875rem;
	border: 1px solid var(--color-gray-200, #e5e7eb);
	border-radius: 9999px;
	background: var(--color-white, #fff);
	color: var(--color-gray-800, #1f2937);
	font-size: .875rem;
	font-weight: 500;
	white-space: nowrap;
}

.calcdash-chip:hover {
	border-color: var(--color-primary-300, #a5b4fc);
	color: var(--color-primary-700, #4338ca);
}

.calcdash-chip:focus-visible {
	outline: 2px solid var(--color-primary-600, #4f46e5);
	outline-offset: 2px;
}

.calcdash-chip.is-current {
	border-color: var(--color-primary-600, #4f46e5);
	background: var(--color-primary-50, #eef2ff);
	color: var(--color-primary-800, #3730a3);
	font-weight: 600;
}

.calcdash-chip__icon {
	color: var(--color-primary-600, #4f46e5);
}

.calcdash-chip__name {
	max-width: 16rem;
	overflow: hidden;
	text-overflow: ellipsis;
}

.calcdash-chip__count {
	min-width: 1.5rem;
	padding: 0 .375rem;
	border-radius: 9999px;
	background: var(--color-gray-100, #f3f4f6);
	color: var(--color-gray-600, #4b5563);
	font-size: .75rem;
	line-height: 1.25rem;
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.dark .calcdash-chip {
	border-color: var(--color-gray-700, #374151);
	background: var(--color-gray-800, #1f2937);
	color: var(--color-gray-200, #e5e7eb);
}

.dark .calcdash-chip.is-current {
	border-color: var(--color-primary-400, #818cf8);
	background: var(--color-gray-700, #374151);
	color: #fff;
}

.dark .calcdash-chip__icon {
	color: var(--color-primary-300, #a5b4fc);
}

.dark .calcdash-chip__count {
	background: var(--color-gray-700, #374151);
	color: var(--color-gray-300, #d1d5db);
}

/* Toolbar above a list: search, sort, live count. */
.calcdash-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 1rem;
	margin-bottom: 1.5rem;
}

.calcdash-toolbar__search {
	position: relative;
	flex: 1 1 18rem;
	max-width: 32rem;
}

.calcdash-toolbar__icon {
	position: absolute;
	top: 50%;
	left: .875rem;
	color: var(--color-gray-500, #6b7280);
	transform: translateY(-50%);
	pointer-events: none;
}

.calcdash-toolbar__search input {
	width: 100%;
	height: 2.75rem;
	padding: 0 .875rem 0 2.5rem;
	border: 1px solid var(--color-gray-300, #d1d5db);
	border-radius: .5rem;
	background: var(--color-white, #fff);
	color: var(--color-gray-900, #111827);
	font-size: 1rem;
}

.calcdash-toolbar__search input::placeholder {
	color: var(--color-gray-500, #6b7280);
}

.calcdash-toolbar__search input:focus,
.calcdash-toolbar__sort select:focus {
	border-color: var(--color-primary-500, #6366f1);
	outline: 2px solid var(--color-primary-500, #6366f1);
	outline-offset: -1px;
}

.calcdash-toolbar__sort {
	display: flex;
	align-items: center;
	gap: .5rem;
	color: var(--color-gray-600, #4b5563);
	font-size: .875rem;
}

.calcdash-toolbar__sort select {
	height: 2.75rem;
	padding: 0 2rem 0 .75rem;
	border: 1px solid var(--color-gray-300, #d1d5db);
	border-radius: .5rem;
	background-color: var(--color-white, #fff);
	color: var(--color-gray-900, #111827);
	font-size: 1rem;
}

.calcdash-toolbar__status {
	flex-basis: 100%;
	margin: 0;
	color: var(--color-gray-600, #4b5563);
	font-size: .875rem;
}

.calcdash-toolbar__status:empty {
	display: none;
}

.dark .calcdash-toolbar__search input,
.dark .calcdash-toolbar__sort select {
	border-color: var(--color-gray-600, #4b5563);
	background-color: var(--color-gray-800, #1f2937);
	color: #fff;
}

.dark .calcdash-toolbar__sort,
.dark .calcdash-toolbar__status {
	color: var(--color-gray-300, #d1d5db);
}

/* Groups (subcategories) in a category. */
.calcdash-group {
	margin-bottom: 2.5rem;
	scroll-margin-top: 1rem;
}

.calcdash-group__title {
	display: flex;
	align-items: center;
	gap: .75rem;
	margin: 0 0 .75rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--color-gray-200, #e5e7eb);
	color: var(--color-gray-900, #111827);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.calcdash-group__title a {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	min-height: 2.5rem;
}

.calcdash-group__title a:hover {
	color: var(--color-primary-700, #4338ca);
}

.calcdash-group__icon {
	color: var(--color-primary-600, #4f46e5);
	font-size: 1.125rem;
}

.calcdash-group__arrow {
	font-size: .875rem;
	opacity: .5;
}

.calcdash-group__title a:hover .calcdash-group__arrow {
	opacity: 1;
}

.calcdash-group__count {
	padding: 0 .5rem;
	border-radius: 9999px;
	background: var(--color-gray-100, #f3f4f6);
	color: var(--color-gray-600, #4b5563);
	font-family: inherit;
	font-size: .8125rem;
	font-weight: 500;
	line-height: 1.5rem;
}

.dark .calcdash-group__title {
	border-color: var(--color-gray-700, #374151);
	color: #fff;
}

.dark .calcdash-group__title a:hover {
	color: var(--color-primary-300, #a5b4fc);
}

.dark .calcdash-group__icon {
	color: var(--color-primary-300, #a5b4fc);
}

.dark .calcdash-group__count {
	background: var(--color-gray-700, #374151);
	color: var(--color-gray-300, #d1d5db);
}

.calcdash-list-empty {
	padding: 2rem 1rem;
	border: 1px dashed var(--color-gray-300, #d1d5db);
	border-radius: .75rem;
	color: var(--color-gray-700, #374151);
	text-align: center;
}

.calcdash-list-empty a {
	display: inline-flex;
	align-items: center;
	min-height: 2.75rem;
	margin-top: .5rem;
	padding: 0 1.25rem;
	border-radius: .5rem;
	background: var(--color-primary-600, #4f46e5);
	color: #fff;
	font-weight: 600;
}

.dark .calcdash-list-empty {
	border-color: var(--color-gray-600, #4b5563);
	color: var(--color-gray-300, #d1d5db);
}

/* ---------- Home page ---------- */

.calcdash-section-title {
	margin: 0 0 1rem;
	color: var(--color-gray-900, #111827);
	font-size: 1.25rem;
	font-weight: 600;
	line-height: 1.3;
}

.dark .calcdash-section-title {
	color: #fff;
}

.calcdash-home-search {
	position: relative;
	max-width: 42rem;
	margin-top: 1.5rem;
}

.calcdash-home-search__field {
	position: relative;
	display: flex;
	gap: .5rem;
}

.calcdash-home-search__icon {
	position: absolute;
	top: 50%;
	left: 1rem;
	color: var(--color-gray-500, #6b7280);
	font-size: 1.125rem;
	transform: translateY(-50%);
	pointer-events: none;
}

.calcdash-home-search__field input {
	flex: 1;
	min-width: 0;
	height: 3.25rem;
	padding: 0 1rem 0 2.75rem;
	border: 1px solid var(--color-gray-300, #d1d5db);
	border-radius: .75rem;
	background: var(--color-white, #fff);
	color: var(--color-gray-900, #111827);
	font-size: 1rem;
	box-shadow: 0 1px 2px rgb(0 0 0 / .05);
}

.calcdash-home-search__field input::placeholder {
	color: var(--color-gray-500, #6b7280);
}

.calcdash-home-search__field input:focus {
	border-color: var(--color-primary-500, #6366f1);
	outline: 2px solid var(--color-primary-500, #6366f1);
	outline-offset: -1px;
}

.calcdash-home-search__submit {
	flex: none;
	height: 3.25rem;
	padding: 0 1.25rem;
	border-radius: .75rem;
	font-weight: 600;
	cursor: pointer;
}

/* On narrow phones the button keeps only the field's width free: it moves under the field. */
@media (max-width: 379.98px) {
	.calcdash-home-search__field {
		flex-wrap: wrap;
	}

	.calcdash-home-search__submit {
		width: 100%;
	}
}

.calcdash-home-search__list {
	position: absolute;
	z-index: 40;
	top: calc(3.25rem + .375rem);
	right: 0;
	left: 0;
	max-height: min(24rem, 60vh);
	margin: 0;
	padding: .375rem;
	overflow-y: auto;
	border: 1px solid var(--color-gray-200, #e5e7eb);
	border-radius: .75rem;
	background: var(--color-white, #fff);
	list-style: none;
	box-shadow: 0 12px 32px rgb(0 0 0 / .12);
}

.calcdash-home-search__option {
	display: flex;
	flex-direction: column;
	gap: .125rem;
	padding: .625rem .75rem;
	border-radius: .5rem;
	cursor: pointer;
}

.calcdash-home-search__option:hover,
.calcdash-home-search__option[aria-selected="true"] {
	background: var(--color-primary-50, #eef2ff);
}

.calcdash-home-search__title {
	color: var(--color-gray-900, #111827);
	font-weight: 600;
}

.calcdash-home-search__category {
	color: var(--color-gray-500, #6b7280);
	font-size: .8125rem;
}

.calcdash-home-search__hint {
	margin: .5rem 0 0;
	color: var(--color-gray-600, #4b5563);
	font-size: .875rem;
}

.dark .calcdash-home-search__field input,
.dark .calcdash-home-search__list {
	border-color: var(--color-gray-600, #4b5563);
	background: var(--color-gray-800, #1f2937);
	color: #fff;
}

.dark .calcdash-home-search__option:hover,
.dark .calcdash-home-search__option[aria-selected="true"] {
	background: var(--color-gray-700, #374151);
}

.dark .calcdash-home-search__title {
	color: #fff;
}

.dark .calcdash-home-search__category,
.dark .calcdash-home-search__hint {
	color: var(--color-gray-400, #9ca3af);
}

/* "Recently used": hidden until the script fills it; room is kept when there is history. */
.calcdash-recent .calcdash-chips__list {
	min-height: 3rem;
}

html.has-recent .calcdash-recent[hidden] {
	display: block !important;
}

/* Categories on the home page: compact cards, two per row on phones. */
.calcdash-cat-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: .75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 768px) {
	.calcdash-cat-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 1rem;
	}
}

@media (min-width: 1024px) {
	.calcdash-cat-grid {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.calcdash-cat-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .375rem;
	height: 100%;
	padding: 1rem .75rem;
	text-align: center;
}

@media (min-width: 768px) {
	.calcdash-cat-card {
		padding: 1.5rem 1rem;
	}
}

.calcdash-cat-card__icon {
	font-size: 1.5rem;
}

.calcdash-cat-card__title {
	margin: 0;
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.3;
	overflow-wrap: break-word;
	hyphens: auto;
	text-wrap: balance;
}

@media (min-width: 768px) {
	.calcdash-cat-card__title {
		font-size: 1.125rem;
	}
}

.calcdash-cat-card__count {
	margin: 0;
	font-size: .8125rem;
}

/* ---------- Spacing fixes (style.css has no pt-8, pb-6, mb-10, lg:pt-14… utilities) ---------- */

/* Side padding of page sections, as px-4 on the other templates. */
.calcdash-gutter {
	padding-inline: 1rem;
}

.calcdash-home-hero {
	padding-top: 2rem;
	padding-bottom: 2rem;
}

@media (min-width: 1024px) {
	.calcdash-home-hero {
		padding-top: 3.5rem;
		padding-bottom: 2.5rem;
	}
}

.calcdash-home-section {
	margin-bottom: 2.5rem;
}

@media (min-width: 1024px) {
	.calcdash-home-section {
		margin-bottom: 3.5rem;
	}
}

.calcdash-home-search__submit {
	background: var(--color-primary-600, #4f46e5);
	color: #fff;
}

.calcdash-home-search__submit:hover {
	background: var(--color-primary-700, #4338ca);
}

.calcdash-home-search__submit:focus-visible {
	outline: 2px solid var(--color-primary-600, #4f46e5);
	outline-offset: 2px;
}

/* Subcategory chips: apart from the description above and the search below. */
.calcdash-chips {
	margin-top: 1.25rem;
}

@media (min-width: 768px) {
	.calcdash-chips {
		margin-top: 1.5rem;
	}
}

/* An ad Google could not fill leaves no empty band (Google's own recommendation). */
ins.adsbygoogle[data-ad-status="unfilled"] {
	display: none !important;
}

.calcdash-ad:has(ins.adsbygoogle[data-ad-status="unfilled"]) {
	display: none !important;
}

/* ---------- Content aligned with the header (px-4 sm:px-6 lg:px-8 in header.php) ---------- */

.calcdash-gutter {
	padding-inline: 1rem;
}

.calcdash-gutter-margin {
	margin-inline: 1rem;
}

@media (min-width: 640px) {
	.calcdash-gutter {
		padding-inline: 1.5rem;
	}

	.calcdash-gutter-margin {
		margin-inline: 1.5rem;
	}
}

@media (min-width: 1024px) {
	.calcdash-gutter {
		padding-inline: 2rem;
	}

	.calcdash-gutter-margin {
		margin-inline: 2rem;
	}
}

/* Cards have an inner padding for their hover area: pulled out by the same amount, their text
   lines up with the headings and the search field above. */
.calcdash-grid {
	margin-inline: -.75rem;
}

/* Parent category chip on a tag page: a "back" link, set apart from the sibling sections. */
.calcdash-chips__parent {
	display: flex;
	align-items: center;
	padding-right: .5rem;
	border-right: 1px solid var(--color-gray-200, #e5e7eb);
}

.dark .calcdash-chips__parent {
	border-color: var(--color-gray-700, #374151);
}

.calcdash-chip__back {
	font-size: .75rem;
	transform: rotate(180deg);
}

[dir="rtl"] .calcdash-chip__back {
	transform: none;
}

/* The in-list ad keeps the gutter of the list (the grid is pulled out by .75rem). */
.calcdash-list-ad {
	padding-inline: .75rem;
}

/* ---------- Light / dark follows the site's toggle, not the system ---------- */

/* The meta tag (color-scheme: light dark) lets the browser pick text and control colours from
   the system theme. When the site is switched to the other theme, text without its own colour
   (like the language menu) ended up white on white. The class set in header.php decides. */
:root {
	color-scheme: light;
}

:root.dark {
	color-scheme: dark;
}

/* Language menu (WPCalc AI Studio): explicit colours, readable in both themes. */
.header-search .wpcalc-languages--dropdown .wpcalc-languages__list {
	border-color: var(--color-gray-200, #e5e7eb);
	background: #fff;
	color: var(--color-gray-900, #111827);
}

.header-search .wpcalc-languages--dropdown .wpcalc-languages__item a {
	color: inherit;
}

.header-search .wpcalc-languages--dropdown .wpcalc-languages__item a:hover,
.header-search .wpcalc-languages--dropdown .wpcalc-languages__item a:focus-visible {
	background: var(--color-gray-100, #f3f4f6);
}

.header-search .wpcalc-languages--dropdown .wpcalc-languages__item.is-current a {
	color: var(--color-primary-700, #4338ca);
}

.dark .header-search .wpcalc-languages--dropdown .wpcalc-languages__list {
	border-color: var(--color-gray-700, #374151);
	background: var(--color-gray-800, #1f2937);
	color: var(--color-gray-100, #f3f4f6);
}

.dark .header-search .wpcalc-languages--dropdown .wpcalc-languages__item a:hover,
.dark .header-search .wpcalc-languages--dropdown .wpcalc-languages__item a:focus-visible {
	background: var(--color-gray-700, #374151);
}

.dark .header-search .wpcalc-languages--dropdown .wpcalc-languages__item.is-current a {
	color: var(--color-primary-300, #a5b4fc);
}