fix: calendar month bar and mobile agenda layout

The month and year selects sit between previous/next icon buttons on one
row, with Apply / Clear / Save after them, on all widths. On mobile the
calendar becomes an agenda: date column beside the issues, days of
neighbouring months hidden, empty days collapsed to one line, lighter
week headers and a highlighted today row.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

tonalmine/stylesheets/mobile.css

@@ -141,7 +141,59 @@
   html .search-magnifier--flyout { inset-inline-start: 28px; }
   html .flyout-menu .flyout-menu__avatar { padding-inline-start: 16px; }
 
-  html .cal .week-number { background-color: var(--md-sys-color-surface-container); border-color: var(--md-sys-color-outline-variant); }
+  /* Calendar month bar: the month select fills the row, Apply / Clear / Save wrap below */
+  html body.controller-calendars p.buttons select#month { flex: 1 1 0; min-inline-size: 0; }
+  html body.controller-calendars #query_form_with_buttons::after { content: ''; order: 2; flex-basis: 100%; margin-block: -4px; } /* line break */
+  html body.controller-calendars p.buttons a { order: 3; }
+
+  /* Calendar as an agenda: weekday column on the left, issues on the right. Days of the
+     neighbouring months are dropped; empty days shrink to one line. */
+  html .cal .week-number {
+    padding-block: 8px;
+    padding-inline: 16px;
+    border: 0;
+    border-block-start: 1px solid var(--md-sys-color-outline-variant);
+    background-color: var(--md-sys-color-surface-container);
+    color: var(--md-sys-color-on-surface-variant);
+    font: var(--md-sys-typescale-label-medium);
+    letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+  }
+  html .cal .week-number:first-child { border-block-start: 0; }
+  html .cal .calbody.other-month { display: none; }
+  html .cal .calbody {
+    display: grid;
+    grid-template-columns: 40px minmax(0, 1fr);
+    column-gap: 8px;
+    align-items: start;
+    min-block-size: 0;
+    padding-block: 8px;
+    padding-inline: 8px;
+    border: 0;
+    border-block-start: 1px solid var(--md-sys-color-outline-variant);
+  }
+  /* ponytail: the date spans 50 implicit rows (empty ones collapse to 0); a day with more
+     issues lets the extra ones fall under the date */
+  html .cal .calbody p.day-num {
+    grid-row: 1 / span 50;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    margin: 0;
+    text-align: center;
+  }
+  html .cal .calbody .day-value { inline-size: 32px; block-size: 32px; font: var(--md-sys-typescale-title-medium); }
+  html .cal .calbody .abbr-day { color: var(--md-sys-color-on-surface-variant); font: var(--md-sys-typescale-label-small); }
+  html .cal .calbody div.issue, html .cal .calbody > .icon { grid-column: 2; margin-block: 0 4px; }
+  /* An empty day is one short line: date and weekday side by side, greyed out */
+  html .cal .calbody:not(:has(div.issue, > .icon)) { padding-block: 4px; }
+  html .cal .calbody:not(:has(div.issue, > .icon)) p.day-num { flex-direction: row; gap: 8px; color: var(--md-sys-color-on-surface-variant); }
+  html .cal .calbody:not(:has(div.issue, > .icon)) .day-value { flex: none; inline-size: 40px; block-size: 24px; font: var(--md-sys-typescale-label-large); }
+  /* Today: tinted row with a primary stripe on its leading edge */
+  html .cal .calbody.today {
+    border-inline-start: 4px solid var(--md-sys-color-primary);
+    padding-inline-start: 4px;
+    background-color: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
+  }
   /* Page actions become M3 outlined buttons, like Apply / Clear. The forum topic wraps its
      actions in a quote-reply controller, so core's #content > .contextual misses them. */
   html #content > [data-controller="quote-reply"] > .contextual {

tonalmine/stylesheets/pages.css

@@ -374,6 +374,38 @@ ul.cal {
 .cal .calbody.other-month, .cal .calbody.nwday:not(.other-month) { background-color: var(--md-sys-color-surface-container-low); }
 .cal .calbody.today .day-value { color: var(--md-sys-color-on-primary); }
 
+/* Month bar: ‹ [month] [year] › then Apply / Clear / Save. The arrows and the selects live
+   in separate containers, so those dissolve into one flex row. */
+body.controller-calendars #query_form_with_buttons { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 16px; } /* p.buttons had it */
+body.controller-calendars #query_form_content { flex: 1 1 100%; }
+body.controller-calendars :is(#query_form_with_buttons > .pagination, #query_form_with_buttons > .pagination ul, #query_form_with_buttons > p.buttons) { display: contents; }
+body.controller-calendars p.buttons label { position: absolute; clip-path: inset(50%); inline-size: 1px; block-size: 1px; overflow: hidden; }
+body.controller-calendars .pagination li { margin: 0; }
+body.controller-calendars .pagination li.next { order: 1; }
+body.controller-calendars p.buttons a { order: 2; }
+/* Previous / next month: icon buttons; the month name stays as the accessible text */
+body.controller-calendars .pagination li a {
+  display: block;
+  inline-size: 40px;
+  block-size: 40px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--md-sys-shape-corner-full);
+  font-size: 0;
+  color: var(--md-sys-color-on-surface-variant);
+}
+body.controller-calendars .pagination li a:hover { background-image: var(--nm-state-hover); }
+body.controller-calendars .pagination li a::before {
+  content: '';
+  display: block;
+  block-size: 100%;
+  background-color: currentColor;
+  mask: url(../images/chevron-left-idnt.svg) center / 24px no-repeat;
+}
+body.controller-calendars .pagination li.next a::before,
+html[dir="rtl"] body.controller-calendars .pagination li.previous a::before { transform: scaleX(-1); }
+html[dir="rtl"] body.controller-calendars .pagination li.next a::before { transform: none; }
+
 /***** Gantt (gantt.css loads after the theme, hence the `html` prefix) *****/
 /*
  * Geometry is set inline by Redmine: rows every 20px, each with a 16px text line whose top is