/* Colours for the whole site, from the M3Resp colour palette: raised bone and
   stone surfaces, ink text and one clay accent. Clay marks links, labels and
   lines; it fills only buttons. Small text uses the "strong" and "on ink" steps, which
   have a contrast of at least 4.5:1 (WCAG 2.1). */

:root {
  /* Core colours */
  --m3-bone: #d9d8d5;
  --m3-stone: #cdccc7;
  --m3-ink: #17161a;
  --m3-muted: #6f6b65;
  --m3-clay: #a85f4d;
  --m3-white: #fff;

  /* Steps for small text */
  --m3-muted-strong: #5a5652; /* 5.1:1 on bone */
  --m3-clay-strong: #7e473a; /* 5.17:1 on bone, 4.58:1 on stone */
  --m3-muted-on-ink: #848078; /* 4.58:1 on ink */
  --m3-clay-on-ink: #b56e5d; /* 4.59:1 on ink */

  /* Raised surfaces: white 35 % on bone, and white 4 % on ink */
  --m3-bone-raised: #e6e6e4;
  --m3-ink-raised: #201f23;

  /* Fonts: Roboto for all text, Roboto Mono for code */
  --m3-font-sans: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  --m3-font-mono: "Roboto Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Text sizes: one scale for all pages. 1rem is 16 px with the usual browser setting. */
  --m3-text-xs: 0.75rem; /* 12 px: small labels, code in small text */
  --m3-text-sm: 0.875rem; /* 14 px: side panels, menus, buttons, card text, code */
  --m3-text-md: 1rem; /* 16 px: body text, h4 and h5 */
  --m3-text-lg: 1.25rem; /* 20 px: h3 */
  --m3-text-xl: 1.5rem; /* 24 px: h2 */
  --m3-text-2xl: 2rem; /* 32 px: h1, the page title */

  /* Light mode: raised bone surface, ink text, clay accent */
  --m3-c-surface: var(--m3-bone-raised);
  --m3-c-elevated: var(--m3-bone-raised);
  --m3-c-raised: var(--m3-stone);
  --m3-c-line: rgb(23 22 26 / 12%);
  --m3-c-line-strong: rgb(23 22 26 / 28%);
  --m3-c-text: var(--m3-ink);
  --m3-c-muted: var(--m3-muted-strong);
  --m3-c-accent: var(--m3-clay);
  --m3-c-accent-hover: var(--m3-clay-strong);
  --m3-c-accent-text: var(--m3-clay-strong);
  --m3-c-accent-strong: var(--m3-clay-strong);
  --m3-c-accent-soft: rgb(168 95 77 / 14%);
  --m3-c-accent-target: rgb(168 95 77 / 25%);
  --m3-c-on-accent: var(--m3-white);
  --m3-c-neutral-soft: rgb(23 22 26 / 8%);
  --m3-c-row-hover: rgb(23 22 26 / 3%);
  --m3-c-shadow: rgb(23 22 26 / 12%);
}

/* Dark mode: ink surface, bone text, clay accent for ink */
html[data-theme="dark"] {
  --m3-c-surface: var(--m3-ink);
  --m3-c-elevated: var(--m3-ink-raised);
  --m3-c-raised: var(--m3-ink-raised);
  --m3-c-line: rgb(217 216 213 / 12%);
  --m3-c-line-strong: rgb(217 216 213 / 28%);
  --m3-c-text: var(--m3-bone);
  --m3-c-muted: var(--m3-muted-on-ink);
  --m3-c-accent: var(--m3-clay-on-ink);
  --m3-c-accent-hover: var(--m3-clay);
  --m3-c-accent-text: var(--m3-clay-on-ink);
  --m3-c-accent-strong: var(--m3-clay-on-ink);
  --m3-c-accent-soft: rgb(168 95 77 / 14%);
  --m3-c-accent-target: rgb(168 95 77 / 25%);
  --m3-c-on-accent: var(--m3-ink);
  --m3-c-neutral-soft: rgb(217 216 213 / 8%);
  --m3-c-row-hover: rgb(255 255 255 / 4%);
  --m3-c-shadow: rgb(0 0 0 / 30%);
}

/* Theme colours (pydata-sphinx-theme) taken from the tokens above */
html[data-theme="light"],
html[data-theme="dark"] {
  --pst-color-primary: var(--m3-c-accent-text);
  --pst-color-primary-bg: var(--m3-c-accent-soft);
  --pst-color-secondary: var(--m3-c-accent-text);
  --pst-color-secondary-bg: var(--m3-c-accent-soft);
  --pst-color-accent: var(--m3-c-accent);
  --pst-color-accent-bg: var(--m3-c-accent-soft);
  --pst-color-link: var(--m3-c-accent-text);
  --pst-color-link-hover: var(--m3-c-text);
  --pst-color-link-higher-contrast: var(--m3-c-accent-strong);
  --pst-color-inline-code: var(--m3-c-accent-text);
  --pst-color-inline-code-links: var(--m3-c-accent-text);
  --pst-color-target: var(--m3-c-accent-target);
  --pst-color-background: var(--m3-c-surface);
  --pst-color-on-background: var(--m3-c-elevated);
  --pst-color-surface: var(--m3-c-raised);
  --pst-color-on-surface: var(--m3-c-text);
  --pst-color-border: var(--m3-c-line);
  --pst-color-border-muted: var(--m3-c-line-strong);
  --pst-color-heading: var(--m3-c-text);
  --pst-color-text-base: var(--m3-c-text);
  --pst-color-text-muted: var(--m3-c-muted);
  --pst-color-blockquote-notch: var(--m3-muted);
  --pst-color-table-row-hover-bg: var(--m3-c-row-hover);
  --pst-color-shadow: var(--m3-c-shadow);
  --pst-font-family-base: var(--m3-font-sans);
  --pst-font-family-heading: var(--m3-font-sans);
  --pst-font-family-monospace: var(--m3-font-mono);
  --pst-font-weight-heading: 500;
  --pst-font-size-base: var(--m3-text-md);
  --pst-font-size-h1: var(--m3-text-2xl);
  --pst-font-size-h2: var(--m3-text-xl);
  --pst-font-size-h3: var(--m3-text-lg);
  --pst-font-size-h4: var(--m3-text-md);
  --pst-font-size-h5: var(--m3-text-md);
  --pst-font-size-h6: var(--m3-text-sm);
  --pst-font-size-milli: var(--m3-text-sm);
  --pst-sidebar-font-size: var(--m3-text-sm);
  --pst-sidebar-font-size-mobile: var(--m3-text-md);
  --pst-sidebar-header-font-size: var(--m3-text-lg);
  --pst-color-info: var(--m3-c-muted);
  --pst-color-info-bg: var(--m3-c-neutral-soft);

  /* Sphinx-Gallery (tutorial pages) */
  --sg-script-out: var(--m3-c-muted);
  --sg-script-pre: var(--m3-c-elevated);
  --sg-download-a-color: var(--m3-c-on-accent);
  --sg-download-a-background-color: var(--m3-c-accent);
  --sg-download-a-background-image: none;
  --sg-download-a-border-color: 1px solid var(--m3-c-accent);
  --sg-download-a-hover-background-color: var(--m3-c-accent-hover);
  --sg-thumb-hover-border: var(--m3-c-accent);
  --sg-thumb-box-shadow-color: var(--m3-c-shadow);
}

body {
  font-family: var(--m3-font-sans);
}

.bd-header {
  border-bottom: 1px solid var(--m3-c-line);
  background: var(--m3-c-surface) !important;
  box-shadow: none;
}

.bd-header .navbar-nav .dropdown-toggle {
  color: var(--pst-color-text-muted);
}

.bd-header .navbar-nav .dropdown-toggle:hover,
.bd-header .navbar-header-items__center .nav-link:hover,
.bd-header .navbar-header-items__center .nav-item.current > .nav-link {
  color: var(--m3-c-accent-text);
}

.navbar-brand {
  color: var(--pst-color-text-base);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.navbar-header-items__center .nav-link,
.bd-header .navbar-nav .dropdown-toggle {
  font-size: var(--m3-text-sm);
  font-weight: 500;
}

/* Footer: same background as the page */
.bd-footer {
  border-top: 1px solid var(--m3-c-line);
  background: var(--m3-c-surface);
  color: var(--m3-c-muted);
}

.bd-footer a {
  color: var(--m3-c-text);
}

.bd-footer a:hover {
  color: var(--m3-c-accent-text);
}

p.sphx-glr-script-out {
  font-family: var(--m3-font-mono);
}

/* Wider page: less empty space left and right of the sidebars on wide screens. */
.bd-page-width {
  max-width: 108rem;
}

/* The text fills the space between the sidebars, also on pages with one sidebar or none. */
.bd-main .bd-content .bd-article-container {
  max-width: none;
}

/* The landing page has the same width as the top navigation bar. */
.bd-main .bd-content .bd-article-container:has(#m3resp-documentation) {
  max-width: none;
}

.bd-main .bd-content .bd-article-container .bd-article:has(#m3resp-documentation) {
  padding-left: 0;
}

.bd-article > section#m3resp-documentation > h1:first-child {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  margin: -1px;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

.bd-main .bd-content .bd-article-container h1,
.bd-main .bd-content .bd-article-container h2,
.bd-main .bd-content .bd-article-container h3 {
  color: var(--pst-color-heading);
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Landing page (docs/index.md): one flat surface, Roboto, square corners, hairline borders. */

html:has(#m3resp-documentation) {
  --m3-space-1: 4px;
  --m3-space-2: 8px;
  --m3-space-3: 12px;
  --m3-space-4: 16px;
  --m3-space-5: 24px;
  --m3-space-6: 32px;
  --m3-radius: 2px;
  --pst-color-on-background: var(--m3-c-surface);
  --pst-color-shadow: transparent;
}

#m3resp-documentation {
  color: var(--m3-c-text);
  font-family: var(--m3-font-sans);
  letter-spacing: 0;
}

#m3resp-documentation :focus-visible {
  outline: 2px solid var(--m3-c-accent-text);
  outline-offset: 2px;
}

/* Section headings below the hero */

#m3resp-documentation > section {
  margin-top: calc(2 * var(--m3-space-6));
}

#m3resp-documentation > section > h2 {
  margin: 0 0 var(--m3-space-2);
  color: var(--m3-c-text);
  font-family: var(--m3-font-sans);
  font-size: var(--m3-text-xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0;
}

#m3resp-documentation > section > h2::before {
  color: var(--m3-c-accent-text);
  content: "> ";
}

#m3resp-documentation > section > h2 + p {
  max-width: 48rem;
  margin-bottom: var(--m3-space-5);
  color: var(--m3-c-muted);
  font-size: var(--m3-text-md);
  line-height: 1.7;
}

/* Hero */

#m3resp-documentation .m3-hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--m3-space-6);
  align-items: center;
  margin: var(--m3-space-5) 0 0;
  padding: var(--m3-space-6) 0 0;
}

#m3resp-documentation .m3-hero-copy,
#m3resp-documentation .m3-hero-visual {
  min-width: 0;
}

#m3resp-documentation .m3-eyebrow {
  margin-bottom: var(--m3-space-5);
  color: var(--m3-c-accent-text);
  font-size: var(--m3-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

#m3resp-documentation .m3-eyebrow p {
  margin: 0;
}

#m3resp-documentation .m3-hero .rubric {
  margin: 0 0 var(--m3-space-4);
  padding: 0;
  border: 0;
  color: var(--m3-c-text);
  font-family: var(--m3-font-sans);
  font-size: var(--m3-text-2xl);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  overflow-wrap: break-word;
}

#m3resp-documentation .m3-hero .rubric::after {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  margin-left: 0.15em;
  background: var(--m3-c-accent);
  vertical-align: -0.12em;
  animation: m3-cursor 1.1s steps(2, start) infinite;
  content: "";
}

@keyframes m3-cursor {
  to {
    visibility: hidden;
  }
}

#m3resp-documentation .m3-hero-copy > p {
  max-width: 38rem;
  margin: 0;
  color: var(--m3-c-muted);
  font-size: var(--m3-text-md);
  line-height: 1.7;
}

#m3resp-documentation .m3-actions {
  --sd-color-primary: var(--m3-c-accent);
  --sd-color-primary-highlight: var(--m3-c-accent-hover);
  --sd-color-primary-text: var(--m3-c-on-accent);
  --sd-color-light: var(--m3-c-text);
  --sd-color-light-text: var(--m3-c-on-accent);

  display: flex;
  flex-wrap: wrap;
  gap: var(--m3-space-3);
  margin-top: var(--m3-space-6);
}

#m3resp-documentation .m3-actions p,
#m3resp-documentation .m3-next-actions p {
  margin: 0;
}

#m3resp-documentation .m3-actions .sd-btn,
#m3resp-documentation .m3-next-actions .sd-btn {
  margin: 0;
  padding: var(--m3-space-2) var(--m3-space-4);
  border-radius: var(--m3-radius);
  font-family: var(--m3-font-sans);
  font-size: var(--m3-text-sm);
  font-weight: 500;
  letter-spacing: 0.02em;
  transition:
    background-color 120ms linear,
    border-color 120ms linear,
    color 120ms linear;
}

#m3resp-documentation .m3-actions .sd-btn-outline-light {
  border-color: var(--m3-c-line-strong) !important;
}

#m3resp-documentation .m3-actions .sd-btn-outline-light:hover,
#m3resp-documentation .m3-actions .sd-btn-outline-light:focus-visible {
  border-color: var(--m3-c-text) !important;
}

#m3resp-documentation .m3-hero-visual p {
  margin: 0;
}

#m3resp-documentation img.m3-monitor {
  display: block;
  width: 100%;
  max-width: 44rem;
  height: auto;
  margin-left: auto;
  border-radius: var(--m3-radius);
  background: none;
}

#m3resp-documentation .m3-stats {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  border-top: 1px solid var(--m3-c-line);
  border-bottom: 1px solid var(--m3-c-line);
}

#m3resp-documentation .m3-stat {
  padding: var(--m3-space-3) var(--m3-space-4);
}

#m3resp-documentation .m3-stat + .m3-stat {
  border-left: 1px solid var(--m3-c-line);
}

#m3resp-documentation .m3-stat p {
  margin: 0;
  color: var(--m3-c-accent-text);
  font-size: var(--m3-text-sm);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

#m3resp-documentation .m3-stat p:first-child {
  margin-bottom: var(--m3-space-1);
  color: var(--m3-c-muted);
  font-size: var(--m3-text-xs);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Workflow stages: one row of cells with hairline borders */

#m3resp-documentation .m3-stages {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border: 1px solid var(--m3-c-line);
  border-radius: var(--m3-radius);
}

#m3resp-documentation .m3-stage {
  display: flex;
  flex-direction: column;
  padding: var(--m3-space-4);
  transition: background-color 120ms linear;
}

#m3resp-documentation .m3-stage + .m3-stage {
  border-left: 1px solid var(--m3-c-line);
}

#m3resp-documentation .m3-stage:hover {
  background: var(--m3-c-raised);
}

#m3resp-documentation .m3-stage-index {
  margin-bottom: var(--m3-space-3);
  color: var(--m3-c-accent-text);
  font-size: var(--m3-text-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
}

#m3resp-documentation .m3-stage-index p {
  margin: 0;
}

#m3resp-documentation .m3-stage-index p::before {
  content: "[";
}

#m3resp-documentation .m3-stage-index p::after {
  content: "]";
}

#m3resp-documentation .m3-stage > p {
  margin: 0 0 var(--m3-space-3);
  color: var(--m3-c-muted);
  font-size: var(--m3-text-sm);
  line-height: 1.6;
}

#m3resp-documentation .m3-stage > p:has(> strong:only-child) {
  margin-bottom: var(--m3-space-2);
}

#m3resp-documentation .m3-stage strong {
  color: var(--m3-c-text);
  font-size: var(--m3-text-md);
  font-weight: 700;
}

#m3resp-documentation .m3-stage > p:last-child {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m3-space-1);
  margin: auto 0 0;
  padding-top: var(--m3-space-3);
  border-top: 1px dashed var(--m3-c-line);
}

#m3resp-documentation code {
  padding: 1px var(--m3-space-1);
  border: 1px solid var(--m3-c-line);
  border-radius: var(--m3-radius);
  background: var(--m3-c-raised);
  color: var(--m3-c-text);
  font-family: var(--m3-font-mono);
  font-size: var(--m3-text-xs);
  overflow-wrap: anywhere;
}

/* Path cards */

#m3resp-documentation .m3-card-grid {
  padding-right: 0;
  padding-left: 0;
  counter-reset: m3-path;
}

#m3resp-documentation .m3-path-card {
  height: 100%;
  border: 1px solid var(--m3-c-line);
  border-radius: var(--m3-radius);
  background: var(--m3-c-surface);
  box-shadow: none;
  color: var(--m3-c-text);
  transition:
    background-color 120ms linear,
    border-color 120ms linear;
}

#m3resp-documentation .m3-path-card:hover,
#m3resp-documentation .m3-path-card:has(a:focus-visible) {
  border-color: var(--m3-c-accent);
  background: var(--m3-c-raised);
}

#m3resp-documentation .m3-path-card:has(a:focus-visible) {
  outline: 2px solid var(--m3-c-accent-text);
  outline-offset: 2px;
}

#m3resp-documentation .m3-path-card .sd-card-body {
  display: flex;
  flex-direction: column;
  padding: var(--m3-space-5);
}

#m3resp-documentation .m3-path-card .sd-card-title {
  margin-bottom: var(--m3-space-3);
  color: var(--m3-c-text);
  font-size: var(--m3-text-md);
  font-weight: 700;
  line-height: 1.4;
}

#m3resp-documentation .m3-path-card .sd-card-title::before {
  display: block;
  margin-bottom: var(--m3-space-2);
  color: var(--m3-c-accent-text);
  font-size: var(--m3-text-xs);
  letter-spacing: 0.08em;
  content: "[" counter(m3-path, decimal-leading-zero) "]";
  counter-increment: m3-path;
}

#m3resp-documentation .m3-path-card .sd-card-text {
  margin-bottom: var(--m3-space-4);
  color: var(--m3-c-muted);
  font-size: var(--m3-text-sm);
  line-height: 1.65;
}

#m3resp-documentation .m3-path-card .sd-card-text:last-child {
  margin: auto 0 0;
}

#m3resp-documentation .m3-path-card strong {
  color: var(--m3-c-accent-text);
  font-size: var(--m3-text-sm);
}

/* Closing panel */

#m3resp-documentation .m3-next-step {
  --sd-color-primary: var(--m3-c-accent-text);
  --sd-color-primary-text: var(--m3-c-on-accent);

  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: var(--m3-space-6);
  align-items: center;
  margin: calc(2 * var(--m3-space-6)) 0 var(--m3-space-6);
  padding: var(--m3-space-6) 0;
  border-top: 1px solid var(--m3-c-line);
  border-bottom: 1px solid var(--m3-c-line);
}

#m3resp-documentation .m3-next-step .rubric {
  margin: 0 0 var(--m3-space-3);
  padding: 0;
  border: 0;
  color: var(--m3-c-text);
  font-family: var(--m3-font-sans);
  font-size: var(--m3-text-lg);
  font-weight: 500;
  line-height: 1.4;
}

#m3resp-documentation .m3-next-copy,
#m3resp-documentation .m3-terminal {
  min-width: 0;
}

#m3resp-documentation .m3-next-copy > p {
  color: var(--m3-c-muted);
  font-size: var(--m3-text-md);
  line-height: 1.7;
}

#m3resp-documentation .m3-next-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--m3-space-3);
  margin-top: var(--m3-space-4);
}

#m3resp-documentation .m3-terminal div.highlight {
  overflow: hidden;
  border: 1px solid var(--m3-c-line-strong);
  border-radius: var(--m3-radius);
  background: var(--m3-c-surface);
}

#m3resp-documentation .m3-terminal div.highlight::before {
  display: block;
  padding: var(--m3-space-2) var(--m3-space-4);
  border-bottom: 1px solid var(--m3-c-line);
  color: var(--m3-c-muted);
  font-family: var(--m3-font-mono);
  font-size: var(--m3-text-xs);
  letter-spacing: 0.08em;
  content: "TERMINAL";
}

#m3resp-documentation .m3-terminal pre {
  margin: 0;
  padding: var(--m3-space-4);
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--m3-c-text);
  font-family: var(--m3-font-mono);
  font-size: var(--m3-text-sm);
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

#m3resp-documentation .m3-terminal pre span {
  color: var(--m3-c-text);
}

#m3resp-documentation .m3-terminal pre .c1 {
  color: var(--m3-c-accent-text);
  font-style: normal;
}

#m3resp-documentation .m3-terminal .copybtn {
  display: none;
}

@media (width <= 1100px) {
  #m3resp-documentation .m3-stages {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  #m3resp-documentation .m3-stage + .m3-stage {
    border-left: 0;
  }

  #m3resp-documentation .m3-stage:not(:nth-child(3n + 1)) {
    border-left: 1px solid var(--m3-c-line);
  }

  #m3resp-documentation .m3-stage:nth-child(n + 4) {
    border-top: 1px solid var(--m3-c-line);
  }
}

@media (width <= 960px) {
  #m3resp-documentation .m3-hero,
  #m3resp-documentation .m3-next-step {
    grid-template-columns: minmax(0, 1fr);
  }

  #m3resp-documentation img.m3-monitor {
    margin-right: auto;
  }

  #m3resp-documentation .m3-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #m3resp-documentation .m3-stat:nth-child(3) {
    border-left: 0;
  }

  #m3resp-documentation .m3-stat:nth-child(n + 3) {
    border-top: 1px solid var(--m3-c-line);
  }
}

@media (width <= 640px) {
  #m3resp-documentation .m3-hero {
    margin-top: var(--m3-space-2);
    padding-top: var(--m3-space-5);
  }

  #m3resp-documentation .m3-stages {
    grid-template-columns: minmax(0, 1fr);
  }

  #m3resp-documentation .m3-stage:not(:nth-child(3n + 1)) {
    border-left: 0;
  }

  #m3resp-documentation .m3-stage + .m3-stage {
    border-top: 1px solid var(--m3-c-line);
  }

  #m3resp-documentation .m3-actions p {
    flex: 1 1 100%;
  }

  #m3resp-documentation .m3-actions .sd-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  #m3resp-documentation .m3-hero .rubric::after {
    animation: none;
  }

  #m3resp-documentation .m3-stage,
  #m3resp-documentation .m3-path-card,
  #m3resp-documentation .m3-actions .sd-btn,
  #m3resp-documentation .m3-next-actions .sd-btn {
    transition: none;
  }
}

.bd-sidebar-primary .sidebar-primary-item {
  padding-right: 0.5rem;
}

.bd-sidebar-primary .current > .reference {
  color: var(--m3-c-accent-text);
  font-weight: 700;
}

.toc-entry a.nav-link.active {
  border-left-color: var(--m3-c-accent);
  color: var(--m3-c-accent-text);
  font-weight: 700;
}

/* "On this page" and "In this section" use the same links: the same colour
   change and the same accent bar when a link becomes active. Long names
   (for example on the API pages) wrap inside the side panel. */
.bd-sidebar-secondary .toc-entry a.nav-link {
  overflow-wrap: anywhere;
  transition: color 0.15s ease, box-shadow 0.15s ease;
}

.bd-sidebar-secondary .toc-entry a.nav-link :is(code, .pre) {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* Links of subsections move their text to the right, so the accent bar of
   every link sits on the same line at the left of the panel. */
.bd-sidebar-secondary .page-toc .section-nav ul {
  padding-left: 0;
}

.bd-sidebar-secondary .page-toc .section-nav ul a.nav-link {
  padding-left: 2rem;
}

.bd-sidebar-secondary .page-toc .section-nav ul ul a.nav-link {
  padding-left: 3rem;
}

.bd-sidebar-secondary .sidebar-secondary-item + .sidebar-secondary-item {
  margin-top: 1rem;
}

code {
  border-color: var(--m3-c-line);
  border-radius: 0.3rem;
}


/* Same look on every content page, after the plain look of Getting started. */

/* Inline code: text colour on a light surface. Code in a link keeps the link colour. */
.bd-article code.literal {
  border: 0;
  background: var(--m3-c-neutral-soft);
  color: var(--m3-c-text);
}

.bd-article a code.literal {
  color: var(--m3-c-accent-text);
}

/* The download buttons at the end of each tutorial: the text has the colour of
   the button text, on the accent colour of the button. */
.bd-article .sphx-glr-download a code.literal {
  background: none;
  color: inherit;
}

/* Code in headings, breadcrumbs and the side panel looks like the text around it. */
.bd-article :is(h1, h2, h3, h4, h5, h6) code.literal,
.bd-breadcrumbs code.literal,
.bd-sidebar-secondary code.literal {
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
}

/* Tutorial output: the same box as a code block. */
html[data-theme="light"],
html[data-theme="dark"] {
  --sg-script-pre: var(--pst-color-surface);
}

.bd-article div.sphx-glr-script-out div.highlight {
  border: 0;
  background: none;
  box-shadow: none;
}

.bd-article div.sphx-glr-script-out div.highlight pre {
  border: 0;
  box-shadow: none;
}

/* The download links are at the end of each tutorial, so the note at the top is hidden. */
.bd-article .sphx-glr-download-link-note {
  display: none;
}

/* Tables: thin lines and no stripes. */
.bd-article table.table tbody tr {
  background: none;
}

.bd-article table.table thead {
  border-bottom: 1px solid var(--m3-c-line-strong);
}

/* Notes and warnings: flat boxes, as the code blocks. */
.bd-article .admonition,
.bd-article div.admonition {
  box-shadow: none;
}

/* Previous and next links sit at the bottom of the content area, just above
   the footer line, also on short pages. */
.bd-main .bd-content {
  flex-grow: 1;
}

.bd-main .bd-content .bd-article-container .prev-next-footer {
  margin-top: auto;
}