diff --git a/public/css/styles.css b/public/css/styles.css
index 600d7c0..9fcd979 100644
--- a/public/css/styles.css
+++ b/public/css/styles.css
@@ -223,7 +223,20 @@ textarea.input { resize: vertical; }
 .legend { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-bottom: 0.9rem; }
 .legend-item { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.78rem; color: var(--text-muted); }
 .legend-dot { width: 0.7rem; height: 0.7rem; border-radius: 50%; display: inline-block; }
-.calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
+.calendar { display: flex; flex-direction: column; gap: 6px; }
+.cal-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
+.cal-week { display: flex; flex-direction: column; gap: 3px; }
+.cal-week-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
+
+/* Stay bands: an all-day-event strip above each week's day cells. The strip is
+   a 7-column grid mirroring the days row; bands place themselves via inline
+   grid-column/row (lane) styles from stayBands.js. */
+.cal-week-bands { --band-h: 1.45rem; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px 6px; }
+.cal-band { height: var(--band-h); display: flex; align-items: center; min-width: 0; padding: 0 0.5rem; font-size: 0.72rem; font-weight: 600; color: #334155; background: color-mix(in srgb, var(--chip) 20%, white); border: 1px solid color-mix(in srgb, var(--chip) 45%, white); border-left: 3px solid var(--chip); cursor: pointer; transition: background 0.12s; }
+.cal-band:hover { background: color-mix(in srgb, var(--chip) 32%, white); }
+.cal-band.round-l { border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
+.cal-band.round-r { border-top-right-radius: 999px; border-bottom-right-radius: 999px; }
+.cal-band-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
 .cal-weekday { text-align: center; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-faint); padding-bottom: 0.2rem; }
 .cal-day { min-height: 92px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.35rem; display: flex; flex-direction: column; gap: 0.25rem; }
 .cal-day.clickable { cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; }
@@ -428,7 +441,10 @@ textarea.input { resize: vertical; }
   .trip-header-actions { width: 100%; }
 }
 @media (max-width: 480px) {
-  .calendar-grid { gap: 3px; }
+  .calendar { gap: 3px; }
+  .cal-weekdays, .cal-week-days { gap: 3px; }
+  .cal-week-bands { gap: 2px 3px; --band-h: 1.2rem; }
+  .cal-band { font-size: 0.62rem; padding: 0 0.3rem; }
   .cal-weekday { font-size: 0.6rem; }
   .cal-day { min-height: 60px; padding: 0.2rem; }
 }