/* Pop Gen Calculator -- layout only. */

#popgen {
	--pg-line: #d5dbe2;
	--pg-ink: #22303c;
	--pg-mute: #63727f;
	--pg-accent: #2f6f9f;
	--pg-panel: #f6f8fa;
	--pg-ok: #2c7a44;
	--pg-no: #b02a37;
	max-width: 1000px;
	margin: 0 auto;
	color: var(--pg-ink);
}

:root[dark] {   /* the site's Dark/Light setting */
	#popgen {
		--pg-line: #3a3a3a;
		--pg-ink: #e2e2e2;
		--pg-mute: #9aa4ad;
		--pg-panel: #232323;
	}
}

#pg-tabs {
	display: flex;
	gap: 2px;
	border-bottom: 2px solid var(--pg-line);
	margin: 0 0 1.2rem;
	flex-wrap: wrap;
}
#pg-tabs button {
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	font: inherit;
	padding: .55rem 1.1rem;
	color: var(--pg-mute);
	border-bottom: 3px solid transparent;
	margin-bottom: -2px;
}
#pg-tabs button:hover { color: var(--pg-ink); }
#pg-tabs button.active {
	color: var(--pg-accent);
	border-bottom-color: var(--pg-accent);
	font-weight: 600;
}

.pg-panel[hidden] { display: none; }

.pg-note {
	margin: 0 0 1rem;
	padding: .85rem 1.1rem;
	background: var(--pg-panel);
	border-left: 3px solid var(--pg-accent);
	font-size: .95rem;
	line-height: 1.6;
}
.pg-note p { margin: 0; }

.pg-group {
	margin: 1.8rem 0 .8rem;
	font-size: .8rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pg-mute);
	font-weight: 600;
	border-bottom: 1px solid var(--pg-line);
	padding-bottom: .3rem;
}

.pg-card {
	border: 1px solid var(--pg-line);
	border-radius: 6px;
	padding: 1rem 1.1rem;
	margin: 0 0 1rem;
}
.pg-card-title { font-weight: 600; margin-bottom: .3rem; }
.pg-blurb {
	font-size: .88rem;
	color: var(--pg-mute);
	line-height: 1.5;
	margin: .2rem 0 .8rem;
}
.pg-caption {
	font-size: .82rem;
	color: var(--pg-mute);
	line-height: 1.5;
	margin: .3rem 0 1.4rem;
}

.pg-fields {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: .6rem .9rem;
	margin-bottom: .8rem;
}
.pg-field { display: grid; gap: .15rem; font-size: .82rem; }
.pg-field > span { color: var(--pg-mute); }
.pg-field input {
	font: inherit;
	padding: .3rem .4rem;
	border: 1px solid var(--pg-line);
	border-radius: 4px;
	background: transparent;
	color: inherit;
	font-variant-numeric: tabular-nums;
}
.pg-field-wide { grid-column: 1 / -1; }

.pg-answer { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.pg-num {
	font-size: 1.9rem;
	font-weight: 700;
	line-height: 1.1;
	font-variant-numeric: tabular-nums;
	color: var(--pg-accent);
}
.pg-unit { color: var(--pg-mute); font-size: .88rem; }
.pg-lines {
	margin: .4rem 0 .6rem;
	padding-left: 1.1rem;
	font-size: .85rem;
	line-height: 1.55;
	color: var(--pg-ink);
}

.pg-formula {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: .8rem;
	background: var(--pg-panel);
	padding: .45rem .6rem;
	border-radius: 4px;
	overflow-x: auto;
	white-space: pre;
}
.pg-source { font-size: .78rem; color: var(--pg-mute); margin-top: .35rem; }

.pg-scroll { overflow-x: auto; }
.pg-table { border-collapse: collapse; width: 100%; font-size: .84rem; }
.pg-table th, .pg-table td {
	text-align: left;
	padding: .32rem .7rem .32rem 0;
	border-bottom: 1px solid var(--pg-line);
	vertical-align: top;
	font-variant-numeric: tabular-nums;
}
.pg-table th { color: var(--pg-mute); font-weight: 400; }
.pg-table small { color: var(--pg-mute); display: block; margin-top: .2rem; line-height: 1.45; }
.pg-verify td:first-child { white-space: nowrap; font-weight: 700; }
.pg-check-name { font-weight: 600; }

.pg-btn {
	font: inherit;
	padding: .45rem 1.1rem;
	border: 1px solid var(--pg-accent);
	background: var(--pg-accent);
	color: #fff;
	border-radius: 4px;
	cursor: pointer;
}
.pg-btn[disabled] { opacity: .5; cursor: default; }

.pg-ok { color: var(--pg-ok); }
.pg-no { color: var(--pg-no); }
.pg-summary { font-weight: 600; margin: .8rem 0; }
.pg-pass-all { color: var(--pg-ok); }
.pg-fail-all { color: var(--pg-no); }