/* Campus Insights submission console — surface-specific layer on top of the
   console design system (css/styles.css). Only what the base (a read-only
   analytics console) doesn't carry: form controls (per the design-system
   form-controls spec) + the request form + the job board. All values are system
   tokens — no new palette. Color is STATE (queued/running/done/failed → the
   verdict states), never decoration. */

/* ── layout: a narrow, single-column operating surface (this is an input form,
   not a dense analytics grid) ─────────────────────────────────────────────── */
.page.submit { max-width: 860px; }
.stack { display: flex; flex-direction: column; gap: 10px; }

.panel {
  background: var(--bg-1);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 20px 22px;
}

/* ── form controls — from consoles/03-components/form-controls.md ──────────── */
.field { margin-bottom: 16px; }
.eyebrow {                         /* mono uppercase label above the control */
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--t-3);
  margin-bottom: 6px;
}
.eyebrow .req { color: var(--go); }
.hint {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--t-4);
  margin: 0 0 8px;
  line-height: 1.5;
}
.hint code { color: var(--t-3); }

input[type="text"], textarea {
  width: 100%;
  font-family: inherit;
  color: inherit;
  font-size: 13px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px 10px;
  line-height: 1.4;
  transition: border-color 120ms ease, background 120ms ease;
}
input[type="text"]:hover, textarea:hover { border-color: var(--line-bright); }
input[type="text"]:focus, textarea:focus {
  outline: none; border-color: var(--go); background: var(--bg-3);
}
input::placeholder, textarea::placeholder { color: var(--t-4); }
textarea { resize: vertical; min-height: 84px; }

/* option rows (orientation radios, length checkboxes) */
.opts { display: flex; flex-wrap: wrap; gap: 10px; }
.opt {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--t-2); cursor: pointer;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 7px 12px;
  transition: border-color 120ms ease, color 120ms ease;
}
.opt:hover { border-color: var(--line-bright); color: var(--t-1); }
.opt input { accent-color: var(--go); }
.opt:has(input:checked) { border-color: var(--go-line); color: var(--t-1); background: var(--go-bg); }

/* collapsible speaker override */
details.override { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 14px; }
details.override > summary {
  cursor: pointer; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .06em; text-transform: uppercase; color: var(--t-3);
  list-style: none;
}
details.override > summary::-webkit-details-marker { display: none; }
details.override > summary::before { content: "▸ "; color: var(--t-4); }
details.override[open] > summary::before { content: "▾ "; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin-top: 12px; }
@media (max-width: 620px) { .grid3 { grid-template-columns: 1fr; } }

/* primary action — accent = "go" (action), the one saturated control */
.btn-go {
  font-family: var(--font-sans); font-weight: 600; font-size: 13px;
  letter-spacing: .02em; text-transform: uppercase;
  background: var(--go); color: var(--bg-0);
  border: 0; border-radius: var(--radius); padding: 10px 20px; cursor: pointer;
  transition: opacity 120ms ease;
}
.btn-go:hover { opacity: .88; }
.btn-go:disabled { opacity: .45; cursor: default; }

.formmsg { font-family: var(--font-mono); font-size: 12px; margin-top: 12px; line-height: 1.5; }
.formmsg.ok  { color: var(--go); }
.formmsg.bad { color: var(--skip); }

/* ── job board — compact tiles, rail + pill carry the state ───────────────── */
.jobs { display: flex; flex-direction: column; gap: 8px; }
.job {
  display: flex; align-items: stretch; gap: 0;
  background: var(--bg-2); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
}
.job-rail { width: 3px; flex: none; background: var(--t-4); }
.job.s-queued  .job-rail { background: var(--t-3); }
.job.s-running .job-rail { background: var(--test); }
.job.s-done    .job-rail { background: var(--go); }
.job.s-failed  .job-rail { background: var(--skip); }
.job-body { padding: 12px 14px; flex: 1; min-width: 0; }
.job-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.job-title { color: var(--t-1); font-weight: 500; font-size: 13.5px; word-break: break-word; }
.job-meta { font-family: var(--font-mono); font-size: 11px; color: var(--t-3); margin-top: 4px; }
.job-out { margin-top: 8px; }
.job-out a { color: var(--go); text-decoration: none; font-family: var(--font-mono); font-size: 12px; }
.job-out a:hover { text-decoration: underline; }
.job-warn { color: var(--test); font-family: var(--font-mono); font-size: 11.5px; display: block; margin: 3px 0; }
.job-err  { color: var(--skip); font-family: var(--font-mono); font-size: 11.5px; margin-top: 6px; }

/* status pill — the verdict states, reused as job lifecycle */
.pill.s-queued  { background: var(--bg-3); color: var(--t-3); border-color: var(--line-2); }
.pill.s-running { background: var(--test-bg); color: var(--test); border-color: var(--test-line); }
.pill.s-done    { background: var(--go-bg);   color: var(--go);   border-color: var(--go-line); }
.pill.s-failed  { background: var(--skip-bg); color: var(--skip); border-color: var(--skip-line); }