/* LHDS LMS Progress Bar — Compact single-line styles */

:root {
	--lhds-accent:     #14213D;
	--lhds-bg:         #f8f8f8;
	--lhds-border:     #e2e2e2;
	--lhds-text:       #000000;
	--lhds-sep:        #cccccc;
	--lhds-radius:     8px;
	--lhds-bar-height: 8px;
	--lhds-transition: 0.5s ease;
}

/* ── Wrapper ────────────────────────────────────────────────────────── */

.lhds-pb-wrapper {
	background:    var(--lhds-bg);
	border:        1px solid var(--lhds-border);
	border-radius: var(--lhds-radius);
	padding:       14px 18px;
	margin:        16px 0;
	font-family:   inherit;
	color:         var(--lhds-text);
	box-sizing:    border-box;
}

/* ── Title ──────────────────────────────────────────────────────────── */

.lhds-pb-title {
	font-size:      1rem;
	font-weight:    700;
	color:          var(--lhds-text);
	margin-bottom:  10px;
	line-height:    1.2;
}

/* ── Progress bar ───────────────────────────────────────────────────── */

.lhds-pb-bar {
	background:    var(--lhds-border);
	border-radius: calc(var(--lhds-bar-height) / 2);
	height:        var(--lhds-bar-height);
	overflow:      hidden;
	margin-bottom: 10px;
}

.lhds-pb-bar__fill {
	height:        100%;
	background:    var(--lhds-accent);
	border-radius: inherit;
	transition:    width var(--lhds-transition);
	min-width:     0;
}

/* ── Single-line stats ──────────────────────────────────────────────── */

.lhds-pb-line {
	display:     flex;
	flex-wrap:   wrap;
	align-items: center;
	gap:         8px;
	font-size:   0.88rem;
	line-height: 1.4;
	color:       var(--lhds-text);
}

.lhds-pb-seg {
	white-space: nowrap;
	color:       var(--lhds-text);
}

.lhds-pb-seg--pct {
	font-weight: 700;
}

.lhds-pb-seg span {
	font-weight: 600;
}

.lhds-pb-sep {
	color:     var(--lhds-sep);
	font-weight: 400;
}

/* ── Admin notice (editors only) ────────────────────────────────────── */

.lhds-pb-admin-notice {
	background:    #fff8e1;
	border-left:   4px solid #f0a500;
	padding:       10px 14px;
	font-size:     0.85rem;
	color:         #555;
	margin:        12px 0;
	border-radius: 0 4px 4px 0;
}

/* ── Responsive ─────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.lhds-pb-line {
		font-size: 0.8rem;
		gap:       6px;
	}

	/* Hide separators on small screens; segments wrap cleanly. */
	.lhds-pb-sep {
		display: none;
	}

	.lhds-pb-seg {
		flex:        1 1 100%;
		white-space: normal;
	}
}