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

/* ---- Backgrounds: one gradient canvas, per mode ----
   The base COLOUR in each shorthand is load-bearing, not decoration. Scalar sets no
   background on <html>, so the browser propagates body's background to the canvas — but a
   `fixed` background *image* only paints over the propagating element's box, and body's box
   is one viewport tall on a page that scrolls for thousands of pixels. With a transparent
   base colour, anything the image does not cover falls through to the browser's default
   canvas: a flash of WHITE when you rubber-band past the end of a long page (very visible
   in dark mode). An opaque base colour propagates to the whole canvas and closes that gap.
   Keep each base equal to the gradient's final stop so the two never disagree. */
body.scalar-app.dark-mode {
  background: #01030c 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: #ffffff 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;
}
/* ACT screenshots are 2x captures of a 760px window; at full column width
   they read soft, so keep them closer to their natural size. */
img[data-scalar-name="scalar-image"][src*="/img/act/"] {
  max-width: min(100%, 560px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
/* Scalar now renders a markdown image inside figure.t-editor__image (corners
   --scalar-radius-md, no border), which the paragraph selectors above no longer reach — on
   6 October 2026 every screenshot had 3px corners and no edge, and white screenshots melted into
   the light page. The frame is matched in both places. */
.t-editor__image img[data-scalar-name="scalar-image"] {
  border-radius: 12px !important;
}
body.scalar-app.dark-mode .t-editor__paragraph img[data-scalar-name="scalar-image"],
body.scalar-app.dark-mode .t-editor__image 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"],
body.scalar-app.light-mode .t-editor__image 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);
}
/* The section illustrations (assets/illustrations/build-illustrations.mjs) carry their own navy
   panel, border and 24px corners, like the roadmap banner, so nothing may frame them and the
   clip must follow their corners. Scalar now renders a markdown image inside
   figure.t-editor__image (with --scalar-radius-md corners), not inside a paragraph. */
body.scalar-app .t-editor__image img[src*="/img/illustrations/"],
body.scalar-app .t-editor__paragraph img[src*="/img/illustrations/"] {
  width: 100% !important;
  border: 0 !important;
  border-radius: 24px !important;
  box-shadow: none !important;
}

/* ---- 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: 16px !important;
  overflow: hidden !important;
}
/* Scalar wraps a table in figure.t-editor__table-wrapper (overflow: auto) and rings that
   wrapper with its own 0.5px box-shadow at 3px corners — a second, squarer frame round the
   rounded table. The wrapper takes the table's corners and drops the ring. */
figure.t-editor__table-wrapper {
  border-radius: 16px !important;
  box-shadow: none !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%); }

/* ---- Header tabs: whole labels on a phone ----
   On a phone Scalar shrinks every tab to fit the screen and ellipsises the
   labels ("D…", "A…", "M…"). Keep labels whole; on the narrowest screens drop
   the icons so all tabs fit, and let the row scroll as a fallback. */
@media (max-width: 767px) {
  nav.t-header__tabs--below-header {
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  nav.t-header__tabs--below-header::-webkit-scrollbar { display: none; }
  nav.t-header__tabs--below-header .t-header__item,
  nav.t-header__tabs--below-header .t-header__item-label,
  nav.t-header__tabs--below-header .t-header__item-label > span {
    flex-shrink: 0 !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}
@media (max-width: 480px) {
  nav.t-header__tabs--below-header {
    justify-content: space-between !important;
    gap: 8px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  nav.t-header__tabs--below-header .t-header__item-icon { display: none !important; }
}

/* ---- 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;
  /* Two columns at most, one when the content column (not the window) is narrower than
     two 250px cards: the column min is half the width, or 250px if that is more. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(250px, calc((100% - 10px) / 2))), 1fr));
  margin: 16px 0 34px;
}
/* Never more than two columns, so a lane with an odd number of cards ends on one
   full-width card instead of a hole. */
.bs-rm-grid > .bs-rm-card:last-child:nth-child(odd) { grid-column: 1 / -1; }
.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));
}

/* Hero: the one dark section of the page, in both themes. The brand rule is that a
   section is wholly dark or wholly light, and gradients live only in the orb — so the
   panel is flat navy, the brandbook's dark stage, and its only light is the orb's own
   glow. A purple-magenta wash once sat behind it as well (from when the orb was a PNG);
   over the live orb it read as a dark halo, and the owner asked for it to go (6 October
   2026). The orb is the official Agent Orb (Bob palette), drawn by content/orb.js. Its
   still is a CSS background, not an <img>, so the markdown twin agents read carries text
   only. */
.bs-rm-hero {
  position: relative;
  container-type: inline-size;
  margin: 10px 0 34px;
  padding: 38px 30px 38px 38px;
  border: 1px solid rgba(203, 179, 255, 0.16);
  border-radius: 26px;
  background: #04093a;
  overflow: hidden;
  isolation: isolate;
}
/* The orb is the Agent Orb of Brandbook 2027 v11: content/orb.js draws its live specimen on
   a canvas inside any [data-orb] host (Thinking here, Idle on the My Agents card), at up to
   30 fps, paused off screen, and as one still frame under prefers-reduced-motion. Canvas and
   still are 140 % of the host — the brandbook's own margin — because the glow reaches 0.6 of
   the orb's width from its centre: in a box the orb's size it ends in a square edge. The still
   (::before) is that renderer's first frame (scripts/render-orb-stills.mjs), shown until the
   canvas takes over and without script, so the hand-over does not show.
   Side by side, the orb is out of the flow and larger than its column: it sits behind the
   right half of the text, its glow under the words and its rim reaching the ends of the
   lines, while the grid's empty second column keeps the text as wide as it was. */
.bs-rm-hero-orb {
  position: absolute;
  top: 50%;
  right: 14px;
  z-index: -1;
  width: 360px;
  height: 360px;
  transform: translateY(-50%);
}
.bs-rm-hero-orb::before,
.bs-rm-pillar-orb::before { content: ""; }
.bs-rm-hero-orb::before,
.bs-rm-pillar-orb::before,
.bs-orb-canvas {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  height: 140%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.bs-rm-hero-orb::before { background: url(/img/roadmap/agent-os-orb.webp) center / 100% 100% no-repeat; }
.bs-orb-live::before { content: none; }
/* The banner's one action, where it appears outside the roadmap (the docs home). */
a.bs-rm-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 22px;
  padding: 10px 18px;
  border-radius: 999px;
  background: #7839ee;
  color: #ffffff !important;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none !important;
  transition: background 0.15s ease, transform 0.15s ease;
}
a.bs-rm-cta:hover {
  background: #6927da;
  transform: translateY(-1px);
}
.bs-rm-eyebrow {
  margin-bottom: 16px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.19em;
  text-transform: uppercase;
  color: #cbb3ff;
}
.bs-rm-hero-inner {
  grid-template-columns: minmax(0, 1fr) 248px;
  align-items: center;
  gap: 12px;
}
.bs-rm-hero-title {
  max-width: 13ch;
  margin-bottom: 16px;
  font-size: clamp(30px, 7.9cqi, 48px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.05em;
  color: #ffffff;
}
.bs-rm-hero-sub {
  max-width: 44ch;
  font-size: 15.5px;
  line-height: 1.65;
  color: #c9d4f0;
}
/* The orb's light runs behind the words; a navy halo keeps every letter off the particles. */
.bs-rm-hero-title,
.bs-rm-hero-sub {
  text-shadow: 0 0 2px rgba(4, 9, 58, 0.9), 0 0 12px rgba(4, 9, 58, 0.85);
}
/* The banner sits in content columns of very different widths (the roadmap's beside the
   sidebar and the table of contents, the home page's wider one), so it answers to its own
   width, not the window's: once its content box is under 560px the orb moves above the
   text, back in the flow, with the eyebrow on its glow (side by side, the headline column
   keeps at least ~300px). */
@container (max-width: 559px) {
  .bs-rm-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .bs-rm-hero-orb {
    position: relative;
    top: auto;
    right: auto;
    order: -1;
    width: 220px;
    height: 220px;
    margin: -24px auto -34px;
    transform: none;
  }
}
@media (max-width: 640px) {
  .bs-rm-hero { padding: 26px 22px 30px; }
}

/* AgentOS pillars: seven parts of one story, so they share one quiet card and the
   colour stays in the number line — no rainbow of tinted cards. */
.bs-rm-pillars {
  container-type: inline-size;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, max(250px, calc((100% - 12px) / 2))), 1fr));
  margin: 18px 0 34px;
}
.bs-rm-pillar {
  border: 1px solid var(--scalar-border-color);
  border-radius: 18px;
  background: var(--scalar-background-2);
  padding: 18px 20px 18px;
  transition: transform 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.bs-rm-pillar:hover {
  transform: translateY(-2px);
  border-color: rgba(120, 57, 238, 0.45);
  box-shadow: 0 12px 30px rgba(120, 57, 238, 0.12);
}
.bs-rm-pillar-name {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
body.scalar-app.dark-mode .bs-rm-pillar-name { color: #b69cff; }
body.scalar-app.light-mode .bs-rm-pillar-name { color: #7839ee; }
.bs-rm-pillar-claim {
  margin: 10px 0 7px;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--scalar-color-1);
}
.bs-rm-pillar p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.58;
  color: var(--scalar-color-2);
}
/* My Agents leads the seven: full width, with the Custom Agent orb — the identity the
   handoff gives a company's own agents. The remaining six then pair up evenly. */
.bs-rm-pillar-lead {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px;
  align-items: center;
  gap: 18px;
  padding: 22px 22px 22px 24px;
}
.bs-rm-pillar-orb {
  position: relative;
  width: 112px;
  height: 112px;
  margin: -12px -6px -12px 0;
}
.bs-rm-pillar-orb::before { background: url(/img/roadmap/my-agents-orb.webp) center / 100% 100% no-repeat; }
.bs-rm-pillar-lead .bs-rm-pillar-claim { font-size: 20px; letter-spacing: -0.015em; }
/* On a light card the orb is the same transparent art in the product's light appearance
   (data-orb-surface="page"): a translucent depth inside the silhouette, no dark disc under it. */
body.scalar-app.light-mode .bs-rm-pillar-orb::before { background-image: url(/img/roadmap/my-agents-orb-light.webp); }
@container (max-width: 511px) {
  .bs-rm-pillar-lead { grid-template-columns: minmax(0, 1fr); padding: 18px 20px; }
  .bs-rm-pillar-orb { display: none; }
}
.bs-rm-nowrap { white-space: nowrap; }

/* Collapsible detail inside a page (used for release-note screenshots). Scalar renders
   <details>/<summary> but styles neither, so without this the marker sits flush against
   the text and the block has no edge. */
.t-doc details {
  margin: 0.75rem 0;
  border: 1px solid var(--scalar-border-color);
  border-radius: 8px;
  background: var(--scalar-background-2);
  padding: 0.35rem 0.85rem;
}
.t-doc details > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--scalar-color-2);
  padding: 0.35rem 0;
}
.t-doc details[open] > summary {
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--scalar-border-color);
}

/* The sidebar's Support link opens the chat on the page (content/support-chat.js). Its URL is
   absolute only so that Scalar renders a link rather than a router button, so it does not get
   the external-link arrow the other sidebar links carry. */
a[href="https://docs.boost.space/?support"] > svg:last-child { display: none; }

/* The support chat's fallback note (content/support-chat.js): shown only when Gist cannot load,
   e.g. behind an ad blocker. Above the Ask AI bar, in the theme's own surface and type. */
.bs-support-notice {
  position: fixed;
  right: 16px;
  bottom: 88px;
  z-index: 2147483000;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 14px;
  border: 1px solid var(--scalar-border-color);
  border-radius: 12px;
  background: var(--scalar-background-2);
  color: var(--scalar-color-1);
  font-size: 14px;
  line-height: 1.5;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.bs-support-notice p { margin: 0; }
.bs-support-notice a { color: var(--scalar-color-accent); text-decoration: underline; }
.bs-support-notice button {
  flex: none;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--scalar-color-3);
  font: inherit;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}