@kurtbruns/kestrel 1.11.0 → 1.13.0

package/dist/public/dashboard/styles.css

@@ -1558,6 +1558,42 @@ td a:hover {
   color: var(--status-sending-fg);
   border-color: var(--status-sending-line);
 }
+/* A list's title with its Email only mark (sends/progress.ts): the title wraps within its room
+   and the mark, an envelope and muted words, stays whole on the title's line, so it never drops
+   onto a line of its own. */
+.title-with-label {
+  display: flex;
+  /* Centered, not on a baseline: the mark's text is smaller and led by an icon, and only
+     their centers line up with the title's. */
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+.title-with-label .title-text {
+  min-width: 0;
+}
+/* Where a table's columns are fixed, a long title ends in an ellipsis, so the row stays one
+   line tall; the whole title is a click away in the post. */
+.list-table .title-with-label .title-text,
+.dash-drafts .title-with-label .title-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.email-only-mark {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: none;
+  font-size: 12.5px;
+  font-weight: 400;
+  color: var(--muted);
+  white-space: nowrap;
+}
+.email-only-mark svg {
+  width: 13px;
+  height: 13px;
+}
 /* Subscriber consent states borrow a hue that matches the state's meaning: confirmed →
    the sent green, unsubscribed → the draft grey, suppressed → danger red (below). Pending
    awaits double-opt-in — a waiting/attention state — so it takes the amber `warn` scale,
@@ -1810,16 +1846,38 @@ td a:hover {
 .list-table .c-delivered {
   width: 176px;
 }
+/* Every Sent row, on the Sent page and the dashboard, as tall as one with a delivery note under its count, so a row with none (a
+   one-recipient test) sits in the same rhythm as the rest. A row's height is its floor; once
+   the table stacks, each row is a block that takes its own height. */
+/* The dashboard's Drafts card is half the page wide: its date stays on one line, and the title
+   takes what room is left. */
+.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: 15em;
+  white-space: nowrap;
+}
+@media (min-width: 721px) {
+  .sent-table tbody tr,
+  .dash-sent tbody tr {
+    height: 56px;
+  }
+}
 .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 {
@@ -1880,20 +1938,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;
@@ -1965,14 +2146,16 @@ body.web-mode .content {
   padding: 10px 44px;
   text-align: left;
 }
+/* The reader pages' Dev pill exactly (`.r-dev-tag` in src/lib/page.ts), so the two read as one. */
 .web-bar-tag {
   display: inline-block;
   margin-right: 10px;
-  font-size: 10px;
+  font-size: 9.5px;
+  line-height: 1.6;
   letter-spacing: 0.09em;
   text-transform: uppercase;
   font-weight: 700;
-  padding: 1px 7px;
+  padding: 2px 7px;
   border-radius: 999px;
   background: var(--accent-on);
   color: var(--accent);
@@ -2186,7 +2369,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 {
@@ -2415,6 +2598,12 @@ body.web-mode .content {
   border-color: var(--ring);
   box-shadow: 0 0 0 1px var(--ring);
 }
+/* A scheduled post's body is locked, so focus rings it in grey, as the locked subject's is,
+   rather than in the blue that says "type here" (DESIGN §3). */
+.composer.composer-locked:focus-within {
+  border-color: var(--muted);
+  box-shadow: 0 0 0 1px var(--muted);
+}
 .composer-head {
   display: flex;
   align-items: flex-end;
@@ -2621,14 +2810,25 @@ body.web-mode .content {
 }
 .composer-body.locked textarea.editor {
   caret-color: transparent;
+  cursor: default;
+}
+/* Its text is muted, as the subject's is, so the body reads as locked at a glance. */
+.composer-body.locked .md-hl code {
+  opacity: 0.72;
 }
-/* The subject and slug of a scheduled post are read-only too, and readonly (unlike disabled)
-   carries no native greying, so they take the same recessed surface as the body: otherwise
-   they read as editable, and the refusal pulses a line far below where the keystroke landed. */
-#f-subject[readonly],
-#f-slug[readonly] {
+/* The subject of a scheduled post is read-only too, and readonly (unlike disabled) carries no
+   native greying, so it is styled to look locked while keeping what disabled would take away:
+   it can still be focused, selected, and copied, and a keystroke still pulses the foot line.
+   The recessed surface, muted text, an arrow cursor, and a grey focus ring in place of the
+   blue one that says "type here" (DESIGN §3). */
+#f-subject[readonly] {
   background: var(--sunken);
   border-color: var(--line-soft);
+  color: var(--muted);
+  cursor: default;
+}
+#f-subject[readonly]:focus-visible {
+  outline-color: var(--muted);
 }
 .composer-body.dragover::after {
   content: "Drop images to upload";
@@ -2696,6 +2896,11 @@ body.web-mode .content {
   }
 }
 
+/* The editor's subject, body, and actions sit on the page itself, with no card around them:
+   the fields and the composer carry their own borders, aligned with the head and the banner. */
+.editor-form > label:first-child {
+  margin-top: 6px;
+}
 .actions-bar {
   display: flex;
   align-items: center;
@@ -2910,13 +3115,10 @@ body.web-mode .content {
   flex: none;
   white-space: nowrap;
 }
-/* The back link at the top of the Send-now view needs no divider — it returns from,
-   rather than demotes below, the Schedule view. */
-.modal .altrow-top {
-  margin: -4px 0 10px;
-  padding-top: 0;
-  border-top: 0;
-  justify-content: flex-start;
+/* The Send-now view's way back to the Schedule view, at the start of its button row: it
+   returns from, rather than demotes below, the Schedule view, so it takes no row of its own. */
+.modal .actions .actions-back {
+  margin-right: auto;
 }
 /* Link — a text-link-styled action (DESIGN §7), not one of the button roles. Reserved
    for a deliberately subordinate choice, like the in-modal Send now that sits below
@@ -3122,16 +3324,6 @@ textarea.is-invalid {
 .modal .dialog-error {
   margin-top: 12px;
 }
-/* Label + info icon grouped at the top of the slug field. */
-.label-row {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  margin: 14px 0 8px;
-}
-.label-row label {
-  margin: 0;
-}
 /* Info icon: the field explanation lives in its hover/focus tooltip. The padding
    + equal negative margin enlarge the hover/click target to ~28px without moving
    the glyph or growing the label row. */
@@ -3196,28 +3388,6 @@ textarea.is-invalid {
   visibility: visible;
   transform: translateY(0);
 }
-/* The "Auto-generate from subject" toggle, grouped just under the slug field. */
-.slug-auto-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 6px;
-  margin-top: 8px;
-  font-size: 14px;
-  color: var(--muted);
-  cursor: pointer;
-  user-select: none;
-}
-.slug-auto-toggle input {
-  width: 14px;
-  height: 14px;
-  margin: 0;
-  accent-color: var(--ring);
-  cursor: pointer;
-}
-/* Slug is muted while it follows the subject; normal once set by hand. */
-#f-slug.slug-auto {
-  color: var(--muted);
-}
 /* --- Editor-state banner (DESIGN §5): a standing, in-flow line at the top of the
    editor, in two variants. `scheduled` marks a frozen, soft-locked post (SPEC §6);
    `conflict` warns the draft changed elsewhere (another tab, or Claude), and its two
@@ -3255,46 +3425,357 @@ textarea.is-invalid {
    banner that says to send a new test, and a mark on the dashboard's scheduled card. */
 .sched-remade {
   display: flex;
-  flex-wrap: wrap;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 4px 10px;
+  margin-top: 6px;
+  font-size: 13px;
+}
+/* The scheduled banner's notes under the countdown (DESIGN §4): a send that will be held
+   with no provider connected, and one too large for D1's daily writes on Workers Free's
+   limits. Each keeps the banner's own violet, since amber words on violet fall short of
+   contrast and mix two of the color meanings, and an amber ⚠️ leads it to say it's worth a
+   look. Held is the stronger of the two (the send won't go out), so it keeps the weight. */
+.sched-note {
+  display: flex;
+  gap: 6px;
+  align-items: baseline;
+  margin-top: 6px;
+  font-size: 12.5px;
+  color: var(--status-scheduled-fg);
+}
+.sched-note-mark {
+  flex: none;
+}
+.sched-note-held {
+  font-weight: 500;
+}
+.sched-remade-mark {
+  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;
+  align-items: flex-start;
+  gap: 10px;
+  margin: 14px 0 0;
+  font-size: 14px;
+  color: var(--fg);
+  cursor: pointer;
+}
+.listing-check input {
+  width: auto;
+  margin: 3px 0 0;
+  flex: 0 0 auto;
+  accent-color: var(--ring);
+  cursor: pointer;
+}
+.listing-check strong {
+  font-weight: 600;
+}
+.listing-help {
+  display: block;
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--muted);
+}
+/* A scheduled post's banner in two rows (DESIGN §4): the time, its notes, and the controls that
+   act on it; then, under a hairline, where the post is going, on a slightly deeper ground. */
+.banner-split {
+  display: block;
+  padding: 0;
+  overflow: hidden;
+}
+.banner-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  flex-wrap: wrap;
+  padding: 12px 16px;
+  font-size: 14px;
+}
+.banner-bottom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 9px 16px;
+  border-top: 1px solid var(--status-scheduled-line);
+  /* A shade deeper than the banner, so the row reads as its footer rather than a strip of its own. */
+  background: color-mix(in srgb, var(--status-scheduled-fg) 6%, var(--status-scheduled-bg));
+  font-size: 13px;
+}
+.banner-bottom svg {
+  flex: none;
+  width: 14px;
+  height: 14px;
+}
+.sched-dest-icon {
+  display: flex;
+  flex: none;
+}
+/* A filled icon takes the row's violet; a stroked one (fill="none") already draws in it. */
+.banner-bottom svg:not([fill="none"]),
+#settingsBtn svg {
+  fill: currentColor;
+}
+#schedDest {
+  min-width: 0;
+  overflow-wrap: anywhere;
+}
+.sched-dest code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+}
+.pub-taken code {
+  font-family: var(--mono);
+  font-size: 12.5px;
+  color: var(--fg);
+}
+/* The settings form in a dialog under the time, set off from it by a rule. */
+.dialog-settings {
+  margin-top: 14px;
+  padding-top: 2px;
+}
+.dialog-settings .listing-check {
+  margin-top: 0;
+}
+/* The archive address as one URL field: the base greyed and fixed, then the slug, the one part
+   to type. The whole field is the label, so a click on the base lands in the slug too. */
+.pub-address {
+  margin-top: 14px;
+}
+.pub-label {
+  display: block;
+  margin: 0 0 6px;
+  font-size: 13px;
+  color: var(--muted);
+}
+.url-field {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  background: var(--card);
+  font-family: var(--mono);
+  font-size: 13px;
+  cursor: text;
+}
+.url-field:focus-within {
+  border-color: var(--ring);
+  box-shadow: 0 0 0 1px var(--ring);
+}
+.url-field.is-invalid {
+  border-color: var(--danger-fg);
+}
+.url-base {
+  display: flex;
+  align-items: center;
+  padding: 8px 0 8px 10px;
+  white-space: nowrap;
+  color: var(--muted);
+}
+.url-field input {
+  flex: 1;
+  min-width: 6em;
+  border: 0;
+  border-radius: 0;
+  padding: 8px 10px 8px 0;
+  font-family: var(--mono);
+  font-size: 13px;
+  font-weight: 600;
+}
+.url-field input:focus-visible {
+  outline: none;
+}
+.url-field.readonly {
+  cursor: default;
+  background: var(--sunken);
+}
+.url-field.readonly input {
+  color: var(--muted);
+  font-weight: 500;
+  background: transparent;
+}
+@media (max-width: 480px) {
+  .url-field {
+    flex-direction: column;
+  }
+  .url-base {
+    padding-bottom: 0;
+  }
+  .url-field input {
+    padding-left: 10px;
+  }
+}
+/* A refused address, in the server's words, under its field. */
+.pub-error {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--danger-fg);
+}
+/* The Post settings button carries a gear before its words. */
+#settingsBtn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+#settingsBtn svg {
+  width: 16px;
+  height: 16px;
+}
+.pub-taken {
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin: 8px 0 0;
+  font-size: 13px;
+  line-height: 1.5;
+  color: var(--muted);
+}
+.pub-taken svg {
+  width: 15px;
+  height: 15px;
+  flex: none;
+  margin-top: 2px;
+}
+.pub-note {
+  margin: 8px 0 0;
+  font-size: 13px;
+  color: var(--muted);
+}
+/* A sent post's page in two parts (DESIGN §3): the post, then its delivery. */
+.rec-head-page {
+  margin-bottom: 14px;
+}
+.rec-part-title {
+  margin: 0 0 10px;
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.rec-web {
+  display: grid;
+}
+.rec-link-label {
+  margin: 0 0 6px;
+  font-size: 12.5px;
+  color: var(--muted);
+}
+/* The link as one field: the address, then Copy and Open attached to it. */
+.rec-link {
+  display: flex;
+  align-items: stretch;
+  min-width: 0;
+  overflow: hidden;
+  border: 1px solid var(--line);
+  border-radius: 7px;
+  background: var(--sunken);
+}
+/* An address is one line, shortened at its end, since Copy carries it whole. */
+.rec-link code {
+  flex: 1 1 auto;
+  align-self: center;
+  min-width: 0;
+  padding: 8px 10px;
+  font-family: var(--mono);
+  font-size: 12.5px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.rec-link button {
+  flex: none;
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  min-height: 35px;
+  padding: 0 11px;
+  border: 0;
+  border-left: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--card);
+  color: var(--muted);
+  font-size: 13px;
+  white-space: nowrap;
+}
+.rec-link button:hover {
+  color: var(--fg);
+  background: var(--hover);
+}
+.rec-link button.rec-open {
+  color: var(--accent);
+  font-weight: 500;
+}
+.rec-link-note {
+  margin: 6px 0 0;
+  font-size: 12.5px;
+}
+/* Where the post stands, in words beside the one change it allows (which asks first). */
+.rec-arch {
+  display: flex;
   align-items: center;
-  gap: 4px 10px;
-  margin-top: 6px;
-  font-size: 13px;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: 10px 16px;
+  margin: 14px -16px 0;
+  padding: 14px 16px 0;
+  border-top: 1px solid var(--line);
 }
-/* The scheduled banner's notes under the countdown (DESIGN §4): a send that will be held
-   with no provider connected, and one too large for D1's daily writes on Workers Free's
-   limits. Each keeps the banner's own violet, since amber words on violet fall short of
-   contrast and mix two of the color meanings, and an amber ⚠️ leads it to say it's worth a
-   look. Held is the stronger of the two (the send won't go out), so it keeps the weight. */
-.sched-note {
+/* A post with no web link yet has only its standing to show, with no rule above it. */
+.rec-web > .rec-arch:first-child {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: 0;
+}
+.rec-arch-what {
+  flex: 1 1 220px;
+  min-width: 0;
+  font-size: 14px;
+}
+.rec-arch-what strong {
   display: flex;
+  align-items: center;
   gap: 6px;
-  align-items: baseline;
-  margin-top: 6px;
-  font-size: 12.5px;
-  color: var(--status-scheduled-fg);
+  font-weight: 600;
 }
-.sched-note-mark {
+.rec-arch-what svg {
+  width: 16px;
+  height: 16px;
   flex: none;
+  color: var(--muted);
 }
-.sched-note-held {
-  font-weight: 500;
+.rec-arch-what svg:not([fill="none"]) {
+  fill: currentColor;
 }
-.sched-remade-mark {
-  margin-top: 4px;
-  font-size: 12.5px;
-  color: var(--status-scheduled-fg);
+.rec-arch-note {
+  display: block;
+  margin-top: 2px;
+  font-size: 13px;
+  line-height: 1.45;
+  color: var(--muted);
 }
-
-.grid2 {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
+/* The address Remove from archive takes down, struck through in its dialog. */
+.url-gone {
+  padding: 8px 10px;
+  background: var(--sunken);
+  border: 1px solid var(--line);
+  border-radius: 6px;
+  font-family: var(--mono);
+  font-size: 13px;
+  color: var(--muted);
+  overflow-wrap: anywhere;
 }
+
 @media (max-width: 620px) {
-  .grid2 {
-    grid-template-columns: 1fr;
-  }
   .tb {
     width: 34px;
     height: 34px;
@@ -3662,16 +4143,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);
@@ -3682,35 +4174,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;
@@ -3719,46 +4229,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 {
@@ -3782,6 +4254,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;
@@ -3792,30 +4271,128 @@ 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;
+}
+button.copy-btn.api-copy-path span:empty {
+  display: none;
+}
+.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
@@ -3930,11 +4507,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 {
@@ -3943,25 +4522,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 {
@@ -4209,7 +4769,8 @@ button.api-filter-clear svg {
   gap: 10px;
 }
 
-/* Setup checklist — shared by the first-run dashboard and Getting started. */
+/* Setup steps: the first-run checklist, and the regular dashboard's Finish setting up card
+   (one component, two layouts). The card is the compact one. */
 .setup-title {
   margin-top: 0;
 }
@@ -4282,6 +4843,20 @@ button.api-filter-clear svg {
   color: var(--muted);
   word-break: break-all;
 }
+.setup-card {
+  margin-bottom: 20px;
+}
+.setup-card .setup-title {
+  font-size: 16px;
+}
+.setup-card .setup-steps li {
+  padding: 8px 2px;
+}
+.setup-card .setup-steps li::before {
+  width: 22px;
+  height: 22px;
+  font-size: 12px;
+}
 
 /* ============================================================
    Settings page. Grouped by intent, made visible: each section
@@ -4365,12 +4940,22 @@ 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;
+  padding: 4px 6px 4px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.code-block pre {
   margin: 0;
   overflow-x: auto;
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: 6px;
   padding: 10px 12px;
   font: 12.5px / 1.5 var(--mono);
 }
@@ -4378,6 +4963,17 @@ button.copied svg {
 .pub-row button.copy-btn {
   flex: 0 0 auto;
 }
+/* In a sent post's link field, Copy is a segment of the field like Open: square, full height,
+   and divided from the address, so its hover fills the segment rather than a chip inside it. */
+.rec-link button.copy-btn {
+  padding: 0 11px;
+  border-left: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--card);
+}
+.rec-link button.copy-btn:hover {
+  background: var(--hover);
+}
 
 /* --- groups: the sections kept together by whom they serve (DESIGN §3). A group has no
    heading, since each section's title already says what it is; a wider gap than the one
@@ -6135,7 +6731,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 {
@@ -6176,10 +6772,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 ";
   }
@@ -6307,8 +6900,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);
@@ -6349,9 +6944,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 {