/*

	Copyright © 2019–2020, Stewart Smith. See LICENSE for details.

*/
@charset "utf-8";




/*

	This file is in the process of being separated
	in to “essential global Q.js styles” which will
	remain here in Q.css, and “documentation-specific”
	styles which will be removed from here and placed
	within the /other/documentation.css file instead.

	The goal is for a developer to be able to place 
	this Q.css file into their own web app with little
	to no interference with their app. All variables
	and styles here will ultimately be prefaced with
	a capital Q, eg. --Q-color-base, or .Q-text-input
	and so on.


*/




svg, :root {



	    /**************/
	   /*            */
	  /*   Colors   */
	 /*            */
	/**************/


	/*  Base color (blue)  */

	--Q-color-base-hue:       210;
	--Q-color-base-saturation: 85%;
	--Q-color-base-lightness:  40%;


	/*  Red  */

	--Q-color-red-hue: calc( var( --Q-color-base-hue ) + 180 - 30 );
	--Q-color-red-saturation: 85%;
	--Q-color-red-lightness:  45%;
	--Q-color-red: hsl(

		var( --Q-color-red-hue ),
		var( --Q-color-red-saturation ),
		var( --Q-color-red-lightness )
	);


	/*  Orange  */
	
	--Q-color-orange-hue: calc( var( --Q-color-base-hue ) + 180 - 15 );
	--Q-color-orange-saturation: 85%;
	--Q-color-orange-lightness:  50%;
	--Q-color-orange: hsl(

		var( --Q-color-orange-hue ),
		var( --Q-color-orange-saturation ),
		var( --Q-color-orange-lightness )
	);


	/*  Yellow  */

	--Q-color-yellow-hue: calc( var( --Q-color-base-hue ) + 180 + 15 );
	--Q-color-yellow-saturation: 90%;
	--Q-color-yellow-lightness:  50%;
	--Q-color-yellow: hsl(

		var( --Q-color-yellow-hue ),
		var( --Q-color-yellow-saturation ),
		var( --Q-color-yellow-lightness )
	);
	

	/*  Green  */

	--Q-color-green-hue: calc( var( --Q-color-base-hue ) + 180 + 60 );
	--Q-color-green-saturation: 80%;
	--Q-color-green-lightness:  35%;
	--Q-color-green: hsl(

		var( --Q-color-green-hue ),
		var( --Q-color-green-saturation ),
		var( --Q-color-green-lightness )
	);


	/*  Blue  */

	--Q-color-blue-hue:        var( --Q-color-base-hue );
	--Q-color-blue-saturation: var( --Q-color-base-saturation );
	--Q-color-blue-lightness:  var( --Q-color-base-lightness );
	--Q-color-blue: hsl(

		var( --Q-color-blue-hue ),
		var( --Q-color-blue-saturation ),
		var( --Q-color-blue-lightness )
	);


	/*  Grayscale  */

	--Q-color-white:     #FFFFFF;
	--Q-color-chalk:     #F9F9F9;
	--Q-color-newsprint: #F3F3F3;
	--Q-color-titanium:  #CCCCCC;
	--Q-color-slate:     #777777;
	--Q-color-charcoal:  #333333;
	--Q-color-black:     #000000;
	

	/*  Background  */

	--Q-color-background-hue: var( --Q-color-base-hue );
	--Q-color-background-saturation: 15%;
	--Q-color-background-lightness:  98%;	
	--Q-color-background: hsl(

		var( --Q-color-background-hue ),
		var( --Q-color-background-saturation ),
		var( --Q-color-background-lightness )
	);
	/*--Q-color-background: white;*/


	/*  Misc  */

	--Q-text-color: hsl(

		var( --Q-color-base-hue ),
		 5%,
		35%
	);
	--Q-text-code-comment-color: rgba( 0, 0, 0, 0.4 );
	--Q-text-code-output-color:  rgba( 0, 0, 0, 1 );

	--Q-selection-color: var( --Q-color-black );
	--Q-selection-background-color: var( --Q-color-yellow );

	--Q-hyperlink-internal-color: var( --Q-color-blue );
	--Q-hyperlink-external-color: var( --Q-text-color );
	
	--Q-background-callout-color: var( --Q-color-white );

	--Q-svg-fill-color: var( --Q-text-color );




	/*  Fonts  */

	--Q-font-family-serif:   'Source Serif Pro', 'Roboto Slab', 'Georgia', serif;
	--Q-font-family-sans:    'SF Pro Text', system-ui, -apple-system, 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
	--Q-font-family-mono:    'Roboto Mono', 'Source Code Pro', 'Menlo', 'Courier New', monospace;
	--Q-font-family-symbols: 'Georgia', serif;
}




    /*******************/
   /*                 */
  /*   Interactive   */
 /*                 */
/*******************/


.Q-input, 
.Q-circuit-text-input {

	margin: 1.5rem 0 0 0 !important;
	outline: none !important;
	border:  none !important;
	border-radius: 1.2rem !important;
	box-shadow: 
		 0.2rem  0.2rem 0.2rem rgba( 0, 0, 0, 0.15 ) inset,
		-0.2rem -0.2rem 0.2rem rgba( 255, 255, 255, 1 ) inset;

	background: linear-gradient( 

		0.375turn,
		rgba( 255, 255, 255, 1.0 ),
		rgba( 255, 255, 255, 0.2 )
	) !important;
}
.Q-input, 
.Q-circuit-text-input {
	
	padding: 1.5rem !important;
	color: #555 !important;
	font-size: 0.9rem !important;
	line-height: 1.2rem !important;
}



.Q-circuit-text-input {

	/*min-width:  18rem;*/
	width: 100%;
	min-height: 8rem;
	/*margin:  1rem 0 2rem 0;*/
	margin:  1rem 0 0 0;
	border: 1px solid var( --Q-color-blue );
	border-radius: 0.5rem;	
	background-color: var( --Q-color-chalk );
	padding: 1rem 0 0 2rem;
	color: var( --Q-color-blue );
	font-family: var( --Q-font-family-mono );
	font-size:   1.0rem;
	line-height: 1.2rem;
	white-space: pre;
	word-wrap: normal;/*  OMFG, iOS you make me sad.  */
}






.Q-button {

	position: relative;
	text-align: right;
	margin: 0.5rem 1rem 0 0;
	border-radius: 3rem;
	box-shadow: 
		-0.1rem -0.1rem 0 rgba( 255, 255, 255, 1 ),
		 0.1rem  0.1rem 0.2rem rgba( 0, 0, 0, 0.3 );
	height: 3rem;
	background: 
		var( --Q-color-blue )
		linear-gradient(

			0.4turn,
			rgba( 255, 255, 255, 0.2 ),
			rgba( 0, 0, 0, 0.08 )
		);
	padding: 0.8rem 1.8rem;
	color: var( --Q-color-white );
	font-family: var( --Q-font-family-sans );
	font-size:   1rem;
	line-height: 1rem;	
	font-weight: 500;
	letter-spacing: 0;
	text-shadow: -1px -1px 0 rgba( 0, 0, 0, 0.1 );
	cursor: pointer;
}
.Q-button:hover {

	background: 
		hsl(

			var( --Q-color-blue-hue ),
			var( --Q-color-blue-saturation ),
			calc( var( --Q-color-blue-lightness ) * 1.2 )
		)
		linear-gradient(

			0.4turn,
			rgba( 255, 255, 255, 0.2 ),
			rgba( 0, 0, 0, 0.08 )
		);
}
.Q-button:focus {

	margin-top: 0.7rem;
	margin-bottom: -0.2rem;
	margin-right: 0.9rem;
	outline: none;
	box-shadow: 
		-0.1rem -0.1rem 0 rgba( 255, 255, 255, 1 ) inset,
		 0.1rem  0.1rem 0.2rem rgba( 0, 0, 0, 0.3 ) inset;
	background: 
		var( --Q-color-blue )
		linear-gradient(

			0.4turn,
			rgba( 0, 0, 0, 0.08 ),
			rgba( 255, 255, 255, 0.2 )
		);
}
.Q-button[disabled] {

	box-shadow: 
		-0.1rem -0.1rem 0 rgba( 255, 255, 255, 1 ),
		 0.1rem  0.1rem 0.2rem rgba( 0, 0, 0, 0.3 );
	background: 
		var( --Q-color-background )
		linear-gradient(

			0.45turn,
			rgba( 255, 255, 255, 0.1 ),
			rgba( 0, 0, 0, 0.05 )
		);
	color: rgba( 0, 0, 0, 0.3 );
	text-shadow: 1px  1px 0 rgba( 255, 255, 255, 1 );
	cursor: default;
}






/*

	The below still need to be prefaced with “Q-”
	and for the HTML pages to be updated accordingly.

*/






    /*************/
   /*           */
  /*   Maths   */
 /*           */
/*************/


.maths {

	max-width: 100%;
	overflow-x: auto;
	font-family: var( --Q-font-family-sans );
	/*letter-spacing: 0.03em;*/
	word-spacing: 0.2em;
}
dd .maths {

	margin-top:  0;
	margin-left: 0;
}




.symbol {

	font-size: 1.1em;
	padding: 0 0.1em;
	font-family: var( --Q-font-family-symbols );
	font-style: italic;
	font-weight: 900;
	letter-spacing: 0.05em;
}




.division {

	display: inline-block;
	vertical-align: middle;
	margin:  10px;
}
.division td {

	padding: 5px;
}
.dividend {

	border-bottom: 1px solid #CCC;
	text-align: center;
}
.divisor {

	text-align: center;
}




.matrix {
	
	display: inline-block;
	vertical-align: middle;
	position: relative;
	align: middle;
	margin:  1em 0.5em;
	padding: 1em;
	/*font-family: var( --Q-font-family-mono );*/
	font-weight: 300;
	line-height: 1em;
	/*text-align: right;*/
	text-align: center;
}
.matrix td {

	padding: 0.25em 0.5em;
}
.matrix-bracket-left, .matrix-bracket-right {

	position: absolute;
	top:      0;
	width:    0.5em;
	height: 100%;
	border:   1px solid #CCC;
}
.matrix-bracket-left {

	left: 0;
	border-right: none;
}
.matrix-bracket-right {

	right: 0;
	border-left: none;
}
/*.matrix.qubit tr:first-child td {

	color: #BBB;
}*/



.Q-state-vector,
.complex-vector {

	font-family: var( --Q-font-family-mono );
}
.Q-state-vector.bra::before,
.complex-vector.bra::before {

	content: '⟨';
	color: #BBB;
}
.Q-state-vector.bra::after,
.complex-vector.bra::after {

	content: '|';
	color: #BBB;
}
.Q-state-vector.ket::before,
.complex-vector.ket::before {

	content: '|';
	color: #BBB;
}
.Q-state-vector.ket::after,
.complex-vector.ket::after {

	content: '⟩';
	color: #BBB;
}
.Q-state-vector.bra + .Q-state-vector.ket::before,
.complex-vector.bra + .complex-vector.ket::before {

	content: '';
}