/* Copyright (C) 2023-2026 QuantumNous. AGPL-3.0-or-later. */
/* Shared UI details. Keep page composition and theme colors intact. */
:root {
  --font-sans:
    'Public Sans Variable', 'Public Sans', 'PingFang SC', 'Microsoft YaHei',
    system-ui, sans-serif;
  --ui-body-size: 14px;
  --ui-body-line: 24px;
  --ui-page-title: 32px;
  --ui-hero-title: 36px;
}

html {
  /* Public pages scroll the document; the console scrolls its content. */
  scrollbar-gutter: stable;
}

body,
.product-site.product-site,
.console-shell.console-shell,
.console-mobile-drawer.console-mobile-drawer,
.mk-page.mk-page {
  font-family: var(--font-body);
  font-size: var(--ui-body-size);
  line-height: var(--ui-body-line);
}

.console-shell.console-shell,
.console-mobile-drawer.console-mobile-drawer {
  --font-sans: var(--font-body);
  --text-sm: 14px;
  --text-base: 16px;
  --text-3xl: 32px;
}

.site-top-bar.site-top-bar,
.console-header.console-header {
  height: 64px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
}

.site-top-bar.site-top-bar > div,
.console-header.console-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  padding-inline: 24px;
}

.site-top-bar .site-nav-tabs,
.console-header .site-nav-tabs {
  display: none;
  width: max-content;
  justify-self: center;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
}

.site-top-bar .site-nav-tabs > a,
.console-header .site-nav-tabs > a {
  justify-content: center;
  width: 124px;
  height: 36px;
  flex-shrink: 0;
  padding-inline: 10px;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}

/* Isolate shared controls from the product page's `button { font: inherit }`. */
.site-top-bar.site-top-bar button,
.console-header.console-header button {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
}

.site-top-bar.site-top-bar button[role='radio'],
.console-header.console-header button[role='radio'] {
  font-size: 12px;
  line-height: 16px;
  font-weight: 700;
}

.site-top-bar.site-top-bar button:has(> .truncate),
.console-header.console-header button:has(> .truncate) {
  width: 180px;
  max-width: 180px;
  font-size: 12.5px;
  line-height: 18px;
  font-weight: 400;
}

.site-top-bar button > .truncate,
.console-header button > .truncate {
  font-family: inherit;
}

.site-top-bar.site-top-bar .a6-mobile-navigation > button {
  display: block;
  max-width: 124px;
  overflow: hidden;
  font-size: 12px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.site-top-bar .a6-mobile-navigation > button > svg {
  display: inline-block;
  margin-left: 6px;
  vertical-align: middle;
}

.site-top-bar.site-top-bar > div > :nth-child(3) {
  display: none;
}
.site-top-bar.site-top-bar > div > :nth-child(4) {
  display: flex;
}

@media (min-width: 1280px) {
  .site-top-bar.site-top-bar > div,
  .console-header.console-header {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  }
  .site-top-bar .site-nav-tabs,
  .console-header .site-nav-tabs,
  .site-top-bar.site-top-bar > div > :nth-child(3) {
    display: flex;
  }
  .site-top-bar.site-top-bar > div > :nth-child(4) {
    display: none;
  }
}

/* The public and console headers use the same tools breakpoint. */
@media (min-width: 1280px) and (max-width: 1535px) {
  .site-top-bar.site-top-bar > div > :nth-child(3) > :first-child {
    display: none;
  }
  .site-top-bar.site-top-bar > div > :nth-child(3) > :nth-child(2) {
    display: inline-flex;
  }
}

@media (max-width: 1535px) {
  .site-top-bar.site-top-bar button:has(> .truncate),
  .console-header.console-header button:has(> .truncate) {
    width: 34px;
    max-width: 34px;
  }
}

@media (min-width: 1280px) and (max-width: 1699px) {
  .site-top-bar .site-nav-tabs > a,
  .console-header .site-nav-tabs > a {
    width: 112px;
    padding-inline: 8px;
  }
}

@media (max-width: 639px) {
  .site-top-bar.site-top-bar > div,
  .console-header.console-header {
    gap: 4px;
    padding-inline: 12px;
  }
  .console-shell.console-shell {
    --app-header-height: 64px;
  }
  .site-top-bar .site-brand-pill > span:first-child,
  .console-header .site-brand-pill > span:first-child,
  .site-top-bar .site-brand-pill img,
  .console-header .site-brand-pill img {
    width: 32px;
    height: 32px;
  }
}

@media (max-width: 479px) {
  .site-top-bar .site-brand-pill > .truncate,
  .console-header .site-brand-pill > .truncate {
    display: none;
  }
}

/* A small, shared type scale; code and numeric metrics retain monospace. */
.mk-page.mk-page .mk-hero h1,
.product-docs.product-docs .docs-heading h1,
.console-content main header h1 {
  font-size: var(--ui-page-title);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

main.min-h-svh.pt-20 > section:first-child > .max-w-6xl > .space-y-6 > h1 {
  font-size: var(--ui-hero-title);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.mk-page.mk-page .mk-hero p,
.product-docs.product-docs .docs-heading > p,
main.min-h-svh.pt-20 > section:first-child > .max-w-6xl > .space-y-6 > p {
  font-size: 16px;
  line-height: 1.7;
}

.product-docs.product-docs .docs-section p,
.product-docs.product-docs .docs-steps li,
.product-docs.product-docs .docs-nav-link {
  font-size: var(--ui-body-size);
  line-height: var(--ui-body-line);
}

.product-docs.product-docs .docs-section {
  margin-block: 32px;
}
.product-docs.product-docs .docs-nav-group {
  margin-top: 24px;
}
.product-docs.product-docs .docs-section h2 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.5;
}

main.min-h-svh.pt-20 > section:nth-of-type(2) > .max-w-6xl h2 {
  font-size: 18px;
  line-height: 1.5;
}
main.min-h-svh.pt-20 > section:nth-of-type(2) > .max-w-6xl p {
  font-size: var(--ui-body-size);
  line-height: var(--ui-body-line);
}

@media (max-width: 767px) {
  :root {
    --ui-page-title: 28px;
    --ui-hero-title: 28px;
  }
}