:root {
  /* Match the Dashboard header height */
  --scalar-header-height: 48px;
}

.light-mode .dark-only {
  display: none;
}

.dark-mode .light-only {
  display: none;
}

/* Header */

/* Divider between the header dropdowns and the auth links.

   The dropdown wrapper is `display: contents`, so it generates no box of its
   own, but its `::after` still does and lands in the header row as its own flex
   item. The row gap then falls on both sides of the line, which centers it
   between the dropdown and the link without hard coding any spacing.

   The selector matches any `nav` inside the header rather than one named nav
   class. The published CLI renders the header nav as `.navigation`, while the
   renderer deployed to scalar.com splits the row into start and end regions and
   names both `.t-header__nav`. Keying on the class showed the line in a local
   preview and never on the live site.

   `:has(~ a)` keeps a dropdown that ends the row from trailing a stray line.
   The general sibling combinator is deliberate. An open dropdown mounts its
   panel as the wrapper's next sibling, so `+ a` stops matching the moment the
   menu opens, which drops the line and shifts the whole header sideways.

   The line is decoration, so `pointer-events: none` stops a click on it from
   registering on the wrapper, which is the dropdown's own root element. */
.header nav > .contents:has(~ a)::after {
  content: "";
  align-self: center;
  pointer-events: none;
  width: var(--scalar-border-width);
  height: 18px;
  background: var(--scalar-border-color);
}

.w-1\/2 {
  width: 50%;
}

.sidebar-mobile-menu {
  z-index: 123123123123 !important;
}

.docs-overview-card {
  display: flex;
  position: relative;
}

.docs-overview-card > .t-editor__card {
  flex: 1;
}

.card-content__text.t-prose:empty {
  display: none;
}

/* Preserve the stretched link without letting its prose wrapper create a flex gap. */
.card-content__text.t-prose:has(> .card-stretched-link:only-child) {
  display: contents;
}

.docs-overview-card:has(.card-stretched-link:hover) > .t-editor__card {
  background-color: var(--scalar-background-2);
}

.starter-kit-animation {
  display: block;
  height: fit-content !important;
  width: 100% !important;
}

/* Component Preview Styles */

.scalar-component-preview {
  border: var(--scalar-border-width) solid var(--scalar-border-color);
  border-radius: var(--scalar-radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: var(--scalar-block-spacing);
}

.scalar-component-preview > *,
.scalar-component-preview > * > .t-editor__code {
  margin: 0 !important;
}

.scalar-component-preview:has(+ .t-editor__code-group),
.scalar-component-preview:has(+ .t-editor__code-container) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.scalar-component-preview + .t-editor__code-group,
.scalar-component-preview + .t-editor__code-container {
  margin-top: 0;
  border: var(--scalar-border-width) solid var(--scalar-border-color);
  border-top: 0;
  border-radius: var(--scalar-radius);
  border-top-left-radius: 0;
  border-top-right-radius: 0;

  background: color-mix(in srgb, var(--scalar-background-1), var(--scalar-background-2));
}

.scalar-component-preview + .t-editor__code-group .t-editor__code,
.scalar-component-preview + .t-editor__code-container .t-editor__code {
  margin-top: 0;
  box-shadow: none;
  background: transparent;
}

/* TODO: Remove these styles after cleaning up the docs pages */

/* Make adjacent buttons have secondary styles*/
.t-editor__button + .t-editor__button {
  --button-background: var(--scalar-background-2);
  --font-color: var(--scalar-color-1);
  --font-color-hover: var(--scalar-color-1);
  --button-border-color: var(--button-background);
  --button-border-color-hover: var(--button-background);
  --button-background-hover: color-mix(in srgb, var(--scalar-background-3), var(--scalar-background-2));
}

/* Reset the visited color for anchors being used as buttons */
.t-editor__button.t-editor__anchor:visited {
  color: var(--font-color, var(--scalar-background-1));
}

.docs-global-footer.introduction.footer {
  background: var(--scalar-background-2);
  border-radius: var(--scalar-radius-lg);
  margin: 0 auto 68px;
  overflow: hidden;
  padding-bottom: 200px;
  padding-inline: 20px;
  position: relative;
  width: min(calc(100% - 96px), 1504px);
  max-width: 1060px;
}

.docs-global-footer .footer-animation {
  margin-inline: -20px;
}

.docs-global-footer .footer-animation svg {
  bottom: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

.docs-global-footer .fa-gradient,
.docs-global-footer .fa-gradient-2 {
  background: linear-gradient(
    90deg,
    var(--scalar-color-blue),
    var(--scalar-color-yellow) 8.3%,
    var(--scalar-color-green) 16.6%,
    var(--scalar-color-accent) 24.9%,
    var(--scalar-color-orange) 33.2%,
    var(--scalar-color-purple) 41.5%,
    var(--scalar-color-blue) 49.8%,
    var(--scalar-color-yellow) 58.1%,
    var(--scalar-color-green) 66.4%,
    var(--scalar-color-accent) 74.7%,
    var(--scalar-color-orange) 83%,
    var(--scalar-color-purple) 91.3%,
    var(--scalar-color-blue)
  ) !important;
}

.docs-global-footer .footer-content {
  /* one grid for everything: the brand block is column one, and the four
     link groups (promoted out of .footer-links by display: contents) fill
     the rest -- so the brand keeps its top-left position exactly */
  display: grid;
  gap: 0;
  /* dedicated 48px gutter track between the brand column and the links */
  grid-template-columns: minmax(0, 1fr) 48px repeat(4, minmax(0, 1fr));
  margin: auto;
  max-width: calc(100% - 56px);
  padding-top: 48px;
  width: 100%;
}

.docs-global-footer .footer-links {
  display: contents;
}

/* skip the gutter track so auto-placement fills columns 3-6 */
.docs-global-footer .footer-link-group:first-child {
  grid-column: 3;
}

.docs-global-footer .footer-content span,
.docs-global-footer .footer-content p,
.docs-global-footer .footer-content a,
.docs-global-footer .footer-content button,
.docs-global-footer .footer-content img {
  position: relative;
  z-index: 1;
}

.docs-global-footer .footer-content a,
.docs-global-footer .footer-content a:hover,
.docs-global-footer .footer-content a:visited,
.docs-global-footer .footer-content button {
  text-decoration: none;
  text-decoration-line: none;
}

.docs-global-footer .footer-socials {
  display: flex;
  gap: 8px;
  margin-top: 36px;
}

.docs-global-footer .footer-trust-badges {
  align-items: center;
  align-self: flex-start;
  display: flex;
  gap: 12px;
  margin-top: 22px;
}

.docs-global-footer .footer-trust-badge-link {
  align-items: center;
  display: inline-flex;
  height: 74px;
  justify-content: center;
  outline-offset: 4px;
  width: 74px;
}

.docs-global-footer .footer-trust-badge-soc,
.docs-global-footer .footer-trust-badge-gdpr {
  display: block;
  height: 68px;
  object-fit: contain;
  width: 68px;
}
@media screen and (max-width: 1380px) {
  .docs-global-footer.introduction.footer {
    width: 100%;
    margin: 0;
    border-radius: 0;
  }
}
@media screen and (min-width: 1001px) {
  .docs-global-footer.introduction.footer {
    padding-bottom: 80px;
  }

  .docs-global-footer .footer-socials {
    margin-top: 72px;
  }
}

.docs-global-footer .footer-social-link {
  align-items: center;
  color: var(--scalar-color-2);
  display: inline-flex;
  height: 28px;
  justify-content: center;
  text-decoration: none;
  width: 28px;
}

.docs-global-footer .footer-social-link:hover,
.docs-global-footer .footer-social-link:visited {
  color: var(--scalar-color-1);
  text-decoration: none;
}

.docs-global-footer .footer-social-link scalar-icon,
.docs-global-footer .footer-social-link svg {
  height: 18px;
  width: 18px;
}

@media screen and (max-width: 1000px) {
  /* the one-grid desktop layout (gutter track + display: contents) does not
     stack, so small viewports go back to the original flex column with the
     links as their own grid */
  .docs-global-footer .footer-content {
    display: flex;
    flex-direction: column;
    gap: 48px;
  }

  .docs-global-footer .footer-links {
    display: grid;
    gap: 32px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .docs-global-footer .footer-link-group:first-child {
    grid-column: auto;
  }
}

@media screen and (max-width: 860px) {
  .docs-global-footer .footer-links {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media screen and (max-width: 600px) {
  .docs-global-footer .footer-links {
    grid-template-columns: 1fr;
  }
}

/* Thomson Reuters ships a stacked lockup (mark beside two lines of type), so it
   is roughly 3:1 where every other logo on the wall is 4.5:1 or wider. Capped at
   the shared 24px it carries under half the optical weight of its neighbours and
   reads as an afterthought, so it gets its own cap chosen to match: at 34px its
   rendered ink matches the median of the other logos as closely as the previous
   single-line Thomson Reuters logo did. The extra class specificity is here to
   win against the per-page `.logowall-item svg` rules. */
.logowall .logowall-item-tr svg {
  max-height: 34px;
}

@media screen and (max-width: 1000px) {
  /* Same ratio against the 20px the wall drops to on narrow viewports. */
  .logowall .logowall-item-tr svg {
    max-height: 28px;
  }
}