@kurtbruns/kestrel 1.12.0 → 1.14.0

package/dist/public/dashboard/styles.css

@@ -88,6 +88,9 @@
   /* Code surface — inline `code` chip and the fenced-block band. A hair off the editor well
      (--syntax-bg), lighter than the neutral --chip, so code reads as code without a heavy box. */
   --syntax-code-bg: #f2f2f4;
+  /* A doc's inline `code`: a maroon ink on the --chip surface, so a name in a sentence reads
+     apart from the prose around it and from a link's blue. */
+  --code-inline-fg: #9b2c2c;
   /* HTTP method badges in the API reference (DESIGN §8). A self-contained palette like
      --syntax-*: verb colors are a naming convention, not feedback or lifecycle, so they
      borrow no semantic scale. The badge tints each over a wash of itself (.api-method). */
@@ -161,6 +164,7 @@
     --syntax-emphasis: #f472b6;
     --syntax-quote: #f0a86a;
     --syntax-code-bg: #26262b;
+    --code-inline-fg: #f07a7a;
     --method-get: #4ade80;
     --method-post: #60a5fa;
     --method-put: #fbbf24;
@@ -1854,8 +1858,10 @@ td a:hover {
 .dash-drafts {
   table-layout: fixed;
 }
+/* Wide enough for the longest "edited <date>", a two-digit day and hour included, with the
+   cell's padding: the fixed layout clips anything wider rather than growing the column. */
 .dash-drafts td.edited {
-  width: 11.5em;
+  width: 15em;
   white-space: nowrap;
 }
 @media (min-width: 721px) {
@@ -1867,13 +1873,15 @@ td a:hover {
 .list-table .c-act {
   width: 56px;
 }
-/* Subscribers: how each joined ("Imported · Sendy, single opt-in"), which may wrap to two
-   lines; the table takes a wider floor so the email column keeps room beside it. */
-.list-table .c-how {
-  width: 152px;
-}
+/* Subscribers: a floor that keeps the email column about 250px beside its two others. With
+   only Status and Joined beside an address, which rarely needs more than half the row, fixed
+   widths left one wide gap before them; a share of the row each spreads the space evenly. */
 .list-table.subs-table {
-  min-width: 680px;
+  min-width: 610px;
+}
+.list-table.subs-table .c-status,
+.list-table.subs-table .c-date {
+  width: 24%;
 }
 
 .dash-section table {
@@ -1934,20 +1942,143 @@ th.num .th-sort {
   cursor: default;
 }
 
-/* API reference: query-param table inside a route card */
-.api-query {
+/* A route's or an object's sections (query, body, returns, refusals, fields) as Stripe's and
+   Mux's references set theirs: a heading over a rule, then unboxed rows, each with the name,
+   its type, and Required on one line and what it means under it, so a long name never
+   squeezes its description. A name breaks only where its words join (the <wbr> the page puts
+   after each _ . /). */
+.block.api-sec {
+  margin-top: 22px;
+}
+.api-sec > .block-head {
   margin: 0;
+  padding-bottom: 8px;
+  border-bottom: 1px solid var(--line-soft);
 }
-.api-query td {
-  padding: 5px 10px;
+.api-sec > .block-head .block-label {
+  font-size: 15px;
+  font-weight: 600;
+  color: var(--fg);
+}
+.api-sec-meta {
+  margin-left: 2px;
+  font: 400 12px var(--mono);
+  color: var(--muted);
+}
+/* Rules divide rows; the last row in a section has none under it. */
+.api-row,
+.api-lrow {
+  padding: 11px 0;
+  border-bottom: 1px solid var(--line);
+}
+.api-row:last-child,
+.api-lrow:last-child {
+  border-bottom: 0;
+}
+.api-row-head {
+  display: flex;
+  align-items: baseline;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+code.api-row-name {
   font-size: 13px;
-  vertical-align: top;
+  font-weight: 600;
+  overflow-wrap: break-word;
 }
-.api-query td:first-child {
-  white-space: nowrap;
-  width: 1%;
+.api-row-type {
+  font: 12px var(--mono);
+  color: var(--muted);
+}
+/* A type that names an object links to it, and reads as a link. */
+.api-row-type a {
+  color: var(--fg);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.api-row-desc {
+  margin-top: 3px;
+  font-size: 13.5px;
+}
+/* The refusals and the statuses are a ledger: the status in a column of its own, tinted by
+   its class, so a reader scans by status. */
+.api-lrow {
+  display: grid;
+  grid-template-columns: 44px minmax(0, 1fr);
+  gap: 6px;
+}
+.api-st {
+  font: 600 12.5px / 20px var(--mono);
+  color: var(--muted);
+}
+.api-st-4xx {
+  color: var(--warn-fg);
+}
+.api-st-5xx {
+  color: var(--danger-fg);
+}
+.api-st-2xx {
+  color: var(--ok-fg);
+}
+.api-with {
+  margin-top: 2px;
+  font-size: 12px;
+  color: var(--muted);
+}
+/* A status's name is words, not a code. */
+.api-statuses code.api-row-name {
+  font-family: inherit;
+}
+/* A value's short cells beside its name (a condition kind's severity and fields), each led by
+   its column's name, and the label of a later long line ("Remedy:"). */
+.api-row-meta {
+  font-size: 12.5px;
+  color: var(--muted);
+}
+.api-row-key {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+/* What every route shares, described once ahead of the routes: concept prose, an object's
+   description, an enum's values under a field's line, and the refusal table's next moves. */
+/* The reference's paragraphs, each with space below it, as a doc page's are. */
+.api-prose {
+  margin: 0 0 10px;
+  font-size: 14px;
+}
+/* A list in the reference's prose (the status ranges under Requests), set like its paragraphs. */
+.prose-list {
+  padding-left: 20px;
+}
+.prose-list li {
+  margin: 6px 0;
+}
+.api-values {
+  margin: 4px 0 0;
+  padding-left: 16px;
+}
+.api-values li {
+  margin: 2px 0;
+}
+/* The name of a group an enum's values fall into, over its bullets. */
+.api-values-group {
+  margin: 8px 0 0;
+  font-size: 12.5px;
+  font-weight: 600;
+  color: var(--muted);
+}
+.api-returns {
+  margin: 4px 0 6px;
+  font-size: 13.5px;
+}
+/* A refusal's next move, under what it means: quieter, the step a client takes from it. */
+.api-move-next {
+  display: block;
+  margin-top: 2px;
+  font-size: 12.5px;
+  color: var(--muted);
 }
-
 /* editor header */
 .editor-head {
   display: flex;
@@ -2075,6 +2206,10 @@ body.web-mode .content {
   gap: 8px;
   flex-wrap: wrap;
 }
+/* Who acted on the send, a line under when it was sent (SPEC §11). */
+.rec-by {
+  margin-top: 2px;
+}
 /* Names the living layer of the record: the outcome tiles below keep moving as receipts
    arrive, while the audience at fire and the published post are fixed (SPEC §8). */
 .rec-tiles-cap {
@@ -2242,7 +2377,7 @@ body.web-mode .content {
   font-size: 22px;
   letter-spacing: -0.01em;
 }
-/* The derived-phase pill (progressing / retrying / backing-off / needs-attention /
+/* The derived-phase pill (progressing / retrying / backing_off / needs_attention /
    settling / …). Tones reuse the status + semantic palettes so a phase reads the same
    hue as its badge elsewhere. A plain label, so the default cursor (DESIGN §11). */
 .phase-pill {
@@ -2801,6 +2936,14 @@ body.web-mode .content {
    each state too, so the cue survives a reader who can't tell the dot's color. The
    "unsaved" cue reads the same amber as the shared save bar so both save models feel
    like one app. :empty (locked posts, which can't autosave) collapses it out. */
+/* A scheduled send never tested, said quietly beside the control that settles it (SPEC §8). */
+.test-hint {
+  font-size: 13px;
+  color: var(--muted);
+}
+.test-row {
+  gap: 1rem;
+}
 .save-status {
   display: inline-flex;
   align-items: center;
@@ -3328,6 +3471,13 @@ textarea.is-invalid {
   font-size: 12.5px;
   color: var(--status-scheduled-fg);
 }
+/* Who scheduled the send and who last moved it (SPEC §11), under the time, in the banner's
+   violet: a fact about the send, not a note asking for a look. */
+.sched-by {
+  margin-top: 4px;
+  font-size: 12.5px;
+  color: var(--status-scheduled-fg);
+}
 /* The Email only box under a dialog's time: the label, then its helper beneath. */
 .listing-check {
   display: flex;
@@ -3782,52 +3932,28 @@ textarea.is-invalid {
 .doc code {
   font-family: var(--mono);
   font-size: 13px;
-  background: var(--bg);
+  color: var(--code-inline-fg);
+  background: var(--chip);
   border: 1px solid var(--line);
   border-radius: 4px;
   padding: 1px 5px;
 }
-.doc pre {
-  position: relative;
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 14px 16px;
-  overflow-x: auto;
-  line-height: 1.5;
+/* Bold in a doc sits between semibold and bold, the weight of its headings: the browser's
+   `bolder` makes it 700, which outweighs the headings (650) on the system font. */
+.doc strong {
+  font-weight: 650;
+}
+/* Code in a bold lead-in keeps its own weight: the chip already sets it apart. */
+.doc strong code {
+  font-weight: normal;
 }
+/* The inline-code chip above stays off the code in a block. */
 .doc pre code {
+  color: inherit;
   background: none;
   border: 0;
   padding: 0;
-}
-/* Copy button on code blocks — revealed on hover (always shown on touch). */
-.code-copy {
-  position: absolute;
-  top: 8px;
-  right: 8px;
-  font: 11px var(--mono);
-  padding: 3px 8px;
-  border: 1px solid var(--line);
-  border-radius: 5px;
-  background: var(--card);
-  color: var(--muted);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.12s;
-}
-.doc pre:hover .code-copy,
-.code-copy:focus-visible {
-  opacity: 1;
-}
-.code-copy:hover {
-  color: var(--fg);
-  border-color: var(--muted);
-}
-@media (hover: none) {
-  .code-copy {
-    opacity: 1;
-  }
+  font-size: inherit;
 }
 /* Previous / Next pager at the foot of a doc — the sequential path, with titles. Two
    bordered cards; a missing neighbour keeps its side empty so the lone card stays put. */
@@ -4016,16 +4142,27 @@ button.api-filter-clear svg {
   color: var(--fg);
   background: var(--hover);
 }
+/* The reference reads as a document: a doc page's line height, not the browser's default. */
 .api-content {
   min-width: 0;
-  max-width: 820px;
+  max-width: 1440px;
+  line-height: 1.5;
+}
+/* One reading measure for the page, a doc page's (720px): the intro, the topics, and each
+   route's and object's prose and tables keep it, and only a route's examples, beside its
+   prose on a wide screen, reach past it. */
+.api-head,
+.api-blurb,
+.api-section[data-tier="overview"] .api-res,
+.api-op-body {
+  max-width: 720px;
 }
 .api-head {
   margin: 0 0 12px;
 }
 .api-head h1 {
   margin: 0 0 4px;
-  font-size: 22px;
+  font-size: 28px;
 }
 .api-section {
   scroll-margin-top: calc(var(--bar-h) + 2px);
@@ -4036,35 +4173,53 @@ button.api-filter-clear svg {
 .api-section.api-last {
   min-height: calc(100vh - var(--bar-h));
 }
+/* A tier is a page heading here, not the app's small-caps section label that h2 is elsewhere. */
 .api-section h2 {
-  font-size: 18px;
-  margin: 24px 0 4px;
+  font-size: 24px;
+  font-weight: 650;
+  color: var(--fg);
+  text-transform: none;
+  letter-spacing: normal;
+  margin: 28px 0 4px;
+}
+/* Where a jump from the rail or an address moves focus: a place to read from, not a control,
+   so it takes no ring. */
+.api-section h2:focus,
+.api-res-head h3:focus {
+  outline: none;
 }
 .api-blurb {
-  margin: 0;
+  margin: 0 0 10px;
   font-size: 14px;
-  max-width: 62ch;
 }
-/* A resource: its heading stays pinned under the room bar while its rows scroll by. */
+/* A resource: its heading over a rule, scrolling with its routes. */
 .api-res {
   margin-top: 16px;
   scroll-margin-top: var(--bar-h);
 }
+/* A resource's heading, set like the page's other headings, flush with the text: it only
+   pins under the bar, its vertical padding the band the rows scroll beneath. */
 .api-res-head {
-  position: sticky;
-  top: var(--bar-h);
-  z-index: var(--z-content);
   display: flex;
   align-items: center;
   gap: 8px;
-  padding: 7px 6px;
+  margin: 0;
+  padding: 6px 0;
+  border-bottom: 1px solid var(--line-soft);
   background: var(--bg);
-  border-radius: 6px;
 }
 
 .api-res-head h3 {
   margin: 0;
-  font-size: 14px;
+  font-size: 20px;
+  font-weight: 650;
+}
+/* A Getting started topic is a heading over prose, not a list's head: no rule, a step smaller. */
+.api-section[data-tier="overview"] .api-res-head {
+  border-bottom: none;
+}
+.api-section[data-tier="overview"] .api-res-head h3 {
+  font-size: 18px;
 }
 .api-rows {
   list-style: none;
@@ -4073,46 +4228,8 @@ button.api-filter-clear svg {
 }
 .api-rows > li {
   border-bottom: 1px solid var(--line);
-}
-/* One route per row: badge, path, and summary line, a native disclosure that opens in
-   place to the full documentation. */
-.api-route-sum {
-  display: grid;
-  grid-template-columns: 62px minmax(0, max-content) minmax(0, 1fr) 20px;
-  gap: 14px;
-  align-items: center;
-  padding: 9px 6px;
-  border-radius: 6px;
-  list-style: none;
-  cursor: pointer;
-}
-.api-route-sum::-webkit-details-marker {
-  display: none;
-}
-.api-route-sum:hover {
-  background: var(--hover);
-}
-.api-route-line {
-  color: var(--muted);
-  font-size: 13.5px;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-.api-route[open] .api-route-line {
-  visibility: hidden;
-}
-.api-chev {
-  width: 6px;
-  height: 6px;
-  border-right: 1.6px solid var(--muted);
-  border-bottom: 1.6px solid var(--muted);
-  justify-self: center;
-  transform: rotate(-45deg);
-  transition: transform 0.15s;
-}
-.api-route[open] .api-chev {
-  transform: rotate(45deg);
+  /* A route reached from its address lands just under the bar, the rule above it hidden. */
+  scroll-margin-top: calc(var(--bar-h) - 1px);
 }
 /* The verb as a tinted label: its own --method-* color as text over a wash of itself. */
 .api-method {
@@ -4136,6 +4253,13 @@ button.api-filter-clear svg {
 .api-method.m-DELETE {
   --m: var(--method-delete);
 }
+/* An object heads its resource as a row of its own, marked in the verb's column. */
+.api-method.m-OBJECT {
+  text-transform: uppercase;
+  color: var(--muted);
+  background: var(--card);
+  box-shadow: inset 0 0 0 1px var(--line-soft);
+}
 .api-path {
   font: 13.5px var(--mono);
   overflow-wrap: anywhere;
@@ -4146,30 +4270,126 @@ button.api-filter-clear svg {
   border-radius: 3px;
   padding: 0 2px;
 }
-.api-route-detail {
-  padding: 2px 6px 18px 82px;
-}
 .api-summary {
-  margin: 2px 0 0;
-  font-size: 14.5px;
+  margin: 0 0 10px;
+  font-size: 15px;
 }
 .api-desc {
-  margin: 6px 0 0;
+  margin: 0 0 10px;
   font-size: 14px;
 }
-/* A query parameter the route can't be called without. */
+/* A field or parameter the request can't do without. */
 .api-req {
-  margin-left: 4px;
-  font-size: 11px;
-  color: var(--muted);
-  border: 1px solid var(--line);
-  border-radius: 4px;
-  padding: 0 4px;
+  font-size: 11.5px;
+  font-weight: 600;
+  color: var(--warn-fg);
 }
 
 .api-empty {
   margin: 20px 0;
 }
+/* An object, first under the resource whose routes return it: a row like a route's, that
+   opens to its fields and example. */
+/* A route or an object, laid out in full as Stripe and Mux lay theirs: its name and tools,
+   its method and path, then what it does beside its examples on a wide screen, under them
+   on a narrow one. The examples scroll with the page: pinned, one taller than the window
+   (the send view's) would never show its end. */
+/* Each route and object its own block, with room around it so the page reads as one at a time. */
+.api-op {
+  padding: 36px 0 40px;
+}
+.api-op-head {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 8px 16px;
+}
+.api-op-head h4 {
+  margin: 0;
+  font-size: 18px;
+  font-weight: 650;
+}
+.api-op-head h4:focus {
+  outline: none;
+}
+/* A heading is a link to its own address, in the heading's own ink, with a link icon in the
+   margin to its left while it is hovered or focused, as GitHub's headings show theirs. */
+a.api-self {
+  position: relative;
+  color: inherit;
+  text-decoration: none;
+}
+a.api-self svg {
+  position: absolute;
+  left: -20px;
+  top: 50%;
+  width: 14px;
+  height: 14px;
+  transform: translateY(-50%);
+  color: var(--muted);
+  opacity: 0;
+}
+a.api-self:hover svg,
+a.api-self:focus-visible svg {
+  opacity: 1;
+}
+.api-op-call {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin: 6px 0 10px;
+}
+.api-op-call .api-method {
+  padding: 0 6px;
+}
+/* Copy sits right after the path it copies, an icon alone, so the two read as one. */
+button.copy-btn.api-copy-path {
+  padding: 3px 5px;
+}
+
+.api-op-body {
+  display: grid;
+  gap: 4px 28px;
+}
+.api-op-text,
+.api-op-code {
+  min-width: 0;
+}
+@media (min-width: 1280px) {
+  .api-op-body {
+    max-width: none;
+    /* The examples take what the window has beyond the prose's measure, never under 360px. */
+    grid-template-columns: minmax(0, 720px) minmax(360px, 1fr);
+  }
+  .api-op-code {
+    align-self: start;
+  }
+  .api-op-code > .block:first-child {
+    margin-top: 0;
+  }
+}
+/* The rail lists every route by name under its resource, so it reads as the page's contents. */
+.api-nav-ops {
+  display: none;
+}
+.api-nav-ops.open,
+.api-nav.filtering .api-nav-ops {
+  display: flex;
+  flex-direction: column;
+}
+.api-nav a.api-nav-op {
+  padding-left: 30px;
+  font-size: 13px;
+}
+.api-nav-tier + .api-nav-ops a.api-nav-op {
+  padding-left: 20px;
+}
+.api-object {
+  border-bottom: 1px solid var(--line);
+  /* Reached from a route's Returns, it lands just under the bar. */
+  scroll-margin-top: calc(var(--bar-h) - 1px);
+}
 /* Reference room on mobile. The bar stays ONE row at --bar-h, the same as on desktop, so
    the in-page anchors (scroll-margin-top) and the scroll-spy line keep clearing it: the back
    link is a --bar-h square holding its arrow, the wordmark and the two tabs follow, and the
@@ -4284,11 +4504,13 @@ button.api-filter-clear svg {
     font-size: 13px;
   }
   /* The API rail is the tier chips alone on a phone: its resources need the column the
-     rail no longer has. A route row stacks its summary under its path. */
+     rail no longer has. */
   .api-filter {
     max-width: none;
   }
-  .api-nav a.api-nav-res {
+  .api-nav a.api-nav-res,
+  .api-nav .api-nav-ops,
+  .api-nav.filtering .api-nav-ops {
     display: none;
   }
   .api-nav a.api-nav-tier {
@@ -4297,25 +4519,6 @@ button.api-filter-clear svg {
   .api-nav a.api-nav-tier ~ a.api-nav-tier {
     margin-top: 0;
   }
-  .api-route-sum {
-    grid-template-columns: 62px minmax(0, 1fr) 20px;
-    gap: 4px 10px;
-  }
-  .api-route-line {
-    grid-column: 2;
-    grid-row: 2;
-    white-space: normal;
-  }
-  .api-chev {
-    grid-column: 3;
-    grid-row: 1;
-  }
-  .api-route[open] .api-route-line {
-    display: none;
-  }
-  .api-route-detail {
-    padding: 0 4px 14px;
-  }
   /* inline-flex centres the chip's text in its 32px; the gap stands in for the space
      between the label and its ↗ that flex drops. */
   .rail-link {
@@ -4720,6 +4923,10 @@ button.copy-btn:hover {
 button.copy-btn:active {
   transform: none;
 }
+/* A Copy that is its glyph alone (no word) takes no gap for the word. */
+button.copy-btn span:empty {
+  display: none;
+}
 button.copy-btn svg {
   width: 14px;
   height: 14px;
@@ -4734,12 +4941,55 @@ button.copied svg {
   font-weight: 600;
   color: var(--muted);
 }
-.block pre {
+/* A code block (an example, a curl command, a template): a raised card with its label and Copy
+   in a header inside it, so the code stands apart from the page in both themes. */
+.code-block {
+  background: var(--card);
+  border: 1px solid var(--line);
+  border-radius: 8px;
+  overflow: hidden;
+}
+.code-block > .block-head {
   margin: 0;
-  overflow-x: auto;
-  background: var(--bg);
+  padding: 4px 6px 4px 12px;
+  border-bottom: 1px solid var(--line);
+}
+/* A bare code block (a doc's): the same raised card with no label line, the code beside a
+   Copy that is its glyph alone, level with the first line, so a one-line command reads as
+   one quiet row. */
+.code-bare {
+  display: flex;
+  align-items: flex-start;
+  gap: 8px;
+  background: var(--card);
   border: 1px solid var(--line);
-  border-radius: 6px;
+  border-radius: 8px;
+  padding: 0 6px 0 0;
+}
+.code-bare pre {
+  flex: 1;
+  min-width: 0;
+  margin: 0;
+  overflow-x: auto;
+  padding: 11px 0 11px 14px;
+  font: 13px / 1.5 var(--mono);
+}
+.code-bare > button.copy-btn {
+  flex: none;
+  margin-top: 8px;
+  padding: 5px;
+}
+.code-bare > button.copy-btn svg {
+  width: 16px;
+  height: 16px;
+}
+/* A doc's code block is spaced like a paragraph. */
+.doc .code-bare {
+  margin: 14px 0;
+}
+.code-block pre {
+  margin: 0;
+  overflow-x: auto;
   padding: 10px 12px;
   font: 12.5px / 1.5 var(--mono);
 }
@@ -6515,7 +6765,7 @@ body.has-savebar .content {
 .subs-wrap {
   container-type: inline-size;
 }
-@container (max-width: 759px) {
+@container (max-width: 609px) {
   .list-table.subs-table.stacks,
   .list-table.subs-table.stacks tbody,
   .list-table.subs-table.stacks tr {
@@ -6556,10 +6806,7 @@ body.has-savebar .content {
   .list-table.subs-table.stacks td.empty {
     display: none;
   }
-  /* Subscribers: status pill · how they joined · joined <date>. */
-  .subs-table td.how::before {
-    content: " · ";
-  }
+  /* Subscribers: status pill · joined <date>. */
   .subs-table td.joined::before {
     content: " · joined ";
   }
@@ -6687,8 +6934,10 @@ body.has-savebar .content {
   font-weight: 600;
   margin: 14px 0 4px;
 }
-/* The same amber box the Schedule dialog gives D1's daily-writes warning (DESIGN §4). */
-.hint.daily-writes.imp-warn {
+/* On Workers Free's limits, the advice to move to Workers Paid on a list past what Free suits,
+   on the Dashboard, the Subscribers screen, and an import's plan (DESIGN §4): the same amber
+   box the Schedule dialog gives D1's daily-writes warning. */
+.workers-plan {
   color: var(--warn-fg);
   background: var(--warn-bg);
   border: 1px solid var(--warn-line);
@@ -6729,9 +6978,73 @@ body.has-savebar .content {
   gap: 14px;
   margin-top: 18px;
 }
-/* View subscriber's title is the address, so a long one breaks rather than widens the dialog. */
+/* A subscriber's page is titled with the address, so a long one breaks rather than widens
+   the head; the status pill and the flag sit beside it, as the roster draws them. */
 .sub-title {
   overflow-wrap: anywhere;
+  margin: 0;
+}
+.sub-page-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+  min-width: 0;
+}
+.sub-page-title .sub-pills {
+  white-space: nowrap;
+}
+/* Whether they receive posts: the page's first answer, under the head, in the record's
+   meta-line place; muted, with a green dot only when they do, as a confirmed pill is. */
+.sub-receives {
+  margin: -6px 0 14px;
+  font-size: 13.5px;
+  color: var(--muted);
+}
+.sub-receives.yes::before {
+  content: "";
+  display: inline-block;
+  width: 8px;
+  height: 8px;
+  margin-right: 7px;
+  border-radius: 50%;
+  background: var(--ok-fg);
+}
+/* The import note: the card's own small print, outside a dialog's hint styles. */
+.sub-note {
+  margin: 10px 0 0;
+  font-size: 12.5px;
+  color: var(--muted);
+}
+.sub-sec .sub-meaning {
+  margin: 8px 0;
+  font-size: 13.5px;
+}
+.sub-sec p:last-child {
+  margin-bottom: 0;
+}
+.sub-sup-line,
+.sub-left-line {
+  margin: 0;
+}
+/* Sends is a table, and a table is already a card, so its section is no card of its own:
+   the label sits on the page above it, as the dashboard's sections do. */
+.sub-sends {
+  margin-top: 22px;
+}
+.sub-sends-table .c-out {
+  width: 160px;
+}
+.sub-sends-table .sub-send a {
+  font-weight: 500;
+}
+.sub-more {
+  margin-top: 12px;
+}
+/* The roster's address is its row's link, as a Sent row's subject is, in the text's color
+   since the whole row is the click target. */
+.subs-table a.sub-email {
+  color: inherit;
 }
 .imp-dl,
 .sub-dl {