@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@400;500;600&family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&display=swap");
@import "./tokens/colors.css";
@import "./tokens/type.css";

/* ── Magpie design system ─────────────────────────────────────
   An agentic platform for home life. Two accents at matched
   lightness and chroma, hue apart: evergreen is the system's
   voice, plum is the household's. Severity is content, not
   decoration.
   ───────────────────────────────────────────────────────────── */

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--mg-paper);
  color: var(--mg-ink);
  font-family: var(--mg-font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--mg-evergreen); text-decoration: none; }
a:hover { color: var(--mg-evergreen-deep); }

/* ── surfaces ── */
.mg-surface { background: var(--mg-surface); border: 1px solid var(--mg-rule); border-radius: 10px; }
.mg-band    { background: var(--mg-band); border-block: 1px solid var(--mg-rule); }
.mg-dark    { background: var(--mg-ink); color: var(--mg-paper-dark-fg); }

/* ── type roles ── */
.mg-display   { font-family: var(--mg-font-display); font-weight: 600; letter-spacing: -0.024em; line-height: 1.08; text-wrap: balance; }
.mg-h1        { font-size: 76px; letter-spacing: -0.028em; line-height: 1.02; }
.mg-h2        { font-size: 44px; }
.mg-h3        { font-size: 24px; letter-spacing: -0.015em; line-height: 1.15; }
.mg-lede      { font-size: 21px; line-height: 1.55; color: var(--mg-ink-soft); max-width: 60ch; }
.mg-body      { font-size: 16px; line-height: 1.6; color: var(--mg-ink-soft); max-width: 68ch; }
.mg-question  { font-family: var(--mg-font-display); font-style: italic; font-size: 20px; color: var(--mg-ink); }
.mg-eyebrow   { font-family: var(--mg-font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mg-evergreen); }
.mg-label     { font-family: var(--mg-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mg-ink-faint); }
.mg-data      { font-family: var(--mg-font-mono); font-size: 13px; color: var(--mg-ink); font-variant-numeric: tabular-nums; }

/* ── controls ── */
.mg-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 52px; padding: 0 26px; border-radius: 8px;
  font-family: var(--mg-font-body); font-size: 16px; font-weight: 500;
  background: var(--mg-evergreen); color: var(--mg-surface); border: 1px solid transparent;
  cursor: pointer;
}
.mg-btn:hover { background: var(--mg-evergreen-deep); color: var(--mg-surface); }
.mg-btn--quiet { background: transparent; color: var(--mg-ink); border-color: var(--mg-rule-strong); }
.mg-btn--quiet:hover { background: var(--mg-band); color: var(--mg-ink); }
.mg-btn--sm { height: 44px; padding: 0 20px; font-size: 14.5px; }

/* ── state chips: the capability rack's vocabulary ── */
.mg-chip {
  display: inline-flex; align-items: center; height: 26px; padding: 0 11px;
  border-radius: 13px; font-family: var(--mg-font-mono); font-size: 11px;
  font-weight: 500; letter-spacing: 0.1em;
}
.mg-chip--shipped   { background: var(--mg-evergreen-wash); color: var(--mg-evergreen); }
.mg-chip--in-design { background: var(--mg-plum-wash); color: var(--mg-plum); }
.mg-chip--planned   { background: var(--mg-sunk); color: var(--mg-unknown); }

/* ── cards ── */
.mg-card { background: var(--mg-surface); border: 1px solid var(--mg-rule); border-radius: 10px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.mg-card--feature { border-radius: 12px; padding: 36px; gap: 30px; }
.mg-card--pull { border-left: 3px solid var(--mg-plum); }

/* ── severity: CONFLICT / TIGHT / UNKNOWN ── */
.mg-severity { display: inline-flex; align-items: center; gap: 9px; font-family: var(--mg-font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; }
.mg-severity--conflict { color: var(--mg-conflict); }
.mg-severity--tight    { color: var(--mg-tight); }
.mg-severity--unknown  { color: var(--mg-unknown); }

/* ── report block: quoted machine output, the one dark surface ── */
.mg-report { background: var(--mg-ink); border-radius: 10px; padding: 24px 26px; overflow-x: auto; }
.mg-report pre { margin: 0; font-family: var(--mg-font-mono); font-size: 12.5px; line-height: 1.78; color: var(--mg-report-fg); white-space: pre; }
.mg-report .mg-r-dim      { color: var(--mg-ink-faint); }
.mg-report .mg-r-day      { color: var(--mg-paper-dark-fg); font-weight: 600; }
.mg-report .mg-r-conflict { color: var(--mg-conflict-on-dark); }
.mg-report .mg-r-tight    { color: var(--mg-tight-on-dark); }
.mg-report .mg-r-unknown  { color: var(--mg-unknown-on-dark); }
.mg-report .mg-r-arrow    { color: var(--mg-evergreen-on-dark); }

/* ── timeline: events are the household (plum), computed transit is the system (evergreen) ── */
.mg-track { position: relative; }
.mg-track__tick { position: absolute; top: 18px; bottom: 0; border-left: 1px solid var(--mg-rule-strong); }
.mg-track__time { position: absolute; top: 0; font-family: var(--mg-font-mono); font-size: 11px; color: var(--mg-ink-faint); }
.mg-track__bar { position: absolute; top: 0; height: 46px; border-radius: 6px; background: var(--mg-plum); display: flex; align-items: center; padding: 0 14px; font-family: var(--mg-font-mono); font-size: 12.5px; color: var(--mg-plum-fg); }
.mg-track__drive { position: absolute; top: 0; height: 46px; border-radius: 6px; border: 1px dashed var(--mg-evergreen); background: var(--mg-evergreen-wash); display: flex; align-items: center; justify-content: center; font-family: var(--mg-font-mono); font-size: 11.5px; color: var(--mg-evergreen); }
.mg-track__clash { position: absolute; background: var(--mg-conflict-wash); border-left: 1.5px solid var(--mg-conflict); border-right: 1.5px solid var(--mg-conflict); }

/* ── layer table ── */
.mg-table { width: 100%; border-collapse: collapse; }
.mg-table thead th { font-family: var(--mg-font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mg-ink-faint); text-align: left; padding: 16px 28px; background: var(--mg-band); border-bottom: 1px solid var(--mg-rule); }
.mg-table tbody td { padding: 20px 28px; border-bottom: 1px solid var(--mg-rule-soft); vertical-align: baseline; color: var(--mg-ink-soft); font-size: 14.5px; }
.mg-table tbody tr:last-child td { border-bottom: none; }
.mg-table td.mg-td-layer { font-family: var(--mg-font-mono); font-size: 13.5px; color: var(--mg-ink); white-space: nowrap; }

/* ── layout helpers ── */
.mg-stack { display: flex; flex-direction: column; gap: 20px; }
.mg-row   { display: flex; align-items: center; gap: 16px; }
.mg-grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.mg-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.mg-section { padding: 96px 160px; }