/* 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 */
.panel.newreply {
	align-items: center;
	
	.title {
		font-size: 1.25rem;
		letter-spacing: 0.15em;
		text-transform: lowercase;
		text-align: center;
	}
	
	.reply-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%);
		}
		
		.newreply-section-title {
			grid-column: label / content;
			font-weight: 500;
		}
		
		.newreply-label {
			grid-column: label;
		}
		
		.newreply-content {
			grid-column: content;
		}
		
		.fullwidth {
			width: 100%;
		}
	}
	
	.threadreview {
		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;
		}
	}
	
	@media (width < 977px) {
		.reply-input {
			grid-template-columns: auto;
			grid-template-areas: "label"
								 "content";
		}
	}
}


/* ___ */

/*
.post {
    overflow: hidden;
}

.post.classic {
    padding-top: 15px;
}

.post .post_author {
    border-bottom: 1px solid #ccc;
    border-top: 2px solid #ccc;
    background: #f5f5f5;
    padding: 5px;
    overflow: hidden;
}

.post.classic .post_author {
    border: 1px solid #ddd;
    float: left;
    width: 15%;
    margin: 0 1% 15px 0;
    border-left: 0;
    padding: 5px 1%;
}

.post .post_author .buddy_status {
    vertical-align: middle;
    margin-top: -4px;
}

.post .post_author div.author_avatar {
    float: left;
    margin-right: 3px;
}

.post.classic .post_author div.author_avatar {
    float: none;
    text-align: center;
    margin-bottom: 8px;
}

.post .post_author div.author_avatar img {
    padding: 5px;
    border: 1px solid #ddd;
    background: #fff;
}

.post .post_author div.author_information {
    float: left;
    padding: 6px 8px;
}

.post.classic .post_author div.author_information {
    float: none;
    padding: 0;
    text-align: center;
}

.post .post_head {
    font-size: 78.6%;
    padding-bottom: 4px;
    border-bottom: 1px dotted #ddd;
    margin-bottom: 4px;
}

.post .post_head span.post_date {
    color: #666;
}

.post .post_head span.edited_post {
    font-size: 78.6%;
    color: #999;
}

.post .post_head span.edited_post a {
    color: #666;
}

.post_body {
    padding: 12px;
    background-color:#fff;
}

.post.classic .post_content {
    float: left;
    width: 79%;
    padding-top: 0;
}

.post_content {
    padding: 9px 10px 5px 10px;
}

.post_content .signature {
    margin-top: 5px;
    border-top: 1px dotted #ddd;
    padding: 10px 0 4px 0;
}

.post .post_meta {
    margin: 4px 0;
    font-size: 78.6%;
    color: #999;
    overflow: auto;
}

.post .post_meta a:link,
   .post .post_meta a:visited {
    color: #777;
}

.post .post_meta a:hover,
   .post .post_meta a:active {
    color: #777;
}

.post_controls {
    clear: both;
    background: #f5f5f5;
    border-bottom: 1px solid #ccc;
    padding: 5px;
    overflow: hidden;
}


.post.unapproved_post {
    background: #ffdde0;
}

.thread_start_datetime {
	color: #999;
}

.post.unapproved_post .post_author {
    border-bottom-color: #ffb8be;
}

.post.classic.unapproved_post .post_author {
    border-color: #ffb8be;
}

.post.unapproved_post .post_controls {
    border-top-color: #ffb8be;
}


.post:not(.deleted_post) .postbit_qrestore,
.post:not(.deleted_post) .status_type,
.post.deleted_post .postbit_mirage {
    display: none;
}
*/

/*
.post .editor_control_bar {
    background: #f5f5f5;
}


.deleted_post_hidden {
       border-top: 2px solid #ccc;
       padding: 15px;
}

.deleted_post_collapsed {
       border-top: 3px solid #333;
       padding: 15px;
}

.deleted_post_collapsed .show_deleted_post {
       margin-top: -15px;
}

.deleted_post_collapsed .show_deleted_post a.button span {
       background-position: 0 -400px;
}

.post_body {
        background-color: initial;
}


.postbit_buttons a span:before {
      content: "";
      display: inline-block;
      font-family: ForkAwesome;
      margin-right: 5px;
}

.postbit_buttons a.postbit_find span:before {
   content: "\f002";
}

.postbit_buttons a.postbit_reputation_add span:before {
   content: "\f067";
}

.postbit_buttons a.postbit_email span:before {
   content: "\f0e0";
}

.postbit_buttons a.postbit_website span:before {
   content: "\f0ac";
}

.postbit_buttons a.postbit_pm span:before {
   content: "\f199";
}

.postbit_buttons a.postbit_quote span:before {
   content: "\f10e";
}

.postbit_buttons a.postbit_multiquote span:before {
   content: "\f055";
}

.postbit_buttons a.postbit_multiquote_on span:before {
   content: "\f056";
      color: #DB1304;
}

.postbit_buttons a.postbit_edit span:before {
   content: "\f044";
}

.postbit_buttons a.postbit_qdelete span:before {
   content: "\f00d";
}

.postbit_buttons a.postbit_qrestore span:before {
   content: "\f067";
}

.postbit_buttons a.postbit_report span:before {
   content: "\f0a1";
}

.postbit_buttons a.postbit_warn span:before {
   content: "\f0e3";
}

.postbit_buttons a.postbit_purgespammer span:before {
   content: "\f071";
}

.postbit_buttons a.postbit_reply_pm span:before {
   content: "\f112";
}

.postbit_buttons a.postbit_reply_all span:before {
   content: "\f122";
}

.postbit_buttons a.postbit_forward_pm span:before {
   content: "\f064";
}

.postbit_buttons a.postbit_delete_pm span:before {
   content: "\f00d";
}

.postbit_icon {
    display: none;
    vertical-align: middle;
}

.postbit_footer {
    padding:4px 0px;
}

.postbit .postbit_avatar img{
    padding-right:8px;
    display:inline-block;
}

.postbit_classic .postbit_title {
    padding-bottom: 4px;
}

.postbit_classic .postbit_avatar {
    text-align: center;
    margin:3px 0px;
}

.postbit_classic .postbit_content {
    padding-left:20%;
}

.postbit_author_details {
    margin: 10px auto;
    text-align: left;
    width: 150px;
}

.postbit_author_details > span {
    display: block;
    padding: 3px 0;
}

.posticons_label {
    white-space: nowrap;
}


.post_attachments {
    display: block;
    padding: 7px 0;
}

.posticons div input, .posticons div input + img {
    display: inline-block;
    vertical-align: middle;
}

.threadbit_icon, .posticons {
    vertical-align: middle;
}
*/