:root {
  --mbr-icon-search: url("data:image/svg+xml,%20%20%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221.2em%22%20height%3D%221.2em%22%20viewBox%3D%220%200%20512%20512%22%3E%3Cpath%20fill%3D%22currentColor%22%20d%3D%22M416%20208c0%2045.9-14.9%2088.3-40%20122.7l126.6%20126.7c12.5%2012.5%2012.5%2032.8%200%2045.3s-32.8%2012.5-45.3%200L330.7%20376c-34.4%2025.2-76.8%2040-122.7%2040C93.1%20416%200%20322.9%200%20208S93.1%200%20208%200s208%2093.1%20208%20208M208%20352a144%20144%200%201%200%200-288a144%20144%200%201%200%200%20288%22%2F%3E%3C%2Fsvg%3E");

  /* Sidebar Navigation Variables (for mbr-browse-single) */
  --mbr-sidebar-width: 280px;
  --mbr-hide-nav-bp: 1024px;
  --mbr-show-tags: block; /* Set to 'none' to hide tags in sidebar */

  /* Pull Quote Styling Variables */
  --mbr-pullquote-bg: var(--pico-muted-border-color);
  --mbr-pullquote-border: var(--pico-primary);
  --mbr-pullquote-color: var(--pico-color);

  /* Marginalia Styling Variables */
  --mbr-marginalia-bg: var(--pico-secondary-background);
  /* --mbr-marginalia-border: var(--pico-muted-border-color); */
  --mbr-marginalia-border: var(--pico-secondary-hover-background);
  --mbr-marginalia-color: var(--pico-muted-color);

  /* GitHub Alert: Note (Blue) */
  --mbr-alert-note-bg: rgba(227, 242, 253, 0.4);
  --mbr-alert-note-border: #1976d2;
  --mbr-alert-note-icon-color: #1976d2;

  /* GitHub Alert: Tip (Green) */
  --mbr-alert-tip-bg: rgba(232, 245, 233, 0.4);
  --mbr-alert-tip-border: #388e3c;
  --mbr-alert-tip-icon-color: #388e3c;

  /* GitHub Alert: Important (Purple) */
  --mbr-alert-important-bg: rgba(243, 229, 245, 0.4);
  --mbr-alert-important-border: #7b1fa2;
  --mbr-alert-important-icon-color: #7b1fa2;

  /* GitHub Alert: Warning (Orange) */
  --mbr-alert-warning-bg: rgba(255, 243, 224, 0.4);
  --mbr-alert-warning-border: #f57c00;
  --mbr-alert-warning-icon-color: #f57c00;

  /* GitHub Alert: Caution (Red) */
  --mbr-alert-caution-bg: rgba(255, 235, 238, 0.4);
  --mbr-alert-caution-border: #c62828;
  --mbr-alert-caution-icon-color: #c62828;

  /* Alert Icons (SVG Data URIs) */
  --mbr-icon-note: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cline x1='12' y1='16' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='8' x2='12.01' y2='8'%3E%3C/line%3E%3C/svg%3E");
  --mbr-icon-tip: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 2.38 1.19 4.47 3 5.74V17a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1v-2.26c1.81-1.27 3-3.36 3-5.74a7 7 0 0 0-7-7z'%3E%3C/path%3E%3Cpath d='M9 21h6'%3E%3C/path%3E%3C/svg%3E");
  --mbr-icon-important: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'%3E%3C/path%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");
  --mbr-icon-warning: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z'%3E%3C/path%3E%3Cline x1='12' y1='9' x2='12' y2='13'%3E%3C/line%3E%3Cline x1='12' y1='17' x2='12.01' y2='17'%3E%3C/line%3E%3C/svg%3E");
  --mbr-icon-caution: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86 7.86 2'%3E%3C/polygon%3E%3Cline x1='12' y1='8' x2='12' y2='12'%3E%3C/line%3E%3Cline x1='12' y1='16' x2='12.01' y2='16'%3E%3C/line%3E%3C/svg%3E");

  /* tie reveal.js styles to our pico styles and theme */
  --r-background-color: var(--pico-background-color);
  --r-main-font: var(--pico-font-family);
  --r-main-font-size: calc(var(--pico-font-size) * 1.25);
  --r-main-color: var(--pico-color);
  --r-block-margin: calc(var(--pico-spacing) * 1.2);

  --r-heading-margin: var(--r-block-margin);
  --r-heading-font: var(--pico-font-family);

  --r-heading-color: var(--pico-primary);
  --r-heading-line-height: 1.2;
  --r-heading-letter-spacing: normal;
  --r-heading-text-transform: uppercase;
  --r-heading-text-shadow: none;
  --r-heading-font-weight: 700;

  --r-heading1-text-shadow: none;

  --r-heading1-size: calc(var(--pico-font-size) * 3.1);
  --r-heading2-size: calc(var(--pico-font-size) * 1.8);
  --r-heading3-size: calc(var(--pico-font-size) * 1.6);
  --r-heading4-size: calc(var(--pico-font-size) * 1.3);

  --r-code-font: var(--pico-font-family-monospace);

  --r-link-color: var(--pico-primary);
  /* not sure on this one; could do lch(from var(--pico-primary) calc(l - 20) c h)  to darken */
  --r-link-color-dark: var(--pico-primary);
  --r-link-color-hover: var(--pico-primary-hover);
  --r-selection-background-color: var(--pico-text-selection-color);
  --r-selection-color: var(--pico-color);
  --r-overlay-element-bg-color: var(--pico-modal-overlay-background-color);
  --r-overlay-element-fg-color: var(--pico-color);
}

main > section[data-theme="light"] {
  background-color: rgba(255, 255, 255, 0.85);
  padding: var(--pico-block-spacing-vertical) 0;
}

main > section[data-theme="dark"] {
  background-color: rgba(0, 0, 0, 0.85);
  padding: var(--pico-block-spacing-vertical) 0;
}

.mbr-search-button {
  width: 1.2em;
  height: 1.2em;
  mask-size: cover;
  mask: var(--mbr-icon-search) no-repeat 100% 100%;
  background-color: var(--pico-color);
  border: none;
  outline: none;
}

body > header {
  background-color: var(--pico-background-color);
  border-bottom: 2px solid var(--pico-secondary-border);
  position: sticky;
  top: 0;
  padding-block: 0;
  z-index: 999;
}

body > header > nav {
  padding-block: 0;
  margin-block: 0;
}
body > header > nav > ul {
  height: 2.4em;
}

body > header nav details[class="dropdown"] summary {
  border-color: transparent;
  background-color: transparent;
  margin-right: -14px;
}

body > header nav details[class="dropdown"] summary::after {
  background: none;
}

nav[aria-label="breadcrumb"] ul li {
  padding-top: 0;
  font-style: italic;
}

body > footer {
  border-top: 1px solid var(--pico-secondary-border);
}

/* ==================== Sidebar Navigation Grid Layout ==================== */

/*
 * CSS Grid layout for body when mbr-browse-single sidebar is active.
 * The component adds 'mbr-has-sidebar' class to body when in desktop mode (>1024px).
 * On mobile (<1024px), the sidebar is an overlay drawer - no grid layout needed.
 */

/* Desktop: sidebar visible inline via CSS grid */
@media (min-width: 1024px) {
  body.mbr-has-sidebar {
    display: grid;
    grid-template-columns: var(--mbr-sidebar-width) 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
      "sidebar header"
      "sidebar main"
      "sidebar footer";
    min-height: 100vh;
  }

  body.mbr-has-sidebar > mbr-browse-single {
    grid-area: sidebar;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
    border-right: 1px solid var(--pico-muted-border-color);
    z-index: 100;
  }

  body.mbr-has-sidebar > header {
    grid-area: header;
    position: sticky;
    top: 0;
  }

  body.mbr-has-sidebar > main {
    grid-area: main;
  }

  body.mbr-has-sidebar > footer {
    grid-area: footer;
  }
}

/* Mobile: no grid layout, sidebar is overlay drawer handled by component */
@media (max-width: 1023px) {
  body.mbr-has-sidebar {
    display: block;
  }

  body.mbr-has-sidebar > mbr-browse-single {
    /* Component handles overlay positioning itself */
  }
}

figure > video {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 50px);
  max-width: 100%;
  align-items: center;
  /* display: inline-flex; */
  user-select: none;
}
/* figure > video::cue { */
/*   font-size: 0.875em; */
/*   margin: 1em; */
/*   padding: 0.5em; */
/* } */
/* media-provider > video::cue { */
/*   display: none; */
/* } */

ol li {
  list-style: decimal;
}

/* ==================== Dark Mode Overrides ==================== */

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Marginalia - Dark Mode */
    --mbr-marginalia-bg: rgba(32, 38, 50, 0.6);

    /* GitHub Alerts - Dark Mode */
    --mbr-alert-note-bg: rgba(13, 71, 161, 0.2);
    --mbr-alert-note-border: #42a5f5;
    --mbr-alert-note-icon-color: #42a5f5;

    --mbr-alert-tip-bg: rgba(27, 94, 32, 0.2);
    --mbr-alert-tip-border: #66bb6a;
    --mbr-alert-tip-icon-color: #66bb6a;

    --mbr-alert-important-bg: rgba(74, 20, 140, 0.2);
    --mbr-alert-important-border: #ab47bc;
    --mbr-alert-important-icon-color: #ab47bc;

    --mbr-alert-warning-bg: rgba(230, 81, 0, 0.2);
    --mbr-alert-warning-border: #ffa726;
    --mbr-alert-warning-icon-color: #ffa726;

    --mbr-alert-caution-bg: rgba(183, 28, 28, 0.2);
    --mbr-alert-caution-border: #ef5350;
    --mbr-alert-caution-icon-color: #ef5350;
  }
}

[data-theme="dark"] {
  /* Pull Quote - Dark Mode */
  --mbr-pullquote-bg: rgba(42, 49, 64, 0.4);
  --mbr-pullquote-border: var(--pico-primary-hover);

  /* Marginalia - Dark Mode */
  --mbr-marginalia-bg: rgba(32, 38, 50, 0.6);

  /* GitHub Alerts - Dark Mode */
  --mbr-alert-note-bg: rgba(13, 71, 161, 0.2);
  --mbr-alert-note-border: #42a5f5;
  --mbr-alert-note-icon-color: #42a5f5;

  --mbr-alert-tip-bg: rgba(27, 94, 32, 0.2);
  --mbr-alert-tip-border: #66bb6a;
  --mbr-alert-tip-icon-color: #66bb6a;

  --mbr-alert-important-bg: rgba(74, 20, 140, 0.2);
  --mbr-alert-important-border: #ab47bc;
  --mbr-alert-important-icon-color: #ab47bc;

  --mbr-alert-warning-bg: rgba(230, 81, 0, 0.2);
  --mbr-alert-warning-border: #ffa726;
  --mbr-alert-warning-icon-color: #ffa726;

  --mbr-alert-caution-bg: rgba(183, 28, 28, 0.2);
  --mbr-alert-caution-border: #ef5350;
  --mbr-alert-caution-icon-color: #ef5350;
}

/* ==================== Standard Block Quotes (> - Level 1 Nesting) ==================== */
blockquote {
  /* avoid awkward indents when we nest blockquotes by clearing some defaults */
  padding: 0;
  border: none;
}
blockquote > p:last-child {
  /* this will remove the double padding from the blockquote element and the p  for all of these */
  margin-bottom: 0;
}
:not(blockquote) > blockquote:not(:has(> blockquote)) {
  padding: var(--pico-spacing);
  border-left: 0.25rem solid var(--pico-blockquote-border-color);
}
blockquote:not(:has(blockquote)) p {
  font-style: italic;
}
blockquote > p {
  font-size: var(--pico-font-size);
}

/* ==================== Pull Quotes (>> - Level 2 Nesting) ==================== */

/*
 * Pull quotes are created with double blockquote nesting (>>).
 * Styled like magazine pull quotes: larger text, bold border, italic styling.
 *
 * Example markdown:
 * >> This is a pull quote with larger, emphasized text
 */

:not(blockquote) > blockquote > blockquote:not(:has(> blockquote)) {
  --pico-font-size: 1.5rem;
  --pico-font-weight: 500;
  font-style: italic;
  background-color: var(--mbr-pullquote-bg);
  border-left: 0.5rem solid var(--mbr-pullquote-border);
  color: var(--mbr-pullquote-color);
  padding: calc(var(--pico-spacing) * 2);
}

/* ==================== GitHub-Style Alerts ==================== */

/*
 * GitHub-style alert blockquotes with semantic colors and icons.
 * Classes are automatically added by pulldown-cmark for markdown like:
 *
 * > [!NOTE]
 * > This is a note alert
 */

/* Base alert styling */
blockquote.markdown-alert-note,
blockquote.markdown-alert-tip,
blockquote.markdown-alert-important,
blockquote.markdown-alert-warning,
blockquote.markdown-alert-caution {
  position: relative;
  padding: var(--pico-spacing);
  padding-left: calc(var(--pico-spacing) * 2.5);
  margin: var(--pico-typography-spacing-vertical) 0;
  border-left: 0.5rem solid;
  border-radius: var(--pico-border-radius);
}

/* Icon positioning */
blockquote.markdown-alert-note::before,
blockquote.markdown-alert-tip::before,
blockquote.markdown-alert-important::before,
blockquote.markdown-alert-warning::before,
blockquote.markdown-alert-caution::before {
  content: "";
  position: absolute;
  left: calc(var(--pico-spacing) * 0.75);
  top: calc(var(--pico-spacing) * 1.5);
  width: 22px;
  height: 22px;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Alert title styling */
blockquote.markdown-alert-note > p:first-of-type::before,
blockquote.markdown-alert-tip > p:first-of-type::before,
blockquote.markdown-alert-important > p:first-of-type::before,
blockquote.markdown-alert-warning > p:first-of-type::before,
blockquote.markdown-alert-caution > p:first-of-type::before {
  --pico-font-weight: 700;
  display: block;
  margin-bottom: 0.25rem;
}

/* Note Alert (Blue) */
blockquote.markdown-alert-note {
  background-color: var(--mbr-alert-note-bg);
  border-color: var(--mbr-alert-note-border);
}

blockquote.markdown-alert-note::before {
  mask-image: var(--mbr-icon-note);
  background-color: var(--mbr-alert-note-icon-color);
}

blockquote.markdown-alert-note > p:first-of-type::before {
  content: "Note";
  color: var(--mbr-alert-note-icon-color);
}

/* Tip Alert (Green) */
blockquote.markdown-alert-tip {
  background-color: var(--mbr-alert-tip-bg);
  border-color: var(--mbr-alert-tip-border);
}

blockquote.markdown-alert-tip::before {
  background-color: var(--mbr-alert-tip-icon-color);
  mask-image: var(--mbr-icon-tip);
}

blockquote.markdown-alert-tip > p:first-of-type::before {
  content: "Tip";
  color: var(--mbr-alert-tip-icon-color);
}

/* Important Alert (Purple) */
blockquote.markdown-alert-important {
  background-color: var(--mbr-alert-important-bg);
  border-color: var(--mbr-alert-important-border);
}

blockquote.markdown-alert-important::before {
  mask: var(--mbr-icon-important);
  background-color: var(--mbr-alert-important-icon-color);
}

blockquote.markdown-alert-important > p:first-of-type::before {
  content: "Important";
  color: var(--mbr-alert-important-icon-color);
}

/* Warning Alert (Orange) */
blockquote.markdown-alert-warning {
  background-color: var(--mbr-alert-warning-bg);
  border-color: var(--mbr-alert-warning-border);
}

blockquote.markdown-alert-warning::before {
  background-color: var(--mbr-alert-warning-icon-color);
  mask-image: var(--mbr-icon-warning);
}

blockquote.markdown-alert-warning > p:first-of-type::before {
  content: "Warning";
  color: var(--mbr-alert-warning-icon-color);
}

/* Caution Alert (Red) */
blockquote.markdown-alert-caution {
  background-color: var(--mbr-alert-caution-bg);
  border-color: var(--mbr-alert-caution-border);
}

blockquote.markdown-alert-caution::before {
  mask-image: var(--mbr-icon-caution);
  background-color: var(--mbr-alert-caution-icon-color);
}

blockquote.markdown-alert-caution > p:first-of-type::before {
  content: "Caution";
  color: var(--mbr-alert-caution-icon-color);
}

/* ==================== Marginalia (>>> - Level 3+ Nesting) ==================== */

/*
 * Marginalia are created with triple blockquote nesting (>>>).
 * Uses a hover/click indicator to reveal sidenote content when there aren't margins.
 *
 * Example markdown:
 * >>> This is a margin note shown in gutter or via indicator
 */

/* Marginalia container - inline indicator approach */
blockquote blockquote:has(blockquote) {
  position: relative;
}

blockquote blockquote blockquote {
  display: block;
  position: absolute;
  left: 100%;
  top: -3rem;
  font-size: 0.75em;
}

/* Indicator marker */
blockquote blockquote blockquote::before {
  content: "†";
  display: inline-block;
  color: var(--pico-primary);
  font-weight: 700;
  font-size: 1.5em;
  cursor: pointer;
  padding: 0 4px;
  border-radius: var(--pico-border-radius);
}

blockquote blockquote blockquote:hover::before,
blockquote blockquote blockquote:focus-within::before {
  background-color: var(--mbr-marginalia-bg);
}

/* Hide marginalia content by default if screen is less than x pixels; media queries below override */
blockquote blockquote blockquote p {
  position: absolute;
  display: none;
  z-index: 1000;

  /* Popover styling */
  background-color: var(--pico-background-color);
  border: 1px solid var(--mbr-marginalia-border);
  border-left: 3px solid var(--pico-primary);
  border-radius: var(--pico-border-radius);
  box-shadow: var(--pico-box-shadow);
  padding: calc(var(--pico-spacing) * 0.75);
  margin: 0;

  /* Sizing and positioning */
  min-width: 280px;
  max-width: 90vw;
  transform: translateX(-100%) translateY(-50%);

  /* Text styling */
  --pico-font-size: 0.875em;
  --pico-line-height: 1.15;
}

/* Show marginalia on hover */
blockquote blockquote blockquote:hover p,
blockquote blockquote blockquote:focus-within p {
  display: block;
}

/* Popover arrow - points right toward the † indicator */
blockquote blockquote blockquote p::before {
  content: "";
  position: absolute;
  left: 100%;
  top: 12px;
  border: 8px solid transparent;
  border-left-color: var(--mbr-marginalia-border);
}

blockquote blockquote blockquote p::after {
  content: "";
  position: absolute;
  left: 100%;
  top: 13px;
  border: 7px solid transparent;
  border-left-color: var(--pico-background-color);
  margin-left: -1px;
}

/* Show marginalia fixed in margin when screen is wide enough */
@media (min-width: 2000px) {
  blockquote blockquote blockquote::before {
    content: "";
  }

  blockquote blockquote blockquote p {
    left: calc(100% + 5px);
    width: calc(100vw - 40px);
    transform: translateY(-50%);
    max-width: 250px;
    display: block;
    border: none;
    box-shadow: none;
    background: none;
    border-radius: 0;
  }

  blockquote blockquote blockquote p::before,
  blockquote blockquote blockquote p::after {
    left: auto;
    right: 20px;
    border: none;
    transform: none;
  }
}

/* Multiple paragraphs in marginalia */
blockquote blockquote blockquote p + p {
  position: static;
  visibility: visible;
  opacity: 1;
  display: none;
  margin-top: calc(var(--pico-typography-spacing-vertical) * 0.5);
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
  width: auto;
  max-width: none;
}

blockquote blockquote blockquote:hover p + p,
blockquote blockquote blockquote:focus-within p + p {
  display: block;
}

/* Touch device support - keep visible longer after tap */
@media (hover: none) {
  blockquote blockquote blockquote:focus p,
  blockquote blockquote blockquote:active p {
    visibility: visible;
    display: block;
    opacity: 1;
  }
}

pre.mermaid {
  padding: var(--pico-typography-spacing-vertical);
}

/* ==================== Link Enhancement Tooltips (GUI Mode) ==================== */

/*
 * Subtle tooltip styling for links enhanced by mbr-link-enhancement component.
 * Only active in GUI mode where browser URL and status bar is not visible.
 * Users can override these styles in their own theme.css. And can disable by removing
 * the component that adds them or by using display: none; on this selector.
 */
a.mbr-link-enhanced[data-tooltip]::before {
  font-size: 0.65em;
  background-color: rgb(from var(--pico-tooltip-background-color) r g b / 0.75);
}
a.mbr-link-enhanced[data-tooltip]::after {
  color: rgb(from var(--pico-tooltip-background-color) r g b / 0.75);
}

/* ==================== Screen Reader Only (Accessibility) ==================== */

/*
 * Visually hidden but accessible to screen readers and search indexers.
 * Used for high-weight search content (titles, filenames) that should
 * be indexed by Pagefind with maximum weight but not visible on page.
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==================== Footnotes (GitHub-Flavored Markdown) ==================== */

/*
 * Footnotes are created with [^1] syntax in markdown.
 * The footnote definitions appear at the bottom of the document.
 *
 * Example markdown:
 * Here is some text with a footnote[^1].
 *
 * [^1]: This is the footnote content.
 */

/* Footnote reference links (the superscript numbers in the text) */
sup.footnote-reference {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
  text-decoration: none;
  font-weight: 600;
  top: -0.2em;
}

/* Footnote definitions container - all footnotes at bottom */
.footnote-definition {
  font-size: 0.875em;
  line-height: 1.5;
  margin: 0 0 0.75rem 0;
  padding-left: 2.5rem;
  color: var(--pico-muted-color);
}

/* Add a subtle divider before the first footnote */
.footnote-definition:first-of-type {
  margin-top: var(--pico-spacing);
  padding-top: var(--pico-spacing);
  border-top: 1px solid var(--pico-muted-border-color);
}

/* Footnote label (the number) */
.footnote-definition-label {
  font-weight: 700;
  color: var(--pico-primary);
  min-width: 2rem;
  text-align: right;
  padding-right: 0.5rem;
  display: inline;
  margin: 0;
}

.footnote-definition sup {
  vertical-align: baseline;
  font-size: 1em;
  margin-block-start: 1em;
  display: inline;
  position: static;
}

.footnote-definition-label::after {
  content: ".";
}

/* Footnote content paragraphs */
.footnote-definition p {
  margin: 0;
  display: inline;
}

/* Back-reference link (↩) */
.footnote-definition a[href^="#fnref"] {
  margin-left: 0.25em;
  text-decoration: none;
  opacity: 0.6;
  font-size: 0.9em;
}

.footnote-definition a[href^="#fnref"]:hover {
  opacity: 1;
}

/* ==================== Print Styles ==================== */

@media print {
  @page {
    margin: 0.5in 1in; /* top/bottom: 0.5in, left/right: 1in */
  }

  /* Hide navigation elements */
  body > header,
  body > footer,
  nav.breadcrumbs,
  mbr-nav,
  mbr-browse-single {
    display: none !important;
  }

  /* Reset grid layout for printing */
  body.mbr-has-sidebar {
    display: block;
  }

  /* Reduce font size (~40% smaller than base) */
  :root {
    --pico-font-size: 62.5%;
  }

  /* Reset main container margins - @page handles paper margins */
  main.container {
    margin: 0;
    padding: 0;
    max-width: none;
  }

  /* Prevent awkward page breaks */
  pre,
  code,
  figure,
  blockquote,
  table,
  ul,
  ol {
    page-break-inside: avoid;
  }

  /* Marginalia: display inline for print (not absolute positioned) */
  blockquote blockquote:has(blockquote) {
    position: static;
  }

  blockquote blockquote blockquote {
    position: static;
    display: block;
    font-size: 0.85em;
    margin: var(--pico-spacing) 0;
    padding: var(--pico-spacing);
    background-color: var(--mbr-marginalia-bg);
    border-left: 3px solid var(--pico-primary);
  }

  /* Hide the indicator marker in print */
  blockquote blockquote blockquote::before {
    content: none;
  }

  /* Show marginalia content normally in print */
  blockquote blockquote blockquote p {
    position: static;
    display: block;
    transform: none;
    min-width: auto;
    max-width: none;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    margin: 0;
  }

  /* Hide popover arrows in print */
  blockquote blockquote blockquote p::before,
  blockquote blockquote blockquote p::after {
    content: none;
  }

  /* Show additional paragraphs in marginalia */
  blockquote blockquote blockquote p + p {
    display: block;
  }

  /* Video/media elements: use auto height, hide player controls */
  figure > video,
  media-player {
    max-height: none;
    height: auto;
  }

  /* Hide video player (videos cannot be printed meaningfully) */
  media-player,
  video {
    display: none;
  }

  /* Show a placeholder message for videos */
  figure:has(media-player)::after,
  figure:has(video)::after {
    content: "[Video content - see digital version]";
    display: block;
    font-style: italic;
    color: var(--pico-muted-color);
    padding: var(--pico-spacing);
    border: 1px dashed var(--pico-muted-border-color);
    text-align: center;
  }

  /* Reduce GitHub alert icon size for print */
  blockquote.markdown-alert-note::before,
  blockquote.markdown-alert-tip::before,
  blockquote.markdown-alert-important::before,
  blockquote.markdown-alert-warning::before,
  blockquote.markdown-alert-caution::before {
    width: 14px;
    height: 14px;
    top: calc(var(--pico-spacing) * 1.25);
  }

  /* Footnotes: ensure they stay together and print cleanly */
  .footnote-definition {
    page-break-inside: avoid;
    color: inherit;
  }

  .footnote-definition:first-of-type {
    break-before: avoid;
  }
}

/* ==================== Enhanced Oembed Social Link Boxes ==================== */
.mbr-social-link-box {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 1fr;
  grid-column-gap: 1em;
  max-width: 900px;
  max-height: 200px;
  overflow: hidden;
}
.mbr-social-link {
  grid-column: span 2;
  text-decoration: none;
}
.mbr-social-link header {
  font-size: 1rem;
  font-weight: bold;
  margin-bottom: var(--pico-typography-spacing-vertical);
}
.mbr-social-link p {
  font-size: 0.75rem;
  margin: 0;
  color: var(--pico-secondary);
}

/*
 * PRINT TIP: For best results when printing:
 * 1. Use light mode (not dark mode)
 * 2. Enable "Print backgrounds" in your browser's print dialog
 */