:root {
	color-scheme: dark light;
}

html,
body {
	margin: 0;
	padding: 0;
	height: 100%;
	background-image: radial-gradient(circle, oklch(0.125 0.05 260), #000);
}

body {
	display: flex;
}

a {
	color: inherit;
}

[hidden] {
	display: none !important;
}

*:focus {
	outline: none;
}

body > svg {
	display: none;
}

button:enabled:focus,
button:enabled:hover {
	cursor: pointer;
}

dialog,
dialog div {
	margin: 0;
	padding: 0;
	border: 0;
}

dialog {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	height: 0;
}

dialog[open] {
	display: block;
}

dialog:not([open]) {
	display: none;
}

dialog > div {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: rgba(8, 10, 8, 0.85);
	z-index: 1;
}

dialog h1,
dialog p {
	opacity: 0.55;
}

dialog h1 {
	margin-top: 0;
}

dialog p {
	margin-bottom: 0;
}

.main fieldset {
	border: 1px solid #ffffff40;
	border-radius: 1rem;
	margin: auto;
	width: fit-content;
}

label, legend, .half {
	opacity: 0.5;
}

meter {
	width: 100%;
}

hr {
	opacity: 0.25;
}

thead {
	opacity: 0.4125;
}

#main1 table,
#main1 td {
	white-space: nowrap;
	overflow: inherit;
}

#main1 tr {
	height: 1.5rem;
	overflow: hidden;
}

textarea {
	width: 100%;
	height: 100%;
	opacity: 0.55;
	font-family: sans-serif;
	resize: none;
}

.double {
	display: grid;
	grid-template-columns: 1fr 3rem;
	grid-template-rows: auto;
	justify-items: center;
}

.flex0 {
	flex: 0 1 auto;
}

.flex1 {
	flex: 1 1 auto;
}

#div_inbox {
	overflow: hidden;
}

#div_notepad > p {
	display: grid;
	grid-template-columns: auto auto auto auto;
	justify-content: space-between;
}

.ita {
	font-style: italic;
}

.mono,
#div_write_1 select,
:is(#tbl_drbox, .rowfile, #tbl_inbox) td:first-child,
#txt_reg,
#write_recv {
	font-family: monospace;
	font-size: 1rem;
}

.center,
#div_begin,
#div_write_1,
#div_acc > p,
#tbl_limits,
#table_reg td,
#table_reg button {
	text-align: center;
}

#div_acc h1 {
	opacity: 0.5;
	text-align: center;
	font-size: large;
}

.sans {
	font-family: sans-serif;
}

/* Reg */
#s_reg {
	margin: auto;
	text-align: center;
	max-width: calc(100% - 2.8rem);

	padding: 1rem;

	--lt-tx: oklch(0.450 0 0);
	--lt-br: oklch(0.650 0 0);
	--lt-bg: oklch(0.850 0 0);

	--dk-tx: oklch(0.600 0 0);
	--dk-br: oklch(0.300 0 0);
	--dk-bg: oklch(0.150 0 0);
}
#s_reg p:first-of-type {
	margin: 0;
}

#s_reg h1 {
	font-size: 1.25rem;
}

#s_reg input {
	text-align: center;
	max-width: calc(100% - 1rem);
}

#s_reg select,
#s_reg input {
	font-family: monospace;
}

#s_reg p {
	text-wrap: balance;
}

#div_reg2 div:nth-of-type(2) {
	margin: 2em 0 2em 0;
}

/* Entry */
#s_entry {
	display: grid;
	grid-template-columns: auto;
	grid-template-rows: 5rem 10rem 5rem;
	place-items: center center;
	place-content: center center;
	padding: 0.6rem;
	width: fit-content;
	margin: auto;

	--lt-tx: oklch(0.450 0.100 60); /* Contrast: 4.81 (AA: 4.5+) */
	--lt-br: oklch(0.650 0.060 60);
	--lt-bg: oklch(0.850 0.030 60);

	--dk-tx: oklch(0.600 0.100 60); /* Contrast: 4.87 */
	--dk-br: oklch(0.300 0.060 60);
	--dk-bg: oklch(0.150 0.030 60);
}

#s_reg,
#s_entry {
	border-radius: 2rem;

	color: light-dark(var(--lt-tx), var(--dk-tx));
	border: 0.4rem double light-dark(var(--lt-br), var(--dk-br));
	background: light-dark(var(--lt-bg), var(--dk-bg));
}

#s_entry > * {
	height: 100%;
	width: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	text-align: center;
}

#s_entry h1 {
	font-size: 1.5rem;
}

#s_entry h1,
#s_entry p,
#s_entry a,
#btn_reg {
	margin: 0;
}

#btn_reg {
	text-decoration: underline;
	cursor: pointer;
}

#s_entry fieldset {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	height: 100%;
	padding: 0 1.5rem 0 1.5rem;
	margin: 0 1rem 0 1rem;
	border-radius: 1rem;

	--lt-br: oklch(0.650 0.040 280);
	--lt-bg: oklch(0.850 0.020 280);

	--dk-br: oklch(0.300 0.040 280);
	--dk-bg: oklch(0.150 0.020 280);

	border: 0.2rem double light-dark(var(--lt-br), var(--dk-br));
	background: light-dark(var(--lt-bg), var(--dk-bg));
}

#s_entry header div,
#s_entry footer div {
	display: flex;
	flex-direction: column;
	height: 50%;
	justify-content: space-evenly;
	text-align: center;
}

#btn_entry {
	--lt-b1: oklch(0.80 0.06 280);
	--lt-b2: oklch(0.50 0.01 280);

	--dk-b1: oklch(0.45 0.06 280);
	--dk-b2: oklch(0.15 0.01 280);

	background-image: radial-gradient(circle, light-dark(var(--lt-b1), var(--dk-b1)), light-dark(var(--lt-b2), var(--dk-b2)));
	height: 3rem;
	width: 3.3rem;
	border-radius: 3rem;
	display: block;
}

#txt_umk {
	display: block;
	text-align: center;
	border-radius: 1rem;
	width: 92.5%;
	transition: background-color 0.5s ease-out;

	--lt-tx: oklch(0.650 0.030 200);
	--lt-br: oklch(0.700 0.030 200);

	--dk-tx: oklch(0.300 0.030 200);
	--dk-br: oklch(0.300 0.030 200);

	border: 0.2rem solid light-dark(var(--lt-br), var(--dk-br));
	color: light-dark(var(--lt-tx), var(--dk-tx));
	background-color: light-dark(var(--lt-bg), var(--dk-bg));
}

#txt_umk:disabled,
#txt_umk[maxlength="0"] {
	--lt-bg: oklch(0.800 0.030 200);
	--dk-bg: oklch(0.400 0.030 200);
}

#txt_umk:not(:disabled)[maxlength="60"] {
	--lt-bg: oklch(0.900 0.030 200);
	--dk-bg: oklch(0.500 0.030 200);
}

/* Main */

#s_main {
	height: 100%;
	width: 100%;
	display: grid;
	background-image: radial-gradient(ellipse, #110a04, #080502);
	box-sizing: border-box;
}

.main {
	scrollbar-color: #222 #333;
	background: #001;
	overflow: hidden;
	display: grid;
	grid-template-rows: 3rem auto 3rem;
}

nav {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

nav svg {
	height: 1.3rem;
}

nav button {
	background: transparent;
	fill: transparent;
	padding: 0;
	border: 0;
	height: 1.5rem;
	transition: opacity 0.2s;
}

nav button:disabled {
	opacity: 0.0625;
}

nav button:enabled {
	opacity: 0.25;
}

nav button:enabled:hover {
	opacity: 0.5;
}

nav button:enabled:focus {
	opacity: 0.75;
}

.mid {
	background: #080a08;
	overflow: auto;
}

.mid button {
	transition: color 0.2s ease-out;
}

dialog,
.mid,
.mid :is(a, input, select, textarea, button:enabled) {
	color: #fff;
}

.mid button:disabled {
	color: #777;
}

.mid :is(button, input, select, textarea) {
	background: #000;
	border: 1px solid #555;
	font-size: 1rem;
}

.mid :is(button:not([data-msgid]), input, select) {
	opacity: 0.5;
}

#main1 > .mid > div {
	height: 100%;
}

#tbl_inbox,
#tbl_drbox,
#tbl_files {
	table-layout: fixed;
	height: 100%;
	width: 100%;
	transition: opacity 0.2s;
}

#tbl_inbox tr,
#tbl_drbox tr,
#tbl_files tr {
	display: grid;
	opacity: 0.5;
}

#tbl_inbox tr,
#tbl_drbox tr {
	grid-template-columns: auto 4fr 1fr 2fr;
}

.rowfile {
	grid-template-columns: auto auto 1fr 1fr auto;
}

.rowfilex {
	grid-template-columns: 1fr 1fr;
}

:is(#tbl_ctact, #tbl_drbox, #tbl_files, #tbl_inbox) tr:hover {
	background: #1a1a1a;
}

:is(#tbl_drbox, #tbl_files, #tbl_inbox) tr:hover {
	cursor: pointer;
}

.rowfile td:nth-child(2) {
	font-family: monospace;
	font-size: 1rem;
	margin: 0 1rem 0 1rem;
	text-align: right;
	white-space: pre;
}

.rowfile td:nth-child(4) {
	margin: 0 0 0 1rem;
}

#tbl_inbox tr > td:nth-child(2n) {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

#tbl_inbox tr > td:nth-child(3n) {
	text-align: right;
	direction: rtl;
}

#txt_pg, #getapk_addr {
	width: 100%;
}

#div_write,
#div_write_1,
#div_notepad {
	display: flex;
	flex-flow: column;
	padding: 0 1rem;
	height: 100%;
}

#div_write_1 :is(select, input) {
	min-width: 75%;
}

#write2_from,
#write2_subj,
#write2_body {
	opacity: 0.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

#write2_send,
#write2_ask {
	width: 100%;
	text-align: center;
}

#write2_ask input {
	font-family: monospace;
	text-align: center;
}

#write2_recv {
	font-weight: bold;
}

#write2_subj {
	font-size: large;
	font-weight: bold;
}

/* Tab 4/5: Notes */
#div_notes,
#div_notes > div {
	height: 100%;
}

#div_notes > div:first-of-type > table {
	border-bottom: 1px solid #333;
	table-layout: fixed;
	width: 100%;
}

#div_notes > div:first-of-type > table :is(thead, td:not(:last-of-type)) {
	text-align: left;
	opacity: 0.55;
}

#div_notes > div:first-of-type > table :is(th, td):last-of-type,
#table_addrs td:not(:first-of-type),
#tbl_accs :is(th, td):not(:first-of-type) {
	text-align: center;
	width: 3rem;
}

/* Tab 5/5: Tools */
#div_tools {
	overflow-x: hidden;
	overflow-y: auto;
	max-height: 100%;
}

#table_addrs, #table_reg {
	margin: auto;
	border-left: 1px solid #222;
	border-right: 1px solid #222;
	border-bottom: 1px solid #222;
	border-spacing: 0.25vw;
}

#table_reg {
	padding-top: 0.5rem;
}

#table_reg button {
	width: 100%;
}

#limit_normal,
#limit_shield,
#limit_total {
	opacity: 0.55;
}

#txt_sender {
	font-family: monospace;
}

.div_genbtn {
	display: grid;
	grid-template-rows: 2;
}

.div_genbtn input {
	font-family: monospace;
	border: 0;
}

.div_genbtn button:first-of-type {
	grid-column: span 2;
}

#tbl_addrs td:first-of-type {
	padding-right: 2px;
}

#tbl_addrs td:first-of-type input,
#table_reg input {
	font-family: monospace;
	font-size: 1rem;
	text-align: right;
}

#tbl_addrs td:first-of-type input[readonly] {
	border: 1px solid rgba(0,0,0,0);
	cursor: copy;
}

#tbl_addrs td:first-of-type input:not([readonly]) {
	border: 1px solid gray;
}

#txt_address_create_normal {
	text-transform: lowercase;
}

#div_acc > table {
	border: 0;
	margin: 0 auto;
}

#tbd_accs td {
	font-family: monospace;
	font-size: 1rem;
}

#tbd_accs td:nth-child(1),
#tbd_accs td:nth-child(2),
#tbd_accs td:nth-child(3),
#tbd_accs td:nth-child(4),
#tbd_accs td:nth-child(6) {
	opacity: 0.5;
}

#tbl_limits {
	margin: auto;
}

#tbl_limits input {
	width: 100%;
	max-width: 5rem;
}

#tbl_accs {
	margin: auto;
}

/* Main2 */
#main2 article {
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}

#readmsg_main {
	display: flex;
	flex-direction: column;
	height: 100%;
}

#readmsg_export {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr 1fr;
	align-items: center;
	height: 100%;
	text-align: center;
	opacity: 0.5;

	grid-gap: 5vw;
	margin: 5vw;
}

#readmsg_export div {
	height: 100%;
	border: 1px solid #fff;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 1vw 0 1vw;
}

#readmsg_export div:hover {
	background-color: #1a211a;
	cursor: pointer;
}

#readmsg_export p,
#readmsg_export h1 {
	margin: 0;
}

#readmsg_info {
	width: 100%;
	display: grid;
	opacity: 0.5;
	font-family: monospace;
	font-size: 1rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid #555;
	flex: none;
	grid-template-columns: 1fr;
}

#readmsg_dkim {
	width: 100%;
	display: grid;
	opacity: 0.5;
	font-family: monospace;
	font-size: 1rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid #555;
	flex: none;
	grid-template-columns: 1fr;
}

#readmsg_main > h1 {
	font-size: large;
	text-align: center;
	opacity: 0.45;
}

#readmsg_main > pre {
	margin: 0;
	padding: 0 1rem;
	opacity: 0.55;
	white-space: pre-wrap;
	word-wrap: break-word;
	font-family: sans-serif;
	text-rendering: optimizeLegibility;
}

#readmsg_main > pre a {
	font-size: medium;
	font-style: normal;
	font-weight: normal;
	text-decoration: none;
	background: hsl(120, 20%, 20%);
	border-radius: 0.5rem;
}

#readmsg_main > pre table {
	width: 100%;
}

#readmsg_main > pre > p {
	margin-top: 0;
}

#readmsg_main > pre > p:first-child {
	line-break: anywhere;
}

#readmsg_main > pre > p:nth-child(2) {
	margin-bottom: 0.5rem;
}

#readmsg_main > pre strong {
	margin: 0;
	font-size: large;
}

#readmsg_main ol,
#readmsg_main ul {
	margin: 0;
}

#readmsg_main > pre td {
	word-break: break-all;
}

#readmsg_main > :is(img, video, embed, iframe) {
	flex-grow: 1;
	object-fit: contain;
	height: 1px;
	border: 0;
}

#readmsg_main > audio {
	margin: 0 auto;
	min-width: 90%;
}

@media (min-width: 80rem) {
	#div_begin {
		height: 100%;
		background: radial-gradient(#00000a, #001);
		padding-top: 5vh;
		box-sizing: border-box;
	}

	#s_main {
		grid-template-columns: 1fr 1fr;
		padding: 2vw;
	}

	#main1 {
		box-shadow: -0.25vw 0.25vw black;
		margin-right: 0.5vw;
	}

	#main2 {
		box-shadow: 0.25vw 0.25vw black;
		margin-left: 0.5vw;
	}

	.main {
		border-radius: 3vw;
	}

	.mid {
		border-left: 1vw solid #001;
		border-right: 1vw solid #001;
		border-radius: 2vw;
	}

	#readmsg_info {
		grid-template-columns: 50% 50%;
	}

	#readmsg_info > div {
		line-break: anywhere;
	}
}

@media (prefers-color-scheme: light) {
	html,
	body {
		background-image: radial-gradient(circle, #ccc, #fff);
	}

	#readmsg_main > table {
		border-bottom: 1px solid #aaa;
	}

	#table_addrs {
		border: 1px solid #ddd;
	}

	#div_notes > div:first-of-type > table {
		border-bottom: 1px solid #ccc;
	}

	#readmsg_main > pre a {
		background-color: #ddd;
	}

	:is(#tbl_ctact, #tbl_drbox, #tbl_files, #tbl_inbox) tr:hover {
		background: #e5e5e5;
	}

	.mid {
		background: #f7f5f7;
	}

	dialog,
	.mid,
	.mid :is(a, input, select, textarea, button:enabled) {
		color: #000;
	}

	.mid button:disabled {
		color: #888;
	}

	.mid :is(button, input, select, textarea) {
		background: #fff;
		border: 1px solid #aaa;
	}

	.main {
		scrollbar-color: #ccc #ddd;
		background: #eef;
	}

	#s_main {
		background-image: radial-gradient(ellipse, #fceee0, #b4aaa0);
	}

	#main1 {
		box-shadow: -0.25rem 0.25rem #bebecc;
	}

	#main2 {
		box-shadow: 0.25rem 0.25rem #bebecc;
	}

	svg {
		filter: invert(100%) hue-rotate(180deg);
	}
}

@media (prefers-color-scheme: light) and (min-width: 80rem) {
	#div_begin {
		background: radial-gradient(#eff6fc, #e3f0fc);
	}

	.mid {
		border-left: 1rem solid #eef;
		border-right: 1rem solid #eef;
	}
}