/* Stabilize article width across zoom/breakpoint changes */
main article {
  width: 100% !important;
  max-width: 650px !important;
  min-width: 0 !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
:root.light {
  --primary-color: #a0cc67;
}

:root.dark {
  --primary-color: #8db658;
}

/* Optional: tweak hover text color if needed */
/* :root.light, :root.dark { --hover-color: white; } */


.theorem-container {
  border-left: 3px solid var(--primary-color);
  margin: 1em 0;
  border-radius: 4px;
  overflow: hidden;
}

.theorem-header {
  background: var(--bg-2);
  color: var(--text-0);
  padding: 6px 18px;
  font-size: 1.05em;
  line-height: 1.25;
  display: flex;
  align-items: center;
}

.theorem-header p {
  margin: 0;
}

.theorem-title {
  font-weight: 600;
}

.theorem-content {
  background: var(--bg-1);
  padding: 10px 20px;
}

/* Sidenote styles - matching blog implementation exactly */
/* Reset counter for each article */
main article {
  /* Reset counter per article; start at 0 then increment per anchor */
  counter-reset: sidenote-counter 0;
}

.sidenote {
  display: none;
  float: right;
  clear: right;
  margin-right: -230px;
  width: 100%;
  max-width: 200px;
  margin-top: 0.3rem;
  font-size: 0.85rem;
  line-height: 1.1rem;
  vertical-align: baseline;
  position: relative;
  margin-bottom: 1rem;
  text-align: left;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.sidenote .snnum {
  color: rgba(120, 120, 150);
}

/* Use CSS counters for automatic numbering */
/* Increment on the anchor, so both inline and sidenote show same number */
.snanchor { counter-increment: sidenote-counter; }

.sidenote .snnum::before {
  content: counter(sidenote-counter) ": ";
}

.snidx::before {
  content: counter(sidenote-counter);
}

/* Hide footnotes completely until moved by JavaScript */
.footnote {
  display: none !important;
  position: absolute;
  left: -9999px;
  visibility: hidden;
}

/* Show footnotes in container on mobile */
.footnote-container .footnote {
  display: grid !important;
  position: relative;
  left: auto;
  visibility: visible;
}

.sidenote code {
  font-size: 0.8rem;
  line-height: 1.0rem;
  padding: 2px;
}

.snanchor {
  line-height: 1rem;
}

.fnhref {
  color: rgb(120, 120, 160);
}

.snidx {
  display: none;
  color: rgb(120, 120, 150);
  font-size: 0.8rem;
  margin: 0px 0px 0px -3px;
}

/* Mobile: show footnotes, hide sidenotes (aligned with drawer breakpoint) */
@media (max-width: 1169.98px) {
  .sidenote { 
    display: none !important; 
  }
  .snidx { 
    display: none !important; 
  }
  .fnhref { 
    display: inline !important; 
  }
  .footnote-container {
    display: block !important;
  }
}

/* Desktop: show sidenotes in margin, hide footnotes (aligned with drawer breakpoint) */
@media (min-width: 1170px) {
  main article section.body .sidenote { 
    display: inline-block !important; 
  }
  .snidx { 
    display: inline-block !important; 
  }
  .fnhref { 
    display: none !important; 
  }
  .footnote-container {
    display: none !important;
  }
}

@media (min-width: 1200px) {
  main article section.body .sidenote {
    margin-right: -280px;
    max-width: 200px;
  }
}
/* End sidenote styles */

/* Left sidebar styles (adapting to apollo's left-content) */
.publishing-info {
  display: block;
  position: relative;
  width: 100%;
  text-align: right;
}

.publishing-info h3 {
  margin: 0px;
  padding: 0.8rem 0px 0.2rem 0px;
  font-size: 0.8rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-0);
}

.publishing-info p {
  font-size: 0.8rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-1);
  margin-top: 2px;
}

.toctitle {
  text-align: right;
  font-size: 0.8rem;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  color: var(--text-0);
  margin: 0px 0px 8px 0px;
}

.toc {
  display: block;
  position: relative;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  text-align: right;
  max-width: 200px;
}

.toc ol {
  list-style-type: none;
  padding: 0px;
  margin-top: 0px;
  margin-left: 0px;
  counter-reset: listCounter;
}

.toc ol li {
  padding: 0px 0px 10px 0px;
}

.toc ol li a {
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-0);
  font-weight: bold;
  display: inline-block;
  line-height: 1.1em;
  padding: 0px 0px 5px 0px;
  counter-increment: listCounter;
  position: relative;
}

.top p {
  margin: 0px;
}

.top p a {
  display: block;
  position: relative;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  text-align: right;
  float: right;
  max-width: 200px;
  font-size: 0.8rem;
  text-decoration: none;
  color: var(--text-1);
  display: inline-block;
  line-height: 1.1em;
}
/* End left sidebar styles */

/* Fix scrolling: disable sticky/scroll on right sidebar for posts */
@media (min-width: 992px) {
  body .right-content {
    position: static;
    overflow: visible;
    max-height: none;
    padding: 0;
  }
}

/* Make left sidebar block sticky using current theme container */
.left-content .sticky-content { position: sticky; top: 60px; max-height: calc(100vh - 60px); overflow: auto; }

/* Improve overall spacing and prevent overlap */
@media (min-width: 992px) {
  .left-content { position: sticky; top: 60px; align-self: flex-start; height: calc(100vh - 60px); overflow: auto; }
  .left-content:has(.sticky-content) { padding-right: 24px; }
  .right-content { padding-left: 24px; }
}

/* ToC list spacing */
.toc-list { margin: 0; padding-left: 0; }
.toc-list ul { margin-left: 0.75rem; }
.toc-list li { margin: 0.25rem 0; }

/* Footnotes list (mobile) */
.footnote-container { position:relative; width:100%; margin-top:2rem; }
.footnote-container h3 { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 1.1rem; margin: 0.5rem 0; }
.footnote-container .footnote { width:100%; grid-template-columns: auto 1fr; gap: 8px 12px; align-items:start; padding: 8px 0; border-bottom:1px solid rgba(100,100,100,0.1); }
.footnote { position:relative; }
.footnote p { margin: 0; }
.footnote p:first-child { grid-column: 1 / 2; }
.footnote .fncontent { grid-column: 2 / -1; width:100%; }
.footnote a.footnote-ref { display:inline-block; min-width: 2.25rem; text-align:right; color: var(--text-0); text-decoration:none; padding: 0; }
/* Prevent underline on the full-width link; only underline the number */
.footnote a.footnote-ref:hover,
.footnote a.footnote-ref:focus,
.footnote a.footnote-ref:focus-visible { text-decoration: none; }
.footnote a.footnote-ref:hover .fn-number,
.footnote a.footnote-ref:focus .fn-number,
.footnote a.footnote-ref:focus-visible .fn-number { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.footnote-container .footnote .fncontent .fnbackref { color: var(--text-0); display:inline-block; margin-left: 8px; }
.fnhref { color: rgb(120,120,160); }
.snidx { display: none; color: rgb(120,120,150); font-size: 0.8rem; margin: 0px 0px 0px -3px; }



/* Fix layout centering issues and width conflicts */
@media (max-width: 991.98px) { 
  body {
    justify-content: center !important;
    align-items: flex-start !important;
  }
  .content {
    margin: 0 auto !important;
    max-width: 650px !important;
  }
  main article {
    width: 100% !important;
    max-width: 650px !important;
    margin: 12px auto !important;
  }
} 

/* Default state: hide mobile TOC toggle */
.mobile-toc-toggle {
  display: none;
}

/* Let JavaScript handle responsive sidebar behavior */
@media (max-width: 1170px) {
  .left-content {
    display: none;
  }
  .right-content {
    display: none;
  }
}

/* Mobile TOC content styling - applies at all zoom levels */
#mobile-toc-content {
  display: none;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  margin: 0;
  padding: 12px 12px 16px 12px;
  background: var(--bg-1);
  border: 1px solid var(--bg-2);
  border-radius: 8px;
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: auto;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#mobile-toc-content .toc {
  text-align: left !important;
  max-width: none !important;
  font-family: var(--text-font), sans-serif;
}

#mobile-toc-content .toc ol {
  counter-reset: listCounter !important;
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}

#mobile-toc-content .toc ol li a {
  display: block;
  padding: 8px 0;
  color: var(--text-2);
  text-decoration: none;
  border-bottom: 1px solid var(--bg-2);
  font-size: 0.9rem;
  font-weight: normal;
  position: relative;
  counter-increment: listCounter !important;
}

#mobile-toc-content .toc ol li a:before {
  content: " " counters(listCounter, ".") !important;
  color: #aaaaaa !important;
  padding-right: 8px !important;
  display: inline !important;
}

#mobile-toc-content .toc ol li:last-child a {
  border-bottom: none;
}

#mobile-toc-content .toc ol li ol li a {
  font-weight: normal !important;
  color: var(--text-1) !important;
  font-size: 0.85rem !important;
  padding-left: 16px;
}

#mobile-toc-content .toc ol li ol li ol li a {
  font-weight: normal !important;
  color: var(--text-2) !important;
  font-size: 0.8rem !important;
  font-style: italic !important;
  padding-left: 32px;
}

/* Mobile TOC selected and parent states - match desktop behavior */
#mobile-toc-content .toc ol li.selected > a {
  color: var(--text-0) !important;
  font-weight: 900 !important;
  font-variation-settings: 'wght' 900;
  -webkit-text-stroke: 0.25px currentColor;
  text-decoration: none !important;
}

#mobile-toc-content .toc ol li.parent > a {
  color: var(--text-0) !important;
  font-weight: normal !important;
}

/* Mobile TOC hover behavior - match desktop */
#mobile-toc-content .toc ol li a:hover {
  text-decoration: underline !important;
}

#mobile-toc-content .toc ol li.selected > a:hover {
  text-decoration: none !important;
}

#mobile-toc-content .toctitle {
  text-align: left !important;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 12px;
  color: var(--text-0);
}

#mobile-toc-content .publishing-info {
  text-align: left !important;
  margin-bottom: 16px;
}

/* Mobile: show hamburger toggle */
@media (max-width: 1169.98px) {
  .mobile-toc-toggle { display: block; }
  .toc-drawer-toggle { display: inline-flex; align-items: center; gap: 6px; }
}

@media (min-width: 1170px) {
  .mobile-toc-toggle { display: none; }
  .toc-drawer-toggle { display: none; }
}

/* Ensure no nested ToC scrolling */
.toc {
  overflow: visible !important;
  max-height: none !important;
}

/* Mobile drawer toggle button styling */
.mobile-toc-toggle {
  margin: 10px 0 6px;
  position: static;
  top: auto;
  left: auto;
  right: auto;
  z-index: 1002;
  background: var(--bg-0);
  padding: 8px 0;
  border-bottom: 1px solid var(--bg-2);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.toc-drawer-toggle {
  font: inherit;
  padding: 8px 16px;
  border: 1px solid var(--bg-2);
  border-radius: 8px;
  background: var(--bg-0);
  color: var(--text-0);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.2s ease;
  width: 100%;
  justify-content: space-between;
  font-size: 0.9rem;
  font-weight: 500;
}

.toc-drawer-toggle:hover {
  background: var(--bg-1);
  border-color: var(--primary-color);
}

.toc-drawer-toggle:active { 
  transform: translateY(1px); 
  background: var(--bg-2);
}

.toc-drawer-toggle .chevron {
  width: 20px;
  height: 20px;
  fill: var(--primary-color);
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.toc-drawer-toggle[aria-expanded='true'] {
  background: var(--primary-color);
  color: var(--hover-color);
  border-color: var(--primary-color);
}

.toc-drawer-toggle[aria-expanded='true'] .chevron { 
  transform: rotate(180deg);
  fill: var(--hover-color);
}

.toc-drawer-toggle[aria-expanded='true']:hover {
  background: var(--primary-color);
  opacity: 0.9;
}

/* Prevent headings from being hidden behind sticky toggle on anchor jump */
main article section.body h1,
main article section.body h2,
main article section.body h3,
main article section.body h4 { 
  scroll-margin-top: 72px; 
}

/* Serif body font for main article text only */
:root { --serif-body-font: 'TeX Gyre Schola', 'Century Schoolbook', 'Century Schoolbook L', 'New Century Schoolbook', Georgia, 'Times New Roman', serif; }

main article section.body {
  font-family: var(--serif-body-font);
  font-kerning: normal;
  font-variant-ligatures: common-ligatures;
}

/* Ensure MathJax block equations (like align) are not clipped or overflow-hidden */
.MathJax, .mjx-container {
  overflow: visible;
}


/* Allow large delimiters (like braces) to render fully */
.mjx-container mjx-stretchy[stretchy],
.mjx-container mjx-stretchy-v[stretchy] {
  overflow: visible;
}

/* Slightly reduce superscript/subscript sizes (first and nested levels) */
/* .mjx-container mjx-script { font-size: 0.66em !important; } */
/* .mjx-container mjx-script mjx-script { font-size: 0.58em !important; } */

/* Keep theorem headers sans-serif even within body */
.theorem-header {
  font-family: var(--header-font), system-ui, sans-serif;
}

/* Use serif for sidenotes and footnotes to match body text */
main article section.body .sidenote {
  font-family: var(--serif-body-font);
}

/* Style all images within sidenotes */
.sidenote img {
  width: 100px;
  height: auto;
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
  display: block;
}

/* Larger images in mobile footnotes for better readability */
@media (max-width: 1169.98px) {
  .footnote-container img {
    width: 150px;
    height: auto;
    border-radius: 0.5rem;
    margin: 0.5rem 0;
    display: block;
  }
}
.footnote-container,
.footnote-container h3,
.footnote-container .footnote,
.footnote-container .footnote p,
.footnote-container .footnote a,
.footnote-container .fncontent {
  font-family: var(--serif-body-font);
}

/* Ensure article stays centered at wider widths as well */
@media (min-width: 800px) {
  main article {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Drawer visibility and sticky behavior (single breakpoint) */
@media (max-width: 1169.98px) {
  .mobile-toc-toggle { display: block; }
  .toc-drawer-toggle { display: inline-flex; align-items: center; gap: 6px; }

  /* Ensure no ancestor breaks sticky */
  main, main article, .content { overflow: visible !important; }

  /* Consistent gutters on small/tablet widths */
  main, main article, .content {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }
  /* Extend gutters to common full-width sections on homepage */
  nav,
  .hero,
  .site-footer {
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  /* Toggle: in-flow and sticky under byline */
  .mobile-toc-toggle {
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Drawer: scrolls in normal flow under the toggle */
  #mobile-toc-content {
    position: static;
    top: auto;
    z-index: auto;
    margin-top: 8px;
  }
}