/* ========================================================================== main.css — single source of truth for design tokens. Architecture: 1. Primitives — raw color ramps + scales. Internal. Never referenced directly by component CSS. 2. Semantic — named by role (bg, fg, border, primary, danger, …). The only layer component CSS references. Brands re-theme by overriding THIS layer. 3. Dark mode — @media (prefers-color-scheme: dark) is the default. [data-mode="dark"] on / overrides it. [data-mode="light"] forces light even under OS dark. 4. Layout — global resets + .layout-* utility classes. Exceptions (allowed hardcoded literals in component CSS): - `transparent` (keyword, not a color). - rgb(255 255 255 / a) / rgb(0 0 0 / a) used as ALPHA OVERLAYS that read correctly on any theme background: specular inset highlights, image vignettes, scrim/shimmer effects, spinner rings on solid brand surfaces. Pure literal #fff / #000 are NOT allowed — they don't adapt to theme. - `oklch(from var(--de-color-*) …)` — relative-color syntax derives from an existing token; it is token-based, not a hardcoded value. No other hardcoded color values are permitted anywhere in /src. ========================================================================== */ /* ========================================================================== 1. PRIMITIVES ========================================================================== */ :root { /* --- Gray ramp (hue 260, very low chroma) --- */ --de-gray-50: oklch(99% 0.002 260); --de-gray-100: oklch(97.5% 0.003 260); --de-gray-150: oklch(96% 0.004 260); --de-gray-200: oklch(92% 0.003 260); --de-gray-300: oklch(86% 0.005 260); --de-gray-400: oklch(70% 0.008 260); --de-gray-500: oklch(55% 0.008 260); --de-gray-600: oklch(48% 0.01 260); --de-gray-700: oklch(36% 0.01 260); --de-gray-800: oklch(28% 0.01 260); --de-gray-850: oklch(21% 0.012 260); --de-gray-900: oklch(19% 0.012 260); --de-gray-950: oklch(16% 0.01 260); --de-gray-975: oklch(14% 0.01 260); /* --- Brand blue ramp (hue 255) --- */ --de-blue-50: oklch(97% 0.02 255); --de-blue-100: oklch(94% 0.04 255); --de-blue-200: oklch(88% 0.06 255); --de-blue-300: oklch(78% 0.10 255); --de-blue-400: oklch(65% 0.15 255); --de-blue-500: oklch(55% 0.18 255); --de-blue-600: oklch(50% 0.19 255); --de-blue-700: oklch(42% 0.18 255); --de-blue-800: oklch(34% 0.15 255); --de-blue-900: oklch(26% 0.11 255); /* --- Red ramp (hue 25, danger) --- */ --de-red-50: oklch(97% 0.03 25); --de-red-100: oklch(92% 0.06 25); --de-red-200: oklch(85% 0.10 25); --de-red-400: oklch(70% 0.16 25); --de-red-500: oklch(56% 0.17 25); --de-red-600: oklch(48% 0.18 25); --de-red-700: oklch(40% 0.17 25); --de-red-800: oklch(30% 0.12 25); /* --- Amber ramp (hue 75, warn) --- */ --de-amber-50: oklch(98% 0.04 75); --de-amber-100: oklch(94% 0.08 75); --de-amber-200: oklch(88% 0.11 75); --de-amber-400: oklch(80% 0.13 75); --de-amber-500: oklch(70% 0.15 75); --de-amber-600: oklch(58% 0.15 75); --de-amber-700: oklch(45% 0.13 75); /* --- Green ramp (hue 155, success) --- */ --de-green-50: oklch(96% 0.03 155); --de-green-100: oklch(92% 0.06 155); --de-green-300: oklch(80% 0.11 155); --de-green-500: oklch(58% 0.14 155); --de-green-600: oklch(50% 0.13 155); --de-green-700: oklch(40% 0.11 155); /* --- Radius scale --- */ --de-radius-scale-xs: 2px; --de-radius-scale-sm: 4px; --de-radius-scale-md: 8px; --de-radius-scale-lg: 12px; --de-radius-scale-full: 999px; /* --- Spacing scale --- */ --de-space-scale-0: 0; --de-space-scale-1: 2px; --de-space-scale-2: 4px; --de-space-scale-3: 8px; --de-space-scale-4: 12px; --de-space-scale-5: 16px; --de-space-scale-6: 20px; --de-space-scale-7: 24px; --de-space-scale-8: 32px; /* --- Typography scale --- */ --de-font-size-scale-xs: 11px; --de-font-size-scale-sm: 12px; --de-font-size-scale-base: 13px; --de-font-size-scale-md: 14px; --de-font-size-scale-lg: 16px; --de-font-size-scale-xl: 18px; --de-font-size-scale-2xl: 20px; --de-font-size-scale-3xl: 28px; } /* ========================================================================== 2. SEMANTIC TOKENS — light (default) These are the ONLY tokens component CSS should reference. Brand overrides: redeclare any of these in :root on a sheet loaded AFTER main.css. ========================================================================== */ :root { /* --- Surface --- */ --de-color-bg: var(--de-gray-50); /* page background */ --de-color-bg-elevated: #ffffff; /* cards, menus, dialogs, popovers */ --de-color-bg-subtle: var(--de-gray-100); /* hover states, sidebars, tints */ --de-color-bg-sunk: var(--de-gray-150); /* insets, disabled tracks, pills */ --de-color-bg-active: var(--de-gray-300); /* selected/active state pills (pagination, tabs, tree) */ /* Disabled/read-only field fill. Derived (not a ramp step) so it sits a touch lighter than -bg-subtle and re-resolves per theme automatically — it references theme-overridden tokens, so it needs no dark-mode copy. */ --de-color-bg-disabled: color-mix(in srgb, var(--de-color-bg-subtle) 50%, var(--de-color-bg-elevated)); /* --- Foreground --- */ --de-color-fg: var(--de-gray-850); /* primary text, headings */ --de-color-fg-muted: var(--de-gray-600); /* secondary text, labels */ --de-color-fg-faint: var(--de-gray-500); /* hints, placeholders, disabled text */ /* --- Border --- */ --de-color-border: var(--de-gray-200); /* default hairline */ --de-color-border-strong: var(--de-gray-300); /* input borders, emphasized dividers */ /* --- Brand — primary --- */ --de-color-primary: var(--de-blue-500); --de-color-primary-hover: var(--de-blue-600); --de-color-primary-soft: var(--de-blue-50); /* tinted surface (e.g. selected rows) */ --de-color-primary-border: var(--de-blue-200); --de-color-on-primary: #ffffff; /* text on solid primary bg */ /* --- Feedback — danger --- `-fg` is the accessible text color on the `-soft` background. */ --de-color-danger: var(--de-red-500); --de-color-danger-hover: var(--de-red-600); --de-color-danger-soft: var(--de-red-50); --de-color-danger-border: var(--de-red-200); --de-color-danger-fg: var(--de-red-700); --de-color-on-danger: #ffffff; /* --- Feedback — warn --- */ --de-color-warn: var(--de-amber-500); --de-color-warn-hover: var(--de-amber-600); --de-color-warn-soft: var(--de-amber-50); --de-color-warn-border: var(--de-amber-200); --de-color-warn-fg: var(--de-amber-700); --de-color-on-warn: var(--de-gray-950); /* --- Feedback — success --- */ --de-color-success: var(--de-green-500); --de-color-success-hover: var(--de-green-600); --de-color-success-soft: var(--de-green-50); --de-color-success-border: var(--de-green-100); --de-color-success-fg: var(--de-green-700); --de-color-on-success: #ffffff; /* --- Interaction --- */ --de-color-focus-ring: oklch(55% 0.18 255 / 0.28); /* --- Shadow (light theme) --- Literal rgb(255 255 255 / a) / rgb(0 0 0 / a) values in these recipes are alpha overlays that read correctly on any theme background — they are intentional, not theme colors. */ --de-shadow-sm: 0 1px 2px rgb(20 22 30 / 0.04), 0 1px 1px rgb(20 22 30 / 0.03); --de-shadow-md: 0 4px 12px -2px rgb(20 22 30 / 0.06), 0 1px 2px rgb(20 22 30 / 0.04); --de-shadow-lg: 0 20px 40px -12px rgb(20 22 30 / 0.16), 0 4px 10px -2px rgb(20 22 30 / 0.06); --de-shadow-xl: 0 24px 48px -16px rgb(20 22 30 / 0.22), 0 8px 16px -6px rgb(20 22 30 / 0.1), 0 0 0 1px rgb(255 255 255 / 0.04) inset; --de-shadow-overlay: 0 1px 1px rgb(20 22 30 / 0.04), 0 2px 6px rgb(20 22 30 / 0.04), 0 8px 20px -6px rgb(20 22 30 / 0.06); --de-shadow-card: 0 8px 20px -8px rgb(20 22 30 / 0.12), 0 2px 4px -1px rgb(20 22 30 / 0.04); --de-shadow-popover: 0 4px 11px rgb(20 22 30 / 0.1); /* --- Scrim (modal backdrop) --- */ --de-color-scrim: oklch(from var(--de-gray-950) l c h / 0.42); /* --- Radius --- */ --de-radius-xs: var(--de-radius-scale-xs); --de-radius-sm: var(--de-radius-scale-sm); --de-radius: var(--de-radius-scale-md); --de-radius-lg: var(--de-radius-scale-lg); --de-radius-full: var(--de-radius-scale-full); /* Controls and form sections sit one step below the container radius, so a field never competes with the card it lives in. Previously unset here and re-declared per app-kind (site, collection) — which left dialogs and any other host on the 8px fallback. Declared once; apps may still override. */ --de-form-field-radius: var(--de-radius-sm); --de-section-radius: var(--de-radius-sm); /* --- Spacing --- */ --de-space-xs: var(--de-space-scale-2); /* 4px */ --de-space-sm: var(--de-space-scale-3); /* 8px */ --de-space: var(--de-space-scale-5); /* 16px */ --de-space-lg: var(--de-space-scale-6); /* 20px */ --de-space-xl: var(--de-space-scale-7); /* 24px */ /* --- Typography --- */ --de-font-sans: "Inter Tight", "Inter", system-ui, -apple-system, sans-serif; --de-font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --de-font-size-xs: var(--de-font-size-scale-xs); --de-font-size-sm: var(--de-font-size-scale-sm); --de-font-size: var(--de-font-size-scale-base); --de-font-size-md: var(--de-font-size-scale-md); --de-font-size-lg: var(--de-font-size-scale-lg); --de-font-size-xl: var(--de-font-size-scale-xl); --de-font-size-2xl: var(--de-font-size-scale-2xl); --de-font-size-3xl: var(--de-font-size-scale-3xl); --de-font-weight-normal: 400; --de-font-weight-medium: 500; --de-font-weight-semibold: 600; --de-font-weight-bold: 700; --de-line-height-tight: 1.2; --de-line-height-normal: 1.5; /* --- Layout --- */ --de-layout-gap: var(--de-space); /* preserved name; consumed by .layout-* utilities */ /* --- Decorative avatar gradients (notification items, etc.) 5 distinct category colors. Brand forks can redefine these. --- */ --de-avatar-gradient-a: linear-gradient(135deg, oklch(65% 0.15 260), oklch(55% 0.18 280)); --de-avatar-gradient-b: linear-gradient(135deg, oklch(68% 0.13 160), oklch(58% 0.15 180)); --de-avatar-gradient-c: linear-gradient(135deg, oklch(70% 0.12 30), oklch(60% 0.14 350)); --de-avatar-gradient-d: linear-gradient(135deg, oklch(65% 0.14 80), oklch(60% 0.15 50)); --de-avatar-gradient-e: linear-gradient(135deg, oklch(65% 0.14 200), oklch(55% 0.16 220)); /* --- Inline icons (SVG data URIs — color is baked in because external SVGs and background-images cannot inherit currentColor). Redefined in the dark-mode blocks below. --- */ --de-icon-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23808080'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); --de-icon-indicator-filter: invert(0.4); /* native calendar/time picker */ /* Checkbox tick — drawn in --de-color-fg equivalent. Swapped per mode because SVG fill can't inherit currentColor via background-image. */ --de-checkbox-check-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e1e1e'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); } /* ========================================================================== 3. DARK MODE — via media query (OS-driven default) Overridden by [data-mode="dark"] / [data-mode="light"] below. ========================================================================== */ @media (prefers-color-scheme: dark) { :root { --de-color-bg: var(--de-gray-950); --de-color-bg-elevated: var(--de-gray-900); --de-color-bg-subtle: var(--de-gray-850); --de-color-bg-sunk: var(--de-gray-975); --de-color-bg-active: var(--de-gray-700); --de-color-fg: oklch(96% 0.003 260); --de-color-fg-muted: var(--de-gray-400); --de-color-fg-faint: var(--de-gray-500); --de-color-border: var(--de-gray-800); --de-color-border-strong: var(--de-gray-700); --de-color-primary-soft: oklch(30% 0.07 255); --de-color-primary-border: oklch(40% 0.10 255); --de-color-danger-soft: oklch(28% 0.08 25); --de-color-danger-border: oklch(40% 0.12 25); --de-color-danger-fg: var(--de-red-200); --de-color-warn-soft: oklch(30% 0.06 75); --de-color-warn-border: oklch(45% 0.10 75); --de-color-warn-fg: var(--de-amber-200); --de-color-on-warn: oklch(96% 0.003 260); --de-color-success-soft: oklch(28% 0.06 155); --de-color-success-border: oklch(40% 0.09 155); --de-color-success-fg: var(--de-green-300); --de-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.3); --de-shadow-md: 0 4px 12px rgb(0 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.2); --de-shadow-lg: 0 20px 40px -12px rgb(0 0 0 / 0.55), 0 4px 10px -2px rgb(0 0 0 / 0.3); --de-shadow-xl: 0 24px 48px -16px rgb(0 0 0 / 0.6), 0 8px 16px -6px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.04) inset; --de-shadow-overlay: 0 1px 1px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.25), 0 12px 28px -10px rgb(0 0 0 / 0.4); --de-shadow-card: 0 8px 20px -8px rgb(0 0 0 / 0.5), 0 2px 4px -1px rgb(0 0 0 / 0.25); --de-shadow-popover: 0 4px 11px rgb(0 0 0 / 0.35); --de-color-scrim: oklch(from var(--de-gray-950) l c h / 0.6); --de-icon-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23a8a8a8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); --de-icon-indicator-filter: invert(0.85); --de-checkbox-check-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0f0f0'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); } } /* ========================================================================== 4. DARK MODE — explicit attribute (overrides media query) ========================================================================== */ [data-mode="dark"] { /* Not just tokens: `color-scheme` is what the browser itself paints — canvas, scrollbars, form controls — and an attribute override cannot reach those without it. Set here (and by the boot script in `public/theme.js`) so a forced theme is honoured end to end. */ color-scheme: dark; --de-color-bg: var(--de-gray-950); --de-color-bg-elevated: var(--de-gray-900); --de-color-bg-subtle: var(--de-gray-850); --de-color-bg-sunk: var(--de-gray-975); --de-color-bg-active: var(--de-gray-700); --de-color-fg: oklch(96% 0.003 260); --de-color-fg-muted: var(--de-gray-400); --de-color-fg-faint: var(--de-gray-500); --de-color-border: var(--de-gray-800); --de-color-border-strong: var(--de-gray-700); --de-color-primary-soft: oklch(30% 0.07 255); --de-color-primary-border: oklch(40% 0.10 255); --de-color-danger-soft: oklch(28% 0.08 25); --de-color-danger-border: oklch(40% 0.12 25); --de-color-danger-fg: var(--de-red-200); --de-color-warn-soft: oklch(30% 0.06 75); --de-color-warn-border: oklch(45% 0.10 75); --de-color-warn-fg: var(--de-amber-200); --de-color-on-warn: oklch(96% 0.003 260); --de-color-success-soft: oklch(28% 0.06 155); --de-color-success-border: oklch(40% 0.09 155); --de-color-success-fg: var(--de-green-300); --de-shadow-sm: 0 1px 1px rgb(0 0 0 / 0.3); --de-shadow-md: 0 4px 12px rgb(0 0 0 / 0.25), 0 1px 2px rgb(0 0 0 / 0.2); --de-shadow-lg: 0 20px 40px -12px rgb(0 0 0 / 0.55), 0 4px 10px -2px rgb(0 0 0 / 0.3); --de-shadow-xl: 0 24px 48px -16px rgb(0 0 0 / 0.6), 0 8px 16px -6px rgb(0 0 0 / 0.35), 0 0 0 1px rgb(255 255 255 / 0.04) inset; --de-shadow-overlay: 0 1px 1px rgb(0 0 0 / 0.3), 0 4px 12px rgb(0 0 0 / 0.25), 0 12px 28px -10px rgb(0 0 0 / 0.4); --de-shadow-card: 0 8px 20px -8px rgb(0 0 0 / 0.5), 0 2px 4px -1px rgb(0 0 0 / 0.25); --de-shadow-popover: 0 4px 11px rgb(0 0 0 / 0.35); --de-color-scrim: oklch(from var(--de-gray-950) l c h / 0.6); --de-icon-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23a8a8a8'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); --de-icon-indicator-filter: invert(0.85); --de-checkbox-check-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f0f0f0'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); } /* ========================================================================== 5. LIGHT MODE — explicit attribute (force-light escape hatch) Identity re-declare so [data-mode="light"] wins against OS dark. ========================================================================== */ [data-mode="light"] { color-scheme: light; --de-color-bg: var(--de-gray-50); --de-color-bg-elevated: #ffffff; --de-color-bg-subtle: var(--de-gray-100); --de-color-bg-sunk: var(--de-gray-150); --de-color-bg-active: var(--de-gray-300); --de-color-fg: var(--de-gray-850); --de-color-fg-muted: var(--de-gray-600); --de-color-fg-faint: var(--de-gray-500); --de-color-border: var(--de-gray-200); --de-color-border-strong: var(--de-gray-300); --de-color-primary-soft: var(--de-blue-50); --de-color-primary-border: var(--de-blue-200); --de-color-danger-soft: var(--de-red-50); --de-color-danger-border: var(--de-red-200); --de-color-danger-fg: var(--de-red-700); --de-color-warn-soft: var(--de-amber-50); --de-color-warn-border: var(--de-amber-200); --de-color-warn-fg: var(--de-amber-700); --de-color-on-warn: var(--de-gray-950); --de-color-success-soft: var(--de-green-50); --de-color-success-border: var(--de-green-100); --de-color-success-fg: var(--de-green-700); --de-shadow-sm: 0 1px 2px rgb(20 22 30 / 0.04), 0 1px 1px rgb(20 22 30 / 0.03); --de-shadow-md: 0 4px 12px -2px rgb(20 22 30 / 0.06), 0 1px 2px rgb(20 22 30 / 0.04); --de-shadow-lg: 0 20px 40px -12px rgb(20 22 30 / 0.16), 0 4px 10px -2px rgb(20 22 30 / 0.06); --de-shadow-xl: 0 24px 48px -16px rgb(20 22 30 / 0.22), 0 8px 16px -6px rgb(20 22 30 / 0.1), 0 0 0 1px rgb(255 255 255 / 0.04) inset; --de-shadow-overlay: 0 1px 1px rgb(20 22 30 / 0.04), 0 2px 6px rgb(20 22 30 / 0.04), 0 8px 20px -6px rgb(20 22 30 / 0.06); --de-shadow-card: 0 8px 20px -8px rgb(20 22 30 / 0.12), 0 2px 4px -1px rgb(20 22 30 / 0.04); --de-shadow-popover: 0 4px 11px rgb(20 22 30 / 0.1); --de-color-scrim: oklch(from var(--de-gray-950) l c h / 0.42); --de-icon-chevron: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='%23808080'%3E%3Cpath d='M7 10l5 5 5-5z'/%3E%3C/svg%3E"); --de-icon-indicator-filter: invert(0.4); --de-checkbox-check-icon: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%231e1e1e'%3E%3Cpath d='M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41L9 16.17z'/%3E%3C/svg%3E"); } /* ========================================================================== 6. DENSITY VARIANTS (optional) ========================================================================== */ [data-density="compact"] { --de-space-xs: 2px; --de-space-sm: 6px; --de-space: 10px; --de-space-lg: 12px; --de-space-xl: 16px; --de-layout-gap: var(--de-space); } [data-density="spacious"] { --de-space-xs: 6px; --de-space-sm: 12px; --de-space: 20px; --de-space-lg: 28px; --de-space-xl: 36px; --de-layout-gap: var(--de-space); } /* ========================================================================== 7. GLOBAL RESETS + LAYOUT UTILITIES (Preserved from the former layout.css; all color values now route through semantic tokens.) ========================================================================== */ * { touch-action: manipulation; } /* Native picker icon — the browser renders this in its own shadow so it can't inherit theme colors. A filter approximates a gray matching --de-color-fg-muted in each mode. */ input[type="date"]::-webkit-calendar-picker-indicator, input[type="datetime-local"]::-webkit-calendar-picker-indicator, input[type="month"]::-webkit-calendar-picker-indicator, input[type="week"]::-webkit-calendar-picker-indicator, input[type="time"]::-webkit-calendar-picker-indicator { filter: var(--de-icon-indicator-filter); cursor: pointer; } html, body { width: 100vw; height: 100dvh; margin: 0; padding: 0; position: fixed; overflow: hidden; } body { font-family: var(--de-font-sans); font-weight: var(--de-font-weight-normal); font-style: normal; font-size: var(--de-font-size-lg); color: var(--de-color-fg); background: var(--de-color-bg); box-sizing: border-box; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } /* layout */ .layout-content { h3 { color: var(--de-color-fg); font-size: var(--de-font-size-2xl); font-style: normal; font-weight: var(--de-font-weight-bold); margin: 0; padding: 0; margin-bottom: .25rem; &:only-child { margin-bottom: 0px; } } h4 { color: var(--de-color-fg); font-size: var(--de-font-size-xl); font-style: normal; font-weight: var(--de-font-weight-semibold); margin: 0; margin-bottom: .25rem; padding: 0; &:only-child { margin-bottom: 0px; } } h5 { color: var(--de-color-fg); font-size: var(--de-font-size-lg); font-style: normal; font-weight: var(--de-font-weight-medium); margin: 0; margin-bottom: .25rem; padding: 0; &:only-child { margin-bottom: 0px; } } p { color: var(--de-color-fg-muted); font-size: .9rem; font-style: normal; font-weight: var(--de-font-weight-normal); line-height: 150%; &:first-of-type { margin-top: 0; } &:last-of-type { margin-bottom: 0; } } } .layout-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); width: 100%; gap: var(--de-layout-gap); } .layout-grid-container { container-type: inline-size; container-name: grid-container; } .layout-grid { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; gap: var(--de-layout-gap); &.columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } &.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } &.columns-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } > .layout-grid-item { &.span-2 { grid-column: span 2; } &.span-3 { grid-column: span 3; } &.span-4 { grid-column: span 4; } } @container grid-container (inline-size < 500px) { & { grid-template-columns: minmax(0, 1fr) !important; > .layout-grid-item { grid-column: span 1 !important; } } } } .layout-break { display: block; width: 100%; min-height: var(--de-layout-gap); } .layout-grid > .layout-break { grid-column: 1 / -1; } hr.layout-divider { border: none; border-top: 1px solid var(--de-color-border); margin-block: 2rem; } de-section + de-section { margin-top: var(--de-layout-gap); } /* ========================================================================== 8. SCROLLBAR STYLES Moved to the standalone core/assets/css/scrollbar.css so the scrollbar rules can be adopted on their own into the app-shell shadow root (which must not inherit the rest of main.css). They are still bundled alongside main.css for every adoptLayoutStyles() consumer — see utils/layout/styles.ts — so existing adopters are unaffected. ========================================================================== */