/**
 * mc-knowledge.css — Knowledge Base Styles
 *
 * Phase 4: Community SEO & Discovery Layer
 * CSS Prefix: mckb-*
 *
 * ============================================================
 * VISUAL DESIGN AS GAMIFICATION (Octalysis)
 * ============================================================
 *
 * Dark theme matching platform aesthetic. Key design decisions:
 *
 * - Dark surface backgrounds (#16162a cards, #1a1a2e panels):
 *   CD4 + CD6 — immersive, premium feel. Same as Vault/Mentor.
 *
 * - Category pill colors (purple accent):
 *   CD7 — visual categorization invites browsing.
 *
 * - Difficulty badges (green/amber/red):
 *   CD2 — progress indicators. Users can see their growth.
 *
 * - View count + answer count on cards:
 *   CD5 — social proof. Popular questions attract more engagement.
 *
 * - Bookmark icon toggle animation:
 *   CD4 — ownership. Satisfying "saved" feedback.
 *
 * - Best answer gold accent border:
 *   CD2 + CD5 — community-validated quality rises visually.
 *
 * - Upvote button hover glow:
 *   CD2 — anticipation of casting your weighted vote.
 *
 * @since 4.0.0
 */

/* ============================================================
   CONTAINER
   ============================================================ */

.mckb-container {
	max-width: 900px;
	margin: 0 auto;
	padding: 0;
	font-family: inherit;
	color: #d1d5db;
}

/* ============================================================
   SEARCH BAR — CD7: Curiosity-driven discovery
   ============================================================ */

.mckb-search-bar {
	margin-bottom: 24px;
}

.mckb-search-input-wrap {
	position: relative;
	margin-bottom: 12px;
}

.mckb-search-icon {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 16px;
	pointer-events: none;
}

.mckb-search-input {
	width: 100%;
	padding: 12px 16px 12px 42px;
	background: #1a1a32;
	border: 1px solid rgba(124, 58, 237, 0.2);
	border-radius: 12px;
	color: #fff;
	font-size: 15px;
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	box-sizing: border-box;
}

.mckb-search-input:focus {
	border-color: #7c3aed;
	box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}

.mckb-search-input::placeholder {
	color: #6b7280;
}

/* ============================================================
   FILTERS — CD7: Browsable category discovery
   ============================================================ */

.mckb-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.mckb-filter-pill {
	padding: 6px 14px;
	background: rgba(30, 30, 58, 0.8);
	border: 1px solid rgba(124, 58, 237, 0.15);
	border-radius: 999px;
	color: #9ca3af;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
	white-space: nowrap;
}

.mckb-filter-pill:hover {
	color: #d1d5db;
	border-color: rgba(124, 58, 237, 0.4);
}

.mckb-filter-pill.mckb-active {
	background: rgba(124, 58, 237, 0.2);
	border-color: #7c3aed;
	color: #a78bfa;
}

.mckb-filter-sep {
	color: #3a3a5c;
	font-size: 14px;
	margin: 0 4px;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.mckb-section {
	margin-bottom: 28px;
}

.mckb-section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 14px;
}

.mckb-section-title {
	font-size: 16px;
	font-weight: 600;
	color: #fff;
	margin: 0;
}

.mckb-see-all,
.mckb-back-btn {
	background: none;
	border: none;
	color: #a78bfa;
	font-size: 13px;
	cursor: pointer;
	padding: 4px 8px;
	transition: color 0.2s;
}

.mckb-see-all:hover,
.mckb-back-btn:hover {
	color: #c4b5fd;
}

/* ============================================================
   CARDS — CD5: Social proof (views, answers) + CD7: Curiosity
   ============================================================ */

/* Horizontal scroll row. */
.mckb-cards-scroll {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 8px;
	scrollbar-width: thin;
	scrollbar-color: #3a3a5c transparent;
}

.mckb-cards-scroll::-webkit-scrollbar {
	height: 4px;
}

.mckb-cards-scroll::-webkit-scrollbar-thumb {
	background: #3a3a5c;
	border-radius: 4px;
}

/* Grid layout. */
.mckb-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}

/* Card. */
.mckb-card {
	position: relative;
	background: rgba(22, 22, 42, 0.95);
	border: 1px solid rgba(124, 58, 237, 0.12);
	border-radius: 14px;
	padding: 16px;
	min-width: 240px;
	max-width: 320px;
	cursor: pointer;
	transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s;
	flex-shrink: 0;
}

.mckb-card-grid .mckb-card {
	max-width: none;
}

.mckb-card:hover {
	transform: translateY(-2px);
	border-color: rgba(124, 58, 237, 0.35);
	box-shadow: 0 4px 20px rgba(124, 58, 237, 0.1);
}

/* Card top row: category + difficulty. */
.mckb-card-top {
	display: flex;
	gap: 8px;
	align-items: center;
	margin-bottom: 10px;
}

.mckb-card-category {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: #a78bfa;
	background: rgba(124, 58, 237, 0.12);
	padding: 2px 8px;
	border-radius: 6px;
}

/* CD2: Difficulty badges — visual progress indicator. */
.mckb-card-diff {
	font-size: 11px;
	font-weight: 500;
	padding: 2px 8px;
	border-radius: 6px;
}

.mckb-diff-beginner {
	color: #4ade80;
	background: rgba(74, 222, 128, 0.1);
}

.mckb-diff-intermediate {
	color: #f59e0b;
	background: rgba(245, 158, 11, 0.1);
}

.mckb-diff-advanced {
	color: #ef4444;
	background: rgba(239, 68, 68, 0.1);
}

/* Card title. */
.mckb-card-title {
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	margin: 0 0 12px 0;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Card meta (answers + views). CD5: Social proof. */
.mckb-card-meta {
	display: flex;
	gap: 14px;
	align-items: center;
}

.mckb-meta-answers,
.mckb-meta-views {
	font-size: 12px;
	color: #6b7280;
}

/* Bookmark button. CD4: Ownership — personal collection. */
.mckb-bookmark-btn {
	position: absolute;
	top: 12px;
	right: 12px;
	background: none;
	border: none;
	font-size: 16px;
	cursor: pointer;
	padding: 4px;
	opacity: 0.5;
	transition: opacity 0.2s, transform 0.2s;
}

.mckb-bookmark-btn:hover {
	opacity: 1;
	transform: scale(1.15);
}

.mckb-bookmark-btn.mckb-bookmarked {
	opacity: 1;
}

.mckb-detail-stats .mckb-bookmark-btn {
	position: static;
	font-size: 13px;
	opacity: 0.8;
	padding: 4px 10px;
	border: 1px solid rgba(124, 58, 237, 0.2);
	border-radius: 8px;
	background: rgba(124, 58, 237, 0.05);
}

/* ============================================================
   DETAIL VIEW — Q&A Thread
   ============================================================ */

.mckb-detail-header {
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 1px solid rgba(124, 58, 237, 0.1);
}

.mckb-detail-meta-top {
	display: flex;
	gap: 8px;
	margin-bottom: 10px;
}

.mckb-detail-title {
	font-size: 22px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 12px 0;
	line-height: 1.3;
}

.mckb-detail-stats {
	display: flex;
	gap: 16px;
	align-items: center;
	font-size: 13px;
	color: #9ca3af;
	flex-wrap: wrap;
}

/* ============================================================
   ANSWERS — CD2 + CD5: Social validation via voting
   ============================================================ */

.mckb-answer {
	background: rgba(22, 22, 42, 0.7);
	border: 1px solid rgba(124, 58, 237, 0.08);
	border-radius: 12px;
	padding: 18px;
	margin-bottom: 14px;
}

/* CD2 + CD5: Best answer highlighted with gold accent. */
.mckb-answer-best {
	border-color: rgba(251, 191, 36, 0.3);
	background: rgba(251, 191, 36, 0.03);
}

.mckb-answer-best::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, #fbbf24, #f59e0b);
	border-radius: 12px 12px 0 0;
}

.mckb-answer {
	position: relative;
}

.mckb-answer-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 12px;
	flex-wrap: wrap;
	gap: 8px;
}

.mckb-answer-author {
	font-size: 13px;
	font-weight: 500;
	color: #d1d5db;
}

.mckb-author-ai {
	color: #a78bfa;
}

.mckb-best-badge {
	font-size: 11px;
	font-weight: 600;
	color: #fbbf24;
	background: rgba(251, 191, 36, 0.1);
	padding: 2px 10px;
	border-radius: 6px;
}

.mckb-answer-content {
	font-size: 14px;
	line-height: 1.65;
	color: #d1d5db;
	margin-bottom: 14px;
}

.mckb-answer-content p {
	margin: 0 0 10px 0;
}

.mckb-answer-content code {
	background: rgba(124, 58, 237, 0.1);
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 13px;
	color: #c4b5fd;
}

.mckb-answer-content pre {
	background: #0e0e1a;
	border: 1px solid rgba(124, 58, 237, 0.1);
	border-radius: 8px;
	padding: 14px;
	overflow-x: auto;
	font-size: 13px;
}

.mckb-answer-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* CD2: Upvote button — anticipation glow on hover. */
.mckb-upvote-btn {
	background: rgba(30, 30, 58, 0.8);
	border: 1px solid rgba(124, 58, 237, 0.15);
	border-radius: 8px;
	padding: 5px 14px;
	color: #9ca3af;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
}

.mckb-upvote-btn:hover {
	border-color: #7c3aed;
	color: #a78bfa;
	box-shadow: 0 0 8px rgba(124, 58, 237, 0.2);
}

.mckb-upvote-btn.mckb-voted {
	background: rgba(124, 58, 237, 0.12);
	border-color: #7c3aed;
	color: #a78bfa;
	cursor: default;
}

.mckb-answer-date {
	font-size: 12px;
	color: #6b7280;
}

/* ============================================================
   ADD ANSWER — CD3: Empowerment of Creativity
   ============================================================ */

.mckb-add-answer {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid rgba(124, 58, 237, 0.1);
}

.mckb-add-answer h3 {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 12px 0;
}

.mckb-answer-textarea {
	width: 100%;
	padding: 12px 14px;
	background: #1a1a32;
	border: 1px solid rgba(124, 58, 237, 0.15);
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	resize: vertical;
	min-height: 100px;
	outline: none;
	transition: border-color 0.2s;
	box-sizing: border-box;
}

.mckb-answer-textarea:focus {
	border-color: #7c3aed;
}

.mckb-submit-btn {
	margin-top: 10px;
	padding: 10px 24px;
	background: linear-gradient(135deg, #7c3aed, #9333ea, #c026d3);
	border: none;
	border-radius: 10px;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: opacity 0.2s, transform 0.2s;
}

.mckb-submit-btn:hover {
	opacity: 0.9;
	transform: translateY(-1px);
}

.mckb-submit-btn:disabled {
	opacity: 0.5;
	cursor: default;
	transform: none;
}

/* ============================================================
   RELATED QUESTIONS — CD7: Curiosity keeps users browsing
   ============================================================ */

.mckb-related,
.mckb-paa {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid rgba(124, 58, 237, 0.08);
}

.mckb-related-title,
.mckb-paa-title {
	font-size: 15px;
	font-weight: 600;
	color: #fff;
	margin: 0 0 12px 0;
}

.mckb-related-link {
	display: block;
	padding: 10px 14px;
	margin-bottom: 6px;
	background: rgba(22, 22, 42, 0.5);
	border: 1px solid rgba(124, 58, 237, 0.06);
	border-radius: 8px;
	color: #a78bfa;
	font-size: 14px;
	text-decoration: none;
	transition: background 0.2s, border-color 0.2s;
}

.mckb-related-link:hover {
	background: rgba(124, 58, 237, 0.08);
	border-color: rgba(124, 58, 237, 0.2);
}

.mckb-related-meta {
	display: block;
	font-size: 12px;
	color: #6b7280;
	margin-top: 2px;
}

.mckb-paa-item {
	padding: 8px 14px;
	font-size: 14px;
	color: #9ca3af;
	cursor: pointer;
	transition: color 0.2s;
}

.mckb-paa-item:hover {
	color: #d1d5db;
}

/* ============================================================
   PAGINATION
   ============================================================ */

.mckb-pagination {
	display: flex;
	justify-content: center;
	gap: 6px;
	margin-top: 20px;
}

.mckb-page-btn {
	padding: 6px 12px;
	background: rgba(30, 30, 58, 0.8);
	border: 1px solid rgba(124, 58, 237, 0.12);
	border-radius: 8px;
	color: #9ca3af;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s;
}

.mckb-page-btn:hover {
	border-color: #7c3aed;
	color: #a78bfa;
}

.mckb-page-btn.mckb-page-active {
	background: rgba(124, 58, 237, 0.2);
	border-color: #7c3aed;
	color: #a78bfa;
}

/* ============================================================
   LOADING + EMPTY STATES — CD7: Anticipation
   ============================================================ */

.mckb-loading {
	text-align: center;
	padding: 40px 0;
	color: #6b7280;
}

.mckb-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(124, 58, 237, 0.15);
	border-top-color: #7c3aed;
	border-radius: 50%;
	animation: mckb-spin 0.7s linear infinite;
	margin: 0 auto 12px;
}

@keyframes mckb-spin {
	to { transform: rotate(360deg); }
}

.mckb-empty {
	text-align: center;
	padding: 40px 0;
	color: #6b7280;
}

.mckb-error {
	color: #ef4444;
	font-size: 13px;
}

.mckb-no-results,
.mckb-no-answers {
	color: #6b7280;
	font-size: 14px;
	padding: 20px 0;
}

.mckb-login-notice {
	text-align: center;
	padding: 40px 0;
	color: #9ca3af;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 640px) {
	.mckb-card {
		min-width: 200px;
	}

	.mckb-card-grid {
		grid-template-columns: 1fr;
	}

	.mckb-detail-title {
		font-size: 18px;
	}

	.mckb-detail-stats {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}

	.mckb-filters {
		overflow-x: auto;
		flex-wrap: nowrap;
		padding-bottom: 8px;
	}

	.mckb-answer-header {
		flex-direction: column;
		align-items: flex-start;
	}
}

@media (max-width: 380px) {
	.mckb-card {
		min-width: 180px;
		padding: 12px;
	}

	.mckb-search-input {
		font-size: 14px;
		padding: 10px 14px 10px 38px;
	}
}