/* =========================================================
   GeneBean — Learn Documentation Theme (Nature)
   Token-driven, Academic, Calm, Botanical
========================================================= */

/* =========================================================
   COLOR TOKENS — NATURE PALETTE
========================================================= */

:root {
  /* Canvas */
  --gb-learn-bg: #f4f6f2;              /* soft paper / fog */
  --gb-learn-text-primary: #1f2a1f;    /* deep forest */
  --gb-learn-text-secondary: #3b4a3b;  /* muted pine */
  --gb-learn-text-muted: #6f7d6f;      /* moss */

  /* Headings */
  --gb-learn-heading: #182318;         /* dark evergreen */

  /* Dividers */
  --gb-learn-divider: #c9d3c4;          /* lichen */
  --gb-learn-divider-soft: #e1e6de;

  /* Quotes / Notes */
  --gb-learn-quote-bg: #eef3ec;         /* leaf paper */
  --gb-learn-quote-border: #8fa68f;     /* sage */

  /* Code */
  --gb-learn-pre-bg: #1e261e;           /* forest night */
  --gb-learn-code-bg: #e6ede6;          /* pale moss */
  --gb-learn-code-text: #dce6dc;        /* soft mint */

  /* Links */
  --gb-learn-link: #3b6f4a;             /* fern green */
  --gb-learn-link-underline: #9bbfa8;

  /* Tables */
  --gb-learn-table-border: #cdd7cd;
  --gb-learn-table-header-bg: #dde6dd;
}

/* =========================================================
   WORKSPACE
========================================================= */

.learn-workspace {
    margin-left: auto;
    margin-right: auto;
    background: #14161a;
    color: var(--gb-learn-text-primary);
    padding: 12px 12px;
    max-width: stretch;
    /* margin: 0 auto; */
    font-family: "Source Serif 4", "Georgia", serif;
    font-size: 16.5px;
    line-height: 1.75;
}
/* =========================================================
   HEADINGS
========================================================= */

.learn-workspace h1,
.learn-workspace h2,
.learn-workspace h3,
.learn-workspace h4 {
  color: var(--gb-learn-heading);
}

.learn-workspace h1 {
  font-size: 32px;
  font-weight: 600;
  margin: 0 0 24px;
}

.learn-workspace h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 48px 0 16px;
}

.learn-workspace h3 {
  font-size: 19px;
  font-weight: 600;
  margin: 32px 0 12px;
}

.learn-workspace h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 24px 0 8px;
}

/* Divider under major headings */
.learn-workspace h1::after,
.learn-workspace h2::after {
  content: "";
  display: block;
  height: 1px;
  margin-top: 12px;
  background: linear-gradient(
    to right,
    var(--gb-learn-divider),
    transparent
  );
}

/* =========================================================
   TEXT
========================================================= */

.learn-workspace p {
  margin: 0 0 20px;
  color: var(--gb-learn-text-primary);
  text-align: justify;
}

.learn-workspace strong {
  font-weight: 600;
}

.learn-workspace em {
  font-style: italic;
  color: var(--gb-learn-text-secondary);
}

/* =========================================================
   LISTS
========================================================= */

.learn-workspace ul,
.learn-workspace ol {
  margin: 16px 0 24px 28px;
}

.learn-workspace li {
  margin-bottom: 8px;
}

/* =========================================================
   BLOCKQUOTES / NOTES
========================================================= */

.learn-workspace blockquote {
  margin: 32px 0;
  padding: 16px 24px;

  border-left: 4px solid var(--gb-learn-quote-border);
  background: var(--gb-learn-quote-bg);

  color: var(--gb-learn-text-secondary);
  font-style: italic;
}

/* =========================================================
   CODE — METHODS STYLE
========================================================= */

.learn-workspace pre {
  background: var(--gb-learn-pre-bg);
  padding: 16px 20px;
  margin: 24px 0;

  border-radius: 6px;
  overflow-x: auto;

  font-family: "JetBrains Mono", monospace;
  font-size: 14px;
  line-height: 1.6;
  color: var(--gb-learn-code-text);
}

.learn-workspace code {
  background: var(--gb-learn-code-bg);
  padding: 2px 6px;
  border-radius: 4px;

  font-family: "JetBrains Mono", monospace;
  font-size: 0.95em;
  color: var(--gb-learn-heading);
}

/* Prevent double styling */
.learn-workspace pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* =========================================================
   HORIZONTAL RULE
========================================================= */

.learn-workspace hr {
  border: none;
  height: 1px;
  margin: 48px 0;
  background: linear-gradient(
    to right,
    var(--gb-learn-divider-soft),
    transparent
  );
}

/* =========================================================
   LINKS
========================================================= */

.learn-workspace a {
  color: var(--gb-learn-link);
  text-decoration: none;
  border-bottom: 1px solid var(--gb-learn-link-underline);
}

.learn-workspace a:hover {
  border-bottom-color: var(--gb-learn-link);
}

/* =========================================================
   TABLES
========================================================= */

.learn-workspace table {
  width: 100%;
  border-collapse: collapse;
  margin: 32px 0;
}

.learn-workspace th,
.learn-workspace td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--gb-learn-table-border);
}

.learn-workspace th {
  background: var(--gb-learn-table-header-bg);
  font-weight: 600;
  text-align: left;
}

/* =========================================================
   IMAGES & FIGURES
========================================================= */

.learn-workspace img {
  max-width: 100%;
  display: block;
  margin: 32px auto;
}

.learn-workspace img + em {
  display: block;
  text-align: center;
  font-size: 14px;
  color: var(--gb-learn-text-muted);
  margin-top: 8px;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
  .learn-workspace {
    padding: 32px 24px;
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .learn-workspace {
    padding: 24px 16px;
  }
}

/* =========================================================
   MERMAID DIAGRAMS
========================================================= */

/* Only affect Mermaid inside Learn content */
.learn-canvas .mermaid svg {
  max-width: 100%;
}

/* Nodes */
.learn-canvas .mermaid .node rect,
.learn-canvas .mermaid .node polygon {
  rx: 6;
  ry: 6;
  stroke-width: 1.5px;
}

/* Node text */
.learn-canvas .mermaid .node text {
  font-weight: 500;
  fill: #111827;
}

/* Arrows */
.learn-canvas .mermaid .edgePath path {
  stroke-width: 1.4px;
  stroke-linecap: round;
}

/* Arrow heads */
.learn-canvas .mermaid marker path {
  fill: #374151;
}

/* Improve vertical spacing */
.learn-canvas .mermaid .node {
  padding: 6px;
}
.mermaid {
    text-align: center;
}

/*Print*/

@media print {

  /* Hide non-content UI */
  .learn-sidebar,
  .learn-section-nav,
  #learn-citation-box,
  #learn-ai-dock,
  #learn-ai-trigger,
  .learn-collapse-toggle,
  #learn-cite-trigger,
  #learn-download-pdf,
  .learn-section-divider,
  footer,
  #foot_content,
  .footer-content,
  .footer-footnotes,
  .related-platforms {
    display: none !important;
    visibility: hidden !important;
  }

  /* Reset layout containers */
  #workspace-canvas,
  .learn-canvas,
  .learn-workspace {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Remove any grid/flex side columns */
  .learn-canvas,
  .learn-canvas.is-collapsed {
    grid-template-columns: 1fr !important;
  }

  /* Make printable content fill page */
  #learn-md-content {
    display: block !important;
    width: 100% !important;
    max-width: 800px !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  #learn-md-content img {
    max-width: 100% !important;
    height: auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  #learn-md-content h1,
  #learn-md-content h2,
  #learn-md-content h3,
  #learn-md-content h4 {
    page-break-after: avoid;
    break-after: avoid;
  }
  /* Allow full document pagination */
  #workspace-canvas,
  .learn-canvas,
  .learn-workspace,
  #learn-md-content {
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }
  html, body {
    height: auto !important;
    overflow: visible !important;
  }
}
/* ---------------------------------------------------------
   PDF DOWNLOAD BUTTON (MATCH CITE STYLE)
--------------------------------------------------------- */

#learn-download-pdf {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-top: 8px;
  padding: 2px 35px;

  border-radius: 999px;
  border: 1px solid rgb(29 27 27 / 23%);

  background: var(--gb-md-surface-soft);
  background-color: rgba(255,255,255,0.08);

  color: #c1c3c8;
  font-weight: 600;
  font-size: 15px;

  cursor: pointer;
  opacity: 0.75;

  transition:
    opacity 160ms ease,
    background-color 160ms ease,
    box-shadow 220ms ease,
    border-color 200ms ease;

  position: relative;
  left: 10px;
}

#learn-download-pdf:hover {
  opacity: 1;
  border-color: var(--gb-md-divider);
  box-shadow: 0 6px 18px rgba(0,0,0,0.18);
}

#learn-download-pdf:active {
  transform: scale(0.97);
}

#learn-download-pdf:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--gb-md-link-underline),
    0 8px 22px rgba(0,0,0,0.25);
}
#learn-download-pdf svg {
  position: absolute;
  width: 12px;
  height: 12px;
  left: 7px;
  top: 7px;
}
.learn-section-divider {
  margin: 10px 0 6px 0;
}
/* ---------------------------------------------------------
   ACTION BUTTON GROUP
--------------------------------------------------------- */

.learn-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: baseline;
}