@wtfalch/email 0.4.0 → 0.5.0

package/dist/mailbox/mail.css

@@ -1,8 +1,22 @@
 /* The mail client's own layout. Everything visual comes from
    `@wtfalch/design`'s tokens; nothing here defines a colour, a radius or a
-   space of its own. Import it after the design stylesheet. */
+   space of its own. Import it after the design stylesheet.
+
+   Two rules this file is written to, both from design's CLAUDE.md and both
+   learned the hard way there:
+
+   - A token, never a value. No hex, no pixel spacing, no font size. The one
+     exception is `--rail`, declared below: it is a 3px optical detail, like
+     the system's own `--nudge`, and a spacing step it is not.
+   - Nothing drawn over a surface names the colour it sits on. The row's
+     hover and selection are `currentColor` at low alpha, so they are a step
+     from whatever is behind them in whatever theme is on. */
 
 .mail {
+  /* Declared here rather than inline: the unread bar and the row's padding
+     have to agree, and an optical width is not a spacing step. */
+  --rail: 3px;
+
   display: flex;
   flex-direction: column;
   height: 100%;
@@ -12,29 +26,196 @@
   font-size: var(--text-sm);
 }
 
+/* ---------------------------------------------------------------- the bar */
+
 .mail-bar {
-  display: flex;
+  display: grid;
+  /* Three tracks, and the middle one centred in the *window* rather than in
+     the space the other two leave over. A flex bar puts the search wherever
+     the account name's length happens to leave it, which moves every time
+     somebody with a longer address signs in. */
+  grid-template-columns: 1fr minmax(0, 34rem) 1fr;
   align-items: center;
   gap: var(--space-3);
-  padding: var(--space-3);
+  padding: var(--space-2) var(--space-3);
   border-bottom: var(--border-width) solid var(--border);
+  background: var(--panel);
   flex: none;
 }
 
+.mail-bar-start {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.mail-bar-end {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.mail-wordmark {
+  font-size: var(--text-sm);
+  font-weight: var(--weight-strong);
+  letter-spacing: 0.01em;
+  white-space: nowrap;
+}
+
+/* The search reads as a field and behaves as one, but it is quiet: it is the
+   thing you reach for, not the thing you look at. It used to be a full-width
+   input, which made the most prominent object on the screen the one nobody
+   uses until they need it. */
 .mail-search {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  min-width: 0;
+  padding: 0 var(--space-2);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-pill);
+  background: var(--control);
+  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
+}
+
+.mail-search:focus-within {
+  border-color: var(--accent);
+  box-shadow: var(--focus-ring);
+}
+
+.mail-search-icon {
+  flex: none;
+  color: var(--muted);
+}
+
+.mail-search-field {
   flex: 1 1 auto;
   min-width: 0;
+  padding: var(--space-2) 0;
+  border: none;
+  background: transparent;
+  color: var(--text);
+  font: inherit;
+  font-size: var(--text-sm);
+}
+
+.mail-search-field:focus {
+  outline: none;
+}
+
+/* Safari draws its own cross inside a `type=search`, in its own colours and
+   at its own size, beside the one this draws. */
+.mail-search-field::-webkit-search-cancel-button {
+  appearance: none;
 }
+
+.mail-search-key {
+  flex: none;
+  padding: 0 var(--space-1);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  color: var(--muted);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  line-height: 1.6;
+}
+
+.mail-search-clear {
+  display: inline-flex;
+  align-items: center;
+  flex: none;
+  padding: var(--space-1);
+  border: none;
+  border-radius: var(--radius-pill);
+  background: transparent;
+  color: var(--muted);
+  cursor: pointer;
+}
+
+.mail-search-clear:hover {
+  color: var(--text);
+}
+
+.mail-search-clear:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+
+/* The word goes when the bar gets tight; the pen stays, and the button keeps
+   its accessible name from the icon's title. */
+.mail-compose-word {
+  white-space: nowrap;
+}
+
 .mail-panes {
+  display: flex;
   flex: 1 1 auto;
   min-height: 0;
+  /* A flex item's `min-width` is `auto`, which means "no smaller than your
+     content" -- and this one's content is a list of rows full of `nowrap`
+     text. Without the override the list sized itself to the longest subject
+     in the mailbox and pushed the whole page wider than the window, which is
+     a horizontal scrollbar on every phone and the one layout rule with no
+     exceptions. It did not show on the wide layout because `SplitPane` gives
+     both panes an explicit width. */
+  min-width: 0;
+}
+
+.mail-panes > * {
+  min-width: 0;
+}
+
+.mail-panes-split {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+/* What just happened. Pinned to the bottom corner, out of the way of the
+   panes, and gone in four seconds. */
+.mail-note {
+  position: fixed;
+  left: 50%;
+  bottom: var(--space-4);
+  z-index: 40;
+  padding: var(--space-2) var(--space-4);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-pill);
+  background: var(--panel);
+  box-shadow: var(--shadow-3);
+  color: var(--text);
+  font-size: var(--text-xs);
+  /* Out of the layout and out of the hit-testing when there is nothing to
+     say, but still in the accessibility tree, which is the point of it
+     always being rendered. */
+  opacity: 0;
+  transform: translate(-50%, var(--space-2));
+  pointer-events: none;
+  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
+}
+
+.mail-note.is-shown {
+  opacity: 1;
+  transform: translate(-50%, 0);
 }
 
 /* ---------------------------------------------------------------- mailboxes */
+
 .mailboxes {
   height: 100%;
+  padding: var(--space-2);
   background: var(--panel);
+  border-right: var(--border-width) solid var(--border);
+}
+
+.mailboxes.is-rail {
+  flex: none;
+  width: calc(var(--space-10) + var(--space-4));
+  padding: var(--space-2) var(--space-1);
 }
+
 .mailboxes-quiet,
 .threads-quiet,
 .message-quiet {
@@ -49,8 +230,28 @@
   margin: 0;
   padding: 0;
 }
-.mailboxes-list .mailboxes-list {
-  padding-left: var(--space-3);
+
+.mailboxes-heading {
+  margin: var(--space-4) 0 var(--space-1);
+  padding: 0 var(--space-2);
+  color: var(--muted);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-strong);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+/* On the rail the heading has no room for its word, so it becomes the line
+   the word was there to draw. */
+.is-rail .mailboxes-heading {
+  margin: var(--space-2) var(--space-2);
+  padding: 0;
+}
+
+.is-rail .mailboxes-heading .rule {
+  display: block;
+  height: var(--border-width);
+  background: var(--border);
 }
 
 .mailbox {
@@ -58,29 +259,45 @@
   align-items: center;
   gap: var(--space-2);
   width: 100%;
-  padding: var(--space-2) var(--space-3);
-  padding-left: calc(var(--space-3) + var(--depth, 0) * var(--space-3));
+  padding: var(--space-2);
+  padding-left: calc(var(--space-2) + var(--depth, 0) * var(--space-4));
   border: none;
+  border-radius: var(--radius);
   background: transparent;
   color: var(--muted);
   font: inherit;
   font-size: var(--text-sm);
   text-align: left;
   cursor: pointer;
+  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
+}
+
+.is-rail .mailbox {
+  justify-content: center;
+  position: relative;
+  padding: var(--space-2);
 }
 
 .mailbox:hover {
-  background: var(--panel-2);
+  background: color-mix(in srgb, currentColor 8%, transparent);
   color: var(--text);
 }
+
 .mailbox:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
+
 .mailbox.on {
-  background: var(--panel-2);
+  background: color-mix(in srgb, var(--accent) 14%, transparent);
   color: var(--text);
+  font-weight: var(--weight-strong);
+}
+
+.mailbox.on .mailbox-icon {
+  color: var(--accent);
 }
+
 /* Unread is weight, so it survives a theme, a projector and a reader who
    cannot tell the colours apart. */
 .mailbox.unread {
@@ -88,11 +305,19 @@
   font-weight: var(--weight-strong);
 }
 
+.mailbox.is-skeleton {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  cursor: default;
+}
+
 .mailbox-icon {
+  display: inline-flex;
   flex: none;
-  width: var(--space-4);
-  height: var(--space-4);
+  color: var(--muted);
 }
+
 .mailbox-name {
   flex: 1 1 auto;
   min-width: 0;
@@ -100,39 +325,140 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+/* A fixed slot, reserved whether or not there is a number in it: a count
+   arriving must not re-measure the name beside it. That is design's
+   "content jumping" rule, and a mailbox that goes from 0 to 1 unread is the
+   commonest way to see it. */
 .mailbox-count {
   flex: none;
+  min-width: var(--space-5);
+  text-align: right;
+  color: var(--muted);
   font-size: var(--text-2xs);
   font-variant-numeric: tabular-nums;
 }
 
+.mailbox.unread .mailbox-count {
+  color: var(--accent);
+}
+
+/* A folder gets a dot where a role gets a glyph, so the names still line up
+   without a column of identical folder icons carrying no information. */
+.mailbox-pip {
+  display: block;
+  width: var(--space-1);
+  height: var(--space-1);
+  border-radius: var(--radius-pill);
+  background: currentColor;
+  opacity: 0.45;
+}
+
+/* On the rail there is no room for a number, so unread becomes a dot on the
+   corner of the glyph. */
+.mailbox-pip.is-unread {
+  position: absolute;
+  top: var(--space-1);
+  right: var(--space-1);
+  background: var(--accent);
+  opacity: 1;
+}
+
 /* ------------------------------------------------------------------ threads */
+
 .threads {
   display: flex;
   flex-direction: column;
+  flex: 1 1 auto;
   height: 100%;
   min-height: 0;
+  /* See `.mail-panes`. */
+  min-width: 0;
   background: var(--panel);
+  border-right: var(--border-width) solid var(--border);
+}
+
+.threads-head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: var(--space-2);
+  flex: none;
+  padding: var(--space-3) var(--space-4);
+  border-bottom: var(--border-width) solid var(--border);
+}
+
+.threads-title {
+  margin: 0;
+  font-size: var(--text-sm);
+  font-weight: var(--weight-strong);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.threads-total {
+  flex: none;
+  color: var(--muted);
+  font-size: var(--text-2xs);
+  font-variant-numeric: tabular-nums;
 }
+
 .threads-scroll {
   flex: 1 1 auto;
+  min-height: 0;
 }
+
+.threads-empty {
+  display: grid;
+  place-items: center;
+  flex: 1 1 auto;
+  padding: var(--space-6);
+}
+
 .threads-list {
+  display: flex;
+  flex-direction: column;
+}
+
+.threads-rows {
   list-style: none;
   margin: 0;
   padding: 0;
 }
+
 .threads-pager {
   flex: none;
   padding: 0 var(--space-3);
   border-top: var(--border-width) solid var(--border);
 }
 
+/* The day heading, pinned while its own rows are on screen. Scrolling a long
+   mailbox with no landmarks is how you lose your place. */
+.threads-day {
+  position: sticky;
+  top: 0;
+  z-index: 1;
+  margin: 0;
+  padding: var(--space-2) var(--space-4);
+  /* Opaque, because rows scroll under it. This is the one place a surface
+     token is named directly rather than mixed: a translucent sticky heading
+     over moving text is unreadable at any alpha. */
+  background: var(--panel);
+  border-bottom: var(--border-width) solid var(--border);
+  color: var(--muted);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-strong);
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
 .thread-row {
-  display: grid;
-  gap: var(--space-1);
+  display: flex;
+  align-items: stretch;
+  gap: 0;
   width: 100%;
-  padding: var(--space-3);
+  padding: 0;
   border: none;
   border-bottom: var(--border-width) solid var(--border);
   background: transparent;
@@ -140,23 +466,59 @@
   font: inherit;
   text-align: left;
   cursor: pointer;
+  transition: background var(--dur-fast) var(--ease);
 }
 
 .thread-row:hover {
-  background: var(--panel-2);
+  background: color-mix(in srgb, currentColor 6%, transparent);
 }
+
 .thread-row:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
+  /* Above the sticky day heading, or the ring is clipped by it -- WCAG 2.2's
+     "focus not obscured", and the heading is exactly the persistent UI the
+     criterion is about. */
+  position: relative;
+  z-index: 2;
 }
+
 .thread-row.on {
-  background: var(--panel-2);
+  background: color-mix(in srgb, var(--accent) 12%, transparent);
 }
+
 .thread-row.unread {
   color: var(--text);
 }
-.thread-row.unread .thread-subject-text {
-  font-weight: var(--weight-strong);
+
+.thread-row.is-skeleton {
+  cursor: default;
+}
+
+/* The unread bar, in the gutter rather than in the text: a read row and an
+   unread row have to start their subjects at the same x, and the bullet that
+   used to sit inline moved every unread subject two characters right. */
+.thread-rail {
+  flex: none;
+  width: var(--rail);
+  background: transparent;
+}
+
+.thread-row.unread .thread-rail {
+  background: var(--accent);
+}
+
+.thread-row.on .thread-rail {
+  background: var(--accent);
+}
+
+.thread-main {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-1);
+  flex: 1 1 auto;
+  min-width: 0;
+  padding: var(--space-3) var(--space-4) var(--space-3) calc(var(--space-4) - var(--rail));
 }
 
 .thread-top {
@@ -165,85 +527,228 @@
   gap: var(--space-2);
   min-width: 0;
 }
+
 .thread-who {
   flex: 1 1 auto;
   min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--text-sm);
 }
-.thread-nobody {
+
+.thread-row.unread .thread-who {
+  font-weight: var(--weight-strong);
+}
+
+.thread-marks {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: none;
   color: var(--muted);
-  font-style: italic;
 }
+
+.thread-mark.is-flag {
+  color: var(--warn);
+}
+
+.thread-count {
+  padding: 0 var(--space-1);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-pill);
+  font-size: var(--text-2xs);
+  font-variant-numeric: tabular-nums;
+  line-height: 1.5;
+}
+
+.thread-draft {
+  color: var(--warn);
+  font-size: var(--text-2xs);
+  font-weight: var(--weight-strong);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
 .thread-when {
   flex: none;
-  font-size: var(--text-2xs);
   color: var(--muted);
+  font-size: var(--text-2xs);
   font-variant-numeric: tabular-nums;
 }
 
-.thread-subject {
+/* Subject and preview share a line, which is the whole density argument:
+   the subject takes what it needs and the preview takes the rest. */
+.thread-bottom {
   display: flex;
   align-items: baseline;
   gap: var(--space-2);
   min-width: 0;
+  font-size: var(--text-xs);
 }
-.thread-dot {
-  flex: none;
-  color: var(--accent);
-}
-.thread-subject-text {
-  flex: 1 1 auto;
+
+/* The subject takes what it needs and the preview takes the rest, which is
+   the whole reason they share a line. Both were `flex-basis: auto`, so the
+   two shrank in proportion to their content and a nine-word preview
+   truncated a two-word subject to "Engine sc…" with half the row empty.
+   The preview's basis is zero: it contributes nothing to the line's natural
+   width and only ever grows into what is left. */
+.thread-subject {
+  flex: 0 1 auto;
+  /* Not the whole line either -- a forwarded subject is a paragraph, and one
+     that eats the row leaves no evidence of what the message says. */
+  max-width: 62%;
   min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  color: var(--text);
 }
-.thread-count {
-  flex: none;
-  padding: 0 var(--space-1);
-  border: var(--border-width) solid var(--border);
-  border-radius: var(--radius-pill);
-  font-size: var(--text-2xs);
+
+.thread-row:not(.unread) .thread-subject {
   color: var(--muted);
 }
 
+.thread-row.unread .thread-subject {
+  font-weight: var(--weight-strong);
+}
+
+/* No opacity. `--muted` is the measured token -- design holds it to 4.5:1
+   against every theme -- and knocking it back to 85% put the preview under
+   the threshold on ten rows in light and one in dark. Measured with axe, not
+   judged by eye, which is the rule. */
 .thread-preview {
-  color: var(--muted);
-  font-size: var(--text-xs);
+  flex: 1 1 0;
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
-}
-
-.thread-marks {
-  display: flex;
-  gap: var(--space-1);
-  flex-wrap: wrap;
+  color: var(--muted);
 }
 
 /* --------------------------------------------------------------- one thread */
+
 .thread {
   display: flex;
   flex-direction: column;
   height: 100%;
   min-height: 0;
+  min-width: 0;
+  flex: 1 1 auto;
+  background: var(--bg);
+}
+
+.thread.is-empty {
+  display: grid;
+  place-items: center;
+  padding: var(--space-6);
+}
+
+.thread-hint {
+  display: block;
+  margin-top: var(--space-2);
+  color: var(--muted);
+  font-size: var(--text-xs);
 }
+
+.thread-hint kbd,
+.keys kbd,
+.composer-hint kbd {
+  display: inline-block;
+  min-width: var(--space-5);
+  padding: 0 var(--space-1);
+  border: var(--border-width) solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--panel-2);
+  color: var(--text);
+  font-family: var(--font-mono);
+  font-size: var(--text-2xs);
+  text-align: center;
+}
+
+/* Pinned, so archiving the twelfth message of a thread does not mean
+   scrolling back up to find the button. */
 .thread-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: var(--space-3);
   flex: none;
-  padding: var(--space-4);
+  padding: var(--space-3) var(--space-4);
   border-bottom: var(--border-width) solid var(--border);
+  background: var(--panel);
 }
+
+.thread-headline {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-2);
+  min-width: 0;
+}
+
+.thread-heading {
+  min-width: 0;
+}
+
 .thread-title {
   margin: 0;
   font-size: var(--text-lg);
   font-weight: var(--weight-strong);
+  /* Two lines, then an ellipsis: a forwarded subject can be a paragraph, and
+     a head that grows to four lines pushes the message off the screen. */
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
 }
+
 .thread-meta {
   margin: var(--space-1) 0 0;
   color: var(--muted);
   font-size: var(--text-xs);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.thread-meta-sep {
+  margin: 0 var(--space-1);
+}
+
+.thread-tools {
+  display: flex;
+  align-items: center;
+  gap: var(--space-1);
+  flex: none;
+}
+
+.thread-tool {
+  display: inline-flex;
+}
+
+.thread-tools-rule {
+  width: var(--border-width);
+  align-self: stretch;
+  margin: 0 var(--space-1);
+  background: var(--border);
 }
+
+.thread-tools .is-flagged {
+  color: var(--warn);
+}
+
 .thread-body {
   flex: 1 1 auto;
+  min-height: 0;
+}
+
+.thread-foot {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+  padding: var(--space-4);
+  border-top: var(--border-width) solid var(--border);
 }
 
 .messages {
@@ -255,6 +760,11 @@
 .message {
   border-bottom: var(--border-width) solid var(--border);
 }
+
+.message.open {
+  background: var(--panel);
+}
+
 .message-head {
   display: flex;
   align-items: center;
@@ -281,23 +791,55 @@
   outline: none;
   box-shadow: var(--focus-ring);
 }
-.message-when {
+
+/* Collapsed, the preview is the only thing that says whether this is the
+   message being looked for -- but the sender outranks it, so the basis is
+   zero and the preview only ever takes what the name has left. At `auto` the
+   two shrank in proportion and a four-word preview cut "Mary Somerville"
+   down to "M..", which is the same bug the list's subject had. */
+.message-peek {
+  flex: 1 1 0;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  color: var(--muted);
+  font-size: var(--text-xs);
+}
+
+.message-aside {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
   flex: none;
   margin-left: auto;
   color: var(--muted);
+}
+
+.message-when {
+  color: var(--muted);
   font-size: var(--text-2xs);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
 }
+
 .message-nobody {
   color: var(--muted);
   font-style: italic;
 }
 
 .message-body {
-  padding: 0 var(--space-4) var(--space-4);
+  /* The measure. Prose past about 80 characters a line is measurably slower
+     to read, and a maximised window on a wide monitor gives a message pane
+     160. The body is capped and the chrome around it is not. */
+  max-width: 78ch;
+  padding: 0 var(--space-4) var(--space-5);
 }
+
 .message-lines {
   margin-bottom: var(--space-3);
 }
+
 .message-line {
   margin: 0;
   color: var(--muted);
@@ -305,6 +847,7 @@
   display: flex;
   gap: var(--space-2);
 }
+
 .message-line-label {
   min-width: var(--space-6);
 }
@@ -360,30 +903,35 @@
   font: inherit;
   font-size: var(--text-xs);
   cursor: pointer;
+  transition: border-color var(--dur-fast) var(--ease);
 }
 
 .attachment:hover:not(:disabled) {
   border-color: var(--accent);
 }
+
 .attachment:focus-visible {
   outline: none;
   box-shadow: var(--focus-ring);
 }
+
 .attachment:disabled {
   cursor: default;
   color: var(--muted);
 }
+
 .attachment-icon {
   flex: none;
-  width: var(--space-4);
-  height: var(--space-4);
   color: var(--muted);
 }
+
 .attachment-size {
   color: var(--muted);
+  font-variant-numeric: tabular-nums;
 }
 
 /* ----------------------------------------------------------------- composer */
+
 .composer {
   display: grid;
   gap: var(--space-3);
@@ -426,11 +974,13 @@
   display: grid;
   gap: var(--space-1);
 }
+
 .composer-files li {
   display: flex;
   align-items: center;
   gap: var(--space-2);
 }
+
 .composer-file {
   font-size: var(--text-xs);
 }
@@ -439,13 +989,109 @@
   display: flex;
   align-items: center;
   gap: var(--space-3);
+  padding-top: var(--space-2);
+  border-top: var(--border-width) solid var(--border);
 }
+
 .composer-hint {
+  margin-left: auto;
   color: var(--muted);
   font-size: var(--text-xs);
 }
+
+.composer-hint kbd + kbd {
+  margin-left: var(--space-1);
+}
+
 .composer-error {
   margin: 0;
   color: var(--bad);
   font-size: var(--text-xs);
 }
+
+/* ---------------------------------------------------------------- shortcuts */
+
+.keys {
+  display: grid;
+  gap: var(--space-2);
+  margin: 0;
+}
+
+.keys-row {
+  display: grid;
+  grid-template-columns: 8rem 1fr;
+  align-items: baseline;
+  gap: var(--space-3);
+}
+
+.keys dt {
+  margin: 0;
+}
+
+.keys dd {
+  margin: 0;
+  color: var(--muted);
+  font-size: var(--text-xs);
+}
+
+/* --------------------------------------------------------------- the widths */
+
+/* One column. The list and the message are the same space, so the shell
+   swaps them; what is left here is the chrome that has to give way. */
+.mail.is-narrow .threads,
+.mail.is-narrow .thread {
+  border-right: none;
+}
+
+.mail.is-narrow .mail-bar {
+  grid-template-columns: auto 1fr auto;
+}
+
+/* The signed-in address goes, and the disc stays. The account slot is the
+   application's -- `Mail` is handed it as a node and cannot re-render it
+   narrower -- but the width is the shell's problem, so the shell hides the
+   text. Reaching into `Identity`'s classes is the cost of that split; it is
+   a display rule and the name stays in the accessibility tree. */
+.mail.is-narrow .mail-bar-end .ident-text,
+.mail.is-medium .mail-bar-end .ident-text {
+  display: none;
+}
+
+.mail.is-narrow .mail-compose-word {
+  /* The pen alone. The button keeps its name from the `aria-label` the icon
+     is given, so this is a visual change and not a semantic one. */
+  display: none;
+}
+
+.mail.is-narrow .thread-head {
+  /* The toolbar wraps under the subject rather than squeezing it to nothing:
+     six icon buttons and a two-line subject do not fit on 390px. */
+  flex-wrap: wrap;
+}
+
+/* One column has room for a name and a date, and not for a preview as well.
+   The preview is the thing that goes: the name and the time are what a
+   collapsed row is for. */
+.mail.is-narrow .message-peek {
+  display: none;
+}
+
+.mail.is-narrow .message-body {
+  padding-inline: var(--space-3);
+}
+
+.mail.is-narrow .thread-main {
+  padding-inline: var(--space-3) var(--space-3);
+}
+
+@media (max-width: 520px) {
+  .mail-bar {
+    gap: var(--space-2);
+    padding: var(--space-2);
+  }
+
+  .threads-head,
+  .thread-head {
+    padding-inline: var(--space-3);
+  }
+}