/* Gtm docs theme. Matches gtm-work.com and the app: Open Runde, ink on a
   white canvas, surfaces told apart by soft fills (never rings or borders),
   and the neon crew colors only as highlights with one meaning each. Values
   come from packages/design-tokens (neon.css, theme.css). */

@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url("/fonts/open-runde-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url("/fonts/open-runde-latin-500-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Open Runde";
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url("/fonts/open-runde-latin-600-normal.woff2") format("woff2");
}

:root {
  --scalar-font:
    "Open Runde", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
    sans-serif;
  /* Neon pigments, as in neon.css. Green is the brand's action color. */
  --gtm-green: oklch(0.791 0.209 151.675);
  --gtm-cyan: oklch(0.803 0.144 218.075);
  --gtm-violet: oklch(0.563 0.292 303.623);
  --gtm-orange: oklch(0.654 0.228 34.814);
  --gtm-yellow: oklch(0.878 0.18 95.056);
  --gtm-blue: oklch(0.661 0.183 254.887);
  --gtm-magenta: oklch(0.665 0.283 342.957);
  --gtm-teal: oklch(0.83 0.145 185);
  --gtm-periwinkle: oklch(0.6 0.218 282);
  --gtm-apricot: oklch(0.76 0.17 65);
  --gtm-mint: oklch(0.8 0.168 165);
  --gtm-orchid: oklch(0.65 0.292 322);
  --gtm-lime: oklch(0.86 0.218 127);
  --gtm-rose: oklch(0.679 0.213 13.657);
  --gtm-ink: oklch(0.145 0 0);
  /* The app's radii: 8px controls, 12px cards. */
  --gtm-radius-control: 8px;
  --gtm-radius: 12px;
}

.light-mode {
  /* The app's text tokens: foreground, text-secondary, text-muted. Solid,
     so muted text still passes contrast on every surface. */
  --scalar-color-1: var(--gtm-ink);
  --scalar-color-2: oklch(0.439 0 0);
  --scalar-color-3: oklch(0.531 0 0);
  --scalar-color-accent: var(--gtm-ink);
  --scalar-background-1: oklch(1 0 0);
  --scalar-background-2: oklch(0.976 0 0);
  --scalar-background-3: oklch(0.95 0 0);
  --scalar-background-accent: oklch(0.976 0 0);
  --scalar-border-color: oklch(0 0 0 / 0.07);
  --gtm-fill: oklch(0.95 0 0 / 0.6);
  --gtm-shell: oklch(0.976 0 0);
  --gtm-pane: oklch(0.991 0 0);
  --gtm-selected: oklch(0 0 0 / 0.045);
  --gtm-tile-base: var(--gtm-pane);
  /* The app's buttons: ink primary, soft-fill secondary. */
  --gtm-primary: var(--gtm-ink);
  --gtm-primary-text: oklch(0.991 0 0);
  --gtm-secondary: oklch(0 0 0 / 0.055);
}

.dark-mode {
  --scalar-color-1: oklch(0.967 0.003 264.5);
  --scalar-color-2: oklch(0.811 0.003 286.2);
  --scalar-color-3: oklch(0.68 0 0);
  --scalar-color-accent: var(--gtm-green);
  --scalar-background-1: oklch(0.14 0.002 286.1);
  --scalar-background-2: oklch(0.19 0.002 286.2);
  --scalar-background-3: oklch(0.227 0.002 286.2);
  --scalar-background-accent: oklch(0.19 0.002 286.2);
  --scalar-border-color: oklch(1 0 0 / 0.06);
  --gtm-fill: oklch(0.227 0.002 286.2);
  --gtm-shell: oklch(0.14 0.002 286.1);
  --gtm-pane: oklch(0.168 0 0);
  --gtm-selected: oklch(1 0 0 / 0.06);
  --gtm-tile-base: var(--gtm-pane);
  --gtm-primary: oklch(0.991 0 0);
  --gtm-primary-text: oklch(0.14 0.002 286.1);
  --gtm-secondary: oklch(1 0 0 / 0.08);
}

/* ---------- Frame: the dashboard's grey shell around a white pane ---------- */

header.t-header.header {
  border-bottom: 0;
  background: var(--gtm-shell);
  --scalar-header-background-1: var(--gtm-shell);
}
aside.sidebar {
  border-right: 0;
  background: var(--gtm-shell);
  --scalar-sidebar-background-1: var(--gtm-shell);
  --scalar-sidebar-border-color: transparent;
  --scalar-sidebar-item-active-background: var(--gtm-selected);
  --scalar-sidebar-item-hover-background: var(--gtm-selected);
}
/* Search sits as a white field on the grey shell, no outline. */
aside.sidebar [class~="h-8"][class~="border"] {
  border-color: transparent;
  background: var(--gtm-pane);
}
.page-content {
  background: var(--gtm-pane);
}
/* The pane's rounded top-left corner, held in place while the page
   scrolls beneath it. */
@media (min-width: 1000px) {
  main.content-sidebar.content-header::before {
    position: fixed;
    z-index: 10;
    top: var(--gtm-header-height, 50px);
    left: var(--gtm-sidebar-width, 280px);
    width: 16px;
    height: 16px;
    background: radial-gradient(
      circle at 100% 100%,
      transparent 15.5px,
      var(--gtm-shell) 16px
    );
    content: "";
    pointer-events: none;
  }
}

/* No vertical rules: the contents list reads by spacing. */
.t-doc__toc ul {
  border-left: 0;
}
.t-doc__toc .outline-marker {
  display: none;
}
.t-doc__toc li.active > a {
  font-weight: 500;
}
/* Every heading shows in full: long ones wrap, never trail off. */
.t-doc__toc li > a.anchor {
  padding: 2px 0;
  overflow: visible;
  line-height: 20px;
  text-overflow: clip;
  white-space: normal;
}
/* A step's number is muted, and a wrapped title lines up after it. */
.t-doc__toc li.level-3 > a {
  padding-left: 12px;
  font-variant-numeric: tabular-nums;
  text-indent: -12px;
}
.t-doc__toc li.level-3 > a::first-letter {
  color: var(--scalar-color-3);
}
/* Nested sidebar items (integrations, AI tools) are indented, with no guide line. */
aside.sidebar {
  --scalar-sidebar-indent-border: transparent;
  --scalar-sidebar-indent-border-hover: transparent;
  --scalar-sidebar-indent-border-active: transparent;
}

/* Quiet buttons are a soft fill, never an outline. */
.page-copy,
.page-copy * {
  box-shadow: none;
  border-color: transparent;
}
.page-copy {
  border-radius: var(--gtm-radius-control);
  background: var(--gtm-selected);
}
.page-actions .page-copy button.scalar-button,
.page-actions .page-copy button.scalar-icon-button {
  background: transparent;
}

::selection {
  background: color-mix(in oklab, var(--gtm-green) 32%, transparent);
}

/* ---------- Type: 28 title, 18 sections, 15 reading, 13 labels ---------- */

h1.t-editor__heading {
  font-size: 28px;
  line-height: 34px;
  letter-spacing: -0.02em;
}
h2.t-editor__heading {
  font-size: 18px;
  line-height: 26px;
  letter-spacing: -0.01em;
}
.t-editor__paragraph,
.t-prose li {
  font-size: 15px;
  line-height: 24px;
}
.page-breadcrumb {
  font-size: 13px;
}

/* The header reads like gtm-work.com's: the semibold wordmark, 14px
   medium links, then Book a demo (soft fill) and Sign up (ink), both 32px
   tall with 8px corners. */
header.t-header .t-header__start > a {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin-right: 16px;
}
header.t-header a.t-header__item {
  color: var(--scalar-color-2);
  font-size: 14px;
  font-weight: 500;
}
header.t-header a.t-header__item:hover {
  color: var(--scalar-color-1);
}
header.t-header a.t-header__item[href*="cal.com"],
header.t-header a.t-header__item.t-header__item--button {
  height: 32px;
  border-radius: var(--gtm-radius-control);
  padding: 0 12px;
  background: var(--gtm-secondary);
  color: var(--scalar-color-1);
}
header.t-header a.t-header__item.t-header__item--button {
  background: var(--gtm-primary);
  color: var(--gtm-primary-text);
  font-weight: 600;
}

/* ---------- Steps: numbered headings, the number in the margin ---------- */

/* A step is an h3 that starts with its number
   (`### <span class="gtm-step">1</span> Title`), so the contents list shows
   every step under its section. The number hangs in the margin, so step
   titles, text and screenshots all share the page's one left edge. */
h3.t-editor__heading {
  position: relative;
  margin-top: 32px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  letter-spacing: -0.005em;
}
h2.t-editor__heading + h3.t-editor__heading {
  margin-top: 16px;
}
.gtm-step {
  position: absolute;
  right: calc(100% + 14px);
  color: var(--scalar-color-3);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
/* Phones have no margin to hang it in. */
@media (max-width: 640px) {
  .gtm-step {
    position: static;
    margin-right: 8px;
  }
}

/* ---------- Surfaces: soft fills, no rings ---------- */

.t-editor__table-wrapper {
  box-shadow: none;
  border-radius: 0;
}
.t-editor__table {
  width: 100%;
  background: transparent;
}
/* Rows are told apart by one hairline, not stripes or column rules. */
.t-editor__table tr {
  /* biome-ignore lint/complexity/noImportantStyles: Scalar stripes rows with a more specific rule. */
  background: transparent !important;
}
.t-editor__table th,
.t-editor__table td {
  /* biome-ignore lint/complexity/noImportantStyles: Scalar draws column rules with a more specific rule. */
  border-left: 0 !important;
  border-right: 0;
  padding: 10px 16px 10px 0;
  font-size: 14px;
  line-height: 22px;
}
.t-editor__table th {
  background: transparent;
  color: var(--scalar-color-2);
  font-size: 13px;
  font-weight: 500;
  border-bottom: 1px solid var(--scalar-border-color);
}
.t-editor__table td {
  border-bottom: 1px solid var(--scalar-border-color);
}
.t-editor__table tr:last-child td {
  border-bottom: 0;
}

.t-editor__code {
  border-radius: var(--gtm-radius);
  background: var(--gtm-fill);
  /* Commands wrap instead of running under the copy button. */
  padding-right: 44px;
}
.t-editor__code code,
.t-editor__code .t-code__line {
  min-width: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

/* Buttons are the app's: 32px tall, 8px corners, ink. */
.t-editor__button {
  display: inline-flex;
  align-items: center;
  height: 32px;
  border-radius: var(--gtm-radius-control);
  padding: 0 12px;
  background: var(--gtm-primary);
  color: var(--gtm-primary-text);
  font-size: 14px;
  font-weight: 600;
}

.t-editor__callout {
  border: 0;
  border-radius: var(--gtm-radius);
  background: var(--gtm-fill);
  padding: 14px 16px;
}
.t-editor__callout .callout-content__icon {
  color: var(--scalar-color-2);
}

/* Screenshots read by their own fill, like cards in the app. */
.t-editor__image img {
  border-radius: var(--gtm-radius);
}
.t-editor__image.custom-image-size-custom {
  margin-left: 0;
  margin-right: auto;
}

/* ---------- Overview tiles: one crew color each ---------- */

.t-editor__card {
  position: relative;
  min-height: 128px;
  border: 0;
  border-radius: 20px;
  padding: 24px 92px 24px 24px;
  background: color-mix(
    in oklab,
    var(--tint, var(--gtm-fill)) 12%,
    var(--gtm-tile-base)
  );
  transition: background-color 160ms ease-out;
}
.t-editor__card:hover {
  background: color-mix(
    in oklab,
    var(--tint, var(--gtm-fill)) 18%,
    var(--gtm-tile-base)
  );
}
.t-editor__card .card-content__title {
  font-size: 15px;
  font-weight: 600;
}
.t-editor__card .card-content__text .t-editor__paragraph {
  color: var(--scalar-color-2);
  font-size: 14px;
  line-height: 22px;
}
/* The crew member sits in the tile's top-right corner, as on the landing
   page. */
.t-editor__card .card-content__title img.t-editor__icon {
  position: absolute;
  top: 20px;
  right: 20px;
  width: auto;
  height: 52px;
}
.t-editor__card:has(a[href="/work/agents"]) {
  --tint: var(--gtm-green);
}
.t-editor__card:has(a[href="/work/inbox"]) {
  --tint: var(--gtm-magenta);
}
.t-editor__card:has(a[href="/sending/email"]) {
  --tint: var(--gtm-cyan);
}
.t-editor__card:has(a[href="/sending/linkedin"]) {
  --tint: var(--gtm-blue);
}
.t-editor__card:has(a[href="/sending/connect-domain"]) {
  --tint: var(--gtm-teal);
}
.t-editor__card:has(a[href="/sending/send-from-domain"]) {
  --tint: var(--gtm-periwinkle);
}
.t-editor__card:has(a[href="/workspace/directory"]) {
  --tint: var(--gtm-orange);
}
.t-editor__card:has(a[href="/workspace/activity"]) {
  --tint: var(--gtm-yellow);
}
.t-editor__card:has(a[href="/manage/ai-tools"]) {
  --tint: var(--gtm-violet);
}
.t-editor__card:has(a[href="/company-brief"]) {
  --tint: var(--gtm-apricot);
}
.t-editor__card:has(a[href="/manage/integrations"]) {
  --tint: var(--gtm-mint);
}
.t-editor__card:has(a[href="/manage/team"]) {
  --tint: var(--gtm-orchid);
}
.t-editor__card:has(a[href="/work/chats"]) {
  --tint: var(--gtm-lime);
}
.t-editor__card:has(a[href="/workspace/library"]) {
  --tint: var(--gtm-rose);
}

/* Cards stack on phones so their text never wraps word by word. */
@media (max-width: 640px) {
  .t-editor__grid-element {
    /* biome-ignore lint/complexity/noImportantStyles: Scalar sets the grid's columns inline. */
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---------- Each guide's crew member sits above its title ---------- */

/* The image right after the title is the page's mascot
   (scalar-docs/assets/mascots). The title stays first in the page, so the
   contents list skips it, and the mascot is drawn above it like a page
   icon. */
.page-node:has(> h1:first-child + figure.t-editor__image) {
  position: relative;
  padding-top: 60px;
}
.page-node > h1:first-child + figure.t-editor__image {
  position: absolute;
  top: 0;
  left: 0;
  margin: 0;
}
.page-node > h1:first-child + figure.t-editor__image img {
  width: auto;
  height: 52px;
  border-radius: 0;
}

/* ---------- Integration logos inline, before their names ---------- */

:is(.t-editor__paragraph, td, li, .card-content__text) .t-editor__icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 0.3em;
  vertical-align: -0.15em;
}

/* A logo never ends a line without its name. */
.gtm-brand {
  white-space: nowrap;
}

/* ---------- AI tools and integrations: logo cards, not mascot tiles ---------- */

/* A plain soft card with the app's logo before its name. */
.t-editor__card:is(
  :has(a[href^="/manage/ai-tools/"]),
  :has(a[href^="/manage/integrations/"])
) {
  min-height: 0;
  border-radius: var(--gtm-radius);
  padding: 16px;
  background: var(--gtm-fill);
}
.t-editor__card:is(
  :has(a[href^="/manage/ai-tools/"]),
  :has(a[href^="/manage/integrations/"])
):hover {
  background: color-mix(in oklab, var(--scalar-color-1) 7%, transparent);
}
.t-editor__card:is(
    :has(a[href^="/manage/ai-tools/"]),
    :has(a[href^="/manage/integrations/"])
  )
  .card-content__title
  .t-editor__icon {
  position: static;
  width: 20px;
  height: 20px;
}
/* A logo stays on a long name's first line instead of centering on both. */
.t-editor__card:is(
  :has(a[href^="/manage/ai-tools/"]),
  :has(a[href^="/manage/integrations/"])
)
.card-content__title {
  align-items: flex-start;
}
.t-editor__card:is(
    :has(a[href^="/manage/ai-tools/"]),
    :has(a[href^="/manage/integrations/"])
  )
  .card-content__title
  .t-editor__icon {
  margin-top: 2px;
}

/* A tool page's logo sits in a soft tile above its title. */
.page-node > h1:first-child + figure.t-editor__image img[src*="/logos/"] {
  box-sizing: content-box;
  width: 28px;
  height: 28px;
  padding: 12px;
  border-radius: var(--gtm-radius);
  background: var(--gtm-fill);
}

/* The app's own glyphs (an envelope beside Email) are muted, as the app
   draws icons beside labels. Brand marks keep full strength. */
img[src*="-glyph."] {
  opacity: 0.56;
}
/* One-color logos are drawn in ink; dark mode flips them to white. Grok's
   logo is white, so light mode flips it to ink. */
.dark-mode img[src*="-mono."],
.dark-mode img[src*="-glyph."] {
  filter: invert(1);
}
.light-mode img[src*="grok-white"] {
  filter: invert(1);
}

/* ---------- Skimming: glance tiles, labeled tables, question rows ---------- */

/* Sections breathe, so each one reads as its own chunk. */
h2.t-editor__heading {
  margin-top: 48px;
}

/* At a glance: three small facts under the title, in one soft band so
   they never pass for the clickable cards. A link-less card is always one
   of these. */
.t-editor__grid-element:has(> .t-editor__card:not(.card--has-link)) {
  gap: 0;
  border-radius: var(--gtm-radius);
  background: var(--gtm-fill);
}
.t-editor__card:not(.card--has-link) {
  min-height: 0;
  padding: 14px 16px;
  border-radius: 0;
  background: transparent;
}
.t-editor__card:not(.card--has-link) .card-content {
  gap: 4px;
}
.t-editor__card:not(.card--has-link) .card-title {
  color: var(--scalar-color-2);
  font-size: 12px;
  font-weight: 500;
  line-height: 16px;
}
.t-editor__card:not(.card--has-link) .card-content__text .t-editor__paragraph {
  margin-top: 0;
  color: var(--scalar-color-1);
  font-size: 14px;
  line-height: 20px;
}
@media (max-width: 640px) {
  .t-editor__card:not(.card--has-link) {
    padding: 10px 16px;
  }
  .t-editor__card:not(.card--has-link):first-child {
    padding-top: 14px;
  }
  .t-editor__card:not(.card--has-link):last-child {
    padding-bottom: 14px;
  }
}

/* A table's first column is its label: read down it to find your row. */
.t-editor__table td:first-child {
  color: var(--scalar-color-1);
  font-weight: 500;
}
.t-editor__table td:not(:first-child) {
  color: var(--scalar-color-2);
}

/* Troubleshooting: one question per row, its answer one tap away.
   Hairlines between rows only, never boxes. Scoped to .page-node to
   outrank Scalar's bordered accordion. */
.page-node .t-editor__detail {
  margin-top: 0;
  border-bottom: 1px solid var(--scalar-border-color);
}
.page-node :not(.t-editor__detail) + .t-editor__detail {
  margin-top: var(--scalar-block-spacing);
  border-top: 1px solid var(--scalar-border-color);
}
.page-node .t-editor__detail + :not(.t-editor__detail) {
  margin-top: 16px;
}
.page-node
  .t-editor__detail
  > summary.t-editor__detail-summary:has(.t-editor__detail-marker) {
  gap: 10px;
  padding: 12px 0;
  border: 0;
  border-radius: 0;
}
.page-node
  .t-editor__detail
  > summary.t-editor__detail-summary:has(.t-editor__detail-marker):hover {
  background: transparent;
}
.page-node .t-editor__detail .t-editor__detail-title {
  font-size: 15px;
  font-weight: 500;
}
.page-node .t-editor__detail .t-editor__detail-marker {
  color: var(--scalar-color-3);
}
.page-node .t-editor__detail > .t-editor__detail-content {
  padding: 0 0 14px 26px;
  border: 0;
  color: var(--scalar-color-2);
}

/* ---------- Screenshot shapes, written by the screenshot spec ---------- */

/* screen-sizes:start */
img:is([src="/screens/activity.webp"], [src="/screens/activity-dark.webp"]) {
  aspect-ratio: 1920 / 1200;
}
img:is(
  [src="/screens/agent-draft.webp"],
  [src="/screens/agent-draft-dark.webp"]
) {
  aspect-ratio: 1232 / 830;
}
img:is(
  [src="/screens/agent-idea.webp"],
  [src="/screens/agent-idea-dark.webp"]
) {
  aspect-ratio: 1096 / 1096;
}
img:is(
  [src="/screens/agent-ideas.webp"],
  [src="/screens/agent-ideas-dark.webp"]
) {
  aspect-ratio: 1008 / 772;
}
img:is(
  [src="/screens/agent-settings.webp"],
  [src="/screens/agent-settings-dark.webp"]
) {
  aspect-ratio: 782 / 732;
}
img:is([src="/screens/agents.webp"], [src="/screens/agents-dark.webp"]) {
  aspect-ratio: 1920 / 1200;
}
img:is([src="/screens/chats.webp"], [src="/screens/chats-dark.webp"]) {
  aspect-ratio: 1920 / 1200;
}
img:is(
  [src="/screens/directory-profile.webp"],
  [src="/screens/directory-profile-dark.webp"]
) {
  aspect-ratio: 914 / 1230;
}
img:is([src="/screens/directory.webp"], [src="/screens/directory-dark.webp"]) {
  aspect-ratio: 1920 / 1200;
}
img:is(
  [src="/screens/domain-buy.webp"],
  [src="/screens/domain-buy-dark.webp"]
) {
  aspect-ratio: 1304 / 1136;
}
img:is(
  [src="/screens/domain-one-click.webp"],
  [src="/screens/domain-one-click-dark.webp"]
) {
  aspect-ratio: 1304 / 1136;
}
img:is(
  [src="/screens/domain-own.webp"],
  [src="/screens/domain-own-dark.webp"]
) {
  aspect-ratio: 1304 / 1136;
}
img:is(
  [src="/screens/domain-ready.webp"],
  [src="/screens/domain-ready-dark.webp"]
) {
  aspect-ratio: 1304 / 756;
}
img:is(
  [src="/screens/domain-records.webp"],
  [src="/screens/domain-records-dark.webp"]
) {
  aspect-ratio: 1304 / 1136;
}
img:is(
  [src="/screens/domain-sender.webp"],
  [src="/screens/domain-sender-dark.webp"]
) {
  aspect-ratio: 1304 / 924;
}
img:is(
  [src="/screens/domain-verifying.webp"],
  [src="/screens/domain-verifying-dark.webp"]
) {
  aspect-ratio: 1304 / 908;
}
img:is(
  [src="/screens/email-choose.webp"],
  [src="/screens/email-choose-dark.webp"]
) {
  aspect-ratio: 1304 / 704;
}
img:is(
  [src="/screens/email-in-use.webp"],
  [src="/screens/email-in-use-dark.webp"]
) {
  aspect-ratio: 1304 / 616;
}
img:is(
  [src="/screens/email-settings.webp"],
  [src="/screens/email-settings-dark.webp"]
) {
  aspect-ratio: 1304 / 480;
}
img:is(
  [src="/screens/inbox-batch.webp"],
  [src="/screens/inbox-batch-dark.webp"]
) {
  aspect-ratio: 946 / 1440;
}
img:is([src="/screens/inbox.webp"], [src="/screens/inbox-dark.webp"]) {
  aspect-ratio: 1920 / 1200;
}
img:is([src="/screens/library.webp"], [src="/screens/library-dark.webp"]) {
  aspect-ratio: 1920 / 1200;
}
img:is(
  [src="/screens/linkedin-connect.webp"],
  [src="/screens/linkedin-connect-dark.webp"]
) {
  aspect-ratio: 1304 / 904;
}
img:is(
  [src="/screens/linkedin-connected.webp"],
  [src="/screens/linkedin-connected-dark.webp"]
) {
  aspect-ratio: 1304 / 1264;
}
img:is(
  [src="/screens/linkedin-limits.webp"],
  [src="/screens/linkedin-limits-dark.webp"]
) {
  aspect-ratio: 1304 / 1008;
}
/* screen-sizes:end */