/* postbit */
.post {
    display: flex;
    flex-direction: column;
	background: var(--color-post-background);
	border: 1px solid var(--color-postbit-border);
	box-sizing: border-box;

	&.unapproved_post {
		background-color: var(--color-secondary-20);
		opacity: 0.7;
	}
	
	&.deleted_post {
		background-color: var(--color-threadlist-thread-deleted-background);
		opacity: 0.7;
	}
	
	&.trow_selected {
		background-color: var(--color-accent-20);
	}
	
	&.deleted_post_collapsed {
		padding: 1rem;
		gap: 0.5rem;
		
		.deleted_post_author {
			font-size: 1rem;
			font-weight: 500;
			letter-spacing: 0.15em;
		}
		
		.deleted_post_message {
			display: flex;
			align-items: flex-end;
			justify-content: space-between;
			gap: 0.5rem;
			flex-wrap: wrap;
		}
	}
    
    .postbit-head {
        position: relative;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1rem;
        background: var(--color-postbit-head-background);

        .title {
            align-self: center;
            text-align: center;
            font-size: 0.75rem;
			letter-spacing: 0.3em;
			font-weight: 500;
            text-transform: uppercase;
            color: var(--color-text);
        }

        .character-info {
            display: flex;
            flex-direction: column;
            padding: 0 10rem;
			
			button.name {
				padding: 0;
                margin: 0;
                background: transparent;
                border: none;
                outline: none;
                cursor: pointer;
			}

            .name {
				font-family: var(--font-secondary);
				font-size: 2.5rem;
				letter-spacing: 0.3em;
				text-transform: lowercase;
				line-height: 1;
				text-shadow: 0.5px 0.5px 0px currentColor;
                text-align: left;
            }

            .user {
                font-size: 0.75rem;
                letter-spacing: 0.3em;
                text-transform: uppercase;
                margin-left: 3rem;
				color: var(--color-secondary-80);
            }
        }

        .character-shortfacts {
            display: flex;
			align-items: center;
            gap: 2rem;

            .shortfact {
                display: flex;
                align-items: center;
                gap: 0.5rem;
				font-size: 0.625rem;
				letter-spacing: 0.3em;
                text-transform: uppercase;
                color: var(--color-text);
                white-space: nowrap;
            }
        }

        .ticon-wrapper {
            position: absolute;
            right: 50px;
            top: 50%;
			transform: translateY(-50%);
			height: 0;
			display: flex;
			align-items: center;
        }
		
		 .avatar-ticon-wrapper {
			position: absolute;
			top: 10%;
			right: 50%;
			transform: translateX(50%);
			height: 0;
			display: flex;
			align-items: center;
		}
    }

    .postbit-main {
        display: grid;
		grid-template-columns: 300px 1fr;
		grid-template-rows: auto 1fr auto auto;
		grid-template-areas: "author postHead"
							 "author postBody"
							 "author signature"
							 "postFooter postFooter";
		column-gap: 3rem;
		row-gap: 1rem;
		padding: 1rem;
		background: var(--color-postbit-main-background);

        .post-author {
			grid-area: author;
			display: flex;
            flex-direction: column;
            gap: 1.25rem;
			flex: 0 0 300px;
			
			.clickable-avatar {
				border: none;
				padding: 0;
				cursor: pointer;
			}
        }

		.post-head {
			grid-area: postHead;
			display: flex;
			gap: 1.25rem;
			align-items: center;

			.post-info {
				flex: 1;
				font-size: 0.75rem;
				letter-spacing: 0.1em;
			}
		}

		.post-body {
			grid-area: postBody;
			font-size: 0.875rem;
			letter-spacing: 0.025em;
			text-align: justify;
			padding-right: 2rem;
		}

		.post-footer {
			grid-area: signature;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 0.75rem;
		}
		
		 .postbit-footer {
			grid-area: postFooter;
			display: flex;
			align-items: center;
			background: var(--color-postbit-footer-background);

			.post-meta {
				flex: 1;
				font-size: 0.75rem;
			}

			.post-controls {
				display: flex;
				align-items: center;
				gap: 0.75rem;

				a {
					font-size: 1rem;
				}
			}
		}
    }
	
	&.deleted_post .postbit_mirage {
		display: none;
	}
	
	&:not(.deleted_post) {
		.status_type,
		.postbit-footer .postbit_qrestore {
			display: none;
		}
	}
	
	@media (width < 992px) {
		border-width: 1px 0;
		
		.postbit-head {
			.title {
				display: none;
			}

			.character-info {
				align-items: center;
				padding: 1.5rem 1rem 0 1rem;

				.name {
					font-size: 1.5rem;
				}

				.user {
					font-size: 0.625rem;
					margin: 0;
				}
			}

			.character-shortfacts {
				justify-content: space-evenly;
				gap: 0.5rem;
				flex-wrap: wrap;

				.shortfact {
					display: flex;
					align-items: center;
					gap: 0.5rem;
					font-size: 0.625rem;
					letter-spacing: 0.3em;
					text-transform: uppercase;
					color: var(--color-text);
					white-space: nowrap;
				}
			}
		}
		
		 .postbit-main {
			display: grid;
			grid-template-columns: 1fr;
			grid-template-rows: auto;
			grid-template-areas: "postHead" 
								 "postBody"
								 "signature"
								 "postFooter";
			 
			 .post-body {
				 padding: 0;
			 }
		}
	}
}

/* character info popup */
.info-popup {
	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-modal-backdrop);
    z-index: 9999;
    display: none;
	opacity: 0;
    align-items: center;
    justify-content: center;
	transition: 
		display 0.25s allow-discrete,
		opacity 0.25s;
	
	&.active {
		display: flex;
		opacity: 1;
	}
}

@starting-style {
	.info-popup.active {
		display: flex;
		opacity: 0;
	}
}

.character-info-popup {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
    width: min(38rem, 100%);
	max-height: 100%;
	overflow: auto;
	box-sizing: border-box;
	font-size: 0.75rem;
	letter-spacing: 0.1em;
	color: var(--color-text);
	background-color: var(--color-modal-background);
	border: 1px solid var(--color-text);
	box-shadow: var(--box-shadow-strong);
	isolation: isolate;
	
	.character-header {
		position: sticky;
		top: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		text-align: center;
		gap: 0.5rem;
		padding: 1rem;
		width: 100%;
		box-sizing: border-box;
		background-color: var(--color-modal-background);
		z-index: 1;
		
		.name {
			font-family: var(--font-secondary);
			font-size: 2.5rem;
			letter-spacing: 0.3em;
			line-height: 1;
			text-shadow: 0.5px 0.5px 0px currentColor;
			text-transform: lowercase;
		}
		
		.usertitle {
            font-size: 0.625rem
            letter-spacing: 0.3em;
            text-transform: uppercase;
            line-height: 1;
            transform: translateY(-10px);
            z-index: 10;
		}
		
		.close-button {
			position: absolute;
			top: 0.75rem;
			right: 0.75rem;
			z-index: 100;
		}
	}
	
	.character-info {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1.5rem;
		padding: 1rem;
		width: 100%;
		box-sizing: border-box;
		
		.profile-facts {
			display: flex;
			flex-direction: column;
			gap: 0.75rem;
			max-height: 38rem;
			overflow: auto;
		}
	}
	
	@media (width < 992px) {
		.character-info {
			
			.profile-facts {
				max-height: 42rem;
			}
		}
	}
	
	@media (width < 577px) {		
		.character-info {
			grid-template-columns: 1fr;
			
			.profile-facts {
				max-height: unset;
			}
		}
	}
}

/* new reply / new thread / edit post / message input */
.post-input,
.message-input {
	display: grid;
	grid-template-columns: 10rem auto;
	grid-template-areas: "label content";
	gap: 1rem;
	align-items: center;
	justify-items: start;
	width: 100%;

	input[type="text"] {
		min-width: min(20rem, 100%);
	}

	.section-title {
		grid-column: label / content;
		font-weight: 500;
	}
	
	.label {
		grid-column: label;
	}

	.content {
		grid-column: content;
	}

	.fullwidth {
		width: 100%;
	}

	@media (width < 992px) {
		grid-template-columns: auto;
		grid-template-areas: "label"
							 "content";
	}
}

/* post overview for newreply or split thread */
.post-overview {
	display: flex;
	flex-direction: column;
	width: 100%;

	.post-title {
		font-size: 0.75rem;
		text-align: center;
		background-color: var(--color-secondary);
		color: var(--color-primary);
		padding: 0.25rem 0.5rem;
	}

	.post-message {
		padding: 1rem;
		text-align: justify;
		word-break: break-word;
	}
}