style.css

/* ==========================================================================
   Sei Docs — custom stylesheet
   Ports the Sei design language (Figma-aligned) onto Mintlify's component set
   Fonts + palette aligned with sei-brand and the production sei.io site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Brand fonts — loaded from dashboard.sei.io CDN
   The Sei brand fonts (Lateral, Items Text, ABC Repro Mono) are commercial
   typefaces. We deliberately do NOT redistribute the .woff/.woff2 files from
   this public repo — they live on a licensed Sei property (dashboard.sei.io)
   that serves them with `Access-Control-Allow-Origin: *` so any Sei-owned
   surface (including this docs site) can load them at runtime.
   -------------------------------------------------------------------------- */

/* Lateral Variable — sans (Light / Regular / Medium) */
@font-face {
  font-family: "Lateral Variable";
  src:
    url("https://dashboard.sei.io/fonts/Lateral-StandardLight.woff2") format("woff2"),
    url("https://dashboard.sei.io/fonts/Lateral-StandardLight.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lateral Variable";
  src:
    url("https://dashboard.sei.io/fonts/Lateral-StandardRegular.woff2") format("woff2"),
    url("https://dashboard.sei.io/fonts/Lateral-StandardRegular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lateral Variable";
  src: url("https://dashboard.sei.io/fonts/Lateral-StandardMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Lateral Condensed Bold — display heading weight (bold maps to condensed) */
@font-face {
  font-family: "Lateral Variable";
  src:
    url("https://dashboard.sei.io/fonts/Lateral-CondensedBold.woff2") format("woff2"),
    url("https://dashboard.sei.io/fonts/Lateral-CondensedBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Lateral Condensed — explicit display family (medium + bold) */
@font-face {
  font-family: "Lateral Condensed";
  src: url("https://dashboard.sei.io/fonts/Lateral-CondensedMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lateral Condensed";
  src:
    url("https://dashboard.sei.io/fonts/Lateral-CondensedBold.woff2") format("woff2"),
    url("https://dashboard.sei.io/fonts/Lateral-CondensedBold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Items Text — body/serif */
@font-face {
  font-family: "Items Text";
  src:
    url("https://dashboard.sei.io/fonts/ItemsText-Book.woff2") format("woff2"),
    url("https://dashboard.sei.io/fonts/ItemsText-Book.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ABC Repro Mono — monospace + UI labels.
   Note: only the Regular (400) face is hosted on dashboard.sei.io. Do NOT use
   `font-weight: 500` (or higher) with `var(--sei-font-mono)` — the browser
   will synthesize a faux bold from the regular glyphs, which looks blurry.
   Rely on uppercase + letter-spacing for label emphasis instead. */
@font-face {
  font-family: "ABC Repro Mono";
  src:
    url("https://dashboard.sei.io/fonts/ABCReproMono-Regular.woff2") format("woff2"),
    url("https://dashboard.sei.io/fonts/ABCReproMono-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */

:root {
  /* Core palette */
  --sei-black: #000000;
  --sei-white: #ffffff;
  --sei-cream: #e6d4c3;

  /* Neutral greys */
  --sei-grey-25: #f5f5f7;
  --sei-grey-30: #ececee;
  --sei-grey-50: #cccccc;
  --sei-grey-75: #999999;
  --sei-grey-100: #999999;
  --sei-grey-200: #666666;
  --sei-grey-300: #333333;
  --sei-grey-400: #333333;
  --sei-grey-600: #131313;

  /* Maroon accent */
  --sei-maroon-25: #b99ba1;
  --sei-maroon-50: #b05c6c;
  --sei-maroon-100: #600014;
  --sei-maroon-200: #34050d;

  /* Gold accent */
  --sei-gold-25: #d6c9ac;
  --sei-gold-100: #966f22;
  --sei-gold-200: #5d4a22;

  /* Semantic */
  --sei-live: #38df00;
  --sei-error: #fa0c00;
  --sei-diagram-ok: #1a7a00;
  --sei-diagram-error: #c20a00;
  --sei-diagram-warning: #b45309;
  --sei-diagram-gold: var(--sei-gold-100);

  /* Fonts — match sei-website / sei-brand */
  --sei-font-body:
    "Lateral Variable", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --sei-font-display:
    "Lateral Condensed", "Lateral Variable", -apple-system, BlinkMacSystemFont,
    "Segoe UI", sans-serif;
  --sei-font-serif: "Items Text", Georgia, "Times New Roman", serif;
  --sei-font-mono:
    "ABC Repro Mono", "SF Mono", Monaco, "Cascadia Mono", "Roboto Mono", Menlo,
    Courier, monospace;

  /* Radii (sharp Sei aesthetic) */
  --sei-radius-sm: 2px;
  --sei-radius-md: 4px;

  /* Surfaces */
  --sei-card-bg-light: #ffffff;
  --sei-card-bg-dark: #000000;
  --sei-card-border-light: #ececee;
  --sei-card-border-dark: #1f1f1f;
  --sei-card-divider-light: #ececee;
  --sei-card-divider-dark: #262626;

  --sei-page-bg-light: #f5f5f7;
  --sei-page-bg-dark: #000000;

  /* Page layout — see PAGE LAYOUT below */
  --sei-page-px: 24px; /* page margin: navbar, sidebar text, TOC right edge, footer */
  --sei-sidebar-w: 220px; /* left nav column */
  --sei-gutter: 40px; /* article ↔ sidebar AND article ↔ TOC — identical on both sides */
  --sei-toc-w: 180px; /* right "On this page" column */
  --sei-layout-max: 1536px; /* above this the whole layout centres instead of stretching
                               (fluid on 13"–14" MacBooks: 1440/1470/1512 px) */
}

.dark {
  color-scheme: dark;
  --sei-diagram-ok: #10b981;
  --sei-diagram-error: #ef4444;
  --sei-diagram-warning: #f59e0b;
  --sei-diagram-gold: var(--sei-gold-25);
}

/* --------------------------------------------------------------------------
   Base typography
   -------------------------------------------------------------------------- */

html,
body {
  font-family: var(--sei-font-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01", "cv11";
}

code,
kbd,
pre,
samp,
.font-mono,
[class*="font-mono"] {
  font-family: var(--sei-font-mono) !important;
}

/* Headings — Lateral display, tight letter-spacing.
   `font-weight: 700` resolves to Lateral Condensed Bold via the @font-face
   mapping above (matching the sei.io marketing site convention). */
h1,
h2,
h3,
h4,
h5,
h6,
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
  font-family: var(--sei-font-body);
  letter-spacing: -0.015em;
  font-weight: 700;
}

h1,
.prose h1 {
  font-family: var(--sei-font-display);
  letter-spacing: -0.02em;
  font-weight: 700;
}

h2,
.prose h2 {
  font-family: var(--sei-font-display);
  letter-spacing: -0.015em;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   Eyebrow / mono label utility — use with `className="sei-eyebrow"`
   -------------------------------------------------------------------------- */

.sei-eyebrow,
[class*="eyebrow"] {
  font-family: var(--sei-font-mono);
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.04em;
  color: var(--sei-gold-100);
  font-weight: 400;
}

.dark .sei-eyebrow,
.dark [class*="eyebrow"] {
  color: var(--sei-gold-25);
}

/* --------------------------------------------------------------------------
   CARDS — sharp corners, maroon hover
   Mintlify renders <Card> as `.card` (div or a). The icon is a CSS-mask svg
   painted with Mintlify's own `bg-primary` / `dark:bg-primary-light`, i.e.
   the docs.json brand colours, so it needs no override here.
   -------------------------------------------------------------------------- */

.card {
  border-radius: var(--sei-radius-sm) !important;
  border: 1px solid var(--sei-card-border-light) !important;
  background: var(--sei-card-bg-light) !important;
  transition:
    background-color 0.15s ease,
    border-color 0.15s ease !important;
  position: relative;
  overflow: hidden;
}

.dark .card {
  border-color: var(--sei-card-border-dark) !important;
  background: var(--sei-card-bg-dark) !important;
}

.card:hover {
  border-color: rgba(96, 0, 20, 0.35) !important;
  background: rgba(96, 0, 20, 0.02) !important;
}

.dark .card:hover {
  border-color: rgba(185, 155, 161, 0.25) !important;
  background: rgba(96, 0, 20, 0.08) !important;
}

/* Card title — tight, bold */
.card h2,
.card h3,
.card h4 {
  letter-spacing: -0.015em !important;
  font-weight: 700 !important;
}

/* <CardGroup> / <Columns> — tight gaps, grid-frame look */
.card-group,
.columns {
  gap: 12px !important;
}

/* --------------------------------------------------------------------------
   CALLOUTS — Info / Note / Tip / Warning / Danger / Check
   Thin accent left border, sharp corners, Sei palette. Mintlify tags every
   callout with `data-callout-type`, which is the only stable hook (the
   colour utility classes on the element change between releases).
     info    → neutral grey      note → blue
     tip     → green ("live")    check → green
     warning → gold              danger → maroon
   -------------------------------------------------------------------------- */

.callout {
  border-radius: var(--sei-radius-sm) !important;
  border-width: 1px !important;
  border-left-width: 3px !important;
  padding: 14px 18px !important;
  font-size: 14px !important;
  line-height: 1.55 !important;
}

/* Body copy stays neutral (Mintlify tints it yellow/red/blue per type, which
   clashes with the gold/maroon bars); the type colour lives in bar + icon. */
.callout > div:not([data-component-part="callout-icon"]) {
  color: var(--sei-grey-600) !important;
}

.dark .callout > div:not([data-component-part="callout-icon"]) {
  color: var(--sei-grey-25) !important;
}

/* Info — neutral */
.callout[data-callout-type="info"] {
  background: rgba(128, 128, 128, 0.06) !important;
  border-color: rgba(128, 128, 128, 0.18) !important;
  border-left-color: var(--sei-grey-200) !important;
}
.callout[data-callout-type="info"] [data-component-part="callout-icon"] svg {
  color: var(--sei-grey-200) !important;
}
.dark .callout[data-callout-type="info"] {
  background: rgba(128, 128, 128, 0.09) !important;
  border-color: rgba(128, 128, 128, 0.2) !important;
  border-left-color: var(--sei-grey-75) !important;
}
.dark .callout[data-callout-type="info"] [data-component-part="callout-icon"] svg {
  color: var(--sei-grey-75) !important;
}

/* Note — blue */
.callout[data-callout-type="note"] {
  background: rgba(59, 130, 246, 0.05) !important;
  border-color: rgba(59, 130, 246, 0.16) !important;
  border-left-color: rgb(37, 99, 235) !important;
}
.callout[data-callout-type="note"] [data-component-part="callout-icon"] svg {
  color: rgb(37, 99, 235) !important;
}
.dark .callout[data-callout-type="note"] {
  background: rgba(59, 130, 246, 0.08) !important;
  border-color: rgba(147, 197, 253, 0.16) !important;
  border-left-color: rgb(147, 197, 253) !important;
}
.dark .callout[data-callout-type="note"] [data-component-part="callout-icon"] svg {
  color: rgb(147, 197, 253) !important;
}

/* Tip / Check — green */
.callout[data-callout-type="tip"],
.callout[data-callout-type="check"] {
  background: rgba(56, 223, 0, 0.05) !important;
  border-color: rgba(56, 223, 0, 0.2) !important;
  border-left-color: #1a7a00 !important;
}
.callout[data-callout-type="tip"] [data-component-part="callout-icon"] svg,
.callout[data-callout-type="check"] [data-component-part="callout-icon"] svg {
  color: #1a7a00 !important;
}
.dark .callout[data-callout-type="tip"],
.dark .callout[data-callout-type="check"] {
  background: rgba(56, 223, 0, 0.07) !important;
  border-color: rgba(56, 223, 0, 0.18) !important;
  border-left-color: var(--sei-live) !important;
}
.dark .callout[data-callout-type="tip"] [data-component-part="callout-icon"] svg,
.dark .callout[data-callout-type="check"] [data-component-part="callout-icon"] svg {
  color: var(--sei-live) !important;
}

/* Warning — gold */
.callout[data-callout-type="warning"] {
  background: rgba(150, 111, 34, 0.06) !important;
  border-color: rgba(150, 111, 34, 0.2) !important;
  border-left-color: var(--sei-gold-100) !important;
}
.callout[data-callout-type="warning"] [data-component-part="callout-icon"] svg {
  color: var(--sei-gold-100) !important;
}
.dark .callout[data-callout-type="warning"] {
  background: rgba(214, 201, 172, 0.06) !important;
  border-color: rgba(214, 201, 172, 0.15) !important;
  border-left-color: var(--sei-gold-25) !important;
}
.dark .callout[data-callout-type="warning"] [data-component-part="callout-icon"] svg {
  color: var(--sei-gold-25) !important;
}

/* Danger — maroon */
.callout[data-callout-type="danger"] {
  background: rgba(96, 0, 20, 0.05) !important;
  border-color: rgba(96, 0, 20, 0.18) !important;
  border-left-color: var(--sei-maroon-100) !important;
}
.callout[data-callout-type="danger"] [data-component-part="callout-icon"] svg {
  color: var(--sei-maroon-100) !important;
}
.dark .callout[data-callout-type="danger"] {
  background: rgba(96, 0, 20, 0.12) !important;
  border-color: rgba(185, 155, 161, 0.18) !important;
  border-left-color: var(--sei-maroon-25) !important;
}
.dark .callout[data-callout-type="danger"] [data-component-part="callout-icon"] svg {
  color: var(--sei-maroon-25) !important;
}

/* --------------------------------------------------------------------------
   TABLES — mono headers, sharp borders, tight rows
   -------------------------------------------------------------------------- */

.prose table,
article table,
table {
  border-radius: var(--sei-radius-sm) !important;
  border-collapse: collapse !important;
  overflow: hidden;
}

.prose thead,
article thead,
table thead {
  background: transparent !important;
}

.prose thead th,
article thead th,
table thead th {
  font-family: var(--sei-font-mono) !important;
  text-transform: uppercase !important;
  font-size: 11px !important;
  letter-spacing: 0.04em !important;
  font-weight: 400 !important;
  color: var(--sei-grey-200) !important;
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  border-bottom: 1px solid var(--sei-card-border-light) !important;
}

.dark .prose thead th,
.dark article thead th,
.dark table thead th {
  color: var(--sei-grey-75) !important;
  border-bottom-color: var(--sei-card-border-dark) !important;
}

.prose tbody td,
article tbody td,
table tbody td {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
  font-size: 14px !important;
  border-bottom: 1px solid var(--sei-card-border-light) !important;
}

.dark .prose tbody td,
.dark article tbody td,
.dark table tbody td {
  border-bottom-color: var(--sei-card-border-dark) !important;
}

.prose tbody tr:last-child td,
article tbody tr:last-child td,
table tbody tr:last-child td {
  border-bottom: none !important;
}

/* Monospace for code-like cells (hex, addresses, IDs) */
.prose td code,
article td code,
table td code,
.prose th code {
  font-family: var(--sei-font-mono) !important;
  font-size: 0.85em !important;
  padding: 0.1em 0.4em !important;
  background: rgba(96, 0, 20, 0.06) !important;
  border: 1px solid rgba(96, 0, 20, 0.1) !important;
  border-radius: var(--sei-radius-sm) !important;
}

.dark .prose td code,
.dark article td code,
.dark table td code,
.dark .prose th code {
  background: rgba(185, 155, 161, 0.1) !important;
  border-color: rgba(185, 155, 161, 0.15) !important;
  color: var(--sei-cream) !important;
}

/* --------------------------------------------------------------------------
   INLINE CODE — not in tables
   -------------------------------------------------------------------------- */

.prose :not(pre) > code,
article :not(pre) > code {
  font-family: var(--sei-font-mono) !important;
  font-size: 0.88em !important;
  padding: 0.12em 0.4em !important;
  background: rgba(96, 0, 20, 0.06);
  border: 1px solid rgba(96, 0, 20, 0.1);
  border-radius: var(--sei-radius-sm);
  color: var(--sei-maroon-100);
}

.dark .prose :not(pre) > code,
.dark article :not(pre) > code {
  background: rgba(185, 155, 161, 0.1);
  border-color: rgba(185, 155, 161, 0.15);
  color: var(--sei-cream);
}

/* Code inside headings stays simple */
.prose h1 code,
.prose h2 code,
.prose h3 code,
.prose h4 code {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  color: inherit !important;
}

/* --------------------------------------------------------------------------
   CODE BLOCKS (Shiki) — sharp corners, grey-600 bg in dark.
   docs.json sets `styling.codeblocks: "dark"`, so code surfaces are dark in
   BOTH themes; anything that sits on them must use the dark-mode accent.
   -------------------------------------------------------------------------- */

.prose pre,
article pre,
pre[class*="shiki"],
.shiki {
  border-radius: var(--sei-radius-sm) !important;
  font-family: var(--sei-font-mono) !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
  border: 1px solid var(--sei-card-border-dark) !important;
}

.dark .prose pre,
.dark article pre,
.dark pre[class*="shiki"],
.dark .shiki {
  background-color: var(--sei-grey-600) !important;
  border-color: var(--sei-card-border-dark) !important;
}

/* Mintlify wraps fenced code blocks in .code-block > .code-block-background,
   both defaulting to rounded-2xl (16px) with their own background. Combined
   with the inner <pre>'s own bg + border, that rendered a rounded box-in-a-box.
   Flatten it to a single square block: zero the wrapper radius and strip the
   <pre>'s own bg/border/radius so the wrapper is the only visible surface. */
.code-block,
.code-block [class*="code-block-background"] {
  border-radius: 0 !important;
}

.code-block pre,
.code-block .shiki {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
}

/* Defeat .dark .prose pre (same specificity, earlier in file) so the <pre> is
   truly transparent — no color seam between it and the wrapper. */
.dark .code-block pre,
.dark .code-block .shiki {
  background: transparent !important;
}

.dark .code-block [class*="code-block-background"] {
  background-color: var(--sei-grey-600) !important;
}

/* --------------------------------------------------------------------------
   ECOSYSTEM APP GRID — logo tiles
   Mintlify's prose styles content <img>/<figure> with !important margins and a
   `rounded` class, which shrinks the logo inside its tile (it no longer fills
   the square as in the original widget). Reset margin/radius so the logo fills
   the tile edge-to-edge. `.sei-eco-grid` is a non-utility marker on the grid.
   -------------------------------------------------------------------------- */
.sei-eco-grid figure,
.sei-eco-grid figure img {
  margin: 0 !important;
  border-radius: 0 !important;
  max-width: none !important;
}

/* Network-tab state uses a semantic marker instead of dynamically assembled
   Tailwind classes, which Mintlify does not reliably compile in snippets. */
.sei-network-tab {
  color: #525252 !important;
}

.sei-network-tab:hover,
.sei-network-tab[data-active="true"] {
  color: #171717 !important;
}

.dark .sei-network-tab {
  color: #a3a3a3 !important;
}

.dark .sei-network-tab:hover,
.dark .sei-network-tab[data-active="true"] {
  color: #ffffff !important;
}

/* Faucet verification state follows the docs theme without a dynamic
   className expression in the snippet. */
.sei-faucet-verify {
  color: #525252 !important;
}

.sei-faucet-verify[data-verified="true"] {
  color: #15803d !important;
}

.dark .sei-faucet-verify {
  color: #a3a3a3 !important;
}

.dark .sei-faucet-verify[data-verified="true"] {
  color: #4ade80 !important;
}

/* --------------------------------------------------------------------------
   LINKS (within prose)
   -------------------------------------------------------------------------- */

.prose a:not([class*="card"]):not([class*="button"]),
article a:not([class*="card"]):not([class*="button"]) {
  color: var(--sei-maroon-100);
  text-decoration: none;
  border-bottom: 1px solid rgba(96, 0, 20, 0.25);
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}

.prose a:not([class*="card"]):not([class*="button"]):hover,
article a:not([class*="card"]):not([class*="button"]):hover {
  color: var(--sei-maroon-200);
  border-bottom-color: var(--sei-maroon-100);
}

.dark .prose a:not([class*="card"]):not([class*="button"]),
.dark article a:not([class*="card"]):not([class*="button"]) {
  color: var(--sei-maroon-25);
  border-bottom-color: rgba(185, 155, 161, 0.4);
}

.dark .prose a:not([class*="card"]):not([class*="button"]):hover,
.dark article a:not([class*="card"]):not([class*="button"]):hover {
  color: var(--sei-cream);
  border-bottom-color: var(--sei-cream);
}

/* Heading anchor links — Mintlify handles the hover reveal; just make sure the
   prose link underline above never shows on them. */
.prose h1 a[href^="#"],
.prose h2 a[href^="#"],
.prose h3 a[href^="#"],
.prose h4 a[href^="#"] {
  border-bottom: none !important;
}

/* --------------------------------------------------------------------------
   STEPS — Sei maroon step indicators (Mintlify: .steps > .step > …step-indicator)
   -------------------------------------------------------------------------- */

.steps [class*="step-indicator"] {
  background-color: var(--sei-maroon-100) !important;
  color: var(--sei-white) !important;
  border-radius: var(--sei-radius-sm) !important;
}

.dark .steps [class*="step-indicator"] {
  background-color: var(--sei-maroon-200) !important;
  color: var(--sei-cream) !important;
}

/* --------------------------------------------------------------------------
   TABS — Sei maroon underline on selected
   -------------------------------------------------------------------------- */

[role="tab"][aria-selected="true"],
[role="tab"][data-state="active"] {
  color: var(--sei-maroon-100) !important;
  border-color: var(--sei-maroon-100) !important;
}

.dark [role="tab"][aria-selected="true"],
.dark [role="tab"][data-state="active"] {
  color: var(--sei-maroon-25) !important;
  border-color: var(--sei-maroon-25) !important;
}

/* <CodeGroup> tabs sit on the code header, which is dark in BOTH themes.
   Maroon-100 on that #0b0c0e header is 1.4:1 in light mode, so always use the
   dark-mode accent there. */
.code-group [role="tab"][aria-selected="true"],
.code-group [role="tab"][data-state="active"],
.codeblock-dark [role="tab"][aria-selected="true"],
.codeblock-dark [role="tab"][data-state="active"] {
  color: var(--sei-maroon-25) !important;
  border-color: var(--sei-maroon-25) !important;
}

/* --------------------------------------------------------------------------
   PAGE LAYOUT — sidebar | gutter | article | gutter | TOC
   --------------------------------------------------------------------------
   Mintlify's mint theme renders this on desktop (≥1024px):

     div[lg:flex]                              wrapper: max-w-8xl mx-auto lg:px-8
     ├─ nav#sidebar                            sticky, w-[18rem]
     └─ main#content-container                 flex-1
        └─ div.flex-row-reverse.gap-12
           ├─ div#content-side-layout          TOC column (≥1280px only)
           │  └─ div#table-of-contents-layout  pl-10 w-[19rem]
           └─ div#content-area                 px-1 lg:pl-[5.7rem] lg:-ml-12 xl:w-[calc(100%-28rem)]
     footer#footer > div                       px-8, capped at 984px, centred

   Hook onto stable ids/data/semantic markers (#sidebar, #content-area,
   #navbar, #search-bar-entry, .nav-tabs, …) and structural `:has()`
   selectors. Mintlify renames its arbitrary-value Tailwind classes between
   releases (lg:pl-[23.7rem] → lg:pl-[5.7rem], max-w-[984px] → max-w-246, …),
   which silently broke earlier class-keyed overrides and left a 91px gutter
   on the left of the article but 4px on the right. Dimensions are the
   `--sei-page-px` … `--sei-layout-max` tokens.
   -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  /* 1. Wrapper holding sidebar + content: flush left, capped and centred on
        very wide screens so article lines never grow unreadably long. */
  div:has(> #sidebar) {
    max-width: var(--sei-layout-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 0 !important;
    padding-right: var(--sei-page-px) !important;
  }

  /* 2. Sidebar column */
  #sidebar {
    width: var(--sei-sidebar-w) !important;
    min-width: var(--sei-sidebar-w) !important;
    left: 0 !important;
    margin-left: 0 !important;
  }

  /* 3. Article column — one gutter each side, no negative margin, and let it
        take whatever the TOC leaves over (Mintlify's xl:w-[calc(100%-28rem)]
        assumes its own 28rem side column). */
  #content-area {
    flex: 1 1 0% !important;
    width: auto !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--sei-gutter) !important;
    padding-right: var(--sei-gutter) !important;
  }

  /* 4. Row holding TOC + article: the gutter is #content-area's padding, so
        drop Mintlify's extra gap-12 (48px) that only applied on the TOC side. */
  #content-container > div:has(> #content-area) {
    gap: 0 !important;
  }
}

@media (min-width: 1280px) {
  /* 5. TOC column — fixed width, no inner left padding (pl-10) since the
        gutter already comes from #content-area. Width lives on the column
        (a row flex item); the inner layout just fills it. */
  #content-side-layout {
    flex: 0 0 var(--sei-toc-w) !important;
    width: var(--sei-toc-w) !important;
    min-width: var(--sei-toc-w) !important;
    max-width: var(--sei-toc-w) !important;
  }

  #table-of-contents-layout {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    padding-left: 0 !important;
  }
}

/* 6. Footer — same width and page margin as the layout above it. Mintlify
      centres a 984px block, which on our flush-left layout lines up with
      nothing; stretch it to the layout cap and reuse the page margin. */
#footer {
  margin-left: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
}

#footer > div {
  width: 100% !important;
  max-width: var(--sei-layout-max) !important;
}

@media (min-width: 1024px) {
  #footer > div {
    padding-left: var(--sei-page-px) !important;
    padding-right: var(--sei-page-px) !important;
  }
}

/* 7. Page title block — a hairline under the title/description separates it
      from the body (this used to come from an accidental `header` match). */
#content-area > header {
  border-bottom: 1px solid var(--sei-card-border-light);
  padding-bottom: 12px;
}

.dark #content-area > header {
  border-bottom-color: var(--sei-card-divider-dark);
}

/* --------------------------------------------------------------------------
   SIDEBAR — dense, Sei-styled group labels and active state
   Mintlify: #sidebar-content > (scroll area, pr-8) > … > ul.sidebar-group >
   li > div.sidebar-group-header > h3.sidebar-title, links/buttons carry their
   depth as an inline padding-left (1rem, 1.75rem, …) — we leave that alone so
   nested pages stay indented.
   -------------------------------------------------------------------------- */

/* Hide the sticky gradient "shadow bar" Mintlify places at the top of the sidebar scroll area */
#sidebar-content [class*="bg-gradient-to-b"] {
  display: none !important;
}

/* Inner padding — Mintlify's own 1rem link padding then lands the text
   exactly on --sei-page-px, in line with the navbar logo and tabs. */
#sidebar-content {
  padding-left: calc(var(--sei-page-px) - 1rem) !important;
  padding-right: 8px !important;
  padding-top: 16px !important;
}

/* Mintlify reserves 32px on the right of its scroll-area viewport for a
   fade/scrollbar that is hidden here. Target the component-part hook rather
   than the current `pr-8` implementation class so labels keep the extra room. */
#sidebar-content [data-component-part="scroll-area-viewport"] {
  padding-right: 8px !important;
}

/* Density — small font, tight line-height */
#sidebar,
#sidebar-content {
  font-size: 12px;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

/* All sidebar links and buttons */
#sidebar a,
#sidebar button {
  padding-right: 4px !important;
  border-radius: var(--sei-radius-sm) !important;
  min-height: 0 !important;
  line-height: 1.3 !important;
  transition:
    background-color 0.12s ease,
    color 0.12s ease;
}

/* Group accordion buttons (each nested group title) — tighter vertical */
#sidebar button[aria-expanded] {
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

/* Section / group labels (GETTING STARTED, CORE ARCHITECTURE, …) — mono eyebrow */
#sidebar .sidebar-group-header {
  margin-top: 10px !important;
  margin-bottom: 4px !important;
}

#sidebar .sidebar-title {
  font-family: var(--sei-font-mono) !important;
  text-transform: uppercase !important;
  font-size: 10px !important;
  letter-spacing: 0.08em !important;
  color: var(--sei-gold-100) !important;
  font-weight: 400 !important;
  line-height: 1.2 !important;
}

.dark #sidebar .sidebar-title {
  color: var(--sei-gold-25) !important;
}

/* Active / current page — only the page link itself (Mintlify also flags the
   enclosing group <li> with data-active, which must not get this treatment). */
#sidebar a[aria-current="page"] {
  background-color: rgba(96, 0, 20, 0.08) !important;
  color: var(--sei-maroon-100) !important;
  font-weight: 500 !important;
  border-left: 2px solid var(--sei-maroon-100) !important;
}

.dark #sidebar a[aria-current="page"] {
  background-color: rgba(185, 155, 161, 0.08) !important;
  color: var(--sei-maroon-25) !important;
  border-left-color: var(--sei-maroon-25) !important;
}

/* --------------------------------------------------------------------------
   NAVBAR / TOPBAR
   -------------------------------------------------------------------------- */

#navbar {
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.dark #navbar {
  border-bottom-color: var(--sei-grey-300);
}

@media (min-width: 1024px) {
  /* #navbar-transition is the backdrop; the other direct div is the content
     wrapper. This avoids depending on Mintlify's current max-width utility. */
  #navbar > div:not(#navbar-transition) {
    max-width: var(--sei-layout-max) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Mintlify exposes no ids on these row containers. Anchor the top row to the
     stable search id and the tab row to its semantic .nav-tabs marker instead
     of their current `px-12` utility. */
  #navbar div:has(> div > div > #search-bar-entry),
  #navbar div:has(> .nav-tabs) {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: var(--sei-page-px) !important;
    padding-right: var(--sei-page-px) !important;
  }
}

/* Navbar link items — small, body font */
#navbar a {
  font-size: 13px;
  letter-spacing: -0.005em;
}

/* Optional primary CTA (docs.json `navbar.primary`) — Sei maroon fill */
#navbar a[class*="button-primary"],
#navbar button[class*="primary"] {
  background-color: var(--sei-maroon-100) !important;
  color: var(--sei-white) !important;
  border: 1px solid var(--sei-maroon-100) !important;
  border-radius: var(--sei-radius-sm) !important;
  font-weight: 500;
  transition: background-color 0.15s ease;
}

#navbar a[class*="button-primary"]:hover,
#navbar button[class*="primary"]:hover {
  background-color: var(--sei-maroon-200) !important;
  border-color: var(--sei-maroon-200) !important;
}

.dark #navbar a[class*="button-primary"],
.dark #navbar button[class*="primary"] {
  color: var(--sei-cream) !important;
}

/* --------------------------------------------------------------------------
   TOC / right rail (Mintlify: li.toc-item > a, active link has aria-current)
   -------------------------------------------------------------------------- */

.toc-item a {
  font-size: 12.5px !important;
  letter-spacing: -0.005em;
  color: var(--sei-grey-200);
  transition: color 0.12s ease;
}

.dark .toc-item a {
  color: var(--sei-grey-75);
}

.toc-item a:hover {
  color: var(--sei-maroon-100);
}

.dark .toc-item a:hover {
  color: var(--sei-maroon-25);
}

.toc-item a[aria-current] {
  color: var(--sei-maroon-100) !important;
  border-left: 2px solid var(--sei-maroon-100);
}

.dark .toc-item a[aria-current] {
  color: var(--sei-maroon-25) !important;
  border-left-color: var(--sei-maroon-25);
}

/* --------------------------------------------------------------------------
   SEARCH
   -------------------------------------------------------------------------- */

input[type="search"],
[class*="search"] input {
  font-family: var(--sei-font-body) !important;
  border-radius: var(--sei-radius-sm) !important;
  border: 1px solid rgba(0, 0, 0, 0.12) !important;
  background-color: var(--sei-grey-25) !important;
}

.dark input[type="search"],
.dark [class*="search"] input {
  background-color: var(--sei-grey-600) !important;
  border-color: var(--sei-grey-300) !important;
  color: var(--sei-white) !important;
}

input[type="search"]:focus,
[class*="search"] input:focus {
  outline: 2px solid var(--sei-maroon-100);
  outline-offset: -1px;
  border-color: transparent !important;
}

/* Maroon-100 (#600014) is near-invisible against the #131313 dark input */
.dark input[type="search"]:focus,
.dark [class*="search"] input:focus {
  outline-color: var(--sei-maroon-25);
}

mark,
[class*="search"] mark,
[class*="highlight"] {
  background-color: rgba(96, 0, 20, 0.2) !important;
  color: inherit !important;
  padding: 0.1em 0.2em;
  border-radius: var(--sei-radius-sm);
}

.dark mark {
  background-color: rgba(185, 155, 161, 0.35) !important;
}

/* --------------------------------------------------------------------------
   BLOCKQUOTES (outside callouts)
   -------------------------------------------------------------------------- */

.prose blockquote:not([class*="callout"]),
article blockquote:not([class*="callout"]) {
  border-left: 3px solid var(--sei-maroon-100);
  background: rgba(96, 0, 20, 0.04);
  padding: 14px 18px;
  border-radius: var(--sei-radius-sm);
  font-style: normal;
  color: var(--sei-grey-200);
}

.dark .prose blockquote:not([class*="callout"]),
.dark article blockquote:not([class*="callout"]) {
  border-left-color: var(--sei-maroon-25);
  background: rgba(96, 0, 20, 0.1);
  color: var(--sei-grey-75);
}

/* --------------------------------------------------------------------------
   HR
   -------------------------------------------------------------------------- */

.prose hr,
article hr,
hr {
  border: none;
  border-top: 1px solid var(--sei-card-border-light);
  margin: 2.5rem 0;
}

.dark .prose hr,
.dark article hr,
.dark hr {
  border-top-color: var(--sei-card-border-dark);
}

/* --------------------------------------------------------------------------
   Detail / Accordion
   -------------------------------------------------------------------------- */

details,
[class*="accordion"] {
  border: 1px solid var(--sei-card-border-light) !important;
  border-radius: var(--sei-radius-sm) !important;
  background: transparent !important;
}

.dark details,
.dark [class*="accordion"] {
  border-color: var(--sei-card-border-dark) !important;
}

summary,
[class*="accordion"] summary,
[class*="accordion"] button[aria-expanded] {
  padding: 12px 16px !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  cursor: pointer;
}

summary:hover,
[class*="accordion"] button[aria-expanded]:hover {
  background: rgba(96, 0, 20, 0.03) !important;
}

.dark summary:hover,
.dark [class*="accordion"] button[aria-expanded]:hover {
  background: rgba(185, 155, 161, 0.05) !important;
}

/* --------------------------------------------------------------------------
   Image / Frame
   -------------------------------------------------------------------------- */

[class*="Frame"],
.frame,
figure {
  border-radius: var(--sei-radius-sm) !important;
}

/* --------------------------------------------------------------------------
   SCROLLBARS
   -------------------------------------------------------------------------- */

::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.15);
  border-radius: 3px;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12);
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(96, 0, 20, 0.4);
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(185, 155, 161, 0.3);
}

/* --------------------------------------------------------------------------
   AI ASSISTANT — hide the floating "Ask a question…" pill only
   --------------------------------------------------------------------------
   Mintlify pins a full-width input pill (`.chat-assistant-floating-input`)
   across the bottom of every page, which dominates the bottom of the
   article on wide screens. Hide it. The navbar entry button
   (`#assistant-entry` / `#assistant-entry-mobile`) and the expanded chat
   panel (`#chat-assistant-sheet`) remain untouched, so the assistant is
   still reachable from the topbar.
   -------------------------------------------------------------------------- */

.chat-assistant-floating-input {
  display: none !important;
}