/*
 * LopoRail Community — front-end styles.
 *
 * Wrapper + palette decision (roadmap #571, owner-approved AFTER #572 — this
 * is the current decision): the forum renders inside the theme's community
 * zone — wrapper carries `.odf .zone-community` and the base palette is
 * inherited from the theme's .zone-community design tokens (rail.css), so the
 * forum tracks the design system (plum + electric lime). The legacy scoped
 * green palette is kept as a fallback in `.odf:not(.zone-community)` for any
 * context outside the zone. The theme's shared social-layer components
 * (.spotstrip/.feed-card/.streak/.dm-row/.composer__tab) keep working: the
 * token-name bridge below maps their names onto the active palette. Railway
 * status tokens (ok/warn/danger) and type/radii remain plugin-owned — the
 * theme does not define them.
 */

/* Legacy fallback palette (275° ink + signal green) for contexts where the
   forum renders OUTSIDE the community zone. Inside .zone-community the theme
   design tokens win; green is the models/.zone-gauge signal. */
.odf:not(.zone-community) {
	/* dark · default (matches loporail.com) */
	--bg:            oklch(13.5% 0.012 275);
	--surface:       oklch(17.5% 0.014 275);
	--surface-2:     oklch(22%   0.016 275);
	--fg:            oklch(97%   0.006 275);
	--muted:         oklch(72%   0.016 275);
	--border:        oklch(28%   0.016 275);
	--border-strong: oklch(54%   0.02  275);
	--accent:        oklch(72%   0.19  148);
	--accent-2:      oklch(64%   0.13  166);
	--accent-3:      oklch(78%   0.15  60);
	--on-accent:     oklch(15%   0.012 275);
}

/* Container base plus the tokens the theme does not own (railway status,
 * type, radii). Derived colours resolve against the active --accent, so they
 * follow the forum's scoped green accent above. */
.odf {
	--accent-soft:   color-mix(in oklch, var(--accent) 16%, transparent);
	--accent2-soft:  color-mix(in oklch, var(--accent-2) 16%, transparent);
	--fg-soft:       color-mix(in oklch, var(--fg) 6%, transparent);
	--ok:            oklch(80%   0.19  150);
	--warn:          oklch(82%   0.15  80);
	--danger:        oklch(70%   0.20  25);
	--info:          oklch(76%   0.13  245);

	--solved:      var(--ok);
	--solved-soft: color-mix(in oklch, var(--solved) 15%, transparent);
	--rescue:      var(--accent-3);
	--rescue-soft: color-mix(in oklch, var(--rescue) 16%, transparent);

	--font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-body:    -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--font-mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;

	--radius:    12px;
	--radius-lg: 24px;
	--pill:      999px;

	--shadow-sm: 0 1px 0 oklch(100% 0 0 / 0.03);
	--shadow-lg: 0 18px 40px oklch(0% 0 0 / 0.35);

	--gradient-signal: linear-gradient(96deg, var(--accent-2) 0%, var(--accent) 52%, var(--accent-3) 100%);
	--fg-on-accent: var(--on-accent);

	/* Token-name bridge: adopted theme components (spot strip, feed cards,
	   view switch, streak, composer, DMs) read these names. Map them onto the
	   forum's own scoped tokens so they inherit the green palette instead of
	   the theme's global :root values. --gap-sm/md/lg mirror the theme scale. */
	--grad:        var(--gradient-signal);
	--radius-pill: var(--pill);
	--shadow-2:    var(--shadow-lg);
	--gap-sm:      12px;
	--gap-md:      20px;
	--gap-lg:      32px;

	background: var(--bg);
	color: var(--fg);
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.55;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
}

/* ── site container ─────────────────────────────────────────────────────
   The theme no longer wraps plugin output in a container (rail.css
   .loporail-designed neutraliser sets #content to full width), so the forum
   supplies its own centred container to match the community hub pattern
   (.zone-community > .container). Geometry mirrors the theme's
   --container/--gutter with fallbacks so it survives a theme swap. */
.odf-shell {
	width: 100%;
	max-width: var(--container, 1220px);
	margin-inline: auto;
	padding-inline: var(--gutter, 32px);
	padding-block: var(--gap-lg, 32px);
}

.odf[data-theme="light"]:not(.zone-community) {
	--bg:            oklch(98.5% 0.004 275);
	--surface:       oklch(100%  0     0);
	--surface-2:     oklch(96.5% 0.006 275);
	--fg:            oklch(20%   0.02  275);
	--muted:         oklch(46%   0.02  275);
	--border:        oklch(90%   0.008 275);
	--border-strong: oklch(54%   0.02  275);
	--accent:        oklch(46%   0.12  150);
	--accent-2:      oklch(38%   0.07  166);
	--accent-3:      oklch(58%   0.16  55);
	--on-accent:     oklch(99%   0.004 275);
	--fg-on-accent:  var(--on-accent);
	--shadow-lg: 0 18px 40px oklch(30% 0.03 275 / 0.15);
}

/* Bridge: the theme's light rule ([data-theme="light"] .zone-community) needs
   an ANCESTOR carrying data-theme, but the forum toggles data-theme on the
   wrapper itself. Mirror of the rail.css light .zone-community values —
   re-sync when the design system retunes. */
.zone-community[data-theme="light"] {
	color-scheme: light;
	--bg:            oklch(98% 0.006 310);
	--surface:       oklch(100% 0 0);
	--surface-2:     oklch(96% 0.010 310);
	--fg:            oklch(21% 0.03 310);
	--muted:         oklch(47% 0.03 310);
	--border:        oklch(90% 0.012 310);
	--border-strong: oklch(52% 0.032 310);
	--accent:        oklch(52% 0.15 105);
	--accent-2:      oklch(46% 0.19 300);
	--accent-3:      oklch(50% 0.16 350);
	--on-accent:     oklch(99% 0.004 105);
	--accent-soft:   color-mix(in oklch, var(--accent) 8%, transparent);
	--fg-on-accent:  var(--on-accent);
	--shadow-lg: 0 30px 70px -44px color-mix(in oklch, var(--fg) 40%, transparent);
}

/* Auto: inherit the visitor's device preference, still dark by default. */
@media (prefers-color-scheme: light) {
	.odf[data-theme="auto"]:not(.zone-community) {
		--bg:            oklch(98.5% 0.004 275);
		--surface:       oklch(100%  0     0);
		--surface-2:     oklch(96.5% 0.006 275);
		--fg:            oklch(20%   0.02  275);
		--muted:         oklch(46%   0.02  275);
		--border:        oklch(90%   0.008 275);
		--border-strong: oklch(54%   0.02  275);
		--accent:        oklch(46%   0.12  150);
		--accent-2:      oklch(38%   0.07  166);
		--accent-3:      oklch(58%   0.16  55);
		--on-accent:     oklch(99%   0.004 275);
		--fg-on-accent:  var(--on-accent);
		--shadow-lg: 0 18px 40px oklch(30% 0.03 275 / 0.15);
	}

	.zone-community[data-theme="auto"] {
		color-scheme: light;
		--bg:            oklch(98% 0.006 310);
		--surface:       oklch(100% 0 0);
		--surface-2:     oklch(96% 0.010 310);
		--fg:            oklch(21% 0.03 310);
		--muted:         oklch(47% 0.03 310);
		--border:        oklch(90% 0.012 310);
		--border-strong: oklch(52% 0.032 310);
		--accent:        oklch(52% 0.15 105);
		--accent-2:      oklch(46% 0.19 300);
		--accent-3:      oklch(50% 0.16 350);
		--on-accent:     oklch(99% 0.004 105);
		--accent-soft:   color-mix(in oklch, var(--accent) 8%, transparent);
		--fg-on-accent:  var(--on-accent);
		--shadow-lg: 0 30px 70px -44px color-mix(in oklch, var(--fg) 40%, transparent);
	}
}

.odf *,
.odf *::before,
.odf *::after { box-sizing: border-box; }

.odf a { color: inherit; text-decoration: none; }
.odf img { display: block; max-width: 100%; }
.odf p { margin: 0 0 1em; text-wrap: pretty; }
.odf p:last-child { margin-bottom: 0; }
.odf h1, .odf h2, .odf h3 { margin: 0; font-family: var(--font-display); font-weight: 600; text-wrap: balance; letter-spacing: -0.01em; }
.odf button { font: inherit; cursor: pointer; }
.odf :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
.odf .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.odf .odf-meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.odf .odf-muted { color: var(--muted); }

/* ── search bar ─────────────────────────────────────────────────────── */
.odf-searchbar {
	display: flex;
	gap: 12px;
	align-items: stretch;
	margin-bottom: 24px;
}
.odf-search {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.odf-search:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.odf-search__icon { display: grid; place-items: center; padding-left: 12px; color: var(--muted); }
.odf-search__icon svg { width: 17px; height: 17px; }
.odf-search__input {
	flex: 1;
	border: 0;
	background: transparent;
	color: var(--fg);
	font: inherit;
	padding: 11px 12px 11px 10px;
	outline: none;
}
.odf-search__input::placeholder { color: color-mix(in oklch, var(--muted) 80%, transparent); }
.odf-search__submit {
	border: 0;
	background: transparent;
	color: var(--fg);
	font-size: 14px;
	font-weight: 550;
	padding: 0 16px;
	border-left: 1px solid var(--border);
	border-radius: 0 var(--radius) var(--radius) 0;
	transition: background 0.15s ease;
}
.odf-search__submit:hover { background: var(--fg-soft); }

/* ── buttons ────────────────────────────────────────────────────────── */
.odf-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 10px 16px;
	border-radius: var(--radius);
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg);
	font-size: 14px;
	font-weight: 550;
	transition: background 0.15s ease, border-color 0.15s ease, transform 0.05s ease;
	white-space: nowrap;
}
.odf-btn:hover { border-color: color-mix(in oklch, var(--fg) 35%, var(--border)); background: var(--fg-soft); }
.odf-btn:active { transform: translateY(1px); }
.odf-btn svg { width: 16px; height: 16px; }
.odf-btn--primary {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--fg-on-accent);
}
.odf-btn--primary:hover {
	background: color-mix(in oklch, var(--accent) 86%, black);
	border-color: color-mix(in oklch, var(--accent) 86%, black);
	color: var(--fg-on-accent);
}
.odf-btn--sm { padding: 7px 12px; font-size: 13px; }
.odf-new-topic { min-height: 44px; }

/* ── layout ─────────────────────────────────────────────────────────── */
.odf-layout {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 32px;
	align-items: start;
}
.odf-layout--profile { grid-template-columns: 1fr 300px; }
.odf-main { min-width: 0; }

.odf-rail {
	position: sticky;
	top: 24px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 10px;
}
.odf-rail__title {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 8px 10px;
}
.odf-rail__nav { display: flex; flex-direction: column; gap: 2px; }
.odf-rail__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 10px;
	border-radius: 8px;
	color: var(--fg);
	font-size: 14px;
	transition: background 0.12s ease, color 0.12s ease;
}
.odf-rail__item:hover { background: var(--fg-soft); }
.odf-rail__item.is-active {
	background: var(--fg-soft);
	color: var(--fg);
	font-weight: 600;
}
.odf-rail__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-count { font-size: 12px; color: var(--muted); flex: none; }
.odf-rail__item.is-active .odf-count { color: inherit; }

/* ── main head + tabs ───────────────────────────────────────────────── */
.odf-main__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.odf-main__title { font-size: 24px; font-weight: 650; }
.odf-main__sub { color: var(--muted); font-size: 14px; margin: 4px 0 0; max-width: 60ch; }
.odf-tabs {
	display: inline-flex;
	gap: 2px;
	padding: 3px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: 999px;
}
.odf-tab {
	padding: 6px 13px;
	border-radius: 999px;
	font-size: 13px;
	color: var(--muted);
	transition: background 0.12s ease, color 0.12s ease;
}
.odf-tab:hover { color: var(--fg); background: var(--fg-soft); }
.odf-tab.is-active { background: var(--fg); color: var(--bg); font-weight: 600; }

/* ── topic list ─────────────────────────────────────────────────────── */
.odf-topics { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.odf-topic {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 16px;
	align-items: start;
	padding: 16px 4px;
	border-bottom: 1px solid var(--border);
	transition: background 0.12s ease;
}
.odf-topic:hover { background: var(--fg-soft); }
.odf-topic.is-pinned { box-shadow: inset 2px 0 0 var(--accent); padding-left: 12px; }
.odf-topic.is-solved { box-shadow: inset 2px 0 0 var(--solved); padding-left: 12px; }
.odf-topic.is-rescue { box-shadow: inset 2px 0 0 var(--rescue); padding-left: 12px; }
.odf-topic__body { min-width: 0; }
.odf-topic__title { font-family: var(--font-display); font-size: 17.5px; font-weight: 600; line-height: 1.35; }
.odf-topic__title a { transition: color 0.12s ease; }
.odf-topic__title a:hover { color: color-mix(in oklch, var(--accent) 78%, var(--fg)); }
.odf-topic__excerpt { color: var(--muted); font-size: 13.5px; margin: 4px 0 8px; }
.odf-topic__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.odf-byline { display: inline-flex; align-items: center; gap: 6px; }
.odf-byline a:hover { color: var(--fg); text-decoration: underline; text-underline-offset: 2px; }
.odf-dotsep { color: var(--border); }
.odf-topic__metrics { display: flex; gap: 18px; text-align: right; margin: 2px 0 0; }
.odf-metric dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.odf-metric dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }

/* ── vote button ────────────────────────────────────────────────────── */
.odf-votebtn {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	padding: 6px 4px;
	border: 1px solid var(--border);
	background: var(--surface);
	border-radius: var(--radius);
	color: var(--muted);
	transition: border-color 0.12s ease, color 0.12s ease, background 0.12s ease;
}
.odf-votebtn svg { width: 15px; height: 15px; }
.odf-votebtn__score { font-size: 13px; font-weight: 650; color: var(--fg); }
.odf-votebtn:hover { border-color: color-mix(in oklch, var(--accent) 55%, var(--border)); color: var(--accent); }
.odf-votebtn:hover .odf-votebtn__score { color: var(--accent); }
.odf-votebtn.is-voted { background: var(--accent-soft); border-color: var(--accent); color: color-mix(in oklch, var(--accent) 82%, var(--fg)); }
.odf-votebtn.is-voted .odf-votebtn__score { color: inherit; }
.odf-votebtn.is-busy { opacity: 0.6; pointer-events: none; }
.odf-votebtn--pill {
	flex-direction: row;
	gap: 7px;
	padding: 7px 13px;
	border-radius: 999px;
}
.odf-votebtn__label { font-size: 13px; font-weight: 550; }

/* ── status pill / tags / role pill ─────────────────────────────────── */
.odf-status {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--muted);
}
.odf-dot { width: 7px; height: 7px; border-radius: 999px; background: currentColor; flex: none; }
.odf-status--pinned { color: color-mix(in oklch, var(--accent) 82%, var(--fg)); }
.odf-status--locked { color: var(--warn); }
.odf-status--open { color: var(--muted); }
.odf-status--solved { color: var(--solved); font-weight: 600; }
.odf-status--needs { color: var(--rescue); }
.odf-status--needs .odf-dot { box-shadow: 0 0 0 3px var(--rescue-soft); }
.odf-seal { width: 14px; height: 14px; }

/* ── railway entity chips ───────────────────────────────────────────── */
.odf-entities {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 10px 0 0;
}
.odf-entity {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 10px 4px 6px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface-2);
	font-size: 12px;
	line-height: 1;
	transition: border-color 0.12s ease, color 0.12s ease;
}
.odf-entity:hover { border-color: var(--accent); }
.odf-entity__type {
	font-family: var(--font-mono);
	font-size: 9.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--on-accent);
	background: var(--accent);
	border-radius: var(--pill);
	padding: 3px 7px;
}
.odf-entity__label { color: var(--fg); font-weight: 550; }
.odf-entity--station .odf-entity__type { background: var(--accent-2); }
.odf-entity--operator .odf-entity__type { background: var(--accent-3); color: var(--on-accent); }
.odf-entity--heritage .odf-entity__type { background: var(--info); color: var(--on-accent); }
.odf-entity--event .odf-entity__type { background: var(--ok); color: var(--on-accent); }

/* ── composer: entity attach field ──────────────────────────────────── */
.odf-entityfield {
	margin: 18px 0 0;
	padding: 14px 16px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-entityfield legend {
	padding: 0 6px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
}
.odf-entityfield__lead { margin: 2px 0 12px; color: var(--muted); font-size: 13px; }
.odf-entityfield__rows { display: flex; flex-direction: column; gap: 8px; }
.odf-entityfield__row {
	display: grid;
	grid-template-columns: 140px 1.2fr 1fr auto;
	gap: 8px;
	align-items: center;
}
.odf-entityfield__remove {
	width: 32px;
	height: 32px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: transparent;
	color: var(--muted);
	font-size: 16px;
	line-height: 1;
}
.odf-entityfield__remove:hover { border-color: var(--danger); color: var(--danger); }
.odf-entityfield__add { margin-top: 10px; }
@media (max-width: 640px) {
	.odf-entityfield__row { grid-template-columns: 1fr; }
	.odf-entityfield__remove { justify-self: end; }
}
.odf-tag {
	display: inline-flex;
	align-items: center;
	padding: 3px 9px;
	border: 1px solid var(--border);
	border-radius: 999px;
	font-size: 11.5px;
	color: var(--muted);
	transition: border-color 0.12s ease, color 0.12s ease;
}
.odf-tag:hover { border-color: var(--fg); color: var(--fg); }
.odf-rolepill {
	display: inline-flex;
	align-items: center;
	padding: 2px 7px;
	border-radius: 999px;
	border: 1px solid var(--accent);
	color: color-mix(in oklch, var(--accent) 78%, var(--fg));
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.odf-rolepill--solid { background: var(--accent); color: var(--fg-on-accent); border-color: var(--accent); }

/* ── breadcrumb ─────────────────────────────────────────────────────── */
.odf-breadcrumb {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--muted);
	margin-bottom: 16px;
}
.odf-breadcrumb a:hover { color: var(--fg); }
.odf-breadcrumb__sep { color: var(--border); }

/* ── posts (OP + replies) ───────────────────────────────────────────── */
.odf-post {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 20px 22px;
}
.odf-post--op { margin-bottom: 28px; }
.odf-post--op.is-locked { border-color: color-mix(in oklch, var(--warn) 40%, var(--border)); }
.odf-post--op.is-solved { border-color: color-mix(in oklch, var(--solved) 42%, var(--border)); }
.odf-post--reply { margin-bottom: 12px; }
.odf-post--reply.is-staff { border-left: 2px solid var(--accent); }
.odf-post--reply.is-accepted { border-color: color-mix(in oklch, var(--solved) 50%, var(--border)); background: color-mix(in oklch, var(--solved) 5%, var(--surface)); }

/* ── accepted answer ────────────────────────────────────────────────── */
.odf-answer {
	border: 1px solid color-mix(in oklch, var(--solved) 45%, var(--border));
	border-radius: var(--radius-lg);
	padding: 8px 12px 0;
	margin-bottom: 20px;
	background: color-mix(in oklch, var(--solved) 6%, var(--surface));
	box-shadow: var(--shadow-sm);
}
.odf-answer__flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 6px 4px 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--solved);
}
.odf-answer__flag svg { width: 14px; height: 14px; }
.odf-answer__flag--inline { margin: 0; color: var(--solved); }
.odf-answer .odf-post--reply { margin-bottom: 8px; }
.odf-post__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid var(--border);
}
.odf-post__author { display: flex; align-items: center; gap: 11px; min-width: 0; }
.odf-post__author > div { min-width: 0; }
.odf-avatar { border-radius: 999px; }
.odf-avatar--xs { width: 20px; height: 20px; }
.odf-avatar--xl { width: 96px; height: 96px; }
.odf-post__name { display: inline-block; font-weight: 600; font-size: 15px; margin-right: 6px; }
.odf-post__name:hover { text-decoration: underline; text-underline-offset: 2px; }
.odf-post__time { display: block; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.odf-post__time time { color: inherit; }
.odf-post__actions { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; justify-content: flex-end; }
.odf-post__floor { font-family: var(--font-mono); font-size: 12px; color: var(--muted); margin-right: 4px; }
.odf-act {
	border: 0;
	background: transparent;
	color: var(--muted);
	font-size: 12.5px;
	padding: 5px 8px;
	border-radius: 7px;
	transition: background 0.12s ease, color 0.12s ease;
}
.odf-act:hover { background: var(--fg-soft); color: var(--fg); }
.odf-act--danger:hover { color: var(--danger); background: color-mix(in oklch, var(--danger) 10%, transparent); }
.odf-act--report:hover { color: var(--warn); }
.odf-act--accept { color: var(--solved); font-weight: 600; }
.odf-act--accept:hover { background: var(--solved-soft); color: color-mix(in oklch, var(--solved) 80%, var(--fg)); }
.odf-act--accept.is-accepted { color: var(--muted); font-weight: 500; }
.odf-post__title { font-family: var(--font-display); font-size: 28px; line-height: 1.22; font-weight: 650; margin-bottom: 12px; }
.odf-post__body { font-size: 15.5px; line-height: 1.65; overflow-wrap: break-word; }
.odf-post__body p { margin-bottom: 0.9em; }
.odf-post__foot {
	display: flex;
	align-items: center;
	gap: 14px;
	flex-wrap: wrap;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
}
.odf-post__stat { font-size: 12px; color: var(--muted); }
.odf-post__foot .odf-act--report { margin-left: auto; }

/* inline editor injected by JS */
.odf-editor { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.odf-editor__actions { display: flex; gap: 8px; align-items: center; }

/* ── replies + composer ─────────────────────────────────────────────── */
.odf-replies { margin-bottom: 28px; }
.odf-replies__head { margin-bottom: 12px; }
.odf-replies__head h2 { font-size: 15px; font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.odf-replies__list { list-style: none; margin: 0; padding: 0; }
.odf-replies__empty { color: var(--muted); font-size: 14px; padding: 18px 0; }

.odf-composer { margin-top: 8px; }
.odf-replyform, .odf-compose {
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 18px 20px;
}
.odf-replyform__head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.odf-replyform__head label { font-weight: 600; font-size: 14px; }
.odf-replyform__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; }

.odf-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.odf-field > span { font-size: 13px; color: var(--muted); font-weight: 500; }
.odf-input, .odf-textarea, .odf-select {
	width: 100%;
	padding: 11px 13px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	font-size: 14.5px;
}
.odf-input:focus, .odf-textarea:focus, .odf-select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-soft);
}
.odf-textarea { resize: vertical; line-height: 1.6; min-height: 90px; }

.odf-formmsg { font-size: 13px; color: var(--muted); }
.odf-formmsg.is-error { color: var(--danger); }
.odf-formmsg.is-ok { color: color-mix(in oklch, var(--accent) 80%, var(--fg)); }

/* ── compose page ───────────────────────────────────────────────────── */
.odf-compose { max-width: 720px; }
.odf-compose__head { margin-bottom: 20px; }
.odf-compose__head h1 { font-size: 26px; font-weight: 650; margin-bottom: 6px; }
.odf-compose__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.odf-compose__actions { display: flex; gap: 10px; }
.odf-compose__standards { margin: 12px 0 0; font-size: 12.5px; color: var(--muted); }
.odf-compose__standards a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* ── notices + empty + pager ────────────────────────────────────────── */
.odf-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 16px 18px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	font-size: 14px;
	color: var(--muted);
}
.odf-notice strong { color: var(--fg); }
.odf-notice--lock { border-color: color-mix(in oklch, var(--warn) 40%, var(--border)); }
.odf-notice .odf-btn { margin-left: auto; }
.odf-notice--panel { flex-direction: column; align-items: center; text-align: center; padding: 40px 20px; }

.odf-empty {
	text-align: center;
	padding: 48px 20px;
	border: 1px dashed var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-empty--panel { border-style: solid; }
.odf-empty__title { font-size: 17px; font-weight: 650; margin: 0 0 6px; }
.odf-empty__text { color: var(--muted); font-size: 14px; margin: 0 auto 18px; max-width: 46ch; }

.odf-pager { display: flex; gap: 4px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.odf-pager__item {
	min-width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--border);
	border-radius: 8px;
	font-family: var(--font-mono);
	font-size: 13px;
	color: var(--fg);
	transition: background 0.12s ease, border-color 0.12s ease;
}
.odf-pager__item:hover { background: var(--fg-soft); border-color: var(--fg); }
.odf-pager__item.is-current { background: var(--accent); border-color: var(--accent); color: var(--fg-on-accent); font-weight: 600; }

/* ── profile ────────────────────────────────────────────────────────── */
.odf-profile-head {
	display: flex;
	align-items: flex-start;
	gap: 22px;
	padding-bottom: 24px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--border);
	flex-wrap: wrap;
}
.odf-profile-head__id { flex: 1; min-width: 240px; }
.odf-profile-head__name { font-size: 26px; font-weight: 650; display: flex; align-items: center; gap: 10px; }
.odf-profile-head__handle { font-family: var(--font-mono); font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.odf-profile-head__bio { font-size: 15px; max-width: 62ch; margin: 0 0 14px; }
.odf-profile-head__facts { list-style: none; display: flex; flex-wrap: wrap; gap: 20px; margin: 0; padding: 0; font-size: 13.5px; }
.odf-profile-head__facts .odf-meta { margin-right: 6px; }

.odf-statrow {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--border);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 0 0 32px;
}
.odf-statrow__item { background: var(--surface); padding: 18px 20px; }
.odf-statrow dt { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.odf-statrow dd { margin: 6px 0 0; font-size: 30px; font-weight: 650; line-height: 1; }
.odf-statrow__item--lead { background: color-mix(in oklch, var(--solved) 6%, var(--surface)); }
.odf-statrow__item--lead dt { color: color-mix(in oklch, var(--solved) 66%, var(--muted)); }
.odf-statrow__item--lead dd { color: color-mix(in oklch, var(--solved) 62%, var(--fg)); }

.odf-activity { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--border); }
.odf-activity__row {
	display: grid;
	grid-template-columns: 92px 1fr auto;
	gap: 16px;
	align-items: center;
	padding: 13px 4px;
	border-bottom: 1px solid var(--border);
	font-size: 14px;
}
.odf-activity__kind {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
}
.odf-activity__kind.is-topic { color: color-mix(in oklch, var(--accent) 78%, var(--fg)); }
.odf-activity__body a:hover { text-decoration: underline; text-underline-offset: 2px; }

.odf-minilist { list-style: none; margin: 0; padding: 4px 0; }
.odf-minilist__row {
	display: flex;
	justify-content: space-between;
	gap: 10px;
	padding: 8px 10px;
	border-radius: 8px;
	font-size: 13.5px;
}
.odf-minilist__row:hover { background: var(--fg-soft); }
.odf-minilist__row a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── modal ──────────────────────────────────────────────────────────── */
.odf-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: grid;
	place-items: center;
	padding: 20px;
	background: color-mix(in oklch, var(--fg) 45%, transparent);
	backdrop-filter: blur(2px);
}
.odf-modal[hidden] { display: none; }
.odf-modal__panel {
	width: 100%;
	max-width: 440px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 24px;
	box-shadow: 0 24px 60px color-mix(in oklch, var(--fg) 30%, transparent);
}
.odf-modal__panel h2 { font-size: 19px; font-weight: 650; margin-bottom: 6px; }
.odf-modal__lead { color: var(--muted); font-size: 13.5px; margin-bottom: 16px; }
.odf-modal__actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }

/* toast */
.odf-toast {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%) translateY(8px);
	background: var(--fg);
	color: var(--bg);
	font-size: 13.5px;
	padding: 10px 16px;
	border-radius: 999px;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s ease, transform 0.2s ease;
	z-index: 100001;
}
.odf-toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.odf-toast.is-error { background: var(--danger); color: oklch(99% 0 0); }

/* ── admin tweaks ───────────────────────────────────────────────────── */
.odf-admin__cols { display: flex; gap: 24px; align-items: flex-start; margin-top: 16px; }
@media (max-width: 900px) { .odf-admin__cols { flex-direction: column; } }

/* ── rescue queue ───────────────────────────────────────────────────── */
.odf-rescue {
	margin: 0 0 24px;
	background: var(--surface);
	border: 1px solid color-mix(in oklch, var(--rescue) 34%, var(--border));
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.odf-rescue__head {
	display: flex;
	align-items: center;
	gap: 13px;
	padding: 15px 18px;
	border-bottom: 1px solid color-mix(in oklch, var(--rescue) 22%, var(--border));
	background: color-mix(in oklch, var(--rescue) 7%, var(--surface));
}
.odf-rescue__mark {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	color: var(--rescue);
	background: var(--rescue-soft);
	flex: none;
}
.odf-rescue__mark svg { width: 18px; height: 18px; }
.odf-rescue__title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.odf-rescue__sub { margin: 2px 0 0; font-size: 12.5px; color: var(--muted); }
.odf-rescue__count {
	margin-left: auto;
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: color-mix(in oklch, var(--rescue) 62%, var(--fg));
	border: 1px solid color-mix(in oklch, var(--rescue) 40%, var(--border));
	border-radius: 999px;
	padding: 4px 10px;
	white-space: nowrap;
}
.odf-rescue__list { list-style: none; margin: 0; padding: 0; }
.odf-rescue__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	gap: 16px;
	padding: 13px 18px;
	border-top: 1px solid var(--border);
}
.odf-rescue__row:first-child { border-top: 0; }
.odf-rescue__q { font-weight: 600; font-size: 14.5px; }
.odf-rescue__q:hover { text-decoration: underline; text-underline-offset: 2px; }
.odf-rescue__meta { font-size: 12px; color: var(--muted); white-space: nowrap; }

.odf-metoo {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid var(--border);
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	font-size: 12.5px;
	font-weight: 550;
	padding: 6px 12px;
	border-radius: 999px;
	cursor: pointer;
	white-space: nowrap;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.odf-metoo:hover {
	border-color: color-mix(in oklch, var(--rescue) 55%, var(--border));
	background: color-mix(in oklch, var(--rescue) 9%, var(--surface));
}
.odf-metoo__plus { font-family: var(--font-mono); font-weight: 600; color: color-mix(in oklch, var(--rescue) 72%, var(--fg)); }
.odf-metoo[aria-pressed="true"] {
	background: color-mix(in oklch, var(--rescue) 17%, var(--surface));
	border-color: var(--rescue);
	color: color-mix(in oklch, var(--rescue) 58%, var(--fg));
}
.odf-metoo[aria-pressed="true"] .odf-metoo__plus { color: color-mix(in oklch, var(--rescue) 58%, var(--fg)); }
.odf-metoo:disabled { opacity: 0.7; cursor: progress; }

/* ── reuse proof ────────────────────────────────────────────────────── */
.odf-reuse {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 10px 0 0;
	font-size: 12px;
	color: color-mix(in oklch, var(--solved) 58%, var(--fg));
}
.odf-reuse b { font-weight: 650; }
.odf-reuse svg { width: 14px; height: 14px; color: var(--solved); flex: none; }
.odf-metric--reuse dt { color: color-mix(in oklch, var(--solved) 66%, var(--muted)); }
.odf-metric--reuse dd { color: color-mix(in oklch, var(--solved) 66%, var(--fg)); }

/* ── resolution timeline ────────────────────────────────────────────── */
.odf-timeline {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	margin: 0 0 20px;
	padding: 13px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow-sm);
}
.odf-timeline__label {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.odf-timeline__steps { list-style: none; display: flex; align-items: center; gap: 10px 24px; margin: 0; padding: 0; flex-wrap: wrap; }
.odf-timeline__step { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; }
.odf-timeline__dot { width: 9px; height: 9px; border-radius: 999px; border: 2px solid var(--border); background: var(--surface); flex: none; }
.odf-timeline__step.is-done .odf-timeline__dot { border-color: var(--solved); background: var(--solved); }
.odf-timeline__step.is-open .odf-timeline__dot { border-color: var(--accent); background: var(--accent-soft); }
.odf-timeline__k { color: var(--muted); }
.odf-timeline__v { color: var(--fg); font-weight: 600; }

/* ── answer-first composer ──────────────────────────────────────────── */
.odf-match {
	margin: 2px 0 4px;
	background: color-mix(in oklch, var(--solved) 5%, var(--surface));
	border: 1px solid color-mix(in oklch, var(--solved) 32%, var(--border));
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	overflow: hidden;
}
.odf-match[hidden] { display: none; }
.odf-match__head { display: flex; gap: 13px; padding: 15px 18px; border-bottom: 1px solid color-mix(in oklch, var(--solved) 20%, var(--border)); }
.odf-match__mark {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	color: var(--solved);
	background: var(--solved-soft);
	flex: none;
}
.odf-match__mark svg { width: 18px; height: 18px; }
.odf-match__title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.odf-match__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); max-width: 70ch; }
.odf-match__list { list-style: none; margin: 0; padding: 0; }
.odf-match__row { padding: 14px 18px; border-top: 1px solid var(--border); }
.odf-match__row:first-child { border-top: 0; }
.odf-match__top { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.odf-match__q { font-weight: 600; font-size: 14.5px; }
.odf-match__q:hover { text-decoration: underline; text-underline-offset: 2px; }
.odf-match__excerpt { margin: 7px 0 0; font-size: 13px; color: var(--muted); max-width: 72ch; }
.odf-match__foot { display: flex; align-items: center; gap: 16px; margin-top: 11px; flex-wrap: wrap; }
.odf-match__foot .odf-btn { margin-left: auto; }
.odf-match__dismiss { margin: 0; padding: 12px 18px; border-top: 1px solid color-mix(in oklch, var(--solved) 16%, var(--border)); font-size: 12.5px; color: var(--muted); }
.odf-match__dismiss button { border: 0; background: transparent; color: var(--accent); font: inherit; font-size: 12.5px; font-weight: 600; padding: 0; cursor: pointer; }
.odf-match__dismiss button:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── automatic safety screening ─────────────────────────────────────── */
.odf-safety {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 9px;
	border-radius: var(--pill);
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--muted);
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.odf-safety b { font-weight: 700; color: var(--fg); }
.odf-safety--held { border-color: color-mix(in oklch, var(--warn) 55%, var(--border)); color: color-mix(in oklch, var(--warn) 72%, var(--fg)); }
.odf-safety--approved { border-color: color-mix(in oklch, var(--solved) 50%, var(--border)); color: color-mix(in oklch, var(--solved) 62%, var(--fg)); }
.odf-safety--rejected { border-color: color-mix(in oklch, var(--danger) 55%, var(--border)); color: color-mix(in oklch, var(--danger) 68%, var(--fg)); }
.odf-safety--tier-moderate { box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--warn) 30%, transparent); }
.odf-safety--tier-high, .odf-safety--tier-critical { background: color-mix(in oklch, var(--danger) 14%, var(--surface-2)); }

.odf-roundcheck {
	display: grid;
	grid-template-columns: 44px 1fr auto;
	gap: 14px 16px;
	align-items: start;
	padding: 16px 18px;
	margin: 0 0 18px;
	border: 1px solid color-mix(in oklch, var(--warn) 42%, var(--border));
	border-radius: var(--radius);
	background:
		linear-gradient(180deg, color-mix(in oklch, var(--warn) 8%, transparent), transparent 60%),
		var(--surface);
}
.odf-roundcheck__badge {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	color: color-mix(in oklch, var(--warn) 78%, var(--fg));
	background: color-mix(in oklch, var(--warn) 14%, var(--surface-2));
	border: 1px solid color-mix(in oklch, var(--warn) 32%, var(--border));
}
.odf-roundcheck__badge svg { width: 22px; height: 22px; }
.odf-roundcheck__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.odf-roundcheck__body strong { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.odf-roundcheck__body span { color: var(--muted); font-size: 13.5px; }
.odf-roundcheck__meta {
	font-family: var(--font-mono);
	font-size: 11.5px;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: color-mix(in oklch, var(--warn) 62%, var(--muted));
}
.odf-roundcheck__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; justify-self: end; }
.odf-roundcheck__actions .odf-safety { margin-right: 4px; }

/* ── search visibility (moderators) ─────────────────────────────────── */
.odf-seo {
	display: grid;
	grid-template-columns: 92px 1fr;
	gap: 14px 16px;
	align-items: start;
	padding: 16px 18px;
	margin: 18px 0 0;
	border: 1px solid color-mix(in oklch, var(--accent) 34%, var(--border));
	border-radius: var(--radius);
	background:
		linear-gradient(180deg, color-mix(in oklch, var(--accent) 7%, transparent), transparent 70%),
		var(--surface);
}
.odf-seo__gauge {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	padding: 10px 6px;
	border-radius: 12px;
	background: color-mix(in oklch, var(--accent) 14%, var(--surface-2));
	border: 1px solid color-mix(in oklch, var(--accent) 30%, var(--border));
}
.odf-seo__num { font-family: var(--font-display); font-size: 30px; line-height: 1; font-weight: 700; color: color-mix(in oklch, var(--accent) 78%, var(--fg)); }
.odf-seo__den { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.03em; color: var(--muted); }
.odf-seo__body { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.odf-seo__body strong { font-family: var(--font-display); font-size: 15px; font-weight: 600; }
.odf-seo__body > span { color: var(--muted); font-size: 13.5px; }
.odf-seo__checks { list-style: none; margin: 8px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.odf-seo__checks li { display: flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--muted); }
.odf-seo__checks li.is-pass { color: color-mix(in oklch, var(--fg) 82%, var(--muted)); }
.odf-seo__mark { width: 14px; height: 14px; flex: none; color: var(--muted); }
.odf-seo__checks li.is-pass .odf-seo__mark { color: color-mix(in oklch, var(--accent) 80%, var(--fg)); }
@media (max-width: 640px) {
	.odf-seo { grid-template-columns: 1fr; }
	.odf-seo__gauge { justify-self: start; flex-direction: row; align-items: baseline; gap: 4px; }
	.odf-seo__checks { grid-template-columns: 1fr; }
}

/* ── appeals on held posts ──────────────────────────────────────────── */
.odf-roundcheck__actions.odf-appeal { flex-direction: column; align-items: flex-end; }
.odf-appeal__box {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin-top: 10px;
	width: min(440px, 100%);
}
.odf-appeal__box[hidden] { display: none; }
.odf-appeal__box textarea {
	width: 100%;
	min-height: 68px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm, 12px);
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	font-size: 13.5px;
	line-height: 1.5;
	resize: vertical;
}
.odf-appeal__box textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.odf-appeal__actions { display: flex; gap: 8px; justify-content: flex-end; }
.odf-appeal .screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.odf-appeal-tag {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: color-mix(in oklch, var(--accent) 70%, var(--fg));
	background: color-mix(in oklch, var(--accent) 16%, var(--surface));
	border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--border));
}
.odf-appeal__dyn { margin-top: 10px; align-self: flex-start; }

/* ── supporter badge ────────────────────────────────────────────────── */
.odf-supporter {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	vertical-align: middle;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--on-accent);
	background: var(--gradient-signal);
	border: 1px solid color-mix(in oklch, var(--accent-3) 55%, transparent);
}
.odf-supporter::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--on-accent);
	opacity: 0.85;
}

/* ── topic polls ────────────────────────────────────────────────────── */
.odf-poll {
	margin: 24px 0;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-poll.is-busy { opacity: 0.72; pointer-events: none; }
.odf-poll__q { margin: 0 0 14px; font-family: var(--font-display); font-size: 18px; }
.odf-poll__options { display: flex; flex-direction: column; gap: 8px; }
.odf-poll__opt {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 12px;
	align-items: center;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
	color: var(--fg);
	text-align: left;
	cursor: pointer;
	overflow: hidden;
	font: inherit;
}
.odf-poll__opt:hover { border-color: var(--accent); }
.odf-poll__opt.is-chosen { border-color: var(--accent); background: var(--accent-soft); }
.odf-poll__bar {
	position: absolute;
	top: 0;
	left: 0;
	bottom: 0;
	width: 0;
	background: var(--accent2-soft);
	transition: width 0.3s ease;
	z-index: 0;
}
.odf-poll__label, .odf-poll__count, .odf-poll__pct { position: relative; z-index: 1; }
.odf-poll__label { font-weight: 600; }
.odf-poll__count, .odf-poll__pct { color: var(--muted); font-size: 13px; }
.odf-poll__pct { min-width: 38px; text-align: right; }
.odf-poll__meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 14px 0 0; font-size: 12.5px; color: var(--muted); }
.odf-poll__hint { opacity: 0.85; }

/* ── poll composer field ────────────────────────────────────────────── */
.odf-pollfield {
	margin: 0;
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-pollfield legend {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 0 6px;
	font-weight: 600;
}
.odf-pollfield__rows { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 12px; }
.odf-pollfield__row { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; }
.odf-pollfield__remove {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: transparent;
	color: var(--muted);
	font-size: 18px;
	line-height: 1;
	cursor: pointer;
}
.odf-pollfield__remove:hover { border-color: var(--danger); color: var(--danger); }
.odf-pollfield__add { margin-top: 4px; }
.odf-lock {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--muted);
	border: 1px solid var(--border);
}
.odf-lock svg { width: 12px; height: 12px; }
.odf-upsell {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-top: 10px;
	padding: 12px 14px;
	border: 1px dashed color-mix(in oklch, var(--accent) 45%, var(--border));
	border-radius: var(--radius);
	background: var(--accent-soft);
}
.odf-upsell__badge {
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--on-accent);
	background: var(--gradient-signal);
}

/* ── member directory ───────────────────────────────────────────────── */
.odf-directory__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 18px;
}
.odf-directory__head h1 { margin: 0 0 4px; font-family: var(--font-display); }
.odf-searchbar--members { flex: 1 1 320px; }
.odf-mtable__wrap {
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow-x: auto;
}
.odf-mtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.odf-mtable th {
	text-align: left;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 12px 16px;
	border-bottom: 1px solid var(--border);
}
.odf-mtable td { padding: 12px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.odf-mtable tr:last-child td { border-bottom: 0; }
.odf-mrow:hover { background: var(--surface-2); }
.odf-mrow__who { display: flex; align-items: center; gap: 10px; }
.odf-mrow__id { display: flex; flex-direction: column; }
.odf-mrow__name { font-weight: 600; }
.odf-mrow__handle { font-size: 12px; color: var(--muted); }
.odf-mrow__contrib { display: flex; flex-direction: column; gap: 2px; }
.odf-mrow__reach { font-size: 12px; color: var(--muted); }
.odf-mrow__tier { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.odf-crmlink {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 13px;
	color: color-mix(in oklch, var(--accent) 78%, var(--fg));
}
.odf-crmlink svg { width: 16px; height: 16px; }
.odf-pager { align-items: center; gap: 12px; justify-content: center; }
.odf-pager__pos { font-size: 13px; color: var(--muted); }

/* ── responsive ─────────────────────────────────────────────────────── */
@media (max-width: 820px) {
	.odf-layout, .odf-layout--profile { grid-template-columns: 1fr; gap: 20px; }
	.odf-rail { position: static; }
	.odf-rail__nav { flex-direction: row; overflow-x: auto; }
	.odf-rail__item { flex: none; }
	.odf-topic { grid-template-columns: 40px 1fr; }
	.odf-topic__metrics { grid-column: 2; text-align: left; gap: 24px; }
	.odf-topic__excerpt { display: none; }
	.odf-statrow { grid-template-columns: 1fr; }
	.odf-post__title { font-size: 22px; }
	.odf-searchbar { flex-wrap: wrap; }
	.odf-search { flex-basis: 100%; }
	.odf-rescue__row { grid-template-columns: 1fr auto; }
	.odf-rescue__meta { grid-column: 1 / -1; order: 3; }
	.odf-match__foot .odf-btn { margin-left: 0; }
	.odf-roundcheck { grid-template-columns: 40px 1fr; }
	.odf-roundcheck__actions { grid-column: 1 / -1; justify-self: start; }
}
@media (max-width: 520px) {
	.odf-post { padding: 16px; }
	.odf-post__head { flex-direction: column; }
	.odf-post__actions { justify-content: flex-start; }
	.odf-activity__row { grid-template-columns: 1fr auto; }
	.odf-activity__kind { grid-column: 1 / -1; }
	.odf-rescue__head { flex-wrap: wrap; }
	.odf-rescue__count { margin-left: 0; }
	.odf-metoo { width: 100%; justify-content: center; }
}
@media (max-width: 720px) {
	.odf-mtable thead { display: none; }
	.odf-mrow { display: grid; grid-template-columns: 1fr; gap: 6px; padding: 14px 16px; border-bottom: 1px solid var(--border); }
	.odf-mrow td { padding: 0; border-bottom: 0; }
	.odf-mrow__contrib { flex-direction: row; gap: 8px; align-items: baseline; flex-wrap: wrap; }
	.odf-directory__head { align-items: stretch; }
}

/* ── community nav bar (notifications / saved) ──────────────────────── */
.odf-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	padding: 12px 16px;
	margin-bottom: 28px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: linear-gradient(180deg, var(--surface) 0%, var(--bg) 100%);
}
.odf-nav__brand { display: inline-flex; align-items: center; gap: 10px; }
.odf-nav__mark {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background: var(--accent-soft);
	color: var(--accent);
}
.odf-nav__mark svg { width: 20px; height: 20px; }
.odf-nav__word { font-family: var(--font-display); font-weight: 600; font-size: 16px; letter-spacing: -0.01em; }
.odf-nav__word b { color: var(--accent); font-weight: 600; }
.odf-nav__links { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.odf-nav__link {
	padding: 6px 12px;
	border-radius: var(--pill);
	font-size: 13.5px;
	font-weight: 550;
	color: var(--muted);
	transition: background 0.12s ease, color 0.12s ease;
}
.odf-nav__link:hover { background: var(--fg-soft); color: var(--fg); }
.odf-nav__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.odf-nav__new svg { width: 14px; height: 14px; }

/* ── reputation ─────────────────────────────────────────────────────── */
.odf-rep {
	--rep: var(--muted);
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 10px;
	border: 1px solid color-mix(in oklch, var(--rep) 42%, transparent);
	border-radius: var(--pill);
	background: color-mix(in oklch, var(--rep) 14%, transparent);
	color: var(--rep);
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	white-space: nowrap;
}
.odf-rep .num { font-size: 11.5px; opacity: 0.9; }
.odf-rep--newcomer { --rep: oklch(70% 0.02 275); }
.odf-rep--member   { --rep: oklch(72% 0.06 210); }
.odf-rep--regular  { --rep: var(--accent-2); }
.odf-rep--trusted  { --rep: var(--accent); }
.odf-rep--expert   { --rep: var(--accent-3); }
.odf-rep--legend   { --rep: oklch(74% 0.18 320); }

.odf-repbar {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 16px 18px;
	margin-bottom: 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
}
.odf-repbar__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.odf-repbar__next { font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.odf-repbar__track { height: 8px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.odf-repbar__fill { display: block; height: 100%; border-radius: inherit; background: var(--gradient-signal); }
.odf-repbar__mix { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.odf-repbar__mix b { color: var(--fg); }

/* ── notification bell ──────────────────────────────────────────────── */
.odf-bell {
	position: relative;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface);
	color: var(--muted);
	transition: color 0.12s ease, border-color 0.12s ease;
}
.odf-bell:hover { color: var(--fg); border-color: var(--border-strong); }
.odf-bell svg { width: 18px; height: 18px; }
.odf-bell.has-unread { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); }
.odf-bell__count {
	position: absolute;
	top: -6px;
	right: -6px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	border-radius: var(--pill);
	background: var(--accent);
	color: var(--fg-on-accent);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}
.odf-bell__count[hidden] { display: none; }

/* ── notification centre / saved ────────────────────────────────────── */
.odf-inbox { max-width: 880px; margin: 0 auto; }
.odf-inbox__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}
.odf-eyebrow {
	font-family: var(--font-mono);
	font-size: 11.5px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--accent);
	margin: 0 0 6px;
}
.odf-inbox__title { font-size: 30px; }
.odf-inbox__lede { color: var(--muted); font-size: 14px; margin: 6px 0 0; }
.odf-inbox__lede b { color: var(--fg); }
.odf-inbox__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.odf-btn--ghost { background: transparent; }

.odf-seg {
	display: inline-flex;
	padding: 3px;
	gap: 3px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface);
}
.odf-seg__item {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 14px;
	border-radius: var(--pill);
	font-size: 13px;
	font-weight: 550;
	color: var(--muted);
}
.odf-seg__item:hover { color: var(--fg); }
.odf-seg__item.is-active { background: var(--accent); color: var(--fg-on-accent); }
.odf-seg__count {
	min-width: 18px;
	padding: 0 5px;
	border-radius: var(--pill);
	background: color-mix(in oklch, currentColor 22%, transparent);
	font-size: 11px;
	font-weight: 700;
	text-align: center;
}

.odf-section-title { font-size: 15px; margin: 0 0 12px; color: var(--muted); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.08em; }
.odf-saved-rooms { margin-bottom: 28px; }
.odf-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.odf-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 12px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface);
	font-size: 13.5px;
	font-weight: 550;
	transition: border-color 0.12s ease, background 0.12s ease;
}
.odf-chip:hover { border-color: var(--accent); background: var(--accent-soft); }
.odf-chip__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
.odf-chip__x { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; color: var(--muted); font-size: 14px; }
.odf-chip__x:hover { background: var(--fg-soft); color: var(--danger); }
.odf-chip[data-odf-following="1"]:hover .odf-chip__x { color: var(--danger); }
.odf-chip--entity .odf-chip__dot { background: var(--accent-2); }

.odf-entity-follows { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.odf-entity-follows__hint { font-size: 12.5px; color: var(--muted); }
.odf-followbtn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 6px 12px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface);
	color: var(--fg);
	font: inherit;
	font-size: 13px;
	font-weight: 550;
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.odf-followbtn svg { width: 14px; height: 14px; }
.odf-followbtn:hover { border-color: var(--accent); background: var(--accent-soft); }
.odf-followbtn.is-on { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.odf-followbtn.is-on svg { transform: rotate(45deg); }
.odf-followbtn__count { font-family: var(--font-mono); font-size: 11.5px; opacity: 0.75; }
.odf-followbtn:disabled { opacity: 0.6; cursor: progress; }

.odf-btn--follow.is-on { border-color: transparent; background: var(--accent); color: var(--on-accent); }
.odf-btn--follow.is-on svg { transform: rotate(45deg); }
.odf-btn__count { font-family: var(--font-mono); font-size: 12px; opacity: 0.75; }
.odf-btn--follow:disabled { opacity: 0.6; cursor: progress; }

.odf-inbox__glyph--sighting { background: var(--accent2-soft); color: var(--accent-2); }
.odf-inbox__glyph--entity { background: var(--accent-soft); color: var(--accent); }

.odf-inbox__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.odf-inbox__item {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color 0.12s ease, background 0.12s ease;
}
.odf-inbox__item:hover { border-color: var(--border-strong); }
.odf-inbox__item.is-unread { background: var(--accent-soft); border-color: color-mix(in oklch, var(--accent) 34%, var(--border)); }
.odf-inbox__item.is-unread::before { content: ""; }
.odf-inbox__glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.odf-inbox__glyph svg { width: 19px; height: 19px; }
.odf-inbox__glyph--mention { background: var(--accent-soft); color: var(--accent); }
.odf-inbox__glyph--accepted { background: var(--solved-soft); color: var(--solved); }
.odf-inbox__glyph--new_topic { background: var(--accent2-soft); color: var(--accent-2); }
.odf-inbox__glyph--save { background: var(--accent-soft); color: var(--accent); }
.odf-inbox__body { min-width: 0; }
.odf-inbox__line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0; font-size: 14.5px; }
.odf-inbox__line b { font-weight: 600; }
.odf-inbox__avatar { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--surface-2); font-family: var(--font-mono); font-size: 11px; font-weight: 700; }
.odf-inbox__verb { color: var(--muted); }
.odf-inbox__time { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.odf-inbox__excerpt { margin: 5px 0 0; color: var(--muted); font-size: 13.5px; overflow-wrap: break-word; }
.odf-inbox__title-link { font-weight: 600; font-size: 15px; }
.odf-inbox__title-link:hover { text-decoration: underline; text-underline-offset: 2px; }
.odf-inbox__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 5px 0 0; color: var(--muted); font-size: 12.5px; }
.odf-inbox__room { color: var(--accent); }
.odf-inbox__go { display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--pill); color: var(--muted); }
.odf-inbox__go:hover { background: var(--fg-soft); color: var(--fg); }
.odf-inbox__go svg { width: 18px; height: 18px; }
.odf-inbox__unsave { color: var(--accent); }
.odf-inbox__unsave svg { width: 18px; height: 18px; fill: color-mix(in oklch, var(--accent) 40%, transparent); }
.odf-dot-sep { color: var(--border-strong); }
.odf-icon-btn { display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: var(--pill); background: transparent; color: var(--muted); transition: background 0.12s ease, color 0.12s ease; }
.odf-icon-btn:hover { background: var(--fg-soft); color: var(--fg); }
.odf-empty { text-align: center; padding: 56px 24px; border: 1px dashed var(--border); border-radius: var(--radius-lg); }
.odf-empty__glyph { display: inline-grid; place-items: center; width: 56px; height: 56px; margin-bottom: 14px; border-radius: 16px; background: var(--surface); color: var(--accent); }
.odf-empty__glyph svg { width: 26px; height: 26px; }
.odf-empty h2 { font-size: 18px; margin: 0 0 6px; }
.odf-empty p { color: var(--muted); font-size: 14px; margin: 0 auto 18px; max-width: 44ch; }

/* save button on the original post */
.odf-act--save.is-on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.odf-act--save svg { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.odf-act--save.is-on svg { fill: color-mix(in oklch, var(--accent) 50%, transparent); }

@media (max-width: 640px) {
	.odf-inbox__head { align-items: flex-start; flex-direction: column; }
	.odf-inbox__item { grid-template-columns: 34px 1fr; }
	.odf-inbox__glyph { width: 34px; height: 34px; }
	.odf-inbox__go { grid-column: 2; justify-self: start; }
	.odf-nav__tools { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* ── Railway entity hub ───────────────────────────────────────────────── */
.odf-entity-hub { margin: 0 0 28px; }
.odf-entity-hub__hero {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 24px;
	align-items: center;
	padding: 24px 26px;
	border: 1px solid color-mix(in oklch, var(--accent) 26%, var(--border));
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 140% at 100% 0%, var(--accent2-soft) 0%, transparent 58%),
		var(--surface);
	box-shadow: var(--shadow-sm);
}
.odf-entity-hub__type {
	display: inline-block;
	margin-bottom: 8px;
	padding: 3px 10px;
	border-radius: 999px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-accent);
	background: var(--accent);
}
.odf-entity-hub__title {
	margin: 0;
	font-family: var(--font-display);
	font-size: clamp(24px, 3.4vw, 34px);
	line-height: 1.1;
	letter-spacing: -0.02em;
}
.odf-entity-hub__ref {
	margin: 6px 0 0;
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--muted);
}
.odf-entity-hub__sub { margin: 10px 0 0; max-width: 58ch; color: var(--muted); font-size: 14px; line-height: 1.55; }
.odf-entity-hub__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.odf-entity-hub__stats {
	display: grid;
	grid-template-columns: repeat(2, minmax(90px, 1fr));
	gap: 10px;
	margin: 0;
}
.odf-entity-hub__stat {
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.odf-entity-hub__stat dt {
	font-family: var(--font-mono);
	font-size: 10px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
}
.odf-entity-hub__stat dd { margin: 4px 0 0; font-size: 22px; font-weight: 650; }
.odf-entity-hub__feedtitle { margin: 26px 0 2px; font-size: 15px; font-weight: 650; letter-spacing: -0.01em; }
.odf-entity-hub__feedtitle + .odf-topics { border-top: 1px solid var(--border); }
.odf-entity-hub__more { margin: 16px 0 0; color: var(--muted); font-size: 13px; }

/* ── Trending railway entities strip ──────────────────────────────────── */
.odf-trending {
	margin: 0 0 24px;
	padding: 18px 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	box-shadow: var(--shadow-sm);
}
.odf-trending__head { display: flex; align-items: flex-start; gap: 13px; margin-bottom: 14px; }
.odf-trending__mark {
	display: inline-grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9px;
	flex: none;
	color: var(--accent);
	background: var(--accent-soft);
}
.odf-trending__mark svg { width: 18px; height: 18px; }
.odf-trending__title { margin: 0; font-size: 16px; font-weight: 650; letter-spacing: -0.01em; }
.odf-trending__sub { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); max-width: 70ch; }
.odf-trending__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.odf-trending__row { min-width: 0; }
.odf-trending__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
	transition: border-color 0.12s ease, transform 0.12s ease;
}
.odf-trending__link:hover { border-color: var(--accent); transform: translateY(-1px); }
.odf-trending__count { color: var(--muted); font-size: 12px; white-space: nowrap; }

@media (max-width: 720px) {
	.odf-entity-hub__hero { grid-template-columns: 1fr; padding: 20px; }
	.odf-entity-hub__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 520px) {
	.odf-entity-hub__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── moderation: sanctions, blocking, notes ─────────────────────────── */
.odf-act--block {
	color: var(--muted);
}
.odf-act--block:hover { color: var(--fg); background: var(--fg-soft); }
.odf-act--block.is-on { color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.odf-act--warn:hover { color: var(--warn); background: color-mix(in oklch, var(--warn) 12%, transparent); }

.odf-sanction-badge {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	padding: 1px 8px;
	border-radius: var(--pill);
	font-family: var(--font-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	border: 1px solid currentColor;
}
.odf-sanction-badge--mute { color: var(--warn); background: color-mix(in oklch, var(--warn) 12%, transparent); }
.odf-sanction-badge--ban_temp,
.odf-sanction-badge--ban_perm { color: var(--danger); background: color-mix(in oklch, var(--danger) 12%, transparent); }

.odf-restriction {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-left: 3px solid var(--warn);
	border-radius: var(--radius);
	background: var(--surface);
}
.odf-restriction--ban_temp,
.odf-restriction--ban_perm { border-left-color: var(--danger); }
.odf-restriction__label {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--warn);
}
.odf-restriction--ban_temp .odf-restriction__label,
.odf-restriction--ban_perm .odf-restriction__label { color: var(--danger); }
.odf-restriction__text { color: var(--muted); font-size: 14px; }

.odf-honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.odf-modpanel {
	margin-top: 28px;
	padding: 20px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-lg);
	background: var(--surface);
	display: grid;
	gap: 20px;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.odf-modpanel__head { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.odf-modpanel__title { font-size: 16px; }
.odf-modpanel__col h3 {
	font-family: var(--font-mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 10px;
}

.odf-notes { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 8px; }
.odf-note {
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.odf-note__meta { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: var(--muted); }
.odf-note__author { font-weight: 600; color: var(--fg); }
.odf-note__body { margin: 6px 0 0; font-size: 14px; }
.odf-note-form { display: grid; gap: 8px; }
.odf-note-form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--bg);
	color: var(--fg);
	font: inherit;
	resize: vertical;
}
.odf-note-form textarea:focus-visible { border-color: var(--accent); }

.odf-history { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.odf-history__row {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 8px;
	padding: 8px 10px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
	font-size: 13px;
}
.odf-history__who { font-weight: 600; }
.odf-history__reason { color: var(--muted); font-style: italic; }

@media (max-width: 620px) {
	.odf-modpanel { grid-template-columns: 1fr; }
}

/* ── signal board: milestones, challenges, leaderboards ──────────────── */
.odf-signal { display: grid; gap: 28px; }
.odf-signal__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
}
.odf-signal__intro { max-width: 640px; }
.odf-signal__title { font-size: 30px; letter-spacing: -0.02em; }
.odf-signal__lede { color: var(--muted); font-size: 15px; margin: 8px 0 0; max-width: 60ch; }

.odf-signal__identity {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 16px 10px 10px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface);
}
.odf-signal__avatar { width: 48px; height: 48px; border-radius: 50%; }
.odf-signal__identity-body { display: flex; flex-direction: column; line-height: 1.25; }
.odf-signal__name { font-weight: 600; }
.odf-signal__tier {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--accent);
}

.odf-signal__stats {
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.odf-stat {
	position: relative;
	display: grid;
	gap: 2px;
	padding: 18px 18px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
	overflow: hidden;
}
.odf-stat::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	background: var(--accent);
	opacity: 0.7;
}
.odf-stat--streak::before { background: var(--accent-3); }
.odf-stat--answer::before { background: var(--accent-2); }
.odf-stat--sighting::before { background: var(--info); }
.odf-stat--streak.is-lit::before { background: var(--gradient-signal); opacity: 1; }
.odf-stat__glyph {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 22px;
	height: 22px;
	color: var(--muted);
	opacity: 0.65;
}
.odf-stat__glyph svg { width: 100%; height: 100%; }
.odf-stat__value {
	font-size: 34px;
	font-weight: 600;
	line-height: 1.05;
	letter-spacing: -0.02em;
}
.odf-stat--streak.is-lit .odf-stat__value { color: var(--accent-3); }
.odf-stat__label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--muted);
}
.odf-stat__sub { font-size: 12.5px; color: var(--muted); margin-top: 6px; }
.odf-stat__sub b { color: var(--fg); }

.odf-signal__grid {
	display: grid;
	gap: 22px;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	align-items: start;
}
.odf-signal__panel {
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-signal__panel-head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 16px;
}
.odf-signal__panel-head .odf-section-title { margin: 0; }
.odf-signal__panel-note { font-family: var(--font-mono); font-size: 11.5px; color: var(--muted); }
.odf-signal__hint { display: flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--muted); font-size: 14px; }

.odf-milestones {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 10px;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}
.odf-milestone {
	display: flex;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.odf-milestone.is-earned {
	border-color: color-mix(in oklch, var(--accent) 45%, var(--border));
	background: linear-gradient(180deg, var(--accent-soft), transparent 70%), var(--surface-2);
}
.odf-milestone.is-locked { opacity: 0.72; }
.odf-milestone__glyph {
	flex: none;
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--bg);
	color: var(--muted);
}
.odf-milestone.is-earned .odf-milestone__glyph {
	border-color: transparent;
	background: var(--gradient-signal);
	color: var(--fg-on-accent);
}
.odf-milestone__glyph svg { width: 19px; height: 19px; }
.odf-milestone__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.odf-milestone__label { font-weight: 600; font-size: 14px; }
.odf-milestone__desc { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.odf-milestone__when { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-top: 3px; }
.odf-milestone__progress {
	margin-top: 7px;
	height: 5px;
	border-radius: var(--pill);
	background: color-mix(in oklch, var(--fg) 10%, transparent);
	overflow: hidden;
}
.odf-milestone__bar { display: block; height: 100%; border-radius: var(--pill); background: var(--accent-2); }
.odf-milestone__count { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-top: 3px; }
.odf-milestone__count b { color: var(--fg); }

.odf-challenges { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.odf-challenge {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface-2);
}
.odf-challenge.is-done {
	border-color: color-mix(in oklch, var(--ok) 45%, var(--border));
	background: linear-gradient(180deg, var(--solved-soft), transparent 70%), var(--surface-2);
}
.odf-challenge__glyph {
	flex: none;
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--bg);
	border: 1px solid var(--border);
	color: var(--accent-2);
}
.odf-challenge.is-done .odf-challenge__glyph { color: var(--ok); border-color: color-mix(in oklch, var(--ok) 45%, var(--border)); }
.odf-challenge__glyph svg { width: 17px; height: 17px; }
.odf-challenge__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.odf-challenge__label { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 14px; }
.odf-challenge__tick { display: inline-grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--ok); color: var(--on-accent); }
.odf-challenge__tick svg { width: 11px; height: 11px; }
.odf-challenge__desc { font-size: 12.5px; color: var(--muted); }
.odf-challenge__progress {
	height: 5px;
	margin-top: 4px;
	border-radius: var(--pill);
	background: color-mix(in oklch, var(--fg) 10%, transparent);
	overflow: hidden;
}
.odf-challenge__bar { display: block; height: 100%; border-radius: var(--pill); background: var(--accent); }
.odf-challenge.is-done .odf-challenge__bar { background: var(--ok); }
.odf-challenge__count { flex: none; font-family: var(--font-mono); font-size: 13px; color: var(--muted); }
.odf-challenge__count b { color: var(--fg); font-size: 15px; }
.odf-challenge__slash { margin: 0 2px; opacity: 0.6; }

.odf-signal__panel--challenges .odf-signal__hint { justify-content: flex-start; }

.odf-board {
	padding: 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-board__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 18px;
}
.odf-board__lede { color: var(--muted); font-size: 13.5px; margin: 4px 0 0; }
.odf-board__filters { display: flex; flex-wrap: wrap; gap: 10px; }
.odf-seg--wrap { flex-wrap: wrap; border-radius: var(--radius); }
.odf-seg--sm .odf-seg__item { padding: 5px 11px; font-size: 12px; }

.odf-board__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.odf-board__row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid transparent;
	border-radius: var(--radius);
}
.odf-board__row:nth-child(odd) { background: var(--surface-2); }
.odf-board__row.is-me { border-color: color-mix(in oklch, var(--accent) 50%, var(--border)); background: var(--accent-soft); }
.odf-board__rank {
	flex: none;
	width: 30px;
	text-align: center;
	font-family: var(--font-mono);
	font-size: 14px;
	color: var(--muted);
}
.odf-board__rank.is-podium { color: var(--accent-3); font-weight: 700; }
.odf-board__person { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.odf-board__avatar { width: 32px; height: 32px; border-radius: 50%; }
.odf-board__name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.odf-board__you { font-family: var(--font-mono); font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent); }
.odf-board__tier {
	font-family: var(--font-mono);
	font-size: 10.5px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 2px 8px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
}
.odf-board__total { flex: none; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; }
.odf-board__total b { font-size: 17px; }
.odf-board__unit { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; }
.odf-board__mine { margin: 14px 0 0; font-size: 13.5px; color: var(--muted); }
.odf-board__mine b { color: var(--fg); }
.odf-empty--board { padding: 24px; }

/* milestone chips on profiles */
.odf-badge {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 11px 5px 7px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface);
	font-size: 12.5px;
	font-weight: 550;
}
.odf-badge__glyph {
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--gradient-signal);
	color: var(--fg-on-accent);
}
.odf-badge__glyph svg { width: 12px; height: 12px; }
.odf-badge.is-locked { opacity: 0.6; }
.odf-badge.is-locked .odf-badge__glyph { background: color-mix(in oklch, var(--fg) 12%, transparent); color: var(--muted); }

.odf-signalstrip {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin: 18px 0 0;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-signalstrip__streak { display: flex; align-items: center; gap: 10px; }
.odf-signalstrip__glyph {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--muted);
}
.odf-signalstrip__streak.is-lit .odf-signalstrip__glyph { background: var(--gradient-signal); color: var(--fg-on-accent); border-color: transparent; }
.odf-signalstrip__glyph svg { width: 18px; height: 18px; }
.odf-signalstrip__num { font-size: 20px; font-weight: 600; }
.odf-signalstrip__streak.is-lit .odf-signalstrip__num { color: var(--accent-3); }
.odf-signalstrip__label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); display: flex; flex-direction: column; }
.odf-signalstrip__badges { flex: 1; display: flex; flex-wrap: wrap; gap: 7px; min-width: 180px; }
.odf-signalstrip__link { font-size: 13px; color: var(--accent); font-weight: 600; white-space: nowrap; }

/* rail promo card */
.odf-rail__signal {
	display: grid;
	gap: 4px;
	margin-top: 18px;
	padding: 14px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--accent2-soft), transparent 75%), var(--surface);
}
.odf-rail__signal:hover { border-color: var(--accent); }
.odf-rail__signal-mark { width: 22px; height: 22px; color: var(--accent); }
.odf-rail__signal-mark svg { width: 100%; height: 100%; }
.odf-rail__signal-title { font-weight: 600; font-size: 14px; }
.odf-rail__signal-sub { font-size: 12.5px; color: var(--muted); }

@media (max-width: 880px) {
	.odf-signal__grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	.odf-board__head { flex-direction: column; align-items: stretch; }
	.odf-signal__title { font-size: 25px; }
}

/* -------------------------------------------------------------------------
 * Notification preferences
 * ---------------------------------------------------------------------- */

.odf-prefs__form { margin-top: 4px; }
.odf-prefs__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.odf-prefs__row {
	display: grid;
	grid-template-columns: 40px 1fr auto;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: var(--surface);
	transition: border-color 0.12s ease, background 0.12s ease;
}
.odf-prefs__row.is-on { background: color-mix(in oklch, var(--accent) 6%, var(--surface)); }
.odf-prefs__row:hover { border-color: var(--border-strong); }
.odf-prefs__glyph { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--surface-2); color: var(--muted); }
.odf-prefs__row.is-on .odf-prefs__glyph { background: var(--accent-soft); color: var(--accent); }
.odf-prefs__glyph svg { width: 19px; height: 19px; }
.odf-prefs__copy { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odf-prefs__label { font-weight: 600; font-size: 14.5px; }
.odf-prefs__brief { color: var(--muted); font-size: 13px; }

.odf-switch { position: relative; display: inline-flex; align-items: center; cursor: pointer; }
.odf-switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.odf-switch__track {
	display: inline-flex;
	align-items: center;
	width: 46px;
	height: 26px;
	padding: 3px;
	border: 1px solid var(--border-strong);
	border-radius: var(--pill);
	background: var(--surface-2);
	transition: background 0.14s ease, border-color 0.14s ease;
}
.odf-switch__thumb {
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: var(--muted);
	transition: transform 0.16s ease, background 0.14s ease;
}
.odf-switch input:checked + .odf-switch__track { background: var(--accent); border-color: var(--accent); }
.odf-switch input:checked + .odf-switch__track .odf-switch__thumb { background: var(--fg-on-accent); transform: translateX(20px); }
.odf-switch input:focus-visible + .odf-switch__track { outline: 2px solid var(--accent); outline-offset: 2px; }
.odf-switch input:disabled + .odf-switch__track { opacity: 0.55; cursor: not-allowed; }

.odf-prefs__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.odf-prefs__note { font-size: 12.5px; max-width: 52ch; margin: 0; }

@media (max-width: 640px) {
	.odf-prefs__row { grid-template-columns: 34px 1fr auto; }
	.odf-prefs__glyph { width: 34px; height: 34px; }
	.odf-prefs__foot { flex-direction: column; align-items: stretch; }
}

/* ── Sightings board ─────────────────────────────────────────────── */

.odf-sightings { display: flex; flex-direction: column; gap: 20px; }
.odf-sightings__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding: 24px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 130% at 100% 0%, var(--accent2-soft), transparent 60%),
		var(--surface);
}
.odf-sightings__title { font-family: var(--font-display); font-size: clamp(24px, 3vw, 34px); line-height: 1.05; margin: 2px 0 6px; letter-spacing: -0.02em; }
.odf-sightings__lede { color: var(--muted); max-width: 60ch; margin: 0; }
.odf-sightings__head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.odf-sightings__scope {
	margin: 0;
	padding: 12px 16px;
	border: 1px dashed var(--border-strong);
	border-radius: 14px;
	background: var(--surface-2);
	font-size: 13.5px;
}

.odf-logform {
	padding: 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-logform__title { font-family: var(--font-display); font-size: 18px; margin: 0 0 4px; }
.odf-logform__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin: 14px 0; }
.odf-logform .odf-field { display: flex; flex-direction: column; gap: 6px; }

.odf-sightings__filters {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.odf-sightings__filters .subsubsub { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; font-size: 13px; }
.odf-sightings__filters .subsubsub li { display: inline; }
.odf-sightings__filters .subsubsub a { color: var(--muted); text-decoration: none; padding: 6px 11px; border-radius: var(--pill); border: 1px solid transparent; }
.odf-sightings__filters .subsubsub a:hover { color: var(--fg); background: var(--surface-2); }
.odf-sightings__filters .subsubsub a.current { color: var(--fg); background: var(--accent-soft); border-color: var(--accent); }
.odf-sightings__mine { margin: 0; }

.odf-sightings__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.odf-sightings__empty {
	text-align: center;
	padding: 48px 24px;
	border: 1px dashed var(--border-strong);
	border-radius: var(--radius-lg);
}
.odf-sightings__empty h2 { font-family: var(--font-display); margin: 4px 0 6px; }

.odf-sighting {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	border: 1px solid var(--border);
	border-radius: 18px;
	background: var(--surface);
	border-left: 3px solid var(--border-strong);
	transition: border-color .15s ease, transform .15s ease;
}
.odf-sighting:hover { border-color: var(--border-strong); }
.odf-sighting--logged { border-left-color: var(--accent-3); }
.odf-sighting--confirmed { border-left-color: var(--ok); }
.odf-sighting--disputed { border-left-color: var(--danger); }
.odf-sighting--proposed { border-left-color: var(--accent-2); }
.odf-sighting--imported { border-left-color: var(--accent); }
.odf-sighting--rejected { border-left-color: var(--border-strong); opacity: .8; }

.odf-sighting__body { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.odf-sighting__head { display: flex; align-items: center; gap: 12px; }
.odf-sighting__glyph { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; background: var(--surface-2); color: var(--accent); flex: 0 0 auto; }
.odf-sighting__glyph svg { width: 19px; height: 19px; }
.odf-sighting__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.odf-sighting__entity { font-weight: 600; font-size: 15px; color: var(--fg); text-decoration: none; }
.odf-sighting__entity:hover { color: var(--accent); }
.odf-sighting__meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; color: var(--muted); font-size: 12.5px; }
.odf-sighting__meta span + span::before { content: "·"; margin-right: 6px; color: var(--border-strong); }
.odf-sighting__type { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; }

.odf-sighting__status {
	margin-left: auto;
	font-size: 12px;
	padding: 4px 11px;
	border-radius: var(--pill);
	background: var(--surface-2);
	color: var(--muted);
	white-space: nowrap;
}
.odf-sighting__status--confirmed { background: color-mix(in oklch, var(--ok) 18%, transparent); color: color-mix(in oklch, var(--ok) 78%, var(--fg)); }
.odf-sighting__status--disputed { background: color-mix(in oklch, var(--danger) 16%, transparent); color: color-mix(in oklch, var(--danger) 82%, var(--fg)); }
.odf-sighting__status--proposed { background: var(--accent2-soft); color: color-mix(in oklch, var(--accent-2) 80%, var(--fg)); }
.odf-sighting__status--imported { background: var(--accent-soft); color: var(--accent); }
.odf-sighting__status--logged { background: color-mix(in oklch, var(--accent-3) 18%, transparent); }

.odf-sighting__notes { margin: 0; color: var(--muted); font-size: 14px; max-width: 68ch; }
.odf-sighting__by { margin: 0; font-size: 12.5px; color: var(--muted); }
.odf-sighting__by a { color: var(--fg); text-decoration: none; }
.odf-sighting__by a:hover { color: var(--accent); }

.odf-sighting__votes { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.odf-sighting__vote {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 10px;
	border-radius: var(--pill);
	border: 1px solid var(--border);
	background: var(--surface-2);
	color: var(--muted);
	cursor: pointer;
	font: inherit;
	font-size: 13px;
}
.odf-sighting__vote svg { width: 15px; height: 15px; }
.odf-sighting__vote:hover { border-color: var(--border-strong); color: var(--fg); }
.odf-sighting__vote.is-on { background: color-mix(in oklch, var(--ok) 20%, transparent); border-color: var(--ok); color: color-mix(in oklch, var(--ok) 80%, var(--fg)); }
.odf-sighting__vote--no.is-on { background: color-mix(in oklch, var(--danger) 18%, transparent); border-color: var(--danger); color: color-mix(in oklch, var(--danger) 82%, var(--fg)); }
.odf-sighting__vote:disabled { opacity: .5; cursor: not-allowed; }
.odf-sighting__open { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--border); color: var(--muted); }
.odf-sighting__open svg { width: 15px; height: 15px; }
.odf-sighting__open:hover { color: var(--accent); border-color: var(--border-strong); }

/* Single sighting */
.odf-sightingpage { display: flex; flex-direction: column; gap: 22px; }
.odf-crumbs { font-size: 13px; color: var(--muted); }
.odf-crumbs a { color: var(--muted); text-decoration: none; }
.odf-crumbs a:hover { color: var(--accent); }
.odf-crumbs__sep { margin: 0 8px; color: var(--border-strong); }
.odf-sightingpage__main {
	padding: 26px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background:
		radial-gradient(120% 130% at 100% 0%, var(--accent2-soft), transparent 60%),
		var(--surface);
}
.odf-sightingpage__title { font-family: var(--font-display); font-size: clamp(24px, 3.4vw, 38px); line-height: 1.05; margin: 4px 0 14px; letter-spacing: -0.02em; }
.odf-sightingpage__facts { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; margin-bottom: 18px; }
.odf-sightingpage__fact { font-size: 13.5px; color: var(--muted); }
.odf-sightingpage__fact strong { color: var(--fg); margin-right: 5px; }
.odf-sightingpage__notes h2,
.odf-sightingpage__correction h2,
.odf-sightingpage__review h2,
.odf-sightingpage__related h2 { font-family: var(--font-display); font-size: 17px; margin: 0 0 8px; }
.odf-sightingpage__notes { margin-bottom: 18px; max-width: 74ch; }
.odf-sightingpage__correction { padding: 14px 16px; border-left: 3px solid var(--accent-3); background: var(--surface-2); border-radius: 12px; margin-bottom: 18px; }
.odf-sightingpage__confirm { display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap; padding-top: 18px; border-top: 1px solid var(--border); }
.odf-sightingpage__tally { display: flex; align-items: baseline; gap: 6px; }
.odf-sightingpage__count { font-size: 24px; font-weight: 700; font-family: var(--font-display); }
.odf-sightingpage__tally-label { color: var(--muted); font-size: 13px; }
.odf-sightingpage__actions { display: flex; gap: 10px; flex-wrap: wrap; }
.odf-sightingpage__actions .odf-btn.is-on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.odf-sightingpage__review { padding: 22px; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-2); }
.odf-sightingpage__review-form { display: flex; flex-direction: column; gap: 12px; margin-top: 12px; }
.odf-sightingpage__review-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.odf-sightingpage__related { display: flex; flex-direction: column; gap: 12px; }

.odf-upsell--inline {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px dashed var(--border-strong);
	border-radius: 14px;
	background: var(--surface-2);
}
.odf-upsell--inline p { margin: 0; }
.odf-sightings__list--compact .odf-sighting { padding: 12px 14px; }

@media (max-width: 640px) {
	.odf-sighting { flex-direction: column; align-items: stretch; }
	.odf-sighting__status { margin-left: 0; }
	.odf-sighting__votes { justify-content: flex-end; }
	.odf-sightingpage__confirm { flex-direction: column; align-items: flex-start; }
}

/* ── live spotting map ─────────────────────────────────────────────── */

.odf-map { display: flex; flex-direction: column; gap: 20px; }

.odf-map__head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.odf-map__title { font-family: var(--font-display); font-size: clamp(26px, 3vw, 34px); margin: 0; letter-spacing: -0.02em; }
.odf-map__lede { color: var(--muted); margin: 8px 0 0; max-width: 62ch; }

.odf-map__pulse { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.odf-map__live {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 5px 12px;
	border-radius: var(--pill);
	border: 1px solid color-mix(in oklch, var(--accent) 40%, var(--border));
	background: var(--accent-soft);
	color: var(--accent);
	font-size: 12px;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}
.odf-map__live i {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 0 0 0 var(--accent-soft);
	animation: odf-pulse 2.4s ease-out infinite;
}
@keyframes odf-pulse {
	0%   { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent) 55%, transparent); }
	70%  { box-shadow: 0 0 0 9px transparent; }
	100% { box-shadow: 0 0 0 0 transparent; }
}
.odf-map__stat { display: flex; flex-direction: column; line-height: 1.1; }
.odf-map__stat b { font-family: var(--font-display); font-size: 22px; }
.odf-map__stat span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }

.odf-map__filters {
	display: flex;
	align-items: flex-end;
	gap: 12px;
	flex-wrap: wrap;
	padding: 14px 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-chips { display: inline-flex; flex-wrap: wrap; gap: 6px; padding: 3px; border: 1px solid var(--border); border-radius: var(--pill); background: var(--surface-2); }
.odf-map__filters .odf-chip {
	position: relative;
	cursor: pointer;
	padding: 6px 13px;
	border-color: transparent;
	background: transparent;
}
.odf-map__filters .odf-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.odf-map__filters .odf-chip.is-on,
.odf-map__filters .odf-chip:has(input:checked) {
	background: var(--accent);
	border-color: var(--accent);
	color: var(--fg-on-accent);
}
.odf-map__filters .odf-chip:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.odf-map__search { min-width: 190px; }
.odf-map__search .odf-input { width: 100%; }
.odf-map__filters .odf-field { margin-bottom: 0; }

.odf-map__body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }

.odf-map__canvas {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-map__toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12.5px; color: var(--muted); }
.odf-map__sync { display: inline-flex; align-items: center; gap: 6px; }
.odf-map__sync::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); }

.odf-map__frame {
	position: relative;
	border-radius: 18px;
	overflow: hidden;
	border: 1px solid var(--border);
	background:
		radial-gradient(120% 90% at 18% 12%, var(--accent2-soft), transparent 60%),
		radial-gradient(100% 80% at 88% 82%, var(--accent-soft), transparent 58%),
		var(--surface-2);
}
.odf-map__grid { display: block; width: 100%; height: auto; aspect-ratio: 800 / 480; }
.odf-map__net path { fill: none; stroke: color-mix(in oklch, var(--accent-2) 30%, var(--border)); stroke-width: 1.4; stroke-dasharray: 4 7; opacity: 0.7; }

.odf-map__pin { cursor: pointer; outline: none; }
.odf-map__pin-halo { fill: color-mix(in oklch, var(--pin) 26%, transparent); transition: transform 0.14s ease; transform-origin: center; }
.odf-map__pin-core { fill: var(--pin); stroke: var(--surface); stroke-width: 1.5; }
.odf-map__pin { --pin: var(--muted); }
.odf-map__pin--confirmed { --pin: var(--ok); }
.odf-map__pin--pending   { --pin: var(--accent-3); }
.odf-map__pin--disputed  { --pin: var(--danger); }
.odf-map__pin--offered   { --pin: var(--accent-2); }
.odf-map__pin:hover .odf-map__pin-halo,
.odf-map__pin:focus-visible .odf-map__pin-halo,
.odf-map__pin.is-active .odf-map__pin-halo { transform: scale(1.5); }
.odf-map__pin:focus-visible .odf-map__pin-core { stroke: var(--accent); stroke-width: 2.5; }
.odf-map__pin.is-active .odf-map__pin-core { stroke: var(--fg); stroke-width: 2.5; }

.odf-map__empty {
	position: absolute;
	inset: auto 16px 16px 16px;
	margin: 0;
	padding: 12px 14px;
	border-radius: 12px;
	border: 1px dashed var(--border-strong);
	background: color-mix(in oklch, var(--surface) 88%, transparent);
	color: var(--muted);
	font-size: 13.5px;
	text-align: center;
}

.odf-map__legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; padding: 0; list-style: none; font-size: 12.5px; color: var(--muted); }
.odf-map__legend li { display: inline-flex; align-items: center; gap: 7px; }
.odf-map__swatch { width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.odf-map__swatch--confirmed { background: var(--ok); }
.odf-map__swatch--pending   { background: var(--accent-3); }
.odf-map__swatch--disputed  { background: var(--danger); }
.odf-map__swatch--offered   { background: var(--accent-2); }

.odf-map__board {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface);
}
.odf-map__board-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.odf-map__board-head h2 { margin: 0; font-size: 17px; font-family: var(--font-display); }

.odf-liveboard { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.odf-liveboard__row {
	display: grid;
	grid-template-columns: 12px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 14px;
	background: var(--surface-2);
	transition: border-color 0.12s ease, background 0.12s ease;
}
.odf-liveboard__row.is-active { border-color: var(--accent); background: var(--accent-soft); }
.odf-liveboard__dot { width: 9px; height: 9px; border-radius: 50%; background: var(--muted); }
.odf-liveboard__row--confirmed .odf-liveboard__dot { background: var(--ok); }
.odf-liveboard__row--pending   .odf-liveboard__dot { background: var(--accent-3); }
.odf-liveboard__row--disputed  .odf-liveboard__dot { background: var(--danger); }
.odf-liveboard__row--offered   .odf-liveboard__dot { background: var(--accent-2); }
.odf-liveboard__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; color: inherit; text-decoration: none; }
.odf-liveboard__label { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-liveboard__meta { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-liveboard__status { font-size: 11px; font-weight: 650; padding: 3px 8px; border-radius: var(--pill); background: var(--fg-soft); color: var(--muted); white-space: nowrap; }
.odf-liveboard__status--confirmed { color: var(--ok); background: var(--solved-soft); }
.odf-liveboard__status--pending   { color: var(--accent-3); background: var(--rescue-soft); }
.odf-liveboard__status--disputed  { color: var(--danger); background: color-mix(in oklch, var(--danger) 15%, transparent); }
.odf-liveboard__status--offered   { color: var(--accent-2); background: var(--accent2-soft); }
.odf-liveboard__empty { padding: 14px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); font-size: 13.5px; }

.odf-map__upsell { padding: 14px; border: 1px dashed var(--border-strong); border-radius: 14px; background: var(--surface-2); }
.odf-map__upsell p { margin: 0 0 10px; font-size: 13px; color: var(--muted); }
.odf-map__foot { margin: 0; font-size: 12.5px; }

@media (max-width: 900px) {
	.odf-map__body { grid-template-columns: 1fr; }
}

/* ── structured reports: post-type filter, composer, cards ─────────── */

.odf-typefilter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.odf-typefilter a.odf-chip { text-decoration: none; color: inherit; }
.odf-chip.is-active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.odf-chip.is-active:hover { border-color: var(--accent); }

.odf-typefield { margin-bottom: 16px; }
.odf-typefield__legend {
	display: block;
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 500;
	color: var(--muted);
}
.odf-typerow { display: flex; flex-wrap: wrap; gap: 8px; }
.odf-type {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--border);
	border-radius: var(--pill);
	background: var(--surface);
	font-size: 13.5px;
	font-weight: 550;
	color: var(--fg);
	cursor: pointer;
	transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
}
.odf-type:hover { border-color: var(--accent); background: var(--accent-soft); }
.odf-type.is-selected { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.odf-type__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: 0.55; }
.odf-type.is-selected .odf-type__dot { opacity: 1; }

.odf-struct {
	margin: 0 0 16px;
	padding: 16px;
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	background: var(--surface-2);
}
.odf-struct__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.odf-struct__title { margin: 0; font-size: 15px; font-family: var(--font-display); }
.odf-struct__hint { margin: 0 0 14px; font-size: 12.5px; color: var(--muted); }
.odf-struct__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; }
.odf-struct__grid .odf-field { margin-bottom: 0; }

.odf-rep {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 10px 0 0;
	padding: 12px 14px;
	border: 1px solid var(--border);
	border-radius: 16px;
	background: var(--surface-2);
}
.odf-rep--inline { margin: 16px 0; }
.odf-rep__kind { align-self: flex-start; }
.odf-rep__spec {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 16px;
	margin: 0;
}
.odf-rep__spec > div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.odf-rep__spec dt { font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--muted); }
.odf-rep__spec dd { margin: 0; font-size: 13.5px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

@media (max-width: 640px) {
	.odf-struct__grid,
	.odf-rep__spec { grid-template-columns: 1fr; }
}





/* ── Social-layer bridge ─────────────────────────────────────────────
 * The adopted community components come from the theme's rail.css as global
 * classes and render inside the forum's scoped green .odf tokens. Re-assert
 * their type metrics so the plugin's base button reset cannot flatten them,
 * and give the feed's liked state the accent the theme uses for .is-on. */
.odf .viewswitch button,
.odf .composer__tab { font: inherit; font-size: 12.5px; font-weight: 600; }
.odf .act.is-voted { color: var(--accent); }
.odf .act.is-on { color: var(--accent); }
.odf .act.is-on svg { stroke: var(--accent); }
.odf .odf-viewswitch { margin: 0 0 var(--gap-md, 16px); }

/* ── Reduced motion ───────────────────────────────────────────────────
 * House rule: honour prefers-reduced-motion. Neutralise the plugin's own
 * decorative motion (the live-map pulse, hover transitions, progress bars
 * and toast slides) for members who ask their OS for less animation. The
 * theme's shared social-layer components carry their own guard in rail.css. */
@media (prefers-reduced-motion: reduce) {
	.odf,
	.odf *,
	.odf *::before,
	.odf *::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── Friends & private trip plans (#694) ──────────────────────────────
 * The mutual-consent social layer: friend requests and friends-only trip
 * planning. Deliberately quiet and protective: neutral surfaces, a single
 * accent for affirmative actions, and a care notice that borrows the
 * warning tone used by safety messaging elsewhere in the forum. */
.odf-social__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--gap-md, 16px);
	margin: 0 0 var(--gap-lg, 24px);
}
.odf-social__head h1 { font-family: var(--font-display); font-size: 26px; margin: 0 0 4px; }
.odf-social__head .odf-searchbar { flex: 1 1 320px; max-width: 420px; }

.odf-social-group { margin: 0 0 var(--gap-lg, 28px); }

.odf-notice--quiet { color: var(--muted); }
.odf-notice--care {
	border-color: color-mix(in oklch, var(--warn) 42%, var(--border));
	background: color-mix(in oklch, var(--warn) 8%, transparent);
}
.odf-notice--care svg { width: 20px; height: 20px; flex: none; }

.odf-empty--inline {
	padding: 18px 20px;
	text-align: left;
	border-radius: var(--radius);
	font-size: 14px;
	color: var(--muted);
}

/* People lists: friends, requests, invitation picker, trip members. */
.odf-people { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.odf-people--compact { gap: 8px; }
.odf-person {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.odf-people--compact .odf-person { padding: 8px 10px; }
.odf-person__id { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.odf-person__name { font-weight: 600; color: var(--fg); text-decoration: none; }
.odf-person__name:hover { color: var(--accent); }
.odf-person__sub { font-size: 12.5px; color: var(--muted); }
.odf-person__actions { display: flex; align-items: center; gap: 8px; flex: none; }

.odf-pill {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 11px;
	border-radius: var(--pill);
	font-size: 12px;
	font-weight: 600;
	background: var(--surface-2);
	border: 1px solid var(--border);
	color: var(--muted);
}
.odf-pill--friend { color: var(--accent); border-color: color-mix(in oklch, var(--accent) 38%, var(--border)); background: var(--accent-soft); }
.odf-pill--pending { color: var(--warn); border-color: color-mix(in oklch, var(--warn) 36%, var(--border)); }
.odf-pill--owner { color: var(--accent-3); border-color: color-mix(in oklch, var(--accent-3) 36%, var(--border)); }

.odf-field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.odf-form__actions { display: flex; gap: 10px; margin-top: 12px; }
.odf-btn--danger { color: var(--danger); border-color: color-mix(in oklch, var(--danger) 40%, var(--border)); }
.odf-btn--danger:hover { background: color-mix(in oklch, var(--danger) 12%, transparent); }

/* New-plan disclosure + trip cards. */
.odf-social__new { margin: 0 0 var(--gap-lg, 24px); }
.odf-social__new > summary { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; list-style: none; }
.odf-social__new > summary::-webkit-details-marker { display: none; }
.odf-social__new > summary svg { width: 16px; height: 16px; }
.odf-social__new[open] > summary { margin-bottom: 16px; }

.odf-triplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.odf-tripcard {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 16px;
	background: var(--surface);
	border: 1px solid var(--border);
	border-radius: var(--radius);
}
.odf-tripcard__link { display: flex; align-items: center; gap: 14px; flex: 1; min-width: 0; text-decoration: none; color: inherit; }
.odf-tripcard__body { flex: 1; min-width: 0; }
.odf-tripcard__title { font-size: 16px; margin: 0 0 4px; display: flex; align-items: center; gap: 8px; font-family: var(--font-display); }
.odf-tripcard__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; font-size: 13px; color: var(--muted); }
.odf-tripcard__chev { width: 20px; height: 20px; color: var(--muted); flex: none; }
.odf-tripcard__actions { display: flex; gap: 8px; flex: none; }

/* Trip plan page. */
.odf-triph { align-items: flex-start; }
.odf-triph__meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; font-size: 13.5px; color: var(--muted); }
.odf-triph__summary { margin: 10px 0 0; max-width: 62ch; color: var(--fg); }
.odf-triph__tools { flex: none; }
.odf-trip__privacy { display: flex; align-items: center; gap: 10px; }
.odf-trip__privacy svg { width: 18px; height: 18px; flex: none; }
.odf-trip__invite {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
	padding: 14px 18px; margin: 0 0 var(--gap-lg, 24px);
	border: 1px solid color-mix(in oklch, var(--accent) 34%, var(--border));
	background: var(--accent-soft);
	border-radius: var(--radius);
}
.odf-trip__invite p { margin: 0; font-weight: 600; }
.odf-trip__invite-actions { display: flex; gap: 8px; }

.odf-trip__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--gap-lg, 28px); align-items: start; }
.odf-trip__main { min-width: 0; }
.odf-trip__side { min-width: 0; display: grid; gap: var(--gap-lg, 24px); align-content: start; }
.odf-trip__edit { margin-top: var(--gap-lg, 24px); }
.odf-tripform { max-width: 640px; }

/* Plan chat. */
.odf-tripchat { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 12px; }
.odf-tripchat__item { display: flex; gap: 12px; align-items: flex-start; }
.odf-tripchat__item.is-mine { flex-direction: row-reverse; text-align: right; }
.odf-tripchat__body { flex: 1; min-width: 0; }
.odf-tripchat__item.is-mine .odf-tripchat__body { align-items: flex-end; }
.odf-tripchat__meta { display: flex; gap: 6px; align-items: baseline; margin: 0 0 4px; font-size: 12.5px; color: var(--muted); }
.odf-tripchat__item.is-mine .odf-tripchat__meta { justify-content: flex-end; }
.odf-tripchat__text { font-size: 14.5px; line-height: 1.55; }
.odf-tripchat__text p { margin: 0 0 8px; }
.odf-tripchat__text p:last-child { margin-bottom: 0; }
.odf-tripchat__empty { color: var(--muted); font-size: 14px; padding: 18px 4px; }
.odf-tripchat__del { flex: none; }
.odf-tripchat__form { margin-top: 8px; }
.odf-tripchat__form textarea { width: 100%; }

/* Invite picker. */
.odf-tripiout { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--border); }
.odf-tripiout__title { font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin: 0 0 10px; font-family: var(--font-mono); }
.odf-tripiout__list { display: grid; gap: 6px; max-height: 220px; overflow: auto; }
.odf-tripiout__none { margin-top: 12px; font-size: 13px; }
.odf-check { display: flex; align-items: center; gap: 10px; font-size: 14px; padding: 4px 2px; cursor: pointer; }

@media (max-width: 860px) {
	.odf-trip__grid { grid-template-columns: 1fr; }
	.odf-social__head { align-items: stretch; }
	.odf-social__head .odf-searchbar { flex-basis: 100%; max-width: none; }
}
@media (max-width: 520px) {
	.odf-field-row { grid-template-columns: 1fr; }
	.odf-person { flex-wrap: wrap; }
	.odf-person__actions { width: 100%; justify-content: flex-end; }
}

/* First-run welcome / getting started (#1620). */
.odf-welcome { position: relative; display: grid; gap: 20px; padding: 22px; margin: 0 0 22px; border: 1px solid var(--border, #2a3444); border-radius: var(--radius-lg, 16px); background: linear-gradient(180deg, color-mix(in oklch, var(--accent, #8b5cf6) 10%, var(--surface, #12161e)), var(--surface, #12161e)); }
@media (min-width: 720px) { .odf-welcome { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.odf-welcome__eyebrow { margin: 0 0 4px; text-transform: uppercase; letter-spacing: .08em; font-size: .72rem; font-weight: 700; color: var(--accent, #8b5cf6); }
.odf-welcome__title { margin: 0 0 12px; font-size: clamp(18px, 2.4vw, 24px); }
.odf-welcome__steps { margin: 0 0 16px; padding-left: 18px; display: grid; gap: 6px; color: var(--muted, #aab3c2); }
.odf-welcome__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.odf-welcome__rooms-title { margin: 0 0 10px; font-size: .95rem; }
.odf-welcome__rooms-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.odf-welcome__rooms-list a { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 12px; border: 1px solid var(--border, #2a3444); border-radius: 10px; background: var(--surface, #12161e); color: inherit; text-decoration: none; }
.odf-welcome__rooms-list a:hover { border-color: var(--accent, #8b5cf6); }
.odf-welcome__room-name { font-weight: 600; }
.odf-welcome__dismiss { position: absolute; top: 12px; right: 14px; font-size: .8rem; color: var(--muted, #aab3c2); text-decoration: none; }
.odf-welcome__dismiss:hover { color: var(--fg, #eef1f6); }

/* Reactions beyond Boost (#1617). */
.odf-react { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.odf-react__btn { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border, #2a3444); border-radius: 999px; background: var(--surface, #12161e); color: var(--muted, #aab3c2); font-size: .8rem; cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease; }
.odf-react__btn:hover { border-color: var(--accent, #8b5cf6); color: var(--fg, #eef1f6); }
.odf-react__btn.is-on { border-color: var(--accent, #8b5cf6); background: color-mix(in oklch, var(--accent, #8b5cf6) 14%, var(--surface, #12161e)); color: var(--fg, #eef1f6); }
.odf-react__n { font-variant-numeric: tabular-nums; }
.odf-react__n:empty { display: none; }

/* Presence / typing / live updates (#1622). */
.odf-presence { display: inline-flex; align-items: center; gap: 8px; font-size: .8rem; color: var(--muted, #aab3c2); margin-top: 4px; }
.odf-presence__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok, #3ddc84); box-shadow: 0 0 0 3px color-mix(in oklch, var(--ok, #3ddc84) 25%, transparent); }
.odf-presence__typing { font-style: italic; }
.odf-presence__refresh { margin-left: 4px; padding: 3px 10px; border: 1px solid var(--accent, #8b5cf6); border-radius: 999px; background: color-mix(in oklch, var(--accent, #8b5cf6) 14%, var(--surface, #12161e)); color: var(--fg, #eef1f6); font-size: .78rem; cursor: pointer; }
.odf-presence__refresh:hover { filter: brightness(1.1); }

/* Composer 2.0 tabs + dropzone + topic media (#1618). */
.odf-ctabs { display: flex; gap: 6px; align-items: center; margin: 0 0 16px; border-bottom: 1px solid var(--border, #2a3444); padding-bottom: 8px; }
.odf-ctab { padding: 6px 14px; border: 1px solid transparent; border-radius: 999px; background: none; color: var(--muted, #aab3c2); font-weight: 600; font-size: .9rem; cursor: pointer; }
.odf-ctab:hover { color: var(--fg, #eef1f6); }
.odf-ctab.is-active { color: var(--fg, #eef1f6); background: color-mix(in oklch, var(--accent, #8b5cf6) 14%, var(--surface, #12161e)); border-color: var(--accent, #8b5cf6); }
.odf-ctabs__draft { margin-left: auto; font-size: .78rem; }
.odf-dropzone { display: grid; gap: 10px; padding: 20px; border: 2px dashed var(--border, #2a3444); border-radius: var(--radius-lg, 14px); background: var(--surface, #12161e); text-align: center; transition: border-color .15s ease, background .15s ease; }
.odf-dropzone.is-dragover { border-color: var(--accent, #8b5cf6); background: color-mix(in oklch, var(--accent, #8b5cf6) 10%, var(--surface, #12161e)); }
.odf-dropzone__browse { background: none; border: 0; color: var(--accent, #8b5cf6); font: inherit; font-weight: 600; cursor: pointer; text-decoration: underline; }
.odf-dropzone__preview { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.odf-dropzone__thumb { width: 84px; height: 84px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #2a3444); }
.odf-post__media { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.odf-post__media-item img { width: 150px; height: 110px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border, #2a3444); }

/* Direct messages (#1619). */
.odf-nav__badge { display: inline-block; margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent, #8b5cf6); color: #fff; font-size: .7rem; font-weight: 700; }
.odf-inbox__head { margin-bottom: 14px; }
.odf-inbox__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.odf-inbox__link { display: flex; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--border, #2a3444); border-radius: 12px; background: var(--surface, #12161e); color: inherit; text-decoration: none; }
.odf-inbox__link:hover { border-color: var(--accent, #8b5cf6); }
.odf-inbox__main { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.odf-inbox__name { font-weight: 700; }
.odf-inbox__excerpt { color: var(--muted, #aab3c2); font-size: .85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.odf-inbox__meta { display: flex; align-items: center; gap: 8px; }
.odf-badge { padding: 1px 7px; border-radius: 999px; background: var(--accent, #8b5cf6); color: #fff; font-size: .72rem; font-weight: 700; }
.odf-dm__head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.odf-dm__id { display: flex; flex-direction: column; flex: 1; }
.odf-dm__name { font-weight: 700; }
.odf-dm__stream { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 10px; max-height: 60vh; overflow-y: auto; }
.odf-dm__msg { display: flex; flex-direction: column; align-items: flex-start; max-width: 75%; }
.odf-dm__msg.is-mine { align-self: flex-end; align-items: flex-end; }
.odf-dm__bubble { padding: 8px 12px; border-radius: 14px; background: var(--surface, #12161e); border: 1px solid var(--border, #2a3444); }
.odf-dm__msg.is-mine .odf-dm__bubble { background: color-mix(in oklch, var(--accent, #8b5cf6) 18%, var(--surface, #12161e)); border-color: var(--accent, #8b5cf6); }
.odf-dm__time { font-size: .72rem; margin-top: 2px; }
.odf-dm__form { display: grid; gap: 8px; }
.odf-dm__formrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Discovery & retention (#1615): saved searches, trending, save-search. */
.odf-savedstrip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 16px; }
.odf-savedstrip__label { font-size: .8rem; color: var(--muted, #aab3c2); text-transform: uppercase; letter-spacing: .06em; }
.odf-savedstrip__item { display: inline-flex; align-items: center; gap: 2px; }
.odf-savedstrip__x { background: none; border: 0; color: var(--muted, #aab3c2); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 4px; }
.odf-savedstrip__x:hover { color: var(--danger, #f87171); }
.odf-trendtopics { margin: 0 0 22px; }
.odf-trendtopics__title { margin: 0 0 10px; font-size: 1.05rem; }
.odf-trendtopics__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.odf-trendtopics__row { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--border, #2a3444); padding-bottom: 6px; }
.odf-trendtopics__link { font-weight: 600; color: inherit; text-decoration: none; }
.odf-trendtopics__link:hover { color: var(--accent, #8b5cf6); }

/* PWA install / alerts buttons (#1616). */
.odf-nav__install, .odf-nav__notify { white-space: nowrap; }

/* Age assurance (#1729) on the safety screen. */
.odf-assurance__status { margin: 0 0 12px; }
.odf-assurance__status strong { color: var(--fg, #e8ecf4); }
.odf-assurance__actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 10px; }
.odf-assurance__actions .odf-btn:disabled { opacity: .55; cursor: not-allowed; }
.odf-assurance__embed { margin-top: 12px; }
.odf-assurance__embed[hidden] { display: none; }
.odf-assurance__frame { width: 100%; min-height: 560px; border: 1px solid var(--border, #2a3444); border-radius: 12px; background: var(--surface, #12161e); }

/* Content Standards: disclosure + sensitive media (#2189). */
.odf-post__disclosure { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 8px 0; font-size: .85rem; }
.odf-tag--ai { background: color-mix(in oklch, var(--accent, #8b5cf6) 22%, transparent); color: var(--accent, #8b5cf6); border-radius: 999px; padding: 1px 8px; font-size: .72rem; font-weight: 700; }
.odf-post__sensitive { margin: 8px 0; }
.odf-post__sensitive summary { cursor: pointer; color: var(--warn, #f59e0b); font-weight: 600; }
.odf-disclosefield { margin-top: 12px; }
.odf-disclosefield .odf-toggle { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }