/*************/
/* Variables */
/*************/

:root {
  --sz-link-color--lightmode:             #0184c7;
  --sz-hovered-link-color--lightmode:     #37bdf9;
  --sz-body-background-color--lightmode:  #fafafa;
  --sz-body-text-color--lightmode:        #525252;
  --sz-body-heading-color--lightmode:     #434343;
  --sz-code-background-color--lightmode:  #ececec;
  --sz-code-border-color--lightmode:      #d3d3d3;

  --sz-link-color--darkmode:              #37bdf9;
  --sz-hovered-link-color--darkmode:      #2890c0;
  --sz-body-background-color--darkmode:   #262626;
  --sz-body-text-color--darkmode:         #a3a3a3;
  --sz-body-heading-color--darkmode:      #e5e5e5;
  --sz-code-background-color--darkmode:   #212121;
  --sz-code-border-color--darkmode:       #444;
}

/****************/
/* Color styles */
/****************/

/* Default styles https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_typeset.scss */

/* Light mode */

/* Default light mode https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/main/_colors.scss */

[data-md-color-scheme="default"] {

  /* Primary color shades */
  --md-primary-fg-color:            var(--sz-body-background-color--lightmode);  /* Navigation background */
  --md-primary-bg-color:            var(--sz-body-text-color--lightmode);        /* E.g., Header title and icons */
  --md-primary-bg-color--light:     var(--sz-body-text-color--lightmode);        /* E.g., Header search */

  /* Accent color shades */
  --md-accent-fg-color:             var(--sz-hovered-link-color--lightmode);     /* E.g., Hovered `a` elements & copy icon in code */

  /* Default color shades */
  --md-default-fg-color:            var(--sz-body-text-color--lightmode);
  --md-default-fg-color--light:     var(--sz-body-heading-color--lightmode);     /* E.g., `h1` color & TOC viewed items & `$` in code */
  --md-default-fg-color--lighter:   var(--sz-body-text-color--lightmode);        /* E.g., `¶` sign near `h1-h8` */
  --md-default-fg-color--lightest:  var(--sz-body-text-color--lightmode);        /* E.g., Copy icon in code */
  --md-default-bg-color:            var(--sz-body-background-color--lightmode);

  /* Code color shades */
  --md-code-bg-color:               var(--sz-code-background-color--lightmode);

  /* Typeset color shades */
  --md-typeset-color:               var(--sz-body-text-color--lightmode);

  /* Typeset `a` color shades */
  --md-typeset-a-color:             var(--sz-link-color--lightmode);

  /* Footer color shades */
  --md-footer-fg-color:             var(--sz-body-text-color--lightmode);        /* E.g., Next -> */
  --md-footer-fg-color--light:      var(--sz-body-text-color--lightmode);        /* E.g., © 2022 EasyDiffraction, Material for MkDocs */
  --md-footer-fg-color--lighter:    var(--sz-body-text-color--lightmode);        /* E.g. Made with */
  --md-footer-bg-color:             hsla(0, 0%, 0%, 0.0);                        /* Space with, e.g., Next -> */
  --md-footer-bg-color--dark:       hsla(0, 0%, 0%, 0.0);                        /* Space with, e.g., © 2022 EasyDiffraction */

  /* Custom colors */
  --sz-red-color:                   #F44336;
  --sz-blue-color:                  #03A9F4;
  --sz-green-color:                 #4CAF50;
  --sz-orange-color:                #FF9800;

  /* Logo display */
  --md-footer-logo-dark-mode:       none;
  --md-footer-logo-light-mode:      block;
}

/* Dark mode */

/* Default dark mode: https://github.com/squidfunk/mkdocs-material/blob/master/src/assets/stylesheets/palette/_scheme.scss */

[data-md-color-scheme="slate"] {

  /* Primary color shades */
  --md-primary-fg-color:            var(--sz-body-background-color--darkmode);   /* Navigation background */
  --md-primary-bg-color:            var(--sz-body-text-color--darkmode);         /* E.g., Header title and icons */
  --md-primary-bg-color--light:     var(--sz-body-text-color--darkmode);         /* E.g., Header search */

  /* Accent color shades */
  --md-accent-fg-color:             var(--sz-hovered-link-color--darkmode);      /* E.g., Hovered `a` elements & copy icon in code */

  /* Default color shades */
  --md-default-fg-color:            var(--sz-body-text-color--darkmode);
  --md-default-fg-color--light:     var(--sz-body-heading-color--darkmode);      /* E.g., `h1` color & TOC viewed items & `$` in code */
  --md-default-fg-color--lighter:   var(--sz-body-text-color--darkmode);         /* E.g., `¶` sign near `h1-h8` */
  --md-default-fg-color--lightest:  var(--sz-body-text-color--darkmode);         /* E.g., Copy icon in code */
  --md-default-bg-color:            var(--sz-body-background-color--darkmode);

  /* Code color shades */
  --md-code-bg-color:               var(--sz-code-background-color--darkmode);

  /* Typeset color shades */
  --md-typeset-color:               var(--sz-body-text-color--darkmode);

  /* Typeset `a` color shades */
  --md-typeset-a-color:             var(--sz-link-color--darkmode);

  /* Footer color shades */
  --md-footer-fg-color:             var(--sz-body-text-color--darkmode);         /* E.g., Next -> */
  --md-footer-fg-color--light:      var(--sz-body-text-color--darkmode);         /* E.g., © 2022 EasyDiffraction, Material for MkDocs */
  --md-footer-fg-color--lighter:    var(--sz-body-text-color--darkmode);         /* E.g. Made with */
  --md-footer-bg-color:             hsla(0, 0%, 0%, 0.0);                        /* Space with, e.g., Next -> */
  --md-footer-bg-color--dark:       hsla(0, 0%, 0%, 0.0);                        /* Space with, e.g., © 2022 EasyDiffraction */

  /* Custom colors */
  --sz-red-color:                   #EF9A9A;
  --sz-blue-color:                  #81D4FA;
  --sz-green-color:                 #A5D6A7;
  --sz-orange-color:                #FFCC80;

  /* Logo display */
  --md-footer-logo-dark-mode:       block;
  --md-footer-logo-light-mode:      none;
}

/*****************/
/* Custom styles */
/*****************/

/* Logo */

#logo_light_mode {
  display: var(--md-footer-logo-light-mode);
}

#logo_dark_mode {
  display: var(--md-footer-logo-dark-mode);
}

/* Customize default styles of MkDocs Material */

/* Hide navigation title */
label.md-nav__title[for="__drawer"] {
  height: 0;
}

/* Hide site title (first topic) while keeping page title and version selector */
.md-header__topic:first-child .md-ellipsis {
  display: none;
}

/* Increase logo size */
.md-logo :is(img, svg) {
  height: 1.8rem !important;
}

/* Hide GH repo with counts (top right page corner) */
.md-header__source {
  display: none;
}

/* Hide GH repo with counts (navigation bar in mobile view) */
.md-nav__source {
  display: none;
}

/* Ensure all horizontal lines in the navigation list are removed or hidden */
.md-nav__item {
  /* Removes any border starting from the second level */
  border: none !important;
  /* Modifies the background color to hide the first horizontal line */
  background-color: var(--md-default-bg-color);
}

/* Increase TOC (on the right) width */
.md-nav--secondary {
  margin-left: -10px;
  margin-right: -4px;
}

/* */
.md-nav__item > .md-nav__link {
    padding-left: 0.5em; /* Default */
}

/* Change line height of the table cells */
.md-typeset td,
.md-typeset th {
  line-height: 2.35 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

/* Change vertical alignment of the icon inside the table cells */
.md-typeset td .twemoji {
  vertical-align: sub !important;
}

/* Change the width of the primary sidebar */
/*
.md-sidebar--primary {
  width: 240px;
}
*/

/* Change the overall width of the page */
.md-grid {
  max-width: 125em;
}

/* Keep prose line length stable when sidebars are hidden at narrower
   widths. The auto margins replace Material's default `.8rem` side
   margins (which provide the mobile gutter), so add equivalent padding
   to restore the gutter — otherwise text touches the screen edges on
   phones, where the width resolves to 100% and the auto margins
   collapse to zero. `border-box` keeps the padding inside the capped
   width. */
.md-main .md-content > .md-content__inner {
  width: min(100%, 47em);
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: 0.8rem;
  padding-right: 0.8rem;
}

/* Notebook action buttons (Open in Colab, Download). The page title is the
   notebook's own H1 rendered just below, so lay the buttons out as a
   left-aligned row above it instead of the theme's default right float,
   which overlapped long titles. */
.md-content__nb-actions {
  display: flex;
  gap: 0.4rem;
  /* Empty line of separation between the button row and the title */
  margin-bottom: 1.2em;
  /* Keep the row above the notebook, which is pulled up via margin-top */
  position: relative;
  z-index: 1;
}

.md-content__nb-actions .md-content__button {
  float: none;
  margin: 0;
}

/* Background color of the search input field */
.md-search__input {
  background-color: var(--md-code-bg-color) !important;
}

/* Customize default style of mkdocs-jupyter plugin */

/* Set the width of the notebook to fill 100% and not reduce by the width of .md-content__button's
Adjust the margins and paddings to fit the defaults in MkDocs Material and do not crop the label in the header
*/
.jupyter-wrapper {
  width: 100% !important;
  display: flex !important;
}

/* Jupyter code-cell (input) border color, per theme.
   mkdocs-jupyter inlines its own index.css inside the notebook body,
   after this stylesheet, and already sets --jp-cell-editor-border-color
   on `[data-md-color-scheme=slate] .jupyter-wrapper` (same specificity,
   later in source order, so an equal-specificity override would lose).
   Prefix `body` (which carries data-md-color-scheme) to out-specify the
   plugin's rule and win the cascade. */
body[data-md-color-scheme="default"] .jupyter-wrapper {
  --jp-cell-editor-border-color: var(--sz-code-border-color--lightmode);
}
body[data-md-color-scheme="slate"] .jupyter-wrapper {
  --jp-cell-editor-border-color: var(--sz-code-border-color--darkmode);
}

.jp-Notebook {
  padding: 0 !important;
  /* Pull the notebook up to absorb the jupyter wrapper's intrinsic top
     whitespace while leaving a small gap below the action-button row. */
  margin-top: -0.5em !important;

  /* Ensure notebook content stretches across the page */
  width: 100% !important;
  max-width: 100% !important;

  /* mkdocs-material + some notebook HTML end up as flex */
  align-items: stretch !important;
}

.jp-Notebook .jp-Cell {
  /* Key: flex children often need min-width: 0 to prevent weird shrink */
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;

  /* Removes jupyter cell paddings */
  padding-left: 0 !important;
}

/* Removes jupyter cell prefixes, like In[123]: */
.prompt,
.jp-InputPrompt,
.jp-OutputPrompt {
  display: none !important;
}

/* Removes jupyter output cell padding to align with input cell text */
.jp-RenderedText {
  padding-left: 0.85em !important;
}

/* Force the docs site to honour the compact table spacing the tablers
   set inline (see TABLE_CELL_* in display/tablers/base.py). The values
   here MUST mirror those constants. This rule exists only because
   mkdocs-Material's `.md-typeset table` base typography (line-height
   inherited from `.md-typeset { line-height: 1.6 }` and Material's tall
   default cell padding) otherwise inflates these rows on the site,
   whereas JupyterLab renders the same inline markup compactly. Scoped
   to rendered HTML *outputs* (.jp-RenderedHTML), so markdown prose
   tables (.jp-RenderedMarkdown) and code-input cells are untouched. */
.jp-RenderedHTML td,
.jp-RenderedHTML th {
  padding-top: 0.15em !important;
  padding-bottom: 0.15em !important;
  line-height: 1.2 !important;
}

/* Keep inline Three.js structure outputs inside the notebook stacking context.
   Generated notebook HTML contains internal z-index values, so isolate the
   viewer to stop its controls from painting over the sticky MkDocs header. */
.md-typeset .crysview {
  isolation: isolate;
  z-index: 0;
}

.md-typeset .crysview .cv-card,
.md-typeset .crysview .cv-download,
.md-typeset .crysview .cv-hint {
  z-index: 2 !important;
}

.md-typeset .crysview .cv-tooltip {
  z-index: 4 !important;
}

.md-typeset .crysview .mb-select {
  height: calc(var(--cv-control-h, 32px) + 2px) !important;
  min-height: calc(var(--cv-control-h, 32px) + 2px) !important;
  max-height: calc(var(--cv-control-h, 32px) + 2px) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  margin: -1px 0 !important;
  vertical-align: top !important;
  font-family: inherit !important;
  font-size: 12px !important;
  line-height: calc(var(--cv-control-h, 32px) - 2px) !important;
  padding: 0 22px 0 8px !important;
}

.md-typeset .crysview.cv-host-theme-dark {
  --cv-scene-bg: transparent !important;
  --cv-scene-fg: #e6e8ee !important;
  --cv-label-shadow-bg: #212121 !important;
  --cv-panel-bg: rgba(37, 37, 43, 0.95) !important;
  --cv-panel-border: #52545c !important;
  --cv-panel-fg: var(--cv-scene-fg) !important;
  --cv-control-bg: #2c2f37 !important;
  --cv-control-hover-bg: #373b45 !important;
  --cv-control-active-bg: #3d4657 !important;
  --cv-control-active-border: #63708a !important;
  --cv-control-fg: var(--cv-scene-fg) !important;
  --cv-control-muted: #8d929e !important;
  background: transparent !important;
  color: var(--cv-scene-fg) !important;
}

.md-typeset .crysview.cv-host-theme-light {
  --cv-scene-bg: transparent !important;
  --cv-scene-fg: #222 !important;
  --cv-label-shadow-bg: #fff !important;
  --cv-panel-bg: rgba(255, 255, 255, 0.94) !important;
  --cv-panel-border: #e2e2e2 !important;
  --cv-panel-fg: #222 !important;
  --cv-control-bg: #f5f5f6 !important;
  --cv-control-hover-bg: #e9eaef !important;
  --cv-control-active-bg: #e7ecf5 !important;
  --cv-control-active-border: #c6d0e2 !important;
  --cv-control-fg: #2a3f5f !important;
  --cv-control-muted: #b9bdc6 !important;
  background: transparent !important;
  color: var(--cv-scene-fg) !important;
}

.md-typeset .crysview.cv-host-theme-dark .cv-atom-label,
.md-typeset .crysview.cv-host-theme-light .cv-atom-label {
  color: var(--cv-scene-fg) !important;
  text-shadow:
    0 0 3px var(--cv-label-shadow-bg),
    0 0 3px var(--cv-label-shadow-bg),
    0 0 3px var(--cv-label-shadow-bg) !important;
}

/* Extra styling the panda dataframes, on top of the style included in the code */
table.dataframe {
  float: left;
  margin-left: 0.75em !important;
  margin-bottom: 0.5em !important;
  font-size: var(--jp-code-font-size) !important;
  color: var(--md-primary-bg-color) !important;
  /* Allow table cell wrapping in MkDocs-Jupyter outputs */
  /*
  table-layout: auto !important;
  width: auto !important;
  */
}

/* Allow wrap for the last column */
/*
table.dataframe td:last-child,
table.dataframe th:last-child {
  white-space: normal !important;
  word-break: break-word !important;
}
*/

/* Custom styles for the CIF files */

.cif {
  padding-left: 1em;
  padding-right: 1em;
  padding-top: 1px;
  padding-bottom: 1px;
  background-color: var(--md-code-bg-color);
  font-size: small;
}
.red {
  color: var(--sz-red-color);
}
.green {
  color: var(--sz-green-color);
}
.blue {
  color: var(--sz-blue-color);
}
.orange {
  color: var(--sz-orange-color);
}
.grey {
  color: grey;
}

/**********/
/* Labels */
/**********/

.label-cif {
  padding-top: 0.5ex;
  padding-bottom: 0.5ex;
  padding-left: 0.9ex;
  padding-right: 0.9ex;
  border-radius: 1ex;
  color: var(--md-default-fg-color) !important;
  background-color: var(--md-code-bg-color);
}

p .label-cif, li .label-cif {
  vertical-align: 5%;
  font-size: 12px;
}

.label-cif:hover {
  color: white !important;
}

.label-experiment {
  padding-top: 0.25ex;
  padding-bottom: 0.6ex;
  padding-left: 0.9ex;
  padding-right: 0.9ex;
  border-radius: 1ex;
  color: var(--md-default-fg-color) !important;
  background-color: rgba(55, 189, 249, 0.1);
}

p .label-experiment, li .label-experiment {
  vertical-align: 5%;
  font-size: 12px;
}

h1 .label-experiment {
  padding-top: 0.05ex;
  padding-bottom: 0.4ex;
  padding-left: 0.9ex;
  padding-right: 0.9ex;
  border-radius: 0.75ex;
  color: var(--md-default-fg-color) !important;
  background-color: rgba(55, 189, 249, 0.1);
}

.label-experiment:hover {
  color: white !important;
}

/* ----------------------------------------------------------------------
 * Lazy interactive figures (ed-figures.js, SHARED embedding mode).
 * The skeleton reserves the figure height (set inline) to avoid layout
 * shift, and is hidden once the figure renders.
 * ------------------------------------------------------------------- */

.ed-figure {
  position: relative;
  margin: 0.6rem 0;
}

.ed-figure-skeleton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 120px;
  color: var(--md-default-fg-color--light);
  /* Blend with the page background (the figure paper is transparent),
     so the loading box tracks light/dark. Do not use
     --md-default-fg-color--lightest here: this site repurposes that
     variable as a text color, which painted a solid grey block that
     ignored the theme. */
  background: var(--md-default-bg-color);
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.ed-figure--ready .ed-figure-skeleton {
  display: none;
}

.ed-figure-target {
  width: 100%;
}

/* Capability tables (Features / Verification): the engine/cross-ref/
   verification lists inside a cell are br-separated lines. Tighten their
   spacing so each reads as one line rather than ~1.5. Scoped to plain
   markdown tables, so prose tables on other pages are unaffected. */
.md-typeset table:not([class]) td {
  line-height: 1.35;
}

/* Capability matrix tables on the Features page. Each table is wrapped in
   a `.ed-matrix` div (md_in_html) so these rules apply only there and do
   not affect prose tables elsewhere. The LIB / CLI / APP status columns
   are made equally narrow and centred; the Feature column takes all the
   remaining width, giving every matrix table identical column geometry.
   `table-layout: fixed` keeps the fixed column widths from being pulled
   wide by long cell content, which also removes the tall header rows the
   old inline `<img width>` sizing hacks produced. `display: table`
   overrides Material's default `inline-block` on unwrapped tables, which
   otherwise shrinks each table to its own content width. */
.md-typeset .ed-matrix table:not([class]) {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.md-typeset .ed-matrix table:not([class]) th:not(:first-child),
.md-typeset .ed-matrix table:not([class]) td:not(:first-child) {
  width: 2.1rem; /* just fits the LIB/CLI/APP header + status icon */
  min-width: 0; /* override Material's 5rem `th` floor that clamps width */
  padding-left: 0.25rem !important; /* tight: column holds a centred icon */
  padding-right: 0.25rem !important;
  text-align: center;
}

/* Tighten the multi-line engine lists inside matrix cells and restore a
   little vertical breathing room. The global rule above sets
   `line-height: 2.35 !important` and `padding-top/bottom: 0 !important`
   for every table cell; scope a tighter line-height plus a small top and
   bottom padding to the matrix tables so the br-separated engine lines
   read as compact lines while each row keeps clear separation. */
.md-typeset .ed-matrix td,
.md-typeset .ed-matrix th {
  line-height: 1.5 !important;
  /* Horizontal padding is a touch larger than vertical so the two read as
     about equal: line-height adds apparent space above/below, so equal
     numeric padding would look smaller left/right. Status columns narrow
     this back down via the rule above. */
  padding: 0.4rem 0.55rem !important;
}