@kenjura/ursa 0.90.1 → 0.95.0

package/meta/templates/default-template/default.css

@@ -1,1323 +1,1574 @@
-body, html {
-  margin: 0;
-  padding: 0;
-}
-body {
-  font-family: sans-serif;
-}
-
-:root {
-  --article-width: 50rem;
-  --global-nav-height: 48px;
-  --twisty-size: 1.1rem;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --bg-color: #121212;
-    --text-color: #f2f2f2;
-    --nav-top-bg: #242424;
-    --widget-bg: #242424;
-    --widget-border: #3a3a3a;
-  }
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    --bg-color: white;
-    --text-color: black;
-    --nav-top-bg: #f2f2f2;
-    --widget-bg: #f2f2f2;
-    --widget-border: #ddd;
-  }
-}
-
-body {
-  background: var(--bg-color);
-  color: var(--text-color);
-}
-
-/* Inactive/broken links */
-a.inactive {
-  filter: brightness(0.5);
-  cursor: not-allowed;
-  text-decoration: line-through;
-}
-
-h1 {
-  max-width: var(--article-width);
-  overflow: hidden ;
-  text-overflow: ellipsis;
-}
-
-h1,h2,h3 {
-  clear: both;
-}
-
-figure {
-  margin: 0.5rem 0;
-  padding: 0;
-  max-width: 300px;
-  float: left;
-  clear: both;
-  margin-right: 1.5rem;
-  margin-bottom: 0.5rem;
-
-  &:nth-of-type(even) {
-    float: right;
-    margin-left: 1.5rem;
-    margin-right: 0;
-  }
-}
-
-nav#nav-global {
-  background-color: var(--nav-top-bg);
-  height: var(--global-nav-height);
-  position: fixed;
-  top: 0;
-  left: 0;
-  width: 100vw;
-  display: grid;
-  grid-template-columns: 1fr var(--article-width) 1fr;
-  align-items: center;
-  padding: 0 8px;
-  box-sizing: border-box;
-  z-index: 1001;
-
-  button.menu-button {
-    color: var(--text-color);
-    font-size: calc(var(--global-nav-height) / 2);
-    line-height: 1;
-    padding: 8px;
-    background: none;
-    border: none;
-    cursor: pointer;
-  }
-  button.menu-button:hover {
-    opacity: 0.7;
-  }
-
-  /* Left controls: menu button + left-side widgets */
-  .nav-left-controls {
-    display: flex;
-    align-items: center;
-    justify-self: start;
-    gap: 0;
-  }
-
-  /* Center container for search and top menu */
-  .nav-center {
-    width: calc(var(--article-width) + 38px);
-    justify-self: center;
-    position: relative;
-  }
-
-  .search-wrapper {
-    position: relative;
-    width: 100%;
-  }
-  
-  input#global-search {
-    width: 100%;
-    height: calc(var(--global-nav-height) - 16px);
-    border-radius: 5px;
-    background: rgba(0,0,0,0.25);
-    color: var(--text-color);
-    border-width: 0px;
-    padding: 0 2.5rem 0 1rem;
-    box-sizing: border-box;
-  }
-  
-  .search-clear-button {
-    position: absolute;
-    right: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    background: none;
-    border: none;
-    color: var(--text-color);
-    font-size: 1.25rem;
-    line-height: 1;
-    cursor: pointer;
-    padding: 4px 8px;
-    opacity: 0.6;
-    transition: opacity 0.2s ease;
-  }
-  
-  .search-clear-button:hover {
-    opacity: 1;
-  }
-  
-  .search-clear-button.hidden {
-    display: none;
-  }
-}
-
-/* ==========================================
-   WIDGET SYSTEM STYLES
-   Nav widgets (TOC, Search, Profile, Recent Activity)
-   ========================================== */
-
-/* Widget bar in the nav right column */
-nav#nav-global .nav-right-controls {
-  display: flex;
-  align-items: center;
-  justify-self: end;
-  gap: 0;
-}
-
-.widget-bar {
-  display: flex;
-  align-items: center;
-  gap: 0;
-}
-
-/* Ursa update indicator (loading spinner in nav bar) */
-.ursa-update-indicator {
-  display: none;
-  align-items: center;
-  justify-content: center;
-  width: var(--global-nav-height);
-  height: var(--global-nav-height);
-  opacity: 0.7;
-}
-.ursa-spinner {
-  width: 14px;
-  height: 14px;
-  border: 2px solid rgba(128, 128, 128, 0.3);
-  border-top-color: rgba(128, 128, 128, 0.8);
-  border-radius: 50%;
-  animation: ursa-spin 0.8s linear infinite;
-}
-.ursa-update-gray .ursa-spinner {
-  border-color: rgba(128, 128, 128, 0.3);
-  border-top-color: rgba(128, 128, 128, 0.8);
-}
-.ursa-update-green .ursa-spinner {
-  border-color: rgba(76, 175, 80, 0.3);
-  border-top-color: rgba(76, 175, 80, 0.9);
-}
-@keyframes ursa-spin {
-  to { transform: rotate(360deg); }
-}
-
-.widget-button {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background: none;
-  border: none;
-  color: var(--text-color);
-  font-size: 1.1rem;
-  width: var(--global-nav-height);
-  height: var(--global-nav-height);
-  cursor: pointer;
-  opacity: 0.7;
-  transition: opacity 0.15s ease, background-color 0.15s ease;
-}
-
-.widget-button:hover {
-  opacity: 1;
-  background-color: rgba(128, 128, 128, 0.15);
-}
-
-.widget-button.active {
-  opacity: 1;
-  background-color: var(--widget-bg);
-}
-
-.widget-icon {
-  pointer-events: none;
-}
-
-/* Widget dropdown panel (right-side, default) */
-.widget-dropdown {
-  position: fixed;
-  top: var(--global-nav-height);
-  right: 0;
-  width: min(420px, 100vw);
-  max-height: calc(100vh - var(--global-nav-height));
-  overflow-y: auto;
-  background: var(--widget-bg);
-  border-left: 1px solid var(--widget-border);
-  border-bottom: 1px solid var(--widget-border);
-  box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.2);
-  z-index: 1100;
-  transition: opacity 0.15s ease;
-}
-
-/* Widget dropdown panel (left-side) */
-.widget-dropdown.widget-dropdown-left {
-  right: auto;
-  left: 0;
-  border-left: none;
-  border-right: 1px solid var(--widget-border);
-  box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.2);
-}
-
-.widget-dropdown.hidden {
-  display: none;
-}
-
-/* Widget header with title and close button */
-.widget-header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--widget-border);
-}
-
-.widget-header-title {
-  font-weight: 600;
-  font-size: 0.85rem;
-  text-transform: uppercase;
-  letter-spacing: 0.03em;
-  opacity: 0.7;
-}
-
-.widget-close-btn {
-  background: none;
-  border: none;
-  color: var(--text-color);
-  font-size: 1rem;
-  cursor: pointer;
-  opacity: 0.5;
-  padding: 4px 8px;
-  line-height: 1;
-  border-radius: 3px;
-  transition: opacity 0.15s ease, background-color 0.15s ease;
-}
-
-.widget-close-btn:hover {
-  opacity: 1;
-  background-color: rgba(128, 128, 128, 0.2);
-}
-
-/* Widget content panels — only the active one is visible */
-.widget-content {
-  display: none;
-}
-
-.widget-content.active {
-  display: block;
-}
-
-/* --- TOC Widget --- */
-#widget-content-toc {
-  padding: 0.5rem 0;
-
-  ul {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-
-    li {
-      margin-bottom: 0.15rem;
-      padding: 0;
-
-      > a {
-        text-decoration: none;
-        color: var(--text-color);
-        opacity: 0.75;
-        display: block;
-        padding: 0.3rem 1rem;
-        border-left: 2px solid transparent;
-        transition: all 0.2s ease;
-        font-size: 0.9rem;
-      }
-
-      > a:hover {
-        opacity: 1;
-        border-left-color: var(--text-color);
-        background-color: rgba(128, 128, 128, 0.1);
-      }
-
-      > a.active {
-        opacity: 1;
-        border-left-color: aqua;
-        background-color: rgba(0, 255, 255, 0.1);
-      }
-
-      /* Indent nested headings */
-      &.toc-h1 > a {
-        padding-left: 1rem;
-        font-weight: 600;
-      }
-      
-      &.toc-h2 > a {
-        padding-left: 1.5rem;
-        font-size: 0.85rem;
-      }
-      
-      &.toc-h3 > a {
-        padding-left: 2rem;
-        font-size: 0.8rem;
-      }
-    }
-  }
-}
-
-/* --- Search Widget --- */
-.widget-search-wrapper {
-  padding: 0.5rem;
-}
-
-.widget-search-input {
-  width: 100%;
-  height: 40px;
-  border-radius: 5px;
-  background: rgba(0, 0, 0, 0.15);
-  color: var(--text-color);
-  border: 1px solid var(--widget-border);
-  padding: 0 1rem;
-  box-sizing: border-box;
-  font-size: 1rem;
-}
-
-.widget-search-input:focus {
-  outline: none;
-  border-color: aqua;
-  box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.2);
-}
-
-.widget-search-results {
-  max-height: calc(100vh - var(--global-nav-height) - 80px);
-  overflow-y: auto;
-}
-
-.widget-search-results .search-result-item {
-  padding: 10px 12px;
-  border-bottom: 1px solid var(--widget-border);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.widget-search-results .search-result-item:last-child {
-  border-bottom: none;
-}
-
-.widget-search-results .search-result-item:hover,
-.widget-search-results .search-result-item.selected {
-  background-color: rgba(128, 128, 128, 0.15);
-}
-
-.widget-search-results .search-result-title {
-  font-weight: 600;
-  margin-bottom: 2px;
-  color: var(--text-color);
-  font-size: 0.9rem;
-}
-
-.widget-search-results .search-result-path {
-  font-size: 0.8rem;
-  color: var(--text-color);
-  opacity: 0.6;
-}
-
-.widget-search-results .search-result-message {
-  padding: 12px;
-  text-align: center;
-  color: var(--text-color);
-  opacity: 0.6;
-  font-style: italic;
-  font-size: 0.85rem;
-}
-
-.widget-search-results .search-section-header {
-  padding: 6px 12px;
-  font-size: 0.7em;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-color);
-  opacity: 0.5;
-  background-color: rgba(128, 128, 128, 0.1);
-  border-bottom: 1px solid var(--widget-border);
-}
-
-/* --- Profile Widget --- */
-.widget-profile-placeholder {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 2rem 1rem;
-  text-align: center;
-  color: var(--text-color);
-  opacity: 0.7;
-}
-
-.widget-profile-avatar {
-  font-size: 3rem;
-  margin-bottom: 1rem;
-}
-
-.widget-profile-placeholder p {
-  margin: 0.5rem 0;
-  font-size: 0.9rem;
-}
-
-.widget-profile-signin {
-  margin-top: 0.5rem;
-  padding: 8px 24px;
-  background: var(--nav-top-bg);
-  border: 1px solid var(--widget-border);
-  color: var(--text-color);
-  border-radius: 4px;
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.widget-profile-note {
-  font-size: 0.75rem;
-  opacity: 0.5;
-  font-style: italic;
-}
-
-/* --- Recent Activity Widget --- */
-.recent-activity-list {
-  padding: 0;
-}
-
-.recent-activity-loading,
-.recent-activity-empty {
-  padding: 1.5rem 1rem;
-  text-align: center;
-  color: var(--text-color);
-  opacity: 0.6;
-  font-style: italic;
-  font-size: 0.85rem;
-}
-
-.recent-activity-items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.recent-activity-item {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--widget-border);
-  transition: background-color 0.15s ease;
-}
-
-.recent-activity-item:last-child {
-  border-bottom: none;
-}
-
-.recent-activity-item:hover {
-  background-color: rgba(128, 128, 128, 0.1);
-}
-
-.recent-activity-link {
-  color: var(--text-color);
-  text-decoration: none;
-  font-size: 0.9rem;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.recent-activity-link:hover {
-  text-decoration: underline;
-}
-
-.recent-activity-time {
-  font-size: 0.75rem;
-  color: var(--text-color);
-  opacity: 0.5;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* Suggested Content Widget Styles */
-.suggested-content-list {
-  padding: 0;
-}
-
-.suggested-empty {
-  padding: 1rem 0.75rem;
-  text-align: center;
-  color: var(--text-color);
-  opacity: 0.6;
-  font-style: italic;
-  font-size: 0.85rem;
-}
-
-.suggested-items {
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-.suggested-item {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 0.75rem;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid var(--widget-border);
-  transition: background-color 0.15s ease;
-}
-
-.suggested-item:last-child {
-  border-bottom: none;
-}
-
-.suggested-item:hover {
-  background-color: rgba(128, 128, 128, 0.1);
-}
-
-.suggested-link {
-  color: var(--text-color);
-  text-decoration: none;
-  font-size: 0.9rem;
-  flex: 1;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.suggested-link:hover {
-  text-decoration: underline;
-}
-
-.suggested-meta {
-  font-size: 0.75rem;
-  color: var(--text-color);
-  opacity: 0.5;
-  white-space: nowrap;
-  flex-shrink: 0;
-}
-
-/* Search functionality styles */
-.search-results {
-  position: fixed;
-  top: calc(var(--global-nav-height) + 4px);
-  left: 50%;
-  transform: translateX(-50%);
-  width: min(var(--article-width), calc(100vw - 100px));
-  background: var(--bg-color);
-  border: 1px solid var(--nav-top-bg);
-  border-radius: 5px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
-  max-height: 400px;
-  overflow-y: auto;
-  z-index: 1002;
-}
-
-.search-results.hidden {
-  display: none;
-}
-
-.search-result-item {
-  padding: 12px 16px;
-  border-bottom: 1px solid var(--nav-top-bg);
-  cursor: pointer;
-  transition: background-color 0.2s ease;
-}
-
-.search-result-item:last-child {
-  border-bottom: none;
-}
-
-.search-result-item:hover,
-.search-result-item.selected {
-  background-color: var(--nav-top-bg);
-}
-
-.search-result-title {
-  font-weight: 600;
-  margin-bottom: 4px;
-  color: var(--text-color);
-}
-
-.search-result-path {
-  font-size: 0.85em;
-  color: var(--text-color);
-  opacity: 0.7;
-}
-
-.search-result-message {
-  padding: 16px;
-  text-align: center;
-  color: var(--text-color);
-  opacity: 0.7;
-  font-style: italic;
-}
-
-/* Search section styling (for combined path/full-text results) */
-.search-section {
-  border-bottom: 1px solid var(--nav-top-bg);
-}
-
-.search-section:last-child {
-  border-bottom: none;
-}
-
-.search-section-header {
-  padding: 8px 16px;
-  font-size: 0.75em;
-  font-weight: 600;
-  text-transform: uppercase;
-  letter-spacing: 0.5px;
-  color: var(--text-color);
-  opacity: 0.6;
-  background-color: color-mix(in srgb, var(--nav-top-bg) 50%, transparent);
-  border-bottom: 1px solid var(--nav-top-bg);
-}
-
-.search-show-more {
-  display: block;
-  width: 100%;
-  padding: 8px 16px;
-  background: transparent;
-  border: none;
-  color: var(--link-color);
-  font-size: 0.85em;
-  cursor: pointer;
-  text-align: center;
-  transition: background-color 0.2s ease;
-}
-
-.search-show-more:hover {
-  background-color: var(--nav-top-bg);
-  text-decoration: underline;
-}
-
-/* ==========================================
-   TOP NAVIGATION MENU STYLES
-   When body[data-menu-position="top"] is set
-   ========================================== */
-
-/* Top menu container - positioning handled by parent .nav-center */
-nav#nav-main-top {
-  display: none;
-  width: 100%;
-}
-
-/* Show top menu when position is top */
-body[data-menu-position="top"] nav#nav-main-top {
-  display: flex;
-  align-items: center;
-}
-
-/* Hide inline search when top menu is present — widget handles search */
-body[data-menu-position="top"] nav#nav-global .search-wrapper-inline {
-  display: none;
-}
-
-/* Hide side nav when top menu is active */
-body[data-menu-position="top"] nav#nav-main {
-  display: none;
-}
-
-/* Full-width article when side nav is hidden */
-body[data-menu-position="top"] article#main-content {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-/* Update nav-global grid to accommodate top menu - keep search+avatar together on right */
-body[data-menu-position="top"] nav#nav-global {
-  grid-template-columns: 1fr var(--article-width) 1fr;
-}
-
-/* Top-level menu list */
-nav#nav-main-top .top-menu-level {
-  display: flex;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  gap: 0;
-}
-
-/* Top-level menu items */
-nav#nav-main-top .top-menu-item {
-  position: relative;
-  padding: 0;
-  margin: 0;
-}
-
-nav#nav-main-top .top-menu-label {
-  display: block;
-  padding: 0px 16px;
-  line-height: var(--global-nav-height);
-  color: var(--text-color);
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-nav#nav-main-top .top-menu-label:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-nav#nav-main-top a.top-menu-label:hover {
-  text-decoration: none;
-}
-
-/* Dropdown indicator for items with children */
-nav#nav-main-top .top-menu-item.has-dropdown > .top-menu-label::after {
-  content: '▼';
-  font-size: 0.4em;
-  margin-left: 6px;
-  opacity: 0.6;
-  vertical-align: bottom;
-}
-
-/* Use widget-bg for dropdown/flyout backgrounds (shared CSS var) */
-nav#nav-main-top .top-menu-dropdown {
-  display: none;
-  position: absolute;
-  top: 100%;
-  left: 0;
-  min-width: 200px;
-  max-height: calc(100vh - var(--global-nav-height) - 20px);
-  overflow-y: auto;
-  background-color: var(--widget-bg);
-  border: 1px solid var(--widget-border);
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  z-index: 1005;
-}
-
-/* Show dropdown on hover */
-nav#nav-main-top .top-menu-item.has-dropdown:hover > .top-menu-dropdown {
-  display: block;
-}
-
-/* Dropdown items */
-nav#nav-main-top .dropdown-item {
-  position: relative;
-}
-
-nav#nav-main-top .dropdown-label {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 8px 16px;
-  color: var(--text-color);
-  text-decoration: none;
-  white-space: nowrap;
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-nav#nav-main-top .dropdown-label:hover {
-  background-color: rgba(255, 255, 255, 0.1);
-}
-
-nav#nav-main-top a.dropdown-label:hover {
-  text-decoration: none;
-}
-
-/* Flyout indicator */
-nav#nav-main-top .flyout-indicator {
-  font-size: 0.7em;
-  opacity: 0.6;
-  margin-left: 8px;
-}
-
-/* Flyout menu (nested children) - uses fixed positioning to avoid clipping by parent overflow */
-nav#nav-main-top .top-menu-flyout {
-  display: none;
-  position: fixed;
-  min-width: 200px;
-  max-height: calc(100vh - var(--global-nav-height) - 40px);
-  overflow-y: auto;
-  background-color: var(--widget-bg);
-  border: 1px solid var(--widget-border);
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  z-index: 1006;
-  /* JS will set top/left via inline styles */
-}
-
-/* Show flyout on hover - JS handles positioning */
-nav#nav-main-top .dropdown-item.has-flyout:hover > .top-menu-flyout {
-  display: block;
-}
-
-nav#nav-main {
-  position: fixed;
-  top: calc(var(--global-nav-height));
-  left: 0;
-  width: 260px;
-  max-height: calc(100vh - var(--global-nav-height));
-  overflow: hidden;
-  padding: 0;
-  font-size: 0.85rem;
-  transition: transform 0.2s ease;
-}
-
-/* Collapsed state for desktop - slide off screen */
-nav#nav-main.collapsed {
-  transform: translateX(-100%);
-}
-
-/* When nav is collapsed, article can use full width */
-body:has(nav#nav-main.collapsed) article#main-content {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-nav#nav-main {
-  /* Column-based menu styles */
-  
-  .menu-loading {
-    padding: 1rem;
-    opacity: 0.6;
-    text-align: center;
-  }
-  
-  /* Container that clips the columns */
-  .menu-columns-container {
-    width: 100%;
-    height: calc(100vh - var(--global-nav-height) - 40px);
-    overflow: hidden;
-    position: relative;
-  }
-  
-  /* Wrapper that holds all columns and transforms for scrolling */
-  .menu-columns-wrapper {
-    display: flex;
-    height: 100%;
-    min-height: 0; /* Allow flex children to shrink */
-    transition: transform 0.25s ease-out;
-  }
-  
-  /* Individual column */
-  .menu-column {
-    width: 130px;
-    min-width: 130px;
-    flex-shrink: 0;
-    height: 100%;
-    min-height: 0; /* Allow flex child to shrink and enable scrolling */
-    overflow-y: auto;
-    overflow-x: hidden;
-    border-right: 1px solid rgba(128, 128, 128, 0.15);
-    
-    /* Scrollbar styling */
-    &::-webkit-scrollbar {
-      width: 4px;
-    }
-    &::-webkit-scrollbar-track {
-      background: transparent;
-    }
-    &::-webkit-scrollbar-thumb {
-      background: rgba(128, 128, 128, 0.2);
-      border-radius: 2px;
-    }
-    &::-webkit-scrollbar-thumb:hover {
-      background: rgba(128, 128, 128, 0.4);
-    }
-  }
-  
-  .menu-column:last-child {
-    border-right: none;
-  }
-  
-  /* Column list */
-  .menu-column-list {
-    list-style: none;
-    margin: 0;
-    padding: 4px 0;
-  }
-  
-  /* Column item */
-  .menu-column-item {
-    margin: 0;
-    padding: 0;
-  }
-  
-  .menu-column-item-row {
-    display: flex;
-    align-items: center;
-    padding: 6px 8px;
-    margin: 1px 4px;
-    border-radius: 4px;
-    cursor: pointer;
-    transition: background-color 0.15s ease;
-    gap: 4px;
-  }
-  
-  .menu-column-item-row:hover {
-    background-color: rgba(128, 128, 128, 0.15);
-  }
-  
-  /* Label styling */
-  .menu-column-label {
-    flex: 1;
-    text-decoration: none;
-    color: var(--text-color);
-    opacity: 0.85;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    font-weight: 400;
-    line-height: 1.3;
-    text-transform: capitalize;
-    font-size: 0.8rem;
-  }
-  
-  .menu-column-item-row:hover .menu-column-label {
-    opacity: 1;
-  }
-  
-  /* Arrow for folders */
-  .menu-column-arrow {
-    opacity: 0.4;
-    font-size: 12px;
-    flex-shrink: 0;
-  }
-  
-  .menu-column-item.has-children .menu-column-item-row:hover .menu-column-arrow {
-    opacity: 0.8;
-  }
-  
-  /* Selected item (on path to current doc) */
-  .menu-column-item.selected > .menu-column-item-row {
-    background-color: rgba(128, 128, 128, 0.2);
-  }
-  
-  .menu-column-item.selected > .menu-column-item-row .menu-column-label {
-    font-weight: 500;
-    opacity: 1;
-  }
-  
-  /* Current page item */
-  .menu-column-item.current-page > .menu-column-item-row {
-    background-color: rgba(0, 255, 255, 0.2);
-  }
-  
-  .menu-column-item.current-page > .menu-column-item-row .menu-column-label {
-    font-weight: 600;
-    opacity: 1;
-  }
-  
-  /* Index file styling - appears at top of menu with subtle emphasis */
-  .menu-column-item.is-index > .menu-column-item-row {
-    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-    margin-bottom: 4px;
-    padding-bottom: 8px;
-  }
-  
-  .menu-column-item.is-index > .menu-column-item-row .menu-column-label {
-    font-weight: 500;
-    opacity: 0.95;
-  }
-  
-  /* Scroll buttons */
-  .menu-scroll-btn {
-    position: absolute;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 24px;
-    height: 48px;
-    background: rgba(0, 0, 0, 0.4);
-    border: none;
-    color: var(--text-color);
-    font-size: 18px;
-    cursor: pointer;
-    z-index: 10;
-    border-radius: 4px;
-    transition: all 0.2s ease;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  
-  .menu-scroll-btn:hover:not(:disabled) {
-    background: rgba(0, 0, 0, 0.6);
-  }
-  
-  .menu-scroll-btn:disabled {
-    cursor: default;
-  }
-  
-  .menu-scroll-btn.scroll-left {
-    left: 2px;
-  }
-  
-  .menu-scroll-btn.scroll-right {
-    right: 2px;
-  }
-  
-  /* Scroll indicator for current doc */
-  .menu-scroll-indicator {
-    position: absolute;
-    bottom: 8px;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 10;
-  }
-  
-  .menu-scroll-indicator .scroll-to-current {
-    background: rgba(0, 255, 255, 0.3);
-    border: 1px solid rgba(0, 255, 255, 0.5);
-    color: var(--text-color);
-    padding: 4px 12px;
-    border-radius: 12px;
-    font-size: 0.75rem;
-    cursor: pointer;
-    transition: all 0.2s ease;
-    white-space: nowrap;
-  }
-  
-  .menu-scroll-indicator .scroll-to-current:hover {
-    background: rgba(0, 255, 255, 0.5);
-  }
-}
-
-article#main-content {
-  width: var(--article-width);
-  margin: calc(var(--global-nav-height) + 16px) auto 0 auto;
-
-  img {
-    max-width: 100%;
-  }
-}
-
-/* Breadcrumb navigation */
-.breadcrumbs {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 0;
-  font-size: 0.8rem;
-  margin-bottom: 0.25rem;
-  color: var(--text-color);
-  opacity: 0.55;
-}
-
-.breadcrumb-link {
-  color: var(--text-color);
-  text-decoration: none;
-  transition: opacity 0.15s ease;
-}
-
-.breadcrumb-link:hover {
-  opacity: 1;
-  text-decoration: underline;
-}
-
-.breadcrumb-sep {
-  margin: 0 0.4em;
-  opacity: 0.4;
-  font-size: 0.85em;
-}
-
-.breadcrumb-current {
-  font-weight: 500;
-}
-
-/* Footer styles */
-footer#site-footer {
-  width: var(--article-width);
-  margin: 3rem auto 2rem auto;
-  padding-top: 2rem;
-  border-top: 1px solid rgba(128, 128, 128, 0.3);
-  text-align: center;
-  
-  .footer-content {
-    margin-bottom: 1.5rem;
-    font-size: 0.95rem;
-    opacity: 0.85;
-  }
-  
-  .footer-meta {
-    font-size: 0.8rem;
-    opacity: 0.6;
-    margin-bottom: 0.5rem;
-    
-    a {
-      color: inherit;
-    }
-  }
-  
-  .footer-copyright {
-    font-size: 0.8rem;
-    opacity: 0.6;
-  }
-}
-
-@media (max-width: 800px) {
-  footer#site-footer {
-    width: calc(100vw - 2rem);
-    margin: 3rem 1rem 2rem 1rem;
-  }
-}
-
-@media (max-width: 800px) {
-  nav#nav-global {
-    display: flex;
-    
-    .search-wrapper {
-      flex: 1;
-      width: auto;
-      max-width: none;
-      margin: 0 8px;
-    }
-    
-    input#global-search {
-      width: 100%;
-    }
-  }
-  article#main-content {
-    width: calc(100vw - 2rem);
-    margin: calc(var(--global-nav-height) + 16px) 1rem 0 1rem;
-  }
-  h1 {
-    font-size: 1.5rem;
-  }
-  
-  /* On mobile, hide the top menu and show search inline instead */
-  body[data-menu-position="top"] nav#nav-main-top {
-    display: none !important;
-  }
-  body[data-menu-position="top"] nav#nav-global .search-wrapper-inline {
-    display: block !important;
-  }
-  
-  /* Hide widget buttons on mobile — they're accessible via the inline search and mobile menu */
-  .widget-bar {
-    display: none !important;
-  }
-  
-  /* Hide widget dropdown on mobile */
-  .widget-dropdown {
-    display: none !important;
-  }
-  
-  nav#nav-main {
-    display: none !important;
-    position: fixed;
-    top: var(--global-nav-height);
-    left: 0;
-    width: 100vw;
-    height: calc(100vh - var(--global-nav-height));
-    max-width: none;
-    background: var(--bg-color);
-    z-index: 1000;
-    overflow-y: auto;
-    margin: 0;
-    padding: 0;
-    transform: none; /* Reset desktop transform */
-  }
-  nav#nav-main.active {
-    display: block !important;
-  }
-  nav#nav-main.collapsed {
-    display: none !important;
-    transform: none;
-  }
-  
-  /* Mobile menu list styles */
-  nav#nav-main .mobile-menu-list {
-    list-style: none;
-    margin: 0;
-    padding: 0;
-  }
-  
-  nav#nav-main .mobile-menu-item {
-    border-bottom: 1px solid rgba(128, 128, 128, 0.15);
-  }
-  
-  nav#nav-main .mobile-menu-label {
-    display: block;
-    padding: 14px 20px;
-    color: var(--text-color);
-    text-decoration: none;
-    font-size: 1rem;
-  }
-  
-  nav#nav-main a.mobile-menu-label:hover {
-    background-color: rgba(128, 128, 128, 0.1);
-  }
-  
-  nav#nav-main span.mobile-menu-label {
-    opacity: 0.5;
-  }
-  
-  /* Indent deeper levels */
-  nav#nav-main .mobile-menu-depth-1 .mobile-menu-label { padding-left: 40px; font-size: 0.95rem; }
-  nav#nav-main .mobile-menu-depth-2 .mobile-menu-label { padding-left: 56px; font-size: 0.9rem; }
-  nav#nav-main .mobile-menu-depth-3 .mobile-menu-label { padding-left: 72px; font-size: 0.85rem; }
-  nav#nav-main .mobile-menu-depth-4 .mobile-menu-label { padding-left: 88px; font-size: 0.85rem; }
-  
-  /* Current page highlight in mobile menu */
-  nav#nav-main .mobile-menu-current .mobile-menu-label {
-    font-weight: 600;
-    background-color: rgba(0, 255, 255, 0.1);
-  }
-  
-  /* Home item styling */
-  nav#nav-main .mobile-menu-home .mobile-menu-label {
-    font-weight: 600;
-    border-bottom: 2px solid rgba(128, 128, 128, 0.25);
-  }
-
-  /* Override desktop indentation for mobile */
-  nav#nav-main > ul > li > ul > li > .menu-item-row,
-  nav#nav-main > ul > li > ul > li > ul > li > .menu-item-row,
-  nav#nav-main > ul > li > ul > li > ul > li > ul > li > .menu-item-row {
-    padding-left: 8px;
-  }
-  html {
-    font-size: 18px;
-    /* Prevents zoomed out appearance on mobile */
-    -webkit-text-size-adjust: 100%;
-    text-size-adjust: 100%;
-  }
-}
-
-
-/* sticky unified header */
-article#main-content {
-  h1, h2, h3 {
-    position: sticky;
-    z-index: 90;
-    margin: 0;
-
-    &.stuck {
-      background: var(--nav-top-bg);
-    }
-  }
-  h1 {
-    top: var(--global-nav-height);
-    height: 3rem;
-    line-height: 3rem;
-  }
-  h2 {
-    top: calc(var(--global-nav-height) + 3rem);
-    height: 2.25rem;
-    line-height: 2.25rem;
-  }
-  h3 {
-    top: calc(var(--global-nav-height) + 5.25rem);
-    height: 1.75rem;
-    line-height: 1.75rem;
-  }
-
-  /* Hide stuck h2/h3 — the breadcrumb on the stuck h1 carries their text.
-     Use visibility (not max-height/display) to preserve layout and avoid
-     the flicker loop where collapsing the heading un-sticks it. */
-  h2.stuck, h3.stuck {
-    visibility: hidden;
-  }
-}
+/* =============================================================================
+   Ursa's built-in stylesheet.
+
+   Everything here is scoped, layered, or both, so that a site's own CSS can
+   win without a specificity war:
+
+     @layer ursa.base   – document defaults: :root tokens, html/body.
+     @scope (body) …    – chrome (nav, menu, widgets, footer).  The scope stops
+                          at the article's children, so no rule below can reach
+                          into a page's own content.
+     @layer ursa.content
+       + @scope (article) – everything that styles the document body itself.
+
+   A site's style.css / style-ursa.css / _style.css is *unlayered*, and an
+   unlayered rule beats every layered rule no matter how specific, so a plain
+   `h1 { color: red }` in a site stylesheet now wins over anything Ursa sets on
+   article content — no `#main-content h1` escalation, no !important.
+
+   Chrome is deliberately *not* layered, so that a broad site rule (`a { … }`)
+   can't wreck the navigation.  Its selectors are unchanged from before the
+   scopes were introduced, so a site restyling chrome overrides it the way it
+   always did — with a *more* specific selector, since a scoped rule wins a
+   specificity tie against an unscoped one.  The breadcrumbs are Ursa's too,
+   and get the same treatment even though they render inside the article.
+
+   Anything inside an element with class `ursa-unstyled` is outside every
+   scope here: Ursa's CSS does not apply to it at all.
+   ============================================================================= */
+
+@layer ursa.base, ursa.content;
+
+/* Global, because @keyframes are not scoped. */
+@keyframes ursa-spin {
+  to { transform: rotate(360deg); }
+}
+
+/* Inactive/broken links.  Ursa's own marker class, applied to menu links and
+   document links alike, so it is not layered: a site's
+   `a { text-decoration: none }` should not quietly un-strike a dead link.
+   Scoped only to keep it out of `.ursa-unstyled`. */
+@scope (body) to (.ursa-unstyled) {
+  a.inactive {
+    filter: brightness(0.5);
+    cursor: not-allowed;
+    text-decoration: line-through;
+  }
+}
+
+
+/* --------------------------------------------------------------------------
+   Document defaults.  Layered, so a site stylesheet overrides them freely.
+   -------------------------------------------------------------------------- */
+@layer ursa.base {
+  body, html {
+    margin: 0;
+    padding: 0;
+  }
+  body {
+    font-family: sans-serif;
+  }
+
+  :root {
+    --article-width: 50rem;
+    --global-nav-height: 48px;
+    --twisty-size: 1.1rem;
+  }
+
+  @media (prefers-color-scheme: dark) {
+    :root {
+      --bg-color: #121212;
+      --text-color: #f2f2f2;
+      --nav-top-bg: #242424;
+      --widget-bg: #242424;
+      --widget-border: #3a3a3a;
+    }
+  }
+
+  @media (prefers-color-scheme: light) {
+    :root {
+      --bg-color: white;
+      --text-color: black;
+      --nav-top-bg: #f2f2f2;
+      --widget-bg: #f2f2f2;
+      --widget-border: #ddd;
+    }
+  }
+
+  body {
+    background: var(--bg-color);
+    color: var(--text-color);
+  }
+
+  @media (max-width: 800px) {
+    html {
+      font-size: 18px;
+      /* Prevents zoomed out appearance on mobile */
+      -webkit-text-size-adjust: 100%;
+      text-size-adjust: 100%;
+    }
+  }
+}
+
+
+/* --------------------------------------------------------------------------
+   Chrome: the frame Ursa puts around a document — top nav, side/top menus,
+   widgets, search, footer.  Scoped to the page minus the article's contents,
+   so none of it can reach a document's own markup.  `:scope` here is <body>.
+   -------------------------------------------------------------------------- */
+@scope (body) to (#main-content > *, article > *, .ursa-unstyled) {
+  nav#nav-global {
+    background-color: var(--nav-top-bg);
+    height: var(--global-nav-height);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    display: grid;
+    grid-template-columns: 1fr var(--article-width) 1fr;
+    align-items: center;
+    padding: 0 8px;
+    box-sizing: border-box;
+    z-index: 1001;
+
+    button.menu-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--text-color);
+      line-height: 1;
+      padding: 8px;
+      background: none;
+      border: none;
+      cursor: pointer;
+    }
+
+    /* Three icons live in this button; menu.js says which one is showing by
+       putting its name in data-icon. The attribute is on the markup too, so the
+       hamburger is up before any script runs. */
+    button.menu-button > .ursa-icon {
+      display: none;
+    }
+    button.menu-button[data-icon="menu"] > .ursa-icon[data-icon="menu"],
+    button.menu-button[data-icon="close"] > .ursa-icon[data-icon="close"],
+    button.menu-button[data-icon="home"] > .ursa-icon[data-icon="home"] {
+      display: block;
+    }
+    button.menu-button:hover {
+      opacity: 0.7;
+    }
+
+    /* Left controls: menu button + left-side widgets */
+    .nav-left-controls {
+      display: flex;
+      align-items: center;
+      justify-self: start;
+      gap: 0;
+    }
+
+    /* Center container for search and top menu */
+    .nav-center {
+      width: calc(var(--article-width) + 38px);
+      justify-self: center;
+      position: relative;
+    }
+
+    .search-wrapper {
+      position: relative;
+      width: 100%;
+    }
+
+    input#global-search {
+      width: 100%;
+      height: calc(var(--global-nav-height) - 16px);
+      border-radius: 5px;
+      background: rgba(0,0,0,0.25);
+      color: var(--text-color);
+      border-width: 0px;
+      padding: 0 2.5rem 0 1rem;
+      box-sizing: border-box;
+    }
+
+    .search-clear-button {
+      position: absolute;
+      right: 8px;
+      top: 50%;
+      transform: translateY(-50%);
+      background: none;
+      border: none;
+      color: var(--text-color);
+      font-size: 1.25rem;
+      line-height: 1;
+      cursor: pointer;
+      padding: 4px 8px;
+      opacity: 0.6;
+      transition: opacity 0.2s ease;
+    }
+
+    .search-clear-button:hover {
+      opacity: 1;
+    }
+
+    .search-clear-button.hidden {
+      display: none;
+    }
+  }
+
+  /* ==========================================
+     WIDGET SYSTEM STYLES
+     Nav widgets (TOC, Search, Profile, Recent Activity)
+     ========================================== */
+
+  /* Widget bar in the nav right column */
+  nav#nav-global .nav-right-controls {
+    display: flex;
+    align-items: center;
+    justify-self: end;
+    gap: 0;
+  }
+
+  .widget-bar {
+    display: flex;
+    align-items: center;
+    gap: 0;
+  }
+
+  /* Ursa update indicator (loading spinner in nav bar) */
+  .ursa-update-indicator {
+    display: none;
+    align-items: center;
+    justify-content: center;
+    width: var(--global-nav-height);
+    height: var(--global-nav-height);
+    opacity: 0.7;
+  }
+  .ursa-spinner {
+    width: 14px;
+    height: 14px;
+    border: 2px solid rgba(128, 128, 128, 0.3);
+    border-top-color: rgba(128, 128, 128, 0.8);
+    border-radius: 50%;
+    animation: ursa-spin 0.8s linear infinite;
+  }
+  .ursa-update-gray .ursa-spinner {
+    border-color: rgba(128, 128, 128, 0.3);
+    border-top-color: rgba(128, 128, 128, 0.8);
+  }
+  .ursa-update-green .ursa-spinner {
+    border-color: rgba(76, 175, 80, 0.3);
+    border-top-color: rgba(76, 175, 80, 0.9);
+  }
+
+  .widget-button {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: none;
+    border: none;
+    color: var(--text-color);
+    font-size: 1.1rem;
+    width: var(--global-nav-height);
+    height: var(--global-nav-height);
+    cursor: pointer;
+    opacity: 0.7;
+    transition: opacity 0.15s ease, background-color 0.15s ease;
+  }
+
+  .widget-button:hover {
+    opacity: 1;
+    background-color: rgba(128, 128, 128, 0.15);
+  }
+
+  .widget-button.active {
+    opacity: 1;
+    background-color: var(--widget-bg);
+  }
+
+  .widget-icon {
+    pointer-events: none;
+    display: flex;
+  }
+
+  /* Tabler's outline icons, inlined in index.html. Everything the whole set
+     shares is here rather than repeated as presentation attributes on each of
+     them — which also means a theme can restyle them as CSS, and that they take
+     their colour from whatever the button they sit in is using. */
+  .ursa-icon {
+    width: 20px;
+    height: 20px;
+    fill: none;
+    stroke: currentColor;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  /* Widget dropdown panel (right-side, default) */
+  .widget-dropdown {
+    position: fixed;
+    top: var(--global-nav-height);
+    right: 0;
+    width: min(420px, 100vw);
+    max-height: calc(100vh - var(--global-nav-height));
+    overflow-y: auto;
+    background: var(--widget-bg);
+    border-left: 1px solid var(--widget-border);
+    border-bottom: 1px solid var(--widget-border);
+    box-shadow: -2px 4px 12px rgba(0, 0, 0, 0.2);
+    z-index: 1100;
+    transition: opacity 0.15s ease;
+  }
+
+  /* Widget dropdown panel (left-side) */
+  .widget-dropdown.widget-dropdown-left {
+    right: auto;
+    left: 0;
+    border-left: none;
+    border-right: 1px solid var(--widget-border);
+    box-shadow: 2px 4px 12px rgba(0, 0, 0, 0.2);
+  }
+
+  .widget-dropdown.hidden {
+    display: none;
+  }
+
+  /* Widget header with title and close button */
+  .widget-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--widget-border);
+  }
+
+  .widget-header-title {
+    font-weight: 600;
+    font-size: 0.85rem;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    opacity: 0.7;
+  }
+
+  .widget-close-btn {
+    background: none;
+    border: none;
+    color: var(--text-color);
+    font-size: 1rem;
+    cursor: pointer;
+    opacity: 0.5;
+    padding: 4px 8px;
+    line-height: 1;
+    border-radius: 3px;
+    transition: opacity 0.15s ease, background-color 0.15s ease;
+  }
+
+  .widget-close-btn:hover {
+    opacity: 1;
+    background-color: rgba(128, 128, 128, 0.2);
+  }
+
+  /* Widget content panels — only the active one is visible */
+  .widget-content {
+    display: none;
+  }
+
+  .widget-content.active {
+    display: block;
+  }
+
+  /* The TOC panel.
+
+     Every other widget is a drawer: you pull it open, read it, and shut it
+     again, so an opaque slab pinned to the corner of the screen is the right
+     shape for one. The TOC is not that — it is open more or less permanently
+     (see defaultOpen in widgets.js), and a permanent opaque slab overlapping
+     the article is just a piece of the page missing.
+
+     So when the right-hand dropdown is showing the TOC it stops being a drawer
+     and becomes a panel standing in the margin beside the article: translucent,
+     hairline-bordered, and narrow enough that it never reaches the text.
+
+     The width is the margin itself, less a gutter at each end. `50%` on a fixed
+     element is half the viewport *excluding* the scrollbar, which is what the
+     centred article is centred in — 100vw includes the scrollbar and would put
+     the panel a few pixels into the text. --ursa-toc-max is only a ceiling, for
+     very wide screens where the whole margin would be an absurd measure to read
+     a list of headings across. */
+  .widget-dropdown[data-active-widget="toc"] {
+    --ursa-toc-gutter: 1rem;
+    --ursa-toc-max: 20rem;
+
+    top: calc(var(--global-nav-height) + var(--ursa-toc-gutter));
+    right: var(--ursa-toc-gutter);
+    width: min(
+      var(--ursa-toc-max),
+      calc(50% - var(--article-width) / 2 - var(--ursa-toc-gutter) * 2)
+    );
+    max-height: calc(100vh - var(--global-nav-height) - var(--ursa-toc-gutter) * 2);
+
+    /* A translucent version of whatever the theme's panel colour is, so a site
+       that sets --widget-bg gets its own tint here for free. */
+    background: color-mix(in srgb, var(--widget-bg) 48%, transparent);
+    backdrop-filter: blur(5px);
+    -webkit-backdrop-filter: blur(5px);
+    border: 1px solid var(--widget-border);
+    border-radius: 8px;
+    box-shadow: none;
+  }
+
+  /* Below this there is no margin worth standing in: a panel there would be a
+     column of broken words, or would have to sit on top of the article. So the
+     TOC changes shape instead of going away — the same list, laid on its side,
+     one line tall, along the bottom of the viewport. It is still the same
+     widget: the same button opens and closes it, and toc-generator.js is what
+     keeps the current section in the middle of it.
+
+     The figure is --article-width (50rem = 800px by default) plus room for a
+     usable panel either side of it. It has to be a plain length because media
+     queries cannot read custom properties; a site that moves --article-width
+     a long way will want to move this with it. */
+  @media (max-width: 1280px) {
+    .widget-dropdown[data-active-widget="toc"] {
+      /* How much of each end is fade rather than solid. The list carries the
+         same figure as padding, so at either extreme of the scroll the first
+         and last entries sit past the fade and are not dimmed by it — the fade
+         only ever covers the overrun. */
+      --ursa-toc-fade: 1.5rem;
+
+      top: auto;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      width: auto;
+      max-height: none;
+      border: none;
+      border-top: 1px solid var(--widget-border);
+      border-radius: 0;
+      overflow: hidden;
+    }
+
+    /* The title and close button are drawer furniture; the strip is one line
+       tall and the nav button is what closes it. */
+    .widget-dropdown[data-active-widget="toc"] .widget-header {
+      display: none;
+    }
+
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc {
+      padding: 0;
+      /* Scrolled by script, and by hand: a drag or a swipe along the strip
+         works, which is worth having on the touch screens this width mostly
+         means. The scrollbar itself would be half the height of the strip. */
+      overflow-x: auto;
+      overflow-y: hidden;
+      scrollbar-width: none;
+      -webkit-mask-image: linear-gradient(to right,
+        transparent 0,
+        #000 var(--ursa-toc-fade),
+        #000 calc(100% - var(--ursa-toc-fade)),
+        transparent 100%);
+              mask-image: linear-gradient(to right,
+        transparent 0,
+        #000 var(--ursa-toc-fade),
+        #000 calc(100% - var(--ursa-toc-fade)),
+        transparent 100%);
+    }
+
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc::-webkit-scrollbar {
+      display: none;
+    }
+
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc ul {
+      display: flex;
+      flex-wrap: nowrap;
+      width: max-content;
+      padding-inline: var(--ursa-toc-fade);
+    }
+
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc li {
+      margin-bottom: 0;
+    }
+
+    /* Every heading level is one entry in a line, so the left-hand indent that
+       shows depth in the panel has nothing to indent from here. Depth is told
+       by weight and size instead, and the active marker moves from the left
+       edge to underneath. */
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc li > a {
+      white-space: nowrap;
+      padding: 0.4rem 0.7rem;
+      border-left: none;
+      border-bottom: 2px solid transparent;
+    }
+
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc li > a:hover {
+      border-left-color: transparent;
+      border-bottom-color: var(--text-color);
+    }
+
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc li > a.active {
+      border-left-color: transparent;
+      border-bottom-color: aqua;
+    }
+
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc li.toc-h1 > a { padding-left: 0.7rem; }
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc li.toc-h2 > a { padding-left: 0.7rem; }
+    .widget-dropdown[data-active-widget="toc"] #widget-content-toc li.toc-h3 > a { padding-left: 0.7rem; }
+  }
+
+  /* --- TOC Widget --- */
+  #widget-content-toc {
+    padding: 0.5rem 0;
+
+    ul {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+
+      li {
+        margin-bottom: 0.15rem;
+        padding: 0;
+
+        > a {
+          text-decoration: none;
+          color: var(--text-color);
+          opacity: 0.75;
+          display: block;
+          padding: 0.3rem 1rem;
+          border-left: 2px solid transparent;
+          transition: all 0.2s ease;
+          font-size: 0.9rem;
+        }
+
+        > a:hover {
+          opacity: 1;
+          border-left-color: var(--text-color);
+          background-color: rgba(128, 128, 128, 0.1);
+        }
+
+        > a.active {
+          opacity: 1;
+          border-left-color: aqua;
+          background-color: rgba(0, 255, 255, 0.1);
+        }
+
+        /* Indent nested headings */
+        &.toc-h1 > a {
+          padding-left: 1rem;
+          font-weight: 600;
+        }
+
+        &.toc-h2 > a {
+          padding-left: 1.5rem;
+          font-size: 0.85rem;
+        }
+
+        &.toc-h3 > a {
+          padding-left: 2rem;
+          font-size: 0.8rem;
+        }
+      }
+    }
+  }
+
+  /* --- Search Widget --- */
+  .widget-search-wrapper {
+    padding: 0.5rem;
+  }
+
+  .widget-search-input {
+    width: 100%;
+    height: 40px;
+    border-radius: 5px;
+    background: rgba(0, 0, 0, 0.15);
+    color: var(--text-color);
+    border: 1px solid var(--widget-border);
+    padding: 0 1rem;
+    box-sizing: border-box;
+    font-size: 1rem;
+  }
+
+  .widget-search-input:focus {
+    outline: none;
+    border-color: aqua;
+    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.2);
+  }
+
+  .widget-search-results {
+    max-height: calc(100vh - var(--global-nav-height) - 80px);
+    overflow-y: auto;
+  }
+
+  .widget-search-results .search-result-item {
+    padding: 10px 12px;
+    border-bottom: 1px solid var(--widget-border);
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  .widget-search-results .search-result-item:last-child {
+    border-bottom: none;
+  }
+
+  .widget-search-results .search-result-item:hover,
+  .widget-search-results .search-result-item.selected {
+    background-color: rgba(128, 128, 128, 0.15);
+  }
+
+  .widget-search-results .search-result-title {
+    font-weight: 600;
+    margin-bottom: 2px;
+    color: var(--text-color);
+    font-size: 0.9rem;
+  }
+
+  .widget-search-results .search-result-path {
+    font-size: 0.8rem;
+    color: var(--text-color);
+    opacity: 0.6;
+  }
+
+  .widget-search-results .search-result-message {
+    padding: 12px;
+    text-align: center;
+    color: var(--text-color);
+    opacity: 0.6;
+    font-style: italic;
+    font-size: 0.85rem;
+  }
+
+  .widget-search-results .search-section-header {
+    padding: 6px 12px;
+    font-size: 0.7em;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-color);
+    opacity: 0.5;
+    background-color: rgba(128, 128, 128, 0.1);
+    border-bottom: 1px solid var(--widget-border);
+  }
+
+  /* --- Profile Widget --- */
+  .widget-profile-placeholder {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 2rem 1rem;
+    text-align: center;
+    color: var(--text-color);
+    opacity: 0.7;
+  }
+
+  .widget-profile-avatar {
+    font-size: 3rem;
+    margin-bottom: 1rem;
+  }
+
+  .widget-profile-placeholder p {
+    margin: 0.5rem 0;
+    font-size: 0.9rem;
+  }
+
+  .widget-profile-signin {
+    margin-top: 0.5rem;
+    padding: 8px 24px;
+    background: var(--nav-top-bg);
+    border: 1px solid var(--widget-border);
+    color: var(--text-color);
+    border-radius: 4px;
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+  .widget-profile-note {
+    font-size: 0.75rem;
+    opacity: 0.5;
+    font-style: italic;
+  }
+
+  /* --- Recent Activity Widget --- */
+  .recent-activity-list {
+    padding: 0;
+  }
+
+  .recent-activity-loading,
+  .recent-activity-empty {
+    padding: 1.5rem 1rem;
+    text-align: center;
+    color: var(--text-color);
+    opacity: 0.6;
+    font-style: italic;
+    font-size: 0.85rem;
+  }
+
+  .recent-activity-items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .recent-activity-item {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--widget-border);
+    transition: background-color 0.15s ease;
+  }
+
+  .recent-activity-item:last-child {
+    border-bottom: none;
+  }
+
+  .recent-activity-item:hover {
+    background-color: rgba(128, 128, 128, 0.1);
+  }
+
+  .recent-activity-link {
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 0.9rem;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .recent-activity-link:hover {
+    text-decoration: underline;
+  }
+
+  .recent-activity-time {
+    font-size: 0.75rem;
+    color: var(--text-color);
+    opacity: 0.5;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* Suggested Content Widget Styles */
+  .suggested-content-list {
+    padding: 0;
+  }
+
+  .suggested-empty {
+    padding: 1rem 0.75rem;
+    text-align: center;
+    color: var(--text-color);
+    opacity: 0.6;
+    font-style: italic;
+    font-size: 0.85rem;
+  }
+
+  .suggested-items {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .suggested-item {
+    display: flex;
+    align-items: baseline;
+    justify-content: space-between;
+    gap: 0.75rem;
+    padding: 0.5rem 0.75rem;
+    border-bottom: 1px solid var(--widget-border);
+    transition: background-color 0.15s ease;
+  }
+
+  .suggested-item:last-child {
+    border-bottom: none;
+  }
+
+  .suggested-item:hover {
+    background-color: rgba(128, 128, 128, 0.1);
+  }
+
+  .suggested-link {
+    color: var(--text-color);
+    text-decoration: none;
+    font-size: 0.9rem;
+    flex: 1;
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .suggested-link:hover {
+    text-decoration: underline;
+  }
+
+  .suggested-meta {
+    font-size: 0.75rem;
+    color: var(--text-color);
+    opacity: 0.5;
+    white-space: nowrap;
+    flex-shrink: 0;
+  }
+
+  /* Search functionality styles */
+  .search-results {
+    position: fixed;
+    top: calc(var(--global-nav-height) + 4px);
+    left: 50%;
+    transform: translateX(-50%);
+    width: min(var(--article-width), calc(100vw - 100px));
+    background: var(--bg-color);
+    border: 1px solid var(--nav-top-bg);
+    border-radius: 5px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+    max-height: 400px;
+    overflow-y: auto;
+    z-index: 1002;
+  }
+
+  .search-results.hidden {
+    display: none;
+  }
+
+  .search-result-item {
+    padding: 12px 16px;
+    border-bottom: 1px solid var(--nav-top-bg);
+    cursor: pointer;
+    transition: background-color 0.2s ease;
+  }
+
+  .search-result-item:last-child {
+    border-bottom: none;
+  }
+
+  .search-result-item:hover,
+  .search-result-item.selected {
+    background-color: var(--nav-top-bg);
+  }
+
+  .search-result-title {
+    font-weight: 600;
+    margin-bottom: 4px;
+    color: var(--text-color);
+  }
+
+  .search-result-path {
+    font-size: 0.85em;
+    color: var(--text-color);
+    opacity: 0.7;
+  }
+
+  .search-result-message {
+    padding: 16px;
+    text-align: center;
+    color: var(--text-color);
+    opacity: 0.7;
+    font-style: italic;
+  }
+
+  /* Search section styling (for combined path/full-text results) */
+  .search-section {
+    border-bottom: 1px solid var(--nav-top-bg);
+  }
+
+  .search-section:last-child {
+    border-bottom: none;
+  }
+
+  .search-section-header {
+    padding: 8px 16px;
+    font-size: 0.75em;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    color: var(--text-color);
+    opacity: 0.6;
+    background-color: color-mix(in srgb, var(--nav-top-bg) 50%, transparent);
+    border-bottom: 1px solid var(--nav-top-bg);
+  }
+
+  .search-show-more {
+    display: block;
+    width: 100%;
+    padding: 8px 16px;
+    background: transparent;
+    border: none;
+    color: var(--link-color);
+    font-size: 0.85em;
+    cursor: pointer;
+    text-align: center;
+    transition: background-color 0.2s ease;
+  }
+
+  .search-show-more:hover {
+    background-color: var(--nav-top-bg);
+    text-decoration: underline;
+  }
+
+  /* ==========================================
+     TOP NAVIGATION MENU STYLES
+     When body[data-menu-position="top"] is set
+     ========================================== */
+
+  /* Top menu container - positioning handled by parent .nav-center */
+  nav#nav-main-top {
+    display: none;
+    width: 100%;
+  }
+
+  /* Show top menu when position is top */
+  :scope[data-menu-position="top"] nav#nav-main-top {
+    display: flex;
+    align-items: center;
+  }
+
+  /* Hide inline search when top menu is present — widget handles search */
+  :scope[data-menu-position="top"] nav#nav-global .search-wrapper-inline {
+    display: none;
+  }
+
+  /* Hide side nav when top menu is active */
+  :scope[data-menu-position="top"] nav#nav-main {
+    display: none;
+  }
+
+
+  /* Update nav-global grid to accommodate top menu - keep search+avatar together on right */
+  :scope[data-menu-position="top"] nav#nav-global {
+    grid-template-columns: 1fr var(--article-width) 1fr;
+  }
+
+  /* Top-level menu list */
+  nav#nav-main-top .top-menu-level {
+    display: flex;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    gap: 0;
+  }
+
+  /* Top-level menu items */
+  nav#nav-main-top .top-menu-item {
+    position: relative;
+    padding: 0;
+    margin: 0;
+  }
+
+  nav#nav-main-top .top-menu-label {
+    display: block;
+    padding: 0px 16px;
+    line-height: var(--global-nav-height);
+    color: var(--text-color);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  nav#nav-main-top .top-menu-label:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  nav#nav-main-top a.top-menu-label:hover {
+    text-decoration: none;
+  }
+
+  /* Dropdown indicator for items with children */
+  nav#nav-main-top .top-menu-item.has-dropdown > .top-menu-label::after {
+    content: '▼';
+    font-size: 0.4em;
+    margin-left: 6px;
+    opacity: 0.6;
+    vertical-align: bottom;
+  }
+
+  /* Use widget-bg for dropdown/flyout backgrounds (shared CSS var) */
+  nav#nav-main-top .top-menu-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    min-width: 200px;
+    max-height: calc(100vh - var(--global-nav-height) - 20px);
+    overflow-y: auto;
+    background-color: var(--widget-bg);
+    border: 1px solid var(--widget-border);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    z-index: 1005;
+  }
+
+  /* Show dropdown on hover */
+  nav#nav-main-top .top-menu-item.has-dropdown:hover > .top-menu-dropdown {
+    display: block;
+  }
+
+  /* Dropdown items */
+  nav#nav-main-top .dropdown-item {
+    position: relative;
+  }
+
+  nav#nav-main-top .dropdown-label {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 8px 16px;
+    color: var(--text-color);
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+  }
+
+  nav#nav-main-top .dropdown-label:hover {
+    background-color: rgba(255, 255, 255, 0.1);
+  }
+
+  nav#nav-main-top a.dropdown-label:hover {
+    text-decoration: none;
+  }
+
+  /* Flyout indicator */
+  nav#nav-main-top .flyout-indicator {
+    font-size: 0.7em;
+    opacity: 0.6;
+    margin-left: 8px;
+  }
+
+  /* Flyout menu (nested children) - uses fixed positioning to avoid clipping by parent overflow */
+  nav#nav-main-top .top-menu-flyout {
+    display: none;
+    position: fixed;
+    min-width: 200px;
+    max-height: calc(100vh - var(--global-nav-height) - 40px);
+    overflow-y: auto;
+    background-color: var(--widget-bg);
+    border: 1px solid var(--widget-border);
+    border-radius: 4px;
+    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    z-index: 1006;
+    /* JS will set top/left via inline styles */
+  }
+
+  /* Show flyout on hover - JS handles positioning */
+  nav#nav-main-top .dropdown-item.has-flyout:hover > .top-menu-flyout {
+    display: block;
+  }
+
+  nav#nav-main {
+    position: fixed;
+    top: calc(var(--global-nav-height));
+    left: 0;
+    width: 260px;
+    max-height: calc(100vh - var(--global-nav-height));
+    overflow: hidden;
+    padding: 0;
+    font-size: 0.85rem;
+    transition: transform 0.2s ease;
+  }
+
+  /* Collapsed state for desktop - slide off screen */
+  nav#nav-main.collapsed {
+    transform: translateX(-100%);
+  }
+
+  nav#nav-main {
+    /* Column-based menu styles */
+
+    .menu-loading {
+      padding: 1rem;
+      opacity: 0.6;
+      text-align: center;
+    }
+
+    /* Container that clips the columns */
+    .menu-columns-container {
+      width: 100%;
+      height: calc(100vh - var(--global-nav-height) - 40px);
+      overflow: hidden;
+      position: relative;
+    }
+
+    /* Wrapper that holds all columns and transforms for scrolling */
+    .menu-columns-wrapper {
+      display: flex;
+      height: 100%;
+      min-height: 0; /* Allow flex children to shrink */
+      transition: transform 0.25s ease-out;
+    }
+
+    /* Individual column */
+    .menu-column {
+      width: 130px;
+      min-width: 130px;
+      flex-shrink: 0;
+      height: 100%;
+      min-height: 0; /* Allow flex child to shrink and enable scrolling */
+      overflow-y: auto;
+      overflow-x: hidden;
+      border-right: 1px solid rgba(128, 128, 128, 0.15);
+
+      /* Scrollbar styling */
+      &::-webkit-scrollbar {
+        width: 4px;
+      }
+      &::-webkit-scrollbar-track {
+        background: transparent;
+      }
+      &::-webkit-scrollbar-thumb {
+        background: rgba(128, 128, 128, 0.2);
+        border-radius: 2px;
+      }
+      &::-webkit-scrollbar-thumb:hover {
+        background: rgba(128, 128, 128, 0.4);
+      }
+    }
+
+    .menu-column:last-child {
+      border-right: none;
+    }
+
+    /* Column list */
+    .menu-column-list {
+      list-style: none;
+      margin: 0;
+      padding: 4px 0;
+    }
+
+    /* Column item */
+    .menu-column-item {
+      margin: 0;
+      padding: 0;
+    }
+
+    .menu-column-item-row {
+      display: flex;
+      align-items: center;
+      padding: 6px 8px;
+      margin: 1px 4px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background-color 0.15s ease;
+      gap: 4px;
+    }
+
+    .menu-column-item-row:hover {
+      background-color: rgba(128, 128, 128, 0.15);
+    }
+
+    /* Label styling */
+    .menu-column-label {
+      flex: 1;
+      text-decoration: none;
+      color: var(--text-color);
+      opacity: 0.85;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      font-weight: 400;
+      line-height: 1.3;
+      text-transform: capitalize;
+      font-size: 0.8rem;
+    }
+
+    .menu-column-item-row:hover .menu-column-label {
+      opacity: 1;
+    }
+
+    /* Arrow for folders */
+    .menu-column-arrow {
+      opacity: 0.4;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+
+    .menu-column-item.has-children .menu-column-item-row:hover .menu-column-arrow {
+      opacity: 0.8;
+    }
+
+    /* Selected item (on path to current doc) */
+    .menu-column-item.selected > .menu-column-item-row {
+      background-color: rgba(128, 128, 128, 0.2);
+    }
+
+    .menu-column-item.selected > .menu-column-item-row .menu-column-label {
+      font-weight: 500;
+      opacity: 1;
+    }
+
+    /* Current page item */
+    .menu-column-item.current-page > .menu-column-item-row {
+      background-color: rgba(0, 255, 255, 0.2);
+    }
+
+    .menu-column-item.current-page > .menu-column-item-row .menu-column-label {
+      font-weight: 600;
+      opacity: 1;
+    }
+
+    /* Index file styling - appears at top of menu with subtle emphasis */
+    .menu-column-item.is-index > .menu-column-item-row {
+      border-bottom: 1px solid rgba(128, 128, 128, 0.15);
+      margin-bottom: 4px;
+      padding-bottom: 8px;
+    }
+
+    .menu-column-item.is-index > .menu-column-item-row .menu-column-label {
+      font-weight: 500;
+      opacity: 0.95;
+    }
+
+    /* Scroll buttons */
+    .menu-scroll-btn {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 24px;
+      height: 48px;
+      background: rgba(0, 0, 0, 0.4);
+      border: none;
+      color: var(--text-color);
+      font-size: 18px;
+      cursor: pointer;
+      z-index: 10;
+      border-radius: 4px;
+      transition: all 0.2s ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .menu-scroll-btn:hover:not(:disabled) {
+      background: rgba(0, 0, 0, 0.6);
+    }
+
+    .menu-scroll-btn:disabled {
+      cursor: default;
+    }
+
+    .menu-scroll-btn.scroll-left {
+      left: 2px;
+    }
+
+    .menu-scroll-btn.scroll-right {
+      right: 2px;
+    }
+
+    /* Scroll indicator for current doc */
+    .menu-scroll-indicator {
+      position: absolute;
+      bottom: 8px;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+    }
+
+    .menu-scroll-indicator .scroll-to-current {
+      background: rgba(0, 255, 255, 0.3);
+      border: 1px solid rgba(0, 255, 255, 0.5);
+      color: var(--text-color);
+      padding: 4px 12px;
+      border-radius: 12px;
+      font-size: 0.75rem;
+      cursor: pointer;
+      transition: all 0.2s ease;
+      white-space: nowrap;
+    }
+
+    .menu-scroll-indicator .scroll-to-current:hover {
+      background: rgba(0, 255, 255, 0.5);
+    }
+  }
+
+  /* Footer styles */
+  footer#site-footer {
+    width: var(--article-width);
+    margin: 3rem auto 2rem auto;
+    padding-top: 2rem;
+    border-top: 1px solid rgba(128, 128, 128, 0.3);
+    text-align: center;
+
+    .footer-content {
+      margin-bottom: 1.5rem;
+      font-size: 0.95rem;
+      opacity: 0.85;
+    }
+
+    .footer-meta {
+      font-size: 0.8rem;
+      opacity: 0.6;
+      margin-bottom: 0.5rem;
+
+      a {
+        color: inherit;
+      }
+    }
+
+    .footer-copyright {
+      font-size: 0.8rem;
+      opacity: 0.6;
+    }
+  }
+
+  @media (max-width: 800px) {
+    footer#site-footer {
+      width: calc(100vw - 2rem);
+      margin: 3rem 1rem 2rem 1rem;
+    }
+  }
+
+  @media (max-width: 800px) {
+    nav#nav-global {
+      display: flex;
+
+      .search-wrapper {
+        flex: 1;
+        width: auto;
+        max-width: none;
+        margin: 0 8px;
+      }
+
+      input#global-search {
+        width: 100%;
+      }
+    }
+
+    /* On mobile, hide the top menu and show search inline instead */
+    :scope[data-menu-position="top"] nav#nav-main-top {
+      display: none !important;
+    }
+    :scope[data-menu-position="top"] nav#nav-global .search-wrapper-inline {
+      display: block !important;
+    }
+
+    /* Hide widget buttons on mobile — they're accessible via the inline search
+       and mobile menu. The TOC is the exception: its strip presentation was
+       built for a viewport this narrow, so its button stays. An empty
+       .widget-bar is a flex box with no children and takes up no room, so the
+       left-hand bar needs no rule of its own. */
+    .widget-button:not([data-widget="toc"]) {
+      display: none !important;
+    }
+
+    /* Hide widget dropdowns on mobile — except the TOC, which becomes the strip
+       along the bottom of the viewport rather than a drawer over the article. */
+    .widget-dropdown:not([data-active-widget="toc"]) {
+      display: none !important;
+    }
+
+    nav#nav-main {
+      display: none !important;
+      position: fixed;
+      top: var(--global-nav-height);
+      left: 0;
+      width: 100vw;
+      height: calc(100vh - var(--global-nav-height));
+      max-width: none;
+      background: var(--bg-color);
+      z-index: 1000;
+      overflow-y: auto;
+      margin: 0;
+      padding: 0;
+      transform: none; /* Reset desktop transform */
+    }
+    nav#nav-main.active {
+      display: block !important;
+    }
+    nav#nav-main.collapsed {
+      display: none !important;
+      transform: none;
+    }
+
+    /* Mobile menu list styles */
+    nav#nav-main .mobile-menu-list {
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+
+    nav#nav-main .mobile-menu-item {
+      border-bottom: 1px solid rgba(128, 128, 128, 0.15);
+    }
+
+    nav#nav-main .mobile-menu-label {
+      display: block;
+      padding: 14px 20px;
+      color: var(--text-color);
+      text-decoration: none;
+      font-size: 1rem;
+    }
+
+    nav#nav-main a.mobile-menu-label:hover {
+      background-color: rgba(128, 128, 128, 0.1);
+    }
+
+    nav#nav-main span.mobile-menu-label {
+      opacity: 0.5;
+    }
+
+    /* Indent deeper levels */
+    nav#nav-main .mobile-menu-depth-1 .mobile-menu-label { padding-left: 40px; font-size: 0.95rem; }
+    nav#nav-main .mobile-menu-depth-2 .mobile-menu-label { padding-left: 56px; font-size: 0.9rem; }
+    nav#nav-main .mobile-menu-depth-3 .mobile-menu-label { padding-left: 72px; font-size: 0.85rem; }
+    nav#nav-main .mobile-menu-depth-4 .mobile-menu-label { padding-left: 88px; font-size: 0.85rem; }
+
+    /* Current page highlight in mobile menu */
+    nav#nav-main .mobile-menu-current .mobile-menu-label {
+      font-weight: 600;
+      background-color: rgba(0, 255, 255, 0.1);
+    }
+
+    /* Home item styling */
+    nav#nav-main .mobile-menu-home .mobile-menu-label {
+      font-weight: 600;
+      border-bottom: 2px solid rgba(128, 128, 128, 0.25);
+    }
+
+    /* Override desktop indentation for mobile */
+    nav#nav-main > ul > li > ul > li > .menu-item-row,
+    nav#nav-main > ul > li > ul > li > ul > li > .menu-item-row,
+    nav#nav-main > ul > li > ul > li > ul > li > ul > li > .menu-item-row {
+      padding-left: 8px;
+    }
+  }
+}
+
+
+/* Breadcrumbs render inside the article but they are Ursa's, not the
+   document's, so they get their own scope and stay out of the layer below:
+   a site's `a { … }` should no more restyle them than it restyles the nav. */
+@scope (nav.breadcrumbs) {
+  :scope {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0;
+    font-size: 0.8rem;
+    margin-bottom: 0.25rem;
+    color: var(--text-color);
+    opacity: 0.55;
+  }
+
+  .breadcrumb-link {
+    color: var(--text-color);
+    text-decoration: none;
+    transition: opacity 0.15s ease;
+  }
+
+  .breadcrumb-link:hover {
+    opacity: 1;
+    text-decoration: underline;
+  }
+
+  .breadcrumb-sep {
+    margin: 0 0.4em;
+    opacity: 0.4;
+    font-size: 0.85em;
+  }
+
+  .breadcrumb-current {
+    font-weight: 500;
+  }
+}
+
+
+/* --------------------------------------------------------------------------
+   Document content.  Layered *and* scoped: layered so site CSS always wins,
+   scoped so these rules never touch the chrome.
+   -------------------------------------------------------------------------- */
+@layer ursa.content {
+
+  /* Typography and flow for any template's article body. */
+  @scope (article, #main-content) to (.ursa-unstyled) {
+    h1 {
+      max-width: var(--article-width);
+      overflow: hidden ;
+      text-overflow: ellipsis;
+    }
+
+    h1,h2,h3 {
+      clear: both;
+    }
+
+    figure {
+      margin: 0.5rem 0;
+      padding: 0;
+      max-width: 300px;
+      float: left;
+      clear: both;
+      margin-right: 1.5rem;
+      margin-bottom: 0.5rem;
+
+      &:nth-of-type(even) {
+        float: right;
+        margin-left: 1.5rem;
+        margin-right: 0;
+      }
+    }
+
+    @media (max-width: 800px) {
+      h1 {
+        font-size: 1.5rem;
+      }
+    }
+  }
+
+  /* The default template's article: its box, its breadcrumbs, its sticky
+     headings.  `:scope` here is <article id="main-content">. */
+  @scope (article#main-content) to (.ursa-unstyled) {
+    :scope {
+      width: var(--article-width);
+      margin: calc(var(--global-nav-height) + 16px) auto 0 auto;
+    }
+
+    img {
+      max-width: 100%;
+    }
+
+    /* Full-width article when side nav is hidden */
+    body[data-menu-position="top"] :scope {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    /* When nav is collapsed, article can use full width */
+    body:has(nav#nav-main.collapsed) :scope {
+      margin-left: auto;
+      margin-right: auto;
+    }
+
+    @media (max-width: 800px) {
+      :scope {
+        width: calc(100vw - 2rem);
+        margin: calc(var(--global-nav-height) + 16px) 1rem 0 1rem;
+      }
+    }
+
+    /* sticky unified header */
+    h1, h2, h3 {
+      position: sticky;
+      z-index: 90;
+      margin: 0;
+
+      &.stuck {
+        background: var(--nav-top-bg);
+      }
+    }
+    h1 {
+      top: var(--global-nav-height);
+      height: 3rem;
+      line-height: 3rem;
+    }
+    h2 {
+      top: calc(var(--global-nav-height) + 3rem);
+      height: 2.25rem;
+      line-height: 2.25rem;
+    }
+    h3 {
+      top: calc(var(--global-nav-height) + 5.25rem);
+      height: 1.75rem;
+      line-height: 1.75rem;
+    }
+
+    /* Hide stuck h2/h3 — the breadcrumb on the stuck h1 carries their text.
+       Use visibility (not max-height/display) to preserve layout and avoid
+       the flicker loop where collapsing the heading un-sticks it. */
+    h2.stuck, h3.stuck {
+      visibility: hidden;
+    }
+  }
+}