/*	notepad.css
	================================================
	Layout …
	================================================
	body
		header
		main
			form#notepad
				div#tabs
					div#tab-buttons
						button
						button
					div#tab-content
						div.line-numbers
							div
							textarea
						div.line-numbers
							div
							textarea
				div#control
		footer
	================================================ */

	body, html, div, form {
		box-sizing: border-box;
	}

	body, html {
	}
	body {
		display: grid;
		grid-template-columns: 1fr;
		grid-template-rows: 4em calc(100vh - 8em) 4em;
		height: 100vh;
		qmin-height: 100vh;

		main {
			width: 100%;
			max-width: 1500px;
			margin: auto;
			height: 100%;

			form#notepad {

				div.line-numbers {
				}
				h2 {
					color: var(--heading-color);
					margin: 0.5em 0;
				}
			}
		}

		header {
			margin: auto;
			padding: 1em 2em;
			box-sizing: border-box;
			h1 {
				margin: 0;
			}
		}
		footer {
			padding: 0.75em 1em;
			p {
				margin: 0.375em;
			}
		}
	}


/*	Basic
	================================================ */

	html {
		font-family: "source sans pro", sans-serif;
		font-size: 87.5%;
	}
	body {
		background-color:  var(--html-background-color-light);
		/*! color: var(--html-color); */
		background: linear-gradient(
			to bottom,
			var(--html-background-color-light),
			var(--html-background-color)
		);
	}
	header {
		border: thin var(--border-color);
		border-style: solid none none none;
		width: 100%;
		background-color:  var(--html-background-color-light);
	}
	header>h1 {
		font-size: 2em;
		font-weight: normal;
		color: var(--heading-color);
	}

/*	Note Pad Form
	================================================ */

	form#notepad {
		border: thin solid #D9D9D9;
		padding: 16px;
		box-shadow: 8px 8px 4px #ccc;
		background-color:var(--html-background-color-light);

		box-sizing: border-box;
		display: grid;
		grid-template-rows: 1fr 4em;
		height: 100%;

		&>div#tabs {
			display: grid;
			grid-template-rows: auto 1fr;
			max-height: calc(100vh - 21em);
			&>div#tab-buttons {
				display: grid;
				grid-template-columns: 1fr auto auto;
				&>div#buttons>button {
					qgrid-column: 1/2;
					padding: 0.5em 0 0.25em 0;
					width: 8em;
					font-size: 1.5em;
					text-align: center;
					background-color: #777;
					color: #ccc;
					transition: background 250ms;
					border-style: solid solid solid solid;
					border-radius: 0.75em 0.725em 0 0;
					position: relative;
					top: 1px;
					&:nth-of-type(n+1) {

					}
					&:first-of-type {
						margin-left: 4em;
					}
					&:nth-of-type(n+2) {
						margin-left: 2px;
					}

					&:hover {
						background-color: #000;
					}
					&.selected {
						background-color: var(--textarea-background);
						color: var(--html-color);
						border-bottom-color: var(--textarea-background);
					}
				}
				p {
					grid-column: 3/4;
					margin: 0 1em 0 0;
					& :is(button) {
						border: thin solid var(--button-border);
						border-radius: 2px;
						background-color: white !important;
						padding: .375em 1em;
						font-size: 1.2em;
						font-size: min(1.4vw, 1.2em) !important;
					}
				}
				p#logout-form {
					
				}
				p#login-form {

					display: grid;
					grid-template-columns: 12em 12em 4em 12em;
					grid-template-rows: auto;
					grid-auto-flow: dense;

					input[name="name"],
					input[name="password"] {
						color: var(--button-color);
						border: thin solid var(--button-border);
						border-radius: 2px;
						background-color: var(--button-background);
						background-color: pink !important;
						padding: .375em 1em;
						font-size: 1.2em;
						qmargin-left: 1em;
						width: 8em;
						font-family: "Source Code Pro", monospace;
						-webkit-background-clip: text;
 					}
					input:auto-fill { 
						outline: 5px solid red !important;
					}
										
					input[name="user"] {
						grid-column: 1/2;
					}
					input[name="password"] {
						grid-column: 2/3;
					}
					button[name="show"] {
						grid-column: 3/4;
						background-color: transparent !important;
						border: none;
						transform: scale(-1.2, 1.2);
						transition: transform 1s;
						&:hover, &[on] {
							transform: scale(1.6)
						}
					}
					button[name="login"] {
						grid-column: 4/5;
					}
				}
			}
			height: 60em;
			&>div#tab-content {
				height: calc(100vh - 18em);

				div.line-numbers {
					display: grid;
					grid-template-rows: 1fr;
					grid-template-columns: 6em 1fr;
					overflow: scroll;
					height: 100%;

					display: grid;
					display: none;
					&>:is(div,textarea) {
						height: 100%;
					}

					&:has(>textarea.selected) {
						display: grid;
					}

					&>* {

					}
					&>:is(div,textarea) {
						height: 100%;
						font-family: "source code pro", monospace;
						font-size: var(--notepad-font-size);
						line-height: var(--line-height);
					}
					&>div {
						white-space: pre;
						box-sizing: border-box;
						white-space: pre;
						text-align: right;
						margin-right: 0;
						border-right: thin solid #ccc;
						padding: calc(var(--line-height) - 0.75em) 0.75em 1em 1em;
						background-color: var(--control-color);
						margin: 0;
					}
					&>:is(textarea[name="prologue"], textarea[name="notepad"]) {
						flex: 1 1 auto;
						border: none;
						border-top: thin solid rgb(87%, 87%, 87%);
						resize: none;
						tab-size: 4;
						font-family: "source code pro", monospace;
						padding: 1em;
						font-size: var(--notepad-font-size);
						background-color: var(--notepad-background);
						color: var(--text-color-light);
						outline: none;
						&:focus {
							color: var(--text-color);
						}
						overflow-x: scroll;
						white-space: pre;
						background-image:
							repeating-linear-gradient(
								transparent,
								transparent calc(var(--line-height) - 1px),
								#eee calc(var(--line-height) - 1px),
								#eee var(--line-height)
							);
						background-position: 0 -0.75em;
						background-color: var(--textarea-background);

						box-sizing: border-box;
						overflow: hidden;

						padding: calc(var(--line-height) - 0.75em) 1em 1em 1em !important;
						margin: 0;
					}
				}
			}
		}

		div#control {
			display: none;
			&.selected {
				display: grid;
			}
			box-sizing: border-box;
			margin-left: 5em;
			width: calc(100% - 5em);
			qbackground-color: var(--control-color);
			padding: 0.125em 1em;
			grid-template-columns: 1fr 2fr;

			& :is(button, a#export-link) {
				display: block;
				border: thin solid var(--button-border);
				border-radius: 2px;
				background-color: white !important;
				padding: .375em 1em;
				font-size: 1.2em;
				font-size: min(1.4vw, 1.2em) !important;
			}

			&>div {
				qpadding: 0 !important;
				p {
					margin: 0.5em;
				}
			}
			
			&>div#control-export {
				flex: 0 1 auto;
				display: flex;
				justify-content: flex-start;
				& label {
					color: var(--button-color);
					background-color: var(--button-background);
					padding: .125em 1em;
					font-size: 1.2em;
					margin: 0.625em 0 0 0;
				}
				& a#export-link {
border: thin solid green;
margin: 0 !important;
					cursor: default;
					text-decoration: none;
					color: var(--button-color);
					&[disabled] {
						pointer-events: none;
						color: var(--html-background-color);
					}
				}
			}

			div#control-etc {
				flex: 0 1 auto;
				display: flex;
				justify-content: flex-end;
				& p>span {
					color: var(--button-color);
					background-color: var(--button-background);
					padding: .375em 1em;
					font-size: 1.2em;
					display: inline-block;
				}
				& button[name="link"] {
					&:disabled {
						color: var(--html-background-color);
					}
				}
				& p>span {
					font-size: min(1.6vw, 1.2em);
					display: inline-block;
				}
				& input[name="font-size"] {
					border: thick solid red !important;
					accent-color: coral;
					background: yellow !important;
					width: min(8em, 12vw);
					qwidth: 12vw;
				}

			}
		}
	}


/*	Special Inputs
	================================================ */

	form#notepad input[name="password"] {

	}
	div#control input#font-size {
		display: inline-block;
		position: relative;
		top: .5em;
		margin-right: 1em;
	}
	form#notepad input[type="xhidden"] {
		color: red;
		qposition: fixed;
		qtop: 12px;
		qright: 12px;
		qwidth: 24px;
		display: none;
		position: relative;
		left: 0;
	}

/*	Notepad Content
	================================================ */

	form#notepad {
	}

/*	Admin
	================================================ */

	main#admin-main {
		display: flex;
		flex-direction: row;
	}

	form#edit-note {
		display: grid;
		grid-template-rows: 1.5em 1fr auto auto;
	}
	form#edit-note>fieldset {

	}
	form#edit-note>fieldset#data {
		display: flex;
		flex-direction: column;

	}
	form#edit-note>fieldset#data label {
		display: flex;
		flex-direction: column;
		font-weight: bold;
	}
	form#edit-note>fieldset#data label[for="edit-changepwd"] {
		display: block;
	}
	form#edit-note>fieldset#data label>* {
		font-weight: normal;
	}
	form#edit-note>fieldset#data textarea {
		font-family: "Source Code Pro", monospace;
		height: 20em;
	}

/*	Email Form
	================================================ */

	fieldset#email {
	
		--background-color: white;
		--button-background-color: #777;
		--button-color: #ccc;

		height: calc(100%);
		grid-template-rows: 5em 5em auto 6em;

		label:has(input[name="email-address"]),
		label:has(input[name="email-subject"]),
		label:has(textarea[name="email-message"]) {

		}
		div:has(input[name="email-attachment"]) {

		}

		background-color: var(--background-color);
		margin-left: 6em;
		box-sizing: border-box;
		width: calc(100% - 6em);
		padding: 1em 2em;

		:is(label,div) {
			qborder: thin solid red;
			font-weight: bold;
			qbox-sizing: border-box;
			display: block;
			qwidth: 100%;
			margin: 0.5em 0;
			input[type="text"], input[type="email"], textarea {
				font-weight: nornmal;
				display: block;
				box-sizing: border-box;
				width: 100%;
				margin: 0.5em 0 0 0;
				font-family: "Source Code Pro";
				font-size: 1.2em;
				padding: 0.25em 0.75em;
			}
			textarea {
				qheight: 26em;
				tab-size: 4;
				height: 100%;
				resize: none;
				line-height: 1.5;
			}
		}

		
		&>div {
			display: grid;
			grid-template-columns: auto 24em 12em;
			grid-column-gap: 0.5em;
			span, button {
				position: relative;
				qpadding: 0.25em;
				font-size: 1em;
				
			}
			button[name="email-send"] {
				background-color: var(--button-background-color);
				color: var(--button-color);
				width: 100%;
				&:hover {
					color: white;
				}
			}
		}
		
		&:invalid button[name="email-send"] {
			qpointer-events: none;

		}
		
		display: none;
		&.selected {
			display: grid;
		}
		
		&>div {
			qpadding: 0.5em;
			position: relative;
			margin-top: 2em;
			input[type="file"] {
				color: white;
				background-color: var(--button-background-color);
				padding: 0.5em 0.5em 0.5em 1.5em;;
				margin: 0.25em 0 0 0;
				display: inline-block;
				box-sizing: border-box;
				font-size: 1.2em;
				width: 100%;
			}
			button[name="clear-file"] {
				position: absolute;
				right: 1.5em;
				top: 1.5em;
				background-color: white;
				font-size: 1.2em;
				border: thin solid white;
				border-radius: 0.25em;
				width: 6em;
				padding: 0.25em 0.75em;
				opacity: 0.2;
				transition: opacity 0.25s;
				&:hover {
					opacity: 1;
				}
			}
		}

	}

	div#result {
		display: none;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;

		background-color: rgb(51,51,51,0.5);

		qdisplay: flex;
		justify-content: center;
		align-items: center;

		z-index: 1;

		
		&>div {
			box-sizing: border-box;
			background-color: whitesmoke;
			border: thin solid #999;
			box-shadow: 4px 4px 4px #333;
			border-radius: 0.25em;
			qwidth: 40em;
			qheight: 40em;
			z-index: 2;

			&>div {
				margin: 1.5em;
				padding: 0.5em 2em 1.5em 2em;
				quotes: font-size: 1.25em;
				border: thin solid #999;
				background-color: white;
				line-height: 1.5;
				h3 {
					font-size: 2em;
					margin: 0.5em 0 0.25em 0;
				}
				p, pre {
					margin: 0;
					font-family: "Source Code Pro", monospace;
					font-size: 1.5em;
				}
			}
		}
	}