custom.css

/* ============================================================
   BoxLite docs — ASCII / terminal restyle
   Mirrors boxlite-ai/boxlite#829 design language:
   #00B0F0 accent · square corners · dark-default.

   Type system (Daytona-style split — terminal identity, readable prose):
     headings + code + UI labels → IBM Plex Mono  (set via docs.json fonts.heading)
     body / prose                → Inter          (set via docs.json fonts.body)
   custom.css re-asserts mono on the few UI labels that must stay terminal
   (sidebar group titles, table headers) since they aren't <h*> elements.

   Palette (exact, lifted from the dashboard restyle index.css):
     dark   bg #13161B  card #1A1D24  code #0D0F13  border #2A2F3A  dim #8C919C
     light  bg #FFFFFF  card #F3F4F6  code #F7F9FC  border #E2E5EA  dim #6B7079
     brand  #00B0F0 (hsl 196 100% 47%)

   Surface depth (dark): page #13161B  ‹  card #1A1D24 (lifted)  ‹  code #0D0F13 (recessed terminal)
   ============================================================ */

:root {
  --bl-brand: #00b0f0;
  --bl-brand-bright: #38c7ff;
  --bl-dark-bg: #13161b;
  --bl-dark-card: #1a1d24;
  --bl-dark-code: #0d0f13;
  --bl-dark-border: #2a2f3a;
  --bl-dark-dim: #8c919c;
  --bl-light-card: #f3f4f6;
  --bl-light-code: #f7f9fc;
  --bl-light-border: #e2e5ea;
  --bl-light-dim: #6b7079;
  --bl-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "SF Mono", monospace;

  /* Console-mirrored tokens.
     Written as the console's own HSL triplets, not re-typed hex, so the two are
     provably the same value and a drift shows up as a textual diff. Source:
     the console's shipped stylesheet (`--brand`, `--accent`, `--ring`,
     `--success`, `--warning`, `--destructive`, `--info`, `--shadow-card*`).
     Hand-copied hex is how the old `warn #E0A33E` drifted from the console's
     `43 72% 57%` (#E0B442). */
  --bl-ring: 196 100% 47%;          /* console --ring: the brand */
  --bl-accent-light: 220 14% 93%;   /* console --accent, light */
  --bl-accent-dark: 222 14% 16%;    /* console --accent, dark  */

  --bl-success-light: 137 45% 38%;
  --bl-warning-light: 38 80% 40%;
  --bl-danger-light: 5 71% 50%;
  --bl-info-light: 196 100% 47%;

  --bl-success-dark: 137 60% 60%;
  --bl-warning-dark: 43 72% 57%;
  --bl-danger-dark: 5 71% 58%;
  --bl-info-dark: 196 100% 47%;

  --bl-shadow-card-light: 0 1px 2px #1018280a, 0 8px 24px -10px #1018281a;
  --bl-shadow-card-hover-light: 0 2px 4px #1018280f, 0 14px 32px -12px #10182824;
  --bl-shadow-card-dark: 0 1px 2px #0006, 0 10px 28px -8px #0000008c;
  --bl-shadow-card-hover-dark: 0 2px 4px #00000080, 0 16px 36px -10px #000000a6;
}

/* ------------------------------------------------------------
   1. Square corners everywhere — the single most defining move
      of the terminal aesthetic. Genuine circles (avatars, status
      dots, toggle knobs) are re-rounded just below.
   ------------------------------------------------------------ */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

[class*="rounded-full"],
img[class*="rounded-full"],
[class*="avatar"],
[role="switch"],
[role="switch"] * {
  border-radius: 9999px !important;
}

/* ------------------------------------------------------------
   2. Monospace on every code surface (global family set in
      docs.json fonts; this guarantees code/kbd too).
   ------------------------------------------------------------ */
code,
pre,
kbd,
samp,
tt {
  font-family: var(--bl-mono) !important;
}

/* ------------------------------------------------------------
   3. Accent — brand cyan for selection.
   ------------------------------------------------------------ */
::selection {
  background: var(--bl-brand);
  color: #ffffff;
}

/* ------------------------------------------------------------
   4. Terminal scrollbar — thin, square, on-theme.
   ------------------------------------------------------------ */
* {
  scrollbar-width: thin;
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-thumb {
  background: var(--bl-dark-border);
}
*::-webkit-scrollbar-thumb:hover {
  background: var(--bl-brand);
}
*::-webkit-scrollbar-track {
  background: transparent;
}

/* ------------------------------------------------------------
   5. Cards — flat, bordered terminal surfaces.

      Hover follows the console's model: the surface shifts to `--accent` and
      the card lifts on `--shadow-card-hover`. The docs previously lit the
      border up in brand cyan instead, which read as a different interaction
      language on an otherwise identical palette — and spent the brand colour
      on a passive hover, leaving nothing louder for focus.
   ------------------------------------------------------------ */
.card {
  background-color: var(--bl-light-card) !important;
  border: 1px solid var(--bl-light-border) !important;
  box-shadow: var(--bl-shadow-card-light) !important;
  transition: background-color 0.12s ease, box-shadow 0.12s ease !important;
}
.card:hover {
  background-color: hsl(var(--bl-accent-light)) !important;
  box-shadow: var(--bl-shadow-card-hover-light) !important;
}
.dark .card {
  background-color: var(--bl-dark-card) !important;
  border-color: var(--bl-dark-border) !important;
  box-shadow: var(--bl-shadow-card-dark) !important;
}
.dark .card:hover {
  background-color: hsl(var(--bl-accent-dark)) !important;
  box-shadow: var(--bl-shadow-card-hover-dark) !important;
}

/* ------------------------------------------------------------
   6. Code blocks — recessed terminal panel.
      Darker than the page in dark mode; 1px framed in both.
   ------------------------------------------------------------ */
.code-block {
  border: 1px solid var(--bl-light-border) !important;
  box-shadow: none !important;
}
.dark .code-block {
  border-color: var(--bl-dark-border) !important;
}
/* Shiki paints the panel via `background: var(--shiki-dark-bg)`, applied by
   Mintlify's `.dark .dark:bg-codeblock` rule with !important. We need both a
   higher-specificity selector AND to rewrite the var (set inline per block). */
html.dark .code-block div[class*="bg-codeblock"] {
  --shiki-dark-bg: var(--bl-dark-code) !important;
  background-color: var(--bl-dark-code) !important;
}
html:not(.dark) .code-block div[class*="bg-codeblock"] {
  background-color: var(--bl-light-code) !important;
}

/* ------------------------------------------------------------
   7. Inline code — subtle brand-tinted chip, square, bordered.
   ------------------------------------------------------------ */
:not(pre) > code {
  background-color: rgba(0, 176, 240, 0.07) !important;
  border: 1px solid var(--bl-light-border) !important;
  padding: 0.05em 0.34em !important;
  font-size: 0.86em !important;
}
.dark :not(pre) > code {
  background-color: rgba(0, 176, 240, 0.1) !important;
  border-color: var(--bl-dark-border) !important;
}

/* ------------------------------------------------------------
   8. Tables — crisp 1px terminal grid; uppercase tracked headers.
   ------------------------------------------------------------ */
table.table th,
table.table td {
  border: 1px solid var(--bl-light-border) !important;
}
.dark table.table th,
.dark table.table td {
  border-color: var(--bl-dark-border) !important;
}
table.table th {
  font-family: var(--bl-mono) !important;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78em;
  font-weight: 600;
}
.dark table.table thead {
  background-color: var(--bl-dark-card);
}
html:not(.dark) table.table thead {
  background-color: var(--bl-light-card);
}

/* ------------------------------------------------------------
   9. Sidebar group titles — terminal section labels.
      Uppercase, tracked-out, dim — like `■ GENERAL` in the ref.
   ------------------------------------------------------------ */
.sidebar-title {
  font-family: var(--bl-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  color: var(--bl-light-dim) !important;
}
.dark .sidebar-title {
  color: var(--bl-dark-dim) !important;
}

/* Page eyebrow (section label above the title) — matching terminal label. */
.eyebrow {
  font-family: var(--bl-mono) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-size: 10px !important;
}

/* ------------------------------------------------------------
   10. Steps — brand-cyan numbered markers (kept circular).
   ------------------------------------------------------------ */
.steps .step-container [class*="rounded-full"] {
  background-color: rgba(0, 176, 240, 0.14) !important;
  border: 1px solid var(--bl-brand) !important;
  color: var(--bl-brand-bright) !important;
}

/* ------------------------------------------------------------
   11. Callouts (Note/Warning/Tip/Info) — flat tinted panel with a
       thick left accent bar. Recolor Mintlify's blue Note/Info to
       the brand cyan; amber/green/red keep their semantic hue.
   ------------------------------------------------------------ */
.callout {
  border-width: 1px 1px 1px 3px !important;
  box-shadow: none !important;
}
.dark .callout[class*="blue"] {
  border-color: var(--bl-brand) !important;
  background-color: rgba(0, 176, 240, 0.1) !important;
}
html:not(.dark) .callout[class*="blue"] {
  border-color: var(--bl-brand) !important;
  background-color: rgba(0, 176, 240, 0.07) !important;
}

/* ------------------------------------------------------------
   12. Accordions — crisp 1px terminal frame.
   ------------------------------------------------------------ */
.accordion-group {
  border: 1px solid var(--bl-light-border) !important;
}
.dark .accordion-group {
  border-color: var(--bl-dark-border) !important;
}

/* ------------------------------------------------------------
   13. Navigation directories (目录) — left sidebar nav + right
       "On this page" TOC in mono, for the terminal directory feel.
       Body prose stays Inter. 13px to offset mono's wider glyphs.
   ------------------------------------------------------------ */
#navigation-items,
#navigation-items a,
#table-of-contents-content,
.toc,
.toc a,
nav:has(#table-of-contents-content) {
  font-family: var(--bl-mono) !important;
}
#navigation-items a,
.toc a {
  font-size: 13px !important;
}

/* ------------------------------------------------------------
   13a. Header logo — bump from Mintlify's default ~28px to ~40px.
        Our wordmark is a wide aspect (~2.2:1), and 28px reads too
        small. Targets the <img> inside the header nav anchor.
   ------------------------------------------------------------ */
#navbar a.select-none img,
#navbar a[href="/"] img {
  height: 40px !important;
  max-height: 40px !important;
  width: auto !important;
  max-width: none !important;
}

/* ------------------------------------------------------------
   13b. Kill Mintlify's sidebar top scroll-fade overlay.
        Mintlify paints a 32px sticky div that fades from the
        opaque page color to transparent at the top of the nav.
        On a flat dark page it's invisible, but our backdrop is a
        grid + glow — so this opaque rectangle clips the grid in
        a visible seam. We don't need the fade (grid already soft).
   ------------------------------------------------------------ */
.sticky.top-0.pointer-events-none[class*="bg-gradient-to-b"] {
  background-image: none !important;
}



/* ------------------------------------------------------------
   13c. Sidebar group spacing, by state.
        Mintlify defaults to `mt-6 lg:mt-8` (32px) between top-level
        groups. That spacing assumes each group shows several children.
        Here most groups are collapsed root nodes, i.e. single lines, so
        a 32px — or even 16px — gap between one-line items reads as a
        sparse, disconnected list. Collapsed groups therefore sit close
        together; a group whose children are visible gets real
        separation, because then it genuinely is a block.
   ------------------------------------------------------------ */
#navigation-items .sidebar-group,
#navigation-items div:has(> .sidebar-group-header) {
  margin-top: 4px !important;
}
#navigation-items .sidebar-group:has([aria-expanded="true"]),
#navigation-items div:has(> .sidebar-group-header) {
  margin-top: 14px !important;
}
/* A page list directly under a section label needs only a hairline gap. */
#navigation-items div:has(> .sidebar-group-header) > .sidebar-group {
  margin-top: 6px !important;
}
#navigation-items .sidebar-group:first-child,
#navigation-items > div > div:first-child {
  margin-top: 0 !important;
}

/* ------------------------------------------------------------
   14. Heading scale for a monospace heading face.
       fonts.heading is IBM Plex Mono, whose glyphs run ~20% wider and
       optically heavier than a proportional face at the same px. At
       Mintlify's default 36/24/20 the page title reads oversized and
       long titles ("Production best practices") dominate the column.
       Scaling down one step restores the intended optical hierarchy.
   ------------------------------------------------------------ */
#content-area h1, article h1 {
  font-size: 30px !important;
  line-height: 36px !important;
}
#content-area h2, article h2 {
  font-size: 21px !important;
  line-height: 30px !important;
}
#content-area h3, article h3 {
  font-size: 17px !important;
  line-height: 26px !important;
}

/* ------------------------------------------------------------
   15. Focus-visible — the one interaction the docs had no rules for.

       The console defines a deliberate keyboard-focus system on its
       interactive primitives: a 2px ring in `--ring` (the brand) at low
       alpha, plus the border promoted to the ring colour. The docs shipped
       nothing here, so every focused control fell back to Mintlify's
       default — a different shape and colour on an otherwise matched
       palette, and weak keyboard affordance in its own right.

       `:focus-visible` (not `:focus`) so a mouse click does not draw a ring;
       only keyboard traversal does. Order matters: this section is last so
       it wins over the earlier `border-color` rules without adding
       specificity hacks.
   ------------------------------------------------------------ */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
[role="switch"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
  outline: 1px auto hsl(var(--bl-ring) / 0.5) !important;
  outline-offset: 1px !important;
}

/* Cards are links; a focused card gets the ring, and the same surface shift
   its hover state uses, so keyboard and pointer land in the same place. */
.card:focus-visible,
a:focus-visible .card {
  background-color: hsl(var(--bl-accent-light)) !important;
  outline: 1px auto hsl(var(--bl-ring) / 0.5) !important;
  outline-offset: 1px !important;
}
.dark .card:focus-visible,
.dark a:focus-visible .card {
  background-color: hsl(var(--bl-accent-dark)) !important;
}

/* The search field is the highest-traffic control on a docs site; give it the
   full ring treatment the console gives its inputs. */
#search-bar-entry:focus-visible,
[id*="search"] input:focus-visible {
  outline: 1px auto hsl(var(--bl-ring) / 0.5) !important;
  outline-offset: 1px !important;
}

/* Never suppress the ring: Mintlify sets `outline: none` on some controls. */
*:focus-visible {
  outline-style: auto !important;
}

/* ------------------------------------------------------------
   16. Blockquotes — this site's actual note device.

       Measured, not assumed: the reconstructed docs are pure Markdown and use
       zero MDX components. A DOM check on the running preview returns 0 for
       `.card`, `.callout`, `.steps` and `.accordion-group` site-wide, while
       `> ...` blockquotes appear on 54 of 74 pages (292 of them). Mintlify
       renders those as a bare, class-less <blockquote> with a 4px left border
       in rgb(37,42,44) — a warm grey that belongs to neither this palette
       (#2A2F3A is bluer) nor the console's tokens.

       So the emphasis device carrying almost all of the site's asides was the
       one surface nothing had styled. It gets the brand-cyan accent bar that
       section 11 intended for Note/Info, on the element that actually exists.
   ------------------------------------------------------------ */
#content-area blockquote:not(.sr-only),
article blockquote:not(.sr-only) {
  border-left: 3px solid var(--bl-brand) !important;
  border-top: 0 !important;
  border-right: 0 !important;
  border-bottom: 0 !important;
  background-color: rgba(0, 176, 240, 0.07) !important;
  padding: 12px 16px !important;
}
.dark #content-area blockquote:not(.sr-only),
.dark article blockquote:not(.sr-only) {
  background-color: rgba(0, 176, 240, 0.1) !important;
}

/* ------------------------------------------------------------
   17. Callout accents — exact console semantic hues.

       Inert today (0 callout elements site-wide), kept because CLAUDE.md
       directs authors to Mintlify components, so these will render as soon as
       one is used. Hooks are Mintlify's colour-name classes — the same shape
       section 11 established — not semantic names, which match nothing.

       Values come from the console's HSL triplets rather than re-typed hex:
       that is how the old hand-copied `warn #E0A33E` drifted from the
       console's `43 72% 57%` (#E0B442).
   ------------------------------------------------------------ */
html:not(.dark) .callout[class*="amber"],
html:not(.dark) .callout[class*="yellow"] {
  border-color: hsl(var(--bl-warning-light)) !important;
}
html:not(.dark) .callout[class*="green"] {
  border-color: hsl(var(--bl-success-light)) !important;
}
html:not(.dark) .callout[class*="red"] {
  border-color: hsl(var(--bl-danger-light)) !important;
}
.dark .callout[class*="amber"],
.dark .callout[class*="yellow"] {
  border-color: hsl(var(--bl-warning-dark)) !important;
}
.dark .callout[class*="green"] {
  border-color: hsl(var(--bl-success-dark)) !important;
}
.dark .callout[class*="red"] {
  border-color: hsl(var(--bl-danger-dark)) !important;
}