daily-focus 1.2.0-dev.8 → 2.0.0-dev.14

package/public/style.css

@@ -541,6 +541,64 @@ body[data-view='tickets'] #brief-refresh {
 .agent-run__message .assistant__reply {
   padding: 0 10px 8px;
 }
+/*
+ * A run's steps, the assistant's look: what it said in its own words between
+ * the calls, and each subagent as a fold under the step that handed it work.
+ */
+.agent-run__list > .agent-run__steps {
+  margin-top: 8px;
+}
+.agent-run__said {
+  margin: 6px 0;
+  font-size: 12.5px;
+  line-height: 1.45;
+  color: var(--ink-1);
+  overflow-wrap: anywhere;
+}
+.agent-run__said:first-child {
+  margin-top: 0;
+}
+.agent-run__said > * {
+  margin: 0;
+}
+.agent-run__said > * + * {
+  margin-top: 5px;
+}
+.agent-run__said ul,
+.agent-run__said ol {
+  padding-left: 18px;
+}
+.agent-run__said pre {
+  white-space: pre-wrap;
+}
+.agent-run__handoff > details {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+/* The spinner stays on the subagent's own line, not in the middle of its open steps. */
+.agent-run__steps > .agent-run__handoff[data-state='running']::before {
+  align-self: flex-start;
+  margin-top: 4px;
+}
+.agent-run__handoff summary {
+  cursor: pointer;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.agent-run__handoff summary:hover {
+  color: var(--ink-1);
+}
+.agent-run__handoff summary .assistant__step-text {
+  font-weight: 600;
+}
+.agent-run__handoff summary .assistant__step-detail {
+  margin-left: 6px;
+  font-size: 12px;
+}
+.agent-run__handoff .agent-run__steps {
+  margin-top: 4px;
+}
 .agent-run__runs {
   margin: 8px 0 0;
   padding: 0;
@@ -868,6 +926,47 @@ body[data-view='tickets'] #brief-refresh {
   color: var(--ink-2);
   overflow-wrap: anywhere;
 }
+/*
+ * The assistant's answer, asked ahead, in a line: the verdict on the row, so
+ * the card says what to do about the pull request before it is opened.
+ */
+.item__ahead {
+  display: -webkit-box;
+  margin: 6px 0 0;
+  padding: 4px 8px;
+  border-radius: var(--radius-sm);
+  background: var(--accent-wash);
+  font-size: 12.5px;
+  color: var(--ink-1);
+  overflow: hidden;
+  overflow-wrap: anywhere;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+}
+.item__ahead--quiet {
+  background: none;
+  padding: 0;
+  color: var(--ink-3);
+}
+.item__ahead-mark {
+  margin-right: 6px;
+  color: var(--accent);
+  font-weight: 600;
+}
+.item__ahead[data-status='running'] .item__ahead-mark {
+  animation: ahead-pulse 1.4s ease-in-out infinite;
+}
+@keyframes ahead-pulse {
+  50% {
+    opacity: 0.3;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .item__ahead[data-status='running'] .item__ahead-mark {
+    animation: none;
+  }
+}
+
 .item__detail code {
   padding: 1px 4px;
   background: var(--surface-sunken);
@@ -1735,9 +1834,9 @@ a.button {
 /*
  * ---------- the assistant ----------
  *
- * A section of the item panel, so the transcript scrolls with the panel's body
- * and the field sits at its foot. It used to be a box under the card with its own
- * scroll region; now the panel is the box.
+ * A section of the item panel, so the transcript scrolls with the panel's body;
+ * the field is pinned in the panel's foot. It used to be a box under the card
+ * with its own scroll region; now the panel is the box.
  */
 
 .assistant__turns {
@@ -1756,6 +1855,9 @@ a.button {
   color: var(--ink-1);
   font-weight: 600;
 }
+.assistant__auto {
+  color: var(--accent);
+}
 
 .assistant__reply {
   margin-top: 5px;
@@ -1801,8 +1903,29 @@ a.button {
   border: 0;
   border-top: 1px solid var(--hairline);
 }
-.assistant__turn[data-status='running'] .assistant__reply {
-  border-left-style: dashed;
+/* A fenced block in an answer is usually meant for pasting elsewhere, so it carries a Copy. */
+.code-block {
+  position: relative;
+}
+.code-block pre {
+  padding-right: 52px;
+}
+.code-block__copy {
+  position: absolute;
+  top: 5px;
+  right: 5px;
+  padding: 1px 6px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-3);
+  font: inherit;
+  font-size: 11px;
+  cursor: pointer;
+}
+.code-block__copy:hover {
+  color: var(--ink-1);
+  border-color: var(--ink-3);
 }
 
 .assistant__status {
@@ -1813,16 +1936,25 @@ a.button {
 .assistant__status--bad {
   color: var(--critical);
 }
-.assistant[data-running='true'] .assistant__status:not(.assistant__status--bad)::after {
+.assistant__clock {
+  font-variant-numeric: tabular-nums;
+}
+
+/* A spinner, for the turn while it works and for each call it is waiting on. */
+.assistant__status--working::after,
+.assistant__step[data-state='running']::before {
   content: '';
   display: inline-block;
-  width: 8px;
-  height: 8px;
-  margin-left: 6px;
+  box-sizing: border-box;
+  width: 9px;
+  height: 9px;
   border-radius: 50%;
   border: 1.5px solid var(--accent);
   border-top-color: transparent;
   animation: assistant-spin 0.9s linear infinite;
+}
+.assistant__status--working::after {
+  margin-left: 6px;
   vertical-align: -1px;
 }
 @keyframes assistant-spin {
@@ -1831,16 +1963,105 @@ a.button {
   }
 }
 @media (prefers-reduced-motion: reduce) {
-  .assistant[data-running='true'] .assistant__status::after {
+  .assistant__status--working::after,
+  .assistant__step[data-state='running']::before {
     animation: none;
   }
 }
 
+/*
+ * The work: each call as one muted line under the request, the newest at the
+ * foot. Folded once the turn is over, under a line that says what it took.
+ */
+.assistant__work {
+  margin-top: 4px;
+}
+.assistant__work > summary {
+  font-size: 12px;
+  color: var(--ink-3);
+  cursor: pointer;
+}
+.assistant__work > summary:hover {
+  color: var(--ink-2);
+}
+.assistant__took {
+  margin: 4px 0 0;
+  font-size: 12px;
+  color: var(--ink-3);
+}
+.assistant__steps {
+  margin: 5px 0 0;
+  padding: 0 0 0 10px;
+  border-left: 2px solid var(--hairline);
+  list-style: none;
+  font-size: 12px;
+  line-height: 1.45;
+  color: var(--ink-2);
+}
+.assistant__step {
+  display: flex;
+  align-items: baseline;
+  gap: 6px;
+  min-width: 0;
+}
+.assistant__step + .assistant__step {
+  margin-top: 3px;
+}
+.assistant__step::before {
+  flex: none;
+  width: 9px;
+  font-size: 11px;
+  text-align: center;
+}
+.assistant__step[data-state='done']::before {
+  content: '✓';
+  color: var(--good-ink);
+}
+.assistant__step[data-state='failed']::before {
+  content: '✕';
+  color: var(--critical);
+}
+.assistant__step[data-state='running']::before {
+  align-self: center;
+}
+.assistant__step-text {
+  flex: none;
+  max-width: 60%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.assistant__step-detail {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 11.5px;
+  color: var(--ink-3);
+}
+/* What it said on the way: its own words, set apart from the calls by having no mark. */
+.assistant__step--message {
+  display: block;
+  padding-left: 15px;
+  font-style: italic;
+  color: var(--ink-3);
+  white-space: pre-line;
+  overflow-wrap: anywhere;
+}
+
+/* What can be done with a finished answer, without leaving the panel. */
+.assistant__after {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  margin-top: 6px;
+}
+
 .assistant__quick {
   display: flex;
   flex-wrap: wrap;
   gap: 6px;
-  margin-bottom: 14px;
+  margin-bottom: 10px;
 }
 
 .assistant__form {
@@ -1959,6 +2180,12 @@ body[data-flyout='open'] .layout__side {
   overflow-y: auto;
   padding: 16px 16px 20px;
 }
+/* The assistant's field and its canned asks, pinned under the body that scrolls. */
+.flyout__footer {
+  flex: none;
+  padding: 12px 16px 14px;
+  border-top: 1px solid var(--hairline);
+}
 .flyout__detail {
   margin: 0 0 22px;
   font-size: 13px;
@@ -2080,13 +2307,14 @@ body[data-flyout='open'] .layout__side {
   text-transform: none;
 }
 
-/* ---------- setup, before the first brief ---------- */
+/* ---------- the first brief, after setup ---------- */
 
 /*
- * The page a new store opens on. Built from the objective's card, since it does
- * the same job in its place: the first thing read, before anything else exists.
+ * Today between the setup screen and the first brief. Built from the
+ * objective's card, since it does the same job in its place: the first thing
+ * read, before anything else exists.
  */
-.setup {
+.first-brief {
   padding: 18px 20px;
   background: var(--surface);
   border: 1px solid var(--border);
@@ -2094,121 +2322,617 @@ body[data-flyout='open'] .layout__side {
   border-radius: var(--radius);
   box-shadow: var(--shadow);
 }
-.setup__title {
+.first-brief__title {
   margin: 0 0 6px;
   font-size: 18px;
   letter-spacing: -0.01em;
 }
-.setup__lede {
-  margin: 0 0 16px;
+.first-brief__text {
+  margin: 0;
   color: var(--ink-2);
   font-size: 13.5px;
   line-height: 1.5;
 }
-.setup__steps {
-  display: grid;
-  gap: 4px;
-  margin: 0;
+.first-brief__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
+}
+
+/* ---------- the setup screen ---------- */
+
+/*
+ * The whole page while a new store is set up: one column, one question open at
+ * a time, on a thread whose dots are the questions. Answered ones fold into a
+ * sentence; the open one is the only card. The buttons here are larger than the
+ * dashboard's: this page is read once, slowly, and each one is a decision.
+ */
+/* The page's own margins are the dashboard's; this one runs edge to edge. */
+body[data-onboarding='true'] {
   padding: 0;
-  list-style: none;
 }
-.setup__step {
-  display: grid;
-  grid-template-columns: 22px minmax(0, 1fr);
-  gap: 10px;
-  padding: 12px 0;
-  border-top: 1px solid var(--hairline);
+.onboarding {
+  min-height: 100vh;
+  background: var(--page);
 }
-.setup__mark {
-  font-size: 15px;
-  line-height: 1.3;
-  color: var(--ink-3);
-  text-align: center;
+.onboarding__bar {
+  position: sticky;
+  top: 0;
+  z-index: 2;
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  padding: 14px 24px;
+  background: var(--page);
+  border-bottom: 1px solid var(--hairline);
+  font-size: 13px;
+  color: var(--ink-2);
 }
-.setup__step[data-done='true'] .setup__mark {
-  color: var(--good-ink);
+.onboarding__name {
+  color: var(--ink-1);
+  font-weight: 600;
+  font-size: 14px;
 }
-.setup__step[data-done='false'] .setup__mark {
-  color: var(--accent);
+.onboarding__progress {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
 }
-.setup__step-title {
-  margin: 0 0 4px;
-  font-size: 14px;
-  font-weight: 600;
+.onboarding__track {
+  flex: 1;
+  max-width: 220px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--hairline);
+  overflow: hidden;
 }
-.setup__body p {
-  margin: 0 0 8px;
-  color: var(--ink-2);
-  font-size: 13px;
-  line-height: 1.5;
+.onboarding__track i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: width 0.3s ease;
 }
-.setup__step[data-done='true'] .setup__body p {
-  color: var(--ink-3);
+.onboarding__column {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 32px 24px 30vh;
 }
-.setup__choices {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+.onboarding__lede {
+  margin: 0 0 24px;
+  padding-left: 30px;
+  color: var(--ink-2);
+  font-size: 15px;
+  line-height: 1.55;
 }
-.setup__boards {
-  display: grid;
-  gap: 8px;
+.onboarding__thread {
+  position: relative;
   margin: 0;
-  padding: 0;
+  padding: 0 0 0 30px;
   list-style: none;
 }
-.setup__board {
-  display: grid;
-  grid-template-columns: 16px 104px minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: baseline;
-  font-size: 13px;
-}
-.setup__board-name {
-  font-weight: 500;
+/* The thread: one hairline the dots sit on. */
+.onboarding__thread::before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  top: 10px;
+  bottom: 10px;
+  width: 1px;
+  background: var(--hairline);
 }
-.setup__board-text {
-  color: var(--ink-2);
+.onboarding__thread > li {
+  position: relative;
 }
-/*
- * The mark says how a board is doing; the words beside it say it again, so the
- * colour is never the only cue, and the words stay one colour for every state.
- */
-.setup__board-mark {
-  font-weight: 600;
-  text-align: center;
-  color: var(--ink-3);
+.onboarding__dot {
+  position: absolute;
+  left: -28px;
+  top: 10px;
+  width: 9px;
+  height: 9px;
+  border-radius: 50%;
+  background: var(--ink-3);
+  box-shadow: 0 0 0 3px var(--page);
+}
+.onboarding__dot--open {
+  left: -30px;
+  top: 11px;
+  width: 13px;
+  height: 13px;
+  background: var(--accent);
 }
-.setup__board[data-health='ok'] .setup__board-mark {
-  color: var(--good-ink);
+.onboarding__dot--looking,
+.onboarding__dot--later {
+  left: -29px;
+  top: 6px;
+  width: 8px;
+  height: 8px;
+  background: var(--page);
+  border: 1.5px solid var(--accent);
 }
-.setup__board[data-health='problem'] .setup__board-mark {
-  color: var(--serious);
+.onboarding__dot--later {
+  border-color: var(--hairline);
+  background: var(--hairline);
 }
-.setup__board[data-health='todo'] .setup__board-mark {
-  color: var(--accent);
+.onboarding__done {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 5px 0;
+  color: var(--ink-2);
+  font-size: 14px;
+  line-height: 1.5;
 }
-.setup__body .setup__note {
+.onboarding__done[data-status='later'] {
   color: var(--ink-3);
 }
-.setup__body .setup__note--todo {
-  color: var(--serious);
+.onboarding__done[data-status='later'] .onboarding__dot {
+  background: var(--page);
+  border: 1.5px solid var(--ink-3);
+  width: 6px;
+  height: 6px;
 }
-.setup__editor {
-  margin-top: 12px;
+.onboarding__summary {
+  flex: 1;
+  min-width: 0;
 }
-/* The settings page's own fold and fields, inside a step. */
-.setup__body .setup__advanced p {
+.onboarding__change {
+  padding: 0;
+  border: 0;
+  background: none;
+  color: var(--ink-3);
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+.onboarding__change:hover {
+  color: var(--accent);
+}
+.onboarding__change:disabled {
+  visibility: hidden;
+}
+
+.onboarding__card {
+  margin: 22px 0 28px;
+  scroll-margin: 90px 0 120px;
+}
+.onboarding__card h2 {
+  margin: 0 0 10px;
+  font-size: 24px;
+  line-height: 1.2;
+  font-weight: 650;
+  letter-spacing: -0.01em;
+  text-wrap: balance;
+}
+.onboarding__card h2:focus {
+  outline: none;
+}
+.onboarding__why {
+  display: flex;
+  gap: 10px;
+  margin: 0 0 18px;
+  color: var(--ink-2);
+  font-size: 14.5px;
+  line-height: 1.5;
+}
+/*
+ * What it said and what the user told it, in order, under the question: its
+ * lines as the reason always reads, the user's set off to the right.
+ */
+.onboarding__talk {
+  display: grid;
+  gap: 10px;
+  margin: 0 0 16px;
+  padding: 0;
+  list-style: none;
+}
+.onboarding__talk .onboarding__why {
   margin: 0;
-  font-size: 12px;
+}
+.onboarding__said {
+  justify-self: end;
+  max-width: 85%;
+  padding: 7px 12px;
+  border-radius: 12px 12px 4px 12px;
+  background: var(--accent-wash);
+  color: var(--ink-1);
+  font-size: 14.5px;
   line-height: 1.45;
 }
-.setup__advanced .field {
-  max-width: 480px;
+.onboarding__sparkle {
+  flex: none;
+  margin-top: 3px;
+  color: var(--accent);
+}
+.onboarding__looking {
+  margin: 0 0 16px;
+  font-size: 14px;
+  color: var(--ink-2);
+}
+.onboarding__looking p,
+.onboarding__next p {
+  margin: 0 0 4px;
+}
+.onboarding__steps {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-size: 13px;
+  color: var(--ink-3);
+}
+.onboarding__steps li {
+  padding: 2px 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.onboarding__steps li::before {
+  content: '✓';
+  display: inline-block;
+  width: 17px;
+  color: var(--good-ink);
+}
+.onboarding__steps li[data-state='failed']::before {
+  content: '!';
+  color: var(--serious);
+}
+.onboarding__steps li[data-state='running']::before {
+  content: '';
+  width: 8px;
+  height: 8px;
+  margin-right: 9px;
+  border-radius: 50%;
+  border: 1.5px solid var(--ink-3);
+  border-top-color: transparent;
+  animation: onboarding-spin 0.9s linear infinite;
+}
+@keyframes onboarding-spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .onboarding__steps li[data-state='running']::before {
+    animation: none;
+  }
+  .onboarding__track i {
+    transition: none;
+  }
+}
+.onboarding__note {
+  margin: 0 0 14px;
+  color: var(--ink-2);
+  font-size: 13.5px;
+}
+.onboarding__problem {
+  margin: 0 0 16px;
+  padding: 2px 0 2px 12px;
+  border-left: 3px solid var(--serious);
+  color: var(--ink-2);
+  font-size: 14px;
+  line-height: 1.5;
+}
+.onboarding__problem p {
+  margin: 0 0 8px;
+}
+.onboarding__links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.onboarding__links a {
+  color: var(--accent);
+}
+.onboarding__problem[data-blocking='false'] {
+  margin: 0;
+  border-left-color: var(--hairline);
+  font-size: 13.5px;
+}
+.onboarding__problem pre {
+  margin: 0 0 10px;
+  padding: 6px 10px;
+  background: var(--surface-sunken);
+  border-radius: var(--radius-sm);
+  font-size: 13px;
+  overflow-x: auto;
+}
+.onboarding__form {
+  display: grid;
+  gap: 16px;
+}
+.onboarding__choice {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+.onboarding__legend {
+  margin-bottom: 8px;
+  padding: 0;
+  color: var(--ink-3);
+  font-size: 13px;
+  font-weight: 600;
+}
+.onboarding__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+}
+.onboarding__pill {
+  padding: 6px 13px;
+  border: 1px solid var(--border);
+  border-radius: 999px;
+  background: var(--surface);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+.onboarding__pill:hover {
+  border-color: var(--ink-3);
+}
+.onboarding__pill[aria-checked='true'] {
+  border-color: var(--accent);
+  background: var(--accent-wash);
+  color: var(--accent);
+  font-weight: 600;
+}
+.onboarding__list {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  overflow: hidden;
+}
+.onboarding__group + .onboarding__group,
+.onboarding__adder {
+  border-top: 1px solid var(--hairline);
+}
+.onboarding__group-name {
+  margin: 0;
+  padding: 12px 16px 4px;
+  color: var(--ink-3);
+  font-size: 12.5px;
+  font-weight: 600;
+}
+.onboarding__option {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 16px;
+  cursor: pointer;
+}
+.onboarding__group > .onboarding__option:first-child {
+  padding-top: 12px;
+}
+.onboarding__group > .onboarding__option:last-child {
+  padding-bottom: 12px;
+}
+.onboarding__option:hover {
+  background: var(--surface-sunken);
+}
+.onboarding__option input {
+  position: absolute;
+  opacity: 0;
+  pointer-events: none;
+}
+.onboarding__box {
+  flex: none;
+  display: grid;
+  place-items: center;
+  width: 18px;
+  height: 18px;
+  margin-top: 1px;
+  border: 1.5px solid var(--ink-3);
+  border-radius: 5px;
+}
+.onboarding__box[data-kind='radio'] {
+  border-radius: 50%;
 }
-.setup__advanced-actions {
+.onboarding__option input:checked + .onboarding__box {
+  border-color: var(--accent);
+  background: var(--accent);
+}
+.onboarding__option input:checked + .onboarding__box[data-kind='check']::after {
+  content: '';
+  width: 9px;
+  height: 5px;
+  border-left: 2px solid #fff;
+  border-bottom: 2px solid #fff;
+  transform: translateY(-1px) rotate(-45deg);
+}
+.onboarding__option input:checked + .onboarding__box[data-kind='radio']::after {
+  content: '';
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #fff;
+}
+.onboarding__option input:focus-visible + .onboarding__box {
+  outline: 2px solid var(--focus-ring);
+  outline-offset: 2px;
+}
+.onboarding__option-text {
   display: flex;
-  justify-content: flex-start;
+  flex-direction: column;
+  font-size: 15px;
+}
+.onboarding__option-text small,
+.onboarding__field small {
+  color: var(--ink-3);
+  font-size: 13px;
+}
+.onboarding__none {
+  margin: 0;
+  padding: 12px 16px;
+  color: var(--ink-3);
+  font-size: 14px;
+}
+.onboarding__adder {
+  padding: 4px 16px;
+}
+.onboarding__add-button {
+  padding: 8px 0;
+  border: 0;
+  background: none;
+  color: var(--accent);
+  font: inherit;
+  font-size: 14px;
+  cursor: pointer;
+}
+.onboarding__pills .onboarding__add-button {
+  padding: 6px 4px;
+}
+.onboarding__add {
+  display: flex;
+  gap: 8px;
+  padding: 6px 0;
+}
+.onboarding__add input,
+.onboarding__field input,
+.onboarding__tell input {
+  flex: 1;
+  min-width: 0;
+  height: 34px;
+  padding: 0 10px;
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  background: var(--surface);
+  color: var(--ink-1);
+  font: inherit;
+  font-size: 14px;
+}
+.onboarding__fields {
+  display: grid;
+  gap: 14px;
+}
+.onboarding__field,
+.onboarding__field > label {
+  display: grid;
+  gap: 4px;
+}
+.onboarding__suggestions {
+  display: grid;
+  gap: 6px;
+  margin: 4px 0 0;
+  padding: 0;
+  list-style: none;
+}
+.onboarding__suggestions button {
+  display: grid;
+  gap: 1px;
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px dashed var(--border);
+  border-radius: var(--radius-sm);
+  background: none;
+  color: var(--ink-1);
+  font: inherit;
+  font-size: 14px;
+  text-align: left;
+  cursor: pointer;
+}
+.onboarding__suggestions button:hover,
+.onboarding__suggestions button[aria-pressed='true'] {
+  border-style: solid;
+  border-color: var(--accent);
+  background: var(--accent-wash);
+}
+.onboarding__suggestions small {
+  color: var(--ink-3);
+  font-size: 12.5px;
+}
+/* Asked in place of the buttons, where the eye already is. */
+.onboarding__confirm {
+  padding: 12px 14px;
+  border-radius: var(--radius);
+  background: var(--surface-sunken);
+}
+.onboarding__confirm p {
+  flex-basis: 100%;
+  margin: 0 0 4px;
+  color: var(--ink-2);
+  font-size: 14px;
+}
+.onboarding__field-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink-2);
+}
+.onboarding__error {
+  margin: 0;
+  color: var(--critical);
+  font-size: 13.5px;
+}
+.onboarding__actions {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 10px;
+}
+.onboarding .button {
+  padding: 8px 16px;
+  border-radius: 8px;
+  font-size: 14px;
+  font-weight: 550;
+}
+.onboarding .onboarding__quiet {
+  border-color: transparent;
+  background: none;
+  color: var(--ink-2);
+}
+.onboarding .onboarding__quiet:hover {
+  color: var(--ink-1);
+}
+.onboarding__tell {
+  display: flex;
+  gap: 8px;
+  margin: 0 0 18px;
+}
+.onboarding .onboarding__tell .button {
+  padding: 6px 12px;
+  font-weight: 500;
+}
+.onboarding__ahead {
+  color: var(--ink-3);
+  font-size: 14px;
+}
+.onboarding__next {
+  position: relative;
+  margin-bottom: 14px;
+  color: var(--ink-2);
+}
+.onboarding__then {
+  position: relative;
+  margin: 0;
+}
+.onboarding__preview {
+  margin: 0 0 18px;
+}
+.onboarding__preview > summary {
+  cursor: pointer;
+  color: var(--ink-2);
+  font-size: 14px;
+}
+.onboarding__preview pre {
+  max-height: 360px;
+  margin: 10px 0 0;
+  padding: 12px 14px;
+  overflow: auto;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  font-size: 12.5px;
+  line-height: 1.5;
+  white-space: pre-wrap;
+}
+.onboarding__preview p {
+  margin: 8px 0 0;
+  color: var(--ink-2);
+  font-size: 13.5px;
 }
 
 /* ---------- settings ---------- */
@@ -2258,19 +2982,16 @@ body[data-flyout='open'] .layout__side {
   color: var(--serious);
   font-size: 13px;
 }
-.settings-card__more,
-.setup__advanced {
+.settings-card__more {
   margin-top: 6px;
 }
-.settings-card__more > summary,
-.setup__advanced > summary {
+.settings-card__more > summary {
   cursor: pointer;
   color: var(--ink-2);
   font-size: 13px;
   padding: 4px 0;
 }
-.settings-card__more[open] > summary,
-.setup__advanced[open] > summary {
+.settings-card__more[open] > summary {
   margin-bottom: 10px;
 }