/**
 * FastNaija Forum layout (5.5.4).
 *
 * Matches the markup printed by FNF_Shell (masthead, drawer, page frame) and
 * the post and reply templates. Colours come only from the admin theme's
 * accent (--fnx-primary, set by FNF_Shell::print_tokens) and the neutral
 * surface tokens in fnx.css. Nothing in this file adds a colour of its own.
 *
 * Flat by house rule: no gradients, no shadows, and no outlines on cards.
 */

/* ---------------- theme tokens that base files set to amber or gradients ---------------- */

:root {
	--fnx-warn: var(--fnx-primary);
	--fnl-grad: var(--fnx-primary);
}
.fnx-counter.is-warn .fnx-ring, .fnx-counter.is-warn { stroke: var(--fnx-primary); color: var(--fnx-primary); }

/* ---------------- desktop: three panes, places | feed | discovery ----------------
   The left pane is the navigation (text rows, labelled communities, Post, account).
   The centre is the feed. The right pane is discovery (search, communities to join,
   trending, contributors). Tablet keeps the left pane and drops the right one; phones
   use the text drawer and the bottom bar. */

.fnx-masthead { display: none !important; }

@media (min-width: 1024px) {
	.fnx-app {
		display: grid; grid-template-columns: 248px minmax(0, 1fr); align-items: start;
		max-width: 1080px; margin: 0 auto; padding: 0;
	}
	.fnx-rail {
		display: flex; flex-direction: column; position: sticky; top: var(--fnx-adminbar, 0px);
		width: auto; height: calc(100vh - var(--fnx-adminbar, 0px)); overflow-y: auto;
		transform: none; background: transparent; border: 0; z-index: 10;
	}
	.fnx-rail-inner { display: flex; flex-direction: column; min-height: 100%; width: 100%; padding: 22px 12px 20px 4px; }
	.fnx-rail-head { padding: 0 12px 16px; min-height: 0; }
	.fnx-rail-head .fnx-only-drawer, .fnx-scrim, .fnx-only-mobile, .fnx-only-drawer { display: none !important; }
	.fnx-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 0; }
	.fnx-nav-item {
		display: flex; align-items: center; height: auto; min-height: 44px; padding: 0 14px;
		border-radius: 10px; color: var(--fnx-on-surface) !important; font-size: 16px; font-weight: 600; text-decoration: none;
	}
	.fnx-nav-item:hover { background: var(--fnx-variant); }
	.fnx-nav-item.is-active { color: var(--fnx-primary) !important; font-weight: 800; background: transparent; box-shadow: inset 3px 0 0 var(--fnx-primary); border-radius: 0 10px 10px 0; }
	.fnx-nav-ic { display: none; }
	.fnx-nav-label { display: inline; }
	.fnx-nav-item .fnx-badge { position: static; margin-left: auto; }
	.fnx-post-btn { display: flex; width: 100%; margin: 18px 0 0; }
	.fnx-post-btn-label { display: inline; }

	.fnx-places { margin-top: 26px; }
	.fnx-places-title { margin: 0 12px 8px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--fnx-on-surface-variant); }
	.fnx-places-list { list-style: none; margin: 0; padding: 0; }
	.fnx-places-list a { display: flex; align-items: center; gap: 10px; padding: 6px 12px; border-radius: 10px; color: var(--fnx-on-surface); text-decoration: none; font-size: 15px; font-weight: 600; }
	.fnx-places-list a:hover { background: var(--fnx-variant); }
	.fnx-places-mark { width: 28px; height: 28px; flex: none; border-radius: 8px; display: grid; place-items: center; background: var(--fnx-container); color: var(--fnx-on-container); font-size: 13px; font-weight: 800; }

	.fnx-rail-foot { margin-top: auto; padding-top: 16px; }
	.fnx-rail-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 14px 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-col { min-width: 0; width: 100%; max-width: 640px; margin: 0; padding: 0 20px; border: 0; background: transparent; }
	.fnx-topbar { position: sticky; top: var(--fnx-adminbar, 0px); z-index: 30; background: var(--fnx-surface); border-bottom: 1px solid var(--fnx-outline-variant); }
	.fnx-topbar-row { padding: 0 4px; }
	.fnx-side { display: none; }
}

@media (min-width: 1280px) {
	.fnx-app { grid-template-columns: 248px minmax(0, 1fr) 300px; max-width: 1200px; }
	.fnx-side {
		display: block; position: sticky; top: var(--fnx-side-top, var(--fnx-adminbar, 0px)); align-self: start;
		height: auto; max-height: none; overflow: visible;
		padding: 22px 4px 20px 16px; border: 0; background: transparent; z-index: 10;
	}
	.fnx-side-inner { display: flex; flex-direction: column; gap: 14px; max-width: none; margin: 0; }
	.fnx-side-inner > .fnx-search { margin: 0 !important; }
	.fnx-side-inner > .fnx-card, .fnx-side-inner > .fnx-widgets { margin: 0; }
	.fnx-widgets { display: block; }
	.fnx-side-foot { font-size: 13px; }
}

/* ---------------- tablet and phone: drawer with text links ---------------- */

@media (max-width: 1023px) {
	.fnx-app { display: block; padding: 0; }
	.fnx-side { display: none; }
	.fnx-only-mobile { display: inline-grid; }
	.fnx-topbar-brand.fnx-only-mobile { display: flex; }
	.fnx-hide-mobile { display: none; }
	.fnx-only-drawer { display: inline-grid; }
	.fnx-topbar { position: sticky; top: var(--fnx-adminbar); z-index: 30; background: var(--fnx-surface); border-bottom: 1px solid var(--fnx-outline-variant); }

	.fnx-rail {
		position: fixed; top: 0; bottom: 0; left: 0; z-index: 90;
		width: min(300px, 86vw); height: 100%; overflow-y: auto;
		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 { display: flex; flex-direction: column; min-height: 100%; padding: 8px 12px 16px; }
	.fnx-rail-head { padding: 4px 8px 8px 12px; min-height: 56px; }

	/* text only: the drawer's icons are removed, the labels stay */
	.fnx-nav { display: flex; flex-direction: column; gap: 2px; margin-top: 8px; }
	.fnx-nav-item {
		display: flex; align-items: center; gap: 0; width: 100%; height: auto; min-height: 50px;
		padding: 0 16px; border-radius: 12px;
		color: var(--fnx-on-surface) !important; font-size: 17px; font-weight: 600; text-decoration: none;
	}
	.fnx-nav-item:hover { background: var(--fnx-variant); }
	.fnx-nav-item.is-active { background: var(--fnx-container); color: var(--fnx-on-container) !important; font-weight: 800; }
	.fnx-nav-ic { display: none; }
	.fnx-nav-label { display: inline; }
	.fnx-nav-item .fnx-badge { position: static; margin-left: 10px; }

	.fnx-post-btn { display: flex; width: 100%; margin: 14px 0 0; }
	.fnx-post-btn-label { display: inline; }
	.fnx-rail-foot { margin-top: auto; padding-top: 16px; }
	.fnx-rail-links { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 16px 12px 0; font-size: 15px; 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-scrim { display: none; }
	body.fnx-drawer-open .fnx-scrim { display: block; position: fixed; inset: 0; z-index: 80; background: var(--fnx-scrim); }
}

@media (min-width: 700px) and (max-width: 1023px) {
	.fnx-col { width: 100%; max-width: 720px; margin: 0 auto; }
	.fnx-topbar-row { padding: 0 16px; }
}

/* ---------------- phone: bottom bar and action button (base plugin behaviour) ---------------- */

@media (max-width: 699px) {
	.fnx-col { width: 100%; }
	.fnx-topbar-row { padding: 0 8px; }
	.fnx-topbar-title { font-size: 22px; }
	.fnx-composer { margin: 10px 10px 12px; }
}

/* ---------------- theme colour: links, tabs, buttons ---------------- */

.fnx-tab.is-active { color: var(--fnx-primary) !important; }
.fnx-tab.is-active::after { background: var(--fnx-primary); }

/* warning and "open" states use neutral tones, not amber */
.fnx-chip-warn, .fnf-status-open {
	background: var(--fnx-variant) !important; color: var(--fnx-on-surface-variant) !important;
}
.fnx-chip-community { background: color-mix(in srgb, var(--fnx-primary) 12%, transparent); color: var(--fnx-primary) !important; }
.fnx-chip-ok, .fnf-status-answered { background: color-mix(in srgb, var(--fnx-primary) 12%, transparent); color: var(--fnx-primary) !important; }

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

.fnx-composer {
	margin: 0 0 14px; padding: 14px 16px; border: 0; border-radius: 18px;
	background: var(--fnx-surface-1);
}
.fnx-composer-text { font-size: 17px; line-height: 24px; }
.fnx-composer-bar { border-top: 0; margin-top: 6px; padding-top: 0; }

/* ---------------- feed: each post is a tonal card ---------------- */

.fnx-feed { padding: 0; display: flex; flex-direction: column; gap: 10px; }
.fnx-post {
	position: relative; margin: 0; padding: 16px 18px 12px;
	border: 0; border-radius: 18px; background: var(--fnx-surface-1);
}
.fnx-post[data-href] { cursor: pointer; }
.fnx-post[data-href]:hover { background: var(--fnx-variant); }
.fnx-post.is-target { box-shadow: inset 0 0 0 2px var(--fnx-primary); }
.fnx-post.is-accepted { background: color-mix(in srgb, var(--fnx-primary) 8%, var(--fnx-surface-1)); }

/* header row: avatar, who, menu */
.fnx-post-wrap { display: block; min-width: 0; }
.fnx-post-head { display: flex; align-items: center; gap: 12px; min-width: 0; margin: 0; }
.fnx-post-avatar { width: 42px; height: 42px; flex: none; display: block; }
.fnx-post-avatar .fnx-avatar, .fnx-post-avatar img { width: 42px; height: 42px; border-radius: 50%; }
.fnx-post-who { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0 6px; line-height: 22px; }
.fnx-community-name { font-size: 14px; font-weight: 700; color: var(--fnx-primary); flex-basis: 100%; line-height: 18px; }
.fnx-name { font-weight: 700; font-size: 16px; color: var(--fnx-on-surface); }
.fnx-time, .fnx-dot { color: var(--fnx-on-surface-variant); font-size: 14px; }
.fnx-menu-wrap { margin-left: auto; flex: none; }

/* body and actions line up under the name */
.fnx-post-main { min-width: 0; padding-left: 0; }
.fnx-post-ctx { margin: 4px 0 0; }
.fnx-text { margin-top: 6px; font-size: 16.5px; line-height: 25px; }
.fnx-post-flag { display: flex; align-items: center; gap: 6px; margin: 0 0 6px 54px; color: var(--fnx-primary); font-size: 13px; font-weight: 700; }
.fnx-post-flag .fnx-i { color: var(--fnx-primary); }

/* action row: labelled text buttons */
.fnx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 10px 0 0; max-width: none; }
.fnx-act {
	display: inline-flex; align-items: center; gap: 6px;
	height: 34px; padding: 0 10px; border-radius: 999px;
	background: transparent; color: var(--fnx-on-surface-variant); font-size: 14px; font-weight: 600;
}
.fnx-act:hover { background: var(--fnx-variant); color: var(--fnx-on-surface); }
.fnx-act .fnx-i { width: 18px; height: 18px; }
.fnx-act-views { cursor: default; }
.fnx-act-views:hover { background: transparent; color: var(--fnx-on-surface-variant); }
.fnx-act-like.is-liked, .fnx-act-like:hover { color: var(--fnx-primary); }
.fnx-act-like.is-liked .fnx-i { fill: currentColor; }
.fnx-act-like.is-liked { background: color-mix(in srgb, var(--fnx-primary) 12%, transparent); }
.fnx-act-best.is-on { color: var(--fnx-primary); }
.fnx-act-label { display: inline; }

/* focal post on a thread page: larger type, avatar on the same row */
.fnx-post--focal { padding: 20px 20px 14px; border-radius: 20px; }
.fnx-post--focal .fnx-post-avatar { width: 50px; height: 50px; }
.fnx-post--focal .fnx-post-avatar .fnx-avatar { width: 50px; height: 50px; }
.fnx-post--focal .fnx-post-main { padding-left: 0; }
.fnx-post--focal .fnx-text { font-size: 21px; line-height: 30px; font-weight: 500; }
.fnx-post--focal .fnx-focal-meta, .fnx-post--focal .fnx-focal-stats { padding-left: 0; }
.fnx-post--focal .fnx-actions { margin-top: 12px; }

/* replies: indented, quieter, avatar smaller */
.fnx-reply { padding: 12px 14px 8px; border-radius: 14px; background: var(--fnx-surface); }
.fnx-reply::before, .fnx-reply::after { display: none; }
.fnx-reply .fnx-post-avatar, .fnx-reply .fnx-post-avatar .fnx-avatar { width: 34px; height: 34px; }
.fnx-reply .fnx-post-head { gap: 10px; }
.fnx-reply .fnx-post-main { padding-left: 0; }
.fnx-reply .fnx-text { font-size: 15.5px; line-height: 23px; }
.fnx-reply .fnx-name { font-size: 15px; }
.fnx-replying { color: var(--fnx-on-surface-variant); }

/* ---------------- avatars and profile ---------------- */

.fnx-avatar { border-radius: 50%; }
.fnx-profile { background: var(--fnx-surface-1); border-radius: 20px; overflow: hidden; margin: 0 0 14px; }
.fnx-profile-cover { height: 140px; border-radius: 0; background-color: var(--fnx-primary); background-image: none; }
.fnx-profile-body { padding: 0 20px 18px; }
/* the avatar overlaps the cover by half its height; the row sits below the cover, so the action button is on the surface, not on the red */
.fnx-profile-row { margin: 0; align-items: flex-end; }
.fnx-profile-body .fnx-avatar-xl { width: 96px; height: 96px; flex: none; margin-top: -48px; border: 4px solid var(--fnx-surface-1); }
.fnx-profile-actions { padding: 10px 0 0; }
.fnx-profile-name { font-size: 26px; font-weight: 800; }
.fnx-profile-stats b { font-weight: 800; color: var(--fnx-on-surface); }

/* ---------------- sheets and snackbar stay on the surface tokens ---------------- */

.fnx-modal-sheet { background: var(--fnx-surface-1); border: 0; border-radius: 22px; }
.fnx-snackbar { background: var(--fnx-on-surface); color: var(--fnx-surface); border-radius: 999px; font-weight: 700; }

/* ---------------- management screens (fastnaijaforum.css) ---------------- */

.fnf-btn { border-radius: 999px; min-height: 42px; font-weight: 700; }
.fnf-btn-outline, .fnf-btn-ghost { background: var(--fnx-variant) !important; color: var(--fnx-on-surface) !important; border-color: transparent; }
.fnf-btn-outline:hover, .fnf-btn-ghost:hover { background: var(--fnx-outline-variant) !important; }
.fnf-field input[type=text], .fnf-field input[type=email], .fnf-field input[type=password],
.fnf-field input[type=number], .fnf-field input[type=url], .fnf-field select, .fnf-field textarea {
	border-radius: 12px; background: var(--fnx-surface-1);
}

@media (prefers-reduced-motion: reduce) {
	.fnx-rail { transition: none !important; }
}

/* phone width: four labelled actions must share one row */
@media (max-width: 699px) {
	.fnx-post-main .fnx-actions { flex-wrap: nowrap; justify-content: space-between; gap: 0; }
	.fnx-post-main .fnx-act { padding-left: 8px; padding-right: 8px; }
	.fnx-post-main .fnx-act-label { font-size: 13px; }
}

/* dark mode: the base sheet sets a gold warning token under a more specific selector, so repeat the override there */
:root:not([data-theme="light"]) { --fnx-warn: var(--fnx-primary); }
:root[data-theme="dark"] { --fnx-warn: var(--fnx-primary); }