/*
===============================
Jupyter Wrapper Styles
===============================
*/

/* Hide output prompt in Jupyter */
.jupyter-wrapper .jp-OutputPrompt,
.jupyter-wrapper .jp-CodeCell .jp-Cell-inputWrapper .jp-InputPrompt,
.jupyter-wrapper .jp-Notebook .jp-Cell:not(.jp-mod-active) .jp-InputPrompt {
  display: none;
}

/* Size of code cells in Jupyter Notebooks */
.jupyter-wrapper .jp-CodeCell .jp-InputArea-editor .CodeMirror {
  font-size: 0.95em; /* Adjust the size as needed */
}

/* Size of output cells in Jupyter Notebooks */
.jupyter-wrapper .jp-RenderedText.jp-OutputArea-output pre {
  font-size: 1.2em; /* Adjust the size as needed */
}

/* Size of rich HTML output cells in Jupyter Notebooks */
.jupyter-wrapper .jp-RenderedHTMLCommon.jp-OutputArea-output pre {
  font-size: 0.9em;
  line-height: 1.4;
}

/* Display inline tables for dataframes in Jupyter */
.jupyter-wrapper table.dataframe {
  display: inline;
}

/*
===============================
Markdown Content Styles
===============================
*/

.md-typeset h1 {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.md-typeset h2 {
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--md-default-fg-color);
}

.md-typeset h3 {
  font-size: 1.25em;
  font-weight: 500;
  letter-spacing: -.01em;
  line-height: 1.5;
  margin: 1.6em 0 .8em;
  color: var(--md-default-fg-color);
}


/* Justify text */
.md-typeset p {
  text-align: justify;
}

/* Increase font size of code blocks in Markdown cells */
.md-typeset pre {
  font-size: 0.95em; /* Adjust the size as needed */
}

.md-typeset pre>code {
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  font-size: 1.1em;
  white-space: pre-wrap; 
  word-break: break-word;
}

.md-typeset code:not(.focus-visible) {
  font-size: 1.1em;
}

.md-typeset table:not([class]) td>:last-child, .md-typeset table:not([class]) th>:last-child {
  font-size: 1.1em;
}

/*
===============================
Color Scheme Styles
===============================
*/
/* Light color scheme styles. "light" is not a Material scheme (the light one
   is "default"), but it was used in mkdocs.yml until 0.26.0 and Material
   re-applies the scheme saved in the browser of returning visitors, so it is
   kept here until those saved values have expired. */
[data-md-color-scheme="default"],
[data-md-color-scheme="light"] {
  --md-primary-fg-color:        #001633;
  --md-primary-fg-color--light: #001633;
  --md-primary-fg-color--dark:  #001633;
  --md-accent-fg-color:         #f79939;
  --md-accent-fg-color--light:  #f79939;
  --md-accent-fg-color--dark:   #f79939;
  --md-accent-fg-color--transparent: #f799391a;
  --md-primary-bg-color:        #f79939;
  /* Links: the brand orange darkened on the same hue, the lightest one with a
     contrast of at least 4.5:1 on white (WCAG AA) and 3:1 against the body
     text, so links stand out by color alone. #f79939 on white is only 2.2:1. */
  --md-typeset-a-color:         #b35e07;
  --md-default-fg-color:        #2c2c2c;
}

/* Slate color scheme styles */
[data-md-color-scheme="slate"] {
  --md-primary-fg-color:        #001633;
  --md-primary-fg-color--light: #001633;
  --md-primary-fg-color--dark:  #001633;
  --md-accent-fg-color:         #f79939;
  --md-accent-fg-color--light:  #f79939;
  --md-accent-fg-color--dark:   #f79939;
  --md-accent-fg-color--transparent: #f799391a;
  --md-primary-bg-color:        #f79939;
  --md-typeset-a-color:         #f79939;
}
  
/* Material hides the #only-dark images in "default" and the #only-light images
   in "slate". Same behavior for the legacy "light" value (see above). */
[data-md-color-scheme="light"] {
  color-scheme: light;
}

[data-md-color-scheme="light"] img[src$="#only-dark"],
[data-md-color-scheme="light"] img[src$="#gh-dark-mode-only"] {
  display: none;
}

/*
===============================
Badge Styles
=============================== 
*/
.badge {
  display: inline-block;
  padding: 0.2em 0.4em;
  font-size: 0.75em; 
  font-weight: 700;
  line-height: 1;
  text-align: center;
  border-radius: 0.25rem;
}

/* Feature Badge */
.text-bg-feature {
  color: #fff;
  background-color: #28a745;
}

/* Enhancement Badge */
.text-bg-enhancement {
  color: #fff;
  background-color: #17a2b8;
}

/* API Change Badge */
.text-bg-api-change {
  color: #fff;
  background-color: #ffc107;
}

/* Fix Badge */
.text-bg-fix {
  color: #fff;
  background-color: #dc3545;
}

/* Docs Badge: documentation-only changes (pages, guides, notebooks) */
.text-bg-docs {
  color: #fff;
  background-color: #6f42c1;
}


/*
===============================
Team cards
===============================
*/

/* Component in docs/overrides/partials/team.html, used on the home page and on
   the More pages. Colors come from Material's variables, so the cards follow
   the light and dark schemes. */
.sk-team {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin: 1.2em 0;
}

.sk-person {
  flex: 1 1 320px;
  max-width: 480px;
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 20px 22px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  background: var(--md-default-bg-color);
}

.sk-person__photo {
  flex: none;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
}

.sk-person__body {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.sk-person__name {
  font-size: 17.5px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--md-default-fg-color);
}

.sk-person__role {
  font-size: 14px;
  color: var(--md-default-fg-color--light);
}

/* Emails only where the cards are wrapped in <div class="sk-team-contact"> */
.sk-person__email {
  display: none;
  font-size: 13.5px;
  overflow-wrap: anywhere;
}

.sk-team-contact .sk-person__email {
  display: block;
}

.sk-person__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.sk-team .sk-person__links a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--md-default-fg-color);
  text-decoration: none;
  transition: border-color 0.2s ease;
}

.sk-team .sk-person__links a:hover {
  border-color: var(--md-accent-fg-color);
}

.sk-team .sk-person__links svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}

.sk-team .sk-person__linkedin svg {
  fill: #0a66c2;
}

[data-md-color-scheme="slate"] .sk-team .sk-person__linkedin svg {
  fill: #3f8fe0;
}

/*
===============================
Examples Section Styles
===============================
*/
/* Card grids, filter bar and language switcher on the Examples pages. Markup is
   generated by tools/docs/hooks/examples_grid.py; behaviour lives in
   docs/javascripts/examples-filter.js. Colors come exclusively from Material
   CSS variables so both the light and slate schemes work without extra rules. */

/* Material's own grid uses auto-fit, which collapses empty tracks and makes one
   or two filter matches stretch across the full content width. */
.md-typeset .ex-grid {
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr));
  grid-gap: 0.8rem;
}

/* Required: Material sets `display: grid` on .grid and `display: block` on the
   cards without a :not([hidden]) guard, which beats the user agent's
   [hidden] { display: none } rule. Without this, filtering hides nothing.
   [data-ex-section] covers a section's heading, intro paragraph and grid. */
.md-typeset [data-ex-section][hidden],
.md-typeset .grid.cards > ul > li.ex-card[hidden] {
  display: none;
}

/* Card. A flex column so the tag row sits at the bottom of every card in a
   grid row, whatever the length of the title and summary above it. */
.md-typeset .grid.cards > ul > li.ex-card {
  display: flex;
  flex-direction: column;
  position: relative; /* anchor for the stretched title link below */
  /* A slightly stronger outline than Material's default (7% alpha), matching
     the corner radius of the icon badge. Hover keeps Material's behaviour:
     the border turns transparent and the shadow takes over. */
  border-color: var(--md-default-fg-color--lighter);
  border-color: color-mix(in srgb, var(--md-default-fg-color) 18%, transparent);
  border-radius: 0.3rem;
}

/* Same specificity as Material's hover rule and declared later, so the
   transparent border has to be restated here. */
.md-typeset .grid.cards > ul > li.ex-card:hover,
.md-typeset .grid.cards > ul > li.ex-card:focus-within {
  border-color: transparent;
}

/* The global `.md-typeset p { text-align: justify }` leaves ugly word gaps in
   narrow card columns. */
.md-typeset .ex-card p,
.md-typeset .ex-noresults,
.md-typeset .ex-filter__count {
  text-align: left;
}

/* Header: icon badge on the left, bold title on the right */
.md-typeset .ex-card__title {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.35;
}

/* The icon is the only accent-colored element of a card, so it reads as the
   card's identity instead of competing with 30+ orange titles. Material has no
   orange-tinted variable (its --md-accent-fg-color--transparent is the theme
   default blue), hence the color-mix with a flat fallback for old browsers. */
.md-typeset .ex-card__icon {
  --md-icon-size: 1.3rem;
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.3rem;
  background: var(--md-default-fg-color--lightest);
  background: color-mix(in srgb, var(--md-accent-fg-color) 14%, transparent);
  color: var(--md-accent-fg-color);
}

/* Titles in the text color: the hover shadow Material gives the card and the
   stretched link below already make the whole card read as clickable.
   Declared after Material's `.md-typeset a:hover` (same specificity) so the
   hover color wins. */
.md-typeset .ex-card__title a {
  color: var(--md-default-fg-color);
  text-decoration: none;
}

.md-typeset .ex-card__title a:hover,
.md-typeset .ex-card__title a:focus-visible {
  color: var(--md-accent-fg-color);
}

/* Make the whole card clickable while keeping exactly one link in the
   accessibility tree and one tab stop per card. */
.md-typeset .ex-card__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.md-typeset .ex-card__summary {
  margin: 0.7em 0 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.74rem;
  line-height: 1.5;
}

.md-typeset .ex-card__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: auto 0 0; /* auto top margin pins the row to the card bottom */
  padding-top: 0.8em;
}

/* Non-interactive tags shown inside a card: plain muted text separated by a
   middle dot, so they cannot be mistaken for the filter chips above. */
.md-typeset .ex-tag {
  color: var(--md-default-fg-color--light);
  font-size: 0.66rem;
  line-height: 1.6;
  white-space: nowrap;
}

.md-typeset .ex-tag + .ex-tag::before {
  content: "\00b7";
  margin: 0 0.45em;
}

/* The level tag gets a colored dot. The text is always present, so the color
   is a scanning aid, not the only carrier of the information. Hues chosen to
   stay away from the orange accent and to hold up on both schemes. */
.md-typeset .ex-tag--level {
  color: var(--md-default-fg-color);
  font-weight: 600;
}

.md-typeset .ex-tag--level::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.4em;
  border-radius: 50%;
  vertical-align: 0.05em;
  background: var(--ex-level-color);
}

.md-typeset .ex-tag--beginner { --ex-level-color: #34a853; }
.md-typeset .ex-tag--intermediate { --ex-level-color: #4285f4; }
.md-typeset .ex-tag--advanced { --ex-level-color: #a142f4; }

/* Filter bar. Rendered with [hidden] and unhidden by JS, so the :not([hidden])
   guard here is what makes the no-JS fallback work. Two-column grid: the
   search box and the footer span both columns, each chip group puts its label
   in the first column and its chips in the second, so the labels line up. */
.md-typeset .ex-filter:not([hidden]) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.55rem 0.8rem;
  margin: 1.2em 0;
  padding: 0.8rem;
  border-radius: 0.2rem;
  background: var(--md-default-fg-color--lightest);
}

.md-typeset .ex-filter__search,
.md-typeset .ex-filter__footer {
  grid-column: 1 / -1;
}

/* Magnifier inside the input. The fill is a fixed mid grey because a data URI
   cannot read CSS variables; it is legible on both schemes. */
.md-typeset .ex-filter__input {
  width: 100%;
  padding: 0.4em 0.6em 0.4em 2em;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  background:
    var(--md-default-bg-color)
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23888' d='M9.5 3A6.5 6.5 0 0 1 16 9.5c0 1.61-.59 3.09-1.56 4.23l.27.27h.79l5 5-1.5 1.5-5-5v-.79l-.27-.27A6.516 6.516 0 0 1 9.5 16 6.5 6.5 0 0 1 3 9.5 6.5 6.5 0 0 1 9.5 3m0 2C7 5 5 7 5 9.5S7 14 9.5 14 14 12 14 9.5 12 5 9.5 5'/%3E%3C/svg%3E")
    no-repeat 0.55em center / 1em;
  color: var(--md-default-fg-color);
  font-size: 0.8rem;
}

.md-typeset .ex-filter__input::placeholder {
  color: var(--md-default-fg-color--light);
}

/* Each group is a subgrid row so its label shares the parent's first column.
   Browsers without subgrid fall back to a fixed label column. */
.md-typeset .ex-chips {
  display: grid;
  grid-column: 1 / -1;
  grid-template-columns: subgrid;
  align-items: center;
}

@supports not (grid-template-columns: subgrid) {
  .md-typeset .ex-chips {
    grid-template-columns: 4.5rem 1fr;
  }
}

.md-typeset .ex-chips__label {
  color: var(--md-default-fg-color--light);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.md-typeset .ex-chips__list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}

.md-typeset .ex-chip {
  padding: 0.2em 0.6em;
  border: 0.05rem solid var(--md-default-fg-color--lighter);
  border-radius: 1em;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font: inherit;
  font-size: 0.72rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.md-typeset .ex-chip:hover {
  border-color: var(--md-accent-fg-color);
}

/* Selected chip: #f79939 on #001633 is 8.24:1. Never white text on the accent
   (2.19:1), and the bolder weight means state is not signalled by color alone. */
.md-typeset .ex-chip[aria-pressed="true"] {
  border-color: var(--md-accent-fg-color);
  background: var(--md-accent-fg-color);
  color: var(--md-primary-fg-color);
  font-weight: 600;
}

.md-typeset .ex-chip:focus-visible,
.md-typeset .ex-filter__input:focus-visible {
  outline: 0.12rem solid var(--md-accent-fg-color);
  outline-offset: 0.1rem;
}

.md-typeset .ex-filter__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.8rem;
}

.md-typeset .ex-filter__count {
  margin: 0;
  color: var(--md-default-fg-color--light);
  font-size: 0.7rem;
  font-style: italic;
}

.md-typeset .ex-noresults:not([hidden]) {
  padding: 1.2em;
  border: 0.05rem dashed var(--md-default-fg-color--lighter);
  border-radius: 0.2rem;
  font-size: 0.85rem;
}

/* Language switcher, styled as underlined tabs so it reads as navigation and
   not as a third row of filter chips. */
.md-typeset .ex-langs {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1.2em;
  border-bottom: 0.05rem solid var(--md-default-fg-color--lighter);
  text-align: left;
}

.md-typeset .ex-lang {
  margin-bottom: -0.05rem; /* overlaps the row border with the active one */
  padding: 0.35em 0.9em;
  border-bottom: 0.15rem solid transparent;
  color: var(--md-default-fg-color--light);
  font-size: 0.75rem;
  font-weight: 600;
  text-decoration: none;
}

.md-typeset .ex-lang:hover {
  color: var(--md-accent-fg-color);
}

/* The :hover selector is needed because Material's `.md-typeset a:hover`
   would otherwise recolor the current tab on hover. */
.md-typeset .ex-lang--active,
.md-typeset .ex-lang--active:hover {
  border-bottom-color: var(--md-accent-fg-color);
  color: var(--md-default-fg-color);
}

/* Accessible name for the filter input without showing a visible label */
.ex-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

@media screen and (max-width: 44.9375em) {
  /* One column: each group label sits above its chips */
  .md-typeset .ex-filter:not([hidden]),
  .md-typeset .ex-chips {
    grid-template-columns: 1fr;
  }

  .md-typeset .ex-chips {
    gap: 0.25rem;
  }

  /* Pack more chips per row so the filter does not push the cards off screen */
  .md-typeset .ex-chips__list {
    gap: 0.25rem;
  }

  .md-typeset .ex-chip {
    padding: 0.2em 0.5em;
    font-size: 0.68rem;
  }
}

@media print {
  /* Print the full list, whatever the reader had filtered on screen. */
  .md-typeset .ex-filter,
  .md-typeset .ex-noresults,
  .md-typeset .ex-langs {
    display: none !important;
  }

  .md-typeset h2[data-ex-section][hidden],
  .md-typeset p[data-ex-section][hidden] {
    display: block !important;
  }

  .md-typeset .grid.cards > ul > li.ex-card[hidden] {
    display: flex !important;
  }

  .md-typeset .ex-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
  }
}

/*
===============================
Sticky Banner Styles
===============================
*/
/* The outdated version banner positioning and offset are handled by
   version-switcher.js to avoid layout issues when the banner is not visible. */

/*
===============================
Announcement Bar Styles
===============================
*/
/* Brand accent, scoped to the announce bar only (not the outdated banner). */
[data-md-component="announce"] .md-banner a {
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

[data-md-component="announce"] .md-banner a:hover {
  text-decoration: underline;
}

/* Animations (docs/animations/*.html) embedded with an iframe.
   Height = stage (width x --skf-ratio) + 48px controls bar. The default ratio
   matches a 1280x640 stage; override it inline for other sizes, for example
   style="--skf-ratio: 0.5625" for 1280x720. */
.skf-anim-embed {
  container-type: inline-size;
  margin: 1.5em 0;
}
.skf-anim-embed iframe {
  display: block;
  width: 100%;
  height: calc(var(--skf-ratio, 0.5) * 100cqw + 48px);
  border: 0;
}