/* ════════════════════════════════════════════════════════════════════════
   NATIVIFY DOCS — dashboard design system, ported onto MkDocs Material.
   Light only. Flat. Hairline borders. Inter + JetBrains Mono. Azure accent.
   Tokens extracted verbatim from nativify-web/dashboard/src/styles/globals.css
   ════════════════════════════════════════════════════════════════════════ */

:root,
[data-md-color-scheme="default"] {
  /* Surfaces */
  --nx-bg:        #ffffff;
  --nx-bg-2:      #fafafa;   /* secondary / subtle  */
  --nx-bg-3:      #f3f3f3;   /* tertiary / code     */
  --nx-bg-inline: #f1f1f3;   /* inline code         */

  /* Text */
  --nx-text:   #0f0f10;      /* primary   */
  --nx-text-2: #4b4b54;      /* secondary */
  --nx-text-3: #787881;      /* tertiary / muted labels */

  /* Hairlines (dark overlays, not solid greys) */
  --nx-border:        rgba(0, 0, 29, 0.10);
  --nx-border-soft:   rgba(0, 0, 23, 0.06);
  --nx-border-strong: rgba(0, 0, 29, 0.15);
  --nx-hover:         rgba(0, 0, 23, 0.03);
  --nx-active:        rgba(0, 0, 23, 0.05);

  /* Accent */
  --nx-accent:      #007aff;                  /* azure-50 */
  --nx-accent-soft: rgba(0, 122, 255, 0.10);
  --nx-accent-tint: rgba(0, 122, 255, 0.06);

  /* Radius / motion */
  --nx-r-sm: 0.375rem;   /* 6px  */
  --nx-r:    0.5rem;     /* 8px  */
  --nx-r-lg: 0.625rem;   /* 10px */
  --nx-ease: cubic-bezier(0.3, 0, 0, 1);

  /* ── Map onto Material's variables ─────────────────────────────────── */
  --md-default-bg-color:            var(--nx-bg);
  --md-default-fg-color:            var(--nx-text);
  --md-default-fg-color--light:     var(--nx-text-2);
  --md-default-fg-color--lighter:   var(--nx-text-3);
  --md-default-fg-color--lightest:  var(--nx-border);
  --md-typeset-color:               var(--nx-text);
  --md-typeset-a-color:             var(--nx-accent);

  --md-accent-fg-color:             var(--nx-accent);
  --md-accent-fg-color--transparent: var(--nx-accent-tint);

  --md-code-bg-color: #f6f6f7;
  --md-code-fg-color: var(--nx-text);

  --md-text-font: "Inter";
  --md-code-font: "JetBrains Mono";

  /* Typeset rhythm */
  --md-typeset-table-color: var(--nx-border);
}

/* ── Typography ───────────────────────────────────────────────────────── */
body,
input,
.md-typeset,
.md-nav,
.md-header,
.md-tabs,
.md-footer {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system,
               "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-feature-settings: "cv11", "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.md-typeset code,
.md-typeset pre,
.md-typeset kbd,
code, kbd, pre, samp {
  font-family: "JetBrains Mono", ui-monospace, "SF Mono", "IBM Plex Mono",
               Menlo, Consolas, monospace;
  font-feature-settings: normal;
}

.md-typeset {
  font-size: 0.82rem;          /* ≈16px — comfortable long-form reading */
  line-height: 1.7;
  letter-spacing: -0.011em;
  color: var(--nx-text);
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
  color: var(--nx-text);
  font-weight: 700;
  letter-spacing: -0.022em;
}
.md-typeset h1 { font-size: 2rem;    line-height: 1.15; margin: 0 0 0.8em; }
.md-typeset h2 { font-size: 1.4rem;  line-height: 1.25; margin: 2.2em 0 0.7em;
                 padding-bottom: 0.45em; border-bottom: 1px solid var(--nx-border); }
.md-typeset h3 { font-size: 1.12rem; line-height: 1.3;  margin: 1.8em 0 0.6em; }
.md-typeset h4 { font-size: 0.95rem; font-weight: 600; }

.md-typeset h2 .headerlink,
.md-typeset h3 .headerlink { color: var(--nx-text-3); }

.md-typeset a              { text-decoration: none; transition: color 0.15s var(--nx-ease); }
.md-typeset a:hover        { color: var(--nx-accent); text-decoration: underline;
                             text-underline-offset: 0.18em; text-decoration-thickness: 1px; }

::selection { background: var(--nx-accent); color: #fff; }

/* ── Header — frosted white bar, hairline base (dashboard topbar) ──────── */
.md-header {
  background: rgba(255, 255, 255, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--nx-text);
  box-shadow: none;
  border-bottom: 1px solid var(--nx-border);
}
.md-header--shadow { box-shadow: none; }

/* Wordmark — system serif, mirrors the dashboard logo */
.md-header__title {
  font-family: "Goudy Old Style", "Hoefler Text", Garamond, Georgia, serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0;
  color: var(--nx-text);
}
.md-header__title .md-header__topic:first-child { font-weight: 700; }

.md-header__button.md-logo,
.md-header [data-md-component="search"] .md-search__icon,
.md-header__option { color: var(--nx-text-3); }
.md-header__button:hover { opacity: 1; color: var(--nx-text); }

/* Repo / source link — quiet, dashboard-style */
.md-source { color: var(--nx-text-3); font-size: 0.66rem; }
.md-source:hover { color: var(--nx-text); opacity: 1; }
.md-source__repository { font-weight: 500; }

/* ── Search — white field, hairline border, rounded (dashboard input) ──── */
.md-search__form {
  background: var(--nx-bg);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r-lg);
  box-shadow: none;
  height: 2.1rem;
}
.md-search__form:hover { background: var(--nx-bg); border-color: var(--nx-border-strong); }
[data-md-toggle="search"]:checked ~ .md-header .md-search__form { background: var(--nx-bg); }
.md-search__input { color: var(--nx-text); }
.md-search__input::placeholder { color: var(--nx-text-3); }
.md-search__output { border-radius: var(--nx-r-lg); }
.md-search-result__meta { color: var(--nx-text-3); }
.md-search-result__article--document .md-search-result__title { font-weight: 600; }

/* ── Sidebar navigation — compact, pill hovers (dashboard sidebar) ─────── */
.md-nav {
  font-size: 0.78rem;
}
.md-nav__title {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nx-text-3);
}
.md-nav__link {
  color: var(--nx-text-2);
  font-weight: 500;
  border-radius: var(--nx-r);
  padding: 0.32rem 0.55rem;
  margin: 0.05rem 0;
  transition: background 0.12s var(--nx-ease), color 0.12s var(--nx-ease);
}
.md-nav__item .md-nav__link:hover {
  background: var(--nx-hover);
  color: var(--nx-text);
}
.md-nav__link--active,
.md-nav__item--active > .md-nav__link,
.md-nav__link--active:focus {
  color: var(--nx-text);
  background: var(--nx-active);
  font-weight: 600;
}
.md-nav__link .md-ellipsis { line-height: 1.4; }

/* Section group headings in the primary sidebar */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--lifted > .md-nav__list > .md-nav__item--active > .md-nav__link {
  font-weight: 600;
  color: var(--nx-text);
}

/* Right-hand table of contents */
.md-nav--secondary .md-nav__title { color: var(--nx-text-3); }
.md-nav--secondary .md-nav__link--active { color: var(--nx-accent); }
.md-nav__link.md-nav__link--active::before { background: var(--nx-accent); }

/* ── Inline & block code ──────────────────────────────────────────────── */
.md-typeset code {
  background: var(--nx-bg-inline);
  color: var(--nx-text);
  border-radius: var(--nx-r-sm);
  padding: 0.12em 0.38em;
  font-size: 0.82em;
  border: 1px solid var(--nx-border-soft);
}
.md-typeset a code { color: inherit; }

.md-typeset pre > code { border: 0; padding: 0.9rem 1.05rem; }
.md-typeset .highlight,
.md-typeset pre {
  background: var(--nx-bg-3);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r-lg);
}
.md-typeset .highlight > pre { margin: 0; }
.md-typeset .highlight code { background: transparent; border: 0; }
.md-clipboard { color: var(--nx-text-3); }
.md-clipboard:hover { color: var(--nx-text); }

/* ── Tables — flat hairline rows, no card (landing/dashboard) ─────────── */
.md-typeset table:not([class]) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 0.78rem;
  display: table;
  width: 100%;
}
.md-typeset table:not([class]) th {
  background: transparent;
  color: var(--nx-text-3);
  font-weight: 600;
  font-size: 0.72rem;
  letter-spacing: -0.005em;
  white-space: nowrap;
  border: 0;
  border-bottom: 1px solid var(--nx-border);
  padding: 0.6rem 1rem;
}
.md-typeset table:not([class]) td {
  color: var(--nx-text-2);
  border: 0;
  border-bottom: 1px solid var(--nx-border);
  padding: 0.7rem 1rem;
}
.md-typeset table:not([class]) td code { font-size: 0.82em; }
.md-typeset table:not([class]) tr:last-child td { border-bottom: 0; }
.md-typeset table:not([class]) tbody tr { transition: background 0.12s var(--nx-ease); }
.md-typeset table:not([class]) tbody tr:hover { background: var(--nx-bg-2); }
.md-typeset table:not([class]) td strong { color: var(--nx-text); font-weight: 700; }

/* ── Admonitions — flat tinted surfaces, hairline, no heavy bars ───────── */
.md-typeset .admonition,
.md-typeset details {
  border: 1px solid var(--nx-border);
  border-left-width: 1px;
  border-radius: var(--nx-r-lg);
  box-shadow: none;
  background: var(--nx-bg-2);
  font-size: 0.78rem;
}
.md-typeset .admonition-title,
.md-typeset summary {
  background: transparent;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.md-typeset .admonition-title::before,
.md-typeset summary::before { background-color: var(--nx-text-3); }

/* Accent the common info/note/tip families with azure */
.md-typeset .admonition.note,
.md-typeset .admonition.info,
.md-typeset .admonition.tip,
.md-typeset .admonition.abstract {
  background: var(--nx-accent-tint);
  border-color: var(--nx-accent-soft);
}
.md-typeset .note > .admonition-title::before,
.md-typeset .info > .admonition-title::before,
.md-typeset .tip > .admonition-title::before,
.md-typeset .abstract > .admonition-title::before { background-color: var(--nx-accent); }
.md-typeset .note > .admonition-title,
.md-typeset .info > .admonition-title,
.md-typeset .tip > .admonition-title { color: var(--nx-accent); }

/* ── Buttons (.md-button) — dashboard primary / secondary ─────────────── */
.md-typeset .md-button {
  border-radius: var(--nx-r);
  border: 1px solid var(--nx-border);
  color: var(--nx-text);
  font-weight: 500;
  font-size: 0.8rem;
  padding: 0.45em 1em;
  transition: background 0.15s var(--nx-ease), opacity 0.15s var(--nx-ease);
}
.md-typeset .md-button:hover { background: var(--nx-bg-2); border-color: var(--nx-border-strong); color: var(--nx-text); }
.md-typeset .md-button--primary {
  background: var(--nx-text);
  color: var(--nx-bg);
  border-color: var(--nx-text);
}
.md-typeset .md-button--primary:hover { background: #1c1c1d; color: var(--nx-bg); opacity: 1; }

/* ── Footer — quiet, hairline (chrome trimmed; generator removed in yml) ── */
.md-footer { background: var(--nx-bg); color: var(--nx-text-2); }
.md-footer-meta { background: var(--nx-bg); border-top: 1px solid var(--nx-border); }
.md-footer-meta__inner,
.md-footer__inner { color: var(--nx-text-3); }
.md-footer__link { opacity: 1; }
.md-footer__title { color: var(--nx-text); font-weight: 600; }
.md-footer__direction { color: var(--nx-text-3); }
.md-copyright { color: var(--nx-text-3); font-size: 0.66rem; }

/* ── Misc chrome: dividers, blockquotes, hr, focus, scrollbars ────────── */
.md-typeset hr { border-bottom: 1px solid var(--nx-border); }
.md-typeset blockquote {
  color: var(--nx-text-2);
  border-left: 2px solid var(--nx-border-strong);
  background: var(--nx-bg-2);
  border-radius: 0 var(--nx-r) var(--nx-r) 0;
}
.md-typeset kbd {
  background: var(--nx-bg-2);
  border: 1px solid var(--nx-border);
  border-radius: var(--nx-r-sm);
  box-shadow: 0 1px 0 0 var(--nx-border);
  color: var(--nx-text);
}

:focus-visible { outline: 1.5px solid rgba(0, 0, 29, 0.3); outline-offset: 2px; }

* { scrollbar-width: thin; scrollbar-color: rgba(0, 0, 29, 0.18) transparent; }
::-webkit-scrollbar { width: 0.5rem; height: 0.5rem; }
::-webkit-scrollbar-thumb { background: rgba(0, 0, 29, 0.18); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 29, 0.32); }
::-webkit-scrollbar-track { background: transparent; }

/* ── Homepage helpers (eyebrow + lead, matching dashboard hierarchy) ───── */
.nx-eyebrow {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-text-3);
  margin-bottom: 0.4rem;
}
.md-typeset .nx-lead {
  font-size: 1.06rem;
  line-height: 1.6;
  color: var(--nx-text-2);
  max-width: 44rem;
  margin: 0.2rem 0 1.6rem;
}

/* Tighten the content gutter a touch for an app-like density */
.md-grid { max-width: 62rem; }