/* === Pocket guide: reading comfort on the docs site === */

:root {
  --pg-line-height: 1.75;
  --pg-block-gap: 1.1rem;
  --pg-section-gap: 3.2rem;
  --pg-section-padding: 1.6rem;
  --pg-subsection-gap: 2rem;
  --pg-divider-width: 1px;
  --pg-divider-color: var(--md-default-fg-color--lightest);
  --pg-summary-bg: var(--md-code-bg-color);
  --pg-summary-border-width: 4px;
  --pg-summary-border-color: var(--md-primary-fg-color);
  --pg-summary-padding: 0.9rem 1.2rem;
  --pg-radius: 0.4rem;
  --pg-table-cell-padding: 0.7em 1em;
  --pg-code-line-height: 1.6;
  --pg-nav-font-size: 0.72rem;
  --pg-nav-opacity: 0.85;
  --pg-grid-max-width-wide: 76rem;
  --pg-diagram-min-width-phone: 36rem;
  --pg-diagram-hint-font-size: 0.65rem;
  --pg-diagram-hint-color: var(--md-default-fg-color--light);
  --pg-code-font-size-phone: 0.7rem;
  --pg-section-gap-phone: 2.2rem;
  --pg-section-padding-phone: 1rem;
  --pg-summary-padding-phone: 0.7rem 0.9rem;
  --pg-content-side-gap: 2.8rem;
  --pg-content-side-gap-wide: 3.2rem;
}

/* === Text rhythm === */

.md-typeset {
  line-height: var(--pg-line-height);
}

.md-typeset p,
.md-typeset ul,
.md-typeset ol,
.md-typeset table,
.md-typeset pre,
.md-typeset details {
  margin-top: var(--pg-block-gap);
  margin-bottom: var(--pg-block-gap);
}

.md-typeset li + li {
  margin-top: calc(var(--pg-block-gap) / 3);
}

/* === Clear separation between numbered sections === */

.md-typeset h2 {
  margin-top: var(--pg-section-gap);
  padding-top: var(--pg-section-padding);
  border-top: var(--pg-divider-width) solid var(--pg-divider-color);
}

.md-typeset h3 {
  margin-top: var(--pg-subsection-gap);
}

/* === Section summary box (the blockquote under each heading) === */

.md-typeset blockquote {
  background: var(--pg-summary-bg);
  border-left: var(--pg-summary-border-width) solid var(--pg-summary-border-color);
  border-radius: var(--pg-radius);
  padding: var(--pg-summary-padding);
  color: var(--md-default-fg-color);
}

.md-typeset blockquote p {
  margin-top: 0;
  margin-bottom: calc(var(--pg-block-gap) / 2);
}

.md-typeset blockquote p:last-child {
  margin-bottom: 0;
}

/* === Roomier tables and code === */

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: var(--pg-table-cell-padding);
}

.md-typeset pre > code {
  line-height: var(--pg-code-line-height);
}

/* === Previous / Next links: smaller, so they do not compete with the content === */

.md-typeset .pg-nav {
  font-size: var(--pg-nav-font-size);
  opacity: var(--pg-nav-opacity);
}

.md-typeset .pg-nav p {
  margin: 0;
}

/* === Diagrams: scroll sideways instead of shrinking on small screens === */

.md-typeset .pg-diagram {
  overflow-x: auto;
}

/* === Phones and small tablets === */

@media screen and (max-width: 44.984375em) {
  .md-typeset .pg-diagram .mermaid {
    min-width: var(--pg-diagram-min-width-phone);
  }

  .md-typeset .pg-diagram::before {
    content: "Swipe sideways to see the whole diagram";
    display: block;
    /* Stays in view while the diagram underneath scrolls sideways */
    position: sticky;
    left: 0;
    font-size: var(--pg-diagram-hint-font-size);
    color: var(--pg-diagram-hint-color);
  }

  /* Wide text diagrams and code scroll sideways; a slightly smaller font shows more of each line */
  .md-typeset pre > code {
    font-size: var(--pg-code-font-size-phone);
  }

  .md-typeset h2 {
    margin-top: var(--pg-section-gap-phone);
    padding-top: var(--pg-section-padding-phone);
  }

  .md-typeset blockquote {
    padding: var(--pg-summary-padding-phone);
  }
}

/* === Space between the reading column and the side navigation === */

/* 60em is where the theme starts showing a side column next to the content */
@media screen and (min-width: 60em) {
  .md-content__inner {
    margin-left: var(--pg-content-side-gap);
    margin-right: var(--pg-content-side-gap);
  }
}

/* === Large monitors: use more of the width for content, tables and diagrams === */

@media screen and (min-width: 100em) {
  .md-grid {
    max-width: var(--pg-grid-max-width-wide);
  }

  .md-content__inner {
    margin-left: var(--pg-content-side-gap-wide);
    margin-right: var(--pg-content-side-gap-wide);
  }
}

/* === Vertical dividers between the guide list, the content and the table of contents === */

/* 76.25em is where the theme shows the guide list; 60em is where it shows the table of contents */
@media screen and (min-width: 76.25em) {
  /* The inner scroll area fills the column height; the outer sidebar element does not */
  .md-sidebar--primary .md-sidebar__scrollwrap {
    border-right: var(--pg-divider-width) solid var(--pg-divider-color);
  }
}

@media screen and (min-width: 60em) {
  .md-sidebar--secondary .md-sidebar__scrollwrap {
    border-left: var(--pg-divider-width) solid var(--pg-divider-color);
  }
}

/* === Button that hides / shows the guide list (added by javascripts/layout.js) === */

/* Qualified with the theme's classes so it beats the theme's own header-button display rule */
.md-header .md-header__button.pg-nav-toggle {
  display: none;
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
}

@media screen and (min-width: 76.25em) {
  .md-header .md-header__button.pg-nav-toggle {
    display: inline-block;
  }

  .pg-nav-hidden .md-sidebar--primary {
    display: none;
  }
}