/* ── Service Price List Widget (spl) ───────────────────────────────────────── */

/* Nothing here is generated per instance: every value the Style tab can change
   arrives as a CSS custom property on the widget wrapper, so this file stays
   static, cacheable, and safe to share between any number of lists on a page.
   The fallbacks below are the design defaults. */
.spl {
	display: flex;
	flex-direction: column;
	gap: var(--spl-gap, 6px);
	list-style: none;
	margin: 0;
	padding: var(--spl-rule-space, 14px) 0 0;
	border-top: 1px var(--spl-rule-style, dashed) var(--spl-rule, #d9d5cc);
	/* Load-bearing: the monospace figures are what make the prices line up
	   optically down the right edge without a second column to align them. */
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 11px;
	color: var(--spl-label-color, #8a8a82);
}

.spl--no-divider {
	border-top-style: none;
}

/* justify-content: space-between is the whole alignment mechanism — the label
   is pushed to the left edge and the price to the right, at any container
   width, with the row's own box doing the work. That is why this widget needs
   no table, no grid columns, no dot leaders and no absolute positioning: each
   row is simply its own flex line. Changing this to a grid or a table would
   reintroduce the column-width coupling it exists to avoid. */
.spl-row {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 16px;
}

.spl-label {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
	transition: color 0.18s;
}

.spl-row a.spl-label:hover {
	color: var(--spl-hover-color, #1a1a1a);
}

.spl-arrow {
	font-size: var(--spl-arrow-size, 0.9em);
	color: var(--spl-arrow-color, #b5762e);
	line-height: 1;
}

.spl-price {
	color: var(--spl-price-color, #1a1a1a);
	white-space: nowrap;
}