/*
 * AX Portal — the account area.
 *
 * The site's compiled Tailwind is a byte-copy built from the prototype's six page
 * globs. It has no form utilities, no label rule and no error colour, and it is not
 * rebuilt for the portal — so everything the account pages need lives here, on the
 * same palette tokens.
 *
 * Scoped to .axp so nothing here can reach the public pages.
 */

.axp {
	--axp-ink: #15181c;
	--axp-ink-800: #1b1f25;
	--axp-paper: #f6f7f9;
	--axp-ground: #eceef1;
	--axp-line: #d9dde3;
	--axp-mute: #5f6774;
	--axp-cobalt: #004cbb;
	--axp-cobalt-link: #1e45d8;
	--axp-cobalt-50: #eef2ff;
	--axp-radius: 10px;
}

/* ---------- shell ---------- */

/* Breathing room between the site header and footer. The template used to rely on
   Tailwind's py-10 for this, but the compiled Tailwind never contained it (see the
   note at the top of this file), so the account pages sat flush against both. */
.axp-wrap {
	padding-top: 2.5rem;
	padding-bottom: 4rem;
}


.axp-shell {
	display: grid;
	gap: 2rem;
	grid-template-columns: 220px minmax(0, 1fr);
	align-items: start;
}

@media (max-width: 782px) {
	.axp-shell {
		grid-template-columns: minmax(0, 1fr);
		gap: 1.25rem;
	}
}

.axp-pane {
	min-width: 0;
}

.axp-title {
	font-size: 1.75rem;
	line-height: 1.2;
	margin: 0 0 1rem;
	color: var(--axp-ink);
}

.axp-h2 {
	font-size: 1.15rem;
	margin: 2rem 0 0.5rem;
	color: var(--axp-ink);
}

.axp-h3 {
	font-size: 1rem;
	margin: 1.25rem 0 0.5rem;
	color: var(--axp-ink);
}

.axp-lede {
	color: var(--axp-mute);
	margin: 0 0 1.5rem;
}

.axp-note {
	color: var(--axp-mute);
	font-size: 0.9375rem;
}

.axp-muted {
	color: var(--axp-mute);
}

.axp-link {
	color: var(--axp-cobalt-link);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.axp-link:hover {
	color: var(--axp-ink);
}

.axp-prose p {
	margin: 0 0 1rem;
}

/* ---------- navigation ---------- */

.axp-nav {
	border: 1px solid var(--axp-line);
	border-radius: var(--axp-radius);
	background: #fff;
	padding: 1rem;
}

.axp-nav-who {
	margin: 0 0 0.75rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--axp-line);
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

.axp-nav-name {
	font-weight: 600;
	color: var(--axp-ink);
}

.axp-nav-email {
	font-size: 0.8125rem;
	color: var(--axp-mute);
	word-break: break-word;
}

.axp-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.axp-nav-secondary {
	margin-top: 0.75rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--axp-line);
}

.axp-nav-link {
	display: block;
	padding: 0.5rem 0.625rem;
	border-radius: 6px;
	color: var(--axp-ink-800);
	text-decoration: none;
}

.axp-nav-link:hover {
	background: var(--axp-ground);
	color: var(--axp-ink);
}

.axp-nav-link.is-current {
	background: var(--axp-cobalt-50);
	color: var(--axp-ink);
	font-weight: 600;
}

/* ---------- cards ---------- */

.axp-cards {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

.axp-card {
	border: 1px solid var(--axp-line);
	border-radius: var(--axp-radius);
	background: #fff;
	padding: 1.125rem;
}

.axp-card-title {
	font-size: 1.0625rem;
	margin: 0 0 0.25rem;
	color: var(--axp-ink);
}

.axp-card-meta {
	margin: 0 0 0.75rem;
	font-size: 0.875rem;
	color: var(--axp-mute);
}

.axp-empty {
	border: 1px solid var(--axp-line);
	border-radius: var(--axp-radius);
	background: #fff;
	padding: 1.5rem;
}

.axp-empty p:last-child {
	margin-bottom: 0;
}

/* ---------- badges ---------- */

.axp-badge {
	display: inline-block;
	margin: 0 0 0.75rem;
	padding: 0.1875rem 0.5rem;
	border-radius: 999px;
	border: 1px solid var(--axp-line);
	background: var(--axp-ground);
	font-size: 0.8125rem;
	color: var(--axp-ink-800);
	white-space: nowrap;
}

.axp-badge-active {
	background: var(--axp-cobalt-50);
	border-color: #c9d6ff;
	color: #12306f;
}

/*
 * Expired and withdrawn are marked by weight and a darker ground rather than red.
 * The site palette has no error colour, and inventing one here would be the first
 * place the portal stopped looking like the rest of the site.
 */
.axp-badge-expired,
.axp-badge-revoked {
	background: var(--axp-ink);
	border-color: var(--axp-ink);
	color: var(--axp-paper);
}

/* ---------- tables ---------- */

.axp-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--axp-line);
	border-radius: var(--axp-radius);
	background: #fff;
}

.axp-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.axp-table th,
.axp-table td {
	text-align: left;
	padding: 0.75rem 0.875rem;
	border-bottom: 1px solid var(--axp-line);
	vertical-align: middle;
}

.axp-table thead th {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--axp-mute);
	font-weight: 600;
}

.axp-table tbody tr:last-child th,
.axp-table tbody tr:last-child td {
	border-bottom: 0;
}

.axp-td-name {
	font-weight: 600;
	color: var(--axp-ink);
}

.axp-slug {
	display: block;
	font-size: 0.8125rem;
	font-weight: 400;
	color: var(--axp-mute);
}

.axp-td-action {
	text-align: right;
	white-space: nowrap;
}

/* ---------- licences ---------- */

.axp-licence {
	border: 1px solid var(--axp-line);
	border-radius: var(--axp-radius);
	background: #fff;
	padding: 1.25rem;
	margin: 0 0 1.25rem;
}

.axp-licence-title {
	font-size: 1.125rem;
	margin: 0 0 0.875rem;
	color: var(--axp-ink);
}

.axp-facts {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	margin: 0;
}

.axp-fact dt {
	font-size: 0.8125rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--axp-mute);
	margin: 0 0 0.25rem;
}

.axp-fact dd {
	margin: 0;
	color: var(--axp-ink);
}

.axp-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	background: var(--axp-ground);
	border-radius: 6px;
	padding: 0.1875rem 0.375rem;
	word-break: break-all;
}

.axp-sites {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--axp-line);
}

.axp-site {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--axp-line);
}

.axp-site-url {
	word-break: break-all;
}

/* ---------- forms ---------- */

.axp-form {
	max-width: 30rem;
}

.axp-field {
	margin: 0 0 1rem;
}

.axp-field label {
	display: block;
	margin: 0 0 0.3125rem;
	font-weight: 600;
	color: var(--axp-ink);
}

.axp-field input[type="text"],
.axp-field input[type="email"],
.axp-field input[type="password"],
.axp-login input[type="text"],
.axp-login input[type="password"] {
	width: 100%;
	box-sizing: border-box;
	font-size: 16px;
	line-height: 1.5;
	padding: 0.5625rem 0.6875rem;
	border: 1px solid var(--axp-line);
	border-radius: 8px;
	background: #fff;
	color: var(--axp-ink);
}

.axp-field input:focus,
.axp-login input:focus {
	border-color: var(--axp-cobalt-link);
}

/*
 * The theme's focus ring covers a, button and summary only. Form controls need the
 * same treatment or the account area regresses the site's own accessibility floor.
 */
.axp input:focus-visible,
.axp select:focus-visible,
.axp textarea:focus-visible,
.axp button:focus-visible,
.axp a:focus-visible {
	outline: 2px solid var(--axp-cobalt-link);
	outline-offset: 2px;
	border-radius: 4px;
}

/* The sticky header must not cover a field jumped to by an anchor. */
.axp input,
.axp select,
.axp textarea,
.axp fieldset,
.axp [tabindex] {
	scroll-margin-top: 5.5rem;
}

.axp-button {
	display: inline-block;
	padding: 0.5rem 0.9375rem;
	border: 1px solid var(--axp-cobalt);
	border-radius: 8px;
	background: var(--axp-cobalt);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
}

.axp-button:hover {
	background: var(--axp-ink);
	border-color: var(--axp-ink);
	color: #fff;
}

.axp-button-quiet {
	background: #fff;
	color: var(--axp-ink);
	border-color: var(--axp-line);
}

.axp-button-quiet:hover {
	background: var(--axp-ground);
	color: var(--axp-ink);
	border-color: var(--axp-mute);
}

/* ---------- messages ---------- */

.axp-message {
	border: 1px solid var(--axp-line);
	border-left-width: 4px;
	border-radius: 8px;
	padding: 0.75rem 1rem;
	margin: 0 0 1.25rem;
	background: #fff;
}

.axp-message-notice {
	border-left-color: var(--axp-cobalt);
	background: var(--axp-cobalt-50);
}

.axp-message-error {
	border-left-color: var(--axp-ink);
	background: var(--axp-ground);
	font-weight: 600;
}

/* ---------- login ---------- */

.axp-login {
	max-width: 24rem;
	margin: 0 auto;
	border: 1px solid var(--axp-line);
	border-radius: var(--axp-radius);
	background: #fff;
	padding: 1.75rem;
}

.axp-login .login-username,
.axp-login .login-password {
	margin: 0 0 1rem;
}

.axp-login label {
	display: block;
	margin: 0 0 0.3125rem;
	font-weight: 600;
	color: var(--axp-ink);
}

.axp-login .login-remember {
	margin: 0 0 1rem;
}

.axp-login .login-remember label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-weight: 400;
	color: var(--axp-ink-800);
}

.axp-login .login-remember input {
	width: auto;
}

.axp-login .login-submit input[type="submit"],
.axp-login .button-primary {
	display: inline-block;
	width: 100%;
	padding: 0.5625rem 1rem;
	border: 1px solid var(--axp-cobalt);
	border-radius: 8px;
	background: var(--axp-cobalt);
	color: #fff;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
}

.axp-login .login-submit input[type="submit"]:hover {
	background: var(--axp-ink);
	border-color: var(--axp-ink);
}