:root {
  --paper-rail: #fbf9f4;
  --paper-bg: #f7f5ef;
  --paper-card: #fdfcf8;
  --paper-well: #efece4;
  --paper-deep: #eae6db;
  --paper-border: rgb(38 35 26 / 12%);
  --paper-border-strong: rgb(38 35 26 / 24%);
  --ink: #26231c;
  --ink-secondary: #5f594c;
  --ink-muted: #8a8375;
  --accent: #99af62;
  --accent-deep: #5b7328;
  --accent-hover: #4d6420;
  --accent-pressed: #42551c;
  --accent-text: #4f6422;
  --hot: #f64800;
  --sans: "FK Grotesk Neue", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", "SFMono-Regular", Consolas, monospace;
  --rail: 248px;
  --chat: 680px;
  --work: 1120px;
  --radius-chip: 4px;
  --radius-card: 8px;
  --radius-pill: 999px;
}

* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html,
body {
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--paper-bg);
  color: var(--ink);
  font-family: var(--sans);
  font-synthesis: none;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea {
  color: inherit;
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

button {
  border: 0;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--accent-deep);
  outline-offset: 2px;
}

.app-shell {
  display: flex;
  min-height: 100svh;
}

.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex: 0 0 var(--rail);
  flex-direction: column;
  gap: 22px;
  width: var(--rail);
  height: 100svh;
  padding: 20px 14px 18px;
  background: var(--paper-rail);
  border-right: 1px solid rgb(38 35 26 / 12%);
}

.wordmark {
  display: flex;
  min-height: 26px;
  align-items: center;
  padding: 2px 8px;
}

.wordmark img {
  display: block;
  width: auto;
  height: 24px;
}

.project-switcher {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 11px 12px;
  background: var(--paper-card);
  border: 1px solid rgb(38 35 26 / 10%);
  border-radius: var(--radius-card);
  text-align: left;
  cursor: default;
}

.project-switcher > span {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-direction: column;
  gap: 3px;
}

.project-switcher strong {
  overflow: hidden;
  font-size: 13.5px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-switcher small {
  overflow: hidden;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-switcher svg {
  width: 10px;
  height: 6px;
  flex: 0 0 10px;
  margin-left: 8px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}

.nav-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 9px 10px;
  background: transparent;
  border-radius: var(--radius-chip);
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 18px;
  text-align: left;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    color 120ms ease;
}

.nav-item:hover {
  background: rgb(38 35 26 / 5%);
  color: var(--ink);
}

.nav-item:disabled {
  background: transparent;
  color: var(--ink-secondary);
  cursor: default;
  opacity: 0.42;
}

.nav-item.is-active {
  background: rgb(91 115 40 / 12%);
  color: var(--accent-text);
  font-weight: 700;
}

.nav-item svg {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.4px;
}

.nav-item > span {
  min-width: 0;
  flex: 1;
}

.nav-item small {
  width: 30px;
  flex: 0 0 30px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 400;
  line-height: 14px;
  text-align: right;
}

.rail-runs {
  min-height: 60px;
  padding: 0 4px;
}

.rail-label {
  margin: 0 8px 4px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  line-height: 14px;
  text-transform: uppercase;
}

.rail-run {
  display: grid;
  grid-template-columns: 6px minmax(0, 1fr) 42px;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 8px;
  background: transparent;
  border-radius: var(--radius-chip);
  color: var(--ink-secondary);
  cursor: pointer;
}

.rail-run:hover {
  background: rgb(38 35 26 / 5%);
}

.rail-run .run-name,
.rail-run .run-state {
  overflow: hidden;
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 14px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rail-run .run-state {
  color: var(--ink-muted);
  text-align: right;
}

.status-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: #b5ac9c;
  border-radius: var(--radius-pill);
}

.status-dot.is-running,
.status-dot.is-pending,
.status-dot.is-succeeded {
  background: var(--accent-deep);
}

.status-dot.is-pending,
.status-dot.is-running {
  animation: breathe 1.8s ease-in-out infinite;
}

.status-dot.is-failed {
  background: var(--hot);
}

.status-dot.is-needs_input {
  background: var(--hot);
}

@keyframes breathe {
  50% {
    opacity: 0.35;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}

.rail-spacer {
  flex: 1;
}

.rail-footer {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 8px 0;
  border-top: 1px solid rgb(38 35 26 / 10%);
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 16px;
}

.rail-footer > span:nth-child(2) {
  flex: 1;
}

.avatar {
  display: block;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  background: #ddd6c8;
  border-radius: var(--radius-pill);
  object-fit: cover;
}

.sign-out {
  padding: 4px 0;
  background: transparent;
  color: var(--ink-muted);
  cursor: pointer;
  font-size: 12px;
}

.sign-out:hover {
  color: var(--ink);
}

.project-switcher:disabled {
  cursor: default;
}

.auth-root {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
  padding: 40px 48px;
  background: var(--paper-bg);
}

.auth-brand {
  display: flex;
  min-height: 20px;
  align-items: center;
}

.auth-brand img {
  display: block;
  width: 31px;
  height: 20px;
  object-fit: contain;
}

.auth-stage {
  display: flex;
  flex: 1 0 0;
  align-items: center;
  justify-content: center;
  padding: 32px 0;
}

.auth-view,
.auth-card {
  width: min(100%, 360px);
}

.auth-card-error {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.auth-card-error > strong {
  font-size: 28px;
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 34px;
}

.auth-card-error > span {
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 21px;
}

.auth-footer {
  display: flex;
  align-items: center;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
}

.auth-footer > span {
  flex: 1;
}

.auth-footer nav {
  display: flex;
  gap: 16px;
}

.auth-footer a {
  color: inherit;
  text-decoration-color: rgb(138 131 117 / 35%);
  text-underline-offset: 2px;
}

.auth-footer > a {
  text-decoration: none;
}

.auth-root .cl-main:not(:has(.cl-otpCodeField))::after {
  display: block;
  padding-top: 14px;
  color: var(--ink-secondary);
  font-size: 13px;
  line-height: 19px;
}

.auth-root[data-mode="sign-in"] .cl-main:not(:has(.cl-otpCodeField))::after {
  content: "No password. We email you a six-digit code.";
}

.auth-root[data-mode="sign-up"] .cl-main:not(:has(.cl-otpCodeField))::after {
  content: "By continuing you agree to the terms and the privacy policy.";
  font-size: 12.5px;
  line-height: 18px;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-header {
  display: flex;
  flex-flow: row wrap;
  align-items: baseline;
  gap: 5px;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-headerTitle {
  width: 100%;
  font-size: 28px !important;
  letter-spacing: -0.03em !important;
  line-height: 34px !important;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-headerSubtitle {
  margin-top: 10px !important;
  font-size: 14px !important;
  line-height: 21px !important;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-identityPreview {
  margin-top: 0 !important;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-main {
  margin-top: 28px;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-form {
  align-items: flex-start !important;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-main .cl-footerAction {
  margin: 0 !important;
}

.auth-root .cl-card:has(.cl-otpCodeField) .cl-formButtonPrimary {
  display: none;
}

.auth-root .cl-otpCodeFieldInput:focus {
  border-color: var(--accent-deep) !important;
  box-shadow: 0 0 0 0.5px var(--accent-deep) !important;
}

@media (max-width: 640px) {
  .auth-root {
    padding: 24px;
  }

  .auth-stage {
    align-items: flex-start;
    padding-top: max(64px, 12svh);
  }

  .auth-root .cl-headerTitle {
    font-size: 34px !important;
    line-height: 40px !important;
  }
}

.status-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  background: rgb(38 35 26 / 6%);
  border-radius: var(--radius-pill);
}

.status-toggle span {
  display: grid;
  width: 20px;
  height: 20px;
  place-items: center;
  border-radius: var(--radius-pill);
  color: var(--ink-muted);
  font-size: 12px;
}

.status-toggle .is-selected {
  background: rgb(38 35 26 / 10%);
  color: var(--ink);
}

.main {
  min-width: 0;
  flex: 1;
}

.view-loading,
.view-error {
  display: grid;
  min-height: 100svh;
  place-items: center;
  padding: 40px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 12px;
}

.view-error > div {
  max-width: 480px;
  padding: 24px;
  background: var(--paper-card);
  border: 1px solid var(--paper-border);
  border-radius: var(--radius-card);
}

.view-error strong {
  display: block;
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
}

.chat-view {
  display: flex;
  min-height: 100svh;
  justify-content: center;
  padding: 22px 40px 0;
}

.chat-sheet {
  display: flex;
  width: min(100%, var(--chat));
  min-height: calc(100svh - 22px);
  flex-direction: column;
}

.live-indicator {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--accent-deep);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
}

.chat-thread {
  display: flex;
  min-height: 300px;
  flex: 1;
  flex-direction: column;
  gap: 24px;
  justify-content: flex-end;
  overflow-y: auto;
  padding: 34px 40px 18px;
  scroll-behavior: smooth;
}

.empty-chat {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
  text-align: center;
}

.empty-chat h1 {
  max-width: 520px;
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 38px;
}

.chat-turn {
  display: flex;
  flex-direction: column;
}

.chat-turn.is-user {
  align-items: flex-end;
  gap: 4px;
  padding-left: 120px;
  text-align: right;
}

.chat-turn.is-agent {
  align-items: flex-start;
  gap: 10px;
}

.turn-text {
  max-width: 560px;
  margin: 0;
  font-size: 17px;
  line-height: 25px;
  white-space: pre-wrap;
}

.turn-time {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
}

.tin-avatar {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  background: #e6e1d3;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 700;
  line-height: 18px;
}

.turn-typing {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 18px;
  padding: 1px 2px;
}

.turn-typing > span {
  width: 6px;
  height: 6px;
  background: var(--ink-secondary);
  border-radius: var(--radius-pill);
  opacity: 0.28;
  animation: tin-typing-wave 1.15s ease-in-out infinite;
}

.turn-typing > span:nth-child(2) {
  animation-delay: 120ms;
}

.turn-typing > span:nth-child(3) {
  animation-delay: 240ms;
}

@keyframes tin-typing-wave {
  0%,
  60%,
  100% {
    opacity: 0.28;
    transform: translateY(0);
  }

  30% {
    opacity: 0.82;
    transform: translateY(-2px);
  }
}

.run-receipt {
  display: flex;
  width: min(100%, 560px);
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgb(38 35 26 / 4%);
  border-radius: var(--radius-card);
}

.run-receipt code {
  min-width: 0;
  flex: 1;
  overflow: hidden;
  color: var(--ink-secondary);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.run-receipt a,
.run-receipt button {
  flex: 0 0 auto;
  padding: 0;
  background: transparent;
  color: var(--accent-text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
  cursor: pointer;
}

.chat-composer {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 36px 22px;
}

.attach-button,
.send-button {
  display: grid;
  flex: 0 0 auto;
  place-items: center;
  cursor: pointer;
}

.attach-button {
  width: 18px;
  height: 46px;
  padding: 0;
  background: transparent;
  color: var(--ink-muted);
}

.composer-field {
  min-height: 46px;
  max-height: 140px;
  flex: 1;
  resize: none;
  overflow-y: auto;
  padding: 13px 18px;
  background: var(--paper-well);
  border: 0;
  border-radius: 23px;
  font-size: 15px;
  line-height: 20px;
}

.composer-field::placeholder {
  color: var(--ink-muted);
}

.send-button {
  width: 46px;
  height: 46px;
  padding: 0;
  background: var(--accent-deep);
  border-radius: var(--radius-pill);
  color: #fffdf6;
  transition:
    background-color 140ms ease,
    transform 100ms ease;
}

.send-button:disabled {
  cursor: wait;
  opacity: 0.5;
}

.send-button svg,
.attach-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8px;
}

.workspace-view,
.activity-view,
.integrations-view {
  width: min(100%, calc(var(--work) + 80px));
  min-height: 100svh;
  margin: 0 auto;
  padding: 30px 40px 60px;
}

.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 28px;
}

.workspace-primary {
  min-width: 0;
}

.workspace-header {
  display: flex;
  align-items: center;
  min-height: 38px;
  gap: 16px;
  margin-bottom: 18px;
}

.workspace-header h1 {
  margin: 0;
  font-size: 32px;
  letter-spacing: -0.02em;
  line-height: 38px;
}

.workspace-header .header-spacer {
  flex: 1;
}

.search-field {
  position: relative;
  width: 220px;
  flex: 0 0 220px;
}

.search-field svg {
  position: absolute;
  top: 10px;
  left: 12px;
  width: 13px;
  height: 13px;
  fill: none;
  stroke: var(--ink-muted);
  stroke-linecap: round;
  stroke-width: 1.5px;
}

.search-field input {
  width: 100%;
  height: 34px;
  padding: 8px 12px 8px 33px;
  background: var(--paper-card);
  border: 1px solid var(--paper-border-strong);
  border-radius: var(--radius-chip);
  font-size: 13px;
  line-height: 16px;
}

.search-field input::placeholder {
  color: var(--ink-muted);
}

.button,
.button-secondary,
.button-quiet {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 8px 15px;
  border-radius: var(--radius-chip);
  font-size: 12.5px;
  line-height: 16px;
  text-decoration: none;
  cursor: pointer;
}

.button {
  background: var(--accent-deep);
  border-radius: var(--radius-pill);
  color: #fffdf6;
  font-weight: 700;
  transition:
    background-color 140ms ease,
    transform 100ms ease;
}

.button:disabled {
  cursor: wait;
  opacity: 0.55;
}

@media (hover: hover) {
  .button:not(:disabled):hover,
  .send-button:not(:disabled):hover {
    background: var(--accent-hover);
  }
}

.button:not(:disabled):active,
.send-button:not(:disabled):active {
  background: var(--accent-pressed);
  transform: translateY(1px);
}

.button-secondary {
  width: fit-content;
  align-self: flex-start;
  background: var(--paper-card);
  border: 1px solid rgb(38 35 26 / 25%);
  color: var(--ink);
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

.button-secondary:hover {
  background: var(--paper-well);
  border-color: rgb(38 35 26 / 35%);
}

.button-quiet {
  background: transparent;
  color: var(--ink-secondary);
}

.filters {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 18px;
}

.filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: transparent;
  border-radius: var(--radius-chip);
  color: var(--ink-secondary);
  font-size: 12.5px;
  line-height: 16px;
  cursor: pointer;
}

.filter.is-active {
  background: rgb(38 35 26 / 9%);
  color: var(--ink);
  font-weight: 700;
}

.workflow-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.needs-you-queue {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 18px;
  padding: 16px 20px;
  background: rgb(246 72 0 / 6%);
  border-radius: var(--radius-card);
}

.needs-you-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.needs-you-kicker {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.needs-you-dot {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  background: var(--hot);
  border-radius: var(--radius-pill);
}

.needs-you-kicker code {
  overflow: hidden;
  color: var(--hot);
  font-family: var(--mono);
  font-size: 11.5px;
  font-weight: 700;
  line-height: 15px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.needs-you-spacer {
  min-width: 8px;
  flex: 1;
}

.needs-you-kicker time,
.needs-you-row time,
.needs-you-overflow {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-weight: 400;
  white-space: nowrap;
}

.needs-you-kicker time {
  font-size: 11px;
  line-height: 15px;
}

.needs-you-head p {
  max-width: 640px;
  margin: 0;
  font-size: 15px;
  line-height: 22px;
}

.needs-you-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.needs-you-primary,
.markdown-context-action {
  padding: 11px 14px;
  background: var(--hot);
  border-radius: var(--radius-pill);
  color: #fffdf6;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 16px;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    transform 100ms ease;
}

.needs-you-secondary {
  padding: 8px 13px;
  background: var(--paper-card);
  border: 1px solid rgb(38 35 26 / 25%);
  border-radius: var(--radius-chip);
  font-size: 12.5px;
  line-height: 16px;
  cursor: pointer;
  transition:
    background-color 120ms ease,
    border-color 120ms ease;
}

@media (hover: hover) {
  .needs-you-primary:hover,
  .markdown-context-action:hover {
    background: #d94100;
  }

  .needs-you-secondary:hover {
    background: var(--paper-well);
    border-color: rgb(38 35 26 / 35%);
  }
}

.needs-you-primary:active,
.markdown-context-action:active {
  background: #bd3900;
  transform: translateY(1px);
}

.needs-you-rows {
  border-top: 1px solid rgb(38 35 26 / 10%);
}

.needs-you-row {
  display: grid;
  width: 100%;
  grid-template-columns: 7px 210px minmax(0, 1fr) max-content;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  background: transparent;
  border-bottom: 1px solid rgb(38 35 26 / 10%);
  text-align: left;
  cursor: pointer;
}

.needs-you-row:last-child {
  border-bottom: 0;
}

.needs-you-row-marker {
  width: 5px;
  height: 5px;
  justify-self: center;
  background: var(--hot);
  border-radius: var(--radius-pill);
}

.needs-you-row code {
  overflow: hidden;
  color: var(--ink-secondary);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 16px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.needs-you-row > span:nth-child(3) {
  overflow: hidden;
  font-size: 13.5px;
  line-height: 18px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.needs-you-row time {
  font-size: 10.5px;
  line-height: 14px;
}

.needs-you-row:hover code,
.needs-you-row:hover > span:nth-child(3) {
  color: var(--ink);
}

.needs-you-overflow {
  width: fit-content;
  padding: 0;
  background: transparent;
  font-size: 11px;
  line-height: 15px;
  text-decoration: underline;
  text-decoration-color: rgb(38 35 26 / 22%);
  text-underline-offset: 3px;
  cursor: pointer;
}

.workflow-card {
  display: grid;
  grid-template-columns: 8px minmax(220px, 1fr) minmax(100px, 150px) minmax(160px, 0.9fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 13px 18px;
  background: var(--paper-card);
  border: 1px solid rgb(38 35 26 / 10%);
  border-radius: var(--radius-card);
}

.workflow-card:hover {
  border-color: rgb(38 35 26 / 18%);
}

.workflow-identity {
  min-width: 0;
}

.workflow-identity strong,
.workflow-identity code {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-identity strong {
  margin-bottom: 1px;
  font-size: 14.5px;
  line-height: 18px;
}

.workflow-identity code,
.workflow-version,
.workflow-state {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
}

.workflow-version,
.workflow-state {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workflow-state {
  color: var(--ink-secondary);
}

.workflow-card .button {
  min-width: 64px;
}

.workflow-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.workflow-actions .button-quiet {
  min-height: 30px;
  padding: 6px 8px;
}

.workflow-review-mark {
  color: var(--hot);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  white-space: nowrap;
}

.empty-list {
  padding: 32px;
  border: 1px dashed var(--paper-border-strong);
  border-radius: var(--radius-card);
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 18px;
  text-align: center;
}

.side-stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.side-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  background: var(--paper-card);
  border: 1px solid rgb(38 35 26 / 10%);
  border-radius: var(--radius-card);
}

.side-panel h2 {
  margin: 0;
  font-size: 13px;
  line-height: 16px;
}

.side-panel p {
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
}

.terminal {
  padding: 14px 16px;
  background: var(--ink);
  border-radius: var(--radius-chip);
  color: #d9d2c4;
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 17px;
  white-space: pre-line;
}

.endpoint-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.endpoint {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--ink-secondary);
  font-family: var(--mono);
  font-size: 11.5px;
  line-height: 14px;
}

.endpoint .status-dot {
  width: 5px;
  height: 5px;
  flex-basis: 5px;
}

.metric-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.metric strong,
.metric span {
  display: block;
}

.metric strong {
  font-family: var(--mono);
  font-size: 26px;
  font-weight: 400;
  line-height: 30px;
}

.metric span {
  margin-top: 2px;
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 15px;
}

.metric.is-accent strong {
  color: var(--accent-text);
}

.metric.is-hot strong {
  color: var(--hot);
}

.activity-header {
  display: flex;
  min-height: 38px;
  align-items: center;
  gap: 17px;
  margin-bottom: 22px;
}

.activity-header h1 {
  margin: 0;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 32px;
}

.activity-header-spacer {
  min-width: 12px;
  flex: 1;
}

.activity-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
}

.activity-filter {
  padding: 5px 11px;
  background: transparent;
  border-radius: var(--radius-chip);
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 16px;
  cursor: pointer;
}

.activity-filter:hover {
  color: var(--ink);
}

.activity-filter.is-active {
  background: rgb(38 35 26 / 9%);
  color: var(--ink);
  font-weight: 700;
}

.activity-live {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 7px;
  color: var(--accent-text);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
}

.activity-live > span {
  width: 6px;
  height: 6px;
  flex: 0 0 6px;
  background: var(--accent-deep);
  border-radius: var(--radius-pill);
}

.activity-ledger {
  width: 100%;
}

.activity-day + .activity-day {
  margin-top: 12px;
}

.activity-day h2 {
  margin: 0;
  padding: 6px 0;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 400;
  line-height: 14px;
}

.activity-day-rows {
  border-bottom: 1px solid rgb(38 35 26 / 7%);
}

.activity-ledger-row {
  display: grid;
  grid-template-columns: 44px 14px 195px minmax(0, 1fr) max-content 70px;
  align-items: center;
  gap: 14px;
  min-height: 45px;
  padding: 8px 0;
  background: transparent;
  border-top: 1px solid rgb(38 35 26 / 7%);
  border-radius: 0;
}

.activity-ledger-row:hover {
  background: rgb(38 35 26 / 4%);
}

.activity-ledger-row time,
.activity-workflow,
.activity-ref {
  overflow: hidden;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.activity-ledger-row time {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  line-height: 15px;
}

.activity-workflow {
  color: var(--ink-secondary);
  font-size: 12px;
  line-height: 16px;
}

.activity-ledger-row.is-needs-you .activity-workflow {
  color: var(--hot);
  font-weight: 700;
}

.activity-ledger-row p {
  min-width: 0;
  margin: 0;
  color: var(--ink);
  font-size: 14px;
  line-height: 20px;
}

.activity-ledger-row.is-failed p {
  color: var(--ink-secondary);
}

.activity-action {
  min-width: 0;
}

.activity-action:empty {
  display: block;
}

.activity-action a,
.activity-action button {
  display: inline;
  padding: 0;
  background: transparent;
  color: var(--hot);
  font-size: 12px;
  font-weight: 700;
  line-height: 16px;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}

.activity-action a:hover,
.activity-action button:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.activity-ref {
  font-size: 10.5px;
  line-height: 14px;
  text-align: right;
}

.activity-marker {
  display: grid;
  width: 7px;
  height: 7px;
  place-items: center;
  justify-self: center;
  border-radius: var(--radius-pill);
}

.activity-marker.is-completed {
  background: var(--accent-deep);
}

.activity-marker.is-needs-you {
  background: var(--hot);
}

.activity-marker.is-founder {
  background: transparent;
  border: 1.5px solid rgb(38 35 26 / 35%);
}

.activity-marker.is-failed {
  width: 9px;
  height: 10px;
  color: #8a8375;
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 400;
  line-height: 9px;
}

.activity-empty {
  margin: 44px 0 0;
  color: var(--ink-secondary);
  font-size: 14px;
  line-height: 20px;
}

.activity-boundary {
  margin: 18px 0 0;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 14px;
  text-align: center;
}

.integration-empty {
  display: grid;
  min-height: 460px;
  margin-top: 18px;
  place-items: center;
  border-top: 1px solid var(--paper-border);
}

.integration-empty > div {
  max-width: 520px;
  text-align: center;
}

.integration-mark {
  display: grid;
  grid-template-columns: repeat(2, 24px);
  justify-content: center;
  gap: 6px;
  margin-bottom: 24px;
}

.integration-mark span {
  width: 24px;
  height: 24px;
  border: 1px solid var(--paper-border-strong);
  border-radius: var(--radius-chip);
}

.integration-empty h2 {
  margin: 0 0 10px;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 28px;
}

.integration-empty p {
  margin: 0;
  color: var(--ink-secondary);
  font-size: 15px;
  line-height: 22px;
}

.toast {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: 360px;
  padding: 11px 14px;
  transform: translateY(12px);
  background: var(--ink);
  border-radius: var(--radius-chip);
  color: #fdfcf8;
  font-size: 13px;
  line-height: 18px;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 140ms ease,
    transform 140ms ease;
}

.toast.is-visible {
  transform: translateY(0);
  opacity: 1;
}

@media (max-width: 1120px) {
  .workspace-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .side-stack {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .workflow-card {
    grid-template-columns: 8px minmax(200px, 1fr) minmax(90px, 120px) auto;
  }

  .workflow-description-slot {
    display: none;
  }
}

@media (max-width: 820px) {
  .app-shell {
    display: block;
  }

  .rail {
    z-index: 10;
    width: 100%;
    height: auto;
    min-height: 0;
    flex-flow: row wrap;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-right: 0;
    border-bottom: 1px solid var(--paper-border);
  }

  .wordmark {
    padding: 0 4px;
  }

  .project-switcher {
    width: auto;
    flex: 1;
    min-width: 180px;
    max-width: 280px;
    padding: 7px 10px;
  }

  .project-switcher small,
  .rail-runs,
  .rail-spacer,
  .rail-footer {
    display: none;
  }

  .nav-list {
    width: 100%;
    flex-direction: row;
    overflow-x: auto;
  }

  .nav-item {
    width: auto;
    flex: 0 0 auto;
    padding: 8px 10px;
  }

  .nav-item small {
    width: auto;
    flex-basis: auto;
  }

  .chat-view,
  .workspace-view,
  .activity-view,
  .integrations-view {
    min-height: calc(100svh - 116px);
  }

  .workspace-view,
  .activity-view,
  .integrations-view {
    padding: 24px 20px 48px;
  }

  .chat-view {
    padding: 0;
  }

  .chat-sheet {
    min-height: calc(100svh - 116px);
  }

  .chat-thread {
    padding-right: 20px;
    padding-left: 20px;
  }

  .chat-composer {
    padding-right: 16px;
    padding-left: 16px;
  }

  .workspace-header {
    flex-wrap: wrap;
  }

  .workspace-header h1 {
    flex: 1;
  }

  .search-field {
    order: 3;
    width: 100%;
    flex-basis: 100%;
  }

  .workflow-card {
    grid-template-columns: 8px minmax(0, 1fr) auto;
  }

  .needs-you-row {
    grid-template-columns: 7px minmax(130px, 180px) minmax(0, 1fr) max-content;
  }

  .workflow-version,
  .workflow-description-slot {
    display: none;
  }

  .side-stack {
    grid-template-columns: 1fr;
  }

  .activity-header {
    flex-wrap: wrap;
  }

  .activity-header-spacer {
    display: none;
  }

  .activity-live {
    margin-left: auto;
  }

  .activity-ledger-row {
    grid-template-columns: 44px 14px 150px minmax(180px, 1fr) max-content;
  }

  .activity-ref {
    display: none;
  }
}

@media (max-width: 560px) {
  .nav-item svg {
    display: none;
  }

  .nav-item {
    gap: 4px;
    font-size: 13px;
  }

  .chat-turn.is-user {
    padding-left: 40px;
  }

  .empty-chat h1,
  .workspace-header h1 {
    font-size: 28px;
    line-height: 34px;
  }

  .workflow-card {
    align-items: start;
  }

  .needs-you-queue {
    padding: 15px 16px;
  }

  .needs-you-kicker {
    flex-wrap: wrap;
  }

  .needs-you-spacer {
    display: none;
  }

  .needs-you-kicker time {
    width: 100%;
    padding-left: 16px;
  }

  .needs-you-row {
    grid-template-columns: 7px minmax(0, 1fr) max-content;
  }

  .needs-you-row > span:nth-child(3) {
    display: none;
  }

  .workflow-card .button {
    min-width: auto;
    padding: 7px 11px;
  }

  .workflow-actions .button-quiet {
    display: none;
  }

  .activity-header h1 {
    width: 100%;
  }

  .activity-filters {
    order: 3;
    width: 100%;
    overflow-x: auto;
    flex-wrap: nowrap;
  }

  .activity-ledger {
    overflow-x: auto;
  }

  .activity-day {
    min-width: 680px;
  }
}

/* Generic Markdown reader — Paper board 19 · MD Viewer — C · Reading nav */

.markdown-standalone-page,
.markdown-page-root,
.markdown-viewer {
  width: 100%;
  min-height: 100svh;
}

.markdown-standalone-page,
.markdown-viewer {
  overflow-x: clip;
}

.viewer-loading,
.viewer-error {
  display: grid;
  min-height: 100svh;
  place-content: center;
  gap: 6px;
  padding: 40px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 12px;
  line-height: 18px;
  text-align: center;
}

.viewer-error strong,
.viewer-error span {
  display: block;
}

.viewer-error strong {
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
}

.markdown-context-bar {
  position: sticky;
  z-index: 8;
  top: 0;
  display: flex;
  width: 100%;
  min-height: 45px;
  align-items: center;
  gap: 14px;
  padding: 14px 32px;
  background: var(--paper-bg);
  border-bottom: 1px solid rgb(38 35 26 / 10%);
}

.markdown-logo {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  text-decoration: none;
}

.markdown-logo img {
  display: block;
  width: auto;
  height: 18px;
}

.markdown-context-separator {
  width: 1px;
  height: 14px;
  flex: 0 0 1px;
  background: rgb(38 35 26 / 15%);
}

.markdown-return {
  display: inline-flex;
  align-items: center;
  padding: 0;
  background: transparent;
  color: var(--accent-text);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 16px;
  cursor: pointer;
}

.markdown-filename,
.markdown-reading-facts {
  overflow: hidden;
  font-family: var(--mono);
  font-weight: 400;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.markdown-filename {
  color: var(--ink);
  font-size: 12px;
  line-height: 16px;
}

.markdown-reading-facts {
  flex: 0 0 auto;
  color: var(--ink-muted);
  font-size: 11.5px;
  line-height: 14px;
}

.markdown-context-spacer {
  min-width: 8px;
  flex: 1;
}

.markdown-context-action {
  flex: 0 0 auto;
  padding: 7px 12px;
}

.markdown-viewer-body {
  position: relative;
  width: 100%;
}

.markdown-reader-layout {
  display: grid;
  width: 858px;
  grid-template-columns: 150px 680px;
  gap: 28px;
  margin: 0 auto;
  transform: translateX(-89px);
}

.markdown-section-map {
  min-width: 0;
  padding-top: 66px;
}

.markdown-section-map[hidden] {
  display: none;
}

.markdown-reader-layout.has-no-map {
  display: block;
  width: 680px;
  transform: none;
}

.markdown-section-map-inner {
  position: sticky;
  top: 69px;
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.markdown-section-link {
  width: 150px;
  padding: 0;
  overflow: hidden;
  background: transparent;
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 400;
  line-height: 18px;
  text-align: left;
  text-overflow: ellipsis;
  cursor: pointer;
}

.markdown-section-link:hover {
  color: var(--ink);
}

.markdown-section-link.is-current {
  color: var(--hot);
  font-weight: 700;
}

.markdown-document {
  min-width: 0;
  width: 680px;
  padding: 64px 0 96px;
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 27px;
}

.markdown-document h1,
.markdown-document h2,
.markdown-document h3,
.markdown-document h4,
.markdown-document h5,
.markdown-document h6 {
  color: var(--ink);
  font-family: var(--sans);
  scroll-margin-top: 72px;
}

.markdown-document h1 {
  margin: 0 0 22px;
  font-size: 40px;
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 46px;
}

.markdown-document h2 {
  margin: 4px 0 14px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 28px;
}

.markdown-document h3 {
  margin: 0 0 8px;
  padding-top: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
}

.markdown-document h4,
.markdown-document h5,
.markdown-document h6 {
  margin: 0 0 8px;
  padding-top: 8px;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.markdown-document p {
  margin: 0 0 18px;
}

.markdown-document h1 + p {
  margin-bottom: 28px;
}

.markdown-document strong {
  font-weight: 700;
}

.markdown-document s {
  color: var(--ink-muted);
  text-decoration-thickness: 1px;
}

.markdown-document a {
  color: var(--hot);
  text-decoration-color: rgb(246 72 0 / 35%);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  overflow-wrap: anywhere;
}

.markdown-document code {
  padding: 1px 7px;
  background: rgb(38 35 26 / 6%);
  border-radius: 3px;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 18px;
}

.markdown-document sub {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
}

.markdown-document blockquote {
  display: flex;
  gap: 18px;
  margin: 0 0 30px;
  padding: 0;
  color: var(--ink-secondary);
}

.markdown-document blockquote::before {
  width: 2px;
  flex: 0 0 2px;
  background: rgb(38 35 26 / 18%);
  border-radius: 1px;
  content: "";
}

.markdown-document blockquote p {
  margin: 0;
}

.markdown-document ul,
.markdown-document ol {
  margin: 0 0 30px;
}

.markdown-document ul {
  padding: 0;
  list-style: none;
}

.markdown-document ul > li {
  position: relative;
  padding-left: 34px;
}

.markdown-document ul > li::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  color: var(--ink-muted);
  content: "–";
}

.markdown-document li + li {
  margin-top: 9px;
}

.markdown-document ul ul {
  margin: 9px 0 0;
}

.markdown-document ul ul > li {
  padding-left: 34px;
}

.markdown-document ul ul > li::before {
  width: 14px;
  content: "·";
}

.markdown-document ol {
  padding-left: 34px;
}

.markdown-document ol > li {
  padding-left: 0;
}

.markdown-document ol > li::marker {
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 13px;
}

.markdown-document li.task-list-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding-left: 0;
}

.markdown-document li.task-list-item::before {
  display: none;
}

.markdown-document .task-list-item-checkbox {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  margin: 5px 0 0;
  appearance: none;
  background: var(--paper-card);
  border: 1.5px solid rgb(38 35 26 / 30%);
  border-radius: 3px;
}

.markdown-document .task-list-item-checkbox:checked {
  display: grid;
  place-content: center;
  background: var(--accent-deep);
  border-color: var(--accent-deep);
}

.markdown-document .task-list-item-checkbox:checked::after {
  width: 7px;
  height: 4px;
  transform: translateY(-1px) rotate(-45deg);
  border-bottom: 1.5px solid #fdfcf5;
  border-left: 1.5px solid #fdfcf5;
  content: "";
}

.markdown-document li.task-list-item:has(.task-list-item-checkbox:checked) {
  color: var(--ink-secondary);
}

.md-table-scroll {
  width: 100%;
  margin: 0 0 30px;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-color: rgb(38 35 26 / 20%) transparent;
  scrollbar-width: thin;
}

.md-table-scroll::-webkit-scrollbar,
.md-code-block pre::-webkit-scrollbar {
  height: 3px;
}

.md-table-scroll::-webkit-scrollbar-thumb,
.md-code-block pre::-webkit-scrollbar-thumb {
  background: rgb(38 35 26 / 20%);
  border-radius: 2px;
}

.markdown-document table {
  width: max-content;
  min-width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
  font-size: 13.5px;
  line-height: 19px;
}

.markdown-document th,
.markdown-document td {
  min-width: 110px;
  max-width: 320px;
  padding: 8px 10px;
  border-bottom: 1px solid rgb(38 35 26 / 7%);
  text-align: left;
  vertical-align: top;
}

.markdown-document th {
  padding-top: 7px;
  padding-bottom: 7px;
  background: rgb(38 35 26 / 4.5%);
  border-bottom-color: rgb(38 35 26 / 16%);
  color: var(--ink-secondary);
  font-size: 13px;
  font-weight: 700;
  line-height: 16px;
}

.markdown-document th:first-child {
  border-top-left-radius: 3px;
}

.markdown-document th:last-child {
  border-top-right-radius: 3px;
}

.markdown-document td.is-numeric {
  font-family: var(--mono);
  font-size: 12.5px;
  text-align: right;
  white-space: nowrap;
}

.md-code-block {
  position: relative;
  margin: 0 0 30px;
  padding: 34px 16px 10px;
  overflow: hidden;
  background: var(--ink);
  border-radius: 4px;
}

.md-code-block[data-language]::before {
  position: absolute;
  top: 12px;
  right: 16px;
  color: rgb(217 210 196 / 50%);
  content: attr(data-language);
  font-family: var(--mono);
  font-size: 10.5px;
  line-height: 14px;
}

.md-code-block pre {
  margin: 0;
  padding: 0 0 8px;
  overflow-x: auto;
  scrollbar-color: rgb(246 241 231 / 22%) transparent;
  scrollbar-width: thin;
}

.markdown-document .md-code-block code {
  display: block;
  width: max-content;
  min-width: 100%;
  padding: 0;
  background: transparent;
  border-radius: 0;
  color: #d9d2c4;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 19px;
  white-space: pre;
}

.markdown-document hr {
  height: 1px;
  margin: 34px 0;
  background: rgb(38 35 26 / 12%);
  border: 0;
}

.markdown-document img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0 auto 30px;
  border-radius: 4px;
}

.md-image-fallback {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 30px;
  background: var(--paper-deep);
  border-radius: 4px;
  color: var(--ink-muted);
  font-family: var(--mono);
  font-size: 11px;
  line-height: 14px;
  text-align: center;
}

.md-image-fallback svg {
  width: 28px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-linejoin: round;
  stroke-width: 1.5px;
}

@media (max-width: 1199px) {
  .markdown-context-bar .markdown-return,
  .markdown-context-bar .markdown-context-separator {
    display: none;
  }

  .markdown-reader-layout {
    display: block;
    width: 680px;
    transform: none;
  }

  .markdown-section-map {
    display: none;
  }
}

@media (max-width: 820px) {
  .markdown-viewer.is-in-app .markdown-context-bar {
    top: 104px;
  }
}

@media (max-width: 760px) {
  .markdown-context-bar {
    gap: 12px;
    padding: 14px 20px;
  }

  .markdown-filename {
    min-width: 0;
  }

  .markdown-reading-facts {
    display: none;
  }

  .markdown-context-spacer {
    min-width: 0;
  }

  .markdown-reader-layout,
  .markdown-reader-layout.has-no-map,
  .markdown-document {
    width: 100%;
  }

  .markdown-document {
    padding: 48px 20px 72px;
    font-size: 16px;
    line-height: 26px;
  }

  .markdown-document h1 {
    font-size: 32px;
    line-height: 38px;
  }

  .markdown-document code {
    font-size: 13px;
  }

  .md-image-fallback {
    min-height: 220px;
  }
}