rdoc 7.2.0 → 8.1.0

data/lib/rdoc/generator/template/aliki/css/rdoc.css

@@ -68,8 +68,11 @@
   --color-accent-primary: var(--color-primary-600);
   --color-accent-hover: var(--color-primary-700);
   --color-accent-subtle: var(--color-primary-50);
+  --color-title-kind-border: var(--color-primary-200);
   --color-code-bg: #f6f8fa;
   --color-code-border: var(--color-neutral-300);
+  --color-sig-bg: var(--color-neutral-100);
+  --color-sig-border: var(--color-border-default);
   --color-nav-bg: #fff;
   --color-nav-text: var(--color-neutral-700);
   --color-th-background: var(--color-neutral-100);
@@ -201,8 +204,11 @@
   --color-accent-hover: var(--color-primary-400);
   --color-accent-subtle: rgb(235 84 79 / 10%);
   --color-accent-subtle-hover: rgb(235 84 79 / 20%);
+  --color-title-kind-border: rgb(235 84 79 / 35%);
   --color-code-bg: var(--color-neutral-800);
   --color-code-border: var(--color-neutral-700);
+  --color-sig-bg: #211f1e; /* between neutral-900 and neutral-800 */
+  --color-sig-border: var(--color-border-subtle);
   --color-nav-bg: var(--color-neutral-900);
   --color-nav-text: var(--color-neutral-50);
   --color-th-background: var(--color-background-tertiary);
@@ -429,16 +435,35 @@ header.top-navbar {
   z-index: var(--z-fixed);
   background: var(--color-background-primary);
   border-bottom: 1px solid var(--color-border-default);
-  display: flex;
+  display: grid;
+  grid-template-columns:
+    var(--layout-sidebar-width)
+    minmax(0, 1fr);
   align-items: center;
-  justify-content: flex-start;
-  padding: 0 var(--space-6);
-  gap: var(--space-8);
+  padding: 0;
   height: var(--layout-header-height);
   box-shadow: var(--shadow-sm);
 }
 
+body.has-toc header.top-navbar {
+  grid-template-columns:
+    var(--layout-sidebar-width)
+    minmax(0, 1fr)
+    minmax(var(--layout-toc-width-min), var(--layout-toc-width-max));
+}
+
+@media (width <= 1279px) {
+  body.has-toc header.top-navbar {
+    grid-template-columns:
+      var(--layout-sidebar-width)
+      minmax(0, 1fr);
+  }
+}
+
 header.top-navbar .navbar-brand {
+  grid-column: 1;
+  justify-self: start;
+  margin-left: var(--space-6);
   font-size: var(--font-size-xl);
   font-weight: var(--font-weight-semibold);
   color: var(--color-text-primary);
@@ -451,12 +476,23 @@ header.top-navbar .navbar-brand:hover {
 }
 
 header.top-navbar .navbar-search {
+  grid-column: 2;
+  justify-self: center;
+  box-sizing: border-box;
+  width: min(100%, var(--layout-content-max-width));
+  padding: 0 var(--space-8);
+}
+
+header.top-navbar .search-surface {
   position: relative;
-  flex: 0 1 auto;
-  width: var(--layout-search-width);
+  width: min(100%, var(--layout-search-width));
+  margin: 0;
 }
 
 header.top-navbar .navbar-search form {
+  position: relative;
+  box-sizing: border-box;
+  width: 100%;
   margin: 0;
   padding: 0;
 }
@@ -470,11 +506,13 @@ header.top-navbar .navbar-search form {
 
 /* Theme toggle button */
 .theme-toggle {
+  position: absolute;
+  top: 50%;
+  right: var(--space-6);
   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);
@@ -489,13 +527,14 @@ header.top-navbar .navbar-search form {
   line-height: 1;
   width: 2.5rem;
   height: 2.5rem;
+  transform: translateY(-50%);
 }
 
 .theme-toggle:hover {
   background: var(--color-background-secondary);
   border-color: var(--color-accent-primary);
   color: var(--color-accent-primary);
-  transform: scale(1.05);
+  transform: translateY(-50%) scale(1.05);
 }
 
 .theme-toggle:focus {
@@ -505,7 +544,7 @@ header.top-navbar .navbar-search form {
 }
 
 .theme-toggle:active {
-  transform: scale(0.95);
+  transform: translateY(-50%) scale(0.95);
 }
 
 .theme-toggle-icon {
@@ -526,11 +565,15 @@ header.top-navbar .navbar-search form {
     gap: var(--space-4);
   }
 
-  /* Hide desktop search bar on mobile */
-  header.top-navbar .navbar-search-desktop {
+  header.top-navbar .search-surface {
     display: none;
   }
 
+  header.top-navbar .navbar-search {
+    width: auto;
+    padding: 0;
+  }
+
   /* Show mobile search icon */
   .navbar-search-mobile {
     display: flex;
@@ -558,10 +601,24 @@ header.top-navbar .navbar-search form {
     text-overflow: ellipsis;
     white-space: nowrap;
   }
+
+  .theme-toggle {
+    position: static;
+    transform: none;
+    margin-right: 0;
+  }
+
+  .theme-toggle:hover {
+    transform: scale(1.05);
+  }
+
+  .theme-toggle:active {
+    transform: scale(0.95);
+  }
 }
 
 /* 7. Navigation (Left Sidebar) */
-nav {
+#sidebar-navigation {
   grid-area: nav;
   font-family: var(--font-heading);
   font-size: var(--font-size-base);
@@ -580,27 +637,27 @@ nav {
 }
 
 /* Custom scrollbar for WebKit browsers */
-nav::-webkit-scrollbar {
+#sidebar-navigation::-webkit-scrollbar {
   width: 6px;
 }
 
-nav::-webkit-scrollbar-track {
+#sidebar-navigation::-webkit-scrollbar-track {
   background: transparent;
 }
 
-nav::-webkit-scrollbar-thumb {
+#sidebar-navigation::-webkit-scrollbar-thumb {
   background: var(--color-border-default);
   border-radius: var(--radius-sm);
   transition: background var(--transition-fast);
 }
 
-nav::-webkit-scrollbar-thumb:hover {
+#sidebar-navigation::-webkit-scrollbar-thumb:hover {
   background: var(--color-border-emphasis);
 }
 
 /* Mobile navigation */
 @media (width <= 1023px) {
-  nav {
+  #sidebar-navigation {
     position: fixed;
     top: var(--layout-header-height);
     bottom: 0;
@@ -612,7 +669,7 @@ nav::-webkit-scrollbar-thumb:hover {
     /* Don't set height - let top/bottom define it */
   }
 
-  nav[hidden] {
+  #sidebar-navigation[hidden] {
     display: none;
   }
 
@@ -629,7 +686,7 @@ nav::-webkit-scrollbar-thumb:hover {
   }
 
   /* Show backdrop when nav is open */
-  body.nav-open::before {
+  body.sidebar-navigation-open::before {
     opacity: 1;
     pointer-events: auto;
   }
@@ -637,17 +694,18 @@ nav::-webkit-scrollbar-thumb:hover {
 
 /* Desktop: hide nav when [hidden] attribute is set */
 @media (width >= 1024px) {
-  nav[hidden] {
+  #sidebar-navigation[hidden] {
     display: none;
   }
 }
 
-nav .nav-section {
+#sidebar-navigation .nav-section {
   margin-top: var(--space-6);
   padding: 0 var(--space-6);
 }
 
-nav h2, nav h3 {
+#sidebar-navigation h2,
+#sidebar-navigation h3 {
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
   margin: 0 0 var(--space-4);
@@ -656,51 +714,51 @@ nav h2, nav h3 {
   border-bottom: 1px solid var(--color-border-default);
 }
 
-nav ul,
-nav dl,
-nav p {
+#sidebar-navigation ul,
+#sidebar-navigation dl,
+#sidebar-navigation p {
   padding: 0;
   list-style: none;
   margin: var(--space-3) 0;
 }
 
-nav ul li {
+#sidebar-navigation ul li {
   margin-bottom: var(--space-2);
   line-height: var(--line-height-relaxed);
 }
 
-nav ul li a {
+#sidebar-navigation ul li a {
   transition:
     color var(--transition-fast),
     transform var(--transition-fast),
     padding var(--transition-fast);
 }
 
-nav ul li a:hover {
+#sidebar-navigation ul li a:hover {
   padding-left: var(--space-1);
 }
 
-nav ul ul {
+#sidebar-navigation ul ul {
   padding-left: var(--space-5);
-  margin-top: var(--space-2);
+  margin: var(--space-2) 0 0;
 }
 
-nav ul ul ul {
+#sidebar-navigation ul ul ul {
   padding-left: var(--space-5);
 }
 
-nav ul ul ul ul {
+#sidebar-navigation ul ul ul ul {
   padding-left: var(--space-5);
 }
 
-nav a {
+#sidebar-navigation a {
   text-decoration: none;
 }
 
 /* Truncation for direct nav links (not links inside code tags) */
-nav .nav-list > li > a,
-nav .nav-section > ul > li > a,
-nav .nav-section > dl > dd > a {
+#sidebar-navigation .nav-list > li > a,
+#sidebar-navigation .nav-section > ul > li > a,
+#sidebar-navigation .nav-section > dl > dd > a {
   display: block;
   max-width: 100%;
   overflow: hidden;
@@ -708,22 +766,22 @@ nav .nav-section > dl > dd > a {
   white-space: nowrap;
 }
 
-nav footer {
+#sidebar-navigation footer {
   padding: var(--space-4);
   border-top: 1px solid var(--color-border-default);
 }
 
-nav footer a {
+#sidebar-navigation footer a {
   color: var(--color-accent-hover);
 }
 
-#navigation-toggle {
+#sidebar-navigation-toggle {
   display: none; /* Hidden by default, shown on mobile */
 }
 
 /* Mobile toggle button */
 @media (width <= 1023px) {
-  #navigation-toggle {
+  #sidebar-navigation-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -743,7 +801,7 @@ nav footer a {
     -webkit-user-select: none;
   }
 
-  #navigation-toggle:hover {
+  #sidebar-navigation-toggle:hover {
     color: var(--color-accent-primary);
   }
 }
@@ -754,23 +812,23 @@ nav footer a {
  * Uses block-size animation with interpolate-size for smooth height transitions.
  * Both nav-section-collapsible and nested link-list details share this pattern.
  */
-nav details {
+#sidebar-navigation details {
   interpolate-size: allow-keywords;
 }
 
-nav details::details-content {
+#sidebar-navigation details::details-content {
   overflow: hidden;
   block-size: 0;
   transition: block-size 200ms ease, content-visibility 200ms ease allow-discrete;
 }
 
-nav details[open]::details-content {
+#sidebar-navigation details[open]::details-content {
   block-size: auto;
 }
 
 /* Collapsible Navigation Section Headers */
 
-nav .nav-section-header {
+#sidebar-navigation .nav-section-header {
   display: flex;
   align-items: center;
   gap: var(--space-3);
@@ -784,15 +842,15 @@ nav .nav-section-header {
   transition: color var(--transition-fast);
 }
 
-nav .nav-section-header::-webkit-details-marker {
+#sidebar-navigation .nav-section-header::-webkit-details-marker {
   display: none;
 }
 
-nav .nav-section-header:hover {
+#sidebar-navigation .nav-section-header:hover {
   color: var(--color-accent-primary);
 }
 
-nav .nav-section-icon {
+#sidebar-navigation .nav-section-icon {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -802,12 +860,12 @@ nav .nav-section-icon {
   color: var(--color-accent-primary);
 }
 
-nav .nav-section-icon svg {
+#sidebar-navigation .nav-section-icon svg {
   width: 100%;
   height: 100%;
 }
 
-nav .nav-section-title {
+#sidebar-navigation .nav-section-title {
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-semibold);
   color: inherit;
@@ -818,7 +876,7 @@ nav .nav-section-title {
   white-space: nowrap;
 }
 
-nav .nav-section-chevron {
+#sidebar-navigation .nav-section-chevron {
   display: flex;
   align-items: center;
   justify-content: center;
@@ -829,46 +887,50 @@ nav .nav-section-chevron {
   transition: transform var(--transition-base);
 }
 
-nav .nav-section-chevron svg {
+#sidebar-navigation .nav-section-chevron svg {
   width: 100%;
   height: 100%;
 }
 
 /* Rotate chevron when open */
-nav .nav-section-collapsible[open] > .nav-section-header .nav-section-chevron {
+#sidebar-navigation .nav-section-collapsible[open] > .nav-section-header .nav-section-chevron {
   transform: rotate(90deg);
 }
 
-nav .nav-section-collapsible > ul,
-nav .nav-section-collapsible > dl,
-nav .nav-section-collapsible > p {
+#sidebar-navigation .nav-section-collapsible > ul,
+#sidebar-navigation .nav-section-collapsible > dl,
+#sidebar-navigation .nav-section-collapsible > p {
   margin-top: 0;
 }
 
-nav .nav-section-collapsible > .nav-list {
+#sidebar-navigation .nav-section-collapsible > .nav-list {
   padding-left: var(--space-5);
   border-left: 1px solid var(--color-border-subtle);
   margin-left: 9px; /* Align with the section icon center */
 }
 
-nav .nav-section-collapsible .nav-list .link-list {
+#sidebar-navigation .nav-section-collapsible .nav-list .link-list {
   border-left: none;
   margin-left: 0;
   padding-left: var(--space-5);
 }
 
+#sidebar-navigation .nav-section-collapsible .nav-list .link-list > li:last-child {
+  margin-bottom: 0;
+}
+
 /*
   Improve chevron styling for details under link-list, using SVG chevron that matches nav-section-chevron
   We need to avoid adding the element in class content generation so it doesn't break darkfish styles
 */
-nav li details:has(.link-list) > summary {
+#sidebar-navigation li details:has(.link-list) > summary {
   display: inline-flex;
   align-items: center;
   gap: var(--space-2);
   cursor: pointer;
 }
 
-nav li details:has(.link-list) > summary::after {
+#sidebar-navigation li details:has(.link-list) > summary::after {
   content: '';
   position: static;
   display: inline-block;
@@ -888,11 +950,11 @@ nav li details:has(.link-list) > summary::after {
   transition: transform var(--transition-base), background-color var(--transition-fast);
 }
 
-nav li details:has(.link-list) > summary:hover::after {
+#sidebar-navigation li details:has(.link-list) > summary:hover::after {
   background-color: var(--color-accent-primary);
 }
 
-nav li details:has(.link-list)[open] > summary::after {
+#sidebar-navigation li details:has(.link-list)[open] > summary::after {
   transform: rotate(90deg);
   background-color: var(--color-accent-primary);
 }
@@ -901,6 +963,7 @@ nav li details:has(.link-list)[open] > summary::after {
 main {
   grid-area: main;
   width: 100%;
+  min-width: 0;
   max-width: var(--layout-content-max-width);
   margin: 0 auto;
   padding: var(--space-12) var(--space-8);
@@ -912,7 +975,7 @@ main {
 
 /* Desktop: hide hamburger */
 @media (width >= 1024px) {
-  #navigation-toggle {
+  #sidebar-navigation-toggle {
     display: none;
   }
 }
@@ -935,11 +998,36 @@ main {
   }
 }
 
-main h1[class] {
+main h1.page-title {
+  display: grid;
+  gap: var(--space-2);
+  justify-items: start;
   margin-top: 0;
-  margin-bottom: 1em;
-  font-size: 2.5em;
+  margin-bottom: var(--space-8);
+  color: var(--color-accent-primary);
+}
+
+main h1.page-title .page-title-kind {
+  display: inline-flex;
+  align-items: center;
+  min-height: 1.625rem;
+  padding: 0 var(--space-2);
+  border: 1px solid var(--color-title-kind-border);
+  border-radius: var(--radius-md);
+  background: var(--color-accent-subtle);
+  color: var(--color-accent-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: 1;
+}
+
+main h1.page-title .page-title-name {
+  max-width: 100%;
   color: var(--color-accent-primary);
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-bold);
+  line-height: var(--line-height-tight);
+  overflow-wrap: anywhere;
 }
 
 main h1,
@@ -1017,7 +1105,6 @@ main h6 a:hover {
 .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);
@@ -1033,7 +1120,6 @@ main h6 a:hover {
 [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);
@@ -1071,6 +1157,20 @@ main h6 a:hover {
   font-style: italic;
 }
 
+/* RBS Type Signature Links — linked types get subtle underline */
+a.rbs-type {
+  color: inherit;
+  text-decoration: underline;
+  text-decoration-color: var(--color-border-default);
+  text-underline-offset: 0.2em;
+  transition: text-decoration-color var(--transition-fast), color var(--transition-fast);
+}
+
+a.rbs-type:hover {
+  color: var(--color-link-hover);
+  text-decoration-color: var(--color-link-hover);
+}
+
 /* Emphasis */
 em {
   text-decoration-color: var(--color-emphasis-decoration);
@@ -1091,6 +1191,22 @@ main p {
   margin-bottom: var(--space-4);
 }
 
+main .rdoc-logo {
+  margin: var(--space-6) 0 var(--space-8);
+  text-align: center;
+}
+
+main .rdoc-logo img {
+  display: inline-block;
+  width: clamp(120px, 14vw, 168px);
+  height: auto;
+  filter: drop-shadow(0 8px 18px rgb(230 41 35 / 8%));
+}
+
+[data-theme="dark"] main .rdoc-logo img {
+  filter: saturate(0.58) brightness(1.4) drop-shadow(0 8px 22px rgb(235 84 79 / 16%));
+}
+
 /* Preformatted Text */
 main pre {
   margin: 1.2em 0.5em;
@@ -1154,17 +1270,19 @@ main dd p:first-child {
 
 /* Headers within Main */
 main header h2 {
-  margin-top: 2em;
+  margin: var(--space-8) 0 var(--space-4);
+  padding-top: var(--space-3);
   border-width: 0;
-  border-top: 4px solid var(--color-border-default);
-  font-size: 130%;
+  border-top: 1px solid var(--color-border-default);
+  font-size: var(--font-size-2xl);
 }
 
 main header h3 {
-  margin: 2em 0 1.5em;
+  margin: var(--space-8) 0 var(--space-6);
+  padding-top: var(--space-3);
   border-width: 0;
-  border-top: 3px solid var(--color-border-default);
-  font-size: 120%;
+  border-top: 1px solid var(--color-border-default);
+  font-size: var(--font-size-xl);
 }
 
 h1:target,
@@ -1237,8 +1355,7 @@ main .method-source-code {
 }
 
 main .method-source-code pre {
-  border-color: var(--color-accent-hover);
-  border-left: 3px solid var(--color-accent-primary);
+  border-color: var(--color-code-border);
   width: 100%;
   box-sizing: border-box;
   transition: border-color var(--transition-fast);
@@ -1282,6 +1399,7 @@ main .method-description .method-calls-super {
 }
 
 main .method-detail {
+  position: relative;
   margin-bottom: 2.5em;
 }
 
@@ -1292,32 +1410,106 @@ main .method-detail:target {
 }
 
 main .method-header {
-  display: inline-block;
-  max-width: calc(100% - 6em); /* 6em is the width of the source code toggle */
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  gap: var(--space-4);
+  align-items: center;
+  background: var(--color-sig-bg);
+  border: 1px solid var(--color-sig-border);
+  border-radius: var(--radius-md);
+  padding: var(--space-4);
+}
+
+main .method-heading-group {
+  min-width: 0;
 }
 
 main .method-heading {
-  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
   font-family: var(--font-code);
   font-size: var(--font-size-lg);
   font-weight: var(--font-weight-semibold);
-  margin-bottom: var(--space-3);
+  line-height: var(--line-height-normal);
+}
+
+main .method-heading a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main .method-heading a:hover {
+  color: var(--color-accent-primary);
+}
+
+main .method-heading .method-callseq {
+  display: block;
 }
 
 main .method-heading .method-name {
   font-weight: var(--font-weight-semibold);
+  overflow-wrap: anywhere;
 }
 
 main .method-heading .method-args {
   font-weight: var(--font-weight-normal);
 }
 
+/* Type signatures — overloads stack as a code block under the method name */
+pre.method-type-signature {
+  position: relative;
+  margin: var(--space-2) 0 0;
+  padding: var(--space-2) 0 0;
+  background: transparent;
+  border: none;
+  border-radius: 0;
+  overflow: visible;
+  font-family: var(--font-code);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-tertiary);
+  line-height: var(--line-height-tight);
+  white-space: pre-wrap;
+  overflow-wrap: break-word;
+}
+
+pre.method-type-signature::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  border-top: 1px dotted var(--color-border-default);
+}
+
+pre.method-type-signature code {
+  font-family: inherit;
+  font-size: inherit;
+  color: inherit;
+  background: transparent;
+  padding: 0;
+}
+
+/* Attribute type sigs render inline after the [RW] badge */
+main .method-heading > .method-type-signature {
+  display: inline;
+  margin-left: var(--space-2);
+  font-family: var(--font-code);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
 main .method-controls {
-  float: right;
+  position: static;
+  align-self: center;
 }
 
 main .method-controls summary {
-  display: inline-block;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--space-2);
+  min-height: 30px;
   line-height: 20px;
   color: var(--color-accent-primary);
   cursor: pointer;
@@ -1334,6 +1526,7 @@ main .method-controls summary {
     transform var(--transition-fast);
   user-select: none;
   -webkit-user-select: none;
+  white-space: nowrap;
   list-style: none;
 }
 
@@ -1351,19 +1544,31 @@ main .method-controls summary:active {
   transform: scale(0.96);
 }
 
+main .method-source-icon {
+  font-family: var(--font-code);
+  font-size: var(--font-size-xs);
+  line-height: 1;
+  opacity: 0.8;
+}
+
 [data-theme="dark"] main .method-controls summary:hover {
   background: var(--color-accent-subtle-hover);
   border-color: var(--color-primary-500);
 }
 
-main .method-description,
-main .aliases {
-  margin-top: 0.75em;
+main .method-description {
   color: var(--color-text-primary);
+  line-height: var(--line-height-relaxed);
+}
+
+main .method-header ~ .method-description {
+  margin-top: var(--space-5);
+  padding-left: var(--space-2);
 }
 
 main .aliases {
-  padding-top: 4px;
+  margin-top: var(--space-4);
+  padding-top: var(--space-1);
   font-style: italic;
   cursor: default;
 }
@@ -1393,7 +1598,7 @@ main .attribute-access-type {
 
 /* Small screen adjustments */
 @media (width <= 480px) {
-  nav {
+  #sidebar-navigation {
     width: 85%;
     max-width: 320px;
   }
@@ -1410,191 +1615,37 @@ main .attribute-access-type {
     white-space: nowrap;
   }
 
-  main .method-controls {
-    margin-top: 10px;
-    float: none;
-  }
-}
-
-
-
-/* 9. Search Modal (Mobile) */
-.search-modal {
-  position: fixed;
-  inset: 0;
-  z-index: var(--z-modal);
-  display: none;
-}
-
-.search-modal:not([hidden]) {
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  padding: var(--space-16) var(--space-4);
-}
-
-/* Reduce padding on very small screens */
-@media (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 {
+  main .method-heading {
     font-size: var(--font-size-base);
-    min-width: 0; /* Allow input to shrink */
   }
 
-  .search-modal-form {
-    gap: var(--space-2);
+  pre.method-type-signature {
+    font-size: var(--font-size-xs);
   }
 
-  .search-modal-close {
-    padding: var(--space-1) var(--space-3);
-    font-size: 0.75rem;
+  main .method-header {
+    grid-template-columns: 1fr;
+    gap: var(--space-3);
+    padding: var(--space-2);
   }
-}
-
-.search-modal-backdrop {
-  position: absolute;
-  inset: 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);
+  main .method-controls {
+    justify-self: start;
+  }
 }
 
-.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);
+/* 9. Search */
+.search-backdrop,
+.search-icon,
+.search-close,
+.search-empty {
+  display: none;
 }
 
 /* 10. Right Sidebar - Table of Contents */
-aside.table-of-contents {
+#table-of-contents {
   grid-area: toc;
   align-self: start;
   position: sticky;
@@ -1605,43 +1656,45 @@ aside.table-of-contents {
   font-size: var(--font-size-base);
 }
 
-aside.table-of-contents * {
-  border-right: none !important;
-  outline: none !important;
-}
-
-aside.table-of-contents .toc-sticky {
+#table-of-contents .toc-sticky {
   display: flex;
   flex-direction: column;
 
-  /* Exclude header height and top/bottom padding of aside.table-of-contents */
+  /* Exclude header height and top/bottom padding of #table-of-contents */
   height: calc(100vh - var(--layout-header-height) - var(--space-8) * 2);
 }
 
-aside.table-of-contents .toc-sticky nav {
-  height: auto;
+#table-of-contents .toc-nav {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+  scrollbar-width: thin;
+  scrollbar-color: var(--color-border-default) transparent;
 }
 
-aside.table-of-contents .toc-list > .toc-h2 {
+#table-of-contents .toc-list > .toc-h2 {
   margin-left: var(--space-4);
 }
 
-aside.table-of-contents .toc-list > .toc-h3 {
+#table-of-contents .toc-list > .toc-h3 {
   margin-left: var(--space-8);
 }
 
 /* Hide TOC on mobile/tablet */
 @media (width <= 1279px) {
-  aside.table-of-contents {
+  #table-of-contents {
     display: none;
   }
+}
 
+/* Preserve the desktop sidebar/content grid when the TOC is hidden */
+@media (width >= 1024px) and (width <= 1279px) {
   body.has-toc {
     grid-template-columns: var(--layout-sidebar-width) 1fr;
     grid-template-areas:
       "header header"
       "nav main"
-      "footer footer";
+      "nav footer";
   }
 }
 
@@ -1657,31 +1710,31 @@ aside.table-of-contents .toc-list > .toc-h3 {
   }
 }
 
-.table-of-contents h3 {
+#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 {
+#table-of-contents ul {
   margin: 0;
   padding: 0;
   list-style: none;
 }
 
-.table-of-contents ul ul {
+#table-of-contents ul ul {
   margin-top: var(--space-3);
   margin-left: var(--space-5);
   border-left: 1px solid var(--color-border-default);
   padding-left: var(--space-4);
 }
 
-.table-of-contents li {
+#table-of-contents li {
   margin-bottom: var(--space-3);
 }
 
-.table-of-contents a {
+#table-of-contents a {
   display: block;
   color: var(--color-text-secondary);
   text-decoration: none;
@@ -1692,32 +1745,46 @@ aside.table-of-contents .toc-list > .toc-h3 {
 }
 
 /* Nav hover styles sit here to keep specificity ordering with TOC links */
-nav a:hover {
+#sidebar-navigation a:hover {
   color: var(--color-link-hover);
   text-decoration: underline;
 }
 
-.table-of-contents a:hover {
+#table-of-contents a:hover {
   color: var(--color-link-hover);
+  text-decoration: underline;
+}
+
+#table-of-contents a:focus-visible {
+  outline: 2px solid var(--color-accent-primary);
+  outline-offset: 2px;
+  border-radius: var(--radius-sm);
 }
 
-.table-of-contents a.active {
+#table-of-contents a.active {
   color: var(--color-accent-primary);
   font-weight: var(--font-weight-medium);
 }
 
 ol.breadcrumb {
   display: flex;
+  flex-wrap: wrap;
   padding: 0;
   margin: 0 0 1em;
 }
 
 ol.breadcrumb li {
   display: block;
+  min-width: 0;
   list-style: none;
   font-size: 125%;
 }
 
+ol.breadcrumb a,
+ol.breadcrumb li > span:not(.separator) {
+  overflow-wrap: anywhere;
+}
+
 /* 11. Footer */
 footer.site-footer {
   grid-area: footer;
@@ -1846,9 +1913,11 @@ footer.site-footer .footer-bottom:first-child {
 }
 
 .search-results li {
+  position: relative;
   list-style: none;
   border-bottom: 1px solid var(--color-border-default);
   margin-bottom: 0.5em;
+  cursor: pointer;
 }
 
 .search-results li:last-child {
@@ -1861,6 +1930,16 @@ footer.site-footer .footer-bottom:first-child {
   margin: 0.5em;
 }
 
+.search-results .search-match a::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+}
+
+.search-results li:focus-within {
+  background: var(--color-code-bg);
+}
+
 .search-results .search-namespace {
   font-weight: bold;
 }
@@ -1909,6 +1988,8 @@ footer.site-footer .footer-bottom:first-child {
 }
 
 header.top-navbar #search-field {
+  display: block;
+  box-sizing: border-box;
   width: 100%;
   padding: var(--space-2) var(--space-4);
   border: 1px solid var(--color-border-default);
@@ -1930,11 +2011,12 @@ header.top-navbar #search-field::placeholder {
 }
 
 /* Search results dropdown in navbar */
-header.top-navbar #search-results-desktop {
+header.top-navbar #search-results {
+  box-sizing: border-box;
   position: absolute;
   top: calc(100% + var(--space-2));
   left: 0;
-  width: var(--layout-search-width);
+  width: 100%;
   max-height: 60vh;
   background: var(--color-background-primary);
   border: 1px solid var(--color-border-default);
@@ -1946,10 +2028,183 @@ header.top-navbar #search-results-desktop {
   padding: 0;
 }
 
-header.top-navbar #search-results-desktop.initially-hidden {
+header.top-navbar #search-results.initially-hidden {
   display: none;
 }
 
-header.top-navbar #search-results-desktop[aria-expanded="false"] {
+header.top-navbar #search-results[aria-expanded="false"] {
   display: none;
 }
+
+@media (width <= 1023px) {
+  body:has(header.top-navbar .navbar-search.is-open) {
+    overflow: hidden;
+  }
+
+  body:has(header.top-navbar .navbar-search.is-open) header.top-navbar {
+    z-index: var(--z-modal);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: 1;
+    display: block;
+    background: var(--color-overlay);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-surface {
+    position: fixed;
+    top: var(--space-16);
+    left: 50%;
+    z-index: 2;
+    display: flex;
+    flex-direction: column;
+    width: calc(100% - var(--space-8));
+    max-width: 600px;
+    max-height: 80vh;
+    margin: 0;
+    overflow: hidden;
+    background: var(--color-background-primary);
+    border-radius: var(--radius-lg);
+    box-shadow: var(--shadow-xl);
+    transform: translateX(-50%);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-form {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    padding: var(--space-6);
+    border-bottom: 1px solid var(--color-border-default);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-icon {
+    display: inline;
+    flex-shrink: 0;
+    color: var(--color-text-secondary);
+    font-size: 1.5rem;
+  }
+
+  header.top-navbar .navbar-search.is-open #search-field {
+    flex: 1;
+    min-width: 0;
+    padding: 0;
+    border: none;
+    outline: none;
+    background: transparent;
+    box-shadow: none;
+    font-size: var(--font-size-lg);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-close {
+    display: block;
+    flex-shrink: 0;
+    padding: var(--space-2) var(--space-4);
+    border: 1px solid var(--color-border-default);
+    border-radius: var(--radius-md);
+    background: var(--color-background-secondary);
+    color: var(--color-text-secondary);
+    cursor: pointer;
+    font-size: var(--font-size-sm);
+    transition: background var(--transition-fast), border-color var(--transition-fast);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-close:hover {
+    border-color: var(--color-border-default);
+    background: var(--color-background-tertiary);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    min-height: 0;
+    overflow: hidden;
+  }
+
+  header.top-navbar .navbar-search.is-open .search-empty {
+    display: block;
+    margin: var(--space-6);
+    padding: var(--space-12) 0;
+    color: var(--color-text-tertiary);
+    text-align: center;
+  }
+
+  header.top-navbar .navbar-search.is-open #search-results {
+    flex: 1;
+    min-height: 0;
+    position: relative;
+    max-height: none;
+    margin: 0;
+    padding: var(--space-6);
+    overflow-y: auto;
+    border: none;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
+  header.top-navbar .navbar-search.is-open #search-results.initially-hidden {
+    display: block;
+  }
+
+  header.top-navbar .navbar-search.is-open #search-results[aria-expanded="false"] {
+    display: none;
+  }
+
+  header.top-navbar .navbar-search.is-open .search-results li {
+    margin-bottom: var(--space-2);
+    padding: var(--space-3) var(--space-4);
+    border-radius: var(--radius-md);
+    transition: background var(--transition-fast);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-results li:hover {
+    background: var(--color-background-secondary);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-match {
+    margin: 0;
+    font-size: var(--font-size-base);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-match a {
+    text-decoration: none;
+  }
+
+  header.top-navbar .navbar-search.is-open .search-snippet {
+    margin: var(--space-1) 0 0 0;
+    color: var(--color-text-tertiary);
+    font-size: var(--font-size-sm);
+  }
+}
+
+@media (width <= 420px) {
+  header.top-navbar .navbar-search.is-open .search-surface {
+    top: var(--space-4);
+    width: calc(100% - var(--space-6));
+    border-radius: var(--radius-md);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-form,
+  header.top-navbar .navbar-search.is-open #search-results {
+    padding: var(--space-3);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-empty {
+    margin: var(--space-3);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-form {
+    gap: var(--space-2);
+  }
+
+  header.top-navbar .navbar-search.is-open #search-field {
+    font-size: var(--font-size-base);
+  }
+
+  header.top-navbar .navbar-search.is-open .search-close {
+    padding: var(--space-1) var(--space-3);
+    font-size: 0.75rem;
+  }
+}