.user-menu {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
}

.user-menu__sign-in {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-primary);
  color: var(--text-on-accent, #fafafa);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 600;
  transition: background-color 0.2s;
}

.user-menu__sign-in:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.user-menu__sign-in:disabled {
  opacity: 0.85;
  cursor: wait;
}

.user-menu__container {
  position: relative;
}

.user-menu__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  background: none;
  border: none;
  border-radius: var(--radius);
  transition: background-color 0.15s;
}

.user-menu__trigger:hover {
  background: var(--color-surface-hover);
}

.user-menu__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
}

.user-menu__avatar-fallback {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--text-on-accent, #fafafa);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.user-menu__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.user-menu__dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 4px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  min-width: 180px;
  z-index: 100;
  padding: 4px;
}

.user-menu__dropdown-info {
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border-light);
  margin-bottom: 4px;
}

.user-menu__dropdown-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.user-menu__dropdown-email {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-top: 2px;
}

.user-menu__dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  transition: background-color 0.15s;
}

.user-menu__dropdown-item:hover:not(:disabled) {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.user-menu__dropdown-item:disabled {
  opacity: 0.7;
  cursor: wait;
}

.user-menu__spinner {
  animation: user-menu-spin 1s linear infinite;
}

@keyframes user-menu-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.user-menu__dropdown-divider {
  height: 1px;
  background: var(--color-border-light);
  margin: 4px 0;
}

.user-menu--sidebar-collapsed .user-menu__trigger {
  justify-content: center;
  padding: 8px;
  width: 100%;
}

.user-menu--sidebar-collapsed .user-menu__name {
  display: none;
}

.user-menu--sidebar-collapsed .user-menu__sign-in {
  min-width: auto;
}

.user-menu__sheet {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  pointer-events: none;
}

.user-menu__backdrop {
  display: none;
}

.user-menu__sheet .user-menu__backdrop {
  display: block;
  position: absolute;
  inset: 0;
  border: none;
  padding: 0;
  margin: 0;
  background: rgba(15, 23, 42, 0.35);
  cursor: default;
  pointer-events: auto;
}

.user-menu__sheet .user-menu__dropdown {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  bottom: auto;
  margin: 0;
  min-width: unset;
  max-width: none;
  width: 100%;
  /* This sheet is anchored to the bottom; without a cap a tall menu would push its top off-screen.
     Cap to the visible viewport and scroll internally so the top stays reachable. */
  max-height: calc(100dvh - 1rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 16px 16px 0 0;
  border-bottom: none;
  padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
  box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
  pointer-events: auto;
  animation: user-menu-sheet-in 0.2s ease-out;
}

@media (max-width: 768px) {
  .user-menu__name {
    display: none;
  }

  .user-menu__trigger {
    justify-content: center;
    padding: 6px;
    gap: 0;
  }

  .user-menu__sheet .user-menu__dropdown-info {
    padding: 12px 14px;
  }

  .user-menu__sheet .user-menu__dropdown-item {
    padding: 12px 14px;
    font-size: 15px;
  }
}

@keyframes user-menu-sheet-in {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
.markdown-lite {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.markdown-lite > *:first-child {
  margin-top: 0;
}

.markdown-lite > *:last-child {
  margin-bottom: 0;
}

.markdown-lite__hr {
  margin: 12px 0;
  border: none;
  border-top: 1px solid var(--color-border-light, #e5e7eb);
}

.markdown-lite__heading {
  margin: 16px 0 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--color-text-primary);
}

.markdown-lite__paragraph {
  margin: 0 0 10px;
}

.markdown-lite__list {
  margin: 0 0 10px;
  padding-left: 20px;
}

/* Tailwind's preflight resets `list-style: none` on ul/ol globally, so the markers must be
   restored explicitly here or bullets/numbers won't render. */
ul.markdown-lite__list {
  list-style: disc outside;
}

ol.markdown-lite__list {
  list-style: decimal outside;
}

.markdown-lite__list li {
  margin: 2px 0;
}

.markdown-lite__code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.92em;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
}

.markdown-lite__pre {
  margin: 0 0 10px;
  padding: 10px 12px;
  overflow-x: auto;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm, 6px);
}

.markdown-lite__pre code {
  font: inherit;
  background: none;
  border: none;
  padding: 0;
}
/* New-project flow — guided single page. Every configuration option is visible in a
   numbered block (nothing hidden in accordions except rarely-used Advanced options),
   with a sticky "What happens next" rail that sets expectations before the user commits.
   Prefix: .np- */

.np {
  --np-accent: var(--color-primary);
  /* Breathing room between the create button and the bottom of the page. */
  padding-bottom: 72px;
}

/* The QA-config controls (scope, polish passes, logins, toggles) are shared with pages that have no
   .np page root — notably the GitHub setup page, which renders them inside .settings-section. Define
   the --np-accent token on each control root so they stay self-contained and render correctly
   anywhere (mirrors GhSelect.css). Without this, `var(--np-accent)` is undefined off the .np root and
   e.g. a checked toggle's accent background collapses to transparent. */
.np-scope-mode,
.np-chips,
.np-textarea,
.np-passes,
.np-toggle,
.np-logins,
.np-budget {
  --np-accent: var(--color-primary);
}

/* Credit budget control */
.np-budget__row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.np-budget__custom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
/* Combined selector so the fixed width wins over the generic `.np-input { width: 100% }` rule
   below — otherwise the input stretches and shoves the "credits" label past the row's edge. */
.np-input.np-budget__input {
  width: 96px;
  flex: 0 0 auto;
  /* Plain text input — strip the number spinner just in case a UA shows one. */
  -moz-appearance: textfield;
  appearance: textfield;
}
.np-budget__input::-webkit-outer-spin-button,
.np-budget__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.np-budget__unit {
  font-size: 13px;
  color: var(--color-text-secondary);
}
.np-budget__avail {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
}
.np-budget__avail svg {
  color: var(--color-text-muted);
}

/* The form footer's create button is the page's primary action — make it unmissable. */
.np-foot .np-submit {
  height: 48px;
  padding: 0 32px;
  font-size: 15px;
  font-weight: 600;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--np-accent, var(--color-primary)) 35%, transparent);
}

/* Layout: single column, or form + sticky rail */
.np-single {
  max-width: 720px;
  margin: 0 auto;
}
.np-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 28px;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}
.np-split__aside {
  position: sticky;
  top: 16px;
}
@media (max-width: 980px) {
  .np-split {
    grid-template-columns: 1fr;
  }
  .np-split__aside {
    position: static;
  }
}

/* Card surface */
.np-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

/* Header block */
.np-block--header {
  border-bottom: 1px solid var(--color-border);
}
.np-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}
.np-title {
  margin: 0;
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: var(--color-text-primary);
}
.np-lead {
  margin: 8px 0 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 560px;
}
.np-lead strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

.np-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0;
  margin-bottom: 14px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.np-back:hover {
  color: var(--color-text-primary);
}

/* Agent CTA banner */
.np-agentcta {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  text-align: left;
  margin-top: 16px;
  padding: 13px 14px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-brand) 5%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-brand) 22%, transparent);
  font-family: inherit;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease;
}
.np-agentcta--share {
  margin-top: 10px;
}
.np-agentcta:hover {
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
  border-color: color-mix(in srgb, var(--color-brand) 38%, transparent);
}
.np-agentcta__icon {
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand);
}
.np-agentcta__txt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.np-agentcta__title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.np-agentcta__action {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-brand-text);
}
.np-agentcta__action svg {
  transition: transform 150ms ease;
}
.np-agentcta:hover .np-agentcta__action svg {
  transform: translateX(2px);
}
@media (max-width: 560px) {
  .np-agentcta {
    flex-wrap: wrap;
  }
  .np-agentcta__action {
    width: 100%;
    justify-content: flex-end;
  }
}

/* Agent prompt modal */
.np-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  padding: 24px;
  display: flex;
  /* Center the dialog, but keep it reachable when it's taller than the viewport (common on mobile):
     overflow-y makes the overlay scrollable, and the dialog's `margin: auto` centers it while
     collapsing to 0 on overflow — so the dialog aligns to the top instead of being cropped. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--overlay-scrim);
  animation: np-fade 150ms ease;
}
@keyframes np-fade {
  from {
    opacity: 0;
  }
}
.np-modal {
  width: 100%;
  max-width: 660px;
  max-height: calc(100vh - 48px);
  /* dvh tracks the mobile browser chrome (URL bar) — with plain vh the modal sizes to the
     larger layout viewport and its footer/scroll area lands off-screen. */
  max-height: calc(100dvh - 48px);
  /* Auto margins center the modal while collapsing to 0 when it's taller than the viewport, so its
     top stays reachable (the overlay scrolls) instead of being cropped. */
  margin: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-modal);
  animation: np-pop 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes np-pop {
  from {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}
.np-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 18px;
}
.np-modal__heading {
  display: flex;
  gap: 13px;
}
.np-modal__icon {
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-code-bg);
  color: var(--color-code-text);
}
.np-modal__title {
  margin: 0;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}
.np-modal__lead {
  margin: 6px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  max-width: 52ch;
}
.np-modal__close {
  flex: none;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  color: var(--color-text-muted);
  cursor: pointer;
}
.np-modal__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}
.np-modal__body {
  padding: 0 24px;
  overflow-y: auto;
  min-height: 0;
  -webkit-overflow-scrolling: touch;
}
.np-modal__foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 18px 24px 22px;
}

.np-prompt {
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-code-bg);
}
.np-prompt__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 14px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.np-prompt__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
}
.np-prompt__copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 11px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: #e2e8f0;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.np-prompt__copy:hover {
  background: rgba(255, 255, 255, 0.16);
}
.np-prompt__copy--done {
  color: #86efac;
}
/* Collapsed by default: clamp the prompt to a few lines with a fade-out at the bottom so
   the dialog stays short. Expanding fully removes the clamp so the whole prompt is shown
   at once with no inner scrollbar — the modal body grows to fit (only the outer body
   scrolls, and only if the viewport can't fit everything). */
.np-prompt__body {
  position: relative;
  max-height: 7.4em; /* ~4 lines of the prompt at the line-height below */
  overflow: hidden;
}
.np-prompt__body--expanded {
  max-height: none;
  overflow: visible;
}
.np-prompt__fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--color-code-bg));
}
.np-prompt__text {
  margin: 0;
  padding: 16px 18px;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--color-code-text);
  white-space: pre-wrap;
  word-break: break-word;
}
.np-prompt__expand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  justify-content: center;
  padding: 9px 14px;
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.04);
  color: #cbd5e1;
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 150ms ease, color 150ms ease;
}
.np-prompt__expand:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #f1f5f9;
}

/* API-token block beneath the agent prompt — reuses the shared <ApiTokenControls> UI
   (settings-token__* styles) so generating a token here matches user settings exactly. */
.np-agent-token {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, rgba(15, 23, 42, 0.1));
}
.np-agent-token__head {
  margin-bottom: 14px;
}
.np-agent-token__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text, #0f172a);
}
.np-agent-token__lead {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--color-text-muted, #64748b);
}

/* Small screens: tighten the chrome and collapse to a single scroller — the fixed-height
   inner <pre> scroller fights the body scroller on touch, so let the prompt grow and the
   modal body scroll it all. */
@media (max-width: 640px) {
  .np-overlay {
    padding: 10px;
  }
  .np-modal {
    max-height: calc(100vh - 20px);
    max-height: calc(100dvh - 20px);
  }
  .np-modal__head {
    padding: 16px 16px 12px;
  }
  .np-modal__body {
    padding: 0 16px;
  }
  .np-modal__foot {
    padding: 14px 16px 16px;
  }
  .np-prompt__text {
    max-height: none;
    overflow-y: visible;
  }
}

/* Sharing-program modal: numbered how-it-works steps */
.np-sharing-steps {
  margin: 0;
  padding: 2px 0 6px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--color-text-primary);
}

/* The two "ways to QA for free" cards in the free-QA modal. */
.np-free-ways {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.np-free-way {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  background: var(--color-surface-secondary);
}

.np-free-way__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-pill);
  color: var(--color-brand);
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
}

.np-free-way__title {
  margin: 2px 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.np-free-way__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

/* Numbered section block */
.np-block {
  padding: 20px 24px;
}
.np-block + .np-block {
  border-top: 1px solid var(--color-border-light);
}
.np-block--header + .np-block {
  border-top: none;
}
.np-block__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.np-step-num {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  transition: background 150ms ease, color 150ms ease, border-color 150ms ease;
}
.np-block--done .np-step-num {
  background: var(--np-accent);
  border-color: var(--np-accent);
  color: var(--text-on-accent);
}
.np-block__titles {
  flex: 1;
  min-width: 0;
}
.np-block__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 8px;
}
.np-optional {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}
.np-block__hint {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 3px;
}
.np-block__field {
  margin-top: 14px;
  padding-left: 36px;
}
@media (max-width: 640px) {
  .np-block {
    padding: 16px;
  }
  .np-block__field {
    padding-left: 0;
  }
}

/* Fields */
.np-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.np-field + .np-field {
  margin-top: 16px;
}
.np-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  letter-spacing: -0.01em;
}
/* The combined scope block stacks mode buttons, optional area chips, the instructions
   textarea, and a hint — space the textarea and hint off whatever sits above them. */
.np-textarea--scope {
  margin-top: 12px;
}
.np-textarea--scope + .np-field-hint {
  margin-top: 8px;
}

.np-field-hint {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.np-field-hint--spaced {
  margin-top: 8px;
}
.np-field-hint--toggle {
  padding-left: 46px;
}
.np-field-error {
  font-size: 12px;
  color: var(--color-danger);
}

/* GitHub configuration step extras (the dropdown itself is the shared GhSelect — see GhSelect.css). */
.np-select-suburl {
  margin-top: 8px;
}
.np-gh-toggles {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.np-gh-connect {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.np-gh-connect__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
}

.np-input,
.np-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
  resize: vertical;
  line-height: 1.5;
}
.np-input:hover,
.np-textarea:hover {
  background: var(--color-surface);
}
.np-input:focus,
.np-textarea:focus {
  outline: none;
  border-color: var(--np-accent);
  background: var(--color-surface);
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px color-mix(in srgb, var(--np-accent) 35%, transparent);
}
.np-input:disabled,
.np-textarea:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* URL field with leading icon + validity tick */
.np-url-field {
  position: relative;
}
.np-url-field__lead {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}
.np-url-field .np-input {
  padding-left: 36px;
  padding-right: 40px;
}
.np-url-tick {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-status-active);
  opacity: 0;
  transition: opacity 150ms ease;
}
.np-url-field--valid .np-url-tick {
  opacity: 1;
}

/* Name field with auto tag */
.np-name-row {
  position: relative;
}
.np-input--name {
  padding-right: 96px;
}
.np-auto-tag {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 2px 9px;
}

/* Scope mode + chips */
.np-scope-mode {
  display: inline-flex;
  gap: 2px;
  padding: 2px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.np-scope-mode__btn {
  padding: 6px 14px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-secondary);
  background: transparent;
  cursor: pointer;
  transition: all 120ms ease;
}
.np-scope-mode__btn--active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  /* The active chip sits on a near-identical `--color-surface-secondary` track, so the default
     card shadow alone left the selection hard to discern. A crisp inset ring plus a stronger
     drop shadow make the selected option clearly stand out without shifting layout. */
  box-shadow:
    inset 0 0 0 1px var(--color-border),
    0 1px 3px rgba(0, 0, 0, 0.12);
}
.np-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.np-chip {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px 7px 11px;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 120ms ease;
}
.np-chip svg {
  color: var(--color-text-muted);
  transition: color 120ms ease;
}
.np-chip:hover {
  border-color: color-mix(in srgb, var(--color-text-primary) 22%, var(--color-border));
  color: var(--color-text-primary);
}
.np-chip--on {
  background: color-mix(in srgb, var(--np-accent) 8%, var(--color-surface));
  border-color: var(--np-accent);
  color: var(--color-text-primary);
}
.np-chip--on svg {
  color: var(--np-accent);
}

/* Polish passes (toggle list) */
.np-passes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px 20px;
}
.np-pass {
  padding: 6px 0;
}
@media (max-width: 640px) {
  .np-passes {
    grid-template-columns: 1fr;
  }
}
.np-pass__txt {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.np-pass__name {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}
.np-pass__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  font-weight: 400;
}

/* Toggle switch (real checkbox for a11y + tests) */
.np-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  cursor: pointer;
  user-select: none;
}
.np-toggle--top {
  align-items: flex-start;
  gap: 14px;
}
.np-toggle--top input[type='checkbox'] {
  margin-top: 2px;
}
.np-toggle input[type='checkbox'] {
  position: relative;
  width: 36px;
  height: 20px;
  appearance: none;
  background: var(--color-border);
  border-radius: 10px;
  cursor: pointer;
  transition: background 150ms ease;
  flex-shrink: 0;
}
.np-toggle input[type='checkbox']::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  transition: transform 150ms ease;
}
.np-toggle input[type='checkbox']:checked {
  background: var(--np-accent);
}
.np-toggle input[type='checkbox']:checked::after {
  transform: translateX(16px);
}
.np-toggle:hover input[type='checkbox']:not(:checked) {
  background: color-mix(in srgb, var(--color-text-primary) 18%, var(--color-border));
}

/* Login rows */
.np-logins {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.np-login-row {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 8px;
  align-items: start;
}
.np-login-row .np-input {
  padding: 8px 11px;
  font-size: 13px;
}
.np-login-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
/* Masked password field with an inline show/hide button (chat login form). */
.np-login-field--password {
  position: relative;
}
.np-login-field--password .np-input {
  padding-right: 34px;
}
.np-login-reveal {
  position: absolute;
  top: 0;
  right: 0;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}
.np-login-reveal:hover:not(:disabled) {
  color: var(--color-text-primary);
}
.np-login-reveal:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}
.np-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  background: transparent;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 120ms ease;
}
.np-icon-btn:hover {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}
.np-add-row {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  align-self: flex-start;
  padding: 8px 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-secondary);
  background: var(--color-surface-secondary);
  cursor: pointer;
  transition: all 120ms ease;
}
.np-add-row:hover {
  border-color: var(--np-accent);
  color: var(--color-text-primary);
}
.np-login-note {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
@media (max-width: 640px) {
  .np-login-row {
    grid-template-columns: 1fr auto;
  }
  .np-login-row .np-login-field:first-child {
    grid-column: 1 / -1;
  }
}

/* Advanced disclosure (rare options stay out of the numbered flow) */
.np-block--advanced {
  padding-top: 14px;
  padding-bottom: 14px;
}
.np-advanced-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.np-advanced-toggle:hover {
  color: var(--color-text-primary);
}
.np-advanced {
  margin-top: 16px;
  padding-left: 22px;
}

/* Errors */
.np-error {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius);
  font-size: 13px;
}
.np-error__dismiss {
  flex-shrink: 0;
  background: none;
  border: none;
  color: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.7;
}
.np-error__dismiss:hover {
  opacity: 1;
}

.np-callout {
  margin: 0 0 18px;
  padding: 12px 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius);
}
.np-callout__link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--color-text-primary);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Action footer */
.np-foot {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 24px 24px;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}
.np-foot__summary {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}
.np-foot__summary b {
  color: var(--color-text-primary);
  font-weight: 600;
}
.np-foot__spacer {
  flex: 1;
}
.np-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 22px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--np-accent, var(--color-primary));
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 150ms ease, opacity 150ms ease;
  flex-shrink: 0;
}
.np-submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
}
.np-submit:focus-visible {
  outline: 2px solid var(--np-accent);
  outline-offset: 2px;
}
.np-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
@media (max-width: 640px) {
  .np-foot {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }
}

.np-spin {
  animation: np-spin 1s linear infinite;
}
@keyframes np-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* What happens next (expectation-setter rail) */
.np-whn {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}
.np-whn__head {
  padding: 16px 18px 12px;
  border-bottom: 1px solid var(--color-border-light);
}
.np-whn__title {
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
}
.np-whn__title svg {
  color: var(--color-text-secondary);
}
.np-whn__sub {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 5px;
}
.np-whn__steps {
  padding: 6px 18px 16px;
}
.np-whn-step {
  display: flex;
  gap: 12px;
  padding: 11px 0;
  position: relative;
}
.np-whn-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: -3px;
  width: 1px;
  background: var(--color-border);
}
.np-whn-step__num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
.np-whn-step__body {
  padding-top: 2px;
}
.np-whn-step__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}
.np-whn-step__desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin-top: 2px;
}
.np-whn__foot {
  padding: 12px 18px;
  background: var(--color-surface-secondary);
  border-top: 1px solid var(--color-border-light);
  font-size: 12px;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  gap: 8px;
  line-height: 1.45;
}
.np-whn__foot svg {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

/* Entrance for revealed blocks */
.np-reveal {
  animation: np-reveal 220ms ease both;
}
@keyframes np-reveal {
  from {
    opacity: 0;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* Shared styling for the chat UI (message list, bubbles, composer). Used by the chat-based
   onboarding (OnboardingChat) and the project overview chat sidebar (ProjectChat). BEM-ish, scoped
   under .chat-* so it composes into either host without leaking. */

/* MessageScroller.Root — fills the available height and anchors the scroll-to-latest button. */
.chat-scroller {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* MessageScroller.Viewport — the scrolling element. */
.chat-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* MessageScroller.Content — the transcript column. min-height keeps a short conversation pinned to
   the bottom so the live edge sits where the reader expects it. */
.chat-log__content {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  min-height: 100%;
}

.chat-log__item {
  min-width: 0;
}

/* Scroll-to-latest button (MessageScroller.Button) — hidden while already at the live edge. */
.chat-scroll-btn {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.14);
  cursor: pointer;
  z-index: 2;
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.chat-scroll-btn:hover {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
}

.chat-scroll-btn[data-active="false"] {
  opacity: 0;
  pointer-events: none;
  transform: translateX(-50%) translateY(8px);
}

/* A message row (nut.new-style): a wide column (~95%) rather than a compact bubble. The user turn is
   right-aligned on a subtle surface card; the assistant turn is left-aligned prose with no card
   chrome. A copy button fades in on hover at the trailing edge. */
.chat-msg {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 95%;
  max-width: 95%;
  font-size: 0.9rem;
  line-height: 1.5;
}

.chat-msg--user {
  margin-left: auto;
  align-items: stretch;
}

.chat-msg--assistant {
  margin-right: auto;
}

.chat-msg__body {
  word-break: break-word;
}

.chat-msg--user .chat-msg__body {
  padding: 10px 14px;
  border-radius: var(--radius-lg);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  white-space: pre-wrap;
}

.chat-msg--assistant .chat-msg__body {
  color: var(--color-text-primary);
}

/* MarkdownLite content shouldn't add its own outer margins inside a message. */
.chat-msg__md > :first-child { margin-top: 0; }
.chat-msg__md > :last-child { margin-bottom: 0; }
.chat-msg__md p { margin: 0 0 0.5em; }
.chat-msg__md ul, .chat-msg__md ol { margin: 0.25em 0; padding-left: 1.2em; }

/* Hover action row (copy). Hidden until the row is hovered/focused. */
.chat-msg__actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.15s ease;
}

.chat-msg--user .chat-msg__actions { justify-content: flex-end; }
.chat-msg--assistant .chat-msg__actions { justify-content: flex-start; }

.chat-msg:hover .chat-msg__actions,
.chat-msg:focus-within .chat-msg__actions {
  opacity: 1;
}

.chat-msg__copy {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-msg__copy:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* Pending / typing indicator — a left-aligned row of animated dots with a status label. */
.chat-pending {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 2px 0;
}

.chat-pending__label {
  color: var(--color-text-muted);
  font-size: 0.82rem;
  font-weight: 500;
}

/* Three-dot typing animation (nut.new PendingIndicator: pulsing brand dots). */
.chat-typing { display: inline-flex; gap: 5px; align-items: center; }
.chat-typing span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-brand, #f02d5e);
  animation: chat-typing-pulse 1.2s infinite ease-in-out both;
}
.chat-typing span:nth-child(1) { animation-delay: 0s; }
.chat-typing span:nth-child(2) { animation-delay: 0.15s; }
.chat-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chat-typing-pulse {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-typing span { animation: none; }
}

/* Composer (nut.new MessageInput): a bordered container wrapping a borderless auto-growing textarea
   over a bottom control bar with a pill Send button. */
.chat-input {
  display: flex;
  flex-direction: column;
  margin: 10px 12px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  /* The whole box focuses the textarea on click (see ChatInput), so show a text caret over it. */
  cursor: text;
}

.chat-input:focus-within {
  border-color: var(--color-brand, #f02d5e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand, #f02d5e) 14%, transparent);
}

.chat-input__textarea {
  width: 100%;
  resize: none;
  border: none;
  background: transparent;
  padding: 12px 14px 4px;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--color-text-primary);
  max-height: 200px;
  overflow-y: auto;
}

.chat-input__textarea:focus { outline: none; }
.chat-input__textarea::placeholder { color: var(--color-text-muted); }

/* Single-row composer (ChatInput inline): field + send button side by side, kept to one line so a
   short URL doesn't render as two. The field never wraps — a long URL scrolls horizontally. */
.chat-input--inline {
  flex-direction: row;
  align-items: center;
}

.chat-input--inline .chat-input__textarea {
  flex: 1 1 auto;
  min-width: 0;
  padding: 12px 4px 12px 14px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.chat-input--inline .chat-input__bar {
  flex: 0 0 auto;
  padding: 6px 8px;
}

/* Keep the send label on one line in the single-row layout. */
.chat-input--inline .chat-input__send {
  white-space: nowrap;
}

.chat-input__bar {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 6px 8px 8px;
}

.chat-input__send {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: none;
  border-radius: var(--radius-pill);
  padding: 7px 16px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  background: var(--color-text-primary);
  color: var(--color-surface);
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.1s ease;
}

.chat-input__send-hint {
  font-size: 0.78rem;
  font-weight: 500;
  opacity: 0.6;
}

.chat-input__send:hover:not(:disabled) { transform: translateY(-1px); }
.chat-input__send:disabled { opacity: 0.4; cursor: not-allowed; }

.chat-empty {
  color: var(--color-text-muted);
  font-size: 0.88rem;
  text-align: center;
  padding: 24px 12px;
}

/* Inline clickable choices the agent (or a login-wall flow) offers instead of free-text. */
.chat-choices {
  margin: -4px 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-choices__prompt {
  margin: 0;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.chat-choices__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Each option is its own full-width row: an icon, a label + description, and a chevron affordance. */
.chat-choice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.1s ease;
}

.chat-choice:hover:not(:disabled) {
  border-color: var(--color-brand, #f02d5e);
  background: var(--color-surface-secondary);
  transform: translateY(-1px);
}

.chat-choice:focus-visible {
  outline: none;
  border-color: var(--color-brand, #f02d5e);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-brand, #f02d5e) 30%, transparent);
}

.chat-choice:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.chat-choice__icon {
  display: inline-flex;
  flex: 0 0 auto;
  margin-top: 1px;
  color: var(--color-brand, #f02d5e);
}

.chat-choice__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.chat-choice__label {
  font-size: 0.9rem;
  font-weight: 600;
}

.chat-choice__desc {
  font-size: 0.8rem;
  line-height: 1.4;
  color: var(--color-text-secondary);
}

.chat-choice__chevron {
  flex: 0 0 auto;
  align-self: center;
  color: var(--color-text-muted);
  transition: transform 0.15s ease, color 0.15s ease;
}

.chat-choice:hover:not(:disabled) .chat-choice__chevron {
  color: var(--color-brand, #f02d5e);
  transform: translateX(2px);
}

/* Reverse-proxy setup card, rendered inside the project chat (ReverseProxyChatCard). Compact, scoped
   to the narrow chat column. States: awaiting-frpc/provisioning (default), --ready, --warn. */
.rp-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-secondary);
  padding: 12px 14px;
}

.rp-card--ready {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  border-color: color-mix(in srgb, var(--color-success, #16a34a) 45%, var(--color-border));
}

.rp-card--warn {
  border-color: color-mix(in srgb, var(--color-brand, #f02d5e) 45%, var(--color-border));
}

.rp-card__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.rp-card__icon {
  flex: 0 0 auto;
  color: var(--color-text-secondary);
}

.rp-card__icon--ok { color: var(--color-success, #16a34a); }

.rp-card__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.rp-card__title {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.rp-card__text {
  margin: 0;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.rp-card__text code,
.rp-card__title code {
  font-size: 0.92em;
  word-break: break-all;
}

.rp-card__actions {
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

/* Close (X) button in a card head — pushed to the trailing edge. Used by the project GitHub panel. */
.rp-card__dismiss {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.rp-card__dismiss:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* Repo URL field in the project GitHub connect panel. */
.rp-card__field {
  margin-top: 10px;
}

.rp-card__input {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font: inherit;
  font-size: 0.82rem;
}

.rp-card__input:focus {
  outline: none;
  border-color: var(--color-brand, #f02d5e);
}

.rp-card__copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-text-primary);
  color: var(--color-surface);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.1s ease;
}

.rp-card__copy:hover { transform: translateY(-1px); }

.rp-card__waiting {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
  font-size: 0.76rem;
  color: var(--color-text-muted);
}

/* Inline agent-requested form (e.g. logins) */
.chat-form {
  margin: 4px 12px 12px;
  border: 1px solid var(--color-brand, #f02d5e);
  border-radius: var(--radius-lg);
  padding: 14px;
  background: var(--color-surface-secondary);
}

.chat-form__head {
  display: flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.chat-form__hint {
  margin: 0 0 10px;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

.chat-form__actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}

.chat-form__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: var(--radius);
  background: var(--color-brand, #f02d5e);
  color: var(--text-on-accent, #fff);
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
}

.chat-form__cancel {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: 0.85rem;
  cursor: pointer;
}

/* "Let the agent sign up for its own account" — a full-width alternative to entering credentials. */
.chat-form__self-signup {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: 100%;
  margin-top: 12px;
  padding: 9px 12px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-secondary);
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
}

.chat-form__self-signup:hover {
  border-color: var(--color-brand, #f02d5e);
  color: var(--color-text-primary);
}
/* QA chat, embedded in the lower part of the app's main sidebar (ProjectChat.tsx), shown when the
   new-project-overview experiment is on and a project overview is open. It fills its container; the
   sidebar owns collapsing. */

.pchat {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  height: 100%;
  min-height: 0;
  background: transparent;
  overflow: hidden;
}

.pchat__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  flex: 0 0 auto;
}

.pchat__live {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--color-brand, #f02d5e);
}

.pchat__title {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--color-text-primary);
}

.pchat__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Reverse-proxy setup card, pinned between the header and the transcript for tunnel-only projects. */
.pchat__proxy {
  flex: 0 0 auto;
  padding: 10px 12px 0;
}

/* Inline GitHub connect/disconnect panel (opened via the manage_github tool), sits below the log. */
.pchat__github {
  flex: 0 0 auto;
  padding: 8px 12px 10px;
}

/* Activity timeline entries — rendered inline within the chat log (interleaved with messages). */
.pchat-act {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  font-size: 0.82rem;
  color: var(--color-text-secondary);
}

.pchat-act__icon { flex: 0 0 auto; color: var(--color-text-muted); display: grid; place-items: center; }
.pchat-act__text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat-act__time { flex: 0 0 auto; font-size: 0.72rem; color: var(--color-text-muted); }
.pchat-act__status { flex: 0 0 auto; display: grid; place-items: center; }
.pchat-act--live .pchat-act__text { color: var(--color-text-primary); }
.pchat-act__status--ok { color: var(--color-status-active, #22c55e); }
.pchat-act__status--fail { color: var(--color-danger); }

.pchat-spin { animation: pchat-spin 0.9s linear infinite; color: var(--color-brand, #f02d5e); }
@keyframes pchat-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pchat-spin { animation: none; } }

/* Collapsed "test run" entries (TestRunEntry) — one expandable card per test session, replacing the
   individual activity rows when the new chat experience has sessions to show. */
.pchat-run {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  margin: 4px 0;
  overflow: hidden;
  background: var(--color-surface, transparent);
}
.pchat-run--live { border-color: var(--color-brand, #f02d5e); }

.pchat-run__head {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 7px 9px;
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--color-text-primary);
}
.pchat-run__head:hover { background: var(--color-surface-hover, rgba(127, 127, 127, 0.08)); }
.pchat-run__chevron { flex: 0 0 auto; display: grid; place-items: center; color: var(--color-text-muted); }
.pchat-run__title { flex: 1 1 auto; font-weight: 600; font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pchat-run__status {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.72rem;
  color: var(--color-text-muted);
}
.pchat-run__status--live { color: var(--color-brand, #f02d5e); }

.pchat-run__body {
  display: flex;
  flex-direction: column;
  gap: 1px;
  padding: 4px 6px 6px;
  border-top: 1px solid var(--color-border);
}
.pchat-run__empty { margin: 4px 4px; font-size: 0.78rem; color: var(--color-text-muted); }

.pchat-run__item {
  display: flex;
  align-items: center;
  gap: 7px;
  width: 100%;
  padding: 5px 7px;
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}
.pchat-run__item:hover:not(:disabled) { background: var(--color-surface-hover, rgba(127, 127, 127, 0.08)); color: var(--color-text-primary); }
.pchat-run__item:disabled { cursor: default; opacity: 0.7; }
.pchat-run__item-icon { flex: 0 0 auto; color: var(--color-text-muted); }
.pchat-run__item-icon--bug { color: var(--color-danger); }
.pchat-run__item-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.pchat__body .chat-log__content { padding: 12px 14px; }

.pchat__error {
  color: var(--color-danger);
  font-size: 0.8rem;
  padding: 6px 14px 0;
  margin: 0;
}
/* Self-contained overlay — does not rely on the shared .modal-* classes, which are only injected
   when their owning component is in the route's module graph (Vite scopes CSS to imported modules). */
.chat-help-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  z-index: 100;
}

.chat-help {
  position: relative;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 28px 24px 24px;
  width: 100%;
  max-width: 440px;
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
  text-align: center;
}

.chat-help__close {
  position: absolute;
  top: 14px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.chat-help__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.chat-help__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chat-help__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary);
}

.chat-help__title {
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px;
  color: var(--color-text-primary);
}

.chat-help__lead {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 18px;
}

.chat-help__examples {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.chat-help__examples li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-secondary);
  font-size: 13.5px;
  color: var(--color-text-primary);
}

.chat-help__examples li svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

/* Interactive variant: the list item is just a wrapper; the button carries the card styling so the
   whole row is clickable and keyboard-focusable. */
.chat-help__examples-item--interactive {
  padding: 0;
  border: none;
  background: none;
}

.chat-help__example-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-secondary);
  font: inherit;
  font-size: 13.5px;
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.chat-help__example-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.chat-help__example-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.chat-help__example-btn svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.chat-help__discord-lead {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.chat-help__discord {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: #5865f2;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background 0.15s;
}

.chat-help__discord:hover {
  background: #4752c4;
}

.chat-help__discord:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}
/* Full-width call-to-action bar shown at the top of the viewport for logged-out visitors who arrive
   via a project share link. Sits as the first child of .app-layout (a flex column), above the body. */
.share-cta-banner {
  flex-shrink: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 9px 16px;
  background: var(--color-brand);
  color: #fff;
  font-size: 13px;
  line-height: 1.4;
}

.share-cta-banner__text {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.share-cta-banner__icon {
  flex-shrink: 0;
  opacity: 0.95;
}

.share-cta-banner__text strong {
  font-weight: 700;
}

.share-cta-banner__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 0;
  background: #fff;
  color: var(--color-brand);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.share-cta-banner__btn:hover {
  background: rgba(255, 255, 255, 0.9);
}

@media (max-width: 640px) {
  .share-cta-banner {
    gap: 10px;
    padding: 8px 12px;
    font-size: 12px;
  }
}
.plan-selection {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-height: 0;
}

.plan-selection__header {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-bottom: 4px;
}

@media (min-width: 640px) {
  .plan-selection__header {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
  }
}

.plan-selection__intro {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.plan-selection__title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text-primary, var(--color-text-primary));
}

.plan-selection__subtitle {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary, var(--color-text-secondary));
}

.plan-selection__scheduled {
  font-size: 13px;
  line-height: 1.4;
  color: var(--warning, #d97706);
}

.plan-selection__toggle {
  display: inline-flex;
  flex-shrink: 0;
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: 10px;
  background: var(--surface-secondary, var(--color-surface-hover));
  align-self: flex-start;
}

.plan-selection__toggle-btn {
  border-radius: 8px;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary, var(--color-text-secondary));
  background: transparent;
  border: none;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.plan-selection__toggle-btn:hover {
  color: var(--text-primary, var(--color-text-primary));
}

.plan-selection__toggle-btn--active {
  background: var(--surface-primary, var(--color-surface));
  color: var(--text-primary, var(--color-text-primary));
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08);
}

.plan-selection__save-badge {
  margin-left: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-info-muted-bg, rgba(37, 99, 235, 0.1));
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-primary, #2563eb);
}

/* Card grid — 2 columns in modal for readable card width */
.plan-selection__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  padding-top: 10px;
}

@media (min-width: 640px) {
  .plan-selection__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }
}

/* Full-screen plan picker uses 4 columns once there's room */
@media (min-width: 1100px) {
  .subscription-gate__inner .plan-selection__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    gap: 16px;
  }
}

/* Modal plan tab: stay 2×2 until the modal itself is very wide */
@media (min-width: 1280px) {
  .settings-modal__content--plan .plan-selection__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-template-rows: auto auto 1fr;
    gap: 16px;
  }
}

.plan-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: 12px;
  background: var(--surface-primary, var(--color-surface));
  transition: border-color 0.15s, box-shadow 0.15s;
}

@media (min-width: 1100px) {
  .subscription-gate__inner .plan-card {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
}

@media (min-width: 1280px) {
  .settings-modal__content--plan .plan-card {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
  }
}

.plan-card--highlighted {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 0 0 1px var(--color-primary, #2563eb);
}

.plan-card__badge {
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  border-radius: var(--radius-pill, 999px);
  background: var(--color-primary, #2563eb);
  padding: 3px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-on-accent, #fff);
}

.plan-card__head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 24px 0;
}

.plan-card__tier {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-secondary, var(--color-text-secondary));
}

.plan-card--highlighted .plan-card__tier {
  color: var(--color-primary, #2563eb);
}

.plan-card__price {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.plan-card__price-number {
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1.1;
  color: var(--text-primary, var(--color-text-primary));
}

.plan-card__price-period {
  font-size: 13px;
  line-height: 1.45;
  color: var(--text-secondary, var(--color-text-secondary));
}

.plan-card__copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px 24px;
  flex: 1;
}

.plan-card__tagline {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--text-primary, var(--color-text-primary));
}

.settings-modal__content--plan .plan-card__tagline {
  font-size: 16px;
}

@media (min-width: 1280px) {
  .settings-modal__content--plan .plan-card__tagline {
    font-size: 17px;
  }
}

.plan-card__description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary, var(--color-text-secondary));
}

.plan-card__cta {
  padding: 0 24px 24px;
  margin-top: auto;
}

.plan-card__btn {
  display: block;
  width: 100%;
  text-align: center;
  border-radius: 10px;
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 600;
  border: 1px solid var(--border-color, var(--color-border));
  background: var(--surface-primary, var(--color-surface));
  color: var(--text-primary, var(--color-text-primary));
  transition: background-color 0.15s, border-color 0.15s;
}

.plan-card__btn:hover:not(:disabled) {
  background: var(--surface-hover, var(--color-surface-hover));
  text-decoration: none;
}

.plan-card__btn--solid {
  background: var(--color-primary, #2563eb);
  color: var(--text-on-accent, #fff);
  border-color: var(--color-primary, #2563eb);
}

.plan-card__btn--solid:hover:not(:disabled) {
  background: var(--color-primary-hover, #1d4ed8);
}

.plan-card__btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.plan-selection__status {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 0;
  font-size: 14px;
  color: var(--text-secondary, var(--color-text-secondary));
}

.plan-selection__error {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 48px 0;
  text-align: center;
  color: var(--text-secondary, var(--color-text-secondary));
}

/* Settings modal — subscription tab spacing */
.settings-modal__content--plan .plan-selection {
  gap: 24px;
}

.settings-modal__content--plan .plan-selection__header {
  padding-bottom: 0;
}

.settings-modal__content--plan .plan-selection__grid {
  padding-top: 14px;
}

@media (max-width: 768px) {
  .settings-modal__content--plan .plan-selection {
    gap: 20px;
  }

  .settings-modal__content--plan .plan-selection__header {
    gap: 16px;
  }

  .settings-modal__content--plan .plan-selection__title {
    font-size: 20px;
  }

  .settings-modal__content--plan .plan-selection__grid {
    padding-top: 16px;
    gap: 16px;
  }

  .settings-modal__content--plan .plan-card__head {
    padding: 20px 20px 0;
  }

  .settings-modal__content--plan .plan-card__copy {
    padding: 16px 20px;
  }

  .settings-modal__content--plan .plan-card__cta {
    padding: 0 20px 20px;
  }

  .settings-modal__content--plan .plan-card__badge {
    top: -10px;
  }
}
.settings-page {
  max-width: 780px;
}

.settings-page__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--color-text-primary);
}

.settings-page__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.settings-page__body {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Sections */

.settings-section {
  padding: 24px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.settings-section__header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  color: var(--color-text-primary);
}

.settings-section__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-section__subtitle {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 20px 0 8px;
}

.settings-section__description {
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.settings-section__description code {
  font-size: 12px;
  padding: 1px 5px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
}

/* API Token */

.settings-token__reveal {
  margin: 16px 0;
  padding: 16px;
  background: var(--color-bg);
  border: 1px solid #f59e0b;
  border-radius: var(--radius);
}

.settings-token__reveal-label {
  font-size: 13px;
  font-weight: 600;
  color: #f59e0b;
  margin: 0 0 10px;
}

.settings-token__reveal-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-token__value {
  flex: 1;
  font-size: 13px;
  font-family: var(--font-mono, monospace);
  padding: 8px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  word-break: break-all;
  user-select: all;
}

.settings-token__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.settings-token__copy-btn:hover {
  background: var(--color-bg);
}

.settings-token__dismiss-btn {
  margin-top: 12px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.settings-token__dismiss-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.settings-token__status {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 12px 0;
}

.settings-token__info {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 12px 0;
  font-size: 13px;
}

.settings-token__exists {
  color: var(--color-text-secondary);
}

.settings-token__mask {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  padding: 2px 8px;
  background: var(--color-bg);
  border-radius: 4px;
}

.settings-token__none {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 12px 0;
}

.settings-token__actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}

.settings-token__generate-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: #fff;
  background: var(--color-primary, #2563eb);
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
}

.settings-token__generate-btn:hover {
  opacity: 0.9;
}

.settings-token__generate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-token__delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.settings-token__delete-btn:hover {
  color: #ef4444;
  border-color: #ef4444;
}

.settings-token__delete-btn--confirm {
  color: #fff;
  background: #ef4444;
  border-color: #ef4444;
}

.settings-token__delete-btn--confirm:hover {
  color: #fff;
  background: #dc2626;
}

/* MCP Instructions */

.settings-mcp__tools {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
  display: grid;
  gap: 6px;
}

.settings-mcp__tools li {
  font-size: 13px;
  line-height: 1.4;
  color: var(--color-text-secondary);
  padding: 4px 0;
}

.settings-mcp__tools li strong {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-mcp__config-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 16px 0 6px;
}

.settings-mcp__code {
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  line-height: 1.6;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0 0 16px;
  white-space: pre;
}

/* Admin Section */

.settings-admin__nav-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-radius: 8px;
  background: var(--color-surface-raised, rgba(255, 255, 255, 0.04));
  border: 1px solid var(--color-border);
  color: var(--color-text-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: background 0.15s, border-color 0.15s;
}

.settings-admin__nav-link:hover {
  background: var(--color-surface-hover, rgba(255, 255, 255, 0.08));
  border-color: var(--color-border-hover, rgba(255, 255, 255, 0.16));
}

.settings-admin__header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}

.settings-admin__action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  white-space: nowrap;
}

.settings-admin__action-btn:hover {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
}

.settings-admin__action-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.settings-admin__action-btn--primary {
  color: #fff;
  background: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
}

.settings-admin__action-btn--primary:hover {
  opacity: 0.9;
  color: #fff;
}

.settings-admin__action-result {
  font-size: 13px;
  padding: 8px 12px;
  margin-bottom: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
}

.settings-admin__error {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #ef4444;
  margin: 8px 0;
}

.settings-admin__lock {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 8px 0 4px;
}

.settings-admin__lock-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.settings-admin__lock-dot--free {
  background: #22c55e;
}

.settings-admin__lock-dot--held {
  background: #f59e0b;
}

.settings-admin__lock-holder {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

.settings-admin__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.settings-admin__item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  padding: 6px 10px;
  background: var(--color-bg);
  border-radius: var(--radius);
}

.settings-admin__item-name {
  font-weight: 500;
  color: var(--color-text-primary);
  min-width: 100px;
}

.settings-admin__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.settings-admin__badge--idle {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.settings-admin__badge--starting {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
}

.settings-admin__badge--unreachable {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

.settings-admin__badge--busy {
  color: #f59e0b;
  background: rgba(245, 158, 11, 0.12);
}

.settings-admin__badge--deleted {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.12);
}

/* User-cohort member badges carry a small leading icon, so they align their contents as a row. */
.settings-admin__badge--returning,
.settings-admin__badge--active {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  text-transform: none;
  letter-spacing: 0;
}

.settings-admin__badge--returning {
  color: #22c55e;
  background: rgba(34, 197, 94, 0.12);
}

.settings-admin__badge--active {
  color: #3b82f6;
  background: rgba(59, 130, 246, 0.12);
}

/* Stack the weekly join-cohort cards on the Users page. */
.settings-admin__cohorts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

/* The Admin "Users" card links out via an action button; keep it underline-free like a button. */
.settings-admin__user-search a.settings-admin__action-btn {
  text-decoration: none;
  align-self: flex-start;
}

/* A soft-deleted project is retained in admin views but visually de-emphasized and its name struck
   through so it reads as gone. */
.settings-admin__user-project-item--deleted {
  opacity: 0.6;
}

.settings-admin__user-project-item--deleted .settings-admin__user-project-name {
  text-decoration: line-through;
}

.settings-admin__item-id {
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

/* A visits row: referrer on top, any UTM campaign tags below it; the count sits on the right since
   this main block grows to fill the row. */
.settings-admin__visit-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}

.settings-admin__visit-utm {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}

.settings-admin__visit-utm-tag {
  font-size: 11px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0 7px;
  white-space: nowrap;
}

.settings-admin__item-time {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: auto;
}

.settings-admin__mono {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
}

.settings-admin__projects {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-admin__project-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 6px;
}

.settings-admin__project-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.settings-admin__project-link {
  color: var(--color-primary, #2563eb);
  text-decoration: none;
}

.settings-admin__project-link:hover {
  text-decoration: underline;
}

.settings-admin__expandable {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.settings-admin__expandable + .settings-admin__expandable {
  margin-top: 4px;
}

.settings-admin__expandable-header {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: none;
  cursor: pointer;
  text-align: left;
}

.settings-admin__expandable-header:hover {
  background: var(--color-surface);
}

.settings-admin__expandable-sub {
  font-weight: 400;
  color: var(--color-text-secondary);
  margin-left: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-admin__expandable-body {
  padding: 8px 10px;
  border-top: 1px solid var(--color-border);
}

/* Admin-only AI activity summary shown inline under an active-user row (and reused on the user page). */
.settings-admin__activity-summary {
  margin: 0;
  padding: 6px 10px 8px 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

.settings-admin__container-detail {
  font-size: 13px;
  color: var(--color-text-secondary);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-admin__logs {
  margin-top: 6px;
}

.settings-admin__logs-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.settings-admin__logs-empty {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.settings-admin__log {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  padding: 2px 0;
}

.settings-admin__log-time {
  flex-shrink: 0;
  width: 124px;
  white-space: nowrap;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

.settings-admin__log-type {
  flex-shrink: 0;
  width: 64px;
  font-weight: 500;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
}

.settings-admin__log--error .settings-admin__log-type { color: #ef4444; }
.settings-admin__log--warning .settings-admin__log-type { color: #f59e0b; }
.settings-admin__log--info .settings-admin__log-type { color: #3b82f6; }
.settings-admin__log--step .settings-admin__log-type { color: #22c55e; }
.settings-admin__log--event .settings-admin__log-type { color: var(--color-text-tertiary, var(--color-text-secondary)); width: 24px; }

.settings-admin__log-msg {
  color: var(--color-text-secondary);
  word-break: break-word;
}

/* Errors grouped by project: tasks nest one level inside their project's expandable body. */
.settings-admin__error-tasks {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* One MCP error occurrence: a collapsed header row that expands to the full stored record. */
.settings-admin__error-occurrence {
  border-top: 1px solid var(--color-border, rgba(127, 127, 127, 0.16));
}
.settings-admin__error-occurrence:first-child {
  border-top: none;
}

.settings-admin__error-occurrence-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 4px 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-secondary);
  font-size: 12px;
}
.settings-admin__error-occurrence-header:hover {
  color: var(--color-text-primary);
}

/* Occurrence rendered as a link to the error's own detail page (no inline expand). */
.settings-admin__error-occurrence--link {
  text-decoration: none;
}
.settings-admin__error-occurrence-chevron {
  margin-left: auto;
  flex-shrink: 0;
  opacity: 0.5;
}

/* Errors group split into MCP-errors / failed-tasks subsections (Activity detail page). */
.settings-admin__errors-subhead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.settings-admin__errors-subtitle {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary, inherit);
}

/* A log row (e.g. an individual MCP error) that navigates to a detail page on click. */
.settings-admin__log--link {
  text-decoration: none;
  cursor: pointer;
  border-radius: var(--radius-sm, 4px);
}
.settings-admin__log--link:hover {
  background: var(--color-surface-secondary, rgba(127, 127, 127, 0.08));
}

.settings-admin__error-occurrence-task {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-admin__error-occurrence-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 4px 0 8px 21px;
}

/* Key/value rows for an expanded occurrence's stored fields. */
.settings-admin__error-fields {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 2px 12px;
  margin: 0;
}
.settings-admin__error-field {
  display: contents;
}
.settings-admin__error-field dt {
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: 11px;
}
.settings-admin__error-field dd {
  margin: 0;
  color: var(--color-text-secondary);
  font-size: 12px;
  word-break: break-word;
}

/* A labelled block (tool params / raw record) of pretty-printed JSON. */
.settings-admin__error-block-label {
  color: var(--color-text-tertiary, var(--color-text-secondary));
  font-size: 11px;
  margin-bottom: 2px;
}
.settings-admin__error-pre {
  margin: 0;
  padding: 6px 8px;
  border-radius: 4px;
  background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.12));
  color: var(--color-text-secondary);
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

/* "Load more" button beneath a message group's first page of occurrences. */
.settings-admin__load-more {
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 4px;
  border: 1px solid var(--color-border, rgba(127, 127, 127, 0.24));
  background: none;
  color: var(--color-text-secondary);
  font-size: 12px;
  cursor: pointer;
}
.settings-admin__load-more:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-tertiary, rgba(127, 127, 127, 0.12));
}

/* Daily Activity */

.settings-admin__day-detail {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* Keep the last section (Errors) from sitting flush against the bottom of the page. */
  padding-bottom: 24px;
}

.settings-admin__day-group-title {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}

/* A lazy section header is a toggle button reusing the day-group-title look. */
.settings-admin__day-group-toggle {
  width: 100%;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  padding: 2px 0;
}
.settings-admin__day-group-toggle:disabled {
  cursor: default;
  opacity: 0.6;
}
.settings-admin__day-group-toggle:not(:disabled):hover {
  color: var(--color-text-primary);
}
.settings-admin__day-group-spacer {
  display: inline-block;
  width: 12px;
}

.settings-admin__day-empty {
  font-size: 12px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

.settings-admin__day-owner {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 4px 0 2px;
}

/* All Projects by User */

.settings-admin__section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.settings-admin__sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.settings-admin__sort-select {
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 4px 8px;
  cursor: pointer;
}

.settings-admin__company-controls {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-admin__search {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  color: var(--color-text-secondary);
}

.settings-admin__search-input {
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 13px;
  outline: none;
  width: 150px;
}

.settings-admin__search-input::placeholder {
  color: var(--color-text-secondary);
}

.settings-admin__search-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.settings-admin__search-clear:hover {
  color: var(--color-text-primary);
}

.settings-admin__company-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 12px;
  font-size: 14px;
}

.settings-admin__company-th {
  text-align: left;
  padding: 0;
  border-bottom: 1px solid var(--color-border);
  font-weight: 600;
  color: var(--color-text-secondary);
}

.settings-admin__company-th--num {
  text-align: right;
}

.settings-admin__company-th--active {
  color: var(--color-text-primary);
}

.settings-admin__company-sort-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: 100%;
  padding: 6px 10px;
  border: none;
  background: transparent;
  color: inherit;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

.settings-admin__company-th--num .settings-admin__company-sort-btn {
  justify-content: flex-end;
}

.settings-admin__company-sort-btn:hover {
  color: var(--color-text-primary);
}

.settings-admin__company-sort-caret {
  font-size: 9px;
  line-height: 1;
}

.settings-admin__company-row:nth-child(odd) {
  background: var(--color-bg-secondary);
}

.settings-admin__company-name {
  padding: 6px 10px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.settings-admin__company-num {
  padding: 6px 10px;
  text-align: right;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.settings-admin__methods {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 12px;
}

.settings-admin__method-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 14px;
}

.settings-admin__method-item:nth-child(odd) {
  background: var(--color-bg-secondary);
}

.settings-admin__method-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.settings-admin__method-count {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.settings-admin__user-projects {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.settings-admin__user-project-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-admin__user-project-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius);
}

.settings-admin__user-project-item:hover {
  background: var(--color-bg);
}

.settings-admin__user-project-name {
  font-weight: 500;
  color: var(--color-primary, #2563eb);
  text-decoration: none;
  min-width: 120px;
}

.settings-admin__user-project-name:hover {
  text-decoration: underline;
}

.settings-admin__user-project-stats {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-left: auto;
  margin-right: 8px;
}

.settings-admin__user-project-duration {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* New-project rows in the activity feed: a fixed grid template so bugs/tests, duration, time-to-first
   rrweb, and "created N ago" line up into columns across every row. */
.settings-admin__new-project-item {
  display: grid;
  grid-template-columns: minmax(100px, 1fr) 64px 80px 76px 24px 64px;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  padding: 5px 8px;
  border-radius: var(--radius);
}

.settings-admin__new-project-item:hover {
  background: var(--color-bg);
}

.settings-admin__new-project-item .settings-admin__user-project-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Stats default to margin-left:auto for flex rows; in the grid they belong to their own column. */
.settings-admin__new-project-item .settings-admin__user-project-stats {
  margin: 0;
}

.settings-admin__new-project-item .settings-admin__item-time {
  margin-left: 0;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* The duration cell wrapper keeps the column occupied even when a project has no duration yet,
   so later columns don't shift left out of alignment. */
.settings-admin__new-project-cell {
  display: inline-flex;
  align-items: center;
  min-height: 16px;
}

.settings-admin__user-project-rrweb {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Completion-email indicator in the activity project listings: a static green check when sent, a
   clickable mail button (resets the native button chrome) when not yet sent. */
.settings-admin__completion-email {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
}

.settings-admin__completion-email--sent {
  color: var(--color-status-active, #10b981);
}

.settings-admin__completion-email--send {
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius);
}

.settings-admin__completion-email--send:hover:not(:disabled) {
  color: var(--color-primary, #2563eb);
}

.settings-admin__completion-email--send:disabled {
  cursor: default;
  opacity: 0.6;
}

.settings-admin__completion-email--error {
  color: var(--color-danger, #dc2626);
}

.settings-admin__duration-done {
  color: var(--color-status-active, #10b981);
}

.settings-admin__duration-spin {
  color: var(--color-status-in-progress, #f59e0b);
  animation: settings-admin-spin 1s linear infinite;
}

@keyframes settings-admin-spin {
  to { transform: rotate(360deg); }
}

/* Admin Users */

.settings-admin__add-form {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.settings-admin__add-input {
  flex: 1;
  padding: 6px 10px;
  font-size: 13px;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
}

.settings-admin__add-input:focus {
  border-color: var(--color-primary, #2563eb);
}

.settings-admin__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  color: var(--color-text-secondary);
  background: transparent;
  border: none;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}

.settings-admin__remove-btn:hover {
  color: #ef4444;
  background: rgba(239, 68, 68, 0.1);
}

.settings-admin__token-reveal {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 10px;
}

.settings-admin__token-value {
  font-family: var(--font-mono, monospace);
  font-size: 13px;
  color: var(--color-text-primary);
  word-break: break-all;
  flex: 1;
}

.settings-admin__token-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Product Status Report settings form */

.settings-admin__report-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 10px;
  max-width: 720px;
}

.settings-admin__report-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
}

.settings-admin__report-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.settings-admin__report-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 200px;
}

.settings-admin__report-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.settings-admin__report-hint {
  font-weight: 400;
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

.settings-admin__report-textarea {
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  resize: vertical;
}

.settings-admin__report-textarea:focus {
  border-color: var(--color-primary, #2563eb);
}

.settings-admin__report-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-admin__report-preview {
  margin: 0;
  padding: 12px 14px;
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-primary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  max-height: 480px;
  overflow: auto;
}

.settings-admin__action-btn--danger {
  color: #ef4444 !important;
  border-color: rgba(239, 68, 68, 0.3) !important;
}

.settings-admin__action-btn--danger:hover {
  background: rgba(239, 68, 68, 0.1) !important;
}

/* Activity graph */

.settings-admin__chart-section {
  margin-bottom: 8px;
}

/* Customers chart + "Go to user" search sit side by side; the search box fills the space to the
   right of the donut/legend and drops below it when the row gets too narrow. */
.settings-admin__customers-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 32px;
}

.settings-admin__customers-row > .settings-admin__chart-section {
  flex: 1 1 360px;
  min-width: 0;
}

.settings-admin__user-search {
  flex: 1 1 280px;
  min-width: 0;
}

.settings-admin__user-search-form {
  display: flex;
  align-items: center;
  gap: 8px;
}

.settings-admin__user-search-error {
  font-size: 12px;
  color: #ef4444;
  margin: 8px 0 0;
}

.settings-admin__chart-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 4px 0 10px;
}

.settings-admin__chart-metrics,
.settings-admin__chart-grouping {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-admin__chip {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 999px;
  cursor: pointer;
}

.settings-admin__chip:hover {
  background: var(--color-surface);
}

.settings-admin__chip--active {
  color: var(--color-text-primary);
  border-color: var(--color-text-secondary);
  background: var(--color-surface);
}

/* Toggle chip (on/off filter, e.g. "External only"): show a clear filled state when on so it reads
   as selected at a glance rather than the subtle --active treatment. */
.settings-admin__chip--toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.settings-admin__chip--toggle.settings-admin__chip--on {
  color: var(--color-bg);
  background: var(--color-primary);
  border-color: var(--color-primary);
  font-weight: 600;
}

.settings-admin__chip--toggle.settings-admin__chip--on:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

.settings-admin__chart-caption {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.settings-admin__chart {
  width: 100%;
}

/* Conversion cohorts: horizontal bars stacked vertically, one per 20-point likelihood range. Each
   row is [range label | bar track | count + pct], all bars scaled against the busiest cohort. */
.settings-admin__cohorts {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.settings-admin__cohort-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.settings-admin__cohort-label {
  flex: 0 0 64px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.settings-admin__cohort-track {
  flex: 1 1 auto;
  min-width: 0;
  height: 18px;
  background: var(--color-bg);
  border-radius: 4px;
  overflow: hidden;
}

.settings-admin__cohort-bar {
  display: block;
  height: 100%;
  min-width: 2px;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.settings-admin__cohort-value {
  flex: 0 0 auto;
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-variant-numeric: tabular-nums;
}

.settings-admin__cohort-count {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-admin__cohort-pct {
  font-size: 11px;
  color: var(--color-text-muted);
  min-width: 30px;
  text-align: right;
}

/* Customer retention grid: a cohort heatmap — rows are weekly join cohorts (oldest first), columns
   are weeks-since-join, cells are the % of the cohort still active that many weeks in. Horizontally
   scrollable so the grid never forces the Admin page wider on narrow screens. */
.settings-admin__retention-scroll {
  margin-top: 4px;
  overflow-x: auto;
}

.settings-admin__retention-grid {
  border-collapse: separate;
  border-spacing: 3px;
  font-variant-numeric: tabular-nums;
}

.settings-admin__retention-corner {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: 0 8px 4px 0;
}

.settings-admin__retention-col-head {
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-align: center;
  padding: 0 0 4px;
  min-width: 44px;
}

.settings-admin__retention-row-head {
  text-align: right;
  padding-right: 10px;
  white-space: nowrap;
  vertical-align: middle;
}

.settings-admin__retention-row-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.settings-admin__retention-row-size {
  display: block;
  font-size: 10px;
  color: var(--color-text-muted);
}

.settings-admin__retention-cell {
  width: 44px;
  height: 30px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  border-radius: 4px;
  color: var(--color-text-primary);
}

/* Cells a cohort is too young to have data for: a quiet placeholder, clearly not "0% retained". */
.settings-admin__retention-cell--empty {
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-weight: 400;
}

/* "?" hint next to the Conversion cohorts title. The popover explains the scoring model and opens on
   hover/focus (CSS) or click (data-open pins it for keyboard/touch users). */
.conversion-cohorts__hint {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.conversion-cohorts__hint-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
  color: var(--color-text-muted);
  background: none;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  line-height: 0;
}

.conversion-cohorts__hint-btn:hover,
.conversion-cohorts__hint-btn:focus-visible {
  color: var(--color-text-primary);
}

.conversion-cohorts__hint-popover {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  width: 300px;
  max-width: 78vw;
  padding: 12px 14px;
  background: var(--color-surface, var(--color-bg));
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  text-align: left;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease;
}

.conversion-cohorts__hint:hover .conversion-cohorts__hint-popover,
.conversion-cohorts__hint:focus-within .conversion-cohorts__hint-popover,
.conversion-cohorts__hint[data-open='true'] .conversion-cohorts__hint-popover {
  opacity: 1;
  visibility: visible;
}

.conversion-cohorts__hint-popover p {
  margin: 0;
}

.conversion-cohorts__hint-lead {
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px !important;
}

.conversion-cohorts__hint-signals {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.conversion-cohorts__hint-signals li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.conversion-cohorts__hint-signal-label {
  color: var(--color-text-primary);
}

.conversion-cohorts__hint-signal-meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* A cohort row is clickable when it has members: drill down into the individual not-yet-paying users
   who scored into that range. Styled as a full-width button that keeps the bar layout. */
.settings-admin__cohort-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

button.settings-admin__cohort-row--clickable {
  width: 100%;
  font: inherit;
  color: inherit;
  background: none;
  border: none;
  padding: 3px 4px;
  margin: -3px -4px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
}

button.settings-admin__cohort-row--clickable:hover {
  background: var(--color-bg);
}

.settings-admin__cohort-chevron {
  flex: 0 0 auto;
  color: var(--color-text-muted);
  transition: transform 0.15s ease;
}

.settings-admin__cohort-chevron--open {
  transform: rotate(90deg);
}

/* Drill-down list of the users inside a cohort range. Each row: identity (name over email), project
   count, credits consumed, and a link to their full history. */
.settings-admin__cohort-drilldown {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 76px;
}

.settings-admin__cohort-user {
  gap: 12px;
}

.settings-admin__cohort-user-identity {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1 1 auto;
}

.settings-admin__cohort-user-identity .settings-admin__item-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-admin__cohort-user-email {
  font-size: 11px;
  color: var(--color-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-admin__cohort-user-stat {
  flex: 0 0 auto;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.settings-admin__cohort-user-history {
  flex: 0 0 auto;
}

/* Loading interstitial shown while activity data is (re)fetched. Matches the chart height (260px)
   so toggling grouping doesn't collapse the layout. */
.settings-admin__chart-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 260px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Top acquisition UTM sources — Visits vs. Signups breakdown below the activity graph. */
.settings-admin__utm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.settings-admin__utm-table th,
.settings-admin__utm-table td {
  padding: 6px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.settings-admin__utm-table th {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.settings-admin__utm-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  width: 1%;
}

.settings-admin__utm-conv {
  color: var(--color-text-secondary);
}

.settings-admin__utm-source {
  font-weight: 500;
  color: var(--color-text-primary);
}

/* Inline visits bar under each source name, scaled to the busiest source. */
.settings-admin__utm-bar {
  display: block;
  height: 4px;
  margin-top: 4px;
  background: var(--color-border);
  border-radius: 2px;
  overflow: hidden;
}

.settings-admin__utm-bar-fill {
  display: block;
  height: 100%;
  background: var(--color-primary);
  border-radius: 2px;
}

/* All-users table — filterable, sortable, paginated listing on the Users page. */
.settings-admin__users-table-wrap {
  margin-bottom: 24px;
}

.settings-admin__users-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.settings-admin__users-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1 1 220px;
  max-width: 340px;
  padding: 0 10px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.settings-admin__users-filter-input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--color-text-primary);
  font-size: 13px;
  padding: 8px 0;
  outline: none;
}

.settings-admin__users-page-size {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.settings-admin__users-page-size-select {
  padding: 6px 8px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 13px;
}

.settings-admin__users-table-scroll {
  overflow-x: auto;
}

.settings-admin__users-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.settings-admin__users-table th,
.settings-admin__users-table td {
  padding: 8px 10px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.settings-admin__users-th--right {
  text-align: right;
}

.settings-admin__users-table td.settings-admin__users-th--right {
  text-align: right;
}

.settings-admin__users-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.settings-admin__users-sort:hover {
  color: var(--color-text-primary);
}

.settings-admin__users-sort-idle {
  opacity: 0.4;
}

.settings-admin__users-cell-name {
  font-weight: 500;
  color: var(--color-text-primary);
}

.settings-admin__users-cell-time {
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.settings-admin__users-cell-status {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-admin__users-cell-muted {
  color: var(--color-text-secondary);
}

.settings-admin__users-cell-count {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-primary);
}

.settings-admin__plan-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  white-space: nowrap;
}

.settings-admin__plan-badge--individual {
  color: #4f46e5;
  border-color: color-mix(in srgb, #4f46e5 40%, transparent);
  background: color-mix(in srgb, #4f46e5 12%, transparent);
}

.settings-admin__plan-badge--team {
  color: #0e7490;
  border-color: color-mix(in srgb, #0e7490 40%, transparent);
  background: color-mix(in srgb, #0e7490 12%, transparent);
}

.settings-admin__plan-badge--enterprise {
  color: #b45309;
  border-color: color-mix(in srgb, #b45309 40%, transparent);
  background: color-mix(in srgb, #b45309 12%, transparent);
}

.settings-admin__users-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
}

.settings-admin__users-page-info {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
}

.settings-admin__users-page-nav {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.settings-admin__users-page-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* "New data available" banner — surfaced when a background admin refresh finds changes */

.settings-admin__refresh-banner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.settings-admin__refresh-banner:hover {
  border-color: var(--color-text-secondary);
}

/* Customer subscription distribution (donut + legend) */

.settings-admin__sub-layout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 24px;
  margin-bottom: 8px;
}

.settings-admin__sub-donut {
  position: relative;
  width: 180px;
  height: 180px;
  flex-shrink: 0;
}

.settings-admin__sub-total {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.settings-admin__sub-total-num {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  color: var(--color-text-primary);
}

.settings-admin__sub-total-label {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
}

.settings-admin__sub-legend {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.settings-admin__sub-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  width: 100%;
  padding: 4px 8px;
  margin: 0 -8px;
  background: none;
  border: none;
  border-radius: var(--radius);
  text-align: left;
  cursor: pointer;
  font-family: inherit;
}

.settings-admin__sub-legend-item:hover {
  background: var(--color-surface);
}

.settings-admin__sub-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}

.settings-admin__sub-legend-label {
  color: var(--color-text-primary);
  min-width: 88px;
}

.settings-admin__sub-legend-value {
  color: var(--color-text-primary);
  font-weight: 600;
  margin-left: auto;
}

.settings-admin__sub-legend-pct {
  color: var(--color-text-secondary);
  min-width: 40px;
  text-align: right;
}

/* Activity feed — split expandable header (toggle + user link) and user links */

.settings-admin__expandable-header--split {
  padding: 0;
  gap: 0;
}

.settings-admin__expandable-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
}

.settings-admin__expandable-toggle:hover {
  background: var(--color-surface);
}

/* Right-hand action cluster in a split expandable header (e.g. a session-recording link next to the
   user-history link). Keeps the links flush-right and vertically centered. */
.settings-admin__expandable-actions {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding-right: 6px;
}

/* Event detail page: title row with the Important toggle on the right. */
.settings-admin__event-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.settings-admin__event-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 0;
  word-break: break-word;
}

/* Per-day occurrence bar chart on the event detail page. */
.settings-admin__event-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding: 8px 0;
}

.settings-admin__event-chart-bar-wrap {
  flex: 1;
  min-width: 2px;
  height: 100%;
  display: flex;
  align-items: flex-end;
}

.settings-admin__event-chart-bar {
  width: 100%;
  background: var(--color-primary, #2563eb);
  border-radius: 2px 2px 0 0;
  min-height: 2px;
}

.settings-admin__event-chart-bar--empty {
  background: var(--color-border, #e5e7eb);
}

/* The "important" star marker on flagged event buckets — filled amber so it reads at a glance. */
.settings-admin__important-star {
  color: #f59e0b;
  fill: #f59e0b;
}

/* One filled star per importance level (1–3), shown together with no gap so the level reads as a
   compact rating rather than separate marks. */
.settings-admin__importance-stars {
  display: inline-flex;
  align-items: center;
}

/* Short, human description of what an event means, shown above its occurrences when a bucket expands. */
.settings-admin__event-description {
  margin: 0 0 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

/* The 0–3 importance level picker on the event detail page (None / 1 / 2 / 3 chips). */
.settings-admin__importance-control {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.settings-admin__importance-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Explicit priority 0 marker — a hollow ring, deliberately distinct from the filled amber stars (1–3)
   and from the empty "not set" state, so a bucket pinned at 0 still reads as annotated. */
.settings-admin__important-zero {
  color: #f59e0b;
}

/* Inline priority picker shown on each event row's header (mirrors the bug-table status dropdown). The
   trigger reveals a small menu of priority choices; an outside click closes it. */
.settings-admin__importance-picker {
  position: relative;
  display: inline-flex;
  flex-shrink: 0;
}

.settings-admin__importance-trigger {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 4px 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  transition: border-color 0.15s, background 0.15s;
}

.settings-admin__importance-trigger:hover:not(:disabled) {
  border-color: var(--color-border);
}

.settings-admin__importance-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-admin__importance-trigger:disabled {
  opacity: 0.6;
  cursor: default;
}

/* The faint star drawn when a bucket has no priority set — signals the control sets a priority without
   implying one is already active. */
.settings-admin__importance-unset-icon {
  color: var(--color-text-tertiary, #9ca3af);
  opacity: 0.6;
}

.settings-admin__importance-menu {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  z-index: 50;
  padding: 4px;
  min-width: 150px;
}

/* Fixed-positioned variant: the menu is positioned relative to the viewport (top/right supplied inline
   from the trigger's rect) so an ancestor's `overflow: hidden` can't clip it. z-index is raised above
   app chrome since it now lives in the viewport stacking context. See ImportancePicker. */
.settings-admin__importance-menu--fixed {
  position: fixed;
  top: auto;
  right: auto;
  z-index: 100;
}

.settings-admin__importance-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  font-size: 12px;
  color: var(--color-text-primary);
}

.settings-admin__importance-option:hover {
  background: var(--color-surface-secondary);
}

.settings-admin__importance-option--active {
  background: var(--color-surface-secondary);
}

.settings-admin__importance-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.settings-admin__importance-option-mark {
  display: inline-flex;
  align-items: center;
  width: 16px;
  justify-content: center;
}

.settings-admin__user-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 6px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary, #2563eb);
  text-decoration: none;
  white-space: nowrap;
}

.settings-admin__user-link:hover {
  text-decoration: underline;
}

/* Project change diffs (from audit_log) */

.settings-admin__change-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.settings-admin__changes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.settings-admin__change {
  border-left: 2px solid var(--color-border);
  padding-left: 8px;
}

.settings-admin__change-time {
  font-size: 11px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  margin-bottom: 2px;
}

.settings-admin__change-field {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 12px;
  line-height: 1.5;
  flex-wrap: wrap;
}

.settings-admin__change-name {
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 90px;
}

.settings-admin__change-old {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  word-break: break-word;
}

.settings-admin__change-arrow {
  color: var(--color-text-tertiary, var(--color-text-secondary));
}

.settings-admin__change-new {
  color: var(--color-text-primary);
  word-break: break-word;
}

/* Admin user detail page */

.settings-admin__user-header {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  margin-bottom: 8px;
}

.settings-admin__user-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-admin__user-meta {
  font-size: 12px;
}

.settings-admin__user-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
}

.settings-admin__stat-label {
  color: var(--color-text-tertiary, var(--color-text-secondary));
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.03em;
  margin-right: 4px;
}

@media (max-width: 600px) {
  .settings-token__reveal-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-token__actions {
    flex-direction: column;
  }

  .settings-token__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* Usage */

.settings-usage__status {
  font-size: 14px;
  color: var(--color-text-secondary);
  padding: 8px 0;
}

.settings-usage__status--error {
  color: #ef4444;
}

.settings-usage__summary {
  display: flex;
  gap: 12px;
  margin: 16px 0;
}

.settings-usage__summary-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 14px 16px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}

.settings-usage__summary-value {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
}

.settings-usage__summary-label {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.settings-usage__empty {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin: 0;
}

.settings-usage__projects {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.settings-usage__project {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  overflow: hidden;
}

.settings-usage__project-header-row {
  display: flex;
  align-items: stretch;
}

.settings-usage__project-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.settings-usage__project-header:hover {
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.03));
}

.settings-usage__project-open {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0 14px;
  color: var(--color-text-secondary);
  border-left: 1px solid var(--color-border);
}

.settings-usage__project-open:hover {
  color: var(--color-text-primary);
  background: var(--color-bg-secondary, rgba(0, 0, 0, 0.03));
}

.settings-usage__project-chevron {
  flex-shrink: 0;
  color: var(--color-text-secondary);
  transition: transform 0.15s ease;
}

.settings-usage__project-chevron--open {
  transform: rotate(90deg);
}

.settings-usage__project-name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-usage__project-total {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.settings-usage__refunded-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
  color: var(--color-success, #1a7f4b);
  background: color-mix(in srgb, var(--color-success, #1a7f4b) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success, #1a7f4b) 35%, transparent);
  border-radius: var(--radius-pill);
}

.settings-usage__entries {
  list-style: none;
  margin: 0;
  padding: 4px 0;
  border-top: 1px solid var(--color-border);
}

.settings-usage__entry {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 5px 14px;
  font-size: 13px;
}

.settings-usage__entry-kind {
  flex-shrink: 0;
  width: 78px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
}

.settings-usage__entry-label {
  flex: 1;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-usage__entry-date {
  flex-shrink: 0;
  color: var(--color-text-secondary);
}

.settings-usage__entry-credits {
  flex-shrink: 0;
  min-width: 70px;
  text-align: right;
  color: var(--color-text-primary);
}

@media (max-width: 600px) {
  .settings-usage__summary {
    flex-direction: column;
  }
}

/* Failed task categories — structured spec editor (one row per category). */
.ftc-rows {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.ftc-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.ftc-row__fields {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}
.ftc-row__name {
  width: 100%;
  font-weight: 600;
}
.ftc-row__explanation {
  width: 100%;
  resize: vertical;
  min-height: 48px;
  font-family: inherit;
  line-height: 1.4;
}
.ftc-row__remove {
  margin-top: 4px;
  flex-shrink: 0;
}
.ftc-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.settings-modal__overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(4px);
}

.settings-modal {
  display: flex;
  width: 100%;
  max-width: 1120px;
  height: min(88vh, 820px);
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
  box-shadow:
    0 24px 48px rgba(15, 23, 42, 0.12),
    0 8px 16px rgba(15, 23, 42, 0.06);
}

.settings-modal__sidebar {
  display: flex;
  flex-direction: column;
  width: 240px;
  flex-shrink: 0;
  border-right: 1px solid var(--color-border);
  background: var(--surface-secondary, var(--color-surface-hover));
}

.settings-modal__sidebar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 18px;
  border-bottom: 1px solid var(--color-border);
}

.settings-modal__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--color-text-primary);
}

.settings-modal__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  background: none;
  border: none;
  transition: background-color 0.15s, color 0.15s;
}

.settings-modal__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.settings-modal__nav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px;
  overflow-y: auto;
}

.settings-modal__nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 14px;
  text-align: left;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: none;
  border: none;
  border-radius: var(--radius);
  transition: background-color 0.15s, color 0.15s;
}

.settings-modal__nav-item:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.settings-modal__nav-item--active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
}

.settings-modal__content {
  display: flex;
  flex-direction: column;
  gap: 28px;
  flex: 1;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  background: var(--color-surface);
  padding: 32px 36px;
}

.settings-modal__content--plan {
  padding: 28px 32px 36px;
}

/* Flatter section cards inside the modal */
.settings-modal .settings-section {
  padding: 28px;
  border-radius: 12px;
  border-color: var(--color-border-light, var(--color-border));
  box-shadow: none;
}

.settings-modal .settings-section__header {
  margin-bottom: 10px;
}

.settings-modal .settings-section__title {
  font-size: 17px;
  letter-spacing: -0.01em;
}

.settings-modal .settings-section__description {
  margin-bottom: 16px;
  line-height: 1.6;
}

.settings-github__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-legal__item {
  padding: 16px 0;
  border-bottom: 1px solid var(--color-border-light);
}

.settings-legal__item:last-child {
  border-bottom: none;
}

.settings-legal__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
}

.settings-legal__link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .settings-modal__overlay {
    padding: 0;
    align-items: stretch;
  }

  .settings-modal {
    flex-direction: column;
    width: 100%;
    max-width: none;
    height: 100dvh;
    max-height: none;
    border-radius: 0;
    border-left: none;
    border-right: none;
  }

  .settings-modal__sidebar {
    width: 100%;
    flex-direction: column;
    flex-shrink: 0;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    background: var(--surface-secondary, var(--color-surface-hover));
  }

  .settings-modal__sidebar-header {
    border-bottom: none;
    padding: max(12px, env(safe-area-inset-top, 0px)) 20px 12px;
    flex-shrink: 0;
  }

  .settings-modal__nav {
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 16px;
    padding: 0 0 14px;
    gap: 8px;
  }

  .settings-modal__nav::-webkit-scrollbar {
    display: none;
  }

  .settings-modal__nav-item {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
    scroll-snap-align: start;
    scroll-margin-inline: 16px;
    padding: 8px 12px;
    font-size: 13px;
    gap: 8px;
    border: 1px solid transparent;
  }

  .settings-modal__nav-item:first-child {
    margin-inline-start: 16px;
  }

  .settings-modal__nav-item:last-child {
    margin-inline-end: 16px;
  }

  .settings-modal__nav-item--active {
    border-color: var(--color-border);
  }

  .settings-modal__content {
    gap: 20px;
    padding: 24px 20px calc(24px + env(safe-area-inset-bottom, 0px));
  }

  .settings-modal__content--plan {
    padding: 20px 20px calc(28px + env(safe-area-inset-bottom, 0px));
  }

  .settings-modal .settings-section {
    padding: 22px 20px;
  }

  .settings-modal .settings-section__header {
    margin-bottom: 12px;
  }

  .settings-modal .settings-section__description {
    margin-bottom: 18px;
  }

  .settings-modal .settings-usage__summary {
    margin-top: 0;
    margin-bottom: 0;
  }

  .settings-modal .settings-usage__summary-item {
    padding: 16px 18px;
  }
}

/* Notifications tab — toggle rows */
.settings-notifications__row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--color-border, #e5e5e5);
  border-radius: 10px;
  cursor: pointer;
}

.settings-notifications__row:hover {
  background: var(--color-accent-subtle-bg, #fafafa);
}

.settings-notifications__checkbox {
  margin-top: 2px;
  width: 18px;
  height: 18px;
  accent-color: var(--color-brand, #f02d5e);
  cursor: pointer;
  flex-shrink: 0;
}

.settings-notifications__checkbox:disabled {
  cursor: default;
  opacity: 0.6;
}

.settings-notifications__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.settings-notifications__label {
  font-weight: 600;
  color: var(--color-text-primary);
}

.settings-notifications__hint {
  margin: 0;
}

.settings-notifications__error {
  color: var(--color-brand, #f02d5e);
  margin-top: 10px;
}
.error-boundary {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  max-width: 520px;
  margin: 48px auto;
  padding: 32px 28px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
}

.error-boundary__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-pill);
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.error-boundary__title {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.error-boundary__message {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.error-boundary__detail {
  width: 100%;
  margin: 4px 0 0;
  padding: 10px 12px;
  text-align: left;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  max-height: 160px;
  overflow: auto;
}

.error-boundary__actions {
  display: flex;
  gap: 10px;
  margin-top: 8px;
}

.error-boundary__btn {
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.error-boundary__btn:hover {
  background: var(--color-surface-hover);
}

.error-boundary__btn--primary {
  color: #fff;
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.error-boundary__btn--primary:hover {
  background: var(--color-primary-hover);
}
.help-widget {
  position: fixed;
  z-index: 1000;
  font-family: var(--hw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* Help Button */
.hw-button {
  position: fixed;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  border: none;
  background-color: var(--hw-primary, #4C6EF5);
  color: var(--text-on-accent, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow-lg, 0 8px 24px rgba(0, 0, 0, 0.12));
  transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 150ms ease;
  z-index: 1001;
  animation: hw-pulse 600ms cubic-bezier(0.34, 1.56, 0.64, 1) 3;
}

.hw-button.bottom-right { bottom: 24px; right: 24px; }
.hw-button.bottom-left { bottom: 24px; left: 24px; }
.hw-button:hover { transform: scale(1.05); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16); }
.hw-button:active { transform: scale(0.98); }

@keyframes hw-pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.1); }
}

/* "New version available" badge on the help button */
.hw-button-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background-color: #FA5252;
  border: 2px solid var(--bg-elevated, #fff);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06);
}

/* Chat Panel */
.hw-chat-panel {
  position: fixed;
  width: 400px;
  height: 500px;
  background-color: var(--bg-elevated, #fff);
  border-radius: 16px;
  box-shadow: var(--shadow-md, 0 4px 12px rgba(0, 0, 0, 0.08));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  z-index: 1001;
  animation: hw-panel-slide-up 250ms cubic-bezier(0.4, 0, 0.2, 1);
}

.hw-chat-panel.bottom-right { bottom: 92px; right: 24px; }
.hw-chat-panel.bottom-left { bottom: 92px; left: 24px; }

@keyframes hw-panel-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Chat Header */
.hw-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 48px;
  padding: 0 12px 0 16px;
  background-color: var(--bg-surface, #F8F9FA);
  border-bottom: 1px solid var(--border-default, #E9ECEF);
  flex-shrink: 0;
}

.hw-chat-header-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary, #212529);
}

.hw-chat-header-actions {
  display: flex;
  gap: 4px;
}

.hw-chat-header-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-muted, #868E96);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: color 150ms ease, background-color 150ms ease;
}

.hw-chat-header-btn:hover {
  color: var(--text-primary, #212529);
  background-color: var(--bg-hover, #F1F3F5);
}

.hw-chat-header-btn.active {
  color: var(--accent, #4C6EF5);
  background-color: var(--accent-subtle, #EDF2FF);
}

/* New-version / reload banner */
.hw-update-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 16px;
  background-color: var(--accent-subtle, #EDF2FF);
  border-bottom: 1px solid var(--border-default, #E9ECEF);
  font-size: 13px;
  color: var(--accent-pressed, #364FC7);
  flex-shrink: 0;
}

.hw-update-banner-text { flex: 1; line-height: 1.4; }

.hw-update-banner-reload {
  border: none;
  border-radius: 8px;
  padding: 6px 12px;
  background-color: var(--hw-primary, #4C6EF5);
  color: var(--text-on-accent, #fff);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter 150ms ease;
  font-family: inherit;
}

.hw-update-banner-reload:hover { filter: brightness(0.92); }

/* Messages Area */
.hw-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Help Banner */
.hw-help-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 12px;
  background-color: var(--accent-subtle, #EDF2FF);
  border-radius: 10px;
  font-size: 13px;
  color: var(--accent-pressed, #364FC7);
  line-height: 1.4;
}

.hw-help-banner-text { flex: 1; }

.hw-help-banner-dismiss {
  border: none;
  background: transparent;
  color: var(--accent-pressed, #364FC7);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
  opacity: 0.6;
  flex-shrink: 0;
}

.hw-help-banner-dismiss:hover { opacity: 1; }

/* Picking Banner */
.hw-picking-banner {
  padding: 10px 12px;
  background-color: #FFF9DB;
  border-radius: 10px;
  font-size: 13px;
  color: #E67700;
  text-align: center;
  line-height: 1.4;
}

/* Message Bubble */
.hw-message-bubble {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.4;
  word-wrap: break-word;
}

.hw-message-bubble.user {
  align-self: flex-end;
  background-color: var(--hw-primary, #4C6EF5);
  color: var(--text-on-accent, #fff);
}

.hw-message-bubble.response {
  align-self: flex-start;
  background-color: var(--bg-surface, #F8F9FA);
  color: var(--text-primary, #212529);
}

.hw-message-context-badge {
  font-size: 11px;
  opacity: 0.85;
  margin-bottom: 4px;
  padding: 2px 6px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  display: inline-block;
}

.hw-message-bubble-text { margin-bottom: 4px; white-space: pre-wrap; }
.hw-message-bubble-time { font-size: 11px; opacity: 0.7; }
.hw-message-bubble.response .hw-message-bubble-time { color: var(--text-hint, #ADB5BD); opacity: 1; }

/* Element Context Display */
.hw-element-context {
  padding: 8px 12px;
  border-top: 1px solid var(--border-default, #E9ECEF);
  background-color: var(--bg-surface, #F8F9FA);
  flex-shrink: 0;
  font-size: 12px;
}

.hw-element-context-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}

.hw-element-context-label {
  font-weight: 600;
  color: var(--accent, #4C6EF5);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.hw-element-context-clear {
  border: none;
  background: transparent;
  color: var(--text-muted, #868E96);
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 0 2px;
}

.hw-element-context-clear:hover { color: var(--text-primary, #212529); }

.hw-element-context-tag {
  color: var(--text-primary, #495057);
  font-family: "SF Mono", "Fira Code", monospace;
  margin-bottom: 4px;
}

.hw-element-context-text {
  color: var(--text-muted, #868E96);
  font-style: italic;
  font-family: inherit;
}

.hw-element-context-chain {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  line-height: 1.6;
}

.hw-element-context-component {
  color: var(--text-primary, #495057);
  font-family: "SF Mono", "Fira Code", monospace;
}

.hw-element-context-arrow {
  color: var(--text-hint, #ADB5BD);
}

/* Chat Input */
.hw-chat-input {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-default, #E9ECEF);
  background-color: var(--bg-surface, #F8F9FA);
  flex-shrink: 0;
  min-height: 48px;
}

.hw-chat-input input {
  flex: 1;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--border-default, #E9ECEF);
  border-radius: 8px;
  background-color: var(--bg-base, #fff);
  color: var(--text-primary, #212529);
  font-size: 14px;
  outline: none;
  transition: border-color 150ms ease;
  font-family: inherit;
}

.hw-chat-input input::placeholder { color: var(--text-hint, #ADB5BD); }
.hw-chat-input input:focus { border-color: var(--accent, #4C6EF5); }
.hw-chat-input input:disabled { opacity: 0.5; cursor: not-allowed; }

.hw-chat-send-button {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background-color: var(--hw-primary, #4C6EF5);
  color: var(--text-on-accent, #fff);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 150ms ease;
  flex-shrink: 0;
}

.hw-chat-send-button:hover:not(:disabled) { filter: brightness(0.9); }
.hw-chat-send-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Typing Indicator */
.hw-typing-indicator {
  align-self: flex-start;
  display: flex;
  gap: 4px;
  padding: 12px 16px;
  background-color: var(--bg-surface, #F8F9FA);
  border-radius: 12px;
}

.hw-typing-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--text-hint, #ADB5BD);
  animation: hw-typing-bounce 1.4s infinite ease-in-out;
}

.hw-typing-dot:nth-child(1) { animation-delay: 0ms; }
.hw-typing-dot:nth-child(2) { animation-delay: 200ms; }
.hw-typing-dot:nth-child(3) { animation-delay: 400ms; }

@keyframes hw-typing-bounce {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hw-button { animation: none; }
  .hw-typing-dot { animation: none; opacity: 0.5; }
  .hw-chat-panel { animation: none; }
}

@media (max-width: 767px) {
  .hw-chat-panel {
    width: 100vw;
    /* 100vh overflows the visible viewport on mobile (the dynamic browser
       toolbar isn't subtracted), and with only `bottom: 0` the extra height
       pushes the header above the top edge — it gets cut off. Anchor to the
       top and use dvh so the panel tracks the actually-visible viewport. */
    top: 0;
    height: 100vh;
    height: 100dvh;
    bottom: 0;
    right: 0;
    left: 0;
    border-radius: 0;
  }
  .hw-chat-panel.bottom-left { right: 0; }

  /* Clear the status bar / notch on devices that expose a safe-area inset
     (needs viewport-fit=cover on the host page; a no-op of 0px otherwise). */
  .hw-chat-header {
    box-sizing: border-box;
    height: calc(48px + env(safe-area-inset-top, 0px));
    padding-top: env(safe-area-inset-top, 0px);
  }

  /* Keep the input row above the home indicator. */
  .hw-chat-input {
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
  }

  /* The panel is fullscreen on mobile and the header has its own close button,
     so the floating action button would just overlap the input — hide it. */
  .hw-button.open {
    display: none;
  }
}
.app-layout {
  height: 100%;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.skip-nav {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
  z-index: 100;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-radius: var(--radius-sm);
  white-space: nowrap;
}

.skip-nav:focus {
  position: fixed;
  top: 8px;
  left: 8px;
  width: auto;
  height: auto;
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-layout__mock-banner {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
  font-size: 12px;
  line-height: 1.4;
  padding: 6px 12px;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border);
}

.app-layout__body {
  flex: 1;
  min-height: 0;
  display: flex;
  overflow: visible;
}

/* Chat-project layout (experimental new chat UX, a project open): a full-width top bar over a
   two-column body — the QA chat on the left, the project view on the right. Modelled on nut.new's
   TopNav + two-pane workbench. Replaces the sidebar + main for this state. */
.app-layout__body--chat-project {
  flex-direction: column;
  overflow: hidden;
}

.chat-project {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface-secondary);
}

.chat-topbar {
  flex: 0 0 auto;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.chat-topbar__left {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1 1 auto;
}

.chat-topbar__back,
.chat-topbar__action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  flex: 0 0 auto;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.chat-topbar__back:hover,
.chat-topbar__action:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* Admin-mode toggle when active: highlight so it's clear admin extras are currently visible. */
.chat-topbar__action--active {
  background: color-mix(in srgb, var(--color-brand) 12%, transparent);
  color: var(--color-brand-text);
}

.chat-topbar__action--active:hover {
  background: color-mix(in srgb, var(--color-brand) 20%, transparent);
  color: var(--color-brand-text);
}

.chat-topbar__sep {
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  background: var(--color-border);
}

.chat-topbar__title {
  margin: 0;
  min-width: 0;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.chat-topbar__right {
  display: flex;
  align-items: center;
  gap: 4px;
  flex: 0 0 auto;
}

.chat-project__body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  overflow: hidden;
}

/* Left column: the QA chat. Fixed-ish width that scales a little with the viewport, like nut.new's
   resizable chat pane (which defaults to ~1/3 and clamps 20–60%). */
.chat-project__chat {
  flex: 0 0 clamp(340px, 34%, 520px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  overflow: hidden;
}

/* Draggable divider between the chat and the project view — lets the user widen or narrow the chat
   pane (its width is then persisted). A thin seam with a wider invisible hit area for easy grabbing. */
.chat-project__resizer {
  flex: 0 0 auto;
  width: 6px;
  margin: 0 -3px;
  cursor: col-resize;
  background: transparent;
  z-index: 3;
  touch-action: none;
  transition: background 0.15s ease;
}

.chat-project__resizer:hover,
.chat-project__resizer:active {
  background: color-mix(in srgb, var(--color-brand, #f02d5e) 45%, transparent);
}

/* Right column: the project view. Reuses .app-main (padding, scroll, and the page :has rules) and
   just needs to flex to fill the remaining width. */
.chat-project__main {
  flex: 1 1 auto;
  min-width: 0;
}

/* A bug open in the project pane renders BugReport, whose "Full Bug Report" markdown banner is
   position:fixed so it pins to the viewport bottom in the standard full-page layout. Inside the
   chat-project layout that viewport-fixed banner spans the whole width — overlapping the QA chat
   column (desktop two-column layout) and the mobile Chat/Project tab bar, with no way to dismiss it
   (a dead end). .chat-project__main is position:relative (via .app-main), so pin the banner to this
   pane instead: it stays within the project column, clear of the chat, and on the mobile Chat tab
   the pane is display:none so the banner is hidden there entirely. */
.chat-project__main .bug-report__report-banner {
  position: absolute;
}

/* A bug report scrolls in an inner container (.bug-detail__main), while .app-main is overflow:hidden
   for a bug (so the pinned banner above can stay put) and carries the pane's padding. That padding
   frame is a dead zone for the mouse wheel: the report only scrolls when the pointer is over the
   inset content, not the gutter around it — the reported "scrolling only works in the center" bug. On
   desktop, drop .app-main's padding for a bug and let the scroll container fill the pane edge-to-edge
   (carrying the frame padding itself), so the wheel scrolls the report from anywhere in the pane.
   Content stays capped and centered via .bug-report. Mobile keeps .app-main as the single scroll
   container (see the media queries in AppShell.css / BugDetail.css), so it needs none of this. */
@media (min-width: 769px) {
  .chat-project__main.app-main:has(> .bug-detail) {
    padding: 0;
  }

  .chat-project__main .bug-detail {
    max-width: none;
  }

  .chat-project__main .bug-detail__main {
    padding: 28px 36px 0;
  }

  .chat-project__main .bug-report {
    width: 100%;
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Mobile chat layout (experimental new chat UX, a project open on a small screen): one pane at a
   time (chat or project view) with a bottom selector to switch. Both panes stay mounted so the chat
   keeps its conversation and the project view keeps its scroll position while toggling. */
.chat-project--mobile .chat-project__body {
  position: relative;
}

.chat-project--mobile .chat-project__chat {
  flex: 1 1 auto;
  border-right: none;
}

.chat-project--mobile[data-mobile-view='project'] .chat-project__chat {
  display: none;
}

.chat-project--mobile[data-mobile-view='chat'] .chat-project__main {
  display: none;
}

/* Bottom segmented selector (nut.new-style mobile toggle between chat and workbench). */
.chat-mobile-tabs {
  flex: 0 0 auto;
  display: flex;
  gap: 6px;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
}

.chat-mobile-tabs__btn {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.chat-mobile-tabs__btn--active {
  background: var(--color-brand, #f02d5e);
  border-color: var(--color-brand, #f02d5e);
  color: var(--text-on-accent, #fff);
}

.app-sidebar {
  flex-shrink: 0;
  width: 232px;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-right: 1px solid var(--color-border);
  padding: 12px 10px 12px;
  transition: width 0.22s ease, padding 0.22s ease;
  position: relative;
  z-index: 2;
}

/* Chat-mode sidebar (experimental new-project-overview): a wider sidebar whose top holds a user info
   row + the four primary actions, and whose bottom ~3/4 hosts the embedded QA chat. */
.app-sidebar--chat {
  width: 360px;
}

.app-sidebar__chat-top {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border-light);
}

/* A row of icon-only action buttons (Projects, New project, Help, Discord). */
.app-sidebar__chat-actions {
  display: flex;
  gap: 6px;
}

.app-sidebar__chat-action {
  flex: 1 1 0;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  text-decoration: none;
}

.app-sidebar__chat-action:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

.app-sidebar__chat-panel {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 8px -10px -12px;
  border-top: 1px solid var(--color-border);
}

/* When the panel holds the project list (no project open) instead of the flush chat, keep the list
   aligned with the sidebar's normal padding — the chat-top row above already provides the divider. */
.app-sidebar__chat-panel--list {
  margin: 8px 0 0;
  border-top: none;
}

/* Collapsed chat rail: user avatar + the four action icons stacked at the top, in expanded order. */
.app-sidebar__chat-rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.app-sidebar__chat-actions--rail {
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.app-sidebar__chat-actions--rail .app-sidebar__chat-action {
  flex: 0 0 auto;
  width: 38px;
}

/* Chat-mode: the user menu fills the top row; its dropdown opens downward within the sidebar so it
   isn't clipped by the viewport's left edge (the default right-anchored dropdown overflows left when
   the trigger sits near x=0). Mirrors the footer user-menu treatment. */
.app-sidebar__chat-top .user-menu,
.app-sidebar__chat-top .user-menu__container {
  width: 100%;
}
.app-sidebar__chat-top .user-menu__trigger {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
}
.app-sidebar__chat-top .user-menu__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.app-sidebar__chat-top .user-menu__dropdown {
  top: 100%;
  bottom: auto;
  left: 0;
  right: 0;
  margin-top: 4px;
}

/* Collapsed rail: open the avatar menu to the right of the rail (never off the left edge). */
.app-sidebar__chat-rail .user-menu__dropdown {
  top: 0;
  bottom: auto;
  left: calc(100% + 10px);
  right: auto;
  margin: 0;
  min-width: 200px;
}

.app-layout__body--sidebar-collapsed .app-sidebar {
  width: 64px;
  padding-left: 8px;
  padding-right: 8px;
}

.app-sidebar__top {
  flex-shrink: 0;
}

.app-sidebar__brand-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.app-sidebar__brand-row--collapsed {
  flex-direction: column;
  gap: 0;
  align-items: stretch;
}

.app-sidebar__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 8px 10px;
  border-radius: var(--radius);
  color: var(--color-text-primary);
}

.app-sidebar__brand img {
  flex-shrink: 0;
}

.app-sidebar__brand-hover {
  position: relative;
  flex: 1;
  min-width: 0;
  min-height: 42px;
  border-radius: var(--radius);
}

.app-sidebar__brand-hover--rail {
  width: 100%;
}

.app-sidebar__brand-mark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: var(--color-text-primary);
  border-radius: var(--radius);
  transition: opacity 0.15s ease;
  pointer-events: none;
}

.app-sidebar__brand-mark--collapsed {
  justify-content: center;
  padding: 8px;
}

.app-sidebar__pin-btn--overlay {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.app-sidebar__brand-hover:hover .app-sidebar__brand-mark,
.app-sidebar__brand-hover:focus-within .app-sidebar__brand-mark {
  opacity: 0;
  pointer-events: none;
}

.app-sidebar__brand-hover:hover .app-sidebar__pin-btn--overlay,
.app-sidebar__brand-hover:focus-within .app-sidebar__pin-btn--overlay {
  opacity: 1;
  pointer-events: auto;
}

.app-sidebar__pin-btn--overlay:focus-visible {
  opacity: 1;
  pointer-events: auto;
}

.app-sidebar__brand-hover:hover {
  background: var(--color-surface-hover);
}

.app-sidebar__brand-text {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.app-sidebar__pin-btn {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.app-sidebar__pin-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.app-sidebar__pin-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-sidebar__pin-btn.app-sidebar__pin-btn--overlay {
  width: 100%;
  height: 100%;
  min-height: 42px;
}

.app-sidebar__nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-height: 0;
}

.app-sidebar__link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s;
}

.app-sidebar__link:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
  text-decoration: none;
}

.app-sidebar__link--active {
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
}

.app-sidebar__link--icon-only {
  justify-content: center;
  padding-left: 10px;
  padding-right: 10px;
}

button.app-sidebar__link {
  appearance: none;
  border: none;
  margin: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
  width: 100%;
}

/* Hover tooltips (collapsed sidebar) — appears to the right */
.app-sidebar__tooltip-host {
  position: relative;
  width: 100%;
}

.app-sidebar__tooltip {
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  z-index: 400;
  padding: 6px 10px;
  border-radius: var(--radius);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
  color: var(--text-on-accent);
  background: var(--color-primary);
  border: 1px solid color-mix(in srgb, var(--color-primary) 88%, var(--color-border));
  box-shadow: var(--shadow-float);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, visibility 0.12s ease;
}

.app-sidebar__tooltip-host:hover .app-sidebar__tooltip,
.app-sidebar__tooltip-host:focus-within .app-sidebar__tooltip {
  opacity: 1;
  visibility: visible;
}

/* Sidebar project list */
.sidebar-projects {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
  min-height: 0;
  flex: 1;
  overflow: hidden;
}

.sidebar-projects__scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.sidebar-projects__search {
  flex-shrink: 0;
  padding: 2px 10px 8px;
}

.sidebar-projects__search-field {
  position: relative;
  width: 100%;
}

.sidebar-projects__search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  width: 14px;
  height: 14px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.sidebar-projects__search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px 6px 30px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  font-size: 12px;
  line-height: 1.35;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  transition: border-color 0.12s ease, background 0.12s ease;
}

.sidebar-projects__search-input:hover {
  background: var(--color-surface);
}

.sidebar-projects__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 3px color-mix(in srgb, var(--color-primary) 28%, transparent);
}

.sidebar-projects__search-input::placeholder {
  color: var(--color-text-muted);
}

.sidebar-projects__filter-empty {
  margin: 0;
  padding: 10px 12px 4px;
  font-size: 12px;
  line-height: 1.35;
  color: var(--color-text-muted);
}

.sidebar-projects__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px 4px;
}

.sidebar-projects__title-link {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-tertiary, var(--color-text-muted));
  text-decoration: none;
  border-radius: 4px;
}

.sidebar-projects__title-link:hover {
  color: var(--color-text-primary);
}

.sidebar-projects__title-link--active {
  color: var(--color-text-primary);
}

.sidebar-projects__add {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  color: var(--text-tertiary, var(--color-text-muted));
  text-decoration: none;
  transition: background 0.12s, color 0.12s;
}

.sidebar-projects__add:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.sidebar-projects__item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: background-color 0.12s, color 0.12s;
  min-width: 0;
}

.sidebar-projects__item:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
  text-decoration: none;
}

.sidebar-projects__item--active {
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
}

.sidebar-projects__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sidebar-projects__spinner {
  flex-shrink: 0;
  color: var(--color-status-in-progress, var(--color-text-secondary));
  animation: sidebar-projects-spin 1s linear infinite;
}

@keyframes sidebar-projects-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.sidebar-projects__badge {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-success) 15%, transparent);
  color: var(--color-status-active-text);
}

/* Skeleton loading placeholders */
@keyframes sidebar-skeleton-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}

.sidebar-projects__skeleton {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.sidebar-projects__skeleton-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  min-height: 33px;
}

.sidebar-projects__skeleton-bar {
  flex: 1;
  height: 12px;
  border-radius: 4px;
  background: var(--color-text-secondary);
  animation: sidebar-skeleton-pulse 1.4s ease-in-out infinite;
}

.sidebar-projects__skeleton-badge {
  flex-shrink: 0;
  width: 38px;
  height: 12px;
  border-radius: 4px;
  background: var(--color-text-secondary);
  animation: sidebar-skeleton-pulse 1.4s ease-in-out infinite;
  animation-delay: 0.15s;
}

.sidebar-projects__skeleton-item:nth-child(2) .sidebar-projects__skeleton-bar { max-width: 60%; }
.sidebar-projects__skeleton-item:nth-child(3) .sidebar-projects__skeleton-bar { max-width: 85%; }
.sidebar-projects__skeleton-item:nth-child(4) .sidebar-projects__skeleton-bar { max-width: 50%; }

.app-sidebar__footer {
  flex-shrink: 0;
  padding-top: 12px;
  border-top: 1px solid var(--color-border-light);
  margin-top: auto;
}

.app-sidebar__footer .user-menu {
  width: 100%;
}

.app-sidebar__footer .user-menu__container {
  width: 100%;
}

.app-sidebar__footer .user-menu__trigger {
  width: 100%;
  justify-content: flex-start;
  padding: 8px 10px;
}

.app-sidebar__footer .user-menu__name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}

.app-sidebar__footer .user-menu__dropdown {
  top: auto;
  bottom: calc(100% + 6px);
  right: 0;
  left: 0;
  margin-top: 0;
}

.app-sidebar--collapsed .app-sidebar__footer .user-menu__dropdown {
  top: auto;
  bottom: 0;
  left: calc(100% + 10px);
  right: auto;
  margin: 0;
  transform: none;
  min-width: 200px;
}

.app-sidebar__footer .user-menu__sign-in {
  width: 100%;
  justify-content: center;
}

.app-sidebar--collapsed .app-sidebar__footer .user-menu__sign-in {
  width: auto;
  padding: 8px 10px;
}

/* Help button */
.app-sidebar__help-btn {
  cursor: pointer;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
}

.app-sidebar__guest-menu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.app-sidebar__guest-menu-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.app-sidebar__guest-menu-btn[aria-expanded='true'] {
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
}

/* Help chat window — docked, non-blocking (no full-page overlay) so the page
   stays clickable, which the widget's element selector needs. */
.app-help-dialog {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 1001;
  width: 420px;
  max-width: calc(100vw - 48px);
  height: 600px;
  max-height: calc(100vh - 48px);
  background: var(--color-surface);
  border-radius: 12px;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2), 0 0 0 1px var(--color-border);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: help-dialog-scale-in 0.15s ease;
}

@keyframes help-dialog-scale-in {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}

/* Scoped (form) intents — missing bug / report problem — present as a centered modal with a
   backdrop instead of the bottom-left docked panel used for open-ended help. */
.app-help-dialog__backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.45);
  animation: help-dialog-backdrop-in 0.15s ease;
}

@keyframes help-dialog-backdrop-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

.app-help-dialog--modal {
  top: 50%;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translate(-50%, -50%);
  animation: help-dialog-modal-in 0.15s ease;
}

@keyframes help-dialog-modal-in {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.96); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

/* The form header already states the task and instructions, so suppress the widget's generic
   dismissable intro banner in the scoped modal. */
.app-help-dialog--modal .hw-help-banner {
  display: none;
}

/* Form-style header shown for scoped intents (see HelpFormHeader). */
.app-help-form-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  border-bottom: 1px solid var(--color-border);
}

.app-help-form-header__row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.app-help-form-header__title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-text-primary);
}

.app-help-form-header__subject {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.app-help-form-header__instructions {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.app-help-dialog__close {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  border-radius: var(--radius);
  background: transparent;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}

.app-help-dialog__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.app-help-dialog__close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.app-help-dialog__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}

.app-help-dialog__body .hw-chat-panel {
  position: static !important;
  width: 100% !important;
  height: 100% !important;
  max-height: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: none !important;
}

.app-help-dialog .hw-message-bubble.response .hw-message-bubble-text {
  white-space: normal;
}

.app-help-dialog .hw-message-bubble-text .help-message-markdown {
  font-size: inherit;
  color: inherit;
  line-height: 1.5;
}

.app-help-dialog .hw-message-bubble-text .help-message-markdown .markdown-lite__heading {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 700;
  text-transform: none;
  letter-spacing: -0.01em;
}

.app-help-dialog .hw-message-bubble-text .help-message-markdown .markdown-lite__heading:first-child {
  margin-top: 0;
}

.app-help-dialog .hw-message-bubble-text .help-message-markdown .markdown-lite__paragraph,
.app-help-dialog .hw-message-bubble-text .help-message-markdown .markdown-lite__list {
  margin-bottom: 8px;
}

.app-main {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  background: var(--color-surface-secondary);
  padding: 28px 36px 48px;
  position: relative;
  z-index: 1;
}

.app-main:has(> .project-detail[data-testid='project-detail-page']),
.app-main:has(> .project-detail[data-testid='project-loading']),
.app-main:has(> .projects-page[data-testid='projects-page']),
.app-main:has(> .bug-detail[data-testid='bug-detail-page']),
.app-main:has(> .bug-detail[data-testid='bug-loading']) {
  overflow: hidden;
}

.app-main > * {
  flex: 0 1 auto;
  min-height: 0;
  width: 100%;
  max-width: min(1280px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.app-main > .project-detail[data-testid='project-detail-page'],
.app-main > .project-detail[data-testid='project-loading'],
.app-main > .projects-page[data-testid='projects-page'],
.app-main > .bug-detail[data-testid='bug-detail-page'],
.app-main > .bug-detail[data-testid='bug-loading'] {
  flex: 1 1 auto;
}

@media (max-width: 768px) {
  .app-sidebar__pin-btn {
    display: none;
  }

  .app-layout__body {
    flex-direction: column;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }

  .app-sidebar {
    width: 100% !important;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    align-items: center;
    padding: 10px 12px 8px;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    gap: 8px 10px;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--color-surface);
  }

  .app-sidebar__top {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .app-sidebar__brand-row {
    margin-bottom: 0;
    min-width: 0;
  }

  .app-sidebar__brand-row--collapsed {
    flex-direction: row;
    align-items: center;
  }

  .app-sidebar__brand-hover {
    min-width: 0;
    min-height: 36px;
  }

  .app-sidebar__brand {
    padding: 4px 6px;
  }

  .app-sidebar__brand-mark {
    padding: 4px 6px;
  }

  .app-sidebar__pin-btn.app-sidebar__pin-btn--overlay {
    width: 100%;
    min-height: 36px;
  }

  .app-sidebar__brand-text {
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .app-sidebar__tooltip {
    display: none;
  }

  .app-sidebar__nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 4px;
    min-height: unset;
    width: 100%;
    padding-bottom: 2px;
    mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 20px), transparent);
  }

  .app-sidebar__nav::-webkit-scrollbar {
    display: none;
  }

  .app-sidebar__link {
    flex-shrink: 0;
    padding: 8px 12px;
    font-size: 13px;
    white-space: nowrap;
  }

  .sidebar-projects {
    display: none;
  }

  .app-sidebar__footer {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding-top: 0;
    border-top: none;
    margin-top: 0;
    width: auto;
    justify-self: end;
  }

  .app-sidebar__footer .user-menu__sign-in {
    padding: 8px 14px;
    font-size: 13px;
  }

  .app-sidebar__footer .user-menu {
    min-height: 0;
    width: auto;
  }

  .app-sidebar__footer .user-menu__container {
    width: auto;
  }

  .app-sidebar__footer .user-menu__trigger {
    width: auto;
    justify-content: center;
    padding: 6px;
  }

  /* Mobile sheet is portaled to body — don't apply sidebar dropdown offsets */
  .app-sidebar__footer .user-menu__dropdown,
  .app-sidebar--collapsed .app-sidebar__footer .user-menu__dropdown {
    top: 100%;
    bottom: auto;
    left: auto;
    right: 0;
    transform: none;
  }

  .app-main {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: 16px 12px 32px;
  }

  .app-main:has(> .project-detail[data-testid='project-detail-page']),
  .app-main:has(> .project-detail[data-testid='project-loading']) {
    overflow: hidden;
    padding: 12px 12px 16px;
  }

  /* The Projects page scrolls as a single block on mobile: the header, the search toolbar, and the
     list all scroll together via .app-main, with no inner fixed/scrolling sections. Restore
     .app-main's scroll (the base :has rule disables it for the page's desktop fixed-header layout)
     and let the page size to its content instead of filling — and clipping at — the viewport. */
  .app-main:has(> .projects-page[data-testid='projects-page']) {
    overflow-y: auto;
    overflow-x: hidden;
    padding: 12px 12px 16px;
  }

  .app-main > .projects-page[data-testid='projects-page'] {
    flex: 0 0 auto;
  }

  /* The bug detail page disables its internal scroll containers on mobile
     (see BugDetail.css) and relies on .app-main to scroll instead. The base
     :has(> .bug-detail) rule forces overflow: hidden for desktop's internal
     scrolling, so restore scrolling here or the content below the sticky
     header is clipped and unreachable. */
  .app-main:has(> .bug-detail[data-testid='bug-detail-page']),
  .app-main:has(> .bug-detail[data-testid='bug-loading']) {
    overflow-y: auto;
    overflow-x: hidden;
  }
}
/* Layout for the embeddable, chrome-free `/p/*` iframe views.
   No sidebar, no masthead — just the page content on a scrollable, full-viewport surface. */
.embedded-shell {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px;
  background: var(--color-surface-secondary);
  overflow-x: hidden;
  overflow-y: auto;
}

/* Centered block for in-frame errors and the login prompt. Auto margins center it on both
   axes inside the flex-column shell. */
.embedded-error {
  margin: auto;
  text-align: center;
  color: var(--color-danger);
  font-size: 14px;
}
.subscription-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  overflow-y: auto;
  background: var(--color-bg);
  /* Column flex so the gate centers content horizontally (align-items) while
     letting it flow at its natural height vertically — a row flex would stretch
     the inner wrapper to the gate's full height (align-items: stretch), and the
     plan grid (min-height: 0) would then overflow downward past the footer,
     hiding the log-out button. Natural height instead lets overflow-y: auto
     scroll when the plans don't fit. justify-content stays flex-start (top) so
     tall content scrolls from the top rather than being clipped above the fold. */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48px 24px;
}

/* Desktop only — clear the left sidebar so centered content isn't hidden behind
   it. The sidebar is a fixed-width left column in its own stacking context above
   .app-main; this overlay spans the full viewport (inset: 0) and the sidebar
   simply paints over the gate's left edge, so we inset the content with
   padding-left rather than offsetting the box with `left` (which renders
   unreliably for a fixed box pinned on both sides). Widths mirror .app-sidebar in
   AppShell.css (232px expanded, 64px collapsed). */
@media (min-width: 769px) {
  .subscription-gate {
    padding-left: calc(232px + 24px);
  }

  .app-layout__body--sidebar-collapsed .subscription-gate {
    padding-left: calc(64px + 24px);
  }
}

/* Mobile — the sidebar is a sticky full-width TOP bar (z-index 10), and this gate
   renders inside .app-main, which has its own stacking context (z-index 1). A
   position: fixed gate is therefore trapped below the bar in the stacking order, so
   the bar paints over the gate's top — hiding the title with no way to scroll to it
   (it sits at scroll-top, permanently behind the bar). Switch to position: absolute
   so the gate overlays .app-main (its positioned ancestor) and naturally starts
   BELOW the top bar — the mobile analogue of the desktop "offset past the sidebar"
   above. Its own overflow-y: auto keeps the content scrollable. */
@media (max-width: 768px) {
  .subscription-gate {
    position: absolute;
  }
}

.subscription-gate__inner {
  position: relative;
  width: 100%;
  max-width: 1320px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.subscription-gate__close {
  position: absolute;
  top: 0;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border-radius: var(--radius);
  color: var(--text-secondary);
}

.subscription-gate__close:hover {
  color: var(--text-primary);
  background: var(--color-surface);
}

.subscription-gate__head {
  text-align: center;
}

.subscription-gate__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.subscription-gate__subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

.subscription-gate__footer {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.subscription-gate__logout {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border: 1px solid var(--border-color, var(--color-border));
  border-radius: var(--radius, 10px);
  background: var(--surface-primary, var(--color-surface));
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.subscription-gate__logout:hover {
  color: var(--text-primary);
  background: var(--surface-hover, var(--color-surface-hover));
  border-color: var(--text-secondary);
}
/* Chat-based onboarding surface (OnboardingChat.tsx). Shown on the Dashboard when the
   new_chat_experience experimental flag is on. */

.onboard {
  max-width: 720px;
  margin: 0 auto;
  padding: 32px 20px 48px;
  width: 100%;
}

/* Initial landing (phase 'url'): a centered hero over a prominent composer, mirroring nut.new's
   BaseChat intro. Extra top space lifts the hero off the top edge like the source. */
.onboard--landing { padding-top: clamp(24px, 7vh, 72px); }

.onboard__intro { text-align: center; margin-bottom: 28px; }

.onboard__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-brand, #f02d5e);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.onboard__title {
  font-size: clamp(2rem, 4.5vw, 2.9rem);
  font-weight: 700;
  line-height: 1.15;
  margin: 12px 0 10px;
  color: var(--color-text-primary);
}

.onboard__lead { color: var(--color-text-secondary); font-size: 1.05rem; margin: 0; }

/* The agent / free-QA callouts below the URL form (shared np-agentcta styling). */
.onboard__callouts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 560px;
  margin: 18px auto 0;
}

/* URL entry phase — the composer (shared ChatInput) sits in a centered prompt wrapper, matching
   nut.new's ChatPromptContainer: constrained width, a subtle shadow that lifts on hover. */
.onboard__prompt {
  max-width: 560px;
  margin: 0 auto;
}

.onboard__prompt .chat-input {
  margin: 0;
  box-shadow: var(--shadow-card, 0 1px 2px rgba(0, 0, 0, 0.06));
  transition: border-color 0.15s ease, box-shadow 0.2s ease;
}

.onboard__prompt .chat-input:hover { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1); }

/* Shared URL field, still used by the GitHub main-branch deployment-URL step in the chat phase. */
.onboard__url-field {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-muted);
}

.onboard__url-field:focus-within { border-color: var(--color-brand, #f02d5e); }

.onboard__url-input {
  flex: 1 1 auto;
  border: none;
  outline: none;
  background: transparent;
  padding: 13px 0;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.onboard__start-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 12px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand, #f02d5e);
  color: var(--text-on-accent, #fff);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
}

.onboard__start-btn:disabled { opacity: 0.5; cursor: not-allowed; }

/* Chat phase */
.onboard--chat {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 120px);
  max-height: 820px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.onboard__chat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border);
}

.onboard__chat-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.onboard__chat-url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 55%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  border-radius: var(--radius-pill);
  padding: 5px 11px;
  font-size: 0.8rem;
  cursor: pointer;
}

.onboard__chat-url:hover { border-color: var(--color-brand, #f02d5e); }

.onboard__chat-body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow-y: auto;
}

.onboard__chat-body .chat-log { padding: 16px 4px; }

.onboard__panel-wrap { padding: 0 4px 8px; }

/* Start QA button, shown below the chat input once setup is ready */
.onboard__start-btn--below-input {
  margin-top: 10px;
  justify-content: center;
  width: 100%;
}

/* Hint under a disabled Start QA button while the reverse proxy isn't connected yet. */
.onboard__start-hint {
  margin: 6px 4px 0;
  font-size: 0.8rem;
  color: var(--color-text-secondary);
  text-align: center;
}

/* Interstitial steps (detecting / reverse-proxy / login) share the chat shell + a step card. */
.onboard--step {
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding: 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.onboard__step {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  padding: 32px 16px;
}

.onboard__step-note { margin: 0; color: var(--color-text-secondary); font-size: 0.92rem; max-width: 460px; }

.onboard__step-card {
  margin: 20px auto;
  max-width: 560px;
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--color-surface-secondary);
}

.onboard__step-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-md);
  background: color-mix(in oklab, var(--color-brand, #f02d5e) 12%, transparent);
  color: var(--color-brand, #f02d5e);
  margin-bottom: 12px;
}

.onboard__step-title {
  font-size: 1.15rem;
  font-weight: 700;
  margin: 0 0 10px;
  color: var(--color-text-primary);
}

.onboard__step-text { margin: 0 0 12px; font-size: 0.9rem; line-height: 1.5; color: var(--color-text-secondary); }
.onboard__step-text code { word-break: break-all; }
.onboard__step-text--muted { color: var(--color-text-muted); font-size: 0.85rem; }

.onboard__step-actions { display: flex; gap: 12px; margin-top: 16px; }

.onboard__step-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 11px 18px;
  border: none;
  border-radius: var(--radius-md);
  background: var(--color-brand, #f02d5e);
  color: var(--text-on-accent, #fff);
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
}

/* The login step embeds ChatLoginsForm; drop its default outer margin inside the step card. */
.onboard__step-card .chat-form { margin: 8px 0 0; }

/* GitHub connect */
.onboard-github {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  padding: 14px;
  background: var(--color-surface-secondary);
}

.onboard-github__hint { margin: 0 0 12px; font-size: 0.85rem; color: var(--color-text-secondary); }

.onboard-github__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: var(--radius-md);
  background: var(--color-brand, #f02d5e);
  color: var(--text-on-accent, #fff);
  font-weight: 600;
  font-size: 0.88rem;
  text-decoration: none;
}

.onboard__error {
  color: var(--color-danger);
  font-size: 0.85rem;
  margin: 12px auto 0;
  text-align: center;
}

.onboard__error--inline { text-align: left; margin: 8px 4px 0; }

.onboard-spin { animation: onboard-spin 0.8s linear infinite; }
@keyframes onboard-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .onboard-spin { animation: none; } }

@media (max-width: 640px) {
  .onboard--chat { height: calc(100vh - 90px); }
  .onboard-summary__row { flex-direction: column; gap: 0; }
  .onboard-summary__row dt { flex-basis: auto; }
}
.dashboard {
  padding: 0;
}

@media (max-width: 640px) {
  .dashboard {
    padding: 12px;
  }
}
.project-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
}

.project-list__empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.project-card {
  position: relative;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  transition: border-color 0.15s;
  /* Grid items default to min-width:auto, so the card refuses to shrink below its content's
     intrinsic width — a long, unbreakable project URL then pushes the card past the viewport's
     right edge on narrow screens. min-width:0 lets the track shrink so the card stays contained. */
  min-width: 0;
}

.project-card:hover {
  border-color: color-mix(in srgb, var(--color-text-primary) 22%, var(--color-border));
}

.project-card:has(.project-card__name a:focus-visible) {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary);
}

.project-card__thumbnail {
  position: relative;
  aspect-ratio: 1200 / 630;
  margin: -20px -20px 16px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  overflow: hidden;
  background: color-mix(in srgb, var(--color-text-primary) 6%, var(--color-surface));
  border-bottom: 1px solid var(--color-border);
}

.project-card__thumbnail-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.project-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.project-card__name {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-card__name a {
  color: inherit;
  text-decoration: none;
}

.project-card__name a::after {
  content: '';
  position: absolute;
  inset: 0;
}

.project-card__name a:focus-visible {
  outline: none;
}

.project-card__url {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
}

/* Truncate the URL text itself: text-overflow only applies to the block containing the text run,
   so it has to live on the shrinkable flex child (min-width:0), not the flex container above. */
.project-card__url > span:not(.sr-only) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.project-card__url:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.project-card__stats {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.project-card__stat {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

@media (max-width: 640px) {
  .project-list {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  }

  .project-card {
    padding: 16px;
  }

  .project-card__thumbnail {
    margin: -16px -16px 14px;
  }
}

@media (max-width: 480px) {
  .project-list {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .project-card {
    padding: 14px;
    border-radius: 10px;
  }

  .project-card__thumbnail {
    margin: -14px -14px 12px;
    border-radius: 10px 10px 0 0;
  }
}
.projects-page {
  padding: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.projects-page__header {
  flex-shrink: 0;
  margin-bottom: 28px;
}

.projects-page__back {
  margin-bottom: 20px !important;
}

.projects-page__fill {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}

.projects-page__title {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  line-height: 1.25;
}

.projects-page__subtitle {
  margin: 8px 0 0;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 42rem;
}

.projects-page__toolbar {
  flex-shrink: 0;
  padding-bottom: 16px;
  margin-bottom: 0;
  max-width: min(400px, 100%);
  border-bottom: 1px solid var(--color-border-light);
}

.projects-page__list-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 12px;
}

.projects-page__search-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.projects-page__search {
  position: relative;
  display: flex;
  align-items: center;
}

.projects-page__search-icon {
  position: absolute;
  left: 12px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.projects-page__search-input {
  width: 100%;
  padding: 10px 12px 10px 38px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  transition: border-color 150ms ease, background 150ms ease;
}

.projects-page__search-input:hover {
  background: var(--color-surface);
}

.projects-page__search-input:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-surface-secondary), 0 0 0 4px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.projects-page__search-input::placeholder {
  color: var(--color-text-muted);
}

.projects-page__no-results {
  margin: 0;
  padding: 32px 20px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.projects-page__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 48px 24px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.projects-page__spinner {
  animation: projects-page-spin 1s linear infinite;
}

@keyframes projects-page-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.projects-page__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
  text-align: center;
}

.projects-page__error p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.projects-page__retry {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent, #fafafa);
  border: none;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.projects-page__retry:hover {
  background: var(--color-primary-hover);
}

.projects-page__retry:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* On mobile, everything below the top nav scrolls as one block via .app-main (see AppShell.css).
   Drop the page's internal scroll container and fixed-height fill so the header and search toolbar
   are no longer pinned — they scroll away with the list instead of shrinking the viewable area. */
@media (max-width: 768px) {
  .projects-page__list-scroll {
    flex: 0 0 auto;
    min-height: 0;
    overflow: visible;
    -webkit-overflow-scrolling: auto;
  }

  .projects-page__fill {
    flex: 0 0 auto;
    overflow: visible;
  }
}
.back-nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 8px 18px;
  margin: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.25;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition:
    background 0.15s ease,
    border-color 0.15s ease,
    color 0.15s ease;
}

.back-nav-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
  border-color: color-mix(in srgb, var(--color-text-primary) 10%, var(--color-border));
}

.back-nav-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.back-nav-btn__icon {
  flex-shrink: 0;
}

.back-nav-btn__label {
  white-space: nowrap;
}

@media (max-width: 640px) {
  .back-nav-btn--compact-sm {
    position: relative;
    padding: 8px 12px;
  }

  .back-nav-btn--compact-sm .back-nav-btn__label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}
.share-dialog__overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  display: flex;
  /* Center the dialog, but keep it reachable when it's taller than the viewport (common on mobile):
     overflow-y makes the overlay scrollable, and the dialog's `margin: auto` centers it while
     collapsing to 0 on overflow — so the dialog aligns to the top instead of being cropped. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  z-index: 100;
  padding: 16px;
}

.share-dialog__content {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 2rem);
  /* dvh tracks the mobile browser chrome (URL bar); plain vh sizes to the larger layout viewport. */
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow-y: auto;
  box-shadow: var(--shadow-modal);
}

.share-dialog__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.share-dialog__title {
  font-size: 18px;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
}

.share-dialog__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  border-radius: var(--radius);
  cursor: pointer;
}

.share-dialog__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.share-dialog__reimburse {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 18px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-success, #16a34a) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-success, #16a34a) 40%, transparent);
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.share-dialog__reimburse > svg {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-success, #16a34a);
}

.share-dialog__reimburse-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.share-dialog__reimburse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-success, #16a34a);
  cursor: pointer;
  text-decoration: underline;
}

.share-dialog__reimburse-toggle:hover {
  color: color-mix(in srgb, var(--color-success, #16a34a) 80%, black);
}

.share-dialog__reimburse-chevron {
  transition: transform 0.15s;
}

.share-dialog__reimburse-chevron--open {
  transform: rotate(180deg);
}

.share-dialog__reimburse-steps {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.share-dialog__card-preview {
  margin-bottom: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-secondary);
  /* Reserve the 1200x630 (1.905:1) aspect ratio so the dialog doesn't jump as the image loads. */
  aspect-ratio: 1200 / 630;
}

.share-dialog__card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.share-dialog__card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
}

.share-dialog__stats {
  display: flex;
  gap: 10px;
  margin-bottom: 18px;
}

.share-dialog__stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 12px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-secondary);
}

.share-dialog__stat-value {
  font-size: 22px;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1.1;
}

.share-dialog__stat-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.share-dialog__tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
}

.share-dialog__tab {
  flex: 1;
  padding: 7px 10px;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.share-dialog__tab:hover {
  color: var(--color-text-primary);
}

.share-dialog__tab--active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  box-shadow: var(--shadow-sm, 0 1px 2px rgba(0, 0, 0, 0.08));
}

.share-dialog__preview {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  resize: vertical;
  color: var(--color-text-primary);
  background: var(--color-surface);
  font-family: inherit;
  white-space: pre-wrap;
}

.share-dialog__preview:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

.share-dialog__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
  min-height: 16px;
}

.share-dialog__count {
  font-size: 12px;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.share-dialog__count--over {
  color: var(--color-danger);
  font-weight: 600;
}

.share-dialog__note {
  font-size: 12px;
  color: var(--color-warning, #b45309);
  margin-left: auto;
}

.share-dialog__make-public {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 0;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
  text-decoration: underline;
}

.share-dialog__make-public:hover:not(:disabled) {
  color: var(--color-primary-hover);
}

.share-dialog__make-public:disabled {
  opacity: 0.6;
  cursor: default;
  text-decoration: none;
}

.share-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 18px;
}

.share-dialog__open-btn,
.share-dialog__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.share-dialog__open-btn {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  text-decoration: none;
}

.share-dialog__open-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.share-dialog__copy-btn {
  background: var(--color-primary);
  color: white;
  border: none;
}

.share-dialog__copy-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.share-dialog__copy-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.share-dialog__open-btn:focus-visible,
.share-dialog__copy-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .share-dialog__tab {
    font-size: 12px;
    padding: 7px 6px;
  }
}
.project-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: nowrap;
}

.project-header__info {
  min-width: 0;
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.project-header__name {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  flex-shrink: 0;
  max-width: 100%;
}

.project-header__name--editable {
  cursor: pointer;
  border-radius: var(--radius);
  padding: 2px 6px;
  margin-left: -6px;
}

.project-header__name--editable:hover {
  background: var(--color-surface-hover);
}

.project-header__name--editable:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.project-header__name-input {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0 0 0 -6px;
  padding: 2px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  width: 100%;
  outline: none;
  font-family: inherit;
}

.project-header__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.project-header__url:hover {
  color: var(--color-text-primary);
}

.project-header__url:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.project-header__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.project-header__share-btn,
.project-header__pause-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--color-text-secondary);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.project-header__share-btn:hover,
.project-header__pause-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-text-muted);
  color: var(--color-text-primary);
}

.project-header__share-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* Keep the disabled Share button visually static — no hover affordance while it can't be clicked. */
.project-header__share-btn:disabled:hover {
  background: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
}

.project-header__delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius-pill);
  font-size: 13px;
  color: var(--color-danger);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.project-header__delete-btn:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--text-on-accent);
}

.project-header__delete-confirm {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.project-header__confirm-delete-btn {
  padding: 6px 12px;
  border: none;
  background: var(--color-danger);
  color: white;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.project-header__confirm-delete-btn:hover {
  background: var(--color-danger-hover);
}

.project-header__cancel-delete-btn {
  padding: 6px 12px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  font-size: 13px;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.project-header__cancel-delete-btn:hover {
  background: var(--color-surface-hover);
}

@media (max-width: 640px) {
  .project-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .project-header__info {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .project-header__name {
    font-size: 18px;
  }

  .project-header__name-input {
    font-size: 18px;
  }

  .project-header__url {
    display: flex;
    max-width: 100%;
    font-size: 13px;
  }

  .project-header__actions {
    width: 100%;
    gap: 8px;
  }

  .project-header__share-btn,
  .project-header__pause-btn,
  .project-header__delete-btn {
    flex: 1;
    justify-content: center;
    min-height: 40px;
    padding: 10px 12px;
  }

  .project-header__delete-confirm {
    flex-wrap: wrap;
    width: 100%;
    gap: 8px;
  }

  .project-header__confirm-delete-btn,
  .project-header__cancel-delete-btn {
    min-height: 36px;
  }
}
.tab-navigation {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--color-border);
  margin-bottom: 24px;
  scrollbar-width: none;
}

.tab-navigation::-webkit-scrollbar {
  display: none;
}

.tab-navigation__tab {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 12px 16px;
  margin-bottom: -1px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  cursor: pointer;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}

.tab-navigation__tab:hover {
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-surface-secondary) 85%, transparent);
}

.tab-navigation__tab:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.tab-navigation__tab--active {
  color: var(--color-text-primary);
  font-weight: 600;
  border-bottom-color: var(--color-text-primary);
}

@media (max-width: 640px) {
  .tab-navigation {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    margin-bottom: 16px;
    margin-left: -4px;
    margin-right: -4px;
    padding-left: 4px;
    padding-right: 4px;
  }

  .tab-navigation__tab {
    padding: 10px 14px;
    font-size: 13px;
    white-space: nowrap;
    scroll-snap-align: start;
  }
}
.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

/* Default variant - project status */
.status-badge--default-active {
  background: var(--color-status-active-bg);
  color: var(--color-status-active);
}

.status-badge--default-paused {
  background: var(--color-status-paused-bg);
  color: var(--color-status-paused);
}

.status-badge--default-completed {
  background: var(--color-status-completed-bg);
  color: var(--color-status-active-text);
}

.status-badge--default-failed {
  background: var(--color-status-failed-bg);
  color: var(--color-status-failed);
}

.status-badge--default-in-progress {
  background: var(--color-status-in-progress-bg);
  color: var(--color-status-in-progress);
}

.status-badge--default-unresolved {
  background: var(--color-status-paused-bg);
  color: var(--color-status-paused);
}

/* Severity variant */
.status-badge--severity-critical {
  background: var(--color-severity-critical-bg);
  color: var(--color-severity-critical);
}

.status-badge--severity-high {
  background: var(--color-severity-high-bg);
  color: var(--color-severity-high);
}

.status-badge--severity-medium {
  background: var(--color-severity-medium-bg);
  color: var(--color-severity-medium);
}

.status-badge--severity-low {
  background: var(--color-severity-low-bg);
  color: var(--color-severity-low);
}

/* Bug status variant */
.status-badge--bug-open {
  background: var(--color-bug-open-bg);
  color: var(--color-bug-open);
}

.status-badge--bug-fixed {
  background: var(--color-bug-fixed-bg);
  color: var(--color-bug-fixed);
}

.status-badge--bug-wontfix {
  background: var(--color-bug-wontfix-bg);
  color: var(--color-bug-wontfix);
}

.status-badge--bug-invalid {
  background: var(--color-bug-invalid-bg);
  color: var(--color-bug-invalid);
}

.status-badge--bug-reopened {
  background: var(--color-bug-reopened-bg);
  color: var(--color-bug-reopened);
}

.status-badge--bug-judge-rejected {
  background: var(--color-severity-high-bg);
  color: var(--color-severity-high);
}
.guidance-update {
  display: inline-flex;
}

.guidance-update__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.guidance-update__trigger:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-light);
}

.guidance-update__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  /* Center the dialog, but keep it reachable when it's taller than the viewport (common on mobile):
     overflow-y makes the overlay scrollable, and the dialog's `margin: auto` centers it while
     collapsing to 0 on overflow — so the dialog aligns to the top instead of being cropped. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.guidance-update__dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 480px;
  max-width: 90vw;
  max-height: calc(100vh - 2rem);
  /* dvh tracks the mobile browser chrome (URL bar); plain vh sizes to the larger layout viewport. */
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow-y: auto;
}

.guidance-update__dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.guidance-update__dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.guidance-update__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.guidance-update__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
}

.guidance-update__description {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.guidance-update__textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  box-sizing: border-box;
}

.guidance-update__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.guidance-update__error {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 8px;
}

.guidance-update__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.guidance-update__cancel {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.guidance-update__cancel:hover {
  background: var(--color-surface-hover);
}

.guidance-update__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.guidance-update__submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.guidance-update__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.guidance-update__spinner {
  animation: guidance-update-spin 1s linear infinite;
}

@keyframes guidance-update-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.guidance-update__success {
  font-size: 13px;
  color: var(--color-text-primary);
  padding: 16px 0;
  text-align: center;
  line-height: 1.5;
}

.guidance-update__progress-link {
  display: block;
  margin-top: 8px;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
}

.guidance-update__progress-link:hover {
  text-decoration: underline;
}

.guidance-update__retrigger {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.4;
  cursor: pointer;
}

.guidance-update__retrigger input {
  margin-top: 2px;
  cursor: pointer;
}
.bug-status-selector {
  position: relative;
}

.bug-status-selector--block {
  flex: 1;
}

.bug-status-selector--inline {
  justify-self: end;
  flex: none;
}

.bug-status-selector__btn {
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  background: var(--color-surface);
  color: var(--color-text-primary);
  text-align: left;
  cursor: pointer;
}

.bug-status-selector--block .bug-status-selector__btn {
  width: 100%;
}

.bug-status-selector--inline .bug-status-selector__btn {
  border-radius: var(--radius-pill);
  padding: 0 16px;
}

.bug-status-selector__btn:hover {
  border-color: var(--color-primary);
}

.bug-status-selector__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bug-status-selector__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 100%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  z-index: 50;
  padding: 6px;
}

/* In a toolbar the control is right-aligned, so open the menu toward the left edge. */
.bug-status-selector--inline .bug-status-selector__dropdown {
  left: auto;
  right: 0;
}

.bug-status-selector__dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  color: var(--color-text-primary);
  white-space: nowrap;
  cursor: pointer;
}

.bug-status-selector__dropdown-item:hover,
.bug-status-selector__dropdown-item:focus-visible {
  background: var(--color-surface-secondary);
}

.bug-status-selector__dropdown-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}
.bug-report {
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: min-content;
  /* Reserve room for the fixed "Full Bug Report" banner pinned to the viewport bottom so the last
     content (e.g. the guidance footer) isn't hidden behind it. */
  padding-bottom: 64px;
}

.bug-report__sticky-header {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
  margin: 0 0 16px;
  padding: 14px 16px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: 0 6px 20px -10px color-mix(in srgb, var(--color-text-primary) 22%, transparent);
}

/* On mobile the whole page scrolls in .app-main (see BugDetail.css), so a
   sticky header would pin to the top of that scroll container and cover the
   content beneath it. Let it scroll away with the rest of the page instead. */
@media (max-width: 768px) {
  .bug-report__sticky-header {
    position: static;
  }
}

.bug-report__sticky-toolbar {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 12px;
}

.bug-report__sticky-toolbar .back-nav-btn {
  justify-self: start;
}

.bug-report__delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  justify-self: end;
  margin: 0;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  font-size: 13px;
  font-weight: 500;
  font-family: inherit;
  padding: 8px 14px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bug-report__delete-btn:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--text-on-accent);
}

.bug-report__delete-btn:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .bug-report__delete-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
  }
}

.bug-report__mobile-sidebar {
  display: none;
}

@media (max-width: 768px) {
  .bug-report__mobile-sidebar {
    display: block;
    margin-bottom: 8px;
  }
}

.bug-report__scroll-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bug-report__title-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

/* Green call-to-action matching the "Copy Bug Reports" (copy-all) button so the two copy
   actions read as the same kind of control. See CopyBugReportsButton.css. */
.bug-report__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  background: var(--color-success);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-pill);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-success) 35%, transparent);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.bug-report__copy-btn:hover {
  background: color-mix(in srgb, var(--color-success) 88%, #000);
  border-color: color-mix(in srgb, var(--color-success) 88%, #000);
  color: #ffffff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-success) 35%, transparent);
}

.bug-report__copy-btn:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}

/* Copy button living inside the pinned report banner's bar — same green control as the header
   copy button, just without the header's top margin nudge. */
.bug-report__copy-btn--inline {
  margin-top: 0;
  flex-shrink: 0;
}

/* Pinned "Full Bug Report" banner anchored to the bottom of the viewport. Collapsed, it's just the
   bar (expand toggle + green copy button); expanding reveals the scrollable markdown panel above
   the bar. Fixed positioning keeps it in view no matter where the page has scrolled. */
.bug-report__report-banner {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  box-shadow: 0 -6px 20px -12px color-mix(in srgb, var(--color-text-primary) 30%, transparent);
}

/* In the chat-project layout the banner is position:absolute inside .chat-project__main (see
   AppShell.css), whose bottom edge already sits directly on top of the mobile Chat/Project tab bar —
   the tab bar is a sibling below .chat-project__body, not an overlay. So the banner belongs at
   bottom:0 (the base rule). An earlier tab-bar-height lift here — a holdover from when the banner was
   position:fixed to the viewport — pushed it that far ABOVE the tab bar, opening a gap that let page
   content show through between the two. */

/* On a phone a bug report fills the screen on its own: AppShell drops the chat column and the
   Chat/Project tab bar (see .chat-project--mobile-bug), so the banner should pin to the viewport
   bottom exactly like the standard full-page layout. The `.chat-project__main` override (AppShell.css)
   otherwise makes it absolute — which, since that pane is the scroll container on mobile, would let
   the banner ride to the end of the content instead of staying in view. Higher specificity (3
   classes) beats both that override and the tab-bar offset above. */
.chat-project--mobile-bug .chat-project__main .bug-report__report-banner {
  position: fixed;
  bottom: 0;
}

.bug-report__report-banner-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 16px;
}

.bug-report__report-banner-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.bug-report__report-banner-toggle:hover {
  background: var(--color-surface-secondary);
}

.bug-report__report-banner-toggle:focus-visible {
  outline: 2px solid var(--color-accent, var(--color-success));
  outline-offset: 2px;
}

/* Expandable markdown panel sitting above the bar. Its inner preview scrolls; the panel itself is
   centered to the same width as the bar. */
.bug-report__report-banner-panel {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 14px 16px 4px;
  border-bottom: 1px solid var(--color-border);
}

.bug-report__markdown-help {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-muted);
  margin: 0 0 18px;
}

/* Scrollable, monospace preview of the full bug-report markdown users can copy into a coding
   agent. Wraps long lines and caps its height so the section stays compact. */
.bug-report__markdown-preview {
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin: 0 0 12px;
  max-height: 320px;
  overflow: auto;
}

.bug-report__severity-wrapper {
  position: relative;
  flex-shrink: 0;
  margin-top: 6px;
}

.bug-report__badge-btn {
  display: inline-flex;
  align-items: center;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.bug-report__badge-btn:hover {
  opacity: 0.85;
}

.bug-report__badge-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bug-report__dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  z-index: 50;
  padding: 6px;
  min-width: 128px;
}

.bug-report__dropdown-item {
  display: block;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  text-align: left;
  cursor: pointer;
}

.bug-report__dropdown-item:hover,
.bug-report__dropdown-item:focus-visible {
  background: var(--color-surface-secondary);
}

.bug-report__dropdown-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.bug-report__title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  cursor: pointer;
  flex: 1;
  min-width: 0;
  overflow-wrap: break-word;
  margin: 0;
  line-height: 1.25;
}

.bug-report__title:hover,
.bug-report__title:focus-visible {
  color: var(--color-primary);
}

.bug-report__title:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.bug-report__title-edit {
  flex: 1;
}

.bug-report__title-input {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.03em;
  width: 100%;
  padding: 6px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  outline: none;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.bug-report__title-input:focus {
  border-color: var(--color-primary);
}

.bug-report__title-input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bug-report__content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bug-report__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 18px;
  overflow: hidden;
}

.bug-report__section h2 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 10px;
}

.bug-report__section p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0;
}

.bug-report__editable-text {
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background 0.12s ease;
}

.bug-report__editable-text:hover,
.bug-report__editable-text:focus-visible {
  background: var(--color-surface-secondary);
  margin: -4px;
  padding: 4px;
}

.bug-report__editable-text:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.bug-report__empty-text {
  color: var(--color-text-muted);
  font-style: italic;
}

.bug-report__steps {
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  font-family: inherit;
  color: var(--color-text-primary);
  margin: 0;
}

.bug-report__behavior-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

@media (max-width: 640px) {
  .bug-report__behavior-grid {
    grid-template-columns: 1fr;
  }

  .bug-report__title {
    font-size: 20px;
  }

  .bug-report__title-input {
    font-size: 20px;
  }

  .bug-report__section {
    padding: 14px 16px;
  }
}

@media (max-width: 480px) {
  .bug-report__section {
    padding: 12px 14px;
  }
}

.bug-report__section--expected {
  border-left: 3px solid var(--color-status-completed);
}

.bug-report__section--actual {
  border-left: 3px solid var(--color-danger);
}

.bug-report__edit-input,
.bug-report__edit-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  line-height: 1.55;
  outline: none;
  font-family: inherit;
  resize: vertical;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.bug-report__edit-input:focus,
.bug-report__edit-textarea:focus {
  border-color: var(--color-primary);
}

.bug-report__edit-input:focus-visible,
.bug-report__edit-textarea:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bug-report__validation-error {
  display: block;
  color: var(--color-danger);
  font-size: 12px;
  margin-top: 6px;
}

/* Evidence banner */
.bug-report__evidence-banner {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.bug-report__spinner {
  animation: spin 1s linear infinite;
  flex-shrink: 0;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Causal chain */
.bug-report__chain-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: chain-step;
}

.bug-report__chain-step {
  counter-increment: chain-step;
  position: relative;
  padding-left: 36px;
  margin-bottom: 14px;
}

.bug-report__chain-step:last-child {
  margin-bottom: 0;
}

.bug-report__chain-step::before {
  content: counter(chain-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bug-report__chain-step p {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0;
}

/* Chronology of events */
.bug-report__chronology-list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: chronology-step;
}

.bug-report__chronology-step {
  counter-increment: chronology-step;
  position: relative;
  padding-left: 36px;
  margin-bottom: 18px;
  border-left: 1px solid var(--color-border-light);
  padding-bottom: 4px;
}

.bug-report__chronology-step:last-child {
  margin-bottom: 0;
  border-left-color: transparent;
}

.bug-report__chronology-step::before {
  content: counter(chronology-step);
  position: absolute;
  left: 0;
  top: 0;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border-radius: 50%;
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

.bug-report__chronology-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-primary);
  margin: 0 0 8px;
}

.bug-report__chronology-screenshot {
  position: relative;
  margin: 8px 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  max-width: 100%;
}

.bug-report__chronology-screenshot img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 400px;
  object-fit: contain;
  background: var(--color-surface-secondary);
}

/* Video walkthrough */
.bug-report__video-container {
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  max-width: 100%;
}

.bug-report__video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
  background: var(--color-surface-hover);
}

/* Screenshot evidence — the still-image alternative to the video walkthrough. The container is
   position:relative so the highlight box (positioned in % via inline styles) overlays the image. */
.bug-report__screenshot-container {
  position: relative;
  display: inline-block;
  max-width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-surface-hover);
  line-height: 0;
}

.bug-report__screenshot {
  display: block;
  width: 100%;
  height: auto;
  max-height: 540px;
  object-fit: contain;
}

.bug-report__screenshot-box {
  position: absolute;
  border: 2px solid var(--color-danger, #ef4444);
  border-radius: 3px;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25);
  pointer-events: none;
}

/* Subtle recording-time badge in the corner of screenshot evidence (top-level screenshot and
   chronology steps). Kept unobtrusive — small, semi-transparent, and out of the way of content. */
.bug-report__screenshot-timestamp {
  position: absolute;
  right: 6px;
  bottom: 6px;
  z-index: 1;
  padding: 1px 6px;
  border-radius: 4px;
  background: rgba(17, 24, 39, 0.6);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  user-select: none;
}

/* Evidence panel */
.evidence-panel {
  margin-top: 14px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 12px;
}

.evidence-panel__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.evidence-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  overflow: hidden;
  background: var(--color-surface);
}

.evidence-item:last-child {
  margin-bottom: 0;
}

.evidence-item__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  background: var(--color-surface-secondary);
  border: none;
  cursor: pointer;
  font-size: 13px;
  color: var(--color-text-primary);
  text-align: left;
  transition: background 0.12s ease;
}

.evidence-item__header:hover {
  background: var(--color-surface-hover);
}

.evidence-item__header:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.evidence-item__tool {
  font-weight: 600;
  font-family: monospace;
  font-size: 12px;
}

.evidence-item__body {
  padding: 10px 12px;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

.evidence-item__params,
.evidence-item__result {
  margin-bottom: 10px;
}

.evidence-item__params:last-child,
.evidence-item__result:last-child {
  margin-bottom: 0;
}

.evidence-item__params-label,
.evidence-item__result-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.evidence-item__params code {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
  color: var(--color-text-primary);
}

.evidence-item__result pre {
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--color-text-primary);
  font-family: monospace;
  margin: 0;
  max-height: 300px;
  overflow-y: auto;
}

/* Judge Assessment Section */
/* Unconfirmed warning banner (shown at the top of the report) */
.bug-report__unconfirmed {
  margin-bottom: 16px;
}

.bug-report__unconfirmed-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 12px 14px;
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--color-warning, #e5a00d) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #e5a00d) 38%, transparent);
  color: var(--color-text-primary);
  font: inherit;
  cursor: pointer;
}

.bug-report__unconfirmed-banner:hover {
  background: color-mix(in srgb, var(--color-warning, #e5a00d) 18%, transparent);
}

.bug-report__unconfirmed-icon {
  flex-shrink: 0;
  color: var(--color-warning, #b45309);
}

.bug-report__unconfirmed-text {
  font-size: 14px;
  font-weight: 600;
}

.bug-report__unconfirmed-expand {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.bug-report__unconfirmed-review {
  margin-top: 10px;
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.bug-report__unconfirmed-review .bug-report__judge-history-label {
  margin-bottom: 10px;
}

.bug-report__section--judge {
  border-left: 3px solid var(--color-primary);
}

.bug-report__section--judge h2 {
  display: flex;
  align-items: center;
  gap: 8px;
}

.bug-report__judge-verdict {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius-lg);
  margin-bottom: 12px;
  border: 1px solid var(--color-border);
}

.bug-report__judge-verdict--approved {
  background: var(--color-status-completed-bg);
  border-color: color-mix(in srgb, var(--color-status-completed) 28%, var(--color-border));
}

.bug-report__judge-verdict--rejected {
  background: var(--color-danger-bg);
  border-color: color-mix(in srgb, var(--color-danger) 30%, var(--color-border));
}

.bug-report__judge-verdict-icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.bug-report__judge-verdict--approved .bug-report__judge-verdict-icon {
  color: var(--color-status-completed);
}

.bug-report__judge-verdict--rejected .bug-report__judge-verdict-icon {
  color: var(--color-danger);
}

.bug-report__judge-verdict-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-primary);
}

.bug-report__judge-verdict-text strong {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
}

.bug-report__judge-assessment-text {
  margin: 6px 0 4px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-primary);
  font-weight: normal;
}

.bug-report__judge-problems {
  list-style: disc;
  padding-left: 20px;
  margin: 6px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.bug-report__judge-problems li {
  margin-bottom: 4px;
  line-height: 1.5;
}

.bug-report__judge-history {
  border-top: 1px solid var(--color-border-light);
  padding-top: 14px;
}

.bug-report__judge-history-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
}

.bug-report__judge-attempt {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  background: var(--color-surface);
}

.bug-report__judge-attempt:last-child {
  margin-bottom: 0;
}

.bug-report__judge-attempt--approved {
  border-left: 3px solid var(--color-status-completed);
}

.bug-report__judge-attempt--rejected {
  border-left: 3px solid var(--color-danger);
}

.bug-report__judge-attempt-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.bug-report__judge-attempt-number {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.bug-report__judge-attempt-badge {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  border: 1px solid transparent;
}

.bug-report__judge-attempt-badge--approved {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
  border-color: color-mix(in srgb, var(--color-status-completed) 25%, var(--color-border));
}

.bug-report__judge-attempt-badge--rejected {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
}

.bug-report__judge-attempt-time {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: auto;
}

/* Judge phase results (evidence / requirements) */
.bug-report__judge-phase {
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.bug-report__judge-phase-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bug-report__judge-phase-badge {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
}

.bug-report__judge-phase-badge--passed {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
  border-color: color-mix(in srgb, var(--color-status-completed) 25%, var(--color-border));
}

.bug-report__judge-phase-badge--failed {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-color: color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
}

/* Submitted analysis in judge history */
.bug-report__submitted-analysis {
  margin-top: 8px;
}

.bug-report__submitted-analysis-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary, #6c8cff);
  cursor: pointer;
  padding: 0;
}

.bug-report__submitted-analysis-toggle:hover {
  text-decoration: underline;
}

.bug-report__submitted-analysis-content {
  margin-top: 8px;
  padding: 10px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.bug-report__submitted-analysis-field {
  margin-bottom: 10px;
}

.bug-report__submitted-analysis-field:last-child {
  margin-bottom: 0;
}

.bug-report__submitted-analysis-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: 4px;
}

.bug-report__submitted-analysis-field p {
  margin: 0;
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.bug-report__submitted-analysis-chronology {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 13px;
  color: var(--color-text-primary);
}

.bug-report__submitted-analysis-chronology li {
  margin-bottom: 8px;
  line-height: 1.5;
}

.bug-report__submitted-analysis-screenshot {
  display: block;
  max-width: 400px;
  max-height: 200px;
  margin-top: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.bug-report__footer-actions {
  padding: 16px 0;
  border-top: 1px solid var(--color-border);
  margin-top: 16px;
}
/* Highlighted green call-to-action so "Copy Bug Reports" stands out wherever it appears. */
.copy-bug-reports-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-success);
  background: var(--color-success);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-success) 35%, transparent);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.copy-bug-reports-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--color-success) 88%, #000);
  border-color: color-mix(in srgb, var(--color-success) 88%, #000);
  color: #ffffff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-success) 35%, transparent);
}

.copy-bug-reports-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.copy-bug-reports-btn:focus-visible {
  outline: 2px solid var(--color-success);
  outline-offset: 2px;
}
.project-flag-warning {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--color-status-paused) 45%, var(--color-border));
  background: var(--color-status-paused-bg);
}

.project-flag-warning__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-status-paused);
}

.project-flag-warning__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.project-flag-warning__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.project-flag-warning__text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}
.project-paused-banner {
  align-items: center;
}

.project-paused-banner__action {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex-shrink: 0;
  margin-left: auto;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid color-mix(in srgb, var(--color-status-paused) 45%, var(--color-border));
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

.project-paused-banner__action:hover {
  background: var(--color-status-paused-bg);
}

/* Inline "raise budget & resume" control inside the banner. */
.project-paused-banner__budget {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}

.project-paused-banner__budget-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.project-paused-banner__resume-btn {
  margin-left: 4px;
  padding: 7px 12px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--color-status-paused);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.project-paused-banner__resume-btn:hover:not(:disabled) {
  filter: brightness(0.95);
}

.project-paused-banner__resume-btn:disabled {
  opacity: 0.55;
  cursor: default;
}

.project-paused-banner__note {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  color: var(--color-text-secondary);
}
.project-settings {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.settings-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.settings-section--danger {
  border-color: var(--color-danger);
}

.settings-section__title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text-primary);
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.processing__header--settings .settings-section__title {
  margin-bottom: 0;
}

.settings-section__title--danger {
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: 6px;
}

.settings-section__desc {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.settings-section__select {
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-family: inherit;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  transition: border-color 150ms ease, background 150ms ease;
  cursor: pointer;
  min-width: 220px;
}

.settings-section__select:hover {
  background: var(--color-surface);
}

.settings-section__select:focus {
  outline: none;
  border-color: var(--color-primary);
  background: var(--color-surface);
  box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px color-mix(in srgb, var(--color-primary) 35%, transparent);
}

.settings-section__select:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--color-surface-hover);
}

.settings-section__field {
  margin-bottom: 12px;
}

.settings-section__field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.settings-section__field input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.settings-section__field input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.settings-section__field input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-section__input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.settings-section__input-row input {
  flex: 1;
  min-width: 0;
}

.settings-section__test-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.settings-section__test-btn:hover {
  background: var(--color-surface-hover);
}

.settings-section__test-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-section__test-result {
  font-size: 13px;
  margin-top: 8px;
  line-height: 1.45;
}

.settings-section__test-result--success {
  color: var(--color-status-active);
}

.settings-section__test-result--error {
  color: var(--color-danger);
}

.settings-section__save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.settings-section__save-btn:hover {
  background: var(--color-primary-hover);
}

.settings-section__save-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.settings-section__save-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.settings-section__actions {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
}

/* The GitHub setup page's primary "Create N projects" action sits at the bottom of the form (not
   inside a section), so center it and give it breathing room on all sides — including the bottom. */
.github-setup__create-actions {
  justify-content: center;
  padding: 24px 16px 32px;
}

.settings-section__save-btn--danger {
  background: transparent;
  color: var(--color-danger, #c0392b);
  border: 1px solid var(--color-danger, #c0392b);
}

.settings-section__save-btn--danger:hover {
  background: var(--color-danger, #c0392b);
  color: var(--text-on-accent, #fff);
}

.settings-section__frequency-options {
  display: flex;
  gap: 6px;
}

.settings-section__freq-btn {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s;
}

.settings-section__freq-btn:hover {
  background: var(--color-surface-hover);
}

.settings-section__freq-btn--active {
  background: var(--color-primary);
  color: var(--text-on-accent);
  border-color: var(--color-primary);
}

.settings-section__delete-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.settings-section__delete-btn:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--text-on-accent);
}

.settings-section__delete-btn:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

.settings-section__delete-confirm p {
  font-size: 14px;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
}

.settings-section__delete-error {
  color: var(--color-danger) !important;
}

.settings-section__delete-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.settings-section__delete-actions button {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.settings-section__delete-actions button:hover {
  background: var(--color-surface-hover);
}

.settings-section__confirm-delete-btn {
  background: var(--color-danger) !important;
  color: white !important;
  border-color: var(--color-danger) !important;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.settings-section__confirm-delete-btn:hover {
  background: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
}

.settings-section__toggle-field {
  margin-bottom: 12px;
}

.settings-section__toggle-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}

.settings-section__toggle-label--disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.settings-section__toggle-label--disabled .settings-section__toggle-input {
  cursor: not-allowed;
}

.settings-section__toggle-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.settings-section__toggle-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.settings-section__toggle-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-top: 4px;
  margin-left: 24px;
  line-height: 1.5;
}

.settings-section__radio-field {
  border: none;
  padding: 0;
  margin: 0 0 12px;
}

.settings-section__radio-legend {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.settings-section__radio-label {
  display: grid;
  grid-template-columns: 16px auto;
  gap: 4px 8px;
  align-items: baseline;
  cursor: pointer;
  padding: 4px 0;
}

.settings-section__radio-label input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--color-primary);
  margin: 0;
  grid-row: 1;
}

.settings-section__radio-text {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
  grid-column: 2;
}

.settings-section__radio-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  grid-column: 2;
  line-height: 1.5;
}

.settings-section__setup-instructions {
  margin-top: 20px;
  border-top: 1px solid var(--color-border-light);
  padding-top: 16px;
}

.settings-section__setup-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 12px;
}

.settings-section__service-guide {
  margin-bottom: 16px;
}

.settings-section__service-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 6px;
}

.settings-section__guide-text {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
  margin: 0 0 8px;
}

.settings-section__steps {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding-left: 20px;
  margin: 0;
  line-height: 1.5;
}

.settings-section__steps li {
  margin-bottom: 4px;
}

.settings-section__steps code {
  background: var(--color-surface-secondary);
  padding: 1px 4px;
  border-radius: var(--radius-sm);
  font-size: 12px;
}

.settings-section__payload-info {
  margin-bottom: 0;
}

.settings-section__payload-info p {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  line-height: 1.55;
}

.settings-section__payload-example {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 14px;
  font-size: 12px;
  overflow-x: auto;
  margin: 0;
}

.settings-section__payload-example code {
  font-family: var(--font-mono, ui-monospace, monospace);
}

.settings-section__docs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.settings-section__docs-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  padding: 8px 12px 8px 0;
  border-bottom: 1px solid var(--color-border);
  vertical-align: bottom;
}

.settings-section__docs-table td {
  padding: 10px 12px 10px 0;
  color: var(--color-text-secondary);
  vertical-align: top;
  border-bottom: 1px solid var(--color-border-light);
  line-height: 1.45;
}

.settings-section__docs-table tbody tr:last-child td {
  border-bottom: none;
}

.settings-section__docs-table code {
  font-size: 12px;
}

/* Global Variables editor */

.global-vars__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.global-vars__row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.global-vars__input {
  flex: 1;
  min-width: 0;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.global-vars__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.global-vars__input:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.global-vars__input:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  background: var(--color-surface-hover);
}

.global-vars__remove-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.global-vars__remove-btn:hover {
  background: var(--color-danger-bg);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.global-vars__remove-btn:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

@media (max-width: 640px) {
  .global-vars__row {
    flex-wrap: wrap;
  }
}

/* Reverse Proxy Events timeline */

.rp-events__toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 12px;
}

.rp-events__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.rp-events__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-light);
}

.rp-events__item:last-child {
  border-bottom: none;
}

.rp-events__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}

.rp-events__icon--up,
.rp-events__icon--connect {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.rp-events__icon--down,
.rp-events__icon--disconnect {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.rp-events__label {
  flex: 1;
  min-width: 0;
  color: var(--color-text-primary);
}

.rp-events__detail {
  color: var(--color-text-secondary);
}

.rp-events__time {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--color-text-tertiary, var(--color-text-secondary));
  white-space: nowrap;
}

@media (max-width: 640px) {
  .settings-section {
    padding: 16px;
  }

  .settings-section__input-row {
    flex-direction: column;
  }

  .settings-section__frequency-options {
    flex-wrap: wrap;
  }

  .settings-section__delete-actions {
    flex-wrap: wrap;
  }
}
.overview-tab {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

@keyframes overview-skeleton-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}

.overview-tab__skeleton {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.overview-tab__skeleton-status {
  height: 48px;
  background: var(--color-border);
  border-radius: var(--radius);
  animation: overview-skeleton-pulse 1.5s ease-in-out infinite;
}

.overview-tab__skeleton-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.overview-tab__skeleton-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-tab__skeleton-card-stats {
  display: flex;
  gap: 12px;
}

.overview-tab__skeleton-text {
  background: var(--color-border);
  border-radius: var(--radius-sm);
  animation: overview-skeleton-pulse 1.5s ease-in-out infinite;
}

.overview-tab__skeleton-text--icon {
  width: 18px;
  height: 18px;
  border-radius: 4px;
  flex-shrink: 0;
}

.overview-tab__skeleton-text--label {
  width: 100px;
  height: 16px;
  flex: 1;
  max-width: 100px;
  animation-delay: 0.1s;
}

.overview-tab__skeleton-text--count {
  width: 32px;
  height: 22px;
  margin-left: auto;
  animation-delay: 0.2s;
}

.overview-tab__skeleton-text--bar {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill);
  animation-delay: 0.3s;
}

.overview-tab__skeleton-text--stat {
  width: 80px;
  height: 14px;
  animation-delay: 0.4s;
}

.overview-tab__skeleton-summary {
  height: 44px;
  background: var(--color-border);
  border-radius: var(--radius);
  animation: overview-skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.5s;
}

/* Status sentence */
.overview-tab__status-sentence {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
}

.overview-tab__status-sentence--active {
  background: var(--color-status-in-progress-bg);
  color: var(--color-text-primary);
}

.overview-tab__status-sentence--idle {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}

.overview-tab__status-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.overview-tab__status-sentence--active .overview-tab__status-icon {
  color: var(--color-status-in-progress);
}

.overview-tab__status-sentence--idle .overview-tab__status-icon {
  color: var(--color-status-active);
}

@keyframes overview-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.overview-tab__status-icon--spin {
  animation: overview-spin 1.5s linear infinite;
}

/* Cards grid */
.overview-tab__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.overview-tab__card-link {
  text-decoration: none;
  color: inherit;
  display: block;
}

.overview-tab__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.overview-tab__card--clickable {
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: pointer;
}

.overview-tab__card-link:hover .overview-tab__card--clickable {
  border-color: var(--color-text-muted);
  box-shadow: var(--shadow-card-hover);
}

.overview-tab__card-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-tab__card-icon {
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
}

.overview-tab__card-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  flex: 1;
}

.overview-tab__card-count {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

/* Progress bar */
.overview-tab__bar-track {
  height: 6px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius-pill);
  overflow: hidden;
  display: flex;
}

.overview-tab__bar-empty {
  flex: 1;
}

.overview-tab__bar-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  transition: width 300ms ease;
}

.overview-tab__bar-fill--completed {
  background: var(--color-status-active);
}

.overview-tab__bar-fill--pending {
  background: var(--color-status-in-progress);
}

/* Stats row */
.overview-tab__card-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  min-height: 42px;
}

.overview-tab__stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 500;
}

.overview-tab__stat-icon--spin {
  animation: overview-spin 1.5s linear infinite;
}

.overview-tab__stat--pending {
  color: var(--color-status-in-progress);
}

.overview-tab__stat--completed {
  color: var(--color-status-active-text);
}

.overview-tab__stat--failed {
  color: var(--color-danger);
}

.overview-tab__stat--bugs {
  color: var(--color-danger);
}

.overview-tab__stat--empty {
  color: var(--color-text-muted);
}

/* Summary */
.overview-tab__summary {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 16px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius);
}

.overview-tab__summary-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.overview-tab__summary-item svg {
  color: var(--color-text-muted);
}

.overview-tab__summary-count {
  font-weight: 600;
  color: var(--color-text-primary);
  font-size: 16px;
}

.overview-tab__summary-label {
  color: var(--color-text-secondary);
}

.overview-tab__bug-breakdown {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}

.overview-tab__bug-tag {
  font-size: 12px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
}

.overview-tab__bug-tag--open {
  background: rgba(239, 68, 68, 0.12);
  color: #b91c1c;
}

.overview-tab__bug-tag--reopened {
  background: rgba(220, 38, 38, 0.12);
  color: #dc2626;
}

.overview-tab__bug-tag--resolved {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.overview-tab__bug-tag--rejected {
  background: rgba(249, 115, 22, 0.12);
  color: #c2410c;
}

.overview-tab__status-sentence--waiting {
  background: rgba(239, 68, 68, 0.08);
  color: var(--color-text-primary);
}

.overview-tab__status-sentence--waiting .overview-tab__status-icon {
  color: #b91c1c;
}

.overview-tab__status-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.overview-tab__status-view-link {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  color: #b91c1c;
  white-space: nowrap;
  transition: opacity 0.12s;
}

.overview-tab__status-view-link:hover {
  opacity: 0.75;
}

/* On mobile the bug count, copy button and "View bugs" link don't fit on one
   row. Let the card wrap: the icon + message stay on the first line and the
   actions drop to a full-width row below, instead of being squeezed in beside
   a cramped, narrowly-wrapped sentence. */
@media (max-width: 768px) {
  .overview-tab__status-sentence--waiting {
    flex-wrap: wrap;
  }

  .overview-tab__status-sentence--waiting > span {
    flex: 1 1 0;
    min-width: 0;
  }

  .overview-tab__status-sentence--waiting .overview-tab__status-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    gap: 12px 16px;
  }
}

/* Reverse proxy status */
.overview-tab__proxy {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
}

.overview-tab__proxy--pending {
  border-color: color-mix(in srgb, var(--color-status-in-progress) 45%, var(--color-border));
  background: var(--color-status-in-progress-bg);
}

.overview-tab__proxy--ready {
  flex-direction: row;
  align-items: center;
  gap: 12px;
  border-color: color-mix(in srgb, var(--color-status-active) 40%, var(--color-border));
  background: var(--color-status-active-bg, var(--color-surface-secondary));
}

.overview-tab__proxy-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.overview-tab__proxy-icon {
  flex-shrink: 0;
  color: var(--color-status-in-progress);
}

.overview-tab__proxy--ready .overview-tab__proxy-icon {
  color: var(--color-status-active);
}

.overview-tab__proxy-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.overview-tab__proxy-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.overview-tab__proxy-badge {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-status-in-progress);
  background: color-mix(in srgb, var(--color-status-in-progress) 16%, transparent);
}

.overview-tab__proxy-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.overview-tab__proxy-text--muted {
  color: var(--color-text-muted);
  font-style: italic;
}

.overview-tab__proxy-text code,
.overview-tab__proxy-steps code {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  padding: 1px 5px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-text-primary) 8%, transparent);
  color: var(--color-text-primary);
  word-break: break-all;
}

/* Capability-flag warning (e.g. source maps missing). Amber, mirrors the proxy banner layout. */
.overview-tab__proxy-steps {
  margin: 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.overview-tab__proxy-icon--spin {
  animation: overview-spin 1.5s linear infinite;
}

.overview-tab__proxy-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.overview-tab__proxy-link:hover {
  text-decoration: underline;
}

/* API access callout — mirrors the proxy banner layout but in a neutral surface, sitting at the
   bottom of the overview as a persistent pointer to the programmatic workflow. */
.overview-tab__api {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
}

.overview-tab__api-icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.overview-tab__api-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
}

.overview-tab__api-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
}

.overview-tab__api-link:hover {
  text-decoration: underline;
}

.overview-tab__proxy-code-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
}

.overview-tab__proxy-copy {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.overview-tab__proxy-copy:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.overview-tab__proxy-actions {
  margin-top: 4px;
}

.overview-tab__proxy-copy--primary {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: white;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--radius);
}

.overview-tab__proxy-copy--primary:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: white;
}

.overview-tab__proxy-code {
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  border: 1px solid var(--color-border);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-primary);
  white-space: pre;
  overflow-x: auto;
}

.overview-tab__proxy-waiting {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-status-in-progress);
}

/* Charts */
.overview-tab__charts {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.overview-tab__chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
}

.overview-tab__chart-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin-bottom: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}


/* Top open bugs list */
.overview-tab__bug-list {
  display: flex;
  flex-direction: column;
}

.overview-tab__bug-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-surface-secondary);
  text-decoration: none;
  transition: background 0.12s;
}

.overview-tab__bug-row:last-child {
  border-bottom: none;
}

.overview-tab__bug-row:hover {
  /* These rows sit on the white --color-surface card, and --color-surface-hover (#f5f5f5) is only
     ~4% off white — on this surface the hover highlight is imperceptible, reading as no background
     at all. Use a distinctly darker neutral so the hover is clearly visible. Keep it a plain color
     (not color-mix, which the Chrome 108 QA/recording browser doesn't support and renders as
     transparent) so the highlight is opaque in every browser. */
  background: #ececec;
}

.overview-tab__bug-severity {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.overview-tab__bug-severity--critical {
  background: rgba(239, 68, 68, 0.15);
  color: var(--color-severity-critical);
}

.overview-tab__bug-severity--high {
  background: rgba(249, 115, 22, 0.15);
  color: var(--color-severity-high);
}

.overview-tab__bug-severity--medium {
  background: rgba(234, 179, 8, 0.15);
  color: var(--color-severity-medium);
}

.overview-tab__bug-severity--low {
  background: rgba(107, 114, 128, 0.15);
  color: var(--color-severity-low);
}

.overview-tab__bug-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.overview-tab__bug-kind {
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.overview-tab__bug-arrow {
  color: var(--color-text-muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}

.overview-tab__bug-row:hover .overview-tab__bug-arrow {
  opacity: 1;
}

.overview-tab__bug-show-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  padding: 6px 4px;
  border: none;
  background: none;
  color: var(--color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

.overview-tab__bug-show-more:hover {
  color: var(--color-text-primary);
}

.overview-tab__bug-show-more-icon {
  transition: transform 0.12s;
  transform: rotate(90deg);
}

.overview-tab__bug-show-more-icon--open {
  transform: rotate(-90deg);
}

@media (max-width: 900px) {
  .overview-tab__bug-kind {
    display: none;
  }
}

@media (max-width: 640px) {
  .overview-tab__cards {
    grid-template-columns: 1fr;
  }

  .overview-tab__card-stats {
    gap: 8px;
  }
}

/* Setup pipeline — interim view while the first exploration runs */
.ov-setup {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
}

.ov-setup__lead {
  text-align: center;
  padding: 12px 0 10px;
}

.ov-setup__title {
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.ov-setup__sub {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.55;
  margin-top: 8px;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

.ov-setup__stage {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  overflow: hidden;
  transition: border-color 200ms ease, box-shadow 200ms ease;
}

.ov-setup__stage--active {
  border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
  box-shadow: var(--shadow-card-hover);
}

/* Live exploration replay embedded in the setup pipeline's Exploration card — the same
   TaskEventReplay preview the Explorations tab shows, so users watch the agent browse
   without leaving the overview. The player styles itself; this just insets it from the
   card edges to line up with the stage head. */
.ov-setup__preview {
  padding: 0 18px 16px;
}

.ov-setup__stage-head {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 15px 18px;
}

.ov-setup__stage-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--color-surface-secondary);
  color: var(--color-text-muted);
  transition: all 200ms ease;
}

.ov-setup__stage--active .ov-setup__stage-icon {
  background: color-mix(in srgb, var(--color-primary) 12%, var(--color-surface));
  color: var(--color-primary);
}

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

.ov-setup__stage-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  display: flex;
  align-items: center;
  gap: 9px;
}

.ov-setup__stage-metric {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 1px 9px;
}

.ov-setup__stage-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
  margin-top: 2px;
  line-height: 1.45;
}

.ov-setup__state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  flex-shrink: 0;
}

.ov-setup__state--queued {
  color: var(--color-text-muted);
}

.ov-setup__state--running {
  color: var(--color-status-in-progress);
}

.ov-setup__disc {
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface-secondary);
  padding: 6px 18px 12px 65px;
  display: flex;
  flex-direction: column;
}

.ov-setup__disc-empty {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 8px 0;
}

.ov-setup__disc-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  animation: ov-setup-fade 220ms ease;
}

.ov-setup__disc-item:last-child {
  border-bottom: none;
}

.ov-setup__disc-item > svg {
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.ov-setup__disc-name {
  color: var(--color-text-primary);
  font-weight: 500;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-setup__disc-device {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.ov-setup__disc-pending {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  padding: 1px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ov-setup__disc-pending--running {
  color: var(--color-status-in-progress);
  border-color: var(--color-status-in-progress);
}

.ov-setup__disc-pending--done {
  color: var(--color-status-completed);
  border-color: var(--color-status-completed);
}

.ov-setup__disc-pending--failed {
  color: var(--color-status-failed);
  border-color: var(--color-status-failed);
}

@keyframes ov-setup-fade {
  from {
    opacity: 0;
    transform: translateY(-3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 640px) {
  .ov-setup__disc {
    padding-left: 18px;
  }
  .ov-setup__disc-device {
    display: none;
  }
}
.pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 0;
}

.pagination__btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border-light);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.pagination__btn:hover:not(:disabled) {
  background: var(--color-border-light);
}

.pagination__btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.pagination__btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.pagination__info {
  font-size: 13px;
  color: var(--color-text-muted);
}
/* Compact inline replay preview shown on Journeys/Explorations rows, to the right of the
   description and vertically centered. Sized to a fixed thumbnail box plus a play button. */
.row-preview {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.row-preview__frame {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  /* No border on the frame itself — a thumbnail image fills the box edge-to-edge and a border would
     draw a line around the image (which we don't want). The empty/loading placeholder states below
     re-add their own border so an image-less slot still reads as a defined box. */
  /* Match the skeleton/placeholder surface so the lazy mount doesn't flash from the near-white
     skeleton to a dark box before the thumbnail loads. Theme-aware via the surface variable
     (the old hardcoded #0b0b0f was a leftover from the removed dark rrweb player stage). */
  background: var(--color-surface-secondary);
  flex-shrink: 0;
}

.row-preview__scaler {
  position: absolute;
  top: 0;
  left: 0;
}

/* rrweb injects an iframe inside .replayer-wrapper; let it size to the recording. */
.row-preview__player .replayer-wrapper {
  margin: 0;
}

/* Server-computed preview frame: fills the box; object-fit (cover/contain) is set inline per call. */
.row-preview__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

/* Frame indicator dots shown while hovering a multi-frame preview. */
.row-preview__dots {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 4px;
  display: flex;
  justify-content: center;
  gap: 4px;
  pointer-events: none;
}

.row-preview__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}

.row-preview__dot.is-active {
  background: #fff;
}

.row-preview__empty,
.row-preview__loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 11px;
  color: var(--color-text-secondary, #9ca3af);
  text-align: center;
  padding: 4px;
  /* Image-less states keep a border so the empty/loading slot still reads as a box; the border was
     removed from .row-preview__frame so it never draws around an actual thumbnail image. */
  border: 1px solid var(--color-border);
  border-radius: 6px;
}

/* Distinguish "still loading" (spinner) from "no preview" (static text). */
.row-preview__spinner {
  animation: row-preview-spin 0.8s linear infinite;
}

/* Spinner shown over the latest frame while the full frame set downloads on hover. Sits on a faint
   scrim so it stays visible over any thumbnail, without hiding the preview underneath. */
.row-preview__hover-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  color: #fff;
  background: rgba(0, 0, 0, 0.25);
}

.row-preview__hover-spinner svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.6));
}

@keyframes row-preview-spin {
  to { transform: rotate(360deg); }
}

/* Placeholder while the row is off-screen — keeps the row height stable so nothing jumps when the
   real preview mounts. */
.row-preview__skeleton {
  width: 165px;
  height: 95px;
  border-radius: 6px;
  border: 1px solid var(--color-border);
  background: linear-gradient(90deg, var(--color-surface-secondary) 25%, var(--color-surface-hover, var(--color-surface)) 37%, var(--color-surface-secondary) 63%);
}
.journeys-tab {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.journeys-tab__header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 0;
  margin-bottom: 4px;
}

.journeys-tab__total {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.journeys-tab__empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--color-text-muted);
  font-size: 0.875rem;
}

@keyframes journeys-skeleton-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}

.journeys-tab__skeleton {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.journeys-tab__skeleton-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 4px;
}

.journeys-tab__skeleton-filters {
  display: flex;
  gap: 6px;
}

.journeys-tab__skeleton-text {
  background: var(--color-border);
  border-radius: var(--radius-sm);
  animation: journeys-skeleton-pulse 1.5s ease-in-out infinite;
}

.journeys-tab__skeleton-text--count {
  width: 80px;
  height: 14px;
}

.journeys-tab__skeleton-text--filter {
  width: 60px;
  height: 28px;
  border-radius: 6px;
  animation-delay: 0.1s;
}

.journeys-tab__skeleton-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.journeys-tab__skeleton-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  gap: 12px;
}

.journeys-tab__skeleton-text--name {
  width: 200px;
  height: 16px;
  animation-delay: 0.2s;
}

.journeys-tab__skeleton-text--stats {
  width: 140px;
  height: 14px;
  animation-delay: 0.3s;
}

.journeys-tab__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding: 2rem;
  color: var(--color-text-secondary);
}

.journeys-tab__error button {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.375rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  font-size: 0.8125rem;
}

.journeys-tab__global-variables {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-secondary);
}

.journeys-tab__global-variables-title {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 0.5rem 0;
}

.journeys-tab__variable-tag--global {
  background: var(--color-surface);
}

.journeys-tab__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Video-tile grid: each journey is a card with a replay thumbnail on top. Cards link to the
   journey page; the thumbnail heroes into the detail replay via a view transition. */
.journeys-tab__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 16px;
}

.journeys-tab__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.journeys-tab__card:hover {
  border-color: var(--color-primary, #2563eb);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.journeys-tab__card:focus-visible {
  outline: 2px solid var(--color-primary, #2563eb);
  outline-offset: 2px;
}

.journeys-tab__card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #0b0b0f;
  overflow: hidden;
}

.journeys-tab__card-media-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary, #9ca3af);
}

.journeys-tab__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

.journeys-tab__card-titlerow {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journeys-tab__card-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.journeys-tab__card-titlerow .journeys-tab__status-icon {
  flex-shrink: 0;
}

.journeys-tab__card-bug {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-brand);
}

.journeys-tab__card-bug--resolved {
  color: var(--color-status-active);
}

.journeys-tab__card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.journeys-tab__card-children {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

/* A parent journey (has children) zooms into its children on click rather than navigating, so its
   child-count badge reads as a control and its chevron nudges right on hover to hint the drill-in. */
.journeys-tab__card--parent .journeys-tab__card-children {
  color: var(--color-primary, #2563eb);
  font-weight: 600;
}

.journeys-tab__card-children-chevron {
  transition: transform 0.15s;
}

.journeys-tab__card--parent:hover .journeys-tab__card-children-chevron {
  transform: translateX(2px);
}

/* Drill-down breadcrumb shown when zoomed into a journey's children. */
.journeys-tab__breadcrumb {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.journeys-tab__breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
}

.journeys-tab__breadcrumb-back:hover {
  border-color: var(--color-primary, #2563eb);
}

.journeys-tab__breadcrumb-trail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.8125rem;
  min-width: 0;
}

.journeys-tab__crumb-item {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.journeys-tab__crumb-sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.journeys-tab__crumb {
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding: 2px 6px;
  border: 0;
  background: none;
  border-radius: 4px;
  color: var(--color-primary, #2563eb);
  cursor: pointer;
  font-size: inherit;
}

.journeys-tab__crumb:hover {
  text-decoration: underline;
}

.journeys-tab__crumb--current {
  color: var(--color-text-primary);
  font-weight: 600;
  cursor: default;
}

.journeys-tab__crumb--current:hover {
  text-decoration: none;
}

.journeys-tab__breadcrumb-open {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.journeys-tab__breadcrumb-open:hover {
  color: var(--color-primary, #2563eb);
}

.journeys-tab__journey {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.journeys-tab__journey-header {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--color-border);
}

/* Inline replay preview sits to the right of the journey name, vertically centered. Its fixed
   thumbnail height makes the row thicker when a recording exists. */
.journeys-tab__journey-header .row-preview {
  align-self: center;
  padding: 8px 12px;
}

@media (max-width: 640px) {
  .journeys-tab__journey-header {
    flex-direction: column;
  }
}

.journeys-tab__journey-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
  padding: 12px 14px;
  border: none;
  background: var(--color-surface);
  cursor: pointer;
  font-size: 14px;
  text-align: left;
  color: var(--color-text-primary);
}

.journeys-tab__journey-toggle:hover {
  background: var(--color-surface-hover);
}

.journeys-tab__journey-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: nowrap;
  padding: 10px 12px;
  border-left: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
}

.journeys-tab__journey-tools-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 8px 10px;
  flex: 1;
  min-width: 0;
}

.journeys-tab__journey-stats {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0 6px;
  row-gap: 4px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--color-text-secondary);
}

.journeys-tab__journey-stat {
  white-space: nowrap;
}

.journeys-tab__journey-stat--inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.journeys-tab__journey-stat-icon {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.journeys-tab__journey-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.journeys-tab__journey-name {
  font-weight: 600;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journeys-tab__status-icon--completed {
  color: var(--color-status-active);
}

.journeys-tab__status-icon--failed {
  color: var(--color-danger);
}

.journeys-tab__status-icon--in-progress {
  color: var(--color-status-paused);
  animation: spin 1.5s linear infinite;
}

.journeys-tab__status-icon--queued {
  color: var(--color-text-muted);
}

.journeys-tab__status-icon--incomplete {
  color: var(--color-status-incomplete);
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
  .journeys-tab__journey-tools {
    border-left: none;
    border-top: 1px solid var(--color-border);
    flex-wrap: wrap;
    justify-content: stretch;
  }

  .journeys-tab__journey-tools-group {
    flex-basis: 100%;
    justify-content: flex-start;
  }
}

.journeys-tab__journey-desc {
  padding: 0 0 10px;
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  border: none;
  background: transparent;
}

.journeys-tab__source-link {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
  padding: 0 0 10px;
}

.journeys-tab__source-link a {
  color: var(--color-primary);
  text-decoration: none;
}

.journeys-tab__source-link a:hover {
  text-decoration: underline;
}

.journeys-tab__instructions {
  padding: 0;
}

.journeys-tab__instructions-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.journeys-tab__instructions-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.journeys-tab__instructions-text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}

/* Compact expanded summary */
.journeys-tab__journey-summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.journeys-tab__journey-summary-main {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.journeys-tab__journey-summary-main .journeys-tab__journey-desc,
.journeys-tab__journey-summary-main .journeys-tab__source-link {
  padding: 0;
}

.journeys-tab__journey-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journeys-tab__flag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.journeys-tab__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.journeys-tab__edit-btn:hover {
  background: var(--color-surface-hover);
}

.journeys-tab__page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  color: var(--color-primary, #2563eb);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
}

.journeys-tab__page-link:hover {
  background: var(--color-surface-hover);
}

/* Edit panel */
.journeys-tab__edit-panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journeys-tab__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journeys-tab__field-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.journeys-tab__field-input,
.journeys-tab__field-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  background: var(--color-surface);
  color: var(--color-text-primary);
}

.journeys-tab__field-textarea {
  resize: vertical;
}

.journeys-tab__field-input:focus,
.journeys-tab__field-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.journeys-tab__edit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  cursor: pointer;
}

.journeys-tab__edit-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

.journeys-tab__edit-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.journeys-tab__save-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.journeys-tab__save-btn:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.journeys-tab__save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.journeys-tab__cancel-btn {
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer;
}

.journeys-tab__cancel-btn:hover {
  background: var(--color-surface-hover);
}

.journeys-tab__run-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--text-on-accent);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}

.journeys-tab__run-btn:hover:not(:disabled) {
  opacity: 0.9;
}

.journeys-tab__run-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.journeys-tab__delete-journey-btn {
  margin-left: auto;
}

.journeys-tab__actions {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
}

/* The opaque JourneySteps aggregate, shown verbatim (the app does not interpret its structure). */
.journeys-tab__steps-aggregate {
  margin: 0;
  padding: 12px;
  background: var(--color-code-bg, #1e1e2e);
  color: var(--color-code-text, #cdd6f4);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 480px;
}

.journeys-tab__section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin: 0 0 8px;
}

/* Collapsible toggle for the steps blob — styled like the section title but interactive. */
.journeys-tab__steps-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.journeys-tab__steps-toggle:hover {
  color: var(--color-text-primary);
}

.journeys-tab__actions-list {
  margin: 0;
  padding-left: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journeys-tab__action {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-primary);
}

.journeys-tab__action-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px 16px;
}

.journeys-tab__action-main {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}

.journeys-tab__action-aside {
  flex-shrink: 0;
  max-width: min(280px, 46%);
}

.journeys-tab__action-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 3px 7px;
  border-radius: var(--radius-sm);
  font-weight: 600;
}

.journeys-tab__action--failed {
  border-left: 2px solid var(--color-danger);
  padding-left: 0.5rem;
  margin-left: -0.5rem;
}

.journeys-tab__action-error {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--color-danger);
  margin-top: 0.25rem;
}

.journeys-tab__action-desc {
  flex: 0 1 auto;
  color: var(--color-text-primary);
  font-weight: 500;
}

.journeys-tab__checks {
  width: 100%;
  list-style: none;
  padding: 2px 0 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journeys-tab__check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.journeys-tab__check-assertion {
  font-size: 10px;
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  padding: 1px 5px;
  border-radius: 3px;
  font-family: monospace;
}

@media (max-width: 520px) {
  .journeys-tab__action-top {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .journeys-tab__action-aside {
    max-width: none;
  }

  .journeys-tab__action-details {
    justify-content: flex-start;
  }
}

.journeys-tab__variables {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
}

.journeys-tab__variable-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journeys-tab__variable-tag {
  font-size: 12px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  color: var(--color-text-primary);
  background: var(--color-surface);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.journeys-tab__action-details {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: baseline;
  justify-content: flex-end;
}

.journeys-tab__action-selector {
  font-size: 11px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  padding: 3px 6px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
}

.journeys-tab__action-value {
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  font-style: italic;
}

.journeys-tab__action-var {
  font-size: 0.6875rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  color: var(--color-text-secondary);
}

/* Bug banner shown when expanding a journey with an associated bug */
.journeys-tab__bug-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-top: 1px solid var(--color-border);
  background: color-mix(in srgb, var(--color-brand) 8%, var(--color-surface));
  color: var(--color-brand);
  font-size: 13px;
}

.journeys-tab__bug-banner--resolved {
  background: color-mix(in srgb, var(--color-status-active) 8%, var(--color-surface));
  color: var(--color-status-active);
}

.journeys-tab__bug-banner-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.journeys-tab__bug-banner-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.journeys-tab__bug-banner-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.journeys-tab__bug-banner-title {
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journeys-tab__bug-banner-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 4px 10px;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  background: transparent;
  color: inherit;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.journeys-tab__bug-banner-link:hover {
  background: color-mix(in srgb, currentColor 12%, transparent);
}

/* Run error banner shown above steps when error doesn't map to a specific step */
.journeys-tab__run-error-banner {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--color-danger) 10%, var(--color-surface));
  border: 1px solid color-mix(in srgb, var(--color-danger) 30%, transparent);
  color: var(--color-danger);
  font-size: 12px;
  line-height: 1.4;
}

.journeys-tab__run-error-banner svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.journeys-tab__versions {
  border-top: 1px solid var(--color-border);
}

.journeys-tab__replay-section {
  border-top: 1px solid var(--color-border);
  padding: 0.75rem;
}

.journeys-tab__versions-empty {
  border-top: 1px solid var(--color-border);
  padding: 0.5rem 0.75rem 0.75rem;
}

.journeys-tab__version {
  border-top: 1px solid var(--color-border);
}

.journeys-tab__version:first-child {
  border-top: none;
}

.journeys-tab__version--current {
  background: var(--color-surface);
}

.journeys-tab__version-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px 16px;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 13px;
  text-align: left;
  color: var(--color-text-primary);
}

@media (max-width: 560px) {
  .journeys-tab__version-header {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .journeys-tab__version-meta {
    justify-self: start;
  }
}

.journeys-tab__version-header-lead {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.journeys-tab__version-header-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.journeys-tab__version-header:hover {
  background: var(--color-surface-hover);
}

.journeys-tab__version-label {
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.journeys-tab__version-current-badge {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-on-accent);
  background: var(--color-primary);
  padding: 3px 8px;
  border-radius: var(--radius-sm);
}

.journeys-tab__version-run-info {
  font-size: 13px;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journeys-tab__version-run-info--completed {
  color: var(--color-status-active);
}

.journeys-tab__version-run-info--failed {
  color: var(--color-brand);
}

.journeys-tab__version-run-info--in-progress {
  color: var(--color-status-paused);
}

.journeys-tab__version-run-info--none {
  color: var(--color-text-muted);
}

.journeys-tab__version-run-info--resolved {
  color: var(--color-status-active);
}

.journeys-tab__version-error {
  color: var(--color-text-secondary);
  font-style: italic;
}

.journeys-tab__version-meta {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.journeys-tab__version-content {
  padding: 0 14px 14px;
  border-top: 1px solid var(--color-border-light);
  background: var(--color-surface-secondary);
}

.journeys-tab__version-delete-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-danger);
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.journeys-tab__version-delete-btn:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--text-on-accent);
}

.journeys-tab__runs {
  padding: 8px 0 0;
}

.journeys-tab__runs > .journeys-tab__section-title {
  margin-bottom: 6px;
}

.journeys-tab__no-runs {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 6px 0 0;
}

.journeys-tab__runs-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface);
}

.journeys-tab__runs-table th {
  text-align: left;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  padding: 8px 10px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  vertical-align: middle;
}

.journeys-tab__runs-table td {
  padding: 10px;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.journeys-tab__runs-table th:last-child,
.journeys-tab__runs-table td:last-child {
  text-align: right;
}

.journeys-tab__runs-table tbody tr:last-child td {
  border-bottom: none;
}

.journeys-tab__run-row {
  cursor: pointer;
}

.journeys-tab__run-row:hover {
  background: var(--color-surface-secondary);
}

.journeys-tab__run-date {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.journeys-tab__run-duration {
  font-variant-numeric: tabular-nums;
}

.journeys-tab__replay-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 0.75rem;
}

.journeys-tab__replay-link:hover {
  text-decoration: underline;
}

/* Bug link — Replay rose for open bugs */
.journeys-tab__bug-link {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.125rem 0.5rem;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-brand) 14%, var(--color-surface));
  color: var(--color-brand);
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.15s;
}

.journeys-tab__bug-link:hover {
  background: color-mix(in srgb, var(--color-brand) 24%, var(--color-surface));
}

.journeys-tab__bug-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 1px;
  border-radius: 4px;
}

.journeys-tab__bug-link--resolved {
  background: var(--color-status-active-bg);
  color: var(--color-status-active);
}

.journeys-tab__bug-link--resolved:hover {
  background: color-mix(in srgb, var(--color-status-active) 22%, transparent);
}

.journeys-tab__bug-link--resolved:focus-visible {
  outline-color: var(--color-status-active);
}

.journeys-tab__bug-resolved-label {
  font-size: 0.6875rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Context labels for multiplayer journeys */
.journeys-tab__contexts {
  padding: 12px 14px;
  border-top: 1px solid var(--color-border);
}

.journeys-tab__context-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.journeys-tab__context-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  padding: 4px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}

.journeys-tab__action-context {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  padding: 2px 6px;
  border-radius: var(--radius-sm);
}

.journeys-tab__recording-links {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  justify-content: flex-end;
  width: 100%;
}

/* Viewport filter */
.journeys-tab__viewport-filter {
  display: flex;
  gap: 2px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius);
  padding: 2px;
}

.journeys-tab__filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.journeys-tab__filter-btn:hover {
  background: var(--color-surface-hover);
}

.journeys-tab__filter-btn--active {
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-weight: 600;
  box-shadow: none;
  border: 1px solid var(--color-border);
}

/* Mobile toggle in expanded journey */
.journeys-tab__journey-settings {
  padding: 10px 14px 12px 48px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
}

.journeys-tab__delete-journey-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 1px solid var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-danger);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.journeys-tab__delete-journey-btn:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--text-on-accent);
}

.journeys-tab__confirm-group {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.journeys-tab__confirm-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.journeys-tab__confirm-btn--yes {
  border: none;
  background: var(--color-danger);
  color: white;
}

.journeys-tab__confirm-btn--yes:hover {
  background: var(--color-danger-hover);
}

.journeys-tab__confirm-btn--no {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}

.journeys-tab__confirm-btn--no:hover {
  background: var(--color-surface-hover);
}

.journeys-tab__children {
  padding: 12px 16px 16px;
  border-top: 1px solid var(--color-border);
}

.journeys-tab__children .journeys-tab__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.journeys-tab__children-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-left: 8px;
  border-left: 2px solid var(--color-border);
}

.journeys-tab__child-journey {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  overflow: hidden;
}

.journeys-tab__child-journey .journeys-tab__journey-header {
  border-bottom: none;
}

.journeys-tab__child-journey .journeys-tab__journey-toggle {
  padding: 8px 12px;
  font-size: 13px;
}

.journeys-tab__child-journey .journeys-tab__journey-desc {
  padding: 0 12px 8px;
}

.journeys-tab__child-journey .journeys-tab__actions {
  padding: 0 12px 12px;
}

.journeys-tab__children-loading {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
  padding: 8px 0;
}
.bug-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: var(--color-surface);
}

/* Round the outer cells so the table corners follow the wrapper's rounded
   border now that the wrapper no longer clips with overflow: hidden (which
   would otherwise cut off the open status dropdown). */
.bug-table thead th:first-child {
  border-top-left-radius: var(--radius-lg);
}

.bug-table thead th:last-child {
  border-top-right-radius: var(--radius-lg);
}

.bug-table tbody tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-lg);
}

.bug-table tbody tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-lg);
}

.bug-table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  vertical-align: middle;
}

.bug-table td {
  padding: 10px 12px;
  font-size: 13px;
  border-bottom: 1px solid var(--color-border-light);
  vertical-align: middle;
}

.bug-table__row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.bug-table__row:hover td {
  background: var(--color-surface-secondary);
}

.bug-table__title {
  font-weight: 500;
  color: var(--color-text-primary);
}

.bug-table__date {
  color: var(--color-text-secondary);
  font-size: 12px;
  white-space: nowrap;
}

.bug-table__kind {
  color: var(--color-text-secondary);
  font-size: 12px;
  white-space: nowrap;
  text-transform: capitalize;
}


.bug-table__run {
  color: var(--color-text-secondary);
  font-size: 12px;
  font-family: monospace;
}

.bug-table__tooltip-wrapper {
  display: inline-flex;
}

.bug-table__status-cell {
  position: relative;
}

.bug-table__status-trigger {
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  transition: border-color 0.15s;
}

.bug-table__status-trigger:hover {
  border-color: var(--color-border);
}

.bug-table__status-trigger:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bug-table__status-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  z-index: 50;
  padding: 4px;
  min-width: 140px;
}

.bug-table__status-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 6px 8px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}

.bug-table__status-option:hover {
  background: var(--color-surface-secondary);
}

.bug-table__status-option--active {
  background: var(--color-surface-secondary);
}

.bug-table__status-option:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
}

.bug-table__send-webhook-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font-size: 13px;
  padding: 4px 0;
  border-radius: var(--radius-sm);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bug-table__send-webhook-btn:hover:not(:disabled) {
  color: var(--color-primary);
}

.bug-table__send-webhook-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bug-table__send-webhook-btn:disabled {
  color: var(--color-text-muted);
  cursor: default;
  text-decoration: none;
}

.bug-table-loading,
.bug-table-empty {
  text-align: center;
  padding: 40px 24px;
  color: var(--color-text-muted);
  font-size: 14px;
}

/* On wider tablet widths the table still shows, just with the lowest-priority column dropped. Below
   the mobile breakpoint the table is swapped out for the card list (see below). */
@media (max-width: 1024px) {
  .bug-table__col-discovered {
    display: none;
  }
}

/* ---- Mobile cards ---- */

/* Hidden on desktop; the table is the canonical view there. */
.bug-cards {
  display: none;
}

.bug-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background 0.12s ease;
}

.bug-card:hover,
.bug-card:active {
  background: var(--color-surface-secondary);
}

/* Severity badge on the left, status dropdown on the right. */
.bug-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.bug-card__severity {
  display: inline-flex;
}

/* Anchor the status dropdown to the card's right edge so its 140px panel doesn't overflow the
   viewport (the trigger sits at the far right of the card on mobile). */
.bug-card__top .bug-table__status-dropdown {
  left: auto;
  right: 0;
}

.bug-card__title {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.bug-card__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px 12px;
}

.bug-card__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.bug-card__meta-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}

.bug-card__meta-value {
  font-size: 13px;
  color: var(--color-text-primary);
  overflow-wrap: anywhere;
}

.bug-card__meta-value--cap {
  text-transform: capitalize;
}

.bug-card__meta-value--mono {
  font-family: monospace;
  font-size: 12px;
  color: var(--color-text-secondary);
}

@media (max-width: 768px) {
  .bug-table {
    display: none;
  }

  .bug-cards {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
}

/* Pull-request column — links a bug to the GitHub PR its QA discovered it in. */
.bug-table__col-pr {
  white-space: nowrap;
}
.bug-table__pr-link {
  font-variant-numeric: tabular-nums;
  color: var(--color-accent, #2563eb);
  text-decoration: none;
}
.bug-table__pr-link:hover {
  text-decoration: underline;
}
.status-filter {
  position: relative;
}

.status-filter__controls {
  display: flex;
  align-items: stretch;
}

.status-filter__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.status-filter__trigger:hover {
  border-color: var(--color-primary);
}

.status-filter__trigger--active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
  border-top-left-radius: var(--radius-pill);
  border-bottom-left-radius: var(--radius-pill);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-right: none;
}

.status-filter__clear {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
  background: var(--color-primary-light);
  border: 1px solid var(--color-primary);
  border-left: none;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-top-right-radius: var(--radius-pill);
  border-bottom-right-radius: var(--radius-pill);
  color: var(--color-primary);
}

.status-filter__clear:hover {
  background: var(--color-primary);
  color: white;
}

.status-filter__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  min-width: 160px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-float);
  z-index: 50;
  padding: 4px;
}

.status-filter__option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: none;
  background: none;
  text-align: left;
  font-size: 14px;
  color: var(--color-text-primary);
  border-radius: 6px;
}

.status-filter__option:hover {
  background: var(--color-surface-hover);
}

.status-filter__option--selected {
  background: var(--color-primary-light);
  color: var(--color-primary);
  font-weight: 500;
}
.severity-sort {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.severity-sort:hover {
  background: var(--color-surface-hover);
  border-color: color-mix(in srgb, var(--color-primary) 28%, var(--color-border));
}

.severity-sort:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.severity-sort--asc {
  background: var(--color-primary-light);
  border-color: color-mix(in srgb, var(--color-primary) 35%, var(--color-border));
  color: var(--color-primary);
}
.bug-list-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.bug-list-tab__controls {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.bug-list-tab__table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.bug-list-tab__resolved-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.bug-list-tab__resolved-toggle:hover {
  border-color: var(--color-primary);
  color: var(--color-text-primary);
}

.bug-list-tab__resolved-toggle--active {
  background: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.bug-list-tab__resolved-toggle:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* The toolbar is two groups — filters on the left, action buttons on the right — each an inner flex
   row. The groups stay on one line until the row is too narrow, then the actions group wraps as a
   whole to the second line (so it holds both buttons) instead of the Missing Bug button dropping
   down on its own. Each group still wraps internally at very narrow widths. */
.bug-list-tab__filters {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.bug-list-tab__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-left: auto;
}

/* Highlighted accent button so the "Missing Bug" call-to-action stands out on the page. */
.bug-list-tab__missing-bug-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid var(--color-brand);
  background: var(--color-brand);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 600;
  color: #ffffff;
  cursor: pointer;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand) 35%, transparent);
  transition: background 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s;
}

.bug-list-tab__missing-bug-btn:hover {
  background: color-mix(in srgb, var(--color-brand) 88%, #000);
  border-color: color-mix(in srgb, var(--color-brand) 88%, #000);
  color: #ffffff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-brand) 45%, transparent);
}

.bug-list-tab__missing-bug-btn:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

/* Explanatory text shown in the report modal describing what happens and that it's free. */
.missing-bug-intro {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  margin: 0 0 14px;
}

.missing-bug-intro strong {
  color: var(--color-text-primary);
  font-weight: 600;
}

/* Confirmation text shown after a missing-bug report is submitted (in the modal). */
.missing-bug-done {
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.bug-list-tab__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
}

.bug-list-tab__error p {
  margin: 0;
  font-size: 14px;
}

.bug-list-tab__error button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}

.bug-list-tab__error button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

@media (max-width: 480px) {
  .bug-list-tab__delete-all-wrapper {
    margin-left: 0;
    width: 100%;
  }

  .bug-list-tab__delete-all-btn {
    width: 100%;
    justify-content: center;
  }

  .bug-list-tab__confirm-group {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
  }

  .bug-list-tab__confirm-btn {
    width: 100%;
    justify-content: center;
  }
}
.processing {
  padding: 0;
}

.processing__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  flex-wrap: wrap;
  gap: 16px;
}

.processing__header--settings {
  margin-bottom: 16px;
  align-items: flex-start;
}

.processing__subsection {
  margin-bottom: 20px;
}

.processing__subsection:last-child {
  margin-bottom: 0;
}

.processing__title-block {
  min-width: 0;
}

.processing__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.processing__subtitle {
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-text-secondary);
  line-height: 1.45;
  max-width: 36rem;
}

.processing__actions {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.processing__config {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-secondary);
}

.processing__config-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-primary);
  cursor: pointer;
  transition: background 0.15s;
}

.processing__config-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
}

.processing__config-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.processing__config-value {
  font-weight: 600;
  font-size: 16px;
  color: var(--color-text-primary);
  min-width: 24px;
  text-align: center;
}

.processing__refresh-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.processing__refresh-btn--compact {
  width: 36px;
  min-width: 36px;
  height: 36px;
  padding: 0;
  gap: 0;
}

.processing__history-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 8px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.processing__history-link:hover {
  background: var(--color-surface-hover);
}

.processing__history-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.processing__refresh-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.processing__refresh-btn:hover {
  background: var(--color-surface-hover);
}

.processing__section {
  margin-bottom: 32px;
}

.processing__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}

.processing__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-secondary);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--color-border);
  margin-left: 4px;
}

.processing__empty {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 24px;
  text-align: center;
  background: var(--color-surface-secondary);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
}

.processing__cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.processing__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
}

.processing__card--running {
  border-left: 3px solid var(--color-status-in-progress);
}

.processing__card--clickable:hover {
  background: var(--color-bg-hover);
}

.processing__card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.processing__card-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.processing__card-status--running {
  color: var(--color-status-in-progress);
}

.processing__pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-status-in-progress);
  animation: pulse-dot 1.5s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.5; transform: scale(0.8); }
}

.processing__container-name {
  font-size: 12px;
  color: var(--color-text-muted);
  font-family: monospace;
}

.processing__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.processing__card-field {
  display: flex;
  gap: 8px;
  font-size: 13px;
}

.processing__card-label {
  color: var(--color-text-muted);
  min-width: 64px;
  flex-shrink: 0;
}

.processing__card-value {
  color: var(--color-text-primary);
  font-weight: 500;
}

.processing__card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 12px;
  font-size: 13px;
  color: var(--color-primary);
  text-decoration: none;
}

.processing__card-link:hover {
  text-decoration: underline;
}

.processing__card-footer {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.processing__table-wrap {
  overflow: hidden;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.processing__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.processing__table th {
  text-align: left;
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  vertical-align: middle;
}

.processing__table td {
  padding: 10px 12px;
  color: var(--color-text-primary);
  vertical-align: middle;
}

.processing__queue-row:not(:last-child) td {
  border-bottom: 1px solid var(--color-border-light);
}

.processing__queue-pos {
  width: 40px;
  color: var(--color-text-muted);
  font-weight: 600;
}

.processing__queue-time {
  color: var(--color-text-muted);
  white-space: nowrap;
}

.processing__queue-actions {
  width: 40px;
  text-align: center;
}

.processing__delete-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 0;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}

.processing__delete-btn:hover:not(:disabled) {
  color: var(--color-danger);
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
}

.processing__delete-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.processing__loading {
  padding: 48px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.processing__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
}

.processing__retry-btn {
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.processing__spawn-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  padding: 8px 18px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.processing__spawn-btn:hover {
  background: var(--color-primary-hover);
}

.processing__spawn-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.processing__retry-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.processing__retry-btn:hover {
  background: var(--color-primary-hover);
}

@media (max-width: 640px) {
  .processing {
    padding: 12px;
  }

  .processing__title {
    font-size: 20px;
  }

  .processing__cards {
    grid-template-columns: 1fr;
  }
}
.members-loading {
  font-size: 13px;
  color: var(--color-text-secondary);
  padding: 12px 0;
}

.members-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px;
}

.members-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  margin-bottom: 8px;
  background: var(--color-surface);
}

.members-list__info {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  min-width: 0;
}

.members-list__email {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.members-list__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.members-list__badge--owner {
  background: var(--color-primary-light);
  color: var(--color-primary);
  border-color: color-mix(in srgb, var(--color-primary) 22%, var(--color-border));
}

.members-list__badge--pending {
  background: var(--color-status-paused-bg);
  color: var(--color-status-paused);
  border-color: color-mix(in srgb, var(--color-status-paused) 22%, var(--color-border));
}

.members-list__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
}

.members-list__remove-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--color-danger);
  background: var(--color-danger-bg);
  border-radius: var(--radius);
  color: var(--color-danger);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.members-list__remove-btn:hover {
  background: var(--color-danger-hover);
  border-color: var(--color-danger-hover);
  color: var(--text-on-accent);
}

.members-list__remove-btn:focus-visible {
  outline: 2px solid var(--color-danger);
  outline-offset: 2px;
}

.members-list__confirm {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.members-list__confirm button {
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 500;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--radius-pill);
  cursor: pointer;
  color: var(--color-text-secondary);
}

.members-list__confirm button:hover {
  background: var(--color-surface-hover);
}

.members-list__confirm-btn {
  background: var(--color-danger) !important;
  color: white !important;
  border-color: var(--color-danger) !important;
}

.members-list__confirm-btn:hover {
  background: var(--color-danger-hover) !important;
  border-color: var(--color-danger-hover) !important;
}

.members-invite {
  margin-top: 4px;
}

.members-invite__error {
  font-size: 13px;
  color: var(--color-danger);
  margin-top: 8px;
}
.explorations-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.explorations-tab__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

.explorations-tab__new-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.explorations-tab__new-btn:hover {
  background: var(--color-primary-hover);
}

.explorations-tab__new-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.explorations-tab__loading {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.explorations-tab__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
}

.explorations-tab__error button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}

.explorations-tab__empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-secondary);
}

/* Single exploration view. Capped to the same width as the journey detail hero
   (.journey-detail, max-width 920px) so a lone exploration's rrweb preview doesn't
   stretch across the full panel. */
.explorations-tab__single {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 920px;
}

.explorations-tab__single-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.explorations-tab__single-prompt {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.explorations-tab__single-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px 24px;
  margin: 0;
}

.explorations-tab__single-meta-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.explorations-tab__single-meta-item dt {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.explorations-tab__single-meta-item dd {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-primary);
  font-variant-numeric: tabular-nums;
}

/* Cards grid (multiple explorations) */
.explorations-tab__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(264px, 1fr));
  gap: 16px;
}

.explorations-tab__card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.explorations-tab__card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

/* Non-admin (non-navigating) exploration tile: no hover/pointer affordances since there is no link. */
.explorations-tab__card--static {
  cursor: default;
}
.explorations-tab__card--static:hover {
  border-color: var(--color-border);
  box-shadow: none;
  transform: none;
}

.explorations-tab__card:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.explorations-tab__card-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 16 / 9;
  background: #0b0b0f;
  overflow: hidden;
}

.explorations-tab__card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px 12px;
}

.explorations-tab__card-titlerow {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.explorations-tab__card-title {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.explorations-tab__card-titlerow .explorations-tab__status {
  flex-shrink: 0;
}

.explorations-tab__card-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}

.explorations-tab__card-metaitem {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--color-text-secondary);
}

.explorations-tab__card-date {
  margin-left: auto;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.explorations-tab__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.explorations-tab__status--queued {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.explorations-tab__status--in-progress {
  background: var(--color-status-in-progress-bg);
  color: var(--color-status-in-progress);
  border-color: color-mix(in srgb, var(--color-status-in-progress) 22%, var(--color-border));
}

.explorations-tab__status--completed {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
  border-color: color-mix(in srgb, var(--color-status-completed) 25%, var(--color-border));
}

.explorations-tab__status--failed {
  background: var(--color-status-failed-bg);
  color: var(--color-status-failed);
  border-color: color-mix(in srgb, var(--color-status-failed) 25%, var(--color-border));
}

/* Modal */
.explorations-tab__modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--overlay-scrim);
  display: flex;
  /* Center the dialog, but keep it reachable when it's taller than the viewport (common on mobile):
     overflow-y makes the overlay scrollable, and the dialog's `margin: auto` centers it while
     collapsing to 0 on overflow — so the dialog aligns to the top instead of being cropped. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  z-index: 1000;
}

.explorations-tab__modal {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 480px;
  max-width: 90vw;
  max-height: calc(100vh - 2rem);
  /* dvh tracks the mobile browser chrome (URL bar); plain vh sizes to the larger layout viewport. */
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow-y: auto;
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-float);
}

.explorations-tab__modal h2 {
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0 0 16px;
}

.explorations-tab__modal-field {
  margin-bottom: 16px;
}

.explorations-tab__modal-field label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 6px;
}

.explorations-tab__modal-field textarea {
  width: 100%;
  min-height: 100px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
}

.explorations-tab__modal-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.explorations-tab__modal-field input[type='number'] {
  width: 88px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-size: 14px;
}

.explorations-tab__modal-field input[type='number']:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-primary) 18%, transparent);
}

.explorations-tab__modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.explorations-tab__modal-cancel {
  padding: 8px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  color: var(--color-text-primary);
  font-size: 14px;
  cursor: pointer;
}

.explorations-tab__modal-cancel:hover {
  background: var(--color-surface-hover);
}

.explorations-tab__modal-submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.explorations-tab__modal-submit:hover {
  background: var(--color-primary-hover);
}

.explorations-tab__modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.explorations-tab__create-error {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--color-danger-bg);
  border: 1px solid color-mix(in srgb, var(--color-danger) 35%, var(--color-border));
  border-radius: var(--radius);
  color: var(--color-danger);
  font-size: 13px;
}
.polish-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.polish-tab__header {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.polish-tab__refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 18px;
  background: var(--color-surface);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.polish-tab__refresh-btn:hover {
  background: var(--color-surface-hover);
}

.polish-tab__refresh-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.polish-tab__loading {
  padding: 48px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
}

.polish-tab__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
}

.polish-tab__error button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
}

.polish-tab__empty {
  padding: 40px 24px;
  text-align: center;
  color: var(--color-text-muted);
  font-size: 14px;
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-secondary);
}

/* Table */
.polish-tab__table-wrap {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface);
}

.polish-tab__table {
  width: 100%;
  border-collapse: collapse;
}

.polish-tab__th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface-secondary);
  vertical-align: middle;
}

.polish-tab__th--toggle {
  width: 36px;
  padding-left: 10px;
  padding-right: 4px;
}

.polish-tab__th--num {
  text-align: right;
  width: 88px;
}

.polish-tab__th--status {
  width: 128px;
}

.polish-tab__th--date {
  width: 1%;
  white-space: nowrap;
}

.polish-tab__td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-light);
  font-size: 13px;
  color: var(--color-text-primary);
  vertical-align: middle;
}

.polish-tab__td--toggle {
  width: 36px;
  text-align: center;
  color: var(--color-text-muted);
}

.polish-tab__td--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.polish-tab__td--date {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.polish-tab__journey {
  max-width: 420px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}

.polish-tab__status {
  display: inline-flex;
  align-items: center;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.polish-tab__status--pending {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.polish-tab__status--in-progress {
  background: var(--color-status-in-progress-bg);
  color: var(--color-status-in-progress);
  border-color: color-mix(in srgb, var(--color-status-in-progress) 22%, var(--color-border));
}

.polish-tab__status--completed {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
  border-color: color-mix(in srgb, var(--color-status-completed) 25%, var(--color-border));
}

.polish-tab__status--failed {
  background: var(--color-status-failed-bg);
  color: var(--color-status-failed);
  border-color: color-mix(in srgb, var(--color-status-failed) 25%, var(--color-border));
}

/* Non-admin pass/task rows don't open a task page — no pointer, no hover highlight. */
.polish-tab__row--static {
  cursor: default;
}
.polish-tab__row--static:hover {
  background: var(--color-surface-secondary);
}

/* Row styles */
.polish-tab__row {
  cursor: pointer;
  transition: background 0.12s ease;
}

.polish-tab__row:hover {
  background: var(--color-surface-secondary);
}

/* Group rows (test run level) */
.polish-tab__row--group {
  font-weight: 500;
}

.polish-tab__row--group.polish-tab__row--expanded {
  background: var(--color-surface-secondary);
}

.polish-tab__row--group.polish-tab__row--expanded > .polish-tab__td {
  border-bottom-color: var(--color-border);
}

/* Nested task rows */
.polish-tab__row--task {
  background: var(--color-surface-secondary);
}

.polish-tab__row--task:hover {
  background: var(--color-surface-hover);
}

.polish-tab__td--task-icon {
  padding-left: 14px;
}

.polish-tab__td--task-name {
  padding-left: 20px;
  font-weight: 500;
  font-size: 13px;
  color: var(--color-text-primary);
}

/* Per-task sub-rows nested under a pass row (one per slot + retry). */
.polish-tab__row--subtask {
  background: var(--color-surface-secondary);
}

.polish-tab__row--subtask:hover {
  background: var(--color-surface-hover);
}

.polish-tab__td--subtask-icon {
  padding-left: 34px;
}

.polish-tab__td--subtask-name {
  padding-left: 40px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

/* Loading row inside expanded group */
.polish-tab__row--loading .polish-tab__td {
  background: var(--color-surface-secondary);
}

.polish-tab__loading-inline {
  font-size: 13px;
  color: var(--color-text-muted);
  padding-left: 20px;
}

/* Status icons in table rows */
.polish-tab__status-icon--completed { color: var(--color-status-completed); }
.polish-tab__status-icon--failed { color: var(--color-status-failed); }
.polish-tab__status-icon--in-progress {
  color: var(--color-status-in-progress);
  animation: polish-spin 1s linear infinite;
}
.polish-tab__status-icon--pending { color: var(--color-text-muted); }

@keyframes polish-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Row arrow */
.polish-tab__row-arrow {
  color: var(--color-text-muted);
  vertical-align: middle;
  margin-left: 6px;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.polish-tab__row:hover .polish-tab__row-arrow {
  opacity: 1;
}

.polish-tab__row-arrow--visible {
  opacity: 0.4;
}

.polish-tab__row:hover .polish-tab__row-arrow--visible {
  opacity: 1;
}

.polish-tab__date-text {
  vertical-align: middle;
}

@media (max-width: 720px) {
  .polish-tab__table-wrap {
    overflow-x: auto;
  }

  .polish-tab__table {
    min-width: 640px;
  }
}
/* Custom dropdown (label + short description per option, "coming soon" badges). Shared by the
   new-project flow (StartQaForm) and the GitHub setup page (GithubSetup). Prefix: .np-select
   Self-contained: defines its own --np-accent fallback so it renders correctly outside the .np root. */
.np-select {
  --np-accent: var(--color-primary);
  position: relative;
}
.np-select__trigger {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, box-shadow 150ms ease;
}
.np-select__trigger:hover:not(:disabled) {
  background: var(--color-surface);
}
.np-select__trigger:focus-visible {
  outline: none;
  border-color: var(--np-accent);
  background: var(--color-surface);
  box-shadow:
    0 0 0 2px var(--color-surface),
    0 0 0 4px color-mix(in srgb, var(--np-accent) 35%, transparent);
}
.np-select__trigger:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.np-select__value {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.np-select__value-label {
  font-size: 14px;
  font-weight: 500;
}
.np-select__value-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.np-select__chevron {
  flex: none;
  color: var(--color-text-muted);
  transition: transform 150ms ease;
}
.np-select__trigger[aria-expanded='true'] .np-select__chevron {
  transform: rotate(180deg);
}
.np-select__menu {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  padding: 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
}
.np-select__option {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  border-radius: calc(var(--radius) - 2px);
  background: transparent;
  color: var(--color-text-primary);
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}
.np-select__option:hover:not(:disabled),
.np-select__option:focus-visible {
  outline: none;
  background: var(--color-surface-secondary);
}
.np-select__option--selected {
  background: color-mix(in srgb, var(--np-accent) 10%, transparent);
}
.np-select__option--disabled {
  cursor: not-allowed;
  opacity: 0.65;
}
.np-select__option-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.np-select__option-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}
.np-select__option-desc {
  font-size: 12px;
  line-height: 1.4;
  color: var(--color-text-secondary);
}
.np-select__check {
  flex: none;
  margin-top: 2px;
  color: var(--np-accent);
}
.np-coming-soon {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
  white-space: nowrap;
}
/* Responsive 16:9 box that establishes the cover's size; the cover fills it absolutely so the
   shared-layout morph has a stable frame to animate to. */
.journey-hero__sizer {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}

/* No-replay placeholder box (loading / none / restricted): a 16:9 frame carrying the same
   `layoutId` as the grid card so the shared-layout morph still has a stable target. */
.journey-hero__cover {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #0b0b0f;
  border: 1px solid var(--color-border);
}

.journey-hero__cover--empty {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Inline player: rendered directly (no click-to-play cover), sized to the recording. */
.journey-hero__player-wrap {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 14px;
}
.versions-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.versions-tab__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
}

.versions-tab__title {
  font-size: 18px;
  font-weight: 600;
  margin: 0 0 4px;
}

.versions-tab__subtitle {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  margin: 0;
}

.versions-tab__subtitle code {
  font-family: ui-monospace, monospace;
  background: var(--surface-2, #f3f4f6);
  padding: 1px 5px;
  border-radius: 4px;
}

.versions-tab__add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface, #fff);
  cursor: pointer;
  white-space: nowrap;
}

.versions-tab__add-btn:hover:not(:disabled) {
  background: var(--surface-2, #f3f4f6);
}

.versions-tab__add-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.versions-tab__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-2, #f9fafb);
}

.versions-tab__form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.versions-tab__form-row label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
}

.versions-tab__form-row input,
.versions-tab__form-row textarea {
  padding: 7px 10px;
  font-size: 13px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface, #fff);
  font-family: inherit;
}

.versions-tab__form-actions {
  display: flex;
  justify-content: flex-end;
}

.versions-tab__error {
  color: var(--danger, #dc2626);
  font-size: 13px;
  margin: 0;
}

.versions-tab__muted {
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
}

.versions-tab__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.versions-tab__item {
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  overflow: hidden;
}

.versions-tab__row {
  display: grid;
  grid-template-columns: 18px minmax(110px, auto) minmax(120px, 1fr) minmax(140px, auto) auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 10px 14px;
  background: var(--surface, #fff);
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: 13px;
}

.versions-tab__row:hover {
  background: var(--surface-2, #f9fafb);
}

.versions-tab__chevron {
  transition: transform 0.15s ease;
  color: var(--text-secondary, #9ca3af);
}

.versions-tab__chevron--open {
  transform: rotate(90deg);
}

.versions-tab__sha {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: ui-monospace, monospace;
  font-weight: 500;
}

.versions-tab__branch {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--text-secondary, #6b7280);
}

.versions-tab__main-tag {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: var(--accent-soft, #ede9fe);
  color: var(--accent, #6d28d9);
  padding: 1px 5px;
  border-radius: 4px;
  font-weight: 600;
}

.versions-tab__time {
  color: var(--text-secondary, #9ca3af);
  font-size: 12px;
}

.versions-tab__status {
  justify-self: end;
}

.versions-tab__expanded {
  padding: 14px;
  border-top: 1px solid var(--border, #e5e7eb);
  background: var(--surface-2, #f9fafb);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.versions-tab__deploy-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--accent, #6d28d9);
  word-break: break-all;
}

.versions-tab__deploy-pending {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  font-style: italic;
}

.pr-section__polish-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pr-section__polish-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--surface, #fff);
  font-size: 12px;
  color: var(--text, #111827);
  text-decoration: none;
}

.pr-section__polish-item:hover {
  border-color: var(--accent, #6d28d9);
}

/* Non-admin: polish passes are listed without a link into the admin-only task page. */
.pr-section__polish-item--static {
  cursor: default;
}
.pr-section__polish-item--static:hover {
  border-color: var(--border, #e5e7eb);
}

.pr-section__polish-icon {
  display: inline-flex;
  align-items: center;
}

.pr-section__polish-item--completed .pr-section__polish-icon { color: var(--success, #16a34a); }
.pr-section__polish-item--failed .pr-section__polish-icon { color: var(--danger, #dc2626); }
.pr-section__polish-item--in-progress .pr-section__polish-icon,
.pr-section__polish-item--queued .pr-section__polish-icon,
.pr-section__polish-item--pending .pr-section__polish-icon { color: var(--accent, #6d28d9); }

.pr-section__polish-name {
  font-weight: 500;
}

.pr-section__polish-status {
  color: var(--text-secondary, #6b7280);
}

.pr-section__polish-bugs {
  color: var(--danger, #dc2626);
  font-weight: 500;
}

.pr-section__polish-arrow {
  margin-left: auto;
  color: var(--text-secondary, #9ca3af);
  flex-shrink: 0;
}

.versions-tab__task-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
  color: var(--accent, #6d28d9);
}

.versions-tab__task-link:hover {
  text-decoration: underline;
}

/* Non-admin: the exploration prompt is shown but doesn't link into the admin-only task page. */
.versions-tab__task-link--static {
  color: inherit;
  cursor: default;
}
.versions-tab__task-link--static:hover {
  text-decoration: none;
}

.versions-tab__journey-link {
  color: var(--accent, #6d28d9);
}

.versions-tab__journey-link:hover {
  text-decoration: underline;
}

.versions-tab__expl-hint {
  margin: 0 0 8px;
}

.versions-tab__expl-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.versions-tab__expl {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  background: var(--surface, #fff);
}

.versions-tab__expl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}

.versions-tab__expl-counts {
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  white-space: nowrap;
}

.versions-tab__detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.versions-tab__detail-section h4 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #6b7280);
  margin: 0 0 6px;
}

/* Collapsible change description (it can be a full git diff). */
.versions-tab__change-details > summary {
  cursor: pointer;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 6px;
  user-select: none;
}

.versions-tab__change-desc {
  font-size: 12.5px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
  max-height: 420px;
  overflow: auto;
  background: var(--color-surface-secondary, rgba(127, 127, 127, 0.06));
  border-radius: 6px;
  padding: 10px 12px;
}

.versions-tab__changes {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.versions-tab__changes th,
.versions-tab__changes td {
  text-align: left;
  padding: 5px 8px;
  border-bottom: 1px solid var(--border, #e5e7eb);
}

.versions-tab__changes th {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary, #9ca3af);
}

.versions-tab__badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  text-transform: capitalize;
  padding: 1px 7px;
  border-radius: 4px;
}

.versions-tab__badge--created { background: #dcfce7; color: #166534; }
.versions-tab__badge--updated { background: #dbeafe; color: #1e40af; }
.versions-tab__badge--deleted { background: #fee2e2; color: #991b1b; }

.versions-tab__counts {
  display: flex;
  gap: 14px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
}

/* Journey changes shown as the same cards the Journeys grid uses, each expandable into an inline
   replay. The grid mirrors the Journeys grid's responsive auto-fill layout. */
.versions-tab__journey-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  margin: 6px 0 12px;
}

.versions-tab__journey-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.versions-tab__journey-card .versions-tab__badge {
  align-self: flex-start;
}

.versions-tab__journey-card--deleted {
  gap: 4px;
}

.versions-tab__journey-deleted-name {
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  text-decoration: line-through;
}

/* Expanded card: spans the full grid row so the reused JourneyReplayHero player gets real estate,
   capped so it doesn't dominate the panel. */
.versions-tab__journey-expanded {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 640px;
}

.versions-tab__journey-expanded-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.versions-tab__journey-collapse {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  cursor: pointer;
  color: var(--text-secondary, #6b7280);
}

.versions-tab__journey-collapse:hover {
  color: var(--text-primary, #111827);
  border-color: var(--text-secondary, #9ca3af);
}

.versions-tab__fp-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-secondary, #6b7280);
  margin-bottom: 8px;
}
.versions-tab__fp-meta code {
  font-size: 11.5px;
}
.versions-tab__fp-table {
  display: block;
  max-height: 280px;
  overflow: auto;
}
.versions-tab__fp-url {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11.5px;
}

/* --- Deployment monitor (detect mode): active banner + history ----------------------------------- */
@keyframes versions-tab-spin { to { transform: rotate(360deg); } }
.versions-tab__spin { animation: versions-tab-spin 1.4s linear infinite; flex-shrink: 0; }

.versions-tab__monitor {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  background: var(--color-surface-secondary, #f9fafb);
}
.versions-tab__monitor--active {
  border-color: var(--color-primary, #6366f1);
  background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, transparent);
}
.versions-tab__monitor-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.versions-tab__monitor-title { font-weight: 600; font-size: 14px; }
.versions-tab__monitor-text { font-size: 12.5px; color: var(--text-secondary, #6b7280); }
.versions-tab__monitor-text code { font-size: 11.5px; word-break: break-all; }
.versions-tab__monitor-idle {
  display: flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--text-secondary, #6b7280); margin-bottom: 12px;
}
.versions-tab__monitor-idle code { font-size: 11.5px; }

.versions-tab__mon-history { margin-bottom: 14px; font-size: 13px; }
.versions-tab__mon-history > summary {
  cursor: pointer; font-weight: 500; color: var(--text-secondary, #6b7280);
  padding: 4px 0; user-select: none;
}
.versions-tab__mon-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.versions-tab__mon-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 6px 8px; border-radius: 8px; background: var(--color-surface-secondary, #f9fafb);
}
.versions-tab__mon-time { font-size: 12px; color: var(--text-secondary, #6b7280); min-width: 150px; }
.versions-tab__mon-checks { font-size: 12px; color: var(--text-secondary, #6b7280); margin-left: auto; }
.versions-tab__mon-outcome { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; }
.versions-tab__mon-outcome--detected { color: var(--color-success, #16a34a); }
.versions-tab__mon-outcome--failed { color: var(--color-danger, #dc2626); }
.versions-tab__mon-outcome--expired { color: var(--text-secondary, #6b7280); }
.versions-tab__mon-link { color: var(--color-primary, #6366f1); }

/* === Bugs discovered in a version (and reused on the GitHub tab's PR view) === */
.versions-tab__bugs-list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.versions-tab__bug-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}
.versions-tab__bug-sev {
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-surface-2, #2a2a35);
  color: var(--color-text-muted, #aaa);
}
.versions-tab__bug-sev--critical { background: #4a1212; color: #ff8585; }
.versions-tab__bug-sev--high { background: #4a2a12; color: #ffb066; }
.versions-tab__bug-sev--medium { background: #3a3512; color: #e6d24a; }
.versions-tab__bug-sev--low { background: #1f3320; color: #8fd49a; }
.versions-tab__bug-kind {
  font-size: 11px;
  color: var(--color-text-muted, #999);
}
.versions-tab__bug-status { margin-left: auto; }

/* === Pull requests panel on the GitHub tab === */
.pr-section {
  margin-bottom: 28px;
}
.pr-section__title {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  margin: 0 0 4px;
}
.pr-section__counts {
  font-size: 12px;
  color: var(--color-text-muted, #999);
}
.pr-section__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-bottom: 10px;
}
.pr-section__badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
}
.pr-section__badge--approved { background: #16331c; color: #6fd389; }
.pr-section__badge--blocked { background: #3a1414; color: #ff7d7d; }
.pr-section__badge--pending { background: #2a2a35; color: #b9b9c8; }
.pr-section__badge--cancelled { background: #2a2a35; color: #8a8a96; }

/* Screenshots the agent attached to a PR, shown in the expanded PR view. */
.pr-section__screenshots {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.pr-section__screenshot {
  margin: 0;
  max-width: 240px;
}
.pr-section__screenshot img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  border: 1px solid var(--color-border, #33333f);
  background: #15151c;
}
.pr-section__screenshot figcaption {
  margin-top: 5px;
  font-size: 12px;
  color: var(--color-text-muted, #999);
  line-height: 1.35;
}
.source-link-card {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.source-link-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 13px;
}

.source-link-card__link:hover {
  text-decoration: underline;
}

.source-link-card__text {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.source-link-card__popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  min-width: 240px;
  max-width: 340px;
  padding: 10px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1), 0 1px 4px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.source-link-card__popover-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.source-link-card__popover-icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.source-link-card__popover-label {
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 10px;
  min-width: 56px;
  flex-shrink: 0;
}

.source-link-card__popover-value {
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.source-link-card__popover-link {
  color: var(--color-primary);
  text-decoration: none;
}

.source-link-card__popover-link:hover {
  text-decoration: underline;
}
.github-tab {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.github-tab__muted {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  color: var(--text-secondary, #6b7280);
  font-size: 13px;
  line-height: 1.5;
}

.github-tab__error {
  color: var(--danger, #dc2626);
  font-size: 13px;
  margin: 0;
}

.github-tab__connect {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  max-width: 520px;
  margin: 32px auto;
  padding: 40px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 12px;
  background: var(--surface, #fff);
}

/* Full-width children inside the centered card (the heading stays auto-width and centered). */
.github-tab__connect > .github-tab__field,
.github-tab__connect > .github-tab__connect-status {
  width: 100%;
}

.github-tab__connect-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
}

.github-tab__connect-icon {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--surface-2, #f3f4f6);
  color: var(--text-primary, #111827);
}

.github-tab__connect-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 4px;
}

.github-tab__connect-lead {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary, #6b7280);
  margin: 0;
  max-width: 38ch;
}

.github-tab__field {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.github-tab__field label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary, #6b7280);
}

.github-tab__field input {
  padding: 9px 11px;
  font-size: 13px;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface, #fff);
  font-family: inherit;
}

.github-tab__connect-status {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.github-tab__connect-ok {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  color: var(--color-success, #16a34a);
  margin: 0;
}

/* Status sentences (icon + wrapping text). Keeping the icon a non-shrinking flex item and the
   message in its own span lets the sentence — repo names and URLs included — wrap as one block
   instead of each segment landing on its own line. */
.github-tab__connect-ok > svg,
.github-tab__muted > svg {
  flex-shrink: 0;
  margin-top: 1px;
}

.github-tab__status-text {
  min-width: 0;
  overflow-wrap: anywhere;
}

.github-tab__link-btn {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: 7px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text-primary, #111827);
  cursor: pointer;
  text-align: center;
  overflow-wrap: anywhere;
}

.github-tab__link-btn:hover:not(:disabled) {
  background: var(--surface-2, #f3f4f6);
}

.github-tab__link-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Testing options block inside the connect card. */
.github-tab__options {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 4px;
}

.github-tab__options-title {
  font-size: 14px;
  font-weight: 600;
  margin: 0;
}

/* Inline editor for an existing connection's settings (opened from the connected bar's Edit button). */
.github-tab__edit {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 520px;
  margin: 0 0 16px;
  padding: 20px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  background: var(--surface, #fff);
}

.github-tab__edit-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Connected header bar shown above the version history. */
.github-tab--linked {
  gap: 0;
}

.github-tab__connected-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 16px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface-2, #f9fafb);
}

.github-tab__connected-repo {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  color: var(--text-secondary, #6b7280);
  min-width: 0;
}

.github-tab__connected-repo a {
  font-weight: 600;
  color: var(--text-primary, #111827);
}

.github-tab__connected-repo a:hover {
  text-decoration: underline;
}

.github-tab__connected-actions {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.github-tab__disconnect-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid var(--border, #d1d5db);
  border-radius: 6px;
  background: var(--surface, #fff);
  color: var(--text-primary, #111827);
  cursor: pointer;
  white-space: nowrap;
}

.github-tab__disconnect-btn:hover:not(:disabled) {
  background: var(--surface-2, #f3f4f6);
}

.github-tab__disconnect-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.github-tab__disconnect-btn--confirm {
  border-color: var(--danger, #dc2626);
  color: var(--danger, #dc2626);
}

.github-tab__disconnect-btn--confirm:hover:not(:disabled) {
  background: var(--danger-soft, #fef2f2);
}
.embedded-login {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.embedded-login__message {
  margin: 0;
  font-size: 0.95rem;
  color: var(--color-text-primary);
}

.embedded-login__button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #fff;
  background: var(--color-primary);
  border: none;
  border-radius: 7px;
  cursor: pointer;
  transition: opacity 0.15s;
}

.embedded-login__button:hover:not(:disabled) {
  opacity: 0.9;
}

.embedded-login__button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.embedded-login__spinner {
  animation: embedded-login-spin 0.8s linear infinite;
}

@keyframes embedded-login-spin {
  to { transform: rotate(360deg); }
}

.embedded-login__hint {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-text-muted, var(--color-text-secondary));
  max-width: 320px;
}

.embedded-login__error {
  margin: 0;
  font-size: 0.8rem;
  color: var(--color-danger);
  max-width: 320px;
}
.project-detail {
  padding: 0;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.project-detail__update-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 16px;
  flex-shrink: 0;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-radius: var(--radius);
  font-size: 14px;
}

.project-detail__masthead {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  min-height: 48px;
  margin-bottom: 8px;
  background: var(--color-surface-secondary);
}

.project-detail__masthead > * {
  width: 100%;
}

.project-detail__sheet {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.project-detail__sheet-scroll {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.project-detail__sheet-scroll .tab-navigation {
  position: sticky;
  top: 0;
  z-index: 3;
  margin-bottom: 0;
  padding: 0 4px 0 12px;
  gap: 2px;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-surface);
  box-shadow: 0 6px 14px -10px color-mix(in srgb, var(--color-text-primary) 28%, transparent);
}

.project-detail__sheet-scroll .tab-navigation__tab {
  padding-left: 14px;
  padding-right: 14px;
}

.project-detail__readonly-banner {
  padding: 8px 16px;
  background: var(--color-warning-bg, #fef3cd);
  color: var(--color-warning-text, #856404);
  font-size: 13px;
  text-align: center;
  border-bottom: 1px solid var(--color-border);
}

.project-detail__panel {
  padding: 20px 20px 24px;
}

.project-detail__sheet--inactive .project-detail__skeleton-tabs {
  margin: 0;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}

.project-detail__skeleton-panel {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.project-detail__back {
  margin-bottom: 16px;
}

.project-detail__error {
  padding: 48px;
  text-align: center;
  color: var(--color-text-muted);
}

.project-detail__error-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 12px;
}

.project-detail__error button {
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.project-detail__error-back-btn {
  background: var(--color-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
}

.project-detail__error button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.project-detail__update-error button {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  padding: 2px;
  flex-shrink: 0;
}

@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.15; }
  50% { opacity: 0.3; }
}

.project-detail__skeleton-back {
  width: 140px;
  height: 16px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 20px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.project-detail__skeleton-header {
  display: flex;
  align-items: center;
  gap: 16px;
}

.project-detail__skeleton-title {
  width: 200px;
  height: 18px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  margin-bottom: 8px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.project-detail__skeleton-url {
  width: 200px;
  height: 14px;
  background: var(--color-border);
  border-radius: var(--radius-sm);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.1s;
}

.project-detail__skeleton-tabs {
  width: 100%;
  height: 44px;
  background: var(--color-border);
  margin: 0;
  border-radius: 0;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.2s;
}

.project-detail__skeleton-block {
  width: 100%;
  height: 120px;
  background: var(--color-border);
  border-radius: var(--radius);
  animation: skeleton-pulse 1.5s ease-in-out infinite;
  animation-delay: 0.3s;
}

.project-detail__skeleton-block--short {
  width: 70%;
  height: 80px;
  animation-delay: 0.4s;
}

@media (max-width: 640px) {
  .project-detail {
    padding: 0;
  }

  .project-detail__masthead {
    min-height: 0;
    margin-bottom: 8px;
  }

  .project-detail__loading,
  .project-detail__error {
    padding: 32px 16px;
  }

  .project-detail__sheet {
    border-radius: var(--radius);
  }

  .project-detail__sheet-scroll .tab-navigation {
    padding: 0 8px;
    gap: 0;
  }

  .project-detail__sheet-scroll .tab-navigation__tab {
    padding-left: 12px;
    padding-right: 12px;
  }

  .project-detail__panel {
    padding: 14px 12px 18px;
  }

  .project-detail__back {
    margin-bottom: 12px;
  }
}
/* Exploration replay carousel on the experimental project overview (OverviewExplorations.tsx). */
.ov-explore {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.ov-explore__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ov-explore__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ov-explore__spin {
  color: var(--color-brand, #f02d5e);
  animation: ov-explore-spin 0.9s linear infinite;
}
@keyframes ov-explore-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ov-explore__spin { animation: none; } }

.ov-explore__nav {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.ov-explore__count {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  min-width: 44px;
  text-align: center;
}

.ov-explore__nav-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.ov-explore__nav-btn:hover:not(:disabled) { color: var(--color-text-primary); background: var(--color-surface-hover); }
.ov-explore__nav-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ov-explore__stage {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-secondary);
}

/* Loading placeholder — mirror the 16:9 frame TaskEventReplay reserves for its stage so the
   journeys grid below doesn't shift when the real replay swaps in. */
.ov-explore__stage--placeholder {
  aspect-ratio: 16 / 9;
}

.ov-explore__prompt {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* Expanded journey player on the experimental project overview (OverviewJourneyPlayer.tsx). Mirrors
   the exploration player's replay stage, with the journey's filed-bug list below. */
.ov-journey {
  display: flex;
  flex-direction: column;
  gap: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: 14px;
}

.ov-journey__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ov-journey__title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text-primary);
  min-width: 0;
}

.ov-journey__spin {
  color: var(--color-brand, #f02d5e);
  animation: ov-journey-spin 0.9s linear infinite;
  flex-shrink: 0;
}
@keyframes ov-journey-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ov-journey__spin { animation: none; } }

.ov-journey__close {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
  flex-shrink: 0;
}
.ov-journey__close:hover { color: var(--color-text-primary); background: var(--color-surface-hover); }

.ov-journey__stage {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--color-surface-secondary);
}

.ov-journey__no-replay {
  margin: 0;
  padding: 32px 16px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.ov-journey__bugs {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.ov-journey__bugs-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.ov-journey__bugs-empty {
  margin: 0;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.ov-journey__bug-list {
  display: flex;
  flex-direction: column;
}

.ov-journey__bug-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 4px;
  border-bottom: 1px solid var(--color-surface-secondary);
  text-decoration: none;
  transition: background 0.12s;
}
.ov-journey__bug-row:last-child { border-bottom: none; }
.ov-journey__bug-row:hover { background: #ececec; }

.ov-journey__bug-severity {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}
.ov-journey__bug-severity--critical { background: rgba(239, 68, 68, 0.15); color: var(--color-severity-critical); }
.ov-journey__bug-severity--high { background: rgba(249, 115, 22, 0.15); color: var(--color-severity-high); }
.ov-journey__bug-severity--medium { background: rgba(234, 179, 8, 0.15); color: var(--color-severity-medium); }
.ov-journey__bug-severity--low { background: rgba(107, 114, 128, 0.15); color: var(--color-severity-low); }

.ov-journey__bug-title {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ov-journey__bug-kind {
  font-size: 11px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.ov-journey__bug-arrow {
  color: var(--color-text-muted);
  flex-shrink: 0;
  opacity: 0;
  transition: opacity 0.12s;
}
.ov-journey__bug-row:hover .ov-journey__bug-arrow { opacity: 1; }
.project-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-4, 16px);
  max-width: 1100px;
  margin: 0 auto;
  padding: var(--space-6, 24px);
  width: 100%;
  /* .app-main is a flex column that scrolls this page. With the default flex-shrink the page collapses
     to the viewport height and its tall content overflows past the bottom padding, leaving the last
     journey flush against the bottom with nothing below it and no way to scroll clear of it.
     flex-shrink:0 keeps the full content height so the bottom padding sits below the last card. */
  flex-shrink: 0;
  padding-bottom: 48px;
}

/* Content blocks (bugs, journeys) ----------------------------------------- */
.project-overview__status-banner {
  margin-top: 2px;
}

.project-overview__block {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.project-overview__block-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.project-overview__block-title {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary);
}

.project-overview__empty {
  margin: 0;
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Each journey occupies a layout-animated grid cell (a motion.div) that reflows as a single unit
   when a journey is expanded/collapsed, so the card media no longer desyncs from its frame. The
   cell stretches its single child (a JourneyCard or the expanded player) to fill it. */
.project-overview__journey-cell {
  display: flex;
  min-width: 0;
}
.project-overview__journey-cell > * {
  flex: 1;
  min-width: 0;
}
/* An expanded journey takes over the full width of the journeys grid so its replay + bug list have
   room, rather than being squeezed into a single card-sized column. */
.project-overview__journey-cell--expanded {
  grid-column: 1 / -1;
}

/* Masthead ---------------------------------------------------------------- */
.project-overview__masthead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4, 16px);
  flex-wrap: wrap;
}

.project-overview__info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.project-overview__name {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0;
  color: var(--color-text-primary);
  line-height: 1.2;
  border-radius: var(--radius-sm, 6px);
}

.project-overview__name--editable {
  cursor: text;
  padding: 2px 4px;
  margin: -2px -4px;
}
.project-overview__name--editable:hover {
  background: var(--color-surface-hover);
}

.project-overview__name-input {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  padding: 2px 4px;
}

.project-overview__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.project-overview__url:hover {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

.project-overview__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.project-overview__action {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.project-overview__action:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}
.project-overview__action--active {
  background: var(--color-surface-hover);
  border-color: var(--color-border-strong, var(--color-border));
  color: var(--color-text-primary);
}
.project-overview__action--chat {
  color: var(--color-primary, #2563eb);
  border-color: var(--color-primary, #2563eb);
}
.project-overview__action--chat:hover {
  background: color-mix(in srgb, var(--color-primary, #2563eb) 10%, transparent);
  color: var(--color-primary, #2563eb);
}

/* Settings pane ----------------------------------------------------------- */
.project-overview__settings-pane {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface);
  padding: var(--space-4, 16px);
}
.project-overview__settings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3, 12px);
}
.project-overview__settings-title {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
  color: var(--color-text-primary);
}
.project-overview__settings-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.project-overview__settings-close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* Collapsible sections ---------------------------------------------------- */
.project-overview__section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg, 12px);
  background: var(--color-surface);
  overflow: hidden;
}

.project-overview__section-head {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color-text-primary);
  transition: background 0.12s;
}
.project-overview__section-head:hover {
  background: var(--color-surface-hover);
}

.project-overview__section-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-text-secondary);
}

.project-overview__section-title {
  font-size: 1rem;
  font-weight: 600;
}

.project-overview__section-summary {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--color-text-muted);
}

.project-overview__section-chevron {
  color: var(--color-text-muted);
  transition: transform 0.18s ease;
  flex-shrink: 0;
}
.project-overview__section--open .project-overview__section-chevron {
  transform: rotate(180deg);
}

.project-overview__section-body {
  border-top: 1px solid var(--color-border);
  padding: var(--space-4, 16px);
}

/* Summary bits ------------------------------------------------------------ */
.project-overview__stat-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.project-overview__stat {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.project-overview__stat--active { color: var(--color-primary, #2563eb); }
.project-overview__stat--bugs { color: var(--color-danger, #dc2626); font-weight: 600; }
.project-overview__stat--ok { color: var(--color-success, #16a34a); }

.project-overview__github-connected {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-text-secondary);
}
.project-overview__github-disconnected {
  color: var(--color-text-muted);
}
.project-overview__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.project-overview__dot--ok { background: var(--color-success, #16a34a); }

.project-overview__spin {
  animation: project-overview-spin 1s linear infinite;
}
@keyframes project-overview-spin {
  to { transform: rotate(360deg); }
}

/* Skeleton + error -------------------------------------------------------- */
.project-overview__masthead-skeleton {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.project-overview__skeleton-title {
  width: 220px;
  height: 28px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-hover);
}
.project-overview__skeleton-url {
  width: 160px;
  height: 16px;
  border-radius: var(--radius-sm, 6px);
  background: var(--color-surface-hover);
}

.project-overview__error {
  margin: var(--space-6, 24px) auto;
  max-width: 560px;
  text-align: center;
  color: var(--color-text-secondary);
}
.project-overview__error-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: var(--space-3, 12px);
  flex-wrap: wrap;
}
.project-overview__error-actions button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 0.85rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 8px);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  cursor: pointer;
}
.project-overview__error-actions button:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

@media (max-width: 768px) {
  .project-overview { padding: var(--space-4, 16px); }
  .project-overview__actions { width: 100%; }
}
.status-indicator {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}

.status-indicator--completed {
  background: var(--color-status-completed-bg);
  color: var(--color-status-active-text);
}

.status-indicator--failed {
  background: var(--color-status-failed-bg);
  color: var(--color-status-failed);
}

.status-indicator--in-progress {
  background: var(--color-status-in-progress-bg);
  color: var(--color-status-in-progress);
  animation: pulse-status 2s ease-in-out infinite;
}

.status-indicator--incomplete {
  background: var(--color-status-incomplete-bg);
  color: var(--color-status-incomplete);
}

@keyframes pulse-status {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}

.status-indicator__tooltip {
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 10px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 400;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  box-shadow: var(--shadow-float);
  pointer-events: none;
  z-index: 10;
}

.status-indicator__tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--color-primary);
}
/* "Target URL" indicator pinned near the top of a task-detail page (see TargetUrlBadge.tsx). */
.target-url-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  margin-bottom: 20px;
  padding: 7px 12px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.target-url-badge:hover {
  border-color: var(--color-primary);
  color: var(--color-text);
}

.target-url-badge__icon {
  flex-shrink: 0;
  color: var(--color-primary);
}

.target-url-badge__label {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.target-url-badge__url {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--color-primary);
}

.target-url-badge__ext {
  flex-shrink: 0;
  opacity: 0.6;
}
.journey-detail {
  max-width: 920px;
  margin: 0 auto;
  padding: 24px 20px 64px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* `.app-main > *` (AppShell.css) sets `flex: 0 1 auto`, so when this page is taller than the
   viewport the flex column SHRINKS it to the available height. Its children then overflow the
   collapsed box (the page scrolls via `.app-main`), which parks this page's own `padding-bottom`
   mid-scroll instead of at the end — so scrolling to the bottom leaves zero breathing room below
   the last version. Pinning the page to its content height puts the bottom padding back at the
   true end of the scroll. Higher specificity than `.app-main > *` so it wins regardless of order. */
.app-main > .journey-detail {
  flex-shrink: 0;
}

.journey-detail__breadcrumb {
  font-size: 13px;
  color: var(--color-text-secondary, #9ca3af);
}

.journey-detail__breadcrumb a {
  color: var(--color-primary, #2563eb);
  text-decoration: none;
}

.journey-detail__breadcrumb a:hover {
  text-decoration: underline;
}

.journey-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.journey-detail__title-group {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.journey-detail__title-icon {
  color: var(--color-primary, #2563eb);
  flex-shrink: 0;
}

.journey-detail__title {
  margin: 0;
  font-size: 24px;
  font-weight: 650;
  color: var(--color-text);
  word-break: break-word;
}

.journey-detail__actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.journey-detail__run-btn,
.journey-detail__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 7px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border);
}

.journey-detail__run-btn {
  background: var(--color-primary, #2563eb);
  color: #fff;
  border-color: var(--color-primary, #2563eb);
}

.journey-detail__run-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.journey-detail__edit-btn {
  background: var(--color-surface);
  color: var(--color-text);
}

.journey-detail__edit-btn:hover {
  background: var(--color-surface-secondary);
}

.journey-detail__flags {
  display: flex;
  gap: 8px;
}

.journey-detail__flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary, #6b7280);
  border: 1px solid var(--color-border);
}

.journey-detail__summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journey-detail__desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text);
}

.journey-detail__instructions {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 10px 12px;
}

.journey-detail__instructions-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: 4px;
}

.journey-detail__instructions p {
  margin: 0;
  font-size: 14px;
  line-height: 1.45;
  color: var(--color-text);
}

.journey-detail__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.journey-detail__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text);
}

.journey-detail__muted {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-secondary, #9ca3af);
}

.journey-detail__versions {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey-detail__version {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journey-detail__version-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.journey-detail__version-num {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text);
}

.journey-detail__version-latest {
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  background: var(--color-primary-soft, rgba(37, 99, 235, 0.12));
  color: var(--color-primary, #2563eb);
}

.journey-detail__version-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.journey-detail__version-time,
.journey-detail__run-time {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary, #9ca3af);
}

.journey-detail__version-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
}

.journey-detail__version-source {
  font-size: 13px;
  color: var(--color-text-secondary, #6b7280);
  display: flex;
  align-items: center;
  gap: 4px;
}

.journey-detail__version-source a {
  color: var(--color-primary, #2563eb);
  text-decoration: none;
}

.journey-detail__version-source a:hover {
  text-decoration: underline;
}

.journey-detail__version-runs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}

.journey-detail__version-no-runs {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-secondary, #9ca3af);
}

.journey-detail__run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: 7px;
  background: var(--color-surface-secondary);
  text-decoration: none;
  color: var(--color-text);
}

.journey-detail__run-row:hover {
  border-color: var(--color-primary, #2563eb);
}

.journey-detail__run-bugs {
  font-size: 12px;
  color: var(--color-text-secondary, #6b7280);
}

.journey-detail__run-arrow {
  margin-left: auto;
  color: var(--color-text-secondary, #9ca3af);
}

.journey-detail__error {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-secondary, #9ca3af);
}

.journey-detail__skeleton {
  border-radius: 8px;
  background: var(--color-surface-secondary);
}

.journey-detail__skeleton--title {
  height: 32px;
  width: 50%;
}

.journey-detail__skeleton--block {
  height: 180px;
}

/* The cover-photo banner at the top of the page, holding the latest-run replay. The grid→cover morph
   and the cover→lightbox expansion are driven by Framer Motion shared-layout animations (see
   JourneyReplayHero), so this box stays a plain, unclipped container — clipping/transforms here would
   interfere with the morph. */
.journey-detail__cover {
  border-radius: 10px;
}

/* Loading shimmer shown inside the cover box while the replay is still being fetched. The box itself
   (with its shared `layoutId`) is already mounted, so the open/close morph plays regardless. */
.journey-detail__cover-shimmer {
  position: absolute;
  inset: 0;
  background: var(--color-surface-secondary);
  animation: journey-cover-shimmer 1.5s ease-in-out infinite;
}

@keyframes journey-cover-shimmer {
  0%, 100% { opacity: 0.35; }
  50% { opacity: 0.6; }
}

/* Centered message inside the cover box when there's no replay to show (no runs yet / sign-in
   required). */
.journey-detail__cover-msg {
  margin: 0;
  padding: 0 24px;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary, #9ca3af);
}

/* Child-journey tiles: compact links to each child's own journey page. */
.journey-detail__children {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.journey-detail__child-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  text-decoration: none;
  color: var(--color-text);
}

.journey-detail__child-row:hover {
  border-color: var(--color-primary, #2563eb);
}

.journey-detail__child-icon {
  color: var(--color-text-secondary, #9ca3af);
  flex-shrink: 0;
}

.journey-detail__child-name {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Embedded `/p/*` views render run rows as static (no task-detail route to link to). */
.journey-detail__run-row--static {
  cursor: default;
}

.journey-detail__run-row--static:hover {
  border-color: var(--color-border);
}

.leave-feedback {
  display: block;
}

.leave-feedback__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.leave-feedback__trigger:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-light);
}

/* Red "Report Problem" treatment — mirrors the brand-accent "Missing Bug" button so the two
   feedback call-to-actions read as a pair. */
.leave-feedback__trigger--report {
  color: #ffffff;
  font-weight: 600;
  background: var(--color-brand);
  border-color: var(--color-brand);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--color-brand) 35%, transparent);
}

.leave-feedback__trigger--report:hover {
  color: #ffffff;
  background: color-mix(in srgb, var(--color-brand) 88%, #000);
  border-color: color-mix(in srgb, var(--color-brand) 88%, #000);
  box-shadow: 0 2px 6px color-mix(in srgb, var(--color-brand) 45%, transparent);
}

.leave-feedback__trigger--report:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
}

.leave-feedback__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  /* Center the dialog, but keep it reachable when it's taller than the viewport (common on mobile):
     overflow-y makes the overlay scrollable, and the dialog's `margin: auto` centers it while
     collapsing to 0 on overflow — so the dialog aligns to the top instead of being cropped. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.leave-feedback__dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 480px;
  max-width: 90vw;
  max-height: calc(100vh - 2rem);
  /* dvh tracks the mobile browser chrome (URL bar); plain vh sizes to the larger layout viewport. */
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow-y: auto;
}

.leave-feedback__dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.leave-feedback__dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.leave-feedback__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.leave-feedback__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
}

.leave-feedback__description {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 12px 0;
  line-height: 1.5;
}

.leave-feedback__textarea {
  width: 100%;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  line-height: 1.5;
  color: var(--color-text-primary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  box-sizing: border-box;
}

.leave-feedback__textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.leave-feedback__error {
  font-size: 12px;
  color: var(--color-danger);
  margin-top: 8px;
}

.leave-feedback__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 16px;
}

.leave-feedback__cancel {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.leave-feedback__cancel:hover {
  background: var(--color-surface-hover);
}

.leave-feedback__submit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.leave-feedback__submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.leave-feedback__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.leave-feedback__spinner {
  animation: leave-feedback-spin 1s linear infinite;
}

@keyframes leave-feedback-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.leave-feedback__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--color-text-primary);
  padding: 16px 0;
  text-align: center;
  line-height: 1.5;
}

.leave-feedback__done {
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: white;
  background: var(--color-primary);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.leave-feedback__done:hover {
  background: var(--color-primary-hover);
}
.replay-link {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  max-width: 100%;
  color: var(--color-brand);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: color 150ms ease;
}

.replay-link__lead {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.replay-link__id {
  font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace);
  font-size: 13px;
  line-height: 1.35;
  word-break: break-all;
  overflow-wrap: anywhere;
  max-width: 100%;
}

.replay-link:hover {
  color: var(--color-brand);
}

.replay-link:hover .replay-link__lead {
  text-decoration: underline;
}

.replay-link:focus-visible {
  outline: 2px solid var(--color-brand);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

@media (max-width: 640px) {
  .replay-link {
    font-size: 13px;
  }

  .replay-link__id {
    font-size: 12px;
  }
}
.bug-metadata {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.bug-metadata h2 {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 14px;
}

.bug-metadata__status-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.bug-metadata__list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}

.bug-metadata__list dd {
  margin: 0;
}

.bug-metadata__item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  min-width: 0;
}

.bug-metadata__icon {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.bug-metadata__label {
  color: var(--color-text-muted);
  font-size: 12px;
  font-weight: 500;
  min-width: 72px;
  flex-shrink: 0;
}

.bug-metadata__value {
  color: var(--color-text-primary);
  flex: 1;
  min-width: 0;
}

.bug-metadata__value--muted {
  color: var(--color-text-muted);
  font-style: italic;
}

.bug-metadata__link {
  color: var(--color-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.bug-metadata__link:hover {
  text-decoration: underline;
  align-items: flex-start;
}

.bug-metadata__recordings-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  min-width: 0;
}

.bug-metadata__recording-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface-secondary);
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.bug-metadata__recording-context {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Replay.io links: neutral chrome in sidebar; ID wraps on its own row (see ReplayLink) */
.bug-metadata .replay-link {
  font-size: 13px;
  color: var(--color-primary);
}

.bug-metadata .replay-link:hover {
  color: var(--color-primary-hover);
}

.bug-metadata .replay-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.bug-metadata__send-webhook-btn {
  background: transparent;
  border: none;
  color: var(--color-text-secondary);
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.bug-metadata__send-webhook-btn:hover:not(:disabled) {
  color: var(--color-primary);
}

.bug-metadata__send-webhook-btn:disabled {
  color: var(--color-text-muted);
  cursor: default;
  text-decoration: none;
}

.bug-metadata__feedback {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

@media (max-width: 640px) {
  .bug-metadata {
    padding: 16px;
  }
}

@media (max-width: 480px) {
  .bug-metadata {
    padding: 12px;
  }

  .bug-metadata__item {
    flex-wrap: wrap;
  }

  .bug-metadata__label {
    min-width: 0;
  }
}
.guidance-deps {
  margin-top: 20px;
}

.guidance-deps__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.guidance-deps__list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.guidance-deps__item {
  display: inline-flex;
}

.guidance-deps__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  background: var(--color-info-muted-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}

.guidance-deps__link:hover {
  background: var(--color-info-muted-bg-hover);
  text-decoration: none;
}

.guidance-deps__key {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-weight: 500;
}

.guidance-deps__version {
  color: var(--color-text-muted);
  font-size: 11px;
}
.bug-detail {
  padding: 0;
  max-width: 1100px;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

@media (max-width: 768px) {
  .bug-detail {
    flex: none;
    min-height: auto;
    overflow: visible;
  }
}

@media (max-width: 640px) {
  .bug-detail {
    padding: 12px;
  }
}

.bug-detail__actions-bar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
}

.bug-detail__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
}

.bug-detail__error-message {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
  margin: 0;
}

.bug-detail__error-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.bug-detail__retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-pill);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.bug-detail__retry-btn:hover {
  background: var(--color-primary-hover);
}

.bug-detail__retry-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bug-detail__mutation-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 10px 14px;
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border: 1px solid color-mix(in srgb, var(--color-danger) 28%, var(--color-border));
  border-radius: var(--radius-lg);
  font-size: 13px;
  line-height: 1.45;
  margin-bottom: 16px;
  flex-shrink: 0;
}

.bug-detail__skeleton-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}

.bug-detail__skeleton-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.bug-detail__skeleton-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bug-detail__skeleton-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.skeleton {
  background: var(--color-border-light);
  border-radius: 4px;
  animation: skeleton-pulse 1.5s ease-in-out infinite;
}

.skeleton--text {
  height: 14px;
}

.skeleton--title {
  width: 60%;
  height: 18px;
}

.skeleton--badge {
  width: 56px;
  height: 22px;
  border-radius: var(--radius-lg);
}

@keyframes skeleton-pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.4;
  }
}

.bug-detail__layout {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 20px;
  align-items: stretch;
  overflow: hidden;
}

/* New project overview: the details pane is removed, so the report spans the full width. */
.bug-detail__layout--no-sidebar {
  grid-template-columns: 1fr;
}

.bug-detail__main {
  min-width: 0;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.bug-detail__main .project-flag-warning {
  margin-bottom: 16px;
}

.bug-detail__sidebar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Keep this media query AFTER the base .bug-detail__main / .bug-detail__sidebar
   rules above. These overrides have the same specificity as the base rules, so
   if they come earlier in the source they lose the cascade and the page keeps
   its desktop nested scroll containers on mobile — which clips the bug report
   content and leaves a duplicate (sidebar) Details card. On mobile we drop the
   internal scrolling entirely and let .app-main be the single scroll container. */
@media (max-width: 768px) {
  .bug-detail__layout {
    grid-template-columns: 1fr;
    gap: 16px;
    overflow: visible;
    min-height: auto;
    flex: none;
  }

  .bug-detail__main {
    overflow: visible;
    min-height: auto;
  }

  .bug-detail__sidebar {
    display: none;
  }
}
.breadcrumb {
  margin-bottom: 20px;
}

.breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.breadcrumb__sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.breadcrumb__text {
  color: var(--color-text-secondary);
}
.task-detail {
  padding: 0 0 48px;
  max-width: 900px;
}

/* Header: icon + title + status badge + extra badges */
.task-detail__header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.task-detail__icon {
  display: inline-flex;
  color: var(--color-primary);
}

.task-detail__title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* Meta row of label/value pairs (see <MetaItem>) */
.task-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  margin-bottom: 28px;
  padding: 14px 18px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

.task-detail__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.task-detail__meta-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
}

.task-detail__meta-value {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
}

/* Sections + collapsible section toggle (shared with LogsSection classPrefix="task-detail") */
.task-detail__section {
  margin-bottom: 24px;
}

.task-detail__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.task-detail__section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.task-detail__section-toggle:hover {
  color: var(--color-text);
}

.task-detail__empty {
  color: var(--color-text-secondary);
  font-size: 13px;
  padding: 16px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
}

/* Logs (LogsSection classPrefix="task-detail") */
.task-detail__logs {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px;
}

.task-detail__log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 5px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
}

.task-detail__log-entry:hover {
  background: var(--color-bg);
}

.task-detail__log-time {
  color: var(--color-text-secondary);
  flex-shrink: 0;
  min-width: 70px;
}

.task-detail__log-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-primary);
  background: rgba(99, 102, 241, 0.08);
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}

.task-detail__log-badge--error {
  color: var(--color-danger);
  background: var(--color-danger-bg);
}

.task-detail__log-message {
  color: var(--color-text);
  white-space: pre-wrap;
  word-break: break-word;
  line-height: 1.4;
}

/* Footer action bar */
.task-detail__footer {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
}

/* Loading / error / not-found states */
.task-detail__state {
  max-width: 900px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 32px;
}

.task-detail__state--error {
  color: var(--color-danger, #dc2626);
}

.task-detail__state-message {
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text);
}

.task-detail__state-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-surface-secondary, var(--color-bg-secondary));
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
}

.task-detail__state-btn:hover {
  background: var(--color-surface-hover, var(--color-bg-secondary));
}

.task-detail__state-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}

.task-detail__state-back:hover {
  text-decoration: underline;
}

/* Skeleton placeholder */
.task-detail__skeleton-back,
.task-detail__skeleton-title,
.task-detail__skeleton-badge,
.task-detail__skeleton-row {
  background: linear-gradient(
    90deg,
    var(--color-surface-secondary, #eee) 25%,
    var(--color-border) 37%,
    var(--color-surface-secondary, #eee) 63%
  );
  background-size: 400% 100%;
  animation: task-detail-skeleton-pulse 1.5s ease-in-out infinite;
  border-radius: 4px;
}

.task-detail__skeleton-back {
  width: 120px;
  height: 14px;
  margin-bottom: 20px;
}

.task-detail__skeleton-title {
  width: 160px;
  height: 22px;
}

.task-detail__skeleton-badge {
  width: 64px;
  height: 22px;
  border-radius: 999px;
}

.task-detail__skeleton-row {
  height: 14px;
  margin-bottom: 12px;
  width: 80%;
}

.task-detail__skeleton-row--short {
  width: 55%;
}

@keyframes task-detail-skeleton-pulse {
  0% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0 50%;
  }
}
.screenshot-timeline {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.screenshot-timeline__heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
}

.screenshot-timeline__heading--toggle {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  margin-bottom: 0;
}

.screenshot-timeline__heading--toggle[aria-expanded="true"] {
  margin-bottom: 16px;
}

.screenshot-timeline__heading--toggle:hover {
  color: var(--color-text-primary);
}

.screenshot-timeline__chevron {
  transition: transform 0.15s ease;
}

.screenshot-timeline__chevron--open {
  transform: rotate(90deg);
}

.screenshot-timeline__list {
  display: flex;
  flex-direction: column;
}

.screenshot-timeline__item {
  display: flex;
  gap: 16px;
}

.screenshot-timeline__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 16px;
  padding-top: 4px;
}

.screenshot-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-primary);
  flex-shrink: 0;
}

.screenshot-timeline__dot--action {
  background: var(--color-status-paused);
}

.screenshot-timeline__dot--discovery {
  background: var(--color-status-active);
}

.screenshot-timeline__dot--error {
  background: var(--color-danger);
}

.screenshot-timeline__dot--agent {
  background: var(--color-severity-low);
}

.screenshot-timeline__dot--info {
  background: var(--color-text-muted);
}

.screenshot-timeline__line {
  width: 2px;
  flex: 1;
  background: var(--color-border);
  margin-top: 4px;
}

.screenshot-timeline__content {
  flex: 1;
  min-width: 0;
  padding-bottom: 20px;
}

.screenshot-timeline__content--log {
  padding-bottom: 16px;
}

.screenshot-timeline__item:last-child .screenshot-timeline__content {
  padding-bottom: 0;
}

.screenshot-timeline__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}

.screenshot-timeline__time {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.screenshot-timeline__url {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-muted);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.screenshot-timeline__caption {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin-bottom: 8px;
  line-height: 1.4;
}

.screenshot-timeline__thumb-btn {
  display: block;
  background: none;
  border: 2px solid var(--color-border);
  border-radius: var(--radius);
  padding: 0;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.15s;
  width: 100%;
}

.screenshot-timeline__thumb-btn:hover {
  border-color: var(--color-primary);
}

.screenshot-timeline__thumb-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.screenshot-timeline__img {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  object-position: top left;
  transition: max-height 0.3s ease;
}

.screenshot-timeline__img--expanded {
  max-height: none;
  object-fit: contain;
}

/* Log entries */
.screenshot-timeline__log-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--color-surface-hover);
  color: var(--color-text-muted);
}

.screenshot-timeline__log-badge--action {
  background: var(--color-status-paused-bg);
  color: var(--color-severity-medium);
}

.screenshot-timeline__log-badge--discovery {
  background: var(--color-status-active-bg);
  color: var(--color-status-active);
}

.screenshot-timeline__log-badge--error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.screenshot-timeline__log-badge--agent {
  background: var(--color-severity-low-bg);
  color: var(--color-severity-low);
}

.screenshot-timeline__dot--container {
  background: var(--color-primary);
}

.screenshot-timeline__log-badge--container {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
}

.screenshot-timeline__log-message {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.5;
  white-space: pre-wrap;
}

@media (max-width: 640px) {
  .screenshot-timeline {
    padding: 14px;
  }

  .screenshot-timeline__heading {
    font-size: 12px;
  }

  .screenshot-timeline__item {
    gap: 10px;
  }

  .screenshot-timeline__url {
    max-width: 160px;
  }
}
.retrigger-links {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.retrigger-links__row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.retrigger-links__label {
  font-weight: 500;
  color: var(--color-text-secondary);
}

.retrigger-links__link {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: 12px;
  background: var(--color-info-muted-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  text-decoration: none;
}

.retrigger-links__link:hover {
  background: var(--color-info-muted-bg-hover);
}

.retrigger-links__sep {
  margin-right: 4px;
}
.run-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
}

.run-summary__stat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 16px;
  color: var(--color-text-muted);
}

.run-summary__label {
  display: block;
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.run-summary__value {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

@media (max-width: 640px) {
  .run-summary {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  .run-summary__stat {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .run-summary {
    grid-template-columns: 1fr;
  }
}
.bugs-found-list {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
}

.bugs-found-list__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.bugs-found-list__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.bugs-found-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius);
  cursor: pointer;
  border: none;
  font: inherit;
  width: 100%;
  text-align: left;
}

.bugs-found-list__item:hover {
  background: var(--color-surface-hover);
}

.bugs-found-list__item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.bugs-found-list__title {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.bugs-found-list__duplicate-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  background: var(--color-surface-hover, #2a2a2f);
  border-radius: 10px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

/* Judge details section */
.bugs-found-list__judge {
  margin: 4px 0 4px 12px;
  padding: 8px 12px;
  background: var(--color-surface-secondary);
  border-left: 3px solid var(--color-warning, #e5a00d);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-size: 13px;
}

.bugs-found-list__judge-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  padding: 0;
}

.bugs-found-list__judge-toggle:hover {
  color: var(--color-text-primary);
}

.bugs-found-list__judge-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.bugs-found-list__judge-problem-chip {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  background: var(--color-surface-hover, #2a2a2f);
  border-radius: 10px;
  color: var(--color-text-secondary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.bugs-found-list__judge-details {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.bugs-found-list__judge-attempt {
  padding: 8px;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.bugs-found-list__judge-attempt-header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-danger, #e55);
}

.bugs-found-list__judge-attempt-header time {
  font-weight: 400;
  color: var(--color-text-tertiary);
  margin-left: auto;
}

.bugs-found-list__judge-problems {
  list-style: disc;
  margin: 6px 0 0 20px;
  padding: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.bugs-found-list__judge-problems li {
  margin-bottom: 2px;
}

.bugs-found-list__judge-assessment {
  margin: 6px 0 0;
  font-size: 12px;
  color: var(--color-text-secondary);
  font-style: italic;
}

.bugs-found-list__judge-analysis {
  margin-top: 8px;
}

.bugs-found-list__judge-analysis-toggle {
  display: flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  font: inherit;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary, #6c8cff);
  cursor: pointer;
  padding: 0;
}

.bugs-found-list__judge-analysis-toggle:hover {
  text-decoration: underline;
}

.bugs-found-list__judge-analysis-content {
  margin-top: 8px;
  padding: 8px;
  background: var(--color-surface-secondary);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.bugs-found-list__judge-field {
  margin-bottom: 8px;
}

.bugs-found-list__judge-field:last-child {
  margin-bottom: 0;
}

.bugs-found-list__judge-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-tertiary);
  margin-bottom: 2px;
}

.bugs-found-list__judge-field p {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.bugs-found-list__judge-chronology {
  margin: 4px 0 0;
  padding-left: 20px;
  font-size: 12px;
  color: var(--color-text-primary);
}

.bugs-found-list__judge-chronology li {
  margin-bottom: 6px;
  line-height: 1.5;
}

.bugs-found-list__judge-screenshot {
  display: block;
  max-width: 400px;
  max-height: 200px;
  margin-top: 4px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

/* Judge phase results (evidence / requirements) */
.bugs-found-list__judge-phase {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--color-surface);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.bugs-found-list__judge-phase-header {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bugs-found-list__judge-phase-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: 10px;
}

.bugs-found-list__judge-phase-badge--passed {
  background: var(--color-success-bg, rgba(34, 197, 94, 0.15));
  color: var(--color-success, #22c55e);
}

.bugs-found-list__judge-phase-badge--failed {
  background: var(--color-danger-bg, rgba(239, 68, 68, 0.15));
  color: var(--color-danger, #e55);
}

@media (max-width: 640px) {
  .bugs-found-list {
    padding: 14px;
  }

  .bugs-found-list__header {
    font-size: 12px;
  }

  .bugs-found-list__item {
    gap: 8px;
    padding: 8px 10px;
  }

  .bugs-found-list__title {
    font-size: 13px;
  }

  .bugs-found-list__judge-screenshot {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .bugs-found-list__item {
    flex-wrap: wrap;
  }
}
.recording-data-links {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.recording-data-links__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.recording-data-links__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-info-muted-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s;
}

.recording-data-links__link:hover {
  background: var(--color-primary);
  color: var(--text-on-accent);
}
.duplicates-detected {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.duplicates-detected__header {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.duplicates-detected__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.duplicates-detected__item {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.duplicates-detected__new {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.duplicates-detected__title {
  color: var(--color-text-primary);
  text-decoration: line-through;
  text-decoration-color: var(--color-text-muted);
}

.duplicates-detected__existing {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
}

.duplicates-detected__label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.duplicates-detected__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  font-size: 13px;
  color: var(--color-text-primary);
  cursor: pointer;
}

.duplicates-detected__link:hover {
  color: var(--color-primary);
}
.polish-run-detail {
  padding: 0 0 48px;
  max-width: 900px;
}

/* Breadcrumb */
.polish-breadcrumb {
  margin-bottom: 20px;
}

.polish-breadcrumb__list {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 13px;
}

.polish-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: 2px;
}

.polish-breadcrumb__sep {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.polish-breadcrumb__link {
  color: var(--color-text-secondary);
  text-decoration: none;
}

.polish-breadcrumb__link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.polish-breadcrumb__text {
  color: var(--color-text-secondary);
}

.polish-breadcrumb__passes {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.polish-breadcrumb__pass-link {
  display: inline-block;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}

.polish-breadcrumb__pass-link:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.polish-breadcrumb__pass-link--active {
  background: var(--color-info-muted-bg);
  border-color: var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}

.polish-run-detail__back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  padding: 0;
}

.polish-run-detail__back:hover {
  color: var(--color-primary);
}

.polish-run-detail__back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.polish-run-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

/* Timing */
.polish-run-detail__timing {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 24px;
  font-size: 13px;
}

.polish-run-detail__timing-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.polish-run-detail__timing-label {
  color: var(--color-text-muted);
  font-weight: 500;
}

.polish-run-detail__timing-value {
  color: var(--color-text-secondary);
}

.polish-run-detail__title-icon {
  color: var(--color-text-muted);
}

.polish-run-detail__title {
  font-size: 22px;
  font-weight: 700;
}

.polish-run-detail__journey {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.polish-run-detail__journey-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.polish-run-detail__journey-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

/* Recording links */
.polish-run-detail__recordings {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
}

.polish-run-detail__recording-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-info-muted-bg);
  border: 1px solid var(--color-primary);
  border-radius: var(--radius);
  text-decoration: none;
  transition: background 0.15s;
}

.polish-run-detail__recording-link:hover {
  background: var(--color-primary);
  color: var(--text-on-accent);
}

.polish-run-detail__recording-link--setup {
  color: var(--color-text-secondary);
  background: var(--color-surface-secondary);
  border-color: var(--color-border);
}

.polish-run-detail__recording-link--setup:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

/* Section */
.polish-run-detail__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.polish-run-detail__section h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.polish-run-detail > .run-summary {
  margin-bottom: 24px;
}

.polish-run-detail > .bugs-found-list {
  margin-bottom: 16px;
}

/* Pass cards */
.polish-run-detail__passes {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.polish-run-detail__pass-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 16px;
  background: var(--color-bg);
}

.polish-run-detail__pass-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.polish-run-detail__pass-type {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.polish-run-detail__pass-status {
  font-size: 12px;
  color: var(--color-text-muted);
  text-transform: capitalize;
}

.polish-run-detail__pass-bug-count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-danger);
}

.polish-run-detail__pass-icon--completed { color: var(--color-status-active); }
.polish-run-detail__pass-icon--failed { color: var(--color-danger); }
.polish-run-detail__pass-icon--in-progress {
  color: var(--color-status-in-progress);
  animation: polish-spin 1.5s linear infinite;
}
.polish-run-detail__pass-icon--pending { color: var(--color-text-muted); }

@keyframes polish-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Metrics */
.polish-run-detail__metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}

.polish-run-detail__metric {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 500;
}

.polish-run-detail__metric--good {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
}

.polish-run-detail__metric--needs-improvement {
  background: var(--color-status-in-progress-bg);
  color: var(--color-status-in-progress);
}

.polish-run-detail__metric--poor {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.polish-run-detail__metric--unknown {
  background: var(--color-surface-secondary);
  color: var(--color-text-muted);
}

.polish-run-detail__metric-name {
  font-weight: 600;
}

/* Findings */
.polish-run-detail__findings {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}

.polish-run-detail__finding {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
}

.polish-run-detail__finding-title {
  color: var(--color-text-primary);
}

.polish-run-detail__severity {
  display: inline-block;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: capitalize;
  flex-shrink: 0;
}

.polish-run-detail__severity--critical {
  background: var(--color-severity-critical-bg);
  color: var(--color-severity-critical);
}

.polish-run-detail__severity--high {
  background: var(--color-severity-high-bg);
  color: var(--color-severity-high);
}

.polish-run-detail__severity--medium {
  background: var(--color-severity-medium-bg);
  color: var(--color-severity-medium);
}

.polish-run-detail__severity--low {
  background: var(--color-severity-low-bg);
  color: var(--color-severity-low);
}

/* Created Journeys */
.polish-run-detail__created-journeys-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.polish-run-detail__created-journey-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.polish-run-detail__created-journey-header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: inherit;
}

.polish-run-detail__created-journey-header:hover {
  background: var(--color-surface-hover, var(--color-surface));
}

.polish-run-detail__created-journey-expand {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.polish-run-detail__created-journey-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  flex: 1;
  min-width: 0;
}

.polish-run-detail__created-journey-count {
  font-size: 12px;
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.polish-run-detail__created-journey-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
  flex-shrink: 0;
}

.polish-run-detail__created-journey-link:hover {
  text-decoration: underline;
}

.polish-run-detail__created-journey-desc {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
  padding: 0 12px 8px 34px;
  margin: 0;
}

.polish-run-detail__created-journey-steps {
  border-top: 1px solid var(--color-border);
  padding: 12px 12px 12px 20px;
}

/* Judge badges */
.polish-run-detail__judge-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
  flex-shrink: 0;
}

.polish-run-detail__judge-badge--approved {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
}

.polish-run-detail__judge-badge--rejected {
  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
  color: var(--color-danger, #ef4444);
}

.polish-run-detail__rejected-count {
  font-size: 12px;
  font-weight: 400;
  color: var(--color-text-muted);
}

/* Rejected journeys section */
.polish-run-detail__rejected-section {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface-secondary, var(--color-bg));
}

.polish-run-detail__rejected-summary {
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}

.polish-run-detail__rejected-summary::-webkit-details-marker {
  display: none;
}

.polish-run-detail__rejected-summary::before {
  content: '\25B6';
  font-size: 9px;
  transition: transform 0.15s;
}

.polish-run-detail__rejected-section[open] > .polish-run-detail__rejected-summary::before {
  transform: rotate(90deg);
}

.polish-run-detail__rejected-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 8px 8px;
}

.polish-run-detail__created-journey-item--rejected {
  opacity: 0.75;
  border-color: var(--color-danger-bg, rgba(239, 68, 68, 0.2));
}

/* Judge assessment */
.polish-run-detail__judge-assessment {
  padding: 8px 12px 12px 34px;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.polish-run-detail__judge-assessment--rejected {
  background: var(--color-danger-muted-bg, rgba(239, 68, 68, 0.04));
  border-top: 1px solid var(--color-danger-bg, rgba(239, 68, 68, 0.15));
  padding: 10px 12px 12px 34px;
}

.polish-run-detail__judge-assessment-text {
  margin: 0 0 6px;
}

.polish-run-detail__judge-problems {
  margin: 4px 0 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--color-danger, #ef4444);
}

.polish-run-detail__judge-problems li {
  margin-bottom: 2px;
}

/* Pass bugs */
.polish-run-detail__pass-bugs {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.polish-run-detail__pass-bug {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-primary);
}

.polish-run-detail__pass-empty,
.polish-run-detail__pass-pending {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: 0;
}

/* Skeleton */
.polish-run-detail .skeleton {
  background: var(--color-border-light);
  border-radius: 4px;
  animation: polish-skeleton-pulse 1.5s ease-in-out infinite;
}

.polish-run-detail .skeleton--text { height: 14px; }
.polish-run-detail .skeleton--back { width: 120px; height: 14px; margin-bottom: 20px; }
.polish-run-detail .skeleton--heading { width: 160px; height: 22px; }
.polish-run-detail .skeleton--badge { width: 64px; height: 22px; border-radius: var(--radius-lg); }

.polish-run-detail__skeleton-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.polish-run-detail .skeleton--section-title { width: 30%; }
.polish-run-detail .skeleton--section-body { width: 80%; }
.polish-run-detail .skeleton--section-body-short { width: 55%; }

@keyframes polish-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Error / empty */
.polish-run-detail__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
}

.polish-run-detail__error-message {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.polish-run-detail__retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.polish-run-detail__retry-btn:hover { background: var(--color-primary-hover); }

.polish-run-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  color: var(--color-text-muted);
  font-size: 15px;
}

/* Setup errors */
.polish-run-detail__setup-errors {
  background: var(--color-danger-muted-bg, rgba(239, 68, 68, 0.08));
  border: 1px solid var(--color-danger, #ef4444);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.polish-run-detail__setup-errors-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-danger, #ef4444);
  margin: 0 0 10px 0;
}

.polish-run-detail__setup-error-item {
  font-size: 13px;
  color: var(--color-text-primary);
  padding: 6px 0;
  border-bottom: 1px solid var(--color-border-light, rgba(239, 68, 68, 0.15));
  display: flex;
  gap: 8px;
  align-items: baseline;
}

.polish-run-detail__setup-error-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.polish-run-detail__setup-error-ctx {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-danger, #ef4444);
  background: var(--color-danger-muted-bg, rgba(239, 68, 68, 0.08));
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

.polish-run-detail__setup-error-msg {
  word-break: break-word;
}

/* Setup output */
.polish-run-detail__collapsible-header {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: inherit;
  font: inherit;
  text-transform: inherit;
  letter-spacing: inherit;
  padding: 0;
  cursor: pointer;
}

.polish-run-detail__collapsible-header:hover {
  color: var(--color-primary);
}

.polish-run-detail__setup-output-wrapper {
  position: relative;
}

.polish-run-detail__copy-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  z-index: 1;
}

.polish-run-detail__copy-btn:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-primary);
}

.polish-run-detail__setup-output {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 12px;
  font-size: 12px;
  line-height: 1.5;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  color: var(--color-text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}

.polish-run-detail__footer-actions {
  margin-top: 24px;
  padding: 16px 0 32px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.polish-run-detail__retrigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-surface-secondary);
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.polish-run-detail__retrigger-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.polish-run-detail__retrigger-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.polish-run-detail__retrigger-error {
  font-size: 13px;
  color: var(--color-danger);
  margin: 0;
}

@media (max-width: 640px) {
  .polish-run-detail { padding: 12px; }
  .polish-run-detail__title { font-size: 18px; }
  .polish-run-detail__section { padding: 14px; }
  .polish-run-detail__section h2 { font-size: 12px; }
}
.test-run-detail {
  padding: 0;
  max-width: 900px;
}

@media (max-width: 640px) {
  .test-run-detail {
    padding: 12px;
  }

  .test-run-detail__title {
    font-size: 18px;
  }

  .test-run-detail__header {
    margin-bottom: 16px;
  }

  .test-run-detail__section {
    padding: 14px;
  }

  .test-run-detail__section h2 {
    font-size: 12px;
  }

  .test-run-detail__error {
    padding: 32px 16px;
  }
}

.test-run-detail__back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  padding: 0;
}

.test-run-detail__back:hover {
  color: var(--color-primary);
}

.test-run-detail__back:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

.test-run-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

.test-run-detail__title {
  font-size: 22px;
  font-weight: 700;
}

.test-run-detail__goal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.test-run-detail__goal-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.test-run-detail__goal-text {
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.test-run-detail__journey {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
}

.test-run-detail__journey-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
}

.test-run-detail__journey-text {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--color-text-primary);
}

.test-run-detail__journey-version {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.test-run-detail__unstepped-badge {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-warning, #b45309);
  background: color-mix(in srgb, var(--color-warning, #b45309) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-warning, #b45309) 30%, transparent);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.test-run-detail__judge-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.test-run-detail__judge-badge--approved {
  color: #16a34a;
  background: rgba(34, 197, 94, 0.12);
  border: 1px solid rgba(34, 197, 94, 0.3);
}

.test-run-detail__judge-badge--rejected {
  color: #dc2626;
  background: rgba(239, 68, 68, 0.12);
  border: 1px solid rgba(239, 68, 68, 0.3);
}

.test-run-detail__journey-updates {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.test-run-detail__journey-updates-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.test-run-detail__journey-updates-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.test-run-detail__journey-update-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
}

.test-run-detail__journey-update-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #a78bfa;
  background: rgba(167, 139, 250, 0.1);
  border: 1px solid rgba(167, 139, 250, 0.25);
  border-radius: var(--radius-sm);
  padding: 2px 8px;
  white-space: nowrap;
}

.test-run-detail__journey-update-name {
  color: var(--color-text-primary);
  font-weight: 500;
}

.test-run-detail__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.test-run-detail > .run-summary {
  margin-bottom: 24px;
}

.test-run-detail > .tree-path-view,
.test-run-detail > .tree-diff-view,
.test-run-detail > .bugs-found-list {
  margin-bottom: 16px;
}

.test-run-detail__section h2 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

/* Journey actions */
.test-run-detail__actions-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.test-run-detail__action-item {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
}

.test-run-detail__action-item--failed {
  border-color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 5%, var(--color-bg));
}

.test-run-detail__action-header {
  display: flex;
  align-items: center;
  gap: 8px;
}

.test-run-detail__action-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-border-light);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.test-run-detail__action-item--failed .test-run-detail__action-step {
  background: var(--color-danger);
  color: white;
}

.test-run-detail__action-type {
  display: inline-block;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--color-border-light);
  font-size: 11px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  flex-shrink: 0;
}

.test-run-detail__action-desc {
  font-size: 13px;
  color: var(--color-text-primary);
}

.test-run-detail__action-details {
  margin-top: 6px;
  padding-left: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.test-run-detail__action-selector {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 4px;
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  color: var(--color-primary);
  font-family: monospace;
}

.test-run-detail__action-value {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.test-run-detail__action-var {
  font-size: 12px;
  color: var(--color-text-secondary);
  font-family: monospace;
}

.test-run-detail__action-checks {
  list-style: none;
  padding: 0;
  margin: 6px 0 0 30px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.test-run-detail__action-checks li {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.test-run-detail__action-checks li svg {
  flex-shrink: 0;
  color: var(--color-success);
}

.test-run-detail__action-item--failed .test-run-detail__action-checks li svg {
  color: var(--color-danger);
}

.test-run-detail__check-assertion {
  font-size: 10px;
  color: var(--color-text-tertiary);
  background: var(--color-bg-secondary);
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 4px;
  font-family: monospace;
}

/* Skeleton loading */
.test-run-detail .skeleton {
  background: var(--color-border-light);
  border-radius: 4px;
  animation: test-run-detail-skeleton-pulse 1.5s ease-in-out infinite;
}

.test-run-detail .skeleton--text {
  height: 14px;
}

.test-run-detail .skeleton--back {
  width: 120px;
  height: 14px;
  margin-bottom: 20px;
}

.test-run-detail .skeleton--heading {
  width: 140px;
  height: 22px;
}

.test-run-detail .skeleton--badge {
  width: 64px;
  height: 22px;
  border-radius: var(--radius-lg);
}

.test-run-detail__skeleton-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-run-detail .skeleton--stat-line {
  width: 45%;
  height: 14px;
}

.test-run-detail__skeleton-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test-run-detail .skeleton--section-title {
  width: 30%;
  height: 14px;
}

.test-run-detail .skeleton--section-body {
  width: 80%;
  height: 14px;
}

.test-run-detail .skeleton--section-body-short {
  width: 55%;
  height: 14px;
}

@keyframes test-run-detail-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* Error state */
.test-run-detail__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  color: var(--color-danger);
}

.test-run-detail__error-message {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-primary);
}

.test-run-detail__retry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.test-run-detail__retry-btn:hover {
  background: var(--color-primary-hover);
}

.test-run-detail__retry-btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Judge Review History */
.test-run-detail__section--judge {
  border-left: 3px solid var(--color-primary);
}

.test-run-detail__section--judge h2 {
  display: flex;
  align-items: center;
  gap: 6px;
}

.test-run-detail__judge-bug {
  margin-bottom: 16px;
}

.test-run-detail__judge-bug:last-child {
  margin-bottom: 0;
}

.test-run-detail__judge-bug-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 8px;
}

.test-run-detail__judge-submissions {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.test-run-detail__judge-submission {
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background: var(--color-bg);
}

.test-run-detail__judge-submission--approved {
  border-left: 3px solid var(--color-status-active);
}

.test-run-detail__judge-submission--rejected {
  border-left: 3px solid var(--color-danger);
}

.test-run-detail__judge-submission-icon {
  flex-shrink: 0;
  display: flex;
}

.test-run-detail__judge-submission--approved .test-run-detail__judge-submission-icon {
  color: var(--color-status-active);
}

.test-run-detail__judge-submission--rejected .test-run-detail__judge-submission-icon {
  color: var(--color-danger);
}

.test-run-detail__judge-submission-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.test-run-detail__judge-submission-badge {
  font-size: 11px;
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 500;
}

.test-run-detail__judge-submission-badge--approved {
  background: var(--color-status-active-bg);
  color: var(--color-status-active);
}

.test-run-detail__judge-submission-badge--rejected {
  background: var(--color-danger-bg);
  color: var(--color-danger);
}

.test-run-detail__judge-submission-time {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: auto;
}

.test-run-detail__judge-submission-header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
}

.test-run-detail__judge-submission-toggle {
  flex-shrink: 0;
  display: flex;
  color: var(--color-text-muted);
}

.test-run-detail__judge-submission-details {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.test-run-detail__judge-submitted-data h4,
.test-run-detail__judge-response h4 {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin: 0 0 6px;
}

.test-run-detail__judge-field {
  margin-bottom: 8px;
}

.test-run-detail__judge-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.test-run-detail__judge-field-value {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.test-run-detail__judge-field-pre {
  font-size: 12px;
  line-height: 1.5;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 8px 10px;
  margin: 0;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

.test-run-detail__judge-rejected-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 1px 6px;
  border-radius: 4px;
  background: var(--color-severity-high-bg);
  color: var(--color-severity-high);
  margin-left: 8px;
  vertical-align: middle;
}

.test-run-detail__judge-assessment {
  margin: 8px 0 0;
  padding: 10px 12px;
  background: var(--color-bg);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-primary);
}

.test-run-detail__judge-problems {
  list-style: disc;
  padding-left: 20px;
  margin: 8px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
}

.test-run-detail__judge-problems li {
  margin-bottom: 2px;
  line-height: 1.5;
}

/* Multi-context journey recordings */
.test-run-detail__recordings-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.test-run-detail__recording-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-bg);
  min-width: 0;
  max-width: 100%;
}

.test-run-detail__recording-context {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  align-self: flex-start;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
  background: var(--color-surface-hover);
  border: 1px solid var(--color-border);
  padding: 3px 8px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.test-run-detail__recordings-list .replay-link {
  max-width: 100%;
}

/* Context badges on journey actions */
.test-run-detail__contexts {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px 12px;
  background: var(--color-bg);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
}

.test-run-detail__contexts-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-secondary);
}

.test-run-detail__context-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  color: var(--color-primary);
  background: color-mix(in srgb, var(--color-primary) 10%, var(--color-bg));
  padding: 2px 8px;
  border-radius: 4px;
}

.test-run-detail__action-context-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: white;
  background: var(--color-primary);
  padding: 1px 6px;
  border-radius: 4px;
  flex-shrink: 0;
}

/* Empty / not found state */
.test-run-detail__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 48px 24px;
  color: var(--color-text-muted);
  font-size: 15px;
}

.test-run-detail__polish-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.test-run-detail__polish-btn:hover {
  background: var(--color-primary-hover);
}

.test-run-detail__polish-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Polish pass links */
.test-run-detail__polish-passes-heading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 12px;
}

.test-run-detail__polish-passes-loading {
  font-size: 13px;
  color: var(--color-text-muted);
  padding: 8px 0;
}

.test-run-detail__polish-passes-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* A followup row: the nav button plus a collapsible dump of its input JSON (the Pass-1 detector result). */
.test-run-detail__followup {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.test-run-detail__followup-args {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 4px 4px 12px;
}

.test-run-detail__followup-args-json {
  margin: 0;
  padding: 12px;
  background: var(--color-code-bg, #1e1e2e);
  color: var(--color-code-text, #cdd6f4);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 480px;
}

.test-run-detail__polish-pass-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-bg);
  cursor: pointer;
  transition: background 0.12s;
  width: 100%;
  text-align: left;
  font: inherit;
  color: inherit;
}

.test-run-detail__polish-pass-item:hover {
  background: var(--color-surface-hover);
}

.test-run-detail__polish-pass-item:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.test-run-detail__polish-pass-icon {
  flex-shrink: 0;
  display: flex;
}

.test-run-detail__polish-pass-icon--completed { color: var(--color-status-completed, var(--color-success)); }
.test-run-detail__polish-pass-icon--failed { color: var(--color-status-failed, var(--color-danger)); }
.test-run-detail__polish-pass-icon--in-progress {
  color: var(--color-status-in-progress, var(--color-primary));
  animation: test-run-polish-spin 1s linear infinite;
}
.test-run-detail__polish-pass-icon--pending { color: var(--color-text-muted); }

@keyframes test-run-polish-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.test-run-detail__polish-pass-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-primary);
  flex: 1;
}

.test-run-detail__polish-pass-status {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: var(--radius-sm, 4px);
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}

.test-run-detail__polish-pass-status--pending,
.test-run-detail__polish-pass-status--queued {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  border-color: var(--color-border);
}

.test-run-detail__polish-pass-status--in-progress {
  background: var(--color-status-in-progress-bg);
  color: var(--color-status-in-progress);
  border-color: color-mix(in srgb, var(--color-status-in-progress) 22%, var(--color-border));
}

.test-run-detail__polish-pass-status--completed {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
  border-color: color-mix(in srgb, var(--color-status-completed) 25%, var(--color-border));
}

.test-run-detail__polish-pass-status--failed {
  background: var(--color-status-failed-bg);
  color: var(--color-status-failed);
  border-color: color-mix(in srgb, var(--color-status-failed) 25%, var(--color-border));
}

.test-run-detail__polish-pass-bugs {
  font-size: 12px;
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.test-run-detail__polish-pass-arrow {
  flex-shrink: 0;
  color: var(--color-text-muted);
  opacity: 0.4;
  transition: opacity 0.12s;
}

.test-run-detail__polish-pass-item:hover .test-run-detail__polish-pass-arrow {
  opacity: 1;
}

.test-run-detail__footer-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.test-run-detail__retrigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.test-run-detail__retrigger-btn:hover:not(:disabled) {
  background: var(--color-bg-hover, var(--color-bg-secondary));
}

.test-run-detail__retrigger-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Polish modal */
.test-run-detail__polish-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  /* Center the dialog, but keep it reachable when it's taller than the viewport (common on mobile):
     overflow-y makes the overlay scrollable, and the dialog's `margin: auto` centers it while
     collapsing to 0 on overflow — so the dialog aligns to the top instead of being cropped. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  z-index: 1000;
}

.test-run-detail__polish-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 24px;
  width: 380px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 2rem);
  /* dvh tracks the mobile browser chrome (URL bar); plain vh sizes to the larger layout viewport. */
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow-y: auto;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
}

.test-run-detail__polish-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.test-run-detail__polish-modal-header h3 {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}

.test-run-detail__polish-modal-close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  padding: 4px;
  border-radius: 4px;
}

.test-run-detail__polish-modal-close:hover {
  color: var(--color-text-primary);
  background: var(--color-surface-hover);
}

.test-run-detail__polish-modal-desc {
  font-size: 13px;
  color: var(--color-text-secondary);
  margin: 0 0 16px;
}

.test-run-detail__polish-modal-passes {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}

.test-run-detail__polish-modal-pass {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-primary);
  cursor: pointer;
}

.test-run-detail__polish-modal-pass input[type="checkbox"] {
  accent-color: var(--color-primary);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.test-run-detail__polish-modal-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.test-run-detail__polish-modal-submit {
  padding: 8px 16px;
  background: var(--color-primary);
  color: white;
  border: none;
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.test-run-detail__polish-modal-submit:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.test-run-detail__polish-modal-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.test-run-detail__polish-modal-cancel {
  padding: 8px 16px;
  background: none;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}

.test-run-detail__polish-modal-cancel:hover {
  background: var(--color-surface-hover);
}
.exploration-detail {
  padding: 0;
  max-width: 900px;
}

.exploration-detail__prompt-section {
  margin-bottom: 16px;
}

.exploration-detail__prompt {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
}

/* Sections are cards, matching the other task-detail pages (test run, polish pass). */
.exploration-detail__section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin-bottom: 16px;
}

.exploration-detail__section-title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-secondary);
  margin: 0 0 12px;
}

.exploration-detail__empty {
  color: var(--color-text-secondary);
  font-size: 13px;
  padding: 8px 0;
}

/* Journeys table */
.exploration-detail__table-wrap {
  overflow-x: auto;
}

.exploration-detail__journeys-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.exploration-detail__journeys-table th {
  text-align: left;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-secondary);
  padding: 8px 12px;
  border-bottom: 1px solid var(--color-border);
}

.exploration-detail__journeys-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  vertical-align: middle;
}

.exploration-detail__journeys-table tbody tr:last-child td {
  border-bottom: none;
}

.exploration-detail__journey-row {
  cursor: pointer;
}

.exploration-detail__journey-row:hover {
  background: var(--color-bg);
}

.exploration-detail__badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
  white-space: nowrap;
}

.exploration-detail__badge--created {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.exploration-detail__badge--updated {
  background: rgba(59, 130, 246, 0.12);
  color: #2563eb;
}

.exploration-detail__badge--approved {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.exploration-detail__badge--rejected {
  background: rgba(239, 68, 68, 0.12);
  color: #dc2626;
}

.exploration-detail__journey-judge {
  white-space: nowrap;
}

.exploration-detail__journey-name {
  font-weight: 500;
  color: var(--color-text);
}

.exploration-detail__journey-desc {
  color: var(--color-text-secondary);
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.exploration-detail__journey-steps {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .exploration-detail__journey-desc {
    display: none;
  }
}

.exploration-detail__retrigger-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-text);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.15s;
}

.exploration-detail__retrigger-btn:hover:not(:disabled) {
  background: var(--color-bg-hover, var(--color-bg-secondary));
}

.exploration-detail__retrigger-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.guidance-diff {
  background: var(--color-code-bg);
  border-radius: var(--radius-sm);
  overflow: auto;
  max-height: 300px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.5;
}

.guidance-diff__line {
  display: flex;
  padding: 0 12px;
  min-height: 20px;
}

.guidance-diff__line--add {
  background: rgba(34, 197, 94, 0.15);
  color: #4ade80;
}

.guidance-diff__line--remove {
  background: rgba(239, 68, 68, 0.15);
  color: #f87171;
}

.guidance-diff__line--same {
  color: var(--color-code-text);
  opacity: 0.7;
}

.guidance-diff__prefix {
  flex-shrink: 0;
  width: 18px;
  user-select: none;
  text-align: center;
}

.guidance-diff__text {
  white-space: pre-wrap;
  word-break: break-word;
}

.guidance-diff__separator {
  display: block;
  width: 100%;
  padding: 4px 12px;
  color: var(--color-text-muted);
  font-family: inherit;
  font-size: 11px;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border: none;
  border-top: 1px dashed rgba(255, 255, 255, 0.08);
  border-bottom: 1px dashed rgba(255, 255, 255, 0.08);
}

.guidance-diff__separator--expandable {
  cursor: pointer;
}

.guidance-diff__separator--expandable:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-secondary);
}
.gu-detail {
  padding: 0;
  max-width: 900px;
}

.gu-detail__loading {
  padding: 48px 0;
  text-align: center;
  color: var(--color-text-secondary);
}

.gu-detail__back {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  color: var(--color-text-secondary);
  font-size: 14px;
  margin-bottom: 20px;
  padding: 0;
  cursor: pointer;
}

.gu-detail__back:hover {
  color: var(--color-primary);
}

.gu-detail__error {
  text-align: center;
  padding: 48px 0;
  color: var(--color-text-secondary);
}

.gu-detail__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.gu-detail__icon {
  color: var(--color-primary);
}

.gu-detail__title {
  font-size: 20px;
  font-weight: 600;
}

.gu-detail__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 14px 16px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
  margin-bottom: 24px;
}

.gu-detail__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gu-detail__meta-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.gu-detail__meta-value {
  font-size: 14px;
  color: var(--color-text-primary);
}

.gu-detail__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--color-primary);
  text-decoration: none;
}

.gu-detail__link:hover {
  text-decoration: underline;
}

.gu-detail__section {
  margin-bottom: 24px;
}

.gu-detail__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
}

.gu-detail__message {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin: 0;
  padding: 12px 16px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.gu-detail__reviewer-note {
  margin-top: 10px;
}

.gu-detail__reviewer-note-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 6px;
}

.gu-detail__empty {
  font-size: 13px;
  color: var(--color-text-muted);
}

.gu-detail__failed {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 24px;
  padding: 12px 16px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-danger);
  background: var(--color-danger-bg, rgba(239, 68, 68, 0.1));
  border: 1px solid var(--color-danger);
  border-radius: var(--radius-md);
}

.gu-detail__failed-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

.gu-detail__analysis {
  padding: 14px 18px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--radius-md);
}

.gu-detail__retrigger-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  color: var(--color-primary);
  text-decoration: none;
  padding: 8px 14px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-md);
}

.gu-detail__retrigger-link:hover {
  text-decoration: underline;
}

.gu-detail__changes-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gu-detail__change {
  padding: 12px 14px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.gu-detail__change-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.gu-detail__change-key {
  font-size: 13px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--color-primary);
  text-decoration: none;
}

.gu-detail__change-key:hover {
  text-decoration: underline;
}

.gu-detail__change-version {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  background: var(--color-badge-bg, rgba(255,255,255,0.06));
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.gu-detail__change-summary {
  font-size: 12px;
  color: var(--color-text-secondary);
}

/* Eval submissions — polish script evals the agent registered while revising guidance. */
.gu-detail__evals-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gu-detail__eval {
  padding: 12px 14px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.gu-detail__eval-header {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.gu-detail__eval-pass {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-primary);
}

.gu-detail__eval-signal {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.gu-detail__eval-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin: 0;
}

.gu-detail__eval-meta > div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gu-detail__eval-meta dt {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.gu-detail__eval-meta dd {
  margin: 0;
  font-size: 12px;
  color: var(--color-text-secondary);
}

.gu-detail__eval-mono {
  font-family: 'SF Mono', 'Fira Code', monospace;
  word-break: break-all;
}

.gu-detail__eval-results {
  margin: 10px 0 0;
  padding: 8px 10px;
  background: var(--color-surface);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  overflow-x: auto;
  white-space: pre;
}


.gu-detail__section-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.gu-detail__section-toggle:hover {
  color: var(--color-primary);
}

.gu-detail__logs {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
}

.gu-detail__log-entry {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 4px 14px;
  font-size: 13px;
}

.gu-detail__log-entry:hover {
  background: var(--color-surface-hover, rgba(255,255,255,0.03));
}

.gu-detail__log-time {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 11px;
  color: var(--color-text-muted);
  white-space: nowrap;
  min-width: 70px;
}

.gu-detail__log-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--color-text-muted);
  background: var(--color-badge-bg, rgba(255,255,255,0.06));
  padding: 1px 6px;
  border-radius: 4px;
  white-space: nowrap;
}

.gu-detail__log-message {
  color: var(--color-text-secondary);
  line-height: 1.4;
  word-break: break-word;
}
.admin-project__section-title {
  margin-top: 28px;
  margin-bottom: 12px;
}

.admin-project__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8em;
  color: var(--color-text-secondary);
}

.admin-project__open-link {
  color: var(--color-primary);
  text-decoration: none;
}
.admin-project__open-link:hover {
  text-decoration: underline;
}

/* Multi-line config values (startup script, design document) shown read-only. */
.admin-project__pre {
  margin: 0;
  padding: 8px 10px;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8em;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  color: var(--color-text-primary);
}

/* Credit / cost summary stat cards. */
.admin-project__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.admin-project__stat {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 130px;
  padding: 12px 16px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.admin-project__stat-value {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.admin-project__stat-label {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

/* Tasks table. */
.admin-project__table-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.admin-project__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.admin-project__table th,
.admin-project__table td {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.admin-project__table thead th {
  position: sticky;
  top: 0;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  font-weight: 600;
}
.admin-project__table tbody tr:last-child td {
  border-bottom: none;
}
.admin-project__table tbody tr:hover {
  background: var(--color-surface-secondary);
}
.admin-project__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.admin-project__task-cell {
  max-width: 360px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.admin-project__status {
  text-transform: capitalize;
}
.admin-project__status--completed { color: #16a34a; }
.admin-project__status--running { color: var(--color-primary); }
.admin-project__status--failed { color: #dc2626; }
.admin-project__status--queued { color: var(--color-text-secondary); }
/* Token colors for CodeHighlight. Tuned for the dark code surface (--color-code-bg / -text); the
   base background and text are supplied by the consumer's class (e.g. guidance-entry__content-block). */
.code-hl__comment {
  color: #8b9bb4;
  font-style: italic;
}

.code-hl__string {
  color: #a5d6a7;
}

.code-hl__number {
  color: #f5b76f;
}

.code-hl__keyword {
  color: #c792ea;
}

.code-hl__regex {
  color: #f78c6c;
}

/* Line-numbered layout. The consumer class (e.g. guidance-entry__content-block--code) still
   supplies the surface, font size, line-height and max-height; these rules turn that box into a
   two-column [gutter | code] flex layout. The double .code-hl.code-hl--numbered selector keeps
   these overrides winning regardless of stylesheet import order. */
.code-hl.code-hl--numbered {
  display: flex;
  align-items: flex-start;
  padding: 0;
  overflow-x: hidden;
}

.code-hl--numbered .code-hl__gutter {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  padding: 16px 8px 16px 12px;
  text-align: right;
  color: var(--color-text-muted, #8b9bb4);
  opacity: 0.6;
  user-select: none;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.code-hl--numbered .code-hl__lineno {
  display: block;
}

.code-hl--numbered .code-hl__pre {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 16px;
  white-space: pre;
  overflow-x: auto;
}
.guidance-page {
  max-width: 900px;
  /* Generous bottom space so the last section (User Feedback) doesn't sit flush against the
     viewport edge — keeps long expanded lists comfortable to scroll and scan. */
  padding-bottom: 160px;
}

/* The app shell's `.app-main > *` rule gives every page `flex: 0 1 auto; min-height: 0`, which
   squeezes a taller-than-viewport page box down to the viewport height — its content then
   overflows past the box's own bottom padding, leaving NO space after the last section no matter
   how much padding is set. Opt this page out so the padding above actually renders. */
.app-main > .guidance-page {
  flex-shrink: 0;
}

.guidance-page__pending-feedback {
  margin-bottom: 32px;
}

.guidance-page__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px;
  color: var(--color-text-primary);
}

.guidance-page__title {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
}

.guidance-page__header-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.guidance-page__new-entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.guidance-page__new-entry-btn:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-border-light);
}

/* Create entry dialog */

.guidance-create__overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  /* Center the dialog, but keep it reachable when it's taller than the viewport (common on mobile):
     overflow-y makes the overlay scrollable, and the dialog's `margin: auto` centers it while
     collapsing to 0 on overflow — so the dialog aligns to the top instead of being cropped. */
  align-items: center;
  justify-content: center;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 16px;
  background: rgba(0, 0, 0, 0.5);
}

.guidance-create__dialog {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 20px;
  width: 560px;
  max-width: 90vw;
  max-height: calc(100vh - 2rem);
  /* dvh tracks the mobile browser chrome (URL bar); plain vh sizes to the larger layout viewport. */
  max-height: calc(100dvh - 2rem);
  margin: auto;
  overflow-y: auto;
}

.guidance-create__dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.guidance-create__dialog-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.guidance-create__close {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  background: none;
  border: none;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: var(--radius-sm);
}

.guidance-create__close:hover {
  background: var(--color-surface-hover);
  color: var(--color-text-secondary);
}

.guidance-create__form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guidance-create__context-textarea {
  min-height: 80px;
}

.guidance-create__field-hint {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--color-danger);
}

.guidance-create__error {
  font-size: 13px;
  color: var(--color-danger);
}

.guidance-create__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.guidance-page__loading {
  padding: 48px 0;
  text-align: center;
  color: var(--color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.guidance-page__error {
  padding: 24px;
  background: var(--color-danger-bg);
  border: 1px solid var(--color-danger);
  border-radius: var(--radius);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
}

.guidance-page__empty {
  padding: 48px 0;
  text-align: center;
  color: var(--color-text-secondary);
  font-size: 14px;
}

.guidance-page__entries {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Entry card */

.guidance-entry {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
}

.guidance-entry--expanded {
  border-color: var(--color-primary);
}

.guidance-entry__header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  font-family: inherit;
  color: var(--color-text-primary);
}

.guidance-entry__header:hover {
  background: var(--color-surface-hover);
}

.guidance-entry__toggle {
  flex-shrink: 0;
  color: var(--color-text-muted);
}

.guidance-entry__key {
  font-size: 14px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
  flex: 1;
  min-width: 0;
}

.guidance-entry__description {
  font-size: 13px;
  color: var(--color-text-secondary);
  flex: 2;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guidance-entry__meta {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.guidance-entry__format-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.guidance-entry__format-badge--prompt {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
}

.guidance-entry__format-badge--typescript {
  background: rgba(59, 130, 246, 0.12);
  color: #60a5fa;
}

.guidance-entry__format-badge--json {
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

.guidance-entry__version-badge {
  font-size: 12px;
  color: var(--color-text-muted);
  background: var(--color-surface-secondary);
  padding: 2px 8px;
  border-radius: var(--radius-pill);
}

.guidance-entry__updated {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* Gating badges on an entry header / version row */
.guidance-entry__staged-badge {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(249, 115, 22, 0.14);
  color: #fb923c;
}

.guidance-entry__live-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: rgba(16, 185, 129, 0.12);
  color: #34d399;
}

/* Expanded content */

.guidance-entry__body {
  border-top: 1px solid var(--color-border);
  padding: 20px;
}

.guidance-entry__context {
  margin-bottom: 16px;
  padding: 10px 14px;
  background: var(--color-surface-secondary);
  border-left: 3px solid var(--color-primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.guidance-entry__context-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-secondary);
  white-space: pre-wrap;
}

.guidance-entry__content-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.guidance-entry__content-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.guidance-entry__content-header .guidance-entry__content-label {
  margin-bottom: 0;
}

.guidance-entry__content-heading {
  display: flex;
  align-items: center;
  gap: 8px;
}

.guidance-entry__content-size {
  font-size: 11px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted);
  padding: 2px 6px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
}

.guidance-entry__copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.guidance-entry__copy-btn:hover {
  background: var(--color-surface-hover, var(--color-surface));
  color: var(--color-text);
  border-color: var(--color-border-hover, var(--color-border));
}

.guidance-entry__content-block {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  padding: 16px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 16px;
}

.guidance-entry__content-block--code {
  font-size: 12px;
  line-height: 1.5;
  max-height: 600px;
  tab-size: 2;
}

/* Prompt entries render as markdown prose rather than a scrolling code panel: a plain surface,
   proportional text, and the full content shown with no inline scroll bar. */
.guidance-entry__content-block--prose {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: inherit;
  font-size: 14px;
  white-space: normal;
  word-break: normal;
  max-height: none;
  overflow: visible;
}

/* Edit section */

.guidance-entry__edit-section {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--color-border);
}

.guidance-entry__edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}

.guidance-entry__edit-btn:hover {
  background: var(--color-surface-hover);
}

.guidance-entry__editor {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.guidance-entry__editor-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
}

.guidance-entry__editor-textarea {
  width: 100%;
  min-height: 200px;
  padding: 12px;
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 13px;
  line-height: 1.6;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
  resize: vertical;
}

.guidance-entry__editor-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.guidance-entry__summary-input {
  width: 100%;
  padding: 8px 12px;
  font-size: 13px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-primary);
}

.guidance-entry__summary-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.guidance-entry__editor-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.guidance-entry__save-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-primary);
  color: var(--text-on-accent);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.guidance-entry__save-btn:hover {
  background: var(--color-primary-hover);
}

.guidance-entry__save-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.guidance-entry__cancel-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text-secondary);
  cursor: pointer;
}

.guidance-entry__cancel-btn:hover {
  background: var(--color-surface-hover);
}

.guidance-entry__save-error {
  font-size: 13px;
  color: var(--color-danger);
}

/* Version history */

.guidance-entry__versions {
  margin-top: 16px;
}

.guidance-entry__versions-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  cursor: pointer;
  background: none;
  border: none;
}

.guidance-entry__versions-toggle:hover {
  color: var(--color-text-primary);
}

.guidance-entry__versions-list {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guidance-entry__version-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  cursor: pointer;
}

.guidance-entry__version-item:hover {
  background: var(--color-surface-hover);
}

.guidance-entry__version-item--active {
  border-color: var(--color-primary);
  background: var(--color-info-muted-bg);
}

.guidance-entry__version-number {
  font-weight: 600;
  color: var(--color-text-primary);
  white-space: nowrap;
}

.guidance-entry__version-delete {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  border-radius: var(--radius-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

.guidance-entry__version-item:hover .guidance-entry__version-delete {
  opacity: 1;
}

.guidance-entry__version-delete:hover {
  color: var(--color-danger, #ef4444);
  background: rgba(239, 68, 68, 0.1);
}

.guidance-entry__version-details {
  flex: 1;
  min-width: 0;
}

.guidance-entry__version-summary {
  color: var(--color-text-primary);
}

.guidance-entry__version-meta {
  display: flex;
  gap: 12px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.guidance-entry__version-expanded {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.guidance-entry__version-diff {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guidance-entry__version-diff-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.guidance-entry__version-diff-content {
  background: var(--color-code-bg);
  color: var(--color-code-text);
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.5;
  padding: 12px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* Update History / Gaps sections */

.guidance-page__updates {
  margin-top: 40px;
}

.guidance-page__feedback {
  margin-top: 40px;
}

.guidance-page__processing {
  margin-top: 40px;
}

.guidance-page__section-description {
  font-size: 13px;
  color: var(--color-text-muted);
  margin: -8px 0 14px;
}

.guidance-page__section-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
}

.guidance-page__section-toggle:hover {
  color: var(--color-primary);
}

.guidance-page__section-count {
  font-size: 12px;
  font-weight: 500;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-secondary);
  color: var(--color-text-muted);
}

/* Secondary "N pending" breakdown badge — accented so it stands apart from the muted total count. */
.guidance-page__section-count--pending {
  background: var(--color-info-muted-bg);
  color: var(--color-primary);
}

/* Entries section header row: section toggle on the left, global "Open gate" action on the right. */
.guidance-page__entries-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.guidance-page__entries-header .guidance-page__section-toggle {
  margin-bottom: 0;
}

.guidance-page__open-gate-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: #fb923c;
  background: rgba(249, 115, 22, 0.10);
  border: 1px solid rgba(249, 115, 22, 0.35);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.guidance-page__open-gate-btn:hover:not(:disabled) {
  background: rgba(249, 115, 22, 0.18);
}

.guidance-page__open-gate-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border-color: var(--color-border);
}

.guidance-page__updates-heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 16px;
}

/* Section-level "Ignore all" action, pushed to the far end of the Pending Feedback heading. */
.guidance-page__ignore-all-btn {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.guidance-page__ignore-all-btn:hover:not(:disabled) {
  background: var(--color-surface-hover);
}

.guidance-page__ignore-all-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.guidance-page__updates-empty {
  font-size: 13px;
  color: var(--color-text-muted);
}

.guidance-page__updates-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guidance-page__load-more {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-primary);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius);
  cursor: pointer;
  text-align: center;
}

.guidance-page__load-more:hover {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
}

.guidance-page__load-more:disabled {
  cursor: default;
  opacity: 0.6;
}

.guidance-page__feedback-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid var(--color-border);
}

.guidance-page__feedback-count {
  font-size: 13px;
  color: var(--color-text-muted);
  text-align: center;
}

.guidance-update-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
  display: block;
}

.guidance-update-item--clickable {
  cursor: pointer;
  transition: border-color 0.15s;
}

.guidance-update-item--clickable:hover {
  border-color: var(--color-primary);
}

.guidance-update-item__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}

.guidance-update-item__user {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

.guidance-update-item__status {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  text-transform: capitalize;
}

.guidance-update-item__status--pending {
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
}

.guidance-update-item__status--processing {
  background: var(--color-info-muted-bg);
  color: var(--color-primary);
}

.guidance-update-item__status--completed {
  background: rgba(34, 197, 94, 0.12);
  color: #16a34a;
}

.guidance-update-item__status--failed {
  background: rgba(239, 68, 68, 0.12);
  color: var(--color-danger);
}

.guidance-update-item__status--unresolved {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}

.guidance-update-item__source {
  font-size: 12px;
  color: var(--color-text-muted);
}

.guidance-update-item__time {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-left: auto;
}

.guidance-update-item__message {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* The message is rendered as lightweight markdown; keep it at the compact list
   scale rather than the default markdown-lite size. */
.guidance-update-item__message .markdown-lite {
  font-size: 13px;
  line-height: 1.5;
}

/* Collapsible update-history entry: header is a full-width toggle button, body reveals on expand. */
.guidance-update-item__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  text-align: left;
  font: inherit;
}

.guidance-update-item__chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.15s;
}

.guidance-update-item__chevron--open {
  transform: rotate(90deg);
}

.guidance-update-item__toggle .guidance-update-item__header {
  flex: 1;
  margin-bottom: 0;
}

.guidance-update-item__counts {
  display: inline-flex;
  gap: 6px;
  align-items: center;
}

.guidance-update-item__count-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.guidance-update-item__count-badge--eval {
  background: var(--color-info-muted-bg);
  color: var(--color-primary);
}

.guidance-update-item__body {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border-light);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.guidance-update-item__summary-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guidance-update-item__summary-item {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 12px;
}

.guidance-update-item__summary-key {
  flex-shrink: 0;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  color: var(--color-primary);
}

.guidance-update-item__summary-key--eval {
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.guidance-update-item__summary-text {
  color: var(--color-text-secondary);
}

.guidance-update-item__detail-link {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-primary);
  text-decoration: none;
}

.guidance-update-item__detail-link:hover {
  text-decoration: underline;
}

/* The retrigger link is now an independently clickable control (no enclosing card link). */
.guidance-update-item__retrigger-link {
  cursor: pointer;
}

.guidance-update-change {
  padding: 10px 12px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border-light);
  border-radius: var(--radius-sm);
}

.guidance-update-change__header {
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.guidance-update-change__key {
  font-size: 13px;
  font-weight: 600;
  font-family: 'SF Mono', 'Fira Code', monospace;
  color: var(--color-text-primary);
}

.guidance-update-change__summary {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.guidance-update-change__diff-toggle {
  font-size: 11px;
  color: var(--color-primary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 0 0;
  text-decoration: underline;
}

.guidance-update-change__diff {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guidance-update-change__old,
.guidance-update-change__new {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guidance-update-change__diff-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

.guidance-update-change__diff-content {
  font-family: 'SF Mono', 'Fira Code', monospace;
  font-size: 12px;
  line-height: 1.5;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 10px;
  border-radius: var(--radius-sm);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 200px;
  overflow-y: auto;
}

.guidance-update-item__source-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
}

.guidance-update-item__source-link:hover {
  text-decoration: underline;
}

.guidance-update-item__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}


.guidance-update-item__retrigger-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--color-success, #22c55e);
  text-decoration: none;
}

.guidance-update-item__retrigger-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .guidance-entry__description {
    display: none;
  }

  .guidance-entry__updated {
    display: none;
  }
}

/* User feedback queue */
.guidance-feedback-item {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 14px 18px;
}

.guidance-feedback-item__header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.guidance-feedback-item__header--collapsible {
  cursor: pointer;
}

.guidance-feedback-item__header--collapsible:hover .guidance-feedback-item__user {
  color: var(--color-primary);
}

.guidance-feedback-item__header--collapsed {
  margin-bottom: 0;
}

.guidance-feedback-item__toggle {
  flex-shrink: 0;
  display: inline-flex;
  color: var(--color-text-muted);
}

.guidance-feedback-item__user {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-primary);
}

/* User-vs-system origin badge on a feedback queue item. */
.guidance-feedback-item__origin {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

.guidance-feedback-item__origin--user {
  background: rgba(99, 102, 241, 0.12);
  color: #818cf8;
}

.guidance-feedback-item__origin--system {
  background: rgba(234, 179, 8, 0.14);
  color: #eab308;
}

.guidance-feedback-item__bug-link {
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guidance-feedback-item__bug-link:hover {
  text-decoration: underline;
}

.guidance-feedback-item__project-link {
  font-size: 12px;
  color: var(--color-text-muted);
  text-decoration: none;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.guidance-feedback-item__project-link:hover {
  color: var(--color-primary);
  text-decoration: underline;
}

.guidance-feedback-item__field {
  margin-bottom: 10px;
}

.guidance-feedback-item__field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 4px;
}

.guidance-feedback-item__feedback-text {
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
  margin: 0;
  white-space: pre-wrap;
}

.guidance-feedback-item__evidence-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guidance-feedback-item__evidence-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-primary);
  text-decoration: none;
}

.guidance-feedback-item__evidence-link:hover {
  text-decoration: underline;
}

.guidance-feedback-item__evidence-type {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 1px 5px;
  flex-shrink: 0;
}

/* Grounded evidence: the recordings involved + MCP-call items. */
.guidance-feedback-item__recordings {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.guidance-feedback-item__recording-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-family: var(--font-mono, monospace);
  color: var(--color-primary);
  text-decoration: none;
}

.guidance-feedback-item__recording-link:hover {
  text-decoration: underline;
}

.guidance-feedback-item__recording-desc {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.guidance-feedback-item__evidence-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guidance-feedback-item__evidence-mcp {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-surface-secondary);
  padding: 6px 8px;
}

.guidance-feedback-item__evidence-mcp-header {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-text-primary);
  font-size: 12px;
}

.guidance-feedback-item__evidence-mcp-tool {
  font-family: var(--font-mono, monospace);
  font-weight: 600;
}

.guidance-feedback-item__evidence-proves {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-secondary);
}

.guidance-feedback-item__evidence-mcp-body {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.guidance-feedback-item__evidence-mcp-label {
  display: block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.guidance-feedback-item__evidence-mcp-params code,
.guidance-feedback-item__evidence-mcp-result pre {
  display: block;
  font-family: var(--font-mono, monospace);
  font-size: 11px;
  line-height: 1.45;
  color: var(--color-text-primary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 6px 8px;
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 240px;
  overflow: auto;
}

/* Badge shown when the feedback-review judge rejected the analysis but it was submitted anyway. */
.guidance-feedback-item__judge-rejected {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-danger, #c0392b);
  background: var(--color-danger-bg, rgba(192, 57, 43, 0.1));
  border: 1px solid var(--color-danger, #c0392b);
  border-radius: var(--radius-sm);
  padding: 1px 6px;
}

.guidance-feedback-item__comment-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-text-primary);
  padding: 8px 10px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  resize: vertical;
  font-family: inherit;
}

.guidance-feedback-item__comment-input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.guidance-feedback-item__actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
}

.guidance-feedback-item__approve,
.guidance-feedback-item__ignore {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius-md);
  cursor: pointer;
}

.guidance-feedback-item__approve {
  color: white;
  background: var(--color-primary);
  border: 1px solid transparent;
}

.guidance-feedback-item__approve:hover:not(:disabled) {
  background: var(--color-primary-hover);
}

.guidance-feedback-item__ignore {
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.guidance-feedback-item__ignore:hover:not(:disabled) {
  background: var(--color-surface-hover);
}

.guidance-feedback-item__approve:disabled,
.guidance-feedback-item__ignore:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.guidance-feedback-item__resolved {
  margin-top: 12px;
  font-size: 12px;
  color: var(--color-text-muted);
}

.guidance-feedback-item__resolved-link {
  color: var(--color-primary);
  text-decoration: none;
}

.guidance-feedback-item__resolved-link:hover {
  text-decoration: underline;
}
.insights {
  max-width: 1040px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Header */
.insights__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.insights__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}

.insights__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 640px;
}

/* Loading / error */
.insights__loading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 48px 0;
  justify-content: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}

@keyframes insights-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.insights__spinner {
  animation: insights-spin 1.5s linear infinite;
  color: var(--color-text-muted);
}

.insights__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 24px;
  text-align: center;
  color: var(--color-danger);
  font-size: 14px;
}

.insights__error p {
  color: var(--color-text-secondary);
}

.insights__retry {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-primary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s;
}

.insights__retry:hover {
  border-color: var(--color-text-muted);
}

/* Summary cards */
.insights__summary-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.insights__summary-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: relative;
}

.insights__summary-value {
  font-size: 24px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.insights__summary-label {
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.insights__summary-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: var(--radius-pill);
}

.insights__summary-badge--open {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

/* Chart card */
.insights__chart-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px;
}

.insights__chart-card--full {
  /* no additional width constraints */
}

.insights__chart-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 4px;
}

.insights__chart-desc {
  font-size: 12px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
}

.insights__charts-pair {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

/* Donut layout */
.insights__donut-layout {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.insights__donut-legend {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.insights__donut-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.insights__donut-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

.insights__donut-legend-label {
  text-transform: capitalize;
  color: var(--color-text-secondary);
  flex: 1;
  min-width: 0;
}

.insights__donut-legend-value {
  font-weight: 600;
  color: var(--color-text-primary);
}

.insights__donut-legend-pct {
  color: var(--color-text-muted);
  width: 32px;
  text-align: right;
}

/* Chart legend row */
.insights__chart-legend-row {
  display: flex;
  gap: 16px;
  margin-top: 12px;
  padding-top: 8px;
  border-top: 1px solid var(--color-border);
}

.insights__chart-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-transform: capitalize;
}

.insights__chart-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Scorecard table */
.insights__scorecard-table {
  margin-top: 8px;
}

.insights__scorecard-header,
.insights__scorecard-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
}

.insights__scorecard-header {
  border-bottom: 1px solid var(--color-border);
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.insights__scorecard-row {
  border-bottom: 1px solid var(--color-surface-secondary);
  font-size: 13px;
  color: var(--color-text-secondary);
}

.insights__scorecard-row:last-child {
  border-bottom: none;
}

.insights__scorecard-col--name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.insights__scorecard-col--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.insights__scorecard-col--open {
  color: #f87171;
}

.insights__scorecard-col--resolved {
  color: #4ade80;
}

.insights__scorecard-link {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.insights__scorecard-link:hover {
  text-decoration: underline;
}

.insights__scorecard-url {
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.insights__scorecard-url:hover {
  color: var(--color-primary);
}

.insights__scorecard-rate {
  font-weight: 600;
  font-size: 12px;
  padding: 1px 8px;
  border-radius: var(--radius-pill);
}

.insights__scorecard-rate--good {
  background: rgba(34, 197, 94, 0.12);
  color: #4ade80;
}

.insights__scorecard-rate--mid {
  background: rgba(234, 179, 8, 0.12);
  color: #eab308;
}

.insights__scorecard-rate--low {
  background: rgba(239, 68, 68, 0.12);
  color: #f87171;
}

/* Responsive */
@media (max-width: 900px) {
  .insights__summary-cards {
    grid-template-columns: repeat(3, 1fr);
  }

  .insights__charts-pair {
    grid-template-columns: 1fr;
  }

  .insights__scorecard-header,
  .insights__scorecard-row {
    grid-template-columns: 2fr 1fr 1fr 1fr;
  }

  .insights__scorecard-col:nth-child(5),
  .insights__scorecard-col:nth-child(6) {
    display: none;
  }
}

@media (max-width: 640px) {
  .insights {
    padding: 24px 16px 48px;
  }

  .insights__summary-cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .insights__donut-layout {
    flex-direction: column;
    align-items: stretch;
  }

  .insights__scorecard-header,
  .insights__scorecard-row {
    grid-template-columns: 2fr 1fr 1fr;
  }

  .insights__scorecard-col:nth-child(4),
  .insights__scorecard-col:nth-child(5),
  .insights__scorecard-col:nth-child(6) {
    display: none;
  }
}
.release-notes {
  max-width: 760px;
  margin: 0 auto;
  padding: 32px 24px 64px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

/* Header */
.release-notes__header {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.release-notes__title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 22px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.03em;
}

.release-notes__subtitle {
  font-size: 14px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  max-width: 640px;
}

/* List */
.release-notes__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.release-notes__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
}

.release-notes__date {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-text-muted);
}

.release-notes__item-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.release-notes__item-summary {
  font-size: 14px;
  line-height: 1.6;
  color: var(--color-text-secondary);
}

/* "View in Loop Builder" link — shown on any release with a known build. */
.release-notes__loop-link {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-top: 2px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.release-notes__loop-link:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
}

/* Minor updates — lighter than the milestone cards but still a clearly visible entry in the list.
   Rendered as a compact card with a brand-colored left accent and a filled marker dot so it reads
   unmistakably as a release item (not empty space between cards), while staying smaller and less
   prominent than the full milestone cards above. */
.release-notes__minor {
  position: relative;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-brand);
  border-radius: 8px;
}

.release-notes__minor-marker {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 6px;
  border-radius: 50%;
  background: var(--color-brand);
}

.release-notes__minor-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-bottom: 6px;
}

.release-notes__minor-head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.release-notes__minor-tag {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  padding: 1px 7px;
  border: 1px solid var(--color-border);
  border-radius: 999px;
}

.release-notes__minor-date {
  font-size: 12px;
  color: var(--color-text-muted);
}

.release-notes__minor-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.release-notes__minor-summary {
  font-size: 13px;
  line-height: 1.55;
  color: var(--color-text-secondary);
}

.release-notes__empty {
  padding: 48px 0;
  text-align: center;
  font-size: 14px;
  color: var(--color-text-secondary);
}
.process-history {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.process-history__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 16px 0 24px;
}

.process-history__title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.process-history__subtitle {
  margin: 6px 0 0;
  color: var(--color-text-secondary);
  font-size: 0.9rem;
}

.process-history__refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 14px;
  color: var(--color-text-primary);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}

.process-history__refresh-btn:hover {
  background: var(--color-surface-hover);
}

/* Stats grid */
.process-history__stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-bottom: 32px;
}

.process-history__stat-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 18px;
}

.process-history__stat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  flex-shrink: 0;
}

.process-history__stat-icon--completed {
  background: var(--color-status-completed-bg);
  color: var(--color-status-completed);
}

.process-history__stat-icon--failed {
  background: var(--color-status-failed-bg);
  color: var(--color-status-failed);
}

.process-history__stat-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.process-history__stat-value {
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--color-text-primary);
}

.process-history__stat-label {
  font-size: 0.8rem;
  color: var(--color-text-secondary);
}

/* Table */
.process-history__section-title {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 12px;
}

.process-history__table-wrap {
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
}

.process-history__table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}

.process-history__table thead th {
  text-align: left;
  padding: 12px 16px;
  background: var(--color-surface-secondary);
  color: var(--color-text-secondary);
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border-bottom: 1px solid var(--color-border);
}

.process-history__row td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
}

.process-history__row:last-child td {
  border-bottom: none;
}

.process-history__row--clickable {
  transition: background 0.12s ease;
}

.process-history__row--clickable:hover td {
  background: var(--color-surface-secondary);
}

.process-history__goal {
  color: var(--color-text-secondary);
}

.process-history__time,
.process-history__duration,
.process-history__version {
  color: var(--color-text-secondary);
  white-space: nowrap;
}

.process-history__status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-weight: 600;
  font-size: 0.8rem;
}

.process-history__status--completed {
  color: var(--color-status-completed);
}

.process-history__status--failed {
  color: var(--color-status-failed);
}

.process-history__empty {
  padding: 32px;
  text-align: center;
  color: var(--color-text-muted);
  background: var(--color-surface-secondary);
  border: 1px dashed var(--color-border);
  border-radius: 12px;
}

.process-history__loading {
  padding: 48px;
  text-align: center;
  color: var(--color-text-muted);
}

.process-history__error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px;
  text-align: center;
  color: var(--color-status-failed);
}

.process-history__retry-btn {
  background: var(--color-surface-secondary);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 8px 16px;
  color: var(--color-text-primary);
  cursor: pointer;
}

@media (max-width: 640px) {
  .process-history {
    padding: 16px;
  }
  .process-history__header {
    flex-direction: column;
  }
}
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
@layer properties {
  @supports (((-webkit-hyphens: none)) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color: rgb(from red r g b)))) {
    *, :before, :after, ::backdrop {
      --tw-rotate-x: initial;
      --tw-rotate-y: initial;
      --tw-rotate-z: initial;
      --tw-skew-x: initial;
      --tw-skew-y: initial;
      --tw-border-style: solid;
      --tw-ordinal: initial;
      --tw-slashed-zero: initial;
      --tw-numeric-figure: initial;
      --tw-numeric-spacing: initial;
      --tw-numeric-fraction: initial;
      --tw-shadow: 0 0 #0000;
      --tw-shadow-color: initial;
      --tw-shadow-alpha: 100%;
      --tw-inset-shadow: 0 0 #0000;
      --tw-inset-shadow-color: initial;
      --tw-inset-shadow-alpha: 100%;
      --tw-ring-color: initial;
      --tw-ring-shadow: 0 0 #0000;
      --tw-inset-ring-color: initial;
      --tw-inset-ring-shadow: 0 0 #0000;
      --tw-ring-inset: initial;
      --tw-ring-offset-width: 0px;
      --tw-ring-offset-color: #fff;
      --tw-ring-offset-shadow: 0 0 #0000;
      --tw-outline-style: solid;
      --tw-blur: initial;
      --tw-brightness: initial;
      --tw-contrast: initial;
      --tw-grayscale: initial;
      --tw-hue-rotate: initial;
      --tw-invert: initial;
      --tw-opacity: initial;
      --tw-saturate: initial;
      --tw-sepia: initial;
      --tw-drop-shadow: initial;
      --tw-drop-shadow-color: initial;
      --tw-drop-shadow-alpha: 100%;
      --tw-drop-shadow-size: initial;
      --tw-ease: initial;
    }
  }
}

@layer theme {
  :root, :host {
    --font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji",
      "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
    --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
      "Courier New", monospace;
    --radius-sm: .25rem;
    --radius-md: .375rem;
    --radius-lg: .5rem;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --ease-out: cubic-bezier(0, 0, .2, 1);
    --ease-in-out: cubic-bezier(.4, 0, .2, 1);
    --default-transition-duration: .15s;
    --default-transition-timing-function: cubic-bezier(.4, 0, .2, 1);
    --default-font-family: var(--font-sans);
    --default-mono-font-family: var(--font-mono);
    --color-brand: #f02d5e;
    --color-brand-text: #d81b52;
    --color-primary: #171717;
    --color-primary-hover: #0a0a0a;
    --color-primary-light: #f5f5f5;
    --color-primary-dark: #171717;
    --color-primary-pressed: #262626;
    --color-accent-subtle-bg: #fafafa;
    --color-surface: #fff;
    --color-surface-secondary: #fafafa;
    --color-surface-hover: #f5f5f5;
    --color-border: #e5e5e5;
    --color-border-light: #f5f5f5;
    --color-text-primary: #0a0a0a;
    --color-text-secondary: #737373;
    --color-text-muted: #737373;
    --color-text-disabled: #d4d4d4;
    --color-status-active: #10b981;
    --color-status-active-text: #047857;
    --color-status-active-bg: #ecfdf5;
    --color-status-paused: #f59e0b;
    --color-status-paused-bg: #fffbeb;
    --color-status-completed: #10b981;
    --color-status-completed-bg: #ecfdf5;
    --color-status-failed: #ef4444;
    --color-status-failed-bg: #fef2f2;
    --color-status-in-progress: #f59e0b;
    --color-status-in-progress-bg: #fffbeb;
    --color-status-incomplete: #6b7280;
    --color-status-incomplete-bg: #f3f4f6;
    --color-severity-critical: #b91c1c;
    --color-severity-critical-bg: #fef2f2;
    --color-severity-high: #c2410c;
    --color-severity-high-bg: #fff7ed;
    --color-severity-medium: #d97706;
    --color-severity-medium-bg: #fffbeb;
    --color-severity-low: #2563eb;
    --color-severity-low-bg: #eff6ff;
    --color-danger: #c93545;
    --color-danger-hover: #a02836;
    --color-danger-bg: #fdf4f3;
  }
}

@layer base {
  *, :after, :before, ::backdrop {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  ::file-selector-button {
    box-sizing: border-box;
    border: 0 solid;
    margin: 0;
    padding: 0;
  }

  html, :host {
    -webkit-text-size-adjust: 100%;
    tab-size: 4;
    line-height: 1.5;
    font-family: var(--default-font-family, ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");
    font-feature-settings: var(--default-font-feature-settings, normal);
    font-variation-settings: var(--default-font-variation-settings, normal);
    -webkit-tap-highlight-color: transparent;
  }

  hr {
    height: 0;
    color: inherit;
    border-top-width: 1px;
  }

  abbr:where([title]) {
    -webkit-text-decoration: underline dotted;
    text-decoration: underline dotted;
  }

  h1, h2, h3, h4, h5, h6 {
    font-size: inherit;
    font-weight: inherit;
  }

  a {
    color: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    -webkit-text-decoration: inherit;
    text-decoration: inherit;
  }

  b, strong {
    font-weight: bolder;
  }

  code, kbd, samp, pre {
    font-family: var(--default-mono-font-family, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);
    font-feature-settings: var(--default-mono-font-feature-settings, normal);
    font-variation-settings: var(--default-mono-font-variation-settings, normal);
    font-size: 1em;
  }

  small {
    font-size: 80%;
  }

  sub, sup {
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
    position: relative;
  }

  sub {
    bottom: -.25em;
  }

  sup {
    top: -.5em;
  }

  table {
    text-indent: 0;
    border-color: inherit;
    border-collapse: collapse;
  }

  :-moz-focusring {
    outline: auto;
  }

  progress {
    vertical-align: baseline;
  }

  summary {
    display: list-item;
  }

  ol, ul, menu {
    list-style: none;
  }

  img, svg, video, canvas, audio, iframe, embed, object {
    vertical-align: middle;
    display: block;
  }

  img, video {
    max-width: 100%;
    height: auto;
  }

  button, input, select, optgroup, textarea {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  ::file-selector-button {
    font: inherit;
    font-feature-settings: inherit;
    font-variation-settings: inherit;
    letter-spacing: inherit;
    color: inherit;
    opacity: 1;
    background-color: #0000;
    border-radius: 0;
  }

  :where(select:is([multiple], [size])) optgroup {
    font-weight: bolder;
  }

  :where(select:is([multiple], [size])) optgroup option {
    padding-inline-start: 20px;
  }

  ::file-selector-button {
    margin-inline-end: 4px;
  }

  ::placeholder {
    opacity: 1;
  }

  @supports (not ((-webkit-appearance: -apple-pay-button))) or (contain-intrinsic-size: 1px) {
    ::placeholder {
      color: currentColor;
    }

    @supports (color: color-mix(in lab, red, red)) {
      ::placeholder {
        color: color-mix(in oklab, currentcolor 50%, transparent);
      }
    }
  }

  textarea {
    resize: vertical;
  }

  ::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  ::-webkit-date-and-time-value {
    min-height: 1lh;
    text-align: inherit;
  }

  ::-webkit-datetime-edit {
    display: inline-flex;
  }

  ::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
  }

  ::-webkit-datetime-edit {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-year-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-month-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-day-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-hour-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-minute-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-second-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-millisecond-field {
    padding-block: 0;
  }

  ::-webkit-datetime-edit-meridiem-field {
    padding-block: 0;
  }

  ::-webkit-calendar-picker-indicator {
    line-height: 1;
  }

  :-moz-ui-invalid {
    box-shadow: none;
  }

  button, input:where([type="button"], [type="reset"], [type="submit"]) {
    appearance: button;
  }

  ::file-selector-button {
    appearance: button;
  }

  ::-webkit-inner-spin-button {
    height: auto;
  }

  ::-webkit-outer-spin-button {
    height: auto;
  }

  [hidden]:where(:not([hidden="until-found"])) {
    display: none !important;
  }
}

@layer components;

@layer utilities {
  .collapse {
    visibility: collapse;
  }

  .invisible {
    visibility: hidden;
  }

  .visible {
    visibility: visible;
  }

  .sr-only {
    clip-path: inset(50%);
    white-space: nowrap;
    border-width: 0;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    position: absolute;
    overflow: hidden;
  }

  .absolute {
    position: absolute;
  }

  .fixed {
    position: fixed;
  }

  .relative {
    position: relative;
  }

  .static {
    position: static;
  }

  .sticky {
    position: sticky;
  }

  .container {
    width: 100%;
  }

  @media (min-width: 40rem) {
    .container {
      max-width: 40rem;
    }
  }

  @media (min-width: 48rem) {
    .container {
      max-width: 48rem;
    }
  }

  @media (min-width: 64rem) {
    .container {
      max-width: 64rem;
    }
  }

  @media (min-width: 80rem) {
    .container {
      max-width: 80rem;
    }
  }

  @media (min-width: 96rem) {
    .container {
      max-width: 96rem;
    }
  }

  .block {
    display: block;
  }

  .contents {
    display: contents;
  }

  .flex {
    display: flex;
  }

  .grid {
    display: grid;
  }

  .hidden {
    display: none;
  }

  .inline {
    display: inline;
  }

  .inline-block {
    display: inline-block;
  }

  .inline-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .flex-shrink, .shrink {
    flex-shrink: 1;
  }

  .grow {
    flex-grow: 1;
  }

  .transform {
    transform: var(--tw-rotate-x, ) var(--tw-rotate-y, ) var(--tw-rotate-z, ) var(--tw-skew-x, ) var(--tw-skew-y, );
  }

  .resize {
    resize: both;
  }

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .bg-surface {
    background-color: var(--color-surface);
  }

  .text-primary {
    color: var(--color-primary);
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .italic {
    font-style: italic;
  }

  .ordinal {
    --tw-ordinal: ordinal;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .underline {
    text-decoration-line: underline;
  }

  .accent-primary {
    accent-color: var(--color-primary);
  }

  .shadow {
    --tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, #0000001a), 0 1px 2px -1px var(--tw-shadow-color, #0000001a);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .ring {
    --tw-ring-shadow: var(--tw-ring-inset, ) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);
    box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
  }

  .outline {
    outline-style: var(--tw-outline-style);
    outline-width: 1px;
  }

  .blur {
    --tw-blur: blur(8px);
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .filter {
    filter: var(--tw-blur, ) var(--tw-brightness, ) var(--tw-contrast, ) var(--tw-grayscale, ) var(--tw-hue-rotate, ) var(--tw-invert, ) var(--tw-saturate, ) var(--tw-sepia, ) var(--tw-drop-shadow, );
  }

  .transition {
    transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, --tw-gradient-from, --tw-gradient-via, --tw-gradient-to, opacity, box-shadow, transform, translate, scale, rotate, filter, -webkit-backdrop-filter, backdrop-filter, display, content-visibility, overlay, pointer-events;
    transition-timing-function: var(--tw-ease, var(--default-transition-timing-function));
    transition-duration: var(--tw-duration, var(--default-transition-duration));
  }

  .ease-in-out {
    --tw-ease: var(--ease-in-out);
    transition-timing-function: var(--ease-in-out);
  }

  .ease-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }

  .\[setup\:eval\] {
    setup: eval;
  }
}

:root {
  --color-bug-open: #b91c1c;
  --color-bug-open-bg: #fef2f2;
  --color-bug-fixed: #10b981;
  --color-bug-fixed-bg: #ecfdf5;
  --color-bug-wontfix: #6b7280;
  --color-bug-wontfix-bg: #f3f4f6;
  --color-bug-invalid: #b45309;
  --color-bug-invalid-bg: #fffbeb;
  --color-bug-reopened: #b91c1c;
  --color-bug-reopened-bg: #fef2f2;
  --shadow-card: 0 1px 2px #0000000a;
  --shadow-card-hover: 0 4px 12px #0000000f;
  --shadow-float: 0 4px 12px #00000014;
  --shadow-modal: 0 24px 48px #00000024;
  --overlay-scrim: #0a0a0a73;
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --radius-pill: 9999px;
  --gradient-cta: linear-gradient(180deg, #262626 0%, #171717 100%);
  --color-code-bg: #1f2937;
  --color-code-text: #f1f5f9;
  --color-info-muted-bg: color-mix(in srgb, var(--color-primary) 10%, var(--color-surface));
  --color-info-muted-bg-hover: color-mix(in srgb, var(--color-primary) 18%, var(--color-surface));
  --primary: var(--color-primary);
  --danger: var(--color-danger);
  --success: var(--color-status-active);
  --warning: var(--color-status-paused);
  --border-color: var(--color-border);
  --surface-secondary: var(--color-surface-secondary);
  --surface-hover: var(--color-surface-hover);
  --surface-primary: var(--color-surface);
  --text-primary: var(--color-text-primary);
  --text-secondary: var(--color-text-secondary);
  --text-tertiary: var(--color-text-muted);
  --text-muted: var(--color-text-muted);
  --accent-primary: var(--color-primary);
  --accent-hover: var(--color-primary-hover);
  --accent-pressed: var(--color-primary-pressed);
  --bg-base: var(--color-surface);
  --bg-surface: var(--color-surface-secondary);
  --bg-elevated: var(--color-surface-hover);
  --border-default: var(--color-border);
  --text-on-accent: #fafafa;
  --color-bg: var(--color-surface-secondary);
  --color-text: var(--color-text-primary);
  --color-info: var(--color-primary);
  --color-success: var(--color-status-active);
  --color-error: var(--color-danger);
  --color-error-bg: var(--color-danger-bg);
  --status-error: var(--color-danger);
  --status-error-bg: var(--color-danger-bg);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--color-surface-secondary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizelegibility;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  font-family: Inter, Inter Variable, SF Pro Display, -apple-system, system-ui, Segoe UI, Roboto, sans-serif;
  line-height: 1.6;
}

html, body, #root {
  height: 100%;
}

a {
  color: var(--color-text-primary);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:focus-visible, button:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  font-family: inherit;
}

input, textarea, select {
  font-family: inherit;
}

.sr-only {
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  position: absolute;
  overflow: hidden;
}

@property --tw-rotate-x {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-y {
  syntax: "*";
  inherits: false
}

@property --tw-rotate-z {
  syntax: "*";
  inherits: false
}

@property --tw-skew-x {
  syntax: "*";
  inherits: false
}

@property --tw-skew-y {
  syntax: "*";
  inherits: false
}

@property --tw-border-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-ordinal {
  syntax: "*";
  inherits: false
}

@property --tw-slashed-zero {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-figure {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-spacing {
  syntax: "*";
  inherits: false
}

@property --tw-numeric-fraction {
  syntax: "*";
  inherits: false
}

@property --tw-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-inset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-inset-ring-color {
  syntax: "*";
  inherits: false
}

@property --tw-inset-ring-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-ring-inset {
  syntax: "*";
  inherits: false
}

@property --tw-ring-offset-width {
  syntax: "<length>";
  inherits: false;
  initial-value: 0;
}

@property --tw-ring-offset-color {
  syntax: "*";
  inherits: false;
  initial-value: #fff;
}

@property --tw-ring-offset-shadow {
  syntax: "*";
  inherits: false;
  initial-value: 0 0 #0000;
}

@property --tw-outline-style {
  syntax: "*";
  inherits: false;
  initial-value: solid;
}

@property --tw-blur {
  syntax: "*";
  inherits: false
}

@property --tw-brightness {
  syntax: "*";
  inherits: false
}

@property --tw-contrast {
  syntax: "*";
  inherits: false
}

@property --tw-grayscale {
  syntax: "*";
  inherits: false
}

@property --tw-hue-rotate {
  syntax: "*";
  inherits: false
}

@property --tw-invert {
  syntax: "*";
  inherits: false
}

@property --tw-opacity {
  syntax: "*";
  inherits: false
}

@property --tw-saturate {
  syntax: "*";
  inherits: false
}

@property --tw-sepia {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-color {
  syntax: "*";
  inherits: false
}

@property --tw-drop-shadow-alpha {
  syntax: "<percentage>";
  inherits: false;
  initial-value: 100%;
}

@property --tw-drop-shadow-size {
  syntax: "*";
  inherits: false
}

@property --tw-ease {
  syntax: "*";
  inherits: false
}