/* .resolving-unapplied-weapons-damage event-panel:not([open]){
	opacity: 0 !important;
} */

:host(.calculating-attack) event-panel{
	max-width:calc(100% - 250px - var(--outer-gutter) * 3);
}

event-panel{
	/* contain: strict; */
	--indent-increment : 12px;
	--outer-gutter:4px;
	/* box-sizing: border-box; */
	opacity: 0;
	pointer-events: none;
	position: absolute;
	top:30px;
	left:var(--outer-gutter);
	max-width: calc(100% - var(--outer-gutter) * 2);
	width: calc(100% - var(--outer-gutter) * 2);
	height: 100%;
	/* transition:max-width 0.35s, opacity 0.35s; */
	transition: opacity 0.35s;
	/*display: flex;
	justify-content: center;
	align-items: center;*/	
	/*background-color: rgba(0,0,0,0.25);*/
	/* transition:opacity 0.15s; */
	/*z-index: 999;*/
	font-size:12px;
	letter-spacing:0.02em;
	z-index:2;
}
:host([mode="manual"]) event-panel{
	top:4px;
	opacity: 0 !important;
	transform:scale(0);
}

:host([mode="manual"]) event-panel .ticker{
	pointer-events: none;
}

:host([mode="assisted"]) event-panel{	
	opacity: 1;	
	transform:scale(1);
}

:host([shown][mode="assisted"]) event-panel{
	opacity: 1;	
	transition-delay:0.5s;	
}

/* event-panel[no-new-events] .ticker{
	opacity: 1;	
	background-color: var(--warning-yellow);
	color:black;
	cursor: pointer;
	padding-left: 12px;
	text-transform: uppercase;
	letter-spacing:1px;	
} */
/* event-panel .ticker .label,
event-panel .confirm-button{
	text-transform: uppercase;
	font-size: 10px;
	letter-spacing: 2em;
} */

event-panel .messageContainer{
	/* -webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px); */
	opacity: 0;	
	transition:opacity 0.25s;		
	pointer-events: none;
	/* padding-top: 12px; */
	/* background-color: white;	 */
	background-color: rgba(0,0,0,0.8);
	color:white;
	/*border:1px solid black;*/
	/*border-radius: 24px;*/
	max-height: calc( 100% - 33px - 4px); /* container height - top - padding */
	/* max-width: calc(100% - 8px); */
	/* width: fit-content; */
	overflow: scroll;
	-webkit-overflow-scrolling: touch;
	border-radius: 0px 0px 4px 4px;
	overflow-x:hidden;
	/* padding-top:1.5em; */  /* log will always start with a segment header that creates additional space */
}
/* event-panel .confirm-button{	
} */

event-panel[open] .messageContainer{
	opacity: 1;	
	pointer-events:initial;
}
event-panel[open] .confirm-button{
	pointer-events: initial;
}

/* [OPEN] IN LANDSCAPE */
@media screen and (min-aspect-ratio: 4/3){
	:host([mode="assisted"]) event-panel .messageContainer{
		opacity: 1;	
		pointer-events:initial;
		height:calc( 100% - 33px - 4px); 
		border-radius: 0px 0px 4px 0px;		
		/** weird flashing in chrome in widescreen with backdrop filter :(  */
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}	
	:host([mode="assisted"]) event-panel .confirm-button{
		pointer-events: none;
		visibility: hidden;
	}	
	:host([mode="assisted"]) event-panel .ticker{
		opacity: 0;
		pointer-events: none;
	}
}

:host(:not([mode="assisted"])) event-panel[open] .messageContainer{
	opacity: 0;
}
:host([mode="assisted"]) event-panel[open] .messageContainer{
	opacity: 1;	
}

event-panel .ticker{
	pointer-events: initial;
	user-select: none;
	cursor: pointer;
	position: absolute;
	right: 0px;
	/* width: fit-content;	 */
	padding: 4px;
	/* padding-top: 5px;	 */
	padding-left:7px;
	padding-right:3px;

	font-family: var(--bold-font);
	font-weight: normal; /* safari tries to extra bold the bold */

	background-color: rgba(0,0,0,0.7);
	color:var(--faded-warning);
	/* outline:0.5px solid var(--warning-yellow); */
	/* outline-offset:-3px; */
	/* height:24px; */	
	text-transform: uppercase;
	font-size: 8px;
	letter-spacing: 0.1em;	
	transition:all 0.25s;
}
/* event-panel .ticker:hover,
event-panel .ticker:active,
event-panel[open] .ticker:hover,
event-panel[open] .ticker:active
{
	background-color: var(--hover-color);
	color:white;
	transition: none;
} */
event-panel .ticker *{
	pointer-events: none;
}

event-panel[open] .ticker{
	/* opacity: 0;
	pointer-events: none; */
	background-color: var(--warning-yellow);
	color:black;
	z-index: 2;	
	/* transform:translate(-2px, 2px); */
}
event-panel .ticker .label:after{
	content:"►";
	margin-left:4px;
	transform:scale(0.7);
	transition:transform 0.25s;
	position: relative;
}
event-panel[open] .ticker .label:after{	
	content:"▼";	
	transform:scale(0.7);
}


/* event-panel .ticker .event-count{
	background-color:var(--warning-yellow);
	color:black;
	padding: 2px;	
} */



/* event-panel *{
	box-sizing: border-box;
} */


event-panel .logged-event{
	position: relative;
	/*border-bottom:1px solid #aaa;*/
	background-color: transparent;	
	padding-left: 24px;
	/* margin-right: 24px; */
	/* padding-top: 2px;
	padding-bottom: 2px; */
	line-height: 1.5;
	/* color:#dddddd; */
	color:var(--faded-warning);
	/* white-space: nowrap; */
	animation-name:reveal-up;
	animation-duration: 0.45s;
	animation-fill-mode: both;
	animation-timing-function: cubic-bezier(0.015, 0.750, 0.255, 0.995);
	animation-iteration-count: 1;
}

@keyframes reveal-up{
	from{
		opacity:0;
		transform:translateX(20px);
	}
	to{
		opacity:1;
		transform:translateX(0px);		
	}
}


event-panel .logged-event span.segment-header{
	display: block;
	/* width: 100%; */
	margin-top:24px;
	border-top: 1px solid #aaa;
	color:#aaa;
	text-transform: uppercase;
	font-size: 8px;
	letter-spacing: 1px;
	transform:translateX(-12px);
}

event-panel .logged-event span.phase-header{
	display: block;
	/* width: 100%; */
	margin-top:12px;
	border-top: 1px dotted #666;
	color:#aaa;
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
	/* transform:translateX(-12px); */
}

event-panel .logged-event span.event-collection-header,
event-panel .logged-event.event-collection-header{
	/* width: 100%; */
	margin-top:12px;
	font-size: 8px;
	text-transform: uppercase;
	letter-spacing: 1px;
}

/* .logged-event:not([data-indent="0"]){ 
	font-size:8px;
} */

.logged-event[data-indent="0"]{ margin-top:0.5em; }

[data-indent="1"]{ margin-left:  calc( 1 * var(--indent-increment)); }
[data-indent="2"]{ margin-left:  calc( 2 * var(--indent-increment)); }
[data-indent="3"]{ margin-left:  calc( 3 * var(--indent-increment)); }
[data-indent="4"]{ margin-left:  calc( 4 * var(--indent-increment)); }
[data-indent="5"]{ margin-left:  calc( 5 * var(--indent-increment)); }
[data-indent="6"]{ margin-left:  calc( 6 * var(--indent-increment)); }
[data-indent="7"]{ margin-left:  calc( 7 * var(--indent-increment)); }
[data-indent="8"]{ margin-left:  calc( 8 * var(--indent-increment)); }
[data-indent="9"]{ margin-left:  calc( 9 * var(--indent-increment)); }
[data-indent="10"]{ margin-left: calc( 10 * var(--indent-increment)); }
[data-indent="11"]{ margin-left: calc( 11 * var(--indent-increment)); }
[data-indent="12"]{ margin-left: calc( 12 * var(--indent-increment)); }
[data-indent="13"]{ margin-left: calc( 13 * var(--indent-increment)); }
[data-indent="14"]{ margin-left: calc( 14 * var(--indent-increment)); }
[data-indent="15"]{ margin-left: calc( 15 * var(--indent-increment)); }
[data-indent="16"]{ margin-left: calc( 16 * var(--indent-increment)); }
[data-indent="17"]{ margin-left: calc( 17 * var(--indent-increment)); }
[data-indent="18"]{ margin-left: calc( 18 * var(--indent-increment)); }
[data-indent="19"]{ margin-left: calc( 19 * var(--indent-increment)); }
[data-indent="20"]{ margin-left: calc( 20 * var(--indent-increment)); }

event-panel .confirm-button{
	/* this button is deprectated since main "log" button became a toggle */
	/* visibility: hidden !important;	 */
	/* pointer-events: none !important; */
	cursor: pointer;
	/* text-align: center;	 */
	padding: 4px;
	padding-left: 10px;

	margin:2px;
	margin-top:24px;
	border-radius: 0px 0px 2px 2px;
	background-color: var(--warning-yellow);
	outline: 1px solid black;
	color:black;
}
event-panel .confirm-button:active,
event-panel:not([open]) .confirm-button{
	background-color:var(--hover-color);
	color:white;
}

event-panel.show .confirm-button{
	pointer-events: initial;
}

event-panel .dice-image{
	max-width:12px;
	transform: translateY(2px);	
}

event-panel .dice-image + .dice-image{
	margin-left:-0.15em;
}

/* event-panel .confirm-button:hover{ */
	/*background-color: skyblue;*/
	/*color:black;*/
/* } */

event-panel .end-of-mech + *,
event-panel .unit-destroyed{
	opacity: 0.6;
}
event-panel .unit-destroyed:first-of-type{
	opacity: 1;
}

/** The actual mech destroyed entry */
event-panel .end-of-mech{
	opacity: 1;
	color:#ff8392;
	letter-spacing:0.05em;
	font-family:var(--bold-font);
}

.mod-list{
	font-size: 11px;
	color:#ccc;	
	margin-bottom:12px;
}

.mod-value,
.mod-total{
	display: inline-block;
	color:white;
	font-family: var(--bold-font);
	min-width: 15px;
	text-align: right;
	display: inline-block;
}

.mod-description::before{
	content: ":";
	margin-left:2px;
	margin-right:2px;
}

.attack-result{
	display: inline-block;	
	border-top:1px dotted #aaa;
	padding-top: 2px;
	margin-top: 2px;	
	white-space: nowrap;
}
.attacks{
	margin-bottom:12px;
}
.attacks.redacted{
	filter:saturate(0);
	opacity: 0.5;
	text-decoration: line-through;
}
.attacks .mod-list{
	padding-left: 12px;
}

.attacks .weapon{
	margin-top:0.5em;
	font-family: var(--bold-font);
}

.attack{
	margin-top:12px;
}

.attacks .preposition{
	font-size: 10px;
	text-transform: uppercase;
	color:white;

	font-family: var(--bold-font);
	font-weight: normal; /* safari tries to extra bold the bold */

	margin-left: 6px;
	margin-right: 6px;
	letter-spacing: 0.1em;
}

event-panel .logged-event.issue{
	color: black;
	background-color: #545454;
	padding-top:6px;
	padding-bottom:6px;
}
/* event-panel .logged-event::before{
	position:absolute;
	top:0px;
	left:0px;
	content:"a";
	color:transparent;
	border-left:1px solid #aaa;
	transform:translate(12px);
} */


/**
	heat 
*/
.heat-change{
	width: fit-content;
}
.heat-change div{
	display: flex;
	flex-direction: row;
}
.heat-change div>span{
	text-align: right;
	min-width: 2em;
}
.heat-change .result{
	border-top: 1px solid #ccc;
	margin-top: 1em;
	padding-top:1em;
}

/**
	'calculation'
	e.g. heat, piloting check, (someday attacks)
*/
.calculation,
event-panel .logged-event.note{
	font-size: 11px;
	color: #ccc;
	/* padding-left: 1.5em; */
	width: fit-content;
	--important-color:white;
}
event-panel .logged-event.note{
	font-size: 12px;
}

.calculation .item{
	display: flex;
	flex-direction: row;
	position: relative;
}

/* 
	NOTE: calculation items should be structured:
	<div .calculation>	
		<div .item>
			<span>c1</span>
			<span>c2</span>
		</div>
		...
		<div .item.result>
			<span>c1</span>
			<span>c2</span>
		</div>
	</div>

*/
.calculation .item.important{
	color:var(--important-color);
}

.calculation .item>span:first-of-type{
	color:var(--important-color);
	font-family:var(--bold-font);
	min-width: 2em;	
	text-align: right;
}
.calculation .item>span:first-of-type + span::before{
	content: ":";
    margin-left: 0.2em;
	margin-right: 0.2em;
	color: #ccc;
}
.calculation .result{
	border-top: 1px dotted #aaa;
	margin-top: 0.5em;
	padding-top:0.5em;
	margin-bottom: 1em;	
}

/* 

	PSR specific calculation styles 

*/

/* .psr-obligations .item[data-triggers]{	
	color:var(--important-color);
} */
.psr-obligations .item[data-triggers]::after{
	content:"⚠️";
	position:absolute;
	right:0px;
	/* left:-21px; */
	top:0px;
}
.psr-obligations .item:not(.result){
	padding-right:2em; /* create a right gutter for ::after trigger flag */
}

.psr-obligations .item span:first-of-type{	
	min-width: 1.5em; /* psr mods are always single digits */
}
.psr-obligations .item[data-val="0"] span:first-of-type{
	color:#666;	
}
.psr-obligations .psr-target-number[data-tn="Infinity"]{
	text-transform: uppercase;
	letter-spacing: 0.05em;	
}

.psr-target{
	flex-grow: 1;
}
.psr-target .mult{
	text-align: center;
	flex-grow: 1;
	margin: 0em 0.4em;
}
.psr-target .rolls{
	text-align: right;
	color:var(--warning-yellow);	
}
.psr-target .rolls .rollCount{
	font-family: var(--bold-font);
}

.psr-modifier[data-val="Infinity"] .psr-mod-value{
	color: var(--destroyed-bright-red) !important;
    transform: scale(1.5);
    transform-origin: 100% 50%;
}

/* .psr-target-number:not([data-tn="Infinity"])::after{
	content:"+";
	position:absolute;
} */

span.roll-element-with-origin{
	background-color: black;
    padding-left: 6px;
    border-radius: 6px 0px 0px 8px;
    padding-right: 1px;
    outline: 1px solid beige;
}