/*! enuff.css v0.1.0 */

/*

## scope

- theme vars
- reset
- media (width, print, dark)
- typography
- list, nav
- table
- wrap
- grid
- form
- colors
- toggle: target, nav, pop, dlg

## classes

.wrap.roll
.row.flip.col-0-2-3.let?
.text-bg-e-w-y-i-n
.fit.mar.pad.bord.shade.bg.l.r.c.center
.btn.icon
.nav.pop.dlg.target-mobile-desktop
.hide.hide-print-mobile-desktop
excluded: .act? .close .back

*/

/* theme */
:root{
--font: "PT Serif", serif;
--font-mono: "PT Mono", monospace;
--text: #000;
--bg: #fff;
--bg-pane: rgba(0,0,0,.05);
--border: thin solid rgba(0,0,0,.16);
--shade: 0 .2em .8em rgba(0,0,0,.4);
--hover: #07f;
--gap: 1; /* em */
/* status */
--text-nav:     #04b;
--text-vis:     #90b;
--text-danger:  #c00;
--text-warning: #d70;
--text-success: #181;
--text-info:    #08a;
--text-lite:    #999;
--bg-danger:    #fcc;
--bg-warning:   #ffe699;
--bg-success:   #cec;
--bg-info:      #bef;
--bg-lite:      #eee;
/* derivative */
--link: var(--text-nav);
--visited: var(--text-vis);
--bg-btn: var(--text-nav);
--text-btn: var(--bg);
--gap-n:  calc(var(--gap) * 1em);
--gap-s:  calc(var(--gap-n) * .5);
--gap-xs:  calc(var(--gap-s) * .5);
--gaps-n: var(--gap-s) var(--gap-n);
--gaps-s: var(--gap-xs) var(--gap-s);
}

/* dark theme */
@media (prefers-color-scheme: dark){
	:root{
	--text: #fff;
	--bg: #000;
	--bg-pane: rgba(255,255,255,.2);
	--border: thin solid rgba(255,255,255,.3);
	--shade: 0 .2em 1em rgba(255,255,255,.5);
	--hover: #ff7;
	/* status */
	--text-nav:     #ec6;
	--text-vis:     #ec6;
	--text-danger:  #fcc;
	--text-warning: #ffe699;
	--text-success: #cec;
	--text-info:    #bef;
	--text-lite:    #eee;
	--bg-danger:    #c00;
	--bg-warning:   #d70;
	--bg-success:   #181;
	--bg-info:      #08a;
	--bg-lite:      #999;
	}
}

/* reset */
/* https: //github.com/jgthms/minireset.css/ */
button,input,select,textarea{margin:0;box-sizing:border-box;}
html{box-sizing:content-box;/*scroll-behavior:smooth;*/}
*,*:before,*:after{box-sizing:inherit;}
img,embed,iframe,object,audio,video{/*height:auto;*/max-width:100%;box-sizing:border-box;}
img,iframe{border:0;}
img{object-fit:cover;}
html,body,li,dl,dt,dd,legend,iframe{margin:0;padding:0;}
table{border-collapse:collapse;border-spacing:0;}
td,th{padding:0;text-align:left}
/*
p,ol,ul,blockquote,figure,fieldset,textarea,pre,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}
ul{list-style:none;}
*/
/* reset safari */
button,[type="submit"],[type="search"]{-webkit-appearance:none;}
/* reset firefox */
button::-moz-focus-inner, [type="submit"]::-moz-focus-inner{border:none;}

/* typography */
body{font:120%/1.5 var(--font);background-color:var(--bg);color:var(--text);}
pre, code{white-space:pre-wrap;}
pre,code,kbd,samp{font-family:var(--font-mono),monospace;font-size:90%;} /* normalize */
pre{overflow:auto;max-height:80vh;}
	code,kbd{padding:var(--gap-xs) var(--gap-s);}
	pre code{padding:0;font-size:100%;/* color:inherit; */}
	code,kbd{border-radius:var(--gap-xs);}
	kbd{border:var(--border);}
	sub,sup{line-height:0em;} /* normalize line height */
blockquote{border-left:var(--gap-s) solid var(--bg-pane);padding-left:var(--gap-n);}
blockquote,caption,figcaption{font-style:italic;}
hr,fieldset{border:var(--border);}
hr{border-width:thin 0 0 0;}
main{display:block;}/*ie*/
h1,h2,h3,h4,h5,h6{margin:3rem 0 1.5rem 0;line-height:1.3;}
a{color:var(--link);text-decoration:none;}
:visited{color:var(--visited);}
a:hover{color:var(--hover);}
a:not([href]){color:inherit;}
a.fit{color:inherit;}

/* table */
table{box-sizing:border-box;}
th,td{padding:var(--gaps-s);vertical-align:top;background-clip:padding-box;}
table tr:hover>*{background-color:var(--bg-pane);}
	table.let>*>tr>*{border-bottom:var(--border);}
	table.let>:last-child>tr:last-child>*{border-bottom:none;}

/* list */
ul{list-style-type:disc;}
ul, ol{padding:0 0 0 var(--gap-n);list-style-position:inside;}
ul ul, ol ol{margin:var(--gap-s) 0;}
dt{font-weight:bold;}
dd+dt{margin-top:var(--gap-s);}

/* form */
input,select{max-width:100%;}
textarea{width:100%;}
input,button,select,textarea,.btn{padding:var(--gap-xs);line-height:normal;font:inherit;border:var(--border);/*margin:.1em;*/}
button,[type="submit"],.btn{padding:var(--gaps-s);border-color:transparent;border-radius:.2em;}
	a.pad, .btn{box-sizing:border-box;display:inline-block;}
	/* grid */
	form .row, form>p{margin:var(--gap-s) 0;}
	/*form .row{align-items:center;}*/
	/* focus */
	button:not([disabled]), [type="submit"]:not([disabled]){cursor:pointer;}
	button:hover:not([disabled]), [type="submit"]:hover:not([disabled]), .btn:hover,
	button:focus, input:focus, select:focus, textarea:focus, [contenteditable]:focus, .btn:focus{
		box-shadow:0 0 0 .2em var(--bg-pane);outline:none;
	}
	/* validate */
	button[disabled], [type="submit"][disabled]{opacity:.5;}
	input[readonly]{background-color:var(--bg-pane);}
	[name]:invalid{border-color:var(--text-danger);}
	[type="checkbox"]:invalid+span, [type="radio"]:invalid+span{color:var(--text-danger);}
	[name]:invalid:focus{box-shadow:0 0 0 .2em var(--bg-danger);}
	:valid~.text-e, :invalid~.text-y{display:none;}

/* grid */
.row{display:flex;}
.row>*{flex:1;}
.row>:not(:last-child){margin-right:var(--gap-n);}
.row>.col-0{flex:0 1 auto;/*for ie*/ /*flex:initial;*/}
.row>.col-2{flex:2;}
.row>.col-3{flex:3;}
	.row.let{flex-wrap:wrap;}
	.row.let>*{flex:none;}
	.row.let.mar{margin-bottom:0;}
	.row.let.mar>*{margin-bottom:var(--gap-n);}
	.row.fit, .row.fit>*{margin:0;}

/* toggle */
.pop{display:inline;}
.pop, .nav li{position:relative;}
.pop>div, .nav ul{position:absolute;left:0;top:100%;background-color:var(--bg);min-width:12em;box-shadow:var(--shade);margin:0;z-index:50;}
	.nav{padding:0;margin:0;}
	.nav>li{flex:0 1 auto;}
	.nav li{list-style:none;}
	.nav ul{padding:/*var(--gap-s)*/ 0;}
	.nav ul{left:2em;}
		/* 3+ level to the right */
		/*
		.nav>li>ul{left:2em;}
		.nav ul ul{left:100%;top:0;}
		*/
	.nav li>*{display:inline-block;}
	.nav ul a, .nav.fit a{display:block;padding:var(--gaps-n);/*color:inherit;*/}
	.nav ul li:hover>a, .nav.fit li:hover>a{background:var(--bg-pane);}
	.nav a:nth-last-child(2):after{content:'\a0\a0\203a';color:var(--text-lite);}
	.nav.fit form{padding:0 var(--gap-n);}
	.nav.row{align-items:center;}
.dlg{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);background-color:var(--bg);background-clip:padding-box;z-index:110;min-width:20em;max-width:90%;max-height:80vh;overflow:auto;border:500em solid rgba(0,0,0,.3);}
.hide[class], .target:not(:target), .dlg:not(:target), .pop:not(:hover)>div:not(:target), .nav li:not(:hover)>ul{display:none;}

/* modifiers */
.wrap{max-width:45em;}
.roll{overflow-x:auto;}
.fit, table.fit>*>tr>*{background:none;padding:0;margin:0;border:none;box-shadow:none;text-decoration:none;color:currentColor;list-style:none;}
	img.fit{display:block;}
.bg,pre,code{background-color:var(--bg-pane);}
	pre code{background:none;}
.pad:not(table),pre,fieldset, table.pad>*>tr>*{padding:var(--gaps-n);}
	.dlg.pad{padding:var(--gap-n);}
.mar,ul,ol,dl,blockquote,pre,hr,p,figure{margin:var(--gap-n) 0;}
.bord, table.bord>*>tr>*{border:var(--border);}
.shade{box-shadow:var(--shade);}
.l{text-align:left;}
.r{text-align:right;}
.c{text-align:center;}
.center{margin-left:auto;margin-right:auto;}
.icon{display:inline-block;width:1em;height:1em;transform:translate(0,.15em);fill:currentColor;}

/* colors */
.text-n[class]{color:var(--text-lite);}
.text-i[class]{color:var(--text-info);}
.text-y[class]{color:var(--text-success);}
.text-w[class]{color:var(--text-warning);}
.text-e[class]/*,code*/{color:var(--text-danger);}
.bg-n[class]{background-color:var(--bg-lite);}
.bg-i[class]{background-color:var(--bg-info);}
.bg-y[class]{background-color:var(--bg-success);}
.bg-w[class],mark{background-color:var(--bg-warning);}
.bg-e[class]{background-color:var(--bg-danger);}
@media screen{
	button, [type="submit"], .btn[class]{background-color:var(--link);color:var(--bg);}
	button.bg-n[class], [type="submit"].bg-n, .btn.bg-n{background-color:var(--text-lite);}
	button.bg-i[class], [type="submit"].bg-i, .btn.bg-i{background-color:var(--text-info);}
	button.bg-y[class], [type="submit"].bg-y, .btn.bg-y{background-color:var(--text-success);}
	button.bg-w[class], [type="submit"].bg-w, .btn.bg-w{background-color:var(--text-warning);}
	button.bg-e[class], [type="submit"].bg-e, .btn.bg-e{background-color:var(--text-danger);}
}

@media (max-width: 899px){
	/* mobile */
	body{font-size:100%;}
	.hide-mobile[class], .target-mobile:not(:target){display:none;}
	.flip{display:block;}/* less priority then .hide*/
	.row.flip>*{margin-right:0;}
	.row.mar>*{margin-bottom:var(--gap-n);}
	.nav.row:not(.flip)>li>ul{left:0;}
}

@media (min-width: 900px){
	/* desktop */
	.hide-desktop[class], .target-desktop:not(:target){display:none;}
	form .row>:first-child{flex:.3;text-align:right;padding-top:var(--gap-xs);border-top:thin solid transparent;}
	.nav.row>li>ul{left:0;}
		/* pad first-level sublist for simple nav */
		/*
		.nav.row:not(.fit)>li:hover>ul{margin-top:var(--gap-xs);}
		.nav.row:not(.fit)>li:hover:after{content:"";position:absolute;left:0;top:100%;height:var(--gap-n);width:100%;}
		*/
		/*.nav:not(.fit)>li>a{padding-bottom:var(--gap-s);}*/
}

@media print{
	/* print */
	.hide-print{display:none !important;}
	body{font:12pt/1.3 serif;background:none;}
	h1,h2,h3,h4,h5,h6{page-break-after:avoid;}
	pre,blockquote{border-left:var(--border);}
	/* form */
	input,select,textarea{border-width:0 0 thin 0;}
	button,[type="submit"],.btn{border:var(--border);}
}