/*
 * The Marvin console (docs/designs/marvin-console.md). Grey by default, as the approved wireframe:
 * colour is kept for meaning only -- red for what alerts or failed, amber for what needs watching,
 * a blue edge for the row the drawer shows.
 */
* { box-sizing: border-box; }
:root { --line: #c8c8c8; --muted: #6b6b6b; --bad: #b3261e; --warn: #9a6700; --sel: #1d4ed8; --bg-alert: #f4f4f4; }
html, body { margin: 0; }
body { font: 13px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; color: #1f1f1f; background: #fff; }
.mono, td.num, .tail, .steps, pre, code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
button.link, button.act { font: inherit; color: inherit; background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; }
button.link:hover { color: var(--sel); }
.muted { color: var(--muted); }
.bad { color: var(--bad); }
.warn { color: var(--warn); }
.stale { color: #9a9a9a; }

/* header */
header { display: flex; align-items: flex-start; border-bottom: 1px solid var(--line); }
#header { flex: 1; }
.strip { display: flex; flex-wrap: wrap; gap: 6px 22px; align-items: baseline; padding: 10px 16px 4px; }
.strip .brand { font-size: 15px; }
.fig b { font-size: 14px; }
#conn { padding: 12px 0 0 16px; max-width: 40%; text-align: right; }
.conn { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); }
.conn.busy { color: var(--warn); }
.conn.blind { color: #fff; background: var(--bad); padding: 2px 8px; font-weight: 600; }
.did { padding: 0 16px 8px; color: #333; }
.signout { padding: 10px 16px; }
body.is-blind main, body.is-blind #alerts { opacity: 0.55; }

/* notices and alerts */
#notices .partly, #notices .skew { padding: 6px 16px; background: #fff4e5; border-bottom: 1px solid #e8c89a; }
#notices .skew { background: #fde8e8; border-color: #e7a3a3; }
.alerts { border-bottom: 1px dashed #999; background: var(--bg-alert); }
.alert { padding: 6px 16px; }
.alert .bang { font-weight: 700; color: var(--bad); }
.alert.acked { color: var(--muted); }
.alert.acked .bang { color: var(--muted); }
.alert.halt { background: #fde8e8; font-weight: 600; }
.alert-acked { padding: 4px 16px; }

/* layout */
.wrap { display: grid; grid-template-columns: minmax(0, 1fr); }
body.has-drawer .wrap { grid-template-columns: minmax(0, 1fr) minmax(360px, 40%); }
main { padding: 4px 16px 24px; min-width: 0; }
#drawer { border-left: 1px solid var(--line); padding: 12px 16px 24px; min-width: 0; max-height: calc(100vh - 80px); overflow: auto; position: sticky; top: 0; }
@media (max-width: 900px) {
  body.has-drawer .wrap { grid-template-columns: minmax(0, 1fr); }
  #drawer { border-left: 0; border-top: 1px solid var(--line); max-height: none; position: static; }
}
h2 { font-size: 12px; color: #555; margin: 16px 0 6px; font-weight: 600; }
h3 { margin: 4px 0; font-size: 15px; }

/* running now */
.card { border: 1px solid #999; padding: 8px 10px; margin-bottom: 8px; }
.card.quiet, .card.stale { border-color: var(--warn); }
.card.ambiguous { border-style: dashed; }
.card-head { font-weight: 600; text-align: left; }
button.card-head { font: inherit; font-weight: 600; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; }
button.card-head:hover { color: var(--sel); text-decoration: underline; }
.run + .run { margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--line); }
.tail { color: #444; font-size: 12px; margin-top: 6px; border-left: 2px solid #bbb; padding-left: 8px; overflow-wrap: anywhere; }
.nothing { color: #333; }

/* recent runs */
.filters { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 6px; color: #444; }
.filters select { font: inherit; }
.filters .toggle { margin-left: auto; }
table { width: 100%; border-collapse: collapse; }
th { text-align: left; font-weight: 600; color: #555; border-bottom: 1px solid #999; padding: 4px 6px; font-size: 12px; white-space: nowrap; }
td { border-bottom: 1px solid #e3e3e3; padding: 4px 6px; vertical-align: top; }
td.num { text-align: right; white-space: nowrap; }
td.reason { overflow-wrap: anywhere; }
tr.click { cursor: pointer; }
tr.click:hover td { background: #f6f8ff; }
tr.alerting td.out { color: var(--bad); font-weight: 700; }
td.nowrap { white-space: nowrap; }
.steps details pre { margin: 4px 0; max-height: 320px; }
.steps summary { cursor: pointer; }
tr.sel td { background: #eef2ff; }
tr.sel td:first-child { box-shadow: inset 3px 0 0 var(--sel); }

/* drawer */
.drawer-bar { text-align: right; }
.key { overflow-wrap: anywhere; font-size: 12px; }
.kv { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 2px 10px; margin: 10px 0; }
.kv .k { color: var(--muted); }
.kv .v { overflow-wrap: anywhere; }
.steps { list-style: none; padding: 0 0 0 4px; margin: 6px 0; font-size: 12px; }
.steps li { padding: 2px 0 2px 12px; border-left: 1px solid #bbb; white-space: pre-wrap; overflow-wrap: anywhere; }
.steps li.result { color: #0f5132; }
.steps li.other, .steps li.system, .steps li.note { color: var(--muted); }
.steps li.fragment { color: var(--warn); }
.steps li.sub summary { cursor: pointer; color: #444; }
pre { white-space: pre-wrap; overflow-wrap: anywhere; background: #f7f7f7; padding: 8px; font-size: 12px; max-height: 420px; overflow: auto; }
pre.stderr { background: #fff7f7; }

/* sign-in */
body.signin { display: grid; place-items: center; min-height: 100vh; background: #f4f4f4; }
.signin-box { background: #fff; border: 1px solid var(--line); padding: 24px 28px; width: 320px; display: grid; gap: 12px; }
.signin-box h1 { margin: 0 0 4px; font-size: 18px; }
.signin-box label { display: grid; gap: 4px; color: #333; }
.signin-box input { font: inherit; padding: 6px 8px; border: 1px solid #999; }
.signin-box button { font: inherit; padding: 7px; border: 1px solid #333; background: #1f1f1f; color: #fff; cursor: pointer; }
.signin-error { color: var(--bad); margin: 0; }