5.5

New big and small scope sunset and sunrise simulation
New calculations for the day tabs
Added missing icons to simple view
New record popups
Week ahead description popups
Camping profile
Tweak to some of the indoor tems

assets/css/base.css

@@ -16,7 +16,8 @@
      #f5edd6   parchment             page background
      #fffcf2   soft cream            cards, search box, table
      #fdf8ee   warm cream            toolbars, legend, about block
-     #f0e4c4   pale honey            table heading row
+     #f0e4c4   pale honey            table heading row, priority banner
+     #ebdcb4   deep honey            site header bar, footer bar, nav drawer
      #fef3dc   warm hover            buttons on hover
      #fef8ea   row hover             table row on hover
      #fff8e4   "now" row             the currently-active hour
@@ -109,8 +110,14 @@ body {
   justify-content: flex-end;   /* .nav-logo's margin-right:auto splits the row */
   padding: 18px var(--app-pad);
   gap: 28px;
-  background: #f5edd6;
-  border-bottom: 1px solid #e0d0a8;
+  /* Two shades deeper than the parchment page beneath, so the bar reads as
+     chrome rather than as more page — it is the topmost surface, so it sits a
+     step below the table heading row (#f0e4c4) rather than matching it.
+     The shadow is espresso at low alpha, not black, to stay in the warm family.
+     The mobile bar and drawer below repeat these three values. */
+  background: #ebdcb4;
+  border-bottom: 1px solid #c9b08a;
+  box-shadow: 0 3px 8px rgba(30, 18, 8, 0.10);
 }
 
 .utci-topnav a {
@@ -166,8 +173,8 @@ body {
   top: calc(100% - 1px);
   left: 50%;
   margin-top: 0;
-  background: #f5edd6;
-  border: 1px solid #e0d0a8;
+  background: #fffcf2;
+  border: 1px solid #d4c0a0;
   border-radius: 8px;
   box-shadow: 0 8px 24px rgba(100, 70, 20, 0.12);
   display: flex;
@@ -403,6 +410,63 @@ body {
   transform: scale(1.3);
 }
 
+/* Close + Quick Record stack in the strip's top-right corner, Close above
+   Quick Record, rather than running side by side in the row. */
+.event-note-actions {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 4px;
+  flex-shrink: 0;
+  align-self: flex-start;
+  margin: -2px -6px 0 10px;
+}
+
+/* Quick Record — the banner's one action: sends the event showing to the
+   journal (see quickRecord in app.js). Reads as an affordance rather than
+   chrome, so unlike the close pill above it it carries its brass tint
+   standing still. */
+.event-note-record {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  flex-shrink: 0;
+  padding: 4px 9px;
+  border: 1px solid rgba(200, 146, 42, 0.45);
+  border-radius: 999px;
+  background: rgba(200, 146, 42, 0.13);
+  font-family: Manrope, sans-serif;
+  font-size: 10px;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: #8a6414;
+  line-height: 1;
+  cursor: pointer;
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+}
+.event-note-record:hover {
+  background: rgba(200, 146, 42, 0.28);
+  border-color: rgba(200, 146, 42, 0.75);
+  color: #6b4a0c;
+}
+.event-note-record:focus-visible {
+  outline: 2px solid #c8922a;
+  outline-offset: 1px;
+}
+/* On a tinted warning the brass disappears into the hue, so the pill drops
+   to the same neutral darks the rest of the tinted copy uses. */
+.event-note.is-tinted .event-note-record {
+  background: rgba(0, 0, 0, 0.08);
+  border-color: rgba(0, 0, 0, 0.24);
+  color: #3f3222;
+}
+.event-note.is-tinted .event-note-record:hover {
+  background: rgba(0, 0, 0, 0.16);
+  border-color: rgba(0, 0, 0, 0.4);
+  color: #2a1a08;
+}
+
 /* Close control — a small brass "Close ×" pill in the top-right corner. It
    sits at the end of the strip's flex row rather than being absolutely
    positioned, so the dates line can never run underneath it. */
@@ -411,8 +475,6 @@ body {
   align-items: center;
   gap: 4px;
   flex-shrink: 0;
-  align-self: flex-start;
-  margin: -2px -6px 0 2px;   /* pull into the padding so it hugs the corner */
   padding: 3px 7px;
   border: 1px solid transparent;
   border-radius: 999px;
@@ -491,15 +553,26 @@ body {
   .event-note-dates {
     margin-left: 0;       /* no room to right-align on a phone */
   }
-  /* Phone: the cross alone, pushed to the right-hand end of the row and
-     padded out to a ~26px touch target. */
-  .event-note-close {
+  /* Phone: both pills shrink to their icon alone, on a ~26px touch target
+     each, and the stack is pushed to the right-hand end of the row. */
+  .event-note-actions {
     margin: -4px -6px 0 auto;
+    gap: 2px;
+  }
+  .event-note-close {
     padding: 8px;
   }
   .event-note-close-label {
     display: none;
   }
+  /* Same treatment for Quick Record — the notebook glyph alone. It keeps its
+     tint, so it still reads as the button of the two. */
+  .event-note-record {
+    padding: 7px;
+  }
+  .event-note-record-label {
+    display: none;
+  }
 }
 
 /* ── Note attached to the header ─────────────────────────────────────
@@ -679,8 +752,9 @@ body {
     margin: 0;
     padding: 10px 20px;
     height: 72px;
-    background: #f5edd6;
-    border-bottom: 1px solid #e0d0a8;
+    background: #ebdcb4;
+    border-bottom: 1px solid #c9b08a;
+    box-shadow: 0 3px 8px rgba(30, 18, 8, 0.10);
   }
 
   .utci-burger {
@@ -694,8 +768,8 @@ body {
     right: -100%;
     width: 220px;
     height: 100vh;
-    background: #f5edd6;
-    border-left: 1px solid #e0d0a8;
+    background: #ebdcb4;
+    border-left: 1px solid #c9b08a;
     display: flex;
     flex-direction: column;
     align-items: flex-start;