/* ===== PROJECT COLOURS: the only block that differs between sites ======
   Take the brand colour from the logo. The primary colour is the brand colour
   itself (tab and border colour); the accent is used for links and the language
   badge, and is the same as the primary colour when the brand colour is dark
   enough for text. The dark value keeps a contrast ratio
   of at least 4.5:1 on the dark page background. The theme reads the
   --pst-color-* variables as plain colours (for example
   `border: .125rem solid var(--pst-color-primary)`), so a list of numbers
   makes every rule that uses them invalid. */
html[data-theme="light"] {
  --site-accent: #2D6E3B;
  --site-accent-bg: rgba(67,104,75, .12);
  --pst-color-primary: #43684B;
  --pst-color-link: #2D6E3B;
}
html[data-theme="dark"] {
  --site-accent: #87d398;
  --site-accent-bg: rgba(67,104,75, .12);
  --pst-color-primary: #5F936A;
  --pst-color-link: #87d398;
}

/* ===== Inline links: visible as links in body text ===================== */
/* The theme gives body links a colour change but no underline. External
   references carry their own icon, so they are excluded. */
.bd-article a:not(.reference.external) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ===== Home page title ================================================
   The page keeps a real H1 for the document structure, search engines and
   screen readers. The logo beneath it carries the visible title. Sphinx
   slugifies the heading "# GECKO" to the section id "gecko", which is
   unique in the site. */
#gecko > h1 {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ===== Tables: fit the article column ================================= */
/* table-layout:auto has no upper bound on the width; a fixed layout capped at
   the container makes long cells wrap. */
.bd-article table {
  table-layout: fixed;
  width: 100%;
  max-width: 100%;
}
.bd-article table td,
.bd-article table th {
  overflow-wrap: break-word;
}
/* Sphinx wraps inline code in a nowrap span. In table cells a long identifier
   list would widen the table, so there a code token may break. */
.bd-article table code .pre {
  white-space: normal;
  overflow-wrap: break-word;
}

/* ===== Home page hero ================================================= */
.site-hero { text-align: center; padding: 1.5rem 0 1rem; }
/* align-items:flex-end puts the badge's bottom edge on the logo's bottom
   edge, whatever the rendered height of the logo is. */
.site-logo-row {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: .6rem;
  margin-bottom: .8rem;
}
.site-tag {
  display: inline-block; font-size: .7rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--site-accent);
  background: var(--site-accent-bg);
  border-radius: 20px; padding: .2rem .75rem;
  /* margin 0: the theme's paragraph spacing would lift the badge off the
     bottom edge of the logo. */
  margin: 0;
}
.site-tagline {
  font-size: .95rem; color: var(--pst-color-text-muted);
  max-width: 560px; margin: 0 auto; line-height: 1.65;
}

/* ===== Home page logo: one image per colour scheme ==================== */
.site-logo-light, .site-logo-dark {
  max-width: 340px;
  width: 100%;
  height: auto;
  /* The theme gives content images a white backing. The logos are
     transparent and read on either background. */
  background-color: transparent !important;
}
.site-logo-dark { display: none; }
html[data-theme="dark"] .site-logo-light { display: none; }
html[data-theme="dark"] .site-logo-dark { display: inline; }

/* ===== Mermaid flowcharts ============================================= */
/* The workflow overview is a tall flowchart. Scaled to the text column it is
   unreadable, so it keeps a fixed scale of its natural size and the frame
   scrolls sideways when the column is narrower. A fixed scale gives the
   MATLAB and the Python diagram the same font size, which a width that is
   fixed instead of the scale would not, because the natural widths differ.
   The small diagrams on the guide pages (marked by the option align: left)
   keep their natural size. */
.mermaid-container:not(.mermaid-container-fullscreen) > pre:not(.align-left) {
  overflow-x: auto;
}
.mermaid-container:not(.mermaid-container-fullscreen) > pre:not(.align-left) > svg {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  zoom: 0.85;
  display: block;
  margin: 0 auto;
}
.mermaid-container:not(.mermaid-container-fullscreen) > pre.align-left {
  overflow-x: auto;
}
.mermaid-container:not(.mermaid-container-fullscreen) > pre.align-left > svg {
  width: auto !important;
  height: auto !important;
}

/* Icon-only link that downloads a diagram as PDF; the link text stays in the
   page for assistive technology. */
/* The icon sits in the row of the tab labels, outside the box of the tab. */
.sd-tab-content:has(> .workflow-pdf) { position: relative; }
.workflow-pdf { position: absolute; top: -2.5rem; right: 0; margin: 0; }
.workflow-pdf a.download {
  display: inline-block;
  position: relative;
  width: 2rem;
  height: 2rem;
  overflow: hidden;
  font-size: 0;
  border: 1px solid currentColor;
  border-radius: 0.3rem;
  text-decoration: none;
}
.workflow-pdf a.download::before {
  content: "";
  position: absolute;
  inset: 0.4rem;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12M7 10l5 5 5-5M4 20h16'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Layout: a thinner header bar and primary sidebar, and a wider page and article column. */
:root { --pst-header-height: 3.4rem; }
.bd-header .bd-header__inner { padding-top: 0.2rem; padding-bottom: 0.2rem; }
.bd-header .navbar-brand img { max-height: 2rem; width: auto; }
.bd-page-width { max-width: 104rem; }
.bd-main .bd-content .bd-article-container { max-width: 80em; }
@media (min-width: 960px) {
  .bd-sidebar-primary { --pst-sidebar-primary-width: 18%; }
}