/*
 * Hedia Finance — components: status, notices, forms, buttons, the sign-in page and small screens.
 * Loaded last, so its small-screen rules win. Uses the tokens of base.css.
 */

/* Status --------------------------------------------------------------------------------------- */

.status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 2px 10px 2px 8px;
	border-radius: 999px;
	background: var(--neutral-soft);
	color: var(--ink-2);
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.status::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

.status--positive {
	background: var(--positive-soft);
	color: var(--positive);
}

.status--warning {
	background: var(--warning-soft);
	color: var(--warning);
}

.status--negative {
	background: var(--negative-soft);
	color: var(--negative);
}

.tag {
	padding: 1px 6px;
	border: 1px solid var(--rule-strong);
	border-radius: var(--radius-s);
	color: var(--ink-2);
	font-size: 12px;
	font-weight: 600;
}

/* Notices -------------------------------------------------------------------------------------- */

.notice {
	display: grid;
	gap: 2px;
	padding: var(--space-3) var(--space-4);
	border: 1px solid var(--rule);
	border-left-width: 3px;
	border-radius: var(--radius);
	background: var(--surface);
	font-size: 14px;
}

.notice--success {
	border-color: var(--positive);
	background: var(--positive-soft);
}

.notice--warning {
	border-color: var(--warning);
	background: var(--warning-soft);
}

.notice--error {
	border-color: var(--negative);
	background: var(--negative-soft);
}

.notice__title {
	font-weight: 600;
}

/* Forms ---------------------------------------------------------------------------------------- */

.form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: var(--space-3);
}

.field {
	display: grid;
	flex: 1 1 180px;
	gap: 6px;
}

.field--narrow {
	flex: 0 0 96px;
}

.field__label {
	color: var(--ink-2);
	font-size: 13px;
	font-weight: 600;
}

.input,
.select {
	width: 100%;
	height: 40px;
	padding: 0 var(--space-3);
	border: 1px solid var(--rule-strong);
	border-radius: 8px;
	background: var(--surface);
	color: var(--ink);
	font: inherit;
}

.select {
	appearance: none;
	padding-right: 36px;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ink-3) 50%),
		linear-gradient(135deg, var(--ink-3) 50%, transparent 50%);
	background-position:
		calc(100% - 18px) 17px,
		calc(100% - 13px) 17px;
	background-repeat: no-repeat;
	background-size: 5px 5px;
}

.input--code {
	font-family: var(--font-mono);
	text-transform: uppercase;
}

.input:hover,
.select:hover {
	border-color: var(--ink-3);
}

/* Buttons -------------------------------------------------------------------------------------- */

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	height: 40px;
	padding: 0 var(--space-4);
	border: 1px solid transparent;
	border-radius: 8px;
	background: var(--accent);
	color: var(--accent-ink);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
	cursor: pointer;
}

.button:hover {
	background: var(--accent-hover);
}

.button--secondary {
	border-color: var(--rule-strong);
	background: var(--surface);
	color: var(--ink);
}

.button--secondary:hover {
	border-color: var(--ink-3);
	background: var(--surface);
}

.button--quiet {
	height: 32px;
	padding: 0 var(--space-2);
	background: transparent;
	color: var(--ink-2);
	font-weight: 500;
}

.button--quiet:hover {
	background: var(--surface-sunk);
	color: var(--ink);
}

.button--wide {
	width: 100%;
	height: 44px;
}

.inline-form {
	display: inline;
	margin: 0;
}

.button--small {
	height: 32px;
	padding: 0 var(--space-3);
	font-size: 13px;
}

.button--danger {
	border-color: var(--rule-strong);
	background: var(--surface);
	color: var(--negative);
}

.button--danger:hover {
	border-color: var(--negative);
	background: var(--negative-soft);
}

.button[aria-busy="true"] {
	cursor: progress;
	opacity: 0.7;
}

/* Passkeys ------------------------------------------------------------------------------------- */

.stack-form {
	display: grid;
	gap: var(--space-3);
}

.stack-form--inline {
	justify-items: start;
}

.passkey-status {
	min-height: 1.5em;
	color: var(--ink-2);
	font-size: 14px;
}

.passkey-status[data-kind="error"] {
	color: var(--negative);
}

.input--code-plain {
	font-family: var(--font-mono);
	font-size: 13px;
}

.card--highlight {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}

/* Sign-in -------------------------------------------------------------------------------------- */

.auth {
	display: grid;
	place-items: center;
	min-height: 100vh;
	padding: var(--space-5);
	/* Reason: Faint ledger rules that fade out towards the edges, so the panel stays the focus. */
	background:
		radial-gradient(ellipse 70% 60% at 50% 45%, transparent 0%, var(--paper) 85%),
		repeating-linear-gradient(
			to bottom,
			transparent 0 39px,
			color-mix(in srgb, var(--rule) 70%, transparent) 39px 40px
		),
		var(--paper);
}

.auth__panel {
	display: grid;
	gap: var(--space-5);
	width: min(400px, 100%);
	padding: var(--space-6);
}

.auth__footnote {
	color: var(--ink-3);
	font-size: 13px;
}

/* Small screens -------------------------------------------------------------------------------- */

@media (max-width: 720px) {
	.topbar__inner {
		gap: var(--space-2);
		padding: 0 var(--space-4);
	}

	/* Reason: The bar must fit a 375px phone, so it keeps the mark, the two links and Sign out. */
	.topbar .brand > span,
	.avatar,
	.account-menu__name {
		display: none;
	}

	.nav__link {
		padding: 6px 8px;
		white-space: nowrap;
	}

	.page {
		padding: var(--space-5) var(--space-4) var(--space-7);
	}

	.title {
		font-size: 24px;
	}

	.row {
		grid-template-columns: minmax(0, 1fr);
		padding: var(--space-4);
	}
}