website is now phone

style/calendar.css

@@ -1,6 +1,6 @@
 /* Calendar tab */
 
-/* ── Two-column layout ─────────────────────────────────────── */
+/* two-column layout */
 .cal-wrap {
     max-width: 95vw; margin: 0 auto;
     padding: 110px 24px 40px;
@@ -10,7 +10,7 @@
 .cal-main { flex: 1; min-width: 0; }
 .cal-sidebar { width: 300px; flex-shrink: 0; background: rgba(35,35,41,0.7); border: 1px solid rgba(251,196,204,0.25); border-radius: 12px; padding: 18px; }
 
-/* ── Month nav ─────────────────────────────────────────────── */
+/* month nav */
 .cal-nav {
     display: flex; align-items: center; justify-content: center;
     gap: 20px; margin-bottom: 18px;
@@ -26,7 +26,7 @@
 }
 .cal-nav button:hover { background: rgba(251,196,204,0.4); }
 
-/* ── Month grid ────────────────────────────────────────────── */
+/* month grid */
 .cal-grid {
     display: grid;
     grid-template-columns: repeat(7, 1fr);
@@ -59,7 +59,7 @@
     margin: 2px 2px 0 0; vertical-align: middle;
 }
 
-/* ── Hover popup ───────────────────────────────────────────── */
+/* hover popup */
 .cal-popup {
     display: none; position: absolute;
     top: 100%; left: 50%; transform: translateX(-50%);
@@ -86,7 +86,7 @@
     font-size: 0.7rem; color: rgba(244,242,245,0.55); margin-top: 2px;
 }
 
-/* ── Sidebar ───────────────────────────────────────────────── */
+/* sidebar */
 .cal-sidebar h3 {
     font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px;
     color: rgba(244,242,245,0.65); margin: 0 0 14px;
@@ -112,3 +112,20 @@
 }
 
 .cal-tz-note { font-size: 0.65rem; color: rgba(244,242,245,0.35); text-align: center; margin-top: 16px; }
+
+/* mobile */
+@media (max-width: 900px) {
+    .cal-wrap {
+        flex-direction: column;
+        padding: 72px 0 20px;
+    }
+    .cal-sidebar { width: auto; }
+    .cal-nav h2 { min-width: 0; font-size: 1.2rem; }
+    .cal-grid { gap: 2px; }
+    .cal-day { min-height: 52px; padding: 3px 4px; }
+    .cal-day .day-dot { width: 7px; height: 7px; }
+}
+
+/* popups on the first/last column open inwards so they don't go off screen */
+.cal-grid > .cal-day:nth-child(7n+1) .cal-popup { left: 0; transform: none; }
+.cal-grid > .cal-day:nth-child(7n) .cal-popup   { left: auto; right: 0; transform: none; }