/* site/assets/dev/dev.css: the developer hub (/developers/) and the agents
   page (/agents/). Everything here is built from the --ui-* tokens in
   /assets/craton-ui.css; the dv-* parts below are this pair of pages' own
   layout, sizes and drawings.
   System fonts only; nothing here fetches anything but the committed photo
   the pages name in their own markup. */

/* ---------- page ---------- */

.dv-page main { overflow-x: clip; }
.dv-page .ui-features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dv-center { text-align: center; margin-left: auto; margin-right: auto; }
.dv-center .ui-lede { margin-left: auto; margin-right: auto; }

/* ---------- hero: text left, one console card right ---------- */

.dv-hero { --ui-hero-cols: minmax(0, 5fr) minmax(0, 6fr); }
.dv-hero .ui-hero-backdrop img { object-position: 60% 50%; opacity: 0.7; }
.dv-hero .ui-lede { max-width: 30ch; }

/* The console card (.ui-console) and the status in its code heads
   (.ui-code-status) are the design system's. */

/* Code in these pages: a little more air than the default block. */
.dv-page .ui-code pre { padding: 16px 18px; line-height: 1.65; }
.dv-page .ui-code-copy { min-width: 64px; }

/* The call sequence (.ui-seq) and its call chips (.ui-call) are the design
   system's. */

/* ---------- the model lab: one stored run, its number and its request ---------- */

.dv-lab .ui-stat { margin-top: var(--ui-space-7); }
.dv-lab .ui-stat-num { font-size: var(--ui-type-stat-md); line-height: 1; }
.dv-spark { display: block; width: 100%; max-width: 360px; height: auto; margin: var(--ui-space-5) 0 0; overflow: visible; }
.dv-spark-base { stroke: var(--ui-line-strong); stroke-width: 1; }
.dv-spark-wash { fill: var(--ui-accent); opacity: 0.1; }
.dv-spark-line { fill: none; stroke: var(--ui-accent); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.dv-spark-dot { fill: var(--ui-accent); stroke: var(--ui-bg); stroke-width: 2.5; }
.dv-spark-guide { stroke: var(--ui-line-strong); stroke-width: 1; stroke-dasharray: 2 4; }
.dv-spark-label { fill: var(--ui-muted); font: 12px var(--ui-font-text); font-variant-numeric: tabular-nums; }
.dv-spark-value { fill: var(--ui-ink); font: 650 13px var(--ui-font-text); font-variant-numeric: tabular-nums; }
.dv-runid { margin: var(--ui-space-3) 0 0; font: 12.5px/1.5 var(--ui-font-mono); color: var(--ui-muted); overflow-wrap: anywhere; }

/* ---------- the machine entry points: a list of addresses ---------- */

.dv-doors .ui-row-icon svg { stroke-width: 2.1; }

/* Link cards (.ui-linkcard in .ui-cards) are the design system's. */

/* ---------- the agent prompt card on /agents/ ---------- */

.dv-page .dv-prompt .ui-code pre { padding: 26px 26px 28px; font: 19px/1.6 var(--ui-font-mono); color: var(--ui-ink); white-space: pre-wrap; }
.dv-prompt .ui-code-head { padding: 12px 12px 12px 22px; }
.dv-prompt .ui-code-label { font-family: var(--ui-font-text); font-size: 14px; }
.dv-tools { margin: var(--ui-space-6) 0 0; }
.dv-tools .ui-chip { font-family: var(--ui-font-mono); font-size: 13.5px; font-weight: var(--ui-weight-regular); }

/* The closing line on /agents/. */
.dv-stops { max-width: 62ch; }
.dv-stops p { margin: var(--ui-space-4) 0 0; font-size: 17px; line-height: 1.55; color: var(--ui-ink-2); }

/* ---------- widths ---------- */

@media (max-width: 1180px) {
  /* The address list sits in a narrow column here: addresses go under their names. */
  .dv-doors .ui-row { flex-wrap: wrap; }
  .dv-doors .ui-row-value { max-width: 100%; flex-basis: 100%; padding-left: 42px; text-align: left; }
}
@media (max-width: 980px) {
  .dv-page .ui-features { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .dv-page .ui-features { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .dv-page .ui-feature { display: grid; grid-template-columns: 30px minmax(0, 1fr); column-gap: 14px; padding: 18px; }
  .dv-page .ui-feature-glyph { grid-row: span 2; width: 30px; height: 30px; margin: 0; }
  /* Commands that must stay whole wrap instead of scrolling. */
  .dv-wrap pre { white-space: pre-wrap; overflow-wrap: anywhere; }
  .dv-page .dv-prompt .ui-code pre { padding: 18px 18px 20px; font-size: 16px; }
}
@media (max-width: 480px) {
  .dv-page .ui-code pre { padding: 14px; font-size: 12.5px; }
}