.container:has(.calendar-year) { max-width: none; padding: 1.25rem 1rem 2rem; }
.calendar-page { font-variant-numeric: tabular-nums; }
.calendar-page [id^="calendar-date-"] { scroll-margin-top: 1rem; }
.calendar-page .button { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
.calendar-page turbo-frame { display: block; }
.calendar-toolbar, .calendar-view-switch, .calendar-period-navigation, .calendar-period, .calendar-legend { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.calendar-toolbar, .calendar-period { justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.calendar-view-switch { gap: 0; }
.calendar-view-switch a { border-radius: 0; }
.calendar-view-switch a:first-child { border-radius: var(--radius) 0 0 var(--radius); }
.calendar-view-switch a:last-child { border-radius: 0 var(--radius) var(--radius) 0; }
.calendar-view-switch [aria-current="page"] { background: var(--text); border-color: var(--text); color: var(--surface); }
.calendar-period h2 { margin: 0; }
.calendar-period h2::first-letter, .calendar-year-month h3::first-letter { text-transform: uppercase; }
.calendar-legend { list-style: none; padding: 0; margin: 0; gap: 0.8rem; color: var(--muted); font-size: 0.75rem; }
.calendar-legend li { display: flex; align-items: center; gap: 0.3rem; }
.calendar-legend li span { width: 0.65rem; height: 0.65rem; border: 1px solid var(--border); border-radius: 2px; }
.calendar-legend .calendar-legend-today { background: var(--accent-soft, #eaf0ff); border-color: var(--accent); }
.calendar-legend .calendar-legend-weekend { background: var(--surface-badge, #eef0f3); }
.calendar-legend .calendar-legend-tba { background: var(--warning-soft, #fff7e6); border-color: var(--warning-border, #b7791f); }
.calendar-page .calendar-event { background: var(--accent-soft, #eaf0ff); }
.calendar-page .calendar-event-tba { background: var(--warning-soft, #fff7e6); border-color: var(--warning-border, #b7791f); }
.calendar-page .calendar-event-cancelled { background: var(--surface-subtle, #f2f3f5); }
.calendar-page .calendar-day-weekend { background: var(--surface-badge, #eef0f3); }
.calendar-page .calendar-day-today { box-shadow: inset 0 0 0 2px var(--accent); background: var(--accent-soft, #eaf0ff); }
.calendar-page .calendar-weekdays, .calendar-page .calendar-grid { grid-template-columns: 2rem repeat(7, minmax(0, 1fr)); }
.calendar-week-label { border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); padding-top: 0.5rem; text-align: center; color: var(--muted); font-size: 0.7rem; }

.calendar-page .calendar-event:has(.calendar-event-link) { padding: 0; }
.calendar-page .calendar-event-link { display: block; min-height: 44px; padding: 0.4rem; color: var(--text); text-decoration: none; }
.calendar-page .calendar-event-link:hover strong { text-decoration: underline; text-underline-offset: 0.2em; }
.calendar-page .calendar-event-time, .calendar-page .calendar-event-status { font-weight: 400; }
.calendar-page .calendar-event-cancelled strong { text-decoration: line-through; }
.calendar-page .calendar-event-tba { border-color: var(--warning); }

.calendar-year { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 0.75rem; align-items: start; }
.calendar-year-month { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; min-width: 0; }
.calendar-year-month h3 { margin: 0; padding: 0.6rem 0.5rem; background: var(--surface-subtle, #f2f3f5); font-size: 0.85rem; text-align: center; border-bottom: 1px solid var(--border); }
.calendar-year-month h3 a { display: flex; min-height: 44px; align-items: center; justify-content: center; color: var(--text); text-decoration: none; }
.calendar-year-month h3 a:hover { color: var(--accent); text-decoration: underline; }
.calendar-year-day { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) 1.1rem; align-items: start; min-height: 1.6rem; padding: 0.2rem; gap: 0.15rem; border-bottom: 1px solid var(--border); }
.calendar-year-day:last-child { border-bottom: 0; }
.calendar-year-date { display: flex; align-items: baseline; gap: 0.2rem; font-size: 0.7rem; }
.calendar-year-date strong { width: 1rem; text-align: right; }
.calendar-year-date span { font-size: 0.62rem; color: var(--muted); }
.calendar-year-date[aria-current="date"] { color: var(--accent); }
.calendar-week-number { font-size: 0.52rem; color: var(--muted); padding-top: 0.1rem; }
.calendar-year-events { min-width: 0; }
.calendar-year .calendar-event { margin: 0 0 0.2rem; padding: 0.15rem 0.2rem; font-size: 0.8rem; line-height: 1.4; border-left-width: 2px; }
.calendar-year .calendar-event:last-child { margin-bottom: 0; }
.calendar-year .calendar-event-time, .calendar-year .calendar-event-status { font-size: 0.7rem; }
.calendar-year .calendar-event a { display: block; }

@media (min-width: 1800px) {
  .container:has(.calendar-year) { padding-top: 0.65rem; }
  .calendar-page:has(.calendar-year) .calendar-heading { margin-bottom: 0.5rem; }
  .calendar-page:has(.calendar-year) .calendar-heading h1 { font-size: 1.2rem; }
  .calendar-page:has(.calendar-year) .calendar-heading p { font-size: 0.8rem; }
  .calendar-page:has(.calendar-year) .calendar-toolbar, .calendar-page:has(.calendar-year) .calendar-period { margin-bottom: 0.5rem; }
  .calendar-year { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 0.5rem; }
  .calendar-year-day { min-height: 1.3rem; padding-top: 0.125rem; padding-bottom: 0.125rem; }
}

@media (max-width: 1099px) {
  .calendar-year { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 700px) {
  .calendar-toolbar { align-items: stretch; }
  .calendar-view-switch { width: 100%; }
  .calendar-view-switch a { flex: 1; }
  .calendar-page .calendar-event { font-size: 1rem; }
  .calendar-page .calendar-event-time, .calendar-page .calendar-event-status { font-size: 0.875rem; }
  .calendar-page .calendar-day:not(:has(.calendar-event)) { min-height: 3rem; }
  .calendar-year { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calendar-page .calendar-grid { grid-template-columns: 1fr; }
  .calendar-week-label { text-align: left; padding: 0.4rem 0.5rem; background: var(--surface-subtle, #f2f3f5); }
  .calendar-period-navigation { width: 100%; justify-content: space-between; gap: 0.25rem; }
  .calendar-period-navigation .button { padding: 0.4rem 0.5rem; font-size: 0.85rem; }
}

@media (max-width: 479px) {
  .calendar-year { grid-template-columns: 1fr; }
  .calendar-year-day { min-height: 2rem; grid-template-columns: 3rem minmax(0, 1fr) 1.5rem; padding: 0.25rem; }
  .calendar-year-date, .calendar-year-date span { font-size: 0.875rem; }
  .calendar-week-number { font-size: 0.65rem; }
}