/* nisse-ui: plain, readable, no external assets (X6). */
:root {
  --bg: #fbfbfa; --fg: #1d1d1b; --muted: #6b6b66; --line: #deded8;
  --panel: #f2f2ee; --accent: #2f5d8a; --bad: #a3322a; --warn: #8a5a00;
  --new: #e3f0e0; --change: #fbe6c8; --flag: #f6d9d6;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #161615; --fg: #e6e6e1; --muted: #9a9a93; --line: #34342f;
    --panel: #20201e; --accent: #8fb8e0; --bad: #ec8a80; --warn: #e2b462;
    --new: #233523; --change: #3d2f17; --flag: #432522;
  }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--fg);
  font: 15px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
main { max-width: 1100px; margin: 0 auto; padding: 0 16px 64px; }
a { color: var(--accent); }
h1 { font-size: 1.5rem; margin: 1.2rem 0 .4rem; }
h2 { font-size: 1.15rem; margin: 1.8rem 0 .6rem; border-bottom: 1px solid var(--line); }
h3 { font-size: 1rem; margin: 1.2rem 0 .4rem; }
.top { border-bottom: 1px solid var(--line); background: var(--panel); }
.crumbs { max-width: 1100px; margin: 0 auto; padding: 8px 16px; }
.muted, .meta { color: var(--muted); }
.meta { font-size: .9rem; }
.bad { color: var(--bad); }
.path { font-family: var(--mono); font-size: .85rem; word-break: break-all; }
pre, code { font-family: var(--mono); font-size: .85rem; }
pre { background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 8px 10px; overflow-x: auto; white-space: pre-wrap; word-break: break-word; margin: .4rem 0; }
table { border-collapse: collapse; width: 100%; margin: .6rem 0; font-size: .92rem; }
th, td { text-align: left; vertical-align: top; padding: 4px 8px; border-bottom: 1px solid var(--line); }
th { color: var(--muted); font-weight: 600; }
tr.active td { background: var(--new); }
table.facts th { width: 14%; white-space: nowrap; }
table.log td.text { font-family: var(--mono); font-size: .8rem; word-break: break-word; }
details { margin: .4rem 0; }
summary { cursor: pointer; }
.tag { display: inline-block; font-size: .78rem; padding: 0 6px; border-radius: 3px;
  background: var(--panel); border: 1px solid var(--line); margin-right: 2px; }
.tag.warn { color: var(--warn); }
.flag { display: inline-block; font-size: .78rem; padding: 0 6px; border-radius: 3px;
  background: var(--flag); color: var(--bad); margin-left: 4px; }
.badge { display: inline-block; font-size: .78rem; padding: 0 6px; border-radius: 3px; }
.badge.new { background: var(--new); }
.badge.change { background: var(--change); }
.note { background: var(--panel); border-left: 3px solid var(--accent); padding: 6px 10px; }
.circle { background: var(--flag); color: var(--bad); padding: 4px 10px; border-radius: 4px; }
.timeline > * { margin: .5rem 0; }
.step { border-left: 3px solid var(--line); padding: 2px 10px; }
.step .text { white-space: pre-wrap; word-break: break-word; }
.step-user_message { border-left-color: var(--accent); }
.step-gate_opened, .step-fact { border-left-color: var(--warn); }
.run { border: 1px solid var(--line); border-radius: 6px; padding: 4px 10px; background: var(--bg); }
.run .run { margin: .4rem 0 .4rem 12px; }
.run > summary { padding: 4px 0; }
.turn { padding: 4px 0 4px 8px; border-top: 1px dashed var(--line); }
.turn.flagged { background: var(--flag); }
.turn-no { font-weight: 600; margin-right: 6px; }
.turn .reply { font-family: var(--mono); font-size: .82rem; color: var(--muted); word-break: break-word; }
.told { font-size: .82rem; color: var(--warn); }
.pager { display: flex; justify-content: space-between; margin-top: 1rem; }
.msg { border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin: .6rem 0; }
.msg.first-change { border-color: var(--warn); border-width: 2px; }
.msg-head { font-size: .88rem; }
.msg-head .role { font-weight: 700; text-transform: uppercase; letter-spacing: .03em; margin-right: 4px; }
.role-user { border-left: 4px solid var(--accent); }
.role-assistant { border-left: 4px solid #6a8f4e; }
.role-tool { border-left: 4px solid var(--muted); }
.role-system { border-left: 4px solid var(--warn); }
ul.from { margin: .3rem 0; padding-left: 1.2rem; font-size: .85rem; }
ul.from .text { font-family: var(--mono); font-size: .8rem; color: var(--muted); }
.toolcall { margin: .3rem 0; }
@media (max-width: 640px) {
  table.facts th, table.facts td { display: block; width: auto; border: 0; }
}
/* the overview (M6.6c) */
.agent { margin-bottom: 2rem; }
.now p { margin: .3rem 0; }
.running { background: var(--new); padding: 4px 10px; border-radius: 4px; }
tr.held td { background: var(--change); }
.why { font-size: .85rem; color: var(--muted); word-break: break-word; }
.out { display: inline-block; margin-right: 8px; white-space: nowrap; }
table.items td:first-child { width: 38%; }
@media (max-width: 640px) {
  table.items thead { display: none; }
  table.items td { display: block; width: auto !important; border: 0; padding: 2px 8px; }
  table.items tr { display: block; border-bottom: 1px solid var(--line); padding: 4px 0; }
}