/* Contract builder — shared by the create wizard (step 4) and the standalone
   page at /contracts.

   Extracted from templates/agent_create.html rather than copied into a second
   template: two stylesheets for one widget is the drift this repo keeps
   finding, and the builder is now reachable from two places. */

/* ── Every control the widget contains, not every wrapper it happens to use ──

   `601d21ce` fixed "the contract builder was white" by scoping the control
   styling to `:is(.cb-standalone, .cb-root)`, which was the right ancestor. It
   then hung the declaration off two specific wrappers:

       .form-group input, .form-group select, .form-group textarea,
       .cb-field-row input

   So a control the widget renders outside those two wrappers gets the browser
   default, which is white on white. Three did, and all three are on screen:
   the agent picker on /contracts, the calibration `select` in view 3, and the
   `fields` / `one value` shape `select` on every part in the shelf.

   A selector that enumerates places is a list, and a scan is only as good as
   the list it scans — the most repeated defect in this repository, and here it
   is again wearing CSS. The property is about the widget's controls, so it is
   stated over the widget's controls.

   Colour only. Width, padding and font-size stay with the wrapper rules that
   own layout, and this sits at the top of the file so the specific rules below
   (`.cb-shape-row input.nm`, `.cb-block-head input.cb-name`, `.cb-field-row
   input`) still win on source order. A default that cannot be overridden is a
   different bug. */
:is(.cb-standalone, .cb-root) :is(input, select, textarea) {
  background: var(--bg0);
  border: 1px solid var(--bg2);
  color: var(--fg1);
  font-family: inherit;
}
      /* ─── Three views ─── */
      .cb-viewnav {
        display: flex;
        gap: 0;
        margin: 14px 0 0;
        border-bottom: 1px solid var(--bg2);
      }
      .cb-viewbtn {
        background: none;
        border: none;
        border-bottom: 2px solid transparent;
        color: var(--fg3);
        cursor: pointer;
        font-size: 0.75rem;
        padding: 8px 14px 7px;
        text-align: left;
        font-family: inherit;
      }
      .cb-viewbtn:hover {
        color: var(--fg1);
      }
      .cb-viewbtn.active {
        color: var(--yellow);
        border-bottom-color: var(--yellow);
      }
      .cb-viewbtn .n {
        display: block;
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        opacity: 0.7;
      }
      .cb-viewbtn .badge {
        font-size: 0.62rem;
        margin-left: 4px;
      }
      .cb-viewbtn .badge.todo {
        color: var(--orange);
      }
      .cb-viewbtn .badge.ok {
        color: var(--green);
      }
      .cb-view {
        padding-top: 14px;
      }
      .cb-lead {
        font-size: 0.74rem;
        color: var(--fg3);
        line-height: 1.6;
        border-left: 2px solid var(--bg3);
        padding-left: 10px;
        margin-bottom: 14px;
      }
      .cb-sticky {
        position: sticky;
        top: 12px;
      }
      .cb-shape-row {
        display: flex;
        gap: 6px;
        align-items: center;
        border: 1px solid var(--bg2);
        border-left: 3px solid var(--bg3);
        padding: 8px;
        margin-bottom: 6px;
        background: var(--bg0);
      }
      .cb-shape-row input.nm {
        flex: 1;
        font-weight: bold;
      }
      .cb-shape-fields {
        margin: 6px 0 0 12px;
      }
      .cb-borrow {
        margin-top: 18px;
        border-top: 1px dashed var(--bg2);
        padding-top: 12px;
      }
      .cb-consumer {
        border: 1px solid var(--bg2);
        padding: 8px 10px;
        margin-bottom: 6px;
        font-size: 0.74rem;
      }
      .cb-consumer .who {
        color: var(--aqua);
      }
      .cb-copybtn {
        float: right;
        font-size: 0.65rem;
        padding: 2px 8px;
      }

      /* Compose-from palette */
      .cb-palette-wrap {
        margin: 14px 0;
      }
      .cb-sub {
        font-size: 0.72rem;
        color: var(--aqua);
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 6px;
      }
      .cb-hintlet {
        color: var(--fg3);
        text-transform: none;
        letter-spacing: 0;
        font-size: 0.68rem;
        margin-left: 6px;
      }
      .cb-palette {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
      }
      .cb-chip {
        border: 1px solid var(--bg2);
        background: var(--bg1);
        color: var(--fg2);
        font-size: 0.72rem;
        padding: 6px 10px;
        cursor: pointer;
        text-align: left;
        max-width: 260px;
      }
      .cb-chip:hover {
        border-color: var(--yellow);
        color: var(--fg0);
      }
      .cb-chip.used {
        opacity: 0.4;
      }
      .cb-chip .cb-chip-k {
        display: block;
        font-size: 0.62rem;
        color: var(--fg3);
        text-transform: uppercase;
        letter-spacing: 0.5px;
      }
      .cb-chip.tool {
        border-left: 3px solid var(--green);
      }
      .cb-chip.judgement {
        border-left: 3px solid var(--blue);
      }
      .cb-chip.prose {
        border-left: 3px solid var(--purple);
      }
      .cb-chip.gap {
        border-left: 3px solid var(--orange);
      }

      /* Two columns: what you are editing, and what it produces */
      .cb-split {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 14px;
        margin-top: 14px;
      }
      @media (max-width: 900px) {
        .cb-split {
          grid-template-columns: 1fr;
        }
      }
      .cb-col {
        min-width: 0;
      }

      /* Live document preview */
      .cb-doc {
        background: var(--bg0-hard);
        border: 1px solid var(--bg2);
        padding: 10px;
        font-size: 0.7rem;
        line-height: 1.6;
        white-space: pre-wrap;
        overflow-x: auto;
        min-height: 120px;
      }
      .cb-doc .k {
        color: var(--fg1);
      }
      .cb-doc .stamp-sourced {
        color: var(--green);
      }
      .cb-doc .stamp-inferred {
        color: var(--blue);
      }
      .cb-doc .stamp-unavailable {
        color: var(--orange);
      }
      .cb-doc .prose {
        color: var(--purple);
      }
      .cb-doc .nul {
        color: var(--gray);
      }
      .cb-doc-legend {
        font-size: 0.66rem;
        color: var(--fg3);
        margin-top: 6px;
        line-height: 1.6;
      }

      /* Composition panel */
      .cb-compose {
        border: 1px solid var(--bg2);
        padding: 10px;
        margin: 14px 0;
        background: var(--bg0);
      }
      .cb-type-row {
        display: flex;
        gap: 8px;
        align-items: baseline;
        font-size: 0.72rem;
        padding: 4px 0;
        border-bottom: 1px dashed var(--bg2);
      }
      .cb-type-row:last-child {
        border-bottom: none;
      }
      .cb-type-row .t {
        color: var(--yellow);
        font-family: monospace;
        cursor: pointer;
      }
      .cb-type-row .t:hover {
        text-decoration: underline;
      }
      .cb-type-row .b {
        color: var(--fg3);
        flex: 1;
      }
      .cb-type-row .c {
        color: var(--aqua);
      }

      /* Collapsed block summary */
      .cb-sum {
        display: flex;
        gap: 8px;
        align-items: center;
        cursor: pointer;
        font-size: 0.75rem;
      }
      .cb-sum .nm {
        font-weight: bold;
        color: var(--fg1);
      }
      .cb-pill {
        font-size: 0.62rem;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        padding: 2px 6px;
        border: 1px solid var(--bg3);
        color: var(--fg3);
      }
      .cb-pill.sourced {
        color: var(--green);
        border-color: var(--green);
      }
      .cb-pill.inferred {
        color: var(--blue);
        border-color: var(--blue);
      }
      .cb-pill.narrative {
        color: var(--purple);
        border-color: var(--purple);
      }
      .cb-pill.unavailable {
        color: var(--orange);
        border-color: var(--orange);
      }
      .cb-todo {
        color: var(--orange);
        font-size: 0.68rem;
      }
      /* The agent's own declared tools, offered as controls rather than as
         placeholder prose. If the platform can name what closes the gap, the
         name is the control. */
      .cb-pick {
        background: none;
        border: 1px solid var(--bg3);
        color: var(--yellow);
        font: inherit;
        font-size: 0.66rem;
        padding: 1px 6px;
        margin-right: 4px;
        cursor: pointer;
      }
      .cb-pick:hover {
        border-color: var(--yellow);
      }
      .cb-ok {
        color: var(--green);
        font-size: 0.68rem;
      }
      .cb-body {
        margin-top: 10px;
      }

      .cb-block {
        border: 1px solid var(--bg2);
        border-left: 3px solid var(--bg3);
        padding: 12px;
        margin-bottom: 10px;
        background: var(--bg0);
      }
      .cb-block[data-status="sourced"] {
        border-left-color: var(--green);
      }
      .cb-block[data-status="inferred"] {
        border-left-color: var(--blue);
      }
      .cb-block[data-status="narrative"] {
        border-left-color: var(--purple);
      }
      .cb-block[data-status="unavailable"] {
        border-left-color: var(--orange);
      }
      .cb-block-head {
        display: flex;
        gap: 8px;
        align-items: center;
        margin-bottom: 8px;
      }
      .cb-block-head input.cb-name {
        flex: 1;
        font-weight: bold;
      }
      .cb-del {
        background: none;
        border: 1px solid var(--bg2);
        color: var(--fg3);
        cursor: pointer;
        padding: 4px 8px;
        font-size: 0.72rem;
      }
      .cb-del:hover {
        color: var(--red);
        border-color: var(--red);
      }
      .cb-fields {
        margin: 6px 0;
      }
      .cb-field-row {
        display: flex;
        gap: 6px;
        margin-bottom: 4px;
      }
      .cb-field-row input {
        font-size: 0.75rem;
        padding: 4px 6px;
      }
      .cb-field-row .cb-fname {
        flex: 2;
      }
      .cb-field-row .cb-ftype {
        flex: 3;
        font-family: monospace;
      }
      .cb-why-count {
        font-size: 0.68rem;
        color: var(--fg3);
        text-align: right;
      }
      .cb-why-count.short {
        color: var(--orange);
      }
      .cb-derived {
        font-size: 0.7rem;
        color: var(--fg3);
        border-top: 1px dashed var(--bg2);
        margin-top: 8px;
        padding-top: 6px;
      }
      .cb-derived code {
        color: var(--aqua);
      }
      .cb-finding {
        border-left: 3px solid var(--orange);
        background: var(--bg1);
        padding: 8px 10px;
        margin-bottom: 6px;
        font-size: 0.75rem;
        line-height: 1.5;
      }
      .cb-finding .cb-check {
        color: var(--orange);
        font-family: monospace;
        font-size: 0.7rem;
        display: block;
        margin-bottom: 2px;
      }
      .cb-result {
        border: 1px solid var(--green);
        padding: 10px;
        margin-top: 12px;
      }
      .cb-result h4 {
        margin: 0 0 6px;
        font-size: 0.78rem;
        color: var(--green);
      }
      .cb-pre {
        background: var(--bg0-hard);
        border: 1px solid var(--bg2);
        padding: 8px;
        font-size: 0.68rem;
        max-height: 260px;
        overflow: auto;
        white-space: pre;
        color: var(--fg2);
      }
      .cb-tabs {
        display: flex;
        gap: 0;
        margin: 8px 0 0;
      }
      .cb-tabs button {
        background: var(--bg1);
        border: 1px solid var(--bg2);
        border-bottom: none;
        color: var(--fg3);
        font-size: 0.7rem;
        padding: 4px 10px;
        cursor: pointer;
      }
      .cb-tabs button.active {
        background: var(--bg0-hard);
        color: var(--yellow);
      }
      .cb-gen {
        font-size: 0.72rem;
        color: var(--fg3);
        margin-top: 6px;
      }
      .cb-gen code {
        color: var(--aqua);
      }


/* Bits the wizard's own stylesheet provided and a standalone page must not
   assume. Deliberately minimal — this is not a second design system, it is the
   handful of primitives the widget's markup references. */
:is(.cb-standalone, .cb-root) .form-group { margin-bottom: 14px; }
:is(.cb-standalone, .cb-root) .form-group label {
  display: block;
  font-size: 0.72rem;
  color: var(--fg3);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
:is(.cb-standalone, .cb-root) .form-group input,
:is(.cb-standalone, .cb-root) .form-group select,
:is(.cb-standalone, .cb-root) .form-group textarea,
:is(.cb-standalone, .cb-root) .cb-field-row input {
  width: 100%;
  background: var(--bg0);
  border: 1px solid var(--bg2);
  color: var(--fg1);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 0.8rem;
}
/* ── View 3 redesign ─────────────────────────────────────────────────────────── */
/* Hint text for calibration + prompt sections (replaces .hint, scoped globally) */
.cb-cal-hint {
  font-size: 0.7rem;
  color: var(--fg3);
  line-height: 1.55;
  margin-top: 6px;
  margin-bottom: 4px;
}
/* Coordinator-only collapsible (synthesis + full prompt schema reference) */
.cb-coordinator-only {
  margin-top: 16px;
  border-top: 1px dashed var(--bg2);
  padding-top: 10px;
}
.cb-coordinator-only > summary {
  cursor: pointer;
  font-size: 0.71rem;
  color: var(--fg3);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  list-style: none;
  user-select: none;
}
.cb-coordinator-only > summary::-webkit-details-marker { display: none; }
.cb-coordinator-only > summary::before {
  content: "▶ ";
  font-size: 0.58rem;
  opacity: 0.6;
  display: inline-block;
  transition: transform 0.15s;
}
.cb-coordinator-only[open] > summary::before { content: "▼ "; }
.cb-coordinator-body { margin-top: 10px; }
/* Minimal prompt declaration — one copy-able line */
.cb-prompt-minimal {
  background: var(--bg0-hard);
  border: 1px solid var(--bg2);
  padding: 8px 10px;
  font-size: 0.7rem;
  color: var(--fg2);
  line-height: 1.55;
  margin-top: 5px;
  overflow-wrap: break-word;
}
.cb-prompt-minimal .cb-copybtn { float: right; margin-left: 8px; }
/* ─────────────────────────────────────────────────────────────── */
:is(.cb-standalone, .cb-root) .row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
:is(.cb-standalone, .cb-root) .hint { font-size: 0.7rem; color: var(--fg3); line-height: 1.5; }
:is(.cb-standalone, .cb-root) .info-box {
  border: 1px solid var(--bg2);
  background: var(--bg0);
  padding: 10px 12px;
  font-size: 0.76rem;
  line-height: 1.6;
  margin-bottom: 14px;
}
/* `.btn` / `.btn-primary` deliberately absent: components.css owns them, and
   a more specific copy here would silently win and drift from every other
   button on the platform. The standalone page links common.css and
   components.css for exactly this reason — the first version did not, which is
   why nav.js and every primitive rendered as unstyled text. */
:is(.cb-standalone, .cb-root) .collapsible-header {
  cursor: pointer;
  font-size: 0.74rem;
  color: var(--fg3);
  padding: 8px 0;
  border-top: 1px solid var(--bg2);
  margin-top: 14px;
}
:is(.cb-standalone, .cb-root) .collapsible-body { display: none; }
:is(.cb-standalone, .cb-root) .collapsible-body.open { display: block; }

/* ── Tool-driven field picker ───────────────────────────────────────
   The tool decides which fields are available on a sourced block. A field
   here came from reading the tool, not from its description prose. */
.cb-shape {
  border: 1px dashed var(--bg3);
  padding: 8px;
  margin: 8px 0;
  background: var(--bg0-hard);
}
.cb-shape-head {
  font-size: 0.68rem;
  color: var(--fg3);
  margin-bottom: 6px;
}
.cb-ev {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 1px 5px;
  border: 1px solid var(--bg3);
  margin: 0 4px;
}
.cb-ev.built { color: var(--green); border-color: var(--green); }
.cb-ev.vendor { color: var(--yellow); border-color: var(--yellow); }
.cb-shape-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.cb-shape-f {
  background: var(--bg1);
  border: 1px solid var(--bg2);
  color: var(--fg3);
  font-family: inherit;
  font-size: 0.68rem;
  padding: 3px 7px;
  cursor: pointer;
}
.cb-shape-f:hover { border-color: var(--yellow); color: var(--fg1); }
.cb-shape-f.on { color: var(--green); border-color: var(--green); }
.cb-shape-f .t { color: var(--gray); margin-left: 5px; }
.cb-uncovered {
  border-left: 3px solid var(--orange);
  background: var(--bg1);
  padding: 8px 10px;
  margin: 8px 0;
  font-size: 0.7rem;
  line-height: 1.6;
  color: var(--fg2);
}
.cb-uncovered code { color: var(--orange); margin-right: 4px; }
.cb-uncovered div { color: var(--fg3); margin-top: 4px; }

/* ── Reverse lookup: which tool returns this field? ──────────────────
   The forward question is the picker; this is "I know the field, who has
   it". Each hit shows its tool AND its path, because two tools returning
   `symbol` is a choice for the author, not an ambiguity to resolve
   automatically. */
.cb-src-hint {
  font-size: 0.66rem;
  color: var(--fg3);
  margin: 2px 0 6px 4px;
  line-height: 1.7;
}
.cb-src-hint .k { color: var(--aqua); }
.cb-src-hit {
  background: none;
  border: 1px solid var(--bg2);
  color: var(--green);
  font-family: inherit;
  font-size: 0.64rem;
  padding: 1px 6px;
  margin-left: 4px;
  cursor: pointer;
}
.cb-src-hit:hover { border-color: var(--green); background: var(--bg1); }
.cb-src-hit .p { color: var(--gray); margin-left: 5px; }