/* Nominal's look for Shibuya, from the Nominal design system (https://design.nominal.io/DESIGN.md):
   its fonts and its light and dark colors, with the landing page's header, on top of instro's docs
   styling. Project-specific styles stay in each project. */

:root {
  /* nominal.io's look with open fonts (__init__.py's FONTS): Geist for text and headings (set in
     templates/partials/webfonts.html), Geist Mono for labels in tracked caps (--nominal-f-label), and
     JetBrains Mono for code. */
  --sy-f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nominal-f-label: "Geist Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --nominal-label-tracking: 0.1em;
  /* nominal.io's brand green: the bar on the left nav's current page */
  --nominal-green: #419b55;
  --accent-9: #0c0c0c;
  --accent-10: #333333;
  --accent-a11: #0c0c0c;
  --accent-a12: #0c0c0c;
  --sy-c-link: #0c0c0c;
  --sy-c-link-hover: #6b6b6b;
}

/* Light mode, as DESIGN.md's tokens: a white page (background), a muted header, footer and code
   blocks (background-muted), white cards (background-raised), and its text and border colors. */
:root,
html.light {
  --sy-c-background: #ffffff;
  --sy-c-surface: #f5f5f5;
  --sy-c-text: #333333;
  --sy-c-heading: #0c0c0c;
  --sy-c-bold: #0c0c0c;
  --sy-c-light: #6b6b6b;
  --sy-c-border: rgba(18, 18, 18, 0.11);
  --sy-c-divider: rgba(18, 18, 18, 0.11);
  --sy-c-foot-background: #f5f5f5;
  --nominal-header: #f5f5f5;
  --code-block-background: #f5f5f5;
  --nominal-card: #ffffff;
  --nominal-card-hover: #f3f3f3;
}
/* sphinxcontrib-mermaid's fullscreen button is a glyph (⛶) that few fonts have: draw an icon instead.
   The button sits in the bottom-right corner, where a diagram's nodes are less likely to be; its top
   is an inline style. */
.mermaid-container .mermaid-fullscreen-btn {
  font-size: 0;
  top: auto !important;
  bottom: 4px;
}
.mermaid-container .mermaid-fullscreen-btn::before {
  content: "";
  width: 14px;
  height: 14px;
  background-color: currentColor;
  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.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3h6v6M9 21H3v-6M21 3l-7 7M3 21l7-7'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

/* Shibuya gives code in tabs and notebook outputs their own light background; keep them like the rest. */
html.light .sd-tab-content,
html.light .jupyter_container .cell_output {
  --code-block-background: #f5f5f5;
}

/* Dark mode, as DESIGN.md's dark mapping: neutral-800 page, neutral-900 header, footer and code,
   neutral-700 cards, and hairline white borders. */
html.dark {
  --accent-9: #ffffff;
  --accent-10: #e5e5e5;
  --accent-a11: #ffffff;
  --accent-a12: #ffffff;
  --sy-c-link: #ffffff;
  --sy-c-link-hover: #a3a3a3;
  --sy-c-background: #1f1f1f;
  --sy-c-surface: #333333;
  --sy-c-text: #d4d4d4;
  --sy-c-heading: #ffffff;
  --sy-c-bold: #ffffff;
  --sy-c-light: #a3a3a3;
  --sy-c-border: rgba(255, 255, 255, 0.1);
  --sy-c-divider: rgba(255, 255, 255, 0.1);
  --sy-c-foot-background: #121212;
  --nominal-header: #121212;
  --code-block-background: #121212;
  --nominal-card: #333333;
  --nominal-card-hover: #424242;
}

/* Header: a solid bar (--nominal-header) with a hairline border, like the landing page's (no blur). */
.sy-head-blur {
  background-color: var(--nominal-header);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 1px 0 var(--sy-c-divider);
}

/* Nominal brand has hard edges — no rounded corners anywhere, except the tops of the header's tabs
   and the corners of the page's sheet (below), which look like a folder's. */
*,
*::before,
*::after {
  border-radius: 0 !important;
}

/* The background grid, on every page: 60px squares in faint lines, behind the page's sheet (on the
   header, the color around the sheet and the footer), or behind the page where there's no sheet;
   fixed to the window, so the header's lines and the page's line up. */
:root {
  --nominal-grid-line: rgba(0, 0, 0, 0.04);
}
html.dark {
  --nominal-grid-line: rgba(255, 255, 255, 0.03);
}
:root,
body,
.sy-head-blur {
  background-image:
    linear-gradient(to right, var(--nominal-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--nominal-grid-line) 1px, transparent 1px);
  background-size: 60px 60px;
  background-attachment: fixed;
}

/* Headings lighter and a little tighter than Shibuya's bold, like nominal.io's. */
.yue h1,
.yue h2,
.yue h3 {
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Mintlify-style links: text colour with an underline, not an accent colour. */
.yue a.reference,
.yue a.external {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* The project's logo, or its name when it has none: uppercase mono, like the landing page's
   "DOCS / FOR DEVELOPERS". */
.sy-head-brand img {
  height: 28px;
  width: auto;
}
/* the project's name, near the size of the logo's words (nominal-path.css) */
.sy-head-brand strong {
  font-family: var(--nominal-f-label);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--sy-c-heading);
}

/* The Nominal logo before the project's (templates/partials/site-head.html), linking to nominal.io,
   with the word that makes it a path (NOMINAL / DEV), then a divider. */
.nominal-hub {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.nominal-home {
  display: flex;
}
.nominal-hub img {
  height: 22px;
  width: auto;
}
.nominal-hub .dark-logo,
.dark .nominal-hub .light-logo {
  display: none;
}
.dark .nominal-hub .dark-logo {
  display: inline;
}

/* The logo's words (templates/nominal/path.html, styled by nominal-path.css): their colours, from the
   docs palette. */
:root,
html.light {
  --nominal-path-text: #525252;
}
html.dark {
  --nominal-path-text: #a3a3a3;
}
.sy-head {
  --nominal-path-hover: var(--sy-c-heading);
  --nominal-path-font: var(--nominal-f-label);
}

.nominal-hub-divider {
  margin: 0 0.4rem;
  color: #7a7a7a;
  font-size: 1.25rem;
  font-weight: 300;
}
/* The tabs pad themselves, so the divider before them needs less space on that side. */
.nominal-tabs-divider {
  margin-right: 0.25rem;
}
/* On narrow screens the tabs fold into the menu: drop the divider before them, and keep the logos
   together on the left rather than spread across the bar. */
@media (max-width: 767px) {
  .nominal-tabs-divider {
    display: none;
  }
  .sy-head-inner {
    justify-content: flex-start;
  }
  .sy-head-actions {
    margin-left: auto;
  }
}

/* Tighter, Mintlify-like API blocks: indented members with a hairline rail
   so it's clear which members belong to which class. */
dl.py > dd {
  margin-left: 0;
  padding-left: 1.25rem;
  border-left: 1px solid var(--sy-c-divider);
}

dl.py.class > dt,
dl.py.function > dt,
dl.py.pydantic_model > dt {
  font-size: 0.95em;
}

/* API signatures, tinted like the code blocks (Atom One): each part of a signature has its own
   colour, at normal weight except the name, and type links are underlined only on hover. The
   light colours are Atom One Light's, darkened where needed to keep 4.5:1 on the page. */
:root,
html.light {
  --nominal-api-keyword: #a626a4;
  --nominal-api-name: #1f60f0;
  --nominal-api-param: var(--sy-c-text);
  --nominal-api-type: #916301;
  --nominal-api-default: #cc2d1e;
  --nominal-api-punct: #6a6b72;
}
html.dark {
  --nominal-api-keyword: #c678dd;
  --nominal-api-name: #61afef;
  --nominal-api-param: #abb2bf;
  --nominal-api-type: #e5c07b;
  --nominal-api-default: #d19a66;
  --nominal-api-punct: #8e929b;
}
.yue dt.sig {
  font-weight: 400;
  color: var(--nominal-api-punct);
}
.yue dt.sig .property,
.yue dt.sig > em.property:first-child {
  color: var(--nominal-api-keyword);
}
.yue dt.sig .sig-prename {
  color: var(--nominal-api-punct);
}
.yue dt.sig .sig-name {
  color: var(--nominal-api-name);
  font-weight: 600;
}
.yue dt.sig em.sig-param {
  color: var(--nominal-api-type);
}
/* the parameter's name: its first part, or the one after * or ** */
.yue dt.sig em.sig-param > .n:first-child,
.yue dt.sig em.sig-param > .o:first-child + .n {
  color: var(--nominal-api-param);
}
.yue dt.sig .default_value {
  color: var(--nominal-api-default);
}
.yue dt.sig .p,
.yue dt.sig .o,
.yue dt.sig .sig-paren,
.yue dt.sig .sig-return-icon {
  color: var(--nominal-api-punct);
}
.yue dt.sig .sig-return-typehint,
.yue dt.sig .sig-return-typehint > a {
  color: var(--nominal-api-type);
}
.yue dt.sig a.reference {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}
.yue dt.sig a.reference:hover {
  text-decoration: underline;
}

/* A signature's description: body-coloured text, with its Parameters / Returns / Raises labels as
   small muted mono caps, and parameter names in mono like the signature's. */
.yue dt.sig + dd {
  color: var(--sy-c-text);
}
.yue dt.sig + dd > dl.field-list > dt {
  font-family: var(--sy-f-mono);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  color: var(--sy-c-light);
}
.yue dt.sig + dd > dl.field-list > dd li > p > strong:first-child,
.yue dt.sig + dd > dl.field-list > dd > p > strong:first-child {
  font-family: var(--sy-f-mono);
  font-weight: 400;
  font-size: 0.95em;
  color: var(--sy-c-heading);
}
/* the parameter's type, after its name (autodoc_typehints = "description"): coloured as in signatures */
.yue dl.field-list p.nominal-param-head em {
  font-family: var(--sy-f-mono);
  font-size: 0.95em;
  font-style: normal;
  color: var(--nominal-api-type);
}
.yue dl.field-list p.nominal-param-head a.reference {
  text-decoration: none;
}
.yue dl.field-list p.nominal-param-head a.reference:hover {
  text-decoration: underline;
}
/* Parameters laid out like numpy's docs (split by __init__.py's _split_params): each one's name and
   type on a line, its description indented below, and no bullets. */
.yue dl.field-list ul.nominal-params {
  list-style: none;
  padding-left: 0;
}
.yue dl.field-list ul.nominal-params > li {
  margin: 0 0 0.75rem;
}
.yue dl.field-list p.nominal-param-head {
  margin: 0;
}
.yue dl.field-list p.nominal-param-desc {
  margin: 0.15rem 0 0 1.5rem;
}

/* Long method names in the on-page TOC wrap instead of clipping. */
.sy-rside .localtoc a,
.sy-rside a {
  overflow-wrap: anywhere;
}

.sy-lside .globaltoc a {
  overflow-wrap: anywhere;
}

/* Left nav: page entries a step smaller than body text and indented under
   their section captions (Library, Instruments, …), which keep their size. */
.sy-lside .globaltoc > ul {
  padding-left: 0.75rem;
}

.sy-lside .globaltoc > ul a {
  font-size: 0.8125rem;
}

/* Right "On this page" entries match the left nav: same size, and API entries
   (InstroPSU, open(), …) in the text font rather than monospace. */
.sy-rside .localtoc a {
  font-size: 0.8125rem;
}

.sy-rside .localtoc code,
.sy-rside .localtoc .pre {
  font-family: inherit;
  font-size: inherit;
}

/* Header rows of column-labelled tables a shade darker than the alternating
   rows (--gray-a2); the translucent step adapts to dark mode. */
:root {
  --yue-c-th-background: var(--gray-a4);
}

/* ---- Guides: elements ported from the Mintlify site ---- */

/* Page description under the title (Mintlify front-matter description). */
.yue p.lead {
  font-size: 1.125rem;
  color: var(--sy-c-light);
  margin-top: -0.5rem;
}

/* Cards: hairline border, a shade lighter than the page (--nominal-card); in dark mode the landing
   page's card greys. */
.sd-card {
  border: 1px solid var(--sy-c-border);
  box-shadow: none !important;
  background: var(--nominal-card);
}
.sd-card:hover {
  background: var(--nominal-card-hover);
  border-color: var(--sy-c-text);
}
html.dark .sd-card:hover {
  border-color: rgba(255, 255, 255, 0.25);
}
.sd-card .sd-card-title {
  font-weight: 600;
  margin-bottom: 0;
}

/* Tab content: Shibuya drops sphinx-design's padding, which leaves prose touching the tab bar.
   Start it half a line down. Code blocks stay flush, since Shibuya squares them to sit on the bar. */
.yue .sd-tab-content > :first-child:not([class*="highlight"], .literal-block-wrapper, .sd-tab-set) {
  margin-top: 0.75rem !important;
}

/* Numbered steps (Mintlify <Steps>): a counter badge beside each step. */
.steps {
  counter-reset: step;
  margin: 1.5rem 0;
}
.steps > .step {
  counter-increment: step;
  position: relative;
  padding: 0 0 1rem 2.75rem;
  border-left: 1px solid var(--sy-c-divider);
  margin-left: 0.875rem;
}
.steps > .step::before {
  content: counter(step);
  position: absolute;
  left: -0.875rem;
  top: 0;
  width: 1.75rem;
  height: 1.75rem;
  line-height: 1.75rem;
  text-align: center;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--sy-c-background);
  background: var(--sy-c-heading);
}
.steps > .step:last-child {
  border-left-color: transparent;
}

/* "Product Guides" and "Request a demo" (outlined) and "Open app" (filled), the landing page's header
   buttons (templates/partials/nav-socials.html). */
.nominal-btn {
  display: inline-flex;
  align-items: center;
  margin-left: 0.75rem;
  padding: 0.55rem 0.875rem;
  border: 1px solid var(--sy-c-heading);
  font-family: var(--nominal-f-label);
  font-size: 0.75rem;
  font-weight: 400;
  letter-spacing: var(--nominal-label-tracking);
  line-height: 1.35;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--sy-c-heading) !important;
  text-decoration: none !important;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}
.nominal-btn:hover {
  background-color: var(--gray-a3);
}
/* In the narrow screens' menu, the buttons wrap rather than run off the screen. */
@media (max-width: 767px) {
  .nominal-head-buttons {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.75rem;
    padding: 0 1rem;
  }
  .nominal-head-buttons .nominal-btn {
    margin-left: 0;
  }
}
.nominal-btn-icon {
  flex-shrink: 0;
  margin-right: 0.4rem;
}
.nominal-btn-filled {
  background-color: var(--sy-c-heading);
  color: var(--sy-c-background) !important;
}
.nominal-btn-filled:hover {
  background-color: var(--sy-c-light);
  border-color: var(--sy-c-light);
}

/* The overview video, centred and responsive. */
.yue iframe {
  max-width: 100%;
}

/* Tabs: tracked uppercase mono, muted, like nominal.io's header; the current one
   (templates/components/nav-links.html) is bright. On wide screens it's a folder tab (below). */
.sy-head-links a {
  font-family: var(--nominal-f-label);
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: var(--nominal-label-tracking);
  text-transform: uppercase;
  color: var(--sy-c-light);
}
.sy-head-links a:hover,
.sy-head-links a.current {
  color: var(--sy-c-heading);
}
/* A tab's optional icon (templates/components/nav-links.html), before its title. */
.sy-head-links a,
.sy-head-links button {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.sy-head-links iconify-icon {
  font-size: 1rem;
}

/* Every site keeps its page in the page's color at every width, so the background grid shows only on
   the header and footer; on narrow screens the page fills the width with no gap around it (the
   sheet, below, is for wide screens). */
body:has(.sy-head) > .sy-page,
body:has(.sy-head) > .sy-container.body {
  background-color: var(--sy-c-background);
}

/* The page as a sheet of paper, on wide screens, with or without tabs: the header's color around it,
   the sheet in the page's color with rounded corners, and the footer below it. The sheet is the docs'
   .sy-page, or the simple layout's .sy-container.body. With tabs, the current one joins the sheet's
   top (below); without them, the header's color shows above the sheet too. */
@media (min-width: 768px) {
  :root:has(.sy-head),
  body:has(.sy-head) {
    background-color: var(--nominal-header);
  }
  body:has(.sy-head) > .sy-page,
  body:has(.sy-head) > .sy-container.body {
    width: calc(100% - 2 * var(--nominal-sheet-gap));
    margin-bottom: var(--nominal-sheet-gap);
    border-radius: var(--nominal-tab-radius) !important;
  }
  body:has(.sy-head:not(.nominal-two-row)) > .sy-page,
  body:has(.sy-head:not(.nominal-two-row)) > .sy-container.body {
    margin-top: var(--nominal-sheet-gap);
  }
  /* the footer sits on the header's color, below the sheet */
  body:has(.sy-head) > .sy-foot {
    background-color: transparent;
    border-top: 0;
  }
  /* the sheet's edge separates the header from the page; the header draws no line of its own */
  .sy-head .sy-head-blur {
    box-shadow: none;
  }
}

/* Two-row header, on wide screens when there are tabs (nominal-two-row, templates/partials/site-head.html):
   logos and buttons on the first row, tabs and search on the second. Shibuya places the sidebars,
   anchors and tab menus below --sy-s-navbar-height, so it spans both rows, and the first row's own
   controls keep that row's height. Narrow screens keep one row, with the tabs in the menu. */
:root {
  --nominal-head-row: 56px;
  --nominal-tabs-row: 44px;
  /* how far the tabs start right of the logo */
  --nominal-tabs-indent: 2rem;
  /* the header's color around the page's sheet, on wide screens */
  --nominal-sheet-gap: 1rem;
  /* the tabs' cut top-left corner (and the sheet's rounded corners), and their sloped right side */
  --nominal-tab-radius: 3px;
  --nominal-tab-shoulder: 1.25rem;
}
@media (min-width: 768px) {
  :root:has(.sy-head.nominal-two-row) {
    --sy-s-navbar-height: calc(var(--nominal-head-row) + var(--nominal-tabs-row));
  }
  .nominal-two-row .sy-head-inner {
    display: grid;
    grid-template-columns: auto auto auto 1fr auto auto;
    grid-template-rows: var(--nominal-head-row) var(--nominal-tabs-row);
    grid-template-areas:
      "hub divider brand . extra actions"
      "tabs tabs tabs tabs search search";
    align-items: center;
  }
  /* the nav's two parts become grid items of their own */
  .nominal-two-row .sy-head-nav {
    display: contents;
  }
  .nominal-two-row .nominal-hub {
    grid-area: hub;
  }
  .nominal-two-row .nominal-hub-divider {
    grid-area: divider;
  }
  .nominal-two-row .sy-head-brand {
    grid-area: brand;
  }
  .nominal-two-row .nominal-tabs-divider {
    display: none;
  }
  /* the search goes under the buttons, at the right of the tabs' row */
  .nominal-two-row .sy-head-extra {
    display: contents;
  }
  .nominal-two-row .sy-head-extra .searchbox {
    grid-area: search;
    justify-self: end;
  }
  .nominal-two-row .nominal-head-buttons {
    grid-area: extra;
    justify-content: flex-end;
  }
  .nominal-two-row .sy-head-actions {
    grid-area: actions;
  }
  .nominal-two-row .sy-head-actions button,
  .nominal-two-row .nav-versions,
  .nominal-two-row .nav-languages {
    height: var(--nominal-head-row);
  }
  /* Tabs, starting --nominal-tabs-indent right of the logo, shaped like nominal.io's folder tabs (its
     FEATURED tab): a rounded top-left corner and a sloped right shoulder, --nominal-tab-shoulder wide.
     The shape is a clip-path on the link, so its outline is drawn by drop-shadows on the item around
     it, which follow the clipped edge. The current tab is filled with the page's color, open at the
     bottom, and joins the sheet below it. */
  .nominal-two-row .sy-head-links {
    grid-area: tabs;
    align-self: stretch;
    align-items: flex-end;
    margin-left: calc(var(--nominal-tabs-indent) - 0.875rem);
    padding: 0;
  }
  .nominal-two-row .sy-head-links .link {
    height: calc(var(--nominal-tabs-row) - 0.375rem);
    margin-right: 0.25rem;
    filter: drop-shadow(1px 0 0 var(--nominal-tab-edge)) drop-shadow(-1px 0 0 var(--nominal-tab-edge))
      drop-shadow(0 -1px 0 var(--nominal-tab-edge));
  }
  .nominal-two-row .sy-head-links .link > a,
  .nominal-two-row .sy-head-links .link > button {
    height: 100%;
    padding: 0 calc(0.5rem + var(--nominal-tab-shoulder)) 0 1rem;
    /* the shade over the header's color, so the grid doesn't show through */
    background: var(--nominal-tab);
    clip-path: polygon(
      0 var(--nominal-tab-radius),
      var(--nominal-tab-radius) 0,
      calc(100% - var(--nominal-tab-shoulder)) 0,
      100% 100%,
      0 100%
    );
    transition: background-color 0.2s, color 0.2s;
  }
  .nominal-two-row .sy-head-links .link:hover > a,
  .nominal-two-row .sy-head-links .link:hover > button {
    background: var(--nominal-tab-hover);
  }
  .nominal-two-row .sy-head-links a.current,
  .nominal-two-row .sy-head-links .link:hover > a.current {
    background: var(--sy-c-background);
  }
}
/* the tabs' fill and outline: solid colours, since drop-shadows of a translucent edge would overlap */
:root,
html.light {
  --nominal-tab: #ebebeb;
  --nominal-tab-hover: #e2e2e2;
  --nominal-tab-edge: #d6d6d6;
}
html.dark {
  --nominal-tab: #191919;
  --nominal-tab-hover: #242424;
  --nominal-tab-edge: #333333;
}
/* On narrow screens the tabs are a list in the menu: the current one is underlined. */
@media (max-width: 767px) {
  .sy-head-links a.current > span {
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 6px;
  }
}

/* Sidebar section titles: tracked uppercase mono, like the tabs. */
.sy-lside .caption,
.sy-rside .localtoc > h3 {
  font-family: var(--nominal-f-label);
  font-weight: 400;
  letter-spacing: var(--nominal-label-tracking);
}

/* Folding sidebar groups (nominal_sidebar_open): the caption is a button in the caption's own
   font, with a chevron that turns when the group is open. Folded groups sit close together. */
.sy-lside .caption button.nominal-fold {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
}

.sy-lside .caption button.nominal-fold:hover {
  color: var(--sy-c-text);
}

.sy-lside .caption button.nominal-fold > i {
  transition: transform 0.2s;
}

.sy-lside .caption button.nominal-fold[aria-expanded="true"] > i {
  transform: rotate(90deg);
}

.sy-lside .globaltoc > ul[hidden] {
  display: none;
}

.sy-lside .globaltoc > ul[hidden] + .caption {
  margin-top: 0;
}

/* Left nav entries like nominal.io's lists (its deployment options): a dotted rule between the
   group's top-level pages, muted text that brightens on hover, and the current page bright with a
   green bar at its left. Every entry is padded alike, so the bar doesn't shift the text. The current
   page is the deepest current entry; Sphinx marks its ancestors current too. */
.sy-lside .globaltoc > ul > li {
  background: linear-gradient(to right, var(--sy-c-divider) 50%, transparent 0) bottom left / 4px 1px
    repeat-x;
}
.sy-lside .globaltoc > ul > li:last-child {
  background: none;
}
.sy-lside .globaltoc a {
  display: block;
  margin: 0 0 0 -0.75rem;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
  color: var(--sy-c-light);
  transition: color 0.2s;
}
.sy-lside .globaltoc a:hover {
  color: var(--sy-c-heading);
}
.sy-lside .globaltoc li.current > a {
  color: var(--sy-c-text);
}
.sy-lside .globaltoc li.current:not(:has(li.current)) > a {
  color: var(--sy-c-heading);
  box-shadow: inset 2px 0 0 var(--nominal-green);
}

/* The right nav sticks below the whole header, as the left nav does; Shibuya fixes it at 4rem, which
   is under the second header row. */
@media (min-width: 1280px) {
  .sy-rside .sy-rside-inner {
    top: var(--sy-s-offset-top);
  }
  /* Under the tabs, the text scrolls out of sight a little below them rather than at their edge: a
     band of the sheet's color stuck to the sheet's top. Narrower screens have the breadcrumbs' bar
     there instead. The band overlaps the page's own top space, so the page doesn't move down. */
  body:has(.sy-head.nominal-two-row) > .sy-page > .sy-main::before {
    content: "";
    display: block;
    position: sticky;
    top: var(--sy-s-offset-top);
    z-index: 5;
    height: var(--nominal-sheet-gap);
    margin-bottom: calc(-1 * var(--nominal-sheet-gap));
    background-color: var(--sy-c-background);
  }
}

/* The right nav, like the left: a dotted rule between its top-level headings, muted entries that
   brighten on hover, and the current heading (nominal.js) bright, with a green underline. Only colour
   and the underline change, so the list does not shift as the current entry changes. Shibuya's own
   `.active` colour is neutralised. */
.sy-rside .localtoc > ul > li {
  background: linear-gradient(to right, var(--sy-c-divider) 50%, transparent 0) bottom left / 4px 1px
    repeat-x;
}
.sy-rside .localtoc > ul > li:last-child {
  background: none;
}
.sy-rside .localtoc a {
  display: block;
  padding: 0.4rem 0;
  color: var(--sy-c-light);
  transition: color 0.2s;
}
.sy-rside .localtoc a:hover,
.sy-rside .localtoc li.active > a:hover {
  color: var(--sy-c-heading);
}
.sy-rside .localtoc li.active > a {
  color: var(--sy-c-light);
}
.sy-rside .localtoc li > a.nominal-current {
  color: var(--sy-c-heading);
  text-decoration: underline;
  text-decoration-color: var(--nominal-green);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}

/* The current tab of a tab set, such as the languages above a code block: a green underline, like
   the current heading's in the right nav. */
.yue .sd-tab-set > input:checked + label {
  border-color: var(--nominal-green);
}

/* A heading's "#" copies its link (nominal.js), then says so for a moment. The label floats
   beside the "#" without taking up space, so a centered heading doesn't shift. */
.yue a.headerlink {
  position: relative;
}
.yue a.headerlink.nominal-copied::after {
  content: "Copied";
  position: absolute;
  left: 100%;
  top: 0;
  margin-left: 0.4em;
  white-space: nowrap;
}

/* Callouts: a screenshot marked with red numbers (an image with class callout-screenshot),
   beside a list whose numbers match them ({.callouts} on the list). Used by shared snippets. */
section:has(img.callout-screenshot) h2,
section:has(img.callout-screenshot) details.sd-dropdown {
  clear: both;
}
ol.callouts > li::marker {
  color: #ef4444;
  font-weight: 700;
}
@media (max-width: 640px) {
  .yue img.callout-screenshot {
    float: none;
    display: block;
    margin: 0 auto 1rem;
  }
}

/* Links in code blocks, such as sphinx-codeautolink's, are underlined on hover, so the code reads
   cleanly and a link still shows itself under the pointer. They keep the code's colors: no teal
   hover from sphinx-codeautolink's own stylesheet. */
.yue pre a {
  text-decoration: none;
}
.yue pre a:hover {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

/* Notebook cells (myst-nb). Its palettes switch on data-theme; Shibuya marks the mode with a class. */
html.dark {
  --light: ;
  --dark: initial;
}
html.light {
  --dark: ;
  --light: initial;
}
/* Input cells look like the site's other code blocks. */
div.cell > div.cell_input {
  border: 0;
  border-radius: var(--radius);
  background: none;
}

/* the theme's commit, below the footer's copyright and icons (partials/site-foot.html) */
.nominal-theme-commit {
  margin-top: 0.5rem;
  font-size: 0.75rem;
}

/* Shibuya inverts Mermaid diagrams in dark mode, but sphinxcontrib-mermaid already draws them with
   Mermaid's dark theme there, so the inversion only muddies their colors. */
html.dark pre.mermaid > svg {
  filter: none;
}

/* MyST writes a column's alignment (`:---`, `:---:`, `---:`) as a class that Shibuya has no rule for. */
.yue th.text-left,
.yue td.text-left {
  text-align: left;
}
.yue th.text-center,
.yue td.text-center {
  text-align: center;
}
/* Right-aligned digits stack only when every digit is as wide as the others. */
.yue th.text-right,
.yue td.text-right {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* pandas right-aligns a DataFrame's headers, and Shibuya left-aligns table cells: align both right. */
.yue table.dataframe th,
.yue table.dataframe td {
  text-align: right;
  font-variant-numeric: tabular-nums;
}