.calc-kin {

	--kin-page: transparent;
	--kin-panel: var(--wp--preset--color--base);
	--kin-section: var(--wp--preset--color--surface);
	--kin-plate: var(--wp--preset--color--surface);

	--kin-ink: var(--wp--preset--color--contrast);
	--kin-ink-muted: var(--wp--preset--color--muted);
	--kin-heading-ink: var(--wp--preset--color--contrast);
	--kin-heading-bg: transparent;

	--kin-rule: var(--sinc-rule, rgb(46 42 58 / 0.14));
	--kin-panel-border: 1px solid var(--kin-rule);
	--kin-panel-radius: 4px;
	--kin-panel-shadow: none;

	--kin-action: var(--wp--preset--color--purple);
	--kin-action-ink: var(--wp--preset--color--base);
	--kin-action-hover: var(--wp--preset--color--purple-deep);
	--kin-focus: var(--wp--preset--color--purple);

	--kin-wave-portal: var(--wp--preset--color--gold);
	--kin-chamber: var(--wp--preset--color--base);
	--kin-chamber-rule: var(--kin-rule);
	--kin-today: var(--wp--preset--color--purple);
	--kin-today-ink: var(--wp--preset--color--base);

	--kin-well: var(--wp--preset--color--surface);
	--kin-well-ink: var(--wp--preset--color--contrast);
	--kin-input: var(--wp--preset--color--base);
	--kin-input-ink: var(--wp--preset--color--contrast);
}

.sinc-kin-page .alignwide {
	max-width: 1200px;
}

.calc-kin .calc-title {
	display: none;
}

.calc-kin img {
	max-width: 100%;
	height: auto;
}

.calc-kin a:focus-visible,
.calc-kin input:focus-visible,
.calc-kin select:focus-visible,
.calc-kin summary:focus-visible {
	outline: 2px solid var(--kin-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

.calc-kin {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
	padding-top: 0.5rem;
	background: var(--kin-page);
}

.calc-kin > .calc-title,
.calc-kin > .calc-error {
	grid-column: 1 / -1;
}

.calc-kin .calc-col {
	padding: 0 0 0.75rem;
	background-color: var(--kin-panel);
	border: var(--kin-panel-border);
	border-radius: var(--kin-panel-radius);
	box-shadow: var(--kin-panel-shadow);
}

.calc-kin .col-calcular {
	padding-bottom: 0;
}

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

@media (min-width: 1100px) {
	.calc-kin {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.calc-kin h2 {
	margin: 0 0 0.75rem;
	padding: 0.75rem 0.75rem 0.6rem;
	background-color: var(--kin-heading-bg);
	border-bottom: 1px solid var(--kin-rule);
	color: var(--kin-heading-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-align: center;
	cursor: default;
}

.calc-kin .col-wave > h2:not(:first-child),
.calc-kin .col-orac > h2:not(:first-child),
.calc-kin .cronopsi > h2 {
	border-top: 1px solid var(--kin-rule);
}

.calc-kin .cronopsi > h2 {
	margin-inline: -0.75rem;
}

.calc-kin .calc-section h3 {
	margin: 0 0 0.5rem;
	padding: 0;
	color: var(--kin-ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.calc-kin ul {
	margin: 0;
}

.calc-kin .calc-section {
	margin: 0 0.75rem 0.75rem;
	padding: 0.75rem;
	background-color: var(--kin-section);
	border-radius: var(--kin-panel-radius);
	text-align: center;
}

.calc-kin .calc-section:first-child {
	margin: 0.75rem 0.75rem 0.75rem;
}

.calc-kin .set-date form {
	display: grid;
	grid-template-columns: 3.25rem minmax(0, 1fr) 4.5rem;
	gap: 1px;
	text-align: center;
}

.calc-kin .set-kin form {
	display: flex;
	justify-content: center;
	gap: 1px;
	text-align: center;
}

.calc-kin .calc-section input,
.calc-kin .calc-section select {

	box-sizing: border-box;
	height: 2.75rem;
	min-width: 0;
	padding: 0 0.25rem;
	background-color: var(--kin-input);
	border: 1px solid var(--kin-rule);
	color: var(--kin-input-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem; 
	text-align: center;
}

.calc-kin .calc-section select {
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
	text-align-last: center;
	max-width: 100%;
}

.calc-kin .calc-section .set-date-moon select {
	font-size: 0.8125rem;
}

.calc-kin .date-calc-dia {
	border-radius: 4px 0 0 4px;
}

.calc-kin .date-calc-ano {
	border-radius: 0 4px 4px 0;
}

.calc-kin .set-date input[type="submit"] {
	grid-column: 1 / -1;
	justify-self: center;
}

.calc-kin .calc-section input[type="submit"] {
	width: 100%;
	max-width: 11rem;
	height: 2.75rem;
	margin-top: 0.5rem;
	padding: 0 1.25rem;
	background-color: var(--kin-action);
	border: 0;
	border-radius: 4px;
	color: var(--kin-action-ink);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	cursor: pointer;
	transition: background-color 0.2s var(--sinc-ease, ease);
}

.calc-kin .calc-section input[type="submit"]:hover {
	background-color: var(--kin-action-hover);
}

.calc-kin .kin-calc-num {
	flex: 1 1 auto;
	border-radius: 4px 0 0 4px;
}

.calc-kin .calc-section .set-kin input[type="submit"] {
	flex: 0 0 auto;
	width: auto;
	max-width: none;
	margin-top: 0;
	border-radius: 0 4px 4px 0;
}

.calc-kin .col-kin-res {
	text-align: center;
	position: relative;
}

.calc-kin .col-kin-res > p {
	margin-bottom: 0;
}

.calc-kin h2.kin-number {
	padding-top: 0.9rem;
	padding-bottom: 0.5rem;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: none;
	line-height: 1.1;
}

.calc-kin .kin-img {
	margin: 0;
	padding: 1rem 0.5rem;
	background-color: var(--kin-plate);
	border-block: 1px solid var(--kin-rule);
	text-align: center;
}

.calc-kin .kin-img img {
	max-width: 10rem;
}

.calc-kin .kin-img--placeholder {
	display: grid;
	place-items: center;

	box-sizing: border-box;
	min-height: 15.35rem;
}

.calc-kin .kin-img--placeholder::before {
	content: "";
	inline-size: 8rem;
	block-size: 8rem;
	border: 1px dashed var(--kin-rule);
	border-radius: 50%;
}

.calc-kin .sinc-seal-glyph {
	display: block;
}

.calc-kin .sinc-seal-glyph:hover img {
	outline: 2px solid var(--kin-action);
	outline-offset: 1px;
	border-radius: 4px;
}

.calc-kin .sinc-tone-glyph {
	display: block;
}

.calc-kin .sinc-tone-glyph:hover img {
	outline: 2px solid var(--kin-action);
	outline-offset: 1px;
	border-radius: 4px;
}

.calc-kin .kin-name {
	margin: 0.9rem 0.75rem 0.5rem;
	color: var(--kin-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--sinc-display-size, 1.25rem);
	line-height: 1.25;
	text-align: center;
}

.calc-kin .kin-afirmacao,
.calc-kin .kin-digo {
	margin-inline: 0.75rem;
	color: var(--kin-ink);
	font-size: 0.9375rem;
	line-height: 1.6;
	text-align: center;
}

.calc-kin .kin-digo {
	color: var(--kin-ink-muted);
	font-style: italic;
}

.calc-kin hr {
	max-width: 4rem;
	height: 1px;
	margin: 1rem auto;
	background-color: var(--kin-rule);
	border: 0;
	opacity: 1;
}

.calc-kin .gap-img {
	display: none;
}

.calc-kin .gap-img ~ .kin-number::before {
	content: "";
	display: inline-block;
	width: 0.6em;
	height: 0.82em;
	margin-right: 0.3em;
	vertical-align: -0.04em;
	background: url("../img/calcula-kin/gap-day.png") center / contain no-repeat;
}

.calc-kin p:empty {
	display: none;
}

.calc-kin .nav-kin {
	display: flex;
	justify-content: center;
	gap: 2px;
	list-style: none;
	padding: 0 0.75rem;
	margin: 0 0 0.9rem;
}

.calc-kin .nav-kin li {
	flex: 1 1 0;
	text-align: center;
}

.calc-kin .nav-kin li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 2.5rem;
	padding: 0 0.15rem;
	border: 1px solid var(--kin-rule);
	border-radius: 4px;
	background-color: var(--kin-panel);
	color: var(--kin-ink);
	font-size: 0.8125rem;
	text-decoration: none;
	transition: background-color 0.2s var(--sinc-ease, ease),
		color 0.2s var(--sinc-ease, ease);
}

.calc-kin .nav-kin li a:hover {
	background-color: var(--kin-action);
	border-color: var(--kin-action);
	color: var(--kin-action-ink);
}

.calc-kin .moon-section {
	position: relative;
	padding: 0 0.75rem 1.15rem;
}

.calc-kin .moon-totem {
	position: absolute;
	top: 50%;
	right: -0.35rem;
	translate: 0 -50%;
	width: 5.5rem;
	height: 5.5rem;
	background-color: color-mix(in srgb, var(--kin-ink) 13%, transparent);
	-webkit-mask: var(--moon-totem) center / contain no-repeat;
	mask: var(--moon-totem) center / contain no-repeat;
	pointer-events: none;
}

.calc-kin .moon-phrase {
	position: relative;
	max-width: 15rem;
	margin: 0.35rem auto 0;
	color: var(--kin-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
	line-height: 1.75;
	text-align: center;
	text-wrap: balance;
}

.calc-kin .moon-plasma {
	white-space: nowrap;
}

.calc-kin .moon-plasma-img {
	width: 1.15em;
	height: auto;
	margin-right: 0.3em;
	vertical-align: -0.2em;
}

.calc-kin .moon-day {
	font-size: 1.5rem;
	line-height: 1;
}

.calc-kin .moon-lua,
.calc-kin .moon-animal {
	white-space: nowrap;
}

.calc-kin .moon-tone {
	display: inline-block;
	vertical-align: baseline;
	text-align: center;
}

.calc-kin .moon-tone-img {
	display: block;
	width: 3.5rem;
	height: auto;
	margin: 0 auto -0.2rem;
}

.calc-kin .dot {
	max-width: 12rem;
	margin: 0 auto 0.75rem;
	padding: 0.75rem;
	background-color: var(--kin-well);
	border: 1px solid var(--kin-rule);
	border-radius: 4px;
	color: var(--kin-well-ink);
	text-align: center;
}

.calc-kin .dot img {
	width: 3rem;
}

.calc-kin .dot p {
	margin: 0.35rem 0 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.05rem;
}

.calc-kin .calc-onda {
	padding: 0 0.75rem;
}

.calc-kin .calc-onda table {
	width: 100%;
	max-width: 21rem;
	margin: 0 auto;
	border: 0;
	table-layout: fixed;
}

.calc-kin .calc-onda table td {
	padding: 2px;
	border: 0;
}

.calc-kin .wave-portal,
.calc-kin .wave-chamber,
.calc-kin .wave-today {
	display: block;
	padding: 3px 2px;
	border: 1px solid var(--kin-chamber-rule);
	border-radius: 3px;
	text-align: center;

	line-height: 0;
	transition: background-color 0.2s var(--sinc-ease, ease);
}

.calc-kin .wave-chamber {
	background-color: var(--kin-chamber);
}

.calc-kin .wave-portal {
	background-color: var(--kin-wave-portal);
	border-color: var(--kin-wave-portal);
}

.calc-kin .wave-today {
	background-color: var(--kin-today);
	border-color: var(--kin-today);
}

.calc-kin .calc-onda table td a:hover {
	background-color: var(--kin-today);
	border-color: var(--kin-today);
}

.calc-kin .wave-tone-img,
.calc-kin .wave-seal-img {
	display: block;
	margin: 0 auto;
}

.calc-kin .wave-tone-img {
	width: 80%;
	padding: 2px 0;
}

.calc-kin .oraculo {
	padding: 0 0.75rem;
}

.calc-kin .oraculo table {
	width: 100%;
	max-width: 20rem;
	margin: 0 auto 0.75rem;
	border: 0;
	table-layout: fixed;
}

.calc-kin .oraculo table td {
	padding: 4px;
	border: 0;
}

.calc-kin .oraculo table td > div > .sinc-seal-glyph img {
	display: block;
	width: 100%;
}

.calc-kin .oraculo table tr td > div {
	padding: 3px;
	border: 1px solid var(--kin-rule);
	border-radius: 3px;
	background-color: var(--kin-chamber);
	transition: background-color 0.2s var(--sinc-ease, ease);
}

.calc-kin .oraculo table td > div:hover {
	background-color: var(--kin-well);
}

.calc-kin .cronopsi {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin: 0 0.75rem 0.9rem;
}

.calc-kin .cronopsi h2 {
	flex: 1 0 100%;
	margin-bottom: 0.75rem;
}

.calc-kin .cronopsi > div {
	color: var(--kin-ink);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.5rem;
	text-align: center;
}

.calc-kin .cronopsi img {
	display: block;
	max-width: 3rem;
	margin: 0 auto;
}

.calc-kin .cronopsi br {
	display: none;
}

.calc-kin .tone-crono {
	filter: none;
	margin-bottom: 0.25rem;
}

.calc-kin .list-family,
.calc-kin .list-clan {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem;
	list-style: none;
	padding: 0 0.75rem;
	margin: 0 0 0.9rem;
	text-align: center;
}

.calc-kin .list-family li,
.calc-kin .list-clan li {
	margin: 0;
}

.calc-kin .list-family li img,
.calc-kin .list-clan li img {
	display: block;
	width: 2.5rem;
	border-radius: 4px;
}

.calc-kin .calc-error {
	margin: 0 0 0.5rem;
	padding: 1rem 1.25rem;
	background-color: var(--kin-section);

	border: 1px solid color-mix(in srgb, var(--wp--preset--color--red) 35%, transparent);
	border-radius: var(--kin-panel-radius);
	color: var(--kin-ink);
	text-align: center;
}

.calc-kin .calc-error h2 {
	margin: 0 0 0.35rem;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--red);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

.calc-kin .calc-error h3 {
	margin: 0.5rem 0 0;
	color: var(--kin-ink-muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.calc-kin .calc-error p {
	margin: 0;
	font-size: 0.9375rem;
}

.calc-kin .ttip {
	position: relative;
}

.calc-kin .tooltip-text {
	visibility: hidden;
	opacity: 0;
	position: absolute;
	z-index: 3;
	top: calc(100% + 0.4rem);
	left: 50%;
	translate: -50% 0;
	width: 11rem;
	max-width: 60vw;
	padding: 0.6rem 0.7rem;
	background-color: var(--wp--preset--color--contrast);
	border-radius: 4px;
	box-shadow: var(--sinc-lift, 0 18px 32px -20px rgb(46 42 58 / 0.32));
	color: var(--wp--preset--color--base);
	font-size: 0.8125rem;
	line-height: 1.4;
	text-align: center;
	transition: opacity 0.2s var(--sinc-ease, ease);
}

.calc-kin .tooltip-text::after {
	content: "";
	position: absolute;
	bottom: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: transparent transparent var(--wp--preset--color--contrast) transparent;
}

.calc-kin .ttip:hover .tooltip-text,
.calc-kin .ttip:focus-within .tooltip-text {
	visibility: visible;
	opacity: 1;
}

.calc-kin .tooltip-text b {
	display: block;
	margin-bottom: 0.2rem;
	color: var(--wp--preset--color--gold);
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.creditos {
	margin: 0.75rem 0 0;
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-align: center;
	text-transform: uppercase;
}

.creditos a {
	text-decoration: none;
}

@media print {
	.calc-kin {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.calc-kin .col-calcular,
	.calc-kin .nav-kin,
	.calc-kin .tooltip-text {
		display: none;
	}

	.calc-kin .calc-col {
		border: 0;
	}

	.calc-kin .wave-tone-img,
	.calc-kin .wave-seal-img {
		width: 62px;
		height: auto;
	}

	.calc-kin .tabela-oraculo img {
		width: 60px;
	}

	.calc-kin a[href]::after {
		content: none !important;
	}
}