/* * lime — design.css * Design tokens + area layout for the lime skin. No hex literals here: * every color references a palette token (--ld-*). * * Signature motif: "the lime thread" — a 2px accent edge that always marks * *where you are*: active tree item, active header link, current breadcrumb, * blockquotes, focus. One motif, repeated; everything else stays quiet. */ /* ===================================================================== 1. Design tokens ===================================================================== */ :root { /* Runtime preference multipliers (overridden on ) */ --ld-text-scale: 1; --ld-density-scale: 1; /* Box scale — damped text-scale follower for container widths and control geometry. Text scaling without box scaling produces shorter effective lines and overflows on large screens; full 1:1 scaling overshoots. 0.75 damping: scale 1.5 → boxes ×1.375, scale 2 → ×1.75 (enough to hold fully scaled line-heights inside controls). Never applied to --ld-space-* (density-only per ACCESSIBILITY.md), 1px borders, or radii. */ --ld-box-scale: calc(1 + (var(--ld-text-scale) - 1) * 0.75); /* Layout */ --ld-layout-sidebar-width: calc( 17.5rem * var(--ld-density-scale) * var(--ld-box-scale) ); --ld-layout-sidebar-min-width: calc( 12.5rem * var(--ld-density-scale) * var(--ld-box-scale) ); --ld-layout-sidebar-max-width: calc( 30rem * var(--ld-density-scale) * var(--ld-box-scale) ); /* Overlay may grow further than the inline cookie max (~480px). */ --ld-layout-sidebar-overlay-max-width: min( calc(50rem * var(--ld-density-scale) * var(--ld-box-scale)), 86vw ); /* Floor while the tree loads / is short: default sidebar width, but never more than ~half the viewport on narrow screens. */ --ld-layout-sidebar-overlay-min-width: min( var(--ld-layout-sidebar-width), 48vw ); --ld-layout-sidebar-resize-hit: 0.375rem; --ld-layout-toc-width: calc( 14rem * var(--ld-density-scale) * var(--ld-box-scale) ); --ld-layout-toc-min-width: calc( 10rem * var(--ld-density-scale) * var(--ld-box-scale) ); --ld-layout-toc-max-width: calc( 30rem * var(--ld-density-scale) * var(--ld-box-scale) ); --ld-layout-toc-overlay-max-width: min( calc(28rem * var(--ld-density-scale) * var(--ld-box-scale)), 86vw ); --ld-layout-toc-resize-hit: 0.375rem; --ld-layout-content-padding: calc(1.25rem * var(--ld-density-scale)); --ld-layout-header-height: 3rem; --ld-layout-content-measure: calc(76rem * var(--ld-box-scale)); --ld-doc-content-measure: 72ch; /* Spacing (density-scaled; no 5 or 7) */ --ld-space-1: calc(0.25rem * var(--ld-density-scale)); --ld-space-2: calc(0.5rem * var(--ld-density-scale)); --ld-space-3: calc(0.75rem * var(--ld-density-scale)); --ld-space-4: calc(1rem * var(--ld-density-scale)); --ld-space-6: calc(1.5rem * var(--ld-density-scale)); --ld-space-8: calc(2rem * var(--ld-density-scale)); /* Typography sizes */ --ld-text-size-2xs: 0.6875rem; --ld-text-size-xs: 0.75rem; --ld-text-size-sm: 0.875rem; --ld-text-size-compact: 0.8125rem; --ld-text-size-base: 1rem; --ld-text-size-md: 0.9375rem; --ld-text-size-lg: 1.125rem; --ld-text-size-xl: 1.375rem; --ld-text-size-title-sm: 1.0625rem; --ld-text-size-title-md: 1.25rem; --ld-text-size-dialog: 1.0625rem; --ld-text-size-icon: 1rem; --ld-text-size-icon-lg: 1.25rem; /* Line heights */ --ld-text-line-xs: 1rem; --ld-text-line-sm: 1.3125rem; --ld-text-line-base: 1.5rem; --ld-text-line-lg: 1.625rem; --ld-text-line-xl: 1.875rem; /* Fonts. Pack fonts (fonts/) may provide the primary families; the stacks degrade to system faces without layout shift risk. */ --ld-font-body: 'Instrument Sans', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --ld-font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --ld-font-weight-bold: 600; --ld-font-variant-tabular: tabular-nums; /* Sizing */ --ld-size-full: 100%; --ld-size-screen: 100dvh; --ld-size-max-md: calc(28rem * var(--ld-box-scale)); --ld-size-max-lg: calc(36rem * var(--ld-box-scale)); /* Display / flex value tokens */ --ld-display-flex: flex; --ld-display-inline-flex: inline-flex; --ld-flex-direction-column: column; --ld-flex-wrap-wrap: wrap; --ld-align-items-center: center; --ld-justify-content-center: center; --ld-justify-content-end: flex-end; --ld-margin-inline-auto: auto; /* Borders */ --ld-border-width: 1px; --ld-border-width-2: 2px; /* Motion */ --ld-transition-duration: 160ms; --ld-animation-duration: 200ms; --ld-transition-easing: cubic-bezier(0.2, 0, 0, 1); --ld-transition-colors-property: background-color, border-color, color, fill, stroke; /* Focus — the lime thread as a ring. Color set per theme in palette. */ --ld-focus-ring: 0 0 0 2px var(--ld-bg-surface), 0 0 0 4px var(--ld-focus-ring-color); /* Radii */ --ld-radius-sm: 4px; --ld-radius-md: 6px; --ld-radius-lg: 10px; /* Button geometry (min 44px touch targets at lg; md ≥ 36px + padding) */ --ld-btn-h-sm: calc(1.75rem * var(--ld-box-scale)); --ld-btn-h-md: calc(2.25rem * var(--ld-box-scale)); --ld-btn-h-lg: calc(2.75rem * var(--ld-box-scale)); --ld-btn-px-sm: calc(0.625rem * var(--ld-box-scale)); --ld-btn-px-md: calc(0.875rem * var(--ld-box-scale)); --ld-btn-px-lg: calc(1.125rem * var(--ld-box-scale)); --ld-btn-fs-sm: var(--ld-text-size-xs); --ld-btn-fs-md: var(--ld-text-size-sm); --ld-btn-fs-lg: var(--ld-text-size-base); --ld-btn-icon-sm: calc(0.875rem * var(--ld-text-scale)); --ld-btn-icon-md: calc(1rem * var(--ld-text-scale)); --ld-btn-icon-lg: calc(1.25rem * var(--ld-text-scale)); --ld-btn-gap-sm: 0.375rem; --ld-btn-gap-md: 0.5rem; --ld-btn-gap-lg: 0.625rem; --ld-btn-radius: var(--ld-radius-md); --ld-btn-py-md: calc(0.4375rem * var(--ld-box-scale)); /* Input geometry */ --ld-in-h-sm: calc(1.75rem * var(--ld-box-scale)); --ld-in-h-md: calc(2.25rem * var(--ld-box-scale)); --ld-in-h-lg: calc(2.75rem * var(--ld-box-scale)); --ld-in-fs-sm: var(--ld-text-size-xs); --ld-in-fs-md: var(--ld-text-size-sm); --ld-in-fs-lg: var(--ld-text-size-base); --ld-in-px-sm: 0.5rem; --ld-in-px-md: 0.75rem; --ld-in-px-lg: 0.875rem; --ld-in-py-sm: 0.25rem; --ld-in-py-md: 0.375rem; --ld-in-py-lg: 0.5rem; --ld-in-icon-sm: calc(0.875rem * var(--ld-text-scale)); --ld-in-icon-md: calc(1rem * var(--ld-text-scale)); --ld-in-icon-lg: calc(1.125rem * var(--ld-text-scale)); --ld-in-radius: var(--ld-radius-md); /* Selection controls */ --ld-ctrl-size-sm: calc(1rem * var(--ld-box-scale)); --ld-ctrl-size-md: calc(1.25rem * var(--ld-box-scale)); --ld-ctrl-gap-sm: 0.5rem; --ld-ctrl-gap-md: 0.625rem; --ld-sw-track-w-sm: calc(2rem * var(--ld-box-scale)); --ld-sw-track-w-md: calc(2.5rem * var(--ld-box-scale)); --ld-sw-track-h-sm: calc(1.125rem * var(--ld-box-scale)); --ld-sw-track-h-md: calc(1.375rem * var(--ld-box-scale)); --ld-sw-thumb-sm: calc(0.875rem * var(--ld-box-scale)); --ld-sw-thumb-md: calc(1.125rem * var(--ld-box-scale)); --ld-sw-travel-sm: calc(0.875rem * var(--ld-box-scale)); --ld-sw-travel-md: calc(1.125rem * var(--ld-box-scale)); --ld-sw-inset-sm: 0.125rem; --ld-sw-inset-md: 0.125rem; /* Feedback */ --ld-spinner-size-sm: 1rem; --ld-spinner-size-md: 1.5rem; --ld-spinner-size-lg: 2.25rem; --ld-progress-h-sm: 0.25rem; --ld-progress-h-md: 0.5rem; --ld-progress-h-lg: 0.75rem; /* Popup / listbox */ /* Above --ld-overlay-z so portaled combobox/menus work inside modals; below toast portal (1100). */ --ld-popup-z: calc(var(--ld-overlay-z) + 50); --ld-popup-radius: var(--ld-radius-lg); --ld-popup-shadow: 0 1px 2px color-mix(in srgb, var(--ld-neutral-12) 10%, transparent), 0 12px 32px color-mix(in srgb, var(--ld-neutral-12) 16%, transparent); --ld-popup-max-h: min(80vh, calc(20rem * var(--ld-box-scale))); --ld-lb-px: 0.375rem; --ld-lb-py: 0.375rem; --ld-lb-gap: 0.125rem; --ld-lb-item-px: 0.625rem; --ld-lb-item-h-sm: calc(1.875rem * var(--ld-box-scale)); --ld-lb-item-h-md: calc(2.25rem * var(--ld-box-scale)); /* Slider */ --ld-slider-track-h: 0.25rem; --ld-slider-thumb-size-sm: calc(0.875rem * var(--ld-box-scale)); --ld-slider-thumb-size-md: calc(1.125rem * var(--ld-box-scale)); --ld-slider-thumb-size-lg: calc(1.375rem * var(--ld-box-scale)); /* Disclosure */ --ld-disc-trigger-py: 0.5rem; --ld-disc-trigger-px: 0.75rem; --ld-disc-indicator-size: calc(1rem * var(--ld-text-scale)); /* Overlay / drawer */ --ld-overlay-z: 1000; --ld-overlay-backdrop: var(--ld-modal-backdrop); --ld-drawer-min-w: calc(18rem * var(--ld-box-scale)); --ld-drawer-max-w: min(calc(26rem * var(--ld-box-scale)), 92vw); --ld-drawer-editor-min-w: min(calc(24rem * var(--ld-box-scale)), 92vw); --ld-drawer-editor-max-w: min(48rem, 92vw); /* Editor */ --ld-editor-font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); --ld-editor-collab-1: #e5484d; --ld-editor-collab-1-light: color-mix(in srgb, #e5484d 28%, transparent); --ld-editor-collab-2: #f76b15; --ld-editor-collab-2-light: color-mix(in srgb, #f76b15 28%, transparent); --ld-editor-collab-3: #ffc53d; --ld-editor-collab-3-light: color-mix(in srgb, #ffc53d 28%, transparent); --ld-editor-collab-4: #30a46c; --ld-editor-collab-4-light: color-mix(in srgb, #30a46c 28%, transparent); --ld-editor-collab-5: #00a2c7; --ld-editor-collab-5-light: color-mix(in srgb, #00a2c7 28%, transparent); --ld-editor-collab-6: #3e63dd; --ld-editor-collab-6-light: color-mix(in srgb, #3e63dd 28%, transparent); --ld-editor-collab-7: #8e4ec6; --ld-editor-collab-7-light: color-mix(in srgb, #8e4ec6 28%, transparent); --ld-editor-collab-8: #d6409f; --ld-editor-collab-8-light: color-mix(in srgb, #d6409f 28%, transparent); /* Primitive scale / surface indirection */ --ld-primitive-scale: 1; --ld-surface: var(--ld-bg-surface); /* Modal sizes */ --ld-modal-size-xs: min(calc(20rem * var(--ld-box-scale)), 94vw); --ld-modal-size-sm: min(calc(26rem * var(--ld-box-scale)), 94vw); --ld-modal-size-md: min(calc(34rem * var(--ld-box-scale)), 94vw); --ld-modal-size-lg: min(calc(44rem * var(--ld-box-scale)), 94vw); --ld-modal-size-xl: min(calc(58rem * var(--ld-box-scale)), 94vw); } /* Density steps */ html[data-density='compact'] { --ld-density-scale: 0.85; } html[data-density='wide'] { --ld-density-scale: 1.15; } /* Thin scrollbars — theme-aware via palette tokens */ * { scrollbar-width: thin; scrollbar-color: var(--ld-scrollbar-thumb) var(--ld-scrollbar-track); } *::-webkit-scrollbar { width: 8px; height: 8px; } *::-webkit-scrollbar-track { background: var(--ld-scrollbar-track); } *::-webkit-scrollbar-thumb { background: var(--ld-scrollbar-thumb); border-radius: var(--ld-radius-md); border: 2px solid var(--ld-scrollbar-track); } *::-webkit-scrollbar-thumb:hover { background: var(--ld-scrollbar-thumb-hover); } /* ===================================================================== 2. Base surface ===================================================================== */ html { background: var(--ld-bg-surface); color: var(--ld-fg-primary); font-family: var(--ld-font-body); height: 100%; } body { height: 100%; margin: 0; font-size: calc(var(--ld-text-size-base) * var(--ld-text-scale)); line-height: calc(var(--ld-text-line-base) * var(--ld-text-scale)); overflow: hidden; } a { color: var(--ld-fg-link); text-decoration-color: color-mix(in srgb, var(--ld-fg-link) 40%, transparent); text-underline-offset: 0.15em; } a:hover { text-decoration-color: var(--ld-fg-link); } :focus-visible { outline: none; box-shadow: var(--ld-focus-ring); border-radius: var(--ld-radius-sm); } ::selection { background: var(--ld-editor-selection); } /* ===================================================================== 3. App shell ----------------------------------------------------------------------- .app-shell grid: header row + (rail | main) [data-rail='open' | 'closed'] persisted rail preference (JS) [data-rail-mode='inline' | 'overlay'] effective mode (JS: temporal → overlay) Inline multi-column grids are media-scoped (≥55rem tree, ≥75rem TOC). ===================================================================== */ .app-shell { display: grid; grid-template-rows: calc(var(--ld-layout-header-height) * var(--ld-text-scale)) minmax(0, 1fr); grid-template-columns: minmax(0, 1fr); height: 100dvh; } /* ---- Header ---------------------------------------------------------- */ .app-header { position: sticky; top: 0; z-index: 500; display: flex; align-items: center; gap: var(--ld-space-3); height: calc(var(--ld-layout-header-height) * var(--ld-text-scale)); padding-inline: var(--ld-space-2) var(--ld-space-3); background: color-mix(in srgb, var(--ld-bg-surface) 88%, transparent); backdrop-filter: blur(8px); border-bottom: var(--ld-border-width) solid var(--ld-border-subtle); } .app-header__brand { display: inline-flex; align-items: center; gap: var(--ld-space-2); font-weight: var(--ld-font-weight-bold); font-size: calc(var(--ld-text-size-md) * var(--ld-text-scale)); color: var(--ld-fg-primary); text-decoration: none; letter-spacing: -0.01em; white-space: nowrap; } .app-header__logo { display: block; height: calc(1.75rem * var(--ld-text-scale)); width: auto; max-width: min(12rem, 40vw); object-fit: contain; } html[data-theme='light'] .app-header__logo--dark, html[data-theme='dark'] .app-header__logo--light { display: none; } /* Fallback header mark when brand logos are absent; kept for custom skins. */ .app-header__mark { width: calc(1.125rem * var(--ld-text-scale)); height: calc(1.125rem * var(--ld-text-scale)); border-radius: var(--ld-radius-sm); background: linear-gradient( 135deg, var(--ld-accent-8), var(--ld-accent-9) ); clip-path: polygon(0 0, 100% 0, 100% 100%, 30% 100%, 0 70%); } .app-header__context { display: flex; align-items: center; gap: var(--ld-space-1); min-width: 0; flex: 1 1 auto; overflow: hidden; font-size: calc(var(--ld-text-size-compact) * var(--ld-text-scale)); color: var(--ld-fg-muted); white-space: nowrap; } .app-header__context .ld-primitive-breadcrumb__list { flex-wrap: nowrap; overflow: hidden; } .app-header__actions { display: flex; align-items: center; gap: var(--ld-space-1); flex: 0 0 auto; } /* Icon-sized header buttons — 44px hit area via padding box */ .app-header__icon-btn { display: inline-flex; align-items: center; justify-content: center; width: calc(2.25rem * var(--ld-text-scale)); height: calc(2.25rem * var(--ld-text-scale)); border: none; border-radius: var(--ld-radius-md); background: transparent; color: var(--ld-fg-muted); font-size: var(--ld-btn-icon-md); } .app-header__icon-btn svg { width: 1em; height: 1em; } .app-header__icon-btn:hover { background: var(--ld-bg-muted); color: var(--ld-fg-primary); } /* Avatar menu trigger: circle-only (no rectangle) */ .app-header__avatar-btn { display: inline-flex; align-items: center; justify-content: center; width: calc(2.25rem * var(--ld-text-scale)); height: calc(2.25rem * var(--ld-text-scale)); border: none; border-radius: 9999px; background: transparent; padding: 0; color: var(--ld-fg-muted); overflow: hidden; } .app-header__avatar-btn:hover { background: var(--ld-bg-muted); color: var(--ld-fg-primary); } .app-header__avatar-btn:focus-visible { outline: var(--ld-border-width-2) solid var(--ld-accent-8); outline-offset: 2px; } /* Active global nav link carries the lime thread */ .app-header__nav-link { position: relative; display: inline-flex; align-items: center; height: var(--ld-layout-header-height); padding-inline: var(--ld-space-2); color: var(--ld-fg-muted); text-decoration: none; font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); } .app-header__nav-link:hover { color: var(--ld-fg-primary); } .app-header__nav-link[aria-current='page'] { color: var(--ld-fg-primary); box-shadow: inset 0 calc(-1 * var(--ld-border-width-2)) 0 var(--ld-accent-9); } /* ---- Rail (document tree) --------------------------------------------- */ .app-shell__body { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; } /* Tree open inline, TOC not taking a column (≥55rem) */ @media (min-width: 55rem) { .app-shell[data-rail='open'][data-rail-mode='inline']:not([data-toc-rail='open'][data-toc-rail-mode='inline']) .app-shell__body { grid-template-columns: min( var(--ld-layout-sidebar-user-width, var(--ld-layout-sidebar-width)), 40vw ) var(--ld-layout-sidebar-resize-hit) minmax(0, 1fr); } } /* TOC open inline / both rails (≥75rem — only width both can be inline) */ @media (min-width: 75rem) { .app-shell[data-toc-rail='open'][data-toc-rail-mode='inline']:not([data-rail='open'][data-rail-mode='inline']) .app-shell__body { grid-template-columns: minmax(0, 1fr) var(--ld-layout-toc-resize-hit) min( var(--ld-layout-toc-user-width, var(--ld-layout-toc-width)), 40vw ); } .app-shell[data-rail='open'][data-rail-mode='inline'][data-toc-rail='open'][data-toc-rail-mode='inline'] .app-shell__body { grid-template-columns: min( var(--ld-layout-sidebar-user-width, var(--ld-layout-sidebar-width)), 40vw ) var(--ld-layout-sidebar-resize-hit) minmax(0, 1fr) var(--ld-layout-toc-resize-hit) min( var(--ld-layout-toc-user-width, var(--ld-layout-toc-width)), 40vw ); } } .app-rail { min-height: 0; min-width: 0; overflow: hidden; overscroll-behavior: contain; padding: var(--ld-space-3) var(--ld-space-2); background: var(--ld-bg-subtle); border-inline-end: var(--ld-border-width) solid var(--ld-border-subtle); display: none; flex-direction: column; } .app-rail--inline, .app-rail--overlay { display: none; } @media (min-width: 55rem) { .app-shell[data-rail-mode='inline'][data-rail='open'] .app-rail--inline { display: flex; grid-column: 1; } } .app-shell[data-rail-overlay='open'] .app-rail--overlay { display: flex; flex-direction: column; position: fixed; inset-block: calc(var(--ld-layout-header-height) * var(--ld-text-scale)) 0; inset-inline-start: 0; z-index: calc(var(--ld-overlay-z) - 100); /* Grow with tree content; max is owned by .app-rail__tree. */ width: max-content; min-width: var(--ld-layout-sidebar-min-width); box-shadow: var(--ld-popup-shadow); } @media (min-width: 55rem) { .app-shell[data-rail-mode='inline'][data-rail-overlay='open'] .app-rail--overlay { display: none; } } .app-rail__resize { display: none; grid-column: 2; cursor: col-resize; touch-action: none; user-select: none; background: transparent; position: relative; z-index: 1; } @media (min-width: 55rem) { .app-shell[data-rail='open'][data-rail-mode='inline'] .app-rail__resize { display: block; } } .app-rail__resize::after { content: ''; position: absolute; inset-block: 0; inset-inline: 0; background: transparent; } html[data-rail-resizing], html[data-toc-rail-resizing] { cursor: col-resize; user-select: none; } html[data-rail-resizing] *, html[data-toc-rail-resizing] * { cursor: col-resize !important; } .app-rail__section-label { padding: var(--ld-space-1) var(--ld-space-2); font-size: calc(var(--ld-text-size-2xs) * var(--ld-text-scale)); font-weight: var(--ld-font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ld-fg-subtle); } .app-rail__inner { display: flex; flex-direction: column; gap: var(--ld-space-3); flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; } .app-rail--overlay .app-rail__inner { display: flex; flex-direction: column; gap: var(--ld-space-3); flex: 1 1 auto; height: 100%; min-height: 0; min-width: 0; } .app-rail__header, .app-rail__footer { flex-shrink: 0; min-width: 0; max-width: 100%; } .app-rail--overlay .app-rail__header, .app-rail--overlay .app-rail__footer { /* Tree owns overlay width; chrome wraps instead of stretching it. */ width: 0; min-width: 100%; } .app-rail__header-row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--ld-space-2); min-width: 0; } .app-rail__header-row .app-rail__title { flex: 1 1 auto; min-width: 0; } .app-rail__create { flex: 0 0 auto; } .app-rail__tree { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; } .app-rail--overlay .app-rail__tree { /* Floor for loading/short trees; grow up to overlay max via content. */ min-width: var(--ld-layout-sidebar-overlay-min-width); min-height: 0; overflow: auto; /* Absorbs spurious overflow (scrollbar gutter / subpixel). */ padding-inline-end: var(--ld-space-4); /* Cap content width; overflow-x only after this. */ max-width: var(--ld-layout-sidebar-overlay-max-width); } .app-rail--overlay .app-rail__tree .doc-tree { width: max-content; min-width: 100%; } .app-rail__title { margin: 0; font-size: calc(var(--ld-text-size-title-sm) * var(--ld-text-scale)); font-weight: var(--ld-font-weight-bold); color: var(--ld-fg-primary); } .app-rail__locale-picker { margin-bottom: var(--ld-space-1); } .app-rail__tools { margin-bottom: var(--ld-space-1); } .app-rail__footer { display: flex; flex-direction: column; gap: var(--ld-space-1); } .app-rail__extras { display: flex; flex-direction: column; } .app-rail__legal { /* Also shipped in assets/gdpr.css (Vite) so production skins volumes cannot drop muted + xs legal-rail chrome. */ display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: var(--ld-space-1) var(--ld-space-3); padding-inline: var(--ld-space-2); min-width: 0; font-size: calc(var(--ld-text-size-xs) * var(--ld-text-scale)); } .app-rail__legal a, .app-rail__legal a:visited { color: var(--ld-fg-muted); text-decoration: none; } .app-rail__legal a:hover, .app-rail__legal a:focus-visible { color: var(--ld-fg-primary); text-decoration: underline; } .app-rail__separator { border: none; border-top: var(--ld-border-width) solid var(--ld-border-subtle); margin: 0; width: 100%; } /* Tree rows: quiet at rest, thread when active. Nesting guide rails on .doc-tree__branch mark the parent’s child group. Matches DocTree markup:
  • around the row, links/toggles inside. Generic .app-rail__item covers non-tree rail entries (dashboard, files, …). */ .doc-tree { font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); /* Fixed toggle column so nested rails sit under the chevron and file names align with directory names (not the toggle glyph). */ --ld-tree-toggle-col: calc(1.25rem * var(--ld-text-scale)); } .doc-tree__row { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; } .doc-tree ul { list-style: none; margin: 0; padding-inline-start: var(--ld-space-4); } .doc-tree > ul { padding-inline-start: 0; } /* Continuous nesting rail under each open directory (WCAG 1.4.11 via --ld-tree-guide). Root list has no rail. Active lime thread stays on the row and wins visually over the muted guide. Rail centers on the toggle. */ .doc-tree ul.doc-tree__branch { border-inline-start: var(--ld-border-width) solid var(--ld-tree-guide); margin-inline-start: calc( (var(--ld-tree-toggle-col) - var(--ld-border-width)) / 2 ); padding-inline-start: calc( var(--ld-tree-toggle-col) / 2 + var(--ld-space-2) ); } /* File rows: reserve the same column as the dir chevron so labels share one vertical rhythm under a parent. */ .doc-tree li:not(.doc-tree__item--dir) > .doc-tree__row { padding-inline-start: var(--ld-tree-toggle-col); } .doc-tree__row > a, .doc-tree__dir, .app-rail__item { display: flex; align-items: center; gap: var(--ld-space-2); min-height: 2rem; padding-inline: var(--ld-space-2); border-radius: var(--ld-radius-md); border-inline-start: var(--ld-border-width-2) solid transparent; color: var(--ld-fg-primary); text-decoration: none; white-space: nowrap; } /* Documents read quieter than directories so the parent unit stands out. */ .doc-tree__row > a:not(.doc-tree__dir) { color: var(--ld-fg-muted); } .doc-tree__dir { font-weight: var(--ld-font-weight-bold); color: var(--ld-fg-primary); } .doc-tree__row > a:hover, .doc-tree__dir:hover, .app-rail__item:hover { background: var(--ld-bg-muted); } .doc-tree__item--active > .doc-tree__row > a, .doc-tree__item--active > .doc-tree__row > .doc-tree__dir, .app-rail__item[aria-current='page'] { background: var(--ld-bg-muted); border-inline-start-color: var(--ld-accent-9); border-start-start-radius: 0; border-end-start-radius: 0; font-weight: var(--ld-font-weight-bold); color: var(--ld-fg-primary); } .doc-tree__dir-toggle, .doc-tree__dir-toggle.ld-primitive-btn { flex: 0 0 var(--ld-tree-toggle-col); box-sizing: border-box; width: var(--ld-tree-toggle-col); min-width: var(--ld-tree-toggle-col); height: auto; min-height: 2rem; padding: 0; justify-content: center; background: none; border: none; color: var(--ld-fg-subtle); border-radius: var(--ld-radius-sm); } .doc-tree__public-badge { font-size: calc(var(--ld-text-size-2xs) * var(--ld-text-scale)); color: var(--ld-fg-subtle); } .doc-tree__up { display: inline-flex; align-items: center; gap: 0.35rem; margin-bottom: 0.5rem; font-size: calc(var(--ld-text-size-md) * var(--ld-text-scale)); color: var(--ld-color-info); } .doc-tree__up svg { display: block; flex-shrink: 0; width: 1em; height: 1em; } /* ---- Main ------------------------------------------------------------- */ .app-shell__main { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; grid-column: 1 / -1; } /* Tree only: main is last of 3 (≥55rem) */ @media (min-width: 55rem) { .app-shell[data-rail='open'][data-rail-mode='inline']:not([data-toc-rail='open'][data-toc-rail-mode='inline']) .app-shell__main { grid-column: 3; } } /* TOC only / both: main placement (≥75rem) */ @media (min-width: 75rem) { .app-shell[data-toc-rail='open'][data-toc-rail-mode='inline']:not([data-rail='open'][data-rail-mode='inline']) .app-shell__main { grid-column: 1; } .app-shell[data-rail='open'][data-rail-mode='inline'][data-toc-rail='open'][data-toc-rail-mode='inline'] .app-shell__main { grid-column: 3; } } .app-shell__content { flex: 1 1 auto; min-height: 0; min-width: 0; overflow-x: hidden; overflow-y: auto; } .app-shell__scroll-body { min-height: 100%; min-width: 0; display: flex; flex-direction: column; } .app-shell__page { flex: 1 1 auto; min-width: 0; } .app-shell__content:has(main.editor-page) { overflow: hidden; display: flex; flex-direction: column; } .app-shell__content:has(main.editor-page) .app-shell__scroll-body { min-height: 0; flex: 1 1 auto; display: flex; flex-direction: column; } .app-shell__content:has(main.editor-page) .app-shell__page { min-height: 0; display: flex; flex-direction: column; } /* Generic page container for non-document routes */ .ld-page { width: 100%; max-width: var(--ld-layout-content-measure); margin-inline: auto; padding: var(--ld-space-4) var(--ld-layout-content-padding) var(--ld-space-8); } .ld-page--narrow { max-width: var(--ld-size-max-lg); } .ld-page--full { max-width: none; margin-inline: 0; width: 100%; } /* ---- TOC rail --------------------------------------------------------- */ .app-toc-rail { min-height: 0; min-width: 0; overflow: hidden; overscroll-behavior: contain; padding: var(--ld-space-3) var(--ld-space-2); background: var(--ld-bg-subtle); border-inline-start: var(--ld-border-width) solid var(--ld-border-subtle); display: none; flex-direction: column; } .app-toc-rail--inline, .app-toc-rail--overlay { display: none; } @media (min-width: 75rem) { .app-shell[data-toc-rail-mode='inline'][data-toc-rail='open'] .app-toc-rail--inline { display: flex; } .app-shell[data-toc-rail='open'][data-toc-rail-mode='inline']:not([data-rail='open'][data-rail-mode='inline']) .app-toc-rail--inline { grid-column: 3; } .app-shell[data-rail='open'][data-rail-mode='inline'][data-toc-rail='open'][data-toc-rail-mode='inline'] .app-toc-rail--inline { grid-column: 5; } } .app-shell[data-toc-rail-overlay='open'] .app-toc-rail--overlay { display: flex; flex-direction: column; position: fixed; inset-block: calc(var(--ld-layout-header-height) * var(--ld-text-scale)) 0; inset-inline-end: 0; z-index: calc(var(--ld-overlay-z) - 100); width: min( var(--ld-layout-toc-user-width, var(--ld-layout-toc-width)), var(--ld-layout-toc-overlay-max-width) ); min-width: var(--ld-layout-toc-min-width); box-shadow: var(--ld-popup-shadow); } @media (min-width: 75rem) { .app-shell[data-toc-rail-mode='inline'][data-toc-rail-overlay='open'] .app-toc-rail--overlay { display: none; } } .app-toc-rail__resize { display: none; cursor: col-resize; touch-action: none; user-select: none; background: transparent; position: relative; z-index: 1; } @media (min-width: 75rem) { .app-shell[data-toc-rail='open'][data-toc-rail-mode='inline'] .app-toc-rail__resize { display: block; } .app-shell[data-toc-rail='open'][data-toc-rail-mode='inline']:not([data-rail='open'][data-rail-mode='inline']) .app-toc-rail__resize { grid-column: 2; } .app-shell[data-rail='open'][data-rail-mode='inline'][data-toc-rail='open'][data-toc-rail-mode='inline'] .app-toc-rail__resize { grid-column: 4; } } .app-toc-rail__resize::after { content: ''; position: absolute; inset-block: 0; inset-inline: 0; background: transparent; } .app-toc-rail__inner { display: flex; flex-direction: column; gap: var(--ld-space-3); flex: 1 1 auto; min-height: 0; min-width: 0; max-width: 100%; } .app-toc-rail__header { display: flex; align-items: center; justify-content: space-between; gap: var(--ld-space-2); flex-shrink: 0; min-width: 0; } .app-toc-rail__title { margin: 0; font-size: calc(var(--ld-text-size-title-sm) * var(--ld-text-scale)); font-weight: var(--ld-font-weight-bold); color: var(--ld-fg-primary); } .app-toc-rail__collapse { flex-shrink: 0; } .app-toc-rail__nav { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; } .app-toc-rail__list { list-style: none; margin: 0; padding: 0; } .app-toc-rail__item { margin: 0; } .app-toc-rail__link { display: block; padding: var(--ld-space-1) var(--ld-space-2); border-radius: var(--ld-radius-md); border-inline-start: var(--ld-border-width-2) solid transparent; color: var(--ld-fg-muted); text-decoration: none; font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); line-height: calc(var(--ld-text-line-sm, 1.35) * var(--ld-text-scale)); overflow-wrap: anywhere; } .app-toc-rail__link:hover { background: var(--ld-bg-muted); color: var(--ld-fg-primary); } .app-toc-rail__link--active, .app-toc-rail__link[aria-current='location'] { background: var(--ld-bg-muted); border-inline-start-color: var(--ld-accent-9); border-start-start-radius: 0; border-end-start-radius: 0; color: var(--ld-fg-primary); font-weight: var(--ld-font-weight-bold); } .app-toc-rail__item--level-1 > .app-toc-rail__link { padding-inline-start: var(--ld-space-2); } .app-toc-rail__item--level-2 > .app-toc-rail__link { padding-inline-start: calc(var(--ld-space-2) + 0.5rem); } .app-toc-rail__item--level-3 > .app-toc-rail__link { padding-inline-start: calc(var(--ld-space-2) + 1rem); } .app-toc-rail__item--level-4 > .app-toc-rail__link { padding-inline-start: calc(var(--ld-space-2) + 1.5rem); } .app-toc-rail__item--level-5 > .app-toc-rail__link, .app-toc-rail__item--level-6 > .app-toc-rail__link { padding-inline-start: calc(var(--ld-space-2) + 2rem); } .app-toc-rail__backdrop { display: none; } .app-shell[data-toc-rail-overlay='open'] .app-toc-rail__backdrop { display: block; position: fixed; inset-block: calc(var(--ld-layout-header-height) * var(--ld-text-scale)) 0; inset-inline: 0; z-index: calc(var(--ld-overlay-z) - 101); background: var(--ld-overlay-backdrop); border: none; } @media (min-width: 75rem) { .app-shell[data-toc-rail-mode='inline'][data-toc-rail-overlay='open'] .app-toc-rail__backdrop { display: none; } } /* ---- Overlay rail (narrow viewports + editor overlay mode) ------------ */ /* Safety net: reclaim space if attrs still claim open-inline below 55rem. Use not(min-width) so this does not overlap the ≥55rem open-inline rules. */ @media not all and (min-width: 55rem) { .app-shell[data-rail='open'][data-rail-mode='inline'] .app-shell__body, .app-shell[data-toc-rail='open'][data-toc-rail-mode='inline'] .app-shell__body, .app-shell__body { grid-template-columns: minmax(0, 1fr); } .app-shell[data-rail='open'][data-rail-mode='inline'] .app-shell__main, .app-shell[data-toc-rail='open'][data-toc-rail-mode='inline'] .app-shell__main, .app-shell__main { grid-column: 1 / -1; } } .app-shell[data-rail-mode='overlay'] .app-shell__body { grid-template-columns: minmax(0, 1fr); } .app-shell[data-rail-mode='overlay']:not([data-toc-rail='open'][data-toc-rail-mode='inline']) .app-shell__main { grid-column: 1 / -1; overflow: hidden; } .app-shell[data-rail-mode='overlay'][data-toc-rail='open'][data-toc-rail-mode='inline'] .app-shell__body { grid-template-columns: minmax(0, 1fr) var(--ld-layout-toc-resize-hit) min( var(--ld-layout-toc-user-width, var(--ld-layout-toc-width)), 40vw ); } .app-shell[data-rail-mode='overlay'][data-toc-rail='open'][data-toc-rail-mode='inline'] .app-shell__main { grid-column: 1; overflow: hidden; } .app-rail__backdrop { display: none; } .app-shell[data-rail-overlay='open'] .app-rail__backdrop { display: block; position: fixed; inset-block: calc(var(--ld-layout-header-height) * var(--ld-text-scale)) 0; inset-inline: 0; z-index: calc(var(--ld-overlay-z) - 101); background: var(--ld-overlay-backdrop); border: none; } @media (min-width: 55rem) { .app-shell[data-rail-mode='inline'][data-rail-overlay='open'] .app-rail__backdrop { display: none; } } /* ===================================================================== 4. Browse shell (content column; rail is global) ===================================================================== */ /* Dashboard panels */ .dashboard-widget, .dashboard-panel { display: flex; flex-direction: column; gap: var(--ld-space-1); background: var(--ld-bg-surface); border: var(--ld-border-width) solid var(--ld-border-subtle); border-radius: var(--ld-radius-lg); padding: var(--ld-space-4); } .dashboard-widget h2, .dashboard-panel h2 { margin-top: 0; } /* Display settings popover */ .display-settings-panel { padding: var(--ld-space-3); min-width: min(20rem, calc(100vw - 2rem)); } .appearance-controls--stacked .theme-toggle, .appearance-controls--stacked .text-scale-toggle, .appearance-controls--stacked .layout-density-toggle, .appearance-controls__locale { display: flex; flex-direction: column; align-items: flex-start; } .appearance-controls--stacked .theme-toggle__label, .appearance-controls--stacked .text-scale-toggle__label, .appearance-controls--stacked .layout-density-toggle__label, .appearance-controls__locale-label { font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); color: var(--ld-fg-muted); } .appearance-controls--stacked .text-scale-toggle__segments { flex-wrap: wrap; } .display-settings-panel__footer { font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); } .browse-shell { min-width: 0; padding: var(--ld-space-3) var(--ld-layout-content-padding) var(--ld-space-8); } .browse-shell__toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ld-space-1) var(--ld-space-3); padding-block: var(--ld-space-2); margin-bottom: var(--ld-space-3); font-size: calc(var(--ld-text-size-compact) * var(--ld-text-scale)); color: var(--ld-fg-muted); border-bottom: var(--ld-border-width) solid var(--ld-border-subtle); } .browse-shell__toolbar-start { display: inline-flex; align-items: center; gap: var(--ld-space-3); min-width: 0; } .browse-shell__toolbar-end { display: inline-flex; align-items: center; gap: var(--ld-space-3); margin-inline-start: auto; } .browse-fallback { max-width: var(--ld-size-max-lg); padding-block: var(--ld-space-8); color: var(--ld-fg-muted); } .browse-fallback h2 { color: var(--ld-fg-primary); font-size: calc(var(--ld-text-size-title-md) * var(--ld-text-scale)); margin-bottom: var(--ld-space-2); } .doc-viewer .browse-empty__actions { display: flex; flex-wrap: wrap; gap: var(--ld-space-3); margin-top: var(--ld-space-4); } /* ===================================================================== 5. Composed patterns ===================================================================== */ .ld-panel { display: flex; flex-direction: column; gap: var(--ld-space-1); background: var(--ld-bg-surface); border: var(--ld-border-width) solid var(--ld-border-subtle); border-radius: var(--ld-radius-lg); padding: var(--ld-space-4); } .ld-data-table { width: 100%; border-collapse: collapse; font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); } .ld-data-table th { text-align: start; font-size: calc(var(--ld-text-size-xs) * var(--ld-text-scale)); font-weight: var(--ld-font-weight-bold); letter-spacing: 0.04em; text-transform: uppercase; color: var(--ld-fg-subtle); padding: var(--ld-space-2); border-bottom: var(--ld-border-width) solid var(--ld-border-strong); } .ld-data-table td { padding: var(--ld-space-2); border-bottom: var(--ld-border-width) solid var(--ld-border-subtle); } .ld-data-table tbody tr:hover { background: var(--ld-bg-subtle); } /* ===================================================================== 6. Editor page sizing (viewport-filling shell) ===================================================================== */ main.editor-page { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding-inline: var(--ld-layout-content-padding); } main.editor-page > .editor-layout { flex: 1 1 auto; min-height: 0; } main.editor-page > .editor-page__preface { flex: 0 0 auto; } /* ===================================================================== 7. Utility layout helpers ===================================================================== */ .ld-text-break-all { overflow-wrap: anywhere; word-break: break-all; } .ld-table-scroll { overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; } .dashboard-panel, .ld-page dl dd { min-width: 0; } /* Responsive definition list (settings profile, structop detail, …) */ .ld-dl { display: grid; grid-template-columns: minmax(7rem, 10rem) 1fr; gap: var(--ld-space-2) var(--ld-space-4); margin: 0; font-size: calc(var(--ld-text-size-md) * var(--ld-text-scale)); } .ld-dl dt { margin: 0; color: var(--ld-fg-muted); font-weight: var(--ld-font-weight-medium, 500); } .ld-dl dt::after { content: ':'; } .ld-dl dd { margin: 0; min-width: 0; padding-inline-start: var(--ld-space-1); color: var(--ld-fg-primary); } @media (max-width: 40rem) { .ld-dl { display: flex; flex-direction: column; gap: var(--ld-space-1); } .ld-dl dd { margin: 0 0 var(--ld-space-2); padding-inline-start: var(--ld-space-3); } } .ld-data-table th, .ld-data-table td { padding: var(--ld-space-2); border-bottom: 1px solid var(--ld-border-subtle); vertical-align: top; } .ld-plugins-row--warning { background: var(--ld-color-warning-bg); } .ld-plugins-row--skipped { background: var(--ld-color-error-bg); } .ld-plugins-row--disabled { opacity: 0.55; } .ld-plugins-row--disabled td { color: var(--ld-text-muted); } .ld-plugins-row--inactive { opacity: 0.72; } .ld-plugins-row--inactive td { color: var(--ld-text-muted); } /* ===================================================================== 8. Reduced motion ===================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --ld-transition-duration: 1ms; --ld-animation-duration: 1ms; } } /* * lime — document.css * Reading typography for .doc-viewer. This is where "distraction-free" * lives: a measured column, generous leading, headings that structure * without shouting. Palette tokens only. */ .doc-viewer { color: var(--ld-doc-fg); width: 100%; max-width: var(--ld-doc-content-measure); margin-inline: auto; font-size: calc(var(--ld-text-size-base) * var(--ld-text-scale)); line-height: 1.65; overflow-wrap: break-word; } /* ---- Headings --------------------------------------------------------- */ .doc-viewer h1, .doc-viewer h2, .doc-viewer h3, .doc-viewer h4, .doc-viewer h5, .doc-viewer h6 { color: var(--ld-fg-primary); font-weight: var(--ld-font-weight-bold); letter-spacing: -0.015em; line-height: 1.25; margin-block: 1.6em 0.5em; scroll-margin-top: calc(var(--ld-layout-header-height) + var(--ld-space-3)); } .doc-viewer h1 { font-size: calc(1.75rem * var(--ld-text-scale)); margin-block-start: 0.4em; } .doc-viewer h2 { font-size: calc(1.375rem * var(--ld-text-scale)); padding-bottom: 0.25em; border-bottom: var(--ld-border-width) solid var(--ld-border-subtle); } .doc-viewer h3 { font-size: calc(1.125rem * var(--ld-text-scale)); } .doc-viewer h4, .doc-viewer h5, .doc-viewer h6 { font-size: calc(1rem * var(--ld-text-scale)); } .doc-viewer h5, .doc-viewer h6 { color: var(--ld-fg-muted); } /* ---- Body ------------------------------------------------------------- */ .doc-viewer p, .doc-viewer ul, .doc-viewer ol, .doc-viewer table, .doc-viewer blockquote, .doc-viewer pre { margin-block: 0 0.9em; } .doc-viewer ul, .doc-viewer ol { padding-inline-start: 1.5em; } .doc-viewer li { margin-block: 0.2em; } .doc-viewer li::marker { color: var(--ld-fg-subtle); } .doc-viewer a { color: var(--ld-fg-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--ld-fg-link) 40%, transparent); text-underline-offset: 0.15em; } .doc-viewer a:hover { text-decoration-color: var(--ld-fg-link); } /* Blockquote carries the lime thread */ .doc-viewer blockquote { padding: 0.1em 0 0.1em 1em; border-inline-start: var(--ld-border-width-2) solid var(--ld-accent-9); color: var(--ld-fg-muted); } .doc-viewer hr { border: none; border-top: var(--ld-border-width) solid var(--ld-border-subtle); margin-block: 2em; } /* ---- Code ------------------------------------------------------------- */ .doc-viewer :not(pre) > code { font-family: var(--ld-font-mono); font-size: 0.9em; background: var(--ld-doc-code-bg); border: var(--ld-border-width) solid var(--ld-border-subtle); border-radius: var(--ld-radius-sm); padding: 0.1em 0.35em; } .doc-viewer pre:not(.shiki) { background: var(--ld-doc-code-bg); border: var(--ld-border-width) solid var(--ld-border-subtle); border-radius: var(--ld-radius-md); padding: 0.85rem 1rem; overflow-x: auto; } .doc-viewer pre:not(.shiki) > code { background: none; border: none; padding: 0; font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); line-height: 1.55; } /* ---- Tables ------------------------------------------------------------ */ .doc-viewer table { border-collapse: collapse; width: 100%; display: block; overflow-x: auto; font-size: calc(var(--ld-text-size-sm) * var(--ld-text-scale)); } .doc-viewer th, .doc-viewer td { padding: 0.45em 0.75em; border: var(--ld-border-width) solid var(--ld-border-subtle); text-align: start; } .doc-viewer th { background: var(--ld-bg-subtle); font-weight: var(--ld-font-weight-bold); } /* ---- Media -------------------------------------------------------------- */ .doc-viewer img, .doc-viewer video { border-radius: var(--ld-radius-md); }