/* Brand row: text + icons aligned left */
.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 0.5rem; /* equal spacing between text and icons */
  color: var(--color-sidebar-brand-text); /* adapts with theme */
}

.sidebar-brand-row .brand-text {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.01em;
}

.sidebar-brand-row a {
  color: inherit; /* icons inherit brand color instead of link blue */
  text-decoration: none;
}

/* Brand text should never look like a link */
.sidebar-brand-row .brand-text {
  color: var(--color-sidebar-brand-text);
  text-decoration: none;
  cursor: default; /* avoid pointer cursor */
}
.sidebar-brand-row .brand-text:hover,
.sidebar-brand-row .brand-text:visited,
.sidebar-brand-row .brand-text:active,
.sidebar-brand-row .brand-text:focus {
  color: var(--color-sidebar-brand-text);
  text-decoration: none;
}

.sidebar-brand-row .github-icon {
  display: inline-flex;
  align-items: center;
  color: inherit;
}

.sidebar-brand-row .github-icon svg {
  width: 20px;
  height: 20px;
  display: block;
}
/* Generic responsive authors grid */
.authors-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* No horizontal gap between the two image pairs */
  column-gap: 0;
  /* Keep a small vertical gap within each pair */
  row-gap: 0.0rem;
  /* Make the whole grid smaller and centered */
  max-width: 640px;
  margin: 0 auto;
}
@media (max-width: 500px) {
  .authors-grid { grid-template-columns: 1fr; }
}
/*
Custom CSS with typography aligned to OpenAI docs aesthetic.
We use Inter (open-source) for body and JetBrains Mono for code.
*/

/* Typography: local fonts via @font-face (variable TTFs) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900; /* variable range */
  font-display: swap;
  src: url('../_static/fonts/InterVariable.ttf') format('truetype');
}

@font-face {
  font-family: 'Inter';
  font-style: italic;
  font-weight: 100 900; /* variable range */
  font-display: swap;
  src: url('../_static/fonts/InterVariable-Italic.ttf') format('truetype');
}

/* JetBrains Mono variable (TTF) */
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 100 800;
  font-display: swap;
  src: url('../_static/fonts/JetBrainsMono-Variable.ttf') format('truetype');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: italic;
  font-weight: 100 800;
  font-display: swap;
  src: url('../_static/fonts/JetBrainsMono-Variable-Italic.ttf') format('truetype');
}

/* Removed Google Fonts import to enforce local-only fonts */

:root {
  --brand: #0A84FF; /* primary accent */
  --brand-dark: #0067d7;
  --link: #0A84FF; /* link color, light theme */
  --text: #111315; /* deeper black for stronger contrast */
  --muted: #475569;
  --bg: #ffffff;
  --bg-alt: #f7f8fb;
  --border: #e5e7eb;
  /* Static overlay tint: brand blue */
  --overlay-color: rgba(46, 170, 220, 0.50);
  /* Shared height for brand + search bars */
  --sidebar-bar-height: 44px;
  /* Enforce Inter as the app-wide font stack */
  --font-stack: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-stack--headings: var(--font-stack);
  --font-stack--monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

/* Ensure Furo picks Inter via its CSS variables (it defines them on body) */
body {
  --font-stack: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  --font-stack--headings: var(--font-stack);
  --font-stack--monospace: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
}

html body {
  font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji';
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: "ss01" on, "ss02" on, "cv01" on;
  font-kerning: normal;
  font-optical-sizing: auto;
  line-height: 1.7;
}

/* Links */
a, .reference { color: var(--link); }
a:hover, .reference:hover { color: var(--brand-dark); }
a:visited, .reference:visited { color: var(--link); }

/* Headings spacing */
h1, h2, h3, h4 { color: var(--text); margin-top: 1.25rem; margin-bottom: .75rem; font-weight: 700; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, 'Apple Color Emoji', 'Segoe UI Emoji'; }

/* Page content width */
.content {
  max-width: 980px;
}

/* Sidebar refinements */
.sidebar { border-right: 1px solid #1f2937; background: var(--bg-alt); }
.sidebar-logo { width: 80px; height: auto; display: block; }
.sidebar-logo-container { padding: 0px 0; }
.sidebar .sidebar-title { font-weight: 600; color: var(--muted); }
div.sidebar-search input[type="search"] {
  background: #0f1318;
  color: #e5e7eb;
  border: 1px solid #1f2937;
  border-radius: 8px;
  height: var(--sidebar-bar-height);
  box-sizing: border-box;
  padding: 0 12px;
}
div.sidebar-search input[type="search"]::placeholder { color: #94a3b8; }
div.sidebar-search {
  display: flex;
  align-items: center;
  height: var(--sidebar-bar-height);
  padding: 0 12px;
}

/* Code blocks */
pre, code { font-family: 'JetBrains Mono', SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace; }
.highlight pre {
  border: 1px solid #1f2937;
  background: #0f1115;
  border-radius: 10px;
  box-shadow: 0 1px 0 rgba(255,255,255,0.04) inset, 0 1px 2px rgba(0,0,0,0.25);
  padding: 1rem;
}
.highlight .copybtn {
  filter: invert(0.9);
}

/* Admonitions */
div.admonition { border-left: 4px solid var(--brand); background: #0f1318; }
div.admonition p.admonition-title { font-weight: 600; }

/* Tables: modern, clean styling */
table.docutils {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
  border: 1px solid var(--color-table-border);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0,0,0,0.08);
}
table.docutils thead th {
  background: var(--color-table-header-background);
  color: var(--color-foreground-primary);
  font-weight: 600;
  text-align: left;
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--color-table-border);
}
table.docutils tbody td {
  padding: .75rem 1rem;
}
table.docutils tbody tr {
  border-top: 1px solid var(--color-table-border);
  transition: background-color .15s ease-in-out;
}
table.docutils tbody tr:nth-child(odd) {
  background: var(--color-background-secondary);
}
table.docutils tbody tr:nth-child(even) {
  background: var(--color-background-hover--transparent);
}
table.docutils tbody tr:hover {
  background: var(--color-background-hover);
}

/* Table refinements: remove column separators and outer borders */
table.docutils,
table.docutils th,
table.docutils td {
  border: none !important; /* kill legacy cell borders */
}
table.docutils {
  border: none !important; /* remove outer top/bottom lines */
}
table.docutils thead th { border-top: 0 !important; }
table.docutils tbody tr:last-child { border-bottom: 0 !important; }

/* Furo variable overrides */
:root {
  --color-brand-primary: var(--brand);
  --color-brand-content: var(--brand);
}

:root[data-theme="dark"] {
  --color-brand-primary: #2EAADC;
  --color-brand-content: #2EAADC;
  --color-background-primary: #120e0e;
  --color-background-secondary: #101217;
  --color-foreground-primary: #E6E8EB;
  --color-foreground-secondary: #CBD5E1;
  --color-foreground-muted: #94A3B8;
  /* Ensure headings/body text are readable on dark */
  --text: #E6E8EB;
  --link: #57B7FF; /* link color, dark theme closer to OpenAI */
  /* Overlay tint fixed globally; no override */
}

/* Search input refinement */
input[type="search"] { border: 1px solid var(--border); }

/* Small helper cards */
.sd-card { border: 1px solid var(--border); background: var(--bg); }
.sd-card .sd-card-header { background: var(--bg-alt); }

/* Toctree: make cleaner section lists */
.toctree-wrapper ul { list-style: none; padding-left: 0; }
.toctree-wrapper li { margin: .35rem 0; }
.toctree-wrapper a.reference { text-decoration: none; }
.toctree-wrapper a.reference:hover { text-decoration: underline; }

/* Content width and headings */
.content { max-width: 1000px; }
.content h1 { font-size: 2.25rem; letter-spacing: -0.02em; }
.content h2 { font-size: 1.5rem; letter-spacing: -0.01em; }
/* Ensure the main page title is not brand-colored */
.page-title, .content h1 { color: var(--text) !important; }

/* Hide Sphinx/Furo credit line in footer while keeping copyright */
.bottom-of-page .left-details {
  color: transparent; /* hides bare text nodes like "Made with..." */
}
.bottom-of-page .left-details a {
  display: none; /* hide credit links (Sphinx, Furo, author) */
}
.bottom-of-page .left-details .copyright {
  color: var(--color-foreground-primary); /* restore copyright color */
}

/* Author image styling */
.author-photo {
  width: 100%;
  height: auto;
  border-radius: 2px;
  display: block;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
  aspect-ratio: 1 / 1;
  object-fit: cover;
  margin: 0;
  opacity: 0.7;
}

/* Inline author portraits: do not force width, add subtle margins */
.author-inline {
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  opacity: 0.9;
  margin: 0 .75rem .5rem .75rem;
}

/* Author card container with overlay */
.author-card {
  position: relative;
  border-radius: 2px;
  overflow: hidden; /* ensure overlay corners match image */
}
.author-overlay {
  position: absolute;
  inset: 0;
  background: var(--overlay-color);
  pointer-events: none; /* overlay should not intercept clicks */
}

/* Responsive authors grid: 2 columns on desktop, 1 on mobile */
.sd-grid.authors-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 500px) {
  .sd-grid.authors-grid {
    grid-template-columns: 1fr;
  }
}

/* Dark mode: force page title to pure white */
[data-theme="dark"] .page-title,
[data-theme="dark"] .content h1 {
  color: #ffffff !important;
}
/* Dark mode: ensure subsection headers are white too */
[data-theme="dark"] .content h2,
[data-theme="dark"] .content h3,
[data-theme="dark"] .content h4,
[data-theme="dark"] .content h5,
[data-theme="dark"] .content h6 {
  color: #ffffff !important;
}

/* Dark mode: ensure "View" and "Edit this page" icons are visible */
[data-theme="dark"] .content-icon-container .view-this-page .muted-link,
[data-theme="dark"] .content-icon-container .edit-this-page .muted-link {
  color: #ffffff !important; /* sets currentColor for stroke */
  opacity: 1; /* counteract muted link style */
}
[data-theme="dark"] .content-icon-container .view-this-page svg,
[data-theme="dark"] .content-icon-container .edit-this-page svg {
  color: #ffffff !important;
  stroke: #ffffff !important;
}
[data-theme="dark"] .content-icon-container .view-this-page .muted-link:hover svg,
[data-theme="dark"] .content-icon-container .edit-this-page .muted-link:hover svg {
  color: var(--color-brand-content) !important;
  stroke: var(--color-brand-content) !important;
}

/* Auto mode should mirror dark when system prefers dark */
@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --color-brand-primary: #2EAADC;
    --color-brand-content: #2EAADC;
    --color-background-primary: #0E0F12;
    --color-background-secondary: #101217;
    --color-foreground-primary: #E6E8EB;
    --color-foreground-secondary: #CBD5E1;
    --color-foreground-muted: #94A3B8;
    --text: #ffffff;
    --link: #57B7FF;
  }
  [data-theme="auto"] .page-title,
  [data-theme="auto"] .content h1 {
    color: #ffffff !important;
  }
  /* Auto-dark: ensure subsection headers are white too */
  [data-theme="auto"] .content h2,
  [data-theme="auto"] .content h3,
  [data-theme="auto"] .content h4,
  [data-theme="auto"] .content h5,
  [data-theme="auto"] .content h6 {
    color: #ffffff !important;
  }
  /* Auto-dark: ensure "View" and "Edit this page" icons are visible */
  [data-theme="auto"] .content-icon-container .view-this-page .muted-link,
  [data-theme="auto"] .content-icon-container .edit-this-page .muted-link {
    color: #ffffff !important;
    opacity: 1;
  }
  [data-theme="auto"] .content-icon-container .view-this-page svg,
  [data-theme="auto"] .content-icon-container .edit-this-page svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
  }
  [data-theme="auto"] .content-icon-container .view-this-page .muted-link:hover svg,
  [data-theme="auto"] .content-icon-container .edit-this-page .muted-link:hover svg {
    color: var(--color-brand-content) !important;
    stroke: var(--color-brand-content) !important;
  }
}

.sidebar-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--sidebar-bar-height);
  padding: 0px 10px 0px 0px;
}
.sidebar-brand-row .brand-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.sidebar-brand-row .brand-logo .logo { max-height: calc(var(--sidebar-bar-height) - 10px); width: auto; display: block; }


/* Reusable GitHub icon styles */
.github-icon {
  display: inline-flex;
  width: 20px;
  height: 20px;
  color: var(--color-foreground-secondary);
}
.github-icon:hover { color: var(--color-brand-content); }
.github-icon svg { width: 20px; height: 20px; }


/* Heading hierarchy: sizes and colors
   - Ensure sub-sub-sections (h3) are smaller than sub-sections (h2)
   - Color progression: h2 darker than h1, h3 darker than h2
   - Scoped to main article content to avoid sidebar/toc effects
*/

/* Base sizing refinements */
#furo-main-content h2 { font-size: 1.5rem; }
#furo-main-content h3 { font-size: 1.25rem; letter-spacing: -0.005em; }

/* Light theme: darker with depth */
.content h1 { color: var(--color-foreground-secondary) !important; }
.content h2 { color: var(--color-foreground-primary) !important; }
.content h3 { color: color-mix(in srgb, var(--color-foreground-primary), black 12%) !important; }

/* Dark theme: interpret "darker" as lower brightness (closer to background) */
[data-theme="dark"] .content h1 { color: var(--color-foreground-primary) !important; }
[data-theme="dark"] .content h2 { color: var(--color-foreground-secondary) !important; }
[data-theme="dark"] .content h3 { color: color-mix(in srgb, var(--color-foreground-secondary), black 20%) !important; }

/* Auto-dark should mirror dark behavior when system prefers dark */
@media (prefers-color-scheme: dark) {
  [data-theme="auto"] .content h1 { color: var(--color-foreground-primary) !important; }
  [data-theme="auto"] .content h2 { color: var(--color-foreground-secondary) !important; }
  [data-theme="auto"] .content h3 { color: color-mix(in srgb, var(--color-foreground-secondary), black 20%) !important; }
}