/* ── Font: IBM Plex Sans via Google Fonts ─────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

body {
  --font-stack: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
                Helvetica, Arial, sans-serif;
  --font-stack--headings: var(--font-stack);
  --font-stack--monospace: "JetBrains Mono", monospace;
}

/* ── Typography & spacing ─────────────────────────────────────── */

.content p {
  line-height: 1.7;
}

.content h2 {
  margin-block-start: 2em;
  padding-block-end: 0.3em;
  border-block-end: 1px solid var(--color-background-border);
}

.content h3 {
  margin-block-start: 1.6em;
}

/* ── Code blocks ──────────────────────────────────────────────── */

.highlight pre {
  border-radius: 6px;
  padding: 1em;
}

.highlight {
  font-family: var(--font-stack--monospace);
  line-height: 1.5;
  font-variant-ligatures: contextual;
  font-feature-settings: "calt" 1, "liga" 1;
}

.content code.literal {
  padding-inline: 0.3em;
  padding-block: 0.1em;
  border-radius: 4px;
}

/* ── Tables ───────────────────────────────────────────────────── */

.content table {
  border-collapse: collapse;
  border-radius: 6px;
  overflow: hidden;
}

.content table td,
.content table th {
  padding: 0.6em 0.9em;
  border-block-end: 1px solid var(--color-background-border);
}

.content table th {
  font-weight: 600;
  text-align: start;
}

.content table tr:last-child td {
  border-block-end: none;
}

/* ── Admonitions (GitHub markdown-alert style) ────────────────── */

/* Furo paints a filled bar behind each title. GitHub does not: it keeps the
   coloured rule on the inline edge and colours the title text to match. */
body {
  --color-admonition-title-background:                  transparent;
  --color-admonition-title-background--note:            transparent;
  --color-admonition-title-background--tip:             transparent;
  --color-admonition-title-background--hint:            transparent;
  --color-admonition-title-background--important:       transparent;
  --color-admonition-title-background--warning:         transparent;
  --color-admonition-title-background--attention:       transparent;
  --color-admonition-title-background--caution:         transparent;
  --color-admonition-title-background--danger:          transparent;
  --color-admonition-title-background--error:           transparent;
  --color-admonition-title-background--seealso:         transparent;
  --color-admonition-title-background--admonition-todo: transparent;

  /* GitHub accent colours for border + icon + title text */
  --color-admonition-title--note:      #4493f8;
  --color-admonition-title--tip:       #3fb950;
  --color-admonition-title--hint:      #3fb950;
  --color-admonition-title--important: #ab7df8;
  --color-admonition-title--warning:   #d29922;
  --color-admonition-title--attention: #d29922;
  --color-admonition-title--caution:   #f85149;
  --color-admonition-title--danger:    #f85149;
  --color-admonition-title--error:     #f85149;
  --color-admonition-title--seealso:   #4493f8;
  --color-admonition-title:            #ab7df8;

  /* Match surrounding body text size (Furo defaults to 0.8125rem) */
  --admonition-font-size:       1rem;
  --admonition-title-font-size: 1rem;
}

.admonition {
  margin-block: 1em;
  padding: 0.5em 1em;
  border-radius: 0;
  border-inline-start-width: 0.25em;
  background: none;
  box-shadow: none;
  color: inherit;
  font-size: var(--admonition-font-size);
}

.admonition > .admonition-title {
  margin: 0 0 0.3em 0;
  padding: 0.4rem 0.5rem 0.4rem 2rem;
  background-color: transparent;
  font-size: var(--admonition-title-font-size);
  font-weight: 600;
}

.admonition.note > .admonition-title      { color: var(--color-admonition-title--note); }
.admonition.tip > .admonition-title       { color: var(--color-admonition-title--tip); }
.admonition.hint > .admonition-title      { color: var(--color-admonition-title--hint); }
.admonition.important > .admonition-title { color: var(--color-admonition-title--important); }
.admonition.warning > .admonition-title   { color: var(--color-admonition-title--warning); }
.admonition.attention > .admonition-title { color: var(--color-admonition-title--attention); }
.admonition.caution > .admonition-title   { color: var(--color-admonition-title--caution); }
.admonition.danger > .admonition-title    { color: var(--color-admonition-title--danger); }
.admonition.error > .admonition-title     { color: var(--color-admonition-title--error); }
.admonition.seealso > .admonition-title   { color: var(--color-admonition-title--seealso); }

/* ── Definition lists ─────────────────────────────────────────── */

dl dt {
  margin-block-start: 1.2em;
  font-weight: 600;
}

dl dd {
  margin-inline-start: 1.2em;
}

/* ── Sidebar navigation ───────────────────────────────────────── */

.sidebar-tree .caption {
  margin-block-start: 1.5em;
  opacity: 0.7;
  font-size: 0.8em;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Sidebar brand (name + release/source row) ────────────────── */

body {
  --tw-brand-gap:          0.4rem;
  --tw-brand-pad-block:    0.75rem;
  --tw-meta-gap:           0.5rem;
  --tw-meta-icon-size:     1rem;
  --tw-dot-size:           3px;
  --tw-dot-opacity:        0.4;
  --tw-version-font-size:  0.7rem;
  --tw-version-pad-inline: 0.38rem;
  --tw-version-pad-block:  0.05rem;
  --tw-version-radius:     4px;
  --tw-version-text:       var(--color-brand-primary);
  --tw-version-background: color-mix(in srgb, var(--color-brand-primary) 12%, transparent);
  --tw-version-border:     color-mix(in srgb, var(--color-brand-primary) 32%, transparent);
  --tw-version-background--hover: color-mix(in srgb, var(--color-brand-primary) 22%, transparent);
  --tw-version-border--hover:     color-mix(in srgb, var(--color-brand-primary) 55%, transparent);
  --tw-link-idle:          var(--color-foreground-secondary);
  --tw-link-hover:         var(--color-brand-primary);
}

/* Furo stacks the brand in a column, so the anchor owns the separation between its
   parts and the name gives up its own margin. The meta row lives outside that anchor -
   it holds links of its own, and anchors cannot nest. */
.sidebar-brand {
  align-items: flex-start;
  gap: var(--tw-brand-gap);
  padding-block: var(--tw-brand-pad-block) 0;
}

.sidebar-brand-text {
  margin-block: 0;
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

.sidebar-brand-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--tw-meta-gap);
  padding-inline: var(--sidebar-item-spacing-horizontal);
  padding-block: var(--tw-brand-gap) var(--tw-brand-pad-block);
}

.sidebar-brand-version {
  display: inline-block;
  padding-inline: var(--tw-version-pad-inline);
  padding-block: var(--tw-version-pad-block);
  border: 1px solid var(--tw-version-border);
  border-radius: var(--tw-version-radius);
  background: var(--tw-version-background);
  color: var(--tw-version-text);
  font-family: var(--font-stack--monospace);
  font-size: var(--tw-version-font-size);
  font-variant-numeric: tabular-nums;
  line-height: 1.6;
  text-decoration: none;
  transition: background 120ms ease-in-out, border-color 120ms ease-in-out;
}

.sidebar-brand-version:hover,
.sidebar-brand-version:focus-visible {
  background: var(--tw-version-background--hover);
  border-color: var(--tw-version-border--hover);
}

.sidebar-brand-dot {
  inline-size: var(--tw-dot-size);
  block-size: var(--tw-dot-size);
  border-radius: 50%;
  background: var(--color-foreground-secondary);
  opacity: var(--tw-dot-opacity);
}

.sidebar-brand-link {
  display: inline-flex;
  color: var(--tw-link-idle);
  text-decoration: none;
  transition: color 120ms ease-in-out;
}

.sidebar-brand-link:hover,
.sidebar-brand-link:focus-visible {
  color: var(--tw-link-hover);
}

.sidebar-brand-icon {
  inline-size: var(--tw-meta-icon-size);
  block-size: var(--tw-meta-icon-size);
}

@media (prefers-reduced-motion: reduce) {
  .sidebar-brand-link,
  .sidebar-brand-version {
    transition: none;
  }
}

/* ── Page-specific ────────────────────────────────────────────── */

/* Live demos are embedded as iframes and need a real block size - a character grid
   measured against `height: auto` collapses to nothing. */
.demo-frame {
  inline-size: 100%;
  block-size: 34rem;
  border: 1px solid var(--color-background-border);
  border-radius: 0.5rem;
}

/* The porting matrix is wide and its cells are prose. Without this the table is squeezed
   into a column and every row wraps to five lines. */
.wide-table table {
  display: table;
  inline-size: 100%;
}

.wide-table td {
  vertical-align: top;
}