/*
 * Solibo brand for the just-the-docs sites (sdk.solibo.no, mcp.solibo.no).
 *
 * Loaded from each site's head_custom.html as https://developers.solibo.no/brand/docs.css, after
 * the theme stylesheet (and after the SDK's code-examples.css), so a rule here wins over the theme
 * at equal specificity. It restyles just-the-docs v0.10.1 in place: the theme's layout,
 * breakpoints and markup stay as they are. The theme has no custom properties and sets many font
 * sizes with !important, so those are matched with !important here.
 *
 * Every colour is a --sb- custom property on :root. The values mirror the developer portal
 * (packages/shell/src/brand.css and styles.css); the dark block only redefines properties.
 * url() references are relative to this file: fonts/ and mark.svg sit next to it.
 */

@font-face {
  font-display: swap;
  font-family: 'Geist Variable';
  font-style: normal;
  font-weight: 100 900;
  src:
    url('fonts/geist.woff2') format('woff2-variations'),
    url('fonts/geist.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-display: swap;
  font-family: 'Geist Mono Variable';
  font-style: normal;
  font-weight: 100 900;
  src:
    url('fonts/geist-mono.woff2') format('woff2-variations'),
    url('fonts/geist-mono.woff2') format('woff2');
  unicode-range:
    U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

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

:root {
  --sb-color-scheme: light;

  /* Surfaces */
  --sb-page: #f7f7e1;
  --sb-surface: #ffffff;
  --sb-raised: #eff1ee;
  --sb-hover: #eff1ee;
  --sb-selected: #f8fac0;
  --sb-selected-ink: #202b1b;

  /* Ink */
  --sb-ink: #202b1b;
  --sb-ink-secondary: #373737;
  --sb-ink-tertiary: #525252;
  --sb-eyebrow: #4a6344;
  --sb-link: #0b4ad5;
  --sb-link-hover: #0c2764;
  --sb-link-underline: rgba(11, 74, 213, 0.4);
  --sb-search-hit: #b8c7b3;

  /* Lines */
  --sb-border: #d9e0d7;
  --sb-border-strong: #90aa88;
  --sb-focus: #7d8233;

  /* Brand accents (fixed in both schemes) */
  --sb-highlight: #cde517;
  --sb-highlight-hover: #dff17a;
  --sb-highlight-ink: #202b1b;
  --sb-mark: var(--sb-highlight);

  /* Header bar */
  --sb-bar-bg: #202b1b;
  --sb-bar-ink: #f7f7e1;
  --sb-bar-muted: #b8c7b3;
  --sb-bar-line: #263821;
  --sb-bar-link: #d0d2bd;
  --sb-bar-hover: #363f2f;
  --sb-bar-focus: #cde517;

  /* Primary button */
  --sb-primary: #202b1b;
  --sb-primary-ink: #f8fac0;
  --sb-primary-hover: #263821;

  /* Callouts */
  --sb-info: #e8f1ff;
  --sb-info-edge: #abc5ff;
  --sb-warning: #f8fac0;
  --sb-warning-edge: #7d8233;
  --sb-success: #d9e0d7;
  --sb-success-edge: #90aa88;
  --sb-error: #fff4f2;
  --sb-error-ink: #43100b;

  /* Code blocks: dark in both schemes, so the token colours never change */
  --sb-code-bg: #263821;
  --sb-code-border: #263821;
  --sb-code-ink: #f7f7e1;
  --sb-code-line: rgba(247, 247, 225, 0.08);
  --sb-code-copy-border: #65715b;
  --sb-code-copy-hover: #3f4f38;
  --sb-code-focus: #cde517;
  --sb-code-comment: #b8c7b3;
  --sb-code-punctuation: #d9e0d7;
  --sb-code-keyword: #abc5ff;
  --sb-code-constant: #f1cda7;
  --sb-code-string: #f8fac0;
  --sb-code-function: #cde517;

  /* Mermaid draws with its own light default theme, so its frame stays light */
  --sb-diagram-bg: #ffffff;
  --sb-diagram-ink: #202b1b;

  /* Depth */
  --sb-shadow: 0 1px 2px rgba(32, 43, 27, 0.08), 0 8px 24px rgba(32, 43, 27, 0.12);
  --sb-scrim: rgba(12, 15, 11, 0.4);

  /* Type */
  --sb-font-sans: 'Geist Variable', 'Geist', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  --sb-font-mono: 'Geist Mono Variable', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --sb-font-headline: 'Degular', var(--sb-font-sans);
  --sb-headline-weight: 500;

  /* Shape and motion */
  --sb-header-height: 3.75rem;
  --sb-radius-sm: 4px;
  --sb-radius-md: 8px;
  --sb-radius-lg: 12px;
  --sb-radius-full: 32px;
  --sb-transition: 250ms;
}

/* Screen only: printing a dark page would put nature-white text on white paper. */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --sb-color-scheme: dark;

    --sb-page: #0c0f0b;
    --sb-surface: #151b13;
    --sb-raised: #1b2418;
    --sb-hover: #1f2a1c;
    --sb-selected: #263821;
    --sb-selected-ink: #f7f7e1;

    --sb-ink: #f7f7e1;
    --sb-ink-secondary: #d9e0d7;
    --sb-ink-tertiary: #b8c7b3;
    --sb-eyebrow: #b8c7b3;
    --sb-link: #abc5ff;
    --sb-link-hover: #c9dcff;
    --sb-link-underline: rgba(171, 197, 255, 0.4);
    --sb-search-hit: #263821;

    --sb-border: #2c3a28;
    --sb-border-strong: #4a6344;
    --sb-focus: #cde517;

    --sb-bar-bg: #0c0f0b;
    --sb-bar-line: #2c3a28;
    --sb-bar-link: #cdcdba;
    --sb-bar-hover: #242620;

    --sb-primary: #cde517;
    --sb-primary-ink: #202b1b;
    --sb-primary-hover: #dff17a;

    --sb-info: #14203a;
    --sb-info-edge: #296afa;
    --sb-warning: #151b13;
    --sb-success: #263821;
    --sb-success-edge: #698c5f;
    --sb-error: #2d0906;
    --sb-error-ink: #f8e2de;

    --sb-code-bg: #0a0d09;
    --sb-code-border: #1f2a1c;
    --sb-code-copy-border: #51534a;
    --sb-code-copy-hover: #262923;

    --sb-diagram-bg: #f7f7e1;

    --sb-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px rgba(0, 0, 0, 0.5);
    --sb-scrim: rgba(0, 0, 0, 0.6);
  }
}

/* Paper: no dark bands, and code in dark ink on white. */
@media print {
  :root {
    --sb-bar-bg: #ffffff;
    --sb-bar-ink: #202b1b;
    --sb-bar-line: #d9e0d7;
    --sb-mark: #202b1b;
    --sb-code-bg: #ffffff;
    --sb-code-border: #d9e0d7;
    --sb-code-ink: #202b1b;
    --sb-code-comment: #525252;
    --sb-code-punctuation: #373737;
    --sb-code-keyword: #0c3797;
    --sb-code-constant: #885716;
    --sb-code-string: #4a6344;
    --sb-code-function: #202b1b;
  }
}

/* -------------------------------------------------------------------- base */

:root {
  color-scheme: var(--sb-color-scheme);
}

/* The theme drops the root to 14px on phones; the portal reads at 16px everywhere. */
html {
  font-size: 1rem !important;
}

body {
  background: var(--sb-page);
  color: var(--sb-ink);
  font-family: var(--sb-font-sans);
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--sb-link);
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--sb-focus);
  outline-offset: 2px;
}

a.skip-to-main:focus,
a.skip-to-main:active {
  background-color: var(--sb-surface);
  border: 2px solid var(--sb-focus);
  border-radius: var(--sb-radius-md);
  color: var(--sb-ink);
}

/* ------------------------------------------------------------ header band */

/*
 * The portal's dark-green header is two theme boxes here: .site-header at the top of the sidebar
 * and #main-header beside it. From 800px the band is completed behind them: the sidebar's own
 * top (its left gutter from 1064px) and the page right of the 50rem content column. The theme's
 * header does not stick, so the band scrolls with the page while the sidebar's part stays.
 */
@media (min-width: 50rem) {
  body {
    background:
      linear-gradient(to bottom, var(--sb-bar-bg) calc(100% - 1px), var(--sb-bar-line) 0) 0 0 / 100%
        var(--sb-header-height) no-repeat,
      var(--sb-page);
  }
}

.side-bar {
  background-color: var(--sb-page);
}

@media (min-width: 50rem) {
  .side-bar {
    background:
      linear-gradient(to bottom, var(--sb-bar-bg) calc(100% - 1px), var(--sb-bar-line) 0) 0 0 / 100%
        var(--sb-header-height) no-repeat,
      var(--sb-page);
    border-right: 0;
    /* An inset line instead of the border, so the dark header shows no seam at the column edge. */
    box-shadow: inset -1px 0 0 var(--sb-border);
  }
}

/* The theme draws this line from 800px only; on a dark phone page it keeps the bar apart. */
.site-header {
  background-color: var(--sb-bar-bg);
  border-bottom: 1px solid var(--sb-bar-line);
  color: var(--sb-bar-ink);
}

.site-title {
  color: var(--sb-bar-ink);
  font-family: var(--sb-font-headline);
  font-size: 1.125rem !important;
  font-weight: var(--sb-headline-weight);
  gap: 0.5rem;
  letter-spacing: -0.01em;
}

@media (min-width: 31.25rem) {
  .site-title {
    font-size: 1.25rem !important;
  }
}

/* The sidebar is 15.5rem wide from 800px; keep 'Solibo Home MCP' on one line beside the mark. */
@media (min-width: 50rem) {
  .site-title {
    font-size: 1.125rem !important;
    padding-right: 1rem;
  }
}

@media (min-width: 66.5rem) {
  .site-title {
    font-size: 1.25rem !important;
  }
}

.site-title:hover {
  background-image: none;
  color: var(--sb-bar-ink);
}

.site-title:focus-visible {
  outline-color: var(--sb-bar-focus);
  outline-offset: -4px;
}

/* The Solibo mark, painted through mark.svg so its colour is a token. */
.site-title::before {
  background-color: var(--sb-mark);
  content: '';
  flex: 0 0 auto;
  height: 1.75rem;
  -webkit-mask: url('mark.svg') center / contain no-repeat;
  mask: url('mark.svg') center / contain no-repeat;
  width: 1.75rem;
}

/* Hamburger (below 800px): the portal's outlined Menu pill. */
.site-header .site-button {
  align-self: center;
  border: 1px solid var(--sb-bar-muted);
  border-radius: var(--sb-radius-full);
  color: var(--sb-bar-ink);
  height: 2.5rem;
  margin-right: 1rem;
  padding: 0 0.875rem;
  transition: background-color var(--sb-transition);
}

.site-header .site-button:hover,
#menu-button.nav-open {
  background-color: var(--sb-bar-hover);
  background-image: none;
}

.site-header .site-button:focus-visible {
  outline-color: var(--sb-bar-focus);
}

#menu-button .icon {
  color: var(--sb-bar-ink);
  height: 1.25rem;
  width: 1.25rem;
}

/* Below 800px #main-header is the lower half of the open menu; from 800px it is the bar. */
.main-header {
  border-bottom-color: var(--sb-border);
  border-top: 1px solid var(--sb-border);
}

.side-bar + .main .main-header {
  background-color: var(--sb-page);
}

@media (min-width: 50rem) {
  .main-header {
    border-bottom-color: var(--sb-bar-line);
    border-top: 0;
  }

  .side-bar + .main .main-header {
    background-color: var(--sb-bar-bg);
  }
}

/* ---------------------------------------------------------------- side nav */

@media (min-width: 50rem) {
  .site-nav {
    padding-top: 1.5rem;
  }
}

/* The portal's sidebar links: block links with an 8px radius, and a selected pill. */
.nav-list .nav-list-item .nav-list-link {
  border-radius: var(--sb-radius-md);
  color: var(--sb-ink-secondary);
  margin: 0 0.5rem;
  padding-left: 0.5rem;
  padding-right: 2.5rem;
  transition:
    background-color var(--sb-transition),
    color var(--sb-transition);
}

@media (min-width: 50rem) {
  .nav-list .nav-list-item .nav-list-link {
    margin: 1px 1rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
}

.nav-list .nav-list-item .nav-list-link:hover {
  background-color: var(--sb-hover);
  background-image: none;
  color: var(--sb-ink);
}

/* just-the-docs.js adds .active and removes the href of the current page's link. */
.nav-list .nav-list-item .nav-list-link.active {
  background-color: var(--sb-selected);
  background-image: none;
  color: var(--sb-selected-ink);
  font-weight: 600;
}

.nav-list .nav-list-item .nav-list-link:focus-visible {
  outline-offset: 0;
}

/* Child pages, expanders and categories are compiled but unused on both sites today. */
.nav-list .nav-list-item > .nav-list .nav-list-item .nav-list-link,
.nav-list.nav-category-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link {
  color: var(--sb-ink-secondary);
}

.nav-list .nav-list-item .nav-list-expander,
.nav-list .nav-list-item > .nav-list .nav-list-item .nav-list-expander,
.nav-list.nav-category-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-expander {
  border-radius: var(--sb-radius-md);
  color: var(--sb-ink-tertiary);
}

.nav-list .nav-list-item .nav-list-expander:hover {
  background-color: var(--sb-hover);
  background-image: none;
}

.nav-category {
  border-bottom-color: var(--sb-border);
  color: var(--sb-eyebrow);
  letter-spacing: 0.08em;
}

.breadcrumb-nav-list-item::after {
  color: var(--sb-ink-tertiary);
}

/* ----------------------------------------------------------------- aux nav */

/* In the open phone menu: quiet pills on the page. */
.aux-nav .aux-nav-list {
  gap: 0.25rem;
  padding: 0.25rem 0.5rem 0.5rem;
}

.aux-nav .site-button {
  border-radius: var(--sb-radius-md);
  color: var(--sb-ink-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  height: auto;
  padding: 0.5rem 0.75rem;
  text-decoration: none;
  transition:
    background-color var(--sb-transition),
    color var(--sb-transition);
  white-space: nowrap;
}

.aux-nav .site-button:hover {
  background-color: var(--sb-hover);
  background-image: none;
  color: var(--sb-ink);
}

/* Every aux link leaves the docs site, like the portal's tool links. */
.aux-nav .site-button::after {
  content: '\2197' / '';
  font-weight: 400;
  margin-left: 0.25em;
  opacity: 0.7;
}

/* From 800px: the portal header's nav links on the dark bar. */
@media (min-width: 50rem) {
  .aux-nav .aux-nav-list {
    align-items: center;
    gap: 2px;
    padding: 0;
  }

  .aux-nav .aux-nav-list-item {
    align-items: center;
    display: flex;
  }

  .aux-nav .site-button {
    border-radius: var(--sb-radius-full);
    color: var(--sb-bar-link);
    padding: 0.25rem 0.5rem;
  }

  .aux-nav .site-button:hover {
    background-color: var(--sb-bar-hover);
    color: var(--sb-bar-ink);
  }

  .aux-nav .site-button:focus-visible {
    outline-color: var(--sb-bar-focus);
  }
}

/* ------------------------------------------------------------------ search */

/* Phones: a pill field in the open menu, and a full-width sheet while searching. */
.search-input-wrap {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-full);
  box-shadow: none;
}

.search-active .search-input-wrap {
  border-radius: 0;
  border-width: 0 0 1px;
}

.search-input,
.search-active .search-input {
  background-color: var(--sb-surface);
  color: var(--sb-ink);
}

.search-input::placeholder {
  color: var(--sb-ink-tertiary);
  opacity: 1;
}

/* The theme removes the focus outline and puts nothing in its place. */
.search-input:focus-visible {
  outline: 2px solid var(--sb-focus);
  outline-offset: -2px;
}

.search-label .search-icon {
  color: var(--sb-ink-tertiary);
}

.search-input:focus + .search-label .search-icon {
  color: var(--sb-ink);
}

/* From 800px: a pill inside the dark bar. The wrap keeps the theme's !important geometry. */
@media (min-width: 50rem) {
  .search-input-wrap,
  .search-active .search-input-wrap {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .search-input,
  .search-active .search-input {
    background-color: var(--sb-bar-hover);
    border-radius: var(--sb-radius-full);
    color: var(--sb-bar-ink);
    height: 2.5rem;
    left: 1rem;
    padding-left: 2.75rem;
    top: calc((var(--sb-header-height) - 2.5rem) / 2);
    width: calc(100% - 2rem);
  }

  .search-label,
  .search-active .search-label {
    padding-left: 1.875rem;
  }

  .search-input::placeholder {
    color: var(--sb-bar-muted);
  }

  .search-input:focus-visible {
    outline-color: var(--sb-bar-focus);
  }

  .search-label .search-icon {
    color: var(--sb-bar-muted);
  }

  .search-input:focus + .search-label .search-icon {
    color: var(--sb-highlight);
  }
}

.search-results {
  background-color: var(--sb-surface);
  border-top: 1px solid var(--sb-border);
  box-shadow: var(--sb-shadow);
}

/* From 800px the list hangs from the bar under the pill: same left edge, same width. */
@media (min-width: 50rem) {
  .search-results {
    border: 1px solid var(--sb-border);
    border-radius: 0 0 var(--sb-radius-lg) var(--sb-radius-lg);
    border-top: 0;
    left: 1rem;
    width: calc(33.5rem - 2rem);
  }
}

.search-result {
  color: var(--sb-ink);
}

.search-result:hover {
  background-color: var(--sb-hover);
}

/* The arrow-key selection. */
.search-result.active {
  background-color: var(--sb-selected);
  color: var(--sb-selected-ink);
}

.search-result-doc .search-result-icon {
  color: var(--sb-eyebrow);
}

/* The parent page's line above a section hit. The theme dims it with opacity: 0.5, which leaves
   the 12px text near 3:1; tertiary ink keeps it quieter than the title and above 4.5:1. */
.search-result-doc.search-result-doc-parent {
  color: var(--sb-ink-tertiary);
  opacity: 1;
}

.search-result-doc-title {
  font-weight: 600;
}

.search-result-rel-url {
  color: var(--sb-ink-tertiary);
}

.search-result-previews {
  border-left-color: var(--sb-border);
  color: var(--sb-ink-secondary);
}

.search-result-highlight {
  background-color: var(--sb-search-hit);
  border-radius: 2px;
  color: var(--sb-ink);
}

/* On the arrow-key selection the hit background can match the row (dark mode), so the hit is
   also underlined there: visible without relying on colour. */
.search-result.active .search-result-highlight {
  color: var(--sb-selected-ink);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 2px;
}

.search-no-result {
  color: var(--sb-ink-secondary);
}

.search-overlay {
  background-color: var(--sb-scrim);
}

/* Unused on both sites (search.button is off), restyled in case it is switched on. */
.search-button {
  background-color: var(--sb-surface);
  border-color: var(--sb-border);
  box-shadow: var(--sb-shadow);
  color: var(--sb-ink);
}

/* --------------------------------------------------------------- headings */

h1,
h2,
h3,
h4,
h5,
h6,
#toctitle {
  color: var(--sb-ink);
}

.main-content h1,
.main-content h2,
.main-content h3 {
  font-family: var(--sb-font-headline);
  font-weight: var(--sb-headline-weight);
}

.main-content h1 {
  font-size: 2rem !important;
  letter-spacing: -0.015em;
  line-height: 1.1;
  margin-bottom: 0.75rem;
  text-wrap: balance;
}

/* The portal's h2 opens a section with a rule above it. */
.main-content h2 {
  border-top: 1px solid var(--sb-border);
  font-size: 1.25rem !important;
  line-height: 1.25;
  margin-bottom: 0.75rem;
  margin-top: 3rem;
  padding-top: 1.5rem;
}

/* Keep the h2 anchor icon level with the text, below the padding. */
.main-content h2 > .anchor-heading {
  height: calc(100% - 1.5rem);
  top: 1.5rem;
}

.main-content h3 {
  font-size: 1.125rem !important;
  line-height: 1.3;
  margin-bottom: 0.5rem;
  margin-top: 2rem;
}

.main-content h4 {
  font-size: 1rem !important;
  font-weight: 600;
  letter-spacing: normal;
  margin-bottom: 0.25rem;
  margin-top: 1.5rem;
  text-transform: none;
}

.main-content h5 {
  font-size: 0.875rem !important;
  font-weight: 600;
}

.main-content h6 {
  color: var(--sb-eyebrow);
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 66.5rem) {
  .main-content h1 {
    font-size: 2.5rem !important;
  }

  .main-content h2 {
    font-size: 1.5rem !important;
  }

  .main-content h3 {
    font-size: 1.25rem !important;
  }
}

.main-content .anchor-heading svg {
  color: var(--sb-ink-tertiary);
}

.main-content .anchor-heading:hover svg,
.main-content .anchor-heading:focus svg {
  color: var(--sb-link);
}

/* ------------------------------------------------------------------- prose */

.main-content strong,
.main-content b {
  font-weight: 600;
}

/* Prose links: always underlined, the line at 40% until hover. */
a:not([class]) {
  color: var(--sb-link);
  text-decoration: underline;
  text-decoration-color: var(--sb-link-underline);
  text-underline-offset: 2px;
  transition:
    color var(--sb-transition),
    text-decoration-color var(--sb-transition);
}

a:not([class]):hover {
  color: var(--sb-link-hover);
  text-decoration-color: var(--sb-link-hover);
}

.main-content ul > li::before {
  color: var(--sb-ink-tertiary);
}

.main-content ol > li::before {
  color: var(--sb-eyebrow);
  font-weight: 600;
}

hr {
  background-color: var(--sb-border);
}

/* Blockquotes read as the portal's info callout (MCP uses them for example prompts). */
blockquote,
.main-content blockquote {
  background-color: var(--sb-info);
  border-left: 4px solid var(--sb-info-edge);
  border-radius: var(--sb-radius-md);
  color: var(--sb-ink);
  margin: 1rem 0;
  padding: 0.75rem 1rem;
}

/* The portal's other callout tones, for authors: {: .warning } or {: .success } on a quote. */
blockquote.warning {
  background-color: var(--sb-warning);
  border-left-color: var(--sb-warning-edge);
}

blockquote.success {
  background-color: var(--sb-success);
  border-left-color: var(--sb-success-edge);
}

blockquote > :first-child {
  margin-top: 0;
}

blockquote > :last-child {
  margin-bottom: 0;
}

.main-content details {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  margin: 1rem 0;
  padding: 0.5rem 1rem;
}

.main-content summary {
  color: var(--sb-ink);
  font-weight: 600;
}

.main-content details[open] > summary {
  margin-bottom: 0.5rem;
}

/* ------------------------------------------------------------- inline code */

:not(pre, figure) > code {
  background-color: var(--sb-raised);
  border: 0;
  border-radius: var(--sb-radius-sm);
  font-family: var(--sb-font-mono);
  font-size: 0.9em;
  /* A long identifier wraps instead of widening the page on a phone. */
  overflow-wrap: anywhere;
  padding: 0.1em 0.35em;
}

/* In tables the wrapper scrolls, so identifiers stay whole there. */
.table-wrapper :not(pre, figure) > code {
  overflow-wrap: break-word;
}

/* Header code is usually a direct child of th. It keeps its case and spacing, and takes the
   surface colour so the pill still shows on the raised header row. */
th code {
  background-color: var(--sb-surface);
  letter-spacing: normal;
  text-transform: none;
}

/* ------------------------------------------------------------- code blocks */

/* Markup: div.language-X.highlighter-rouge > div.highlight > pre.highlight > code, plus the
   copy button just-the-docs.js appends to the outer div. */
.highlight,
pre.highlight,
.highlight pre {
  background: var(--sb-code-bg);
  color: var(--sb-code-ink);
}

div.highlighter-rouge,
figure.highlight {
  background-color: var(--sb-code-bg);
  border: 1px solid var(--sb-code-border);
  border-radius: var(--sb-radius-lg);
  color: var(--sb-code-ink);
  margin-bottom: 1rem;
}

/* The outer box paints the rounded background; the inner boxes stay clear of its corners. */
div.highlighter-rouge .highlight,
div.highlighter-rouge pre.highlight,
figure.highlight pre {
  background: none;
}

/* The right padding keeps the copy button (shown on hover) clear of a first line scrolled to its
   end. */
div.highlighter-rouge div.highlight {
  padding: 1rem 3.25rem 1rem 1rem;
}

/* Set on pre itself: the theme's 16px pre line box is what spaced the old 12px code out. */
div.highlighter-rouge pre.highlight,
figure.highlight pre {
  font-family: var(--sb-font-mono);
  font-size: 0.8125rem;
  line-height: 1.6;
  tab-size: 2;
}

pre code {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
}

/* Rouge tokens, mapped from the portal's Prism palette. */
.highlight .hll {
  background-color: var(--sb-code-line);
}

.highlight .c,
.highlight .ch,
.highlight .cd,
.highlight .cm,
.highlight .cp,
.highlight .cpf,
.highlight .c1,
.highlight .cs {
  color: var(--sb-code-comment);
  font-style: italic;
}

.highlight .p,
.highlight .o,
.highlight .ow,
.highlight .ni {
  color: var(--sb-code-punctuation);
}

.highlight .k,
.highlight .kd,
.highlight .kn,
.highlight .kp,
.highlight .kr,
.highlight .kt,
.highlight .nd {
  color: var(--sb-code-keyword);
}

.highlight .kc,
.highlight .m,
.highlight .mb,
.highlight .mf,
.highlight .mh,
.highlight .mi,
.highlight .mo,
.highlight .mx,
.highlight .il,
.highlight .nt,
.highlight .no,
.highlight .nv,
.highlight .vc,
.highlight .vg,
.highlight .vi,
.highlight .vm,
.highlight .py,
.highlight .sr,
.highlight .gd {
  color: var(--sb-code-constant);
}

.highlight .s,
.highlight .sa,
.highlight .sb,
.highlight .sc,
.highlight .dl,
.highlight .sd,
.highlight .s1,
.highlight .s2,
.highlight .se,
.highlight .sh,
.highlight .si,
.highlight .sx,
.highlight .ss,
.highlight .l,
.highlight .ld,
.highlight .na,
.highlight .nb,
.highlight .bp,
.highlight .gi {
  color: var(--sb-code-string);
}

.highlight .nf,
.highlight .fm,
.highlight .nc,
.highlight .ne {
  color: var(--sb-code-function);
}

.highlight .n,
.highlight .nx,
.highlight .nn,
.highlight .nl,
.highlight .w,
.highlight .gh,
.highlight .gu {
  color: var(--sb-code-ink);
}

/* JSON keys are Prism's property colour; true, false and null its constants. */
.highlight .language-json .w + .s2,
.highlight .language-json .kc {
  color: var(--sb-code-constant);
}

/* Rouge's Kotlin lexer flags valid code (the brace in `object : Foo {`); do not paint it red. */
.highlight .err {
  background: none;
  color: var(--sb-code-ink);
}

/* Line-number tables (unused today). */
.highlight .table-wrapper td,
.highlight .table-wrapper pre {
  background: none;
  color: var(--sb-code-comment);
}

/* Copy button: the portal's outlined pill on the code background. */
div.highlighter-rouge > button,
figure.highlight > button {
  background-color: var(--sb-code-bg);
  border: 1px solid var(--sb-code-copy-border);
  border-radius: var(--sb-radius-full);
  box-sizing: border-box;
  color: var(--sb-code-ink);
  line-height: 0;
  padding: 0.375rem 0.625rem;
  right: 0.5rem;
  top: 0.5rem;
  transition:
    background-color var(--sb-transition),
    opacity var(--sb-transition);
  width: auto;
}

div.highlighter-rouge > button svg,
figure.highlight > button svg {
  display: block;
  fill: var(--sb-code-ink);
  height: 0.875rem;
  width: 0.875rem;
}

div.highlighter-rouge > button:hover,
figure.highlight > button:hover {
  background-color: var(--sb-code-copy-hover);
}

div.highlighter-rouge > button:focus-visible,
figure.highlight > button:focus-visible {
  outline: 2px solid var(--sb-code-focus);
  outline-offset: 2px;
}

/* Touch screens have no hover to reveal it, so it is always shown, in a band above the code. */
@media (hover: none) {
  div.highlighter-rouge > button,
  figure.highlight > button {
    opacity: 1;
  }

  div.highlighter-rouge div.highlight {
    padding-right: 1rem;
    padding-top: 2.75rem;
  }
}

/* ------------------------------------------------------------------ tables */

/* The portal's .sd-tablewrap / .sd-table. The wrapper scrolls, so a wide table never widens the
   page. */
.table-wrapper {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  box-shadow: none;
  margin-bottom: 1rem;
}

table {
  border-collapse: collapse;
}

th,
td {
  background-color: var(--sb-surface);
  border-bottom: 1px solid var(--sb-border);
  border-left: 0;
  color: var(--sb-ink);
  font-size: 0.875rem !important;
  text-align: start;
  vertical-align: top;
}

th {
  background-color: var(--sb-raised);
  color: var(--sb-eyebrow);
  font-size: 0.75rem !important;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

thead th {
  border-bottom-color: var(--sb-border);
}

tbody tr:last-of-type td {
  padding-bottom: 0.5rem;
}

/* ------------------------------------------------------- labels and buttons */

/* Unused on both sites today; restyled so new pages do not bring back the theme's purple. */
.label:not(g),
.label-blue:not(g) {
  background-color: var(--sb-info);
  border-radius: var(--sb-radius-full);
  color: var(--sb-ink);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.label-green:not(g) {
  background-color: var(--sb-success);
  color: var(--sb-ink);
}

.label-purple:not(g) {
  background-color: var(--sb-selected);
  color: var(--sb-selected-ink);
}

.label-red:not(g) {
  background-color: var(--sb-error);
  color: var(--sb-error-ink);
}

.label-yellow:not(g) {
  background-color: var(--sb-highlight);
  color: var(--sb-highlight-ink);
}

.btn {
  background-color: var(--sb-surface);
  background-image: none;
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-full);
  box-shadow: none;
  color: var(--sb-ink);
  font-weight: 600;
  transition:
    background-color var(--sb-transition),
    border-color var(--sb-transition);
}

.btn:hover,
.btn:active,
.btn.selected,
.btn.selected:hover {
  background-color: var(--sb-hover);
  background-image: none;
  box-shadow: none;
  color: var(--sb-ink);
}

.btn:focus,
.btn:focus:hover,
.btn.selected:focus,
.btn-outline:focus,
.btn-outline:focus:hover,
.btn-outline.selected:focus {
  box-shadow: none;
}

.btn:focus-visible {
  outline: 2px solid var(--sb-focus);
  outline-offset: 2px;
}

.btn-outline,
.btn-outline:hover,
.btn-outline:active {
  border-color: var(--sb-border-strong);
  box-shadow: none;
  color: var(--sb-ink);
}

.btn-outline {
  background: none;
}

.btn-outline:hover,
.btn-outline:active {
  background-color: var(--sb-hover);
}

.btn-primary,
.btn-purple {
  background-color: var(--sb-primary);
  border-color: var(--sb-primary);
  color: var(--sb-primary-ink);
}

.btn-primary:hover,
.btn-primary:active,
.btn-primary.selected,
.btn-primary.selected:hover,
.btn-purple:hover,
.btn-purple:active,
.btn-purple.selected,
.btn-purple.selected:hover {
  background-color: var(--sb-primary-hover);
  background-image: none;
  border-color: var(--sb-primary-hover);
  box-shadow: none;
  color: var(--sb-primary-ink);
}

.btn-blue,
.btn-blue:hover,
.btn-blue:active,
.btn-blue.selected,
.btn-blue.selected:hover {
  background-color: var(--sb-info);
  background-image: none;
  border-color: var(--sb-info-edge);
  box-shadow: none;
  color: var(--sb-ink);
}

.btn-green {
  background-color: var(--sb-highlight);
  border-color: var(--sb-highlight);
  color: var(--sb-highlight-ink);
}

.btn-green:hover,
.btn-green:active,
.btn-green.selected,
.btn-green.selected:hover {
  background-color: var(--sb-highlight-hover);
  background-image: none;
  border-color: var(--sb-highlight-hover);
  box-shadow: none;
  color: var(--sb-highlight-ink);
}

.btn:disabled,
.btn:disabled:hover,
.btn.disabled,
.btn.disabled:hover {
  background-color: var(--sb-raised);
  background-image: none;
  border-color: var(--sb-border);
  box-shadow: none;
  color: var(--sb-ink-tertiary);
}

/* ----------------------------------------- SDK: Kotlin / TypeScript switch */

/*
 * code-examples.js inserts .code-language-controls.code-language-global after the first h1:
 * span, three buttons, small. Restyled as the portal's .sd-langswitch: a sticky strip on the
 * page background with an eyebrow label and a segmented pill track. The buttons are siblings
 * with no track element, so the track is drawn from their borders and the pressed pill is a
 * ::before inset 2px inside it. The pill is filled with the primary colour: the portal's
 * selected fill is too close to the track (under 1.4:1) to mark the state on its own.
 */
.code-language-global {
  background-color: var(--sb-page);
  border: 0;
  border-bottom: 1px solid var(--sb-border);
  border-radius: 0;
  color: var(--sb-ink);
  padding: 0.5rem 0;
  /* The theme's search (z-index 2) and its overlay (1, later in the page) must cover the strip;
     code-examples.css puts it at 10, above the search results. */
  z-index: 1;
}

.code-language-controls {
  column-gap: 0;
  row-gap: 0.375rem;
}

.code-language-controls > span {
  color: var(--sb-eyebrow);
  flex-basis: 100%;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

@media (min-width: 31.25rem) {
  .code-language-controls > span {
    flex-basis: auto;
    margin-right: 0.75rem;
  }
}

/* Below 500px the hint would add two more rows to the sticky strip (116px tall on a phone). */
.code-language-controls small {
  color: var(--sb-ink-tertiary);
  display: none;
  font-size: 0.75rem;
}

@media (min-width: 31.25rem) {
  .code-language-controls small {
    display: block;
  }
}

.code-language-controls button {
  background-color: var(--sb-surface);
  border: 1px solid var(--sb-border);
  border-left-width: 0;
  border-radius: 0;
  border-right-width: 0;
  box-shadow: none;
  color: var(--sb-ink-secondary);
  font-size: 0.875rem;
  font-weight: 600;
  isolation: isolate;
  line-height: 1.25rem;
  margin: 0;
  padding: 0.25rem 0.875rem;
  position: relative;
  transition: color var(--sb-transition);
}

.code-language-controls button:first-of-type {
  border-left-width: 1px;
  border-radius: var(--sb-radius-full) 0 0 var(--sb-radius-full);
}

.code-language-controls button:last-of-type {
  border-radius: 0 var(--sb-radius-full) var(--sb-radius-full) 0;
  border-right-width: 1px;
}

.code-language-controls button::before {
  border-radius: var(--sb-radius-full);
  bottom: 2px;
  content: '';
  left: 1px;
  position: absolute;
  right: 1px;
  top: 2px;
  transition: background-color var(--sb-transition);
  z-index: -1;
}

.code-language-controls button:first-of-type::before {
  left: 2px;
}

.code-language-controls button:last-of-type::before {
  right: 2px;
}

.code-language-controls button:hover {
  color: var(--sb-ink);
}

.code-language-controls button[aria-pressed='true'] {
  box-shadow: none;
  color: var(--sb-primary-ink);
  font-weight: 600;
}

.code-language-controls button[aria-pressed='true']::before {
  background-color: var(--sb-primary);
}

.code-language-controls button:focus-visible {
  outline: 2px solid var(--sb-focus);
  outline-offset: 2px;
  z-index: 1;
}

/* Forced colours remove the ::before fill, the only pressed cue, so the pressed button draws it
   in system colours and keeps the other buttons' face, border and focus ring. */
@media (forced-colors: active) {
  .code-language-controls button[aria-pressed='true'] {
    background-color: ButtonFace;
    border-color: ButtonBorder;
    color: HighlightText;
    forced-color-adjust: none;
  }

  .code-language-controls button[aria-pressed='true']::before {
    background-color: Highlight;
    forced-color-adjust: none;
  }

  .code-language-controls button[aria-pressed='true']:focus-visible {
    outline-color: CanvasText;
  }
}

/* The strip sticks to the top of the viewport, so a #fragment jump (TOC, search result, deep
   link) would land its heading underneath. The strip is about 72px tall at every width once the
   hint is hidden on phones; code-examples.css only offsets headings inside example panels. */
.main-content:has(.code-language-global) :is(h1, h2, h3, h4, h5, h6)[id] {
  scroll-margin-top: 5.5rem;
}

/* ----------------------------------------------------------------- mermaid */

/* Only the frame: mermaid colours its own SVG (theme it in docs/_includes/mermaid_config.js).
   mermaid.run() draws into each .language-mermaid element: kramdown emits pre > code for a
   language Rouge cannot highlight, or the highlighter-rouge wrapper if it can. */
.main-content pre:has(> code.language-mermaid),
div.language-mermaid.highlighter-rouge {
  background-color: var(--sb-diagram-bg);
  border: 1px solid var(--sb-border);
  border-radius: var(--sb-radius-lg);
  color: var(--sb-diagram-ink);
  margin-bottom: 1rem;
  overflow-x: auto;
  padding: 1rem;
}

div.language-mermaid .highlight,
div.language-mermaid pre.highlight {
  color: var(--sb-diagram-ink);
}

div.language-mermaid.highlighter-rouge > button {
  display: none;
}

/* ----------------------------------------------------------------- footers */

.site-footer {
  color: var(--sb-ink-tertiary);
}

.site-footer a {
  color: var(--sb-ink-tertiary);
  text-decoration-color: var(--sb-border-strong);
}

.site-footer a:hover {
  color: var(--sb-ink);
  text-decoration-color: var(--sb-ink);
}

/* 'Solibo AS' under every page; its utility classes are !important. */
.main-content > footer {
  color: var(--sb-ink-tertiary);
}

.main-content > footer .text-grey-dk-100 {
  color: var(--sb-ink-tertiary) !important;
}

/* ------------------------------------------------------------ motion, print */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    transition-duration: 0s !important;
  }
}

@media print {
  .side-bar {
    box-shadow: none;
  }

  div.highlighter-rouge pre.highlight {
    border: 0;
  }
}