source ⟩ hypertext ⟩ public ⟩ latbs ⟩ tools ⟩ tools.css

.tool select,
.tool input {
	color: var(--text-acc);
	font-family: inherit;
	font-size: 1em;
	font-style: normal;

	background: transparent;
	border: none;
	border-block-end: 1px solid var(--text-acc);
	border-radius: 0;
}

.tool button {
	margin-block-start: 5px;

	color: var(--text-acc);
	font-family: inherit;
	font-size: 1em;
	font-style: normal;

	background: var(--gentler-acc);
	border: 1px solid var(--text-acc);
	border-radius: 5px;
}

#commtimecalc {
	text-align: center;

	& #commtimecalc-entry {
		font-style: italic;
		text-wrap: balance;
	}

	& #commtimecalc-daily-result {
		display: block;
		margin-block: 1ch;

		color: var(--text-acc);
		font-size: 1.2em;
	}

	& .table-container {
		margin-inline: auto;

		& table {
			font-size: 1em;

			& td b {
				color: var(--text-acc);
			}
		}
	}
}

#porkchop {
	& #porkchop-entry {
		font-style: italic;
		text-align: center;
		text-wrap: balance;

		& #porkchop-departure {
			inline-size: 4em;
		}
	}

	& #porkchop-plot {
		display: block;
		inline-size: 100%;
		max-inline-size: 650px;
		margin-block: 1em;
		margin-inline: auto;
		aspect-ratio: 1.25 / 1;

		& g.tick {
			font-family: var(--sans-serif);
			font-variant-numeric: tabular-nums lining-nums;
		}

		& .x-axis-label {
			font-family: var(--sans-serif);
			font-weight: bold;
			text-anchor: middle;
		}

		& .y-axis-label {
			font-family: var(--sans-serif);
			font-weight: bold;
			text-anchor: middle;
			writing-mode: sideways-lr;
		}

		& .legend-label {
			font-family: var(--sans-serif);
			font-weight: bold;
		}
	}
}

#orrery-tool {
	display: grid;
	grid-template-columns: 3fr 1.25fr;
	gap: 1em;

	margin-block: 0;
	margin-inline: auto;

	& #orrery-plot {
		display: block;
		inline-size: 100%;
		aspect-ratio: 1 / 1;

		border: 1px solid var(--text);
	}

	& #orrery-controls {
		font-family: var(--sans-serif);

		& > label {
			display: block;

			font-size: 0.9em;
			font-weight: bold;
			line-height: 1.1;

			&:not(:first-child) {
				margin-block-start: 0.5em;
			}
		}

		& input[type="range"] {
			margin: 0;
			inline-size: 100%;

			accent-color: var(--text-acc);
		}
		& .orrery-dinkus {
			position: absolute;
			block-size: 1.5em;
			inline-size: 1.75em;

			color: var(--text-acc);
			font-size: 0.9em;
			font-weight: bold;

			background-color: var(--gentler-acc);
			border-radius: 0.5ch;
		}

		& #orrery-date {
			font-size: 0.95em;
		}

		& #orrery-date-buttons {
			display: grid;
			grid-template-columns: 1fr 1fr 1fr 1fr;
			gap: 0.4ch;
			margin-block-start: 0.4ch;

			& .date-button {
				margin-block: 0;
				padding-inline: 0.4em;

				font-size: 0.9em;
				border: 0;

				&:hover {
					font-weight: bold;
				}

				&.long-db {
					grid-column: span 2;
				}
			}
		}

		& #orrery-perspective {
			position: relative;
			container-type: inline-size;

			display: grid;
			grid-template-rows: auto calc(0.9 * 1.5em);

			& #orrery-perspective-dinkus {
				--dinkus-position: 90;

				inset-inline-start: calc(
					10px + (var(--dinkus-position) / 90) * (100cqi - 20px) -
						0.875em
				);
				text-align: center;
			}
		}

		& #orrery-zoom {
			display: grid;
			grid-template-columns: 3.25em auto 1fr;

			& #orrery-zoom-dinkus-container {
				position: relative;
			}
			& #orrery-zoom-dinkus {
				--dinkus-position: 12.69897;

				inline-size: 3.25em;
				inset-block-start: calc(
					10px + ((13.5228787 - var(--dinkus-position)) / 2.5228787) * (11em) - 0.75em
				);
				padding-inline-end: 0.25ch;

				text-align: end;
			}

			& #orrery-zoom-slider {
				inline-size: 11em;
				writing-mode: sideways-lr;
			}
		}
	}
}