/* W9 Blog widgets: reading routes, read next and progress */
.w9-progress { margin: 0 0 16px; }
.w9-progress-track { height: 6px; border-radius: 999px; background: var(--color-chart-faint); overflow: hidden; }
.w9-progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--color-primary); transition: width .4s ease; }
.w9-progress-text { margin: 8px 0 0; font-size: 14px; font-weight: 600; color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.w9-list-progress { margin-bottom: 8px; max-width: 420px; }

.w9-complete { margin: 4px 0 20px; padding: 16px 18px; border-radius: var(--radius-md); background: var(--color-success-soft); color: var(--color-text-primary); font-size: 15px; }
.w9-complete p { margin: 0 0 12px; }
.w9-complete .s-actions { margin: 0; }

/* Route-voortgang boven de pills in het artikel */
.w9-route-top { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 16px; padding: 10px 14px; border-radius: var(--radius-md); background: var(--color-surface-blue); font-size: 14px; font-weight: 700; color: var(--color-primary); }
.w9-route-segments { display: inline-flex; gap: 4px; }
.w9-route-segments span { width: 28px; height: 6px; border-radius: 999px; background: #fff; border: 1px solid var(--color-primary-light); }
.w9-route-segments span.is-read { background: var(--color-primary-light); }
.w9-route-segments span.is-current { background: var(--color-primary); border-color: var(--color-primary); }

/* Volgende in de route / einde route */
.w9-next-card { padding: 28px 30px; border-radius: var(--radius-lg); background: var(--color-surface-blue); border: 1px solid var(--color-border); }
.w9-next-kicker { margin: 0 0 6px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--color-brand-teal); }
.w9-next-title { margin: 0 0 6px; font-size: 24px; line-height: 1.25; letter-spacing: -.01em; }
.w9-next-meta { margin: 0 0 16px; font-size: 14px; color: var(--color-text-muted); }
.w9-end-card p:not(.w9-next-kicker) { color: var(--color-text-secondary); }
@media (max-width: 767px) { .w9-next-card { padding: 22px 20px; } .w9-next-title { font-size: 20px; } }

/* Gelezen kaarten in rasters met [data-reading-route] */
[data-reading-route] .s-blog-card.is-read .s-blog-card-meta::after { content: " · Read"; color: var(--color-success-strong); font-weight: 650; }