d1-web/dist/d1.raw.css

Lightweight responsive front-end framework

/*! d1-web v2.7.5 */

/* d1-lite skips: .invert, .tip, table.flip, .picker, .yel, .fade, .over, .scroller, .trans */

/*

# js classes
- .js
- .js-unhint
- .js-live-val
- .subinput
- .input-tools
- .cell-head
~ .hide(-x)
- .target(-x)
- .toggle(-x)
- .off
- .mem
- .gallery
- .pic
- .item
+ (.act, .inact)
- (.is-on)
- (.is-off)
- .not-, .or, .or-


*/

/*, .invert .invert*/
:root{
--font: "PT Sans", Roboto, "Segoe UI", sans-serif;
--font-cap: var(--font); /*"PT Serif", serif;*/
--font-mono: "PT Mono", monospace;
--font-print: serif;
/*--font-size: 1.2;*/
--text: #000;
--bg: #fff; /*#f6f6f0;*/
--bg-pane: rgba(0,0,0,.05);
--border: thin solid rgba(0,0,0,.16);
--shade: 0 .2em .8em rgba(0,0,0,.3);
--bg-hilite: rgba(0,0,0,.05);
--text-hilite: inherit; /*#06f;*/
--focus: rgba(0,0,0,.1);
--focus-danger: rgba(255,100,100,.3);
--hover: #07f;
--rad: .2; /* em */
--gap: 1; /* em */
--gap-rate: .5;

/* status */
--text-danger:  #c00;
--text-warning: #d70;
--text-success: #181;
--text-info:    #08a;
--text-lite:    #999;
--text-nav:     #04b;
--text-vis:     #90b;
--bg-danger:    #fcc;
--bg-warning:   #ffe699;
--bg-success:   #cec;
--bg-info:      #bef;
--bg-lite:      #eee;
--bg-nav:       #cdf;
--bg-vis:       #ecf;
--btn-danger:  var(--text-danger);
--btn-warning: var(--text-warning);
--btn-success: var(--text-success);
--btn-info:    var(--text-info);
--btn-lite:    var(--text-lite);

/* derivative */
--bg-btn: var(--text-nav);
--text-btn: var(--bg);
--link: var(--text-nav);
--visited: var(--text-vis);
--radius: calc(var(--rad) * 1em);
--gap-n:  calc(var(--gap) * 1em);
--gap-s:  calc(var(--gap-n) * .5);
--gap-xs: calc(var(--gap-n) * .2);
--gap-l:  calc(var(--gap-n) * 2);
--gaps-n: calc(var(--gap-n) * var(--gap-rate)) var(--gap-n);
--gaps-s: calc(var(--gap-s) * var(--gap-rate)) var(--gap-s);
--gaps-l: calc(var(--gap-l) * var(--gap-rate)) var(--gap-l);
}

/*( invert */
.invert{
--text: #fff;
--bg: #222;
--bg-pane: rgba(255,255,255,.15);
--border: thin solid rgba(255,255,255,.2);
/*--shade: 0 .2em .8em rgba(255,255,255,.3);*/
--bg-hilite: rgba(255,255,255,.15);
/*--text-hilite: inherit;*/
--focus: rgba(255,255,255,.4);
--focus-danger: rgba(220,50,50,1);
--hover: #ff7;

/* keep inverted buttons */
--bg-btn: #36e;
--text-btn: #fff;
--link: #ec6;
--visited: #ec6;

/* status */
--text-danger:  #faa;
--text-warning: #fd8;
--text-success: #aea;
--text-info:    #adf;
--text-lite:    #bbb;
--text-nav:     #ec6;/*#cdf;*/
--text-vis:     #ec6;/*#ecf;*/
--bg-danger:    #c00;
--bg-warning:   #d70;
--bg-success:   #181;
--bg-info:      #08a;
--bg-lite:      #666;
--bg-nav:       #970;/*#04b;*/
--bg-vis:       #970;/*#90b;*/
--btn-danger:  var(--bg-danger);
--btn-warning: var(--bg-warning);
--btn-success: var(--bg-success);
--btn-info:    var(--bg-info);
--btn-lite:    var(--bg-lite);
}
/*)*/

/* 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:content-box;/*inherit;*/}
img,embed,iframe,object,audio,video{/*height:auto;*/max-width:100%;box-sizing:border-box;}
img,iframe,fieldset,hr{border:none;}
img{object-fit:cover;}
html,body,li,dl,dt,dd,legend,iframe,fieldset{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;}

/* reset */
input,button,select,textarea,table{font:inherit;} 


/* typo */
html{font-size:120%;}
body{font:100%/1.5 sans-serif;font-family:var(--font);}
body,.invert{color:var(--text);background-color:var(--bg);}
/*small, .small{font-size:calc(var(--font-size) * .83rem);font-weight:normal;}*/
small, .small{font-size:83%;font-weight:normal;}
main{display:block;}/*ie*/
ul,ol,dl,blockquote,pre,hr,p,figure{margin:var(--gap-n) 0;}
h1,h2,h3,h4,h5,h6{margin:calc(var(--gap) * 2rem) 0 calc(var(--gap) * 1rem) 0;line-height:1.3;font-family:var(--font-cap);/*letter-spacing:.03em;*/}
	h1.mar,h2.mar,h3.mar{margin:calc(var(--gap) * 1rem) 0;}
	.nobr{white-space:nowrap;}
	/* h1:first-child, h2:first-child, h3:first-child{margin-top:1.5rem;} */
	h1{font-size:200%;}
	h2{font-size:150%;}
	h3{font-size:117%;}
	h4{font-size:100%;}
	h5{font-size:83%;}
	h6{font-size:67%;}
	h1 small, h2 small, h3 small{font-size:.83rem;}
blockquote,pre/*,fieldset*/{padding:var(--gaps-n);}
pre,code{white-space:pre-wrap;}
	[class*="language-"]{white-space:pre;}
	pre,code,kbd,samp{font-family:var(--font-mono),monospace;font-size:90%;} /* normalize */
pre{overflow:auto;max-height:80vh;padding:var(--gap-n);/*max-width:100%;*/}
	code,kbd{padding:var(--gap-xs) var(--gap-s);}
	pre code{padding:0;font-size:100%;}
	code,kbd{border-radius:var(--radius);}
	kbd{border:var(--border);}
abbr{border-bottom:thin dotted;}
sub,sup{line-height:0em;} /* normalize line height */
/* q{quotes:"`" "`";} */

/* link */
/*
	color priority (#<class/attr><tag><line>):
	- normal    (--link)   #01aa
	- visited   (--visited)#10ab
	- nav, hash (--link)   #11ac
	- hover,act (--hover)  #11ad
	- no href   (--text)   #11ae
	- btn       (--bg)     #20b
	- status    (--text-x) #20c
	- hilited   (--hilite) #21+af
	- let       (--text)   #21d
	- let.text.icon(--link)#41d
*/
a{color:var(--link);}
:visited{color:var(--visited);} /* a:not(.btn) */
.nav a, a[href^="#"]{color:var(--link);}
a.act, a:hover{color:var(--hover);}
a:not([href]){color:inherit;}
abbr, a /*, .nav a, a.close, a.pad, a.btn,*/{text-decoration:none;}
a.pad, a.btn{display:inline-block;line-height:normal;}

/* hilite */
.hover:not(table) a:not(.inact):hover, .hover:not(table) .act, a.hover:hover, a.hover.act, table.hover tr:hover>*{
	color:var(--text-hilite);
	/*background-color:var(--bg-hilite);*/
	box-shadow:inset 0 0 0 30em var(--bg-hilite);
}
table.hover /*tr:hover a*/ a:hover{color:var(--text-hilite);}

/* image */
svg{fill:currentColor;}
.icon{display:inline-block;width:1em;height:1em;transform:scale(1.2);vertical-align:-10%;}
.icon.js-resized{transform:none;vertical-align:middle;}
	/*.icon:not(:last-child){margin-right:var(--gap-s);}*/
	.icon+*{margin-left:var(--gap-s);}
	/*.icon.line{fill:none;stroke:currentColor;stroke-width:8%;stroke-linecap:round;stroke-linejoin:round;transform:translate(0,.15em);}/*!*/

/* list */
ul{list-style:disc outside;}
ul, ol{padding:0 0 0 calc(var(--gap-n)*1.5);}
li ul, li ol{margin:var(--gap-xs) 0;}
dt{font-weight:bold;}
dt, dd{margin-bottom:var(--gap-s);}

/* table, hr */

table{box-sizing:border-box;}
th,td{padding:var(--gaps-s);vertical-align:top;background-clip:padding-box;}
fieldset, hr{border-top:var(--border);}
	legend{padding:0 var(--gap-s);}
	legend.mar{margin-left:var(--gap-n);}
table.bord>*>tr>*, fieldset.bord{border:var(--border);}
	table.bord{border:none;}

table.let>*>tr>*{border-bottom:var(--border);}
/*table.let *:last-child tr:last-child>*{border-bottom:none;}*/
	/*table.let tr:not(:last-child)>*{border-bottom:var(--border);}*/
table.shift{width:100%;/*margin:0;*/}
table.fit>*>tr>*{padding:0;}
.roll{overflow-x:auto;}
	.roll>table.bord{border:var(--border);border-width:medium;}

/* form, button */

form>p, form>.row, fieldset>*>.row{margin:var(--gap-s) 0;}

/*( overlay */
.over{position:absolute;top:0;left:0;right:0;bottom:0;background:none;}
.over.hover{transition:1s opacity;opacity:0;}
.item:hover .over.hover, .over.let{opacity:.5;}
/*)*/

/* bar */
.bar{display:flex;overflow:hidden;background-color:var(--bg-lite);border-radius:var(--radius);min-height:.3em;}
.bar>*{display:inline-block;min-height:.3em;background-color:currentColor;}

/*( tip */
[data-tip]{position:relative;display:inline-block;}
[data-tip]:after{content:attr(data-tip);position:absolute;bottom:101%;left:0;background-color:var(--text-lite);color:var(--bg);padding:0 var(--gap-s);border-radius:var(--radius);white-space:pre;z-index:4;text-align:left;font-weight:normal;font-style:normal;font-size:1rem;}
	[data-tip]:not(:hover):after{display:none;}
/* tip as popup */
.pop>.btn:not(.toggle){top:auto;bottom:100%;white-space:nowrap;min-width:0;}
.pop>.btn.c:not(.toggle){right:auto;left:50%;transform:translate(-50%,0);}
/*)*/

/* components */

/* z-index */	
.target, .toggle{z-index:10;}
.pop>div{z-index:20;}
.nav ul{z-index:30;}

/* position */
.close{position:absolute;top:0;right:0;}
/*.close.l{top:auto;bottom:0;}/*?*/
.fix{z-index:5;position:fixed;top:0;left:0;}
.fix.r{left:auto;right:0;}
.fix.l{top:auto;bottom:0;}

/* nav */
.nav li, .pop, .item{position:relative;}
ul.nav{display:flex;flex-wrap:wrap;}
	.nav.let{display:block;}
	.nav.let ul{top:90%;left:3em;}
ul.nav, .nav ul{list-style:none;padding:0;margin:0;}
.nav li>:not(ul){display:block;padding:var(--gaps-n);  height:100%;box-sizing:border-box;}
	.nav.center li>:not(ul){display:flex;align-items:center;}
	.nav li>form{padding:calc(var(--gap-n) * var(--gap-rate) - var(--gap-xs)) var(--gap-n);}
/* subnav arrow */
.nav li>a:nth-last-child(2):after{position:static;display:inline-block;content:'\a0\a0\203a';color:var(--text-lite);}
.nav ul li>a:nth-last-child(2):after{position:absolute;right:.5em;top:.5em;}

/* pop, nav */
.pop{display:inline-block;}
.nav ul, .pop>div{background-clip:padding-box;}
	.nav ul, .pop>div{position:absolute;left:0;top:100%;max-width:80vw;}
	.nav:not(.fit) ul:not(.fit), .pop>div:not(.fit){min-width:12em;}
	.nav ul ul{left:100%;top:0;}
	.pop>div.shift{left:auto;right:0;}

/* modal */
.dlg{z-index:120;position:fixed;left:50%;top:50%;transform:translate(-50%, -50%);background-clip:padding-box;min-width:16em;max-width:70%;max-height:80vh;overflow:auto;/*box-sizing:content-box;*/}/*top:0;left:0;right:0;margin:5vh auto;*/
	.full{width:100%;max-width:100%;min-height:100vh;box-sizing:border-box;}
	.dlg.let{width:70%;}
	.dlg.full{height:100vh;transform:none;top:0;left:0;}
	.full.center{display:flex;align-items:center;justify-content:center;}

/* drawer + effect */
.drawer[class]{z-index:80;position:fixed;top:0;left:0;height:100vh;width:80%;max-width:20em;box-sizing:border-box;overflow-y:auto;transition:left .2s;}
.drawer:not(:target):not([class*="toggle"]), .drawer.off{left:-21em;}/*hide*/
.drawer.shift[id]{left:auto;right:0;transition-property:right;}
.drawer.shift:not(:target):not([class*="toggle"]), .drawer.shift.off{right:-21em;}/*hide*/

/* gallery */
.gal a[id]{z-index:110;color:#fff;background:#000 50% 50% / contain no-repeat;position:fixed;left:0;top:0;width:100%;height:100vh;box-shadow:inset 0 3em 3em -1.5em rgba(0,0,0,.3);border-bottom:10em solid #000;/*box-sizing:content-box;*/outline:100em solid #000;/*none;*/outline-offset:0;}
.gal a:target{background-image:var(--img);} /* current */
	.gal a:target+a{background-image:var(--img);background-position:999em 999em;} /* preload next */
	.gal a:not([id]), .gal a:after{z-index:111;position:fixed;top:0;color:#fff;padding:0 calc(var(--gap-n) / 2);}
	.gal a[data-caption]:after{content:attr(data-caption);left:0;right:3em;display:block;}
	.gal a:not([id]){right:0;}
	.gal a.dragging:after{content:"";}


/* hide */
/* all */
.hide[class],
[class*="not-"],
.or:not([class*="or-"]),
.gal>*,
a.act>.is-off, a:not(.act)>.is-on,
/* css */ /* js may add id, should add .toggle(-mobile), should remove .target(-mobile) */
.target:not(:target),/*:not(.toggle)*/ /* .target[id] */
.tabs+div>div:not(:target):not(:last-child):not(.toggle), /* .tabs+div>[id] */
      .tabs+div>div:target:not(.toggle)~*, /* tabs undup*/
			.tabs+div.bord>hr,
	  .dlg:not(:target):not(.toggle), /* .dlg[id] */
   /*.drawer:not(:target):not(.toggle), /* .drawer[id] */
  /*.tree ul:not(.toggle):not(:target), /* .tree ul (auto id) */
 .nav li:not(:hover)>ul:not(.toggle), /* .nav ul (auto id) */
   .pop:not(:hover)>div:not(.toggle)/*:not(:target)*/, /* .pop>div[id] */
/* js */
.js .toggle.off:not(.stick):not(.drawer),
/* detect js */
.js .hide-js, body:not(.js) .hide-nojs
	{display:none;}

/* show (override) */
/*.drawer,*/
.gal a:target, .gal a:target~a:not([id])
{display:block !important;}


@media (max-width: 899px){
	/* mobile */
	.hide-mobile[class], .target-mobile:not(:target), .toggle-mobile.off, .empty-mobile>:not(.icon) {display:none;}
}

@media (min-width: 900px){
	/* desktop */
	.hide-desktop[class], .target-desktop:not(:target), .toggle-desktop.off, .empty-desktop>:not(.icon) {display:none;}
}



/* color */

.bg[class],blockquote,pre,code,thead tr,tfoot tr{background-color:var(--bg-pane);}
pre code{background:none;}
mark{background-color:var(--bg-warning);}

/* auto padding */
/* div.bord, p.bord, div.bg, p.bg, div[class*="bg-"], p[class*="bg-"]{padding:var(--gaps-n);} */

/* grid-fractional */
.row{display:flex;  /*for lists*/list-style:none;padding:0;}
.row>*{flex:1;/*1 0 auto;does not wrap text*/min-width:0;}
.row:not(.fit)>*:not(:last-child):not(.center){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.center:not(.wrap){align-items:center;}
	.shift{margin-left:auto;} /* .nav>li.shift, .row>*.shift */

.row.let.mar{margin-bottom:0;} /* will not collapse with following element */
.row.let.mar>*{margin-bottom:var(--gap-n);}
.row:not(.fit)>.col-2 {flex-basis:var(--gap-n);}
.row:not(.fit)>.col-3 {flex-basis:calc(2 * var(--gap-n));}

/* grid-regular */
[class*="grid-"]{display:flex;flex-wrap:wrap;}
[class*="grid-"]>*{width:100%;box-sizing:border-box;background-clip:padding-box;}
[class*="grid-"].let>*{border:var(--gap-s) solid transparent;}
	[class*="grid-"].shift>*{border:var(--gap-n) solid transparent;}
	[class*="grid-"]>.bord{box-shadow:inset 0 0 0 1px rgba(0,0,0,.16);}
.grid-2>*{width:50%;}
.grid-3>*{width:33.33%;}
.grid-4>*{width:25%;}
.grid-6>*{width:16.66%;}
/*
.grid>.col-0{width:auto;}
.grid>.col-1[class]{width:100%;}
.grid>.col-1-2{width:50%;}
.grid>.col-1-3{width:33.33%;}
.grid>.col-1-4{width:25%;}
.grid>.col-2-3{width:66.66%;}
.grid>.col-3-4{width:75%;}
*/
/* justify: requires parent style: overflow-x:hidden; */
/*
.grid.let{margin-left:calc(-1 * var(--gap-s));margin-right:calc(-1 * var(--gap-s));}
.grid.shift{margin-left:calc(-1 * var(--gap-n));margin-right:calc(-1 * var(--gap-n));}
*/

/* media */

@media (min-height: 600px){
	.dlg section{max-height:50vh;overflow:auto;}
}

@media (max-width: 899px){
	/* mobile (phone, tablet) */
	html{font-size:medium;}
	/*input[name],select[name],[contenteditable]{max-width:50%;}*/

	ul.flip, .flip /*.row.flip, .nav.flip*/{display:block;} /* should have less priority then hiding (like .off) */
	.row[class].flip[class]>*{margin-right:0;}
	[class*="grid-"].flip>*{width:auto;}
	.grid-1-mobile>*{width:100%;}
	.grid-2-mobile>*{width:50%;}
	.grid-3-mobile>*{width:33.33%;}
	.grid-4-mobile>*{width:25%;}
		/*.row.flip.mar[class]>*+*:not(.mar){margin-top:var(--gap-xs);}*/
	.row.flip.mar>:not(:last-child){margin-bottom:var(--gap-n);} /* keep cell margin */
	/*( table-flip */
	table.flip[class]{border-width:0;}
	table.flip caption, table.flip thead, table.flip tbody, table.flip tfoot, table.flip tr, table.flip tr>*{display:block;text-align:left;}
	table.flip tr{margin-bottom:var(--gap-n);border:var(--border);border-width:medium;}
	table.flip.let tr>*{border:none;border-bottom:var(--border);}
		table.let:not(.flip)>*:last-child>tr:last-child>*{border-bottom:none;}
		form table.flip:not(.bord) tr{margin-bottom:var(--gap-s);border:none;}
		form table.flip:not(.bord):not(.let) tr>*{padding:0;}
		table:not(.flip) .cell-head, .js table.flip thead{display:none;}
	/*)*/
	.nav.flip ul{left:3em;top:90%;}
	.nav:not(.let):not(.flip)>li.shift>ul, .nav:not(.let):not(.flip)>li.shift~li>ul{left:auto;right:0;}
}

@media (max-width: 480px){
	/* phone */
	.grid-1-phone>*{width:100%;}
	.grid-2-phone>*{width:50%;}
	.grid-3-phone>*{width:33.33%;}
}

@media (min-width: 900px){
	/* desktop */
	table.let>*:last-child>tr:last-child>*{border-bottom:none;}
	form>.row>:first-child:not(:only-child), fieldset>*>.row>:first-child:not(:only-child){text-align:right;flex:.3;}
	form table:not(.bord):not(.let) td:first-child:nth-last-child(2):not([colspan]){text-align:right;/*min-*/width:30%;/*12em;*/}
		/*fieldset table:not(.bord):not(.let) td:first-child:nth-last-child(2):not([colspan]){width:calc(12em - var(--gap-n) - var(--gap-s));}*//*min-width*/
	.dlg{min-width:20em;}
	.dlg.pad{padding:var(--gaps-l);}
	/*.nav:not(.let)>li.shift>ul:not(.toggle), .nav:not(.let)>li.shift~li>ul:not(.toggle), .pop>div.shift:not(.toggle){left:auto;right:0;}*/
	.nav:not(.let)>li.shift>ul, .nav:not(.let)>li.shift~li>ul{left:auto;right:0;}
	/*( tip */
	[data-tip].c:after{left:50%;transform:translate(-50%,0);}
	[data-tip].shift:after{left:auto;right:0;}
	/*)*/
}

@media screen{
	.hide-screen{display:none !important;}
	.wrap{max-width:60em;}
	.read{max-width:40em;}
	.wrap, .read, .narrow{box-sizing:border-box;}

	/* stick */
	.stick{z-index:3;position:sticky;top:0;max-height:100vh;align-self:flex-start;/*stretch*/overflow:auto;box-sizing:border-box;}
	.stick.let{overflow:visible;z-index:70;}
	.stick.toggle{transition:top .3s ease-in-out;}
	.stick.toggle.off{top:-4em;max-height:3em;overflow:hidden;}
		/*div*/[id]{scroll-margin-top:/*3*/4rem;} /* .pop, .target, .tabs (-.tree) */

	/* form */
	
	input,select{max-width:100%;}
	textarea{width:100%;}
	[type="file"]{max-width:15em;}
	input,button,select,textarea{padding:var(--gap-xs);line-height:normal;}
	input,button,select,textarea,a.btn{border:thin solid #aaa;} /* rgba(0,0,0,.3) fails for select */
	a.btn,button,[type="submit"]{padding:var(--gaps-n);border-radius:var(--radius);margin:var(--gap-xs) 0;}
	.btn,button,[type="submit"]{border-color:transparent;}
	a.btn,button:not([disabled]),[type="submit"]:not([disabled]){cursor:pointer;}
	form>a.btn, form>button, form>[type="submit"], form>a>button{padding:var(--gap-xs) var(--gap-s);margin:0;}/* see [.nav a] padding */
		.btn[class],button.fit{border-radius:var(--radius);}
		.btn:not(a):not(input):not(button):not(.pad), a.btn.fit,button.fit,[type="submit"].fit{padding:0 var(--gap-s);}
	a.btn:hover, button:hover:not([disabled]), [type="submit"]:hover:not([disabled]),
	a.btn:focus, button:focus, input:focus, select:focus, textarea:focus, [contenteditable]:focus{box-shadow:0 0 0 .15em var(--focus);outline:none;}
	button[disabled],[type="submit"][disabled],.inact{opacity:.5;}
	input[readonly]{background-color:var(--bg-lite);}
	/*form:focus-within*/ [name]:invalid, [name]:invalid~.subinput{/*box-shadow:0 0 0 .08em rgba(255,200,80,.8);*/border-color:var(--text-danger);}
		[type="checkbox"]:invalid+span, [type="radio"]:invalid+span{color:var(--text-danger);}
		[name]:invalid:focus, [name]:invalid~.subinput:focus{box-shadow:0 0 0 .15em var(--focus-danger);}
		/*form:not(:focus-within) input~.text-e, form:focus-within input:valid~.text-e{display:none;}*/
		:valid:not(.subinput)~.hint.text-e, :invalid~.hint.text-y, /*.js-unhint :valid~.text-y,*/ .js .js-unhint :invalid~.hint.text-e, .js .js-unhint:invalid~.hint.text-e{display:none;}
	input[type="range"], input[type="color"]{vertical-align:middle;padding:unset;}
		input[type="range"]{border:initial;}
	
	/*( file-picker */
	.picker{display:inline-block;vertical-align:top;position:relative;min-width:8em;}
	.picker>nav{font-size:75%;}
	.picker>label{display:flex;align-items:center;justify-content:center;width:8em;height:8em;background:var(--bg-pane) no-repeat 50% 50% / contain;/*border-radius:50%;*/}
	.picker>label:hover{background-size:cover;}
	.picker>label>span{font-size:300%;}
	.picker>div{/*position:fixed;top:-10em;*/width:0;height:0;overflow:hidden;/*z-index:200;*/}
	.picker label{cursor:pointer;}
	.picker.fit a.pic{background:no-repeat 50% 50% / cover;width:1.5em;transform:scale(1.4);border-radius:50%;}
	.picker.fit>label{display:none;}
	/* drop - chrome (no dropzone in firefox) */
	/*
	.drag .drop:before, .drag .pick:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.3);outline:.5em dashed rgba(255,255,255,.5);outline-offset:-2em;z-index:200;}
	.drag .pick:not(.drop):before{position:absolute;outline-offset:-1.5em;z-index:201;}
	.drag [type="file"].act:before{outline-color:#fff;}
	*/
	/* drop - firefox (visible file input - fixed for chrome) */
	.drag .pick, .drag .drop{
		top:0;left:0;max-width:100%;min-width:100%;height:100%;
		background:rgba(0,0,0,.3);outline:.5em dashed rgba(255,255,255,.5);
		position:absolute;outline-offset:-1.5em;z-index:201;
	}
	.drag .drop{position:fixed;outline-offset:-2em;z-index:200;}
	.drag [type="file"].act{outline-color:#fff;}
		.drag .picker [type="file"]{/*-webkit-appearance:textfield;*/color:transparent;}
		.drag .picker ::-webkit-file-upload-button{visibility:hidden;}
	/*)*/

	/* color */
	
	.btn[class],button,[type="submit"]{background-color:var(--bg-btn);color:var(--text-btn);}
	/*.btn.hover:not(:hover), button.hover:not(:hover), [type="submit"].hover:not(:hover){background:none;color:var(--link);}*/
	.btn .icon, button .icon{color:var(--text-btn);}
		.btn[class].hover,button.hover,[type="submit"].hover{background:none;color:inherit;}/*?*/
	.icon{color:var(--text-lite);}
		[class*="text-"]>.icon:not([class*="text-"]){color:inherit;}

	.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]{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]{background-color:var(--bg-warning);}
	.bg-e[class]{background-color:var(--bg-danger);}
	.btn.bg-n, button.bg-n[class], [type="submit"].bg-n{background-color:var(--btn-lite);}
	.btn.bg-i, button.bg-i[class], [type="submit"].bg-i{background-color:var(--btn-info);}
	.btn.bg-y, button.bg-y[class], [type="submit"].bg-y{background-color:var(--btn-success);}
	.btn.bg-w, button.bg-w[class], [type="submit"].bg-w{background-color:var(--btn-warning);}
	.btn.bg-e, button.bg-e[class], [type="submit"].bg-e{background-color:var(--btn-danger);}

	/*( yellow-fade */
	@keyframes yellowfade { 0% {} 30% {background-color:#ffc;} 100% {} }
	.yel:target{animation-name:yellowfade;animation-duration:2s;}
	/*)*/
}

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

/* decorate togglers */
.pop>div, .nav ul, .dlg, .drawer{box-shadow:var(--shade);background-color:var(--bg);text-align:left;}
.stick, .back{background-color:var(--bg);}
.tabs li{margin-right:calc(var(--gap-n) / 4);}
.nav.roll{flex-wrap:nowrap;}
.nav.roll>*, .row.roll>*{flex:none;}
.dlg{border:500em solid rgba(0,0,0,.7);}
.dlg.full{border:none;}
.dlg.rad{border-radius:calc(500em + var(--radius));}
.tabs.rad a{border-radius:var(--radius) var(--radius) 0 0;}
	/*( js-fade: use body:after instead of large border; close modal on click outside */
	.js.fade .dlg:not(.full){border:none;border-radius:0;top:30%;transform:translate(-50%, -30%);}
	.js.fade .dlg.rad{border-radius:var(--radius);}
	.js:after{opacity:0;content:"";position:fixed;top:0;left:0;width:100%;height:100vh;background:rgba(100,100,100,.5);z-index:-1;}
	.js.fade:after{opacity:1;z-index:100;}
	/*)*/

/* helpers */

.fit{margin:0;padding:0;border-radius:0;box-shadow:none;}
	.fit:not(hr):not(.bord){border:none;}
	ul.fit li{list-style:none;}
	a.let/*:not([class*="text-"])*/{color:inherit;}
		/* color only icon, not link text */
		/*
		a.let[class*="text-"][class*="icon-"]>:not(.icon){color:var(--link);}
		a.let.act[class*="text-"][class*="icon-"]>:not(.icon){color:var(--hover);}
		*/
	img.fit{display:block;}
.mar{margin:var(--gap-n) 0;}
	form .mar{margin-top:var(--gap-s);margin-bottom:var(--gap-s)}
.center{margin-left:auto;margin-right:auto;}
.pad{padding:var(--gaps-n);}
.bord{border:var(--border);/*thin solid rgba(0,0,0,.2);*/}
.rad{border-radius:var(--radius);}
.shade{box-shadow:var(--shade);}
.l{text-align:left;}
.c{text-align:center;}
.r{text-align:right;}
/*.wide{width:100%;}*/
.narrow{max-width:16em;}
/*( decor-scroller-transitions */
.dragging{z-index:200;  position:relative;/*fix stacking order*/  /*cursor:pointer;*//*move*/}

/* custom scrollbar */
.scroller::-webkit-scrollbar{width:.5em;height:.5em;background:#eee;}
.scroller::-webkit-scrollbar-thumb{background:#ccc;}
.scroller{scrollbar-width:thin;scrollbar-color:#ccc #eee;}

/* transitions */
/*
- transitions: add(.fading); setTimeout(add(.off))
  + fixed (drawer, top): position
  + absolute (nav, pop, tip): opacity, index-z:-1
  ~ full (dlg, gal): .fading(opacity, scale?) -> .off
  - static (target, tabs, tree): .fading(height, opaicty?) -> .off
*/
@media (min-width: 900px){
	.trans .nav li:not(.shift)>ul.toggle, .trans .pop>.toggle, .trans [data-tip]:after{display:block !important;transition:.2s opacity;}
	.trans .nav ul.toggle.off, .trans .pop>.toggle.off, .trans [data-tip]:not(:hover):after{opacity:0;z-index:-1;transition-duration:.1s;pointer-events:none;}
	.trans [data-tip]:hover:after{transition:opacity .3s .3s;}
	.trans .dlg.toggle:not(.off){transition-duration:.2s;transition-property:opacity,transform;opacity:1;}
	.trans .dlg.toggle.off{display:block !important;opacity:0;z-index:-1;transform:translate(-50%, -50%) scale(.8);}
	.trans .dlg.full.toggle.off{transform:scale(.8);}
	.trans.js.fade:after{transition:.2s opacity;}
	/*
	.trans .dlg:target{transition-duration:1s;transition-property:opacity,transform;opacity:1;transform:translate(-50%, -50%);}
	.trans .dlg:not(:target){display:block !important;opacity:0;z-index:-1;transform:translate(-50%, -50%) scale(.9);}
	*/
}
/*)*/