Draw a leave period as one band, and make red days look red

A six-week summer used to render as a row of disconnected bars, because bars
were derived per week row and grouped by parent and day type. They carried no
identity and ignored pointer events, so there was nothing to click. Bands now
group by the wish that produced them, bridge the weekends and red days inside
a period, and round only the ends that are genuinely the first and last day.
Each day still shows what pays for it, and a hand-edited day is marked as one
the planner will leave alone.

Sundays and public holidays now render red and Saturdays a neutral grey,
following the printed almanacka people compare against, and a holiday's name
is visible in the cell rather than hidden in a tooltip. This also explains the
report that months looked unshaded: weekends had no styling at all, since the
day component handled only red days and klämdagar.

The year selector follows the range the calendar API actually serves instead
of a hardcoded span.

frontend/src/components/common/CalendarDay.tsx

@@ -39,7 +39,20 @@ export function CalendarDay({
   overrideIsWorkingDay = null,
 }: CalendarDayProps): ReactNode {
   const { t } = useTranslation()
-  const dayNum = new Date(date + 'T00:00:00Z').getUTCDate()
+  const dateObj = new Date(date + 'T00:00:00Z')
+  const dayNum = dateObj.getUTCDate()
+
+  // §3.4 (Swedish almanacka parity) — the backend collapses Saturday and
+  // Sunday into a single "weekend" day_type (see calendar_service.py), but
+  // the almanacka the user compares against marks Sunday red and Saturday
+  // neutral grey. A holiday that happens to land on Sunday already arrives
+  // as day_type "red_day" (see get_red_days's exact-match on "Söndag" — a
+  // *bare* Sunday is never "red_day"), so a plain Sunday is detected here
+  // from the weekday, not from day_type.
+  const weekday = dateObj.getUTCDay() // 0 = Sunday, 6 = Saturday
+  const isBareSunday = dayType === 'weekend' && weekday === 0
+  const isPlainSaturday = dayType === 'weekend' && weekday === 6
+  const isRedDay = dayType === 'red_day' || isBareSunday
 
   const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
     if (e.key === 'Enter' || e.key === ' ') {
@@ -61,6 +74,8 @@ export function CalendarDay({
     descriptors.push(cleanHolidayName)
   } else if (dayType === 'klamdag') {
     descriptors.push(t('calendarDay.klamdagAria'))
+  } else if (isBareSunday) {
+    descriptors.push(t('calendarDay.sundayAria'))
   }
   if (isOverride) {
     descriptors.push(
@@ -78,8 +93,9 @@ export function CalendarDay({
     events.length > 0 ? 'calendar-day--has-events' : '',
     isToday ? 'calendar-day--today' : '',
     isSelected ? 'calendar-day--selected' : '',
-    dayType === 'red_day' ? 'calendar-day--red-day' : '',
+    isRedDay ? 'calendar-day--red-day' : '',
     dayType === 'klamdag' ? 'calendar-day--klamdag' : '',
+    isPlainSaturday ? 'calendar-day--weekend' : '',
     isOverride ? 'calendar-day--override' : '',
   ]
     .filter(Boolean)
@@ -99,11 +115,16 @@ export function CalendarDay({
       onPointerEnter={() => onPointerEnter?.(date)}
     >
       <div className="calendar-day__number">{dayNum}</div>
-      {(dayType === 'red_day' || dayType === 'klamdag') && (
+      {(isRedDay || dayType === 'klamdag') && (
         <span className="calendar-day__type-badge" data-testid="calendar-day-type-badge" aria-hidden="true">
-          {dayType === 'red_day' ? 'R' : 'K'}
+          {dayType === 'klamdag' ? 'K' : 'R'}
         </span>
       )}
+      {cleanHolidayName && (
+        <div className="calendar-day__holiday-name" data-testid="calendar-day-holiday-name" title={cleanHolidayName}>
+          {cleanHolidayName}
+        </div>
+      )}
       {isOverride && (
         <span className="calendar-day__override-badge" data-testid="calendar-day-override-badge" aria-hidden="true">
           {overrideIsWorkingDay ? '⚒' : '✓'}