viteboard 0.1.0 → 0.1.2

package/src/styles.css

@@ -1,3257 +0,0 @@
-:root {
-  --brand-100: #ffffff;
-  --brand-200: #4dabf7;
-  --brand-300: #0078d4;
-  --brand-400: #495057;
-  --brand-500: #0078d4;
-  --brand-600: #005a9e;
-  --neutral-100: #f3f2f1;
-  --neutral-200: #eaeaea;
-  --neutral-300: #d1d1d1;
-  --neutral-400: #c8c8c8;
-  --neutral-500: #6e6e6e;
-  --neutral-600: #7a7a7a;
-  --neutral-700: #495057;
-  --neutral-800: #4a4a4a;
-  --neutral-900: #0f0f0f;
-  --neutral-000: #ffffff;
-  --success-main: #28a745;
-  --success-bg: #e6f4ea;
-  --success-text: #1e7e34;
-  --warning-main: #dc2626;
-  --warning-bg: #fef2f2;
-  --warning-text: #ffffff;
-  --error-main: #cd0000;
-  --error-bg: #ffe5e5;
-  --error-text: #b91c1c;
-  --info-main: #1080a6;
-  --info-bg: #e0f7fa;
-  --info-text: #0369a1;
-  --bg-canvas: var(--neutral-100);
-  --bg-toolbar: rgba(255, 255, 255, 0.92);
-  --bg-panel: var(--brand-100);
-  --bg-hover: rgba(0, 0, 0, 0.05);
-  --bg-active: rgba(0, 120, 212, 0.12);
-  --surface-raised: var(--brand-100);
-  --accent: var(--neutral-500);
-  --accent-quiet: rgba(110, 110, 110, 0.14);
-  --accent-soft: rgba(110, 110, 110, 0.08);
-  --accent-secondary: var(--brand-300);
-  --accent-secondary-quiet: rgba(0, 120, 212, 0.13);
-  --focus-glow: rgba(0, 120, 212, 0.26);
-  --text-primary: var(--neutral-900);
-  --text-secondary: #6e6e6e;
-  --border-subtle: rgba(0, 0, 0, 0.08);
-  --selection: var(--accent);
-  --shadow-soft: 0 4px 24px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.06);
-  --shadow-modal: 0 12px 48px rgba(0, 0, 0, 0.18);
-  --grid-dot: rgba(110, 110, 110, 0.16);
-  --danger: var(--error-main);
-}
-
-[data-theme="dark"] {
-  --bg-canvas: #0d0d0d;
-  --bg-toolbar: rgba(20, 22, 23, 0.94);
-  --bg-panel: #1a1a1a;
-  --bg-hover: rgba(255, 255, 255, 0.055);
-  --bg-active: rgba(97, 218, 251, 0.12);
-  --surface-raised: #212121;
-  --accent: #61dafb;
-  --accent-quiet: rgba(97, 218, 251, 0.14);
-  --accent-soft: rgba(97, 218, 251, 0.075);
-  --accent-secondary: #73d0f4;
-  --accent-secondary-quiet: rgba(97, 218, 251, 0.18);
-  --focus-glow: rgba(97, 218, 251, 0.28);
-  --text-primary: #f6f6f3;
-  --text-secondary: #a7aaa8;
-  --border-subtle: rgba(255, 255, 255, 0.09);
-  --selection: var(--accent);
-  --shadow-soft: 0 16px 46px rgba(0, 0, 0, 0.52), 0 1px 1px rgba(255, 255, 255, 0.03);
-  --shadow-modal: 0 22px 70px rgba(0, 0, 0, 0.72);
-  --grid-dot: rgba(97, 218, 251, 0.1);
-}
-
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-html,
-body {
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  background: var(--bg-canvas);
-  color: var(--text-primary);
-}
-
-#app {
-  position: fixed;
-  inset: 0;
-}
-
-.canvas-stack {
-  position: absolute;
-  inset: 0;
-}
-
-.canvas-stack canvas {
-  position: absolute;
-  inset: 0;
-  display: block;
-}
-
-/* ---------- Toolbar ---------- */
-.bottom-tool-cluster {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 10px;
-  z-index: 125;
-}
-
-.toolbar {
-  position: fixed;
-  bottom: 20px;
-  left: 50%;
-  transform: translateX(-50%);
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 6px;
-  background: var(--bg-toolbar);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  border-radius: 14px;
-  box-shadow: var(--shadow-soft);
-  z-index: 100;
-}
-
-.bottom-tool-cluster .toolbar {
-  position: relative;
-  inset: auto;
-  transform: none;
-  z-index: 1;
-}
-
-.shape-tool-group {
-  position: relative;
-  display: flex;
-}
-
-.shape-tool-popover {
-  position: absolute;
-  left: 50%;
-  bottom: calc(100% + 12px);
-  transform: translateX(-50%) translateY(8px) scale(0.96);
-  transform-origin: bottom center;
-  display: grid;
-  grid-template-columns: repeat(3, 38px);
-  gap: 4px;
-  padding: 6px;
-  background: var(--bg-toolbar);
-  border: 1px solid var(--border-subtle);
-  border-radius: 14px;
-  box-shadow: var(--shadow-soft);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  opacity: 0;
-  pointer-events: none;
-  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.shape-tool-group.open .shape-tool-popover {
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateX(-50%) translateY(0) scale(1);
-}
-
-.shape-option-btn {
-  width: 38px;
-  height: 38px;
-}
-
-.shape-tool-popover::after {
-  content: "";
-  position: absolute;
-  left: 50%;
-  bottom: -5px;
-  width: 10px;
-  height: 10px;
-  transform: translateX(-50%) rotate(45deg);
-  background: var(--bg-toolbar);
-  border-right: 1px solid var(--border-subtle);
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.context-tool-popover {
-  position: relative;
-  width: 0;
-  height: 52px;
-  transform: translateX(-14px) scale(0.96);
-  transform-origin: left center;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 6px 0;
-  background: var(--bg-toolbar);
-  border: 1px solid transparent;
-  border-radius: 999px;
-  box-shadow: var(--shadow-soft);
-  backdrop-filter: blur(16px);
-  -webkit-backdrop-filter: blur(16px);
-  opacity: 0;
-  overflow: hidden;
-  pointer-events: none;
-  z-index: 0;
-  transition:
-    width 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
-    padding 0.26s cubic-bezier(0.2, 0.8, 0.2, 1),
-    opacity 0.18s ease,
-    transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1),
-    border-color 0.18s ease;
-}
-
-.context-tool-popover.is-visible {
-  padding: 6px 10px;
-  border-color: var(--border-subtle);
-  opacity: 1;
-  pointer-events: auto;
-  transform: translateX(0) scale(1);
-}
-
-.sticky-color-popover.is-visible {
-  width: 286px;
-}
-
-.text-size-popover.is-visible {
-  width: 300px;
-}
-
-.shape-style-popover.is-visible {
-  width: 386px;
-}
-
-.sticky-color-btn,
-.shape-fill-btn {
-  width: 24px;
-  height: 24px;
-  border: 1px solid rgba(0, 0, 0, 0.16);
-  border-radius: 999px;
-  background: var(--swatch);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.42);
-  cursor: pointer;
-  opacity: 0;
-  transform: translateX(-6px) scale(0.88);
-  transition:
-    opacity 0.16s ease,
-    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
-    box-shadow 0.12s ease,
-    border-color 0.12s ease;
-}
-
-.shape-text-color-btn {
-  flex: 0 0 auto;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 999px;
-  background: var(--surface-raised);
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 800;
-  cursor: pointer;
-  opacity: 0;
-  transform: translateX(-6px) scale(0.88);
-  transition:
-    opacity 0.16s ease,
-    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
-    box-shadow 0.12s ease,
-    border-color 0.12s ease,
-    background 0.12s ease;
-}
-
-.shape-text-color-btn[aria-label="White text"] {
-  background: #ffffff;
-  color: #252829;
-}
-
-.shape-text-color-btn[aria-label="Black text"] {
-  background: #252829;
-  color: #ffffff;
-}
-
-.context-tool-divider {
-  width: 1px;
-  height: 28px;
-  background: var(--border-subtle);
-  opacity: 0;
-  transform: scaleY(0.65);
-  transition: opacity 0.16s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1);
-}
-
-.text-size-btn {
-  flex: 1 1 0;
-  min-width: 0;
-  height: 38px;
-  padding: 0 8px;
-  border: 1px solid transparent;
-  border-radius: 999px;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 750;
-  line-height: 1;
-  text-align: center;
-  white-space: nowrap;
-  cursor: pointer;
-  opacity: 0;
-  transform: translateX(-6px) scale(0.88);
-  transition:
-    opacity 0.16s ease,
-    transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1),
-    background 0.12s ease,
-    color 0.12s ease,
-    border-color 0.12s ease;
-}
-
-.context-tool-popover.is-visible .sticky-color-btn,
-.context-tool-popover.is-visible .shape-fill-btn,
-.context-tool-popover.is-visible .shape-text-color-btn,
-.context-tool-popover.is-visible .text-size-btn,
-.context-tool-popover.is-visible .context-tool-divider {
-  opacity: 1;
-  transform: translateX(0) scale(1);
-}
-
-.context-tool-popover.is-visible > :nth-child(2) { transition-delay: 0.015s; }
-.context-tool-popover.is-visible > :nth-child(3) { transition-delay: 0.03s; }
-.context-tool-popover.is-visible > :nth-child(4) { transition-delay: 0.045s; }
-.context-tool-popover.is-visible > :nth-child(5) { transition-delay: 0.06s; }
-.context-tool-popover.is-visible > :nth-child(6) { transition-delay: 0.075s; }
-.context-tool-popover.is-visible > :nth-child(7) { transition-delay: 0.09s; }
-.context-tool-popover.is-visible > :nth-child(8) { transition-delay: 0.105s; }
-
-.sticky-color-btn:hover,
-.shape-fill-btn:hover {
-  transform: translateY(-1px) scale(1.04);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.52), 0 4px 12px rgba(0, 0, 0, 0.16);
-}
-
-.sticky-color-btn:focus-visible,
-.shape-fill-btn:focus-visible {
-  outline: 2px solid var(--selection);
-  outline-offset: 3px;
-}
-
-.text-size-btn:hover,
-.text-size-btn:focus-visible {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-  outline: none;
-}
-
-.shape-text-color-btn:hover,
-.shape-text-color-btn:focus-visible {
-  border-color: color-mix(in srgb, var(--selection) 45%, var(--border-subtle));
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14);
-  outline: none;
-}
-
-.sticky-color-btn.active,
-.shape-fill-btn.active {
-  border-color: var(--brand-500);
-  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.54), 0 0 0 3px rgba(66, 141, 48, 0.2);
-}
-
-.shape-text-color-btn.active {
-  border-color: var(--brand-500);
-  box-shadow: 0 0 0 3px rgba(66, 141, 48, 0.2);
-}
-
-.text-size-btn.active {
-  border-color: color-mix(in srgb, var(--selection) 36%, var(--border-subtle));
-  background: var(--bg-active);
-  color: var(--text-primary);
-}
-
-[data-theme="dark"] .sticky-color-btn,
-[data-theme="dark"] .shape-fill-btn {
-  border-color: rgba(255, 255, 255, 0.18);
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
-}
-
-.layer-menu {
-  position: fixed;
-  min-width: 176px;
-  padding: 6px;
-  background: var(--surface-raised);
-  border: 1px solid var(--border-subtle);
-  border-radius: 12px;
-  box-shadow: var(--shadow-modal);
-  z-index: 150;
-}
-
-.layer-menu-label {
-  padding: 8px 10px 5px;
-  color: var(--text-secondary);
-  font-size: 11px;
-  font-weight: 750;
-  letter-spacing: 0.08em;
-  text-transform: uppercase;
-}
-
-.layer-menu button {
-  width: 100%;
-  height: 34px;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-primary);
-  font: inherit;
-  font-size: 13px;
-  font-weight: 650;
-  text-align: left;
-  cursor: pointer;
-}
-
-.layer-menu button:hover,
-.layer-menu button:focus-visible {
-  background: var(--bg-hover);
-  outline: none;
-}
-
-.layer-menu-divider {
-  height: 1px;
-  margin: 5px 6px;
-  background: var(--border-subtle);
-}
-
-.toolbar-divider {
-  width: 1px;
-  height: 24px;
-  background: var(--border-subtle);
-  margin: 0 4px;
-}
-
-.tool-btn {
-  position: relative;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 38px;
-  height: 38px;
-  border: none;
-  border-radius: 9px;
-  background: transparent;
-  color: var(--text-primary);
-  cursor: pointer;
-  transition: background 0.12s ease;
-}
-
-.tool-btn:hover {
-  background: var(--bg-hover);
-}
-
-.tool-btn:focus-visible {
-  outline: 2px solid var(--selection);
-  outline-offset: 1px;
-}
-
-.tool-btn.active {
-  background: var(--bg-active);
-  color: var(--selection);
-}
-
-.tool-btn svg {
-  width: 19px;
-  height: 19px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.7;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.tool-btn .tooltip {
-  position: absolute;
-  bottom: calc(100% + 10px);
-  left: 50%;
-  transform: translateX(-50%);
-  white-space: nowrap;
-  padding: 5px 9px;
-  font-size: 11.5px;
-  font-weight: 500;
-  border-radius: 7px;
-  background: var(--text-primary);
-  color: var(--bg-panel);
-  pointer-events: none;
-  opacity: 0;
-  transition: opacity 0.12s ease;
-}
-
-.tool-btn:hover .tooltip {
-  opacity: 1;
-}
-
-.tooltip kbd {
-  font-family: inherit;
-  opacity: 0.65;
-  margin-left: 5px;
-}
-
-/* ---------- Top bar ---------- */
-.top-left {
-  position: fixed;
-  top: 14px;
-  left: 14px;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.board-title {
-  height: 40px;
-  padding: 0 11px;
-  background: var(--bg-toolbar);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  box-shadow: var(--shadow-soft);
-  font-size: 13px;
-  font-weight: 600;
-  color: var(--text-primary);
-  border: 1px solid var(--border-subtle);
-  outline: none;
-  min-width: 60px;
-  max-width: calc(100vw - 460px);
-}
-
-.board-title:focus {
-  border-color: var(--selection);
-}
-
-.board-title-measure {
-  position: absolute;
-  visibility: hidden;
-  pointer-events: none;
-  white-space: pre;
-  font-size: 13px;
-  font-weight: 600;
-  font-family: inherit;
-}
-
-.top-right {
-  position: fixed;
-  top: 14px;
-  right: 14px;
-  z-index: 100;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
-.control-group {
-  display: flex;
-  align-items: center;
-  gap: 2px;
-  padding: 4px;
-  background: var(--bg-toolbar);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  box-shadow: var(--shadow-soft);
-}
-
-.control-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 30px;
-  min-width: 30px;
-  padding: 0 8px;
-  border: none;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-primary);
-  font-size: 12px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.12s ease;
-  position: relative;
-}
-
-.control-btn:hover {
-  background: var(--bg-hover);
-}
-
-.control-btn.danger-control:hover {
-  color: var(--danger);
-}
-
-.control-btn:focus-visible {
-  outline: 2px solid var(--selection);
-}
-
-.control-btn svg {
-  width: 16px;
-  height: 16px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.7;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.zoom-label {
-  font-variant-numeric: tabular-nums;
-  min-width: 48px;
-  text-align: center;
-}
-
-/* ---------- Performance overlay ---------- */
-.perf-overlay {
-  position: fixed;
-  top: 60px;
-  right: 14px;
-  z-index: 99;
-  padding: 12px 14px;
-  background: var(--bg-toolbar);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  box-shadow: var(--shadow-soft);
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 11px;
-  line-height: 1.7;
-  color: var(--text-primary);
-  white-space: pre;
-  pointer-events: none;
-  display: none;
-}
-
-.perf-overlay.visible {
-  display: block;
-}
-
-/* ---------- Modals ---------- */
-.modal-backdrop {
-  position: fixed;
-  inset: 0;
-  background: rgba(0, 0, 0, 0.4);
-  z-index: 200;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.modal {
-  background: var(--surface-raised);
-  border: 1px solid var(--border-subtle);
-  border-radius: 16px;
-  box-shadow: var(--shadow-modal);
-  width: 520px;
-  max-width: calc(100vw - 40px);
-  max-height: calc(100vh - 80px);
-  overflow-y: auto;
-  padding: 24px;
-}
-
-.modal h2 {
-  font-size: 16px;
-  font-weight: 600;
-  margin-bottom: 16px;
-}
-
-.modal-close {
-  float: right;
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 18px;
-  cursor: pointer;
-  line-height: 1;
-  padding: 2px 6px;
-  border-radius: 6px;
-}
-
-.modal-close:hover {
-  background: var(--bg-hover);
-}
-
-.modal .board-title {
-  height: 38px;
-  max-width: none;
-  padding: 0 10px;
-  background: var(--bg-panel);
-  backdrop-filter: none;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  box-shadow: none;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.modal .board-title:focus {
-  border-color: color-mix(in srgb, var(--accent) 48%, var(--border-subtle));
-  box-shadow: none;
-}
-
-.command-palette {
-  position: fixed;
-  inset: 0;
-  z-index: 650;
-  display: none;
-  align-items: flex-start;
-  justify-content: center;
-  padding-top: min(120px, 14vh);
-  background: rgba(15, 23, 42, 0.28);
-}
-
-.command-palette.visible {
-  display: flex;
-}
-
-.command-panel {
-  width: min(640px, calc(100vw - 32px));
-  max-height: min(620px, calc(100vh - 80px));
-  overflow: hidden;
-  border: 1px solid var(--border-subtle);
-  border-radius: 12px;
-  background: var(--surface-raised);
-  box-shadow: var(--shadow-modal);
-}
-
-.command-search {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 13px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  color: var(--text-secondary);
-}
-
-.command-search svg {
-  width: 18px;
-  height: 18px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.command-search input {
-  flex: 1 1 auto;
-  min-width: 0;
-  border: none;
-  outline: none;
-  background: transparent;
-  color: var(--text-primary);
-  font: inherit;
-  font-size: 15px;
-}
-
-.command-results {
-  max-height: min(520px, calc(100vh - 160px));
-  overflow-y: auto;
-  padding: 6px;
-}
-
-.command-result {
-  display: block;
-  padding: 10px 12px;
-  border-radius: 8px;
-  color: var(--text-primary);
-  text-decoration: none;
-}
-
-.command-result:hover,
-.command-result.active {
-  background: var(--bg-active);
-}
-
-.command-result-title {
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 1.35;
-}
-
-.command-result-meta,
-.command-result-summary {
-  margin-top: 3px;
-  font-size: 12px;
-  line-height: 1.45;
-  color: var(--text-secondary);
-}
-
-.command-result-summary {
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-
-.command-result mark {
-  border-radius: 4px;
-  padding: 0 2px;
-  background: var(--accent-quiet);
-  color: inherit;
-}
-
-.command-empty {
-  padding: 28px 16px;
-  text-align: center;
-  color: var(--text-secondary);
-  font-size: 13px;
-}
-
-.template-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 10px;
-}
-
-.template-card {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  padding: 14px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  background: transparent;
-  color: var(--text-primary);
-  cursor: pointer;
-  text-align: left;
-  transition: border-color 0.12s ease, background 0.12s ease;
-}
-
-.template-card:hover {
-  border-color: var(--selection);
-  background: var(--bg-hover);
-}
-
-.template-card .t-name {
-  font-size: 13px;
-  font-weight: 600;
-}
-
-.template-card .t-desc {
-  font-size: 11.5px;
-  color: var(--text-secondary);
-  line-height: 1.4;
-}
-
-.storage-row {
-  display: flex;
-  justify-content: space-between;
-  padding: 8px 0;
-  font-size: 13px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.storage-row span:last-child {
-  color: var(--text-secondary);
-  font-variant-numeric: tabular-nums;
-}
-
-.modal-actions {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 8px;
-  margin-top: 16px;
-}
-
-.modal-copy {
-  color: var(--text-secondary);
-  font-size: 13.5px;
-  line-height: 1.6;
-}
-
-.btn {
-  padding: 8px 14px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-primary);
-  font-size: 12.5px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.12s ease;
-}
-
-.btn:hover {
-  background: var(--bg-hover);
-}
-
-.btn.danger {
-  color: var(--danger);
-  border-color: var(--danger);
-}
-
-.btn.primary {
-  background: var(--accent-secondary);
-  border-color: var(--selection);
-  color: #fff;
-}
-
-/* ---------- Stress panel ---------- */
-.stress-panel {
-  position: fixed;
-  bottom: 84px;
-  left: 50%;
-  transform: translateX(-50%);
-  z-index: 99;
-  display: none;
-  flex-wrap: wrap;
-  gap: 6px;
-  max-width: 640px;
-  justify-content: center;
-  padding: 10px;
-  background: var(--bg-toolbar);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  border-radius: 12px;
-  box-shadow: var(--shadow-soft);
-}
-
-.stress-panel.visible {
-  display: flex;
-}
-
-.stress-panel .btn {
-  font-size: 11.5px;
-  padding: 6px 10px;
-}
-
-/* ---------- Text editing overlay ---------- */
-.text-editor {
-  position: absolute;
-  z-index: 50;
-  border: 1.5px solid var(--selection);
-  border-radius: 4px;
-  background: transparent;
-  color: inherit;
-  resize: none;
-  overflow: hidden;
-  outline: none;
-  padding: 0;
-  line-height: 1.35;
-}
-
-/* ---------- Toast ---------- */
-.toast {
-  position: fixed;
-  bottom: 84px;
-  left: 50%;
-  transform: translateX(-50%) translateY(8px);
-  z-index: 300;
-  padding: 10px 18px;
-  background: var(--text-primary);
-  color: var(--bg-panel);
-  border-radius: 10px;
-  font-size: 13px;
-  font-weight: 500;
-  box-shadow: var(--shadow-soft);
-  opacity: 0;
-  transition: opacity 0.2s ease, transform 0.2s ease;
-  pointer-events: none;
-}
-
-.toast.visible {
-  opacity: 1;
-  transform: translateX(-50%) translateY(0);
-}
-
-@media (prefers-reduced-motion: reduce) {
-  * {
-    transition: none !important;
-  }
-}
-
-/* ============================================================
-   Docs shell (sidebar + content)
-   ============================================================ */
-.shell {
-  display: flex;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-}
-
-.shell-main {
-  flex: 1 1 auto;
-  min-width: 0;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-}
-
-.shell.sidebar-collapsed .sidebar {
-  display: none;
-}
-
-.shell-topbar {
-  position: relative;
-  flex: 0 0 auto;
-  height: 58px;
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 18px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: color-mix(in srgb, var(--bg-panel) 94%, transparent);
-  backdrop-filter: blur(16px);
-}
-
-.topbar-icon-btn,
-.topbar-search,
-.topbar-cart,
-.topbar-edit,
-.topbar-theme {
-  height: 34px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
-}
-
-.topbar-icon-btn {
-  width: 34px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-}
-
-.topbar-icon-btn:hover,
-.topbar-search:hover,
-.topbar-cart:hover,
-.topbar-edit:hover,
-.topbar-theme:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.topbar-icon-btn:focus-visible,
-.topbar-search:focus-visible,
-.topbar-cart:focus-visible,
-.topbar-edit:focus-visible,
-.topbar-theme:focus-visible {
-  outline: 2px solid var(--selection);
-  outline-offset: 1px;
-}
-
-.topbar-icon-btn svg,
-.topbar-search svg,
-.topbar-edit svg,
-.topbar-theme svg {
-  width: 17px;
-  height: 17px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.topbar-search {
-  width: min(360px, 42vw);
-  display: inline-flex;
-  align-items: center;
-  gap: 9px;
-  padding: 0 8px 0 10px;
-  text-align: left;
-  font-size: 13px;
-}
-
-.topbar-search span {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.topbar-search kbd {
-  flex: 0 0 auto;
-  padding: 2px 6px;
-  border-radius: 5px;
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-  font: 11px/1.3 "SF Mono", ui-monospace, Menlo, monospace;
-}
-
-.topbar-cart {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  padding: 0 10px 0 12px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.topbar-search + .topbar-cart {
-  margin-left: auto;
-}
-
-.topbar-cart[hidden] {
-  display: none;
-}
-
-.topbar-cart:disabled {
-  opacity: 0.58;
-  cursor: default;
-}
-
-.topbar-cart strong {
-  min-width: 22px;
-  height: 22px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--accent-quiet);
-  color: var(--selection);
-  font-size: 12px;
-}
-
-.topbar-edit {
-  display: inline-flex;
-  align-items: center;
-  gap: 7px;
-  padding: 0 12px;
-  font-size: 13px;
-  font-weight: 500;
-}
-
-.topbar-edit[hidden] {
-  display: none;
-}
-
-.topbar-cart[hidden] + .topbar-edit {
-  margin-left: auto;
-}
-
-.shell-topbar.editing-doc .topbar-cart {
-  display: none;
-}
-
-.topbar-cart-popover {
-  position: absolute;
-  top: calc(100% + 8px);
-  right: 58px;
-  z-index: 800;
-  display: none;
-  width: 330px;
-  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.16));
-}
-
-.topbar-cart-popover.visible {
-  display: block;
-}
-
-.topbar-cart-popover .capability-cart {
-  position: static;
-}
-
-.content.cart-popover-open .capability-layout > .capability-cart {
-  visibility: hidden;
-}
-
-.sidebar {
-  flex: 0 0 270px;
-  width: 270px;
-  height: 100%;
-  min-height: 0;
-  display: flex;
-  flex-direction: column;
-  border-right: 1px solid var(--border-subtle);
-  background: var(--surface-raised);
-  padding: 0 12px;
-}
-
-.sidebar-header {
-  display: flex;
-  align-items: center;
-  height: 58px;
-  padding: 0 12px;
-  border-bottom: 1px solid transparent;
-}
-
-.sidebar-brand {
-  font-size: 17px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--text-primary);
-  text-decoration: none;
-  /* reset button defaults */
-  border: none;
-  background: none;
-  cursor: pointer;
-  padding: 0;
-  font-family: inherit;
-}
-
-.sidebar-nav {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-  padding-bottom: 18px;
-}
-
-.sidebar-footer {
-  flex: 0 0 auto;
-  padding: 10px 0 14px;
-  border-top: 1px solid var(--border-subtle);
-  background: var(--surface-raised);
-}
-
-.sidebar-add-repo {
-  width: 100%;
-  height: 36px;
-  border: 1px dashed color-mix(in srgb, var(--selection) 38%, var(--border-subtle));
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
-}
-
-.sidebar-add-repo:hover {
-  background: var(--accent-soft);
-  border-color: color-mix(in srgb, var(--selection) 58%, var(--border-subtle));
-  color: var(--text-primary);
-}
-
-.nav-group { margin-bottom: 18px; }
-
-.nav-section-head,
-.nav-root-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 10px;
-}
-
-.nav-repo-group {
-  margin-bottom: 10px;
-}
-
-.nav-repo-header,
-.nav-dir-toggle {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  padding: 6px 8px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-align: left;
-  text-transform: uppercase;
-  cursor: pointer;
-}
-
-.nav-count-pill {
-  flex: 0 0 auto;
-  padding: 3px 8px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--surface-raised) 82%, var(--accent-soft));
-  color: var(--text-secondary);
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-}
-
-.nav-dir-toggle {
-  padding: 4px 6px;
-  font-size: 11px;
-  text-transform: none;
-  letter-spacing: 0;
-  font-weight: 650;
-}
-
-/* Path-segment directories (parents of /docs/) — same weight as docs dirs */
-.nav-dir-project {
-  opacity: 0.85;
-  color: var(--text-secondary);
-}
-
-.nav-dir-project:hover {
-  opacity: 1;
-}
-
-/* Docs directories inside a docs root */
-.nav-dir-docs {
-  opacity: 1;
-  color: var(--text-secondary);
-  font-weight: 600;
-}
-
-.nav-repo-header,
-.nav-dir-toggle {
-  transition: background 0.12s ease, color 0.12s ease, opacity 0.12s ease;
-}
-
-.nav-repo-header:hover,
-.nav-dir-toggle:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.nav-repo-header:focus-visible,
-.nav-dir-toggle:focus-visible {
-  outline: 2px solid var(--selection);
-  outline-offset: 1px;
-}
-
-.nav-repo-header > span:not(.nav-repo-chevron),
-.nav-dir-toggle > span:not(.nav-repo-chevron) {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.nav-repo-chevron {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 12px;
-  transform: rotate(90deg);
-  transition: transform 0.12s ease;
-}
-
-.nav-repo-group.collapsed .nav-repo-chevron {
-  transform: rotate(0deg);
-}
-
-.nav-collapsible-dir.collapsed > .nav-dir-header-row .nav-dir-toggle .nav-repo-chevron {
-  transform: rotate(0deg);
-}
-
-.nav-dir-header-row {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  position: relative;
-}
-
-.nav-dir-header-row .nav-dir-toggle {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-
-.nav-dir-header-row .nav-dir-wiki-link {
-  flex: 0 0 auto;
-}
-
-.nav-repo-body[hidden],
-.nav-dir-body[hidden] {
-  display: none;
-}
-
-.nav-label {
-  font-size: 11px;
-  font-weight: 700;
-  text-transform: uppercase;
-  letter-spacing: 0.06em;
-  color: var(--text-secondary);
-  padding: 6px 8px;
-}
-
-.nav-empty-copy {
-  font-size: 12px;
-  font-weight: 500;
-  text-transform: none;
-  letter-spacing: 0.01em;
-  line-height: 1.45;
-}
-
-.nav-subgroup { margin: 2px 0 2px 8px; }
-.nav-subgroup .nav-label {
-  font-size: 11px;
-  text-transform: none;
-  letter-spacing: 0;
-  font-weight: 600;
-  color: var(--text-secondary);
-  opacity: 0.85;
-}
-
-/* Root-level docs label — just the leaf segment ("docs"), no badge. */
-.nav-docs-root {
-  margin: 0 0 2px 0;
-}
-
-.nav-root-path-label {
-  padding: 4px 8px 3px;
-  font-size: 10px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-  opacity: 0.6;
-  cursor: default;
-  /* Right-click affordance hint */
-  user-select: none;
-}
-.nav-root-path-label:hover {
-  opacity: 1;
-  color: var(--text-secondary);
-}
-
-/* Path-segment intermediate toggle — slightly lighter than project header */
-.nav-path-seg-toggle {
-  font-size: 12px;
-  font-weight: 600;
-  text-transform: none;
-  letter-spacing: 0;
-  color: var(--text-secondary);
-  opacity: 0.9;
-}
-
-.nav-link {
-  display: flex;
-  align-items: center;
-  padding: 6px 10px;
-  margin: 1px 0;
-  border-radius: 7px;
-  font-size: 13px;
-  line-height: 1.4;
-  color: var(--text-secondary);
-  text-decoration: none;
-  border-left: 2px solid transparent;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.nav-link:hover { 
-  background: var(--bg-hover); 
-  color: var(--text-primary);
-}
-.nav-link-muted {
-  font-size: 12px;
-  opacity: 0.82;
-}
-.nav-link.active {
-  background: var(--bg-active);
-  color: var(--selection);
-  font-weight: 600;
-}
-
-[data-theme="dark"] .nav-link.active {
-  color: var(--neutral-100);
-}
-
-/* ---------- Sidebar: inline node icons (Doc / Board / Capability) ---------- */
-
-.nav-node-icon {
-  flex: 0 0 auto;
-  width: 13px;
-  height: 13px;
-  margin-right: 5px;
-  vertical-align: middle;
-  fill: currentColor;
-  stroke: none;
-  opacity: 0.85;
-  position: relative;
-  top: -1px;
-}
-
-/* Doc icons: Google Docs blue */
-.nav-node-icon-doc {
-  fill: #4285f4;
-  opacity: 1;
-}
-
-/* Board icons: purple/violet */
-.nav-node-icon-board {
-  fill: #8b5cf6;
-  opacity: 1;
-}
-
-[data-theme="dark"] .nav-node-icon-board {
-  fill: #a78bfa;
-}
-
-/* Skill/Capability icons: amber/gold */
-.nav-node-icon-capability {
-  fill: #f59e0b;
-  opacity: 1;
-}
-
-[data-theme="dark"] .nav-node-icon-capability {
-  fill: #fbbf24;
-}
-
-/* Board nodes: purple/violet accent */
-:root {
-  --nav-board-color: #8b5cf6;
-  --nav-board-bg: rgba(139, 92, 246, 0.08);
-  --nav-board-bg-active: rgba(139, 92, 246, 0.15);
-  --nav-cap-color: #8a6800;
-  --nav-cap-bg: rgba(138, 104, 0, 0.08);
-  --nav-cap-bg-active: rgba(138, 104, 0, 0.15);
-}
-[data-theme="dark"] {
-  --nav-board-color: #a78bfa;
-  --nav-board-bg: rgba(167, 139, 250, 0.08);
-  --nav-board-bg-active: rgba(167, 139, 250, 0.14);
-  --nav-cap-color: #d4a800;
-  --nav-cap-bg: rgba(212, 168, 0, 0.08);
-  --nav-cap-bg-active: rgba(212, 168, 0, 0.14);
-}
-
-.nav-link-board {
-  display: flex;
-  align-items: center;
-  color: var(--nav-board-color);
-}
-.nav-link-board:hover {
-  background: var(--nav-board-bg);
-  color: var(--nav-board-color);
-}
-.nav-link-board.active {
-  background: var(--nav-board-bg-active);
-  color: var(--nav-board-color);
-  font-weight: 600;
-}
-
-/* Capability nodes: amber/gold accent */
-.nav-link-capability {
-  display: flex;
-  align-items: center;
-  color: var(--nav-cap-color);
-}
-.nav-link-capability:hover {
-  background: var(--nav-cap-bg);
-  color: var(--nav-cap-color);
-}
-.nav-link-capability.active {
-  background: var(--nav-cap-bg-active);
-  color: var(--nav-cap-color);
-  font-weight: 600;
-}
-
-/* "All Boards" row at the bottom of each project */
-.nav-project-boards-row {
-  margin-top: 4px;
-  padding-top: 4px;
-  border-top: 1px solid var(--border-subtle);
-}
-
-/* ---------- Sidebar: right-click context menu ---------- */
-
-.nav-context-menu {
-  z-index: 900;
-  min-width: 168px;
-  padding: 5px;
-  background: var(--surface-raised);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  box-shadow: var(--shadow-modal);
-  user-select: none;
-}
-
-.nav-context-label {
-  padding: 5px 10px 4px;
-  font-size: 10.5px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  max-width: 180px;
-}
-
-.nav-context-divider {
-  height: 1px;
-  margin: 4px 5px;
-  background: var(--border-subtle);
-}
-
-.nav-context-item {
-  width: 100%;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  height: 32px;
-  padding: 0 10px;
-  border: 0;
-  border-radius: 7px;
-  background: transparent;
-  color: var(--text-primary);
-  font: inherit;
-  font-size: 13px;
-  text-align: left;
-  cursor: pointer;
-  white-space: nowrap;
-}
-.nav-context-item:hover,
-.nav-context-item:focus-visible {
-  background: var(--bg-hover);
-  outline: none;
-}
-.nav-context-item-danger {
-  color: var(--danger);
-}
-.nav-context-item-danger:hover,
-.nav-context-item-danger:focus-visible {
-  background: color-mix(in srgb, var(--danger) 8%, transparent);
-}
-
-.nav-dragging {
-  opacity: 0.48;
-  cursor: grabbing !important;
-}
-
-/* Draggable items keep pointer cursor — grab only appears during actual drag */
-.nav-link[draggable="true"],
-.nav-dir-toggle[draggable="true"] {
-  cursor: pointer;
-}
-
-/* VS Code-style drop target - VERY obvious */
-.nav-drop-target > .nav-dir-toggle,
-.nav-drop-target > .nav-dir-header-row,
-.nav-drop-target.nav-repo-header,
-.nav-drop-target.nav-docs-root {
-  background: color-mix(in srgb, var(--accent) 20%, transparent) !important;
-  outline: 2px solid var(--accent) !important;
-  outline-offset: -2px;
-  box-shadow: inset 0 0 8px color-mix(in srgb, var(--accent) 30%, transparent);
-  border-radius: 6px;
-  position: relative;
-}
-
-/* Pulse animation for drop target */
-@keyframes dropPulse {
-  0%, 100% { outline-color: var(--accent); }
-  50% { outline-color: color-mix(in srgb, var(--accent) 60%, transparent); }
-}
-
-.nav-drop-target > .nav-dir-toggle,
-.nav-drop-target > .nav-dir-header-row,
-.nav-drop-target.nav-repo-header,
-.nav-drop-target.nav-docs-root {
-  animation: dropPulse 1s ease-in-out infinite;
-}
-
-.nav-ctx-icon {
-  flex: 0 0 auto;
-  width: 16px;
-  height: 16px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-}
-/* Fill-based icons (board, doc, capability) */
-.nav-ctx-icon svg.nav-node-icon {
-  width: 13px;
-  height: 13px;
-  fill: currentColor;
-  stroke: none;
-}
-/* Stroke-based icons (edit, rename, trash) */
-.nav-ctx-svg {
-  width: 14px;
-  height: 14px;
-}
-
-/* Doc items in context menu */
-.nav-ctx-doc { color: var(--text-secondary); }
-/* Directory items */
-.nav-ctx-dir { color: var(--text-secondary); }
-/* Board items */
-.nav-ctx-board { color: var(--nav-board-color); }
-/* Capability items */
-.nav-ctx-cap { color: var(--nav-cap-color); }
-/* Neutral actions (edit, rename) */
-.nav-ctx-edit,
-.nav-ctx-rename { color: var(--text-secondary); }
-/* Destructive action */
-.nav-ctx-delete { color: var(--danger); }
-
-.content-scroll {
-  flex: 1 1 auto;
-  min-height: 0;
-  overflow-y: auto;
-}
-
-.content {
-  max-width: 820px;
-  margin: 0 auto;
-  padding: 36px 40px 120px;
-}
-
-.content.content-wide {
-  max-width: 1240px;
-}
-
-.external-doc-eyebrow {
-  margin: 0 0 18px;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 650;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.external-repo-overview .page-bar {
-  align-items: flex-start;
-}
-
-.repo-source-pill {
-  flex: 0 0 auto;
-  padding: 6px 10px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 999px;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 600;
-}
-
-.external-doc-dir-list {
-  display: grid;
-  gap: 22px;
-}
-
-.external-doc-dir h2 {
-  margin: 0 0 10px;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-}
-
-.external-doc-file-list {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 10px;
-}
-
-.external-doc-card {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  min-height: 82px;
-  padding: 14px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--surface-raised);
-  color: var(--text-primary);
-  text-decoration: none;
-  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
-}
-
-.external-doc-card:hover {
-  border-color: color-mix(in srgb, var(--selection) 42%, var(--border-subtle));
-  background: color-mix(in srgb, var(--accent) 4%, var(--surface-raised));
-  transform: translateY(-1px);
-}
-
-.external-doc-card strong {
-  font-size: 14px;
-  line-height: 1.3;
-}
-
-.external-doc-card span {
-  color: var(--text-secondary);
-  font-size: 12px;
-  line-height: 1.35;
-  overflow-wrap: anywhere;
-}
-
-/* ---------- generic pages (boards, capabilities index) ---------- */
-.page-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  margin-bottom: 8px;
-}
-.page-bar h1 { margin: 0; }
-.page-bar-label {
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-.page-lead {
-  color: var(--text-secondary);
-  font-size: 14px;
-  line-height: 1.6;
-  margin: 4px 0 24px;
-}
-
-.card-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
-  gap: 14px;
-}
-.card {
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-  min-height: 190px;
-  padding: 18px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  text-decoration: none;
-  color: var(--text-primary);
-  background: var(--surface-raised);
-  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
-}
-.card:hover {
-  border-color: color-mix(in srgb, var(--selection) 42%, var(--border-subtle));
-  transform: translateY(-1px);
-}
-.card.selected {
-  border-color: color-mix(in srgb, var(--selection) 72%, var(--border-subtle));
-  background: color-mix(in srgb, var(--accent) 5%, var(--surface-raised));
-}
-.card.selected::before {
-  content: "";
-  position: absolute;
-  inset: 0 auto 0 0;
-  width: 3px;
-  border-radius: 8px 0 0 8px;
-  background: var(--selection);
-}
-.card-title {
-  max-width: 92%;
-  font-size: 16px;
-  font-weight: 650;
-  line-height: 1.25;
-  letter-spacing: 0;
-}
-.card-title a {
-  color: inherit;
-  text-decoration: none;
-}
-.card-title a:hover { color: var(--selection); }
-.card-desc {
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.55;
-}
-.card-tags {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
-  margin-top: auto;
-}
-.card-actions {
-  padding-top: 4px;
-}
-.card-actions .btn {
-  height: 30px;
-  padding: 0 11px;
-  border-radius: 999px;
-  font-size: 12px;
-}
-.card-actions .capability-add-btn.primary {
-  background: transparent;
-  border-color: color-mix(in srgb, var(--selection) 42%, var(--border-subtle));
-  color: var(--selection);
-}
-.card-actions .capability-add-btn.primary:hover {
-  background: var(--accent-soft);
-}
-.card-actions .capability-add-btn:not(.primary) {
-  border-color: transparent;
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-}
-.tag {
-  font-size: 11px;
-  padding: 3px 8px;
-  border-radius: 999px;
-  background: var(--accent-secondary-quiet);
-  color: color-mix(in srgb, var(--accent-secondary) 72%, var(--text-primary));
-}
-.empty-note {
-  grid-column: 1 / -1;
-  padding: 32px;
-  text-align: center;
-  color: var(--text-secondary);
-  border: 1px dashed var(--border-subtle);
-  border-radius: 12px;
-}
-
-.capability-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 300px;
-  gap: 28px;
-  align-items: start;
-}
-
-.capability-grid {
-  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 16px;
-}
-
-.capability-library h1 {
-  font-size: 32px;
-  letter-spacing: 0;
-  margin-bottom: 6px;
-}
-
-.capability-library .page-lead {
-  max-width: 680px;
-  margin-bottom: 28px;
-}
-
-.board-library .page-lead {
-  max-width: 760px;
-}
-
-.board-grid {
-  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
-  gap: 18px;
-}
-
-.token-library .page-bar {
-  margin-bottom: 6px;
-}
-
-.token-actions {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-end;
-  gap: 8px;
-}
-
-.token-section {
-  margin-top: 30px;
-}
-
-.token-section h2 {
-  margin: 0 0 14px;
-  font-size: 17px;
-  font-weight: 700;
-}
-
-.token-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
-  gap: 12px;
-}
-
-.token-card {
-  position: relative;
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 44px;
-  align-items: stretch;
-  min-height: 72px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: var(--surface-raised);
-  overflow: hidden;
-  transition: border-color 0.12s ease, background 0.12s ease;
-}
-
-.token-card:hover {
-  border-color: color-mix(in srgb, var(--selection) 36%, var(--border-subtle));
-}
-
-.token-card.selected {
-  border-color: var(--brand-500);
-  background: color-mix(in srgb, var(--accent) 4%, var(--surface-raised));
-}
-
-.token-card input {
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.token-select-zone {
-  display: grid;
-  grid-template-columns: 42px minmax(0, 1fr);
-  gap: 12px;
-  align-items: center;
-  padding: 10px;
-  cursor: pointer;
-}
-
-.token-copy-btn {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 44px;
-  border: none;
-  border-left: 1px solid var(--border-subtle);
-  background: transparent;
-  color: var(--text-secondary);
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-
-.token-copy-btn:hover {
-  background: var(--accent-soft);
-  color: var(--selection);
-}
-
-.token-copy-btn:focus-visible {
-  outline: 2px solid var(--selection);
-  outline-offset: -2px;
-}
-
-.token-copy-btn svg {
-  width: 17px;
-  height: 17px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.token-swatch {
-  width: 42px;
-  height: 42px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 7px;
-  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.02);
-}
-
-[data-theme="dark"] .card,
-[data-theme="dark"] .token-card,
-[data-theme="dark"] .capability-cart,
-[data-theme="dark"] .command-panel,
-[data-theme="dark"] .modal {
-  border-color: rgba(255, 255, 255, 0.08);
-  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025), 0 18px 48px rgba(0, 0, 0, 0.36);
-}
-
-[data-theme="dark"] .card:hover,
-[data-theme="dark"] .token-card:hover {
-  border-color: color-mix(in srgb, var(--accent) 38%, rgba(255, 255, 255, 0.12));
-}
-
-[data-theme="dark"] .shell-topbar,
-[data-theme="dark"] .sidebar {
-  border-color: rgba(255, 255, 255, 0.075);
-}
-
-[data-theme="dark"] .nav-link.active {
-  background: rgba(163, 162, 126, 0.16);
-  color: #ffffff;
-}
-
-[data-theme="dark"] .btn.primary {
-  color: #111312;
-}
-
-.token-copy {
-  min-width: 0;
-  display: grid;
-  gap: 2px;
-}
-
-.token-copy strong {
-  font-size: 13px;
-  line-height: 1.25;
-}
-
-.token-copy code {
-  color: var(--text-secondary);
-  font: 12px/1.25 "SF Mono", ui-monospace, Menlo, monospace;
-  background: transparent;
-}
-
-.token-copy small {
-  color: var(--text-secondary);
-  font-size: 11.5px;
-  line-height: 1.3;
-}
-
-.capability-cart {
-  position: sticky;
-  top: 18px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 8px;
-  background: color-mix(in srgb, var(--bg-panel) 96%, var(--bg-hover));
-  overflow: hidden;
-  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02);
-}
-
-.capability-cart-head,
-.capability-cart-actions {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 14px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.capability-cart-actions {
-  border-top: 1px solid var(--border-subtle);
-  border-bottom: none;
-}
-
-.capability-cart-head h2 {
-  margin: 0;
-  font-size: 13px;
-  font-weight: 650;
-  text-transform: uppercase;
-  letter-spacing: 0.04em;
-  color: var(--text-secondary);
-}
-
-.capability-cart-count {
-  min-width: 24px;
-  height: 24px;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  border-radius: 999px;
-  background: var(--accent-quiet);
-  color: var(--selection);
-  font-size: 12px;
-  font-weight: 700;
-}
-
-.capability-cart-body {
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-  max-height: 420px;
-  overflow-y: auto;
-  padding: 8px;
-}
-
-.capability-cart-empty {
-  padding: 22px 12px;
-  color: var(--text-secondary);
-  font-size: 12.5px;
-  line-height: 1.5;
-}
-
-.capability-cart-item {
-  display: flex;
-  align-items: flex-start;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 10px;
-  border-radius: 8px;
-  background: var(--surface-raised);
-  border: 1px solid transparent;
-}
-
-.capability-cart-item:hover {
-  border-color: var(--border-subtle);
-}
-
-.capability-cart-item-title {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 1.35;
-}
-
-.capability-cart-item-meta {
-  margin-top: 2px;
-  font-size: 11px;
-  color: var(--text-secondary);
-  line-height: 1.35;
-}
-
-.capability-cart-remove {
-  border: none;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 11.5px;
-  cursor: pointer;
-  padding: 1px 0;
-}
-
-.capability-cart-remove:hover {
-  color: var(--danger);
-}
-
-/* ---------- markdown body ---------- */
-.markdown-body { font-size: 15px; line-height: 1.7; color: var(--text-primary); }
-.markdown-body h1 { font-size: 30px; font-weight: 700; margin: 8px 0 20px; letter-spacing: -0.015em; }
-.markdown-body h2 {
-  font-size: 22px;
-  font-weight: 650;
-  margin: 36px 0 14px;
-  padding-bottom: 8px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-.markdown-body h3 { font-size: 17px; font-weight: 650; margin: 26px 0 10px; }
-.markdown-body h4 { font-size: 15px; font-weight: 650; margin: 20px 0 8px; }
-.markdown-body p { margin: 14px 0; }
-.markdown-body a { color: var(--selection); text-decoration: none; }
-.markdown-body a:hover { text-decoration: underline; }
-.markdown-body ul, .markdown-body ol { margin: 14px 0; padding-left: 26px; }
-.markdown-body li { margin: 5px 0; }
-.markdown-body li.task { list-style: none; margin-left: -22px; }
-.markdown-body li.task input { margin-right: 8px; }
-.markdown-body blockquote {
-  margin: 16px 0;
-  padding: 4px 16px;
-  border-left: 3px solid var(--selection);
-  background: var(--bg-hover);
-  border-radius: 0 8px 8px 0;
-  color: var(--text-secondary);
-}
-.markdown-body code {
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  font-size: 0.86em;
-  background: var(--bg-hover);
-  padding: 2px 6px;
-  border-radius: 5px;
-}
-.markdown-body pre.code-block {
-  margin: 16px 0;
-  padding: 16px;
-  background: var(--bg-hover);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  overflow-x: auto;
-}
-.markdown-body pre.code-block code { background: none; padding: 0; font-size: 13px; line-height: 1.6; }
-.markdown-body img { max-width: 100%; border-radius: 8px; }
-.markdown-body hr { border: none; border-top: 1px solid var(--border-subtle); margin: 32px 0; }
-.markdown-body table {
-  width: 100%;
-  border-collapse: collapse;
-  margin: 18px 0;
-  font-size: 13.5px;
-}
-.markdown-body th, .markdown-body td {
-  border: 1px solid var(--border-subtle);
-  padding: 8px 12px;
-  text-align: left;
-}
-.markdown-body th { background: var(--bg-hover); font-weight: 600; }
-.markdown-body .md-error {
-  margin: 16px 0;
-  padding: 14px 16px;
-  border: 1px solid #ef4444;
-  border-radius: 10px;
-  background: rgba(239, 68, 68, 0.08);
-  color: var(--text-primary);
-}
-.markdown-body .md-error pre {
-  margin: 8px 0 0;
-  font-size: 12px;
-  white-space: pre-wrap;
-  color: var(--text-secondary);
-}
-
-/* ---------- board embeds in markdown ---------- */
-.board-embed { margin: 24px 0; }
-.board-embed-frame {
-  position: relative;
-  width: 100%;
-  border: 1px solid var(--border-subtle);
-  border-radius: 12px;
-  overflow: hidden;
-  background: var(--bg-canvas);
-  box-shadow: var(--shadow-soft);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.board-embed-frame canvas { display: block; }
-.board-embed-frame.error { color: var(--text-secondary); font-size: 13px; }
-.board-embed-msg { padding: 24px; }
-.board-embed-open {
-  position: absolute;
-  bottom: 10px;
-  right: 10px;
-  padding: 5px 10px;
-  font-size: 12px;
-  font-weight: 500;
-  border-radius: 8px;
-  background: var(--bg-toolbar);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--border-subtle);
-  color: var(--text-primary);
-  text-decoration: none;
-  opacity: 0;
-  transition: opacity 0.15s ease;
-}
-.board-embed-frame:hover .board-embed-open { opacity: 1; }
-.board-embed figcaption {
-  margin-top: 8px;
-  font-size: 12.5px;
-  color: var(--text-secondary);
-  text-align: center;
-}
-
-/* ---------- board editor (full-screen mode) ---------- */
-.board-editor-host { position: fixed; inset: 0; z-index: 500; }
-
-/* "← Docs" button sits to the left of the title in the top-left cluster */
-.top-left .back-btn {
-  height: 40px;
-  width: auto;
-  gap: 6px;
-  padding: 0 12px;
-  background: var(--bg-toolbar);
-  backdrop-filter: blur(16px);
-  border: 1px solid var(--border-subtle);
-  box-shadow: var(--shadow-soft);
-  font-size: 13px;
-  font-weight: 500;
-}
-.top-left .back-btn span { line-height: 1; }
-
-/* drag-to-select embed overlay */
-.embed-select-overlay {
-  position: fixed;
-  inset: 0;
-  z-index: 1000;
-  cursor: crosshair;
-  background: rgba(15, 23, 42, 0.18);
-}
-.embed-select-rect {
-  position: absolute;
-  border: 1.5px solid var(--selection);
-  background: color-mix(in srgb, var(--selection) 16%, transparent);
-  box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.12);
-  pointer-events: none;
-}
-.embed-select-hint {
-  position: fixed;
-  top: 16px;
-  left: 50%;
-  transform: translateX(-50%);
-  padding: 8px 14px;
-  border-radius: 10px;
-  font-size: 13px;
-  font-weight: 500;
-  color: #fff;
-  background: rgba(15, 23, 42, 0.82);
-  pointer-events: none;
-}
-
-/* ---------- doc page actions + embed chips ---------- */
-.doc-page { position: relative; }
-.doc-actions {
-  display: flex;
-  justify-content: flex-end;
-  gap: 8px;
-  margin-bottom: 8px;
-}
-/* Subtle, elegant edit affordance: grey border + grey text. */
-.btn.doc-edit {
-  background: transparent;
-  border-color: var(--border-subtle);
-  color: var(--text-secondary);
-  font-weight: 500;
-}
-.btn.doc-edit:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.capability-doc-actions {
-  align-items: center;
-}
-
-.capability-doc-actions .capability-detail-btn,
-.capability-doc-actions .capability-detail-btn.primary {
-  height: 34px;
-  padding: 0 13px;
-  border-radius: 999px;
-  background: transparent;
-  border-color: color-mix(in srgb, var(--selection) 34%, var(--border-subtle));
-  color: var(--text-primary);
-  font-size: 12.5px;
-  font-weight: 500;
-}
-
-.capability-doc-actions .capability-detail-btn:hover,
-.capability-doc-actions .capability-detail-btn.primary:hover {
-  background: var(--accent-soft);
-  color: var(--text-primary);
-}
-
-.capability-doc-actions .capability-detail-btn.is-selected {
-  background: var(--accent-secondary);
-  border-color: var(--accent-secondary);
-  color: #fff;
-}
-
-.capability-doc-actions .capability-detail-btn.is-selected:hover {
-  background: color-mix(in srgb, var(--accent-secondary) 88%, #000);
-  color: #fff;
-}
-.markdown-body figure.board-embed.embed-chip {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 12px 16px;
-  border: 1px dashed var(--border-subtle);
-  border-radius: 10px;
-  background: var(--bg-hover);
-  color: var(--text-secondary);
-  font-size: 13px;
-  user-select: none;
-  cursor: pointer;
-  outline: none;
-}
-.markdown-body figure.board-embed.embed-chip:hover,
-.markdown-body figure.board-embed.embed-chip.selected,
-.markdown-body figure.board-embed.embed-chip:focus {
-  border-color: color-mix(in srgb, var(--selection) 54%, var(--border-subtle));
-  background: var(--accent-soft);
-  color: var(--text-primary);
-}
-.embed-chip-icon { font-size: 15px; }
-.embed-chip-remove {
-  margin-left: auto;
-  color: var(--text-secondary);
-  font-size: 12px;
-  font-weight: 600;
-  opacity: 0;
-  transition: opacity 0.12s ease;
-}
-.embed-chip:hover .embed-chip-remove,
-.embed-chip.selected .embed-chip-remove,
-.embed-chip:focus .embed-chip-remove {
-  opacity: 0.85;
-}
-.doc-editor-surface .embed-caret-spacer {
-  min-height: 1.35em;
-}
-
-/* ---------- doc editor (WYSIWYG) ---------- */
-.doc-editor {
-  position: fixed;
-  inset: 0;
-  z-index: 700;
-  display: flex;
-  flex-direction: column;
-  background: var(--bg-canvas);
-}
-.doc-editor-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 16px;
-  padding: 10px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-canvas);
-}
-.doc-editor-bar-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
-.doc-editor-done {
-  padding: 7px 16px;
-  border: 1px solid var(--border-subtle);
-  background: transparent;
-  color: var(--text-secondary);
-  border-radius: 8px;
-  font-size: 13px;
-  font-weight: 500;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.doc-editor-done:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-.doc-editor-path {
-  font-size: 12.5px;
-  color: var(--text-secondary);
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-/* Quiet, ambient indicator: only an error is allowed to stand out. */
-.doc-editor-status {
-  font-size: 12px;
-  color: var(--text-secondary);
-  opacity: 0.6;
-  white-space: nowrap;
-}
-.doc-editor-status[data-state="error"] {
-  color: var(--danger);
-  opacity: 1;
-  font-weight: 600;
-}
-
-.doc-editor-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 6px;
-  padding: 7px 16px;
-  border-bottom: 1px solid var(--border-subtle);
-  background: var(--bg-canvas);
-  position: sticky;
-  top: 0;
-  z-index: 1;
-}
-.doc-editor-tb-group {
-  display: flex;
-  align-items: center;
-  gap: 3px;
-  padding: 3px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  background: color-mix(in srgb, var(--surface-raised) 72%, transparent);
-}
-.doc-editor-tb-btn {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 32px;
-  height: 32px;
-  padding: 0 8px;
-  border: none;
-  border-radius: 8px;
-  background: transparent;
-  color: var(--text-secondary);
-  font-size: 13px;
-  font-weight: 600;
-  cursor: pointer;
-  transition: background 0.12s ease, color 0.12s ease;
-}
-.doc-editor-tb-btn:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-.doc-editor-tb-btn.active {
-  background: var(--accent-secondary-quiet);
-  color: var(--text-primary);
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--accent-secondary) 28%, transparent);
-}
-.doc-editor-tb-btn:focus-visible {
-  outline: 2px solid var(--selection);
-  outline-offset: 2px;
-}
-.doc-editor-tb-btn.icon svg {
-  width: 17px;
-  height: 17px;
-  stroke: currentColor;
-  fill: none;
-  stroke-width: 1.8;
-  stroke-linecap: round;
-  stroke-linejoin: round;
-}
-
-.doc-editor-scroll {
-  flex: 1 1 auto;
-  overflow-y: auto;
-}
-.doc-editor-surface {
-  max-width: 820px;
-  margin: 0 auto;
-  padding: 36px 40px 160px;
-  min-height: 100%;
-  outline: none;
-  background: transparent;
-}
-.doc-editor-surface:focus { outline: none; }
-.doc-editor-surface img { cursor: default; }
-.doc-editor-surface:empty::before {
-  content: "Start writing...";
-  color: var(--text-secondary);
-  opacity: 0.55;
-}
-.doc-editor-surface a {
-  cursor: text;
-}
-.doc-editor-surface pre.code-block {
-  position: relative;
-}
-.doc-editor-surface pre.code-block:focus-within {
-  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--selection) 34%, transparent);
-}
-
-/* ============================================================
-   Breadcrumb
-   ============================================================ */
-
-.breadcrumb {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 4px;
-  margin-bottom: 20px;
-  font-size: 12px;
-  font-weight: 500;
-  color: var(--text-secondary);
-}
-
-.breadcrumb-link {
-  color: var(--text-secondary);
-  text-decoration: none;
-  padding: 2px 4px;
-  border-radius: 4px;
-  transition: color 0.1s ease, background 0.1s ease;
-}
-.breadcrumb-link:hover {
-  color: var(--text-primary);
-  background: var(--bg-hover);
-}
-
-.breadcrumb-sep {
-  color: var(--text-secondary);
-  opacity: 0.4;
-  user-select: none;
-  padding: 0 2px;
-}
-
-.breadcrumb-current {
-  color: var(--text-primary);
-  font-weight: 600;
-}
-
-/* ============================================================
-   Page prev / next navigation
-   ============================================================ */
-
-.page-nav {
-  display: flex;
-  align-items: stretch;
-  justify-content: space-between;
-  gap: 12px;
-  margin-top: 56px;
-  padding-top: 20px;
-  border-top: 1px solid var(--border-subtle);
-}
-
-.page-nav-prev,
-.page-nav-next {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  padding: 12px 16px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  text-decoration: none;
-  color: var(--text-secondary);
-  background: var(--surface-raised);
-  font-size: 13px;
-  font-weight: 500;
-  min-width: 0;
-  max-width: 48%;
-  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
-}
-.page-nav-prev:hover,
-.page-nav-next:hover {
-  border-color: color-mix(in srgb, var(--selection) 45%, var(--border-subtle));
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-
-.page-nav-prev { margin-right: auto; }
-.page-nav-next { margin-left: auto; flex-direction: row-reverse; }
-
-.page-nav-label {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  min-width: 0;
-}
-
-.page-nav-arrow {
-  flex: 0 0 auto;
-  font-size: 15px;
-  line-height: 1;
-  color: var(--text-secondary);
-  transition: color 0.12s ease;
-}
-.page-nav-prev:hover .page-nav-arrow,
-.page-nav-next:hover .page-nav-arrow {
-  color: var(--text-primary);
-}
-
-.page-nav-spacer { flex: 1; }
-
-/* ============================================================
-   Sidebar docs mode
-   ============================================================ */
-
-/* Brand button — same look as a link, activates on click */
-.sidebar-brand {
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 17px;
-  font-weight: 700;
-  letter-spacing: -0.01em;
-  color: var(--text-primary);
-  text-decoration: none;
-  padding: 0;
-  transition: color 0.12s ease;
-}
-.sidebar-brand:hover { color: var(--selection); }
-.sidebar-brand:focus-visible {
-  outline: 2px solid var(--selection);
-  outline-offset: 3px;
-  border-radius: 4px;
-}
-
-/* Docs mode: brand gets an active indicator */
-.sidebar-docs-mode .sidebar-brand {
-  color: var(--selection);
-}
-.sidebar-docs-mode .sidebar-brand::after {
-  content: " ·";
-  opacity: 0.4;
-}
-
-/* Back row */
-.docs-mode-back-row {
-  padding: 8px 0 4px;
-}
-.docs-mode-back {
-  display: flex;
-  align-items: center;
-  gap: 6px;
-  border: none;
-  background: none;
-  cursor: pointer;
-  font-size: 12px;
-  font-weight: 600;
-  color: var(--text-secondary);
-  padding: 5px 8px;
-  border-radius: 7px;
-  width: 100%;
-  text-align: left;
-  transition: background 0.1s ease, color 0.1s ease;
-}
-.docs-mode-back:hover { background: var(--bg-hover); color: var(--text-primary); }
-.docs-mode-back svg {
-  width: 12px;
-  height: 12px;
-  flex: 0 0 auto;
-}
-
-/* Docs mode tree — auto-expanded, slight indent */
-.docs-mode-tree { padding-left: 0; }
-
-/* ============================================================
-   Home page — two-column: guide + workspace panel
-   ============================================================ */
-
-.home-page { padding-top: 8px; }
-
-.home-layout {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) 300px;
-  gap: 36px;
-  align-items: start;
-}
-
-/* ── Guide (left) ── */
-.home-guide { min-width: 0; }
-
-.home-hero-title {
-  font-size: 30px;
-  font-weight: 750;
-  letter-spacing: -0.02em;
-  line-height: 1.1;
-  margin: 0 0 8px;
-  color: var(--text-primary);
-}
-.home-hero-sub {
-  font-size: 14px;
-  line-height: 1.65;
-  color: var(--text-secondary);
-  margin: 0 0 32px;
-}
-
-/* Feature sections */
-.home-feature {
-  margin-bottom: 28px;
-  padding-bottom: 28px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-.home-feature:last-of-type { border-bottom: none; }
-
-.home-feature-header { margin-bottom: 8px; }
-
-.home-feature-badge {
-  display: inline-block;
-  padding: 2px 10px;
-  border-radius: 999px;
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  border: 1px solid var(--border-subtle);
-  background: var(--accent-soft);
-  color: var(--text-secondary);
-}
-.home-feature-badge-board {
-  background: var(--nav-board-bg);
-  color: var(--nav-board-color);
-  border-color: color-mix(in srgb, var(--nav-board-color) 25%, var(--border-subtle));
-}
-.home-feature-badge-capability {
-  background: var(--nav-cap-bg);
-  color: var(--nav-cap-color);
-  border-color: color-mix(in srgb, var(--nav-cap-color) 25%, var(--border-subtle));
-}
-.home-feature-badge-doc {
-  background: var(--accent-soft);
-  color: var(--text-secondary);
-}
-
-.home-feature-body {
-  font-size: 13.5px;
-  line-height: 1.65;
-  color: var(--text-secondary);
-  margin: 0 0 10px;
-}
-
-.home-feature-list {
-  margin: 0;
-  padding-left: 18px;
-  display: flex;
-  flex-direction: column;
-  gap: 4px;
-}
-.home-feature-list li {
-  font-size: 13px;
-  line-height: 1.55;
-  color: var(--text-secondary);
-}
-
-/* Shortcut table */
-.home-shortcut-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-  margin: 32px 0 10px;
-}
-.home-shortcut-table {
-  display: grid;
-  gap: 1px;
-  background: var(--border-subtle);
-  border: 1px solid var(--border-subtle);
-  border-radius: 10px;
-  overflow: hidden;
-}
-.home-shortcut-row {
-  display: flex;
-  align-items: center;
-  gap: 16px;
-  padding: 7px 12px;
-  background: var(--surface-raised);
-}
-.home-shortcut-row:hover { background: var(--bg-hover); }
-.home-shortcut-key {
-  flex: 0 0 auto;
-  min-width: 200px;
-  font: 11.5px/1.4 "SF Mono", ui-monospace, Menlo, monospace;
-  color: var(--text-primary);
-  background: transparent;
-  border: none;
-  padding: 0;
-}
-.home-shortcut-desc {
-  font-size: 12.5px;
-  color: var(--text-secondary);
-}
-
-/* ── Workspace panel (right) ── */
-.home-panel {
-  position: sticky;
-  top: 24px;
-  border: 1px solid var(--border-subtle);
-  border-radius: 12px;
-  background: var(--surface-raised);
-  overflow: hidden;
-}
-
-.home-panel-head {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: 12px 14px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-.home-panel-title {
-  font-size: 11px;
-  font-weight: 700;
-  letter-spacing: 0.07em;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-}
-.home-panel-add {
-  padding: 4px 10px;
-  font-size: 12px;
-  height: auto;
-}
-
-.home-panel-empty {
-  padding: 20px 14px;
-  font-size: 13px;
-  color: var(--text-secondary);
-  line-height: 1.5;
-}
-
-/* Per-project block inside panel */
-.home-panel-project {
-  border-bottom: 1px solid var(--border-subtle);
-}
-.home-panel-project:last-child { border-bottom: none; }
-
-.home-panel-project-head {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 10px;
-  padding: 10px 14px 6px;
-  text-decoration: none;
-  border-bottom: 1px solid var(--border-subtle);
-  transition: background 0.1s ease;
-}
-.home-panel-project-head:hover { background: var(--bg-hover); }
-
-.home-panel-project-name {
-  font-size: 13px;
-  font-weight: 650;
-  color: var(--text-primary);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.home-panel-project-meta {
-  flex: 0 0 auto;
-  font-size: 11px;
-  color: var(--text-secondary);
-  white-space: nowrap;
-}
-
-/* Root rows inside a project block */
-.home-panel-roots { display: flex; flex-direction: column; }
-
-.home-panel-root {
-  display: flex;
-  align-items: baseline;
-  justify-content: space-between;
-  gap: 8px;
-  padding: 5px 14px;
-  text-decoration: none;
-  transition: background 0.1s ease;
-  border-bottom: 1px solid color-mix(in srgb, var(--border-subtle) 50%, transparent);
-}
-.home-panel-root:last-of-type { border-bottom: none; }
-.home-panel-root:hover { background: var(--bg-hover); }
-
-.home-panel-root-path {
-  font-size: 11.5px;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  color: var(--text-secondary);
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.home-panel-root:hover .home-panel-root-path { color: var(--text-primary); }
-
-.home-panel-root-meta {
-  flex: 0 0 auto;
-  font-size: 10.5px;
-  color: var(--text-secondary);
-  opacity: 0.7;
-  white-space: nowrap;
-}
-
-.home-panel-more {
-  display: block;
-  padding: 6px 14px 8px;
-  font-size: 11.5px;
-  color: var(--text-secondary);
-  text-decoration: none;
-}
-.home-panel-more:hover { color: var(--text-primary); }
-
-/* ── Wiki link button in sidebar project header ── */
-.nav-repo-label-text {
-  flex: 1 1 auto;
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-.nav-repo-wiki-link {
-  flex: 0 0 auto;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 20px;
-  height: 20px;
-  border-radius: 5px;
-  color: var(--text-secondary);
-  opacity: 0;
-  transition: opacity 0.12s ease, background 0.12s ease;
-  text-decoration: none;
-}
-.nav-repo-header:hover .nav-repo-wiki-link,
-.nav-dir-toggle:hover .nav-repo-wiki-link,
-.nav-dir-header-row:hover .nav-dir-wiki-link,
-.nav-repo-wiki-link:focus-visible {
-  opacity: 1;
-}
-
-/* Wiki links next to path-segment directories — show on hover */
-.nav-dir-project ~ .nav-dir-wiki-link {
-  opacity: 0;
-}
-
-.nav-dir-header-row:hover .nav-dir-project ~ .nav-dir-wiki-link {
-  opacity: 0.7;
-}
-.nav-repo-wiki-link:hover { background: var(--bg-active); color: var(--text-primary); }
-.nav-repo-wiki-link svg { width: 12px; height: 12px; }
-
-/* ============================================================
-   Project wiki page
-   ============================================================ */
-
-.wiki-page { padding-top: 4px; }
-
-.wiki-head {
-  margin-bottom: 28px;
-  padding-bottom: 20px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-.wiki-back {
-  display: inline-block;
-  font-size: 12px;
-  color: var(--text-secondary);
-  text-decoration: none;
-  margin-bottom: 10px;
-}
-.wiki-back:hover { color: var(--text-primary); }
-
-.wiki-title {
-  font-size: 26px;
-  font-weight: 750;
-  letter-spacing: -0.01em;
-  margin: 0 0 16px;
-}
-
-.wiki-stats {
-  display: flex;
-  gap: 24px;
-  flex-wrap: wrap;
-}
-.wiki-stat { text-align: left; }
-.wiki-stat-val {
-  font-size: 22px;
-  font-weight: 700;
-  font-variant-numeric: tabular-nums;
-  color: var(--text-primary);
-  line-height: 1;
-}
-.wiki-stat-label {
-  font-size: 11px;
-  color: var(--text-secondary);
-  margin-top: 2px;
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-  font-weight: 600;
-}
-
-/* Per-root section */
-.wiki-root-section {
-  margin-bottom: 24px;
-  padding-bottom: 24px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-.wiki-root-section:last-child { border-bottom: none; }
-
-.wiki-root-head { margin-bottom: 12px; }
-.wiki-root-path {
-  font-size: 12px;
-  font-weight: 700;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  color: var(--text-secondary);
-  letter-spacing: 0.01em;
-}
-
-.wiki-root-empty {
-  font-size: 12px;
-  color: var(--text-secondary);
-  font-style: italic;
-}
-
-/* Three-column layout per root */
-.wiki-root-cols {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-.wiki-col-head {
-  font-size: 10.5px;
-  font-weight: 700;
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  color: var(--text-secondary);
-  margin-bottom: 6px;
-  padding-bottom: 5px;
-  border-bottom: 1px solid var(--border-subtle);
-}
-
-.wiki-col-list {
-  display: flex;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.wiki-col-item {
-  display: block;
-  padding: 4px 6px;
-  border-radius: 5px;
-  font-size: 12.5px;
-  text-decoration: none;
-  color: var(--text-secondary);
-  transition: background 0.1s ease, color 0.1s ease;
-  text-transform: capitalize;
-}
-.wiki-col-item:hover {
-  background: var(--bg-hover);
-  color: var(--text-primary);
-}
-.wiki-col-item-board { color: var(--nav-board-color); }
-.wiki-col-item-board:hover { background: var(--nav-board-bg); color: var(--nav-board-color); }
-.wiki-col-item-cap { color: var(--nav-cap-color); }
-.wiki-col-item-cap:hover { background: var(--nav-cap-bg); color: var(--nav-cap-color); }
-
-.wiki-col-item-path {
-  display: block;
-  font-size: 10.5px;
-  font-family: "SF Mono", ui-monospace, Menlo, monospace;
-  color: var(--text-secondary);
-  opacity: 0.6;
-  margin-top: 1px;
-}
-
-@media (max-width: 720px) {
-  .sidebar { flex-basis: 220px; width: 220px; }
-  .shell-topbar { padding: 10px 12px; }
-  .topbar-search {
-    width: auto;
-    flex: 1 1 auto;
-  }
-  .topbar-search kbd { display: none; }
-  .topbar-edit span { display: none; }
-  .topbar-edit {
-    width: 34px;
-    padding: 0;
-    justify-content: center;
-  }
-  .capability-layout {
-    grid-template-columns: 1fr;
-  }
-  .capability-cart {
-    position: static;
-  }
-  .content { padding: 32px 20px 100px; }
-  .doc-editor-surface { padding: 24px 18px 140px; }
-}
-
-/* ---------- Project three-dot menu button ---------- */
-
-.nav-repo-more {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 0 0 auto;
-  width: 22px;
-  height: 22px;
-  padding: 0;
-  margin-left: auto;
-  margin-right: 2px;
-  background: transparent;
-  border: none;
-  border-radius: 4px;
-  color: var(--text-secondary);
-  cursor: pointer;
-  opacity: 0;
-  transition: opacity 0.12s ease, background 0.12s ease;
-}
-
-.nav-repo-header:hover .nav-repo-more {
-  opacity: 0.5;
-}
-
-.nav-repo-more:hover {
-  background: var(--bg-hover);
-  opacity: 1 !important;
-}
-
-/* ---------- Raw view: non-docs directories (subtly muted) ---------- */
-
-.nav-browse-dir-toggle {
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  width: 100%;
-  padding: 4px 8px;
-  background: transparent;
-  border: none;
-  border-radius: 6px;
-  color: var(--text-secondary);
-  font-size: 13px;
-  cursor: pointer;
-  text-align: left;
-  opacity: 0.45;
-  transition: opacity 0.12s ease, background 0.12s ease;
-}
-
-.nav-browse-dir-toggle:hover {
-  background: var(--bg-hover);
-  opacity: 0.75;
-}
-
-/* Inline rename / create input */
-.nav-inline-input {
-  display: block;
-  width: 100%;
-  padding: 4px 8px;
-  margin: 1px 0;
-  font: inherit;
-  font-size: 13px;
-  color: var(--text-primary);
-  background: var(--bg-canvas);
-  border: 1px solid var(--brand-300);
-  border-radius: 4px;
-  outline: none;
-  box-shadow: 0 0 0 2px rgba(0, 120, 212, 0.15);
-}
-
-.nav-inline-input::placeholder {
-  color: var(--text-secondary);
-  opacity: 0.6;
-}