/*
 * influential pkgdown article stylesheet
 *
 * pkgdown-only counterpart of influentialVignette.css.
 *
 * No wrapper is required in the vignette/article Rmd.
 *
 * Current pkgdown Bootstrap 5 article structure:
 *   .template-article main#main     -> article body (Bootstrap col-md-9)
 *   .template-article aside #toc   -> article TOC  (Bootstrap col-md-3)
 *
 * Bootstrap retains control of the article/TOC grid. This stylesheet does not
 * take over the width, max-width, margin, padding, border, border-radius,
 * box-shadow, or overflow of main#main.
 *
 * Article styling is scoped to pkgdown article pages so the navbar, homepage,
 * reference pages, article index, and other site pages are not restyled.
 *
 * The :root variables remain global because they are namespaced with --inf-.
 *
 * Install this file as:
 *   pkgdown/extra.css
 */

/* Space between the pkgdown navbar and article content. */
.template-article {
  padding-top: 24px;
}

/* Safe article typography without disturbing Bootstrap's col-md-9 layout. */
.template-article main#main {
  min-width: 0;
  color: var(--inf-text);
  font-family:
    -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.68;
  text-align: left;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.template-article main#main,
.template-article main#main *,
.template-article main#main *::before,
.template-article main#main *::after,
.template-article aside #toc,
.template-article aside #toc *,
.template-article aside #toc *::before,
.template-article aside #toc *::after {
  box-sizing: border-box;
}

/* influential vignette stylesheet
   Modernized for the influential package documentation.
   The original vignette styling was adapted in part from:
   https://github.com/nbarrowman/vtree
*/

/* -------------------------------------------------------------------------- */
/* Design tokens                                                               */
/* -------------------------------------------------------------------------- */

:root {
  --inf-page: #eef2f5;
  --inf-surface: #ffffff;
  --inf-surface-soft: #f7f9fb;
  --inf-surface-blue: #f1f6f9;
  --inf-text: #202a35;
  --inf-muted: #667382;
  --inf-border: #dbe3e9;
  --inf-border-strong: #cbd7df;
  --inf-primary: #176987;
  --inf-primary-dark: #104e67;
  --inf-primary-soft: #e9f4f7;
  --inf-accent: #6a56b3;
  --inf-accent-soft: #f0edfa;
  --inf-gold: #b6772f;
  --inf-gold-soft: #fff6e9;
  --inf-success: #287a58;
  --inf-success-soft: #eef8f3;
  --inf-warning: #a86618;
  --inf-warning-soft: #fff8eb;
  --inf-code: #f4f7f9;
  --inf-shadow-sm: 0 3px 12px rgba(31, 48, 62, 0.06);
  --inf-shadow-md: 0 18px 48px rgba(31, 48, 62, 0.12);
  --inf-radius-sm: 8px;
  --inf-radius: 13px;
  --inf-radius-lg: 20px;
}

/* -------------------------------------------------------------------------- */
/* Main page layout                                                            */
/* -------------------------------------------------------------------------- */



.template-article main#main *, .template-article main#main *::before, .template-article main#main *::after, .template-article aside #toc *, .template-article aside #toc *::before, .template-article aside #toc *::after {
  box-sizing: border-box;
}

.template-article main#main ::selection {
  background: #d9edf4;
  color: #153544;
}

.template-article main#main #top {
  position: absolute;
  top: 0;
}

@media screen and (max-width: 768px) {
  .template-article main#main {
    font-size: 14px;
  }
}

/* -------------------------------------------------------------------------- */
/* Header                                                                      */
/* -------------------------------------------------------------------------- */

.template-article main#main .page-header {
  position: relative;
  overflow: hidden;
  margin: -12px 0 34px;
  padding: 35px 39px 32px;
  text-align: left;
  color: #ffffff;
  background:
    radial-gradient(circle at 93% -24%, rgba(255,255,255,0.18), transparent 235px),
    linear-gradient(135deg, #17263a 0%, #235f78 54%, #6854ab 100%);
  border-radius: 18px;
  box-shadow: 0 14px 32px rgba(28, 58, 78, 0.18);
}

.template-article main#main .page-header::before {
  content: "";
  position: absolute;
  width: 290px;
  height: 290px;
  right: -120px;
  top: -180px;
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
}

.template-article main#main .page-header::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -75px;
  bottom: -120px;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: 50%;
}

.template-article main#main .page-header h1 {
  position: relative;
  z-index: 1;
  margin: 0 0 8px;
  padding: 0;
  color: #ffffff;
  border: 0;
  font-size: clamp(29px, 4vw, 41px);
  line-height: 1.15;
  letter-spacing: -0.026em;
}

.template-article main#main .page-header .subtitle {
  position: relative;
  z-index: 1;
  max-width: 810px;
  margin: 0.25em 0 0;
  color: rgba(255,255,255,0.88);
  font-size: 112%;
  line-height: 1.5;
}

.template-article main#main .page-header .author,
.template-article main#main .page-header .date,
.template-article main#main .page-header h4 {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: 90%;
  font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* Table of contents                                                           */
/* -------------------------------------------------------------------------- */

.template-article aside #toc {
  clear: both;
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  margin: 0 0 35px;
  padding: 18px 22px;
  color: var(--inf-text);
  background:
    linear-gradient(180deg, #fbfdfe 0%, #f2f7f9 100%);
  border: 1px solid var(--inf-border);
  border-radius: 15px;
  box-shadow: var(--inf-shadow-sm);
  font-size: 13px;
  line-height: 1.45;
}

.template-article aside #toc h2 {
  margin: 0 0 8px;
  color: #21323f;
  font-size: 15px;
  font-weight: 760;
  letter-spacing: 0.01em;
}

.template-article aside #toc ul {
  margin: 5px 0;
  padding-left: 22px;
}

.template-article aside #toc ul ul {
  margin: 3px 0;
}

.template-article aside #toc li {
  margin-bottom: 3px;
  line-height: 1.45;
}

.template-article aside #toc a {
  color: var(--inf-primary-dark);
  text-decoration: none;
}

.template-article aside #toc a:hover {
  color: var(--inf-primary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* -------------------------------------------------------------------------- */
/* Headings                                                                    */
/* -------------------------------------------------------------------------- */

.template-article main#main h1,
.template-article main#main h2,
.template-article main#main h3,
.template-article main#main h4,
.template-article main#main h5,
.template-article main#main h6 {
  color: #1e2c38;
  text-align: left;
  text-wrap: balance;
}

.template-article main#main h1 {
  position: relative;
  clear: both;
  margin: 42px 0 18px;
  padding: 0 0 10px;
  border-bottom: 1px solid var(--inf-border);
  font-size: 205%;
  line-height: 1.22;
  letter-spacing: -0.023em;
}

.template-article main#main h1::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 86px;
  height: 4px;
  background: linear-gradient(90deg, var(--inf-primary), var(--inf-accent));
  border-radius: 999px;
}

.template-article main#main h2 {
  margin: 34px 0 15px;
  padding: 0 0 7px;
  border-bottom: 1px solid #e5eaee;
  font-size: 158%;
  line-height: 1.3;
  letter-spacing: -0.015em;
}

.template-article main#main h3 {
  margin: 27px 0 10px;
  padding: 0;
  color: #29404e;
  font-size: 128%;
  line-height: 1.35;
}

.template-article main#main h4 {
  margin: 21px 0 8px;
  color: #344752;
  font-size: 113%;
}

.template-article main#main h5,
.template-article main#main h6 {
  margin-bottom: 6px;
  font-size: 100%;
}

/* -------------------------------------------------------------------------- */
/* Typography and text                                                        */
/* -------------------------------------------------------------------------- */

.template-article main#main p {
  margin: 0.72em 0;
}

.template-article main#main strong {
  color: #1d2e3b;
  font-weight: 740;
}

.template-article main#main em {
  color: #46535e;
}

.template-article main#main blockquote {
  margin: 1.25em 0;
  padding: 0.8em 1em;
  color: #34444f;
  background: #f5f9fb;
  border-left: 4px solid #77adc4;
  border-radius: 0 9px 9px 0;
}

.template-article main#main hr {
  margin: 38px 0;
  border: 0;
  border-top: 1px solid var(--inf-border);
}

.template-article main#main dl {
  margin-left: 0;
}

.template-article main#main dl dt {
  color: #20313e;
  font-weight: 750;
}

.template-article main#main dl dd {
  margin: 4px 0 16px 18px;
}

.template-article main#main ul,
.template-article main#main ol {
  margin-top: 0.5em;
  margin-bottom: 1em;
}

.template-article main#main li {
  margin-bottom: 5px;
}

.template-article main#main ul ul,
.template-article main#main ol ol,
.template-article main#main ul ol,
.template-article main#main ol ul {
  margin-bottom: 0;
}

/* -------------------------------------------------------------------------- */
/* Links                                                                       */
/* -------------------------------------------------------------------------- */

.template-article main#main a {
  color: var(--inf-primary);
  text-decoration: none;
}

.template-article main#main a:hover {
  color: var(--inf-primary-dark);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.template-article main#main a:visited {
  color: #5f4fa0;
}

.template-article main#main a[href^="http:"],
.template-article main#main a[href^="https:"] {
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

.template-article main#main .back-to-top {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 20px 0 4px;
  padding: 6px 10px;
  color: #526675 !important;
  background: #f5f8fa;
  border: 1px solid var(--inf-border);
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 700;
  text-decoration: none !important;
}

.template-article main#main .back-to-top:hover {
  color: var(--inf-primary-dark) !important;
  background: #edf5f8;
  border-color: #c9dde6;
}

/* -------------------------------------------------------------------------- */
/* Overview and package logo                                                   */
/* -------------------------------------------------------------------------- */

.template-article main#main .overview-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 180px;
  align-items: center;
  gap: 32px;
  margin: 0.8em 0 1.35em;
}

.template-article main#main .overview-text {
  min-width: 0;
}

.template-article main#main .overview-text p {
  margin: 0;
}

.template-article main#main .overview-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  min-height: 180px;
  padding: 10px;
  overflow: visible;
  background: #ffffff;
  border: 1px solid var(--inf-border);
  border-radius: 20px;
  box-shadow: 0 10px 28px rgba(30, 52, 67, 0.13);
}

.template-article main#main .overview-logo .figure,
.template-article main#main .overview-logo p {
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
}

.template-article main#main .overview-logo img,
.template-article main#main .overview-logo-img {
  display: block !important;
  width: 100% !important;
  max-width: 160px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 auto !important;
  padding: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none !important;
}

/* -------------------------------------------------------------------------- */
/* Callout boxes                                                               */
/* -------------------------------------------------------------------------- */

.template-article main#main .influential-note,
.template-article main#main .influential-tip,
.template-article main#main .influential-warning,
.template-article main#main .section-lead {
  position: relative;
  margin: 1.35em 0;
  padding: 0.95em 1.08em 0.95em 1.15em;
  border: 1px solid var(--inf-border);
  border-radius: 11px;
  box-shadow: 0 3px 11px rgba(31, 48, 62, 0.04);
  line-height: 1.58;
}

.template-article main#main .influential-note {
  background: linear-gradient(135deg, #f3f8fa, #f9fbfc);
  border-left: 4px solid #579bb8;
}

.template-article main#main .influential-tip {
  background: linear-gradient(135deg, #f1faf5, #f8fcfa);
  border-left: 4px solid #4fa879;
}

.template-article main#main .influential-warning {
  background: linear-gradient(135deg, #fff8ec, #fffdf8);
  border-left: 4px solid #d99a39;
}

.template-article main#main .section-lead {
  margin-top: 4px;
  color: #52616d;
  background: linear-gradient(135deg, #f8fafb, #f4f8fa);
  border-left: 4px solid #789caf;
  font-size: 13.5px;
}

.template-article main#main .influential-note strong:first-child,
.template-article main#main .influential-tip strong:first-child,
.template-article main#main .influential-warning strong:first-child,
.template-article main#main .section-lead strong:first-child {
  font-weight: 770;
}

/* -------------------------------------------------------------------------- */
/* Workflow cards                                                              */
/* -------------------------------------------------------------------------- */

.template-article main#main .workflow-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 13px;
  margin: 20px 0 29px;
}

.template-article main#main .workflow-grid > p:empty,
.template-article main#main .method-grid > p:empty {
  display: none !important;
}

.template-article main#main .workflow-card {
  grid-column: span 2;
  position: relative;
  min-height: 158px;
  padding: 0;
  color: inherit !important;
  text-align: left;
  background: linear-gradient(145deg, #ffffff, #f7fafb);
  border: 1px solid var(--inf-border);
  border-radius: 14px;
  box-shadow: var(--inf-shadow-sm);
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.template-article main#main .workflow-card-link {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 156px;
  padding: 18px 18px 17px;
  color: inherit !important;
  text-decoration: none !important;
}

.template-article main#main .workflow-card:nth-child(4) {
  grid-column: 2 / span 2;
}

.template-article main#main .workflow-card:nth-child(5) {
  grid-column: 4 / span 2;
}

.template-article main#main .workflow-card:hover {
  transform: translateY(-2px);
  border-color: #bfd5df;
  box-shadow: 0 8px 22px rgba(31, 48, 62, 0.10);
}

.template-article main#main .workflow-title {
  display: block;
  margin: 5px 0 7px;
  color: #243b48;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
}

.template-article main#main .workflow-description {
  display: block;
  margin: 0;
  color: var(--inf-muted);
  font-size: 12.5px;
  line-height: 1.55;
}

.template-article main#main .workflow-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 29px;
  height: 29px;
  margin-bottom: 5px;
  color: #ffffff;
  background: linear-gradient(135deg, #277b98, #6653ae);
  border-radius: 9px;
  font-size: 12px;
  font-weight: 800;
}

/* -------------------------------------------------------------------------- */
/* Featured method cards                                                       */
/* -------------------------------------------------------------------------- */

.template-article main#main .method-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 13px;
  margin: 19px 0 27px;
}

.template-article main#main .method-card {
  display: block;
  min-height: 144px;
  padding: 0;
  color: inherit !important;
  text-align: left;
  background: #ffffff;
  border: 1px solid var(--inf-border);
  border-radius: 13px;
  box-shadow: var(--inf-shadow-sm);
  overflow: hidden;
  transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.template-article main#main .method-card-link {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 142px;
  padding: 17px 17px 16px;
  color: inherit !important;
  text-decoration: none !important;
}

.template-article main#main .method-card:hover {
  transform: translateY(-2px);
  border-color: #c9c0e8;
  box-shadow: 0 8px 22px rgba(31, 48, 62, 0.10);
}

.template-article main#main .method-title {
  display: block;
  margin: 7px 0 6px;
  color: #263947;
  font-size: 15px;
  font-weight: 760;
  line-height: 1.35;
}

.template-article main#main .method-description {
  display: block;
  margin: 0;
  color: var(--inf-muted);
  font-size: 12.2px;
  line-height: 1.52;
}

.template-article main#main .method-badge {
  display: inline-flex;
  padding: 3px 8px;
  color: #57468f;
  background: var(--inf-accent-soft);
  border: 1px solid #ddd5f2;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 760;
  letter-spacing: 0.02em;
}

/* -------------------------------------------------------------------------- */
/* Method spotlight                                                            */
/* -------------------------------------------------------------------------- */

.template-article main#main .method-highlight {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 3px 14px;
  align-items: start;
  margin: 5px 0 22px;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, #f5f9fb 0%, #f9f8fd 100%);
  border: 1px solid var(--inf-border);
  border-left: 4px solid var(--inf-primary);
  border-radius: 12px;
  box-shadow: var(--inf-shadow-sm);
}

.template-article main#main .method-highlight-accent {
  border-left-color: var(--inf-accent);
  background:
    linear-gradient(135deg, #f7f7fc 0%, #fbf9fd 100%);
}

.template-article main#main .method-highlight .method-kicker {
  grid-column: 1 / -1;
  margin-bottom: 4px;
  color: var(--inf-primary);
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}

.template-article main#main .method-highlight-accent .method-kicker {
  color: #5d4aa1;
}

.template-article main#main .method-highlight strong {
  min-width: 115px;
  color: #223642;
  font-size: 14px;
}

.template-article main#main .method-highlight > span:last-child {
  color: var(--inf-muted);
  font-size: 12.7px;
  line-height: 1.55;
}

/* -------------------------------------------------------------------------- */
/* Shiny app callouts                                                          */
/* -------------------------------------------------------------------------- */

.template-article main#main .app-callout {
  margin: 18px 0 26px;
  padding: 19px 20px 18px;
  background:
    radial-gradient(circle at 100% 0%, rgba(106,86,179,0.08), transparent 180px),
    linear-gradient(145deg, #ffffff, #f7fafb);
  border: 1px solid var(--inf-border);
  border-radius: 14px;
  box-shadow: var(--inf-shadow-sm);
}

.template-article main#main .app-label {
  display: inline-flex;
  padding: 3px 8px;
  color: #19614b;
  background: #e9f7f0;
  border: 1px solid #d5ecdf;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 780;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

.template-article main#main .app-callout h3 {
  margin: 8px 0 6px;
  color: #243843;
  font-size: 16px;
}

.template-article main#main .app-callout p {
  color: #566570;
  font-size: 13px;
}

.template-article main#main .app-callout pre {
  margin: 12px 0;
  border-left-color: #6e5ab5;
}

/* -------------------------------------------------------------------------- */
/* Tables                                                                      */
/* -------------------------------------------------------------------------- */

.template-article main#main table {
  width: auto;
  max-width: 100%;
  margin: 1.35em auto;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  color: var(--inf-text);
  background: #ffffff;
  border: 1px solid var(--inf-border);
  border-radius: 10px;
  box-shadow: 0 2px 9px rgba(31, 48, 62, 0.04);
  font-size: 12.7px;
}

.template-article main#main table th {
  padding: 9px 11px;
  text-align: left;
  color: #263946;
  background: #eef4f6;
  border: 0;
  border-bottom: 1px solid var(--inf-border-strong);
  font-weight: 760;
}

.template-article main#main table td {
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid #e7ecef;
  line-height: 1.45;
}

.template-article main#main table tbody tr:last-child td {
  border-bottom: 0;
}

.template-article main#main table tbody tr:nth-child(even) {
  background: #fbfcfd;
}

.template-article main#main table tbody tr:hover {
  background: #f5f9fb;
}

.template-article main#main .table,
.template-article main#main .pagedtable-wrapper {
  max-width: 100%;
  overflow-x: auto;
}

/* Paged tables generated by rmarkdown */
.template-article main#main .pagedtable {
  border: 1px solid var(--inf-border) !important;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: var(--inf-shadow-sm);
}

/* -------------------------------------------------------------------------- */
/* Code                                                                        */
/* -------------------------------------------------------------------------- */

.template-article main#main code {
  font-family:
    "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Monaco,
    "Courier New", monospace;
}

.template-article main#main p > code,
.template-article main#main li > code,
.template-article main#main td > code,
.template-article main#main dd > code {
  padding: 2px 5px;
  color: #21556a;
  background: #edf4f7;
  border: 1px solid #e0ebf0;
  border-radius: 5px;
  font-size: 90%;
  white-space: normal;
  overflow-wrap: anywhere;
}

.template-article main#main pre {
  max-width: 100%;
  margin: 11px 0 19px;
  padding: 14px 15px;
  overflow-x: auto;
  color: #1f2933;
  background: var(--inf-code);
  border: 1px solid #e0e7eb;
  border-left: 4px solid #79a9bc;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.36);
  line-height: 1.5;
  tab-size: 2;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  word-break: normal;
}

.template-article main#main pre code {
  display: block;
  max-width: 100%;
  padding: 0;
  color: inherit;
  background: transparent;
  border: 0;
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
  word-break: normal;
  font-size: 12.2px;
}

/* Pandoc/rmarkdown syntax-highlighted source blocks */
.template-article main#main div.sourceCode,
.template-article main#main pre.sourceCode,
.template-article main#main pre.sourceCode > code,
.template-article main#main code.sourceCode {
  max-width: 100%;
}

.template-article main#main div.sourceCode {
  margin: 11px 0 19px;
  overflow: hidden;
  border-radius: 8px;
}

.template-article main#main div.sourceCode pre {
  margin: 0;
  overflow-x: auto;
}

.template-article main#main pre.sourceCode code,
.template-article main#main pre.sourceCode code span,
.template-article main#main code.sourceCode span {
  white-space: pre-wrap !important;
  overflow-wrap: anywhere !important;
}

/* Console/output blocks */
.template-article main#main pre:not(.sourceCode) {
  background: #f7f9fa;
  border-left-color: #a4b6c0;
}

/* -------------------------------------------------------------------------- */
/* Figures and images                                                         */
/* -------------------------------------------------------------------------- */

.template-article main#main div.figure {
  margin: 1.55em auto;
  text-align: center;
}

.template-article main#main img {
  display: block;
  max-width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  vertical-align: middle;
}

.template-article main#main p > img:not(.overview-logo-img),
.template-article main#main .figure img:not(.overview-logo-img) {
  border-radius: 10px;
}

.template-article main#main .youtube-thumbnail {
  width: 82%;
  max-width: 760px;
  height: auto;
  margin: 1.5em auto;
  border: 1px solid #d9e1e6;
  border-radius: 13px;
  box-shadow: 0 8px 24px rgba(30, 48, 62, 0.14);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.template-article main#main .youtube-thumbnail:hover {
  transform: translateY(-2px) scale(1.005);
  box-shadow: 0 12px 30px rgba(30, 48, 62, 0.19);
}

/* -------------------------------------------------------------------------- */
/* Footnotes                                                                   */
/* -------------------------------------------------------------------------- */

.template-article main#main .footnotes {
  margin-top: 34px;
  padding-top: 16px;
  color: #5c6872;
  border-top: 1px solid var(--inf-border);
  font-size: 12.5px;
}

.template-article main#main .footnotes ol {
  padding-left: 22px;
}

/* -------------------------------------------------------------------------- */
/* Syntax highlighting                                                         */
/* -------------------------------------------------------------------------- */

.template-article main#main code > span.kw {
  color: #4e5862;
  font-weight: bold;
}

.template-article main#main code > span.dt {
  color: #8d2a29;
}

.template-article main#main code > span.dv {
  color: #2b855e;
}

.template-article main#main code > span.bn,
.template-article main#main code > span.fl,
.template-article main#main code > span.ch,
.template-article main#main code > span.st {
  color: #b52654;
}

.template-article main#main code > span.co {
  color: #6d8794;
  font-style: italic;
}

.template-article main#main code > span.ot {
  color: #08703b;
}

.template-article main#main code > span.al {
  color: #d11f1f;
  font-weight: bold;
}

.template-article main#main code > span.fu {
  color: #8f2424;
  font-weight: bold;
}

.template-article main#main code > span.er {
  color: #a61717;
  background: #f5dddd;
}

/* -------------------------------------------------------------------------- */
/* Responsive refinements                                                      */
/* -------------------------------------------------------------------------- */

@media screen and (max-width: 920px) and (min-width: 761px) {
  .template-article main#main .workflow-grid,
.template-article main#main .method-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .template-article main#main .workflow-card,
.template-article main#main .workflow-card:nth-child(4),
.template-article main#main .workflow-card:nth-child(5) {
    grid-column: auto;
  }
}

@media screen and (max-width: 760px) {
  .template-article main#main .page-header {
    margin-top: 0;
    padding: 27px 22px 25px;
    border-radius: 14px;
  }

  .template-article aside #toc {
    padding: 15px 16px;
  }

  .template-article main#main h1 {
    font-size: 180%;
  }

  .template-article main#main h2 {
    font-size: 145%;
  }

  .template-article main#main .overview-intro {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .template-article main#main .overview-logo {
    width: 150px;
    min-height: 150px;
    margin: 0 auto;
    padding: 9px;
  }

  .template-article main#main .overview-logo img,
.template-article main#main .overview-logo-img {
    max-width: 130px !important;
  }

  .template-article main#main .workflow-grid,
.template-article main#main .method-grid {
    grid-template-columns: 1fr;
  }

  .template-article main#main .workflow-card,
.template-article main#main .workflow-card:nth-child(4),
.template-article main#main .workflow-card:nth-child(5) {
    grid-column: auto;
    min-height: 0;
  }

  .template-article main#main .workflow-card-link {
    min-height: 0;
  }

  .template-article main#main .method-card,
.template-article main#main .method-card-link {
    min-height: 0;
  }

  .template-article main#main .method-highlight {
    grid-template-columns: 1fr;
  }

  .template-article main#main .method-highlight strong {
    min-width: 0;
  }

  .template-article main#main .youtube-thumbnail {
    width: 100%;
  }

  .template-article main#main table {
    font-size: 11.8px;
  }

  .template-article main#main pre,
.template-article main#main pre code {
    font-size: 11.4px;
  }
}

/* -------------------------------------------------------------------------- */
/* Print                                                                       */
/* -------------------------------------------------------------------------- */

@media print {
  .template-article main#main {
    background: #ffffff !important;
  }

  .template-article main#main {
    color: #000000;
    background: #ffffff !important;
  }

  .template-article main#main .page-header {
    color: #000000;
    background: #ffffff;
    border: 1px solid #d8d8d8;
    box-shadow: none;
  }

  .template-article main#main .page-header h1,
.template-article main#main .page-header .subtitle,
.template-article main#main .page-header .author,
.template-article main#main .page-header .date {
    color: #000000;
  }

  .template-article aside #toc,
.template-article main#main .workflow-card,
.template-article main#main .method-card,
.template-article main#main .method-highlight,
.template-article main#main .app-callout,
.template-article main#main .influential-note,
.template-article main#main .influential-tip,
.template-article main#main .influential-warning,
.template-article main#main .section-lead {
    box-shadow: none;
  }

  .template-article main#main .back-to-top {
    display: none !important;
  }

  .template-article main#main a {
    color: #000000;
  }

  .template-article main#main pre {
    white-space: pre-wrap;
    break-inside: avoid;
  }

  .template-article main#main table,
.template-article main#main .figure,
.template-article main#main .method-highlight,
.template-article main#main .app-callout {
    break-inside: avoid;
  }
}