@sunboard/react 0.9.0 → 1.1.0

package/dist/styles.css

@@ -1,904 +1,1196 @@
 /*
- * Sunboard owns its own variable namespace. Defaults are plain color literals
- * so they render correctly under any host theme system (Tailwind, shadcn v3
- * HSL, shadcn v4 OKLCH, vanilla CSS, etc.). To theme Sunboard to match your
- * app, override the `--sunboard-*` variables below in your own stylesheet —
- * map them to your design tokens (e.g. `var(--card)`, `var(--primary)`) or
- * set explicit colors. Make sure your stylesheet imports AFTER
- * `@sunboard/react/styles.css` so your overrides win the cascade.
+ * @sunboard/react styles. Isolation: everything is scoped under .sb-root
+ * (which carries the --sb-* theme variables inline) with explicit resets;
+ * nothing global, no shadow DOM (guide surfaces must inherit host layout).
  */
-:root {
-  --sunboard-font:
-    Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
-    sans-serif;
-  --sunboard-radius: 12px;
-
-  --sunboard-checklist-background: #ffffff;
-  --sunboard-checklist-foreground: #111827;
-  --sunboard-checklist-border: #e5e7eb;
-  --sunboard-checklist-shadow: 0 4px 12px rgb(0 0 0 / 10%);
-  --sunboard-checklist-muted: #f3f4f6;
-  --sunboard-checklist-muted-foreground: #6b7280;
-  --sunboard-checklist-primary: #2563eb;
-  --sunboard-checklist-primary-foreground: #ffffff;
-  --sunboard-checklist-success: #16a34a;
-
-  --sunboard-launcher-background: var(--sunboard-checklist-primary);
-  --sunboard-launcher-foreground: var(--sunboard-checklist-primary-foreground);
-  --sunboard-launcher-shadow: var(--sunboard-checklist-shadow);
-  --sunboard-launcher-badge-background: #ef4444;
-  --sunboard-launcher-badge-foreground: #ffffff;
-
-  --sunboard-tour-background: var(--sunboard-checklist-background);
-  --sunboard-tour-foreground: var(--sunboard-checklist-foreground);
-  --sunboard-tour-border: var(--sunboard-checklist-border);
-  --sunboard-tour-shadow: var(--sunboard-checklist-shadow);
-  --sunboard-tour-muted-foreground: var(
-    --sunboard-checklist-muted-foreground
-  );
-  --sunboard-tour-primary: var(--sunboard-checklist-primary);
-  --sunboard-tour-primary-foreground: var(
-    --sunboard-checklist-primary-foreground
-  );
-  --sunboard-tour-secondary-background: var(--sunboard-tour-background);
-  --sunboard-tour-secondary-foreground: var(--sunboard-tour-foreground);
-  --sunboard-tour-secondary-border: var(--sunboard-tour-border);
-
-  --sunboard-overlay-color: rgb(15 23 42 / 18%);
-  /* Stronger scrim behind the centered onboarding survey (a gating step). */
-  --sunboard-survey-overlay-color: rgb(15 23 42 / 45%);
-
-  --sunboard-hotspot-background: var(--sunboard-checklist-primary);
-  --sunboard-hotspot-border: var(--sunboard-checklist-primary-foreground);
-  --sunboard-hotspot-dot: var(--sunboard-checklist-primary-foreground);
-  --sunboard-hotspot-shadow: var(--sunboard-checklist-shadow);
-  --sunboard-hotspot-pulse-ring: rgb(37 99 235 / 28%);
-
-  --sunboard-debug-background: var(--sunboard-checklist-background);
-  --sunboard-debug-foreground: var(--sunboard-checklist-foreground);
-  --sunboard-debug-border: var(--sunboard-checklist-border);
-  --sunboard-debug-shadow: var(--sunboard-checklist-shadow);
-}
-
-.sunboard-root {
-  position: fixed;
-  right: max(16px, env(safe-area-inset-right));
-  bottom: max(16px, env(safe-area-inset-bottom));
-  z-index: 2147483000;
-  width: min(360px, calc(100vw - 32px));
-  max-height: min(680px, calc(100vh - 32px));
-  overflow: auto;
+
+.sb-root,
+.sb-root *,
+.sb-root *::before,
+.sb-root *::after {
   box-sizing: border-box;
-  border: 1px solid var(--sunboard-checklist-border);
-  border-radius: var(--sunboard-radius);
-  background: var(--sunboard-checklist-background);
-  box-shadow: var(--sunboard-checklist-shadow);
-  color: var(--sunboard-checklist-foreground);
-  font-family: var(--sunboard-font);
-  padding: 16px;
+  margin: 0;
+}
+
+.sb-root {
+  --sb-r2: max(calc(var(--sb-card-radius) - 4px), 2px);
+  --sb-r3: max(calc(var(--sb-card-radius) - 6px), 2px);
+  --sb-ring: color-mix(in srgb, var(--sb-accent) 20%, transparent);
+  --sb-tint: color-mix(in srgb, var(--sb-accent) 10%, transparent);
+
+  color: var(--sb-text);
+  font-family: var(--sb-font);
+  font-size: var(--sb-size-base);
+  font-weight: var(--sb-weight-regular);
+  line-height: var(--sb-lh-normal);
+}
+.sb-root[data-sb-mode="dark"] {
+  --sb-tint: color-mix(in srgb, var(--sb-accent) 20%, transparent);
 }
 
-.sunboard-launcher {
+.sb-root button {
+  font-family: var(--sb-font);
+}
+
+/* One focus idiom for every interactive element in the SDK (v1 parity: the
+   keyboard path is first-class on all surfaces, not just form controls). */
+.sb-root button:focus-visible,
+.sb-root a:focus-visible,
+.sb-root input:focus-visible {
+  outline: none;
+  box-shadow: var(--sb-focus-ring);
+}
+
+/* The card takes focus when a step shows; the spotlight and the card itself
+   already say where the user is, so it draws no ring of its own. */
+.sb-root .popover-card:focus {
+  outline: none;
+}
+
+/* ---------- overlay: card primary action ---------- */
+.sb-root .start {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 0;
+  background: none;
+  border: none;
+  color: var(--sb-accent);
+  font-family: var(--sb-font);
+  font-size: var(--sb-size-sm);
+  font-weight: var(--sb-weight-medium);
+  cursor: pointer;
+}
+.sb-root .start:hover {
+  color: color-mix(in srgb, var(--sb-accent) 80%, var(--sb-text));
+}
+.sb-root .start svg {
+  width: 12px;
+  height: 12px;
+}
+.sb-root .start.filled {
+  justify-content: center;
+  height: var(--sb-input-height);
+  padding: 0 var(--sb-input-padding);
+  border-radius: var(--sb-input-radius);
+  background: var(--sb-accent);
+  color: var(--sb-accent-text);
+}
+.sb-root .start.filled:hover {
+  background: color-mix(in srgb, var(--sb-accent) 85%, var(--sb-text));
+  color: var(--sb-accent-text);
+}
+
+/* ---------- launcher ---------- */
+.sb-root .sb-launcher {
   position: fixed;
   right: max(16px, env(safe-area-inset-right));
   bottom: max(16px, env(safe-area-inset-bottom));
-  z-index: 2147483000;
-  display: grid;
-  width: 56px;
-  height: 56px;
-  place-items: center;
-  border: 0;
+  z-index: 2147482996;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  height: 44px;
+  max-width: calc(100vw - 32px);
+  padding: 0 16px 0 12px;
+  border: none;
   border-radius: 999px;
-  background: var(--sunboard-launcher-background);
-  box-shadow: var(--sunboard-launcher-shadow);
-  color: var(--sunboard-launcher-foreground);
+  background: var(--sb-accent);
+  color: var(--sb-accent-text);
+  box-shadow: 0 6px 20px -6px rgba(16, 17, 20, 0.4);
   cursor: pointer;
-  font-family: var(--sunboard-font);
-  padding: 0;
-  transition: transform 160ms ease;
+  font-family: var(--sb-font);
+  font-size: var(--sb-size-base);
+  font-weight: var(--sb-weight-medium);
+  line-height: normal;
 }
-
-.sunboard-launcher:hover {
-  transform: scale(1.05);
+.sb-root .sb-launcher svg {
+  width: 18px;
+  height: 18px;
 }
 
-.sunboard-launcher svg {
-  width: 24px;
-  height: 24px;
+/* ---------- tour pill ---------- */
+.sb-root .sb-tour-pill {
+  position: fixed;
+  right: max(16px, env(safe-area-inset-right));
+  bottom: max(16px, env(safe-area-inset-bottom));
+  z-index: 2147482996;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  height: 48px;
+  max-width: calc(100vw - 32px);
+  padding: 0 6px 0 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: 999px;
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  box-shadow: var(--sb-card-shadow);
+  line-height: normal;
 }
-
-.sunboard-launcher-badge {
-  position: absolute;
-  top: -4px;
-  right: -4px;
+.sb-root .sb-tour-pill-mark {
   display: grid;
-  min-width: 22px;
-  height: 22px;
   place-items: center;
+  flex-shrink: 0;
+  width: 22px;
+  height: 22px;
   border-radius: 999px;
-  background: var(--sunboard-launcher-badge-background);
-  box-shadow: 0 2px 4px rgb(0 0 0 / 20%);
-  color: var(--sunboard-launcher-badge-foreground);
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 0 6px;
+  background: var(--sb-tint);
+  color: var(--sb-accent);
+}
+.sb-root .sb-tour-pill-mark svg {
+  width: 12px;
+  height: 12px;
+}
+.sb-root .sb-tour-pill-name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: var(--sb-size-base);
+  font-weight: var(--sb-weight-medium);
+}
+.sb-root .sb-tour-pill-count {
+  flex-shrink: 0;
+  font-size: var(--sb-size-sm);
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-tour-pill-stop {
+  flex-shrink: 0;
+  height: 36px;
+  padding: 0 14px;
+  border: 0;
+  border-radius: 999px;
+  background: var(--sb-surface-hover);
+  color: var(--sb-text);
+  cursor: pointer;
+  font-family: var(--sb-font);
+  font-size: var(--sb-size-sm);
+  font-weight: var(--sb-weight-medium);
+}
+.sb-root .sb-tour-pill-stop:hover {
+  background: var(--sb-border);
 }
 
-.sunboard-launcher:focus-visible,
-.sunboard-close:focus-visible {
-  outline: 2px solid var(--sunboard-checklist-primary);
-  outline-offset: 3px;
+/* ---------- the assistant panel ---------- */
+.sb-root .sb-sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
 }
 
-.sunboard-root *,
-.sunboard-root *::before,
-.sunboard-root *::after {
-  box-sizing: border-box;
+.sb-root .sb-panel-scrim {
+  display: none;
 }
 
-.sunboard-header {
+.sb-root .sb-panel {
+  position: fixed;
+  right: max(16px, env(safe-area-inset-right));
+  bottom: max(16px, env(safe-area-inset-bottom));
+  z-index: 2147482996;
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 16px;
+  flex-direction: column;
+  width: var(--sb-launcher-w);
+  max-width: calc(100vw - 32px);
+  height: min(600px, calc(100vh - 120px));
+  /* Dropped, leaving the line above, when the theme holds no max height. */
+  height: min(600px, var(--sb-launcher-maxh), calc(100vh - 120px));
+  overflow: hidden;
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  border: 1px solid var(--sb-border);
+  border-radius: calc(var(--sb-card-radius) + 4px);
+  box-shadow:
+    0 1px 2px rgba(16, 17, 20, 0.06),
+    0 16px 40px -12px rgba(16, 17, 20, 0.22);
+  line-height: normal;
+  animation: sb-slide-in 0.3s ease-out;
+}
+.sb-root .sb-panel:focus {
+  outline: none;
+}
+.sb-root .sb-panel.sb-inline {
+  position: static;
+  animation: none;
 }
 
-.sunboard-header-actions {
+.sb-root .sb-head {
+  position: relative;
+  z-index: 2;
+  flex-shrink: 0;
+  height: 56px;
   display: flex;
-  flex: 0 0 auto;
   align-items: center;
-  gap: 8px;
+  gap: 2px;
+  padding: 0 6px 0 18px;
+  border-bottom: 1px solid transparent;
 }
-
-.sunboard-eyebrow,
-.sunboard-title,
-.sunboard-progress-count,
-.sunboard-step-title,
-.sunboard-step-description {
-  margin: 0;
+.sb-root .sb-head-line {
+  border-bottom-color: var(--sb-border);
 }
-
-.sunboard-eyebrow {
-  color: var(--sunboard-checklist-muted-foreground);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.2;
+.sb-root .sb-title {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: calc(var(--sb-size-base) + 1px);
+  font-weight: var(--sb-weight-semibold);
 }
-
-.sunboard-title {
-  margin-top: 3px;
-  font-size: 16px;
-  font-weight: 700;
-  line-height: 1.3;
+/* Drawn 36 tall as the design has it; the hit area reaches 44. */
+.sb-root .sb-ghost {
+  position: relative;
+  flex-shrink: 0;
+  height: 36px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 10px;
+  border: 0;
+  border-radius: var(--sb-r3);
+  background: transparent;
+  color: var(--sb-text-muted);
+  cursor: pointer;
+  font-size: calc(var(--sb-size-base) - 1px);
+  font-weight: var(--sb-weight-medium);
 }
-
-.sunboard-progress-count {
-  flex: 0 0 auto;
-  border-radius: 999px;
-  background: var(--sunboard-checklist-muted);
-  color: var(--sunboard-checklist-muted-foreground);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1;
-  padding: 7px 9px;
+.sb-root .sb-ghost::after {
+  content: "";
+  position: absolute;
+  inset: -4px 0;
 }
-
-.sunboard-close {
+.sb-root .sb-ghost:hover,
+.sb-root .sb-ghost[aria-expanded="true"] {
+  background: var(--sb-surface-hover);
+  color: var(--sb-text);
+}
+.sb-root .sb-ghost svg {
+  width: 15px;
+  height: 15px;
+}
+.sb-root .sb-panel-close {
   display: grid;
-  width: 26px;
-  height: 26px;
   place-items: center;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  padding: 0;
   border: 0;
-  border-radius: 999px;
+  border-radius: var(--sb-r2);
   background: transparent;
-  color: var(--sunboard-checklist-muted-foreground);
+  color: var(--sb-text-muted);
   cursor: pointer;
-  padding: 0;
 }
-
-.sunboard-close:hover {
-  background: var(--sunboard-checklist-muted);
+.sb-root .sb-panel-close:hover {
+  background: var(--sb-surface-hover);
+  color: var(--sb-text);
 }
-
-.sunboard-close svg {
-  width: 14px;
-  height: 14px;
+.sb-root .sb-panel-close svg {
+  width: 18px;
+  height: 18px;
 }
 
-.sunboard-progress {
-  height: 8px;
-  overflow: hidden;
-  border-radius: 999px;
-  background: var(--sunboard-checklist-muted);
-  margin-top: 14px;
+.sb-root .sb-confirm {
+  position: absolute;
+  top: calc(100% - 4px);
+  right: 12px;
+  z-index: 5;
+  width: 264px;
+  max-width: calc(100% - 24px);
+  padding: 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  background: var(--sb-surface);
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-card-radius);
+  box-shadow: 0 12px 32px -10px rgba(10, 11, 14, 0.3);
+}
+.sb-root .sb-confirm-text {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+.sb-root .sb-confirm-title {
+  font-size: calc(var(--sb-size-base) + 0.5px);
+  font-weight: var(--sb-weight-medium);
+}
+.sb-root .sb-confirm-body {
+  font-size: calc(var(--sb-size-base) - 0.5px);
+  line-height: 1.45;
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-confirm-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.sb-root .sb-confirm-cancel,
+.sb-root .sb-confirm-go {
+  height: 44px;
+  padding: 0 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-r3);
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  cursor: pointer;
+  font-size: calc(var(--sb-size-base) - 0.5px);
+  font-weight: var(--sb-weight-medium);
+}
+.sb-root .sb-confirm-cancel:hover {
+  background: var(--sb-surface-hover);
+}
+.sb-root .sb-confirm-go {
+  border-color: var(--sb-text);
+  background: var(--sb-text);
+  color: var(--sb-surface);
 }
 
-.sunboard-progress-fill {
+.sb-root .sb-thread {
+  position: relative;
+  flex: 1;
+  min-height: 0;
+}
+.sb-root .sb-thread-scroll {
   height: 100%;
-  border-radius: inherit;
-  background: var(--sunboard-checklist-primary);
-  transition: width 160ms ease;
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  overflow-anchor: none;
+  overscroll-behavior: contain;
 }
-
-.sunboard-step-list {
-  display: grid;
-  gap: 4px;
-  list-style: none;
-  margin: 8px 0 0;
-  padding: 0;
+/* Starts at the top, and once it overflows, sticks to the newest message. */
+.sb-root .sb-thread-scroll.sb-anchored {
+  flex-direction: column-reverse;
 }
-
-.sunboard-step-row {
-  display: grid;
-  width: 100%;
-  grid-template-columns: 20px minmax(0, 1fr);
-  gap: 12px;
-  align-items: start;
-  padding: 10px 8px;
-  margin: 0 -8px;
-  border-radius: 8px;
+.sb-root .sb-thread-list {
+  display: flex;
+  flex-direction: column;
+  gap: 28px;
+  padding: 20px 18px 16px;
 }
-
-/* Hovering anywhere on a row with something to click (an action, a checkable
-   checkbox, or both) highlights the whole row, like the old row-button did. */
-.sunboard-step-row[data-interactive="true"]:hover {
-  background: var(--sunboard-checklist-muted);
+.sb-root .sb-anchored > .sb-thread-list {
+  margin-bottom: auto;
 }
 
-.sunboard-step-main {
-  display: grid;
+.sb-root .sb-start {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+.sb-root .sb-start-title {
+  padding-top: 4px;
+  font-size: calc(var(--sb-size-base) + 6px);
+  font-weight: var(--sb-weight-semibold);
+  letter-spacing: -0.01em;
+}
+.sb-root .sb-group {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  margin: 0 -10px;
+}
+.sb-root .sb-group h4 {
+  padding: 0 10px 6px;
+  font-size: calc(var(--sb-size-base) - 1.5px);
+  font-weight: var(--sb-weight-medium);
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-row {
   width: 100%;
-  grid-template-columns: minmax(0, 1fr) 16px;
+  min-height: 48px;
+  display: flex;
+  align-items: center;
   gap: 12px;
-  align-items: start;
+  padding: 6px 10px;
   border: 0;
+  border-radius: var(--sb-r2);
   background: transparent;
-  color: inherit;
-  cursor: pointer;
-  font: inherit;
+  color: var(--sb-text);
   text-align: left;
-  padding: 0;
-  margin: 0;
-  border-radius: 4px;
+  cursor: pointer;
+  font-size: calc(var(--sb-size-base) + 0.5px);
 }
-
-.sunboard-step-main:focus-visible {
-  outline: 2px solid var(--sunboard-checklist-primary);
-  outline-offset: 2px;
+.sb-root .sb-row:hover,
+.sb-root .sb-row:focus-visible {
+  background: var(--sb-surface-hover);
 }
-
-.sunboard-step-status {
+.sb-root .sb-row-mark {
   display: grid;
-  width: 20px;
-  height: 20px;
   place-items: center;
-  border: 2px solid var(--sunboard-checklist-border);
-  border-radius: 6px;
-  background: transparent;
-  padding: 0;
-  color: var(--sunboard-checklist-primary-foreground);
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  border-radius: var(--sb-r3);
+  background: var(--sb-tint);
+  color: var(--sb-accent);
+}
+.sb-root .sb-row-mark svg {
+  width: 15px;
+  height: 15px;
+}
+.sb-root .sb-row-title {
+  flex: 1;
+  min-width: 0;
+}
+.sb-root .sb-row > svg {
+  width: 16px;
+  height: 16px;
+  flex-shrink: 0;
+  color: var(--sb-text-muted);
 }
 
-.sunboard-step-status svg {
-  width: 12px;
-  height: 12px;
-  stroke-width: 3;
+.sb-root .sb-exchange {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+}
+.sb-root .sb-asked {
+  display: flex;
+  justify-content: flex-end;
+}
+.sb-root .sb-asked p {
+  max-width: 82%;
+  padding: 10px 14px;
+  border-radius: var(--sb-card-radius) var(--sb-card-radius) var(--sb-r3) var(--sb-card-radius);
+  background: var(--sb-surface-hover);
+  color: var(--sb-text);
+  font-size: calc(var(--sb-size-base) + 0.5px);
+  line-height: 1.45;
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
 }
 
-/* Checkable: the status is a button; preview the check on hover/focus. */
-button.sunboard-step-status {
+.sb-root .sb-reply {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+.sb-root .sb-arrive {
+  animation: sb-fade-in 150ms ease-out both;
+}
+.sb-root .sb-reply-text {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  font-size: calc(var(--sb-size-base) + 1px);
+  line-height: 1.55;
+  text-wrap: pretty;
+  overflow-wrap: anywhere;
+}
+.sb-root .sb-answer {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+.sb-root .sb-answer ol,
+.sb-root .sb-answer ul {
+  list-style: decimal;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  padding-left: 1.4em;
+}
+.sb-root .sb-answer ul {
+  list-style: disc;
+}
+.sb-root .sb-answer li {
+  padding-left: 2px;
+}
+.sb-root .sb-answer li::marker {
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-answer strong {
+  font-weight: var(--sb-weight-semibold);
+}
+.sb-root .sb-reply-action {
+  display: flex;
+}
+.sb-root .sb-primary {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 18px 0 16px;
+  border: 0;
+  border-radius: var(--sb-r2);
+  background: var(--sb-accent);
+  color: var(--sb-accent-text);
   cursor: pointer;
+  font-size: calc(var(--sb-size-base) + 0.5px);
+  font-weight: var(--sb-weight-medium);
 }
-
-button.sunboard-step-status svg {
-  opacity: 0;
-  color: var(--sunboard-checklist-muted-foreground);
-  transition: opacity 120ms ease;
+.sb-root .sb-primary svg {
+  width: 14px;
+  height: 14px;
 }
-
-button.sunboard-step-status:hover,
-button.sunboard-step-status:focus-visible {
-  border-color: var(--sunboard-checklist-success);
+.sb-root .sb-secondary {
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 0 16px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-r2);
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  cursor: pointer;
+  font-size: var(--sb-size-base);
+  font-weight: var(--sb-weight-medium);
 }
-
-button.sunboard-step-status:hover svg,
-button.sunboard-step-status:focus-visible svg {
-  opacity: 1;
+.sb-root .sb-secondary:hover {
+  border-color: var(--sb-border-hover);
+  background: var(--sb-surface-hover);
 }
-
-button.sunboard-step-status:focus-visible {
-  outline: 2px solid var(--sunboard-checklist-primary);
-  outline-offset: 2px;
+.sb-root .sb-secondary svg {
+  width: 15px;
+  height: 15px;
 }
-
-/* manual: false and not yet complete: the checkbox is inert and says so. */
-.sunboard-step-status[data-locked="true"] {
-  border-style: dashed;
-  opacity: 0.55;
+.sb-root .sb-secondary.sb-show-again {
+  padding: 0 16px 0 14px;
 }
-
-.sunboard-step[data-completed="true"] .sunboard-step-status {
-  border-color: var(--sunboard-checklist-success);
-  background: var(--sunboard-checklist-success);
+.sb-root .sb-show-again svg {
+  width: 12px;
+  height: 12px;
+  color: var(--sb-accent);
 }
 
-.sunboard-step[data-completed="true"] .sunboard-step-title {
-  color: var(--sunboard-checklist-muted-foreground);
-  text-decoration: line-through;
+.sb-root .sb-support {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px 12px 12px 14px;
+  border-radius: var(--sb-r2);
+  background: var(--sb-surface-hover);
+}
+.sb-root .sb-support > span {
+  flex: 1;
+  font-size: calc(var(--sb-size-base) - 0.5px);
+  line-height: 1.4;
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-support-link {
+  flex-shrink: 0;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-r3);
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  font-size: var(--sb-size-base);
+  font-weight: var(--sb-weight-medium);
+  text-decoration: none;
+}
+.sb-root .sb-support-link:hover {
+  border-color: var(--sb-border-hover);
+}
+.sb-root .sb-support-link svg {
+  width: 14px;
+  height: 14px;
+  color: var(--sb-text-muted);
 }
 
-.sunboard-step-arrow {
+.sb-root .sb-note {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+}
+.sb-root .sb-note-mark {
   display: grid;
-  width: 16px;
-  height: 20px;
   place-items: center;
-  color: var(--sunboard-checklist-muted-foreground);
+  flex-shrink: 0;
+  width: 32px;
+  height: 32px;
+  border-radius: 999px;
+  background: var(--sb-surface-hover);
+  color: var(--sb-text-muted);
 }
-
-.sunboard-step-arrow svg {
+.sb-root .sb-note-mark svg {
   width: 16px;
   height: 16px;
 }
-
-.sunboard-step-content {
-  min-width: 0;
+.sb-root .sb-note-text {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  padding-top: 5px;
 }
-
-.sunboard-step-heading {
+.sb-root .sb-note-words {
   display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 8px;
+  flex-direction: column;
+  gap: 2px;
 }
-
-.sunboard-step-title {
-  min-width: 0;
-  overflow-wrap: anywhere;
-  font-size: 14px;
-  font-weight: 650;
-  line-height: 1.35;
+.sb-root .sb-note-title {
+  font-size: calc(var(--sb-size-base) + 1px);
+  font-weight: var(--sb-weight-medium);
+  line-height: 1.4;
 }
-
-.sunboard-step-badge {
-  flex: 0 0 auto;
-  color: var(--sunboard-checklist-muted-foreground);
-  font-size: 11px;
-  font-weight: 650;
+.sb-root .sb-note-body {
+  font-size: var(--sb-size-base);
   line-height: 1.5;
-  white-space: nowrap;
+  color: var(--sb-text-muted);
 }
 
-.sunboard-step-description {
-  color: var(--sunboard-checklist-muted-foreground);
-  font-size: 13px;
-  line-height: 1.4;
-  margin-top: 3px;
+.sb-root .sb-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: calc(var(--sb-size-base) - 1.5px);
+  color: var(--sb-text-muted);
 }
-
-.sunboard-hotspot {
-  z-index: 2147483001;
-  display: grid;
-  width: 18px;
-  height: 18px;
-  place-items: center;
-  border: 2px solid var(--sunboard-hotspot-border);
-  border-radius: 999px;
-  background: var(--sunboard-hotspot-background);
-  box-shadow: var(--sunboard-hotspot-shadow);
-  color: var(--sunboard-hotspot-dot);
-  cursor: pointer;
-  font-family: var(--sunboard-font);
+.sb-root .sb-line-rule {
+  flex: 1;
+  height: 1px;
+  background: var(--sb-border);
+}
+.sb-root .sb-line-text {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.sb-root .sb-line-text svg {
+  width: 14px;
+  height: 14px;
+}
+.sb-root .sb-rate {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.sb-root .sb-stars {
+  display: flex;
+  justify-content: center;
+}
+.sb-root .sb-star {
+  width: 44px;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 0;
+  border: 0;
+  border-radius: var(--sb-r2);
+  background: none;
+  color: var(--sb-text-muted);
+  cursor: pointer;
 }
-
-.sunboard-hotspot-dot {
-  width: 6px;
-  height: 6px;
-  border-radius: 999px;
-  background: currentColor;
+.sb-root .sb-star svg {
+  width: 24px;
+  height: 24px;
 }
-
-.sunboard-hotspot[data-pulse="true"] {
-  animation: sunboard-hotspot-pulse 1.8s ease-out infinite;
-  box-shadow:
-    var(--sunboard-hotspot-shadow),
-    0 0 0 8px var(--sunboard-hotspot-pulse-ring);
+.sb-root .sb-star-lit {
+  color: var(--sb-accent);
 }
-
-.sunboard-hotspot:focus-visible {
-  outline: 2px solid var(--sunboard-hotspot-background);
-  outline-offset: 3px;
+.sb-root .sb-star-lit svg {
+  fill: currentColor;
 }
 
-@keyframes sunboard-hotspot-pulse {
-  0% {
-    box-shadow:
-      var(--sunboard-hotspot-shadow),
-      0 0 0 0 var(--sunboard-hotspot-pulse-ring);
-  }
-
-  70% {
-    box-shadow:
-      var(--sunboard-hotspot-shadow),
-      0 0 0 10px transparent;
-  }
-
-  100% {
-    box-shadow:
-      var(--sunboard-hotspot-shadow),
-      0 0 0 0 transparent;
-  }
+.sb-root .sb-waiting {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
 }
-
-.sunboard-tour-scrim {
-  position: fixed;
+.sb-root .sb-waiting-head {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: var(--sb-size-base);
+  color: var(--sb-text-muted);
+}
+.sb-root .sb-bars {
+  display: flex;
+  flex-shrink: 0;
+  gap: 3px;
+}
+.sb-root .sb-bar {
+  position: relative;
+  width: 18px;
+  height: 4px;
+  border-radius: 2px;
+  background: var(--sb-border);
+  overflow: hidden;
+}
+.sb-root .sb-bar > span {
+  position: absolute;
   inset: 0;
-  z-index: 2147483001;
-  background: var(--sunboard-overlay-color);
-  pointer-events: none;
+  border-radius: 2px;
+  background: var(--sb-accent);
+  transform: scaleX(0);
+  transform-origin: left;
 }
-
-.sunboard-tour-spotlight {
-  width: 100vw;
-  height: 100vh;
-  background: transparent;
+.sb-root .sb-bar[data-fill="full"] > span,
+.sb-root .sb-bar[data-fill="slow"] > span {
+  transform: none;
 }
-
-.sunboard-tour {
-  z-index: 2147483002;
-  width: min(320px, calc(100vw - 32px));
-  box-sizing: border-box;
-  border: 1px solid var(--sunboard-tour-border);
-  border-radius: var(--sunboard-radius);
-  background: var(--sunboard-tour-background);
-  box-shadow: var(--sunboard-tour-shadow);
-  color: var(--sunboard-tour-foreground);
-  font-family: var(--sunboard-font);
-  padding: 14px;
+.sb-root .sb-bar[data-fill="filling"] > span {
+  animation: sb-fill 1.2s linear forwards;
 }
-
-.sunboard-tour-arrow {
-  color: var(--sunboard-tour-background);
+.sb-root .sb-bar[data-fill="slow"] > span {
+  animation: sb-pulse 1.6s ease-in-out infinite;
 }
-
-.sunboard-tour-meta {
-  color: var(--sunboard-tour-muted-foreground);
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
+.sb-root .sb-stage {
+  display: grid;
+  min-width: 0;
 }
-
-.sunboard-tour-title {
-  margin: 6px 0 0;
-  font-size: 15px;
-  font-weight: 750;
-  line-height: 1.35;
+.sb-root .sb-stage > span {
+  grid-area: 1 / 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  opacity: 0;
+  transform: translateY(3px);
+  transition:
+    opacity 0.2s ease-out,
+    transform 0.2s ease-out;
 }
-
-.sunboard-tour-body {
-  color: var(--sunboard-tour-muted-foreground);
-  font-size: 13px;
-  line-height: 1.45;
-  margin: 6px 0 0;
+.sb-root .sb-stage > .sb-stage-on {
+  opacity: 1;
+  transform: none;
 }
-
-.sunboard-tour-actions {
+.sb-root .sb-skeleton {
   display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-top: 13px;
-}
-
-.sunboard-tour-primary,
-.sunboard-tour-secondary,
-.sunboard-debug button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
-  border-radius: 8px;
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 8px 11px;
+  flex-direction: column;
+  gap: 9px;
 }
-
-.sunboard-tour-primary {
-  border: 0;
-  background: var(--sunboard-tour-primary);
-  color: var(--sunboard-tour-primary-foreground);
+.sb-root .sb-skeleton span {
+  display: block;
+  height: 10px;
+  border-radius: 5px;
+  background: var(--sb-surface-hover);
+  animation: sb-pulse 1.6s ease-in-out infinite;
 }
-
-.sunboard-tour-secondary,
-.sunboard-debug button {
-  border: 1px solid var(--sunboard-tour-secondary-border);
-  background: var(--sunboard-tour-secondary-background);
-  color: var(--sunboard-tour-secondary-foreground);
+.sb-root .sb-skeleton span:nth-child(1) {
+  width: 94%;
 }
-
-/* Tooltip: the tour popover minus the ceremony — no scrim, no step counter.
-   Shares the tour palette so themed hosts restyle both at once. Sits below
-   the tour z-index; an active tour hides tooltips at the provider level. */
-.sunboard-tooltip {
-  position: relative;
-  z-index: 2147483001;
-  width: min(300px, calc(100vw - 32px));
-  box-sizing: border-box;
-  border: 1px solid var(--sunboard-tour-border);
-  border-radius: var(--sunboard-radius);
-  background: var(--sunboard-tour-background);
-  box-shadow: var(--sunboard-tour-shadow);
-  color: var(--sunboard-tour-foreground);
-  font-family: var(--sunboard-font);
-  padding: 14px;
+.sb-root .sb-skeleton span:nth-child(2) {
+  width: 86%;
+  animation-delay: 0.2s;
 }
-
-.sunboard-tooltip-arrow {
-  color: var(--sunboard-tour-background);
+.sb-root .sb-skeleton span:nth-child(3) {
+  width: 58%;
+  animation-delay: 0.4s;
 }
 
-.sunboard-tooltip-close {
+.sb-root .sb-latest-wrap {
   position: absolute;
-  top: 6px;
-  right: 6px;
-  display: inline-flex;
-  align-items: center;
+  z-index: 4;
+  left: 0;
+  right: 0;
+  bottom: 8px;
+  display: flex;
   justify-content: center;
-  width: 22px;
-  height: 22px;
-  border: 0;
-  border-radius: 6px;
-  background: transparent;
-  color: var(--sunboard-tour-muted-foreground);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 0;
+  pointer-events: none;
 }
-
-.sunboard-tooltip-close:focus-visible {
-  outline: 2px solid var(--sunboard-tour-primary);
-  outline-offset: 1px;
+.sb-root .sb-latest {
+  pointer-events: auto;
+  height: 44px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 0 14px 0 12px;
+  border: 1px solid var(--sb-border);
+  border-radius: 999px;
+  background: var(--sb-surface);
+  color: var(--sb-text);
+  box-shadow: 0 6px 16px -6px rgba(10, 11, 14, 0.25);
+  cursor: pointer;
+  font-size: calc(var(--sb-size-base) - 1px);
+  font-weight: var(--sb-weight-medium);
 }
-
-.sunboard-tooltip-title {
-  margin: 0;
-  font-size: 15px;
-  font-weight: 750;
-  line-height: 1.35;
-  padding-right: 20px;
+.sb-root .sb-latest svg {
+  width: 14px;
+  height: 14px;
 }
 
-.sunboard-tooltip-body {
-  color: var(--sunboard-tour-muted-foreground);
-  font-size: 13px;
-  line-height: 1.45;
-  margin: 6px 0 0;
+.sb-root .sb-composer {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 8px 12px 10px;
+  background: var(--sb-surface);
 }
-
-.sunboard-tooltip-actions {
+.sb-root .sb-field {
   display: flex;
-  justify-content: flex-end;
-  margin-top: 13px;
+  align-items: flex-end;
+  gap: 6px;
+  padding: 4px 4px 4px 14px;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-card-radius);
+  background: var(--sb-surface);
+  cursor: text;
+}
+.sb-root .sb-field:focus-within,
+.sb-root .sb-inline .sb-field {
+  border-color: var(--sb-accent);
+  box-shadow: 0 0 0 3px var(--sb-ring);
+}
+.sb-root .sb-field-shut {
+  border-style: dashed;
+  background: transparent;
 }
-
-.sunboard-tooltip-action {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 30px;
+.sb-root .sb-box {
+  flex: 1;
+  min-width: 0;
+  height: 44px;
+  min-height: 44px;
+  max-height: calc(4 * 1.4em + 22px);
+  padding: 11px 0;
   border: 0;
-  border-radius: 8px;
-  background: var(--sunboard-tour-primary);
-  color: var(--sunboard-tour-primary-foreground);
-  cursor: pointer;
-  font: inherit;
-  font-size: 12px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 8px 11px;
-}
-
-.sunboard-debug {
-  position: fixed;
-  right: max(16px, env(safe-area-inset-right));
-  top: max(16px, env(safe-area-inset-top));
-  z-index: 2147483003;
-  display: grid;
-  width: min(380px, calc(100vw - 32px));
-  gap: 6px;
-  box-sizing: border-box;
-  border: 1px solid var(--sunboard-debug-border);
-  border-radius: var(--sunboard-radius);
-  background: var(--sunboard-debug-background);
-  box-shadow: var(--sunboard-debug-shadow);
-  color: var(--sunboard-debug-foreground);
-  font-family: var(--sunboard-font);
-  font-size: 12px;
+  outline: 0;
+  resize: none;
+  overflow-y: hidden;
+  background: transparent;
+  color: var(--sb-text);
+  font-family: var(--sb-font);
+  font-size: calc(var(--sb-size-base) + 1px);
   line-height: 1.4;
-  padding: 12px;
 }
-
-.sunboard-survey-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 2147483000;
+.sb-root .sb-box::placeholder {
+  color: var(--sb-text-muted);
+  opacity: 1;
+}
+.sb-root .sb-box:disabled {
+  cursor: not-allowed;
+}
+.sb-root .sb-send {
   display: grid;
   place-items: center;
-  box-sizing: border-box;
-  background: var(--sunboard-survey-overlay-color);
-  font-family: var(--sunboard-font);
-  padding: max(16px, env(safe-area-inset-bottom));
-  /* The scrim only fades — the scale/pop belongs to the card, not the backdrop. */
-  animation: sunboard-fade-in 160ms ease-out both;
+  flex-shrink: 0;
+  width: 44px;
+  height: 44px;
+  padding: 0;
+  border: 0;
+  border-radius: var(--sb-r2);
+  background: var(--sb-accent);
+  color: var(--sb-accent-text);
+  cursor: pointer;
 }
-
-.sunboard-survey-card {
-  width: min(480px, 100%);
-  max-height: calc(100vh - 32px);
-  overflow: auto;
-  box-sizing: border-box;
-  border: 1px solid var(--sunboard-checklist-border);
-  border-radius: var(--sunboard-radius);
-  background: var(--sunboard-checklist-background);
-  box-shadow: var(--sunboard-checklist-shadow);
-  color: var(--sunboard-checklist-foreground);
-  padding: 24px;
-  animation: sunboard-completion-in 200ms ease-out both;
+.sb-root .sb-send:disabled {
+  background: var(--sb-surface-hover);
+  color: var(--sb-text-muted);
+  cursor: default;
+}
+.sb-root .sb-send svg {
+  width: 18px;
+  height: 18px;
+}
+.sb-root .sb-brand {
+  align-self: center;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--sb-text-muted);
+  font-size: calc(var(--sb-size-base) - 2.5px);
+  text-decoration: none;
+}
+.sb-root .sb-brand svg {
+  display: block;
+}
+.sb-root .sb-brand:hover {
+  color: var(--sb-text);
 }
 
-@keyframes sunboard-fade-in {
+@keyframes sb-slide-in {
   from {
     opacity: 0;
+    transform: translateX(20px);
   }
   to {
     opacity: 1;
+    transform: translateX(0);
   }
 }
-
-.sunboard-survey-card *,
-.sunboard-survey-card *::before,
-.sunboard-survey-card *::after {
-  box-sizing: border-box;
+@keyframes sb-rise {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
 }
-
-.sunboard-survey-head {
-  margin-bottom: 4px;
+@keyframes sb-fill {
+  from {
+    transform: scaleX(0);
+  }
+  to {
+    transform: scaleX(1);
+  }
 }
-
-.sunboard-survey-progress-row {
-  margin-top: 14px;
+@keyframes sb-pulse {
+  0%,
+  100% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
 }
 
-.sunboard-survey-stepcount {
-  margin: 0 0 6px;
-  color: var(--sunboard-checklist-muted-foreground);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1;
+@media (max-width: 640px) {
+  .sb-root .sb-launcher,
+  .sb-root .sb-tour-pill {
+    right: 16px;
+    bottom: 16px;
+  }
+  .sb-root .sb-panel-scrim {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 2147482995;
+    background: rgba(10, 11, 14, 0.42);
+    animation: sb-fade-in 160ms ease-out both;
+  }
+  .sb-root .sb-panel:not(.sb-inline) {
+    top: max(56px, env(safe-area-inset-top));
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: auto;
+    max-width: none;
+    height: auto;
+    border-width: 1px 0 0;
+    border-radius: calc(var(--sb-card-radius) + 6px) calc(var(--sb-card-radius) + 6px) 0 0;
+    box-shadow: 0 -12px 40px -12px rgba(10, 11, 14, 0.35);
+    animation: sb-rise 0.3s ease-out;
+  }
+  .sb-root .sb-panel:not(.sb-inline)::before {
+    content: "";
+    display: block;
+    flex-shrink: 0;
+    width: 36px;
+    height: 4px;
+    margin: 8px auto 0;
+    border-radius: 2px;
+    background: var(--sb-border);
+  }
+  .sb-root .sb-panel:not(.sb-inline) .sb-composer {
+    padding-bottom: max(34px, env(safe-area-inset-bottom));
+  }
+  /* 16px so iOS does not zoom the page when the box takes focus. */
+  .sb-root .sb-panel:not(.sb-inline) .sb-box {
+    font-size: 16px;
+  }
 }
 
-.sunboard-survey-progress-row .sunboard-progress {
-  margin-top: 0;
+/* ---------- overlay: cards ---------- */
+.sb-root .popover-card {
+  background: var(--sb-surface);
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-card-radius);
+  box-shadow: var(--sb-card-shadow);
+  padding: var(--sb-card-padding);
 }
-
-.sunboard-survey-step-title {
-  margin: 0;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1.3;
+.sb-root .popover-card.tour {
+  width: var(--sb-tour-w);
 }
-
-.sunboard-survey-form {
-  display: grid;
-  gap: 18px;
-  margin-top: 16px;
+.sb-root .popover-card.tip {
+  width: var(--sb-tooltip-w);
 }
-
-.sunboard-survey-nav {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
+.sb-root .popover-card.announce {
+  width: var(--sb-announcement-w);
+  max-height: var(--sb-announcement-maxh);
+  overflow: auto;
 }
-
-.sunboard-survey-back {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  border: 1px solid var(--sunboard-checklist-border);
-  border-radius: 8px;
-  background: var(--sunboard-checklist-background);
-  color: var(--sunboard-checklist-foreground);
-  cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  font-weight: 650;
-  line-height: 1;
-  padding: 10px 14px;
+.sb-root .popover-card.tour,
+.sb-root .popover-card.tip,
+.sb-root .popover-card.announce {
+  max-width: calc(100vw - 32px);
 }
 
-.sunboard-survey-back:hover {
-  background: var(--sunboard-checklist-muted);
+/* Anchored cards scroll on an inner wrapper, never on the card itself: the
+   arrow is a card child positioned outside the border, and overflow on the
+   card would clip it. Padding moves inward with the scrolling. */
+.sb-root .popover-card.tour,
+.sb-root .popover-card.tip {
+  padding: 0;
 }
-
-.sunboard-survey-back:focus-visible {
-  outline: 2px solid var(--sunboard-checklist-primary);
-  outline-offset: 2px;
+.sb-root .pop-scroll {
+  padding: var(--sb-card-padding);
+  border-radius: calc(var(--sb-card-radius) - 1px);
+  overflow: auto;
 }
-
-.sunboard-survey-questions {
-  display: grid;
-  gap: 18px;
-  list-style: none;
-  margin: 0;
-  padding: 0;
+.sb-root .popover-card.tour > .pop-scroll {
+  max-height: var(--sb-tour-maxh);
 }
-
-.sunboard-survey-prompt {
-  margin: 0 0 8px;
-  font-size: 14px;
-  font-weight: 650;
-  line-height: 1.35;
+.sb-root .popover-card.tip > .pop-scroll {
+  max-height: var(--sb-tooltip-maxh);
 }
-
-.sunboard-survey-required {
-  color: var(--sunboard-checklist-primary);
+.sb-root .popover-card h4 {
+  font-size: var(--sb-size-lg);
+  font-weight: var(--sb-weight-semibold);
+  line-height: var(--sb-lh-snug);
+  margin-bottom: 6px;
 }
-
-.sunboard-survey-options {
+.sb-root .popover-card p {
+  font-size: var(--sb-size-base);
+  color: var(--sb-text-muted);
+  line-height: var(--sb-lh-normal);
+}
+.sb-root .pop-kicker {
+  font-size: var(--sb-size-sm);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--sb-text-muted);
+}
+.sb-root .pop-top {
   display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 10px;
+  margin-bottom: 6px;
 }
-
-.sunboard-survey-option {
-  display: inline-flex;
-  align-items: center;
-  min-height: 36px;
-  border: 1px solid var(--sunboard-checklist-border);
+.sb-root .sb-close {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  margin: -4px -6px 0 auto;
+  border: 0;
   border-radius: 999px;
-  background: var(--sunboard-checklist-background);
-  color: var(--sunboard-checklist-foreground);
+  background: transparent;
+  color: var(--sb-text-muted);
   cursor: pointer;
-  font: inherit;
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1;
-  padding: 9px 14px;
+  padding: 0;
 }
-
-.sunboard-survey-option:hover {
-  background: var(--sunboard-checklist-muted);
+.sb-root .sb-close:hover {
+  background: var(--sb-surface-hover);
 }
-
-.sunboard-survey-option[data-selected="true"] {
-  border-color: var(--sunboard-checklist-primary);
-  background: var(--sunboard-checklist-primary);
-  color: var(--sunboard-checklist-primary-foreground);
+.sb-root .sb-close svg {
+  width: 14px;
+  height: 14px;
 }
-
-.sunboard-survey-option:focus-visible,
-.sunboard-survey-input:focus-visible,
-.sunboard-survey-submit:focus-visible {
-  outline: 2px solid var(--sunboard-checklist-primary);
-  outline-offset: 2px;
+.sb-root .pop-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--sb-input-gap);
+  margin-top: 12px;
+}
+.sb-root .pop-actions .ghost {
+  background: none;
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-input-radius);
+  color: var(--sb-text);
+  height: var(--sb-input-height);
+  padding: 0 var(--sb-input-padding);
+  font-family: var(--sb-font);
+  font-size: var(--sb-size-sm);
+  cursor: pointer;
+}
+.sb-root .pop-actions .ghost:hover {
+  border-color: var(--sb-border-hover);
+  background: var(--sb-surface-hover);
 }
 
-.sunboard-survey-input {
+/* media flush to the card's top edge */
+.sb-root .pop-media {
+  margin: calc(-1 * var(--sb-card-padding)) calc(-1 * var(--sb-card-padding))
+    12px;
+  border-radius: calc(var(--sb-card-radius) - 1px)
+    calc(var(--sb-card-radius) - 1px) 0 0;
+  overflow: hidden;
+  border-bottom: 1px solid var(--sb-border);
+}
+.sb-root .pop-media img,
+.sb-root .pop-media video {
+  display: block;
   width: 100%;
-  min-height: 38px;
-  border: 1px solid var(--sunboard-checklist-border);
-  border-radius: 8px;
-  background: var(--sunboard-checklist-background);
-  color: var(--sunboard-checklist-foreground);
-  font: inherit;
-  font-size: 14px;
-  line-height: 1.4;
-  padding: 9px 11px;
+  height: auto;
 }
-
-.sunboard-survey-error {
-  margin: 0;
-  color: #dc2626;
-  font-size: 13px;
-  line-height: 1.4;
+.sb-root .pop-media iframe {
+  display: block;
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  border: 0;
 }
 
-.sunboard-survey-submit {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-height: 40px;
-  border: 0;
-  border-radius: 8px;
-  background: var(--sunboard-checklist-primary);
-  color: var(--sunboard-checklist-primary-foreground);
+/* ---------- tooltip pins ---------- */
+.sb-root .sb-pin {
+  position: fixed;
+  z-index: 2147482995;
+  width: 12px;
+  height: 12px;
+  padding: 0;
+  border: none;
+  border-radius: 999px;
+  background: var(--sb-accent);
   cursor: pointer;
-  font: inherit;
-  font-size: 14px;
-  font-weight: 700;
-  line-height: 1;
-  padding: 10px 14px;
+  animation: sb-pin-pulse 1.8s ease-out infinite;
 }
-
-.sunboard-survey-submit:disabled {
-  opacity: 0.55;
-  cursor: not-allowed;
+.sb-root .sb-pin[aria-expanded="true"] {
+  animation: none;
 }
-
-.sunboard-root-completion {
-  text-align: center;
-  animation: sunboard-completion-in 260ms ease-out both;
+@keyframes sb-pin-pulse {
+  0% {
+    box-shadow: 0 0 0 0 color-mix(in srgb, var(--sb-accent) 40%, transparent);
+  }
+  70% {
+    box-shadow: 0 0 0 12px transparent;
+  }
+  100% {
+    box-shadow: 0 0 0 0 transparent;
+  }
 }
 
-.sunboard-completion-close {
-  position: absolute;
-  top: 12px;
-  right: 12px;
+/* ---------- overlay: scrim, spotlight, positioning ---------- */
+/* Purely visual: the page (and the tour target) stays clickable under it. */
+.sb-root .sb-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 2147482997;
+  background: var(--sb-overlay);
+  width: 100%;
+  height: 100%;
+  pointer-events: none;
+  animation: sb-fade-in 160ms ease-out both;
 }
-
-.sunboard-completion {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 8px;
-  padding: 8px 8px 4px;
+.sb-root .sb-spotlight {
+  background: none;
 }
-
-.sunboard-completion-check {
+/* pointer-events: a host dialog library that switches pointer events off on
+   <body> would otherwise switch off the tour card with it. */
+.sb-root .sb-floating {
+  position: absolute;
+  z-index: 2147483000;
+  pointer-events: auto;
+}
+.sb-root .sb-modal-wrap {
+  position: fixed;
+  inset: 0;
+  z-index: 2147483000;
   display: grid;
   place-items: center;
-  width: 56px;
-  height: 56px;
-  margin-bottom: 4px;
-  border-radius: 999px;
-  background: color-mix(
-    in srgb,
-    var(--sunboard-checklist-success) 14%,
-    transparent
-  );
-  color: var(--sunboard-checklist-success);
-  animation: sunboard-completion-check-in 380ms cubic-bezier(0.34, 1.56, 0.64, 1)
-    both;
+  padding: 20px;
+  pointer-events: auto;
 }
 
-.sunboard-completion-check svg {
-  width: 30px;
-  height: 30px;
-}
-
-.sunboard-completion-subtitle {
-  margin: 0;
-  color: var(--sunboard-checklist-muted-foreground);
-  font-size: 12px;
-  font-weight: 650;
-  line-height: 1.2;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
+/* Entrances: the scrim only fades; the pop/scale belongs to the card. The
+   floating card fades WITHOUT scale: its position lives in an inline
+   transform (floating-ui), which a transform animation would override. */
+.sb-root .sb-floating {
+  animation: sb-fade-in 160ms ease-out both;
 }
-
-.sunboard-completion-title {
-  margin: 0;
-  font-size: 18px;
-  font-weight: 700;
-  line-height: 1.3;
+.sb-root .sb-modal-wrap .popover-card {
+  animation: sb-card-in 200ms ease-out both;
 }
 
-.sunboard-completion-message {
-  margin: 0;
-  color: var(--sunboard-checklist-muted-foreground);
-  font-size: 14px;
-  line-height: 1.5;
+@keyframes sb-fade-in {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
 }
-
-@keyframes sunboard-completion-in {
+@keyframes sb-card-in {
   from {
     opacity: 0;
     transform: scale(0.96);
@@ -909,7 +1201,50 @@ button.sunboard-step-status:focus-visible {
   }
 }
 
-@keyframes sunboard-completion-check-in {
+/* ---------- overlay: banner ---------- */
+.sb-root .banner-bar {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  background: var(--sb-surface);
+  border: 1px solid var(--sb-border);
+  border-radius: var(--sb-input-radius);
+  box-shadow: var(--sb-card-shadow);
+  padding: 10px 16px;
+}
+.sb-root .banner-bar > span {
+  flex: 1;
+}
+.sb-root .banner-bar .dismiss {
+  display: grid;
+  place-items: center;
+  width: 24px;
+  height: 24px;
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  border-radius: 999px;
+  color: var(--sb-text-muted);
+  cursor: pointer;
+  padding: 0;
+}
+.sb-root .banner-bar .dismiss:hover {
+  background: var(--sb-surface-hover);
+}
+.sb-root .banner-bar .dismiss svg {
+  width: 14px;
+  height: 14px;
+}
+.sb-root .sb-banner {
+  position: fixed;
+  top: max(12px, env(safe-area-inset-top));
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: 2147482996;
+  width: min(720px, calc(100vw - 32px));
+}
+
+@keyframes sb-check-in {
   0% {
     opacity: 0;
     transform: scale(0.4);
@@ -925,10 +1260,24 @@ button.sunboard-step-status:focus-visible {
 }
 
 @media (prefers-reduced-motion: reduce) {
-  .sunboard-root-completion,
-  .sunboard-completion-check,
-  .sunboard-survey-overlay,
-  .sunboard-survey-card {
+  .sb-root .sb-scrim,
+  .sb-root .sb-floating,
+  .sb-root .sb-modal-wrap .popover-card,
+  .sb-root .sb-pin,
+  .sb-root .sb-launcher,
+  .sb-root .sb-panel,
+  .sb-root .sb-panel-scrim,
+  .sb-root .sb-arrive,
+  .sb-root .sb-bar > span,
+  .sb-root .sb-skeleton span {
     animation: none;
+    transition: none;
+  }
+  .sb-root .sb-bar[data-fill="filling"] > span {
+    transform: none;
+  }
+  .sb-root .sb-stage > span {
+    transform: none;
+    transition: none;
   }
 }