/**
 * Thrift Weekly — header, footer and mobile bar.
 *
 * Every class is prefixed tw- and nothing here is a bare element selector, so
 * this file cannot reach into the community plugin's markup or into anything
 * Elementor renders in the page body.
 *
 * The palette matches the approved design. If the community plugin is active
 * it publishes the same three accents as --twc-* custom properties, and each
 * value below reads those first, so changing the palette in Finds → Settings →
 * Appearance moves the header and footer with it.
 */

:root {
	--tws-bg: #0a0a0c;
	--tws-bg-2: #0f0f12;
	--tws-line: #23232a;

	--tws-pink: var(--twc-brand, #ff1e6f);
	--tws-cyan: var(--twc-cyan, #22d3ee);
	--tws-lime: var(--twc-lime, #c6f53f);

	--tws-text: #ffffff;
	--tws-muted: #9a9aa5;
	--tws-dim: #6f6f7a;

	--tws-display: var(--twc-font-display, "Montserrat", system-ui, sans-serif);
	--tws-body: var(--twc-font-body, "Inter", system-ui, sans-serif);

	--tws-head-h: 72px;

	/* Every call to action shares this. */
	--tws-radius: 8px;

	/* Text on the lime fill. Black, not a dark green — the lime is bright
	   enough that pure black is both the brief and the better contrast. */
	--tws-on-lime: #000000;
}

/* The browser hides [hidden] with a user-agent rule, and ANY display value in
   this file outranks it — an author rule always beats the UA stylesheet. So a
   panel given `display: flex` here stays on screen with the attribute set, and
   its toggle appears to do nothing. This restates the intent for every panel
   inside the shell, so the next one cannot repeat the mistake. */
.tw-head [hidden],
.tw-foot [hidden],
.tw-bottom [hidden] {
	display: none !important;
}

.tw-srt,
.tw-skip {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.tw-skip:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 200;
	width: auto;
	height: auto;
	margin: 0;
	padding: 10px 16px;
	clip: auto;
	border-radius: 8px;
	background: var(--tws-pink);
	color: #ffffff;
	font: 700 14px/1 var(--tws-display);
}

/* ==========================================================================
   Header
   ========================================================================== */

.tw-head {
	position: sticky;
	top: 0;
	z-index: 100;
	overflow-x: clip;
	background: var(--tws-bg);
	border-bottom: 1px solid var(--tws-line);
	font-family: var(--tws-body);
}

.tw-head__inner {
	display: flex;
	align-items: center;
	gap: 28px;
	max-width: 1240px;
	min-height: var(--tws-head-h);
	margin-inline: auto;
	padding-inline: 20px;
}

/* ---- logo ---- */

.tw-logo {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
	font-family: var(--tws-display);
	font-size: 25px;
	font-weight: 800;
	font-style: italic;
	letter-spacing: -0.02em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tws-text);
}

.tw-logo__b { color: var(--tws-lime); }
.tw-logo .tw-i { color: var(--tws-pink); margin-left: 2px; }

.tw-head .custom-logo-link img,
.tw-foot .custom-logo-link img {
	display: block;
	max-height: 40px;
	width: auto;
}

/* ---- nav ---- */

.tw-nav { flex: 1 1 auto; min-width: 0; }

.tw-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-nav__list a {
	position: relative;
	display: inline-block;
	padding: 6px 0;
	font-family: var(--tws-display);
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	/* A two-word item like "Show & Tell" broke over two lines once the
	   account controls widened the row. The nav collapses into the drawer
	   before it gets that tight — see the 1100px breakpoint below. */
	white-space: nowrap;
	color: var(--tws-muted);
	transition: color 0.15s ease;
}

.tw-nav__list a:hover,
.tw-nav__list a:focus-visible { color: var(--tws-text); }

.tw-nav__list .current-menu-item > a,
.tw-nav__list .current_page_item > a,
.tw-nav__list .current-menu-ancestor > a { color: var(--tws-pink); }

.tw-nav__list .current-menu-item > a::after,
.tw-nav__list .current_page_item > a::after,
.tw-nav__list .current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--tws-pink);
}

/* Submenus stay simple: the design has none, so this is just a safe default. */
.tw-nav__list .sub-menu {
	position: absolute;
	z-index: 20;
	min-width: 190px;
	margin: 0;
	padding: 8px;
	list-style: none;
	border: 1px solid var(--tws-line);
	border-radius: 10px;
	background: var(--tws-bg-2);
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease;
}

.tw-nav__list li { position: relative; }

.tw-nav__list li:hover > .sub-menu,
.tw-nav__list li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.tw-nav__list .sub-menu a { padding: 8px 10px; display: block; }

/* ---- tools ---- */

.tw-head__tools {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
	flex-shrink: 0;
}

.tw-iconbtn,
.tw-iconlink,
.tw-head__tools .twc-bell {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--tws-radius);
	background: none;
	color: var(--tws-text);
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

.tw-iconbtn:hover,
.tw-iconlink:hover,
.tw-head__tools .twc-bell:hover {
	background: rgba(255, 255, 255, 0.07);
	color: var(--tws-pink);
}

.tw-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-left: 8px;
	padding: 12px 20px;
	border-radius: var(--tws-radius);
	background: var(--tws-pink);
	font-family: var(--tws-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: #ffffff;
	transition: filter 0.15s ease, transform 0.15s ease;
}

.tw-cta:hover { filter: brightness(1.07); transform: translateY(-1px); }

.tw-cta--block {
	display: flex;
	justify-content: center;
	margin: 16px 0 0;
}

.tw-burger { display: none; }
.tw-burger__close { display: none; }
.tw-burger[aria-expanded="true"] .tw-burger__open { display: none; }
.tw-burger[aria-expanded="true"] .tw-burger__close { display: inline-flex; }

/* ---- account ---- */

.tw-login,
.tw-join {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 11px 16px;
	border: 1.5px solid var(--tws-line);
	border-radius: var(--tws-radius);
	font-family: var(--tws-display);
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
	color: var(--tws-text);
	transition: border-color 0.15s ease, color 0.15s ease;
}

.tw-login:hover,
.tw-join:hover {
	border-color: var(--tws-pink);
	color: var(--tws-pink);
}

.tw-join { border-color: transparent; color: var(--tws-muted); }

.tw-account { position: relative; }

.tw-account__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 6px 10px 6px 6px;
	border: 1.5px solid var(--tws-line);
	border-radius: var(--tws-radius);
	background: none;
	font-family: var(--tws-body);
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1;
	color: var(--tws-text);
	cursor: pointer;
	transition: border-color 0.15s ease;
}

.tw-account__btn:hover { border-color: var(--tws-muted); }

.tw-account__avatar img {
	display: block;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
}

.tw-account__name {
	max-width: 9ch;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.tw-account__chev { color: var(--tws-muted); }
.tw-account__btn[aria-expanded="true"] .tw-account__chev { transform: rotate(180deg); }

.tw-account__menu {
	position: absolute;
	top: calc(100% + 8px);
	right: 0;
	z-index: 30;
	display: flex;
	flex-direction: column;
	min-width: 200px;
	padding: 7px;
	border: 1px solid var(--tws-line);
	border-radius: 12px;
	background: var(--tws-bg-2);
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
}

.tw-account__menu a {
	padding: 10px 12px;
	border-radius: var(--tws-radius);
	font-size: 14px;
	text-decoration: none;
	color: var(--tws-text);
	transition: background-color 0.15s ease;
}

.tw-account__menu a:hover { background: rgba(255, 255, 255, 0.07); }

.tw-account__out {
	margin-top: 5px;
	padding-top: 13px !important;
	border-top: 1px solid var(--tws-line);
	border-radius: 0 0 var(--tws-radius) var(--tws-radius);
	color: var(--tws-pink) !important;
}

/* The same links, flat, in the drawer and the footer. */
.tw-acclinks {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 16px;
}

.tw-acclinks a {
	font-family: var(--tws-body);
	font-size: 14px;
	font-weight: 500;
	text-decoration: none;
	color: var(--tws-muted);
	transition: color 0.15s ease;
}

.tw-acclinks a:hover { color: var(--tws-text); }

.tw-acclinks--drawer {
	margin-top: 18px;
	padding-top: 16px;
	border-top: 1px solid var(--tws-line);
	justify-content: center;
}

.tw-acclinks--foot { margin-top: 16px; }

/* The display name is the first thing to go: with it in place the row ran
   past 1440px for a signed-in member and the tools overlapped the nav. The
   avatar and chevron still read as an account control on their own. */
@media (max-width: 1320px) {
	.tw-account__name { display: none; }
	.tw-account__btn { padding: 6px 8px 6px 6px; }
}

/* Below the bottom-bar breakpoint the header is the logo and the menu button,
   nothing else. Search, the bell, the account control and the submit CTA all
   came to more than a phone's width put together, which pushed the page
   sideways. Every one of them is still one tap away: the bottom bar carries
   search, submit, saved and profile, and the drawer carries the nav, the
   submit button and the account links. */
@media (max-width: 860px) {
	.tw-head__tools > *:not(.tw-burger) { display: none; }

	.tw-head__inner { gap: 10px; }
	.tw-head__tools { gap: 0; }
}

/* ---- search ---- */

.tw-search {
	border-top: 1px solid var(--tws-line);
	background: var(--tws-bg-2);
}

.tw-search__inner {
	max-width: 1240px;
	margin-inline: auto;
	padding: 16px 20px;
}

.tw-search input[type="search"],
.tw-search input[type="text"] {
	width: 100%;
	padding: 13px 16px;
	border: 1px solid var(--tws-line);
	border-radius: var(--tws-radius);
	background: var(--tws-bg);
	font-family: var(--tws-body);
	font-size: 15px;
	color: var(--tws-text);
}

.tw-search input::placeholder { color: var(--tws-dim); }

.tw-search input:focus {
	outline: none;
	border-color: var(--tws-cyan);
}

.tw-search .search-submit,
.tw-search button[type="submit"] {
	margin-top: 10px;
	padding: 11px 20px;
	border: 0;
	border-radius: var(--tws-radius);
	background: var(--tws-pink);
	font-family: var(--tws-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}

/* ---- mobile drawer ---- */

.tw-drawer {
	padding: 10px 20px 22px;
	border-top: 1px solid var(--tws-line);
	background: var(--tws-bg-2);
}

.tw-drawer__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.tw-drawer__list li + li { border-top: 1px solid var(--tws-line); }

.tw-drawer__list a {
	display: block;
	padding: 14px 2px;
	font-family: var(--tws-display);
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--tws-text);
}

.tw-drawer__list .current-menu-item > a { color: var(--tws-pink); }
.tw-drawer__list .sub-menu { margin: 0 0 8px 14px; padding: 0; list-style: none; }
.tw-drawer__list .sub-menu a { font-size: 14px; color: var(--tws-muted); padding: 10px 2px; }

/* ==========================================================================
   Footer
   ========================================================================== */

.tw-foot {
	background: var(--tws-bg);
	border-top: 1px solid var(--tws-line);
	font-family: var(--tws-body);
	color: var(--tws-muted);
}

.tw-foot__inner {
	display: grid;
	grid-template-columns: 1.15fr 1.25fr 1fr 1fr 1.05fr;
	gap: 32px;
	max-width: 1240px;
	margin-inline: auto;
	padding: 52px 20px 40px;
}

.tw-foot__tagline {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.5;
}

.tw-foot__head {
	margin: 0 0 14px;
	font-family: var(--tws-display);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--tws-text);
}

.tw-foot__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tw-foot__list a {
	font-size: 14px;
	text-decoration: none;
	color: var(--tws-muted);
	transition: color 0.15s ease;
}

.tw-foot__list a:hover { color: var(--tws-text); }

.tw-foot__note { margin: 0 0 14px; font-size: 14px; }

/* ---- social ---- */

.tw-social {
	display: flex;
	flex-wrap: wrap;
	gap: 9px;
}

.tw-social__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 40px;
	padding: 0 14px 0 10px;
	flex: 0 0 auto;
	border: 1px solid var(--tws-line);
	border-radius: 999px;
	font-size: 14px;
	font-weight: 500;
	color: var(--tws-text);
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

.tw-social__link:hover {
	border-color: var(--tws-pink);
	color: var(--tws-pink);
}

/* ---- app stores ---- */

.tw-stores {
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tw-store {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 9px 14px;
	border: 1px solid var(--tws-line);
	border-radius: var(--tws-radius);
	background: var(--tws-bg-2);
	text-decoration: none;
	color: var(--tws-text);
	transition: border-color 0.15s ease;
}

.tw-store:hover { border-color: var(--tws-muted); }

.tw-store span { display: flex; flex-direction: column; line-height: 1.2; }
.tw-store small { font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--tws-dim); }
.tw-store strong { font-family: var(--tws-display); font-size: 14px; font-weight: 700; }

.tw-foot__phone img {
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	margin-left: auto;
}

/* ---- bottom bar ---- */

.tw-foot__bar {
	border-top: 1px solid var(--tws-line);
}

.tw-foot__copy {
	max-width: 1240px;
	margin: 0 auto;
	padding: 18px 20px;
	font-size: 13px;
	color: var(--tws-dim);
}

/* ==========================================================================
   Mobile bottom bar
   ========================================================================== */

.tw-bottom { display: none; }

@media (max-width: 860px) {
	.tw-bottom {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 120;
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		align-items: end;
		padding: 8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--tws-line);
		background: var(--tws-bg);
		font-family: var(--tws-body);
	}

	.tw-bottom__item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 4px;
		padding: 6px 2px;
		border: 0;
		background: none;
		font-size: 10.5px;
		letter-spacing: 0.02em;
		text-decoration: none;
		color: var(--tws-muted);
		cursor: pointer;
	}

	.tw-bottom__item:hover { color: var(--tws-text); }

	.tw-bottom__cta {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 58px;
		height: 58px;
		margin: -22px auto 0;
		border-radius: 50%;
		background: var(--tws-pink);
		color: #fff;
		text-decoration: none;
		box-shadow: 0 6px 18px rgba(255, 30, 111, 0.4);
	}

	/* Keep the bar from covering the end of the page. */
	body { padding-bottom: 76px; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1080px) {
	.tw-foot__inner { grid-template-columns: 1.2fr 1fr 1fr 1.1fr; }
	.tw-foot__phone { display: none; }
}

@media (max-width: 1100px) {
	.tw-nav { display: none; }
	.tw-burger { display: inline-flex; }
}

@media (max-width: 760px) {
	.tw-foot__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (max-width: 480px) {
	.tw-head__inner { gap: 12px; padding-inline: 16px; }
	.tw-logo { font-size: 21px; }
	.tw-foot__inner { grid-template-columns: minmax(0, 1fr); padding-inline: 16px; }
}

@media (prefers-reduced-motion: reduce) {
	.tw-cta:hover { transform: none; }
	.tw-head *,
	.tw-foot *,
	.tw-bottom * { transition: none !important; }
}

/* ==========================================================================
   1.8 — client checklist pass
   ========================================================================== */

/* ---- search panel: one row, field + button ---- */
.tw-searchform {
	display: flex;
	gap: 8px;
}

.tw-searchform input[type="search"] {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	border: 1px solid var(--tws-line);
	border-radius: var(--tws-radius);
	background: var(--tws-bg);
	font-family: var(--tws-body);
	font-size: 16px; /* 16px stops iOS zooming the page on focus */
	color: var(--tws-text);
}

.tw-searchform input[type="search"]:focus {
	outline: none;
	border-color: var(--tws-cyan);
}

.tw-searchform button {
	flex: none;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: var(--tws-radius);
	background: var(--tws-pink);
	font-family: var(--tws-display);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
	cursor: pointer;
}

@media (max-width: 860px) {
	/* The bottom bar is Home | Search | + | Saved | Profile, and the
	   centre + is always the pink Show Your Find action. */
	.tw-bottom__item {
		min-height: 48px;
		justify-content: center;
		font-size: 11px;
		font-weight: 500;
	}

	.tw-bottom__item[aria-expanded="true"] { color: var(--tws-pink); }

	.tw-bottom__cta {
		width: 56px;
		height: 56px;
		margin-top: -20px;
		border: 4px solid var(--tws-bg);
		box-sizing: content-box;
	}

	.tw-bottom__cta .tw-i { stroke-width: 2.4; }

	/* Room for the fixed bar plus the phone's home indicator, so the bar
	   never covers the last card, a button, footer text or a form field. */
	body {
		padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px));
	}

	/* Community "app" pages — feed, dashboard, submit form, find pages —
	   get a short footer on phones. The full marketing footer was ~775px
	   of repeated links under every form and feed; the bottom bar and the
	   drawer already carry the navigation. */
	body.twc-app-page .tw-foot__inner { display: none; }

	body.twc-app-page .tw-foot__bar {
		padding-top: 14px;
		padding-bottom: 14px;
	}

	/* The drawer scrolls inside itself rather than pushing the page. */
	.tw-drawer {
		max-height: calc(100vh - var(--tws-head-h));
		max-height: calc(100dvh - var(--tws-head-h));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* A bigger, unmissable close target for the pink X. */
	.tw-burger { min-width: 44px; min-height: 44px; }
}

/* ==========================================================================
   1.8.2 — the Elementor kit styles every <button> with a pink border and
   pink text (.elementor-kit-N button), which is more specific than the
   shell's own classes. That produced the pink outlines on the account
   menu, the burger and the bottom bar. Re-assert the intended look with
   one extra element in the selector so the kit can no longer win.
   ========================================================================== */
body button.tw-iconbtn,
body button.tw-bottom__item {
	border: 0;
	border-radius: var(--tws-radius);
	background: none;
	color: var(--tws-text);
}

/* 1.8.3 — Search is a <button>, the rest are links; the kit's button font
   made it larger and greyer than its neighbours. One look for all five. */
body .tw-bottom .tw-bottom__item,
body .tw-bottom button.tw-bottom__item {
	padding: 6px 2px;
	font-family: var(--tws-body);
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: 0.02em;
	text-transform: none;
	color: var(--tws-text);
}
body .tw-bottom .tw-bottom__item[aria-expanded="true"],
body .tw-bottom .tw-bottom__item[aria-current="page"] { color: var(--tws-pink); }

body button.tw-burger {
	border: 1px solid var(--tws-line);
	color: var(--tws-text);
}

/* 1.8.3 — The open (X) state was a pink outlined square. Keep the same
   quiet frame as the closed state; only the icon changes. */
body button.tw-burger[aria-expanded="true"],
body button.tw-burger:focus,
body button.tw-burger:hover {
	color: var(--tws-text);
	border-color: var(--tws-line);
	background: rgba(255, 255, 255, 0.06);
	outline: 0;
}
body button.tw-burger:focus-visible { outline: 2px solid var(--tws-cyan); outline-offset: 2px; }

body button.tw-account__btn {
	border: 1.5px solid var(--tws-line);
	border-radius: var(--tws-radius);
	background: none;
	color: var(--tws-text);
}

body button.tw-account__btn:hover,
body button.tw-account__btn[aria-expanded="true"] { border-color: var(--tws-muted); }

body .tw-searchform button {
	border: 0;
	background: var(--tws-pink);
	color: #fff;
}

/* 1.8.3 — Show Your Find is hot pink with white text everywhere (client,
   Oct 2026). Element + class so the Elementor kit link colour cannot win. */
body a.tw-cta,
body a.tw-cta:hover,
body a.tw-cta:focus {
	background: var(--tws-pink);
	color: #ffffff;
}

/* ==========================================================================
   Profile photo upload (dashboard → Profile, or [tw_avatar_form])
   ========================================================================== */

/* A member's own photo is cropped square, so it fills every round avatar
   slot on the site without stretching. */
img.tw-avatar--own { object-fit: cover; }

.tw-avatar-form {
	display: flex;
	align-items: flex-start;
	gap: 18px;
	margin: 0 0 28px;
	padding: 0 0 24px;
	border-bottom: 1px solid var(--tws-line);
}

.tw-avatar-form__preview img {
	display: block;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	object-fit: cover;
}

.tw-avatar-form__body { flex: 1; min-width: 0; }

.tw-avatar-form__label {
	display: block;
	margin: 0 0 8px;
	font-weight: 600;
}

.tw-avatar-form input[type="file"] { max-width: 100%; font-size: 14px; }

.tw-avatar-form__hint {
	margin: 6px 0 12px;
	font-size: 13px;
	color: var(--tws-muted);
}

.tw-avatar-form__actions { display: flex; flex-wrap: wrap; gap: 10px; }

.tw-avatar-form__notice { margin: 12px 0 0; font-size: 14px; }
.tw-avatar-form__notice--ok { color: var(--tws-lime); }
.tw-avatar-form__notice--error { color: var(--tws-pink); }

@media (max-width: 520px) {
	.tw-avatar-form { flex-direction: column; }
}