@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); /* Shared Sovern design system (LOCKED, drift-guarded). Core palette — background/foreground/primary/card/sidebar/status — comes from these vendored files (consumed as hsl(var(--x))). Edit in design-system/ and re-run sync-design.mjs; never edit the vendored copies in-app. */ /* ============================================================================ * SHELL — the CROSS-OS shared token layer. The single source of truth for the * tokens that are the SAME for every suite: the scale defaults, status colors, * file-type accents, the optional highlight fallback, the sidebar-shell * defaults, and the per-STYLE "feel" blocks (house / crisp / airy / soft). * * Pair this with exactly ONE per-OS palette (tokens/.css) to get a complete * theme. The reference portal imports shell + all three palettes; an app imports * shell + its own palette and sets . Edit HERE, then re-sync. * * Values are HSL triplets "H S% L%" — the Tailwind preset wraps them as * hsl(var(--x)). This file declares CSS variables + ONE global touch base-rule * (see "Global touch tier" below); still safe to load before @tailwind. Other * base element resets stay in the app's own index.css after it. * ==========================================================================*/ :root { /* Style-axis defaults (= House). The Style switcher overrides these on [data-style="…"]; defined here as the fallback. Radius, type, elevation and density are the "feel" — orthogonal to the color/OS axis. */ --radius: 0.5rem; --font-sans: "Inter", system-ui, sans-serif; --shadow-sm: 0 1px 2px 0 rgb(16 24 40 / 0.04); --shadow: 0 1px 3px 0 rgb(16 24 40 / 0.06), 0 1px 2px -1px rgb(16 24 40 / 0.04); --shadow-md: 0 2px 6px -1px rgb(16 24 40 / 0.07), 0 1px 3px -1px rgb(16 24 40 / 0.05); --shadow-lg: 0 8px 20px -4px rgb(16 24 40 / 0.1), 0 3px 8px -3px rgb(16 24 40 / 0.06); --shadow-xl: 0 16px 32px -8px rgb(16 24 40 / 0.14), 0 6px 14px -6px rgb(16 24 40 / 0.08); /* status — shared across all OSes, used ONLY for status (light) */ --success: 152 55% 38%; --success-foreground: 0 0% 100%; --warning: 35 85% 48%; --warning-foreground: 40 30% 12%; --danger: 0 72% 51%; --danger-foreground: 0 0% 100%; --info: 214 80% 48%; --info-foreground: 0 0% 100%; /* file-type accents (jewel tones), tokenized so tiles/menus share one source */ --type-folder: 38 92% 50%; --type-doc: 262 83% 58%; --type-sheet: 172 66% 40%; --type-slides: 347 77% 60%; --type-file: 215 14% 52%; } /* Global touch tier (mobile axis #7). The one base ELEMENT rule in this file: kill the 300ms tap delay + the grey tap-flash on every interactive element so mobile taps feel native. Desktop is unaffected. Load-order-safe either side of @tailwind (plain declarations, no @layer). */ button, a, label, summary, select, [role="button"], [data-slot="button"], [data-slot="select-trigger"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; } .dark { --success: 152 50% 48%; --warning: 35 80% 55%; --danger: 0 62% 55%; --info: 214 75% 62%; --type-folder: 38 92% 58%; --type-doc: 262 84% 70%; --type-sheet: 172 60% 50%; --type-slides: 347 85% 70%; --type-file: 215 16% 62%; } /* Sidebar/shell tokens — default to the card surface (so non-Sovern suites keep a light rail). A suite overrides these in its tokens/.css to give its shell a distinct identity (e.g. Sovern's sable rail). Uses :where() for ZERO specificity so the per-OS [data-os="…"] override always wins regardless of @import order. */ :where(:root) { --sidebar: var(--card); --sidebar-foreground: var(--card-foreground); --sidebar-border: var(--border); --sidebar-accent: var(--accent); --sidebar-accent-foreground: var(--accent-foreground); --sidebar-primary: var(--primary); --sidebar-primary-foreground: var(--primary-foreground); } /* ============================================================================ * STYLE AXIS — the design *language* (feel), orthogonal to the color axis. * Set on . Drives radius, typography, elevation and * density — so the SAME screens re-render as Crisp / Airy / Soft. Homage * presets ("inspired by"), not copies. Density uses root font-size (rem-based * Tailwind spacing scales with it). * ==========================================================================*/ /* ---- HOUSE — the balanced ecosystem baseline (= :root defaults) ---- */ [data-style="house"] { font-size: 16px; --radius: 0.5rem; } /* ---- CRISP — inspired by Linear: tight, sharp, dense, border-led, near-flat ---- */ [data-style="crisp"] { font-size: 13.5px; --radius: 0.375rem; --font-sans: "Inter", system-ui, sans-serif; --shadow-sm: 0 0 #0000; --shadow: 0 0 #0000; --shadow-md: 0 1px 2px 0 rgb(16 24 40 / 0.06); --shadow-lg: 0 4px 12px -2px rgb(16 24 40 / 0.12); --shadow-xl: 0 8px 24px -6px rgb(16 24 40 / 0.18); } /* ---- AIRY — inspired by Notion: calm, minimal chrome, square-ish, faint shadow ---- */ [data-style="airy"] { font-size: 16px; --radius: 0.25rem; --font-sans: "Inter", system-ui, sans-serif; --shadow-sm: 0 1px 2px 0 rgb(16 24 40 / 0.03); --shadow: 0 1px 2px 0 rgb(16 24 40 / 0.04); --shadow-md: 0 2px 5px -1px rgb(16 24 40 / 0.05); --shadow-lg: 0 6px 16px -3px rgb(16 24 40 / 0.07); --shadow-xl: 0 12px 28px -6px rgb(16 24 40 / 0.1); } /* ---- SOFT — inspired by iWork/Apple: pillowy radius, soft layered shadow, SF type ---- */ [data-style="soft"] { font-size: 16.5px; --radius: 0.9rem; --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif; --shadow-sm: 0 1px 3px 0 rgb(16 24 40 / 0.06); --shadow: 0 2px 8px -1px rgb(16 24 40 / 0.1), 0 1px 3px 0 rgb(16 24 40 / 0.06); --shadow-md: 0 6px 16px -2px rgb(16 24 40 / 0.12), 0 2px 6px 0 rgb(16 24 40 / 0.07); --shadow-lg: 0 16px 32px -6px rgb(16 24 40 / 0.16), 0 6px 14px -4px rgb(16 24 40 / 0.1); --shadow-xl: 0 28px 56px -12px rgb(16 24 40 / 0.22), 0 10px 24px -8px rgb(16 24 40 / 0.12); } /* ---- EDITORIAL — print / magazine: serif type, restrained corners, faint shadow ---- */ [data-style="editorial"] { font-size: 17px; --radius: 0.25rem; --font-sans: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif; --shadow-sm: 0 1px 2px 0 rgb(16 24 40 / 0.04); --shadow: 0 1px 2px 0 rgb(16 24 40 / 0.05); --shadow-md: 0 2px 5px -1px rgb(16 24 40 / 0.06); --shadow-lg: 0 6px 14px -3px rgb(16 24 40 / 0.08); --shadow-xl: 0 12px 26px -6px rgb(16 24 40 / 0.1); } /* ---- BRUTALIST — hard edges, monospace, FLAT hard-offset shadows (no blur) ---- */ [data-style="brutalist"] { font-size: 15px; --radius: 0rem; --font-sans: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; --shadow-sm: 1px 1px 0 0 rgb(16 24 40 / 0.85); --shadow: 2px 2px 0 0 rgb(16 24 40 / 0.85); --shadow-md: 3px 3px 0 0 rgb(16 24 40 / 0.85); --shadow-lg: 4px 4px 0 0 rgb(16 24 40 / 0.85); --shadow-xl: 6px 6px 0 0 rgb(16 24 40 / 0.85); } /* ---- PLAYFUL — big pillowy radius, rounded type, soft bouncy shadows ---- */ [data-style="playful"] { font-size: 16.5px; --radius: 1.25rem; --font-sans: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN", "Quicksand", "Inter", system-ui, sans-serif; --shadow-sm: 0 2px 4px 0 rgb(16 24 40 / 0.08); --shadow: 0 4px 10px -2px rgb(16 24 40 / 0.12); --shadow-md: 0 8px 18px -4px rgb(16 24 40 / 0.14); --shadow-lg: 0 16px 30px -6px rgb(16 24 40 / 0.16); --shadow-xl: 0 28px 50px -10px rgb(16 24 40 / 0.2); } /* ============================================================================ * SOVERN THEME — "Mono Ink" (owner-decided 2026-07-01; supersedes the retired * Gondor "White City" warm-stone + dark-sable palette). Light, minimal, * functional: near-white gray canvas · white cards · hairline borders · a LIGHT * near-white rail (NOT a dark rail — owner-confirmed canon 2026-07-08) · ONE * per-app signature accent. Status colours only for status. * * CANONICAL SOURCE. Single source of truth for Sovern's palette. The reference * portal @imports it and the sync tool vendors it into each Sovern app. Edit * HERE, then re-sync (design-system/tools/sync-design.mjs). * * The neutral RAMP below is IDENTICAL across every Sovern app; each app overrides * ONLY its signature accent (--primary / --ring / --sidebar-primary): Docs teal, * Knowledge indigo, Chat emerald, Projects ochre, Team OS graphite. This source * carries a neutral graphite default (Team OS / the hub). * * Values are HSL triplets "H S% L%" — the Tailwind preset wraps them as * hsl(var(--x)). Sovern is also the bare :root fallback. * ==========================================================================*/ :root, [data-os="sovern"] { /* Mono-Ink neutral ramp — near-white gray canvas, white cards, DISTINCT secondary/muted/accent steps (so surfaces read on the canvas AND on white), and a stronger --input so control/checkbox borders are visible. */ --background: 240 6% 95%; --foreground: 224 13% 10%; --card: 0 0% 100%; --card-foreground: 224 13% 10%; --popover: 0 0% 100%; --popover-foreground: 224 13% 10%; /* Suite default signature — graphite (Team OS / the hub); each app overrides. */ --primary: 222 24% 32%; --primary-foreground: 0 0% 100%; --secondary: 240 5% 91%; --secondary-foreground: 240 6% 25%; --muted: 240 5% 92%; --muted-foreground: 240 5% 40%; --accent: 240 5% 92%; --accent-foreground: 224 13% 15%; --destructive: 2 52% 50%; --destructive-foreground: 0 0% 100%; --border: 240 5% 89%; --input: 240 5% 82%; --ring: 222 24% 32%; } /* Mono-Ink rail — LIGHT near-white (owner-confirmed canon 2026-07-08, replaces the retired dark-sable "White City" rail). Scoped to [data-os="sovern"] only, so it never leaks to the other suites' light default. */ [data-os="sovern"] { --sidebar: 240 6% 97%; --sidebar-foreground: 224 9% 30%; --sidebar-border: 240 5% 90%; --sidebar-accent: 240 5% 93%; --sidebar-accent-foreground: 224 13% 15%; --sidebar-primary: 222 24% 32%; --sidebar-primary-foreground: 0 0% 100%; } /* Content-type colours — Mono Ink's SECOND functional colour system ("what kind of thing is this"), identical across every Sovern app (SOVERN-MONO-INK.md §2). Used ONLY on file/content-type icons (small tile: color@8% bg + colored glyph). Values are the Docs-pilot set (owner-locked 2026-07-08): muted, harmonized with the signature accents, deliberately OFF the Microsoft Office primaries (no Word blue / Excel green / PPT orange). These SUPERSEDE the brighter hexes in the original MONO-INK table. The shared tailwind preset maps them as type-*. */ [data-os="sovern"] { --type-doc: 198 30% 41%; /* slate-teal */ --type-sheet: 150 24% 39%; /* muted sage */ --type-slides: 10 34% 53%; /* soft clay */ --type-folder: 40 30% 50%; /* warm sand */ --type-file: 220 9% 46%; /* graphite */ } /* ─── Dark Mono-Ink — REAL dark mode, ships suite-wide (generalizes the Docs pilot). Applies when a theme toggle puts `.dark` on . The selector `:root[data-os="sovern"].dark` (specificity 0,3,0) beats BOTH the light override `:root[data-os="sovern"]` (0,2,0) AND a plain `:root.dark` (0,2,0), so it wins for every token it declares — which is why it must declare the WHOLE ramp (a partial block leaves the light override half-winning → the old "half-dark" bug that got the Gondor block deleted 2026-07-12). This shared block carries the NEUTRAL dark ramp + a graphite DEFAULT accent (Team OS / the hub). Each app re-states ONLY its signature accent (--primary / --ring / --sidebar-primary) in its own app-local `:root[data-os="sovern"].dark` block in index.css — later in source order, same 0,3,0 specificity, so it wins. Mirrors exactly how LIGHT works above. */ :root[data-os="sovern"].dark { --background: 240 5% 9%; --foreground: 240 6% 96%; --card: 240 5% 13%; --card-foreground: 240 6% 96%; --popover: 240 5% 13%; --popover-foreground: 240 6% 96%; /* Suite default signature — graphite dark (Team OS / the hub); each app overrides. */ --primary: 222 22% 58%; --primary-foreground: 240 6% 12%; --secondary: 240 5% 16%; --secondary-foreground: 240 6% 90%; --muted: 240 5% 16%; --muted-foreground: 240 5% 64%; --accent: 240 5% 18%; --accent-foreground: 240 6% 92%; --destructive: 2 58% 56%; --destructive-foreground: 0 0% 100%; --border: 240 6% 20%; --input: 240 6% 26%; --ring: 222 22% 58%; } /* Dark rail — near-black, one hairline. Scoped to [data-os="sovern"].dark only. */ :root[data-os="sovern"].dark { --sidebar: 240 5% 11%; --sidebar-foreground: 240 5% 70%; --sidebar-border: 240 6% 20%; --sidebar-accent: 240 5% 17%; --sidebar-accent-foreground: 240 6% 92%; --sidebar-primary: 222 22% 58%; --sidebar-primary-foreground: 240 6% 12%; } /* Content-type colours (dark) — lightened for legibility on the dark canvas, from the owner-greenlit Docs dark pilot. Still the SAME across every Sovern app. */ :root[data-os="sovern"].dark { --type-doc: 220 70% 67%; --type-sheet: 145 40% 55%; --type-slides: 28 66% 63%; --type-folder: 40 42% 60%; --type-file: 217 20% 65%; } *, ::before, ::after{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } ::backdrop{ --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-pan-x: ; --tw-pan-y: ; --tw-pinch-zoom: ; --tw-scroll-snap-strictness: proximity; --tw-gradient-from-position: ; --tw-gradient-via-position: ; --tw-gradient-to-position: ; --tw-ordinal: ; --tw-slashed-zero: ; --tw-numeric-figure: ; --tw-numeric-spacing: ; --tw-numeric-fraction: ; --tw-ring-inset: ; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgb(59 130 246 / 0.5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; --tw-blur: ; --tw-brightness: ; --tw-contrast: ; --tw-grayscale: ; --tw-hue-rotate: ; --tw-invert: ; --tw-saturate: ; --tw-sepia: ; --tw-drop-shadow: ; --tw-backdrop-blur: ; --tw-backdrop-brightness: ; --tw-backdrop-contrast: ; --tw-backdrop-grayscale: ; --tw-backdrop-hue-rotate: ; --tw-backdrop-invert: ; --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; --tw-contain-size: ; --tw-contain-layout: ; --tw-contain-paint: ; --tw-contain-style: ; } /* ! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com */ /* 1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) 2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) */ *, ::before, ::after { box-sizing: border-box; /* 1 */ border-width: 0; /* 2 */ border-style: solid; /* 2 */ border-color: #e5e7eb; /* 2 */ } ::before, ::after { --tw-content: ''; } /* 1. Use a consistent sensible line-height in all browsers. 2. Prevent adjustments of font size after orientation changes in iOS. 3. Use a more readable tab size. 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. 7. Disable tap highlights on iOS */ html, :host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ -moz-tab-size: 4; /* 3 */ -o-tab-size: 4; tab-size: 4; /* 3 */ font-family: Inter, system-ui, -apple-system, sans-serif; /* 4 */ font-feature-settings: normal; /* 5 */ font-variation-settings: normal; /* 6 */ -webkit-tap-highlight-color: transparent; /* 7 */ } /* 1. Remove the margin in all browsers. 2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. */ body { margin: 0; /* 1 */ line-height: inherit; /* 2 */ } /* 1. Add the correct height in Firefox. 2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) 3. Ensure horizontal rules are visible by default. */ hr { height: 0; /* 1 */ color: inherit; /* 2 */ border-top-width: 1px; /* 3 */ } /* Add the correct text decoration in Chrome, Edge, and Safari. */ abbr:where([title]) { -webkit-text-decoration: underline dotted; text-decoration: underline dotted; } /* Remove the default font size and weight for headings. */ h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit; } /* Reset links to optimize for opt-in styling instead of opt-out. */ a { color: inherit; text-decoration: inherit; } /* Add the correct font weight in Edge and Safari. */ b, strong { font-weight: bolder; } /* 1. Use the user's configured `mono` font-family by default. 2. Use the user's configured `mono` font-feature-settings by default. 3. Use the user's configured `mono` font-variation-settings by default. 4. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp, pre { font-family: JetBrains Mono, monospace; /* 1 */ font-feature-settings: normal; /* 2 */ font-variation-settings: normal; /* 3 */ font-size: 1em; /* 4 */ } /* Add the correct font size in all browsers. */ small { font-size: 80%; } /* Prevent `sub` and `sup` elements from affecting the line height in all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* 1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) 2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) 3. Remove gaps between table borders by default. */ table { text-indent: 0; /* 1 */ border-color: inherit; /* 2 */ border-collapse: collapse; /* 3 */ } /* 1. Change the font styles in all browsers. 2. Remove the margin in Firefox and Safari. 3. Remove default padding in all browsers. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-feature-settings: inherit; /* 1 */ font-variation-settings: inherit; /* 1 */ font-size: 100%; /* 1 */ font-weight: inherit; /* 1 */ line-height: inherit; /* 1 */ letter-spacing: inherit; /* 1 */ color: inherit; /* 1 */ margin: 0; /* 2 */ padding: 0; /* 3 */ } /* Remove the inheritance of text transform in Edge and Firefox. */ button, select { text-transform: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Remove default button styles. */ button, input:where([type='button']), input:where([type='reset']), input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; /* 2 */ background-image: none; /* 2 */ } /* Use the modern Firefox focus style for all focusable elements. */ :-moz-focusring { outline: auto; } /* Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) */ :-moz-ui-invalid { box-shadow: none; } /* Add the correct vertical alignment in Chrome and Firefox. */ progress { vertical-align: baseline; } /* Correct the cursor style of increment and decrement buttons in Safari. */ ::-webkit-inner-spin-button, ::-webkit-outer-spin-button { height: auto; } /* 1. Correct the odd appearance in Chrome and Safari. 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /* Remove the inner padding in Chrome and Safari on macOS. */ ::-webkit-search-decoration { -webkit-appearance: none; } /* 1. Correct the inability to style clickable types in iOS and Safari. 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Add the correct display in Chrome and Safari. */ summary { display: list-item; } /* Removes the default spacing and border for appropriate elements. */ blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre { margin: 0; } fieldset { margin: 0; padding: 0; } legend { padding: 0; } ol, ul, menu { list-style: none; margin: 0; padding: 0; } /* Reset default styling for dialogs. */ dialog { padding: 0; } /* Prevent resizing textareas horizontally by default. */ textarea { resize: vertical; } /* 1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) 2. Set the default placeholder color to the user's configured gray 400 color. */ input::-moz-placeholder, textarea::-moz-placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } input::placeholder, textarea::placeholder { opacity: 1; /* 1 */ color: #9ca3af; /* 2 */ } /* Set the default cursor for buttons. */ button, [role="button"] { cursor: pointer; } /* Make sure disabled buttons don't get the pointer cursor. */ :disabled { cursor: default; } /* 1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) 2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) This can trigger a poorly considered lint error in some tools but is included by design. */ img, svg, video, canvas, audio, iframe, embed, object { display: block; /* 1 */ vertical-align: middle; /* 2 */ } /* Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) */ img, video { max-width: 100%; height: auto; } /* Make elements with the HTML hidden attribute stay hidden by default */ [hidden]:where(:not([hidden="until-found"])) { display: none; } :root { --bottom-nav-height: 56px; --font-wordmark: "Fraunces", Georgia, "Times New Roman", serif; /* Core palette (background/foreground/primary/card/border/sidebar/status) now comes from the shared ds-shell.css + ds-tokens.css as hsl(var(--x)). */ /* Charts & visualization (app-specific, oklch) */ --chart-1: 0.52 0.18 250; --chart-2: 0.55 0.16 160; --chart-3: 0.6 0.18 30; --chart-4: 0.58 0.2 305; --chart-5: 0.62 0.19 85; /* Sidebar icon states (app-specific) */ --sidebar-icon-active: rgba(255, 255, 255, 0.95); --sidebar-icon-idle: rgba(255, 255, 255, 0.5); /* ─── App-specific accent colors ─────────────────────────────────────────── */ --app-documents: 0.52 0.2 250; --app-sheets: 0.55 0.19 160; --app-presentations: 0.62 0.22 35; --app-notes: 0.68 0.19 70; --app-tasks: 0.58 0.24 12; --app-calendar: 0.58 0.18 220; --app-chat: 0.54 0.22 290; --app-projects: 0.52 0.22 270; --app-activity: 0.58 0.04 264; --app-people: 0.58 0.18 195; /* ─── Role & status badge colors ─────────────────────────────────────────── */ --badge-owner: 0.38 0.18 250; --badge-owner-foreground: 1 0 0; --badge-admin: 0.38 0.22 12; --badge-admin-foreground: 1 0 0; --badge-member: 0.34 0.16 140; --badge-member-foreground: 1 0 0; --badge-viewer: 0.34 0.06 264; --badge-viewer-foreground: 1 0 0; /* ─── Project palette (8 colors for project selection) ────────────────────────────────── */ --project-indigo: 0.52 0.18 250; --project-blue: 0.55 0.2 260; --project-teal: 0.55 0.19 200; --project-green: 0.65 0.16 140; --project-yellow: 0.7 0.18 110; --project-orange: 0.62 0.22 50; --project-red: 0.58 0.24 12; --project-pink: 0.6 0.2 320; /* ─── Shadow tokens (elevation system) ─────────────────────────────────────── */ --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.05); --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.08), 0 0 0 1px rgba(0, 0, 0, 0.04); --shadow-elevated: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); --shadow-popover: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); /* ─── Transition defaults (opacity-only, never transform) ──────────────────── */ --transition-smooth: opacity 200ms ease; --transition-quick: opacity 150ms ease; /* ─── Authoritative motion spec variables ────────────────────────────────── */ --transition-fast: 150ms ease; /* chevrons, toggles, show/hide fades */ --transition-base: 200ms ease-out; /* expand/collapse sections */ --transition-fill: 300ms ease-out; /* progress bar / gauge fills */ --event-color-default: oklch(0.52 0.18 250); /* ─── Full-value color aliases (for use in color-mix without nested oklch()) ── */ --color-destructive: hsl(var(--destructive)); } *{ border-color: hsl(var(--border)); } body{ background-color: hsl(var(--background)); color: hsl(var(--foreground)); font-family: "Inter", system-ui, -apple-system, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ─── Mobile font size: minimum 16px body to pass accessibility requirements ─ */ @media (max-width: 767px) { body { font-size: 1rem; /* 16px */ } } h1, h2, h3, h4, h5, h6 { font-family: "Inter", system-ui, -apple-system, sans-serif; font-weight: 600; } .container{ width: 100%; margin-right: auto; margin-left: auto; padding-right: 2rem; padding-left: 2rem; } @media (min-width: 1400px){ .container{ max-width: 1400px; } } .prose{ color: var(--tw-prose-body); max-width: 65ch; } .prose :where(p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where([class~="lead"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-lead); font-size: 1.25em; line-height: 1.6; margin-top: 1.2em; margin-bottom: 1.2em; } .prose :where(a):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-links); text-decoration: underline; font-weight: 500; } .prose :where(strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-bold); font-weight: 600; } .prose :where(a strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(blockquote strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(thead th strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: decimal; margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } .prose :where(ol[type="A"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-alpha; } .prose :where(ol[type="a"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-alpha; } .prose :where(ol[type="A" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-alpha; } .prose :where(ol[type="a" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-alpha; } .prose :where(ol[type="I"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-roman; } .prose :where(ol[type="i"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-roman; } .prose :where(ol[type="I" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: upper-roman; } .prose :where(ol[type="i" s]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: lower-roman; } .prose :where(ol[type="1"]):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: decimal; } .prose :where(ul):not(:where([class~="not-prose"],[class~="not-prose"] *)){ list-style-type: disc; margin-top: 1.25em; margin-bottom: 1.25em; padding-left: 1.625em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{ font-weight: 400; color: var(--tw-prose-counters); } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *))::marker{ color: var(--tw-prose-bullets); } .prose :where(dt):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.25em; } .prose :where(hr):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-color: var(--tw-prose-hr); border-top-width: 1px; margin-top: 3em; margin-bottom: 3em; } .prose :where(blockquote):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 500; font-style: italic; color: var(--tw-prose-quotes); border-left-width: 0.25rem; border-left-color: var(--tw-prose-quote-borders); quotes: "\201C""\201D""\2018""\2019"; margin-top: 1.6em; margin-bottom: 1.6em; padding-left: 1em; } .prose :where(blockquote p:first-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ content: open-quote; } .prose :where(blockquote p:last-of-type):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ content: close-quote; } .prose :where(h1):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 800; font-size: 2.25em; margin-top: 0; margin-bottom: 0.8888889em; line-height: 1.1111111; } .prose :where(h1 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 900; color: inherit; } .prose :where(h2):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 700; font-size: 1.5em; margin-top: 2em; margin-bottom: 1em; line-height: 1.3333333; } .prose :where(h2 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 800; color: inherit; } .prose :where(h3):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; font-size: 1.25em; margin-top: 1.6em; margin-bottom: 0.6em; line-height: 1.6; } .prose :where(h3 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; color: inherit; } .prose :where(h4):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; margin-top: 1.5em; margin-bottom: 0.5em; line-height: 1.5; } .prose :where(h4 strong):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 700; color: inherit; } .prose :where(img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 2em; margin-bottom: 2em; } .prose :where(picture):not(:where([class~="not-prose"],[class~="not-prose"] *)){ display: block; margin-top: 2em; margin-bottom: 2em; } .prose :where(kbd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ font-weight: 500; font-family: inherit; color: var(--tw-prose-kbd); box-shadow: 0 0 0 1px rgb(var(--tw-prose-kbd-shadows) / 10%), 0 3px 0 rgb(var(--tw-prose-kbd-shadows) / 10%); font-size: 0.875em; border-radius: 0.3125rem; padding-top: 0.1875em; padding-right: 0.375em; padding-bottom: 0.1875em; padding-left: 0.375em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-code); font-weight: 600; font-size: 0.875em; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ content: "`"; } .prose :where(code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ content: "`"; } .prose :where(a code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(h1 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(h2 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; font-size: 0.875em; } .prose :where(h3 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; font-size: 0.9em; } .prose :where(h4 code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(blockquote code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(thead th code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: inherit; } .prose :where(pre):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-pre-code); background-color: var(--tw-prose-pre-bg); overflow-x: auto; font-weight: 400; font-size: 0.875em; line-height: 1.7142857; margin-top: 1.7142857em; margin-bottom: 1.7142857em; border-radius: 0.375rem; padding-top: 0.8571429em; padding-right: 1.1428571em; padding-bottom: 0.8571429em; padding-left: 1.1428571em; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *)){ background-color: transparent; border-width: 0; border-radius: 0; padding: 0; font-weight: inherit; color: inherit; font-size: inherit; font-family: inherit; line-height: inherit; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::before{ content: none; } .prose :where(pre code):not(:where([class~="not-prose"],[class~="not-prose"] *))::after{ content: none; } .prose :where(table):not(:where([class~="not-prose"],[class~="not-prose"] *)){ width: 100%; table-layout: auto; text-align: left; margin-top: 2em; margin-bottom: 2em; font-size: 0.875em; line-height: 1.7142857; } .prose :where(thead):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-bottom-width: 1px; border-bottom-color: var(--tw-prose-th-borders); } .prose :where(thead th):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-headings); font-weight: 600; vertical-align: bottom; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; } .prose :where(tbody tr):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-bottom-width: 1px; border-bottom-color: var(--tw-prose-td-borders); } .prose :where(tbody tr:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-bottom-width: 0; } .prose :where(tbody td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ vertical-align: baseline; } .prose :where(tfoot):not(:where([class~="not-prose"],[class~="not-prose"] *)){ border-top-width: 1px; border-top-color: var(--tw-prose-th-borders); } .prose :where(tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ vertical-align: top; } .prose :where(figure > *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; margin-bottom: 0; } .prose :where(figcaption):not(:where([class~="not-prose"],[class~="not-prose"] *)){ color: var(--tw-prose-captions); font-size: 0.875em; line-height: 1.4285714; margin-top: 0.8571429em; } .prose{ --tw-prose-body: #374151; --tw-prose-headings: #111827; --tw-prose-lead: #4b5563; --tw-prose-links: #111827; --tw-prose-bold: #111827; --tw-prose-counters: #6b7280; --tw-prose-bullets: #d1d5db; --tw-prose-hr: #e5e7eb; --tw-prose-quotes: #111827; --tw-prose-quote-borders: #e5e7eb; --tw-prose-captions: #6b7280; --tw-prose-kbd: #111827; --tw-prose-kbd-shadows: 17 24 39; --tw-prose-code: #111827; --tw-prose-pre-code: #e5e7eb; --tw-prose-pre-bg: #1f2937; --tw-prose-th-borders: #d1d5db; --tw-prose-td-borders: #e5e7eb; --tw-prose-invert-body: #d1d5db; --tw-prose-invert-headings: #fff; --tw-prose-invert-lead: #9ca3af; --tw-prose-invert-links: #fff; --tw-prose-invert-bold: #fff; --tw-prose-invert-counters: #9ca3af; --tw-prose-invert-bullets: #4b5563; --tw-prose-invert-hr: #374151; --tw-prose-invert-quotes: #f3f4f6; --tw-prose-invert-quote-borders: #374151; --tw-prose-invert-captions: #9ca3af; --tw-prose-invert-kbd: #fff; --tw-prose-invert-kbd-shadows: 255 255 255; --tw-prose-invert-code: #fff; --tw-prose-invert-pre-code: #d1d5db; --tw-prose-invert-pre-bg: rgb(0 0 0 / 50%); --tw-prose-invert-th-borders: #4b5563; --tw-prose-invert-td-borders: #374151; font-size: 1rem; line-height: 1.75; } .prose :where(picture > img):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; margin-bottom: 0; } .prose :where(video):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 2em; margin-bottom: 2em; } .prose :where(li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.5em; margin-bottom: 0.5em; } .prose :where(ol > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-left: 0.375em; } .prose :where(ul > li):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-left: 0.375em; } .prose :where(.prose > ul > li p):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(.prose > ul > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; } .prose :where(.prose > ul > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-bottom: 1.25em; } .prose :where(.prose > ol > li > *:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; } .prose :where(.prose > ol > li > *:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-bottom: 1.25em; } .prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.75em; margin-bottom: 0.75em; } .prose :where(dl):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 1.25em; margin-bottom: 1.25em; } .prose :where(dd):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0.5em; padding-left: 1.625em; } .prose :where(hr + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(h2 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(h3 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(h4 + *):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(thead th:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-left: 0; } .prose :where(thead th:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-right: 0; } .prose :where(tbody td, tfoot td):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-top: 0.5714286em; padding-right: 0.5714286em; padding-bottom: 0.5714286em; padding-left: 0.5714286em; } .prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-left: 0; } .prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ padding-right: 0; } .prose :where(figure):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 2em; margin-bottom: 2em; } .prose :where(.prose > :first-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-top: 0; } .prose :where(.prose > :last-child):not(:where([class~="not-prose"],[class~="not-prose"] *)){ margin-bottom: 0; } .sr-only{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .pointer-events-none{ pointer-events: none; } .pointer-events-auto{ pointer-events: auto; } .visible{ visibility: visible; } .invisible{ visibility: hidden; } .collapse{ visibility: collapse; } .static{ position: static; } .fixed{ position: fixed; } .absolute{ position: absolute; } .relative{ position: relative; } .sticky{ position: sticky; } .inset-0{ inset: 0px; } .inset-x-0{ left: 0px; right: 0px; } .inset-y-0{ top: 0px; bottom: 0px; } .-bottom-12{ bottom: -3rem; } .-left-1{ left: -0.25rem; } .-left-12{ left: -3rem; } .-right-1{ right: -0.25rem; } .-right-12{ right: -3rem; } .-top-0\.5{ top: -0.125rem; } .-top-1{ top: -0.25rem; } .-top-12{ top: -3rem; } .bottom-0{ bottom: 0px; } .bottom-4{ bottom: 1rem; } .bottom-full{ bottom: 100%; } .left-0{ left: 0px; } .left-0\.5{ left: 0.125rem; } .left-1\/2{ left: 50%; } .left-14{ left: 3.5rem; } .left-2{ left: 0.5rem; } .left-3{ left: 0.75rem; } .left-\[50\%\]{ left: 50%; } .right-0{ right: 0px; } .right-0\.5{ right: 0.125rem; } .right-1{ right: 0.25rem; } .right-2{ right: 0.5rem; } .right-3{ right: 0.75rem; } .right-3\.5{ right: 0.875rem; } .right-4{ right: 1rem; } .top-0{ top: 0px; } .top-1\.5{ top: 0.375rem; } .top-1\/2{ top: 50%; } .top-2{ top: 0.5rem; } .top-3\.5{ top: 0.875rem; } .top-4{ top: 1rem; } .top-7{ top: 1.75rem; } .top-8{ top: 2rem; } .top-\[12vh\]{ top: 12vh; } .top-\[1px\]{ top: 1px; } .top-\[50\%\]{ top: 50%; } .top-\[60\%\]{ top: 60%; } .top-full{ top: 100%; } .isolate{ isolation: isolate; } .z-0{ z-index: 0; } .z-10{ z-index: 10; } .z-20{ z-index: 20; } .z-30{ z-index: 30; } .z-40{ z-index: 40; } .z-50{ z-index: 50; } .z-\[1\]{ z-index: 1; } .z-\[5\]{ z-index: 5; } .z-\[9999\]{ z-index: 9999; } .col-start-2{ grid-column-start: 2; } .row-span-2{ grid-row: span 2 / span 2; } .row-start-1{ grid-row-start: 1; } .m-0{ margin: 0px; } .m-auto{ margin: auto; } .-mx-1{ margin-left: -0.25rem; margin-right: -0.25rem; } .mx-0\.5{ margin-left: 0.125rem; margin-right: 0.125rem; } .mx-2{ margin-left: 0.5rem; margin-right: 0.5rem; } .mx-3{ margin-left: 0.75rem; margin-right: 0.75rem; } .mx-3\.5{ margin-left: 0.875rem; margin-right: 0.875rem; } .mx-auto{ margin-left: auto; margin-right: auto; } .my-0\.5{ margin-top: 0.125rem; margin-bottom: 0.125rem; } .my-1{ margin-top: 0.25rem; margin-bottom: 0.25rem; } .my-2{ margin-top: 0.5rem; margin-bottom: 0.5rem; } .my-3{ margin-top: 0.75rem; margin-bottom: 0.75rem; } .-ml-1\.5{ margin-left: -0.375rem; } .-ml-4{ margin-left: -1rem; } .-mt-0\.5{ margin-top: -0.125rem; } .-mt-4{ margin-top: -1rem; } .mb-0\.5{ margin-bottom: 0.125rem; } .mb-1{ margin-bottom: 0.25rem; } .mb-1\.5{ margin-bottom: 0.375rem; } .mb-10{ margin-bottom: 2.5rem; } .mb-2{ margin-bottom: 0.5rem; } .mb-2\.5{ margin-bottom: 0.625rem; } .mb-3{ margin-bottom: 0.75rem; } .mb-4{ margin-bottom: 1rem; } .mb-5{ margin-bottom: 1.25rem; } .mb-6{ margin-bottom: 1.5rem; } .ml-0\.5{ margin-left: 0.125rem; } .ml-1{ margin-left: 0.25rem; } .ml-1\.5{ margin-left: 0.375rem; } .ml-2{ margin-left: 0.5rem; } .ml-auto{ margin-left: auto; } .mr-1{ margin-right: 0.25rem; } .mr-1\.5{ margin-right: 0.375rem; } .mr-2{ margin-right: 0.5rem; } .mr-auto{ margin-right: auto; } .mt-0\.5{ margin-top: 0.125rem; } .mt-1{ margin-top: 0.25rem; } .mt-1\.5{ margin-top: 0.375rem; } .mt-14{ margin-top: 3.5rem; } .mt-2{ margin-top: 0.5rem; } .mt-2\.5{ margin-top: 0.625rem; } .mt-3{ margin-top: 0.75rem; } .mt-4{ margin-top: 1rem; } .mt-5{ margin-top: 1.25rem; } .mt-6{ margin-top: 1.5rem; } .mt-8{ margin-top: 2rem; } .mt-auto{ margin-top: auto; } .line-clamp-1{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .block{ display: block; } .inline-block{ display: inline-block; } .inline{ display: inline; } .flex{ display: flex; } .inline-flex{ display: inline-flex; } .table{ display: table; } .table-caption{ display: table-caption; } .table-cell{ display: table-cell; } .table-row{ display: table-row; } .grid{ display: grid; } .hidden{ display: none; } .aspect-square{ aspect-ratio: 1 / 1; } .aspect-video{ aspect-ratio: 16 / 9; } .size-1\.5{ width: 0.375rem; height: 0.375rem; } .size-10{ width: 2.5rem; height: 2.5rem; } .size-11{ width: 2.75rem; height: 2.75rem; } .size-12{ width: 3rem; height: 3rem; } .size-14{ width: 3.5rem; height: 3.5rem; } .size-2{ width: 0.5rem; height: 0.5rem; } .size-2\.5{ width: 0.625rem; height: 0.625rem; } .size-3{ width: 0.75rem; height: 0.75rem; } .size-3\.5{ width: 0.875rem; height: 0.875rem; } .size-4{ width: 1rem; height: 1rem; } .size-5{ width: 1.25rem; height: 1.25rem; } .size-6{ width: 1.5rem; height: 1.5rem; } .size-7{ width: 1.75rem; height: 1.75rem; } .size-8{ width: 2rem; height: 2rem; } .size-9{ width: 2.25rem; height: 2.25rem; } .size-\[18px\]{ width: 18px; height: 18px; } .size-auto{ width: auto; height: auto; } .size-full{ width: 100%; height: 100%; } .h-0{ height: 0px; } .h-1{ height: 0.25rem; } .h-1\.5{ height: 0.375rem; } .h-10{ height: 2.5rem; } .h-12{ height: 3rem; } .h-14{ height: 3.5rem; } .h-16{ height: 4rem; } .h-2{ height: 0.5rem; } .h-2\.5{ height: 0.625rem; } .h-20{ height: 5rem; } .h-24{ height: 6rem; } .h-3{ height: 0.75rem; } .h-3\.5{ height: 0.875rem; } .h-4{ height: 1rem; } .h-40{ height: 10rem; } .h-44{ height: 11rem; } .h-48{ height: 12rem; } .h-5{ height: 1.25rem; } .h-6{ height: 1.5rem; } .h-7{ height: 1.75rem; } .h-8{ height: 2rem; } .h-9{ height: 2.25rem; } .h-\[1\.15rem\]{ height: 1.15rem; } .h-\[100dvh\]{ height: 100dvh; } .h-\[18px\]{ height: 18px; } .h-\[22px\]{ height: 22px; } .h-\[68px\]{ height: 68px; } .h-\[calc\(100\%-1px\)\]{ height: calc(100% - 1px); } .h-\[var\(--radix-navigation-menu-viewport-height\)\]{ height: var(--radix-navigation-menu-viewport-height); } .h-\[var\(--radix-select-trigger-height\)\]{ height: var(--radix-select-trigger-height); } .h-auto{ height: auto; } .h-full{ height: 100%; } .h-px{ height: 1px; } .h-screen{ height: 100vh; } .h-svh{ height: 100svh; } .max-h-36{ max-height: 9rem; } .max-h-48{ max-height: 12rem; } .max-h-\[300px\]{ max-height: 300px; } .min-h-0{ min-height: 0px; } .min-h-16{ min-height: 4rem; } .min-h-4{ min-height: 1rem; } .min-h-8{ min-height: 2rem; } .min-h-\[100dvh\]{ min-height: 100dvh; } .min-h-\[120px\]{ min-height: 120px; } .min-h-\[136px\]{ min-height: 136px; } .min-h-\[88px\]{ min-height: 88px; } .min-h-screen{ min-height: 100vh; } .min-h-svh{ min-height: 100svh; } .w-0{ width: 0px; } .w-1{ width: 0.25rem; } .w-1\.5{ width: 0.375rem; } .w-1\/4{ width: 25%; } .w-1\/5{ width: 20%; } .w-10{ width: 2.5rem; } .w-12{ width: 3rem; } .w-14{ width: 3.5rem; } .w-16{ width: 4rem; } .w-2{ width: 0.5rem; } .w-2\.5{ width: 0.625rem; } .w-2\/3{ width: 66.666667%; } .w-20{ width: 5rem; } .w-24{ width: 6rem; } .w-28{ width: 7rem; } .w-3{ width: 0.75rem; } .w-3\.5{ width: 0.875rem; } .w-3\/4{ width: 75%; } .w-32{ width: 8rem; } .w-36{ width: 9rem; } .w-4{ width: 1rem; } .w-4\/5{ width: 80%; } .w-40{ width: 10rem; } .w-44{ width: 11rem; } .w-5{ width: 1.25rem; } .w-52{ width: 13rem; } .w-56{ width: 14rem; } .w-6{ width: 1.5rem; } .w-60{ width: 15rem; } .w-64{ width: 16rem; } .w-7{ width: 1.75rem; } .w-72{ width: 18rem; } .w-8{ width: 2rem; } .w-80{ width: 20rem; } .w-9{ width: 2.25rem; } .w-\[100px\]{ width: 100px; } .w-\[170px\]{ width: 170px; } .w-\[18px\]{ width: 18px; } .w-\[22px\]{ width: 22px; } .w-\[80px\]{ width: 80px; } .w-auto{ width: auto; } .w-fit{ width: -moz-fit-content; width: fit-content; } .w-full{ width: 100%; } .w-max{ width: -moz-max-content; width: max-content; } .w-px{ width: 1px; } .min-w-0{ min-width: 0px; } .min-w-10{ min-width: 2.5rem; } .min-w-5{ min-width: 1.25rem; } .min-w-8{ min-width: 2rem; } .min-w-9{ min-width: 2.25rem; } .min-w-\[1\.25rem\]{ min-width: 1.25rem; } .min-w-\[120px\]{ min-width: 120px; } .min-w-\[12rem\]{ min-width: 12rem; } .min-w-\[140px\]{ min-width: 140px; } .min-w-\[160px\]{ min-width: 160px; } .min-w-\[200px\]{ min-width: 200px; } .min-w-\[70px\]{ min-width: 70px; } .min-w-\[8rem\]{ min-width: 8rem; } .min-w-\[var\(--radix-select-trigger-width\)\]{ min-width: var(--radix-select-trigger-width); } .max-w-2xl{ max-width: 42rem; } .max-w-3xl{ max-width: 48rem; } .max-w-4xl{ max-width: 56rem; } .max-w-5xl{ max-width: 64rem; } .max-w-6xl{ max-width: 72rem; } .max-w-\[11rem\]{ max-width: 11rem; } .max-w-\[140px\]{ max-width: 140px; } .max-w-\[260px\]{ max-width: 260px; } .max-w-\[280px\]{ max-width: 280px; } .max-w-\[440px\]{ max-width: 440px; } .max-w-\[calc\(100\%-2rem\)\]{ max-width: calc(100% - 2rem); } .max-w-full{ max-width: 100%; } .max-w-max{ max-width: -moz-max-content; max-width: max-content; } .max-w-md{ max-width: 28rem; } .max-w-none{ max-width: none; } .max-w-sm{ max-width: 24rem; } .max-w-xl{ max-width: 36rem; } .flex-1{ flex: 1 1 0%; } .flex-none{ flex: none; } .flex-shrink-0{ flex-shrink: 0; } .shrink-0{ flex-shrink: 0; } .grow{ flex-grow: 1; } .grow-0{ flex-grow: 0; } .basis-full{ flex-basis: 100%; } .caption-bottom{ caption-side: bottom; } .border-collapse{ border-collapse: collapse; } .-translate-x-1\/2{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-full{ --tw-translate-x: -100%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-x-px{ --tw-translate-x: -1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\.5{ --tw-translate-y: -0.375rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .-translate-y-1\/2{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-0{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-\[-50\%\]{ --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-x-px{ --tw-translate-x: 1px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-0\.5{ --tw-translate-y: 0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[-50\%\]{ --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .translate-y-\[calc\(-50\%_-_2px\)\]{ --tw-translate-y: calc(-50% - 2px); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-45{ --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .rotate-90{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .transform{ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } @keyframes bounce{ 0%, 100%{ transform: translateY(-25%); animation-timing-function: cubic-bezier(0.8,0,1,1); } 50%{ transform: none; animation-timing-function: cubic-bezier(0,0,0.2,1); } } .animate-bounce{ animation: bounce 1s infinite; } @keyframes ping{ 75%, 100%{ transform: scale(2); opacity: 0; } } .animate-ping{ animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite; } @keyframes pulse{ 50%{ opacity: .5; } } .animate-pulse{ animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; } @keyframes spin{ to{ transform: rotate(360deg); } } .animate-spin{ animation: spin 1s linear infinite; } .cursor-default{ cursor: default; } .cursor-pointer{ cursor: pointer; } .touch-none{ touch-action: none; } .select-none{ -webkit-user-select: none; -moz-user-select: none; user-select: none; } .resize-none{ resize: none; } .resize{ resize: both; } .scroll-my-1{ scroll-margin-top: 0.25rem; scroll-margin-bottom: 0.25rem; } .scroll-py-1{ scroll-padding-top: 0.25rem; scroll-padding-bottom: 0.25rem; } .list-none{ list-style-type: none; } .auto-rows-min{ grid-auto-rows: min-content; } .grid-cols-1{ grid-template-columns: repeat(1, minmax(0, 1fr)); } .grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-cols-6{ grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid-cols-7{ grid-template-columns: repeat(7, minmax(0, 1fr)); } .grid-cols-\[0_1fr\]{ grid-template-columns: 0 1fr; } .grid-rows-\[auto_auto\]{ grid-template-rows: auto auto; } .flex-row{ flex-direction: row; } .flex-col{ flex-direction: column; } .flex-col-reverse{ flex-direction: column-reverse; } .flex-wrap{ flex-wrap: wrap; } .items-start{ align-items: flex-start; } .items-end{ align-items: flex-end; } .items-center{ align-items: center; } .items-baseline{ align-items: baseline; } .items-stretch{ align-items: stretch; } .justify-end{ justify-content: flex-end; } .justify-center{ justify-content: center; } .justify-between{ justify-content: space-between; } .justify-items-start{ justify-items: start; } .gap-0{ gap: 0px; } .gap-0\.5{ gap: 0.125rem; } .gap-1{ gap: 0.25rem; } .gap-1\.5{ gap: 0.375rem; } .gap-12{ gap: 3rem; } .gap-2{ gap: 0.5rem; } .gap-2\.5{ gap: 0.625rem; } .gap-3{ gap: 0.75rem; } .gap-4{ gap: 1rem; } .gap-5{ gap: 1.25rem; } .gap-6{ gap: 1.5rem; } .gap-8{ gap: 2rem; } .gap-x-4{ -moz-column-gap: 1rem; column-gap: 1rem; } .gap-x-5{ -moz-column-gap: 1.25rem; column-gap: 1.25rem; } .gap-x-8{ -moz-column-gap: 2rem; column-gap: 2rem; } .gap-y-0\.5{ row-gap: 0.125rem; } .gap-y-1{ row-gap: 0.25rem; } .gap-y-2{ row-gap: 0.5rem; } .gap-y-4{ row-gap: 1rem; } .-space-x-1\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-x-reverse: 0; margin-right: calc(-0.375rem * var(--tw-space-x-reverse)); margin-left: calc(-0.375rem * calc(1 - var(--tw-space-x-reverse))); } .space-y-0\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.125rem * var(--tw-space-y-reverse)); } .space-y-1 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.25rem * var(--tw-space-y-reverse)); } .space-y-1\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.375rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.375rem * var(--tw-space-y-reverse)); } .space-y-2 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)); } .space-y-2\.5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.625rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.625rem * var(--tw-space-y-reverse)); } .space-y-3 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.75rem * var(--tw-space-y-reverse)); } .space-y-4 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)); } .space-y-5 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1.25rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.25rem * var(--tw-space-y-reverse)); } .space-y-6 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(1.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1.5rem * var(--tw-space-y-reverse)); } .space-y-8 > :not([hidden]) ~ :not([hidden]){ --tw-space-y-reverse: 0; margin-top: calc(2rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(2rem * var(--tw-space-y-reverse)); } .divide-x > :not([hidden]) ~ :not([hidden]){ --tw-divide-x-reverse: 0; border-right-width: calc(1px * var(--tw-divide-x-reverse)); border-left-width: calc(1px * calc(1 - var(--tw-divide-x-reverse))); } .divide-y > :not([hidden]) ~ :not([hidden]){ --tw-divide-y-reverse: 0; border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse))); border-bottom-width: calc(1px * var(--tw-divide-y-reverse)); } .divide-border > :not([hidden]) ~ :not([hidden]){ border-color: hsl(var(--border)); } .self-start{ align-self: flex-start; } .self-center{ align-self: center; } .justify-self-end{ justify-self: end; } .overflow-auto{ overflow: auto; } .overflow-hidden{ overflow: hidden; } .overflow-x-auto{ overflow-x: auto; } .overflow-y-auto{ overflow-y: auto; } .overflow-x-hidden{ overflow-x: hidden; } .truncate{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .whitespace-nowrap{ white-space: nowrap; } .whitespace-pre-wrap{ white-space: pre-wrap; } .text-balance{ text-wrap: balance; } .text-pretty{ text-wrap: pretty; } .break-words{ overflow-wrap: break-word; } .rounded{ border-radius: 0.25rem; } .rounded-2xl{ border-radius: 1rem; } .rounded-\[2px\]{ border-radius: 2px; } .rounded-\[4px\]{ border-radius: 4px; } .rounded-\[inherit\]{ border-radius: inherit; } .rounded-full{ border-radius: 9999px; } .rounded-lg{ border-radius: var(--radius); } .rounded-md{ border-radius: calc(var(--radius) - 2px); } .rounded-none{ border-radius: 0px; } .rounded-sm{ border-radius: calc(var(--radius) - 4px); } .rounded-xl{ border-radius: 0.75rem; } .rounded-l-md{ border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .rounded-r-md{ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .rounded-t-lg{ border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .rounded-tl-sm{ border-top-left-radius: calc(var(--radius) - 4px); } .border{ border-width: 1px; } .border-0{ border-width: 0px; } .border-2{ border-width: 2px; } .border-\[1\.5px\]{ border-width: 1.5px; } .border-\[5px\]{ border-width: 5px; } .border-y{ border-top-width: 1px; border-bottom-width: 1px; } .border-b{ border-bottom-width: 1px; } .border-l{ border-left-width: 1px; } .border-l-4{ border-left-width: 4px; } .border-r{ border-right-width: 1px; } .border-t{ border-top-width: 1px; } .border-dashed{ border-style: dashed; } .border-border{ border-color: hsl(var(--border)); } .border-border\/40{ border-color: hsl(var(--border) / 0.4); } .border-border\/50{ border-color: hsl(var(--border) / 0.5); } .border-border\/60{ border-color: hsl(var(--border) / 0.6); } .border-input{ border-color: hsl(var(--input)); } .border-muted{ border-color: hsl(var(--muted)); } .border-primary{ border-color: hsl(var(--primary)); } .border-primary\/20{ border-color: hsl(var(--primary) / 0.2); } .border-primary\/40{ border-color: hsl(var(--primary) / 0.4); } .border-sidebar-border{ border-color: hsl(var(--sidebar-border)); } .border-transparent{ border-color: transparent; } .border-l-destructive{ border-left-color: hsl(var(--destructive)); } .border-l-primary{ border-left-color: hsl(var(--primary)); } .border-l-success{ --tw-border-opacity: 1; border-left-color: hsl(var(--success) / var(--tw-border-opacity, 1)); } .border-l-transparent{ border-left-color: transparent; } .border-l-warning{ --tw-border-opacity: 1; border-left-color: hsl(var(--warning) / var(--tw-border-opacity, 1)); } .border-t-muted-foreground{ border-top-color: hsl(var(--muted-foreground)); } .border-t-transparent{ border-top-color: transparent; } .bg-accent{ background-color: hsl(var(--accent)); } .bg-background{ background-color: hsl(var(--background)); } .bg-black\/40{ background-color: rgb(0 0 0 / 0.4); } .bg-black\/50{ background-color: rgb(0 0 0 / 0.5); } .bg-border{ background-color: hsl(var(--border)); } .bg-card{ background-color: hsl(var(--card)); } .bg-card\/80{ background-color: hsl(var(--card) / 0.8); } .bg-danger{ --tw-bg-opacity: 1; background-color: hsl(var(--danger) / var(--tw-bg-opacity, 1)); } .bg-destructive{ background-color: hsl(var(--destructive)); } .bg-destructive\/10{ background-color: hsl(var(--destructive) / 0.1); } .bg-foreground{ background-color: hsl(var(--foreground)); } .bg-info{ --tw-bg-opacity: 1; background-color: hsl(var(--info) / var(--tw-bg-opacity, 1)); } .bg-muted{ background-color: hsl(var(--muted)); } .bg-muted-foreground{ background-color: hsl(var(--muted-foreground)); } .bg-popover{ background-color: hsl(var(--popover)); } .bg-primary{ background-color: hsl(var(--primary)); } .bg-secondary{ background-color: hsl(var(--secondary)); } .bg-sidebar{ background-color: hsl(var(--sidebar)); } .bg-sidebar-border{ background-color: hsl(var(--sidebar-border)); } .bg-sidebar-primary{ background-color: hsl(var(--sidebar-primary)); } .bg-sidebar-primary\/15{ background-color: hsl(var(--sidebar-primary) / 0.15); } .bg-success{ --tw-bg-opacity: 1; background-color: hsl(var(--success) / var(--tw-bg-opacity, 1)); } .bg-tint-danger{ background-color: color-mix(in srgb, hsl(var(--danger)) 12%, hsl(var(--card))); } .bg-tint-destructive{ background-color: color-mix(in srgb, hsl(var(--destructive)) 12%, hsl(var(--card))); } .bg-tint-destructive-strong{ background-color: color-mix(in srgb, hsl(var(--destructive)) 18%, hsl(var(--card))); } .bg-tint-info{ background-color: color-mix(in srgb, hsl(var(--info)) 12%, hsl(var(--card))); } .bg-tint-primary{ background-color: color-mix(in srgb, hsl(var(--primary)) 12%, hsl(var(--card))); } .bg-tint-primary-strong{ background-color: color-mix(in srgb, hsl(var(--primary)) 18%, hsl(var(--card))); } .bg-tint-success{ background-color: color-mix(in srgb, hsl(var(--success)) 12%, hsl(var(--card))); } .bg-tint-success-strong{ background-color: color-mix(in srgb, hsl(var(--success)) 18%, hsl(var(--card))); } .bg-tint-warning{ background-color: color-mix(in srgb, hsl(var(--warning)) 14%, hsl(var(--card))); } .bg-tint-warning-strong{ background-color: color-mix(in srgb, hsl(var(--warning)) 20%, hsl(var(--card))); } .bg-tint-wash{ background-color: color-mix(in srgb, hsl(var(--muted)) 40%, hsl(var(--card))); } .bg-tint-wash-strong{ background-color: color-mix(in srgb, hsl(var(--muted)) 65%, hsl(var(--card))); } .bg-transparent{ background-color: transparent; } .bg-warning{ --tw-bg-opacity: 1; background-color: hsl(var(--warning) / var(--tw-bg-opacity, 1)); } .fill-current{ fill: currentColor; } .fill-foreground{ fill: hsl(var(--foreground)); } .fill-muted-foreground{ fill: hsl(var(--muted-foreground)); } .fill-primary{ fill: hsl(var(--primary)); } .object-contain{ -o-object-fit: contain; object-fit: contain; } .p-0{ padding: 0px; } .p-1{ padding: 0.25rem; } .p-1\.5{ padding: 0.375rem; } .p-2{ padding: 0.5rem; } .p-3{ padding: 0.75rem; } .p-3\.5{ padding: 0.875rem; } .p-4{ padding: 1rem; } .p-5{ padding: 1.25rem; } .p-6{ padding: 1.5rem; } .p-8{ padding: 2rem; } .p-\[3px\]{ padding: 3px; } .p-px{ padding: 1px; } .px-1{ padding-left: 0.25rem; padding-right: 0.25rem; } .px-1\.5{ padding-left: 0.375rem; padding-right: 0.375rem; } .px-2{ padding-left: 0.5rem; padding-right: 0.5rem; } .px-2\.5{ padding-left: 0.625rem; padding-right: 0.625rem; } .px-3{ padding-left: 0.75rem; padding-right: 0.75rem; } .px-3\.5{ padding-left: 0.875rem; padding-right: 0.875rem; } .px-4{ padding-left: 1rem; padding-right: 1rem; } .px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .py-0\.5{ padding-top: 0.125rem; padding-bottom: 0.125rem; } .py-1{ padding-top: 0.25rem; padding-bottom: 0.25rem; } .py-1\.5{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .py-10{ padding-top: 2.5rem; padding-bottom: 2.5rem; } .py-16{ padding-top: 4rem; padding-bottom: 4rem; } .py-2{ padding-top: 0.5rem; padding-bottom: 0.5rem; } .py-2\.5{ padding-top: 0.625rem; padding-bottom: 0.625rem; } .py-20{ padding-top: 5rem; padding-bottom: 5rem; } .py-24{ padding-top: 6rem; padding-bottom: 6rem; } .py-3{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .py-4{ padding-top: 1rem; padding-bottom: 1rem; } .py-5{ padding-top: 1.25rem; padding-bottom: 1.25rem; } .py-6{ padding-top: 1.5rem; padding-bottom: 1.5rem; } .py-7{ padding-top: 1.75rem; padding-bottom: 1.75rem; } .py-8{ padding-top: 2rem; padding-bottom: 2rem; } .py-\[7px\]{ padding-top: 7px; padding-bottom: 7px; } .pb-0{ padding-bottom: 0px; } .pb-2{ padding-bottom: 0.5rem; } .pb-3{ padding-bottom: 0.75rem; } .pb-4{ padding-bottom: 1rem; } .pb-6{ padding-bottom: 1.5rem; } .pb-8{ padding-bottom: 2rem; } .pl-2{ padding-left: 0.5rem; } .pl-2\.5{ padding-left: 0.625rem; } .pl-4{ padding-left: 1rem; } .pl-6{ padding-left: 1.5rem; } .pl-8{ padding-left: 2rem; } .pl-9{ padding-left: 2.25rem; } .pl-\[100px\]{ padding-left: 100px; } .pr-1{ padding-right: 0.25rem; } .pr-10{ padding-right: 2.5rem; } .pr-2{ padding-right: 0.5rem; } .pr-2\.5{ padding-right: 0.625rem; } .pr-3{ padding-right: 0.75rem; } .pr-6{ padding-right: 1.5rem; } .pr-8{ padding-right: 2rem; } .pt-0{ padding-top: 0px; } .pt-0\.5{ padding-top: 0.125rem; } .pt-1{ padding-top: 0.25rem; } .pt-2{ padding-top: 0.5rem; } .pt-3{ padding-top: 0.75rem; } .pt-4{ padding-top: 1rem; } .text-left{ text-align: left; } .text-center{ text-align: center; } .text-right{ text-align: right; } .align-middle{ vertical-align: middle; } .font-mono{ font-family: JetBrains Mono, monospace; } .text-2xl{ font-size: 1.5rem; line-height: 2rem; } .text-3xl{ font-size: 1.875rem; line-height: 2.25rem; } .text-4xl{ font-size: 2.25rem; line-height: 2.5rem; } .text-\[10px\]{ font-size: 10px; } .text-\[11px\]{ font-size: 11px; } .text-\[13px\]{ font-size: 13px; } .text-\[15px\]{ font-size: 15px; } .text-\[8px\]{ font-size: 8px; } .text-\[9\.5px\]{ font-size: 9.5px; } .text-\[9px\]{ font-size: 9px; } .text-base{ font-size: 1rem; line-height: 1.5rem; } .text-lg{ font-size: 1.125rem; line-height: 1.75rem; } .text-sm{ font-size: 0.875rem; line-height: 1.25rem; } .text-xl{ font-size: 1.25rem; line-height: 1.75rem; } .text-xs{ font-size: 0.75rem; line-height: 1rem; } .font-bold{ font-weight: 700; } .font-medium{ font-weight: 500; } .font-normal{ font-weight: 400; } .font-semibold{ font-weight: 600; } .uppercase{ text-transform: uppercase; } .capitalize{ text-transform: capitalize; } .normal-case{ text-transform: none; } .italic{ font-style: italic; } .tabular-nums{ --tw-numeric-spacing: tabular-nums; font-variant-numeric: var(--tw-ordinal) var(--tw-slashed-zero) var(--tw-numeric-figure) var(--tw-numeric-spacing) var(--tw-numeric-fraction); } .leading-none{ line-height: 1; } .leading-relaxed{ line-height: 1.625; } .leading-snug{ line-height: 1.375; } .leading-tight{ line-height: 1.25; } .tracking-normal{ letter-spacing: 0em; } .tracking-tight{ letter-spacing: -0.025em; } .tracking-wide{ letter-spacing: 0.025em; } .tracking-wider{ letter-spacing: 0.05em; } .tracking-widest{ letter-spacing: 0.1em; } .text-accent-foreground{ color: hsl(var(--accent-foreground)); } .text-card-foreground{ color: hsl(var(--card-foreground)); } .text-current{ color: currentColor; } .text-danger{ --tw-text-opacity: 1; color: hsl(var(--danger) / var(--tw-text-opacity, 1)); } .text-destructive{ color: hsl(var(--destructive)); } .text-destructive-foreground{ color: hsl(var(--destructive-foreground)); } .text-foreground{ color: hsl(var(--foreground)); } .text-highlight{ color: hsl(var(--highlight, 35 85% 48%)); } .text-info{ --tw-text-opacity: 1; color: hsl(var(--info) / var(--tw-text-opacity, 1)); } .text-muted-foreground{ color: hsl(var(--muted-foreground)); } .text-muted-foreground\/50{ color: hsl(var(--muted-foreground) / 0.5); } .text-muted-foreground\/70{ color: hsl(var(--muted-foreground) / 0.7); } .text-popover-foreground{ color: hsl(var(--popover-foreground)); } .text-primary{ color: hsl(var(--primary)); } .text-primary-foreground{ color: hsl(var(--primary-foreground)); } .text-secondary{ color: hsl(var(--secondary)); } .text-secondary-foreground{ color: hsl(var(--secondary-foreground)); } .text-sidebar-foreground{ color: hsl(var(--sidebar-foreground)); } .text-sidebar-foreground\/60{ color: hsl(var(--sidebar-foreground) / 0.6); } .text-sidebar-foreground\/70{ color: hsl(var(--sidebar-foreground) / 0.7); } .text-sidebar-primary{ color: hsl(var(--sidebar-primary)); } .text-sidebar-primary-foreground{ color: hsl(var(--sidebar-primary-foreground)); } .text-success{ --tw-text-opacity: 1; color: hsl(var(--success) / var(--tw-text-opacity, 1)); } .text-warning{ --tw-text-opacity: 1; color: hsl(var(--warning) / var(--tw-text-opacity, 1)); } .text-white{ --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } .underline{ text-decoration-line: underline; } .line-through{ text-decoration-line: line-through; } .underline-offset-2{ text-underline-offset: 2px; } .underline-offset-4{ text-underline-offset: 4px; } .antialiased{ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } .accent-primary{ accent-color: hsl(var(--primary)); } .opacity-0{ opacity: 0; } .opacity-100{ opacity: 1; } .opacity-50{ opacity: 0.5; } .opacity-70{ opacity: 0.7; } .opacity-80{ opacity: 0.8; } .shadow{ --tw-shadow: var(--shadow); --tw-shadow-colored: var(--shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[0_0_0_1px_hsl\(var\(--sidebar-border\)\)\]{ --tw-shadow: 0 0 0 1px hsl(var(--sidebar-border)); --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-lg{ --tw-shadow: var(--shadow-lg); --tw-shadow-colored: var(--shadow-lg); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-md{ --tw-shadow: var(--shadow-md); --tw-shadow-colored: var(--shadow-md); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-none{ --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-sm{ --tw-shadow: var(--shadow-sm); --tw-shadow-colored: var(--shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-xl{ --tw-shadow: var(--shadow-xl); --tw-shadow-colored: var(--shadow-xl); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-xs{ --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .shadow-\[var\(--shadow-card\)\]{ --tw-shadow-color: var(--shadow-card); --tw-shadow: var(--tw-shadow-colored); } .outline-none{ outline: 2px solid transparent; outline-offset: 2px; } .outline{ outline-style: solid; } .ring{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-0{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-2{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .ring-inset{ --tw-ring-inset: inset; } .ring-card{ --tw-ring-color: hsl(var(--card)); } .ring-destructive{ --tw-ring-color: hsl(var(--destructive)); } .ring-foreground{ --tw-ring-color: hsl(var(--foreground)); } .ring-primary{ --tw-ring-color: hsl(var(--primary)); } .ring-ring{ --tw-ring-color: hsl(var(--ring)); } .ring-ring\/50{ --tw-ring-color: hsl(var(--ring) / 0.5); } .ring-offset-1{ --tw-ring-offset-width: 1px; } .ring-offset-2{ --tw-ring-offset-width: 2px; } .ring-offset-background{ --tw-ring-offset-color: hsl(var(--background)); } .blur{ --tw-blur: blur(8px); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .grayscale{ --tw-grayscale: grayscale(100%); filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .filter{ filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } .transition{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[color\2c box-shadow\]{ transition-property: color,box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[left\2c right\2c width\]{ transition-property: left,right,width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[margin\2c opacity\]{ transition-property: margin,opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[width\2c height\2c padding\]{ transition-property: width,height,padding; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-\[width\]{ transition-property: width; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-all{ transition-property: all; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-colors{ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-none{ transition-property: none; } .transition-opacity{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-shadow{ transition-property: box-shadow; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .transition-transform{ transition-property: transform; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .duration-100{ transition-duration: 100ms; } .duration-1000{ transition-duration: 1000ms; } .duration-150{ transition-duration: 150ms; } .duration-200{ transition-duration: 200ms; } .duration-300{ transition-duration: 300ms; } .ease-in-out{ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-linear{ transition-timing-function: linear; } .ease-out{ transition-timing-function: cubic-bezier(0, 0, 0.2, 1); } .\@container\/card-header{ container-type: inline-size; container-name: card-header; } @keyframes enter{ from{ opacity: var(--tw-enter-opacity, 1); transform: translate3d(var(--tw-enter-translate-x, 0), var(--tw-enter-translate-y, 0), 0) scale3d(var(--tw-enter-scale, 1), var(--tw-enter-scale, 1), var(--tw-enter-scale, 1)) rotate(var(--tw-enter-rotate, 0)); } } @keyframes exit{ to{ opacity: var(--tw-exit-opacity, 1); transform: translate3d(var(--tw-exit-translate-x, 0), var(--tw-exit-translate-y, 0), 0) scale3d(var(--tw-exit-scale, 1), var(--tw-exit-scale, 1), var(--tw-exit-scale, 1)) rotate(var(--tw-exit-rotate, 0)); } } .animate-in{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .fade-in{ --tw-enter-opacity: 0; } .duration-100{ animation-duration: 100ms; } .duration-1000{ animation-duration: 1000ms; } .duration-150{ animation-duration: 150ms; } .duration-200{ animation-duration: 200ms; } .duration-300{ animation-duration: 300ms; } .ease-in-out{ animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } .ease-linear{ animation-timing-function: linear; } .ease-out{ animation-timing-function: cubic-bezier(0, 0, 0.2, 1); } /* Tailwind v3 shim: shadcn ui/* (generated for Tailwind v4) use the * `outline-hidden` utility, which does not exist in Tailwind v3, so focused * inputs/dialogs fell back to the browser default blue focus ring. Define it. */ .outline-hidden { outline: 2px solid transparent; outline-offset: 2px; } /* ─── Bottom nav content padding — uses CSS variable for consistent height ── */ .bottom-nav-content { padding-bottom: var(--bottom-nav-height, 56px); } @media (min-width: 768px) { .bottom-nav-content { padding-bottom: 0; } } /* ─── Page/view entrance fade — opacity only, 200ms ease ─────────────────────── */ .app-fade-in { animation: fadeIn 200ms ease-in-out both; } .fade-in { opacity: 0; transition: opacity 200ms ease-in-out; } .fade-in.visible { opacity: 1; } /* ─── App layer visibility classes — opacity + pointer-events only ──────────── */ .app-visible { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity 200ms ease-in-out; } .app-hidden { opacity: 0; pointer-events: none; visibility: hidden; position: absolute; inset: 0; transition: opacity 200ms ease-in-out; } /* ─── Locked typography scale — no variations outside these utilities ────────── */ .text-label { font-size: 11px; line-height: 1.5; font-weight: 500; } .text-caption { font-size: 12px; line-height: 1.5; } .text-body-sm { font-size: 13px; line-height: 1.5; } .text-body { font-size: 14px; line-height: 1.6; } .text-body-md { font-size: 15px; line-height: 1.5; font-weight: 500; } /* ─── Intermediate emphasis weight ─────────────────────────────────────────── */ .text-medium { font-weight: 500; } .font-medium-emphasis { font-weight: 500; } .text-heading-sm { font-size: 16px; line-height: 1.4; font-weight: 600; } .text-heading { font-size: 18px; line-height: 1.3; font-weight: 600; letter-spacing: 0.01em; } .text-heading-lg { font-size: 20px; line-height: 1.3; font-weight: 700; letter-spacing: 0.015em; } .text-editor-title { font-size: 24px; font-weight: 600; line-height: 1.2; } /* ─── Canonical icon size utilities ─────────────────────────────────────────── */ .icon-xs { width: 12px; height: 12px; } .icon-sm { width: 16px; height: 16px; } .icon-md { width: 20px; height: 20px; } .icon-lg { width: 24px; height: 24px; } /* ─── Canonical badge sizing system ────────────────────────────────────────── */ /* Small badge: 24px height, tight padding */ .badge-sm{ display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; min-height: 24px; font-size: 12px; font-weight: 500; white-space: nowrap; } /* Medium badge: 32px height, standard padding */ .badge-md{ display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; min-height: 32px; font-size: 13px; font-weight: 600; white-space: nowrap; } /* Large badge: 40px height, spacious padding */ .badge-lg{ display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; min-height: 40px; font-size: 14px; font-weight: 600; white-space: nowrap; } /* ─── Role badge colors (token-based, WCAG AA contrast verified) ─────────────────────────── */ .badge-owner { background-color: oklch(var(--badge-owner) / 0.12); color: oklch(var(--badge-owner) / 1); border: 1px solid oklch(var(--badge-owner) / 0.35); transition: var(--transition-quick); /* --badge-owner L=0.38 indigo on near-white bg — passes WCAG AA 4.5:1 */ } .badge-owner:hover { background-color: oklch(var(--badge-owner) / 0.2); } .badge-admin { background-color: oklch(var(--badge-admin) / 0.12); color: oklch(var(--badge-admin) / 1); border: 1px solid oklch(var(--badge-admin) / 0.35); transition: var(--transition-quick); /* --badge-admin L=0.38 red on near-white bg — passes WCAG AA 4.5:1 */ } .badge-admin:hover { background-color: oklch(var(--badge-admin) / 0.2); } .badge-member { background-color: oklch(var(--badge-member) / 0.12); color: oklch(var(--badge-member) / 1); border: 1px solid oklch(var(--badge-member) / 0.35); transition: var(--transition-quick); /* --badge-member L=0.34 green on near-white bg — passes WCAG AA 4.5:1 */ } .badge-member:hover { background-color: oklch(var(--badge-member) / 0.2); } .badge-viewer { background-color: oklch(var(--badge-viewer) / 0.1); color: oklch(var(--badge-viewer) / 1); border: 1px solid oklch(var(--badge-viewer) / 0.3); transition: var(--transition-quick); /* --badge-viewer L=0.34 neutral on near-white bg — passes WCAG AA 4.5:1 */ } .badge-viewer:hover { background-color: oklch(var(--badge-viewer) / 0.16); } /* ─── Workspace file-type badge ramp (token-based, WCAG AA verified) ─────────── */ .file-badge{ display: inline-flex; align-items: center; justify-content: center; border-radius: 9999px; padding-left: 0.5rem; padding-right: 0.5rem; padding-top: 0.125rem; padding-bottom: 0.125rem; min-height: 24px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; white-space: nowrap; transition: var(--transition-quick); } .file-badge-doc { color: oklch(var(--file-type-doc)); background-color: oklch(var(--file-type-doc) / 0.12); border: 1px solid oklch(var(--file-type-doc) / 0.35); } .file-badge-sheet { color: oklch(var(--file-type-sheet)); background-color: oklch(var(--file-type-sheet) / 0.12); border: 1px solid oklch(var(--file-type-sheet) / 0.35); } .file-badge-slide { color: oklch(var(--file-type-slide)); background-color: oklch(var(--file-type-slide) / 0.12); border: 1px solid oklch(var(--file-type-slide) / 0.35); } .file-badge-image { color: oklch(var(--file-type-image)); background-color: oklch(var(--file-type-image) / 0.12); border: 1px solid oklch(var(--file-type-image) / 0.35); } .file-badge-pdf { color: oklch(var(--file-type-pdf)); background-color: oklch(var(--file-type-pdf) / 0.12); border: 1px solid oklch(var(--file-type-pdf) / 0.35); } .file-badge-archive { color: oklch(var(--file-type-archive)); background-color: oklch(var(--file-type-archive) / 0.12); border: 1px solid oklch(var(--file-type-archive) / 0.35); } .file-badge-other { color: oklch(var(--file-type-other)); background-color: oklch(var(--file-type-other) / 0.12); border: 1px solid oklch(var(--file-type-other) / 0.3); } /* ─── Workspace dropzone — dashed hairline well, ochre on drag-over ──────────── */ .file-dropzone { background-color: oklch(var(--file-dropzone-bg)); border: 1.5px dashed oklch(var(--file-dropzone-border)); transition: var(--transition-base); } .file-dropzone:hover { border-color: oklch(var(--file-dropzone-active-border)); } .file-dropzone.is-dragover { background-color: oklch(var(--file-dropzone-active-bg)); border-color: oklch(var(--file-dropzone-active-border)); } .file-dropzone:focus-within{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 2px; } /* ─── Workspace file list rows ───────────────────────────────────────────────── */ .file-row { transition: var(--transition-quick); } .file-row:hover { background-color: oklch(var(--file-row-hover)); } .file-row.is-selected { background-color: oklch(var(--file-row-selected)); } /* ─── Upload progress — width fills, 300ms (matches --transition-fill) ───────── */ .file-progress-track { background-color: oklch(var(--file-progress-track)); } .file-progress-fill { background-color: oklch(var(--file-progress-fill)); transition: width var(--transition-fill); } /* ─── Filter tab interactive states ────────────────────────────────────────────── */ .filter-tab-default{ border-radius: calc(var(--radius) - 2px); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-weight: 500; color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.5; transition: var(--transition-smooth); } .filter-tab-default:hover{ background-color: hsl(var(--muted)); color: hsl(var(--foreground)); } .filter-tab-default:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 1px; } .filter-tab-active{ background-color: hsl(var(--primary)); font-weight: 600; color: hsl(var(--primary-foreground)); transition: var(--transition-smooth); } .filter-tab-active:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 1px; } /* ─── Save indicator states ──────────────────────────────────────────────────── */ .save-indicator-idle{ display: flex; align-items: center; gap: 0.5rem; color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.5; } .save-indicator-saving{ display: flex; align-items: center; gap: 0.5rem; color: hsl(var(--foreground)); font-size: 13px; line-height: 1.5; /* No animation — saving state is communicated by text, not motion */ } .save-indicator-saved{ display: flex; align-items: center; gap: 0.5rem; color: hsl(var(--muted-foreground)); font-size: 13px; line-height: 1.5; } .save-indicator-error{ display: flex; align-items: center; gap: 0.5rem; border-radius: calc(var(--radius) - 2px); background-color: hsl(var(--destructive) / 0.1); padding-left: 0.75rem; padding-right: 0.75rem; padding-top: 0.375rem; padding-bottom: 0.375rem; font-weight: 500; color: hsl(var(--destructive)); transition: var(--transition-smooth); } /* ─── Button interactive states (canonical) ────────────────────────────────────── */ .btn-primary{ border-radius: calc(var(--radius) - 2px); background-color: hsl(var(--primary)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-weight: 600; color: hsl(var(--primary-foreground)); font-size: 13px; line-height: 1.5; transition: var(--transition-quick); cursor: pointer; } .btn-primary:hover:not(:disabled) { opacity: 0.9; } .btn-primary:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 2px; } .btn-primary:disabled{ cursor: not-allowed; opacity: 0.5; } .btn-secondary{ border-radius: calc(var(--radius) - 2px); background-color: hsl(var(--secondary)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-weight: 600; color: hsl(var(--secondary-foreground)); font-size: 13px; line-height: 1.5; transition: var(--transition-quick); cursor: pointer; } .btn-secondary:hover:not(:disabled) { opacity: 0.8; } .btn-secondary:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 2px; } .btn-destructive{ border-radius: calc(var(--radius) - 2px); background-color: hsl(var(--destructive)); padding-left: 1rem; padding-right: 1rem; padding-top: 0.5rem; padding-bottom: 0.5rem; font-weight: 600; color: hsl(var(--destructive-foreground)); font-size: 13px; line-height: 1.5; transition: var(--transition-quick); cursor: pointer; } .btn-destructive:hover:not(:disabled) { opacity: 0.9; } .btn-destructive:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: hsl(var(--destructive)); --tw-ring-offset-width: 2px; } /* ─── Loading state — opacity pulse only ─────────────────────────────────────── */ .loading-pulse { /* No animation — static muted appearance while loading */ opacity: 0.5; } /* ─── Focus ring — consistent across light and dark ──────────────────────────── */ .focus-ring{ outline: 2px solid transparent; outline-offset: 2px; --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); --tw-ring-color: hsl(var(--ring)); --tw-ring-offset-width: 2px; } /* ─── Collapsible sections: CSS grid approach (zero layout shift) ──────────────── */ .collapsible-grid { display: grid; grid-template-rows: 0fr; overflow: hidden; transition: grid-template-rows 200ms ease; } .collapsible-grid.is-open { grid-template-rows: 1fr; } .collapsible-inner { min-height: 0; overflow: hidden; } /* Opacity reveals content without layout shift */ .collapsible-grid .collapsible-inner > * { opacity: 0; transition: opacity 200ms ease; } .collapsible-grid.is-open .collapsible-inner > * { opacity: 1; } .\[--cell-size\:--spacing\(8\)\]{ --cell-size: var(--spacing(8)); } /* ─── "Mono Ink" (2026-07) — Sovern design language · Projects (ochre signature). See families/workspace/SOVERN-MONO-INK.md. Light, minimal, functional: white canvas, light near-white rail, hairline borders, ONE ochre signature accent. App-local UNLAYERED override of the shared tokens — wins over @layer base, and does NOT touch the drift-locked vendored ds-*.css. (Light mode only for now.) */ /* ACCENT-ONLY (2026-07-18): the Mono-Ink neutral ramp AND the content-type colors (--type-*) live in the vendored ds-tokens.css (canonical design-system/tokens/sovern.css) — never re-declare them here. This block carries ONLY the Projects signature + genuinely app-local tokens. */ :root[data-os="sovern"] { /* Projects signature — ochre */ --primary: 41 70% 38%; --primary-foreground: 0 0% 100%; --ring: 41 70% 38%; --sidebar-primary: 41 70% 38%; --sidebar-primary-foreground: 0 0% 100%; /* Priority chip colors (light) — token-referenced from appColors.ts so the chips flip with the theme instead of carrying baked-in light literals. */ --priority-urgent-bg: oklch(0.58 0.24 12 / 0.18); --priority-urgent-text: oklch(0.3 0.21 12); --priority-high-bg: oklch(0.62 0.22 35 / 0.14); --priority-high-text: oklch(0.34 0.18 35); --priority-medium-bg: oklch(0.7 0.14 75 / 0.16); --priority-medium-text: oklch(0.35 0.1 75); --priority-low-bg: oklch(0.55 0.19 160 / 0.12); --priority-low-text: oklch(0.35 0.16 160); /* Task-status accent/dot colors (light) */ --status-todo: oklch(0.6 0.04 264); --status-inprogress: oklch(0.62 0.22 35); --status-inreview: oklch(0.62 0.19 260); --status-done: oklch(0.55 0.19 160); /* Role badge colors (light) — token-referenced from appColors.ts */ --role-owner-bg: oklch(0.52 0.22 270 / 0.15); --role-owner-text: oklch(0.32 0.18 270); --role-owner-border: oklch(0.52 0.22 270 / 0.35); --role-admin-bg: oklch(0.58 0.24 12 / 0.15); --role-admin-text: oklch(0.36 0.2 12); --role-admin-border: oklch(0.58 0.24 12 / 0.35); --role-member-bg: oklch(0.52 0.18 250 / 0.15); --role-member-text: oklch(0.32 0.16 250); --role-member-border: oklch(0.52 0.18 250 / 0.35); --role-viewer-bg: oklch(0.55 0.04 264 / 0.15); --role-viewer-text: oklch(0.3 0.04 264); --role-viewer-border: oklch(0.55 0.04 264 / 0.35); /* ─── Workspace (file library) — light. App-local, ochre-signature system. File-type badge ramp + dropzone/upload states. Opaque tints only; every value pairs with a text tone that clears WCAG AA on near-white. */ --file-type-doc: oklch(0.52 0.2 250); --file-type-sheet: oklch(0.55 0.19 160); --file-type-slide: oklch(0.62 0.22 35); --file-type-image: oklch(0.54 0.22 290); --file-type-pdf: oklch(0.58 0.24 12); --file-type-archive: oklch(0.6 0.19 85); --file-type-other: oklch(0.5 0.03 264); --file-dropzone-bg: oklch(0.97 0.012 41 / 0.5); --file-dropzone-border: oklch(0.72 0.09 41); --file-dropzone-active-bg: oklch(0.94 0.03 41 / 0.7); --file-dropzone-active-border: oklch(0.62 0.13 41); --file-progress-track: oklch(0.9 0.01 41); --file-progress-fill: oklch(0.58 0.13 41); --file-row-hover: oklch(0.96 0.008 41 / 0.6); --file-row-selected: oklch(0.94 0.025 41 / 0.8); } /* ─── Dark Mono-Ink — ACCENT-ONLY (2026-07-18): the vendored ds-tokens.css now carries the REAL shared dark ramp (`:root[data-os="sovern"].dark`); this later same-specificity block re-states ONLY the ochre signature + app-local tokens (opaque tints only — never /N fills). Toggle = . */ :root[data-os="sovern"].dark { --primary: 41 58% 55%; --primary-foreground: 41 45% 10%; --ring: 41 58% 55%; --sidebar-primary: 41 58% 55%; --sidebar-primary-foreground: 41 45% 10%; /* App-specific accent tokens — lightened for dark surfaces (referenced via oklch(var(--x))). */ --chart-1: 0.68 0.16 250; --chart-2: 0.7 0.15 160; --chart-3: 0.72 0.16 30; --chart-4: 0.7 0.18 305; --chart-5: 0.74 0.17 85; --app-documents: 0.68 0.17 250; --app-sheets: 0.7 0.16 160; --app-presentations: 0.72 0.19 35; --app-notes: 0.76 0.16 70; --app-tasks: 0.7 0.2 12; --app-calendar: 0.7 0.16 220; --app-chat: 0.68 0.19 290; --app-projects: 0.68 0.19 270; --app-activity: 0.7 0.04 264; --app-people: 0.7 0.16 195; --badge-owner: 0.72 0.14 250; --badge-admin: 0.72 0.17 12; --badge-member: 0.72 0.15 140; --badge-viewer: 0.72 0.04 264; --project-indigo: 0.68 0.16 250; --project-blue: 0.7 0.17 260; --project-teal: 0.7 0.16 200; --project-green: 0.72 0.15 140; --project-yellow: 0.78 0.16 110; --project-orange: 0.72 0.18 50; --project-red: 0.7 0.2 12; --project-pink: 0.72 0.17 320; /* Priority chips (dark) — opaque bg + light text (honors no-translucent-on-dark). */ --priority-urgent-bg: oklch(0.36 0.13 12); --priority-urgent-text: oklch(0.86 0.12 15); --priority-high-bg: oklch(0.35 0.11 40); --priority-high-text: oklch(0.85 0.11 55); --priority-medium-bg: oklch(0.34 0.07 78); --priority-medium-text: oklch(0.85 0.11 85); --priority-low-bg: oklch(0.32 0.09 160); --priority-low-text: oklch(0.82 0.13 160); /* Task-status accent/dot colors (dark) */ --status-todo: oklch(0.66 0.04 264); --status-inprogress: oklch(0.72 0.17 45); --status-inreview: oklch(0.7 0.16 260); --status-done: oklch(0.7 0.16 160); /* Role badges (dark) — opaque bg + light text (honors no-translucent-on-dark). */ --role-owner-bg: oklch(0.33 0.12 270); --role-owner-text: oklch(0.84 0.1 270); --role-owner-border: oklch(0.45 0.12 270); --role-admin-bg: oklch(0.34 0.12 12); --role-admin-text: oklch(0.85 0.11 15); --role-admin-border: oklch(0.46 0.12 12); --role-member-bg: oklch(0.32 0.1 250); --role-member-text: oklch(0.83 0.1 250); --role-member-border: oklch(0.44 0.1 250); --role-viewer-bg: oklch(0.3 0.02 264); --role-viewer-text: oklch(0.8 0.03 264); --role-viewer-border: oklch(0.42 0.03 264); /* ─── Workspace (file library) — dark. Opaque fills (no /N on dark surfaces); badge text lightened to hold AA contrast against deep charcoal. */ --file-type-doc: oklch(0.72 0.15 250); --file-type-sheet: oklch(0.74 0.14 160); --file-type-slide: oklch(0.76 0.16 35); --file-type-image: oklch(0.74 0.16 290); --file-type-pdf: oklch(0.72 0.18 12); --file-type-archive: oklch(0.8 0.14 85); --file-type-other: oklch(0.72 0.02 264); --file-dropzone-bg: oklch(0.28 0.02 41); --file-dropzone-border: oklch(0.44 0.05 41); --file-dropzone-active-bg: oklch(0.33 0.04 41); --file-dropzone-active-border: oklch(0.62 0.11 41); --file-progress-track: oklch(0.32 0.015 41); --file-progress-fill: oklch(0.68 0.13 41); --file-row-hover: oklch(0.3 0.012 41); --file-row-selected: oklch(0.34 0.03 41); /* Elevation on dark = deeper drops + a faint light hairline, not light shadows. */ --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.4); --shadow-card: 0 1px 3px 0 rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.04); --shadow-elevated: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.4); --shadow-popover: 0 10px 15px -3px rgba(0, 0, 0, 0.6), 0 4px 6px -2px rgba(0, 0, 0, 0.5); } /* ─── Page-level keyframes ─────────────────────────────────────────────────── ONLY opacity — no transform, no translate, no scale. */ @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Wordmark face — self-hosted Fraunces (variable, latin). Used ONLY by the wordmark lockup via --font-wordmark; the UI stays on Inter. */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/Fraunces.woff2") format("woff2"); font-weight: 100 900; font-display: swap; } /* ═══════════════════════════════════════════════════════════════════════════════ Global Tailwind animation kill-switch Infinite Tailwind utilities produce looping motion that violates the spec. These are suppressed globally. Skeleton loaders are static (no pulse). Loader icons are shown/hidden via opacity, not spun. ═══════════════════════════════════════════════════════════════════════════════ */ .animate-spin { animation: none !important; } .animate-pulse { animation: none !important; } .animate-bounce { animation: none !important; } .animate-ping { animation: none !important; } /* Loading indicator dots — used in App.tsx initial load screen only */ @keyframes tw-loading-dot { 0%, 80%, 100% { opacity: 0.15; } 40% { opacity: 0.8; } } @media (prefers-reduced-motion: reduce) { @keyframes tw-loading-dot { 0%, 100% { opacity: 0.5; } } } /* Spinner for loading screen — NOT in the global kill-switch */ @keyframes tw-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .tw-spinner { animation: tw-spin 0.8s linear infinite; } @media (prefers-reduced-motion: reduce) { .tw-spinner { animation: none; } } /* ═══════════════════════════════════════════════════════════════════════════════ Radix UI Animation Overrides Hard constraint: opacity fade only, 150–250ms ease. No transform, no scale, no translate, no slide, no bounce, no zoom. These rules are intentional overrides — do not remove without replacing. ═══════════════════════════════════════════════════════════════════════════════ */ /* ── 1. Strip animation + transform from ALL Radix content wrappers ─────────── Targets the outer popper wrapper and every known content element. !important required: Radix injects inline styles and Tailwind animate-* classes. ⚠ POSITIONING EXCEPTION: the outer [data-radix-popper-content-wrapper] and dialog content elements are POSITIONED with static transforms (Radix places the popper via an inline `transform: translate(x, y)`; shadcn dialogs center via `-translate-x-1/2 -translate-y-1/2`). Killing transform there snaps every dropdown/select/tooltip to the viewport corner and un-centers dialogs — so those elements get only the animation kill, never `transform: none`. */ [data-radix-popper-content-wrapper], [data-radix-dialog-content], [data-radix-alert-dialog-content], [data-radix-command-dialog], [role="dialog"], [role="alertdialog"] { animation: none !important; /* transform intentionally NOT reset — it is positioning, not motion */ } [data-radix-popper-content-wrapper] *, [data-radix-menu-content], [data-radix-dropdown-menu-content], [data-radix-context-menu-content], [data-radix-select-content], [data-radix-tooltip-content], [data-radix-popover-content], [data-radix-hover-card-content], [data-radix-menubar-content], [data-radix-menubar-content] *, [data-radix-navigation-menu-content], [data-radix-navigation-menu-content] *, [data-radix-command-dialog] *, [role="menu"], [role="menu"] *, [role="listbox"], [role="listbox"] * { animation: none !important; transform: none !important; /* Do not set transition here — handled per data-state below */ } /* ── 2. Fade in on open ─────────────────────────────────────────────────────── Only opacity is animated. transform: none prevents Radix from injecting translate offsets during open state. */ [data-radix-popper-content-wrapper] [data-state="open"], [data-radix-menu-content][data-state="open"], [data-radix-dropdown-menu-content][data-state="open"], [data-radix-context-menu-content][data-state="open"], [data-radix-select-content][data-state="open"], [data-radix-tooltip-content][data-state="open"], [data-radix-tooltip-content][data-state="delayed-open"], [data-radix-popover-content][data-state="open"], [data-radix-hover-card-content][data-state="open"], [data-radix-navigation-menu-content][data-state="open"], [data-radix-menubar-content][data-state="open"] { opacity: 1 !important; transition: opacity 200ms ease !important; transform: none !important; } /* ── 3. Fade out on close ───────────────────────────────────────────────────── Slightly faster exit (150ms) for snappier feel. */ [data-radix-popper-content-wrapper] [data-state="closed"], [data-radix-popper-content-wrapper] [data-state="delayed-open"], [data-radix-menu-content][data-state="closed"], [data-radix-dropdown-menu-content][data-state="closed"], [data-radix-context-menu-content][data-state="closed"], [data-radix-select-content][data-state="closed"], [data-radix-tooltip-content][data-state="closed"], [data-radix-popover-content][data-state="closed"], [data-radix-hover-card-content][data-state="closed"], [data-radix-navigation-menu-content][data-state="closed"], [data-radix-menubar-content][data-state="closed"] { opacity: 0 !important; transition: opacity 150ms ease !important; transform: none !important; } /* ── 4. Kill Tailwind animate-in/out utility classes on Radix content ───────── shadcn/ui attaches these classes to content components. Neutralise them by zeroing all the CSS custom property levers Tailwind uses internally. */ [data-radix-popper-content-wrapper] .animate-in, [data-radix-popper-content-wrapper] .animate-out, [data-radix-popper-content-wrapper] .fade-in-0, [data-radix-popper-content-wrapper] .fade-out-0, [data-radix-popper-content-wrapper] .zoom-in-95, [data-radix-popper-content-wrapper] .zoom-out-95, [data-radix-popper-content-wrapper] [class*="slide-in"], [data-radix-popper-content-wrapper] [class*="slide-out"], [data-radix-popper-content-wrapper] [class*="spin"], [data-radix-popper-content-wrapper] [class*="bounce"], .animate-in[data-radix-menu-content], .animate-in[data-radix-dropdown-menu-content], .animate-in[data-radix-context-menu-content], .animate-in[data-radix-select-content], .animate-in[data-radix-tooltip-content], .animate-in[data-radix-popover-content], .animate-in[data-radix-navigation-menu-content], .animate-in[data-radix-menubar-content] { animation: none !important; --tw-enter-opacity: 1 !important; --tw-enter-scale: 1 !important; --tw-enter-rotate: 0 !important; --tw-enter-translate-x: 0 !important; --tw-enter-translate-y: 0 !important; --tw-exit-opacity: 0 !important; --tw-exit-scale: 1 !important; --tw-exit-rotate: 0 !important; --tw-exit-translate-x: 0 !important; --tw-exit-translate-y: 0 !important; transform: none !important; } /* ── 5. Kill data-side position transforms injected by Radix popper ─────────── Radix injects translateX/Y via CSS vars on positioned content. Force all to none regardless of side/alignment. */ [data-side="top"], [data-side="bottom"], [data-side="left"], [data-side="right"] { transform: none !important; --radix-dropdown-menu-transform-origin: none !important; --radix-popover-transform-origin: none !important; --radix-context-menu-transform-origin: none !important; --radix-tooltip-transform-origin: none !important; --radix-hover-card-transform-origin: none !important; --radix-menubar-transform-origin: none !important; --radix-navigation-menu-transform-origin: none !important; } /* ── 6. Override Radix-named keyframes with opacity-only versions ───────────── Radix ships these keyframes. Redefining them here ensures they do nothing even if a component applies them via an animation property we missed. */ @keyframes slideUpAndFade { from { opacity: 0; } to { opacity: 1; } } @keyframes slideRightAndFade { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDownAndFade { from { opacity: 0; } to { opacity: 1; } } @keyframes slideLeftAndFade { from { opacity: 0; } to { opacity: 1; } } @keyframes slideDown { from { opacity: 0; } to { opacity: 1; } } @keyframes slideUp { from { opacity: 0; } to { opacity: 1; } } /* ── 7. Broad catch for any remaining data-state animations ─────────────────── Applied to non-Radix elements that may also use data-state. NOTE: This only disables animation — existing opacity transitions defined on app-visible / app-hidden still work as intended. */ [data-radix-popper-content-wrapper] [data-state], [data-radix-menu-content][data-state], [data-radix-dropdown-menu-content][data-state], [data-radix-context-menu-content][data-state], [data-radix-select-content][data-state], [data-radix-tooltip-content][data-state] { animation: none !important; } /* ── 8. Select content — kill translate offsets injected via position=popper ─ */ [data-radix-select-content][data-side="bottom"], [data-radix-select-content][data-side="top"], [data-radix-select-content][data-side="left"], [data-radix-select-content][data-side="right"] { transform: none !important; } /* ── 9. Broad final catch — any missed Radix content wrapper children ───────── Duration override ensures even if an animation fires, it's imperceptibly fast. */ [data-radix-popper-content-wrapper] * { animation-duration: 150ms !important; animation-timing-function: ease !important; } /* ── 10. NavigationMenu specific — kills sliding underline and viewport transitions */ [data-radix-navigation-menu-viewport] { animation: none !important; transform: none !important; transition: opacity 200ms ease !important; } [data-radix-navigation-menu-viewport][data-state="open"] { opacity: 1 !important; } [data-radix-navigation-menu-viewport][data-state="closed"] { opacity: 0 !important; } /* ── 10b. Accordion chevron: rotation communicates open/closed state ────────── Single ChevronDown rotates 180deg when section is open. 150ms ease. Rotation is functional — it communicates orientation, not decoration. */ .accordion-chevron { transition: transform 150ms ease; } [data-state="open"] .accordion-chevron { transform: rotate(180deg); } [data-state="closed"] .accordion-chevron { transform: rotate(0deg); } @media (prefers-reduced-motion: reduce) { .accordion-chevron { transition: none; } } /* No accordion height slide — use CSS grid approach in AccordionContent */ [data-slot="accordion-content"] { animation: none !important; } /* ── 11. Command/Dialog — ensure no transform on overlay or content ─────────── Radix Dialog can inject scale transforms on the content element. */ [role="dialog"] > *, [data-radix-dialog-overlay], [data-radix-alert-dialog-overlay] { animation: none !important; transform: none !important; } [role="dialog"][data-state="open"] { opacity: 1 !important; transition: opacity 200ms ease !important; } [role="dialog"][data-state="closed"] { opacity: 0 !important; transition: opacity 150ms ease !important; } /* ── 12. Vaul Drawer — opacity-only open/close, no slide transforms ─────────── Vaul injects slide transforms on drawer content. We suppress them and use opacity transitions only. */ [data-vaul-drawer-direction] { animation: none !important; transform: none !important; } [data-slot="drawer-overlay"][data-state="open"] { opacity: 1; transition: opacity var(--transition-fast); } [data-slot="drawer-overlay"][data-state="closed"] { opacity: 0; transition: opacity var(--transition-fast); } [data-slot="drawer-content"] { animation: none !important; transform: none !important; } /* ═══════════════════════════════════════════════════════════════════════════════ prefers-reduced-motion: no-preference — comprehensive Radix + role overrides Ensures ALL popover/menu/dialog/tooltip content uses ONLY opacity transitions. No transform, no animation, no slide. Opacity 150ms ease only. ═══════════════════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: no-preference) { /* ⚠ The popper wrapper and dialog content are POSITIONED via static transforms (Radix inline translate; shadcn -translate-x/y-1/2 centering) — never reset transform on them, only strip motion. See section 1. */ [data-radix-popper-content-wrapper], [role="dialog"] { animation: none !important; transition: opacity 150ms ease !important; } [role="menu"], [role="listbox"], [role="tooltip"] { animation: none !important; transform: none !important; transition: opacity 150ms ease !important; } } /* ═══════════════════════════════════════════════════════════════════════════════ prefers-reduced-motion: reduce — global kill switch Sets all durations to near-zero so nothing is perceivable. Does NOT suppress opacity: it suppresses time (transitions still run, just instantly). This keeps opacity state correct without visual motion. ═══════════════════════════════════════════════════════════════════════════════ */ /* ═══════════════════════════════════════════════════════════════════════════════ Rich text / contenteditable editor styles Used by the Presentations slide editor (rich text mode) ═══════════════════════════════════════════════════════════════════════════════ */ /* Placeholder text for empty contenteditable */ .rich-editor:empty:before { content: attr(data-placeholder); color: hsl(var(--muted-foreground)); pointer-events: none; opacity: 0.55; } .rich-editor:focus { outline: none; } /* Inline formatting in rich editor */ .rich-editor h1, .rich-editor h2, .slide-html-content h1, .slide-html-content h2 { font-weight: 700; line-height: 1.3; margin-bottom: 0.4em; } .rich-editor h1, .slide-html-content h1 { font-size: 1.5rem; } .rich-editor h2, .slide-html-content h2 { font-size: 1.2rem; } .rich-editor p, .slide-html-content p { margin-bottom: 0.5em; } .rich-editor ul, .rich-editor ol, .slide-html-content ul, .slide-html-content ol { margin-left: 1.25rem; margin-bottom: 0.5em; } .rich-editor ul, .slide-html-content ul { list-style-type: disc; } .rich-editor ol, .slide-html-content ol { list-style-type: decimal; } .rich-editor li, .slide-html-content li { margin-bottom: 0.2em; } .rich-editor blockquote, .slide-html-content blockquote { border-left: 3px solid hsl(var(--primary)); padding-left: 0.875rem; margin: 0.5rem 0; opacity: 0.8; font-style: italic; } .rich-editor hr, .slide-html-content hr { border: none; border-top: 1px solid hsl(var(--border)); margin: 0.75rem 0; } /* In the preview panel, white text for content on slide background */ .slide-preview-content .slide-html-content h1, .slide-preview-content .slide-html-content h2, .slide-preview-content .slide-html-content p, .slide-preview-content .slide-html-content li, .slide-preview-content .slide-html-content blockquote, .slide-presenter-content .slide-html-content h1, .slide-presenter-content .slide-html-content h2, .slide-presenter-content .slide-html-content p, .slide-presenter-content .slide-html-content li, .slide-presenter-content .slide-html-content blockquote { color: rgba(255, 255, 255, 0.9); } .slide-preview-content .slide-html-content blockquote, .slide-presenter-content .slide-html-content blockquote { border-left-color: rgba(255, 255, 255, 0.5); } .slide-preview-content .slide-html-content hr, .slide-presenter-content .slide-html-content hr { border-top-color: rgba(255, 255, 255, 0.3); } /* Grid layout helper used in Stats and Two-column templates */ .slide-preview-content .slide-html-content [style*="display:grid"], .slide-presenter-content .slide-html-content [style*="display:grid"] { display: grid; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } } /* ─── Scrollbar hide utility ──────────────────────────────────────────────── */ .scrollbar-none { scrollbar-width: none; -ms-overflow-style: none; } .scrollbar-none::-webkit-scrollbar { display: none; } /* ─── Skeleton-to-content fade ────────────────────────────────────────────── */ /* Apply to content containers that replace skeleton loaders. Add .loaded when data arrives to fade content in. */ .content-fade-in { opacity: 0; transition: opacity 150ms ease-out; } .content-fade-in.loaded { opacity: 1; } @media (prefers-reduced-motion: reduce) { .content-fade-in { transition: none; opacity: 1; } } .mention-pill { background-color: hsl(var(--primary) / 0.12); color: hsl(var(--primary)); } .selection\:bg-primary *::-moz-selection{ background-color: hsl(var(--primary)); } .selection\:bg-primary *::selection{ background-color: hsl(var(--primary)); } .selection\:text-primary-foreground *::-moz-selection{ color: hsl(var(--primary-foreground)); } .selection\:text-primary-foreground *::selection{ color: hsl(var(--primary-foreground)); } .selection\:bg-primary::-moz-selection{ background-color: hsl(var(--primary)); } .selection\:bg-primary::selection{ background-color: hsl(var(--primary)); } .selection\:text-primary-foreground::-moz-selection{ color: hsl(var(--primary-foreground)); } .selection\:text-primary-foreground::selection{ color: hsl(var(--primary-foreground)); } .file\:inline-flex::file-selector-button{ display: inline-flex; } .file\:h-7::file-selector-button{ height: 1.75rem; } .file\:border-0::file-selector-button{ border-width: 0px; } .file\:bg-transparent::file-selector-button{ background-color: transparent; } .file\:text-sm::file-selector-button{ font-size: 0.875rem; line-height: 1.25rem; } .file\:font-medium::file-selector-button{ font-weight: 500; } .file\:text-foreground::file-selector-button{ color: hsl(var(--foreground)); } .placeholder\:text-muted-foreground::-moz-placeholder{ color: hsl(var(--muted-foreground)); } .placeholder\:text-muted-foreground::placeholder{ color: hsl(var(--muted-foreground)); } .placeholder\:opacity-30::-moz-placeholder{ opacity: 0.3; } .placeholder\:opacity-30::placeholder{ opacity: 0.3; } .after\:absolute::after{ content: var(--tw-content); position: absolute; } .after\:-inset-2::after{ content: var(--tw-content); inset: -0.5rem; } .after\:inset-y-0::after{ content: var(--tw-content); top: 0px; bottom: 0px; } .after\:left-1\/2::after{ content: var(--tw-content); left: 50%; } .after\:w-1::after{ content: var(--tw-content); width: 0.25rem; } .after\:w-\[2px\]::after{ content: var(--tw-content); width: 2px; } .after\:-translate-x-1\/2::after{ content: var(--tw-content); --tw-translate-x: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .first\:rounded-l-md:first-child{ border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .first\:border-l:first-child{ border-left-width: 1px; } .last\:mb-0:last-child{ margin-bottom: 0px; } .last\:rounded-r-md:last-child{ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .last\:border-0:last-child{ border-width: 0px; } .last\:border-b-0:last-child{ border-bottom-width: 0px; } .read-only\:cursor-default:-moz-read-only{ cursor: default; } .read-only\:cursor-default:read-only{ cursor: default; } .read-only\:opacity-60:-moz-read-only{ opacity: 0.6; } .read-only\:opacity-60:read-only{ opacity: 0.6; } .hover\:border-border\/80:hover{ border-color: hsl(var(--border) / 0.8); } .hover\:border-input:hover{ border-color: hsl(var(--input)); } .hover\:border-primary:hover{ border-color: hsl(var(--primary)); } .hover\:border-primary\/30:hover{ border-color: hsl(var(--primary) / 0.3); } .hover\:border-primary\/40:hover{ border-color: hsl(var(--primary) / 0.4); } .hover\:border-primary\/50:hover{ border-color: hsl(var(--primary) / 0.5); } .hover\:bg-accent:hover{ background-color: hsl(var(--accent)); } .hover\:bg-destructive\/90:hover{ background-color: hsl(var(--destructive) / 0.9); } .hover\:bg-muted:hover{ background-color: hsl(var(--muted)); } .hover\:bg-primary\/90:hover{ background-color: hsl(var(--primary) / 0.9); } .hover\:bg-secondary\/80:hover{ background-color: hsl(var(--secondary) / 0.8); } .hover\:bg-sidebar-accent:hover{ background-color: hsl(var(--sidebar-accent)); } .hover\:bg-tint-destructive:hover{ background-color: color-mix(in srgb, hsl(var(--destructive)) 12%, hsl(var(--card))); } .hover\:bg-tint-destructive-strong:hover{ background-color: color-mix(in srgb, hsl(var(--destructive)) 18%, hsl(var(--card))); } .hover\:bg-tint-primary:hover{ background-color: color-mix(in srgb, hsl(var(--primary)) 12%, hsl(var(--card))); } .hover\:bg-tint-wash:hover{ background-color: color-mix(in srgb, hsl(var(--muted)) 40%, hsl(var(--card))); } .hover\:bg-tint-wash-strong:hover{ background-color: color-mix(in srgb, hsl(var(--muted)) 65%, hsl(var(--card))); } .hover\:text-accent-foreground:hover{ color: hsl(var(--accent-foreground)); } .hover\:text-destructive:hover{ color: hsl(var(--destructive)); } .hover\:text-destructive\/80:hover{ color: hsl(var(--destructive) / 0.8); } .hover\:text-foreground:hover{ color: hsl(var(--foreground)); } .hover\:text-muted-foreground:hover{ color: hsl(var(--muted-foreground)); } .hover\:text-primary:hover{ color: hsl(var(--primary)); } .hover\:text-primary\/80:hover{ color: hsl(var(--primary) / 0.8); } .hover\:text-sidebar-accent-foreground:hover{ color: hsl(var(--sidebar-accent-foreground)); } .hover\:text-sidebar-foreground:hover{ color: hsl(var(--sidebar-foreground)); } .hover\:underline:hover{ text-decoration-line: underline; } .hover\:opacity-100:hover{ opacity: 1; } .hover\:opacity-70:hover{ opacity: 0.7; } .hover\:opacity-80:hover{ opacity: 0.8; } .hover\:opacity-90:hover{ opacity: 0.9; } .hover\:shadow:hover{ --tw-shadow: var(--shadow); --tw-shadow-colored: var(--shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:shadow-\[0_0_0_1px_hsl\(var\(--sidebar-accent\)\)\]:hover{ --tw-shadow: 0 0 0 1px hsl(var(--sidebar-accent)); --tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .hover\:ring-4:hover{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .hover\:after\:bg-sidebar-border:hover::after{ content: var(--tw-content); background-color: hsl(var(--sidebar-border)); } .focus\:z-10:focus{ z-index: 10; } .focus\:border-input:focus{ border-color: hsl(var(--input)); } .focus\:border-primary:focus{ border-color: hsl(var(--primary)); } .focus\:bg-accent:focus{ background-color: hsl(var(--accent)); } .focus\:text-accent-foreground:focus{ color: hsl(var(--accent-foreground)); } .focus\:outline-none:focus{ outline: 2px solid transparent; outline-offset: 2px; } .focus\:ring-0:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-2:focus{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus\:ring-ring:focus{ --tw-ring-color: hsl(var(--ring)); } .focus\:ring-offset-2:focus{ --tw-ring-offset-width: 2px; } .focus\:outline-hidden:focus { outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:z-10:focus-visible{ z-index: 10; } .focus-visible\:border-ring:focus-visible{ border-color: hsl(var(--ring)); } .focus-visible\:outline-none:focus-visible{ outline: 2px solid transparent; outline-offset: 2px; } .focus-visible\:outline-1:focus-visible{ outline-width: 1px; } .focus-visible\:outline-ring:focus-visible{ outline-color: hsl(var(--ring)); } .focus-visible\:ring-1:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-2:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-4:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-\[3px\]:focus-visible{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .focus-visible\:ring-inset:focus-visible{ --tw-ring-inset: inset; } .focus-visible\:ring-destructive\/20:focus-visible{ --tw-ring-color: hsl(var(--destructive) / 0.2); } .focus-visible\:ring-primary:focus-visible{ --tw-ring-color: hsl(var(--primary)); } .focus-visible\:ring-ring:focus-visible{ --tw-ring-color: hsl(var(--ring)); } .focus-visible\:ring-ring\/50:focus-visible{ --tw-ring-color: hsl(var(--ring) / 0.5); } .focus-visible\:ring-offset-1:focus-visible{ --tw-ring-offset-width: 1px; } .focus-visible\:ring-offset-2:focus-visible{ --tw-ring-offset-width: 2px; } .focus-visible\:ring-offset-background:focus-visible{ --tw-ring-offset-color: hsl(var(--background)); } .focus-visible\:outline-hidden:focus-visible { outline: 2px solid transparent; outline-offset: 2px; } .active\:bg-sidebar-accent:active{ background-color: hsl(var(--sidebar-accent)); } .active\:text-sidebar-accent-foreground:active{ color: hsl(var(--sidebar-accent-foreground)); } .disabled\:pointer-events-none:disabled{ pointer-events: none; } .disabled\:cursor-not-allowed:disabled{ cursor: not-allowed; } .disabled\:opacity-40:disabled{ opacity: 0.4; } .disabled\:opacity-50:disabled{ opacity: 0.5; } .group:focus-within .group-focus-within\:mt-2{ margin-top: 0.5rem; } .group:focus-within .group-focus-within\:h-auto{ height: auto; } .group\/menu-item:focus-within .group-focus-within\/menu-item\:opacity-100{ opacity: 1; } .group:hover .group-hover\:mt-2{ margin-top: 0.5rem; } .group:hover .group-hover\:h-auto{ height: auto; } .group\/filtertab:hover .group-hover\/filtertab\:opacity-100{ opacity: 1; } .group\/menu-item:hover .group-hover\/menu-item\:opacity-100{ opacity: 1; } .group:hover .group-hover\:opacity-100{ opacity: 1; } .peer\/menu-button:hover ~ .peer-hover\/menu-button\:text-sidebar-accent-foreground{ color: hsl(var(--sidebar-accent-foreground)); } .peer:disabled ~ .peer-disabled\:cursor-not-allowed{ cursor: not-allowed; } .peer:disabled ~ .peer-disabled\:opacity-50{ opacity: 0.5; } .has-\[\>svg\]\:grid-cols-\[calc\(var\(--spacing\)\*4\)_1fr\]:has(>svg){ grid-template-columns: calc(var(--spacing) * 4) 1fr; } .has-\[\>svg\]\:gap-x-3:has(>svg){ -moz-column-gap: 0.75rem; column-gap: 0.75rem; } .has-\[\>svg\]\:px-2\.5:has(>svg){ padding-left: 0.625rem; padding-right: 0.625rem; } .has-\[\>svg\]\:px-3:has(>svg){ padding-left: 0.75rem; padding-right: 0.75rem; } .has-\[\>svg\]\:px-4:has(>svg){ padding-left: 1rem; padding-right: 1rem; } .aria-disabled\:pointer-events-none[aria-disabled="true"]{ pointer-events: none; } .aria-disabled\:opacity-50[aria-disabled="true"]{ opacity: 0.5; } .aria-selected\:text-muted-foreground[aria-selected="true"]{ color: hsl(var(--muted-foreground)); } .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"]{ pointer-events: none; } .data-\[disabled\]\:pointer-events-none[data-disabled]{ pointer-events: none; } .data-\[vaul-drawer-direction\=bottom\]\:inset-x-0[data-vaul-drawer-direction="bottom"]{ left: 0px; right: 0px; } .data-\[vaul-drawer-direction\=left\]\:inset-y-0[data-vaul-drawer-direction="left"]{ top: 0px; bottom: 0px; } .data-\[vaul-drawer-direction\=right\]\:inset-y-0[data-vaul-drawer-direction="right"]{ top: 0px; bottom: 0px; } .data-\[vaul-drawer-direction\=top\]\:inset-x-0[data-vaul-drawer-direction="top"]{ left: 0px; right: 0px; } .data-\[vaul-drawer-direction\=bottom\]\:bottom-0[data-vaul-drawer-direction="bottom"]{ bottom: 0px; } .data-\[vaul-drawer-direction\=left\]\:left-0[data-vaul-drawer-direction="left"]{ left: 0px; } .data-\[vaul-drawer-direction\=right\]\:right-0[data-vaul-drawer-direction="right"]{ right: 0px; } .data-\[vaul-drawer-direction\=top\]\:top-0[data-vaul-drawer-direction="top"]{ top: 0px; } .data-\[active\=true\]\:z-10[data-active="true"]{ z-index: 10; } .data-\[vaul-drawer-direction\=bottom\]\:mt-24[data-vaul-drawer-direction="bottom"]{ margin-top: 6rem; } .data-\[vaul-drawer-direction\=top\]\:mb-24[data-vaul-drawer-direction="top"]{ margin-bottom: 6rem; } .data-\[orientation\=horizontal\]\:h-1\.5[data-orientation="horizontal"]{ height: 0.375rem; } .data-\[orientation\=horizontal\]\:h-full[data-orientation="horizontal"]{ height: 100%; } .data-\[orientation\=horizontal\]\:h-px[data-orientation="horizontal"]{ height: 1px; } .data-\[orientation\=vertical\]\:h-full[data-orientation="vertical"]{ height: 100%; } .data-\[panel-group-direction\=vertical\]\:h-px[data-panel-group-direction="vertical"]{ height: 1px; } .data-\[size\=default\]\:h-9[data-size="default"]{ height: 2.25rem; } .data-\[size\=sm\]\:h-8[data-size="sm"]{ height: 2rem; } .data-\[vaul-drawer-direction\=bottom\]\:max-h-\[80vh\][data-vaul-drawer-direction="bottom"]{ max-height: 80vh; } .data-\[vaul-drawer-direction\=top\]\:max-h-\[80vh\][data-vaul-drawer-direction="top"]{ max-height: 80vh; } .data-\[orientation\=vertical\]\:min-h-44[data-orientation="vertical"]{ min-height: 11rem; } .data-\[orientation\=horizontal\]\:w-full[data-orientation="horizontal"]{ width: 100%; } .data-\[orientation\=vertical\]\:w-1\.5[data-orientation="vertical"]{ width: 0.375rem; } .data-\[orientation\=vertical\]\:w-auto[data-orientation="vertical"]{ width: auto; } .data-\[orientation\=vertical\]\:w-full[data-orientation="vertical"]{ width: 100%; } .data-\[orientation\=vertical\]\:w-px[data-orientation="vertical"]{ width: 1px; } .data-\[panel-group-direction\=vertical\]\:w-full[data-panel-group-direction="vertical"]{ width: 100%; } .data-\[vaul-drawer-direction\=left\]\:w-3\/4[data-vaul-drawer-direction="left"]{ width: 75%; } .data-\[vaul-drawer-direction\=right\]\:w-3\/4[data-vaul-drawer-direction="right"]{ width: 75%; } .data-\[side\=bottom\]\:translate-y-1[data-side="bottom"]{ --tw-translate-y: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=left\]\:-translate-x-1[data-side="left"]{ --tw-translate-x: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=right\]\:translate-x-1[data-side="right"]{ --tw-translate-x: 0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[side\=top\]\:-translate-y-1[data-side="top"]{ --tw-translate-y: -0.25rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=checked\]\:translate-x-\[calc\(100\%-2px\)\][data-state="checked"]{ --tw-translate-x: calc(100% - 2px); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[state\=unchecked\]\:translate-x-0[data-state="unchecked"]{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[motion\^\=from-\]\:animate-none[data-motion^="from-"]{ animation: none; } .data-\[motion\^\=to-\]\:animate-none[data-motion^="to-"]{ animation: none; } .data-\[orientation\=vertical\]\:flex-col[data-orientation="vertical"]{ flex-direction: column; } .data-\[panel-group-direction\=vertical\]\:flex-col[data-panel-group-direction="vertical"]{ flex-direction: column; } .data-\[range-end\=true\]\:rounded-md[data-range-end="true"]{ border-radius: calc(var(--radius) - 2px); } .data-\[range-middle\=true\]\:rounded-none[data-range-middle="true"]{ border-radius: 0px; } .data-\[range-start\=true\]\:rounded-md[data-range-start="true"]{ border-radius: calc(var(--radius) - 2px); } .data-\[selected\=true\]\:rounded-none[data-selected="true"]{ border-radius: 0px; } .data-\[range-end\=true\]\:rounded-r-md[data-range-end="true"]{ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .data-\[range-start\=true\]\:rounded-l-md[data-range-start="true"]{ border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .data-\[vaul-drawer-direction\=bottom\]\:rounded-t-lg[data-vaul-drawer-direction="bottom"]{ border-top-left-radius: var(--radius); border-top-right-radius: var(--radius); } .data-\[vaul-drawer-direction\=top\]\:rounded-b-lg[data-vaul-drawer-direction="top"]{ border-bottom-right-radius: var(--radius); border-bottom-left-radius: var(--radius); } .data-\[variant\=outline\]\:border-l-0[data-variant="outline"]{ border-left-width: 0px; } .data-\[vaul-drawer-direction\=bottom\]\:border-t[data-vaul-drawer-direction="bottom"]{ border-top-width: 1px; } .data-\[vaul-drawer-direction\=left\]\:border-r[data-vaul-drawer-direction="left"]{ border-right-width: 1px; } .data-\[vaul-drawer-direction\=right\]\:border-l[data-vaul-drawer-direction="right"]{ border-left-width: 1px; } .data-\[vaul-drawer-direction\=top\]\:border-b[data-vaul-drawer-direction="top"]{ border-bottom-width: 1px; } .data-\[active\=true\]\:border-ring[data-active="true"]{ border-color: hsl(var(--ring)); } .data-\[state\=checked\]\:border-primary[data-state="checked"]{ border-color: hsl(var(--primary)); } .data-\[active\=true\]\:bg-sidebar-accent[data-active="true"]{ background-color: hsl(var(--sidebar-accent)); } .data-\[active\=true\]\:bg-tint-wash[data-active="true"]{ background-color: color-mix(in srgb, hsl(var(--muted)) 40%, hsl(var(--card))); } .data-\[range-end\=true\]\:bg-primary[data-range-end="true"]{ background-color: hsl(var(--primary)); } .data-\[range-middle\=true\]\:bg-accent[data-range-middle="true"]{ background-color: hsl(var(--accent)); } .data-\[range-start\=true\]\:bg-primary[data-range-start="true"]{ background-color: hsl(var(--primary)); } .data-\[selected-single\=true\]\:bg-primary[data-selected-single="true"]{ background-color: hsl(var(--primary)); } .data-\[selected\=true\]\:bg-accent[data-selected="true"]{ background-color: hsl(var(--accent)); } .data-\[state\=active\]\:bg-background[data-state="active"]{ background-color: hsl(var(--background)); } .data-\[state\=checked\]\:bg-primary[data-state="checked"]{ background-color: hsl(var(--primary)); } .data-\[state\=on\]\:bg-accent[data-state="on"]{ background-color: hsl(var(--accent)); } .data-\[state\=open\]\:bg-accent[data-state="open"]{ background-color: hsl(var(--accent)); } .data-\[state\=open\]\:bg-secondary[data-state="open"]{ background-color: hsl(var(--secondary)); } .data-\[state\=open\]\:bg-tint-wash[data-state="open"]{ background-color: color-mix(in srgb, hsl(var(--muted)) 40%, hsl(var(--card))); } .data-\[state\=selected\]\:bg-muted[data-state="selected"]{ background-color: hsl(var(--muted)); } .data-\[state\=unchecked\]\:bg-input[data-state="unchecked"]{ background-color: hsl(var(--input)); } .data-\[inset\]\:pl-8[data-inset]{ padding-left: 2rem; } .data-\[active\=true\]\:font-medium[data-active="true"]{ font-weight: 500; } .data-\[active\=true\]\:text-accent-foreground[data-active="true"]{ color: hsl(var(--accent-foreground)); } .data-\[active\=true\]\:text-sidebar-accent-foreground[data-active="true"]{ color: hsl(var(--sidebar-accent-foreground)); } .data-\[error\=true\]\:text-destructive[data-error="true"]{ color: hsl(var(--destructive)); } .data-\[placeholder\]\:text-muted-foreground[data-placeholder]{ color: hsl(var(--muted-foreground)); } .data-\[range-end\=true\]\:text-primary-foreground[data-range-end="true"]{ color: hsl(var(--primary-foreground)); } .data-\[range-middle\=true\]\:text-accent-foreground[data-range-middle="true"]{ color: hsl(var(--accent-foreground)); } .data-\[range-start\=true\]\:text-primary-foreground[data-range-start="true"]{ color: hsl(var(--primary-foreground)); } .data-\[selected-single\=true\]\:text-primary-foreground[data-selected-single="true"]{ color: hsl(var(--primary-foreground)); } .data-\[selected\=true\]\:text-accent-foreground[data-selected="true"]{ color: hsl(var(--accent-foreground)); } .data-\[state\=checked\]\:text-primary-foreground[data-state="checked"]{ color: hsl(var(--primary-foreground)); } .data-\[state\=on\]\:text-accent-foreground[data-state="on"]{ color: hsl(var(--accent-foreground)); } .data-\[state\=open\]\:text-accent-foreground[data-state="open"]{ color: hsl(var(--accent-foreground)); } .data-\[variant\=destructive\]\:text-destructive[data-variant="destructive"]{ color: hsl(var(--destructive)); } .data-\[disabled\=true\]\:opacity-50[data-disabled="true"]{ opacity: 0.5; } .data-\[disabled\]\:opacity-50[data-disabled]{ opacity: 0.5; } .data-\[motion\^\=from-\]\:opacity-0[data-motion^="from-"]{ opacity: 0; } .data-\[motion\^\=to-\]\:opacity-0[data-motion^="to-"]{ opacity: 0; } .data-\[state\=closed\]\:opacity-0[data-state="closed"]{ opacity: 0; } .data-\[state\=delayed-open\]\:opacity-100[data-state="delayed-open"]{ opacity: 1; } .data-\[state\=open\]\:opacity-100[data-state="open"]{ opacity: 1; } .data-\[state\=active\]\:shadow-sm[data-state="active"]{ --tw-shadow: var(--shadow-sm); --tw-shadow-colored: var(--shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .data-\[variant\=outline\]\:shadow-xs[data-variant="outline"]{ --tw-shadow: 0 1px 2px 0 rgba(0,0,0,0.05); --tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .data-\[active\=true\]\:ring-\[3px\][data-active="true"]{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .data-\[active\=true\]\:ring-ring\/50[data-active="true"]{ --tw-ring-color: hsl(var(--ring) / 0.5); } .data-\[state\=open\]\:animate-in[data-state="open"]{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .data-\[state\=visible\]\:animate-in[data-state="visible"]{ animation-name: enter; animation-duration: 150ms; --tw-enter-opacity: initial; --tw-enter-scale: initial; --tw-enter-rotate: initial; --tw-enter-translate-x: initial; --tw-enter-translate-y: initial; } .data-\[state\=closed\]\:animate-out[data-state="closed"]{ animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[state\=hidden\]\:animate-out[data-state="hidden"]{ animation-name: exit; animation-duration: 150ms; --tw-exit-opacity: initial; --tw-exit-scale: initial; --tw-exit-rotate: initial; --tw-exit-translate-x: initial; --tw-exit-translate-y: initial; } .data-\[state\=closed\]\:fade-out-0[data-state="closed"]{ --tw-exit-opacity: 0; } .data-\[state\=hidden\]\:fade-out[data-state="hidden"]{ --tw-exit-opacity: 0; } .data-\[state\=open\]\:fade-in-0[data-state="open"]{ --tw-enter-opacity: 0; } .data-\[state\=visible\]\:fade-in[data-state="visible"]{ --tw-enter-opacity: 0; opacity: 0; transition: opacity 200ms ease-in-out; } .data-\[state\=visible\]\:fade-in[data-state="visible"].visible { opacity: 1; } .\*\:data-\[slot\=select-value\]\:line-clamp-1[data-slot="select-value"] > *{ overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .\*\:data-\[slot\=select-value\]\:flex[data-slot="select-value"] > *{ display: flex; } .\*\:data-\[slot\=select-value\]\:items-center[data-slot="select-value"] > *{ align-items: center; } .\*\:data-\[slot\=select-value\]\:gap-2[data-slot="select-value"] > *{ gap: 0.5rem; } .\*\:data-\[slot\=alert-description\]\:text-destructive\/90[data-slot="alert-description"] > *{ color: hsl(var(--destructive) / 0.9); } .data-\[panel-group-direction\=vertical\]\:after\:left-0[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); left: 0px; } .data-\[panel-group-direction\=vertical\]\:after\:h-1[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); height: 0.25rem; } .data-\[panel-group-direction\=vertical\]\:after\:w-full[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); width: 100%; } .data-\[panel-group-direction\=vertical\]\:after\:-translate-y-1\/2[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); --tw-translate-y: -50%; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[panel-group-direction\=vertical\]\:after\:translate-x-0[data-panel-group-direction="vertical"]::after{ content: var(--tw-content); --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .data-\[variant\=outline\]\:first\:border-l:first-child[data-variant="outline"]{ border-left-width: 1px; } .data-\[active\=true\]\:hover\:bg-accent:hover[data-active="true"]{ background-color: hsl(var(--accent)); } .data-\[state\=open\]\:hover\:bg-accent:hover[data-state="open"]{ background-color: hsl(var(--accent)); } .data-\[state\=open\]\:hover\:bg-sidebar-accent:hover[data-state="open"]{ background-color: hsl(var(--sidebar-accent)); } .data-\[state\=open\]\:hover\:text-sidebar-accent-foreground:hover[data-state="open"]{ color: hsl(var(--sidebar-accent-foreground)); } .data-\[active\=true\]\:focus\:bg-accent:focus[data-active="true"]{ background-color: hsl(var(--accent)); } .data-\[state\=open\]\:focus\:bg-accent:focus[data-state="open"]{ background-color: hsl(var(--accent)); } .data-\[variant\=destructive\]\:focus\:bg-tint-destructive:focus[data-variant="destructive"]{ background-color: color-mix(in srgb, hsl(var(--destructive)) 12%, hsl(var(--card))); } .data-\[variant\=destructive\]\:focus\:text-destructive:focus[data-variant="destructive"]{ color: hsl(var(--destructive)); } .group[data-disabled="true"] .group-data-\[disabled\=true\]\:pointer-events-none{ pointer-events: none; } .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:relative{ position: relative; } .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:left-\[calc\(var\(--sidebar-width\)\*-1\)\]{ left: calc(var(--sidebar-width) * -1); } .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:right-\[calc\(var\(--sidebar-width\)\*-1\)\]{ right: calc(var(--sidebar-width) * -1); } .group[data-side="left"] .group-data-\[side\=left\]\:-right-4{ right: -1rem; } .group[data-side="right"] .group-data-\[side\=right\]\:left-0{ left: 0px; } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:top-full{ top: 100%; } .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:z-10{ z-index: 10; } .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:-mt-8{ margin-top: -2rem; } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:mt-1\.5{ margin-top: 0.375rem; } .group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:block{ display: block; } .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:hidden{ display: none; } .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\)\]{ width: calc(var(--sidebar-width-icon) + (--spacing(4))); } .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:w-\[calc\(var\(--sidebar-width-icon\)\+\(--spacing\(4\)\)\+2px\)\]{ width: calc(var(--sidebar-width-icon) + (--spacing(4)) + 2px); } .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:w-0{ width: 0px; } .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:translate-x-0{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group[data-side="right"] .group-data-\[side\=right\]\:rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group[data-state="open"] .group-data-\[state\=open\]\:rotate-180{ --tw-rotate: 180deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:overflow-hidden{ overflow: hidden; } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:overflow-hidden{ overflow: hidden; } .group[data-variant="floating"] .group-data-\[variant\=floating\]\:rounded-lg{ border-radius: var(--radius); } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:rounded-md{ border-radius: calc(var(--radius) - 2px); } .group[data-variant="floating"] .group-data-\[variant\=floating\]\:border{ border-width: 1px; } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:border{ border-width: 1px; } .group[data-side="left"] .group-data-\[side\=left\]\:border-r{ border-right-width: 1px; } .group[data-side="right"] .group-data-\[side\=right\]\:border-l{ border-left-width: 1px; } .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:border-ring{ border-color: hsl(var(--ring)); } .group[data-variant="floating"] .group-data-\[variant\=floating\]\:border-sidebar-border{ border-color: hsl(var(--sidebar-border)); } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:bg-popover{ background-color: hsl(var(--popover)); } .group\/drawer-content[data-vaul-drawer-direction="bottom"] .group-data-\[vaul-drawer-direction\=bottom\]\/drawer-content\:text-center{ text-align: center; } .group\/drawer-content[data-vaul-drawer-direction="top"] .group-data-\[vaul-drawer-direction\=top\]\/drawer-content\:text-center{ text-align: center; } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:text-popover-foreground{ color: hsl(var(--popover-foreground)); } .group[data-collapsible="icon"] .group-data-\[collapsible\=icon\]\:opacity-0{ opacity: 0; } .group[data-disabled="true"] .group-data-\[disabled\=true\]\:opacity-50{ opacity: 0.5; } .group[data-variant="floating"] .group-data-\[variant\=floating\]\:shadow-sm{ --tw-shadow: var(--shadow-sm); --tw-shadow-colored: var(--shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:shadow{ --tw-shadow: var(--shadow); --tw-shadow-colored: var(--shadow); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-\[3px\]{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .group\/day[data-focused="true"] .group-data-\[focused\=true\]\/day\:ring-ring\/50{ --tw-ring-color: hsl(var(--ring) / 0.5); } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:transition-opacity{ transition-property: opacity; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); transition-duration: 150ms; } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:duration-150{ transition-duration: 150ms; animation-duration: 150ms; } .group[data-collapsible="offcanvas"] .group-data-\[collapsible\=offcanvas\]\:after\:left-full::after{ content: var(--tw-content); left: 100%; } .group[data-collapsible="offcanvas"] .hover\:group-data-\[collapsible\=offcanvas\]\:bg-sidebar:hover{ background-color: hsl(var(--sidebar)); } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=closed\]\:opacity-0[data-state="closed"]{ opacity: 0; } .group\/navigation-menu[data-viewport="false"] .group-data-\[viewport\=false\]\/navigation-menu\:data-\[state\=open\]\:opacity-100[data-state="open"]{ opacity: 1; } .peer\/menu-button[data-size="default"] ~ .peer-data-\[size\=default\]\/menu-button\:top-1\.5{ top: 0.375rem; } .peer\/menu-button[data-size="lg"] ~ .peer-data-\[size\=lg\]\/menu-button\:top-2\.5{ top: 0.625rem; } .peer\/menu-button[data-size="sm"] ~ .peer-data-\[size\=sm\]\/menu-button\:top-1{ top: 0.25rem; } .peer\/menu-button[data-active="true"] ~ .peer-data-\[active\=true\]\/menu-button\:text-sidebar-accent-foreground{ color: hsl(var(--sidebar-accent-foreground)); } @media (prefers-reduced-motion: reduce){ .motion-reduce\:animate-none{ animation: none; } } .dark\:border-input:is(.dark *){ border-color: hsl(var(--input)); } .dark\:bg-destructive\/60:is(.dark *){ background-color: hsl(var(--destructive) / 0.6); } .dark\:bg-input\/30:is(.dark *){ background-color: hsl(var(--input) / 0.3); } .dark\:text-muted-foreground:is(.dark *){ color: hsl(var(--muted-foreground)); } .dark\:hover\:bg-accent\/50:hover:is(.dark *){ background-color: hsl(var(--accent) / 0.5); } .dark\:hover\:bg-input\/50:hover:is(.dark *){ background-color: hsl(var(--input) / 0.5); } .dark\:hover\:text-accent-foreground:hover:is(.dark *){ color: hsl(var(--accent-foreground)); } .dark\:focus-visible\:ring-destructive\/40:focus-visible:is(.dark *){ --tw-ring-color: hsl(var(--destructive) / 0.4); } .dark\:data-\[state\=active\]\:border-input[data-state="active"]:is(.dark *){ border-color: hsl(var(--input)); } .dark\:data-\[state\=active\]\:bg-input\/30[data-state="active"]:is(.dark *){ background-color: hsl(var(--input) / 0.3); } .dark\:data-\[state\=checked\]\:bg-primary[data-state="checked"]:is(.dark *){ background-color: hsl(var(--primary)); } .dark\:data-\[state\=checked\]\:bg-primary-foreground[data-state="checked"]:is(.dark *){ background-color: hsl(var(--primary-foreground)); } .dark\:data-\[state\=unchecked\]\:bg-foreground[data-state="unchecked"]:is(.dark *){ background-color: hsl(var(--foreground)); } .dark\:data-\[state\=unchecked\]\:bg-input\/80[data-state="unchecked"]:is(.dark *){ background-color: hsl(var(--input) / 0.8); } .dark\:data-\[state\=active\]\:text-foreground[data-state="active"]:is(.dark *){ color: hsl(var(--foreground)); } .dark\:data-\[variant\=destructive\]\:focus\:bg-tint-destructive-strong:focus[data-variant="destructive"]:is(.dark *){ background-color: color-mix(in srgb, hsl(var(--destructive)) 18%, hsl(var(--card))); } @media (min-width: 640px){ .sm\:block{ display: block; } .sm\:flex{ display: flex; } .sm\:max-w-lg{ max-width: 32rem; } .sm\:max-w-md{ max-width: 28rem; } .sm\:max-w-sm{ max-width: 24rem; } .sm\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .sm\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .sm\:flex-row{ flex-direction: row; } .sm\:items-center{ align-items: center; } .sm\:justify-end{ justify-content: flex-end; } .sm\:justify-center{ justify-content: center; } .sm\:gap-2\.5{ gap: 0.625rem; } .sm\:self-auto{ align-self: auto; } .sm\:px-6{ padding-left: 1.5rem; padding-right: 1.5rem; } .sm\:py-20{ padding-top: 5rem; padding-bottom: 5rem; } .sm\:py-28{ padding-top: 7rem; padding-bottom: 7rem; } .sm\:pl-2\.5{ padding-left: 0.625rem; } .sm\:pr-2\.5{ padding-right: 0.625rem; } .sm\:text-left{ text-align: left; } .sm\:text-3xl{ font-size: 1.875rem; line-height: 2.25rem; } .sm\:text-4xl{ font-size: 2.25rem; line-height: 2.5rem; } .sm\:text-5xl{ font-size: 3rem; line-height: 1; } .sm\:text-xl{ font-size: 1.25rem; line-height: 1.75rem; } .data-\[vaul-drawer-direction\=left\]\:sm\:max-w-sm[data-vaul-drawer-direction="left"]{ max-width: 24rem; } .data-\[vaul-drawer-direction\=right\]\:sm\:max-w-sm[data-vaul-drawer-direction="right"]{ max-width: 24rem; } } @media (min-width: 768px){ .md\:static{ position: static; } .md\:absolute{ position: absolute; } .md\:sticky{ position: sticky; } .md\:top-5{ top: 1.25rem; } .md\:col-span-2{ grid-column: span 2 / span 2; } .md\:col-span-3{ grid-column: span 3 / span 3; } .md\:block{ display: block; } .md\:flex{ display: flex; } .md\:hidden{ display: none; } .md\:w-16{ width: 4rem; } .md\:w-60{ width: 15rem; } .md\:w-\[var\(--radix-navigation-menu-viewport-width\)\]{ width: var(--radix-navigation-menu-viewport-width); } .md\:w-\[var\(--settings-nav-w\)\]{ width: var(--settings-nav-w); } .md\:w-auto{ width: auto; } .md\:w-full{ width: 100%; } .md\:flex-none{ flex: none; } .md\:flex-shrink-0{ flex-shrink: 0; } .md\:translate-x-0{ --tw-translate-x: 0px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .md\:grid-cols-5{ grid-template-columns: repeat(5, minmax(0, 1fr)); } .md\:flex-row{ flex-direction: row; } .md\:flex-col{ flex-direction: column; } .md\:items-start{ align-items: flex-start; } .md\:justify-center{ justify-content: center; } .md\:justify-between{ justify-content: space-between; } .md\:gap-1\.5{ gap: 0.375rem; } .md\:gap-8{ gap: 2rem; } .md\:border-0{ border-width: 0px; } .md\:px-1{ padding-left: 0.25rem; padding-right: 0.25rem; } .md\:py-\[7px\]{ padding-top: 7px; padding-bottom: 7px; } .md\:text-left{ text-align: left; } .md\:text-sm{ font-size: 0.875rem; line-height: 1.25rem; } .md\:opacity-0{ opacity: 0; } .md\:transition-none{ transition-property: none; } .md\:after\:hidden::after{ content: var(--tw-content); display: none; } .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:m-2{ margin: 0.5rem; } .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:ml-0{ margin-left: 0px; } .peer[data-variant="inset"][data-state="collapsed"] ~ .md\:peer-data-\[variant\=inset\]\:peer-data-\[state\=collapsed\]\:ml-2{ margin-left: 0.5rem; } .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:rounded-xl{ border-radius: 0.75rem; } .peer[data-variant="inset"] ~ .md\:peer-data-\[variant\=inset\]\:shadow-sm{ --tw-shadow: var(--shadow-sm); --tw-shadow-colored: var(--shadow-sm); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow); } } @media (min-width: 1024px){ .lg\:w-\[360px\]{ width: 360px; } .lg\:grid-cols-2{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .lg\:grid-cols-3{ grid-template-columns: repeat(3, minmax(0, 1fr)); } .lg\:grid-cols-4{ grid-template-columns: repeat(4, minmax(0, 1fr)); } .lg\:grid-cols-\[1\.6fr_1fr\]{ grid-template-columns: 1.6fr 1fr; } .lg\:flex-row{ flex-direction: row; } .lg\:border-l{ border-left-width: 1px; } .lg\:border-t-0{ border-top-width: 0px; } .lg\:text-6xl{ font-size: 3.75rem; line-height: 1; } } .\[\&\:first-child\[data-selected\=true\]_button\]\:rounded-l-md:first-child[data-selected=true] button{ border-top-left-radius: calc(var(--radius) - 2px); border-bottom-left-radius: calc(var(--radius) - 2px); } .\[\&\:has\(\[role\=checkbox\]\)\]\:pr-0:has([role=checkbox]){ padding-right: 0px; } .\[\&\:last-child\[data-selected\=true\]_button\]\:rounded-r-md:last-child[data-selected=true] button{ border-top-right-radius: calc(var(--radius) - 2px); border-bottom-right-radius: calc(var(--radius) - 2px); } .\[\&\>\[role\=checkbox\]\]\:translate-y-\[2px\]>[role=checkbox]{ --tw-translate-y: 2px; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&\>button\]\:hidden>button{ display: none; } .\[\&\>span\:last-child\]\:truncate>span:last-child{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .\[\&\>span\]\:text-xs>span{ font-size: 0.75rem; line-height: 1rem; } .\[\&\>span\]\:opacity-70>span{ opacity: 0.7; } .\[\&\>svg\]\:pointer-events-none>svg{ pointer-events: none; } .\[\&\>svg\]\:size-3>svg{ width: 0.75rem; height: 0.75rem; } .\[\&\>svg\]\:size-3\.5>svg{ width: 0.875rem; height: 0.875rem; } .\[\&\>svg\]\:size-4>svg{ width: 1rem; height: 1rem; } .\[\&\>svg\]\:h-2\.5>svg{ height: 0.625rem; } .\[\&\>svg\]\:h-3>svg{ height: 0.75rem; } .\[\&\>svg\]\:w-2\.5>svg{ width: 0.625rem; } .\[\&\>svg\]\:w-3>svg{ width: 0.75rem; } .\[\&\>svg\]\:shrink-0>svg{ flex-shrink: 0; } .\[\&\>svg\]\:translate-y-0\.5>svg{ --tw-translate-y: 0.125rem; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&\>svg\]\:text-current>svg{ color: currentColor; } .\[\&\>svg\]\:text-muted-foreground>svg{ color: hsl(var(--muted-foreground)); } .\[\&\>svg\]\:text-sidebar-accent-foreground>svg{ color: hsl(var(--sidebar-accent-foreground)); } .\[\&\>tr\]\:last\:border-b-0:last-child>tr{ border-bottom-width: 0px; } .\[\&\[data-panel-group-direction\=vertical\]\>div\]\:rotate-90[data-panel-group-direction=vertical]>div{ --tw-rotate: 90deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .\[\&_\.recharts-cartesian-axis-tick_text\]\:fill-muted-foreground .recharts-cartesian-axis-tick text{ fill: hsl(var(--muted-foreground)); } .\[\&_\.recharts-cartesian-grid_line\[stroke\=\'\#ccc\'\]\]\:stroke-border\/50 .recharts-cartesian-grid line[stroke='#ccc']{ stroke: hsl(var(--border) / 0.5); } .\[\&_\.recharts-curve\.recharts-tooltip-cursor\]\:stroke-border .recharts-curve.recharts-tooltip-cursor{ stroke: hsl(var(--border)); } .\[\&_\.recharts-dot\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-dot[stroke='#fff']{ stroke: transparent; } .\[\&_\.recharts-layer\]\:outline-hidden .recharts-layer { outline: 2px solid transparent; outline-offset: 2px; } .\[\&_\.recharts-polar-grid_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-polar-grid [stroke='#ccc']{ stroke: hsl(var(--border)); } .\[\&_\.recharts-radial-bar-background-sector\]\:fill-muted .recharts-radial-bar-background-sector{ fill: hsl(var(--muted)); } .\[\&_\.recharts-rectangle\.recharts-tooltip-cursor\]\:fill-muted .recharts-rectangle.recharts-tooltip-cursor{ fill: hsl(var(--muted)); } .\[\&_\.recharts-reference-line_\[stroke\=\'\#ccc\'\]\]\:stroke-border .recharts-reference-line [stroke='#ccc']{ stroke: hsl(var(--border)); } .\[\&_\.recharts-sector\[stroke\=\'\#fff\'\]\]\:stroke-transparent .recharts-sector[stroke='#fff']{ stroke: transparent; } .\[\&_\.recharts-sector\]\:outline-hidden .recharts-sector { outline: 2px solid transparent; outline-offset: 2px; } .\[\&_\.recharts-surface\]\:outline-hidden .recharts-surface { outline: 2px solid transparent; outline-offset: 2px; } .\[\&_\[cmdk-group-heading\]\]\:px-2 [cmdk-group-heading]{ padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-group-heading\]\]\:py-1\.5 [cmdk-group-heading]{ padding-top: 0.375rem; padding-bottom: 0.375rem; } .\[\&_\[cmdk-group-heading\]\]\:text-xs [cmdk-group-heading]{ font-size: 0.75rem; line-height: 1rem; } .\[\&_\[cmdk-group-heading\]\]\:font-medium [cmdk-group-heading]{ font-weight: 500; } .\[\&_\[cmdk-group-heading\]\]\:text-muted-foreground [cmdk-group-heading]{ color: hsl(var(--muted-foreground)); } .\[\&_\[cmdk-group\]\:not\(\[hidden\]\)_\~\[cmdk-group\]\]\:pt-0 [cmdk-group]:not([hidden]) ~[cmdk-group]{ padding-top: 0px; } .\[\&_\[cmdk-group\]\]\:px-2 [cmdk-group]{ padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-input-wrapper\]_svg\]\:h-5 [cmdk-input-wrapper] svg{ height: 1.25rem; } .\[\&_\[cmdk-input-wrapper\]_svg\]\:w-5 [cmdk-input-wrapper] svg{ width: 1.25rem; } .\[\&_\[cmdk-input\]\]\:h-12 [cmdk-input]{ height: 3rem; } .\[\&_\[cmdk-item\]\]\:px-2 [cmdk-item]{ padding-left: 0.5rem; padding-right: 0.5rem; } .\[\&_\[cmdk-item\]\]\:py-3 [cmdk-item]{ padding-top: 0.75rem; padding-bottom: 0.75rem; } .\[\&_\[cmdk-item\]_svg\]\:h-5 [cmdk-item] svg{ height: 1.25rem; } .\[\&_\[cmdk-item\]_svg\]\:w-5 [cmdk-item] svg{ width: 1.25rem; } .\[\&_button\]\:focus-visible\:ring-2:focus-visible button{ --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color); box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } .\[\&_button\]\:focus-visible\:ring-primary:focus-visible button{ --tw-ring-color: hsl(var(--primary)); } .\[\&_button\]\:focus-visible\:ring-offset-2:focus-visible button{ --tw-ring-offset-width: 2px; } .\[\&_button\]\:disabled\:cursor-not-allowed:disabled button{ cursor: not-allowed; } .\[\&_button\]\:disabled\:opacity-50:disabled button{ opacity: 0.5; } .\[\&_p\]\:leading-relaxed p{ line-height: 1.625; } .\[\&_svg\:not\(\[class\*\=\'size-\'\]\)\]\:size-4 svg:not([class*='size-']){ width: 1rem; height: 1rem; } .\[\&_svg\:not\(\[class\*\=\'text-\'\]\)\]\:text-muted-foreground svg:not([class*='text-']){ color: hsl(var(--muted-foreground)); } .\[\&_svg\]\:pointer-events-none svg{ pointer-events: none; } .\[\&_svg\]\:size-4 svg{ width: 1rem; height: 1rem; } .\[\&_svg\]\:shrink-0 svg{ flex-shrink: 0; } .\[\&_tr\:last-child\]\:border-0 tr:last-child{ border-width: 0px; } .\[\&_tr\]\:border-b tr{ border-bottom-width: 1px; } [data-side=left][data-collapsible=offcanvas] .\[\[data-side\=left\]\[data-collapsible\=offcanvas\]_\&\]\:-right-2{ right: -0.5rem; } [data-side=left][data-state=collapsed] .\[\[data-side\=left\]\[data-state\=collapsed\]_\&\]\:cursor-e-resize{ cursor: e-resize; } [data-side=right][data-collapsible=offcanvas] .\[\[data-side\=right\]\[data-collapsible\=offcanvas\]_\&\]\:-left-2{ left: -0.5rem; } [data-side=right][data-state=collapsed] .\[\[data-side\=right\]\[data-state\=collapsed\]_\&\]\:cursor-w-resize{ cursor: w-resize; } [data-slot=card-content] .\[\[data-slot\=card-content\]_\&\]\:bg-transparent{ background-color: transparent; } [data-slot=popover-content] .\[\[data-slot\=popover-content\]_\&\]\:bg-transparent{ background-color: transparent; } a.\[a\&\]\:hover\:bg-accent:hover{ background-color: hsl(var(--accent)); } a.\[a\&\]\:hover\:bg-destructive\/90:hover{ background-color: hsl(var(--destructive) / 0.9); } a.\[a\&\]\:hover\:bg-primary\/90:hover{ background-color: hsl(var(--primary) / 0.9); } a.\[a\&\]\:hover\:bg-secondary\/90:hover{ background-color: hsl(var(--secondary) / 0.9); } a.\[a\&\]\:hover\:text-accent-foreground:hover{ color: hsl(var(--accent-foreground)); }