:root {
  --brand: #1e3a5f;
  --brand-light: #f0f4f8;
  --success: #2c7a4b;
  --warning: #f9a825;
  --danger: #b3261e;
  --border: #dde3ea;
}

* { box-sizing: border-box; }

body {
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  color: #1a1a1a;
  background: #fafbfc;
  margin: 0;
}

.site-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 32px;
  background: var(--brand);
  color: white;
}

.site-header .brand {
  color: white;
  text-decoration: none;
  font-weight: 700;
  font-size: 1.2em;
}

.container {
  max-width: 720px;
  margin: 32px auto;
  padding: 0 16px;
}

/* Job page only — wider container so the two-column layout below (existing
   cards on the left, live activity feed on the right) has room without
   requiring the page to scroll. Doesn't affect the upload page, which has
   no main_class block and keeps the default centered 720px container. */
.container.job-page {
  max-width: 1200px;
}

.job-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 24px;
  align-items: start;
}

@media (max-width: 860px) {
  .job-grid {
    grid-template-columns: 1fr;
  }
}

.card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 20px;
}

.card h1 {
  font-size: 1.2em;
  margin-top: 0;
  color: var(--brand);
}

.btn {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font-size: 0.95em;
  margin-right: 8px;
}

.btn-primary { background: var(--brand); color: white; }
.btn-secondary { background: var(--brand-light); color: var(--brand); border: 1px solid var(--border); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.status, .hint { color: #666; font-size: 0.9em; margin-top: 10px; }
.error { color: var(--danger); font-size: 0.9em; }

.status-badge {
  display: inline-block;
  padding: 3px 12px;
  border-radius: 12px;
  font-weight: 600;
  background: #eee;
}
.status-done { background: #e3f3e9; color: var(--success); }
.status-needs_review { background: #fff4de; color: #a3720b; }
.status-failed { background: #fbe7e5; color: var(--danger); }
.status-processing, .status-pending { background: var(--brand-light); color: var(--brand); }

pre#json-report {
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 16px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.8em;
  max-height: 500px;
}

ul#proposal-list {
  padding-left: 20px;
  font-size: 0.9em;
}

ul#events-list {
  list-style: none;
  padding-left: 0;
  margin: 0;
  font-size: 0.9em;
  max-height: 60vh;
  overflow-y: auto;
}
ul#events-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
ul#events-list li:last-child { border-bottom: none; }
.events-placeholder { color: #666; font-style: italic; }

ul#flags-list {
  list-style: none;
  padding-left: 0;
  font-size: 0.9em;
  max-height: 40vh;
  overflow-y: auto;
}
.flag-item {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.flag-item:last-child { margin-bottom: 0; }
.flag-header { font-weight: 600; color: var(--brand); margin-bottom: 4px; }
.flag-error { color: var(--danger); font-size: 0.9em; margin-bottom: 8px; }
.flag-raw {
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 12px;
  border-radius: 6px;
  overflow-x: auto;
  font-size: 0.78em;
  max-height: 220px;
  margin: 0;
}

code {
  background: var(--brand-light);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.9em;
}