/*
 * voyapidaliaexchange.com. Every constant is a token (tokens.css). The page
 * is a strict grid of hairline rules and whitespace: no cards, no shadows but
 * the dialog's, one accent used for marks only.
 */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background: var(--color-paper);
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-regular);
	line-height: var(--line-height);
	font-feature-settings: "kern" 1;
	text-rendering: optimizeLegibility;
}

img { max-width: 100%; display: block; }

a { color: inherit; text-decoration-thickness: var(--rule); text-underline-offset: var(--underline-offset); }
a:hover { text-decoration-color: var(--color-accent); }

:focus-visible {
	outline: var(--focus-width) solid var(--color-accent-deep);
	outline-offset: var(--focus-offset);
}

h1, h2, h3, p, dl, dd { margin: 0; }

.num, .ledger td.num, .ledger th.num { font-variant-numeric: tabular-nums lining-nums; }

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

.visually-hidden {
	position: absolute;
	width: var(--rule);
	height: var(--rule);
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.skip {
	position: absolute;
	left: var(--space-4);
	top: calc(-1 * var(--space-8));
	padding: var(--space-2) var(--space-4);
	background: var(--color-ink);
	color: var(--color-inverse);
	z-index: 10;
}
.skip:focus { top: var(--space-4); }

/* ---------- Masthead ---------- */

.masthead {
	background: var(--color-surface);
	border-bottom: var(--rule) solid var(--color-rule);
}

.masthead__inner {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: stretch;
	column-gap: var(--space-7);
	min-height: var(--space-8);
}

.wordmark {
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-decoration: none;
	line-height: var(--line-height-tight);
}
.wordmark__pair {
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-muted);
}
.wordmark__name {
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-medium);
	letter-spacing: var(--tracking-display);
}

.tabs { display: flex; gap: var(--space-5); }

.tabs__item {
	display: flex;
	align-items: center;
	text-decoration: none;
	color: var(--color-muted);
	border-bottom: var(--rule-strong) solid transparent;
	margin-bottom: calc(-1 * var(--rule));
	transition: color var(--transition), border-color var(--transition);
}
.tabs__item:hover { color: var(--color-ink); }
.tabs__item.is-current { color: var(--color-ink); border-bottom-color: var(--color-accent); }

.account {
	display: flex;
	align-items: center;
	gap: var(--space-5);
	font-size: var(--font-size-sm);
}
.account__name { color: var(--color-ink-soft); }
.account__org {
	margin-left: var(--space-2);
	color: var(--color-faint);
}
.account__org::before { content: "/"; margin-right: var(--space-2); }
.account__link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--color-muted);
	text-decoration: none;
	cursor: pointer;
}
.account__link:hover, .account__link.is-current { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); }

/* ---------- Page ---------- */

.page {
	flex: 1;
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
	padding: var(--space-7) var(--gutter) var(--space-9);
}

.crumb { margin-bottom: var(--space-5); font-size: var(--font-size-sm); }
.crumb a::before { content: "\2190"; margin-right: var(--space-2); }

.page-head {
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6);
	border-bottom: var(--rule) solid var(--color-ink);
}
.page-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); }

.page-head__kicker {
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-2);
}
.page-head__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-display);
	line-height: var(--line-height-tight);
	letter-spacing: var(--tracking-display);
}
.page-head__title--project { font-size: var(--font-size-2xl); max-width: var(--page-width); overflow-wrap: anywhere; }
.page-head__lede { margin-top: var(--space-3); max-width: var(--measure); color: var(--color-ink-soft); }

/* ---------- Ledger (every table) ---------- */

.ledger {
	width: 100%;
	border-collapse: collapse;
	font-size: var(--font-size-md);
}
.ledger th {
	text-align: left;
	font-weight: var(--font-weight-regular);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-muted);
	padding: 0 var(--space-4) var(--space-3) 0;
	border-bottom: var(--rule) solid var(--color-rule);
	vertical-align: bottom;
}
.ledger td {
	padding: var(--space-4) var(--space-4) var(--space-4) 0;
	border-bottom: var(--rule) solid var(--color-rule-faint);
	vertical-align: baseline;
}
.ledger th:last-child, .ledger td:last-child { padding-right: 0; }
.ledger .num { text-align: right; white-space: nowrap; }
.ledger tfoot th, .ledger tfoot td {
	border-bottom: 0;
	border-top: var(--rule) solid var(--color-rule);
	padding-top: var(--space-3);
	color: var(--color-ink-soft);
}

.ledger__row { transition: background-color var(--transition); }
.ledger__row:hover { background: var(--color-surface); }
.ledger__row.is-muted td { color: var(--color-muted); }
.ledger__date { width: var(--width-date); white-space: nowrap; color: var(--color-ink-soft); }
.ledger td.ledger__date { text-align: left; }
.ledger__project { width: 45%; }
.ledger__link { font-weight: var(--font-weight-medium); text-decoration: none; overflow-wrap: anywhere; }
.ledger__link:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }
.ledger__note { display: block; font-size: var(--font-size-sm); color: var(--color-muted); }
.ledger__file { overflow-wrap: anywhere; }
.ledger__type { color: var(--color-muted); font-size: var(--font-size-sm); overflow-wrap: anywhere; }
.ledger__email { color: var(--color-ink-soft); overflow-wrap: anywhere; }
.ledger__action { text-align: right; white-space: nowrap; width: 1%; }
.ledger--compact td { padding-top: var(--space-3); padding-bottom: var(--space-3); }

.tag {
	display: inline-block;
	margin-left: var(--space-3);
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-muted);
}
.tag--accent { color: var(--color-accent-deep); }
.band__label .tag { margin-left: 0; margin-top: var(--space-2); }

.empty { padding: var(--space-8) 0; border-bottom: var(--rule) solid var(--color-rule-faint); }
.empty__title { font-family: var(--font-serif); font-size: var(--font-size-xl); margin-bottom: var(--space-2); }

.pager { display: flex; gap: var(--space-5); justify-content: flex-end; padding-top: var(--space-5); }

/* ---------- Groups and bands ---------- */

.group + .group { margin-top: var(--space-8); }
.group__title {
	font-family: var(--font-serif);
	font-size: var(--font-size-xl);
	font-weight: var(--font-weight-regular);
	margin-bottom: var(--space-4);
}
.group__count { font-family: var(--font-sans); font-size: var(--font-size-sm); color: var(--color-muted); margin-left: var(--space-2); }

.band {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
	column-gap: var(--gutter);
	padding: var(--space-6) 0;
	border-bottom: var(--rule) solid var(--color-rule);
}
.band__title { font-family: var(--font-serif); font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); }
.band__body { display: grid; gap: var(--space-5); max-width: var(--measure); }
.band__body .ledger { max-width: none; }

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

.totp { display: grid; grid-template-columns: var(--qr-size) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.totp[hidden] { display: none; }
.totp__qr { width: var(--qr-size); height: var(--qr-size); background: var(--color-surface); }
.totp__steps { display: grid; gap: var(--space-4); }
.totp__key { font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-label); font-size: var(--font-size-md); }

/* ---------- Facts and description (a transfer) ---------- */

.facts {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--gutter);
	padding-bottom: var(--space-6);
	margin-bottom: var(--space-6);
	border-bottom: var(--rule) solid var(--color-rule);
}
.facts dt {
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-2);
}
.facts dd { font-size: var(--font-size-lg); line-height: var(--line-height-tight); }
.facts__sub { display: block; margin-top: var(--space-1); font-size: var(--font-size-sm); color: var(--color-muted); }

.description {
	max-width: var(--measure);
	margin-bottom: var(--space-7);
	font-family: var(--font-serif);
	font-size: var(--font-size-lg);
	color: var(--color-ink-soft);
	overflow-wrap: anywhere;
}
.description p + p { margin-top: var(--space-4); }

.actions-row { margin-top: var(--space-6); display: flex; justify-content: flex-end; }

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

.form { display: grid; gap: var(--space-5); }
.form__actions { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; padding-top: var(--space-2); }

.field { display: grid; gap: var(--space-2); margin: 0; padding: 0; border: 0; min-width: 0; }
.field--narrow { max-width: var(--width-field-narrow); }
.field__label { font-size: var(--font-size-sm); color: var(--color-ink-soft); padding: 0; }
.field__optional { color: var(--color-faint); margin-left: var(--space-2); }
.field__hint { font-size: var(--font-size-sm); color: var(--color-muted); min-height: var(--line-height); }
.field__input {
	width: 100%;
	min-height: var(--field-height);
	padding: var(--space-2) var(--space-3);
	font: inherit;
	color: var(--color-ink);
	background: var(--color-surface);
	border: var(--rule) solid var(--color-rule);
	border-bottom-color: var(--color-ink-soft);
	border-radius: var(--radius-none);
	transition: border-color var(--transition);
}
.field__input:hover { border-color: var(--color-faint); border-bottom-color: var(--color-ink); }
.field__input:focus-visible { outline-offset: 0; border-color: var(--color-ink); }
.field__input:disabled { color: var(--color-muted); background: var(--color-wash); }
.field__input--code { font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-label); max-width: var(--width-code); font-size: var(--font-size-lg); }
.field__textarea { resize: vertical; min-height: var(--height-textarea); line-height: var(--line-height); }
.field__select { appearance: auto; }

.choice { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.choice[hidden] { display: none; }
.choice .field__label { width: 100%; }
.choice__item, .check { display: inline-flex; align-items: center; gap: var(--space-2); cursor: pointer; }
.choice__item input, .check input { accent-color: var(--color-ink); width: var(--space-4); height: var(--space-4); margin: 0; }

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

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: var(--field-height);
	padding: 0 var(--space-5);
	font: inherit;
	font-weight: var(--font-weight-medium);
	color: var(--color-inverse);
	background: var(--color-ink);
	border: var(--rule) solid var(--color-ink);
	border-radius: var(--radius);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.button:hover { background: var(--color-ink-soft); border-color: var(--color-ink-soft); }
.button:disabled, .button[aria-busy="true"] { cursor: progress; background: var(--color-faint); border-color: var(--color-faint); }
.button--secondary { background: transparent; color: var(--color-ink); }
.button--secondary:hover { background: var(--color-surface); color: var(--color-ink); border-color: var(--color-ink); }
.button--secondary:disabled { background: transparent; color: var(--color-faint); }
.button--danger { background: transparent; color: var(--color-error); border-color: var(--color-error); }
.button--danger:hover { background: var(--color-error-wash); border-color: var(--color-error); }
.button--small { min-height: calc(var(--field-height) - var(--space-3)); padding: 0 var(--space-4); font-size: var(--font-size-sm); }
.button[hidden] { display: none; }

.text-button {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	font-size: var(--font-size-sm);
	color: var(--color-ink-soft);
	text-decoration: underline;
	text-decoration-color: var(--color-rule);
	text-underline-offset: var(--underline-offset);
	cursor: pointer;
}
.text-button:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }
.text-button--danger { color: var(--color-error); }
.text-button[hidden] { display: none; }

.quiet-link { font-size: var(--font-size-sm); color: var(--color-ink-soft); text-decoration-color: var(--color-rule); }
.quiet-link:hover { color: var(--color-ink); }

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

.notice {
	padding: var(--space-3) var(--space-4);
	margin-bottom: var(--space-5);
	border-left: var(--rule-strong) solid var(--color-ink);
	background: var(--color-surface);
	max-width: var(--measure);
}
.notice[hidden] { display: none; }
.notice--error { border-left-color: var(--color-error); background: var(--color-error-wash); color: var(--color-error); }
.notice--success { border-left-color: var(--color-success); background: var(--color-success-wash); color: var(--color-success); }
.notice--warning { border-left-color: var(--color-accent); }

/* ---------- Compose (Send files) ---------- */

.compose {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	column-gap: var(--space-7);
	row-gap: var(--space-6);
}
.compose__fields { display: grid; gap: var(--space-5); align-content: start; }
.compose__files { display: grid; gap: var(--space-5); align-content: start; }
.compose__actions {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	gap: var(--space-5);
	padding-top: var(--space-5);
	border-top: var(--rule) solid var(--color-ink);
}

.drop {
	position: relative;
	display: grid;
	justify-items: start;
	gap: var(--space-2);
	padding: var(--space-7) var(--space-6);
	background: var(--color-surface);
	border: var(--rule) solid var(--color-rule);
	transition: border-color var(--transition), background-color var(--transition);
}
.drop::before {
	content: "";
	position: absolute;
	left: calc(-1 * var(--rule));
	top: calc(-1 * var(--rule));
	bottom: calc(-1 * var(--rule));
	width: var(--rule-strong);
	background: var(--color-ink);
	transition: background-color var(--transition);
}
.drop.is-over { border-color: var(--color-accent); background: var(--color-wash); }
.drop.is-over::before { background: var(--color-accent); }
.drop.is-locked { opacity: var(--opacity-disabled); }
.drop__title { font-family: var(--font-serif); font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); }
.drop__or { font-size: var(--font-size-sm); color: var(--color-muted); }
.drop__input {
	position: absolute;
	width: var(--rule);
	height: var(--rule);
	opacity: 0;
	overflow: hidden;
}
.drop__input:focus-visible + *, .drop:focus-within .drop__choose {
	outline: var(--focus-width) solid var(--color-accent-deep);
	outline-offset: var(--focus-offset);
}

.progress {
	display: block;
	height: var(--rule-strong);
	margin-top: var(--space-2);
	background: var(--color-rule-faint);
	overflow: hidden;
}
.progress__fill {
	display: block;
	height: 100%;
	width: 0;
	background: var(--color-accent);
	transition: width var(--transition-slow);
}
.progress__fill.is-done { background: var(--color-ink); }
.progress__label { font-size: var(--font-size-sm); color: var(--color-muted); }
.ledger--files .progress { max-width: 100%; }

/* ---------- Dialog ---------- */

.dialog {
	width: min(var(--width-dialog), calc(100vw - var(--space-6)));
	padding: 0;
	border: 0;
	border-top: var(--rule-strong) solid var(--color-accent);
	border-radius: var(--radius-none);
	background: var(--color-surface);
	color: var(--color-ink);
	box-shadow: var(--shadow-dialog);
}
.dialog::backdrop { background: var(--color-overlay); opacity: var(--opacity-overlay); }
.dialog__body { display: grid; gap: var(--space-5); padding: var(--space-6); }
.dialog__title { font-family: var(--font-serif); font-size: var(--font-size-xl); font-weight: var(--font-weight-regular); }
.dialog__subtitle { font-size: var(--font-size-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--color-muted); font-weight: var(--font-weight-regular); }
.dialog__actions { display: flex; gap: var(--space-4); }
.dialog__more { display: grid; gap: var(--space-3); padding-top: var(--space-5); border-top: var(--rule) solid var(--color-rule); }
.dialog__more[hidden] { display: none; }
.dialog__more-actions { display: flex; flex-wrap: wrap; gap: var(--space-5); }
.dialog .notice { margin-bottom: 0; }
.pidalia-only { display: grid; gap: var(--space-4); }
.pidalia-only[hidden] { display: none; }

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

.entry {
	flex: 1;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	width: 100%;
	max-width: var(--page-width);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

.entry__brand {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: var(--space-8);
	padding: var(--space-8) var(--space-7) var(--space-7) 0;
	border-right: var(--rule) solid var(--color-rule);
}
.entry__logo { width: var(--logo-width); height: auto; }
.entry__kicker {
	font-size: var(--font-size-xs);
	letter-spacing: var(--tracking-label);
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: var(--space-3);
}
.entry__name {
	font-family: var(--font-serif);
	font-size: var(--font-size-3xl);
	font-weight: var(--font-weight-display);
	line-height: var(--line-height-tight);
	letter-spacing: var(--tracking-display);
	padding-top: var(--space-4);
	border-top: var(--rule-strong) solid var(--color-accent);
	max-width: var(--width-entry-name);
}

.entry__form {
	align-self: center;
	width: 100%;
	max-width: var(--width-entry-form);
	padding: var(--space-8) 0 var(--space-8) var(--space-8);
}
.entry__heading {
	font-family: var(--font-serif);
	font-size: var(--font-size-2xl);
	font-weight: var(--font-weight-display);
	letter-spacing: var(--tracking-display);
	line-height: var(--line-height-tight);
	margin-bottom: var(--space-3);
}
.entry__lede { color: var(--color-ink-soft); margin-bottom: var(--space-6); }
.entry__heading + .notice, .entry__heading + .entry__who { margin-top: var(--space-5); }
.entry__who { color: var(--color-muted); margin-bottom: var(--space-5); overflow-wrap: anywhere; }
.entry__aside { margin-top: var(--space-6); }
.entry__form .form { margin-top: var(--space-5); }
.entry__lede + .notice { margin-top: 0; }

/* ---------- Footer ---------- */

.colophon { border-top: var(--rule) solid var(--color-rule); }
.colophon__inner {
	max-width: var(--page-width);
	margin: 0 auto;
	padding: var(--space-5) var(--gutter);
	font-size: var(--font-size-xs);
	color: var(--color-muted);
	font-variant-numeric: tabular-nums;
	display: grid;
	gap: var(--space-1);
}
.colophon__link { color: var(--color-muted); text-decoration-color: var(--color-rule); }
.colophon__link:hover { color: var(--color-ink); text-decoration-color: var(--color-accent); }

/* ---------- Narrow screens ---------- */

@media (max-width: 60em) {
	.masthead__inner { grid-template-columns: 1fr auto; column-gap: var(--space-5); padding-top: var(--space-3); }
	.tabs { grid-column: 1 / -1; grid-row: 2; overflow-x: auto; padding-top: var(--space-3); }
	.tabs__item { padding-bottom: var(--space-3); }
	.account__name { display: none; }
	.compose { grid-template-columns: minmax(0, 1fr); }
	.facts { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-5); }
	.band { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-4); }
}

@media (max-width: 44em) {
	:root { --gutter: var(--gutter-narrow); }
	.page { padding-top: var(--space-6); }
	.page-head__title { font-size: var(--font-size-2xl); }
	.page-head--split { flex-direction: column; align-items: flex-start; }
	.ledger { display: block; overflow-x: auto; }
	.ledger__date { width: auto; }
	.entry { grid-template-columns: minmax(0, 1fr); }
	.entry__brand { border-right: 0; border-bottom: var(--rule) solid var(--color-rule); padding: var(--space-6) 0; gap: var(--space-6); }
	.entry__name { font-size: var(--font-size-2xl); max-width: none; }
	.entry__form { padding: var(--space-6) 0 var(--space-7); }
	.totp { grid-template-columns: minmax(0, 1fr); }
	.facts { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}