/**
 * Yo, Cairns! — design tokens.
 * Values originally copied verbatim from the handoff README's ":root"
 * block. Restyled in favour of the logo's own palette (navy + teal +
 * the same sunset orange) — the exact original values live on as the
 * "classic" preset (see YoCairns_Settings::color_presets()), applied
 * as an inline override when an admin picks it from Settings, so nothing
 * here needs touching again just to switch back.
 * Component classes below (.btn, .card, .tag, .nav, .table) implement the
 * "Component conventions" section of the same doc and are reused across
 * every screen built in later steps.
 */

:root {
	--color-bg: #f2f2f2;
	--color-surface: #ffffff;
	--color-text: #102a3d;
	--color-accent: #f59e0b;
	--color-teal: #1ca9c9;
	--color-link: #034166;
	--color-link-active: #05b4c7;
	--color-divider: #dddddd;

	--color-neutral-100: #f8f8f8;
	--color-neutral-200: #f0f0f0;
	--color-neutral-300: #e3e3e3;
	--color-neutral-400: #c9c9c9;
	--color-neutral-500: #ababab;
	--color-neutral-600: #8a8a8a;
	--color-neutral-700: #5e5e5e;
	--color-neutral-800: #333333;
	--color-neutral-900: #111111;

	--color-accent-100: #fef5e6;
	--color-accent-200: #fde9c4;
	--color-accent-300: #fbd48b;
	--color-accent-400: #f8bb4a;
	--color-accent-500: #f59e0b;
	--color-accent-600: #d4850a;
	--color-accent-700: #a16207;
	--color-accent-800: #784905;
	--color-accent-900: #4d2f03;

	--radius-sm: 6px;
	--radius-md: 8px;
	--radius-lg: 12px;

	--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.08);
	--shadow-md: 0 2px 8px rgba(0, 0, 0, 0.10);
	--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.14);

	--yc-font: Arial, Helvetica, sans-serif;
}

/* Scope resets to plugin-rendered markup only, so the theme's own
   typography elsewhere on the site is left alone. */
.yc-app, .yc-app * {
	box-sizing: border-box;
}

.yc-app {
	font-family: var(--yc-font);
	color: var(--color-text);
	line-height: 1.5;
}

.yc-app h1, .yc-app h2, .yc-app h3, .yc-app h4, .yc-app h5, .yc-app h6 {
	font-family: var(--yc-font);
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.1;
	margin: 0 0 8px;
}

.yc-app .text-muted {
	color: var(--color-neutral-700);
}

/* — buttons — */
.yc-app .btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	font-weight: 600;
	font-size: 13px;
	white-space: nowrap;
	text-decoration: none;
	cursor: pointer;
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	padding: 8px 16px;
}
.yc-app .btn:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}
.yc-app .btn-primary {
	background: var(--color-accent);
	color: #121212;
}
.yc-app .btn-primary:hover {
	background: var(--color-accent-600);
}
.yc-app .btn-secondary {
	background: var(--color-neutral-300);
	color: var(--color-text);
}
.yc-app .btn-secondary:hover {
	background: var(--color-neutral-400);
}
.yc-app .btn-ghost {
	background: transparent;
	color: var(--color-accent-800);
}

/* — inputs — */
.yc-app .input {
	width: 100%;
	border: 1px solid transparent;
	background: var(--color-neutral-200);
	border-radius: 20px;
	padding: 10px 16px;
	font: inherit;
	font-size: 14px;
	color: var(--color-text);
}
.yc-app .input:focus-visible {
	outline: 2px solid var(--color-accent);
	outline-offset: 2px;
}

/* — cards — */
.yc-app .card {
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
}

/* — tags — */
.yc-app .tag {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
	font-weight: 600;
	font-size: 12px;
	padding: 4px 12px;
	border-radius: 999px;
}
.yc-app .tag-accent {
	background: var(--color-accent-100);
	color: var(--color-accent-800);
}
.yc-app .tag-outline {
	border: 1px solid var(--color-divider);
	color: var(--color-neutral-800);
	background: transparent;
}
.yc-app .tag-neutral {
	background: var(--color-neutral-200);
	color: var(--color-neutral-800);
}

/* — links — */
.yc-app a {
	color: var(--color-link);
	font-weight: 600;
	text-decoration: none;
}
.yc-app a:hover {
	color: var(--color-link);
	text-decoration: underline;
}

/* — tables — */
.yc-app .table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}
.yc-app .table th {
	text-align: left;
	font-size: 13px;
	font-weight: 600;
	color: var(--color-neutral-700);
	padding: 10px 8px;
	border-bottom: 1px solid var(--color-divider);
}
.yc-app .table td {
	padding: 10px 8px;
	border-bottom: 1px solid var(--color-divider);
}

/* — nav: shared bits — */
.yc-nav {
	background: var(--color-surface);
	border-bottom: 1px solid var(--color-divider);
}
.yc-nav--member {
	background: var(--color-surface);
}
.yc-nav__inner {
	padding: 0 24px;
	min-height: 64px;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
}
.yc-nav__brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 20px;
	font-weight: 700;
	color: var(--color-text) !important;
	text-decoration: none !important;
	margin-right: auto;
}
.yc-nav__brand-dot {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	background: var(--color-accent);
	flex: none;
}
.yc-nav__brand-logo {
	max-width: 320px;
	max-height: 96px;
	width: auto;
	height: auto;
	display: block;
}
.yc-nav__links {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}
.yc-nav__link {
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	padding: 8px 12px;
	border-radius: 8px;
	color: var(--color-link) !important;
	background: transparent;
	text-decoration: none !important;
}
.yc-nav__link.is-active {
	background: var(--color-accent-100);
	color: var(--color-link-active) !important;
}
.yc-nav__link--member {
	padding-bottom: 3px;
	border-bottom: 3px solid transparent;
	border-radius: 0;
}
.yc-nav__link--member.is-active {
	background: transparent;
	border-bottom-color: var(--color-link-active);
	color: var(--color-link-active) !important;
}
.yc-nav__right {
	display: flex;
	align-items: center;
	gap: 8px;
}
.yc-nav__search {
	flex: 1 1 auto;
	min-width: 180px;
	max-width: 360px;
}
.yc-nav__search .input {
	background: var(--color-neutral-200);
}
.yc-nav__account {
	display: flex;
	align-items: center;
	gap: 10px;
}
.yc-nav__account-name {
	font-weight: 600;
	font-size: 14px;
	white-space: nowrap;
}
@media (max-width: 720px) {
	.yc-nav__account-name {
		display: none;
	}
	.yc-nav__search {
		max-width: 44px;
		min-width: 0;
	}
	.yc-nav__search .input::placeholder {
		color: transparent;
	}
}

/* — avatar — */
.yc-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--yc-avatar-size, 34px);
	height: var(--yc-avatar-size, 34px);
	border-radius: 50%;
	background: var(--color-neutral-300);
	color: var(--color-neutral-800);
	font-weight: 700;
	font-size: calc(var(--yc-avatar-size, 34px) * 0.4);
	flex: none;
}

/* — login-required notice on a member page — */
.yc-login-required {
	display: flex;
	justify-content: center;
	padding: 64px 24px;
}
.yc-login-required__card {
	max-width: 420px;
	width: 100%;
	padding: 32px;
	text-align: center;
}
.yc-login-required__actions {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 16px;
}

/* — auth shell (/login, /join) — */
.yc-auth-shell {
	max-width: 420px;
	margin: 0 auto;
	padding: 56px 24px 40px;
	text-align: center;
}
.yc-auth-brand {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 18px;
	font-weight: 700;
	color: var(--color-text) !important;
	text-decoration: none !important;
	margin-bottom: 24px;
}
.yc-auth-shell h3 {
	font-size: 28px;
	margin-bottom: 4px;
}
.yc-auth-shell > .text-muted {
	margin-bottom: 24px;
}
.yc-auth-card {
	padding: 24px;
	box-shadow: var(--shadow-md);
	text-align: left;
}
.yc-form {
	display: grid;
	gap: 14px;
}
.yc-form .field label {
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 5px;
}
.yc-field-error {
	color: #b3261e;
	font-size: 13px;
	margin: 4px 0 0;
}
.yc-form-error {
	margin: 0 0 14px;
}
.yc-field-hint {
	font-size: 12px;
	margin: 4px 0 0;
}
.btn-block {
	width: 100%;
}
.yc-auth-forgot {
	display: block;
	text-align: center;
	font-size: 13px;
	margin-top: 4px;
}
.yc-auth-legal {
	font-size: 12px;
	margin: 0;
}
.yc-auth-switch {
	margin-top: 20px;
	font-size: 14px;
}

/* — screen shell — */
.yc-screen {
	padding: 24px 40px 64px;
}
.yc-app .btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* — homepage — */
.yc-home-topbar {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 8px;
	padding: 16px 24px;
	border-bottom: 1px solid var(--color-divider);
}
/* — homepage: full-bleed elsewhere on the site looks right, but this
   marketing-style layout (wide auto-fit grids, a centered CTA panel)
   reads badly stretched edge-to-edge on a wide screen, so it keeps
   its own comfortable width regardless of the site-wide fix above — */
.yc-home {
	max-width: 1200px;
	margin: 0 auto;
}
.yc-hero {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 48px;
	padding: 56px 0 64px;
}
.yc-hero__stat {
	font-size: 14px;
	font-weight: 600;
	margin: 0 0 12px;
}
.yc-hero__title {
	font-size: 44px;
	line-height: 1.1;
	max-width: 20ch;
}
.yc-hero__lede {
	font-size: 17px;
	line-height: 1.5;
	max-width: 46ch;
	color: var(--color-neutral-800);
}
.yc-hero__actions {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
	margin: 16px 0 12px;
}
.yc-hero__reassure {
	font-size: 13px;
	margin: 0;
}
.yc-hero-login {
	padding: 24px;
	box-shadow: var(--shadow-md);
	max-width: 360px;
}
.yc-hero-login h4 {
	margin-bottom: 4px;
}
.yc-hero-login .yc-form {
	margin-top: 12px;
}

/* — "logo forward" hero layout (selectable in Settings) — */
.yc-hero__left--with-logo {
	display: flex;
	flex-direction: column;
	gap: 20px;
}
.yc-hero__logo-img {
	width: 100%;
	max-width: 100%;
	height: auto;
	max-height: 220px;
	object-fit: contain;
	object-position: left;
}
.yc-hero__logo-fallback {
	display: flex;
	align-items: center;
	gap: 16px;
	font-size: 32px;
	font-weight: 700;
	color: var(--color-text);
}
.yc-hero__logo-fallback .yc-nav__brand-dot {
	width: 48px;
	height: 48px;
}

.yc-value-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	padding-bottom: 48px;
}
.yc-value-card {
	padding: 20px;
}

.yc-two-col-lists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 20px;
	padding-bottom: 48px;
}
.yc-list-card {
	padding: 20px;
}
.yc-list-card h5 {
	margin-bottom: 12px;
}
.yc-list-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 0;
	border-top: 1px solid var(--color-divider);
}
.yc-list-row:first-of-type {
	border-top: none;
}
.yc-list-row__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 40px;
}
.yc-list-row__weekday {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-neutral-700);
}
.yc-list-row__day {
	font-size: 20px;
	font-weight: 700;
}
.yc-list-row__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-width: 0;
}
.yc-list-row__title {
	font-weight: 700;
	font-size: 15px;
}
.yc-list-row__meta {
	font-size: 13px;
}

.yc-cta-panel {
	text-align: center;
	padding: 36px 28px;
	background: var(--color-neutral-200);
	border-radius: var(--radius-lg);
	margin-bottom: 48px;
}
.yc-cta-panel h2 {
	font-size: 26px;
	margin-bottom: 16px;
}

.yc-home-footer {
	border-top: 1px solid var(--color-divider);
	padding-top: 24px;
}
.yc-home-footer__inner {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px;
}
.yc-home-footer__links {
	display: flex;
	gap: 16px;
}
.yc-home-footer__links a {
	font-size: 13px;
}

/* — directories (groups/events/members) — */
.yc-directory__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 20px;
}
.yc-directory__header h3 {
	font-size: 32px;
	margin-bottom: 4px;
}
.yc-start-group summary {
	cursor: pointer;
	list-style: none;
}
.yc-start-group summary::-webkit-details-marker {
	display: none;
}
.yc-start-group[open] {
	flex-basis: 100%;
}
.yc-start-group[open] summary {
	margin-bottom: 12px;
}
.yc-start-group__panel {
	max-width: 420px;
	padding: 20px;
}
.yc-start-group__panel .field {
	margin-bottom: 14px;
}
.yc-post-event summary {
	cursor: pointer;
	list-style: none;
}
.yc-post-event summary::-webkit-details-marker {
	display: none;
}
.yc-post-event[open] {
	flex-basis: 100%;
}
.yc-post-event[open] summary {
	margin-bottom: 12px;
}
.yc-post-event__panel {
	max-width: 420px;
	padding: 20px;
}
.yc-post-event__panel .field {
	margin-bottom: 14px;
}
.yc-group-settings {
	margin-top: 12px;
}
.yc-group-settings summary {
	font-size: 13px;
	color: var(--color-neutral-700);
	cursor: pointer;
	list-style: none;
	display: inline-block;
}
.yc-group-settings summary::-webkit-details-marker {
	display: none;
}
.yc-group-settings summary:hover {
	color: var(--color-neutral-900);
	text-decoration: underline;
}
.yc-group-settings__form {
	max-width: 420px;
	background: var(--color-neutral-100);
	border-radius: var(--radius-md);
	padding: 16px;
	margin-top: 10px;
}
.yc-group-settings__form .field {
	margin-bottom: 12px;
}
.yc-directory__filters {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
.yc-search-input {
	max-width: 280px;
	border-radius: 20px;
}
.yc-chip-row {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}
.yc-chip {
	white-space: nowrap;
	cursor: pointer;
}
.yc-empty-state {
	padding: 40px 0;
	text-align: center;
}

.yc-card-grid {
	display: grid;
	gap: 16px;
}
.yc-card-grid--groups {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.yc-card-grid--members {
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.yc-group-card {
	padding: 0;
	overflow: hidden;
}
.yc-group-card__cover {
	height: 96px;
	background: var(--color-neutral-300);
}
.yc-group-card__body {
	padding: 16px;
}
.yc-group-card__eyebrow {
	font-size: 12px;
	font-weight: 600;
	margin: 0 0 4px;
}
.yc-group-card__name {
	font-size: 17px;
	margin: 0 0 4px;
}
.yc-group-card__desc {
	font-size: 13px;
	margin: 0 0 8px;
}
.yc-group-card__meta {
	font-size: 13px;
	margin: 0 0 12px;
}
.yc-group-card__actions {
	display: flex;
	gap: 8px;
}
.yc-group-card__actions .btn {
	padding: 8px 14px;
	font-size: 13px;
}

.yc-member-card {
	padding: 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}
.yc-member-card__name {
	font-weight: 700;
	font-size: 15px;
	color: var(--color-text) !important;
	text-decoration: none !important;
}
.yc-member-card__name:hover {
	text-decoration: underline !important;
}
.yc-member-card__avatar-link {
	display: inline-flex;
}
.yc-member-card__meta {
	font-size: 13px;
}
.yc-member-card .btn {
	margin-top: 8px;
	padding: 6px 14px;
	font-size: 12px;
}

.yc-section-label {
	margin: 24px 0 8px;
}
.yc-section-label:first-of-type {
	margin-top: 0;
}
/* — blog — */
.yc-blog-list {
	padding: 0;
}
.yc-blog-list-row {
	display: block;
	padding: 18px 20px;
	border-top: 1px solid var(--color-divider);
	text-decoration: none !important;
}
.yc-blog-list-row:first-child {
	border-top: none;
}
.yc-blog-list-row:hover {
	background: var(--color-neutral-100);
}
.yc-blog-list-row__body {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.yc-blog-list-row__title {
	font-weight: 700;
	font-size: 17px;
	color: var(--color-text);
}
.yc-blog-list-row__meta {
	font-size: 13px;
}
.yc-blog-list-row__excerpt {
	font-size: 14px;
	margin-top: 4px;
}
.yc-blog-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	gap: 32px;
	align-items: start;
}
.yc-events-layout {
	display: grid;
	grid-template-columns: minmax(0, 220px) minmax(0, 1fr) minmax(0, 300px);
	gap: 32px;
	align-items: start;
}
.yc-events-rail__card {
	margin-bottom: 20px;
}
.yc-events-rail__dates {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.yc-events-rail__date {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 12px;
	border-radius: var(--radius-md);
	background: var(--color-neutral-100);
	font-size: 13px;
	font-weight: 600;
	color: var(--color-link);
	text-decoration: none !important;
}
.yc-events-rail__date:hover {
	background: var(--color-neutral-200);
}
.yc-events-rail__date.is-today {
	background: var(--color-accent-100);
	color: var(--color-link-active);
}
.yc-events-rail__date-weekday {
	color: var(--color-neutral-700);
	font-weight: 600;
}
.yc-events-rail__date.is-today .yc-events-rail__date-weekday {
	color: var(--color-link-active);
}
.yc-blog-sidebar__list a.is-active {
	color: var(--color-link-active);
}
.yc-blog-sidebar__card {
	margin-bottom: 20px;
}
.yc-blog-sidebar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.yc-blog-sidebar__list a {
	font-size: 14px;
	font-weight: 600;
}
.yc-blog-sidebar__ad {
	min-height: 90px;
}
.yc-blog-post-header {
	padding: 24px 0 12px;
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 20px;
}
.yc-blog-post-header h2 {
	font-size: 30px;
	margin: 0 0 8px;
}
.yc-blog-post-header__meta {
	font-size: 13px;
	margin: 0;
}
.yc-blog-post-body {
	font-size: 16px;
	line-height: 1.6;
}
.yc-blog-post__ad {
	margin: 24px 0;
}
.yc-blog-post-controls {
	display: flex;
	gap: 16px;
	align-items: center;
	margin: 24px 0;
	padding-top: 16px;
	border-top: 1px solid var(--color-divider);
}
.yc-blog-post-controls .yc-group-settings,
.yc-blog-post-controls .yc-report-control {
	margin-top: 0;
}

.yc-events-card {
	padding: 0;
}
.yc-event-row {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	gap: 20px;
	padding: 18px 20px;
	border-top: 1px solid var(--color-divider);
}
.yc-event-row:first-child {
	border-top: none;
}
.yc-event-row__date {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 52px;
}
.yc-event-row__weekday {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-neutral-700);
}
.yc-event-row__day {
	font-size: 24px;
	font-weight: 700;
}
.yc-event-row__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.yc-event-row__title {
	font-weight: 700;
	font-size: 17px;
	color: var(--color-text);
	text-decoration: none;
}
.yc-event-row__title:hover {
	text-decoration: underline;
}
.yc-event-row__meta {
	font-size: 13px;
}

/* — advertise — */
.yc-advertise__intro {
	max-width: 52ch;
	padding: 48px 0 32px;
}
.yc-advertise__kicker {
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 4px;
}
.yc-advertise__intro h3 {
	font-size: 38px;
	line-height: 1.1;
}
.yc-stat-strip {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1px;
	background: var(--color-divider);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-bottom: 32px;
}
.yc-stat-cell {
	background: var(--color-surface);
	padding: 22px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.yc-stat-cell__figure {
	font-size: 30px;
	font-weight: 700;
}
.yc-stat-cell__label {
	font-size: 13px;
}
.yc-three-ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 16px;
	margin-bottom: 32px;
}
.yc-three-ways .card {
	padding: 20px;
}
.yc-closing-banner {
	background: var(--color-accent);
	color: #121212;
	border-radius: var(--radius-lg);
	padding: 32px 28px;
	text-align: center;
	margin-bottom: 48px;
}
.yc-closing-banner h2 {
	font-size: 24px;
	margin-bottom: 8px;
}
.yc-closing-banner__btn {
	background: #121212;
	color: #fff !important;
	margin-top: 12px;
}

@media (max-width: 700px) {
	.yc-stat-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* — composer (feed + group) — */
.yc-composer {
	padding: 16px;
	margin-bottom: 20px;
	display: grid;
	gap: 10px;
}
.yc-composer__textarea {
	border-radius: var(--radius-md);
	resize: vertical;
	min-height: 60px;
	font-family: inherit;
}
.yc-composer .btn {
	justify-self: end;
}

/* — post cards (feed + group discussion) — */
.yc-post-list {
	display: grid;
	gap: 12px;
}
.yc-post-card {
	padding: 16px;
}
.yc-post-card__byline {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 8px;
}
.yc-post-card__byline > div {
	display: flex;
	flex-direction: column;
}
.yc-post-card__author {
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text) !important;
	text-decoration: none !important;
}
.yc-post-card__author:hover {
	text-decoration: underline !important;
}
.yc-post-card__byline > a {
	flex: none;
}
.yc-post-card__time {
	font-size: 12px;
}
.yc-post-card__body {
	margin: 0;
	font-size: 15px;
	line-height: 1.5;
	white-space: pre-wrap;
}
.yc-ad-placeholder {
	background: var(--color-neutral-100);
	border-style: dashed;
}

/* — single group page — */
.yc-group-header {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	padding: 32px 0 24px;
}
.yc-group-header__cover {
	width: 100%;
	height: 140px;
	background: var(--color-neutral-300);
	border-radius: var(--radius-lg);
	order: -1;
	flex-basis: 100%;
	margin-bottom: 8px;
}
.yc-group-header__info h1 {
	font-size: 30px;
	margin: 2px 0;
}
.yc-group-header__action {
	margin-left: auto;
}

/* — profile — */
.yc-profile__header {
	display: flex;
	align-items: center;
	gap: 20px;
	flex-wrap: wrap;
	padding: 32px 0 28px;
}
.yc-profile__header h1 {
	font-size: 26px;
	margin: 0 0 2px;
}
.yc-profile__header > div {
	flex: 1;
	min-width: 200px;
}
.yc-profile__header .btn {
	margin-left: auto;
}

/* — messages: one unified bordered panel (spec #11) — */
.yc-messages-panel {
	display: grid;
	grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
	margin-top: 24px;
	padding: 0;
	overflow: hidden;
}
.yc-messages-panel__inbox {
	border-right: 1px solid var(--color-divider);
	padding: 20px;
}
.yc-messages-panel__thread {
	padding: 20px;
	display: flex;
	flex-direction: column;
}
.yc-thread-row {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 8px;
	border-radius: var(--radius-md);
	text-decoration: none !important;
	color: inherit !important;
}
.yc-thread-row:hover, .yc-thread-row.is-active {
	background: var(--color-neutral-200);
}
.yc-thread-row__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.yc-thread-row__name {
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text);
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.yc-unread-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--color-accent);
	flex: none;
	display: inline-block;
}
.yc-thread-row__snippet {
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.yc-thread-messages {
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-height: 200px;
	flex: 1;
	margin-bottom: 16px;
}
.yc-message-bubble {
	max-width: 70%;
	padding: 10px 14px;
	border-radius: 16px;
	background: var(--color-neutral-200);
	align-self: flex-start;
}
.yc-message-bubble p {
	margin: 0;
	font-size: 14px;
}
.yc-message-bubble--mine {
	background: var(--color-accent-100);
	align-self: flex-end;
}
.yc-thread-send {
	display: flex;
	gap: 8px;
}
.yc-thread-send .input {
	flex: 1;
}

@media (max-width: 700px) {
	.yc-messages-panel {
		grid-template-columns: 1fr;
	}
	.yc-messages-panel__inbox {
		border-right: none;
		border-bottom: 1px solid var(--color-divider);
	}
}

/* — dashboard — */
.yc-dashboard-shell {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 32px;
	padding: 32px 0 48px;
	align-items: start;
}
.yc-dashboard-sidenav {
	display: flex;
	flex-direction: column;
	gap: 2px;
	position: sticky;
	top: 24px;
}
.yc-dashboard-sidenav__link {
	padding: 10px 12px;
	border-radius: var(--radius-md);
	font-weight: 600;
	font-size: 14px;
	color: var(--color-link) !important;
	text-decoration: none !important;
}
.yc-dashboard-sidenav__link.is-active {
	background: var(--color-accent-100);
	color: var(--color-link-active) !important;
}
.yc-dashboard-content {
	min-width: 0;
}
.yc-dashboard-content .yc-stat-strip {
	grid-template-columns: repeat(6, 1fr);
	margin: 20px 0 32px;
}
.yc-dashboard-content .yc-stat-strip--five {
	grid-template-columns: repeat(5, 1fr);
}
.yc-dashboard-content .table {
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin-top: 16px;
}
.yc-dashboard-content .table th,
.yc-dashboard-content .table td {
	padding: 10px 14px;
}
.yc-dashboard-content .table tbody tr:hover {
	background: var(--color-neutral-100);
}
@media (max-width: 800px) {
	.yc-dashboard-shell {
		grid-template-columns: 1fr;
	}
	.yc-dashboard-sidenav {
		flex-direction: row;
		flex-wrap: wrap;
		position: static;
	}
	.yc-dashboard-content .yc-stat-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* — single business page — */
.yc-business-header {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	padding: 32px 0 24px;
}
.yc-business-header__cover {
	width: 100%;
	height: 120px;
	background: var(--color-neutral-300);
	border-radius: var(--radius-lg);
	order: -1;
	flex-basis: 100%;
	margin-bottom: 8px;
}
.yc-business-header__info h1 {
	font-size: 28px;
	margin: 2px 0;
}
.yc-business-blurb {
	font-size: 16px;
	line-height: 1.6;
	max-width: 65ch;
	margin-bottom: 24px;
}

/* — ad inventory / group rates — */
.yc-inventory {
	padding: 32px 0 48px;
}
.yc-inventory h3 {
	font-size: 28px;
	margin-bottom: 8px;
}
.yc-inventory .table {
	margin-top: 20px;
}

/* — member profile (spec #9): dark cover, overlapping avatar — */
.yc-profile-hero {
	position: relative;
	margin-bottom: 56px;
}
.yc-profile-hero__cover {
	height: 220px;
	background: var(--color-neutral-900);
	border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.yc-profile-hero__row {
	display: flex;
	align-items: flex-end;
	gap: 20px;
	flex-wrap: wrap;
	padding: 0 4px;
	margin-top: -56px;
}
.yc-profile-hero .yc-avatar {
	border: 4px solid var(--color-bg);
	flex: none;
}
.yc-profile-hero__identity {
	padding-bottom: 8px;
}
.yc-profile-hero__identity h2 {
	font-size: 24px;
	margin: 0 0 2px;
}
.yc-profile-hero__actions {
	margin-left: auto;
	padding-bottom: 8px;
	display: flex;
	align-items: center;
	gap: 8px;
}

.yc-profile-columns {
	display: grid;
	grid-template-columns: 280px 1fr;
	gap: 24px;
	align-items: start;
}
.yc-profile-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 24px;
}
.yc-profile-sidebar__card {
	padding: 16px;
}
.yc-profile-intro-line {
	font-size: 13px;
	margin: 0 0 6px;
}
.yc-profile-intro-line:last-child {
	margin-bottom: 0;
}
.yc-profile-groups-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}
.yc-profile-groups-grid__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	min-width: 0;
	text-decoration: none !important;
}
.yc-profile-groups-grid__item span {
	font-size: 11px;
	color: var(--color-neutral-700);
	text-align: center;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 100%;
}
.yc-profile-main {
	min-width: 0;
}

@media (max-width: 760px) {
	.yc-profile-columns {
		grid-template-columns: 1fr;
	}
	.yc-profile-sidebar {
		position: static;
	}
}

/* — group page (spec #10): header block, main + sticky sidebar — */
.yc-group-header-block {
	padding: 32px 0 20px;
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 24px;
}
.yc-group-header-block__meta {
	font-size: 13px;
	margin: 0 0 4px;
}
.yc-group-header-block__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.yc-group-header-block__row h2 {
	font-size: 28px;
	margin: 0;
}
.yc-group-header-block__row form.yc-membership-form--gated {
	flex-basis: 100%;
	order: 3;
	margin-top: 8px;
}
/* — single event page — */
.yc-event-header-block {
	padding: 32px 0 20px;
	border-bottom: 1px solid var(--color-divider);
	margin-bottom: 24px;
}
.yc-event-header-block__meta {
	font-size: 13px;
	margin: 0 0 4px;
}
.yc-event-header-block__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.yc-event-header-block__row h2 {
	font-size: 28px;
	margin: 0;
}
.yc-event-header-block__when {
	font-size: 14px;
	margin: 8px 0 0;
}
.yc-event-header-block__desc {
	font-size: 14px;
	max-width: 60ch;
	margin: 12px 0 0;
}

/* — "today" highlight, on both /events and a group's upcoming events — */
.yc-event-row--today,
.yc-upcoming-event-row--today {
	background: var(--color-accent-100);
}

.yc-group-rules-gate {
	background: var(--color-neutral-100);
	border-radius: var(--radius-md);
	padding: 14px 16px;
	margin-bottom: 10px;
	max-width: 480px;
}
.yc-group-rules-gate p {
	margin: 0 0 10px;
}
.yc-group-header-block__desc {
	font-size: 14px;
	max-width: 60ch;
	margin: 8px 0 0;
}

.yc-group-columns {
	display: grid;
	grid-template-columns: 1fr 280px;
	gap: 24px;
	align-items: start;
	padding-bottom: 48px;
}
.yc-group-main {
	min-width: 0;
}
.yc-group-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 24px;
}
.yc-group-sidebar__card {
	padding: 16px;
}
.yc-grp01-unit {
	height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.yc-upcoming-events {
	padding: 0;
	margin-bottom: 24px;
}
.yc-past-events {
	margin-bottom: 24px;
}
.yc-past-events summary {
	cursor: pointer;
	list-style: none;
	margin-bottom: 8px;
}
.yc-past-events summary::-webkit-details-marker {
	display: none;
}
.yc-upcoming-event-row {
	display: grid;
	grid-template-columns: 52px minmax(0, 1fr) auto;
	align-items: center;
	gap: 16px;
	padding: 14px 16px;
	border-top: 1px solid var(--color-neutral-300);
}
.yc-upcoming-event-row:first-child {
	border-top: none;
}
.yc-upcoming-event-row__date {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.yc-upcoming-event-row__weekday {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-neutral-700);
}
.yc-upcoming-event-row__day {
	font-size: 20px;
	font-weight: 700;
}
.yc-upcoming-event-row__body {
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.yc-upcoming-event-row__title {
	font-weight: 700;
	font-size: 14px;
	color: var(--color-text);
	text-decoration: none;
}
.yc-upcoming-event-row__title:hover {
	text-decoration: underline;
}
.yc-upcoming-event-row__meta {
	font-size: 12px;
}

@media (max-width: 760px) {
	.yc-group-columns {
		grid-template-columns: 1fr;
	}
	.yc-group-sidebar {
		position: static;
	}
}

/* — business profile — */
.yc-business-offer {
	padding: 14px 18px;
	background: var(--color-accent-100);
	margin-bottom: 20px;
}
.yc-business-offer__label {
	font-size: 12px;
	font-weight: 600;
	color: var(--color-accent-800);
	margin: 0 0 2px;
}
.yc-business-offer__text {
	font-size: 15px;
	margin: 0;
}
.yc-business-columns {
	display: grid;
	grid-template-columns: 1fr 260px;
	gap: 24px;
	align-items: start;
	padding-bottom: 48px;
}
.yc-business-main {
	min-width: 0;
}
.yc-business-sidebar {
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: sticky;
	top: 24px;
}
@media (max-width: 760px) {
	.yc-business-columns {
		grid-template-columns: 1fr;
	}
	.yc-business-sidebar {
		position: static;
	}
}

/* — avatar: real uploaded photo — */
img.yc-avatar--photo {
	width: var(--yc-avatar-size, 34px);
	height: var(--yc-avatar-size, 34px);
	border-radius: 50%;
	object-fit: cover;
	flex: none;
	display: inline-block;
}

/* — profile photo/cover upload fields — */
.yc-photo-field {
	display: flex;
	align-items: center;
	gap: 14px;
}
.yc-photo-field input[type="file"] {
	display: block;
	font-size: 13px;
}
.yc-photo-field__remove {
	display: block;
	font-size: 12px;
	color: var(--color-neutral-700);
	margin-top: 6px;
	font-weight: 400;
}
.yc-cover-preview {
	width: 100%;
	height: 100px;
	border-radius: var(--radius-md);
	background: var(--color-neutral-300);
	background-size: cover;
	background-position: center;
	margin-bottom: 8px;
}

/* — report control (details/summary, no JS) — */
.yc-report-control {
	margin-top: 10px;
}
.yc-report-control summary {
	font-size: 12px;
	color: var(--color-neutral-700);
	cursor: pointer;
	list-style: none;
	display: inline-block;
}
.yc-report-control summary::-webkit-details-marker {
	display: none;
}
.yc-report-control summary:hover {
	color: var(--color-neutral-900);
	text-decoration: underline;
}
.yc-report-control__form {
	display: flex;
	gap: 8px;
	margin-top: 8px;
}
.yc-report-control__form .input {
	flex: 1;
	font-size: 13px;
	padding: 8px 12px;
}
.yc-report-control__form .btn {
	padding: 8px 14px;
	font-size: 13px;
	flex: none;
}

/* — feed: 3-column layout (spec #8) — */
.yc-feed-layout {
	display: grid;
	grid-template-columns: minmax(0, 200px) minmax(0, 1fr) minmax(0, 300px);
	gap: 32px;
	align-items: start;
	padding: 24px 0 80px;
}
.yc-feed-rail {
	position: sticky;
	top: 110px;
}
.yc-feed-main {
	min-width: 0;
}
.yc-browse-rail__links {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin-bottom: 20px;
}
.yc-browse-rail__link {
	font-size: 14px;
	font-weight: 600;
	padding: 8px 10px;
	border-radius: 8px;
	color: var(--color-text) !important;
	text-decoration: none !important;
}
.yc-browse-rail__link:hover, .yc-browse-rail__link.is-active {
	background: var(--color-neutral-200);
}
.yc-browse-rail__link--inert {
	color: var(--color-neutral-500) !important;
	cursor: default;
}
.yc-browse-rail__groups {
	display: flex;
	flex-direction: column;
	gap: 4px;
}
.yc-browse-rail__group {
	font-size: 13px;
	font-weight: 400;
	color: var(--color-text) !important;
	text-decoration: none !important;
	padding: 4px 10px;
	border-radius: 6px;
}
.yc-browse-rail__group:hover {
	background: var(--color-neutral-200);
}
.yc-feed-rail__card {
	padding: 16px;
	margin-bottom: 16px;
}
.yc-rail01-unit {
	min-height: 250px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.yc-feed-rail__event {
	display: flex;
	gap: 8px;
	align-items: baseline;
	font-size: 13px;
	padding: 6px 0;
	border-top: 1px solid var(--color-divider);
}
.yc-feed-rail__event:first-of-type {
	border-top: none;
}
.yc-feed-rail__event-date {
	font-weight: 600;
	color: var(--color-neutral-700);
	flex: none;
}
.yc-feed-rail__person {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px 0;
}
.yc-feed-rail__person-name {
	font-size: 13px;
	font-weight: 600;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@media (max-width: 1000px) {
	.yc-feed-layout {
		grid-template-columns: 1fr;
	}
	.yc-feed-rail {
		position: static;
	}
	.yc-blog-layout {
		grid-template-columns: 1fr;
	}
	.yc-events-layout {
		grid-template-columns: 1fr;
	}
}

/* — comments (CMNT-01 sits inside this thread, after the 3rd) — */
.yc-comment-thread {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid var(--color-divider);
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.yc-comment {
	display: flex;
	gap: 8px;
}
.yc-comment__body {
	display: flex;
	flex-direction: column;
	background: var(--color-neutral-100);
	border-radius: var(--radius-md);
	padding: 6px 12px;
}
.yc-comment__author {
	font-size: 12px;
	font-weight: 700;
}
.yc-comment__text {
	font-size: 13px;
}
.yc-cmnt01 {
	background: var(--color-neutral-100);
	border-radius: var(--radius-md);
	padding: 8px 12px;
	margin-left: 36px;
}
.yc-comment-form {
	display: flex;
	gap: 8px;
	margin-top: 4px;
}
.yc-comment-form .input {
	flex: 1;
	font-size: 13px;
	padding: 8px 12px;
}
.yc-comment-form .btn {
	padding: 8px 14px;
	font-size: 13px;
	flex: none;
}
.yc-comment--reply {
	margin-left: 36px;
	margin-top: 8px;
}
.yc-comment-replies {
	margin-top: 8px;
}
.yc-comment__controls {
	display: flex;
	gap: 12px;
	margin-top: 4px;
}
.yc-comment__controls .yc-report-control,
.yc-comment__controls .yc-reply-control {
	margin-top: 0;
}
.yc-reply-control summary {
	font-size: 12px;
	color: var(--color-neutral-700);
	cursor: pointer;
	list-style: none;
	display: inline-block;
}
.yc-reply-control summary::-webkit-details-marker {
	display: none;
}
.yc-reply-control summary:hover {
	color: var(--color-neutral-900);
	text-decoration: underline;
}

/* — reactions (like/dislike/love/laugh/cry), on posts and comments — */
.yc-reactions {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-top: 8px;
	flex-wrap: wrap;
}
.yc-reaction-pill {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	border: none;
	background: var(--color-neutral-100);
	border-radius: 999px;
	padding: 2px 6px;
	font-size: 12px;
	cursor: pointer;
	line-height: 1.4;
}
button.yc-reaction-pill:hover {
	background: var(--color-neutral-300);
}
.yc-reaction-pill--mine {
	background: var(--color-accent-100);
	outline: 1px solid var(--color-accent);
}
.yc-reaction-pill span {
	font-size: 11px;
	font-weight: 600;
	color: var(--color-neutral-700);
}
.yc-reactions--readonly .yc-reaction-pill {
	cursor: default;
}

/* — FOOT-01 sticky dismissible footer bar — */
.yc-foot01-bar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 100;
	background: var(--color-neutral-900);
	color: #fff;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.yc-foot01-bar .text-muted {
	color: #fff !important;
	opacity: 0.85;
}
.yc-foot01-bar__dismiss {
	background: none;
	border: none;
	color: #fff;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
}

/* — LOGIN-01 full-screen interstitial — */
.yc-login01-overlay {
	position: fixed;
	inset: 0;
	z-index: 200;
	background: rgba(17, 17, 17, 0.92);
	align-items: center;
	justify-content: center;
}
.yc-login01-overlay__card {
	background: var(--color-surface);
	border-radius: var(--radius-lg);
	padding: 40px;
	max-width: 420px;
	text-align: center;
	box-shadow: var(--shadow-lg);
}
.yc-login01-overlay__card .btn {
	margin-top: 16px;
}

/* — member nav alert badge — */
.yc-nav__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	background: var(--color-accent);
	color: #121212;
	font-size: 10px;
	font-weight: 700;
	margin-left: 2px;
}

/* — alerts — */
.yc-alerts {
	padding: 32px 0 48px;
	max-width: 640px;
}
.yc-alerts-list {
	padding: 4px;
	margin-bottom: 24px;
}
.yc-alert-row {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--radius-md);
	text-decoration: none !important;
	color: var(--color-text) !important;
	font-size: 14px;
}
.yc-alert-row:hover {
	background: var(--color-neutral-100);
}

/* — ad example toggles (details/summary, no JS) — */
.yc-ad-example-toggle {
	margin-bottom: 6px;
}
.yc-ad-example-toggle summary {
	font-size: 12px;
	color: var(--color-neutral-700);
	cursor: pointer;
	list-style: none;
}
.yc-ad-example-toggle summary::-webkit-details-marker {
	display: none;
}
.yc-ad-example-toggle summary:hover {
	color: var(--color-neutral-900);
	text-decoration: underline;
}
.yc-ad-example-toggle__panel {
	margin-top: 10px;
	padding: 14px;
	background: var(--color-neutral-100);
	border-radius: var(--radius-md);
}

/* — build-step placeholder (removed as each screen ships) — */
.yc-placeholder {
	max-width: 640px;
	margin: 64px auto;
	padding: 40px 32px;
	text-align: center;
	background: var(--color-surface);
	border: 1px solid var(--color-divider);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-sm);
	font-family: var(--yc-font);
	color: var(--color-text);
}
.yc-placeholder__eyebrow {
	font-size: 13px;
	font-weight: 600;
	color: var(--color-accent-700);
	margin: 0 0 8px;
	text-transform: none;
}
.yc-placeholder__title {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0 0 12px;
}
.yc-placeholder__body {
	font-size: 15px;
	line-height: 1.5;
	color: var(--color-neutral-700);
	margin: 0;
}