/* Explain: Styles for the reading plan overview, highlighting current and completed days. */
/* Full Plan list on the Bible Reading Plan page: every row keeps the same height and alignment, and the current day plus finished days are clearly marked. */
[data-reading-day] {
    min-height: 4.75rem;
    transition: background 300ms ease, border-color 300ms ease, box-shadow 300ms ease;
}

.reading-day-passage {
    min-height: 1.25rem;
}

/* Finished days: muted card, muted number and a muted title so the Read mark stands out. */
[data-reading-day].is-read {
    background: color-mix(in srgb, var(--secondary-color) 7%, var(--surface-color));
}

[data-reading-day].is-read .reading-day-number {
    background: color-mix(in srgb, var(--secondary-color) 12%, transparent);
    color: var(--secondary-color);
}

[data-reading-day].is-read .reading-day-title {
    color: var(--text-muted);
}

/* Current day: accent border, accent tint, filled number and a lifted shadow — takes precedence over the read state. */
[data-reading-day].is-current {
    border-color: var(--accent-color);
    background: color-mix(in srgb, var(--accent-color) 14%, transparent);
    box-shadow: var(--shadow-card);
}

[data-reading-day].is-current .reading-day-number {
    background: var(--accent-color);
    color: var(--primary-color);
}

[data-reading-day].is-current .reading-day-title {
    color: var(--primary-color);
}