/* ----------------------------------------------------------------
	Mait.me redesign

	Loaded after style.css from head.php, so it overrides it.
	Landing pages keep their own styles and do not load this file.

	1. Tokens      - design values, change them here only
	2. Base        - fonts and text colours of the existing site
	3. Brand       - old brand colours in style.css mapped to tokens
	4. Buttons     - existing .btn classes
	5. Forms       - existing form fields
	6. Components  - new .m-* classes for redesigned pages
-----------------------------------------------------------------*/


/* ----------------------------------------------------------------
	1. Tokens
-----------------------------------------------------------------*/

:root {
	/* Fonts. Montserrat draws Cyrillic, the two main fonts do not have it. */
	--font-display: 'Bricolage Grotesque', 'Montserrat', sans-serif;
	--font-body: 'Instrument Sans', 'Montserrat', sans-serif;

	/* Brand */
	--accent: #F04F45;
	--accent-hover: #D9443B;
	--accent-gradient: linear-gradient(135deg, #E85A30, #F04F45);
	--accent-gradient-hover: linear-gradient(135deg, #D9502A, #E0443B);
	--accent-border: #FFD3CB;
	--accent-wash: #FFF6F2;
	--accent-tint: #FFF1ED;
	--accent-row: #FDF5EF;
	--accent-muted-text: #C08A80;
	--accent-dot: #FF5953;

	/* Text */
	--ink-900: #1A1614;
	--ink-700: #5C524B;
	--ink-600: #6E6259;
	--ink-500: #7A6E66;
	--ink-400: #8A7E76;
	--ink-300: #A0938B;

	/* Surfaces */
	--surface-card: #FFFFFF;
	--surface-page: #FBF8F5;
	--surface-sunken: #F5F0EB;
	--surface-hover: #F3EDE7;
	--surface-muted: #EDE9E5;
	--surface-muted-hover: #f7f7f7;

	/* Lines */
	--line-divider: #F2EBE4;
	--line-card: #EEE7E0;
	--line-control: #E7DFD8;
	--line-button-hover: #CFC3B9;
	--line-control-hover: #C9BCB2;
	--focus-ring: #ECE5DF;

	/* Destructive actions and errors */
	--danger: #B3261E;
	--danger-hover: #9A1F18;
	--danger-wash: #FFF8F7;

	/* Corners */
	--radius-button: 8px;
	--radius-field: 10px;
	--radius-card: 16px;

	/* Depth */
	--overlay: rgba(26, 22, 20, 0.45);
	--shadow-modal: 0 24px 60px rgba(26, 22, 20, 0.18);
	--overlay-sheet: rgba(26, 22, 20, 0.4);
	--shadow-sheet: 0 -12px 40px rgba(26, 22, 20, 0.16);
}


/* ----------------------------------------------------------------
	2. Base
-----------------------------------------------------------------*/

body {
	font-family: var(--font-body);
	color: var(--ink-900);
	background-color: var(--surface-page);
}

.main,
.main-bg {
	background: var(--surface-page);
}

.light-grey,
.animation-box {
	background-color: var(--surface-page);
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: -0.02em;
}

h5, h6,
.h5, .h6 {
	font-family: var(--font-body);
	font-weight: 600;
}

h1, h1 a,
h2, h2 a,
h3, h4,
.perex,
.a-black-under {
	color: var(--ink-900);
}

.long-text-font,
.font-sec,
.btn,
.btn.round,
.italic,
.stars,
.action-box li a,
.content-user-href,
.content-detail-user-href,
.navbar-nav > li > a,
#mobile_profile_menu li a,
.tooltip,
.popover {
	font-family: var(--font-body);
}

a,
.help-block a,
.field-icon {
	color: var(--accent);
}

a:hover, a:active, a:focus {
	color: var(--accent-hover);
}

.navbar-nav > li > a,
.navbar-default .navbar-nav > li > a,
.lang-select,
.lang-select span {
	color: var(--ink-500);
}

.navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover {
	color: var(--ink-900);
}

#mobile_profile_menu li a,
.dropdown-menu h5,
.dropdown-menu .radio label,
.emoji-comms button,
.post-more,
.canceled-small {
	color: var(--ink-500);
}

.dropdown-menu span,
#aboutme h6,
.entity-info-t {
	color: var(--ink-300);
}

.dropdown-menu,
.post-footer-grey,
.for_avatar_mess,
.chat .for_avatar img.avatar {
	border-color: var(--line-card);
}

.filter-menu li,
.ui-block-card .bottomborder,
.mem-plan hr {
	border-color: var(--line-divider);
}

.menu-svg,
.svg-ico .b {
	fill: var(--ink-500);
}

.svg-ico .c {
	stroke: var(--ink-500);
}

.svg-ico-btn .b {
	fill: var(--ink-500);
}

.stroke {
	stroke: var(--ink-500);
}

.search form,
.search input.form-control,
.search [type="text"].form-control,
.search input.form-control:focus,
.search input[type="text"]:focus,
.search [type="text"].form-control:focus {
	background-color: var(--surface-page);
}

.search svg .a {
	fill: var(--surface-page);
}

.search .btn-link {
	color: var(--ink-500);
}


/* ----------------------------------------------------------------
	3. Brand
-----------------------------------------------------------------*/

.maitreja-gradient,
.maitreja-gradient-2,
.mait-gradient,
.profile-photo-mem_monthly,
.premium-monthly-ico {
	background: var(--accent-gradient);
}

.profile-photo-mem,
.mem-recom,
.orange,
.label-info,
.nav-tabs > li.active > a span,
.nav-tabs > li > a:hover span,
.nav-tabs > li > a:focus:hover span,
.radio input[type="radio"]::before,
.radio-inline input[type="radio"]::before,
input[type="radio"]::before,
.checkbox input:checked + label,
.square-checkbox:hover + label::before,
.square-checkbox:checked + label::before,
.btn-secondary > .badge,
#calendar .fc-event,
.progress-bar {
	background-color: var(--accent);
}

.profile-photo-mem {
	background: var(--accent);
}

.checkbox input:checked + label,
.square-checkbox:hover + label::before,
.square-checkbox:checked + label::before,
.btn-secondary > .badge {
	background: var(--accent);
}

.orange-text,
.orange-dark-text,
.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:active,
.navbar-default .navbar-nav > .active > a:focus,
.mobile-second li a:hover,
.mobile-second li button:hover,
.mobile-second li a:focus,
.mobile-second li button:focus,
.mobile-second li.active a,
.dropdown-menu .commu.cm_active span,
.filter-menu li a.active,
.profile-stripe .active,
.profile-menu > .list-group-item.active,
.lead-btn:hover,
.a-black-under:hover,
.a-black-under:active,
.a-black-under:focus,
.checkbox label:after,
input:checked + label:after {
	color: var(--accent);
}

.orange-border,
.mem-plan-best,
#calendar .fc-event,
input[type="radio"]:checked::after,
.radio input[type="radio"]:checked::after,
.radio-inline input[type="radio"]:checked::after {
	border-color: var(--accent);
}

.menu-svg:hover,
.menu-svg:active,
.menu-svg-active,
.navbar-default .navbar-nav > li > a:hover .menu-svg,
.navbar-default .navbar-nav > li > a:focus .menu-svg,
.navbar-default .navbar-nav > li.open > a .svg-ico .b,
.navbar-default .navbar-nav > li.open > a:hover .svg-ico .b,
.navbar-default .navbar-nav > li.open > a:focus .svg-ico .b,
.navbar-header .open .dropdown-toggle .svg-ico .b,
.share-btn-icon .svg-ico-btn .b {
	fill: var(--accent);
}

.share-btn-icon:hover .svg-ico-btn .b,
.share-btn-icon:active .svg-ico-btn .b,
.share-btn-icon:focus .svg-ico-btn .b {
	fill: var(--accent-hover);
}

.active .svg-ico .c,
.svg-ico:active .c,
.svg-ico:hover .c {
	stroke: var(--accent);
}

.dot-falling,
.dot-falling::before,
.dot-falling::after {
	background-color: var(--accent);
	color: var(--accent);
}


/* ----------------------------------------------------------------
	4. Buttons

	Sizes stay as they are until each page is redesigned.
	Outlines use box-shadow so existing buttons do not change size.
-----------------------------------------------------------------*/

.btn {
	font-weight: 600;
}

.btn:hover {
	filter: none;
}

.btn-primary,
.btn-success,
.btn-success:active,
.btn-creative,
.btn-creative:active,
.btn-creative:focus,
.btn-warning {
	background: var(--accent-gradient);
	color: #fff;
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-success:hover,
.btn-success:focus,
.btn-creative:hover,
.btn-warning:hover,
.btn-warning:active,
.btn-warning:focus {
	background: var(--accent-gradient-hover);
	color: #fff;
}

button.maitreja-gradient:hover,
button.maitreja-gradient:active,
button.maitreja-gradient:focus,
a.maitreja-gradient:hover,
a.maitreja-gradient:active,
a.maitreja-gradient:focus {
	color: #fff;
}

/* Default: quiet actions, no border, grey fill on hover. */
.btn-default,
.btn-default:focus,
.btn-default.focus {
	border: 0;
	background-color: transparent;
	box-shadow: none;
	color: var(--ink-600);
	font-weight: 500;
}

.btn-default:hover,
.btn-default:active,
.btn-default:active:hover,
.btn-default:active:focus,
.open > .dropdown-toggle.btn-default,
.open > .dropdown-toggle.btn-default:hover,
.open > .dropdown-toggle.btn-default:focus {
	border: 0;
	background-color: var(--surface-sunken);
	box-shadow: none;
	color: var(--ink-600);
}

.btn-default.active,
.btn-default.active:hover,
.btn-default.active:focus {
	border: 0;
	background-color: var(--accent);
	box-shadow: none;
	color: #fff;
}

.btn-default.disabled,
.btn-default[disabled],
.btn-default.disabled:hover,
.btn-default[disabled]:hover,
.btn-default.disabled:focus,
.btn-default[disabled]:focus {
	background-color: transparent;
	box-shadow: none;
	color: var(--ink-600);
	opacity: 0.45;
}

.btn-default .svg-ico .b,
.btn-default .svg-ico-btn .b {
	fill: var(--ink-600);
}

.btn-default .svg-ico .c,
.btn-default .stroke {
	stroke: var(--ink-600);
}

/* Unpinned item: sits on top of a tile, so it needs its own background. */
.btn-pin.btn-default,
.btn-pin.btn-default:focus {
	background-color: var(--surface-muted);
}

.btn-pin.btn-default:hover,
.btn-pin.btn-default:active {
	background-color: var(--surface-muted-hover);
}

/* Secondary: neutral alternatives such as Cancel, Close, Message. */
.btn-secondary,
.light-grey .btn-secondary,
.footer a.btn-secondary {
	background-color: var(--surface-card);
	color: var(--ink-900);
	box-shadow: inset 0 0 0 1px var(--line-control);
}

.btn-secondary:hover,
.btn-secondary:active,
.btn-secondary:focus,
.light-grey .btn-secondary:hover,
.light-grey .btn-secondary:active,
.light-grey .btn-secondary:focus,
.footer a.btn-secondary:hover,
.footer a.btn-secondary:active,
.footer a.btn-secondary:focus,
.open > .dropdown-toggle.btn-secondary {
	background-color: var(--surface-page);
	color: var(--ink-900);
	box-shadow: inset 0 0 0 1px var(--line-button-hover);
}

.btn-secondary.disabled,
.btn-secondary[disabled],
.btn-secondary.disabled:hover,
.btn-secondary[disabled]:hover {
	background-color: var(--surface-sunken);
	color: var(--ink-500);
	box-shadow: inset 0 0 0 1px var(--line-control);
	opacity: 1;
}

.btn-secondary.btn-border {
	border-color: var(--line-control);
	box-shadow: none;
}

.btn-secondary.btn-border:hover,
.btn-secondary.btn-border:active,
.btn-secondary.btn-border:focus {
	border-color: var(--line-button-hover);
	box-shadow: none;
}

/* Here btn-secondary marks a pinned item, so it stays coral. */
.btn-pin.btn-secondary,
.btn-pin.btn-secondary:hover,
.btn-pin.btn-secondary:active,
.btn-pin.btn-secondary:focus {
	background-color: var(--accent-wash);
	color: var(--accent);
	box-shadow: inset 0 0 0 1px var(--accent-border);
}

.btn-danger {
	background-color: var(--danger);
	color: #fff;
}

.btn-danger:hover,
.btn-danger:active,
.btn-danger:focus {
	background-color: var(--danger-hover);
	color: #fff;
}

.btn.active {
	background: var(--accent);
	box-shadow: none;
	color: #fff;
}


/* ----------------------------------------------------------------
	5. Forms

	Field sizes stay as they are until each page is redesigned.
-----------------------------------------------------------------*/

textarea,
textarea.form-control,
input.form-control,
input[type=text],
input[type=password],
input[type=email],
input[type=number],
[type=text].form-control,
[type=password].form-control,
[type=email].form-control,
[type=tel].form-control,
[contenteditable].form-control,
select,
select.form-control {
	border-color: var(--line-control);
	border-radius: var(--radius-field);
	background-color: var(--surface-card);
	color: var(--ink-900);
}

textarea:hover,
textarea.form-control:hover,
input.form-control:hover,
input[type="text"]:hover,
input[type="password"]:hover,
input[type="email"]:hover,
input[type="number"]:hover,
select:hover,
select.form-control:hover {
	border-color: var(--line-control-hover);
}

textarea:focus,
textarea.form-control:focus,
input.form-control:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="number"]:focus,
[type="text"].form-control:focus,
[type="password"].form-control:focus,
[type="email"].form-control:focus,
[type="tel"].form-control:focus,
[contenteditable].form-control:focus,
select:focus,
select.form-control:focus {
	border-color: var(--ink-900);
	background-color: var(--surface-card);
	box-shadow: 0 0 0 3px var(--focus-ring);
}

.has-error input:not([type="checkbox"]),
.has-error .form-control,
.has-error input.form-control[readonly],
.has-error input[type="text"][readonly],
.has-error [type="text"].form-control[readonly],
.has-error input:not([type="checkbox"]):focus,
.has-error .form-control:focus {
	border-color: var(--danger);
	background-color: var(--danger-wash);
	box-shadow: none;
}

.has-error .help-block,
.has-error .control-label {
	color: var(--danger);
}


/* ----------------------------------------------------------------
	6. Components
-----------------------------------------------------------------*/

/* Buttons: one primary per screen or modal. */
.m-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	box-sizing: border-box;
	height: 40px;
	padding: 0 16px;
	border: 1px solid transparent;
	border-radius: var(--radius-button);
	background: transparent;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
}
.m-btn:hover,
.m-btn:active,
.m-btn:focus {
	text-decoration: none;
}
.m-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var(--focus-ring);
}
.m-btn:disabled,
.m-btn.disabled {
	cursor: default;
	opacity: 0.45;
}

.m-btn-sm {
	gap: 6px;
	height: 32px;
	padding: 0 12px;
	font-size: 13px;
}
.m-btn-lg {
	height: 44px;
	padding: 0 20px;
}

.m-btn-primary,
.m-btn-primary:focus {
	border: 0;
	background: var(--accent-gradient);
	color: #fff;
}
.m-btn-primary:hover,
.m-btn-primary:active {
	background: var(--accent-gradient-hover);
	color: #fff;
}
.m-btn-primary:disabled,
.m-btn-primary.disabled {
	background: var(--accent-gradient);
}

.m-btn-secondary,
.m-btn-secondary:focus {
	border-color: var(--line-control);
	background: var(--surface-card);
	color: var(--ink-900);
}
.m-btn-secondary:hover,
.m-btn-secondary:active {
	border-color: var(--line-button-hover);
	background: var(--surface-page);
	color: var(--ink-900);
}
.m-btn-secondary:disabled,
.m-btn-secondary.disabled {
	border-color: var(--line-control);
	background: var(--surface-sunken);
	color: var(--ink-500);
	opacity: 1;
}

.m-btn-tertiary,
.m-btn-tertiary:focus {
	border-color: var(--accent-border);
	color: var(--accent);
}
.m-btn-tertiary:hover,
.m-btn-tertiary:active {
	background: var(--accent-wash);
	color: var(--accent);
}
.m-btn-tertiary:disabled,
.m-btn-tertiary.disabled {
	background: transparent;
}

.m-btn-text,
.m-btn-text:focus {
	padding: 0;
	border: 0;
	color: var(--accent);
}
.m-btn-text:hover,
.m-btn-text:active {
	color: var(--accent-hover);
}

/* Default: quiet icon + label actions under posts. */
.m-btn-default,
.m-btn-default:focus {
	padding: 0 10px;
	border: 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-600);
}
.m-btn-default:hover,
.m-btn-default:active {
	background: var(--surface-sunken);
	color: var(--ink-600);
}
.m-btn-default:disabled,
.m-btn-default.disabled {
	background: transparent;
}
.m-btn-default.m-btn-sm {
	padding: 0 8px;
}
.m-btn-default.m-btn-lg {
	padding: 0 12px;
	font-size: 14px;
}

/* Destructive: only inside a confirmation. */
.m-btn-destructive,
.m-btn-destructive:focus {
	border: 0;
	background: var(--danger);
	color: #fff;
}
.m-btn-destructive:hover,
.m-btn-destructive:active {
	background: var(--danger-hover);
	color: #fff;
}
.m-btn-destructive:disabled,
.m-btn-destructive.disabled {
	background: var(--danger);
}

.m-btn-icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-field);
	color: var(--ink-500);
}
.m-btn-icon:hover,
.m-btn-icon:active {
	background: var(--surface-hover);
	color: var(--ink-500);
}
.m-btn-icon.m-btn-sm {
	width: 36px;
	height: 36px;
}

/* Fields: label and counter above, helper or error below. */
.m-field {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-bottom: 18px;
}
.m-field-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}
.m-label {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-900);
}
.m-required {
	margin-left: 2px;
	color: var(--accent);
}
.m-counter {
	font-size: 12px;
	color: var(--ink-300);
}
.m-help {
	margin: 0;
	font-size: 12px;
	color: var(--ink-500);
}
.m-error {
	margin: 0;
	font-size: 12px;
	color: var(--danger);
}

/* Doubled class beats the input[type=text] rules in style.css. */
.m-input.m-input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--line-control);
	border-radius: var(--radius-field);
	outline: none;
	background-color: var(--surface-card);
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 16px;
	color: var(--ink-900);
}
textarea.m-input.m-input {
	min-height: 120px;
	padding: 12px 14px;
	line-height: 1.6;
	resize: vertical;
}
select.m-input.m-input {
	padding-right: 38px;
	-webkit-appearance: none;
	appearance: none;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%237A6E66' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") calc(100% - 14px) center no-repeat var(--surface-card);
	cursor: pointer;
}
.m-input.m-input::placeholder {
	color: var(--ink-300);
}
.m-input.m-input:hover {
	border-color: var(--line-control-hover);
}
.m-input.m-input:focus {
	border-color: var(--ink-900);
	box-shadow: 0 0 0 3px var(--focus-ring);
}
.m-input.m-input:disabled {
	border-color: var(--line-control);
	background-color: var(--surface-sunken);
	color: var(--ink-500);
}
.m-input.m-input.m-input-error,
.m-input.m-input.m-input-error:focus {
	border-color: var(--danger);
	background-color: var(--danger-wash);
	box-shadow: none;
}

/* Form actions: the primary button waits at 40% until the form is valid. */
.m-form-actions .m-btn-primary:disabled,
.m-form-actions .m-btn-primary.disabled {
	opacity: 0.4;
}

/* Cards */
.m-card {
	border: 1px solid var(--line-card);
	border-radius: var(--radius-card);
	background: var(--surface-card);
}

/* Modals */
.m-modal-overlay {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--overlay);
}
.m-modal {
	display: flex;
	flex-direction: column;
	gap: 20px;
	box-sizing: border-box;
	width: 440px;
	max-width: 100%;
	padding: 24px;
	border-radius: var(--radius-card);
	background: var(--surface-card);
	box-shadow: var(--shadow-modal);
}
.m-modal-title {
	margin: 0 0 8px;
	font-family: var(--font-display);
	font-size: 22px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--ink-900);
}
.m-modal-text {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--ink-700);
}
.m-modal-actions {
	display: flex;
	justify-content: flex-end;
	gap: 10px;
	padding-top: 4px;
}
@media (max-width: 767px) {
	/* Stacked on mobile, main action on top. */
	.m-modal-actions {
		flex-direction: column-reverse;
	}
	.m-modal-actions .m-btn {
		width: 100%;
		height: 44px;
		padding: 0 20px;
	}
}

/* Create menu: rows shared by the desktop dropdown and the mobile sheet. */
.dropdown-menu.create-new-menu {
	background: var(--surface-card);
}
.dropdown-menu.create-new-menu .create-new-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--line-divider);
}
.dropdown-menu.create-new-menu h4 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink-900);
}
.dropdown-menu.create-new-menu .create-new-item + .create-new-item {
	border-top: 1px solid var(--line-divider);
}
.dropdown-menu.create-new-menu .create-new-item > a {
	display: flex;
	align-items: center;
	gap: 12px;
	border-radius: 0;
	white-space: normal;
}
.dropdown-menu.create-new-menu .create-new-item > a:hover,
.dropdown-menu.create-new-menu .create-new-item > a:focus,
.dropdown-menu.create-new-menu .create-new-item > a:active {
	background: var(--surface-page);
}
.dropdown-menu.create-new-menu .create-new-ico {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--radius-field);
	background: var(--accent-tint);
	color: var(--accent);
}
.dropdown-menu.create-new-menu .create-new-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.dropdown-menu.create-new-menu h5 {
	margin: 0;
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-900);
}
.dropdown-menu.create-new-menu .create-new-text span {
	font-size: 13px;
	line-height: 1.4;
	color: var(--ink-500);
	text-wrap: pretty;
}

/* Create menu: desktop dropdown. */
.navbar-nav > li > .dropdown-menu.create-new-menu {
	right: -8px;
	left: auto;
	width: 380px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line-card);
	border-radius: 12px;
	box-shadow: var(--shadow-modal);
}
.navbar-nav > li > .dropdown-menu.create-new-menu .create-new-head {
	padding: 14px 16px;
}
.navbar-nav > li > .dropdown-menu.create-new-menu h4 {
	font-size: 16px;
	letter-spacing: -0.01em;
}
.navbar-nav > li > .dropdown-menu.create-new-menu .create-new-item > a {
	padding: 13px 16px;
}

/* Create menu: mobile bottom sheet. The spread shadow dims the page. */
.navbar:has(.block_createnew_btn_mobile.open),
.navbar:has(.notifications-mobile.open) {
	z-index: 1040;
}
#create-new-dropdown {
	position: fixed;
	top: auto;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	max-height: 85vh;
	margin: 0;
	padding: 8px 0 calc(28px + env(safe-area-inset-bottom));
	overflow-y: auto;
	border: 0;
	border-radius: 20px 20px 0 0;
	box-shadow: var(--shadow-sheet), 0 0 0 100vmax var(--overlay-sheet);
}
#create-new-dropdown::before {
	content: '';
	display: block;
	width: 40px;
	height: 4px;
	margin: 0 auto 6px;
	border-radius: 2px;
	background: #E2D9D1;
}
#create-new-dropdown .create-new-head {
	padding: 8px 20px 12px;
}
#create-new-dropdown h4 {
	font-size: 20px;
	letter-spacing: -0.02em;
}
#create-new-dropdown .create-new-close {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -12px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--ink-500);
}
#create-new-dropdown .create-new-item > a {
	padding: 14px 20px;
}

/* Community menu: active row, scrolling list, whole network row. */
.dropdown-menu.commu-menu {
	width: 288px;
	min-width: 0;
	padding: 6px;
	overflow: hidden;
	border: 1px solid var(--line-card);
	border-radius: 12px;
	background: var(--surface-card);
	box-shadow: var(--shadow-modal);
}
.dropdown-menu.commu-menu a.commu {
	display: flex;
	align-items: center;
	gap: 11px;
	padding: 9px 10px;
	border-radius: var(--radius-button);
	white-space: normal;
}
.dropdown-menu.commu-menu a.commu:hover,
.dropdown-menu.commu-menu a.commu:focus {
	background: var(--surface-page);
}
.dropdown-menu.commu-menu a.commu.cm_active,
.dropdown-menu.commu-menu a.commu.cm_active:hover,
.dropdown-menu.commu-menu a.commu.cm_active:focus {
	background: var(--accent-row);
}
.dropdown-menu.commu-menu .commu-menu-ico {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 32px;
	height: 32px;
	border-radius: var(--radius-button);
	font-size: 13px;
	font-weight: 600;
	object-fit: contain;
}
.commu-ico-clay {
	background: #F0DED2;
	color: #8A5C3F;
}
.commu-ico-sage {
	background: #E4E7DE;
	color: #5C6B4E;
}
.commu-ico-slate {
	background: #E2E3EA;
	color: #565C72;
}
.dropdown-menu.commu-menu .commu-menu-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}
.dropdown-menu.commu-menu a.commu .commu-menu-name {
	overflow: hidden;
	font-size: 14px;
	font-weight: 500;
	color: var(--ink-900);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.dropdown-menu.commu-menu a.commu .commu-menu-name:not(:only-child) {
	font-weight: 600;
}
.dropdown-menu.commu-menu a.commu .commu-menu-sub {
	font-size: 11px;
	color: var(--ink-300);
}
.dropdown-menu.commu-menu a.commu.cm_active .commu-menu-name {
	color: var(--accent);
}
.dropdown-menu.commu-menu a.commu.cm_active .commu-menu-sub {
	color: var(--accent-muted-text);
}
.dropdown-menu.commu-menu .commu-menu-check {
	flex-shrink: 0;
	color: var(--accent);
}
.dropdown-menu.commu-menu .commu-menu-divider {
	height: 1px;
	margin: 6px 4px;
	background: var(--line-divider);
}
.dropdown-menu.commu-menu .commu-menu-list {
	position: relative;
}
.dropdown-menu.commu-menu .commu-menu-list > ul {
	max-height: 208px;
	margin: 0;
	padding: 0 8px 10px 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}
.dropdown-menu.commu-menu .commu-menu-list > ul::-webkit-scrollbar,
.navbar-nav > li > .dropdown-menu.notif-menu .notif-menu-list > ul::-webkit-scrollbar {
	width: 4px;
}
.dropdown-menu.commu-menu .commu-menu-list > ul::-webkit-scrollbar-track,
.navbar-nav > li > .dropdown-menu.notif-menu .notif-menu-list > ul::-webkit-scrollbar-track {
	border-radius: 999px;
	background: var(--line-divider);
}
.dropdown-menu.commu-menu .commu-menu-list > ul::-webkit-scrollbar-thumb,
.navbar-nav > li > .dropdown-menu.notif-menu .notif-menu-list > ul::-webkit-scrollbar-thumb {
	border-radius: 999px;
	background: #D8CEC6;
}
/* Firefox has no ::-webkit-scrollbar. */
@supports not selector(::-webkit-scrollbar) {
	.dropdown-menu.commu-menu .commu-menu-list > ul,
	.navbar-nav > li > .dropdown-menu.notif-menu .notif-menu-list > ul {
		scrollbar-color: #D8CEC6 var(--line-divider);
		scrollbar-width: thin;
	}
}
.dropdown-menu.commu-menu .commu-menu-list::after {
	content: '';
	position: absolute;
	right: 12px;
	bottom: 0;
	left: 0;
	height: 26px;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
	pointer-events: none;
}
.cm_head_letter {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1;
	font-size: 15px;
	font-weight: 600;
}
@media (max-width: 767px) {
	.dropdown-menu.commu-menu {
		width: 262px;
	}
}

/* Notifications: desktop dropdown. */
.navbar-nav > li > .dropdown-menu.notif-menu {
	right: -8px;
	left: auto;
	width: 380px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--line-card);
	border-radius: 12px;
	background: var(--surface-card);
	box-shadow: var(--shadow-modal);
}
.dropdown-menu.notif-menu .notif-menu-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line-divider);
}
.dropdown-menu.notif-menu h4 {
	margin: 0;
	font-family: var(--font-display);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--ink-900);
}
.dropdown-menu.notif-menu .notif-menu-mark {
	padding: 0;
	font-size: 12px;
	font-weight: 500;
	color: var(--accent);
	white-space: nowrap;
}
.navbar-nav > li > .dropdown-menu.notif-menu .notif-menu-list > ul {
	max-height: min(460px, calc(100vh - 160px));
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}
.dropdown-menu.notif-menu .notif-menu-list li:not(.new):not(:first-child) {
	border-top: 1px solid var(--line-divider);
}
.dropdown-menu.notif-menu .notif-menu-list li > a {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 13px 16px;
	white-space: normal;
}
.dropdown-menu.notif-menu .notif-menu-list li > a:hover,
.dropdown-menu.notif-menu .notif-menu-list li > a:focus {
	background: var(--surface-page);
}
.dropdown-menu.notif-menu .notif-menu-list li.new > a,
.dropdown-menu.notif-menu .notif-menu-list li.new > a:hover,
.dropdown-menu.notif-menu .notif-menu-list li.new > a:focus {
	background: var(--accent-row);
}
.dropdown-menu.notif-menu .notif-menu-ico {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	font-size: 14px;
	font-weight: 600;
}
.dropdown-menu.notif-menu .notif-menu-text {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.dropdown-menu.notif-menu .notif-menu-line {
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink-600);
	text-wrap: pretty;
}
.dropdown-menu.notif-menu .notif-menu-line strong {
	font-weight: 600;
	color: var(--ink-900);
}
.dropdown-menu.notif-menu .notif-menu-date {
	font-size: 12px;
	color: var(--ink-300);
}
.dropdown-menu.notif-menu .notif-menu-dot {
	flex-shrink: 0;
	width: 7px;
	height: 7px;
	margin-top: 6px;
	border-radius: 50%;
	background: var(--accent-dot);
}
.dropdown-menu.notif-menu .notif-menu-empty {
	padding: 24px 16px;
	font-size: 14px;
	color: var(--ink-500);
	text-align: center;
}
.dropdown-menu.notif-menu .notif-menu-foot {
	border-top: 1px solid var(--line-divider);
}
.dropdown-menu.notif-menu .notif-menu-foot > a {
	padding: 12px 16px;
	font-size: 13px;
	font-weight: 500;
	color: var(--ink-900);
	text-align: center;
}
.dropdown-menu.notif-menu .notif-menu-foot > a:hover,
.dropdown-menu.notif-menu .notif-menu-foot > a:focus {
	background: var(--surface-page);
}

/* Notifications: mobile list over the whole screen. */
body:has(.notifications-mobile.open) {
	overflow: hidden;
}
#notifications__flow_mobile {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	box-sizing: border-box;
	width: 100%;
	max-height: none;
	margin: 0;
	padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
	overflow: hidden;
	border: 0;
	border-radius: 0;
	background: var(--surface-card);
	box-shadow: none;
}
.open > #notifications__flow_mobile {
	display: flex;
	flex-direction: column;
}
#notifications__flow_mobile .notif-menu-head {
	flex-shrink: 0;
	gap: 8px;
	justify-content: flex-start;
	padding: 8px 20px 14px;
	border-bottom: 0;
}
#notifications__flow_mobile .notif-menu-back {
	display: flex;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: -12px;
	padding: 0;
	border: 0;
	border-radius: var(--radius-button);
	background: transparent;
	color: var(--ink-900);
}
#notifications__flow_mobile h4 {
	font-size: 26px;
	font-weight: 800;
	letter-spacing: -0.03em;
}
#notifications__flow_mobile .notif-menu-mark {
	margin-left: auto;
}
#notifications__flow_mobile .notif-menu-list {
	flex: 1;
	min-height: 0;
}
#notifications__flow_mobile .notif-menu-list > ul {
	height: 100%;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	list-style: none;
}
#notifications__flow_mobile .notif-menu-list li > a {
	padding: 13px 20px;
}