/* devteam — light, professional theme
 *
 * The palette is shared with the handbook, and one part of it carries meaning
 * rather than just matching: BRICK means a human is involved. A question waiting
 * on you, the boss's own words, a judgement call that was escalated — all brick,
 * here and in the handbook. Everything the machine does on its own is pine.
 *
 * That is why --boss moved off an arbitrary purple. Scanning a feed, the useful
 * question is "is anything waiting on me", and colour answers it faster than
 * reading does.
 *
 * Typography is deliberately NOT shared. The handbook is read top to bottom and
 * uses a serif; this is scanned and operated, and stays on a UI sans.
 */
* { box-sizing: border-box; margin: 0; }
[hidden] { display: none !important; }

:root {
  /* Warm neutrals, biased very slightly toward the pine accent so the greys read
     as chosen rather than inherited from a framework default. */
  --bg: #F2F1EC;
  --card: #FFFFFF;
  --card-2: #FAF9F5;
  --line: #DFDCD4;
  --line-soft: #EBE9E2;
  --text: #1B2021;
  --dim: #6B7573;
  --faint: #9AA29E;
  --accent: #2E6E5B;
  /* Aliases: the Blockers, Self-repair and deployment cards were written against
     these names. Without them every rule using them was invalid, so those cards
     rendered with no background and unreadable secondary text. */
  --panel: #FFFFFF;
  --soft: #F2F1EC;
  --fg: #1B2021;
  --muted: #6B7573;
  --accent-soft: #E3EDE8;
  /* Status keeps conventional hues, tuned to sit on warm paper. `good` is a leaf
     green deliberately yellower than the blue-green accent, so a passing check
     never reads as a button. */
  --good: #3F7A3F;
  --good-soft: #E9F0E4;
  --warn: #8A6A1F;
  --warn-soft: #F7EFDC;
  --bad: #B0281F;
  --bad-soft: #F8E7E4;
  --boss: #A9503A;        /* a human is involved */
  --boss-soft: #F6E9E4;
  --mgr: #2C6A63;         /* the machine, distinct from the interactive accent */
  --shadow: 0 1px 2px rgba(38,34,26,.05), 0 4px 12px rgba(38,34,26,.06);
  --shadow-lg: 0 12px 32px rgba(38,34,26,.14);
  --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, monospace;
  --serif: "Iowan Old Style", "Palatino Linotype", Charter, Georgia, serif;

  /* Form metrics, in one place.
   *
   * Controls were styled per context — the dialog said 9px, Settings said 10px,
   * the self-repair card said 9px with a different font size, and the base rule
   * said 7px. Nothing was wrong individually; together they meant no two forms
   * in the product lined up, and every new form invented a fourth answer.
   * Divergence that carries meaning is kept (Settings uses a monospace face
   * because it shows keys, where a lookalike character matters); divergence that
   * was only ever an oversight is gone. */
  --ctl-pad-y: 9px;
  --ctl-pad-x: 12px;
  /* For controls repeated many times down a page — round-table seats, mostly —
     where standard padding turns eight rows into a scroll. */
  --ctl-pad-y-tight: 7px;
  --ctl-pad-x-tight: 9px;
  --ctl-radius: 8px;
  --field-gap: 6px;    /* a label to its own control */
  --stack-gap: 14px;   /* one field to the next */
  --label-size: 12.5px;
  --ctl-size: 13.5px;
}

body {
  background: var(--bg); color: var(--text);
  font: 14px/1.5 var(--ui);
  height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}

/* ---------- header ---------- */
header {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 20px; background: var(--card);
  border-bottom: 1px solid var(--line);
}
h1 { font-size: 17px; font-weight: 650; letter-spacing: -.3px; }
h1 span { color: var(--accent); }
#homeLink { cursor: pointer; }
.spacer { flex: 1; }

button, select, input, textarea {
  font: inherit; color: var(--text);
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--ctl-radius); padding: var(--ctl-pad-y) var(--ctl-pad-x);
}
button { cursor: pointer; transition: all .12s ease; }
button:hover { background: var(--card-2); border-color: var(--dim); }
button.primary { background: var(--accent); color: #fff; border-color: var(--accent); font-weight: 550; }
button.primary:hover { background: #25594A; }
button.primary:disabled { opacity: .6; cursor: wait; }
button.danger { color: var(--bad); }
button.danger:hover { background: var(--bad-soft); border-color: var(--bad); }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }

.badge {
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 11px; font-size: 12px; color: var(--dim); font-weight: 500;
}
.badge.ok { color: var(--good); background: var(--good-soft); border-color: #C3E0C2; }
.badge.bad { color: var(--bad); background: var(--bad-soft); border-color: #EFC9C4; }
.badge.warn { color: var(--warn); background: var(--warn-soft); border-color: #EFDCB4; }
.badge.run { color: var(--accent); background: var(--accent-soft); border-color: #d5d9fb; }

/* ---------- home ---------- */
#home { flex: 1; overflow-y: auto; padding: 28px 32px; }
.home-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; }
.home-head h2 { font-size: 20px; font-weight: 650; letter-spacing: -.3px; }
#projectsTable {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--card); border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden; box-shadow: var(--shadow); font-size: 13.5px;
}
#projectsTable th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--faint); font-weight: 600; padding: 12px 16px;
  background: var(--card-2); border-bottom: 1px solid var(--line);
}
#projectsTable td { padding: 14px 16px; border-bottom: 1px solid var(--line-soft); }
#projectsTable tbody tr:last-child td { border-bottom: none; }
#projectsTable tbody tr { cursor: pointer; transition: background .1s; }
#projectsTable tbody tr:hover { background: var(--card-2); }
#projectsTable .pname { font-weight: 600; }
#projectsTable a, #artifactsBody a { color: var(--accent); text-decoration: none; }
#projectsTable a:hover { text-decoration: underline; }
.pill { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; font-weight: 550; background: var(--card-2); border: 1px solid var(--line); color: var(--dim); }
.pill.ok { color: var(--good); background: var(--good-soft); border-color: #C3E0C2; }
.pill.bad { color: var(--bad); background: var(--bad-soft); border-color: #EFC9C4; }
.pill.warn { color: var(--warn); background: var(--warn-soft); border-color: #EFDCB4; }
.pill.run { color: var(--accent); background: var(--accent-soft); border-color: #d5d9fb; }
.row-actions { display: flex; gap: 6px; }
.row-actions button { padding: 5px 11px; font-size: 12px; }
.empty { color: var(--dim); text-align: center; padding: 56px; }

/* ---------- project layout ---------- */
main { flex: 1; display: grid; grid-template-columns: 1fr 380px; gap: 16px; padding: 16px 20px; min-height: 0; }
#left { display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.view-toggle { display: flex; gap: 6px; align-items: center; }
.chip {
  font-size: 12.5px; padding: 6px 13px; border-radius: 8px; color: var(--dim);
  background: var(--card); border: 1px solid var(--line); font-weight: 500;
}
.chip.active { color: var(--accent); background: var(--accent-soft); border-color: #c7cdfa; font-weight: 600; }
.vspacer { flex: 1; }

/* ---------- COMMAND VIEW (the org chart) ---------- */
#command { flex: 1; overflow-y: auto; padding: 8px 4px 24px; }
.chain { display: flex; flex-direction: column; align-items: center; }
.node-row { display: flex; align-items: flex-start; gap: 16px; justify-content: center; width: 100%; }

.node {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); padding: 16px 20px; min-width: 260px; text-align: center;
}
.node .who { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; }
.node .name { font-size: 17px; font-weight: 650; margin-top: 3px; letter-spacing: -.2px; }
.node .sub { font-size: 12px; color: var(--dim); margin-top: 4px; }

.node.boss { border-color: var(--boss); background: linear-gradient(180deg,var(--boss-soft),#fff); }
.node.boss .who { color: var(--boss); }
.node.manager { border-color: #b9e2dd; background: linear-gradient(180deg,#f2fbfa,#fff); min-width: 300px; }
.node.manager .who { color: var(--mgr); }

.connector { width: 2px; height: 26px; background: linear-gradient(180deg, var(--line), #cbd2dd); }
.fan { position: relative; height: 22px; width: 100%; }
.fan::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 22px; background: #cbd2dd; }

/* speech bubble */
.bubble {
  position: relative; max-width: 340px; background: var(--card);
  border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--text); box-shadow: var(--shadow);
  text-align: left; align-self: center;
}
.bubble::before {
  content: ""; position: absolute; left: -7px; top: 22px;
  width: 12px; height: 12px; background: var(--card);
  border-left: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transform: rotate(45deg);
}
.bubble .bl { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); font-weight: 600; margin-bottom: 5px; }
.bubble.thinking { background: var(--card-2); border-color: var(--line); font-style: italic; color: var(--dim); }
.bubble.thinking::before { background: var(--card-2); border-color: var(--line); }

/* the question card — impossible to miss */
.ask-card {
  border: 1.5px solid var(--warn); background: var(--warn-soft);
  border-radius: 14px; padding: 16px 18px; margin: 0 auto 6px; max-width: 620px; box-shadow: var(--shadow);
}
.ask-card .bl { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--warn); font-weight: 700; }
.ask-card .qtext {
  font-size: 14.5px; margin: 8px 0 12px; line-height: 1.5;
  /* The interview arrives as numbered questions with their consequences
     indented underneath. Without preserved newlines the whole thing collapses
     into one run-on paragraph and the structure — the readable part — is gone. */
  white-space: pre-wrap;
}
.ask-card .qbtns { display: flex; flex-direction: column; gap: 8px; }
.ask-card .qbtns button { background: #fff; font-size: 13px; text-align: left; padding: 11px 14px; }
.ask-card .qbtns button:hover { border-color: var(--warn); color: var(--warn); }
.ask-card .qreply { display: flex; gap: 8px; margin-top: 10px; }
.ask-card .qreply input { flex: 1; background: #fff; }

/* agents grid */
.agents { display: grid; gap: 14px; width: 100%; justify-content: center;
  grid-template-columns: repeat(auto-fit, 268px); align-items: stretch; }
.agents .agent { width: auto; display: flex; flex-direction: column; }
/* push the model/deps footer to the bottom so every card lines up */
.agents .agent .deps { margin-top: auto; padding-top: 8px; }
.agent {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow); width: 268px; padding: 14px 16px; cursor: pointer;
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.agent:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); border-color: var(--dim); }
.agent .top { display: flex; align-items: flex-start; justify-content: space-between;
  gap: 8px; min-height: 20px; }
.agent .role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 700; color: var(--accent); line-height: 1.35;
  /* without min-width:0 a flex item refuses to shrink and overruns its neighbour */
  min-width: 0; flex: 1; word-break: normal; overflow-wrap: break-word;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.agent .st { font-size: 11px; padding: 3px 9px; border-radius: 999px; font-weight: 600;
  flex: none; white-space: nowrap; }
.agent .title { font-size: 13.5px; font-weight: 600; margin: 7px 0 6px; line-height: 1.4; }
.agent .doing { font-size: 12px; color: var(--dim); line-height: 1.5; background: var(--card-2); border-radius: 9px; padding: 8px 10px; border: 1px solid var(--line-soft); }
.agent .deps { font-size: 11px; color: var(--faint); margin-top: 8px; }
.agent.running { border-color: var(--accent); }
.agent.running .st { background: var(--accent-soft); color: var(--accent); }
.agent.running::after { content: ""; }
.agent.done { border-color: #cbe8d6; }
.agent.done .st { background: var(--good-soft); color: var(--good); }
.agent.failed .st { background: var(--bad-soft); color: var(--bad); }
.agent.failed { border-color: #f0cdc9; }
.agent.review .st, .agent.pushed .st { background: var(--warn-soft); color: var(--warn); }
.agent.planned .st { background: var(--card-2); color: var(--faint); }
.agent.planned { opacity: .8; border-style: dashed; }
@keyframes glow { 0%,100% { box-shadow: var(--shadow); } 50% { box-shadow: 0 0 0 4px var(--accent-soft), var(--shadow); } }
.agent.running, .node.manager.busy { animation: glow 2.4s ease-in-out infinite; }

.section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--faint); font-weight: 650; margin: 4px 0 10px; text-align: center; }

/* ---------- board ---------- */
#board { flex: 1; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; min-height: 0; }
.col { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 12px; overflow-y: auto; box-shadow: var(--shadow); }
.col h2, #feed h2 { font-size: 11px; text-transform: uppercase; color: var(--faint); letter-spacing: .8px; font-weight: 650; margin-bottom: 10px; }
.card { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 11px 12px; margin-bottom: 9px; cursor: pointer; }
.card:hover { border-color: var(--accent); background: #fff; }
.card .role { font-size: 10px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; }
.card .role.backend { color: #2563eb; } .card .role.frontend { color: #c026d3; } .card .role.tester { color: var(--warn); }
.card .title { margin: 3px 0 5px; font-weight: 600; font-size: 13px; }
.card .desc { font-size: 11.5px; color: var(--dim); margin-bottom: 6px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .meta { font-size: 11px; color: var(--faint); }
.card.running { border-color: var(--accent); }
.card.failed { border-color: var(--bad); }

/* ---------- DAG (technical) ---------- */
#dag { flex: 1; background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: auto; padding: 10px; box-shadow: var(--shadow); }
#dag svg { display: block; }

/* ---------- activity feed ---------- */
#feed { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; min-height: 0; box-shadow: var(--shadow); }
.feed-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.feed-head h2 { margin-bottom: 0; }
.chips { display: flex; gap: 5px; }
.chips .chip { font-size: 11px; padding: 4px 9px; }
#events { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; }
.ev { border-left: 3px solid var(--line); padding: 7px 10px; font-size: 12.5px; white-space: pre-wrap; word-break: break-word; background: var(--card-2); border-radius: 0 8px 8px 0; line-height: 1.5; }
.ev .src { font-size: 10px; text-transform: uppercase; letter-spacing: .7px; color: var(--faint); font-weight: 600; margin-bottom: 3px; }
.ev.manager { border-color: var(--mgr); }
.ev.worker { border-color: #2563eb; }
.ev.system { border-color: var(--warn); }
.ev.boss { border-color: var(--boss); background: var(--boss-soft); }
.ev.error { border-color: var(--bad); background: var(--bad-soft); }
.ev.tool { color: var(--dim); font-family: var(--mono); font-size: 11.5px; }
.ev.think { color: var(--dim); font-style: italic; background: var(--card-2); border-color: var(--line); }
.ev.mgrmsg { border-color: var(--mgr); background: #f2fbfa; font-size: 13px; }
/* A question is the one event in the feed that needs YOU. It was a faint warm
   tint among a hundred other tinted rows, and on a real run the manager asked
   something and the boss never noticed. It gets weight now: brick, the colour
   this product uses everywhere else to mean a human is involved. */
.ev.question {
  border-color: var(--boss); background: var(--boss-soft);
  border-left: 4px solid var(--boss); padding-left: 10px;
  font-size: 13.5px; font-weight: 500; color: var(--text);
}
.ev.question .lt { color: var(--boss); font-weight: 700; }
/* Nothing else in the feed is allowed to be this loud, so the eye learns it. */
.ev.question::after {
  content: "needs you"; display: inline-block; margin-left: 8px;
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--boss); vertical-align: 1px;
}
/* verbosity: simple mode keeps only the human-meaningful lines */
#feed[data-verbosity="simple"] .ev.tool,
#feed[data-verbosity="simple"] .ev.think,
#feed[data-verbosity="simple"] .ev.sys-noise,
#feed[data-verbosity="simple"] .ev.chatter { display: none; }
#directiveForm { display: flex; gap: 8px; margin-top: 10px; }
#directiveForm input { flex: 1; }

/* ---------- project bar ---------- */
/* Everything scoped to one project. It used to sit in the global header beside
   Settings and Sign out, so "8/40 agent runs used" read like an account-wide
   quota rather than one project's guard rail. */
#projectBar {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 20px; background: var(--card-2);
  border-bottom: 1px solid var(--line);
}
#projectBar select { max-width: 320px; font-weight: 550; }
#projectBar .badge { font-size: 11.5px; }
#sprintBadge { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }

/* ---------- the three ways in ---------- */
/* These ARE the primary navigation now — the duplicate "+ New project" button is
   gone — so they carry the page rather than sitting above it as decoration.
   Named entry-* and not mode-*: the plan setup already owns .mode-card. */
.entries { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
           gap: 16px; margin-bottom: 30px; }
.entry-card {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-start;
  text-align: left; padding: 24px 22px 20px; border-radius: 16px;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  min-width: 0;                    /* or long words push the grid wider than the page */
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
/* A coloured edge that fills in on hover: gives each card an obvious affordance
   without shouting three equally-loud calls to action at a first-time user. */
.entry-card::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); opacity: .28; transition: opacity .16s ease;
}
.entry-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg);
                    border-color: #c3c9f5; background: var(--card); }
.entry-card:hover::before { opacity: 1; }
.entry-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* One clear default. Three identical tiles make the reader do the ranking. */
.entry-card.feature { background: linear-gradient(180deg, var(--card-2) 0%, var(--card) 58%);
                      border-color: #d9dcfa; }
.entry-card.feature::before { opacity: .85; }

.entry-ico {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 11px; font-size: 19px; line-height: 1;
  background: var(--accent-soft); margin-bottom: 2px;
}
.entry-name { font-size: 15.5px; font-weight: 640; letter-spacing: -.2px; color: var(--text); }
.entry-desc { font-size: 12.5px; color: var(--dim); line-height: 1.6; font-weight: 400; }
.entry-go { margin-top: auto; padding-top: 8px; font-size: 12px; font-weight: 600;
            color: var(--accent); }
.entry-card:hover .entry-go { text-decoration: underline; text-underline-offset: 3px; }
.ctl-sub { font-size: 12.5px; color: var(--dim); line-height: 1.6; max-width: 74ch;
           margin: -4px 0 10px; }

/* ---------- dialogs ---------- */
/* margin:auto is what centres a <dialog>; the global reset above wipes it, which
   is why dialogs were sticking to the top-left. Restore it explicitly. */
dialog { margin: auto; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 16px; padding: 0; width: min(620px, 94vw); box-shadow: 0 24px 64px rgba(16,24,40,.24); }
dialog::backdrop { background: rgba(16,24,40,.45); backdrop-filter: blur(3px); }
dialog form, .task-detail-wrap, .approval-wrap { display: flex; flex-direction: column; gap: 14px; padding: 26px; }
dialog h2 { font-size: 17px; font-weight: 650; letter-spacing: -.2px; }
dialog h3 { font-size: 12px; }
dialog label { display: flex; flex-direction: column; gap: var(--field-gap);
  font-size: var(--label-size); color: var(--dim); font-weight: 550; }
dialog input, dialog textarea, dialog select {
  width: 100%; padding: var(--ctl-pad-y) var(--ctl-pad-x); font-size: var(--ctl-size); }
dialog textarea { resize: vertical; min-height: 96px; line-height: 1.55; }
.hint { font-size: 11.5px; color: var(--faint); font-weight: 400; }
.nums { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 4px; }
.actions button { padding: 9px 18px; }
.form-error { color: var(--bad); font-size: 12.5px; background: var(--bad-soft); border: 1px solid #EFC9C4; border-radius: 8px; padding: 9px 11px; }

/* ---------- settings dialog ---------- */
/* This was white inputs on a white sheet separated by a #e3e6ec hairline —
   technically present, visually absent, and the "is it set?" state was faint
   grey text that read as decoration. The body now sits on a tinted surface so
   each field reads as a distinct, fillable thing, and state is a real badge. */
.settings-dlg { width: min(560px, 94vw); }
.settings-dlg form { padding: 0; gap: 0; }

.settings-dlg .dlg-head {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 20px 24px 16px; background: var(--card);
  border-bottom: 1px solid var(--line); border-radius: 16px 16px 0 0;
}
.dlg-sub { font-size: 12px; color: var(--dim); margin-top: 3px; }
.icon-x { margin-left: auto; border: none; background: none; color: var(--faint);
          font-size: 14px; padding: 4px 8px; border-radius: 8px; line-height: 1; }
.icon-x:hover { background: var(--soft); color: var(--text); border: none; }

.settings-dlg .dlg-body {
  padding: 18px 24px 22px; background: var(--bg);
  display: flex; flex-direction: column; gap: 14px;
  max-height: 62vh; overflow-y: auto;
}
.dlg-lede { font-size: 12.5px; color: var(--dim); line-height: 1.55; }

.cred-group {
  background: var(--card); border: 1px solid var(--line); border-radius: 12px;
  padding: 15px 16px 16px; display: flex; flex-direction: column; gap: 12px;
}
.cred-head { display: flex; gap: 10px; align-items: flex-start; }
.cred-icon { color: var(--accent); font-size: 12px; line-height: 1.5; }
.cred-head h3 { font-size: 13.5px; font-weight: 600; color: var(--text); }
.cred-head p { font-size: 11.5px; color: var(--faint); margin-top: 2px; line-height: 1.45; }

.settings-dlg .field { display: flex; flex-direction: column; gap: var(--field-gap); }
.field-top { display: flex; align-items: center; gap: 8px;
             font-size: 12.5px; font-weight: 550; color: var(--text); }
/* the global `dialog label` rule turns labels into dim flex columns — these are
   inline field names sitting in a row, so opt out of all of it */
.settings-dlg .field-top label { display: inline; color: inherit; font: inherit;
                                 gap: 0; cursor: pointer; }
.settings-dlg .field input {
  /* Monospace is deliberate here and nowhere else: these are keys, and a
     lookalike character in a credential is worth a whole support conversation. */
  font-family: var(--mono); font-size: 12.5px;
  background: var(--card-2); border: 1px solid var(--line);
  padding: var(--ctl-pad-y) var(--ctl-pad-x);
}
.settings-dlg .field input:hover { border-color: var(--dim); }
.settings-dlg .field input:focus { background: var(--card); border-color: var(--accent); }
.settings-dlg .field input::placeholder { color: var(--faint); }
.field-hint { font-size: 11.5px; color: var(--dim); line-height: 1.5; }
.field-hint code { font-family: var(--mono); font-size: 11px; background: var(--soft);
                   border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }

/* "Check" proves the key works now, instead of finding out hours later when a
   project dies. Kept quiet until hovered — it's a tool, not the main action. */
.check-btn { margin-left: auto; font-size: 11px; padding: 3px 10px; border-radius: 7px;
             color: var(--dim); background: var(--soft); border: 1px solid var(--line); }
.check-btn:hover { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }
.check-btn:disabled { opacity: .55; cursor: wait; }

.check-result { font-size: 11.5px; line-height: 1.5; border-radius: 8px;
                padding: 8px 10px; border: 1px solid transparent; }
.check-result.ok      { color: var(--good); background: var(--good-soft); border-color: #C3E0C2; }
.check-result.bad     { color: var(--bad);  background: var(--bad-soft);  border-color: #EFC9C4; }
.check-result.working { color: var(--dim);  background: var(--soft);      border-color: var(--line); }
.check-result .why { display: block; margin-top: 4px; color: var(--dim); }

.chip { font-style: normal; font-size: 10px; font-weight: 600; letter-spacing: .4px;
        text-transform: uppercase; padding: 2px 7px; border-radius: 999px;
        border: 1px solid transparent; }
.chip.ok  { color: var(--good); background: var(--good-soft); border-color: #C3E0C2; }
.chip.off { color: var(--faint); background: var(--soft); border-color: var(--line); }

/* the two Claude options are alternatives, not a checklist — say so visually */
.or-rule { display: flex; align-items: center; gap: 10px; color: var(--faint);
           font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; }
.or-rule::before, .or-rule::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }

.settings-dlg .dlg-foot {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px; background: var(--card);
  border-top: 1px solid var(--line); border-radius: 0 0 16px 16px;
}
.foot-note { font-size: 11.5px; color: var(--faint); }
.settings-dlg .dlg-foot .actions { margin-top: 0; margin-left: auto; }

/* wizard */
.wizard-steps { display: flex; gap: 6px; }
.wstep { font-size: 11px; color: var(--faint); padding: 5px 11px; border-radius: 999px; background: var(--card-2); border: 1px solid var(--line); font-weight: 550; }
.wstep.active { color: var(--accent); background: var(--accent-soft); border-color: #c7cdfa; }
#ingest { padding: 32px 4px; }
.ingest-msg { font-size: 13.5px; color: var(--accent); margin-bottom: 14px; text-align: center; font-weight: 550; }
.progress { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #818cf8); transition: width .5s ease; }
.recruit-note { font-size: 12.5px; color: var(--dim); }
.roster-head { display: grid; grid-template-columns: 1fr 70px 150px 36px; gap: 8px; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 650; padding: 0 2px; }
#roster { display: flex; flex-direction: column; gap: 8px; }
.roster-row { display: grid; grid-template-columns: 1fr 70px 150px 36px; gap: 8px; align-items: center; }
.roster-row .r-fire { color: var(--bad); padding: 8px; }
.roster-row .r-fire:hover { background: var(--bad-soft); border-color: var(--bad); }
.add-role { align-self: flex-start; border-style: dashed; color: var(--dim); }
.add-role:hover { border-color: var(--accent); color: var(--accent); }
.ctl-h { font-size: 13.5px; font-weight: 650; color: var(--text); }
.advanced { font-size: 12.5px; color: var(--dim); }
.advanced summary { cursor: pointer; padding: 7px 0; }

/* task detail */
#taskDialog { width: min(780px, 94vw); max-height: 88vh; }
.task-detail-wrap { overflow-y: auto; max-height: 88vh; }
#taskDetail h2 { font-size: 17px; }
#taskDetail h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); margin: 16px 0 6px; font-weight: 650; }
#taskDetail pre { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 13px; font-size: 12.5px; font-family: var(--mono); white-space: pre-wrap; word-break: break-word; max-height: 300px; overflow-y: auto; }
#taskDetail .meta { font-size: 12px; color: var(--dim); }
#taskDetail .meta a { color: var(--accent); }
#taskLog { background: var(--card-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px; max-height: 320px; overflow-y: auto; }
.logline { font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line-soft); white-space: pre-wrap; word-break: break-word; font-family: var(--mono); }
.logline .lt { display: block; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--faint); margin-bottom: 2px; font-family: var(--ui); font-weight: 600; }
.logline.log-tool_use { color: var(--dim); }
.logline.log-report { color: var(--good); }
.task-actions { display: flex; gap: 8px; }
pre.dim, .dim { color: var(--dim); }

/* approval modal */

/* artifacts */
#artifactsBody h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--accent); margin: 16px 0 7px; font-weight: 650; }
.art-repo { font-size: 14px; margin-bottom: 10px; }
.public-link { background: var(--good-soft); border: 1px solid #C3E0C2; border-radius: 10px; padding: 12px 14px; font-size: 13px; }
.preview-box { display: flex; align-items: center; gap: 10px; }
.art-list { list-style: none; display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; }
.art-branches { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { background: var(--card-2); border: 1px solid var(--line); border-radius: 7px; padding: 3px 9px; font-size: 11px; font-family: var(--mono); }

/* login */
#loginScreen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--bg); z-index: 50; }
#loginForm { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 36px; width: min(390px, 92vw); box-shadow: var(--shadow-lg); }
#loginForm h1 { font-size: 24px; }
.login-sub { font-size: 13px; color: var(--dim); margin-bottom: 8px; }

@media (max-width: 1100px) {
  main { grid-template-columns: 1fr; }
  #board { grid-template-columns: repeat(2, 1fr); }
}

.ev.ratelimit { border-color: var(--warn); background: var(--warn-soft); }
.agent .deps { font-family: var(--mono); font-size: 10.5px; }

/* ---------- artifacts & agents tabs ---------- */
#artifacts, #agents { flex: 1; overflow-y: auto; }
.pane { background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); padding: 22px 24px; }
.pane h2 { font-size: 19px; font-weight: 650; letter-spacing: -.3px; }
.pane h3 { font-size: 11px; text-transform: uppercase; letter-spacing: .8px; color: var(--faint); font-weight: 650; margin: 22px 0 10px; }
.pane .brief { color: var(--dim); font-size: 13px; margin-top: 5px; }
.demo-row { display: flex; align-items: center; gap: 12px; margin-top: 16px; }
.demo-btn { background: var(--accent); color: #fff; padding: 11px 20px; border-radius: 9px; text-decoration: none; font-weight: 600; font-size: 14px; }
.demo-btn:hover { background: #25594A; }
.conclusion { background: var(--good-soft); border: 1px solid #C3E0C2; border-radius: 10px; padding: 13px 15px; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.work-list { display: flex; flex-direction: column; gap: 10px; }
.work-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; background: var(--card-2); }
.work-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.work-head .role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; font-weight: 700; color: var(--accent); }
.work-head a { color: var(--accent); text-decoration: none; font-size: 12px; }
.work-title { font-size: 13.5px; font-weight: 600; margin-top: 5px; }
.work-item details { margin-top: 8px; }
.work-item summary { cursor: pointer; font-size: 12px; color: var(--dim); }
.work-item pre { background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 11px; font-size: 12px; font-family: var(--mono); white-space: pre-wrap; max-height: 260px; overflow-y: auto; margin-top: 7px; }
.agents-table { width: 100%; border-collapse: collapse; font-size: 13px; margin-top: 6px; }
.agents-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); padding: 9px 10px; border-bottom: 1px solid var(--line); }
.agents-table td { padding: 11px 10px; border-bottom: 1px solid var(--line-soft); }
.agents-table code { font-family: var(--mono); font-size: 11.5px; background: var(--card-2); padding: 2px 6px; border-radius: 5px; }
.agents-table .role { font-size: 10.5px; text-transform: uppercase; font-weight: 700; color: var(--accent); }
#machineLogs { margin-top: 16px; background: #16191f; color: #d7dde5; border-radius: 10px; padding: 14px; font-family: var(--mono); font-size: 11.5px; white-space: pre-wrap; max-height: 380px; overflow-y: auto; }

/* ---------- notification bell ---------- */
.bell-wrap { position: relative; }
#bellBtn { position: relative; padding: 7px 11px; }
#bellBtn.has-items { border-color: var(--warn); background: var(--warn-soft); }
#bellCount { background: var(--bad); color: #fff; border-radius: 999px; font-size: 10px; padding: 1px 6px; margin-left: 4px; font-weight: 700; }
#bellPanel { position: absolute; right: 0; top: 42px; width: 380px; max-height: 460px; overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); z-index: 40; padding: 8px; }
.bell-empty { padding: 22px; text-align: center; color: var(--dim); font-size: 13px; }
.bell-item { padding: 12px; border-bottom: 1px solid var(--line-soft); }
.bell-item:last-child { border-bottom: none; }
.bell-proj { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 650; }
.bell-q { font-size: 12.5px; margin: 6px 0 9px; line-height: 1.5; }
.bell-opts { display: flex; flex-direction: column; gap: 5px; }
.bell-opts button { font-size: 12px; padding: 7px 10px; text-align: left; }
.bell-opts button:hover { border-color: var(--warn); color: var(--warn); }
.bell-opts .link { background: none; border: none; color: var(--accent); text-align: left; padding: 4px 0; }

.logs-head { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; font-size: 11px; text-transform: uppercase; letter-spacing: .7px; color: var(--faint); font-weight: 650; }
.logs-head button { padding: 4px 10px; font-size: 11px; }
#machineLogs { margin-top: 6px; }
.agents-table tr.sep td { background: var(--card-2); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--faint); font-weight: 650; padding: 8px 10px; }
.agents-table tr.past { opacity: .78; }
.agents-table tr.live code { background: var(--accent-soft); color: var(--accent); }

/* Log pane: fixed height so opening/closing it never shifts the table above it. */
#machineLogs { height: 340px; max-height: 340px; overflow-y: auto; overscroll-behavior: contain; }

/* ---------- team grouping ---------- */
.group { width: 100%; margin-bottom: 18px; }
.group-head { display: flex; align-items: center; gap: 9px; justify-content: center; margin-bottom: 10px; }
.glabel { font-size: 12px; font-weight: 650; color: var(--text); }
.gcount { font-size: 11px; background: var(--card-2); border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; color: var(--dim); }
.gnote { font-size: 11px; color: var(--faint); }
.blocked-note { font-size: 11px; color: var(--warn); background: var(--warn-soft);
  border-radius: 7px; padding: 5px 8px; margin-top: 7px; line-height: 1.45;
  overflow-wrap: anywhere; }
.blocked-note b { font-weight: 650; }

/* ---------- model health ---------- */
#modelHealth { margin: 14px 0 6px; }
.health-title { font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--faint); font-weight: 650; margin-bottom: 8px; }
.health-row { display: grid; grid-template-columns: 130px 1fr 90px auto; gap: 10px; align-items: center; font-size: 12px; margin-bottom: 6px; }
.health-row .hm { font-family: var(--mono); font-size: 11.5px; }
.health-row .bar { height: 8px; background: var(--line-soft); border-radius: 999px; overflow: hidden; }
.health-row .bar i { display: block; height: 100%; border-radius: 999px; }
.health-row .bar i.healthy { background: var(--good); }
.health-row .bar i.strained { background: var(--warn); }
.health-row .bar i.throttled { background: var(--bad); }
.health-row .hs { font-size: 11px; font-weight: 600; }
.health-row .hs.healthy { color: var(--good); }
.health-row .hs.strained { color: var(--warn); }
.health-row .hs.throttled { color: var(--bad); }
.health-note { display: block; margin-top: 8px; font-style: italic; }
.health-row .bar i.cooling { background: var(--bad); }
.health-row .hs.cooling { color: var(--bad); }
.quota-box { background: var(--good-soft); border: 1px solid #C3E0C2; border-radius: 9px; padding: 10px 12px; font-size: 12.5px; margin-bottom: 10px; display: flex; flex-direction: column; gap: 3px; }
.rivals { margin-top: 8px; font-size: 11px; color: var(--dim); display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.rival { border: 1px solid var(--line); border-radius: 6px; padding: 2px 7px; font-family: var(--mono); font-size: 10.5px; }
.rival.won { color: var(--good); border-color: var(--good); background: var(--good-soft); }
.rival.lost { opacity: .55; text-decoration: line-through; }
.rival.failed { color: var(--bad); border-color: var(--bad); }
.rival.pushed { color: var(--warn); border-color: var(--warn); }

/* Decisions view: only scaling/routing decisions, so the boss can see the machinery. */
#feed[data-verbosity="decisions"] .ev { display: none; }
#feed[data-verbosity="decisions"] .ev.decision { display: block; }
.ev.decision { border-color: var(--boss); background: var(--boss-soft); }
.ev.decision .src { color: var(--boss); }
.node.boss { cursor: pointer; }
.node.boss:hover { border-color: var(--boss); }
.node .more { font-size: 10.5px; color: var(--boss); margin-top: 6px; opacity: .8; }

/* Needs-attention: the reason a project isn't really done, stated plainly. */
.attn-card { border: 1px solid #C79A2A; background: #fffaf0; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 14px; }
.attn-card .bl { font-weight: 650; color: #a06a00; margin-bottom: 6px; }
.attn-card .qtext { color: var(--fg); line-height: 1.5; }
.attn-card .qbtns { margin-top: 10px; }

/* ---- Blockers: what is standing in the way, and the fix for each ---- */
#blockers { padding: 18px 20px; overflow-y: auto; }
.bl-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.bl-head h2 { margin: 0; font-size: 17px; }
.bl-tally { display: flex; gap: 6px; }
.bl-card { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px;
  padding: 14px 16px; margin-bottom: 12px; background: var(--panel); }
.bl-card.critical { border-left-color: #d64545; }
.bl-card.warning { border-left-color: #C79A2A; }
.bl-card h3 { margin: 8px 0 6px; font-size: 15px; }
.bl-top { display: flex; justify-content: space-between; align-items: center; }
.bl-since { font-size: 11.5px; color: var(--muted); }
.bl-detail { margin: 0 0 8px; line-height: 1.55; color: var(--fg); }
.bl-fix { margin: 0; padding: 9px 11px; background: var(--soft); border-radius: 7px;
  font-size: 13px; line-height: 1.5; color: var(--muted); }
.bl-acts { display: flex; gap: 8px; margin-top: 11px; }
.bl-acts:empty { display: none; }
.pill.crit { background: #F8E7E4; color: #B0281F; }
.pill.warn { background: #F9F1DC; color: #8A6A1F; }
.bl-clear { text-align: center; padding: 64px 20px; color: var(--muted); }
.bl-clear-i { font-size: 40px; color: #3F7A3F; }
.bl-clear h3 { margin: 10px 0 6px; color: var(--fg); }
#blockerCount { margin-left: 5px; padding: 1px 6px; border-radius: 9px; font-size: 10.5px;
  background: #F8E7E4; color: #B0281F; }
#blockerCount.warn { background: #F9F1DC; color: #8A6A1F; }

/* ---- Self-repair: the platform working on its own code ---- */
.self-row { background: linear-gradient(90deg, #f5f0ff, transparent 60%); }
.self-row .pname { font-weight: 640; }
.self-tag { font-size: 10.5px; padding: 2px 7px; border-radius: 9px;
  background: #ede4ff; color: #5b3fa0; font-weight: 600; }
#self { padding: 18px 20px; overflow-y: auto; }
.self-banner { display: flex; gap: 14px; align-items: flex-start; padding: 15px 17px;
  border: 1px solid var(--accent); background: var(--boss-soft); border-radius: 11px; margin-bottom: 16px; }
.self-i { font-size: 27px; color: #6b46c1; line-height: 1; }
.self-banner h2 { margin: 0 0 5px; font-size: 16px; }
.self-banner p { margin: 0; line-height: 1.55; color: var(--muted); }
.self-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.self-card { border: 1px solid var(--line); border-radius: 10px; padding: 15px 17px;
  background: var(--panel); margin-bottom: 14px; }
.self-card h3 { margin: 0 0 10px; font-size: 14px; }
.self-card h4 { margin: 14px 0 6px; font-size: 12.5px; color: var(--muted); }
/* `display: block` with no width left the label text and its control sharing a
   line, a 200px title box and a textarea floating off to one side. A form is a
   stack of labelled full-width controls. */
.self-card label { display: flex; flex-direction: column; gap: var(--field-gap);
                   margin-bottom: var(--stack-gap); font-size: var(--label-size);
                   font-weight: 550; color: var(--text); }
.self-card label .hint { font-weight: 400; }
.self-card input, .self-card select, .self-card textarea {
  width: 100%; font-size: var(--ctl-size);
  padding: var(--ctl-pad-y) var(--ctl-pad-x);
}
.self-card textarea { resize: vertical; min-height: 92px; line-height: 1.55; }
.self-card form > button[type=submit] { margin-top: 2px; }
.kv { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0;
  border-bottom: 1px dashed var(--line); font-size: 13px; }
.kv:last-child { border-bottom: 0; }
.kv span:first-child { color: var(--muted); }
.warn-t { color: #8A6A1F; }
.why { margin: 6px 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.self-acts { display: flex; gap: 8px; margin: 12px 0 8px; }
.self-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.self-table th { text-align: left; color: var(--muted); font-weight: 600; padding: 6px 8px; }
.self-table td { padding: 7px 8px; border-top: 1px solid var(--line); }
.shipped { margin: 0; padding-left: 18px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.self-restart { text-align: center; padding: 70px 20px; }
.spinner { width: 26px; height: 26px; margin: 0 auto 14px; border: 3px solid var(--line);
  border-top-color: #6b46c1; border-radius: 50%; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (max-width: 900px) { .self-grid { grid-template-columns: 1fr; } }

/* ---- Static preview vs full deployment ---- */
.run-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0 6px; }
.run-card { border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
  background: var(--panel); }
.run-card.primary-card { border-color: var(--accent); background: var(--accent-soft); }
.run-card h4 { margin: 0 0 6px; font-size: 13.5px; }
.run-why { margin: 0 0 10px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.run-card .demo-row { flex-wrap: wrap; gap: 7px; }
.detected { font-size: 12.5px; color: var(--muted); margin: 0 0 9px;
  padding: 7px 9px; background: var(--soft); border-radius: 6px; }
.live-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.deploy-log { max-height: 260px; overflow: auto; font-size: 11px; line-height: 1.45;
  background: #1e1e26; color: #d7d7e0; padding: 10px; border-radius: 7px; white-space: pre-wrap; }
.deploy-err { color: #B0281F; font-size: 13px; line-height: 1.5; }
.run-card details summary { font-size: 12px; color: var(--muted); cursor: pointer; margin-top: 9px; }
@media (max-width: 950px) { .run-cards { grid-template-columns: 1fr; } }

/* Confirmation of something that already happened — never blocks the page. */
#toast { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: #23232b; color: #fff; padding: 11px 18px; border-radius: 9px; font-size: 13px;
  opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 90;
  box-shadow: 0 6px 22px rgba(0,0,0,.22); }
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ===== PLAN MODE: the round table ======================================== */
#plan { padding: 22px 26px; overflow-y: auto; }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 16px; margin-bottom: 18px; }
.plan-head h2 { margin: 0 0 4px; font-size: 19px; }
.plan-sub { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.55; max-width: 62ch; }
.plan-sub a { color: var(--accent); }
.plan-idea { display: block; margin-bottom: 18px; font-weight: 600; font-size: 13px; }
.plan-idea textarea { width: 100%; margin-top: 6px; font-weight: 400; }

.seats-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.seats-head h3 { margin: 0; font-size: 14px; }
.seats-actions { display: flex; align-items: center; gap: 10px; }
.seat-warn { font-size: 12px; color: #8A6A1F; background: #F9F1DC; padding: 5px 10px;
  border-radius: 6px; max-width: 52ch; line-height: 1.4; }

#seatList { margin: 10px 0 16px; display: flex; flex-direction: column; gap: 8px; }
.seat-row { display: grid; grid-template-columns: 30px 1.1fr 1fr 1.3fr 2.2fr 30px;
  gap: 8px; align-items: center; }
.seat-row input, .seat-row select {
  padding: var(--ctl-pad-y-tight) var(--ctl-pad-x-tight); font-size: 12.5px; }
.seat-dot { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700; color: #fff; background: var(--dim); }
.seat-del { border: 0; background: transparent; color: var(--faint); cursor: pointer; font-size: 15px; }
.seat-del:hover { color: #B0281F; }

/* provider identity — one colour per provider, used in the list and the circle */
.prov-anthropic { background: #c96442 !important; }
.prov-openai    { background: #10a37f !important; }
.prov-google    { background: #4285f4 !important; }

.mod-row { display: flex; align-items: flex-end; gap: 14px; margin-top: 6px; flex-wrap: wrap; }
.mod-row label { font-size: 13px; font-weight: 600; }
.mod-row select { display: block; margin-top: var(--field-gap);
  padding: var(--ctl-pad-y) var(--ctl-pad-x); min-width: 260px; font-weight: 400; }
.set-h { font-size: 13px; margin: 18px 0 4px; }

/* ---- the circle ---- */
.stage-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.stage-head .hint { max-width: 70ch; line-height: 1.5; }
#circleWrap { display: grid; place-items: center; margin: 8px 0 18px; }
#circle { position: relative; width: min(560px, 76vw); aspect-ratio: 1;
  border-radius: 50%; background:
    radial-gradient(circle at 50% 50%, var(--accent-soft) 0%, var(--bg) 62%, transparent 63%);
  border: 1px dashed var(--line); }
.seat-node { position: absolute; transform: translate(-50%, -50%); width: 116px;
  padding: 9px 10px; border-radius: 11px; background: var(--panel);
  border: 1px solid var(--line); text-align: center; transition: all .25s;
  box-shadow: 0 1px 3px rgba(0,0,0,.05); }
.seat-node .sn-name { font-size: 12px; font-weight: 650; line-height: 1.25; }
.seat-node .sn-model { font-size: 10.5px; color: var(--muted); margin-top: 2px; }
.seat-node.done { border-color: #3F7A3F; }
.seat-node.speaking { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft);
  transform: translate(-50%, -50%) scale(1.06); }
.sn-badge { display: inline-block; margin-top: 5px; font-size: 9.5px; text-transform: uppercase;
  letter-spacing: .04em; background: #F8E7E4; color: #B0281F; padding: 1px 6px; border-radius: 8px; }
/* the provider colour reads as a top edge on each seat */
.seat-node.prov-anthropic { border-top: 3px solid #c96442; background: var(--panel) !important; }
.seat-node.prov-openai    { border-top: 3px solid #10a37f; background: var(--panel) !important; }
.seat-node.prov-google    { border-top: 3px solid #4285f4; background: var(--panel) !important; }
.mod-node { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 132px; padding: 12px; border-radius: 50%; aspect-ratio: 1; display: grid;
  place-content: center; text-align: center; background: #fff;
  border: 2px solid var(--accent); }
.mod-node.speaking { border-color: var(--accent); box-shadow: 0 0 0 6px var(--accent-soft); }

/* ---------- self-repair: rough idea in, real ticket out ---------- */
.rough-row { display: flex; gap: 10px; align-items: stretch; margin-bottom: 6px; }
.rough-row textarea { flex: 1; min-width: 0; resize: vertical; min-height: 54px;
                      font-size: 13px; line-height: 1.5; }
#refineBtn { white-space: nowrap; align-self: flex-start; padding: 9px 14px;
             font-size: 12.5px; font-weight: 550; color: var(--accent);
             background: var(--accent-soft); border-color: var(--accent); }
#refineBtn:hover:not(:disabled) { background: #e4e9fd; border-color: var(--accent); }
#refineBtn:disabled { opacity: .6; cursor: wait; }
#refineNote { margin-bottom: 12px; line-height: 1.55; }
/* Kind and Sprints belong side by side, but "Sprints" needs only a number box —
   a 1fr column stretched it across half the card away from its own label. */
.issue-opts { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px;
              align-items: start; }
@media (max-width: 620px) { .issue-opts { grid-template-columns: 1fr; }
                            .rough-row { flex-direction: column; } }

/* ---------- sprints ---------- */
/* Tasks pile up across cycles, so by sprint 4 the board is mostly work that
   finished three sprints ago. Current cycle open, finished ones archived. */
.sprints-card { background: var(--card); border: 1px solid var(--line);
                border-radius: 12px; padding: 14px 16px; margin-bottom: 12px; }
.sp-lede { margin: 2px 0 10px; max-width: 74ch; }
.sp { border: 1px solid var(--line); border-radius: 9px; margin-bottom: 7px;
      background: var(--card-2); }
.sp > summary { display: flex; align-items: center; gap: 10px; cursor: pointer;
                padding: 9px 12px; font-size: 12.5px; }
.sp > summary::-webkit-details-marker { display: none; }
.sp .sp-n { font-weight: 650; color: var(--text); }
.sp .sp-state { font-size: 10.5px; font-weight: 600; letter-spacing: .3px;
                text-transform: uppercase; padding: 2px 8px; border-radius: 999px;
                color: var(--faint); background: var(--soft); border: 1px solid var(--line); }
.sp.current > summary .sp-state { color: var(--accent); background: var(--accent-soft);
                                  border-color: var(--accent); }
.sp.shipped > summary .sp-state { color: var(--good); background: var(--good-soft);
                                  border-color: #C3E0C2; }
.sp .sp-counts { margin-left: auto; font-size: 11.5px; color: var(--dim); }
.sp.current { background: var(--card); border-color: var(--accent); }
.sp-tasks { list-style: none; padding: 4px 12px 12px; display: flex;
            flex-direction: column; gap: 5px; }
.sp-task { font-size: 12.5px; color: var(--text); line-height: 1.5;
           padding-left: 11px; border-left: 2px solid var(--line); }
.sp-task.done   { border-left-color: var(--good); }
.sp-task.failed { border-left-color: var(--bad); }
.sp-task.running, .sp-task.queued { border-left-color: var(--accent); }
.sp-task .hint { margin-left: 6px; }

/* --- the table as a conversation ---
   Seats speak in one-line gists that appear beside them, one at a time. Reading
   three 250-word essays as they land is not following a discussion; this is. */
.seat-node .sn-dot {
  width: 26px; height: 26px; margin: 0 auto 5px; border-radius: 50%;
  display: grid; place-items: center; font-size: 12px; font-weight: 700;
  color: #fff; background: var(--muted);
}
.seat-node.prov-anthropic .sn-dot { background: #c96442; }
.seat-node.prov-openai    .sn-dot { background: #10a37f; }
.seat-node.prov-google    .sn-dot { background: #4285f4; }

.sn-bubble {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 210px; padding: 9px 11px; border-radius: 12px; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow);
  font-size: 11.5px; line-height: 1.5; color: var(--text); text-align: left;
  z-index: 3; animation: bubble-in .28s ease both;
}
.sn-bubble.right { left: calc(100% + 12px); }
.sn-bubble.left  { right: calc(100% + 12px); }
.sn-bubble.bad { color: var(--bad); border-color: #EFC9C4; background: var(--bad-soft); }
.sn-bubble::after {            /* the little tail pointing back at the speaker */
  content: ""; position: absolute; top: 50%; margin-top: -5px;
  border: 5px solid transparent;
}
.sn-bubble.right::after { right: 100%; border-right-color: var(--line); }
.sn-bubble.left::after  { left: 100%;  border-left-color: var(--line); }
@keyframes bubble-in {
  from { opacity: 0; transform: translateY(-50%) scale(.94); }
  to   { opacity: 1; transform: translateY(-50%) scale(1); }
}
/* the seat currently talking */
.seat-node.speaking { z-index: 4; }
.seat-node.speaking .sn-dot { animation: talk 1.1s ease-in-out infinite; }
@keyframes talk {
  0%, 100% { box-shadow: 0 0 0 0 var(--accent-soft); }
  50%      { box-shadow: 0 0 0 7px var(--accent-soft); }
}
.round-progress { font-size: 11.5px; color: var(--dim); font-weight: 500; }

/* the record, not the view: collapsed until you want the argument behind a gist */
#turnFeed { margin-top: 4px; }
#turnDetails > summary { cursor: pointer; font-size: 12.5px; font-weight: 550;
                         color: var(--dim); padding: 8px 2px; }
#turnDetails > summary:hover { color: var(--accent); }
#turnDetails > summary .hint { margin-left: 6px; }
.turn-list { max-height: 42vh; overflow-y: auto; display: flex;
             flex-direction: column; gap: 10px; padding-top: 8px; }
.turn-gist { font-size: 12.5px; font-weight: 600; color: var(--text); margin-bottom: 5px; }

@media (max-width: 820px) {
  /* the bubbles cannot sit beside the ring on a narrow screen */
  .sn-bubble { display: none; }
}
.turn { border: 1px solid var(--line); border-left: 3px solid var(--line); border-radius: 9px;
  padding: 11px 13px; background: var(--panel); }
.turn.phase-propose  { border-left-color: #8b93a7; }
.turn.phase-critique { border-left-color: #C79A2A; }
.turn.phase-revise   { border-left-color: #3F7A3F; }
.turn-bad { opacity: .65; }
.turn-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; }
.turn-body { font-size: 13px; line-height: 1.6; white-space: pre-wrap; color: var(--fg); }

/* ---- blueprint ---- */
.bp { border: 1px solid var(--accent); background: var(--accent-soft); border-radius: 12px;
  padding: 18px 22px; margin-top: 18px; }
.bp h3 { margin: 0 0 10px; font-size: 16px; }
.bp h4 { margin: 16px 0 5px; font-size: 12.5px; text-transform: uppercase;
  letter-spacing: .04em; color: var(--muted); }
.bp p, .bp li { font-size: 13.5px; line-height: 1.6; }
.bp-lead { font-size: 15px !important; font-weight: 600; }
.bp-objection { margin-top: 16px; padding: 12px 14px; border-radius: 9px;
  background: #F9F1DC; border: 1px solid #EDD9A6; }
.bp-objection p { margin: 4px 0 0; }
.bp-team { display: flex; flex-wrap: wrap; gap: 8px; }
.bp-role { border: 1px solid var(--line); background: #fff; border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 600; }
.bp-role .hint { display: block; font-weight: 400; max-width: 30ch; margin-top: 2px; }
.bp-build { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
.bp-build input { padding: var(--ctl-pad-y) var(--ctl-pad-x); }
@media (max-width: 900px) {
  .seat-row { grid-template-columns: 26px 1fr 1fr; grid-auto-rows: auto; }
  .seat-row .seat-persona { grid-column: 1 / -1; }
}

/* Diverge vs debate — the cost and the evidence differ, so say both. */
.mode-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 18px 0 6px; }
.mode-card { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--panel); }
.mode-card:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.mode-card input { margin-top: 3px; }
.mode-card b { font-size: 13px; }
.mode-card span { display: block; font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.mode-cost { display: inline-block !important; margin-top: 0 !important; font-size: 11px !important;
  background: var(--soft); padding: 1px 7px; border-radius: 8px; color: var(--muted); }
@media (max-width: 900px) { .mode-row { grid-template-columns: 1fr; } }

/* The manager answering the boss — never buried, never filtered out. */
.ev.bossreply { border-left: 3px solid var(--accent); background: var(--accent-soft); }
.ev.bossreply .src { color: var(--accent); font-weight: 650; }

/* ===== MANAGER CHAT ======================================================= */
#chat { display: flex; flex-direction: column; padding: 16px 20px; overflow: hidden; }
.chat-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 10px; }
.chat-head h2 { margin: 0; font-size: 16px; }
#chatLog { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 12px;
  padding: 4px 2px 10px; }
.cmsg { display: flex; flex-direction: column; max-width: 78%; }
.cmsg.you { align-self: flex-end; align-items: flex-end; }
.cmsg.mgr { align-self: flex-start; align-items: flex-start; }
.cbubble { padding: 11px 14px; border-radius: 13px; font-size: 13.5px; line-height: 1.6;
  white-space: pre-wrap; }
.cmsg.you .cbubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.cmsg.mgr .cbubble { background: var(--panel); border: 1px solid var(--line);
  border-bottom-left-radius: 4px; }
.cbubble.cask { background: #F9F1DC; border-color: #EDD9A6; }
.cmeta { font-size: 10.5px; color: var(--faint); margin-top: 3px; }
.crun { margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(0,0,0,.08);
  font-size: 11.5px; opacity: .85; }
.copts { margin-top: 6px; font-size: 12px; font-weight: 600; }
.chint { font-size: 11px; color: var(--muted); margin-top: 4px; }
.cnote { align-self: center; font-size: 11.5px; color: var(--muted); text-align: center; }
#chatForm { display: flex; gap: 8px; padding-top: 10px; border-top: 1px solid var(--line); }
#chatForm input { flex: 1; padding: var(--ctl-pad-y) var(--ctl-pad-x); }
#chatUnread { margin-left: 5px; padding: 1px 6px; border-radius: 9px; font-size: 10.5px;
  background: var(--accent); color: #fff; }

/* Autonomy is a live control, not a label — you can change your mind mid-run. */
.mode-toggle { font: inherit; color: inherit; background: var(--card-2);
  border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px;
  cursor: pointer; font-size: 11px; transition: background .12s, border-color .12s; }
.mode-toggle:hover { border-color: var(--accent); color: var(--accent); }
.mode-toggle.auton { background: var(--accent-soft); border-color: #c9c2f0; color: var(--accent); }
.mode-toggle:disabled { opacity: .5; cursor: default; }

/* ---------- self-repair page ---------- */
#selfPage { padding: 22px 28px 40px; overflow-y: auto; }
#self { display: flex; flex-direction: column; gap: 14px; max-width: 940px; }

/* The sandbox: a candidate build running beside the live one. Its state is the
   one thing on this page that must never be ambiguous — deploying the wrong
   commit over a running platform is the failure this whole feature prevents. */
.sandbox-body { margin-top: 10px; }
.sbx { border-radius: 12px; padding: 14px 16px; }
.sbx.live { background: var(--good-soft); border: 1px solid #C3E0C2; }
.sbx-head { display: flex; align-items: center; gap: 9px; font-size: 13.5px; }
.sbx-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good);
           animation: sbx-pulse 1.6s ease-in-out infinite; flex: none; }
@keyframes sbx-pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(21,128,61,.35); }
                       50% { box-shadow: 0 0 0 6px rgba(21,128,61,0); } }
.sbx-sub { font-size: 12.5px; color: var(--dim); margin: 6px 0 12px; }
.sbx-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.btn-like { display: inline-block; text-decoration: none; padding: 9px 16px;
            border-radius: 8px; font-size: 13px; font-weight: 550;
            border: 1px solid var(--line); color: var(--text); background: var(--card); }
.btn-like.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn-like.primary:hover { background: #25594A; }
.sbx-start { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.sbx-start label { flex: 1; min-width: 260px; display: flex; flex-direction: column;
                   gap: 6px; font-size: 12.5px; color: var(--dim); }
.sbx-log { font-family: var(--mono); font-size: 11px; background: var(--soft);
           border: 1px solid var(--line); border-radius: 8px; padding: 9px;
           max-height: 220px; overflow: auto; white-space: pre-wrap; }
.sbx-dirty { font-size: 11.5px; color: var(--warn); background: var(--warn-soft);
             border: 1px solid #EDD9A6; border-radius: 7px; padding: 6px 9px;
             margin: 8px 0 0; }

/* The page and the server can drift: static files are read from disk, the API is
   whatever process is running. Saying so beats letting it look like a bug. */
#staleBanner { background: var(--warn-soft); color: var(--warn);
               border-bottom: 1px solid #EDD9A6; padding: 9px 20px;
               font-size: 12.5px; line-height: 1.5; }
#staleBanner b { color: #8a5a00; }
#sandboxBanner { background: var(--accent-soft); color: var(--accent); border-bottom: 1px solid var(--accent);
                 padding: 9px 20px; font-size: 12.5px; line-height: 1.5; }
#staleBanner code { font-family: var(--mono); font-size: 11px; background: #fff;
                    border: 1px solid #EDD9A6; border-radius: 5px; padding: 1px 6px;
                    margin-left: 4px; white-space: nowrap; }

/* ---------- environments ---------- */
/* Production's identity is the one thing on this page that must never be
   ambiguous — everything else here can be retried, that cannot. */
.env-prod { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
            background: var(--good-soft); border: 1px solid #C3E0C2;
            border-radius: 10px; padding: 11px 13px; margin: 4px 0 14px;
            font-size: 13px; }
.env-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--good); flex: none; }
.env-prod code, .env-row code { font-family: var(--mono); font-size: 11.5px;
                                background: #fff; border: 1px solid var(--line);
                                border-radius: 5px; padding: 2px 7px; }
.env-prod button { margin-left: auto; }
.env-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
           border: 1px solid var(--line); border-radius: 9px; padding: 10px 12px;
           margin-bottom: 7px; background: var(--card-2); font-size: 12.5px; }
.env-row > div:first-child { flex: 1; min-width: 0; }
.env-row .hint { display: block; margin-top: 3px; }
.env-acts { display: flex; gap: 7px; }
.env-acts button { font-size: 11.5px; padding: 5px 11px; }
#envsCard h4 { margin: 16px 0 7px; font-size: 12px; text-transform: uppercase;
               letter-spacing: .4px; color: var(--faint); }

/* ---------- triage verdict ---------- */
/* Shown while the ticket is being written, not after it is filed: learning
   afterwards that the platform merged something you expected to review is the
   outcome this exists to prevent. */
.triage { font-size: 12px; line-height: 1.55; border-radius: 9px; padding: 9px 11px;
          border: 1px solid transparent; margin: 2px 0 10px; }
.triage.ok   { color: var(--good); background: var(--good-soft); border-color: #C3E0C2; }
.triage.warn { color: var(--warn); background: var(--warn-soft); border-color: #EDD9A6; }
.triage.bad  { color: var(--bad);  background: var(--bad-soft);  border-color: #EFC9C4; }
.triage .why { display: block; margin-top: 4px; opacity: .85; font-size: 11.5px; }

/* ---------- self-healing feed ---------- */
/* The bargain of routine autonomy is that it stays visible: you are not asked,
   but you can always find out. A rejected build matters most here — that is the
   platform declining to ship something to itself. */
.heal-list { display: flex; flex-direction: column; gap: 8px; max-height: 46vh;
             overflow-y: auto; margin-top: 8px; }
.heal { display: flex; gap: 10px; align-items: flex-start; font-size: 12.5px;
        padding: 9px 11px; border-radius: 9px; background: var(--card-2);
        border: 1px solid var(--line); border-left: 3px solid var(--good); }
.heal.bad { border-left-color: var(--bad); background: var(--bad-soft); }
.heal-ico { font-size: 13px; line-height: 1.4; flex: none; }
.heal .hint { margin-left: 7px; }
.heal-detail { color: var(--dim); margin-top: 3px; line-height: 1.5; }
.heal-fixed { margin: 5px 0 0 14px; color: var(--dim); font-size: 11.5px; line-height: 1.6; }

/* ---------- wizard step 3 ---------- */
/* The two autonomy options are a real fork, so they get equal visual weight and
   a line saying WHEN you would pick each — the previous version marked one red
   and called it "bypass", which reads as a warning rather than a choice. */

.sprint-row { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap;
              margin-bottom: 6px; }
.sprint-pick { flex: none; }
.sprint-chips { display: flex; gap: 7px; }
.schip { min-width: 52px; padding: 11px 0; border-radius: 10px; font-size: 15px;
         font-weight: 600; border: 1px solid var(--line); background: var(--card);
         color: var(--dim); }
.schip:hover { border-color: var(--accent); color: var(--accent); }
.schip.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.sprint-says { flex: 1; min-width: 260px; font-size: 12.5px; line-height: 1.6;
               color: var(--dim); background: var(--card-2); border: 1px solid var(--line);
               border-radius: 10px; padding: 11px 13px; margin: 0; }
.sprint-says b { color: var(--text); }

/* ---------- files: the OUTPUT, not the activity ---------- */
.fgroup { margin-bottom: 16px; }
.fgroup h4 { font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
             color: var(--faint); margin: 0 0 7px; }
.flist { list-style: none; padding: 0; margin: 0; display: flex;
         flex-direction: column; gap: 3px; }
.flist li { display: flex; align-items: center; gap: 8px; }
.fopen { flex: 1; text-align: left; font-family: var(--mono); font-size: 12px;
         padding: 6px 9px; border-radius: 7px; border: 1px solid transparent;
         background: none; color: var(--text); }
.fopen:hover { background: var(--accent-soft); border-color: var(--accent); color: var(--accent); }

.file-dlg { width: min(900px, 94vw); }
.file-head { display: flex; align-items: center; gap: 12px; }
.file-head h2 { font-family: var(--mono); font-size: 13px; font-weight: 600;
                overflow-wrap: anywhere; }
#fileBody { max-height: 68vh; overflow: auto; border-radius: 10px;
            border: 1px solid var(--line); padding: 14px; margin: 0; }
.file-code { font-family: var(--mono); font-size: 12px; line-height: 1.6;
             white-space: pre; background: var(--card-2); }
/* Prose is reflowed; code never is — wrapping code is how you make it unreadable. */
.file-doc { font: 13.5px/1.7 var(--ui); white-space: pre-wrap; background: var(--card); }

/* Rendered markdown. #fileBody is a <pre>, so the inherited pre/pre-wrap has to be
   undone or every block below inherits the source document's line breaks. */
.file-md { font: 14px/1.65 var(--ui); white-space: normal; background: var(--card); }
.file-md > :first-child { margin-top: 0; }
.file-md h1, .file-md h2, .file-md h3,
.file-md h4, .file-md h5, .file-md h6 { margin: 20px 0 8px; line-height: 1.3; }
.file-md h1 { font-size: 20px; }
.file-md h2 { font-size: 17px; border-bottom: 1px solid var(--line); padding-bottom: 5px; }
.file-md h3 { font-size: 15px; }
.file-md h4, .file-md h5, .file-md h6 { font-size: 13px; color: var(--muted); }
.file-md p { margin: 0 0 11px; }
.file-md ul, .file-md ol { margin: 0 0 11px; padding-left: 22px; }
.file-md li { margin: 3px 0; }
/* An item with a nested block under it is parsed as blocks, so its own text comes
   back wrapped in <p>. Without this it gets paragraph spacing inside a bullet. */
.file-md li > p { margin: 0; }
.file-md blockquote { margin: 0 0 11px; padding: 2px 0 2px 12px;
                      border-left: 3px solid var(--line); color: var(--muted); }
.file-md hr { border: 0; border-top: 1px solid var(--line); margin: 18px 0; }
.file-md code { font-family: var(--mono); font-size: 12px; background: var(--card-2);
                padding: 1px 4px; border-radius: 4px; overflow-wrap: anywhere; }
.file-md .md-code { background: var(--card-2); border: 1px solid var(--line);
                    border-radius: 8px; padding: 10px 12px; margin: 0 0 12px;
                    overflow-x: auto; white-space: pre; }
.file-md .md-code code { background: none; padding: 0; }
.file-md .md-figure { margin: 0 0 12px; }
/* Diagrams are not drawn — no library ships with this page. The caption says so
   rather than leaving a reader to wonder why the picture is missing. */
.file-md figcaption { font-size: 11px; color: var(--muted); margin-bottom: 4px;
                      text-transform: uppercase; letter-spacing: .04em; }
.file-md .md-table { border-collapse: collapse; margin: 0 0 12px; font-size: 13px;
                     display: block; overflow-x: auto; max-width: 100%; }
.file-md .md-table th, .file-md .md-table td { border: 1px solid var(--line);
                                               padding: 6px 10px; text-align: left; }
.file-md .md-table th { background: var(--card-2); font-weight: 600; }
.file-md .md-center { text-align: center; }
.file-md .md-right { text-align: right; }
/* A link the renderer refused. Visible, and visibly not a link. */
.file-md .md-blocked { color: var(--muted); text-decoration: line-through dotted;
                       cursor: not-allowed; }

/* ---------- About: a document inside an application ----------
 *
 * This page deliberately breaks the app's typographic register. Everywhere else
 * is a UI sans, because the rest of the app is scanned and operated; this is the
 * one screen that is READ, top to bottom, so it gets a serif and a measured
 * column. The colour system is unchanged, including brick meaning a human.
 */
#aboutPage { overflow-y: auto; padding: 0 20px 80px; }
/* Belt and braces against the global `header { display:flex }` rule, which
   matches any <header> element and once laid this page's eyebrow, title and
   standfirst out in a row. The markup uses a div now; this makes a future
   <header> here harmless too. */
#aboutPage .doc-head { display: block; background: none; border-bottom: 1px solid var(--line); }
.doc {
  max-width: 66ch;
  margin: 0 auto;
  font-family: var(--serif);
  font-size: 16.5px;
  line-height: 1.62;
  color: var(--text);
}
.doc-head { border-bottom: 1px solid var(--line); padding: 40px 0 26px; margin-bottom: 34px; }
.doc-eyebrow {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dim); margin-bottom: 12px;
}
.doc h2 {
  font-size: 30px; line-height: 1.14; font-weight: 600; letter-spacing: -.015em;
  text-wrap: balance; margin-bottom: 14px; max-width: 26ch;
}
.doc-standfirst { font-size: 18px; line-height: 1.5; color: var(--dim); max-width: 54ch; }
.doc h3 {
  font-size: 20px; font-weight: 600; line-height: 1.28; text-wrap: balance;
  margin: 38px 0 10px; padding-top: 16px; border-top: 2px solid var(--text);
}
.doc p { margin-bottom: 16px; }
.doc ul, .doc ol { margin: 0 0 16px 0; padding-left: 20px; }
.doc li { margin-bottom: 7px; }
.doc strong { font-weight: 600; }
.doc code {
  font-family: var(--mono); font-size: .84em; background: var(--card-2);
  padding: 2px 5px; border-radius: 3px; white-space: nowrap;
}

/* who's who */
.doc-cast { margin-bottom: 18px; }
.doc-cast > div {
  display: grid; grid-template-columns: 1fr; gap: 3px;
  padding: 13px 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 620px) { .doc-cast > div { grid-template-columns: 11rem 1fr; gap: 18px; } }
.doc-cast dt { font-weight: 600; }
.doc-cast dd { margin: 0; color: var(--dim); font-size: 15.5px; }
.doc-tag {
  display: inline-block; font-family: var(--mono); font-size: 10px;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: 1px;
  background: var(--accent-soft); color: var(--accent);
  padding: 2px 6px; border-radius: 3px; margin-right: 8px;
}
.doc-tag.human { background: var(--boss-soft); color: var(--boss); }
.doc-tag.plain { background: var(--card-2); color: var(--dim); }

/* the sequence — numbered because the order is real information */
.doc-steps { list-style: none; padding: 0; counter-reset: dstep; }
.doc-steps > li {
  counter-increment: dstep; position: relative;
  padding: 12px 0 12px 42px; border-top: 1px solid var(--line-soft); margin: 0;
}
.doc-steps > li:last-child { border-bottom: 1px solid var(--line-soft); }
.doc-steps > li::before {
  content: counter(dstep, decimal-leading-zero);
  position: absolute; left: 0; top: 15px;
  font-family: var(--mono); font-size: 11.5px; color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.doc-note {
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  padding: 15px 18px; margin: 0 0 20px;
}
.doc-note.limit { background: var(--warn-soft); border-left-color: var(--warn); }
.doc-note p:last-child, .doc-note ul:last-child { margin-bottom: 0; }
.doc-note-label {
  display: block; font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--accent); margin-bottom: 8px;
}
.doc-note.limit .doc-note-label { color: var(--warn); }

.doc-table { width: 100%; border-collapse: collapse; font-size: 15px; margin-bottom: 20px; }
.doc-table th, .doc-table td {
  text-align: left; padding: 9px 14px 9px 0; border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}
.doc-table th {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .09em;
  text-transform: uppercase; color: var(--dim); font-weight: 400;
  border-bottom: 1px solid var(--text);
}

.doc-glossary > div {
  display: grid; grid-template-columns: 1fr; gap: 2px;
  padding: 11px 0; border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 620px) { .doc-glossary > div { grid-template-columns: 11rem 1fr; gap: 18px; } }
.doc-glossary dt { font-family: var(--mono); font-size: 13.5px; padding-top: 2px; }
.doc-glossary dd { margin: 0; color: var(--dim); font-size: 15.5px; }

/* ---------- About: diagrams ----------
 *
 * Hand-authored SVG rather than a diagram library: the pod has no guaranteed
 * outbound access and the dashboard has no build step, so a CDN script would be
 * a silent blank box on exactly the page meant to explain the product.
 *
 * Everything is drawn through the palette tokens, so a teammate box and a
 * "needs you" box carry the same meaning here as they do in the feed.
 */
.doc-fig { margin: 0 0 22px; }
.doc-fig svg { width: 100%; height: auto; display: block; background: var(--card);
  border: 1px solid var(--line); border-radius: 4px; padding: 8px 4px; }
.doc-fig figcaption {
  font-family: var(--mono); font-size: 11.5px; line-height: 1.55;
  color: var(--dim); margin-top: 9px;
}
.d-node rect { fill: var(--accent-soft); stroke: var(--accent); stroke-width: 1; }
.d-node text {
  fill: var(--text); font-family: var(--ui); font-size: 12px; font-weight: 500;
  text-anchor: middle; dominant-baseline: middle;
}
/* Brick: a human is involved. Same rule as the rest of the app. */
.d-node.human rect { fill: var(--boss-soft); stroke: var(--boss); }
/* Grey: ordinary software, no AI and no cost. */
.d-node.plain rect { fill: var(--card-2); stroke: var(--line); }
.d-node.plain text { fill: var(--dim); font-weight: 400; }
.d-box rect { fill: none; stroke: var(--line); stroke-width: 1; stroke-dasharray: 3 3; }
.d-boxlabel {
  fill: var(--dim); font-family: var(--mono); font-size: 9px; letter-spacing: .12em;
}
.d-arrow { fill: none; stroke: var(--dim); stroke-width: 1.2; marker-end: url(#dArrowHead); }
.d-arrow.d-back { stroke: var(--boss); stroke-dasharray: 4 3; }
.d-label { fill: var(--dim); font-family: var(--mono); font-size: 10px; }
/* The arrowhead is filled here rather than with currentColor on the marker: a
   marker resolves currentColor against its OWN context, not the path pointing at
   it, so it would have rendered black whatever the arrow's colour. */
#dArrowHead path { fill: var(--dim); }

/* ---------- waiting for the first plan ----------
 *
 * Replaces a single centred "Assembling the team…". The problem was not the
 * wording, it was that nothing on screen changed for the better part of a
 * minute, which is indistinguishable from a hang. Ghost cards give the area
 * shape, the pulse gives it life, and the manager's own words give it truth.
 */
.assembling { padding: 10px 2px 4px; }
.assembling-head {
  display: flex; align-items: center; gap: 9px;
  font-weight: 600; font-size: 13.5px; color: var(--text); margin-bottom: 6px;
}
.pulse {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.9s ease-out infinite;
  flex: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(46,110,91,.45); }
  70%  { box-shadow: 0 0 0 9px rgba(46,110,91,0); }
  100% { box-shadow: 0 0 0 0 rgba(46,110,91,0); }
}
.assembling-say { color: var(--dim); font-size: 12.5px; line-height: 1.55; margin-bottom: 14px; }

.ghost-team { display: flex; flex-wrap: wrap; gap: 10px; }
.ghost-agent {
  width: 268px; border: 1px dashed var(--line); border-radius: 9px;
  padding: 11px 12px; background: var(--card-2);
}
.ghost-agent .top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.ghost-agent .role { font-size: 12px; font-weight: 600; color: var(--dim); }
.ghost-agent .st {
  font-family: var(--mono); font-size: 10px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint);
}
.gline {
  height: 8px; border-radius: 3px; margin-top: 9px;
  background: linear-gradient(90deg, var(--line-soft) 25%, var(--line) 37%, var(--line-soft) 63%);
  background-size: 300% 100%; animation: shimmer 1.6s linear infinite;
}
.gline.w70 { width: 70%; } .gline.w45 { width: 45%; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* Past the point where "it is still working" stops being a fair explanation. */
.assembling.stalled .pulse { background: var(--warn); animation: none; }
.assembling-stuck {
  margin-top: 14px; padding: 11px 13px; border-radius: 8px;
  background: var(--warn-soft); border-left: 3px solid var(--warn);
  font-size: 12.5px; line-height: 1.55; color: var(--text);
}

@media (prefers-reduced-motion: reduce) {
  .pulse, .gline { animation: none; }
  .gline { background: var(--line-soft); }
}

/* Inline code inside blocker copy. The server writes advice with backticks
   around command names; they used to reach the page as literal characters. */
.bl-detail code, .bl-fix code {
  font-family: var(--mono); font-size: .86em; background: var(--card-2);
  border: 1px solid var(--line-soft); border-radius: 3px; padding: 1px 4px;
}

/* ---------- forms: one rhythm everywhere ----------
 *
 * The gap between one field and the next was set by whichever container the form
 * happened to be in, so the same form felt different in a dialog, in Settings and
 * on the self-repair page. These give every stacked form the same rhythm without
 * each one having to remember it.
 */
dialog form, .self-card form, .settings-dlg form { display: flex; flex-direction: column; gap: var(--stack-gap); }
dialog form > label, .self-card form > label { margin-bottom: 0; }
/* A hint belongs to the control above it, so it sits closer to that than to the
   next field — otherwise it reads as a heading for whatever follows. */
label > .hint, .field-hint { margin-top: calc(var(--field-gap) * -0.5); }
/* Rows of controls line up on their baseline rather than stretching to the
   tallest, which is what made a select next to a short input look off-centre. */
.form-row { display: flex; gap: var(--ctl-pad-x); align-items: flex-end; flex-wrap: wrap; }
.form-row > * { flex: 1 1 12rem; min-width: 0; }

/* ---------- being asked something ----------
 *
 * Three different moments used one card and one heading. An interview before any
 * work starts is not a problem to be unblocked, and framing it as "your manager
 * needs a decision" made the first thing a new project did look like a fault.
 * Brick still means a human is needed; the accent stripe distinguishes the kind.
 */
.ask-card .qnote {
  font-size: 12px; color: var(--dim); line-height: 1.5;
  margin: -4px 0 12px;
}
.ask-card.interview { border-left: 3px solid var(--accent); }
.ask-card.sprint_review { border-left: 3px solid var(--mgr); }

/* ---------- the manager's model, changeable in place ---------- */
.mgr-model {
  font-size: 12px; padding: 3px 24px 3px 8px; border-radius: 6px;
  background: var(--card-2); border: 1px solid var(--line); color: var(--text);
  max-width: 190px; margin: 2px 0 4px;
}
.mgr-model:hover { border-color: var(--accent); }
.mgr-model:disabled { opacity: .6; cursor: wait; }

/* ---------- notices: worth knowing, not holding anything up ----------
 *
 * Split off the Blockers tab because they answer different questions. A project
 * running perfectly on schedule showed a 🚧 badge because nothing was running
 * its tests — worth telling someone, but not a blocker, and putting it under
 * that heading made every real blocker easier to ignore.
 */
.bl-card.notice { border-left: 3px solid var(--line); }
.pill.quiet {
  background: var(--card-2); color: var(--dim); border: 1px solid var(--line);
}
.vchip .quiet {
  background: var(--card-2); color: var(--dim); border: 1px solid var(--line);
}

/* ---------- the bench ----------
 * Who is hired and free. The command view drew task cards, so a teammate with
 * nothing on did not exist — six of eight people on a real run were invisible,
 * and the header counted tasks and called them team members.
 */
.bench { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line); }
.bench-head { font-size: 12px; font-weight: 650; color: var(--dim); margin-bottom: 9px; }
.bench-note { font-weight: 400; color: var(--faint); margin-left: 6px; }
.bench-list { display: flex; flex-wrap: wrap; gap: 7px; }
.bench-person {
  font-size: 12px; color: var(--dim); background: var(--card-2);
  border: 1px solid var(--line); border-radius: 20px; padding: 4px 11px;
}
.bench-person b { color: var(--text); font-weight: 600; margin-right: 4px; }

/* The manager's model, as the headline it used to be. */
.node.manager .name { cursor: pointer; }
.mgr-edit {
  font-size: 10px; font-weight: 500; color: var(--accent); margin-left: 7px;
  text-transform: uppercase; letter-spacing: .06em; opacity: 0; transition: opacity .12s;
}
.node.manager .name:hover .mgr-edit { opacity: 1; }


/* Events that are a RESULT rather than narration. The feed was uniform, so a
   merged pull request and a worker saying "let me check that file" carried the
   same visual weight, and the things worth reading were buried in the things
   that are not. */
.ev.outcome { font-weight: 550; color: var(--text); }
.ev.outcome.good { border-left: 3px solid var(--good); }
.ev.outcome.bad { border-left: 3px solid var(--bad); }

/* ---------- the control step: a switch and a slider ----------
 *
 * This was five tall tiles of prose stacked down the page, and read as a form to
 * survive rather than two decisions to make. The shapes now match the choices:
 * autonomy is binary so it is a switch, quality-versus-time is a continuum so it
 * is a slider. Both keep an explanation — one line that changes with the
 * selection, rather than every option's paragraph shown at once.
 */
.seg {
  display: inline-flex; padding: 3px; gap: 3px;
  background: var(--card-2); border: 1px solid var(--line); border-radius: 9px;
}
.seg-opt { position: relative; }
.seg-opt input { position: absolute; opacity: 0; inset: 0; cursor: pointer; margin: 0; }
.seg-opt span {
  display: block; padding: 7px 15px; border-radius: 7px; font-size: 13px;
  font-weight: 550; color: var(--dim); cursor: pointer; white-space: nowrap;
  transition: background .12s, color .12s;
}
.seg-opt input:checked + span { background: var(--card); color: var(--text); box-shadow: var(--shadow); }
.seg-opt input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.seg-says {
  font-size: 12.5px; line-height: 1.55; color: var(--dim);
  margin: 9px 0 0; max-width: 62ch;
}

.qslider { margin-top: 4px; max-width: 460px; }
.qslider input[type=range] {
  -webkit-appearance: none; appearance: none; width: 100%; height: 22px;
  background: transparent; padding: 0; border: 0; cursor: pointer;
}
/* The filled portion is set from JS, so the position reads before the words do. */
.qslider input[type=range]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%),
                              var(--line) var(--fill, 50%));
}
.qslider input[type=range]::-moz-range-track {
  height: 6px; border-radius: 3px;
  background: linear-gradient(to right, var(--accent) var(--fill, 50%),
                              var(--line) var(--fill, 50%));
}
.qslider input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; margin-top: -6px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--card); border: 2px solid var(--accent); box-shadow: var(--shadow);
}
.qslider input[type=range]::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--accent);
  background: var(--card); box-shadow: var(--shadow);
}
.qslider input[type=range]:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.qslider-ends {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--faint); margin-top: 2px;
}

.qsays { margin-top: 12px; max-width: 62ch; }
.qsays b { font-size: 14.5px; color: var(--text); }
.qsays p { font-size: 12.5px; line-height: 1.55; color: var(--dim); margin: 4px 0 0; }
.qchanges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.qtag {
  font-size: 11px; color: var(--accent); background: var(--accent-soft);
  border: 1px solid var(--accent-soft); border-radius: 20px; padding: 3px 10px;
}

/* Headings were spaced for a page of tiles. */
#step3 .ctl-h { margin-top: 26px; }
#step3 .ctl-h:first-of-type { margin-top: 4px; }