/**
 * Jetonomy block styles — Navigation + Login.
 *
 * Self-contained. Registered as handle `jetonomy-blocks` and enqueued
 * only when one of these blocks renders. Matches the sidebar-widget
 * aesthetic of the community page (About / Trending / Top Members)
 * so the block slots in visually whether it sits on the community
 * template or any other theme page.
 *
 * Tokens are NOT declared here. This file consumes the shared --jt-*
 * layer from assets/css/jetonomy-tokens.css (handle `jetonomy-tokens`),
 * which `jetonomy-blocks` declares as a dependency. That handle — not
 * jetonomy.css, which only loads on /community/ routes — is what makes a
 * block render correctly on a landing page or widget area. A parallel
 * --jtb-* copy used to serve that purpose and has been removed.
 */

.jt-nav-block,
.jt-login-block,
.jt-user-panel,
.jt-feed-block,
.jt-shortcode {
	/* No token declarations here — deliberately.
	 *
	 * These blocks used to declare a parallel `--jtb-*` set: a second copy of the
	 * design system, with a SHORTER chain that never learned about BuddyX, Reign,
	 * Astra, Kadence, Blocksy or Neve, and its own third fallback blue (#4b5cff,
	 * against jetonomy.css's own). So a block adopted a different colour from the
	 * app rendered six inches away, on the same theme.
	 *
	 * Worse, declaring tokens here made these blocks the only elements on a page
	 * that RE-DECLARE the token set instead of inheriting it, so they could not
	 * follow dark mode without a hand-written per-block rule — and one duly
	 * appeared in jetonomy.css, pinning the login block light on dark pages.
	 * That rule was the white-card bug; this namespace is why it was written.
	 *
	 * Inherit instead. `--jt-*` is declared once, in jetonomy-tokens.css, on
	 * `:root` — an ancestor of everything, blocks included, wherever they
	 * render. Dark mode then needs no per-block rule at all: reassigning the
	 * root tokens is all it ever had to do.
	 *
	 * If a block needs a surface that reads as raised or highlighted, pick the
	 * token that already means that — --jt-bg-subtle is color-mix(in srgb,
	 * var(--jt-text) 3%, var(--jt-bg)), i.e. a few percent toward the text
	 * colour, so it lifts in light mode and in dark mode alike. Never introduce
	 * a new colour, a new percentage, or a new token namespace to make
	 * something stand out.
	 */
	font-family: var(--jt-font);
	color: var(--jt-text);
	line-height: 1.5;
	box-sizing: border-box;
}
.jt-nav-block *,
.jt-nav-block *::before,
.jt-nav-block *::after,
.jt-login-block *,
.jt-login-block *::before,
.jt-login-block *::after,
.jt-user-panel *,
.jt-user-panel *::before,
.jt-user-panel *::after,
.jt-feed-block *,
.jt-feed-block *::before,
.jt-feed-block *::after,
.jt-shortcode *,
.jt-shortcode *::before,
.jt-shortcode *::after { box-sizing: border-box; }

/* ─── Navigation block ─────────────────────────────────────────────── */

.jt-nav-block {
	background: var(--jt-bg);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 20px 20px 12px;
	margin: 0 0 24px;
}

.jt-nav-title {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--jt-text);
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--jt-border);
}

.jt-nav-category {
	margin: 0;
	padding: 0;
}
.jt-nav-category + .jt-nav-category {
	margin-top: 4px;
	padding-top: 12px;
	border-top: 1px solid var(--jt-border);
}

.jt-nav-category-title {
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--jt-text-tertiary);
	margin: 0 0 6px;
	padding: 2px 0;
}

/* Collapsible <details> version */
details.jt-nav-category > summary.jt-nav-category-title {
	list-style: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	user-select: none;
	transition: color 0.15s ease;
}
details.jt-nav-category > summary.jt-nav-category-title:hover {
	color: var(--jt-text-secondary);
}
details.jt-nav-category > summary.jt-nav-category-title::-webkit-details-marker { display: none; }
details.jt-nav-category > summary.jt-nav-category-title::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(-45deg);
	transition: transform 0.2s ease;
	opacity: 0.55;
	margin-right: 4px;
}
details.jt-nav-category[open] > summary.jt-nav-category-title::after {
	transform: rotate(45deg);
}

.jt-nav-spaces {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.jt-nav-space { margin: 0; padding: 0; }
.jt-nav-space > a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 7px 10px;
	border-radius: var(--jt-radius-sm);
	text-decoration: none;
	color: var(--jt-text);
	font-size: 0.9rem;
	font-weight: 500;
	line-height: 1.35;
	transition: background-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.jt-nav-space > a:hover,
.jt-nav-space > a:focus-visible {
	background: var(--jt-bg-hover);
	color: var(--jt-accent);
	text-decoration: none;
}
.jt-nav-space > a:focus-visible {
	outline: 2px solid var(--jt-accent);
	outline-offset: 2px;
}
.jt-nav-space.is-active > a,
.jt-nav-space > a[aria-current="page"] {
	background: var(--jt-accent-light);
	color: var(--jt-accent);
	font-weight: 600;
}
.jt-nav-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--jt-bg-subtle);
	color: var(--jt-text-tertiary);
	font-size: 0.7rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}
.jt-nav-space.is-active .jt-nav-count,
.jt-nav-space > a[aria-current="page"] .jt-nav-count {
	background: var(--jt-accent);
	color: var(--jt-bg);
}

.jt-nav-spaces-uncategorized {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--jt-border);
}

/* ─── Login block ──────────────────────────────────────────────────── */

/* The login card is the call-to-action for every logged-out visitor, so it sits
   slightly proud of the neutral widgets around it (nav, ABOUT, MANAGED BY),
   which stay on var(--jt-bg). --jt-bg-subtle is the plugin's existing "raised
   surface" step — mixed a few percent toward --jt-text — which makes it
   mode-correct by construction: --jt-text is dark in light mode so the card goes
   darker, and light in dark mode so it goes lighter. Either way it separates
   from the page. Hardcoding "darker" would sink the card into a dark page, and a
   fourth hand-rolled percentage is the duplication this file just removed. */
.jt-login-block {
	background: var(--jt-bg-subtle);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 20px;
	margin: 0 0 24px;
	position: relative;
	overflow: hidden;
}
.jt-login-block::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jt-accent) 0%, color-mix(in srgb, var(--jt-accent) 45%, transparent) 100%);
}

.jt-login-title {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--jt-text);
	margin: 2px 0 12px;
}

/* Theme-proof block titles. A bare title class (e.g. .jt-login-title,
   specificity 0,1,0) loses to the content-heading rules every theme ships -
   .entry-content h3 / .widget h3 are (0,2,1) - so the theme repaints our
   block titles with its own heading colour. When the block sits on a dark
   surface that colour is dark-on-dark (the "Join the conversation" title
   vanished on Reign). Re-assert the block text token through the block
   root + .jt-app (0,3,0), which outranks any normal content-heading rule
   without !important. All four block roots carry .jt-app. */
.jt-nav-block.jt-app .jt-nav-title,
.jt-login-block.jt-app .jt-login-title,
.jt-user-panel.jt-app .jt-userpanel-title,
.jt-feed-block.jt-app .jt-feed-title,
.jt-compose-topic-embed.jt-compose-topic-login .jt-compose-topic-login-title {
	color: var(--jt-text);
}

/* Margins need the same re-assertion: jetonomy.css resets .jt-app h1-h4 to
   margin: 0 at (0,1,1), which silently beats every bare title class above and
   leaves widget titles flush against their content. Uniform contract: 12px
   between a widget title and its first content line (same as .jt-card h4). */
.jt-nav-block.jt-app .jt-nav-title {
	margin: 0 0 12px;
}
.jt-login-block.jt-app .jt-login-title {
	margin: 2px 0 12px;
}
.jt-user-panel.jt-app .jt-userpanel-title {
	margin: 0 0 2px; /* name/handle lockup - meta line is part of the title group */
}
.jt-feed-block.jt-app .jt-feed-title {
	margin: 0; /* spacing owned by .jt-feed-header padding + border */
}
.jt-compose-topic-embed.jt-compose-topic-login .jt-compose-topic-login-title {
	margin: 0; /* spacing owned by the parent flex gap */
}

.jt-login-tabs {
	display: flex;
	gap: 2px;
	padding: 3px;
	margin-bottom: 16px;
	background: var(--jt-bg-subtle);
	border-radius: var(--jt-radius);
}
.jt-login-tab {
	flex: 1;
	padding: 7px 10px;
	background: transparent;
	border: 0;
	border-radius: calc(var(--jt-radius) - 3px);
	font: inherit;
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--jt-text-secondary);
	cursor: pointer;
	transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}
.jt-login-tab:hover,
.jt-login-tab:focus-visible {
	color: var(--jt-text);
}
.jt-login-tab:focus-visible {
	outline: 2px solid var(--jt-accent);
	outline-offset: -2px;
}
.jt-login-tab.is-active {
	background: var(--jt-bg);
	color: var(--jt-text);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.jt-login-form {
	display: none;
	flex-direction: column;
	gap: 12px;
}
.jt-login-form.is-active { display: flex; }

.jt-login-label {
	display: flex;
	flex-direction: column;
	gap: 5px;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--jt-text-secondary);
	letter-spacing: 0.005em;
}
/* Mirrors .jt-input in jetonomy.css — same border weight, same tokens, same
   single focus ring. It cannot reuse that class: .jt-input lives in
   jetonomy.css, which never loads on a landing page or widget area, and this
   block does. A component rule for a block is fine; a second TOKEN system is
   what was removed.
   The border is --jt-border-strong, not --jt-border: at 1px/--jt-border the
   field boundary measured 1.34:1 against the card and read as invisible (WCAG
   1.4.11 asks 3:1 for a control boundary). The field is now legible primarily
   because it stays on --jt-bg while the card sits on --jt-bg-subtle, so the
   input is a distinct surface in BOTH modes rather than a hairline outline. */
.jt-login-label > input {
	padding: 9px 12px;
	min-height: var(--jt-tap);
	border: 1.5px solid var(--jt-border-strong);
	border-radius: var(--jt-radius);
	background: var(--jt-bg);
	color: var(--jt-text);
	caret-color: var(--jt-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 400;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* No hover background: the card now occupies --jt-bg-subtle, which is exactly
   what this used to hover to — the field would have dissolved into the card on
   hover. .jt-input has no hover state either; focus is the affordance. */
/* One focus indicator, not two. A text input always matches :focus-visible when
   focused, so pairing a box-shadow halo here with an outline below drew a double
   ring — jetonomy.css merged the two for this reason and this now matches.
   No !important here: Reign's `* { box-shadow: none !important }` is scoped to
   @media print and does not touch the screen ring. Verified by real click, not
   by scripted .focus() — element.focus() from devtools/automation did not
   produce the focused computed style and looked like a broken ring. */
.jt-login-label > input:focus,
.jt-login-label > input:focus-visible {
	outline: 0;
	border-color: var(--jt-accent);
	box-shadow: 0 0 0 3px var(--jt-accent-muted);
}
.jt-login-label > input::placeholder { color: var(--jt-text-secondary); }
/* The <label> wraps the checkbox, so the whole row is the hit area — which is
   why it, not the 15px box, has to carry the tap target. Measured 20.9px at
   390px before this. */
.jt-login-remember {
	display: flex;
	align-items: center;
	min-height: var(--jt-tap);
	gap: 7px;
	font-size: 0.82rem;
	color: var(--jt-text-secondary);
	cursor: pointer;
}
.jt-login-remember > input[type="checkbox"] {
	width: 15px;
	height: 15px;
	accent-color: var(--jt-accent);
	margin: 0;
}

.jt-login-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 10px 16px;
	background: var(--jt-accent);
	color: var(--jt-bg);
	border: 0;
	border-radius: var(--jt-radius);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease, transform 0.1s ease;
	margin-top: 4px;
}
.jt-login-submit:hover,
.jt-login-submit:focus-visible {
	background: var(--jt-accent-hover);
	color: var(--jt-bg);
}
.jt-login-submit:focus-visible {
	outline: 2px solid var(--jt-accent);
	outline-offset: 2px;
}
.jt-login-submit:active { transform: scale(0.98); }
.jt-login-submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.jt-login-lostpw {
	align-self: flex-start;
	background: transparent;
	border: 0;
	padding: 0;
	font: inherit;
	font-size: 0.78rem;
	color: var(--jt-text-tertiary);
	text-decoration: none;
	cursor: pointer;
	transition: color 0.15s ease;
}
.jt-login-lostpw:hover,
.jt-login-lostpw:focus-visible {
	color: var(--jt-accent);
	text-decoration: underline;
}
.jt-login-lostpw:focus-visible {
	outline: 2px solid var(--jt-accent);
	outline-offset: 2px;
	border-radius: var(--jt-radius-sm, 4px);
}

.jt-login-forgot-intro {
	margin: 0 0 4px;
	font-size: 0.86rem;
	color: var(--jt-text-secondary);
	line-height: 1.45;
}

.jt-login-message {
	font-size: 0.82rem;
	color: color-mix(in srgb, #dc2626 80%, var(--jt-text));
	margin: 0;
	min-height: 0;
	line-height: 1.35;
}
.jt-login-message:empty { display: none; }
.jt-login-message.is-success {
	color: color-mix(in srgb, #16a34a 80%, var(--jt-text));
}

/* ─── User Panel block (logged-in companion) ────────────────────────── */

.jt-user-panel {
	background: var(--jt-bg);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 18px;
	margin: 0 0 24px;
	position: relative;
	overflow: hidden;
}
.jt-user-panel::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jt-accent) 0%, color-mix(in srgb, var(--jt-accent) 45%, transparent) 100%);
}

.jt-userpanel-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 14px;
	margin-bottom: 10px;
	border-bottom: 1px solid var(--jt-border);
}
.jt-userpanel-avatar {
	width: 44px !important;
	height: 44px !important;
	border-radius: 50%;
	flex: 0 0 44px;
	box-shadow: 0 0 0 2px var(--jt-bg), 0 0 0 3px var(--jt-accent-light);
}
.jt-userpanel-heading { min-width: 0; flex: 1; }
.jt-userpanel-title {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--jt-text);
	margin: 0 0 2px;
	line-height: 1.2;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.jt-userpanel-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 0.78rem;
	color: var(--jt-text-tertiary);
	line-height: 1.2;
}
.jt-userpanel-username {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.jt-userpanel-tl {
	flex: 0 0 auto;
	padding: 1px 6px;
	background: var(--jt-accent-light);
	color: var(--jt-accent);
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.7rem;
	letter-spacing: 0.03em;
}

.jt-userpanel-links {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.jt-userpanel-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 8px 10px;
	border-radius: var(--jt-radius-sm);
	color: var(--jt-text);
	text-decoration: none;
	font-size: 0.88rem;
	font-weight: 500;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.jt-userpanel-link:hover,
.jt-userpanel-link:focus-visible {
	background: var(--jt-bg-hover);
	color: var(--jt-accent);
	text-decoration: none;
	outline: 2px solid var(--jt-accent);
	outline-offset: -2px;
}
.jt-userpanel-link--logout {
	margin-top: 4px;
	padding-top: 10px;
	border-top: 1px solid var(--jt-border);
	border-radius: 0;
	color: var(--jt-text-secondary);
	font-size: 0.82rem;
}
.jt-userpanel-link--logout:hover,
.jt-userpanel-link--logout:focus-visible {
	background: transparent;
	color: color-mix(in srgb, #dc2626 80%, var(--jt-text));
}
.jt-userpanel-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--jt-accent);
	color: var(--jt-bg);
	font-size: 0.72rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* ─── Forum Feed + Trending block ─────────────────────────────────── */

.jt-feed-block {
	background: var(--jt-bg);
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius-lg);
	box-shadow: var(--jt-shadow-sm);
	padding: 20px;
	margin: 0 0 24px;
}

.jt-feed-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 14px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--jt-border);
}

.jt-feed-title {
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--jt-text);
	margin: 0;
	line-height: 1.25;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.jt-feed-viewall {
	flex: 0 0 auto;
	font-size: 0.78rem;
	font-weight: 600;
	color: var(--jt-accent);
	text-decoration: none;
	transition: color 0.15s ease;
}
.jt-feed-viewall:hover,
.jt-feed-viewall:focus-visible {
	color: var(--jt-accent-hover);
	text-decoration: underline;
}
.jt-feed-viewall:focus-visible {
	outline: 2px solid var(--jt-accent);
	outline-offset: 2px;
	border-radius: var(--jt-radius-sm, 4px);
}

/* Trending accent bar + number badge */
.jt-trending-block {
	position: relative;
	overflow: hidden;
}
.jt-trending-block::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--jt-accent) 0%, color-mix(in srgb, var(--jt-accent) 35%, transparent) 100%);
}

/* Shortcode output — works both standalone (any page / page-builder /
   widget) and nested inside the feed/trending block. Like the blocks, it
   inherits --jt-* from :root via the `jetonomy-tokens` dependency, so it
   renders correctly without the main jetonomy.css being on the page. */
.jt-shortcode {
	display: flex;
	flex-direction: column;
	gap: 1px;
	font-family: var(--jt-font);
	color: var(--jt-text);
	line-height: 1.5;
}

.jt-shortcode-post {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 10px;
	border-radius: var(--jt-radius-sm);
	transition: background-color 0.15s ease;
}
.jt-shortcode-post + .jt-shortcode-post {
	border-top: 1px solid var(--jt-border);
}
.jt-shortcode-post:hover {
	background: var(--jt-bg-hover);
}

.jt-shortcode-post-title {
	color: var(--jt-text);
	font-size: 0.92rem;
	font-weight: 600;
	line-height: 1.35;
	text-decoration: none;
	display: block;
}
.jt-shortcode-post-title:hover,
.jt-shortcode-post-title:focus-visible {
	color: var(--jt-accent);
	text-decoration: none;
}
.jt-shortcode-post-title:focus-visible {
	outline: 2px solid var(--jt-accent);
	outline-offset: 2px;
}

.jt-shortcode-post-meta {
	font-size: 0.76rem;
	color: var(--jt-text-tertiary);
	line-height: 1.3;
}

.jt-shortcode-post-stats {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 0.74rem;
	color: var(--jt-text-secondary);
	font-variant-numeric: tabular-nums;
}

.jt-shortcode-empty {
	padding: 18px 12px;
	color: var(--jt-text-tertiary);
	font-size: 0.88rem;
	text-align: center;
}

/* Spaces grid */
.jt-shortcode-spaces {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 12px;
}
.jt-shortcode-space {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 14px;
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius);
	background: var(--jt-bg);
	color: var(--jt-text);
	text-decoration: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.jt-shortcode-space:hover,
.jt-shortcode-space:focus-visible {
	background: var(--jt-bg-hover);
	border-color: var(--jt-accent);
}
.jt-shortcode-space:focus-visible {
	outline: 2px solid var(--jt-accent);
	outline-offset: 2px;
}
.jt-shortcode-space-desc {
	font-size: 0.82rem;
	color: var(--jt-text-secondary);
	line-height: 1.4;
}
.jt-shortcode-space-stats {
	font-size: 0.74rem;
	color: var(--jt-text-tertiary);
	font-variant-numeric: tabular-nums;
}

/* Leaderboard */
.jt-shortcode-leaderboard ol {
	list-style: decimal inside;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.jt-shortcode-leaderboard li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
	border-radius: var(--jt-radius-sm);
}
.jt-shortcode-leaderboard li + li {
	border-top: 1px solid var(--jt-border);
}
.jt-shortcode-leaderboard a {
	color: var(--jt-text);
	text-decoration: none;
	font-weight: 500;
}
.jt-shortcode-leaderboard a:hover { color: var(--jt-accent); }
.jt-shortcode-rep {
	font-size: 0.78rem;
	color: var(--jt-text-tertiary);
	font-variant-numeric: tabular-nums;
}

/* Profile card */
.jt-shortcode-profile-card {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	border: 1px solid var(--jt-border);
	border-radius: var(--jt-radius);
	background: var(--jt-bg);
}
.jt-shortcode-profile-card a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--jt-text);
	text-decoration: none;
}
.jt-shortcode-profile-card a:hover { color: var(--jt-accent); }
.jt-shortcode-profile-card p {
	margin: 0;
	font-size: 0.86rem;
	color: var(--jt-text-secondary);
	line-height: 1.45;
}
.jt-shortcode-profile-stats {
	display: flex;
	gap: 12px;
	font-size: 0.78rem;
	color: var(--jt-text-tertiary);
	font-variant-numeric: tabular-nums;
}

/* Members list */
.jt-shortcode-members {
	display: flex;
	flex-direction: column;
	gap: 1px;
}
.jt-shortcode-member {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 8px 10px;
}
.jt-shortcode-member + .jt-shortcode-member {
	border-top: 1px solid var(--jt-border);
}
.jt-shortcode-member a {
	color: var(--jt-text);
	text-decoration: none;
	font-weight: 500;
}
.jt-shortcode-member a:hover { color: var(--jt-accent); }

/* Trending — two-column layout: rank badge + body */
.jt-shortcode-trending-post {
	flex-direction: row !important;
	align-items: flex-start;
	gap: 12px !important;
}
.jt-shortcode-trending-rank {
	flex: 0 0 28px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	margin-top: 2px;
	border-radius: var(--jt-radius-sm);
	background: var(--jt-accent-light);
	color: var(--jt-accent);
	font-size: 0.82rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
}
.jt-shortcode-trending-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.jt-shortcode-trending-post:hover .jt-shortcode-trending-rank {
	background: var(--jt-accent);
	color: var(--jt-bg);
}

/* ─── Responsive (390px) ───────────────────────────────────────────── */

@media (max-width: 640px) {
	.jt-nav-block,
	.jt-login-block,
	.jt-feed-block {
		padding: 16px;
		border-radius: var(--jt-radius);
	}
	.jt-nav-space > a {
		padding: 9px 10px;
		font-size: 0.95rem;
	}
	.jt-login-tab { font-size: 0.88rem; padding: 9px 10px; }
	.jt-login-label > input { font-size: 16px; } /* avoid iOS zoom */
	.jt-shortcode-post { padding: 10px 6px; }
	.jt-shortcode-spaces { grid-template-columns: 1fr; gap: 10px; }
	.jt-feed-header { margin-bottom: 12px; padding-bottom: 10px; }
	.jt-feed-title { font-size: 0.9rem; }
	.jt-shortcode-trending-rank { width: 26px; height: 26px; flex-basis: 26px; font-size: 0.78rem; }
}

/* ─── Dark mode ─────────────────────────────────────────────────────
 * Nothing here, deliberately.
 *
 * There used to be a hand-maintained list of every block class, duplicated
 * across `.jt-dark` and `[data-theme="dark"]` — ten selectors reassigning the
 * block tokens. It only existed because these blocks declared their own token
 * set and therefore could not inherit the dark one. Now that they share
 * `--jt-*`, dark mode is handled where it always should have been: by
 * reassigning the root tokens once, in jetonomy.css.
 *
 * That list was also a trap. Every new block had to be added to it by hand or
 * it silently rendered light on a dark page, and the values delegated back with
 * `var(--jt-bg, #171717)` — a fallback that could never fire, because --jt-bg is
 * always defined. Miss the list and you got a white card; hit it and you got
 * whatever --jt-bg already said.
 */

/* ========================================================================
 * Compose Topic (block + shortcode) — 1.3.7
 * Self-contained. Works outside .jt-app / community routes. Mobile-first.
 * All values reference --jt-* tokens; fall back to WP presets then hex.
 * ========================================================================*/
.jt-compose-topic-embed {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	padding: 1rem;
	background: var(--jt-bg, var(--jt-bg, var(--wp--preset--color--base, #ffffff)));
	border: 1px solid var(--jt-border, var(--jt-border, #e5e7eb));
	border-radius: var(--jt-radius, 8px);
	font-family: var(--jt-font, inherit);
	color: var(--jt-text, var(--jt-text, var(--wp--preset--color--contrast, #1a1a1a)));
	box-sizing: border-box;
	max-width: 100%;
}

.jt-compose-topic-embed.jt-compose-topic-login {
	flex-direction: row;
	align-items: flex-start;
	gap: 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--jt-bg-subtle, var(--jt-bg-subtle, #f9fafb));
}

.jt-compose-topic-login-icon {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: var(--jt-radius-full, 999px);
	background: var(--jt-accent-light, color-mix(in srgb, var(--jt-accent, #3b82f6) 12%, transparent));
	color: var(--jt-accent, #3b82f6);
}

.jt-compose-topic-login-body {
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.jt-compose-topic-login-title {
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
	font-weight: 600;
	color: var(--jt-text, var(--jt-text, #1a1a1a));
	font-family: var(--jt-font-heading, var(--jt-font, inherit));
}

.jt-compose-topic-login-lede {
	margin: 0;
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--jt-text-secondary, #4b5563);
}
.jt-compose-topic-login-lede strong {
	color: var(--jt-text, var(--jt-text, #1a1a1a));
	font-weight: 600;
}

.jt-compose-topic-login-actions {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
	margin-top: 0.375rem;
}

.jt-compose-topic-login-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0.5rem 1rem;
	border-radius: var(--jt-radius-sm, 6px);
	background: var(--jt-accent, #3b82f6);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	line-height: 1.2;
	transition: background var(--jt-dur, 150ms) var(--jt-ease, ease);
}
.jt-compose-topic-login-primary:hover,
.jt-compose-topic-login-primary:focus-visible {
	background: var(--jt-accent-hover, color-mix(in srgb, var(--jt-accent, #3b82f6) 88%, #000));
	color: #fff;
	text-decoration: none;
}
.jt-compose-topic-login-primary:focus-visible {
	outline: 2px solid var(--jt-accent, #3b82f6);
	outline-offset: 2px;
}

.jt-compose-topic-login-secondary {
	font-size: 0.875rem;
	color: var(--jt-accent, #3b82f6);
	text-decoration: none;
	border-bottom: 1px dashed currentColor;
	padding-bottom: 1px;
	transition: color var(--jt-dur, 150ms) var(--jt-ease, ease);
}
.jt-compose-topic-login-secondary:hover,
.jt-compose-topic-login-secondary:focus-visible {
	color: var(--jt-accent-hover, color-mix(in srgb, var(--jt-accent, #3b82f6) 78%, #000));
	text-decoration: none;
	border-bottom-color: transparent;
}
.jt-compose-topic-login-secondary:focus-visible {
	outline: 2px solid var(--jt-accent, #3b82f6);
	outline-offset: 3px;
	border-radius: 2px;
}

.jt-compose-topic-field {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
}

.jt-compose-topic-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--jt-text-secondary, #4b5563);
}

.jt-compose-topic-posting-to {
	margin: 0 0 0.25rem;
	font-size: 0.875rem;
	color: var(--jt-text-secondary, #4b5563);
}

.jt-compose-topic-space,
.jt-compose-topic-title,
.jt-compose-topic-body {
	width: 100%;
	padding: 0.5rem 0.75rem;
	border: 1px solid var(--jt-border, var(--jt-border, #e5e7eb));
	border-radius: var(--jt-radius-sm, 6px);
	background: var(--jt-bg, var(--jt-bg, #ffffff));
	color: inherit;
	font: inherit;
	box-sizing: border-box;
}

.jt-compose-topic-body {
	resize: vertical;
	min-height: 8rem;
}

.jt-compose-topic-space:focus-visible,
.jt-compose-topic-title:focus-visible,
.jt-compose-topic-body:focus-visible {
	outline: 2px solid var(--jt-accent, #3b82f6);
	outline-offset: 1px;
	border-color: transparent;
}

.jt-compose-topic-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.jt-compose-topic-error {
	margin: 0;
	color: var(--jt-danger, #b91c1c);
	font-size: 0.875rem;
	display: none;
	flex: 1 1 auto;
	min-width: 0;
}
.jt-compose-topic-error.is-shown { display: block; }

.jt-compose-topic-empty {
	color: var(--jt-text-tertiary, #6b7280);
	font-size: 0.8125rem;
	margin-top: 0.25rem;
}

.jt-compose-topic-submit {
	cursor: pointer;
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: var(--jt-radius-sm, 6px);
	background: var(--jt-accent, #3b82f6);
	color: #fff;
	font: inherit;
	font-weight: 600;
	min-width: 8rem;
}
.jt-compose-topic-submit:hover:not([disabled]) {
	background: var(--jt-accent-hover, color-mix(in srgb, var(--jt-accent, #3b82f6) 88%, #000));
}
.jt-compose-topic-submit[disabled],
.jt-compose-topic-submit.is-submitting {
	opacity: 0.65;
	cursor: not-allowed;
}

/* Block editor preview — static mock so the block is safe to drop anywhere. */
.jt-compose-topic-preview-frame {
	border: 1px dashed var(--jt-border, #e5e7eb);
	border-radius: var(--jt-radius, 8px);
	padding: 1rem;
	background: var(--jt-bg-subtle, #f9fafb);
}
.jt-compose-topic-preview-badge {
	margin: 0 0 0.5rem;
	font-size: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--jt-text-tertiary, #6b7280);
}
.jt-compose-topic-preview-mock {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.jt-compose-topic-preview-field {
	height: 2rem;
	border-radius: var(--jt-radius-sm, 6px);
	background: var(--jt-bg, #fff);
	border: 1px solid var(--jt-border, #e5e7eb);
}
.jt-compose-topic-preview-field-body { height: 5rem; }
.jt-compose-topic-preview-button {
	align-self: flex-end;
	padding: 0.375rem 0.75rem;
	border-radius: var(--jt-radius-sm, 6px);
	background: var(--jt-accent, #3b82f6);
	color: #fff;
	font-size: 0.875rem;
}

/* ----- Mobile (390px target) ------------------------------------------- */
@media (max-width: 640px) {
	.jt-compose-topic-embed {
		padding: 0.75rem;
		border-radius: var(--jt-radius-sm, 6px);
	}
	.jt-compose-topic-actions {
		flex-direction: column;
		align-items: stretch;
	}
	.jt-compose-topic-submit {
		width: 100%;
		min-width: 0;
	}
	.jt-compose-topic-error {
		text-align: center;
	}

	.jt-compose-topic-embed.jt-compose-topic-login {
		flex-direction: column;
		gap: 0.75rem;
		padding: 1rem;
	}
	.jt-compose-topic-login-actions {
		flex-direction: column;
		align-items: stretch;
		gap: 0.625rem;
	}
	.jt-compose-topic-login-primary {
		width: 100%;
	}
	.jt-compose-topic-login-secondary {
		text-align: center;
	}
}