* {
	box-sizing: border-box;
}
:root {
	font-family: Arial, sans-serif;
	color: #193b50;
	background: #f2f6f8;
}
body {
	margin: 0;
}
a {
	color: #21698d;
}
.portal-header {
	height: 76px;
	background: white;
	border-bottom: 1px solid #cbdbe4;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30px;
	position: sticky;
	top: 0;
	z-index: 10;
}
.brand {
	font-size: 22px;
	text-decoration: none;
	color: #193b50;
}
.brand strong {
	color: #27769b;
}
.header-right {
	display: flex;
	gap: 18px;
	align-items: center;
}
/* The sidebar stays in document flow and follows the page below the header. */
.portal-layout {
	display: grid;
	grid-template-columns: 232px minmax(0, 1fr);
	min-height: calc(100vh - 76px);
	background: linear-gradient(to right, #17394d 232px, transparent 232px);
}
aside {
	position: sticky;
	top: 76px;
	align-self: start;
	width: 232px;
	padding: 28px 16px;
	background: #17394d;
}
nav {
	display: grid;
	gap: 8px;
}
nav a,
nav button {
	text-align: left;
	color: #e9f3f8;
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	padding: 14px 12px;
	font-size: 14px;
	cursor: pointer;
}
nav a:hover,
nav a.active,
nav button:hover {
	background: #24546d;
	border-color: #41718b;
}
#workspace {
	min-width: 0;
	padding: 30px;
	max-width: 1800px;
}
h1 {
	font-size: 27px;
	margin: 0 0 26px;
}
h2 {
	font-size: 21px;
	margin-top: 0;
}
p {
	line-height: 1.6;
}
.card {
	padding: 30px;
	border: 1px solid #c4d5e0;
	background: white;
	margin-bottom: 20px;
}
.auth-card {
	max-width: 560px;
	margin: 20px auto;
	border-top: 4px solid #267799;
}
.eyebrow {
	font-size: 11px;
	letter-spacing: 0.14em;
	color: #56809a;
	margin-bottom: 12px;
}
form {
	display: grid;
	gap: 18px;
}
label {
	display: grid;
	gap: 8px;
	font-size: 14px;
}
label.check {
	display: flex;
	align-items: center;
	gap: 12px;
}
input,
select,
textarea {
	border: 1px solid #9db7c8;
	color: #193b50;
	background: white;
	padding: 11px;
	font: inherit;
	max-width: 100%;
}
input[type="checkbox"] {
	width: 22px;
	height: 22px;
	accent-color: #258a55;
}
input:focus,
select:focus,
textarea:focus {
	outline: none;
	box-shadow:
		inset 0 0 0 1px #267799,
		0 2px 5px rgb(25 59 80 / 20%);
	border-left-color: #267799;
	border-right-color: #267799;
	border-top-color: #267799;
}
button:focus-visible,
a:focus-visible {
	outline: 2px solid #2b8bb8;
	outline-offset: 3px;
}
button,
.button {
	cursor: pointer;
	font: inherit;
	padding: 11px 17px;
	background: #246b8d;
	color: white;
	border: 1px solid #246b8d;
	text-decoration: none;
	display: inline-block;
}
button.secondary,
.button.secondary {
	background: white;
	color: #245f7d;
}
button:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}
.actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}
.hint,
#session-warning {
	background: #fff5dc;
	border: 1px solid #d7b15e;
	padding: 16px;
	line-height: 1.6;
	margin-bottom: 18px;
}
.alert {
	padding: 16px;
	margin-bottom: 18px;
	line-height: 1.5;
	white-space: pre-wrap;
}
.alert.error {
	background: #fdebea;
	border: 1px solid #c96761;
	color: #8c2620;
}
.alert.success {
	background: #e6f4ec;
	border: 1px solid #80b79a;
	color: #246240;
}
#calculator-frame {
	width: 100%;
	display: block;
	height: 900px;
	border: 0;
	background: transparent;
}
[hidden] {
	display: none !important;
}
.table-wrap {
	overflow-x: auto;
}
table {
	width: 100%;
	border-collapse: collapse;
	font-size: 13px;
}
th,
td {
	padding: 12px;
	border-bottom: 1px solid #d5e1e8;
	text-align: left;
	vertical-align: top;
}
th {
	background: #edf3f6;
}
.account-layout {
	display: grid;
	grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr);
	gap: 24px;
}
small {
	color: #567588;
	line-height: 1.5;
}
footer {
	color: #648395;
	font-size: 12px;
	margin-top: 24px;
}
#menu-toggle {
	display: none;
}
.account-toolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 18px;
	margin-bottom: 18px;
}
.account-toolbar input {
	width: 260px;
}
.account-toolbar button {
	margin-left: auto;
}
.card > button + form {
	margin-top: 24px;
}
.welcome-questions span {
	display: block;
}
@media (max-width: 850px) {
	.portal-layout {
		display: block;
		background: transparent;
	}
	aside {
		position: sticky;
		top: 76px;
		z-index: 9;
		width: auto;
		padding: 8px;
	}
	#menu-toggle {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		width: 100%;
		background: transparent;
		border-color: #41718b;
		text-align: left;
	}
	#menu-current {
		margin-left: auto;
		font-size: 13px;
	}
	nav {
		display: none;
		gap: 2px;
		padding-top: 8px;
	}
	.menu-open nav {
		display: grid;
	}
	nav a,
	nav button {
		padding: 10px;
	}
	#workspace {
		margin: 0;
		padding: 18px;
	}
	.portal-header {
		padding: 12px 18px;
		height: 76px;
		gap: 12px;
	}
	.brand {
		font-size: 18px;
	}
	#identity {
		display: none;
	}
	.account-layout {
		grid-template-columns: 1fr;
	}
	.card {
		padding: 22px;
	}
	h1 {
		font-size: 23px;
	}
}

.confirm-dialog {
	max-width: 560px;
	border: 1px solid #91aaba;
	padding: 28px;
	color: #193b50;
}
.confirm-dialog::backdrop {
	background: rgb(15 36 50 / 45%);
}

/* On short screens allow all expanded links to remain reachable. */
@media (max-height: 620px) {
	#navigation {
		max-height: calc(100dvh - 150px);
		overflow-y: auto;
	}
}

/* Required controls show their syntactic state in every portal form. */
form input:not([type="checkbox"]),
form select,
form textarea {
	min-width: 0;
	width: 100%;
	border-radius: 3px;
}
.required-field {
	border-bottom: 3px solid #b62929;
}
.required-field.field-valid {
	border-bottom-color: #218348;
}
.field-invalid {
	border-bottom: 3px solid #b62929;
}
.field-marker {
	font-size: 16px;
	font-weight: 700;
	margin-left: 5px;
}
.field-caption {
	display: inline;
}
.password-match {
	padding: 9px 12px;
	border: 1px solid currentColor;
	background: #f3f6f8;
	font-size: 13px;
}
.password-empty > strong,
.password-empty > progress,
.password-empty > small {
	display: none;
}
.password-empty ul {
	list-style: none;
	padding: 0;
}
.alert.warning {
	background: #fff5dc;
	border: 1px solid #d7b15e;
	color: #775000;
}
.password-field {
	position: relative;
	display: flex;
	align-items: stretch;
	min-width: 0;
}
.password-field input {
	padding-right: 54px;
}
.password-toggle {
	position: absolute;
	right: 3px;
	top: 3px;
	bottom: 5px;
	width: 44px;
	padding: 4px;
	border: 0;
	background: white;
	color: #245f7d;
	font-size: 22px;
}
.password-feedback {
	display: grid;
	gap: 10px;
	padding: 14px;
	background: #f3f6f8;
	border: 1px solid #c4d5e0;
	font-size: 13px;
	line-height: 1.5;
}
.password-feedback ul {
	margin: 0;
	padding-left: 20px;
}
.password-feedback li + li {
	margin-top: 8px;
}
.password-feedback progress {
	appearance: none;
	width: 100%;
	height: 12px;
	border: 0;
	border-radius: 3px;
	overflow: hidden;
	--check-color: #b62929;
	accent-color: var(--check-color);
}
.password-feedback progress[data-state="pending"] {
	--check-color: #bd7400;
}
.password-feedback progress[data-state="valid"] {
	--check-color: #218348;
}
.password-feedback progress::-webkit-progress-bar {
	background: #dce3e7;
}
.password-feedback progress::-webkit-progress-value {
	background: var(--check-color);
	transition: width 150ms;
}
.password-feedback progress::-moz-progress-bar {
	background: var(--check-color);
}
.rule-invalid {
	color: #a32626;
}
.rule-valid {
	color: #1d743d;
}
.rule-pending {
	color: #875100;
}
.form-feedback:empty {
	display: none;
}
.form-feedback {
	scroll-margin: 160px 0;
}
.form-feedback .alert {
	margin: 0;
}

/* Native checkbox drawing may ignore borders; mark its required label too. */
label.check:has(input.required-field) {
	border-bottom: 3px solid #b62929;
	border-radius: 3px;
	padding-bottom: 6px;
}
label.check:has(input.required-field.field-valid) {
	border-bottom-color: #218348;
}

.release-dialog {
	max-width: 560px;
	width: calc(100% - 40px);
}
.release-dialog::backdrop {
	background: rgb(12 31 43 / 70%);
}