/* Panchang for any date and city (mpower/panchang, variant "calculator"). It reuses the daily panchang's tiles,
   lists and tables from tools.css; these rules only fit it to its place lower down the page. */

/* It sits under a heading below today's panchang, not pulled up over the page header like a tool page's first
   form. The extra classes outrank the theme's overlap rule, which can load after this sheet. */
.mpower-tool-body .mpower-tool.mpower-pcalc { margin-top: var(--wp--preset--spacing--40, 1.5rem); }

/* Headings are a level lower than in today's panchang (under the page's h2) but look the same. */
.mpower-pcalc .mpower-kundli__head .mpower-panchang__date {
	margin: var(--wp--preset--spacing--30, 1rem) 0 0.5rem;
	font-size: var(--wp--preset--font-size--large, 1.75rem);
}

.mpower-pcalc .mpower-kundli__block h4 { margin: 0.5rem 0 0.5rem; font-size: 1.25rem; }

/* Previous and next day */
.mpower-pcalc__days { display: flex; flex-wrap: wrap; gap: 0.5rem; }

.mpower-pcalc__days button {
	min-height: 2.5rem;
	padding: 0.4rem 1rem;
	border: 1px solid var(--t-line);
	border-radius: 999px;
	background: var(--t-card);
	color: var(--t-ink);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.mpower-pcalc__days button:hover:not(:disabled) { border-color: var(--t-brass); background: color-mix(in srgb, var(--t-brass) 10%, white); }
.mpower-pcalc__days button:focus-visible { outline: 2px solid color-mix(in srgb, var(--t-marigold) 70%, transparent); outline-offset: 2px; }
.mpower-pcalc__days button:disabled { opacity: 0.5; cursor: not-allowed; }

/* A "Now" pill drops under the choghadiya's name rather than widening the table. */
.mpower-pcalc .mpower-table th { white-space: normal; }

@media (max-width: 480px) {
	.mpower-pcalc .mpower-table { font-size: 0.9rem; }
	.mpower-pcalc .mpower-table th,
	.mpower-pcalc .mpower-table td { padding-inline: 0.3rem; }
	.mpower-pcalc .mpower-table td:last-child { padding-inline-end: 0; text-align: right; }
}