/* Content Manager Pro — Premium Study Flow Engine (PHASE 15A4)
 *
 * Purely additive: everything here is scoped under .hpcm-flow-section /
 * .hpcm-flow-transition so it can never affect the Study Layout, TOC,
 * Hero, archive pages, or theme markup. Loads after hpcm-frontend.css.
 * No JavaScript — every card is static, server-rendered HTML, so there
 * is zero layout-shift risk.
 */

.hpcm-flow-section {
	--hpcm-flow-card-bg: #faf7f1;
	--hpcm-flow-card-border: #e6ddc9;
	--hpcm-flow-text: #1c2b22;
	--hpcm-flow-muted: #5c6b60;
	--hpcm-flow-accent: #1f6b4a;

	box-sizing: border-box;
	margin: 0 0 clamp(20px, 4vw, 32px) 0;
	font-family: 'Poppins', 'Noto Sans Devanagari', sans-serif;
}


.hpcm-flow-section * { box-sizing: border-box; }

/* Section heading keeps whatever the theme/Study Layout already does to
 * h2 — we only add breathing room above the first card. */
.hpcm-flow-section > h2 {
	margin-bottom: clamp(10px, 2vw, 16px);
}

/* ---------------- Cards ---------------- */

.hpcm-flow-card {
	background: var(--hpcm-flow-card-bg);
	border: 1px solid var(--hpcm-flow-card-border);
	border-left: 4px solid var(--hpcm-flow-accent);
	border-radius: 12px;
	padding: clamp(14px, 3vw, 20px);
	margin-bottom: clamp(12px, 2.5vw, 18px);
	max-width: 72ch;
}

.hpcm-flow-card-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .85rem !important;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--hpcm-flow-muted) !important;
	margin-bottom: 10px;
}

.hpcm-flow-card-icon { font-size: 1rem; }

.hpcm-flow-card-body {
	color: var(--hpcm-flow-text) !important;
	font-size: clamp(1rem, .95rem + .2vw, 1.1rem) !important;
	line-height: 1.75;
}

.hpcm-flow-card-body > *:first-child { margin-top: 0; }
.hpcm-flow-card-body > *:last-child { margin-bottom: 0; }

.hpcm-flow-card-body p { margin: 0 0 .8em; }
.hpcm-flow-card-body ul,
.hpcm-flow-card-body ol { margin: 0 0 .8em; padding-left: 1.3em; }
.hpcm-flow-card-body li { margin-bottom: .35em; }

.hpcm-flow-card-body table {
	width: 100%;
	border-collapse: collapse;
	font-size: .92rem !important;
}

.hpcm-flow-card-body table td,
.hpcm-flow-card-body table th {
	border: 1px solid var(--hpcm-flow-card-border);
	padding: 8px 10px;
}

/* Per-bucket accent colors — visual distinction, not just text labels. */
.hpcm-flow-card--introduction { border-left-color: #2563eb; }
.hpcm-flow-card--definition { border-left-color: #7c3aed; }
.hpcm-flow-card--key_concepts { border-left-color: #0891b2; }
.hpcm-flow-card--facts { border-left-color: #0d9488; }
.hpcm-flow-card--important_points { border-left-color: #f59e0b; }
.hpcm-flow-card--note { border-left-color: #64748b; }
.hpcm-flow-card--warning { border-left-color: #dc2626; }
.hpcm-flow-card--example { border-left-color: #16a34a; }
.hpcm-flow-card--context { border-left-color: #db2777; }
.hpcm-flow-card--exam_perspective { border-left-color: #ea580c; }
.hpcm-flow-card--revision_notes { border-left-color: #4338ca; }

/* ---------------- Transition divider between sections ---------------- */

.hpcm-flow-transition {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin: clamp(8px, 2vw, 14px) 0 clamp(20px, 4vw, 28px);
	color: var(--hpcm-flow-muted, #5b6472) !important;
	font-size: .85rem !important;
	font-weight: 600;
}

.hpcm-flow-transition-arrow { font-size: 1rem; }

/* ---------------- Mobile: touch-friendly, no horizontal scroll ---------------- */

@media (max-width: 600px) {
	.hpcm-flow-card { max-width: 100%; }
	.hpcm-flow-card-body table { display: block; overflow-x: auto; }
}