/* Dashboard — page-specific styles */

/* ── App shell ─────────────────────────────────────────── */
.dash-app {
  min-height: 100vh;
  background: var(--kr-bg-base);
}

/* ── Nav bar ───────────────────────────────────────────── */
.dash-nav {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
  padding: var(--kr-sp-5) var(--kr-sp-8);
  border-bottom: 1px solid var(--kr-border);
  background: var(--kr-bg-surface);
  position: sticky;
  top: 0;
  z-index: var(--kr-z-sticky);
}

.dash-nav-brand {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  margin-right: var(--kr-sp-9);
}

.dash-nav-brand[data-mobile="true"] {
  margin-right: var(--kr-sp-4);
}

.dash-nav-title {
  font-weight: 700;
  font-size: var(--kr-fs-lg);
  letter-spacing: -0.02em;
}

.dash-nav-title-mobile {
  font-weight: 700;
  font-size: var(--kr-fs-base);
  letter-spacing: -0.02em;
}

.dash-nav-tabs {
  display: contents;
}

.dash-nav-tabs[data-mobile="true"] {
  display: flex;
  gap: var(--kr-sp-2);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex: 1;
}

.dash-nav-btn {
  padding: 7px var(--kr-sp-7);
  border-radius: var(--kr-r-md);
  border: none;
  background: transparent;
  color: var(--kr-text-tertiary);
  cursor: pointer;
  font-size: var(--kr-fs-base);
  font-family: inherit;
  font-weight: 400;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  transition: background 0.15s, color 0.15s;
  position: relative;
}

.dash-nav-btn[data-active="true"] {
  background: rgba(var(--kr-accent-rgb), 0.1);
  color: var(--kr-accent);
  font-weight: 600;
}

.dash-nav-btn[data-mobile="true"] {
  padding: var(--kr-sp-3) var(--kr-sp-4);
  font-size: var(--kr-fs-xs);
  white-space: nowrap;
  gap: var(--kr-sp-1);
}

/* WCAG 2.5.5 / Apple HIG / MD3: 44 × 44 px minimum tap target on coarse
 * pointers (touch). Pre-fix the desktop padding shrank to ~32 × 28 on
 * mobile, well below the threshold. We bump min-height + horizontal
 * padding only on coarse pointers so desktop stays compact. */
@media (pointer: coarse) {
  .dash-nav-btn,
  .dash-nav-btn[data-mobile="true"] {
    min-height: 44px;
    padding: 10px 14px;
  }
  .dash-nav-btn[data-mobile="true"] {
    /* Icon-only / icon-first labels still need horizontal room for the
     * touch hitbox even when the visible glyph is small. */
    min-width: 44px;
    justify-content: center;
  }
}

.dash-nav-spacer {
  flex: 1;
}

.dash-nav-spacer[data-mobile="true"] {
  flex: 0;
}

/* ── Nav badge (unseen count / running workflows) ──────── */
.dash-nav-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  font-size: 8px;
  font-weight: 800;
  border-radius: var(--kr-r-md);
  padding: 1px 5px;
  min-width: 14px;
  text-align: center;
  line-height: 12px;
}

/* ── Scan / action button ──────────────────────────────── */
.dash-scan-btn {
  padding: 7px var(--kr-sp-7);
  border-radius: var(--kr-r-md);
  border: 1px solid var(--kr-accent-border);
  background: rgba(var(--kr-accent-rgb), 0.05);
  color: var(--kr-accent);
  cursor: pointer;
  font-size: var(--kr-fs-base);
  font-family: inherit;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  transition: background 0.15s, border-color 0.15s;
}

/* ── Main content ──────────────────────────────────────── */
.dash-main {
  max-width: 1000px;
  margin: 0 auto;
  padding: var(--kr-sp-9) var(--kr-sp-8);
}

.dash-loading-bar {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-5) var(--kr-sp-6);
  margin-bottom: var(--kr-sp-4);
  border-radius: var(--kr-r-md);
  background: var(--kr-bg-elevated);
  border: 1px solid var(--kr-border);
}

/* ── Page header ───────────────────────────────────────── */
.dash-page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--kr-sp-9);
}

.dash-h1 {
  font-size: var(--kr-fs-2xl);
  font-weight: 700;
  letter-spacing: -0.02em;
}

.dash-meta {
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-base);
  margin-top: var(--kr-sp-2);
}

/* ── Icon button ───────────────────────────────────────── */
.dash-icon-btn {
  background: none;
  border: 1px solid var(--kr-border-medium);
  border-radius: var(--kr-r-sm);
  padding: var(--kr-sp-2) var(--kr-sp-4);
  color: var(--kr-text-tertiary);
  cursor: pointer;
  display: flex;
  align-items: center;
  font-size: var(--kr-fs-sm);
  transition: background 0.15s, border-color 0.15s;
}

/* ── Search bar ────────────────────────────────────────── */
.dash-search-wrap {
  position: relative;
  margin-bottom: var(--kr-sp-6);
}

.dash-search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--kr-text-ghost);
  pointer-events: none;
}

.dash-search-input {
  background: var(--kr-bg-hover);
  border: 1px solid var(--kr-border-strong);
  border-radius: var(--kr-r-md);
  padding: var(--kr-sp-4) var(--kr-sp-6) var(--kr-sp-4) 32px;
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-base);
  font-family: inherit;
  width: 100%;
  box-sizing: border-box;
}

.dash-search-clear {
  position: absolute;
  right: var(--kr-sp-4);
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kr-text-dim);
  padding: 2px;
}

/* ── Group header ──────────────────────────────────────── */
.dash-group-btn {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  margin: var(--kr-sp-8) 0 var(--kr-sp-3);
  padding: var(--kr-sp-2) 0;
  cursor: pointer;
  user-select: none;
  background: none;
  border: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
}

.dash-group-btn[data-first="true"] {
  margin-top: 0;
}

.dash-group-bar {
  width: 3px;
  height: 14px;
  border-radius: 2px;
}

.dash-group-label {
  font-size: var(--kr-fs-sm);
  font-weight: 800;
  letter-spacing: 0.03em;
}

.dash-group-count {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-tertiary);
}

.dash-group-line {
  flex: 1;
  height: 1px;
}

/* ── Project card ──────────────────────────────────────── */
.dash-card {
  background: var(--kr-bg-surface);
  border: 1px solid var(--kr-border);
  border-radius: var(--kr-r-xl);
  margin-bottom: var(--kr-sp-5);
  box-shadow: var(--kr-shadow-sm);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.dash-card[data-active="true"] {
  border-color: var(--kr-border-strong);
}

.dash-card-header {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-6);
  padding: var(--kr-sp-8) var(--kr-sp-9);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font: inherit;
  color: inherit;
  text-align: left;
  border-radius: var(--kr-r-xl);
  transition: background 0.15s;
}

.dash-card-body {
  padding: 0 var(--kr-sp-9) var(--kr-sp-9);
  border-top: 1px solid var(--kr-border-ghost);
  overflow-x: hidden;
}

.dash-proj-name {
  font-weight: 600;
  font-size: var(--kr-fs-lg);
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-2);
}

/* 0.8.3 — discreet inline spinner next to the project name when an audit
 * or validation is running. Color matches the accent so it reads as
 * "this project is busy" rather than a destructive / warning state. */
.dash-proj-name-spinner {
  color: var(--kr-accent-ink);
  flex-shrink: 0;
}

.dash-proj-path {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-tertiary);
  font-family: var(--kr-font-mono);
  margin-top: 2px;
}

.dash-proj-meta {
  display: flex;
  gap: var(--kr-sp-7);
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  flex-shrink: 0;
  /* Allow internal items to shrink on narrow viewports — without this
   * `min-width: 0` the meta pills (project counts, MCP counts, etc.)
   * push past the 375 px viewport edge and force horizontal scroll on
   * mobile. Tya's audit on 2026-05-09 measured a 36 px overflow on
   * Projets at 375×667. */
  min-width: 0;
}

.dash-meta-item {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
  min-width: 0;
}

/* Mobile (coarse pointer + narrow viewport): wrap meta items instead
 * of forcing horizontal scroll. Same guard as `dash-proj-meta.flex-wrap`
 * applied conditionally in the JSX, but expressed in CSS for the
 * server-side default. */
@media (max-width: 480px) {
  .dash-proj-meta { flex-wrap: wrap; gap: var(--kr-sp-3); }
}

/* ── Badges ────────────────────────────────────────────── */
.dash-badge-green {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  background: rgba(var(--kr-success-rgb), 0.12);
  /* 2026-05-11: switched from `rgba(accent, 0.7)` to solid
   * `--kr-success` (5.1:1 on light, dark token already has higher
   * alpha after the 2026-05-10 bump) — axe flagged the alpha variant
   * at 2.82:1 on white. Solid colour gives a deterministic ratio
   * regardless of background blend. */
  color: var(--kr-success);
  border: 1px solid rgba(var(--kr-success-rgb), 0.2);
}

.dash-badge-orange {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  background: rgba(var(--kr-warning-rgb), 0.12);
  /* Use `--kr-warning-soft` (#a16207 = 5.7:1 on white) instead of the
   * regular `--kr-warning-amber` (4.5:1 borderline). Axe measured 4.49
   * which trips its 4.5 cutoff. */
  color: var(--kr-warning-soft);
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.25);
}

.dash-badge-gray {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  background: var(--kr-bg-hover);
  color: var(--kr-text-tertiary);
  border: 1px solid var(--kr-border-ghost);
}

.dash-badge-drift {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  background: rgba(var(--kr-warning-rgb), 0.1);
  color: var(--kr-warning-soft);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.2);
  cursor: pointer;
}

/* Tech-debt badge (0.8.1): warning-toned chip on the project card.
   Same warning palette as the drift badge so visually they read as
   "things to look at" — distinct from the green/gray "ok" badges.
   Click handler opens the project docs viewer in ProjectCard. */
.dash-badge-tech-debt {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  background: rgba(var(--kr-warning-rgb), 0.12);
  color: var(--kr-warning-soft);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.25);
  cursor: pointer;
  transition: background 0.1s;
}

.dash-badge-tech-debt:hover {
  background: rgba(var(--kr-warning-rgb), 0.2);
}

/* Docs section state banners (0.8.1): shown inside the AiDocViewer
   when audit_status isn't yet Validated. Tone matches the message
   urgency — info for "you can audit", warn for "validate to finalize". */
.dash-doc-banner {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-3) var(--kr-sp-5);
  border-radius: var(--kr-r-md);
  font-size: var(--kr-fs-xs);
  line-height: 1.4;
}

.dash-doc-banner-info {
  background: rgba(var(--kr-accent-rgb), 0.08);
  color: var(--kr-accent-ink);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.2);
}

.dash-doc-banner-warn {
  background: rgba(var(--kr-warning-rgb), 0.1);
  color: var(--kr-warning-soft);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.25);
}

.dash-drift-update-btn {
  padding: 2px var(--kr-sp-4);
  border-radius: var(--kr-r-sm);
  font-size: var(--kr-fs-xs);
  font-weight: 500;
  background: rgba(var(--kr-warning-rgb), 0.1);
  color: var(--kr-warning-soft);
  border: 1px solid rgba(var(--kr-warning-rgb), 0.2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.dash-audit-date {
  font-size: var(--kr-fs-2xs);
  color: var(--kr-text-faint);
}

/* ── Sections ──────────────────────────────────────────── */
.dash-section {
  margin-top: var(--kr-sp-7);
}

.dash-collapsible-header {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-4);
  margin-bottom: var(--kr-sp-3);
  color: var(--kr-text-secondary);
  font-size: var(--kr-fs-base);
  cursor: pointer;
  user-select: none;
  padding: var(--kr-sp-2) 0;
  border-radius: var(--kr-r-sm);
  background: none;
  border: none;
  width: 100%;
  font: inherit;
  text-align: left;
}

.dash-section-title {
  font-weight: 600;
}

.dash-count {
  font-size: var(--kr-fs-xs);
  padding: 1px var(--kr-sp-3);
  border-radius: var(--kr-r-xl);
  background: var(--kr-bg-hover-strong);
  color: var(--kr-text-muted);
}

/* ── Row (list item in section) ────────────────────────── */
.dash-row {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-5);
  padding: var(--kr-sp-4) var(--kr-sp-6);
  border-radius: var(--kr-r-md);
  background: var(--kr-bg-subtle);
  margin-bottom: var(--kr-sp-2);
}

/* ── Status dot ────────────────────────────────────────── */
.dash-dot {
  width: 7px;
  height: 7px;
  border-radius: var(--kr-r-full);
  flex-shrink: 0;
}

.dash-dot[data-on="true"] {
  background: var(--kr-success);
  box-shadow: 0 0 6px rgba(var(--kr-success-rgb), 0.4);
}

.dash-dot[data-on="false"] {
  background: var(--kr-bg-selected);
}

/* ── Visually hidden (accessible label) ────────────────── */
.dash-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ── Row item details ──────────────────────────────────── */
.dash-row-name {
  font-weight: 600;
  font-size: var(--kr-fs-base);
}

.dash-row-detail {
  margin-left: var(--kr-sp-4);
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
}

.dash-row-detail-sm {
  margin-left: var(--kr-sp-3);
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-muted);
}

.dash-row-global-tag {
  margin-left: var(--kr-sp-2);
  font-size: var(--kr-fs-2xs);
  color: var(--kr-accent);
}

.dash-row-empty {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-tertiary);
  padding: var(--kr-sp-2) 0;
}

/* ── MCP "add plugins first" hint ──────────────────────────── */
/* Shown on projects with 0 MCPs that haven't been audited yet. The hint
   reuses the tour's pulse vocabulary so it stays visually consistent with
   the guided onboarding. Stops pulsing once the user adds any plugin or
   after the audit completes. */
.dash-mcp-hint {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid rgba(var(--kr-accent-rgb), 0.35);
  border-radius: var(--kr-r-md);
  background: rgba(var(--kr-accent-rgb), 0.06);
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-primary);
  animation: dash-mcp-hint-pulse 1.8s ease-in-out infinite;
}

.dash-mcp-hint-icon {
  flex-shrink: 0;
  color: var(--kr-accent);
}

.dash-mcp-hint-text {
  flex: 1;
  min-width: 0;
}

.dash-mcp-hint-cta {
  flex-shrink: 0;
  background: rgba(var(--kr-accent-rgb), 0.15);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.4);
  color: var(--kr-accent);
  border-radius: var(--kr-r-sm);
  padding: 3px 10px;
  font-family: inherit;
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.dash-mcp-hint-cta:hover {
  background: rgba(var(--kr-accent-rgb), 0.25);
}

@keyframes dash-mcp-hint-pulse {
  0%   { border-color: rgba(var(--kr-accent-rgb), 0.35); box-shadow: 0 0 0 0 rgba(var(--kr-accent-rgb), 0.2); }
  50%  { border-color: rgba(var(--kr-accent-rgb), 0.7);  box-shadow: 0 0 0 4px rgba(var(--kr-accent-rgb), 0.06); }
  100% { border-color: rgba(var(--kr-accent-rgb), 0.35); box-shadow: 0 0 0 0 rgba(var(--kr-accent-rgb), 0.2); }
}

@media (prefers-reduced-motion: reduce) {
  .dash-mcp-hint { animation: none; }
}

.dash-row-disc-title {
  font-weight: 600;
  font-size: var(--kr-fs-base);
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-2);
}

.dash-row-disc-meta {
  margin-left: var(--kr-sp-4);
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
}

/* ── Audit context area ────────────────────────────────── */
.dash-audit-pad {
  padding: var(--kr-sp-4) 0;
}

.dash-audit-warning {
  font-size: var(--kr-fs-sm);
  color: rgba(var(--kr-warning-rgb), 0.7);
  margin: 0 0 var(--kr-sp-4);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
}

.dash-audit-hint {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-tertiary);
  margin: 0 0 var(--kr-sp-4);
}

.dash-audit-hint-accent {
  font-size: var(--kr-fs-xs);
  color: rgba(var(--kr-accent-rgb), 0.5);
  margin: 0 0 var(--kr-sp-4);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
}

.dash-briefing-done {
  font-size: var(--kr-fs-xs);
  color: rgba(var(--kr-info-rgb), 0.6);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
}

.dash-briefing-hint {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-faint);
}

.dash-audit-desc {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-tertiary);
  margin: 0 0 var(--kr-sp-4);
}

/* 0.8.2 — Tracker-MCP hint banner. Shown above the audit launcher when
   the project has no GitHub/GitLab/Jira/Linear MCP wired. Encouraging
   tone (not warning): subtle border, no red, dismissible per project. */
.dash-tracker-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  margin: 0 0 var(--kr-sp-4);
  background: rgba(var(--kr-accent-rgb), 0.06);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.25);
  border-radius: var(--kr-radius-sm);
  font-size: var(--kr-fs-xs);
  line-height: 1.4;
}
.dash-tracker-hint-text {
  flex: 1;
  color: var(--kr-text-secondary);
}
.dash-tracker-hint-actions {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
  flex-shrink: 0;
}
.dash-tracker-hint-dismiss {
  opacity: 0.6;
  padding: 2px 6px;
}
.dash-tracker-hint-dismiss:hover {
  opacity: 1;
}

.dash-audit-step {
  font-size: var(--kr-fs-base);
  color: var(--kr-text-secondary);
  flex: 1;
}

.dash-audit-validated {
  padding: var(--kr-sp-2) 0;
  font-size: var(--kr-fs-sm);
  color: rgba(var(--kr-accent-rgb), 0.5);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
  flex-wrap: wrap;
}

/* 0.8.3 — quick-access CTA next to the post-audit "Validated" badge.
 * Discrete inline button (not a primary CTA) so it doesn't compete with
 * the validation chip itself. */
.dash-audit-view-tds-btn {
  margin-left: var(--kr-sp-2);
  padding: 2px 8px;
  font-size: var(--kr-fs-xs);
  background: var(--kr-bg-raised);
  border: 1px solid var(--kr-border-soft);
  border-radius: 4px;
  color: var(--kr-text-secondary);
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
}

.dash-audit-view-tds-btn:hover {
  background: var(--kr-bg-elevated);
  color: var(--kr-text-primary);
}

/* ── Progress bar ──────────────────────────────────────── */
.dash-progress-track {
  height: 3px;
  background: var(--kr-bg-hover-strong);
  border-radius: 2px;
  overflow: hidden;
}

.dash-progress-fill {
  height: 100%;
  background: var(--kr-accent);
  border-radius: 2px;
  transition: width 0.5s ease;
}

/* ── Audit select ──────────────────────────────────────── */
.dash-audit-select {
  width: auto;
  min-width: 140px;
  padding: var(--kr-sp-3) 32px var(--kr-sp-3) var(--kr-sp-5);
  background: var(--kr-bg-input);
  border: 1px solid var(--kr-border-strong);
  border-radius: var(--kr-r-lg);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-base);
  font-family: inherit;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

/* ── Danger button ─────────────────────────────────────── */
.dash-danger-btn {
  background: rgba(var(--kr-error-rgb), 0.08);
  border: 1px solid rgba(var(--kr-error-rgb), 0.2);
  border-radius: var(--kr-r-md);
  padding: var(--kr-sp-3) var(--kr-sp-7);
  color: var(--kr-error);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  font-size: var(--kr-fs-base);
  font-family: inherit;
}

/* ── Delete confirmation area ──────────────────────────── */
.dash-delete-zone {
  margin-top: var(--kr-sp-6);
  padding-top: var(--kr-sp-6);
  border-top: 1px solid var(--kr-border-ghost);
}

.dash-delete-panel {
  background: rgba(var(--kr-error-rgb), 0.08);
  border: 1px solid rgba(var(--kr-error-rgb), 0.2);
  border-radius: var(--kr-r-lg);
  padding: var(--kr-sp-5);
}

.dash-delete-warn {
  font-size: var(--kr-fs-sm);
  color: var(--kr-error);
  margin-bottom: var(--kr-sp-4);
}

.dash-delete-label {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-tertiary);
  margin-bottom: var(--kr-sp-3);
}

.dash-delete-input {
  width: 100%;
  padding: var(--kr-sp-3) var(--kr-sp-5);
  border-radius: var(--kr-r-md);
  border: 1px solid rgba(var(--kr-error-rgb), 0.3);
  background: var(--kr-bg-raised);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-base);
  font-family: inherit;
  box-sizing: border-box;
  margin-bottom: var(--kr-sp-4);
}

.dash-soft-delete-btn {
  font-size: var(--kr-fs-base);
  padding: var(--kr-sp-3) var(--kr-sp-6);
  background: var(--kr-bg-hover-strong);
  border: 1px solid var(--kr-border-medium);
  color: var(--kr-text-secondary);
  border-radius: var(--kr-r-md);
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
}

/* ── Show more / collapse buttons ──────────────────────── */
.dash-show-more-btn {
  display: block;
  width: 100%;
  padding: var(--kr-sp-5) 0;
  background: rgba(var(--kr-accent-rgb), 0.04);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.1);
  border-radius: var(--kr-r-lg);
  color: var(--kr-accent);
  font-size: var(--kr-fs-base);
  cursor: pointer;
  font-family: inherit;
  margin-top: var(--kr-sp-4);
}

.dash-collapse-btn {
  display: block;
  width: 100%;
  padding: var(--kr-sp-4) 0;
  background: transparent;
  border: 1px solid var(--kr-border-light);
  border-radius: var(--kr-r-lg);
  color: var(--kr-text-dim);
  font-size: var(--kr-fs-sm);
  cursor: pointer;
  font-family: inherit;
  margin-top: var(--kr-sp-4);
}

/* ── Empty state ───────────────────────────────────────── */
.dash-empty {
  text-align: center;
  padding: 40px;
}

.dash-empty-text {
  color: var(--kr-text-muted);
  font-size: var(--kr-fs-md);
}

/* ── Modal overlay ─────────────────────────────────────── */
.dash-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--kr-bg-overlay);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.dash-modal {
  background: var(--kr-bg-elevated);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.15);
  border-radius: var(--kr-r-2xl);
  padding: var(--kr-sp-10);
  width: 480px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
}

.dash-modal[data-mobile="true"] {
  padding: var(--kr-sp-8);
  width: 95vw;
}

.dash-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--kr-sp-8);
}

.dash-modal-title {
  margin: 0;
  color: var(--kr-accent);
  font-size: var(--kr-sp-8);
}

.dash-modal-close {
  background: none;
  border: none;
  color: var(--kr-text-tertiary);
  cursor: pointer;
}

/* ── Tab switcher (bootstrap/clone) ────────────────────── */
.dash-tab-bar {
  display: flex;
  margin-bottom: var(--kr-sp-8);
  border-radius: var(--kr-r-lg);
  overflow: hidden;
  border: 1px solid var(--kr-border-medium);
}

.dash-tab {
  flex: 1;
  padding: var(--kr-sp-4) var(--kr-sp-6);
  border: none;
  font-size: var(--kr-fs-md);
  font-family: inherit;
  cursor: pointer;
  background: transparent;
  color: var(--kr-text-tertiary);
}

.dash-tab[data-active="true"] {
  background: rgba(var(--kr-accent-rgb), 0.15);
  color: var(--kr-accent);
}

.dash-tab + .dash-tab {
  border-left: 1px solid var(--kr-border-medium);
}

/* ── Form fields ───────────────────────────────────────── */
.dash-field {
  display: block;
  margin-bottom: var(--kr-sp-6);
}

.dash-field-label {
  font-size: var(--kr-fs-base);
  color: var(--kr-text-secondary);
  display: block;
  margin-bottom: var(--kr-sp-2);
}

.dash-field-input {
  width: 100%;
  padding: var(--kr-sp-4) var(--kr-sp-6);
  border-radius: var(--kr-r-md);
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-raised);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-lg);
  font-family: inherit;
  box-sizing: border-box;
}

.dash-field-textarea {
  width: 100%;
  padding: var(--kr-sp-4) var(--kr-sp-6);
  border-radius: var(--kr-r-md);
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-raised);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-md);
  font-family: inherit;
  resize: vertical;
  box-sizing: border-box;
}

/* ── MCP chip selector ─────────────────────────────────── */
.dash-mcp-selector {
  margin-bottom: var(--kr-sp-8);
}

.dash-mcp-label {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  margin-bottom: var(--kr-sp-3);
}

.dash-mcp-count {
  font-size: var(--kr-fs-xs);
  color: var(--kr-accent);
}

.dash-mcp-chip {
  padding: 3px var(--kr-sp-4);
  border-radius: var(--kr-r-xl);
  font-size: var(--kr-fs-xs);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 3px;
  transition: all 0.15s;
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-hover);
  color: var(--kr-text-tertiary);
  font-weight: 400;
}

.dash-mcp-chip[data-selected="true"] {
  border-color: rgba(var(--kr-cyan-rgb), 0.4);
  background: rgba(var(--kr-cyan-rgb), 0.1);
  color: var(--kr-cyan);
  font-weight: 600;
}

/* ── Submit buttons ────────────────────────────────────── */
.dash-submit-btn {
  width: 100%;
  padding: var(--kr-sp-5) var(--kr-sp-8);
  border-radius: var(--kr-r-lg);
  border: none;
  background: var(--kr-accent);
  color: var(--kr-bg-base);
  font-size: var(--kr-fs-lg);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kr-sp-4);
}

.dash-submit-btn:disabled {
  background: rgba(var(--kr-accent-rgb), 0.15);
  color: rgba(var(--kr-accent-rgb), 0.4);
  cursor: wait;
}

.dash-discover-btn {
  padding: var(--kr-sp-5) var(--kr-sp-8);
  border-radius: var(--kr-r-lg);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.3);
  background: transparent;
  color: var(--kr-accent);
  font-size: var(--kr-fs-md);
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  white-space: nowrap;
}

.dash-discover-btn:disabled {
  cursor: wait;
}

/* ── Source toggle chips ───────────────────────────────── */
.dash-source-label {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  margin-bottom: var(--kr-sp-3);
}

.dash-source-chip {
  padding: var(--kr-sp-2) var(--kr-sp-5);
  border-radius: var(--kr-r-2xl);
  font-size: var(--kr-fs-sm);
  font-family: inherit;
  border: 1px solid var(--kr-border-medium);
  background: transparent;
  color: var(--kr-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: var(--kr-sp-2);
}

.dash-source-chip[data-active="true"] {
  border-color: rgba(var(--kr-accent-rgb), 0.4);
  background: rgba(var(--kr-accent-rgb), 0.1);
  color: var(--kr-accent);
}

/* ── Discover error ────────────────────────────────────── */
.dash-discover-error {
  padding: var(--kr-sp-5);
  border-radius: var(--kr-r-lg);
  background: rgba(var(--kr-error-rgb), 0.08);
  border: 1px solid rgba(var(--kr-error-rgb), 0.2);
  font-size: var(--kr-fs-base);
  color: var(--kr-error-soft);
  margin-bottom: var(--kr-sp-6);
}

.dash-discover-summary {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  margin-bottom: var(--kr-sp-4);
}

/* ── Repo search input ─────────────────────────────────── */
.dash-repo-search {
  width: 100%;
  padding: var(--kr-sp-3) var(--kr-sp-5);
  border-radius: var(--kr-r-md);
  border: 1px solid var(--kr-border-medium);
  background: var(--kr-bg-hover);
  color: var(--kr-text-primary);
  font-size: var(--kr-fs-base);
  font-family: inherit;
  box-sizing: border-box;
}

/* ── Discovered repo list ──────────────────────────────── */
.dash-repo-list {
  max-height: 300px;
  overflow-y: auto;
  border-radius: var(--kr-r-lg);
  border: 1px solid var(--kr-border-light);
}

.dash-repo-item {
  padding: var(--kr-sp-5) var(--kr-sp-6);
  border-bottom: 1px solid var(--kr-border-ghost);
  display: flex;
  align-items: center;
  gap: var(--kr-sp-5);
}

.dash-repo-name {
  font-size: var(--kr-fs-md);
  color: var(--kr-text-primary);
  font-weight: 500;
}

.dash-repo-lang {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  margin-left: var(--kr-sp-4);
}

.dash-repo-stars {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  margin-left: var(--kr-sp-3);
}

.dash-repo-desc {
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-muted);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.dash-repo-cloned {
  font-size: var(--kr-fs-sm);
  color: rgba(var(--kr-accent-rgb), 0.5);
  white-space: nowrap;
}

.dash-repo-clone-btn {
  padding: var(--kr-sp-2) var(--kr-sp-6);
  border-radius: var(--kr-r-md);
  border: 1px solid rgba(var(--kr-accent-rgb), 0.3);
  background: transparent;
  color: var(--kr-accent);
  font-size: var(--kr-fs-base);
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}

.dash-repo-clone-btn:disabled {
  cursor: wait;
}

/* ── Briefing button variants ──────────────────────────── */
.dash-btn-info {
  font-size: var(--kr-fs-sm);
  gap: var(--kr-sp-2);
  color: var(--kr-info);
  border-color: rgba(var(--kr-info-rgb), 0.2);
}

.dash-btn-accent-border {
  font-size: var(--kr-fs-sm);
  gap: var(--kr-sp-2);
  color: var(--kr-accent);
  border-color: rgba(var(--kr-accent-rgb), 0.2);
}

.dash-btn-cancel {
  font-size: var(--kr-fs-sm);
  gap: var(--kr-sp-2);
  color: var(--kr-error);
  border-color: rgba(var(--kr-error-rgb), 0.3);
  padding: var(--kr-sp-2) var(--kr-sp-5);
}

/* keyframes spin defined globally in reset.css */

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

/* ── Bootstrap file upload ─────────────────────────── */
.dash-drop-zone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-6);
  border: 2px dashed var(--kr-border);
  border-radius: var(--kr-r-lg);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dash-drop-zone:hover,
.dash-drop-zone[data-dragover="true"] {
  border-color: var(--kr-accent);
  background: rgba(var(--kr-accent-rgb), 0.04);
}
.dash-file-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--kr-sp-2);
  margin-top: var(--kr-sp-3);
}
.dash-file-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 2px var(--kr-sp-3);
  border-radius: var(--kr-r-sm);
  background: var(--kr-bg-hover);
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-secondary);
}
.dash-file-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--kr-text-faint);
  font-size: 14px;
  padding: 0 2px;
  line-height: 1;
}
.dash-file-remove:hover { color: var(--kr-error); }

/* ── Bootstrap options ─────────────────────────────── */
.dash-bootstrap-options {
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-3);
}
.dash-bootstrap-option {
  display: flex;
  align-items: center;
  gap: var(--kr-sp-3);
  cursor: pointer;
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-secondary);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  border-radius: var(--kr-r-md);
  border: 1px solid var(--kr-border);
  background: var(--kr-bg-subtle);
  transition: border-color 0.15s;
}
.dash-bootstrap-option:hover {
  border-color: var(--kr-accent-border);
}
.dash-bootstrap-option input[type="checkbox"] {
  accent-color: var(--kr-accent);
}

/* ── Docs migration banner (legacy ai/ → docs/) ───────────────────────
   Surfaces inside ProjectCard body when `proj.needs_docs_migration`
   is true. Warning amber tint to set it apart from success/error
   patterns elsewhere — operator action recommended, not blocking. */
.dash-migration-banner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--kr-sp-6);
  align-items: start;
  padding: var(--kr-sp-6) var(--kr-sp-7);
  margin: var(--kr-sp-6) 0;
  background: rgba(var(--kr-warning-amber-rgb), 0.06);
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.25);
  border-radius: var(--kr-r-md);
}

.dash-migration-icon {
  color: var(--kr-warning-amber);
  margin-top: 2px;
}

.dash-migration-content {
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-3);
  min-width: 0;
}

.dash-migration-title {
  font-weight: 600;
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-primary);
}

.dash-migration-desc {
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-secondary);
  line-height: 1.45;
}

.dash-migration-checkbox {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-tertiary);
  cursor: pointer;
}

.dash-migration-checkbox input[type="checkbox"] {
  accent-color: var(--kr-warning-amber);
}

.dash-migration-error {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  font-size: var(--kr-fs-xs);
  color: var(--kr-error-soft);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  background: rgba(var(--kr-error-rgb), 0.08);
  border: 1px solid rgba(var(--kr-error-rgb), 0.2);
  border-radius: var(--kr-r-sm);
}

/* In-flight progress row — visible only while the API request is open. */
.dash-migration-progress {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-secondary);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  background: var(--kr-bg-hover);
  border: 1px solid var(--kr-border-light);
  border-radius: var(--kr-r-sm);
}

/* Brief success row held for ~1.6 s before refetch removes the banner.
   Green to leave no doubt the migration went through. */
.dash-migration-success {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  color: var(--kr-success);
  padding: var(--kr-sp-3) var(--kr-sp-4);
  background: rgba(var(--kr-success-rgb), 0.1);
  border: 1px solid rgba(var(--kr-success-rgb), 0.3);
  border-radius: var(--kr-r-sm);
}

/* Success state on the whole banner — switches the icon + border tint
   to green so the eye catches the change without reading. */
.dash-migration-banner[data-state="success"] {
  background: rgba(var(--kr-success-rgb), 0.06);
  border-color: rgba(var(--kr-success-rgb), 0.3);
}
.dash-migration-banner[data-state="success"] .dash-migration-icon {
  color: var(--kr-success);
}

.dash-migration-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-3) var(--kr-sp-6);
  background: rgba(var(--kr-warning-amber-rgb), 0.12);
  border: 1px solid rgba(var(--kr-warning-amber-rgb), 0.4);
  border-radius: var(--kr-r-sm);
  color: var(--kr-warning-amber);
  font-size: var(--kr-fs-xs);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  align-self: center;
}

.dash-migration-btn:hover:not(:disabled) {
  background: rgba(var(--kr-warning-amber-rgb), 0.2);
}

.dash-migration-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* 0.8.4 (#285) — Désagentified briefing form (inline, no modal). */
.briefing-form {
  display: flex;
  flex-direction: column;
  gap: var(--kr-sp-3);
  padding: var(--kr-sp-4);
  margin: var(--kr-sp-4) 0;
  background: var(--kr-bg-raised);
  border: 1px solid var(--kr-border-soft);
  border-radius: 8px;
}

.briefing-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.briefing-form-header h3 {
  margin: 0;
  font-size: var(--kr-fs-md);
  color: var(--kr-text-primary);
}

.briefing-form-close {
  background: transparent;
  border: none;
  color: var(--kr-text-faint);
  cursor: pointer;
  padding: 2px;
}

.briefing-form-intro {
  margin: 0;
  font-size: var(--kr-fs-xs);
  color: var(--kr-text-secondary);
}

.briefing-form label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: var(--kr-fs-xs);
}

.briefing-form-q {
  font-weight: 600;
  color: var(--kr-text-primary);
}

.briefing-form textarea {
  background: var(--kr-bg-elevated);
  border: 1px solid var(--kr-border-soft);
  border-radius: 4px;
  padding: 6px 8px;
  font-family: inherit;
  font-size: var(--kr-fs-sm);
  color: var(--kr-text-primary);
  resize: vertical;
}

.briefing-form textarea:focus {
  outline: 1px solid var(--kr-accent-ink);
  border-color: transparent;
}

.briefing-form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--kr-sp-2);
  margin-top: var(--kr-sp-2);
}

.briefing-form-actions button {
  padding: 6px 14px;
  font-size: var(--kr-fs-xs);
  background: var(--kr-bg-elevated);
  border: 1px solid var(--kr-border-soft);
  border-radius: 4px;
  cursor: pointer;
  color: var(--kr-text-secondary);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.briefing-form-submit {
  background: var(--kr-accent-bg) !important;
  border-color: var(--kr-accent-ink) !important;
  color: var(--kr-accent-ink) !important;
  font-weight: 600;
}
