forgecad 0.6.3 → 0.8.0

package/dist/assets/{index-2hfs_ub0.css → index-ay13WNfa.css}

@@ -102,6 +102,26 @@ button:disabled {
 .fc-btn:active {
   background: var(--fc-bgActive);
 }
+/* Card-style button: stacked title + description, full-width */
+.fc-btn.fc-btn-card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  white-space: normal;
+  width: 100%;
+  text-align: left;
+  padding: 8px 12px;
+  gap: 2px;
+}
+.fc-btn-card .fc-btn-card-title {
+  font-weight: 600;
+  line-height: 1.3;
+}
+.fc-btn-card .fc-btn-card-desc {
+  font-size: 11px;
+  color: var(--fc-textDim);
+  line-height: 1.3;
+}
 .fc-btn.active {
   background: var(--fc-accent);
   color: var(--fc-accentText);
@@ -111,6 +131,313 @@ button:disabled {
   filter: brightness(1.1);
 }
 
+/* --- App crash recovery --- */
+.fc-crash-shell {
+  position: relative;
+  min-height: 100vh;
+  padding: calc(env(safe-area-inset-top, 0px) + 24px) 16px calc(env(safe-area-inset-bottom, 0px) + 24px);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: auto;
+  background:
+    radial-gradient(circle at top left, color-mix(in srgb, var(--fc-accent) 20%, transparent), transparent 38%),
+    radial-gradient(circle at bottom right, color-mix(in srgb, var(--fc-error) 22%, transparent), transparent 34%),
+    linear-gradient(180deg, var(--fc-bg), var(--fc-bgOverlay));
+  color: var(--fc-text);
+}
+
+.fc-crash-orb {
+  position: fixed;
+  border-radius: 999px;
+  filter: blur(42px);
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.fc-crash-orb--one {
+  width: 220px;
+  height: 220px;
+  top: 8vh;
+  left: -60px;
+  background: color-mix(in srgb, var(--fc-accent) 55%, transparent);
+}
+
+.fc-crash-orb--two {
+  width: 260px;
+  height: 260px;
+  right: -80px;
+  bottom: 6vh;
+  background: color-mix(in srgb, var(--fc-error) 42%, transparent);
+}
+
+.fc-crash-panel {
+  position: relative;
+  width: min(720px, 100%);
+  padding: 22px;
+  border-radius: 24px;
+  border: 1px solid var(--fc-border);
+  background: color-mix(in srgb, var(--fc-bgPanel) 88%, transparent);
+  box-shadow:
+    0 24px 80px rgba(0, 0, 0, 0.28),
+    inset 0 1px 0 rgba(255, 255, 255, 0.04);
+  backdrop-filter: blur(18px);
+  -webkit-backdrop-filter: blur(18px);
+}
+
+.fc-crash-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  min-height: 28px;
+  padding: 0 10px;
+  margin-bottom: 16px;
+  border-radius: 999px;
+  background: color-mix(in srgb, var(--fc-errorBg) 76%, transparent);
+  border: 1px solid color-mix(in srgb, var(--fc-error) 34%, var(--fc-border));
+  color: var(--fc-error);
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.fc-crash-hero {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+}
+
+.fc-crash-icon {
+  width: 56px;
+  height: 56px;
+  border-radius: 18px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 28px;
+  background:
+    linear-gradient(135deg, color-mix(in srgb, var(--fc-error) 24%, transparent), color-mix(in srgb, var(--fc-accent) 18%, transparent)),
+    var(--fc-bg);
+  border: 1px solid color-mix(in srgb, var(--fc-error) 18%, var(--fc-border));
+}
+
+.fc-crash-title {
+  margin-bottom: 8px;
+  font-size: clamp(24px, 4vw, 32px);
+  line-height: 1.05;
+  font-weight: 800;
+  letter-spacing: -0.03em;
+}
+
+.fc-crash-copy {
+  max-width: 56ch;
+  color: var(--fc-textMuted);
+  font-size: 14px;
+  line-height: 1.6;
+}
+
+.fc-crash-error-card {
+  margin-top: 18px;
+  padding: 16px;
+  border-radius: 18px;
+  border: 1px solid color-mix(in srgb, var(--fc-error) 22%, var(--fc-border));
+  background: linear-gradient(180deg, color-mix(in srgb, var(--fc-errorBg) 80%, transparent), color-mix(in srgb, var(--fc-bgPanel) 82%, transparent));
+}
+
+.fc-crash-error-label {
+  margin-bottom: 6px;
+  color: var(--fc-textDim);
+  font-size: 11px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+}
+
+.fc-crash-error-message {
+  color: var(--fc-text);
+  font-size: 15px;
+  line-height: 1.55;
+  word-break: break-word;
+}
+
+.fc-crash-actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+.fc-crash-btn {
+  min-height: 42px;
+  padding: 0 16px;
+  border-radius: 12px;
+  border: 1px solid var(--fc-border);
+  font-size: 14px;
+  font-weight: 700;
+  font-family: inherit;
+  cursor: pointer;
+}
+
+.fc-crash-btn--primary {
+  background: var(--fc-accent);
+  color: var(--fc-accentText);
+  border-color: var(--fc-accent);
+}
+
+.fc-crash-btn--secondary {
+  background: var(--fc-bgSurface);
+  color: var(--fc-text);
+}
+
+.fc-crash-btn--ghost {
+  background: transparent;
+  color: var(--fc-textMuted);
+}
+
+.fc-crash-editor-card {
+  margin-top: 18px;
+  padding: 16px;
+  border-radius: 20px;
+  border: 1px solid var(--fc-border);
+  background: color-mix(in srgb, var(--fc-bg) 84%, transparent);
+}
+
+.fc-crash-editor-header {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  margin-bottom: 12px;
+}
+
+.fc-crash-editor-title {
+  margin-bottom: 4px;
+  font-size: 15px;
+  font-weight: 700;
+}
+
+.fc-crash-editor-copy {
+  color: var(--fc-textMuted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.fc-crash-editor-filepicker {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  min-width: min(220px, 100%);
+  color: var(--fc-textDim);
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.fc-crash-editor-filepicker select {
+  min-height: 38px;
+}
+
+.fc-crash-editor {
+  width: 100%;
+  min-height: 250px;
+  padding: 14px;
+  border-radius: 16px;
+  border: 1px solid var(--fc-border);
+  background: var(--fc-bgInput);
+  color: var(--fc-text);
+  font-family:
+    ui-monospace,
+    SFMono-Regular,
+    Menlo,
+    Monaco,
+    Consolas,
+    Liberation Mono,
+    monospace;
+  font-size: 13px;
+  line-height: 1.55;
+  resize: vertical;
+  white-space: pre;
+  tab-size: 2;
+}
+
+.fc-crash-editor-note {
+  margin-top: 10px;
+  color: var(--fc-textDim);
+  font-size: 12px;
+  line-height: 1.5;
+}
+
+.fc-crash-run-error {
+  margin-top: 16px;
+  padding: 12px 14px;
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--fc-errorBg) 60%, transparent);
+  border: 1px solid color-mix(in srgb, var(--fc-error) 20%, var(--fc-border));
+  color: var(--fc-textMuted);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.fc-crash-details {
+  margin-top: 16px;
+  border-top: 1px solid var(--fc-border);
+  padding-top: 14px;
+}
+
+.fc-crash-details summary {
+  color: var(--fc-textMuted);
+  font-size: 13px;
+  font-weight: 700;
+  cursor: pointer;
+  user-select: none;
+}
+
+.fc-crash-details-pre {
+  margin: 12px 0 0;
+  padding: 14px;
+  border-radius: 14px;
+  border: 1px solid var(--fc-border);
+  background: color-mix(in srgb, var(--fc-bg) 88%, transparent);
+  color: var(--fc-textDim);
+  font-size: 12px;
+  line-height: 1.55;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+@media (max-width: 640px) {
+  .fc-crash-panel {
+    padding: 18px;
+    border-radius: 20px;
+  }
+
+  .fc-crash-hero,
+  .fc-crash-editor-header {
+    flex-direction: column;
+  }
+
+  .fc-crash-icon {
+    width: 48px;
+    height: 48px;
+    border-radius: 16px;
+    font-size: 24px;
+  }
+
+  .fc-crash-actions {
+    flex-direction: column;
+  }
+
+  .fc-crash-btn,
+  .fc-crash-editor-filepicker {
+    width: 100%;
+  }
+
+  .fc-crash-editor {
+    min-height: 220px;
+  }
+}
+
 /* --- fc-icon-btn: Small icon-only button --- */
 .fc-icon-btn {
   padding: 4px;
@@ -191,15 +518,15 @@ button:disabled {
 /* File button in center — acts as both filename display and command palette trigger */
 .fc-toolbar-file {
   max-width: 340px;
-  padding: 5px 12px !important;
-  border-radius: 8px !important;
-  gap: 8px !important;
-  background: var(--fc-bg) !important;
-  border-color: var(--fc-border) !important;
+  padding: 5px 12px;
+  border-radius: 8px;
+  gap: 8px;
+  background: var(--fc-bg);
+  border-color: var(--fc-border);
 }
 .fc-toolbar-file:hover {
-  background: var(--fc-bgHover) !important;
-  border-color: var(--fc-textDim) !important;
+  background: var(--fc-bgHover);
+  border-color: var(--fc-textDim);
 }
 .fc-toolbar-filename {
   color: var(--fc-text);
@@ -224,8 +551,8 @@ button:disabled {
 .fc-toolbar-btn {
   width: 32px;
   height: 32px;
-  padding: 0 !important;
-  display: inline-flex !important;
+  padding: 0;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
   font-size: 15px;
@@ -236,11 +563,11 @@ button:disabled {
 /* Labeled toolbar button — icon + text, for primary actions */
 .fc-toolbar-labeled {
   height: 32px;
-  padding: 0 10px !important;
-  display: inline-flex !important;
+  padding: 0 10px;
+  display: inline-flex;
   align-items: center;
   justify-content: center;
-  gap: 5px !important;
+  gap: 5px;
   font-size: 14px;
   flex-shrink: 0;
   border-radius: 6px;
@@ -484,7 +811,9 @@ input[type="color"]::-webkit-color-swatch {
   text-decoration: none;
   font-size: 14px;
 }
-.fc-docs-nav-link:hover { color: var(--fc-text); }
+.fc-docs-nav-link:hover {
+  color: var(--fc-text);
+}
 .fc-docs-nav-cta {
   padding: 6px 16px;
   font-size: 14px;
@@ -495,7 +824,9 @@ input[type="color"]::-webkit-color-swatch {
   text-decoration: none;
   transition: opacity 0.15s;
 }
-.fc-docs-nav-cta:hover { opacity: 0.9; }
+.fc-docs-nav-cta:hover {
+  opacity: 0.9;
+}
 
 /* --- Search trigger in nav --- */
 .fc-docs-search-trigger {
@@ -509,7 +840,9 @@ input[type="color"]::-webkit-color-swatch {
   color: var(--fc-textDim);
   font-size: 13px;
   cursor: pointer;
-  transition: border-color 0.15s, color 0.15s;
+  transition:
+    border-color 0.15s,
+    color 0.15s;
 }
 .fc-docs-search-trigger:hover {
   border-color: var(--fc-accent);
@@ -522,8 +855,32 @@ input[type="color"]::-webkit-color-swatch {
   background: var(--fc-bgHover);
   border: 1px solid var(--fc-border);
   border-radius: 3px;
-  font-family: var(--fc-mono, 'SF Mono', 'Fira Code', monospace);
+  font-family: var(--fc-mono, "SF Mono", "Fira Code", monospace);
+  color: var(--fc-textDim);
+}
+
+/* --- Theme toggle --- */
+.fc-docs-theme-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: var(--fc-bgSurface);
+  border: 1px solid var(--fc-border);
+  border-radius: 6px;
   color: var(--fc-textDim);
+  cursor: pointer;
+  transition: border-color 0.15s, color 0.15s;
+}
+.fc-docs-theme-toggle:hover {
+  border-color: var(--fc-accent);
+  color: var(--fc-textMuted);
+}
+
+/* --- Sidebar backdrop (mobile only, visible via media query) --- */
+.fc-docs-sidebar-backdrop {
+  display: none;
 }
 
 /* --- Sidebar --- */
@@ -538,9 +895,20 @@ input[type="color"]::-webkit-color-swatch {
   position: sticky;
   top: 56px;
 }
-.fc-docs-sidebar::-webkit-scrollbar { width: 4px; }
-.fc-docs-sidebar::-webkit-scrollbar-track { background: transparent; }
-.fc-docs-sidebar::-webkit-scrollbar-thumb { background: var(--fc-border); border-radius: 2px; }
+/* Desktop: hide sidebar when not open (not in flow) */
+.fc-docs-sidebar:not(.open) {
+  display: none;
+}
+.fc-docs-sidebar::-webkit-scrollbar {
+  width: 4px;
+}
+.fc-docs-sidebar::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fc-docs-sidebar::-webkit-scrollbar-thumb {
+  background: var(--fc-border);
+  border-radius: 2px;
+}
 
 .fc-docs-sidebar-group-title {
   padding: 12px 20px 4px;
@@ -557,7 +925,10 @@ input[type="color"]::-webkit-color-swatch {
   color: var(--fc-textMuted);
   text-decoration: none;
   border-left: 2px solid transparent;
-  transition: color 0.1s, background 0.1s, border-color 0.1s;
+  transition:
+    color 0.1s,
+    background 0.1s,
+    border-color 0.1s;
 }
 .fc-docs-sidebar-link:hover {
   color: var(--fc-text);
@@ -624,7 +995,9 @@ input[type="color"]::-webkit-color-swatch {
   border: 1px solid var(--fc-border);
   border-radius: 8px;
   text-decoration: none;
-  transition: border-color 0.15s, background 0.15s;
+  transition:
+    border-color 0.15s,
+    background 0.15s;
 }
 .fc-docs-index-card:hover {
   border-color: var(--fc-accent);
@@ -644,7 +1017,7 @@ input[type="color"]::-webkit-color-swatch {
 /* --- Doc content (markdown) --- */
 .fc-docs-content {
   padding: 40px 48px 80px;
-  max-width: 800px;
+  max-width: 860px;
   margin: 0 auto;
   line-height: 1.7;
   color: var(--fc-text);
@@ -675,21 +1048,32 @@ input[type="color"]::-webkit-color-swatch {
 .fc-docs-content h4 {
   font-size: 14px;
   font-weight: 600;
-  margin: 20px 0 6px;
+  margin: 24px 0 6px;
+  padding-top: 16px;
+  border-top: 1px solid color-mix(in srgb, var(--fc-border) 50%, transparent);
   color: var(--fc-accent);
 }
+/* First h4 after a group heading or section start — no top border */
+.fc-docs-content h3 + h4,
+.fc-docs-content strong + h4,
+.fc-docs-content p + h4:first-of-type {
+  border-top: none;
+  padding-top: 0;
+}
 .fc-docs-content p {
   margin: 0 0 12px;
   color: var(--fc-text);
 }
-.fc-docs-content ul, .fc-docs-content ol {
+.fc-docs-content ul,
+.fc-docs-content ol {
   padding-left: 24px;
   margin: 0 0 12px;
 }
 .fc-docs-content li {
   margin-bottom: 4px;
 }
-.fc-docs-content li > ul, .fc-docs-content li > ol {
+.fc-docs-content li > ul,
+.fc-docs-content li > ol {
   margin-top: 4px;
   margin-bottom: 0;
 }
@@ -736,8 +1120,12 @@ input[type="color"]::-webkit-color-swatch {
   animation: fc-docs-flash 1.5s ease-out;
 }
 @keyframes fc-docs-flash {
-  0% { background: var(--fc-bgActive); }
-  100% { background: transparent; }
+  0% {
+    background: var(--fc-bgActive);
+  }
+  100% {
+    background: transparent;
+  }
 }
 
 /* Code blocks */
@@ -750,7 +1138,7 @@ input[type="color"]::-webkit-color-swatch {
   font-size: 13px;
   line-height: 1.5;
   margin: 0 0 16px;
-  font-family: var(--fc-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace);
+  font-family: var(--fc-mono, "JetBrains Mono", "Fira Code", "SF Mono", monospace);
 }
 .fc-docs-code code {
   background: none;
@@ -767,7 +1155,7 @@ input[type="color"]::-webkit-color-swatch {
   border-radius: 4px;
   padding: 1px 6px;
   font-size: 0.9em;
-  font-family: var(--fc-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', monospace);
+  font-family: var(--fc-mono, "JetBrains Mono", "Fira Code", "SF Mono", monospace);
   color: var(--fc-accent);
 }
 
@@ -841,25 +1229,54 @@ input[type="color"]::-webkit-color-swatch {
    Uses theme-aware CSS variables so tokens adapt to any app theme.
    Default palette matches Tokyo Night. */
 .fc-docs-content .hljs-keyword,
-.fc-docs-content .hljs-tag { color: var(--fc-accent); }
+.fc-docs-content .hljs-tag {
+  color: var(--fc-accent);
+}
 .fc-docs-content .hljs-string,
-.fc-docs-content .hljs-template-variable { color: var(--fc-success, #9ece6a); }
+.fc-docs-content .hljs-template-variable {
+  color: var(--fc-success, #9ece6a);
+}
 .fc-docs-content .hljs-number,
-.fc-docs-content .hljs-literal { color: var(--fc-warning, #ff9e64); }
+.fc-docs-content .hljs-literal {
+  color: var(--fc-warning, #ff9e64);
+}
 .fc-docs-content .hljs-type,
 .fc-docs-content .hljs-title.class_,
-.fc-docs-content .hljs-built_in { color: var(--fc-warning, #e0af68); }
-.fc-docs-content .hljs-comment { color: var(--fc-textDim); font-style: italic; }
+.fc-docs-content .hljs-built_in {
+  color: var(--fc-warning, #e0af68);
+}
+.fc-docs-content .hljs-comment {
+  color: var(--fc-textDim);
+  font-style: italic;
+}
 .fc-docs-content .hljs-attr,
-.fc-docs-content .hljs-attribute { color: var(--fc-accent); }
-.fc-docs-content .hljs-params { color: var(--fc-text); }
-.fc-docs-content .hljs-title.function_ { color: var(--fc-accent); }
-.fc-docs-content .hljs-punctuation { color: var(--fc-textMuted); }
-.fc-docs-content .hljs-property { color: var(--fc-text); }
-.fc-docs-content .hljs-variable { color: var(--fc-text); }
-.fc-docs-content .hljs-regexp { color: var(--fc-error, #f7768e); }
-.fc-docs-content .hljs-meta { color: var(--fc-textDim); }
-.fc-docs-content .hljs-selector-class { color: var(--fc-accent); }
+.fc-docs-content .hljs-attribute {
+  color: var(--fc-accent);
+}
+.fc-docs-content .hljs-params {
+  color: var(--fc-text);
+}
+.fc-docs-content .hljs-title.function_ {
+  color: var(--fc-accent);
+}
+.fc-docs-content .hljs-punctuation {
+  color: var(--fc-textMuted);
+}
+.fc-docs-content .hljs-property {
+  color: var(--fc-text);
+}
+.fc-docs-content .hljs-variable {
+  color: var(--fc-text);
+}
+.fc-docs-content .hljs-regexp {
+  color: var(--fc-error, #f7768e);
+}
+.fc-docs-content .hljs-meta {
+  color: var(--fc-textDim);
+}
+.fc-docs-content .hljs-selector-class {
+  color: var(--fc-accent);
+}
 
 /* --- Search overlay --- */
 .fc-docs-search-overlay {
@@ -914,8 +1331,13 @@ input[type="color"]::-webkit-color-swatch {
   max-height: 400px;
   overflow-y: auto;
 }
-.fc-docs-search-results::-webkit-scrollbar { width: 4px; }
-.fc-docs-search-results::-webkit-scrollbar-thumb { background: var(--fc-border); border-radius: 2px; }
+.fc-docs-search-results::-webkit-scrollbar {
+  width: 4px;
+}
+.fc-docs-search-results::-webkit-scrollbar-thumb {
+  background: var(--fc-border);
+  border-radius: 2px;
+}
 
 .fc-docs-search-result {
   padding: 10px 16px;
@@ -923,7 +1345,9 @@ input[type="color"]::-webkit-color-swatch {
   border-bottom: 1px solid var(--fc-border);
   transition: background 0.08s;
 }
-.fc-docs-search-result:last-child { border-bottom: none; }
+.fc-docs-search-result:last-child {
+  border-bottom: none;
+}
 .fc-docs-search-result:hover,
 .fc-docs-search-result.selected {
   background: var(--fc-bgHover);
@@ -973,15 +1397,264 @@ input[type="color"]::-webkit-color-swatch {
   color: var(--fc-textMuted);
 }
 
+/* --- TOC backdrop (mobile only, visible via media query) --- */
+.fc-docs-toc-backdrop {
+  display: none;
+}
+/* --- TOC handle (mobile bottom sheet, hidden on desktop) --- */
+.fc-docs-toc-handle {
+  display: none;
+}
+
+/* --- On-this-page right sidebar --- */
+.fc-docs-toc {
+  width: 220px;
+  flex-shrink: 0;
+  padding: 20px 12px 20px 0;
+  overflow-y: auto;
+  height: calc(100vh - 56px);
+  position: sticky;
+  top: 56px;
+  border-left: 1px solid var(--fc-border);
+  background: var(--fc-bgPanel);
+}
+/* Desktop: hide TOC when not open */
+.fc-docs-toc:not(.open) {
+  display: none;
+}
+.fc-docs-toc::-webkit-scrollbar {
+  width: 4px;
+}
+.fc-docs-toc::-webkit-scrollbar-track {
+  background: transparent;
+}
+.fc-docs-toc::-webkit-scrollbar-thumb {
+  background: var(--fc-border);
+  border-radius: 2px;
+}
+.fc-docs-toc-title {
+  padding: 0 12px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--fc-textDim);
+}
+.fc-docs-toc-link {
+  display: block;
+  padding: 3px 12px;
+  font-size: 12px;
+  line-height: 1.4;
+  color: var(--fc-textMuted);
+  text-decoration: none;
+  border-left: 2px solid transparent;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.fc-docs-toc-link.indent {
+  padding-left: 24px;
+  font-size: 11.5px;
+}
+.fc-docs-toc-link:hover {
+  color: var(--fc-text);
+}
+.fc-docs-toc-link.active {
+  color: var(--fc-accent, #58a6ff);
+  border-left-color: var(--fc-accent, #58a6ff);
+}
+
+/* --- Sidebar toggle buttons --- */
+.fc-docs-nav-left {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.fc-docs-sidebar-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  border: 1px solid var(--fc-border);
+  border-radius: 6px;
+  background: transparent;
+  color: var(--fc-textMuted);
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.fc-docs-sidebar-toggle:hover {
+  background: var(--fc-bgSurface);
+  color: var(--fc-text);
+}
+
 /* --- Project Selector --- */
 .fc-project-item:hover {
-  background: var(--fc-bgHover, rgba(255, 255, 255, 0.06)) !important;
+  background: var(--fc-bgHover, rgba(255, 255, 255, 0.06));
 }
 
-/* --- Responsive --- */
-@media (max-width: 768px) {
-  .fc-docs-sidebar { display: none; }
-  .fc-docs-content { padding: 20px 16px 60px; }
-  .fc-docs-index { padding: 20px 16px 60px; }
-  .fc-docs-index-grid { grid-template-columns: 1fr; }
+/* --- Responsive ---
+   Desktop (>900px): sidebars in normal flow, toggled via JS.
+   Mobile (<=900px): sidebar = overlay from left, TOC = bottom sheet.
+*/
+@media (max-width: 900px) {
+  /* --- Prevent horizontal scroll --- */
+  .fc-docs-layout {
+    overflow-x: hidden;
+  }
+
+  /* --- Compact nav --- */
+  .fc-docs-nav {
+    height: 48px;
+    padding: 0 12px;
+  }
+  .fc-docs-nav-left { gap: 6px; min-width: 0; }
+  .fc-docs-nav-links { gap: 8px; min-width: 0; }
+  .fc-docs-nav-logo span:last-child { font-size: 14px; }
+  .fc-docs-body { padding-top: 48px; }
+  .fc-docs-main { height: calc(100vh - 48px); }
+
+  /* Hide text-based nav links — you're already on docs */
+  .fc-docs-nav-active,
+  .fc-docs-nav-link {
+    display: none;
+  }
+
+  /* Search trigger: icon only, hide label and kbd */
+  .fc-docs-search-trigger span,
+  .fc-docs-search-trigger kbd {
+    display: none;
+  }
+  .fc-docs-search-trigger {
+    padding: 5px 8px;
+    min-width: 32px;
+    justify-content: center;
+  }
+
+  /* CTA button: compact */
+  .fc-docs-nav-cta {
+    padding: 5px 10px;
+    font-size: 12px;
+  }
+
+  /* --- Sidebar overlay mode --- */
+  .fc-docs-sidebar-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(2px);
+    z-index: 150;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+  .fc-docs-sidebar-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .fc-docs-sidebar,
+  .fc-docs-sidebar:not(.open) {
+    display: block; /* Override desktop display:none — mobile uses transform */
+    position: fixed;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    width: 280px;
+    max-width: 85vw;
+    height: 100vh;
+    z-index: 160;
+    transform: translateX(-100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    padding-top: 56px;
+    -webkit-overflow-scrolling: touch;
+  }
+  .fc-docs-sidebar.open {
+    transform: translateX(0);
+  }
+  /* Bigger tap targets on mobile */
+  .fc-docs-sidebar-link {
+    padding: 8px 20px 8px 24px;
+    font-size: 14px;
+  }
+
+  /* --- TOC bottom sheet mode --- */
+  .fc-docs-toc-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    background: rgba(0, 0, 0, 0.5);
+    backdrop-filter: blur(2px);
+    z-index: 150;
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.2s ease;
+  }
+  .fc-docs-toc-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .fc-docs-toc,
+  .fc-docs-toc:not(.open) {
+    display: block; /* Override desktop display:none — mobile uses transform */
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    top: auto;
+    width: 100%;
+    max-height: 60vh;
+    height: auto;
+    border-left: none;
+    border-top: 1px solid var(--fc-border);
+    border-radius: 16px 16px 0 0;
+    z-index: 160;
+    transform: translateY(100%);
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+    padding: 12px 0 24px;
+    -webkit-overflow-scrolling: touch;
+  }
+  .fc-docs-toc.open {
+    transform: translateY(0);
+  }
+  .fc-docs-toc-handle {
+    display: block;
+    width: 36px;
+    height: 4px;
+    background: var(--fc-textDim);
+    border-radius: 2px;
+    margin: 0 auto 12px;
+  }
+  .fc-docs-toc-link {
+    padding: 6px 20px;
+    font-size: 14px;
+  }
+  .fc-docs-toc-link.indent {
+    padding-left: 36px;
+    font-size: 13px;
+  }
+
+  /* --- Content adjustments --- */
+  .fc-docs-content {
+    padding: 20px 16px 60px;
+  }
+  .fc-docs-content h1 { font-size: 24px; }
+  .fc-docs-content h2 { font-size: 18px; }
+  /* Tables scroll horizontally instead of the page */
+  .fc-docs-content .fc-docs-table {
+    display: block;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+  }
+
+  .fc-docs-index {
+    padding: 20px 16px 60px;
+  }
+  .fc-docs-index-hero { padding: 24px 0 20px; }
+  .fc-docs-index-hero h1 { font-size: 24px; }
+  .fc-docs-index-grid {
+    grid-template-columns: 1fr;
+  }
 }