:root {
	--color-char-background: var(--color-l-cyan);
	--width-detail: calc(min(400px, 100vw));
}
@media (prefers-color-scheme: dark) {
	:root {
		--color-char-background: var(--color-d-blue);
	}
}
html, body { padding: 0; margin: 0; }

/* Structural */

.pane-cont {
	position: absolute;
	left: 0; top: 0;
	width: 100vw; height: 100vh;
	max-width: 100vw; max-height: 100vh;
}
.pane-main {
	position: absolute;
	left: 0; top: 0;
	width: 100%; height: 100%;
	max-height: 100%;
	overflow: hidden;
}
@media (width > 700px) {
	.detail-visible .pane-main {
		width: calc(100% - var(--width-detail));
	}
}
.pane-detail {
	display: none;
	background-color: var(--color-background-2);
	box-sizing: border-box;
	height: 100%;
	flex-direction: column;
	overflow-y: hidden;
}
.detail-visible .pane-detail {
	display: flex;
	position: absolute;
	right: 0; top: 0;
	width: var(--width-detail); height: 100%;
	max-height: 100%;
	box-sizing: border-box;
	border-left: 1px solid var(--color-rule);
}
.detail-header {
	flex: 0 1 auto;
}
.detail-body {
	flex: 1 1 auto;
	padding: 1em;
	overflow-y: scroll;
}

/* Main pane */

#main-tabset {
	display: flex;
	flex-direction: column;
	height: 100%;
}
#main-tabset .tabbar {
	flex: 0 0 auto;
	padding: 0 0.5em;
}
#main-tabset .tabbodies {
	flex: 1 1 auto;
	height: 100%;
	position: relative;
	overflow-y: hidden;
}
.pane-main .tabbody {
	height: 100%;
}
.tab-content {
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow-y: hidden;
}
.pane-main .tabbody .tab-content-header {
	flex: 0 1 auto;
	padding: 0.25em 0.5em;
}
.pane-main .tabbody .tab-content-body {
	flex: 1 1 auto;
	border: 1px solid var(--color-rule);
	overflow-y: hidden;
	box-sizing: border-box;
}
.scrollable {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: scroll;
}
.hide-when-list-empty:not(:has(li)) {
	display: none;
}

.codepoint::before {
	content: '#';
	font-size: 0.7em;
	color: var(--color-text-3);
}
.codepoint.interactive {
	cursor: pointer;
	color: var(--color-link);
}
.codepoint-dec::after {
	content: '10';
	font-size: 0.7em;
	vertical-align: -0.6em;
	color: var(--color-text-3);
}

.loading {
	position: fixed;
	left: 0; top: 0;
	width: 100%; height: 100%;
	background-color: rgb(from var(--color-background) r g b / 50%);
}
.loading div {
	position: absolute;
	left: 50vw; top: 50vh;
	transform: translate(-50%, -50%);
	background-color: var(--color-background);
	border: 1px solid var(--color-text);
	padding: 1em 2em;
}

/* Search */

#search {
	width: 30ch;
	max-width: 100%;
}
.search-help {
	position: absolute;
	background-color: var(--color-background);
	border: 1px solid var(--color-text-2);
	padding: 0.5em 1em;
	box-sizing: border-box;
	z-index: 2;
	font-size: 0.7rem;
}
.search-help code,
.search-help pre {
	font-size: 0.6rem;
	color: var(--color-text);
}

/* Character table */

.character-table {
	border-collapse: separate;
	border-spacing: 0;
}
.character-table:has(tbody:empty) thead {
	display: none;
}
.character-table th,
.character-table td {
	border-right: 1px solid var(--color-rule-3);
	border-bottom: 1px solid var(--color-rule-3);
	text-align: left;
	padding-left: 0.25em;
	padding-right: 0.25em;
}
.character-table th {
	vertical-align: bottom;
	position: sticky;
	top: 0;
	background-color: var(--color-background-2);
	white-space: nowrap;
}
.range-row td {
	position: sticky;
	top: 1.2em;
	background-color: var(--color-background-2);
	padding-left: 0.25em;
	padding-right: 0.25em;
}
.range-row .range-name {
	font-weight: bold;
}
.range-row .range-interval {
	padding-left: 1em;
	font-size: 80%;
}
.character-table td {
	vertical-align: middle;
	white-space: nowrap;
	overflow: hidden;
}
tbody .col-char {
	text-align: center !important;
	font-size: 1.5rem;
	min-width: 1em;
}
td.col-char {
	padding: 0; margin: 0;
}
.col-char .char-preview {
	width: 1.2em; height: 1.2em;
	font-size: 1.2em;
	z-index: -1;
}
.col-char .char-span {
	background-color: var(--color-char-background);
	white-space: pre;
}
.col-number {
	text-align: right !important;
}
.col-boolean {
	text-align: center !important;
}
.character-empty {
	text-align: center;
	font-weight: bold;
	padding-top: 4em;
}

/* Character preview */

.char-preview {
	position: relative;
	display: inline-block;
	width: 100px; height: 100px;
	font-size: 80px;
	background-color: var(--color-background);
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
	border: 1px solid var(--color-rule-3);
}
.char-preview .baseline-cont {
	display: inline-block;
	position: relative;
	font-size: 0;
	background-color: transparent;
}
.char-preview .baseline {
	display: inline-block;
	position: absolute;
	left: -300px; top: 0;
	width: 600px; height: 1px;
	background-color: transparent;
	border-bottom: 1px dotted rgb(from var(--color-text) r g b / 33%);
}
.char-preview .char-span {
	position: absolute;
	background-color: var(--color-char-background);
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
}

/* Character grid tiles */

.grid-cell {
	position: relative;
	display: inline-block;
	width: 150px; height: 230px;
	border-right: 1px solid var(--color-rule-3);
	border-bottom: 1px solid var(--color-rule-3);
	background-color: var(--color-background-2);
	vertical-align: top;
}
.grid-cell .char-preview {
	position: absolute;
	left: 3px; top: 3px;
	width: 144px; height: 144px;
	font-size: 100px;
}
.grid-cell .codepoint {
	position: absolute;
	left: 3px; top: 150px;
	right: 3px;
	height: 20px;
	text-align: center;
	font-size: 0.8rem;
}
.grid-cell .grid-title {
	position: absolute;
	left: 3px; top: 173px;
	right: 3px; bottom: 3px;
	text-align: center;
	text-transform: lowercase;
	text-overflow: ellipsis;
	overflow: hidden;
}

/* Detail pane */

.detail-body .char-preview {
	width: 100%; height: 200px;
	font-size: 160px;
}
#detail-buttons {
	margin: 0.25em 0 0.5em 0;
}
#detail-name {
	text-align: center;
	font-weight: bold;
	margin-top: 0.25em;
	margin-bottom: 1em;
}
#detail-name10 {
	text-align: center;
	font-weight: bold;
	margin-top: 0.25em;
	margin-bottom: 1em;
	font-size: 0.9em;
}
#detail-name10:before { content: '(aka '; }
#detail-name10:after { content: ')'; }
#detail-name10:empty {
	display: none;
}
#detail-codepoint {
	text-align: center;
	margin-top: 0.25em;
}
#detail-codepoint code {
	margin-left: 0.5em; margin-right: 0.5em;
}
.pane-detail .detail-row {
	margin: 0.5em 0;
}
.pane-detail .detail-group {
	margin: 1.5em 0;
}
.pane-detail .detail-list {
	margin: 0.5em 0;
}
.pane-detail .detail-list ul {
	padding-top: 0; padding-bottom: 0;
	margin-top: 0; margin-bottom: 0;
}
.pane-detail .detail-list li {
	margin-top: 0.5em; margin-bottom: 0.5em;
}
.pane-detail .detail-list li > div {
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: pre;
}
.pane-detail .detail-list li > div span:first-child {
	padding-right: 0.5em;
}
.pane-detail .detail-list li > div span:last-child {
	padding-left: 0.5em;
}
.detail-variant {
	font-size: 2em;
}

.escape-table {
	margin-top: 1em;
	margin-bottom: 1em;
	border-collapse: collapse;
}
.escape-table tr td {
	padding: 0.2em 1em 0.2em 0;
}

button.copy {
	border: none;
	background-color: transparent;
	color: var(--color-text);
}
button.copy img {
	width: 1em; height: 1em;
	filter: var(--filter-mono-svg);
}