@kurtbruns/kestrel 1.7.0 → 1.8.0

package/dist/public/dashboard/styles.css

@@ -5,26 +5,28 @@
    different values on purpose; don't assume they share meaning. */
 :root {
   color-scheme: light dark;
-  /* Layering — one named z-index ladder (DESIGN §4). Every fixed or floating surface
+  /* Layering — one named z-index ladder (DESIGN §9). Every fixed or floating surface
      references a rung by token, never a bare literal; the order encodes the intent.
      z-index is theme-independent, so it lives only here (not the dark block). */
   --z-content: 1;
   --z-header: 10;
   --z-menu: 20;
   --z-bar: 30;
-  --z-toast: 40;
-  --z-modal: 50;
+  --z-modal: 40;
+  /* Toasts above modals: a toast raised while a dialog is open (an autosave that failed,
+     a send that started) must not sit dimmed beneath its backdrop. */
+  --z-toast: 50;
   --fg: #18181b;
   --muted: #52525b;
   --line: #e4e4e7;
   --bg: #fbfbfa;
   --card: #fff;
   --hover: #efefef;
-  /* Neutral ink — the strong near-black/near-white neutral (DESIGN §3). A text token
+  /* Neutral ink — the strong near-black/near-white neutral (DESIGN §8). A text token
      for headings and strong labels; never a button fill (Primary is --accent). */
   --ink: #18181b;
   --ink-on: #ffffff;
-  /* Semantic feedback — one {fg, bg, line} scale each for danger / warn / ok (DESIGN §3).
+  /* Semantic feedback — one {fg, bg, line} scale each for danger / warn / ok (DESIGN §8).
      fg is the saturated hue (text on the soft bg, or a solid fill paired with an on-color);
      bg is the soft tint behind a notice; line is its border. There is one red, not two —
      the old --danger vs --b-bad-* split is collapsed here. Kept distinct from the
@@ -40,13 +42,11 @@
   --ok-bg: #dcfce7;
   --ok-line: #bbf7d0;
   --ring: #2563eb;
-  --banner-bg: #eff6ff;
-  --banner-line: #bfdbfe;
   --status-draft-bg: #f4f4f5;
   --status-draft-fg: #52525b;
   --status-draft-line: #d4d4d8;
   /* Scheduled is a violet, deliberately off the slate-blue action accent (--accent)
-     so the "scheduled" status never reads as the primary action (DESIGN §3); the fill
+     so the "scheduled" status never reads as the primary action (DESIGN §8); the fill
      backs the scheduled pill, banner, and cards, and the line borders them. */
   --status-scheduled-bg: #ece6f9;
   --status-scheduled-fg: #6743ac;
@@ -65,7 +65,7 @@
   --accent: #3355cc;
   --accent-on: #ffffff;
   --accent-soft: rgba(51, 85, 204, 0.12);
-  /* Syntax-highlight palette, shared by the template (issue #123) and post (issue #138)
+  /* Syntax-highlight palette, shared by the template and post
      editors — the HTML/CSS .cx-* tokens and the Markdown .cx-md-* tokens map onto it. */
   --syntax-bg: #fbfbfc;
   --syntax-fg: #3f3f46;
@@ -79,7 +79,7 @@
   --syntax-punctuation: #a1a1aa;
   --syntax-variable: #2d47b8;
   --syntax-variable-bg: rgba(51, 85, 204, 0.11);
-  /* Post editor's minimal scheme (issue #138): marks get the color, content keeps --syntax-fg.
+  /* Post editor's minimal scheme: marks get the color, content keeps --syntax-fg.
      Heading # is crimson; the emphasis asterisks are a magenta-pink kept clear of the heading
      crimson; block markers (>, list bullets, fence language) are a saturated, bright orange. */
   --syntax-heading: #be123c;
@@ -88,7 +88,7 @@
   /* 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;
-  /* HTTP method badges in the API reference (DESIGN §3). A self-contained palette like
+  /* 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). */
   --method-get: #166534;
@@ -122,8 +122,6 @@
     --ok-bg: #14532d;
     --ok-line: #15803d;
     --ring: #60a5fa;
-    --banner-bg: #1e293b;
-    --banner-line: #334155;
     --status-draft-bg: #2e2e33;
     --status-draft-fg: #a1a1aa;
     --status-draft-line: #52525b;
@@ -157,7 +155,7 @@
     --syntax-punctuation: #6a6a72;
     --syntax-variable: #a9bbf2;
     --syntax-variable-bg: rgba(120, 150, 240, 0.18);
-    /* Post editor minimal scheme (issue #138) — near-black/saturated hues lift to legible
+    /* Post editor minimal scheme — near-black/saturated hues lift to legible
        tints on the dark well; the heading crimson becomes a rose, emphasis a lighter pink. */
     --syntax-heading: #fb7185;
     --syntax-emphasis: #f472b6;
@@ -593,7 +591,7 @@ body.nav-resizing .sidebar {
   margin: 10px 2px 0;
   line-height: 1.5;
 }
-/* The connected state: an inline status line reusing the --ok feedback scale (DESIGN §3),
+/* The connected state: an inline status line reusing the --ok feedback scale (DESIGN §8),
    not a notification — a quiet confirmation the agent has edited here. */
 .conn-status {
   display: flex;
@@ -900,8 +898,10 @@ body.nav-resizing .sidebar {
   margin-top: 12px;
 }
 /* The refused-configuration wall says more than the sign-in wall, so it reads as text: left
-   aligned, a little wider, with the variable and the server's words set apart. */
-.config-wall {
+   aligned, a little wider, with the variable and the server's words set apart. The locked
+   editor, before Access is set up, reads the same way. */
+.config-wall,
+.access-wall {
   max-width: 560px;
   text-align: left;
 }
@@ -918,7 +918,8 @@ body.nav-resizing .sidebar {
   white-space: nowrap;
   border: 0;
 }
-.config-wall h2:focus {
+.config-wall h2:focus,
+.access-wall h2:focus {
   outline: none;
 }
 .config-wall-problem {
@@ -949,8 +950,8 @@ body.tool-mode .content {
 }
 
 /* --- Collapsed icon rail. Driven by data-nav="rail" on <html> (set from the viewport
-   width and the persisted collapse preference — see app.js and the <head> guard in
-   index.html), so the collapse toggle can pin it at any width in range. The rail is the
+   width and the collapse toggle's override for this load — see client/shell.ts and the
+   <head> guard in index.html), so the collapse toggle can pin it at any width in range. The rail is the
    default across the tablet range and small desktops; the nav keeps its one-click
    reach, labels move to hover/focus tooltips, and the secondary chrome (brand text,
    account, tool footer) folds down to its marks. The whole block is gated at ≥540 so a
@@ -1180,7 +1181,7 @@ button:hover {
 button:active {
   transform: translateY(0.5px);
 }
-/* --- Buttons: five roles (DESIGN §1), chosen by importance and consequence, one
+/* --- Buttons: five roles (DESIGN §7), chosen by importance and consequence, one
    class each. The bare `button` above is the neutral default (Ghost's card-filled
    end); the classes below step up to Primary / Secondary or down to the quiet Ghost,
    plus Danger and the square Icon. Exactly one solid brand-blue action — Primary — is
@@ -1189,7 +1190,7 @@ button:active {
 
 /* One box height across the label roles, so a row that mixes them (the editor's
    Save draft / Send test email / Schedule, a modal's Cancel + confirm) aligns:
-   roles differ by treatment — fill, weight, font-size — never by height (DESIGN §1).
+   roles differ by treatment — fill, weight, font-size — never by height (DESIGN §7).
    A smaller-font role (Secondary, Ghost) grows to this floor with its label centered
    rather than sitting a few pixels short of the Primary beside it. The bare `button`
    default already meets it; the square Icon role and the segmented toggle Control keep
@@ -1518,16 +1519,10 @@ td a:hover {
   color: var(--status-sending-fg);
   border-color: var(--status-sending-line);
 }
-.badge.canceled,
-.badge.failed {
-  background: var(--danger-bg);
-  color: var(--danger-fg);
-  border-color: var(--danger-line);
-}
 /* 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,
-   NOT `--status-sending`: the send "sending" badge is blue (DESIGN §3), and a pending subscriber
+   NOT `--status-sending`: the send "sending" badge is blue (DESIGN §8), and a pending subscriber
    must never read as a send in flight. (The two coincided only while `--status-sending` was
    amber; when it went blue for the dispatch treatment, this pill must stay amber.) */
 .badge.confirmed {
@@ -1749,7 +1744,7 @@ body.web-mode .content {
   margin: 0;
   padding: 0;
 }
-/* The page sits under one strip that says where the post stands (DESIGN §7). The strip is
+/* The page sits under one strip that says where the post stands (DESIGN §3). The strip is
    the editor's, above the frame, and the frame is as tall as the post, so the window scrolls
    and the strip goes up with the page like the test pages' strip. It wears the brand accent
    like the reader surface's dev pill, its tag as the pill's inverted chip, and its content
@@ -1815,8 +1810,8 @@ body.web-mode .content {
   margin: 48px auto;
   padding: 0 16px;
 }
-/* Sent record view (#148): a read-only delivery record. The outcome tiles reuse the
-   semantic feedback scales (--ok / --warn / --danger, DESIGN §3); a status badge, not
+/* Sent record view: a read-only delivery record. The outcome tiles reuse the
+   semantic feedback scales (--ok / --warn / --danger, DESIGN §8); a status badge, not
    a feedback color, still labels the send's lifecycle. */
 .rec-card {
   display: flex;
@@ -1916,7 +1911,7 @@ body.web-mode .content {
   }
 }
 
-/* ---- per-recipient record (#164): the rows behind the outcome tiles ---- */
+/* ---- per-recipient record: the rows behind the outcome tiles ---- */
 .rec-people {
   margin-top: 26px;
 }
@@ -1931,7 +1926,7 @@ body.web-mode .content {
   margin: 0;
   font-size: 15px;
 }
-/* The view toggle (Failures / Delivered / All) is a Control, not a button (DESIGN §1):
+/* The view toggle (Failures / Delivered / All) is a Control, not a button (DESIGN §7):
    the same segmented, aria-pressed pill group as the Template preview-width toggle, its
    active segment in the Secondary palette. It switches what you're looking at; it never
    commits an action. */
@@ -1983,8 +1978,8 @@ body.web-mode .content {
   font-size: 13px;
 }
 
-/* ---- live in-flight watch (#154): the `sending` state of the record view ---- */
-/* The sending treatment is blue (--status-sending-*, DESIGN §3) — distinct from the
+/* ---- live in-flight watch: the `sending` state of the record view ---- */
+/* The sending treatment is blue (--status-sending-*, DESIGN §8) — distinct from the
    action slate-blue — carried by the phase pill, the dispatch bar, and the swatch. */
 .rec-sw.sw-sending {
   background: var(--status-sending-fg);
@@ -2150,7 +2145,7 @@ body.web-mode .content {
   }
 }
 
-/* ---- active-send row (Sent page "In progress") + dashboard widget (#154) ---- */
+/* ---- active-send row (Sent page "In progress") + dashboard widget ---- */
 /* An in-flight send as a card with a live mini dispatch bar; blue, so it reads as
    "sending" — distinct from the scheduled violet cards and the neutral sent rows. */
 .card.active-card {
@@ -2194,6 +2189,27 @@ body.web-mode .content {
   font-size: 12.5px;
   color: var(--warn-fg);
 }
+/* A scheduled send while no provider is connected (DESIGN §4): the countdown stays, and a
+   line beneath it in the same amber says the send will be held when it fires. */
+.sched-held {
+  margin-top: 4px;
+  font-size: 12.5px;
+  font-weight: 500;
+  color: var(--warn-fg);
+}
+/* The editor's scheduled banner stacks its line and the held line on the left. */
+.banner-scheduled .sched-main {
+  display: flex;
+  flex-direction: column;
+  /* Takes the room and wraps its own lines (the re-made line is a sentence), so Reschedule
+     and Cancel stay at the right rather than dropping below; on a phone the row still wraps. */
+  flex: 1 1 18rem;
+  min-width: 0;
+}
+/* A draft's not-connected line sits above its actions bar, which keeps its own top gap. */
+.health.editor-not-connected {
+  margin: 16px 0 0;
+}
 
 /* Composer: GitHub-style Write/Preview tabs + a formatting toolbar */
 .composer {
@@ -2327,7 +2343,7 @@ body.web-mode .content {
 .composer-body {
   position: relative;
 }
-/* Post editor syntax-highlight overlay (issue #138): a transparent <textarea> layered over
+/* Post editor syntax-highlight overlay: a transparent <textarea> layered over
    a highlighted <pre> that shows the colored Markdown beneath the caret. The two share
    identical box + font metrics so the caret sits exactly on the colored text; the textarea
    is the only scroller and the <pre> is synced to it in script. Unlike the template editor
@@ -2402,7 +2418,7 @@ body.web-mode .content {
   background: #fff;
   display: block;
 }
-/* A scheduled post's Edit tab (DESIGN §7): the text stays fully legible, selectable, and
+/* A scheduled post's Edit tab (DESIGN §3): the text stays fully legible, selectable, and
    copyable (the fields are readonly, not disabled, since a disabled textarea cannot even be
    selected), on the recessed surface Settings uses for a read-only card (`.set-card.sunken`);
    the caret is hidden because the field is not for typing. The way out is the composer's
@@ -2462,7 +2478,7 @@ body.web-mode .content {
 }
 /* The locked composer's foot: where a draft's foot offers images, a scheduled post's says
    the way out, "Cancel the schedule to edit", with the read-only lock Settings uses. It is
-   a hint, not a control (Cancel stays on the banner, DESIGN §7), so no pointer and no hover
+   a hint, not a control (Cancel stays on the banner, DESIGN §3), so no pointer and no hover
    lift. `.nudge` pulses it once, in the read-only note's tint, when an edit is attempted,
    so the refusal is seen where the keystroke landed; reduced-motion holds the tint instead. */
 .composer-foot-lock {
@@ -2501,7 +2517,14 @@ body.web-mode .content {
 .actions-bar > .row:only-child {
   margin-left: auto;
 }
-/* The autosave cue (DESIGN §2, home ⑤), beside Save draft. Model B's save lifecycle:
+/* The save side takes the room left over and lets a long cue (why a save failed) wrap
+   inside it, so the test and schedule buttons keep their place at the right. */
+.actions-bar > .row:first-child:not(:only-child) {
+  flex: 1 1 16rem;
+  min-width: 0;
+  flex-wrap: nowrap;
+}
+/* The autosave cue (DESIGN §5, §6), beside Save draft. The editor's save lifecycle:
    Unsaved (amber --warn dot) · Saving… (pulsing --accent dot) · Saved (green --ok
    dot). The dot is a reinforcement, never the whole signal — the text label carries
    each state too, so the cue survives a reader who can't tell the dot's color. The
@@ -2510,6 +2533,7 @@ body.web-mode .content {
 .save-status {
   display: inline-flex;
   align-items: center;
+  min-width: 0;
   gap: 7px;
   font-size: 13px;
   color: var(--muted);
@@ -2520,9 +2544,13 @@ body.web-mode .content {
 .save-status.is-dirty {
   color: var(--fg);
 }
+.save-status.is-error {
+  color: var(--danger-fg);
+}
 .save-status.is-dirty::before,
 .save-status.is-saving::before,
-.save-status.is-saved::before {
+.save-status.is-saved::before,
+.save-status.is-error::before {
   content: "";
   width: 8px;
   height: 8px;
@@ -2539,6 +2567,9 @@ body.web-mode .content {
 .save-status.is-saved::before {
   background: var(--ok-fg);
 }
+.save-status.is-error::before {
+  background: var(--danger-fg);
+}
 @keyframes save-pulse {
   0%,
   100% {
@@ -2637,7 +2668,7 @@ body.web-mode .content {
   margin: 0 0 14px;
   line-height: 1.5;
 }
-/* A dialog's not-connected line (DESIGN §2) takes the health block's amber warning, so it
+/* A dialog's not-connected line (DESIGN §4) takes the health block's amber warning, so it
    reads as the reason the dialog's action is off rather than as one more hint. */
 .modal .hint.not-connected {
   color: var(--warn-fg);
@@ -2666,10 +2697,16 @@ body.web-mode .content {
   padding-top: 14px;
   border-top: 1px solid var(--line);
 }
-/* The alternate-path row can carry a plain note beside its link. */
+/* The alternate-path row can carry a plain note beside its link; the note wraps and the
+   link stays whole on its line. */
 .modal .altrow .altrow-note {
   font-size: 12.5px;
   color: var(--muted);
+  min-width: 0;
+}
+.modal .altrow .linkbtn {
+  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. */
@@ -2679,7 +2716,7 @@ body.web-mode .content {
   border-top: 0;
   justify-content: flex-start;
 }
-/* Link — a text-link-styled action (DESIGN §1), not one of the button roles. Reserved
+/* 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
    the Schedule Primary: it must read as clearly demoted, so it is a link, not a Ghost
    button that would compete with Cancel. Still a real <button>, so it's keyboard- and
@@ -2700,12 +2737,12 @@ button.linkbtn:hover {
 
 .countdown {
   font-variant-numeric: tabular-nums;
-  /* The scheduled violet (DESIGN §3), so the fire-time countdown on the scheduled
+  /* The scheduled violet (DESIGN §8), so the fire-time countdown on the scheduled
      cards (Sent page + dashboard) carries the same "scheduled" cue as the pill. */
   color: var(--status-scheduled-fg);
 }
 /* Past the server's missed tolerance the countdown says how late the send is, in the
-   danger tone: a missed fire time needs a look (DESIGN §9). */
+   danger tone: a missed fire time needs a look (DESIGN §4). */
 .countdown.countdown-missed {
   color: var(--danger-fg);
 }
@@ -2829,6 +2866,23 @@ td.act {
 .menu-item.danger-item {
   color: var(--danger-fg);
 }
+/* A menu whose items say what each pick does: a name over a muted line. */
+.menu-described {
+  width: 280px;
+  max-width: min(280px, 78vw);
+}
+.menu-item-name {
+  display: block;
+  font-size: 13px;
+  font-weight: 600;
+}
+.menu-item-desc {
+  display: block;
+  margin-top: 1px;
+  font-size: 11.5px;
+  color: var(--muted);
+  line-height: 1.35;
+}
 
 /* editor field hints + scheduled banner */
 .field-hint {
@@ -2836,7 +2890,7 @@ td.act {
   color: var(--muted);
   margin-top: 4px;
 }
-/* --- Field validation (DESIGN §2, home ④): an error about one field lives on that
+/* --- Field validation (DESIGN §5): an error about one field lives on that
    field — the input goes to an invalid state and the reason sits directly beneath it,
    tied by aria-describedby. This replaces the old disable-the-button + `title` tooltip,
    which never reached keyboard, touch, or screen-reader users. --- */
@@ -2856,6 +2910,11 @@ textarea.is-invalid {
 .field-error .field-error-ico {
   font-weight: 700;
 }
+/* A dialog's own error, when no one field is at fault: just above its actions, where the
+   reader is looking rather than in a toast at the foot of the screen (DESIGN §5). */
+.modal .dialog-error {
+  margin-top: 12px;
+}
 /* Label + info icon grouped at the top of the slug field. */
 .label-row {
   display: flex;
@@ -2964,11 +3023,10 @@ textarea.is-invalid {
 #f-slug.slug-auto {
   color: var(--muted);
 }
-/* --- Editor-state banner (DESIGN §2, home ③): one persistent, in-flow notice at the
-   top of the editor, in three variants. `scheduled` marks a frozen/soft-locked post
-   (SPEC §6); `conflict` warns the draft changed elsewhere (another tab, or Claude) —
-   its two actions are equal-weight Ghost, since both choices lose something; `info` is
-   a neutral notice. It replaces the old `.sched-banner` + `.fresh-banner` pair. --- */
+/* --- 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
+   actions are equal-weight Ghost, since both choices lose something. --- */
 .banner {
   display: flex;
   align-items: center;
@@ -2997,59 +3055,21 @@ textarea.is-invalid {
   color: var(--warn-fg);
   border-color: var(--warn-line);
 }
-.banner-info {
-  background: var(--banner-bg);
-  color: var(--fg);
-  border-color: var(--banner-line);
-}
 
-/* --- Notice (DESIGN §2, home ⑥): an event the reader could not otherwise know happened,
-   shown once and cleared by the reader, asking nothing. It wears the banner's `info` tone
-   (the same tokens as .banner-info, so the tint has one definition) but is its own class:
-   its layout is prose plus one control, not a status line with an actions row, so it never
-   wraps the dismiss beneath the text the way the banner wraps its buttons. Padding is a
-   full 1rem because it is a sentence or two, not a status line. Removed on dismiss with
-   no animation. Both themes come through the existing tokens. --- */
-.notice {
+/* Look changed since your last test (SPEC §8): the server's condition, a line in the scheduled
+   banner that says to send a new test, and a mark on the dashboard's scheduled card. */
+.sched-remade {
   display: flex;
-  align-items: flex-start;
-  gap: 12px;
-  border: 1px solid var(--banner-line);
-  border-radius: 8px;
-  background: var(--banner-bg);
-  color: var(--fg);
-  padding: 1rem;
-  margin-bottom: 14px;
-  font-size: 14px;
-  line-height: 1.45;
-}
-.notice-text {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-/* Links are allowed (buttons are not); underlined so they stay findable on the tint. */
-.notice a {
-  color: var(--accent);
-  font-weight: 550;
-  text-decoration: underline;
-  text-underline-offset: 2px;
-}
-/* The dismiss is the Icon role (button.icon) carrying the app's `x` glyph: a square hit
-   target pinned to the right, pulled 4px into the padding on three sides so it centers on
-   the first line of text without making a one-line notice taller than its text. */
-button.notice-dismiss {
-  flex: 0 0 auto;
-  display: inline-flex;
+  flex-wrap: wrap;
   align-items: center;
-  justify-content: center;
-  width: 28px;
-  height: 28px;
-  padding: 0;
-  margin: -4px -4px -4px 0;
+  gap: 4px 10px;
+  margin-top: 6px;
+  font-size: 13px;
 }
-button.notice-dismiss svg {
-  width: 14px;
-  height: 14px;
+.sched-remade-mark {
+  margin-top: 4px;
+  font-size: 12.5px;
+  color: var(--status-scheduled-fg);
 }
 
 .grid2 {
@@ -3931,7 +3951,7 @@ button.api-filter-clear svg {
   text-decoration: underline;
 }
 
-/* Publication card: the live-site + archive URLs with copy buttons. */
+/* Publication card: the home page's address with Copy, and the way out to it. */
 .pub-card {
   display: flex;
   flex-direction: column;
@@ -3942,10 +3962,6 @@ button.api-filter-clear svg {
   align-items: center;
   gap: 12px;
 }
-.pub-key {
-  flex: 0 0 84px;
-  font-size: 12px;
-}
 .pub-val {
   flex: 1 1 auto;
   min-width: 0;
@@ -4052,10 +4068,9 @@ button.api-filter-clear svg {
    deploy / Copy-out), editable surfaces sit on cards and read-only
    facts on a recessed "sunken" card. Kestrel's own accents use the
    fixed --accent (a slate-blue), independent of the reader surface.
-   A sticky save bar collects the unsaved, persisted changes
-   (identity + test recipients); the logo and the email-template
-   mock are handled on their own and don't feed it. Theme follows
-   the OS via the tokens at the top of this file.
+   A sticky save bar collects every editable section's unsaved
+   changes; the logo saves on its own and doesn't feed it. Theme
+   follows the OS via the tokens at the top of this file.
    ============================================================ */
 .settings {
   max-width: 940px;
@@ -4081,7 +4096,7 @@ button.api-filter-clear svg {
   margin-bottom: 34px;
 }
 
-/* --- copying text out of the app (DESIGN §1, ui/copy.ts) ---
+/* --- copying text out of the app (DESIGN §7, ui/copy.ts) ---
    A labelled block (a code block, or the API reference's query and content-type tables):
    its label line, then the block. The Copy is a control outside the five roles: the word
    and its glyph, no fill or border, quiet on the line it shares; the glyph turns to a
@@ -4143,7 +4158,7 @@ button.copied svg {
   flex: 0 0 auto;
 }
 
-/* --- groups: the sections kept together by whom they serve (DESIGN §5). A group has no
+/* --- 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
    between sections is all that separates one group from the next. --- */
 .set-group + .set-group {
@@ -4194,7 +4209,7 @@ button.copied svg {
   background: var(--accent-soft);
 }
 /* In use by scheduled posts (SPEC §9): the scheduled violet, a lifecycle fact and not a
-   warning, the same reading as the scheduled badge (DESIGN §3). Adds no token. */
+   warning, the same reading as the scheduled badge (DESIGN §8). Adds no token. */
 .set-chip.inuse {
   color: var(--status-scheduled-fg);
   border-color: var(--status-scheduled-line);
@@ -4207,22 +4222,12 @@ button.copied svg {
   background: currentColor;
   opacity: 0.85;
 }
+/* Set at deploy: a fact about where the value lives, not a warning, so it stays neutral
+   rather than borrowing the amber `warn` scale (DESIGN §8). */
 .set-chip.readonly {
-  color: var(--warn-fg);
-  border-color: color-mix(in srgb, var(--warn-fg) 30%, var(--line-soft));
-  background: color-mix(in srgb, var(--warn-fg) 9%, transparent);
-}
-/* A dashed "Mock" tag beside the Email-template chip — says the section is a
-   preview of a feature not wired to the backend yet. */
-.set-tag-mock {
-  font-size: 10px;
-  font-weight: 650;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  padding: 3px 7px;
-  border-radius: 6px;
-  border: 1px dashed var(--line-soft);
   color: var(--muted);
+  border-color: var(--line);
+  background: var(--chip);
 }
 
 /* --- cards: editable surfaces raised, read-only facts recessed --- */
@@ -4411,7 +4416,7 @@ button.set-field-remove {
   align-items: flex-start;
   padding: 11px 16px;
   border-bottom: 1px solid var(--line-soft);
-  background: color-mix(in srgb, var(--warn-fg) 6%, transparent);
+  background: var(--chip);
   font-size: 12.5px;
   color: var(--muted);
   line-height: 1.5;
@@ -4421,7 +4426,7 @@ button.set-field-remove {
   height: 15px;
   flex: 0 0 auto;
   margin-top: 1px;
-  color: var(--warn-fg);
+  color: var(--muted);
 }
 .set-kv {
   display: grid;
@@ -4758,14 +4763,21 @@ button.set-field-remove {
 }
 .set-recip-add {
   display: flex;
+  flex-wrap: wrap;
   gap: 8px;
   max-width: 420px;
 }
 .set-recip-add input {
   flex: 1;
 }
+/* A refused address says why on its own line under the field and its button (DESIGN §5). */
+.set-recip-add .field-error {
+  flex-basis: 100%;
+  order: 1;
+  margin-top: 0;
+}
 
-/* --- ways to subscribe (DESIGN §5): one card, the two ways as bands in reading order,
+/* --- ways to subscribe (DESIGN §3): one card, the two ways as bands in reading order,
    the page then the form, split by a full-width rule like the other cards' bands. Each
    band has the same head (a glyph, a title, one line) so they read as two options. The
    card folds by the section's own width, since the sidebar decides how wide Settings is. --- */
@@ -4956,7 +4968,7 @@ button.set-embed-copy svg {
   color: var(--muted);
 }
 
-/* --- email template (mock): a standalone sample-email frame, then a card holding
+/* --- email template: a standalone sample-email frame, then a card holding
    the HTML template editor and a collapsible variable reference. The example
    templates are authored with a <style> block; the preview renders them in an
    isolated iframe, so a template's own styles apply as a mail client would show
@@ -4991,7 +5003,7 @@ button.set-embed-copy svg {
   font-size: 12px;
   color: var(--muted);
 }
-/* Syntax-highlight overlay editor (issue #123): a transparent <textarea> over a
+/* Syntax-highlight overlay editor: a transparent <textarea> over a
    highlighted <pre>, plus a line-number gutter. All three share identical font
    metrics so the caret sits exactly over the colored text; the textarea is the only
    scroller and the gutter + overlay are synced to it in script. */
@@ -5067,7 +5079,7 @@ button.set-embed-copy svg {
 .set-tpl-editor-wrap.show-lines .set-tpl-editor {
   left: 47px;
 }
-/* Syntax colors (issue #123). */
+/* Syntax colors. */
 .cx-tag {
   color: var(--syntax-tag);
 }
@@ -5097,7 +5109,7 @@ button.set-embed-copy svg {
   padding: 0 2px;
   font-weight: 600;
 }
-/* Markdown token classes (issue #138) — the minimal scheme: the MARK carries the color, the
+/* Markdown token classes — the minimal scheme: the MARK carries the color, the
    CONTENT keeps --syntax-fg and carries only weight/slant. So a bold word reads as weight, not
    as a hue that competes with a heading. Heading text is bold with a crimson # mark; emphasis
    asterisks are pink around plain weighted/slanted text; block markers (>, bullets, the fence
@@ -5309,7 +5321,7 @@ button.set-embed-copy svg {
   background: var(--accent-soft);
   border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft));
 }
-/* Required-token pills (issue #123 revisit): live green/red for the two tokens whose
+/* Required-token pills: live green/red for the two tokens whose
    absence blocks a save, shown upper-right of the editor toolbar. */
 .set-tpl-required {
   display: flex;
@@ -5373,10 +5385,7 @@ button.set-embed-copy svg {
   box-shadow: 0 1px 4px rgba(15, 18, 25, 0.1);
   transition: max-width 0.16s ease;
 }
-/* "Start from example" dropdown menu — a compact, secondary action. */
-.set-menu {
-  position: relative;
-}
+/* "Start from example": the trigger of a shared menu (openMenu). */
 .set-menu-btn {
   display: inline-flex;
   align-items: center;
@@ -5390,45 +5399,6 @@ button.set-embed-copy svg {
   transform: translateY(-1px) rotate(45deg);
   opacity: 0.6;
 }
-.set-menu-list {
-  position: absolute;
-  left: 0;
-  top: calc(100% + 6px);
-  z-index: var(--z-menu);
-  width: 280px;
-  max-width: min(280px, 78vw);
-  padding: 5px;
-  background: var(--card);
-  border: 1px solid var(--line);
-  border-radius: 10px;
-  box-shadow: 0 10px 28px rgba(15, 18, 25, 0.16);
-}
-.set-menu-list button {
-  display: block;
-  width: 100%;
-  text-align: left;
-  border: 0;
-  background: transparent;
-  border-radius: 7px;
-  padding: 8px 10px;
-  cursor: pointer;
-}
-.set-menu-list button:hover {
-  background: var(--sunken);
-}
-.set-menu-name {
-  display: block;
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--fg);
-}
-.set-menu-desc {
-  display: block;
-  margin-top: 1px;
-  font-size: 11.5px;
-  color: var(--muted);
-  line-height: 1.35;
-}
 /* Variables card heading. */
 .set-tpl-vartitle {
   margin: 0 0 2px;
@@ -5442,7 +5412,7 @@ button.set-embed-copy svg {
 .set-tpl-varcard .set-tpl-vars-body {
   padding: 0;
 }
-/* The "this is a mock" note under the editor. */
+/* The note at the foot of a card: what the section is for, or where it is set. */
 .set-note {
   display: flex;
   align-items: flex-start;
@@ -5707,7 +5677,7 @@ button.set-embed-copy svg {
    icon rail — and collapses to edge-to-edge once the sidebar becomes the off-canvas
    mobile drawer. The post editor keeps its own autosave + conflict model, so it does
    NOT use this bar. Its Save is a Primary button — now brand-blue --accent app-wide
-   (DESIGN §1), so the bar needs no primary override of its own. --- */
+   (DESIGN §7), so the bar needs no primary override of its own. --- */
 .savebar {
   position: fixed;
   /* Clears the full 240px sidebar; narrowed to the rail / drawer in the rules below. */