daily-focus 1.1.1-dev.3 → 1.2.0-dev.11

package/public/style.css

@@ -86,7 +86,7 @@
 
 /*
  * The UA stylesheet's `[hidden] { display: none }` loses to any class that sets
- * display, so `.timer`, `.focus-bar` and `.toast` all rendered as empty boxes
+ * display, so `.toast` rendered as an empty box
  * while "hidden". Assert it once here rather than remembering per component.
  */
 [hidden] {
@@ -351,91 +351,6 @@ body[data-view='tickets'] #brief-refresh {
   }
 }
 
-/* ---------- focus timer ---------- */
-
-.timer {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  max-width: 1280px;
-  margin: 0 auto 14px;
-  padding: 10px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius);
-  box-shadow: var(--shadow);
-  font-size: 13.5px;
-  color: var(--ink-2);
-}
-/* Past the target the timer stops being encouraging and starts being a fact. */
-.timer[data-state='overrun'] {
-  border-left-color: var(--serious);
-}
-.timer[data-state='idle'] {
-  border-left-color: var(--hairline);
-  color: var(--ink-3);
-}
-
-.timer__clock {
-  font-size: 20px;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-  color: var(--ink-1);
-  min-width: 62px;
-}
-.timer[data-state='overrun'] .timer__clock {
-  color: var(--serious);
-}
-
-.timer__title {
-  flex: 1;
-  min-width: 0;
-  color: var(--ink-1);
-  overflow-wrap: anywhere;
-}
-.timer__note {
-  color: var(--ink-3);
-}
-.timer__note--warn {
-  color: var(--critical);
-}
-.timer__tally {
-  color: var(--ink-3);
-  white-space: nowrap;
-}
-
-/*
- * The bar after the timer stopped itself. Marked like the overrun state rather
- * than the idle one: something happened that's worth a glance, even though the
- * thing that happened was the dashboard being careful.
- */
-.timer[data-state='stopped'] {
-  border-left-color: var(--serious);
-}
-.timer__away {
-  display: flex;
-  flex: 1;
-  align-items: center;
-  gap: 12px;
-  min-width: 0;
-}
-.timer__away-body {
-  display: flex;
-  flex-direction: column;
-  flex: 1;
-  min-width: 0;
-}
-.timer__away-text {
-  color: var(--ink-1);
-  overflow-wrap: anywhere;
-}
-.timer__away-detail {
-  color: var(--ink-3);
-  font-size: 12.5px;
-  overflow-wrap: anywhere;
-}
-
 /* ---------- banners ---------- */
 
 .banners {
@@ -692,47 +607,6 @@ body[data-view='tickets'] #brief-refresh {
   }
 }
 
-/* ---------- focus mode ---------- */
-
-/*
- * Fourteen open rows are fourteen invitations to switch task. Focus mode answers
- * the only question that matters mid-work — "what am I doing right now" — by
- * leaving the objective, one item, and the clock, and taking away the menu.
- */
-.focus-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 0 0 16px;
-  padding: 9px 14px;
-  background: var(--surface);
-  border: 1px solid var(--border);
-  border-left: 3px solid var(--accent);
-  border-radius: var(--radius);
-  font-size: 13px;
-  color: var(--ink-2);
-}
-
-/* Scoped to the Today view: the board is a different question, and stays whole. */
-body[data-focus-mode='true'][data-view='today'] .stats,
-body[data-focus-mode='true'][data-view='today'] .headline,
-body[data-focus-mode='true'][data-view='today'] #today .drawer,
-body[data-focus-mode='true'][data-view='today'] #today .section__header,
-/* every section except the first, and every item in it except the first */
-body[data-focus-mode='true'][data-view='today'] #today .section:not(:first-of-type),
-body[data-focus-mode='true'][data-view='today'] #today .section:first-of-type .item:not(:first-child) {
-  display: none;
-}
-
-body[data-focus-mode='true'][data-view='today'] #today .item {
-  padding: 18px 20px;
-}
-body[data-focus-mode='true'][data-view='today'] #today .item__title {
-  font-size: 19px;
-  line-height: 1.35;
-}
-
 /* ---------- standing objective ---------- */
 
 /*
@@ -910,9 +784,9 @@ body[data-focus-mode='true'][data-view='today'] #today .item__title {
   scroll-margin: 90px;
 }
 /*
- * Three states used to share one look: selected, priority and running were all
- * "accent border", so the one that matters most was indistinguishable from a
- * keyboard cursor. They're now ranked — selected is quietest, running loudest.
+ * Two states used to share one look: selected and priority were both "accent
+ * border", so the ranked rows were indistinguishable from a keyboard cursor.
+ * Selected is the quieter of the two.
  */
 .item[data-selected='true'] {
   border-color: var(--ink-3);
@@ -921,33 +795,6 @@ body[data-focus-mode='true'][data-view='today'] #today .item__title {
 .item[data-priority='true'] {
   border-left: 3px solid var(--accent);
 }
-
-/* The one you committed to. Four reinforcing cues, because missing it is the
- * whole failure mode: a thick bar, a wash, a ring, and a live clock on the row. */
-.item[data-running='true'],
-.item[data-running='true'][data-selected='true'] {
-  border-color: var(--accent);
-  border-left: 5px solid var(--accent);
-  background: var(--accent-wash);
-  box-shadow: 0 0 0 2px var(--accent);
-}
-.item[data-running='true'][data-overrun='true'],
-.item[data-running='true'][data-overrun='true'][data-selected='true'] {
-  border-color: var(--serious);
-  border-left-color: var(--serious);
-  box-shadow: 0 0 0 2px var(--serious);
-}
-
-/* While a session runs, everything else recedes — the competing rows are the
- * distraction the timer exists to resist. Hover brings one back so the list is
- * still usable without stopping the clock. */
-body[data-session-active='true'] #today .item:not([data-running='true']) {
-  opacity: 0.45;
-}
-body[data-session-active='true'] #today .item:not([data-running='true']):hover,
-body[data-session-active='true'] #today .item:not([data-running='true']):focus-within {
-  opacity: 1;
-}
 .item[data-status='done'] .item__title,
 .item[data-status='dismissed'] .item__title {
   color: var(--ink-3);
@@ -1021,6 +868,47 @@ body[data-session-active='true'] #today .item:not([data-running='true']):focus-w
   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);
@@ -1058,17 +946,6 @@ body[data-session-active='true'] #today .item:not([data-running='true']):focus-w
   font-weight: 600;
   font-variant-numeric: tabular-nums;
 }
-.pill--running {
-  border-color: transparent;
-  background: var(--accent);
-  color: #fff;
-  font-weight: 600;
-  font-variant-numeric: tabular-nums;
-}
-.item[data-overrun='true'] .pill--running {
-  background: var(--serious);
-  color: #1a1a19;
-}
 .pill--objective {
   border-color: var(--accent);
   color: var(--accent);
@@ -1563,7 +1440,7 @@ kbd {
 }
 
 /*
- * Which view is showing. Focus mode is scoped to Today (see the rules above).
+ * Which view is showing.
  *
  * One rule per panel per view rather than `:not()`, because a view name nobody
  * has written a rule for should show nothing rather than everything at once.
@@ -1629,6 +1506,7 @@ body[data-view='settings'] .layout {
 }
 
 .item--pull[data-status='snoozed'] .item__title,
+.item--pull[data-nudged='true'] .item__title,
 .item--ticket[data-status='snoozed'] .item__title {
   color: var(--ink-3);
 }
@@ -1710,12 +1588,17 @@ body[data-view='settings'] .layout {
   padding-right: 104px;
   font-size: 13.5px;
 }
-/* The exceptions, the notes and the note form all span both columns. */
+/* The exceptions, GitHub's evidence, the notes and the note form all span both columns. */
 #tickets .item__meta--extra,
+#tickets .item__reason,
 #tickets .item__notes,
 #tickets .note-form {
   grid-column: 1 / -1;
 }
+/* The grid's gap already spaces it from the line above. */
+#tickets .item__reason {
+  margin-top: 0;
+}
 
 /*
  * The switch between the ticket tab's two views: what is out of sync, and what
@@ -1893,9 +1776,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 {
@@ -1914,6 +1797,9 @@ a.button {
   color: var(--ink-1);
   font-weight: 600;
 }
+.assistant__auto {
+  color: var(--accent);
+}
 
 .assistant__reply {
   margin-top: 5px;
@@ -1959,8 +1845,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 {
@@ -1971,16 +1878,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 {
@@ -1989,16 +1905,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 {
@@ -2117,6 +2122,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;
@@ -2238,13 +2249,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);
@@ -2252,121 +2264,621 @@ 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;
-  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);
-}
-.setup__mark {
-  font-size: 15px;
-  line-height: 1.3;
-  color: var(--ink-3);
-  text-align: center;
+.first-brief__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-top: 14px;
 }
-.setup__step[data-done='true'] .setup__mark {
-  color: var(--good-ink);
+
+/* ---------- 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;
 }
-.setup__step[data-done='false'] .setup__mark {
-  color: var(--accent);
+.onboarding {
+  min-height: 100vh;
+  background: var(--page);
 }
-.setup__step-title {
-  margin: 0 0 4px;
-  font-size: 14px;
+.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);
+}
+.onboarding__name {
+  color: var(--ink-1);
   font-weight: 600;
+  font-size: 14px;
 }
-.setup__body p {
-  margin: 0 0 8px;
+.onboarding__progress {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+.onboarding__track {
+  flex: 1;
+  max-width: 220px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--hairline);
+  overflow: hidden;
+}
+.onboarding__track i {
+  display: block;
+  height: 100%;
+  background: var(--accent);
+  border-radius: 2px;
+  transition: width 0.3s ease;
+}
+.onboarding__column {
+  max-width: 600px;
+  margin: 0 auto;
+  padding: 32px 24px 30vh;
+}
+.onboarding__lede {
+  margin: 0 0 24px;
+  padding-left: 30px;
   color: var(--ink-2);
-  font-size: 13px;
+  font-size: 15px;
+  line-height: 1.55;
+}
+.onboarding__thread {
+  position: relative;
+  margin: 0;
+  padding: 0 0 0 30px;
+  list-style: none;
+}
+/* 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);
+}
+.onboarding__thread > li {
+  position: relative;
+}
+.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);
+}
+.onboarding__dot--looking,
+.onboarding__dot--later {
+  left: -29px;
+  top: 6px;
+  width: 8px;
+  height: 8px;
+  background: var(--page);
+  border: 1.5px solid var(--accent);
+}
+.onboarding__dot--later {
+  border-color: var(--hairline);
+  background: var(--hairline);
+}
+.onboarding__done {
+  display: flex;
+  align-items: baseline;
+  gap: 12px;
+  padding: 5px 0;
+  color: var(--ink-2);
+  font-size: 14px;
   line-height: 1.5;
 }
-.setup__step[data-done='true'] .setup__body p {
+.onboarding__done[data-status='later'] {
   color: var(--ink-3);
 }
-.setup__choices {
+.onboarding__done[data-status='later'] .onboarding__dot {
+  background: var(--page);
+  border: 1.5px solid var(--ink-3);
+  width: 6px;
+  height: 6px;
+}
+.onboarding__summary {
+  flex: 1;
+  min-width: 0;
+}
+.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__locked {
+  color: var(--ink-3);
+  font-size: 12px;
+}
+
+.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;
-  flex-wrap: wrap;
-  gap: 8px;
+  gap: 10px;
+  margin: 0 0 18px;
+  color: var(--ink-2);
+  font-size: 14.5px;
+  line-height: 1.5;
 }
-.setup__boards {
+/*
+ * 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: 8px;
+  gap: 10px;
+  margin: 0 0 16px;
+  padding: 0;
+  list-style: none;
+}
+.onboarding__talk .onboarding__why {
+  margin: 0;
+}
+.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;
+}
+.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;
 }
-.setup__board {
+.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;
-  grid-template-columns: 16px 104px minmax(0, 1fr) auto;
-  gap: 10px;
-  align-items: baseline;
+  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;
 }
-.setup__board-name {
-  font-weight: 500;
+.onboarding__pills {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
 }
-.setup__board-text {
-  color: var(--ink-2);
+.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;
 }
-/*
- * 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 {
+.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;
-  text-align: center;
+}
+.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;
 }
-.setup__board[data-health='ok'] .setup__board-mark {
-  color: var(--good-ink);
+.onboarding__option {
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 8px 16px;
+  cursor: pointer;
 }
-.setup__board[data-health='problem'] .setup__board-mark {
-  color: var(--serious);
+.onboarding__group > .onboarding__option:first-child {
+  padding-top: 12px;
+}
+.onboarding__group > .onboarding__option:last-child {
+  padding-bottom: 12px;
 }
-.setup__board[data-health='todo'] .setup__board-mark {
+.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%;
+}
+.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;
+  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;
 }
-.setup__body .setup__note {
+.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;
 }
-.setup__body .setup__note--todo {
-  color: var(--serious);
+/* 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;
 }
-.setup__editor {
-  margin-top: 12px;
+.onboarding__field-label {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--ink-2);
 }
-/* The settings page's own fold and fields, inside a step. */
-.setup__body .setup__advanced p {
+.onboarding__error {
   margin: 0;
-  font-size: 12px;
-  line-height: 1.45;
+  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;
 }
-.setup__advanced .field {
-  max-width: 480px;
+.onboarding .onboarding__quiet {
+  border-color: transparent;
+  background: none;
+  color: var(--ink-2);
 }
-.setup__advanced-actions {
+.onboarding .onboarding__quiet:hover {
+  color: var(--ink-1);
+}
+.onboarding__tell {
   display: flex;
-  justify-content: flex-start;
+  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 ---------- */
@@ -2416,19 +2928,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;
 }