/********************* general number stuff **************************/

input[type=number]::-webkit-inner-spin-button {
	opacity:1;
}

input:disabled + span {
	color:#aaa;
}
input:disabled {
	color:#ccc;
}

input[type=number]:invalid { /* because FF invalidates if the number isn't a multiple of step size */
	box-shadow: none;
}

input[type='text'] { height:22px; }
input[type='radio'], input[type='checkbox'] { 
	margin:0 3px 0 0; /* no space char after these controls */
	vertical-align:-1px; /* adjust for Chrome HOW TO DO IT ONLY FOR CHROME/EDGE, or how to undo it for SAFARI/FF? */
}

input[size='2'] { width:22px; }
input[size='3'] { width:28px; }
input[size='4'] { width:34px; }
input[size='5'] { width:41px; }
input[size='6'] { width:48px; }
input[size='7'] { width:54px; }


/* as of May 2020, Chrome checkboxes and radio buttons have an ugly blue appearance when selected */
/* this seems to fix it in a pleasing way (-webkit also gets Safari, but it's already grayscale) */
input[type='checkbox']:checked { filter:grayscale(1); }
input[type='radio']:checked { filter:grayscale(1); }
progress { filter:grayscale(1); }
/* Chrome also lowered labels by 1-2 px relative to checkbox and radio; can't seem to fix that */
/* or maybe they raised the checkbox and radio image, since the labels still align with other labels */
/* This works as of Chrome 87: vertical-align:-1px; */

/* NOTE custom slider (canvas or span based) and color palette found in tests/controls */



/************************* Tablet slider alternative to number inputs ******************/

/* these get used with any input[type='number']:not(.ui-nopopup) */

#ui-rangepopup {
	height:140px;
	background:#eee;
	border:1px solid gray;
	border-radius:4px 4px 0 0;
	display:flex;
	position:absolute;
	z-index:99;
	visibility:hidden;
}
#ui-rangepopup input {
	transform:rotate(270deg);
	width:130px;
}

/************************* Tablet angle ring alternative to number inputs ******************/

/* this one is used with any input[type='number'].angle:not(.ui-nopopup) 
*/
#ui-anglepopup {
	height:90px;
	width:90px;
	background:#eee;
	border:1px solid gray;
	border-radius:4px 4px 0 0;
	display:flex;
	position:absolute;
	z-index:99;
	visibility:hidden;
}
#ui-anglepopup .ui-angle { --wheelsize:80px; }

/* these are used wherever I want an embedded (not popup) circular angle picker
	css for those files would change the wheelsize (e.g. to 51px) 
*/	
.ui-angle {
	--wheelsize:51px;
	--minorsize:4%;
	--majorsize:8%;
	--margin:5px;
	width:var(--wheelsize);
	height:var(--wheelsize);
	margin:var(--margin);
	background: linear-gradient(to bottom, #dbdbdb 0%,#e1e1de 20%,#f8f8f3 100%);
	box-shadow: inset 0 2px 3px white, inset 0 -1px 2px #fffef8;
	border: 2px solid #666;
	border-radius: 50%;
	position: relative;
	/* for text display inside the circle (optional) */
	line-height:calc(var(--wheelsize) - 2.5px);
	display:flex;
	justify-content:center;
	font-size:12px;
	font-family:sans-serif;
	user-select:none;
}
.ui-angle-pointer {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 40%;
	margin: -2px 0 0 -2px;
	transform-origin: 2px 2px;
}
.ui-angle-dot {
	height: 4px;
	width: 4px;
	position: absolute;
	background: #838383;
	border-radius: 50%;
}
.ui-angle-line {
	margin-top: 1.5px;
	margin-right: -2px;
	height: 1px;
	background: #838383;
}
.ui-angle:hover, .ui-angle.ui-angle-dragging {
	border-color: #494949;
}
.ui-angle-ticks div {
	position: absolute;
	top: 50%;
	left: 50%;
	margin: 0px 0 0 0px;
	transform-origin: 0px 0.5px;
	margin-top: -0.5px;
	margin-right: 0px;
	background: #666;
}
.ui-angle-minor { width:var(--minorsize); height:1px; }
.ui-angle-major { width:var(--majorsize); height:2px; }




/************************* Button styling and clusters ******************/


.btn {
	position:static; display:inline-block;
	color:#333; text-decoration:none;
	text-shadow:#fefefe 1px 1px 0px;
	width:26px;
	height:26px; 
	padding:3px 3px 4px 4px;
	border:1px solid #888;
	font-family:'Arial'; 
	font-size:13px; 
	line-height:14px;
	padding-top:3px;
	text-align:center; 
	border-radius:4px;
	background:linear-gradient(to bottom,#fff,#ccc);
	margin:0px;
	outline:none;
}

.btn[disabled] {
	color:#888;
	background:#eee;
	border:1px solid #aaa;
}

.btn:active, .btn.active { /* .active is for clicking/activating it in JS */
	padding-left:4px; padding-right:2px;
	background:linear-gradient(to top,#eee,#888);
	text-shadow:#eee 1px 1px 0px;
}

.btn.cluster {
	background:linear-gradient(to bottom,#fff,#ddd 25%,#ddd 80%, #bbb );
}
.btn.cluster:active { /* flip the gradient; no rightward movement */
	padding-left:3px; padding-right:3px;
	color:#000;
	text-shadow:#eee 1px 1px 0px;
	background:linear-gradient(to top,#eee,#ccc 20%,#ccc 80%, #999 );
}

/*
.btn.top.left { border-radius:4px 0px 0px 0px; }
.btn.top.right { border-radius:0px 4px 0px 0px; }
.btn.bottom.right { border-radius:0px 0px 4px 0px; }
.btn.bottom.left { border-radius:0px 0px 0px 4px; }
.btn.mid { border-radius:0px; }
*/
/* advantage of doing it this way is that the radius is set globally in .btn */
.btn.top.left { border-bottom-left-radius:0px; border-bottom-right-radius:0px; border-top-right-radius:0px; }
.btn.top.right { border-bottom-right-radius:0px; border-bottom-left-radius:0px; border-top-left-radius:0px; }
.btn.bottom.right { border-top-right-radius:0px; border-top-left-radius:0px; border-bottom-left-radius:0px; }
.btn.bottom.left { border-top-left-radius:0px; border-top-right-radius:0px; border-bottom-right-radius:0px; }
.btn.mid { border-radius:0px; }

.btn.lside { border-bottom-right-radius:0px; border-top-right-radius:0px; }
.btn.rside { border-bottom-left-radius:0px; border-top-left-radius:0px; }
.btn.tside { border-bottom-left-radius:0px; border-bottom-right-radius:0px; }
.btn.bside { border-top-left-radius:0px; border-top-right-radius:0px; }

select.btn { text-align:left; }

/* 


goal as an ideal for radio button styled as button cluster:

<label class='btn'>symbol<input type='radio' etc.></label>
label.btn input { display:none; }
label.btn { styling for button stuff }
label.btn:active { does this work? is it necessary? }
PROBLEM is that I can't style the label.btn according to whether its associated radio button is checked
This *could* be done in JS by toggling a .checked class on the parent of the clicked button
That works easily for checkbox; for radio, must loop the array and turn off all, then turn on selected
Is simplifying my markup worth that effort?

NOT doing it for now.
SO instead, I'm stuck with:

<input type='radio' class='btn' id='needsID' etc.><label for='needsID'>symbol</label>
input.btn { display:none; }
input.btn + label { styling }
input:checked.btn + label { styling }
and similarly adding input.btn+label.left.top etc. to all of those definitions.
or giving label .btn class as well (which is what I currently do)

*/

label.btn input { display:none; } /* is it necessary to include label? */
label.btn.checked {
	text-shadow:#eee 1px 1px 0px;
	background:linear-gradient(to top,#eee,#ccc 20%,#ccc 80%, #999 );
}
label.btn.disabled {
	text-shadow:#eee 1px 1px 0px;
	background:#eee;
	opacity:0.8;
}
label.btn.checked.disabled {
	text-shadow:#eee 1px 1px 0px;
	background:#ccc;
}

/************** radio button styled as button cluster ******************/

input[type='radio'].btn {
/*	-webkit-appearance:none;
	-moz-appearance:none;
	appearance:none;*/
	display:none;
}

input[type='radio']:checked.btn + label {
	text-shadow:#eee 1px 1px 0px;
	background:linear-gradient(to top,#eee,#ccc 20%,#ccc 80%, #999 );
}


/**************************** style the range selectors for consistency across browsers */
input[type='range'] {
	width:150px; /* default */
	background:none; /* needed for FireFox, doesn't adversely affect others */
}

input[type='range'] {
	-webkit-appearance:none;
}
input[type='range']::-webkit-slider-runnable-track {
	height:5px;
	border-radius:3px;
	border:1px solid #888; 
	border-top-color:#747474;
	border-bottom-color:#aeaeae;
	background:linear-gradient(180deg,#a8a8a8,#d0d0d0);
}
input[type='range']::-webkit-slider-thumb {
	-webkit-appearance:none;
	margin-top:-6px; /* or it's below the track! */
	width:15px;
	height:15px;
	border-radius:50%;
	border:1px solid #888;
	border-top-color:#969696;
	border-bottom-color:#818181;
	background:linear-gradient(180deg,#f0f0f0,#ededed);
}
input[type='range']:disabled::-webkit-slider-runnable-track {
	border-color:#c8c8c8;
	border-top-color:#bababa;
	border-bottom-color:#d7d7d7;
	background:linear-gradient(180deg,#ddd,#eee);
}
input[type='range']:disabled::-webkit-slider-thumb, 
input[type='range']:disabled:active::-webkit-slider-thumb {
	border-color:#c5c5c5;
	border-top-color:#ccc;
	border-bottom-color:#c0c0c0;
	background:linear-gradient(180deg,#f9f9f9,#f4f4f4);
}
input[type='range']:active::-webkit-slider-thumb {
	border-color:#7a7a7a;
	border-top-color:#848484;
	border-bottom-color:#707070;
	background:linear-gradient(180deg,#d9d9d9,#d0d0d0);
}
input[type='range']:focus {
	outline:none; /* for Chrome on Windows; see if this works It does */
}


input[type='range']::-moz-range-track {
	height:3px;
	border-radius:3px;
	border:1px solid #888; 
	border-top-color:#747474;
	border-bottom-color:#aeaeae;
	background:linear-gradient(180deg,#a8a8a8,#d0d0d0);
}
input[type=range]::-moz-range-thumb {
	border:1px solid #888; /* 96 to 84 */
	width:13px;
	height:13px;
	border-radius:50%;
	border-top-color:#969696;
	border-bottom-color:#818181;
	background:linear-gradient(180deg,#f0f0f0,#ededed);
}

input[type='range']:disabled::-moz-range-track {
	border-color:#c8c8c8;
	border-top-color:#bababa;
	border-bottom-color:#d7d7d7;
	background:linear-gradient(180deg,#ddd,#eee);
}
input[type='range']:disabled::-moz-range-thumb, 
input[type='range']:disabled:active::-moz-range-thumb {
	border-color:#c5c5c5;
	border-top-color:#ccc;
	border-bottom-color:#c0c0c0;
	background:linear-gradient(180deg,#f9f9f9,#f4f4f4);
}
input[type='range']:active::-moz-range-thumb {
	border-color:#7a7a7a;
	border-top-color:#848484;
	border-bottom-color:#707070;
	background:linear-gradient(180deg,#d9d9d9,#d0d0d0);
}
input[type='range']::-moz-focus-outer {
	border:0;
}
@-moz-document url-prefix() { 
	input[type='range'] { margin-top:-3px; margin-bottom:-3px; } 
}

/*
Edge:thumb is too high on the track (or upper/lower fill is too low, more likely); thumb is 2px too large (set to 13)
Edge:vertical spacing is much too large; try setting the track height?
IE11 (dont' support?):thumb OK, spacing even larger than Edge, top/mid/low ticks are visible
*/
input[type='range']::-ms-track {
	background:transparent;
	border-color:transparent;
	border-width:5px 0;
	height:15px; 
	color:transparent; 
}
input[type='range']::-ms-fill-lower,
input[type='range']::-ms-fill-upper {
	border-radius:3px;
	height:5px;
	border:1px solid #888; 
	border-top-color:#747474;
	border-bottom-color:#aeaeae;
	background:linear-gradient(180deg,#a8a8a8,#d0d0d0);
	margin-top:-6px; 
}
input[type='range']::-ms-thumb {
	border:1px solid #888;
	width:13px;
	height:13px;
	border-radius:50%;
	border-top-color:#969696;
	border-bottom-color:#818181;
	background:linear-gradient(180deg,#f0f0f0,#ededed);
}
input[type='range']:disabled::-ms-fill-lower,
input[type='range']:disabled::-ms-fill-upper {
	border-color:#c8c8c8;
	border-top-color:#bababa;
	border-bottom-color:#d7d7d7;
	background:linear-gradient(180deg,#ddd,#eee);
}
input[type='range']:disabled::-ms-thumb, 
input[type='range']:disabled:active::-ms-thumb {
	border-color:#c5c5c5;
	border-top-color:#ccc;
	border-bottom-color:#c0c0c0;
	background:linear-gradient(180deg,#f9f9f9,#f4f4f4);
}
input[type='range']:active::-ms-thumb {
	border-color:#7a7a7a;
	border-top-color:#848484;
	border-bottom-color:#707070;
	background:linear-gradient(180deg,#d9d9d9,#d0d0d0);
}
input[type='range']::-ms-tooltip {display:none;}