@import url('https://fonts.googleapis.com/css?family=Baumans|Roboto+Mono&display=swap');
$grid-locations: 
	attributes,
	character_details,
	experience,
	player_name,
	purchase_guide,
	credits,
	knowledges,
	skills,
	abilities,
	exertion,
	security_level,
	defenses,
	attacks,
	actions,
	section-tabs,
	reverence,
	equipment;
$dieSizes:8,10,12,20;
$d20Values:1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20;
$dieLetter:(1:A,2:B,3:C,4:D,5:E,6:F,7:G,8:H,9:I,10:J,11:K,12:L,13:M,14:N,15:O,16:P,17:Q,18:R,19:S,20:T);
@function type($read){
	$result: 'label';
	@if $read{
		$result:'span';
	}
	@return $result;
}
@mixin inputHighlight{
	border-width:1px 3px;
	border-style:solid;
	border-color:black;
	border-radius:5px;
	box-sizing:border-box;
	transition:var(--focusTrans);
}
@mixin stackedGrid{
	&.stacked{
		grid-template-columns:auto;
		grid-template-areas:
		"over"
		"under";
		&.under{
			grid-template-rows:1fr auto;
			> span:last-of-type{
				grid-area:under;
			}
		}
		&.over{
			grid-template-rows:auto 1fr;
			> span:last-of-type{
				grid-area:over;
			}
		}
		&.center > *{
			text-align:center;
		}
		&:not(.center) > :not(input){
			text-align:left;
		}
	}
}
@mixin leftInputLabel{
	&:not(:is(.stacked,.right)){
		grid-template-columns:auto 1fr;
		grid-template-rows:auto;
		grid-template-areas:
		"left right";
		> span{
			grid-area:left;
		}
	}
}
@mixin rightInputLabel{
	&.right{
		grid-template-columns:1fr auto;
		grid-template-rows:auto;
		grid-template-areas:
		"left right";
		> span{
			grid-area:right;
		}
	}
}
@mixin borderedLabel($color:black,$borderColor:black){
	color:$color;
	padding:5px;
	border-radius:5px;
	border:1px solid $borderColor;
}
@mixin selectedLabel($backColor:black,$color:white){
	background-color:$backColor;
	color:$color;
}
@mixin pseudoRadio($backColor:black,$color:white){
	input:checked + label,
	label:hover{
		@include selectedLabel($backColor,$color);
	}
}
@mixin reverence{
	> h3{
		grid-area:header;
		line-height:normal;
		place-self:center;
	}
	> .fillTrack{
		place-self:center;
	}
	.help{
		background-color: grey
	}
}
@mixin exertion{
	--fillTrackRadioHeight:1rem;
	> .fillTrack{
		place-self:center;
	}
	.help{
		background-color: grey
	}
}
@mixin securityStyle{
	&.level-1,
	&.sheet-level-1{
	--backColor:#6abd47;
	--selectColor:var(--backColor);
	--selectShadow:none;
	}
	&.level-2,
	&.sheet-level-2{
		--backColor:#4f72b7;
		--selectColor:var(--backColor);
		--selectShadow:none;
	}
	&.level-3,
	&.sheet-level-3{
		--backColor:#ef6024;
		--selectColor:var(--backColor);
		--selectShadow:none;
	}
	&.level-4,
	&.sheet-level-4{
		--backColor:#ed2025;
		--selectColor:var(--backColor);
		--selectShadow:none;
	}
	&.level-5,
	&.sheet-level-5{
		--backColor:#7d52a1;
		--selectColor:var(--backColor);
		--selectShadow:none;
	}
	&.level-6,
	&.sheet-level-6{
		--backColor:#000000;
		--borderColor:white;
		--fontColor:#ededed;
	}
}
html{
	font-size:13px;
}
//Placeholders
%sticky-sub{
	top:70.5px;
	position:sticky;
	z-index:100;
}
%roboto-mono{
	font-family:Roboto Mono;
}
%baumans{
	font-family:Baumans;
}
%tahoma{
	font-family:Tahoma;
}
%box-header{
	border:solid black;
	border-width:2px 1px;
}
%header{
	text-transform:capitalize;
	font-weight:bold;
	line-height:normal;
	display:block;
	white-space:nowrap;
	margin{
		top:0px;
		bottom:0px;
	}
}
%h1{
	@extend %header;
	font-size:3rem;
	display:block;
	font-family:Baumans;
	&:not(input){
		text-align:center;
	}
}
%h2{
	@extend %header;
	font-size:2.5rem;
	display:block;
	@extend %roboto-mono;
	&:not(input){
		text-align:center;
	}
}
%h3{
	@extend %header;
	font-size:2rem;
	display:block;
	@extend %roboto-mono;
	&:not(input){
		text-align:center;
	}
}
%h4{
	@extend %header;
	font-size:1.5rem;
	font-weight:bold;	
	display:block;
	@extend %roboto-mono;
	&:not(input){
		text-align:center;
	}
}
%h5{
	@extend %header;
	font-size:1rem;
	display:block;
	@extend %roboto-mono;
	&:not(input){
		text-align:center;
	}
}
%h6{
	font-size:1rem;
	display:block;
	font-style:italic;
	@extend %roboto-mono;
	&:not(input){
		text-align:center;
	}
}
//End Placeholders
.characterviewer > ul.nav-tabs{
	> li.active{
		z-index:100;
	}
	a[data-tab="charsheet"]{
		display:flex;
		align-items:center;
		line-height: 1rem;
		padding:{
			top:0;
			bottom:1px;
			left:6px;
		}
		&:before {
			content: "X";
			background-image: url(https://s3.amazonaws.com/files.d20.io/images/237119632/ALMH-rWYBVVqwtIQI970xw/original.png);
			width: 3rem;
			color: transparent;
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			font-size: 2rem;
			line-height:normal;
		}
	}
}
#main,
.sheet-rolltemplate-scp{
	--grid-gap:1rem;
	--half-gap:calc(var(--grid-gap) / 2);
	--tiny-gap:calc(var(--half-gap) / 2);
	position:relative;
	gap:var(--grid-gap);
	--revealTime:500ms;
	--delayTime:200ms;
	--inputSwap:opacity var(--revealTime) ease var(--delayTime);
	--focusTrans:all 500ms ease var(--delayTime);
	--borderColor:black;
	--fontColor:black;
	--backColor:#636363;
	--selectColor:var(--backColor);
	--selectShadow:none;
	.transparent-logo{
		aspect-ratio:1/1;
		background-image:url('https://s3.amazonaws.com/files.d20.io/images/237119631/qha_0dNwFDUbYjLIGp2SCg/original.png');
		background-repeat:no-repeat;
		background-size:contain;
	}
	.black-logo,
	.sheet-black-logo{
		aspect-ratio:1/1;
		display:grid;
		grid-template-columns: 1fr;
		grid-template-rows: 1fr;
		grid-template-areas: "content";
		> .logo,
		.sheet-logo{
			grid-area:content;
			background-image:url('https://s3.amazonaws.com/files.d20.io/images/237119632/ALMH-rWYBVVqwtIQI970xw/original.png');
			background-repeat:no-repeat;
			background-size:contain;
			z-index:10;
		}
		> .black-diamond,
		.sheet-black-diamond{
			grid-area:content;
			background-color:var(--fontColor);
			width:100%;
			height:100%;
			transform:scale(0.75) rotate(45deg);
		}
	}
	*{
		color:black;
		transition:var(--focusTrans);
		@extend %tahoma;
	}
	select,textarea,input,.uneditable-input,label,button{
		all:unset;
	}
	[hidden]{
		display:none;
	}
	button{
		font-weight:bold;
		cursor:pointer;
	}
	textarea{
		resize:vertical;
		min-height:3.5rem;
		white-space:pre-wrap;
	}
	select,input,.uneditable-input{
		padding:initial;
	}
	select,input,.uneditable-input,textarea{
		border-width:1px 3px;
		border-style:solid;
		border-radius:5px;
		border-color:transparent;
		box-sizing:border-box;
		&:not(:is([readonly],.boxed,.separated-span,.separated-label)):is(:hover,:focus){
			@include inputHighlight;
		}
		&:not(:is([readonly])):focus{
			background-color:#DCDCDC;
			transition:var(--focusTrans);
		}
	}
	select{
		appearance:none;
		text-transform: capitalize;
		overflow:hidden!important;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	.circle{
		border-radius:50%;
	}
	label{
		width:unset;
		margin:unset;
	}
	label[for]{
		cursor: pointer;
	}
	input{
		width:100%;
		&:placeholder{
			color:#ededed80;
		}
		&.plus-control:not([value*="-"]) + span:before{
			content:'+';
		}
	}
	.right{
		align-text:right;
	}
	span,input,textarea{
		font-size:1rem;
	}
	label[for*="-0"]{
		display:none;
	}
	.hidden{
	    display:none!important;
	}
	.italics{
	    font-style:italic;
	}
	:is(span,label){
	    line-height:normal;
	    text-transform:capitalize;
	}
	.roller{
		cursor:pointer;
		display:inline-grid;
	}
	.roll-label{
		cursor:pointer;
		--beforeColor:grey;
		display:grid;
		grid-template-columns:auto auto;
		grid-template-rows:auto;
		place-items:center start;
		place-content:center;
		.dice-icon{
			justify-self:center;
			display:inline-grid;
			grid-template-columns:[d8-start] 0.5rem [d10-start] 0.5rem [d8-end d12-start] 0.5rem [d10-end] 0.5rem [d12-end];
			grid-template-rows:[d10-start content-start] 0.5rem [d8-start d12-start] 0.5rem [d10-start] 0.5rem [d8-end d12-end content-end];
			> .d8-font{
				display:contents;
				&:before{
					content:'H';
					font-family:dicefontd8;
					grid-area:d8;
					place-self:center;
					color:var(--beforeColor);
					text-shadow:var(--selectShadow);
					transition:var(--focusTrans);
				}
			}
			> .d10-font{
				display:contents;
				&:before{
					content:'K';
					font-family:dicefontd10;
					grid-area:d10;
					place-self:start center;
					color:var(--beforeColor);
					text-shadow:var(--selectShadow);
					transition:var(--focusTrans);
				}
			}
			> .d12-font{
				display:contents;
				&:before{
					content:'L';
					font-family:dicefontd12;
					grid-area:d12;
					place-self:center;
					color:var(--beforeColor);
					text-shadow:var(--selectShadow);
					transition:var(--focusTrans);
				}
			}
			button{
				grid-area:content;
			}
		}
		&:is(:hover,:focus,:focus-within){
			--beforeColor:var(--selectColor);
			> button{
				color:var(--beforeColor);
				text-shadow:var(--selectShadow);
			}
		}
	}
	h1,.h1,button[type='roll'].h1,button[type='action'].h1{
		@extend %h1;
	}
	h2,.h2,button[type='roll'].h2,button[type='action'].h2{
		@extend %h2;
	}
	h3,.h3,button[type='roll'].h3,button[type='action'].h3{
		@extend %h3;
	}
	h4,.h4,button[type='roll'].h4,button[type='action'].h4{
		@extend %h4;
	}
	h5,.h5,button[type='roll'].h5,button[type='action'].h5{
		@extend %h5;
	}
	h6,.h6,button[type='roll'].h6,button[type='action'].h6{
		@extend %h6;
	}
	.pictos{
		font-family:pictos;
	    text-transform:initial;
	}
	.pictos3{
		font-family:pictos three;
		text-transform:initial;
	}
	.pictoscustom{
		font-family:pictos custom;
		text-transform:initial;
	}
	input[type="checkbox"]{
		-webkit-appearance: checkbox;
		-moz-appearance: checkbox;
		appearance: checkbox;
		width:auto;
	}
	input.number{
    -moz-appearance: textfield !important;
    text-align:center;
	}
	textarea.fixed{
		resize:none;
		overflow:auto;
	}
	section{
		&.page{
			display:none;
		}
	}
	.pseudo-button{
		display:inline;
		cursor:pointer;
		border-radius:5px;
		text-transform: uppercase;
		border:1px solid black;
		text-align:center;
		padding:0 5px;
	}
	.input-label{
		display:inline-grid;
		grid-gap:var(--half-gap);
		place-items:center stretch;
		@include stackedGrid;
		@include leftInputLabel;
		@include rightInputLabel;
		> *{
			margin:0;
		}
		> input:is([type="text"],[type="number"]){
			width:100%;
		}
		&.large > input{
			@extend %h2;
		}
	}
	.dual.input-label{
		grid-template-columns:1fr auto 1fr;
		grid-template-areas:
		'over 	over 	over'
		'under 	under 	under';
		> span:last-of-type{
			grid-column:1 / -1;
		}
		> input{
			width:100%;
		}
		> .slash{
			line-height: 0rem;
			font-weight:normal;
		}
	}
	.headed-textarea{
		display:grid;
		grid-template-rows:auto 1fr;
		grid-template-columns:auto;
	}
	.boxed{
		border:1px solid black;
		&.thick-left {
			border-left-width:5px;
		}
		&.thick-bottom {
			border-bottom-width:5px;
		}
		&.thick-right {
			border-right-width:5px;
		}
		&.thick-top{
			border-top-width:5px;
		}
	}
	.underlined{
		border-radius:5px 5px 0 0;
		border-bottom:1px solid black;
		transition:var(--focusTrans);
		&.thick{
			border-bottom-width:5px;
		}
	}
	.ratio1-1{
		aspect-ratio:1/1;
	}
	.repeat-columns{
		display:grid;
		grid-gap:var(--half-gap);
		place-items:center;
	}
	.repcontainer{
		display:grid;
		grid-gap:var(--half-gap);
		> .repitem{
			display:grid;
			grid-gap:var(--half-gap);
			.itemcontrol{
				grid-column: 1 / -1;
				place-self:start stretch;
			}
		}
	}
}
#main{
	--selectedRadio:grey;
	--fillTrackRadioHeight:2rem;
	--fillTrackRadioWidth:1rem;
	--fillTrackSpanWidth:1rem;
	--fillTrackSpanHeight:0.5rem;
	--fillItemFlex:0 0 auto;
	--track-gap:var(--tiny-gap);
	display:grid;
	@include securityStyle;
	&.all{
		grid-template-columns: 2rem auto [sticky-background-start] 10rem auto auto auto auto auto auto 10rem [sticky-background-end];
		grid-template-rows: auto auto [sticky-background-start] auto [sticky-background-end] auto auto auto 1fr;
		grid-template-areas:
			"section-tabs	summary 	summary 				summary 				summary 				summary 		summary 		summary 			summary 			summary"
			"section-tabs	attributes 	experience 				experience 				purchase_guide 				purchase_guide 		purchase_guide 		purchase_guide 			player_name 			player_name"
			"section-tabs attributes 	reverence					defenses					defenses					defenses					defenses					defenses					defenses					exertion					"
			"section-tabs	attributes 	character_details character_details character_details character_details character_details character_details character_details character_details"
			"section-tabs	attributes 	actions		 				actions 					actions 					actions 					actions 					actions 					actions 					actions"
			"section-tabs	attacks 				attacks 					attacks 					attacks 					attacks 					attacks 					attacks 					attacks 					attacks"
			"section-tabs	equipment 				equipment 					equipment 					equipment 					equipment 					equipment 					equipment 					equipment 					equipment"
		;
	}
	&:not(.all){
		grid-template-columns: 2rem [sticky-background-start character_details-start attributes-start attacks-start actions-start equipment-start] 10rem auto auto auto 10rem [sticky-background-end character_details-end attributes-end attacks-end actions-end equipment-end];
		grid-template-rows: auto auto [sticky-background-start] auto [sticky-background-end character_details-start attributes-start attacks-start actions-start equipment-start] 1fr [character_details-end attributes-end attacks-end actions-end equipment-end];
		grid-template-areas: 
			"section-tabs	summary						summary						summary						summary 					summary"
			"section-tabs	experience 				experience				purchase_guide 		player_name 			player_name"
			"section-tabs	reverence					defenses					defenses					defenses					exertion"
			"section-tabs	content 					content						content 					content 					content"
		;
	}
	@each $location in $grid-locations{
		##{$location}{
			grid-area:$location;
		}
	}
	.help{
		grid-area: help;
		white-space: pre-wrap;
		text-transform: normal;
		font-size: 0.5rem;
	}
	.accented{
		accent-color:var(--backColor);
	}
	.fillTrack{
		position: relative;
		display: inline-flex;
		gap: var(--track-gap);
		align-items: center;
		.separated-label{
			width:var(--fillTrackRadioWidth);
			height:var(--fillTrackRadioHeight);
		}
		.separated-span{
			width:var(--fillTrackSpanWidth);
			height:var(--fillTrackSpanHeight);
			box-sizing:border-box;
		}
		.separated-label,
		.separated-span{
			-webkit-apperance: none;
			appearance: none;
			border: 1px solid black;
			background-color: var(--selectedRadio);
			order: 1;
			border-radius:0;
			flex:var(--fillItemFlex);
			box-sizing:content-box;
			&:before{
				background-color:var(--selectedRadio);
			}
			&:checked{
				display: none;
			}
			&.clearer{
				order: 2;
				&:checked{
					display: none;
				}
			}
			&:checked ~ .separated-label{
				order: 3;
				background-color: white;
				&:before{
					background-color:white;
				}
			}
		}
		.hidden + .separated-span ~ .separated-span{
			background-color:white;
		}
		.separated-label{
			cursor: pointer;
			&[value="0"] + .readonly-dot{
				display:none;
			}
		}
		&:is(:hover,:focus-within,:focus){
			.clearer,
			.clearer:before{
				background-color: var(--selectedRadio);
				background-image: linear-gradient(45deg, transparent 0% 48%, white 48% calc(48% + 2px), transparent calc(48% + 2px)), linear-gradient(-45deg, transparent 0% 48%, white 48% calc(48% + 2px), transparent calc(48% + 2px));
			}
		}
	}
}
main#main:not(.all) > section:not(.active-section){
	display:none;
}
#summary{
	position:sticky;
	top:0px;
	z-index:110;
	grid-area:summary;
	background-color:var(--backColor);
	border-radius:10px 10px 0 0;
	border:{
		width:2px 5px;
		style:solid;
		color:var(--borderColor);
	}
	filter:drop-shadow(0px -10px white);
	padding:5px;
	display:grid;
	grid-template-columns: 1fr [strength-start fate-start] auto [strength-end fate-end health-start charisma-start] auto [health-end charisma-end perception-start intelligence-start] auto [perception-end intelligence-end dexterity-start willpower-start] auto [dexterity-end willpower-end];
	grid-template-rows: [strength-start health-start perception-start dexterity-start] 1rem [fate-start charisma-start intelligence-start willpower-start] 1rem [strength-end health-end perception-end dexterity-end] 1rem [fate-end charisma-end intelligence-end willpower-end];
	grid-gap:var(--half-gap);
	grid-template-areas: 
		"character_name	. . . ."
		"character_name	. . . ."
		"alias 					. . . ."
	;
	@each $area in character_name,alias,strength,health,perception,dexterity,fate,charisma,intelligence,willpower{
		> .#{$area}{
			grid-area:$area;
		}
	}
	.h4,.h5{
		line-height:0;
		place-self:center;
	}
	h6{
		text-transform:uppercase;
	}
	*{
		color:var(--fontColor);
	}
	> .ability-summary{
		align-self:center;
		display:grid;
		grid-template-columns: 2.5rem repeat(3,1rem auto);
		> .die-num{
			justify-self:end;
		}
		> .die-size{
			justify-self:start;
			text-transform:initial;
		}
	}
}
.sticky-sub{
	@extend %sticky-sub;
	&.background{
		background-color:white;
		grid-area:sticky-background;
		box-shadow:0 0 0 10px white;
	}
}
#reverence{
	display:grid;
	grid-template-columns: auto;
	grid-template-rows: 2rem 2rem 1fr;
	grid-row-gap:var(--half-gap);
	grid-template-areas:
		"header"
		"."
		"help"
	;
	background-color:teal;
	background:
		radial-gradient(transparent,80%,grey),
		linear-gradient(90deg,teal,white,teal)
	;
	border:2px solid black;
	@include reverence;
}
#defenses{
	display:grid;
	grid:
		repeat(2,auto)
		/
		repeat(3,1fr)
	;
	grid-template-areas:
		"hp               hp_max     damage_reduction damage_reduction"
		"reaction_defense move_speed melee_multiplier ranged_multiplier"
	;
	align-items:start;
	@each $field in hp,hp_max,damage_reduction,reaction_defense,move_speed,melee_multiplier,ranged_multiplier{
		.#{$field}{
			grid-area:$field;
		}
	}

}
#exertion{
	display:grid;
	grid-template-rows: 2rem 1rem 0.25rem 1fr;
	grid-row-gap:5px;
	grid-template-areas:
		"header"
		"."
		"."
		"help"
	;
  border:2px solid black;
	background-color:teal;
	background:
		radial-gradient(transparent,80%,grey),
		linear-gradient(90deg,#ca6866,white,#ca6866)
	;
  @include exertion;
}
#section-tabs{
	position:sticky;
	top:-1px;
	border-radius:5px;
	background-color:#adadad;
	display:flex;
	flex-direction: column;
	align-self:start;
	@include pseudoRadio($backColor: var(--backColor),$color: var(--fontColor));
	> .section-control{
		@include borderedLabel($color:black,$borderColor:transparent);
		transform:rotate(-180deg);
		writing-mode:vertical-rl;
	}
	input:checked + label,label:hover{
		box-shadow:inset 0 0 5px var(--fontColor);
	}
}
#character_details{
	$detailFields:character_name, gender, appearance, body_type, reasoning, alias, weight, height, age, character_description, hair, eyes, personnel_class;
	display:grid;
	grid-template-columns: 2fr repeat(2,1fr) 2fr;
	grid-template-rows: auto auto auto auto auto auto auto;
	grid-gap:var(--half-gap);
	grid-template-areas: 
		"character_name 			 character_name						alias						      alias"
		"character_name 			 character_name						alias						      alias"
		"gender                weight                   weight                height"
		"age                   hair                     hair                  eyes"
		"appearance 					 body_type 								body_type 						reasoning"
		"personnel_class       personnel_class          .                     credits"
		"security_level 			 security_level 					character_description character_description"
	;
	@each $field in $detailFields{
		> .#{$field}{
			grid-area:$field;
		}
	}
	.body_type{
		place-self:center;
	}
	.personnel_class{
		place-self:start center;
		display:grid;
		grid-template-columns: repeat(5,auto);
		grid-template-rows: repeat(2,auto);
		grid-column-gap:var(--half-gap);
		h5{
			grid-column: span 5;
		}
		@include pseudoRadio;
		> label{
			font-family:Baumans;
			display:grid;
			place-items:center;
			place-self:center;
			height:1rem;
			display: inline-block;
	    text-align: center;
	    font-weight: bold;
		}
	}
}
#security_level{
	place-self:start center;
	display:grid;
	grid-template-columns:8rem auto;
	grid-template-rows: auto auto auto;
	grid-template-areas:
		"head 	 head"
		"qr-code merit"
		"qr-code id"
	;
	border-radius:10px;
	border-width: 2px 3px 3px 2px;
	border: solid black;
	overflow:hidden;
	> .head{
		--scpSize:6rem;
		background-color: var(--backColor);
		transition: var(--focusTrans);
		grid-area:head;
		display:grid;
		grid-template-columns: 10rem 5rem 1fr;
		grid-template-rows: calc(var(--scpSize) - 1rem) 2rem;
		grid-template-areas: 
			"header logo 	level"
			"sub	  . 		level"
		;
		border-bottom:2px solid var(--borderColor);
		*:not(input){
			color:var(--fontColor);
		}
		> .header{
			grid-area:header;
			font-size:var(--scpSize);
			text-transform:uppercase;
			place-self:start center;
			line-height:calc(var(--scpSize) - 1rem);
		}
		.sub-header{
			font-family:Baumans;
			grid-area:sub;
			font-size:calc(var(--scpSize) * 0.16);
		}
		.transparent-logo{
			grid-area:logo;
			width:100%;
			place-self:center;
		}
		.security_level{
			grid-area:level;
			place-items:center;
			gap:0px;
			place-self:center;
			>input{
				@extend %h1;
				width:5rem;
				place-self:start center;
				background-color:white;
				height: unset;
				color:black;
			}
			> span{
				font-size:0.75rem;
				font-family:baumans;
				margin:0;
			}
		}
	}
	> .qr-code{
		grid-area:qr-code;
		background-image:url('https://s3.amazonaws.com/files.d20.io/images/237721889/dzJg1nel3HT7J2OhxtWBJg/thumb.png');
		background-repeat:no-repeat;
		background-size:contain;
		place-self:center;
		width:100%;
		aspect-ratio:1/1;
	}
	> .merit{
		--selectedRadio:var(--backColor);
		--track-gap:calc(var(--tiny-gap) / 2);
		$meritNum:1,2,3,4,5,6,7,8,9,10;
		grid-area:merit;
		display:grid;
		grid-template-columns: 3rem 1fr;
		grid-template-rows: auto;
		grid-template-areas: 
			"header tracker"
		;
		grid-gap:var(--half-gap);
		padding-right:var(--half-gap);
		> h5{
			place-self:center;
			white-space:pre-wrap;
			place-self:center;
		}
		> .fillTrack{
			place-self:center;
			grid-auto-columns:.9rem;
			> .separated-label{
				$chevron:polygon(45% 0, 100% 50%, 45% 100%, 0% 100%, 55% 50%, 0% 0%);
				filter:drop-shadow(-1px 0px 0 black) drop-shadow(1px 0px 0 black) drop-shadow(0px -1px 0 black) drop-shadow(0px 1px 0 black);
				background-color:transparent !important;
				border:0px solid transparent;
				&:before{
					clip-path:$chevron;
					grid-area:b;
					position:absolute;
					content:'';
					place-self:center;
					width:100%;
					height:100%;
				}
			}
		}
	}
	> .id{
		padding:5px 0 0 5px;
		display:grid;
		--arrowsize:1.5rem;
		grid-template-columns: 3rem 1fr;
		grid-template-rows: 3.5rem;
		grid-column-gap: var(--half-gap);
		grid-template-areas: 
			"logo id"
		;
		> .black-logo{
			grid-area:logo;
		}
		> *{
			color:var(--fontColor);
		}
		> span[name*="attr"]{
			place-self:start center;
			font-size: .65rem;
			place-self:center;
		}
		> :not([name*="attr"]){
			font-size:0.5rem;
		}
		background-color: var(--backColor);
		transition: var(--focusTrans);
		grid-area:id;
		border: solid var(--borderColor);
		border-width: 2px 0 0 2px;
	}
}
#credits.input-label{
	align-self:start;
	height:2rem;
}
#attributes{
	$detailSize:0.75rem;
	$detailColor:red;
	$d8Num:1,2,3,4,5,6,7,8,9,10,11,12;
	$d10Num:1,2,3,4,5,6;
	$d12Num:1,2,3;
	--fillTrackRadioHeight:2.5rem;
	--track-gap:0;
	--fillItemFlex:1 1 0;
	&.active-section{
		display:grid;
		grid-template-columns: repeat(6,auto);
		grid-gap:var(--grid-gap);
		place-content:center;
		> .ability_score{
			grid-column:span 2;
			&:nth-last-child(2){
				grid-column:2 / span 2;
			}
		}
		.available-dice{
			display:flex;
			justify-content:space-between;
		}
	}
	&:not(.active-section){
		> .available-dice{
			display:grid;
			grid-template-columns:repeat(3,1fr);
			gap:var(--half-gap);
			margin-bottom:var(--grid-gap);
			box-shadow:0 0 0 10px white;
			z-index:100;
			@extend %sticky-sub;
			h4{
				grid-column:1 / -1;
			}
		}
	}
	> .available-dice{
		grid-column:1/-1;
		background-color:white;
		>button[type="action"]{
			background-color:#ededed;
			box-shadow:inset 0 0 5px black;
			color:black;
			border-radius:5px;
			padding:3px 5px;
			display:flex;
			justify-content: center;
			transition:var(--focusTrans);
			> span{
				text-transform:initial;
			}
			&:hover{
				background-color:var(--backColor);
				transition:var(--focusTrans);
				box-shadow:inset 0 0 5px var(--fontColor);
				*{
					color:var(--fontColor);
				}
			}
		}
	}
	&:hover,
	&:focus-within{
		> .ability_score{
			:is(label,span):not(.roll-label){
				color:$detailColor;
				transition: var(--focusTrans);
			}
		}
	}
	> .ability_score{
		position:relative;
		display:grid;
		grid-template-columns: 4rem 13rem;
		grid-template-rows: repeat(4,auto);
		grid-template-areas:
		"header header "
		"d8			."
		"d10		."
		"d12		."
		;
		place-self:center;
		margin-bottom:var(--grid-gap);
		background-color:black;
		border:1px solid black;
		.attribute,
		h5{
			border:1px solid black;
			line-height:var(--fillTrackRadioHeight);
			text-align:center;
			background-color: white;
			&[data-i18n*="d8"]{
				grid-area:d8;
			}
			&[data-i18n*="d10"]{
				grid-area:d10;
			}
			&[data-i18n*="d12"]{
				grid-area:d12;
			}
		}
		.attribute{
			grid-area:header;
			text-align:center;
		}
	}
	.fill-label{
		color:transparent;
		font-size: $detailSize;
		overflow:hidden;
		transition: var(--focusTrans);
	}
}
#actions{
	column-width:255px;
	column-gap:var(--grid-gap);
	column-rule:1px solid black;
	.thick{
		padding-bottom:var(--half-gap);
	}
}
:is(#knowledges,#skills,#abilities){
	display:contents;
	>.header{
		@extend %box-header;
		
	}
	&:not(:first-child){
		> .header{
			margin-top:var(--half-gap);
		}
	}
	> div{
		position:relative;
		display:inline-grid;
		width:100%;
		grid-template-columns:1fr 2rem 2rem;
		grid-gap:var(--half-gap);
		margin-bottom:var(--half-gap);
		> label{
			place-self:center start;
			white-space: pre-wrap;
			text-transform: capitalize;
		}
		> input[name*="base_mod"]{
			opacity:0;
			z-index:10;
			transition: var(--inputSwap);
			position:absolute;
			grid-column:3/4;
			+ input{
				opacity:1;
				transition: var(--inputSwap);
			}
			&:is(:hover,:focus){
				opacity:1;
				transition: var(--inputSwap);
				+ input{
					opacity:0;
					transition: var(--inputSwap);
				}
			}
		}
		>.underlined{
			align-self:center;
			width:100%;
		}
	}
}
#attacks{
	$attackHeader: weapon,skill,recoil,melee,hip,ready,aim,clip,clip_max,base,x,element,range,special,to-hit,damage,melee-mult,ranged-mult;
	--gridColumns:
		[header-start] 2rem 1fr [weapon] 9rem [skill] 4rem [recoil] repeat(4, 3rem) [to-hits] repeat(2,2.5rem) [clip] repeat(2, 4rem) [damages] 4rem [element] 3rem [range] 1fr [special header-end]
	;
	--attackColumns:". weapon  skill   recoil  melee   hip     ready   aim     clip clip_max base    x       element range   special";
	display:grid;
	grid:
		[header-start] auto [header-end] 2rem 2rem auto 1rem
		/ /*Row above column below*/
		var(--gridColumns)
	;
	grid-auto-flow:row dense;
	grid-gap:var(--half-gap);
	grid-template-areas:
		".       .       .       .       melee-mult  melee-mult melee-mult melee-mult   melee-mult . ranged-mult   ranged-mult  ranged-mult  ranged-mult  .      "
		".       .       .       .       to-hit  to-hit  to-hit  to-hit  .  .        damage       damage       .            .            .      "
		var(--attackColumns)
		"content content content content content content content content content content    content      content      content      content      content"
		"control control control control control control control control control control    control      control      control      control      control"
	;
	place-content:start stretch;
	>h4:not(input){
		grid-area:header;
		text-align:left;
		padding-left:1rem;
		@extend %box-header;
	}
	@each $head in $attackHeader{
		.#{$head}{
			grid-area:$head;
		}
	}
	> .input-label:is(.melee-mult,.ranged-mult){
		grid-template-columns: auto 3rem;
		justify-content: center;
	}
	> .repeat-columns{
		display:contents;
		> h5,h6{
			border-bottom:1px solid black;
		}
		h6{
			text-transform: capitalize;
		}
		.clip{
			grid-column:clip-start / clip_max-end;
			grid-row:clip-start / clip-end;
		}
	}
	>.repcontainer{
		grid-area:content;
		>.repitem{
			position:relative;
			grid:
				auto
				/
				var(--gridColumns)
			;
			grid-template-areas: var(--attackColumns);
			> :is(.base,.x){
				text-align:center;
			}
			> .roll-label{
				opacity:0;
				transition:var(--focusTrans);
			}
			&:is(:hover,:focus-within) > .roll-label{
				opacity:100;
				transition:var(--focusTrans);
			}
			> input[name="attr_recoil"]{
				opacity:1;
				transition: var(--inputSwap);
			}
			> input[name="attr_recoil_base"]{
				opacity:0;
				z-index:10;
				transition: var(--inputSwap);
				&:is(:hover,:focus){
					opacity:1;
					transition: var(--inputSwap);
					+input{
						opacity:0;
						transition: var(--inputSwap);
					}
				}
			}
			> .hover-button-container{
				position:relative;
				display:grid;
				> *{
					grid-column:1/2;
					grid-row:1/2;
				}
				label{
					position:relative;
					opacity:0;
					top:0;
					background-color:transparent;
					transition:var(--focusTrans);
					display:grid;
					grid-template-columns:1fr;
					place-content:center;
				}
				input[type="radio"]{
					appearance:checkbox;
					accent-color:var(--backColor);
				}
				&:is(:hover) label{
					z-index:10;
					opacity:1;
					top:100%;
					background-color:white;
					transition:var(--focusTrans);
					height:150%;
				}
				input[type='hidden'] + input{
					transition:var(--focusTrans);
					place-self:center;
				}
				@each $stance,$value in ("hip":1,"ready":2,"aim":3){
					&.#{$stance}{
						input[type='hidden'][value="#{$value}"]+input{
							@include inputHighlight;
							background-color:var(--backColor);
							color:var(--fontColor);
							font-weight:bold;
						}
					}
				}
			}
		}
		&.editmode > .repitem > .itemcontrol{
			grid-column:1/-1;
			position:absolute;
			display:flex;
			justify-content:space-between;
		}
	}
	> .repcontrol{
		grid-area:control;
		order:10;
		display:flex;
		justify-content:space-between;
	}
}
#equipment{
	&.repeating-equipment h4{
		text-align:left;
		@extend %box-header;
	}
	.repcontainer{
		display:block;
		column-width:200px;
		> .repitem{
			display:inline-grid;
		}
		.item-container{
			display:flex;
			gap:var(--half-gap);
		}
	}
	> .repcontrol{
		grid-area:control;
		order:10;
		display:flex;
		justify-content:space-between;
	}
	.carry-check:not(:checked) + .item-container *{
		color:#00000080;
		border-bottom-color:currentColor;
	}
}
/*

Roll Template

*/
.sheet-rolltemplate-scp{
	--templateRadius:1rem;
	--dieSize:50px;
	--templateBorderW:2px 5px 2px 5px;
	--fumbleColor:red;
	--critColor:green;
	--innerBorderRadius:5px;
	position:relative;
	margin-left:-40px;
	h3{
		line-height:20px;
		text-transform:capitalize;
	}
	&:first-child{
		& > .sheet-scp.sheet-continuation{
			margin-top:-9px;
			border-top-width:0;
		}
	}
	&:not(:first-child){
		margin-top:10px;
	}
	> .sheet-scp{
		border: solid black;
		overflow:hidden;
		border-width:var(--templateBorderW);
		border-color:var(--borderColor);
		background-color:var(--backColor);
		color:var(--fontColor);
		@include securityStyle;
		h4{
			text-transform:capitalize;
		}
		.sheet-color-cond,
		.sheet-color-cond *{
			color:var(--fontColor);
		}
		&:not(.sheet-continuation){
			border-radius:var(--templateRadius) var(--templateRadius) 0 0;
			.sheet-roll-content{
				border-top-left-radius:var(--innerBorderRadius);
				border-top-right-radius:var(--innerBorderRadius);
			}
		}
		&.sheet-continuation{
			.sheet-roll-content{
				padding:0;
			}
			&.sheet-first{
				.sheet-results{
					background-color:var(--backColor);
					border-radius:var(--innerBorderRadius);
				}
				.sheet-result-values{
					background-color:white;
					border-radius:var(--innerBorderRadius);
					width:calc(100% + 5px);
					margin-left:-5px;
				}
			}
			.sheet-result-values{
					width:100%;
			}
		}
		.sheet-template-head{
			color:var(--fontColor);
			display:grid;
			grid-template-rows:auto auto;
			grid-gap:5px;
			padding:5px;
			&:not(.sheet-element){
				grid-template-columns:39px 1fr;
				grid-template-areas:
					"black-logo roll_name"
					"black-logo character_name"
				;
			}
			&.sheet-element{
				grid-template-columns:39px 1fr 2fr;
				grid-template-areas:
					"black-logo roll_name roll_name"
					"black-logo element   character_name"
				;
			}
			> *{
				white-space:pre-wrap;
				text-align:left;
			}
			.sheet-black-logo{
				grid-area:black-logo;
				place-self:start stretch;
			}
			.sheet-roll_name{
				grid-area:roll_name;
				place-self:center end;
			}
			.sheet-character_name{
				grid-area:character_name;
				place-self:start end;
			}
			.sheet-element{
				grid-area:element;
				border-width:2px 5px;
				border-style:solid;
				border-color:var(--fontColor);
				border-radius:var(--templateRadius);
				background-color:white;
				padding:0.5rem;
			}
		}
		.sheet-modifier{
			display:flex;
			flex-wrap:wrap;
			justify-content: space-between;
			align-items:center;
			> :not(span){
				text-transform: capitalize;
			}
		}
		.sheet-roll-content{
			background-color: white;
			padding:2px;
		}
		.sheet-results{
			display:flex;
			flex-wrap:wrap;
			justify-content: space-between;
			align-items:center;
			padding-left:5px;
		}
		.sheet-result-values{
			display:inline-flex;
			flex-wrap:wrap;
			justify-content: space-evenly;
			align-items:center;
		}
		> .sheet-total{
			position:relative;
			display:grid;
			place-items:center;
			color:var(--fontColor);
			grid-template-columns:106px 50px 10px 70px;
			grid-template-rows:auto 1fr 1fr;
			grid-template-areas:
				"high-label .        . total-label"
				"high       modifier . total      "
				"high       ones     . total      ";
				place-content:stretch center;
			padding:5px;
			@each $label in high,total{
				> .sheet-#{$label}-label{
					grid-area:#{$label}-label;
				}
			}
			.sheet-modifier{
				grid-area:modifier;
				border-radius:0 var(--templateRadius) 0 0;
			}
			.sheet-ones{
				grid-area:ones;
				border-radius:0 0 var(--templateRadius);
				> span{
					color:var(--fumbleColor);
				}
			}
			> .sheet-modifier,
			> .sheet-ones{
				background-color:white;
				border-width:var(--templateBorderW);
				border-color:var(--borderColor);
				border-style:solid;
				display:grid;
				place-self:stretch;
				place-content:center;
				position:relative;
				left:-5px;
			}
			> .sheet-high-dice{
				border-radius:var(--templateRadius) 0 0 var(--templateRadius);
				grid-area:high;
				justify-self:end;
				place-self: stretch;
		    display: flex;
		    justify-content: space-around;
				.sheet-val-1{
					color:var(--fumbleColor);
				}
				.sheet-d8.sheet-val-8 > .sheet-die-icon,
				.sheet-d10.sheet-val-10 > .sheet-die-icon,
				.sheet-d12.sheet-val-12 > .sheet-die-icon,
				.sheet-d20.sheet-val-20 > .sheet-die-icon{
					color:var(--critColor);
				}
			}
			> .sheet-total-value{
				border-radius:var(--templateRadius);
			}
			> .sheet-high-dice,
			> .sheet-total-value{
				background-color:white;
				border-width:var(--templateBorderW);
				border-color:var(--borderColor);
				border-style:solid;
			}
			> .sheet-total-value{
				grid-area:total;
				--totalSize:calc(var(--dieSize)/2);
				font-size:var(--totalSize);
				line-height:var(--totalSize);
				padding:5px;
				display:grid;
				place-content:center;
				width:100%;
				height:100%;
				box-sizing:border-box;
				> span{
					font-size:var(--totalSize);
				}
			}
		}
		.inlinerollresult{
			position:relative;
			&[title*="0[computed value]"],
			&[original-title*="[computed value]"]{
				pointer-events:none;
			}
			&,
			&:is(.fullcrit,.fullfail,.importantroll){
				border:none;
				background-color:transparent;
			}
			&.fullcrit + .sheet-die-icon{
				color:green;
			}
			&.fullfail + .sheet-die-icon{
				color:red;
			}
			&.importantroll + .sheet-die-icon{
				color:blue;
			}
		}
		.sheet-die-icon{
			font-size:var(--dieSize);
			place-self:center;
			&:before{
				line-height: var(--dieSize);
			}
		}
		@each $die in $dieSizes{
			.sheet-d#{$die}{
				display:inline-grid;
				grid-template-columns:auto;
				grid-template-rows:auto;
				grid-template-areas:"content";
				> *{
					grid-area:content;
				}
				> .inlinerollresult{
					opacity:0;
					text-align:center;
				}
				> .sheet-die-icon{
					&:before{
						font-family:dicefontd#{$die};
					}
				}
				@for $val from 1 through $die{
					$letter:map-get($dieLetter,$val);
					&.sheet-val-#{$val} > .sheet-die-icon:before{
						@if $die == 10 and $val == 10{
							content: "K";
						}@else{
							content:"#{$letter}";
						}
					}
				}
			}
		}
		.sheet-damage{
			display:grid;
			grid-template-columns: repeat(3,50px);
			grid-template-rows:auto 34px;
			place-content:center;
			grid-column-gap:10px;
			grid-template-areas: 
				"base-label  x-label  total-label"
				"base-damage x-damage total-damage"
			;
			border-radius: 0 0 var(--innerBorderRadius) var(--innerBorderRadius);
			padding:2px;
			span{
				font-size:2rem;
			}
			@each $field in base,x,total{
				.sheet-#{$field}-damage{
					grid-area:#{$field}-damage;
					border-width:2px 5px;
					border-style:solid;
					border-color:var(--fontColor);
					border-radius:var(--templateRadius);
					background-color:white;
					display:grid;
					grid-template-columns:auto;
					grid-template-rows:auto;
					place-content:center;
				}
				.sheet-#{$field}-label{
					grid-area:#{$field}-label
				}
			}
		}
		.sheet-roll-buttons{
			display:flex;
			justify-content: space-around;
			flex-wrap:wrap;
			padding:2px;
			a[href^="!"],
			a[href^="~"]{
				background-color:white;
				border-radius:var(--templateRadius);
				border-width:var(--templateBorderW);
				border-color:black;
				text-transform:uppercase;
				color:var(--selectColor);
				text-shadow:var(--selectShadow);
				font-weight:bold;
				:hover,
				:focus{
					background-color:var(--backColor);
					color:var(--fontColor);
					border-color:var(--borderColor);
					transition:var(--focusTrans);
				}
			}
		}
		&.sheet-finished{
			border-bottom-width: 2px;
			.sheet-roll-content{
				border-bottom-left-radius:var(--innerBorderRadius);
				border-bottom-right-radius:var(--innerBorderRadius);
			}
			&.sheet-continuation{
				border-radius:0 0 var(--templateRadius) var(--templateRadius);
			}
			&:not(.sheet-continuation){
				border-radius:var(--templateRadius);
			}
		}
	}
	.sheet-description{
		border-radius:var(--innerBorderRadius);
		background-color: white;
		&:empty{
			display:none;
		}
		> *{
			padding:2px;
		}
		a,
		a[href^="!"],
		a[href^="~"]{
			color:var(--selectColor);
			text-shadow:var(--selectShadow);
			font-weight:bold;
			font-style:italic;
		}
		.sheet-range{
			display:flex;
			flex-wrap:wrap;
			justify-content: space-between;
			padding:2px;
		}
	}
}