From 76068893ee56e2c59dd28373b24f6730d1cb7999 Mon Sep 17 00:00:00 2001
From: Johan Sandoval <jojo.han718@gmail.com>
Date: Wed, 7 Oct 2026 21:02:41 +0000
Subject: [PATCH] Overview calendar: mark today in amber so it can't pass for
 the selected day

Today gets an amber stripe across the top, an amber badge on the date and
an amber edge; the selected day keeps the blue outline and tint.
---
 web/overview.css | 9 ++++++---
 web/overview.js  | 8 ++++++--
 2 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/web/overview.css b/web/overview.css
index 6d8bc64..433d5a8 100644
--- a/web/overview.css
+++ b/web/overview.css
@@ -123,9 +123,12 @@ table.ov-heat td { padding: 0; text-align: center; border: 0; background: none;
 .ov-day-bar { height: 6px; margin-top: 3px; }
 .ov-has-day { cursor: pointer; background: var(--bg-card); border: 1px solid var(--border-color); }
 .ov-has-day:hover, .ov-has-day:focus-visible, .ov-day.ov-selected { border-color: #3498db; box-shadow: 0 0 0 1px #3498db; }
-/* Today: the date number in a filled badge (like a calendar app), so it can't be mistaken for
-   the selected day, which gets the outline and a tint */
-.ov-today .ov-day-num { align-self: flex-start; background: #3498db; color: #fff; font-weight: 700; border-radius: 999px; min-width: 1.6em; padding: 0 0.4em; box-sizing: border-box; text-align: center; line-height: 1.55; }
+/* Today: amber stripe across the top and an amber badge on the date. Blue is kept for the
+   selected day (outline and tint), so the two never look alike, even when today is selected. */
+.ov-day-head { display: flex; align-items: center; gap: 5px; min-width: 0; }
+.ov-today::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #f59e0b; border-radius: 6px 6px 0 0; }
+.ov-today .ov-day-num { margin-top: 2px; background: #f59e0b; color: #1f2937; font-weight: 800; border-radius: 999px; min-width: 1.7em; padding: 0 0.4em; box-sizing: border-box; text-align: center; line-height: 1.6; }
+.ov-day.ov-today:not(.ov-selected):not(:hover) { border-color: rgba(245,158,11,0.6); }
 .ov-day.ov-selected { background: rgba(52,152,219,0.16); }
 
 
diff --git a/web/overview.js b/web/overview.js
index da0b8be..21930a8 100644
--- a/web/overview.js
+++ b/web/overview.js
@@ -484,8 +484,12 @@
             for (let d = 1; d <= dim; d++) {
                 const date = new Date(m.getFullYear(), m.getMonth(), d);
                 const info = days[dayKey(date)];
-                const cell = el('div', 'ov-day' + (date.getTime() === today.getTime() ? ' ov-today' : '') + (date.getDay() % 6 === 0 ? ' ov-weekend' : ''));
-                cell.appendChild(el('span', 'ov-day-num', String(d)));
+                const isToday = date.getTime() === today.getTime();
+                const cell = el('div', 'ov-day' + (isToday ? ' ov-today' : '') + (date.getDay() % 6 === 0 ? ' ov-weekend' : ''));
+                const head = el('div', 'ov-day-head');
+                head.appendChild(el('span', 'ov-day-num', String(d)));
+                if (isToday) cell.title = 'Today';
+                cell.appendChild(head);
                 if (info) {
                     cell.classList.add('ov-has-day');
                     const c3 = { todo: 0, doing: 0, done: 0 };