/**
 * FastNaija Forum — social layout (fnx).
 *
 * Material Design 3 language, kept flat: tonal surfaces and 1px outlines
 * instead of shadows or gradients; state layers (hover / focus / press)
 * and a light ripple for feedback; a navigation rail on desktop and
 * tablet, a drawer + navigation bar + FAB on phones; primary tabs;
 * outlined cards and text fields; a snackbar for messages.
 *
 * WIDTH: the frame is the theme's own — a 1280px container with 40px
 * side padding on desktop. Every page (home, post, dashboard,
 * profile …) sits in the same three columns inside it.
 *
 * --fnx-primary, --fnx-on-primary and the font stacks are set by an inline
 * <style> printed after this file (FNF_Shell::print_tokens), so the
 * admin's accent colour / the theme's fonts win over the defaults below.
 */

:root {
	--fnx-primary: #2563eb;
	--fnx-on-primary: #ffffff;
	--fnx-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--fnx-font-display: var(--fnx-font);

	--fnx-surface: #ffffff;
	--fnx-on-surface: #1a1a1a;
	--fnx-on-surface-variant: #5b6270;
	--fnx-outline: #c8ccd3;
	--fnx-outline-variant: #e5e7eb;
	--fnx-error: #b3261e;
	--fnx-ok: #1c7a34;
	--fnx-warn: #a8660b;
	--fnx-like: #d6285f;
	--fnx-scrim: rgba(0, 0, 0, .45);
	--fnx-link: var(--fnx-primary);

	/* tonal surfaces (Material "surface tint" without shadows) */
	--fnx-surface-1: color-mix(in srgb, var(--fnx-primary) 4%, var(--fnx-surface));
	--fnx-variant: color-mix(in srgb, var(--fnx-on-surface) 6%, var(--fnx-surface));
	--fnx-container: color-mix(in srgb, var(--fnx-primary) 13%, var(--fnx-surface));
	--fnx-on-container: color-mix(in srgb, var(--fnx-primary) 78%, #000);

	--fnx-r-xs: 4px;
	--fnx-r-sm: 8px;
	--fnx-r-md: 12px;
	--fnx-r-lg: 16px;
	--fnx-r-xl: 28px;

	--fnx-adminbar: 0px;

	/* legacy management-screen tokens (fastnaijaforum.css) mapped onto the same palette */
	--fnf-primary: var(--fnx-primary);
	--fnf-accent: var(--fnx-primary);
	--fnf-accent-lightest: var(--fnx-surface-1);
	--fnf-text: var(--fnx-on-surface);
	--fnf-link: var(--fnx-link);
	--fnf-border: var(--fnx-outline-variant);
	--fnf-border-strong: var(--fnx-outline);
	--fnf-surface: var(--fnx-surface-1);
	--fnf-bg: var(--fnx-surface);
	--fnf-muted: var(--fnx-on-surface-variant);
	--fnf-radius: var(--fnx-r-md);
	--fnf-radius-sm: var(--fnx-r-sm);
	--fnf-shadow: none;
}

@media (prefers-color-scheme: dark) {
	:root {
		--fnx-surface: #101214;
		--fnx-on-surface: #e7e9ec;
		--fnx-on-surface-variant: #9ba2ad;
		--fnx-outline: #3d434c;
		--fnx-outline-variant: #262b31;
		--fnx-error: #f2b8b5;
		--fnx-ok: #6fcf8a;
		--fnx-warn: #f0b04a;
		--fnx-like: #ff6b9a;
		--fnx-scrim: rgba(0, 0, 0, .65);
		--fnx-link: color-mix(in srgb, var(--fnx-primary) 60%, #ffffff);
		--fnx-on-container: color-mix(in srgb, var(--fnx-primary) 40%, #ffffff);
		--fnx-container: color-mix(in srgb, var(--fnx-primary) 26%, var(--fnx-surface));
	}
}

body.admin-bar { --fnx-adminbar: 32px; }
@media (max-width: 782px) { body.admin-bar { --fnx-adminbar: 46px; } }
@media (max-width: 600px) { body.admin-bar { --fnx-adminbar: 0px; } }

/* ---------------- base ---------------- */

html.fnx-html { -webkit-text-size-adjust: 100%; }
body.fnx {
	margin: 0;
	background: var(--fnx-surface);
	color: var(--fnx-on-surface);
	font: 400 15px/1.5 var(--fnx-font);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}
.fnx *, .fnx *::before, .fnx *::after { box-sizing: border-box; }
.fnx img, .fnx video, .fnx iframe { max-width: 100%; }
.fnx img { height: auto; }
.fnx a { color: var(--fnx-link); text-decoration: none; }
.fnx button { font: inherit; }
.fnx h1, .fnx h2, .fnx h3, .fnx h4 { margin: 0; font-family: var(--fnx-font-display); line-height: 1.25; letter-spacing: -.01em; }
.fnx p { margin: 0 0 1em; }
.fnx ul { margin: 0; }
.fnx .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
	clip: rect(0 0 0 0); clip-path: inset(50%); border: 0; white-space: nowrap;
}
.fnx .screen-reader-text:focus {
	position: fixed !important; top: 8px; left: 8px; z-index: 100003; width: auto; height: auto; margin: 0; padding: 12px 16px;
	clip: auto; clip-path: none; background: var(--fnx-surface); border: 2px solid var(--fnx-primary); border-radius: var(--fnx-r-sm);
}
.fnx :focus-visible { outline: 2px solid var(--fnx-primary); outline-offset: 2px; }
body.fnx-modal-open, body.fnx-drawer-open { overflow: hidden; }

/* ---------------- state layers + ripple (Material interaction feedback) ---------------- */

.fnx-btn, .fnx-icon-btn, .fnx-nav-item, .fnx-tab, .fnx-act, .fnx-tool, .fnx-account-btn, .fnx-bn-ic, .fnx-trend, .fnx-person, .fnx-mini, .fnx-notif, .fnx-fab, .fnx-ripple {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}
.fnx-btn::before, .fnx-icon-btn::before, .fnx-nav-item::before, .fnx-tab::before, .fnx-act::before, .fnx-tool::before,
.fnx-account-btn::before, .fnx-trend::before, .fnx-person::before, .fnx-mini::before, .fnx-notif::before, .fnx-fab::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: currentColor;
	opacity: 0;
	pointer-events: none;
	transition: opacity .15s ease;
}
.fnx-btn:hover::before, .fnx-icon-btn:hover::before, .fnx-nav-item:hover::before, .fnx-tab:hover::before, .fnx-act:hover::before,
.fnx-tool:hover::before, .fnx-account-btn:hover::before, .fnx-trend:hover::before, .fnx-person:hover::before,
.fnx-mini:hover::before, .fnx-notif:hover::before, .fnx-fab:hover::before { opacity: .08; }
.fnx-btn:focus-visible::before, .fnx-icon-btn:focus-visible::before, .fnx-nav-item:focus-visible::before, .fnx-tab:focus-visible::before,
.fnx-act:focus-visible::before, .fnx-tool:focus-visible::before, .fnx-account-btn:focus-visible::before, .fnx-fab:focus-visible::before,
.fnx-btn:active::before, .fnx-icon-btn:active::before, .fnx-nav-item:active::before, .fnx-tab:active::before, .fnx-act:active::before,
.fnx-tool:active::before, .fnx-fab:active::before { opacity: .12; }

.fnx-rip {
	position: absolute;
	border-radius: 50%;
	background: currentColor;
	opacity: .16;
	transform: scale(0);
	animation: fnx-rip .55s ease-out forwards;
	pointer-events: none;
}
@keyframes fnx-rip { to { transform: scale(1); opacity: 0; } }
@keyframes fnx-spin { to { transform: rotate(360deg); } }

/* ---------------- buttons ---------------- */

.fnx-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	min-height: 40px; padding: 0 24px;
	border: 1px solid transparent; border-radius: 999px;
	font-weight: 600; font-size: 14px; line-height: 1; letter-spacing: .01em;
	cursor: pointer; text-decoration: none !important; white-space: nowrap;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.fnx-btn-primary { background: var(--fnx-primary); color: var(--fnx-on-primary) !important; }
.fnx-btn-tonal { background: var(--fnx-container); color: var(--fnx-on-container) !important; }
.fnx-btn-outline { background: transparent; border-color: var(--fnx-outline); color: var(--fnx-on-surface) !important; }
.fnx-btn-sm { min-height: 32px; padding: 0 16px; font-size: 13px; }
.fnx-btn-lg { min-height: 52px; padding: 0 28px; font-size: 16px; }
.fnx-btn[disabled], .fnx-btn.is-loading { opacity: .38; cursor: default; pointer-events: none; }

.fnx-icon-btn {
	display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; text-decoration: none;
}
.fnx-icon-btn-sm { width: 32px; height: 32px; color: var(--fnx-on-surface-variant); }
.fnx-i { flex: none; display: block; }

.fnx-fab {
	display: none; place-items: center;
	position: fixed; right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); z-index: 55;
	width: 56px; height: 56px; padding: 0;
	border: 0; border-radius: var(--fnx-r-lg);
	background: var(--fnx-primary); color: var(--fnx-on-primary); cursor: pointer;
}

.fnx-badge {
	position: absolute; top: -6px; right: -9px;
	min-width: 18px; height: 18px; padding: 0 5px;
	border-radius: 9px; background: #d93025; color: #fff;
	font: 700 11px/18px var(--fnx-font); text-align: center;
}

/* ---------------- frame: three columns inside the theme's 1280px container ---------------- */

.fnx-app {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 40px;
	display: grid;
	grid-template-columns: 260px minmax(0, 1fr) 330px;
	align-items: start;
	min-height: 100vh;
}
.fnx-col {
	min-width: 0;
	min-height: 100vh;
	border-left: 1px solid var(--fnx-outline-variant);
	border-right: 1px solid var(--fnx-outline-variant);
}
.fnx-main { min-width: 0; }
.fnx-main.fnf-wrap { display: block; }

/* navigation rail */
.fnx-rail {
	position: sticky; top: var(--fnx-adminbar);
	height: calc(100vh - var(--fnx-adminbar));
	overflow-y: auto; scrollbar-width: none;
}
.fnx-rail::-webkit-scrollbar { display: none; }
.fnx-rail-inner { display: flex; flex-direction: column; min-height: 100%; padding: 8px 12px 16px 0; }
.fnx-rail-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px 12px; min-height: 56px; }
.fnx-brand { display: inline-flex; align-items: center; color: var(--fnx-on-surface) !important; font: 800 22px/1.1 var(--fnx-font-display); letter-spacing: -.02em; }
.fnx-brand-logo { display: block; max-height: 40px; max-width: 190px; width: auto; }
.fnx-only-drawer { display: none; }

.fnx-nav { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.fnx-nav-item {
	display: flex; align-items: center; gap: 16px;
	height: 52px; padding: 0 22px 0 16px;
	border-radius: 999px;
	color: var(--fnx-on-surface) !important;
	font-size: 17px; font-weight: 500; text-decoration: none;
}
.fnx-nav-item.is-active { background: var(--fnx-container); color: var(--fnx-on-container) !important; font-weight: 700; }
.fnx-nav-ic { position: relative; display: inline-flex; }
.fnx-post-btn { width: 100%; margin: 16px 0 0; }
.fnx-rail-foot { margin-top: auto; padding-top: 16px; }
.fnx-authbtns { display: flex; flex-direction: column; gap: 8px; }
.fnx-rail-links { display: none; }

.fnx-account { position: relative; }
.fnx-account-btn {
	display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 12px;
	border: 0; border-radius: 999px; background: transparent; color: var(--fnx-on-surface); text-align: left; cursor: pointer;
}
.fnx-account-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.fnx-account-txt b { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnx-account-txt small { font-size: 13px; color: var(--fnx-on-surface-variant); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fnx-account-more { color: var(--fnx-on-surface-variant); display: inline-flex; }

/* menus (account, post "more") */
.fnx-menu-wrap { position: relative; flex: none; }
.fnx-menu {
	display: none; position: absolute; z-index: 45; top: 100%; right: 0; min-width: 210px;
	padding: 8px 0; background: var(--fnx-surface); border: 1px solid var(--fnx-outline); border-radius: var(--fnx-r-md);
}
.fnx-menu.is-open { display: block; }
.fnx-menu-up { top: auto; bottom: calc(100% + 6px); left: 0; right: 0; }
.fnx-menu a, .fnx-menu button {
	display: flex; align-items: center; gap: 12px; width: 100%; min-height: 44px; padding: 0 16px;
	border: 0; background: transparent; color: var(--fnx-on-surface) !important; font-size: 14px; text-align: left; cursor: pointer; text-decoration: none;
}
.fnx-menu a:hover, .fnx-menu button:hover { background: var(--fnx-variant); }
.fnx-menu .is-danger { color: var(--fnx-error) !important; }

/* right column */
.fnx-side {
	position: sticky; top: var(--fnx-adminbar);
	max-height: calc(100vh - var(--fnx-adminbar));
	overflow-y: auto; scrollbar-width: none;
	padding: 4px 0 24px 24px;
}
.fnx-side::-webkit-scrollbar { display: none; }
.fnx-side-inner { min-width: 0; }

.fnx-search {
	display: flex; align-items: center; gap: 12px;
	height: 48px; margin: 6px 0 16px; padding: 0 16px;
	border: 1px solid transparent; border-radius: 999px;
	background: var(--fnx-variant); color: var(--fnx-on-surface-variant);
}
.fnx-search:focus-within { background: var(--fnx-surface); border-color: var(--fnx-primary); color: var(--fnx-primary); }
.fnx-search input {
	flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; background: transparent;
	color: var(--fnx-on-surface); font: inherit; -webkit-appearance: none; appearance: none;
}
.fnx-search input::placeholder { color: var(--fnx-on-surface-variant); }
.fnx-search-lg { margin: 12px 16px; height: 52px; }

.fnx-card { margin: 0 0 16px; overflow: hidden; background: var(--fnx-surface-1); border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-lg); }
.fnx-card-title { padding: 14px 16px 6px; font-size: 18px; font-weight: 800; }
.fnx-card-more { display: block; padding: 14px 16px; font-size: 14px; }
.fnx-list { list-style: none; margin: 0; padding: 0; }
.fnx-list-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px; }
.fnx-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; color: var(--fnx-on-surface) !important; }
.fnx-list-main b { font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnx-list small, .fnx-trend small, .fnx-person small { color: var(--fnx-on-surface-variant); font-size: 13px; }
.fnx-trend { display: flex; flex-direction: column; padding: 10px 16px; color: var(--fnx-on-surface) !important; }
.fnx-trend b { font-size: 15px; }
.fnx-person { display: flex; align-items: center; gap: 12px; padding: 10px 16px; color: var(--fnx-on-surface) !important; }
.fnx-person-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.fnx-person-txt b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnx-list-flush .fnx-list-row, .fnx-list-flush .fnx-person { padding-left: 0; padding-right: 0; }
.fnx-side-foot { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 4px 16px 0; font-size: 13px; color: var(--fnx-on-surface-variant); }
.fnx-side-foot a { color: var(--fnx-on-surface-variant); }
.fnx-side-foot a:hover { text-decoration: underline; }
.fnx-copy { flex-basis: 100%; }
.fnx-widgets { margin-bottom: 16px; }
.fnx-widgets .widget { margin: 0 0 16px; padding: 14px 16px; background: var(--fnx-surface-1); border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-lg); }
.fnx-widgets .widget-title, .fnx-widgets .widgettitle { margin: 0 0 8px; font-size: 18px; font-weight: 800; }
.fnx-ad { margin: 0 0 16px; text-align: center; overflow: hidden; }
.fnx-ad-label { display: block; margin-bottom: 4px; font-size: 11px; color: var(--fnx-on-surface-variant); text-transform: uppercase; letter-spacing: .06em; }

/* top bar + tabs */
.fnx-topbar { position: sticky; top: var(--fnx-adminbar); z-index: 30; background: var(--fnx-surface); border-bottom: 1px solid var(--fnx-outline-variant); }
.fnx-topbar-row { display: flex; align-items: center; gap: 8px; min-height: 56px; padding: 0 8px; }
.fnx-topbar-title { flex: 1; min-width: 0; padding: 0 8px; font: 700 20px/28px var(--fnx-font-display); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnx-topbar-brand { flex: 1; display: flex; }
.fnx-topbar-brand .fnx-brand { font-size: 20px; }
.fnx-topbar-brand .fnx-brand-logo { max-height: 32px; }
.fnx-topbar-end { margin-left: auto; }
.fnx-only-mobile { display: none; }
.fnx-tabs { display: flex; overflow-x: auto; scrollbar-width: none; }
.fnx-tabs::-webkit-scrollbar { display: none; }
.fnx-tab {
	flex: 1 0 auto; min-width: max-content; padding: 0 20px; height: 48px;
	display: flex; align-items: center; justify-content: center;
	color: var(--fnx-on-surface-variant) !important; font-size: 14px; font-weight: 600; text-decoration: none;
}
.fnx-tab.is-active { color: var(--fnx-on-surface) !important; }
.fnx-tab.is-active::after {
	content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
	width: 48px; height: 3px; border-radius: 3px 3px 0 0; background: var(--fnx-primary);
}
.fnx-skip { z-index: 100003; }

/* ---------------- avatars, chips, generic bits ---------------- */

.fnx-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; background: var(--fnx-variant); flex: none; display: block; }
.fnx-avatar-xs { width: 28px; height: 28px; }
.fnx-avatar-sm { width: 36px; height: 36px; }
.fnx-avatar-lg { width: 72px; height: 72px; }
.fnx-avatar-xl { width: 96px; height: 96px; border: 4px solid var(--fnx-surface); }

.fnx-chip {
	display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 10px;
	border: 1px solid var(--fnx-outline); border-radius: var(--fnx-r-sm);
	color: var(--fnx-on-surface-variant) !important; font-size: 12px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
a.fnx-chip:hover { background: var(--fnx-variant); }
.fnx-chip-ok { border-color: transparent; background: color-mix(in srgb, var(--fnx-ok) 14%, transparent); color: var(--fnx-ok) !important; }
.fnx-chip-warn { border-color: transparent; background: color-mix(in srgb, var(--fnx-warn) 16%, transparent); color: var(--fnx-warn) !important; }
.fnx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fnx-chip-lg { height: 34px; padding: 0 14px; font-size: 14px; border-radius: var(--fnx-r-md); color: var(--fnx-on-surface) !important; }
.fnx-chip-lg small { color: var(--fnx-on-surface-variant); font-weight: 500; }

.fnx-empty { padding: 56px 24px; text-align: center; color: var(--fnx-on-surface-variant); }
.fnx-empty h2 { margin-bottom: 8px; font-size: 24px; color: var(--fnx-on-surface); }
.fnx-empty .fnx-btn { margin-top: 12px; }
.fnx-empty-note { padding: 32px 16px; text-align: center; color: var(--fnx-on-surface-variant); }
.fnx-hint { margin: 0; padding: 0 16px 16px; color: var(--fnx-on-surface-variant); font-size: 13px; }
.fnx-section { padding: 16px; }
.fnx-section-title { margin: 20px 0 8px; font-size: 18px; font-weight: 800; }
.fnx-section > .fnx-section-title:first-child { margin-top: 0; }
.fnx-login-cta {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	padding: 16px; background: var(--fnx-surface-1); border-bottom: 1px solid var(--fnx-outline-variant);
}
.fnx-cta-btns { display: inline-flex; gap: 8px; }
.fnx-announcement { margin: 12px 16px; padding: 12px 16px; border-radius: var(--fnx-r-md); background: var(--fnx-container); color: var(--fnx-on-container); font-size: 14px; }
.fnx-announcement.is-important { background: color-mix(in srgb, var(--fnx-error) 12%, var(--fnx-surface)); color: var(--fnx-error); }
.fnx-archive-desc { margin: 0; padding: 12px 16px; color: var(--fnx-on-surface-variant); border-bottom: 1px solid var(--fnx-outline-variant); }
.fnx-more-wrap { padding: 16px; text-align: center; }

/* ---------------- posts and replies ---------------- */

.fnx-feed { display: block; }
.fnx-post { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--fnx-outline-variant); transition: background-color .15s ease; }
.fnx-post[data-href] { cursor: pointer; }
.fnx-post[data-href]:hover { background: color-mix(in srgb, var(--fnx-on-surface) 3%, transparent); }
.fnx-post.is-target { background: var(--fnx-container); }
.fnx-post.is-accepted { background: color-mix(in srgb, var(--fnx-ok) 6%, transparent); }
.fnx-post-flag { display: flex; align-items: center; gap: 6px; margin: 0 0 4px 56px; color: var(--fnx-on-surface-variant); font-size: 13px; font-weight: 600; }
.fnx-post-grid { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; }
.fnx-post-avatar { display: block; height: 44px; }
.fnx-post-main { min-width: 0; }
.fnx-post-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; min-height: 22px; }
.fnx-post-who { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; line-height: 22px; }
.fnx-name { color: var(--fnx-on-surface) !important; font-weight: 700; }
.fnx-name:hover { text-decoration: underline; }
.fnx-handle, .fnx-dot, .fnx-time { color: var(--fnx-on-surface-variant) !important; font-size: 14px; }
a.fnx-time:hover { text-decoration: underline; }
.fnx-post-ctx { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 2px; }
.fnx-replying { font-size: 13px; color: var(--fnx-on-surface-variant); }
.fnx-text { margin: 2px 0 0; font-size: 15px; line-height: 22px; overflow-wrap: anywhere; word-break: break-word; }
.fnx-text a { color: var(--fnx-link); }
.fnx-text a:hover { text-decoration: underline; }
.fnx-legacy-title { display: block; font-size: 16px; line-height: 22px; }
.fnx-legacy-excerpt { display: block; margin-top: 2px; color: var(--fnx-on-surface-variant); }
.fnx-legacy > *:first-child { margin-top: 6px; }
.fnx-legacy img { border-radius: var(--fnx-r-md); }
.fnx-legacy blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--fnx-outline); color: var(--fnx-on-surface-variant); }
.fnx-legacy pre { overflow-x: auto; padding: 12px; border-radius: var(--fnx-r-sm); background: var(--fnx-variant); }
.fnx-legacy iframe { max-width: 100%; }

.fnx-actions { display: flex; align-items: center; justify-content: space-between; max-width: 400px; margin: 6px 0 -6px -8px; }
.fnx-act {
	display: inline-flex; align-items: center; gap: 4px; min-height: 36px; min-width: 40px; padding: 0 8px;
	border: 0; border-radius: 999px; background: transparent; color: var(--fnx-on-surface-variant);
	font-size: 13px; line-height: 1; cursor: pointer; text-decoration: none;
}
span.fnx-act { cursor: default; }
span.fnx-act::before { display: none; }
a.fnx-act { color: var(--fnx-on-surface-variant) !important; }
.fnx-act-reply:hover, .fnx-act-best:hover, .fnx-act-reply:focus-visible { color: var(--fnx-primary); }
.fnx-act-like:hover, .fnx-act-like.is-liked { color: var(--fnx-like); }
.fnx-act-like.is-liked .fnx-i { fill: currentColor; }
.fnx-act-best.is-on { color: var(--fnx-ok); }
.fnx-act-best.is-on .fnx-i { fill: color-mix(in srgb, var(--fnx-ok) 20%, transparent); }

/* media */
.fnx-media { margin-top: 10px; }
.fnx-media-images, .fnx-prev-grid {
	display: grid; gap: 2px; overflow: hidden;
	border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-lg);
}
.fnx-media-cell, .fnx-prev { position: relative; display: block; overflow: hidden; background: var(--fnx-variant); min-height: 0; }
.fnx-img, .fnx-prev img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fnx-n-1 { grid-template-columns: 1fr; }
.fnx-n-1 .fnx-img, .fnx-n-1.fnx-prev-grid .fnx-prev img { max-height: 520px; height: auto; }
.fnx-n-2, .fnx-n-3, .fnx-n-4 { grid-template-columns: 1fr 1fr; aspect-ratio: 16 / 9; }
.fnx-n-3, .fnx-n-4 { grid-template-rows: 1fr 1fr; }
.fnx-n-3 > :first-child { grid-row: span 2; }
.fnx-media-images a { cursor: zoom-in; }

.fnx-audio { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-lg); background: var(--fnx-surface-1); }
.fnx-audio-icon { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--fnx-container); color: var(--fnx-on-container); }
.fnx-audio-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fnx-audio-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fnx-audio audio { display: block; width: 100%; height: 36px; }

.fnx-yt { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #000; border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-lg); }
.fnx-yt-play { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.fnx-yt-play img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fnx-yt-badge { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: rgba(0, 0, 0, .68); color: #fff; font-size: 24px; }
.fnx-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* the large post at the top of a thread */
.fnx-post--focal { padding: 16px; cursor: default; }
.fnx-post--focal .fnx-text { font-size: 20px; line-height: 28px; }
.fnx-post--focal .fnx-legacy { font-size: 16px; line-height: 1.7; }
.fnx-focal-meta, .fnx-focal-stats { display: flex; flex-wrap: wrap; gap: 4px 8px; padding: 12px 0; border-bottom: 1px solid var(--fnx-outline-variant); color: var(--fnx-on-surface-variant); font-size: 14px; }
.fnx-focal-meta { margin-top: 12px; }
.fnx-focal-stats { gap: 20px; }
.fnx-focal-stats b, .fnx-focal-meta b { color: var(--fnx-on-surface); }
.fnx-post--focal .fnx-actions { max-width: none; margin: 4px 0 -8px; justify-content: space-around; }

.fnx-replies { display: block; }
.fnx-inline-composer { background: var(--fnx-surface-1); border-bottom: 1px solid var(--fnx-outline-variant); }
.fnx-inline-composer .fnx-composer { border-bottom: 0; }

/* compact list rows (my replies, a profile's replies) */
.fnx-mini { display: block; padding: 12px 16px; border-bottom: 1px solid var(--fnx-outline-variant); color: var(--fnx-on-surface) !important; }
.fnx-mini-ctx { display: block; color: var(--fnx-on-surface-variant); font-size: 13px; }
.fnx-mini-ctx b { color: var(--fnx-on-surface); }
.fnx-mini-body { display: block; margin: 2px 0 4px; }
.fnx-mini-meta { display: inline-flex; align-items: center; gap: 4px; color: var(--fnx-on-surface-variant); font-size: 13px; }

.fnx-notifs { margin: 0 -16px; }
.fnx-notif { display: flex; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--fnx-outline-variant); color: var(--fnx-on-surface) !important; }
.fnx-notif.is-unread { background: var(--fnx-container); }
.fnx-notif-ic { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--fnx-variant); color: var(--fnx-on-surface-variant); }
.fnx-notif-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: 14px; }
.fnx-notif-body small { color: var(--fnx-on-surface-variant); font-size: 12.5px; }

/* ---------------- composer ---------------- */

.fnx-composer { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--fnx-outline-variant); }
.fnx-composer-main { position: relative; min-width: 0; }
.fnx-composer-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.fnx-select-wrap { position: relative; display: inline-block; max-width: 100%; color: var(--fnx-primary); }
.fnx-select-wrap::after {
	content: ''; position: absolute; right: 12px; top: 50%; width: 6px; height: 6px; pointer-events: none;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-72%) rotate(45deg);
}
.fnx-select {
	-webkit-appearance: none; appearance: none; max-width: 100%; height: 32px; padding: 0 32px 0 14px;
	border: 1px solid var(--fnx-outline); border-radius: var(--fnx-r-sm); background: var(--fnx-surface);
	color: var(--fnx-primary); font: 600 13px var(--fnx-font); cursor: pointer;
}
.fnx-select:disabled { opacity: .75; cursor: default; }
.fnx-composer-text {
	display: block; width: 100%; min-height: 56px; max-height: 420px; padding: 6px 0; margin: 0;
	border: 0; outline: 0; resize: none; background: transparent; color: var(--fnx-on-surface);
	font: 400 19px/26px var(--fnx-font);
}
.fnx-composer--reply .fnx-composer-text { min-height: 40px; font-size: 16px; line-height: 24px; }
.fnx-composer-text::placeholder { color: var(--fnx-on-surface-variant); }
.fnx-composer-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--fnx-outline-variant); }
.fnx-tools { display: flex; align-items: center; gap: 2px; margin-left: -8px; }
.fnx-tool { display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--fnx-primary); cursor: pointer; }
.fnx-composer-end { display: flex; align-items: center; gap: 12px; }

.fnx-counter { position: relative; display: inline-grid; place-items: center; width: 26px; height: 26px; opacity: 0; transition: opacity .15s ease; }
.fnx-counter.is-active { opacity: 1; }
.fnx-counter svg { transform: rotate(-90deg); }
.fnx-ring-bg, .fnx-ring { fill: none; stroke-width: 2.5; }
.fnx-ring-bg { stroke: var(--fnx-outline-variant); }
.fnx-ring { stroke: var(--fnx-primary); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.fnx-counter.is-warn .fnx-ring { stroke: #f5a623; }
.fnx-counter.is-over .fnx-ring { stroke: var(--fnx-error); }
.fnx-counter-num { position: absolute; right: calc(100% + 8px); font-size: 13px; color: var(--fnx-on-surface-variant); white-space: nowrap; }
.fnx-counter.is-over .fnx-counter-num { color: var(--fnx-error); }

.fnx-previews { margin-top: 8px; }
.fnx-prev-grid.fnx-n-1 { display: block; }
.fnx-prev-grid.fnx-n-2, .fnx-prev-grid.fnx-n-3, .fnx-prev-grid.fnx-n-4 { aspect-ratio: 16 / 9; }
.fnx-prev { min-height: 88px; }
.fnx-prev.is-loading { min-height: 120px; }
.fnx-prev-x {
	position: absolute; top: 6px; right: 6px; z-index: 2; display: grid; place-items: center; width: 28px; height: 28px; padding: 0;
	border: 0; border-radius: 50%; background: rgba(0, 0, 0, .68); color: #fff; font-size: 18px; line-height: 1; cursor: pointer;
}
.fnx-spinner { position: absolute; inset: 0; margin: auto; width: 24px; height: 24px; border: 3px solid var(--fnx-outline); border-top-color: var(--fnx-primary); border-radius: 50%; animation: fnx-spin .8s linear infinite; }
.fnx-prev-audio { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 10px 12px 10px 14px; border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-md); font-size: 13px; }
.fnx-prev-audio .fnx-prev-x { position: static; flex: none; background: var(--fnx-variant); color: var(--fnx-on-surface); }
.fnx-prev-yt { margin-top: 8px; aspect-ratio: 16 / 9; border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-lg); background: #000; }

.fnx-rules-ack { margin-top: 8px; padding: 12px; border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-md); background: var(--fnx-surface-1); }
.fnx-rules-ack-text { max-height: 140px; overflow-y: auto; margin-bottom: 10px; font-size: 13.5px; line-height: 1.6; }
.fnx-check { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; }
.fnx-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--fnx-primary); }

.fnx-mention-list { position: absolute; z-index: 25; left: 0; right: 0; top: 100%; max-height: 240px; overflow-y: auto; padding: 4px; background: var(--fnx-surface); border: 1px solid var(--fnx-outline); border-radius: var(--fnx-r-md); }
.fnx-mention-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px; border: 0; border-radius: var(--fnx-r-sm); background: transparent; color: var(--fnx-on-surface); text-align: left; cursor: pointer; }
.fnx-mention-item.is-active, .fnx-mention-item:hover { background: var(--fnx-variant); }
.fnx-mention-item img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.fnx-mention-item span { display: flex; flex-direction: column; line-height: 1.25; }
.fnx-mention-item small { color: var(--fnx-on-surface-variant); }
.fnx-mention-empty { padding: 10px; color: var(--fnx-on-surface-variant); font-size: 13px; }

/* ---------------- modal, snackbar, lightbox ---------------- */

.fnx-modal { display: none; position: fixed; inset: 0; z-index: 100000; align-items: flex-start; justify-content: center; padding: 6vh 16px 16px; }
.fnx-modal.is-open { display: flex; }
.fnx-modal-scrim { position: absolute; inset: 0; background: var(--fnx-scrim); }
.fnx-modal-sheet { position: relative; width: 100%; max-width: 600px; max-height: 88vh; overflow: auto; padding-bottom: 8px; background: var(--fnx-surface); border: 1px solid var(--fnx-outline-variant); border-radius: var(--fnx-r-xl); animation: fnx-pop .18s ease; }
.fnx-modal-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 12px 0 16px; }
.fnx-modal .fnx-composer { border-bottom: 0; padding-top: 4px; }
@keyframes fnx-pop { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

.fnx-snackbar {
	position: fixed; left: 50%; bottom: 24px; z-index: 100001; display: flex; align-items: center; justify-content: space-between; gap: 16px;
	min-width: 280px; max-width: min(560px, 92vw); padding: 12px 16px;
	background: #2b2f36; color: #f1f2f4; border-radius: var(--fnx-r-sm); font-size: 14px;
	opacity: 0; pointer-events: none; transform: translate(-50%, 16px); transition: opacity .2s ease, transform .2s ease;
}
.fnx-snackbar.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.fnx-snackbar a { color: #a8c7fa; font-weight: 700; }

.fnx-lightbox { position: fixed; inset: 0; z-index: 100002; display: flex; align-items: center; justify-content: center; background: rgba(0, 0, 0, .92); }
.fnx-lightbox img { max-width: 96vw; max-height: 92vh; object-fit: contain; }
.fnx-lb-close, .fnx-lb-nav { position: absolute; display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .14); color: #fff; font-size: 26px; line-height: 1; cursor: pointer; }
.fnx-lb-close { top: 16px; right: 16px; }
.fnx-lb-nav { top: 50%; transform: translateY(-50%); }
.fnx-lb-prev { left: 16px; }
.fnx-lb-next { right: 16px; }

.fnx-input { flex: 1; min-width: 0; height: 40px; padding: 0 12px; border: 1px solid var(--fnx-outline); border-radius: var(--fnx-r-sm); background: var(--fnx-surface); color: var(--fnx-on-surface); font: inherit; }
.fnx-stock .fnx-modal-sheet { max-width: 720px; }
.fnx-stock-body { padding: 8px 16px 8px; }
.fnx-stock-search { display: flex; gap: 8px; margin-bottom: 12px; }
.fnx-stock-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; min-height: 40px; color: var(--fnx-on-surface-variant); }
.fnx-stock-item { position: relative; height: 100px; padding: 0; border: 0; border-radius: var(--fnx-r-sm); overflow: hidden; background: var(--fnx-variant); cursor: pointer; }
.fnx-stock-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fnx-stock-item:hover, .fnx-stock-item:focus-visible { outline: 3px solid var(--fnx-primary); outline-offset: -3px; }
.fnx-stock-item.is-loading { opacity: .5; pointer-events: none; }

/* ---------------- profile, dashboard, reading view ---------------- */

.fnx-profile-cover { height: 120px; background: var(--fnx-container); }
.fnx-profile-body { padding: 0 16px 12px; }
.fnx-profile-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-top: -48px; margin-bottom: 8px; }
.fnx-profile-actions { padding-bottom: 6px; }
.fnx-profile-name { font-size: 22px; font-weight: 800; }
.fnx-profile-bio { margin: 10px 0 0; }
.fnx-profile-stats { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 10px 0 0; color: var(--fnx-on-surface-variant); font-size: 14px; }
.fnx-profile-stats b { color: var(--fnx-on-surface); }

.fnx-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin: -16px -16px 16px; padding: 16px; border-bottom: 1px solid var(--fnx-outline-variant); }
.fnx-summary-main { display: flex; flex-direction: column; min-width: 0; gap: 2px; }
.fnx-summary-name { font-size: 20px; font-weight: 800; }
.fnx-summary-link { font-size: 13px; }
.fnx-wallet-chip { margin-left: auto; padding: 8px 16px; border-radius: var(--fnx-r-md); background: var(--fnx-container); color: var(--fnx-on-container); text-align: right; line-height: 1.3; }
.fnx-wallet-chip b { display: block; font-size: 16px; }
.fnx-wallet-chip span { font-size: 12.5px; }
.fnx-lead { font-size: 16px; font-weight: 600; }
.fnx-feed-flush { margin: 0 -16px; }

.fnx-article { padding: 16px; }
.fnx-article-cover img { width: 100%; border-radius: var(--fnx-r-lg); margin-bottom: 16px; }
.fnx-prose { font-size: 16px; line-height: 1.75; overflow-wrap: anywhere; }
.fnx-prose h2 { margin: 1.6em 0 .6em; font-size: 24px; }
.fnx-prose h3 { margin: 1.4em 0 .5em; font-size: 20px; }
.fnx-prose p, .fnx-prose ul, .fnx-prose ol { margin: 0 0 1.1em; }
.fnx-prose ul, .fnx-prose ol { padding-left: 1.4em; }
.fnx-prose img, .fnx-prose figure { max-width: 100%; height: auto; border-radius: var(--fnx-r-md); }
.fnx-prose blockquote { margin: 1.2em 0; padding: 4px 16px; border-left: 3px solid var(--fnx-primary); color: var(--fnx-on-surface-variant); }
.fnx-prose pre { overflow-x: auto; padding: 14px; border-radius: var(--fnx-r-sm); background: var(--fnx-variant); }
.fnx-prose table { display: block; overflow-x: auto; border-collapse: collapse; }
.fnx-prose td, .fnx-prose th { padding: 8px 10px; border: 1px solid var(--fnx-outline-variant); }
.fnx-prose a { text-decoration: underline; }

/* ---------------- bottom navigation (phones) ---------------- */

.fnx-bottomnav { display: none; }
.fnx-scrim { display: none; }
.fnx-bn-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 0 12px; color: var(--fnx-on-surface-variant) !important; font-size: 12px; font-weight: 600; text-decoration: none; }
.fnx-bn-ic { display: grid; place-items: center; width: 60px; height: 30px; border-radius: 15px; }
.fnx-bn-item.is-active { color: var(--fnx-on-surface) !important; }
.fnx-bn-item.is-active .fnx-bn-ic { background: var(--fnx-container); color: var(--fnx-on-container); }
.fnx-bn-ic .fnx-badge { right: 8px; top: -4px; }

/* ---------------- tablet: icon-only rail, no right column ---------------- */

@media (min-width: 700px) and (max-width: 1023px) {
	.fnx-app { grid-template-columns: 76px minmax(0, 680px); justify-content: center; padding: 0 16px; }
	.fnx-side { display: none; }
	.fnx-rail-inner { align-items: center; padding: 8px 0 16px; }
	.fnx-rail-head { display: none; }
	.fnx-nav-item { width: 52px; padding: 0; justify-content: center; }
	.fnx-nav-label, .fnx-post-btn-label, .fnx-account-txt, .fnx-account-more { display: none; }
	.fnx-post-btn { width: 52px; padding: 0; }
	.fnx-account-btn { width: auto; padding: 8px; }
	.fnx-authbtns .fnx-btn span { display: none; }
	.fnx-authbtns .fnx-btn { min-width: 44px; padding: 0 12px; }
	.fnx-menu-up { left: 0; right: auto; }
}

/* ---------------- phone: drawer + bottom bar + FAB ---------------- */

@media (max-width: 699px) {
	.fnx-app { display: block; padding: 0; }
	.fnx-col { border: 0; padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
	.fnx-only-mobile { display: inline-grid; }
	.fnx-topbar-brand.fnx-only-mobile { display: flex; }
	.fnx-hide-mobile { display: none; }
	.fnx-side { display: none; }

	.fnx-rail {
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 90; width: min(300px, 86vw); height: 100%;
		background: var(--fnx-surface); border-right: 1px solid var(--fnx-outline-variant);
		transform: translateX(-100%); transition: transform .22s ease;
	}
	body.fnx-drawer-open .fnx-rail { transform: none; }
	.fnx-rail-inner { padding: 8px 12px 16px; }
	.fnx-only-drawer { display: inline-grid; }
	.fnx-scrim { position: fixed; inset: 0; z-index: 80; background: var(--fnx-scrim); }
	body.fnx-drawer-open .fnx-scrim { display: block; }
	.fnx-rail-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 16px 12px 0; font-size: 13px; color: var(--fnx-on-surface-variant); }
	.fnx-rail-links a { color: var(--fnx-on-surface-variant); }
	.fnx-rail-links .fnx-copy { flex-basis: 100%; }
	.fnx-post-btn { display: none; }

	.fnx-bottomnav {
		display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
		padding-bottom: env(safe-area-inset-bottom, 0px);
		background: var(--fnx-surface-1); border-top: 1px solid var(--fnx-outline-variant);
	}
	.fnx-fab { display: grid; }

	.fnx-actions { max-width: none; }
	.fnx-snackbar { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
	.fnx-search-lg { margin: 12px; }

	.fnx-modal { padding: 0; align-items: stretch; }
	.fnx-modal-sheet { max-width: none; max-height: none; height: 100%; border: 0; border-radius: 0; }
	.fnx-post--focal .fnx-text { font-size: 18px; line-height: 26px; }
}

@media (prefers-reduced-motion: reduce) {
	.fnx *, .fnx *::before, .fnx *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
	.fnx-rip { display: none; }
}