// 🦊 BEFORE CLICKING INSTALL:
// ---------------------------
// Add your home instance to the "Custom included sites"
// textbox in the left panel following this format:
// *://domain.tld/*

/* Update 2.1.5 (v4.6.0-nightly.2025-12-04)
- Fixes glitch-soc styling
*/

/* ==UserStyle==
@name			MastoModern
@version		2.1.5
@description	Improves the look & feel of Mastodon
@updateURL		https://git.gay/Freeplay/Mastodon-Modern/raw/branch/main/modern.user.css
@homepageURL	https://git.gay/Freeplay/Mastodon-Modern
@supportURL		https://git.gay/Freeplay/Mastodon-Modern/issues
@preprocessor	stylus

@var range		tlWidth			"Timeline Width" [720, 600, 860, 20, "px"]
@var checkbox	sideHeader		"Move header to sidebar" 1
@var checkbox	navOnLeft		"Move navigation sidebar to the left" 0
@var checkbox	spaceBetween	"Move sidebars to edges" 0
@var checkbox	largerEmoji		"Larger custom emoji" 1
@var checkbox	emojiZoom		"Zoom custom emoji on hover (follows prefers-reduced-motion)" 1
@var checkbox	collapseHidden	"Collapse hidden media" 1
@var checkbox	hideClickArea	"Increase click area for hide media button" 1
@var checkbox	flatterUI		"Flatter UI" 0
@var range		borderRadius	"Border radius" [12, 0, 24, 4, "px"]
@var range		radiusRound		"Border radius round" [24, 0, 24, 4, "px"]
@var range		avatarRadius	"Avatar radius" [30, 0, 50, 10, "%"]
@var color warn "Some options may not apply depending on the server's style defaults and how the option was implemented" #ff6b00

@namespace		Freeplay
@author			Freeplay (https://freeplay.floof.company/)
==/UserStyle== */

@-moz-document domain("mastodon.social"), domain("mastodon.online"), domain("mstdn.social"), domain("tech.lgbt"), domain("meow.social"), domain("corteximplant.com"), domain("bark.lgbt"), domain("yiff.life"), domain("furry.engineer"), domain("aus.social"), domain("infosec.exchange"), domain("ohai.social"), domain("eldritch.cafe"), domain("octodon.social"), domain("donphan.social"), domain("peoplemaking.games"), domain("toot.cat"), domain("vt.social") {
/ {
	responsiveW1 = 1320px
	responsiveW2 = 1175px
	mobileW = 760px

	transBounce1 = .2s cubic-bezier(0,0,0,1.1)

	statuses-list = ".focusable, .entry, .statuses-grid__item .detailed-status, .trends__item, .story, .scrollable :not(.focusable) > .account:not(.account--minimal), .timeline-hint, .notification-request"
	media = ".media-gallery, .video-player, .status-card.horizontal.interactive, .status-card, .audio-player, .picture-in-picture-placeholder"

	:root {
		--tl-width tlWidth
		if tlWidth == 860 {
			--tl-width 100%
		}
		if !largerEmoji {
			--emoji-size 1.2em
		}
		if largerEmoji {
			--emoji-size 2em
		}

		--avatar-size 46px
		--radius borderRadius
		--radius-round radiusRound
		--panel-radius var(--radius)
		--hover-color rgba(170,170,170, 0.07)
		--elevated-color rgba(150,150,200,0.1)
		--elevated-tint var(--color-bg-secondary)
		--border-color rgba(120,120,200, 0.2)
		--border-color-2 rgba(120,120,120, 1)
		--shadow 0 10px 40px -10px rgba(0,0,0,0.15)
		--shadow-low 0 8px 24px -16px rgba(0,0,0,0.2)
		--shadow-med 0 8px 60px -30px rgba(0,0,0,0.1)
		--column-shadow 0 8px 24px 12px rgba(0,0,0,0.02)
		--background-border-color var(--border-color)
			
		if flatterUI {
			--column-shadow 0
			--elevated-tint 0
		}

		// --accent  // not applied everywhere, just for if you have custom color scheme and want to match it
	}

	desktop() {
		@media (min-width mobileW) {
			.layout-single-column {
				{block}
			}
		}
	}
	@media (max-width mobileW - 1) {
		:root {
			--panel-radius 0px
		}
	}
	.layout-multiple-columns {
		--panel-radius 0px
	}

	//// BODY
	body {
		font-display swap !important
		if !flatterUI {
			&.app-body::before {
				content ""
				position fixed
				inset 0
				background rgba(0,0,0,0.09)
				pointer-events none
			}
		}
	}

	//// GLOBAL
	/ {
		p {
			line-height 1.5
		}
		input {
			text-align start
		}
		.button--block {
			font-weight bold
		}
		.unhandled-link, .mention {
			span {
				text-decoration none !important
			}
			&:not(:focus):not(:hover) {
				span {
					text-decoration underline !important
				}
			}
		}
		input, .input-copy, select, textarea,
		.compose-form__upload-thumbnail, .button,
		:not(.notification__filter-bar) > button:not(.column-header__button), video, .privacy-dropdown__dropdown, .react-toggle-track,
		.reply-indicator, .compose-form__warning {
			border-radius var(--radius)
		}
		button, .focusable, a, .media-gallery__item-thumbnail {
			&:focus-visible {
				box-shadow inset 0 0 0 2px #dc7b18
				outline 2px #dc7b18 solid
				outline-offset -2px
			}
		}
		:not(.radio-button__input):not(span) {
			border-color var(--border-color)
		}

		.nothing-here
		.column-inline-form,
		.scrollable,
		.detailed-status__action-bar,
		.column-back-button, .column-header__collapsible.collapsed, .column-header__collapsible-inner,
		.audio-player, .search__input {
			border 0 !important
		}
		.account__section-headline, .notification__filter-bar,
		.column-header {
			border-inline 0
		}

		.account__section-headline, .notification__filter-bar
		.column > .scrollable {
			background none
		}

		.account__avatar, #profile_page_avatar, .account__avatar-composite, .account-card__title__avatar img {
			border-radius avatarRadius 
			flex none
		}
		
		button.icon-button {
			--hover-bg-color: var(--hover-color);
		}

		:not(body):not(.scrollable) {
			&::-webkit-scrollbar {
				width 6px
				margin-block 10px
				&-track {
					background none
				}
				&-thumb {
					border-radius 100px
					transition background-color .2s
				}
			}
			&:not(:hover) {
				&::-webkit-scrollbar-thumb {
					background none
					padding-block 10px
				}
			}
		}
	}
	// ANIMATIONS
	/ {
		@media (prefers-reduced-motion: no-preference) {
			body:not(.reduce-motion) {
				.ui__navigation-bar__item,
				.load-more, .setting-toggle, .column-header__back-button, .column-back-button,
				.trends__item, .story, .account__avatar, .button,
				.media-gallery__item, .column-link, select, .status-card, .audio-player, .account {
					transition transform .4s cubic-bezier(0,0,0,3), background .2s, opacity .2s !important
					&:active, &:focus-visible {
						transform scale(.99)
						transition transform .4s cubic-bezier(0,0,0,1) !important
					}
				}
				.column-header__button, .column-header__buttons > .column-header__back-button,
				.react-toggle-track, .icon-button, .floating-action-button {
					transition transform .4s cubic-bezier(0,0,0,4), background .2s !important
					&:active {
						transform scale(.95)
						transition transform .4s cubic-bezier(0,0,0,1) !important
					}
				}
				.status__content__spoiler-link {
					span {
						display inline-block
						transition transform .4s cubic-bezier(0,0,0,4) !important
					}

					&:active span {
						transition transform .4s cubic-bezier(0,0,0,1) !important
						transform translateY(1px)
					}
				}
			}
			.reduce-motion * {
				animation-duration 0s !important
			}

			@keyframes bounceIn {
				0% { transform: scale(1.1); opacity: 0 }
				30% { transform: scale(.99); opacity: 1 }
				60% { transform: scale(1.005); opacity: 1 }
				100% { transform: scale(1); opacity: 1 }
			}

			@keyframes slideUp {
				from { 
					transform translateY(20px) 
				}
			}
			@keyframes slideUpFade {
				from { 
					transform translateY(20px) 
					filter opacity(0)
				}
			}
			@keyframes slideUpFadeBig {
				from { 
					transform translateY(200px) 
					filter opacity(0)
				}
			}
			@keyframes slideDownFade {
				from {
					transform translateY(-20px)
					filter opacity(0)
				}
			}
			@keyframes slideUpBig {
				from { 
					transform translateY(50vh) 
				}
			}
			@keyframes fadeUp {
				from { 
					transform translateY(10px) 
					opacity 0
				}
			}
			@keyframes scaleIn {
				from {
					transform scale(.98)
					opacity 0
				}
			}
			@keyframes fadeLeft {
				from {
					transform: translateX(20px) opacity(0)
				}
			}
			@keyframes rainbow {
				to {
					filter hue-rotate(360deg)
				}
			}
		}
	}

	//// ALL COLUMNS
	/ {
		.columns-area__panels {
			--top 5px
			gap 0
			if navOnLeft {
				flex-direction row-reverse
			}
			if spaceBetween {
				justify-content space-between
			}
		}
		@media (min-width responsiveW2) {
			.columns-area__panels {
				padding-inline 10px
				padding-top var(--top)
				box-sizing border-box
				transition padding .4s
				--top 20px
			}
		}
		@media (min-width responsiveW1) {
			.columns-area__panels {
				--top 30px
			}
			if spaceBetween {
				.columns-area__panels {
					--top 10px
				}
				.columns-area__panels__main {
					margin-top 20px !important
				}
			}
		}
	}

	// LEFT COLUMN
	/ {
		.columns-area__panels__pane--compositional {
			@media (min-width responsiveW1) {
				if spaceBetween {
					.columns-area__panels__pane__inner::before {
						content ""
						position absolute
						inset -100px -11px
						border-inline 1px solid var(--border-color)
						z-index -1
					}
				}
			}

		}

		// COMPOSE
		.compose-panel {
			overflow-y auto
			margin-top calc(0px - var(--top))
			padding-top var(--top)
			padding-bottom 20px
			padding-inline 10px
			box-sizing border-box
			max-height unset !important
			height 100%
			.search, /.drawer .search {
				margin-bottom 25px
			}
		}
		.compose-form__uploads {
			padding 0
			margin-inline 12px
			width unset
		}
		.search {
			border-radius var(--radius)
			margin-inline -5px
			input {
				border-radius var(--radius-round) !important
			}
			/.search__popout {
				border-radius var(--radius)
				animation scaleIn .2s
				box-shadow var(--shadow-low)
				margin-top 10px
				margin-inline 4px
				width calc(100% - 8px)
			}
		}
		.compose-form {
			min-height unset
			overflow unset
			gap 15px
			margin-bottom 20px
			flex 1 0 auto !important
			.spoiler-input__border {
				display none
			}
			.autosuggest-input.autosuggest-input {
				border-block 0
			}
			#cw-spoiler-input {
				padding-inline 12px
				border-radius 0
			}
			.compose-form__upload__thumbnail {
				display flex
				flex-direction column
			}
			.compose-form__upload__actions {
				z-index 10
			}
			.compose-form__upload__warning {
				position relative
				flex-grow 1
				display flex
				button.active {
					background: rgba(0,0,0,0.75);
					backdrop-filter: none;
					box-shadow 0 0 0 100px rgba(0,0,0,0.75)
					width 100%
					height 100%
					font-weight bold
					font-size 1.1em
					transition background .2s, transform .2s cubic-bezier(0,0,0,1) !important
					svg {
						height 1.2em
						width @height
					}
					&:hover, &:focus {
						background rgba(20,20,20,0.75)
					}
				}
			}
		}
		.compose-form__highlightable {
			border-radius var(--radius)
			.columns-area__panels__main & {
				background none
			}
			> .compose-form__dropdowns {
				flex-wrap: nowrap;
				button {
					border 0
					padding 4px
					transition background .2s
					&:hover:not(.active) {
						background var(--hover-color)
					}
				}
			}
			.compose-form__dropdowns + .autosuggest-textarea textarea {
				padding-top 0
			}
			.compose-form__actions {
				position relative
			}
			.compose-form__buttons {
				display flex
				flex-wrap wrap
				flex-direction row
				gap 4px
				flex-grow 9999
				:not(.character-counter) {
					display flex
					justify-content center
					flex-grow 1
					aspect-ratio 1
					max-width 38px
					padding 0
					border-radius 6px
				}
				label {
					display none !important
				}
				.character-counter {
					margin-inline-start auto
					flex-grow: 0;
					min-width: 4ch;
					padding-inline: 10px 4px;
				}
			}
/* 			.character-counter {
				position absolute
				inset-inline-end 0
				bottom calc(100%)
				padding 4px
				font-size 13px
			} */
		}

		//// SERVER INFO
		.server-banner {
			.server-banner__hero {
				border-radius var(--radius)
				// margin-inline -10px
				width 100%
				// width calc(100% + 20px)
				border-radius var(--radius) var(--radius) 0 0
				border 1px solid var(--border-color)
				box-sizing border-box
			}
			.server-banner__description {
				border 1px solid var(--border-color)
				padding 14px 12px
				margin-top -20px
				line-height 1.5
				border-radius 0 0 var(--radius) var(--radius)
			}
			.server-banner__meta {
				flex-direction column
				.server-banner__meta__column {
					width unset
					overflow visible
					display flex
					flex-direction row
					flex-wrap wrap
					align-items flex-end
					h4 {
						margin 0
						font-size .9em !important
						width 100%
						// font-weight 500
					}
					.account {
						margin-inline -10px
						padding 10px !important
						width 100%
						&::after {
							content unset !important
						}
					}
					.server-banner__number, .server-banner__number-label {
						font-size 1.1em
						line-height 2
						margin-inline-end .5em
					}
					.server-banner__number-label {
						font-weight 400 !important
					}
				}
			}
		}
		.navigation-panel__sign-in-banner {
			margin-inline 5px
			// border-top 1px solid
			position relative
		}
		.link-footer {
			margin-top 20px
			> p:last-child {
				margin-bottom 0
			}
		}
	}

	//// CENTER COLUMN
	/ {
		.columns-area {
			box-shadow var(--column-shadow)
			padding 0
			overflow visible
			@media (min-width responsiveW2) {
				border-radius var(--radius) var(--radius) 0 0 !important
				& > :first-child {
					border-radius var(--radius) var(--radius) 0 0 !important
				}
			}
		}
		.columns-area__panels__main {
			background: none;
			@media (min-width responsiveW2) {
				width 0
				flex-grow 1
				margin-inline 10px
				max-width var(--tl-width) !important
			}
			@media (min-width responsiveW1) {
				margin 0 20px
			}
			if sideHeader {
				@media (min-width mobileW) {
					display grid
					grid-template-columns 100%
					.column, .columns-area {
						grid-column 1
						overflow clip !important
					}
				}
			}

			overflow visible !important
			contain inline-size style !important
			transition max-width transBounce1, margin transBounce1

			if !sideHeader {
				overflow clip !important
				border-radius var(--radius) var(--radius) 0 0 !important
			}

			> div {
				grid-row 1
			}
		}
		.column {
			background var(--color-bg-ambient)
			overflow clip
			&::before {
				content ""
				position absolute
				inset 0
				background var(--elevated-tint)
				pointer-events none
			}
		}
		if flatterUI {
			.columns-area.columns-area, .column.column {
				overflow visible !important
			}
			.scrollable {
				contain unset !important
			}
		}
		+desktop() {
			.scrollable > [tabindex="-1"]:first-child {
				margin-top 10px
			}
			.item-list {
				> article:first-of-type {
					margin-top 10px
				}
				> article::after {
					inset-inline calc(var(--radius) + 10px)
				}
			}
			.load-more
			.trends__item,
			{statuses-list} {
				margin-inline 10px
				max-width calc(100% - 20px)
			}
		}
		.empty-column-indicator, .error-column {
			background none
		}
		.dismissable-banner {
			display flex
			align-items center
			flex-direction row-reverse
			gap 20px
			margin 0
			border-radius 0
			border 0
			padding 25px
			> div {
				padding 0
			}
			button {
				padding 16px
				margin -16px -14px
			}
		}

		// COLUMN HEADER
		.tabs-bar__wrapper {
			if sideHeader {
				grid-column 2
				@media (min-width mobileW) {
					margin-top -100vh
				}
			}
			border 0 !important
			padding-top 0
			transition margin transBounce1, top .4s
			/.column-header, /.column-inline-form {
				font-weight 600
				border-bottom-left-radius 0 !important
				border-bottom-right-radius 0 !important
				& ~ .scrollable {
					border-top-left-radius 0 !important
					border-top-right-radius 0 !important
				}
			}
			/.column-header__title {
				gap 12px
			}
			/.announcements, /.column-header__collapsible:not(.collapsed) {
				flex-direction column-reverse
				align-items flex-start
				border 0
				animation slideDownFade .3s backwards cubic-bezier(0,1,0,1.2)
			}
			/.column-header__collapsible {
				transition none
				background var(--color-bg-secondary-solid)
				overflow-y auto !important
			}
			.collapsed {
				display none
			}
			/.announcements__root {
				display flex !important
				flex-direction column
				z-index -1
				position relative
			}
			/.announcements {
				width 100%
				overflow visible
			}
			/.announcements__pagination {
				inset-inline-start 0
				top 100%
				bottom unset
				padding-block 0
			}
			/.announcements__mastodon {
				display unset
				order 2
			}
			/.column-header__wrapper {
				> :not(.column-header):not(.collapsed) {
					border-top 2px solid var(--color-bg-ambient) !important
					border 0
				}
			}
			/.column-header {
				overflow hidden
			}
			/.column-header > button {
				z-index 2
			}
			/.column-header__buttons {
				isolation isolate
			}
			/.column-header__buttons button {
				transition background .2s, transform .3s !important
				position relative
				border-radius 100px !important
				min-width 40px
				margin 5px
				margin-inline-start 0
				font-size .9em
				padding-inline 10px
				&:not(.active) {
					background var(--elevated-color) !important
					z-index 2
				}
				svg {
					margin 0
				}
				span {
					display none
				}
				&::before {
					content ""
					position absolute
					inset -20px -800px
					transform scale(0)
					transform-origin bottom center
					background var(--color-bg-secondary-solid)
					z-index -1
					border-radius 100px
					pointer-events none
					opacity 0
					transition transform .3s, opacity .3s
					@media (prefers-reduced-motion) {
						transition none !important
					}
				}
				&.active {
					&::before {
						transform scale(1, 5)
						opacity 1
						transition transform .3s, opacity .1s
					}
				}
			}


			@media (min-width mobileW) {
				inset-inline unset !important
				height 50px !important
				top 0
				.column-header__wrapper {
					display flex
					flex-direction column
					border-radius var(--radius)
					overflow hidden
					> div {
						background var(--color-bg-secondary-solid)
					}
				}
				.column-header {
					background none !important
					overflow hidden
					border 0
				}
				if sideHeader {
					top var(--top) !important
					width 285px
					border-radius var(--radius) var(--radius) !important
					box-shadow 0 12px 12px -12px rgba(0,0,0,0.1)

					if !spaceBetween {
						margin-inline-start 20px
						@media (max-width responsiveW1 - 1) {
							margin-inline-start 10px
						}
					}
					@media (max-width responsiveW2 - 1) {
						width 265px
						top 10px !important
					}

					if spaceBetween {
						position fixed
						inset-inline-end 10px !important
						margin 0 !important
					}

					if navOnLeft {
						grid-column 1
						if !spaceBetween {
							margin-inline-start -285px - 20px !important
							@media (max-width responsiveW1 - 1) {
								margin-inline-start -285px - 10px !important
							}
							@media (max-width responsiveW2 - 1) {
								margin-inline-start -285px + 10px !important
							}
						}
						if spaceBetween {
							inset-inline-start 10px !important
						}
					}
				}
				if !sideHeader {
					border-bottom 1px solid var(--border-color) !important
					&::after {
						content ""
						position absolute
						inset 0
						background var(--elevated-tint)
					}
					.column-header {
						padding-inline 10px
					}
				}
			}
		}
		if sideHeader {
			@media (min-width mobileW) {
				.column-back-button--slim {
					margin-left auto !important
					order -1
					> .column-back-button {
						margin-top 0 !important
						top unset !important
					}
				}
				@media (max-width responsiveW2 - 1) {
					.column-back-button--slim > .column-back-button {
						margin-top -55px !important
						top unset !important
					}
				}
			}
		}

		// COLUMN HEADER SETTINGS
		.column-settings__row, .column-settings__hashtags {
			gap 0
		}
		.column-settings h3 {
			font-size 1em
			margin-bottom 8px
		}
		.column-select__control {
			border-radius var(--radius)
		}
		.local-settings__page__item,
		.glitch-setting-text.glitch-setting-text,
		.setting-toggle, .app-form__toggle {
			display flex
			align-items center
			margin-bottom 14px
			position relative
			padding .7em
			background var(--elevated-color)
			margin-block 0 2px !important
			overflow hidden
			&:first-of-type {
				border-top-left-radius var(--radius)
				border-top-right-radius var(--radius)
			}
			&:last-of-type {
				border-bottom-left-radius var(--radius)
				border-bottom-right-radius var(--radius)
			}
			label, legend {
				padding-block 2px !important
			}
			label span {
				&::before {
					content ""
					position absolute
					inset -900px
				}
			}

			// border-radius var(--radius)
			.react-toggle {
				order 2
			}
			.setting-toggle__label {
				margin-bottom 0 !important
				flex-grow 1
				width 0
			}

			&::before {
				content ""
				position absolute
				inset 0
				background var(--hover-color)
				opacity 0
				transition opacity .2s
				pointer-events none
			}
			&:hover, &:focus-within {
				&::before {
					opacity 1
				}
			}
		}
	}

	//// RIGHT COLUMN
	/ {
		.columns-area__panels__pane--navigational {
			@media (min-width responsiveW1) {
				if spaceBetween {
					.columns-area__panels__pane__inner {
						&::before, &::after {
							content ""
							position absolute
							inset -100px -10px
							background var(--color-bg-ambient)
							z-index -1
						}
						&::after {
							background var(--elevated-tint)
						}
					}
				}
			}
		}

		//// NAV PANEL
		.navigation-panel.navigation-panel {
			box-sizing border-box
			if sideHeader {
				height calc(100vh - var(--top) - 50px + var(--radius))
			}
			padding-bottom 10px
			margin 0
			border 0
			margin-top calc(0px - var(--radius))
			padding-top calc(10px + var(--radius))
			overflow hidden auto
			hr {
				display none
			}

			@media (min-width responsiveW2) {
				if sideHeader {
					padding-top calc(var(--radius) + 10px)
					margin-top calc(50px - var(--radius))
					.navigation-panel__logo {
						margin 0
						.column-link, hr {
							display none !important
						}
					}
				}
				if !sideHeader {
					margin-top calc(0px - var(--top))
					height 100vh
					padding-top var(--top)
				}
				.switch-to-advanced {
					border-radius var(--radius)
					margin-top 0
				}
			}
			/.column-link {
				border 0
				gap 12px
			}
			/.icon-with-badge__badge {
				display flex !important
				align-items center
				justify-content center
				padding 0 .3em !important
				width 2em
				height 2em
				min-width max-content
				border-radius 2em
				font-weight 600
				top -6px
				box-sizing border-box
			}
			@media (min-width mobileW) {
				/.column-link {
					flex-grow 100 !important
					display flex !important
					align-items center !important
					align-content center
					max-height 3em
					min-height 3em !important
					padding-block 0
					border-radius 100px
					position relative
					box-sizing border-box
					opacity .9
					overflow hidden
					background none !important
					&::before {
						content: "" !important;
						position absolute
						border-radius: 100px;
						width unset !important
						height unset !important
						inset 0px 0px !important
						opacity 0 !important
						background-color rgba(150,150,150,0.1)
						transition opacity .2s
					}
					&.active {
						opacity 1 !important
						font-weight 600
					}
					&:hover, &:focus {
						&:before {
							opacity 1 !important
						}
					}
				}
			}

			.trends__item {
				margin 0 !important
			}
		}
	}


	//// STATUSES
	/ {
		.scrollable > div:first-child > [tabindex="-1"]:last-child .status__wrapper {
			&::after {
				content unset
			}
		}
		{statuses-list} {
			overflow hidden
			contain paint inline-size
			position relative
			border-radius var(--panel-radius)
			border 0

			&.focusable {
				background none
			}
			// Hover
			@media (pointer fine) {
				&::before {
					content ""
					position absolute
					inset 0px !important
					height unset !important
					width unset !important
					pointer-events none
					transition background-color .2s
				}
				&:hover, &:focus-within {
					&::before {
						background-color var(--hover-color)
					}
				}
			}
		}
		.status:not(.status--first-in-thread) {
			border 0
		}
		.detailed-status
		.status {
			padding 16px
		}
		.status__info {
			.account__avatar, .status__avatar {
				max-width var(--avatar-size) !important
				max-height var(--avatar-size) !important
			}
		}
		.status__line {
			left calc(16px + (var(--avatar-size) / 2))
		}

		// STATUS REPLY
		.status--in-thread {
			@media (max-width 450px) {
				--avatar-size 34px
				.status__info ~ * {
					margin-inline-start calc(var(--avatar-size) + 10px)
					width calc(100% - (var(--avatar-size) + 10px))
				}
			}
		}

		// STATUS CONTENT
		.status__content {
			text-align unset !important
			line-height 1.5
			&.status__content--with-spoiler {
				overflow visible
				> p {
					margin-inline -100px
					padding-inline 100px
					overflow hidden
				}
				> p:first-child {
					margin-bottom 0
				}
			}
			p:empty {
				max-height 0
			}
			picture {
				display contents
			}
			.custom-emoji {
				display inline-block
				height var(--emoji-size) !important
				min-width var(--emoji-size) !important
				width auto !important
				margin -.2ex 0 .2ex

				if emojiZoom {
					@media (prefers-reduced-motion: no-preference) {
						/^[-1..-1] {
							transition transform 1s cubic-bezier(0,0.7,0,1)
							&:hover {
								transform scale(1.7)
								transition transform .4s cubic-bezier(0,0.7,0,1)
							}	
						}
					}
				}
			}
			// max-height to media
			& ~ [style*="aspect-ratio"] {
				max-height 80vh
			}
		}
		.status__quote .status__wrapper {
			margin: 0;
			max-width: unset;
		}

		// STATUS DIRECT
		.detailed-status__wrapper-direct, .status-direct, .status__wrapper-direct, .conversation {
			.status__content {
				position relative !important
				background var(--elevated-color)
				padding 12px 14px
				border-radius var(--radius-round)
				border-top-left-radius 6px
				box-sizing border-box
				margin-bottom 0
				overflow hidden !important
				max-width max-content
				.media-gallery {
					width 999px
					max-width 100% !important
				}
			}
		}
		.status__wrapper-direct:not(.detailed-status__wrapper-direct) {
			.status__prepend {
				position absolute
				contain strict
			}
		}

		// STATUS DETAILED
		.detailed-status {
			border 0
			padding-bottom 4px
		}
		.detailed-status__wrapper, .detailed-status {
			box-shadow var(--shadow)
			.status__content {
				min-height unset !important
			}
		}
		.detailed-status__wrapper {
			isolation isolate
			background none
			&::before {
				content ""
				position absolute
				inset 0
				background var(--color-bg-secondary) !important
				pointer-events none
				z-index -1
			}
			.detailed-status {
				box-shadow none
			}
		}

		.detailed-status__meta {
			margin-top 14px
			line-height 2
			> * {
				display inline-flex
				border 0 !important
				padding 0 !important
				margin-inline-end 8px
				&:not(:last-child) {
					&::after {
						content "·"
					}
				}
			}
		}

		// STATUS MEDIA
		{media} {
			box-shadow var(--shadow-low)
			border-radius var(--radius) !important
			margin-block 10px
			animation scaleIn .4s
			max-width unset !important
		}
		if collapseHidden {
			.media-gallery:has(.spoiler-button:not(.spoiler-button--minified)) {
				height 150px !important
				aspect-ratio unset !important
			}
		}
		.media-gallery__item {
			border-radius 0
			outline none
		}
		.spoiler-button--minified {
			button {
				padding 6px !important
				background rgba(0,0,0,0.2) !important
				if hideClickArea {
					&::after {
						content ""
						position absolute
						inset -50px
					}	
				}
				&:hover {
					background rgba(0,0,0,0.4) !important
				}
			}
			.icon {
				width 18px
				height 18px
			}
		}
		// link embeds
		.status-card {
			align-items stretch
			gap 0
			&:not(.horizontal) {
				border 1px solid var(--border-color) !important
			}
			&:not(.expanded) .status-card__image {
				overflow hidden
				img {
					border-radius 0
				}
			}
			/.status-card__content {
				margin-block auto
				padding 15px
			}
			/.status-card__host {
				font-size .85em
				line-height 1.5
				margin 0
			}
			/.status-card__title {
				font-size 1em
				margin-bottom 0
				line-height 1.4
			}
			/.status-card__description {
				line-height 1.4 !important
				margin 0
				@supports (-webkit-line-clamp 8) {
					display -webkit-box
					-webkit-line-clamp 8
					-webkit-box-orient vertical
					white-space unset
				}
			}
			/.status-card__author {
				margin-top 0.4em
				font-size .85em
			}
			&:hover {
				background-color var(--hover-color)
			}
		}
		.more-from-author {
			background none
			border 0
			padding-top 0
			border-radius var(--radius)
		}

		.audio-player {
			.video-player__seek {
				margin var(--radius)
			}
		}

		.hashtag-bar {
			margin-top 10px
			a, button {
				color var(--accent, #8c8dff)
				transition opacity .2s
				padding 5px 10px
			}
			a {
				position relative
				border-radius var(--radius-round)
				background var(--elevated-color)
				&::after {
					content ""
					position absolute
					inset 0
					background var(--elevated-color)
					border-radius inherit
					opacity 0
					transition opacity .2s
				}
				&:hover, &:focus {
					opacity 1
					&::after {
						opacity 1
					}
				}
			}
			button {
				padding-block 0
			}
		}


		// STATUS FOOTER
		.status__action-bar {
			flex-wrap wrap
			margin-top .4em
			margin-bottom -6px
			gap 0
			margin-inline-start -8px
			/.status__action-bar__button-wrapper {
				flex-grow 1
				max-width 55px
				min-width max-content
			}
			* {
				display flex !important
				justify-content center !important
				flex-grow 1 !important
			}
			.icon-button {
				margin 0
				&::before { // Increase the click area
					content ""
					position absolute
					inset -.5em
				}
			}
		}

		.status__action-bar, .detailed-status__action-bar, .picture-in-picture__footer {
			position relative
			z-index 2
			justify-content unset
			.icon-button {
				display inline-flex
				align-items center
				justify-content center
				padding .5em .4em !important
				border-radius var(--radius)
				position relative
				.icon-button__counter {
					width auto !important
				}
			}
			.icon-button--with-counter {
				padding-inline .7em !important
			}
		}
		.detailed-status__action-bar, .picture-in-picture__footer {
			padding-inline 15px !important
			gap 0
			.icon-button {
				flex-grow 1 !important
			}
			div {
				display flex
				justify-content center
				flex-grow 1
			}
		}

	}

	//// ITEMS
	/ {
		.item-list > article > div {
			position relative
			&::after {
				content ""
				position absolute
				bottom 0px
				inset-inline 0
				border-top 1px solid var(--border-color)
				pointer-events none
			}
		}
		+desktop() {
			.item-list > article > div {
				&::after {
					inset-inline calc(var(--radius) + 10px)
				}
			}
		}
		.account__wrapper {
			line-height 1.5
			/.account__contents {
				display flex
				flex-wrap wrap
				flex-grow 1
				gap 0 10px
			}
			/.display-name {
				margin-bottom 1px !important
			}
			/.account:not(.account--minimal) .display-name__account {
				display block
				width 300px
			}
			/.account__details {
				font-size .9em
				opacity .8
				width 100px
				flex-grow 1
				text-align end
				align-items center
				line-height 1.2
				&:has(.verified-badge) {
					> :not(.verified-badge) {
						display none
					}
				}
			}
			button:not(:hover):not(:focus) {
				background var(--elevated-color)
				color inherit
			}
		}
	}

	//// PAGES

	//// NOTIFICATIONS
	.notification-ungrouped {
		/.notification-ungrouped__header {
			margin-bottom 10px
		}
		.status__wrapper {
			margin-inline 0
			max-width unset
			&::before, &::after {
				content unset
			}
		}
	}
	.notification-group {
		padding 16px
	}
	.notification-group__main__additional-content {
		display none
	}

	//// EXPLORE
	/ {
		.trends__item, .story, .account-card {
			animation slideUpFade backwards .4s (.04s * 6) cubic-bezier(0,1,1,1)
			border-radius var(--radius)
			for row in 1..6 {
				&:nth-child({row}) {
					animation-delay .04s * row
				}
			}
		}
		.explore__links {
			padding 10px
			display flex
			flex-wrap wrap
			align-content flex-start
			> .dismissable-banner {
				margin -10px
				margin-bottom 10px
			}
			.story {
				margin-inline 0 !important
			}
			// / includes trends items in right sidebar
			/.trends__item {
				display flex !important
				margin-inline 0 !important
			}
			/.trends__item__name a {
				&::before {
					content ""
					position absolute
					inset 0
				}
			}
			/.trends__item__current {
				display none
			}
			/.trends__item__sparkline { 
				overflow visible !important
				pointer-events none
				svg {
					overflow visible !important
				}
				path:first-child {
					filter blur(8px)
				}
				path:last-child {
					mask linear-gradient(to left, black, black, transparent)
					-webkit-mask @mask
				}
				/.rtl & {
					transform scaleX(-1)
				}
			}

			.trends__item {
				margin 7.5px !important
				padding 25px !important
				box-shadow var(--shadow-med)
				width 200px
				background var(--elevated-color)
				flex-grow 1
				&::after {
					content unset !important
				}
				a {
					font-size 1.4em
					line-height 1.7em
					&::before {
						content ""
						position absolute
						inset 0
					}
				}
				.trends__item__sparkline {
					height 100%
					svg {
						height 100%
						float right
						overflow visible !important
						position relative

						path {
							display unset !important
							transition transform 1s
							&:first-child {
								transform-origin center
							}
						}
					}
				}
				&:hover, &:focus-within {
					svg path:first-child {
						transform scale(2)
					}
				}
			}
			.story {
				width 100%
				margin 0
			}
		}
	}
	//// PROFILE
	/ {
		.account__header {
			overflow visible
		}
		.follow-request-banner {
			margin-bottom -100px
			padding-bottom 120px
		}
		.account__header__image {
			height 0
			padding-bottom 35%
			if sideHeader {
				border-radius var(--panel-radius) var(--panel-radius) 0 0
			}
			position sticky
			top calc(0px - var(--panel-radius))
			overflow clip
			img {
				position absolute
			}
			.account__header__info {
				position absolute
				z-index 2
				> span {
					position sticky
					top var(--radius)
				}
			}
		}
		.account__header__bar {
			position relative
			z-index 2
			border 0
			padding-inline 20px
			@media (max-width mobileW) {
				padding-inline 15px
			}
			border-radius var(--radius) var(--radius) 0 0
			margin-top calc(0px - var(--radius)) !important
			display flex
			flex-direction column
			background var(--color-bg-ambient)
			isolation isolate

			&::before {
				content ""
				background var(--elevated-tint)
				position absolute
				inset 0
				pointer-events none
			}

			&::after {
				content ""
				position absolute
				inset-inline 0
				height 150px - 55px
				background inherit
				z-index -1
				border-radius var(--radius)
				mask linear-gradient(to bottom, transparent, black)
			}

			/.account__header__tabs {
				overflow visible !important
				align-items flex-end
				padding 0
				// padding-top 10px
				height unset !important
				margin-top -55px !important
				&::before { // Add blur below the account header
					content ""
					position absolute
					top -55px
					inset-inline 0
					height 150px
					backdrop-filter blur(40px)
					filter brightness(1.1)
					pointer-events none
					opacity .7
					z-index -2
					clip-path inset(55px 0 0 0 round var(--radius));
				}
				& ~ div {
					z-index 2
				}
			}
			.avatar {
				margin-inline-start 0 !important
				overflow visible !important
				position relative
				margin-top 20px
				.account-role {
					position absolute
					bottom 0
					left 110%
					border-radius var(--radius)
				}
			}
			.account__avatar {
				border 0
				box-shadow var(--shadow)
				background none
				background-size cover !important
			}
		}
		.account__header__tabs__name {
			margin-bottom 0
			padding 0
			margin-top 16px
			h1 {
				display flex
				flex-wrap wrap
				white-space unset
				gap 0 .4em
				font-weight 600
			}
		}
		.account__header__extra {
			margin-top 8px
		}

		// account fields
		.account__header__fields, .account__header__account-note {
			display flex
			flex-wrap wrap
			gap 2px
			background none
			border-radius var(--radius) !important
			overflow hidden
			max-width max-content
			border 0 !important
		}
		.account__header__fields {
			dl {
				display inline
				border-radius 0
				overflow hidden
				&:not(.verified) {
					background-color var(--elevated-color)
				}
				border 0 !important
				padding 8px 12px !important
				margin 0 !important
				position relative
				overflow hidden
				flex-grow 1
				dt {
					all unset !important
					color unset !important
					opacity .9 !important
				}

				dd {
					padding 0
					white-space unset
					max-height unset
					text-align unset
					& > span > a:first-child:last-child, .h-card:first-child:last-child a {
						&::after {
							content ""
							position absolute
							inset 0
							background-color var(--hover-color)
							opacity 0
							transition opacity .2s
						}
						&:hover:after, &:focus:after {
							opacity 1
						}
					}
					&.verified {
						overflow visible !important
						border 0
						background none
						a {
							&::before, &::after {
								content ""
								position absolute
								inset 0
								background currentcolor
								opacity .2
							}
							&::after {
								background linear-gradient(20deg, currentcolor, transparent) !important
								opacity .2 !important
								z-index -2
							}
						}
					}
				}
			}
		}
		.account__header__account-note {
			position relative
			font-size .9em
			max-width unset
			padding .5em 10px !important
			margin-block -5px 10px
			margin-inline -10px !important
			border-radius var(--radius) !important
			&::after {
				content ""
				position absolute
				bottom 0
				inset-inline 10px
				border-top 1px solid var(--border-color)
				transition opacity .2s
			}
			&:focus-within::after {
				opacity 0
			}
			label {
				z-index 2
				margin 0
				pointer-events none
				font-size inherit
			}
			textarea {
				margin -100px !important
				padding 100px !important
				padding-inline-end .7em !important
				margin-inline-end -.7em !important
				box-sizing content-box
				width 100%
				font-size inherit
				transition background .2s
				&::placeholder {
					font-weight 600
				}
			}
		}

		// GALLERY
		.account-gallery__container {
			border-radius var(--radius)
			overflow clip
			padding 0
			margin 4px
			gap 4px
		}
	}
	//// FOLLOW REQ'S
	/ {
		.account-authorize__wrapper {
			background var(--elevated-color)
			border-radius var(--radius)
			overflow hidden
			flex-grow 1
			margin 10px
			@media (max-width mobileW) {
				margin-inline 10px	
			}
			/.layout-multiple-columns & {
				margin-inline 10px
			}
			display flex
			flex-direction column
			.account-authorize {
				padding 20px 15px 10px
			}
			.detailed-status__display-name {
				margin-bottom 10px !important
			}
			.account--panel {
				margin-top auto
				border-bottom  0
				padding-inline 15px
				gap 10px
				background none
			}
			br {
				display block
			}
			p {
				margin-bottom .2em
			}
			.account--panel__button:first-child .icon-button {
				&:not(:hover):not(:focus) {
					background var(--elevated-color)
				}
			}
			.icon-button {
				width 100% !important
				padding 10px
				height unset !important
			}
		}
	}
	//// ABOUT
	/ {
		.about__meta {
			border-radius var(--radius)
		}
		.account--minimal {
			max-width 100%
		}
		.about__section {
			margin 30px -20px
			padding-inline 20px
			contain inline-size paint
			&.active .about__section__title {
				margin-inline -20px
				border-radius 0
				border-inline 0
				border-bottom 0
			}
		}
		.about__section__title {
			position sticky
			top -1px
			z-index 2
			background var(--background-color-tint)
			border 1px solid var(--border-color)
			border-radius var(--radius)
			overflow hidden
			transition margin .2s cubic-bezier(0,1,0,1), border-radius .2s

			&::after {
				content ""
				position absolute
				inset 0
				background var(--elevated-tint)
				backdrop-filter blur(10px)
				z-index -1
			}
		}
		.about__section__body {
			border 0
			padding 0
			animation slideDownFade .4s .1s backwards cubic-bezier(0, 1, 0, 1.2)
		}
	}
	//// SEARCH
	/ {
		.explore__search-results {
			border 0
		}
		.search-results__section__header {
			margin 0px 0px 10px
			color unset
			background none
			padding-inline 25px
			font-weight 600
		}
		.search-results__section {
			border 0
			margin-bottom 20px
		}
	}

	//// SETTINGS PAGE
	/ {
		/.admin-wrapper {

			.content__heading {
				margin-bottom 2em
			}

			h4 {
				margin 0
				border-bottom 0
			}

			form > h4 {
				margin-top 2em !important
				border-bottom 0 !important
				margin-bottom 0 !important
			}

			.lead {
				margin-bottom 15px
			}
			.flash-message, 
			.applications-list__item, .filters-list__item {
				border-radius var(--radius)
				border 0
				overflow clip
			}
			.fields-row {
				margin-inline 0
				// gap 1em
				border-radius var(--radius)
				overflow clip
				padding-top 0
				gap 2px
				display flex
				flex-wrap wrap
			}
			.fields-group:not(.fields-row__column), .fields-row {
				margin-bottom 1em !important
			}
			.fields-row > .fields-row__column {
				max-width unset
				width 300px
				// height max-content
				border-radius 0 !important
				display flex
				flex-direction column
				flex-grow 1
				margin 0 !important
				.fields-group {
					border-radius 0 !important
					margin 0 !important
				}
				.with_block_label {
					display flex
					flex-direction column
					height 100%
					> .label_input {
						display flex
						flex-direction column
						flex-grow 1
						> textarea {
							min-height 300px
							flex-grow 1
						}
					}
				}
				> :last-child {
					flex-grow 1
					align-items flex-start
					border 0
				}
				& > :not(:first-child):not(:last-child) {
					padding-block .5em !important
					margin-block -3px
				}
			}

			:not(.fields-row__column) > .fields-group, 
			.fields-row > *, 
			.label_input > ul, 
			.label_input__wrapper > ul, 
			.with_block_label.radio_buttons .label_input
			{
				border-radius var(--radius)
				overflow hidden
				padding 0
				display flex
				flex-direction column
				gap 2px
				> * {
					background-color var(--elevated-color)
					padding .8rem
					margin-block 0px
					position relative
					border-radius 0 !important
					overflow hidden
					&::after {
						content ""
						position absolute
						inset 0
						background-color var(--hover-color)
						z-index -1
						opacity 0
						transition opacity .2s
					}
					&:hover, &:focus-within {
						&::after {
							opacity 1
						}
					}
				}
				:not(.input.with_block_label) > label {
					&::before {
						content ""
						position absolute
						inset -900px
					}
				}
			}
			.label_input__wrapper {
				> :not([type="checkbox"]):not(label) {
					margin-top 4px
				}
			}
			.label_input {
				position relative
			}
			label {
				margin 0 !important
				display flex
				align-items center
				padding 0 !important
				input {
					margin 0
					margin-inline-end 10px !important
					position static !important
				}
			}
			input, .select {
				border-radius var(--radius) !important
				z-index 2
			}
			.radio {
				flex-grow 1
				&:not(:last-child) {
					margin-bottom 0 !important
				}
			}
			.hint:last-child {
				margin-bottom 0 !important
			}

			.input.with_block_label {
				> .row {
					flex-wrap wrap
					margin 0
					> .string {
						padding 0
						width 100%
						margin 0
						&:first-child input {
							border-radius var(--radius) var(--radius) 0 0 !important
						}
						&:last-child input {
							border-radius 0 0 var(--radius) var(--radius) !important
						}
					}
					&:not(:last-child) {
						margin-bottom 8px
					}
				}
			}

			li.checkbox {
				flex-grow 1
				overflow hidden
			}

			ul {
				flex-direction row !important
				flex-wrap wrap
				gap 2px
				flex-grow 1
			}
			li.checkbox {
				flex-basis 45%
			}
			.spacer {
				border-top 1px solid var(--border-color) !important
			}
		}
		/.batch-table label {
			padding-inline-start 20px !important
		}
		.batch-table, .table, :not(.batch-table__row__content) > table {
			overflow clip
			border-radius var(--radius)
			border-spacing 0 2px
			border-collapse separate
			/.batch-table__toolbar, /.batch-table__row, tr > * {
				border 0
				margin-bottom 2px !important
			}
			td, th, /.batch-table__row {
				position relative
			}
			tr {
				> td, > th {
					// padding-block 0
					> div > span {
						padding-inline .7em
						display inline-block
					}
				}
			}
			/.keyboard-shortcuts {
				padding 0
				margin-top -4px
				table {
					width 100%
					border-radius 0
				}
				td {
					padding .7em
				}
			}

			/.batch-table__row, th, > tbody > tr > td, tfoot td {
				background var(--elevated-color) !important
				vertical-align middle
				&::after {
					content ""
					position absolute
					inset 0 0
					background var(--hover-color)
					opacity 0
					transition .2s
					pointer-events: none
				}
				&:hover, &:focus-within {
					&::after {
						opacity 1
					}
				}
				> a:first-child:last-child {
					margin 0
					width 100%
					padding .5em
				}
			}
			th, tr {
				&:hover {
					td, th {
						&:not([rowspan])::after {
							opacity 1 !important
						}
					}
				}
				[rowspan] {
					&:hover {
						& ~ td::after {
							opacity 0 !important
						}
					}
					&::after {
						inset-inline -900px
					}
				}
			}

		}
	}

	//// ADVANCED VIEW
	/ {
		.layout-multiple-columns.layout-multiple-columns {
			--column-header-height: 45px;
			.column-header, .column-header button {
				background none
			}
			.column-header, .scrollable, .column-back-button, .account__header__image {
				border-radius 0 !important
				gap 0 !important
			}
			.columns-area {
				background none !important
				height 100%
				> div {
					border 0 !important
					padding 0 !important
					&:not(.drawer):not(:last-child) {
						margin-inline-end 2px !important
					}
					&.column {
						flex-grow 1
						max-width 600px
					}
					&:first-child {
						margin-inline-start auto !important
					}
					&:last-child {
						margin-inline-end auto !important
					}
				}
			}

			.drawer.drawer {
				padding-top 15px !important
				overflow clip
				flex-grow 1
				max-width 350px
				/.drawer__header {
					border-radius var(--radius-round)
					background var(--elevated-color)
					margin-inline 15px
					overflow hidden
					border 0 !important
					a {
						border 0
						&:first-child {
							padding-inline-start 15px !important
						}
						&:last-child {
							padding-inline-end 15px !important
						}
					}
				}
				.search {
					z-index 2
					margin-inline 15px
					margin-bottom 0
				}
				& > .drawer__pager {
					border 0
					overflow visible !important
				}
				.drawer__inner:not(.darker)  {
					margin-top -20px
					padding-top 30px
					height unset
					bottom 0
				}
				.drawer__inner__mastodon {
					margin-inline -6px
					z-index -1
				}
			}
			.compose-form {
				margin-inline 5px
			}
			.drawer__inner:not(.darker), .drawer__inner__mastodon {
				background-color transparent !important
			}
			.darker {
				background-color var(--color-bg-secondary-solid)
				border-radius var(--radius) var(--radius) 0 0
				top 10px
				width unset
				inset-inline 2px
			}

			.column {
				background none
				&::after {
					content ""
					position absolute
					inset 0
					top var(--column-header-height)
					background var(--color-bg-ambient)
					z-index -1
				}
				&::before, &::after {
					top var(--column-header-height)
					border-radius var(--radius) var(--radius) 0 0
				}
			}
			.column-back-button,
			.column-header__wrapper {
				&.active {
					box-shadow none
					&::before {
						inset-inline var(--radius)
					}
				}
				.column-header {
					border 0 !important
					height var(--column-header-height)
				}
				.column-header__buttons {
					height 100%
				}
				svg {
					height 1.4em
				}
				& + .scrollable.scrollable {
					border-radius var(--radius) var(--radius) 0 0 !important
					overflow-y scroll
				}
			}

			.getting-started__trends {
				padding 0px 20px
			}


		}
	}

	//// GETTING STARTED PAGE
	/ {
		.column[aria-labelledby="Misc"] > .scrollable,
		.column[aria-labelledby="Getting-started"] > .scrollable
		.getting-started {
			position relative
			padding 5px 10px !important
			.getting-started__wrapper { 
				background none
			}
			.column-link, .column-subheading {
				border 0 !important
				padding 20px !important
				background none
			}
			.getting-started__footer {
				padding-inline 20px
				a span {
					font-size 1.1em !important
					line-height 2
				}
			}
		}
	}


	//// TABLET
	/ {
		@media (min-width mobileW) and (max-width responsiveW2) {
			.columns-area__panels__pane--navigational {
				margin-top 50px
			}
			.navigation-panel__menu {
				padding 10px
			}
			.navigation-panel__compose-button {
				margin-block 10px
				margin-inline 6px
				padding-inline 16px
				border-radius 100px
				justify-content center
			}
			.navigation-panel__sign-in-banner {
				display block !important
				margin-block 10px
				padding-block 10px
				border-block 1px solid var(--border-color)
			}
		}
	}


	//// MOBILE
	/ {
		@media (max-width mobileW - 1) {
			.tabs-bar__wrapper {
				background var(--color-bg-primary)
				backdrop-filter none
				&::before {
					content ""
					position absolute
					inset 0
					background var(--elevated-tint)
					z-index -1
				}
			}
			.ui__navigation-bar {
				border 0
				background var(--color-bg-tertiary)
			}
			.ui__navigation-bar {
				color var(--on-input-color)
				height 70px
				padding-inline 5px
			}
			.ui__navigation-bar__item {
				position relative
				border 0 !important
				padding-block 12px
				gap 6px
				opacity .7
				&::before {
					content ""
					position absolute
					width 60px
					top 10px 
					bottom 30px
					background currentColor
					border-radius 100px
					z-index -1
					opacity 0
					transform scaleX(.8)
					transition opacity .2s, transform .2s
				}
				&::after {
					content attr(aria-label)
					font-size 12px
					max-width 100%
					padding-inline 4px
					text-overflow ellipsis
					overflow hidden
					white-space nowrap
					box-sizing border-box
				}
				&.active {
					opacity 1
					&::before {
						opacity .15
						transform none
					}
				}
			}
			
			.columns-area__panels__pane--navigational {
				z-index 100
				padding 40px 10px
				padding-top 60vh
				min-width unset
				overflow-y scroll
				box-sizing border-box
				overscroll-behavior contain
				visibility hidden
				box-shadow unquote("0 0 0 200px rgb(from var(--color-bg-overlay) r g b/50%)")
				transition visibility 0s 0.2s
				.columns-area__panels__pane__inner {
					width 100%
					position relative
					inset unset
					height max-content
					border-radius 24px
					margin-top auto
					transform translateY(100vh) !important
					transition transform .2s cubic-bezier(0,0,1,0), opacity 1s
				}
				.navigation-panel__compose-button {
					display none
				}
				html:not(:has(.sign-in-banner)) & {
					[href="/home"],
					[href="/explore"],
					[href="/notifications"] {
						display none
					}
				}
				.navigation-panel {
					display contents
				}
				.navigation-panel__menu {
					padding 10px 5px !important
				}
				&.columns-area__panels__pane--overlay {
					visibility visible
					transition none
					// for some reason transitioning the .pane__inner stutters
					// a ton even with !important, so we're just doing an animation
					// on the container instead !
					animation slideUpFadeBig .3s cubic-bezier(0,0.9,0,1.05) forwards
					.columns-area__panels__pane__inner {
						transform none !important
						transition none
					}
				}
			}
		}
	}


	//// POPUPS
	/ {
		#hover-card,
		.dropdown-menu {
			border-radius var(--radius)
			animation scaleIn .2s cubic-bezier(0,0,0,1.1)
		}
		.dropdown-menu__container__list {
			overflow hidden auto
			border-radius var(--radius)
			max-height 70vh
		}
		.dropdown-menu__item {
			overflow hidden
			a {
				padding .7em 1em !important
				transition background-color .2s, color .2s
				min-width 150px
			}
		}
		.dropdown-menu__separator {
			margin 0 !important
		}

		.interaction-modal {
			border-radius var(--radius)
			overflow-y auto
			box-sizing border-box
			width 700px
			text-align center
		}
		.interaction-modal__choices {
			gap 10px
			display flex
			flex-wrap wrap
			.interaction-modal__choices__choice {
				max-height 50vh
				overflow-y auto
				border 1px solid var(--border-color)
				padding 24px
				margin 0
				border-radius var(--radius)
				transition background .2s
				position relative
			}
			.prose:last-child {
				margin-bottom 0
			}
			h3 {
				margin-bottom 10px
			}
		}

		.modal-root__container {
			animation bounceIn .7s
		}
		.modal-root__modal {
			@media (max-width mobileW) {
				margin-top auto
				max-width 100%
				border-radius var(--radius) var(--radius) 0 0
			}
		}

		.picture-in-picture {
			z-index 101
			.picture-in-picture__header {
				border-radius var(--radius) var(--radius) 0 0
			}
			{media} {
				--radius 0
				margin 0 !important
			}
			.picture-in-picture__footer {
				border-radius 0 0 var(--radius) var(--radius)
			}
		}
	}

	/// ALT TEXT MODAL
	/ {
		.modal-root__modal:has(.focal-point) {
			width unset
			max-width 90vw
			.dialog-modal__content {
				overflow hidden
				display flex
				flex-direction column
			}
			.dialog-modal__content__preview {
				padding 0 !important
				min-height 0
				max-width 100%
				img {
					max-width 100% !important
					max-height 100% !important
					border-radius 0
					max-height unset
					min-height 0
				}
			}
			.focal-point__reticle {
				transition box-shadow .2s;
			}
			.focal-point {
				min-height 0 !important
				&:not(:hover) .focal-point__reticle {
					box-shadow none
				}
			}
		}
		@media screen and (max-width: 630px) {
			
		}
	}

	//// EMOJI PICKER
	/ {
		// This is most likely temporary as the picker may be rewritten or unstylable in a later mastodon update
		.emoji-picker-dropdown__menu {
			border-radius var(--radius)
			overflow hidden
			resize both
			width 400px
		}
		.emoji-mart {
			display flex !important
			flex-direction column !important
			width 100% !important
			height 100% !important
		}
		.emoji-mart-scroll {
			flex-grow 1
			max-height unset !important
		}
		.emoji-mart-bar {
			order 2
		}
		.emoji-mart-category-list {
			overflow visible !important
			display grid
			grid-template-columns repeat(auto-fill, minmax(calc(20px + 6%), 1fr))
			li {
				display contents
			}
			button {
				position relative
				padding 0 !important
				padding-top 100% !important
				img, span {
					height calc(100% - 10px) !important
					width calc(100% - 10px) !important
					inset 5px
					position absolute !important
					transition transform .1s cubic-bezier(0,0,0,1)
				}

				&:hover {
					img, span {
						transform scale(1.2)
					}
				}
			}
		}
		.emoji-picker-dropdown__modifiers {
			top 16px
		}
	}

}

//// GLITCH-SOC FIXES
/ {
	/html[data-user-flavour="glitch"] #mastodon {
		// Compose Form
		.compose-form__highlightable {
			margin-bottom 50px !important
		}
		.compose-form__submit {
			position absolute
			right -12px
			top 100%
			margin-top 24px
			button {
				padding 10px 20px
			}
		}

		// GLITCH STATUSES
		.focusable[tabindex]:not(.notification-ungrouped) .full-width {
			margin-inline 0
		}
		.media-gallery__item > .media-gallery__preview {
			display unset
			opacity .5
		}

		.status__action-bar-spacer {
			min-width 5px
		}

		.status__relative-time {
			margin-inline auto 5px !important
			z-index 2
			flex-grow 0 !important
			min-width 5ch !important
			max-width unset !important
			justify-content flex-end
			time {
				display inline !important
			}
		}

		/.reactions-bar {
			width unset
			margin-top 8px
			button {
				border-radius 6px !important
				padding-block 2px
				.reactions-bar__item__emoji {
					width unset
					height 2em
					max-width 70px
					min-width @height
					.detailed-status & {
						max-width 400px
					}
				}
				&:not(.active) {
					border 1px solid var(--border-color)
					background none
				}
			}
			&:empty {
				display none
			}
			.emoji-picker-dropdown {
				align-self stretch
				button {
					align-self stretch
					height 100%
					aspect-ratio 1
				}
			}
		}


		// GLITCH-SOC OPTIONS

		.local-settings {
			max-height 700px !important
			width 100%
		}
		.glitch.local-settings__page {
			padding 20px
		}
		.local-settings__navigation {
			display flex
			flex-direction column
			padding 8px
			background none
			border-right 1px solid var(--border-color)
			width auto
			.local-settings__navigation__item:not(.close):not(.active) {
				background none
			}
			.local-settings__navigation__item {
				border 0
				flex-direction column
				padding-inline 8px
				span {
					font-size .8em
				}
			}
			[href="/settings/preferences"] {
				margin-block auto 10px
				border-radius var(--radius)
				border 1px solid var(--border-color)
			}
		}
	}

}
 
}