/* minimal for initial screen */

@viewport,  @-ms-viewport, @-moz-viewport {
	viewport-fit: cover;
	height: device-height;
	width: device-width;
	zoom: 1;
    min-zoom: 1;
    max-zoom: 1;
    user-zoom: fixed;
}

html {
	--extra-pad-top: 24px;
	--extra-pad-top: env(safe-area-inset-top, 0);
	--extra-pad-btm: env(safe-area-inset-bottom, 0);
	--extra-pad-hgt: calc( var(--extra-pad-top) + var(--extra-pad-btm) );
}


@media all{
	html {
		--lt-mode-general: "other";
		--lt-mode-variant: "other-default";
		--lt-clickable-sz: 1cm;
		--lt-readable-sz: .6cm;
	}
}

@media only screen and (min-aspect-ratio: 7/6){
	@media (pointer: coarse) { 
		html {
			--lt-mode-variant: "wide-coarse";
			--lt-clickable-sz: calc(.75vmin + 7mm);
			--lt-readable-sz: calc(0.85vh + 0.85vmin + 1mm + 1pt);
			--lt-readable-sz: calc(.65vmax + .9vmin + 1mm + 2pt);
		}
	}
	@media (pointer: fine) { 
		html {
			--lt-mode-variant: "wide-fine";
			--lt-clickable-sz: calc(0.25vw + 0.45vmin + 4mm + 6pt);
			--lt-readable-sz: calc(.17vmax + .6vmin + 1.5mm + 4pt);
		}
	}
	@media (pointer: none) { 
		html {
			--lt-mode-variant: "wide-none";
			--lt-clickable-sz: calc(.75vmin + 8mm);
			--lt-readable-sz: calc(0.65vw + 0.9vmin + 1mm);
		}
	}
	html {
		--lt-mode-general: "wide";
	}
}
@media only screen and (max-aspect-ratio: 7/5){
	@media (pointer: coarse) { 
		html {
			--lt-mode-variant: "square-coarse";
			--lt-clickable-sz: calc(.8vmin + 7mm);
			--lt-readable-sz: calc(.65vmax + .9vmin + 1mm + 2pt);
		}
	}
	@media (pointer: fine) { 
		html {
			--lt-mode-variant: "square-fine";
			--lt-clickable-sz: calc(0.25vw + 0.45vmin + 4mm + 6pt);
			--lt-readable-sz: calc(.17vmax + .6vmin + 1.5mm + 4pt);
		}
	}
	@media (pointer: none) { 
		html {
			--lt-mode-variant: "square-none";
			--lt-clickable-sz: calc(.8vmin + 8mm);
			--lt-readable-sz: calc(0.85vh + 0.85vmin + 1mm);
		}
	}
	html {
		--lt-mode-general: "square";
	}
}
@media only screen and (max-aspect-ratio: 6/7){
	@media (pointer: coarse) { 
		html {
			--lt-mode-variant: "fill-coarse";
			--lt-clickable-sz: calc(.8vmin + 7mm);
			--lt-readable-sz: calc(.65vmax + .9vmin + 1mm + 2pt);
		}
	}
	@media (pointer: fine) { 
		html {
			--lt-mode-variant: "fill-fine";
			--lt-clickable-sz: calc(0.25vh + 0.35vmin + 4mm + 6pt);
			--lt-readable-sz: calc(.17vmax + .6vmin + 1.5mm + 4pt);
		}
	}
	@media (pointer: none) { 
		html {
			--lt-mode-variant: "fill-none";
			--lt-clickable-sz: calc(.75vmin + 8mm);
			--lt-readable-sz: calc(0.85vh + 0.85vmin + 1mm);
		}
	}
	html {
		--lt-mode-general: "fill";
	}
}

/* Primary input mechanism system can 
   hover over elements with ease */
@media (hover: hover) {  }

/* Primary input mechanism cannot hover 
   at all or cannot conveniently hover 
   (e.g., many mobile devices emulate hovering
   when the user performs an inconvenient long tap), 
   or there is no primary pointing input mechanism */
@media (hover: none) {  }

html {
	--lt-weighted-sz: calc( ( .5 * var(--lt-clickable-sz) + 1.5 * var(--lt-readable-sz) ) / 2 );
}

html, .-lt-clickable-font-size {
	font-size: var(--lt-clickable-sz);
}
body, .-lt-readable-font-size {
	font-size: var(--lt-readable-sz);
}
.-lt-weighted-font-size {
	font-size: var(--lt-weighted-sz);
}


html, body, input, button, plane, screen {
	position: relative;
	box-sizing: border-box;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	
    -webkit-appearance: none;
    -moz-appearance: none;
}

html, body {
	width: 100vw;
	height: 100vh;
	overflow-scrolling: auto;
	overflow-scrolling: none;
	touch-callout: none;
	-webkit-overflow-scrolling: auto;
	-webkit-overflow-scrolling: none;
	-webkit-touch-callout: none;
}

html {
	position: relative;

	display: block;

	background-color: #fff;
	color: #000;

	text-rendering: optimizeLegibility;
	text-size-adjust: 100%;

	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	-webkit-locale: en;
	-webkit-text-size-adjust: 100%;
	-moz-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	
	-background-color: cyan;
	-opacity: .75;
}

body {
	position: absolute;
	left: 0;
	top: 0;

	display: block;

	font-weight: 400;
	line-height: 100%;

	color: #444;
	background-color: #777;
}

* {
  box-sizing: border-box;
}

svg {
	fill: currentColor;
}


/* instead of display: none (for 'preload') */
template-block, template-block > * {
	display: block;
	position: absolute;
	bottom: -1px;
	left: -1px;
	width: 0;
	height: 0;
	overflow: hidden; 
}


plane {
	position: fixed;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	width: 100%;

	display: flex;
	overflow: hidden;

	font-size: var(--lt-readable-sz);
	
	pointer-events: none;
	background-color: #779;
	color: #fff;
	
	-webkit-user-select: none;
	-moz-user-select: none;
	user-select: none;

	touch-callout: none;
	-webkit-touch-callout: none;

	overflow-scrolling: none;
	-webkit-overflow-scrolling: none;

}

body>plane{
	position: absolute;
	position: fixed; /* shade breaks */
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;

	display: flex;
}

plane > noscript {
	z-index: 9999;
}

view-image {
	display: block;
	width: 1em;
	height: 1em;
	margin: auto;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	background-image: url(i/icl-unknown-icon.svg);
}

screen-body > view-image {
	width: 50vw;
	width: calc( 35vw / 2 + 10vh / 2 );
	height: 50vh;
	height: calc( 35vh / 2 + 10vw / 2 );
	max-width: 75%;
	max-height: 75%;
	margin: auto;
	margin: auto auto 1em auto;
}

view-text {
	display: block;
	text-align: center;
	margin: .2em auto auto auto;
	min-height: 1em;
	width: 90%;
	line-height: 130%;
}

view-detail:not(:empty) {
	display: block;
	text-align: left;
	margin: .75em auto auto auto;
	min-height: 1em;
	line-height: 120%;
	border: 1pt dotted currentColor;
	padding: .3em;
}


context-screen{
	display: none;
	background: repeating-linear-gradient(
	  -45deg,
	  #aaa,
	  #aaa 10px,
	  #999 10px,
	  #999 20px
	);	
}

context-body{
	display: block;
	height: 100%;
}


screen, modal-screen {
	display: flex;
	flex-flow: column;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 2;
	pointer-events: auto;
	pointer-events: all;
}

screen.os-toolbar {
	display: none;
}


screen {
	display: flex;
	flex-flow: column;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	
	justify-content: center;
	align-items: center;
	
	background-color: #AAA;
}



screen.javascript{
	background-color: #fee;
	color: #900;
	z-index: 9999;
}
body.screen-javascript, screen.javascript>screen-head{
	color: #fee;
	background-color: #900;
}
view-text.javascript::after{
	content: "Javascript is required for this Application to work.";
}

screen.initial {
	-z-index: 1;
	
	background-color: #eee;
	color: #999;
	filter: grayscale(1);
	
	animation-delay: 0;
	animation-duration: 0;
}
body.screen-initial, screen.initial>screen-head{
	color: #ffe;
	background-color: #950;
}
screen.initial>screen-body>view-image {
	background-image: url(i/network-activity.svg);
	opacity: .25;
}



screen-body{
	display: flex;
	width: 100%;
	flex-direction: column;
	flex: 1;
	-z-index: 1;
}

screen-body::after {
	display: block;
	min-height: 1.2em;

	margin: 1.2em auto 0 auto;
	margin: 1.2em auto var(--extra-pad-btm) auto;
	padding: .2em 0 .2em 0;
	font-size: 70%;
	line-height: 100%;
	content : "© 2017–2019 NDM Systems LLC.";

	-webkit-box-flex: 0;
	-webkit-flex: none;
	-ms-flex: none;
	flex: none;
	grid-row: 4;
	order: 4;

	text-align: center;
	align-self: center;
	border-top: 0.05em solid currentColor;
}


screen-head, modal-head, #plane-header, #modal-header{
	display: flex;
	position: relative;
	box-sizing: border-box;
	width: 100%;
	margin: 0;
	z-index: 5;
	font-size: .5rem;
	line-height: 100%;
	flex: none;
	white-space: nowrap;

	height: 2.8em;
	padding: .4em .4em .4em .4em;
	align-content: center;
	background-color: #555;
}

screen-head{
	height: calc(2.8em + var(--extra-pad-top));
	border-top: var(--extra-pad-top) solid transparent;
}

screen-head > header-logo{
	display: block;
	order: 0;
	flex: none;
	margin: 0 .2em;
	height: 2em;
	width: 2em; 
	align-content: center;
	text-align: left;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center center;
}

header-logo{
	filter: brightness(0) invert(1);
}





@media all {
	screen-head > header-logo{
		width: 6rem;
		margin: 0 .2em;
		background-image: url(keenetic-wide.svg);
	}
}




@media only screen and (orientation: landscape) and (max-width:5rem), only screen and (orientation: portrait) and (max-width:10rem){
	screen-head > header-logo{
		width: .9rem;
		margin: 0 .4em;
		background-image: url(keenetic-fill.svg);
	}
}



@media only screen and (min-width:19rem) {
	screen-head > header-logo{
		width: 7rem;
		margin: 0 .2em;
		background-position-x: 0;
		background-image: url(keenetic-wide.svg);
	}
}

@media only screen and (min-width:29rem) {
	screen-head > header-logo{
		width: 9rem;
		margin: 0 .2em;
		background-position-x: 0;
		background-image: url(keenetic-wide.svg);
	}
}




@media (min-aspect-ratio: 6/7) {
	screen-body::after {
		width: 67%;
		grid-row: 2;
		grid-column: 1 / -1;
	}
}


@media (max-aspect-ratio: 6/7) {
	screen-body::after {
		width: 75%;
		grid-row: 4;
	}
}