:root { --ink: #1c1f26; --muted: #6b7280; --line: #e5e7eb; --accent: #1f5fbf; --ok: #15803d; --warn: #b45309; --bad: #b91c1c; --bg: #fafafa; }
* { box-sizing: border-box; }
body { margin: 0; font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); }
header.top { display: flex; gap: 1.5rem; align-items: center; padding: .6rem 1.25rem; background: #fff; border-bottom: 1px solid var(--line); }
header .brand { font-weight: 700; color: var(--ink); text-decoration: none; }
header nav a { margin-right: 1rem; color: var(--accent); text-decoration: none; }
header form.author { margin-left: auto; display: flex; gap: .5rem; align-items: center; }
main { max-width: 64rem; margin: 0 auto; padding: 1.25rem; }
h1 { font-size: 1.5rem; margin: .5rem 0 .25rem; }
h2 { font-size: 1.05rem; margin: 1.5rem 0 .5rem; color: #374151; }
section { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: .75rem 1rem; margin: .75rem 0; }
section h2 { margin-top: 0; }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; vertical-align: top; padding: .45rem .5rem; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; font-size: .85rem; }
a { color: var(--accent); }
.muted, .hint { color: var(--muted); font-size: .9rem; }
.crumbs { color: var(--muted); }
.flash { padding: .6rem .9rem; border-radius: 6px; }
.flash.error { background: #fef2f2; color: var(--bad); border: 1px solid #fecaca; }
.flash.notice { background: #f0fdf4; color: var(--ok); border: 1px solid #bbf7d0; }
.flash.warn { background: #fffbeb; color: var(--warn); border: 1px solid #fde68a; }
.state, .status { display: inline-block; padding: .1rem .5rem; border-radius: 999px; font-size: .8rem; font-weight: 600; background: #eef2ff; color: #3730a3; }
.state.DRAFT { background: #f3f4f6; color: #374151; }
.state.LAUNCHED, .status.IN_PROGRESS { background: #eff6ff; color: #1d4ed8; }
.state.AWAITING_DECISION, .status.AWAITING_DECISION { background: #fffbeb; color: var(--warn); }
.state.COMPLETED, .status.DONE, .status.COMPLETED { background: #f0fdf4; color: var(--ok); }
.state.STOPPED, .status.FAILED, .status.UNCERTAIN { background: #fef2f2; color: var(--bad); }
.status.TODO { background: #f3f4f6; color: #374151; }
.status.NOT_STARTED { background: #f9fafb; color: var(--muted); }
.status.NEEDS_INFORMATION { background: #fffbeb; color: var(--warn); }
.status.BLOCKED { background: #fef2f2; color: var(--bad); }
form.stack { display: flex; flex-direction: column; gap: .5rem; }
form.inline { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.row { display: flex; gap: .5rem; }
label.check { display: block; }
textarea, input[type=text], select { font: inherit; padding: .4rem .5rem; border: 1px solid #cbd5e1; border-radius: 6px; width: 100%; }
form.inline select, form.inline input[type=text] { width: auto; min-width: 16rem; }
button, a.button { font: inherit; padding: .45rem .9rem; border-radius: 6px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; text-decoration: none; color: var(--ink); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
button.danger { background: #fff; color: var(--bad); border-color: #fecaca; }
button[disabled] { opacity: .5; cursor: not-allowed; }
section.decision { border-color: #fde68a; background: #fffdf5; }
section.questions { border-color: #fde68a; }
section.danger { border-style: dashed; }
.card { border: 1px solid var(--line); border-radius: 6px; padding: .6rem .8rem; margin: .5rem 0; }
details { margin: .4rem 0; }
summary { cursor: pointer; }
.result { padding: .5rem .75rem; border-left: 3px solid var(--line); margin: .5rem 0; }
.result table { width: auto; }
ul.conversation { list-style: none; padding: 0; margin: 0; }
ul.conversation li { border-left: 3px solid var(--line); padding: .3rem .75rem; margin: .4rem 0; }
ul.conversation li.QUESTION { border-color: #f59e0b; }
ul.conversation li.ANSWER { border-color: var(--ok); }
ul.conversation li.DIRECTIVE, ul.conversation li.CORRECTION_REQUEST { border-color: var(--accent); }
ul.conversation li p { margin: .2rem 0 0; }
footer.technical { margin: 1.5rem 0; color: var(--muted); font-size: .9rem; }
dl.facts { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; }
dl.facts dt { color: var(--muted); }
code { font-size: .85rem; }
code.wrap { white-space: pre-wrap; word-break: break-all; }
pre.stdin { white-space: pre-wrap; background: #f8fafc; border: 1px solid var(--line); padding: .75rem; border-radius: 6px; font-size: .85rem; max-height: 40rem; overflow: auto; }
pre.diff span.added { color: var(--ok); }
pre.diff span.removed { color: var(--bad); }
nav.blocks { display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-size: .9rem; margin: .5rem 0 1rem; }
section.level h3 { font-size: .9rem; color: var(--muted); margin: .8rem 0 .3rem; }
.card.rule.inherited { background: #fafafa; border-style: dashed; }
.status.INSTRUCTION { background: #eef2ff; color: #3730a3; }
.status.CONSTRAINT { background: #ecfeff; color: #155e75; }
.team { font-size: .85rem; color: var(--muted); }
.references { font-size: .9rem; margin: .3rem 0 0 .75rem; }
.status.TO_TRY { background: #fef3c7; color: #92400e; } .status.CORRECTION_REQUESTED { background: #fee2e2; color: #991b1b; } .status.VALIDATED { background: #dcfce7; color: #166534; }
.status.SUPERSEDED { background: #f1f5f9; color: #475569; }
/* Process drawings: the layout comes from the server, the colours from here. */
.diagram { overflow-x: auto; margin: .5rem 0 1rem; }
.diagram svg { max-width: 100%; height: auto; font-family: inherit; }
.diagram .node rect { fill: #f8fafc; stroke: var(--line); stroke-width: 1.5; }
.diagram .node.TASK rect { fill: #eef2ff; stroke: #6366f1; }
.diagram .node.CALL rect { fill: #f5f3ff; stroke: #7c3aed; stroke-dasharray: 5 3; }
.diagram .node circle { fill: #fff; stroke: #64748b; stroke-width: 2; }
.diagram .node.END circle { stroke-width: 4; }
.diagram .node polygon { fill: #fffbeb; stroke: #d97706; stroke-width: 1.5; }
.diagram .node text.label { font-size: 12px; text-anchor: middle; fill: #0f172a; }
.diagram .node text.note { font-size: 10px; text-anchor: middle; fill: #64748b; }
.diagram .node text.note.independent { fill: #b45309; font-weight: 600; }
.diagram .node text.note.pushes, .diagram .node text.note.continues { fill: #4338ca; }
.diagram .node text.state { font-size: 10px; text-anchor: middle; fill: #475569; font-weight: 600; }
.diagram .node text.state.AWAITING_DECISION { fill: #b91c1c; }
.diagram .node.DONE rect { fill: #dcfce7; stroke: #16a34a; }
.diagram .node.IN_PROGRESS rect, .diagram .node.TODO rect { fill: #fef9c3; stroke: #ca8a04; }
.diagram .node.AWAITING_DECISION rect { fill: #fee2e2; stroke: #dc2626; stroke-width: 2.5; }
.diagram .edge polyline { fill: none; stroke: #94a3b8; stroke-width: 1.5; }
.diagram .edge.loop polyline { stroke: #b45309; stroke-dasharray: 6 4; }
.diagram .edge text.edge-label { font-size: 10px; fill: #64748b; text-anchor: middle; }
.diagram .arrow-head { fill: #94a3b8; }
.diagram p.legend { display: flex; gap: 1rem; font-size: .8rem; color: var(--muted); margin: .2rem 0 0; }
.diagram p.legend .key::before { content: "■ "; }
.diagram p.legend .key.agent::before { color: #6366f1; }
.diagram p.legend .key.human::before { color: #dc2626; }
.diagram p.legend .key.loop::before { color: #b45309; }
ul.tree, ul.tree ul { list-style: none; margin: .2rem 0 .2rem .9rem; padding-left: .6rem; border-left: 1px solid var(--line); }
ul.tree .node { font-weight: 600; }
ul.tree .node.unit { color: #3730a3; }
ul.tree .node.team { color: #155e75; }
ul.tree .node.agent { font-weight: 500; }