/* pokrok — thin orange outlines, no rounding, restrained colour. */

:root {
  --radius: 0;
  --border: 1px;

  --bg: #ffffff;
  --bg-sunken: #f6f5f3;
  --bg-raised: #ffffff;
  --bg-hover: #f0eeea;
  --fg: #141414;
  --fg-muted: #6a6a6a;
  --fg-faint: #9a9a9a;
  --line: #d9d5cf;
  --line-strong: #b4afa7;
  --accent: #c2410c;
  --accent-hover: #9a3412;
  --accent-bg: #fff4ec;
  --accent-fg: #ffffff;
  --danger: #b42318;
  --warn: #b45309;
  --ok: #15803d;

  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px;
  --t-xs: 11px; --t-sm: 12.5px; --t-md: 14px; --t-lg: 16px; --t-xl: 20px; --t-2xl: 26px;
  --font: ui-sans-serif, system-ui, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --rail: 208px;
  --list: 264px;
}

:root[data-theme="dark"] {
  --bg: #0d0d0d;
  --bg-sunken: #080808;
  --bg-raised: #151515;
  --bg-hover: #1e1e1e;
  --fg: #ededed;
  --fg-muted: #9c9c9c;
  --fg-faint: #6e6e6e;
  --line: #2c2c2c;
  --line-strong: #454545;
  --accent: #ff7a1a;
  --accent-hover: #ff9247;
  --accent-bg: #241505;
  --accent-fg: #0d0d0d;
  --danger: #f97066;
  --warn: #fdb022;
  --ok: #4ade80;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d0d0d;
    --bg-sunken: #080808;
    --bg-raised: #151515;
    --bg-hover: #1e1e1e;
    --fg: #ededed;
    --fg-muted: #9c9c9c;
    --fg-faint: #6e6e6e;
    --line: #2c2c2c;
    --line-strong: #454545;
    --accent: #ff7a1a;
    --accent-hover: #ff9247;
    --accent-bg: #241505;
    --accent-fg: #0d0d0d;
    --danger: #f97066;
    --warn: #fdb022;
    --ok: #4ade80;
  }
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font: var(--t-md)/1.5 var(--font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; }
h1 { font-size: var(--t-xl); }
h2 { font-size: var(--t-lg); }
h3 { font-size: var(--t-md); }
p { margin: 0 0 var(--s3); }

.boot { padding: var(--s7); color: var(--fg-faint); }

/* ---------------------------------------------------------------- shell */

.shell { display: flex; height: 100vh; overflow: hidden; }

.rail {
  width: var(--rail);
  flex: 0 0 var(--rail);
  border-right: var(--border) solid var(--line);
  background: var(--bg-sunken);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: var(--s2);
  padding: var(--s4);
  border-bottom: var(--border) solid var(--line);
}
.brand b { font-size: var(--t-lg); letter-spacing: .02em; }
.brand span { font-size: var(--t-xs); color: var(--fg-faint); }

.nav { padding: var(--s2) 0; flex: 1; }
.nav a {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s2) var(--s4);
  color: var(--fg-muted);
  border-left: 2px solid transparent;
  font-size: var(--t-md);
}
.nav a:hover { background: var(--bg-hover); color: var(--fg); text-decoration: none; }
.nav a.active { color: var(--accent); border-left-color: var(--accent); background: var(--accent-bg); }
.brand .mark {
  display: inline-flex; color: var(--accent); flex: none;
  /* The row is baseline-aligned, which sits a box on the text baseline rather
     than on its optical centre. Two pixels puts the mark level with the word. */
  position: relative; top: 2px;
}
.brand .mark svg { display: block; width: 17px; height: 17px; }

.nav a .badge { margin-left: auto; }
/* A fixed column for the icon, so the labels line up whatever the glyph's
   advance width happens to be — and so a drawn icon sits where a glyph would. */
.nav a .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; flex: none; line-height: 1;
}
.nav a .ic svg { display: block; width: 15px; height: 15px; }

.rail-foot { border-top: var(--border) solid var(--line); padding: var(--s3) var(--s4); }
.rail-foot .who { font-size: var(--t-sm); color: var(--fg-muted); overflow: hidden; text-overflow: ellipsis; }
.rail-foot .row { display: flex; gap: var(--s2); margin-top: var(--s2); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

.view { flex: 1; overflow-y: auto; padding: var(--s5); }
.view.flush { padding: 0; }

.page-head {
  display: flex;
  align-items: flex-start;
  gap: var(--s4);
  margin-bottom: var(--s4);
  padding-bottom: var(--s3);
  border-bottom: var(--border) solid var(--line);
}
.page-head .grow { flex: 1; min-width: 0; }
.page-head p { margin: var(--s1) 0 0; color: var(--fg-muted); font-size: var(--t-sm); }

/* ---------------------------------------------------------------- controls */

/* An <a class="btn"> is a button that happens to navigate — a download link,
   an external raw view. Every modifier below therefore names both, or the
   anchor keeps the default size while the buttons beside it shrink. */
button, .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: inherit;
  font-size: var(--t-sm);
  padding: var(--s2) var(--s3);
  background: var(--bg);
  color: var(--fg);
  border: var(--border) solid var(--line-strong);
  cursor: pointer;
  white-space: nowrap;
}
button:hover, .btn:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }
button:disabled, .btn:disabled { opacity: .45; cursor: not-allowed; }
button:disabled:hover, .btn:disabled:hover { border-color: var(--line-strong); color: var(--fg); }

button.primary, .btn.primary {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
button.primary:hover, .btn.primary:hover { background: var(--accent); color: var(--accent-fg); }
button.danger, .btn.danger { color: var(--danger); border-color: var(--danger); }
button.danger:hover, .btn.danger:hover { background: var(--danger); color: var(--bg); }
button.ghost, .btn.ghost { border-color: transparent; background: transparent; color: var(--fg-muted); }
button.ghost:hover, .btn.ghost:hover { border-color: var(--line); color: var(--accent); }
button.sm, .btn.sm { padding: 2px var(--s2); font-size: var(--t-xs); }
button.xs, .btn.xs { padding: 0 var(--s1); font-size: var(--t-xs); line-height: 1.7; }

input, select, textarea {
  font: inherit;
  font-size: var(--t-sm);
  padding: var(--s2);
  background: var(--bg);
  color: var(--fg);
  border: var(--border) solid var(--line);
  width: 100%;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: none; }
textarea { resize: vertical; min-height: 72px; font-family: var(--font); }
textarea.mono { font-family: var(--mono); font-size: var(--t-sm); }
select { cursor: pointer; }
input[type="checkbox"] { width: auto; accent-color: var(--accent); }
input[type="range"] { width: 100%; accent-color: var(--accent); padding: 0; border: none; }
input[type="file"] { border: none; padding: 0; }

label { display: block; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-muted); margin-bottom: var(--s1); }

.field { margin-bottom: var(--s4); }
.field .help { font-size: var(--t-xs); color: var(--fg-faint); margin-top: var(--s1); }
.field .err { font-size: var(--t-xs); color: var(--danger); margin-top: var(--s1); }
.field.bad input, .field.bad select, .field.bad textarea { border-color: var(--danger); }

.inline { display: flex; align-items: center; gap: var(--s2); }
.inline label { margin: 0; text-transform: none; letter-spacing: 0; font-size: var(--t-sm); color: var(--fg); }
/* A row shares its width between the things that can use it — form fields,
   mostly. Anything sized by its own content is exempt: stretching a badge
   across a whole row is never what was meant, and shrinking a button below
   its label spills the text out of the border, because buttons never wrap. */
.row { display: flex; gap: var(--s3); align-items: flex-start; }
.row > * { flex: 1; min-width: 0; }
.row > .badge,
.row > button,
.row > .btn,
.row > .wf-kind { flex: none; }
.spacer { flex: 1; }
.wrap { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }

/* An icon is chosen from a grid rather than invented in a text box. The glyphs
   are monochrome by design: an agent's icon sits beside its name everywhere,
   and a colour emoji would be the loudest thing on the screen. */
.icon-pick-wrap { display: flex; flex-direction: column; gap: var(--s2); }
.icon-pick-preview {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  border: var(--border) solid var(--line-strong);
  font-size: var(--t-lg); color: var(--accent);
}
.icon-pick-custom { flex: 1; }
.icon-pick {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(34px, 1fr));
  gap: 2px; max-height: 190px; overflow-y: auto;
  border: var(--border) solid var(--line); padding: var(--s1);
  background: var(--bg-sunken);
}
.icon-pick button {
  padding: 0; height: 32px; font-size: var(--t-lg); line-height: 1;
  border-color: transparent; background: transparent; color: var(--fg-muted);
}
.icon-pick button:hover { border-color: var(--line-strong); color: var(--fg); }
.icon-pick button.on {
  border-color: var(--accent); color: var(--accent); background: var(--accent-bg);
}
.icon-pick button.none { font-size: var(--t-sm); }

/* ---------------------------------------------------------------- surfaces */

.card {
  border: var(--border) solid var(--line);
  background: var(--bg-raised);
  padding: var(--s4);
  margin-bottom: var(--s3);
}
.card.pad0 { padding: 0; }
.card-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s3); }
.card-head h3 { flex: 1; min-width: 0; }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--s3); }
/* A card whose footer carries a row of actions needs to be wide enough for all
   of them. 300px fitted four; the fifth wrapped onto a line of its own, which
   reads as an afterthought rather than a peer. */
.grid.actions { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }

.list-item {
  display: flex;
  align-items: center;
  gap: var(--s3);
  padding: var(--s3);
  border-bottom: var(--border) solid var(--line);
  cursor: pointer;
}
.list-item:last-child { border-bottom: none; }
.list-item:hover { background: var(--bg-hover); }
.list-item.sel { border-left: 2px solid var(--accent); background: var(--accent-bg); }
.list-item .grow { flex: 1; min-width: 0; }
.list-item .title { font-size: var(--t-md); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-item .sub { font-size: var(--t-xs); color: var(--fg-faint); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }

.empty {
  border: var(--border) dashed var(--line-strong);
  padding: var(--s6) var(--s4);
  text-align: center;
  color: var(--fg-muted);
}
.empty h3 { margin-bottom: var(--s2); }
.empty p { font-size: var(--t-sm); max-width: 46ch; margin: 0 auto var(--s3); }

table { width: 100%; border-collapse: collapse; font-size: var(--t-sm); }
th { text-align: left; font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-muted); font-weight: 400; padding: var(--s2); border-bottom: var(--border) solid var(--line); }
td { padding: var(--s2); border-bottom: var(--border) solid var(--line); vertical-align: top; }
tr:last-child td { border-bottom: none; }
.scroll-x { overflow-x: auto; }

.badge {
  display: inline-block;
  font-size: var(--t-xs);
  padding: 1px var(--s2);
  border: var(--border) solid var(--line-strong);
  color: var(--fg-muted);
  white-space: nowrap;
}
.badge.ok { color: var(--ok); border-color: var(--ok); }
.badge.err { color: var(--danger); border-color: var(--danger); }
.badge.warn { color: var(--warn); border-color: var(--warn); }
.badge.accent { color: var(--accent); border-color: var(--accent); }

.mono { font-family: var(--mono); font-size: var(--t-sm); }
.muted { color: var(--fg-muted); }
.faint { color: var(--fg-faint); }
.small { font-size: var(--t-xs); }
.nowrap { white-space: nowrap; }
.hidden { display: none !important; }

/* ---------------------------------------------------------------- chat */

.chat-layout { display: flex; height: 100%; overflow: hidden; }
.chat-list {
  width: var(--list);
  flex: 0 0 var(--list);
  border-right: var(--border) solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.chat-list .head { padding: var(--s3); border-bottom: var(--border) solid var(--line); display: flex; gap: var(--s2); }
.chat-list .items { overflow-y: auto; flex: 1; }

.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.chat-head {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: var(--border) solid var(--line);
}
.chat-head .title { font-size: var(--t-md); font-weight: 600; }
.chat-head .sub { font-size: var(--t-xs); color: var(--fg-faint); }

.stream { flex: 1; overflow-y: auto; padding: var(--s5) var(--s4); }
.thread { max-width: 820px; margin: 0 auto; }

.msg { margin-bottom: var(--s5); }
.msg .who { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-faint); margin-bottom: var(--s2); display: flex; gap: var(--s2); align-items: center; }
.msg .body { white-space: normal; overflow-wrap: anywhere; }
.msg.user .body {
  border-left: 2px solid var(--line-strong);
  padding-left: var(--s3);
  color: var(--fg);
  white-space: pre-wrap;
}
.msg.assistant .body { border-left: 2px solid transparent; padding-left: var(--s3); }
.msg.assistant.streaming .body { border-left-color: var(--accent); }
.msg .foot { margin-top: var(--s2); display: flex; gap: var(--s2); align-items: center;
  font-size: var(--t-xs); color: var(--fg-faint); opacity: 0; transition: opacity .12s; }
.msg:hover .foot { opacity: 1; }

.body pre {
  border: var(--border) solid var(--line);
  background: var(--bg-sunken);
  padding: var(--s3);
  overflow-x: auto;
  font-family: var(--mono);
  font-size: var(--t-sm);
  margin: 0 0 var(--s3);
}
.body code { font-family: var(--mono); font-size: .92em; background: var(--bg-sunken);
  padding: 0 3px; border: var(--border) solid var(--line); }
.body pre code { background: none; border: none; padding: 0; }
.body ul, .body ol { margin: 0 0 var(--s3); padding-left: var(--s5); }
.body li { margin-bottom: var(--s1); }
.body blockquote { margin: 0 0 var(--s3); padding-left: var(--s3);
  border-left: 2px solid var(--line-strong); color: var(--fg-muted); }
.body table { margin-bottom: var(--s3); }
.body h1, .body h2, .body h3 { margin: var(--s4) 0 var(--s2); }
.body hr { border: none; border-top: var(--border) solid var(--line); margin: var(--s4) 0; }

.tool {
  border: var(--border) solid var(--line);
  margin-bottom: var(--s3);
  font-size: var(--t-sm);
}
.tool > summary {
  padding: var(--s2) var(--s3);
  cursor: pointer;
  display: flex;
  gap: var(--s2);
  align-items: center;
  list-style: none;
  color: var(--fg-muted);
}
.tool > summary::-webkit-details-marker { display: none; }
.tool > summary:hover { background: var(--bg-hover); }
.tool.err { border-color: var(--danger); }
.tool.err > summary { color: var(--danger); }
.tool .dot { width: 6px; height: 6px; background: var(--fg-faint); flex: none; }
.tool.ok .dot { background: var(--ok); }
.tool.err .dot { background: var(--danger); }
.tool.run .dot { background: var(--accent); animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .25; } }
.tool .panes { border-top: var(--border) solid var(--line); padding: var(--s3); }
.tool pre { max-height: 340px; overflow: auto; margin: 0; white-space: pre-wrap;
  overflow-wrap: anywhere; font-family: var(--mono); font-size: var(--t-xs); }
.tool .pane-label { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-faint); margin: var(--s2) 0 var(--s1); }

/* The model's reasoning, while it reasons. It is deliberately quiet — no
   border, faint text — because it is scaffolding, not the answer. What it must
   never be is silent: the clock ticks and the tail of the thought moves, so a
   two minute think reads as work rather than as a stall. */
.think { margin-bottom: var(--s2); font-size: var(--t-sm); }
.think > summary {
  display: flex; align-items: baseline; gap: 0; cursor: pointer; list-style: none;
  color: var(--fg-faint); padding: 2px 0;
}
.think > summary::-webkit-details-marker { display: none; }
.think > summary:hover { color: var(--fg-muted); }
.think .think-label { text-transform: uppercase; letter-spacing: .06em; font-size: var(--t-xs); }
.think[open] .think-label::after { content: ' ▾'; }
.think:not([open]) .think-label::after { content: ' ▸'; }
.think .think-clock { font-variant-numeric: tabular-nums; white-space: pre; }
/* The preview is one line and must never push the layout around. */
.think .think-preview {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-style: italic; opacity: .75;
}
.think[open] .think-preview { display: none; }
.think .think-body {
  margin-top: var(--s2); padding: var(--s2) var(--s3);
  border-left: 2px solid var(--line); color: var(--fg-muted);
  max-height: 300px; overflow: auto; white-space: pre-wrap; overflow-wrap: anywhere;
  font-family: var(--mono); font-size: var(--t-xs);
}
/* While the turn is still streaming the label pulses, matching a running tool. */
.msg.streaming .think .think-label { animation: pulse 1.4s infinite; color: var(--accent); }

.cite {
  display: inline-block; font-size: var(--t-xs); border: var(--border) solid var(--accent);
  color: var(--accent); padding: 0 4px; margin: 0 2px; cursor: pointer; line-height: 1.4;
}

.composer { border-top: var(--border) solid var(--line); padding: var(--s3) var(--s4); }
.composer .box { max-width: 820px; margin: 0 auto; display: flex; gap: var(--s2); align-items: flex-end; }
.composer textarea { min-height: 44px; max-height: 240px; }
.composer .hint { max-width: 820px; margin: var(--s1) auto 0; font-size: var(--t-xs); color: var(--fg-faint);
  display: flex; gap: var(--s3); }

.notice {
  border: var(--border) solid var(--warn);
  color: var(--warn);
  padding: var(--s2) var(--s3);
  font-size: var(--t-sm);
  margin-bottom: var(--s3);
}
.notice.err { border-color: var(--danger); color: var(--danger); }
.notice.info { border-color: var(--accent); color: var(--accent); }

/* ---------------------------------------------------------------- drawer, modal, toast */

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 420px; max-width: 92vw;
  background: var(--bg-raised); border-left: var(--border) solid var(--accent);
  display: flex; flex-direction: column; z-index: 40;
}
.drawer .head { padding: var(--s3) var(--s4); border-bottom: var(--border) solid var(--line);
  display: flex; align-items: center; gap: var(--s3); }
.drawer .content { flex: 1; overflow-y: auto; padding: var(--s4); }

.modal-back {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: flex-start; justify-content: center; z-index: 50; overflow-y: auto;
  padding: var(--s6) var(--s4);
}
.modal {
  background: var(--bg-raised); border: var(--border) solid var(--accent);
  width: 100%; max-width: 640px;
}
.modal.wide { max-width: 940px; }
.modal .head { padding: var(--s3) var(--s4); border-bottom: var(--border) solid var(--line);
  display: flex; align-items: center; gap: var(--s3); }
.modal .head h2 { flex: 1; }
.modal .content { padding: var(--s4); max-height: 70vh; overflow-y: auto; }
.modal .foot { padding: var(--s3) var(--s4); border-top: var(--border) solid var(--line);
  display: flex; gap: var(--s2); justify-content: flex-end; align-items: center; }

.toasts { position: fixed; right: var(--s4); bottom: var(--s4); z-index: 60;
  display: flex; flex-direction: column; gap: var(--s2); max-width: 420px; }
.toast { border: var(--border) solid var(--accent); background: var(--bg-raised);
  padding: var(--s2) var(--s3); font-size: var(--t-sm); display: flex; gap: var(--s2); align-items: flex-start; }
.toast.err { border-color: var(--danger); }
.toast.ok { border-color: var(--ok); }
.toast .grow { flex: 1; }

/* ---------------------------------------------------------------- auth */

.auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s4); }
.auth .panel { width: 100%; max-width: 380px; border: var(--border) solid var(--line); padding: var(--s5);
  background: var(--bg-raised); }
.auth h1 { margin-bottom: var(--s2); }
.auth p.lead { color: var(--fg-muted); font-size: var(--t-sm); margin-bottom: var(--s4); }
.auth .sep { display: flex; align-items: center; gap: var(--s2); margin: var(--s4) 0;
  color: var(--fg-faint); font-size: var(--t-xs); }
.auth .sep::before, .auth .sep::after { content: ""; flex: 1; height: 1px; background: var(--line); }

/* ---------------------------------------------------------------- misc */

.toolpick { border: var(--border) solid var(--line); max-height: 420px; overflow-y: auto; }
.toolpick .group { border-bottom: var(--border) solid var(--line); }
.toolpick .group:last-child { border-bottom: none; }
.toolpick .group > .ghead { display: flex; align-items: center; gap: var(--s2); padding: var(--s2) var(--s3);
  background: var(--bg-sunken); cursor: pointer; }
.toolpick .group > .ghead .name { flex: 1; font-size: var(--t-sm); }
.toolpick .child { padding: var(--s1) var(--s3) var(--s1) var(--s6); font-size: var(--t-sm);
  display: flex; gap: var(--s2); align-items: flex-start; }
.toolpick .child .d { color: var(--fg-faint); font-size: var(--t-xs); }

.stat { display: flex; gap: var(--s5); margin-bottom: var(--s4); flex-wrap: wrap; }
.stat > div { min-width: 90px; }
.stat .k { font-size: var(--t-xs); color: var(--fg-faint); text-transform: uppercase; letter-spacing: .06em; }
.stat .v { font-size: var(--t-xl); }

.drop { border: var(--border) dashed var(--line-strong); padding: var(--s5); text-align: center;
  color: var(--fg-muted); font-size: var(--t-sm); cursor: pointer; }
.drop.over { border-color: var(--accent); color: var(--accent); background: var(--accent-bg); }

.bar { height: 4px; background: var(--bg-hover); border: var(--border) solid var(--line); }
.bar > i { display: block; height: 100%; background: var(--accent); }

.wiz-steps { display: flex; gap: var(--s2); margin-bottom: var(--s4); font-size: var(--t-xs); }
.wiz-steps span { padding: 2px var(--s2); border: var(--border) solid var(--line); color: var(--fg-faint); }
.wiz-steps span.on { border-color: var(--accent); color: var(--accent); }
.wiz-steps span.done { color: var(--fg-muted); }

.kv { display: grid; grid-template-columns: auto 1fr; gap: var(--s2) var(--s3); font-size: var(--t-sm); }
.kv dt { color: var(--fg-muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- environments */

.env-files { display: grid; grid-template-columns: 280px 1fr; gap: var(--s3); align-items: start; }
.env-tree { border: var(--border) solid var(--line); max-height: 420px; overflow: auto; }
.env-view { min-width: 0; }
.tree-row { display: flex; align-items: center; gap: var(--s2); padding: 3px var(--s2);
  font-size: var(--t-sm); cursor: pointer; font-family: var(--mono); }
.tree-row:hover { background: var(--bg-hover); color: var(--accent); }

.term-out { border: var(--border) solid var(--line); background: var(--bg-sunken);
  height: 320px; overflow: auto; padding: var(--s3); margin: 0 0 var(--s2);
  font-family: var(--mono); font-size: var(--t-xs); white-space: pre-wrap; overflow-wrap: anywhere; }
.term-cmd { color: var(--accent); }
.term-err { color: var(--danger); }
.term-exit { color: var(--fg-faint); border-top: var(--border) solid var(--line);
  margin: var(--s2) 0; padding-top: 2px; }
.term-exit.bad { color: var(--danger); }
.term-in { font-family: var(--mono); }

@media (max-width: 900px) { .env-files { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- tracing */

.trace-filters { display: flex; gap: var(--s2); margin-bottom: var(--s3); }
.trace-filters input { flex: 1; }

.trace-table td { vertical-align: middle; }
.trace-row:hover { background: var(--bg-hover); }
.trace-row.fail td:first-child { border-left: 2px solid var(--danger); }

.trace-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s3); align-items: start; }
.trace-pane { min-width: 0; margin-bottom: 0; }
.trace-raw { max-height: 70vh; overflow: auto; white-space: pre-wrap;
  overflow-wrap: anywhere; font-size: var(--t-xs); margin: 0; }

.trace-turn { border-top: var(--border) solid var(--line); padding: var(--s3) 0; }
.trace-turn:first-of-type { border-top: none; }
.trace-role { font-size: var(--t-xs); text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-faint); margin-bottom: var(--s2); }
.trace-turn pre { max-height: 300px; overflow: auto; }

@media (max-width: 1100px) { .trace-split { grid-template-columns: 1fr; } }

@media (max-width: 860px) {
  .rail { --rail: 60px; width: 60px; flex-basis: 60px; }
  .rail .brand span, .rail .nav a span.lbl, .rail-foot .who { display: none; }
  .chat-list { --list: 200px; width: 200px; flex-basis: 200px; }
}

/* ---------------------------------------------------------------- workflows */

/* The editor is a split view: a sequential lane on the left, the selected
   step's configuration on the right. Nothing here is a free-form canvas —
   position carries no meaning beyond order, so every wire runs downward. */

.wf-editor { display: flex; flex-direction: column; height: 100%; min-height: 0; }

.wf-bar {
  display: flex; align-items: center; gap: var(--s3);
  padding: var(--s3) var(--s4);
  border-bottom: var(--border) solid var(--line);
  flex: none;
}
.wf-bar .wf-name {
  flex: 1; min-width: 0; max-width: 340px;
  font-size: var(--t-lg); font-weight: 600;
  border-color: transparent; background: transparent; padding-left: var(--s2);
}
.wf-bar .wf-name:hover { border-color: var(--line); }
.wf-bar .wf-stats { display: flex; gap: var(--s3); flex: 1; }
.wf-bar .row { flex: none; gap: var(--s2); }
.wf-bar .row > * { flex: none; }

.wf-body { display: flex; flex: 1; min-height: 0; }

.wf-steps {
  flex: 0 0 420px; min-width: 0; position: relative;
  border-right: var(--border) solid var(--line);
  overflow: auto; padding: var(--s3) 0 var(--s6);
  background: var(--bg-sunken);
}
.wf-wires { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.wf-wire { fill: none; stroke: var(--line-strong); stroke-width: 1.5; }
.wf-wire.sel { stroke: var(--accent); }
.wf-wire.ghost { stroke: var(--accent); stroke-dasharray: 4 3; }
.wf-wire.err { stroke: var(--danger); }
.wf-node { fill: var(--bg-sunken); stroke: var(--line-strong); stroke-width: 1.5; }
.wf-node.sel { stroke: var(--accent); }

.wf-rows { position: relative; }
.wf-step { display: grid; grid-template-columns: 88px 1fr; align-items: start; }
.wf-rail { min-height: 8px; }

.wf-card {
  border: var(--border) solid var(--line);
  background: var(--bg-raised);
  padding: var(--s2) var(--s3);
  margin-right: var(--s3);
  cursor: pointer;
  border-left: 2px solid transparent;
}
.wf-card:hover { background: var(--bg-hover); }
.wf-card.sel { border-left-color: var(--accent); background: var(--accent-bg); }
.wf-card.off { opacity: 0.55; }
.wf-card-head { display: flex; align-items: center; gap: var(--s2); }
.wf-card-head .wf-name-txt {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-weight: 600;
}
.wf-idx { font-size: var(--t-xs); color: var(--fg-faint); min-width: 12px; }
.wf-card-sub {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 2px;
}
.wf-menu { flex: none; opacity: 0; }
.wf-card:hover .wf-menu, .wf-card.sel .wf-menu { opacity: 1; }

.wf-dot { width: 7px; height: 7px; flex: none; background: var(--fg-faint); }
.wf-dot.ok { background: var(--ok); }
.wf-dot.err { background: var(--danger); }
.wf-dot.warn { background: var(--warn); }
.wf-dot.skip { background: transparent; border: var(--border) solid var(--line-strong); }
.wf-dot.run { background: var(--accent); animation: pulse 1s infinite; }

.wf-chips { display: flex; flex-wrap: wrap; gap: var(--s1); margin-top: var(--s2); }
.wf-chip {
  display: inline-flex; align-items: center; gap: var(--s1);
  border: var(--border) solid var(--line-strong);
  padding: 1px var(--s2); font-size: var(--t-xs);
  cursor: grab; touch-action: none; user-select: none;
  background: var(--bg);
}
.wf-chip:hover, .wf-chip:focus { border-color: var(--accent); color: var(--accent); outline: none; }
.wf-chip.has { border-color: var(--ok); }
.wf-chip .t { color: var(--fg-faint); }
.wf-chip.reused { border-style: dashed; }

.wf-steps.wiring .wf-card.ok-target { outline: 2px solid var(--accent); outline-offset: -2px; }
.wf-steps.wiring .wf-card.no-target { opacity: 0.4; }

.wf-gap { height: 10px; margin-left: 88px; position: relative; }
.wf-gap::before {
  content: ''; position: absolute; left: 0; right: var(--s3); top: 50%;
  border-top: var(--border) dashed transparent;
}
.wf-gap:hover::before { border-top-color: var(--line-strong); }
.wf-gap-btn {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0 6px; font-size: var(--t-xs); line-height: 16px;
  opacity: 0; background: var(--bg); border: var(--border) solid var(--line-strong);
}
.wf-gap:hover .wf-gap-btn { opacity: 1; }
.wf-add { margin: var(--s3) var(--s3) 0 88px; }
.wf-add button { width: 100%; border-style: dashed; }

.wf-progress { display: flex; align-items: center; gap: var(--s2); margin-top: var(--s2); }
.wf-progress .bar { flex: 1; }

.wf-menu-pop {
  position: absolute; right: var(--s3); z-index: 20;
  background: var(--bg-raised); border: var(--border) solid var(--line-strong);
  display: flex; flex-direction: column; min-width: 160px;
}
.wf-menu-pop button { text-align: left; border: none; padding: var(--s2) var(--s3); }
.wf-menu-pop button:hover { background: var(--bg-hover); color: var(--accent); }

.wf-config { flex: 1; min-width: 0; overflow: auto; padding: var(--s4); }
.wf-config > * { max-width: 760px; }
.wf-section {
  border: var(--border) solid var(--line);
  padding: var(--s4); margin-bottom: var(--s4); background: var(--bg-raised);
}
.wf-section > h3, .wf-section > h4 { margin: 0 0 var(--s3); }
.wf-section-head { display: flex; align-items: center; gap: var(--s3); margin-bottom: var(--s2); }
.wf-section-head h3, .wf-section-head h4 { margin: 0; flex: 1; }
details.wf-section > summary {
  cursor: pointer; font-weight: 600; color: var(--fg-muted);
}
details.wf-section[open] > summary { margin-bottom: var(--s3); }
.wf-sub { margin: var(--s4) 0 var(--s2); color: var(--fg-muted); }

.wf-slots { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s4); }
.wf-slot {
  border: var(--border) dashed var(--line-strong);
  padding: var(--s2) var(--s3);
}
.wf-slot:focus { outline: 2px solid var(--accent); outline-offset: -2px; }
.wf-slot.filled { border-style: solid; border-color: var(--line); }
.wf-slot.need { border-color: var(--danger); }
.wf-slot .row { align-items: center; }
.wf-slot .row > * { flex: none; }
.wf-slot .row > b { flex: 1; }
.wf-bound { margin-top: var(--s2); }
.wf-bound-row { align-items: center; border-top: var(--border) solid var(--line); padding-top: var(--s1); }
.wf-bound-row > span { flex: 1; }
.wf-bound-row > button { flex: none; }
.wf-kind {
  font-size: var(--t-xs); color: var(--fg-faint);
  border: var(--border) solid var(--line); padding: 0 var(--s1);
}

.wf-outs { display: flex; flex-direction: column; gap: var(--s2); }
.wf-outrow { border: var(--border) solid var(--line); padding: var(--s2) var(--s3); }
.wf-outrow .row { align-items: center; }
.wf-outrow .row > * { flex: none; }
.wf-outrow .row > b { flex: 1; }
.wf-outedit { border: var(--border) solid var(--line); padding: var(--s3); }
.wf-outedit .row > input { flex: 1; }
.wf-outedit .row > select { flex: 0 0 120px; }
.wf-outedit .row > button { flex: none; }
.wf-outedit .field { margin: var(--s2) 0 0; }
.wf-preview {
  margin-top: var(--s1); max-height: 6em; overflow: hidden;
  white-space: pre-wrap; word-break: break-word;
}
.wf-log, .wf-contract, .wf-artifact {
  background: var(--bg-sunken); border: var(--border) solid var(--line);
  padding: var(--s3); max-height: 340px; overflow: auto;
  white-space: pre-wrap; word-break: break-word; margin: var(--s2) 0 0;
}
.wf-artifact { max-height: 60vh; }
.wf-empty { padding: var(--s6) 0; }

.wf-pick-list { max-height: 62vh; overflow: auto; margin-top: var(--s3); }
.wf-pick-group h4 { margin: var(--s4) 0 var(--s2); color: var(--fg-muted); }
.wf-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--s2); }
.wf-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  text-align: left; padding: var(--s2) var(--s3); height: 100%;
  border: var(--border) solid var(--line); background: var(--bg-raised);
}
.wf-pick:hover { border-color: var(--accent); background: var(--accent-bg); }
.wf-pick .wf-cost { color: var(--accent); }

textarea.code { font-family: var(--mono); font-size: var(--t-sm); min-height: 90px; max-height: 420px; }

.err-text { color: var(--danger); }
.warn-text { color: var(--warn); }

@media (max-width: 1000px) {
  .wf-body { flex-direction: column; }
  .wf-steps { flex: 0 0 auto; max-height: 46vh; border-right: none;
    border-bottom: var(--border) solid var(--line); }
}