/* Boost.space docs — theme polish layered on the dashboard palette.
   Works in both dark and light mode. */

/* ---- Backgrounds: one gradient canvas, per mode ---- */
body.scalar-app.dark-mode {
  background: radial-gradient(135% 95% at 50% -25%, #16267e 0%, #050d45 38%, #01030c 100%) !important;
  background-attachment: fixed !important;
  /* Don't recolor visited links — keep one consistent link color. */
  --font-visited: #a78bfa;
}
body.scalar-app.light-mode {
  /* The dashboard "boostspace" theme only ships dark palette variables, so
     define the light palette here. */
  --scalar-background-1: #ffffff;
  --scalar-background-2: #f5f7ff;
  --scalar-background-3: #eaeeff;
  --scalar-color-1: #0b1030;
  --scalar-color-2: #454b78;
  --scalar-color-3: #7e84b6;
  --scalar-background-accent: #7839ee1f;
  --scalar-border-color: #e4e8f6;
  --scalar-sidebar-background-1: transparent;
  --scalar-sidebar-color-1: #0b1030;
  --scalar-sidebar-color-active: #7839ee;
  --scalar-sidebar-item-active-background: #7839ee14;
  --font-visited: #7839ee;
  background: radial-gradient(135% 95% at 50% -25%, #eef1ff 0%, #f6f8ff 40%, #ffffff 100%) !important;
  background-attachment: fixed !important;
}

/* Sidebar blends into the canvas instead of a flat slab. */
body.scalar-app.dark-mode aside[class*="bg-sidebar"] {
  background: transparent !important;
  border-right-color: rgba(255, 255, 255, 0.06) !important;
}
body.scalar-app.light-mode aside[class*="bg-sidebar"] {
  background: transparent !important;
  border-right-color: rgba(10, 20, 80, 0.08) !important;
}

/* ---- Content images ----
   Scalar sizes images inside a paragraph to 1em (for inline icons), which
   shrinks our screenshots to 16px. Force real content images to render as
   full-width blocks. */
.t-editor__paragraph img[data-scalar-name="scalar-image"],
.t-editor__paragraph img[data-scalar-type="image"] {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  display: block !important;
  margin: 1.25rem 0 !important;
  border-radius: 12px !important;
}
body.scalar-app.dark-mode .t-editor__paragraph img[data-scalar-name="scalar-image"] {
  border: 1px solid rgba(255, 255, 255, 0.08);
}
body.scalar-app.light-mode .t-editor__paragraph img[data-scalar-name="scalar-image"] {
  border: 1px solid rgba(10, 20, 80, 0.08);
  box-shadow: 0 1px 3px rgba(10, 20, 80, 0.06);
}

/* ---- Tables: clearer structure + legible links ----
   Links inside tables were the same violet as the surface and got lost. */
.t-editor__table a {
  font-weight: 600;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* ---- Tables: card-like, calmer grid ----
   Rounded container, tinted header, subtle row separation + hover. */
table.t-editor__table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border: 1px solid var(--scalar-border-color) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}
table.t-editor__table th {
  background: var(--scalar-background-2) !important;
  border-top: 0 !important;
}
table.t-editor__table th:first-child { border-left: 0 !important; }
table.t-editor__table th:last-child { border-right: 0 !important; }
table.t-editor__table td:first-child { border-left: 0 !important; }
table.t-editor__table td:last-child { border-right: 0 !important; }
table.t-editor__table tr:last-child td { border-bottom: 0 !important; }
body.scalar-app.dark-mode table.t-editor__table tbody tr:hover td { background: rgba(120, 57, 238, 0.06); }
body.scalar-app.light-mode table.t-editor__table tbody tr:hover td { background: rgba(120, 57, 238, 0.04); }

/* ---- Header logo ----
   The logo is the full white wordmark (reads on the dark theme); darken it for
   the light theme. It's wide (630x90), so size by height and keep the ratio. */
img.logo { width: auto !important; height: 22px !important; }
body.scalar-app.light-mode img.logo { filter: brightness(0) saturate(100%); }

/* ---- Ask AI: make it THE call to action ----
   Everyone should reach for Ask AI first — brand it and let it glow. */
button.ask-ai-button,
button.agent-chat-title,
button.ask-ai-sidebar-button {
  background: linear-gradient(135deg, #7839ee 0%, #9a5cff 100%) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  box-shadow: 0 0 14px rgba(120, 57, 238, 0.5) !important;
  transition: box-shadow 0.15s ease, transform 0.15s ease !important;
}
button.ask-ai-button:hover,
button.agent-chat-title:hover,
button.ask-ai-sidebar-button:hover {
  box-shadow: 0 0 22px rgba(120, 57, 238, 0.8) !important;
  transform: translateY(-1px);
}
button.ask-ai-button svg,
button.agent-chat-title svg { color: #fff !important; }

/* Header CTAs share one radius (Open app shipped with 3px vs Ask AI 8px). */
a.link__button { border-radius: 8px !important; }

/* ---- Ask AI: the floating composer ----
   Scalar ships it in the same navy as the page and our table cards, so it
   dissolved into whatever it was hovering over. Purple would fight the header
   CTA, so it becomes near-black glass instead: an overlay surface, not
   content. Blur + a real elevation shadow sell "floating above the page";
   the violet ring is kept for focus only. */
form.agent-floating-form {
  border-radius: 16px !important;
  transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}
body.scalar-app.dark-mode form.agent-floating-form {
  background: rgba(4, 7, 22, 0.82) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4) !important;
}
body.scalar-app.dark-mode form.agent-floating-form:focus-within {
  border-color: rgba(154, 92, 255, 0.55) !important;
  box-shadow: 0 10px 34px rgba(0, 0, 0, 0.6), 0 0 0 3px rgba(120, 57, 238, 0.22) !important;
}
body.scalar-app.light-mode form.agent-floating-form {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(18px) saturate(150%) !important;
  -webkit-backdrop-filter: blur(18px) saturate(150%) !important;
  border: 1px solid rgba(10, 20, 80, 0.16) !important;
  box-shadow: 0 12px 32px rgba(10, 20, 80, 0.22), 0 3px 10px rgba(10, 20, 80, 0.12) !important;
}
body.scalar-app.light-mode form.agent-floating-form:focus-within {
  border-color: rgba(120, 57, 238, 0.5) !important;
  box-shadow: 0 12px 32px rgba(10, 20, 80, 0.22), 0 0 0 3px rgba(120, 57, 238, 0.18) !important;
}

/* Code must render the characters that were typed.
   The code font ligates `->` into a single arrow glyph, which is harmless in
   prose but wrong in a syntax reference: the automation variables page documents
   `{$entity->name}`, and a reader who copies what they SEE types `→` and gets
   nothing. Copy/paste was always correct — only the rendering lied. Turn the
   contextual alternates off wherever code is shown. */
code,
pre,
pre code,
kbd,
samp,
.scalar-code-block,
.scalar-code-block * {
  font-variant-ligatures: none !important;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0 !important;
}

/* ---- Roadmap (/changelog/roadmap) ----
   The roadmap is the one page whose layout is its argument: three status lanes
   of cards, so a reader sees momentum instead of a backlog. It is .mdx and
   carries its own classes.

   Colours come from Scalar's own theme variables, so light and dark need no
   separate rules; the status accent is passed down as --bs-rm-accent.

   The tags, titles and legend pills are DIVs, not spans, and the status dot is
   a span rather than an `<i>`. That is about the markdown twin Scalar publishes
   at <route>/index.md — the surface agents actually read. Inline elements are
   concatenated there ("Ecosystemn8n and Zapier apps") and an `<i>` becomes
   emphasis with escaped entities, which turned the legend into line noise. */
.bs-rm-grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 270px), 1fr));
  margin: 16px 0 34px;
}
.bs-rm-card {
  border: 1px solid var(--scalar-border-color);
  border-left: 3px solid var(--bs-rm-accent, var(--scalar-color-3));
  border-radius: 10px;
  background: var(--scalar-background-2);
  padding: 14px 16px;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.bs-rm-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.bs-rm-tag {
  margin-bottom: 7px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--bs-rm-accent, var(--scalar-color-3));
}
.bs-rm-title {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--scalar-color-1);
}
.bs-rm-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--scalar-color-2);
}

/* Status accents, shared by the legend pills and the cards. */
.bs-rm-now { --bs-rm-accent: var(--scalar-color-green); }
.bs-rm-next { --bs-rm-accent: var(--scalar-color-purple); }
.bs-rm-explore { --bs-rm-accent: var(--scalar-color-3); }

.bs-rm-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 16px;
}
.bs-rm-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 4px 11px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 999px;
  background: var(--scalar-background-2);
  font-size: 12px;
  color: var(--scalar-color-2);
}
.bs-rm-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bs-rm-accent, var(--scalar-color-3));
}