/*
 * MPJE Review design system: base + components.
 * Scoped to body.mpj-ui so nothing leaks into the marketing site.
 */
body.mpj-ui {
  margin: 0;
  background: var(--mpj-paper);
  color: var(--mpj-text);
  font-family: var(--mpj-sans);
  font-size: var(--mpj-fs-base);
  line-height: var(--mpj-lh);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.mpj-ui *,
body.mpj-ui *::before,
body.mpj-ui *::after { box-sizing: border-box; }
body.mpj-ui a { color: var(--mpj-blue); text-decoration: none; }
body.mpj-ui a:hover { color: var(--mpj-blue-hover); }
body.mpj-ui a:not([class]):hover { text-decoration: underline; text-underline-offset: 2px; }
body.mpj-ui :focus-visible { outline: none; box-shadow: var(--mpj-focus); border-radius: var(--mpj-r-sm); }
body.mpj-ui img { max-width: 100%; height: auto; }

/* ---------- Type ---------- */
.mpj-h1, .mpj-h2, .mpj-h3 { margin: 0; color: var(--mpj-navy); }
.mpj-h1 { font-family: var(--mpj-serif); font-weight: 600; font-size: var(--mpj-fs-xl); line-height: 1.2; letter-spacing: -0.01em; }
.mpj-h2 { font-family: var(--mpj-sans); font-weight: 600; font-size: var(--mpj-fs-md); line-height: 1.35; }
.mpj-h3 { font-family: var(--mpj-sans); font-weight: 600; font-size: var(--mpj-fs-base); line-height: 1.4; }
.mpj-lede { margin: var(--mpj-s1) 0 0; color: var(--mpj-muted); font-size: var(--mpj-fs-base); }
.mpj-meta { color: var(--mpj-muted); font-size: var(--mpj-fs-sm); }
.mpj-num { font-family: var(--mpj-serif); font-weight: 600; font-variant-numeric: lining-nums tabular-nums; color: var(--mpj-navy); }

/* ---------- Page frame ---------- */
.mpj-page { max-width: var(--mpj-content-max); margin: 0 auto; padding: var(--mpj-s6) var(--mpj-s6) var(--mpj-s7); }
.mpj-page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mpj-s4); margin-bottom: var(--mpj-s5); flex-wrap: wrap; }
.mpj-page-head__actions { display: flex; gap: var(--mpj-s2); align-items: center; }
.mpj-stack > * + * { margin-top: var(--mpj-s5); }
.mpj-grid { display: grid; gap: var(--mpj-s5); }
.mpj-grid--2 { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
.mpj-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
@media (max-width: 1024px) { .mpj-grid--2 { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .mpj-page { padding: var(--mpj-s5) var(--mpj-s4) var(--mpj-s7); }
  .mpj-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Panel (the only container; no nesting panels in panels) ---------- */
.mpj-panel { background: var(--mpj-surface); border: 1px solid var(--mpj-line); border-radius: var(--mpj-r-lg); }
.mpj-panel__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mpj-s3); padding: var(--mpj-s4) var(--mpj-s5); border-bottom: 1px solid var(--mpj-line); }
.mpj-panel__body { padding: var(--mpj-s5); }
.mpj-panel__body--flush { padding: 0; }
.mpj-panel__foot { padding: var(--mpj-s3) var(--mpj-s5); border-top: 1px solid var(--mpj-line); background: var(--mpj-sunken); border-radius: 0 0 var(--mpj-r-lg) var(--mpj-r-lg); }

/* ---------- Buttons ---------- */
.mpj-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mpj-s2); height: 40px; padding: 0 var(--mpj-s4); border-radius: var(--mpj-r); border: 1px solid transparent; font: 600 var(--mpj-fs-sm)/1 var(--mpj-sans); cursor: pointer; white-space: nowrap; transition: background-color .15s, border-color .15s, color .15s; }
.mpj-btn:hover { text-decoration: none !important; }
.mpj-btn--primary { background: var(--mpj-blue); color: #fff !important; }
.mpj-btn--primary:hover { background: var(--mpj-blue-hover); }
.mpj-btn--secondary { background: var(--mpj-surface); color: var(--mpj-navy) !important; border-color: var(--mpj-line-strong); }
.mpj-btn--secondary:hover { border-color: var(--mpj-navy); }
.mpj-btn--ghost { background: transparent; color: var(--mpj-blue) !important; padding: 0 var(--mpj-s2); }
.mpj-btn--ghost:hover { background: var(--mpj-blue-soft); }
.mpj-btn--sm { height: 32px; padding: 0 var(--mpj-s3); font-size: var(--mpj-fs-xs); }
.mpj-btn--lg { height: 46px; padding: 0 var(--mpj-s5); font-size: var(--mpj-fs-base); }
.mpj-btn[disabled], .mpj-btn.is-disabled { opacity: .45; pointer-events: none; }

/* ---------- Badges ---------- */
.mpj-badge { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 var(--mpj-s2); border-radius: var(--mpj-r-sm); font: 500 var(--mpj-fs-xs)/1 var(--mpj-sans); background: var(--mpj-sunken); color: var(--mpj-muted); }
.mpj-badge--blue { background: var(--mpj-blue-soft); color: var(--mpj-blue); }
.mpj-badge--success { background: var(--mpj-success-bg); color: var(--mpj-success); }
.mpj-badge--warn { background: var(--mpj-warn-bg); color: var(--mpj-warn); }
.mpj-badge--danger { background: var(--mpj-danger-bg); color: var(--mpj-danger); }

/* ---------- Stats row ---------- */
.mpj-stat { padding: var(--mpj-s4) var(--mpj-s5); border-left: 1px solid var(--mpj-line); }
.mpj-grid--4 > .mpj-stat:first-child { border-left: 0; }
.mpj-stat__label { display: block; font-size: var(--mpj-fs-sm); color: var(--mpj-muted); }
.mpj-stat__value { display: block; margin-top: 2px; font-family: var(--mpj-serif); font-weight: 600; font-size: var(--mpj-fs-xl); line-height: 1.15; color: var(--mpj-navy); font-variant-numeric: lining-nums tabular-nums; }
.mpj-stat__value small { font: 500 var(--mpj-fs-sm) var(--mpj-sans); color: var(--mpj-muted); margin-left: 4px; }
.mpj-stat__note { display: block; margin-top: 2px; font-size: var(--mpj-fs-xs); color: var(--mpj-faint); }
@media (max-width: 760px) {
  .mpj-grid--4 > .mpj-stat:nth-child(3) { border-left: 0; }
  .mpj-grid--4 > .mpj-stat:nth-child(n+3) { border-top: 1px solid var(--mpj-line); }
}

/* ---------- Progress ---------- */
.mpj-bar { height: 6px; border-radius: var(--mpj-r-pill); background: var(--mpj-m0); overflow: hidden; }
.mpj-bar > span { display: block; height: 100%; background: var(--mpj-blue); border-radius: inherit; }

/* ---------- Tabs ---------- */
.mpj-tabs { display: flex; gap: var(--mpj-s1); border-bottom: 1px solid var(--mpj-line); margin-bottom: var(--mpj-s5); overflow-x: auto; }
.mpj-tab { position: relative; padding: var(--mpj-s3) var(--mpj-s3); font: 500 var(--mpj-fs-sm)/1 var(--mpj-sans); color: var(--mpj-muted) !important; background: none; border: 0; cursor: pointer; white-space: nowrap; }
.mpj-tab:hover { color: var(--mpj-navy) !important; text-decoration: none !important; }
.mpj-tab.is-active { color: var(--mpj-navy) !important; font-weight: 600; }
.mpj-tab.is-active::after { content: ""; position: absolute; left: var(--mpj-s3); right: var(--mpj-s3); bottom: -1px; height: 2px; background: var(--mpj-blue); }

/* ---------- Tables ---------- */
.mpj-table { width: 100%; border-collapse: collapse; font-size: var(--mpj-fs-sm); }
.mpj-table th { text-align: left; font-weight: 500; color: var(--mpj-muted); padding: var(--mpj-s3) var(--mpj-s4); border-bottom: 1px solid var(--mpj-line); white-space: nowrap; }
.mpj-table td { padding: var(--mpj-s3) var(--mpj-s4); border-bottom: 1px solid var(--mpj-line); vertical-align: middle; }
.mpj-table tr:last-child td { border-bottom: 0; }
.mpj-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Forms ---------- */
.mpj-input, .mpj-select { height: 40px; width: 100%; padding: 0 var(--mpj-s3); border: 1px solid var(--mpj-line-strong); border-radius: var(--mpj-r); background: var(--mpj-surface); font: 400 var(--mpj-fs-base) var(--mpj-sans); color: var(--mpj-text); }
.mpj-input:focus, .mpj-select:focus { outline: none; border-color: var(--mpj-blue); box-shadow: var(--mpj-focus); }
.mpj-label { display: block; margin-bottom: 6px; font-weight: 600; font-size: var(--mpj-fs-sm); color: var(--mpj-navy); }
.mpj-help { margin-top: 6px; font-size: var(--mpj-fs-sm); color: var(--mpj-muted); }

/* ---------- Empty state ---------- */
.mpj-empty { padding: var(--mpj-s6) var(--mpj-s5); text-align: left; }
.mpj-empty p { margin: var(--mpj-s1) 0 var(--mpj-s4); color: var(--mpj-muted); max-width: 52ch; }

@media (prefers-reduced-motion: reduce) {
  body.mpj-ui *, body.mpj-ui *::before, body.mpj-ui *::after { transition: none !important; animation: none !important; }
}