/** WED 09-MAR-22 // 101SVG_APP **/



:root {
  --strokecol: 				rgba(0, 255, 0, .5); 																							/* SVG STROKE */
  --strokew: 					80px;
	--cntrcol: 					rgba(255, 0, 0, 1);
	--cntrw: 						1px; 																															/* CNTR-LINE SELECTION */
	--outline:          1px; 																															/* TEMP ID SELECTION ITEMS */
	--dash:							1 5;
}


* {
	box-sizing: border-box;
}


/* 101_WRITE // CANVAS SIZING */
/* --------------------------------------------------------------------------------------- */
body {
	margin: 0px;
	padding: 0px;
	background-color: hsla(0 0% 98% / 1);
	overflow: hidden;
}

/* SCALED TO GLYPH-WIDTH IN [VIEW] */
canvas {
	position: absolute;
  display: flex;
	height: 100%;
	border: 1px solid cyan;
}

#textlog {
	position: absolute;
	font-family: Menlo, Arial, sans-serif;
  font-size: 15px;
  line-height: 21px;
  color: rgba(0,0,0,1);
  margin: 10px;
}



/** LIKE IN SVG-TEMPLATE KEEP ALL ELEMENTS FIXED TO FULL WINDOW HEIGHT */
/** BUT DO #NOT# ADJUST (REDUCE) SVG-WIDTH TO CLIENT-WIDTH */
/* --------------------------------------------------------------------------------------- */
/* CONTENT-SVG */
svg {
	/*width: 100%;*/ /* KEEP FIXED AT HEIGHT-PROPORTIONAL WIDTH */
	height: 100%;
}

/* TEMPLATE = IMPORTED MODEL LETTER */
.template_wrapper {
	position: absolute;
  display: flex;
	height: 100%;
	border: 0px dashed rgba(255 0 255 / 1);
}

/* WRITING = STROKE FROM PATH_FITTER */
.writing_wrapper {
	position: absolute;
  display: flex;
  height: 100%;
  border: 1px solid red;
}

/* SELECTION = SELECTION (CURVE) FROM PATH_FITTER */
.selection_wrapper {
	position: absolute;
  display: flex;
  height: 100%;
  border: 1px solid yellow;
}

/* HANDLES = ANCHOR CONTROL HANDLE-LINE */
.handles_wrapper {
	position: absolute;
  display: flex;
  height: 100%;
  border: 1px dashed blue;
}



/* TEMPLATE */
.typebox rect {
	fill: none;
	stroke: rgba(255 0 0 / 0.5);
	stroke-width: 1px;
}
.typebox line {
	fill: none;
	stroke: rgba(0 0 255 / 1);
	stroke-width: 1px;
}
.glyph {
	fill: none;
	stroke: rgba(200 200 200 / .5);
	stroke-width: 100px;																							/** TBD VAR IN ROOT(?) // GETS SCALED TO VIEW_BOX */
	stroke-linecap: square;
	stroke-linejoin: round;
}




/* --------------------------------------------------------------------------------------- */
/* STROKE FROM PATH_FITTER */
.writing {
	fill: none;
	stroke: var(--strokecol);
	stroke-width: var(--strokew);
	stroke-linecap: round;
	stroke-linejoin: round;
}
/* TRACE ON TRACK */
.writing .writingon {
	stroke: hsla(120 100% 50% / 0.5);
}
/* TRACE OFF TRACK */
.writing .writingoff {
	stroke: hsla(0 100% 50% / 0.5);
}


/* SELECTION (CENTER-LINE) FROM PATH_FITTER */
.selection {
	fill: none;
	stroke: var(--cntrcol);
	stroke-width: var(--cntrw);
		stroke-dasharray: var(--dash); /* TESTING/DEBUG ONLY (DASH) */
	stroke-linecap: round;
	stroke-linejoin: round;
}



/* STYLES FOR HANDLES ELEMENTS */
/* ANCHOR "APTCOL" */
/**
.anchor {
	width: 8px;
	height: 8px;
	stroke: none;
	fill: rgba(255, 0, 255, 1);
}
*/
																/* TESTING/DEBUG ONLY (OUTLINE) */
.anchor {
	fill: none;
	width: 10px;
	height: 10px;
	stroke: var(--cntrcol);
	stroke-width: var(--outline);
}

/* CONTROL "CPTCOL" */
/**
.control {
	r: 4px;
	stroke: none;
	fill: rgba(255, 255, 0, 1);
}
*/
																/* TESTING/DEBUG ONLY (OUTLINE) */
.control {
	fill: none;
	r: 5px;
	stroke: var(--cntrcol);
	stroke-width: var(--outline);
}


/* HANDLE-LINE "HDLCOL" */
.handle {
	fill: none;
	stroke: var(--cntrcol);
	stroke-width: var(--cntrw);
		stroke-dasharray: var(--dash); /* TESTING/DEBUG ONLY (DASH) */ 
}