/* OUTLANDS SURVEY RECORDS */

:root {
	--a-color               : #0af;
	--a-hover-color         : #0af;
	--a-visited-color       : #caf;
	--a-hover-visited-color : #caf;
	--a-active-color        : #fc0;
	--strong-color          : #fc0;
}

@font-face {
	font-family: "Augusta";
	src: url("Augusta.ttf") format("truetype");
}
@font-face {
	font-family: "DejaVuSans";
	src: url("DejaVuSans.ttf") format("truetype");
}

.hidden { display:none !important; }

* { margin:0; padding:0; box-sizing:border-box; min-width:0; min-height:0; }
html, body { width:100vw; height:100vh }
body {
	display:grid;
	grid-template-columns:1fr;
	grid-template-rows:repeat(2, min-content) 1fr min-content;
	grid-template-areas:
		"mainmenu"
		"viewport"
		"viewport"
		"status"
	;
	background:#000; color:#fff; font-family:Augusta, DejaVuSans;
}
body.marker_menu {
	grid-template-columns:max-content 2em 1fr;
	grid-template-areas:
		"mainmenu   mainmenu    mainmenu"
		"markerterm markerclose viewport"
		"markerlist markerlist  viewport"
		"status     status      status"
	;
}
#main_menu   { grid-area:mainmenu; }
#marker_menu { Xgrid-area:markermenu; display:contents; }
article      { grid-area:viewport; }
footer       { grid-area:status; }
#marker_menu input  { grid-area:markerterm; }
#marker_menu button { grid-area:markerclose; }
#marker_menu ul     { grid-area:markerlist; }

body.loading_hires::before {
	content: "Loading...";
	display:block; position:absolute; z-index:1;
	top:50%; left:50%; transform:translate(-50%,-50%);
	padding:1em 2em;
	background:#000; color:#fff; border:solid 1px #fff;
}

#admin,
body:not([data-article=init ]) #init,
body:not([data-article=atlas]) #atlas,
body:not([data-article=atlas].marker_menu) #marker_menu,
body:not([data-article=help ]) #help { display:none; }

article { overflow:auto; position:relative; }
footer { display:none; padding:0.35em 0.5em; font-family:sans-serif; background:#222; color:#fff; line-height:1.35; }
body.status_bar footer { display:block; }

#main_menu { display:flex; position:relative; z-index:3; line-height:1.35; }
#main_menu, #main_menu ul { list-style-type:none; background:#222; color:#fff; }
#main_menu li {
	position:relative;
	padding:0.35em 0.75em;
	font-family:sans-serif; color:#fff;
	cursor:default; user-select:none;
	white-space:nowrap;
}
#main_menu ul { display:none; position:absolute; top:100%; margin-left:-0.75em; min-width:100%; }
body:not(.close_menu) #main_menu > li:hover > ul { display:block; background:#333; }
#main_menu li:hover { background:#444; color:#fff; }
#main_menu .toggles li::before { content:""; display:inline-block; width:1em; }
#main_menu .toggles li.selected::before { content:"✔"; }
#main_menu li.spacer { border:solid #444; border-width:1px 0 0; margin:0.25em 0; padding:0; pointer-events:none; }
#main_menu li.spacer::before { display:none; }
#main_menu .disabled { color:#666; pointer-events:none; }
#main_menu ul:has([accesskey]) li { padding-right:2.75em; }
#main_menu li[accesskey]::after {
	content:"[" attr(accesskey) "]";
	position:absolute; right:0.5em;
	font-family:monospace,monospace;
	text-transform:uppercase; color:#aaa;
}
#main_menu > .admin { margin-left:auto; }
#main_menu > .admin ul { right:0; }

#marker_menu { font-family:sans-serif; list-style-type:none; }
#marker_menu input { min-width:100%; max-width:0; border:none; outline:none; background:#444; color:#fff; font-size:1em; line-height:1.5; }
#marker_menu input:focus { background:#fff; color:#000; }
#marker_menu button { border:none; outline:none; background:#888; color:#fff; }
#marker_menu button:focus { box-shadow:inset 0 0 0 1px #fc0; }
#marker_menu ul { overflow-x:hidden; overflow-y:auto; padding:1px 0 0; outline:none; }
#marker_menu ul.overflowing { overflow-y:scroll; }
#marker_menu ul:focus { box-shadow:inset 0 0 0 1px #fc0; }
#marker_menu li {
	position:relative; margin:-1px 0 0; border:solid 1px #444; outline:none; padding:0.25em 0.35em; cursor:default;
}
#marker_menu li:focus { border-color:#fc0; z-index:2; }
#marker_menu li.selected { border-color:#0f8; z-index:1; }

body:not(.admin) .admin { display:none; }

#atlas        { overflow:hidden; }
#map          { display:block; cursor:move; }
#overlay      { position:absolute; top:0; left:0; display:block; pointer-events:none; }
#index_colors { position:absolute; top:0; left:0; display:block; z-index:-1; }
body.debug #index_colors { z-index:1; pointer-events:none; }
body.debug #atlas { overflow:visible; }

#cursor {
	position:absolute; top:0; left:0;
	width:max-content; margin:4px; padding:2px 3px;
	background:#0008; color:#fff;
	font-family:sans-serif; line-height:1;
	pointer-events:none;
	text-shadow:
		1px  0 #000 ,
		-1px 0 #000 ,
		0 1px  #000 ,
		0 -1px #000 ,
		2px  0 #0008,
		-2px 0 #0008,
		0 2px  #0008,
		0 -2px #0008 ;
}
body.confirm_locator #cursor { color:#0f0; }
body.panning #cursor { display:none; }

#cursor::before, #cursor::after {
	content:"";
	display:block; border:solid #f80;
	position: absolute; width:9px; height:9px;
}
#cursor::before { top:-8px; left:-4px; border-width:0 0 0 1px; }
#cursor::after  { top:-4px; left:-8px; border-width:1px 0 0; }

body:not(.panning) #map.inside { cursor:none; }
body.hover_region_link #cursor,
body:not(:has(#map.inside:hover)) #cursor { display:none; }
body:not(.panning):not(:has(#map.inside:hover)) #map { cursor:default; }

#cursor.flip_x { transform:translateX(calc(-100% - 7px)); }
#cursor.flip_x::before { left:unset; right:-13px; }
#cursor.flip_x::after  { left:unset; right:-8px; }
#cursor.flip_y { transform:translateY(calc(-100% - 7px)); }
#cursor.flip_y::before { top:unset; bottom:-8px; }
#cursor.flip_y::after  { top:unset; bottom:-13px; }
#cursor.flip_x.flip_y { transform:translate(calc(-100% - 7px), calc(-100% - 7px)); }

dialog {
	position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
	padding:1em;
	font-family:sans-serif; text-align:center;

}
dialog div { display:grid; grid-template-columns:min-content 15em; gap:1em; margin-bottom:1em; }
label { display:contents; }
label > span:nth-of-type(1) { grid-column:1; text-align:right; }
label > span:nth-of-type(2) { grid-column:2; text-align:left; }
label > input { grid-column:2; }
input, button { padding:0.25em 0.35em; }
textarea { display:block; margin:0 0 1em; width:30em; height:20em; }

a[href]         { color:var(--a-color); text-decoration:none; }
a[href]:visited { color:var(--a-visited-color); }
a[href]:hover   { color:var(--a-hover-color); text-decoration:underline; }
a[href]:not(:active):visited:hover { color:var(--a-hover-visited-color); }
a[href]:active  { color:var(--a-active-color); }

#init { display:grid; place-content:center; overflow-y:scroll; }

#help { padding:0 1em 2em; line-height:1.6; }
#help > :not(:is(h1,h2,h3,h4,h5,h6)) { font-family:sans-serif; }
#help :is(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,table) { margin:1rem 0; }
#help :is(h1,h2,h3,h4,h5,h6) { font-family:Augusta; }
#help h1 { font-size:1.5em; }
#help :is(ul, ol) { padding-left:1em; }
#help p:last-child { margin-top:2em; }

#help > div { display:flex; flex-wrap:wrap; gap:2.5em; }
#help > div table { display:inline-grid; column-gap:1em; grid-template-columns:repeat(2, max-content); height:max-content; margin:0; }
#help > table td { padding-right:1em; }
th, td { text-align:left; }
#help > div :is(tbody, tr) { display:contents; }
[colspan] { grid-column:span 2; font-family:Augusta; font-size:1.5em; }
#help > div tr:not(:first-child) [colspan] { margin-top:0.65em; }
#hotkeys td:first-child { text-align:center; }

kbd { font-family:monospace,monospace; }
kbd::before { content:"["; color:#aaa; }
kbd::after { content:"]"; color:#aaa; }
strong { color:#fc0; }
summary { cursor:pointer; }


/*EOF*/