/* ============================================================
   OBSERVANT self-serve SaaS prototype
   Scoped additions only. Existing app files remain untouched.
   ============================================================ */

.ss-entry {
  min-height: 100%;
  display: grid;
  grid-template-columns: minmax(360px, 0.82fr) minmax(520px, 1fr);
  background:
    radial-gradient(62% 52% at 28% 18%, oklch(0.955 0.018 52 / .72), transparent 65%),
    var(--canvas);
}
.ss-entry-left {
  padding: clamp(2rem, 5vw, 4.5rem);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border);
}
.ss-entry-copy { margin-block: auto; max-width: 520px; }
.ss-entry-copy h1 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.25rem, 5vw, 4.4rem);
  letter-spacing: -0.03em;
  line-height: 1;
}
.ss-entry-copy p {
  margin-top: 1.25rem;
  color: var(--text-secondary);
  font-size: 1.08rem;
  line-height: 1.55;
}
.ss-proof-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 2rem;
}
.ss-proof-grid div {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: oklch(0.99 0.004 80 / .66);
  padding: 1rem;
}
.ss-proof-grid b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.55rem;
  line-height: 1;
}
.ss-proof-grid span {
  display: block;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.ss-entry-card {
  align-self: center;
  justify-self: center;
  width: min(620px, calc(100% - 3rem));
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(1.4rem, 4vw, 2rem);
  box-shadow: 0 34px 70px -42px oklch(0.35 0.04 50 / .38);
}
.ss-card-head h2 {
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.8rem;
}
.ss-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.5rem;
}
.ss-field { display: flex; flex-direction: column; gap: 0.48rem; }
.ss-field.wide { grid-column: 1 / -1; }
.ss-field > span {
  font-weight: 600;
  font-size: 0.86rem;
}
.ss-entry-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}
.ss-fineprint {
  color: var(--text-muted);
  font-size: 0.82rem;
  margin-top: 0.9rem;
}

/* ── sign-in gate (shown before onboarding) ─────────────────── */
.ss-auth-loading {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--canvas);
  color: var(--text-muted);
  font-size: 0.95rem;
}
.ss-auth-signin { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.5rem; }
.ss-auth-signin > .btn { width: 100%; justify-content: center; }
.ss-auth-google { display: flex; align-items: center; justify-content: center; gap: 0.6rem; width: 100%; }
.ss-auth-or {
  display: flex;
  align-items: center;
  text-align: center;
  color: var(--text-muted);
  font-size: 0.8rem;
  margin: 0.1rem 0;
}
.ss-auth-or::before, .ss-auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ss-auth-or span { padding: 0 0.8rem; }
.ss-auth-sent {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--success);
  font-weight: 600;
  font-size: 0.92rem;
  margin-top: 1.5rem;
  line-height: 1.45;
}
.ss-auth-err { color: var(--danger, #b54034); font-size: 0.86rem; margin-top: 0.8rem; }
.ss-auth-who {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ss-activation {
  min-height: 100%;
  background: var(--canvas);
}
.ss-activation-top {
  min-height: 64px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 1rem;
  padding-block: 10px;
  padding-inline: clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--border);
  background: oklch(0.985 0.006 78 / .86);
  backdrop-filter: blur(10px);
}
.ss-activation-nav { display: flex; justify-content: center; min-width: 0; }
.ss-activation-top > .ss-top-right { justify-self: end; }
@media (max-width: 720px) {
  .ss-activation-top { grid-template-columns: auto 1fr; }
  .ss-activation-nav { display: none; }
}
.ss-top-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* ── account control: one avatar button → dropdown menu ── */
.ss-acct { position: relative; }
.ss-acct-plain {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.9rem;
}
.ss-acct-btn {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  padding: 3px 6px 3px 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--canvas);
  color: var(--text-secondary);
  transition: border-color 0.15s, background 0.15s;
}
.ss-acct-btn:hover { border-color: var(--border-strong); background: var(--surface); }
.ss-acct-ava {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--accent);
  color: oklch(0.99 0 0);
  font-weight: 600;
  font-size: 0.82rem;
  line-height: 1;
}
.ss-acct-chev { transition: transform 0.15s; color: var(--text-muted); }
.ss-acct-chev.is-open { transform: rotate(180deg); }
.ss-acct-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  z-index: 40;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: 0 12px 30px oklch(0.255 0.018 58 / 0.14), 0 2px 6px oklch(0.255 0.018 58 / 0.08);
}
.ss-acct-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.ss-acct-email {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-acct-ws { font-size: 0.78rem; color: var(--text-muted); }
.ss-acct-item {
  text-align: left;
  padding: 8px 10px;
  border-radius: 7px;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text-primary);
  transition: background 0.12s, color 0.12s;
}
.ss-acct-item:hover { background: var(--accent-tint); color: var(--accent-hover); }
.ss-activation-wrap {
  display: block;
  min-height: calc(100vh - 64px);
}
.ss-checklist {
  min-width: 0;
  padding: clamp(1.6rem, 4vw, 2.4rem);
  background: var(--surface);
  border-right: 1px solid var(--border);
}
.ss-checklist h1 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 2.25rem;
  letter-spacing: -0.02em;
  line-height: 1.04;
}
.ss-checklist p {
  margin-top: 0.9rem;
  color: var(--text-secondary);
}
.ss-checks {
  list-style: none;
  padding: 0;
  margin-top: 1.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.ss-checks li {
  display: flex;
  align-items: center;
  gap: 0.72rem;
  color: var(--text-muted);
}
.ss-checks span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border-strong);
  background: var(--canvas);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  flex-shrink: 0;
}
.ss-checks li.done { color: var(--text-primary); }
.ss-checks li.done span {
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(0.99 0.01 70);
}
.ss-activation-main {
  min-width: 0;
  max-width: 1080px;
  margin-inline: auto;
  padding: clamp(1.5rem, 4vw, 2.6rem);
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ss-panel,
.ss-launch-panel,
.ss-chat-panel,
.ss-answer-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
}
.ss-panel-title {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.ss-panel-title span {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}
.ss-panel-title h2 {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.32rem;
  line-height: 1.12;
}
.ss-panel-title em,
.ss-status {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 0.28rem 0.62rem;
  font-style: normal;
  white-space: nowrap;
}
.ss-status.success,
.ss-panel-title em {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
  color: var(--accent-hover);
}
.ss-workspace-card {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.ss-workspace-card .conv-ava {
  width: 42px;
  height: 42px;
}
.ss-workspace-card h3 {
  font-size: 1.02rem;
}
.ss-workspace-card p {
  color: var(--text-muted);
  font-size: 0.86rem;
}
.ss-workspace-card .ss-status {
  margin-left: auto;
}
.ss-card-grid {
  display: grid;
  gap: 0.85rem;
}
.ss-card-grid.two { grid-template-columns: repeat(2, 1fr); }
.ss-card-grid.three { grid-template-columns: repeat(3, 1fr); }
.ss-select-card,
.ss-surface-card {
  text-align: left;
  border: 1px solid var(--border-strong);
  border-radius: 14px;
  background: var(--panel);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  min-height: 160px;
  transition: transform .18s, border-color .18s, box-shadow .18s;
}
.ss-select-card:hover,
.ss-surface-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
}
.ss-select-card.on,
.ss-surface-card.on {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ss-select-card > span,
.ss-surface-card > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
}
.ss-select-card b,
.ss-surface-card b {
  font-size: 1rem;
}
.ss-select-card p,
.ss-surface-card p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.42;
}
.ss-select-card em,
.ss-surface-card em {
  margin-top: auto;
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: normal;
}
.ss-code-block {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--night);
  color: oklch(0.92 0.012 75);
  overflow: hidden;
}
.ss-code-block > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid oklch(0.34 0.014 58);
  padding: 0.65rem 0.8rem;
}
.ss-code-block span,
.ss-code-block button {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
}
.ss-code-block button {
  color: oklch(0.72 0.12 45);
  font-weight: 600;
}
.ss-code-block pre {
  margin: 0;
  padding: 0.9rem;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  line-height: 1.6;
  white-space: pre-wrap;
}
.ss-event-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.7rem;
}
.ss-event {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 0.85rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  text-align: left;
  color: var(--text-secondary);
}
.ss-event span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--surface);
  color: var(--text-muted);
}
.ss-event b {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  word-break: break-word;
}
.ss-event.on {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--text-primary);
}
.ss-event.on span {
  background: var(--accent);
  color: oklch(0.99 0 0);
}
.ss-launch-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: var(--canvas-deep);
}
.ss-launch-panel h2 {
  margin-top: 0.4rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
}
.ss-launch-panel p {
  color: var(--text-secondary);
  margin-top: 0.35rem;
}

.ss-shell {
  height: 100%;
  display: flex;
  overflow: hidden;
  background: var(--canvas);
}
.ss-sidebar {
  width: 258px;
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  padding: 1rem;
  display: flex;
  flex-direction: column;
}
.ss-sidebar-brand {
  padding: 0.45rem 0.55rem 1rem;
  border-radius: 10px;
  text-align: left;
}
.ss-sidebar-brand:hover,
.ss-sidebar-brand:focus-visible {
  background: var(--surface-2);
}
.ss-nav {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}
.ss-nav button {
  display: flex;
  align-items: center;
  gap: 0.68rem;
  padding: 0.62rem 0.7rem;
  border-radius: 10px;
  color: var(--text-secondary);
  font-weight: 600;
  text-align: left;
}
.ss-nav button:hover {
  background: var(--surface-2);
  color: var(--text-primary);
}
.ss-nav button.on {
  background: var(--accent-tint);
  color: var(--accent-hover);
}
.ss-nav em {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: var(--text-muted);
}
.ss-workspace-foot {
  margin-top: auto;
  border-top: 1px solid var(--border);
  padding: 1rem 0.55rem 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  width: 100%;
  text-align: left;
  border-radius: 10px;
}
.ss-workspace-foot:hover,
.ss-workspace-foot:focus-visible {
  background: var(--surface-2);
}
.ss-workspace-foot .ws-logo {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}
.ss-workspace-foot b,
.ss-workspace-foot span {
  display: block;
}
.ss-workspace-foot span {
  color: var(--success);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ss-app-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.ss-topbar {
  height: 74px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0 clamp(1.25rem, 3vw, 2.2rem);
  border-bottom: 1px solid var(--border);
  background: oklch(0.985 0.006 78 / .86);
  backdrop-filter: blur(10px);
}
.ss-breadcrumb {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.ss-topbar h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  line-height: 1;
  margin-top: 0.2rem;
}
.ss-topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.ss-live {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--success);
  white-space: nowrap;
}
.ss-live-button {
  border-radius: 999px;
  padding: 0.45rem 0.6rem;
}
.ss-live-button:hover,
.ss-live-button:focus-visible {
  background: var(--accent-tint);
  color: var(--accent-hover);
}
.ss-live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
  animation: pulse 2.4s infinite;
}
.ss-app-content {
  flex: 1;
  overflow: auto;
  padding: clamp(1.35rem, 3vw, 2.25rem);
}
.ss-page-stack {
  max-width: 1180px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ss-hero-status {
  background: var(--night);
  color: oklch(0.94 0.012 75);
  border-radius: 18px;
  padding: clamp(1.4rem, 3vw, 2rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1.5rem;
  align-items: end;
}
.ss-hero-status h2 {
  margin-top: 0.45rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2rem, 4vw, 3rem);
  color: oklch(0.96 0.012 75);
}
.ss-hero-status p {
  color: oklch(0.78 0.012 75);
  margin-top: 0.6rem;
  max-width: 58ch;
}
.ss-hero-metrics,
.ss-loop-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}
.ss-metric b {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.7rem;
  line-height: 1;
}
.ss-metric span {
  color: var(--text-muted);
  font-size: 0.78rem;
}
.ss-hero-status .ss-metric span {
  color: oklch(0.7 0.012 75);
}
.ss-card-action {
  width: 100%;
  text-align: left;
  color: inherit;
  transition: transform .18s, border-color .18s, background .18s, box-shadow .18s;
}
.ss-card-action:hover,
.ss-card-action:focus-visible,
.ss-person-line:hover,
.ss-person-line:focus-visible,
.ss-event-list button:hover,
.ss-event-list button:focus-visible,
.ss-memory-row:hover,
.ss-memory-row:focus-visible,
.is-focused {
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ss-card-action:hover,
.ss-card-action:focus-visible {
  transform: translateY(-2px);
  border-color: var(--accent-soft);
}
.ss-hero-status .ss-card-action {
  border-radius: 12px;
  padding: 0.55rem 0.65rem;
}
.ss-hero-status .ss-card-action:hover,
.ss-hero-status .ss-card-action:focus-visible {
  background: oklch(0.99 0.004 80 / .08);
  box-shadow: none;
}
.ss-dashboard-grid,
.ss-conv-layout,
.ss-learning-layout,
.ss-people-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ss-learning-layout,
.ss-people-layout {
  max-width: 1240px;
  margin: 0 auto;
  align-items: start;
}
.ss-learning-layout {
  grid-template-columns: 340px minmax(0, 1fr);
}
.ss-people-layout {
  grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1.1fr);
}
.ss-list-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.ss-mini-lines,
.ss-event-list,
.ss-table-list,
.ss-conv-list,
.ss-memory-list {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ss-person-line {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.85rem;
  width: 100%;
  min-width: 0;
  padding: 0.8rem 0.65rem;
  text-align: left;
  color: inherit;
  transition: background .18s, border-color .18s, box-shadow .18s;
}
.ss-mini-lines .ss-person-line,
.ss-table-list .ss-person-line {
  border-top: 1px solid var(--border);
}
.ss-mini-lines .ss-person-line:first-child,
.ss-table-list .ss-person-line:first-child {
  border-top-color: transparent;
}
.ss-person-line.card {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.ss-person-line.on,
.ss-person-line:hover,
.ss-person-line:focus-visible {
  background: var(--accent-tint);
  border-radius: 12px;
}
.ss-person-line.card:hover,
.ss-person-line.card:focus-visible,
.ss-person-line.card.on {
  border-color: var(--accent-soft);
}
.ss-profile-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  color: oklch(0.99 0 0);
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0;
  overflow: hidden;
}
.ss-person-line .ss-profile-avatar {
  grid-row: 1 / span 2;
}
.ss-person-line-copy {
  min-width: 0;
  grid-column: 2;
}
.ss-person-line-copy b,
.ss-person-line-copy span,
.ss-person-line-copy p {
  display: block;
}
.ss-person-line-copy b {
  font-size: 0.92rem;
  line-height: 1.25;
}
.ss-person-line-copy span,
.ss-person-line-copy p {
  color: var(--text-muted);
  font-size: 0.84rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ss-person-line-copy span {
  margin-top: 0.15rem;
}
.ss-person-line-copy p {
  margin: 0.2rem 0 0;
  white-space: normal;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ss-person-line.compact .ss-person-line-copy p {
  -webkit-line-clamp: 1;
}
.ss-person-line > em {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--success);
  white-space: nowrap;
}
.ss-event-list button {
  border-top: 1px solid var(--border);
  padding: 0.78rem 0.65rem;
  text-align: left;
  width: 100%;
}
.ss-event-list button:first-child {
  border-top: none;
}
.ss-event-list button:hover,
.ss-event-list button:focus-visible,
.ss-memory-row:hover,
.ss-memory-row:focus-visible,
.ss-person-line:hover,
.ss-person-line:focus-visible {
  background: var(--accent-tint);
  border-radius: 10px;
}
.ss-event-list span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
}
.ss-event-list b {
  display: block;
  margin-top: 0.16rem;
  font-size: 0.92rem;
  line-height: 1.25;
}
.ss-event-list p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.35;
  margin-top: 0.18rem;
}
.ss-memory-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.ss-memory-list li {
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.ss-memory-list li:first-child {
  border-top: none;
  padding-top: 0;
}
.ss-memory-list b,
.ss-memory-list span {
  display: block;
}
.ss-memory-row {
  text-align: left;
  width: 100%;
}
.ss-memory-list span {
  color: var(--text-secondary);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}
.ss-panel-actions {
  margin-top: 0.8rem;
  display: flex;
  justify-content: flex-end;
}
.ss-start-panel p {
  color: var(--text-secondary);
  line-height: 1.5;
}
.ss-empty-state {
  border: 1px dashed var(--border-strong);
  border-radius: 13px;
  background: var(--surface);
  padding: 1rem;
}
.ss-empty-state b,
.ss-empty-state span {
  display: block;
}
.ss-empty-state span {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.45;
  margin-top: 0.28rem;
}
.ss-empty-state .ss-empty-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: 0.6rem;
  border-radius: 9px;
  background: var(--accent-tint);
  color: var(--accent);
}
.ss-empty-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.85rem;
  color: var(--accent);
  font-weight: 600;
  font-size: 0.88rem;
  background: none;
}
.ss-empty-cta:hover { color: var(--accent-hover); }

/* empty dashboard — Home welcome + single next-action */
.ss-hero-empty { display: block; }
.ss-empty-home-lead {
  color: var(--text-secondary);
  font-size: 0.94rem;
  line-height: 1.5;
  margin: 0.2rem 0 1rem;
}
.ss-empty-home-quiet {
  margin-top: 1rem;
  color: var(--text-muted);
  font-size: 0.86rem;
}
.ss-panel-title-with-action {
  margin-bottom: 0.8rem;
}
.ss-wide-action {
  width: 100%;
  justify-content: center;
  margin-bottom: 0.85rem;
}
.ss-create-loop {
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  background: var(--accent-tint);
  padding: 1rem;
  margin-bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.ss-create-loop .ss-panel-title {
  margin-bottom: 0;
}
.ss-create-loop h3 {
  font-size: 0.9rem;
  margin-bottom: 0.6rem;
}
.ss-chip-grid {
  display: grid;
  gap: 0.55rem;
}
.ss-choice-chip {
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 0.78rem;
  text-align: left;
  transition: border-color .18s, background .18s, box-shadow .18s;
}
.ss-choice-chip:hover,
.ss-choice-chip:focus-visible,
.ss-choice-chip.on {
  border-color: var(--accent-soft);
  background: var(--surface);
  box-shadow: 0 0 0 3px var(--accent-tint);
}
.ss-choice-chip b,
.ss-choice-chip span {
  display: block;
}
.ss-choice-chip span {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0.18rem;
}
.ss-small-toggle-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.55rem;
}
.ss-create-loop-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.7rem;
}
.ss-progress-card {
  border: 1px solid var(--accent-soft);
  border-radius: 14px;
  background: var(--accent-tint);
  padding: 1rem;
}
.ss-progress-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ss-progress-head h3 {
  margin-top: 0.3rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
}
.ss-progress-head em {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--accent-hover);
  font-style: normal;
  white-space: nowrap;
}
.ss-progress-track {
  height: 8px;
  border-radius: 999px;
  background: oklch(0.99 0.004 80 / .72);
  overflow: hidden;
  margin-top: 0.85rem;
}
.ss-progress-track span {
  display: block;
  position: relative;
  height: 100%;
  border-radius: inherit;
  overflow: hidden;
  background: linear-gradient(90deg, var(--accent), var(--accent-hover), var(--accent));
  background-size: 190% 100%;
  transition: width .35s ease;
  animation: ss-progress-flow 1.8s linear infinite;
}
.ss-progress-track span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, oklch(1 0 0 / .32), transparent);
  transform: translateX(-120%);
  animation: ss-progress-glint 1.45s ease-in-out infinite;
}
@keyframes ss-progress-flow {
  to { background-position: 190% 0; }
}
@keyframes ss-progress-glint {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-progress-track span {
    animation: none;
  }
  .ss-progress-track span::after {
    display: none;
    animation: none;
  }
}
.ss-progress-steps {
  list-style: none;
  padding: 0;
  margin: 0.9rem 0 0;
  display: grid;
  gap: 0.55rem;
}
.ss-progress-steps li {
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  color: var(--text-muted);
}
.ss-progress-steps li > span {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: 0.72rem;
}
.ss-progress-steps li.done {
  color: var(--text-primary);
}
.ss-progress-steps li.done > span {
  background: var(--accent);
  border-color: var(--accent);
  color: oklch(0.99 0.01 70);
}
.ss-progress-steps li.on {
  color: var(--text-primary);
}
.ss-progress-steps li.on > span {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 5px var(--accent-tint);
  animation: ss-stage-pulse 1.35s ease-in-out infinite;
}
@keyframes ss-stage-pulse {
  0%, 100% { box-shadow: 0 0 0 4px var(--accent-tint); }
  50% { box-shadow: 0 0 0 8px oklch(0.92 0.055 48 / .55); }
}
@media (prefers-reduced-motion: reduce) {
  .ss-progress-steps li.on > span {
    animation: none;
  }
}
.ss-progress-steps b,
.ss-progress-steps p {
  display: block;
}
.ss-progress-steps p {
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.35;
  margin-top: 0.12rem;
}
.ss-answer-card {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.ss-answer-card h3 {
  margin-top: 0.5rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
}
.ss-answer-card p {
  color: var(--text-secondary);
  margin-top: 0.5rem;
}
.ss-answer-card em {
  display: block;
  margin-top: 0.55rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.ss-answer-card div {
  margin-top: 0.8rem;
  color: var(--accent-hover);
  font-weight: 700;
}
.ss-answer-progress {
  margin-top: 0.9rem;
}
.ss-loop-card,
.ss-insight-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.25rem;
}
.ss-loop-card:hover,
.ss-loop-card:focus-visible,
.ss-insight-card:hover,
.ss-insight-card:focus-visible {
  background: var(--surface);
}
.ss-loop-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ss-loop-card h3,
.ss-insight-card h3 {
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.35rem;
}
.ss-loop-card p,
.ss-insight-card p {
  margin-top: 0.5rem;
  color: var(--text-secondary);
}
.ss-loop-stats {
  border-top: 1px solid var(--border);
  margin-top: 1rem;
  padding-top: 1rem;
}
.ss-loop-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ss-loop-option {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 1rem;
  transition: border-color .18s, background .18s, box-shadow .18s, transform .18s;
}
.ss-loop-option:hover,
.ss-loop-option:focus-visible,
.ss-loop-option.on {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
}
.ss-loop-option:hover,
.ss-loop-option:focus-visible {
  transform: translateY(-1px);
}
.ss-loop-option > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}
.ss-loop-option em,
.ss-loop-option small {
  color: var(--text-muted);
  font-style: normal;
  font-size: 0.78rem;
}
.ss-loop-option h3 {
  margin-top: 0.85rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.15rem;
  line-height: 1.15;
}
.ss-loop-option p {
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.42;
  margin-top: 0.4rem;
}
.ss-loop-option small {
  display: block;
  margin-top: 0.75rem;
}
.ss-loop-detail {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}
.ss-loop-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ss-loop-detail-head .ss-panel-title {
  margin-bottom: 0;
}
.ss-loop-detail-head .btn {
  flex-shrink: 0;
}
.ss-loop-detail .ss-panel-title {
  margin-bottom: 0;
}
.ss-loop-detail-grid,
.ss-loop-meta-grid {
  display: grid;
  gap: 0.75rem;
}
.ss-loop-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.ss-loop-meta-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ss-loop-read-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ss-read-card {
  min-height: 124px;
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 1rem;
}
.ss-read-card b {
  display: block;
  font-size: 0.84rem;
}
.ss-read-card p {
  color: var(--text-secondary);
  line-height: 1.5;
  margin-top: 0.55rem;
}
.ss-loop-meta-grid div,
.ss-default-list div,
.ss-person-context div {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--surface);
  padding: 0.85rem;
}
.ss-loop-meta-grid b,
.ss-default-list b,
.ss-person-context b {
  display: block;
  font-size: 0.82rem;
}
.ss-loop-meta-grid span,
.ss-default-list span,
.ss-person-context span {
  display: block;
  color: var(--text-secondary);
  font-size: 0.84rem;
  line-height: 1.38;
  margin-top: 0.25rem;
}
.ss-loop-read-grid,
.ss-loop-columns,
.ss-person-context {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.ss-loop-columns {
  align-items: start;
}
.ss-loop-columns > section > h3,
.ss-loop-config h3 {
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}
.ss-related-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.ss-loop-install .ss-card-grid.three {
  grid-template-columns: 1fr;
}
.ss-loop-install .ss-surface-card {
  min-height: 0;
}
.ss-surface-read-grid {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.ss-surface-read-card {
  border: 1px solid var(--border);
  border-radius: 13px;
  background: var(--panel);
  padding: 0.9rem;
}
.ss-surface-read-card.on {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
}
.ss-surface-read-card > span {
  width: 32px;
  height: 32px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--accent-tint);
  color: var(--accent);
}
.ss-surface-read-card b,
.ss-surface-read-card p,
.ss-surface-read-card em {
  display: block;
}
.ss-surface-read-card b {
  margin-top: 0.7rem;
}
.ss-surface-read-card p {
  color: var(--text-secondary);
  font-size: 0.88rem;
  line-height: 1.42;
  margin-top: 0.35rem;
}
.ss-surface-read-card em {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: normal;
  margin-top: 0.6rem;
}
.ss-loop-config {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}
.ss-event-read-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.7rem;
}
.ss-event-pill {
  min-width: 0;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-secondary);
}
.ss-event-pill svg {
  flex-shrink: 0;
}
.ss-event-pill b {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  overflow-wrap: anywhere;
}
.ss-event-pill.on {
  border-color: var(--accent-soft);
  background: var(--accent-tint);
  color: var(--text-primary);
}
.ss-edit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  background: oklch(0.22 0.02 55 / .22);
  backdrop-filter: blur(2px);
}
.ss-edit-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 31;
  width: min(520px, calc(100vw - 1rem));
  background: var(--panel);
  border-left: 1px solid var(--border);
  box-shadow: -28px 0 70px -44px oklch(0.25 0.035 55 / .55);
  display: flex;
  flex-direction: column;
}
.ss-edit-drawer-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.2rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ss-edit-drawer-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.55rem;
  margin-top: 0.35rem;
}
.ss-edit-drawer-head > button {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
}
.ss-edit-drawer-head > button:hover,
.ss-edit-drawer-head > button:focus-visible {
  background: var(--accent-tint);
}
.ss-edit-drawer-body {
  flex: 1;
  overflow: auto;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ss-edit-drawer-body > section > h3 {
  font-size: 0.92rem;
  margin-bottom: 0.7rem;
}
.ss-edit-drawer-body .ss-card-grid.two {
  grid-template-columns: 1fr;
}
.ss-edit-drawer-body .ss-surface-card {
  min-height: 0;
}
.ss-edit-drawer-body .ss-event-grid {
  grid-template-columns: 1fr 1fr;
}
.ss-edit-drawer-actions {
  padding: 1rem 1.2rem;
  border-top: 1px solid var(--border);
  background: var(--panel);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.ss-conv-layout {
  max-width: 1180px;
  margin: 0 auto;
  grid-template-columns: 340px minmax(0, 1fr);
}
.ss-conv-list button {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  text-align: left;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.75rem;
}
.ss-conv-list button.on {
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.ss-conv-list button:hover,
.ss-conv-list button:focus-visible {
  border-color: var(--accent-soft);
  background: var(--surface);
}
.ss-conv-list b,
.ss-conv-list em {
  display: block;
}
.ss-conv-list em {
  color: var(--text-muted);
  font-size: 0.78rem;
  font-style: normal;
}
.ss-chat-panel {
  padding: 0;
  overflow: hidden;
}
.ss-chat-head {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.ss-chat-head p {
  color: var(--text-muted);
  font-size: 0.84rem;
}
.ss-chat-head .ss-live {
  margin-left: auto;
}
.ss-person-context {
  padding: 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
}
.ss-chat-body {
  min-height: 380px;
  max-height: calc(100vh - 250px);
  overflow: auto;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ss-chat-msg {
  max-width: 82%;
}
.ss-chat-msg > div {
  padding: 0.68rem 0.86rem;
  border-radius: 15px;
  line-height: 1.48;
}
.ss-chat-msg.them {
  align-self: flex-start;
}
.ss-chat-msg.them > div {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-bottom-left-radius: 5px;
}
.ss-chat-msg.user {
  align-self: flex-end;
}
.ss-chat-msg.user > div {
  background: var(--accent);
  color: oklch(0.99 0.005 70);
  border-bottom-right-radius: 5px;
}
.ss-chat-msg.relay,
.ss-chat-msg.system {
  align-self: center;
  max-width: 92%;
}
.ss-chat-msg.relay > div,
.ss-chat-msg.system > div {
  background: var(--accent-tint);
  border: 1px solid var(--accent-soft);
  color: var(--text-secondary);
}
.ss-chat-msg span {
  display: block;
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  margin: 0.25rem 0.3rem 0;
}
.ss-chat-msg.user span {
  text-align: right;
}
.ss-chat-actions {
  border-top: 1px solid var(--border);
  padding: 0.85rem 1rem;
  display: flex;
  gap: 0.6rem;
  background: var(--panel);
}
.ss-insight-card > span {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--accent);
}
.ss-insight-card em {
  display: block;
  margin-top: 0.75rem;
  color: var(--text-muted);
  font-style: normal;
}
.ss-insight-card div {
  margin-top: 0.9rem;
  color: var(--accent-hover);
  font-weight: 700;
}
.ss-settings-panel {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.ss-default-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}
.ss-danger {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ss-danger b,
.ss-danger span {
  display: block;
}
.ss-danger span {
  color: var(--text-muted);
  font-size: 0.86rem;
}

@media (max-width: 1040px) {
  .ss-entry,
  .ss-activation-wrap,
  .ss-conv-layout,
  .ss-learning-layout,
  .ss-people-layout {
    grid-template-columns: minmax(0, 1fr);
  }
  .ss-entry-left,
  .ss-checklist {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .ss-entry-left {
    gap: 2rem;
  }
  .ss-entry-card {
    margin-block: 2rem;
  }
  .ss-checks {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
  .ss-card-grid.three,
  .ss-event-grid,
  .ss-event-read-grid,
  .ss-dashboard-grid,
  .ss-loop-detail-grid,
  .ss-loop-meta-grid,
  .ss-loop-read-grid,
  .ss-loop-columns,
  .ss-person-context,
  .ss-default-list {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 760px) {
  .ss-entry {
    display: block;
  }
  .ss-entry-left {
    padding: 1.25rem;
  }
  .ss-entry-card {
    width: calc(100% - 1.5rem);
    margin: 0.75rem auto 1.5rem;
  }
  .ss-proof-grid,
  .ss-form-grid,
  .ss-card-grid.two,
  .ss-card-grid.three,
  .ss-event-grid,
  .ss-event-read-grid,
  .ss-dashboard-grid,
  .ss-hero-status,
  .ss-loop-detail-grid,
  .ss-loop-meta-grid,
  .ss-loop-read-grid,
  .ss-loop-columns,
  .ss-person-context,
  .ss-default-list {
    grid-template-columns: 1fr;
  }
  .ss-activation-top,
  .ss-topbar,
  .ss-launch-panel,
  .ss-chat-actions,
  .ss-danger {
    align-items: stretch;
    flex-direction: column;
    height: auto;
    padding-block: 1rem;
  }
  .ss-shell {
    display: block;
    height: auto;
    min-height: 100%;
    overflow: visible;
  }
  .ss-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .ss-nav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .ss-workspace-foot {
    margin-top: 1rem;
  }
  .ss-app-main {
    min-height: 0;
  }
  .ss-app-content {
    overflow: visible;
  }
  .ss-chat-head {
    align-items: flex-start;
  }
  .ss-chat-head .ss-live {
    margin-left: 0;
  }
  .ss-chat-body {
    max-height: none;
    min-height: 280px;
  }
  .ss-loop-detail-head,
  .ss-edit-drawer-actions,
  .ss-create-loop-actions,
  .ss-progress-head {
    align-items: stretch;
    flex-direction: column;
  }
  .ss-person-line {
    grid-template-columns: 44px minmax(0, 1fr);
  }
  .ss-person-line .ss-profile-avatar {
    grid-row: 1 / span 3;
  }
  .ss-person-line-copy,
  .ss-person-line > em {
    grid-column: 2;
  }
  .ss-person-line > em {
    grid-row: auto;
    justify-self: start;
    margin-top: 0.25rem;
  }
  .ss-edit-drawer {
    width: 100vw;
  }
  .ss-edit-drawer-body .ss-event-grid {
    grid-template-columns: 1fr;
  }
  .ss-chat-actions .btn,
  .ss-entry-actions .btn,
  .ss-launch-panel .btn,
  .ss-danger .btn,
  .ss-edit-drawer-actions .btn,
  .ss-create-loop-actions .btn,
  .ss-loop-detail-head .btn {
    width: 100%;
    white-space: normal;
  }
}

@media (max-width: 460px) {
  .ss-checks,
  .ss-nav {
    grid-template-columns: 1fr;
  }
  .ss-proof-grid div,
  .ss-panel,
  .ss-launch-panel,
  .ss-chat-panel,
  .ss-answer-card,
  .ss-loop-card,
  .ss-insight-card {
    border-radius: 13px;
  }
}

/* ============================================================
   People-first onboarding (stepped flow) — added with the pivot
   ============================================================ */
.ss-onboard-rail li { align-items: flex-start; }
.ss-checks li.active { color: var(--text-primary); }
.ss-checks li.active span {
  border-color: var(--accent);
  color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-tint, oklch(0.9 0.04 50 / .5));
}
.ss-check-label { display: flex; flex-direction: column; gap: 0.1rem; }
.ss-check-label b { font-size: 0.92rem; line-height: 1.2; }
.ss-check-label em { font-style: normal; font-size: 0.78rem; color: var(--text-muted); }

.ss-step-lead {
  margin: 0.25rem 0 1.4rem;
  color: var(--text-secondary);
  font-size: 1.04rem;
  line-height: 1.55;
  max-width: 60ch;
}
.ss-step-lead + .ss-step-lead { margin-top: -0.55rem; }

.ss-callout {
  margin-top: 1.4rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--accent-tint, oklch(0.955 0.018 52 / .6));
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.ss-callout b { font-size: 0.95rem; }
.ss-callout span { color: var(--text-secondary); font-size: 0.92rem; line-height: 1.5; }

.ss-program-block { margin-bottom: 1.6rem; }
/* Clear delineation between sub-sections inside a step */
.ss-program-block + .ss-program-block {
  border-top: 1px solid var(--border);
  padding-top: 1.7rem;
  margin-top: 1.9rem;
}
.ss-program-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.18rem;
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.ss-substep {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent-tint);
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 600;
}
.ss-program-block > p {
  color: var(--text-secondary);
  font-size: 0.96rem;
  line-height: 1.55;
  margin-bottom: 0.9rem;
  max-width: 62ch;
}

.ss-advanced {
  margin-top: 1.5rem;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  background: var(--surface);
}
.ss-advanced summary {
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  list-style: none;
}
.ss-advanced summary::-webkit-details-marker { display: none; }
.ss-advanced summary b { font-size: 0.95rem; }
.ss-advanced summary span { color: var(--text-muted); font-size: 0.85rem; line-height: 1.45; }
.ss-advanced .ss-event-grid { margin-top: 1rem; }

.ss-onboard-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.4rem;
  padding: 0.4rem 0.2rem;
}
.ss-onboard-nav .count {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--text-muted);
}

.ss-review {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1.3rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.ss-review-row {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
}
.ss-review-row:last-child { border-bottom: none; }
.ss-review-row .rk {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  padding-top: 0.15rem;
}
.ss-review-row .rv {
  font-size: 0.98rem;
  color: var(--text-primary);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.ss-review-row .rv em {
  font-style: normal;
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.45;
}

/* small "advanced" tag next to de-emphasized behavior triggers */
.ss-adv-tag {
  display: inline-block;
  margin-left: 0.5rem;
  padding: 0.08rem 0.45rem;
  border-radius: 999px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  vertical-align: middle;
}
.ss-create-loop .ss-step-lead { margin-bottom: 1rem; }

/* Consent — preview of the user-facing invitation + connect block */
.ss-connect-block { margin-top: 1.6rem; }

.ss-preview-link {
  margin-top: 0.7rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
}
.ss-preview-link:hover { text-decoration: underline; }

.ss-invite-preview {
  margin-top: 0.9rem;
  padding: 1.2rem 1.3rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--canvas);
  box-shadow: inset 3px 0 0 var(--accent);
}
.ss-invite-meta {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
}
.ss-invite-preview p {
  margin: 0 0 0.6rem;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-secondary);
}
.ss-invite-h {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 500;
  color: var(--text-primary) !important;
}
.ss-invite-cta {
  display: inline-block;
  margin: 0.3rem 0 0.9rem !important;
  padding: 0.5rem 0.95rem;
  border-radius: 8px;
  background: var(--accent);
  color: oklch(0.99 0.01 70) !important;
  font-size: 0.9rem !important;
  font-weight: 500;
  text-decoration: none;
}
.ss-invite-sign { color: var(--text-muted) !important; font-size: 0.9rem !important; }
.ss-invite-note {
  display: block;
  margin-top: 0.7rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--border);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--text-muted);
}

/* Compensation: sub-labels, reward tiers, doc link */
.ss-sublabel {
  margin: 1.4rem 0 0.6rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ss-tier-strip {
  display: flex;
  gap: 0.7rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}
.ss-tier {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  flex: 1 1 0;
  min-width: 130px;
}
.ss-tier b { display: block; font-size: 0.9rem; line-height: 1.2; }
.ss-tier span { font-size: 0.8rem; color: var(--text-muted); }
.ss-tier-badge {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: oklch(0.99 0.01 70);
  font-size: 0.68rem;
  font-weight: 600;
  flex-shrink: 0;
}
.ss-doc-link { color: var(--accent); text-decoration: none; font-weight: 500; white-space: nowrap; }
.ss-doc-link:hover { text-decoration: underline; }

/* Obvious selection state on toggleable cards */
.ss-surface-card.on,
.ss-select-card.on { background: var(--accent-tint, oklch(0.955 0.018 52 / .5)); }
.ss-surface-toggle { display: inline-flex; align-items: center; gap: 0.25rem; }
.ss-surface-card.on .ss-surface-toggle { color: var(--accent); font-weight: 600; }

/* Per-surface setup actions (shown after "who you'll learn from") */
.ss-setup-list { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 0.9rem; }
.ss-setup-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.ss-setup-row.done { background: var(--surface); border-color: var(--success); }
.ss-setup-ic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: 9px;
  display: grid;
  place-items: center;
  background: var(--accent-tint, oklch(0.955 0.018 52 / .6));
  color: var(--accent);
}
.ss-setup-copy { flex: 1; min-width: 0; }
.ss-setup-copy b { display: block; font-size: 0.95rem; margin-bottom: 0.15rem; }
.ss-setup-copy p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; margin: 0; }
.ss-setup-row .btn { flex-shrink: 0; }

/* Compensation: one tier model — tier rows with editable reward + cash conversion chart */
.ss-tier-cards { display: flex; flex-direction: column; gap: 0.7rem; margin-top: 1rem; }
.ss-tier-card {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.ss-tier-head { display: flex; align-items: center; gap: 0.6rem; width: 175px; flex-shrink: 0; }
.ss-tier-head b { display: block; font-size: 0.98rem; line-height: 1.2; }
.ss-tier-head span { font-size: 0.78rem; color: var(--text-muted); }
.ss-tier-reward { flex: 1; display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.ss-tier-reward > span {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ss-tier-reward .input { width: 100%; }

.ss-conversion {
  margin-top: 1.1rem;
  padding: 0.95rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.ss-conversion-head { display: flex; flex-direction: column; gap: 0.15rem; margin-bottom: 0.65rem; }
.ss-conversion-head b { font-size: 0.92rem; }
.ss-conversion-head span { font-size: 0.83rem; color: var(--text-secondary); }
.ss-conversion-rows { display: flex; gap: 0.55rem; flex-wrap: wrap; }
.ss-conversion-rows span {
  padding: 0.4rem 0.8rem;
  border-radius: 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  font-size: 0.85rem;
  color: var(--text-secondary);
}
.ss-conversion-rows b { color: var(--text-primary); }

/* In-product surface gets its own row with the user-ID note to the side */
.ss-inproduct-row {
  display: flex;
  gap: 1.1rem;
  margin-top: 0.7rem;
  align-items: stretch;
  flex-wrap: wrap;
}
.ss-inproduct-row > .ss-surface-card { flex: 1 1 320px; }
.ss-inproduct-note {
  flex: 1 1 260px;
  align-self: center;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Go-live: magic link (test yourself + send to customers) */
.ss-golive {
  margin-top: 1.2rem;
  padding: 1.4rem 1.5rem;
  border-radius: 16px;
  border: 1px solid var(--accent);
  background: var(--accent-tint, oklch(0.955 0.018 52 / .55));
}
.ss-golive h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.5rem;
  margin: 0.3rem 0 0.4rem;
}
.ss-golive > p { color: var(--text-secondary); font-size: 0.96rem; line-height: 1.5; max-width: 62ch; margin: 0 0 1rem; }
.ss-magiclink {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.5rem 0.5rem 0.9rem;
  max-width: 540px;
}
.ss-magiclink code {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ss-magiclink-copy {
  flex-shrink: 0;
  border: none;
  background: var(--accent);
  color: oklch(0.99 0.01 70);
  border-radius: 7px;
  padding: 0.45rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}
.ss-golive-actions { display: flex; gap: 0.7rem; margin-top: 1.1rem; flex-wrap: wrap; align-items: center; }

/* Final step: who-to-invite advice, batch field, background-recruiting upsell */
.ss-advice-list { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.8rem; }
.ss-advice { display: flex; gap: 0.7rem; align-items: flex-start; padding: 0.7rem 0.9rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ss-advice-ic { width: 30px; height: 30px; flex-shrink: 0; border-radius: 8px; display: grid; place-items: center; background: var(--accent-tint, oklch(0.955 0.018 52 / .6)); color: var(--accent); }
.ss-advice b { display: block; font-size: 0.92rem; margin-bottom: 0.1rem; }
.ss-advice p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }
.ss-batch-field { margin-bottom: 1rem; }
.ss-upsell {
  margin-top: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--surface);
}
.ss-upsell > div { flex: 1; }
.ss-upsell b { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.ss-upsell span { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }
.ss-upsell .btn { flex-shrink: 0; }

/* Surfaces: single aligned grid — email/slack/discord row 1, in-product + note row 2 */
.ss-surface-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 0.7rem;
  align-items: stretch;
}
.ss-surface-grid > .ss-inproduct-note {
  grid-column: span 2;
  align-self: center;
  margin: 0;
  font-size: 0.86rem;
  line-height: 1.55;
  color: var(--text-secondary);
}
@media (max-width: 720px) {
  .ss-surface-grid { grid-template-columns: 1fr 1fr; }
  .ss-surface-grid > .ss-inproduct-note { grid-column: span 2; }
}

/* Who-to-invite as one consolidated block */
.ss-advice-block {
  margin-top: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.ss-advice-item {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--border);
}
.ss-advice-item b { display: block; font-size: 0.92rem; margin-bottom: 0.1rem; }
.ss-advice-item p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }
.ss-advice-foot {
  padding: 0.8rem 1rem;
  background: var(--accent-tint, oklch(0.955 0.018 52 / .5));
  font-size: 0.86rem;
  color: var(--text-secondary);
  line-height: 1.5;
}
.ss-advice-foot b { color: var(--text-primary); }

/* Upsell variant that fills a panel body (e.g. Home triggers panel) */
.ss-upsell-fill {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.8rem;
  height: 100%;
}

/* Pro upsell — share more data, unlock more (the one consolidated upgrade block).
   Tinted like a price-tier card so it reads as Pro at a glance. */
.ss-pro-upsell {
  border: 1px solid oklch(0.86 0.045 48);
  border-radius: 16px;
  background: linear-gradient(180deg, var(--accent-tint), oklch(0.965 0.022 52));
  padding: 1.3rem 1.4rem;
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .5);
}
.ss-pro-badge {
  display: inline-block;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  background: var(--accent);
  color: oklch(0.99 0.01 70);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ss-pro-head b {
  display: block;
  margin-top: 0.6rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.25rem;
}
.ss-pro-head p { margin-top: 0.4rem; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.5; }
.ss-pro-list { margin: 1rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.65rem; }
.ss-pro-list li {
  padding: 0.75rem 0.9rem;
  border: 1px solid oklch(0.9 0.025 52);
  border-radius: 12px;
  background: var(--panel);
}
.ss-pro-list b { display: block; font-size: 0.92rem; margin-bottom: 0.15rem; }
.ss-pro-list span { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.45; }
.ss-pro-cta { margin-top: 1rem; }

/* Fast-start channel chooser (Step 2): two cards, then the in-product Pro upsell */
.ss-channel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-top: 0.7rem;
  margin-bottom: 1.2rem;
}
@media (max-width: 720px) { .ss-channel-grid { grid-template-columns: 1fr; } }

/* Ready-to-paste invitation text (Go live) */
.ss-invite-copyblock {
  position: relative;
  margin-top: 0.8rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.ss-invite-copyblock pre {
  margin: 0;
  padding: 1rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
  white-space: pre-wrap;
}
.ss-invite-edit {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  resize: vertical;
  padding: 1rem 1.1rem;
  font-family: var(--font-sans);
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.ss-invite-edit:focus { outline: none; color: var(--text-primary); }

/* Surface route choice (Step 2) — one explicit radio decision */
.ss-route-grid { display: grid; gap: 0.9rem; margin-top: 0.7rem; }
.ss-route {
  display: block;
  text-align: left;
  width: 100%;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  cursor: pointer;
  transition: border-color .18s, box-shadow .18s;
}
.ss-route.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ss-route-head { display: flex; align-items: center; gap: 0.6rem; }
.ss-route-head b { font-size: 1.02rem; }
.ss-route-radio {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  border-radius: 5px;
  border: 2px solid var(--border-strong);
  background: #fff;
  position: relative;
  transition: background .12s ease, border-color .12s ease;
}
.ss-route.on .ss-route-radio { border-color: var(--accent); background: var(--accent); }
.ss-route.on .ss-route-radio::after { content: ""; position: absolute; left: 0.36rem; top: 0.14rem; width: 0.32rem; height: 0.58rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ss-route-tag {
  margin-left: auto;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
}
.ss-route-tag.start { background: var(--success-tint); color: var(--success); }
.ss-route-tag.pro { background: var(--accent); color: oklch(0.99 0.01 70); }
.ss-route p { margin: 0.6rem 0 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }
.ss-route small { display: block; margin-top: 0.5rem; font-size: 0.82rem; color: var(--text-muted); line-height: 1.5; }
.ss-route-grid + .ss-pro-upsell { margin-top: 1.2rem; }

/* Preview-grid extras: tier lines inside the compensation row + inline row CTA */
.ss-review-tier { display: block; }
.ss-row-cta {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.ss-invite-body { white-space: pre-wrap; }
.ss-sendpreview {
  margin-top: 1rem;
  display: flex;
  align-items: flex-end;
  gap: 0.8rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
}
.ss-sendpreview .ss-field { flex: 1; margin: 0; }
.ss-sent-note { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--success); font-weight: 600; }
.ss-sent-note .ss-row-cta { color: var(--accent); font-weight: 500; margin-left: 0.4rem; }
.ss-magiclink-open { flex: 1; min-width: 0; }
.ss-magiclink-open:hover code { color: var(--accent); }

.ss-block-q { margin: 1.2rem 0 0.2rem; font-weight: 600; font-size: 0.95rem; }
.ss-rate-input { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; }
.ss-rate-input .input { width: 5.5rem; }

/* Compensation: three peer cards — cash (active) / credits (coming) / perks (add-on) */
.ss-comp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
  margin-top: 1rem;
}
@media (max-width: 900px) { .ss-comp-grid { grid-template-columns: 1fr; } }
.ss-comp-card {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  padding: 1.1rem 1.2rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}
.ss-comp-card.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.ss-comp-card > b { font-family: var(--font-display); font-weight: 500; font-size: 1.2rem; }
.ss-comp-card p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
.ss-comp-card small { font-size: 0.78rem; color: var(--text-muted); }
.ss-comp-tag {
  align-self: flex-start;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.24rem 0.6rem;
  border-radius: 999px;
}
.ss-comp-tag.active { background: var(--success-tint); color: var(--success); }
.ss-comp-tag.coming { background: var(--surface); color: var(--text-muted); border: 1px dashed var(--border-strong); }
.ss-comp-tag.rec { background: var(--accent-tint); color: var(--accent); }
.ss-comp-rate {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.3rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
}
.ss-comp-rate > b { font-size: 0.95rem; white-space: nowrap; }
.jn-rate-card {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  padding: 1.2rem 1.3rem;
}
.jn-rate-card b { font-family: var(--font-display); font-weight: 500; font-size: 1.4rem; }
.jn-rate-card p { margin: 0.5rem 0 0; font-size: 0.9rem; color: var(--text-secondary); line-height: 1.55; }
.jn-perks-note {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  border-radius: 12px;
  background: var(--accent-tint, oklch(0.955 0.018 52 / .5));
  font-size: 0.88rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Questions page: Slack banner, asking spinner, question history */
.ss-slack-banner {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  justify-content: space-between;
  /* tinted like the Pro block so it reads as an upsell at a glance */
  border-color: oklch(0.86 0.045 48);
  background: linear-gradient(180deg, var(--accent-tint), oklch(0.965 0.022 52));
  box-shadow: inset 0 1px 0 oklch(1 0 0 / .5);
}
.ss-slack-banner > div { flex: 1; }
.ss-slack-banner .ss-step-lead { margin-bottom: 0; }
.ss-slack-banner .btn { flex-shrink: 0; }
.ss-spinner {
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--accent-soft);
  border-top-color: var(--accent);
  display: inline-block;
  animation: ss-spin 0.8s linear infinite;
  flex-shrink: 0;
}
@keyframes ss-spin { to { transform: rotate(360deg); } }
.ss-asking {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--accent);
}
.ss-question-history { display: grid; gap: 0.6rem; margin-top: 0.4rem; }
.ss-question-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
}
.ss-question-row p { margin: 0; font-size: 0.95rem; }
.ss-question-row em {
  font-style: normal;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}

/* Partner detail: modality tabs + transcripts */
.ss-mode-tabs {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.9rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0;
}
.ss-mode-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border: none;
  background: none;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.ss-mode-tabs button em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
}
.ss-mode-tabs button.on { color: var(--text-primary); border-bottom-color: var(--accent); }
.ss-mode-tabs button.on em { color: var(--accent); }
.ss-transcript { border: 1px solid var(--border); border-radius: 14px; background: var(--panel); padding: 1rem 1.1rem; }
.ss-transcript + .ss-transcript { margin-top: 0.9rem; }
.ss-transcript-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.6rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid var(--border);
}
.ss-transcript-head b { font-size: 0.95rem; }
.ss-transcript-head span { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-muted); white-space: nowrap; }
.ss-turn { display: grid; grid-template-columns: 6.5rem 1fr; gap: 0.7rem; padding: 0.45rem 0; }
.ss-turn b { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; }
.ss-turn p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }

/* People view: via-Observant relay framing */
.ss-via {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  white-space: nowrap;
}
.ss-relay-note {
  margin: 0.6rem 0 0;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: var(--surface);
  border: 1px dashed var(--border-strong);
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Suggestions block — informational, deliberately not a CTA */
.ss-suggest {
  background: oklch(0.966 0.012 250 / .55);
  border: 1px solid oklch(0.9 0.018 255);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
}
.ss-suggest-badge {
  display: inline-block;
  margin-bottom: 0.5rem;
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
  border: 1px solid oklch(0.82 0.04 258);
  color: var(--blue);
  background: oklch(0.98 0.006 255 / .7);
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.ss-suggest .ss-advice-block { background: var(--panel); }
.ss-invite-copyblock .ss-magiclink-copy {
  position: absolute;
  top: 0.7rem;
  right: 0.7rem;
}

/* Setup modals (Step 3 — bring people in) */
.ss-modal {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100vw - 2.5rem));
  height: fit-content;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
  z-index: 60;
  box-shadow: 0 40px 90px -40px oklch(0.3 0.04 50 / .5);
}
.ss-modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.ss-modal-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  margin-top: 0.35rem;
}
.ss-modal-close {
  border: 1px solid var(--border);
  background: var(--surface);
  border-radius: 10px;
  padding: 0.4rem 0.5rem;
  cursor: pointer;
  color: var(--text-secondary);
}
.ss-modal-lead {
  margin-top: 0.6rem;
  font-size: 0.92rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.ss-modal-body { margin-top: 1rem; display: grid; gap: 0.9rem; }
.ss-modal-textarea { min-height: 140px; font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85rem; }
.ss-modal-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.ss-modal-count { font-size: 0.84rem; color: var(--text-muted); }
.ss-setup-done-note { color: var(--text-secondary); }
.ss-setup-row.done .ss-setup-ic { color: var(--success, oklch(0.55 0.12 150)); }

/* ============================================================
   Magic-link experience (Join.html) — participant-facing
   ============================================================ */
.jn-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(58% 42% at 50% 0%, oklch(0.955 0.018 52 / .7), transparent 70%),
    var(--canvas);
}
.jn-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.1rem clamp(1.25rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--border);
}
.jn-brand { font-weight: 600; font-size: 0.95rem; }
.jn-brand em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.jn-powered {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--text-muted);
}
.jn-main {
  width: min(680px, calc(100% - 2.5rem));
  margin: 0 auto;
  padding-block: clamp(2rem, 6vw, 4rem) 2rem;
  flex: 1;
}
.jn-hero h1 {
  margin-top: 0.9rem;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(2.1rem, 5vw, 3.2rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
}
.jn-hero p {
  margin-top: 1.1rem;
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.jn-block { margin-top: 2.6rem; }
.jn-block h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.45rem;
}
.jn-block-lead { margin-top: 0.5rem; font-size: 0.95rem; color: var(--text-secondary); }
.jn-steps {
  margin-top: 1rem;
  list-style: none;
  counter-reset: jn-step;
  display: grid;
  gap: 0.9rem;
  padding: 0;
}
.jn-steps li {
  counter-increment: jn-step;
  position: relative;
  padding: 1rem 1.1rem 1rem 3.1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
}
.jn-steps li::before {
  content: counter(jn-step);
  position: absolute;
  left: 1.05rem;
  top: 1.05rem;
  width: 1.45rem;
  height: 1.45rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--accent);
  color: oklch(0.99 0.004 80);
  font-size: 0.8rem;
  font-weight: 600;
}
.jn-steps b { display: block; font-size: 0.98rem; margin-bottom: 0.25rem; }
.jn-steps p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }
.jn-tier-grid {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}
@media (max-width: 680px) { .jn-tier-grid { grid-template-columns: 1fr; } }
.jn-tier {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--panel);
  padding: 1rem;
}
.jn-tier-head { display: flex; align-items: center; gap: 0.6rem; }
.jn-tier-head b { display: block; font-size: 0.95rem; }
.jn-tier-head span { display: block; font-size: 0.76rem; color: var(--text-muted); }
.jn-tier-reward { margin: 0.7rem 0 0; font-size: 0.92rem; font-weight: 600; }
.jn-tier-note { margin: 0.3rem 0 0; font-size: 0.82rem; color: var(--text-secondary); line-height: 1.45; }
.jn-faq details {
  margin-top: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 0.85rem 1rem;
}
.jn-faq summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.94rem;
  list-style-position: outside;
}
.jn-faq summary::marker { color: var(--accent); }
.jn-faq details p {
  margin: 0.6rem 0 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--text-secondary);
}
.jn-cta {
  margin-top: 2.4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.jn-cta span { font-size: 0.85rem; color: var(--text-muted); }
.jn-chat {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  overflow: hidden;
}
.jn-chat-meter {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.jn-chat-body { padding: 1.1rem; display: grid; gap: 0.8rem; }
.jn-chat-input {
  display: flex;
  gap: 0.6rem;
  padding: 0.8rem 1.1rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.jn-chat-input .input { flex: 1; }
.jn-choice-grid {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) { .jn-choice-grid { grid-template-columns: 1fr; } }
.jn-choice-grid.single { grid-template-columns: 1fr; max-width: 440px; }
.jn-choice {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  padding: 1.3rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
}
.jn-choice-ic {
  width: 2.4rem;
  height: 2.4rem;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent);
}
.jn-choice b { font-size: 1.05rem; }
.jn-choice p { margin: 0; font-size: 0.88rem; color: var(--text-secondary); line-height: 1.5; }
.jn-choice-hint { font-size: 0.8rem !important; color: var(--text-muted) !important; margin-top: auto !important; }
.jn-choice .btn { align-self: flex-start; }
.jn-choice .input { margin-top: auto; }
.jn-choice-note {
  margin-top: 1.4rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.55;
}

.jn-account {
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--panel);
  padding: 1.3rem 1.4rem;
}
.jn-account-form { display: flex; gap: 0.7rem; margin-top: 0.9rem; }
.jn-account-form .input { flex: 1; max-width: 360px; }
.jn-account-done {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.7rem;
  color: var(--success);
  font-weight: 600;
  font-size: 0.94rem;
}

.jn-foot {
  border-top: 1px solid var(--border);
  padding: 1.4rem clamp(1.25rem, 4vw, 2.5rem) 2rem;
}
.jn-foot p {
  margin: 0 auto;
  width: min(680px, 100%);
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Ask panel — exploration temperature slider */
.ss-temp { margin: 4px 0 22px; }
.ss-temp-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 10px; }
.ss-temp-label { font-weight: 600; font-size: 0.92rem; }
.ss-temp-val { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--accent); font-size: 0.95rem; }
.ss-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; outline: none; cursor: pointer; }
.ss-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer; margin-top: -6px; }
.ss-range::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--accent); border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,0.25); cursor: pointer; }
.ss-range::-webkit-slider-runnable-track { height: 6px; border-radius: 999px; }
.ss-range::-moz-range-track { height: 6px; border-radius: 999px; background: transparent; }
.ss-temp-ends { display: flex; justify-content: space-between; font-size: 0.72rem; color: var(--text-muted); margin-top: 8px; }
.ss-temp-hint { font-size: 0.78rem; color: var(--text-muted); margin: 8px 0 0; }

/* primary "Ask a question" action at the top of the sidebar */
.ss-ask-cta { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; margin: 6px 0 16px; padding: 11px 14px; background: var(--accent); color: #fff; border: none; border-radius: 10px; font-size: 0.95rem; font-weight: 600; cursor: pointer; }
.ss-ask-cta:hover { filter: brightness(1.07); }

/* slack upsell — compact box at the bottom of the Questions page */
/* Onboarding — unified progress bar across the whole flow */
.ss-onboard-bar { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0 0 22px; padding: 0; flex-wrap: nowrap; }
.ss-onboard-bstep { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: .8rem; white-space: nowrap; }
.ss-onboard-bstep:not(:last-child)::after { content: ""; width: 16px; height: 2px; background: var(--border,#e6e3dd); margin: 0 6px; flex: none; }
.ss-onboard-bstep.done:not(:last-child)::after { background: var(--accent); }
.ss-onboard-bdot { width: 21px; height: 21px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 600; border: 1.5px solid var(--border,#e6e3dd); background: #fff; color: var(--text-muted); }
.ss-onboard-bstep.on .ss-onboard-bdot { border-color: var(--accent); color: var(--accent); }
.ss-onboard-bstep.done .ss-onboard-bdot { border-color: var(--accent); background: var(--accent); color: #fff; }
.ss-onboard-bstep.on .ss-onboard-blabel, .ss-onboard-bstep.done .ss-onboard-blabel { color: var(--text); font-weight: 600; }
.ss-activation-bar { padding: 18px 20px 0; max-width: 760px; margin: 0 auto; }
.ss-linklike { background: none; border: none; padding: 0; font: inherit; color: var(--accent); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ss-topbar-lead { display: flex; align-items: center; gap: 14px; }
.ss-back-btn { display: inline-flex; align-items: center; gap: 5px; background: #f0ece4; border: 1px solid var(--border,#e6e3dd); border-radius: 8px; padding: 6px 11px; font: inherit; font-size: .85rem; font-weight: 600; color: #4a463f; cursor: pointer; }
.ss-back-btn:hover { border-color: var(--accent); color: var(--accent); }
.ss-ctx-doc-hint { font-size: .82rem; color: var(--text-muted); line-height: 1.45; margin: 0 0 10px; }
.ss-ctx-doc-name { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; color: #24221e; font-weight: 500; }
.ss-ctx-doc-name svg { color: #2e7d46; }
.ss-ctx-doc-upload { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--border,#cfc8bd); border-radius: 8px; padding: 7px 12px; font: inherit; font-size: .85rem; color: var(--accent); cursor: pointer; }
.ss-ctx-doc-upload:hover { border-color: var(--accent); }
.ss-advice-tag { display: inline-block; margin-left: 8px; font-style: normal; font-size: .68rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; color: var(--accent); background: #fbf3ee; border: 1px solid #e7c9b8; border-radius: 999px; padding: 2px 8px; vertical-align: middle; }
.ss-draft-btn { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: .82rem; text-decoration: none; }
.ss-draft-btn[disabled] { opacity: .6; cursor: default; }
@media (max-width: 720px) { .ss-onboard-blabel { display: none; } .ss-onboard-bstep:not(:last-child)::after { width: 16px; margin: 0 6px; } }

/* Context — "what Observant knows" strip + panel on the Ask page */
.ss-ctx-strip { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; background: #f7f5f0; border: 1px solid var(--border,#e6e3dd); border-radius: 10px; padding: 11px 14px; cursor: pointer; font: inherit; margin: 0 0 16px; text-align: left; }
.ss-ctx-strip:hover { border-color: var(--accent); }
.ss-ctx-strip-main { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; color: #24221e; }
.ss-ctx-strip-meta { font-size: .82rem; color: var(--text-muted); }
.ss-ctx-panel { border: 1px solid var(--border,#e6e3dd); border-radius: 12px; padding: 16px; margin: -6px 0 18px; background: #fff; }
.ss-ctx-lead { font-size: .85rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 14px; }
.ss-ctx-docs { display: flex; flex-direction: column; gap: 8px; }
.ss-ctx-doc { display: grid; grid-template-columns: 1fr 1.4fr auto; gap: 8px; align-items: center; }
.ss-ctx-doc-rm { border: none; background: #f0ece4; color: #8a857c; border-radius: 7px; width: 30px; height: 30px; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.ss-ctx-doc-rm:hover { background: #e7ddd2; color: #b4291f; }
.ss-ctx-doc-add { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px dashed var(--border,#cfc8bd); border-radius: 8px; padding: 7px 12px; font: inherit; font-size: .85rem; color: var(--accent); cursor: pointer; }
.ss-ctx-doc-add:hover { border-color: var(--accent); }
@media (max-width: 640px) { .ss-ctx-doc { grid-template-columns: 1fr auto; } }

/* Onboarding — richer-context expander */
.ss-entry-more { display: inline-flex; align-items: center; gap: 7px; background: none; border: none; color: var(--accent); font: inherit; font-size: .9rem; font-weight: 600; cursor: pointer; padding: 4px 0; margin: 6px 0 2px; }
.ss-entry-more em { font-style: normal; color: var(--text-muted); font-weight: 400; }
.ss-entry-more-grid { margin-top: 12px; }

/* Ask — one-question-per-box intake with + */
.ss-ask-qs { display: flex; flex-direction: column; gap: 8px; }
.ss-ask-q { position: relative; display: flex; align-items: flex-start; gap: 6px; }
.ss-ask-q .textarea { flex: 1; min-height: 40px; height: 40px; padding-top: 9px; padding-bottom: 9px; line-height: 1.4; }
.ss-ask-open { min-height: 120px; }
.ss-activity-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ss-split-note { display: flex; gap: 9px; align-items: flex-start; background: #fbf3ee; border: 1px solid #e7c9b8; border-radius: 10px; padding: 11px 13px; margin: 0 0 14px; font-size: .88rem; color: #5a5347; line-height: 1.5; }
.ss-split-note b { color: #b4532a; }
.ss-ask-q-rm { flex: none; width: 28px; height: 28px; border: none; background: #f0ece4; color: #8a857c; border-radius: 7px; font-size: 1.1rem; line-height: 1; cursor: pointer; margin-top: 4px; }
.ss-ask-q-rm:hover { background: #e7ddd2; color: #b4291f; }
.ss-ask-add { margin-top: 8px; display: inline-flex; align-items: center; gap: 5px; background: none; border: 1px dashed var(--border,#cfc8bd); border-radius: 8px; padding: 6px 11px; font: inherit; font-size: .82rem; color: var(--accent); cursor: pointer; }
.ss-ask-add:hover { border-color: var(--accent); }
.ss-ask-hint { font-size: .78rem; color: var(--text-muted); margin: 8px 0 0; }

/* Ask — instant skeleton while the preview composes */
.ss-skel-card { background: #f4efe6; border: 1px solid #ece5d8; }
.ss-skel-line { height: 12px; border-radius: 6px; margin: 9px 0; background: linear-gradient(90deg, #ece7de 25%, #f6f2ea 37%, #ece7de 63%); background-size: 400% 100%; animation: ss-shimmer 1.3s ease-in-out infinite; }
.ss-skel-line.w30 { width: 30%; } .ss-skel-line.w40 { width: 40%; } .ss-skel-line.w60 { width: 60%; } .ss-skel-line.w70 { width: 70%; } .ss-skel-line.w80 { width: 80%; } .ss-skel-line.w90 { width: 90%; }
.ss-muted-note { font-size: .82rem; color: var(--text-muted); margin: 12px 0 0; }

/* Ask — explicit numbered steps so the process is legible */
.ss-loop-steps { display: flex; align-items: center; gap: 0; list-style: none; margin: 6px 0 22px; padding: 0; }
.ss-loop-step { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .85rem; }
.ss-loop-step:not(:last-child)::after { content: ""; width: 28px; height: 2px; background: var(--border,#e6e3dd); margin: 0 12px; }
.ss-loop-step.done:not(:last-child)::after { background: var(--accent); }
.ss-loop-dot { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 700; border: 1.5px solid var(--border,#e6e3dd); background: #fff; color: var(--text-muted); }
.ss-loop-step.on .ss-loop-dot { border-color: var(--accent); color: var(--accent); }
.ss-loop-step.done .ss-loop-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.ss-loop-step.on .ss-loop-label, .ss-loop-step.done .ss-loop-label { color: var(--text); font-weight: 600; }
.ss-step-block { margin: 0 0 22px; }
.ss-step-tag { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); margin: 0 0 12px; }
.ss-loop-step.nav { cursor: pointer; }
.ss-wiz-nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border,#e6e3dd); }
.ss-depth-reward { font-size: .85rem; color: #5a5347; line-height: 1.5; margin: 10px 0 0; }
.ss-depth-reward b { color: #24221e; }
@media (max-width: 560px) { .ss-loop-label { display: none; } .ss-loop-step:not(:last-child)::after { width: 16px; margin: 0 7px; } }

/* Ask — unified "what Observant will do" result section (one label treatment) */
.ss-result { margin-top: 20px; border-top: 1px solid var(--border,#e6e3dd); padding-top: 18px; }
.ss-result-eyebrow { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 12px; }
.ss-result-block { margin-top: 18px; }
.ss-result-label { display: block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.ss-result-qs { margin: 0 0 12px; padding-left: 20px; }
.ss-result-qs li { margin: 6px 0; line-height: 1.5; }
.ss-result-foot { font-size: .82rem; color: #6b665d; line-height: 1.5; margin: 0; background: #f7f5f0; border-radius: 8px; padding: 9px 12px; }
.ss-result-help { font-size: .85rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 10px; }
.ss-reward-line { font-size: .85rem; color: #5a5347; line-height: 1.5; margin: 12px 0 0; background: #f4efe6; border: 1px solid #e6ddcb; border-radius: 8px; padding: 9px 12px; }
.ss-reward-line b { color: #24221e; }
.ss-send-row { display: flex; gap: 8px; }
.ss-send-row .input { flex: 1; }
/* secondary, not a competing CTA */
.ss-depth-learn summary { color: var(--text-muted); }
@keyframes ss-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Ask — the depth bifurcation decision card */
.ss-depth-card { border-radius: 12px; padding: 14px 16px; border: 1px solid var(--border,#e6e3dd); }
.ss-depth-card.light { background: #f1f6f1; border-color: #cfe3cf; }
.ss-depth-card.deep { background: #f4efe6; border-color: #e6ddcb; }
.ss-depth-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 7px; }
.ss-depth-badge { font-weight: 700; font-size: .98rem; color: #24221e; }
.ss-depth-sub { font-size: .82rem; color: var(--text-muted); }
.ss-depth-why { font-size: .9rem; color: #4a463f; line-height: 1.5; margin: 0 0 10px; }
.ss-depth-dims { display: flex; flex-wrap: wrap; gap: 7px; }
.ss-depth-dim { font-size: .74rem; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 999px; padding: 3px 9px; color: #4a463f; text-transform: capitalize; }
.ss-depth-dim em { font-style: normal; color: #8a857c; text-transform: uppercase; letter-spacing: .03em; font-size: .68rem; margin-right: 4px; }
.ss-fallback { font-size: .85rem; color: #6b665d; background: #f7f5f0; border-radius: 8px; padding: 9px 12px; margin: 0 0 16px; }
.ss-fallback summary { cursor: pointer; font-weight: 500; }
.ss-depth-learn { margin-top: 4px; }
.ss-depth-learn summary { cursor: pointer; font-size: .82rem; color: var(--accent); font-weight: 600; }
.ss-depth-learn p { font-size: .85rem; color: #6b665d; line-height: 1.55; margin: 8px 0 0; }

/* Home — new insights highlight row */
.ss-home-insights { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.ss-answer-card + .ss-home-insights { margin-top: 12px; }
.ss-home-insight { text-align: left; border: 1px solid var(--border,#e6e3dd); background: #fff; border-radius: 12px; padding: 14px; cursor: pointer; display: flex; flex-direction: column; gap: 6px; transition: border-color .15s, box-shadow .15s; }
.ss-home-insight:hover { border-color: var(--accent); box-shadow: 0 2px 10px rgba(0,0,0,.04); }
.ss-home-insight-metric { font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); }
.ss-home-insight b { font-size: .95rem; line-height: 1.35; }
.ss-home-insight-detail { font-size: .82rem; color: var(--text-muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ss-home-seeall { grid-column: 1 / -1; justify-self: start; background: none; border: none; color: var(--accent); font: inherit; font-size: .85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; padding: 2px 0; }
@media (max-width: 720px) { .ss-home-insights { grid-template-columns: 1fr; } }

/* perks add-on — selectable */
.ss-comp-pick { cursor: pointer; }
.ss-comp-pick:hover { border-color: var(--accent); }
/* left-align the invitation-preview CTA in the review row */
.ss-review-row .rv .ss-row-cta { align-self: flex-start; text-align: left; }

/* join: step progress bar */
.jn-progress { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0 auto 8px; padding: 0; max-width: 460px; }
.jn-progress-step { display: flex; align-items: center; gap: 8px; color: var(--text-muted); font-size: .82rem; }
.jn-progress-step:not(:last-child)::after { content: ""; width: 34px; height: 2px; background: var(--border,#e6e3dd); margin: 0 12px; }
.jn-progress-step.done:not(:last-child)::after { background: var(--accent); }
.jn-progress-dot { width: 22px; height: 22px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 600; border: 1.5px solid var(--border,#e6e3dd); background: #fff; color: var(--text-muted); }
.jn-progress-step.on .jn-progress-dot { border-color: var(--accent); color: var(--accent); }
.jn-progress-step.done .jn-progress-dot { border-color: var(--accent); background: var(--accent); color: #fff; }
.jn-progress-step.on .jn-progress-label, .jn-progress-step.done .jn-progress-label { color: var(--text); font-weight: 600; }
@media (max-width: 560px) { .jn-progress-label { display: none; } .jn-progress-step:not(:last-child)::after { width: 22px; margin: 0 7px; } }

/* join: cadence preference at opt-in */
.jn-cadence { max-width: 460px; margin: 0 0 18px; }
.jn-cadence-label { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 9px; }
.jn-cadence-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.jn-cadence-opt { text-align: left; border: 1px solid var(--border,#e6e3dd); background: #fff; border-radius: 10px; padding: 10px; cursor: pointer; display: flex; flex-direction: column; gap: 4px; }
.jn-cadence-opt b { font-size: .85rem; }
.jn-cadence-opt span { font-size: .74rem; color: var(--text-muted); line-height: 1.4; }
.jn-cadence-opt.on { border-color: var(--accent); background: #fbf3ee; box-shadow: 0 0 0 1px var(--accent) inset; }
.jn-cadence-note { font-size: .8rem; color: var(--text-muted); margin: 9px 0 0; line-height: 1.45; }
.jn-cadence-confirm { font-size: .9rem; color: #2e7d46; margin: 4px 0 10px; }
@media (max-width: 560px) { .jn-cadence-grid { grid-template-columns: 1fr; } }

/* join: optional intro framing */
.jn-intro-why { list-style: none; padding: 0; margin: 18px 0 22px; display: flex; flex-direction: column; gap: 11px; }
.jn-intro-why li { position: relative; padding-left: 24px; line-height: 1.5; color: var(--text-secondary,#4a463f); font-size: .95rem; }
.jn-intro-why li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 7px; height: 7px; border-radius: 999px; background: var(--accent); }
.jn-intro-why b { color: var(--text,#24221e); }
.jn-intro-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.jn-skip { background: none; border: none; color: var(--text-muted); font: inherit; font-size: .9rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.jn-skip:hover { color: var(--text); }

/* join: channel picker (step 1 -> step 2) + combined rewards box */
.jn-choice-pick { cursor: pointer; transition: border-color .15s; }
.jn-choice-pick:hover { border-color: var(--accent); }
.jn-choice-go { color: var(--accent); font-size: .88rem; display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-weight: 600; }
.jn-back { background: none; border: none; color: var(--accent); cursor: pointer; font: inherit; padding: 0; }
.jn-next { max-width: 440px; display: flex; flex-direction: column; gap: 12px; }
.jn-rate-perks { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border, #e6e3dd); font-size: .88rem; color: var(--text-secondary, #6b665d); }

/* 3-point exploration scale */
.ss-temp-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ss-temp-opt { text-align: left; border: 1px solid var(--border,#e6e3dd); background: #fff; border-radius: 10px; padding: 12px; cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.ss-temp-opt b { font-size: .9rem; }
.ss-temp-opt span { font-size: .78rem; color: var(--text-muted); line-height: 1.4; }
.ss-temp-opt.on { border-color: var(--accent); background: #fbf3ee; box-shadow: 0 0 0 1px var(--accent) inset; }
@media (max-width: 720px) { .ss-temp-3 { grid-template-columns: 1fr; } }

/* Slack connect — sidebar card (separated + obvious) */
.ss-slack-side { margin: 14px 0 10px; padding: 13px; border: 1px solid #e7c9b8; background: #fbf3ee; border-radius: 12px; }
.ss-slack-side.on { background: #f1f6f1; border-color: #cfe3cf; }
.ss-slack-side-copy b { font-size: .82rem; display: block; margin-bottom: 3px; }
.ss-slack-side-copy span { font-size: .74rem; color: var(--text-muted); line-height: 1.45; display: block; }
.ss-slack-side-btn { margin-top: 10px; width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: none; background: var(--accent); color: #fff; font: inherit; font-size: .8rem; font-weight: 600; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.ss-slack-side-btn:hover { filter: brightness(1.05); }
.ss-slack-side-done { display: flex; gap: 9px; align-items: flex-start; color: #2e7d46; }
.ss-slack-side-done b { font-size: .82rem; display: block; color: #24221e; }
.ss-slack-side-done span { font-size: .74rem; color: var(--text-muted); line-height: 1.45; display: block; margin-top: 2px; }

/* ============================================================
   Bucket A — relationship-frame surfaces (added 2026-06-22)
   ============================================================ */

/* Per-partner relationship memory */
.ss-memory { border: 1px solid var(--border); border-radius: 14px; background: oklch(0.99 0.004 80 / .55); padding: 1rem 1.1rem; margin: .25rem 0 1rem; }
.ss-memory-head { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; margin-bottom: .6rem; }
.ss-memory-head em { font-style: normal; font-size: .76rem; color: var(--text-secondary); }
.ss-memory-block { margin-top: .55rem; }
.ss-memory-block b { display: block; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: .25rem; }
.ss-memory-block ul { margin: 0; padding-left: 1.05rem; }
.ss-memory-block li { font-size: .88rem; line-height: 1.45; margin: .15rem 0; }
.ss-memory-foot { margin: .7rem 0 0; font-size: .8rem; color: var(--text-secondary); font-style: italic; }

/* Reviews -> partners jump-start */
.ss-reviews { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .8rem; }
.ss-review { border: 1px solid var(--border); border-radius: 14px; padding: .85rem .95rem; background: var(--panel); display: flex; flex-direction: column; gap: .55rem; }
.ss-review-meta { display: flex; align-items: center; gap: .4rem; font-size: .8rem; color: var(--text-secondary); }
.ss-review-meta b { color: inherit; }
.ss-review-meta em { font-style: normal; color: var(--accent); margin-left: auto; }
.ss-review p { margin: 0; font-size: .9rem; line-height: 1.45; }
.ss-review .btn { align-self: flex-start; }

/* One-click fix + close-the-loop */
.ss-fix { margin-top: .85rem; border-top: 1px dashed var(--border); padding-top: .75rem; }
.ss-fix-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ss-fix-draft { margin-top: .7rem; border: 1px solid var(--accent-soft); border-radius: 12px; background: var(--accent-tint); padding: .8rem .9rem; }
.ss-fix-draft-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.ss-fix-type { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; background: var(--accent); color: #fff; padding: .15rem .45rem; border-radius: 999px; }
.ss-fix-draft pre { margin: 0; white-space: pre-wrap; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .8rem; line-height: 1.5; color: var(--accent-hover); }
.ss-fix-draft-foot { margin-top: .6rem; display: flex; align-items: center; gap: .35rem; font-size: .76rem; color: var(--accent-hover); }
.ss-fix-closed { margin: .6rem 0 0; font-size: .82rem; color: var(--accent-hover); font-style: italic; }

/* Weekly digest */
.ss-digest-headline { font-size: 1.02rem; line-height: 1.45; margin: .2rem 0 .8rem; font-weight: 500; }
.ss-digest-stats { display: flex; gap: 1.4rem; margin-bottom: .85rem; }
.ss-digest-stats b { display: block; font-family: var(--font-display); font-size: 1.5rem; color: var(--accent); line-height: 1; }
.ss-digest-stats span { font-size: .76rem; color: var(--text-secondary); }
.ss-digest-list { margin: 0; padding-left: 1.05rem; }
.ss-digest-list li { font-size: .9rem; line-height: 1.5; margin: .25rem 0; }

/* Integrations: Slack + MCP */
.ss-integ-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: .9rem; }
.ss-integ-card { border: 1px solid var(--border); border-radius: 14px; padding: .95rem 1rem; background: oklch(0.99 0.004 80 / .55); }
.ss-integ-head { display: flex; align-items: center; gap: .45rem; font-weight: 600; margin-bottom: .55rem; }
.ss-slack { display: flex; flex-direction: column; gap: .5rem; }
.ss-slack-msg { font-size: .85rem; line-height: 1.45; }
.ss-slack-who { display: block; font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-secondary); margin-bottom: .1rem; }
.ss-slack-bot { border-left: 2px solid var(--accent-soft); padding-left: .6rem; }
.ss-slack-bot .ss-slack-who { color: var(--accent); }
.ss-mcp { display: block; margin-top: .6rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .76rem; background: var(--accent-tint); color: var(--accent-hover); padding: .5rem .6rem; border-radius: 8px; overflow-x: auto; }

/* Pre-briefed companion */
.ss-prebrief-list { list-style: none; margin: .2rem 0 0; padding: 0; }
.ss-prebrief-list li { display: flex; align-items: flex-start; gap: .45rem; font-size: .9rem; line-height: 1.45; margin: .35rem 0; color: var(--accent-hover); }

/* Honest gaps */
.ss-unanswered ul { margin: 0; padding-left: 1.05rem; }
.ss-unanswered li { font-size: .88rem; line-height: 1.5; margin: .2rem 0; color: var(--text-secondary); }

/* Insight card -> conversations link (card is no longer a button) */
.ss-insight-link { display: inline-flex; align-items: center; gap: 5px; background: none; border: none; color: var(--accent); font: inherit; font-size: .82rem; font-weight: 600; cursor: pointer; padding: 2px 0; margin-top: .2rem; }

/* ---- One-click fix: insight detail (Novus-grounded, on the why) ---- */
.ss-insight-detail-head { display: flex; gap: 1rem; align-items: flex-start; }
.ss-insight-metric-big { font-family: var(--font-display); font-size: 2.4rem; line-height: 1; color: var(--accent); flex: none; }
.ss-insight-detail-head h2 { margin: .15rem 0 .35rem; }
.ss-insight-detail-head p { margin: 0; color: var(--text-secondary); line-height: 1.5; }
.ss-insight-detail-grid { display: grid; grid-template-columns: 1.7fr 1fr; gap: 1rem; }
@media (max-width: 860px) { .ss-insight-detail-grid { grid-template-columns: 1fr; } }
.ss-rootcause { margin: .2rem 0 0; padding-left: 1.2rem; }
.ss-rootcause li { font-size: .92rem; line-height: 1.55; margin: .5rem 0; }
.ss-sources .ss-source-people { display: flex; flex-direction: column; gap: .3rem; margin-top: .2rem; }
.ss-source-counts { margin: .7rem 0 0; font-size: .8rem; color: var(--text-secondary); }
.ss-plan-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: .9rem; }
.ss-steps { display: flex; flex-direction: column; gap: .5rem; }
.ss-step { display: flex; gap: .6rem; border: 1px solid var(--border); border-radius: 12px; padding: .7rem .8rem; background: var(--panel); transition: opacity .15s; }
.ss-step.off { opacity: .45; }
.ss-step-check { flex: none; width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--accent-soft); background: var(--accent-tint); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; margin-top: 2px; }
.ss-step.off .ss-step-check { background: transparent; }
.ss-step-main { flex: 1; min-width: 0; }
.ss-step-head { display: flex; align-items: center; gap: .55rem; width: 100%; background: none; border: none; padding: 0; cursor: pointer; font: inherit; text-align: left; flex-wrap: wrap; }
.ss-step-label { font-size: .66rem; letter-spacing: .07em; color: var(--text-secondary); font-weight: 700; }
.ss-step-head b { font-size: .9rem; }
.ss-step-type { margin-left: auto; font-size: .68rem; text-transform: uppercase; letter-spacing: .05em; color: var(--accent-hover); background: var(--accent-tint); padding: .12rem .45rem; border-radius: 999px; }
.ss-step-body { margin-top: .55rem; padding-top: .55rem; border-top: 1px dashed var(--border); }
.ss-step-body p { margin: 0 0 .5rem; font-size: .87rem; line-height: 1.5; }
.ss-step-affects { display: inline-block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .74rem; background: oklch(0.96 0.006 80); color: var(--text-secondary); padding: .15rem .4rem; border-radius: 6px; margin-right: .5rem; }
.ss-step-copy { font: inherit; font-size: .78rem; font-weight: 600; color: var(--accent); background: none; border: none; cursor: pointer; padding: .15rem 0; }
.ss-closeloop .btn { margin-top: .2rem; }
.ss-insight-cta { display: inline-flex; align-items: center; gap: 5px; color: var(--accent); font-weight: 600; font-size: .82rem; margin-top: .3rem; }

/* Voice interview preview (deep compose) */
.ss-voice-preview { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.ss-voice-preview .btn { margin-top: 8px; }

/* ============================================================
   In-product connect: GitHub import → scan → install PR
   (the self-evolving on-ramp — Novus-grounded)
   ============================================================ */
.ss-connect { margin-top: 1.4rem; border: 1px solid var(--border); border-radius: 14px; background: var(--canvas); overflow: hidden; }
.ss-connect-stage { padding: 1.5rem 1.6rem 1.7rem; }
.ss-connect .ss-step-lead { margin: .5rem 0 1rem; max-width: 60ch; }
.ss-connect-foot { display: block; margin-top: .9rem; color: var(--text-muted); font-size: .78rem; line-height: 1.5; }

.ss-repo-row { display: inline-flex; align-items: center; gap: .55rem; padding: .5rem .8rem; border: 1px solid var(--border); border-radius: 9px; background: var(--accent-tint); margin: .2rem 0 1.1rem; }
.ss-repo-row code { font-family: var(--font-mono); font-size: .85rem; color: var(--text-primary); }
.ss-repo-branch, .ss-pr-branch { font-family: var(--font-mono); font-size: .72rem; color: var(--text-muted); padding: .1rem .4rem; border: 1px solid var(--border); border-radius: 5px; }

/* scan: reasoning panel + product map */
.ss-scan-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 1rem; align-items: start; }
@media (max-width: 760px) { .ss-scan-grid { grid-template-columns: 1fr; } }
.ss-scan-reason { background: var(--night); border-radius: 11px; padding: .9rem 1rem; min-height: 210px; }
.ss-scan-reason-h, .ss-scan-map-h { display: block; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; margin-bottom: .7rem; }
.ss-scan-reason-h { color: oklch(0.78 0.02 60); }
.ss-scan-step { display: flex; gap: .55rem; margin-bottom: .7rem; animation: ssFade .35s ease; }
.ss-scan-tool { flex: none; font-family: var(--font-mono); font-size: .66rem; font-weight: 600; color: var(--night); background: oklch(0.82 0.02 60); border-radius: 5px; padding: .12rem .4rem; height: fit-content; margin-top: .1rem; }
.ss-scan-step-body { display: flex; flex-direction: column; gap: .15rem; }
.ss-scan-cmd { font-family: var(--font-mono); font-size: .76rem; color: oklch(0.86 0.02 60); }
.ss-scan-out { font-size: .76rem; color: oklch(0.70 0.015 60); }
.ss-scan-concl { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; color: oklch(0.82 0.07 152); }
.ss-scan-working { color: oklch(0.72 0.015 60); font-size: .78rem; align-items: center; }
.ss-scan-spinner, .ss-connect-dot { width: 9px; height: 9px; border-radius: 50%; }
.ss-scan-spinner { border: 2px solid oklch(0.55 0.02 60); border-top-color: transparent; margin-right: .5rem; animation: ssSpin .7s linear infinite; }
.ss-scan-map { border: 1px solid var(--border); border-radius: 11px; padding: .9rem 1rem; }
.ss-scan-map-h { color: var(--text-muted); }
.ss-scan-fact { display: grid; grid-template-columns: 16px auto 1fr; align-items: baseline; gap: .4rem; padding: .3rem 0; font-size: .82rem; animation: ssFade .35s ease; }
.ss-scan-fact b { color: var(--text-primary); }
.ss-scan-fact span { color: var(--text-secondary); }
.ss-scan-fact svg { color: var(--success); }
.ss-scan-moment svg { color: var(--accent); }

/* install PR card */
.ss-pr { border: 1px solid var(--border); border-radius: 11px; overflow: hidden; margin: .3rem 0 .2rem; }
.ss-pr-head { display: flex; align-items: center; gap: .5rem; padding: .7rem .9rem; background: var(--accent-tint); border-bottom: 1px solid var(--border); }
.ss-pr-head b { font-size: .92rem; }
.ss-pr-body { padding: .7rem .9rem 0; color: var(--text-secondary); font-size: .85rem; }
.ss-pr-file { padding: .6rem .9rem; }
.ss-pr-path { font-family: var(--font-mono); font-size: .74rem; color: var(--text-muted); }
.ss-pr-add { display: flex; gap: .5rem; font-family: var(--font-mono); font-size: .76rem; background: var(--success-tint); border-radius: 5px; padding: .2rem .5rem; margin-top: .3rem; overflow-x: auto; }
.ss-pr-add span { color: var(--success); font-weight: 700; }
.ss-pr-add code { color: var(--text-primary); white-space: pre; }
.ss-pr-caveat { margin: .4rem .9rem .9rem; padding: .6rem .8rem; border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 7px 7px 0; }
.ss-pr-caveat b { font-size: .8rem; }
.ss-pr-caveat p { font-size: .82rem; color: var(--text-secondary); margin-top: .2rem; }

/* real install PR — calm failure + retry, and the live link to the opened PR */
.ss-pr-fail { padding: .9rem 1rem 1rem; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ss-pr-fail-msg { display: flex; align-items: flex-start; gap: .5rem; font-size: .9rem; color: var(--text-secondary); margin-bottom: .8rem; line-height: 1.45; }
.ss-pr-fail-msg svg { color: var(--accent); flex-shrink: 0; margin-top: 1px; }
.ss-pr-link { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .7rem; margin: 0 0 .8rem; }
.ss-pr-link a { display: inline-flex; align-items: center; gap: .35rem; padding: .4rem .7rem; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--canvas); font-size: .85rem; font-weight: 600; color: var(--accent); }
.ss-pr-link a:hover { border-color: var(--accent-soft); background: var(--accent-tint); color: var(--accent-hover); }
.ss-pr-link span { font-size: .8rem; color: var(--text-muted); }

/* live / connected state + triggers */
.ss-connect-done { padding: 1.4rem 1.6rem 1.6rem; }
.ss-connect-livehead { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: 1.1rem; }
.ss-connect-livehead b { font-size: .98rem; }
.ss-connect-livehead p { color: var(--text-secondary); font-size: .85rem; margin-top: .2rem; max-width: 64ch; }
.ss-connect-dot { background: var(--success); margin-top: .45rem; flex: none; box-shadow: 0 0 0 0 oklch(0.560 0.090 152 / .5); animation: ssPulse 1.8s ease-out infinite; }
.ss-trigger-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
@media (max-width: 760px) { .ss-trigger-grid { grid-template-columns: 1fr; } }
.ss-trigger { border: 1px solid var(--border); border-radius: 10px; padding: .7rem .8rem; }
.ss-trigger b { display: block; font-size: .85rem; }
.ss-trigger-when { display: block; font-family: var(--font-mono); font-size: .7rem; color: var(--accent); margin: .15rem 0 .35rem; }
.ss-trigger em { font-style: normal; font-size: .79rem; color: var(--text-secondary); }

@keyframes ssFade { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: none; } }
@keyframes ssSpin { to { transform: rotate(360deg); } }
@keyframes ssPulse { 0% { box-shadow: 0 0 0 0 oklch(0.560 0.090 152 / .5); } 70% { box-shadow: 0 0 0 7px oklch(0.560 0.090 152 / 0); } 100% { box-shadow: 0 0 0 0 oklch(0.560 0.090 152 / 0); } }

/* In-product incentive model (fragmented free · deep 1:1s rewarded) */
.ss-incentive { margin-top: 1.4rem; }
.ss-incentive .ss-step-lead { margin: .4rem 0 .9rem; }
.ss-incentive-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
@media (max-width: 720px) { .ss-incentive-grid { grid-template-columns: 1fr; } }
.ss-incentive-card { border: 1px solid var(--border); border-radius: 11px; padding: .9rem 1rem; }
.ss-incentive-card.free { background: var(--success-tint); border-color: oklch(0.86 0.05 152); }
.ss-incentive-card.paid { background: var(--accent-tint); border-color: var(--accent-soft); }
.ss-incentive-tag { font-family: var(--font-mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted); }
.ss-incentive-card b { display: block; margin: .25rem 0 .3rem; font-size: .95rem; }
.ss-incentive-card p { font-size: .83rem; color: var(--text-secondary); }
.ss-incentive-rate { display: flex; align-items: center; gap: .8rem; margin-top: .7rem; }
.ss-incentive-rate .ss-rate-input { display: inline-flex; align-items: center; gap: .3rem; }
.ss-incentive-rate .input { width: 4.2rem; }
.ss-incentive-rate b { display: inline; font-size: .82rem; color: var(--accent-hover); margin: 0; }

.ss-connect-alt { margin-top: 1.2rem; padding: .9rem 1rem; border: 1px dashed var(--border-strong); border-radius: 11px; background: oklch(0.985 0.004 60); }
.ss-connect-alt-h { font-family: var(--font-mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.ss-connect-alt p { font-size: .85rem; color: var(--text-secondary); margin: .3rem 0 .5rem; max-width: 60ch; }
.ss-connect-alt .ss-linklike { font-size: .88rem; font-weight: 600; color: var(--accent); }
.ss-connect-done .ss-incentive { margin-top: 1.1rem; }

/* ── Self-evolving-flow dashboard: surface + docked Ask Observant rail (PRD §3) ── */
.ss-surface-wrap { display: flex; gap: 1.5rem; align-items: flex-start; max-width: 1500px; margin: 0 auto; }
.ss-surface-main { flex: 1 1 auto; min-width: 0; }
.ss-ask-rail-dock {
  flex: 0 0 296px;
  position: sticky;
  top: 0;
  align-self: flex-start;
}
.obs-ask-rail {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface, #fff);
  padding: 1rem 1.05rem;
  box-shadow: 0 1px 2px oklch(0 0 0 / 0.03);
}
.obs-ask-rail .ss-empty-state { margin-top: .6rem; }
@media (max-width: 1180px) {
  .ss-surface-wrap { display: block; }
  .ss-ask-rail-dock { display: none; }
}

/* "Preview the user view" side link (sits below the nav) */
.ss-userview-link {
  display: flex; align-items: center; gap: 9px;
  width: 100%; margin: 10px 0;
  padding: 9px 11px;
  border: 1px dashed var(--border-strong, #d9cfc6);
  border-radius: 10px;
  background: transparent;
  color: var(--text-secondary);
  font: inherit; font-size: .82rem; font-weight: 600;
  cursor: pointer; text-align: left;
}
.ss-userview-link:hover { color: var(--accent); border-color: var(--accent); }
.ss-userview-link.on { color: var(--accent); border-color: var(--accent); background: oklch(0.985 0.006 60); }

/* ===== Redesigned onboarding: the fork (Stage 1) + snippet setup (Stage 2A) ===== */
.ss-fork-grid { display:grid; grid-template-columns:1fr 1fr; gap:.9rem; margin:1.1rem 0 1rem; }
@media (max-width:760px){ .ss-fork-grid{ grid-template-columns:1fr; } }
.ss-fork-card { text-align:left; border:1px solid var(--border); border-radius:13px; background:var(--canvas); padding:1rem 1.1rem; cursor:pointer; transition:border-color .12s, box-shadow .12s; }
.ss-fork-card.on { border-color: var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.ss-fork-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.4rem; }
.ss-fork-head b { font-size:1rem; }
.ss-fork-check { width:20px; height:20px; border-radius:6px; border:1.5px solid var(--border-strong); display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.ss-fork-card.on .ss-fork-check { background:var(--accent); border-color:var(--accent); }
.ss-fork-tag { margin-left:auto; font-style:normal; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.08em; text-transform:uppercase; padding:.12rem .4rem; border-radius:5px; background:#f0efec; color:var(--text-muted); }
.ss-fork-tag.rec { background:var(--success-tint); color:var(--success); }
.ss-fork-card p { font-size:.86rem; color:var(--text-secondary); }
.ss-fork-list { list-style:none; margin:.6rem 0 .5rem; padding:0; display:flex; flex-direction:column; gap:.25rem; }
.ss-fork-list li { font-size:.82rem; color:var(--text-secondary); padding-left:1rem; position:relative; }
.ss-fork-list li::before { content:"·"; position:absolute; left:.25rem; color:var(--accent); font-weight:700; }
.ss-fork-card small { display:block; margin-top:.4rem; font-size:.74rem; color:var(--text-muted); font-family:var(--font-mono); }
.ss-fork-note { display:flex; align-items:center; gap:.4rem; font-size:.82rem; color:var(--text-secondary); background:var(--accent-tint); border-radius:9px; padding:.6rem .8rem; }

.ss-snippet { display:flex; align-items:center; gap:.5rem; background:var(--night); border-radius:10px; padding:.7rem .9rem; margin:.4rem 0 .5rem; overflow-x:auto; }
.ss-snippet code { font-family:var(--font-mono); font-size:.8rem; color:oklch(0.88 0.02 60); white-space:nowrap; flex:1; }
.ss-snippet-copy { flex:none; font-size:.76rem; font-weight:600; color:var(--night); background:oklch(0.82 0.02 60); border-radius:6px; padding:.3rem .6rem; }
.ss-snippet-note { display:block; font-size:.76rem; color:var(--text-muted); margin-bottom:.5rem; }
.ss-snippet-note code { font-family:var(--font-mono); font-size:.72rem; }
.ss-snippet-live { display:flex; align-items:center; gap:.5rem; font-size:.92rem; margin:.3rem 0 .6rem; }
.ss-snippet-dot { width:9px; height:9px; border-radius:50%; background:var(--success); flex:none; }
.ss-moments { display:flex; flex-direction:column; gap:.5rem; margin:.6rem 0; }
.ss-moment { display:flex; gap:.55rem; align-items:flex-start; border:1px solid var(--border); border-radius:10px; padding:.6rem .75rem; }
.ss-moment svg { color:var(--accent); margin-top:.15rem; flex:none; }
.ss-moment b { font-size:.85rem; } .ss-moment b em { font-style:normal; font-family:var(--font-mono); font-size:.6rem; text-transform:uppercase; color:var(--text-muted); margin-left:.3rem; }
.ss-moment span { display:block; font-size:.8rem; color:var(--text-secondary); }
.ss-moment-opt { cursor:pointer; } .ss-moment-opt input { margin-top:.2rem; }
.ss-snippet-foot { display:block; margin-top:.4rem; font-size:.76rem; color:var(--text-muted); }

/* ===== Fork reframed: hero default + add-on (team critique 6/29) ===== */
.ss-fork-hero { border:1px solid var(--accent-soft); background:var(--accent-tint); border-radius:13px; padding:1rem 1.1rem; margin:1rem 0 .8rem; }
.ss-fork-hero-head { display:flex; align-items:flex-start; gap:.6rem; }
.ss-fork-hero-ic { width:30px; height:30px; border-radius:8px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.ss-fork-hero-head b { font-size:1rem; } .ss-fork-hero-head span { display:block; font-size:.84rem; color:var(--text-secondary); margin-top:.1rem; }
.ss-fork-pill { margin-left:auto; flex:none; font-style:normal; font-family:var(--font-mono); font-size:.62rem; letter-spacing:.06em; text-transform:uppercase; background:var(--success); color:#fff; padding:.2rem .5rem; border-radius:99px; }
.ss-fork-hero .ss-fork-list { margin:.7rem 0 .5rem; }
.ss-fork-hero small { display:block; font-size:.74rem; color:var(--text-muted); font-family:var(--font-mono); }
.ss-fork-addon { display:flex; gap:.6rem; width:100%; text-align:left; border:1px solid var(--border); border-radius:12px; background:var(--canvas); padding:.85rem 1rem; cursor:pointer; align-items:flex-start; }
.ss-fork-addon.on { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
.ss-fork-addon-body b { font-size:.92rem; } .ss-fork-addon-body p { font-size:.84rem; color:var(--text-secondary); margin-top:.2rem; }
.ss-fork-skip { display:block; margin-top:.9rem; font-size:.8rem; color:var(--text-muted); text-decoration:underline; text-underline-offset:2px; background:none; }
.ss-fork-skip:hover { color:var(--accent-hover); }

/* ===== Snippet: listening-verify + feel-it test pulse ===== */
.ss-snippet-listen { display:flex; align-items:center; gap:.55rem; font-size:.92rem; color:var(--text-secondary); padding:1rem 0; }
.ss-snippet-spin { width:12px; height:12px; border-radius:50%; border:2px solid var(--accent); border-top-color:transparent; animation:obsAskSpin .8s linear infinite; }
.ss-feelit { margin:.9rem 0; }
.ss-pulse-preview { border:1px dashed var(--border-strong); border-radius:12px; padding:.8rem .9rem; background:oklch(0.985 0.004 60); }
.ss-pulse-preview-tag { font-family:var(--font-mono); font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:var(--text-muted); }
.ss-pulse-bubble { background:#fff; border:1px solid var(--border); border-radius:12px; padding:.7rem .8rem; margin:.45rem 0 .5rem; box-shadow:0 4px 14px oklch(0 0 0 / .06); }
.ss-pulse-bubble p { font-size:.88rem; font-weight:500; }
.ss-pulse-row { display:flex; align-items:center; gap:.4rem; margin-top:.5rem; }
.ss-pulse-tap { width:30px; height:30px; border:1px solid var(--border); border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.ss-pulse-input { flex:1; border:1px solid var(--border); border-radius:8px; padding:.35rem .5rem; font-size:.78rem; color:var(--text-muted); }
.ss-pulse-what { display:inline-block; margin-top:.5rem; font-size:.72rem; color:var(--accent-hover); text-decoration:underline; }
.ss-pulse-disclosure { display:block; font-size:.76rem; color:var(--text-secondary); } .ss-pulse-disclosure i { color:var(--text-primary); }
.ss-moments-more { margin:.6rem 0; border-top:1px solid var(--border); padding-top:.6rem; }
.ss-moments-more summary { font-size:.82rem; color:var(--text-secondary); cursor:pointer; font-weight:500; }
.ss-moments-more .ss-moment { margin-top:.5rem; }
.ss-moment b em { color:var(--text-muted); }
.ss-moments-parked { font-size:.76rem; color:var(--text-muted); margin-top:.5rem; }

/* Fork v3 — two stacked, CLICKABLE cards (baseline default-hero + customized add-on) */
.ss-fork-card { display:block; width:100%; margin-bottom:.7rem; }
.ss-fork-card.hero { background:var(--accent-tint); border-color:var(--accent-soft); }
.ss-fork-card.hero.on { box-shadow:0 0 0 3px var(--accent-tint); }
.ss-fork-title { flex:1; min-width:0; }
.ss-fork-title b { font-size:1rem; display:block; }
.ss-fork-sub { display:block; font-family:var(--font-mono); font-size:.66rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-muted); margin-top:.1rem; }
.ss-fork-pill.off { background:var(--border-strong); color:#fff; }
.ss-fork-card .ss-fork-head { align-items:flex-start; }
.ss-fork-card .ss-fork-tag { align-self:center; }

/* GitHub-App authorize screen (faithful Novus install step) */
.ss-ghauth { }
.ss-ghauth-head { display:flex; align-items:center; gap:.5rem; margin-bottom:.5rem; }
.ss-ghauth-head b { font-size:1.05rem; }
.ss-ghauth-mark { width:30px; height:30px; border-radius:8px; background:var(--night); color:#fff; display:flex; align-items:center; justify-content:center; flex:none; }
.ss-ghauth-perms { list-style:none; margin:.8rem 0 1rem; padding:0; display:flex; flex-direction:column; gap:.5rem; }
.ss-ghauth-perms li { display:flex; align-items:baseline; gap:.45rem; font-size:.86rem; }
.ss-ghauth-perms li svg { color:var(--success); flex:none; }
.ss-ghauth-perms li span { color:var(--text-muted); }

/* Collapsible "who to send it to" tip (preview step) */
details.ss-suggest { cursor: default; }
details.ss-suggest > .ss-suggest-summary { cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; color: var(--accent); font-size: .92rem; user-select: none; }
details.ss-suggest > .ss-suggest-summary::-webkit-details-marker { display: none; }
details.ss-suggest > .ss-suggest-summary::after { content: "\25B8"; font-size: .72rem; color: var(--text-muted); transition: transform .15s ease; }
details.ss-suggest[open] > .ss-suggest-summary::after { transform: rotate(90deg); }
.ss-suggest-body { margin-top: .7rem; }
.ss-suggest-body > p { color: var(--text-secondary); font-size: .9rem; margin: 0 0 .6rem; }

/* Right-side docked setup assistant rail (onboarding, à la Novus) */
.obs-chat { position: fixed; top: 0; right: 0; bottom: 0; width: 384px; display: flex; flex-direction: column; background: var(--surface); border-left: 1px solid var(--border); box-shadow: -16px 0 48px rgba(40,28,20,.10); z-index: 60; }
.obs-chat-head { display: flex; align-items: center; gap: .65rem; padding: 1rem 1.1rem; border-bottom: 1px solid var(--border); background: var(--surface); flex: none; }
.obs-chat-mark { width: 30px; height: 30px; flex: none; border-radius: 9px; background: var(--accent-tint); color: var(--accent); display: grid; place-items: center; }
.obs-chat-id { min-width: 0; line-height: 1.25; }
.obs-chat-id b { display: block; font-size: .92rem; color: var(--text-primary); }
.obs-chat-id span { font-size: .72rem; color: var(--text-muted); }
.obs-chat-min { margin-left: auto; flex: none; width: 28px; height: 28px; border-radius: 8px; background: transparent; border: none; color: var(--text-muted); display: grid; place-items: center; cursor: pointer; }
.obs-chat-min:hover { background: var(--canvas); color: var(--text-primary); }
.obs-chat-body { flex: 1; overflow-y: auto; padding: 1.25rem 1.1rem; display: flex; flex-direction: column; gap: 1.05rem; background: var(--canvas); }
.obs-chat-sender { display: block; font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }
.obs-chat-msg.them { align-self: stretch; }
.obs-chat-msg.them p { margin: 0; font-size: .875rem; line-height: 1.62; color: var(--text-primary); }
.obs-chat-msg.them.emph p { font-weight: 600; }
.obs-chat-msg.me { align-self: flex-end; max-width: 80%; }
.obs-chat-msg.me p { margin: 0; padding: .55rem .85rem; border-radius: 15px; border-bottom-right-radius: 5px; background: var(--night); color: #fff; font-size: .85rem; line-height: 1.5; }
.obs-chat-chips { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: .75rem; }
.obs-chat-chips button { font-size: .8rem; padding: .42rem .85rem; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--text-primary); cursor: pointer; transition: border-color .15s, background .15s, color .15s; }
.obs-chat-chips button:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent); }
.obs-chat-input { display: flex; align-items: center; gap: .5rem; padding: .85rem 1rem; border-top: 1px solid var(--border); background: var(--surface); flex: none; }
.obs-chat-input input { flex: 1; min-width: 0; border: 1px solid var(--border); border-radius: 999px; padding: .6rem .9rem; font-size: .85rem; background: var(--canvas); color: var(--text-primary); outline: none; }
.obs-chat-input input:focus { border-color: var(--accent); }
.obs-chat-input button { width: 36px; height: 36px; flex: none; border: none; border-radius: 50%; background: var(--accent); color: #fff; display: grid; place-items: center; cursor: pointer; }
.obs-chat-bubble { position: fixed; right: 1.25rem; bottom: 1.25rem; width: 54px; height: 54px; border-radius: 50%; border: none; background: var(--night); color: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 8px 24px rgba(40,28,20,.22); z-index: 60; }
@media (max-width: 1080px) { .obs-chat { width: 340px; } }
@media (max-width: 640px) { .obs-chat { width: 100%; } }

/* ── Set-up hub (modular feedback surfaces — onboarding + dashboard "Sources") ── */
.ss-hub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.9rem; margin-top: 0.7rem; }
.ss-hub-card { display: flex; flex-direction: column; gap: 0.55rem; border: 1px solid var(--border-strong); border-radius: 14px; background: var(--panel); padding: 1.1rem; transition: border-color .18s, box-shadow .18s; }
.ss-hub-card.on { border-color: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent-soft); }
.ss-hub-card-head { display: flex; align-items: center; gap: 0.6rem; }
.ss-hub-card-head b { font-size: 1.02rem; }
.ss-hub-card-head .ss-route-tag { margin-left: auto; }
.ss-hub-card > p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--text-secondary); }
.ss-hub-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; margin-top: auto; padding-top: 0.55rem; }
.ss-hub-status { display: inline-flex; align-items: center; gap: 0.32rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.04em; color: var(--text-muted); }
.ss-hub-status.on { color: var(--success, var(--accent-hover)); }
.ss-hub-foot { display: flex; align-items: center; gap: 1rem; margin-top: 1.2rem; flex-wrap: wrap; }
.ss-hub-hint { font-size: 0.82rem; color: var(--text-muted); }
.ss-hub-nudge { display: flex; align-items: center; gap: 0.45rem; margin-top: 1rem; font-size: 0.86rem; color: var(--text-secondary); background: var(--accent-tint); border-radius: 10px; padding: 0.65rem 0.85rem; }
.ss-hub-nudge.done { background: var(--success-tint, var(--accent-tint)); color: var(--success, var(--accent-hover)); }

/* ── A single surface's focused sub-flow ── */
.ss-track { display: flex; flex-direction: column; gap: 0.9rem; }
.ss-track-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.ss-track-steps { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--text-muted); }
.ss-track-steps-ol { margin: 0; }
.ss-track-done { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--border); }
.ss-track-done p { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-weight: 600; color: var(--success, var(--accent-hover)); }
@media (max-width: 720px) { .ss-hub-grid { grid-template-columns: 1fr; } }

/* Setup assistant sits BESIDE the onboarding (never covers it) — inset the content while it's open */
body.obs-chat-open .ss-activation { padding-right: 384px; transition: padding-right .22s ease; }
@media (max-width: 1080px) { body.obs-chat-open .ss-activation { padding-right: 340px; } }
@media (max-width: 640px)  { body.obs-chat-open .ss-activation { padding-right: 0; } }

/* Dashboard "Ask about your product" rail — its OWN inset (NOT the onboarding's body.obs-chat-open):
   reserve room on the shell so the docked rail sits beside the dashboard, never over it. */
.ss-shell { transition: padding-right .22s ease; }
.ss-shell.ss-assistant-open { padding-right: 384px; }
@media (max-width: 1080px) { .ss-shell.ss-assistant-open { padding-right: 340px; } }
@media (max-width: 640px)  { .ss-shell.ss-assistant-open { padding-right: 0; } }

/* "Suggested" group label above the starter chips in the assistant empty state */
.obs-chat-suggest-label { display: block; font-size: .66rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin-bottom: .15rem; }

/* Live "typing…" indicator */
.obs-chat-typing { display: inline-flex; align-items: center; gap: 4px; padding: 5px 2px; margin: 0; }
.obs-chat-typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); display: inline-block; animation: obsTyping 1.2s infinite ease-in-out; }
.obs-chat-typing i:nth-child(2) { animation-delay: .15s; }
.obs-chat-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes obsTyping { 0%, 60%, 100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }

/* When the assistant is open the middle column is narrower → stack the hub cards + keep tags/status on one line */
body.obs-chat-open .ss-hub-grid { grid-template-columns: 1fr; }
.ss-hub-card-head { flex-wrap: wrap; }
.ss-route-tag { white-space: nowrap; }
.ss-hub-status { white-space: nowrap; }

/* ============================================================
   Conversations CRM — off-product 1:1 threads + in-product
   feedback, unified in the Loop-history section (build #13).
   ============================================================ */

/* Segmented tabs: Off-product 1:1s / In-product feedback / Loops */
.ss-conv-tabs {
  display: flex;
  gap: 6px;
  padding: 5px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 12px;
  flex-wrap: wrap;
}
.ss-conv-tabs button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background .16s, color .16s, box-shadow .16s;
}
.ss-conv-tabs button:hover { color: var(--text-primary); }
.ss-conv-tabs button.on {
  background: var(--panel);
  color: var(--text-primary);
  box-shadow: 0 1px 2px oklch(0.2 0.02 60 / .08);
}
.ss-conv-tabs button em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  padding: 1px 6px;
  border-radius: 20px;
  background: var(--accent-tint);
  color: var(--accent-hover);
}

/* Channel badge — email / Telegram / in-product, warm token-derived tints */
.ss-chan-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-secondary);
  white-space: nowrap;
}
.ss-chan-badge.sm { padding: 2px 7px; font-size: 0.66rem; }
.ss-chan-badge.chan-email {
  color: var(--accent-hover);
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.ss-chan-badge.chan-telegram {
  color: var(--blue);
  background: color-mix(in oklch, var(--blue) 10%, var(--panel));
  border-color: color-mix(in oklch, var(--blue) 24%, var(--panel));
}
.ss-chan-badge.chan-inproduct {
  color: var(--success);
  background: var(--success-tint);
  border-color: color-mix(in oklch, var(--success) 26%, var(--panel));
}

/* CRM rows */
.ss-conv-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 0.8rem;
  align-items: start;
  width: 100%;
  padding: 0.75rem 0.6rem;
  text-align: left;
  color: inherit;
  border-top: 1px solid var(--border);
  transition: background .16s, box-shadow .16s;
}
.ss-conv-list .ss-conv-row:first-child { border-top-color: transparent; }
.ss-conv-row:hover,
.ss-conv-row:focus-visible,
.ss-conv-row.on {
  background: var(--accent-tint);
  border-radius: 12px;
}
.ss-conv-row.on { box-shadow: inset 0 0 0 1px var(--accent-soft); }
.ss-conv-row .ss-profile-avatar { margin-top: 2px; }
.ss-conv-row-copy { min-width: 0; }
.ss-conv-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.ss-conv-row-top b { font-size: 0.92rem; line-height: 1.2; }
.ss-conv-row-copy p {
  margin: 0.25rem 0 0;
  color: var(--text-secondary);
  font-size: 0.85rem;
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.ss-conv-row-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.4rem;
  flex-wrap: wrap;
}
.ss-conv-status {
  font-size: 0.68rem;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 20px;
  background: var(--surface-2);
  color: var(--text-muted);
  border: 1px solid var(--border);
}
.ss-conv-status.st-active,
.ss-conv-status.st-activenow {
  color: var(--success);
  background: var(--success-tint);
  border-color: color-mix(in oklch, var(--success) 24%, var(--panel));
}
.ss-conv-status.st-async {
  color: var(--accent-hover);
  background: var(--accent-tint);
  border-color: var(--accent-soft);
}
.ss-conv-tag,
.ss-conv-min {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-muted);
  white-space: nowrap;
}

/* Thread reader header strip */
.ss-thread-strip {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  padding: 0.6rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  font-size: 0.78rem;
  color: var(--text-muted);
}
.ss-thread-panel .ss-chat-head .ss-chan-badge { margin-left: auto; }

/* Source note above a stream */
.ss-source-note {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0.35rem 0 0.85rem;
  font-size: 0.82rem;
  color: var(--text-secondary);
}
.ss-source-note svg { color: var(--success); flex-shrink: 0; }

/* In-product feedback stream */
.ss-inproduct-list { display: flex; flex-direction: column; gap: 0.7rem; }
.ss-inproduct-row {
  display: block;
  width: 100%;
  text-align: left;
  color: inherit;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--panel);
  padding: 0.8rem 0.9rem;
}
button.ss-inproduct-row:hover,
button.ss-inproduct-row:focus-visible { border-color: var(--accent-soft); }
.ss-src-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--success);
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--success-tint);
  border: 1px solid color-mix(in oklch, var(--success) 22%, var(--panel));
}
.ss-inproduct-body { margin-top: 0.5rem; }
.ss-inproduct-body b { font-size: 0.9rem; line-height: 1.3; }
.ss-inproduct-body p {
  margin: 0.25rem 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text-secondary);
}
.ss-inproduct-foot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-top: 0.55rem;
  font-size: 0.72rem;
  color: var(--text-muted);
}
.ss-inproduct-foot .mono { font-family: var(--font-mono); font-size: 0.7rem; }

/* Per-user in-product block inside a person's profile */
.ss-person-inproduct {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: oklch(0.99 0.004 80 / .55);
  padding: 1rem 1.1rem;
  margin: 0.25rem 0 1rem;
}
.ss-person-inproduct .ss-inproduct-row { background: var(--surface); }

@media (max-width: 860px) {
  .ss-thread-panel .ss-chat-body { max-height: none; }
}