/*

* Aliki Theme Stylesheet
* Modern RDoc theme by Stan Lo
*
* Features:
* - Three-column responsive layout (navigation, content, table of contents)
* - Dark mode support with localStorage persistence
* - Auto-generated right sidebar TOC with scroll spy
* - Mobile-optimized search modal
* - Enhanced syntax highlighting for both light and dark themes
* - Code-copying functionality
*/

/* 1. Design System - CSS Variables and Tokens */

/* Light Theme (Default) */ :root {

/* Color Palette - Primary */
--color-primary-50: #fdeae9;
--color-primary-100: #fadad3;
--color-primary-200: #f8bfbd;
--color-primary-300: #f5a9a7;
--color-primary-400: #f07f7b;
--color-primary-500: #eb544f;
--color-primary-600: #e62923;
--color-primary-700: #b8211c;
--color-primary-800: #8a1915;
--color-primary-900: #5c100e;

/* Color Palette - Neutral */
--color-neutral-50: #fafaf9;
--color-neutral-100: #f5f5f4;
--color-neutral-200: #e7e5e4;
--color-neutral-300: #d6d3d1;
--color-neutral-400: #a8a29e;
--color-neutral-500: #78716c;
--color-neutral-600: #57534e;
--color-neutral-700: #44403c;
--color-neutral-800: #292524;
--color-neutral-900: #1c1917;

/* Code highlighting colors */
--code-blue: #1d4ed8;
--code-green: #047857;
--code-orange: #d97706;
--code-purple: #7e22ce;
--code-red: #dc2626;

/* Color Palette - Green (for success states) */
--color-green-400: #4ade80;
--color-green-500: #22c55e;
--color-green-600: #16a34a;

/* Semantic Colors - Light Theme */
--color-text-primary: var(--color-neutral-900);
--color-text-secondary: var(--color-neutral-600);
--color-text-tertiary: var(--color-neutral-500);

--color-background-primary: #ffffff;
--color-background-secondary: var(--color-neutral-50);
--color-background-tertiary: var(--color-neutral-100);
--color-background-elevated: #ffffff;

--color-border-default: var(--color-neutral-300);
--color-border-subtle: var(--color-neutral-200);
--color-border-emphasis: var(--color-neutral-400);

--color-link-default: var(--color-primary-600);
--color-link-hover: var(--color-primary-700);

--color-accent-primary: var(--color-primary-600);
--color-accent-hover: var(--color-primary-700);
--color-accent-subtle: var(--color-primary-50);

--color-code-bg: #f6f8fa;
--color-code-border: var(--color-neutral-300);

--color-nav-bg: #ffffff;
--color-nav-text: var(--color-neutral-700);

/* RGBA Colors (theme-agnostic) */
--color-overlay: rgba(0, 0, 0, 0.5);
--color-emphasis-bg: rgba(255, 111, 97, 0.1);
--color-emphasis-decoration: rgba(52, 48, 64, 0.25);
--color-search-highlight-bg: rgba(224, 108, 117, 0.1);
--color-success-bg: rgba(34, 197, 94, 0.1);

/* Typography Scale */
--font-size-xs: 0.75rem;    /* 12px */
--font-size-sm: 0.875rem;   /* 14px */
--font-size-base: 1rem;     /* 16px */
--font-size-lg: 1.125rem;   /* 18px */
--font-size-xl: 1.25rem;    /* 20px */
--font-size-2xl: 1.5rem;    /* 24px */
--font-size-3xl: 1.875rem;  /* 30px */
--font-size-4xl: 2.25rem;   /* 36px */
--font-size-5xl: 3rem;      /* 48px */

/* Font Families */
--font-family-base: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif;
--font-family-heading: var(--font-family-base);
--font-family-mono: ui-monospace, 'SFMono-Regular', 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;

/* Font Weights */
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;

/* Line Heights */
--line-height-tight: 1.25;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;

/* Spacing Scale */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

/* Border Radius */
--radius-sm: 0.25rem;   /* 4px */
--radius-md: 0.375rem;  /* 6px */
--radius-lg: 0.5rem;    /* 8px */

/* Shadows */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

/* Layout Dimensions */
--layout-sidebar-width: 280px;
--layout-sidebar-width-min: 240px;
--layout-sidebar-width-max: 15%;
--layout-toc-width-min: 240px;
--layout-toc-width-max: 18%;
--layout-content-max-width: 800px;
--layout-header-height: 64px;
--layout-search-width: 400px;

/* Transitions */
--transition-fast: 150ms ease-in-out;
--transition-base: 200ms ease-in-out;

/* Z-Index Scale */
--z-fixed: 300;
--z-modal: 400;
--z-popover: 500;

/* Legacy Compatibility (maps to new tokens) */
--sidebar-width: var(--layout-sidebar-width);
--highlight-color: var(--color-accent-primary);
--secondary-highlight-color: var(--color-accent-hover);
--text-color: var(--color-text-primary);
--background-color: var(--color-background-primary);
--code-block-background-color: var(--color-code-bg);
--link-color: var(--color-link-default);
--border-color: var(--color-border-default);
--source-code-toggle-color: var(--color-accent-hover);
--table-header-background-color: var(--color-neutral-100);
--table-td-background-color: var(--color-neutral-50);
--font-primary: var(--font-family-base);
--font-heading: var(--font-family-heading);
--font-code: var(--font-family-mono);

}

/* Dark Theme */

data-theme=“dark”

{

/* Code highlighting colors */
--code-blue: #93c5fd;
--code-green: #34d399;
--code-orange: #fbbf24;
--code-purple: #c084fc;
--code-red: #f87171;

/* Semantic Colors - Dark Theme */
--color-text-primary: var(--color-neutral-50);
--color-text-secondary: var(--color-neutral-200);
--color-text-tertiary: var(--color-neutral-400);

--color-background-primary: var(--color-neutral-900);
--color-background-secondary: var(--color-neutral-800);
--color-background-tertiary: var(--color-neutral-700);
--color-background-elevated: var(--color-neutral-800);

--color-border-default: var(--color-neutral-600);
--color-border-subtle: var(--color-neutral-700);
--color-border-emphasis: var(--color-neutral-300);

--color-link-default: var(--color-neutral-50);
--color-link-hover: var(--color-primary-500);

--color-accent-primary: var(--color-primary-500);
--color-accent-hover: var(--color-primary-400);
--color-accent-subtle: rgba(235, 84, 79, 0.1);

--color-code-bg: var(--color-neutral-800);
--color-code-border: var(--color-neutral-700);

--color-nav-bg: var(--color-neutral-900);
--color-nav-text: var(--color-neutral-50);

/* Dark theme shadows (slightly more subtle) */
--shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px -1px rgba(0, 0, 0, 0.4);
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.4), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.4);

/* Legacy Compatibility - Dark Theme */
--highlight-color: var(--color-accent-primary);
--secondary-highlight-color: var(--color-accent-hover);
--text-color: var(--color-text-primary);
--background-color: var(--color-background-primary);
--code-block-background-color: var(--color-code-bg);
--link-color: var(--color-link-default);
--border-color: var(--color-border-default);
--source-code-toggle-color: var(--color-accent-hover);
--table-header-background-color: var(--color-background-tertiary);
--table-td-background-color: var(--color-background-secondary);

}

/* 2. Global Styles & Layout */ body {

background: var(--background-color);
font-family: var(--font-primary);
font-weight: 400;
color: var(--text-color);
line-height: var(--line-height-relaxed);
margin: 0;

/* Grid layout with header, sidebar, main, and footer */
display: grid;
grid-template-columns: minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr;
grid-template-rows: var(--layout-header-height) 1fr auto;
grid-template-areas:
  "header header"
  "nav main"
  "nav footer";
min-height: 100vh;

}

/* Three-column layout when TOC is present */ body.has-toc {

grid-template-columns: minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr minmax(var(--layout-toc-width-min), var(--layout-toc-width-max));
grid-template-areas:
  "header header header"
  "nav main toc"
  "nav footer toc";
grid-template-rows: var(--layout-header-height) 1fr auto;
min-height: 100vh;

}

/* Mobile: stack everything vertically */ @media (max-width: 1023px) {

body,
body.has-toc {
  display: flex;
  flex-direction: column;
  grid-template-columns: none;
  grid-template-rows: none;
  grid-template-areas: none;
}

}

/* 3. Typography */ h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {

position: relative;

display: none;
padding-left: 1em;
line-height: 0;
vertical-align: baseline;
font-size: 10px;

}

h1 span { top: -1.3em; } h2 span { top: -1.2em; } h3 span { top: -1.0em; } h4 span { top: -0.8em; } h5 span { top: -0.5em; } h6 span { top: -0.5em; }

h1:hover span, h2:hover span, h3:hover span, h4:hover span, h5:hover span, h6:hover span {

display: inline;

}

h1:target, h2:target, h3:target, h4:target, h5:target, h6:target {

margin-left: calc(-1 * var(--space-5));
padding-left: calc(var(--space-5) / 2);
border-left: calc(var(--space-5) / 2) solid var(--border-color);
scroll-margin-top: calc(var(--layout-header-height) + 2rem);

}

main .anchor-target {

scroll-margin-top: calc(var(--layout-header-height) + 2rem);

}

/* 4. Links */ a {

color: var(--link-color);
transition: color var(--transition-base);
text-decoration: underline;
text-underline-offset: 0.2em; /* Make sure it doesn't overlap with underscores in a method name. */

}

a:hover {

color: var(--color-link-hover);

}

a code:hover {

color: var(--color-link-hover);

}

/* 5. Code and Pre */ /* Code blocks */ pre {

font-family: var(--font-code);
background-color: var(--color-code-bg);
border: 1px solid var(--color-code-border);
border-radius: var(--radius-md);
padding: var(--space-4);
overflow-x: auto;
font-size: var(--font-size-sm);
line-height: var(--line-height-normal);
margin: var(--space-4) 0;
position: relative;

}

/* Code block wrapper for copy button */ .code-block-wrapper {

position: relative;
margin: var(--space-4) 0;

}

.code-block-wrapper pre {

margin: 0;

}

/* Copy button styling */ .copy-code-button {

position: absolute;
top: var(--space-2);
right: var(--space-2);
padding: var(--space-2);
background: var(--color-background-secondary);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-sm);
cursor: pointer;
opacity: 0.6;
transition: opacity var(--transition-fast), background var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
display: flex;
align-items: center;
justify-content: center;
width: 2rem;
height: 2rem;
z-index: 10;

}

.copy-code-button:hover, .copy-code-button:focus {

opacity: 1;
background: var(--color-background-tertiary);
border-color: var(--color-border-emphasis);

}

.copy-code-button:active {

transform: scale(0.95);

}

.copy-code-button svg {

width: 1rem;
height: 1rem;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
color: var(--color-text-secondary);
transition: color var(--transition-fast);

}

.copy-code-button:hover svg {

color: var(--color-text-primary);

}

/* Copied state - subtle green checkmark */ .copy-code-button.copied {

background: var(--color-success-bg);
border-color: var(--color-green-500);
opacity: 1;

}

.copy-code-button.copied svg {

color: var(--color-green-600);

}

data-theme=“dark”

.copy-code-button.copied {

border-color: var(--color-green-400);

}

data-theme=“dark”

.copy-code-button.copied svg {

color: var(--color-green-400);

}

/* Mobile adjustments */ @media (hover: none) {

.copy-code-button {
  opacity: 0.7;
}

.copy-code-button:active {
  opacity: 1;
}

}

pre code {

background: none;
border: none;
padding: 0;
font-size: inherit;

}

/* Inline code */ code {

font-family: var(--font-code);
background-color: var(--color-code-bg);
border: 1px solid var(--color-border-subtle);
padding: 0.125rem 0.375rem;
border-radius: var(--radius-sm);
font-size: 0.9em;

}

/* Tables */ table {

margin: 0;
border-spacing: 0;
border-collapse: collapse;

}

table tr th, table tr td {

padding: 0.2em 0.4em;
border: 1px solid var(--border-color);

}

table tr th {

background-color: var(--table-header-background-color);

}

table tr:nth-child(even) td {

background-color: var(--table-td-background-color);

}

/* 6. Header (Top Navbar) */ header.top-navbar {

grid-area: header;
position: sticky;
top: 0;
z-index: var(--z-fixed);
background: var(--color-background-primary);
border-bottom: 1px solid var(--border-color);
display: flex;
align-items: center;
justify-content: flex-start;
padding: 0 var(--space-6);
gap: var(--space-8);
height: var(--layout-header-height);
box-shadow: var(--shadow-sm);

}

header.top-navbar .navbar-brand {

font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
text-decoration: none;
white-space: nowrap;

}

header.top-navbar .navbar-brand:hover {

color: var(--color-accent-primary);

}

header.top-navbar .navbar-search {

position: relative;
flex: 0 1 auto;
width: var(--layout-search-width);

}

header.top-navbar .navbar-search form {

margin: 0;
padding: 0;

}

header.top-navbar search-field {

width: 100%;
padding: var(--space-2) var(--space-4);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
background: var(--color-background-primary);
color: var(--color-text-primary);
transition: border-color var(--transition-fast);

}

header.top-navbar search-field:focus {

outline: none;
border-color: var(--color-accent-primary);
box-shadow: 0 0 0 3px var(--color-accent-subtle);

}

header.top-navbar search-field::placeholder {

color: var(--color-text-tertiary);

}

/* Search results dropdown in navbar */ header.top-navbar search-results {

position: absolute;
top: calc(100% + var(--space-2));
left: 0;
width: var(--layout-search-width);
max-height: 60vh;
background: var(--color-background-elevated);
border: 1px solid var(--border-color);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow-y: auto;
z-index: var(--z-popover);
margin: 0;
padding: 0;

}

header.top-navbar search-results.initially-hidden {

display: none;

}

header.top-navbar search-results[aria-expanded=“false”] {

display: none;

}

/* Mobile search icon button (hidden on desktop) */ .navbar-search-mobile {

display: none;

}

/* Theme toggle button */ .theme-toggle {

display: flex;
align-items: center;
justify-content: center;
padding: var(--space-2);
margin-left: auto;
background: transparent;
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
color: var(--color-text-primary);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
font-size: var(--font-size-lg);
line-height: 1;
width: 2.5rem;
height: 2.5rem;

}

.theme-toggle:hover {

background: var(--color-background-secondary);
border-color: var(--color-accent-primary);
color: var(--color-accent-primary);

}

.theme-toggle:focus {

outline: none;
border-color: var(--color-accent-primary);
box-shadow: 0 0 0 3px var(--color-accent-subtle);

}

.theme-toggle-icon {

display: inline-block;
transition: transform var(--transition-base);

}

.theme-toggle:hover .theme-toggle-icon {

transform: rotate(20deg);

}

/* Mobile navbar */ @media (max-width: 1023px) {

header.top-navbar {
  display: flex;
  align-items: center;
  padding: 0 var(--space-4);
  gap: var(--space-4);
}

/* Hide desktop search bar on mobile */
header.top-navbar .navbar-search-desktop {
  display: none;
}

/* Show mobile search icon */
.navbar-search-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem;
  background: transparent;
  border: none;
  font-size: 1.25rem;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
}

.navbar-search-mobile:hover {
  color: var(--color-accent-primary);
}

/* Brand needs left margin for hamburger button */
header.top-navbar .navbar-brand {
  margin-left: 2.5rem;
  flex: 1;
  font-size: var(--font-size-lg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

}

/* 7. Footer */ footer.site-footer {

grid-area: footer;
background: var(--color-background-secondary);
border-top: 1px solid var(--border-color);
padding: var(--space-12) var(--space-6);

}

footer.site-footer .footer-content {

max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: var(--space-8);

}

footer.site-footer h3 {

font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
margin: 0 0 var(--space-4) 0;
text-transform: uppercase;
letter-spacing: 0.05em;

}

footer.site-footer ul {

list-style: none;
margin: 0;
padding: 0;

}

footer.site-footer li {

margin-bottom: var(--space-2);

}

footer.site-footer a {

color: var(--color-text-secondary);
text-decoration: none;
font-size: var(--font-size-sm);
transition: color var(--transition-fast);

}

footer.site-footer a:hover {

color: var(--color-link-hover);

}

footer.site-footer .footer-bottom {

margin-top: var(--space-8);
padding-top: var(--space-6);
border-top: 1px solid var(--border-color);
text-align: center;
font-size: var(--font-size-xs);
color: var(--color-text-tertiary);

}

/* 8. Navigation (Left Sidebar) */ nav {

grid-area: nav;
font-family: var(--font-heading);
font-size: var(--font-size-base);
border-right: 1px solid var(--border-color);
background: var(--color-nav-bg);
color: var(--color-nav-text);
overflow-y: auto;
overflow-x: hidden;
display: flex;
flex-direction: column;
position: sticky;
top: var(--layout-header-height);
height: calc(100vh - var(--layout-header-height));
align-self: start;

}

/* Mobile navigation */ @media (max-width: 1023px) {

nav {
  position: fixed;
  top: var(--layout-header-height);
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  z-index: calc(var(--z-fixed) - 10); /* Below header */
  box-shadow: var(--shadow-lg);
  /* Don't set height - let top/bottom define it */
}

nav[hidden] {
  display: none;
}

/* Backdrop for mobile nav */
body::before {
  content: '';
  position: fixed;
  top: var(--layout-header-height);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-overlay);
  z-index: calc(var(--z-fixed) - 20);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--transition-base);
}

/* Show backdrop when nav is open */
body.nav-open::before {
  opacity: 1;
  pointer-events: auto;
}

}

/* Desktop: hide nav when [hidden] attribute is set */ @media (min-width: 1024px) {

nav[hidden] {
  display: none;
}

}

nav footer {

padding: var(--space-4);
border-top: 1px solid var(--border-color);

}

nav footer a {

color: var(--secondary-highlight-color);

}

nav .nav-section {

margin-top: var(--space-6);
padding: 0 var(--space-6);

}

nav h2, nav h3 {

font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin: 0 0 var(--space-4);
padding: var(--space-2) 0;
color: var(--highlight-color);
border-bottom: 1px solid var(--border-color);

}

ol.breadcrumb {

display: flex;

padding: 0;
margin: 0 0 1em;

}

ol.breadcrumb li {

display: block;
list-style: none;
font-size: 125%;

}

nav ul, nav dl, nav p {

padding: 0;
list-style: none;
margin: var(--space-3) 0;

}

nav ul li {

margin-bottom: var(--space-2);
line-height: var(--line-height-relaxed);

}

nav ul ul {

padding-left: var(--space-5);
margin-top: var(--space-2);

}

nav ul ul ul {

padding-left: var(--space-5);

}

nav ul ul ul ul {

padding-left: var(--space-5);

}

nav a {

color: var(--color-text-primary);
text-decoration: none;

}

nav a:hover {

color: var(--color-link-hover);
text-decoration: underline;

}

navigation-toggle {

display: none; /* Hidden by default, shown on mobile */

}

/* Mobile toggle button */ @media (max-width: 1023px) {

#navigation-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  position: fixed;
  top: calc(var(--layout-header-height) / 2);
  transform: translateY(-50%);
  left: 1rem;
  z-index: var(--z-fixed);
  font-size: 1.5rem;
  background: transparent;
  border: none;
  color: var(--color-text-primary);
  cursor: pointer;
  transition: color var(--transition-fast);
  line-height: 1;
}

#navigation-toggle:hover {
  color: var(--color-accent-primary);
}

}

nav ul li details {

position: relative;
padding-right: 1.5em;  /* Add space for the marker on the right */

}

nav ul li details > summary {

list-style: none;  /* Remove the default marker */
position: relative; /* So that the open/close triangle can position itself absolutely inside */

}

nav ul li details > summary::-webkit-details-marker {

display: none;  /* Removes the default marker, in Safari 18. */

}

nav ul li details > summary::after {

content: '▶';  /* Unicode right-pointing triangle */
position: absolute;
font-size: 0.8em;
bottom: 0.1em;
margin-left: 0.3em;
transition: transform var(--transition-base);

}

nav ul li details > summary::after {

transform: rotate(90deg);  /* Rotate the triangle when open */

}

/* 9. Main Content (Center Column) */ main {

grid-area: main;
width: 100%;
max-width: var(--layout-content-max-width);
margin: 0 auto;
padding: var(--space-12) var(--space-8);
font-size: var(--font-size-base);
line-height: var(--line-height-relaxed);
color: var(--color-text-primary);
box-sizing: border-box;

}

/* Desktop: hide hamburger */ @media (min-width: 1024px) {

#navigation-toggle {
  display: none;
}

}

/* Mobile: full width with padding */ @media (max-width: 1023px) {

main {
  padding: var(--space-6) var(--space-4);
  padding-top: var(--space-8);
  width: 100%;
}

footer.site-footer {
  padding: var(--space-8) var(--space-4);
}

footer.site-footer .footer-content {
  grid-template-columns: 1fr;
  gap: var(--space-6);
}

}

main h1 {

margin-top: 0;
margin-bottom: 1em;
font-size: 2.5em;
color: var(--highlight-color);

}

main h1, main h2, main h3, main h4, main h5, main h6 {

font-family: var(--font-heading);
color: var(--highlight-color);

}

/* Heading size hierarchy */ main h1 {

font-size: var(--font-size-3xl);
font-weight: var(--font-weight-bold);
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);

}

main h2 {

font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
margin-top: var(--space-8);
margin-bottom: var(--space-4);
line-height: var(--line-height-tight);

}

main h3 {

font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
margin-top: var(--space-6);
margin-bottom: var(--space-3);
line-height: var(--line-height-tight);

}

main h4 {

font-size: var(--font-size-lg);
font-weight: var(--font-weight-medium);
margin-top: var(--space-4);
margin-bottom: var(--space-2);

}

main h5, main h6 {

font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
margin-top: var(--space-3);
margin-bottom: var(--space-2);

}

/* Search */ search-section {

padding: var(--space-6);
background-color: var(--background-color);
border-bottom: 1px solid var(--border-color);

}

search-field-wrapper {

position: relative;
display: flex;
align-items: center;

}

search-field {

width: 100%;
padding: var(--space-2) var(--space-4) var(--space-2) 2.5rem;
border: 1px solid var(--border-color);
border-radius: 1.25rem;
font-size: var(--font-size-sm);
outline: none;
transition: border-color var(--transition-base);
color: var(--text-color);

}

search-field:focus {

border-color: var(--highlight-color);

}

search-field::placeholder {

color: var(--text-color);

}

search-field-wrapper::before {

content: "\1F50D";
position: absolute;
left: var(--space-3);
top: 50%;
transform: translateY(-50%);
font-size: var(--font-size-sm);
color: var(--text-color);
opacity: 0.6;

}

/* Search Results */ search-results {

font-family: var(--font-primary);
font-weight: 300;

}

search-results a {

color: var(--color-text-primary);

}

search-results a:hover {

color: var(--color-accent-primary);

}

search-results .search-match {

font-family: var(--font-heading);
font-weight: normal;

}

search-results .search-selected {

background: var(--code-block-background-color);
border-bottom: 1px solid transparent;

}

search-results li {

list-style: none;
border-bottom: 1px solid var(--border-color);
margin-bottom: 0.5em;

}

search-results li:last-child {

border-bottom: none;
margin-bottom: 0;

}

search-results li p {

padding: 0;
margin: 0.5em;

}

search-results .search-namespace {

font-weight: bold;

}

search-results li em {

background-color: var(--color-search-highlight-bg);
font-style: normal;

}

search-results pre {

margin: 0.5em;
font-family: var(--font-code);

}

/* Syntax Highlighting - Light Theme */ .ruby-constant { color: var(–code-orange); } .ruby-keyword { color: var(–code-red); } .ruby-ivar { color: var(–code-orange); } .ruby-operator { color: var(–code-green); } .ruby-identifier { color: var(–code-blue); } .ruby-node { color: var(–code-purple); } .ruby-comment { color: var(–color-neutral-500); font-style: italic; } .ruby-regexp { color: var(–code-purple); } .ruby-value { color: var(–code-orange); } .ruby-string { color: var(–code-green); }

/* Syntax Highlighting - Dark Theme */

data-theme=“dark”

.ruby-constant { color: var(–code-orange); }

data-theme=“dark”

.ruby-keyword { color: var(–code-red); }

data-theme=“dark”

.ruby-ivar { color: var(–code-orange); }

data-theme=“dark”

.ruby-operator { color: var(–code-green); }

data-theme=“dark”

.ruby-identifier { color: var(–code-blue); }

data-theme=“dark”

.ruby-node { color: var(–code-purple); }

data-theme=“dark”

.ruby-comment { color: var(–color-neutral-400); font-style: italic; }

data-theme=“dark”

.ruby-regexp { color: var(–code-purple); }

data-theme=“dark”

.ruby-value { color: var(–code-orange); }

data-theme=“dark”

.ruby-string { color: var(–code-green); }

/* Emphasis */ em {

text-decoration-color: var(--color-emphasis-decoration);
text-decoration-line: underline;
text-decoration-style: dotted;

}

strong, em {

color: var(--highlight-color);
background-color: var(--color-emphasis-bg);

}

/* Paragraphs */ main p {

line-height: var(--line-height-relaxed);
font-weight: 400;
margin-bottom: var(--space-4);

}

/* Preformatted Text */ main pre {

margin: 1.2em 0.5em;
padding: 1em;
font-size: 0.8em;

}

/* Horizontal Rules */ main hr {

margin: 1.5em 1em;
border: 2px solid var(--border-color);

}

/* Blockquotes */ main blockquote {

margin: 0 2em 1.2em 1.2em;
padding-left: 0.5em;
border-left: 2px solid var(--border-color);

}

/* Lists */ main li > p {

margin: 0.5em;

}

/* Definition Lists */ main dl {

margin: 1em 0.5em;

}

main dt {

line-height: 1.5;
font-weight: bold;

}

main dl.note-list dt {

margin-right: 1em;
float: left;

}

main dl.note-list dt:has(+ dt) {

margin-right: 0.25em;

}

main dl.note-list dt:has(+ dt)::after {

content: ', ';
font-weight: normal;

}

main dd {

margin: 0 0 1em 1em;

}

main dd p:first-child {

margin-top: 0;

}

/* Headers within Main */ main header h2 {

margin-top: 2em;
border-width: 0;
border-top: 4px solid var(--border-color);
font-size: 130%;

}

main header h3 {

margin: 2em 0 1.5em;
border-width: 0;
border-top: 3px solid var(--border-color);
font-size: 120%;

}

/* Utility Classes */ .hide { display: none !important; } .initially-hidden { display: none; }

/* Screen reader only */ .sr-only {

position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;

}

/* 10. Right Sidebar - Table of Contents */ aside.table-of-contents {

grid-area: toc;
align-self: start;
position: sticky;
top: var(--layout-header-height);
padding: var(--space-8) var(--space-6);
border: none;
border-left: 1px solid var(--border-color);
font-size: var(--font-size-base);

}

aside.table-of-contents * {

border-right: none !important;
outline: none !important;

}

/* Hide TOC on mobile/tablet */ @media (max-width: 1279px) {

aside.table-of-contents {
  display: none;
}

body.has-toc {
  grid-template-columns: minmax(var(--layout-sidebar-width-min), var(--layout-sidebar-width-max)) 1fr;
  grid-template-areas:
    "header header"
    "nav main"
    "footer footer";
}

}

/* Tablet adjustments (between mobile and desktop) */ @media (min-width: 768px) and (max-width: 1023px) {

nav {
  width: 240px;
}

header.top-navbar {
  padding: 0 var(--space-6);
}

main {
  padding: var(--space-8) var(--space-6);
  max-width: 100%;
}

}

.table-of-contents h3 {

font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin: 0 0 var(--space-5) 0;
color: var(--color-text-primary);

}

.table-of-contents ul {

margin: 0;
padding: 0;
list-style: none;

}

.table-of-contents ul ul {

margin-top: var(--space-3);
margin-left: var(--space-5);
border-left: 1px solid var(--border-color);
padding-left: var(--space-4);

}

.table-of-contents li {

margin-bottom: var(--space-3);

}

.table-of-contents a {

display: block;
color: var(--color-text-secondary);
text-decoration: none;
transition: color var(--transition-fast);
line-height: var(--line-height-relaxed);
word-wrap: break-word;
overflow-wrap: break-word;
hyphens: auto;

}

.table-of-contents a:hover {

color: var(--color-link-hover);

}

.table-of-contents a.active {

color: var(--color-accent-primary);
font-weight: var(--font-weight-medium);

}

/* Method Details */ main .method-source-code {

visibility: hidden;
max-height: 0;
overflow: auto;
transition: max-height var(--transition-base), visibility var(--transition-base);

}

main .method-source-code pre {

border-color: var(--source-code-toggle-color);

}

main .method-source-code.active-menu {

visibility: visible;
max-height: 100vh;

}

main .method-description .method-calls-super {

color: var(--text-color);
font-weight: bold;

}

main .method-detail {

margin-bottom: 2.5em;

}

main .method-detail:target {

margin-left: calc(-1 * var(--space-5));
padding-left: calc(var(--space-5) / 2);
border-left: calc(var(--space-5) / 2) solid var(--border-color);

}

main .method-header {

display: inline-block;

}

main .method-heading {

position: relative;
font-family: var(--font-code);
font-size: var(--font-size-lg);
font-weight: var(--font-weight-semibold);
margin-bottom: var(--space-3);

}

main .method-heading .method-name {

color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);

}

main .method-heading .method-args {

color: var(--color-text-secondary);
font-weight: var(--font-weight-normal);

}

main .method-heading::after {

content: '¶';
position: absolute;
visibility: hidden;
color: var(--highlight-color);
font-size: 0.5em;

}

main .method-heading:hover::after {

visibility: visible;

}

main .method-controls {

line-height: 20px;
float: right;
color: var(--source-code-toggle-color);
cursor: pointer;

}

main .method-description, main .aliases {

margin-top: 0.75em;
color: var(--text-color);

}

main .aliases {

padding-top: 4px;
font-style: italic;
cursor: default;

}

main .aliases a {

color: var(--secondary-highlight-color);

}

main .mixin-from {

font-size: 80%;
font-style: italic;
margin-bottom: 0.75em;

}

main .method-description ul {

margin-left: 1.5em;

}

main attribute-method-details .method-detail:hover {

background-color: transparent;
cursor: default;

}

main .attribute-access-type {

text-transform: uppercase;

}

/* Small screen adjustments */ @media (max-width: 480px) {

nav {
  width: 85%;
  max-width: 320px;
}

main {
  margin: 0;
  padding: var(--space-4);
  max-width: 100%;
}

table {
  display: block;
  overflow-x: auto;
  white-space: nowrap;
}

main .method-controls {
  margin-top: 10px;
  float: none;
}

}

/* 11. Search Modal (Mobile) */ .search-modal {

position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: var(--z-modal);
display: none;

}

.search-modal:not() {

display: flex;
align-items: flex-start;
justify-content: center;
padding: var(--space-16) var(--space-4);

}

/* Reduce padding on very small screens */ @media (max-width: 420px) {

.search-modal:not([hidden]) {
  padding: var(--space-4) var(--space-3);
}

.search-modal-content {
  border-radius: var(--radius-md);
}

.search-modal-header {
  padding: var(--space-3);
}

.search-modal-body {
  padding: var(--space-3);
}

.search-modal-form input {
  font-size: var(--font-size-base);
  min-width: 0; /* Allow input to shrink */
}

.search-modal-form {
  gap: var(--space-2);
}

.search-modal-close {
  padding: var(--space-1) var(--space-3);
  font-size: 0.75rem;
}

}

.search-modal-backdrop {

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--color-overlay);
z-index: 1;

}

.search-modal-content {

position: relative;
z-index: 2;
background: var(--color-background-primary);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 600px;
max-height: 80vh;
display: flex;
flex-direction: column;

}

.search-modal-header {

padding: var(--space-6);
border-bottom: 1px solid var(--color-border-default);

}

.search-modal-form {

display: flex;
align-items: center;
gap: var(--space-3);

}

.search-modal-icon {

font-size: 1.5rem;
color: var(--color-text-secondary);
flex-shrink: 0;

}

.search-modal-form input {

flex: 1;
border: none;
outline: none;
background: transparent;
font-size: var(--font-size-lg);
color: var(--color-text-primary);
padding: 0;

}

.search-modal-form input::placeholder {

color: var(--color-text-tertiary);

}

.search-modal-close {

padding: var(--space-2) var(--space-4);
background: var(--color-background-secondary);
border: 1px solid var(--color-border-default);
border-radius: var(--radius-md);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
cursor: pointer;
transition: background var(--transition-fast), border-color var(--transition-fast);
flex-shrink: 0;

}

.search-modal-close:hover {

background: var(--color-background-tertiary);
border-color: var(--color-border-default);

}

.search-modal-body {

padding: var(--space-6);
overflow-y: auto;
flex: 1;

}

.search-modal-empty {

text-align: center;
color: var(--color-text-tertiary);
padding: var(--space-12) 0;

}

.search-modal-results {

list-style: none;
margin: 0;
padding: 0;

}

.search-modal-results.initially-hidden {

display: block !important; /* Override initially-hidden */

}

.search-modal-results li {

padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--transition-fast);
margin-bottom: var(--space-2);

}

.search-modal-results li:hover {

background: var(--color-background-secondary);

}

.search-modal-results a {

color: var(--color-text-primary);

}

.search-modal-results .search-match {

margin: 0;
font-size: var(--font-size-base);

}

.search-modal-results .search-match a {

text-decoration: none;

}

.search-modal-results .search-namespace {

margin: var(--space-1) 0 0 0;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);

}

.search-modal-results .search-snippet {

margin: var(--space-1) 0 0 0;
font-size: var(--font-size-sm);
color: var(--color-text-tertiary);

}