/*
	Use figure.css for all figures and experiments with caption and control area.
	Also need controls.css for interactive figures that use controls.
	Order of styles: global.css, controls.css, color.css, figure.css, specificstyles.css
*/


/***************** basic attributes of body and caption ***************/


html { overflow:hidden; }

body, html {
	background:#fff;
}

body {
	overflow-x:hidden;
	user-select:none; /* could allow selection of p * and li * text. */
	cursor:default;
}

#caption {
	user-select:text; /* could allow selection of p * and li * text. */
	cursor:auto;
}


.centered {
	top:0; right:0; bottom:0; left:0;
	bottom:var(--ctrlht); /* variable is set in each file */
	position:absolute;
	margin:auto;
	/* if the size is known and kept as --width and --height, this will work and will adjust if any of the sizes change
	left:calc((100vw - var(--width)) / 2);
	top:calc((100vh - var(ctrlht) - var(--height)) / 2);
	*/
}

/* for standard Crawdad-style figure NO LONGER USED? */
#fig+#caption {
	border:none; background-color:transparent;
}

/**************** control back; for caption alone or caption with controls ****************/


/* On iOS devices that lack a home button, the swipe bar at the bottom obscures part of the control background.
	If I can target that, add 12px padding to the bottom of #ctrlback. and add 12px to height of #ctrlback.down. 
	Complicating matters further, iOS Firefox already compensates for the swipe bar. */

#ctrlback {
	/* keep it centered at the bottom of the window */
	position:fixed;
	left:50%;
	bottom:0px;
	transform:translate(-50%);
	/* appearance */
	border-radius:6px 6px 0px 0px;
	border:1px solid #444;
	border-bottom:none;
	background:#e6e6e6; /* fallback */
	background:linear-gradient(to bottom,#fff,#e6e6e6,8px,#e6e6e6);
	height:auto;
	padding:4px;
	padding-top:6px;
	padding-bottom:2px; /**********/
	/* if setting heights explicitly, can have simple animation */
	transition:height 0.2s;
}

/*
	Default width 768px. For #ctrlback.wide, it's 100%, to a maximum of 1024px.
	For widths below 768 or 1024, get rid of the curves and RL borders so it's flush with the window.
*/

#ctrlback {
	width:100%;
	max-width:768px;
}

#ctrlback.wide {
	width:100%;
	max-width:1024px;
}

#ctrlback.flex {
	width:100%;
	max-width:768px;
}

@media screen and (max-width:1024px) { 
	#ctrlback.wide {
		border-left:none;
		border-right:none;
		border-radius:0px;
		left:0px;
		transform:none;
	}
}

@media screen and (max-width:768px) { 
	#ctrlback {
		border-left:none;
		border-right:none;
		border-radius:0px;
		left:0px;
		transform:none;
	}
}


/* toggle to hide/show the caption-control area */

/* "button" area for the triangle control */
#updown {
	border:1px solid #aaa;
	border-top:none;
	border-radius:0px 0px 7px 7px;
	position:relative;
	top:-6px;
	padding-top:5px;
	box-shadow:1px 1px 0px #f6f6f6;
	margin: 0 calc(50% - 33px) -5px calc(50% - 33px); /* appears to be supported by all browsers but Opera Mini */
	width: 66px;
}

/* downward or upward triangle control */
#updown span {
	display:block;
	width:0px; height:0px;
	border-left:0.4em solid transparent;
	border-right:0.4em solid transparent;
	border-top:0.4em solid #666; /* down arrow for up-state */
	border-bottom:none;
	top:-3px; 
	position:relative;
	margin:0 auto;
}
.ctrldown #updown span {
	border-top:none;
	border-bottom:0.4em solid #666; /* up arrow for down state */
}

/* Originally, clicking the Down arrow hid the caption AND the controls. To do that:
		.ctrldown #ctrlback { height:8px; }
		.ctrldown #basic { display:none; } [because it is displayed with position:absolute;]
		
	Now, clicking the Down arrow hides only the caption. To do that:
		.ctrldown #caption { display:none; }
	
	If the demo should recenter its content when caption (or caption+controls) are hidden:
		.ctrldown .centered {
			bottom:45px;
		}
	or 
		@media (orientation: landscape) {
			.ctrldown .centered {
				bottom:45px;
			}
		}
	where 45px is the height of the control area.
*/


.ctrldown #ctrlback { height:11px; } /* hide the whole area */ /* could do this on a case-by-case basis */
.ctrldown { --ctrlht:11px; }
.ctrldown #caption { display:none; } /* hide the caption, leaving the controls available */
/* THIS VERSION puts the control area in the lower left corner; clicking anywhere on it restores.
.ctrldown #ctrlback {
	left:0px;
	width:36px;
	height:18px;
	border-top-left-radius: 0;
	XXtop:0px;
}
.ctrldown div {
	visibility:hidden!important;
}
*/

/**************** toggle that fills the screen or restores the window ******************/

#fillscreen {
	width:18px;
	height:18px;
	padding:9px;
	top: 0px;
	right:0px;
	position:absolute;
	border:none;
}

#fillscreen span {
	width:0;
	height:0;
	display:block;
	border:none;
	border-top:6px solid #666; /* default NE arrow to fill screen */
	border-left:6px solid transparent;
	margin-top:-6px;
}

/* doesn't work if I comma-separate these selectors and give them all the same style */
:fullscreen #fillscreen span {
	border:none;
	border-bottom:6px solid #666;  /* SW arrow to restore window */
	border-right:6px solid transparent;
	margin-top:-7px;
}
:-ms-fullscreen #fillscreen span {
	border:none;
	border-bottom:6px solid #666;
	border-right:6px solid transparent;
	margin-top:-7px;
}
:-moz-full-screen #fillscreen span {
	border:none;
	border-bottom:6px solid #666;
	border-right:6px solid transparent;
	margin-top:-7px;
}
:-webkit-full-screen #fillscreen span {
	border:none;
	border-bottom:6px solid #666;
	border-right:6px solid transparent;
	margin-top:-7px;
}

/********** #fig is static figure, .info is for reporting (as in aftereffect), #caption is <p> *************/

.info {
	position:static; 
	display:inline-block;
	width:280px;
	height:52px;
	background:#fff; /* was f8f8f8 */
	color:#000; /* was 444 */
	padding:2px;
	padding-left:4px;
	border:1px solid #aaa; /* was 888 */
	border-radius:4px;
	font-size:13px;
	margin:0px;
}

#caption {
	width:100%; 
	height:auto;
	text-align:left;
	padding:2px 4px 2px 5px;
	position:sticky;
	left:0px; /* this, with sticky, keeps it from scrolling while #ctrlback overflow-x:scroll scrolls the controls. */ 
	display:inline-block;
	background:#fff; /* was f8f8f8 */
	border:1px solid #aaa; /* was 888 */
	border-radius:4px;
	margin:0px;
	margin-bottom:2px; margin-top:2px; /*************************/
	overflow-y:auto;
}

/***************** try styling a set of radio buttons as a color picker; this works *******************/
/*
	<div class='colorselect'>
		<label class='r'><input type='radio' name='fgc' value='4' checked><span></span></label>
		<label class='g'><input type='radio' name='fgc' value='2'><span></span></label>
		<label class='b'><input type='radio' name='fgc' value='1'><span></span></label>
	</div>
*/
div.colorselect {
	display:flex;
	justify-content:space-evenly;
	width:180px;
	height:26px;
	padding:2px 0px;
	border:1px solid gray; 
	border-radius:4px;
}
.colorselect label {
	display:inline-block;
	width:20px; 
	height:20px; 
	border:none; 
	text-align:center; 
	vertical-align:middle; 
	border-radius:4px;
	line-height:21px;
}
.colorselect input[type='radio'] { visibility:hidden; margin:0px; }
.colorselect input[type='radio']:checked + span::before { 
	content:'+';
	margin-left:-12px; /* OK in S and C, off in FF */
	font-size:19px;
}
label.r { background-color:#f00; color:#0ff; }
label.g { background-color:#0f0; color:#f0f; }
label.b { background-color:#00f; color:#ff0; }
label.w { background-color:#fff; color:#000; }
label.c { background-color:#0ff; color:#f00; }
label.m { background-color:#f0f; color:#0f0; }
label.y { background-color:#ff0; color:#00f; }
label.k { background-color:#000; color:#fff; }


/* button to flip colors in two selectors; see twistedgrid, fuzzygrid, fuzzyblobs */
#switchcolors, #flipcolors {
	width:30px; /* width, left, and top may be overridden in each user.css */
	left:210px;
	top:0px;
	height:56px; 
	position:absolute;
	font-size:18px;
}
#switchcolors span {
	display:inline-block;
	font-size:18px;
	transform:rotate(180deg);
	margin-right:2px;
}
#switchcolors span:after, #switchcolors:after {
	content:'\2938';
}


/***************** this section is for control group grids *****************/


/* Vertical heading for a control group */

.groupheading {
	grid-column:1;
	align-self:stretch;
	width:52px; height:26px; /* default is two rows; height should be half the width */
	z-index:-1; /* or it will cover the first control to its right! */
	text-align:center;
	display:block;
	transform:rotate(-90deg);
	transform-origin:bottom;
	margin-left:3px;
	font-size:13px;
}

/* .basicoptions always shown; .moreoptions is hidden by default */


.moreoptions {
	display:grid;
	grid-template-columns:repeat(4,auto); /* for best fit, override the repeat number in each file */
	border-bottom:1px dotted #aaa; /* may want to override this at times */
	margin-bottom:2px; /************* was 4px */
	grid-column-gap:8px; /* still needed for some browsers; eventually remove this */
	column-gap:8px;
	overflow-x:hidden;
	overflow-y:hidden;
}

.basicoptions {
	display:grid;
	grid-template-columns:1fr 2fr 1fr; /* override in each file as needed */
	padding-top:2px;
	padding-bottom:2px;
	overflow:hidden;
}
/* assumed to be 'more options' or 'advanced controls' checkbox */
/* should probably, instead, specify a class for it */
#basic /*.basicoptions :last-child*/ { 
	align-self:end;
	justify-self:end;
	position:absolute;
}

.basic .nobasic {
	display:none !important; 
}
.basicoptions #basic {
	position:relative;
}


/********************
	Control grid is grouping under div.moreoptions or div.basicoptions
	First column of cells has a vertical label (.groupheading)
	Next columns have controls placed in html by column.
	First grouping has no left border or margin; remaining ones have margin for spacing.
	The auto settings work reasonably well (see Muller-Lyer.html) but can be overridden, e.g.:
		#capgroup { grid-template-columns:26px 70px 90px 100px; }
**********************/

.controlgrid { 
	display:grid;
	grid-auto-flow:column;
	grid-template-columns:20px auto; 
	align-items:center;
	border-left:2px groove #f8f8f8; 
	margin-top:2px; 
	margin-bottom:2px; /****************** was 4px */
	grid-column-gap:8px; /* still needed for some browsers; eventually remove this */
	column-gap:8px; /* replaces grid-column-gap in new standards */
}

/* remove border from first group and margin from first group heading */
.controlgrid:nth-of-type(1) { 
	border-left:none;
	margin-left:0;
}
.controlgrid:nth-of-type(1) .groupheading {
	margin-left:0px;
}

.controlgrid :nth-child(2) { grid-row:1; }

/* two rows of controls by default */
.controlgrid {
	grid-template-rows:26px 26px;
	height:51px; 
}

/* modification for one or three rows of controls */
.controlgrid.one {
	grid-template-columns:auto auto; 
	grid-template-rows:26px;
	height:26px; 
}
.controlgrid.one .groupheading {
	/* grid-row:1/2; this can be omitted! */
	width:auto;
	height:26px;
	transform:rotate(0deg);
	margin-top:6px;
}
.controlgrid.one :nth-child(n+2) { margin-left:10px; } /* spacer between columns */

.controlgrid.three {
	grid-template-rows:26px 26px 26px; 
	height:78px; 
}
.controlgrid.three .groupheading {
	width:78px;
	height:39px;
}
.controlgrid.three :nth-child(n+5) { margin-left:10px; } /* spacer between columns */





@media only screen and (max-width:700px), screen and (max-height:700px) {
	#caption, #caption * { font-size:11px !important; } /* 13 with default manual of 14 */
	body.font10 #caption, body.font10 #caption * { font-size:9px !important; }
	body.font11 #caption, body.font11 #caption * { font-size:9px !important; }
	body.font12 #caption, body.font12 #caption * { font-size:10px !important; }
	body.font13 #caption, body.font13 #caption * { font-size:11px !important; }
	body.font14 #caption, body.font14 #caption * { font-size:11px !important; } /* 13 with default manual of 14 */
	body.font15 #caption, body.font15 #caption * { font-size:12px !important; }
	body.font16 #caption, body.font16 #caption * { font-size:13px !important; }
	body.font17 #caption, body.font17 #caption * { font-size:14px !important; }
	body.font18 #caption, body.font18 #caption * { font-size:15px !important; }
	body.font19 #caption, body.font19 #caption * { font-size:16px !important; }
	body.font20 #caption, body.font20 #caption * { font-size:17px !important; }


	#ctrlback div.controlflex { overflow-x:auto; }
	#caption { 
		max-height:20vh; /* can set this separately in each demo (but might have to also include the @media */
	}

}


@media only screen and (max-width:768px) and (hover:none), screen and (max-height:768px) and (hover:none) {
	#fillscreen { display:none; }

	/* keep iOS from zooming when using a select control */
	select, select.btn {
		font-size:16px;
		line-height:18px;
	}


}