/* MealPot brand for the POC pages (founder decision 5 Nov 2026: POCs run on *.getmealpot.com in MealPot's look).
   Tokens and fonts copied from mealpot-site-main (public/site.css, public/fonts). Fonts: DM Sans and Fraunces, SIL OFL
   (licences in ./fonts). Copy this folder next to your page, or import it from packages/shared/brand.
   Every POC page must also carry <meta name="robots" content="noindex, nofollow"> (MealPot's SEO pause). */

@font-face { font-family: 'MealPot Sans'; src: url('./fonts/dm-sans-regular.ttf') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'MealPot Sans'; src: url('./fonts/dm-sans-semibold.ttf') format('truetype'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'MealPot Display'; src: url('./fonts/fraunces-medium.ttf') format('truetype'); font-weight: 500; font-display: swap; }

:root {
  --mp-ink: #202621;      /* text */
  --mp-muted: #647067;    /* secondary text */
  --mp-accent: #c84b24;   /* buttons, links, highlights */
  --mp-accent-dark: #a92c21;
  --mp-green: #436744;    /* success, "checked" */
  --mp-line: #e5e9e2;     /* borders */
  --mp-soft: #f4f6f0;     /* panels */
  --mp-paper: #ffffff;
  --mp-radius: 14px;
  --mp-font: 'MealPot Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mp-display: 'MealPot Display', Georgia, serif;
  color-scheme: light;
}

.mp-body { margin: 0; background: var(--mp-paper); color: var(--mp-ink); font: 400 16px/1.5 var(--mp-font); -webkit-font-smoothing: antialiased; }
.mp-h1, .mp-h2 { font-family: var(--mp-display); font-weight: 500; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 0.4em; }
.mp-h1 { font-size: clamp(2rem, 5vw, 3.2rem); }
.mp-h2 { font-size: clamp(1.4rem, 3vw, 2rem); }
.mp-muted { color: var(--mp-muted); }
.mp-panel { background: var(--mp-soft); border: 1px solid var(--mp-line); border-radius: var(--mp-radius); padding: 16px 18px; }
.mp-button { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px; padding: 12px 20px; background: var(--mp-accent); color: #fff; font: 600 16px/1 var(--mp-font); cursor: pointer; text-decoration: none; }
.mp-button:hover { background: var(--mp-accent-dark); }
.mp-button.secondary { background: transparent; color: var(--mp-ink); border: 1px solid var(--mp-line); }
.mp-input { width: 100%; box-sizing: border-box; border: 1px solid var(--mp-line); border-radius: 12px; padding: 12px 14px; font: 400 16px/1.4 var(--mp-font); color: var(--mp-ink); background: #fff; }
.mp-input:focus { outline: 2px solid var(--mp-accent); outline-offset: 1px; }
/* Agent step stream: one row per StepEvent (tool_start / tool_end). */
.mp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mp-step { display: flex; gap: 10px; align-items: baseline; color: var(--mp-muted); font-size: 15px; }
.mp-step::before { content: '•'; color: var(--mp-accent); }
.mp-step.done { color: var(--mp-ink); }
.mp-step.done::before { content: '✓'; color: var(--mp-green); }
.mp-step.failed::before { content: '!'; color: var(--mp-accent-dark); }
.mp-tag { display: inline-block; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 8px; border-radius: 999px; background: var(--mp-soft); color: var(--mp-muted); border: 1px solid var(--mp-line); }
.mp-tag.untested { color: var(--mp-accent-dark); }
.mp-tag.estimate { color: var(--mp-green); }