/* Override ONLY color variables - don't touch layout */
:root {
  /* Primary accent colors */
  --INTERNAL-ACCENT-color: #7f427f !important;
  --INTERNAL-PRIMARY-color: #7f427f !important;
  --INTERNAL-MAIN-LINK-color: #7f427f !important;
  --INTERNAL-MAIN-LINK-HOVER-color: #7f427f !important;
  
  /* Menu colors */
  --INTERNAL-MENU-SECTIONS-ACTIVE-BG-color: #7f427f !important;
  --INTERNAL-MENU-SECTIONS-ACTIVE-color: #ffffff !important;
  --INTERNAL-MENU-SECTIONS-LINK-HOVER-color: #7f427f !important;
  --INTERNAL-MENU-VISITED-color: #ba84ca !important;
  --INTERNAL-MENU-HEADER-color: #ffffff !important;
  --INTERNAL-MENU-HEADER-bg-color: #a053a0 !important;
  
  /* Box colors for content blocks */
  --INTERNAL-BOX-NEUTRAL-color: #7f427f !important;
  --INTERNAL-BOX-INFO-color: #7f427f !important;
  --INTERNAL-BOX-TIP-color: #7f427f !important;
  --INTERNAL-BOX-GREEN-color: #a053a0 !important;
  --INTERNAL-BOX-GREEN-TEXT-color: #ffffff !important;

  /* Primary color */
  --PRIMARY-color: #a053a0 !important;
  
  /* Button-specific variables */
  --VARIABLE-BOX-color: #7f427f !important;
  --VARIABLE-BOX-CAPTION-color: #ffffff !important;
}

/* ============================================
   DARK MODE VARIABLE OVERRIDES
   Relearn uses data-r-theme-variant on :root, not a .theme-dark class.
   "auto" responds to system preference, so must be wrapped in media query.
   ============================================ */
@media (prefers-color-scheme: dark) {
  [data-r-theme-variant="auto"] {
    --INTERNAL-ACCENT-color: #ba84ca !important;
    --INTERNAL-PRIMARY-color: #ba84ca !important;
    --INTERNAL-MAIN-LINK-color: #ba84ca !important;
    --INTERNAL-MAIN-LINK-HOVER-color: #d4a6d4 !important;
  }
}

[data-r-theme-variant="relearn-dark"] {
  --INTERNAL-ACCENT-color: #ba84ca !important;
  --INTERNAL-PRIMARY-color: #ba84ca !important;
  --INTERNAL-MAIN-LINK-color: #ba84ca !important;
  --INTERNAL-MAIN-LINK-HOVER-color: #d4a6d4 !important;
}

/* Target ONLY button styling - avoid layout properties */
.btn-primary {
  background-color: #7f427f !important;
  border-color: #7f427f !important;
  color: #ffffff !important;
}

.btn-primary:hover {
  background-color: #7f427f !important;
  border-color: #7f427f !important;
}

/* Fix button content styling */
.btn > * {
  background-color: #7f427f !important;
  border-color: #7f427f !important;
  color: #ffffff !important;
}

.btn > *:hover {
  background-color: #7f427f !important;
  border-color: #7f427f !important;
}

/* Target menu links specifically with proper contrast */
#R-sidebar a {
  color: #ffffff !important;
}

#R-sidebar a:hover {
  color: #ffffff !important;
  background-color: rgba(255, 255, 255, 0.1) !important;
}

#R-sidebar li.active > a {
  background-color: #7f427f !important;
  color: #ffffff !important;
}

/* Purple theme for various elements */
.cstyle.primary {
  --VARIABLE-BOX-color: #7f427f !important;
  --VARIABLE-BOX-TEXT-color: #ffffff !important;
}

/* Links in main content area (not sidebar) */
article a {
  color: #7f427f !important;
}

article a:hover {
  color: #a053a0 !important;
}

/* Search box active state */
.searchbox input:focus {
  border-color: #7f427f !important;
}

/* Content headings - only in main content, not sidebar */
#R-body h1, #R-body h2, #R-body h3, #R-body h4, #R-body h5, #R-body h6 {
  color: #7f427f !important;
}

/* Sidebar headings should be white for contrast */
#R-sidebar h1, #R-sidebar h2, #R-sidebar h3, #R-sidebar h4, #R-sidebar h5, #R-sidebar h6 {
  color: #ffffff !important;
}

/* Sidebar text should be white for contrast */
#R-sidebar {
  color: #ffffff !important;
}

/* Sidebar navigation specific styling */
#R-sidebar .menu-header {
  color: #ffffff !important;
  background-color: #a053a0 !important;
}

/* Sidebar width kept at theme default (18.75rem / 300px) */

/* IMPORTANT: Reset any layout properties that might have been affected */
#R-body {
  margin-inline-start: var(--INTERNAL-MENU-WIDTH-L) !important;
  min-width: calc(100% - var(--INTERNAL-MENU-WIDTH-L)) !important;
  max-width: calc(100% - var(--INTERNAL-MENU-WIDTH-L)) !important;
  width: calc(100% - var(--INTERNAL-MENU-WIDTH-L)) !important;
}

#R-sidebar {
  min-width: var(--INTERNAL-MENU-WIDTH-L) !important;
  max-width: var(--INTERNAL-MENU-WIDTH-L) !important;
  width: var(--INTERNAL-MENU-WIDTH-L) !important;
  position: fixed !important;
  left: 0 !important;
  top: 0 !important;
  height: 100% !important;
}

/* Responsive layout fixes */
@media screen and (max-width: 59.999rem) {
  #R-sidebar {
    min-width: var(--INTERNAL-MENU-WIDTH-M) !important;
    max-width: var(--INTERNAL-MENU-WIDTH-M) !important;
    width: var(--INTERNAL-MENU-WIDTH-M) !important;
  }
  #R-body {
    margin-inline-start: var(--INTERNAL-MENU-WIDTH-M) !important;
    min-width: calc(100% - var(--INTERNAL-MENU-WIDTH-M)) !important;
    max-width: calc(100% - var(--INTERNAL-MENU-WIDTH-M)) !important;
    width: calc(100% - var(--INTERNAL-MENU-WIDTH-M)) !important;
  }
}

@media screen and (max-width: 47.999rem) {
  .mobile-support #R-sidebar {
    left: calc(-1 * var(--INTERNAL-MENU-WIDTH-S)) !important;
    min-width: var(--INTERNAL-MENU-WIDTH-S) !important;
    max-width: var(--INTERNAL-MENU-WIDTH-S) !important;
    width: var(--INTERNAL-MENU-WIDTH-S) !important;
  }
  .mobile-support #R-body {
    margin-inline-start: 0 !important;
    min-width: 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* ============================================
   CODE BLOCK DARK MODE FIXES
   "auto" variant responds to system preference, so dark styles
   must be wrapped in prefers-color-scheme: dark.
   "relearn-dark" is always dark regardless of system pref.
   ============================================ */

/* Auto variant: only apply dark styles when system is in dark mode */
@media (prefers-color-scheme: dark) {
  [data-r-theme-variant="auto"] div.chroma,
  [data-r-theme-variant="auto"] pre.chroma,
  [data-r-theme-variant="auto"] pre[style],
  [data-r-theme-variant="auto"] pre.pre-code,
  [data-r-theme-variant="auto"] td.lntd {
    background-color: #272822 !important;
    color: #f8f8f2 !important;
  }

  [data-r-theme-variant="auto"] pre.pre-code code {
    background-color: transparent !important;
    color: #f8f8f2 !important;
  }
}

/* relearn-dark variant: always dark */
[data-r-theme-variant="relearn-dark"] div.chroma,
[data-r-theme-variant="relearn-dark"] pre.chroma,
[data-r-theme-variant="relearn-dark"] pre[style],
[data-r-theme-variant="relearn-dark"] pre.pre-code,
[data-r-theme-variant="relearn-dark"] td.lntd {
  background-color: #272822 !important;
  color: #f8f8f2 !important;
}

[data-r-theme-variant="relearn-dark"] pre.pre-code code {
  background-color: transparent !important;
  color: #f8f8f2 !important;
}

/* Hugo Note Shortcode Styles */
.note {
  border-radius: 6px;
  margin: 20px 0;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.note-title {
  padding: 12px 16px;
  font-weight: 600;
  font-size: 14px;
  color: white;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.note-title::before {
  content: "ⓘ";
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
}

.note-content {
  padding: 16px;
  margin: 0;
  background-color: #f8f9fa;
  color: #666;
  font-size: 14px;
  line-height: 1.5;
}

/* Note type variants */
.note.note {
  border: none;
}

.note.note .note-title {
  background-color: #7f427f;
}

.note.note .note-content {
  background-color: #f3e8f3;
}

.note.tip .note-title {
  background-color: #a053a0;
}

.note.tip .note-title::before {
  content: "💡";
}

.note.tip .note-content {
  background-color: #f8f0f8;
}

.note.info .note-title {
  background-color: #7fb3d3;
}

.note.info .note-title::before {
  content: "ⓘ";
}

.note.info .note-content {
  background-color: #e8f4f8;
}

.note.warning .note-title {
  background-color: #cd5c5c;
}

.note.warning .note-title::before {
  content: "⚠";
}

.note.warning .note-content {
  background-color: #fdf2f2;
}

/* Alternative using CSS classes for different note types */
.note-blue .note-title {
  background-color: #7fb3d3;
}

.note-blue .note-content {
  background-color: #e8f4f8;
}

.note-green .note-title {
  background-color: #90c695;
}

.note-green .note-content {
  background-color: #e8f5e8;
}

.note-orange .note-title {
  background-color: #deb887;
}

.note-orange .note-content {
  background-color: #faf5e6;
}

.note-red .note-title {
  background-color: #cd5c5c;
}

.note-red .note-content {
  background-color: #fdf2f2;
}

/* ============================================
   NOTE DARK MODE FIXES
   ============================================ */

/* Auto variant: only apply dark styles when system is in dark mode */
@media (prefers-color-scheme: dark) {
  [data-r-theme-variant="auto"] .note-content {
    background-color: #2d1a2d !important;
    color: #e0e0e0 !important;
  }

  [data-r-theme-variant="auto"] .note.note .note-content    { background-color: #2d1a2d !important; }
  [data-r-theme-variant="auto"] .note.tip .note-content     { background-color: #2a1f2a !important; }
  [data-r-theme-variant="auto"] .note.info .note-content    { background-color: #1a2a2d !important; }
  [data-r-theme-variant="auto"] .note.warning .note-content { background-color: #2d1a1a !important; }
  [data-r-theme-variant="auto"] .note-blue .note-content    { background-color: #1a2a2d !important; }
  [data-r-theme-variant="auto"] .note-green .note-content   { background-color: #1a2d1a !important; }
  [data-r-theme-variant="auto"] .note-orange .note-content  { background-color: #2d251a !important; }
  [data-r-theme-variant="auto"] .note-red .note-content     { background-color: #2d1a1a !important; }
}

/* relearn-dark variant: always dark */
[data-r-theme-variant="relearn-dark"] .note-content {
  background-color: #2d1a2d !important;
  color: #e0e0e0 !important;
}

[data-r-theme-variant="relearn-dark"] .note.note .note-content    { background-color: #2d1a2d !important; }
[data-r-theme-variant="relearn-dark"] .note.tip .note-content     { background-color: #2a1f2a !important; }
[data-r-theme-variant="relearn-dark"] .note.info .note-content    { background-color: #1a2a2d !important; }
[data-r-theme-variant="relearn-dark"] .note.warning .note-content { background-color: #2d1a1a !important; }
[data-r-theme-variant="relearn-dark"] .note-blue .note-content    { background-color: #1a2a2d !important; }
[data-r-theme-variant="relearn-dark"] .note-green .note-content   { background-color: #1a2d1a !important; }
[data-r-theme-variant="relearn-dark"] .note-orange .note-content  { background-color: #2d251a !important; }
[data-r-theme-variant="relearn-dark"] .note-red .note-content     { background-color: #2d1a1a !important; }

/* Tighten body-inner horizontal padding so content uses more of the page */
#R-body-inner {
  padding-left: 1rem !important;
  padding-right: 0 !important;
}

#R-body {
  padding-right: 0 !important;
}

/* ============================================
   GLOSSARY TOOLTIP STYLES
   ============================================ */
.glossary-tooltip {
  position: relative;
  color: #7f427f;
  text-decoration: underline;
  text-decoration-style: dotted;
  cursor: help;
  border-bottom: 1px dotted #7f427f;
  transition: all 0.2s ease;
}

.glossary-tooltip:hover {
  color: #a053a0;
  text-decoration: none;
}

.glossary-popup {
  position: fixed;
  z-index: 99999;
  background: #ffffff;
  border: 1px solid #7f427f;
  border-radius: 8px;
  padding: 16px;
  max-width: 350px;
  box-shadow: 0 8px 24px rgba(127, 66, 127, 0.2);
  font-size: 0.9rem;
  line-height: 1.5;
  color: #333333;
  display: none;
  font-family: inherit;
}

.glossary-popup.show {
  display: block !important;
  visibility: visible !important;
}

/* Tooltip arrow */
.glossary-popup::before {
  content: '';
  position: absolute;
  top: -15px;
  left: 0;
  right: 0;
  height: 15px;
  background: transparent;
  z-index: 1;
}

.glossary-popup::after {
  content: '';
  position: absolute;
  top: -7px;
  left: 21px;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-bottom: 7px solid #ffffff;
}

.glossary-popup-header {
  font-weight: 600;
  color: #7f427f;
  margin-bottom: 10px;
  font-size: 1.1rem;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(127, 66, 127, 0.2);
}

.glossary-popup .glossary-popup-definition {
  margin-bottom: 12px !important;
  color: #222222 !important;
  line-height: 1.6 !important;
}

.glossary-popup-definition p,
.glossary-popup-definition span,
.glossary-popup-definition div {
  color: #222222 !important;
}

.glossary-popup-link {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(127, 66, 127, 0.1);
}

.glossary-popup-link a {
  color: #7f427f;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: all 0.2s ease;
}

.glossary-popup-link a:hover {
  color: #a053a0;
  text-decoration: underline;
}

.glossary-popup-link a::after {
  content: "→";
  font-size: 0.8rem;
  transition: transform 0.2s ease;
}

.glossary-popup-link a:hover::after {
  transform: translateX(2px);
}

/* Glossary dark mode */
@media (prefers-color-scheme: dark) {
  .glossary-popup {
    background: #2d1a2d;
    border-color: #a053a0;
    color: #e0e0e0;
    box-shadow: 0 8px 24px rgba(160, 83, 160, 0.3);
  }

  .glossary-popup::after {
    border-bottom-color: #2d1a2d;
  }

  .glossary-popup-header {
    color: #ba84ca;
    border-bottom-color: rgba(186, 132, 202, 0.3);
  }

  .glossary-popup-definition {
    color: #cccccc;
  }

  .glossary-popup-link {
    border-top-color: rgba(186, 132, 202, 0.2);
  }

  .glossary-popup-link a {
    color: #ba84ca;
  }

  .glossary-popup-link a:hover {
    color: #d4a6d4;
  }
}

@media screen and (max-width: 47.999rem) {
  .glossary-popup {
    max-width: 280px;
    padding: 12px;
    font-size: 0.85rem;
  }

  .glossary-popup-header {
    font-size: 1rem;
  }
}

/* ============================================
   SEARCH STYLING
   ============================================ */
#R-search-by {
  background-color: #ffffff !important;
  border: 2px solid rgba(127, 66, 127, 0.3) !important;
  border-radius: 6px !important;
  color: #333333 !important;
  padding: 8px 12px !important;
  transition: border-color 0.2s ease !important;
}

#R-search-by:focus {
  border-color: #7f427f !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(127, 66, 127, 0.1) !important;
}

#R-search-by::placeholder {
  color: #999999 !important;
}

/* ============================================
   SEARCH BUTTONS - transparent, icon-only
   No background box on the ? and × icons
   ============================================ */
.search-detail,
.search-clear {
  background-color: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #7f427f !important;
}

.search-detail:hover,
.search-clear:hover {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #a053a0 !important;
}

/* Inside the sidebar the icons should be white to match the sidebar */
#R-sidebar .search-detail,
#R-sidebar .search-clear {
  background-color: transparent !important;
  border-color: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

#R-sidebar .search-detail:hover,
#R-sidebar .search-clear:hover {
  background-color: transparent !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* Let icon color inherit from parent rather than forcing white */
.search-detail .fas.fa-search::before,
.search-clear .fas.fa-times::before {
  color: inherit !important;
}

/* Dark mode search buttons */
@media (prefers-color-scheme: dark) {
  .search-detail,
  .search-clear {
    color: #ba84ca !important;
  }

  .search-detail:hover,
  .search-clear:hover {
    color: #d4a6d4 !important;
  }
}

[data-r-theme-variant="relearn-dark"] .search-detail,
[data-r-theme-variant="relearn-dark"] .search-clear {
  color: #ba84ca !important;
}

[data-r-theme-variant="relearn-dark"] .search-detail:hover,
[data-r-theme-variant="relearn-dark"] .search-clear:hover {
  color: #d4a6d4 !important;
}

html body .autocomplete-suggestions {
  background-color: #ffffff !important;
  border: 1px solid #7f427f !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 12px rgba(127, 66, 127, 0.2) !important;
  color: #333333 !important;
  max-height: 400px !important;
  overflow-y: auto !important;
  z-index: 9999 !important;
  margin-top: 4px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid rgba(127, 66, 127, 0.1) !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background-color 0.2s ease !important;
}

html body .autocomplete-suggestion:hover {
  background-color: rgba(127, 66, 127, 0.1) !important;
  color: #7f427f !important;
  text-decoration: none !important;
}

html body .autocomplete-suggestion:last-child {
  border-bottom: none !important;
}

html body .autocomplete-suggestion.autocomplete-selected {
  background-color: rgba(127, 66, 127, 0.15) !important;
  color: #7f427f !important;
  text-decoration: none !important;
}

html body .autocomplete-suggestion strong {
  color: #7f427f !important;
  font-weight: 600 !important;
}

/* Search dark mode */
@media (prefers-color-scheme: dark) {
  #R-search-by:focus {
    border-color: #ba84ca !important;
    box-shadow: 0 0 0 3px rgba(186, 132, 202, 0.2) !important;
  }

  #R-search-by::placeholder {
    color: #aaaaaa !important;
  }

  html body .autocomplete-suggestions {
    background-color: #2d1a2d !important;
    border-color: #ba84ca !important;
    color: #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(186, 132, 202, 0.3) !important;
  }

  html body .autocomplete-suggestion {
    color: #e0e0e0 !important;
    background-color: #2d1a2d !important;
    border-bottom-color: rgba(186, 132, 202, 0.2) !important;
  }

  html body .autocomplete-suggestion:hover,
  html body .autocomplete-suggestion.autocomplete-selected {
    background-color: rgba(186, 132, 202, 0.2) !important;
    color: #ba84ca !important;
  }

  html body .autocomplete-suggestion strong {
    color: #ba84ca !important;
  }
}

/* Prevent sidebar styles from bleeding into search suggestions */
#R-sidebar .autocomplete-suggestions .autocomplete-suggestion {
  color: #333333 !important;
  background-color: #ffffff !important;
}

#R-sidebar .autocomplete-suggestions .autocomplete-suggestion:hover {
  color: #7f427f !important;
  background-color: rgba(127, 66, 127, 0.1) !important;
}

#R-sidebar .autocomplete-suggestions .autocomplete-suggestion strong {
  color: #7f427f !important;
}

#R-sidebar .autocomplete-suggestion:hover {
  background-color: rgba(127, 66, 127, 0.1) !important;
  color: #7f427f !important;
}

.searchbox {
  position: relative !important;
}

#TableOfContents {
  display: none;
}

/* ============================================
   SEARCH AUTOCOMPLETE - SIDEBAR BLEED FIX
   ============================================ */

/* Force autocomplete dropdown to render outside sidebar color context */
html body .autocomplete-suggestions {
  background-color: #ffffff !important;
  border: 2px solid #7f427f !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(127, 66, 127, 0.25) !important;
  color: #333333 !important;
}

html body .autocomplete-suggestion {
  color: #333333 !important;
  background-color: #ffffff !important;
  border-bottom: 1px solid rgba(127, 66, 127, 0.12) !important;
  padding: 10px 14px !important;
}

/* This is the key fix — the dark selected state you're seeing */
html body .autocomplete-suggestion.autocomplete-selected,
html body .autocomplete-suggestions .autocomplete-selected {
  background-color: rgba(127, 66, 127, 0.12) !important;
  color: #7f427f !important;
}

html body .autocomplete-suggestion:hover {
  background-color: rgba(127, 66, 127, 0.1) !important;
  color: #7f427f !important;
}

/* Result title (the » Name line) */
html body .autocomplete-suggestion b,
html body .autocomplete-suggestion strong {
  color: #7f427f !important;
  font-weight: 600 !important;
}

/* Result snippet text (the gray subtext line) */
html body .autocomplete-suggestion .autocomplete-snippet,
html body .autocomplete-suggestion span {
  color: #666666 !important;
  font-size: 0.85rem !important;
}

/* Search input inside sidebar — match the sidebar header style */
#R-sidebar #R-search-by {
  background-color: rgba(255, 255, 255, 0.15) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 6px !important;
  color: #ffffff !important;
  width: 100% !important;
}

#R-sidebar #R-search-by::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

#R-sidebar #R-search-by:focus {
  background-color: rgba(255, 255, 255, 0.22) !important;
  border-color: rgba(255, 255, 255, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.15) !important;
  outline: none !important;
}

#R-sidebar .searchbox input#R-search-by {
  padding-left: 2.2rem !important;
}

/* ============================================
   PAGE TOC - RIGHT COLUMN LAYOUT
   ============================================ */

/*
  #R-body is calc(100% - 300px) wide = 876px at this viewport.
  #R-body-inner has padding: 0 3.25rem 4rem 3.25rem from theme.css
  plus an inline style overriding padding-right (~32px).
  The partial JS sets paddingRight to 0, freeing that space for the TOC.
  padding-left is set to 2rem via JS for slightly more content width.
*/
.content-with-toc {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  width: 100%;
  box-sizing: border-box;
}

.content-main {
  flex: 1 1 0%;
  min-width: 0;
}

.page-toc {
  flex: 0 0 240px;  /* fixed width, never grows or shrinks */
  align-self: flex-start;
  position: sticky;
  top: 3rem;
  max-height: calc(100vh - 5rem);
  overflow-y: auto;
  font-size: 0.82rem;
  border: 1px solid rgba(127, 66, 127, 0.2);
  border-radius: 6px;
  overflow: hidden;
}

.page-toc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #7f427f;
  color: #ffffff;
  padding: 8px 12px;
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  position: sticky;
  top: 0;
}

.page-toc-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0;
  line-height: 1;
}
.page-toc-dismiss:hover { color: #ffffff; }

.page-toc-body {
  padding: 8px 12px;
  overflow-y: auto;
  max-height: calc(100vh - 8rem);
  background: #ffffff;
}

/* Override your global hide rule inside the TOC only */
.page-toc #TableOfContents {
  display: block !important;
}

.page-toc #TableOfContents ul {
  list-style: none;
  padding-left: 0;
  margin: 0;
}

.page-toc #TableOfContents ul ul {
  padding-left: 10px;
  margin-top: 2px;
}

.page-toc #TableOfContents a {
  display: block;
  padding: 3px 6px;
  color: #555555 !important;
  text-decoration: none !important;
  border-left: 2px solid transparent;
  border-radius: 0 4px 4px 0;
  transition: all 0.15s ease;
  line-height: 1.4;
  white-space: normal;       /* allow wrapping on longer headings */
  word-break: break-word;
}

.page-toc #TableOfContents a:hover {
  color: #7f427f !important;
  background-color: rgba(127, 66, 127, 0.08);
  border-left-color: rgba(127, 66, 127, 0.4);
}

.page-toc #TableOfContents a.toc-active {
  color: #7f427f !important;
  font-weight: 500;
  background-color: rgba(127, 66, 127, 0.1);
  border-left-color: #7f427f;
}

/* Hide TOC on narrow viewports */
@media screen and (max-width: 72rem) {
  .content-with-toc { display: block; }
  .page-toc { display: none !important; }
}

/* Dark mode */
@media (prefers-color-scheme: dark) {
  [data-r-theme-variant="auto"] .page-toc-body {
    background: #2d1a2d;
    border-color: rgba(186,132,202,0.25);
  }
  [data-r-theme-variant="auto"] .page-toc #TableOfContents a { color: #cccccc !important; }
  [data-r-theme-variant="auto"] .page-toc #TableOfContents a:hover,
  [data-r-theme-variant="auto"] .page-toc #TableOfContents a.toc-active {
    color: #ba84ca !important;
    background-color: rgba(186,132,202,0.15);
    border-left-color: #ba84ca;
  }
}
[data-r-theme-variant="relearn-dark"] .page-toc-body {
  background: #2d1a2d;
}
[data-r-theme-variant="relearn-dark"] .page-toc #TableOfContents a { color: #cccccc !important; }
[data-r-theme-variant="relearn-dark"] .page-toc #TableOfContents a:hover,
[data-r-theme-variant="relearn-dark"] .page-toc #TableOfContents a.toc-active {
  color: #ba84ca !important;
  background-color: rgba(186,132,202,0.15);
  border-left-color: #ba84ca;
}

/* Give sidebar menu items enough right padding so checkmarks don't overlap text */
#R-sidebar .nav-item a,
#R-sidebar li > a {
  padding-right: 2rem !important;
}