/* DevLink console — house design system.
 *
 * Tokens below are the workspace system (docs/UI-DESIGN-SYSTEM.md), which is the
 * authority. Two rules carry most of the look, and both are checkable:
 *
 *   1. Colour comes from a token. No raw hex outside this :root block.
 *   2. Text is white at an opacity, never a grey hex. rgba(255,255,255,.6) is
 *      correct against every surface in the ladder; #8b97ab is correct against
 *      exactly one and wrong the moment the surface underneath changes.
 *
 * Deliberate deviation: the shell is 1280px, not the documented 864px. That
 * figure governs prose, where line length is the constraint; this is a
 * two-column operations view where column legibility is. Recorded here so it
 * reads as a decision rather than as drift.
 */

:root {
  /* Depth ladder — each layer slightly lighter. Hierarchy from colour, not shadow. */
  --bg-deepest: #0f0f18;
  --bg-base: #14141f;
  --bg-panel: #1a1a28;
  --bg-elevated: #1f1f2c;
  --bg-row: #21212f;
  --bg-subheader: #262634;
  --bg-divider: #282834;
  --bg-popup: #2a2939;

  /* Text — white at opacity. */
  --text-caption: #ffffff;
  --text-primary: rgba(255, 255, 255, 0.8);
  --text-secondary: rgba(255, 255, 255, 0.6);
  --text-muted: rgba(255, 255, 255, 0.5);
  --text-dim: rgba(255, 255, 255, 0.4);
  --text-faint: rgba(255, 255, 255, 0.3);

  /* Borders + interactive states. */
  --border: rgba(255, 255, 255, 0.06);
  --border-button: rgba(255, 255, 255, 0.09);
  --border-input: rgba(255, 255, 255, 0.12);
  --surface-hover: rgba(255, 255, 255, 0.04);
  --surface-selected: rgba(255, 255, 255, 0.08);
  --surface-pressed: rgba(255, 255, 255, 0.12);

  /* Accent. */
  --accent: #205dc2;
  --accent-hover: #3575de;
  --accent-light: #5190ec;
  --accent-muted: rgba(32, 93, 194, 0.2);
  --link: #377ae6;

  /* Semantic. */
  --success: #34db80;
  --success-muted: rgba(52, 219, 128, 0.15);
  --danger: #cb4b42;
  --danger-muted: rgba(203, 75, 66, 0.15);
  --warning: #f2994a;
  --warning-muted: rgba(242, 153, 74, 0.15);
  --error: #eb5757;

  /* 8px grid. */
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px;
  --r-sm: 4px; --r-md: 8px; --r-lg: 12px;
  --row-h: 44px;
  --control-h: 40px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg-deepest);
  color: var(--text-primary);
  font: 400 14px/1.25rem "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ── layout ───────────────────────────────────────────────────────────────── */

.wrap { max-width: 1280px; margin: 0 auto; padding: var(--s5) var(--s4) var(--s6); overflow-x: hidden; }

.top {
  display: flex; align-items: center; gap: var(--s4);
  margin-bottom: var(--s5); padding-bottom: var(--s4);
  border-bottom: 1px solid var(--border); flex-wrap: wrap;
}
.brand { font-size: 1rem; font-weight: 600; color: var(--text-caption); letter-spacing: -0.01em; }
.brand .muted { font-weight: 400; }
.counts { display: flex; align-items: center; gap: var(--s3); margin-left: auto; flex-wrap: wrap; font-size: 0.75rem; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); align-items: start; }
@media (max-width: 900px) { .grid { grid-template-columns: 1fr; gap: var(--s4); } }
.col { min-width: 0; }

/* ── primitives ───────────────────────────────────────────────────────────── */

/* Section heading — 11px uppercase label, optional count chip pushed right. */
.section-heading {
  display: flex; align-items: center; gap: var(--s2);
  margin: var(--s5) 0 var(--s2); min-height: 20px;
}
.col > .section-heading:first-child { margin-top: 0; }
.section-heading > span:first-child {
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-dim);
}
.section-heading .count { margin-left: auto; }

.count {
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em;
  color: var(--text-dim); background: var(--surface-selected);
  border-radius: var(--r-sm); padding: 2px var(--s2); white-space: nowrap;
}
.count-alert { color: var(--warning); background: var(--warning-muted); }

.badge {
  display: inline-flex; align-items: center;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.02em;
  border-radius: var(--r-sm); padding: 2px var(--s2);
  color: var(--text-secondary); background: var(--surface-selected);
  white-space: nowrap;
}
.b-running, .b-starting, .b-queued, .b-claimed { color: var(--accent-light); background: var(--accent-muted); }
.b-completed, .b-done, .b-open { color: var(--success); background: var(--success-muted); }
.b-failed, .b-killed, .b-interrupted, .b-stuck { color: var(--error); background: var(--danger-muted); }
.b-needs_human, .b-waiting_approval, .b-verifying { color: var(--warning); background: var(--warning-muted); }

.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-faint); flex: none; }
.s-running, .s-starting, .s-queued, .s-claimed { background: var(--accent-light); }
.s-completed { background: var(--success); }
.s-failed, .s-killed, .s-interrupted { background: var(--error); }
.s-waiting_approval { background: var(--warning); }

/* Empty state — a line for what is absent, a fainter one for what fills it. */
.empty {
  display: flex; flex-direction: column; gap: var(--s1);
  padding: var(--s4) 0; color: var(--text-muted); font-size: 0.875rem;
}
.empty small { color: var(--text-faint); font-size: 0.75rem; }

.muted { color: var(--text-secondary); }
.dim { color: var(--text-dim); }
.small { font-size: 0.75rem; }
.warn { color: var(--warning); }
.alert { color: var(--error); font-weight: 600; }
.mono { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.75rem; }

code {
  background: var(--bg-elevated); border-radius: var(--r-sm);
  padding: 1px var(--s1); font-size: 0.75rem;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
}

/* ── controls ─────────────────────────────────────────────────────────────── */

.token {
  height: var(--control-h); width: 220px;
  background: var(--bg-elevated); border: 1px solid var(--border-input);
  color: var(--text-primary); border-radius: var(--r-md);
  padding: 0 var(--s3); font-size: 0.875rem; font-family: inherit;
}
.token::placeholder { color: var(--text-faint); }
.token:focus { outline: none; border-color: var(--accent); }

button { font-family: inherit; }

.link {
  background: none; border: none; color: var(--link);
  cursor: pointer; font-size: 0.75rem; padding: 0;
}
.link:hover { color: var(--accent-light); }

.btn {
  height: 28px; display: inline-flex; align-items: center; gap: var(--s1);
  padding: 0 var(--s3); border-radius: var(--r-sm); cursor: pointer;
  font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  background: var(--surface-selected); border: 1px solid var(--border-button);
  color: var(--text-primary);
}
.btn:hover:not(:disabled) { background: var(--surface-pressed); }
.btn:disabled { color: var(--text-faint); cursor: not-allowed; }
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--text-caption); }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-danger { color: var(--error); }

/* ── cards + rows ─────────────────────────────────────────────────────────── */

.card {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: var(--s3) var(--s4); margin-bottom: var(--s2);
}

/* Project card internals. The objective is clamped on purpose: these are whole
 * briefings, hundreds of words with embedded constraints, and an unclamped card
 * turns the column into a wall the eye slides off. Two lines is enough to tell
 * one project from another; the detail belongs behind the card, not on it. */
.proj-head { display: flex; align-items: center; gap: var(--s2); }
.proj-name { flex: 1; min-width: 0; font-weight: 600; color: var(--text-caption); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.proj-obj {
  margin: var(--s1) 0 var(--s2); font-size: 0.75rem; line-height: 1rem;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.proj-stats { display: flex; align-items: center; gap: var(--s2); flex-wrap: wrap; font-size: 0.75rem; color: var(--text-dim); }
.fanout { color: var(--accent-light); font-weight: 600; }

.row {
  display: flex; align-items: center; gap: var(--s2);
  min-height: var(--row-h); padding: var(--s2) var(--s3);
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-md); margin-bottom: var(--s1);
  cursor: pointer; flex-wrap: wrap;
}
.row:hover { background: var(--surface-hover); }
.row-title { flex: 1; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row-meta { font-size: 0.75rem; color: var(--text-dim); white-space: nowrap; }
@media (max-width: 560px) { .row-meta { display: none; } }

/* The escalation rail — the one surface allowed to raise its voice. */
.escalation {
  background: var(--warning-muted); border: 1px solid var(--warning);
  border-radius: var(--r-lg); padding: var(--s2) var(--s3) var(--s3); margin-bottom: var(--s4);
}
.escalation .section-heading { margin-top: var(--s1); }
.escalation .row { background: var(--bg-panel); }
.appr { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) 0; flex-wrap: wrap; }
.appr-actions { margin-left: auto; display: flex; gap: var(--s1); }

.notice {
  padding: var(--s3) var(--s4); border-radius: var(--r-md); margin-bottom: var(--s3);
  background: var(--bg-panel); border: 1px solid var(--border); color: var(--text-secondary);
}
.notice.error { border-color: var(--danger); color: var(--error); background: var(--danger-muted); }

/* ── overlay / transcript ─────────────────────────────────────────────────── */

.overlay {
  position: fixed; inset: 0; background: rgba(15, 15, 24, 0.72);
  display: flex; align-items: flex-start; justify-content: center;
  padding: var(--s6) var(--s4); z-index: 20; overflow-y: auto;
}
.sheet {
  background: var(--bg-panel); border: 1px solid var(--border);
  border-radius: var(--r-lg); width: min(880px, 100%);
  padding: var(--s4); cursor: default;
}
.sheet-head { display: flex; align-items: flex-start; gap: var(--s3); margin-bottom: var(--s3); }
.sheet-title { font-size: 1rem; font-weight: 600; color: var(--text-caption); }
.x {
  margin-left: auto; background: none; border: none; cursor: pointer;
  color: var(--text-dim); font-size: 1rem; line-height: 1; padding: var(--s1);
}
.x:hover { color: var(--text-primary); }

.exit {
  background: var(--bg-elevated); border-radius: var(--r-md);
  padding: var(--s2) var(--s3); margin-bottom: var(--s3);
  font-size: 0.75rem; color: var(--text-secondary); white-space: pre-wrap;
}

.transcript { display: flex; flex-direction: column; gap: var(--s1); }
.t-item {
  display: flex; gap: var(--s3); padding: var(--s2) var(--s3);
  background: var(--bg-elevated); border-radius: var(--r-md);
  border-left: 2px solid transparent;
}
.t-type {
  flex: none; width: 88px; padding-top: 2px;
  font-size: 0.6875rem; font-weight: 600; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--text-dim);
}
.t-body {
  min-width: 0; flex: 1; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace; font-size: 0.75rem;
  color: var(--text-secondary);
}
.t-error { border-left-color: var(--error); }
.t-status { border-left-color: var(--border-button); }
.t-tool_call, .t-tool_result { border-left-color: var(--accent); }

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--surface-selected); border-radius: var(--r-sm); }
::-webkit-scrollbar-thumb:hover { background: var(--surface-pressed); }