/* Components. Mobile-first throughout: the base rule is the phone layout and every
   media query is a min-width enhancement. */

/* ---------- Buttons ---------- */

.sl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.375rem;
	padding: 0.5rem 0.875rem;
	border: 1px solid transparent;
	border-radius: 8px;
	font-size: 0.875rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.sl-btn--primary {
	background: var(--sl-red);
	color: var(--sl-red-contrast);
}
.sl-btn--primary:hover { background: var(--sl-red-hover); color: var(--sl-red-contrast); }

.sl-btn--ghost {
	background: transparent;
	border-color: var(--sl-border-strong);
	color: var(--sl-text);
}
.sl-btn--ghost:hover { background: var(--sl-surface-hover); color: var(--sl-text); }

.sl-btn--block { display: flex; width: 100%; }

.sl-btn-icon {
	display: inline-grid;
	place-items: center;
	width: 38px;
	height: 38px;
	flex: none;
	padding: 0;
	background: transparent;
	border: 1px solid var(--sl-border);
	border-radius: 8px;
	color: var(--sl-text-muted);
	cursor: pointer;
}
.sl-btn-icon:hover { background: var(--sl-surface-hover); color: var(--sl-text); }

/* The toggle shows the icon for the mode it will switch *to*. */
.sl-icon-moon { display: block; }
.sl-icon-sun { display: none; }
:root[data-theme="dark"] .sl-icon-moon { display: none; }
:root[data-theme="dark"] .sl-icon-sun { display: block; }
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .sl-icon-moon { display: none; }
	:root:not([data-theme="light"]) .sl-icon-sun { display: block; }
}

/* The CTA label is dead weight on a narrow phone; the + icon carries it. */
.sl-cta-add span { display: none; }
@media (min-width: 560px) {
	.sl-cta-add span { display: inline; }
}

/* ---------- Language switcher ---------- */

.sl-langs { display: flex; gap: 0.125rem; }
.sl-langs__item {
	padding: 0.375rem 0.5rem;
	border-radius: 6px;
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--sl-text-faint);
	text-decoration: none;
}
.sl-langs__item:hover { background: var(--sl-surface-hover); color: var(--sl-text); }
.sl-langs__item.is-current { color: var(--sl-red); }

/* ---------- Card ---------- */

.sl-card {
	background: var(--sl-surface);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius-lg);
	box-shadow: var(--sl-shadow);
	padding: 1.25rem;
}

.sl-card > h2 { margin-bottom: 1rem; }

.sl-widget__title {
	font-size: 1rem;
	margin-bottom: 0.875rem;
}

.sl-prose { line-height: 1.7; }
.sl-prose p { color: var(--sl-text-muted); }

.sl-ico { flex: none; }

/* ---------- Hero ---------- */

.sl-hero {
	position: relative;
	background: var(--sl-surface);
	border-bottom: 1px solid var(--sl-border);
	color: var(--sl-text);
}

.sl-hero__inner {
	position: relative;
	z-index: 1;
	padding-block: 1.5rem 1.75rem;
}

.sl-hero--has-image {
	color: var(--sl-text-on-media);
	border-bottom: 0;
}
.sl-hero--has-image .sl-hero__inner {
	padding-block: 3rem 1.75rem;
	min-height: 300px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}

.sl-hero__media {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.sl-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Scrim: the title must stay legible over any photo, in either theme. */
.sl-hero__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgb(8 10 14 / 88%) 0%,
		rgb(8 10 14 / 62%) 45%,
		rgb(8 10 14 / 30%) 100%
	);
}

.sl-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	font-weight: 500;
	color: inherit;
	opacity: 0.85;
	text-decoration: none;
}
.sl-hero__back:hover { opacity: 1; color: inherit; }

.sl-hero__title {
	font-size: 1.625rem;
	max-width: 20ch;
	margin-bottom: 0.75rem;
}

.sl-hero__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.875rem;
}

.sl-chip {
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.3125rem 0.625rem;
	border-radius: 999px;
	font-size: 0.8125rem;
	background: var(--sl-surface-hover);
	color: var(--sl-text-muted);
	border: 1px solid var(--sl-border);
}
.sl-chip .sl-ico { width: 15px; height: 15px; }

.sl-hero--has-image .sl-chip {
	background: rgb(255 255 255 / 14%);
	border-color: rgb(255 255 255 / 22%);
	color: #fff;
	backdrop-filter: blur(4px);
}

.sl-hero__byline,
.sl-hero__updated {
	margin: 0;
	font-size: 0.8125rem;
	opacity: 0.9;
	display: flex;
	flex-wrap: wrap;
	gap: 0.375rem;
}
.sl-hero__updated { opacity: 0.75; margin-top: 0.25rem; }
.sl-hero__author { font-weight: 600; }

@media (min-width: 700px) {
	.sl-hero__title { font-size: 2.25rem; }
	.sl-hero--has-image .sl-hero__inner { min-height: 380px; padding-block: 4rem 2rem; }
}

/* ---------- Summary cards ---------- */

.sl-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.75rem;
}

.sl-summary__card {
	display: flex;
	flex-direction: column;
	gap: 0.25rem;
	padding: 0.875rem;
	background: var(--sl-surface);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
	box-shadow: var(--sl-shadow);
}

.sl-summary__icon { color: var(--sl-text-faint); }

.sl-summary__label {
	font-size: 0.75rem;
	color: var(--sl-text-muted);
}

.sl-summary__value {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.3;
}

@media (min-width: 760px) {
	.sl-summary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Table ---------- */

.sl-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.875rem;
}

.sl-table th,
.sl-table td {
	padding: 0.75rem 0.5rem;
	text-align: left;
	border-bottom: 1px solid var(--sl-border);
	vertical-align: middle;
}

.sl-table thead th {
	font-size: 0.6875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sl-text-faint);
	padding-block: 0.5rem;
}

.sl-table tbody th { font-weight: 500; }

.sl-table__num { text-align: right; }

/* ---------- Budget ---------- */

.sl-budget__grid {
	display: grid;
	gap: 1.5rem;
}

.sl-budget__cat {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.sl-budget__swatch {
	flex: none;
	width: 10px;
	height: 10px;
	margin-top: 0.4rem;
	border-radius: 3px;
	background: var(--swatch);
}

.sl-budget__cat-text { display: flex; flex-direction: column; }
.sl-budget__cat-name { color: var(--sl-text); }
.sl-budget__cat-note {
	font-size: 0.75rem;
	color: var(--sl-text-faint);
}

/* The share column: a bar on top of the number, so it reads on a phone too. */
.sl-bar {
	display: block;
	width: 100%;
	max-width: 90px;
	height: 6px;
	margin-left: auto;
	margin-bottom: 0.25rem;
	background: var(--sl-surface-hover);
	border-radius: 999px;
	overflow: hidden;
}
.sl-bar__fill {
	display: block;
	width: var(--pct);
	height: 100%;
	background: var(--swatch);
	border-radius: 999px;
}
.sl-bar__pct {
	font-size: 0.75rem;
	color: var(--sl-text-muted);
}

.sl-budget__total th,
.sl-budget__total td {
	border-bottom: 0;
	border-top: 2px solid var(--sl-border-strong);
	padding-top: 0.875rem;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--sl-text);
}

@media (min-width: 900px) {
	/* Chart beside the table once there's room; stacked below that. */
	.sl-budget__grid {
		grid-template-columns: 240px minmax(0, 1fr);
		align-items: center;
		gap: 2rem;
	}
}

/* ---------- Donut ---------- */

.sl-donut { margin: 0; }

.sl-donut__chart {
	position: relative;
	width: 100%;
	max-width: 220px;
	margin-inline: auto;
	aspect-ratio: 1;
}

.sl-donut__svg { width: 100%; height: 100%; overflow: visible; }

.sl-donut__track {
	fill: none;
	stroke: var(--sl-surface-hover);
	stroke-width: 20;
}

.sl-donut__seg {
	fill: none;
	stroke-width: 20;
	cursor: pointer;
	transition: stroke-width 0.15s ease, opacity 0.15s ease;
}
.sl-donut__seg:hover,
.sl-donut__seg:focus-visible {
	stroke-width: 24;
	outline: none;
}
/* Dim the rest of the ring so the hovered slice stands out. */
.sl-donut.is-active .sl-donut__seg { opacity: 0.45; }
.sl-donut.is-active .sl-donut__seg:hover,
.sl-donut.is-active .sl-donut__seg:focus-visible { opacity: 1; }

.sl-donut__center {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.125rem;
	text-align: center;
	pointer-events: none;
	padding: 0 22%;
}

.sl-donut__label {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--sl-text-faint);
	line-height: 1.3;
}
.sl-donut__value {
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.2;
}
.sl-donut__sub {
	font-size: 0.75rem;
	color: var(--sl-text-muted);
}

/* ---------- Earners ---------- */

.sl-earners {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0.875rem;
}

.sl-earner {
	padding: 1rem;
	background: var(--sl-surface-2);
	border: 1px solid var(--sl-border);
	border-radius: var(--sl-radius);
}

.sl-earner__name {
	margin-bottom: 0.75rem;
	padding-bottom: 0.625rem;
	border-bottom: 1px solid var(--sl-border);
	font-size: 0.9375rem;
}

.sl-earner__list { margin: 0; }

.sl-earner__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.375rem 0;
	font-size: 0.875rem;
}
.sl-earner__row dt { color: var(--sl-text-muted); }
.sl-earner__row dd { margin: 0; font-weight: 600; }

@media (min-width: 700px) {
	.sl-earners { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
}

/* ---------- Bottom line ---------- */

.sl-bottomline__list { margin: 0; }

.sl-bottomline__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--sl-border);
	font-size: 0.9375rem;
}
.sl-bottomline__row dt { color: var(--sl-text-muted); }
.sl-bottomline__row dd { margin: 0; font-weight: 600; }

.sl-bottomline__row--result {
	border-bottom: 0;
	border-top: 2px solid var(--sl-border-strong);
	margin-top: 0.25rem;
	padding-top: 0.875rem;
	align-items: center;
}
.sl-bottomline__row--result dt {
	display: flex;
	flex-direction: column;
	color: var(--sl-text);
	font-weight: 700;
}
.sl-bottomline__row--result dd { font-size: 1.25rem; font-weight: 700; }

.sl-bottomline__rate {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--sl-text-faint);
}

/* ---------- Tip box ---------- */

.sl-tip {
	display: flex;
	gap: 0.875rem;
	padding: 1.125rem;
	background: var(--sl-positive-bg);
	border: 1px solid color-mix(in srgb, var(--sl-positive) 30%, transparent);
	border-radius: var(--sl-radius-lg);
}
.sl-tip__icon { flex: none; color: var(--sl-positive); }
.sl-tip__title { font-size: 0.9375rem; margin-bottom: 0.25rem; }
.sl-tip__text { margin: 0; font-size: 0.875rem; color: var(--sl-text-muted); }

/* ---------- Facts ---------- */

.sl-facts {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 0.75rem;
	margin: 0;
}

.sl-facts__item { display: flex; gap: 0.625rem; }
.sl-facts__icon { color: var(--sl-text-faint); margin-top: 0.125rem; }

.sl-facts dt {
	font-size: 0.6875rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--sl-text-faint);
}
.sl-facts dd {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;
}

@media (min-width: 700px) {
	.sl-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Gallery ---------- */

.sl-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.625rem;
}

.sl-gallery__link {
	display: block;
	border-radius: var(--sl-radius);
	overflow: hidden;
}
.sl-gallery__img {
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	transition: transform 0.25s ease;
}
.sl-gallery__link:hover .sl-gallery__img { transform: scale(1.04); }

@media (min-width: 700px) {
	.sl-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* ---------- Quote ---------- */

.sl-quote {
	margin: 0;
	padding: 1.5rem;
	border-radius: var(--sl-radius-lg);
	background: #14171d;
	color: #f0f2f5;
	border: 1px solid #262b34;
}

.sl-quote__text {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	line-height: 1.6;
}
.sl-quote__text p { margin: 0; }
.sl-quote__text::before { content: "“"; }
.sl-quote__text::after { content: "”"; }

.sl-quote__by {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}
.sl-quote__avatar { width: 40px; height: 40px; }
.sl-quote__name { display: block; font-weight: 600; font-size: 0.875rem; }
.sl-quote__role { display: block; font-size: 0.8125rem; color: #9aa2ae; }

/* ---------- Author / sidebar ---------- */

.sl-avatar { border-radius: 999px; }

.sl-author {
	display: flex;
	gap: 0.875rem;
	margin-bottom: 1rem;
}
.sl-author__avatar { width: 56px; height: 56px; flex: none; }
.sl-author__name { margin: 0 0 0.25rem; font-weight: 700; }
.sl-author__line {
	display: flex;
	align-items: center;
	gap: 0.375rem;
	margin: 0;
	font-size: 0.8125rem;
	color: var(--sl-text-muted);
}
.sl-author__line .sl-ico { width: 14px; height: 14px; }
.sl-author__joined { color: var(--sl-text-faint); margin-top: 0.25rem; }

/* ---------- Stats ---------- */

.sl-stats { margin: 0; }
.sl-stats__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.5rem 0;
	font-size: 0.875rem;
}
.sl-stats__row + .sl-stats__row { border-top: 1px solid var(--sl-border); }
.sl-stats__row dt {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sl-text-muted);
}
.sl-stats__row dd { margin: 0; font-weight: 700; }

/* ---------- Related ---------- */

.sl-related { list-style: none; margin: 0; padding: 0; }
.sl-related__item + .sl-related__item {
	margin-top: 0.5rem;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sl-border);
}

.sl-related__link {
	display: flex;
	gap: 0.625rem;
	text-decoration: none;
	color: inherit;
}
.sl-related__thumb {
	width: 44px;
	height: 44px;
	flex: none;
	border-radius: 8px;
	object-fit: cover;
}
.sl-related__title {
	display: block;
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--sl-text);
}
.sl-related__link:hover .sl-related__title { color: var(--sl-red); }
.sl-related__canton {
	display: block;
	font-size: 0.75rem;
	color: var(--sl-text-faint);
}

/* ---------- Share ---------- */

.sl-share {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.5rem;
}

.sl-share__link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--sl-border);
	border-radius: 8px;
	color: var(--sl-text-muted);
	transition: background-color 0.15s ease, color 0.15s ease;
}
.sl-share__link:hover {
	background: var(--sl-surface-hover);
	color: var(--sl-text);
}
.sl-share__link.is-copied {
	background: var(--sl-positive-bg);
	border-color: var(--sl-positive);
	color: var(--sl-positive);
}

/* ---------- Comments ---------- */

.sl-comments__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 1.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sl-border);
}
.sl-comments__count { margin: 0; font-size: 1rem; }

.sl-comments__sort {
	display: inline-flex;
	align-items: center;
	gap: 0.25rem;
	font-size: 0.8125rem;
	color: var(--sl-text-muted);
	text-decoration: none;
}
.sl-comments__sort:hover { color: var(--sl-text); }

.sl-comment-list,
.sl-comment-list .children {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}
.sl-comment-list .children {
	margin-left: 1.25rem;
	padding-left: 1rem;
	border-left: 2px solid var(--sl-border);
}

.sl-comment { padding: 0.75rem 0; }
.sl-comment__body { display: flex; gap: 0.75rem; }
.sl-comment__content { flex: 1; min-width: 0; }

.sl-comment__meta {
	display: flex;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.25rem;
}
.sl-comment__author { font-weight: 600; font-size: 0.875rem; }
.sl-comment__date { font-size: 0.75rem; color: var(--sl-text-faint); }

.sl-comment__text { font-size: 0.9375rem; }
.sl-comment__text p { margin-bottom: 0.5rem; }

.sl-comment__pending { font-size: 0.8125rem; color: var(--sl-text-faint); }

.sl-comment__actions { font-size: 0.8125rem; }
.sl-comment__actions a { color: var(--sl-text-muted); text-decoration: none; }
.sl-comment__actions a:hover { color: var(--sl-red); }

/* Comment form */

.sl-comments .comment-reply-title { font-size: 1rem; margin-bottom: 0.75rem; }

.sl-comments textarea,
.sl-comments input[type="text"],
.sl-comments input[type="email"],
.sl-comments input[type="url"],
.sl-search__input {
	width: 100%;
	padding: 0.625rem 0.75rem;
	background: var(--sl-surface-2);
	border: 1px solid var(--sl-border-strong);
	border-radius: 8px;
	color: var(--sl-text);
	font: inherit;
	font-size: 0.9375rem;
}
.sl-comments textarea { resize: vertical; }

.sl-comments .comment-form > p { margin-bottom: 0.75rem; }
.sl-comments .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	font-size: 0.8125rem;
	color: var(--sl-text-muted);
}
.sl-comments .comment-form-cookies-consent input { width: auto; }

.sl-comments .form-submit { margin: 0; }

.sl-comments__closed { color: var(--sl-text-muted); font-size: 0.875rem; }

/* ---------- Search ---------- */

.sl-search {
	display: flex;
	gap: 0.5rem;
	max-width: 480px;
}

/* ---------- Archive ---------- */

.sl-archive { padding-block: 2rem 3rem; }

.sl-archive__head { margin-bottom: 1.5rem; }
.sl-archive__sub { color: var(--sl-text-muted); margin: 0; }

.sl-cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.sl-teaser {
	display: block;
	padding: 0;
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.sl-teaser:hover {
	box-shadow: var(--sl-shadow-lg);
	transform: translateY(-2px);
}

.sl-teaser__thumb {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.sl-teaser__body { padding: 1rem; }
.sl-teaser__title { font-size: 1.0625rem; margin-bottom: 0.625rem; }
.sl-teaser__chips { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-bottom: 0.75rem; }
.sl-teaser__excerpt { font-size: 0.875rem; color: var(--sl-text-muted); margin: 0; }

.sl-teaser__total {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
	margin: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--sl-border);
	font-weight: 700;
}
.sl-teaser__total-label {
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--sl-text-muted);
}

.sl-empty { color: var(--sl-text-muted); }

@media (min-width: 640px) {
	.sl-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 980px) {
	.sl-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ---------- Pagination ---------- */

.pagination,
.comments-pagination {
	margin-top: 1.5rem;
	display: flex;
	justify-content: center;
}
.pagination .nav-links,
.comments-pagination .nav-links {
	display: flex;
	gap: 0.25rem;
	flex-wrap: wrap;
}
.pagination .page-numbers,
.comments-pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 36px;
	height: 36px;
	padding-inline: 0.5rem;
	border: 1px solid var(--sl-border);
	border-radius: 8px;
	font-size: 0.875rem;
	color: var(--sl-text);
	text-decoration: none;
}
.pagination .page-numbers:hover { background: var(--sl-surface-hover); }
.pagination .page-numbers.current {
	background: var(--sl-red);
	border-color: var(--sl-red);
	color: var(--sl-red-contrast);
}