The header knows who is here; my cases; controls that scale with the text

A session link top right on a site with sign-in, and on a page with
pictures the wordmark as its own bar over the strip. A list may be
narrowed to the signed-in person's own records ({user.email}, from the
session), and an attachment follows the list that shows its record.
Form controls are sized in em: the date picker's icon and the file
picker's button scale and take the field's colours.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01GT37Z1Xtfd9pUuQtMTg6Yt

style/main.css

@@ -173,6 +173,61 @@ main.not-found {
   gap: 1rem;
 }
 
+/* Who is here and the way in or out: top right of every page, on a
+   site that has sign-in. */
+.session {
+  position: absolute;
+  top: 1rem;
+  right: 1.5rem;
+  z-index: 5;
+  display: flex;
+  gap: 0.9rem;
+  align-items: baseline;
+  font-size: 0.88rem;
+}
+
+.session a {
+  color: var(--ink);
+  text-decoration: none;
+  border-bottom: 0.06rem solid var(--line);
+}
+
+.session a:hover {
+  color: var(--accent);
+  border-bottom-color: var(--accent);
+}
+
+.session-name {
+  color: var(--ink-dim);
+}
+
+/* A page with pictures: the wordmark is a bar of its own, the strip
+   runs the full width under it, and the question follows. */
+.hero-slides {
+  max-width: none;
+  padding: 0 0 2rem;
+  align-items: stretch;
+  gap: 0;
+}
+
+.hero-bar {
+  display: flex;
+  align-items: center;
+  padding: 0.9rem 1.5rem;
+}
+
+.hero-slides .slideshow {
+  margin-bottom: 2rem;
+}
+
+.hero-slides .hero-copy {
+  width: 100%;
+  max-width: 46rem;
+  margin: 0 auto;
+  padding: 0 1.5rem;
+  box-sizing: border-box;
+}
+
 .wordmark {
   display: inline-flex;
   opacity: 0.85;
@@ -742,7 +797,7 @@ main.not-found {
 
 .feature p {
   color: var(--ink-dim);
-  font-size: 0.95rem;
+  font-size: 0.95em;
 }
 
 .field {
@@ -753,7 +808,7 @@ main.not-found {
 }
 
 .field-label {
-  font-size: 0.85rem;
+  font-size: 0.85em;
   font-weight: 600;
   color: var(--ink-dim);
 }
@@ -763,17 +818,74 @@ main.not-found {
   margin-left: 0.2em;
 }
 
+/* Controls take their size from the text around them (em, not rem):
+   a site that sets its body larger, or a card that sets itself
+   smaller, gets fields, pills and buttons to match, and everything
+   inside a control - the date picker's icon, the file picker's button
+   - scales with the control. */
 input,
 textarea {
   font: inherit;
   color: var(--ink);
   background: var(--paper);
   border: 0.06rem solid var(--line);
-  border-radius: 0.6rem;
-  padding: 0.65rem 0.8rem;
+  border-radius: 0.6em;
+  padding: 0.65em 0.8em;
   width: 100%;
 }
 
+/* The calendar icon at the size of the text it sits beside, and a
+   target worth aiming at. */
+input[type="date"],
+input[type="time"],
+input[type="datetime-local"] {
+  min-height: 2.9em;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator,
+input[type="time"]::-webkit-calendar-picker-indicator,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator {
+  width: 1.35em;
+  height: 1.35em;
+  padding: 0.2em;
+  margin-left: 0.4em;
+  cursor: pointer;
+  opacity: 0.75;
+}
+
+input[type="date"]::-webkit-calendar-picker-indicator:hover,
+input[type="time"]::-webkit-calendar-picker-indicator:hover,
+input[type="datetime-local"]::-webkit-calendar-picker-indicator:hover {
+  opacity: 1;
+}
+
+/* The file picker's own button, in the field's colours rather than
+   the browser's: it follows whatever ink the field has, so it holds
+   on a light field and a dark one alike. */
+input[type="file"] {
+  padding: 0.45em;
+  cursor: pointer;
+}
+
+input[type="file"]::file-selector-button {
+  font: inherit;
+  font-size: 0.85em;
+  font-weight: 600;
+  color: inherit;
+  background: color-mix(in srgb, currentColor 9%, transparent);
+  border: 0.06rem solid color-mix(in srgb, currentColor 28%, transparent);
+  border-radius: 999rem;
+  padding: 0.4em 1em;
+  margin-right: 0.8em;
+  cursor: pointer;
+  transition: border-color 120ms, background 120ms;
+}
+
+input[type="file"]::file-selector-button:hover {
+  background: var(--accent-soft);
+  border-color: var(--accent);
+}
+
 textarea {
   min-height: 5rem;
   resize: vertical;
@@ -1034,14 +1146,14 @@ textarea:focus {
 }
 
 .alt-submit {
-  font-family: var(--sans);
+  font-family: inherit;
   font-weight: 600;
-  font-size: 0.95rem;
+  font-size: 0.95em;
   color: var(--paper);
   background: var(--accent);
   border: none;
-  border-radius: 0.7rem;
-  padding: 0.75rem 1.4rem;
+  border-radius: 0.7em;
+  padding: 0.75em 1.4em;
   cursor: pointer;
   transition: filter 120ms, transform 120ms;
   /* A gateway alternative renders this as an <a> (navigation, no POST);
@@ -1247,13 +1359,13 @@ textarea:focus {
 }
 
 .select-option {
-  font-family: var(--sans);
-  font-size: 0.85rem;
+  font-family: inherit;
+  font-size: 0.85em;
   color: var(--ink);
   background: var(--paper);
   border: 0.06rem solid var(--line);
   border-radius: 999rem;
-  padding: 0.4rem 0.9rem;
+  padding: 0.45em 1em;
   cursor: pointer;
   transition: border-color 120ms, color 120ms, background 120ms;
 }