/* ══════════════════════════════════════════════════════════
   PACE DOCS - Trace design system

   Page-specific rules only. Fonts, tokens, reset, typography and
   buttons live in /assets/trace-base.css; the nav, footer and
   Request-access modal live in /assets/trace-chrome.css. Load both
   before this sheet.

   The nav collapses to a burger at the shared 720px rather than the
   900px this sheet used, so /docs behaves like every other page.
   ══════════════════════════════════════════════════════════ */

:root {
  --nav-h: 64px;   /* local: the sticky offset the section scroll-margins use */
}


/* ══════════════════════════════════════════════════════════════════
   PACE DOCS - Trace design system

   One sheet for every page under /docs. Replaces the previous stack of
   landing.css + mcp.css + docs/shared.css + a per-page sheet, all four of
   which were the old dark design.

   Tokens, nav, buttons and footer rules used to be copied in here verbatim
   from mcp-page.css so /docs and /mcp would render as one system; they now
   come from the shared trace-base.css + trace-chrome.css that /mcp also
   loads, so the two cannot drift apart. The docs-* component rules below
   are the reskin of what used to live in docs/shared.css.

   What changed vs. the old /docs:
     surface   dark #14151B (blue-tinted)  ->  light paper #F7F7F5
     accent    mint #5BCFC9 (fails AA)     ->  teal #0C7C6E (AA ~5:1)
     display   Usual 500/600               ->  Bricolage Grotesque 800
     radii     14 / 12 / 10 / 8            ->  10 / 8 / 6 / 5
     labels    uppercase mono kickers      ->  sentence-case sans
     tabs      instant swap                ->  sliding pill + panel fade
   Mint is kept, but only inside the dark code islands where it passes.
   ══════════════════════════════════════════════════════════════════ */


.docs-tile-body, .docs-card-note, .docs-faq-a,
.tool-row-desc, .doc-card-desc, .docs-callout-text, figcaption,
.docs-kv-val, .docs-card-sub {
  text-wrap:pretty;
}


/* ── HERO ───────────────────────────────────────────────────────── */
/* Docs heroes are content-height, not viewport-height: the guide should
   start above the fold. No radial glow, no grid overlay (Trace keeps
   gradients for the CTA only). */
.hero.docs-hero {
  padding:clamp(48px,7vw,88px) var(--gutter) clamp(40px,5vw,64px);
  text-align:center;
  position:relative;
}

/* No blanket max-width on the hero's children: a `.hero.docs-hero > *` rule
   outranks .hero-sub / h1 on specificity and would stretch both to --max-w.
   Each child carries its own measure instead. */

.docs-hero h1 {
  font-size:clamp(2.6rem, 5.6vw, 4.4rem);
  max-width:19ch;
  margin:0 auto 22px;
}

.docs-hero h1 em { font-style:normal; color:var(--teal); }

.hero-sub {
  font-size:1.12rem;
  color:var(--ink-soft);
  max-width:640px;
  margin:0 auto;
  line-height:1.6;
}

/* jump links */
.hero-links {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px 24px;
  flex-wrap:wrap;
  margin-top:30px;
}

.hero-links a {
  font-size:.92rem;
  font-weight:600;
  color:var(--teal);
  border-bottom:1px solid var(--teal-border);
  padding-bottom:1px;
  transition:border-color .18s ease, color .18s ease;
}
.hero-links a:hover { border-color:var(--teal); color:var(--teal-hover); }

/* app identity row */
.docs-appline {
  display:flex;
  align-items:center;
  gap:14px;
  justify-content:center;
  margin:30px 0 4px;
}

.docs-logo-tile {
  width:48px; height:48px;
  border-radius:var(--r-card);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:var(--light-card);
}
.docs-logo-tile img { width:100%; height:100%; display:block; object-fit:cover; }

.docs-appline .docs-appmeta { text-align:left; }
.docs-appline .docs-appname {
  font-family:var(--sans);
  font-size:1rem;
  font-weight:600;
  color:var(--ink);
  line-height:1.3;
}
.docs-appline .docs-appdesc {
  font-size:.85rem;
  color:var(--ink-mute);
  font-weight:500;
}

/* ── SECTIONS ───────────────────────────────────────────────────── */
.docs-section { padding:clamp(56px,7vw,88px) var(--gutter); }

.docs-section-alt {
  background:var(--paper-2);
  border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);
}

.docs-inner { max-width:1100px; margin:0 auto; }

.docs-section[id] { scroll-margin-top:calc(var(--nav-h) + 20px); }

.docs-section-header { margin-bottom:44px; max-width:760px; }

.section-title {
  font-family:var(--display);
  font-weight:800;
  font-size:clamp(1.7rem, 2.3vw, 2rem);
  letter-spacing:-0.015em;
  line-height:1.04;
  color:var(--ink-warm);
  max-width:22ch;
  margin-bottom:16px;
  text-wrap:balance;
}

.section-sub {
  font-size:1.08rem;
  color:var(--ink-soft);
  max-width:620px;
  line-height:1.65;
}

/* ── INTRO + KEY/VALUE ──────────────────────────────────────────── */
.docs-intro {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:56px;
  align-items:start;
}
.docs-intro .section-title { margin-bottom:16px; }
.docs-intro .section-sub { max-width:none; }

.docs-kv {
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
}

.docs-kv-row {
  display:grid;
  grid-template-columns:130px 1fr;
  gap:20px;
  align-items:center;
  padding:14px 20px;
  border-bottom:1px solid var(--line);
}
.docs-kv-row:last-child { border-bottom:none; }

/* was an uppercase mono kicker; now a plain sentence-case key */
.docs-kv-key {
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:600;
  color:var(--ink-mute);
  letter-spacing:0;
  text-transform:none;
}

.docs-kv-val {
  font-family:var(--sans);
  font-size:.9rem;
  color:var(--ink);
  line-height:1.5;
}

.docs-kv-val.mono {
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--teal);
  overflow-wrap:anywhere;
}

/* ── SUBHEADS (were uppercase mono kickers) ─────────────────────── */
.docs-subhead {
  font-family:var(--sans);
  font-size:.95rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.005em;
  text-transform:none;
  margin:30px 0 14px;
}
.docs-subhead:first-of-type { margin-top:0; }
.docs-subhead-top { margin-top:0; margin-bottom:20px; }
.docs-subhead-spaced { margin-top:64px; margin-bottom:20px; }

/* ── DOCS CARDS ─────────────────────────────────────────────────── */
.docs-card {
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  padding:32px;
  margin-bottom:24px;
  scroll-margin-top:calc(var(--nav-h) + 20px);
}

.docs-card-head {
  display:flex;
  align-items:center;
  gap:16px;
  margin-bottom:28px;
  padding-bottom:22px;
  border-bottom:1px solid var(--line);
}

.docs-card-logo {
  width:44px; height:44px;
  border-radius:var(--r-card);
  background:var(--light-card);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--teal);
  flex-shrink:0;
  overflow:hidden;
}
.docs-card-logo img { width:100%; height:100%; object-fit:cover; }
/* Provider logos bleed to the tile edge; an icon sits inset and inherits teal. */
.docs-card-logo svg { width:22px; height:22px; color:var(--teal); }

.docs-card-title {
  font-family:var(--display);
  font-size:1.4rem;
  font-weight:700;
  color:var(--ink-warm);
  margin:0 0 4px;
  letter-spacing:-0.01em;
  line-height:1.15;
}

.docs-card-sub {
  font-family:var(--sans);
  font-size:.88rem;
  color:var(--ink-mute);
  margin:0;
}

.docs-card-head > div:nth-child(2) { flex:1; min-width:0; }

/* sentence-case tag, tight radius */
.docs-card-badge {
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  color:var(--teal);
  background:var(--teal-tint);
  border:1px solid var(--teal-border);
  padding:4px 9px;
  border-radius:var(--r-tag);
  letter-spacing:0;
  text-transform:none;
  flex-shrink:0;
  white-space:nowrap;
}

.docs-card-badge.alt {
  color:var(--ink-soft);
  background:var(--paper-2);
  border-color:var(--line-2);
}

.docs-card-lede {
  font-size:1rem;
  color:var(--ink-soft);
  margin:0 0 24px;
  line-height:1.65;
}

/* ── LINKS IN PROSE ─────────────────────────────────────────────── */
.docs-card-lede a,
.docs-steps a,
.tool-row-desc a,
.docs-faq-a a,
.docs-tile-body a,
.docs-card-note a {
  color:var(--teal);
  border-bottom:1px solid var(--teal-border);
  transition:border-color .18s ease;
}
.docs-card-lede a:hover,
.docs-steps a:hover,
.tool-row-desc a:hover,
.docs-faq-a a:hover,
.docs-tile-body a:hover,
.docs-card-note a:hover { border-color:var(--teal); }

/* Notes sit on --paper-2, which is dark enough that --teal measures 4.26:1,
   just under AA for body text. The darker step passes at 5.50:1. */
.docs-card-note a { color:var(--teal-hover); border-bottom-color:rgba(10,105,93,0.3); }
.docs-card-note a:hover { border-bottom-color:var(--teal-hover); }

/* ── NUMBERED STEPS ─────────────────────────────────────────────── */
.docs-steps {
  list-style:none;
  padding:0;
  margin:0 0 8px;
  counter-reset:docs-step;
}

.docs-steps > li {
  position:relative;
  padding:13px 0 13px 44px;
  font-size:.98rem;
  color:var(--ink);
  line-height:1.6;
  counter-increment:docs-step;
  border-bottom:1px solid var(--line);
}
.docs-steps > li:last-child { border-bottom:none; }

.docs-steps > li::before {
  content:counter(docs-step);
  position:absolute;
  left:0; top:13px;
  width:27px; height:27px;
  border-radius:var(--r-full);
  background:var(--teal);
  border:none;
  color:#fff;
  font-family:var(--mono);
  font-size:11.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

.docs-steps strong { color:var(--ink); font-weight:700; }
.docs-steps em { color:var(--teal); font-style:normal; font-weight:600; }

/* ── INLINE CODE ────────────────────────────────────────────────── */
.docs-steps code,
.docs-card-note code,
.docs-tile-body code,
.docs-faq-a code,
.docs-callout-text code,
.tool-row-desc code {
  font-family:var(--mono);
  font-size:.82em;
  color:var(--teal);
  background:var(--teal-tint);
  border:1px solid var(--teal-border);
  padding:1px 5px;
  border-radius:4px;
  overflow-wrap:anywhere;
}

/* ── NOTE ───────────────────────────────────────────────────────── */
/* --paper-2, not --paper: these notes sit both directly on the page (which is
   --paper) and inside white cards, and --paper-2 is the one value that stays
   legible as a distinct block against either. */
.docs-card-note {
  font-size:.92rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin:18px 0 0;
  padding:14px 18px;
  background:var(--paper-2);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
}
.docs-card-note strong { color:var(--ink); font-weight:700; }

/* .docs-callout carries its gap as margin-top, which only spaces it from what
   precedes it. These adjacencies put it (or a grid) *before* the next block,
   where it would otherwise sit flush against it. */
.docs-callout + .docs-grid,
.docs-grid + .docs-tabs,
.docs-grid + .docs-card {
  margin-top:28px;
}

/* ── CODE BLOCK (dark island) ───────────────────────────────────── */
.docs-codeblock {
  position:relative;
  background:var(--ink);
  border:1px solid var(--ink-border);
  border-radius:var(--r-card);
  margin:12px 0;
  overflow:hidden;
}

.docs-codeblock pre {
  margin:0;
  padding:16px 20px;
  padding-right:84px;
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.65;
  color:var(--cream-soft);
  overflow-x:auto;
  white-space:pre;
}

.copy-btn-inline { position:absolute; top:10px; right:10px; z-index:2; }

/* ── CONFIG / ENDPOINT BLOCK (dark island) ──────────────────────── */
.config-block {
  position:relative;
  background:var(--ink);
  border:1px solid var(--ink-border);
  border-radius:var(--r-panel);
  width:100%;
  max-width:600px;
  margin:36px auto 0;
  overflow:hidden;
  text-align:left;
}

.config-topbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 14px;
  border-bottom:1px solid var(--ink-border);
  background:var(--ink-card);
}

/* traffic-light dots removed; the filename label carries the affordance */
.config-dots { display:none; }

.config-filename {
  font-family:var(--mono);
  font-size:.7rem;
  color:var(--cream-mute);
  letter-spacing:0.04em;
}

.copy-btn {
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  color:var(--cream-soft);
  background:none;
  border:1px solid var(--ink-border2);
  padding:4px 10px;
  border-radius:var(--r-tag);
  cursor:pointer;
  transition:color .18s ease, border-color .18s ease, background .18s ease;
}
.copy-btn:hover { color:var(--mint); border-color:var(--mint-border); background:var(--mint-tint); }
.copy-btn.copied { color:var(--mint); border-color:var(--mint-border); background:var(--mint-tint); }

.config-body {
  padding:20px;
  font-family:var(--mono);
  font-size:.8rem;
  line-height:1.8;
  color:var(--cream-soft);
  white-space:pre;
  overflow-x:auto;
}

.config-body .k { color:var(--mint-2); }
.config-body .v { color:var(--cream); }
.config-body .s { color:var(--mint); }
.config-body .c { color:var(--cream-mute); }

.endpoint-body {
  padding:26px 22px;
  font-size:.98rem;
  white-space:normal;
  overflow-wrap:anywhere;
  text-align:left;
}

.endpoint-url { font-family:var(--mono); color:var(--mint); letter-spacing:0.01em; }

.endpoint-caption {
  font-family:var(--sans);
  font-size:.78rem;
  color:var(--cream-mute);
  letter-spacing:0;
  padding:11px 16px 14px;
  border-top:1px solid var(--ink-border);
  background:var(--ink-card);
}

/* ── TABS: sliding pill + panel fade ───────────────────────────── */
.docs-tabs {
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  overflow:hidden;
}

.docs-tab-bar {
  display:flex;
  position:relative;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
  overflow-x:auto;
  scrollbar-width:none;
  padding:6px;
  gap:2px;
}
.docs-tab-bar::-webkit-scrollbar { display:none; }

/* the pill that slides, positioned by JS, animated here */
.docs-tab-pill {
  position:absolute;
  top:6px;
  bottom:6px;
  left:0;
  width:0;
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-btn);
  box-shadow:0 1px 2px rgba(18,18,18,0.05);
  transition:transform .34s cubic-bezier(.2,.6,.2,1), width .34s cubic-bezier(.2,.6,.2,1);
  pointer-events:none;
  z-index:0;
}
/* until JS measures, keep it invisible so it can't flash at width 0 */
.docs-tab-pill:not(.ready) { opacity:0; }

.docs-tab {
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  gap:9px;
  flex:1 1 0;
  justify-content:center;
  font-family:var(--sans);
  font-size:.88rem;
  font-weight:600;
  color:var(--ink-mute);
  background:none;
  border:none;
  border-radius:var(--r-btn);
  padding:11px 14px;
  cursor:pointer;
  white-space:nowrap;
  transition:color .22s ease;
  letter-spacing:-0.005em;
}

.docs-tab:hover { color:var(--ink); }
.docs-tab.is-active { color:var(--teal); }

.docs-tab-logo {
  width:21px; height:21px;
  border-radius:var(--r-tag);
  background:var(--light-card);
  border:1px solid var(--line);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:var(--mono);
  font-size:9.5px;
  font-weight:700;
  color:var(--ink-mute);
  flex-shrink:0;
  overflow:hidden;
  transition:color .22s ease, border-color .22s ease, background .22s ease;
}
.docs-tab-logo img { width:100%; height:100%; object-fit:cover; display:block; }

/* Two chip treatments. A brand tile (HubSpot, Zoom, the Pace mark) carries its
   own coloured field, so it fills the chip edge to edge and the plate behind it
   would only show as a rim. A bare mark (Claude, OpenAI, Gemini) is transparent
   and needs the plate plus breathing room. Modifier classes rather than :has(),
   which this repo avoids relying on for layout-affecting rules. */
.docs-logo--img { background:none; border-color:var(--line); }
.docs-tab.is-active .docs-logo--img { background:none; }

.docs-logo--mark img,
.docs-logo--mark svg {
  width:62%;
  height:62%;
  object-fit:contain;
  display:block;
}
/* Brand marks keep their own colour rather than following the chip's ink/teal
   state: Claude's #D97757 and OpenAI's black, taken from the source assets. */

.docs-tab.is-active .docs-tab-logo {
  color:var(--teal);
  border-color:var(--line);
  background:var(--light-card);
}

/* panels lose their own card chrome; the wrapper provides it */
.docs-tabs .docs-tab-panel.docs-card {
  background:transparent;
  border:none;
  border-radius:0;
  margin-bottom:0;
  padding:32px;
}

.docs-tab-panel[hidden] { display:none; }

/* Keyframes, not a transition: the panel goes display:none → block, and a
   transition can't run across that. An animation can. */
@keyframes docsPanelIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}
.docs-tab-panel.is-active { animation:docsPanelIn .3s cubic-bezier(.2,.6,.2,1) both; }

/* ── TOOL / SCOPE TABLE ─────────────────────────────────────────── */
.tool-table {
  border:1px solid var(--line);
  border-radius:var(--r-card);
  overflow:hidden;
  background:var(--light-card);
}

.tool-group { border-bottom:1px solid var(--line); }
.tool-group:last-child { border-bottom:none; }

/* sentence-case group header */
.tool-group-label {
  font-family:var(--sans);
  font-size:.82rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:0;
  text-transform:none;
  padding:14px 22px 13px;
  background:var(--paper-2);
  border-bottom:1px solid var(--line);
}

.tool-row {
  display:grid;
  grid-template-columns:270px 1fr auto;
  gap:20px;
  align-items:center;
  padding:14px 22px;
  border-bottom:1px solid var(--line);
}
.tool-row:last-child { border-bottom:none; }

.tool-row-name {
  font-family:var(--mono);
  font-size:.82rem;
  color:var(--teal);
  background:none;
  border:none;
  padding:0;
  letter-spacing:0.01em;
  min-width:0;
  overflow-wrap:anywhere;
}

.tool-row-desc {
  font-size:.92rem;
  color:var(--ink-soft);
  line-height:1.55;
}

.tool-row-badge {
  font-family:var(--sans);
  font-size:.7rem;
  font-weight:700;
  color:var(--amber);
  background:var(--amber-tint);
  border:1px solid var(--amber-line);
  padding:3px 8px;
  border-radius:var(--r-tag);
  letter-spacing:0;
  text-transform:none;
  white-space:nowrap;
}

/* ── FEATURE GRID (index cards, use-case tiles) ─────────────────── */
/* One connected panel: the cards share dividers instead of each carrying its
   own border, and only the wrapper is rounded and clips.

   The dividers are real borders on the cards, not a 1px grid gap. --line is
   translucent (10% black), so a gap would composite it over the page paper and
   render a shade darker than support-page.css's `1px solid var(--line)` drawn
   over a white card. Bordering the cards puts the stroke over the same white,
   so /docs and /support match exactly. Radius is --r-panel for the same reason:
   it is what support's .card uses. */
.features-grid {
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:0;
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  overflow:hidden;
}

.feature-card {
  background:var(--light-card);
  border:none;
  border-radius:0;
  padding:32px 28px;
  position:relative;
  transition:background .2s ease;
}

.feature-card + .feature-card { border-left:1px solid var(--line); }

/* A lift or shadow would break the shared edges, so hover is a wash only,
   the light-mode counterpart of the original's shade change. */
.feature-card:hover {
  background:var(--paper);
}

.feature-icon {
  width:36px; height:36px;
  border-radius:var(--r-btn);
  background:var(--teal-tint);
  border:1px solid var(--teal-border);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:18px;
  color:var(--teal);
}

.feature-title {
  font-family:var(--sans);
  font-size:.98rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.005em;
  margin-bottom:9px;
}

.feature-desc { font-size:.92rem; color:var(--ink-soft); line-height:1.65; }

/* ── DOCS INDEX CARDS ───────────────────────────────────────────── */
a.feature-card {
  display:flex;
  flex-direction:column;
  color:inherit;
}

.doc-card-logo {
  width:44px; height:44px;
  border-radius:var(--r-card);
  background:var(--paper-2);
  border:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:18px;
  overflow:hidden;
  flex-shrink:0;
  font-family:var(--mono);
  font-size:13px;
  font-weight:700;
  color:var(--teal);
  letter-spacing:0.02em;
}
.doc-card-logo img { width:100%; height:100%; display:block; object-fit:cover; }

/* sentence-case tag, was an uppercase mono kicker */
.doc-card-meta {
  align-self:flex-start;
  font-family:var(--sans);
  font-size:.72rem;
  font-weight:600;
  color:var(--teal);
  background:var(--teal-tint);
  border:1px solid var(--teal-border);
  padding:3px 8px;
  border-radius:var(--r-tag);
  letter-spacing:0;
  text-transform:none;
  margin-bottom:14px;
}

.doc-card-title {
  font-family:var(--display);
  font-size:1.24rem;
  font-weight:700;
  color:var(--ink-warm);
  letter-spacing:-0.01em;
  line-height:1.15;
  margin-bottom:10px;
  text-wrap:balance;
}

.doc-card-desc {
  font-size:.92rem;
  color:var(--ink-soft);
  line-height:1.65;
  margin-bottom:22px;
}

.doc-card-arrow {
  margin-top:auto;
  font-size:.9rem;
  font-weight:600;
  color:var(--teal);
}

/* The arrow is a pseudo-element, not a character in the markup, so it can be
   transformed on its own. inline-block because transforms do not apply to
   inline boxes. */
.doc-card-arrow::after {
  content:"\2192";
  display:inline-block;
  margin-left:6px;
  transition:transform .22s cubic-bezier(.2,.6,.2,1);
}

a.feature-card:hover .doc-card-arrow::after { transform:translateX(4px); }

a.feature-card:hover .doc-card-arrow { color:var(--teal-hover); }

/* ── PROMPTS ────────────────────────────────────────────────────── */
.prompts-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:26px; }
.prompt-group { display:flex; flex-direction:column; gap:10px; }

/* The group label sits under the section subhead, so it stays quiet: two bold
   dark labels stacked read as competing headings. */
.prompt-group-label {
  font-family:var(--sans);
  font-size:.8rem;
  font-weight:600;
  color:var(--ink-mute);
  letter-spacing:0;
  text-transform:none;
  margin-bottom:2px;
}

/* Each prompt is something you say to an agent, so it carries a prompt mark
   rather than reading as an empty input field. */
.prompt {
  position:relative;
  font-size:.92rem;
  color:var(--ink);
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:13px 16px 13px 38px;
  line-height:1.6;
  transition:border-color .2s ease, box-shadow .2s ease;
}

.prompt::before {
  content:"\203A";
  position:absolute;
  left:16px;
  top:12px;
  font-size:1.05rem;
  font-weight:700;
  line-height:1.5;
  color:var(--teal);
}

.prompt:hover {
  border-color:var(--teal-border);
  box-shadow:0 8px 22px -18px rgba(18,18,18,0.3);
}

.use-cases-grid { margin-bottom:0; }

/* ── FIGURES ────────────────────────────────────────────────────── */
.docs-figure {
  margin:10px 0 4px;
  border:1px solid var(--line);
  border-radius:var(--r-panel);
  overflow:hidden;
  background:var(--light-card);
}

.docs-figure img { display:block; width:100%; height:auto; }
.docs-figure-standalone { margin:32px 0 0; }
/* Figures cropped tight to a dialog are taller than they are wide. Cap and
   centre them: at full container width they tower over the page, and the UI
   text they exist to show does not need the extra scale. 520px is the value
   main already settled on. */
.docs-figure-portrait {
  max-width:520px;
  margin-left:auto;
  margin-right:auto;
}

/* Screenshot sitting inside the step it illustrates. Longhand, not the margin
   shorthand: the shorthand would also zero the margin-left/right:auto that
   .docs-figure-portrait depends on to centre, silently, for any figure later
   placed in a step. Portrait figures centre within the step's indent; main
   used to pin them left, and that was deliberately reversed here. */
.docs-steps > li .docs-figure {
  margin-top:14px;
  margin-bottom:2px;
}


.docs-figure figcaption {
  font-size:.85rem;
  color:var(--ink-soft);
  padding:12px 18px;
  border-top:1px solid var(--line);
  background:var(--paper-2);
  line-height:1.55;
}
.docs-figure figcaption strong { color:var(--ink); font-weight:700; }

/* ── TILE GRID ──────────────────────────────────────────────────── */
.docs-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:20px; }

.docs-tile {
  background:var(--light-card);
  border:1px solid var(--line);
  border-radius:var(--r-card);
  padding:22px 24px;
}

.docs-tile-title {
  font-family:var(--sans);
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
  margin:0 0 7px;
  letter-spacing:-0.005em;
}

.docs-tile-body { font-size:.92rem; color:var(--ink-soft); line-height:1.6; }
.docs-tile-body ul { margin:8px 0 0; padding-left:18px; list-style:disc; }
.docs-tile-body li { margin:4px 0; padding:0; }
.docs-tile-body strong { color:var(--ink); font-weight:700; }

/* ── CALLOUT ────────────────────────────────────────────────────── */
/* Per-provider accent: each page sets --callout-*. Defaults are Pace teal. */
.docs-callout {
  display:flex;
  gap:14px;
  align-items:flex-start;
  background:var(--callout-bg, var(--teal-tint));
  border:1px solid var(--callout-border, var(--teal-border));
  border-radius:var(--r-btn);
  padding:16px 20px;
  margin:28px 0 0;
}

.docs-callout-icon {
  flex-shrink:0;
  width:20px; height:20px;
  color:var(--callout-icon, var(--teal));
  margin-top:2px;
}

.docs-callout-text { font-size:.92rem; color:var(--ink-soft); line-height:1.6; }
.docs-callout-text strong { color:var(--ink); font-weight:700; }
.docs-callout-text a {
  color:var(--callout-accent, var(--teal));
  border-bottom:1px solid var(--callout-border, var(--teal-border));
  transition:border-color .18s ease;
}
.docs-callout-text a:hover { border-bottom-color:var(--callout-accent, var(--teal)); }

/* ── FAQ ACCORDION ──────────────────────────────────────────────── */
/* Structure and timings lifted from the Trace site's .faq, recoloured for the
   light palette. A divider list rather than a stack of cards, one answer open
   at a time. */
.docs-faq { display:block; }

.docs-faq-item { border-bottom:1px solid var(--line); }
.docs-faq-item:first-child { border-top:1px solid var(--line); }

.docs-faq-q {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  margin:0;
  border:0;
  background:none;
  font-family:inherit;
  text-align:left;
  cursor:pointer;
  padding:20px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  font-size:1rem;
  font-weight:700;
  color:var(--ink);
  letter-spacing:-0.005em;
  text-wrap:balance;
  transition:color .2s ease;
}
.docs-faq-q:hover { color:var(--teal); }

/* a plus that turns into a cross, drawn from two rules so it needs no glyph */
.docs-faq-icon {
  position:relative;
  flex:none;
  width:14px;
  height:14px;
  transition:transform .35s cubic-bezier(.4,0,.2,1);
}
.docs-faq-icon::before,
.docs-faq-icon::after {
  content:"";
  position:absolute;
  inset:0;
  margin:auto;
  background:var(--ink-mute);
  transition:background .2s ease;
}
.docs-faq-icon::before { width:14px; height:1.5px; }
.docs-faq-icon::after  { width:1.5px; height:14px; }
.docs-faq-q:hover .docs-faq-icon::before,
.docs-faq-q:hover .docs-faq-icon::after { background:var(--teal); }
.docs-faq-item.is-open .docs-faq-icon { transform:rotate(135deg); }

/* Grid-row reveal: animates height with no JS measurement. The grid item is a
   padding-free clipper so the row collapses to a true 0; padding lives inside. */
.docs-faq-a {
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .35s cubic-bezier(.4,0,.2,1);
}
.docs-faq-item.is-open .docs-faq-a { grid-template-rows:1fr; }

.docs-faq-a-in { min-height:0; overflow:hidden; }
.docs-faq-a-in > p {
  margin:0;
  padding:0 0 22px;
  max-width:68ch;
  font-size:.95rem;
  color:var(--ink-soft);
  line-height:1.65;
  text-wrap:pretty;
}


/* ── RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .features-grid { grid-template-columns:repeat(2, 1fr); }
  /* two up: only the right-hand cell is divided, and row two gains a top rule */
  .feature-card + .feature-card { border-left:none; }
  .feature-card:nth-child(2n) { border-left:1px solid var(--line); }
  .feature-card:nth-child(n+3) { border-top:1px solid var(--line); }
}

@media (max-width: 900px) {

  .docs-intro { grid-template-columns:1fr; gap:36px; }
  .docs-grid { grid-template-columns:1fr; }
  /* stacked: horizontal rules only */
  .features-grid { grid-template-columns:1fr; }
  .feature-card { border-left:none; border-top:none; }
  .feature-card + .feature-card { border-top:1px solid var(--line); }
  .prompts-grid { grid-template-columns:1fr; gap:30px; }
  .docs-kv-row { grid-template-columns:110px 1fr; gap:14px; padding:12px 16px; }
  .tool-row { grid-template-columns:1fr; gap:6px; align-items:start; }
  .tool-row-badge { justify-self:start; }
  .docs-subhead-spaced { margin-top:48px; }
  .section-title { max-width:none; }
}

@media (max-width: 720px) {
  .docs-card { padding:24px 20px; }
  .docs-card-head { flex-wrap:wrap; gap:12px; }
  .docs-card-head > div:nth-child(2) { flex:1 1 auto; min-width:0; }
  .docs-card-title { font-size:1.2rem; }
  .docs-tabs .docs-tab-panel.docs-card { padding:22px 20px; }

  /* tabs scroll horizontally on narrow screens, so the pill must not stretch */
  .docs-tab { font-size:.82rem; padding:10px 12px; flex:0 0 auto; gap:8px; }
  .docs-tab-logo { width:18px; height:18px; font-size:9px; }

  .docs-steps > li { padding-left:38px; font-size:.94rem; }
  .docs-steps > li::before { width:24px; height:24px; font-size:11px; top:13px; }

  .docs-codeblock pre { font-size:.74rem; padding-right:74px; }

  .hero.docs-hero { padding:40px var(--gutter) 44px; }
  .docs-hero h1 { font-size:2.1rem; max-width:none; }
  .hero-sub { font-size:1.02rem; }
  .hero-links { gap:8px 18px; }
  .hero-links a { font-size:.86rem; }

  .docs-kv-row { grid-template-columns:1fr; gap:4px; }
  .docs-appline { flex-wrap:wrap; justify-content:center; }
  .docs-figure figcaption { font-size:.8rem; padding:10px 14px; }
}

/* ── DOCS INDEX SPACING ────────────────────────────────────────── */
/* Carried over from the deleted docs/index.css: the index is one short row of
   cards, so it closes the hero/section gap that the long guides need. */
body.docs-index .docs-hero { padding-bottom:32px; }
body.docs-index .docs-section { padding-top:32px; }

/* ── PER-GUIDE CALLOUT ACCENT ───────────────────────────────────── */
/* Folded in from the deleted docs/hubspot.css and docs/zoom.css. Both hues are
   darkened from the raw brand colour so the text passes AA on the light tint;
   the tint and left rule stay on-brand. */
body.docs-hubspot .docs-callout {
  --callout-bg: rgba(255,122,89,0.09);
  --callout-border: rgba(255,122,89,0.34);
  --callout-accent: #C4472A;
  --callout-icon: #C4472A;
}

body.docs-zoom .docs-callout {
  --callout-bg: rgba(11,92,255,0.07);
  --callout-border: rgba(11,92,255,0.28);
  --callout-accent: #0B4FD8;
  --callout-icon: #0B4FD8;
}

/* ── GUIDE LAYOUT: sticky sidebar + content column ──────────────── */
/* Only the long guides wrap their sections in .docs-layout; the index has no
   sidebar, so every rule here is scoped to that wrapper. */
.docs-layout {
  max-width:var(--max-w);
  margin:0 auto;
  padding:0 var(--gutter);
  display:grid;
  grid-template-columns:236px minmax(0, 1fr);
  gap:0 56px;
  align-items:start;
}

.docs-side {
  position:sticky;
  top:var(--nav-h);
  /* its own scroll, so a long TOC can never outgrow the viewport */
  max-height:calc(100vh - var(--nav-h));
  max-height:calc(100svh - var(--nav-h));
  overflow-y:auto;
  padding:36px 0 40px;
  scrollbar-width:thin;
}

.docs-side__group + .docs-side__group { margin-top:30px; }

.docs-side__back {
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:0 12px;
  margin-bottom:22px;
  font-size:.85rem;
  font-weight:600;
  color:var(--ink-mute);
  transition:color .18s ease;
}
.docs-side__back:hover { color:var(--ink); }
.docs-side__back-arrow {
  display:inline-block;
  transition:transform .22s cubic-bezier(.2,.6,.2,1);
}
.docs-side__back:hover .docs-side__back-arrow { transform:translateX(-3px); }

.docs-side__foot {
  margin-top:24px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.docs-side__foot a {
  display:block;
  padding:0 12px;
  font-size:.85rem;
  font-weight:600;
  color:var(--teal);
  transition:color .18s ease;
}
.docs-side__foot a:hover { color:var(--teal-hover); }

/* a quiet section label, not an uppercase kicker */
.docs-side__label {
  font-size:.78rem;
  font-weight:700;
  color:var(--ink-mute);
  margin:0 0 10px 12px;
}

.docs-side__list { display:flex; flex-direction:column; gap:1px; }

.docs-side__list a {
  display:block;
  padding:7px 12px;
  border-radius:var(--r-tag);
  font-size:.88rem;
  line-height:1.45;
  color:var(--ink-soft);
  transition:color .18s ease, background .18s ease;
}

.docs-side__list a:hover { color:var(--ink); background:rgba(18,18,18,0.045); }

.docs-side__list a.is-active {
  color:var(--teal);
  font-weight:600;
  background:var(--teal-tint);
}

/* ── CONTENT COLUMN ─────────────────────────────────────────────── */
.docs-main { min-width:0; padding-bottom:56px; }

/* the sections were full-bleed bands; inside a column they are stacked blocks
   separated by a rule, so the alt background and side padding come off */
.docs-main .docs-section {
  padding:44px 0;
  border-top:1px solid var(--line);
  scroll-margin-top:calc(var(--nav-h) + 16px);
}

.docs-main .docs-section-alt { background:none; border-bottom:none; }
/* The FAQ section drops its own top rule: the accordion's first-item border
   draws one just below the heading, and the two stacked read as a mistake. */
.docs-main .docs-section--flush { border-top:none; }
.docs-main .docs-inner { max-width:none; margin:0; }

/* hero reads as a page title here, not a centred marketing band */
.docs-main .hero.docs-hero {
  text-align:left;
  /* the section below the rule opens on 44px, so the hero has to close on
     something comparable or the divider sits flush against the hero's last
     element (the endpoint block on /docs/mcp, the app line on the others) */
  padding:36px 0 40px;
}
.docs-main .docs-hero h1 {
  font-size:clamp(2rem, 3.4vw, 2.75rem);
  margin:0 0 16px;
  max-width:24ch;
}
.docs-main .hero-sub { margin:0; max-width:64ch; }
.docs-main .docs-appline { justify-content:flex-start; margin:26px 0 0; }

.docs-main .docs-section-header { margin-bottom:32px; }
.docs-main .section-title { max-width:24ch; }

/* keep prose to a readable measure even though the column is wider */
.docs-main .section-sub,
.docs-main .docs-card-lede { max-width:68ch; }

/* ── GUIDE LAYOUT, NARROW ───────────────────────────────────────── */
@media (max-width: 1080px) {
  /* sidebar stops being sticky and sits above the content */
  .docs-layout { grid-template-columns:1fr; gap:0; }
  .docs-side {
    position:static;
    max-height:none;
    overflow:visible;
    padding:24px 0 0;
    border-bottom:1px solid var(--line);
    padding-bottom:20px;
  }
  .docs-side__group { display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; }
  .docs-side__label { margin:0; }
  .docs-side__list { flex-direction:row; flex-wrap:wrap; gap:4px; }
  .docs-side__list a { padding:5px 10px; border-radius:var(--r-tag); }
  .docs-side__back { margin-bottom:14px; }
  .docs-side__foot { margin-top:14px; padding-top:14px; }
  .docs-main .hero.docs-hero { padding-top:28px; }
}

/* ── MOTION PREFERENCE ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  .docs-faq-a, .docs-faq-icon { transition:none; }
  *, *::before, *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
  }
}