/*
	Humetrica 360 – the sign-in and account pages (Shared/AccountLayout.razor, pages from Humetrica.Identity).
	Same look as Humetrica Assess: the same colours (design tokens), font and calm white card, so the shared account
	feels the same in both portals. The rest of 360 keeps its own look for now.

	Font: Atkinson Hyperlegible Next (SIL Open Font License, see fonts/OFL.txt), served from this site.
*/

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/AtkinsonHyperlegibleNext-Medium.woff2") format("woff2");
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/AtkinsonHyperlegibleNext-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Atkinson Hyperlegible Next";
	src: url("../fonts/AtkinsonHyperlegibleNext-Bold.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

/* The design tokens of Assess (app.css), used by identity.css. Only inside the account frame. */
.account-shell {
	--ink: #1d2b36;
	--ink-soft: #4d5f6b;
	--fjord: #2e5877;
	--fjord-deep: #1f3f57;
	--mist: #e7eef2;
	--paper: #ffffff;
	--page: #f4f6f7;
	--line: #d3dce1;
	--line-strong: #7b8d99;
	--signal: #2f7d6b;
	--amber: #9a6a1f;
	--danger: #a8423a;
	--step--1: 0.875rem;
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--radius-small: 4px;
	--radius: 8px;

	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--page);
	color: var(--ink);
	font-family: "Atkinson Hyperlegible Next", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

.account-shell a {
	color: var(--fjord);
	text-underline-offset: 0.15em;
}

.account-shell a:hover {
	color: var(--fjord-deep);
}

.account-shell-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-4);
	padding: var(--space-3) var(--space-6);
	background: var(--fjord);
}

.account-shell-brand {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	color: #fff;
	text-decoration: none;
	font-weight: 600;
}

.account-shell-brand img {
	height: 38px;
	width: auto;
	display: block;
}

.account-shell-header .account-shell-link {
	color: #fff;
}

.account-shell-header .account-shell-link:hover {
	color: var(--mist);
}

.account-shell-main {
	flex: 1;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	padding: var(--space-7) var(--space-4);
}

/* The card is as wide as the page needs: narrow for sign-in, wider for My account (tabs and tables). */
.account-card {
	width: min(100%, 36rem);
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: var(--space-6) var(--space-6) var(--space-5);
}

.account-card:has(.account-page-wide) {
	width: min(100%, 50rem);
}

.account-card .account-page,
.account-card .account-page-wide {
	max-width: none;
}

.account-card h1 {
	font-size: 1.75rem;
	font-weight: 600;
	line-height: 1.2;
	margin: 0 0 var(--space-2);
}

.account-card h2 {
	font-size: 1.25rem;
	font-weight: 600;
	margin: var(--space-6) 0 var(--space-2);
}

.account-shell-footer {
	padding: var(--space-4) var(--space-6);
	color: var(--ink-soft);
	font-size: var(--step--1);
	text-align: center;
}

@media (max-width: 40rem) {
	.account-shell-header {
		padding: var(--space-3) var(--space-4);
	}
	.account-shell-main {
		padding: var(--space-5) var(--space-3);
	}
	.account-card {
		padding: var(--space-5) var(--space-4);
	}
}