metanorma-document 0.2.9 → 0.2.12

data/frontend/src/stores/__tests__/ebookStore.test.ts

@@ -0,0 +1,145 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { nextTick } from 'vue'
+import { setActivePinia, createPinia } from 'pinia'
+import { useEbookStore } from '../ebookStore'
+
+describe('useEbookStore', () => {
+  beforeEach(() => {
+    localStorage.clear()
+    setActivePinia(createPinia())
+  })
+
+  it('has correct defaults', () => {
+    const store = useEbookStore()
+    expect(store.fontSize).toBe(18)
+    expect(store.fontFamily).toBe('sans')
+    expect(store.contentWidth).toBe('default')
+    expect(store.theme).toBe('day')
+    expect(store.lineHeight).toBe('comfortable')
+    expect(store.showProgress).toBe(true)
+    expect(store.readingMode).toBe('scroll')
+  })
+
+  it('sets font size with clamping', () => {
+    const store = useEbookStore()
+    store.setFontSize(20)
+    expect(store.fontSize).toBe(20)
+    store.setFontSize(5)
+    expect(store.fontSize).toBe(12)
+    store.setFontSize(100)
+    expect(store.fontSize).toBe(32)
+  })
+
+  it('sets font family', () => {
+    const store = useEbookStore()
+    store.setFontFamily('serif')
+    expect(store.fontFamily).toBe('serif')
+  })
+
+  it('sets content width', () => {
+    const store = useEbookStore()
+    store.setContentWidth('wide')
+    expect(store.contentWidth).toBe('wide')
+  })
+
+  it('sets theme', () => {
+    const store = useEbookStore()
+    store.setTheme('night')
+    expect(store.theme).toBe('night')
+  })
+
+  it('cycles through themes', () => {
+    const store = useEbookStore()
+    expect(store.theme).toBe('day')
+    store.cycleTheme()
+    expect(store.theme).toBe('sepia')
+    store.cycleTheme()
+    expect(store.theme).toBe('night')
+    store.cycleTheme()
+    expect(store.theme).toBe('oled')
+    store.cycleTheme()
+    expect(store.theme).toBe('day')
+  })
+
+  it('sets line height', () => {
+    const store = useEbookStore()
+    store.setLineHeight('spacious')
+    expect(store.lineHeight).toBe('spacious')
+  })
+
+  it('toggles focus mode', () => {
+    const store = useEbookStore()
+    store.setFocusMode(true)
+    expect(store.focusMode).toBe(true)
+    store.toggleFocusMode()
+    expect(store.focusMode).toBe(false)
+  })
+
+  it('toggles settings panel', () => {
+    const store = useEbookStore()
+    expect(store.settingsOpen).toBe(false)
+    store.toggleSettings()
+    expect(store.settingsOpen).toBe(true)
+    expect(store.tocOpen).toBe(false)
+  })
+
+  it('toggles toc panel', () => {
+    const store = useEbookStore()
+    store.toggleToc()
+    expect(store.tocOpen).toBe(true)
+    expect(store.settingsOpen).toBe(false)
+  })
+
+  it('closeAll closes both panels', () => {
+    const store = useEbookStore()
+    store.toggleSettings()
+    store.closeAll()
+    expect(store.settingsOpen).toBe(false)
+    expect(store.tocOpen).toBe(false)
+  })
+
+  it('returns theme class', () => {
+    const store = useEbookStore()
+    expect(store.getThemeClass()).toBe('theme-day')
+    store.setTheme('night')
+    expect(store.getThemeClass()).toBe('theme-night')
+  })
+
+  it('returns CSS variables', () => {
+    const store = useEbookStore()
+    const vars = store.getCssVariables()
+    expect(vars['--ebook-font-size']).toBe('18px')
+    expect(vars['--ebook-max-width']).toBe('58rem')
+    expect(vars['--ebook-line-height']).toBe('1.6')
+  })
+
+  it('CSS variables reflect focus mode', () => {
+    const store = useEbookStore()
+    store.setFocusMode(true)
+    const vars = store.getCssVariables()
+    expect(vars['--ebook-max-width']).toBe('100%')
+  })
+
+  it('persists preferences to localStorage', async () => {
+    const store = useEbookStore()
+    store.setTheme('night')
+    store.setFontSize(24)
+    await nextTick()
+
+    const stored = JSON.parse(localStorage.getItem('metanorma_ebook_preferences')!)
+    expect(stored.theme).toBe('night')
+    expect(stored.fontSize).toBe(24)
+  })
+
+  it('loads preferences from localStorage', () => {
+    localStorage.setItem('metanorma_ebook_preferences', JSON.stringify({
+      theme: 'sepia',
+      fontSize: 22,
+    }))
+
+    setActivePinia(createPinia())
+    const store = useEbookStore()
+    expect(store.theme).toBe('sepia')
+    expect(store.fontSize).toBe(22)
+  })
+})

data/frontend/src/stores/__tests__/uiStore.test.ts

@@ -0,0 +1,42 @@
+import { describe, it, expect, beforeEach } from 'vitest'
+import { setActivePinia, createPinia } from 'pinia'
+import { useUiStore } from '../uiStore'
+
+describe('useUiStore', () => {
+  beforeEach(() => {
+    setActivePinia(createPinia())
+  })
+
+  it('has correct defaults', () => {
+    const store = useUiStore()
+    expect(store.sidebarOpen).toBe(false)
+    expect(store.activeSectionId).toBeNull()
+  })
+
+  it('opens sidebar', () => {
+    const store = useUiStore()
+    store.openSidebar()
+    expect(store.sidebarOpen).toBe(true)
+  })
+
+  it('closes sidebar', () => {
+    const store = useUiStore()
+    store.openSidebar()
+    store.closeSidebar()
+    expect(store.sidebarOpen).toBe(false)
+  })
+
+  it('toggles sidebar', () => {
+    const store = useUiStore()
+    store.toggleSidebar()
+    expect(store.sidebarOpen).toBe(true)
+    store.toggleSidebar()
+    expect(store.sidebarOpen).toBe(false)
+  })
+
+  it('sets active section', () => {
+    const store = useUiStore()
+    store.setActiveSection('scope')
+    expect(store.activeSectionId).toBe('scope')
+  })
+})

data/frontend/src/stores/documentStore.ts

@@ -0,0 +1,153 @@
+import { defineStore } from 'pinia'
+import { ref, shallowRef, computed } from 'vue'
+
+// ============================================================
+// MetanormaMirror (ProseMirror-style) Types
+// ============================================================
+
+export interface MirrorMark {
+  type: 'emphasis' | 'strong' | 'subscript' | 'superscript' | 'code'
+    | 'underline' | 'strike' | 'smallcap' | 'link' | 'xref'
+    | 'eref' | 'footnote' | 'stem' | 'concept' | 'bcp14' | 'span'
+  attrs?: Record<string, any>
+}
+
+export interface MirrorTextNode {
+  type: 'text'
+  text: string
+  marks?: MirrorMark[]
+}
+
+export interface MirrorBlockNode {
+  type: string
+  attrs?: Record<string, any>
+  content?: (MirrorTextNode | MirrorBlockNode)[]
+}
+
+export interface MirrorDocument {
+  type: 'doc'
+  attrs?: Record<string, any>
+  content?: MirrorBlockNode[]
+}
+
+// ============================================================
+// TOC Types
+// ============================================================
+
+export interface TocItem {
+  id: string
+  title: string
+  type: string
+  children: TocItem[]
+  number?: string
+}
+
+interface DocumentMeta {
+  title?: string
+  flavor?: string
+  docType?: string
+  schemaVersion?: string
+  sections: TocItem[]
+  numbering: Record<string, string>
+}
+
+// ============================================================
+// Document Store
+// ============================================================
+
+export const useDocumentStore = defineStore('document', () => {
+  const documentMeta = ref<DocumentMeta | null>(null)
+  const mirrorDocument = shallowRef<MirrorDocument | null>(null)
+  const loadError = ref<string | null>(null)
+
+  function processMetanormaData(data: any): void {
+    if (data.type === 'doc' && Array.isArray(data.content)) {
+      mirrorDocument.value = data as MirrorDocument
+
+      if (data.toc?.sections) {
+        documentMeta.value = {
+          title: data.meta?.title || data.attrs?.title,
+          flavor: data.meta?.flavor || data.attrs?.flavor,
+          docType: data.meta?.type || data.attrs?.type,
+          schemaVersion: data.meta?.schema_version || data.attrs?.schema_version,
+          sections: data.toc.sections,
+          numbering: data.toc.numbering || {},
+        }
+      } else {
+        documentMeta.value = {
+          title: data.meta?.title || data.attrs?.title,
+          flavor: data.meta?.flavor || data.attrs?.flavor,
+          docType: data.meta?.type || data.attrs?.type,
+          schemaVersion: data.meta?.schema_version || data.attrs?.schema_version,
+          sections: extractToc(data.content),
+          numbering: {},
+        }
+      }
+    }
+  }
+
+  function extractToc(nodes: any[]): TocItem[] {
+    const sectionTypes = new Set([
+      'clause', 'annex', 'terms', 'definitions', 'references',
+      'abstract', 'foreword', 'introduction', 'acknowledgements',
+    ])
+    const items: TocItem[] = []
+    for (const node of nodes) {
+      if (sectionTypes.has(node.type) && node.attrs?.id) {
+        items.push({
+          id: node.attrs.id,
+          title: node.attrs.title || node.type,
+          type: node.type,
+          children: node.content ? extractToc(node.content) : [],
+        })
+      }
+    }
+    return items
+  }
+
+  function loadFromWindow(): void {
+    loadError.value = null
+    const data = (window as any).METANORMA_DATA
+    if (data) {
+      processMetanormaData(data)
+      delete (window as any).METANORMA_DATA
+    } else {
+      fetch('metanorma.data.json')
+        .then(res => {
+          if (!res.ok) throw new Error('Failed to load metanorma.data.json')
+          return res.json()
+        })
+        .then(data => processMetanormaData(data))
+        .catch(err => {
+          console.error('Failed to load document data:', err)
+          loadError.value = err instanceof Error ? err.message : 'Failed to load document'
+        })
+    }
+  }
+
+  const title = computed(() => {
+    return documentMeta.value?.title || mirrorDocument.value?.attrs?.title || 'Metanorma Document'
+  })
+  const flavor = computed(() => documentMeta.value?.flavor || '')
+  const docType = computed(() => documentMeta.value?.docType || '')
+  const sections = computed(() => documentMeta.value?.sections || [])
+  const numbering = computed(() => documentMeta.value?.numbering || {})
+
+  function getNumbering(id: string): string {
+    return numbering.value[id] || ''
+  }
+
+  return {
+    documentMeta,
+    mirrorDocument,
+    loadError,
+    loadFromWindow,
+    processMetanormaData,
+    title,
+    flavor,
+    docType,
+    sections,
+    numbering,
+    getNumbering,
+  }
+})

data/frontend/src/stores/ebookStore.ts

@@ -0,0 +1,179 @@
+import { defineStore } from 'pinia'
+import { ref, watch } from 'vue'
+
+export type Theme = 'day' | 'sepia' | 'night' | 'oled'
+export type FontFamily = 'sans' | 'serif'
+export type ContentWidth = 'narrow' | 'default' | 'wide'
+export type LineHeight = 'compact' | 'comfortable' | 'relaxed' | 'spacious'
+export type ReadingMode = 'scroll' | 'paged'
+
+const STORAGE_KEY = 'metanorma_ebook_preferences'
+
+export const CONTENT_WIDTHS: Record<ContentWidth, string> = {
+  narrow: '38rem',
+  default: '58rem',
+  wide: '82rem',
+}
+
+export const LINE_HEIGHTS: Record<LineHeight, string> = {
+  compact: '1.4',
+  comfortable: '1.6',
+  relaxed: '1.8',
+  spacious: '2.0',
+}
+
+const DEFAULTS = {
+  fontSize: 18,
+  fontFamily: 'sans' as FontFamily,
+  contentWidth: 'default' as ContentWidth,
+  theme: 'day' as Theme,
+  lineHeight: 'comfortable' as LineHeight,
+  readingMode: 'scroll' as ReadingMode,
+  showProgress: true,
+}
+
+function loadPreferences(): Partial<typeof DEFAULTS> {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY)
+    if (stored) return JSON.parse(stored)
+  } catch {}
+  return {}
+}
+
+function savePreferences(prefs: Record<string, unknown>) {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs))
+  } catch {}
+}
+
+function applyThemeClass(theme: Theme) {
+  const html = document.documentElement
+  html.classList.remove('theme-day', 'theme-sepia', 'theme-night', 'theme-oled')
+  html.classList.add(`theme-${theme}`)
+  const isDark = theme === 'night' || theme === 'oled'
+  html.classList.toggle('dark', isDark)
+}
+
+const THEME_ORDER: Theme[] = ['day', 'sepia', 'night', 'oled']
+
+export const useEbookStore = defineStore('ebook', () => {
+  const prefs = loadPreferences()
+
+  const fontSize = ref(prefs.fontSize ?? DEFAULTS.fontSize)
+  const fontFamily = ref<FontFamily>(prefs.fontFamily ?? DEFAULTS.fontFamily)
+  const contentWidth = ref<ContentWidth>(prefs.contentWidth ?? DEFAULTS.contentWidth)
+  const theme = ref<Theme>(prefs.theme ?? DEFAULTS.theme)
+  const lineHeight = ref<LineHeight>(prefs.lineHeight ?? DEFAULTS.lineHeight)
+  const showProgress = ref(prefs.showProgress ?? DEFAULTS.showProgress)
+  const readingMode = ref<ReadingMode>(prefs.readingMode ?? DEFAULTS.readingMode)
+
+  const uiVisible = ref(true)
+  const tocOpen = ref(false)
+  const settingsOpen = ref(false)
+  const focusMode = ref(false)
+
+  applyThemeClass(theme.value)
+
+  if (typeof document !== 'undefined') {
+    document.body.classList.toggle('font-serif', fontFamily.value === 'serif')
+    document.body.classList.toggle('font-sans', fontFamily.value === 'sans')
+  }
+
+  watch(
+    [fontSize, fontFamily, contentWidth, theme, lineHeight, showProgress, readingMode],
+    () => {
+      savePreferences({
+        fontSize: fontSize.value,
+        fontFamily: fontFamily.value,
+        contentWidth: contentWidth.value,
+        theme: theme.value,
+        lineHeight: lineHeight.value,
+        showProgress: showProgress.value,
+        readingMode: readingMode.value,
+      })
+    },
+    { immediate: true }
+  )
+
+  watch(() => theme.value, (t) => applyThemeClass(t))
+
+  function setFontSize(size: number) {
+    fontSize.value = Math.max(12, Math.min(32, size))
+  }
+
+  function setFontFamily(f: FontFamily) {
+    fontFamily.value = f
+    document.body.classList.toggle('font-serif', f === 'serif')
+    document.body.classList.toggle('font-sans', f === 'sans')
+  }
+
+  function setContentWidth(w: ContentWidth) {
+    contentWidth.value = w
+  }
+
+  function setTheme(t: Theme) {
+    theme.value = t
+    applyThemeClass(t)
+  }
+
+  function cycleTheme() {
+    const nextIndex = (THEME_ORDER.indexOf(theme.value) + 1) % THEME_ORDER.length
+    setTheme(THEME_ORDER[nextIndex])
+  }
+
+  function setLineHeight(lh: LineHeight) {
+    lineHeight.value = lh
+  }
+
+  function setFocusMode(fm: boolean) {
+    focusMode.value = fm
+  }
+
+  function toggleFocusMode() {
+    focusMode.value = !focusMode.value
+  }
+
+  function toggleToc() {
+    tocOpen.value = !tocOpen.value
+    if (tocOpen.value) settingsOpen.value = false
+  }
+
+  function toggleSettings() {
+    settingsOpen.value = !settingsOpen.value
+    if (settingsOpen.value) tocOpen.value = false
+  }
+
+  function closeAll() {
+    tocOpen.value = false
+    settingsOpen.value = false
+  }
+
+  function applyTheme() {
+    applyThemeClass(theme.value)
+  }
+
+  function getThemeClass(): string {
+    return `theme-${theme.value}`
+  }
+
+  function getCssVariables(): Record<string, string> {
+    return {
+      '--ebook-font-size': `${fontSize.value}px`,
+      '--ebook-max-width': focusMode.value ? '100%' : CONTENT_WIDTHS[contentWidth.value],
+      '--ebook-line-height': LINE_HEIGHTS[lineHeight.value],
+    }
+  }
+
+  return {
+    fontSize, fontFamily, contentWidth, theme,
+    lineHeight, showProgress, readingMode,
+    uiVisible, tocOpen, settingsOpen, focusMode,
+
+    setFontSize, setFontFamily, setContentWidth, setTheme,
+    cycleTheme, setLineHeight, setFocusMode, toggleFocusMode,
+    toggleToc, toggleSettings, closeAll, applyTheme,
+
+    getThemeClass, getCssVariables,
+    CONTENT_WIDTHS, LINE_HEIGHTS,
+  }
+})

data/frontend/src/stores/uiStore.ts

@@ -0,0 +1,32 @@
+import { defineStore } from 'pinia'
+import { ref } from 'vue'
+
+export const useUiStore = defineStore('ui', () => {
+  const sidebarOpen = ref(false)
+  const activeSectionId = ref<string | null>(null)
+
+  function openSidebar() {
+    sidebarOpen.value = true
+  }
+
+  function closeSidebar() {
+    sidebarOpen.value = false
+  }
+
+  function toggleSidebar() {
+    sidebarOpen.value = !sidebarOpen.value
+  }
+
+  function setActiveSection(id: string) {
+    activeSectionId.value = id
+  }
+
+  return {
+    sidebarOpen,
+    activeSectionId,
+    openSidebar,
+    closeSidebar,
+    toggleSidebar,
+    setActiveSection,
+  }
+})

data/frontend/src/styles.css

@@ -0,0 +1,156 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+* { box-sizing: border-box; }
+html { scroll-behavior: smooth; }
+
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
+}
+
+body { font-family: 'Inter', system-ui, sans-serif; -webkit-font-smoothing: antialiased; background-color: var(--ebook-bg, #ffffff); color: var(--ebook-text, #1a1a1a); transition: background-color 0.25s ease, color 0.25s ease; }
+body.font-serif { font-family: 'Merriweather', Georgia, serif; }
+body.font-sans { font-family: 'Inter', system-ui, sans-serif; }
+.font-mono { font-family: ui-monospace, monospace; }
+
+.dark { color-scheme: dark; }
+
+/* ============================================================
+   Theme: Day (default)
+   ============================================================ */
+:root, .theme-day {
+  --chrome-bg: #ffffff;
+  --chrome-bg-glass: rgba(255, 255, 255, 0.85);
+  --chrome-bg-hover: #f1f5f9;
+  --chrome-border: #e2e8f0;
+  --chrome-text: #1a1a1a;
+  --chrome-text-dim: #64748b;
+  --chrome-accent: #0d9488;
+
+  --ebook-bg: #ffffff;
+  --ebook-bg-secondary: #f8fafc;
+  --ebook-text: #1e293b;
+  --ebook-text-heading: #0f172a;
+  --ebook-text-muted: #64748b;
+  --ebook-border: #e2e8f0;
+  --ebook-accent: #0d9488;
+  --ebook-link-color: #0d9488;
+  --ebook-inline-code-bg: #f1f5f9;
+  --ebook-inline-code-text: #1e293b;
+  --ebook-inline-code-border: #e2e8f0;
+}
+
+/* ============================================================
+   Theme: Sepia
+   ============================================================ */
+.theme-sepia {
+  --chrome-bg: #faf8f0;
+  --chrome-bg-glass: rgba(250, 248, 240, 0.85);
+  --chrome-bg-hover: #f0ead6;
+  --chrome-border: #d6cdb6;
+  --chrome-text: #3d3529;
+  --chrome-text-dim: #7a7060;
+  --chrome-accent: #b8860b;
+
+  --ebook-bg: #faf8f0;
+  --ebook-bg-secondary: #f0ead6;
+  --ebook-text: #3d3529;
+  --ebook-text-heading: #2d2519;
+  --ebook-text-muted: #7a7060;
+  --ebook-border: #d6cdb6;
+  --ebook-accent: #b8860b;
+  --ebook-link-color: #b8860b;
+  --ebook-inline-code-bg: #f0ead6;
+  --ebook-inline-code-text: #3d3529;
+  --ebook-inline-code-border: #d6cdb6;
+}
+
+/* ============================================================
+   Theme: Night
+   ============================================================ */
+.theme-night {
+  --chrome-bg: #1a1a2e;
+  --chrome-bg-glass: rgba(26, 26, 46, 0.85);
+  --chrome-bg-hover: #25253e;
+  --chrome-border: #333355;
+  --chrome-text: #e2e8f0;
+  --chrome-text-dim: #94a3b8;
+  --chrome-accent: #5eead4;
+
+  --ebook-bg: #1a1a2e;
+  --ebook-bg-secondary: #25253e;
+  --ebook-text: #cbd5e1;
+  --ebook-text-heading: #e2e8f0;
+  --ebook-text-muted: #94a3b8;
+  --ebook-border: #333355;
+  --ebook-accent: #5eead4;
+  --ebook-link-color: #5eead4;
+  --ebook-inline-code-bg: #25253e;
+  --ebook-inline-code-text: #cbd5e1;
+  --ebook-inline-code-border: #333355;
+}
+
+/* ============================================================
+   Theme: OLED Black
+   ============================================================ */
+.theme-oled {
+  --chrome-bg: #000000;
+  --chrome-bg-glass: rgba(0, 0, 0, 0.85);
+  --chrome-bg-hover: #1a1a1a;
+  --chrome-border: #333333;
+  --chrome-text: #e2e8f0;
+  --chrome-text-dim: #94a3b8;
+  --chrome-accent: #5eead4;
+
+  --ebook-bg: #000000;
+  --ebook-bg-secondary: #1a1a1a;
+  --ebook-text: #cbd5e1;
+  --ebook-text-heading: #e2e8f0;
+  --ebook-text-muted: #94a3b8;
+  --ebook-border: #333333;
+  --ebook-accent: #5eead4;
+  --ebook-link-color: #5eead4;
+  --ebook-inline-code-bg: #1a1a1a;
+  --ebook-inline-code-text: #cbd5e1;
+  --ebook-inline-code-border: #333333;
+}
+
+/* ============================================================
+   Content Typography
+   ============================================================ */
+.mn-content { position: relative; }
+
+.mn-content h1 { font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; color: var(--ebook-text-heading); letter-spacing: -0.01em; padding-bottom: 0.5rem; border-bottom: 1px solid var(--ebook-border); }
+.mn-content h2 { font-size: 1.25rem; font-weight: 600; margin-top: 2.5rem; margin-bottom: 0.75rem; color: var(--ebook-text-heading); letter-spacing: -0.005em; }
+.mn-content h3 { font-size: 1.125rem; font-weight: 600; margin-top: 1.75rem; margin-bottom: 0.5rem; color: var(--ebook-text-heading); }
+.mn-content h4 { font-size: 1rem; font-weight: 600; margin-top: 1.5rem; margin-bottom: 0.4rem; color: var(--ebook-text); }
+.mn-content p { margin-bottom: 1.1rem; line-height: var(--ebook-line-height, 1.6); color: var(--ebook-text); font-size: var(--ebook-font-size, 18px); }
+.mn-content ul, .mn-content ol { margin-bottom: 1rem; }
+.mn-content li { margin-bottom: 0.3rem; line-height: 1.65; }
+.mn-content code { font-family: ui-monospace, monospace; font-size: 0.85em; background: var(--ebook-inline-code-bg); padding: 0.15em 0.45em; border-radius: 4px; }
+.mn-content a { color: var(--ebook-link-color); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ebook-link-color) 40%, transparent); text-underline-offset: 2px; }
+.mn-content a:hover { text-decoration-color: var(--ebook-link-color); }
+.mn-content img { max-width: 100%; height: auto; border-radius: 6px; }
+.mn-content blockquote { border-left: 3px solid var(--ebook-accent); padding: 0.75rem 1.25rem; margin: 1.5rem 0; font-style: italic; color: var(--ebook-text-muted); }
+.mn-content dl { margin: 1rem 0; }
+.mn-content dt { font-weight: 600; color: var(--ebook-text-heading); margin-top: 1rem; }
+.mn-content dd { margin-left: 1.5rem; margin-bottom: 0.5rem; color: var(--ebook-text); line-height: 1.65; }
+
+/* Print */
+@media print {
+  .lg\:translate-x-0, #sidebar, .sticky { display: none !important; }
+}
+
+/* Scrollbar */
+::-webkit-scrollbar { width: 8px; height: 8px; }
+::-webkit-scrollbar-track { background: transparent; }
+::-webkit-scrollbar-thumb { background: var(--chrome-border); border-radius: 4px; }
+::-webkit-scrollbar-thumb:hover { background: var(--chrome-text-dim); }
+
+/* Sidebar layout helpers */
+@media (min-width: 1024px) {
+  .lg\:pl-\[280px\] { padding-left: 280px; }
+  .lg\:translate-x-0 { --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)); }
+}