/* greentea web interface. The Content-Security-Policy allows no inline
   styles, so every style lives here, HTMX's included. */

:root {
	color-scheme: light dark;
	--bg: #ffffff;
	--fg: #1b1f1d;
	--muted: #535c57;
	--line: #d3dad6;
	--accent: #1f6b45;
	--accent-fg: #ffffff;
	--panel: #f3f6f4;
	--error-bg: #fbeaea;
	--error-fg: #8a1c1c;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
	:root {
		--bg: #141816;
		--fg: #e7ece9;
		--muted: #a7b1ab;
		--line: #39423d;
		--accent: #6fcf9a;
		--accent-fg: #0d1f15;
		--panel: #1d2320;
		--error-bg: #3a1b1b;
		--error-fg: #ffb4b4;
	}
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--fg);
}

a {
	color: var(--accent);
}

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
}

.skip {
	position: absolute;
	left: -10000px;
}

.skip:focus {
	position: static;
	display: inline-block;
	padding: 0.5rem 1rem;
}

header.top {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 2rem;
	padding: 0.75rem 1.5rem;
	border-bottom: 1px solid var(--line);
	background: var(--panel);
}

.brand {
	font-weight: 700;
	font-size: 1.15rem;
	text-decoration: none;
}

header nav ul {
	display: flex;
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

header nav a {
	color: var(--fg);
	text-decoration: none;
}

header nav a[aria-current="page"] {
	font-weight: 700;
	text-decoration: underline;
}

.account {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-left: auto;
}

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

.role {
	font-size: 0.875rem;
}

main {
	max-width: 60rem;
	margin: 0 auto;
	padding: 1.5rem;
}

form.stacked {
	display: grid;
	gap: 0.5rem;
	max-width: 24rem;
}

label {
	font-weight: 600;
}

input {
	font: inherit;
	padding: 0.5rem;
	border: 1px solid var(--muted);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
}

button {
	font: inherit;
	padding: 0.5rem 1rem;
	border: 1px solid var(--accent);
	border-radius: 4px;
	background: var(--accent);
	color: var(--accent-fg);
	cursor: pointer;
}

form.stacked button {
	justify-self: start;
	margin-top: 0.5rem;
}

button.link {
	padding: 0;
	border: none;
	background: none;
	color: var(--accent);
	text-decoration: underline;
}

.alert {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	background: var(--error-bg);
	color: var(--error-fg);
}

/* The account pages. */
.subnav ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
	margin: 0 0 1.5rem;
	padding: 0 0 0.5rem;
	border-bottom: 1px solid var(--line);
	list-style: none;
}

.subnav a[aria-current="page"] {
	font-weight: 700;
	color: var(--fg);
}

.notice {
	padding: 0.75rem 1rem;
	border-radius: 4px;
	background: var(--panel);
	border-left: 4px solid var(--accent);
}

.card {
	margin: 1rem 0;
	padding: 0.5rem 1rem 1rem;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.badge {
	margin-left: 0.5rem;
	padding: 0.1rem 0.4rem;
	border-radius: 4px;
	background: var(--error-bg);
	color: var(--error-fg);
	font-size: 0.8rem;
	font-weight: 400;
}

.badge.ok {
	background: var(--panel);
	color: var(--accent);
}

dl.pairs {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1.5rem;
	margin: 0;
}

dl.pairs dd {
	margin: 0;
}

table.list {
	width: 100%;
	border-collapse: collapse;
	margin: 1rem 0;
}

table.list th,
table.list td {
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.table-wrap {
	overflow-x: auto;
}

/* DNS records (dns.templ): long TXT values break anywhere. */
.dns-records code {
	overflow-wrap: anywhere;
}

form.inline {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0.5rem 0.25rem 0;
}

button.secondary {
	background: var(--bg);
	color: var(--accent);
}

pre.details {
	margin: 0;
	white-space: pre-wrap;
	word-break: break-all;
	font-size: 0.85rem;
}

/* What HTMX would otherwise insert as an inline style. */
.htmx-indicator {
	opacity: 0;
}

.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
	opacity: 1;
	transition: opacity 200ms ease-in;
}

/* The permission pages: lists, the grant matrices and the warning on
   permissions that are granted by name only. */
.perm-scroll {
	overflow-x: auto;
}

.perm-table,
.perm-matrix {
	border-collapse: collapse;
	margin: 0.5rem 0 1rem;
}

.perm-table th,
.perm-table td,
.perm-matrix th,
.perm-matrix td {
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--line);
	vertical-align: top;
}

.perm-table th,
.perm-matrix thead th {
	text-align: left;
	background: var(--panel);
}

.perm-matrix td {
	text-align: center;
	white-space: nowrap;
}

.perm-matrix abbr {
	text-decoration: none;
	font-size: 0.875rem;
}

.perm-matrix button {
	padding: 0.125rem 0.5rem;
	font-size: 0.875rem;
}

.perm-granted {
	font-weight: 600;
}

.perm-via {
	color: var(--muted);
	font-size: 0.875rem;
}

button.perm-revoke {
	border-color: var(--muted);
	background: transparent;
	color: var(--fg);
}

.perm-byname,
.perm-warning {
	background: #fff4d6;
	color: #5c3b00;
}

@media (prefers-color-scheme: dark) {
	.perm-byname,
	.perm-warning {
		background: #3a2e12;
		color: #ffdf9e;
	}
}

.perm-warning {
	padding: 0.75rem 1rem;
	border-left: 4px solid currentColor;
	border-radius: 4px;
}

.perm-list {
	padding-left: 1.25rem;
}

.perm-list form {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.perm-form select {
	font: inherit;
	padding: 0.5rem;
	border: 1px solid var(--muted);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
}

.perm-confirm {
	display: flex;
	gap: 0.5rem;
	align-items: flex-start;
	font-weight: 400;
}

.perm-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
}

/* The alias pages: lists of aliases and targets, the marks of reserved
   aliases and of what stops an alias from working, and the small
   forms beside them. */
.alias-scroll {
	overflow-x: auto;
}

.alias-table {
	border-collapse: collapse;
	margin: 0.5rem 0 1rem;
}

.alias-table th,
.alias-table td {
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--line);
	text-align: left;
	vertical-align: top;
}

.alias-table thead th {
	background: var(--panel);
}

.alias-actions {
	display: flex;
	gap: 0.5rem;
}

.alias-actions button,
button.alias-quiet {
	padding: 0.125rem 0.5rem;
	border-color: var(--muted);
	background: transparent;
	color: var(--fg);
	font-size: 0.875rem;
}

.alias-reserved {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0 0.375rem;
	border: 1px solid var(--muted);
	border-radius: 4px;
	color: var(--muted);
	font-size: 0.75rem;
	font-weight: 400;
	vertical-align: middle;
}

.alias-warn {
	display: block;
	color: var(--error-fg);
	font-size: 0.875rem;
}

.alias-note {
	padding: 0.75rem 1rem;
	border-left: 4px solid currentColor;
	border-radius: 4px;
	background: var(--panel);
}

.alias-address {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.alias-address input {
	flex: 1;
	min-width: 0;
}

.alias-form textarea {
	font: inherit;
	padding: 0.5rem;
	border: 1px solid var(--muted);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
}

.alias-inline {
	margin: 0.5rem 0 1rem;
}

.alias-facts {
	display: grid;
	grid-template-columns: max-content 1fr;
	gap: 0.25rem 1rem;
}

.alias-facts dt {
	font-weight: 600;
}

.alias-facts dd {
	margin: 0;
}

.alias-hidden {
	position: absolute;
	left: -10000px;
}

/* The webmail (design.md section 3). */
.webmail-open {
	margin-left: 0.75rem;
}

ul.folders {
	list-style: none;
	padding: 0;
}

ul.folders li {
	padding: 0.35rem 0;
	border-bottom: 1px solid var(--line);
}

/* Two-factor login: the QR code stays dark on light, as scanners
   expect, whatever the colour scheme. */
svg.qr {
	display: block;
	width: 14rem;
	max-width: 100%;
	height: auto;
	margin: 1rem 0;
}

.totp-secret,
.app-password-secret,
.recovery-codes code {
	font-size: 1.1rem;
	letter-spacing: 0.05em;
}

.recovery-codes {
	columns: 2;
	max-width: 28rem;
}

/* The user pages: the filter above the list, the note that says why a
   user cannot be changed, and the form of each quota of a mailbox. */
.user-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
}

.user-note {
	padding: 0.75rem 1rem;
	border-left: 4px solid currentColor;
	border-radius: 4px;
	background: var(--panel);
}

.user-hidden {
	position: absolute;
	left: -10000px;
}

.user-choice label {
	font-weight: 400;
}

.user-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* The webmail: folders, the list and the message side by side, or one
   of them at a time on a narrow screen, with links between them. The
   message's HTML is in a frame that cannot size itself to its content
   without script, so it scrolls within its own region. */
main.wide {
	max-width: none;
}

.webmail {
	display: grid;
	grid-template-columns: minmax(10rem, 14rem) minmax(16rem, 1fr);
	gap: 0 1.5rem;
	align-items: start;
}

.webmail-view-message {
	grid-template-columns: minmax(10rem, 13rem) minmax(14rem, 22rem) minmax(20rem, 1fr);
}

.webmail-head {
	grid-column: 1 / -1;
}

.webmail-head h1 {
	margin-top: 0;
	overflow-wrap: anywhere;
}

.webmail-back {
	display: none;
}

.webmail-count {
	margin-left: 0.4rem;
	padding: 0 0.4rem;
	border-radius: 4px;
	background: var(--accent);
	color: var(--accent-fg);
	font-size: 0.8rem;
}

ul.webmail-messages {
	margin: 0;
	padding: 0;
	list-style: none;
}

ul.webmail-messages li {
	padding: 0.4rem 0.5rem;
	border-bottom: 1px solid var(--line);
}

ul.webmail-messages li.webmail-current {
	background: var(--panel);
}

ul.webmail-messages a {
	display: block;
	color: var(--fg);
	text-decoration: none;
}

ul.webmail-messages .webmail-from,
ul.webmail-messages .webmail-subject {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

ul.webmail-messages .webmail-unseen .webmail-from,
ul.webmail-messages .webmail-unseen .webmail-subject {
	font-weight: 700;
}

.webmail-meta {
	font-size: 0.85rem;
}

.webmail-sorts a {
	margin-left: 0.5rem;
}

.webmail-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
}

.webmail-message h2 {
	overflow-wrap: anywhere;
}

.webmail-message dd {
	overflow-wrap: anywhere;
}

.webmail-frame {
	display: block;
	width: 100%;
	height: 70vh;
	margin: 1rem 0;
	border: 1px solid var(--line);
	background: #ffffff;
}

pre.webmail-text {
	margin: 1rem 0;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 0.95rem;
}

@media (max-width: 50rem) {
	.webmail,
	.webmail-view-message {
		display: block;
	}

	.webmail-folders,
	.webmail-list,
	.webmail-message {
		display: none;
	}

	.webmail-view-folders .webmail-folders,
	.webmail-view-list .webmail-list,
	.webmail-view-message .webmail-message {
		display: block;
	}

	.webmail-back {
		display: block;
	}

	.webmail-frame {
		height: 75vh;
	}
}

/* Organizing in the webmail: the boxes that choose messages, the
   buttons that change them, the search form and the forms on the page
   of folders. */
ul.webmail-messages li.webmail-choosable {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	column-gap: 0.5rem;
	align-items: start;
}

ul.webmail-messages li.webmail-choosable input {
	margin-top: 0.3rem;
}

ul.webmail-messages li.webmail-choosable .webmail-meta {
	grid-column: 2;
}

.webmail-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	margin: 0.5rem 0;
}

.webmail-move {
	display: inline-flex;
	gap: 0.4rem;
}

.webmail-search {
	margin: 0.5rem 0;
}

.webmail-inline-form {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0.25rem 0.75rem 0.25rem 0;
}

/* The review pages (audit log, login history, sent archive): the
   filter above the list and the details of an entry. */
.review-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
	margin-bottom: 1rem;
}

.review-filter input {
	max-width: 14rem;
}

.review-details dl.pairs {
	margin: 0.5rem 0;
}

.review-details dd {
	overflow-wrap: anywhere;
}

/* The webmail's compose form: as wide as the text it holds. */
form.webmail-compose {
	max-width: 48rem;
}

form.webmail-compose textarea {
	font: inherit;
	font-family: ui-monospace, monospace;
	padding: 0.5rem;
	border: 1px solid var(--muted);
	border-radius: 4px;
	background: var(--bg);
	color: var(--fg);
	width: 100%;
	box-sizing: border-box;
}

form.webmail-compose fieldset {
	border: 1px solid var(--muted);
	border-radius: 4px;
}

/* Copy buttons (copy.js): hidden until the script runs, so that a
   browser without scripts shows no button that does nothing. */
button[data-copy] {
	display: none;
	margin-left: 0.5rem;
	padding: 0.1rem 0.5rem;
	font-size: 0.85rem;
}

.copy-ready button[data-copy] {
	display: inline-block;
}

/* The DKIM keys on a domain's page: each key's records, which are
   long and break anywhere. */
.dkim-key {
	margin: 1rem 0;
	padding: 0.75rem 1rem;
	border: 1px solid var(--line);
	border-radius: 4px;
}

.dkim-key h3 {
	margin-top: 0;
}

.dkim-key code {
	overflow-wrap: anywhere;
}