/* VC Analyst.

   Built on the CloseCRM template's system, read off the Figma: a Gray/50 page
   carrying #F2F2F4 panels at radius 20 with a 1px Gray/300 inside stroke,
   white fields sitting borderless on that tint, near-black #1E1E1E text, and
   headings set large and tight. Spacing follows the template's 16px gap and
   its 64px panel padding, scaled to a 1240px page rather than its 1920px one.

   The accent is the template's own indigo. It sits next to the Custom AI mark,
   which is a blue-violet gradient, without fighting it.

   The accent is spent only where the page is doing something — a running node,
   the primary action, a live figure. Everything else is grey. */

:root {
  /* The template's indigo */
  --accent: #6c5ce7;
  --accent-bright: #7d6ff0;
  --accent-deep: #5a4bd4;
  --accent-soft: #f0eeff;
  --accent-dim: rgba(108, 92, 231, .18);
  --accent-ring: rgba(108, 92, 231, .32);

  /* The template's near-black, used for the secondary CTA and the footer */
  --dark: #141416;

  /* Surfaces — the template's Gray/50 page, #F2F2F4 panel, white card */
  --page: #fafafa;
  --panel: #f2f2f4;
  --card: #ffffff;
  --surface: var(--card);
  --plate: #ebebee;

  /* Lines — Gray/300 and a softer one for rules inside a card */
  --line: #e2e2e6;
  --line-soft: #ebebee;

  /* Text */
  --text: #1e1e1e;
  --muted: #65656b;
  --faint: #6b6b73;   /* 5.22:1 on card, 4.68:1 on the panel tint — AA on the
                         darkest surface it has to survive, which sets the value */

  --bad: #c2453f;

  /* Radii, off the template: 20 on a panel, 12 on a field, 10 on a button */
  --r-sm: 6px;
  --r-md: 10px;
  --r-field: 12px;
  --r-lg: 20px;
  --r-xl: 20px;

  --gutter: 32px;

  --sans: 'Inter', -apple-system, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--page);
  color: var(--muted);
  font: 400 15px/1.55 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 2px; }

/* ---- nav ----
   A white bar floating inset on the grey page rather than a band welded to the
   top. Logo left, links centred, the action right. */

.nav-wrap { padding: 18px var(--gutter) 0; }
.nav {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  max-width: 1240px; margin: 0 auto; height: 64px; padding: 0 12px 0 20px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: 999px;
  box-shadow: 0 1px 2px rgba(30, 30, 30, .04);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-mark { width: 28px; height: 28px; object-fit: contain; }
.brand-name { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -.35px; }

.nav-links { display: flex; align-items: center; gap: 30px; }
.nav-links a {
  font-size: 14px; font-weight: 500; color: var(--muted); text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover { color: var(--text); }

.nav-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.nav-actions .btn { flex: none; }
.nav-by {
  flex: none; white-space: nowrap;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.notice {
  margin: 20px 32px 0; padding: 13px 16px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-field);
  font-size: 13px; color: var(--muted);
}
.notice[hidden] { display: none; }
.notice code {
  font: 400 12px var(--mono); color: var(--text);
  background: var(--plate); padding: 1px 5px; border-radius: 4px;
}

/* ---- layout ----
   Documents in across the top, the pipeline below at full width. The graph is
   a wide, horizontal diagram — boxing it into a side column cost it half the
   room it needed and left two thirds of the page empty. */

main { max-width: 1304px; margin: 0 auto; padding: 0 var(--gutter) 64px; }

/* ---- hero ----
   Centred headline, a single muted line under it, two actions, then the
   illustration — the template's opening, with the pipeline as the picture. */

.hero { padding: 76px 0 8px; text-align: center; }
.hero-title {
  max-width: 17ch; margin: 0 auto;
  font-size: clamp(38px, 5.2vw, 68px); font-weight: 600;
  line-height: 1.04; letter-spacing: -.035em; color: var(--text);
}
.hero-sub {
  max-width: 60ch; margin: 22px auto 0;
  font-size: 17px; line-height: 1.6; color: var(--muted);
}
.hero-actions {
  display: flex; justify-content: center; gap: 12px;
  margin-top: 30px;
}
.hero-actions .btn {
  width: auto; padding: 0 26px;
  text-decoration: none; display: inline-flex; align-items: center;
}
.hero-art { margin: 52px auto 0; max-width: 1240px; }
.hero-art svg { display: block; width: 100%; height: auto; overflow: visible; }

.ha-card {
  fill: var(--card); stroke: var(--line); stroke-width: 1;
  filter: drop-shadow(0 1px 2px rgba(30, 30, 30, .05));
}
.ha-card-out { stroke: var(--accent); }
.ha-label { font: 500 13px var(--sans); fill: var(--text); }
.ha-out {
  font: 600 15px var(--sans); fill: var(--accent);
  text-anchor: middle; letter-spacing: .2px;
}
.ha-out-score { font: 500 12px var(--mono); fill: var(--faint); text-anchor: middle; }
.ha-wire { fill: none; stroke: #dcdce2; stroke-width: 1.4; }

/* The cube is the one solid object on the page, so it carries the accent at
   full strength and everything else steps back to grey. */
.ha-cube-top   { fill: var(--accent-bright); }
.ha-cube-left  { fill: var(--accent-deep); }
.ha-cube-right { fill: var(--accent); }

/* ---- the three passes ----
   The template runs a quiet logo strip here. There are no logos to show that
   would be true, so the strip carries the one thing worth saying up front:
   the order the passes run in, and that none can see the next. */

.strip {
  max-width: 1240px; margin: 60px auto 0;
  padding: 64px 0 4px;
  border-top: 1px solid var(--line);
}
.strip-lede {
  margin: 0 0 26px;
  font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint);
}
.strip-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px;
  margin: 0; padding: 0; list-style: none;
}
.strip-row li {
  font-size: 17px; font-weight: 600; letter-spacing: -.3px; line-height: 1.3; color: var(--text);
}
.strip-n {
  display: block; margin-bottom: 8px;
  font: 500 12px var(--mono); color: var(--accent);
}
.strip-row em {
  display: block; margin-top: 5px;
  font-style: normal; font-size: 13.5px; font-weight: 400; line-height: 1.45; color: var(--muted);
}

/* ---- the tool ---- */

.tool { padding-top: 72px; }

/* ---- intake ---- */

/* Intake on the left, nodes on the right. The left column is fixed so the
   fields stop growing with the viewport — a 700px-wide industry box reads as
   a mistake. */
.work {
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  /* On a wide monitor an uncapped row puts the factor name and its score a
     screen apart, and the eye has to travel to read one line. */
  max-width: 1240px; margin: 0 auto;
}


.intake {
  display: flex; flex-direction: column; gap: 16px;
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* Flex children default to min-width:auto, so a file input's intrinsic width
   pushes past its column and the page gains a horizontal scrollbar. */
.intake > * { min-width: 0; }
.intake input, .intake textarea { max-width: 100%; }
.intake > .btn { width: 100%; }

.intake-foot {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 2px;
  border-top: 1px solid var(--line-soft);
}
.intake-foot .status { padding-top: 2px; }

/* The two controls almost nobody touches, folded away. */
.more { font-size: 12px; color: var(--muted); }
.more summary {
  cursor: pointer; list-style: none; color: var(--faint);
  padding: 2px 0; user-select: none;
}
.more summary::-webkit-details-marker { display: none; }
.more summary::before { content: '\203A'; display: inline-block; margin-right: 6px; transition: transform .15s; }
.more[open] summary::before { transform: rotate(90deg); }
.more summary:hover { color: var(--text); }
.more .field { margin-top: 10px; }
.more .check { margin-top: 10px; }
.field-grow { display: flex; flex-direction: column; margin: 0; }
.field-grow textarea { flex: 1; min-height: 92px; }

.drop {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; padding: 22px 14px;
  background: var(--card);
  border: 1.5px dashed #d6d6db; border-radius: var(--r-field);
  text-align: center; cursor: pointer;
  transition: border-color .15s, background-color .15s;
}
.drop:hover { border-color: var(--accent); background: var(--accent-soft); }
.drop.over { border-color: var(--accent); border-style: solid; background: var(--accent-soft); }
.drop.has-file { border-style: solid; border-color: var(--accent); background: var(--accent-soft); }
.drop:has(input:focus-visible) {
  border-color: var(--accent); border-style: solid;
  box-shadow: 0 0 0 3px var(--accent-dim);
}
.drop input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop-icon {
  width: 26px; height: 26px; margin-bottom: 4px;
  fill: none; stroke: var(--accent); stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}
.drop-title { font-size: 14px; font-weight: 600; color: var(--text); }
.drop-file {
  margin-top: 6px; font: 500 11.5px var(--mono); color: var(--accent);
  word-break: break-all; line-height: 1.35;
}
.drop-file[hidden] { display: none; }

.field { display: block; margin: 0; }
.field-label { display: block; margin-bottom: 7px; font-size: 13px; font-weight: 600; color: var(--text); letter-spacing: -.1px; }
.field-label em {
  margin-left: 5px; font-style: normal; font-weight: 400; font-size: 11.5px; color: var(--faint);
}
.field input[type=text], .field input[type=number], .field select, .field textarea {
  width: 100%; padding: 12px 14px;
  font: inherit; font-size: 14px; color: var(--text);
  background: var(--card);
  border: 1px solid transparent; border-radius: var(--r-field);
  box-shadow: 0 1px 2px rgba(30, 30, 30, .04);
  resize: vertical;
}
.field input::placeholder, .field textarea::placeholder { color: var(--faint); }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.file-slim { width: 100%; font-size: 11.5px; color: var(--faint); }
.file-slim::file-selector-button {
  font: 500 11.5px var(--sans); margin-right: 8px; padding: 4px 9px;
  background: #fff; color: var(--text);
  border: 1px solid var(--line); border-radius: var(--r-sm); cursor: pointer;
}

.check { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: var(--muted); }
.check input { margin-top: 2px; accent-color: var(--accent); }
.check-inline { font-size: 12.5px; }

.btn {
  width: 100%; height: 46px;
  background: var(--accent); color: #fff;
  border: 1px solid var(--accent); border-radius: var(--r-md);
  font-size: 14.5px; font-weight: 600; letter-spacing: -.1px;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn:active { transform: translateY(1px); }
/* A .btn on an anchor must not inherit the form button's full width, and must
   not keep the underline every other link on the page has. */
a.btn {
  width: auto; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn-sm { height: 38px; padding: 0 18px; font-size: 13.5px; }

.btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); box-shadow: 0 4px 16px var(--accent-dim); }
.btn[disabled] { background: var(--plate); border-color: var(--line); color: var(--faint); cursor: progress; box-shadow: none; }
.btn-ghost {
  width: auto; height: 36px; padding: 0 15px;
  background: var(--card); color: var(--text); border-color: var(--line); font-weight: 500;
}
.btn-ghost:hover { background: var(--panel); border-color: #cfcfd6; box-shadow: none; }

/* Below .btn:hover, or that rule wins on source order and the nav
   action renders indigo instead of near-black. */
.btn-dark {
  background: var(--dark); border-color: var(--dark); color: #fff;
}
.btn-dark:hover { background: #2a2a2e; border-color: #2a2a2e; box-shadow: none; }

.status { margin: 0; min-height: 16px; font-size: 12px; line-height: 1.4; color: var(--faint); }
.status.is-error { color: var(--bad); }
.status.is-working::after {
  content: ''; display: inline-block; width: 5px; height: 5px;
  margin-left: 6px; border-radius: 50%; background: var(--accent);
  animation: pulse 1.2s ease-in-out infinite;
}
@keyframes pulse { 50% { opacity: .2; } }
.dim { font: 400 13px var(--mono); color: var(--faint); }

/* ---- the nodes ----
   The factors a fund scores on, as a list. Adding one adds a row. */

.nodes {
  position: relative;
  padding: 26px 28px 8px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
/* Title left, the count and the action right — the template's section head. */
.nodes-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line-soft);
}
.nodes-title {
  margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.6px; line-height: 1.25;
  color: var(--text);
}
.nodes-meta { display: flex; align-items: center; gap: 14px; }
.nodes-count { font-size: 13px; color: var(--faint); white-space: nowrap; }

.node-list { list-style: none; margin: 0; padding: 0; }

/* Rows are separated by a rule, not by their own borders — one card, not
   seven. Straight off the template's Open Positions block. */
.node {
  display: flex; align-items: center; gap: 13px;
  padding: 19px 0;
  border-bottom: 1px solid var(--line-soft);
  cursor: pointer;
  transition: background .14s, padding-left .14s;
}
.node:last-child { border-bottom: 0; }
.node:hover, .node:focus-visible {
  background: var(--panel);
  padding-left: 6px;
  border-radius: var(--r-md);
}
/* Never outline:none here — a row is reachable by keyboard and hover alone
   does not tell you where the caret is. */
.node:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.node-icon {
  flex: none; width: 19px; height: 19px;
  fill: none; stroke: var(--faint); stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .25s;
}
.node-name {
  flex: 1; min-width: 0;
  font-size: 15.5px; font-weight: 500; letter-spacing: -.2px; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* A document attached to this factor. */
.node-clip {
  flex: none; width: 15px; height: 15px;
  fill: none; stroke: var(--accent); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; opacity: .8;
}
.node-score {
  flex: none; min-width: 26px; text-align: right;
  font: 500 15px var(--mono); color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.node-go {
  flex: none; width: 16px; height: 16px;
  fill: none; stroke: #c6c6cd; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .14s, transform .14s;
}
.node:hover .node-go { stroke: var(--accent); transform: translateX(2px); }

/* ---- an agent at work ----

   Four states a glance can tell apart, because a row that only dims is a row
   nobody can read across. Searching is quiet and grey — the research is not
   this agent's work, it is waiting for it. Working is the accent, with a sweep
   that says something is moving. Done is settled, with the score.

   The activity line carries what it is doing, in its own words. A spinner says
   something is happening; "Building cards: direct-small (5)" says what. */

.node-activity {
  flex: none; max-width: 40%;
  font-size: 12px; color: var(--muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.node-activity:empty { display: none; }

.node[data-state="searching"] .node-activity,
.node[data-state="working"] .node-activity { color: var(--accent); }
.node[data-state="retrying"] .node-activity { color: #8c651e; }
.node[data-state="retrying"] .node-icon { stroke: #8c651e; }

/* A sweep across the row, so a long pass reads as movement rather than a
   frozen page. One animation, low contrast, and it stops the moment the row
   is done. */
.node[data-state="searching"],
.node[data-state="working"],
.node[data-state="running"] {
  position: relative; overflow: hidden;
  background: var(--accent-soft); border-radius: var(--r-md);
}
.node[data-state="searching"]::after,
.node[data-state="working"]::after,
.node[data-state="running"]::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent);
  transform: translateX(-100%);
  animation: sweep 1.9s ease-in-out infinite;
  pointer-events: none;
}
@keyframes sweep { to { transform: translateX(100%); } }

.node[data-state="searching"] .node-icon,
.node[data-state="working"] .node-icon,
.node[data-state="running"] .node-icon { stroke: var(--accent); }

.node[data-state="done"] { background: var(--card); }
.node[data-state="done"] .node-icon { stroke: var(--text); }
.node[data-state="done"] .node-score {
  font-weight: 600;
}

.node[data-state="skipped"] { opacity: .45; }
.node[data-state="failed"] { background: #fdf3f3; border-radius: var(--r-md); }
.node[data-state="failed"] .node-icon { stroke: var(--bad); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .node[data-state="running"] { animation: none; }
  .status.is-working::after { animation: none; }
}

/* ---- verdict ---- */

/* The verdict lands under the nodes that produced it, inside the same card —
   a bordered box inside a bordered box reads as two things, not one result. */
.verdict {
  margin: 0; padding: 24px 0 8px;
  border-top: 1px solid var(--line-soft);
}
.verdict[hidden] { display: none; }
.decision-summary { margin-bottom: 28px; padding: 24px; background: #f5f8fa; border: 1px solid #d8e2e7; border-left: 4px solid #167a86; border-radius: 10px; }
.decision-summary[data-decision="diligence_required"] { border-left-color: #aa7127; }
.decision-summary[data-decision="decline"] { border-left-color: #a54646; }
.screening-company { margin-bottom: 24px; }
.screening-company h2 { margin: 4px 0 8px; font-size: 30px; line-height: 1.2; color: #1f3552; letter-spacing: -.7px; }
.screening-company > p:last-child { margin: 0; color: var(--muted); }
.decision-eyebrow { margin: 0 0 8px; color: #526675; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .1em; }
.decision-label { margin: 0 0 6px; color: var(--accent-deep); font-size: 14px; font-weight: 700; }
.decision-summary h2 { margin: 0 0 6px; color: #1f3552; font-size: 25px; line-height: 1.3; letter-spacing: -.4px; }
.decision-summary h3 { margin: 0 0 7px; font-size: 13px; color: #1f3552; }
.decision-summary > p { line-height: 1.6; }
.decision-summary ul, .decision-summary ol { padding-left: 20px; margin: 0; font-size: 14px; line-height: 1.65; }
.decision-summary li + li { margin-top: 6px; }
.decision-status { margin: 0 0 16px; color: #627483; font-size: 12px; }
.decision-headline { font-weight: 600; color: #1f3552; }
.decision-reasons, .decision-next { margin-top: 18px; }
.decision-availability { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 18px; margin: 22px 0 0; border-top: 1px solid #d8e2e7; }
.decision-availability dt { font-size: 11px; color: #627483; margin-bottom: 4px; }
.decision-availability dd { margin: 0; font-size: 12px; color: #1f3552; font-weight: 600; }
.company-snapshot, .agent-findings, .screening-summary { margin: 0 0 28px; }
.company-snapshot h3, .agent-findings h3, .screening-summary h3 { margin: 0 0 10px; font-size: 16px; color: #1f3552; }
.company-snapshot h3 span { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 400; }
.company-snapshot dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 0; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.company-snapshot dt { font-size: 11px; color: var(--muted); margin-bottom: 5px; }
.company-snapshot dd { margin: 0; font-size: 13px; line-height: 1.5; font-weight: 500; color: var(--text); overflow-wrap: anywhere; }
.section-caption { margin: -3px 0 15px; font-size: 12px; line-height: 1.5; color: var(--muted); }
/* One score per agent, read across on its own scale. The recommendation above
   explains the decision without turning these readings into a total. */
.verdict-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(155px, 1fr)); gap: 12px; }
.factor-score { display: flex; flex-direction: column; gap: 7px; padding: 16px; border: 1px solid var(--line); border-radius: 8px; min-width: 0; background: var(--card); }
.factor-value {
  font: 500 27px/1.1 var(--mono); color: #1f3552;
  font-variant-numeric: tabular-nums;
}
.factor-value span { font-size: 15px; color: var(--faint); }
.factor-label { font-size: 12px; line-height: 1.45; font-weight: 600; color: var(--text); }
.factor-conf { font-size: 12px; color: var(--faint); }
.factor-reading { margin-top: 3px; font-size: 12px; line-height: 1.55; }
.factor-reading summary { cursor: pointer; color: var(--accent-deep); }
.factor-reading p { margin: 10px 0 0; overflow-wrap: anywhere; color: var(--muted); }
.verdict-alerts { margin: 0 0 24px; padding: 12px 16px; border: 1px solid #e6ceaa; border-radius: 8px; background: #fffbf4; color: #775317; font-size: 13px; line-height: 1.6; }
.verdict-alerts summary { cursor: pointer; font-weight: 600; }
.verdict-alerts ul { margin-bottom: 0; padding-left: 18px; }
.verdict-flags {
  margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--bad);
}
.verdict-spike {
  display: inline-block; margin: 10px 0 0; padding: 4px 10px;
  background: var(--accent-soft); color: var(--accent);
  border-radius: 999px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; vertical-align: middle;
}
.verdict-why {
  margin: 10px 0 0; max-width: 70ch;
  font-size: 13.5px; line-height: 1.5; color: var(--muted);
}
.verdict-line { margin: 0; max-width: 78ch; font-size: 14px; line-height: 1.7; color: var(--muted); }
.verdict-line p { margin: 0 0 12px; }
.completion-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.retry-explainer { margin: 12px 0 0; max-width: 70ch; }

/* ---- memo ---- */

.memo-wrap { margin: 0; padding: 48px 32px 72px; background: var(--card); border-top: 1px solid var(--line); }
.memo-wrap[hidden] { display: none; }
.memo-actions { display: flex; justify-content: flex-end; max-width: 76ch; margin: 0 auto 18px; }
.memo { max-width: 76ch; margin: 0 auto; font-size: 15.5px; line-height: 1.65; color: var(--muted); }
.memo h1 { margin: 0 0 6px; font-size: 38px; font-weight: 600; letter-spacing: -1.4px; line-height: 1.1; color: var(--text); }
.memo h2 {
  margin: 26px 0 10px; padding-bottom: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); border-bottom: 1px solid var(--line-soft);
}
.memo h3 { margin: 26px 0 8px; font-size: 18px; font-weight: 600; letter-spacing: -.3px; line-height: 1.3; color: var(--text); }
.memo p { margin: 0 0 10px; }
.memo em { font-style: normal; font-size: 13px; color: var(--faint); }
.memo strong { font-weight: 600; color: var(--text); }
.memo a { color: var(--accent-deep); }
.memo blockquote {
  margin: 0 0 12px; padding: 10px 14px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md);
  font-size: 13px; color: var(--text);
}
.memo blockquote p:last-child { margin: 0; }
.memo table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 13px; }
.memo th, .memo td { text-align: left; padding: 8px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.memo th {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--faint); background: var(--panel);
}
.memo td:nth-child(n+2) { font-family: var(--mono); font-size: 12px; font-variant-numeric: tabular-nums; }
.memo tr:last-child td { border-bottom: none; }
.memo ol, .memo ul { margin: 0 0 12px; padding-left: 20px; }
.memo li { margin-bottom: 4px; }
.memo hr { border: none; border-top: 1px solid var(--line-soft); margin: 24px 0; }
.memo code {
  font: 400 12px var(--mono); color: var(--text);
  background: var(--plate); padding: 1px 5px; border-radius: 4px;
}

/* ---- responsive ---- */

@media (max-width: 1080px) {
  .work { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  :root { --gutter: 18px; }
  .nav { height: 60px; }
  .brand-by { display: none; }
  main { padding: 0 var(--gutter) 44px; }
  .lede { padding: 30px 0 18px; font-size: 30px; letter-spacing: -1px; }
  .intake { gap: 14px; padding: 18px; }
  .nodes { padding: 20px 18px 6px; }
  .nodes-head { flex-wrap: wrap; gap: 10px; }
  .nodes-title { font-size: 19px; }
  .node-page-title { font-size: 26px; letter-spacing: -.9px; }
  .verdict-head { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .decision-summary { padding: 18px; }
  .decision-availability { gap: 10px; }
  .factor-score { padding: 13px; }
  .factor-value { font-size: 25px; }
  .node-page-bar { flex-wrap: wrap; gap: 12px; }
  .memo-wrap { padding: 28px var(--gutter) 48px; }
  .memo h1 { font-size: 28px; letter-spacing: -1px; }
  .foot-inner { padding: 32px var(--gutter) 36px; }
}

/* ---- editing the factors ----
   The five agents are fixed by the method; a click on one opens its
   instruction and document. Nothing here adds or removes an agent. */

/* The attached document. Empty it is a quiet invitation; filled it is a fact
   about the node, so it reads as a chip rather than a control. */
.field-hint {
  display: block; margin-top: 7px;
  font-size: 12px; line-height: 1.45; color: var(--faint);
}
.doc { margin-top: 2px; }
.doc-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.doc-empty[hidden] { display: none; }
.doc-empty .btn { width: auto; height: 32px; padding: 0 13px; font-size: 13px; }
.doc-hint { font-size: 12px; color: var(--faint); line-height: 1.45; }
.doc-has {
  display: flex; align-items: center; gap: 8px;
  padding: 11px 13px;
  background: var(--card); border-radius: var(--r-field);
  box-shadow: 0 1px 2px rgba(30, 30, 30, .04);
}
.doc-has[hidden] { display: none; }
.doc-name {
  flex: 1; min-width: 0;
  font-size: 13px; font-weight: 500; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.doc-size { flex: none; font: 400 11.5px var(--mono); color: var(--faint); white-space: nowrap; }
.doc-has .btn { flex: none; width: auto; height: 24px; padding: 0 9px; font-size: 12px; }

/* ---- the node page ----
   One node, full width. Borrowed from the CloseCRM contact form: a heading and
   the quiet settings on the left, the field that matters given the wide
   column, and the consequence stated in small type beneath it. */

.node-page {
  max-width: 1240px; margin: 0 auto;
  padding-bottom: 40px;
  animation: rise .18s ease-out;
}
.node-page[hidden] { display: none; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

.node-page-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 18px 0 22px;
}
.back {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 13.5px; font-weight: 500; color: var(--muted);
  cursor: pointer; transition: color .15s;
}
.back:hover { color: var(--accent); }
.back span { font-size: 15px; line-height: 1; }

.node-page-actions { display: flex; align-items: center; gap: 8px; }
.node-page-actions .btn { width: auto; height: 34px; padding: 0 16px; font-size: 13.5px; }
.node-page-actions .btn-ghost { font-weight: 500; }

.node-form {
  display: grid;
  grid-template-columns: 340px minmax(0, 1fr);
  gap: 40px;
  padding: 40px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}

.node-side { display: flex; flex-direction: column; gap: 20px; }
.node-page-title {
  margin: 0 0 2px;
  font-size: 34px; font-weight: 600; letter-spacing: -1.2px; line-height: 1.1;
  color: var(--text);
  overflow-wrap: anywhere;
}

/* Fields sit on the tint as white cards with no border, the way the template
   does it — the panel edge is the only line the eye needs. */
.node-form .field input[type=text],
.node-form .field input[type=number],
.node-form .field textarea {
  background: #fff; border-color: transparent;
  box-shadow: 0 1px 2px rgba(23, 23, 23, .05);
}
.node-form .field input:focus,
.node-form .field textarea:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.node-form input[type=number] {
  width: 100%; padding: 12px 14px;
  /* Not a font shorthand: that would drop the inherited line-height and leave
     this field shorter than the Name input stacked above it. */
  font: inherit; font-family: var(--mono); font-size: 14px; color: var(--text);
  font-variant-numeric: tabular-nums;
  border: 1px solid transparent; border-radius: var(--r-field);
}

/* Two stacked fields now: the fund's own layer, then the method it sits on.
   The method takes the remaining height because it is the longer text. */
.node-main { display: flex; flex-direction: column; gap: 18px; }
#editor-instruction { min-height: 260px; resize: vertical; }
#method-field[hidden], #framework-field[hidden] { display: none; }
.field-fill { display: flex; flex-direction: column; flex: 1; }
.node-main textarea {
  flex: 1; min-height: 440px; resize: vertical;
  padding: 18px 20px;
  font-size: 14.5px; line-height: 1.65;
}
.node-consequence {
  margin: 10px 0 0;
  font-size: 12.5px; line-height: 1.5; color: var(--faint);
  max-width: 62ch;
}

@media (max-width: 900px) {
  .node-form { grid-template-columns: 1fr; gap: 22px; padding: 20px; }
  .node-main textarea { min-height: 300px; }
}

.editor-error { margin: 0; font-size: 13px; color: var(--bad); min-height: 0; }

/* ---- the closing band ----
   The template's sign-off: two centred lines, the first grey and the second
   near-black, so the sentence lands on the half that matters. */

.cta {
  width: min(1240px, 100% - (var(--gutter) * 2));
  margin: 72px auto 0;
  padding: 92px 32px;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--r-lg);
  text-align: center;
  background-image: radial-gradient(circle at 1px 1px, rgba(30,30,30,.05) 1px, transparent 0);
  background-size: 22px 22px;
}
.cta-inner { max-width: 62ch; margin: 0 auto; }
.cta-quiet, .cta-loud {
  margin: 0;
  font-size: clamp(26px, 3vw, 38px); font-weight: 600;
  line-height: 1.16; letter-spacing: -.032em;
}
.cta-quiet { color: #87878f; }
.cta-loud { color: var(--text); margin-bottom: 30px; }
.cta .btn {
  width: auto; padding: 0 28px;
  display: inline-flex; align-items: center; text-decoration: none;
}

/* ---- footer ---- */

.foot { margin-top: 72px; background: var(--dark); }
.foot-inner { max-width: 1304px; margin: 0 auto; padding: 64px var(--gutter) 36px; }
.foot-top {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 56px;
  padding-bottom: 44px;
}
.foot-brand { display: grid; grid-template-columns: auto 1fr; gap: 0 11px; align-items: center; }
.foot-mark { width: 27px; height: 27px; object-fit: contain; }
.foot-name { font-size: 16px; font-weight: 600; color: #fff; letter-spacing: -.35px; }
.foot-line {
  grid-column: 1 / -1; margin: 16px 0 0; max-width: 46ch;
  font-size: 14.5px; line-height: 1.6; color: #8d8d95;
}
.foot-cols { display: flex; gap: 72px; }
.foot-col { display: flex; flex-direction: column; gap: 11px; }
.foot-col h3 {
  margin: 0 0 3px;
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: #5c5c64;
}
.foot-col a {
  font-size: 14px; color: #a6a6ae; text-decoration: none; transition: color .15s;
}
.foot-col a:hover { color: #fff; }
.foot-bottom {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-top: 24px;
  border-top: 1px solid #2a2a2e;
}
.foot-meta { margin: 0; font: 400 12px var(--mono); color: #8b8b93; }
.foot-note { margin: 0; font-size: 12.5px; color: #8b8b93; }

@media (max-width: 900px) {
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: none; }
  .nav-by { display: none; }
  .strip-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
  .foot-cols { gap: 48px; }
  .foot-bottom { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero { padding-top: 52px; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .cta { margin: 56px auto 0; padding: 60px 22px; }
}

/* Every one of these sets display, so the hidden attribute needs restating or
   it does nothing. Fifth, sixth and seventh time in this file. */
/* Any rule that sets display outranks the hidden attribute, so hiding has to
   be said twice. That trap has caused four separate bugs in this file. */
.hero[hidden], .strip[hidden], .tool[hidden], .cta[hidden] { display: none; }


/* ---- the three pages ----
   A tool, not a site. The marketing page is gone: a hero that explains the
   product to a visitor is noise to the only person who ever opens this. */

.page { max-width: 1240px; margin: 0 auto; padding-top: 40px; }
.page[hidden] { display: none; }
.page-title {
  margin: 0 0 6px;
  font-size: 34px; font-weight: 600; letter-spacing: -1.2px; line-height: 1.1;
  color: var(--text);
}
.page-lede {
  margin: 0 0 28px; max-width: 64ch;
  font-size: 15px; line-height: 1.6; color: var(--muted);
}
.page-title + .intake, .page-title + .work { margin-top: 26px; }

#nav-links a.on { color: var(--text); font-weight: 600; }

/* Before a run the deck has the page to itself. The moment one starts the
   agents take the right half, so the deck you submitted and the agents reading
   it are on screen together — leaving the page to watch them was the mistake
   this replaces. */
.run-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; }
.run-grid.running { grid-template-columns: 380px 212px minmax(0, 1fr); gap: 28px; }
.run-grid .intake { max-width: 620px; }
.run-grid.running .intake { max-width: none; }
.run-right[hidden] { display: none; }

/* ---- where the run has got to ----

   Between the deck and the agents, because that is the order the work happens
   in: the deck goes in, it gets read and checked, the agents score what came
   back. One grey line that swaps its text tells you something is happening but
   not whether you are near the end; the stage timeline makes that visible. */

.run-stages { align-self: start; position: sticky; top: 96px; padding-top: 38px; }
.run-stages[hidden] { display: none; }

.rail { list-style: none; margin: 0; padding: 0; }
.rail-step {
  position: relative;
  display: grid; grid-template-columns: 22px minmax(0, 1fr);
  column-gap: 12px; align-items: start;
  padding-bottom: 24px;
}
.rail-step:last-child { padding-bottom: 0; }

/* The spine runs from each dot to the next, so the list reads as one sequence
   rather than four separate lines. It fills only behind steps that are done. */
.rail-step::before {
  content: ''; position: absolute;
  left: 10px; top: 24px; bottom: 2px; width: 2px;
  background: var(--line);
}
.rail-step:last-child::before { display: none; }
.rail-step[data-state="done"]::before,
.rail-step[data-state="skipped"]::before { background: var(--accent-dim); }

.rail-dot {
  grid-row: 1; grid-column: 1;
  position: relative; width: 22px; height: 22px;
  border: 2px solid var(--line); border-radius: 50%;
  background: var(--card);
}
.rail-step[data-state="active"] .rail-dot {
  border-color: var(--accent); background: var(--accent);
  animation: rail-pulse 1.9s ease-out infinite;
}
@keyframes rail-pulse {
  0%   { box-shadow: 0 0 0 0 var(--accent-ring); }
  70%  { box-shadow: 0 0 0 11px rgba(108, 92, 231, 0); }
  100% { box-shadow: 0 0 0 0 rgba(108, 92, 231, 0); }
}
.rail-step[data-state="done"] .rail-dot {
  border-color: var(--accent); background: var(--accent);
}
.rail-step[data-state="done"] .rail-dot::after {
  content: ''; position: absolute; left: 4px; top: 4px;
  width: 8px; height: 4px;
  border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.rail-step[data-state="failed"] .rail-dot {
  border-color: var(--bad); background: var(--bad);
}
.rail-step[data-state="failed"] .rail-dot::after {
  content: ''; position: absolute; left: 8px; top: 3px;
  width: 2px; height: 7px; background: #fff;
}
.rail-step[data-state="failed"] .rail-dot::before {
  content: ''; position: absolute; left: 8px; top: 12px;
  width: 2px; height: 2px; background: #fff;
}
.rail-step[data-state="failed"] .rail-label { color: var(--bad); font-weight: 600; }

.rail-step[data-state="skipped"] .rail-dot { border-style: dashed; }
.rail-step[data-state="skipped"] .rail-dot::after {
  content: ''; position: absolute; left: 4px; top: 8px;
  width: 10px; height: 2px; background: var(--line);
}

.rail-label {
  grid-row: 1; grid-column: 2;
  font-size: 14px; line-height: 22px; color: var(--faint);
}
.rail-step[data-state="active"] .rail-label { color: var(--text); font-weight: 600; }
.rail-step[data-state="retrying"] .rail-dot { border-color: #a87528; background: #fff5df; box-shadow: 0 0 0 4px #fff5df; }
.rail-step[data-state="retrying"] .rail-label { color: #8c651e; font-weight: 600; }
.rail-step[data-state="retrying"] .rail-note { color: #8c651e; white-space: normal; overflow-wrap: anywhere; }
.rail-step[data-state="partial"] .rail-dot { border-color: #a87528; background: #fff5df; }
.rail-step[data-state="partial"] .rail-dot::after { content: '!'; position: absolute; inset: 0; text-align: center; font: 700 13px/18px var(--sans); color: #8c651e; }
.rail-step[data-state="partial"] .rail-label { color: #8c651e; font-weight: 600; }
.rail-step[data-state="partial"] .rail-note { color: #8c651e; white-space: normal; overflow-wrap: anywhere; }
.rail-step[data-state="done"] .rail-label { color: var(--muted); }
.rail-step[data-state="skipped"] .rail-label {
  color: var(--faint); text-decoration: line-through;
  text-decoration-color: var(--line);
}

/* What the step is doing, in its own words: "Building cards: direct-small (5)"
   under Mapping, not in a status bar three columns away. */
.rail-note {
  grid-row: 2; grid-column: 2;
  margin-top: 1px;
  font-size: 12px; line-height: 1.45; color: var(--accent);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-note:empty { display: none; }

.rail-status {
  margin: 20px 0 0; padding-top: 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 12px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.rail-status:empty { display: none; }
.rail-status.is-error { color: var(--bad); border-top-color: var(--bad); }

@media (max-width: 1180px) {
  .run-grid.running { grid-template-columns: 340px 190px minmax(0, 1fr); gap: 20px; }
}

/* On the run view the verdict sits under the agents that produced it. */
.run-right .verdict {
  margin-top: 16px; padding: 22px 24px;
  background: var(--card);
  border: 1px solid var(--line); border-radius: var(--r-lg);
}
.run-right .verdict .btn { margin-top: 4px; }

/* The card arriving should read as arriving. */
.run-grid.running .run-right { animation: slide-in .28s ease-out; }
@keyframes slide-in { from { opacity: 0; transform: translateX(14px); } }

/* Narrow enough and the three columns stack. The rail turns horizontal there,
   because a vertical spine between two stacked cards is a spine pointing at
   nothing. */
@media (max-width: 900px) {
  .run-grid.running { grid-template-columns: minmax(0, 1fr); }
  .run-stages { position: static; }
  .rail { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .rail-step { padding-bottom: 0; grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .rail-step::before { left: 22px; right: 0; top: 10px; bottom: auto; width: auto; height: 2px; }
  .rail-dot { grid-row: 1; grid-column: 1; }
  .rail-label { grid-row: 2; grid-column: 1; line-height: 1.35; }
  .rail-note { grid-row: 3; grid-column: 1; white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .run-grid.running .run-right { animation: none; }
  .rail-step[data-state="active"] .rail-dot { animation: none; box-shadow: 0 0 0 4px var(--accent-ring); }
}

.run-empty {
  margin: 0; padding: 40px 0;
  font-size: 15px; color: var(--faint);
}
.run-empty[hidden] { display: none; }

/* The report page owns the memo, so it no longer needs its own band. */
#page-report .memo-wrap {
  margin: 0; padding: 28px 0 0; background: none; border-top: 1px solid var(--line);
}
#page-report > .verdict { max-width: 960px; margin: 0 auto 28px; }
/* The saved document already includes its decision and summary. Keep the
   completion panel on the run screen, without repeating it above the paper. */
#page-report:has(.memo-wrap:not([hidden])) > .verdict { display: none; }

@media (prefers-reduced-motion: reduce) {
  .node[data-state="searching"]::after,
  .node[data-state="working"]::after,
  .node[data-state="running"]::after { animation: none; opacity: 0; }
}

.more-note {
  margin: 10px 0 6px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--muted, #6b7280);
}

/* The report as a document: the paper sets its own width; the notes sit under it as prose. */
#memo { max-width: none; }

/* Refined workspace and motion. Rounded indigo arcs draw on the slothUI loader
   reference; movement is enabled only by real active/retry presentation states. */
:root {
  --page: #f8f9fc;
  --panel: #f5f6fa;
  --line: #e5e7ef;
  --line-soft: #eef0f5;
  --text: #252738;
  --muted: #63677c;
  --faint: #697085;
  --accent: #6657db;
  --accent-deep: #5142c3;
  --accent-soft: #f1efff;
}
body { background: radial-gradient(ellipse at 80% 0, #f0edff 0, transparent 42%), var(--page); }
.nav-wrap { padding-top: 22px; }
.nav { height: 68px; border-radius: 18px; box-shadow: 0 3px 12px #22234a04; }
.nav-links { gap: 4px; padding: 4px; background: #f5f5fa; border-radius: 11px; }
.nav-links a { padding: 7px 21px; border-radius: 8px; }
#nav-links a.on { color: var(--accent-deep); background: #fff; box-shadow: 0 1px 4px #22234a0e; }
.nav-links a:hover { background: #eceaf8; color: var(--accent-deep); }
.nav-by { font-size: 10px; color: var(--faint); letter-spacing: .12em; }
.page { padding-top: 42px; }
.page-heading { display: flex; justify-content: space-between; align-items: center; gap: 20px; margin-bottom: 28px; }
.page-eyebrow { margin: 0 0 8px; color: var(--accent-deep); font-size: 10px; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.page-title { font-size: 32px; letter-spacing: -1.1px; line-height: 1.2; }
.page-heading .page-lede { margin: 9px 0 0; font-size: 13px; }
.stage-tag { flex-shrink: 0; padding: 7px 12px; border: 1px solid #dfdbf5; border-radius: 999px; background: #ffffffb3; color: var(--accent-deep); font-size: 11px; font-weight: 500; }
.run-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); align-items: start; gap: 26px; }
.run-grid.running { grid-template-columns: minmax(250px, .86fr) minmax(185px, .6fr) minmax(0, 1.4fr); gap: 22px; }
.run-grid.running .run-right { animation: none; }
.run-grid .intake { max-width: none; }
.run-left, .run-right { min-width: 0; }
.intake { background: var(--card); padding: 26px; gap: 20px; box-shadow: 0 4px 24px #25244d04; }
.intake-heading h2 { margin: 0; color: var(--text); font-size: 17px; font-weight: 600; letter-spacing: -.3px; }
.intake-heading p { margin: 4px 0 0; font-size: 12px; }
.drop { min-height: 176px; padding: 24px 14px; gap: 6px; background: #faf9ff; border-color: #d6d0f3; border-radius: 14px; }
.drop-icon { box-sizing: content-box; width: 23px; height: 23px; padding: 12px; margin: 0 0 5px; border: 1px solid #e8e4fa; background: #fff; border-radius: 13px; box-shadow: 0 3px 7px #332e6510; }
.drop-title { font-size: 13px; }
.drop-hint { display: block; color: var(--accent-deep); font-size: 12px; }
.drop-hint > span { display: block; margin-top: 8px; color: var(--faint); font-size: 10px; }
.drop.has-file .drop-hint { display: none; }
.field-label { font-size: 12px; }
.field input[type=text], .field input[type=number], .field select, .field textarea { border-color: var(--line); box-shadow: 0 1px 2px #20204403; font-size: 13px; border-radius: 10px; }
.field textarea { line-height: 1.65; }
.field-hint { display: block; font-size: 11px; color: var(--faint); margin-top: 6px; }
.intake-foot { padding-top: 12px; }
.intake-foot:has(.status:empty) { gap: 0; }
.status:empty { display: none; }
.btn { border-radius: 10px; box-shadow: 0 2px 4px #413a8310; }
.btn[disabled] { cursor: default; }
.btn[data-busy="true"] { display: inline-flex; gap: 9px; align-items: center; justify-content: center; cursor: progress; color: var(--accent-deep); background: var(--accent-soft); border-color: #dcd6f7; }
.btn[data-busy="true"]::before { content: ''; width: 15px; height: 15px; flex: none; border: 2px solid #d8d1f5; border-top-color: var(--accent); border-right-color: var(--accent); border-radius: 50%; animation: loader-turn 1s linear infinite; }

/* The run bar holds the current step and the actual cancellation action. */
.run-overview { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px 20px; padding: 16px 20px; margin: 0 0 24px; border: 1px solid #dfdaf7; border-radius: 16px; background: #fff; }
.run-overview-copy { min-width: 0; }
.run-overview-copy h2 { margin: 0; font-size: 14px; color: var(--text); font-weight: 600; letter-spacing: -.2px; }
.stop-research { display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex-shrink: 0; font-size: 12px; min-width: 124px; height: 36px; }
.stop-research:not([data-busy="true"])::before { content: ''; width: 7px; height: 7px; border-radius: 2px; background: currentColor; }
.stop-research:hover { color: #9b3430; border-color: #e9c9c6; background: #fff8f7; }
.stop-error { grid-column: 1 / -1; margin: 0; font-size: 12px; color: var(--bad); }
.run-overview:is([data-state="retrying"], [data-state="reconnecting"], [data-state="cancelling"]) { background: #fffaf0; border-color: #eee0c1; }
.run-overview[data-state="cancelled"] { background: #f7f7fa; border-color: var(--line); }
.loader-track, .loader-arc { fill: none; stroke-width: 4; }
.loader-track { stroke: #e7e3fb; }
.loader-arc { stroke: currentColor; stroke-linecap: round; stroke-dasharray: 36 100; transform-origin: center; }

/* Agent rows reserve a calm avatar, a readable activity line, and a status.
   Each configured factor uses the same system, including custom factors. */
.nodes { padding: 24px; box-shadow: 0 4px 24px #25244d04; }
.nodes-head { align-items: flex-start; padding-bottom: 20px; gap: 10px; }
.nodes-title { font-size: 17px; letter-spacing: -.3px; }
.nodes-subtitle { margin: 5px 0 0; font-size: 11px; }
.nodes-meta { gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.nodes-count { font-size: 11px; }
.node-list { display: grid; gap: 10px; padding: 18px 0 0; }
.node { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr) auto auto; column-gap: 12px; row-gap: 3px; padding: 15px 14px; min-height: 86px; border: 1px solid var(--line-soft); border-radius: 13px; background: #fcfcfe; transition: border-color .18s, background-color .18s, box-shadow .18s; }
.node:last-child { border-bottom: 1px solid var(--line-soft); }
.node:hover, .node:focus-visible { padding-left: 14px; border-color: #cec6f1; background: #f8f7ff; border-radius: 13px; box-shadow: 0 2px 8px #40367508; }
.node-avatar { position: relative; display: grid; place-items: center; grid-column: 1; grid-row: 1 / span 3; align-self: center; width: 46px; height: 46px; border-radius: 50%; background: #f0f0f7; color: var(--accent); }
.node-icon { width: 19px; height: 19px; stroke: #777b90; }
.agent-loader { position: absolute; inset: 0; width: 46px; height: 46px; opacity: 0; }
.agent-loader .loader-track, .agent-loader .loader-arc { stroke-width: 2.8; }
.node-name { grid-column: 2; grid-row: 1; align-self: end; white-space: normal; overflow: visible; font-size: 13px; font-weight: 600; line-height: 1.45; letter-spacing: -.15px; overflow-wrap: anywhere; }
.node-state { grid-column: 2; grid-row: 2; color: var(--faint); font-size: 10px; line-height: 1.4; }
.node-activity { grid-column: 2 / span 2; grid-row: 3; max-width: none; white-space: normal; overflow: visible; overflow-wrap: anywhere; font-size: 11px; line-height: 1.5; }
.node-score { grid-column: 3; grid-row: 1 / span 2; align-self: center; min-width: 0; font-size: 14px; }
.node-score:empty { display: none; }
.node-go { grid-column: 4; grid-row: 1 / span 3; align-self: center; width: 13px; height: 13px; }
.node-clip { position: absolute; right: 30px; top: 8px; width: 11px; height: 11px; }
.node:is([data-state="searching"], [data-state="working"], [data-state="running"]) { background: #f8f6ff; border-color: #dfd8fa; border-radius: 13px; overflow: visible; }
.node:is([data-state="searching"], [data-state="working"], [data-state="running"])::after { display: none; }
.node:is([data-state="working"], [data-state="running"], [data-state="retrying"]) .agent-loader { opacity: 1; }
.node:is([data-state="working"], [data-state="running"], [data-state="retrying"]) .loader-arc { animation: loader-turn 1.5s linear infinite; }
.node:is([data-state="working"], [data-state="running"]) .node-avatar { background: #eee9ff; }
.node:is([data-state="working"], [data-state="running"]) .node-state { color: var(--accent-deep); }
.node[data-state="searching"] .node-avatar { background: #f0f0f7; }
.node[data-state="searching"] .node-activity { color: var(--muted); }
.node[data-state="ready"] .agent-loader { opacity: 1; }
.node[data-state="ready"] .loader-arc { stroke-dasharray: 132 0; color: #c5bbee; }
.node[data-state="ready"] .node-state { color: var(--accent-deep); }
.node[data-state="retrying"] { background: #fffbf3; border-color: #ebdfc6; }
.node[data-state="retrying"] .node-avatar { background: #fff1d8; color: #9a6d20; }
.node[data-state="retrying"] .loader-track { stroke: #f3dfb8; }
.node[data-state="retrying"] .node-state { color: #8c651e; }
.node[data-state="done"] .node-avatar { background: #edf6f1; }
.node[data-state="done"] .node-icon { stroke: #357660; }
.node[data-state="done"] .node-state { color: #28735a; }
.node[data-state="done"] .node-state::before { content: '\2713'; margin-right: 4px; }
.node[data-state="done"] .node-score { color: var(--text); }
.node[data-state="failed"] { background: #fff8f7; border-color: #eed8d6; }
.node[data-state="failed"] .node-avatar { background: #fce8e5; }
.node[data-state="failed"] .node-state { color: #a93833; }
.node[data-state="cancelled"] { background: #f8f8fb; border-color: var(--line); }
.node[data-state="cancelled"] .node-state { color: var(--muted); }
.node[data-state="skipped"] { opacity: 1; background: #fafafa; }
#page-agents > .nodes { max-width: 900px; }
#page-agents .node-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.run-stages { position: static; padding: 22px 0 0; }
.timeline-title { margin: 0 0 20px; color: var(--faint); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .09em; }
.rail-step { column-gap: 10px; padding-bottom: 22px; }
.rail-label { font-size: 11px; line-height: 20px; }
.rail-note { font-size: 10px; white-space: normal; overflow-wrap: anywhere; }
.rail-dot { width: 20px; height: 20px; }
.rail-step::before { left: 9px; width: 1px; }
.rail-step[data-state="active"] .rail-dot, .rail-step[data-state="retrying"] .rail-dot { border: 2.5px solid #dfd8f8; border-top-color: var(--accent); border-right-color: var(--accent); background: #fff; box-shadow: none; animation: loader-turn 1.2s linear infinite; }
.rail-step[data-state="retrying"] .rail-dot { border-color: #efdfbf; border-top-color: #986816; border-right-color: #986816; }
.rail-step[data-state="done"] .rail-dot { background: #f0ecff; border-color: #e0d9f8; }
.rail-step[data-state="done"] .rail-dot::after { border-color: var(--accent-deep); left: 4px; top: 4px; width: 7px; }
.rail-status { font-size: 10px; }
.rail-step[data-state="cancelled"] .rail-dot { border-color: #a3a6b6; background: #f5f5f8; }
.rail-step[data-state="cancelled"] .rail-dot::after { content: ''; position: absolute; width: 6px; height: 6px; top: 5px; left: 5px; border-radius: 1px; background: #777b90; }

.report-skeleton { max-width: 960px; margin: 0 auto; padding: 40px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.report-skeleton p { margin: 0 0 28px; color: var(--muted); font-size: 13px; }
.skeleton-line, .skeleton-block { display: block; position: relative; overflow: hidden; background: #efedf7; border-radius: 6px; }
.skeleton-line { height: 12px; margin: 14px 0; width: 87%; }
.skeleton-line:nth-child(2) { width: 48%; height: 27px; margin-bottom: 28px; }
.skeleton-line:nth-child(4) { width: 67%; }
.skeleton-block { height: 130px; margin-top: 30px; }
.skeleton-line::after, .skeleton-block::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #ffffffbb, transparent); transform: translateX(-100%); animation: sweep 1.8s ease-in-out infinite; }
@keyframes loader-turn { to { transform: rotate(360deg); } }

.foot { margin-top: 20px; background: transparent; border-top: 1px solid var(--line); }
.foot-inner { padding-top: 24px; padding-bottom: 28px; display: flex; justify-content: space-between; gap: 20px; }
.foot-meta, .foot-note { color: var(--faint); font-size: 10px; line-height: 1.7; }
.foot-meta { font-family: var(--sans); }
#page-report .memo-wrap { border-top: 0; padding-top: 0; }
.memo-wrap .doc-bar { max-width: 960px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: #fff; }
.memo-wrap .doc-switch { border: 0; background: #f3f2f8; padding: 3px; border-radius: 9px; }
.memo-wrap .doc-switch button { font-size: 12px; border-radius: 7px; }
.memo-wrap .doc-switch button.on { background: #fff; color: var(--accent-deep); box-shadow: 0 1px 5px #29244212; }
.memo-wrap .doc-tools .btn { font-size: 12px; }
.run-grid.report-ready { grid-template-columns: minmax(260px, .65fr) minmax(0, 1.55fr); gap: 28px; }
.run-grid.report-ready .run-right { grid-column: 2; grid-row: 1; min-width: 0; overflow-x: clip; }
.run-grid.report-ready .run-stages { display: none; }
.run-right .memo-wrap { padding: 0; border: 0; background: transparent; }
.run-right .report-document .doc { padding: 28px; border-radius: 16px; }
.run-right .report-document .doc-title { font-size: 32px; }
.run-right .report-document .doc-meta { gap: 0 20px; }
.run-right .report-document .doc-meta-item { grid-template-columns: 76px minmax(0, 1fr); }
.run-right .report-document .doc-h2 { font-size: 20px; }
.report-arriving { animation: report-arrive .48s cubic-bezier(.2,.75,.2,1); }
@keyframes report-arrive { from { transform: translateX(36px); } to { transform: translateX(0); } }
.report-recovery { max-width: 960px; margin: 0 auto 18px; padding: 16px 20px; background: #fffaf0; border: 1px solid #eee0c1; border-radius: 12px; font-size: 13px; }
.report-recovery > p { margin: 0 0 12px; }
.report-recovery .status:empty { display: none; }
.run-empty { padding: 56px 24px; border: 1px dashed #d8d2ec; border-radius: 18px; text-align: center; background: #ffffffaa; font-size: 13px; }

@media (max-width: 1120px) {
  .run-grid.running { grid-template-columns: minmax(240px, .8fr) minmax(0, 1.3fr); gap: 22px; }
  .run-grid.running .run-right { grid-column: 2; grid-row: 1 / span 2; }
  .run-grid.running .run-stages { grid-column: 1; grid-row: 2; padding: 22px; background: #ffffffb3; border: 1px solid var(--line); border-radius: 16px; }
  .nodes-head { flex-wrap: wrap; }
}
@media (max-width: 900px) {
  .run-grid.report-ready { grid-template-columns: minmax(0, 1fr); }
  .run-grid.report-ready .run-right { grid-column: 1; grid-row: 1; }
  .run-grid.report-ready .run-left { grid-column: 1; grid-row: 2; }
  .nav { grid-template-columns: 1fr auto; }
  .nav-links { display: flex; }
  .nav-actions { display: none; }
  .nav-links a { padding: 7px 14px; font-size: 12px; }
  .rail { display: block; }
  .rail-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); padding-bottom: 22px; row-gap: 0; }
  .rail-step::before { left: 9px; right: auto; top: 24px; bottom: 2px; width: 1px; height: auto; }
  .rail-dot { grid-row: 1; grid-column: 1; }
  .rail-label { grid-row: 1; grid-column: 2; }
  .rail-note { grid-row: 2; grid-column: 2; }
}
@media (max-width: 720px) {
  .nav-wrap { padding-top: 12px; }
  .nav { height: auto; min-height: 62px; padding: 12px; border-radius: 14px; gap: 8px; }
  .brand { gap: 7px; }
  .brand-name { font-size: 13px; }
  .brand-mark { width: 23px; height: 23px; }
  .nav-links a { padding: 7px 10px; font-size: 11px; }
  .page { padding-top: 30px; }
  .page-heading { align-items: flex-start; margin-bottom: 24px; }
  .page-title { font-size: 28px; }
  .stage-tag { display: none; }
  .run-grid, .run-grid.running { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .run-grid.running .run-right { grid-column: 1; grid-row: 2; }
  .run-grid.running .run-stages { grid-column: 1; grid-row: 3; padding: 20px; }
  .intake, .nodes { padding: 20px; }
  .nodes-head { flex-wrap: nowrap; }
  .nodes-subtitle { max-width: 24ch; line-height: 1.6; }
  .nodes-meta { gap: 5px; }
  .run-overview { padding: 14px; gap: 12px; }
  .run-overview-copy h2 { font-size: 12px; line-height: 1.5; }
  .stop-research { min-width: 111px; padding: 0 10px; font-size: 11px; }
  .node { padding: 13px 10px; column-gap: 10px; }
  .node:hover, .node:focus-visible { padding-left: 10px; }
  .node-name { font-size: 12px; }
  .node-score { font-size: 12px; }
  #page-agents .node-list { grid-template-columns: minmax(0, 1fr); }
  .foot-inner { flex-direction: column; gap: 6px; }
  .report-skeleton { padding: 24px; }
  .memo-wrap .doc-bar { padding: 6px; gap: 4px; }
  .memo-wrap .doc-switch button { padding: 8px; font-size: 11px; }
  .memo-wrap .doc-tools .btn { font-size: 11px; padding: 0 9px; }
  .run-grid.report-ready { grid-template-columns: minmax(0, 1fr); }
  .run-grid.report-ready .run-right { grid-column: 1; grid-row: 1; }
  .run-grid.report-ready .run-left { grid-column: 1; grid-row: 2; }
  .run-right .report-document .doc { padding: 22px 18px; }
  .run-right .report-document .doc-meta { grid-template-columns: minmax(0, 1fr); }
}
/* Four nav links no longer fit beside the wordmark on a phone; the logo stays. */
@media (max-width: 460px) {
  .brand-name { display: none; }
}
/* Decorative motion respects the system preference. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .skeleton-line::after, .skeleton-block::after { display: none; }
}
@media print {
  .page-heading, .run-overview { display: none !important; }
  body { background: white; }
}
/* HTML hidden always wins, including grid/flex layouts introduced above. */
[hidden] { display: none !important; }

/* The editor's fixed facts: the scale is shown, not typed, and a line says why. */
.field-static { margin: 0 0 6px; font-size: 20px; font-weight: 600; letter-spacing: -.3px; color: var(--text); }
.node-page-note { margin: 4px 0 18px; font-size: 13.5px; line-height: 1.5; color: var(--muted); }

/* ---- the thesis page ----
   The fund's mandate, edited in place. A card per section, chips for lists
   that are a set of short words, a textarea for anything that's a sentence. */
.thesis-form { display: flex; flex-direction: column; gap: 16px; max-width: 760px; }
.thesis-card {
  display: flex; flex-direction: column; gap: 14px;
  background: var(--panel); border: 1px solid var(--line);
  border-radius: 20px; padding: 22px 24px;
}
.thesis-card-title { margin: 0; font-size: 15px; font-weight: 600; letter-spacing: -.1px; color: var(--text); }
.thesis-row { display: flex; gap: 16px; flex-wrap: wrap; }
.thesis-row > .field { flex: 1; min-width: 160px; }
.thesis-row-4 > .field { min-width: 120px; }
.thesis-toggle { align-items: center; }
.thesis-toggle input[type=checkbox] {
  width: 36px; height: 20px; margin: 0; flex: none; accent-color: var(--accent); cursor: pointer;
}
.thesis-toggle strong { display: block; font-size: 14px; color: var(--text); }
.thesis-toggle .field-hint { margin-top: 3px; }
.thesis-foot { display: flex; align-items: center; gap: 14px; }
.thesis-foot .btn { width: auto; padding: 0 22px; }

/* A tag input: typed values rendered as removable pills, backed by one
   hidden text field the form reads on save. */
.chip-input {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  min-height: 42px; padding: 7px 9px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-field);
}
.chip-input:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 6px 4px 10px; background: var(--accent-soft); color: var(--accent-deep);
  border-radius: 999px; font-size: 12.5px; font-weight: 500; white-space: nowrap;
}
.chip button {
  display: flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border: none; border-radius: 50%; background: transparent;
  color: var(--accent-deep); font-size: 14px; line-height: 1; cursor: pointer; padding: 0;
}
.chip button:hover { background: var(--accent-dim); }
.chip-input input {
  flex: 1; min-width: 90px; border: none; background: transparent; outline: none;
  font-size: 13px; color: var(--text); padding: 4px 2px;
}
.chip-input input::placeholder { color: var(--faint); }

/* The hard filters: full sentences, one per row, so a chip's width limit
   never truncates a thesis line. */
.line-list { display: flex; flex-direction: column; gap: 8px; }
.line-row { display: flex; gap: 8px; align-items: center; }
.line-row input {
  flex: 1; height: 40px; padding: 0 13px;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-field);
  font-size: 13px; color: var(--text);
}
.line-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); outline: none; }
.line-row button {
  flex: none; width: 32px; height: 32px; border: none; border-radius: 50%;
  background: transparent; color: var(--faint); font-size: 16px; cursor: pointer;
}
.line-row button:hover { background: var(--plate); color: var(--bad); }

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

   Shown until /api/auth/me says who you are; the app chrome stays out of
   the DOM's visible flow until then, so there's no flash of a dashboard
   you're not signed in to see. */

body:not(.authed) header, body:not(.authed) main, body:not(.authed) footer { display: none; }

.auth-gate {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: var(--page); padding: 24px;
}
.auth-card {
  width: 100%; max-width: 360px; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 32px; box-shadow: 0 1px 2px #20204406;
}
.auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.auth-brand .brand-mark { width: 24px; height: 24px; }
.auth-lede { margin: 0 0 6px; font-size: 16px; font-weight: 600; color: var(--text); }
#auth-gate .field { margin-bottom: 14px; }
#auth-gate .btn { width: 100%; margin-top: 4px; }
.auth-switch { margin: 12px 0 0; font-size: 13px; text-align: center; }
.auth-switch a { color: var(--accent); text-decoration: none; }
.auth-switch a:hover { text-decoration: underline; }
#auth-error:not(:empty) { margin-top: 14px; color: var(--bad); }