/* MemPacer-local CSS overrides.
 *
 * Editorial theme from components_pacer covers the design-system surface.
 * Anything MemPacer-specific that can't be generalized into the gem lives
 * here: ActiveContextBanner, StatusPill, OptOutBanner, chrome shell
 * (top bar + section-nav container + main), and any product-shell tweaks
 * that aren't worth a theme token.
 *
 * Kept intentionally minimal. If a rule here starts to look generic, that's
 * a signal it should move into components_pacer instead. */

:root {
  --mp-chrome-max-width: 1440px;
}

/* ======================================================================
   Chrome — top bar
   Logo + project picker, right side: StatusPill + ⌘K + avatar.
   28px h-pad, 14px v-pad, 1px bottom hairline.
   ====================================================================== */

.mp-topbar {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.mp-topbar__inner {
  max-width: var(--mp-chrome-max-width);
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
}

.mp-topbar__brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--color-text-primary);
  text-decoration: none;
}

.mp-topbar__brand-mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  background: var(--color-text-primary);
  color: var(--color-background);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold, 600);
  font-size: 12px;
  border-radius: var(--radius-sm, 2px);
}

.mp-topbar__brand-name {
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold, 600);
  font-size: 14px;
  letter-spacing: -0.01em;
}

.mp-topbar__project-picker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  font-size: 13px;
  color: var(--color-text-primary);
  background: transparent;
}

.mp-topbar__project-logo {
  font-size: 10px;
  color: var(--color-text-secondary);
}

.mp-topbar__right {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.mp-topbar__cmdk {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  padding: 2px 6px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
}

.mp-topbar__avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--color-text-primary);
  color: var(--color-background);
  font-family: var(--font-family-sans);
  font-size: 11px;
  font-weight: var(--font-weight-semibold, 600);
  border: none;
  cursor: pointer;
}

/* ======================================================================
   Chrome — section-nav bar
   Container for ComponentsPacer::UI::SectionNav when in a project.
   ====================================================================== */

.mp-section-nav-bar {
  background: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.mp-section-nav-bar__inner {
  max-width: var(--mp-chrome-max-width);
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.mp-section-nav-bar__stack {
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.4px;
  color: var(--color-text-tertiary);
  text-transform: lowercase;
  white-space: nowrap;
}

.mp-section-nav-bar .cp-section-nav {
  border-bottom: none; /* container already owns the hairline */
  flex: 1;
}

/* ======================================================================
   Chrome — main
   Body container below chrome bars + banner. 36px h-pad, 24px v-pad.
   ====================================================================== */

.mp-main {
  background: var(--color-background);
  min-height: calc(100svh - 56px); /* rough; adjusts with banner present */
}

.mp-main__inner {
  max-width: var(--mp-chrome-max-width);
  margin: 0 auto;
  padding: 24px 36px;
}

/* ======================================================================
   ActiveContextBanner
   Dark bar between section nav and page head. ● dot, mono meta,
   right-aligned "↻ Re-derive from HEAD" action.
   ====================================================================== */

.mp-active-context-banner {
  background: var(--color-chrome-bg, var(--color-text-primary));
  color: var(--color-chrome-text, var(--color-background));
}

.mp-active-context-banner__inner {
  max-width: var(--mp-chrome-max-width, 1440px);
  margin: 0 auto;
  padding: 10px 28px;
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem; /* 11px */
}

.mp-active-context-banner__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-banner-dot, #6ccf8e);
  flex-shrink: 0;
}

.mp-active-context-banner__label {
  font-weight: var(--font-weight-semibold, 600);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.mp-active-context-banner__meta {
  color: var(--color-chrome-text, var(--color-background));
  opacity: 0.7;
}

.mp-active-context-banner__redrive-form {
  margin-left: auto;
  display: inline-flex;
}

.mp-active-context-banner__redrive {
  background: transparent;
  border: 1px solid transparent;
  color: var(--color-chrome-text, var(--color-background));
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.3px;
  padding: 4px 8px;
  border-radius: var(--radius-sm, 2px);
  cursor: pointer;
  opacity: 0.7;
  transition: opacity var(--motion-micro, 150ms) var(--ease-natural, ease);
}

.mp-active-context-banner__redrive:hover {
  opacity: 1;
}

/* ======================================================================
   StatusPill
   Top-right chrome pill "● N · N" (candidates · opt-outs).
   Coral dot when opt_outs > 0 to signal a blocker.
   ====================================================================== */

.mp-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 4px 10px;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.3px;
  color: var(--color-text-primary);
  background: transparent;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  text-decoration: none;
  line-height: 1.2;
}

.mp-status-pill--clickable {
  cursor: pointer;
}

.mp-status-pill--clickable:hover {
  background: var(--color-surface-hover);
}

.mp-status-pill__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-text-secondary);
  flex-shrink: 0;
}

.mp-status-pill__dot--warn {
  background: var(--color-accent, var(--mp-warn, #c5623a));
}

.mp-status-pill__count {
  font-weight: var(--font-weight-semibold, 600);
}

.mp-status-pill__sep {
  color: var(--color-text-tertiary);
}

/* ======================================================================
   OptOutBanner
   Full-width coral card. ▲ icon, title + count, body, inline Why:,
   right-aligned actions slot.
   ====================================================================== */

.mp-opt-out-banner {
  background: var(--mp-warn-soft, #fbeadf);
  border: 1px solid var(--mp-warn-line, #e8b79a);
  border-radius: var(--radius-md, 4px);
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.mp-opt-out-banner__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--mp-warn, #c5623a);
  color: var(--mp-paper, #fbfaf7);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  line-height: 1;
  flex-shrink: 0;
}

.mp-opt-out-banner__body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-opt-out-banner__title {
  font-size: 0.875rem; /* 14px */
  font-weight: var(--font-weight-semibold, 600);
  color: var(--mp-warn-text, #8b3a1c);
}

.mp-opt-out-banner__count {
  font-family: var(--font-family-mono);
  font-weight: var(--font-weight-medium, 500);
  opacity: 0.8;
}

.mp-opt-out-banner__description {
  margin: 0;
  font-size: 0.8125rem; /* 13px */
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.mp-opt-out-banner__actions {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}

/* ======================================================================
   Project Home (screen 03)
   Metric strip + 2-col body (active-goal card + intent rail).
   ====================================================================== */

.mp-project-home {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.mp-project-home__metrics {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1rem;
  padding: 1.25rem 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.mp-project-home__body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.25rem;
}

.mp-project-home__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.mp-project-home__rail {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.mp-project-home__section-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.mp-project-home__architecture {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 70ch;
}

.mp-project-home__playbooks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-project-home__playbook {
  padding: 0.75rem 1rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: var(--color-surface);
}

.mp-project-home__playbook-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-project-home__playbook-title {
  font-size: 0.875rem;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
}

.mp-project-home__playbook-summary {
  margin: 0.25rem 0 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Active-goal card ─────────────────────────────────────────────────── */

.mp-active-goal-card {
  border: 1.5px solid var(--color-text-primary);
  border-radius: var(--radius-md, 4px);
  background: var(--color-surface);
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-active-goal-card__head {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mp-active-goal-card__meta {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.mp-active-goal-card__title {
  margin: 0.25rem 0 0;
  font-size: 1.5rem;
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.2;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

.mp-active-goal-card__description {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 65ch;
}

.mp-active-goal-card__children {
  list-style: none;
  margin: 0;
  padding: 0.75rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--color-divider);
}

.mp-active-goal-card__child {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.mp-active-goal-card__child-title {
  font-size: 0.875rem;
  color: var(--color-text-primary);
}

/* ── Intent rail ──────────────────────────────────────────────────────── */

.mp-intent-rail__block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-intent-rail__header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
}

.mp-intent-rail__title {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.mp-intent-rail__link {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  letter-spacing: 0.3px;
}

.mp-intent-rail__link:hover {
  color: var(--color-text-primary);
}

.mp-intent-rail__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-intent-rail__item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-intent-rail__item-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-intent-rail__item-title {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.mp-intent-rail__item-body {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.mp-intent-rail__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
}

/* ── Pain → Solution item ─────────────────────────────────────────────── */

.mp-pain-item {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.mp-pain-item__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-pain-item__bullet {
  color: var(--mp-warn, #c5623a);
  font-size: 10px;
  line-height: 1;
}

.mp-pain-item__title {
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium, 500);
  color: var(--color-text-primary);
}

.mp-pain-item__audience {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-pain-item__body {
  margin: 0;
  padding-left: 16px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

.mp-pain-item__solution {
  display: flex;
  align-items: baseline;
  gap: 0.375rem;
  padding-left: 16px;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
}

.mp-pain-item__solution-arrow {
  color: var(--color-text-tertiary);
}

.mp-pain-item__solution-title {
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium, 500);
}

.mp-pain-item__solution-benefit {
  color: var(--color-text-tertiary);
  font-size: 0.75rem;
}

/* Responsive: collapse the rail below 1200px per the Responsive block. */
@media (max-width: 1200px) {
  .mp-project-home__body {
    grid-template-columns: 1fr;
  }

  .mp-project-home__metrics {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.mp-project-home__section {
  display: flex;
  flex-direction: column;
}

/* ======================================================================
   Projects Dashboard (screen 02)
   Filter pills + search + editorial Table with 5-column row.
   ====================================================================== */

.mp-projects-dashboard {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-projects-dashboard__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.mp-projects-dashboard__search {
  position: relative;
  width: 280px;
}

.mp-projects-dashboard__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  font-size: 14px;
}

.mp-projects-dashboard__search-form {
  margin: 0;
}

.mp-projects-dashboard__search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: transparent;
  font-size: 13px;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  outline: none;
  transition: border-color var(--motion-micro, 150ms) var(--ease-natural, ease);
}

.mp-projects-dashboard__search-input::placeholder {
  color: var(--color-text-tertiary);
}

.mp-projects-dashboard__search-input:focus {
  border-color: var(--color-text-primary);
}

.mp-projects-row__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mp-projects-row__project {
  display: flex;
  align-items: center;
  gap: 12px;
}

.mp-projects-row__project-logo {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-text-primary);
  color: var(--color-background);
  font-family: var(--font-family-sans);
  font-size: 13px;
  font-weight: var(--font-weight-semibold, 600);
  border-radius: var(--radius-sm, 2px);
}

.mp-projects-row__project-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp-projects-row__project-name {
  font-size: 14px;
  font-weight: var(--font-weight-semibold, 600);
  color: var(--color-text-primary);
}

.mp-projects-row__project-meta {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.mp-projects-row__project-meta-sep {
  color: var(--color-text-tertiary);
}

.mp-projects-row__goal {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.mp-projects-row__goal-line {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.mp-projects-row__goal-meta {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.mp-projects-row__goal-title {
  font-size: 13px;
  color: var(--color-text-primary);
  line-height: 1.4;
  /* truncate after two lines */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.mp-projects-row__muted {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-projects-row__activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.mp-projects-row__activity-date {
  font-size: 13px;
  color: var(--color-text-primary);
}

.mp-projects-row__activity-meta {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.mp-projects-row__activity-meta--warn {
  color: var(--mp-warn, var(--color-accent));
}

.mp-projects-row__chevron {
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1;
}

/* ======================================================================
   Goal Detail (screen 04)
   2-col layout with sticky codify rail on the right.
   ====================================================================== */

.mp-goal-detail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-goal-detail__meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.mp-goal-detail__meta-text {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.mp-goal-detail__ready-note {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}

.mp-goal-detail__body {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 2.25rem;
  align-items: start;
}

/* 3-col layout when the goal has milestones — spine | main | rail.
   Falls back to the 2-col rule above when the modifier isn't applied. */
.mp-goal-detail__body--with-spine {
  grid-template-columns: 240px minmax(0, 1fr) 380px;
}

.mp-goal-detail__spine-col {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.mp-goal-detail__main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  min-width: 0;
}

.mp-goal-detail__rail {
  position: sticky;
  top: 24px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  min-width: 0;
}

.mp-goal-detail__section {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-goal-detail__section-title {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.mp-goal-detail__subtitle {
  margin: 1rem 0 0.5rem;
  font-family: var(--font-family-mono);
  font-size: 0.625rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mp-goal-detail__prose {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text-secondary);
  max-width: 65ch;
  white-space: pre-line;
}

.mp-goal-detail__scope {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.25rem;
}

.mp-goal-detail__scope-block {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mp-goal-detail__scope-label {
  font-family: var(--font-family-mono);
  font-size: 0.625rem;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mp-goal-detail__scope-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

/* Mono path list — replaces the chip wall.
   One path per line, hairline separator, monospaced.
   Reads as a quiet code-like reference instead of a busy badge cloud. */
.mp-goal-detail__scope-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mp-goal-detail__scope-list li {
  padding: 4px 0;
  border-top: 1px solid var(--color-divider, color-mix(in srgb, currentColor 8%, transparent));
}

.mp-goal-detail__scope-list li:first-child {
  border-top: none;
}

.mp-goal-detail__scope-list code {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text-primary);
  background: transparent;
  padding: 0;
  word-break: break-all;
}

.mp-goal-detail__scope-list--out code {
  color: var(--color-text-secondary);
  text-decoration: line-through;
  text-decoration-color: var(--color-warning-500, var(--color-text-tertiary));
  text-decoration-thickness: 1px;
}

.mp-goal-detail__scope-count {
  margin-left: 0.4rem;
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--color-text-tertiary);
}

.mp-goal-detail__scope-empty {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  margin: 0;
  font-style: italic;
}

.mp-goal-detail__findings {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-goal-detail__finding {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.mp-goal-detail__finding-bullet {
  color: var(--mp-warn, var(--color-accent));
  font-size: 8px;
  padding-top: 8px;
  flex-shrink: 0;
}

.mp-goal-detail__chain {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.mp-goal-detail__chain > li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-goal-detail__chain-label {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
  min-width: 6rem;
}

.mp-goal-detail__chain-link {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-goal-detail__chain-empty {
  font-style: italic;
  color: var(--color-text-tertiary);
  font-size: 0.8125rem;
}

/* ============================================================
   Criteria review — semantic <dl> with hairline rows + ✓/✗.
   Replaces the old chip-and-card stack. Per /ui Surfaces: use the
   lightest separation that works (whitespace + dividers, not cards).
   Per /ui Description Lists: <dt> heavier, <dd> lighter.
   ============================================================ */
.mp-criteria {
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.mp-criteria__row {
  padding: 12px 0;
  border-top: 1px solid var(--color-divider);
}

.mp-criteria__row:first-child {
  border-top: none;
  padding-top: 4px;
}

.mp-criteria__term {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  line-height: 1.4;
  margin: 0;
}

.mp-criteria__mark {
  flex: 0 0 14px;
  font-family: var(--font-family-mono);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  color: var(--color-text-tertiary);
  line-height: 1.3;
}

.mp-criteria__row--met .mp-criteria__mark {
  color: var(--color-text-primary);
}

.mp-criteria__row--unmet .mp-criteria__mark {
  color: var(--color-warning-500, var(--color-text-primary));
}

.mp-criteria__criterion {
  flex: 1;
  text-wrap: pretty;
}

.mp-criteria__evidence {
  margin: 4px 0 0 24px;
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ============================================================
   Work sessions — hairline rows, time + truncated summary inline.
   Long summaries collapse into <details> so a single multi-paragraph
   codify report doesn't dominate the page.
   ============================================================ */
.mp-sessions {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.mp-sessions__row {
  padding: 10px 0;
  border-top: 1px solid var(--color-divider);
}

.mp-sessions__row:first-child {
  border-top: none;
  padding-top: 4px;
}

.mp-sessions__head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.mp-sessions__time {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.2px;
  color: var(--color-text-primary);
}

.mp-sessions__arrow {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
}

.mp-sessions__running {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-warning-500);
  font-weight: 500;
}

.mp-sessions__tests {
  margin-left: auto;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.2px;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.mp-sessions__summary {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  text-wrap: pretty;
}

.mp-sessions__details {
  margin-top: 4px;
}

.mp-sessions__details > summary {
  font-size: 13px;
  color: var(--color-text-secondary);
  line-height: 1.5;
  cursor: pointer;
  list-style: none;
  display: block;
  text-wrap: pretty;
}

.mp-sessions__details > summary::-webkit-details-marker {
  display: none;
}

.mp-sessions__details > summary::after {
  content: " ▾";
  font-family: var(--font-family-mono);
  color: var(--color-text-tertiary);
  font-size: 10px;
  margin-left: 0.25rem;
}

.mp-sessions__details[open] > summary::after {
  content: " ▴";
}

.mp-sessions__full {
  margin: 6px 0 0;
  padding: 0 0 0 10px;
  border-left: 2px solid var(--color-divider);
  font-size: 12.5px;
  color: var(--color-text-primary);
  line-height: 1.55;
  text-wrap: pretty;
  white-space: pre-wrap;
}

/* Section count chip used in section titles like "Work sessions [3]". */
.mp-goal-detail__section-count {
  margin-left: 0.4rem;
  font-family: var(--font-family-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}

.mp-goal-detail__section--reject {
  border-top: 1px solid var(--color-divider);
  padding-top: 1.5rem;
}

.mp-goal-detail__reject-form {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  max-width: 48rem;
}

.mp-goal-detail__reject-input {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: var(--font-family-sans);
  background: var(--color-surface);
  color: var(--color-text-primary);
  resize: vertical;
  outline: none;
}

.mp-goal-detail__reject-input:focus {
  border-color: var(--color-text-primary);
}

/* ── Milestones list ──────────────────────────────────────────────────── */

.mp-goal-milestones {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-goal-milestones__item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  padding: 0.875rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.mp-goal-milestones__item--active {
  border: 1.5px solid var(--color-text-primary);
}

.mp-goal-milestones__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-goal-milestones__title {
  color: var(--color-text-primary);
  text-decoration: none;
  font-weight: var(--font-weight-semibold, 600);
}

.mp-goal-milestones__title:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-goal-milestones__meta {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
  margin-left: auto;
}

.mp-goal-milestones__body {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.5;
}

/* ── Codify rail ──────────────────────────────────────────────────────── */

.mp-codify-rail {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--color-surface);
}

.mp-codify-rail__header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mp-codify-rail__title {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.mp-codify-rail__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  padding: 0 0.375rem;
  height: 1rem;
  font-family: var(--font-family-mono);
  font-size: 0.625rem;
  line-height: 1;
  background: var(--color-text-primary);
  color: var(--color-background);
  border-radius: var(--radius-sm, 2px);
}

.mp-codify-rail__link {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  text-decoration: none;
  margin-left: auto;
  letter-spacing: 0.2px;
}

.mp-codify-rail__link:hover {
  color: var(--color-text-primary);
}

.mp-codify-rail__link--more {
  margin-left: 0;
  padding-top: 0.375rem;
  border-top: 1px solid var(--color-divider);
}

.mp-codify-rail__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.mp-codify-rail__empty {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-tertiary);
  font-family: var(--font-family-mono);
  letter-spacing: 0.2px;
}

.mp-codify-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  padding: 0.625rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  background: var(--color-background);
}

.mp-codify-card__head {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.mp-codify-card__body {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  line-height: 1.4;
}

.mp-codify-card__note {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
  font-style: italic;
}

/* Responsive: collapse the codify rail below 1200px. The spine column
   also unsticks and stacks above main at this breakpoint — the spine
   stays useful as an inline milestone navigator on tablet/mobile. */
@media (max-width: 1200px) {
  .mp-goal-detail__body,
  .mp-goal-detail__body--with-spine {
    grid-template-columns: 1fr;
  }

  .mp-goal-detail__spine-col,
  .mp-goal-detail__rail {
    position: static;
  }
}

/* ======================================================================
   Rule Library (screen 07)
   Filter pills + search + editorial table.
   ====================================================================== */

.mp-rule-library {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-rule-library__filters {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.mp-rule-library__search {
  position: relative;
  width: 260px;
}

.mp-rule-library__search-icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-secondary);
  pointer-events: none;
  font-size: 14px;
}

.mp-rule-library__search-form {
  margin: 0;
}

.mp-rule-library__search-input {
  width: 100%;
  padding: 8px 12px 8px 32px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: transparent;
  font-size: 13px;
  color: var(--color-text-primary);
  font-family: var(--font-family-sans);
  outline: none;
}

.mp-rule-library__search-input::placeholder {
  color: var(--color-text-tertiary);
}

.mp-rule-library__search-input:focus {
  border-color: var(--color-text-primary);
}

.mp-rule-row__id {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-rule-row__body {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
}

.mp-rule-row__content {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.45;
}

.mp-rule-row__scope {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp-rule-row__scope-level {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-primary);
  letter-spacing: 0.2px;
}

.mp-rule-row__scope-glob {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-rule-row__activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.mp-rule-row__activity-date {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}

.mp-rule-row__activity-meta {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

/* ======================================================================
   Goals index (index row pattern — reuses editorial Table)
   ====================================================================== */

.mp-goals-index {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-goals-index__filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.mp-goal-row__id {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-goal-row__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.mp-goal-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp-goal-row__title {
  font-size: 0.9375rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-semibold, 600);
}

.mp-goal-row__description {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
  max-width: 72ch;
}

.mp-goal-row__muted {
  color: var(--color-text-tertiary);
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
}

.mp-goal-row__activity {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-end;
}

.mp-goal-row__activity-date {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
}

.mp-goal-row__activity-meta {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-goal-row__chevron {
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1;
}

/* ======================================================================
   Task Queue (screen 05)
   Grouped by milestone/parent. Blocked rows carry coral tint + Why:.
   ====================================================================== */

.mp-task-queue {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-task-queue__filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.mp-task-queue__groups {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-task-group {
  display: flex;
  flex-direction: column;
}

.mp-task-group__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 8px 16px;
  background: var(--color-surface-hover);
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  border-left: 2px solid transparent;
}

.mp-task-group__header--warn {
  background: var(--mp-warn-soft, var(--color-surface-hover));
  color: var(--mp-warn-text, var(--color-text-primary));
  border-left-color: var(--mp-warn, var(--color-accent));
}

.mp-task-group__label {
  font-weight: var(--font-weight-semibold, 600);
}

.mp-task-group__link {
  color: inherit;
  text-decoration: none;
}

.mp-task-group__link:hover {
  text-decoration: underline;
  text-underline-offset: 2px;
}

.mp-task-group__count {
  margin-left: auto;
  opacity: 0.7;
  font-weight: var(--font-weight-medium, 500);
}

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

.mp-task-row {
  border-top: 1px solid var(--color-border);
}

.mp-task-row:last-child {
  border-bottom: 1px solid var(--color-border);
}

.mp-task-row--blocked {
  background: var(--mp-warn-soft);
  border-left: 2px solid var(--mp-warn);
}

.mp-task-row__link {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) 140px 140px 120px;
  gap: 16px;
  align-items: center;
  padding: 14px 20px;
  color: inherit;
  text-decoration: none;
}

.mp-task-row__id {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-task-row__body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.mp-task-row__title {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium, 500);
}

.mp-task-row__description {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.4;
}

.mp-task-row__state {
  display: flex;
  align-items: center;
}

.mp-task-row__requires {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: wrap;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.mp-task-row__requires-label {
  color: var(--color-text-tertiary);
}

.mp-task-row__requires-id {
  color: var(--color-text-primary);
}

.mp-task-row__activity {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
  text-align: right;
}

.mp-task-row__why {
  padding: 0 20px 14px 80px; /* indented per the design spec */
}

/* ======================================================================
   Candidates (screen 08)
   Aggregated review queue. Row-level Codify / Reject actions.
   ====================================================================== */

.mp-candidates {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-candidates__filters {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

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

.mp-candidates__proposal-title {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium, 500);
}

.mp-candidates__proposal-body {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.mp-candidates__evidence {
  display: inline-flex;
  align-items: center;
}

.mp-candidates__no-confidence {
  color: var(--color-text-tertiary);
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
}

.mp-candidates__source {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}

.mp-candidates__proposed {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-candidates__actions {
  display: inline-flex;
  gap: 0.375rem;
}

/* ======================================================================
   Guidance (screen 06)
   2-col: rules (main) + decisions/components (rail).
   ====================================================================== */

.mp-guidance {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-guidance__scope {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  padding: 8px 12px;
  background: var(--color-surface-hover);
  border-radius: var(--radius-sm, 2px);
  line-height: 1.6;
}

.mp-guidance__scope-label {
  color: var(--color-text-tertiary);
  margin-right: 8px;
}

.mp-guidance__scope-path {
  color: var(--color-text-primary);
}

.mp-guidance__scope-more {
  color: var(--color-text-tertiary);
  margin-left: 8px;
}

.mp-guidance__body {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 2.25rem;
  align-items: start;
}

.mp-guidance__main {
  min-width: 0;
}

.mp-guidance__rail {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  min-width: 0;
}

.mp-guidance__section-title,
.mp-guidance__rail-title {
  margin: 0 0 0.75rem;
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  font-weight: var(--font-weight-medium, 500);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}

.mp-guidance__rules,
.mp-guidance__decisions,
.mp-guidance__components {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.mp-guidance-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  background: var(--color-surface);
}

.mp-guidance-card--compact {
  padding: 10px 12px;
}

.mp-guidance-card__head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.mp-guidance-card__meta {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
  margin-left: auto;
}

.mp-guidance-card__scope {
  font-family: var(--font-family-mono);
  font-size: 0.625rem;
  color: var(--color-text-secondary);
  padding: 2px 6px;
  background: var(--color-surface-hover);
  border-radius: var(--radius-sm, 2px);
}

.mp-guidance-card__body {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  line-height: 1.45;
}

.mp-guidance-card__title {
  margin: 0;
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium, 500);
  line-height: 1.4;
}

.mp-guidance-component {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
}

.mp-guidance-component__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mp-guidance-component__name {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  font-weight: var(--font-weight-medium, 500);
}

.mp-guidance-component__path {
  font-family: var(--font-family-mono);
  font-size: 0.6875rem;
  color: var(--color-text-tertiary);
}

.mp-guidance__empty {
  margin: 0;
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  color: var(--color-text-tertiary);
}

@media (max-width: 1200px) {
  .mp-guidance__body {
    grid-template-columns: 1fr;
  }
}

/* ======================================================================
   Install / Landing (screen 01)
   Public marketing page: hero + install tabs + 3-step cards.
   ====================================================================== */

.mp-landing-topbar {
  border-bottom: 1px solid var(--color-border);
}

.mp-landing-topbar__inner {
  max-width: 820px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.mp-landing-topbar__nav {
  display: inline-flex;
  gap: 18px;
  align-items: center;
}

.mp-landing-topbar__link {
  font-size: 13px;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.mp-landing-topbar__link:hover {
  color: var(--color-text-primary);
}

.mp-landing {
  max-width: 820px;
  margin: 0 auto;
  padding: 5rem 28px 6rem;
  display: flex;
  flex-direction: column;
  gap: 4rem;
}

.mp-landing__hero {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.mp-landing__title {
  margin: 0;
  font-size: 3.5rem; /* 56px */
  font-weight: var(--font-weight-semibold, 600);
  line-height: 1.02;
  letter-spacing: -1px;
  color: var(--color-text-primary);
  max-width: 18ch;
}

.mp-landing__subtitle {
  margin: 0;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-text-secondary);
  max-width: 56ch;
}

.mp-landing__install {
  margin-top: 1.5rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 4px);
  overflow: hidden;
  background: var(--color-surface);
}

.mp-landing__tabs {
  display: inline-flex;
  padding: 0.5rem;
  gap: 0.25rem;
  border-bottom: 1px solid var(--color-border);
  width: 100%;
  background: var(--color-surface);
}

.mp-landing__tab {
  padding: 0.375rem 0.75rem;
  border: none;
  background: transparent;
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  letter-spacing: 0.2px;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-radius: var(--radius-sm, 2px);
}

.mp-landing__tab--active {
  background: var(--color-text-primary);
  color: var(--color-background);
  font-weight: var(--font-weight-semibold, 600);
}

.mp-landing__panes {
  padding: 1rem;
}

.mp-landing__pane {
  margin: 0;
}

.mp-landing__steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.mp-landing__step {
  display: flex;
  gap: 12px;
  padding: 1rem 1.25rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md, 4px);
  background: var(--color-surface);
}

.mp-landing__step-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--color-text-primary);
  color: var(--color-background);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold, 600);
  font-size: 14px;
  border-radius: var(--radius-sm, 2px);
  flex-shrink: 0;
}

.mp-landing__step-body {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
  min-width: 0;
}

.mp-landing__step-code {
  font-family: var(--font-family-mono);
  font-size: 0.8125rem;
  background: var(--color-surface-hover);
  padding: 3px 6px;
  border-radius: var(--radius-sm, 2px);
  width: fit-content;
  color: var(--color-text-primary);
}

.mp-landing__step-description {
  margin: 0;
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  line-height: 1.55;
}

.mp-landing__step-description code {
  font-family: var(--font-family-mono);
  font-size: 0.75rem;
  background: var(--color-surface-hover);
  padding: 1px 4px;
  border-radius: var(--radius-sm, 2px);
}

@media (max-width: 900px) {
  .mp-landing__title {
    font-size: 2.5rem;
  }

  .mp-landing__steps {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   Spine — vertical milestone rail with status dots
   Used in: Mempacer::UI::Spine (goal detail surface)
   ============================================================ */
.mp-spine {
  position: relative;
  padding: 0;
  margin: 0;
}

.mp-spine__head {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin-bottom: 14px;
}

.mp-spine__empty {
  font-size: 13px;
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0;
}

.mp-spine__nodes {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

/* The rail line — 1.5px divider running through dot centres.
   Absolute so adding/removing nodes never relayouts the line. */
.mp-spine__nodes::before {
  content: "";
  position: absolute;
  left: 6px; /* (14px dot - 2px line) / 2 = 6px from .mp-spine__nodes left edge */
  top: 7px;
  bottom: 7px;
  width: 1.5px;
  background: var(--color-divider, color-mix(in srgb, currentColor 12%, transparent));
}

.mp-spine__node {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 10px 10px 0;
  border-radius: 4px;
  transition: background-color 120ms ease;
}

.mp-spine__node + .mp-spine__node {
  margin-top: 4px;
}

.mp-spine__node--active {
  background: var(--color-surface-hover, color-mix(in srgb, currentColor 4%, transparent));
  box-shadow: inset 2px 0 0 var(--color-text-primary);
}

.mp-spine__dot {
  position: relative;
  flex: 0 0 14px;
  width: 14px;
  height: 14px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--color-surface, transparent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.mp-spine__dot--closed {
  background: var(--color-text-primary);
  border: 1.5px solid var(--color-text-primary);
  color: var(--color-on-primary, var(--color-surface));
}

.mp-spine__dot-glyph {
  font-size: 10px;
  line-height: 1;
  font-weight: 700;
  color: inherit;
}

.mp-spine__dot--in-flight {
  background: var(--color-warning-500, #c5623a);
  border: 1.5px solid var(--color-warning-500, #c5623a);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning-500, #c5623a) 20%, transparent);
  animation: mp-spine-pulse 1.6s ease-in-out infinite;
}

.mp-spine__dot-inner {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-surface, #fff);
}

.mp-spine__dot--draft {
  background: transparent;
  border: 1.5px dashed var(--color-text-tertiary);
}

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

.mp-spine__id {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

.mp-spine__title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  line-height: 1.35;
  word-break: break-word;
}

.mp-spine__title:hover {
  color: var(--color-text-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

@keyframes mp-spine-pulse {
  0%, 100% {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-warning-500, #c5623a) 20%, transparent);
  }
  50% {
    box-shadow: 0 0 0 6px color-mix(in srgb, var(--color-warning-500, #c5623a) 28%, transparent);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mp-spine__dot--in-flight {
    animation: none;
  }
}

/* ============================================================
   Goal detail v2 — progress strip + rail enhancements
   Adds: progress bar, candidate action buttons, rail Sessions
   list, rail Activity log, live-agent badge on the meta row.
   ============================================================ */

.mp-goal-detail__meta-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: #4d9b67;
  letter-spacing: 0.2px;
}
.mp-goal-detail__meta-live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ccf8e;
}

/* ── Progress strip ──────────────────────────────────────── */
.mp-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 4px 0 0;
}
.mp-progress__bar {
  display: flex;
  height: 5px;
  width: 100%;
  gap: 2px;
  border-radius: 1px;
  overflow: hidden;
  background: var(--color-divider);
}
.mp-progress__seg { height: 100%; }
.mp-progress__seg--closed    { background: var(--color-text-primary); }
.mp-progress__seg--in-flight { background: var(--mp-warn, #c5623a); }
.mp-progress__seg--blocked   { background: color-mix(in srgb, var(--mp-warn, #c5623a) 70%, #333); }
.mp-progress__seg--drafts    { background: color-mix(in srgb, var(--color-text-tertiary) 50%, transparent); }

.mp-progress__legend {
  display: flex;
  align-items: center;
  gap: 18px;
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
  flex-wrap: wrap;
}
.mp-progress__legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mp-progress__legend-mark {
  display: inline-block;
  width: 9px;
  height: 9px;
  border-radius: 1px;
}
.mp-progress__legend-mark--closed    { background: var(--color-text-primary); }
.mp-progress__legend-mark--in-flight { background: var(--mp-warn, #c5623a); }
.mp-progress__legend-mark--blocked   { background: color-mix(in srgb, var(--mp-warn, #c5623a) 70%, #333); }
.mp-progress__legend-mark--draft     {
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--color-text-tertiary) 60%, transparent);
}

/* ── Candidate card actions ──────────────────────────────── */
.mp-codify-card--actionable {
  gap: 0.5rem;
}
.mp-codify-card__meta {
  margin-left: auto;
  font-family: var(--font-family-mono);
  font-size: 10px;
  letter-spacing: 0.4px;
  color: var(--color-text-tertiary);
}
.mp-codify-card__actions {
  display: inline-flex;
  gap: 6px;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.mp-codify-card__action-form {
  display: inline;
  margin: 0;
}
.mp-cand-btn {
  padding: 4px 10px;
  font-size: 11.5px;
  border-radius: var(--radius-sm, 2px);
  font-weight: 500;
  cursor: pointer;
  font-family: var(--font-family-sans);
  line-height: 1.2;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}
.mp-cand-btn--codify {
  background: var(--color-text-primary);
  color: var(--color-background);
  border: 1px solid var(--color-text-primary);
}
.mp-cand-btn--codify:hover {
  background: color-mix(in srgb, var(--color-text-primary) 90%, transparent);
}
.mp-cand-btn--edit,
.mp-cand-btn--reject {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
}
.mp-cand-btn--edit:hover,
.mp-cand-btn--reject:hover {
  background: var(--color-surface-hover);
}

/* ── Rail Sessions list ──────────────────────────────────── */
.mp-rail-sessions {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-rail-sessions__row {
  display: grid;
  grid-template-columns: 12px auto 1fr auto;
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  letter-spacing: 0.2px;
}
.mp-rail-sessions__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6ccf8e;
  align-self: center;
}
.mp-rail-sessions__id {
  color: var(--color-text-primary);
  font-weight: 500;
}
.mp-rail-sessions__agent { color: var(--color-text-secondary); }
.mp-rail-sessions__work {
  color: var(--color-text-primary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Rail Activity log ───────────────────────────────────── */
.mp-activity-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.mp-activity-rail__row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-primary);
  letter-spacing: 0.2px;
  line-height: 1.5;
}
.mp-activity-rail__time {
  color: var(--color-text-tertiary);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.mp-activity-rail__body { min-width: 0; }
.mp-activity-rail__text-meta { color: var(--color-text-secondary); }
.mp-activity-rail__id { color: var(--color-text-primary); }

/* ============================================================
   Project Settings — read-only meta + deep links into nested
   configuration surfaces. v1 shape; editing forms land here
   as flows get pulled out of their nested controllers.
   ============================================================ */
.mp-settings {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.mp-settings__section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mp-settings__section-title {
  font-family: var(--font-family-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
  margin: 0;
}
.mp-settings__fields {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: var(--color-surface);
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mp-settings__field {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 1rem;
  padding: 14px 18px;
  border-top: 1px solid var(--color-divider);
}
.mp-settings__field:first-child { border-top: none; }
.mp-settings__field-label {
  font-family: var(--font-family-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--color-text-tertiary);
  text-transform: uppercase;
  margin: 0;
}
.mp-settings__field-value {
  margin: 0;
  font-size: 14px;
  color: var(--color-text-primary);
  line-height: 1.45;
}
.mp-settings__field-value--prose {
  font-size: 13.5px;
  color: var(--color-text-secondary);
  max-width: 70ch;
}

.mp-settings__links {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: var(--color-surface);
}
.mp-settings__links > li + li {
  border-top: 1px solid var(--color-divider);
}
.mp-settings__link {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 18px;
  gap: 1rem;
  align-items: center;
  padding: 14px 18px;
  text-decoration: none;
  color: inherit;
}
.mp-settings__link:hover { background: var(--color-surface-hover); }
.mp-settings__link-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-primary);
}
.mp-settings__link-meta {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}
.mp-settings__link-chevron {
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1;
  text-align: right;
}

/* ============================================================
   Goal detail v2 — milestone drill-in
   Selected milestone's tasks grouped by bucket (in-flight /
   blocked / draft) with collapsed closed section + WHY blocks.
   ============================================================ */

.mp-milestone-detail {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.mp-milestone-detail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.mp-milestone-detail__title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.mp-milestone-detail__title {
  font-family: var(--font-family-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-primary);
  margin: 0;
}
.mp-milestone-detail__actions {
  display: inline-flex;
  gap: 8px;
}
.mp-milestone-detail__meta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}
.mp-milestone-detail__meta-sep { opacity: 0.5; }
.mp-milestone-detail__meta-warn { color: var(--mp-warn, #c5623a); }
.mp-milestone-detail__empty {
  font-family: var(--font-family-mono);
  font-size: 12px;
  color: var(--color-text-tertiary);
  font-style: italic;
  margin: 0;
  padding: 12px 0;
}

.mp-tasks__chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 22px;
  padding: 0 6px;
  background: var(--color-surface-hover);
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  color: var(--color-text-primary);
  letter-spacing: 0.4px;
  border-radius: var(--radius-sm, 2px);
  font-weight: 600;
}

.mp-tasks__group {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.mp-tasks__section-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.mp-tasks__section-tag {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--color-text-primary);
}
.mp-tasks__section-tag--blocked { color: var(--mp-warn, #c5623a); }
.mp-tasks__section-tag--draft   { color: var(--color-text-tertiary); }
.mp-tasks__section-count {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}

.mp-tasks__collapsed {
  margin: 0;
}
.mp-tasks__collapsed > summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: var(--color-surface);
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
  list-style: none;
  cursor: pointer;
}
.mp-tasks__collapsed > summary::-webkit-details-marker { display: none; }
.mp-tasks__collapsed-caret {
  font-family: var(--font-family-mono);
  font-size: 10px;
  color: var(--color-text-tertiary);
  transition: transform 120ms ease;
}
.mp-tasks__collapsed[open] .mp-tasks__collapsed-caret {
  transform: rotate(90deg);
}
.mp-tasks__collapsed-ids { color: var(--color-text-tertiary); }
.mp-tasks__collapsed[open] > summary {
  margin-bottom: 10px;
}

/* ── Task card ─────────────────────────────────────────────── */
.mp-task-card {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: var(--color-surface);
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mp-task-card--blocked {
  border-color: color-mix(in srgb, var(--mp-warn, #c5623a) 50%, var(--color-border));
  background: color-mix(in srgb, var(--mp-warn-soft, #fbeadf) 55%, var(--color-surface));
}
.mp-task-card--closed {
  opacity: 0.7;
}

.mp-task-card__head {
  display: grid;
  grid-template-columns: 16px auto minmax(0, 1fr) auto auto;
  align-items: center;
  gap: 10px;
}
.mp-task-card__check {
  width: 14px;
  height: 14px;
  border: 1.5px solid var(--color-divider);
  border-radius: 2px;
  background: transparent;
  flex-shrink: 0;
}
.mp-task-card__check--in_flight {
  background: color-mix(in srgb, var(--mp-warn, #c5623a) 25%, transparent);
  border-color: var(--mp-warn, #c5623a);
}
.mp-task-card__check--closed {
  background: var(--color-text-primary);
  border-color: var(--color-text-primary);
}
.mp-task-card__id {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.3px;
}
.mp-task-card__title {
  font-size: 13.5px;
  color: var(--color-text-primary);
  font-weight: 500;
  line-height: 1.35;
  min-width: 0;
}
.mp-task-card__claim {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 8px;
  border-radius: 2px;
  background: var(--color-surface-hover);
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  color: var(--color-text-secondary);
  letter-spacing: 0.2px;
}
.mp-task-card__claim-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #6ccf8e;
}
.mp-task-card__not-claimed {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
}
.mp-task-card__more {
  color: var(--color-text-tertiary);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}

/* ── WHY block (cream tint; coral for blocked) ─────────────── */
.mp-why {
  background: color-mix(in srgb, var(--mp-warn-soft, #fbeadf) 50%, transparent);
  border-left: 2px solid color-mix(in srgb, var(--mp-warn, #c5623a) 50%, transparent);
  padding: 10px 14px;
  border-radius: 2px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mp-task-card--blocked .mp-why {
  background: transparent;
  border-left-color: var(--mp-warn, #c5623a);
}
.mp-why__head {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.mp-why__head-sep { color: var(--color-text-tertiary); }
.mp-why__head-warn { color: var(--mp-warn, #c5623a); }
.mp-why__time {
  color: var(--color-text-tertiary);
  font-variant-numeric: tabular-nums;
}
.mp-why__body {
  margin: 0;
  font-size: 12.5px;
  color: var(--color-text-primary);
  line-height: 1.55;
}
.mp-why__body code {
  font-family: var(--font-family-mono);
  font-size: 11.5px;
  color: var(--color-text-primary);
  background: color-mix(in srgb, var(--color-text-primary) 6%, transparent);
  padding: 1px 4px;
  border-radius: 2px;
}
.mp-why__foot {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
  flex-wrap: wrap;
}

/* Disabled-look button variant — used for not-yet-wired actions */
.mp-btn-secondary--disabled {
  display: inline-flex;
  align-items: center;
  padding: 5px 10px;
  font-size: 11.5px;
  color: var(--color-text-tertiary);
  background: var(--color-surface);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-sm, 2px);
  cursor: not-allowed;
  font-weight: 500;
}

/* ============================================================
   Goals overview (project landing v2)
   Replaces the old project-home + .mp-goals-index pair.
   Used by: goals#index (acts as the project landing now).
   ============================================================ */

.mp-overview {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* ── 4-stat strip ──────────────────────────────────────────── */
.mp-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: var(--color-surface);
  overflow: hidden;
}
.mp-stats__cell {
  padding: 22px 28px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  border-left: 1px solid var(--color-divider);
}
.mp-stats__cell:first-child { border-left: none; }
.mp-stats__value {
  font-size: 36px;
  font-weight: 600;
  color: var(--color-text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.mp-stats__label {
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}

/* ── Toolbar: filter tabs + search + group by ──────────────── */
.mp-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.mp-toolbar__filters {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}
.mp-toolbar__right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mp-search {
  position: relative;
  margin: 0;
}
.mp-search__icon {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-tertiary);
  font-size: 12px;
  pointer-events: none;
}
.mp-search__input {
  width: 240px;
  padding: 7px 12px 7px 30px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: transparent;
  font-size: 12.5px;
  color: var(--color-text-primary);
  outline: none;
  font-family: var(--font-family-mono);
}
.mp-search__input::placeholder { color: var(--color-text-tertiary); }
.mp-search__input:focus { border-color: var(--color-text-primary); }

.mp-groupby {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  font-size: 12.5px;
  color: var(--color-text-primary);
  background: transparent;
  cursor: pointer;
}
.mp-groupby[disabled] {
  cursor: not-allowed;
  color: var(--color-text-tertiary);
  opacity: 0.7;
}
.mp-groupby__caret {
  color: var(--color-text-tertiary);
  font-size: 10px;
}

/* ── State badges (consistent across landing + detail) ─────── */
.mp-state-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 9px;
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  border-radius: var(--radius-sm, 2px);
  font-weight: 500;
  width: fit-content;
}
.mp-state-badge--active    { background: #f3d97a; color: #5b4a12; }
.mp-state-badge--in-review { background: var(--color-text-primary); color: var(--color-background); }
.mp-state-badge--refining  { background: transparent; color: var(--color-text-secondary); border: 1px solid var(--color-border); }
.mp-state-badge--codified  { background: var(--color-surface-hover); color: var(--color-text-secondary); border: 1px solid var(--color-divider); }
.mp-state-badge--archived  { background: transparent; color: var(--color-text-tertiary); border: 1px dashed var(--color-border); }

/* ── Goals table (4-col: STATE | GOAL | PROGRESS | ACTIVITY) ─ */
.mp-goals-table {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm, 2px);
  background: var(--color-surface);
  overflow: hidden;
}
.mp-goals-table__head {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 230px 200px 18px;
  gap: 20px;
  padding: 12px 22px;
  background: var(--color-surface-hover);
  border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-family-mono);
  font-size: 10.5px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--color-text-tertiary);
}
.mp-goals-table__list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mp-goals-row {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr) 230px 200px 18px;
  gap: 20px;
  align-items: center;
  padding: 18px 22px;
  border-top: 1px solid var(--color-divider);
  text-decoration: none;
  color: inherit;
}
.mp-goals-row:first-child { border-top: none; }
.mp-goals-row:hover { background: var(--color-surface-hover); }

.mp-goals-row__state {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.mp-goals-row__id {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.3px;
}

.mp-goals-row__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.mp-goals-row__title {
  font-size: 14.5px;
  color: var(--color-text-primary);
  font-weight: 600;
  line-height: 1.35;
}
.mp-goals-row__desc {
  font-size: 12.5px;
  color: var(--color-text-secondary);
  line-height: 1.45;
}

.mp-goals-row__progress {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  font-size: 12.5px;
  color: var(--color-text-primary);
}
.mp-goals-row__progress-primary { font-weight: 500; line-height: 1.4; }
.mp-goals-row__progress-primary--muted { color: var(--color-text-tertiary); }
.mp-goals-row__progress-secondary {
  color: var(--color-text-secondary);
  font-size: 12px;
  line-height: 1.4;
}

.mp-goals-row__activity {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.mp-goals-row__activity-primary {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--color-text-primary);
  font-weight: 500;
}
.mp-goals-row__activity-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.mp-goals-row__activity-dot--live { background: #6ccf8e; }
.mp-goals-row__activity-dot--idle { background: var(--color-text-tertiary); }
.mp-goals-row__activity-dot--done {
  background: transparent;
  border: 1.5px solid var(--color-text-tertiary);
}
.mp-goals-row__activity-secondary {
  font-family: var(--font-family-mono);
  font-size: 11px;
  color: var(--color-text-tertiary);
  letter-spacing: 0.2px;
  padding-left: 12px;
}

.mp-goals-row__chevron {
  color: var(--color-text-tertiary);
  font-size: 16px;
  line-height: 1;
  text-align: right;
}

/* Responsive: collapse columns on narrow viewports. The goal stays
   the primary clickable target; secondary columns fold below it. */
@media (max-width: 960px) {
  .mp-goals-table__head,
  .mp-goals-row {
    grid-template-columns: 120px minmax(0, 1fr) 18px;
  }
  .mp-goals-table__head > div:nth-child(3),
  .mp-goals-table__head > div:nth-child(4),
  .mp-goals-row__progress,
  .mp-goals-row__activity {
    display: none;
  }
  .mp-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .mp-stats__cell:nth-child(odd) { border-left: none; }
  .mp-stats__cell:nth-child(n+3) { border-top: 1px solid var(--color-divider); }
}