.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-bubble.error {
  align-self: flex-start;
  background-color: var(--bg-danger-subtle, #FFF5F5);
  color: var(--text-danger, #C92A2A);
  border: 1px solid var(--border-danger, #FFC9C9);
}

.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: flex-end;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid var(--border-default, #E9ECEF);
  background-color: var(--bg-surface, #F8F9FA);
  flex-shrink: 0;
  min-height: 84px;
}

.hw-chat-input textarea {
  flex: 1;
  min-height: 72px;
  max-height: 200px;
  padding: 8px 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;
  line-height: 1.4;
  outline: none;
  transition: border-color 150ms ease;
  font-family: inherit;
  resize: none;
  overflow-y: auto;
}

.hw-chat-input textarea::placeholder { color: var(--text-hint, #ADB5BD); }
.hw-chat-input textarea:focus { border-color: var(--accent, #4C6EF5); }
.hw-chat-input textarea: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;
  }
}
/* Auth gate: login screen, session-check spinner, and the sidebar user menu. */

.auth-loading {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--text-muted);
  background: var(--bg-base);
  font-size: 0.95rem;
}

.auth-loading__spinner {
  animation: auth-spin 0.8s linear infinite;
  color: var(--accent);
}

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

.auth-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--bg-base);
}

.auth-card {
  width: 100%;
  max-width: 400px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: 16px;
  padding: 40px 32px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
}

.auth-card__logo {
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-weight: 700;
  font-size: 1.1rem;
  letter-spacing: 0.02em;
}

.auth-card__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--text-primary);
}

.auth-card__subtitle {
  margin: 0 0 24px;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text-muted);
}

.auth-card__error {
  margin: 0 0 20px;
  padding: 10px 14px;
  border-radius: 8px;
  background: var(--danger-subtle);
  color: var(--danger);
  font-size: 0.875rem;
  line-height: 1.4;
}

.auth-card__button {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 16px;
  border: none;
  border-radius: 10px;
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}

.auth-card__button:hover {
  background: var(--accent-hover);
}

/* ---- sidebar user menu --------------------------------------------------- */

.appnav__user {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-top: 1px solid var(--border-default);
}

.appnav__user-avatar {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  border-radius: 50%;
  object-fit: cover;
  background: var(--accent-subtle);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
}

.appnav__user-info {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}

.appnav__user-name {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appnav__user-email {
  font-size: 0.75rem;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.appnav__logout {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.appnav__logout:hover {
  background: var(--neutral-subtle);
  color: var(--text-primary);
}
.appshell {
  display: flex;
  min-height: 100vh;
  background: var(--bg-base);
}

/* ---- Sidebar ------------------------------------------------------------ */
.appshell__sidebar {
  width: 240px;
  flex: none;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  height: 100vh;
}

.appnav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px;
  height: 100%;
}

.appnav__wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 8px;
  margin-bottom: 16px;
}

.appnav__logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-control);
  background: var(--accent);
  color: var(--text-on-accent);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.appnav__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.appnav__section {
  padding: 8px 12px 4px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-disabled);
}

.appnav__item--standalone {
  margin-top: 12px;
}

.appnav__item {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 12px;
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: 14px;
  font-weight: 500;
  transition: background-color 120ms ease, color 120ms ease;
}

.appnav__item:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.appnav__item--active {
  background: var(--accent-subtle);
  color: var(--accent);
}

.appnav__item--active svg {
  color: var(--accent);
}

/* ---- Main column -------------------------------------------------------- */
.appshell__main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.appshell__topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 12px 32px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border-default);
  position: sticky;
  top: 0;
  z-index: 20;
}

.appshell__topbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.appshell__topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

.appshell__hamburger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
}

.appshell__hamburger:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.appshell__content {
  flex: 1 1 auto;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 32px;
}

/* ---- Breadcrumbs -------------------------------------------------------- */
.breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
}

.breadcrumbs__crumb {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
}

.breadcrumbs__sep {
  color: var(--text-disabled);
  flex: none;
}

.breadcrumbs__link {
  color: var(--text-muted);
  padding: 2px 4px;
  border-radius: 4px;
  transition: color 120ms ease, background-color 120ms ease;
}

.breadcrumbs__link:hover {
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.breadcrumbs__current {
  color: var(--text-primary);
  font-weight: 500;
  padding: 2px 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

/* ---- Mobile drawer ------------------------------------------------------ */
.appshell__scrim {
  display: none;
}

@media (max-width: 767px) {
  .appshell__sidebar {
    display: none;
  }

  .appshell__hamburger {
    display: inline-flex;
  }

  .appshell__topbar {
    padding: 12px 16px;
  }

  .appshell__content {
    padding: 16px;
  }

  .appshell__scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 40;
    background: var(--backdrop);
  }

  .appshell__drawer {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 240px;
    background: var(--bg-sidebar);
    border-right: 1px solid var(--border-default);
    box-shadow: var(--shadow-lg);
    animation: drawer-in 200ms ease-out;
  }

  @keyframes drawer-in {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: translateX(0);
    }
  }
}
/* ==========================================================================
   AppsList page — SummaryTiles, AppsTable, AppsEmptyState.
   ========================================================================== */
.appslist {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.appslist__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---- Summary tiles ------------------------------------------------------ */
.summary-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.summary-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.summary-tile__value {
  font-size: 28px;
  line-height: 1.1;
  font-weight: 600;
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

.summary-tile__label {
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Apps table --------------------------------------------------------- */
.apps-table-wrap {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.apps-table {
  width: 100%;
  border-collapse: collapse;
}

.apps-table__col-head {
  text-align: left;
  padding: 0 16px;
  height: 40px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.apps-table__col-head--num {
  text-align: right;
}

.apps-table__row {
  cursor: pointer;
  transition: background-color 120ms ease;
}

.apps-table__row:hover {
  background: var(--bg-subtle);
}

.apps-table__row:focus-visible {
  outline: none;
  background: var(--bg-subtle);
  box-shadow: inset 3px 0 0 var(--accent);
}

.apps-table__cell {
  height: 48px;
  padding: 0 16px;
  border-bottom: 1px solid var(--border-default);
  vertical-align: middle;
}

.apps-table__row:last-child .apps-table__cell {
  border-bottom: none;
}

/* The Name cell. */
.apps-table__name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.apps-table__name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 280px;
}

.apps-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.apps-table__col-head--actions {
  width: 128px;
}

.apps-table__cell--actions {
  text-align: right;
  padding-right: 12px;
  white-space: nowrap;
}

/* Found % cell content: the percent value plus an optional "running" pill,
   right-aligned in the table and inline in the mobile card meta. */
.apps-found {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

.apps-running-pill {
  font-weight: 600;
}

/* Enabled QA-setting tag pills, rendered inside the AppTags tag area on the
   Apps list (Tags column / mobile card) and App Detail: one accent pill per
   active setting. */
.apps-setting-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.apps-setting-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--accent-subtle);
  color: var(--accent);
  cursor: default;
}

.apps-run-spin {
  animation: apps-run-spin 0.8s linear infinite;
}

@keyframes apps-run-spin {
  to {
    transform: rotate(360deg);
  }
}

/* ---- Run-trigger error banner ------------------------------------------- */
.apps-run-error {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--danger-subtle);
  border: 1px solid var(--danger);
  border-radius: var(--radius-card);
  color: var(--danger);
  font-size: 14px;
}

/* ---- Run-trigger success banner ------------------------------------------ */
/* Success counterpart to .apps-run-error: confirms a triggered QA run. */
.apps-run-success {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  background: var(--success-subtle);
  border: 1px solid var(--success);
  border-radius: var(--radius-card);
  color: var(--success);
  font-size: 14px;
}

.apps-run-success__msg {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.apps-run-success__link {
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  font-weight: 600;
  color: var(--success);
  text-decoration: underline;
  cursor: pointer;
  white-space: nowrap;
}

.apps-run-success__link:focus-visible {
  outline: 2px solid var(--success);
  outline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---- Mobile: collapse table into stacked cards -------------------------- */
.apps-cards {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.apps-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 16px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.apps-card:hover {
  background: var(--bg-subtle);
}

.apps-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.apps-card__actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Name + an optional clone-status pill, side by side in the card header. */
.apps-card__name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

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

.apps-card__meta {
  display: flex;
  gap: 16px;
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- Empty state -------------------------------------------------------- */
.apps-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 64px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.apps-empty__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--bg-subtle);
  color: var(--text-muted);
}

.apps-empty__prompt {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 360px;
}

.apps-empty .btn {
  margin-top: 4px;
}

/* ---- Loading / error placeholders --------------------------------------- */
.apps-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 48px 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  color: var(--text-muted);
  font-size: 14px;
}

@media (max-width: 767px) {
  .summary-tiles {
    grid-template-columns: 1fr;
  }

  .apps-table-wrap {
    display: none;
  }

  .apps-cards {
    display: flex;
  }
}

/* ---- Import-from-QA-project dialog --------------------------------------- */
.import-projects__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- New-app dialog (mode switch + clone flag) --------------------------- */
.new-app-modes {
  display: flex;
  gap: 8px;
}

.new-app-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease;
}

.new-app-mode:hover {
  border-color: var(--border-strong);
}

.new-app-mode--selected {
  border-color: var(--border-focus);
  background: rgba(240, 45, 94, 0.06);
  color: var(--text-primary);
}

.new-app-mode input[type='radio'] {
  flex: none;
  accent-color: var(--border-focus);
}

.new-app-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.new-app-clone {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px dashed var(--border-default);
  border-radius: var(--radius-control);
  cursor: pointer;
}

.new-app-clone input[type='checkbox'] {
  flex: none;
  margin-top: 2px;
  accent-color: var(--border-focus);
}

.new-app-clone__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.new-app-clone__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
}

.new-app-clone__hint {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Button — shared control covering every style-guide variant. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(240, 45, 94, 0.25);
}

.btn:disabled {
  cursor: not-allowed;
  pointer-events: none;
}

.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ---- Primary ------------------------------------------------------------ */
.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
  border-color: var(--accent);
}

.btn--primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}

.btn--primary:active {
  background: var(--accent-hover);
}

.btn--primary:disabled {
  background: #f9a8bb;
  border-color: #f9a8bb;
  color: #ffffff;
}

/* ---- Secondary / Surface ------------------------------------------------ */
.btn--secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.btn--secondary:hover {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.btn--secondary:active {
  background: #eceff3;
}

.btn--secondary:disabled {
  color: var(--text-disabled);
  border-color: var(--border-default);
  background: var(--bg-surface);
}

/* ---- Ghost -------------------------------------------------------------- */
.btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.btn--ghost:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.btn--ghost:active {
  background: #eceff3;
}

.btn--ghost:disabled {
  color: var(--text-disabled);
  background: transparent;
}

/* ---- Destructive -------------------------------------------------------- */
.btn--destructive {
  background: var(--bg-surface);
  border-color: #fda29b;
  color: var(--danger);
}

.btn--destructive:hover {
  background: var(--danger-subtle);
  border-color: var(--danger);
}

.btn--destructive:active {
  background: #fee4e2;
}

.btn--destructive:disabled {
  color: var(--text-disabled);
  border-color: var(--border-default);
  background: var(--bg-surface);
}

/* ---- Icon-only ---------------------------------------------------------- */
.btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
}

.btn--icon:hover {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.btn--icon:active {
  background: #eceff3;
}

.btn--icon:disabled {
  color: var(--text-disabled);
  background: transparent;
}
/* ==========================================================================
   Modal + form fields — shared dialog primitives per AppStyle.md.
   Centered 480px modal over a dimmed backdrop with a compact single-column
   form. Reused by Add App, Expected Bug, New QA Project, and confirm dialogs.
   ========================================================================== */
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--backdrop);
  animation: modal-backdrop-in 150ms ease;
}

@keyframes modal-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.modal {
  width: 480px;
  max-width: 100%;
  max-height: calc(100vh - 48px);
  display: flex;
  flex-direction: column;
  background: var(--bg-surface);
  border-radius: var(--radius-modal);
  box-shadow: var(--shadow-lg);
  animation: modal-in 150ms ease;
}

.modal--wide {
  width: 720px;
}

@keyframes modal-in {
  from {
    opacity: 0;
    transform: scale(0.98);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 20px 20px 0;
}

.modal__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.modal__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 20px;
  overflow-y: auto;
}

.modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 0 20px 20px;
}

/* ---- Form fields -------------------------------------------------------- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.field__control {
  width: 100%;
  padding: 8px 12px;
  font-family: inherit;
  font-size: 14px;
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

textarea.field__control {
  min-height: 84px;
  resize: vertical;
  line-height: 1.5;
}

.field__control::placeholder {
  color: var(--text-disabled);
}

.field__control:hover {
  border-color: var(--border-strong);
}

.field__control:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(240, 45, 94, 0.25);
}

.field__control--error {
  border-color: #fda29b;
}

.field__control--error:focus {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px rgba(180, 35, 24, 0.18);
}

.field__error {
  font-size: 13px;
  color: var(--danger);
}

.field__hint {
  font-size: 12px;
  color: var(--text-tertiary, var(--text-secondary));
  line-height: 1.45;
}

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

@media (max-width: 767px) {
  .modal-backdrop {
    padding: 16px;
  }

  .modal {
    width: 100%;
  }
}
/* ==========================================================================
   AppTags — the editable tag area shared by the Apps list and App Detail, plus
   the TagsEditor modal it opens.
   ========================================================================== */

.app-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

/* Muted placeholder shown when an app has no tags, so the edit affordance still
   reads as an editable area. */
.app-tags__empty {
  font-size: 12px;
  color: var(--text-muted);
}

/* Pencil button that opens the TagsEditor; mirrors the row's icon buttons so
   the tag area's affordance feels native to the table. */
.app-tags__edit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  flex: none;
}

.app-tags__edit:hover {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

.app-tags__edit:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

/* ---- TagsEditor modal --------------------------------------------------- */
.tags-editor__hint {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.tags-editor__options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* A selectable tag chip: outlined (with a +) when off, accent-filled (with a
   check) when on. Clicking toggles the tag's underlying QA setting. */
.tags-editor__chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
}

.tags-editor__chip:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.tags-editor__chip--on {
  background: var(--accent-subtle);
  border-color: var(--accent);
  color: var(--accent);
}

.tags-editor__chip:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.tags-editor__chip:disabled {
  cursor: default;
  opacity: 0.6;
}

.tags-editor__error {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--danger);
}
/* ScoreBadge & StatusPill — shared status signal pills. */

.score-badge,
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  cursor: default;
}

/* ---- ScoreBadge --------------------------------------------------------- */
.score-badge--success {
  background: var(--success-subtle);
  color: var(--success);
}

.score-badge--danger {
  background: var(--danger-subtle);
  color: var(--danger);
}

.score-badge--muted {
  background: var(--neutral-subtle);
  color: var(--text-disabled);
  min-width: 28px;
  justify-content: center;
}

.score-badge--headline {
  font-size: 13px;
  padding: 4px 12px;
}

.score-badge__missed-list {
  color: var(--bg-subtle);
  font-weight: 400;
}

/* ---- StatusPill --------------------------------------------------------- */
.status-pill {
  text-transform: capitalize;
}

.status-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill);
  background: currentColor;
  flex: none;
}

.status-pill--running {
  background: var(--warning-subtle);
  color: var(--warning);
}

.status-pill--finished {
  background: var(--success-subtle);
  color: var(--success);
}

.status-pill--failed {
  background: var(--danger-subtle);
  color: var(--danger);
}

/* PR open/closed/merged pills (Missing Bugs section). */
.status-pill--pr-open {
  background: var(--success-subtle);
  color: var(--success);
}

.status-pill--pr-closed {
  background: var(--danger-subtle);
  color: var(--danger);
}

.status-pill--pr-merged {
  background: var(--accent-subtle);
  color: var(--accent);
}

/* Evals Check (missing-bug eval) status pills. */
.status-pill--eval-none {
  background: var(--neutral-subtle);
  color: var(--text-disabled);
}

.status-pill--eval-waiting {
  background: var(--neutral-subtle);
  color: var(--text-secondary);
}

/* Preview deployment is ready — the eval can now run (actionable). */
.status-pill--eval-ready {
  background: var(--accent-subtle);
  color: var(--accent);
}

.status-pill--eval-running {
  background: var(--warning-subtle);
  color: var(--warning);
}

.status-pill--eval-filed {
  background: var(--success-subtle);
  color: var(--success);
}

.status-pill--eval-notfiled {
  background: var(--neutral-subtle);
  color: var(--text-secondary);
}

.status-pill--eval-failed {
  background: var(--danger-subtle);
  color: var(--danger);
}

/* A merge conflict blocks the PR from landing — a warning state, distinct from an eval
   verdict (danger) or a queued/neutral one. */
.status-pill--eval-conflict {
  background: var(--warning-subtle, #fef3c7);
  color: var(--warning, #b45309);
}

/* A failed CI check also blocks landing — danger-toned (a hard failure, unlike the
   warning-toned merge conflict). */
.status-pill--eval-check-failed {
  background: var(--danger-subtle);
  color: var(--danger);
}

/* The fix declared the eval failure external to the QA repo — terminal, and not a defect in
   the pipeline, so it reads as a neutral-but-emphatic finding rather than a failure. */
.status-pill--eval-external {
  background: var(--neutral-subtle);
  color: var(--text-primary);
  border: 1px solid var(--border-strong);
}

/* A user comment is queued and the PR is being worked on again — fresh, in-flight activity
   (like a running fix), so it reads as an active/accent state rather than a settled verdict. */
.status-pill--eval-commenting {
  background: var(--accent-subtle);
  color: var(--accent);
}

.status-pill__dot--pulse {
  animation: status-pulse 1.4s ease-in-out infinite;
}

@keyframes status-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.35;
  }
}
/* ==========================================================================
   Buttons — shared variants per AppStyle.md (Clinical Slate).
   Base: 36px tall, 8px radius, 14px/500, optional 16px leading icon.
   ========================================================================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease;
}

.btn:focus-visible {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(240, 45, 94, 0.25);
}

.btn:disabled {
  cursor: not-allowed;
}

/* ---- Primary (Replay rose) --------------------------------------------------- */
.btn--primary {
  background: var(--accent);
  color: var(--text-on-accent);
}

.btn--primary:hover:not(:disabled) {
  background: var(--accent-hover);
}

.btn--primary:active:not(:disabled) {
  background: var(--accent-hover);
}

.btn--primary:disabled {
  background: #f9a8bb;
  color: var(--text-on-accent);
}

/* ---- Surface / Secondary ------------------------------------------------ */
.btn--secondary {
  background: var(--bg-surface);
  border-color: var(--border-default);
  color: var(--text-secondary);
}

.btn--secondary:hover:not(:disabled) {
  background: var(--bg-subtle);
  border-color: var(--border-strong);
}

.btn--secondary:active:not(:disabled) {
  background: #eceff3;
}

.btn--secondary:disabled {
  color: var(--text-disabled);
  border-color: var(--border-default);
}

/* ---- Ghost -------------------------------------------------------------- */
.btn--ghost {
  background: transparent;
  color: var(--text-muted);
}

.btn--ghost:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text-primary);
}

.btn--ghost:active:not(:disabled) {
  background: #eceff3;
}

.btn--ghost:disabled {
  color: var(--text-disabled);
}

/* ---- Icon-only ---------------------------------------------------------- */
.btn--icon {
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border-color: transparent;
  color: var(--text-muted);
  border-radius: var(--radius-control);
}

.btn--icon:hover:not(:disabled) {
  background: var(--bg-subtle);
  color: var(--text-primary);
}
/* Form fields — shared label/input/textarea styling for dialogs. */

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

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.field__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.field__input,
.field__textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}

.field__textarea {
  min-height: 96px;
  resize: vertical;
}

.field__input::placeholder,
.field__textarea::placeholder {
  color: var(--text-disabled);
}

.field__input:hover,
.field__textarea:hover {
  border-color: var(--border-strong);
}

.field__input:focus,
.field__textarea:focus {
  outline: none;
  border-color: var(--border-focus);
  box-shadow: 0 0 0 3px rgba(240, 45, 94, 0.25);
}

.field--error .field__input,
.field--error .field__textarea {
  border-color: var(--danger);
}

.field__error {
  font-size: 13px;
  color: var(--danger);
}
/* App Detail page — header block, section cards, list rows, empty states. */

.app-detail {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- AppHeader ---------------------------------------------------------- */
.app-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.app-header__info {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.app-header__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

/* The app name doubles as a rename affordance: clicking it opens the edit
   dialog (focused on the Name field). A pencil fades in on hover/focus so the
   rename action is discoverable from the title itself, not just the Edit
   button. */
.app-header__title-button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: -2px -6px;
  padding: 2px 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.app-header__title-button:hover {
  background: var(--accent-subtle, #fef0f3);
}

.app-header__title-button:focus-visible {
  outline: 2px solid var(--accent, #f02d5e);
  outline-offset: 2px;
}

.app-header__title-pencil {
  flex-shrink: 0;
  color: var(--text-secondary, #6b7280);
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
}

.app-header__title-button:hover .app-header__title-pencil,
.app-header__title-button:focus-visible .app-header__title-pencil {
  opacity: 1;
}

.app-header__description {
  margin: 0;
  font-size: 14px;
  color: var(--text-secondary);
  max-width: 720px;
}

.app-header__url {
  font-size: 13px;
  color: var(--accent);
  word-break: break-all;
}

.app-header__url:hover {
  text-decoration: underline;
}

/* Tags row beneath the URL: a small "Tags" label followed by the editable
   AppTags area (pills + pencil edit button). */
.app-header__tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 4px;
}

.app-header__tags-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* ---- Section card ------------------------------------------------------- */
.section-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.section-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

.section-card__title {
  margin: 0;
  font-size: 16px;
  line-height: 1.4;
  font-weight: 600;
  color: var(--text-primary);
}

.section-card__count {
  color: var(--text-muted);
  font-weight: 400;
}

/* A muted "N disabled" note next to the active count in a section header. */
.section-card__count-note {
  margin-left: 8px;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
}

.section-card__body {
  padding: 4px 0;
}

/* ---- List rows ---------------------------------------------------------- */
.detail-list {
  display: flex;
  flex-direction: column;
}

.detail-row {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--border-default);
  transition: background-color 120ms ease;
}

.detail-row:last-child {
  border-bottom: none;
}

/* ---- Expected bug row --------------------------------------------------- */
.bug-row__main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1 1 auto;
}

.bug-row__title-line {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.bug-row__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* A disabled expected bug stays listed but is dimmed and struck through so it
   reads as retired ground truth that no longer counts. */
.bug-row--disabled .bug-row__title,
.bug-row--disabled .bug-row__description {
  color: var(--text-muted);
  text-decoration: line-through;
}

.bug-row__disabled-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--border-default);
  background: var(--surface-muted, rgba(127, 127, 127, 0.12));
  color: var(--text-muted);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.5;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* Keep the disable/enable + edit + delete actions reachable on a disabled row. */
.bug-row--disabled .bug-row__actions {
  opacity: 1;
}

.bug-row__description {
  font-size: 13px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.bug-row__actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: none;
  opacity: 0;
  transition: opacity 120ms ease;
}

.bug-row:hover .bug-row__actions,
.bug-row:focus-within .bug-row__actions {
  opacity: 1;
}

/* ---- QA project row ----------------------------------------------------- */
.project-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 12px;
  border-bottom: 1px solid var(--border-default);
  transition: background-color 120ms ease;
}

.project-row:last-child {
  border-bottom: none;
}

.project-row:hover {
  background: var(--bg-subtle);
}

.project-row:focus-within {
  background: var(--bg-subtle);
}

/* The clickable area that opens the QA Project Detail page. */
.project-row__open {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 56px;
  padding: 10px 20px;
  cursor: pointer;
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  font: inherit;
  color: inherit;
}

.project-row__open:focus-visible {
  outline: none;
  box-shadow: inset 3px 0 0 var(--accent);
}

/* Trailing link to the backing Loop QA run on loop-qa.replay.io. */
.project-row__loop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}

.project-row__loop-link:hover {
  background: var(--bg-surface);
  color: var(--accent);
}

.project-row__loop-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.project-row__status {
  flex: none;
}

.project-row__time {
  font-size: 13px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  flex: 1 1 auto;
  min-width: 0;
}

/* Pill counting this run's missed expected bugs reported back to Loop QA. */
.project-row__reported {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: none;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  background: var(--neutral-subtle);
  color: var(--text-muted);
}

.project-row__score {
  flex: none;
}

/* Upstream run timing (time to first activity + completion) on each row. */
.project-row__timing {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.project-row__timing-item {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}

/* ---- QA project settings ------------------------------------------------ */
.qa-settings {
  display: flex;
  flex-direction: column;
}

.qa-setting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--border-default);
}

.qa-setting:last-of-type {
  border-bottom: none;
}

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

.qa-setting__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.qa-setting__desc {
  font-size: 13px;
  color: var(--text-muted);
}

/* The switch control: a pill track with a sliding thumb. */
.qa-toggle {
  position: relative;
  flex: none;
  width: 40px;
  height: 22px;
  padding: 0;
  border: none;
  border-radius: var(--radius-pill);
  background: var(--neutral-subtle);
  cursor: pointer;
  transition: background-color 120ms ease;
}

.qa-toggle--on {
  background: var(--accent);
}

.qa-toggle:disabled {
  opacity: 0.6;
  cursor: default;
}

.qa-toggle:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.qa-toggle__thumb {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.18);
  transition: transform 120ms ease;
}

.qa-toggle--on .qa-toggle__thumb {
  transform: translateX(18px);
}

.qa-settings__error {
  margin: 0;
  padding: 10px 20px 14px;
  font-size: 13px;
  color: var(--danger);
}

/* ---- Empty states ------------------------------------------------------- */
.detail-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 36px 20px;
  text-align: center;
}

.detail-empty__prompt {
  margin: 0;
  max-width: 420px;
  font-size: 13px;
  color: var(--text-muted);
}

/* ---- Loading / error / not-found --------------------------------------- */
.detail-skeleton {
  height: 16px;
  margin: 12px 20px;
  border-radius: var(--radius-control);
  background: var(--bg-subtle);
}

.detail-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 64px 20px;
  text-align: center;
}

.detail-message__title {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: var(--text-primary);
}

.detail-message__text {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---- Spinner ------------------------------------------------------------ */
.spin {
  animation: spin 0.8s linear infinite;
}

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

@media (max-width: 767px) {
  .app-header__actions {
    width: 100%;
  }
}

.app-header__title-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.app-header__loop-builder {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--accent);
}

.app-header__loop-builder:hover {
  text-decoration: underline;
}

.tooltip {
  position: relative;
  display: inline-flex;
}

.tooltip__popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  min-width: 160px;
  max-width: 260px;
  padding: 8px 10px;
  border-radius: var(--radius-control);
  background: var(--text-primary);
  color: var(--text-on-accent);
  font-size: 12px;
  line-height: 1.45;
  font-weight: 400;
  text-align: left;
  white-space: normal;
  box-shadow: var(--shadow-md);
  pointer-events: none;
}

.tooltip__popover::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--text-primary);
}
/* Missing Bugs section (App Detail) — PRs grouped by project URL. */

.missing-bugs__summary {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-disabled);
}

.missing-bugs__empty {
  margin: 0;
  color: var(--text-disabled);
  font-size: 14px;
  line-height: 1.5;
}

.missing-bugs-groups {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.missing-bugs-group__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 6px;
}

.missing-bugs-group__url {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.missing-bugs-group__url:hover {
  text-decoration: underline;
}

.missing-bugs-group__count {
  flex: none;
  font-size: 12px;
  color: var(--text-disabled);
  font-variant-numeric: tabular-nums;
}

.missing-bugs-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
}

.missing-bugs-row__status {
  flex: none;
}

.missing-bugs-row__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
}

.missing-bugs-row__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}

.missing-bugs-row__link:hover {
  text-decoration: underline;
}
/* ==========================================================================
   QA Project Detail — header, status banner, coverage strip, comparison
   list + detail layout.
   ========================================================================== */
.qapd {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- ProjectHeader ------------------------------------------------------ */
.qapd-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.qapd-header__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-control);
  padding: 2px 6px 2px 2px;
  transition: color 120ms ease, background-color 120ms ease;
}

.qapd-header__back:hover {
  color: var(--accent);
  background: var(--accent-subtle);
}

.qapd-header__main {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.qapd-header__title-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.qapd-header__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

.qapd-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.qapd-header__stamp {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.qapd-header__stamp-label {
  color: var(--text-muted);
  font-weight: 500;
}

.qapd-header__stamp-value {
  color: var(--text-secondary);
}

/* Link out to the backing Loop QA run on loop-qa.replay.io. */
.qapd-header__loop-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
  border-radius: var(--radius-control);
  padding: 2px 6px;
  transition: color 120ms ease, background-color 120ms ease;
}

.qapd-header__loop-link:hover {
  background: var(--accent-subtle);
}

.qapd-header__loop-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.qapd-header__score {
  margin-top: 4px;
}

/* ---- StatusBanner ------------------------------------------------------- */
.qapd-banner {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-radius: var(--radius-card);
  border: 1px solid var(--border-default);
}

.qapd-banner--running {
  background: var(--warning-subtle);
  border-color: #fde9c8;
  color: var(--warning);
}

.qapd-banner--failed {
  background: var(--danger-subtle);
  border-color: #fcdcd7;
  color: var(--danger);
}

.qapd-banner__icon {
  flex: none;
  margin-top: 1px;
}

.qapd-banner__icon--spin {
  animation: qapd-spin 1s linear infinite;
}

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

.qapd-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.qapd-banner__title {
  font-size: 14px;
  font-weight: 600;
}

.qapd-banner__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.qapd-banner__refresh {
  flex: none;
}

/* ---- CoverageSummary ---------------------------------------------------- */
.coverage-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.coverage-stat {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.coverage-stat__value {
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.coverage-stat--success .coverage-stat__value {
  color: var(--success);
}

.coverage-stat--danger .coverage-stat__value {
  color: var(--danger);
}

.coverage-stat--neutral .coverage-stat__value {
  color: var(--neutral);
}

.coverage-stat__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-secondary);
}

.coverage-stat__info {
  display: inline-flex;
  align-items: center;
  color: var(--text-disabled);
  cursor: help;
  border-radius: var(--radius-pill);
}

.coverage-stat__info:hover,
.coverage-stat__info:focus-visible {
  color: var(--text-muted);
  outline: none;
}

/* ---- Comparison cards (shared list styles) ------------------------------ */
.qapd-card {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.qapd-card__header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
}

.qapd-card__title {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

.qapd-card__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 20px;
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.qapd-card__header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

/* "Report missing" / "Report all missing" controls */
.qapd-report-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-default);
  background: var(--bg-surface);
  color: var(--text-primary);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}

.qapd-report-btn:hover:not(:disabled) {
  border-color: var(--accent);
  color: var(--accent);
}

.qapd-report-btn:disabled {
  opacity: 0.6;
  cursor: default;
}

.qapd-report-btn--all {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.qapd-report-btn--all:hover:not(:disabled) {
  filter: brightness(0.95);
  color: #fff;
}

.qapd-row__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 16px 12px 16px;
}

.qapd-report-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  font-weight: 500;
}

.qapd-report-status--pending {
  color: var(--text-muted);
}

.qapd-report-status--reported {
  color: var(--success, #15803d);
}

.qapd-report-status--error {
  color: var(--danger, #b91c1c);
}

.qapd-spin {
  animation: qapd-spin 800ms linear infinite;
}

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

.qapd-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.qapd-list > li {
  border-bottom: 1px solid var(--border-default);
}

.qapd-list > li:last-child {
  border-bottom: none;
}

.qapd-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 12px 16px;
  background: transparent;
  border: none;
  border-left: 3px solid transparent;
  text-align: left;
  cursor: pointer;
  transition: background-color 120ms ease;
}

.qapd-row:hover {
  background: var(--bg-subtle);
}

.qapd-row:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--border-focus);
}

.qapd-row--selected {
  background: var(--accent-subtle);
  border-left-color: var(--accent);
}

.qapd-row--selected:hover {
  background: var(--accent-subtle);
}

.qapd-row__main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.qapd-row__title {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qapd-row__desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qapd-row__matched-to {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  font-size: 12px;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qapd-row__matched-to span {
  color: var(--success);
  font-weight: 500;
}

/* ---- Badges (Matched / Missed / Extra) ---------------------------------- */
.qapd-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex: none;
  padding: 2px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
}

.qapd-badge--matched {
  background: var(--success-subtle);
  color: var(--success);
}

.qapd-badge--missed {
  background: var(--danger-subtle);
  color: var(--danger);
}

.qapd-badge--extra {
  background: var(--neutral-subtle);
  color: var(--neutral);
}

.qapd-badge--disabled {
  background: var(--neutral-subtle);
  color: var(--neutral);
}

/* A disabled expected bug is listed for context but does not count toward the
   run's score, so it is dimmed and struck through and shows a Disabled badge. */
.qapd-row--disabled .qapd-row__title,
.qapd-row--disabled .qapd-row__desc {
  color: var(--text-muted);
  text-decoration: line-through;
}

.qapd-row--disabled {
  opacity: 0.75;
}

/* ---- Two-column list + detail layout ------------------------------------ */
.qapd-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 40%);
  gap: 24px;
  align-items: start;
}

.qapd-layout__main {
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

.qapd-layout__detail {
  position: sticky;
  top: 24px;
}

/* ---- MatchDetailPanel --------------------------------------------------- */
.match-panel {
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.match-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-default);
}

.match-panel__title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.match-panel__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease;
}

.match-panel__close:hover {
  background: var(--bg-surface);
  color: var(--text-primary);
}

.match-panel__placeholder {
  padding: 40px 20px;
  text-align: center;
  font-size: 13px;
  color: var(--text-muted);
}

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

.match-side {
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.match-side + .match-side {
  border-left: 1px solid var(--border-default);
}

@media (max-width: 479px) {
  .match-panel__pair {
    grid-template-columns: 1fr;
  }

  .match-side + .match-side {
    border-left: none;
    border-top: 1px solid var(--border-default);
  }
}

.match-side__heading {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.match-side__title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.match-side__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.match-side__empty {
  font-size: 13px;
  color: var(--text-disabled);
  font-style: italic;
}

.match-why {
  border-top: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.08));
  padding-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.match-why__heading {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.match-why__tag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--text-secondary);
  background: var(--surface-muted, rgba(0, 0, 0, 0.05));
  border-radius: 999px;
  padding: 2px 8px;
}

.match-why__text {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* ---- Mobile bottom sheet (hidden on desktop) ---------------------------- */
.qapd-sheet {
  display: none;
}

/* ---- Loading skeleton & error ------------------------------------------- */
.qapd-skeleton {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.qapd-skeleton__bar {
  height: 20px;
  width: 40%;
  border-radius: var(--radius-control);
  background: var(--bg-subtle);
  animation: qapd-pulse 1.4s ease-in-out infinite;
}

.qapd-skeleton__bar--lg {
  height: 32px;
  width: 55%;
}

.qapd-skeleton__card {
  height: 160px;
  border-radius: var(--radius-card);
  background: var(--bg-subtle);
  animation: qapd-pulse 1.4s ease-in-out infinite;
}

@keyframes qapd-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.qapd-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
}

.qapd-error__msg {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

.qapd-error__link {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent);
  text-decoration: none;
}

.qapd-error__link:hover {
  color: var(--accent-hover);
}

/* ==========================================================================
   Mobile (< 768px): collapse the split; MatchDetailPanel becomes a sheet.
   ========================================================================== */
@media (max-width: 767px) {
  .qapd-layout {
    grid-template-columns: 1fr;
  }

  .qapd-layout__detail {
    display: none;
  }

  .qapd-sheet {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 60;
  }

  .qapd-sheet__scrim {
    position: absolute;
    inset: 0;
    background: var(--backdrop);
    animation: qapd-fade 150ms ease;
  }

  .qapd-sheet__body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    max-height: 80vh;
    overflow-y: auto;
    border-top-left-radius: var(--radius-modal);
    border-top-right-radius: var(--radius-modal);
    background: var(--bg-surface);
    box-shadow: var(--shadow-lg);
    animation: qapd-sheet-up 200ms ease-out;
  }

  .qapd-sheet__body .match-panel {
    border: none;
    border-radius: 0;
    box-shadow: none;
  }

  @keyframes qapd-fade {
    from {
      opacity: 0;
    }
    to {
      opacity: 1;
    }
  }

  @keyframes qapd-sheet-up {
    from {
      transform: translateY(100%);
    }
    to {
      transform: translateY(0);
    }
  }
}
/* Polish Scripts eval page — list/table layout. Reuses the Clinical Slate
   tokens; mirrors the Apps list spacing. */

.polishscripts {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.polishscripts__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.polishscripts__subtitle {
  margin: -12px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 60ch;
}

.polishscripts__notice {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--accent-subtle);
  color: var(--accent-hover);
  font-size: 13px;
}

/* --- Hierarchy: polish pass → signal → eval --------------------------- */

.polish-tree {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.polish-tree__chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform 120ms ease;
}

.polish-tree__chevron--open {
  transform: rotate(90deg);
}

.polish-tree__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.polish-pass {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
}

.polish-pass__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: var(--bg-subtle);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.polish-pass__head:hover {
  background: var(--bg-muted, var(--bg-subtle));
}

.polish-pass__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
}

.polish-pass__body {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 12px;
  gap: 6px;
}

.polish-signal {
  border: 1px solid var(--border-default);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-surface);
}

.polish-signal__head {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 14px;
  border: none;
  background: transparent;
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.polish-signal__head:hover {
  background: var(--bg-subtle);
}

.polish-signal__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-secondary);
}

.polish-eval-list {
  list-style: none;
  margin: 0;
  padding: 0 8px 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.polish-eval-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.polish-eval-link:hover {
  background: var(--bg-subtle);
  border-color: var(--border-default);
}

.polish-eval-link__icon {
  flex: none;
  color: var(--text-muted);
}

.polish-eval-link__recording {
  flex: none;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
}

.polish-eval-link__preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-muted);
}

.polish-eval-link__go {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
}

/* --- Pass-rate rollups + per-eval pass/fail mark ---------------------- */

/* Pass-rate pill shown next to a pass / signal head. Sits at the right edge,
   just before the eval count. */
.polish-passrate {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}

/* When a pass-rate pill is present, the eval count follows it directly rather
   than being pushed to the far edge on its own. */
.polish-passrate + .polish-tree__count {
  margin-left: 10px;
}

.polish-passrate__frac {
  opacity: 0.85;
  font-weight: 500;
}

.polish-passrate--pass {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.polish-passrate--fail {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

.polish-passrate--mixed {
  background: var(--warning-subtle, #fef7e6);
  color: var(--warning, #b54708);
  border-color: var(--warning, #b54708);
}

.polish-passrate--none {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* The check / X / dash beside a fully-expanded eval leaf. */
.polish-passmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid transparent;
}

.polish-passmark--pass {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.polish-passmark--fail {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

.polish-passmark--none {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* Per-run pass/fail pill in the runs list. */
.polish-run-pass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
  white-space: nowrap;
}

.polish-run-pass--pass {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.polish-run-pass--fail {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

/* --- Disabled evals --------------------------------------------------- */

/* Muted leaf for a disabled eval (shown only when "Show disabled" is on). */
.polish-eval-row--disabled .polish-eval-link__recording,
.polish-eval-row--disabled .polish-eval-link__preview {
  opacity: 0.6;
}

.polish-passmark--disabled {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* Small "Disabled" tag inside a disabled eval's leaf row. */
.polish-eval-link__disabled-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

/* "Disabled" badge next to the eval title on the detail page. */
.polish-detail__disabled-badge {
  margin-left: 12px;
  vertical-align: middle;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

/* Muted variant of the page notice, used for the detail-page disabled note. */
.polishscripts__notice--muted {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

/* --- Single eval detail page ------------------------------------------ */

.polish-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.polish-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

.polish-detail__back:hover {
  color: var(--text-primary);
}

.polish-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.polish-detail__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.polish-detail__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
}

.polish-detail__actions {
  display: flex;
  gap: 8px;
}

.polish-detail__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}

.polish-detail__field dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.polish-detail__field dd {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-primary);
}

.polish-detail__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.polish-detail__task-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.polish-detail__task-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.polish-detail__results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.polish-detail__notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.polish-detail__notes-body {
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
}

.polish-detail__results-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.polish-detail__results-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.polish-detail__results-body {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.polish-detail__collapsible {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.polish-detail__collapsible-summary {
  cursor: pointer;
  width: fit-content;
  list-style: none;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  background: var(--bg-subtle);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  user-select: none;
}

.polish-detail__collapsible-summary::-webkit-details-marker {
  display: none;
}

.polish-detail__collapsible-summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  color: var(--text-secondary);
}

.polish-detail__collapsible[open] .polish-detail__collapsible-summary::before {
  content: '▾';
}

.polish-detail__collapsible-summary:hover {
  border-color: var(--border-strong, var(--text-secondary));
}

.polish-detail__empty-note {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
  font-size: 13px;
  color: var(--text-muted);
}

.polish-eval-results {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  resize: vertical;
  min-height: 120px;
}

/* ---- Polish runs: tree button, badges, runs list -------------------------- */

/* Compact secondary button used in the tree's eval rows. */
.btn--sm {
  padding: 4px 10px;
  font-size: 12px;
  gap: 4px;
}

/* Eval leaf becomes a row: the link grows, the Run button sits at the end. */
.polish-eval-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.polish-eval-row .polish-eval-link {
  flex: 1;
  min-width: 0;
}

.polish-run-btn-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.polish-run-btn-error {
  font-size: 12px;
  color: var(--danger, #b42318);
  max-width: 220px;
}

/* Status pill for a run. */
.polish-run-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
  white-space: nowrap;
}

.polish-run-badge--running {
  background: var(--warning-subtle, #fef7e6);
  color: var(--warning, #b54708);
  border-color: var(--warning, #b54708);
}

.polish-run-badge--completed {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.polish-run-badge--failed {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

/* The runs list on the eval detail page. */
.polish-run-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.polish-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  text-decoration: none;
  color: var(--text-primary);
}

.polish-run-row:hover {
  border-color: var(--accent);
  background: var(--bg-subtle);
}

.polish-run-row__pass {
  font-weight: 600;
  font-size: 14px;
}

.polish-run-row__signal {
  font-size: 13px;
  color: var(--text-secondary);
}

.polish-run-row__time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.polish-run-row__go {
  color: var(--text-muted);
  flex-shrink: 0;
}

.polish-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-muted);
}

.polish-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}
/* Rendered Markdown (see Markdown.tsx). Scoped to `.markdown` so it only styles
   the renderer's output. Uses the shared design tokens. */

.markdown {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  word-break: break-word;
}

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

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

.markdown h1,
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
  margin: 18px 0 8px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--text-primary);
}

.markdown h1 {
  font-size: 20px;
}
.markdown h2 {
  font-size: 17px;
}
.markdown h3 {
  font-size: 15px;
}
.markdown h4,
.markdown h5,
.markdown h6 {
  font-size: 14px;
}

.markdown p {
  margin: 0 0 10px;
  white-space: pre-wrap;
}

.markdown ul,
.markdown ol {
  margin: 0 0 10px;
  padding-left: 22px;
}

.markdown li {
  margin: 2px 0;
}

.markdown a {
  color: var(--accent);
  text-decoration: none;
}

.markdown a:hover {
  text-decoration: underline;
}

.markdown strong {
  font-weight: 600;
}

.markdown code {
  padding: 1px 5px;
  border-radius: 5px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.markdown pre {
  margin: 0 0 10px;
  padding: 14px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
  overflow-x: auto;
}

.markdown pre code {
  padding: 0;
  border: none;
  background: none;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.markdown blockquote {
  margin: 0 0 10px;
  padding: 4px 14px;
  border-left: 3px solid var(--border-strong);
  color: var(--text-secondary);
}
/* Evals page — the evals stored in Replay QA, and this app's attempts at them.
   Layout is shared with the other eval types (journeys.css supplies the page title,
   list rows and detail sections); this file adds only what is specific to evals:
   the kind pill, the attempt list, and the not-runnable notice. */

/* ---- Kind pill ---------------------------------------------------------- */
.eval-kind {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--neutral-subtle);
  color: var(--text-secondary);
  flex: none;
}

.eval-kind--missing-bug {
  background: var(--danger-subtle);
  color: var(--danger);
}

.eval-kind--chat-response,
.eval-kind--chat-finished {
  background: var(--accent-subtle, var(--neutral-subtle));
  color: var(--accent, var(--text-secondary));
}

/* An uncategorized eval is not runnable, and an unknown kind is one this UI has not
   been taught yet — both read as "not a normal kind" rather than as a category. */
.eval-kind--uncategorized,
.eval-kind--unknown {
  background: var(--neutral-subtle);
  color: var(--text-disabled);
  border: 1px dashed var(--border);
  padding: 1px 9px;
}

/* A clone glyph shown next to the kind pill for evals whose run depends on a clone
   (e.g. clone-fidelity). Sized to the pill text and tinted with the accent token so it
   sits alongside the badge without competing with it. */
.eval-clone-icon {
  display: inline-flex;
  align-items: center;
  color: var(--accent, var(--text-secondary));
  flex: none;
}

/* ---- Eval cards --------------------------------------------------------- */
.eval-card-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.eval-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}

.eval-card:hover {
  border-color: var(--accent);
}

/* Top row: the badge cluster gets its own full-width row above the project /
   counts / actions columns so a wide, non-shrinkable badge set can never spill
   into (and overlap) the counts. Below it, project takes the flexible track and
   truncates, while counts and actions keep their content width on the right. */
.eval-card__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px 16px;
}

/* Full-width first row; wrap defensively so even a single very wide badge set
   flows onto extra lines within this row rather than overflowing horizontally. */
.eval-card__badges {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* The eval's own id (e.g. "eval-mb-pr-473"), surfaced in the card header so each card
   is identifiable at a glance without opening its detail page. Monospace and pill-framed
   to read as an identifier rather than prose. */
.eval-card__id {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  color: var(--text-secondary);
  background: var(--neutral-subtle);
  border-radius: var(--radius-pill);
  padding: 3px 9px;
  white-space: nowrap;
  flex: none;
}

.eval-card__no-run {
  font-size: 12px;
  color: var(--text-disabled);
  white-space: nowrap;
}

.eval-card__project {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

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

.eval-card__time {
  color: var(--text-disabled);
  font-variant-numeric: tabular-nums;
}

.eval-card__actions {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: end;
  /* Sit above the description link's stretched hit area (.eval-card__body::after)
     so the Run button stays independently clickable while the rest of the card
     navigates to the detail page. */
  position: relative;
  z-index: 1;
}

/* Details: the full eval description written out below the main info. The link
   stretches its clickable area across the whole card via ::after, so clicking
   anywhere on the card (except the interactive controls, which are lifted above
   it) navigates to the eval's detail page. */
.eval-card__body {
  display: block;
  text-decoration: none;
  color: inherit;
  border-top: 1px solid var(--border-subtle, var(--border-default));
  padding-top: 12px;
}

.eval-card__body::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
}

.eval-card__description {
  margin: 0;
  color: var(--text-primary);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}

.eval-card:hover .eval-card__description {
  color: var(--accent);
}

/* Narrow widths: let the columns stack instead of overflowing off-screen. */
@media (max-width: 720px) {
  .eval-card__top {
    grid-template-columns: 1fr;
  }

  .eval-card__actions {
    justify-self: start;
  }
}

/* ---- Attempts ---------------------------------------------------------- */
.eval-attempts {
  list-style: none;
  margin: 12px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.eval-attempt {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg-elevated, var(--bg-subtle));
}

.eval-attempt__status {
  flex: none;
}

.eval-attempt__target {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
  flex: none;
}

.eval-attempt__reason {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1;
}

.eval-attempt__time {
  font-size: 12px;
  color: var(--text-disabled);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.eval-attempt__link {
  font-size: 12px;
  color: var(--accent, var(--text-secondary));
  text-decoration: none;
  white-space: nowrap;
}

.eval-attempt__link:hover {
  text-decoration: underline;
}

.eval-attempt__actions {
  display: inline-flex;
  gap: 8px;
  margin-left: auto;
}

/* ---- Not-runnable notice ------------------------------------------------ */
.eval-not-runnable {
  margin: 0;
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--warning-subtle);
  border-radius: var(--radius-md);
  padding: 8px 10px;
}

/* ---- Output blob ------------------------------------------------------- */
.eval-output {
  margin: 0;
  padding: 12px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  border: 1px solid var(--border);
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 480px;
  overflow: auto;
}

.eval-recordings {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
}

.eval-recording__role {
  font-weight: 600;
  color: var(--text-secondary);
  margin-right: 6px;
}

/* ---- Show-disabled toggle + disabled marker ----------------------------- */
/* Disabled evals are soft-retired in Replay QA; this checkbox reveals them and
   each shown one is dimmed and tagged so it never reads as an active eval. */
.evals__toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 0 0 10px;
}

.evals__show-disabled {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  white-space: nowrap;
}

.evals__show-disabled-input {
  cursor: inherit;
}

.eval-card--disabled {
  opacity: 0.68;
  border-style: dashed;
}

.eval-disabled-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  background: var(--neutral-subtle);
  color: var(--text-disabled);
  border: 1px dashed var(--border);
  flex: none;
}

/* The eval detail title carries the badge inline after the id, so lift it to the text's
   optical middle rather than the baseline. */
.journey-detail__title .eval-disabled-badge {
  margin-left: 10px;
  vertical-align: middle;
}

/* On the eval detail page, a disabled eval spells out WHY it is disabled and what that
   means — the "Disabled" badge and the button's tooltip alone don't explain it in the
   page content. */
.eval-disabled-notice {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  background: var(--neutral-subtle);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md, 8px);
}

.eval-disabled-notice svg {
  flex: none;
  margin-top: 2px;
  color: var(--text-disabled);
}

.eval-disabled-notice strong {
  color: var(--text-primary);
}

/* The Disable / Enable button and its inline error on the eval detail page. */
.eval-disable {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.eval-disable__error {
  font-size: 12px;
  color: var(--danger);
  font-weight: 500;
}

/* ---- Filters + search controls ------------------------------------------ */
/* The kind filters sit on the left; the free-text search input sits to their right.
   They wrap onto separate lines when the page is too narrow to hold both. */
.evals__controls {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 16px;
  flex-wrap: wrap;
}

/* ---- Kind filter list --------------------------------------------------- */
/* One row per category, stacked vertically, each showing its count and pass rate. */
.evals__filters {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  flex: 1 1 320px;
  max-width: 420px;
}

/* ---- Text search -------------------------------------------------------- */
.evals__search {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1 1 220px;
  min-width: 180px;
  max-width: 360px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 8px);
  background: var(--bg-surface);
}

.evals__search:focus-within {
  border-color: var(--accent);
}

.evals__search-icon {
  flex: none;
  color: var(--text-disabled);
}

.evals__search-input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  color: var(--text-primary);
  font-size: 13px;
  outline: none;
}

.evals__search-input::placeholder {
  color: var(--text-disabled);
}

.evals__filter.btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
}

.evals__filter-label {
  font-weight: 600;
}

.evals__filter-stats {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-variant-numeric: tabular-nums;
}

.evals__filter-count {
  opacity: 0.85;
}

.evals__filter-passrate {
  font-weight: 600;
}

/* ---- "Show more" pagination -------------------------------------------- */
.evals__show-more {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

/* The clone an attempt runs against, on the attempt detail page: its state, the task pages the
   build and deploy are actually happening on, and the stage events recorded so far. An attempt in
   'preparing' is waiting on two other products, so this is the only place that work is visible. */
.attempt-clone {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}

.attempt-clone__head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.attempt-clone__name {
  font-weight: 600;
}

.attempt-clone__status {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-2, #eef1f5);
  color: var(--text-2, #55606e);
}

.attempt-clone__status[data-status='pending'] {
  background: #fff4d6;
  color: #7a5900;
}

.attempt-clone__status[data-status='failed'] {
  background: #fde8e8;
  color: #8a1f1f;
}

.attempt-clone__version {
  font-size: 11px;
  color: var(--text-3, #7b8794);
}

.attempt-clone__links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.attempt-clone__source {
  font-size: 12px;
  color: var(--text-3, #7b8794);
}

.attempt-clone__events {
  list-style: none;
  margin: 4px 0 0;
  padding: 8px 0 0;
  border-top: 1px solid var(--border-1, #e3e8ee);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.attempt-clone__event {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 8px;
  font-size: 12px;
  align-items: baseline;
}

.attempt-clone__event-time {
  color: var(--text-3, #7b8794);
  font-variant-numeric: tabular-nums;
}

.attempt-clone__event[data-kind='clone_failed'] .attempt-clone__event-message {
  color: #8a1f1f;
}

.attempt-clone__event[data-kind='clone_ready'] .attempt-clone__event-message {
  color: #1f6b3a;
}

.attempt-clone__empty {
  margin: 0;
  font-size: 12px;
  color: var(--text-3, #7b8794);
}

/* "Last checked …" under an in-flight clone. A pending clone whose last check is old means the
   watcher stopped, not that the deploy is slow — the page should let someone tell those apart. */
.attempt-clone__poll {
  margin: 0;
  font-size: 12px;
  color: var(--text-3, #7b8794);
}

/* ---- Triage: priority + tag filter rows, and the badges on a card -----------
   The kind filters above are stacked full-width rows (each carrying a pass rate);
   triage is a row of chips, so it opts out of that column layout. */
/* Each triage selector gets its own single, full-width line: the Priority row and the Tags
   row stack vertically rather than sharing one wrapping row. This mirrors the PR page's
   .prs-toolbar (a flex column) so the two pages read consistently. */
.evals__triage {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin-bottom: 8px;
}

.evals__filters--triage {
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  max-width: none;
  flex: 0 1 auto;
  margin-bottom: 0;
}

.evals__filters-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-right: 4px;
}

/* A chip is the compact form of .evals__filter: no stats block, so it sizes to its label.
   Triage chips mirror the PR page's .prs-filter.btn (padding 4px 12px, gap 8px, 12px text;
   label 600 weight, count tabular-nums at 0.85 opacity) so both pages read consistently. */
.evals__filter--chip {
  padding: 4px 12px;
  gap: 8px;
  font-size: 12px;
  min-width: 0;
}

.evals__filter--chip .evals__filter-label {
  font-weight: 600;
}

.evals__filter--chip .evals__filter-count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* Priority on a card. Urgency is carried by color rather than by size: P1 reads as danger,
   P2 as warning, P3 as neutral. n/a is never rendered — most evals are n/a, so a badge on
   all of them says nothing. */
.eval-priority-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  flex: none;
  background: var(--neutral-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border);
}

.eval-priority-badge--p1 {
  background: var(--danger-subtle);
  color: var(--danger);
  border-color: currentColor;
}

.eval-priority-badge--p2 {
  background: var(--warning-subtle);
  color: var(--warning);
  border-color: currentColor;
}

.eval-priority-badge--p3 {
  background: var(--neutral-subtle);
  color: var(--text-muted);
}

/* A tag is quieter than any other badge on the card: it is how the corpus is filed, not a
   state of this eval. */
.eval-tag-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  flex: none;
  background: var(--neutral-subtle);
  color: var(--text-muted);
}

/* ---- Investigation finding (attempt detail) ------------------------------ */
/* The diagnosis of one failed attempt: which action in the QA pipeline malfunctioned. Styled as a
   quiet card inside the page's results section — the blamed action is the one thing here a reader
   acts on, so it is the only part that gets a border. */
.investigation__outcome {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 0;
}

.investigation__outcome-badge {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  flex: none;
  background: var(--neutral-subtle);
  color: var(--text-secondary);
}

/* An action at fault is a defect in the pipeline — the case that needs a code change. The other
   two blame nothing, so they read as neutral information rather than as an alarm. */
.investigation__outcome-badge--action-at-fault {
  background: var(--danger-subtle);
  color: var(--danger);
}

.investigation__outcome-badge--eval-at-fault {
  background: var(--warning-subtle);
  color: var(--warning);
}

.investigation__outcome-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.investigation__problem {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-primary);
}

.investigation__action {
  margin-top: 12px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control, 8px);
  background: var(--bg-subtle);
}

.investigation__action-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.investigation__action-kind {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
}

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

.investigation__action-class {
  border-radius: var(--radius-pill);
  padding: 2px 8px;
  font-size: 11px;
  line-height: 1.4;
  background: var(--accent-subtle);
  color: var(--accent);
}

.investigation__action-id,
.investigation__examined-kind {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-muted);
  margin-right: 6px;
}

.investigation__action-class-hint,
.investigation__why,
.investigation__no-recording,
.investigation__gap {
  margin: 8px 0 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.investigation__no-recording {
  color: var(--text-muted);
}

.investigation__examined {
  margin-top: 12px;
  font-size: 12px;
  color: var(--text-secondary);
}

.investigation__examined summary {
  cursor: pointer;
  color: var(--text-muted);
}

.investigation__examined ul {
  margin: 8px 0 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.investigation__when {
  margin: 10px 0 0;
  font-size: 11px;
  color: var(--text-disabled);
}
/* Journey Evals page — list/tree layout. Reuses the Clinical Slate tokens;
   mirrors the Polish Scripts spacing. Journey evals group by the URL under
   test (a single level: URL group → eval), so there is no nested-signal tier. */

.journeys {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.journeys__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.journeys__subtitle {
  margin: -12px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 60ch;
}

.journeys__notice {
  margin: 0;
  padding: 10px 14px;
  border-radius: var(--radius-control);
  background: var(--accent-subtle);
  color: var(--accent-hover);
  font-size: 13px;
}

/* Muted variant of the page notice, used for the detail-page disabled note. */
.journeys__notice--muted {
  background: var(--bg-subtle);
  color: var(--text-secondary);
}

/* --- Hierarchy: URL group → eval ------------------------------------- */

.journey-tree {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey-tree__chevron {
  flex: none;
  color: var(--text-muted);
  transition: transform 120ms ease;
}

.journey-tree__chevron--open {
  transform: rotate(90deg);
}

.journey-tree__count {
  margin-left: auto;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  white-space: nowrap;
}

.journey-group {
  border: 1px solid var(--border-default);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-surface);
}

.journey-group__head {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: var(--bg-subtle);
  cursor: pointer;
  text-align: left;
  font: inherit;
}

.journey-group__head:hover {
  background: var(--bg-muted, var(--bg-subtle));
}

.journey-group__name {
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}

.journey-group__body {
  display: flex;
  flex-direction: column;
  padding: 8px 12px 12px;
  gap: 6px;
}

.journey-eval-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.journey-eval-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--text-secondary);
  border: 1px solid transparent;
}

.journey-eval-link:hover {
  background: var(--bg-subtle);
  border-color: var(--border-default);
}

.journey-eval-link__icon {
  flex: none;
  color: var(--text-muted);
}

.journey-eval-link__preview {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
  color: var(--text-primary);
}

.journey-eval-link__go {
  flex: none;
  margin-left: auto;
  color: var(--text-muted);
}

/* --- Pass-rate rollups + per-eval pass/fail mark ---------------------- */

.journey-passrate {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
  white-space: nowrap;
}

.journey-passrate + .journey-tree__count {
  margin-left: 10px;
}

.journey-passrate__frac {
  opacity: 0.85;
  font-weight: 500;
}

.journey-passrate--pass {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.journey-passrate--fail {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

.journey-passrate--mixed {
  background: var(--warning-subtle, #fef7e6);
  color: var(--warning, #b54708);
  border-color: var(--warning, #b54708);
}

.journey-passrate--none {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

.journey-passmark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid transparent;
}

.journey-passmark--pass {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.journey-passmark--fail {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

.journey-passmark--none {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

.journey-passmark--disabled {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* Per-run pass/fail pill in the runs list. */
.journey-run-pass {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
  white-space: nowrap;
}

.journey-run-pass--pass {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.journey-run-pass--fail {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

/* "N/M bugs" found count beside a completed multi-bug run's pass/fail pill. */
.journey-run-bugs {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  white-space: nowrap;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-default);
}

/* --- Disabled evals --------------------------------------------------- */

.journey-eval-row--disabled .journey-eval-link__preview {
  opacity: 0.6;
}

.journey-eval-link__disabled-tag {
  flex: none;
  padding: 1px 7px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

.journey-detail__disabled-badge {
  margin-left: 12px;
  vertical-align: middle;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  background: var(--bg-subtle);
  color: var(--text-muted);
  border: 1px solid var(--border-default);
}

/* --- Single eval detail page ------------------------------------------ */

.journey-detail {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.journey-detail__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

.journey-detail__back:hover {
  color: var(--text-primary);
}

.journey-detail__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.journey-detail__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.journey-detail__subtitle {
  margin: 4px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  word-break: break-all;
}

.journey-detail__actions {
  display: flex;
  gap: 8px;
}

.journey-detail__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin: 0;
  padding: 18px 20px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-surface);
}

.journey-detail__field dt {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.journey-detail__field dd {
  margin: 6px 0 0;
  font-size: 14px;
  color: var(--text-primary);
}

.journey-detail__mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  word-break: break-all;
}

.journey-detail__task-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.journey-detail__task-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

.journey-detail__results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journey-detail__notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.journey-detail__notes-body {
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
}

.journey-detail__results-title {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.journey-detail__results-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.journey-detail__steps-count {
  font-weight: 400;
  color: var(--text-secondary);
}

.journey-detail__results-body {
  margin: 0;
  padding: 16px;
  border: 1px solid var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-x: auto;
}

.journey-detail__empty-note {
  margin: 0;
  padding: 16px;
  border: 1px dashed var(--border-default);
  border-radius: 12px;
  background: var(--bg-subtle);
  font-size: 13px;
  color: var(--text-muted);
}

/* Monospace, resizable textareas for the journey contents field. */
.journey-eval-content-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  resize: vertical;
  min-height: 140px;
}

/* Expected-bugs editor (create/edit dialog): one textarea per bug + add button. */
.journey-eval-bugs {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journey-eval-bug {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.journey-eval-bug .field__control {
  flex: 1;
}

.journey-eval-bug__remove {
  flex: none;
  color: var(--text-muted);
}

.journey-eval-add-bug {
  align-self: flex-start;
  margin-top: 8px;
  padding: 4px 10px;
  font-size: 12px;
  gap: 4px;
}

/* Expected-bugs list on the eval / run detail pages. */
.journey-detail__bug-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  counter-reset: journey-bug;
}

.journey-detail__bug-item {
  margin: 0;
}

/* An expected-bug row on the run detail that carries a found/not-found mark:
   the mark sits inline at the top-left of the bug text. */
.journey-detail__bug-item--marked {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.journey-detail__bug-item--marked .journey-detail__results-body {
  flex: 1;
  min-width: 0;
}

/* Per-bug found/not-found mark beside each expected bug on the run detail. */
.journey-bug-mark {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  margin-top: 2px;
  border-radius: var(--radius-pill, 9999px);
  border: 1px solid transparent;
}

.journey-bug-mark--found {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.journey-bug-mark--missing {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

.journey-bug-mark--none {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* ---- Journey runs: tree button, badges, runs list ------------------------- */

.btn--sm {
  padding: 4px 10px;
  font-size: 12px;
  gap: 4px;
}

.journey-eval-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.journey-eval-row .journey-eval-link {
  flex: 1;
  min-width: 0;
}

/* "View task" link sitting beside the Run button on an eval row: never shrinks
   or wraps so it stays a compact, single-line affordance. */
.journey-task-link {
  flex: none;
  white-space: nowrap;
}

.journey-run-btn-wrap {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.journey-run-btn-error {
  font-size: 12px;
  color: var(--danger, #b42318);
  max-width: 220px;
}

/* Status pill for a run. */
.journey-run-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.6;
  border: 1px solid transparent;
  white-space: nowrap;
}

.journey-run-badge--running {
  background: var(--warning-subtle, #fef7e6);
  color: var(--warning, #b54708);
  border-color: var(--warning, #b54708);
}

.journey-run-badge--completed {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.journey-run-badge--failed {
  background: var(--danger-subtle, #fef0f0);
  color: var(--danger, #b42318);
  border-color: var(--danger, #b42318);
}

/* The runs list on the eval detail page. */
.journey-run-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.journey-run-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
  text-decoration: none;
  color: var(--text-primary);
}

.journey-run-row:hover {
  border-color: var(--accent);
  background: var(--bg-subtle);
}

.journey-run-row__url {
  font-size: 13px;
  color: var(--text-secondary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40%;
}

.journey-run-row__time {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
}

.journey-run-row__go {
  color: var(--text-muted);
  flex-shrink: 0;
}

.journey-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 56px 24px;
  text-align: center;
  border: 1px dashed var(--border-strong);
  border-radius: 12px;
  background: var(--bg-surface);
  color: var(--text-muted);
}

.journey-empty__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-primary);
}

/* ---- Import-from-QA dialog ------------------------------------------------ */

/* Wider modal for the import list. */
.modal--wide {
  width: 640px;
}

.journey-import__hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.journey-import__project {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.journey-import__project .field__control {
  flex: 1;
  min-width: 0;
}

.journey-import__project .btn {
  white-space: nowrap;
  flex: none;
}

.journey-import__loading {
  margin: 0;
  padding: 12px;
  font-size: 13px;
  color: var(--text-muted);
}

.journey-import__project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding-top: 4px;
  border-top: 1px solid var(--border-default);
}

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

.journey-import__project-meta {
  font-size: 12px;
  color: var(--text-muted);
  white-space: nowrap;
}

.journey-import__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 320px;
  overflow-y: auto;
}

.journey-import__row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border-default);
  border-radius: 10px;
  background: var(--bg-surface);
}

.journey-import__row--disabled {
  opacity: 0.6;
}

.journey-import__check {
  display: flex;
  align-items: center;
  padding-top: 3px;
}

.journey-import__row-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1;
}

.journey-import__row-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.journey-import__row-name {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-import__bug-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 6px;
}

.journey-import__bug-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
}

.journey-import__bug-input {
  font-size: 13px;
  resize: vertical;
  min-height: 44px;
  flex: 1;
}

/* One editable expected-bug row (textarea + remove button) in the import dialog. */
.journey-import__bug-row {
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.journey-import__bug-remove {
  flex: none;
  color: var(--text-muted);
}

.journey-import__add-bug {
  align-self: flex-start;
  padding: 3px 9px;
  font-size: 12px;
  gap: 4px;
}

.journey-import__no-bug {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
  font-style: italic;
}

.journey-import__row-url {
  font-size: 12px;
  color: var(--text-muted);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.journey-import__row-note {
  font-size: 11px;
  color: var(--danger, #b42318);
}

.journey-import__bugs {
  flex: none;
  padding: 2px 9px;
  border-radius: var(--radius-pill, 9999px);
  font-size: 11px;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.journey-import__bugs--found {
  background: var(--success-subtle, #e7f6ec);
  color: var(--success, #067647);
  border-color: var(--success, #067647);
}

.journey-import__bugs--none {
  background: var(--bg-subtle);
  color: var(--text-muted);
  border-color: var(--border-default);
}

/* ---- Source-project reference on the detail page ------------------------- */

.journey-detail__source-link {
  color: var(--accent);
  text-decoration: none;
  word-break: break-all;
}

.journey-detail__source-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}
/* ==========================================================================
   JsonViewer — collapsible, syntax-highlighted JSON tree used inside modals to
   present diagnosis blobs (e.g. the "matching bug data" on an eval attempt).
   ========================================================================== */
.json-viewer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.json-viewer__toolbar {
  display: flex;
  justify-content: flex-end;
}

.json-viewer__copy {
  padding: 4px 10px;
  font-size: 12px;
}

.json-viewer__tree {
  max-height: min(60vh, 480px);
  overflow: auto;
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  line-height: 1.6;
}

.json-viewer__row {
  display: block;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  color: var(--text-secondary);
}

.json-viewer__row--toggle {
  width: 100%;
  text-align: left;
  border: none;
  background: none;
  font: inherit;
  cursor: pointer;
  border-radius: 4px;
}

.json-viewer__row--toggle:hover {
  background: var(--accent-subtle);
}

.json-viewer__row--toggle:focus-visible {
  outline: 2px solid var(--border-focus);
  outline-offset: 1px;
}

.json-viewer__chevron {
  display: inline-block;
  margin-right: 2px;
  color: var(--text-muted);
  vertical-align: -2px;
}

.json-viewer__key {
  color: var(--accent);
}

.json-viewer__punct {
  color: var(--text-muted);
}

.json-viewer__preview {
  margin: 0 6px;
  padding: 0 6px;
  color: var(--text-muted);
  font-style: italic;
}

.json-viewer__value--string {
  color: var(--success);
}

.json-viewer__value--number {
  color: var(--warning);
}

.json-viewer__value--boolean {
  color: #6941c6;
}

.json-viewer__value--null {
  color: var(--text-disabled);
  font-style: italic;
}
/* Pull Requests page — global list of missing-bug PRs + their Evals Check. */

.prs-page {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.prs-page__title {
  margin: 0;
  font-size: 22px;
  font-weight: 700;
  color: var(--text-primary);
}

.prs-page__subtitle {
  margin: -12px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 68ch;
  line-height: 1.5;
}

/* Toolbar above the PR card: the eval-check-status filter, then the category filter stacked
   beneath it. The filters used to live in the card header / card body, but both controls now
   sit above the whole table so they are the first thing the user reaches. Stacking them keeps
   each facet on its own row as a paired filter block. */
.prs-toolbar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Inside the toolbar each filter is its own full row, so drop its stacked bottom margin — the
   toolbar's column gap handles the spacing between the status and category rows. */
.prs-toolbar .prs-filters {
  margin: 0;
}

/* Filter rows — each narrows the list to one facet value (or All), each chip showing its
   PR count. Four rows sit above the grouped list: eval check status, category, then the two
   triage rows (priority, tags). All are horizontal and wrapping. */
.prs-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
}

/* The eval-check-status row sits directly above the category row — tighten the gap between
   them so they read as a paired filter block. */
.prs-filters--status {
  margin-bottom: 8px;
}

/* Leading label naming what a filter row filters by ("Eval check status" / "Category"). */
.prs-filters__label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-right: 2px;
}

/* Status dot on an eval-check-status chip — a small colored marker echoing the row pill's
   variant color so the summary is scannable at a glance. */
.prs-filter__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  flex: none;
  align-self: center;
  background: var(--text-disabled);
}

.prs-filter__dot--ready {
  background: var(--accent);
}

.prs-filter__dot--running {
  background: var(--warning);
}

.prs-filter__dot--filed {
  background: var(--success);
}

.prs-filter__dot--failed,
.prs-filter__dot--check-failed {
  background: var(--danger);
}

.prs-filter__dot--conflict {
  background: var(--warning);
}

.prs-filter__dot--waiting,
.prs-filter__dot--notfiled {
  background: var(--text-secondary);
}

.prs-filter__dot--none {
  background: var(--text-disabled);
}

/* The status label reads in the pill's own lowercase words ("preview ready") — capitalize
   just the first word for the chip so it presents cleanly. */
.prs-filter__label--status {
  text-transform: capitalize;
}

.prs-filter.btn {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 4px 12px;
  font-size: 12px;
}

.prs-filter__label {
  font-weight: 600;
}

.prs-filter__count {
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

/* The "Requeue errors" row — the last row of the toolbar, under the filter rows. It is an
   ACTION rather than a facet, so it keeps the chip shape (label + count) of the filters above
   it but carries its own explanatory hint on the same line. */
.prs-requeue {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* Read as an action, not a selected facet: the count sits in a subtle bubble rather than
   inheriting the chip's plain-number look. */
.prs-requeue__button .prs-filter__count {
  padding: 0 6px;
  border-radius: var(--radius-pill);
  background: var(--neutral-subtle);
}

.prs-requeue__hint {
  font-size: 12px;
  color: var(--text-muted);
}

.prs-requeue__error {
  font-size: 12px;
  color: var(--danger);
}

/* Inline "Show all" reset inside the category-empty message. */
.prs-filter__reset {
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  color: var(--accent);
  text-decoration: underline;
}

/* Shown in place of the list when every PR is merged and merged ones are hidden. */
.prs-list__filtered-empty {
  margin: 0;
  padding: 12px 4px;
  font-size: 13px;
  color: var(--text-muted);
}

.prs-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin: 0;
  color: var(--text-muted);
  font-size: 14px;
  line-height: 1.5;
}

.prs-list {
  display: flex;
  flex-direction: column;
}

/* Affected-site groups: each site is an expandable entry (header + body of PR rows). */
.prs-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.prs-group {
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 8px;
  overflow: hidden;
}

.prs-group__header {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background: var(--surface-subtle, transparent);
  border: none;
  cursor: pointer;
  text-align: left;
  font: inherit;
  color: var(--text);
}

.prs-group__site {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
  font-size: 13px;
}

.prs-group__count {
  flex: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.prs-group__body {
  padding: 0 12px;
  border-top: 1px solid var(--border-subtle, var(--border));
}

.prs-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-subtle, var(--border));
}

.prs-row:last-child {
  border-bottom: none;
}

/* A row deep-linked from the Workers page briefly highlights so the user can spot which PR
   they were sent to. scroll-margin keeps the centered row clear of any sticky header. */
.prs-row {
  scroll-margin-block: 96px;
  border-radius: 8px;
}

.prs-row--focused {
  animation: prs-row-focus 2.2s ease-out;
}

@keyframes prs-row-focus {
  0%,
  35% {
    background: color-mix(in srgb, var(--accent, #6366f1) 18%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent, #6366f1) 45%, transparent);
  }
  100% {
    background: transparent;
    box-shadow: inset 0 0 0 1px transparent;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prs-row--focused {
    animation: none;
    background: color-mix(in srgb, var(--accent, #6366f1) 12%, transparent);
  }
}

.prs-row__main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.prs-row__status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
}

.prs-row__title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.prs-row__run {
  flex: none;
  padding: 4px 10px;
  font-size: 12px;
}

.prs-row__link {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--accent);
  text-decoration: none;
}

.prs-row__link:hover {
  text-decoration: underline;
}

.prs-row__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  padding-left: 2px;
  font-size: 12px;
  color: var(--text-muted);
}

.prs-row__app-url {
  color: var(--text-secondary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 40ch;
}

.prs-row__app-url:hover {
  text-decoration: underline;
}

.prs-row__eval-detail {
  font-variant-numeric: tabular-nums;
}

.prs-row__eval-detail a,
.prs-row__preview,
.prs-row__project {
  color: var(--accent);
  text-decoration: none;
}

.prs-row__eval-detail a:hover,
.prs-row__preview:hover,
.prs-row__project:hover {
  text-decoration: underline;
}

.prs-row__eval-error {
  color: var(--danger);
  /* Show the full error — wrap instead of truncating with an ellipsis, so the
     complete (and now actionable) message is readable without hovering. */
  flex-basis: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* The expand/collapse toggle summarizing a PR's eval + fix attempts. */
.prs-row__expand,
.prs-row__bugs-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 2px;
  padding: 2px 4px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-secondary);
}

.prs-row__bugs-toggle:hover {
  color: var(--text-primary);
}

.prs-row__bugs-toggle svg {
  flex: none;
  color: var(--text-muted);
}

/* The expanded "filed bugs" list — each bug with its missing-bug match marker. */
.prs-row__filed-bugs {
  list-style: none;
  margin: 2px 0 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--border-subtle, var(--border));
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prs-filed-bug {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
}

.prs-filed-bug__match {
  flex: none;
}

.prs-filed-bug__title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
}

.prs-filed-bug__severity {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.prs-filed-bug__desc {
  flex-basis: 100%;
  font-size: 12px;
  color: var(--text-secondary);
  line-height: 1.4;
}

.prs-row__expand:hover {
  color: var(--text-primary);
}

.prs-row__expand svg {
  flex: none;
  color: var(--text-muted);
}

/* The expanded details: the interleaved eval + fix timeline. */
.prs-row__details {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 2px;
}

/* The single timeline of eval and fix attempts, newest first. A left rule ties the
   entries together visually as one chronological thread. */
.prs-row__timeline {
  list-style: none;
  margin: 2px 0 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--border-subtle, var(--border));
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* One timeline entry (an eval attempt or a fix attempt): kind badge, start → end
   times, then the entry-specific detail. */
.prs-timeline-item {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 4px 8px;
  font-size: 12px;
  color: var(--text-muted);
  background: var(--surface-subtle, var(--surface, rgba(127, 127, 127, 0.06)));
  border: 1px solid var(--border-subtle, var(--border));
  border-radius: 6px;
}

/* Kind badge — distinguishes eval vs fix entries at a glance. */
.prs-timeline__kind {
  flex: none;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
  background: var(--surface, rgba(127, 127, 127, 0.12));
  border: 1px solid var(--border-subtle, var(--border));
}

.prs-timeline__kind--eval {
  color: var(--accent);
}

.prs-timeline__kind--fix {
  color: var(--warning, var(--accent));
}

/* A run still awaiting its PR preview — the eval hasn't run yet. Neutral tone so
   it reads as "waiting", distinct from the accent-colored EVAL badge. */
.prs-timeline__kind--preview {
  color: var(--text-secondary);
}

/* A comment somebody wrote on the PR: an input to the work, not a run of it, so it
   takes the neutral secondary tone rather than either action color. */
.prs-timeline__kind--comment {
  color: var(--text-secondary);
}

/* Start → end timestamps for the entry. */
.prs-timeline__times {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.prs-timeline__arrow {
  color: var(--text-muted);
}

.prs-timeline__time--open {
  color: var(--text-muted);
}

/* The entry-specific detail group (status pill + details + link), nested in the
   timeline row. */
.prs-project {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
  flex: 1 1 auto;
  min-width: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.prs-project__status {
  flex: none;
}

.prs-project__time {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.prs-project__detail {
  font-variant-numeric: tabular-nums;
}

/* Deployment-wait timing for the current run — its own full-width line so the two
   timestamps (waiting-since, detected-at) read together below the status pill. */
.prs-project__deploy {
  flex-basis: 100%;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
}

.prs-project__deploy time {
  color: var(--text-secondary);
}

/* Not yet detected — nudge attention to a run still waiting on its deployment. */
.prs-project__deploy[data-detected='false'] {
  color: var(--warning, var(--text-secondary));
}

.prs-project__error {
  color: var(--danger);
  /* Full-width own line, wrapping — the complete error is readable in the timeline
     entry rather than clipped to one line. */
  flex-basis: 100%;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.prs-project__link {
  margin-left: auto;
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  text-decoration: none;
}

.prs-project__link:hover {
  text-decoration: underline;
}

.prs-project__link--disabled {
  color: var(--text-disabled);
  pointer-events: none;
}

/* The completed attempt's diagnosis blob, surfaced inline in the timeline entry. Full-width
   on its own line (so it wraps below the status row) and collapsed by default. */
.prs-project__output {
  flex-basis: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.prs-project__output-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-size: 12px;
  color: var(--accent);
}

.prs-project__output-toggle:hover {
  text-decoration: underline;
}

/* The verdict's reason, shown under an eval PR's title — one line, hover for the rest. */
.prs-row__verdict-reason {
  font-size: 12px;
  color: var(--text-secondary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 60ch;
}

/* The external-failure finding, shown in the verdict reason's place — same shape, but read
   as a statement about the eval rather than about the run, so it takes the primary text. */
.prs-row__external-failure {
  font-size: 12px;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  max-width: 60ch;
}

/* Mobile: the PR row's main line (status pill, title, kind badge, Run / Attempt-fix buttons,
   and the "owner/repo #N" link) packs several NON-shrinking controls onto one row. On a phone
   they no longer fit, and because the row does not wrap they run off the right edge with
   nothing to scroll — the page is cut off exactly as reported. Let the row wrap so the controls
   flow onto following lines: the title takes the full first line, and the GitHub link can
   truncate rather than force the row wider than the viewport. */
@media (max-width: 767px) {
  .prs-row__main {
    flex-wrap: wrap;
  }

  /* Title first, on its own full-width line, so the status pill + badges + buttons + link wrap
     beneath it instead of squeezing the title to a sliver. */
  .prs-row__title {
    order: -1;
    flex-basis: 100%;
  }

  /* Allow the link to shrink and its text to truncate so a long "owner/repo #N" can never be
     wider than the row. */
  .prs-row__link {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .prs-row__link-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Triage rows (priority, then tags). Same chips as the rows above; the tighter bottom margin
   is what keeps all four reading as one filter block rather than four detached rows. */
.prs-filters--triage {
  margin-bottom: 8px;
}
/* Workers page (`/workers`): the worker-count control, the eligible-eval queue, and the
   worker scheduler's activity log. The worker control + log styles moved here from
   pull-requests.css when the worker functionality got its own page. */

.workers-page__title {
  margin: 0 0 6px;
  font-size: 24px;
  font-weight: 700;
  color: var(--text-primary);
}

.workers-page__subtitle {
  margin: 0 0 20px;
  max-width: 78ch;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- Worker count control ----------------------------------------------- */
.workers-control {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 14px 20px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 10px);
}

.workers-control__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.workers-control__label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}

.workers-control__input {
  width: 72px;
  padding: 6px 8px;
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  background: var(--bg-input, var(--bg-surface));
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm, 6px);
}

.workers-control__input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.workers-control__hint {
  flex: 1 1 40ch;
  min-width: 0;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.workers-control__error {
  font-size: 13px;
  color: var(--danger);
}

/* ---- Work queue --------------------------------------------------------- */
.workers-queue {
  margin-top: 24px;
}

.workers-queue__hint {
  margin: 0 0 12px;
  max-width: 78ch;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.workers-queue__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.workers-queue__row {
  display: flex;
  align-items: center;
  /* Wraps only so a "Run now" error can take a full line of its own below the row's
     controls (see .workers-queue__error); with no error the row is a single line. */
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 10px);
}

.workers-queue__error {
  flex: 1 0 100%;
  font-size: 12px;
  color: var(--danger, #d92d20);
}

/* The row's two icon actions, grouped so they read as one control pair rather than
   two items in the row's own 10px rhythm. */
.workers-queue__actions {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
}

.workers-queue__spin {
  animation: workers-queue-spin 0.8s linear infinite;
}

@keyframes workers-queue-spin {
  to {
    transform: rotate(360deg);
  }
}

.workers-queue__position {
  flex: none;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--bg-input, var(--bg-muted, rgba(127, 127, 127, 0.12)));
  border-radius: var(--radius-pill, 999px);
  font-variant-numeric: tabular-nums;
}

.workers-queue__badge {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  border-radius: var(--radius-pill, 999px);
  background: var(--text-muted);
}

.workers-queue__badge--eval {
  background: var(--accent);
}

.workers-queue__badge--fix {
  background: var(--success, #16a34a);
}

.workers-queue__badge--run-eval {
  background: var(--accent);
}

.workers-queue__badge--resolve-conflict {
  background: var(--warning, #b54708);
}

.workers-queue__badge--fix-checks {
  background: var(--danger, #d92d20);
}

.workers-queue__badge--respond-comment {
  background: var(--info, #0e7490);
}

.workers-queue__task {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
}

.workers-queue__link {
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workers-queue__link:hover {
  text-decoration: underline;
}

.workers-queue__time {
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.workers-queue__empty {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---- Active workers (live) ---------------------------------------------- */
.workers-active {
  margin-top: 24px;
}

.workers-active__hint {
  margin: 0 0 12px;
  max-width: 78ch;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.45;
}

.workers-active__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.workers-active__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md, 10px);
}

.workers-active__badge {
  flex: none;
  padding: 2px 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  border-radius: var(--radius-pill, 999px);
  background: var(--text-muted);
}

.workers-active__badge--eval {
  background: var(--accent);
}

.workers-active__badge--fix {
  background: var(--success, #16a34a);
}

.workers-active__task {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-primary);
  overflow: hidden;
}

.workers-active__link {
  color: var(--text-primary);
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.workers-active__link:hover {
  text-decoration: underline;
}

.workers-active__stalled {
  flex: none;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--danger);
  border: 1px solid var(--danger);
  border-radius: var(--radius-pill, 999px);
}

.workers-active__timing {
  flex: none;
  display: flex;
  align-items: baseline;
  gap: 10px;
}

.workers-active__duration {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.workers-active__time {
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.workers-active__empty {
  margin: 0;
  font-size: 14px;
  color: var(--text-muted);
}

/* ---- Worker event log --------------------------------------------------- */
.workers-log {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workers-log__header {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-secondary);
}

.workers-log__empty {
  margin: 0;
  font-size: 13px;
  color: var(--text-muted);
}

.workers-log__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
  max-height: 320px;
  overflow-y: auto;
}

.workers-log__more {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
}

.workers-log__more-hint {
  font-size: 12px;
  color: var(--text-muted);
}

.workers-log__item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--text-primary);
}

.workers-log__dot {
  flex: none;
  width: 8px;
  height: 8px;
  margin-top: 5px;
  border-radius: var(--radius-pill, 999px);
  background: var(--text-muted);
}

.workers-log__dot--eval_started,
.workers-log__dot--fix_started,
.workers-log__dot--run_started {
  background: var(--accent);
}

.workers-log__dot--eval_finished,
.workers-log__dot--fix_finished,
.workers-log__dot--run_finished,
.workers-log__dot--pr_opened {
  background: var(--success, #16a34a);
}

.workers-log__dot--error {
  background: var(--danger);
}

.workers-log__badge {
  flex: none;
  align-self: center;
  padding: 1px 7px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: #fff;
  border-radius: var(--radius-pill, 999px);
}

.workers-log__clone-link:hover {
  text-decoration: underline;
}

.workers-log__msg {
  flex: 1 1 auto;
  min-width: 0;
  line-height: 1.4;
}

.workers-log__time {
  flex: none;
  font-size: 12px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* Last scheduler pass — one line under the worker counter saying what the scheduler last
   decided. Muted while healthy; the problem variant is for a pass that stopped on something
   wrong (it claimed nothing with work queued, or it threw), which is the case a reader is on
   this page to understand. */
.workers-pass {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin-top: 12px;
  padding: 8px 12px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  background: var(--bg-surface);
  font-size: 12px;
  color: var(--text-muted);
}

.workers-pass--problem {
  border-color: var(--danger);
  background: var(--danger-subtle);
  color: var(--text-primary);
}

.workers-pass__label {
  font-weight: 600;
  color: var(--text-primary);
}

.workers-pass__trigger {
  padding: 1px 6px;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px;
}

.workers-pass__detail {
  flex: 1 1 40ch;
}
/* ==========================================================================
   Settings page — MCP server documentation cards.
   ========================================================================== */
.settings {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.settings__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

.settings__intro {
  margin: -12px 0 0;
  font-size: 14px;
  color: var(--text-muted);
  max-width: 720px;
}

/* ---- Cards --------------------------------------------------------------- */
.settings-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-sm);
}

.settings-card__head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.settings-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-control);
  background: var(--accent-subtle);
  color: var(--accent);
}

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

.settings-card__subtitle {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
}

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

/* ---- Code block --------------------------------------------------------- */
.codeblock {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.codeblock__caption {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.codeblock__body {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  background: var(--text-primary);
  border-radius: var(--radius-control);
}

.codeblock__pre {
  flex: 1 1 auto;
  margin: 0;
  min-width: 0;
  overflow-x: auto;
  font-family: 'SFMono-Regular', ui-monospace, 'JetBrains Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  line-height: 1.6;
  color: #e6e8ee;
  white-space: pre;
}

.codeblock__copy {
  flex: none;
  height: 30px;
  padding: 0 10px;
  font-size: 12px;
}

/* ---- Tools list --------------------------------------------------------- */
.mcp-tool-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mcp-tool {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px 0;
  border-top: 1px solid var(--border-default);
}

.mcp-tool:first-child {
  border-top: none;
  padding-top: 0;
}

.mcp-tool__head {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mcp-tool__name {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 2px 8px;
  border-radius: var(--radius-control);
}

.mcp-tool__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.mcp-tool__params {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mcp-tool__param {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.mcp-tool__param-name {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-primary);
}

.mcp-tool__param-type {
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.mcp-tool__param-required {
  font-size: 11px;
  font-weight: 600;
  color: var(--warning);
  background: var(--warning-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.mcp-tool__param-desc {
  flex: 1 1 240px;
  min-width: 0;
}

/* Inline code in card copy (e.g. Authorization: Bearer, placeholders). */
.settings-card__subtitle code,
.settings-card__text code {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.92em;
  color: var(--text-primary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 0 5px;
}

/* ---- API key card ------------------------------------------------------- */
.api-key-reveal {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.api-key-reveal__warn {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--warning);
}

.api-key-status {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
}

.api-key-status__row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.api-key-status__label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
}

.api-key-status__value {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
}

.api-key-status__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 16px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.api-key-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.api-key-note {
  margin: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

/* ---- API docs link ------------------------------------------------------ */
.api-docs-link {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 8px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  background: var(--accent-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  text-decoration: none;
}

.api-docs-link:hover {
  border-color: var(--accent);
}

/* ---- Placeholders ------------------------------------------------------- */
.settings-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  padding: 32px 24px;
  background: var(--bg-subtle);
  border-radius: var(--radius-control);
  color: var(--text-muted);
  font-size: 14px;
}

.settings-placeholder--error {
  background: var(--danger-subtle);
  color: var(--danger);
}

/* Fix webhook secret card */
.fix-webhook-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fix-webhook-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-family: var(--font-mono, monospace);
  color: var(--text-primary);
  background: var(--bg-surface);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
}

.fix-webhook-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}

.fix-webhook-actions {
  display: flex;
  gap: 8px;
}

/* Eval site allowlist card */
.allowlist-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.allowlist-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 10px 8px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
}

.allowlist-item__pattern {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13px;
  color: var(--text-primary);
  word-break: break-all;
}

.allowlist-item__remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  cursor: pointer;
}

.allowlist-item__remove:hover:not(:disabled) {
  color: var(--danger);
  background: var(--danger-subtle);
}

.allowlist-item__remove:disabled {
  opacity: 0.5;
  cursor: default;
}

.allowlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.allowlist-actions {
  display: flex;
  gap: 8px;
}

@media (max-width: 767px) {
  .settings-card {
    padding: 16px;
  }
}
/* ==========================================================================
   API docs page — renders the live OpenAPI document. Reuses the Settings page
   card styles (settings-card, settings-placeholder); everything below is the
   API-reference-specific layout.
   ========================================================================== */
.apidoc {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.apidoc__back {
  margin-bottom: -8px;
}

.apidoc__back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
}

.apidoc__back-link:hover {
  color: var(--accent);
}

.apidoc__title {
  margin: 0;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 600;
  color: var(--text-primary);
}

.apidoc__intro {
  margin: -12px 0 0;
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 720px;
}

.apidoc-auth-note {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.apidoc-auth-note a {
  color: var(--accent);
}

/* ---- Operation groups ---------------------------------------------------- */
.apidoc-op-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apidoc-op {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 0;
  border-top: 1px solid var(--border-default);
}

.apidoc-op:first-child {
  border-top: none;
  padding-top: 4px;
}

.apidoc-op__head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.apidoc-method {
  flex: none;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  padding: 3px 8px;
  border-radius: var(--radius-control);
  background: var(--text-muted);
}

.apidoc-method--get {
  background: #2563eb;
}
.apidoc-method--post {
  background: #16a34a;
}
.apidoc-method--patch,
.apidoc-method--put {
  background: #d97706;
}
.apidoc-method--delete {
  background: #dc2626;
}

.apidoc-op__path {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.apidoc-op__summary {
  font-size: 13px;
  color: var(--text-secondary);
}

.apidoc-op__mcp {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--text-muted);
  white-space: nowrap;
}

.apidoc-op__mcp code {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--accent);
  background: var(--accent-subtle);
  padding: 1px 6px;
  border-radius: var(--radius-control);
}

.apidoc-op__desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.apidoc-op__auth {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.apidoc-op__section {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.apidoc-op__section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.apidoc-op__type-tag,
.apidoc-op__type-tag {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-primary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-control);
  padding: 1px 6px;
}

/* ---- Property / parameter lists ----------------------------------------- */
.apidoc-proplist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.apidoc-prop {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apidoc-prop__head {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
}

.apidoc-prop__name {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}

.apidoc-prop__type {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.apidoc-prop__in {
  font-size: 11px;
  color: var(--accent);
  background: var(--accent-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.apidoc-prop__required {
  font-size: 11px;
  font-weight: 600;
  color: var(--warning);
  background: var(--warning-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

.apidoc-prop__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.apidoc-prop__enum {
  margin: 0;
  font-size: 12px;
  color: var(--text-muted);
}

.apidoc-prop__enum code {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11.5px;
  color: var(--text-primary);
}

/* ---- Responses ----------------------------------------------------------- */
.apidoc-responses {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.apidoc-response {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
}

.apidoc-status {
  flex: none;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 1px 8px;
  border-radius: var(--radius-control);
  color: var(--text-primary);
  background: var(--bg-subtle);
}

.apidoc-status--2xx {
  color: var(--success, #16a34a);
  background: var(--success-subtle, #ecfdf3);
}

.apidoc-status--4xx,
.apidoc-status--5xx {
  color: var(--danger);
  background: var(--danger-subtle);
}

.apidoc-response__type {
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 11px;
  color: var(--text-muted);
  background: var(--bg-subtle);
  border-radius: var(--radius-pill);
  padding: 1px 8px;
}

/* ---- Schemas reference --------------------------------------------------- */
.apidoc-schema-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.apidoc-schema {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 0;
  border-top: 1px solid var(--border-default);
}

.apidoc-schema:first-child {
  border-top: none;
  padding-top: 4px;
}

.apidoc-schema__name {
  margin: 0;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 14px;
  font-weight: 600;
  color: var(--accent);
}

.apidoc-schema__desc {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

.apidoc-schema__empty {
  margin: 0;
  font-family: 'SFMono-Regular', ui-monospace, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-muted);
}
/*! 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;
    --shadow-sm: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
    --shadow-md: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000001a;
    --shadow-lg: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
    --ease-out: cubic-bezier(0, 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);
  }
}

@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;
  }

  .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-flex {
    display: inline-flex;
  }

  .table {
    display: table;
  }

  .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;
  }

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

  .truncate {
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }

  .rounded {
    border-radius: .25rem;
  }

  .border {
    border-style: var(--tw-border-style);
    border-width: 1px;
  }

  .lowercase {
    text-transform: lowercase;
  }

  .uppercase {
    text-transform: uppercase;
  }

  .tabular-nums {
    --tw-numeric-spacing: tabular-nums;
    font-variant-numeric: var(--tw-ordinal, ) var(--tw-slashed-zero, ) var(--tw-numeric-figure, ) var(--tw-numeric-spacing, ) var(--tw-numeric-fraction, );
  }

  .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;
  }

  .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-out {
    --tw-ease: var(--ease-out);
    transition-timing-function: var(--ease-out);
  }
}

:root {
  --bg-base: #f7f8fa;
  --bg-surface: #fff;
  --bg-sidebar: #fff;
  --bg-subtle: #f1f3f6;
  --border-default: #e4e7ec;
  --border-strong: #d0d5dd;
  --border-focus: #f02d5e;
  --text-primary: #101828;
  --text-secondary: #344054;
  --text-muted: #667085;
  --text-disabled: #98a2b3;
  --text-on-accent: #fff;
  --accent: #f02d5e;
  --accent-hover: #d11f4c;
  --accent-subtle: #fef0f3;
  --success: #067647;
  --success-subtle: #ecfdf3;
  --danger: #b42318;
  --danger-subtle: #fef3f2;
  --warning: #b54708;
  --warning-subtle: #fffaeb;
  --neutral: #475467;
  --neutral-subtle: #f2f4f7;
  --radius-control: 8px;
  --radius-card: 12px;
  --radius-modal: 16px;
  --radius-pill: 9999px;
  --shadow-sm: 0 1px 2px #1018280d;
  --shadow-md: 0 4px 12px #10182814;
  --shadow-lg: 0 16px 32px -8px #10182833;
  --backdrop: #10182873;
}

* {
  box-sizing: border-box;
}

html, body, #root {
  height: 100%;
}

body {
  background: var(--bg-base);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
  margin: 0;
  font-family: Inter, -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, sans-serif;
  font-size: 14px;
  line-height: 1.5;
}

a {
  color: var(--accent);
  text-decoration: none;
}

@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
}