v0.21.0 header+inbox UX (#24,#25,#31): rename About→Philosophy, inline-SVG inbox icon, light inbox pass

- #24: header link "About" → "Philosophy" (route/title unchanged).
- #25 icon: replace 📮 emoji with a dependency-free inline-SVG envelope
  in .inbox-trigger; aria-label/title reframed to "Inbox". Badge intact.
- #25 inbox UX (light, no redesign): sharper unread/read distinction
  (accent dot + left bar + tint via tokens), per-row "mark as read"
  affordance that marks-without-navigating, clearer "Mark all read"
  label, and a real empty/caught-up state. New Inbox.css is tokenized
  and written one notch more specific than App.css where it overrides
  (Inbox.css injects before App.css under ESM eval order). Data flow,
  API calls, routing-on-click, and badge behavior preserved.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

frontend/src/components/Inbox.css

@@ -0,0 +1,128 @@
+/* Inbox.css — §15.2 inbox panel refinements (roadmap #25, light pass).
+ *
+ * The base inbox layout/structure lives in App.css (the §15 / Slice 6
+ * block). This sheet is a TOKENIZED polish layer on top of it: it does
+ * NOT re-lay-out the panel, it sharpens the unread/read distinction,
+ * adds the per-row "mark read" affordance + the unread dot, and gives
+ * the empty/loading states real copy and spacing.
+ *
+ * Cascade note: Inbox.jsx is imported by App.jsx (line 6) BEFORE the
+ * App.css import (line 30), so under ESM depth-first evaluation this
+ * sheet is injected FIRST and App.css wins on equal specificity. Any
+ * rule here that must override an App.css value is therefore written
+ * one notch more specific (e.g. `.inbox-list .inbox-row.unread`).
+ * New classes that App.css doesn't define need no such guard.
+ */
+
+/* ===== Unread vs. read distinction ===== */
+
+/* A clear left accent bar + warmer tint on unread; read rows sit calm. */
+.inbox-list .inbox-row {
+  position: relative;
+  border-bottom: 1px solid var(--color-border);
+  transition: background var(--motion-fast) var(--ease-out);
+}
+.inbox-list .inbox-row.unread {
+  background: var(--color-warning-bg-soft, var(--c-warning-bg-soft));
+  box-shadow: inset 3px 0 0 var(--color-accent);
+}
+.inbox-list .inbox-row.read .inbox-summary {
+  color: var(--color-text-muted);
+  font-weight: var(--weight-normal);
+}
+.inbox-list .inbox-row.unread .inbox-summary {
+  color: var(--color-text);
+  font-weight: var(--weight-medium);
+}
+
+/* The dot is a NEW affordance: a filled accent dot for unread, hidden
+ * (but space-reserved) for read so summaries stay column-aligned. */
+.inbox-unread-dot {
+  flex: 0 0 auto;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-pill);
+  background: var(--color-accent);
+}
+.inbox-row.read .inbox-unread-dot {
+  background: transparent;
+}
+
+/* ===== Per-row "mark read" affordance ===== */
+
+/* The row is a flex Link followed by this button; pin the button to the
+ * right edge, revealed on row hover/focus and always visible on touch. */
+.inbox-row {
+  display: flex;
+  align-items: center;
+}
+.inbox-row .inbox-row-link {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+.inbox-row-dismiss {
+  flex: 0 0 auto;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  margin-right: var(--space-5);
+  padding: 0;
+  color: var(--color-text-subtle);
+  background: transparent;
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  opacity: 0;
+  transition:
+    opacity var(--motion-fast) var(--ease-out),
+    color var(--motion-fast) var(--ease-out),
+    background var(--motion-fast) var(--ease-out),
+    border-color var(--motion-fast) var(--ease-out);
+}
+.inbox-row:hover .inbox-row-dismiss,
+.inbox-row:focus-within .inbox-row-dismiss,
+.inbox-row-dismiss:focus-visible {
+  opacity: 1;
+}
+.inbox-row-dismiss:hover {
+  color: var(--color-success-fg);
+  background: var(--color-success-bg);
+  border-color: var(--color-success-bg);
+}
+.inbox-row-dismiss:focus-visible {
+  outline: 2px solid var(--color-focus-ring);
+  outline-offset: 1px;
+}
+/* Coarse pointers (touch) have no hover; keep the affordance discoverable. */
+@media (hover: none) {
+  .inbox-row-dismiss { opacity: 1; }
+}
+
+/* ===== Mark-all-read button ===== */
+.inbox-mark-all {
+  margin-left: auto;
+}
+
+/* ===== Empty / loading states ===== */
+.inbox-state {
+  padding: var(--space-9) var(--space-7);
+  text-align: center;
+}
+.inbox-empty {
+  padding: var(--space-11) var(--space-7);
+  text-align: center;
+}
+.inbox-empty-title {
+  margin: 0 0 var(--space-3);
+  font-size: var(--text-md);
+  font-weight: var(--weight-semibold);
+  color: var(--color-text-strong);
+}
+.inbox-empty .muted {
+  margin: 0;
+  font-size: var(--text-base);
+  line-height: var(--leading-normal);
+  color: var(--color-text-muted);
+}