:root {
  --bronze: #A1611C;
  --onyx: #000;
  --chalk: #fff;
  --alabaster: #E1D9CC;
  --ecru: #F5F1E8;
  --ink: #1a1a1a;
  --muted: #6b6258;
  --line: #e3dccd;
  --gold: #15803d;
  --warn: #c2410c;
  --bad: #991b1b;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink);
  background: var(--ecru);
  font-weight: 400;
  line-height: 1.55;
}

.topbar {
  background: var(--onyx);
  color: var(--chalk);
  padding: 16px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.topbar .brand { display: flex; align-items: center; gap: 12px; }
.topbar img { height: 28px; }
.topbar .meta {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--alabaster);
}
.topbar nav { display: flex; gap: 16px; align-items: center; font-size: 13px; }
.topbar nav a { color: var(--chalk); text-decoration: none; }
.topbar nav a:hover { color: var(--alabaster); }
.topbar nav .muted { color: var(--alabaster); }
.topbar nav form.inline { display: inline; margin: 0; }
.topbar .linklike {
  background: none; border: none; color: var(--alabaster);
  font: inherit; cursor: pointer; padding: 0;
}
.topbar .linklike:hover { color: var(--chalk); }

.container { max-width: 980px; margin: 0 auto; padding: 32px 24px 96px; }

h1 { font-weight: 600; font-size: 28px; margin: 0 0 12px 0; letter-spacing: -0.01em; }
h2 { font-weight: 600; font-size: 18px; margin: 0 0 16px 0; }
h3 { font-weight: 600; font-size: 14px; color: var(--bronze); text-transform: uppercase; letter-spacing: 0.05em; margin: 16px 0 8px; }
p { margin: 0 0 12px 0; }
.muted { color: var(--muted); font-size: 13px; }
code { font-family: 'SF Mono', Menlo, monospace; font-size: 12px; background: var(--chalk); padding: 2px 6px; border-radius: 3px; color: var(--ink); }

.card {
  background: var(--chalk);
  padding: 24px 28px;
  margin: 16px 0;
  border-left: 4px solid var(--bronze);
}

/* ─── Login ─── */
.login-card {
  max-width: 380px;
  margin: 80px auto;
  background: var(--chalk);
  padding: 36px 32px;
  border-left: 4px solid var(--bronze);
  text-align: center;
}
.login-logo { width: 84px; height: 84px; margin-bottom: 12px; }
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-card .form { text-align: left; margin-top: 18px; }

/* ─── Forms ─── */
.form label, .form-inline label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 14px 0 6px;
}
.form input[type=text], .form input[type=email], .form input[type=password], .form input[type=url], .form textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  border: 1px solid var(--line);
  background: var(--chalk);
  border-radius: 4px;
}
.form textarea { resize: vertical; min-height: 80px; }
button.primary, .primary-link {
  display: inline-block;
  background: var(--bronze);
  color: var(--chalk);
  border: none;
  padding: 11px 22px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 14px;
  text-decoration: none;
  transition: background 0.15s;
}
button.primary:hover, .primary-link:hover { background: #b56e1f; }
.form-inline { display: inline; }

/* ─── Alerts ─── */
.alert {
  background: #fee2e2;
  color: var(--bad);
  padding: 12px 16px;
  margin: 12px 0;
  border-left: 3px solid var(--bad);
  font-size: 13px;
  border-radius: 3px;
}
.alert-small { color: var(--bad); font-size: 12px; }

/* ─── Status pills ─── */
.status {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.status-created { background: var(--line); color: var(--muted); }
.status-pulling, .status-transcribing, .status-ranking, .status-cutting {
  background: #fef3c7; color: var(--warn);
}
.status-picker_ready { background: var(--bronze); color: var(--chalk); }
.status-done { background: var(--gold); color: var(--chalk); }
.status-error { background: #fee2e2; color: var(--bad); }

/* ─── Project list table ─── */
.projects-table { width: 100%; border-collapse: collapse; background: var(--chalk); margin-top: 16px; }
.projects-table th, .projects-table td {
  padding: 10px 14px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.projects-table th { background: var(--alabaster); font-weight: 600; }
.projects-table a { color: var(--bronze); text-decoration: none; font-weight: 500; }
.projects-table a:hover { text-decoration: underline; }

/* ─── Project page ─── */
.project-header { margin-bottom: 20px; }
.back-link { color: var(--muted); text-decoration: none; font-size: 12px; }
.back-link:hover { color: var(--bronze); }

.conversation { margin: 16px 0; }
.msg { padding: 12px 16px; margin: 8px 0; border-radius: 4px; }
.msg-user { background: var(--ecru); border-left: 3px solid var(--bronze); }
.msg-assistant { background: var(--alabaster); border-left: 3px solid var(--onyx); }
.msg .role { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 4px; }
.msg .content { font-size: 14px; line-height: 1.5; white-space: pre-wrap; }

.brief-summary { background: var(--ecru); padding: 16px 20px; border-left: 3px solid var(--gold); margin: 16px 0; }
.brief-summary h3 { color: var(--gold); margin-top: 0; }
.brief-summary pre { font-family: inherit; white-space: pre-wrap; margin: 8px 0; font-size: 13px; }

details summary { cursor: pointer; font-size: 13px; color: var(--muted); margin-top: 16px; }
details pre { font-family: inherit; white-space: pre-wrap; font-size: 13px; margin-top: 8px; }

.stats { list-style: none; padding: 0; margin: 12px 0 16px 0; display: flex; gap: 24px; flex-wrap: wrap; }
.stats li { display: flex; flex-direction: column; gap: 2px; }
.stat-label { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.stats li strong { font-size: 18px; font-weight: 600; color: var(--bronze); }

.events { list-style: none; padding: 0; margin: 0; font-size: 12px; }
.events li { padding: 4px 0; border-bottom: 1px solid var(--line); }
.events li:last-child { border-bottom: none; }
.events code { font-size: 11px; }