/* developers.css — the Developers page's own pieces, on top of docs.css.
   Tokens only. The page reuses the documentation's layout, headings, code
   blocks and tool cards; what is added here is the client tabs, the tool
   table's auth column, the public/private pair, the flow strip and the live
   count line. */

/* -- client tabs ---------------------------------------------------------- */
.dv-tabs{ display:flex; gap:6px; margin:18px 0 0; flex-wrap:wrap; }
.dv-tabs [role="tab"]{
  padding:8px 14px; border:1px solid var(--docs-line); border-radius:11px;
  background:var(--paper-66); color:var(--graphite);
  font:12px var(--font-body, inherit); font-weight:600; cursor:pointer;
}
.dv-tabs [role="tab"][aria-selected="true"]{ background:var(--brand); color:var(--on-brand,var(--white)); border-color:var(--brand); }
.dv-tabs [role="tab"]:focus-visible{ outline:2px solid var(--brand-55); outline-offset:2px; }
.dv-panel[hidden]{ display:none; }
.dv-status{ display:inline-flex; align-items:center; gap:6px; margin:14px 0 0; padding:4px 9px; border-radius:999px;
  border:1px solid var(--docs-line); font:9px var(--font-mono); letter-spacing:.08em; color:var(--graphite); }
.dv-status.ok::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--ok,#2f9e5f); }
.dv-status.doc::before{ content:""; width:6px; height:6px; border-radius:50%; background:var(--warn,#d98a1f); }

/* -- the three-step flow strip -------------------------------------------- */
.dv-flow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:18px 0; }
.dv-flow > div{ border:1px solid var(--docs-line); border-radius:14px; padding:14px 16px; background:var(--paper-66); }
.dv-flow .micro{ display:block; color:var(--brand); margin-bottom:6px; }
.dv-flow b{ display:block; font-size:13px; margin-bottom:4px; }
.dv-flow p{ margin:0; font-size:11px; line-height:1.65; color:var(--graphite); }

/* -- the tool table ------------------------------------------------------- */
.dv-tools{ margin:18px 0; border:1px solid var(--docs-line); border-radius:16px; overflow:hidden; }
.dv-tools > div{ display:grid; grid-template-columns:minmax(150px,1fr) minmax(0,2.2fr) 130px; gap:12px; align-items:center;
  padding:12px 16px; border-top:1px solid var(--docs-line); }
.dv-tools > div:first-child{ border-top:0; background:var(--paper-66); font:9px var(--font-mono); letter-spacing:.08em; color:var(--graphite); }
.dv-tools code{ font:11px var(--font-mono); }
.dv-tools p{ margin:0; font-size:11px; line-height:1.6; color:var(--graphite); }
.dv-auth{ font:9px var(--font-mono); letter-spacing:.06em; padding:3px 8px; border-radius:999px; border:1px solid var(--docs-line); justify-self:start; white-space:nowrap; }
.dv-auth.anon{ color:var(--ok,#2f9e5f); border-color:color-mix(in srgb, var(--ok,#2f9e5f) 45%, transparent); }
.dv-auth.cred{ color:var(--graphite); }

/* -- public / private pair ------------------------------------------------ */
.dv-pair{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin:18px 0; }
.dv-pair > div{ border:1px solid var(--docs-line); border-radius:16px; padding:18px 20px; background:var(--paper-66); }
.dv-pair h3{ margin:0 0 10px; font-size:14px; letter-spacing:-.01em; }
.dv-pair ul{ margin:0 0 10px; padding-left:18px; font-size:12px; line-height:1.8; }
.dv-pair p{ margin:0; font-size:11px; line-height:1.65; color:var(--graphite); }
.dv-pair .dv-beta{ margin-top:12px; padding:10px 12px; border-radius:10px; border:1px dashed var(--docs-line); font-size:11px; line-height:1.6; }

/* -- the recorded example ------------------------------------------------- */
.dv-example{ border:1px solid var(--docs-line); border-radius:16px; overflow:hidden; margin:16px 0; }
/* Each turn is a two-column grid: the small label column and the content
   column. A turn holds MORE than one content block (a line, a tool block, a
   second line), so every block is pinned to the content column explicitly —
   with auto-placement the third child would land in the 86px label column and
   wrap one character per line. */
.dv-example > div{ padding:14px 18px; border-top:1px solid var(--docs-line); display:grid; grid-template-columns:86px minmax(0,1fr); column-gap:14px; row-gap:0; }
.dv-example > div:first-child{ border-top:0; }
.dv-example > div > *{ grid-column:2; min-width:0; }
.dv-example .who{ grid-column:1; grid-row:1; font:9px var(--font-mono); letter-spacing:.08em; color:var(--graphite); padding-top:3px; }
.dv-example .who.agent{ color:var(--brand); }
.dv-example p{ margin:0 0 6px; font-size:12px; line-height:1.7; }
.dv-example p:last-child{ margin-bottom:0; }
/* Tool calls and results: wrapped at spaces, never inside a token — a memory
   id or a URL longer than the box scrolls sideways inside the block. */
.dv-example pre{ margin:6px 0 6px; padding:10px 12px; border-radius:10px; background:var(--paper-72); border:1px solid var(--docs-line);
  font:10.5px/1.7 var(--font-mono); white-space:pre-wrap; overflow-wrap:normal; word-break:normal; overflow-x:auto; max-width:100%; }
.dv-example pre:last-child{ margin-bottom:0; }
.dv-example .quote{ border-left:2px solid var(--brand); padding-left:10px; color:var(--ink); }

/* -- the live line -------------------------------------------------------- */
.dv-live{ font:10px var(--font-mono); letter-spacing:.06em; color:var(--graphite); margin:10px 0 0; }
.dv-live b{ color:var(--ink); font-weight:600; }

/* -- the connect-agent explainer ------------------------------------------ */
.dv-steps{ counter-reset:s; margin:16px 0; padding:0; list-style:none; }
.dv-steps li{ position:relative; padding:0 0 10px 34px; font-size:12px; line-height:1.7; }
.dv-steps li::before{ counter-increment:s; content:counter(s); position:absolute; left:0; top:2px; width:22px; height:22px; border-radius:50%;
  border:1px solid var(--docs-line); display:grid; place-items:center; font:10px var(--font-mono); color:var(--brand); }

@media (max-width:760px){
  .dv-flow,.dv-pair{ grid-template-columns:1fr; }
  .dv-tools > div{ grid-template-columns:1fr; gap:6px; }
  .dv-tools > div:first-child{ display:none; }
  .dv-example > div{ grid-template-columns:1fr; column-gap:0; row-gap:6px; }
  .dv-example > div > *{ grid-column:1; }
  .dv-example .who{ grid-row:auto; }
}

/* -- need private memory? ------------------------------------------------- */
.dv-need{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:18px; align-items:center; margin:18px 0 0; padding:18px 20px;
  border:1px solid var(--docs-line); border-radius:16px; background:var(--paper-66); }
.dv-need .micro{ display:block; color:var(--brand); margin-bottom:6px; }
.dv-need h3{ margin:0 0 6px; font-size:15px; letter-spacing:-.01em; }
.dv-need p{ margin:0; font-size:11px; line-height:1.65; color:var(--graphite); }
@media (max-width:760px){ .dv-need{ grid-template-columns:1fr; } }

/* -- the fast doors at the top (Add Cognia UX) ---------------------------- */
/* -- the onboarding top: heading → Add Cognia → private memory → live count → on-page nav.
   Each group gets its own band of air (the docs' 28px rhythm, a wider 40px
   before the private-memory group) so the hierarchy reads at a glance:
   Add Cognia is the one primary action, the two private-memory doors are
   deliberate secondary actions, the count and the nav are reference. */
/* The docs' .hero-actions centres its row; this hero is a left-aligned column
   like the heading and lede above it: the button (content-width, never
   stretched) with its helper line directly under it, all on the same left edge. */
.dv-hero{ flex-direction:column; align-items:flex-start; justify-content:flex-start; gap:8px; margin:4px 0 0; }   /* + the heading's own 28px bottom padding = 32px under the lede */
.dv-hero .action.primary{ min-height:44px; font:inherit; font-weight:600; cursor:pointer; }
.dv-hero-note{ font-size:12px; color:var(--graphite); }
.dv-private{ margin:40px 0 0; }
.dv-private > .micro{ display:block; color:var(--brand); margin:0 0 10px; }
.dv-doors{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; margin:0; }
.dv-doors > div{ display:flex; flex-direction:column; align-items:flex-start; gap:8px; padding:16px 18px; border:1px solid var(--docs-line); border-radius:14px; background:var(--paper-66); }
.dv-doors .dv-door-ctx{ font-size:12px; color:var(--graphite); }
.dv-doors .action{ min-height:44px; }
.dv-doors p{ margin:0; font-size:11px; line-height:1.65; color:var(--graphite); }
.dv-live{ margin:28px 0; }
.page-heading + .dv-hero ~ .on-page{ margin-top:28px; }
@media (max-width:760px){ .dv-doors{ grid-template-columns:1fr; } .dv-hero{ flex-direction:column; align-items:flex-start; } .dv-private{ margin-top:32px; } .dv-live{ margin:24px 0; } .page-heading + .dv-hero ~ .on-page{ margin-top:24px; } }