/* FinanceOS Community
   Extends the theme's .sp-discussion / .sp-comment-list rules in
   themes/financeos/assets/css/workshops.css — only the new affordances live
   here. Uses the same token-with-fallback pattern as the theme. */

/* ---------- comment row ---------- */

.fosc-comment.is-pinned > .comment-body {
	background: var(--surface-tinted, rgba(220, 220, 220, .22));
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 14px;
	padding: 16px 18px;
	margin-bottom: 4px;
}

.fosc-pin-flag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--brand-pink, #e0218a);
	margin-bottom: 10px;
}
.fosc-pin-flag::before { content: "📌"; }

.fosc-pin-attachment {
	clear: both;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 10px;
	padding: 8px 14px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 999px;
	background: var(--bg-white, #fff);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-deep, #1c1c1c);
	text-decoration: none;
	transition: border-color 160ms, transform 160ms;
}
.fosc-pin-attachment:hover {
	border-color: var(--brand-pink, #e0218a);
	transform: translateY(-1px);
}

/* ---------- actions row ---------- */

.fosc-actions {
	clear: both;
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 10px;
}
.fosc-actions .reply { margin-top: 0; }

.fosc-report {
	border: 0;
	background: none;
	padding: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	cursor: pointer;
	transition: color 160ms;
}
.fosc-report:hover { color: var(--brand-pink, #e0218a); }
.fosc-report.is-done {
	color: var(--ink-soft, #6b6b6b);
	font-weight: 500;
	cursor: default;
}
.fosc-report[disabled] { cursor: default; }

/* ---------- votes ---------- */

.fosc-vote {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
.fosc-vote-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--gray-soft, #8b8b8b);
	cursor: pointer;
	transition: color 160ms, background 160ms;
}
.fosc-vote-btn:hover {
	color: var(--brand-pink, #e0218a);
	background: var(--surface-tinted, rgba(220, 220, 220, .3));
}
.fosc-vote-btn.is-on { color: var(--brand-pink, #e0218a); }

/* Signed-out arrows are links to sign-in, not controls. Keep them quieter than
   a live vote button so they don't imply the vote was cast. */
.fosc-vote--gated .fosc-vote-btn {
	opacity: .55;
	text-decoration: none;
}
.fosc-vote--gated .fosc-vote-btn:hover {
	opacity: 1;
	color: var(--brand-pink, #e0218a);
}
.fosc-vote-score {
	min-width: 20px;
	text-align: center;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-deep, #1c1c1c);
}

/* ---------- anonymous checkbox ---------- */

.fosc-submit-row {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
}
.fosc-anon {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 2px 8px;
	align-items: center;
	font-size: 13.5px;
	color: var(--ink, #333);
	cursor: pointer;
}
.fosc-anon input { margin: 0; }
.fosc-anon-note {
	grid-column: 2;
	font-size: 12.5px;
	color: var(--ink-soft, #6b6b6b);
}

/* ---------- signed-out gate ---------- */

.fosc-gate-actions { margin: 14px 0 0; }
.fosc-gate-actions .sp-form-submit {
	display: inline-block;
	text-decoration: none;
}

/* ---------- share ---------- */

.fosc-share {
	display: flex;
	align-items: center;
	gap: 12px;
}
.fosc-share__label {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--ink-soft, #6b6b6b);
}
/* The theme gives .fos-toc__share a top border for the blog sidebar, where it
   is a real divider. In our share row it reads as a stray line, so drop it
   here only — the sidebar keeps its rule. */
.fosc-share .fos-toc__share {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 0;
	padding-top: 0;
	border-top: 0;
}

/* Collapsed variant: one Share button, <details> expands the icon row inline. */
.fosc-share--collapsed summary {
	list-style: none;
}
.fosc-share--collapsed summary::-webkit-details-marker { display: none; }
.fosc-share--collapsed[open] summary {
	color: var(--brand-pink, #e0218a);
}

/* Jump to the discussion */
.fosc-join {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-deep, #1c1c1c);
	text-decoration: none;
	transition: border-color 160ms, color 160ms, transform 160ms;
}
.fosc-join:hover {
	border-color: var(--brand-pink, #e0218a);
	color: var(--brand-pink, #e0218a);
	transform: translateY(-1px);
}
.fosc-join__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--surface-tinted, rgba(220, 220, 220, .4));
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
	.fosc-actions { gap: 12px; }
	.fosc-submit-row { flex-direction: column; align-items: stretch; }
}

/* ---------- host-page layout
   Widths match the section each discussion sits under: .pl-related on prompt
   pages (760px), .fos-reading on blog posts (880px). ---------- */

.pl-discussion {
	max-width: 760px;
	margin: 0 auto 72px;
	padding: 0 32px;
}

/* Share row sits between the meta strip and the first section on prompt pages. */
.pl article > .fosc-share,
.pl-article > .fosc-share {
	margin: 20px 0 34px;
}

/* On webinar sessions it sits on its own line below the Week / Aired / Length
   row. That row is a flex container, so a full-basis child forces the wrap. */
.sp-hero-share {
	flex-basis: 100%;
	align-self: flex-start;
	margin-top: 6px;
}
.sp-hero-share .fosc-share {
	gap: 14px;
}

@media (max-width: 600px) {
	.fosc-share { flex-wrap: wrap; row-gap: 12px; }
}

.fos-post-discussion {
	max-width: 880px;
	margin: 0 auto;
	padding: 8px 24px 64px;
}

/* The theme scopes .sp-block padding to webinar pages; neutralise it where the
   discussion is the only block on the page. */
.pl-discussion .sp-block,
.fos-post-discussion .sp-block {
	padding: 0;
	border: 0;
	background: none;
}

/* ================================================================
   LinkedIn sign-in
   ================================================================ */

.fosc-li-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 11px 20px;
	border-radius: 999px;
	background: #0a66c2;
	color: #fff;
	font-size: 14.5px;
	font-weight: 600;
	text-decoration: none;
	transition: background 160ms, transform 160ms;
}
.fosc-li-btn:hover {
	background: #004182;
	color: #fff;
	transform: translateY(-1px);
}
.fosc-li-btn--lg { padding: 14px 26px; font-size: 16px; }
.fos-account__card--sso { text-align: center; }
.fos-account__card--sso .sp-form-fine { margin-top: 14px; }

/* ================================================================
   First-login job title
   ================================================================ */

.fosc-welcome {
	position: fixed;
	inset: 0;
	z-index: 9999;
	display: grid;
	place-items: center;
	padding: 24px;
	background: rgba(20, 20, 20, .55);
}
.fosc-welcome__card {
	width: min(460px, 100%);
	background: var(--bg-white, #fff);
	border-radius: 18px;
	padding: 30px 32px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
}
.fosc-welcome__h {
	margin: 0 0 8px;
	font-size: 21px;
	font-weight: 600;
	color: var(--ink-deep, #1c1c1c);
}
.fosc-welcome__p {
	margin: 0 0 18px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-welcome__actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 18px;
}
.fosc-welcome__skip {
	border: 0;
	background: none;
	padding: 0;
	font-size: 13.5px;
	color: var(--ink-soft, #6b6b6b);
	cursor: pointer;
	text-decoration: underline;
}

/* ================================================================
   Forum
   ================================================================ */

.fosc-thread,
.fosc-events {
	max-width: 860px;
	margin: 0 auto;
	padding: 56px 24px 80px;
}
.fosc-forum {
	/* matches .fos-nav__inner width */
	max-width: 1200px;
	margin: 0 auto;
	padding: 56px 48px 80px;
}
@media (max-width: 600px) {
	.fosc-forum { padding-left: 24px; padding-right: 24px; }
}

.fosc-forum__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-bottom: 28px;
}
.fosc-forum__title {
	margin: 6px 0 4px;
	font-size: 34px;
	font-weight: 600;
	color: var(--ink-deep, #1c1c1c);
}
.fosc-forum__sub {
	margin: 0;
	font-size: 15px;
	color: var(--ink-soft, #6b6b6b);
}

.fosc-notice {
	padding: 12px 16px;
	border-radius: 12px;
	background: var(--surface-tinted, rgba(220, 220, 220, .3));
	border: 1px solid var(--line, #e8e4dd);
	font-size: 14px;
	margin-bottom: 20px;
}
.fosc-notice--error { border-color: #e0218a; }

.fosc-composer {
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 16px;
	padding: 22px 24px;
	margin-bottom: 28px;
	background: var(--bg-white, #fff);
}
.fosc-composer .sp-field { display: block; margin-bottom: 14px; }

.fosc-forum__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 34px;
	align-items: start;
}
.fosc-forum__main { min-width: 0; }

/* ---------- highlights ---------- */

.fosc-highlights {
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 14px;
	padding: 14px 18px;
	margin-bottom: 18px;
	background: var(--bg-white, #fff);
}
.fosc-highlights__toggle {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ink-soft, #6b6b6b);
	list-style: none;
}
.fosc-highlights__toggle::-webkit-details-marker { display: none; }
.fosc-highlights__body { margin-top: 12px; display: grid; gap: 10px; }
.fosc-highlight {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 12px;
	text-decoration: none;
	transition: border-color 160ms;
}
.fosc-highlight:hover { border-color: var(--brand-pink, #e0218a); }
.fosc-highlight__title {
	margin: 0 0 4px;
	font-size: 15.5px;
	font-weight: 600;
	color: var(--ink-deep, #1c1c1c);
}
.fosc-highlight__meta { margin: 0; font-size: 12.5px; color: var(--ink-soft, #6b6b6b); }

/* ---------- sort bar ---------- */

.fosc-sortbar {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
	padding: 10px 0;
	border-bottom: 1px solid var(--line, #e8e4dd);
	margin-bottom: 4px;
}
.fosc-sortbar__label {
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	margin-right: 8px;
}
.fosc-sortbar__opt {
	padding: 6px 14px;
	border-radius: 999px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	text-decoration: none;
	transition: background 160ms, color 160ms;
}
.fosc-sortbar__opt:hover { background: var(--surface-tinted, rgba(220, 220, 220, .35)); }
.fosc-sortbar__opt.is-on {
	background: var(--ink-deep, #1c1c1c);
	color: #fff;
}

/* Sort / topic dropdowns — native <details>, styled as pills with a menu card. */
.fosc-dd { position: relative; }
.fosc-dd > summary {
	list-style: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	border: 1px solid var(--line, #e8e4dd);
	background: var(--bg-white, #fff);
}
.fosc-dd > summary::-webkit-details-marker { display: none; }
.fosc-dd[open] > summary { background: var(--surface-tinted, rgba(220, 220, 220, .35)); }
.fosc-dd__menu {
	position: absolute;
	top: calc(100% + 6px);
	left: 0;
	z-index: 20;
	min-width: 180px;
	padding: 6px;
	background: var(--bg-white, #fff);
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 14px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, .1);
	display: flex;
	flex-direction: column;
}
.fosc-dd__opt {
	padding: 8px 12px;
	border-radius: 9px;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	text-decoration: none;
}
.fosc-dd__opt:hover { background: var(--surface-tinted, rgba(220, 220, 220, .35)); }
.fosc-dd__opt.is-on { color: var(--brand-pink, #e0218a); }

/* ---------- thread rows (Reddit-style) ---------- */

.fosc-thread-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.fosc-thread-row {
	padding: 18px 0;
	border-bottom: 1px solid var(--line, #e8e4dd);
}
.fosc-thread-row.is-pinned { background: var(--surface-tinted, rgba(220, 220, 220, .18)); }

.fosc-byline {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	color: var(--ink-soft, #6b6b6b);
	margin-bottom: 7px;
}
.fosc-byline__avatar {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
}
.fosc-byline__name { font-weight: 600; color: var(--ink-deep, #1c1c1c); }

.fosc-thread-title {
	margin: 0 0 6px;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.35;
	display: flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.fosc-thread-title a {
	color: var(--ink-deep, #1c1c1c);
	text-decoration: none;
}
.fosc-thread-title a:hover { color: var(--brand-pink, #e0218a); }
.fosc-thread-excerpt {
	margin: 0 0 12px;
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--ink, #333);
}

.fosc-cat {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--cat, #6b7280) 12%, transparent);
	color: var(--cat, #6b7280);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-decoration: none;
	white-space: nowrap;
}

.fosc-thread-actions {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.fosc-thread-actions .fosc-vote {
	background: var(--surface-tinted, rgba(220, 220, 220, .35));
	border-radius: 999px;
	padding: 0 4px;
}
.fosc-action {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 12px;
	border: 0;
	border-radius: 999px;
	background: var(--surface-tinted, rgba(220, 220, 220, .35));
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	text-decoration: none;
	cursor: pointer;
	transition: color 160ms, background 160ms;
}
.fosc-action:hover { color: var(--brand-pink, #e0218a); }
.fosc-action.is-on { color: var(--brand-pink, #e0218a); }
.fosc-action.is-copied { color: var(--brand-pink, #e0218a); }
.fosc-thread-actions__share { margin-left: 4px; }
.fosc-thread-actions--single {
	padding: 16px 0;
	border-top: 1px solid var(--line, #e8e4dd);
	border-bottom: 1px solid var(--line, #e8e4dd);
	margin: 20px 0 8px;
}
/* Inside the single-thread layout the article is a column child, not the
   page wrapper — drop the wrapper sizing so post and comments align. */
.fosc-forum--single .fosc-thread {
	max-width: none;
	margin: 0;
	padding: 0;
}

/* ---------- sidebar ---------- */

.fosc-sidebar { display: grid; gap: 16px; position: sticky; top: 96px; }
.fosc-sidebar__card {
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 14px;
	padding: 18px 20px;
	background: var(--bg-white, #fff);
}
.fosc-sidebar__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}
.fosc-sidebar__h { margin: 0; font-size: 17px; font-weight: 600; }
.fosc-join-btn {
	padding: 7px 18px;
	border: 0;
	border-radius: 999px;
	background: var(--brand-pink, #e0218a);
	color: #fff;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
	text-decoration: none;
	transition: opacity 160ms;
}
.fosc-join-btn:hover { opacity: .88; color: #fff; }
.fosc-join-btn.is-on {
	background: none;
	border: 1px solid var(--line, #e8e4dd);
	color: var(--ink-soft, #6b6b6b);
}
.fosc-sidebar__desc {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.6;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-sidebar__stats {
	display: flex;
	gap: 28px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid var(--line, #e8e4dd);
}
.fosc-sidebar__stats strong { display: block; font-size: 17px; color: var(--ink-deep, #1c1c1c); }
.fosc-sidebar__stats span { font-size: 12.5px; color: var(--ink-soft, #6b6b6b); }

.fosc-sidebar__rules-h {
	margin: 0 0 12px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
.fosc-rules li { border-top: 1px solid var(--line, #e8e4dd); }
.fosc-rules li:first-child { border-top: 0; }
.fosc-rules summary {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	padding: 11px 0;
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-deep, #1c1c1c);
	list-style: none;
}
.fosc-rules summary::-webkit-details-marker { display: none; }
.fosc-rules__n { color: var(--ink-soft, #6b6b6b); font-weight: 600; flex: none; }
.fosc-rules p {
	margin: 0 0 12px 26px;
	font-size: 13px;
	line-height: 1.6;
	color: var(--ink-soft, #6b6b6b);
}

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

.fosc-composer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 14px;
}
.fosc-composer__h { margin: 0; font-size: 19px; font-weight: 600; }
.fosc-composer__close {
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--ink-soft, #6b6b6b);
	cursor: pointer;
	padding: 0 4px;
}
.fosc-composer__tags { margin-bottom: 14px; }
.fosc-tag-picker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.fosc-tag-opt { cursor: pointer; }
.fosc-tag-opt input { position: absolute; opacity: 0; pointer-events: none; }
.fosc-tag-opt span {
	display: inline-block;
	padding: 5px 13px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	transition: border-color 160ms, color 160ms, background 160ms;
}
.fosc-tag-opt input:checked + span {
	border-color: var(--cat, #6b7280);
	background: color-mix(in srgb, var(--cat, #6b7280) 12%, transparent);
	color: var(--cat, #6b7280);
}
.fosc-tag-opt input:focus-visible + span { outline: 2px solid var(--brand-pink, #e0218a); outline-offset: 2px; }

/* ---------- report modal ---------- */

.fosc-modal {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: grid;
	place-items: center;
	padding: 24px;
}
.fosc-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(20, 20, 20, .55);
}
.fosc-modal__card {
	position: relative;
	width: min(520px, 100%);
	max-height: 85vh;
	overflow-y: auto;
	background: var(--bg-white, #fff);
	border-radius: 18px;
	padding: 28px 30px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.fosc-modal__x {
	position: absolute;
	top: 16px;
	right: 18px;
	border: 0;
	background: none;
	font-size: 26px;
	line-height: 1;
	color: var(--ink-soft, #6b6b6b);
	cursor: pointer;
}
.fosc-modal__h { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.fosc-modal__p {
	margin: 0 0 18px;
	font-size: 14px;
	line-height: 1.6;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-modal__pills { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.fosc-modal__pill {
	padding: 7px 14px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 999px;
	background: none;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink, #333);
	cursor: pointer;
	transition: border-color 160ms, background 160ms, color 160ms;
}
.fosc-modal__pill:hover { border-color: var(--brand-pink, #e0218a); }
.fosc-modal__pill.is-on {
	border-color: var(--brand-pink, #e0218a);
	background: var(--brand-pink, #e0218a);
	color: #fff;
}
.fosc-modal__note { width: 100%; box-sizing: border-box; resize: vertical; }
.fosc-modal__actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 14px;
	margin-top: 18px;
}
.fosc-modal__cancel {
	border: 0;
	background: none;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	cursor: pointer;
}
.sp-form-submit[disabled] { opacity: .5; cursor: default; }
.fosc-create-btn { padding: 10px 20px; margin-top: 0; }
.fosc-create-btn:hover { transform: none; box-shadow: none; opacity: .88; }

/* ---------- single thread ---------- */

.fosc-thread__title {
	margin: 0 0 12px;
	font-size: 25px;
	font-weight: 500;
	line-height: 1.3;
	text-align: left;
	color: var(--ink-deep, #1c1c1c);
	display: flex;
	align-items: baseline;
	gap: 12px;
	flex-wrap: wrap;
}

@media (max-width: 900px) {
	.fosc-forum__layout { grid-template-columns: 1fr; }
	.fosc-sidebar { position: static; order: 2; }
}

.fosc-thread-back { margin: 0 0 18px; font-size: 14px; }
.fosc-thread-back a { color: var(--ink-soft, #6b6b6b); text-decoration: none; }
.fosc-thread-back a:hover { color: var(--brand-pink, #e0218a); }

.fosc-thread__body {
	font-size: 16px;
	line-height: 1.7;
	color: var(--ink, #333);
	margin-bottom: 24px;
}
.fosc-pagination {
	display: flex;
	gap: 10px;
	justify-content: center;
	margin-top: 32px;
	font-size: 14px;
}
.fosc-empty {
	padding: 40px 0;
	text-align: center;
	color: var(--ink-soft, #6b6b6b);
}

/* ================================================================
   Events
   ================================================================ */

.fosc-events__head { margin-bottom: 32px; }
.fosc-events__title {
	margin: 0 0 8px;
	font-size: 38px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--ink-deep, #1c1c1c);
	max-width: 16ch;
}
.fosc-events__sub {
	margin: 0;
	font-size: 16px;
	color: var(--ink-soft, #6b6b6b);
}

.fosc-event-feature {
	display: grid;
	grid-template-columns: 1.1fr 1fr;
	gap: 28px;
	align-items: center;
	padding: 20px;
	margin-bottom: 32px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 18px;
	background: var(--bg-white, #fff);
	text-decoration: none;
	transition: transform 180ms, box-shadow 180ms;
}
.fosc-event-feature:hover {
	transform: translateY(-2px);
	box-shadow: var(--shadow-card-hover, 0 16px 40px rgba(0, 0, 0, .1));
}
.fosc-event-feature__media img,
.fosc-event-card__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 12px;
}
.fosc-event-feature__media { aspect-ratio: 4 / 3; }
.fosc-event-feature__title {
	margin: 6px 0 10px;
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
	color: var(--ink-deep, #1c1c1c);
}

.fosc-event-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 22px;
}
.fosc-event-card {
	text-decoration: none;
	transition: transform 180ms;
}
.fosc-event-card:hover { transform: translateY(-2px); }
.fosc-event-card__media {
	aspect-ratio: 3 / 2;
	margin-bottom: 12px;
}
.fosc-event-card__title {
	margin: 4px 0 8px;
	font-size: 16px;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink-deep, #1c1c1c);
}

.fosc-event-when {
	margin: 0;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-event-where {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	align-items: center;
	margin: 0;
	font-size: 13px;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-event-type {
	padding: 3px 10px;
	border-radius: 999px;
	background: var(--surface-tinted, rgba(220, 220, 220, .35));
	font-weight: 600;
	font-size: 12px;
}
.fosc-event-cta {
	display: inline-block;
	margin-top: 16px;
	font-size: 14px;
	font-weight: 600;
	color: var(--brand-pink, #e0218a);
}

.fosc-past { margin-top: 48px; }
.fosc-past__toggle {
	cursor: pointer;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
	padding: 10px 0;
}
.fosc-past__toggle:hover { color: var(--brand-pink, #e0218a); }
.fosc-event-grid--past { margin-top: 18px; opacity: .75; }

@media (max-width: 860px) {
	.fosc-event-grid { grid-template-columns: repeat(2, 1fr); }
	.fosc-event-feature { grid-template-columns: 1fr; }
	.fosc-events__title { font-size: 30px; max-width: none; }
}
@media (max-width: 560px) {
	.fosc-event-grid { grid-template-columns: 1fr; }
}

.fosc-event-single__media { margin-bottom: 24px; }
.fosc-event-single__media img { width: 100%; border-radius: 16px; display: block; }
.fosc-event-single .fosc-events__title { margin: 8px 0 12px; max-width: none; }
.fosc-event-single .fosc-event-where { margin-bottom: 24px; }

/* Homepage forum teaser */
.fosc-teaser__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 16px;
}
.fosc-teaser__title { margin: 0; font-size: 22px; font-weight: 600; }
.fosc-teaser__all { font-size: 14px; font-weight: 600; color: var(--brand-pink, #e0218a); text-decoration: none; }
.fosc-teaser__list { list-style: none; margin: 0; padding: 0; }
.fosc-teaser__list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 12px 0;
	border-bottom: 1px solid var(--line, #e8e4dd);
	font-size: 15px;
}
.fosc-teaser__list a { color: var(--ink-deep, #1c1c1c); text-decoration: none; }
.fosc-teaser__list a:hover { color: var(--brand-pink, #e0218a); }
.fosc-teaser__meta { color: var(--ink-soft, #6b6b6b); font-size: 13px; white-space: nowrap; }

/* ================================================================
   Formatting toolbar
   ================================================================ */

.fosc-editor { display: block; }
.fosc-toolbar {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-wrap: wrap;
	padding: 6px 8px;
	border: 1px solid var(--line, #e8e4dd);
	border-bottom: 0;
	border-radius: 10px 10px 0 0;
	background: var(--surface-tinted, rgba(220, 220, 220, .22));
}
.fosc-tb {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 7px;
	border: 0;
	border-radius: 7px;
	background: none;
	font-size: 13px;
	color: var(--ink-soft, #6b6b6b);
	cursor: pointer;
	transition: background 140ms, color 140ms;
}
.fosc-tb:hover { background: var(--bg-white, #fff); color: var(--ink-deep, #1c1c1c); }
.fosc-tb[disabled] { opacity: .5; cursor: default; }
.fosc-tb__sep {
	width: 1px;
	height: 18px;
	margin: 0 5px;
	background: var(--line, #e8e4dd);
}
.fosc-tb__status { font-size: 12px; color: var(--ink-soft, #6b6b6b); padding-left: 4px; }

.fosc-editor .sp-field-input {
	border-radius: 0 0 10px 10px;
	width: 100%;
	box-sizing: border-box;
}
/* Toolbar is hidden until the editor upgrades, so the plain textarea keeps
   its own rounded corners when JavaScript never runs. */
.fosc-editor .fosc-toolbar[hidden] + .sp-field-input,
.fosc-editor .fosc-toolbar[hidden] ~ textarea { border-radius: 10px; }

.fosc-tb.is-on {
	background: var(--ink-deep, #1c1c1c);
	color: #fff;
}

/* ---------- the editable region ---------- */

.fosc-rte {
	min-height: 150px;
	padding: 14px 16px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 0 0 10px 10px;
	background: var(--bg-white, #fff);
	font-size: 15px;
	line-height: 1.65;
	color: var(--ink, #333);
	overflow-wrap: anywhere;
}
.fosc-rte:focus {
	outline: none;
	border-color: var(--brand-pink, #e0218a);
}
.fosc-rte:empty::before {
	content: attr(data-placeholder);
	color: var(--gray-soft, #8b8b8b);
	pointer-events: none;
}
.fosc-rte p { margin: 0 0 10px; }
.fosc-rte p:last-child { margin-bottom: 0; }
.fosc-rte ul,
.fosc-rte ol { margin: 0 0 10px; padding-left: 22px; }
.fosc-rte blockquote {
	margin: 10px 0;
	padding: 2px 0 2px 14px;
	border-left: 3px solid var(--line, #e8e4dd);
	color: var(--ink-soft, #6b6b6b);
}
.fosc-rte img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 8px 0;
}
.fosc-rte a { color: var(--brand-pink, #e0218a); }

/* The comment box is shorter than the composer. */
.sp-discussion .fosc-rte { min-height: 100px; }

/* Member-posted images must never blow out the column. */
.fosc-thread__body img,
.sp-comment-list .comment-content img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	margin: 10px 0;
}
.fosc-thread__body blockquote,
.sp-comment-list .comment-content blockquote {
	margin: 12px 0;
	padding: 2px 0 2px 16px;
	border-left: 3px solid var(--line, #e8e4dd);
	color: var(--ink-soft, #6b6b6b);
}
.fosc-thread__body code,
.sp-comment-list .comment-content code {
	padding: 2px 6px;
	border-radius: 5px;
	background: var(--surface-tinted, rgba(220, 220, 220, .4));
	font-size: .92em;
}

/* ================================================================
   Polls
   ================================================================ */

.fosc-poll-fields {
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 12px;
	padding: 12px 16px;
	margin-bottom: 16px;
}
.fosc-poll-fields summary {
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-poll-fields__body { display: grid; gap: 8px; margin-top: 12px; }

.fosc-poll { display: grid; gap: 8px; margin: 20px 0; }
.fosc-poll__opt {
	position: relative;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 10px;
	background: none;
	font-size: 14.5px;
	text-align: left;
	color: var(--ink-deep, #1c1c1c);
	cursor: pointer;
	overflow: hidden;
	transition: border-color 160ms;
}
.fosc-poll__opt:hover:not([disabled]) { border-color: var(--brand-pink, #e0218a); }
.fosc-poll__opt[disabled] { cursor: default; }
.fosc-poll__opt.is-mine { border-color: var(--brand-pink, #e0218a); font-weight: 600; }
.fosc-poll__fill {
	position: absolute;
	inset: 0 auto 0 0;
	width: 0;
	background: color-mix(in srgb, var(--brand-pink, #e0218a) 12%, transparent);
	transition: width 320ms ease;
}
.fosc-poll:not(.is-voted) .fosc-poll__fill { display: none; }
.fosc-poll__label { position: relative; flex: 1; }
.fosc-poll__pct {
	position: relative;
	font-size: 13px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--ink-soft, #6b6b6b);
}
.fosc-poll__total { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-soft, #6b6b6b); }

/* ================================================================
   Avatar picker
   ================================================================ */

.fosc-avatars__head {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}
.fosc-avatars__current {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	background: var(--surface-tinted, rgba(220, 220, 220, .4));
}
.fosc-avatars__h { margin: 0 0 2px; font-size: 16px; font-weight: 600; }

.fosc-avatars__grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.fosc-avatar-opt {
	width: 52px;
	height: 52px;
	padding: 0;
	border: 2px solid transparent;
	border-radius: 50%;
	background: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color 160ms, transform 160ms;
}
.fosc-avatar-opt img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.fosc-avatar-opt:hover { transform: translateY(-1px); }
.fosc-avatar-opt.is-on { border-color: var(--brand-pink, #e0218a); }
.fosc-avatar-opt--upload {
	border: 2px dashed var(--line, #e8e4dd);
	color: var(--ink-soft, #6b6b6b);
}
.fosc-avatar-opt--upload:hover { border-color: var(--brand-pink, #e0218a); color: var(--brand-pink, #e0218a); }
.fosc-avatar-opt[disabled] { opacity: .5; cursor: default; }
.fosc-avatars__status { margin: 12px 0 0; min-height: 1.2em; }

/* ================================================================
   Nav profile menu
   ================================================================ */

.fos-nav__me { position: relative; }
.fos-nav__me-btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 4px 6px;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.fos-nav__avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}
.fos-nav__me-menu {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 200;
	min-width: 170px;
	padding: 6px;
	border: 1px solid var(--line, #e8e4dd);
	border-radius: 12px;
	background: var(--bg-white, #fff);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .13);
}
.fos-nav__me-menu a {
	display: block;
	padding: 9px 12px;
	border-radius: 8px;
	font-size: 14px;
	color: var(--ink-deep, #1c1c1c);
	text-decoration: none;
}
.fos-nav__me-menu a:hover {
	background: var(--surface-tinted, rgba(220, 220, 220, .4));
	color: var(--brand-pink, #e0218a);
}