style.css

/*
 * Lettr documentation — global styling overrides.
 *
 * Mintlify automatically includes every .css file in the content directory
 * (the folder holding docs.json) on every page. This file does not need to be
 * referenced from docs.json or from any MDX page.
 *
 * https://www.mintlify.com/docs/customize/custom-scripts
 */

/* ===========================================================================
 * Sharp corners
 *
 * Lettr's brand and the lettr.com site use square corners, so the docs carry
 * no border radius on any element. This mirrors the global reset in
 * lettr-web/src/styles/app.css, including its exception: small deliberate
 * circles (list bullets, step markers, avatars) stay round there and stay
 * round here.
 *
 * There is no docs.json option for this — `rounded` / `sharp` do not appear
 * anywhere in the Mintlify `mint` theme schema, so a config key cannot do it.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1. The theme's own radius tokens.
 *
 * Mintlify reads every radius through a `--rounded-*` scale, e.g.
 * `border-radius: var(--rounded-xl, .75rem)`. The variables ship undefined, so
 * the fallbacks apply; defining them as 0 flattens the theme through its own
 * token system.
 *
 * This tier does the heavy lifting, and it is deliberately the first line of
 * attack rather than a more forceful selector. Every `!important` radius rule
 * the theme ships resolves a token, and those rules live in `@layer utilities`
 * / `@layer components`. Cascade layers invert for `!important` — a layered
 * important declaration beats an unlayered one regardless of specificity — so
 * no selector written here could override them. Redefining the token they read
 * sidesteps that contest entirely. Custom property definitions also inherit
 * across shadow DOM boundaries, which reaches the bundled consent widget.
 *
 * `--rounded-full` is intentionally left at its default: see section 3.
 * ------------------------------------------------------------------------ */
:root {
  --rounded: 0px;
  --rounded-sm: 0px;
  --rounded-md: 0px;
  --rounded-lg: 0px;
  --rounded-xl: 0px;
  --rounded-2xl: 0px;
  --rounded-3xl: 0px;
  --rounded-search: 0px;

  /* Bundled cookie-consent widget (c15t), which ships its own scale. */
  --c15t-radius-sm: 0px;
  --c15t-radius-md: 0px;
  --c15t-radius-lg: 0px;
  --cdt-radius: 0px;
  --accordion-radius: 0px;
  --button-border-radius: 0px;
  --consent-banner-border-radius: 0px;
  --consent-dialog-card-radius: 0px;
  --consent-widget-radius: 0px;
  --consent-widget-accordion-radius: 0px;
  --frame-placeholder-border-radius: 0px;

  /* Scrollbars. */
  --scrollbar-track-radius: 0px;
  --scrollbar-thumb-radius: 0px;
  --scrollbar-corner-radius: 0px;
}

/* ---------------------------------------------------------------------------
 * 2. Everything else.
 *
 * Catches radii written as literal values rather than read from a token —
 * prose `<pre>` and `<kbd>`, LaTeX blocks, and third-party widget CSS.
 * ------------------------------------------------------------------------ */
*,
*::before,
*::after,
::backdrop,
::file-selector-button {
  border-radius: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 3. Circles that are meant to be circles.
 *
 * lettr.com is sharp everywhere but keeps small round dots — list bullets,
 * status dots and avatars are all `rounded-full` in lettr-web. Section 2 is a
 * blunt instrument and would square them off, so restore them here. Class
 * specificity (0,1,0) outranks the universal selector in section 2.
 *
 * This covers the numbered markers in <Steps>, avatars, and the assistant's
 * send button, all of which the theme draws with `rounded-full`.
 * ------------------------------------------------------------------------ */
[class~="rounded-full"],
[class~="rounded-full!"] {
  border-radius: 9999px !important;
}

/* Prose and LaTeX list bullets, drawn as `::before` dots rather than markers. */
.prose :where(ul > li)::before,
.prose-sm :where(ul > li)::before,
.latex-style ul > li::before {
  border-radius: 50% !important;
}

/* ===========================================================================
 * Official SDKs list (introduction.mdx, snippets/sdk-row.jsx)
 *
 * One SDK per full-width row: logo, name, copyable install command, arrow.
 * The whole row links to the GitHub repo through a "stretched link" — the
 * name's ::after covers the row — while the install button sits above that
 * overlay, so copying never navigates and no interactive element is nested
 * inside another.
 * ======================================================================== */
.sdk-list {
  --sdk-fg: rgb(24 14 19);
  --sdk-muted: rgb(24 14 19 / 0.55);
  --sdk-line: rgb(60 20 35 / 0.1);
  --sdk-hover: rgb(236 16 75 / 0.035);
  --sdk-code-bg: rgb(60 20 35 / 0.035);
  --sdk-code-line: rgb(60 20 35 / 0.12);
  --sdk-accent: #d00e43;
  --sdk-ease: cubic-bezier(0.22, 1, 0.36, 1);

  margin: 1.25rem 0 2.5rem;
  border-top: 1px solid var(--sdk-line);
}

.dark .sdk-list {
  --sdk-fg: rgb(250 242 245);
  --sdk-muted: rgb(250 242 245 / 0.5);
  --sdk-line: rgb(255 225 235 / 0.09);
  --sdk-hover: rgb(240 64 112 / 0.05);
  --sdk-code-bg: rgb(255 225 235 / 0.035);
  --sdk-code-line: rgb(255 225 235 / 0.1);
  --sdk-accent: #f04070;
}

.sdk-row {
  position: relative;
  display: grid;
  grid-template-columns: 1.25rem 8.75rem minmax(0, 1fr) 1rem;
  align-items: center;
  column-gap: 1rem;
  padding: 0.875rem 0.75rem;
  border-bottom: 1px solid var(--sdk-line);
  transition: background-color 180ms var(--sdk-ease);
}

.sdk-row:hover {
  background-color: var(--sdk-hover);
}

.sdk-row:has(.sdk-row__name:focus-visible) {
  outline: 2px solid var(--sdk-accent);
  outline-offset: -2px;
}

.sdk-row__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--sdk-muted);
  transition: color 180ms var(--sdk-ease);
}

/* Mintlify's <Icon> paints through a mask with its own gray; follow the row. */
.sdk-row__logo svg,
.sdk-row__logo span {
  background-color: currentColor !important;
}

.sdk-row:hover .sdk-row__logo {
  color: var(--sdk-fg);
}

.sdk-row__name {
  /* Mintlify's .link makes anchors relative, which would trap the ::after
   * overlay inside the name instead of letting it span the row. Its z-index
   * matters too: grid items stack even when static, so .link's z-index: 10
   * would lift the overlay above the install button. */
  position: static !important;
  z-index: auto !important;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--sdk-fg);
  text-decoration: none;
  white-space: nowrap;
}

.sdk-row__name:focus-visible {
  outline: none;
}

.sdk-row__name::after {
  content: "";
  position: absolute;
  inset: 0;
}

.sdk-row__install {
  position: relative;
  z-index: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  max-width: 100%;
  min-width: 0;
  padding: 0.3125rem 0.5rem 0.3125rem 0.625rem;
  border: 1px solid var(--sdk-code-line);
  background: var(--sdk-code-bg);
  color: var(--sdk-fg);
  cursor: pointer;
  transition: border-color 180ms var(--sdk-ease);
}

.sdk-row__install:hover {
  border-color: var(--sdk-accent);
}

.sdk-row__install:focus-visible {
  outline: 2px solid var(--sdk-accent);
  outline-offset: 2px;
}

.sdk-row__install code {
  /* Undo Mintlify's inline-code chip; the button is the chip. */
  padding: 0 !important;
  border: 0 !important;
  background: none !important;
  color: inherit !important;
  overflow: hidden;
  font-size: 0.8125rem;
  line-height: 1.4;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sdk-row__copy {
  display: flex;
  flex-shrink: 0;
  color: var(--sdk-muted);
  transition: color 180ms var(--sdk-ease);
}

.sdk-row__install:hover .sdk-row__copy,
.sdk-row__copy[data-copied="true"] {
  color: var(--sdk-accent);
}

.sdk-row__arrow {
  color: var(--sdk-muted);
  transition:
    transform 220ms var(--sdk-ease),
    color 180ms var(--sdk-ease);
}

.sdk-row:hover .sdk-row__arrow {
  color: var(--sdk-accent);
  transform: translate(2px, -2px);
}

.sdk-row__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Inline variant, used on the SDK guide pages: a sentence leads into the
 * row, so the row sits close under that sentence and keeps the ordinary
 * paragraph gap below it. */
.sdk-list--inline {
  margin: 0 0 1.25rem;
}

/* Mintlify renders MDX paragraphs as block <span>s, so match any element. */
:has(+ .sdk-list--inline) {
  margin-bottom: 0.625rem !important;
}

/* Narrow screens: the install command drops under the name, full width. */
@media (max-width: 640px) {
  .sdk-row {
    grid-template-columns: 1.25rem minmax(0, 1fr) 1rem;
    row-gap: 0.625rem;
    padding: 0.875rem 0.5rem;
  }

  .sdk-row__install {
    grid-row: 2;
    grid-column: 2 / 4;
    justify-self: stretch;
    justify-content: space-between;
    min-height: 2.75rem;
    padding-block: 0.5rem;
    text-align: left;
  }

  /* Wrap long commands rather than truncate them; the full text is readable. */
  .sdk-row__install code {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sdk-row,
  .sdk-row__logo,
  .sdk-row__install,
  .sdk-row__copy,
  .sdk-row__arrow {
    transition: none;
  }

  .sdk-row:hover .sdk-row__arrow {
    transform: none;
  }
}

/* ===========================================================================
 * Code blocks marked `wrap`
 *
 * Mintlify honours the `wrap` meta by putting `whitespace-pre-wrap` on the
 * block's wrapper, but the Shiki <pre> inside sets `white-space: pre` and
 * wins, so long lines still scroll. Let the <pre> follow its wrapper. Blocks
 * without `wrap` get `whitespace-pre` on the wrapper and are unaffected.
 * ======================================================================== */
.whitespace-pre-wrap > pre.shiki,
.whitespace-pre-wrap > pre.shiki code {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere;
}