/* The docs chrome: one sidebar and one column of prose, shared by every page
   under /docs.

   It styles nothing outside .docs-shell. That is the whole point of the file.
   Until v1.8.69 each docs page carried this block inline AND redefined `nav`
   as a flat blue bar 56px tall, which overrode the site's own sticky white
   nav from style.css - so the documentation looked like a different product
   from the site that links to it, and none of those pages loaded nav.js, so
   the links in that bar were a hand-written subset that drifted from the real
   navigation. The nav rules are gone; the docs now wear the site's header. */

.docs-shell {
  display: flex;
  align-items: flex-start;
}

/* Sticky under the site's nav rather than the top of the viewport, so a long
   page scrolls its prose past a sidebar that stays put. */
.docs-sidebar {
  width: 240px;
  flex-shrink: 0;
  background: #f8f9fc;
  border-right: 1px solid var(--border, #e2e8f0);
  padding: 1.5rem 1rem;
  position: sticky;
  top: 4rem;
  max-height: calc(100vh - 4rem);
  overflow-y: auto;
}
.docs-sidebar h3 {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #94a3b8;
  margin: 1rem 0 .5rem;
}
.docs-sidebar h3:first-child { margin-top: 0; }
.docs-sidebar a {
  display: block;
  padding: .35rem .75rem;
  border-radius: 6px;
  color: #334155;
  font-size: .875rem;
  text-decoration: none;
}
.docs-sidebar a:hover,
.docs-sidebar a.active { background: #e0f2fe; color: var(--blue, #052e5f); }
.docs-sidebar a.active { font-weight: 600; }

.docs-main {
  flex: 1;
  min-width: 0;
  padding: 2rem 3rem;
  max-width: 820px;
}
/* /docs renders Swagger UI beside the sidebar, and an operation that expands
   into a request body does not fit a prose column. */
.docs-main--wide { max-width: none; padding: 0; }

.docs-main h1 { font-size: 1.75rem; color: var(--blue, #052e5f); margin-bottom: .5rem; }
.docs-main h2 {
  font-size: 1.2rem;
  color: #1e293b;
  margin: 2rem 0 .75rem;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: .5rem;
}
.docs-main h3 { font-size: 1rem; color: #1e293b; margin: 1.5rem 0 .5rem; }
.docs-main p { line-height: 1.7; color: #334155; margin-bottom: 1rem; }
.docs-main ul,
.docs-main ol { line-height: 1.7; color: #334155; margin: 0 0 1rem 1.25rem; }
.docs-main li { margin-bottom: .35rem; }
.docs-main pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1.25rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: .85rem;
  line-height: 1.6;
  margin-bottom: 1rem;
}
.docs-main code {
  background: #f1f5f9;
  padding: .15em .4em;
  border-radius: 4px;
  font-size: .875em;
  color: #0369a1;
}
.docs-main pre code { background: none; color: inherit; padding: 0; }
.docs-main table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.docs-main th {
  background: #f8f9fc;
  text-align: left;
  padding: .6rem .75rem;
  font-size: .8rem;
  text-transform: uppercase;
  color: #64748b;
  border-bottom: 2px solid #e2e8f0;
}
.docs-main td {
  padding: .6rem .75rem;
  border-bottom: 1px solid #f1f5f9;
  font-size: .9rem;
  vertical-align: top;
}
.docs-main .callout {
  padding: 1rem 1.25rem;
  border-radius: 8px;
  border-left: 4px solid var(--blue, #052e5f);
  background: #f0f9ff;
  margin-bottom: 1rem;
}
.docs-main .callout-warn { border-left-color: #d97706; background: #fffbeb; }

/* The sidebar is 240px of a phone's 390, so below the breakpoint it stops
   being a column and becomes a scrollable strip above the prose. */
@media (max-width: 860px) {
  .docs-shell { flex-direction: column; }
  .docs-sidebar {
    width: auto;
    position: static;
    max-height: none;
    border-right: 0;
    border-bottom: 1px solid var(--border, #e2e8f0);
    padding: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .25rem;
    align-items: center;
  }
  .docs-sidebar h3 { width: 100%; margin: .5rem 0 .25rem; }
  .docs-sidebar a { padding: .3rem .6rem; }
  .docs-main { padding: 1.5rem 1rem; max-width: none; }
}

/* ── Components the merged pages brought with them ────────────────────────
   The worker reference, the FEEL reference and the troubleshooting guide
   were separate pages with their own inline copies of these. They are one
   page each now, so the widgets live here once, scoped to .docs-main. */

/* An endpoint card: method, path, and a body of parameters and examples. */
.docs-main .endpoint {
  border: 1px solid var(--border, #dde2ec);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.75rem;
}
.docs-main .ep-header {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 1rem 1.25rem;
  background: var(--bg2, #f5f7fa);
  border-bottom: 1px solid var(--border, #dde2ec);
  flex-wrap: wrap;
}
.docs-main .method {
  display: inline-block;
  border-radius: 6px;
  padding: .2rem .65rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .4px;
  font-family: monospace;
}
.docs-main .method.get { background: #d1fae5; color: #065f46; }
.docs-main .method.post { background: #dbeafe; color: #1e40af; }
.docs-main .method.del { background: #fee2e2; color: #7f1d1d; }
.docs-main .method.put { background: #fef3c7; color: #92400e; }
.docs-main .ep-path {
  font-family: monospace;
  font-size: .92rem;
  font-weight: 700;
  color: var(--brand, #052e5f);
}
.docs-main .ep-title { color: var(--muted, #5a6a82); font-size: .85rem; margin-left: auto; }
.docs-main .ep-body { padding: 1.25rem; }
.docs-main .ep-body p { font-size: .88rem; color: var(--muted, #5a6a82); line-height: 1.7; margin-bottom: .75rem; }
.docs-main .ep-body h4 {
  font-size: .8rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted, #5a6a82);
  font-weight: 700;
  margin: 1.25rem 0 .5rem;
}
.docs-main .ep-body h4:first-child { margin-top: 0; }
.docs-main .param-table { width: 100%; border-collapse: collapse; font-size: .85rem; margin-bottom: .5rem; }
.docs-main .param-table th {
  text-align: left;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted, #5a6a82);
  background: none;
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--border, #dde2ec);
}
.docs-main .param-table td { padding: .5rem; border-bottom: 1px solid var(--border, #dde2ec); vertical-align: top; }
.docs-main .param-table tr:last-child td { border-bottom: none; }
.docs-main .req-badge, .docs-main .opt-badge {
  font-size: .68rem;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-radius: 4px;
  padding: .1rem .4rem;
  font-weight: 700;
}
.docs-main .req-badge { background: #fee2e2; color: #991b1b; }
.docs-main .opt-badge { background: var(--bg3, #eef1f6); color: var(--muted, #5a6a82); }

/* A symptom in the troubleshooting page: what you saw, then what fixes it. */
.docs-main .err-block {
  background: var(--bg2, #f5f7fa);
  border: 1px solid var(--border, #dde2ec);
  border-radius: 10px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
}
.docs-main .err-block h3 { margin-top: 0; }
.docs-main .err-code {
  font-family: monospace;
  background: #fee2e2;
  color: #991b1b;
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .88rem;
  margin: .5rem 0;
  overflow-x: auto;
}
.docs-main .err-fix {
  background: #dcfce7;
  color: #166534;
  border-radius: 6px;
  padding: .5rem .75rem;
  font-size: .88rem;
  margin: .5rem 0;
  overflow-x: auto;
  font-family: monospace;
}
.docs-main .err-label {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--muted, #5a6a82);
  margin-bottom: .25rem;
}
.docs-main .doc-callout {
  background: #dbeafe;
  border-left: 3px solid #3b82f6;
  border-radius: 0 8px 8px 0;
  padding: .75rem 1rem;
  font-size: .9rem;
  margin: 1rem 0;
}