miles/docs/style.css

/* =============================================
   Design tokens — light / dark
   ============================================= */
:root {
  --rx-code-bg:     rgba(26, 20, 16, 0.05);
  --rx-code-border: rgba(26, 20, 16, 0.10);
  --rx-divider:     rgba(26, 20, 16, 0.10);
  --rx-table-bg:    rgba(26, 20, 16, 0.02);
}

html.dark {
  --rx-code-bg:     rgba(255, 255, 255, 0.06);
  --rx-code-border: rgba(255, 255, 255, 0.08);
  --rx-divider:     rgba(255, 255, 255, 0.08);
  --rx-table-bg:    rgba(255, 255, 255, 0.02);
}

/* =============================================
   Links — internal orange, external lighter + ↗
   Scoped to the prose container: an unscoped `a` rule is unlayered and
   beats Mintlify's layered Tailwind colors everywhere, repainting the
   sidebar, tabs, and on-page TOC orange and erasing the active-page
   highlight.
   ============================================= */
.mdx-content a {
  color: #d55816;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.mdx-content a:hover {
  text-decoration-thickness: 2px;
}

.mdx-content a[href^="http"]:not([href*="radixark.com"])::after {
  content: "↗";
  margin-left: 0.15em;
  font-size: 0.7em;
  opacity: 0.45;
  vertical-align: super;
}

/* =============================================
   Nav / UI — Inter (matches RadixArk buttons)
   ============================================= */
#navbar, button {
  font-family: "Inter", system-ui, sans-serif;
}

/* =============================================
   Code — consistent across headings, body, FAQ
   ============================================= */
code {
  background: var(--rx-code-bg) !important;
  border-radius: 4px !important;
  font-size: 0.875em !important;
  padding: 0.15em 0.4em !important;
}

pre {
  border: 1px solid var(--rx-code-border) !important;
  border-radius: 6px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

pre code {
  font-size: 0.875rem !important;
  padding: 0 !important;
  background: none !important;
  border-radius: 0 !important;
}

/* =============================================
   Tables — readable + mobile-safe

   Mintlify already wraps every table in a horizontal scroll area, so this
   file must not size tables to `max-content`: that opts every table out of
   wrapping and pushes the excess into a scroller whose scrollbar is hidden
   (`scrollbar-width: none`), so the overflow reads as content silently cut
   off rather than something you can scroll to. Let tables fill the column
   and wrap instead; the wrapper still scrolls the rare table that genuinely
   cannot fit.
   ============================================= */
table {
  border-collapse: collapse;
  font-size: 0.9375rem;
}

th {
  background: var(--rx-table-bg);
  font-weight: 600;
  letter-spacing: 0.01em;
}

td {
  border-color: var(--rx-divider);
  vertical-align: top;
  line-height: 1.5;
}

/* Mintlify floors every cell at 150px (`[&_td]:min-w-[150px]`), which on its
   own makes a 9-column table 1350px wide against a ~719px content column.
   Let the content decide the column widths. This selector is unlayered, so it
   wins over Mintlify's layered Tailwind utility despite equal specificity —
   the same mechanism the `img` rule below relies on. */
th,
td {
  min-width: 0;
}

/* =============================================
   Images — always responsive
   Scope to content images: this rule is unlayered, so a bare
   `img` selector overrides Mintlify's layered Tailwind utilities
   (e.g. the navbar logo's `h-7`) despite lower specificity, which
   stretches the logo to fill the header. Exclude the nav logo.
   ============================================= */
img:not(.nav-logo) {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
}

/* Navbar logo — bump up from Mintlify's default h-7 (28px).
   Fixed height + auto width + no max-width clamp keeps it sharp and
   prevents the aspect-ratio blow-up. The top bar is a constant 64px
   across breakpoints, so 40px stays clear on desktop and mobile. */
img.nav-logo {
  height: 40px !important;
  width: auto !important;
  max-width: none !important;
}

/* =============================================
   Dividers
   ============================================= */
hr {
  border-color: var(--rx-divider) !important;
  margin: 2rem 0;
}

/* =============================================
   Model-list card fix (homepage CardGroup)
   ============================================= */
.model-list,
.model-list a {
  font-weight: 400 !important;
}

.model-list a {
  font-size: 0.9em;
  text-underline-offset: 2px;
}

/* =============================================
   Mobile — overflow and text consistency
   ============================================= */
@media (max-width: 768px) {
  pre, table, img, video, iframe {
    max-width: 100%;
  }

  pre code {
    font-size: 0.8125rem !important;
  }

  table {
    font-size: 0.875rem;
  }

  h1 code, h2 code, h3 code {
    font-size: 0.8em !important;
  }
}

/* =============================================
   Accordion / FAQ — title size
   ============================================= */
/* Mintlify renders accordion titles as buttons;
   scale them down relative to body text */
button[data-accordion-trigger],
[data-accordion] button,
.accordion-title,
details summary {
  font-size: 0.9375rem !important; /* 15px — tighter than body */
  line-height: 1.4 !important;
  font-weight: 500 !important;
}