jamdesk 1.0.0

package/vendored/themes/pulsar/variables.css

@@ -0,0 +1,1009 @@
+/**
+ * Pulsar Theme - CSS Variables
+ * Clean, modern documentation theme with Inter font and blue accent
+ */
+
+:root {
+  /* Border radius - rounded style */
+  --radius-sm: 0.375rem;   /* 6px */
+  --radius-md: 0.5rem;     /* 8px */
+  --radius-lg: 0.75rem;    /* 12px */
+  --radius-xl: 1rem;       /* 16px */
+  --radius-2xl: 1.5rem;    /* 24px */
+  --radius-full: 9999px;
+
+  /* Light theme colors */
+  --color-bg-primary: #ffffff;
+  --color-bg-secondary: #f8fafc;
+  --color-bg-tertiary: #f1f5f9;
+  --color-bg-hover: #e2e8f0;
+
+  --color-border: #e2e8f0;
+  --color-border-hover: #cbd5e1;
+  --border-width: 0.5px;
+
+  --color-text-primary: #0a0a0a;
+  --color-text-secondary: #404144;
+  --color-text-tertiary: #525252;
+  --color-text-muted: #737373;
+  --color-marker: #94a3b8;
+
+  --color-accent: #3b82f6;
+  --color-accent-hover: #2563eb;
+  --color-accent-light: #dbeafe;
+  --color-accent-text: #1d4ed8;
+
+  /* Code block colors - light */
+  --color-code-bg: #f8fafc;
+  --color-code-border: var(--color-border);
+  --color-code-text: #1e293b;
+
+  /* Note callout colors - light (blue) */
+  --color-note-bg: #eff6ff;
+  --color-note-border: #bfdbfe;
+  --color-note-text: #1e40af;
+
+  /* Info callout colors - light (grey) */
+  --color-info-bg: #fdfdfd;
+  --color-info-border: #ebebeb;
+  --color-info-text: #1a1a1a;
+
+  --color-warning-bg: #fffbeb;
+  --color-warning-border: #fde68a;
+  --color-warning-text: #78350f;
+
+  --color-error-bg: #fef2f2;
+  --color-error-border: #fecaca;
+  --color-error-text: #991b1b;
+
+  --color-success-bg: #f0fdf4;
+  --color-success-border: #bbf7d0;
+  --color-success-text: #166534;
+
+  /* Layout constraints */
+  --layout-max-width: none;  /* Full browser width for Pulsar theme */
+  --content-max-width: 780px; /* Centered content column width */
+  --sidebar-item-spacing: 4px; /* Vertical spacing between sidebar nav items */
+  --right-column-width: 288px; /* TOC width (w-72 = 18rem = 288px) */
+  --code-panels-width: 460px; /* API code panels width */
+
+  /* Shadows - Pulsar theme uses no shadows for a cleaner look */
+  --shadow-sm: none;
+  --shadow-md: none;
+  --shadow-lg: none;
+  --shadow-xl: none;
+  --shadow-2xl: none;
+
+  /* ===== TYPOGRAPHY SYSTEM ===== */
+
+  /* Content Typography (Prose) */
+  --prose-h1-size: 30px;
+  --prose-h1-line-height: 1.25;
+  --prose-h1-weight: 600;
+  --prose-h1-tracking: -0.02em;
+
+  --prose-h2-size: 24px;
+  --prose-h2-line-height: 1.35;
+  --prose-h2-weight: 500;
+  --prose-h2-tracking: -0.02em;
+
+  --prose-h3-size: 20px;
+  --prose-h3-line-height: 1.4;
+  --prose-h3-weight: 500;
+  --prose-h3-tracking: -0.01em;
+
+  --prose-h4-size: 18px;
+  --prose-h4-line-height: 1.5;
+  --prose-h4-weight: 500;
+  --prose-h4-tracking: -0.01em;
+
+  --prose-body-size: 16px;
+  --prose-body-line-height: 1.625;
+  --prose-body-weight: 300;
+  --prose-body-tracking: 0;
+
+  --prose-small-size: 14px;
+  --prose-small-line-height: 1.5;
+  --prose-small-weight: 400;
+
+  /* Navigation Typography */
+  --nav-anchor-size: 14px;
+  --nav-anchor-line-height: 1.5;
+  --nav-anchor-weight: 500;
+
+  --nav-group-size: 12px;
+  --nav-group-line-height: 1.5;
+  --nav-group-weight: 600;
+  --nav-group-tracking: 0.02em;
+
+  --nav-page-size: 14px;
+  --nav-page-line-height: 1.5;
+  --nav-page-weight: 300;
+  --nav-page-active-weight: 500;
+
+  --nav-tab-size: 14px;
+  --nav-tab-line-height: 1.5;
+  --nav-tab-weight: 500;
+
+  --nav-breadcrumb-size: 14px;
+  --nav-breadcrumb-line-height: 1.5;
+  --nav-breadcrumb-weight: 400;
+
+  /* Code Typography */
+  --code-inline-size: 14px;
+  --code-block-size: 13px;
+  --code-block-line-height: 1.6;
+  --code-panel-size: 11.5px;
+  --code-panel-line-height: 1.5;
+
+  /* UI Typography */
+  --ui-badge-size: 10px;
+  --ui-badge-line-height: 1.4;
+  --ui-badge-weight: 700;
+  --ui-badge-tracking: 0.02em;
+
+  --ui-tag-size: 10px;
+  --ui-tag-line-height: 1.4;
+  --ui-tag-weight: 600;
+
+  --ui-tag-small-size: 9px;
+  --ui-tag-small-weight: 600;
+
+  --ui-kbd-size: 12px;
+  --ui-kbd-weight: 500;
+
+  --ui-label-size: 12px;
+  --ui-label-weight: 500;
+
+  --ui-button-size: 14px;
+  --ui-button-weight: 500;
+
+  /* Code box height calculations for sidebar */
+  --code-box-font-size: 11.5px;
+  --code-box-line-height: 1.5;
+  --code-box-line-height-px: calc(var(--code-box-font-size) * var(--code-box-line-height)); /* ~17.25px */
+  --code-box-min-lines: 5;
+  --code-box-max-lines: 25;
+  --code-box-min-height: calc(var(--code-box-line-height-px) * var(--code-box-min-lines)); /* ~86px */
+  --code-box-max-height: calc(var(--code-box-line-height-px) * var(--code-box-max-lines)); /* ~431px */
+  --code-box-header-height: 60px; /* Approximate header height (tabs + title) */
+  --code-box-padding: 32px; /* 16px top + 16px bottom */
+}
+
+
+/* ===== PULSAR THEME TYPOGRAPHY STYLES ===== */
+
+/* Prose body */
+.prose {
+  font-family: 'Inter', sans-serif;
+  font-size: var(--prose-body-size);
+  line-height: var(--prose-body-line-height);
+  font-weight: var(--prose-body-weight);
+  letter-spacing: var(--prose-body-tracking);
+}
+
+/* Prose headings */
+.prose h1,
+h1 {
+  font-size: var(--prose-h1-size);
+  line-height: var(--prose-h1-line-height);
+  font-weight: var(--prose-h1-weight);
+  letter-spacing: var(--prose-h1-tracking);
+  color: var(--color-text-primary);
+}
+
+.prose h2 {
+  font-size: var(--prose-h2-size);
+  line-height: var(--prose-h2-line-height);
+  font-weight: var(--prose-h2-weight);
+  letter-spacing: var(--prose-h2-tracking);
+  color: var(--color-text-primary);
+}
+
+.prose h3 {
+  font-size: var(--prose-h3-size);
+  line-height: var(--prose-h3-line-height);
+  font-weight: var(--prose-h3-weight);
+  letter-spacing: var(--prose-h3-tracking);
+  color: var(--color-text-primary);
+}
+
+.prose h4 {
+  font-size: var(--prose-h4-size);
+  line-height: var(--prose-h4-line-height);
+  font-weight: var(--prose-h4-weight);
+  letter-spacing: var(--prose-h4-tracking);
+  color: var(--color-text-primary);
+}
+
+/* Pulsar inline code styling */
+.prose code:not([class*="language-"]) {
+  background-color: var(--color-code-bg);
+  color: var(--color-code-text);
+  padding: 0.125rem 0.375rem;
+  border-radius: var(--radius-sm);
+  font-family: 'JetBrains Mono', monospace;
+  font-size: var(--code-inline-size);
+}
+
+/* Pulsar code block styling - adds border to match other UI elements */
+.prose pre.shiki {
+  border: 0.5px solid var(--color-border);
+  background-color: var(--color-code-bg);
+}
+
+/* Navigation anchor styling for Pulsar theme */
+[data-nav-anchor] {
+  padding: 0 0 8px 0;
+  position: relative;
+  margin-left: 24px;
+}
+
+[data-nav-anchor]:first-of-type {
+  margin-top: 0;
+}
+
+[data-nav-anchor]::before {
+  content: '';
+  position: absolute;
+  top: -8px;
+  left: -12px;
+  right: 24px;
+  bottom: 8px;
+  border-radius: var(--radius-md);
+  background-color: transparent;
+  transition: background-color 0.2s;
+  z-index: -1;
+}
+
+[data-nav-anchor][data-active="false"]:hover::before {
+  background-color: var(--color-bg-tertiary);
+}
+
+/* Active nav anchor icons use solid variant for visual emphasis */
+[data-nav-anchor][data-active="true"] [class*="fa-"]:not(.fa-brands) {
+  font-weight: 900 !important;
+}
+
+/* Navigation page link styling for Pulsar theme */
+/* Uses left border line style matching TOC: border-l-2 -ml-px on links */
+/* Link border overlaps container's 1px border (container has padding-left: 12px) */
+.sidebar-scroll ul li a {
+  position: relative;
+  font-weight: var(--nav-page-weight) !important;
+  border-left: 2px solid transparent;
+  border-radius: 0 !important; /* Ensure straight border line, no curves */
+  margin-left: -13px; /* Pull back 12px padding + 1px to overlap border */
+  padding-left: 11px; /* Restore visual spacing (13px - 2px border = 11px) */
+  transition: border-color 0.2s, color 0.2s;
+}
+
+/* Group headers - no border styling, straight edges for border-left line */
+.sidebar-scroll .nav-group-l1 {
+  position: relative;
+  font-weight: var(--nav-page-weight) !important;
+  border-radius: 0 !important;
+}
+
+/* Active nav links - primary color border and text */
+.sidebar-scroll ul li a.nav-active {
+  font-weight: var(--nav-page-active-weight) !important;
+  border-left-color: var(--color-primary) !important;
+  color: var(--color-primary) !important;
+}
+
+/* Hover state - show border line (links only) */
+.sidebar-scroll ul li a:hover:not(.nav-active) {
+  border-left-color: var(--color-border-hover);
+  color: var(--color-text-primary);
+}
+
+/* Tab nav links - match sidebar nav border-radius (no rounding) */
+body[data-theme="pulsar"] .nav-tab-link {
+  border-radius: 0 !important;
+}
+
+/* Horizontal rule (divider) styling for Pulsar theme */
+.prose hr,
+hr {
+  border: none;
+  border-top: var(--border-width) solid var(--color-border);
+  margin: 2rem 0;
+}
+
+/* Hide divider under anchors in sidebar and add spacing */
+.sidebar-scroll nav > .mx-4.border-t {
+  display: none;
+}
+
+/* Add spacing below anchors since divider is hidden */
+.sidebar-scroll nav > .flex.flex-col.gap-1.px-4.pt-4 {
+  padding-bottom: 2rem;
+}
+
+/* Pulsar theme: smaller, more rounded theme toggle (desktop) */
+@media (min-width: 1024px) {
+  [data-theme-toggle] {
+    gap: 1px !important;
+    padding: 1px !important;
+    border-radius: 9999px !important;
+  }
+
+  [data-theme-toggle] button {
+    width: 16px !important;
+    height: 16px !important;
+    padding: 0 !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: center !important;
+    border-radius: 9999px !important;
+  }
+
+  [data-theme-toggle] button i {
+    font-size: 8px !important;
+  }
+}
+
+/* Mobile sidebar uses ThemeToggleCycle (single icon button) - no overrides needed */
+
+.dark {
+  /* Dark theme colors */
+  --color-bg-primary: #0F0B0B;
+  --color-bg-secondary: #18181b;
+  --color-bg-tertiary: #27272a;
+  --color-bg-hover: #475569;
+
+  --color-border: #334155;
+  --color-border-hover: #475569;
+  --border-width: 0.5px;
+
+  --color-text-primary: #ffffff;
+  --color-text-secondary: #b8bbbe;
+  --color-text-tertiary: #8a8d90;
+  --color-text-muted: #6a6d70;
+  --color-marker: #64748b;
+
+  --color-accent: #3b82f6;
+  --color-accent-hover: #60a5fa;
+  --color-accent-light: #1e3a5f;
+  --color-accent-text: #93c5fd;
+
+  /* Code block colors - dark */
+  --color-code-bg: #0f172a;
+  --color-code-border: var(--color-border);
+  --color-code-text: #e2e8f0;
+
+  /* Note callout colors - dark (blue) */
+  --color-note-bg: rgba(59, 130, 246, 0.1);
+  --color-note-border: rgba(59, 130, 246, 0.3);
+  --color-note-text: #93c5fd;
+
+  /* Info callout colors - dark (grey) */
+  --color-info-bg: rgba(255, 255, 255, 0.05);
+  --color-info-border: rgba(255, 255, 255, 0.15);
+  --color-info-text: #e5e5e5;
+
+  --color-warning-bg: rgba(251, 191, 36, 0.1);
+  --color-warning-border: rgba(251, 191, 36, 0.3);
+  --color-warning-text: #fde68a;
+
+  --color-error-bg: rgba(239, 68, 68, 0.1);
+  --color-error-border: rgba(239, 68, 68, 0.3);
+  --color-error-text: #fca5a5;
+
+  --color-success-bg: rgba(34, 197, 94, 0.1);
+  --color-success-border: rgba(34, 197, 94, 0.3);
+  --color-success-text: #86efac;
+}
+
+/* ===== CODE PANELS SIDEBAR STYLING ===== */
+
+/*
+ * Code boxes dynamically size to their content:
+ * - Size to content up to 25 lines max, then scroll internally
+ * - When viewport shrinks, bottom panel shrinks first (to 5 lines min), then top
+ * - Sidebar container doesn't scroll - each panel handles its own scrolling
+ */
+.code-panels-sidebar {
+  overflow-y: hidden !important;
+}
+
+/* Code boxes in sidebar use dynamic heights controlled by JS */
+.code-panels-sidebar [data-code-panel] {
+  flex: 0 0 auto !important;
+  /* Allow internal scrolling when content exceeds panel height */
+  overflow: hidden !important;
+}
+
+/* Code content area scrolls when content exceeds visible height */
+/* Background must match code panel bg so scrollbar area blends in */
+.code-panels-sidebar [data-code-panel] > div[class*="grid"] {
+  padding-bottom: 0 !important;
+  margin-bottom: 0 !important;
+  background-color: var(--code-panel-bg, #0d1117) !important;
+}
+
+/* Consistent 16px padding on all sides */
+.code-panels-sidebar [data-code-panel] pre {
+  padding: 16px !important;
+  margin-bottom: 0 !important;
+}
+
+.code-panels-sidebar [data-code-panel] pre.shiki {
+  padding: 16px !important;
+  margin-bottom: 0 !important;
+  /* Let parent grid container control background so scrollbar area matches */
+  background: transparent !important;
+  background-color: transparent !important;
+}
+
+/* Hide native scrollbar on tabs container - using custom scrollbar instead */
+.code-panels-sidebar [data-code-panel] .code-panel-tabs-scroll {
+  scrollbar-width: none; /* Firefox */
+  -ms-overflow-style: none; /* IE/Edge */
+}
+
+.code-panels-sidebar [data-code-panel] .code-panel-tabs-scroll::-webkit-scrollbar {
+  display: none; /* Chrome/Safari */
+}
+
+/* Transparent scrollbar background in code panels */
+.code-panels-sidebar [data-code-panel] ::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.code-panels-sidebar [data-code-panel] ::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.code-panels-sidebar [data-code-panel] ::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-sm);
+}
+
+.code-panels-sidebar [data-code-panel] ::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.3);
+}
+
+/* Firefox scrollbar styling */
+.code-panels-sidebar [data-code-panel] * {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
+}
+
+/* ===== PULSAR THEME SIDEBAR ===== */
+
+/* Add subtle border between sidebar and main content */
+aside {
+  border-right: 0.5px solid var(--color-border) !important;
+}
+
+/* Reduce whitespace in nav section */
+.sidebar-scroll nav {
+  padding-top: 8px !important;
+}
+
+.sidebar-scroll nav > div:first-child {
+  padding-top: 0 !important;
+}
+
+/* Vertical spacing between sidebar navigation items - all levels */
+.sidebar-scroll .sidebar-nav-groups {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--sidebar-item-spacing) !important;
+  padding-top: 0 !important;
+  padding-bottom: 2rem !important;
+}
+
+.sidebar-scroll .sidebar-nav-groups > div {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--sidebar-item-spacing) !important;
+  margin-top: 24px !important;
+}
+
+.sidebar-scroll .sidebar-nav-groups > div:first-child {
+  margin-top: 0 !important;
+}
+
+/* Sidebar positioning - full height from top with left padding for symmetry */
+@media (min-width: 1024px) {
+  .sidebar-scroll {
+    top: 0 !important;
+    height: 100vh !important;
+    padding-left: 1rem !important;
+  }
+
+  /* Add space after logo to align search/nav with breadcrumbs and TOC */
+  body[data-theme="pulsar"] .sidebar-scroll > div:first-child {
+    margin-bottom: 0.75rem !important;
+  }
+}
+
+.sidebar-scroll ul {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--sidebar-item-spacing) !important;
+}
+
+/* Border on ul elements - consecutive pages are grouped into single ul */
+/* Border aligns with the start of group name text */
+/* Pseudo-element extends border down to cover gap to next element */
+.sidebar-scroll .sidebar-nav-groups ul {
+  position: relative;
+  border-left: 1px solid var(--color-border);
+  padding-left: 12px;
+}
+
+.sidebar-scroll .sidebar-nav-groups ul::after {
+  content: '';
+  position: absolute;
+  left: -1px;
+  bottom: 0;
+  width: 1px;
+  height: var(--sidebar-item-spacing);
+  background-color: var(--color-border);
+}
+
+/* Last ul before a level 0 group should not extend (no next sibling in same group) */
+.sidebar-scroll .sidebar-nav-groups > div > div > ul:last-child::after {
+  display: none;
+}
+
+/* Level 1 nested group headers get border to connect with elements above/below */
+/* Pseudo-elements extend border up and down to cover gaps */
+.sidebar-scroll .sidebar-nav-groups .nav-group-l1 {
+  position: relative;
+  border-left: 1px solid var(--color-border);
+  margin-left: 0;
+  padding-left: 12px;
+}
+
+.sidebar-scroll .sidebar-nav-groups .nav-group-l1::before {
+  content: '';
+  position: absolute;
+  left: -1px;
+  top: calc(var(--sidebar-item-spacing) * -1);
+  width: 1px;
+  height: var(--sidebar-item-spacing);
+  background-color: var(--color-border);
+}
+
+.sidebar-scroll .sidebar-nav-groups .nav-group-l1::after {
+  content: '';
+  position: absolute;
+  left: -1px;
+  bottom: 0;
+  width: 1px;
+  height: var(--sidebar-item-spacing);
+  background-color: var(--color-border);
+}
+
+/* Last nav-group-l1 in a group should not extend down */
+.sidebar-scroll .sidebar-nav-groups > div > div > div:last-child .nav-group-l1::after {
+  display: none;
+}
+
+/* Nested group containers */
+.sidebar-scroll nav div div {
+  display: flex !important;
+  flex-direction: column !important;
+  gap: var(--sidebar-item-spacing) !important;
+}
+
+/* ===== PULSAR THEME DEFAULT ICON STYLE ===== */
+/*
+ * The pulsar theme uses FontAwesome light variant (fa-light) by default.
+ * This gives icons a thinner, more refined appearance.
+ *
+ * FontAwesome uses font-weight to switch variants:
+ * - fa-light:   font-weight: 300
+ * - fa-regular: font-weight: 400
+ * - fa-solid:   font-weight: 900
+ *
+ * Excludes brand icons (.fa-brands) which have their own fixed styling.
+ */
+[class*="fa-"]:not(.fa-brands) {
+  font-weight: 300 !important;
+}
+
+/* ===== PULSAR THEME API PARAMETER STYLING ===== */
+
+/*
+ * Parameter fields in API documentation:
+ * - Parameter name: plain monospace text (no badge)
+ * - Type (String, integer, etc): styled badge
+ * - Required indicator: styled badge with distinct color
+ */
+
+/* Parameter name - plain text, no badge styling */
+.param-name {
+  background: transparent !important;
+  background-color: transparent !important;
+  border: none !important;
+  padding: 0 !important;
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  color: var(--color-text-primary);
+}
+
+/* Type badge styling - subtle gray background */
+.param-type-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  border-radius: var(--radius-sm);
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-muted);
+}
+
+/* Required badge styling - red tint to indicate importance */
+.param-required-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 2px 8px;
+  font-size: 11px;
+  font-weight: 500;
+  font-family: var(--font-mono, ui-monospace, monospace);
+  border-radius: var(--radius-sm);
+  background-color: rgba(239, 68, 68, 0.1);
+  color: #ef4444;
+}
+
+.dark .param-type-badge {
+  background-color: var(--color-bg-tertiary);
+  color: var(--color-text-secondary);
+}
+
+.dark .param-required-badge {
+  background-color: rgba(239, 68, 68, 0.15);
+  color: #f87171;
+}
+
+/* Parameter divider - thin 0.5px border matching top nav */
+.param-divider {
+  border-bottom: 0.5px solid var(--color-border);
+}
+
+.param-divider:last-child {
+  border-bottom: none;
+}
+
+/* ===== PULSAR THEME BUTTON STYLING ===== */
+/*
+ * Buttons in the Pulsar theme use the primary color from docs.json
+ * instead of the default accent color.
+ */
+
+/* Primary buttons - solid background */
+button[class*="bg-[var(--color-accent)]"],
+a[class*="bg-[var(--color-accent)]"] {
+  background-color: var(--color-primary) !important;
+}
+
+/* Button hover states */
+button[class*="bg-[var(--color-accent)]"]:hover,
+a[class*="bg-[var(--color-accent)]"]:hover {
+  opacity: 0.9;
+}
+
+/* ===== PULSAR THEME TAB ACTIVE INDICATOR ===== */
+/* Active tab underline uses primary color */
+header nav span[class*="bg-[var(--color-accent)]"] {
+  background-color: var(--color-primary) !important;
+}
+
+/* ===== PULSAR THEME CODE PANEL ALIGNMENT ===== */
+/* Align code panel right edge with header content edge */
+@media (min-width: 1024px) {
+  .code-panels-sidebar {
+    width: 460px !important;
+    padding-right: 16px;
+  }
+}
+
+/* ===== PULSAR THEME MEDIA STYLING ===== */
+/* Remove border, padding, and rounded corners from images and videos */
+.prose img,
+.prose video {
+  border: none !important;
+  border-radius: 0 !important;
+  padding: 0 !important;
+}
+
+/* ===== PULSAR THEME HTTP METHOD BADGES ===== */
+/* Pill-shaped badges for GET/POST/PUT/PATCH/DELETE in sidebar nav */
+.sidebar-scroll a > span.w-12.text-center {
+  border-radius: 9999px !important;
+}
+
+/* ===== PULSAR FULL-WIDTH LAYOUT ===== */
+/*
+ * Full-browser-width layout:
+ * - Left sidebar fixed to left edge (already done via sidebar-scroll)
+ * - Content centered at 780px max-width
+ * - Right column (TOC/code panels) fixed to right edge
+ *
+ * This creates a layout where all three columns are edge-anchored,
+ * with natural spacing that grows on ultra-wide screens.
+ *
+ * We target existing DOM elements using specific selectors rather than
+ * adding new classes, making this a CSS-only change.
+ */
+
+/* Hide header on desktop only when it has no tabs - Pulsar uses sidebar-logo layout so header only has hamburger on mobile */
+@media (min-width: 1024px) {
+  body[data-theme="pulsar"] header[data-has-tabs="false"] {
+    display: none !important;
+  }
+}
+
+/* Header full-width - for mobile view where header is still shown */
+body[data-theme="pulsar"] header > div {
+  max-width: none !important;
+  margin: 0 24px !important;
+}
+
+/* Hide theme toggle in header - it's in the sidebar for Pulsar */
+body[data-theme="pulsar"] header [data-theme-toggle] {
+  display: none !important;
+}
+
+/* Desktop xl+ layout - three columns edge-anchored */
+@media (min-width: 1280px) {
+  /*
+   * Content scroll container - center content within it
+   * Targets: #content-scroll-container in page.tsx, ApiPage.tsx, PanelWrapper.tsx
+   */
+  body[data-theme="pulsar"] #content-scroll-container {
+    display: flex;
+    justify-content: center;
+    /* Hide scrollbar but keep scrollable */
+    scrollbar-width: none; /* Firefox */
+    -ms-overflow-style: none; /* IE/Edge */
+  }
+
+  body[data-theme="pulsar"] #content-scroll-container::-webkit-scrollbar {
+    display: none; /* Chrome, Safari, Opera */
+  }
+
+  /*
+   * Article content - constrain to max-width
+   * The article is the direct child of the scroll container
+   */
+  body[data-theme="pulsar"] #content-scroll-container > article,
+  body[data-theme="pulsar"] #content-scroll-container > .api-page-layout {
+    max-width: var(--content-max-width, 780px);
+    width: 100%;
+  }
+
+  /*
+   * TOC sidebar - fixed to right edge
+   * Targets: the aside.toc-scroll in page.tsx and PanelWrapper.tsx
+   * Overrides Tailwind: hidden xl:block w-72 flex-shrink-0 xl:h-full xl:overflow-y-auto xl:ml-0.5 pr-2
+   */
+  body[data-theme="pulsar"] #main-content > div.flex > aside.toc-scroll,
+  body[data-theme="pulsar"] aside.toc-scroll {
+    position: fixed !important;
+    right: 0 !important;
+    top: 57px !important; /* Below header */
+    height: calc(100vh - 57px) !important;
+    width: var(--right-column-width, 288px) !important;
+    z-index: 30;
+    background-color: var(--color-bg-primary);
+    padding: 0 1rem 0 0.5rem; /* No vertical padding - inner div handles it */
+    margin-left: 0 !important;
+    overflow-y: auto;
+  }
+
+
+  /*
+   * Code panels sidebar - fixed to right edge (wider)
+   * Targets: .code-panels-sidebar in ApiPage.tsx
+   * Overrides Tailwind: lg:ml-0.5
+   */
+  body[data-theme="pulsar"] .code-panels-sidebar {
+    position: fixed !important;
+    right: 0 !important;
+    top: 0 !important; /* Start at top when header is hidden */
+    height: 100vh !important;
+    width: var(--code-panels-width, 460px) !important;
+    z-index: 30;
+    background-color: var(--color-bg-primary);
+    margin-left: 0 !important;
+    overflow-y: auto;
+    box-sizing: border-box;
+    padding: 2.5rem 1rem 1rem 0; /* Match article py-10, align right edge with TOC */
+  }
+
+  /* When header has tabs (visible), push code panels down */
+  body[data-theme="pulsar"]:has(header[data-has-tabs="true"]) .code-panels-sidebar {
+    top: 57px !important; /* Header height */
+    height: calc(100vh - 57px) !important;
+  }
+
+  /*
+   * Panel sidebar content wrapper - fixed positioning
+   * Targets: .panel-sidebar in PanelWrapper.tsx
+   */
+  body[data-theme="pulsar"] .panel-sidebar {
+    position: fixed !important;
+    right: 0 !important;
+    top: 0 !important;
+    height: 100vh !important;
+    width: var(--right-column-width, 288px) !important;
+    z-index: 30;
+    background-color: var(--color-bg-primary);
+    overflow-y: auto;
+  }
+
+  /* When header has tabs (visible), push panel sidebar down */
+  body[data-theme="pulsar"]:has(header[data-has-tabs="true"]) .panel-sidebar {
+    top: 57px !important; /* Header height */
+    height: calc(100vh - 57px) !important;
+  }
+
+  /*
+   * Reserve space for fixed right column
+   * The parent flex container needs padding to prevent content overlapping fixed columns
+   * Use :has() to only add padding when the right column actually exists
+   */
+
+  /* TOC pages: add padding when aside.toc-scroll exists */
+  body[data-theme="pulsar"] #main-content > div.flex:has(aside.toc-scroll) {
+    padding-right: var(--right-column-width, 288px);
+  }
+
+  /* API pages: add padding for wider code panels */
+  body[data-theme="pulsar"] #main-content > div.flex:has(.code-panels-sidebar) {
+    padding-right: var(--code-panels-width, 460px);
+  }
+
+  /* Panel pages: add padding when .panel-sidebar exists */
+  body[data-theme="pulsar"] #main-content > div.flex:has(.panel-sidebar) {
+    padding-right: var(--right-column-width, 288px);
+  }
+}
+
+/* ===== PULSAR MOBILE RESPONSIVE STYLES ===== */
+
+/* Phase 1: Responsive Typography */
+@media (max-width: 639px) {
+  :root {
+    --prose-h1-size: 24px;
+    --prose-h2-size: 20px;
+    --prose-h3-size: 18px;
+    --prose-h4-size: 16px;
+  }
+}
+
+@media (min-width: 640px) and (max-width: 1023px) {
+  :root {
+    --prose-h1-size: 27px;
+    --prose-h2-size: 22px;
+  }
+}
+
+/* Phase 2: Header Responsive Margins */
+@media (max-width: 639px) {
+  body[data-theme="pulsar"] header > div {
+    margin: 0 16px !important;
+  }
+}
+
+/* Phase 3: Touch Targets for Sidebar */
+@media (max-width: 1023px) {
+  :root {
+    --sidebar-item-spacing: 6px;
+  }
+
+  .sidebar-scroll ul li a {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    min-height: 44px;
+  }
+
+  .sidebar-scroll .nav-group-l1 {
+    padding-top: 10px !important;
+    padding-bottom: 10px !important;
+    min-height: 44px;
+  }
+}
+
+/* Phase 4: API Parameter Overflow */
+@media (max-width: 639px) {
+  .param-name {
+    font-size: 13px;
+    word-break: break-word;
+  }
+
+  .param-type-badge,
+  .param-required-badge {
+    font-size: 10px;
+    padding: 1px 6px;
+  }
+
+  /* Reduce nesting indent on mobile */
+  .pl-4.border-l-2 {
+    padding-left: 12px !important;
+  }
+}
+
+/* Phase 6: Tablet Layout Adjustments */
+@media (min-width: 768px) and (max-width: 1279px) {
+  body[data-theme="pulsar"] {
+    --content-max-width: 680px;
+  }
+}
+
+/* ===== PULSAR TABLET CODE PANELS (1024-1279px) ===== */
+/* Between lg and xl breakpoints, Pulsar keeps code panels inline (like mobile)
+ * because the fixed three-column layout only works at xl (1280px)+.
+ * The JS in ApiPage.tsx uses 1280px breakpoint for Pulsar theme. */
+@media (min-width: 1024px) and (max-width: 1279px) {
+  /* Hide the empty sidebar container */
+  body[data-theme="pulsar"] .code-panels-sidebar {
+    display: none !important;
+  }
+
+  /* Override base.css which hides prose panels at lg+ - Pulsar shows them until xl */
+  body[data-theme="pulsar"] .api-page-layout .prose [data-code-panel] {
+    display: flex !important;
+    flex-direction: column;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  /* Use flexbox ordering to position panels after endpoint badge (match mobile) */
+  body[data-theme="pulsar"] .api-page-layout .prose {
+    display: flex;
+    flex-direction: column;
+  }
+
+  body[data-theme="pulsar"] .api-page-layout .prose > [data-api-endpoint] {
+    order: 0;
+  }
+
+  body[data-theme="pulsar"] .api-page-layout .prose > [data-code-panel] {
+    order: 1;
+  }
+
+  body[data-theme="pulsar"] .api-page-layout .prose > * {
+    order: 2;
+  }
+
+  body[data-theme="pulsar"] .api-page-layout .prose > .openapi-endpoint {
+    order: 0;
+  }
+}
+
+/* Mobile safe area and background fixes */
+@media (max-width: 1023px) {
+  /* Ensure html/body have correct background on mobile */
+  html,
+  body[data-theme="pulsar"] {
+    background-color: var(--color-bg-primary);
+  }
+
+  /* Extend sidebar to cover safe area at top */
+  body[data-theme="pulsar"] .sidebar-scroll {
+    padding-top: env(safe-area-inset-top, 0);
+  }
+
+  /* Make header fully opaque on mobile (no transparency showing through) */
+  body[data-theme="pulsar"] header {
+    background-color: var(--color-bg-primary) !important;
+  }
+
+  /* Ensure content area starts at top with no gap */
+  body[data-theme="pulsar"] > div {
+    min-height: 100vh;
+    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
+  }
+}