/* ==========================================================================
   Skills Measurement (.sentio-skills)
   ==========================================================================
   Extracted from frontend.css during the Batch 8 mechanical extraction
   (2026-04-18). Behavior-preserving.

   Pre-existing widget-settings-backlog entry: likely affected by the
   sitewide half-star rendering audit (flagged under reviews-carousel).
   Preserved as-is.
   ========================================================================== */

/* ─── Base ─── */
.sentio-skills {
	--sentio-skills-bar-color: #6366f1;
	width: 100%;
}

/* ─── Item ─── */
.sentio-skills__item + .sentio-skills__item {
	margin-top: 20px;
}

/* ─── Header ─── */
.sentio-skills__header {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
}

/* ─── Icon (Diff #2) ─── */
.sentio-skills__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: var(--sentio-skills-bar-color);
	color: #fff;
	flex-shrink: 0;
	margin-right: 12px;
	font-size: 16px;
	box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}
.sentio-skills__icon svg {
	width: 1em;
	height: 1em;
	fill: currentColor;
}
.sentio-skills__icon i {
	line-height: 1;
}

/* ─── Label ─── */
.sentio-skills__label {
	flex: 1;
	font-weight: 500;
	font-size: 15px;
	color: #333;
}

/* ─── Bar Row ─── */
.sentio-skills__bar-row {
	display: flex;
	align-items: center;
	width: 100%;
}

/* ─── Track ─── */
.sentio-skills__track {
	flex: 1;
	height: 20px;
	background-color: #e5e7eb;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
}

/* ─── Fill ─── */
.sentio-skills__fill {
	height: 100%;
	width: var(--sentio-skills-pct, 0%);
	background-color: var(--sentio-skills-bar-color);
	border-radius: inherit;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

/* Animate mode: start at 0, transition to target on visible (Diff #5) */
.sentio-skills--animate .sentio-skills__fill {
	width: 0;
	transition: width 1s ease;
}
.sentio-skills--visible .sentio-skills__fill {
	width: var(--sentio-skills-pct, 0%);
}

/* ─── Percentage ─── */
.sentio-skills__pct {
	font-weight: 600;
	font-size: 14px;
	color: #333;
	white-space: nowrap;
}

/* Position: right (Diff #7) */
.sentio-skills--pct-right .sentio-skills__bar-row > .sentio-skills__pct {
	margin-left: 12px;
	min-width: 40px;
	text-align: right;
}

/* Position: inside */
.sentio-skills--pct-inside .sentio-skills__fill .sentio-skills__pct {
	color: #fff;
	padding-right: 8px;
	font-size: 12px;
}

/* Position: above — pushed to right of header */
.sentio-skills--pct-above .sentio-skills__header .sentio-skills__pct {
	margin-left: auto;
}

/* Position: hidden */
.sentio-skills--pct-hidden .sentio-skills__pct {
	display: none;
}

/* ═══════════════════════════════════════════════
 * Bar Layouts (Diff #4)
 * ═══════════════════════════════════════════════ */

/* Bordered — thick border matching fill color */
.sentio-skills--bordered .sentio-skills__track {
	border: 3px solid var(--sentio-skills-bar-color);
	background-color: #e5e7eb;
}

/* Pill — fully rounded */
.sentio-skills--pill .sentio-skills__track {
	border-radius: 999px;
}

/* Thin — slim bar */
.sentio-skills--thin .sentio-skills__track {
	height: 6px;
}

/* ═══════════════════════════════════════════════
 * Fill Patterns (Diff #3)
 * ═══════════════════════════════════════════════ */

/* Striped */
.sentio-skills--striped .sentio-skills__fill {
	background-image: repeating-linear-gradient(
		-45deg,
		transparent,
		transparent 8px,
		rgba(255, 255, 255, 0.2) 8px,
		rgba(255, 255, 255, 0.2) 16px
	);
}

/* Segmented — colored blocks with gaps */
.sentio-skills--segmented .sentio-skills__track {
	background-image: repeating-linear-gradient(
		90deg,
		#ddd 0, #ddd 18px,
		transparent 18px, transparent 20px
	);
	background-color: transparent;
}
.sentio-skills--segmented .sentio-skills__fill {
	background-image: repeating-linear-gradient(
		90deg,
		var(--sentio-skills-bar-color) 0, var(--sentio-skills-bar-color) 18px,
		transparent 18px, transparent 20px
	);
	background-color: transparent;
}

/* Gradient */
.sentio-skills--gradient .sentio-skills__fill {
	background: linear-gradient(
		90deg,
		var(--sentio-skills-bar-color),
		var(--sentio-skills-gradient-end, #818cf8)
	);
}

/* ═══════════════════════════════════════════════
 * Separators (Diff #9)
 * ═══════════════════════════════════════════════ */
.sentio-skills--sep .sentio-skills__item + .sentio-skills__item {
	padding-top: 10px;
	border-top-color: #ddd;
	border-top-width: 1px;
}
.sentio-skills--sep-solid .sentio-skills__item + .sentio-skills__item {
	border-top-style: solid;
}
.sentio-skills--sep-dashed .sentio-skills__item + .sentio-skills__item {
	border-top-style: dashed;
}
.sentio-skills--sep-dotted .sentio-skills__item + .sentio-skills__item {
	border-top-style: dotted;
}