/* One set of names, two skins. Every colour below is a token so a page can
   put on a different one — see chat.css, which makes the chat dark — without
   restating what a card or a button is. */
:root {
  --bg:#f6f7f9; --card:#fff; --ink:#1b1f24; --muted:#6b7280; --line:#e5e7eb;
  --accent:#2563eb; --accent-ink:#fff; --accent-soft:#f8faff; --accent-line:#c7d2fe;
  --bad:#b91c1c; --bad-soft:#fee2e2; --ok:#15803d; --ok-soft:#dcfce7;
  --soft:#fafafa; --field:#fff; --mine:#eef2ff;
  --pill:#eef2ff; --pill-ink:#3730a3;
  --code-bg:#0f172a; --code-ink:#e2e8f0;
}
* { box-sizing:border-box }
body { margin:0; font:14px/1.45 system-ui,-apple-system,Segoe UI,sans-serif; color:var(--ink); background:var(--bg) }
header { background:var(--card); border-bottom:1px solid var(--line); padding:12px 24px; display:flex; gap:16px; align-items:baseline }
header a { color:inherit; text-decoration:none; font-weight:600 }
header .crumb { color:var(--muted) }
main { max-width:1100px; margin:24px auto; padding:0 24px; display:grid; gap:20px }
.card { background:var(--card); border:1px solid var(--line); border-radius:8px; padding:16px }
.card h2 { margin:0 0 12px; font-size:15px }
.row { display:flex; gap:8px; flex-wrap:wrap; align-items:center }
input, select, textarea { font:inherit; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--field); color:var(--ink) }
input, textarea { min-width:220px }
textarea { width:100%; min-height:60px; font-family:ui-monospace,Menlo,monospace }
button { font:inherit; padding:6px 12px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); border-radius:6px; cursor:pointer }
button.quiet { background:var(--card); color:var(--ink); border-color:var(--line) }
button.danger { background:var(--card); color:var(--bad); border-color:var(--bad) }
table { width:100%; border-collapse:collapse }
th, td { text-align:left; padding:8px 6px; border-bottom:1px solid var(--line); vertical-align:top }
th { color:var(--muted); font-weight:500; font-size:12px }
code, pre { font-family:ui-monospace,Menlo,monospace; font-size:12px }
pre { background:var(--code-bg); color:var(--code-ink); padding:12px; border-radius:6px; overflow:auto; margin:0; white-space:pre-wrap; word-break:break-all }
.muted { color:var(--muted) }
.pill { display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; background:var(--pill); color:var(--pill-ink) }
.pill.ok { background:var(--ok-soft); color:var(--ok) }
.pill.bad { background:var(--bad-soft); color:var(--bad) }
#feed { max-height:360px; overflow:auto; display:flex; flex-direction:column-reverse; gap:6px }
#feed .msg { display:grid; grid-template-columns:80px 1fr; gap:8px; padding:6px 8px; border:1px solid var(--line); border-radius:6px; background:var(--soft) }
#feed .msg .subj { font-weight:600; font-family:ui-monospace,Menlo,monospace; font-size:12px }
.error { color:var(--bad) }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:20px }
@media (max-width:800px){ .grid2 { grid-template-columns:1fr } }

/* manHub */
[hidden] { display:none !important }
.auth { max-width:420px; margin:56px auto; display:grid; gap:16px }
.auth form { display:grid; gap:8px }
.auth input { min-width:0; width:100% }
.auth .tabs { display:flex; gap:8px; margin-bottom:4px }
.auth .tabs button { background:var(--card); color:var(--muted); border-color:var(--line) }
.auth .tabs button[aria-selected=true] { color:var(--ink); border-color:var(--accent) }
.handover { border:1px solid var(--accent); border-radius:6px; padding:12px; margin-top:12px; background:var(--accent-soft); display:grid; gap:8px }
.handover p { margin:0 }
.tools { display:grid; gap:8px }
.tool { border:1px solid var(--line); border-radius:6px; padding:8px 10px; display:grid; gap:4px; background:var(--soft) }
.tool .name { font-family:ui-monospace,Menlo,monospace; font-weight:600 }
header .who { margin-left:auto; color:var(--muted); display:flex; gap:12px; align-items:baseline }
.stat { display:flex; gap:20px }
.stat div { display:grid }
.stat b { font-size:20px }
.ok { color:var(--ok) }

/* a run */
.talk { display:grid; gap:10px }
.said { display:grid; gap:2px; padding:8px 10px; border:1px solid var(--line); border-radius:8px; background:var(--soft); max-width:80% }
.said.mine { justify-self:end; background:var(--mine); border-color:var(--accent-line) }
.said .who { font-size:12px; color:var(--muted) }
.said .what { white-space:pre-wrap; font-family:inherit }
.said .at { font-size:11px }
.steps { display:grid; gap:4px; max-height:320px; overflow:auto }
.step { display:grid; grid-template-columns:80px 1fr; gap:8px; padding:4px 6px; border-bottom:1px solid var(--line); font-size:13px }
.step.bad { color:var(--bad) }
.step.muted { color:var(--muted) }

/* One run's transcript, on the run page. The chat page lays its own out, in
   chat.css, where the talk fills the window instead of a box on a page. */
#talk { max-height:52vh; overflow:auto }

a.button { font:inherit; padding:6px 12px; border:1px solid var(--accent); background:var(--accent); color:var(--accent-ink); border-radius:6px; cursor:pointer; text-decoration:none; display:inline-block }
a.button.quiet { background:var(--card); color:var(--ink); border-color:var(--line) }