/**
 * TrueStories Community Pro — core styles.
 * Original interface: warm ink/paper palette, not a Reddit clone.
 */
:root {
	--ts-ink: #1b1b1d;
	--ts-ink-soft: #55565c;
	--ts-paper: #ffffff;
	--ts-paper-warm: #faf8f5;
	--ts-border: #e7e3dd;
	--ts-accent: #b6482f;      /* warm terracotta — brand accent */
	--ts-accent-soft: #f4e3dd;
	--ts-up: #1f7a4d;
	--ts-down: #b6482f;
	--ts-radius: 10px;
	--ts-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ts-app {
	font-family: var(--ts-font);
	color: var(--ts-ink);
	background: var(--ts-paper-warm);
	max-width: 720px;
	margin: 0 auto;
	padding-bottom: 72px; /* leave room for mobile bottom nav */
}

.ts-app a { color: var(--ts-accent); text-decoration: none; }
.ts-app a:hover { text-decoration: underline; }

/* Top navigation */
.ts-topnav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 16px;
	background: var(--ts-paper);
	border-bottom: 1px solid var(--ts-border);
}
.ts-topnav__brand a {
	font-weight: 800;
	font-size: 1.25rem;
	color: var(--ts-ink);
	letter-spacing: -0.02em;
}
.ts-topnav__links { display: none; gap: 16px; }
.ts-topnav__links a { color: var(--ts-ink-soft); font-weight: 600; font-size: 0.9rem; }
.ts-topnav__actions { display: flex; align-items: center; gap: 10px; }
.ts-avatar img { border-radius: 50%; display: block; }

@media (min-width: 720px) {
	.ts-topnav__links { display: flex; }
}

/* Buttons */
.ts-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	border: 1px solid var(--ts-border);
	background: var(--ts-paper);
	color: var(--ts-ink);
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	text-decoration: none;
}
.ts-btn:hover { text-decoration: none; border-color: var(--ts-accent); }
.ts-btn--primary {
	background: var(--ts-accent);
	border-color: var(--ts-accent);
	color: #fff;
}
.ts-btn--block { width: 100%; margin-top: 12px; }
.ts-btn.is-active { background: var(--ts-accent-soft); border-color: var(--ts-accent); color: var(--ts-accent); }

/* Feed tabs */
.ts-feed-tabs { display: flex; gap: 4px; padding: 12px 16px 0; }
.ts-feed-tab {
	background: none;
	border: none;
	padding: 8px 14px;
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--ts-ink-soft);
	cursor: pointer;
	border-bottom: 2px solid transparent;
}
.ts-feed-tab.is-active { color: var(--ts-ink); border-bottom-color: var(--ts-accent); }

.ts-feed-list { padding: 12px 16px; display: flex; flex-direction: column; gap: 12px; }
.ts-feed-loading, .ts-empty { color: var(--ts-ink-soft); padding: 24px 8px; text-align: center; }

/* Cards */
.ts-card {
	background: var(--ts-paper);
	border: 1px solid var(--ts-border);
	border-radius: var(--ts-radius);
	padding: 14px 16px;
}
.ts-card__community {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--ts-accent);
	margin-bottom: 6px;
}
.ts-card__title { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.35; }
.ts-card__title a { color: var(--ts-ink); }
.ts-card__excerpt { margin: 0 0 10px; color: var(--ts-ink-soft); font-size: 0.9rem; line-height: 1.5; }
.ts-card__meta { font-size: 0.8rem; color: var(--ts-ink-soft); margin-bottom: 10px; }
.ts-card__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ts-card__comments { font-size: 0.85rem; color: var(--ts-ink-soft); }

.ts-community-pill {
	display: inline-block;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--ts-accent);
	margin-bottom: 8px;
}

/* Stories (secondary section) */
.ts-stories__title { padding: 12px 16px 0; margin: 0; font-size: 1.3rem; }
.ts-stories__intro { padding: 0 16px; color: var(--ts-ink-soft); font-size: 0.9rem; margin: 4px 0 12px; }
.ts-pagination { display: flex; gap: 6px; justify-content: center; padding: 16px; flex-wrap: wrap; }
.ts-pagination a, .ts-pagination span { padding: 6px 10px; border: 1px solid var(--ts-border); border-radius: 6px; font-size: 0.85rem; }

/* Vote bar */
.ts-vote-bar { display: inline-flex; align-items: center; gap: 8px; }
.ts-vote-btn {
	width: 32px; height: 32px;
	border-radius: 50%;
	border: 1px solid var(--ts-border);
	background: var(--ts-paper);
	font-size: 1rem;
	cursor: pointer;
}
.ts-vote-btn.ts-vote-up.is-active { border-color: var(--ts-up); color: var(--ts-up); background: #e6f3ec; }
.ts-vote-btn.ts-vote-down.is-active { border-color: var(--ts-down); color: var(--ts-down); background: var(--ts-accent-soft); }
.ts-vote-score { font-weight: 700; min-width: 20px; text-align: center; }
.ts-vote-bar--compact .ts-vote-btn { width: 26px; height: 26px; font-size: 0.85rem; }

/* Single post pages */
.ts-single { padding: 16px; }
.ts-single__title { font-size: 1.4rem; line-height: 1.3; margin: 6px 0 10px; }
.ts-single__meta { font-size: 0.85rem; color: var(--ts-ink-soft); margin-bottom: 16px; }
.ts-single__content { line-height: 1.7; margin-bottom: 20px; }
.ts-question-badge { font-weight: 700; color: var(--ts-accent); font-size: 0.85rem; margin-bottom: 8px; }

/* Answers */
.ts-answers { margin-top: 28px; border-top: 1px solid var(--ts-border); padding-top: 20px; }
.ts-answer { padding: 14px 0; border-bottom: 1px solid var(--ts-border); }
.ts-answer.is-accepted { background: #f3faf6; border-radius: var(--ts-radius); padding: 14px; border-bottom: none; }
.ts-answer__accepted-badge { color: var(--ts-up); font-weight: 700; font-size: 0.8rem; margin-bottom: 6px; }
.ts-answer__content { line-height: 1.6; margin-bottom: 8px; }
.ts-answer__meta { font-size: 0.8rem; color: var(--ts-ink-soft); margin-bottom: 8px; }

.ts-answer-form { margin-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.ts-answer-form textarea {
	padding: 10px; border-radius: var(--ts-radius); border: 1px solid var(--ts-border); font-family: inherit;
}

/* Create form */
.ts-create { padding: 16px; }
.ts-create__tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.ts-create-tab {
	flex: 1; padding: 10px; border-radius: var(--ts-radius); border: 1px solid var(--ts-border);
	background: var(--ts-paper); font-weight: 700; cursor: pointer;
}
.ts-create-tab.is-active { border-color: var(--ts-accent); color: var(--ts-accent); background: var(--ts-accent-soft); }
.ts-create-form { display: flex; flex-direction: column; gap: 6px; }
.ts-create-form label { font-weight: 700; font-size: 0.85rem; margin-top: 10px; }
.ts-create-form input, .ts-create-form select, .ts-create-form textarea {
	padding: 10px; border-radius: var(--ts-radius); border: 1px solid var(--ts-border); font-family: inherit; font-size: 1rem;
}
.ts-form-error { color: var(--ts-down); font-size: 0.85rem; min-height: 1.2em; }

/* Profile */
.ts-profile { padding: 16px; }
.ts-profile__header { text-align: center; margin-bottom: 24px; }
.ts-profile__header img { border-radius: 50%; margin-bottom: 10px; }
.ts-profile__joined { color: var(--ts-ink-soft); font-size: 0.85rem; }
.ts-profile__section { margin-bottom: 20px; }
.ts-profile__section h2 { font-size: 1rem; border-bottom: 1px solid var(--ts-border); padding-bottom: 6px; }
.ts-profile__section ul { list-style: none; padding: 0; margin: 8px 0 0; }
.ts-profile__section li { padding: 6px 0; }

/* Bottom nav (mobile) */
.ts-bottom-nav {
	position: fixed; bottom: 0; left: 0; right: 0;
	display: flex; justify-content: space-around; align-items: center;
	background: var(--ts-paper); border-top: 1px solid var(--ts-border);
	padding: 10px 0; z-index: 100;
}
.ts-bottom-nav a { color: var(--ts-ink-soft); font-size: 0.75rem; text-align: center; }
.ts-bottom-nav a.is-active { color: var(--ts-accent); font-weight: 700; }
.ts-bottom-nav__create {
	background: var(--ts-accent); color: #fff !important; width: 40px; height: 40px;
	border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; font-weight: 700;
}

@media (min-width: 720px) {
	.ts-bottom-nav { display: none; }
	.ts-app { padding-bottom: 0; }
}