// Ref:
// - https://getbootstrap.com/docs/5.3/utilities/spacing/
// - https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
// - https://quarto.org/docs/output-formats/html-themes-more.html
// - https://getbootstrap.com/docs/5.3/utilities/text

/*-- scss:defaults --*/
$h2-font-size: 1.5rem;
$h3-font-size: 1.3rem;

/*-- scss:mixins --*/
$headings-font-weight: 300 !default;

/*-- scss:rules --*/
$label-class-color: mix($primary, $indigo-500, 20%);
$label-method-color: mix($primary, $cyan-600, 20%);
$label-function-color: mix($primary, $pink-700, 20%);
$label-exception-color: mix($primary, $red-600, 20%);
$label-property-color: mix($primary, $teal-600, 20%);
$label-constant-color: mix($primary, $orange-500, 20%);
$label-typealias-color: mix($primary, $yellow-500, 20%);
$label-cli-color: mix($primary, $green-600, 20%);
$label-cli-group-color: mix($primary, $green-600, 20%);
$label-mcp-tool-color: #e6194B;
$label-mcp-resource-color: #3cb44b;
$label-mcp-resource-template-color: #f032e6;
$label-mcp-prompt-color: #4363d8;
$label-mcp-color: mix($primary, $purple-600, 20%);

$signature-background-color: shade-color(tint-color($primary, 96%), 2%);

$font-family-monospace: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

// Selectors for similar groups of elements that are created by the renderer
$docstring-sections: ":is(.doc-parameters, .doc-other-parameters, .doc-type-parameters, .doc-returns, .doc-yields, .doc-receives, .doc-raises, .doc-warns, .doc-attributes, .doc-parameter-attributes, .doc-init-parameters, .doc-see-also, .doc-examples)";
$doc-object-names: "span.doc-object-name:is(.doc-class-name, .doc-method-name, .doc-module-name, .doc-function-name, .doc-alias-name, .doc-attribute-name, .doc-type-name, .doc-typevar)";

a {
   text-decoration: none;
}

a.gdls-link {
   text-decoration: underline;
   text-underline-offset: 0.25em;
   text-decoration-thickness: 0.125em;
}

a.gdls-code {
   font-family: $font-family-monospace;
   font-size: 0.875em;
}

// Set headings boldness back to the bootstrap default.
// quarto changes it for h1, h2, h3!
h1, .h2, h2, .h2, h3, .h3 {
   @extend .fw-medium;
}

// Title headings get extra weight
h1.title {
   font-weight: 600 !important;
}

// Title headings get a larger font size on desktop
@media (min-width: 992px) {
   h1.title, .title.h1 {
      font-size: 2.3rem;
   }
}

// Remove h2 underline (Quarto/Bootstrap adds border-bottom to h2 elements)
h2, .h2 {
   border-bottom: none;
   padding-bottom: 0;
}

// Changelog version headings: add a Lucide-style tag glyph and code-like type.
h1.changelog-version,
h2.changelog-version {
    display: flex;
    align-items: center;
    font-family: $font-family-monospace;
    font-size: 1.6rem;
}

h1.changelog-version::before,
h2.changelog-version::before {
    content: "";
    width: 1.15em;
    height: 1.15em;
    flex: 0 0 1.15em;
    transform: translateY(0.08em);
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 11 3H4v7l9.59 9.59a2 2 0 0 0 2.82 0l4.18-4.18a2 2 0 0 0 0-2.82Z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.59 13.41 11 3H4v7l9.59 9.59a2 2 0 0 0 2.82 0l4.18-4.18a2 2 0 0 0 0-2.82Z'/%3E%3Cline x1='7' y1='7' x2='7.01' y2='7'/%3E%3C/svg%3E") no-repeat center / contain;
}

h5, .h5 {
   @extend .mt-3;
}

header p {
   @extend .mb-2;
}

.description {
   font-style: italic;

   @media (max-width: 767.98px) {
      padding-bottom: 1em;
   }
}

table:not(.gt_table) {
   @extend .table-bordered;
}

// Summary tables used in reference pages (Methods, Attributes sections)
// Override Bootstrap's .table-bordered styles for cleaner appearance
table.gd-summary-table {
   border: none;
   margin: 1em 0;

   thead {
      display: none;
   }

   td, th {
      border: none;
      padding: 0.5em 0.75em;
      vertical-align: top;
   }

   // Subtle separator between rows
   td {
      border-top: 1px solid var(--bs-border-color, #dee2e6);
   }

   tr:first-child td {
      border-top: none;
   }

   // Name column styling - use code font for method/function names
   td:first-child {
      width: 40%;
      font-weight: 500;
      font-family: $font-family-monospace;

      a {
         color: var(--bs-body-color);
         text-decoration: underline;
         text-underline-offset: 0.2em;

         &:hover {
            color: var(--bs-link-color);
         }
      }
   }

   // Description column - de-emphasize, match prose font
   td:last-child {
      color: var(--bs-secondary-color, #6c757d);
      font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
   }
}

body.quarto-dark table.gd-summary-table td:last-child {
   color: var(--bs-body-color);
}

.table > tbody {
   // quarto adds a bottom color that is different from the border color,
   // that looks good the default
   border-bottom-color: $table-border-color;
}

// The default background color for the dropdown is
// off-white and it washes out the text color.
.navbar .dropdown-item {
   color: $gray-800;
}


/*---------------------------------- Reference Page -----------------------------------*/
.doc-reference section.doc-group > dl {
  @extend .table;
  border-top-style: dashed;
  border-bottom-style: dashed;
  padding-top: 0.5em;
}

.doc-reference section.doc-group > dl > dt {
  margin-left: 0px !important;
}

.doc-reference dd > p:last-child {
  margin-bottom: 0;
}

.doc-reference dt a {
  color: inherit;
  text-decoration: underline;
  font-weight: bold;
  font-family: $font-family-monospace;
  font-size: 0.875em;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 0.125em;
  word-break: initial;
}

.doc-api-page .badge {
  position: relative;
  top: -3px;
}

/*------------------------------------- API Page --------------------------------------*/

// Remove h2 underlines on API reference pages (Quarto/Bootstrap adds border-bottom
// to all h2 elements; we suppress it for doc section headings and group headings)
h2.doc-parameters,
h2.doc-type-parameters,
h2.doc-returns,
h2.doc-attributes,
h2.doc-functions,
h2.doc-methods,
h2.doc-classes,
h2.doc-type-aliases,
h2.doc-group {
  font-size: 22px;
  border-bottom: none;
  padding-bottom: 0;
}

// docstring object-name
header span.doc-object-name,
h1 span.doc-object-name,
h2 span.doc-object-name,
h3 span.doc-object-name,
h4 span.doc-object-name {
  font-family: $font-family-monospace;
  font-size: 1.25rem;
}

.doc-object span.doc-object-name:not(h1.title > span) {
  opacity: 0.85;
}

.doc-subject > p {
  font-style: italic;
}

// docstring object symbols
.content code.doc-symbol {
  font-size: 0.9rem;
}

// docstring signatures
.doc-usage-source {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}

.doc-usage-source p {
  margin-bottom: 0rem;
  font-size: 0.7rem;
  text-transform: uppercase;
}

.doc-usage-source > p:first-child {
  color: #AAA;
}

.doc-usage-source a {
  color: steelblue !important;
  text-decoration: underline;
  font-weight: 600;
}

.doc-signature div.sourceCode {
  margin-top: 0.15rem;
  border-radius: 0 !important;
}

.doc-signature > div:first-child {
   background-color: $signature-background-color;
}

.doc-signature code {
   max-height: 20rem;
   overflow: auto;
}

.doc-signature > p:first-child {
   @extend .my-3;
   border-radius: 0.25rem;
}

.doc-signature > p:first-child code {
   @extend .p-2;
   display: block;
}

.doc-signature > p:first-child code a {
   color: $primary;
}

.doc-text:has(+section) {
  margin-bottom: 2rem;
}

// Warnings section — styled as a warning alert (matches RST .. warning:: styling)
section:has(> h2.doc-warnings, > h3.doc-warnings) {
  border-left: 4px solid #D97706;
  background-color: #FFFBEB;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #1f2937;

  > :is(h2, h3) {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 0;
    margin-bottom: 0.25rem;

    &::before {
      content: "\26A0\FE0F ";
    }
  }

  > p {
    margin-bottom: 0;
    color: #1f2937;
  }
}

// Notes section — styled as an info callout (matches RST .. note:: styling)
section:has(> h2.doc-notes, > h3.doc-notes) {
  border-left: 4px solid #3B82F6;
  background-color: #EFF6FF;
  padding: 0.75rem 1rem;
  border-radius: 4px;
  margin-top: 1rem;
  margin-bottom: 1rem;
  color: #1f2937;

  > :is(h2, h3) {
    font-size: 0.875rem;
    font-weight: 600;
    color: #1f2937;
    margin-top: 0;
    margin-bottom: 0.25rem;

    &::before {
      content: "\2139\FE0F ";
    }
  }

  > p {
    margin-bottom: 0;
    color: #1f2937;
  }
}

// docstring sections with definition-items

#{$docstring-sections} dl > dt {
  font-weight: normal;
}

#{$docstring-sections} dl > dd {
  @extend .mb-0;
}

#{$docstring-sections} dl > dt:not(:first-child) {
  @extend .mt-3;
}

#{$docstring-sections} dl > dd > table {
   min-width: 33%;
   width: 0;
}

#{$docstring-sections} dl > dd > table > thead {
   border-top: 0rem solid $border-color;
   border-bottom: 0.15em solid $border-color;
}

#{$docstring-sections} dl > dd > table td {
   @extend .px-2;
   @extend .py-1;
}

// Definitions that are code
#{$docstring-sections} dt code,
.doc-signature > p > code {
   display: block;
   font-weight: normal;
}

.doc-text dt code {
   @extend .p-1;
   font-weight: normal;
}

#{$docstring-sections} dt code a,
.doc-signature > p > code a {
   color: inherit;
   text-decoration: none;
}

// docstring spacing and indentation
section.doc-attributes > section.doc-attribute,
section.doc-methods > section.doc-method {
   @extend .ps-4;
   border-left: 0.025rem solid $gray-500;
   backgroud-color: cyan;
}

// docstring section parameters
#{$docstring-sections} .doc-parameter-name {
  font-weight: bold;
}

h2#{$docstring-sections} {
  font-size: 1.295rem;
}

// right sidebar ("On this page")
#toc-title {
  font-weight: 600 !important;
  font-size: 15px;
  color: dimgray;
  text-transform: uppercase;
}

// sidebar
.sidebar nav li > a > code {
   color: $code-color;
   background-color: $gray-100;
   padding: 0.075rem 0.075rem;
}

.gd-ref-sidebar #quarto-sidebar .sidebar-item-text {
  font-family: $font-family-monospace;
}

#{$doc-object-names}::before {
  @extend .px-1;
  font-size: 0.9rem;
  font-family: monospace;
  margin-right: 0.5rem;
  border-radius: 0.25rem;
}

.sidebar #{$doc-object-names}::before {
  font-size: 0.55rem;
}

// docstring object labels
$all_labels: (
  class,
  dataclass,
  namedtuple,
  typeddict,
  protocol,
  abc,
  enum,
  method,
  classmethod,
  staticmethod,
  function,
  async,
  exception,
  property,
  constant,
  typealias,
  cli,
  cli-group,
  mcp-tool,
  mcp-resource,
  mcp-resource-template,
  mcp-prompt,
  mcp
);
$class-like-labels: (class, dataclass, namedtuple, typeddict, protocol, abc, enum);
$method-like-labels: (method, classmethod, staticmethod);

.content span.doc-label::after {
  @extend .fw-normal;
  @extend .small;
  font-family: $font-family-monospace;
  font-size: 0.785rem;
  padding: 0.125rem 0.25rem;
  margin-left: 1rem;
  vertical-align: middle;
  border-radius: 0.25rem;
  border-width: 1px;
  border-style: solid;
}

@each $label in $all_labels {
  .content span.doc-label-#{$label}::after {
    content: "#{$label}";
  }
}

.content {
  @each $label in $class-like-labels {
    span.doc-label-#{$label}::after {
      color: $label-class-color;
      border-color: $label-class-color;
      background-color: tint-color($label-class-color, 95%);
    }
  }
}

.content {
  @each $label in $method-like-labels {
    span.doc-label-#{$label}::after {
      color: $label-method-color;
      border-color: $label-method-color;
      background-color: tint-color($label-method-color, 95%);
    }
  }
}

.content span.doc-label-function::after,
.content span.doc-label-async::after {
  color: $label-function-color;
  border-color: $label-function-color;
  background-color: tint-color($label-function-color, 95%);
}

.content span.doc-label-property::after {
  color: $label-property-color;
  border-color: $label-property-color;
  background-color: tint-color($label-property-color, 95%);
}

.content span.doc-label-constant::after {
  color: $label-constant-color;
  border-color: $label-constant-color;
  background-color: tint-color($label-constant-color, 95%);
}

.content span.doc-label-typealias::after {
  color: $label-typealias-color;
  border-color: $label-typealias-color;
  background-color: tint-color($label-typealias-color, 95%);
}

.content span.doc-label-cli::after {
  color: $label-cli-color;
  border-color: $label-cli-color;
  background-color: tint-color($label-cli-color, 95%);
}

.content span.doc-label-cli-group::after {
  content: "cli-group";
  color: $label-cli-group-color;
  border-color: $label-cli-group-color;
  background-color: tint-color($label-cli-group-color, 95%);
}

// MCP label styles
.content span.doc-label-mcp-tool::after {
  content: "tool";
  color: $label-mcp-tool-color;
  border-color: $label-mcp-tool-color;
  background-color: tint-color($label-mcp-tool-color, 95%);
}

.content span.doc-label-mcp-resource::after {
  content: "resource";
  color: $label-mcp-resource-color;
  border-color: $label-mcp-resource-color;
  background-color: tint-color($label-mcp-resource-color, 95%);
}

.content span.doc-label-mcp-resource-template::after {
  content: "resource template";
  color: $label-mcp-resource-template-color;
  border-color: $label-mcp-resource-template-color;
  background-color: tint-color($label-mcp-resource-template-color, 95%);
}

.content span.doc-label-mcp-prompt::after {
  content: "prompt";
  color: $label-mcp-prompt-color;
  border-color: $label-mcp-prompt-color;
  background-color: tint-color($label-mcp-prompt-color, 95%);
}

.content span.doc-label-mcp::after {
  content: "mcp";
  color: $label-mcp-color;
  border-color: $label-mcp-color;
  background-color: tint-color($label-mcp-color, 95%);
}

// MCP capability tiles
$label-mcp-completions-color: #911eb4;
$label-mcp-instructions-color: #f58231;

.mcp-capability-tiles {
  max-width: 28rem;
  margin-bottom: 1.5rem;

  > p {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem;
    margin: 0;
    padding-top: 10px;
  }
}

.mcp-tile {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.85rem;
  border-radius: 0.375rem;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid;
}

.mcp-tile-label {
  flex: 1;
}

.mcp-tile-count {
  font-weight: 700;
  font-size: 1rem;
  margin-left: 0.5rem;
}

.mcp-tile-tools {
  color: #e6194B;
  border-color: #e6194B;
  background-color: tint-color(#e6194B, 92%);
}

.mcp-tile-resources {
  color: #3cb44b;
  border-color: #3cb44b;
  background-color: tint-color(#3cb44b, 92%);
}

.mcp-tile-templates {
  color: #f032e6;
  border-color: #f032e6;
  background-color: tint-color(#f032e6, 92%);
}

.mcp-tile-prompts {
  color: #4363d8;
  border-color: #4363d8;
  background-color: tint-color(#4363d8, 92%);
}

.mcp-tile-instructions {
  color: #f58231;
  border-color: #f58231;
  background-color: tint-color(#f58231, 92%);
}

.mcp-tile-completions {
  color: #911eb4;
  border-color: #911eb4;
  background-color: tint-color(#911eb4, 92%);
}

// Adorn callables with ()
span.doc-method-name::after,
dt a.doc-method-name::after {
  content: "()";
}

// Dark mode overrides
// Uses both selectors to match Bootstrap 5 (data-bs-theme) and Quarto (body class)
[data-bs-theme="dark"] {
  // Right sidebar (TOC) code: inherit text color, no background
  .sidebar nav li > a > code {
    color: inherit;
    background-color: transparent;
  }

  // Parameter/return/raises dt code blocks: use light text on dark background
  // The generic 'dt code span' rule is critical: Quarto's syntax highlighting CSS
  // sets 'code span { color: #003B4F }' which overrides inherited colors on all spans
  #{$docstring-sections} dt code {
    color: #e2e8f0 !important;
    background-color: #2d3748 !important;
  }

  #{$docstring-sections} dt code span {
    color: #e2e8f0 !important;
  }

  #{$docstring-sections} dt code .doc-parameter-name {
    color: #f7fafc !important;
  }

  #{$docstring-sections} dt code .doc-parameter-annotation,
  #{$docstring-sections} dt code .doc-parameter-annotation-sep,
  #{$docstring-sections} dt code .doc-parameter-default,
  #{$docstring-sections} dt code .doc-parameter-default-sep {
    color: #cbd5e0 !important;
  }

  // Signature block
  .doc-signature div.sourceCode {
    background-color: #2d3748 !important;
  }

  .doc-signature code {
    color: #e2e8f0 !important;
  }

  .doc-signature code span:not(.sig-class, .sig-name, .cn-none, .cn-bool, .op) {
    color: #e2e8f0 !important;
  }

  // Attribute signature (uses <p><code> rather than div.sourceCode)
  .doc-signature:is(.doc-attribute, .doc-type-alias) {
    code {
      background-color: #2d3748 !important;
      color: #e2e8f0 !important;
    }

    .doc-parameter-name,
    .doc-parameter-annotation-sep,
    .doc-parameter-annotation {
      color: white !important;
    }
  }

  // Warning callout
  section:has(> h2.doc-warnings, > h3.doc-warnings) {
    background-color: #422006 !important;
    border-color: #d97706 !important;
    color: #fef3c7 !important;

    > :is(h2, h3) {
      color: #fbbf24 !important;
    }

    > p {
      color: #fef3c7 !important;
    }
  }

  // Notes callout
  section:has(> h2.doc-notes, > h3.doc-notes) {
    background-color: #1e3a5f !important;
    border-color: #3b82f6 !important;
    color: #dbeafe !important;

    > :is(h2, h3) {
      color: #93c5fd !important;
    }

    > p {
      color: #dbeafe !important;
    }
  }

  // Quarto callouts (versionadded, versionchanged, etc.)
  .callout {
    color: var(--bs-body-color) !important;

    .callout-title-container {
      color: var(--bs-body-color) !important;
    }

    .callout-body p {
      color: var(--bs-body-color) !important;
    }
  }

  // Blog listing metadata and titles
  .quarto-post {
    .listing-date,
    .listing-author {
      color: var(--bs-body-color);
    }

    .listing-title a {
      color: var(--bs-body-color);
    }
  }
}


/* ============================================================================
   General site styles (merged from great-docs.css)
   ============================================================================ */

/* Theme loading - hide page until theme is applied to prevent flash */
html.theme-loading {
    visibility: hidden;
}

html.theme-loading body {
    visibility: hidden;
}

/* General heading weight -- handled by SCSS @extend .fw-medium */

/* Reduce top margin on reference page object titles */
h2.title {
    margin-top: 0.5rem;
    border-bottom: none;
    padding-bottom: 0;
}

.table a {
    text-underline-offset: 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: inherit;
    font-weight: bold;
    font-size: 0.875em;
    word-break: initial;
    text-decoration-thickness: 2px;
}

/* Signature highlighting - class name (e.g., "Graph" in Graph.add_node) */
code span.sig-class {
    color: #0e84b5;
    font-weight: 600;
}

/* Signature highlighting - method/function name (e.g., "add_node" in Graph.add_node) */
code span.sig-name {
    color: #4758AB;
    font-weight: 600;
}

/* Signature highlighting - None constant */
code span.cn-none {
    color: #7D4E9E;
    font-weight: 500;
}

/* Signature highlighting - True/False boolean constants */
code span.cn-bool {
    color: #0077AA;
    font-weight: 600;
}

/* Signature highlighting - operators (=, **, etc.) - override Quarto default */
#cb1 code span.op {
    color: #D14D00;
    font-weight: 500;
}

/* Spacer between overloaded function signatures */
#cb1 code span.overload-spacer {
    display: block;
    height: 0.35em;
    user-select: none;
}

.navbar-brand img {
    max-height: 45px;
    padding-right: 0px;
    margin-left: 5px;
    margin-right: 12px;
    transition: transform 0.3s ease;
}

.navbar-brand img:hover {
    transform: scale(1.15);
}

body {
    background-color: var(--gd-bg-primary, #FCFEFF);
}

p a {
    color: black;
    text-decoration: underline;
    text-underline-offset: 4px;
}

li a {
    color: black;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ==========================================================================
   Citations & Bibliography (Quarto citeproc output)
   Theme-aware via --gd-* tokens, so light/dark stay consistent. Without these
   rules, inline citations fall through to the generic link color (black in
   light mode, so they don't read as links) and the reference list inherits
   Bootstrap defaults with no spacing between entries.
   ========================================================================== */

/* Inline citations, e.g. (Knuth 1984): distinct accent color with a dotted
   underline in both modes so they're clearly navigable cross-references. */
.citation a[role="doc-biblioref"] {
    color: var(--gd-citation-color);
    text-decoration: underline dotted;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

.citation a[role="doc-biblioref"]:hover {
    color: var(--gd-citation-color);
    text-decoration-style: solid;
}

/* Separate a manually-placed reference list from the body. When an author puts
   `::: {#refs}` under their own heading, #refs sits in a content section
   (.level1); border that section so the rule lands above the heading. Scoped to
   .level1 so it does NOT double up with the appendix border below. The metrics
   mirror Quarto's #quarto-appendix (2rem above the rule, 1.5rem below) so the
   manual and auto-generated paths look identical. */
section.level1:has(> #refs) {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gd-border-color);
}

/* Zero the heading's own top margin so the gap below the rule equals the
   section padding (otherwise the heading's default margin makes the whitespace
   above and below the rule uneven). Matches the appendix heading (margin-top:0). */
section.level1:has(> #refs) > :first-child {
    margin-top: 0;
}

/* Fallback when citeproc appends a bare #refs with no section wrapper. */
#refs:not(section > #refs) {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--gd-border-color);
}

/* Auto-generated bibliographies render in Quarto's #quarto-appendix block,
   which already supplies a top border for separation. Quarto's default theme
   gives it a light background and border that don't adapt to dark mode, so the
   reference list shows up as a white card with low-contrast text. Re-theme it. */
html.quarto-dark #quarto-appendix.default,
body.quarto-dark #quarto-appendix.default {
    background-color: transparent;
    border-top-color: var(--gd-border-color);
}

/* Quarto renders the appendix bibliography title at body-text size, which looks
   inconsistent next to a manually-authored "## References" section heading (a
   full-size section heading). Promote it to the section-heading scale so the
   References section looks the same whether the heading is auto-generated or
   authored by hand. Two ids + !important override Quarto's own
   `.quarto-appendix-heading { font-size: 1em !important }`. */
#quarto-appendix #quarto-bibliography > .quarto-appendix-heading {
    font-size: 1.85rem !important;
    font-weight: 500;
    margin-bottom: 1rem;
}

/* Reference list: slightly smaller and softened for hierarchy, with breathing
   room between entries (Bootstrap leaves them flush against each other). Use
   0.9em to match Quarto's own appendix rule
   (`#quarto-appendix .quarto-appendix-contents > *:not(h2) { font-size: .9em }`)
   so a manually-placed #refs is the same size as the auto-generated one. */
#refs {
    font-size: 0.9em;
    color: var(--gd-text-secondary);
}

#refs .csl-entry {
    margin-bottom: 0.6rem;
}

#refs .csl-entry:last-child {
    margin-bottom: 0;
}

/* Unify the hanging indent across both paths. Quarto's appendix applies the
   hanging indent per-entry (body flush left, wrapped lines indented 1em), but a
   manually-placed #refs gets the default `div.hanging-indent` rule that shifts
   the whole list by 1.5em. Force the per-entry form everywhere so every citation
   starts hard left with consistent wrap indentation. */
#refs.hanging-indent {
    margin-left: 0;
}

#refs.hanging-indent .csl-entry {
    margin-left: 1em;
    text-indent: -1em;
}

/* Author/funder icon links in the landing page margin sidebar */
.column-margin a:has(.bi),
.column-margin a:has(.fa-brands),
.column-margin a:has(.ror-sidebar-icon) {
    color: #495057;
    text-decoration: none;
}

.column-margin a:has(.bi):hover,
.column-margin a:has(.fa-brands):hover,
.column-margin a:has(.ror-sidebar-icon):hover {
    color: #212529;
}

/* ── Blended-homepage metadata sidebar ──
   In blended mode the first UG page becomes the site index page.  Project
   metadata (links, license, community, …) is placed in a panel that mirrors
   the right-margin column of a normal homepage.
   We use a custom class (.gd-meta-sidebar) instead of Quarto’s .column-margin
   because .column-margin triggers slimcontent/page-full body & main classes
   that change the outer CSS-grid template, shifting the left sidebar and
   content area out of alignment with other user-guide pages.  With a custom
   class, body/main keep the same classes as regular UG pages and the metadata
   panel is positioned via CSS absolute positioning.

   Because toc: false + no margin content causes Quarto to add "fullcontent"
   to <body>, the outer grid template collapses the right-margin tracks and
   uses different left-side tracks than a plain floating page.  We override
   the grid template back to the default floating layout so the sidebar and
   content align with subsequent UG pages. */
@media (min-width: 992px) {
    /* Fix outer grid: match the default floating (no-modifier) template so the
       left sidebar and content area align with regular UG pages. */
    body.nav-sidebar.floating.fullcontent .page-columns {
        grid-template-columns:
            [screen-start] 1.5em
            [screen-start-inset] 5fr
            [page-start] minmax(25px, 50px)
            [page-start-inset] minmax(50px, 150px)
            [body-start-outset] minmax(25px, 50px)
            [body-start] 1.5em
            [body-content-start] minmax(500px, calc(800px - 3em))
            [body-content-end] 1.5em
            [body-end] minmax(25px, 50px)
            [body-end-outset] minmax(50px, 150px)
            [page-end-inset] minmax(25px, 50px)
            [page-end] 5fr
            [screen-end-inset] 1.5em
            [screen-end] !important;
    }
    main.content:has(.gd-meta-sidebar) {
        position: relative;
        overflow: visible;
    }
    .gd-meta-sidebar {
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: 1.5em;
        width: 200px;
    }
    .gd-meta-sidebar h3,
    .gd-meta-sidebar h4 {
        font-size: 0.9em;
        font-weight: 600;
        margin-top: 0.8em;
        margin-bottom: 0.25em;
        border-bottom: none;
        padding-bottom: 0;
    }
    .gd-meta-sidebar h3:first-child,
    .gd-meta-sidebar h4:first-child {
        margin-top: 0;
    }
}
@media (max-width: 991.98px) {
    .gd-meta-sidebar {
        border-top: 1px solid var(--bs-border-color, #dee2e6);
        padding-top: 1em;
        margin-top: 2em;
    }
}

dt {
    min-height: 32px;
    overflow-x: visible;
    margin-left: -4px;
}

dd {
    padding-left: 1.5rem;
}

/* Lists inside definition descriptions (e.g., Returns with bullet points) */
dd > p + ul,
dd > p + ol {
    margin-top: -0.5em;  /* pull list closer to the preceding paragraph */
}

dd > ul > li::marker,
dd > ol > li::marker {
    color: #9ca3af;  /* lighter bullet / number color */
}

/* API reference section headings (Parameters, Returns, Examples, etc.) */
h2.doc-section {
    font-size: 22px;
    border-bottom: none;
    padding-bottom: 0;
}

/* Ensure parameter descriptions are indented within doc sections */
.doc-section-parameters dd {
    padding-left: 1.5rem;
    margin-left: 0;
}

.doc-section-parameters dd p {
    margin-left: 0;
}

/* Warnings section: h2 header above, body in callout box */
.doc-section-warnings > h2 {
    color: Crimson;
    font-weight: 600;
    margin-bottom: 0.5rem;
    border-left: none;
    border-bottom: none;
    padding-left: 0;
}

.doc-section-warnings > h2::before {
    content: "⚠️ ";
}

.doc-section-warnings > p {
    margin: 0.5rem 0;
    padding: 0.75rem 1rem;
    background-color: #FEF2F2;
    border-left: 4px solid #DC2626;
    border-radius: 4px;
    font-size: 0.9rem;
}

.table td {
    padding-left: 0.5rem;
    text-indent: 0;
}

code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.875em;
    color: rgb(18, 18, 18);
}

.blockquote {
    font-size: 13px;
    background-color: #E8E8E8;
    border-left-color: #4682B4;
}

p,h1,h2,h3,#toc-title,#toc-function-reference,.nav-link,.table {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Great Tables (gt) ship their own font as a self-contained component. The
   `p { font-family }` rule above targets bare <p> elements, so it overrides
   gt's font on the report title — which gt wraps in a <p> — while non-<p>
   cells like the subtitle keep gt's font, producing a mismatched header.
   Let gt's own content inherit gt's font instead. This is mode-independent
   (the rule above is not dark-mode specific). Mirrors `table:not(.gt_table)`
   above and the dark-mode gt exemption in the dark-mode section. */
.gt_table p,
.gt_table li,
.gt_table dd,
.gt_table dt {
    font-family: inherit;
}

.cell-output.cell-output-stdout {
    border-style: solid;
    border-width: 1px;
    border-color: #A1A1A165;
    border-radius: 4px;
    padding: 0.4em;
    background-color: #F7F1EB65;
    margin-bottom: 12px;
}

summary::marker {
  font-size: 1.5em;
}

.parameter-name {
    margin-right: -10px;
}

/* #toc-title -- handled by SCSS rules above */

#toc-title > ul {
    font-size: 14px;
}

/* Prevent Quarto from collapsing the TOC entry list */
#TOC > ul.collapse {
    display: block !important;
    visibility: visible !important;
}

#quarto-margin-sidebar {
    margin-left: 20px;
    padding-top: 30px;
}

#quarto-margin-sidebar nav ul li  {
    padding-top: 3px;
    color: #595959;
}

#quarto-margin-sidebar nav ul li a {
    color: #595959;
}

#quarto-margin-sidebar nav ul li a:hover {
    color: #333;
}

#quarto-margin-sidebar nav ul li a.active {
    color: #0d6efd;
    font-weight: 500;
}

#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.me-auto > li > a:hover {
    background-color: rgb(240, 112, 0);
    color: white;
    border-radius: 5px;
}

#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.me-auto > li > a {
    color: var(--gd-navbar-text);
    font-weight: bold;
}

/* --- Disable sidebar section collapsing --- */

/* Prevent the section heading text from triggering collapse */
a.sidebar-item-text.sidebar-link.text-start[data-bs-toggle="collapse"] {
    pointer-events: none;
    cursor: default;
}

/* Hide the chevron toggle element entirely */
a.sidebar-item-toggle.text-start {
    display: none !important;
}

/* Keep all sidebar sections permanently expanded */
#quarto-sidebar ul.collapse.sidebar-section {
    display: block !important;
    visibility: visible !important;
    height: auto !important;
}

/* Remove pointer cursor from sidebar containers */
div.sidebar-item-container {
    cursor: default !important;
}

/* In mixed sidebar layouts (root-level pages interleaved with section headers),
   add top breathing room at transitions between plain page links and section headers.
   Both rules are scoped to #quarto-sidebar to beat the high-specificity gd-sidebar-float
   rule that otherwise collapses all sidebar-item margins to 0.1rem.
   The plain→section direction uses more space so section headers feel anchored;
   the section→plain direction uses less since the section's indented children
   already provide visual separation. */
#quarto-sidebar li.sidebar-item:not(.sidebar-item-section) + li.sidebar-item-section {
    margin-top: 0.5rem;
}
#quarto-sidebar li.sidebar-item-section + li.sidebar-item:not(.sidebar-item-section) {
    margin-top: 0.3rem;
}

/* Hover effect for clickable sidebar links (not section headers).
   Uses a ::before pseudo-element so hover never shifts layout. */
#quarto-sidebar .sidebar-link[href] {
    position: relative;
}

#quarto-sidebar .sidebar-link[href]::before {
    content: "";
    position: absolute;
    inset: -3px -8px -3px -10px;
    border-radius: 6px;
    opacity: 0;
    transition: opacity 0.15s ease;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0.04);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
}

#quarto-sidebar .sidebar-link[href]:hover::before {
    opacity: 1;
}

#quarto-sidebar a.sidebar-item-text.sidebar-link.active {
    color: rgb(244, 121, 0);
    text-decoration: underline;
    text-decoration-thickness: 3px;
    text-decoration-color: rgba(101, 180, 237, 0.75);
    text-underline-offset: 3px;
}

#api-reference > h1 {
    margin: 0;
}

.navbar-title {
    font-family: Inter, Roboto, "Helvetica Neue", "Arial Nova", "Nimbus Sans", Arial, sans-serif;
    font-weight: bold;
    color: var(--gd-navbar-text);
    border-style: solid;
    border-width: 2px;
    border-radius: 8px;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 3px;
    padding-bottom: 4px;
}

/* logo in the navbar title */
.navbar-logo {
    height: 24px;
    width: auto;
    max-width: 100%;
    padding-right: 4px;
    display: block;
    flex-shrink: 0;
}

/* Version badge in navbar title */
.version-badge {
    font-size: 0.65em;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.55);
    background-color: rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    padding: 1px 6px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.02em;
    cursor: default;
}

#quarto-sidebar {
    background-color: #FAFAFD50;
}

/* On mobile the sidebar overlays page content, so remove transparency */
@media (max-width: 991.98px) {
    #quarto-sidebar {
        background-color: #FAFAFD;
    }

    /* Make the fixed-position sidebar scrollable within the viewport */
    #quarto-sidebar.show {
        bottom: 0;
        min-height: 0;
        overflow-y: auto;
    }

    /* Smoother open/close transition for the sidebar.
       Bootstrap collapse-horizontal animates width; we just improve the
       easing and prevent content reflow by pinning inner min-width. */
    #quarto-sidebar.sidebar-navigation.collapsing {
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        overflow: hidden;

        > .sidebar-menu-container {
            min-width: 280px;
        }
    }
}

/* ── Single-page section: expand content into sidebar space ──
   When a custom section has only one page the left sidebar is omitted.
   Shift the content column leftward so it occupies the sidebar area too,
   keeping the TOC on the right intact. */
@media (min-width: 992px) {
    body.gd-section-no-sidebar #quarto-content {
        grid-template-columns:
            [screen-start] 1.5em
            [screen-start-inset] 4.65fr
            [page-start page-start-inset body-start-outset body-start] 1.5em
            [body-content-start] minmax(500px, calc(1050px - 3em))
            [body-content-end] 1.5em
            [body-end] 35px
            [body-end-outset] minmax(75px, 145px)
            [page-end-inset] 35px
            [page-end] 5fr
            [screen-end-inset] 1.5em
            [screen-end] !important;
    }
}

/* Sidebar items: base styling with smart line-breaking for long names.
   Line breaks are controlled by <wbr> tags inserted by sidebar-wrap.js;
   overflow-wrap is intentionally NOT set so the browser only breaks at
   those designated points (not in the middle of words). */
#quarto-sidebar .sidebar-item-text {
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.85em;
    display: block;
    max-width: 100%;
    white-space: normal;
    hyphens: none;
}

/* API/CLI reference sidebar monospace -- handled by SCSS .gd-ref-sidebar rule above */

/* Keep section headers (categories) in their original sans-serif uppercase style */
a.sidebar-item-text.sidebar-link.text-start > span {
    text-transform: uppercase;
    font-weight: 600;
    color: dimgray;
    font-family: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 1em;
    hyphens: none;
}

.sidebar-menu-container {
    border-bottom-style: solid;
    border-bottom-width: 3px;
    border-bottom-color: #E7EAF6;
}

#quarto-sidebar .sidebar-item .menu-text {
    font-size: 15px;
}

/* Keep reference sidebar items at the smaller size */
.gd-ref-sidebar #quarto-sidebar .sidebar-item .menu-text {
    font-size: 12px;
}

.sidebar-item-section {
    padding-bottom: 8px;
}

/* CLI reference: present command groups (e.g. SKILL, TERMSHOW) as small uppercase
   pills so they read as command groups, distinct from leaf commands. Scoped to the
   CLI reference pages via the doc-cli-reference body class. */
body.doc-cli-reference #quarto-sidebar .sidebar-item-section
    > .sidebar-item-container
    > .sidebar-item-text
    .menu-text {
    display: inline-block;
    text-transform: uppercase;
    font-family: $font-family-monospace;
    font-size: 0.7rem;
    letter-spacing: 0.04em;
    line-height: 1.2;
    padding: 0.1rem 0.4rem;
    border-radius: 0.25rem;
    border: 1px solid $label-cli-group-color;
    color: $label-cli-group-color;
    background-color: tint-color($label-cli-group-color, 90%);
}

/* Give each CLI command group a little breathing room above its pill. */
body.doc-cli-reference #quarto-sidebar .sidebar-item-section {
    margin-top: 0.4rem;
}

/* The first command group follows a plain leaf command (no section
   padding-bottom above it), so it needs extra top margin to match the gap that
   later groups (e.g. TERMSHOW) get from the preceding group's padding-bottom. */
body.doc-cli-reference
    #quarto-sidebar
    li.sidebar-item:not(.sidebar-item-section)
    + li.sidebar-item-section {
    margin-top: 0.9rem;
}

/* ==========================================================================
   Floating Sidebar Navigation (desktop only)
   Transforms #quarto-sidebar into a pinned, independently-scrollable panel
   with blur background, rounded border, and scroll affordances.
   ========================================================================== */

@media (min-width: 992px) {
    #quarto-sidebar.gd-sidebar-float {
        /* Sticky keeps the sidebar in the CSS grid flow.
           JS sets top (stick offset) and max-height (shrinks for footer). */
        display: flex;
        flex-direction: column;
        overflow: hidden !important; /* clip children to rounded corners; override .overflow-auto */
        position: sticky;
        transition: top 0.15s ease, max-height 0.15s ease;
        /* Widen sidebar to reclaim space lost to border+padding.
           Negative margin-right lets it extend slightly into the gap. */
        margin-right: -12px;
        /* align-self keeps the sidebar at the grid-row start so it
           sticks near the top, not stretched to the full row height. */
        align-self: start;
    }

    /* Suppress the old bottom border on the menu container —
       it is now inside the float body. */
    #quarto-sidebar.gd-sidebar-float .sidebar-menu-container {
        border-bottom: none;
    }

    /* Remove default Bootstrap margin-bottom on the sidebar list
       so the float body hugs the last item tightly. */
    #quarto-sidebar.gd-sidebar-float .sidebar-menu-container > ul {
        margin-bottom: 0;
    }

    #quarto-sidebar.gd-sidebar-float .sidebar-menu-container > ul > li:last-child {
        padding-bottom: 7px;
    }

    /* Tighten vertical spacing between nav items inside the float */
    #quarto-sidebar.gd-sidebar-float .sidebar-item {
        margin-top: 0.1rem;
        margin-bottom: 0.1em;
    }

    /* Override the ::before hover pill with a direct background on the link.
       The ::before pseudo extends beyond the scroll container and gets clipped;
       using the link's own background avoids that entirely. */
    #quarto-sidebar.gd-sidebar-float .sidebar-link[href]::before {
        display: none !important;
        content: none !important;
    }

    #quarto-sidebar.gd-sidebar-float .sidebar-link[href] {
        border-radius: 6px;
        padding-left: 8px;
        padding-right: 8px;
        padding-top: 3px;
        padding-bottom: 3px;
        margin-left: -8px;
        margin-right: 0;
        transition: background-color 0.15s ease, box-shadow 0.15s ease;
    }

    #quarto-sidebar.gd-sidebar-float .sidebar-link[href]:hover {
        background-color: rgba(0, 0, 0, 0.04);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    }

    #quarto-sidebar.gd-sidebar-float.sidebar-navigation > * {
        padding-top: 0.4em;
    }

    #quarto-sidebar.gd-sidebar-float > * {
        padding-right: 0;
    }
}



/* Scrollable body */
.gd-sidebar-float-body {
    display: none; /* hidden below 992px */
}

@media (min-width: 992px) {
    .gd-sidebar-float-body {
        display: block;
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        position: relative;
        /* Thin scrollbar for Webkit/Blink */
        scrollbar-width: thin;
        scrollbar-color: rgba(0, 0, 0, 0.15) transparent;

        &::-webkit-scrollbar {
            width: 5px;
        }
        &::-webkit-scrollbar-track {
            background: transparent;
        }
        &::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.12);
            border-radius: 4px;
        }
    }
}

/* Scroll affordance indicators (top / bottom) */
.gd-sidebar-scroll-indicator {
    display: none; /* hidden below 992px */
}

@media (min-width: 992px) {
    /* Indicators are inside .gd-sidebar-float-body (the scroll container)
       and use position:sticky so they pin to the top/bottom of the
       visible scroll area without covering the "Pages" header above. */
    .gd-sidebar-scroll-indicator {
        display: flex;
        align-items: center;
        justify-content: center;
        position: sticky;
        left: 0;
        right: 0;
        min-height: 32px;
        margin-top: -32px;  /* collapse out of flow so content isn't pushed */
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.2s ease;
        z-index: 3;
    }

    .gd-sidebar-scroll-indicator.visible {
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
    }

    .gd-sidebar-scroll-top {
        top: 0;
        background: linear-gradient(to bottom, rgba(250, 250, 253, 0.92) 0%, transparent 100%);
    }

    .gd-sidebar-scroll-bottom {
        bottom: 0;
        position: sticky;
        margin-top: 0;
        margin-bottom: -32px;
        background: linear-gradient(to top, rgba(250, 250, 253, 0.92) 0%, transparent 100%);
    }

    .gd-sidebar-scroll-arrow {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 24px;
        height: 24px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.06);
        color: $gray-600;
        font-size: 0.65rem;
        line-height: 1;
        transition: background 0.15s ease, color 0.15s ease;
    }

    .gd-sidebar-scroll-indicator:hover .gd-sidebar-scroll-arrow {
        background: rgba(0, 0, 0, 0.12);
        color: $gray-800;
    }
}

/* ── Dark mode: Floating Sidebar ── */
body.quarto-dark {
    @media (min-width: 992px) {
        #quarto-sidebar.gd-sidebar-float {
            background: rgba(30, 30, 30, 0.55);
            border-color: rgba(255, 255, 255, 0.10);
            box-shadow: 0 1px 6px rgba(0, 0, 0, 0.25);
        }


        .gd-sidebar-float-body {
            scrollbar-color: rgba(255, 255, 255, 0.15) transparent;

            &::-webkit-scrollbar-thumb {
                background: rgba(255, 255, 255, 0.12);
            }
        }

        #quarto-sidebar.gd-sidebar-float .sidebar-link[href]:hover {
            background-color: rgba(255, 255, 255, 0.08);
            box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.12);
        }

        .gd-sidebar-scroll-top {
            background: linear-gradient(to bottom, rgba(30, 30, 30, 0.92) 0%, transparent 100%);
        }

        .gd-sidebar-scroll-bottom {
            background: linear-gradient(to top, rgba(30, 30, 30, 0.92) 0%, transparent 100%);
        }

        .gd-sidebar-scroll-arrow {
            background: rgba(255, 255, 255, 0.08);
            color: $gray-400;
        }

        .gd-sidebar-scroll-indicator:hover .gd-sidebar-scroll-arrow {
            background: rgba(255, 255, 255, 0.15);
            color: $gray-200;
        }
    }
}

/* Print: hide floating sidebar affordances */
@media print {
    .gd-sidebar-scroll-indicator {
        display: none !important;
    }
}

#quarto-header > nav > div {
    margin-left: 2%;
    margin-right: 2%;
}

.navbar {
	background: var(--gd-navbar-bg);
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.nav-link.active {
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(101, 180, 237, 0.75);
    text-underline-offset: 4px;
}

/* Light-mode navbar overrides (counteract Bootstrap data-bs-theme="dark") */
body.quarto-light .navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.65)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Search button - styled to match dark-mode toggle and GitHub widget */

/* Navbar widget container — groups search, toggle, and GitHub into a flex row */
#gd-navbar-widgets {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    min-width: fit-content;
    flex-wrap: nowrap;
}

/* ----------------------------------------------------------------------
   Mobile navbar: two centered rows
   ----------------------------------------------------------------------
   Below the lg breakpoint Quarto lays the navbar out as a single flex row
   in which the hamburger toggle pushes the brand around, making it
   impossible to truly center the logo/title. We force a deliberate
   two-row layout instead:

     Row 1 — the brand/logo, horizontally centered. The hamburger toggle is
             taken out of flow (absolutely pinned to the left) so its width
             never shifts the brand off-center.
     Row 2 — the widget tray (#gd-navbar-widgets: theme toggle, search,
             GitHub, version) centered as a group.
   -------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Drop the navbar's own vertical padding (Bootstrap defaults to a tall
       ~17px top/bottom) so the two rows sit snug against the header edges
       and page content rides higher on load. */
    .navbar {
        padding-top: 0;
        padding-bottom: 0;
    }

    .navbar .container-fluid {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        position: relative;
        row-gap: 6px;
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Hamburger pinned left and removed from flow so it can't shift the
       brand off-center. `top` is the midpoint between a short text title
       (~44px row) and a max-height logo (~56px row) so it stays vertically
       centered against the brand in both cases. */
    .navbar .navbar-toggler {
        position: absolute;
        left: 10px;
        top: 15px;
        margin: 0;
        z-index: 3;
    }

    /* Row 1: centered brand/logo */
    .navbar .navbar-brand-container.mx-auto {
        order: 1;
        flex: 0 0 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        /* Quarto reserves `calc(100% - 115px)` here for the toggler/tools in
           its single-row layout. Our brand has its own full-width row, so
           reclaim that space (the title's own max-width below still keeps it
           clear of the absolutely-positioned hamburger). */
        max-width: 100%;
    }
    .navbar .navbar-brand-container.mx-auto .navbar-brand {
        margin: 0;
        /* Drop the brand link's own vertical padding: with the title set to
           `display: block` below its pill padding now counts toward layout
           height, so this keeps the header as tight as the logo/short-name
           cases (no extra ~11px). */
        padding-top: 0;
        padding-bottom: 0;
        padding-right: 0;
        max-width: 100%;
        min-width: 0;
    }

    /* Long text display names: navbar-widgets.js first steps the font size
       down to fit; this is the width cap it fits against and the final
       ellipsis fallback when even the smallest step overflows. `display:
       block` keeps the truncation inside the title pill (clipping at the
       brand link instead would slice the pill's border). The 132px cap
       reserves ~66px each side so the (centered) title clears the
       absolutely-positioned hamburger button (~59px wide incl. padding).
       The "…" is a visible nudge that a shorter `display_name` belongs in
       great-docs.yml. Logo brands have no .navbar-title, so they are
       unaffected. */
    .navbar .navbar-title {
        display: block;
        max-width: calc(100vw - 132px);
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Row 2: centered widget tray */
    .navbar .quarto-navbar-tools {
        order: 2;
        flex: 0 0 100%;
        display: flex;
        justify-content: center;
        margin: 0;
        padding: 0;
    }
    .navbar #gd-navbar-widgets {
        justify-content: center;
        flex: 0 1 auto;
        width: auto;
        margin: 0;
    }

    /* If the collapse menu is ever expanded it drops to its own row */
    .navbar #navbarCollapse {
        order: 3;
        flex: 0 0 100%;
    }
}

/* Uniform sizing for all direct widget children in the tray */
#gd-navbar-widgets > #dark-mode-toggle-container,
#gd-navbar-widgets > #gd-keyboard-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}

/* Reset Quarto's auto-margins and ordering on search when inside widget tray */
#gd-navbar-widgets #quarto-search {
    margin-left: 0;
    order: unset;
}

#gd-navbar-widgets #quarto-search.type-overlay .aa-Autocomplete {
    width: 34px;
}

#quarto-search .aa-DetachedSearchButton {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: var(--gd-navbar-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

#quarto-search .aa-DetachedSearchButton:hover {
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.25);
}

#quarto-search .aa-DetachedSearchButton:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

#quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon {
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar #quarto-search.type-overlay .aa-Autocomplete svg.aa-SubmitIcon {
    width: 20px;
    height: 20px;
    margin: 0;
    color: currentColor;
}

#quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonPlaceholder {
    display: none;
}

body.quarto-light .navbar .aa-DetachedSearchButton svg,
body.quarto-light .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon,
body.quarto-light .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon svg,
body.quarto-light .navbar .aa-DetachedSearchButton .aa-SearchIcon,
html.quarto-light .navbar .aa-DetachedSearchButton svg,
html.quarto-light .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon,
html.quarto-light .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon svg,
html.quarto-light .navbar .aa-DetachedSearchButton .aa-SearchIcon,
:root[data-bs-theme="light"] .navbar .aa-DetachedSearchButton svg,
:root[data-bs-theme="light"] .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon,
:root[data-bs-theme="light"] .navbar .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon svg,
:root[data-bs-theme="light"] .navbar .aa-DetachedSearchButton .aa-SearchIcon,
body.quarto-light .navbar .aa-SubmitButton,
body.quarto-light .navbar .aa-SubmitButton svg {
    color: var(--gd-navbar-text) !important;
    fill: var(--gd-navbar-text);
}

body.quarto-light .navbar .quarto-navbar-tools button,
body.quarto-light .navbar .quarto-navbar-tools .quarto-navigation-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: var(--gd-navbar-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

body.quarto-light .navbar .quarto-navbar-tools button:hover,
body.quarto-light .navbar .quarto-navbar-tools .quarto-navigation-tool:hover {
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.25);
}

/* GitHub icon (icon mode) — rendered as .nav-item.compact .nav-link, or
   .gd-navbar-icon when extracted into #gd-navbar-widgets */
body.quarto-light .navbar .nav-item.compact .nav-link,
body.quarto-light .navbar .gd-navbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: var(--gd-navbar-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

body.quarto-light .navbar .nav-item.compact .nav-link:hover,
body.quarto-light .navbar .gd-navbar-icon:hover {
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.25);
}

#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.ms-auto > li {
    padding-right: 5px
}

.shrink-example .cell-output table {
    zoom: 60%;
}

// Prevent Quarto/Bootstrap from striping computational output tables
// (Pandas DataFrames, etc.). Quarto injects .table-striped on cell outputs
// but GT tables already opt out via data-quarto-bootstrap="false".
.cell-output table.table-striped > tbody > tr:nth-of-type(odd) > * {
    --bs-table-striped-bg: transparent;
}


// Scale-to-fit: shrinks wide content (tables, GT output) to fill the
// container width.  Apply in .qmd via  :::{.scale-to-fit} ... :::
.scale-to-fit {
    width: 100%;
    position: relative;

    .gd-scale-wrapper {
        transform-origin: top left;
    }

    // Fallback when content is too wide for the min-scale threshold:
    // show at full size with horizontal scrolling.
    &.gd-scale-scrollable {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

footer.footer .nav-footer {
    margin-top: 10px;
}

.nav-footer {
    position: relative;
    z-index: 1;
    border-top-style: solid;
    border-top-width: 1px;
    border-top-color: #AAAAAA40;
}

.nav-footer-left {
    color: rgb(48, 48, 48);
}

.nav-footer-center {
    color: rgb(48, 48, 48);
    text-wrap: balance;
    padding-bottom: 20px;
}

.nav-footer-right {
    color: rgb(48, 48, 48);
}

/* Footer alignment - add left margin to match content area on large viewports */
@media (min-width: 992px) {
    .nav-footer {
        padding-left: calc((100vw - 900px) / 2);
        padding-right: calc((100vw - 900px) / 2);
    }

    .nav-footer-center {
        margin-top: 0.5rem;
    }
}

@media (min-width: 1200px) {
    .nav-footer {
        padding-left: calc((100vw - 1100px) / 2);
        padding-right: calc((100vw - 1100px) / 2);
    }
}

@media (min-width: 1400px) {
    .nav-footer {
        padding-left: calc((100vw - 1300px) / 2);
        padding-right: calc((100vw - 1300px) / 2);
    }
}

/* Footer author links styling */
.nav-footer-center a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}

.nav-footer-center a:hover {
    text-decoration-thickness: 2px;
}

/* Page navigation (prev/next) at bottom of pages */
.nav-page.nav-page-previous a,
.nav-page.nav-page-next a {
    border-style: solid;
    padding-left: 0.5rem;
    border-radius: 8px;
    padding-right: 0.5rem;
    border-width: 1px;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.nav-page-text {
    font-size: 0.875em;
    position: relative;
    top: -1px;
}

/* Stack prev/next nav vertically and center on mobile */
@media (max-width: 576px) {
    .page-navigation {
        flex-direction: column;
        align-items: center;
        gap: 0.5rem;
    }

    .nav-page.nav-page-previous,
    .nav-page.nav-page-next {
        width: auto;
        text-align: center;
    }
}

/* Source link styling */
.source-link {
    font-size: 12px;
    font-weight: 600;
    color: steelblue !important;
    text-decoration: underline !important;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
    letter-spacing: 0.5px;
    transition: color 0.2s ease;
}

.source-link:hover {
    color: #2a5f8a !important;
    text-decoration-thickness: 2px;
}

/* Usage/Source row container */
.usage-source-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: -14px;
}

/* Fix copy button positioning when usage-source-row is inside code-copy-outer-scaffold */
.code-copy-outer-scaffold > .usage-source-row {
    position: relative;
    z-index: 1;
}

.code-copy-outer-scaffold {
    position: relative;
}

// Override Quarto's `div.sourceCode { overflow: auto }` so the outer div
// does NOT scroll — only the <pre> inside scrolls.  This keeps .gd-code-nav
// (position: absolute) anchored to the visible top-right corner.
div.sourceCode {
    overflow: visible;
    position: relative;

    > pre {
        overflow-x: auto;
    }
}

/* ---- Custom copy-code button (gd-code-nav) ---- */
.gd-code-nav {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 3;
    padding: 0.35rem;
}

.gd-code-copy {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    opacity: 0.25;
    transition: opacity 0.15s ease, background-color 0.15s ease,
        color 0.15s ease, border-color 0.15s ease;
}

.code-copy-outer-scaffold:hover .gd-code-copy,
div.sourceCode:hover > .gd-code-nav .gd-code-copy,
.gd-code-copy:focus-visible {
    opacity: 1;
}

.gd-code-copy:hover {
    background-color: rgba(0, 0, 0, 0.06);
    border-color: rgba(0, 0, 0, 0.1);
    color: #495057;
}

.gd-code-copy.gd-code-copied {
    opacity: 1;
    color: #198754;
}

/* Hide Quarto's native copy button (we provide our own) */
.code-copy-button {
    display: none !important;
}

/* Adjust mobile secondary nav positioning */
@media (max-width: 991.98px) {
    #quarto-header > .navbar .container-fluid.d-flex {
        margin-left: 0;
        padding-left: 5px;
    }

    /* Vertically center the toggle button and title in the secondary nav */
    .quarto-secondary-nav .container-fluid.d-flex {
        align-items: center;
        padding-left: 1rem;
    }

    .quarto-secondary-nav-title {
        padding-top: 0;
        margin-bottom: 0.5rem;
        padding-left: 0.5rem;
    }

    /* Reference title bar: "API / ObjectName" or "CLI / cmd" */
    .gd-ref-title {
        display: flex;
        align-items: center;
        gap: 0;
        padding-top: 0;
        padding-left: 0.5rem;
        color: #212529;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .gd-ref-title-prefix {
        font-weight: 600;
        color: #495057;
        flex-shrink: 0;
    }

    .gd-ref-title-sep {
        margin: 0 0.4em;
        color: #adb5bd;
        flex-shrink: 0;
    }

    .gd-ref-title-name {
        font-family: $font-family-monospace;
        font-size: 18px;
        color: #495057;
        overflow: hidden;
        text-overflow: ellipsis;
        position: relative;
        top: 2px;
    }

    body.quarto-dark .gd-ref-title {
        color: #868e96;
    }

    body.quarto-dark .gd-ref-title-prefix,
    body.quarto-dark .gd-ref-title-name {
        color: #ced4da;
    }

    body.quarto-dark .gd-ref-title-sep {
        color: #6c757d;
    }

    /* Style the sidebar toggle to match the top-nav icon buttons */
    .quarto-secondary-nav .quarto-btn-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        padding: 0;
        background: rgba(0, 0, 0, 0.06);
        border: 1px solid rgba(0, 0, 0, 0.15);
        border-radius: 6px;
        color: #495057;
        cursor: pointer;
        transition: all 0.2s ease;
        margin-right: 6px;
        flex-shrink: 0;

        .bi {
            font-size: 1.15rem;
            line-height: 1;
        }

        &:hover {
            background: rgba(0, 0, 0, 0.10);
            border-color: rgba(0, 0, 0, 0.25);
        }

        &:focus {
            outline: none;
            box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
        }
    }

    body.quarto-dark .quarto-secondary-nav .quarto-btn-toggle {
        background: rgba(255, 255, 255, 0.08);
        border-color: rgba(255, 255, 255, 0.18);
        color: #dee2e6;

        &:hover {
            background: rgba(255, 255, 255, 0.14);
            border-color: rgba(255, 255, 255, 0.28);
        }

        &:focus {
            box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
        }
    }

    /* Move margin/sidebar content below main content on mobile (like pkgdown) */
    #quarto-document-content {
        display: flex;
        flex-direction: column;
    }

    /* The column-margin content should appear after main content */
    .column-margin {
        order: 2;
        margin-top: 2rem;
        padding: 0.75rem 1.5rem 1.5rem 1.5rem;
        background-color: #f8f9fa;
        border-radius: 8px;
        border: 1px solid #e9ecef;
    }

    /* Remove top margin from only the first heading */
    .column-margin > div > section:first-child > h3 {
        margin-top: 0.5em;
    }

    /* Ensure all child elements inside column-margin have transparent background */
    .column-margin,
    .column-margin > *,
    .column-margin section,
    .column-margin p,
    .column-margin code {
        background-color: #f8f9fa;
    }

    /* Main content comes first */
    #quarto-document-content > *:not(.column-margin) {
        order: 1;
    }

    /* Style adjustments for the collapsed sidebar content */
    .column-margin h4 {
        font-size: 0.9rem;
        color: #495057;
        border-bottom: 1px solid #dee2e6;
        padding-bottom: 0.5rem;
        margin-top: 1rem;
    }

    .column-margin h4:first-child {
        margin-top: 0;
    }

    /* Add horizontal padding to main content on mobile */
    #quarto-content {
        padding-left: 12px;
        padding-right: 12px;
    }
}

/* ==========================================================================
   GitHub Widget Styles
   ========================================================================== */

#github-widget {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.gh-widget-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: var(--gd-navbar-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
}

.gh-widget-trigger:hover {
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.25);
}

.gh-widget-open .gh-widget-trigger {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.25);
}

.gh-icon {
    flex-shrink: 0;
}

.gh-stats {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: 4px;
}

.gh-stat {
    display: flex;
    align-items: center;
    gap: 3px;
    font-weight: 500;
}

.gh-stat svg {
    opacity: 0.85;
}

.gh-count {
    min-width: 16px;
    text-align: center;
}

.gh-dropdown-arrow {
    margin-left: 2px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.gh-widget-open .gh-dropdown-arrow {
    transform: rotate(180deg);
}

.gh-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 180px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 35, 40, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.gh-widget-open .gh-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gh-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    color: #24292f !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.gh-dropdown-item:hover {
    background: #f6f8fa;
    text-decoration: none !important;
}

.gh-dropdown-item svg {
    color: #57606a;
    flex-shrink: 0;
}

.gh-dropdown-divider {
    height: 1px;
    margin: 4px 0;
    background: #d8dee4;
}

.gh-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    margin-left: auto;
    background: #ddf4ff;
    color: #0969da;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
}

/* ==========================================================================
   Version Selector Widget — mirrors GitHub widget styling
   ========================================================================== */

.gd-version-selector {
    position: relative;
    display: flex;
    align-items: center;
}

.gd-vs-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: var(--gd-navbar-text);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}

.gd-vs-trigger:hover {
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.25);
}

.gd-vs-open .gd-vs-trigger {
    background: rgba(0, 0, 0, 0.12);
    border-color: rgba(0, 0, 0, 0.25);
}

.gd-vs-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
}

.gd-vs-label {
    line-height: 1;
}

.gd-vs-arrow {
    margin-left: 2px;
    opacity: 0.7;
    transition: transform 0.2s ease;
}

.gd-vs-open .gd-vs-arrow {
    transform: rotate(180deg);
}

.gd-vs-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 170px;
    background: #ffffff;
    border: 1px solid #d0d7de;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(31, 35, 40, 0.12);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: all 0.2s ease;
    z-index: 1000;
    overflow: hidden;
}

.gd-vs-open .gd-vs-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.gd-vs-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    color: #24292f !important;
    text-decoration: none !important;
    font-size: 14px;
    font-weight: 500;
    transition: background 0.15s ease;
}

.gd-vs-item:hover {
    background: #f6f8fa;
}

.gd-vs-item-active {
    background: #f0f6ff;
    font-weight: 600;
}

.gd-vs-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    font-size: 12px;
    flex-shrink: 0;
}

.gd-vs-badge-spacer {
    display: inline-block;
    width: 16px;
    flex-shrink: 0;
}

.gd-vs-badge-pre {
    color: #9a6700;
}

.gd-vs-badge-eol {
    color: #cf222e;
}

.gd-vs-check {
    margin-left: auto;
    color: #1a7f37;
    font-size: 12px;
    flex-shrink: 0;
}

/* Compact version selector on mobile — hide version label, show icon only */
@media (max-width: 991.98px) {
    .gd-vs-label {
        display: none;
    }
}

/* Version warning banner */
.gd-version-banner {
    padding: 10px 20px;
    font-size: 14px;
    text-align: center;
    font-weight: 500;
    border-bottom: 1px solid;
}

.gd-version-banner a {
    font-weight: 600;
    text-decoration: underline;
    margin-left: 4px;
}

.gd-version-banner-old {
    background: #fff8c5;
    color: #4d2d00;
    border-color: #d4a72c;
}

.gd-version-banner-old a {
    color: #4d2d00;
}

.gd-version-banner-pre {
    background: #ddf4ff;
    color: #0550ae;
    border-color: #54aeff;
}

.gd-version-banner-pre a {
    color: #0550ae;
}

.gd-version-banner-eol {
    background: #ffebe9;
    color: #82071e;
    border-color: #ff8182;
}

.gd-version-banner-eol a {
    color: #82071e;
}

/* Dark mode overrides for version selector */
body.quarto-dark .gd-vs-trigger,
html.quarto-dark .gd-vs-trigger,
:root[data-bs-theme="dark"] .gd-vs-trigger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

body.quarto-dark .gd-vs-trigger:hover,
html.quarto-dark .gd-vs-trigger:hover,
:root[data-bs-theme="dark"] .gd-vs-trigger:hover {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.25);
}

body.quarto-dark .gd-vs-dropdown,
html.quarto-dark .gd-vs-dropdown,
:root[data-bs-theme="dark"] .gd-vs-dropdown {
    background: var(--gd-bg-secondary);
    border-color: var(--gd-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.quarto-dark .gd-vs-item,
html.quarto-dark .gd-vs-item,
:root[data-bs-theme="dark"] .gd-vs-item {
    color: #adbac7 !important;
}

body.quarto-dark .gd-vs-item:hover,
html.quarto-dark .gd-vs-item:hover,
:root[data-bs-theme="dark"] .gd-vs-item:hover {
    background: #373e47;
}

body.quarto-dark .gd-vs-item-active,
html.quarto-dark .gd-vs-item-active,
:root[data-bs-theme="dark"] .gd-vs-item-active {
    background: #1c3049;
}

body.quarto-dark .gd-vs-check,
html.quarto-dark .gd-vs-check,
:root[data-bs-theme="dark"] .gd-vs-check {
    color: #57ab5a;
}

body.quarto-dark .gd-version-banner-old,
html.quarto-dark .gd-version-banner-old,
:root[data-bs-theme="dark"] .gd-version-banner-old {
    background: #3d2e00;
    color: #e3b341;
    border-color: #5c4400;
}

body.quarto-dark .gd-version-banner-old a,
html.quarto-dark .gd-version-banner-old a,
:root[data-bs-theme="dark"] .gd-version-banner-old a {
    color: #e3b341;
}

body.quarto-dark .gd-version-banner-pre,
html.quarto-dark .gd-version-banner-pre,
:root[data-bs-theme="dark"] .gd-version-banner-pre {
    background: #0d2137;
    color: #539bf5;
    border-color: #1b3a57;
}

body.quarto-dark .gd-version-banner-pre a,
html.quarto-dark .gd-version-banner-pre a,
:root[data-bs-theme="dark"] .gd-version-banner-pre a {
    color: #539bf5;
}

body.quarto-dark .gd-version-banner-eol,
html.quarto-dark .gd-version-banner-eol,
:root[data-bs-theme="dark"] .gd-version-banner-eol {
    background: #3c1118;
    color: #f47067;
    border-color: #5c1a23;
}

body.quarto-dark .gd-version-banner-eol a,
html.quarto-dark .gd-version-banner-eol a,
:root[data-bs-theme="dark"] .gd-version-banner-eol a {
    color: #f47067;
}

/* Inline version badges (gd-badge-new, gd-badge-changed, gd-badge-deprecated) */
.gd-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 600;
    line-height: 1;
    padding: 3px 8px;
    border-radius: 10px;
    vertical-align: middle;
    margin-left: 6px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}

.gd-badge-new {
    background: #dafbe1;
    color: #1a7f37;
    border: 1px solid #a6e3b0;
}

.gd-badge-changed {
    background: #ddf4ff;
    color: #0550ae;
    border: 1px solid #80ccff;
}

.gd-badge-deprecated {
    background: #ffebe9;
    color: #82071e;
    border: 1px solid #ffb8b0;
}

body.quarto-dark .gd-badge-new,
html.quarto-dark .gd-badge-new,
:root[data-bs-theme="dark"] .gd-badge-new {
    background: #0d3117;
    color: #57ab5a;
    border-color: #1b4b27;
}

body.quarto-dark .gd-badge-changed,
html.quarto-dark .gd-badge-changed,
:root[data-bs-theme="dark"] .gd-badge-changed {
    background: #0d2137;
    color: #539bf5;
    border-color: #1b3a57;
}

body.quarto-dark .gd-badge-deprecated,
html.quarto-dark .gd-badge-deprecated,
:root[data-bs-theme="dark"] .gd-badge-deprecated {
    background: #3c1118;
    color: #f47067;
    border-color: #5c1a23;
}

/* Mobile responsive adjustments */
@media (max-width: 991.98px) {
    /* Remove large side margins to align nav titles with page content */
    #quarto-header > nav > div {
        margin-left: 0%;
        margin-right: 0%;
    }

    .container, .container-fluid, .container-xxl, .container-xl,
    .container-lg, .container-md, .container-sm {
        padding-right: calc(var(--bs-gutter-x) * .15);
        padding-left: calc(var(--bs-gutter-x) * .15);
    }

    .navbar-expand-lg .navbar-nav .nav-link {
        padding-left: 0.4rem;
        padding-right: 0.6rem;
        margin-left: -0.2rem;
    }

    /* Keep widget container in a row on mobile */
    #gd-navbar-widgets {
        gap: 4px;
        margin-left: auto;
    }

    /* Make GitHub widget full width when inside collapsed nav */
    .gh-widget-trigger {
        width: 100%;
        justify-content: flex-start;
    }
}

/* Hide Supported by Posit badge at mobile (headroom--frozen would show it) */
@media (max-width: 991.98px) {
    #supported-by-posit {
        display: none !important;
    }
}

/* Reduce content grid side gutters at mobile */
@media (max-width: 767.98px) {
    body .page-columns {
        grid-template-columns:
            [screen-start] 0.5em
            [screen-start-inset page-start page-start-inset body-start-outset body-start body-content-start]
            minmax(0px, 1fr)
            [body-content-end body-end body-end-outset page-end-inset page-end screen-end-inset]
            0.5em [screen-end] !important;
    }
}

@media (max-width: 768px) {
    .gh-stats {
        display: none;
    }

    .gh-widget-trigger {
        padding: 6px 8px;
    }

    .gh-dropdown {
        right: 0;
        min-width: 160px;
    }
}

/* Ensure navbar doesn't clip the dropdown */
#quarto-header,
#quarto-header nav,
#quarto-header .navbar,
#quarto-header .container-fluid,
.navbar-nav.ms-auto,
.navbar-nav.ms-auto > li,
.navbar-nav.ms-auto > li > .nav-link {
    overflow: visible !important;
}

/* Allow horizontal scrolling for navbars with many items */
#navbarCollapse > ul.navbar-nav.navbar-nav-scroll.me-auto {
    text-wrap: nowrap;
    overflow-x: auto !important;
}

/* Print styles - hide widget */
@media print {
    #github-widget {
        display: none;
    }
}

/* ============================================
   Reference Switcher Styles
   ============================================ */

.reference-switcher-container {
    margin-left: 0;
    margin-right: 0.6rem;
    margin-bottom: 0.2rem;
    padding-top: 0.5rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    background: transparent;
}

.reference-switcher {
    display: flex;
    gap: 0.25rem;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 0.2rem;
}

.reference-switcher-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.35rem 0.5rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #666;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.reference-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #333;
}

.reference-switcher-btn.active {
    background: #fff;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.reference-switcher-btn i {
    font-size: 0.9rem;
}

/* Dark mode support for switcher */
body.quarto-dark .reference-switcher {
    background: #2a2a2a;
}

body.quarto-dark .reference-switcher-btn {
    color: #999;
}

body.quarto-dark .reference-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

body.quarto-dark .reference-switcher-btn.active {
    background: #3a3a3a;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* ============================================
   Reference Switcher Dropdown (3+ sections)
   ============================================ */

.reference-switcher-dropdown {
    position: relative;
}

.reference-switcher-dropdown-toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    background: #f8f8f8;
    color: #333;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.reference-switcher-dropdown-toggle:hover {
    border-color: rgba(0, 0, 0, 0.2);
    background: #f0f0f0;
}

.reference-switcher-dropdown-toggle i {
    font-size: 0.9rem;
    opacity: 0.7;
}

.reference-switcher-dropdown-label {
    flex: 1;
    text-align: left;
}

.reference-switcher-chevron {
    opacity: 0.5;
    transition: transform 0.15s ease;
}

.reference-switcher-dropdown-toggle[aria-expanded="true"] .reference-switcher-chevron {
    transform: rotate(180deg);
}

.reference-switcher-dropdown-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    z-index: 100;
    margin: 0;
    padding: 0.25rem;
    list-style: none;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.reference-switcher-dropdown-menu.show {
    display: block;
}

.reference-switcher-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    color: #555;
    cursor: pointer;
    transition: background 0.1s ease, color 0.1s ease;
}

.reference-switcher-dropdown-item:hover {
    background: #f0f0f0;
    color: #333;
}

.reference-switcher-dropdown-item.active {
    background: #e8f0fe;
    color: #1a73e8;
}

.reference-switcher-dropdown-item i {
    font-size: 0.9rem;
    opacity: 0.7;
}

/* Dark mode dropdown */
body.quarto-dark .reference-switcher-dropdown-toggle {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.1);
    color: #e0e0e0;
}

body.quarto-dark .reference-switcher-dropdown-toggle:hover {
    background: #333;
    border-color: rgba(255, 255, 255, 0.2);
}

body.quarto-dark .reference-switcher-dropdown-menu {
    background: #2a2a2a;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

body.quarto-dark .reference-switcher-dropdown-item {
    color: #999;
}

body.quarto-dark .reference-switcher-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #e0e0e0;
}

body.quarto-dark .reference-switcher-dropdown-item.active {
    background: rgba(138, 180, 248, 0.15);
    color: #8ab4f8;
}

/* ============================================
   Sidebar Filter Styles
   ============================================ */

.sidebar-filter-container {
    padding: 0.35rem 0.65rem 0.65rem 0rem;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    background: transparent;
    position: sticky;
    top: 0;
    z-index: 10;
}

.sidebar-filter-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.sidebar-filter-input {
    width: 100%;
    padding: 0.3rem 1.75rem 0.3rem 1.85rem;
    font-size: 0.8rem;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    background-color: #fff;
    transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out, background-color 0.15s ease-in-out;
}

.sidebar-filter-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.12);
    background-color: #fff;
}

.sidebar-filter-input::placeholder {
    color: #999;
    opacity: 1;
}

.sidebar-filter-icon {
    position: absolute;
    left: 0.55rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.sidebar-filter-clear {
    position: absolute;
    right: 0.35rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    cursor: pointer;
    padding: 0.15rem;
    line-height: 1;
    border-radius: 3px;
    transition: color 0.15s ease, background-color 0.15s ease;
    font-size: 0.7rem;
}

.sidebar-filter-clear:hover {
    color: #666;
    background-color: rgba(0, 0, 0, 0.04);
}

.sidebar-filter-count {
    font-size: 0.7rem;
    color: #888;
    text-align: center;
    margin-top: 0.25rem;
    padding: 0.1rem 0.4rem;
    background: transparent;
    border-radius: 3px;
}

.sidebar-filter-count .filter-count-num {
    font-weight: 600;
    color: #666;
}

/* Highlight matched items */
.sidebar-item.sidebar-filter-match .sidebar-link {
    background-color: rgba(255, 243, 205, 0.5);
}

/* Smooth transitions for showing/hiding items */
.sidebar-item {
    transition: opacity 0.15s ease;
}

/* Keyboard shortcut hint */
.sidebar-filter-input:not(:focus)::placeholder {
    /* Could show "/" hint here */
}

/* Mobile adjustments */
@media (max-width: 991.98px) {
    .sidebar-filter-container {
        padding: 0.4rem 0.65rem;
    }

    .sidebar-filter-input {
        font-size: 0.85rem;
        padding: 0.35rem 1.75rem 0.35rem 1.85rem;
    }
}

/* Dark mode support - uses Quarto's dark mode class */
body.quarto-dark .sidebar-filter-container {
    background: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

body.quarto-dark .sidebar-filter-input {
    background-color: #2a2a2a;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

body.quarto-dark .sidebar-filter-input:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
    background-color: #333;
}

body.quarto-dark .sidebar-filter-input::placeholder {
    color: #9e9e9e;
}

body.quarto-dark .sidebar-filter-icon,
body.quarto-dark .sidebar-filter-clear {
    color: #9e9e9e;
}

body.quarto-dark .sidebar-filter-clear:hover {
    color: #e0e0e0;
    background-color: rgba(255, 255, 255, 0.1);
}

body.quarto-dark .sidebar-filter-count {
    color: #9e9e9e;
}

body.quarto-dark .sidebar-filter-count .filter-count-num {
    color: #e0e0e0;
}

body.quarto-dark .sidebar-item.sidebar-filter-match .sidebar-link {
    background-color: rgba(255, 193, 7, 0.2);
}

/* =====================================================
   CLI Man-Page Styling
   Terminal-like appearance for CLI documentation
   ===================================================== */

/* Style CLI page titles like API reference pages */
/* Applied via post-render.py to CLI reference pages */
h1.title.cli-title {
    font-family: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
    font-size: 1.25rem;
    font-weight: 600;
}

.cli-manpage {
    width: 100%;
}

/* Main man-page code block */
.cli-manpage pre {
    font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
    font-size: 13px;
    line-height: 1.6;
    background: #012b15;
    color: #d4d4d4;
    border: none;
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    white-space: pre;
    margin-bottom: 1rem;
    max-width: 100%;
}

.cli-manpage pre code {
    font-family: inherit;
    font-size: inherit;
    background: transparent;
    color: inherit;
    padding: 0;
    white-space: pre;
}

/* Light mode - keep the dark terminal look */
[data-bs-theme="light"] .cli-manpage pre {
    background: #1e1e1e;
    color: #d4d4d4;
}

/* On large screens, expand CLI content area into the unused right margin space */
/* The right sidebar ("On this page") is ~250px; we use half of that */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .cli-manpage {
        margin-top: 1.5rem;
    }
}

@media (min-width: 1200px) {
    .cli-manpage {
        margin-top: 1.5rem;
    }
}

/* Responsive adjustments for CLI docs */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cli-manpage {
        margin-top: 1.5rem;
    }

    .cli-manpage pre {
        font-size: 12px;
        padding: 1rem 1.25rem;
        border-radius: 4px;
    }

    h1.title.cli-title {
        font-size: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .cli-manpage {
        margin-top: 1.5rem;
    }

    .cli-manpage pre {
        font-size: 11px;
        padding: 0.875rem 1rem;
        line-height: 1.5;
    }

    h1.title.cli-title {
        font-size: 1rem;
    }
}

@media (max-width: 575.98px) {
    .cli-manpage {
        margin-top: 1.5rem;
    }

    .cli-manpage pre {
        font-size: 10px;
        padding: 0.75rem 0.875rem;
        border-radius: 3px;
    }

    h1.title.cli-title {
        font-size: 0.95rem;
    }
}

/* ==========================================================================
   Keyboard Shortcuts Navbar Button
   ========================================================================== */

/* Nav item containing the keyboard button - keep vertical alignment consistent */
.nav-item:has(#gd-keyboard-btn-container) {
    display: flex;
    align-items: center;
}

#gd-keyboard-btn-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 2px;
}

.gd-keyboard-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: var(--gd-navbar-text);
    cursor: pointer;
    transition: all 0.2s ease;

    &:hover {
        background: rgba(0, 0, 0, 0.10);
        border-color: rgba(0, 0, 0, 0.25);
    }

    &:focus {
        outline: none;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
    }

    svg {
        display: block;
    }
}

/* Hide on mobile — keyboard shortcuts are desktop-only */
@media (max-width: 991.98px) {
    #gd-navbar-widgets > #gd-keyboard-btn-container,
    #gd-keyboard-btn-container {
        display: none;
    }
}

body.quarto-dark .gd-keyboard-btn {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.18);
    color: #f8f9fa;

    &:hover {
        background: rgba(255, 255, 255, 0.14);
        border-color: rgba(255, 255, 255, 0.28);
    }

    &:focus {
        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.2);
    }
}

/* ==========================================================================
   Dark Mode Toggle Button Styles
   ========================================================================== */

/* Nav item containing the toggle - vertical alignment with GitHub widget */
.nav-item:has(#dark-mode-toggle-container) {
    display: flex;
    align-items: center;
}

#dark-mode-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0;
}

.dark-mode-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    color: var(--gd-navbar-text);
    cursor: pointer;
    transition: all 0.2s ease;
}

.dark-mode-toggle:hover {
    background: rgba(0, 0, 0, 0.10);
    border-color: rgba(0, 0, 0, 0.25);
}

.dark-mode-toggle:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.15);
}

.dark-mode-toggle svg {
    display: block;
}

.theme-icon-light,
.theme-icon-dark {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ==========================================================================
   Dark Mode - Core Styles
   ========================================================================== */

/* CSS Custom Properties for theming */
:root {
    --gd-bg-primary: #FCFEFF;
    --gd-bg-secondary: #FAFAFD;
    --gd-bg-tertiary: #F7F1EB;
    --gd-text-primary: rgb(18, 18, 18);
    --gd-text-secondary: #333;
    --gd-text-muted: #666;
    --gd-border-color: #e9e9e9;
    --gd-border-light: #E7EAF6;
    --gd-link-color: black;
    --gd-code-bg: #f8f9fa;
    --gd-code-color: rgb(18, 18, 18);
    --gd-blockquote-bg: #E8E8E8;
    --gd-sidebar-bg: #FAFAFD;
    --gd-navbar-bg: #f0f0f0;
    --gd-navbar-text: #2d2d2d;
    --gd-footer-text: rgb(48, 48, 48);
    --gd-highlight-color: rgba(255, 243, 205, 0.5);
    --gd-active-link: rgb(244, 121, 0);
    --gd-accent-blue: rgba(101, 180, 237, 0.75);
    --gd-citation-color: #1a6cae;

    /* Syntax highlighting - light mode */
    --gd-syn-class: #0e84b5;
    --gd-syn-name: #4758AB;
    --gd-syn-none: #7D4E9E;
    --gd-syn-bool: #0077AA;
    --gd-syn-operator: #D14D00;
    --gd-syn-keyword: #008000;
    --gd-syn-string: #BA2121;
    --gd-syn-number: #666666;
    --gd-syn-comment: #408080;
    --gd-syn-function: #0000FF;
    --gd-syn-builtin: #008000;
}

/* Dark mode custom properties */
html.quarto-dark,
body.quarto-dark {
    --gd-bg-primary: #1a1a1a;
    --gd-bg-secondary: #222222;
    --gd-bg-tertiary: #2a2a2a;
    --gd-text-primary: #e0e0e0;
    --gd-text-secondary: #c8c8c8;
    --gd-text-muted: #999;
    --gd-border-color: #3d3d3d;
    --gd-border-light: #333;
    --gd-link-color: #7cb8e8;
    --gd-code-bg: #2a2a2a;
    --gd-code-color: #e0e0e0;
    --gd-blockquote-bg: #2a2a2a;
    --gd-sidebar-bg: #1e1e1e;
    --gd-navbar-bg: #1a1a1a;
    --gd-navbar-text: #e0e0e0;
    --gd-footer-text: #b0b0b0;
    --gd-highlight-color: rgba(255, 193, 7, 0.2);
    --gd-active-link: #ff9f43;
    --gd-accent-blue: rgba(101, 180, 237, 0.6);
    --gd-citation-color: #7cb8e8;

    /* Syntax highlighting - dark mode (optimized for contrast) */
    --gd-syn-class: #56c8ff;
    --gd-syn-name: #8cb4ff;
    --gd-syn-none: #c792ea;
    --gd-syn-bool: #56c8ff;
    --gd-syn-operator: #ff9f43;
    --gd-syn-keyword: #c792ea;
    --gd-syn-string: #c3e88d;
    --gd-syn-number: #f78c6c;
    --gd-syn-comment: #8891b3;
    --gd-syn-function: #82aaff;
    --gd-syn-builtin: #ffcb6b;
}

/* ==========================================================================
   Dark Mode - Body & Background
   ========================================================================== */

body.quarto-dark {
    background-color: var(--gd-bg-primary);
    color: var(--gd-text-primary);
}

body.quarto-dark .quarto-body-content {
    background-color: var(--gd-bg-primary);
}

/* Main page structure elements */
body.quarto-dark #quarto-content {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark #quarto-document-content {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark main.content {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark .page-columns {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark .page-rows-contents {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark .column-body {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark .column-page {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark article {
    background-color: var(--gd-bg-primary);
}

body.quarto-dark section {
    background-color: var(--gd-bg-primary);
}

/* Ensure the html element also has dark background */
html.quarto-dark {
    background-color: var(--gd-bg-primary);
}

/* ==========================================================================
   Dark Mode - Typography & Links
   ========================================================================== */

body.quarto-dark h1,
body.quarto-dark h2,
body.quarto-dark h3,
body.quarto-dark h4,
body.quarto-dark h5,
body.quarto-dark h6 {
    color: var(--gd-text-primary);
}

body.quarto-dark p,
body.quarto-dark li,
body.quarto-dark dd,
body.quarto-dark dt {
    color: var(--gd-text-primary);
}

body.quarto-dark p a,
body.quarto-dark li a {
    color: var(--gd-link-color);
}

body.quarto-dark p a:hover,
body.quarto-dark li a:hover {
    color: #9dcaf0;
}

/* Author/funder icon links in dark mode */
body.quarto-dark .column-margin a:has(.bi),
body.quarto-dark .column-margin a:has(.fa-brands),
body.quarto-dark .column-margin a:has(.ror-sidebar-icon) {
    color: #adb5bd;
}

body.quarto-dark .column-margin a:has(.bi):hover,
body.quarto-dark .column-margin a:has(.fa-brands):hover,
body.quarto-dark .column-margin a:has(.ror-sidebar-icon):hover {
    color: #dee2e6;
}

body.quarto-dark .table a {
    color: var(--gd-link-color);
}

/* ==========================================================================
   Dark Mode - Code & Syntax Highlighting
   ========================================================================== */

body.quarto-dark code {
    color: var(--gd-code-color);
    background-color: var(--gd-code-bg);
}

body.quarto-dark pre {
    background-color: var(--gd-bg-tertiary);
    border-color: var(--gd-border-color);
}

body.quarto-dark pre code {
    background-color: transparent;
    color: var(--gd-text-primary);
}

/* Override Quarto's default code token colors for dark mode */
body.quarto-dark .sourceCode span,
body.quarto-dark pre.sourceCode code span {
    color: var(--gd-text-primary);
}

/* Shell/bash specific - ensure all text is readable */
body.quarto-dark pre.bash code,
body.quarto-dark pre.sh code,
body.quarto-dark pre.shell code,
body.quarto-dark .sourceCode.bash code,
body.quarto-dark .sourceCode.sh code,
body.quarto-dark div.sourceCode[data-language="bash"] code,
body.quarto-dark div.sourceCode[data-language="sh"] code {
    color: var(--gd-text-primary);
}

body.quarto-dark .sourceCode.bash span,
body.quarto-dark .sourceCode.sh span,
body.quarto-dark div.sourceCode[data-language="bash"] span,
body.quarto-dark div.sourceCode[data-language="sh"] span {
    color: var(--gd-text-primary) !important;
}

/* Ensure inline code in dark mode has proper contrast */
body.quarto-dark :not(pre) > code {
    color: #f0a0a0;
    background-color: var(--gd-code-bg);
}

/* ==========================================================================
   Dark Mode - Great Tables (gt) exemption

   Great Tables output (e.g. pointblank validation reports, gt tables) is a
   self-contained, light-themed component that ships its own scoped styles for
   background, text color, and inline code. The global dark-mode rules above
   target bare `p`/`li`/`code` elements, so they bleed into gt tables and
   recolor brief text, source notes, and inline code against gt's own white
   background — leaving light-gray text and amber-on-dark code islands.

   These selectors are scoped under `.gt_table`, so they outrank the global
   dark-mode rules and hand styling back to gt's own cascade. `inherit` lets
   text and code pick up gt's intended colors (including status colors) rather
   than forcing a fixed value, and `transparent` matches gt's light-mode code
   background. The cosmetic effect is that gt tables render identically in
   light and dark mode, as designed. See also `table:not(.gt_table)` above. */
body.quarto-dark .gt_table p,
body.quarto-dark .gt_table li,
body.quarto-dark .gt_table dd,
body.quarto-dark .gt_table dt {
    color: inherit;
}

body.quarto-dark .gt_table code,
body.quarto-dark .gt_table :not(pre) > code {
    color: inherit;
    background-color: transparent;
}

/* Signature highlighting - dark mode */
body.quarto-dark code span.sig-class {
    color: var(--gd-syn-class) !important;
}

body.quarto-dark code span.sig-name {
    color: var(--gd-syn-name) !important;
}

body.quarto-dark code span.cn-none {
    color: var(--gd-syn-none) !important;
}

body.quarto-dark code span.cn-bool {
    color: var(--gd-syn-bool) !important;
}

body.quarto-dark #cb1 code span.op {
    color: var(--gd-syn-operator) !important;
}

/* Spacer between overloaded function signatures - dark mode inherits from light */
body.quarto-dark #cb1 code span.overload-spacer {
    display: block;
    height: 0.35em;
    user-select: none;
}

/* Pandoc/Quarto syntax highlighting tokens - dark mode */
body.quarto-dark .sourceCode span.kw,       /* Keywords */
body.quarto-dark .highlight span.k {
    color: var(--gd-syn-keyword);
}

body.quarto-dark .sourceCode span.cf {      /* Control flow */
    color: var(--gd-syn-keyword);
}

body.quarto-dark .sourceCode span.op {      /* Operators */
    color: var(--gd-syn-operator);
}

body.quarto-dark .sourceCode span.st,       /* Strings */
body.quarto-dark .highlight span.s,
body.quarto-dark .highlight span.s1,
body.quarto-dark .highlight span.s2 {
    color: var(--gd-syn-string);
}

body.quarto-dark .sourceCode span.dv,       /* Decimal values */
body.quarto-dark .sourceCode span.fl,       /* Floats */
body.quarto-dark .sourceCode span.bn,       /* Base-N integers */
body.quarto-dark .highlight span.mi,
body.quarto-dark .highlight span.mf {
    color: var(--gd-syn-number);
}

body.quarto-dark .sourceCode span.co,       /* Comments */
body.quarto-dark .highlight span.c,
body.quarto-dark .highlight span.c1,
body.quarto-dark .highlight span.cm {
    color: var(--gd-syn-comment);
    font-style: italic;
}

body.quarto-dark .sourceCode span.fu,       /* Functions */
body.quarto-dark .highlight span.nf {
    color: var(--gd-syn-function);
}

body.quarto-dark .sourceCode span.bu,       /* Built-ins */
body.quarto-dark .highlight span.nb {
    color: var(--gd-syn-builtin);
}

body.quarto-dark .sourceCode span.va,       /* Variables */
body.quarto-dark .sourceCode span.at,       /* Attributes */
body.quarto-dark .highlight span.n {
    color: var(--gd-text-primary);
}

body.quarto-dark .sourceCode span.sc {      /* Special characters */
    color: var(--gd-syn-string);
}

body.quarto-dark .sourceCode span.ss {      /* Special strings */
    color: var(--gd-syn-string);
}

body.quarto-dark .sourceCode span.im {      /* Import */
    color: var(--gd-syn-keyword);
}

body.quarto-dark .sourceCode span.cn {      /* Constants (None, True, False) */
    color: var(--gd-syn-none);
}

body.quarto-dark .sourceCode span.dt {      /* Data types */
    color: var(--gd-syn-class);
}

body.quarto-dark .sourceCode span.an {      /* Annotation */
    color: var(--gd-syn-comment);
}

body.quarto-dark .sourceCode span.pp {      /* Preprocessor */
    color: var(--gd-syn-keyword);
}

body.quarto-dark .sourceCode span.ex {      /* Extension */
    color: var(--gd-syn-function);
}

body.quarto-dark .sourceCode span.do {      /* Documentation */
    color: var(--gd-syn-comment);
    font-style: italic;
}

body.quarto-dark .sourceCode span.al {      /* Alert */
    color: #ff5555;
    font-weight: bold;
}

body.quarto-dark .sourceCode span.er {      /* Error */
    color: #ff5555;
}

body.quarto-dark .sourceCode span.wa {      /* Warning */
    color: #ffb86c;
}

body.quarto-dark .sourceCode span.in {      /* Information */
    color: var(--gd-syn-comment);
}

/* ==========================================================================
   Dark Mode - Parameter Documentation
   ========================================================================== */

/* Parameter definitions in dt elements */
body.quarto-dark dt code {
    color: var(--gd-text-primary);
    background-color: var(--gd-code-bg);
}

/* Override Quarto syntax highlighting 'code span { color: #003B4F }' for dt spans */
body.quarto-dark dt code span {
    color: var(--gd-text-primary);
}

body.quarto-dark .parameter-name {
    color: #82aaff;
}

body.quarto-dark .parameter-name strong {
    color: #82aaff;
}

body.quarto-dark .parameter-annotation {
    color: #c792ea;
}

body.quarto-dark .parameter-annotation-sep {
    color: var(--gd-text-muted);
}

body.quarto-dark .parameter-default {
    color: #c3e88d;
}

body.quarto-dark .parameter-default-sep {
    color: var(--gd-text-muted);
}

/* Doc section styling */
body.quarto-dark .doc-section dt {
    color: var(--gd-text-primary);
}

body.quarto-dark .doc-section dd {
    color: var(--gd-text-primary);
}

body.quarto-dark .doc-section-parameters dt code {
    color: var(--gd-text-primary);
}

/* Warnings section dark mode */
body.quarto-dark .doc-section-warnings > h2 {
    color: #FCA5A5;
}

body.quarto-dark .doc-section-warnings > p {
    background-color: rgba(220, 38, 38, 0.1);
    border-left-color: #EF4444;
    color: var(--gd-text-primary);
}

/* ==========================================================================
   Dark Mode - Cell Output
   ========================================================================== */

body.quarto-dark .cell-output.cell-output-stdout {
    background-color: var(--gd-bg-tertiary);
    border-color: var(--gd-border-color);
    color: var(--gd-text-primary);
}

body.quarto-dark .cell-output.cell-output-stderr {
    background-color: rgba(255, 85, 85, 0.1);
    border-color: rgba(255, 85, 85, 0.3);
}

/* ==========================================================================
   Dark Mode - Blockquotes
   ========================================================================== */

body.quarto-dark .blockquote,
body.quarto-dark blockquote {
    background-color: var(--gd-blockquote-bg);
    border-left-color: var(--gd-accent-blue);
    color: var(--gd-text-secondary);
}

/* ==========================================================================
   Dark Mode - Sidebar
   ========================================================================== */

body.quarto-dark #quarto-sidebar {
    background-color: var(--gd-sidebar-bg);
    border-right-color: var(--gd-border-color);
}

body.quarto-dark .sidebar-menu-container {
    border-bottom-color: var(--gd-border-color);
}

body.quarto-dark #quarto-sidebar .sidebar-item-text {
    color: var(--gd-text-secondary);
}

body.quarto-dark #quarto-sidebar .sidebar-item-text:hover {
    color: var(--gd-text-primary);
}

/* Hover effect for clickable sidebar links in dark mode */
body.quarto-dark #quarto-sidebar .sidebar-link[href]::before {
    background-color: rgba(255, 255, 255, 0.04);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
}

body.quarto-dark #quarto-sidebar a.sidebar-item-text.sidebar-link.active {
    color: var(--gd-active-link);
}

body.quarto-dark a.sidebar-item-text.sidebar-link.text-start > span {
    color: #9e9e9e;
}

/* Toggle already hidden via display:none above; no dark-mode override needed */

body.quarto-dark .sidebar-tools-collapse {
    color: var(--gd-text-muted);
}

/* ==========================================================================
   Dark Mode - Navbar
   ========================================================================== */

body.quarto-dark .navbar {
    background: var(--gd-navbar-bg) !important;
    border-bottom: 1px solid var(--gd-border-color);
}

body.quarto-dark .navbar-brand img {
    /* no border overrides needed */
}

body.quarto-dark .navbar-title {
    color: var(--gd-navbar-text);
}

body.quarto-dark .version-badge {
    color: rgba(224, 224, 224, 0.75);
    background-color: rgba(255, 255, 255, 0.1);
}

body.quarto-dark #navbarCollapse > ul.navbar-nav.navbar-nav-scroll.me-auto > li > a {
    color: #e0e0e0;
}

body.quarto-dark #navbarCollapse > ul.navbar-nav.navbar-nav-scroll.me-auto > li > a:hover {
    background-color: rgb(240, 112, 0);
    color: white;
}

/* Dark mode toggle in dark mode */
body.quarto-dark .dark-mode-toggle {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

body.quarto-dark .dark-mode-toggle:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* ==========================================================================
   Dark Mode - Right Sidebar (TOC)
   ========================================================================== */

body.quarto-dark #quarto-margin-sidebar {
    color: var(--gd-text-secondary);
}

body.quarto-dark #quarto-margin-sidebar nav a {
    color: var(--gd-text-muted);
}

body.quarto-dark #quarto-margin-sidebar nav a:hover {
    color: var(--gd-text-primary);
}

body.quarto-dark #quarto-margin-sidebar nav a.active {
    color: var(--gd-active-link);
}

body.quarto-dark #toc-title {
    color: var(--gd-text-primary);
}

/* ==========================================================================
   Dark Mode - Footer
   ========================================================================== */

body.quarto-dark .nav-footer {
    background-color: var(--gd-bg-secondary);
    border-top: 1px solid var(--gd-border-color);
}

body.quarto-dark .nav-footer-left,
body.quarto-dark .nav-footer-right,
body.quarto-dark .nav-footer-center {
    color: var(--gd-footer-text);
}

body.quarto-dark .nav-footer a {
    color: var(--gd-link-color);
}

/* ==========================================================================
   Dark Mode - Tables
   ========================================================================== */

body.quarto-dark .table {
    color: var(--gd-text-primary);
    border-color: var(--gd-border-color);
}

body.quarto-dark .table th {
    background-color: var(--gd-bg-secondary);
    border-color: var(--gd-border-color);
}

body.quarto-dark .table td {
    border-color: var(--gd-border-color);
}

body.quarto-dark .table-striped > tbody > tr:nth-of-type(odd) > * {
    background-color: var(--gd-bg-tertiary);
}

body.quarto-dark .table-hover > tbody > tr:hover > * {
    background-color: rgba(255, 255, 255, 0.05);
}

/* ==========================================================================
   Dark Mode - Cards & Panels
   ========================================================================== */

body.quarto-dark .card {
    background-color: var(--gd-bg-secondary);
    border-color: var(--gd-border-color);
}

body.quarto-dark .card-header {
    background-color: var(--gd-bg-tertiary);
    border-color: var(--gd-border-color);
}

body.quarto-dark .callout {
    background-color: var(--gd-bg-secondary);
    border-color: var(--gd-border-color);
    color: var(--gd-text-primary);
}

body.quarto-dark .callout .callout-header {
    background-color: var(--gd-bg-secondary) !important;
}

body.quarto-dark .callout .callout-icon::before {
    filter: invert(1);
}

body.quarto-dark .callout .callout-title-container {
    color: var(--gd-text-primary);
}

body.quarto-dark .callout .callout-body p {
    color: var(--gd-text-primary);
}

body.quarto-dark .callout-note {
    border-left-color: #6ea8fe;
}

body.quarto-dark .callout-warning {
    border-left-color: #ffb86c;
}

body.quarto-dark .callout-important {
    border-left-color: #ff5555;
}

body.quarto-dark .callout-tip {
    border-left-color: #50fa7b;
}

/* ==========================================================================
   Dark Mode - Forms & Inputs
   ========================================================================== */

body.quarto-dark input,
body.quarto-dark textarea,
body.quarto-dark select {
    background-color: var(--gd-bg-tertiary);
    border-color: var(--gd-border-color);
    color: var(--gd-text-primary);
}

body.quarto-dark input:focus,
body.quarto-dark textarea:focus,
body.quarto-dark select:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.15rem rgba(110, 168, 254, 0.25);
}

body.quarto-dark input::placeholder {
    color: var(--gd-text-muted);
}

/* ==========================================================================
   Dark Mode - Search
   ========================================================================== */

body.quarto-dark #quarto-search,
html.quarto-dark #quarto-search,
:root[data-bs-theme="dark"] #quarto-search {
    background-color: transparent;
}

body.quarto-dark #quarto-search input,
html.quarto-dark #quarto-search input,
:root[data-bs-theme="dark"] #quarto-search input {
    background-color: var(--gd-bg-tertiary);
    border-color: var(--gd-border-color);
    color: var(--gd-text-primary) !important;
}

body.quarto-dark #quarto-search .aa-SubmitButton,
html.quarto-dark #quarto-search .aa-SubmitButton,
:root[data-bs-theme="dark"] #quarto-search .aa-SubmitButton {
    background-color: transparent;
    color: var(--gd-text-muted) !important;
}

body.quarto-dark #quarto-search .aa-DetachedSearchButton {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

body.quarto-dark #quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon,
body.quarto-dark #quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon svg,
body.quarto-dark #quarto-search .aa-DetachedSearchButton .aa-SearchIcon,
html.quarto-dark #quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon,
html.quarto-dark #quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon svg,
html.quarto-dark #quarto-search .aa-DetachedSearchButton .aa-SearchIcon,
:root[data-bs-theme="dark"] #quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon,
:root[data-bs-theme="dark"] #quarto-search .aa-DetachedSearchButton .aa-DetachedSearchButtonIcon svg,
:root[data-bs-theme="dark"] #quarto-search .aa-DetachedSearchButton .aa-SearchIcon {
    color: #e0e0e0 !important;
    fill: #e0e0e0 !important;
}

body.quarto-dark #quarto-search .aa-DetachedSearchButton:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

body.quarto-dark #quarto-search .aa-DetachedSearchButton:focus {
    outline: none;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15);
}

body.quarto-dark .navbar .quarto-navbar-tools button,
body.quarto-dark .navbar .quarto-navbar-tools .quarto-navigation-tool {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.quarto-dark .navbar .quarto-navbar-tools button:hover,
body.quarto-dark .navbar .quarto-navbar-tools .quarto-navigation-tool:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* GitHub icon (icon mode) — dark mode */
body.quarto-dark .navbar .nav-item.compact .nav-link,
body.quarto-dark .navbar .gd-navbar-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e0e0e0;
    cursor: pointer;
    transition: all 0.2s ease;
}

body.quarto-dark .navbar .nav-item.compact .nav-link:hover,
body.quarto-dark .navbar .gd-navbar-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

body.quarto-dark .navbar .navbar-toggler {
    border: none;
    --bs-navbar-toggler-focus-width: 0;
}

body.quarto-dark .navbar .navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}

body.quarto-dark .navbar .navbar-toggler .navbar-toggler-icon {
    --bs-navbar-toggler-icon-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e0e0e0' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

body.quarto-dark .aa-Panel {
    background-color: var(--gd-bg-secondary);
    border-color: var(--gd-border-color);
}

body.quarto-dark .aa-Item {
    color: var(--gd-text-primary);
}

body.quarto-dark .aa-Item:hover,
body.quarto-dark .aa-Item[aria-selected="true"] {
    background-color: var(--gd-bg-tertiary);
}

/* Search results styling - ensure readable text in dark mode */
body.quarto-dark .search-result-title,
body.quarto-dark p.search-result-title,
body.quarto-dark .aa-Panel .search-result-title,
body.quarto-dark #quarto-search-results .search-result-title,
html.quarto-dark .search-result-title,
html.quarto-dark p.search-result-title {
    color: var(--gd-text-primary) !important;
}

body.quarto-dark .search-result-header,
body.quarto-dark div.search-result-header,
body.quarto-dark .aa-Panel .search-result-header,
body.quarto-dark #quarto-search-results .search-result-header,
html.quarto-dark .search-result-header,
html.quarto-dark div.search-result-header {
    color: var(--gd-text-secondary) !important;
}

body.quarto-dark .search-result-text {
    color: var(--gd-text-secondary);
}

body.quarto-dark .search-result-doc-title {
    color: var(--gd-text-primary);
}

body.quarto-dark .search-result-section {
    color: var(--gd-text-muted);
}

body.quarto-dark .aa-SourceHeader {
    color: var(--gd-text-muted);
    border-bottom-color: var(--gd-border-color);
}

body.quarto-dark .aa-SourceNoResults {
    color: var(--gd-text-muted);
}

body.quarto-dark .quarto-search-results {
    background-color: var(--gd-bg-secondary);
}

body.quarto-dark .search-result-link {
    color: var(--gd-link-color);
}

body.quarto-dark .search-result-link:hover {
    color: #9dcaf0;
}

/* Algolia/Autocomplete specific dark mode */
body.quarto-dark .aa-Autocomplete {
    background-color: transparent;
}

body.quarto-dark .aa-Form,
html.quarto-dark .aa-Form,
:root[data-bs-theme="dark"] .aa-Form {
    background-color: var(--gd-bg-tertiary);
    border-color: var(--gd-border-color);
}

body.quarto-dark .aa-Input,
html.quarto-dark .aa-Input,
:root[data-bs-theme="dark"] .aa-Input {
    color: var(--gd-text-primary) !important;
    background-color: transparent;
}

body.quarto-dark .aa-InputWrapperPrefix,
body.quarto-dark .aa-InputWrapperSuffix,
html.quarto-dark .aa-InputWrapperPrefix,
html.quarto-dark .aa-InputWrapperSuffix,
:root[data-bs-theme="dark"] .aa-InputWrapperPrefix,
:root[data-bs-theme="dark"] .aa-InputWrapperSuffix {
    color: var(--gd-text-muted);
}

body.quarto-dark .aa-SubmitButton,
html.quarto-dark .aa-SubmitButton,
:root[data-bs-theme="dark"] .aa-SubmitButton,
body.quarto-dark .aa-SubmitIcon,
html.quarto-dark .aa-SubmitIcon,
:root[data-bs-theme="dark"] .aa-SubmitIcon,
body.quarto-dark svg.aa-SubmitIcon,
html.quarto-dark svg.aa-SubmitIcon,
:root[data-bs-theme="dark"] svg.aa-SubmitIcon {
    color: var(--gd-text-muted) !important;
    fill: var(--gd-text-muted) !important;
}

body.quarto-dark .aa-ClearButton,
html.quarto-dark .aa-ClearButton,
:root[data-bs-theme="dark"] .aa-ClearButton,
body.quarto-dark .aa-ClearIcon,
html.quarto-dark .aa-ClearIcon,
:root[data-bs-theme="dark"] .aa-ClearIcon,
body.quarto-dark svg.aa-ClearIcon,
html.quarto-dark svg.aa-ClearIcon,
:root[data-bs-theme="dark"] svg.aa-ClearIcon {
    color: var(--gd-text-muted) !important;
    fill: var(--gd-text-muted) !important;
}

body.quarto-dark .aa-ClearButton:hover,
html.quarto-dark .aa-ClearButton:hover,
:root[data-bs-theme="dark"] .aa-ClearButton:hover,
body.quarto-dark .aa-ClearButton:hover svg.aa-ClearIcon,
html.quarto-dark .aa-ClearButton:hover svg.aa-ClearIcon,
:root[data-bs-theme="dark"] .aa-ClearButton:hover svg.aa-ClearIcon {
    color: var(--gd-text-primary) !important;
    fill: var(--gd-text-primary) !important;
}

/* ==========================================================================
   Dark Mode - GitHub Widget
   ========================================================================== */

body.quarto-dark .gh-widget-trigger {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: #e0e0e0;
}

body.quarto-dark .gh-widget-trigger:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

/* Suppress the nav-link hover background that wraps the GitHub widget */
body.quarto-dark .nav-item:has(#github-widget) > a:hover,
body.quarto-dark .nav-item:has(#github-widget) .nav-link:hover {
    background: transparent !important;
    background-color: transparent !important;
    box-shadow: none !important;
}

body.quarto-dark .gh-dropdown {
    background: var(--gd-bg-secondary);
    border-color: var(--gd-border-color);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
}

body.quarto-dark .gh-dropdown-item {
    color: var(--gd-text-primary) !important;
}

body.quarto-dark .gh-dropdown-item:hover {
    background: var(--gd-bg-tertiary);
}

body.quarto-dark .gh-dropdown-item svg {
    color: var(--gd-text-muted);
}

body.quarto-dark .gh-dropdown-divider {
    background: var(--gd-border-color);
}

body.quarto-dark .gh-badge {
    background: rgba(110, 168, 254, 0.2);
    color: #6ea8fe;
}

/* ==========================================================================
   Dark Mode - Source Link
   ========================================================================== */

body.quarto-dark .source-link {
    color: #7cb8e8 !important;
}

body.quarto-dark .source-link:hover {
    color: #9dcaf0 !important;
}

/* ==========================================================================
   Dark Mode - Mobile Responsive
   ========================================================================== */

@media (max-width: 991.98px) {
    body.quarto-dark .column-margin {
        background-color: var(--gd-bg-secondary);
        border-color: var(--gd-border-color);
    }

    /* Ensure all child elements inside column-margin have matching background in dark mode */
    body.quarto-dark .column-margin,
    body.quarto-dark .column-margin > *,
    body.quarto-dark .column-margin section,
    body.quarto-dark .column-margin p,
    body.quarto-dark .column-margin code {
        background-color: var(--gd-bg-secondary);
    }

    body.quarto-dark .column-margin h4 {
        color: var(--gd-text-secondary);
        border-bottom-color: var(--gd-border-color);
    }

    body.quarto-dark .quarto-secondary-nav {
        background-color: var(--gd-bg-secondary);
        border-bottom-color: var(--gd-border-color);
    }

    body.quarto-dark header.headroom--unpinned .quarto-secondary-nav {
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
    }
}

/* ==========================================================================
   Dark Mode - Copy Button
   ========================================================================== */

body.quarto-dark .gd-code-copy {
    color: var(--gd-text-muted);
}

body.quarto-dark .gd-code-copy:hover {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
    color: var(--gd-text-primary);
}

body.quarto-dark .gd-code-copy.gd-code-copied {
    color: #75b798;
}

/* ==========================================================================
   Dark Mode - Code Filename/Caption Bar
   ========================================================================== */

body.quarto-dark .code-with-filename .code-with-filename-file {
    background-color: var(--gd-bg-tertiary);
    border-color: var(--gd-border-color);
}

body.quarto-dark .code-with-filename .code-with-filename-file pre {
    background-color: var(--gd-bg-tertiary);
    color: var(--gd-text-primary);
}

body.quarto-dark .code-with-filename .code-with-filename-file pre strong {
    color: var(--gd-text-primary);
}

body.quarto-dark .code-with-filename-file {
    background-color: var(--gd-bg-tertiary);
}

body.quarto-dark .code-with-filename-file pre {
    background-color: transparent;
    color: var(--gd-text-primary);
    margin: 0;
}

/* ==========================================================================
   Dark Mode - Scrollbars (WebKit browsers)
   ========================================================================== */

body.quarto-dark ::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

body.quarto-dark ::-webkit-scrollbar-track {
    background: var(--gd-bg-secondary);
}

body.quarto-dark ::-webkit-scrollbar-thumb {
    background: var(--gd-border-color);
    border-radius: 5px;
}

body.quarto-dark ::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* ==========================================================================
   Dark Mode - Transitions
   ========================================================================== */

/* Smooth transitions for theme switching */
body,
.navbar,
#quarto-sidebar,
.nav-footer,
.card,
pre,
code,
.table,
input,
textarea,
.gh-dropdown,
.dark-mode-toggle {
    transition: background-color 0.2s ease,
                border-color 0.2s ease,
                color 0.2s ease;
}

/* ==========================================================================
   Section Cards (Custom Sections index pages)
   ========================================================================== */

.section-cards {
    display: grid;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* 2-column image card grid (default) */
.section-cards-2col {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}

/* 1-column image card grid */
.section-cards-1col {
    grid-template-columns: 1fr;
}

/* Single-column plain link list */
.section-cards-list {
    grid-template-columns: 1fr;
}

.section-card {
    display: block;
    padding: 1.25rem 1.5rem;
    border: 1px solid var(--bs-border-color, #dee2e6);
    border-radius: 0.5rem;
    color: inherit;
    text-decoration: none;
    transition: box-shadow 0.2s ease-out, border-color 0.2s ease-out, transform 0.2s ease-out;
}

.section-card:hover {
    border-color: var(--bs-primary, #0d6efd);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
    color: inherit;
    text-decoration: none;
}

.section-card-img {
    width: 100%;
    border-radius: 0.375rem;
    margin-bottom: 0.75rem;
}

.section-card-title {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.35rem;
    color: var(--bs-primary, #0d6efd);
}

.section-card-desc {
    font-size: 0.9rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.45;
}

/* Dark mode adjustments */
body.quarto-dark .section-card {
    border-color: var(--bs-border-color, #495057);
}

body.quarto-dark .section-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

body.quarto-dark .section-card-title {
    color: #599CFF !important;
}

body.quarto-dark .section-card-desc {
    color: #9ca3af !important;
}

body.quarto-dark .section-card:hover {
    border-color: #599CFF;
}

/* Disable transitions on initial page load to prevent flash */
html:not(.theme-loaded) *,
html:not(.theme-loaded) *::before,
html:not(.theme-loaded) *::after {
    transition: none !important;
}

/* Home page layout: widen main content since there's no left sidebar */
/* On home page, expand content to use the space normally reserved for left sidebar */
@media (min-width: 992px) {
    body[data-page="index"] #quarto-document-content > section:not(.column-margin),
    body[data-page="index"] #quarto-document-content > .gd-hero,
    body[data-page="index"] #quarto-document-content > p,
    body[data-page="index"] #quarto-document-content > .cell,
    body[data-page="index"] #quarto-document-content > details {
        grid-column: page-start-inset / body-content-end !important;
    }

    /* Keep the column-margin where it should be */
    body[data-page="index"] .column-margin {
        grid-column: body-end / page-end !important;
    }

    /* In dark mode every container gets an opaque --gd-bg-primary background
       that hides the fixed starfield canvas (z-index: -1).  On the homepage
       we punch all those layers transparent so the canvas shows through.
       body/html keep their backgrounds — they sit BELOW the canvas in the
       root stacking context and provide the base dark colour where the
       canvas mask fades out. */
    body.gd-homepage.quarto-dark #quarto-content,
    body.gd-homepage.quarto-dark main.content,
    body.gd-homepage.quarto-dark #quarto-document-content,
    body.gd-homepage.quarto-dark .quarto-body-content,
    body.gd-homepage.quarto-dark .page-columns,
    body.gd-homepage.quarto-dark .page-rows-contents,
    body.gd-homepage.quarto-dark .column-body,
    body.gd-homepage.quarto-dark article,
    body.gd-homepage.quarto-dark section {
        background-color: transparent;
    }
}

/* ── Hero Section ─────────────────────────────────────── */

/* Prevent horizontal scrollbar from the 100vw starfield canvas */
.gd-homepage {
    overflow-x: clip;
}

.gd-hero {
    text-align: center;
    padding: 2.5rem 1rem 2rem;
    position: relative;
    overflow: visible;
}

/* Starfield canvas: breaks out of the hero to cover the full viewport width
   and extends above into the navbar area and below into body content.
   Uses fixed positioning relative to the viewport so Quarto's grid layout
   doesn't clip or offset it. */
#gd-starfield {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;         /* let clicks pass through to page content */
    z-index: 0;
    transition: opacity 0.15s ease-out;
    mask-image: linear-gradient(to bottom, black 35%, transparent 85%);
    -webkit-mask-image: linear-gradient(to bottom, black 35%, transparent 85%);
}

/* The starfield canvas is purely decorative and fully autonomous (it does
   not track the cursor), so it must never capture pointer events. It is
   position: fixed across the whole viewport, so leaving pointer-events on
   would block clicks for the entire page — not just the hero. The base
   #gd-starfield rule already sets pointer-events: none; keep it that way. */

/* Everything in the hero except the canvas must sit above it */
.gd-hero > *:not(#gd-starfield) {
    position: relative;
    z-index: 1;
}

/* When a column-margin sidebar is present, Quarto adds page-full to <main>
   which sets all children to grid-column: body-content-start / page-end via
   .page-columns.page-full > *.  This causes body text and centered content
   to spill into the right margin area (overlapping the sidebar).
   Constrain every child back to the body-content column; the .column-margin
   element keeps its body-end / page-end placement via !important in Quarto's
   own CSS. */
main.content.page-columns.page-full > * {
    grid-column: body-content-start / body-content-end;
}

/* On the homepage, .column-margin triggers Quarto's page-columns grid which
   narrows the body-content track to make room for the margin column.  This
   causes code disclosures, output tables, and other wide elements to appear
   indented ~100px from the left.  The data-page=index rule above handles
   section, p, .cell, and details with the correct grid span; this fallback
   covers any remaining direct children of main.page-columns. */
.gd-homepage main.page-columns > *:not(.column-margin) {
    grid-column: page-start-inset / body-content-end;
}

.gd-hero-logo {
    display: block;
    width: auto;
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.25rem;
}

.gd-hero-name {
    font-size: 2.5rem;
    font-weight: 600;
    margin-bottom: 0.3rem;
    line-height: 1.15;
}

.gd-hero-tagline {
    font-size: 1.35rem;
    max-width: 600px;
    margin: 0 auto 1rem;
    color: var(--bs-secondary-color, #6c757d);
    line-height: 1.3;
    text-wrap: balance;
}

.gd-hero-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
}

.gd-hero-badges img {
    height: 20px;
}

/* Dark-mode hero logo switching */
.gd-hero .gd-only-dark  { display: none !important; }

[data-bs-theme="dark"] .gd-hero .gd-only-light { display: none !important; }
[data-bs-theme="dark"] .gd-hero .gd-only-dark  { display: block !important; margin-left: auto; margin-right: auto; }

/* Dark-mode navbar logo switching
   Scope to html[...] so Quarto's nav[data-bs-theme="dark"] (dark navbar
   background in the flatly theme) doesn't trigger these rules in light mode. */
html[data-bs-theme="dark"] .navbar-logo.light-content { display: none !important; }
html[data-bs-theme="dark"] .navbar-logo.dark-content  { display: block !important; }

/* Reduce top margin on first heading after hero */
.gd-hero + section.level1 > h1:first-child,
.gd-hero + section.level2 > h2:first-child {
    margin-top: 0.5rem !important;
}

/* ── CTA Cards ("Go Further" section) ─────────────────── */

.gd-cta-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
    margin: 1.5rem 0 2rem;
}

.gd-cta-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.5rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 249, 250, 0.7));
    text-decoration: none !important;
    color: inherit !important;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
    position: relative;
    overflow: hidden;

    &:hover {
        transform: translateY(-3px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        border-color: rgba(0, 0, 0, 0.15);
    }

    &:hover .gd-cta-arrow {
        transform: translateX(4px);
        opacity: 1;
    }
}

.gd-cta-icon {
    font-size: 2rem;
    margin-bottom: 0.75rem;
    line-height: 1;
}

.gd-cta-title {
    font-size: 1.15rem;
    font-weight: 600;
    margin-bottom: 0.4rem;
    line-height: 1.3;
}

.gd-cta-desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: #6c757d;
    flex-grow: 1;
}

.gd-cta-arrow {
    font-size: 1.25rem;
    margin-top: 0.75rem;
    opacity: 0.4;
    transition: transform 0.2s ease, opacity 0.2s ease;
    font-weight: 600;
}

/* Dark mode CTA cards */
body.quarto-dark .gd-cta-card {
    border-color: rgba(255, 255, 255, 0.1);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));

    &:hover {
        border-color: rgba(255, 255, 255, 0.2);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
    }
}

body.quarto-dark .gd-cta-desc {
    color: #adb5bd;
}

@media (max-width: 768px) {
    .gd-cta-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
}

/* ── Feature Wall ("And So Much More") ────────────────── */

.gd-feature-wall {
    margin: 3rem 0 2rem;
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

.gd-fw-heading {
    text-align: center;
    font-weight: 700;
    margin-bottom: 1.5rem;
    letter-spacing: -0.01em;
}

.gd-fw-large,
.gd-fw-medium,
.gd-fw-small {
    text-align: justify;
    text-justify: inter-word;
}

.gd-fw-large {
    font-size: 1.65rem;
    line-height: 1.45;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.gd-fw-medium {
    font-size: 1.15rem;
    line-height: 1.55;
    margin-bottom: 0.5rem;
}

.gd-fw-small {
    font-size: 0.88rem;
    line-height: 1.65;
}

/* Dim the middle-dot separators slightly */
.gd-feature-wall b {
    font-weight: 650;
}

@media (max-width: 768px) {
    .gd-fw-large {
        font-size: 1.35rem;
    }
    .gd-fw-medium {
        font-size: 1.05rem;
    }
    .gd-fw-small {
        font-size: 0.82rem;
    }
}

/* ── Horizontal Rule Shortcode ────────────────────────── */

/* Palette color tokens — representative hue from each gradient preset */
:root {
    --gd-palette-sky: #0077b6;
    --gd-palette-peach: #e07a3a;
    --gd-palette-prism: #6d28d9;
    --gd-palette-lilac: #a855f7;
    --gd-palette-slate: #64748b;
    --gd-palette-honey: #d97706;
    --gd-palette-dusk: #4338ca;
    --gd-palette-mint: #0d9488;
    --gd-palette-accent: var(--gd-accent, #6366f1);
}

html[data-bs-theme="dark"] {
    --gd-palette-sky: #38bdf8;
    --gd-palette-peach: #fb923c;
    --gd-palette-prism: #a78bfa;
    --gd-palette-lilac: #c084fc;
    --gd-palette-slate: #94a3b8;
    --gd-palette-honey: #fbbf24;
    --gd-palette-dusk: #818cf8;
    --gd-palette-mint: #2dd4bf;
    --gd-palette-accent: var(--gd-accent, #818cf8);
}

.gd-hr {
    --gd-hr-color: var(--gd-accent, #6366f1);
    --gd-hr-thickness: 2px;
    --gd-hr-width: 100%;
    --gd-hr-spacing: 2rem;

    border: none;
    height: var(--gd-hr-thickness);
    width: var(--gd-hr-width);
    max-width: 100%;
    margin: var(--gd-hr-spacing) auto;
    background: var(--gd-hr-color);
    opacity: 0.7;
    display: block;
}

/* ─ Line Styles ─ */
.gd-hr--dotted {
    background: none;
    border-top: var(--gd-hr-thickness) dotted var(--gd-hr-color);
    height: 0;
}

.gd-hr--dashed {
    background: none;
    border-top: var(--gd-hr-thickness) dashed var(--gd-hr-color);
    height: 0;
}

.gd-hr--double {
    background: none;
    border-top: calc(var(--gd-hr-thickness) * 0.5) double var(--gd-hr-color);
    height: 0;
    border-top-width: calc(var(--gd-hr-thickness) + 2px);
}

/* ─ Alignment ─ */
.gd-hr--left {
    margin-left: 0;
    margin-right: auto;
}

.gd-hr--right {
    margin-left: auto;
    margin-right: 0;
}

/* ─ With-Text Structure ─ */
.gd-hr--with-text {
    display: flex;
    align-items: center;
    gap: 1rem;
    height: auto;
    background: none;
    border: none;
    width: var(--gd-hr-width);
    max-width: 100%;
    margin: var(--gd-hr-spacing) auto;
    opacity: 1;
}

.gd-hr--with-text.gd-hr--left {
    margin-left: 0;
    margin-right: auto;
}

.gd-hr--with-text.gd-hr--right {
    margin-left: auto;
    margin-right: 0;
}

.gd-hr-line {
    flex: 1;
    height: var(--gd-hr-thickness, 2px);
    background: var(--gd-hr-color);
    opacity: 0.7;
}

.gd-hr-text {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--gd-hr-color);
    white-space: nowrap;
    user-select: none;
    line-height: 1;
}

.gd-hr-text--sm {
    font-size: 0.75rem;
}

.gd-hr-text--lg {
    font-size: 1.2rem;
}

/* ─ Presets ─ */

/* Gradient shimmer (animated) — generalizes .gd-fw-rule */
.gd-hr--gradient-shimmer {
    background: linear-gradient(
        90deg,
        transparent,
        var(--gd-hr-color, var(--gd-accent, #6366f1)) 25%,
        var(--gd-accent-secondary, #a855f7) 50%,
        var(--gd-hr-color, var(--gd-accent, #6366f1)) 75%,
        transparent
    );
    background-size: 200% 100%;
    animation: gd-hr-shimmer 4s ease-in-out infinite;
    border: none;
    height: var(--gd-hr-thickness);
}

@keyframes gd-hr-shimmer {
    0%   { background-position: 100% 0; }
    50%  { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

/* Gradient static (non-animated) */
.gd-hr--gradient-static {
    background: linear-gradient(
        90deg,
        transparent,
        var(--gd-hr-color, var(--gd-accent, #6366f1)) 25%,
        var(--gd-accent-secondary, #a855f7) 50%,
        var(--gd-hr-color, var(--gd-accent, #6366f1)) 75%,
        transparent
    );
    border: none;
    height: var(--gd-hr-thickness);
}

/* Fade — full opacity at center, transparent at edges */
.gd-hr--fade {
    background: linear-gradient(
        90deg,
        transparent,
        var(--gd-hr-color) 20%,
        var(--gd-hr-color) 80%,
        transparent
    );
    border: none;
    height: var(--gd-hr-thickness);
}

/* Fade-edges — transparent edges to colored center */
.gd-hr--fade-edges {
    background: radial-gradient(
        ellipse at center,
        var(--gd-hr-color) 0%,
        transparent 70%
    );
    border: none;
    height: var(--gd-hr-thickness);
}

/* Dots — three centered dots, no line */
.gd-hr--dots {
    background: none;
    border: none;
    height: auto;
    text-align: center;
    opacity: 1;
}

.gd-hr--dots::after {
    content: "·  ·  ·";
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    color: var(--gd-hr-color);
    opacity: 0.8;
}

/* Diamond — centered diamond flanked by thin lines */
.gd-hr--diamond {
    background: none;
    border: none;
    height: auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    opacity: 1;
}

.gd-hr--diamond::before,
.gd-hr--diamond::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--gd-hr-color);
    opacity: 0.5;
}

.gd-hr--diamond::before {
    content: "";
}

/* Insert diamond via a nested approach — use a wrapper trick.
   Since <hr> can't have children, we use a background trick instead. */
hr.gd-hr--diamond {
    display: flex;
}

hr.gd-hr--diamond::before {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gd-hr-color));
}

hr.gd-hr--diamond::after {
    content: "◇";
    flex: none;
    height: auto;
    background: none;
    font-size: 1rem;
    color: var(--gd-hr-color);
    opacity: 0.8;
    padding: 0 0.5rem;
}

/* Ornament — fleuron between fading lines */
.gd-hr--ornament {
    background: none;
    border: none;
    height: auto;
    display: flex;
    align-items: center;
    opacity: 1;
}

hr.gd-hr--ornament::before {
    content: "";
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gd-hr-color));
}

hr.gd-hr--ornament::after {
    content: "❧";
    flex: none;
    height: auto;
    background: none;
    font-size: 1.2rem;
    color: var(--gd-hr-color);
    opacity: 0.7;
    padding: 0 0.75rem;
}

/* Wave — repeating wave pattern */
.gd-hr--wave {
    background: repeating-linear-gradient(
        135deg,
        var(--gd-hr-color) 0px,
        var(--gd-hr-color) 2px,
        transparent 2px,
        transparent 6px
    );
    border: none;
    height: var(--gd-hr-thickness);
    opacity: 0.6;
}

/* Double-line — two parallel lines */
.gd-hr--double-line {
    background: none;
    border: none;
    height: calc(var(--gd-hr-thickness) * 2 + 3px);
    position: relative;
    opacity: 0.7;
}

.gd-hr--double-line::before,
.gd-hr--double-line::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: var(--gd-hr-thickness);
    background: var(--gd-hr-color);
}

.gd-hr--double-line::before {
    top: 0;
}

.gd-hr--double-line::after {
    bottom: 0;
}

/* ─ Dark Mode ─ */
body.quarto-dark .gd-hr {
    opacity: 0.6;
}

body.quarto-dark .gd-hr--with-text {
    opacity: 1;
}

body.quarto-dark .gd-hr-line {
    opacity: 0.5;
}

body.quarto-dark .gd-hr-text {
    opacity: 0.85;
}

body.quarto-dark .gd-hr--dots::after {
    opacity: 0.6;
}

/* ─ Reduced Motion ─ */
@media (prefers-reduced-motion: reduce) {
    .gd-hr--gradient-shimmer {
        animation: none;
    }
}

/* ─ Responsive ─ */
@media (max-width: 768px) {
    .gd-hr {
        --gd-hr-spacing: 1.5rem;
    }
}

/* ── Feature Wall Closing ─────────────────────────────── */

.gd-fw-rule {
    border: none;
    height: 2px;
    margin: 3rem auto 2rem;
    max-width: 30rem;
    background: linear-gradient(
        90deg,
        transparent,
        var(--gd-accent, #6366f1) 25%,
        var(--gd-accent-secondary, #a855f7) 50%,
        var(--gd-accent, #6366f1) 75%,
        transparent
    );
    background-size: 200% 100%;
    animation: gd-rule-shimmer 4s ease-in-out infinite;
    opacity: 0.7;
}

@keyframes gd-rule-shimmer {
    0%   { background-position: 100% 0; }
    50%  { background-position: 0% 0; }
    100% { background-position: 100% 0; }
}

.gd-fw-closing {
    text-align: center;
    padding: 0 1.5rem 2.5rem;
    max-width: 38rem;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.gd-fw-closing p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: #6b7280;
    margin: 0;
}

body.quarto-dark .gd-fw-closing p {
    color: #9ca3af;
}

.gd-fw-closing a {
    color: var(--gd-accent, #6366f1);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px solid transparent;
    transition: border-color 0.2s ease;
}

.gd-fw-closing a:hover {
    border-bottom-color: var(--gd-accent, #6366f1);
}

@media (max-width: 768px) {
    .gd-fw-rule {
        max-width: 80%;
        margin: 2rem auto 1.5rem;
    }
    .gd-fw-closing p {
        font-size: 0.95rem;
    }
}

/* ── Hero Responsive ──────────────────────────────────── */

@media (max-width: 768px) {
    .gd-hero {
        padding: 1.5rem 0.75rem 1.25rem;
    }
    .gd-hero-logo {
        max-height: 140px !important;
    }
    .gd-hero-name {
        font-size: 2.25rem;
    }
    .gd-hero-tagline {
        font-size: 1.1rem;
    }
}

/* ============================================================================
   Copy-Page Widget
   ============================================================================ */

/* Container – floats top-right of the content area */
.gd-copy-page {
    float: right;
    display: flex;
    gap: 4px;
    margin-top: 4px;
    margin-left: 12px;
    position: relative;
    z-index: 5;
}

/* Shared button / link styling */
.gd-copy-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px;
    border: 1px solid #d0d7de;
    border-radius: 6px;
    background: #f6f8fa;
    color: #57606a;
    font-size: 12px;
    font-family: inherit;
    line-height: 1.4;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.gd-copy-page-btn:hover {
    background: #eaeef2;
    border-color: #b8bfc6;
    color: #24292f;
    text-decoration: none;
}

.gd-copy-page-btn:active {
    background: #d8dee4;
}

/* Success flash */
.gd-copy-page-btn.gd-copy-success {
    border-color: #2da44e;
    color: #1a7f37;
    background: #dafbe1;
}

/* View-as-Markdown link */
a.gd-view-md-btn {
    color: #57606a;
}
a.gd-view-md-btn:hover {
    color: #24292f;
}

/* ── Dark mode ── */
html[data-bs-theme="dark"] .gd-copy-page-btn {
    background: #21262d;
    border-color: #30363d;
    color: #8b949e;
}
html[data-bs-theme="dark"] .gd-copy-page-btn:hover {
    background: #30363d;
    border-color: #484f58;
    color: #c9d1d9;
}
html[data-bs-theme="dark"] .gd-copy-page-btn:active {
    background: #3a424a;
}
html[data-bs-theme="dark"] .gd-copy-page-btn.gd-copy-success {
    border-color: #238636;
    color: #3fb950;
    background: #0d1117;
}
html[data-bs-theme="dark"] a.gd-view-md-btn {
    color: #8b949e;
}
html[data-bs-theme="dark"] a.gd-view-md-btn:hover {
    color: #c9d1d9;
}

/* ── Mobile: icon only ── */
@media (max-width: 768px) {
    .gd-copy-page {
        float: none;
        margin-left: 0;
        margin-bottom: 10px;
    }
    .gd-copy-page-label {
        display: none;
    }
    .gd-copy-page-btn {
        padding: 4px 6px;
    }
}

/* ── Announcement Banner ── */
.gd-announcement-banner {
    font-family: var(--bs-body-font-family, system-ui, -apple-system, sans-serif);
    line-height: 1.5;
    letter-spacing: 0.01em;
    text-wrap: balance;
}
.gd-announcement-banner a {
    font-weight: 600;
    text-decoration: underline;
    color: inherit;
}
.gd-announcement-banner a:hover {
    opacity: 0.85;
    text-decoration: underline;
}
/* Dark mode overrides */
html[data-bs-theme="dark"] .gd-announcement-info {
    background: #1a5bb5 !important;
}
html[data-bs-theme="dark"] .gd-announcement-warning {
    background: #d4a800 !important;
}
html[data-bs-theme="dark"] .gd-announcement-success {
    background: #126b3d !important;
}
html[data-bs-theme="dark"] .gd-announcement-danger {
    background: #b02a37 !important;
}

/* ── Animated Gradient Presets ── */

@keyframes gd-gradient-shift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* Shared gradient base */
.gd-gradient-sky,
.gd-gradient-peach,
.gd-gradient-prism,
.gd-gradient-lilac,
.gd-gradient-slate,
.gd-gradient-honey,
.gd-gradient-dusk,
.gd-gradient-mint {
    background-size: 400% 400% !important;
    animation: gd-gradient-shift 15s ease infinite;
    border-bottom-color: rgba(0, 0, 0, 0.08) !important;
}

/* Dark mode: white text on rich gradients */
html[data-bs-theme="dark"] .gd-gradient-sky,
html[data-bs-theme="dark"] .gd-gradient-peach,
html[data-bs-theme="dark"] .gd-gradient-prism,
html[data-bs-theme="dark"] .gd-gradient-lilac,
html[data-bs-theme="dark"] .gd-gradient-slate,
html[data-bs-theme="dark"] .gd-gradient-honey,
html[data-bs-theme="dark"] .gd-gradient-dusk,
html[data-bs-theme="dark"] .gd-gradient-mint {
    color: #ffffff !important;
    border-bottom-color: rgba(255, 255, 255, 0.15) !important;
}

/* — Sky (light: soft sky blues) — */
.gd-gradient-sky {
    background: linear-gradient(-45deg, #d0ecf9, #e0f4ff, #c5e8f7, #b8e0f5) !important;
}
html[data-bs-theme="dark"] .gd-gradient-sky {
    background: linear-gradient(-45deg, #023e8a, #0077b6, #005f73, #0096c7) !important;
}

/* — Peach (light: peach and blush) — */
.gd-gradient-peach {
    background: linear-gradient(-45deg, #ffddc1, #ffe4cc, #fdd0d8, #fbc4d4) !important;
}
html[data-bs-theme="dark"] .gd-gradient-peach {
    background: linear-gradient(-45deg, #cc4a1a, #c7760f, #b84a5f, #a33560) !important;
}

/* — Prism (light: mint, sky, lavender) — */
.gd-gradient-prism {
    background: linear-gradient(-45deg, #c4f0e0, #d0e8f5, #e4d4f4, #d8cef0) !important;
}
html[data-bs-theme="dark"] .gd-gradient-prism {
    background: linear-gradient(-45deg, #048a65, #0c6a8a, #52077d, #2a0978) !important;
}

/* — Lilac (light: lilac and pink) — */
.gd-gradient-lilac {
    background: linear-gradient(-45deg, #e8d0f0, #f5d0e0, #f0d4f8, #eac8ee) !important;
}
html[data-bs-theme="dark"] .gd-gradient-lilac {
    background: linear-gradient(-45deg, #561e64, #8b1140, #a02db3, #6e1a7d) !important;
}

/* — Slate (light: cool grays) — */
.gd-gradient-slate {
    background: linear-gradient(-45deg, #e0e4e8, #eceff1, #dde2e6, #d5dadf) !important;
}
html[data-bs-theme="dark"] .gd-gradient-slate {
    background: linear-gradient(-45deg, #37474f, #455a64, #3e525e, #263238) !important;
}

/* — Honey (light: warm cream and apricot) — */
.gd-gradient-honey {
    background: linear-gradient(-45deg, #ffe0c2, #ffedcc, #ffe5b4, #ffd6a8) !important;
}
html[data-bs-theme="dark"] .gd-gradient-honey {
    background: linear-gradient(-45deg, #bf360c, #e65100, #ef6c00, #b71c1c) !important;
}

/* — Dusk (light: soft lavender-blue) — */
.gd-gradient-dusk {
    background: linear-gradient(-45deg, #d8daf0, #dddff5, #d4d0ee, #dad4f2) !important;
}
html[data-bs-theme="dark"] .gd-gradient-dusk {
    background: linear-gradient(-45deg, #0d1244, #141b55, #1a0f52, #261560) !important;
}

/* — Mint (light: pale aqua) — */
.gd-gradient-mint {
    background: linear-gradient(-45deg, #ccece8, #d5f0ec, #c4e8e4, #d0f2ee) !important;
}
html[data-bs-theme="dark"] .gd-gradient-mint {
    background: linear-gradient(-45deg, #00695c, #00796b, #004d40, #00897b) !important;
}

/* Navbar text overrides when a gradient preset is active — dark mode only */
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15) !important;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .nav-link,
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .navbar-brand .navbar-title {
    color: #ffffff !important;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .nav-link:hover {
    background-color: rgba(255, 255, 255, 0.2) !important;
    color: #ffffff !important;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .nav-item:has(#github-widget) .nav-link:hover {
    background-color: transparent !important;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .nav-item.compact .nav-link,
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .gd-navbar-icon {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .nav-item.compact .nav-link:hover,
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .gd-navbar-icon:hover {
    background: rgba(255, 255, 255, 0.12) !important;
    border-color: rgba(255, 255, 255, 0.25);
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .nav-link.active {
    text-decoration-color: rgba(255, 255, 255, 0.75) !important;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .navbar-toggler {
    border: none !important;
    color: #e0e0e0 !important;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .navbar-toggler-icon {
    filter: none;
}
html[data-bs-theme="dark"] .navbar[class*="gd-gradient-"] .bi {
    color: #ffffff !important;
}

/* Banner link/dismiss overrides for gradient presets — dark mode only */
html[data-bs-theme="dark"] .gd-announcement-banner[class*="gd-gradient-"] a {
    color: #ffffff !important;
}
html[data-bs-theme="dark"] .gd-announcement-banner[class*="gd-gradient-"] button {
    color: #ffffff !important;
}

/* ── Content Area Gradient Glow ── */
/* ── Multi-pulse content glow ──
   Three overlapping radial-gradient pulses that drift independently,
   creating an organic, subtly animated glow at the top of the page.
   Each pulse has its own center, size, speed, and opacity curve. */

@keyframes gd-glow-drift-1 {
    0%   { transform: translateX(0%) scale(1);     opacity: 0.6;  }
    25%  { transform: translateX(5%) scale(1.08);   opacity: 0.42; }
    50%  { transform: translateX(-3%) scale(1.02);  opacity: 0.55; }
    75%  { transform: translateX(2%) scale(1.05);   opacity: 0.38; }
    100% { transform: translateX(0%) scale(1);     opacity: 0.6;  }
}
@keyframes gd-glow-drift-2 {
    0%   { transform: translateX(0%) scale(1);     opacity: 0.45; }
    30%  { transform: translateX(-6%) scale(1.1);   opacity: 0.58; }
    60%  { transform: translateX(4%) scale(0.96);   opacity: 0.35; }
    100% { transform: translateX(0%) scale(1);     opacity: 0.45; }
}
@keyframes gd-glow-drift-3 {
    0%   { transform: translateX(0%) scale(1);     opacity: 0.35; }
    35%  { transform: translateX(3%) scale(1.12);   opacity: 0.52; }
    70%  { transform: translateX(-5%) scale(1.04);  opacity: 0.28; }
    100% { transform: translateX(0%) scale(1);     opacity: 0.35; }
}

/* Container — fixed overlay with vertical fade-out mask */
.gd-content-glow {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 600px;
    pointer-events: none;
    z-index: 0;
    mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

/* Shared pulse layer */
.gd-glow-pulse {
    position: absolute;
    inset: 0;
}

/* Pulse 1 — large, left-of-centre, slowest */
.gd-glow-pulse-1 {
    background: radial-gradient(ellipse 65% 55% at 28% 0%, var(--gd-glow-color), transparent);
    animation: gd-glow-drift-1 23s ease-in-out infinite;
    opacity: 0.6;
}

/* Pulse 2 — medium, right-of-centre */
.gd-glow-pulse-2 {
    background: radial-gradient(ellipse 50% 45% at 62% 5%, var(--gd-glow-color), transparent);
    animation: gd-glow-drift-2 19s ease-in-out infinite;
    opacity: 0.45;
}

/* Pulse 3 — smaller, far-right, subtlest */
.gd-glow-pulse-3 {
    background: radial-gradient(ellipse 45% 50% at 85% 0%, var(--gd-glow-color), transparent);
    animation: gd-glow-drift-3 27s ease-in-out infinite;
    opacity: 0.35;
}

/* ── Preset colour tokens ── */
.gd-content-glow-sky   { --gd-glow-color: #c5e8f7; }
.gd-content-glow-peach { --gd-glow-color: #ffddc1; }
.gd-content-glow-prism { --gd-glow-color: #d0e8f5; }
.gd-content-glow-lilac { --gd-glow-color: #e8d0f0; }
.gd-content-glow-slate { --gd-glow-color: #dde2e6; }
.gd-content-glow-honey { --gd-glow-color: #ffe0c2; }
.gd-content-glow-dusk  { --gd-glow-color: #d8daf0; }
.gd-content-glow-mint  { --gd-glow-color: #ccece8; }

html[data-bs-theme="dark"] .gd-content-glow-sky   { --gd-glow-color: #023e8a; }
html[data-bs-theme="dark"] .gd-content-glow-peach { --gd-glow-color: #cc4a1a; }
html[data-bs-theme="dark"] .gd-content-glow-prism { --gd-glow-color: #0c6a8a; }
html[data-bs-theme="dark"] .gd-content-glow-lilac { --gd-glow-color: #561e64; }
html[data-bs-theme="dark"] .gd-content-glow-slate { --gd-glow-color: #37474f; }
html[data-bs-theme="dark"] .gd-content-glow-honey { --gd-glow-color: #bf360c; }
html[data-bs-theme="dark"] .gd-content-glow-dusk  { --gd-glow-color: #141b55; }
html[data-bs-theme="dark"] .gd-content-glow-mint  { --gd-glow-color: #00695c; }

/* Sticky navbar on desktop — disable headroom hide-on-scroll for non-mobile */
@media (min-width: 992px) {
    header.headroom--unpinned {
        transform: translateY(0%) !important;
    }
}

/* Mobile: keep secondary nav (sidebar toggle + page title) always visible.
   When headroom hides the header via translateY(-100%), the secondary nav
   counter-translates by its own height so it stays at viewport top.
   Math: parent moves -(navH+secH), child moves +secH → viewport y = 0. */
@media (max-width: 991.98px) {
    .quarto-secondary-nav {
        position: relative;
        z-index: 1;
        transition: transform 200ms linear, box-shadow 200ms linear;
    }

    header.headroom--unpinned .quarto-secondary-nav {
        transform: translateY(100%);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    }
}

/*---------------------------------- Skills Page -----------------------------------*/

.gd-skills-install {
    border: 1px solid tint-color($primary, 70%);
    border-radius: 0.5rem;
    margin-bottom: 2rem;
    overflow: hidden;
    width: 100%;
}

.gd-skills-install-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border: none;
    background: tint-color($primary, 93%);
    color: $primary;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;

    &:hover {
        background: tint-color($primary, 87%);
    }

    &[aria-expanded="true"] {
        border-bottom: 1px solid tint-color($primary, 70%);
    }
}

.gd-skills-install-icon {
    display: inline-block;
    font-size: 0.65rem;
    transition: transform 0.25s ease;
    line-height: 1;

    .gd-skills-install-toggle[aria-expanded="true"] & {
        transform: rotate(90deg);
    }
}

.gd-skills-install-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    background: tint-color($primary, 97%);

    > * {
        overflow: hidden;
        min-height: 0;
    }

    &.gd-skills-install-open {
        grid-template-rows: 1fr;
    }

    // Inner wrapper — the direct grid child. MUST have no padding
    // so that 0fr collapses to true zero height.
    .gd-skills-install-inner {
        // padding lives on .gd-skills-install-pad below
    }

    // Padding wrapper inside the overflow-hidden element
    .gd-skills-install-pad {
        padding: 1rem 1.25rem 0.75rem;
    }

    // Override Quarto's code block styling inside the install section
    .sourceCode {
        margin: 0.35rem 0 0.75rem;
    }

    // Make copy buttons always visible inside the install dropdown
    .gd-code-copy {
        opacity: 1 !important;
    }

    // Compact single-line code cells — reduce Quarto's generous pre padding
    pre.sourceCode {
        padding: 0.5rem 2.5rem 0.5rem 0.75rem; // right padding leaves room for copy btn
        font-size: 0.88rem;

        code {
            padding: 0 !important;
        }
    }

    p {
        margin: 0.25rem 0;
        font-size: 0.92rem;
        line-height: 1.55;

        a {
            text-decoration: underline;
            cursor: pointer;
        }
    }

    strong {
        color: shade-color($primary, 15%);
    }
}

html[data-bs-theme="dark"] {
    .gd-skills-install {
        border-color: shade-color($primary, 50%);
    }

    .gd-skills-install-toggle {
        background: shade-color($primary, 80%);
        color: tint-color($primary, 50%);

        &:hover {
            background: shade-color($primary, 72%);
        }

        &[aria-expanded="true"] {
            border-bottom-color: shade-color($primary, 50%);
        }
    }

    .gd-skills-install-body {
        background: shade-color($primary, 88%);

        strong {
            color: tint-color($primary, 40%);
        }

        .code-copy-outer-scaffold,
        .sourceCode,
        pre.sourceCode {
            background: transparent;
        }
    }
}

// Skills page: eliminate column-page side margins
body.gd-skills-page .content.column-page {
    grid-column: page-start / page-end !important;
    max-width: 100%;
}

// License page: same full-width layout as Skills page
body.gd-license-page .content.column-page {
    grid-column: page-start / page-end !important;
    max-width: 100%;
}

// Blog index page: use full width (no TOC sidebar)
body.gd-blog-index .content.column-page {
    grid-column: page-start / page-end !important;
    max-width: 100%;
}

// Terminal-style raw skill file rendering
.gd-skills-raw {
    background: $gray-100;
    color: $gray-800;
    font-family: $font-family-monospace;
    font-size: 0.85rem;
    line-height: 1.7;
    padding: 1.25rem 1.5rem;
    border-radius: 0.5rem;
    border: 1px solid $gray-300;
    overflow-x: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
    margin: 0;
    max-width: 100%;

    // Quarto wraps the fenced code block content in its own elements;
    // flatten them so they inherit pre styling.
    .sourceCode {
        background: transparent !important;
        border: none !important;
        margin: 0;
        padding: 0;
    }

    code {
        background: transparent;
        color: inherit;
        padding: 0;
        font-size: inherit;
        white-space: pre-wrap;
    }

    pre {
        background: transparent !important;
        border: none !important;
        margin: 0;
        padding: 0;
        color: inherit;
    }
}

html[data-bs-theme="dark"] .gd-skills-raw {
    background: $gray-900;
    border-color: $gray-700;
    color: $gray-200;
}

// Directory tree for skill packages with companion subdirectories
.gd-skills-tree {
    background: $gray-100;
    color: $gray-700;
    font-family: $font-family-monospace;
    font-size: 0.88rem;
    line-height: 1.8;
    padding: 1rem 1.25rem;
    border-radius: 0.5rem;
    border: 1px solid $gray-300;
    margin: 0 0 1.5rem;
    white-space: pre;
    overflow-x: auto;

    a {
        color: $primary;
        text-decoration: none;

        &:hover {
            text-decoration: underline;
        }
    }
}

html[data-bs-theme="dark"] .gd-skills-tree {
    background: $gray-900;
    border-color: $gray-700;
    color: $gray-400;

    a {
        color: tint-color($primary, 40%);
    }
}

// Capitalized section heading above the directory tree
.gd-skills-section-heading {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: $gray-500;
    margin: 0 0 0.5rem;
    padding: 0;
}

html[data-bs-theme="dark"] .gd-skills-section-heading {
    color: $gray-400;
}

// Heading label for each companion file section
.gd-skills-file-heading {
    font-family: $font-family-monospace;
    font-size: 0.95rem;
    font-weight: 600;
    color: $gray-700;
    margin: 1.5rem 0 0.35rem;
    padding: 0;

    &:first-of-type {
        margin-top: 0;
    }
}

html[data-bs-theme="dark"] .gd-skills-file-heading {
    color: $gray-300;
}

/*---------------------------------- Skill Switcher ----------------------------------------*/
// Sticky pill bar for choosing between multiple skills on the Skills page.

.gd-skill-switcher-sentinel {
    height: 0;          // grows dynamically when the bar is stuck
}

.gd-skill-switcher {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 0.75rem;
    margin: 0 0 1.75rem;
    background: $gray-100;
    border: 1px solid $gray-300;
    border-radius: 0.5rem;
    overflow-x: auto;
    z-index: 1019;       // just below the Quarto navbar (1030)
    transition: box-shadow 0.2s ease, border-radius 0.2s ease;

    &--stuck {
        position: fixed;
        left: 0;
        right: 0;
        margin: 0;
        border-radius: 0;
        border-left: none;
        border-right: none;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        padding-left: max(0.75rem, env(safe-area-inset-left));
        padding-right: max(0.75rem, env(safe-area-inset-right));
        transition: top 200ms linear, box-shadow 0.2s ease, border-radius 0.2s ease;
    }
}

.gd-skill-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 1rem;
    border: 1px solid transparent;
    border-radius: 999px;
    background: transparent;
    color: $gray-600;
    font-size: 0.88rem;
    font-weight: 500;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
    line-height: 1.4;

    &:hover {
        background: tint-color($primary, 90%);
        color: $primary;
    }

    &--active,
    &[aria-selected="true"] {
        background: $white;
        color: $primary;
        border-color: tint-color($primary, 55%);
        font-weight: 600;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    }
}

.gd-skill-pill__icon {
    width: 1em;
    height: 1em;
    flex-shrink: 0;
}

// Hidden panels: the JS toggles the `hidden` attribute.
.gd-skill-panel[hidden] {
    display: none !important;
}

html[data-bs-theme="dark"] {
    .gd-skill-switcher {
        background: $gray-900;
        border-color: $gray-700;

        &--stuck {
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
        }
    }

    .gd-skill-pill {
        color: $gray-400;

        &:hover {
            background: shade-color($primary, 75%);
            color: tint-color($primary, 45%);
        }

        &--active,
        &[aria-selected="true"] {
            background: $gray-800;
            color: tint-color($primary, 45%);
            border-color: shade-color($primary, 45%);
        }
    }
}


/*---------------------------------- Page Metadata Footer -----------------------------------*/
// Displays creation/modification dates and optional author avatars at the bottom of pages.
// Uses a horizontal layout: [edit icon] 4 months ago  [create icon] 2 years ago  ─  [avatar1] [avatar2]

.gd-page-metadata {
    border-top: 1px solid $gray-300;
    padding-top: 1rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: $gray-600;
    font-size: 0.875rem;
    line-height: 1.5;
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;

    // Dates section with icons
    .gd-metadata-dates {
        display: flex;
        align-items: center;
        gap: 1rem;
    }

    // Individual metadata item (icon + timestamp)
    .gd-metadata-item {
        display: flex;
        align-items: center;
        gap: 0.35rem;
    }

    // Icon styling
    .gd-icon {
        display: inline-flex;
        align-items: center;
        opacity: 0.65;

        svg {
            vertical-align: middle;
        }
    }

    // Timestamp text (hoverable for absolute date tooltip)
    .gd-timestamp {
        // Native title tooltip on hover
    }

    // Separator between dates and authors
    .gd-metadata-separator {
        color: $gray-400;
        font-weight: 300;
    }

    // Authors section with avatars
    .gd-metadata-authors {
        display: flex;
        align-items: center;
        gap: 0.4rem;
    }

    // Author link wrapper
    .gd-author-link {
        display: inline-flex;
        text-decoration: none;
    }

    // Circular avatar image (GitHub-style)
    .gd-author-avatar {
        width: 26px;
        height: 26px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
        border: 2px solid $gray-300;
        transition: border-color 0.15s ease;

        &:hover {
            border-color: $primary;
        }
    }

    // Initials fallback when no image
    .gd-author-initials {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 26px;
        height: 26px;
        border-radius: 50%;
        background: $primary;
        color: white;
        font-weight: 600;
        font-size: 0.7rem;
        flex-shrink: 0;
        border: 2px solid transparent;
        transition: border-color 0.15s ease;

        &:hover {
            border-color: shade-color($primary, 20%);
        }
    }
}

// Dark mode adjustments
html[data-bs-theme="dark"] .gd-page-metadata {
    border-top-color: $gray-700;
    color: $gray-400;

    .gd-icon {
        opacity: 0.6;
    }

    .gd-metadata-separator {
        color: $gray-600;
    }

    .gd-author-avatar {
        border-color: $gray-600;

        &:hover {
            border-color: tint-color($primary, 30%);
        }
    }

    .gd-author-initials {
        background: tint-color($primary, 20%);

        &:hover {
            border-color: tint-color($primary, 40%);
        }
    }
}


/*---------------------------------------------------------------------------
 * Custom Tooltips (Tippy.js) — Material Filling Effect
 * Replaces native browser title tooltips with instant, styled tooltips.
 *---------------------------------------------------------------------------*/

/* Base Tippy.js overrides for Great Docs theming */
.tippy-box {
    /* Material-inspired styling */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.8125rem;
    line-height: 1.4;
    border-radius: 6px;
    font-weight: 500;
    /* Material filling effect: clip overflow for smooth fill animation */
    overflow: hidden;
}

/* Light mode theme — Material Filling Effect */
.tippy-box[data-theme~="gd-material"] {
    background-color: $gray-800;
    color: $white;
    box-shadow:
        0 4px 14px -2px rgba($black, 0.2),
        0 2px 4px -1px rgba($black, 0.1);

    /* Material filling effect background */
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba($white, 0.12) 0%,
            rgba($white, 0) 50%
        );
        pointer-events: none;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
    }

    &[data-state="visible"]::before {
        opacity: 1;
    }

    /* Arrow styling */
    > .tippy-arrow {
        color: $gray-800;
    }

    > .tippy-arrow::before {
        /* Subtle shadow on arrow */
        filter: drop-shadow(0 1px 2px rgba($black, 0.15));
    }

    /* Content padding */
    > .tippy-content {
        padding: 6px 10px;
        position: relative;
        z-index: 1;
    }
}

/* Dark mode theme — Material Filling Effect */
.tippy-box[data-theme~="gd-material-dark"] {
    background-color: $gray-200;
    color: $gray-900;
    box-shadow:
        0 4px 14px -2px rgba($black, 0.35),
        0 2px 4px -1px rgba($black, 0.2);

    /* Material filling effect background */
    &::before {
        content: "";
        position: absolute;
        inset: 0;
        background: linear-gradient(
            135deg,
            rgba($black, 0.06) 0%,
            rgba($black, 0) 50%
        );
        pointer-events: none;
        opacity: 0;
        transition: opacity 150ms ease-in-out;
    }

    &[data-state="visible"]::before {
        opacity: 1;
    }

    /* Arrow styling */
    > .tippy-arrow {
        color: $gray-200;
    }

    > .tippy-arrow::before {
        filter: drop-shadow(0 1px 3px rgba($black, 0.25));
    }

    /* Content padding */
    > .tippy-content {
        padding: 6px 10px;
        position: relative;
        z-index: 1;
    }
}

/* Citation / cross-reference hover popovers.
   Quarto shows the full reference on hover using a tippy box with
   theme="quarto", whose default surface is light. In dark mode that flashes a
   white panel over the page, so give it a dark surface, border, and arrow that
   track the GD theme tokens. */
html.quarto-dark .tippy-box[data-theme~="quarto"],
body.quarto-dark .tippy-box[data-theme~="quarto"] {
    background-color: var(--gd-bg-secondary);
    color: var(--gd-text-primary);
    border: 1px solid var(--gd-border-color);

    .csl-entry {
        color: var(--gd-text-primary);
    }

    a {
        color: var(--gd-citation-color);
    }

    /* Arrow fill + per-placement borders (tippy colors the arrow via borders) */
    > .tippy-arrow {
        color: var(--gd-bg-secondary);
    }

    &[data-placement^="top"] > .tippy-arrow::before {
        border-top-color: var(--gd-bg-secondary);
    }

    &[data-placement^="bottom"] > .tippy-arrow::before {
        border-bottom-color: var(--gd-bg-secondary);
    }

    &[data-placement^="left"] > .tippy-arrow::before {
        border-left-color: var(--gd-bg-secondary);
    }

    &[data-placement^="right"] > .tippy-arrow::before {
        border-right-color: var(--gd-bg-secondary);
    }
}

/* Animation: shift-away (included with Tippy but customized) */
.tippy-box[data-animation="shift-away"][data-state="hidden"] {
    opacity: 0;
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="top"] {
    transform: translateY(6px);
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="bottom"] {
    transform: translateY(-6px);
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="left"] {
    transform: translateX(6px);
}

.tippy-box[data-animation="shift-away"][data-state="hidden"][data-placement^="right"] {
    transform: translateX(-6px);
}

/* Mounted state for material fill transition */
.gd-tooltip-mounted .tippy-box::before {
    animation: gd-tooltip-fill 200ms ease-out forwards;
}

@keyframes gd-tooltip-fill {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Arrow placement adjustments */
.tippy-box[data-placement^="top"] > .tippy-arrow {
    bottom: -5px;
}

.tippy-box[data-placement^="bottom"] > .tippy-arrow {
    top: -5px;
}

.tippy-box[data-placement^="left"] > .tippy-arrow {
    right: -5px;
}

.tippy-box[data-placement^="right"] > .tippy-arrow {
    left: -5px;
}

/* Ensure tooltips appear above other elements */
.tippy-popper,
[data-tippy-root] {
    z-index: 9999 !important;
}

/* Interactive tooltip styling (for tooltips with links, etc.) */
.tippy-box[data-theme~="gd-material"] a,
.tippy-box[data-theme~="gd-material-dark"] a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.tippy-box[data-theme~="gd-material"] a:hover,
.tippy-box[data-theme~="gd-material-dark"] a:hover {
    opacity: 0.85;
}

/* Disable native tooltips on elements that have Tippy */
[data-tippy-content] {
    /* Ensure no lingering title attribute displays */
    title: none;
}


/* =====================================================
   Mermaid Diagram Dark Mode Support
   Adjusts the neutral theme for dark backgrounds
   ===================================================== */

/* Mermaid diagram container - center in content area */
/* Target the cell containing mermaid diagrams */
.cell:has(.mermaid-js),
.cell:has(.mermaid) {
    display: block;
}

.cell-output-display:has(.mermaid-js),
.cell-output-display:has(.mermaid) {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* The figure element wrapping the diagram */
.cell-output-display figure.figure:has(.mermaid-js),
.cell-output-display figure.figure:has(.mermaid) {
    display: flex;
    justify-content: center;
    margin: 1.5rem auto;
    width: 100%;
}

/* The immediate parent div of the SVG */
.cell-output-display figure.figure > div:has(> .mermaid-js),
.cell-output-display figure.figure > div:has(> svg.mermaid-js) {
    display: flex;
    justify-content: center;
    width: 100%;
}

/* The rendered SVG diagram itself */
svg.mermaid-js {
    display: block;
    margin: 0 auto;
}

pre.mermaid {
    background: transparent;
    padding: 0.5rem;
    border-radius: 6px;
    text-align: center;
}

/* Light mode: add subtle border to mermaid diagrams */
.cell-output-display:has(.mermaid-js),
.cell-output-display:has(.mermaid) {
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
}

/* Dark mode: invert mermaid diagrams for proper contrast */
body.quarto-dark .cell-output-display:has(.mermaid-js),
html.quarto-dark .cell-output-display:has(.mermaid-js) {
    background: #f8f9fa;
    border-color: #dee2e6;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.5rem 0;
}

body.quarto-dark svg.mermaid-js,
html.quarto-dark svg.mermaid-js {
    /* No filter needed - diagram is on light background */
}

/* Dark mode: fix mermaid text colors (force dark text on light background) */
body.quarto-dark svg.mermaid-js p,
html.quarto-dark svg.mermaid-js p,
body.quarto-dark svg[id^="mermaid-"] p,
html.quarto-dark svg[id^="mermaid-"] p {
    color: #333 !important;
}

body.quarto-dark svg.mermaid-js span,
html.quarto-dark svg.mermaid-js span,
body.quarto-dark svg[id^="mermaid-"] span,
html.quarto-dark svg[id^="mermaid-"] span {
    color: #333 !important;
}

body.quarto-dark svg.mermaid-js div,
html.quarto-dark svg.mermaid-js div,
body.quarto-dark svg[id^="mermaid-"] div,
html.quarto-dark svg[id^="mermaid-"] div {
    color: #333 !important;
}

body.quarto-dark svg.mermaid-js .nodeLabel,
html.quarto-dark svg.mermaid-js .nodeLabel,
body.quarto-dark svg[id^="mermaid-"] .nodeLabel,
html.quarto-dark svg[id^="mermaid-"] .nodeLabel {
    color: #333 !important;
}

body.quarto-dark svg.mermaid-js .edgeLabel,
html.quarto-dark svg.mermaid-js .edgeLabel,
body.quarto-dark svg[id^="mermaid-"] .edgeLabel,
html.quarto-dark svg[id^="mermaid-"] .edgeLabel {
    color: #333 !important;
}

body.quarto-dark svg.mermaid-js foreignObject *,
html.quarto-dark svg.mermaid-js foreignObject *,
body.quarto-dark svg[id^="mermaid-"] foreignObject *,
html.quarto-dark svg[id^="mermaid-"] foreignObject * {
    color: #333 !important;
}

/* Pre-rendered mermaid diagrams: theme switching */
.mermaid-diagram {
    text-align: center;
    margin: 1rem 0;
}

.mermaid-diagram img {
    max-width: 100%;
    height: auto;
}

/* Light mode: show light image, hide dark */
.light-mode-only {
    display: block !important;
}
.dark-mode-only {
    display: none !important;
}

/* Dark mode: show dark image, hide light */
body.quarto-dark .light-mode-only,
html.quarto-dark .light-mode-only {
    display: none !important;
}
body.quarto-dark .dark-mode-only,
html.quarto-dark .dark-mode-only {
    display: block !important;
}


/* ==========================================================================
   Responsive Tables
   Enhances table display on narrow viewports with:
   - Horizontal scroll containers for wide tables
   - Scroll indicators showing more content
   - Touch-friendly interactions
   - Smaller font size on narrow viewports

   Uses double-wrapper structure for Safari compatibility:
   - Outer wrapper (.gd-table-responsive) has position:relative for indicators
   - Inner wrapper (.gd-table-scroll) has overflow-x:auto for scrolling
   ========================================================================== */

/* Responsive table outer wrapper - positions indicators */
.gd-table-responsive {
    position: relative;
    width: 100%;
    margin-bottom: 1rem;
}

/* Inner scroll container - handles the actual scrolling */
.gd-table-scroll {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;  /* Smooth momentum scrolling on iOS */

    /* Focus state for keyboard navigation */
    &:focus {
        outline: 2px solid $primary;
        outline-offset: 2px;
    }

    &:focus:not(:focus-visible) {
        outline: none;
    }

    /* Table inside the scroll container - prevent auto-shrink, allow scroll */
    > table {
        margin-bottom: 0;
        width: max-content;
        min-width: 100%;
    }
}

/* Scroll indicators - appear at edges when content is scrollable */
.gd-table-scroll-indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;

    &.visible {
        opacity: 1;
        pointer-events: auto;
        cursor: pointer;
    }
}

.gd-table-scroll-left {
    left: 0;
    background: linear-gradient(to right, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
    padding-left: 4px;
}

.gd-table-scroll-right {
    right: 0;
    background: linear-gradient(to left, rgba(255, 255, 255, 0.95) 0%, transparent 100%);
    padding-right: 4px;
}

.gd-scroll-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.06);
    color: $gray-600;
    font-size: 1.25rem;
    font-weight: 300;
    line-height: 1;
    transition: background 0.15s ease, color 0.15s ease;

    .gd-table-scroll-indicator:hover & {
        background: rgba(0, 0, 0, 0.12);
        color: $gray-800;
    }
}

/* Smaller font size on narrow viewports */
@media (max-width: 767.98px) {
    .gd-table-scroll > table {
        font-size: 0.85em;
    }
}

@media (max-width: 575.98px) {
    .gd-table-scroll > table {
        font-size: 0.8em;
    }
}

/* Dark mode overrides for responsive tables */
body.quarto-dark,
html[data-bs-theme="dark"] {
    .gd-table-scroll-left {
        background: linear-gradient(to right, rgba(26, 26, 26, 0.95) 0%, transparent 100%);
    }

    .gd-table-scroll-right {
        background: linear-gradient(to left, rgba(26, 26, 26, 0.95) 0%, transparent 100%);
    }

    .gd-scroll-arrow {
        background: rgba(255, 255, 255, 0.08);
        color: $gray-400;

        .gd-table-scroll-indicator:hover & {
            background: rgba(255, 255, 255, 0.15);
            color: $gray-200;
        }
    }
}

/* Print: disable scroll and show full table */
@media print {
    .gd-table-scroll {
        overflow: visible;
    }

    .gd-table-scroll-indicator {
        display: none;
    }
}

/* ── Inline icon shortcode ───────────────────────────────────── */

/* Strip the paragraph margin Pandoc adds when wrapping inline icons
   inside table cells.  Without this, <td><p><svg>…</svg></p></td>
   gets ~1rem of bottom margin and rows appear double-height.         */
td > p:has(> svg.gd-icon) {
    margin: 0;
    line-height: inherit;
}


/* ── Keyboard Keys Shortcode ──────────────────────────────────── */

.gd-keys {
    display: inline-block;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
        "Liberation Mono", monospace;
    font-size: 0.8em;
    font-weight: 500;
    line-height: 1;
    padding: 0.15em 0.45em;
    min-width: 1.6em;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    color: #1f2328;
    background: linear-gradient(180deg, #f6f8fa 0%, #eaeef2 100%);
    border: 1px solid #d0d7de;
    border-bottom-width: 2px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(27, 31, 36, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.gd-keys-sep {
    display: inline-block;
    margin: 0 0.15em;
    font-size: 0.85em;
    color: #656d76;
    vertical-align: baseline;
    user-select: none;
}

/* Function keys (F1–F20): smallcaps-height text on the baseline */
.gd-keys-fn {
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.25em 0.45em;
    text-transform: uppercase;
    position: relative;
    top: -1.1px;
}

/* Dark mode */
body.quarto-dark .gd-keys,
html.quarto-dark .gd-keys,
:root[data-bs-theme="dark"] .gd-keys {
    color: #e6edf3;
    background: linear-gradient(180deg, #2d333b 0%, #22272e 100%);
    border-color: #444c56;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

body.quarto-dark .gd-keys-sep,
html.quarto-dark .gd-keys-sep,
:root[data-bs-theme="dark"] .gd-keys-sep {
    color: #8b949e;
}


/* ── Video embedding enhancements ────────────────────────────── */

/* Subtle border around video containers so the frame edge is visible */
.quarto-video {
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    overflow: hidden;
}

body.quarto-dark .quarto-video,
html[data-bs-theme="dark"] .quarto-video {
    border-color: rgba(255, 255, 255, 0.15);
}


/* ---- Keyboard Shortcuts Help Overlay ---- */

.gd-keyboard-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.gd-keyboard-overlay-visible {
    opacity: 1;
    visibility: visible;
}

.gd-keyboard-overlay-inner {
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 1.5rem 2rem 2rem;
    transform: translateY(12px);
    transition: transform 0.2s ease;
}

.gd-keyboard-overlay-visible .gd-keyboard-overlay-inner {
    transform: translateY(0);
}

.gd-keyboard-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.25rem;

    h2 {
        margin: 0;
        font-size: 1.15rem;
        font-weight: 600;
        color: #212529;
    }
}

.gd-keyboard-overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #212529;
    }

    &:focus-visible {
        outline: 2px solid $primary;
        outline-offset: 2px;
    }
}

.gd-keyboard-overlay-body {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

.gd-keyboard-group {
    h3 {
        font-size: 0.75rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: #868e96;
        margin: 0 0 0.5rem;
    }

    dl {
        margin: 0;
    }
}

.gd-keyboard-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);

    &:last-child {
        border-bottom: none;
    }

    dt {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        font-weight: normal;
        margin: 0;
    }

    dd {
        margin: 0;
        color: #495057;
        font-size: 0.9rem;
    }
}

.gd-keyboard-or {
    font-size: 0.75rem;
    color: #adb5bd;
}

kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.6em;
    padding: 0.15em 0.45em;
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 500;
    line-height: 1;
    color: #495057;
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 0.3rem;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.08);
}

/* Dark mode */
[data-bs-theme="dark"] {
    .gd-keyboard-overlay {
        background: rgba(0, 0, 0, 0.6);
    }

    .gd-keyboard-overlay-inner {
        background: #2b3035;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .gd-keyboard-overlay-header h2 {
        color: #f8f9fa;
    }

    .gd-keyboard-overlay-close {
        color: #adb5bd;

        &:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #f8f9fa;
        }
    }

    .gd-keyboard-group h3 {
        color: #868e96;
    }

    .gd-keyboard-row {
        border-bottom-color: rgba(255, 255, 255, 0.06);

        dd {
            color: #ced4da;
        }
    }

    kbd {
        color: #ced4da;
        background: #343a40;
        border-color: #495057;
        box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gd-keyboard-overlay,
    .gd-keyboard-overlay-inner {
        transition: none;
    }
}


/* ---- Menu Overlay (keyboard shortcut 'm') ---- */

.gd-menu-overlay {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.45);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.gd-menu-overlay-visible {
    opacity: 1;
    visibility: visible;
}

.gd-menu-overlay-inner {
    width: 90%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 1.25rem 1.5rem 1.5rem;
    transform: translateY(12px);
    transition: transform 0.2s ease;
}

.gd-menu-overlay-visible .gd-menu-overlay-inner {
    transform: translateY(0);
}

.gd-menu-overlay-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1rem;

    h2 {
        margin: 0;
        font-size: 1.05rem;
        font-weight: 600;
        color: #212529;
    }
}

.gd-menu-overlay-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: #6c757d;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;

    &:hover {
        background: rgba(0, 0, 0, 0.06);
        color: #212529;
    }

    &:focus-visible {
        outline: 2px solid $primary;
        outline-offset: 2px;
    }
}

/* Menu list */
.gd-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.gd-menu-section {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #868e96;
    padding: 0.65rem 0.75rem 0.25rem;
    cursor: default;

    &:first-child {
        padding-top: 0;
    }
}

.gd-menu-item {
    display: flex;
    align-items: center;
    padding: 0.45rem 0.75rem;
    border-radius: 0.4rem;
    color: #495057;
    font-size: 0.9rem;
    text-decoration: none;
    transition: background-color 0.12s ease, color 0.12s ease;

    &:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #212529;
        text-decoration: none;
    }

    &:focus-visible {
        outline: 2px solid $primary;
        outline-offset: -2px;
        background: rgba(0, 0, 0, 0.03);
    }
}

/* Label contains icon + text + inline badge; fills remaining space */
.gd-menu-item-label {
    flex: 1 1 auto;
    min-width: 0;

    /* Sidebar icons inside the overlay */
    .gd-nav-icon {
        flex-shrink: 0;
        width: 15px;
        height: 15px;
        margin-right: 0.4em;
        vertical-align: -0.15em;
        opacity: 0.7;
    }

    /* Status badges sit inline right after the text */
    .gd-sidebar-status-badge {
        margin-left: 4px;
        vertical-align: middle;
    }
}

.gd-menu-item:hover .gd-nav-icon,
.gd-menu-item-active .gd-nav-icon {
    opacity: 1;
}

/* Upcoming rocket icon — pushed to the far right of the row */
.gd-menu-item > .gd-sidebar-upcoming {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 6px;
}

/* Section headers with icons */
.gd-menu-section .gd-nav-icon {
    width: 14px;
    height: 14px;
    margin-right: 0.35em;
    vertical-align: -0.1em;
    opacity: 0.6;
}

.gd-menu-item-active {
    font-weight: 600;
    color: $primary;
    background: rgba($primary, 0.06);
}

.gd-menu-item-focused {
    background: rgba(0, 0, 0, 0.06);
    color: #212529;
    outline: 2px solid $primary;
    outline-offset: -2px;
}

/* Dark mode */
[data-bs-theme="dark"] {
    .gd-menu-overlay {
        background: rgba(0, 0, 0, 0.6);
    }

    .gd-menu-overlay-inner {
        background: #2b3035;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }

    .gd-menu-overlay-header h2 {
        color: #f8f9fa;
    }

    .gd-menu-overlay-close {
        color: #adb5bd;

        &:hover {
            background: rgba(255, 255, 255, 0.08);
            color: #f8f9fa;
        }
    }

    .gd-menu-section {
        color: #868e96;
    }

    .gd-menu-item {
        color: #ced4da;

        &:hover {
            background: rgba(255, 255, 255, 0.06);
            color: #f8f9fa;
        }
    }

    .gd-menu-item-active {
        color: lighten($primary, 15%);
        background: rgba($primary, 0.12);
    }

    .gd-menu-item-focused {
        background: rgba(255, 255, 255, 0.08);
        color: #f8f9fa;
        outline: 2px solid lighten($primary, 15%);
        outline-offset: -2px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gd-menu-overlay,
    .gd-menu-overlay-inner {
        transition: none;
    }
}

/* ── Mobile menu overlay refinements ──
   When opened via the Title Bar button the overlay acts as the primary
   sidebar navigation.  We add backdrop blur, scroll lock, keep the
   Title Bar visible above the overlay, and use fixed-height inner
   scrolling so the card borders stay in place for long nav lists. */

/* Scroll lock: prevent body from scrolling while menu is open */
body.gd-menu-open {
    overflow: hidden;
}

@media (max-width: 991.98px) {
    /* Suppress Bootstrap's collapse sidebar on mobile — the overlay
       replaces it entirely.  The sidebar DOM stays in the page so
       keyboard-nav.js can still read its links. */
    #quarto-sidebar {
        display: none !important;
    }

    #quarto-sidebar-glass {
        display: none !important;
    }

    /* Backdrop blur behind the overlay */
    .gd-menu-overlay {
        -webkit-backdrop-filter: blur(6px);
        backdrop-filter: blur(6px);
    }

    /* Keep the Title Bar above the overlay when the menu is open.
       The Title Bar lives inside #quarto-header, so we raise the
       header's z-index above the overlay (1090) while the menu is
       active.  The top navbar stays behind the overlay so only the
       Title Bar peeks through. */
    body.gd-menu-open #quarto-header {
        z-index: 1091;
    }

    body.gd-menu-open #quarto-header > .navbar {
        position: relative;
        z-index: -1;
    }

    /* Size the card to sit below the Title Bar with internal scrolling.
       margin-top  15px → breathing room below the Title Bar
       margin-bottom 20px → clearance for mobile Safari bottom chrome */
    .gd-menu-overlay-inner {
        width: calc(100% - 2rem);
        max-width: 420px;
        max-height: calc(100vh - 5rem - 35px);
        margin-top: 15px;
        margin-bottom: 20px;
        display: flex;
        flex-direction: column;
    }

    /* Fixed header, scrollable body */
    .gd-menu-overlay-body {
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        margin: 0 -1.5rem -1.5rem;
        padding: 0 1.5rem 1.5rem;
    }

    .gd-menu-overlay-header {
        flex-shrink: 0;
    }
}

/* ── Reference overlay: API/CLI switcher + filter inside menu overlay ──
   On reference pages the overlay includes the reference switcher and a
   live-filter input above the item list. */
.gd-menu-overlay .gd-menu-ref-switcher {
    display: flex;
    gap: 0.25rem;
    background: #f0f0f0;
    border-radius: 6px;
    padding: 0.2rem;
    margin-bottom: 0.75rem;
}

.gd-menu-overlay .gd-menu-ref-switcher-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.45rem 0.5rem;
    border: none;
    border-radius: 4px;
    background: transparent;
    color: #666;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.gd-menu-overlay .gd-menu-ref-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.5);
    color: #333;
}

.gd-menu-overlay .gd-menu-ref-switcher-btn.active {
    background: #fff;
    color: #333;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.gd-menu-overlay .gd-menu-ref-filter {
    position: relative;
    margin-bottom: 0.5rem;
}

.gd-menu-overlay .gd-menu-ref-filter-input {
    width: 100%;
    padding: 0.4rem 0.75rem 0.4rem 2rem;
    font-size: 16px; /* prevent iOS zoom */
    border: 1px solid #e9e9e9;
    border-radius: 6px;
    background-color: #fff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gd-menu-overlay .gd-menu-ref-filter-input:focus {
    outline: none;
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.12);
}

.gd-menu-overlay .gd-menu-ref-filter-input::placeholder {
    color: #999;
}

.gd-menu-overlay .gd-menu-ref-filter-icon {
    position: absolute;
    left: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #999;
    pointer-events: none;
    font-size: 0.8rem;
}

/* Dark mode overrides for reference overlay widgets */
[data-bs-theme="dark"] .gd-menu-overlay .gd-menu-ref-switcher {
    background: #2a2a2a;
}

[data-bs-theme="dark"] .gd-menu-overlay .gd-menu-ref-switcher-btn {
    color: #999;
}

[data-bs-theme="dark"] .gd-menu-overlay .gd-menu-ref-switcher-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #ccc;
}

[data-bs-theme="dark"] .gd-menu-overlay .gd-menu-ref-switcher-btn.active {
    background: #3a3a3a;
    color: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

[data-bs-theme="dark"] .gd-menu-overlay .gd-menu-ref-filter-input {
    background-color: #2a2a2a;
    border-color: #3d3d3d;
    color: #e0e0e0;
}

[data-bs-theme="dark"] .gd-menu-overlay .gd-menu-ref-filter-input:focus {
    border-color: #6ea8fe;
    box-shadow: 0 0 0 0.15rem rgba(13, 110, 253, 0.25);
}

[data-bs-theme="dark"] .gd-menu-overlay .gd-menu-ref-filter-icon {
    color: #9e9e9e;
}

/* Reference overlay items: monospace to match the desktop sidebar */
.gd-ref-sidebar .gd-menu-overlay .gd-menu-item {
    font-family: $font-family-monospace;
    font-size: 0.8rem;
}


/* ---- Back-to-Top Button ---- */

.gd-back-to-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1040;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #495057;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease, bottom 0.25s ease,
                background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

    &:hover {
        background: rgba(255, 255, 255, 1);
        color: #212529;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }

    &:focus-visible {
        outline: 2px solid $primary;
        outline-offset: 2px;
    }

    svg {
        display: block;
    }
}

.gd-back-to-top-visible {
    opacity: 1;
    visibility: visible;
}

/* Dark mode */
[data-bs-theme="dark"] .gd-back-to-top {
    background: rgba(52, 58, 64, 0.92);
    color: #dee2e6;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    &:hover {
        background: rgba(73, 80, 87, 1);
        color: #f8f9fa;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

/* Reduced motion: disable transitions */
@media (prefers-reduced-motion: reduce) {
    .gd-back-to-top {
        transition: none;
    }
}

/* Mobile: slightly smaller and tighter to edge */
@media (max-width: 767.98px) {
    .gd-back-to-top {
        bottom: 1.25rem;
        right: 1.25rem;
        width: 36px;
        height: 36px;
    }
}


/* ---- On This Page – Mobile Floating Button & Panel ---- */

.gd-otp-btn {
    position: fixed;
    bottom: 4.5rem; /* above back-to-top; JS fine-tunes this */
    right: 1.25rem;
    z-index: 1040;
    display: none; /* JS controls visibility via inline style */
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    color: #495057;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
    transition: opacity 0.25s ease, bottom 0.25s ease,
                background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;

    &:hover, &.gd-otp-btn-active {
        background: rgba(255, 255, 255, 1);
        color: #212529;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
    }

    &:focus-visible {
        outline: 2px solid $primary;
        outline-offset: 2px;
    }

    svg {
        display: block;
    }
}

/* Backdrop for dismissing the panel */
.gd-otp-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1041;
    background: rgba(0, 0, 0, 0.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.gd-otp-backdrop-visible {
    opacity: 1;
    visibility: visible;
}

/* Floating panel */
.gd-otp-panel {
    position: fixed;
    bottom: 6rem;
    right: 1.25rem;
    z-index: 1042;
    width: min(280px, calc(100vw - 2.5rem));
    max-height: min(360px, 60vh);
    overflow-y: scroll;
    overscroll-behavior: contain;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(12px) scale(0.95);
    transform-origin: bottom right;
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    -webkit-overflow-scrolling: touch;
}

.gd-otp-panel-visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.gd-otp-panel-heading {
    padding: 0.75rem 1rem 0.375rem;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #6c757d;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.gd-otp-panel-list {
    list-style: none;
    margin: 0;
    padding: 0.375rem 0;
}

.gd-otp-panel-list li {
    margin: 0;
    padding: 0;
}

.gd-otp-panel-list li.gd-otp-nested {
    padding-left: 0.75rem;
}

.gd-otp-panel-link {
    display: block;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    line-height: 1.35;
    color: #343a40;
    text-decoration: none;
    border-radius: 0;
    transition: background-color 0.1s ease;

    &:hover {
        background: rgba(0, 0, 0, 0.04);
        color: #212529;
        text-decoration: none;
    }

    &:active {
        background: rgba(0, 0, 0, 0.08);
    }
}

/* Dark mode */
[data-bs-theme="dark"] .gd-otp-btn {
    background: rgba(52, 58, 64, 0.92);
    color: #dee2e6;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

    &:hover, &.gd-otp-btn-active {
        background: rgba(73, 80, 87, 1);
        color: #f8f9fa;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    }
}

[data-bs-theme="dark"] .gd-otp-backdrop {
    background: rgba(0, 0, 0, 0.45);
}

[data-bs-theme="dark"] .gd-otp-panel {
    background: #2b3035;
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

[data-bs-theme="dark"] .gd-otp-panel-heading {
    color: #adb5bd;
    border-bottom-color: rgba(255, 255, 255, 0.08);
}

[data-bs-theme="dark"] .gd-otp-panel-link {
    color: #dee2e6;

    &:hover {
        background: rgba(255, 255, 255, 0.06);
        color: #f8f9fa;
    }

    &:active {
        background: rgba(255, 255, 255, 0.1);
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .gd-otp-btn,
    .gd-otp-panel,
    .gd-otp-backdrop {
        transition: none;
    }
}


/*-- License Features Dropdown (mirrors Skills-page install dropdown) ----------*/

.gd-license-features {
    border: 1px solid tint-color($primary, 70%);
    border-radius: 0.5rem;
    margin-bottom: 1.5rem;
    overflow: hidden;
    width: 100%;
}

.gd-license-features-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 1.25rem;
    border: none;
    background: tint-color($primary, 93%);
    color: $primary;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s ease;

    &:hover {
        background: tint-color($primary, 87%);
    }

    &[aria-expanded="true"] {
        border-bottom: 1px solid tint-color($primary, 70%);
    }
}

.gd-license-features-icon {
    display: inline-block;
    font-size: 0.65rem;
    transition: transform 0.25s ease;
    line-height: 1;

    .gd-license-features-toggle[aria-expanded="true"] & {
        transform: rotate(90deg);
    }
}

.gd-license-features-body {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease;
    background: tint-color($primary, 97%);

    > * {
        overflow: hidden;
        min-height: 0;
    }

    &.gd-license-features-open {
        grid-template-rows: 1fr;
    }

    .gd-license-features-inner {
        // no padding here — keeps 0fr collapse clean
    }

    .gd-license-features-pad {
        padding: 0.6rem 1.25rem 0.6rem;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
}

.license-feature-group h4 {
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.3rem;
    color: var(--bs-secondary-color, #6c757d);
}

.license-feature-group:first-child h4 {
    margin-top: 0;
}

.license-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
}

.license-badge {
    display: inline-block;
    padding: 0.25rem 0.6rem;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 1rem;
    line-height: 1.4;
    white-space: nowrap;
}

.license-badge-permission {
    background: rgba(25, 135, 84, 0.12);
    color: #146c43;
    border: 1px solid rgba(25, 135, 84, 0.25);
}

.license-badge-condition {
    background: rgba(13, 110, 253, 0.12);
    color: #0a58ca;
    border: 1px solid rgba(13, 110, 253, 0.25);
}

.license-badge-limitation {
    background: rgba(220, 53, 69, 0.12);
    color: #b02a37;
    border: 1px solid rgba(220, 53, 69, 0.25);
}

/* SPDX short-code badge in homepage sidebar */
.gd-spdx-badge {
    display: inline-block;
    padding: 0.05rem 0.35rem;
    padding-bottom: 0;
    font-size: 0.72rem;
    font-weight: 600;
    font-family: var(--bs-font-monospace);
    border-radius: 0.2rem;
    background: var(--bs-tertiary-bg, #f8f9fa);
    border: 1px solid var(--bs-border-color, #dee2e6);
    color: var(--bs-body-color);
    text-decoration: none;
    cursor: default;
    vertical-align: middle;
    line-height: 1.3;
    transition: background 0.15s, border-color 0.15s;

    &:hover {
        background: var(--bs-secondary-bg, #e9ecef);
        border-color: var(--bs-secondary-color, #6c757d);
        text-decoration: none;
        color: var(--bs-body-color);
    }
}

/* Dark-mode overrides for license features & badges */
html[data-bs-theme="dark"] {
    .gd-license-features {
        border-color: shade-color($primary, 50%);
    }

    .gd-license-features-toggle {
        background: shade-color($primary, 80%);
        color: tint-color($primary, 50%);

        &:hover {
            background: shade-color($primary, 72%);
        }

        &[aria-expanded="true"] {
            border-bottom-color: shade-color($primary, 50%);
        }
    }

    .gd-license-features-body {
        background: shade-color($primary, 88%);
    }

    .license-badge-permission {
        background: rgba(25, 135, 84, 0.2);
        color: #75b798;
        border-color: rgba(25, 135, 84, 0.35);
    }

    .license-badge-condition {
        background: rgba(13, 110, 253, 0.2);
        color: #6ea8fe;
        border-color: rgba(13, 110, 253, 0.35);
    }

    .license-badge-limitation {
        background: rgba(220, 53, 69, 0.2);
        color: #ea868f;
        border-color: rgba(220, 53, 69, 0.35);
    }
}

/* ── Navigation Icons (Lucide SVG) ──────────────────────────────────────── */

/* Shared icon base — applies to both navbar and sidebar icons */
.gd-nav-icon {
    flex-shrink: 0;
    margin-right: 0.4em;
    vertical-align: -0.15em; /* optical alignment with text baseline */
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

/* Navbar icons */
.navbar .nav-link > .menu-text > .gd-nav-icon {
    width: 16px;
    height: 16px;
}

.navbar .nav-link:hover > .menu-text > .gd-nav-icon {
    opacity: 1;
}

/* Sidebar icons */
#quarto-sidebar .menu-text > .gd-nav-icon,
#quarto-sidebar .sidebar-item-text > .gd-nav-icon {
    width: 15px;
    height: 15px;
}

#quarto-sidebar .sidebar-item:hover .gd-nav-icon {
    opacity: 1;
}

/* Active sidebar item — full opacity */
#quarto-sidebar .sidebar-link.active > .menu-text > .gd-nav-icon,
#quarto-sidebar a.sidebar-item-text.sidebar-link.active > .gd-nav-icon {
    opacity: 1;
}

/* Section header icons — slightly larger */
#quarto-sidebar .sidebar-item-section > .sidebar-item-container .gd-nav-icon {
    width: 16px;
    height: 16px;
}

/* Dark mode — icon color inherits from text (stroke: currentColor) */
/* No extra rules needed because Lucide uses stroke="currentColor" */

// ── Page Tags ───────────────────────────────────────────────────────────────

// Tag pills displayed below page titles
.gd-page-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.35rem;
    margin-bottom: 0.8rem;
}

.gd-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.15rem 0.55rem;
    font-size: 0.75rem;
    font-weight: 500;
    line-height: 1.4;
    color: mix($primary, $body-color, 60%);
    background-color: tint-color($primary, 90%);
    border: 1px solid tint-color($primary, 75%);
    border-radius: 1rem;
    text-decoration: none;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    white-space: nowrap;

    &:hover,
    &:focus-visible {
        background-color: tint-color($primary, 80%);
        border-color: tint-color($primary, 60%);
        color: shade-color($primary, 10%);
        text-decoration: none;
    }

    .gd-tag-icon {
        display: inline-flex;
        align-items: center;
        margin-right: 0.15rem;
        opacity: 0.7;
    }
}

// Tags index page — headings styled as pills
.gd-tag-heading {
    margin-top: 1.5rem;
    margin-bottom: 0.35rem;

    .gd-tag-pill {
        cursor: default;
        pointer-events: none;
    }
}

// Indentation for subtags (depth 1 = child, depth 2 = grandchild)
.gd-tag-indent-1 {
    margin-left: 2rem;
}

.gd-tag-indent-2 {
    margin-left: 4rem;
}

// Page links under each tag (no bullets, indented)
.gd-tag-pages {
    margin-bottom: 0.75rem;
}

.gd-tag-page-link {
    padding: 0.15rem 0;
    padding-left: 1.25rem;

    a {
        color: $body-color;
        text-decoration: underline;

        &:hover {
            color: $primary;
        }
    }
}

// Segmented pills for hierarchical tags (e.g. Python | Advanced)
.gd-tag-pill-segmented {
    padding: 0;
    overflow: hidden;
    gap: 0;

    .gd-tag-pill-segment {
        display: inline-flex;
        align-items: center;
        padding: 0.15rem 0.55rem;
    }

    .gd-tag-pill-parent {
        background-color: tint-color($primary, 90%);
    }

    .gd-tag-pill-segment:not(.gd-tag-pill-parent) {
        background-color: tint-color($primary, 95%);
    }

    .gd-tag-pill-sep {
        display: inline-block;
        width: 1px;
        align-self: stretch;
        background-color: tint-color($primary, 60%);
    }
}

.gd-tag-section {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 500;
    color: $text-muted;
    background-color: $gray-100;
    padding: 0.05rem 0.4rem;
    border-radius: 0.25rem;
    margin-left: 0.4rem;
    vertical-align: middle;
}

// Dark mode overrides for tag pills
body.quarto-dark {
    .gd-tag-pill {
        color: tint-color($primary, 70%);
        background-color: rgba($primary, 0.15);
        border-color: rgba($primary, 0.3);

        &:hover,
        &:focus-visible {
            background-color: rgba($primary, 0.25);
            border-color: rgba($primary, 0.5);
            color: tint-color($primary, 85%);
        }
    }

    .gd-tag-section {
        color: $gray-400;
        background-color: $gray-800;
    }

    .gd-tag-pill-sep {
        background-color: rgba($primary, 0.4);
    }

    .gd-tag-pill-segmented .gd-tag-pill-parent {
        background-color: rgba($primary, 0.15);
    }

    .gd-tag-pill-segmented .gd-tag-pill-segment:not(.gd-tag-pill-parent) {
        background-color: rgba($primary, 0.08);
    }

    .gd-tag-page-link a {
        color: $gray-300;
    }
}

// ── Page Status Badges ──────────────────────────────────────────────────────

// Page-level status indicator (below page title)
.gd-page-status {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.25rem 0.65rem;
    margin-top: 0.3rem;
    margin-bottom: 0.6rem;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    border-radius: 0.35rem;
    color: var(--gd-status-color, $text-muted);
    background-color: color-mix(in srgb, var(--gd-status-color, $text-muted) 8%, transparent);
    border: 1px solid color-mix(in srgb, var(--gd-status-color, $text-muted) 25%, transparent);

    .gd-status-badge-icon {
        display: inline-flex;
        align-items: center;
        opacity: 0.85;

        svg {
            width: 14px;
            height: 14px;
        }
    }

    .gd-status-badge-label {
        font-weight: 600;
    }

    .gd-status-badge-desc {
        font-weight: 400;
        opacity: 0.8;
    }
}

// Sidebar status badges (inline after link text)
.gd-sidebar-status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    padding: 0.05rem 0.35rem;
    font-size: 0.65rem;
    font-weight: 600;
    line-height: 1.3;
    border-radius: 0.75rem;
    color: var(--gd-status-color, $text-muted);
    background-color: color-mix(in srgb, var(--gd-status-color, $text-muted) 10%, transparent);
    white-space: nowrap;
    flex-shrink: 0;

    svg {
        width: 11px;
        height: 11px;
    }
}

// Make sidebar links flex so badges align right
// #quarto-sidebar has .sidebar-navigation on itself (not a descendant),
// so use #quarto-sidebar.sidebar-navigation for correct matching.
#quarto-sidebar.sidebar-navigation .sidebar-item .sidebar-link {
    display: flex;
    align-items: center;
}

// Dark mode overrides for status badges
body.quarto-dark {
    .gd-page-status {
        background-color: color-mix(in srgb, var(--gd-status-color, $text-muted) 12%, transparent);
        border-color: color-mix(in srgb, var(--gd-status-color, $text-muted) 30%, transparent);
    }

    .gd-sidebar-status-badge {
        background-color: color-mix(in srgb, var(--gd-status-color, $text-muted) 15%, transparent);
    }
}

// Upcoming indicator: animated gradient title text (Christopher Doyle palette)
.gd-upcoming-title {
    background: linear-gradient(90deg, #e63946, #eab308, #2a9d8f, #e63946);
    background-size: 300% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gd-upcoming-gradient 5s ease-in-out infinite;
}

@keyframes gd-upcoming-gradient {
    0%   { background-position: 0% center; }
    50%  { background-position: 100% center; }
    100% { background-position: 0% center; }
}

.gd-upcoming-icon {
    display: inline-flex;
    align-items: center;
    margin-left: 0.4em;
    color: #e63946;
    -webkit-text-fill-color: #e63946;
    cursor: help;
    vertical-align: middle;
}

// Smaller icon in the mobile secondary nav title
h1.quarto-secondary-nav-title .gd-upcoming-icon svg {
    width: 16px;
    height: 16px;
}

.gd-sidebar-upcoming {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    cursor: help;
}


/*-------------------------------- Color Swatch Extension --------------------------------*/

/* ── Wrapper ── */

.gd-color-swatch {
    margin: 1.5rem 0;
    border-radius: 12px;
}

.gd-color-swatch--bordered {
    border: 1px solid var(--bs-border-color);
}

.gd-color-swatch--circles {
    padding: 1.25rem;
}

.gd-color-swatch--rectangles {
    overflow: hidden;
    padding: 0;
}

/* ── Title & description ── */

.gd-cs-title {
    width: 100%;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--bs-body-color);
}

.gd-cs-description {
    width: 100%;
    font-size: 0.9375rem;
    color: var(--bs-secondary-color);
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* ── Circle swatches ── */

.gd-cs-swatches {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--gd-cs-size, 56px), 1fr));
    gap: 1.25rem;
}

.gd-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
    cursor: pointer;
    transition: transform 0.15s ease;

    &:hover {
        transform: translateY(-2px);
    }

    &:active {
        transform: translateY(0);
    }

    &:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: 4px;
        border-radius: 4px;
    }
}

.gd-swatch-color {
    width: var(--gd-cs-size, 56px);
    height: var(--gd-cs-size, 56px);
    border-radius: 50%;
    position: relative;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.15s ease;

    &:hover {
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    }

    &[data-needs-ring="true"] {
        box-shadow: inset 0 0 0 1px var(--gd-ring-color), 0 2px 8px rgba(0, 0, 0, 0.1);
    }
}

.gd-swatch-name {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--bs-body-color);
    text-align: center;
    overflow-wrap: break-word;
    word-break: break-word;
    line-height: 1.3;
}

.gd-swatch-hex {
    font-family: var(--bs-font-monospace);
    font-size: 0.6875rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

.gd-swatch-contrast {
    font-family: var(--bs-font-monospace);
    font-size: 0.625rem;
    color: var(--bs-secondary-color);
    text-align: center;
}

/* ── Rectangle swatches ── */

.gd-swatch-rect {
    display: flex;
    align-items: center;
    padding: 0.875rem 1.25rem;
    cursor: pointer;
    transition: filter 0.15s ease;
    min-height: 56px;
    position: relative;

    &:hover {
        filter: brightness(0.95);
    }

    &:not(:last-child) {
        border-bottom: 1px solid rgba(0, 0, 0, 0.06);
    }

    &:focus-visible {
        outline: 2px solid var(--bs-primary);
        outline-offset: -2px;
    }
}

.gd-swatch-rect-name {
    font-weight: 600;
    flex: 1;
}

.gd-swatch-rect-hex {
    font-family: var(--bs-font-monospace);
    font-size: 0.875rem;
    margin-right: 1.5rem;
}

.gd-swatch-contrast-samples {
    display: flex;
    gap: 0.5rem;
}

.gd-swatch-aa-sample {
    font-weight: 700;
    font-size: 0.875rem;
    padding: 0.125rem 0.375rem;
    border-radius: 4px;
}

/* ── Contrast pass/fail ── */

.gd-cs-pass {
    color: #16a34a;
}

.gd-cs-fail {
    color: #dc2626;
}

/* ── Copy overlay ── */

.gd-swatch-copy-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    border-radius: inherit;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;

    svg {
        color: #fff;
        width: 24px;
        height: 24px;
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
    }
}

/* ── Tooltip styles ── */

.gd-cs-tooltip {
    display: flex;
    gap: 0.625rem;
    padding: 0.25rem;
    font-size: 0.8125rem;
    min-width: 200px;
}

.gd-cs-tooltip-swatch {
    width: 32px;
    aspect-ratio: 1;
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 2px;
}

.gd-cs-tooltip-name {
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.gd-cs-tooltip-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;

    td {
        padding: 1px 0;
    }

    td:first-child {
        color: rgba(255, 255, 255, 0.55);
        padding-right: 0.75rem;
        white-space: nowrap;
    }

    code {
        font-size: 0.75rem;
        background: none;
        padding: 0;
    }
}

.gd-cs-tooltip-sep {
    border-top: 1px solid var(--bs-border-color-translucent);
    padding-top: 4px !important;
}

.gd-cs-tooltip-copy {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0 0.25rem;
    font-size: 0.75rem;
    opacity: 0.6;
    transition: opacity 0.15s ease;

    &:hover {
        opacity: 1;
    }
}

/* ── Dark mode overrides ── */

html[data-bs-theme="dark"] {
    .gd-swatch-color {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);

        &:hover {
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
        }

        &[data-needs-ring="true"] {
            box-shadow: inset 0 0 0 1px var(--gd-ring-color), 0 2px 8px rgba(0, 0, 0, 0.3);
        }
    }

    .gd-swatch-rect:not(:last-child) {
        border-bottom-color: rgba(255, 255, 255, 0.08);
    }

    .gd-swatch-rect:hover {
        filter: brightness(1.1);
    }

    .gd-swatch-copy-overlay {
        background: rgba(255, 255, 255, 0.25);
    }

    .gd-cs-pass {
        color: #4ade80;
    }

    .gd-cs-fail {
        color: #f87171;
    }
}

/* ── Reduced motion ── */

@media (prefers-reduced-motion: reduce) {
    .gd-swatch:hover {
        transform: none;
    }

    .gd-swatch-copy-overlay {
        transition: none;
    }
}

/* ── Responsive ── */

@media (max-width: 575.98px) {
    .gd-cs-swatches {
        gap: 0.75rem;
        grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
    }

    .gd-swatch-color {
        width: 44px !important;
        height: 44px !important;
    }

    .gd-swatch-rect {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .gd-swatch-rect-hex {
        margin-right: 0;
    }
}


/* ── Output Title Container ─────────────────────────────────────────
   Wraps code cell output with a labelled header.
   Used by #| output-title: "..." hash-pipe option.
*/
.gd-output-title-container {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 0.375rem;
    margin-top: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.gd-output-title-header {
    background: rgba(0, 0, 0, 0.03);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding: 0.35rem 0.75rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: rgba(0, 0, 0, 0.55);
    letter-spacing: 0.02em;
}

.gd-output-title-body {
    padding: 0.5rem 0.75rem;
}

.gd-output-title-body .cell-output {
    margin: 0;
    padding: 0;
}

.gd-output-title-body .cell-output pre {
    margin: 0;
    border: none;
    background: transparent;
    padding: 0;
}

/* Frameless variant for rich HTML outputs (GT tables, styled DataFrames, etc.)
   These objects carry their own visual structure; a surrounding frame creates
   an ugly double-border.  We keep the title label but drop the container
   border and body padding so the HTML output breathes.
   We target display outputs that contain a child div (rich HTML wrapper)
   rather than just a <pre> block (which is a plain return value). */
.gd-output-title-container:has(.gd-output-title-body .cell-output-display > div) {
    border: none;
}

.gd-output-title-container:has(.gd-output-title-body .cell-output-display > div)
    .gd-output-title-header {
    background: transparent;
    border-bottom: none;
    padding-left: 0;
}

.gd-output-title-container:has(.gd-output-title-body .cell-output-display > div)
    .gd-output-title-body {
    padding: 0;
}

body.quarto-dark .gd-output-title-container {
    border-color: rgba(255, 255, 255, 0.12);
}

body.quarto-dark .gd-output-title-header {
    background: rgba(255, 255, 255, 0.04);
    border-bottom-color: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.55);
}

/*------------------------------- Collapsible Details --------------------------------*/

// Base details element
.gd-details {
    border: 1px solid tint-color($primary, 70%);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    overflow: hidden;
    transition: height 0.3s ease;

    // Remove the default marker/triangle from <summary>
    > summary {
        list-style: none;
        &::-webkit-details-marker { display: none; }
        &::marker { display: none; }
    }
}

// Summary bar (the clickable title row)
.gd-details-summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.75rem 0.75rem;
    background: tint-color($primary, 93%);
    color: $primary;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    user-select: none;
    transition: background 0.15s ease;

    &:hover {
        background: tint-color($primary, 87%);
    }

    // Show bottom border when open
    .gd-details[open] & {
        border-bottom: 1px solid tint-color($primary, 70%);
    }
}

// Chevron indicator (CSS-only rotating arrow)
.gd-details-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    transition: transform 0.25s ease;

    &::before {
        content: "";
        display: block;
        width: 0.45rem;
        height: 0.45rem;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        transition: transform 0.25s ease;
    }

    .gd-details[open] &::before,
    .gd-details--open &::before {
        transform: rotate(45deg);
    }
}

// Icon wrapper (Lucide icon before the title)
.gd-details-icon-wrap {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    line-height: 1;
}

.gd-details-icon {
    width: 1em;
    height: 1em;
}

// Title text
.gd-details-title {
    flex: 1 1 auto;
}

// Body content area
.gd-details-body {
    padding: 0.75rem 1.0rem 0.75rem;
    background: tint-color($primary, 97%);

    > :last-child {
        margin-bottom: 0;
    }

    // Code blocks inside details
    .sourceCode {
        margin: 0.35rem 0 0.75rem;
    }

    pre.sourceCode {
        padding: 0.5rem 2.5rem 0.5rem 0.75rem;
        font-size: 0.88rem;

        code {
            padding: 0 !important;
        }
    }
}

// Animation state classes (managed by details.js)
.gd-details--animating {
    overflow: hidden;
    transition: height 0.3s ease;
}

// ── Type variants (callout-like styling) ─────────────────────────────

.gd-details--note {
    border-color: #3b82f6;

    .gd-details-summary {
        background: tint-color(#3b82f6, 90%);
        color: shade-color(#3b82f6, 20%);

        &:hover { background: tint-color(#3b82f6, 83%); }
    }
    .gd-details[open] > .gd-details-summary,
    &[open] > .gd-details-summary {
        border-bottom-color: tint-color(#3b82f6, 70%);
    }
    .gd-details-body { background: tint-color(#3b82f6, 96%); }
}

.gd-details--warning {
    border-color: #f59e0b;

    .gd-details-summary {
        background: tint-color(#f59e0b, 90%);
        color: shade-color(#f59e0b, 30%);

        &:hover { background: tint-color(#f59e0b, 83%); }
    }
    &[open] > .gd-details-summary {
        border-bottom-color: tint-color(#f59e0b, 70%);
    }
    .gd-details-body { background: tint-color(#f59e0b, 96%); }
}

.gd-details--tip {
    border-color: #10b981;

    .gd-details-summary {
        background: tint-color(#10b981, 90%);
        color: shade-color(#10b981, 20%);

        &:hover { background: tint-color(#10b981, 83%); }
    }
    &[open] > .gd-details-summary {
        border-bottom-color: tint-color(#10b981, 70%);
    }
    .gd-details-body { background: tint-color(#10b981, 96%); }
}

.gd-details--danger {
    border-color: #ef4444;

    .gd-details-summary {
        background: tint-color(#ef4444, 90%);
        color: shade-color(#ef4444, 20%);

        &:hover { background: tint-color(#ef4444, 83%); }
    }
    &[open] > .gd-details-summary {
        border-bottom-color: tint-color(#ef4444, 70%);
    }
    .gd-details-body { background: tint-color(#ef4444, 96%); }
}

// ── Gradient variant (animated theme gradient) ───────────────────────

.gd-details--gradient {
    border-color: color-mix(in srgb, var(--gd-accent, #6366f1) 40%, transparent);

    .gd-details-summary {
        background: linear-gradient(
            -45deg,
            color-mix(in srgb, var(--gd-accent, #6366f1) 15%, white),
            color-mix(in srgb, var(--gd-accent-secondary, #a855f7) 12%, white),
            color-mix(in srgb, var(--gd-accent, #6366f1) 10%, white),
            color-mix(in srgb, var(--gd-accent-secondary, #a855f7) 15%, white)
        );
        background-size: 400% 400%;
        animation: gd-gradient-shift 15s ease infinite;
        color: color-mix(in srgb, var(--gd-accent, #6366f1) 85%, black);

        &:hover {
            background: linear-gradient(
                -45deg,
                color-mix(in srgb, var(--gd-accent, #6366f1) 22%, white),
                color-mix(in srgb, var(--gd-accent-secondary, #a855f7) 18%, white),
                color-mix(in srgb, var(--gd-accent, #6366f1) 15%, white),
                color-mix(in srgb, var(--gd-accent-secondary, #a855f7) 22%, white)
            );
            background-size: 400% 400%;
            animation: gd-gradient-shift 15s ease infinite;
        }
    }

    &[open] > .gd-details-summary {
        border-bottom-color: color-mix(in srgb, var(--gd-accent, #6366f1) 30%, transparent);
    }

    .gd-details-body {
        background: linear-gradient(
            -45deg,
            color-mix(in srgb, var(--gd-accent, #6366f1) 4%, white),
            color-mix(in srgb, var(--gd-accent-secondary, #a855f7) 3%, white),
            color-mix(in srgb, var(--gd-accent, #6366f1) 2%, white),
            color-mix(in srgb, var(--gd-accent-secondary, #a855f7) 4%, white)
        );
        background-size: 400% 400%;
        animation: gd-gradient-shift 15s ease infinite;
    }
}

// ── Gradient preset variants ─────────────────────────────────────────
// Each preset reuses gd-details--gradient base and overrides colors.

// Shared base for all named gradient presets
.gd-details--gradient-sky,
.gd-details--gradient-peach,
.gd-details--gradient-prism,
.gd-details--gradient-lilac,
.gd-details--gradient-slate,
.gd-details--gradient-honey,
.gd-details--gradient-dusk,
.gd-details--gradient-mint {
    .gd-details-summary,
    .gd-details-body {
        background-size: 400% 400%;
        animation: gd-gradient-shift 15s ease infinite;
    }
}

.gd-details--gradient-sky {
    border-color: #90cdf4;
    .gd-details-summary {
        background: linear-gradient(-45deg, #d0ecf9, #e0f4ff, #c5e8f7, #b8e0f5);
        color: #023e8a;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #90cdf4; }
    .gd-details-body { background: linear-gradient(-45deg, #edf7fd, #f2faff, #eaf6fc, #e7f4fb); }
}

.gd-details--gradient-peach {
    border-color: #f9b89a;
    .gd-details-summary {
        background: linear-gradient(-45deg, #ffddc1, #ffe4cc, #fdd0d8, #fbc4d4);
        color: #7c2d12;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #f9b89a; }
    .gd-details-body { background: linear-gradient(-45deg, #fff4ec, #fff7f0, #fef0f2, #fdedf3); }
}

.gd-details--gradient-prism {
    border-color: #a7d8c8;
    .gd-details-summary {
        background: linear-gradient(-45deg, #c4f0e0, #d0e8f5, #e4d4f4, #d8cef0);
        color: #1e3a5f;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #a7d8c8; }
    .gd-details-body { background: linear-gradient(-45deg, #ecfaf4, #eff5fb, #f5eefc, #f2eefa); }
}

.gd-details--gradient-lilac {
    border-color: #d8a8e8;
    .gd-details-summary {
        background: linear-gradient(-45deg, #e8d0f0, #f5d0e0, #f0d4f8, #eac8ee);
        color: #4a1462;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #d8a8e8; }
    .gd-details-body { background: linear-gradient(-45deg, #f7eefc, #fdf0f5, #faeefb, #f8ecf9); }
}

.gd-details--gradient-slate {
    border-color: #b0b8c1;
    .gd-details-summary {
        background: linear-gradient(-45deg, #e0e4e8, #eceff1, #dde2e6, #d5dadf);
        color: #263238;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #b0b8c1; }
    .gd-details-body { background: linear-gradient(-45deg, #f4f5f7, #f8f9fa, #f3f4f6, #f1f2f4); }
}

.gd-details--gradient-honey {
    border-color: #f5c97a;
    .gd-details-summary {
        background: linear-gradient(-45deg, #ffe0c2, #ffedcc, #ffe5b4, #ffd6a8);
        color: #7c2d12;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #f5c97a; }
    .gd-details-body { background: linear-gradient(-45deg, #fff6ec, #fffaf0, #fff5e6, #fff2e0); }
}

.gd-details--gradient-dusk {
    border-color: #b0b4d8;
    .gd-details-summary {
        background: linear-gradient(-45deg, #d8daf0, #dddff5, #d4d0ee, #dad4f2);
        color: #1a1050;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #b0b4d8; }
    .gd-details-body { background: linear-gradient(-45deg, #f0f1fa, #f2f3fc, #eeedf9, #f0eefb); }
}

.gd-details--gradient-mint {
    border-color: #80cbc4;
    .gd-details-summary {
        background: linear-gradient(-45deg, #ccece8, #d5f0ec, #c4e8e4, #d0f2ee);
        color: #004d40;
        &:hover { filter: brightness(0.96); }
    }
    &[open] > .gd-details-summary { border-bottom-color: #80cbc4; }
    .gd-details-body { background: linear-gradient(-45deg, #ebf8f6, #eff9f8, #e9f7f5, #ecfaf8); }
}

// ── Nesting ──────────────────────────────────────────────────────────

.gd-details .gd-details {
    margin: 0.5rem 0;
    border-radius: 0.375rem;

    .gd-details-summary {
        padding: 0.5rem 1rem;
        font-size: 0.92rem;
    }

    .gd-details-body {
        padding: 0.75rem 1rem 0.5rem;
    }
}

// ── Dark mode ────────────────────────────────────────────────────────

html[data-bs-theme="dark"] {

    .gd-details {
        border-color: shade-color($primary, 50%);
    }

    .gd-details-summary {
        background: shade-color($primary, 80%);
        color: tint-color($primary, 50%);

        &:hover {
            background: shade-color($primary, 72%);
        }
    }

    .gd-details[open] > .gd-details-summary {
        border-bottom-color: shade-color($primary, 50%);
    }

    .gd-details-body {
        background: shade-color($primary, 88%);

        .code-copy-outer-scaffold,
        .sourceCode,
        pre.sourceCode {
            background: transparent;
        }
    }

    // Type variants — dark mode
    .gd-details--note {
        border-color: shade-color(#3b82f6, 40%);

        .gd-details-summary {
            background: shade-color(#3b82f6, 75%);
            color: tint-color(#3b82f6, 55%);
            &:hover { background: shade-color(#3b82f6, 65%); }
        }
        &[open] > .gd-details-summary { border-bottom-color: shade-color(#3b82f6, 40%); }
        .gd-details-body { background: shade-color(#3b82f6, 88%); }
    }

    .gd-details--warning {
        border-color: shade-color(#f59e0b, 50%);

        .gd-details-summary {
            background: shade-color(#f59e0b, 75%);
            color: tint-color(#f59e0b, 55%);
            &:hover { background: shade-color(#f59e0b, 65%); }
        }
        &[open] > .gd-details-summary { border-bottom-color: shade-color(#f59e0b, 50%); }
        .gd-details-body { background: shade-color(#f59e0b, 88%); }
    }

    .gd-details--tip {
        border-color: shade-color(#10b981, 50%);

        .gd-details-summary {
            background: shade-color(#10b981, 75%);
            color: tint-color(#10b981, 55%);
            &:hover { background: shade-color(#10b981, 65%); }
        }
        &[open] > .gd-details-summary { border-bottom-color: shade-color(#10b981, 50%); }
        .gd-details-body { background: shade-color(#10b981, 88%); }
    }

    .gd-details--danger {
        border-color: shade-color(#ef4444, 50%);

        .gd-details-summary {
            background: shade-color(#ef4444, 75%);
            color: tint-color(#ef4444, 55%);
            &:hover { background: shade-color(#ef4444, 65%); }
        }
        &[open] > .gd-details-summary { border-bottom-color: shade-color(#ef4444, 50%); }
        .gd-details-body { background: shade-color(#ef4444, 88%); }
    }

    .gd-details--gradient {
        border-color: color-mix(in srgb, var(--gd-accent, #818cf8) 35%, transparent);

        .gd-details-summary {
            background: linear-gradient(
                -45deg,
                color-mix(in srgb, var(--gd-accent, #818cf8) 25%, black),
                color-mix(in srgb, var(--gd-accent-secondary, #c084fc) 20%, black),
                color-mix(in srgb, var(--gd-accent, #818cf8) 18%, black),
                color-mix(in srgb, var(--gd-accent-secondary, #c084fc) 25%, black)
            );
            background-size: 400% 400%;
            animation: gd-gradient-shift 15s ease infinite;
            color: #ffffff;

            &:hover {
                background: linear-gradient(
                    -45deg,
                    color-mix(in srgb, var(--gd-accent, #818cf8) 32%, black),
                    color-mix(in srgb, var(--gd-accent-secondary, #c084fc) 28%, black),
                    color-mix(in srgb, var(--gd-accent, #818cf8) 25%, black),
                    color-mix(in srgb, var(--gd-accent-secondary, #c084fc) 32%, black)
                );
                background-size: 400% 400%;
                animation: gd-gradient-shift 15s ease infinite;
            }
        }

        &[open] > .gd-details-summary {
            border-bottom-color: color-mix(in srgb, var(--gd-accent, #818cf8) 25%, transparent);
        }

        .gd-details-body {
            background: linear-gradient(
                -45deg,
                color-mix(in srgb, var(--gd-accent, #818cf8) 8%, black),
                color-mix(in srgb, var(--gd-accent-secondary, #c084fc) 6%, black),
                color-mix(in srgb, var(--gd-accent, #818cf8) 5%, black),
                color-mix(in srgb, var(--gd-accent-secondary, #c084fc) 8%, black)
            );
            background-size: 400% 400%;
            animation: gd-gradient-shift 15s ease infinite;
        }
    }

    // Named gradient presets — dark mode
    .gd-details--gradient-sky {
        border-color: #0077b6;
        .gd-details-summary {
            background: linear-gradient(-45deg, #023e8a, #0077b6, #005f73, #0096c7);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #005f73; }
        .gd-details-body { background: linear-gradient(-45deg, #021c3d, #012e4a, #012a38, #01374b); }
    }

    .gd-details--gradient-peach {
        border-color: #cc4a1a;
        .gd-details-summary {
            background: linear-gradient(-45deg, #cc4a1a, #c7760f, #b84a5f, #a33560);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #a33560; }
        .gd-details-body { background: linear-gradient(-45deg, #3d160a, #3b2405, #37161d, #31101d); }
    }

    .gd-details--gradient-prism {
        border-color: #048a65;
        .gd-details-summary {
            background: linear-gradient(-45deg, #048a65, #0c6a8a, #52077d, #2a0978);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #0c6a8a; }
        .gd-details-body { background: linear-gradient(-45deg, #02291e, #042029, #180225, #0d0224); }
    }

    .gd-details--gradient-lilac {
        border-color: #561e64;
        .gd-details-summary {
            background: linear-gradient(-45deg, #561e64, #8b1140, #a02db3, #6e1a7d);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #8b1140; }
        .gd-details-body { background: linear-gradient(-45deg, #1a091e, #290613, #300e35, #210826); }
    }

    .gd-details--gradient-slate {
        border-color: #455a64;
        .gd-details-summary {
            background: linear-gradient(-45deg, #37474f, #455a64, #3e525e, #263238);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #3e525e; }
        .gd-details-body { background: linear-gradient(-45deg, #111518, #15191e, #13181b, #0c0f11); }
    }

    .gd-details--gradient-honey {
        border-color: #bf360c;
        .gd-details-summary {
            background: linear-gradient(-45deg, #bf360c, #e65100, #ef6c00, #b71c1c);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #e65100; }
        .gd-details-body { background: linear-gradient(-45deg, #391004, #441800, #482000, #370808); }
    }

    .gd-details--gradient-dusk {
        border-color: #1a0f52;
        .gd-details-summary {
            background: linear-gradient(-45deg, #0d1244, #141b55, #1a0f52, #261560);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #141b55; }
        .gd-details-body { background: linear-gradient(-45deg, #040514, #060819, #080518, #0b061c); }
    }

    .gd-details--gradient-mint {
        border-color: #00695c;
        .gd-details-summary {
            background: linear-gradient(-45deg, #00695c, #00796b, #004d40, #00897b);
            color: #ffffff;
            &:hover { filter: brightness(1.15); }
        }
        &[open] > .gd-details-summary { border-bottom-color: #004d40; }
        .gd-details-body { background: linear-gradient(-45deg, #001f1b, #002420, #001713, #002924); }
    }
}

// ── Gleam border effect ──────────────────────────────────────────────
// A traveling light that sweeps around the outer border of the details frame.
// Uses a background-layering trick: a conic-gradient background clipped to
// border-box shows through a transparent border, while a solid fill covers
// the padding-box (content area). Animation is JS-driven via --gd-gleam-angle.
//
// Light mode: subtle colored border with a bright white highlight sweeping.
// Dark mode: transparent border with a colored highlight sweeping.

.gd-details--gleam {
    --gd-gleam-color: #{tint-color($primary, 20%)};
    --gd-gleam-angle: 0deg;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--gd-gleam-bg, var(--bs-body-bg, #ffffff)), var(--gd-gleam-bg, var(--bs-body-bg, #ffffff))) padding-box,
        conic-gradient(
            from var(--gd-gleam-angle),
            var(--gd-gleam-color) 0%,
            var(--gd-gleam-color) 60%,
            white 75%,
            white 82%,
            var(--gd-gleam-color) 92%,
            var(--gd-gleam-color) 100%
        ) border-box;
}

// Gleam + gradient preset combinations
.gd-details--gleam.gd-details--gradient-sky { --gd-gleam-color: #38bdf8; }
.gd-details--gleam.gd-details--gradient-peach { --gd-gleam-color: #fb923c; }
.gd-details--gleam.gd-details--gradient-prism { --gd-gleam-color: #a78bfa; }
.gd-details--gleam.gd-details--gradient-lilac { --gd-gleam-color: #c084fc; }
.gd-details--gleam.gd-details--gradient-slate { --gd-gleam-color: #94a3b8; }
.gd-details--gleam.gd-details--gradient-honey { --gd-gleam-color: #fbbf24; }
.gd-details--gleam.gd-details--gradient-dusk { --gd-gleam-color: #818cf8; }
.gd-details--gleam.gd-details--gradient-mint { --gd-gleam-color: #2dd4bf; }
.gd-details--gleam.gd-details--gradient { --gd-gleam-color: var(--gd-accent, #6366f1); }

// Type-based gleam colors
.gd-details--gleam.gd-details--note { --gd-gleam-color: #60a5fa; }
.gd-details--gleam.gd-details--warning { --gd-gleam-color: #fbbf24; }
.gd-details--gleam.gd-details--tip { --gd-gleam-color: #34d399; }
.gd-details--gleam.gd-details--danger { --gd-gleam-color: #f87171; }

// Dark mode gleam adjustments — inverted: transparent base, colored highlight
html[data-bs-theme="dark"] {
    .gd-details--gleam {
        --gd-gleam-color: #{tint-color($primary, 55%)};
        border-color: transparent;
        background:
            linear-gradient(var(--bs-body-bg, #212529), var(--bs-body-bg, #212529)) padding-box,
            conic-gradient(
                from var(--gd-gleam-angle),
                transparent 0%,
                transparent 60%,
                var(--gd-gleam-color) 75%,
                color-mix(in srgb, var(--gd-gleam-color) 60%, white) 80%,
                var(--gd-gleam-color) 85%,
                transparent 95%,
                transparent 100%
            ) border-box;
    }

    .gd-details--gleam.gd-details--gradient-sky { --gd-gleam-color: #7dd3fc; }
    .gd-details--gleam.gd-details--gradient-peach { --gd-gleam-color: #fdba74; }
    .gd-details--gleam.gd-details--gradient-prism { --gd-gleam-color: #c4b5fd; }
    .gd-details--gleam.gd-details--gradient-lilac { --gd-gleam-color: #d8b4fe; }
    .gd-details--gleam.gd-details--gradient-slate { --gd-gleam-color: #cbd5e1; }
    .gd-details--gleam.gd-details--gradient-honey { --gd-gleam-color: #fde68a; }
    .gd-details--gleam.gd-details--gradient-dusk { --gd-gleam-color: #a5b4fc; }
    .gd-details--gleam.gd-details--gradient-mint { --gd-gleam-color: #5eead4; }
    .gd-details--gleam.gd-details--gradient { --gd-gleam-color: var(--gd-accent, #818cf8); }
    .gd-details--gleam.gd-details--note { --gd-gleam-color: #93c5fd; }
    .gd-details--gleam.gd-details--warning { --gd-gleam-color: #fde68a; }
    .gd-details--gleam.gd-details--tip { --gd-gleam-color: #6ee7b7; }
    .gd-details--gleam.gd-details--danger { --gd-gleam-color: #fca5a5; }
}

// ── Reduced motion ───────────────────────────────────────────────────

@media (prefers-reduced-motion: reduce) {
    .gd-details {
        transition: none;
    }
    .gd-details--animating {
        transition: none;
    }
    .gd-details-chevron::before {
        transition: none;
    }
    .gd-details-summary {
        transition: none;
    }
    .gd-details--gradient .gd-details-summary,
    .gd-details--gradient .gd-details-body,
    .gd-details--gradient-sky .gd-details-summary,
    .gd-details--gradient-sky .gd-details-body,
    .gd-details--gradient-peach .gd-details-summary,
    .gd-details--gradient-peach .gd-details-body,
    .gd-details--gradient-prism .gd-details-summary,
    .gd-details--gradient-prism .gd-details-body,
    .gd-details--gradient-lilac .gd-details-summary,
    .gd-details--gradient-lilac .gd-details-body,
    .gd-details--gradient-slate .gd-details-summary,
    .gd-details--gradient-slate .gd-details-body,
    .gd-details--gradient-honey .gd-details-summary,
    .gd-details--gradient-honey .gd-details-body,
    .gd-details--gradient-dusk .gd-details-summary,
    .gd-details--gradient-dusk .gd-details-body,
    .gd-details--gradient-mint .gd-details-summary,
    .gd-details--gradient-mint .gd-details-body {
        animation: none;
    }
}

// ── Sparkle icon animation (Skills link in sidebar) ─────────────────────────
@keyframes gd-sparkle-color {
    0%   { color: #e74c3c; }
    33%  { color: #f39c12; }
    67%  { color: #3498db; }
    100% { color: #e74c3c; }
}

@keyframes gd-sparkle-pulse {
    0%, 100% { transform: scale(1); opacity: 0.85; }
    50%      { transform: scale(1.3); opacity: 1; }
}

@keyframes gd-sparkle-curated-pulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.9; }
    25%      { transform: scale(1.5) rotate(10deg); opacity: 1; }
    50%      { transform: scale(1.1) rotate(-5deg); opacity: 0.95; }
    75%      { transform: scale(1.6) rotate(8deg); opacity: 1; }
}

.gd-sparkle {
    display: inline-block;
    animation:
        gd-sparkle-color 3s ease-in-out infinite,
        gd-sparkle-pulse 2s ease-in-out infinite;
}

.gd-sparkle-curated {
    display: inline-block;
    animation:
        gd-sparkle-color 1.8s ease-in-out infinite,
        gd-sparkle-curated-pulse 1.4s ease-in-out infinite;
    filter: drop-shadow(0 0 2px currentColor);
}

@media (prefers-reduced-motion: reduce) {
    .gd-sparkle,
    .gd-sparkle-curated {
        animation: gd-sparkle-color 6s ease-in-out infinite;
        filter: none;
    }
}

/*-- scss:functions --*/

/*-- scss:uses --*/
