@kurtbruns/kestrel 1.5.0 → 1.7.0

package/dist/public/dashboard/styles.css

@@ -899,6 +899,34 @@ body.nav-resizing .sidebar {
 .auth-wall button {
   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 {
+  max-width: 560px;
+  text-align: left;
+}
+/* Text for a screen reader alone, such as a link's "(opens in a new tab)" beside a ↗ that is
+   hidden from it. */
+.visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+.config-wall h2:focus {
+  outline: none;
+}
+.config-wall-problem {
+  padding: 10px 12px;
+  border-radius: 8px;
+  background: var(--bg);
+  overflow-wrap: anywhere;
+}
 
 /* The routed view. Capped for readability and centered in the space beside the
    sidebar; the editor gets a slightly narrower canvas to match its old width. */
@@ -1169,6 +1197,7 @@ button:active {
 button.primary,
 button.secondary,
 button.ghost,
+a.ghost.btn,
 button.danger,
 button.danger-subtle {
   min-height: 35px;
@@ -1212,7 +1241,8 @@ button.secondary:hover {
 /* Ghost — the quiet neutral role: back, cancel, a menu trigger, a pager step, a copy
    control. The default for anything not asking for attention; absorbs the old
    .ghost-btn / .set-btn-ghost idioms. */
-button.ghost {
+button.ghost,
+a.ghost.btn {
   display: inline-flex;
   align-items: center;
   gap: 6px;
@@ -1223,10 +1253,19 @@ button.ghost {
   padding: 6px 12px;
   border-radius: 6px;
 }
-button.ghost:hover {
+button.ghost:hover,
+a.ghost.btn:hover {
   color: var(--fg);
   border-color: var(--muted);
 }
+/* A link that wears Ghost (`a.ghost.btn`: Web version ↗ goes to a page rather than
+   acting on one), with a link's own underline and transition taken off so it reads as
+   the buttons beside it. The plain `a.ghost` is the sidebar's text-link Sign out. */
+a.ghost.btn {
+  text-decoration: none;
+  line-height: normal;
+  transition: border-color 0.12s;
+}
 /* A copy control flashes green (--ok) once the clipboard write lands. */
 button.ghost.copied {
   color: var(--ok-fg);
@@ -1699,6 +1738,83 @@ th.num .th-sort {
   align-items: center;
   gap: 10px;
 }
+/* A post's web version (#/web/post/…): the post page as it will look, filling the window
+   with no app chrome, since it opens in a tab of its own. The window scrolls the page. */
+body.web-mode .sidebar,
+body.web-mode .nav-toggle {
+  display: none;
+}
+body.web-mode .content {
+  max-width: none;
+  margin: 0;
+  padding: 0;
+}
+/* The page sits under one strip that says where the post stands (DESIGN §7). 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
+   sits in the default template's column so it lines up with the post. The test pages carry
+   the same strip in the reader shell (READER_BANNER_STYLE in src/lib/page.ts); keep the two
+   in sync. */
+/* At least the window's height, so a post shorter than the window still has its own
+   ground to the bottom: the frame grows into what's left, and the framed page's background
+   fills it. */
+.web-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100dvh;
+}
+.web-bar {
+  flex: none;
+  background: var(--accent);
+  color: var(--accent-on);
+  font-size: 13.5px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+/* The tag runs in, inline with the sentence, so on a phone the sentence wraps beneath it at
+   the strip's full width rather than in a narrow column beside it. */
+.web-bar-in {
+  /* The default template's 664px column inside its 12px gutter, with the column's 32px
+     padding, so the strip's text starts on the post's left edge at any width over a phone's. */
+  max-width: 688px;
+  margin: 0 auto;
+  padding: 10px 44px;
+  text-align: left;
+}
+.web-bar-tag {
+  display: inline-block;
+  margin-right: 10px;
+  font-size: 10px;
+  letter-spacing: 0.09em;
+  text-transform: uppercase;
+  font-weight: 700;
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: var(--accent-on);
+  color: var(--accent);
+}
+.web-bar-text {
+  overflow-wrap: anywhere;
+}
+@media (max-width: 560px) {
+  .web-bar-in {
+    padding: 10px 16px;
+  }
+}
+.web-frame {
+  display: block;
+  flex: 1 0 auto;
+  width: 100%;
+  /* The post's height once measured; until then a window's, so the page doesn't flash short. */
+  height: 100vh;
+  border: 0;
+}
+.web-error {
+  max-width: 640px;
+  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
    a feedback color, still labels the send's lifecycle. */
@@ -2332,6 +2448,13 @@ th.num .th-sort {
 .composer-foot:hover {
   color: var(--fg);
 }
+/* On the Preview tab the image foot dims with the toolbar (`.toolbar.off`): a click there
+   would insert into the hidden Edit text. A drop on the composer still works; it switches
+   to Edit first, so the result is seen. */
+.composer-foot.off {
+  opacity: 0.4;
+  pointer-events: none;
+}
 .composer-foot svg {
   width: 16px;
   height: 16px;
@@ -2437,29 +2560,52 @@ th.num .th-sort {
 }
 
 /* toasts (live region) */
+/* Spans the viewport and centers its toasts, rather than left: 50% plus a transform,
+   which caps a toast's width at half the screen and wraps a sentence on a phone. */
 #toasts {
   position: fixed;
   bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
+  left: 16px;
+  right: 16px;
   display: flex;
   flex-direction: column;
-  gap: 8px;
   align-items: center;
   z-index: var(--z-toast);
   pointer-events: none;
 }
+/* Spaced by margin, not the column's gap, so a leaving toast can collapse its share. */
 .toast {
+  box-sizing: border-box;
+  max-width: 480px;
+  margin-top: 8px;
+  overflow: hidden;
   background: var(--fg);
   color: var(--bg);
   padding: 10px 16px;
   border-radius: 8px;
   font-size: 14px;
   opacity: 0;
-  transition: opacity 0.2s;
+  transform: translateY(6px);
+  transition:
+    opacity 0.2s,
+    transform 0.2s;
 }
 .toast.show {
   opacity: 1;
+  transform: none;
+}
+/* Leaving: fade while the height (set inline by leaveToast, since a transition can't run
+   from auto), padding, and spacing collapse, so the stack settles smoothly. 0.3s is
+   TOAST_LEAVE_MS in client/ui/widgets.ts. */
+.toast.leaving {
+  opacity: 0;
+  margin-top: 0;
+  padding-block: 0;
+  transition:
+    opacity 0.2s,
+    height 0.3s,
+    margin-top 0.3s,
+    padding-block 0.3s;
 }
 
 /* modal */
@@ -2491,6 +2637,18 @@ th.num .th-sort {
   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
+   reads as the reason the dialog's action is off rather than as one more hint. */
+.modal .hint.not-connected {
+  color: var(--warn-fg);
+  background: var(--warn-bg);
+  border: 1px solid var(--warn-line);
+  border-radius: 8px;
+  padding: 10px 12px;
+}
+.modal .hint.not-connected a {
+  color: inherit;
+}
 .modal .actions {
   display: flex;
   justify-content: flex-end;
@@ -2784,7 +2942,7 @@ textarea.is-invalid {
 .info.tip-below:focus::after {
   transform: translateY(0);
 }
-/* "Auto-generate from subject" toggle, grouped just under the slug field. */
+/* The "Auto-generate from subject" toggle, grouped just under the slug field. */
 .slug-auto-toggle {
   display: inline-flex;
   align-items: center;
@@ -2802,7 +2960,7 @@ textarea.is-invalid {
   accent-color: var(--ring);
   cursor: pointer;
 }
-/* Slug is muted while it auto-tracks the subject; normal once hand-set. */
+/* Slug is muted while it follows the subject; normal once set by hand. */
 #f-slug.slug-auto {
   color: var(--muted);
 }
@@ -3411,44 +3569,6 @@ button.api-filter-clear svg {
   margin: 6px 0 0;
   font-size: 14px;
 }
-.api-ex {
-  margin-top: 10px;
-}
-.api-ex-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 8px 0 4px;
-}
-/* A code block's Copy (DESIGN §1, a control outside the five roles): the word and its
-   glyph, no fill or border, quiet on the label line it shares. The glyph turns to a check
-   in the ok hue for a moment once the copy has landed; the word stays. */
-button.api-copy {
-  display: inline-flex;
-  align-items: center;
-  gap: 5px;
-  border: 0;
-  background: transparent;
-  color: var(--muted);
-  font-size: 12px;
-  padding: 2px 6px;
-  border-radius: 5px;
-}
-button.api-copy:hover {
-  color: var(--fg);
-  background: var(--hover);
-}
-/* No pressed nudge: on a quiet word the button-wide half-pixel drop reads as a jump. */
-button.api-copy:active {
-  transform: none;
-}
-button.api-copy svg {
-  width: 13px;
-  height: 13px;
-}
-button.api-copy.copied svg {
-  color: var(--ok-fg);
-}
 /* A query parameter the route can't be called without. */
 .api-req {
   margin-left: 4px;
@@ -3458,22 +3578,7 @@ button.api-copy.copied svg {
   border-radius: 4px;
   padding: 0 4px;
 }
-.api-ex-label {
-  display: block;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--muted);
-}
 
-.api-ex 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);
-}
 .api-empty {
   margin: 20px 0;
 }
@@ -3852,9 +3957,6 @@ button.api-copy.copied svg {
   border-radius: 6px;
   padding: 6px 9px;
 }
-.pub-row button.ghost {
-  flex: 0 0 auto;
-}
 .pub-foot {
   margin-top: 4px;
 }
@@ -3928,6 +4030,16 @@ button.api-copy.copied svg {
 .setup-steps li button {
   flex: 0 0 auto;
 }
+/* The setup step's Copy keeps the step's button look, with the shared Copy's glyph. */
+.setup-steps li button[data-copy] {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.setup-steps li button[data-copy] svg {
+  width: 14px;
+  height: 14px;
+}
 .setup-url {
   font: 12.5px var(--mono);
   color: var(--muted);
@@ -3968,6 +4080,75 @@ button.api-copy.copied svg {
 .set-sec {
   margin-bottom: 34px;
 }
+
+/* --- copying text out of the app (DESIGN §1, 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
+   check in the ok hue for a moment once a copy has landed, and the word stays. A Copy
+   beside a single value (an address) is the same control. --- */
+.block {
+  margin-top: 10px;
+}
+.block-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin: 8px 0 4px;
+}
+button.copy-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  border: 0;
+  background: transparent;
+  color: var(--muted);
+  font-size: 13px;
+  padding: 4px 8px;
+  border-radius: 5px;
+}
+button.copy-btn:hover {
+  color: var(--fg);
+  background: var(--hover);
+}
+/* No pressed nudge: on a quiet word the button-wide half-pixel drop reads as a jump. */
+button.copy-btn:active {
+  transform: none;
+}
+button.copy-btn svg {
+  width: 14px;
+  height: 14px;
+}
+/* Any Copy that has just landed, whatever button it rides (ui/copy.ts). */
+button.copied svg {
+  color: var(--ok-fg);
+}
+.block-label {
+  display: block;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--muted);
+}
+.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);
+}
+/* A Copy beside a value keeps its size however long the value runs. */
+.pub-row button.copy-btn {
+  flex: 0 0 auto;
+}
+
+/* --- groups: the sections kept together by whom they serve (DESIGN §5). 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 {
+  margin-top: 22px;
+}
 .set-sec-head {
   display: flex;
   align-items: center;
@@ -4065,7 +4246,7 @@ button.api-copy.copied svg {
   padding: 18px;
 }
 
-/* Kestrel-accent links inside the settings cards (operator-guide links, Open ↗). */
+/* Kestrel-accent links inside the settings cards (operator-guide links). */
 .set-link {
   color: var(--accent);
   font-weight: 550;
@@ -4087,6 +4268,11 @@ button.api-copy.copied svg {
   flex-direction: column;
   gap: 8px;
 }
+/* The hint and the not-square warning stack in one column, under the tile on a wide
+   screen and beside it where the slot becomes a row. */
+.set-logo-notes {
+  min-width: 0;
+}
 .set-logo-tile {
   width: 100%;
   aspect-ratio: 1;
@@ -4481,16 +4667,6 @@ button.set-field-remove {
 .set-ce-edit {
   padding: 18px;
 }
-.set-ce-lock {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-}
-.set-ce-lock svg {
-  width: 13px;
-  height: 13px;
-  flex: 0 0 auto;
-}
 .set-ce-editfoot {
   display: flex;
   align-items: center;
@@ -4589,89 +4765,194 @@ button.set-field-remove {
   flex: 1;
 }
 
-/* --- ways to subscribe: URL row reuses .pub-row; embed adds a rendered preview --- */
-.set-embed-head {
+/* --- ways to subscribe (DESIGN §5): 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. --- */
+.set-sec-subscribe {
+  container-type: inline-size;
+}
+.set-way + .set-way {
+  border-top: 1px solid var(--line);
+}
+/* A control that switches what the band shows (the embed's Styled | Plain) sits at
+   the head's right end, as the reader pages' width toggle does. */
+.set-way-head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
-  gap: 12px;
-  flex-wrap: wrap;
-  margin: 2px 0 8px;
+  gap: 10px 16px;
+  padding: 18px 18px 0;
+}
+/* The name takes the room the control leaves, so the control keeps its size. */
+.set-way-name {
+  flex: 1 1 0;
+  min-width: 0;
 }
-.set-embed pre {
+/* Set like a field label, its glyph like a note's, so the band ranks with the other cards. */
+.set-way-title {
+  display: flex;
+  align-items: center;
+  gap: 7px;
   margin: 0;
-  overflow-x: auto;
-  background: var(--bg);
-  border: 1px solid var(--line);
-  border-radius: 8px;
-  padding: 12px 14px;
-  font: 12.5px / 1.6 var(--mono);
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--fg);
 }
-.set-embed pre code {
-  white-space: pre;
+.set-way-title svg {
+  width: 15px;
+  height: 15px;
+  flex: 0 0 auto;
+  fill: currentColor;
+  color: var(--muted);
+}
+.set-way-line {
+  margin: 3px 0 0;
+  font-size: 12.5px;
+  color: var(--muted);
+  line-height: 1.5;
+}
+.set-way-body {
+  padding: 10px 18px 18px;
+}
+/* The address is a value to copy, not a field: plain monospace, its Copy and Open beside it. */
+.set-way-addr {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px 6px;
+  min-width: 0;
+}
+.set-addr {
+  font: 13.5px var(--mono);
+  color: var(--fg);
+  overflow-wrap: anywhere;
+  margin-right: 4px;
+}
+/* The form as it will look beside the code that makes it, both always shown, edge to
+   edge in the card like the reader pages' outline beside its frame. The preview grows to
+   480px, near the styled form's own 460px cap, so it shows the form about as wide as a
+   site will; the code keeps 280px, so on a narrower card the preview gives way first. */
+.set-embed {
+  display: grid;
+  grid-template-columns: minmax(240px, 480px) minmax(280px, 1fr);
+  margin-top: 16px;
+  border-top: 1px solid var(--line);
 }
 .set-embed-preview {
-  margin: 14px 0 0;
-  border: 1px dashed var(--line-soft);
-  border-radius: 8px;
-  padding: 18px 16px;
+  display: flex;
+  align-items: center;
+  padding: 18px;
   background: var(--sunken);
+  border-right: 1px solid var(--line);
+  min-width: 0;
 }
-.set-embed-cap {
-  font-size: 10.5px;
-  font-weight: 650;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--muted);
-  margin-bottom: 12px;
+.set-embed-preview > form {
+  width: 100%;
 }
-/* Rendered form previews (inert — they never submit here). */
-.set-pf-plain label {
-  display: block;
-  font-size: 13px;
-  margin: 0 0 4px;
-  font-weight: 600;
-  color: var(--fg);
+/* The code wraps rather than scrolling sideways, so the Styled snippet's long lines read
+   whole in the column; the copied text is unchanged. */
+.set-embed-code {
+  margin: 0;
+  min-width: 0;
+  padding: 12px 14px;
+  max-height: 220px;
+  overflow: auto;
+  font: 12px / 1.55 var(--mono);
 }
-.set-pf-plain input {
-  max-width: 260px;
-  margin-bottom: 8px;
+.set-embed-code code {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
-.set-pf-plain button {
-  display: block;
+/* The band ends in its one act: read top to bottom, choose, see the form and its code,
+   then copy. A strip across the card's foot, as Notifications ends in its test row. */
+.set-embed-foot {
+  display: flex;
+  justify-content: flex-end;
+  padding: 12px 18px;
+  border-top: 1px solid var(--line);
 }
+/* Copy HTML is Secondary with the shared Copy's word and glyph, as the setup step's is. */
+button.set-embed-copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+}
+button.set-embed-copy svg {
+  width: 14px;
+  height: 14px;
+}
+@container (max-width: 620px) {
+  /* No room beside the title: the toggle drops under the band's line, at its left. */
+  .set-way-head {
+    flex-direction: column;
+  }
+  .set-way-name {
+    flex-basis: auto;
+  }
+  .set-embed {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .set-embed-preview {
+    border-right: 0;
+    border-bottom: 1px solid var(--line);
+  }
+}
+/* Rendered form previews (inert: they never submit here). The plain form is bare
+   markup, so it previews with the browser's own controls and inline flow, as a page
+   with no styles of its own would show it, never the admin's inputs. */
+.set-pf-plain,
+.set-pf-plain :is(label, input, button) {
+  all: revert;
+}
+.set-pf-plain input {
+  margin: 4px 4px 4px 0;
+}
+/* The styled form wears the hosted subscribe page's look (SPEC §5), at the snippet's own
+   sizes, so the preview is the form a publisher copies. */
 .set-pf-styled {
-  max-width: 440px;
+  max-width: 460px;
+  font-size: 16px;
 }
 .set-pf-styled .l {
   display: block;
-  font-size: 13.5px;
-  font-weight: 600;
-  margin-bottom: 6px;
+  font:
+    600 22px / 1.2 Georgia,
+    "Times New Roman",
+    serif;
+  letter-spacing: -0.01em;
+  margin-bottom: 12px;
   color: var(--fg);
 }
 .set-pf-styled .rowf {
   display: flex;
-  gap: 8px;
+  flex-wrap: wrap;
+  gap: 10px;
 }
 .set-pf-styled input {
-  flex: 1;
+  flex: 1 1 220px;
   min-width: 0;
+  padding: 11px 13px;
+  border-radius: 9px;
+  font-size: 16px;
 }
 /* The styled subscribe-form preview shows reader-facing chrome, not an admin control,
-   so it isn't one of the five button roles — but it rides the neutral --ink token
+   so it isn't one of the five button roles, but it rides the neutral --ink token
    (was a hardcoded near-black that vanished in dark mode) so it themes correctly. */
 .set-pf-styled .sub-btn {
   flex: 0 0 auto;
+  padding: 11px 20px;
+  border-radius: 9px;
   background: var(--ink);
   color: var(--ink-on);
   border-color: var(--ink);
+  font-size: 15px;
   font-weight: 600;
   white-space: nowrap;
 }
 .set-pf-fine {
-  margin: 8px 0 0;
-  font-size: 12px;
+  margin: 12px 0 0;
+  font-size: 12.5px;
   color: var(--muted);
 }
 
@@ -5028,10 +5309,6 @@ button.set-field-remove {
   background: var(--accent-soft);
   border-color: color-mix(in srgb, var(--accent) 30%, var(--line-soft));
 }
-.set-icon-btn.copied {
-  color: var(--ok-fg);
-  border-color: color-mix(in srgb, var(--ok-fg) 40%, var(--line-soft));
-}
 /* Required-token pills (issue #123 revisit): live green/red for the two tokens whose
    absence blocks a save, shown upper-right of the editor toolbar. */
 .set-tpl-required {
@@ -5184,6 +5461,243 @@ button.set-field-remove {
   color: var(--muted);
 }
 
+/* --- Reader pages: an outline of every page a reader can land on, beside one framed page ---
+   The journeys are the outline's headings, set like section titles and never controls;
+   the pages are its rows. A journey's steps are numbered on a thread, peers carry a dot,
+   and an off-path page carries a dashed branch mark. The section folds by its own width,
+   not the window's (the sidebar decides how wide Settings is): too narrow for the outline,
+   it becomes one grouped select, and the width toggle goes, since the frame is already
+   no wider than a phone. The page brings its own ground, so the frame has none. */
+.set-rp-sec {
+  container-type: inline-size;
+}
+.set-rp {
+  display: grid;
+  grid-template-columns: 210px minmax(0, 1fr);
+  overflow: hidden;
+}
+.set-rp-nav {
+  border-right: 1px solid var(--line);
+  background: var(--sunken);
+  padding: 14px 10px 18px;
+}
+.set-rp-journey + .set-rp-journey {
+  margin-top: 16px;
+}
+.set-rp-jhead {
+  display: flex;
+  align-items: center;
+  gap: 7px;
+  margin: 0 6px 6px;
+  font-size: 11px;
+  font-weight: 650;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+  color: var(--muted);
+}
+.set-rp-jhead svg {
+  width: 13px;
+  height: 13px;
+}
+.set-rp-journey.current .set-rp-jhead {
+  color: var(--fg);
+}
+.set-rp-list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  position: relative;
+}
+/* The thread behind a journey's numbered steps, from the first mark to the last row. */
+.set-rp-list.steps::before {
+  content: "";
+  position: absolute;
+  left: 17px;
+  top: 14px;
+  bottom: 14px;
+  width: 1px;
+  background: var(--line-soft);
+}
+.set-rp-item {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  text-align: left;
+  border: 0;
+  background: transparent;
+  border-radius: 7px;
+  padding: 5px 8px;
+  font-size: 13px;
+  font-weight: 400;
+  color: var(--fg);
+  cursor: pointer;
+}
+.set-rp-item:hover {
+  background: var(--hover);
+}
+.set-rp-item[aria-current="true"] {
+  background: var(--accent-soft);
+  color: var(--accent);
+  font-weight: 600;
+}
+.set-rp-item.off {
+  color: var(--muted);
+}
+.set-rp-item.off[aria-current="true"] {
+  color: var(--accent);
+}
+.set-rp-mark {
+  position: relative;
+  z-index: 1;
+  flex: 0 0 auto;
+  display: grid;
+  place-items: center;
+  width: 19px;
+  height: 19px;
+  border-radius: 50%;
+  border: 1px solid var(--line-soft);
+  background: var(--card);
+  font-size: 10.5px;
+  font-weight: 650;
+  color: var(--muted);
+}
+.set-rp-item[aria-current="true"] .set-rp-mark {
+  border-color: var(--accent);
+  color: var(--accent);
+}
+.set-rp-item.off .set-rp-mark {
+  border-style: dashed;
+  background: transparent;
+}
+.set-rp-dot {
+  width: 3px;
+  height: 3px;
+  border-radius: 50%;
+  background: currentColor;
+}
+.set-rp-mark svg {
+  width: 11px;
+  height: 11px;
+}
+.set-rp-pick {
+  display: none;
+}
+.set-rp-pick select {
+  width: 100%;
+}
+.set-rp-main {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+}
+.set-rp-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 12px;
+  padding: 14px 16px 12px;
+  border-bottom: 1px solid var(--line);
+}
+.set-rp-crumb {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  margin: 0 0 3px;
+  font-size: 14px;
+  font-weight: 650;
+}
+.set-rp-crumb-j {
+  color: var(--muted);
+  font-weight: 500;
+}
+.set-rp-crumb-sep {
+  color: var(--line-soft);
+  font-weight: 400;
+}
+.set-rp-note {
+  margin: 0;
+  font-size: 12.5px;
+  line-height: 1.5;
+  color: var(--muted);
+  max-width: 60ch;
+}
+.set-rp .set-wtog {
+  flex: 0 0 auto;
+}
+.set-rp .wtog-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+}
+.set-rp .wtog-btn svg {
+  width: 13px;
+  height: 13px;
+}
+/* Where a reader meets the page, and that this one is a sample: the cue a strip inside
+   the page would otherwise carry, kept in the app's chrome around it. */
+.set-rp-at {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  gap: 4px 10px;
+  padding: 7px 16px;
+  border-bottom: 1px solid var(--line);
+  font-size: 11.5px;
+  color: var(--muted);
+}
+.set-rp-at .mono {
+  overflow-wrap: anywhere;
+}
+.set-rp-stage.phone {
+  padding: 18px 12px;
+  background: var(--sunken);
+}
+.set-rp-frame {
+  display: block;
+  width: 100%;
+  min-height: 320px;
+  border: 0;
+}
+.set-rp-stage.phone .set-rp-frame {
+  width: 375px;
+  max-width: 100%;
+  margin: 0 auto;
+  border: 1px solid var(--line);
+  border-radius: 10px;
+}
+.set-rp-error {
+  margin: 0;
+  padding: 12px 16px;
+  font-size: 13px;
+  color: var(--danger-fg);
+}
+@container (max-width: 640px) {
+  .set-rp {
+    grid-template-columns: minmax(0, 1fr);
+  }
+  .set-rp-nav,
+  .set-rp .set-wtog {
+    display: none;
+  }
+  .set-rp-pick {
+    display: block;
+    padding: 12px 14px;
+    border-bottom: 1px solid var(--line);
+    background: var(--sunken);
+  }
+  .set-rp-stage.phone {
+    padding: 0;
+    background: none;
+  }
+  .set-rp-stage.phone .set-rp-frame {
+    width: 100%;
+    border: 0;
+    border-radius: 0;
+  }
+}
+
 /* --- shared unsaved-changes bar -------------------------------------------------
    One full-width banner fixed to the bottom of the viewport, used by every surface
    with an explicit save + a revertible baseline (Settings and the Template page).