@dev-dga/css 0.5.0 → 0.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (32) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/dist/components/date-picker.css +2 -0
  3. package/dist/components/date-picker.css.map +1 -0
  4. package/dist/components/description-list.css +2 -0
  5. package/dist/components/description-list.css.map +1 -0
  6. package/dist/components/empty-state.css +2 -0
  7. package/dist/components/empty-state.css.map +1 -0
  8. package/dist/components/file-upload.css +2 -0
  9. package/dist/components/file-upload.css.map +1 -0
  10. package/dist/components/menubar.css +2 -0
  11. package/dist/components/menubar.css.map +1 -0
  12. package/dist/components/number-input.css +2 -0
  13. package/dist/components/number-input.css.map +1 -0
  14. package/dist/components/popover.css +2 -0
  15. package/dist/components/popover.css.map +1 -0
  16. package/dist/components/rating.css +2 -0
  17. package/dist/components/rating.css.map +1 -0
  18. package/dist/components/scroll-area.css +2 -0
  19. package/dist/components/scroll-area.css.map +1 -0
  20. package/dist/components/sidebar.css +2 -0
  21. package/dist/components/sidebar.css.map +1 -0
  22. package/dist/components/slider.css +2 -0
  23. package/dist/components/slider.css.map +1 -0
  24. package/dist/components/stat.css +2 -0
  25. package/dist/components/stat.css.map +1 -0
  26. package/dist/components/timeline.css +2 -0
  27. package/dist/components/timeline.css.map +1 -0
  28. package/dist/components/toggle.css +2 -0
  29. package/dist/components/toggle.css.map +1 -0
  30. package/dist/index.css +1 -1
  31. package/dist/index.css.map +1 -1
  32. package/package.json +4 -3
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,iBMAA,i8IFCA,g1COAA,oOAQA,wOAQA,6OAQA,uPAQA,uPAQA,wOAQA,2OAQA,4PRzDA,0DAQA,2MAWA,yCHnBA,uBUKE,uEAMA,iFAMA,8DAIA,0DFlBA,4VAqBA,4GAIA,sHAMA,kHAIA,0HAMA,sHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,wIAKA,uHAMA,2GAIA,uHAMA,2FAIA,qHAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAaA,wHAKA,+DAGA,+MAIA,8GAGA,0IAMA,2FAGA,uOAWA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,qFAMA,wHAQA,+CAMA,8BACE,yCAGA,uDAGA,6FetPF,gJAOA,gFAOA,4RAgBA,sGAKA,wGAKA,sGAQA,yIAYA,mEAQA,0PAAA,gQAAA,gQAWA,kJAYA,2DAOA,wFAGA,oFAMA,yGAOA,wDAGA,kHAOA,oHAKA,mFAIA,sGAMA,uCACE,6BAOF,8BACE,wCAGA,qDAGA,mFtB1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DQpHF,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA,8DQrIF,8KAQA,sFAOA,uDAIA,kDAGA,6CAOA,wEAQA,yQAgBA,mEAIA,mEAOA,uEAMA,mFAOA,0EAGA,mHAGA,gGAMA,mDAIA,gHAOA,sHAOA,+GASA,sHASA,uCACE,6BAOF,8BACE,wCAGA,uDAGA,6CAGA,yEAIA,2DErJF,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,0FAOA,uHAMA,iFAOA,uCACE,kDAQF,8BACE,iEAIA,4DAGA,gEAIA,oFAGA,0EAIA,6CjB3JF,iJAOA,iFAOA,0WAmBA,+GAKA,iHAQA,gIAOA,0EAIA,qGAQA,iEAGA,4HAOA,wFAKA,uEAMA,0VAgBA,kDAMA,oYAoBA,6EAIA,wGAQA,2JAOA,wDAOA,uCACE,yDAQF,8BACE,iDAGA,kFAIA,mEAIA,iDAGA,mFAIA,kDkBzLF,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,kGAIA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,4EAMA,+GAOA,0JAQA,qHAOA,qDAMA,qDAWA,0JASA,4CAMA,uCACE,4BAOF,uHF1MA,2SAgBA,kGAMA,kGAQA,sFAKA,2GAKA,iHAKA,uHAKA,2GAKA,2GAKA,kGAOA,yFAKA,+FAKA,mGAKA,mGAKA,mGAKA,0FAOA,qHAQA,oIAUA,8FAOA,+EAOA,gDAOA,0RAmBA,0DAKA,4FAIA,6FAOA,8BACE,yCQ9KF,qEAQA,6HAWA,4KAWA,+EAGA,8EAMA,oHAUA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAQA,8BACE,kGrB1FF,gZAqBA,yCAGA,yCAGA,yCAGA,yCAGA,yCAMA,2DAIA,yDAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,2IAOA,kEAMA,8BACE,+DO9JF,mTAqBA,0HAMA,0HAQA,mDAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAYF,8BACE,2CClFF,kaAsBA,uIAMA,mJAMA,mJAMA,uJAQA,4LAYA,uDAOA,sGAQA,0IAQA,8GAWA,0TAoBA,sDAIA,8DAIA,sGAUA,2GAIA,iHAIA,iHAIA,mHAIA,sEAMA,8BACE,oCAGA,8EQ9JF,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAUA,iGAQA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA,8EO1MF,sNAiBA,2CAIA,sDAaA,yEAIA,0EAKA,qEAIA,wGAKA,8GAMA,oGAQA,8gBAgCA,kGAMA,kEAGA,6DAGA,mEAGA,mEAGA,2EAMA,4LAWA,uDAOA,iJAWA,iJAQA,6HASA,8bAkBA,yGAIA,6FAOA,kYAoBA,wDAIA,4EAIA,sGAeA,mFAGA,sEAMA,6GAGA,4GAKA,4HAOA,0FAIA,mEAIA,sGAUA,6GAUA,gHAUA,0EAUA,uCACE,gGASF,8BACE,oCAGA,gHE5UF,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,2IAKA,6IAQA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA,kFDvMF,sFAQA,iIAcA,sFAQA,uIAOA,gHAMA,6HAQA,sEAOA,mGAMA,+DAQA,+DAMA,2IAQA,8DAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yCE3HF,oFAQA,oIAYA,2CAMA,sYAoBA,qGAKA,8FAOA,4JAMA,iIAOA,iFAKA,0DASA,0DAGA,mEAGA,gEAMA,8JASA,8DAOA,0KAOA,oKASA,uCACE,wCAOF,8BACE,kEAIA,qGAKA,qFxBnJF,uJAUA,4EAMA,8CAOA,mVAmBA,+DAIA,oIAQA,+HAQA,4FAMA,0EAKA,qFAGA,qFAIA,qFAKA,oGAQA,kGAWA,kHAIA,oHAOA,uCACE,qGAIA,0CAOF,8BACE,8DAIA,uFQpIF,+GASA,0FAMA,oEAOA,0EAOA,+GAKA,0GAcA,oQAYA,kQAcA,2KAOA,+aAuBA,+EAOA,iLAKA,+EAGA,wEAKA,yHAOA,kGAOA,6FAKA,+EAIA,iKAUA,mDAGA,mDAMA,uCACE,wCAOF,8BACE,gEAIA,6IAKA,uEAGA,4JClMF,4GAOA,iCAGA,mCAGA,iCAIA,yEASA,uCACE,uCS3BF,yIAUA,+EAMA,iDAKA,oFAQA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,wCAIA,uCACE,iEXpFF,8IAQA,kCAGA,kCAGA,mCAIA,wEAGA,wEAGA,wEAGA,gFAIA,yLAUA,sMAOA,2FAUA,oHAIA,+FAWA,sHAQA,iFAGA,iFAGA,iFAGA,yFAIA,2CAIA,2DAIA,yIAKA,0JAKA,oEAMA,6OAYA,6EAGA,8FAKA,uCACE,iKAIA,8EQ/IF,wUAgBA,mGAGA,qFAIA,iIAUA,6DAWA,2DAGA,2DAMA,wUAiBA,qFAIA,6FAOA,gFAGA,oGAKA,iHAQA,sKASA,6DAKA,+IASA,+GAMA,sQAYA,yEAIA,yJAYA,yFAIA,yHAQA,gEAMA,oQAUA,sKASA,8BACE,gDAGA,2FAIA,4DAOF,uCACE,4FE/MF,0IAWA,6EAGA,gFAIA,6DAQA,8DAWA,gUAkBA,kIAMA,8HAMA,8HAMA,+HAYA,mGAIA,mGAIA,mGAIA,4FAKA,mGAIA,mGAIA,mGAIA,4FAOA,+EAGA,kFAGA,2EAGA,8EAGA,2EAGA,8EAGA,iFAGA,oFAOA,+FAQA,gGAQA,4FAQA,6FAQA,+FAQA,gGAQA,iGAQA,kGAWA,uFAGA,0FAGA,uFAGA,0FAMA,mHAMA,0FAOA,8PAaA,gKAQA,6HAQA,iWAiBA,sGAIA,8FAIA,+DAOA,uCACE,mDAQF,8BACE,0CG3TF,2OASA,uDAOA,oYAkBA,iHAKA,mHAMA,kIAMA,uGAMA,mEAGA,8HAKA,4GAQA,+DAIA,mGASA,wQAeA,iGAGA,mFAGA,4HAUA,wDAWA,yFAMA,uOAWA,qEAMA,2FAOA,+KAQA,oVAoBA,iFAGA,4FAKA,sKASA,oEAIA,iHAUA,6QAUA,gKASA,uCACE,kGAMF,8BACE,0EAIA","sources":["src/index.css","src/components/textarea.css","src/reset.css","src/dark.css","src/components/avatar.css","src/components/tooltip.css","src/variables.css","src/components/accordion.css","src/components/steps.css","src/components/checkbox.css","src/components/field.css","src/themes.css","src/components/select.css","src/components/alert.css","src/components/progress.css","src/components/button.css","src/components/input.css","src/components/radio.css","src/components/badge.css","src/components/switch.css","src/components/combobox.css","src/components/modal.css","src/components/dropdown-menu.css","src/components/spinner.css","src/components/drawer.css","src/components/skeleton.css","src/components/divider.css","src/components/card.css","src/components/toast.css","src/components/breadcrumb.css","src/components/tabs.css","src/components/pagination.css"],"sourcesContent":["@layer ddga-base, ddga-components;\n\n@import './variables.css' layer(ddga-base);\n@import './dark.css' layer(ddga-base);\n/* themes.css imported AFTER dark.css so `.ddga-theme-*` classes win over\n dark.css's primary override (dark mode + explicit theme = theme wins). */\n@import './themes.css' layer(ddga-base);\n@import './reset.css' layer(ddga-base);\n\n@import './components/field.css';\n@import './components/button.css';\n@import './components/input.css';\n@import './components/textarea.css';\n@import './components/checkbox.css';\n@import './components/radio.css';\n@import './components/switch.css';\n@import './components/select.css';\n@import './components/card.css';\n@import './components/badge.css';\n@import './components/divider.css';\n@import './components/avatar.css';\n@import './components/tooltip.css';\n@import './components/alert.css';\n@import './components/modal.css';\n@import './components/toast.css';\n@import './components/tabs.css';\n@import './components/breadcrumb.css';\n@import './components/pagination.css';\n@import './components/accordion.css';\n@import './components/steps.css';\n@import './components/spinner.css';\n@import './components/skeleton.css';\n@import './components/progress.css';\n@import './components/dropdown-menu.css';\n@import './components/drawer.css';\n@import './components/combobox.css';\n/* AUTO:COMPONENT_IMPORTS */\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Textarea-specific styles live here. */\n\n /* ─── Label ─── */\n\n .ddga-textarea__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-textarea__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Textarea (owns border/focus/state , no adornments) ─── */\n\n .ddga-textarea {\n display: block;\n inline-size: 100%;\n min-block-size: 4.5rem;\n padding-block: var(--ddga-space-2);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.6;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-textarea::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* Autofill (e.g. address fields): repaint with tokens , see input.css. */\n .ddga-textarea:-webkit-autofill,\n .ddga-textarea:-webkit-autofill:hover,\n .ddga-textarea:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-text-primary);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-text-primary);\n }\n\n /* ─── Sizes (font + inline padding; height is driven by `rows`) ─── */\n\n .ddga-textarea--sm {\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-textarea--md {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-textarea--lg {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Resize (vertical only or locked; horizontal breaks layout) ─── */\n\n .ddga-textarea--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea--resize-none {\n resize: none;\n }\n\n /* ─── Focus ─── */\n\n .ddga-textarea:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-textarea--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-textarea--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── States ─── */\n\n .ddga-textarea:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n resize: none;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-textarea:read-only:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-textarea {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-textarea:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: var(--ddga-font-ar);\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-background);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Block-level SVGs: removes the inline baseline gap so icons sit centered\n inside flex controls (buttons, input adornments). Standard reset. */\nsvg {\n display: block;\n vertical-align: middle;\n}\n","/* Dark mode , DGA-aligned using neutral gray scale. */\n[data-theme='dark'] {\n color-scheme: dark;\n\n /* ─── Surface / Layout (Gray 900-based) ─── */\n --ddga-color-background: #111927;\n --ddga-color-foreground: #f3f4f6;\n --ddga-color-muted: #1f2a37;\n --ddga-color-muted-foreground: #9da4ae;\n --ddga-color-border: #384250;\n --ddga-color-card: #1f2a37;\n --ddga-color-card-foreground: #f3f4f6;\n --ddga-color-input: #384250;\n\n /* ─── Primary (SA Green , slightly lighter for dark bg) ─── */\n --ddga-color-primary: #54c08a;\n --ddga-color-primary-hover: #88d8ad;\n --ddga-color-primary-active: #25935f;\n --ddga-color-primary-foreground: #0d121c;\n\n /* ─── Secondary ─── */\n --ddga-color-secondary: #1f2a37;\n --ddga-color-secondary-hover: #384250;\n --ddga-color-secondary-foreground: #f3f4f6;\n\n /* ─── Destructive ─── */\n --ddga-color-destructive: #f97066;\n --ddga-color-destructive-hover: #f04438;\n --ddga-color-destructive-foreground: #0d121c;\n\n /* ─── Semantic , lighter shades for dark bg legibility ─── */\n --ddga-color-error: #f97066;\n --ddga-color-error-hover: #f04438;\n --ddga-color-error-foreground: #0d121c;\n --ddga-color-success: #47cd89;\n --ddga-color-success-hover: #17b26a;\n --ddga-color-success-foreground: #0d121c;\n --ddga-color-warning: #fdb022;\n --ddga-color-warning-hover: #f79009;\n --ddga-color-warning-foreground: #0d121c;\n --ddga-color-info: #53b1fd;\n --ddga-color-info-hover: #2e90fa;\n --ddga-color-info-foreground: #0d121c;\n\n /* ─── Focus ring ─── */\n --ddga-color-ring: #54c08a;\n\n /* ─── Text ─── */\n --ddga-text-primary: #ffffff;\n --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n --ddga-text-placeholder: #6c737f;\n\n /* ─── Shadows , stronger for dark backgrounds ─── */\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n","@layer ddga-components {\n /* ─── Root ─── */\n\n .ddga-avatar {\n --ddga-avatar-size: 40px;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: var(--ddga-avatar-size);\n block-size: var(--ddga-avatar-size);\n /* Don't clip the status dot — it's positioned half-outside the root. */\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n /* Font sizing tracks the avatar size so fallback initials scale naturally. */\n font-size: calc(var(--ddga-avatar-size) * 0.4);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1;\n vertical-align: middle;\n }\n\n /* ─── Sizes (drive both the box + the fallback font via the var) ─── */\n\n .ddga-avatar--xs {\n --ddga-avatar-size: 24px;\n }\n .ddga-avatar--sm {\n --ddga-avatar-size: 32px;\n }\n .ddga-avatar--md {\n --ddga-avatar-size: 40px;\n }\n .ddga-avatar--lg {\n --ddga-avatar-size: 48px;\n }\n .ddga-avatar--xl {\n --ddga-avatar-size: 64px;\n }\n\n /* ─── Shapes ─── */\n\n .ddga-avatar--circle {\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-avatar--square {\n border-radius: var(--ddga-radius-md);\n }\n\n /* ─── Image / Fallback (clip to the root's shape) ─── */\n\n .ddga-avatar__image,\n .ddga-avatar__fallback {\n inline-size: 100%;\n block-size: 100%;\n border-radius: inherit;\n }\n\n .ddga-avatar__image {\n object-fit: cover;\n }\n\n .ddga-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: inherit;\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n text-transform: uppercase;\n }\n\n /* Tonal color schemes — useful for distinguishing avatars by team/role/\n status in chat & team UIs. Each pair uses the same -100/-700-800 tonal\n scale as Badge subtle variants, so the family reads consistently. */\n .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-100);\n color: var(--ddga-sa-800);\n }\n .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-800);\n }\n .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-100);\n color: var(--ddga-success-700);\n }\n .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-100);\n color: var(--ddga-warning-700);\n }\n .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-100);\n color: var(--ddga-error-700);\n }\n .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-100);\n color: var(--ddga-info-700);\n }\n\n /* ─── Status indicator (bottom-end corner, RTL-aware via logical props) ─── */\n\n .ddga-avatar__status {\n position: absolute;\n inset-block-end: 0;\n inset-inline-end: 0;\n inline-size: calc(var(--ddga-avatar-size) * 0.25);\n block-size: calc(var(--ddga-avatar-size) * 0.25);\n min-inline-size: 8px;\n min-block-size: 8px;\n border-radius: var(--ddga-radius-full);\n /* Cuts a \"ring\" out of the avatar so the dot reads as separate. */\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n\n .ddga-avatar__status--online {\n background-color: var(--ddga-color-success);\n }\n .ddga-avatar__status--busy {\n background-color: var(--ddga-color-destructive);\n }\n .ddga-avatar__status--away {\n background-color: var(--ddga-color-warning);\n }\n .ddga-avatar__status--offline {\n background-color: var(--ddga-gray-400);\n }\n\n /* Square avatars: tuck the status into the corner instead of overhanging,\n because a square corner doesn't disguise the overhang the way a circle does. */\n .ddga-avatar--square .ddga-avatar__status {\n inset-block-end: 2px;\n inset-inline-end: 2px;\n }\n\n /* ─── Group ─── */\n\n .ddga-avatar-group {\n display: inline-flex;\n align-items: center;\n }\n .ddga-avatar-group > .ddga-avatar {\n /* Each subsequent avatar tucks under the previous one. Logical margin\n so stacking flips correctly in RTL. */\n margin-inline-start: calc(var(--ddga-avatar-size) * -0.25);\n /* Ring around each so they read as separate even when overlapping. */\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n .ddga-avatar-group > .ddga-avatar:first-child {\n margin-inline-start: 0;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-avatar {\n border: 1px solid CanvasText;\n }\n .ddga-avatar__status {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Content ─── */\n\n .ddga-tooltip {\n /* Solid dark surface against light bgs; readable in both themes via\n semantic foreground/background swap in dark.css. */\n background-color: var(--ddga-text-primary);\n color: var(--ddga-color-background);\n border-radius: var(--ddga-radius-sm);\n box-shadow: var(--ddga-shadow-md);\n font-family: inherit;\n line-height: 1.4;\n /* Keep the tooltip from getting absurdly wide for long content. */\n max-inline-size: 260px;\n /* Ensure word-wrap works for long words / URLs. */\n overflow-wrap: anywhere;\n /* Above modals are higher; this sits above page content. */\n z-index: 50;\n /* Radix sets animation data attrs on state changes — use them for a\n light fade so the tooltip doesn't pop in jarringly. */\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-tooltip--sm {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-tooltip--md {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Arrow ─── */\n\n .ddga-tooltip__arrow {\n fill: var(--ddga-text-primary);\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-tooltip[data-state='delayed-open'],\n .ddga-tooltip[data-state='instant-open'] {\n animation-name: ddga-tooltip-in;\n }\n .ddga-tooltip[data-state='closed'] {\n animation-name: ddga-tooltip-out;\n }\n\n @keyframes ddga-tooltip-in {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-tooltip-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tooltip {\n animation-duration: 0ms;\n }\n }\n\n /* Dark mode: --ddga-text-primary remaps to a light tone and\n --ddga-color-background goes dark, so the tooltip becomes a light pill\n on a dark surface — still high contrast, just inverted. No override\n needed. */\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-tooltip {\n border: 1px solid CanvasText;\n }\n }\n}\n",":root {\n --ddga-color-primary: #25935F;\n --ddga-color-primary-hover: #1B8354;\n --ddga-color-primary-active: #166A45;\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-secondary: #F3F4F6;\n --ddga-color-secondary-hover: #E5E7EB;\n --ddga-color-secondary-foreground: #0D121C;\n --ddga-color-background: #FFFFFF;\n --ddga-color-foreground: #0D121C;\n --ddga-color-muted: #F3F4F6;\n --ddga-color-muted-foreground: #6C737F;\n --ddga-color-border: #E5E7EB;\n --ddga-color-input: #D2D6DB;\n --ddga-color-card: #FFFFFF;\n --ddga-color-card-foreground: #0D121C;\n --ddga-color-destructive: #D92D20;\n --ddga-color-destructive-hover: #B42318;\n --ddga-color-destructive-foreground: #FFFFFF;\n --ddga-color-error: #D92D20;\n --ddga-color-error-hover: #B42318;\n --ddga-color-error-foreground: #FFFFFF;\n --ddga-color-success: #079455;\n --ddga-color-success-hover: #067647;\n --ddga-color-success-foreground: #FFFFFF;\n --ddga-color-warning: #DC6803;\n --ddga-color-warning-hover: #B54708;\n --ddga-color-warning-foreground: #FFFFFF;\n --ddga-color-info: #1570EF;\n --ddga-color-info-hover: #175CD3;\n --ddga-color-info-foreground: #FFFFFF;\n --ddga-color-ring: #25935F;\n --ddga-text-primary: #0D121C;\n --ddga-text-secondary: #4D5761;\n --ddga-text-tertiary: #6C737F;\n --ddga-text-placeholder: #9DA4AE;\n --ddga-sa-25: #F7FDF9;\n --ddga-sa-50: #F3FCF6;\n --ddga-sa-100: #DFF6E7;\n --ddga-sa-200: #B8EACB;\n --ddga-sa-300: #88D8AD;\n --ddga-sa-400: #54C08A;\n --ddga-sa-500: #25935F;\n --ddga-sa-600: #1B8354;\n --ddga-sa-700: #166A45;\n --ddga-sa-800: #14573A;\n --ddga-sa-900: #104631;\n --ddga-sa-950: #092A1E;\n --ddga-gray-25: #FCFCFD;\n --ddga-gray-50: #F9FAFB;\n --ddga-gray-100: #F3F4F6;\n --ddga-gray-200: #E5E7EB;\n --ddga-gray-300: #D2D6DB;\n --ddga-gray-400: #9DA4AE;\n --ddga-gray-500: #6C737F;\n --ddga-gray-600: #4D5761;\n --ddga-gray-700: #384250;\n --ddga-gray-800: #1F2A37;\n --ddga-gray-900: #111927;\n --ddga-gray-950: #0D121C;\n --ddga-error-25: #FFFBFA;\n --ddga-error-50: #FEF3F2;\n --ddga-error-100: #FEE4E2;\n --ddga-error-200: #FECDCA;\n --ddga-error-300: #FDA29B;\n --ddga-error-400: #F97066;\n --ddga-error-500: #F04438;\n --ddga-error-600: #D92D20;\n --ddga-error-700: #B42318;\n --ddga-error-800: #912018;\n --ddga-error-900: #7A271A;\n --ddga-error-950: #55160C;\n --ddga-warning-25: #FFFCF5;\n --ddga-warning-50: #FFFAEB;\n --ddga-warning-100: #FEF0C7;\n --ddga-warning-200: #FEDF89;\n --ddga-warning-300: #FEC84B;\n --ddga-warning-400: #FDB022;\n --ddga-warning-500: #F79009;\n --ddga-warning-600: #DC6803;\n --ddga-warning-700: #B54708;\n --ddga-warning-800: #93370D;\n --ddga-warning-900: #7A2E0E;\n --ddga-warning-950: #4E1D09;\n --ddga-success-25: #F6FEF9;\n --ddga-success-50: #ECFDF3;\n --ddga-success-100: #DCFAE6;\n --ddga-success-200: #ABEFC6;\n --ddga-success-300: #75E0A7;\n --ddga-success-400: #47CD89;\n --ddga-success-500: #17B26A;\n --ddga-success-600: #079455;\n --ddga-success-700: #067647;\n --ddga-success-800: #085D3A;\n --ddga-success-900: #074D31;\n --ddga-success-950: #053321;\n --ddga-info-25: #F5FAFF;\n --ddga-info-50: #EFF8FF;\n --ddga-info-100: #D1E9FF;\n --ddga-info-200: #B2DDFF;\n --ddga-info-300: #84CAFF;\n --ddga-info-400: #53B1FD;\n --ddga-info-500: #2E90FA;\n --ddga-info-600: #1570EF;\n --ddga-info-700: #175CD3;\n --ddga-info-800: #1849A9;\n --ddga-info-900: #194185;\n --ddga-info-950: #102A56;\n --ddga-gold-25: #FFFEF7;\n --ddga-gold-50: #FFFEF2;\n --ddga-gold-100: #FFFCE6;\n --ddga-gold-200: #FCF3BD;\n --ddga-gold-300: #FAE996;\n --ddga-gold-400: #F7D54D;\n --ddga-gold-500: #F5BD02;\n --ddga-gold-600: #DBA102;\n --ddga-gold-700: #B87B02;\n --ddga-gold-800: #945C01;\n --ddga-gold-900: #6E3C00;\n --ddga-gold-950: #472400;\n --ddga-lavender-25: #FEFCFF;\n --ddga-lavender-50: #F9F5FA;\n --ddga-lavender-100: #F2E9F5;\n --ddga-lavender-200: #E1CCE8;\n --ddga-lavender-300: #CCADD9;\n --ddga-lavender-400: #A57BBA;\n --ddga-lavender-500: #80519F;\n --ddga-lavender-600: #6D428F;\n --ddga-lavender-700: #532D75;\n --ddga-lavender-800: #3D1D5E;\n --ddga-lavender-900: #281047;\n --ddga-lavender-950: #16072E;\n --ddga-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;\n --ddga-font-en: 'IBM Plex Sans Arabic', 'Inter', sans-serif;\n --ddga-font-mono: 'IBM Plex Mono', monospace;\n --ddga-font-weight-regular: 400;\n --ddga-font-weight-medium: 500;\n --ddga-font-weight-semibold: 600;\n --ddga-font-weight-bold: 700;\n --ddga-font-size-xs: 0.75rem;\n --ddga-font-size-sm: 0.875rem;\n --ddga-font-size-base: 1rem;\n --ddga-font-size-lg: 1.125rem;\n --ddga-font-size-xl: 1.25rem;\n --ddga-font-size-2xl: 1.5rem;\n --ddga-font-size-3xl: 2rem;\n --ddga-space-0: 0;\n --ddga-space-1: 0.25rem;\n --ddga-space-2: 0.5rem;\n --ddga-space-3: 0.75rem;\n --ddga-space-4: 1rem;\n --ddga-space-5: 1.25rem;\n --ddga-space-6: 1.5rem;\n --ddga-space-8: 2rem;\n --ddga-space-10: 2.5rem;\n --ddga-space-12: 3rem;\n --ddga-space-16: 4rem;\n --ddga-radius-none: 0;\n --ddga-radius-sm: 0.25rem;\n --ddga-radius-md: 0.5rem;\n --ddga-radius-lg: 0.75rem;\n --ddga-radius-xl: 1rem;\n --ddga-radius-full: 9999px;\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --ddga-shadow-none: none;\n}\n","@layer ddga-components {\n /* Size lives on the root; per-part visuals cascade. Radix exposes\n `--radix-accordion-content-height` on the Content element when open so\n we can animate the disclosure cleanly; the inner wrapper carries the\n padding so the animated container can clip without padding popping. */\n\n /* ─── Root ─── */\n\n .ddga-accordion {\n display: flex;\n flex-direction: column;\n inline-size: 100%;\n color: var(--ddga-text-primary);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Item ─── */\n\n .ddga-accordion__item {\n border-block-start: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Header (wraps the trigger button) ─── */\n\n .ddga-accordion__header {\n display: flex;\n margin: 0;\n }\n\n /* ─── Trigger (the disclosure button) ─── */\n\n .ddga-accordion__trigger {\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n inline-size: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-4);\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-weight: 500;\n text-align: start;\n cursor: pointer;\n transition: color 150ms ease;\n }\n\n .ddga-accordion__trigger:hover {\n color: var(--ddga-color-primary);\n }\n\n .ddga-accordion__trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Chevron ─── */\n\n .ddga-accordion__chevron {\n flex-shrink: 0;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n transition: transform 200ms ease;\n }\n\n .ddga-accordion__trigger[data-state='open'] .ddga-accordion__chevron {\n transform: rotate(180deg);\n }\n\n /* ─── Content (animated disclosure) ─── */\n\n .ddga-accordion__content {\n overflow: hidden;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-accordion__content[data-state='open'] {\n animation: ddga-accordion-down 200ms ease-out;\n }\n .ddga-accordion__content[data-state='closed'] {\n animation: ddga-accordion-up 200ms ease-out;\n }\n\n .ddga-accordion__content-inner {\n padding-block-end: var(--ddga-space-4);\n line-height: 1.5;\n }\n\n @keyframes ddga-accordion-down {\n from {\n block-size: 0;\n }\n to {\n block-size: var(--radix-accordion-content-height);\n }\n }\n @keyframes ddga-accordion-up {\n from {\n block-size: var(--radix-accordion-content-height);\n }\n to {\n block-size: 0;\n }\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-accordion--sm .ddga-accordion__trigger {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-accordion--md .ddga-accordion__trigger {\n padding-block: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-accordion__content[data-state='open'],\n .ddga-accordion__content[data-state='closed'] {\n animation: none;\n }\n .ddga-accordion__chevron {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-accordion,\n .ddga-accordion__item {\n border-color: CanvasText;\n }\n .ddga-accordion__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n","@layer ddga-components {\n /* Size + orientation live on the root; state lives on each Step. Separator\n lines are CSS-drawn via `::before` on every Step except the first,\n stretching backward to the previous Step's indicator. Logical\n properties handle the RTL flip — no JS, no JS conditional classes. */\n\n /* ─── Root (ol) ─── */\n\n .ddga-steps {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--ddga-text-primary);\n font-family: inherit;\n }\n\n .ddga-steps--horizontal {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n }\n\n .ddga-steps--vertical {\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n /* ─── Step (li) ─── */\n\n .ddga-steps__step {\n position: relative;\n display: flex;\n flex: 1;\n min-inline-size: 0;\n }\n\n .ddga-steps--horizontal .ddga-steps__step {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n }\n .ddga-steps--vertical .ddga-steps__step {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--ddga-space-3);\n }\n\n /* ─── Separator line (CSS-drawn, between siblings) ─── */\n /*\n * Horizontal: line stretches inline-end-ward from the indicator on this\n * step toward the next step. Vertical: line stretches block-end-ward.\n * Color reflects THIS step's state — when this step is completed the\n * line to the next is also completed. (Visual-only progress indicator.)\n */\n\n .ddga-steps--horizontal .ddga-steps__step + .ddga-steps__step::before {\n content: '';\n position: absolute;\n block-size: 2px;\n /* Sit at the vertical center of the indicator (24px / 2). */\n inset-block-start: 11px;\n /* Span from just before this step's indicator back to the previous one. */\n inset-inline-start: calc(-1 * var(--ddga-space-2));\n inset-inline-end: calc(100% - 4px);\n background-color: var(--ddga-color-border);\n }\n\n .ddga-steps--vertical .ddga-steps__step + .ddga-steps__step::before {\n content: '';\n position: absolute;\n inline-size: 2px;\n /* Sit at the horizontal center of the indicator. */\n inset-inline-start: 11px;\n /* Span from just before this step's indicator back to the previous one. */\n inset-block-start: calc(-1 * var(--ddga-space-3));\n inset-block-end: calc(100% - 4px);\n background-color: var(--ddga-color-border);\n }\n\n /* Completed steps colour the inbound line — the line BEFORE a completed\n step reflects that the journey to it is done. */\n .ddga-steps__step--completed + .ddga-steps__step--completed::before,\n .ddga-steps__step--completed + .ddga-steps__step--current::before {\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Indicator (numbered circle / check) ─── */\n\n .ddga-steps__indicator {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border-radius: 999px;\n border: 2px solid var(--ddga-color-border);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n font-weight: 600;\n line-height: 1;\n /* Above the separator line so it doesn't visually cross through. */\n position: relative;\n z-index: 1;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-steps__indicator-check {\n inline-size: 0.875em;\n block-size: 0.875em;\n display: none;\n }\n\n /* Completed: filled-primary circle with a check icon (number hidden). */\n .ddga-steps__step--completed .ddga-steps__indicator {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-steps__step--completed .ddga-steps__indicator-check {\n display: inline-block;\n }\n .ddga-steps__step--completed .ddga-steps__indicator-number {\n display: none;\n }\n\n /* Current: outlined-primary circle with the number visible. */\n .ddga-steps__step--current .ddga-steps__indicator {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* ─── Title + Description ─── */\n\n .ddga-steps__title {\n display: block;\n color: var(--ddga-text-secondary);\n font-weight: 500;\n line-height: 1.4;\n }\n\n .ddga-steps__step--current .ddga-steps__title {\n color: var(--ddga-text-primary);\n font-weight: 600;\n }\n\n .ddga-steps__step--completed .ddga-steps__title {\n color: var(--ddga-text-primary);\n }\n\n .ddga-steps__description {\n display: block;\n margin-block-start: var(--ddga-space-1);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.4;\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-steps--sm {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-steps--md {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-steps__indicator {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-steps__indicator {\n border-color: CanvasText;\n color: CanvasText;\n }\n .ddga-steps__step--completed .ddga-steps__indicator,\n .ddga-steps__step--current .ddga-steps__indicator {\n border-color: Highlight;\n color: Highlight;\n }\n .ddga-steps__step + .ddga-steps__step::before {\n background-color: CanvasText;\n }\n .ddga-steps__step--completed + .ddga-steps__step--completed::before,\n .ddga-steps__step--completed + .ddga-steps__step--current::before {\n background-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Checkbox-specific styles live here. */\n\n /* ─── Row (box + label, inline) ─── */\n\n .ddga-checkbox-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Box (Radix Root , reset the button, then style) ─── */\n\n .ddga-checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-primary-foreground);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-checkbox--md {\n block-size: 18px;\n inline-size: 18px;\n font-size: 14px;\n }\n .ddga-checkbox--sm {\n block-size: 16px;\n inline-size: 16px;\n font-size: 12px;\n }\n\n /* ─── Checked / indeterminate fill ─── */\n\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n\n /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n .ddga-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-checkbox--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error[data-state='checked'],\n .ddga-checkbox--error[data-state='indeterminate'] {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Indicator + icons (one shows per Root data-state) ─── */\n\n .ddga-checkbox__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-checkbox__check,\n .ddga-checkbox__minus {\n inline-size: 1em;\n block-size: 1em;\n }\n .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n display: none;\n }\n .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n display: none;\n }\n\n /* ─── Label ─── */\n\n .ddga-checkbox__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n .ddga-checkbox__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-checkbox {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-checkbox {\n border: 1px solid CanvasText;\n }\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: CanvasText;\n }\n .ddga-checkbox__indicator {\n color: Canvas;\n }\n .ddga-checkbox:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-checkbox:disabled {\n border-color: GrayText;\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Shared field primitives , wrapper + helper/error message. Used by\n Input / Textarea / Checkbox. Component-specific bits (the label and\n the control itself) stay in each component's CSS. */\n\n .ddga-field {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-field__message {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n .ddga-field__message--error {\n color: var(--ddga-color-error);\n }\n}\n","/* Generated by tokens/scripts/generate-css.ts , do not edit by hand. */\n.ddga-theme-sa-green {\n --ddga-color-primary: var(--ddga-sa-500);\n --ddga-color-primary-hover: var(--ddga-sa-600);\n --ddga-color-primary-active: var(--ddga-sa-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-sa-500);\n}\n\n.ddga-theme-gray {\n --ddga-color-primary: var(--ddga-gray-500);\n --ddga-color-primary-hover: var(--ddga-gray-600);\n --ddga-color-primary-active: var(--ddga-gray-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-gray-500);\n}\n\n.ddga-theme-error {\n --ddga-color-primary: var(--ddga-error-500);\n --ddga-color-primary-hover: var(--ddga-error-600);\n --ddga-color-primary-active: var(--ddga-error-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-error-500);\n}\n\n.ddga-theme-warning {\n --ddga-color-primary: var(--ddga-warning-500);\n --ddga-color-primary-hover: var(--ddga-warning-600);\n --ddga-color-primary-active: var(--ddga-warning-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-warning-500);\n}\n\n.ddga-theme-success {\n --ddga-color-primary: var(--ddga-success-500);\n --ddga-color-primary-hover: var(--ddga-success-600);\n --ddga-color-primary-active: var(--ddga-success-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-success-500);\n}\n\n.ddga-theme-info {\n --ddga-color-primary: var(--ddga-info-500);\n --ddga-color-primary-hover: var(--ddga-info-600);\n --ddga-color-primary-active: var(--ddga-info-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-info-500);\n}\n\n.ddga-theme-gold {\n --ddga-color-primary: var(--ddga-gold-500);\n --ddga-color-primary-hover: var(--ddga-gold-600);\n --ddga-color-primary-active: var(--ddga-gold-700);\n --ddga-color-primary-foreground: #0D121C;\n --ddga-color-ring: var(--ddga-gold-500);\n}\n\n.ddga-theme-lavender {\n --ddga-color-primary: var(--ddga-lavender-500);\n --ddga-color-primary-hover: var(--ddga-lavender-600);\n --ddga-color-primary-active: var(--ddga-lavender-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-lavender-500);\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Select-specific styles live here. */\n\n /* ─── Label (above the trigger, matches Input) ─── */\n\n .ddga-select__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-select__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n .ddga-select-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-select-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-select-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Trigger states ─── */\n\n .ddga-select-trigger:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n .ddga-select-trigger[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-select-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Error ─── */\n\n .ddga-select-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-select-trigger--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Chevron (Radix Icon) ─── */\n\n .ddga-select__icon {\n flex-shrink: 0;\n color: var(--ddga-text-tertiary);\n transition: rotate 150ms ease;\n }\n .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n rotate: 180deg;\n }\n\n /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n .ddga-select-content {\n /* Match trigger width so the panel doesn't visually float wider/narrower\n than the field. `--radix-select-trigger-width` is exposed by Radix\n when `position=\"popper\"`. */\n min-inline-size: var(--radix-select-trigger-width);\n /* Cap height to viewport so long lists scroll instead of overflowing. */\n max-block-size: var(--radix-select-content-available-height);\n z-index: 50;\n overflow: hidden;\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n color: var(--ddga-text-primary);\n }\n\n .ddga-select-viewport {\n padding: var(--ddga-space-1);\n }\n\n /* ─── Item ─── */\n\n .ddga-select-item {\n position: relative;\n display: flex;\n align-items: center;\n block-size: 32px;\n padding-block: var(--ddga-space-2);\n padding-inline-start: var(--ddga-space-3);\n /* Reserve room for the trailing checkmark indicator so item text never\n collides with it when the row is selected. */\n padding-inline-end: var(--ddga-space-7);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n color: var(--ddga-text-primary);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n\n /* Radix sets `data-highlighted` on the keyboard- or pointer-focused item. */\n .ddga-select-item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-select-item[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ─── Item indicator (checkmark on the selected item) ─── */\n\n .ddga-select-item__indicator {\n position: absolute;\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n color: var(--ddga-color-primary);\n }\n .ddga-select-item__check {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-select-trigger,\n .ddga-select__icon {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-select-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-select-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-select-trigger:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n .ddga-select-content {\n border: 1px solid CanvasText;\n }\n .ddga-select-item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-select-item__indicator {\n color: HighlightText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-alert {\n /* Each variant overrides --accent (icon + border) and --bg / --fg below.\n Centralizing this in vars makes per-instance recoloring trivial. */\n --ddga-alert-accent: var(--ddga-color-info);\n --ddga-alert-bg: var(--ddga-info-100);\n --ddga-alert-fg: var(--ddga-info-700);\n\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-alert-bg);\n color: var(--ddga-alert-fg);\n font-family: inherit;\n line-height: 1.5;\n }\n\n /* ─── Variants (tonal, matching Badge subtle family) ─── */\n\n .ddga-alert--info {\n --ddga-alert-accent: var(--ddga-color-info);\n --ddga-alert-bg: var(--ddga-info-100);\n --ddga-alert-fg: var(--ddga-info-700);\n }\n\n .ddga-alert--success {\n --ddga-alert-accent: var(--ddga-color-success);\n --ddga-alert-bg: var(--ddga-success-100);\n --ddga-alert-fg: var(--ddga-success-700);\n }\n\n .ddga-alert--warning {\n --ddga-alert-accent: var(--ddga-color-warning);\n --ddga-alert-bg: var(--ddga-warning-100);\n --ddga-alert-fg: var(--ddga-warning-700);\n }\n\n .ddga-alert--destructive {\n --ddga-alert-accent: var(--ddga-color-destructive);\n --ddga-alert-bg: var(--ddga-error-100);\n --ddga-alert-fg: var(--ddga-error-700);\n }\n\n /* ─── Icon ─── */\n\n .ddga-alert__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.25em;\n block-size: 1.25em;\n color: var(--ddga-alert-accent);\n /* Nudge the icon to optical-center with the title. */\n margin-block-start: 0.125em;\n }\n\n .ddga-alert__icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Body (title + description container) ─── */\n\n .ddga-alert__body {\n flex: 1;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-alert__title {\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: inherit;\n }\n\n .ddga-alert__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: inherit;\n /* Slight dimming for hierarchy under the title; works for both light + dark. */\n opacity: 0.9;\n }\n\n /* ─── Close button ─── */\n\n .ddga-alert__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n opacity: 0.7;\n transition:\n opacity 150ms ease,\n background-color 150ms ease;\n /* Optical-center with the title. */\n margin-block-start: 0.125em;\n }\n .ddga-alert__close > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n .ddga-alert__close:hover {\n opacity: 1;\n background-color: rgb(0 0 0 / 0.06);\n }\n .ddga-alert__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-alert-accent);\n opacity: 1;\n }\n\n /* ─── Dark mode adjustments ─── */\n /* The -100 tonal pairs are quite light against a dark page bg — bump the\n destructive/warning shades and recolor the foreground for legibility. */\n\n [data-theme='dark'] .ddga-alert--info {\n --ddga-alert-bg: rgb(21 112 239 / 0.16);\n --ddga-alert-fg: var(--ddga-info-200, #b2ddff);\n }\n [data-theme='dark'] .ddga-alert--success {\n --ddga-alert-bg: rgb(7 148 85 / 0.18);\n --ddga-alert-fg: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-alert--warning {\n --ddga-alert-bg: rgb(220 104 3 / 0.18);\n --ddga-alert-fg: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-alert--destructive {\n --ddga-alert-bg: rgb(217 45 32 / 0.18);\n --ddga-alert-fg: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-alert__close:hover {\n background-color: rgb(255 255 255 / 0.08);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-alert {\n border-color: CanvasText;\n }\n .ddga-alert__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Linear (Radix Progress) ─── */\n\n .ddga-progress {\n position: relative;\n overflow: hidden;\n inline-size: 100%;\n background-color: var(--ddga-gray-200);\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-progress--sm {\n block-size: 4px;\n }\n .ddga-progress--md {\n block-size: 8px;\n }\n .ddga-progress--lg {\n block-size: 12px;\n }\n\n .ddga-progress--primary {\n --ddga-progress-color: var(--ddga-color-primary);\n }\n .ddga-progress--success {\n --ddga-progress-color: var(--ddga-color-success);\n }\n .ddga-progress--warning {\n --ddga-progress-color: var(--ddga-color-warning);\n }\n .ddga-progress--destructive {\n --ddga-progress-color: var(--ddga-color-destructive);\n }\n\n .ddga-progress__indicator {\n block-size: 100%;\n inline-size: 100%;\n background-color: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: transform 200ms ease-out;\n border-radius: inherit;\n }\n\n /* Indeterminate: slide a 40%-wide pill across the track. The track has\n overflow:hidden so the off-track portions get clipped. */\n .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n inline-size: 40%;\n transform: translateX(-100%);\n animation: ddga-progress-slide 1.4s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;\n transition: none;\n }\n\n @keyframes ddga-progress-slide {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(350%);\n }\n }\n\n /* RTL: reverse the slide so motion still tracks reading direction. */\n [dir='rtl'] .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n animation-name: ddga-progress-slide-rtl;\n }\n\n @keyframes ddga-progress-slide-rtl {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(-350%);\n }\n }\n\n /* ─── Circular (custom SVG) ─── */\n\n .ddga-circular-progress {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .ddga-circular-progress--primary {\n --ddga-progress-color: var(--ddga-color-primary);\n }\n .ddga-circular-progress--success {\n --ddga-progress-color: var(--ddga-color-success);\n }\n .ddga-circular-progress--warning {\n --ddga-progress-color: var(--ddga-color-warning);\n }\n .ddga-circular-progress--destructive {\n --ddga-progress-color: var(--ddga-color-destructive);\n }\n\n .ddga-circular-progress__svg {\n display: block;\n }\n\n .ddga-circular-progress__track {\n stroke: var(--ddga-gray-200);\n }\n\n .ddga-circular-progress__indicator {\n stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: stroke-dashoffset 200ms ease-out;\n }\n\n .ddga-circular-progress[data-state='indeterminate'] .ddga-circular-progress__svg {\n animation: ddga-circular-progress-spin 1.4s linear infinite;\n transition: none;\n }\n\n @keyframes ddga-circular-progress-spin {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .ddga-circular-progress__label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-secondary);\n line-height: 1;\n }\n\n .ddga-circular-progress--sm .ddga-circular-progress__label {\n font-size: 0.625rem;\n }\n .ddga-circular-progress--lg .ddga-circular-progress__label {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* Reduced motion: drop indeterminate animations, keep static state visible. */\n @media (prefers-reduced-motion: reduce) {\n .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator,\n .ddga-circular-progress[data-state='indeterminate'] .ddga-circular-progress__svg {\n animation: none;\n }\n .ddga-progress__indicator,\n .ddga-circular-progress__indicator {\n transition: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n font-weight: var(--ddga-font-weight-medium);\n font-family: inherit;\n line-height: 1.6;\n cursor: pointer;\n text-decoration: none;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease,\n opacity 150ms ease;\n }\n\n /* ─── Variant: Primary ─── */\n\n .ddga-button--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-hover);\n }\n\n /* ─── Variant: Secondary ─── */\n\n .ddga-button--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n .ddga-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n\n /* ─── Variant: Outline ─── */\n\n .ddga-button--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n .ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Variant: Ghost ─── */\n\n .ddga-button--ghost {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n .ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Variant: Destructive (filled, primary destructive) ─── */\n\n .ddga-button--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n .ddga-button--destructive:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-destructive-hover);\n }\n\n /* ─── Variant: Destructive Outline (transparent + error border + error text) ─── */\n\n .ddga-button--destructive-outline {\n background-color: transparent;\n color: var(--ddga-color-destructive);\n border-color: var(--ddga-color-destructive);\n }\n .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-50);\n }\n\n /* ─── Variant: Destructive Subtle (light tonal bg + error text) ─── */\n\n .ddga-button--destructive-subtle {\n background-color: var(--ddga-error-50);\n color: var(--ddga-color-destructive);\n }\n .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-100);\n }\n\n /* ─── Variant: Destructive Ghost (transparent + error text, hover tints) ─── */\n\n .ddga-button--destructive-ghost {\n background-color: transparent;\n color: var(--ddga-color-destructive);\n }\n .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-50);\n }\n\n /* ─── Sizes ─── */\n\n .ddga-button--sm {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-button--md {\n height: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-button--lg {\n height: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-button--icon {\n height: 40px;\n width: 40px;\n padding: 0;\n font-size: var(--ddga-font-size-base);\n }\n /* Compact square icon button , fits inside form fields as an adornment\n (sm/md field interiors) without overflowing the field border. */\n .ddga-button--icon-sm {\n height: 28px;\n width: 28px;\n padding: 0;\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Full Width ─── */\n\n .ddga-button--full-width {\n inline-size: 100%;\n flex: 1 0 100%;\n }\n\n /* ─── Inverted (for use on colored / dark backgrounds) ─── */\n /*\n * Only inverts the non-filled families — `outline`, `ghost`, and\n * destructive's outline/ghost forms. Filled variants (`primary`,\n * `secondary`, `destructive`, `destructive-subtle`) already carry their\n * own background contrast and keep their normal palette. Hover uses a\n * low-opacity white overlay so it works against any background tint.\n */\n .ddga-button--inverted.ddga-button--outline,\n .ddga-button--inverted.ddga-button--ghost {\n color: #ffffff;\n background-color: transparent;\n }\n .ddga-button--inverted.ddga-button--outline {\n border-color: rgba(255, 255, 255, 0.4);\n }\n .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--inverted.ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: rgba(255, 255, 255, 0.12);\n }\n .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: rgba(255, 255, 255, 0.6);\n }\n .ddga-button--inverted.ddga-button--destructive-outline,\n .ddga-button--inverted.ddga-button--destructive-ghost {\n /* On colored bgs, keep destructive readable by using a light error\n tint rather than full white (which would lose the destructive cue). */\n color: var(--ddga-error-200);\n }\n .ddga-button--inverted.ddga-button--destructive-outline {\n border-color: var(--ddga-error-300);\n }\n .ddga-button--inverted.ddga-button--destructive-outline:hover:not(:disabled):not(\n [aria-disabled='true']\n ),\n .ddga-button--inverted.ddga-button--destructive-ghost:hover:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n /* ─── Loading ─── */\n\n .ddga-button--loading {\n position: relative;\n cursor: wait;\n }\n\n /* ─── Child elements ─── */\n\n .ddga-button__text {\n /* Truncate long text */\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-button__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n /* Block-level SVGs (see reset) must not be flex-stretched on the cross\n axis , that distorts a square icon into a tall one. Pin them square\n to their intrinsic size and keep them centered. */\n .ddga-button svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-button {\n transition: none;\n }\n }\n\n /* ─── States ─── */\n\n /* Match `:disabled` (native button) and `[aria-disabled='true']` (asChild\n mode rendered as <a> or similar where native `disabled` has no effect). */\n .ddga-button:disabled,\n .ddga-button[aria-disabled='true'] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .ddga-button:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── RTL directional icon flip ─── */\n\n [dir='rtl'] .ddga-icon-flip {\n transform: scaleX(-1);\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-button {\n border: 1px solid ButtonText;\n }\n .ddga-button:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-button:disabled,\n .ddga-button[aria-disabled='true'] {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Input-specific styles live here. */\n\n /* ─── Label ─── */\n\n .ddga-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state) ─── */\n\n .ddga-input {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Button) ─── */\n\n .ddga-input--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-input--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input--lg {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Field (the actual <input> , transparent, borderless fill) ─── */\n\n .ddga-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n .ddga-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* Autofill: browsers paint their own background/text on autofilled\n fields, overriding the theme (most jarring in dark mode, and government\n forms autofill heavily). Repaint with tokens via the inset-shadow\n technique , `background-color` alone is ignored for autofill. */\n .ddga-input__field:-webkit-autofill,\n .ddga-input__field:-webkit-autofill:hover,\n .ddga-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-text-primary);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-text-primary);\n }\n\n /* ─── Adornments (leading/trailing icon or text) ─── */\n\n .ddga-input__adornment {\n display: inline-flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n /* Never taller than the field interior, so an interactive control\n (clear / password toggle) can't paint over the field border. */\n max-block-size: 100%;\n color: var(--ddga-text-tertiary);\n }\n\n /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n .ddga-input__adornment svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n /* An adornment hugs the field edge: collapse the padding on its side so\n an in-field button's hit area aligns with the field, not floating. */\n .ddga-input:has(.ddga-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-input:has(.ddga-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── States (driven by the inner field via :has()) ─── */\n\n .ddga-input:has(.ddga-input__field:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-input:has(.ddga-input__field:disabled) .ddga-input__field {\n cursor: not-allowed;\n }\n\n .ddga-input:has(.ddga-input__field:read-only:not(:disabled)) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-input {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-input {\n border: 1px solid CanvasText;\n }\n .ddga-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-input:has(.ddga-input__field:disabled) {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Group label, group container, and per-item styles\n live here. Size + error states cascade from the group via descendant\n selectors so the source of truth stays on one element per group. */\n\n /* ─── Group label ─── */\n\n .ddga-radio-group__label {\n display: block;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: 500;\n line-height: 1.4;\n margin-block-end: var(--ddga-space-1);\n }\n .ddga-radio-group__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Group container (Radix Root, role=radiogroup) ─── */\n\n .ddga-radio-group {\n display: flex;\n gap: var(--ddga-space-3);\n }\n .ddga-radio-group--vertical {\n flex-direction: column;\n }\n .ddga-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n /* ─── Row (circle + label, inline) ─── */\n\n .ddga-radio-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Circle (Radix Item , reset the button, then style) ─── */\n\n .ddga-radio {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid var(--ddga-color-input);\n border-radius: 999px;\n background-color: var(--ddga-color-background);\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* Sizes cascade from the group , one source of truth per group. */\n .ddga-radio-group--md .ddga-radio {\n block-size: 18px;\n inline-size: 18px;\n }\n .ddga-radio-group--sm .ddga-radio {\n block-size: 16px;\n inline-size: 16px;\n }\n\n /* ─── Checked border ─── */\n\n .ddga-radio[data-state='checked'] {\n border-color: var(--ddga-color-primary);\n }\n\n /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n .ddga-radio:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Error (cascades from the group) ─── */\n\n .ddga-radio-group--error .ddga-radio {\n border-color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio[data-state='checked'] .ddga-radio__dot {\n background-color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n /* ─── Disabled (group OR per-item) ─── */\n\n .ddga-radio:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-radio-row:has(.ddga-radio:disabled) .ddga-radio__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Indicator + dot (only mounts when checked) ─── */\n\n .ddga-radio__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-radio__dot {\n inline-size: 50%;\n block-size: 50%;\n border-radius: 999px;\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Item label ─── */\n\n .ddga-radio__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-radio {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-radio {\n border: 1px solid CanvasText;\n }\n .ddga-radio[data-state='checked'] {\n border-color: Highlight;\n }\n .ddga-radio__dot {\n background-color: CanvasText;\n }\n .ddga-radio:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-radio:disabled {\n border-color: GrayText;\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-full);\n font-weight: var(--ddga-font-weight-medium);\n font-family: inherit;\n line-height: 1.4;\n white-space: nowrap;\n user-select: none;\n }\n\n /* ─── Sizes ─── */\n\n .ddga-badge--sm {\n height: 20px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-badge--md {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Solid variants ─── */\n\n .ddga-badge--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n\n .ddga-badge--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n .ddga-badge--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n\n .ddga-badge--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n\n .ddga-badge--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n\n .ddga-badge--warning {\n background-color: var(--ddga-color-warning);\n color: var(--ddga-color-warning-foreground);\n }\n\n .ddga-badge--info {\n background-color: var(--ddga-color-info);\n color: var(--ddga-color-info-foreground);\n }\n\n /* ─── Subtle (tonal) variants ─── */\n\n .ddga-badge--primary-subtle {\n background-color: var(--ddga-sa-100);\n color: var(--ddga-sa-800);\n }\n\n .ddga-badge--secondary-subtle {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n\n .ddga-badge--destructive-subtle {\n background-color: var(--ddga-error-100);\n color: var(--ddga-error-700);\n }\n\n .ddga-badge--success-subtle {\n background-color: var(--ddga-success-100);\n color: var(--ddga-success-700);\n }\n\n .ddga-badge--warning-subtle {\n background-color: var(--ddga-warning-100);\n color: var(--ddga-warning-700);\n }\n\n .ddga-badge--info-subtle {\n background-color: var(--ddga-info-100);\n color: var(--ddga-info-700);\n }\n\n /* ─── Outline ─── */\n\n .ddga-badge--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n\n /* ─── Dot ─── */\n\n .ddga-badge__dot {\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n /* ─── Icons inside badge ─── */\n\n .ddga-badge__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .ddga-badge__icon > svg,\n .ddga-badge > svg {\n width: 0.875em;\n height: 0.875em;\n display: block;\n }\n\n .ddga-badge svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n /* ─── Close button (dismissible) ─── */\n\n .ddga-badge__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5em;\n block-size: 1.5em;\n margin-inline-start: 0.125em;\n margin-inline-end: -0.25em;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n font: inherit;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .ddga-badge__close > svg {\n inline-size: 0.75em;\n block-size: 0.75em;\n }\n\n .ddga-badge__close:hover {\n background-color: color-mix(in srgb, currentColor 18%, transparent);\n }\n\n .ddga-badge__close:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-badge {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Switch-specific styles live here. */\n\n /* ─── Row (track + label, inline) ─── */\n\n .ddga-switch-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Track (Radix Root , reset the button, then style) ─── */\n\n .ddga-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid transparent;\n border-radius: 999px;\n background-color: var(--ddga-color-input);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* Track dimensions and travel distance. Travel is encoded as a per-size\n custom property so the thumb rule below is size-agnostic. */\n .ddga-switch--md {\n block-size: 22px;\n inline-size: 38px;\n --ddga-switch-thumb-travel: 16px;\n }\n .ddga-switch--sm {\n block-size: 18px;\n inline-size: 30px;\n --ddga-switch-thumb-travel: 12px;\n }\n\n /* ─── Checked fill ─── */\n\n .ddga-switch[data-state='checked'] {\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n .ddga-switch:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-switch--error {\n background-color: var(--ddga-color-background);\n border-color: var(--ddga-color-error);\n }\n .ddga-switch--error[data-state='checked'] {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-switch--error:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-switch:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Thumb (Radix Thumb , the moving circle) ─── */\n\n .ddga-switch__thumb {\n display: block;\n block-size: calc(100% - 4px);\n aspect-ratio: 1;\n margin-inline-start: 2px;\n border-radius: 999px;\n background-color: var(--ddga-color-background);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n transition: translate 150ms ease;\n translate: 0 0;\n will-change: translate;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: var(--ddga-switch-thumb-travel) 0;\n }\n /* RTL: the thumb's resting position is on the right (logical start\n flips), so checked travels in the negative direction. The ancestor\n `[dir=\"rtl\"]` is set on DgaProvider; using attribute selector instead\n of `:dir()` for broader browser support (the theming pass set the\n Safari floor at 16.2; `:dir()` lands in 16.4). */\n [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: calc(var(--ddga-switch-thumb-travel) * -1) 0;\n }\n\n /* Dark mode: the default thumb color (--ddga-color-background, near-white\n in light mode) flips to a very dark gray-900 , darker than the off-state\n track (--ddga-color-input = gray-700) , and the thumb disappears.\n Override locally with a near-white so the puck reads as a raised\n surface in both modes. Kept in this file (not dark.css) because dark.css\n is reserved for semantic token remapping; this is a per-component fix. */\n [data-theme='dark'] .ddga-switch__thumb {\n background-color: #f3f4f6;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n }\n\n /* ─── Label ─── */\n\n .ddga-switch__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n .ddga-switch__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-switch,\n .ddga-switch__thumb {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-switch {\n border: 1px solid CanvasText;\n background-color: Canvas;\n }\n .ddga-switch[data-state='checked'] {\n background-color: Highlight;\n }\n .ddga-switch__thumb {\n background-color: CanvasText;\n box-shadow: none;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n background-color: HighlightText;\n }\n .ddga-switch:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-switch:disabled {\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Label + required ─── */\n\n .ddga-combobox__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-combobox__required {\n color: var(--ddga-color-error);\n }\n\n /* ─── Trigger (Popover.Trigger as <button>) ─── */\n\n /* Heights mirror Input/Select so triggers and text inputs line up. */\n .ddga-combobox-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-combobox-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-combobox-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-combobox-trigger:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-combobox-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-combobox-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-combobox-trigger--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-combobox__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-combobox__placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-combobox__icon {\n flex-shrink: 0;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Popover content panel ─── */\n\n .ddga-combobox-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n overflow: hidden;\n z-index: 50;\n /* `inline-size: var(--radix-popover-trigger-width)` set inline so the\n panel always matches trigger width. min-width fallback for very narrow\n triggers; the popper var is what wins normally. */\n min-inline-size: 200px;\n }\n\n /* Same in/out animation as DropdownMenu — fast + subtle. */\n .ddga-combobox-content[data-state='open'] {\n animation: ddga-combobox-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-combobox-content[data-state='closed'] {\n animation: ddga-combobox-out 80ms ease-in;\n }\n @keyframes ddga-combobox-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-combobox-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── cmdk root + input ─── */\n\n .ddga-combobox-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-combobox-input {\n inline-size: 100%;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border: 0;\n border-block-end: 1px solid var(--ddga-color-border);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-combobox-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── List + items ─── */\n\n .ddga-combobox-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n\n .ddga-combobox-empty {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n .ddga-combobox-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* cmdk sets data-selected on the actively highlighted item (keyboard or\n hover). Our own data-selected (no attribute value) marks the chosen\n value — distinct concept. CSS uses [data-selected=''] for the chosen\n mark and [data-selected='true'] for cmdk's highlight; both can coexist\n on the same item when the chosen item is also highlighted. */\n .ddga-combobox-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-combobox-item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-combobox-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n flex-shrink: 0;\n color: var(--ddga-color-primary);\n }\n .ddga-combobox-item__check > svg {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-combobox-item__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ─── Group + Separator ─── */\n\n .ddga-combobox-group [cmdk-group-heading] {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n .ddga-combobox-separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) * -1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-combobox-content[data-state='open'],\n .ddga-combobox-content[data-state='closed'] {\n animation: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-combobox-trigger,\n .ddga-combobox-content {\n border: 1px solid CanvasText;\n }\n .ddga-combobox-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Overlay (backdrop) ─── */\n\n .ddga-modal__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Above tooltips (50) but allow Toast (future) to sit higher if it uses\n 60+. Modal lives at 60 by convention. */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n /* ─── Content (the modal box) ─── */\n\n .ddga-modal {\n position: fixed;\n /* Use physical `top`/`left` (NOT inset-block/inline-start) for centering.\n Centering is symmetric across writing directions, but `inset-inline-start`\n flips to `right` in RTL while `transform: translateX(-50%)` stays\n physical — pairing them shifts the modal off-screen in RTL. The\n physical pair is the established centered-overlay pattern and is\n direction-correct because viewport-center doesn't care about `dir`. */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-lg);\n /* Keep the modal from spilling off small viewports. */\n max-block-size: calc(100vh - 2rem);\n inline-size: calc(100vw - 2rem);\n overflow: hidden;\n animation-duration: 180ms;\n animation-timing-function: ease;\n }\n\n /* RTL: in RTL the inline axis flips. `translate(-50%, -50%)` still centers\n correctly because translate is direction-agnostic. No override needed. */\n\n /* ─── Sizes (max-inline-size caps; `full` is the takeover) ─── */\n\n .ddga-modal--sm {\n max-inline-size: 360px;\n }\n .ddga-modal--md {\n max-inline-size: 480px;\n }\n .ddga-modal--lg {\n max-inline-size: 640px;\n }\n .ddga-modal--xl {\n max-inline-size: 800px;\n }\n .ddga-modal--full {\n /* Edge-to-edge with a small breathing margin. */\n max-inline-size: calc(100vw - 2rem);\n max-block-size: calc(100vh - 2rem);\n inline-size: calc(100vw - 2rem);\n block-size: calc(100vh - 2rem);\n }\n\n /* ─── Sections ─── */\n\n .ddga-modal__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-5);\n padding-block-end: var(--ddga-space-3);\n }\n\n .ddga-modal__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: var(--ddga-text-primary);\n /* Reserve room so the corner X never overlaps the title text. */\n padding-inline-end: var(--ddga-space-8);\n }\n\n .ddga-modal__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: var(--ddga-text-secondary);\n }\n\n /* Body slot — consumers drop content directly under ModalContent. We use a\n generic descendant rule so unwrapped paragraphs/forms still get padding\n without forcing a ModalBody subcomponent. */\n .ddga-modal__header ~ * {\n padding-inline: var(--ddga-space-5);\n }\n /* Reset for known sections that own their own padding. */\n .ddga-modal__header ~ .ddga-modal__footer {\n padding-inline: var(--ddga-space-5);\n }\n\n .ddga-modal__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-5);\n padding-block-start: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-border);\n margin-block-start: auto;\n }\n\n /* ─── Corner close (X) ─── */\n\n .ddga-modal__close {\n position: absolute;\n inset-block-start: var(--ddga-space-3);\n inset-inline-end: var(--ddga-space-3);\n inline-size: 2rem;\n block-size: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n .ddga-modal__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-modal__close:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-modal__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-modal__overlay[data-state='open'] {\n animation-name: ddga-modal-overlay-in;\n }\n .ddga-modal__overlay[data-state='closed'] {\n animation-name: ddga-modal-overlay-out;\n }\n .ddga-modal[data-state='open'] {\n animation-name: ddga-modal-in;\n }\n .ddga-modal[data-state='closed'] {\n animation-name: ddga-modal-out;\n }\n\n @keyframes ddga-modal-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-modal-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes ddga-modal-in {\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n @keyframes ddga-modal-out {\n from {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n to {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.96);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-modal,\n .ddga-modal__overlay {\n animation-duration: 0ms;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-modal {\n border-color: CanvasText;\n }\n .ddga-modal__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Panel (Content / SubContent) ─── */\n\n .ddga-dropdown-menu {\n min-inline-size: 192px;\n max-inline-size: 320px;\n padding: var(--ddga-space-1);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n surfaces feel instantaneous (this isn't a Modal). */\n .ddga-dropdown-menu[data-state='open'] {\n animation: ddga-dropdown-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-dropdown-menu[data-state='closed'] {\n animation: ddga-dropdown-menu-out 80ms ease-in;\n }\n\n @keyframes ddga-dropdown-menu-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-dropdown-menu-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Sizes ─── */\n\n .ddga-dropdown-menu--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-dropdown-menu--md {\n font-size: var(--ddga-font-size-md);\n }\n\n /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n .ddga-dropdown-menu__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* Radix sets data-highlighted on the actively focused/hovered item — that's\n our only \"focus ring\" since the menu manages focus internally. */\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-dropdown-menu__item[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* Destructive: red text and a red-tinted hover. Tracks the destructive\n family the rest of the system uses. */\n .ddga-dropdown-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* Inline pieces inside the row. */\n .ddga-dropdown-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .ddga-dropdown-menu__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n flex-shrink: 0;\n color: var(--ddga-text-secondary);\n }\n .ddga-dropdown-menu__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-dropdown-menu__shortcut {\n margin-inline-start: auto;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-tertiary);\n letter-spacing: 0.04em;\n }\n\n /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n .ddga-dropdown-menu__item--checkable {\n /* Reserve the indicator column even when unchecked so labels align. */\n padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n position: relative;\n }\n\n .ddga-dropdown-menu__indicator {\n position: absolute;\n inset-inline-start: var(--ddga-space-2);\n inset-block-start: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-color-primary);\n }\n .ddga-dropdown-menu__indicator-icon {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-dropdown-menu__radio-dot {\n /* span is inline by default → inline-size/block-size are ignored. Force a\n sized inline-block so the filled circle actually renders. */\n display: inline-block;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-dropdown-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-dropdown-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n }\n\n /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n [dir='rtl'] .ddga-dropdown-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Label + Separator ─── */\n\n .ddga-dropdown-menu__group-label {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n .ddga-dropdown-menu__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) * -1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-dropdown-menu {\n border: 1px solid CanvasText;\n }\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-menu__separator {\n background-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-menu[data-state='open'],\n .ddga-dropdown-menu[data-state='closed'] {\n animation: none;\n }\n }\n}\n","@layer ddga-components {\n .ddga-spinner {\n display: inline-block;\n flex-shrink: 0;\n color: currentColor;\n animation: ddga-spin 600ms linear infinite;\n }\n\n .ddga-spinner--sm {\n font-size: 1rem;\n }\n .ddga-spinner--md {\n font-size: 1.5rem;\n }\n .ddga-spinner--lg {\n font-size: 2rem;\n }\n\n @keyframes ddga-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-spinner {\n animation-duration: 1.5s;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Overlay ─── */\n\n .ddga-drawer__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Same z-stack as Modal (60 overlay / 61 panel). Toast sits at 70 so it\n can announce above either. */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-drawer__overlay[data-state='open'] {\n animation-name: ddga-drawer-overlay-in;\n }\n .ddga-drawer__overlay[data-state='closed'] {\n animation-name: ddga-drawer-overlay-out;\n }\n\n @keyframes ddga-drawer-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-drawer-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Panel base ─── */\n\n .ddga-drawer {\n position: fixed;\n z-index: 61;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n box-shadow: var(--ddga-shadow-lg);\n overflow: hidden;\n /* Animation duration applied to the panel; the per-side keyframes flip\n direction so the slide always emerges from the correct edge. */\n animation-duration: 220ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* ─── Side placements (logical — start/end flip in RTL) ─── */\n\n .ddga-drawer--start {\n inset-block: 0;\n inset-inline-start: 0;\n border-inline-end: 1px solid var(--ddga-color-border);\n border-inline-start: 0;\n }\n .ddga-drawer--end {\n inset-block: 0;\n inset-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n border-inline-end: 0;\n }\n .ddga-drawer--top {\n inset-inline: 0;\n inset-block-start: 0;\n border-block-end: 1px solid var(--ddga-color-border);\n border-block-start: 0;\n }\n .ddga-drawer--bottom {\n inset-inline: 0;\n inset-block-end: 0;\n border-block-start: 1px solid var(--ddga-color-border);\n border-block-end: 0;\n }\n\n /* ─── Sizes ─── */\n\n /* For start/end (vertical panel), `size` controls inline-size; for top/bottom\n (horizontal panel) it controls block-size. The cascade just stacks both\n declarations and the relevant axis wins per side. */\n .ddga-drawer--sm.ddga-drawer--start,\n .ddga-drawer--sm.ddga-drawer--end {\n inline-size: min(320px, 100vw);\n }\n .ddga-drawer--md.ddga-drawer--start,\n .ddga-drawer--md.ddga-drawer--end {\n inline-size: min(420px, 100vw);\n }\n .ddga-drawer--lg.ddga-drawer--start,\n .ddga-drawer--lg.ddga-drawer--end {\n inline-size: min(560px, 100vw);\n }\n .ddga-drawer--full.ddga-drawer--start,\n .ddga-drawer--full.ddga-drawer--end {\n inline-size: 100vw;\n }\n\n .ddga-drawer--sm.ddga-drawer--top,\n .ddga-drawer--sm.ddga-drawer--bottom {\n block-size: min(240px, 100vh);\n }\n .ddga-drawer--md.ddga-drawer--top,\n .ddga-drawer--md.ddga-drawer--bottom {\n block-size: min(360px, 100vh);\n }\n .ddga-drawer--lg.ddga-drawer--top,\n .ddga-drawer--lg.ddga-drawer--bottom {\n block-size: min(520px, 100vh);\n }\n .ddga-drawer--full.ddga-drawer--top,\n .ddga-drawer--full.ddga-drawer--bottom {\n block-size: 100vh;\n }\n\n /* ─── Enter/exit per side (logical axes so RTL flips automatically) ─── */\n\n .ddga-drawer--start[data-state='open'] {\n animation-name: ddga-drawer-slide-in-start;\n }\n .ddga-drawer--start[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-start;\n }\n .ddga-drawer--end[data-state='open'] {\n animation-name: ddga-drawer-slide-in-end;\n }\n .ddga-drawer--end[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-end;\n }\n .ddga-drawer--top[data-state='open'] {\n animation-name: ddga-drawer-slide-in-top;\n }\n .ddga-drawer--top[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-top;\n }\n .ddga-drawer--bottom[data-state='open'] {\n animation-name: ddga-drawer-slide-in-bottom;\n }\n .ddga-drawer--bottom[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-bottom;\n }\n\n /* Logical-direction slides: `translate` uses physical axes, so for\n start/end we branch on `[dir]` to keep the slide direction correct in\n both LTR and RTL. */\n @keyframes ddga-drawer-slide-in-start {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-drawer-slide-out-start {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n @keyframes ddga-drawer-slide-in-end {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-drawer-slide-out-end {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n }\n @keyframes ddga-drawer-slide-in-top {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n }\n @keyframes ddga-drawer-slide-out-top {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n }\n @keyframes ddga-drawer-slide-in-bottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n @keyframes ddga-drawer-slide-out-bottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n }\n\n /* RTL: flip the horizontal slides so \"start\" (right edge in RTL) and \"end\"\n (left edge in RTL) animate from the correct side. */\n [dir='rtl'] .ddga-drawer--start[data-state='open'] {\n animation-name: ddga-drawer-slide-in-end;\n }\n [dir='rtl'] .ddga-drawer--start[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-end;\n }\n [dir='rtl'] .ddga-drawer--end[data-state='open'] {\n animation-name: ddga-drawer-slide-in-start;\n }\n [dir='rtl'] .ddga-drawer--end[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-start;\n }\n\n /* ─── Header / Body / Footer ─── */\n\n .ddga-drawer__header {\n flex-shrink: 0;\n padding: var(--ddga-space-4);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-drawer__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-4);\n }\n\n .ddga-drawer__footer {\n flex-shrink: 0;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-border);\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-drawer__title {\n margin: 0;\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.3;\n color: var(--ddga-color-foreground);\n }\n\n .ddga-drawer__description {\n margin: var(--ddga-space-1) 0 0;\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Corner close button ─── */\n\n .ddga-drawer__close {\n position: absolute;\n inset-block-start: var(--ddga-space-3);\n inset-inline-end: var(--ddga-space-3);\n inline-size: 1.75rem;\n block-size: 1.75rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-md);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n font: inherit;\n }\n .ddga-drawer__close:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-drawer__close:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-drawer__close > svg {\n inline-size: 1.125em;\n block-size: 1.125em;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-drawer,\n .ddga-drawer__overlay {\n animation: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-drawer {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-skeleton {\n display: block;\n background-color: var(--ddga-gray-200);\n border-radius: var(--ddga-radius-md);\n position: relative;\n overflow: hidden;\n }\n\n /* ─── Shapes ─── */\n\n .ddga-skeleton--text {\n width: 100%;\n height: 1em;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-skeleton--rectangle {\n width: 100%;\n height: 40px;\n }\n\n .ddga-skeleton--circle {\n width: 40px;\n height: 40px;\n border-radius: var(--ddga-radius-full);\n }\n\n /* ─── Animations ─── */\n\n .ddga-skeleton--pulse {\n animation: ddga-skeleton-pulse 1.5s ease-in-out infinite;\n }\n\n @keyframes ddga-skeleton-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.55;\n }\n }\n\n /* Wave: a translucent gradient sweeps across the surface using a\n pseudo-element so it doesn't interfere with the consumer's content. */\n .ddga-skeleton--wave::after {\n content: '';\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, var(--ddga-color-background) 60%, transparent),\n transparent\n );\n animation: ddga-skeleton-wave 1.6s linear infinite;\n }\n\n @keyframes ddga-skeleton-wave {\n 100% {\n transform: translateX(100%);\n }\n }\n\n /* RTL: sweep direction follows reading direction so the shimmer feels native. */\n [dir='rtl'] .ddga-skeleton--wave::after {\n transform: translateX(100%);\n animation-name: ddga-skeleton-wave-rtl;\n }\n\n @keyframes ddga-skeleton-wave-rtl {\n 100% {\n transform: translateX(-100%);\n }\n }\n\n .ddga-skeleton--none {\n animation: none;\n }\n\n .ddga-skeleton--none::after {\n display: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--pulse,\n .ddga-skeleton--wave::after {\n animation: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-divider {\n /* Single hook so consumers can recolor the divider per-instance. */\n --ddga-divider-color: var(--ddga-color-border);\n border: 0;\n }\n\n /* ─── Plain (no children) ─── */\n\n .ddga-divider--horizontal {\n display: block;\n block-size: 0;\n inline-size: 100%;\n /* Use a border so dashed style works naturally without backgrounds. */\n border-block-start: 1px solid var(--ddga-divider-color);\n }\n\n /* `inline-block` so consumers can drop a vertical divider next to inline\n content (e.g. button rows) without forcing a flex parent. Consumers in a\n flex/grid row will still pick up the parent's cross-axis sizing. */\n .ddga-divider--vertical {\n display: inline-block;\n inline-size: 0;\n block-size: 100%;\n min-block-size: 1em;\n vertical-align: middle;\n border-inline-start: 1px solid var(--ddga-divider-color);\n }\n\n /* ─── Dashed (overrides solid border style) ─── */\n\n .ddga-divider--dashed.ddga-divider--horizontal {\n border-block-start-style: dashed;\n }\n .ddga-divider--dashed.ddga-divider--vertical {\n border-inline-start-style: dashed;\n }\n\n /* ─── Labeled (horizontal + children) ─── */\n\n .ddga-divider--labeled {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n /* Override the plain-bar shape: this row is the divider, not a 0px line\n with a top border. */\n block-size: auto;\n border-block-start: 0;\n }\n\n .ddga-divider--labeled::before,\n .ddga-divider--labeled::after {\n content: '';\n block-size: 0;\n border-block-start: 1px solid var(--ddga-divider-color);\n }\n\n .ddga-divider--labeled.ddga-divider--dashed::before,\n .ddga-divider--labeled.ddga-divider--dashed::after {\n border-block-start-style: dashed;\n }\n\n /* Label positions — `start`/`end` are logical so they flip in RTL. */\n .ddga-divider--label-center::before,\n .ddga-divider--label-center::after {\n flex: 1;\n }\n\n .ddga-divider--label-start::before {\n flex: 0 0 var(--ddga-space-6);\n }\n .ddga-divider--label-start::after {\n flex: 1;\n }\n\n .ddga-divider--label-end::before {\n flex: 1;\n }\n .ddga-divider--label-end::after {\n flex: 0 0 var(--ddga-space-6);\n }\n\n .ddga-divider__label {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n white-space: nowrap;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-divider {\n border-color: CanvasText;\n }\n .ddga-divider--labeled::before,\n .ddga-divider--labeled::after {\n border-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-card {\n /* Single hook drives all section padding. Variants below redefine it. */\n --ddga-card-padding: var(--ddga-space-5);\n display: flex;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border-radius: var(--ddga-radius-md);\n overflow: hidden;\n transition:\n box-shadow 150ms ease,\n transform 150ms ease,\n border-color 150ms ease;\n }\n\n /* ─── Orientation ─── */\n\n .ddga-card--vertical {\n flex-direction: column;\n }\n .ddga-card--horizontal {\n flex-direction: row;\n /* RTL: row reverses to keep the image at the start (logical) — handled\n implicitly by flexbox honoring the writing direction. */\n }\n\n /* ─── Variants ─── */\n\n .ddga-card--default {\n border: 1px solid var(--ddga-color-border);\n }\n\n .ddga-card--outline {\n background-color: transparent;\n border: 1px solid var(--ddga-color-border);\n }\n\n .ddga-card--elevated {\n border: 1px solid transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-card--filled {\n background-color: var(--ddga-color-muted);\n border: 1px solid transparent;\n }\n\n /* SA Green gradient hero — uses primary palette gradient from dga-preferences\n §5.4 (SA 600 → SA 500 @ 90°). Text + descriptions invert to white. */\n .ddga-card--gradient {\n background-image: linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));\n color: var(--ddga-color-primary-foreground);\n border: 1px solid transparent;\n }\n .ddga-card--gradient .ddga-card__title,\n .ddga-card--gradient .ddga-card__description {\n color: inherit;\n }\n .ddga-card--gradient .ddga-card__description {\n /* Softer than the title against the gradient. */\n opacity: 0.85;\n }\n .ddga-card--gradient .ddga-card__footer {\n border-block-start-color: rgb(255 255 255 / 0.15);\n }\n\n /* Bare card — no bg, no border, no shadow. For grouped lists where the\n parent provides separation, or when stacking content blocks without\n visual chrome. */\n .ddga-card--ghost {\n background-color: transparent;\n border: 1px solid transparent;\n }\n .ddga-card--ghost .ddga-card__footer {\n border-block-start-color: transparent;\n }\n\n /* ─── Padding scale ─── */\n\n .ddga-card--padding-sm {\n --ddga-card-padding: var(--ddga-space-3);\n }\n .ddga-card--padding-md {\n --ddga-card-padding: var(--ddga-space-5);\n }\n .ddga-card--padding-lg {\n --ddga-card-padding: var(--ddga-space-6);\n }\n\n /* ─── Interactive (hover lift + focus ring; pairs with asChild for clickable cards) ─── */\n\n .ddga-card--interactive {\n cursor: pointer;\n /* No transform on touch — avoids the sticky-hover look on mobile. */\n }\n .ddga-card--interactive:hover {\n border-color: var(--ddga-color-input);\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-card--interactive.ddga-card--elevated:hover,\n .ddga-card--interactive.ddga-card--gradient:hover {\n box-shadow: var(--ddga-shadow-lg);\n }\n .ddga-card--interactive:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Image ─── */\n\n .ddga-card__image {\n display: block;\n inline-size: 100%;\n block-size: auto;\n object-fit: cover;\n aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n }\n\n /* In horizontal cards, the image hugs the start edge and stretches the full\n card height. Cap its width so the content side still has room to breathe. */\n .ddga-card--horizontal > .ddga-card__image {\n aspect-ratio: auto;\n inline-size: 40%;\n max-inline-size: 240px;\n block-size: auto;\n align-self: stretch;\n flex-shrink: 0;\n }\n\n /* The content side of a horizontal card needs to take the remaining width\n and keep its own column layout. */\n .ddga-card--horizontal > :not(.ddga-card__image) {\n flex: 1 1 auto;\n }\n .ddga-card--horizontal > .ddga-card__header + .ddga-card__content {\n padding-top: 0;\n }\n\n /* ─── Sections (all share --ddga-card-padding) ─── */\n\n .ddga-card__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-card-padding);\n }\n\n .ddga-card__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: var(--ddga-text-primary);\n }\n\n .ddga-card__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-card__content {\n padding: var(--ddga-card-padding);\n }\n\n /* Header immediately followed by content: collapse the redundant top padding\n so the two sections read as one continuous block. */\n .ddga-card__header + .ddga-card__content {\n padding-top: 0;\n }\n\n /* When an image leads the card, the section under it should NOT have a stray\n top border or extra padding — the image already provides a clean edge. */\n .ddga-card__image + .ddga-card__header,\n .ddga-card__image + .ddga-card__content {\n /* (use the default --ddga-card-padding) */\n }\n\n .ddga-card__footer {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-card-padding);\n border-top: 1px solid var(--ddga-color-border);\n }\n\n /* No top border when there's no preceding section to separate from. */\n .ddga-card__footer:first-child {\n border-top: 0;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-card {\n transition: none;\n }\n }\n\n /* ─── Dark mode adjustments ─── */\n\n [data-theme='dark'] .ddga-card--gradient {\n background-image: linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600));\n }\n}\n","@layer ddga-components {\n /* ─── Viewport (fixed region where toasts stack) ─── */\n /*\n * z-index 70 — above Modal (60), Tooltip (50). The viewport itself is\n * pointer-events: none so it doesn't block clicks in the rest of the page;\n * each toast re-enables pointer events for itself.\n *\n * Default is `position: fixed` (pinned to the browser viewport). When the\n * `containerized` modifier is applied, it switches to `position: absolute`\n * so it pins to a positioned ancestor instead — needed in Storybook,\n * embedded widgets, and any case where the Toaster shouldn't escape its\n * parent box.\n */\n\n .ddga-toast-viewport {\n position: fixed;\n z-index: 70;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-4);\n /* min() handles both wide containers (cap at 420) and narrow ones (fill\n minus side breathing room) in a single rule — no fragile vw-based\n media query needed. */\n inline-size: min(420px, calc(100% - 2rem));\n pointer-events: none;\n list-style: none;\n margin: 0;\n /* Always allow individual toasts to be clicked even when the viewport\n itself is pass-through. */\n }\n .ddga-toast-viewport > * {\n pointer-events: auto;\n }\n\n .ddga-toast-viewport--containerized {\n position: absolute;\n }\n\n /* ─── Position anchors ─── */\n /*\n * Edge anchors use logical insets (`inset-inline-*`) so `start`/`end` flip\n * automatically in RTL. Center anchors use physical `left: 50%` paired\n * with `transform: translateX(-50%)` — centering is direction-symmetric,\n * and the logical-inset + translate combo would shift off-axis in RTL\n * (same trap fixed earlier in Modal).\n */\n\n .ddga-toast-viewport--top-start {\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n .ddga-toast-viewport--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n .ddga-toast-viewport--top-end {\n inset-block-start: 0;\n inset-inline-end: 0;\n }\n .ddga-toast-viewport--bottom-start {\n inset-block-end: 0;\n inset-inline-start: 0;\n flex-direction: column-reverse;\n }\n .ddga-toast-viewport--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n flex-direction: column-reverse;\n }\n .ddga-toast-viewport--bottom-end {\n inset-block-end: 0;\n inset-inline-end: 0;\n flex-direction: column-reverse;\n }\n\n /* ─── Toast (one notification) ─── */\n\n .ddga-toast {\n /* Per-variant accent (icon + border-leading edge). Card-surface bg keeps\n the toast neutral so dark + light look balanced; the leading inset\n shadow does the variant signaling. */\n --ddga-toast-accent: var(--ddga-color-info);\n\n /* Explicit width = 100% of viewport so the toast reliably fills the\n column regardless of flex defaults / browser quirks. min-inline-size:0\n lets the body text wrap without forcing the toast wider. */\n inline-size: 100%;\n min-inline-size: 0;\n\n pointer-events: auto;\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n font-family: inherit;\n line-height: 1.4;\n /* Outer drop shadow + inline-start accent bar in one shadow declaration.\n Logical direction: the accent reads as the leading edge — flipped for\n RTL via the rule below. */\n box-shadow:\n var(--ddga-shadow-lg),\n inset 3px 0 0 0 var(--ddga-toast-accent);\n }\n [dir='rtl'] .ddga-toast {\n box-shadow:\n var(--ddga-shadow-lg),\n inset -3px 0 0 0 var(--ddga-toast-accent);\n }\n\n .ddga-toast--default {\n --ddga-toast-accent: var(--ddga-color-border);\n }\n .ddga-toast--info {\n --ddga-toast-accent: var(--ddga-color-info);\n }\n .ddga-toast--success {\n --ddga-toast-accent: var(--ddga-color-success);\n }\n .ddga-toast--warning {\n --ddga-toast-accent: var(--ddga-color-warning);\n }\n .ddga-toast--destructive {\n --ddga-toast-accent: var(--ddga-color-destructive);\n }\n\n /* ─── Icon (leading) ─── */\n\n .ddga-toast__icon {\n flex-shrink: 0;\n inline-size: 1.25em;\n block-size: 1.25em;\n color: var(--ddga-toast-accent);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Optical-center with the title's cap height. */\n margin-block-start: 0.125em;\n }\n .ddga-toast__icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Body (title + description + action stack) ─── */\n\n .ddga-toast__body {\n flex: 1 1 0;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n /* Leave room for the absolutely-positioned close button so long titles\n don't run under it. */\n padding-inline-end: var(--ddga-space-5);\n }\n\n .ddga-toast__title {\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n margin: 0;\n color: inherit;\n /* Allow wrapping on long titles; we don't want truncation here. */\n overflow-wrap: anywhere;\n }\n .ddga-toast__description {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n margin: 0;\n overflow-wrap: anywhere;\n }\n\n /* ─── Action button (inside body) ─── */\n\n .ddga-toast__action {\n align-self: flex-end;\n margin-block-start: var(--ddga-space-2);\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-3);\n background: transparent;\n border: 1px solid var(--ddga-color-border);\n color: var(--ddga-toast-accent);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n cursor: pointer;\n white-space: nowrap;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease;\n }\n .ddga-toast__action:hover {\n background-color: var(--ddga-color-muted);\n border-color: var(--ddga-toast-accent);\n }\n .ddga-toast__action:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n }\n\n /* ─── Close button (corner, on the root) ─── */\n\n .ddga-toast__close {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n inline-size: 1.5rem;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-secondary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n transition:\n opacity 150ms ease,\n background-color 150ms ease;\n }\n .ddga-toast__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-toast__close:hover {\n opacity: 1;\n background-color: var(--ddga-color-muted);\n }\n .ddga-toast__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n opacity: 1;\n }\n\n /* ─── Animations (Radix data-state + swipe) ─── */\n /*\n * Slide-in direction is anchored on the viewport's position. Bottom and\n * top positions slide vertically from the anchored edge so the motion\n * always feels like the toast is \"coming from\" the corner it lives in.\n * For start/end positions in RTL, the slide is still vertical — no\n * horizontal/inline animations to avoid the RTL transform tangle.\n */\n\n .ddga-toast[data-state='open'] {\n animation: ddga-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-toast[data-state='closed'] {\n animation: ddga-toast-out 180ms ease forwards;\n }\n\n /* Radix portals toasts as children of the Viewport, so the descendant\n selector targets them. Bottom: come up from below. Top: come down. */\n .ddga-toast-viewport[data-position^='bottom-'] .ddga-toast[data-state='open'] {\n animation-name: ddga-toast-slide-up;\n }\n .ddga-toast-viewport[data-position^='top-'] .ddga-toast[data-state='open'] {\n animation-name: ddga-toast-slide-down;\n }\n\n /* Swipe gesture (Radix sets --radix-toast-swipe-move-x/y while dragging). */\n .ddga-toast[data-swipe='move'] {\n transform: translate3d(\n var(--radix-toast-swipe-move-x, 0),\n var(--radix-toast-swipe-move-y, 0),\n 0\n );\n }\n .ddga-toast[data-swipe='cancel'] {\n transform: translate3d(0, 0, 0);\n transition: transform 200ms ease-out;\n }\n .ddga-toast[data-swipe='end'] {\n animation: ddga-toast-out 180ms ease forwards;\n }\n\n @keyframes ddga-toast-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-toast-slide-up {\n from {\n opacity: 0;\n transform: translateY(24px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-toast-slide-down {\n from {\n opacity: 0;\n transform: translateY(-24px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-toast-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-toast,\n .ddga-toast[data-state='open'],\n .ddga-toast[data-state='closed'] {\n animation-duration: 1ms;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-toast {\n border-color: CanvasText;\n }\n .ddga-toast__action:focus-visible,\n .ddga-toast__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* Size lives on the root (.ddga-breadcrumb--{sm,md}). All descendant\n selectors cascade from there. Logical properties handle the RTL flip\n for spacing; the separator chevron flips via `[dir='rtl'] transform`\n because chevrons are visual-direction glyphs that CSS logical\n properties don't auto-mirror. */\n\n /* ─── Root (nav) ─── */\n\n .ddga-breadcrumb {\n color: var(--ddga-text-secondary);\n font-family: inherit;\n line-height: 1.4;\n }\n\n /* ─── List (ol) ─── */\n\n .ddga-breadcrumb__list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n /* Spacing between items + separator handled at item level via gap so\n wrapped lines stay readable. */\n gap: var(--ddga-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n /* ─── Item (li) ─── */\n\n .ddga-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Link (a) ─── */\n\n .ddga-breadcrumb__link {\n color: var(--ddga-text-secondary);\n text-decoration: none;\n border-radius: var(--ddga-radius-sm);\n transition: color 150ms ease;\n }\n\n .ddga-breadcrumb__link:hover {\n color: var(--ddga-text-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .ddga-breadcrumb__link:focus-visible {\n outline: none;\n color: var(--ddga-text-primary);\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Page (current) ─── */\n\n .ddga-breadcrumb__page {\n color: var(--ddga-text-primary);\n font-weight: 500;\n }\n\n /* ─── Separator (li, decorative) ─── */\n\n .ddga-breadcrumb__separator {\n display: inline-flex;\n align-items: center;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-breadcrumb__separator > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* RTL flip — chevron's geometry encodes direction. Only target the icon\n (and any other svg child) so consumer-supplied custom separators (`/`,\n `·`) that aren't direction-encoded stay un-flipped. */\n [dir='rtl'] .ddga-breadcrumb__separator > svg {\n transform: scaleX(-1);\n }\n\n /* ─── Ellipsis ─── */\n\n .ddga-breadcrumb__ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5em;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-breadcrumb__ellipsis > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-breadcrumb--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-breadcrumb--md {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-breadcrumb__link {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-breadcrumb__link {\n color: LinkText;\n }\n .ddga-breadcrumb__link:hover {\n color: LinkText;\n }\n .ddga-breadcrumb__link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-breadcrumb__page {\n color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Variant + size live on the root (.ddga-tabs--{line,pill,sm,md}). All\n descendant selectors cascade from there. Logical properties keep the\n RTL flip free — Radix sets `dir` from the DgaProvider's Direction.Provider\n and updates `data-orientation` on Root/List/Trigger/Content. */\n\n /* ─── Root ─── */\n\n .ddga-tabs {\n display: flex;\n color: var(--ddga-text-primary);\n /* Default (horizontal) layout: list above content. */\n flex-direction: column;\n gap: var(--ddga-space-3);\n /* CSS var so consumers can tune the line variant's indicator weight. */\n --ddga-tabs-indicator-thickness: 2px;\n }\n\n /* Vertical layout: list beside content. Radix sets data-orientation\n on every part — target it on Root for layout flow, and on List for\n its own flex direction. */\n .ddga-tabs[data-orientation='vertical'] {\n flex-direction: row;\n gap: var(--ddga-space-4);\n }\n\n /* ─── List ─── */\n\n .ddga-tabs__list {\n display: flex;\n /* Horizontal default — gap depends on variant (pill needs tighter,\n line wants none so the baseline reads as a single underline). */\n flex-direction: row;\n align-items: stretch;\n }\n .ddga-tabs__list[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n }\n\n /* Full-width: triggers stretch to fill the list. Each trigger\n `flex: 1` so they share width evenly. Use a separate selector so the\n prop is opt-in and doesn't override per-variant defaults. */\n .ddga-tabs__list--full-width {\n inline-size: 100%;\n }\n .ddga-tabs__list--full-width .ddga-tabs__trigger {\n flex: 1;\n justify-content: center;\n }\n\n /* ─── Trigger (Radix renders a <button>) ─── */\n\n .ddga-tabs__trigger {\n /* Reset the native button. */\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n /* Layout. */\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n /* Text. */\n color: var(--ddga-text-secondary);\n font-family: inherit;\n font-weight: 500;\n line-height: 1.4;\n white-space: nowrap;\n cursor: pointer;\n position: relative;\n transition:\n color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-tabs__trigger:hover {\n color: var(--ddga-text-primary);\n }\n\n .ddga-tabs__trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* Disabled — match both Radix's data-disabled (native disabled) AND\n aria-disabled (asChild composition). Same convention as Button. */\n .ddga-tabs__trigger[data-disabled],\n .ddga-tabs__trigger[aria-disabled='true'] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-tabs__trigger[data-disabled]:hover,\n .ddga-tabs__trigger[aria-disabled='true']:hover {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-tabs--sm .ddga-tabs__trigger {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tabs--md .ddga-tabs__trigger {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Variant: line ─── */\n\n .ddga-tabs--line .ddga-tabs__list {\n /* The unselected baseline runs along the inline edge — block-end on\n horizontal lists, inline-end on vertical ones (right in LTR, left in\n RTL — logical properties handle the flip). */\n border-block-end: 1px solid var(--ddga-color-border);\n gap: var(--ddga-space-1);\n }\n .ddga-tabs--line .ddga-tabs__list[data-orientation='vertical'] {\n border-block-end: 0;\n border-inline-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-tabs--line .ddga-tabs__trigger {\n /* Reserve space for the indicator so active/inactive don't shift. */\n margin-block-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n border-block-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n }\n .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger {\n margin-block-end: 0;\n margin-inline-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n border-block-end: 0;\n border-inline-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n }\n\n .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n color: var(--ddga-color-primary);\n border-block-end-color: var(--ddga-color-primary);\n }\n .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n border-block-end-color: transparent;\n border-inline-end-color: var(--ddga-color-primary);\n }\n\n /* ─── Variant: pill ─── */\n\n .ddga-tabs--pill .ddga-tabs__list {\n background-color: var(--ddga-color-muted);\n border-radius: var(--ddga-radius-md);\n padding: var(--ddga-space-1);\n gap: var(--ddga-space-1);\n align-self: flex-start;\n }\n .ddga-tabs--pill .ddga-tabs__list--full-width {\n align-self: stretch;\n }\n\n .ddga-tabs--pill .ddga-tabs__trigger {\n border-radius: calc(var(--ddga-radius-md) - 2px);\n }\n\n .ddga-tabs--pill .ddga-tabs__trigger:hover:not([data-state='active']) {\n background-color: color-mix(in oklab, var(--ddga-color-muted) 60%, var(--ddga-text-primary) 6%);\n }\n\n .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n color: var(--ddga-text-primary);\n background-color: var(--ddga-color-background);\n box-shadow: var(--ddga-shadow-sm);\n }\n\n /* ─── Content ─── */\n\n .ddga-tabs__content {\n /* Radix sets tabindex=0 on the content so keyboard users can shift focus\n from the list into the panel. Make that focus visible. */\n outline: none;\n }\n .ddga-tabs__content:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tabs__trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-tabs--line .ddga-tabs__list {\n border-block-end-color: CanvasText;\n }\n .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n border-block-end-color: Highlight;\n color: Highlight;\n }\n .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n outline: 1px solid Highlight;\n color: Highlight;\n }\n .ddga-tabs__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n","@layer ddga-components {\n /* Size lives on the root (.ddga-pagination--{sm,md}); all per-part visuals\n cascade through descendant selectors. Direction-encoded chevron icons\n flip in RTL via `[dir='rtl']`, with the previous icon double-flipped so\n it points \"back\" in either direction. */\n\n /* ─── Root (nav) ─── */\n\n .ddga-pagination {\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.4;\n }\n\n /* ─── Content (ul) ─── */\n\n .ddga-pagination__content {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n /* ─── Item (li) ─── */\n\n .ddga-pagination__item {\n display: inline-flex;\n }\n\n /* ─── Link (a) ─── */\n\n .ddga-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n font-family: inherit;\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease,\n border-color 150ms ease;\n }\n\n .ddga-pagination__link:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n\n .ddga-pagination__link:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Active link (current page) ─── */\n\n .ddga-pagination__link--active {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n border-color: var(--ddga-color-primary);\n }\n\n .ddga-pagination__link--active:hover {\n background-color: var(--ddga-color-primary-hover);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* ─── Prev / Next ─── */\n\n .ddga-pagination__nav {\n gap: var(--ddga-space-1);\n padding-inline: var(--ddga-space-3);\n }\n\n .ddga-pagination__nav-icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* Direction logic: chevron points \"forward\" (inline-end). The Previous\n icon is flipped 180° in LTR so it points back; in RTL the flip is\n un-done (RTL \"back\" = visual right = unflipped chevron). The Next icon\n is flipped only in RTL because RTL \"forward\" = visual left. */\n .ddga-pagination__nav-icon--previous {\n transform: scaleX(-1);\n }\n [dir='rtl'] .ddga-pagination__nav-icon--previous {\n transform: scaleX(1);\n }\n [dir='rtl'] .ddga-pagination__nav-icon--next {\n transform: scaleX(-1);\n }\n\n /* ─── Ellipsis ─── */\n\n .ddga-pagination__ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n block-size: 2rem;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-pagination__ellipsis > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-pagination--sm .ddga-pagination__link,\n .ddga-pagination--sm .ddga-pagination__ellipsis {\n min-inline-size: 1.75rem;\n block-size: 1.75rem;\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-pagination--md .ddga-pagination__link,\n .ddga-pagination--md .ddga-pagination__ellipsis {\n min-inline-size: 2rem;\n block-size: 2rem;\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-pagination__link {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-pagination__link {\n color: LinkText;\n border: 1px solid CanvasText;\n }\n .ddga-pagination__link--active {\n color: HighlightText;\n background-color: Highlight;\n border-color: Highlight;\n }\n .ddga-pagination__link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n"],"names":[]}
1
+ {"version":3,"mappings":"AAAA,iBMAA,i8IQCA,g1CCAA,oOAQA,wOAQA,6OAQA,uPAQA,uPAQA,wOAQA,2OAQA,4PWzDA,0DAQA,2MAWA,yC1BnBA,uBKKE,uEAMA,iFAMA,8DAIA,0DQlBA,4VAqBA,4GAIA,sHAMA,kHAIA,0HAMA,sHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,wIAKA,uHAMA,2GAIA,uHAMA,2FAIA,qHAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAaA,wHAKA,+DAGA,+MAIA,8GAGA,0IAMA,2FAGA,uOAWA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,qFAMA,wHAQA,+CAMA,8BACE,yCAGA,uDAGA,6FStPF,gJAOA,gFAOA,4RAgBA,sGAKA,wGAKA,sGAQA,yIAYA,mEAQA,0PAAA,gQAAA,gQAWA,kJAYA,2DAOA,wFAGA,oFAMA,yGAOA,wDAGA,kHAOA,oHAKA,mFAIA,sGAMA,uCACE,6BAOF,8BACE,wCAGA,qDAGA,mFC1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DCpHF,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA,8DCrIF,8KAQA,sFAOA,uDAIA,kDAGA,6CAOA,wEAQA,yQAgBA,mEAIA,mEAOA,uEAMA,mFAOA,0EAGA,mHAGA,gGAMA,mDAIA,gHAOA,sHAOA,+GASA,sHASA,uCACE,6BAOF,8BACE,wCAGA,uDAGA,6CAGA,yEAIA,2DxBrJF,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,0FAOA,uHAMA,iFAOA,uCACE,kDAQF,8BACE,iEAIA,4DAGA,gEAIA,oFAGA,0EAIA,6CQ3JF,iJAOA,iFAOA,0WAmBA,+GAKA,iHAQA,gIAOA,0EAIA,qGAQA,iEAGA,4HAOA,wFAKA,uEAMA,0VAgBA,kDAMA,oYAoBA,6EAIA,wGAQA,2JAOA,wDAOA,uCACE,yDAQF,8BACE,iDAGA,kFAIA,mEAIA,iDAGA,mFAIA,kDSzLF,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,kGAIA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,4EAMA,+GAOA,0JAQA,qHAOA,qDAMA,qDAWA,0JASA,4CAMA,uCACE,4BAOF,uHV1MA,2SAgBA,kGAMA,kGAQA,sFAKA,2GAKA,iHAKA,uHAKA,2GAKA,2GAKA,kGAOA,yFAKA,+FAKA,mGAKA,mGAKA,mGAKA,0FAOA,qHAQA,oIAUA,8FAOA,+EAOA,gDAOA,0RAmBA,0DAKA,4FAIA,6FAOA,8BACE,yCS9KF,qEAQA,6HAWA,4KAWA,+EAGA,8EAMA,oHAUA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAQA,8BACE,kGe1FF,gZAqBA,yCAGA,yCAGA,yCAGA,yCAGA,yCAMA,2DAIA,yDAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,2IAOA,kEAMA,8BACE,+D5B9JF,mTAqBA,0HAMA,0HAQA,mDAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAYF,8BACE,2CQlFF,kaAsBA,uIAMA,mJAMA,mJAMA,uJAQA,4LAYA,uDAOA,sGAQA,0IAQA,8GAWA,0TAoBA,sDAIA,8DAIA,sGAUA,2GAIA,iHAIA,iHAIA,mHAIA,sEAMA,8BACE,oCAGA,8ES9JF,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAUA,iGAQA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA,8EQ1MF,sNAiBA,2CAIA,sDAaA,yEAIA,0EAKA,qEAIA,wGAKA,8GAMA,oGAQA,8gBAgCA,kGAMA,kEAGA,6DAGA,mEAGA,mEAGA,2EAMA,4LAWA,uDAOA,iJAWA,iJAQA,6HASA,8bAkBA,yGAIA,6FAOA,kYAoBA,wDAIA,4EAIA,sGAeA,mFAGA,sEAMA,6GAGA,4GAKA,4HAOA,0FAIA,mEAIA,sGAUA,6GAUA,gHAUA,0EAUA,uCACE,gGASF,8BACE,oCAGA,gHK5UF,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,2IAKA,6IAQA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA,kFGvMF,sFAQA,iIAcA,sFAQA,uIAOA,gHAMA,6HAQA,sEAOA,mGAMA,+DAQA,+DAMA,2IAQA,8DAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yC9B3HF,oFAQA,oIAYA,2CAMA,sYAoBA,qGAKA,8FAOA,4JAMA,iIAOA,iFAKA,0DASA,0DAGA,mEAGA,gEAMA,8JASA,8DAOA,0KAOA,oKASA,uCACE,wCAOF,8BACE,kEAIA,qGAKA,qFSnJF,uJAUA,4EAMA,8CAOA,mVAmBA,+DAIA,oIAQA,+HAQA,4FAMA,0EAKA,qFAGA,qFAIA,qFAKA,oGAQA,kGAWA,kHAIA,oHAOA,uCACE,qGAIA,0CAOF,8BACE,8DAIA,uFcpIF,+GASA,0FAMA,oEAOA,0EAOA,+GAKA,0GAcA,oQAYA,kQAcA,2KAOA,+aAuBA,+EAOA,iLAKA,+EAGA,wEAKA,yHAOA,kGAOA,6FAKA,+EAIA,iKAUA,mDAGA,mDAMA,uCACE,wCAOF,8BACE,gEAIA,6IAKA,uEAGA,4JGlMF,4GAOA,iCAGA,mCAGA,iCAIA,yEASA,uCACE,uCM3BF,yIAUA,+EAMA,iDAKA,oFAQA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,wCAIA,uCACE,iEpCpFF,8IAQA,kCAGA,kCAGA,mCAIA,wEAGA,wEAGA,wEAGA,gFAIA,yLAUA,sMAOA,2FAUA,oHAIA,+FAWA,sHAQA,iFAGA,iFAGA,iFAGA,yFAIA,2CAIA,2DAIA,yIAKA,0JAKA,oEAMA,6OAYA,6EAGA,8FAKA,uCACE,iKAIA,8EQ/IF,wUAgBA,mGAGA,qFAIA,iIAUA,6DAWA,2DAGA,2DAMA,wUAiBA,qFAIA,6FAOA,gFAGA,oGAKA,iHAQA,sKASA,6DAKA,+IASA,+GAMA,sQAYA,yEAIA,yJAYA,yFAIA,yHAQA,gEAMA,oQAUA,sKASA,8BACE,gDAGA,2FAIA,4DAOF,uCACE,4FS/MF,0IAWA,6EAGA,gFAIA,6DAQA,8DAWA,gUAkBA,kIAMA,8HAMA,8HAMA,+HAYA,mGAIA,mGAIA,mGAIA,4FAKA,mGAIA,mGAIA,mGAIA,4FAOA,+EAGA,kFAGA,2EAGA,8EAGA,2EAGA,8EAGA,iFAGA,oFAOA,+FAQA,gGAQA,4FAQA,6FAQA,+FAQA,gGAQA,iGAQA,kGAWA,uFAGA,0FAGA,uFAGA,0FAMA,mHAMA,0FAOA,8PAaA,gKAQA,6HAQA,iWAiBA,sGAIA,8FAIA,+DAOA,uCACE,mDAQF,8BACE,0CQ3TF,2OASA,uDAOA,oYAkBA,iHAKA,mHAMA,kIAMA,uGAMA,mEAGA,8HAKA,4GAQA,+DAIA,mGASA,wQAeA,iGAGA,mFAGA,4HAUA,wDAWA,yFAMA,uOAWA,qEAMA,2FAOA,+KAQA,oVAoBA,iFAGA,4FAKA,sKASA,oEAIA,iHAUA,6QAUA,gKASA,uCACE,kGAMF,8BACE,0EAIA,wFQrPF,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAYA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAaA,kQAYA,qGAGA,oFAGA,+HAUA,2DAiBA,qJAYA,4LAQA,qYAiBA,8JAKA,2FAMA,uDAIA,8JAQA,gRAcA,kHAIA,gGAGA,kGAUA,4LAeA,0JASA,+cAoBA,kFAGA,iIAMA,mFAIA,8DAKA,2EAKA,sMAYA,0bAuBA,sMASA,yEAIA,kIAMA,qHAIA,kIAGA,uGAGA,sIAIA,sJAUA,qFAMA,uCACE,2EAIA,iGAQF,8BACE,gFAIA,4FAIA,+FAIA,oGAIA,8FEpdF,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA,yCpCxKA,6GAOA,iJAOA,0HAQA,4IAWA,qGAKA,qGAQA,kJAQA,qHASA,gTAcA,2CAIA,2FAOA,6EAGA,iFAGA,mGAMA,uCAGA,mEAMA,0FAOA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,wEAIA,kFQxIF,uJAOA,uFAOA,4RAgBA,0EAIA,4EAIA,0EAOA,uMAgBA,0EAMA,4RAkBA,wFAGA,0FAIA,iGAIA,iEAOA,gHAOA,+DAGA,yHAOA,+GAOA,uCACE,6DAQF,8BACE,+CAGA,sEAIA,gFShJF,+JAUA,yNAYA,gCAGA,kCAGA,gCAKA,wIAMA,uCAKA,gEAIA,8DAMA,uEAMA,mEAOA,wJAUA,2EAGA,4EAIA,oCAMA,8BACE,uCAGA,wCAGA,qEQpGF,0aAuBA,uJAMA,yJAMA,uJASA,yHAOA,0JAKA,+JAOA,gHAOA,8HAQA,sFAQA,0DAMA,oDAMA,8FAIA,qLAKA,0JAMA,mKAQA,uCACE,uDAQF,8BACE,mHAKA,+FQxIF,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,8GAIA,kFAOF,4GAOA,iHAGA,2FQlEA,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE,sDZhHF,sRAeA,yEAIA,gMAQA,6JAOA,uIAIA,mIAIA,iIAIA,iHAYA,kHAIA,sHAIA,oJAIA,kJAIA,gJAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAWA,+EAMA,0RAUA,gFAGA,8EAKA,gFAIA,sGAOA,2DAKA,4FAMA,2CAGA,oEAGA,mEAIA,qEAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,gIAIA,yBACE,8EAKF,6FAOA,iDAKA,8BAEE,6CAGA,wDUnPF,yUAoBA,0HAMA,4HAmBA,+JAQA,yXAoBA,0DAKA,mGAKA,4FAOA,uFAGA,yEAMA,8FAUA,uDASA,uCACE,qCAUF,8BACE,0CAGA,iECjIF,oIAWA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAWA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,kHASA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,mLAIA,2JAGA,mHAQA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,6HAKA,sGASF,uCACE,kRFvdF,sLASA,mFAKA,uGAOA,yJAQA,iGAGA,wHAKA,uIAOA,kLASA,oFAIA,yCAMA,4GAMA,8BACE,kFAOF,uCACE,8CIlFF,qRAiBA,wdAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,0DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAUA,qKASA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA,0FCzTF,wQAcA,4EAKA,kGAQA,8MAQA,sDAMA,6GAOA,+FAQA,oUAaA,sUAqBA,oIAGA,gIAGA,oIAGA,8HAMA,mWAiBA,8LAQA,0DAKA,qFAGA,qFAGA,iFAGA,qFAGA,+EAMA,4KASA,wJAQA,mGAOA,6HASA,8BACE,gDAGA,4CAGA","sources":["src/index.css","src/components/switch.css","src/components/slider.css","src/components/progress.css","src/components/tooltip.css","src/components/field.css","src/variables.css","src/dark.css","src/components/pagination.css","src/components/badge.css","src/components/select.css","src/components/number-input.css","src/components/dropdown-menu.css","src/components/alert.css","src/components/button.css","src/components/input.css","src/components/textarea.css","src/components/checkbox.css","src/components/card.css","src/components/rating.css","src/components/drawer.css","src/components/modal.css","src/themes.css","src/components/accordion.css","src/components/divider.css","src/components/radio.css","src/reset.css","src/components/toggle.css","src/components/combobox.css","src/components/toast.css","src/components/steps.css","src/components/file-upload.css","src/components/avatar.css","src/components/spinner.css","src/components/tabs.css","src/components/description-list.css","src/components/date-picker.css","src/components/breadcrumb.css","src/components/stat.css","src/components/skeleton.css","src/components/scroll-area.css","src/components/popover.css","src/components/sidebar.css","src/components/empty-state.css","src/components/menubar.css","src/components/timeline.css"],"sourcesContent":["@layer ddga-base, ddga-components;\n\n@import './variables.css' layer(ddga-base);\n@import './dark.css' layer(ddga-base);\n/* themes.css imported AFTER dark.css so `.ddga-theme-*` classes win over\n dark.css's primary override (dark mode + explicit theme = theme wins). */\n@import './themes.css' layer(ddga-base);\n@import './reset.css' layer(ddga-base);\n\n@import './components/field.css';\n@import './components/button.css';\n@import './components/input.css';\n@import './components/textarea.css';\n@import './components/checkbox.css';\n@import './components/radio.css';\n@import './components/switch.css';\n@import './components/select.css';\n@import './components/card.css';\n@import './components/badge.css';\n@import './components/divider.css';\n@import './components/avatar.css';\n@import './components/tooltip.css';\n@import './components/alert.css';\n@import './components/modal.css';\n@import './components/toast.css';\n@import './components/tabs.css';\n@import './components/breadcrumb.css';\n@import './components/pagination.css';\n@import './components/accordion.css';\n@import './components/steps.css';\n@import './components/spinner.css';\n@import './components/skeleton.css';\n@import './components/progress.css';\n@import './components/dropdown-menu.css';\n@import './components/drawer.css';\n@import './components/combobox.css';\n@import './components/date-picker.css';\n@import './components/file-upload.css';\n@import './components/slider.css';\n@import './components/number-input.css';\n@import './components/rating.css';\n@import './components/toggle.css';\n@import './components/description-list.css';\n@import './components/empty-state.css';\n@import './components/stat.css';\n@import './components/popover.css';\n@import './components/sidebar.css';\n@import './components/scroll-area.css';\n@import './components/menubar.css';\n@import './components/timeline.css';\n/* AUTO:COMPONENT_IMPORTS */\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Switch-specific styles live here. */\n\n /* ─── Row (track + label, inline) ─── */\n\n .ddga-switch-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Track (Radix Root , reset the button, then style) ─── */\n\n .ddga-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid transparent;\n border-radius: 999px;\n background-color: var(--ddga-color-input);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* Track dimensions and travel distance. Travel is encoded as a per-size\n custom property so the thumb rule below is size-agnostic. */\n .ddga-switch--md {\n block-size: 22px;\n inline-size: 38px;\n --ddga-switch-thumb-travel: 16px;\n }\n .ddga-switch--sm {\n block-size: 18px;\n inline-size: 30px;\n --ddga-switch-thumb-travel: 12px;\n }\n\n /* ─── Checked fill ─── */\n\n .ddga-switch[data-state='checked'] {\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n .ddga-switch:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-switch--error {\n background-color: var(--ddga-color-background);\n border-color: var(--ddga-color-error);\n }\n .ddga-switch--error[data-state='checked'] {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-switch--error:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-switch:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Thumb (Radix Thumb , the moving circle) ─── */\n\n .ddga-switch__thumb {\n display: block;\n block-size: calc(100% - 4px);\n aspect-ratio: 1;\n margin-inline-start: 2px;\n border-radius: 999px;\n background-color: var(--ddga-color-background);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n transition: translate 150ms ease;\n translate: 0 0;\n will-change: translate;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: var(--ddga-switch-thumb-travel) 0;\n }\n /* RTL: the thumb's resting position is on the right (logical start\n flips), so checked travels in the negative direction. The ancestor\n `[dir=\"rtl\"]` is set on DgaProvider; using attribute selector instead\n of `:dir()` for broader browser support (the theming pass set the\n Safari floor at 16.2; `:dir()` lands in 16.4). */\n [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: calc(var(--ddga-switch-thumb-travel) * -1) 0;\n }\n\n /* Dark mode: the default thumb color (--ddga-color-background, near-white\n in light mode) flips to a very dark gray-900 , darker than the off-state\n track (--ddga-color-input = gray-700) , and the thumb disappears.\n Override locally with a near-white so the puck reads as a raised\n surface in both modes. Kept in this file (not dark.css) because dark.css\n is reserved for semantic token remapping; this is a per-component fix. */\n [data-theme='dark'] .ddga-switch__thumb {\n background-color: #f3f4f6;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n }\n\n /* ─── Label ─── */\n\n .ddga-switch__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n .ddga-switch__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-switch,\n .ddga-switch__thumb {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-switch {\n border: 1px solid CanvasText;\n background-color: Canvas;\n }\n .ddga-switch[data-state='checked'] {\n background-color: Highlight;\n }\n .ddga-switch__thumb {\n background-color: CanvasText;\n box-shadow: none;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n background-color: HighlightText;\n }\n .ddga-switch:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-switch:disabled {\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Slider-specific styles live here. Radix Slider\n handles RTL positioning natively via the inherited `dir` (DgaProvider\n wraps Direction.Provider), so no manual flipping is needed here. */\n\n /* ─── Header (label + value readout) ─── */\n\n .ddga-slider__header {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n }\n\n .ddga-slider__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-slider__value {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n font-variant-numeric: tabular-nums;\n }\n\n /* ─── Root ─── */\n\n .ddga-slider {\n position: relative;\n display: flex;\n align-items: center;\n inline-size: 100%;\n touch-action: none;\n user-select: none;\n }\n\n /* Per-size rail thickness + thumb diameter, encoded as custom properties so\n the track/thumb rules below stay size-agnostic. */\n .ddga-slider--md {\n --ddga-slider-rail: 6px;\n --ddga-slider-thumb: 18px;\n block-size: var(--ddga-slider-thumb);\n }\n .ddga-slider--sm {\n --ddga-slider-rail: 4px;\n --ddga-slider-thumb: 14px;\n block-size: var(--ddga-slider-thumb);\n }\n\n /* ─── Track + filled range ─── */\n\n .ddga-slider__track {\n position: relative;\n flex-grow: 1;\n block-size: var(--ddga-slider-rail);\n border-radius: 999px;\n background-color: var(--ddga-color-input);\n }\n\n .ddga-slider__range {\n position: absolute;\n block-size: 100%;\n border-radius: 999px;\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Thumb ─── */\n\n .ddga-slider__thumb {\n display: block;\n inline-size: var(--ddga-slider-thumb);\n block-size: var(--ddga-slider-thumb);\n border: 2px solid var(--ddga-color-primary);\n border-radius: 999px;\n background-color: var(--ddga-color-background);\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n cursor: grab;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-slider__thumb:active {\n cursor: grabbing;\n }\n\n .ddga-slider__thumb:focus-visible {\n outline: none;\n box-shadow: 0 0 0 3px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-slider--error .ddga-slider__thumb {\n border-color: var(--ddga-color-error);\n }\n .ddga-slider--error .ddga-slider__range {\n background-color: var(--ddga-color-error);\n }\n .ddga-slider--error .ddga-slider__thumb:focus-visible {\n box-shadow: 0 0 0 3px var(--ddga-color-error);\n }\n\n /* ─── Disabled (Radix sets data-disabled on the Root) ─── */\n\n .ddga-slider[data-disabled] {\n opacity: 0.5;\n }\n .ddga-slider[data-disabled] .ddga-slider__thumb {\n cursor: not-allowed;\n }\n\n /* ─── Dark mode: keep the thumb a raised light surface ─── */\n\n [data-theme='dark'] .ddga-slider__thumb {\n background-color: #f3f4f6;\n box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-slider__thumb {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-slider__track {\n background-color: Canvas;\n border: 1px solid CanvasText;\n }\n .ddga-slider__range {\n background-color: Highlight;\n }\n .ddga-slider__thumb {\n background-color: ButtonFace;\n border-color: CanvasText;\n }\n .ddga-slider__thumb:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Linear (Radix Progress) ─── */\n\n .ddga-progress {\n position: relative;\n overflow: hidden;\n inline-size: 100%;\n background-color: var(--ddga-gray-200);\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-progress--sm {\n block-size: 4px;\n }\n .ddga-progress--md {\n block-size: 8px;\n }\n .ddga-progress--lg {\n block-size: 12px;\n }\n\n .ddga-progress--primary {\n --ddga-progress-color: var(--ddga-color-primary);\n }\n .ddga-progress--success {\n --ddga-progress-color: var(--ddga-color-success);\n }\n .ddga-progress--warning {\n --ddga-progress-color: var(--ddga-color-warning);\n }\n .ddga-progress--destructive {\n --ddga-progress-color: var(--ddga-color-destructive);\n }\n\n .ddga-progress__indicator {\n block-size: 100%;\n inline-size: 100%;\n background-color: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: transform 200ms ease-out;\n border-radius: inherit;\n }\n\n /* Indeterminate: slide a 40%-wide pill across the track. The track has\n overflow:hidden so the off-track portions get clipped. */\n .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n inline-size: 40%;\n transform: translateX(-100%);\n animation: ddga-progress-slide 1.4s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;\n transition: none;\n }\n\n @keyframes ddga-progress-slide {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(350%);\n }\n }\n\n /* RTL: reverse the slide so motion still tracks reading direction. */\n [dir='rtl'] .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n animation-name: ddga-progress-slide-rtl;\n }\n\n @keyframes ddga-progress-slide-rtl {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(-350%);\n }\n }\n\n /* ─── Circular (custom SVG) ─── */\n\n .ddga-circular-progress {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n }\n\n .ddga-circular-progress--primary {\n --ddga-progress-color: var(--ddga-color-primary);\n }\n .ddga-circular-progress--success {\n --ddga-progress-color: var(--ddga-color-success);\n }\n .ddga-circular-progress--warning {\n --ddga-progress-color: var(--ddga-color-warning);\n }\n .ddga-circular-progress--destructive {\n --ddga-progress-color: var(--ddga-color-destructive);\n }\n\n .ddga-circular-progress__svg {\n display: block;\n }\n\n .ddga-circular-progress__track {\n stroke: var(--ddga-gray-200);\n }\n\n .ddga-circular-progress__indicator {\n stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: stroke-dashoffset 200ms ease-out;\n }\n\n .ddga-circular-progress[data-state='indeterminate'] .ddga-circular-progress__svg {\n animation: ddga-circular-progress-spin 1.4s linear infinite;\n transition: none;\n }\n\n @keyframes ddga-circular-progress-spin {\n 100% {\n transform: rotate(360deg);\n }\n }\n\n .ddga-circular-progress__label {\n position: absolute;\n inset: 0;\n display: flex;\n align-items: center;\n justify-content: center;\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-secondary);\n line-height: 1;\n }\n\n .ddga-circular-progress--sm .ddga-circular-progress__label {\n font-size: 0.625rem;\n }\n .ddga-circular-progress--lg .ddga-circular-progress__label {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* Reduced motion: drop indeterminate animations, keep static state visible. */\n @media (prefers-reduced-motion: reduce) {\n .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator,\n .ddga-circular-progress[data-state='indeterminate'] .ddga-circular-progress__svg {\n animation: none;\n }\n .ddga-progress__indicator,\n .ddga-circular-progress__indicator {\n transition: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Content ─── */\n\n .ddga-tooltip {\n /* Solid dark surface against light bgs; readable in both themes via\n semantic foreground/background swap in dark.css. */\n background-color: var(--ddga-text-primary);\n color: var(--ddga-color-background);\n border-radius: var(--ddga-radius-sm);\n box-shadow: var(--ddga-shadow-md);\n font-family: inherit;\n line-height: 1.4;\n /* Keep the tooltip from getting absurdly wide for long content. */\n max-inline-size: 260px;\n /* Ensure word-wrap works for long words / URLs. */\n overflow-wrap: anywhere;\n /* Above modals are higher; this sits above page content. */\n z-index: 50;\n /* Radix sets animation data attrs on state changes — use them for a\n light fade so the tooltip doesn't pop in jarringly. */\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-tooltip--sm {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-tooltip--md {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Arrow ─── */\n\n .ddga-tooltip__arrow {\n fill: var(--ddga-text-primary);\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-tooltip[data-state='delayed-open'],\n .ddga-tooltip[data-state='instant-open'] {\n animation-name: ddga-tooltip-in;\n }\n .ddga-tooltip[data-state='closed'] {\n animation-name: ddga-tooltip-out;\n }\n\n @keyframes ddga-tooltip-in {\n from {\n opacity: 0;\n transform: translateY(2px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-tooltip-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tooltip {\n animation-duration: 0ms;\n }\n }\n\n /* Dark mode: --ddga-text-primary remaps to a light tone and\n --ddga-color-background goes dark, so the tooltip becomes a light pill\n on a dark surface — still high contrast, just inverted. No override\n needed. */\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-tooltip {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Shared field primitives , wrapper + helper/error message. Used by\n Input / Textarea / Checkbox. Component-specific bits (the label and\n the control itself) stay in each component's CSS. */\n\n .ddga-field {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-field__message {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n .ddga-field__message--error {\n color: var(--ddga-color-error);\n }\n}\n",":root {\n --ddga-color-primary: #25935F;\n --ddga-color-primary-hover: #1B8354;\n --ddga-color-primary-active: #166A45;\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-secondary: #F3F4F6;\n --ddga-color-secondary-hover: #E5E7EB;\n --ddga-color-secondary-foreground: #0D121C;\n --ddga-color-background: #FFFFFF;\n --ddga-color-foreground: #0D121C;\n --ddga-color-muted: #F3F4F6;\n --ddga-color-muted-foreground: #6C737F;\n --ddga-color-border: #E5E7EB;\n --ddga-color-input: #D2D6DB;\n --ddga-color-card: #FFFFFF;\n --ddga-color-card-foreground: #0D121C;\n --ddga-color-destructive: #D92D20;\n --ddga-color-destructive-hover: #B42318;\n --ddga-color-destructive-foreground: #FFFFFF;\n --ddga-color-error: #D92D20;\n --ddga-color-error-hover: #B42318;\n --ddga-color-error-foreground: #FFFFFF;\n --ddga-color-success: #079455;\n --ddga-color-success-hover: #067647;\n --ddga-color-success-foreground: #FFFFFF;\n --ddga-color-warning: #DC6803;\n --ddga-color-warning-hover: #B54708;\n --ddga-color-warning-foreground: #FFFFFF;\n --ddga-color-info: #1570EF;\n --ddga-color-info-hover: #175CD3;\n --ddga-color-info-foreground: #FFFFFF;\n --ddga-color-ring: #25935F;\n --ddga-text-primary: #0D121C;\n --ddga-text-secondary: #4D5761;\n --ddga-text-tertiary: #6C737F;\n --ddga-text-placeholder: #9DA4AE;\n --ddga-sa-25: #F7FDF9;\n --ddga-sa-50: #F3FCF6;\n --ddga-sa-100: #DFF6E7;\n --ddga-sa-200: #B8EACB;\n --ddga-sa-300: #88D8AD;\n --ddga-sa-400: #54C08A;\n --ddga-sa-500: #25935F;\n --ddga-sa-600: #1B8354;\n --ddga-sa-700: #166A45;\n --ddga-sa-800: #14573A;\n --ddga-sa-900: #104631;\n --ddga-sa-950: #092A1E;\n --ddga-gray-25: #FCFCFD;\n --ddga-gray-50: #F9FAFB;\n --ddga-gray-100: #F3F4F6;\n --ddga-gray-200: #E5E7EB;\n --ddga-gray-300: #D2D6DB;\n --ddga-gray-400: #9DA4AE;\n --ddga-gray-500: #6C737F;\n --ddga-gray-600: #4D5761;\n --ddga-gray-700: #384250;\n --ddga-gray-800: #1F2A37;\n --ddga-gray-900: #111927;\n --ddga-gray-950: #0D121C;\n --ddga-error-25: #FFFBFA;\n --ddga-error-50: #FEF3F2;\n --ddga-error-100: #FEE4E2;\n --ddga-error-200: #FECDCA;\n --ddga-error-300: #FDA29B;\n --ddga-error-400: #F97066;\n --ddga-error-500: #F04438;\n --ddga-error-600: #D92D20;\n --ddga-error-700: #B42318;\n --ddga-error-800: #912018;\n --ddga-error-900: #7A271A;\n --ddga-error-950: #55160C;\n --ddga-warning-25: #FFFCF5;\n --ddga-warning-50: #FFFAEB;\n --ddga-warning-100: #FEF0C7;\n --ddga-warning-200: #FEDF89;\n --ddga-warning-300: #FEC84B;\n --ddga-warning-400: #FDB022;\n --ddga-warning-500: #F79009;\n --ddga-warning-600: #DC6803;\n --ddga-warning-700: #B54708;\n --ddga-warning-800: #93370D;\n --ddga-warning-900: #7A2E0E;\n --ddga-warning-950: #4E1D09;\n --ddga-success-25: #F6FEF9;\n --ddga-success-50: #ECFDF3;\n --ddga-success-100: #DCFAE6;\n --ddga-success-200: #ABEFC6;\n --ddga-success-300: #75E0A7;\n --ddga-success-400: #47CD89;\n --ddga-success-500: #17B26A;\n --ddga-success-600: #079455;\n --ddga-success-700: #067647;\n --ddga-success-800: #085D3A;\n --ddga-success-900: #074D31;\n --ddga-success-950: #053321;\n --ddga-info-25: #F5FAFF;\n --ddga-info-50: #EFF8FF;\n --ddga-info-100: #D1E9FF;\n --ddga-info-200: #B2DDFF;\n --ddga-info-300: #84CAFF;\n --ddga-info-400: #53B1FD;\n --ddga-info-500: #2E90FA;\n --ddga-info-600: #1570EF;\n --ddga-info-700: #175CD3;\n --ddga-info-800: #1849A9;\n --ddga-info-900: #194185;\n --ddga-info-950: #102A56;\n --ddga-gold-25: #FFFEF7;\n --ddga-gold-50: #FFFEF2;\n --ddga-gold-100: #FFFCE6;\n --ddga-gold-200: #FCF3BD;\n --ddga-gold-300: #FAE996;\n --ddga-gold-400: #F7D54D;\n --ddga-gold-500: #F5BD02;\n --ddga-gold-600: #DBA102;\n --ddga-gold-700: #B87B02;\n --ddga-gold-800: #945C01;\n --ddga-gold-900: #6E3C00;\n --ddga-gold-950: #472400;\n --ddga-lavender-25: #FEFCFF;\n --ddga-lavender-50: #F9F5FA;\n --ddga-lavender-100: #F2E9F5;\n --ddga-lavender-200: #E1CCE8;\n --ddga-lavender-300: #CCADD9;\n --ddga-lavender-400: #A57BBA;\n --ddga-lavender-500: #80519F;\n --ddga-lavender-600: #6D428F;\n --ddga-lavender-700: #532D75;\n --ddga-lavender-800: #3D1D5E;\n --ddga-lavender-900: #281047;\n --ddga-lavender-950: #16072E;\n --ddga-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;\n --ddga-font-en: 'IBM Plex Sans Arabic', 'Inter', sans-serif;\n --ddga-font-mono: 'IBM Plex Mono', monospace;\n --ddga-font-weight-regular: 400;\n --ddga-font-weight-medium: 500;\n --ddga-font-weight-semibold: 600;\n --ddga-font-weight-bold: 700;\n --ddga-font-size-xs: 0.75rem;\n --ddga-font-size-sm: 0.875rem;\n --ddga-font-size-base: 1rem;\n --ddga-font-size-lg: 1.125rem;\n --ddga-font-size-xl: 1.25rem;\n --ddga-font-size-2xl: 1.5rem;\n --ddga-font-size-3xl: 2rem;\n --ddga-space-0: 0;\n --ddga-space-1: 0.25rem;\n --ddga-space-2: 0.5rem;\n --ddga-space-3: 0.75rem;\n --ddga-space-4: 1rem;\n --ddga-space-5: 1.25rem;\n --ddga-space-6: 1.5rem;\n --ddga-space-8: 2rem;\n --ddga-space-10: 2.5rem;\n --ddga-space-12: 3rem;\n --ddga-space-16: 4rem;\n --ddga-radius-none: 0;\n --ddga-radius-sm: 0.25rem;\n --ddga-radius-md: 0.5rem;\n --ddga-radius-lg: 0.75rem;\n --ddga-radius-xl: 1rem;\n --ddga-radius-full: 9999px;\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n --ddga-shadow-none: none;\n}\n","/* Dark mode , DGA-aligned using neutral gray scale. */\n[data-theme='dark'] {\n color-scheme: dark;\n\n /* ─── Surface / Layout (Gray 900-based) ─── */\n --ddga-color-background: #111927;\n --ddga-color-foreground: #f3f4f6;\n --ddga-color-muted: #1f2a37;\n --ddga-color-muted-foreground: #9da4ae;\n --ddga-color-border: #384250;\n --ddga-color-card: #1f2a37;\n --ddga-color-card-foreground: #f3f4f6;\n --ddga-color-input: #384250;\n\n /* ─── Primary (SA Green , slightly lighter for dark bg) ─── */\n --ddga-color-primary: #54c08a;\n --ddga-color-primary-hover: #88d8ad;\n --ddga-color-primary-active: #25935f;\n --ddga-color-primary-foreground: #0d121c;\n\n /* ─── Secondary ─── */\n --ddga-color-secondary: #1f2a37;\n --ddga-color-secondary-hover: #384250;\n --ddga-color-secondary-foreground: #f3f4f6;\n\n /* ─── Destructive ─── */\n --ddga-color-destructive: #f97066;\n --ddga-color-destructive-hover: #f04438;\n --ddga-color-destructive-foreground: #0d121c;\n\n /* ─── Semantic , lighter shades for dark bg legibility ─── */\n --ddga-color-error: #f97066;\n --ddga-color-error-hover: #f04438;\n --ddga-color-error-foreground: #0d121c;\n --ddga-color-success: #47cd89;\n --ddga-color-success-hover: #17b26a;\n --ddga-color-success-foreground: #0d121c;\n --ddga-color-warning: #fdb022;\n --ddga-color-warning-hover: #f79009;\n --ddga-color-warning-foreground: #0d121c;\n --ddga-color-info: #53b1fd;\n --ddga-color-info-hover: #2e90fa;\n --ddga-color-info-foreground: #0d121c;\n\n /* ─── Focus ring ─── */\n --ddga-color-ring: #54c08a;\n\n /* ─── Text ─── */\n --ddga-text-primary: #ffffff;\n --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n --ddga-text-placeholder: #6c737f;\n\n /* ─── Shadows , stronger for dark backgrounds ─── */\n --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n","@layer ddga-components {\n /* Size lives on the root (.ddga-pagination--{sm,md}); all per-part visuals\n cascade through descendant selectors. Direction-encoded chevron icons\n flip in RTL via `[dir='rtl']`, with the previous icon double-flipped so\n it points \"back\" in either direction. */\n\n /* ─── Root (nav) ─── */\n\n .ddga-pagination {\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.4;\n }\n\n /* ─── Content (ul) ─── */\n\n .ddga-pagination__content {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-1);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n /* ─── Item (li) ─── */\n\n .ddga-pagination__item {\n display: inline-flex;\n }\n\n /* ─── Link (a) ─── */\n\n .ddga-pagination__link {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n font-family: inherit;\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease,\n border-color 150ms ease;\n }\n\n .ddga-pagination__link:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n\n .ddga-pagination__link:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Active link (current page) ─── */\n\n .ddga-pagination__link--active {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n border-color: var(--ddga-color-primary);\n }\n\n .ddga-pagination__link--active:hover {\n background-color: var(--ddga-color-primary-hover);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* ─── Prev / Next ─── */\n\n .ddga-pagination__nav {\n gap: var(--ddga-space-1);\n padding-inline: var(--ddga-space-3);\n }\n\n .ddga-pagination__nav-icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* Direction logic: chevron points \"forward\" (inline-end). The Previous\n icon is flipped 180° in LTR so it points back; in RTL the flip is\n un-done (RTL \"back\" = visual right = unflipped chevron). The Next icon\n is flipped only in RTL because RTL \"forward\" = visual left. */\n .ddga-pagination__nav-icon--previous {\n transform: scaleX(-1);\n }\n [dir='rtl'] .ddga-pagination__nav-icon--previous {\n transform: scaleX(1);\n }\n [dir='rtl'] .ddga-pagination__nav-icon--next {\n transform: scaleX(-1);\n }\n\n /* ─── Ellipsis ─── */\n\n .ddga-pagination__ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 2rem;\n block-size: 2rem;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-pagination__ellipsis > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-pagination--sm .ddga-pagination__link,\n .ddga-pagination--sm .ddga-pagination__ellipsis {\n min-inline-size: 1.75rem;\n block-size: 1.75rem;\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-pagination--md .ddga-pagination__link,\n .ddga-pagination--md .ddga-pagination__ellipsis {\n min-inline-size: 2rem;\n block-size: 2rem;\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-pagination__link {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-pagination__link {\n color: LinkText;\n border: 1px solid CanvasText;\n }\n .ddga-pagination__link--active {\n color: HighlightText;\n background-color: Highlight;\n border-color: Highlight;\n }\n .ddga-pagination__link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-full);\n font-weight: var(--ddga-font-weight-medium);\n font-family: inherit;\n line-height: 1.4;\n white-space: nowrap;\n user-select: none;\n }\n\n /* ─── Sizes ─── */\n\n .ddga-badge--sm {\n height: 20px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-badge--md {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Solid variants ─── */\n\n .ddga-badge--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n\n .ddga-badge--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n .ddga-badge--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n\n .ddga-badge--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n\n .ddga-badge--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n\n .ddga-badge--warning {\n background-color: var(--ddga-color-warning);\n color: var(--ddga-color-warning-foreground);\n }\n\n .ddga-badge--info {\n background-color: var(--ddga-color-info);\n color: var(--ddga-color-info-foreground);\n }\n\n /* ─── Subtle (tonal) variants ─── */\n\n .ddga-badge--primary-subtle {\n background-color: var(--ddga-sa-100);\n color: var(--ddga-sa-800);\n }\n\n .ddga-badge--secondary-subtle {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n\n .ddga-badge--destructive-subtle {\n background-color: var(--ddga-error-100);\n color: var(--ddga-error-700);\n }\n\n .ddga-badge--success-subtle {\n background-color: var(--ddga-success-100);\n color: var(--ddga-success-700);\n }\n\n .ddga-badge--warning-subtle {\n background-color: var(--ddga-warning-100);\n color: var(--ddga-warning-700);\n }\n\n .ddga-badge--info-subtle {\n background-color: var(--ddga-info-100);\n color: var(--ddga-info-700);\n }\n\n /* ─── Outline ─── */\n\n .ddga-badge--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n\n /* ─── Dot ─── */\n\n .ddga-badge__dot {\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n flex-shrink: 0;\n }\n\n /* ─── Icons inside badge ─── */\n\n .ddga-badge__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .ddga-badge__icon > svg,\n .ddga-badge > svg {\n width: 0.875em;\n height: 0.875em;\n display: block;\n }\n\n .ddga-badge svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n /* ─── Close button (dismissible) ─── */\n\n .ddga-badge__close {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5em;\n block-size: 1.5em;\n margin-inline-start: 0.125em;\n margin-inline-end: -0.25em;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n color: inherit;\n cursor: pointer;\n font: inherit;\n -webkit-appearance: none;\n appearance: none;\n }\n\n .ddga-badge__close > svg {\n inline-size: 0.75em;\n block-size: 0.75em;\n }\n\n .ddga-badge__close:hover {\n background-color: color-mix(in srgb, currentColor 18%, transparent);\n }\n\n .ddga-badge__close:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-badge {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Select-specific styles live here. */\n\n /* ─── Label (above the trigger, matches Input) ─── */\n\n .ddga-select__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-select__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n .ddga-select-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-select-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-select-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Trigger states ─── */\n\n .ddga-select-trigger:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n .ddga-select-trigger[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-select-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Error ─── */\n\n .ddga-select-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-select-trigger--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Chevron (Radix Icon) ─── */\n\n .ddga-select__icon {\n flex-shrink: 0;\n color: var(--ddga-text-tertiary);\n transition: rotate 150ms ease;\n }\n .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n rotate: 180deg;\n }\n\n /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n .ddga-select-content {\n /* Match trigger width so the panel doesn't visually float wider/narrower\n than the field. `--radix-select-trigger-width` is exposed by Radix\n when `position=\"popper\"`. */\n min-inline-size: var(--radix-select-trigger-width);\n /* Cap height to viewport so long lists scroll instead of overflowing. */\n max-block-size: var(--radix-select-content-available-height);\n z-index: 50;\n overflow: hidden;\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n color: var(--ddga-text-primary);\n }\n\n .ddga-select-viewport {\n padding: var(--ddga-space-1);\n }\n\n /* ─── Item ─── */\n\n .ddga-select-item {\n position: relative;\n display: flex;\n align-items: center;\n block-size: 32px;\n padding-block: var(--ddga-space-2);\n padding-inline-start: var(--ddga-space-3);\n /* Reserve room for the trailing checkmark indicator so item text never\n collides with it when the row is selected. */\n padding-inline-end: var(--ddga-space-7);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n color: var(--ddga-text-primary);\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n\n /* Radix sets `data-highlighted` on the keyboard- or pointer-focused item. */\n .ddga-select-item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-select-item[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n pointer-events: none;\n }\n\n /* ─── Item indicator (checkmark on the selected item) ─── */\n\n .ddga-select-item__indicator {\n position: absolute;\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n color: var(--ddga-color-primary);\n }\n .ddga-select-item__check {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-select-trigger,\n .ddga-select__icon {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-select-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-select-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-select-trigger:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n .ddga-select-content {\n border: 1px solid CanvasText;\n }\n .ddga-select-item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-select-item__indicator {\n color: HighlightText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only NumberInput-specific styles live here. Structure\n mirrors Input: a bordered control box owns border/focus/size/state; the\n − button, the field, and the + button sit inside it. */\n\n /* ─── Label ─── */\n\n .ddga-number-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-number-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered box) ─── */\n\n .ddga-number-input {\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n overflow: hidden;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-number-input--sm {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-number-input--md {\n block-size: 36px;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-number-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Field (the actual <input>) ─── */\n\n .ddga-number-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: center;\n outline: none;\n /* Keep digits Latin + LTR even inside an RTL form (DGA convention). */\n direction: ltr;\n unicode-bidi: plaintext;\n }\n\n .ddga-number-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── Stepper buttons (− / +) ─── */\n\n .ddga-number-input__step {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2.25rem;\n padding: 0;\n border: 0;\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n font-size: 1rem;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n opacity 150ms ease;\n }\n\n /* Logical dividers between the buttons and the field (RTL-safe). */\n .ddga-number-input__step--decrement {\n border-inline-end: 1px solid var(--ddga-color-input);\n }\n .ddga-number-input__step--increment {\n border-inline-start: 1px solid var(--ddga-color-input);\n }\n\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-secondary-hover);\n }\n\n .ddga-number-input__step:disabled {\n opacity: 0.45;\n cursor: not-allowed;\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-number-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-number-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-number-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n background-color: var(--ddga-color-muted);\n opacity: 0.6;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-number-input,\n .ddga-number-input__step {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-number-input {\n border: 1px solid CanvasText;\n }\n .ddga-number-input__step {\n background-color: ButtonFace;\n color: ButtonText;\n }\n .ddga-number-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Panel (Content / SubContent) ─── */\n\n .ddga-dropdown-menu {\n min-inline-size: 192px;\n max-inline-size: 320px;\n padding: var(--ddga-space-1);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n surfaces feel instantaneous (this isn't a Modal). */\n .ddga-dropdown-menu[data-state='open'] {\n animation: ddga-dropdown-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-dropdown-menu[data-state='closed'] {\n animation: ddga-dropdown-menu-out 80ms ease-in;\n }\n\n @keyframes ddga-dropdown-menu-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-dropdown-menu-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Sizes ─── */\n\n .ddga-dropdown-menu--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-dropdown-menu--md {\n font-size: var(--ddga-font-size-md);\n }\n\n /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n .ddga-dropdown-menu__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* Radix sets data-highlighted on the actively focused/hovered item — that's\n our only \"focus ring\" since the menu manages focus internally. */\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-dropdown-menu__item[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* Destructive: red text and a red-tinted hover. Tracks the destructive\n family the rest of the system uses. */\n .ddga-dropdown-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* Inline pieces inside the row. */\n .ddga-dropdown-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .ddga-dropdown-menu__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n flex-shrink: 0;\n color: var(--ddga-text-secondary);\n }\n .ddga-dropdown-menu__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-dropdown-menu__shortcut {\n margin-inline-start: auto;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-tertiary);\n letter-spacing: 0.04em;\n }\n\n /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n .ddga-dropdown-menu__item--checkable {\n /* Reserve the indicator column even when unchecked so labels align. */\n padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n position: relative;\n }\n\n .ddga-dropdown-menu__indicator {\n position: absolute;\n inset-inline-start: var(--ddga-space-2);\n inset-block-start: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-color-primary);\n }\n .ddga-dropdown-menu__indicator-icon {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-dropdown-menu__radio-dot {\n /* span is inline by default → inline-size/block-size are ignored. Force a\n sized inline-block so the filled circle actually renders. */\n display: inline-block;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-dropdown-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-dropdown-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n }\n\n /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n [dir='rtl'] .ddga-dropdown-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Label + Separator ─── */\n\n .ddga-dropdown-menu__group-label {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n .ddga-dropdown-menu__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) * -1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-dropdown-menu {\n border: 1px solid CanvasText;\n }\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-menu__separator {\n background-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-menu[data-state='open'],\n .ddga-dropdown-menu[data-state='closed'] {\n animation: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-alert {\n /* Each variant overrides --accent (icon + border) and --bg / --fg below.\n Centralizing this in vars makes per-instance recoloring trivial. */\n --ddga-alert-accent: var(--ddga-color-info);\n --ddga-alert-bg: var(--ddga-info-100);\n --ddga-alert-fg: var(--ddga-info-700);\n\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-alert-bg);\n color: var(--ddga-alert-fg);\n font-family: inherit;\n line-height: 1.5;\n }\n\n /* ─── Variants (tonal, matching Badge subtle family) ─── */\n\n .ddga-alert--info {\n --ddga-alert-accent: var(--ddga-color-info);\n --ddga-alert-bg: var(--ddga-info-100);\n --ddga-alert-fg: var(--ddga-info-700);\n }\n\n .ddga-alert--success {\n --ddga-alert-accent: var(--ddga-color-success);\n --ddga-alert-bg: var(--ddga-success-100);\n --ddga-alert-fg: var(--ddga-success-700);\n }\n\n .ddga-alert--warning {\n --ddga-alert-accent: var(--ddga-color-warning);\n --ddga-alert-bg: var(--ddga-warning-100);\n --ddga-alert-fg: var(--ddga-warning-700);\n }\n\n .ddga-alert--destructive {\n --ddga-alert-accent: var(--ddga-color-destructive);\n --ddga-alert-bg: var(--ddga-error-100);\n --ddga-alert-fg: var(--ddga-error-700);\n }\n\n /* ─── Icon ─── */\n\n .ddga-alert__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.25em;\n block-size: 1.25em;\n color: var(--ddga-alert-accent);\n /* Nudge the icon to optical-center with the title. */\n margin-block-start: 0.125em;\n }\n\n .ddga-alert__icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Body (title + description container) ─── */\n\n .ddga-alert__body {\n flex: 1;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-alert__title {\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: inherit;\n }\n\n .ddga-alert__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: inherit;\n /* Slight dimming for hierarchy under the title; works for both light + dark. */\n opacity: 0.9;\n }\n\n /* ─── Close button ─── */\n\n .ddga-alert__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n opacity: 0.7;\n transition:\n opacity 150ms ease,\n background-color 150ms ease;\n /* Optical-center with the title. */\n margin-block-start: 0.125em;\n }\n .ddga-alert__close > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n .ddga-alert__close:hover {\n opacity: 1;\n background-color: rgb(0 0 0 / 0.06);\n }\n .ddga-alert__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-alert-accent);\n opacity: 1;\n }\n\n /* ─── Dark mode adjustments ─── */\n /* The -100 tonal pairs are quite light against a dark page bg — bump the\n destructive/warning shades and recolor the foreground for legibility. */\n\n [data-theme='dark'] .ddga-alert--info {\n --ddga-alert-bg: rgb(21 112 239 / 0.16);\n --ddga-alert-fg: var(--ddga-info-200, #b2ddff);\n }\n [data-theme='dark'] .ddga-alert--success {\n --ddga-alert-bg: rgb(7 148 85 / 0.18);\n --ddga-alert-fg: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-alert--warning {\n --ddga-alert-bg: rgb(220 104 3 / 0.18);\n --ddga-alert-fg: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-alert--destructive {\n --ddga-alert-bg: rgb(217 45 32 / 0.18);\n --ddga-alert-fg: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-alert__close:hover {\n background-color: rgb(255 255 255 / 0.08);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-alert {\n border-color: CanvasText;\n }\n .ddga-alert__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n font-weight: var(--ddga-font-weight-medium);\n font-family: inherit;\n line-height: 1.6;\n cursor: pointer;\n text-decoration: none;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease,\n opacity 150ms ease;\n }\n\n /* ─── Variant: Primary ─── */\n\n .ddga-button--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-hover);\n }\n\n /* ─── Variant: Secondary ─── */\n\n .ddga-button--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n .ddga-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n\n /* ─── Variant: Outline ─── */\n\n .ddga-button--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n .ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Variant: Ghost ─── */\n\n .ddga-button--ghost {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n .ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Variant: Destructive (filled, primary destructive) ─── */\n\n .ddga-button--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n .ddga-button--destructive:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-destructive-hover);\n }\n\n /* ─── Variant: Destructive Outline (transparent + error border + error text) ─── */\n\n .ddga-button--destructive-outline {\n background-color: transparent;\n color: var(--ddga-color-destructive);\n border-color: var(--ddga-color-destructive);\n }\n .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-50);\n }\n\n /* ─── Variant: Destructive Subtle (light tonal bg + error text) ─── */\n\n .ddga-button--destructive-subtle {\n background-color: var(--ddga-error-50);\n color: var(--ddga-color-destructive);\n }\n .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-100);\n }\n\n /* ─── Variant: Destructive Ghost (transparent + error text, hover tints) ─── */\n\n .ddga-button--destructive-ghost {\n background-color: transparent;\n color: var(--ddga-color-destructive);\n }\n .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-50);\n }\n\n /* ─── Sizes ─── */\n\n .ddga-button--sm {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-button--md {\n height: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-button--lg {\n height: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-button--icon {\n height: 40px;\n width: 40px;\n padding: 0;\n font-size: var(--ddga-font-size-base);\n }\n /* Compact square icon button , fits inside form fields as an adornment\n (sm/md field interiors) without overflowing the field border. */\n .ddga-button--icon-sm {\n height: 28px;\n width: 28px;\n padding: 0;\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Full Width ─── */\n\n .ddga-button--full-width {\n inline-size: 100%;\n flex: 1 0 100%;\n }\n\n /* ─── Inverted (for use on colored / dark backgrounds) ─── */\n /*\n * Only inverts the non-filled families — `outline`, `ghost`, and\n * destructive's outline/ghost forms. Filled variants (`primary`,\n * `secondary`, `destructive`, `destructive-subtle`) already carry their\n * own background contrast and keep their normal palette. Hover uses a\n * low-opacity white overlay so it works against any background tint.\n */\n .ddga-button--inverted.ddga-button--outline,\n .ddga-button--inverted.ddga-button--ghost {\n color: #ffffff;\n background-color: transparent;\n }\n .ddga-button--inverted.ddga-button--outline {\n border-color: rgba(255, 255, 255, 0.4);\n }\n .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--inverted.ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: rgba(255, 255, 255, 0.12);\n }\n .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n border-color: rgba(255, 255, 255, 0.6);\n }\n .ddga-button--inverted.ddga-button--destructive-outline,\n .ddga-button--inverted.ddga-button--destructive-ghost {\n /* On colored bgs, keep destructive readable by using a light error\n tint rather than full white (which would lose the destructive cue). */\n color: var(--ddga-error-200);\n }\n .ddga-button--inverted.ddga-button--destructive-outline {\n border-color: var(--ddga-error-300);\n }\n .ddga-button--inverted.ddga-button--destructive-outline:hover:not(:disabled):not(\n [aria-disabled='true']\n ),\n .ddga-button--inverted.ddga-button--destructive-ghost:hover:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: rgba(255, 255, 255, 0.08);\n }\n\n /* ─── Loading ─── */\n\n .ddga-button--loading {\n position: relative;\n cursor: wait;\n }\n\n /* ─── Child elements ─── */\n\n .ddga-button__text {\n /* Truncate long text */\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-button__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n /* Block-level SVGs (see reset) must not be flex-stretched on the cross\n axis , that distorts a square icon into a tall one. Pin them square\n to their intrinsic size and keep them centered. */\n .ddga-button svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-button {\n transition: none;\n }\n }\n\n /* ─── States ─── */\n\n /* Match `:disabled` (native button) and `[aria-disabled='true']` (asChild\n mode rendered as <a> or similar where native `disabled` has no effect). */\n .ddga-button:disabled,\n .ddga-button[aria-disabled='true'] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n .ddga-button:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── RTL directional icon flip ─── */\n\n [dir='rtl'] .ddga-icon-flip {\n transform: scaleX(-1);\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-button {\n border: 1px solid ButtonText;\n }\n .ddga-button:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-button:disabled,\n .ddga-button[aria-disabled='true'] {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Input-specific styles live here. */\n\n /* ─── Label ─── */\n\n .ddga-input__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state) ─── */\n\n .ddga-input {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Button) ─── */\n\n .ddga-input--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-input--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input--lg {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Field (the actual <input> , transparent, borderless fill) ─── */\n\n .ddga-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n .ddga-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* Autofill: browsers paint their own background/text on autofilled\n fields, overriding the theme (most jarring in dark mode, and government\n forms autofill heavily). Repaint with tokens via the inset-shadow\n technique , `background-color` alone is ignored for autofill. */\n .ddga-input__field:-webkit-autofill,\n .ddga-input__field:-webkit-autofill:hover,\n .ddga-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-text-primary);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-text-primary);\n }\n\n /* ─── Adornments (leading/trailing icon or text) ─── */\n\n .ddga-input__adornment {\n display: inline-flex;\n align-items: center;\n align-self: center;\n flex-shrink: 0;\n /* Never taller than the field interior, so an interactive control\n (clear / password toggle) can't paint over the field border. */\n max-block-size: 100%;\n color: var(--ddga-text-tertiary);\n }\n\n /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n .ddga-input__adornment svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n /* An adornment hugs the field edge: collapse the padding on its side so\n an in-field button's hit area aligns with the field, not floating. */\n .ddga-input:has(.ddga-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-input:has(.ddga-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-input:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-input--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── States (driven by the inner field via :has()) ─── */\n\n .ddga-input:has(.ddga-input__field:disabled) {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-input:has(.ddga-input__field:disabled) .ddga-input__field {\n cursor: not-allowed;\n }\n\n .ddga-input:has(.ddga-input__field:read-only:not(:disabled)) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-input {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-input {\n border: 1px solid CanvasText;\n }\n .ddga-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-input:has(.ddga-input__field:disabled) {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Textarea-specific styles live here. */\n\n /* ─── Label ─── */\n\n .ddga-textarea__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-textarea__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Textarea (owns border/focus/state , no adornments) ─── */\n\n .ddga-textarea {\n display: block;\n inline-size: 100%;\n min-block-size: 4.5rem;\n padding-block: var(--ddga-space-2);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.6;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-textarea::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* Autofill (e.g. address fields): repaint with tokens , see input.css. */\n .ddga-textarea:-webkit-autofill,\n .ddga-textarea:-webkit-autofill:hover,\n .ddga-textarea:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-text-primary);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-text-primary);\n }\n\n /* ─── Sizes (font + inline padding; height is driven by `rows`) ─── */\n\n .ddga-textarea--sm {\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-textarea--md {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-textarea--lg {\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Resize (vertical only or locked; horizontal breaks layout) ─── */\n\n .ddga-textarea--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea--resize-none {\n resize: none;\n }\n\n /* ─── Focus ─── */\n\n .ddga-textarea:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-textarea--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-textarea--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── States ─── */\n\n .ddga-textarea:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n resize: none;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-textarea:read-only:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-textarea {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-visible {\n outline: 2px solid Highlight;\n }\n .ddga-textarea:disabled {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Checkbox-specific styles live here. */\n\n /* ─── Row (box + label, inline) ─── */\n\n .ddga-checkbox-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Box (Radix Root , reset the button, then style) ─── */\n\n .ddga-checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-primary-foreground);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-checkbox--md {\n block-size: 18px;\n inline-size: 18px;\n font-size: 14px;\n }\n .ddga-checkbox--sm {\n block-size: 16px;\n inline-size: 16px;\n font-size: 12px;\n }\n\n /* ─── Checked / indeterminate fill ─── */\n\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n\n /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n .ddga-checkbox:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-checkbox--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error[data-state='checked'],\n .ddga-checkbox--error[data-state='indeterminate'] {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-checkbox--error:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\n\n .ddga-checkbox:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Indicator + icons (one shows per Root data-state) ─── */\n\n .ddga-checkbox__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-checkbox__check,\n .ddga-checkbox__minus {\n inline-size: 1em;\n block-size: 1em;\n }\n .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n display: none;\n }\n .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n display: none;\n }\n\n /* ─── Label ─── */\n\n .ddga-checkbox__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n .ddga-checkbox__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-checkbox {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-checkbox {\n border: 1px solid CanvasText;\n }\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: CanvasText;\n }\n .ddga-checkbox__indicator {\n color: Canvas;\n }\n .ddga-checkbox:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-checkbox:disabled {\n border-color: GrayText;\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-card {\n /* Single hook drives all section padding. Variants below redefine it. */\n --ddga-card-padding: var(--ddga-space-5);\n display: flex;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border-radius: var(--ddga-radius-md);\n overflow: hidden;\n transition:\n box-shadow 150ms ease,\n transform 150ms ease,\n border-color 150ms ease;\n }\n\n /* ─── Orientation ─── */\n\n .ddga-card--vertical {\n flex-direction: column;\n }\n .ddga-card--horizontal {\n flex-direction: row;\n /* RTL: row reverses to keep the image at the start (logical) — handled\n implicitly by flexbox honoring the writing direction. */\n }\n\n /* ─── Variants ─── */\n\n .ddga-card--default {\n border: 1px solid var(--ddga-color-border);\n }\n\n .ddga-card--outline {\n background-color: transparent;\n border: 1px solid var(--ddga-color-border);\n }\n\n .ddga-card--elevated {\n border: 1px solid transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-card--filled {\n background-color: var(--ddga-color-muted);\n border: 1px solid transparent;\n }\n\n /* SA Green gradient hero — uses primary palette gradient from dga-preferences\n §5.4 (SA 600 → SA 500 @ 90°). Text + descriptions invert to white. */\n .ddga-card--gradient {\n background-image: linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));\n color: var(--ddga-color-primary-foreground);\n border: 1px solid transparent;\n }\n .ddga-card--gradient .ddga-card__title,\n .ddga-card--gradient .ddga-card__description {\n color: inherit;\n }\n .ddga-card--gradient .ddga-card__description {\n /* Softer than the title against the gradient. */\n opacity: 0.85;\n }\n .ddga-card--gradient .ddga-card__footer {\n border-block-start-color: rgb(255 255 255 / 0.15);\n }\n\n /* Bare card — no bg, no border, no shadow. For grouped lists where the\n parent provides separation, or when stacking content blocks without\n visual chrome. */\n .ddga-card--ghost {\n background-color: transparent;\n border: 1px solid transparent;\n }\n .ddga-card--ghost .ddga-card__footer {\n border-block-start-color: transparent;\n }\n\n /* ─── Padding scale ─── */\n\n .ddga-card--padding-sm {\n --ddga-card-padding: var(--ddga-space-3);\n }\n .ddga-card--padding-md {\n --ddga-card-padding: var(--ddga-space-5);\n }\n .ddga-card--padding-lg {\n --ddga-card-padding: var(--ddga-space-6);\n }\n\n /* ─── Interactive (hover lift + focus ring; pairs with asChild for clickable cards) ─── */\n\n .ddga-card--interactive {\n cursor: pointer;\n /* No transform on touch — avoids the sticky-hover look on mobile. */\n }\n .ddga-card--interactive:hover {\n border-color: var(--ddga-color-input);\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-card--interactive.ddga-card--elevated:hover,\n .ddga-card--interactive.ddga-card--gradient:hover {\n box-shadow: var(--ddga-shadow-lg);\n }\n .ddga-card--interactive:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Image ─── */\n\n .ddga-card__image {\n display: block;\n inline-size: 100%;\n block-size: auto;\n object-fit: cover;\n aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n }\n\n /* In horizontal cards, the image hugs the start edge and stretches the full\n card height. Cap its width so the content side still has room to breathe. */\n .ddga-card--horizontal > .ddga-card__image {\n aspect-ratio: auto;\n inline-size: 40%;\n max-inline-size: 240px;\n block-size: auto;\n align-self: stretch;\n flex-shrink: 0;\n }\n\n /* The content side of a horizontal card needs to take the remaining width\n and keep its own column layout. */\n .ddga-card--horizontal > :not(.ddga-card__image) {\n flex: 1 1 auto;\n }\n .ddga-card--horizontal > .ddga-card__header + .ddga-card__content {\n padding-top: 0;\n }\n\n /* ─── Sections (all share --ddga-card-padding) ─── */\n\n .ddga-card__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-card-padding);\n }\n\n .ddga-card__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: var(--ddga-text-primary);\n }\n\n .ddga-card__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-card__content {\n padding: var(--ddga-card-padding);\n }\n\n /* Header immediately followed by content: collapse the redundant top padding\n so the two sections read as one continuous block. */\n .ddga-card__header + .ddga-card__content {\n padding-top: 0;\n }\n\n /* When an image leads the card, the section under it should NOT have a stray\n top border or extra padding — the image already provides a clean edge. */\n .ddga-card__image + .ddga-card__header,\n .ddga-card__image + .ddga-card__content {\n /* (use the default --ddga-card-padding) */\n }\n\n .ddga-card__footer {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-card-padding);\n border-top: 1px solid var(--ddga-color-border);\n }\n\n /* No top border when there's no preceding section to separate from. */\n .ddga-card__footer:first-child {\n border-top: 0;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-card {\n transition: none;\n }\n }\n\n /* ─── Dark mode adjustments ─── */\n\n [data-theme='dark'] .ddga-card--gradient {\n background-image: linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600));\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Rating-specific styles live here. Each star stacks\n an empty base star and a clipped filled overlay; the overlay width drives\n full / half / empty. Logical inset keeps the half-fill correct in RTL. */\n\n /* ─── Label ─── */\n\n .ddga-rating__label {\n display: block;\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n /* ─── Root ─── */\n\n .ddga-rating {\n /* Consumers can recolor the filled stars by overriding this var. */\n --ddga-rating-color: var(--ddga-gold-500);\n --ddga-rating-empty: var(--ddga-color-border);\n\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-rating-empty);\n inline-size: fit-content;\n }\n\n .ddga-rating--sm {\n font-size: 1rem;\n }\n .ddga-rating--md {\n font-size: 1.5rem;\n }\n .ddga-rating--lg {\n font-size: 2rem;\n }\n\n /* Focus ring on the slider root. */\n .ddga-rating[role='slider']:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-rating[data-disabled] {\n opacity: 0.5;\n }\n\n /* Error: tint the empty stars so an unrated required field reads as invalid. */\n .ddga-rating--error {\n --ddga-rating-empty: var(--ddga-color-error);\n }\n\n .ddga-rating[role='slider']:not([data-disabled]) {\n cursor: pointer;\n }\n\n /* ─── Star (base = empty, overlay = filled) ─── */\n\n .ddga-rating__star {\n position: relative;\n display: inline-flex;\n line-height: 0;\n }\n\n .ddga-rating__star-bg {\n display: block;\n color: var(--ddga-rating-empty);\n }\n\n /* Clipped overlay pinned to the logical start so it reveals the leading\n portion of the star (flips automatically in RTL via inset-inline-start). */\n .ddga-rating__star-fill {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 0;\n overflow: hidden;\n line-height: 0;\n color: var(--ddga-rating-color);\n }\n\n .ddga-rating__star[data-fill='half'] .ddga-rating__star-fill {\n inline-size: 50%;\n }\n .ddga-rating__star[data-fill='full'] .ddga-rating__star-fill {\n inline-size: 100%;\n }\n\n .ddga-rating__star-fg {\n display: block;\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-rating__star-bg {\n color: CanvasText;\n }\n .ddga-rating__star-fill {\n color: Highlight;\n }\n .ddga-rating[role='slider']:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Overlay ─── */\n\n .ddga-drawer__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Same z-stack as Modal (60 overlay / 61 panel). Toast sits at 70 so it\n can announce above either. */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-drawer__overlay[data-state='open'] {\n animation-name: ddga-drawer-overlay-in;\n }\n .ddga-drawer__overlay[data-state='closed'] {\n animation-name: ddga-drawer-overlay-out;\n }\n\n @keyframes ddga-drawer-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-drawer-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Panel base ─── */\n\n .ddga-drawer {\n position: fixed;\n z-index: 61;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n box-shadow: var(--ddga-shadow-lg);\n overflow: hidden;\n /* Animation duration applied to the panel; the per-side keyframes flip\n direction so the slide always emerges from the correct edge. */\n animation-duration: 220ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* ─── Side placements (logical — start/end flip in RTL) ─── */\n\n .ddga-drawer--start {\n inset-block: 0;\n inset-inline-start: 0;\n border-inline-end: 1px solid var(--ddga-color-border);\n border-inline-start: 0;\n }\n .ddga-drawer--end {\n inset-block: 0;\n inset-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n border-inline-end: 0;\n }\n .ddga-drawer--top {\n inset-inline: 0;\n inset-block-start: 0;\n border-block-end: 1px solid var(--ddga-color-border);\n border-block-start: 0;\n }\n .ddga-drawer--bottom {\n inset-inline: 0;\n inset-block-end: 0;\n border-block-start: 1px solid var(--ddga-color-border);\n border-block-end: 0;\n }\n\n /* ─── Sizes ─── */\n\n /* For start/end (vertical panel), `size` controls inline-size; for top/bottom\n (horizontal panel) it controls block-size. The cascade just stacks both\n declarations and the relevant axis wins per side. */\n .ddga-drawer--sm.ddga-drawer--start,\n .ddga-drawer--sm.ddga-drawer--end {\n inline-size: min(320px, 100vw);\n }\n .ddga-drawer--md.ddga-drawer--start,\n .ddga-drawer--md.ddga-drawer--end {\n inline-size: min(420px, 100vw);\n }\n .ddga-drawer--lg.ddga-drawer--start,\n .ddga-drawer--lg.ddga-drawer--end {\n inline-size: min(560px, 100vw);\n }\n .ddga-drawer--full.ddga-drawer--start,\n .ddga-drawer--full.ddga-drawer--end {\n inline-size: 100vw;\n }\n\n .ddga-drawer--sm.ddga-drawer--top,\n .ddga-drawer--sm.ddga-drawer--bottom {\n block-size: min(240px, 100vh);\n }\n .ddga-drawer--md.ddga-drawer--top,\n .ddga-drawer--md.ddga-drawer--bottom {\n block-size: min(360px, 100vh);\n }\n .ddga-drawer--lg.ddga-drawer--top,\n .ddga-drawer--lg.ddga-drawer--bottom {\n block-size: min(520px, 100vh);\n }\n .ddga-drawer--full.ddga-drawer--top,\n .ddga-drawer--full.ddga-drawer--bottom {\n block-size: 100vh;\n }\n\n /* ─── Enter/exit per side (logical axes so RTL flips automatically) ─── */\n\n .ddga-drawer--start[data-state='open'] {\n animation-name: ddga-drawer-slide-in-start;\n }\n .ddga-drawer--start[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-start;\n }\n .ddga-drawer--end[data-state='open'] {\n animation-name: ddga-drawer-slide-in-end;\n }\n .ddga-drawer--end[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-end;\n }\n .ddga-drawer--top[data-state='open'] {\n animation-name: ddga-drawer-slide-in-top;\n }\n .ddga-drawer--top[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-top;\n }\n .ddga-drawer--bottom[data-state='open'] {\n animation-name: ddga-drawer-slide-in-bottom;\n }\n .ddga-drawer--bottom[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-bottom;\n }\n\n /* Logical-direction slides: `translate` uses physical axes, so for\n start/end we branch on `[dir]` to keep the slide direction correct in\n both LTR and RTL. */\n @keyframes ddga-drawer-slide-in-start {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-drawer-slide-out-start {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n @keyframes ddga-drawer-slide-in-end {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-drawer-slide-out-end {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n }\n @keyframes ddga-drawer-slide-in-top {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n }\n @keyframes ddga-drawer-slide-out-top {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n }\n @keyframes ddga-drawer-slide-in-bottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n @keyframes ddga-drawer-slide-out-bottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n }\n\n /* RTL: flip the horizontal slides so \"start\" (right edge in RTL) and \"end\"\n (left edge in RTL) animate from the correct side. */\n [dir='rtl'] .ddga-drawer--start[data-state='open'] {\n animation-name: ddga-drawer-slide-in-end;\n }\n [dir='rtl'] .ddga-drawer--start[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-end;\n }\n [dir='rtl'] .ddga-drawer--end[data-state='open'] {\n animation-name: ddga-drawer-slide-in-start;\n }\n [dir='rtl'] .ddga-drawer--end[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-start;\n }\n\n /* ─── Header / Body / Footer ─── */\n\n .ddga-drawer__header {\n flex-shrink: 0;\n padding: var(--ddga-space-4);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-drawer__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-4);\n }\n\n .ddga-drawer__footer {\n flex-shrink: 0;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-border);\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-drawer__title {\n margin: 0;\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.3;\n color: var(--ddga-color-foreground);\n }\n\n .ddga-drawer__description {\n margin: var(--ddga-space-1) 0 0;\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Corner close button ─── */\n\n .ddga-drawer__close {\n position: absolute;\n inset-block-start: var(--ddga-space-3);\n inset-inline-end: var(--ddga-space-3);\n inline-size: 1.75rem;\n block-size: 1.75rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-md);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n font: inherit;\n }\n .ddga-drawer__close:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-drawer__close:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-drawer__close > svg {\n inline-size: 1.125em;\n block-size: 1.125em;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-drawer,\n .ddga-drawer__overlay {\n animation: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-drawer {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Overlay (backdrop) ─── */\n\n .ddga-modal__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Above tooltips (50) but allow Toast (future) to sit higher if it uses\n 60+. Modal lives at 60 by convention. */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n /* ─── Content (the modal box) ─── */\n\n .ddga-modal {\n position: fixed;\n /* Use physical `top`/`left` (NOT inset-block/inline-start) for centering.\n Centering is symmetric across writing directions, but `inset-inline-start`\n flips to `right` in RTL while `transform: translateX(-50%)` stays\n physical — pairing them shifts the modal off-screen in RTL. The\n physical pair is the established centered-overlay pattern and is\n direction-correct because viewport-center doesn't care about `dir`. */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-lg);\n /* Keep the modal from spilling off small viewports. */\n max-block-size: calc(100vh - 2rem);\n inline-size: calc(100vw - 2rem);\n overflow: hidden;\n animation-duration: 180ms;\n animation-timing-function: ease;\n }\n\n /* RTL: in RTL the inline axis flips. `translate(-50%, -50%)` still centers\n correctly because translate is direction-agnostic. No override needed. */\n\n /* ─── Sizes (max-inline-size caps; `full` is the takeover) ─── */\n\n .ddga-modal--sm {\n max-inline-size: 360px;\n }\n .ddga-modal--md {\n max-inline-size: 480px;\n }\n .ddga-modal--lg {\n max-inline-size: 640px;\n }\n .ddga-modal--xl {\n max-inline-size: 800px;\n }\n .ddga-modal--full {\n /* Edge-to-edge with a small breathing margin. */\n max-inline-size: calc(100vw - 2rem);\n max-block-size: calc(100vh - 2rem);\n inline-size: calc(100vw - 2rem);\n block-size: calc(100vh - 2rem);\n }\n\n /* ─── Sections ─── */\n\n .ddga-modal__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-5);\n padding-block-end: var(--ddga-space-3);\n }\n\n .ddga-modal__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n margin: 0;\n color: var(--ddga-text-primary);\n /* Reserve room so the corner X never overlaps the title text. */\n padding-inline-end: var(--ddga-space-8);\n }\n\n .ddga-modal__description {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.5;\n margin: 0;\n color: var(--ddga-text-secondary);\n }\n\n /* Body slot — consumers drop content directly under ModalContent. We use a\n generic descendant rule so unwrapped paragraphs/forms still get padding\n without forcing a ModalBody subcomponent. */\n .ddga-modal__header ~ * {\n padding-inline: var(--ddga-space-5);\n }\n /* Reset for known sections that own their own padding. */\n .ddga-modal__header ~ .ddga-modal__footer {\n padding-inline: var(--ddga-space-5);\n }\n\n .ddga-modal__footer {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-5);\n padding-block-start: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-border);\n margin-block-start: auto;\n }\n\n /* ─── Corner close (X) ─── */\n\n .ddga-modal__close {\n position: absolute;\n inset-block-start: var(--ddga-space-3);\n inset-inline-end: var(--ddga-space-3);\n inline-size: 2rem;\n block-size: 2rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n .ddga-modal__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-modal__close:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-modal__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-modal__overlay[data-state='open'] {\n animation-name: ddga-modal-overlay-in;\n }\n .ddga-modal__overlay[data-state='closed'] {\n animation-name: ddga-modal-overlay-out;\n }\n .ddga-modal[data-state='open'] {\n animation-name: ddga-modal-in;\n }\n .ddga-modal[data-state='closed'] {\n animation-name: ddga-modal-out;\n }\n\n @keyframes ddga-modal-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-modal-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes ddga-modal-in {\n from {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.96);\n }\n to {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n }\n @keyframes ddga-modal-out {\n from {\n opacity: 1;\n transform: translate(-50%, -50%) scale(1);\n }\n to {\n opacity: 0;\n transform: translate(-50%, -50%) scale(0.96);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-modal,\n .ddga-modal__overlay {\n animation-duration: 0ms;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-modal {\n border-color: CanvasText;\n }\n .ddga-modal__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","/* Generated by tokens/scripts/generate-css.ts , do not edit by hand. */\n.ddga-theme-sa-green {\n --ddga-color-primary: var(--ddga-sa-500);\n --ddga-color-primary-hover: var(--ddga-sa-600);\n --ddga-color-primary-active: var(--ddga-sa-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-sa-500);\n}\n\n.ddga-theme-gray {\n --ddga-color-primary: var(--ddga-gray-500);\n --ddga-color-primary-hover: var(--ddga-gray-600);\n --ddga-color-primary-active: var(--ddga-gray-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-gray-500);\n}\n\n.ddga-theme-error {\n --ddga-color-primary: var(--ddga-error-500);\n --ddga-color-primary-hover: var(--ddga-error-600);\n --ddga-color-primary-active: var(--ddga-error-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-error-500);\n}\n\n.ddga-theme-warning {\n --ddga-color-primary: var(--ddga-warning-500);\n --ddga-color-primary-hover: var(--ddga-warning-600);\n --ddga-color-primary-active: var(--ddga-warning-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-warning-500);\n}\n\n.ddga-theme-success {\n --ddga-color-primary: var(--ddga-success-500);\n --ddga-color-primary-hover: var(--ddga-success-600);\n --ddga-color-primary-active: var(--ddga-success-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-success-500);\n}\n\n.ddga-theme-info {\n --ddga-color-primary: var(--ddga-info-500);\n --ddga-color-primary-hover: var(--ddga-info-600);\n --ddga-color-primary-active: var(--ddga-info-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-info-500);\n}\n\n.ddga-theme-gold {\n --ddga-color-primary: var(--ddga-gold-500);\n --ddga-color-primary-hover: var(--ddga-gold-600);\n --ddga-color-primary-active: var(--ddga-gold-700);\n --ddga-color-primary-foreground: #0D121C;\n --ddga-color-ring: var(--ddga-gold-500);\n}\n\n.ddga-theme-lavender {\n --ddga-color-primary: var(--ddga-lavender-500);\n --ddga-color-primary-hover: var(--ddga-lavender-600);\n --ddga-color-primary-active: var(--ddga-lavender-700);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-lavender-500);\n}\n","@layer ddga-components {\n /* Size lives on the root; per-part visuals cascade. Radix exposes\n `--radix-accordion-content-height` on the Content element when open so\n we can animate the disclosure cleanly; the inner wrapper carries the\n padding so the animated container can clip without padding popping. */\n\n /* ─── Root ─── */\n\n .ddga-accordion {\n display: flex;\n flex-direction: column;\n inline-size: 100%;\n color: var(--ddga-text-primary);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Item ─── */\n\n .ddga-accordion__item {\n border-block-start: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Header (wraps the trigger button) ─── */\n\n .ddga-accordion__header {\n display: flex;\n margin: 0;\n }\n\n /* ─── Trigger (the disclosure button) ─── */\n\n .ddga-accordion__trigger {\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n inline-size: 100%;\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-4);\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-weight: 500;\n text-align: start;\n cursor: pointer;\n transition: color 150ms ease;\n }\n\n .ddga-accordion__trigger:hover {\n color: var(--ddga-color-primary);\n }\n\n .ddga-accordion__trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Chevron ─── */\n\n .ddga-accordion__chevron {\n flex-shrink: 0;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n transition: transform 200ms ease;\n }\n\n .ddga-accordion__trigger[data-state='open'] .ddga-accordion__chevron {\n transform: rotate(180deg);\n }\n\n /* ─── Content (animated disclosure) ─── */\n\n .ddga-accordion__content {\n overflow: hidden;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-accordion__content[data-state='open'] {\n animation: ddga-accordion-down 200ms ease-out;\n }\n .ddga-accordion__content[data-state='closed'] {\n animation: ddga-accordion-up 200ms ease-out;\n }\n\n .ddga-accordion__content-inner {\n padding-block-end: var(--ddga-space-4);\n line-height: 1.5;\n }\n\n @keyframes ddga-accordion-down {\n from {\n block-size: 0;\n }\n to {\n block-size: var(--radix-accordion-content-height);\n }\n }\n @keyframes ddga-accordion-up {\n from {\n block-size: var(--radix-accordion-content-height);\n }\n to {\n block-size: 0;\n }\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-accordion--sm .ddga-accordion__trigger {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-accordion--md .ddga-accordion__trigger {\n padding-block: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-accordion__content[data-state='open'],\n .ddga-accordion__content[data-state='closed'] {\n animation: none;\n }\n .ddga-accordion__chevron {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-accordion,\n .ddga-accordion__item {\n border-color: CanvasText;\n }\n .ddga-accordion__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-divider {\n /* Single hook so consumers can recolor the divider per-instance. */\n --ddga-divider-color: var(--ddga-color-border);\n border: 0;\n }\n\n /* ─── Plain (no children) ─── */\n\n .ddga-divider--horizontal {\n display: block;\n block-size: 0;\n inline-size: 100%;\n /* Use a border so dashed style works naturally without backgrounds. */\n border-block-start: 1px solid var(--ddga-divider-color);\n }\n\n /* `inline-block` so consumers can drop a vertical divider next to inline\n content (e.g. button rows) without forcing a flex parent. Consumers in a\n flex/grid row will still pick up the parent's cross-axis sizing. */\n .ddga-divider--vertical {\n display: inline-block;\n inline-size: 0;\n block-size: 100%;\n min-block-size: 1em;\n vertical-align: middle;\n border-inline-start: 1px solid var(--ddga-divider-color);\n }\n\n /* ─── Dashed (overrides solid border style) ─── */\n\n .ddga-divider--dashed.ddga-divider--horizontal {\n border-block-start-style: dashed;\n }\n .ddga-divider--dashed.ddga-divider--vertical {\n border-inline-start-style: dashed;\n }\n\n /* ─── Labeled (horizontal + children) ─── */\n\n .ddga-divider--labeled {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n /* Override the plain-bar shape: this row is the divider, not a 0px line\n with a top border. */\n block-size: auto;\n border-block-start: 0;\n }\n\n .ddga-divider--labeled::before,\n .ddga-divider--labeled::after {\n content: '';\n block-size: 0;\n border-block-start: 1px solid var(--ddga-divider-color);\n }\n\n .ddga-divider--labeled.ddga-divider--dashed::before,\n .ddga-divider--labeled.ddga-divider--dashed::after {\n border-block-start-style: dashed;\n }\n\n /* Label positions — `start`/`end` are logical so they flip in RTL. */\n .ddga-divider--label-center::before,\n .ddga-divider--label-center::after {\n flex: 1;\n }\n\n .ddga-divider--label-start::before {\n flex: 0 0 var(--ddga-space-6);\n }\n .ddga-divider--label-start::after {\n flex: 1;\n }\n\n .ddga-divider--label-end::before {\n flex: 1;\n }\n .ddga-divider--label-end::after {\n flex: 0 0 var(--ddga-space-6);\n }\n\n .ddga-divider__label {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n white-space: nowrap;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-divider {\n border-color: CanvasText;\n }\n .ddga-divider--labeled::before,\n .ddga-divider--labeled::after {\n border-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Group label, group container, and per-item styles\n live here. Size + error states cascade from the group via descendant\n selectors so the source of truth stays on one element per group. */\n\n /* ─── Group label ─── */\n\n .ddga-radio-group__label {\n display: block;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: 500;\n line-height: 1.4;\n margin-block-end: var(--ddga-space-1);\n }\n .ddga-radio-group__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Group container (Radix Root, role=radiogroup) ─── */\n\n .ddga-radio-group {\n display: flex;\n gap: var(--ddga-space-3);\n }\n .ddga-radio-group--vertical {\n flex-direction: column;\n }\n .ddga-radio-group--horizontal {\n flex-direction: row;\n flex-wrap: wrap;\n }\n\n /* ─── Row (circle + label, inline) ─── */\n\n .ddga-radio-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Circle (Radix Item , reset the button, then style) ─── */\n\n .ddga-radio {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n padding: 0;\n border: 1px solid var(--ddga-color-input);\n border-radius: 999px;\n background-color: var(--ddga-color-background);\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* Sizes cascade from the group , one source of truth per group. */\n .ddga-radio-group--md .ddga-radio {\n block-size: 18px;\n inline-size: 18px;\n }\n .ddga-radio-group--sm .ddga-radio {\n block-size: 16px;\n inline-size: 16px;\n }\n\n /* ─── Checked border ─── */\n\n .ddga-radio[data-state='checked'] {\n border-color: var(--ddga-color-primary);\n }\n\n /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n .ddga-radio:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Error (cascades from the group) ─── */\n\n .ddga-radio-group--error .ddga-radio {\n border-color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio[data-state='checked'] .ddga-radio__dot {\n background-color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-error);\n }\n\n /* ─── Disabled (group OR per-item) ─── */\n\n .ddga-radio:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-radio-row:has(.ddga-radio:disabled) .ddga-radio__label {\n cursor: not-allowed;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Indicator + dot (only mounts when checked) ─── */\n\n .ddga-radio__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-radio__dot {\n inline-size: 50%;\n block-size: 50%;\n border-radius: 999px;\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Item label ─── */\n\n .ddga-radio__label {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.4;\n cursor: pointer;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-radio {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-radio {\n border: 1px solid CanvasText;\n }\n .ddga-radio[data-state='checked'] {\n border-color: Highlight;\n }\n .ddga-radio__dot {\n background-color: CanvasText;\n }\n .ddga-radio:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-radio:disabled {\n border-color: GrayText;\n color: GrayText;\n }\n }\n}\n","*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: var(--ddga-font-ar);\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-background);\n line-height: 1.6;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n}\n\n/* Block-level SVGs: removes the inline baseline gap so icons sit centered\n inside flex controls (buttons, input adornments). Standard reset. */\nsvg {\n display: block;\n vertical-align: middle;\n}\n","@layer ddga-components {\n /* Standalone Toggle and ToggleGroup items share one visual language. The\n base look is applied to both; group items additionally join into a\n segmented control. Pressed state comes from Radix's [data-state='on']. */\n\n .ddga-toggle,\n .ddga-toggle-group__item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n font: inherit;\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1;\n cursor: pointer;\n user-select: none;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease;\n }\n\n /* ─── Sizes (heights match Button) ─── */\n\n .ddga-toggle--sm,\n .ddga-toggle-group--sm .ddga-toggle-group__item {\n block-size: 32px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-toggle--md,\n .ddga-toggle-group--md .ddga-toggle-group__item {\n block-size: 36px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-toggle--lg,\n .ddga-toggle-group--lg .ddga-toggle-group__item {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Hover ─── */\n\n .ddga-toggle:hover:not(:disabled),\n .ddga-toggle-group__item:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Pressed (on) ─── */\n\n .ddga-toggle[data-state='on'],\n .ddga-toggle-group__item[data-state='on'] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-toggle[data-state='on']:hover:not(:disabled),\n .ddga-toggle-group__item[data-state='on']:hover:not(:disabled) {\n background-color: var(--ddga-color-primary-hover);\n }\n\n /* ─── Outline variant ─── */\n\n .ddga-toggle--outline,\n .ddga-toggle-group--outline .ddga-toggle-group__item {\n border-color: var(--ddga-color-input);\n }\n\n /* ─── Focus ─── */\n\n .ddga-toggle:focus-visible,\n .ddga-toggle-group__item:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n /* ─── Disabled ─── */\n\n .ddga-toggle:disabled,\n .ddga-toggle-group__item:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n /* ─── Group: segmented control layout ─── */\n\n .ddga-toggle-group {\n display: inline-flex;\n align-items: center;\n }\n\n /* Default variant: small gap between independent buttons. */\n .ddga-toggle-group--default {\n gap: var(--ddga-space-1);\n }\n\n /* Outline variant: items join into one segmented bar (shared borders,\n rounded outer corners only). Logical radii flip correctly in RTL. */\n .ddga-toggle-group--outline .ddga-toggle-group__item {\n border-radius: 0;\n margin-inline-start: -1px;\n }\n .ddga-toggle-group--outline .ddga-toggle-group__item:first-child {\n margin-inline-start: 0;\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-toggle-group--outline .ddga-toggle-group__item:last-child {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n /* Raise the focused/pressed item so its full border is visible over the\n overlapping neighbor. */\n .ddga-toggle-group--outline .ddga-toggle-group__item:focus-visible,\n .ddga-toggle-group--outline .ddga-toggle-group__item[data-state='on'] {\n position: relative;\n z-index: 1;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-toggle,\n .ddga-toggle-group__item {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-toggle[data-state='on'],\n .ddga-toggle-group__item[data-state='on'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-toggle:focus-visible,\n .ddga-toggle-group__item:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Label + required ─── */\n\n .ddga-combobox__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-combobox__required {\n color: var(--ddga-color-error);\n }\n\n /* ─── Trigger (Popover.Trigger as <button>) ─── */\n\n /* Heights mirror Input/Select so triggers and text inputs line up. */\n .ddga-combobox-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-combobox-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-combobox-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-combobox-trigger:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-combobox-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-combobox-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-combobox-trigger--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-combobox__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .ddga-combobox__placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-combobox__icon {\n flex-shrink: 0;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Popover content panel ─── */\n\n .ddga-combobox-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n overflow: hidden;\n z-index: 50;\n /* `inline-size: var(--radix-popover-trigger-width)` set inline so the\n panel always matches trigger width. min-width fallback for very narrow\n triggers; the popper var is what wins normally. */\n min-inline-size: 200px;\n }\n\n /* Same in/out animation as DropdownMenu — fast + subtle. */\n .ddga-combobox-content[data-state='open'] {\n animation: ddga-combobox-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-combobox-content[data-state='closed'] {\n animation: ddga-combobox-out 80ms ease-in;\n }\n @keyframes ddga-combobox-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-combobox-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── cmdk root + input ─── */\n\n .ddga-combobox-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-combobox-input {\n inline-size: 100%;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border: 0;\n border-block-end: 1px solid var(--ddga-color-border);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-combobox-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── List + items ─── */\n\n .ddga-combobox-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n\n .ddga-combobox-empty {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n .ddga-combobox-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* cmdk sets data-selected on the actively highlighted item (keyboard or\n hover). Our own data-selected (no attribute value) marks the chosen\n value — distinct concept. CSS uses [data-selected=''] for the chosen\n mark and [data-selected='true'] for cmdk's highlight; both can coexist\n on the same item when the chosen item is also highlighted. */\n .ddga-combobox-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-combobox-item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-combobox-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n flex-shrink: 0;\n color: var(--ddga-color-primary);\n }\n .ddga-combobox-item__check > svg {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-combobox-item__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n /* ─── Group + Separator ─── */\n\n .ddga-combobox-group [cmdk-group-heading] {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n .ddga-combobox-separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) * -1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-combobox-content[data-state='open'],\n .ddga-combobox-content[data-state='closed'] {\n animation: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-combobox-trigger,\n .ddga-combobox-content {\n border: 1px solid CanvasText;\n }\n .ddga-combobox-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Viewport (fixed region where toasts stack) ─── */\n /*\n * z-index 70 — above Modal (60), Tooltip (50). The viewport itself is\n * pointer-events: none so it doesn't block clicks in the rest of the page;\n * each toast re-enables pointer events for itself.\n *\n * Default is `position: fixed` (pinned to the browser viewport). When the\n * `containerized` modifier is applied, it switches to `position: absolute`\n * so it pins to a positioned ancestor instead — needed in Storybook,\n * embedded widgets, and any case where the Toaster shouldn't escape its\n * parent box.\n */\n\n .ddga-toast-viewport {\n position: fixed;\n z-index: 70;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-4);\n /* min() handles both wide containers (cap at 420) and narrow ones (fill\n minus side breathing room) in a single rule — no fragile vw-based\n media query needed. */\n inline-size: min(420px, calc(100% - 2rem));\n pointer-events: none;\n list-style: none;\n margin: 0;\n /* Always allow individual toasts to be clicked even when the viewport\n itself is pass-through. */\n }\n .ddga-toast-viewport > * {\n pointer-events: auto;\n }\n\n .ddga-toast-viewport--containerized {\n position: absolute;\n }\n\n /* ─── Position anchors ─── */\n /*\n * Edge anchors use logical insets (`inset-inline-*`) so `start`/`end` flip\n * automatically in RTL. Center anchors use physical `left: 50%` paired\n * with `transform: translateX(-50%)` — centering is direction-symmetric,\n * and the logical-inset + translate combo would shift off-axis in RTL\n * (same trap fixed earlier in Modal).\n */\n\n .ddga-toast-viewport--top-start {\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n .ddga-toast-viewport--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n .ddga-toast-viewport--top-end {\n inset-block-start: 0;\n inset-inline-end: 0;\n }\n .ddga-toast-viewport--bottom-start {\n inset-block-end: 0;\n inset-inline-start: 0;\n flex-direction: column-reverse;\n }\n .ddga-toast-viewport--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n flex-direction: column-reverse;\n }\n .ddga-toast-viewport--bottom-end {\n inset-block-end: 0;\n inset-inline-end: 0;\n flex-direction: column-reverse;\n }\n\n /* ─── Toast (one notification) ─── */\n\n .ddga-toast {\n /* Per-variant accent (icon + border-leading edge). Card-surface bg keeps\n the toast neutral so dark + light look balanced; the leading inset\n shadow does the variant signaling. */\n --ddga-toast-accent: var(--ddga-color-info);\n\n /* Explicit width = 100% of viewport so the toast reliably fills the\n column regardless of flex defaults / browser quirks. min-inline-size:0\n lets the body text wrap without forcing the toast wider. */\n inline-size: 100%;\n min-inline-size: 0;\n\n pointer-events: auto;\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n font-family: inherit;\n line-height: 1.4;\n /* Outer drop shadow + inline-start accent bar in one shadow declaration.\n Logical direction: the accent reads as the leading edge — flipped for\n RTL via the rule below. */\n box-shadow:\n var(--ddga-shadow-lg),\n inset 3px 0 0 0 var(--ddga-toast-accent);\n }\n [dir='rtl'] .ddga-toast {\n box-shadow:\n var(--ddga-shadow-lg),\n inset -3px 0 0 0 var(--ddga-toast-accent);\n }\n\n .ddga-toast--default {\n --ddga-toast-accent: var(--ddga-color-border);\n }\n .ddga-toast--info {\n --ddga-toast-accent: var(--ddga-color-info);\n }\n .ddga-toast--success {\n --ddga-toast-accent: var(--ddga-color-success);\n }\n .ddga-toast--warning {\n --ddga-toast-accent: var(--ddga-color-warning);\n }\n .ddga-toast--destructive {\n --ddga-toast-accent: var(--ddga-color-destructive);\n }\n\n /* ─── Icon (leading) ─── */\n\n .ddga-toast__icon {\n flex-shrink: 0;\n inline-size: 1.25em;\n block-size: 1.25em;\n color: var(--ddga-toast-accent);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Optical-center with the title's cap height. */\n margin-block-start: 0.125em;\n }\n .ddga-toast__icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Body (title + description + action stack) ─── */\n\n .ddga-toast__body {\n flex: 1 1 0;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n /* Leave room for the absolutely-positioned close button so long titles\n don't run under it. */\n padding-inline-end: var(--ddga-space-5);\n }\n\n .ddga-toast__title {\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n margin: 0;\n color: inherit;\n /* Allow wrapping on long titles; we don't want truncation here. */\n overflow-wrap: anywhere;\n }\n .ddga-toast__description {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n margin: 0;\n overflow-wrap: anywhere;\n }\n\n /* ─── Action button (inside body) ─── */\n\n .ddga-toast__action {\n align-self: flex-end;\n margin-block-start: var(--ddga-space-2);\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-3);\n background: transparent;\n border: 1px solid var(--ddga-color-border);\n color: var(--ddga-toast-accent);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n cursor: pointer;\n white-space: nowrap;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease;\n }\n .ddga-toast__action:hover {\n background-color: var(--ddga-color-muted);\n border-color: var(--ddga-toast-accent);\n }\n .ddga-toast__action:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n }\n\n /* ─── Close button (corner, on the root) ─── */\n\n .ddga-toast__close {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n inline-size: 1.5rem;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-secondary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n opacity: 0.7;\n transition:\n opacity 150ms ease,\n background-color 150ms ease;\n }\n .ddga-toast__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-toast__close:hover {\n opacity: 1;\n background-color: var(--ddga-color-muted);\n }\n .ddga-toast__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n opacity: 1;\n }\n\n /* ─── Animations (Radix data-state + swipe) ─── */\n /*\n * Slide-in direction is anchored on the viewport's position. Bottom and\n * top positions slide vertically from the anchored edge so the motion\n * always feels like the toast is \"coming from\" the corner it lives in.\n * For start/end positions in RTL, the slide is still vertical — no\n * horizontal/inline animations to avoid the RTL transform tangle.\n */\n\n .ddga-toast[data-state='open'] {\n animation: ddga-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-toast[data-state='closed'] {\n animation: ddga-toast-out 180ms ease forwards;\n }\n\n /* Radix portals toasts as children of the Viewport, so the descendant\n selector targets them. Bottom: come up from below. Top: come down. */\n .ddga-toast-viewport[data-position^='bottom-'] .ddga-toast[data-state='open'] {\n animation-name: ddga-toast-slide-up;\n }\n .ddga-toast-viewport[data-position^='top-'] .ddga-toast[data-state='open'] {\n animation-name: ddga-toast-slide-down;\n }\n\n /* Swipe gesture (Radix sets --radix-toast-swipe-move-x/y while dragging). */\n .ddga-toast[data-swipe='move'] {\n transform: translate3d(\n var(--radix-toast-swipe-move-x, 0),\n var(--radix-toast-swipe-move-y, 0),\n 0\n );\n }\n .ddga-toast[data-swipe='cancel'] {\n transform: translate3d(0, 0, 0);\n transition: transform 200ms ease-out;\n }\n .ddga-toast[data-swipe='end'] {\n animation: ddga-toast-out 180ms ease forwards;\n }\n\n @keyframes ddga-toast-in {\n from {\n opacity: 0;\n transform: translateY(8px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-toast-slide-up {\n from {\n opacity: 0;\n transform: translateY(24px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-toast-slide-down {\n from {\n opacity: 0;\n transform: translateY(-24px);\n }\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n @keyframes ddga-toast-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n transform: scale(0.95);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-toast,\n .ddga-toast[data-state='open'],\n .ddga-toast[data-state='closed'] {\n animation-duration: 1ms;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-toast {\n border-color: CanvasText;\n }\n .ddga-toast__action:focus-visible,\n .ddga-toast__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* Size + orientation live on the root; state lives on each Step. Separator\n lines are CSS-drawn via `::before` on every Step except the first,\n stretching backward to the previous Step's indicator. Logical\n properties handle the RTL flip — no JS, no JS conditional classes. */\n\n /* ─── Root (ol) ─── */\n\n .ddga-steps {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--ddga-text-primary);\n font-family: inherit;\n }\n\n .ddga-steps--horizontal {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n }\n\n .ddga-steps--vertical {\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n /* ─── Step (li) ─── */\n\n .ddga-steps__step {\n position: relative;\n display: flex;\n flex: 1;\n min-inline-size: 0;\n }\n\n .ddga-steps--horizontal .ddga-steps__step {\n flex-direction: column;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n }\n .ddga-steps--vertical .ddga-steps__step {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--ddga-space-3);\n }\n\n /* ─── Separator line (CSS-drawn, between siblings) ─── */\n /*\n * Horizontal: line stretches inline-end-ward from the indicator on this\n * step toward the next step. Vertical: line stretches block-end-ward.\n * Color reflects THIS step's state — when this step is completed the\n * line to the next is also completed. (Visual-only progress indicator.)\n */\n\n .ddga-steps--horizontal .ddga-steps__step + .ddga-steps__step::before {\n content: '';\n position: absolute;\n block-size: 2px;\n /* Sit at the vertical center of the indicator (24px / 2). */\n inset-block-start: 11px;\n /* Span from just before this step's indicator back to the previous one. */\n inset-inline-start: calc(-1 * var(--ddga-space-2));\n inset-inline-end: calc(100% - 4px);\n background-color: var(--ddga-color-border);\n }\n\n .ddga-steps--vertical .ddga-steps__step + .ddga-steps__step::before {\n content: '';\n position: absolute;\n inline-size: 2px;\n /* Sit at the horizontal center of the indicator. */\n inset-inline-start: 11px;\n /* Span from just before this step's indicator back to the previous one. */\n inset-block-start: calc(-1 * var(--ddga-space-3));\n inset-block-end: calc(100% - 4px);\n background-color: var(--ddga-color-border);\n }\n\n /* Completed steps colour the inbound line — the line BEFORE a completed\n step reflects that the journey to it is done. */\n .ddga-steps__step--completed + .ddga-steps__step--completed::before,\n .ddga-steps__step--completed + .ddga-steps__step--current::before {\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Indicator (numbered circle / check) ─── */\n\n .ddga-steps__indicator {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border-radius: 999px;\n border: 2px solid var(--ddga-color-border);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n font-weight: 600;\n line-height: 1;\n /* Above the separator line so it doesn't visually cross through. */\n position: relative;\n z-index: 1;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-steps__indicator-check {\n inline-size: 0.875em;\n block-size: 0.875em;\n display: none;\n }\n\n /* Completed: filled-primary circle with a check icon (number hidden). */\n .ddga-steps__step--completed .ddga-steps__indicator {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-steps__step--completed .ddga-steps__indicator-check {\n display: inline-block;\n }\n .ddga-steps__step--completed .ddga-steps__indicator-number {\n display: none;\n }\n\n /* Current: outlined-primary circle with the number visible. */\n .ddga-steps__step--current .ddga-steps__indicator {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* ─── Title + Description ─── */\n\n .ddga-steps__title {\n display: block;\n color: var(--ddga-text-secondary);\n font-weight: 500;\n line-height: 1.4;\n }\n\n .ddga-steps__step--current .ddga-steps__title {\n color: var(--ddga-text-primary);\n font-weight: 600;\n }\n\n .ddga-steps__step--completed .ddga-steps__title {\n color: var(--ddga-text-primary);\n }\n\n .ddga-steps__description {\n display: block;\n margin-block-start: var(--ddga-space-1);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.4;\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-steps--sm {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-steps--md {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-steps__indicator {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-steps__indicator {\n border-color: CanvasText;\n color: CanvasText;\n }\n .ddga-steps__step--completed .ddga-steps__indicator,\n .ddga-steps__step--current .ddga-steps__indicator {\n border-color: Highlight;\n color: Highlight;\n }\n .ddga-steps__step + .ddga-steps__step::before {\n background-color: CanvasText;\n }\n .ddga-steps__step--completed + .ddga-steps__step--completed::before,\n .ddga-steps__step--completed + .ddga-steps__step--current::before {\n background-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only FileUpload-specific styles live here. */\n\n .ddga-file-upload {\n color: var(--ddga-text-primary);\n }\n\n /* ─── Label ─── */\n\n .ddga-file-upload__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-file-upload__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Drop zone ─── */\n\n .ddga-file-upload__dropzone {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6) var(--ddga-space-4);\n border: 1px dashed var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n text-align: center;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-file-upload__dropzone:hover {\n border-color: var(--ddga-color-ring);\n background-color: var(--ddga-color-muted);\n }\n\n /* Focus ring driven by the (visually hidden) input inside the zone. */\n .ddga-file-upload__dropzone:focus-within {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Active drag-over state. */\n .ddga-file-upload__dropzone[data-dragging] {\n border-color: var(--ddga-color-primary);\n border-style: solid;\n background-color: var(--ddga-color-muted);\n box-shadow: 0 0 0 1px var(--ddga-color-primary);\n }\n\n .ddga-file-upload__dropzone--error {\n border-color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone--error:focus-within {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n .ddga-file-upload__dropzone[data-disabled] {\n cursor: not-allowed;\n opacity: 0.6;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-file-upload__dropzone[data-disabled]:hover {\n border-color: var(--ddga-color-input);\n border-style: dashed;\n }\n\n .ddga-file-upload__icon {\n font-size: 1.5rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__hint {\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n }\n\n /* Visually hidden, but kept focusable so keyboard users can tab to it and\n press Space/Enter to open the picker. (Not display:none / tabindex=-1.) */\n .ddga-file-upload__input {\n position: absolute;\n inline-size: 1px;\n block-size: 1px;\n padding: 0;\n margin: -1px;\n overflow: hidden;\n clip: rect(0 0 0 0);\n white-space: nowrap;\n border: 0;\n }\n\n /* ─── File list ─── */\n\n .ddga-file-upload__list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n .ddga-file-upload__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n padding: var(--ddga-space-2) var(--ddga-space-3);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n }\n\n .ddga-file-upload__item-icon {\n display: inline-flex;\n flex: none;\n font-size: 1.125rem;\n color: var(--ddga-color-muted-foreground);\n }\n\n .ddga-file-upload__item[data-status='success'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-success);\n }\n\n .ddga-file-upload__item[data-status='error'] .ddga-file-upload__item-icon {\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-main {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n .ddga-file-upload__item-head {\n display: flex;\n align-items: baseline;\n justify-content: space-between;\n gap: var(--ddga-space-3);\n }\n\n .ddga-file-upload__item-name {\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__item-meta {\n flex: none;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-secondary);\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-file-upload__item-error {\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-color-error);\n }\n\n .ddga-file-upload__item-remove {\n flex: none;\n }\n}\n","@layer ddga-components {\n /* ─── Root ─── */\n\n .ddga-avatar {\n --ddga-avatar-size: 40px;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: var(--ddga-avatar-size);\n block-size: var(--ddga-avatar-size);\n /* Don't clip the status dot — it's positioned half-outside the root. */\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n /* Font sizing tracks the avatar size so fallback initials scale naturally. */\n font-size: calc(var(--ddga-avatar-size) * 0.4);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1;\n vertical-align: middle;\n }\n\n /* ─── Sizes (drive both the box + the fallback font via the var) ─── */\n\n .ddga-avatar--xs {\n --ddga-avatar-size: 24px;\n }\n .ddga-avatar--sm {\n --ddga-avatar-size: 32px;\n }\n .ddga-avatar--md {\n --ddga-avatar-size: 40px;\n }\n .ddga-avatar--lg {\n --ddga-avatar-size: 48px;\n }\n .ddga-avatar--xl {\n --ddga-avatar-size: 64px;\n }\n\n /* ─── Shapes ─── */\n\n .ddga-avatar--circle {\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-avatar--square {\n border-radius: var(--ddga-radius-md);\n }\n\n /* ─── Image / Fallback (clip to the root's shape) ─── */\n\n .ddga-avatar__image,\n .ddga-avatar__fallback {\n inline-size: 100%;\n block-size: 100%;\n border-radius: inherit;\n }\n\n .ddga-avatar__image {\n object-fit: cover;\n }\n\n .ddga-avatar__fallback {\n display: flex;\n align-items: center;\n justify-content: center;\n background-color: inherit;\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n text-transform: uppercase;\n }\n\n /* Tonal color schemes — useful for distinguishing avatars by team/role/\n status in chat & team UIs. Each pair uses the same -100/-700-800 tonal\n scale as Badge subtle variants, so the family reads consistently. */\n .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-100);\n color: var(--ddga-sa-800);\n }\n .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-800);\n }\n .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-100);\n color: var(--ddga-success-700);\n }\n .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-100);\n color: var(--ddga-warning-700);\n }\n .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-100);\n color: var(--ddga-error-700);\n }\n .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-100);\n color: var(--ddga-info-700);\n }\n\n /* ─── Status indicator (bottom-end corner, RTL-aware via logical props) ─── */\n\n .ddga-avatar__status {\n position: absolute;\n inset-block-end: 0;\n inset-inline-end: 0;\n inline-size: calc(var(--ddga-avatar-size) * 0.25);\n block-size: calc(var(--ddga-avatar-size) * 0.25);\n min-inline-size: 8px;\n min-block-size: 8px;\n border-radius: var(--ddga-radius-full);\n /* Cuts a \"ring\" out of the avatar so the dot reads as separate. */\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n\n .ddga-avatar__status--online {\n background-color: var(--ddga-color-success);\n }\n .ddga-avatar__status--busy {\n background-color: var(--ddga-color-destructive);\n }\n .ddga-avatar__status--away {\n background-color: var(--ddga-color-warning);\n }\n .ddga-avatar__status--offline {\n background-color: var(--ddga-gray-400);\n }\n\n /* Square avatars: tuck the status into the corner instead of overhanging,\n because a square corner doesn't disguise the overhang the way a circle does. */\n .ddga-avatar--square .ddga-avatar__status {\n inset-block-end: 2px;\n inset-inline-end: 2px;\n }\n\n /* ─── Group ─── */\n\n .ddga-avatar-group {\n display: inline-flex;\n align-items: center;\n }\n .ddga-avatar-group > .ddga-avatar {\n /* Each subsequent avatar tucks under the previous one. Logical margin\n so stacking flips correctly in RTL. */\n margin-inline-start: calc(var(--ddga-avatar-size) * -0.25);\n /* Ring around each so they read as separate even when overlapping. */\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n .ddga-avatar-group > .ddga-avatar:first-child {\n margin-inline-start: 0;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-avatar {\n border: 1px solid CanvasText;\n }\n .ddga-avatar__status {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-spinner {\n display: inline-block;\n flex-shrink: 0;\n color: currentColor;\n animation: ddga-spin 600ms linear infinite;\n }\n\n .ddga-spinner--sm {\n font-size: 1rem;\n }\n .ddga-spinner--md {\n font-size: 1.5rem;\n }\n .ddga-spinner--lg {\n font-size: 2rem;\n }\n\n @keyframes ddga-spin {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-spinner {\n animation-duration: 1.5s;\n }\n }\n}\n","@layer ddga-components {\n /* Variant + size live on the root (.ddga-tabs--{line,pill,sm,md}). All\n descendant selectors cascade from there. Logical properties keep the\n RTL flip free — Radix sets `dir` from the DgaProvider's Direction.Provider\n and updates `data-orientation` on Root/List/Trigger/Content. */\n\n /* ─── Root ─── */\n\n .ddga-tabs {\n display: flex;\n color: var(--ddga-text-primary);\n /* Default (horizontal) layout: list above content. */\n flex-direction: column;\n gap: var(--ddga-space-3);\n /* CSS var so consumers can tune the line variant's indicator weight. */\n --ddga-tabs-indicator-thickness: 2px;\n }\n\n /* Vertical layout: list beside content. Radix sets data-orientation\n on every part — target it on Root for layout flow, and on List for\n its own flex direction. */\n .ddga-tabs[data-orientation='vertical'] {\n flex-direction: row;\n gap: var(--ddga-space-4);\n }\n\n /* ─── List ─── */\n\n .ddga-tabs__list {\n display: flex;\n /* Horizontal default — gap depends on variant (pill needs tighter,\n line wants none so the baseline reads as a single underline). */\n flex-direction: row;\n align-items: stretch;\n }\n .ddga-tabs__list[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n }\n\n /* Full-width: triggers stretch to fill the list. Each trigger\n `flex: 1` so they share width evenly. Use a separate selector so the\n prop is opt-in and doesn't override per-variant defaults. */\n .ddga-tabs__list--full-width {\n inline-size: 100%;\n }\n .ddga-tabs__list--full-width .ddga-tabs__trigger {\n flex: 1;\n justify-content: center;\n }\n\n /* ─── Trigger (Radix renders a <button>) ─── */\n\n .ddga-tabs__trigger {\n /* Reset the native button. */\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n /* Layout. */\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n /* Text. */\n color: var(--ddga-text-secondary);\n font-family: inherit;\n font-weight: 500;\n line-height: 1.4;\n white-space: nowrap;\n cursor: pointer;\n position: relative;\n transition:\n color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-tabs__trigger:hover {\n color: var(--ddga-text-primary);\n }\n\n .ddga-tabs__trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* Disabled — match both Radix's data-disabled (native disabled) AND\n aria-disabled (asChild composition). Same convention as Button. */\n .ddga-tabs__trigger[data-disabled],\n .ddga-tabs__trigger[aria-disabled='true'] {\n opacity: 0.5;\n cursor: not-allowed;\n }\n .ddga-tabs__trigger[data-disabled]:hover,\n .ddga-tabs__trigger[aria-disabled='true']:hover {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-tabs--sm .ddga-tabs__trigger {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tabs--md .ddga-tabs__trigger {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Variant: line ─── */\n\n .ddga-tabs--line .ddga-tabs__list {\n /* The unselected baseline runs along the inline edge — block-end on\n horizontal lists, inline-end on vertical ones (right in LTR, left in\n RTL — logical properties handle the flip). */\n border-block-end: 1px solid var(--ddga-color-border);\n gap: var(--ddga-space-1);\n }\n .ddga-tabs--line .ddga-tabs__list[data-orientation='vertical'] {\n border-block-end: 0;\n border-inline-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-tabs--line .ddga-tabs__trigger {\n /* Reserve space for the indicator so active/inactive don't shift. */\n margin-block-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n border-block-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n }\n .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger {\n margin-block-end: 0;\n margin-inline-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n border-block-end: 0;\n border-inline-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n }\n\n .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n color: var(--ddga-color-primary);\n border-block-end-color: var(--ddga-color-primary);\n }\n .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n border-block-end-color: transparent;\n border-inline-end-color: var(--ddga-color-primary);\n }\n\n /* ─── Variant: pill ─── */\n\n .ddga-tabs--pill .ddga-tabs__list {\n background-color: var(--ddga-color-muted);\n border-radius: var(--ddga-radius-md);\n padding: var(--ddga-space-1);\n gap: var(--ddga-space-1);\n align-self: flex-start;\n }\n .ddga-tabs--pill .ddga-tabs__list--full-width {\n align-self: stretch;\n }\n\n .ddga-tabs--pill .ddga-tabs__trigger {\n border-radius: calc(var(--ddga-radius-md) - 2px);\n }\n\n .ddga-tabs--pill .ddga-tabs__trigger:hover:not([data-state='active']) {\n background-color: color-mix(in oklab, var(--ddga-color-muted) 60%, var(--ddga-text-primary) 6%);\n }\n\n .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n color: var(--ddga-text-primary);\n background-color: var(--ddga-color-background);\n box-shadow: var(--ddga-shadow-sm);\n }\n\n /* ─── Content ─── */\n\n .ddga-tabs__content {\n /* Radix sets tabindex=0 on the content so keyboard users can shift focus\n from the list into the panel. Make that focus visible. */\n outline: none;\n }\n .ddga-tabs__content:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tabs__trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-tabs--line .ddga-tabs__list {\n border-block-end-color: CanvasText;\n }\n .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n border-block-end-color: Highlight;\n color: Highlight;\n }\n .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n outline: 1px solid Highlight;\n color: Highlight;\n }\n .ddga-tabs__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n","@layer ddga-components {\n /* Semantic <dl>/<dt>/<dd> key–value list. Layout cascades from the root\n variant to the rows; logical properties keep label/value alignment\n correct in RTL. */\n\n .ddga-description-list {\n /* Term column width in horizontal layout; override per instance. */\n --ddga-dl-term-width: 12rem;\n\n margin: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-description-list__item {\n display: flex;\n gap: var(--ddga-space-2) var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n }\n\n .ddga-description-list__term {\n color: var(--ddga-text-secondary);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n }\n\n .ddga-description-list__details {\n margin: 0;\n color: var(--ddga-text-primary);\n line-height: 1.5;\n }\n\n /* ─── Horizontal: term beside details (review / summary screens) ─── */\n\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: row;\n align-items: baseline;\n }\n\n .ddga-description-list--horizontal .ddga-description-list__term {\n flex: none;\n inline-size: var(--ddga-dl-term-width);\n }\n\n .ddga-description-list--horizontal .ddga-description-list__details {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n /* Stack rows on narrow viewports so labels don't crush the values. */\n @media (max-width: 480px) {\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n .ddga-description-list--horizontal .ddga-description-list__term {\n inline-size: auto;\n }\n }\n\n /* ─── Vertical: term above details ─── */\n\n .ddga-description-list--vertical .ddga-description-list__item {\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n /* ─── Dividers between rows ─── */\n\n .ddga-description-list--divided .ddga-description-list__item {\n border-block-end: 1px solid var(--ddga-color-border);\n }\n .ddga-description-list--divided .ddga-description-list__item:last-child {\n border-block-end: 0;\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n — see field.css. Only DatePicker-specific styles live here. */\n\n /* ─── Label + required ─── */\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-color-foreground);\n }\n .ddga-date-picker__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (react-aria Group, hosts segments + icon button) ─── */\n\n /* Heights match Input/Select so DatePicker triggers line up in a form row.\n The Group itself is the border/focus container — react-aria emits\n data-focus-within when any segment or the icon button has focus. */\n .ddga-date-picker-trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n text-align: start;\n transition:\n border-color 120ms ease,\n box-shadow 120ms ease;\n }\n\n .ddga-date-picker-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-picker-trigger[data-focus-within] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n .ddga-date-picker-trigger[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-date-picker-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── DateInput + Segments ─── */\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 1 1 auto;\n min-inline-size: 0;\n /* Force LTR segment direction even in RTL UI so dates always read\n day-month-year left-to-right (matches react-aria's recommended UX\n for numeric date entry — keeps mental model stable across locales). */\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-date-picker__segment {\n padding-block: 1px;\n padding-inline: 1px;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-color-foreground);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* Non-editable segments (literal separators like \"/\" or \"-\") shouldn't\n show the focus background even if Tab lands on them — react-aria marks\n them with data-type=\"literal\". */\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Calendar icon button (popover trigger) ─── */\n\n .ddga-date-picker__icon-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n margin-inline-start: auto;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker__icon-button:hover {\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-picker__icon-button[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker__icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Popover (the floating panel) ─── */\n\n /* react-aria's useOverlayPosition sets `max-height` inline on the popover\n based on the space available between the trigger and the viewport edge\n (minus `containerPadding`). We pair that with `overflow: auto` on the\n inner Dialog so when the calendar can't fit (short iframes, dual-calendar\n mode), the content scrolls instead of being clipped. `overflow: hidden`\n stays on the popover so the rounded corners crop animation bleed. */\n .ddga-date-picker-popover {\n z-index: 50;\n display: flex;\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n overflow: hidden;\n }\n\n /* react-aria emits data-entering / data-exiting during transitions. */\n .ddga-date-picker-popover[data-entering] {\n animation: ddga-date-picker-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-date-picker-popover[data-exiting] {\n animation: ddga-date-picker-out 80ms ease-in;\n }\n @keyframes ddga-date-picker-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-date-picker-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Dialog (panel padding + scroll container) ─── */\n\n /* `max-block-size: 100%` + `overflow: auto` make the Dialog the scroll\n container inside the popover. The Popover constrains height via its\n react-aria-set `max-height`; the Dialog respects that bound and scrolls\n internally when the calendar grid + toggle exceed it. `min-block-size: 0`\n is the flex-child trick that lets the scroll container actually shrink\n (otherwise it grows to content). */\n .ddga-date-picker-dialog {\n flex: 1 1 auto;\n min-block-size: 0;\n max-block-size: 100%;\n padding: var(--ddga-space-3);\n outline: none;\n overflow: auto;\n box-sizing: border-box;\n }\n\n /* ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── */\n\n .ddga-date-picker-toggle {\n display: inline-flex;\n inline-size: 100%;\n margin-block-end: var(--ddga-space-3);\n padding: 2px;\n background-color: var(--ddga-color-muted);\n border-radius: var(--ddga-radius-md);\n }\n .ddga-date-picker-toggle__button {\n flex: 1 1 0;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: calc(var(--ddga-radius-md) - 2px);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n cursor: pointer;\n outline: none;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-date-picker-toggle__button[data-active] {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n }\n .ddga-date-picker-toggle__button:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Calendar grid ─── */\n\n .ddga-date-picker-calendar {\n inline-size: min(100%, 280px);\n }\n\n .ddga-date-picker-calendar__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n margin-block-end: var(--ddga-space-2);\n }\n\n .ddga-date-picker-calendar__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.75rem;\n block-size: 1.75rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker-calendar__nav:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-date-picker-calendar__nav[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-picker-calendar__nav[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* RTL chevron direction is handled in DatePicker.tsx by swapping the icon\n components themselves (PrevChevron / NextChevron based on `dgaCtx.dir`)\n — this is more robust than a CSS scaleX flip because it doesn't rely on\n the popover portal correctly inheriting the `dir` attribute from the\n DgaProvider root. */\n\n .ddga-date-picker-calendar__heading {\n flex: 1 1 auto;\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n text-align: center;\n color: var(--ddga-color-foreground);\n }\n\n /* ─── Month + Year dropdowns (CalendarNavHeader) ─── */\n\n /* Replace the static heading with two native <select>s. Native selects\n give us free keyboard support + native focus rings + screen-reader\n announcements; styling stays minimal so the platform's wheel/typeahead\n stays untouched. */\n .ddga-date-picker-calendar__nav-selects {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n .ddga-date-picker-calendar__select {\n appearance: none;\n -webkit-appearance: none;\n background-color: transparent;\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n margin: 0;\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-color-foreground);\n cursor: pointer;\n font-variant-numeric: tabular-nums;\n outline: none;\n text-align: center;\n text-align-last: center;\n max-inline-size: 100%;\n }\n .ddga-date-picker-calendar__select:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-picker-calendar__select:focus-visible {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n /* Native option elements pick up the OS theme; can't fully style them, but\n ensure the popup respects RTL on supporting browsers. */\n .ddga-date-picker-calendar__select option {\n color: CanvasText;\n background-color: Canvas;\n }\n .ddga-date-picker-calendar__year-select {\n /* The year string is short (4 digits) — give it just enough width. */\n min-inline-size: 4.5ch;\n }\n\n .ddga-date-picker-calendar__grid {\n inline-size: 100%;\n border-collapse: collapse;\n }\n\n .ddga-date-picker-calendar__weekday {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-tertiary);\n text-align: center;\n }\n\n /* CalendarCell renders the inner role=\"button\" div; react-aria wires the\n <td>. Style the inner element so the focus ring + selected background\n stay inside the cell footprint. Flex column so a secondary day number\n (when `showSecondaryCalendar` is on) stacks neatly under the primary. */\n .ddga-date-picker-calendar__cell {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n padding: 0;\n text-align: center;\n font-size: var(--ddga-font-size-sm);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n outline: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* Today ring — visible whenever a cell represents \"today\" in the displayed\n calendar (react-aria emits data-today). Inset to stay inside the cell;\n selected wins by re-painting the background. */\n .ddga-date-picker-calendar__cell[data-today]:not([data-selected]) {\n box-shadow: inset 0 0 0 1.5px var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n\n /* Dual-calendar layout: the primary day stays at the normal size; the\n secondary (alternate calendar) renders below at ~70% size in the muted\n text color. Selected state inherits the contrast color for both. */\n .ddga-date-picker-calendar__cell-primary {\n font-size: inherit;\n line-height: 1;\n }\n .ddga-date-picker-calendar__cell-secondary {\n margin-block-start: 1px;\n font-size: 0.625rem;\n line-height: 1;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-picker-calendar__cell[data-selected] .ddga-date-picker-calendar__cell-secondary {\n color: inherit;\n opacity: 0.85;\n }\n .ddga-date-picker-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-picker-calendar__cell[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-picker-calendar__cell[data-selected] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-picker-calendar__cell[data-disabled],\n .ddga-date-picker-calendar__cell[data-unavailable] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* Outside-month cells are fully clickable in react-aria — selecting one\n navigates the visible month forward/back. Use a softer text color (no\n opacity reduction) so they read as low-emphasis-but-active peers, not\n disabled. Hover/focus rules above continue to apply because we don't\n scope them to \"inside month only\". */\n .ddga-date-picker-calendar__cell[data-outside-month] {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger,\n .ddga-date-picker-toggle__button {\n transition: none;\n }\n .ddga-date-picker-popover[data-entering],\n .ddga-date-picker-popover[data-exiting] {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger,\n .ddga-date-picker-popover {\n border: 1px solid CanvasText;\n }\n .ddga-date-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-picker-calendar__cell[data-selected] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-date-picker-calendar__cell[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-date-picker-toggle__button[data-active] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n","@layer ddga-components {\n /* Size lives on the root (.ddga-breadcrumb--{sm,md}). All descendant\n selectors cascade from there. Logical properties handle the RTL flip\n for spacing; the separator chevron flips via `[dir='rtl'] transform`\n because chevrons are visual-direction glyphs that CSS logical\n properties don't auto-mirror. */\n\n /* ─── Root (nav) ─── */\n\n .ddga-breadcrumb {\n color: var(--ddga-text-secondary);\n font-family: inherit;\n line-height: 1.4;\n }\n\n /* ─── List (ol) ─── */\n\n .ddga-breadcrumb__list {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n /* Spacing between items + separator handled at item level via gap so\n wrapped lines stay readable. */\n gap: var(--ddga-space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n }\n\n /* ─── Item (li) ─── */\n\n .ddga-breadcrumb__item {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Link (a) ─── */\n\n .ddga-breadcrumb__link {\n color: var(--ddga-text-secondary);\n text-decoration: none;\n border-radius: var(--ddga-radius-sm);\n transition: color 150ms ease;\n }\n\n .ddga-breadcrumb__link:hover {\n color: var(--ddga-text-primary);\n text-decoration: underline;\n text-underline-offset: 2px;\n }\n\n .ddga-breadcrumb__link:focus-visible {\n outline: none;\n color: var(--ddga-text-primary);\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Page (current) ─── */\n\n .ddga-breadcrumb__page {\n color: var(--ddga-text-primary);\n font-weight: 500;\n }\n\n /* ─── Separator (li, decorative) ─── */\n\n .ddga-breadcrumb__separator {\n display: inline-flex;\n align-items: center;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-breadcrumb__separator > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* RTL flip — chevron's geometry encodes direction. Only target the icon\n (and any other svg child) so consumer-supplied custom separators (`/`,\n `·`) that aren't direction-encoded stay un-flipped. */\n [dir='rtl'] .ddga-breadcrumb__separator > svg {\n transform: scaleX(-1);\n }\n\n /* ─── Ellipsis ─── */\n\n .ddga-breadcrumb__ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5em;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-breadcrumb__ellipsis > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-breadcrumb--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-breadcrumb--md {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-breadcrumb__link {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-breadcrumb__link {\n color: LinkText;\n }\n .ddga-breadcrumb__link:hover {\n color: LinkText;\n }\n .ddga-breadcrumb__link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-breadcrumb__page {\n color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Self-contained KPI tile: owns its surface (padding/border/bg/radius) so\n `<Stat>` renders a complete tile with no Card wrapper. `max-inline-size`\n keeps a single tile from stretching full-width; inside a grid/flex the\n container controls sizing. Logical properties keep it RTL-safe; numbers\n stay LTR via Latin digits. Sentiment color flows through\n --ddga-stat-change-color. The --ddga-color-card/-border/-success/-error\n tokens (surface + change row) adapt automatically in dark mode, but the\n -50/-100 badge tints are raw palette tokens that don't, so they get\n explicit [data-theme='dark'] overrides (below). */\n\n .ddga-stat {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n max-inline-size: 20rem;\n padding: var(--ddga-space-5);\n background-color: var(--ddga-color-card);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n color: var(--ddga-color-card-foreground);\n }\n\n /* ─── Variants ─── */\n /* flat = the base surface (border + neutral badge). elevated/accent below. */\n\n .ddga-stat--elevated {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-stat--elevated .ddga-stat__icon {\n inline-size: 2.5rem;\n block-size: 2.5rem;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-600);\n color: var(--ddga-color-primary-foreground);\n }\n\n .ddga-stat--accent {\n /* Edge bar + tinted badge color, keyed off the resolved sentiment\n (data-sentiment on the root). Defaults to brand when no sentiment. */\n --ddga-stat-accent-fg: var(--ddga-sa-600);\n --ddga-stat-accent-bg: var(--ddga-sa-50);\n border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n }\n .ddga-stat--accent[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-600);\n --ddga-stat-accent-bg: var(--ddga-success-50);\n }\n .ddga-stat--accent[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-600);\n --ddga-stat-accent-bg: var(--ddga-error-50);\n }\n .ddga-stat--accent[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-600);\n --ddga-stat-accent-bg: var(--ddga-gray-100);\n }\n .ddga-stat--accent .ddga-stat__icon {\n background-color: var(--ddga-stat-accent-bg);\n color: var(--ddga-stat-accent-fg);\n }\n\n /* ─── Dark mode ─── */\n /* The -50/-100 badge tints are raw palette tokens (identical in dark) and read\n near-white on a dark card. Use translucent fills + lighter foregrounds\n (mirrors alert.css / empty-state.css). The change-row colors already adapt\n via the semantic --ddga-color-* tokens, and the elevated brand badge\n (--ddga-sa-600) stays legible in dark, so neither needs an override. */\n\n [data-theme='dark'] .ddga-stat--flat .ddga-stat__icon {\n background-color: rgb(255 255 255 / 0.08);\n color: var(--ddga-gray-300, #d2d6db);\n }\n [data-theme='dark'] .ddga-stat--accent {\n --ddga-stat-accent-fg: var(--ddga-sa-300, #7ed3a8);\n --ddga-stat-accent-bg: rgb(37 147 95 / 0.18);\n }\n [data-theme='dark'] .ddga-stat--accent[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-200, #abefc6);\n --ddga-stat-accent-bg: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] .ddga-stat--accent[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-200, #fecdca);\n --ddga-stat-accent-bg: rgb(217 45 32 / 0.18);\n }\n [data-theme='dark'] .ddga-stat--accent[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-300, #d2d6db);\n --ddga-stat-accent-bg: rgb(255 255 255 / 0.08);\n }\n\n .ddga-stat__label-row {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n }\n\n .ddga-stat__label {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n text-transform: uppercase;\n /* Tracked caps read as \"professional\" in LTR. Reset in RTL — letter-spacing\n breaks Arabic cursive joining; uppercase is a harmless no-op on Arabic. */\n letter-spacing: 0.06em;\n }\n [dir='rtl'] .ddga-stat__label {\n letter-spacing: normal;\n }\n\n .ddga-stat__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2.25rem;\n block-size: 2.25rem;\n border-radius: var(--ddga-radius-md);\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-600);\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-stat__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-stat__value {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-2xl);\n font-weight: var(--ddga-font-weight-semibold);\n /* tight leading for the large single-line numeric */\n line-height: 1.2;\n letter-spacing: -0.01em;\n /* Align digits across a grid of tiles. */\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-stat__change-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n .ddga-stat__change {\n --ddga-stat-change-color: var(--ddga-text-secondary);\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-stat-change-color);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n font-variant-numeric: tabular-nums;\n }\n .ddga-stat__change--positive {\n --ddga-stat-change-color: var(--ddga-color-success);\n }\n .ddga-stat__change--negative {\n --ddga-stat-change-color: var(--ddga-color-error);\n }\n /* Same as the default — kept explicit so the three sentiment modifiers are\n symmetric and `--neutral` is a stable override hook. */\n .ddga-stat__change--neutral {\n --ddga-stat-change-color: var(--ddga-text-secondary);\n }\n\n .ddga-stat__change-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* caret slightly smaller than the change text for hierarchy */\n font-size: 0.85em;\n }\n .ddga-stat__change-icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-stat__change-label {\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Sizes (scale padding + value; lg also opens the root gap) ─── */\n .ddga-stat--sm {\n padding: var(--ddga-space-4);\n }\n .ddga-stat--sm .ddga-stat__value {\n font-size: var(--ddga-font-size-xl);\n }\n .ddga-stat--lg {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6);\n }\n .ddga-stat--lg .ddga-stat__value {\n font-size: var(--ddga-font-size-3xl);\n }\n\n /* ─── StatGroup (layout parent for Stat tiles) ─── */\n\n .ddga-stat-group {\n --ddga-stat-group-gap: var(--ddga-space-4);\n }\n .ddga-stat-group--gap-sm {\n --ddga-stat-group-gap: var(--ddga-space-3);\n }\n .ddga-stat-group--gap-md {\n --ddga-stat-group-gap: var(--ddga-space-4);\n }\n .ddga-stat-group--gap-lg {\n --ddga-stat-group-gap: var(--ddga-space-6);\n }\n\n .ddga-stat-group--horizontal {\n display: grid;\n gap: var(--ddga-stat-group-gap);\n grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));\n }\n .ddga-stat-group--horizontal.ddga-stat-group--cols {\n grid-template-columns: repeat(var(--ddga-stat-group-columns), minmax(0, 1fr));\n }\n /* Fixed columns collapse on narrow screens so content isn't crushed. */\n @media (max-width: 40rem) {\n .ddga-stat-group--horizontal.ddga-stat-group--cols {\n grid-template-columns: 1fr;\n }\n }\n\n .ddga-stat-group--vertical {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-stat-group-gap);\n }\n\n /* Inside a group, tiles fill their slot — release the standalone cap. */\n .ddga-stat-group .ddga-stat {\n max-inline-size: none;\n }\n\n /* ─── Forced colors ─── */\n @media (forced-colors: active) {\n /* Badge backgrounds flatten to Canvas; a border keeps the badge visible. */\n .ddga-stat__icon {\n border: 1px solid CanvasText;\n }\n .ddga-stat--accent {\n border-inline-start-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n .ddga-skeleton {\n display: block;\n background-color: var(--ddga-gray-200);\n border-radius: var(--ddga-radius-md);\n position: relative;\n overflow: hidden;\n }\n\n /* ─── Shapes ─── */\n\n .ddga-skeleton--text {\n width: 100%;\n height: 1em;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-skeleton--rectangle {\n width: 100%;\n height: 40px;\n }\n\n .ddga-skeleton--circle {\n width: 40px;\n height: 40px;\n border-radius: var(--ddga-radius-full);\n }\n\n /* ─── Animations ─── */\n\n .ddga-skeleton--pulse {\n animation: ddga-skeleton-pulse 1.5s ease-in-out infinite;\n }\n\n @keyframes ddga-skeleton-pulse {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0.55;\n }\n }\n\n /* Wave: a translucent gradient sweeps across the surface using a\n pseudo-element so it doesn't interfere with the consumer's content. */\n .ddga-skeleton--wave::after {\n content: '';\n position: absolute;\n inset: 0;\n transform: translateX(-100%);\n background-image: linear-gradient(\n 90deg,\n transparent,\n color-mix(in srgb, var(--ddga-color-background) 60%, transparent),\n transparent\n );\n animation: ddga-skeleton-wave 1.6s linear infinite;\n }\n\n @keyframes ddga-skeleton-wave {\n 100% {\n transform: translateX(100%);\n }\n }\n\n /* RTL: sweep direction follows reading direction so the shimmer feels native. */\n [dir='rtl'] .ddga-skeleton--wave::after {\n transform: translateX(100%);\n animation-name: ddga-skeleton-wave-rtl;\n }\n\n @keyframes ddga-skeleton-wave-rtl {\n 100% {\n transform: translateX(-100%);\n }\n }\n\n .ddga-skeleton--none {\n animation: none;\n }\n\n .ddga-skeleton--none::after {\n display: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--pulse,\n .ddga-skeleton--wave::after {\n animation: none;\n }\n }\n}\n","@layer ddga-components {\n /* Cross-browser styled scroll container (Radix ScrollArea). The Root clips;\n the viewport scrolls; custom scrollbars overlay the end edges. Logical\n properties keep it RTL-correct — Radix moves the vertical scrollbar to the\n inline-start edge based on `dir`. The consumer sets the bounding size\n (height / max-height) on the Root; without it nothing scrolls. */\n\n .ddga-scroll-area {\n --ddga-scroll-area-size: 0.625rem;\n --ddga-scroll-area-thumb: var(--ddga-gray-400);\n --ddga-scroll-area-thumb-hover: var(--ddga-gray-500);\n\n position: relative;\n overflow: hidden;\n }\n\n .ddga-scroll-area__viewport {\n block-size: 100%;\n inline-size: 100%;\n border-radius: inherit;\n }\n .ddga-scroll-area__viewport:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n\n /* ─── Scrollbar ─── */\n\n .ddga-scroll-area__scrollbar {\n display: flex;\n padding: 2px;\n background: transparent;\n touch-action: none;\n user-select: none;\n transition: opacity 160ms ease;\n }\n .ddga-scroll-area__scrollbar[data-orientation='vertical'] {\n inline-size: var(--ddga-scroll-area-size);\n }\n .ddga-scroll-area__scrollbar[data-orientation='horizontal'] {\n flex-direction: column;\n block-size: var(--ddga-scroll-area-size);\n }\n\n .ddga-scroll-area__thumb {\n position: relative;\n flex: 1;\n background-color: var(--ddga-scroll-area-thumb);\n border-radius: var(--ddga-radius-full);\n }\n /* 44px minimum pointer hit target (Radix-recommended ::before trick). */\n .ddga-scroll-area__thumb::before {\n content: '';\n position: absolute;\n inset-block-start: 50%;\n inset-inline-start: 50%;\n transform: translate(-50%, -50%);\n min-inline-size: 44px;\n min-block-size: 44px;\n }\n .ddga-scroll-area__thumb:hover {\n background-color: var(--ddga-scroll-area-thumb-hover);\n }\n\n .ddga-scroll-area__corner {\n background: transparent;\n }\n\n /* ─── Dark mode ─── */\n /* Neutral gray thumbs read too dark on a dark page; use translucent white. */\n [data-theme='dark'] .ddga-scroll-area {\n --ddga-scroll-area-thumb: rgb(255 255 255 / 0.2);\n --ddga-scroll-area-thumb-hover: rgb(255 255 255 / 0.3);\n }\n\n /* ─── Forced colors ─── */\n @media (forced-colors: active) {\n .ddga-scroll-area__thumb {\n background-color: CanvasText;\n border: 1px solid CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n @media (prefers-reduced-motion: reduce) {\n .ddga-scroll-area__scrollbar {\n transition: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Panel (Content) ─── */\n\n .ddga-popover {\n position: relative;\n /* Generic interactive surface — mirrors the dropdown panel, not the dark\n tooltip pill (popovers hold readable rich content). */\n max-inline-size: 20rem;\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n font-family: inherit;\n line-height: 1.5;\n overflow-wrap: anywhere;\n /* Above page content; below modals (which use higher z-indexes). */\n z-index: 50;\n outline: none;\n }\n\n /* ─── Sizes ─── */\n\n .ddga-popover--sm {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n\n .ddga-popover--md {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Arrow ─── */\n /* The SVG triangle is filled with the panel background, so on a light theme\n it is white-on-white and only nicks the panel border. We border its two\n outward slants with drop-shadows. KEY DETAIL: Radix wraps the arrow svg in\n a span it rotates per side (180deg below, ±90deg beside), and a CSS filter\n runs in the element's *local* space — before that wrapper rotation. So in\n local space the apex always points the same way (down, toward 15,10 in the\n \"0 0 30 10\" viewBox), regardless of which side the popover lands on. One\n filter casting two shadows toward that local apex therefore borders the two\n visible slants correctly for every side — no data-side rules, and the apex\n and base stay where the SVG draws them (sharp tip, base merges into the\n panel border). Border color adapts to the theme. */\n\n .ddga-popover__arrow {\n fill: var(--ddga-color-background);\n filter: drop-shadow(-1px 1px 0 var(--ddga-color-border))\n drop-shadow(1px 1px 0 var(--ddga-color-border));\n }\n\n /* ─── Close (corner X — mirrors ddga-modal__close) ─── */\n\n .ddga-popover__close {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n inline-size: 1.75rem;\n block-size: 1.75rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-popover__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n\n .ddga-popover__close:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n\n .ddga-popover__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-popover[data-state='open'] {\n animation: ddga-popover-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-popover[data-state='closed'] {\n animation: ddga-popover-out 80ms ease-in;\n }\n\n /* Direction-neutral fade+scale — no translate, so it reads correctly whether\n Radix places the panel above, below, or beside the trigger (data-side). */\n @keyframes ddga-popover-in {\n from {\n opacity: 0;\n transform: scale(0.96);\n }\n to {\n opacity: 1;\n transform: scale(1);\n }\n }\n @keyframes ddga-popover-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-popover {\n animation-duration: 0ms;\n }\n }\n\n /* Dark mode: surface uses semantic --ddga-color-* + --ddga-text-* tokens,\n which remap in dark.css — no override needed. */\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-popover {\n border: 1px solid CanvasText;\n }\n .ddga-popover__close:focus-visible {\n outline: 2px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n custom properties so consumers override per instance. Logical properties\n keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n .ddga-sidebar-wrapper {\n --ddga-sidebar-width: 16rem;\n --ddga-sidebar-width-icon: 3.5rem;\n\n display: flex;\n min-block-size: 100%;\n inline-size: 100%;\n }\n\n /* ─── Container ─── */\n\n .ddga-sidebar {\n display: flex;\n flex-direction: column;\n flex: none;\n inline-size: var(--ddga-sidebar-width);\n block-size: 100%;\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border-inline-end: 1px solid var(--ddga-color-border);\n /* Shared easing + duration for the whole collapse so width, paddings and\n fades stay in lockstep (Material standard ease). */\n transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n will-change: inline-size;\n overflow: hidden;\n }\n\n /* side=end → border on the opposite logical edge and order after the inset. */\n .ddga-sidebar[data-side='end'] {\n order: 1;\n border-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n }\n\n /* Collapsed icon rail. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n inline-size: var(--ddga-sidebar-width-icon);\n }\n\n /* Offcanvas collapse fully hides on desktop. */\n .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n inline-size: 0;\n border-inline: 0;\n }\n\n /* ─── Variants ─── */\n\n .ddga-sidebar[data-variant='floating'] {\n margin: var(--ddga-space-2);\n block-size: auto;\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-md);\n }\n\n .ddga-sidebar[data-variant='inset'] {\n border-inline-end: 0;\n background-color: transparent;\n }\n\n /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n .ddga-sidebar--mobile {\n inline-size: var(--ddga-sidebar-width);\n max-inline-size: 85vw;\n display: flex;\n flex-direction: column;\n }\n\n /* ─── Inset (main content region) ─── */\n\n .ddga-sidebar-inset {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n flex-direction: column;\n }\n\n /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n inset card styling is opt-in via a modifier the consumer adds, OR scope by\n wrapper. Keep it simple: provide the card look on a data hook. */\n .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n margin: var(--ddga-space-2);\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n box-shadow: var(--ddga-shadow-sm);\n overflow: hidden;\n }\n\n /* ─── Trigger / Rail ─── */\n\n .ddga-sidebar__trigger {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__trigger:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__trigger > svg {\n inline-size: 1.125rem;\n block-size: 1.125rem;\n }\n\n .ddga-sidebar__rail {\n position: absolute;\n inset-block: 0;\n inset-inline-end: 0;\n inline-size: 0.75rem;\n transform: translateX(50%);\n cursor: col-resize;\n border: 0;\n background: transparent;\n }\n [dir='rtl'] .ddga-sidebar__rail {\n transform: translateX(-50%);\n }\n\n /* ─── Header / Content / Footer / Separator ─── */\n\n .ddga-sidebar__header,\n .ddga-sidebar__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-sidebar__content {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n overflow-x: hidden;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: var(--ddga-space-2);\n border: 0;\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Group ─── */\n\n .ddga-sidebar__group {\n position: relative;\n display: flex;\n flex-direction: column;\n padding: var(--ddga-space-2);\n transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n\n .ddga-sidebar__group-label {\n display: flex;\n align-items: center;\n block-size: 1.75rem;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n white-space: nowrap;\n overflow: hidden;\n transition:\n block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n opacity 150ms ease;\n }\n /* Protect Arabic letter joining — no tracking, no uppercasing. */\n [dir='rtl'] .ddga-sidebar__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-sidebar__group-action {\n position: absolute;\n inset-block-start: var(--ddga-space-2);\n inset-inline-end: var(--ddga-space-2);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__group-action:hover {\n background-color: var(--ddga-color-muted);\n }\n\n /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n Group label collapses its height (and fades); group action + badge fade.\n The sub-menu list is the only hard hide (it's replaced by the Popover\n flyout when collapsed, so animating it adds no value). */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n block-size: 0;\n margin-block: 0;\n padding-block: 0;\n opacity: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n opacity: 0;\n pointer-events: none;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n display: none;\n }\n\n /* ─── Menu ─── */\n\n .ddga-sidebar__menu {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-item {\n position: relative;\n }\n\n .ddga-sidebar__menu-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n min-inline-size: 0;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-md);\n background: transparent;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n overflow: hidden;\n white-space: nowrap;\n /* background/color ease for hover + active feedback; padding-inline shares\n the collapse easing so the icon glides to centre in lockstep with width. */\n transition:\n background-color 120ms ease,\n color 120ms ease,\n padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n }\n .ddga-sidebar__menu-button > svg {\n flex: none;\n inline-size: 1.125rem;\n block-size: 1.125rem;\n color: var(--ddga-text-secondary);\n transition: color 120ms ease;\n }\n /* Everything after the leading icon (label, trailing chevron, inline badge)\n fades on collapse rather than snapping out. */\n .ddga-sidebar__menu-button > *:not(:first-child) {\n transition: opacity 150ms ease;\n }\n .ddga-sidebar__menu-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-button:active {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-button[data-active='true'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-button[data-active='true'] > svg {\n color: var(--ddga-color-primary);\n }\n\n .ddga-sidebar__menu-button--sm {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-sidebar__menu-button--lg {\n padding-block: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n that would snap it to the centre of the still-wide box, then swoop inward).\n Instead the parent content/group padding animates to 0 and the button's own\n inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n icon travel is a few px, fully in sync with the width, so no glitch. The\n label/chevron/badge fade via the base opacity transition above. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group {\n padding-inline: 0;\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n }\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n .ddga-sidebar__menu-button\n > *:not(:first-child) {\n opacity: 0;\n }\n\n /* Collapsed rail: center header/footer content and clip overflow so a wide\n brand/label doesn't spill past the rail edge. */\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n align-items: center;\n }\n\n /* ─── Menu action / badge / skeleton ─── */\n\n .ddga-sidebar__menu-action {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-1);\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1.5rem;\n block-size: 1.5rem;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n }\n .ddga-sidebar__menu-action:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-sidebar__menu-action:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-sidebar__menu-action[data-show-on-hover] {\n opacity: 0;\n }\n .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n opacity: 1;\n }\n\n .ddga-sidebar__menu-badge {\n position: absolute;\n inset-block-start: 50%;\n inset-inline-end: var(--ddga-space-2);\n transform: translateY(-50%);\n pointer-events: none;\n min-inline-size: 1.25rem;\n block-size: 1.25rem;\n padding-inline: var(--ddga-space-1);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n }\n\n .ddga-sidebar__menu-skeleton {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 2rem;\n padding-inline: var(--ddga-space-2);\n }\n .ddga-sidebar__menu-skeleton-text {\n flex: 1 1 auto;\n max-inline-size: 12rem;\n }\n\n /* ─── Sub-menu ─── */\n\n .ddga-sidebar__menu-sub {\n list-style: none;\n margin: 0;\n margin-inline-start: var(--ddga-space-3);\n padding-inline-start: var(--ddga-space-2);\n border-inline-start: 1px solid var(--ddga-color-border);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-sidebar__menu-sub-button {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-sidebar__menu-sub-button:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-sidebar__menu-sub-button:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n .ddga-sidebar__menu-sub-button[data-active='true'] {\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-sidebar__menu-sub-button--sm {\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-sidebar {\n border-color: CanvasText;\n }\n .ddga-sidebar__menu-button[data-active='true'],\n .ddga-sidebar__menu-button:hover {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-sidebar__separator,\n .ddga-sidebar__menu-sub {\n background-color: CanvasText;\n border-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-sidebar,\n .ddga-sidebar__content,\n .ddga-sidebar__group,\n .ddga-sidebar__group-label,\n .ddga-sidebar__group-action,\n .ddga-sidebar__menu-button,\n .ddga-sidebar__menu-button > svg,\n .ddga-sidebar__menu-button > *,\n .ddga-sidebar__menu-badge,\n .ddga-sidebar__menu-sub-button {\n transition: none;\n }\n }\n}\n","@layer ddga-components {\n /* Centered placeholder for empty / no-results / error / success states.\n Tints flow through custom properties so dark mode + per-instance\n recoloring are one-line overrides. Logical properties keep it RTL-correct;\n the layout is centered so it is largely direction-agnostic anyway. */\n\n .ddga-empty-state {\n --ddga-empty-state-media-size: 3.5rem;\n --ddga-empty-state-icon-size: 1.75rem;\n /* Neutral tint shared by the default + search variants. */\n --ddga-empty-state-tint-bg: var(--ddga-gray-100);\n --ddga-empty-state-tint-fg: var(--ddga-gray-600);\n\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n gap: var(--ddga-space-4);\n max-inline-size: 28rem;\n margin-inline: auto;\n padding-block: var(--ddga-space-8);\n padding-inline: var(--ddga-space-4);\n color: var(--ddga-text-primary);\n }\n\n .ddga-empty-state__media {\n display: flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: var(--ddga-empty-state-media-size);\n block-size: var(--ddga-empty-state-media-size);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-empty-state-tint-bg);\n color: var(--ddga-empty-state-tint-fg);\n }\n\n .ddga-empty-state__media > svg {\n inline-size: var(--ddga-empty-state-icon-size);\n block-size: var(--ddga-empty-state-icon-size);\n }\n\n .ddga-empty-state__title {\n margin: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n }\n\n .ddga-empty-state__description {\n margin: 0;\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n }\n\n .ddga-empty-state__actions {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-3);\n margin-block-start: var(--ddga-space-2);\n }\n\n /* ─── Variant tints ─── */\n /* default + search inherit the neutral gray tint from the base. */\n\n .ddga-empty-state--error {\n --ddga-empty-state-tint-bg: var(--ddga-error-50);\n --ddga-empty-state-tint-fg: var(--ddga-error-600);\n }\n\n .ddga-empty-state--success {\n --ddga-empty-state-tint-bg: var(--ddga-success-50);\n --ddga-empty-state-tint-fg: var(--ddga-success-600);\n }\n\n /* ─── Sizes ─── */\n\n .ddga-empty-state--sm {\n --ddga-empty-state-media-size: 2.75rem;\n --ddga-empty-state-icon-size: 1.375rem;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-6);\n }\n .ddga-empty-state--sm .ddga-empty-state__title {\n font-size: var(--ddga-font-size-base);\n }\n .ddga-empty-state--sm .ddga-empty-state__description {\n font-size: var(--ddga-font-size-sm);\n }\n\n .ddga-empty-state--lg {\n --ddga-empty-state-media-size: 4.5rem;\n --ddga-empty-state-icon-size: 2.25rem;\n gap: var(--ddga-space-5);\n padding-block: var(--ddga-space-12);\n }\n .ddga-empty-state--lg .ddga-empty-state__title {\n font-size: var(--ddga-font-size-xl);\n }\n\n /* ─── Dark mode ─── */\n /* The -50/-100 tints read too light on a dark page; use translucent fills\n and lighter -200 foregrounds (mirrors alert.css). */\n\n [data-theme='dark'] .ddga-empty-state {\n --ddga-empty-state-tint-bg: rgb(255 255 255 / 0.08);\n --ddga-empty-state-tint-fg: var(--ddga-gray-300, #d2d6db);\n }\n [data-theme='dark'] .ddga-empty-state--error {\n --ddga-empty-state-tint-bg: rgb(217 45 32 / 0.18);\n --ddga-empty-state-tint-fg: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-empty-state--success {\n --ddga-empty-state-tint-bg: rgb(7 148 85 / 0.18);\n --ddga-empty-state-tint-fg: var(--ddga-success-200, #abefc6);\n }\n\n /* ─── Forced colors ─── */\n @media (forced-colors: active) {\n .ddga-empty-state__media {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Bar (Menubar.Root) ─── */\n\n .ddga-menubar {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n padding: var(--ddga-space-1);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n font-family: inherit;\n }\n\n /* ─── Bar trigger (File / Edit / View…) ─── */\n\n /* Shared base across variants. A transparent 1px border is reserved so the\n `outline` variant only flips border-color (no layout shift), and `default`\n stays visually borderless. */\n .ddga-menubar__trigger {\n position: relative;\n display: inline-flex;\n align-items: center;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border: 1px solid transparent;\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-md);\n font-weight: var(--ddga-font-weight-medium);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n transition:\n background-color 120ms ease,\n border-color 120ms ease,\n color 120ms ease;\n }\n\n .ddga-menubar__trigger:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n .ddga-menubar__trigger[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* ── Variant: default (flat menu-bar idiom) ── */\n\n /* SA-green underline indicator for the open menu — reserved (transparent) at\n rest so nothing shifts, animated in on open. Mirrors the Tabs active-tab\n treatment (same --ddga-color-primary accent). */\n .ddga-menubar__trigger--default::after {\n content: '';\n position: absolute;\n inset-inline: var(--ddga-space-2);\n inset-block-end: 2px;\n block-size: 2px;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n transition: background-color 120ms ease;\n }\n\n /* Radix sets data-highlighted on hover / keyboard focus → soft surface. */\n .ddga-menubar__trigger--default[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n /* data-state=open: this trigger's menu is showing → on-brand accent (green\n label + underline), kept on the muted surface so the row reads active. */\n .ddga-menubar__trigger--default[data-state='open'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-primary);\n }\n .ddga-menubar__trigger--default[data-state='open']::after {\n background-color: var(--ddga-color-primary);\n }\n\n /* ── Variant: outline (bordered button-style chip) ── */\n\n .ddga-menubar__trigger--outline {\n border-color: var(--ddga-color-border);\n }\n\n /* Hover / keyboard focus → soft surface fill (border stays neutral). */\n .ddga-menubar__trigger--outline[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n /* Open menu → SA-green border + green label (the border is the accent here,\n so no underline for this variant). */\n .ddga-menubar__trigger--outline[data-state='open'] {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* ─── Panel (Content / SubContent) ─── */\n\n .ddga-menubar-menu {\n min-inline-size: 192px;\n max-inline-size: 320px;\n padding: var(--ddga-space-1);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n surfaces feel instantaneous (this isn't a Modal). */\n .ddga-menubar-menu[data-state='open'] {\n animation: ddga-menubar-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-menubar-menu[data-state='closed'] {\n animation: ddga-menubar-menu-out 80ms ease-in;\n }\n\n @keyframes ddga-menubar-menu-in {\n from {\n opacity: 0;\n transform: translateY(-2px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateY(0) scale(1);\n }\n }\n @keyframes ddga-menubar-menu-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Sizes ─── */\n\n .ddga-menubar-menu--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-menubar-menu--md {\n font-size: var(--ddga-font-size-md);\n }\n\n /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n .ddga-menubar-menu__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: inherit;\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* Radix sets data-highlighted on the actively focused/hovered item — that's\n our only \"focus ring\" since the menu manages focus internally. */\n .ddga-menubar-menu__item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-menubar-menu__item[data-disabled] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n /* Destructive: red text and a red-tinted hover. Tracks the destructive\n family the rest of the system uses. */\n .ddga-menubar-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* Inline pieces inside the row. */\n .ddga-menubar-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n\n .ddga-menubar-menu__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n flex-shrink: 0;\n color: var(--ddga-text-secondary);\n }\n .ddga-menubar-menu__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-menubar-menu__shortcut {\n margin-inline-start: auto;\n font-size: var(--ddga-font-size-xs);\n color: var(--ddga-text-tertiary);\n letter-spacing: 0.04em;\n }\n\n /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n .ddga-menubar-menu__item--checkable {\n /* Reserve the indicator column even when unchecked so labels align. */\n padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n position: relative;\n }\n\n .ddga-menubar-menu__indicator {\n position: absolute;\n inset-inline-start: var(--ddga-space-2);\n inset-block-start: 50%;\n transform: translateY(-50%);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-color-primary);\n }\n .ddga-menubar-menu__indicator-icon {\n inline-size: 0.875em;\n block-size: 0.875em;\n }\n .ddga-menubar-menu__radio-dot {\n /* span is inline by default → inline-size/block-size are ignored. Force a\n sized inline-block so the filled circle actually renders. */\n display: inline-block;\n inline-size: 0.5em;\n block-size: 0.5em;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-menubar-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-menubar-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 1em;\n block-size: 1em;\n color: var(--ddga-text-tertiary);\n }\n\n /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n [dir='rtl'] .ddga-menubar-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Label + Separator ─── */\n\n .ddga-menubar-menu__group-label {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-tertiary);\n text-transform: uppercase;\n letter-spacing: 0.04em;\n }\n\n .ddga-menubar-menu__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n margin-inline: calc(var(--ddga-space-1) * -1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-menubar {\n border: 1px solid CanvasText;\n }\n .ddga-menubar__trigger[data-highlighted],\n .ddga-menubar__trigger[data-state='open'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-menubar__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-menubar-menu {\n border: 1px solid CanvasText;\n }\n .ddga-menubar-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-menubar-menu__separator {\n background-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-menubar__trigger,\n .ddga-menubar__trigger--default::after {\n transition: none;\n }\n .ddga-menubar-menu[data-state='open'],\n .ddga-menubar-menu[data-state='closed'] {\n animation: none;\n }\n }\n}\n","@layer ddga-components {\n /* Visual-only chronological list. Size + orientation live on the root and\n cascade via custom properties; status lives on each marker. The connector\n line is CSS-drawn via `::before` on every item except the LAST, running\n from this item's marker down (vertical) / across (horizontal) through the\n content and the gap to the next marker. Logical properties handle the RTL\n flip — no JS, no conditional classes. Marker colours use SOLID semantic\n tokens (no -50/-100 tints), so dark mode adapts on its own. */\n\n /* ─── Root (ol) ─── */\n\n .ddga-timeline {\n --ddga-timeline-node-size: 1.5rem;\n --ddga-timeline-dot-size: 0.75rem;\n --ddga-timeline-gap: var(--ddga-space-5);\n --ddga-timeline-rail-gap: var(--ddga-space-3);\n\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n color: var(--ddga-text-primary);\n font-family: inherit;\n }\n\n .ddga-timeline--vertical {\n flex-direction: column;\n gap: var(--ddga-timeline-gap);\n }\n\n .ddga-timeline--horizontal {\n flex-direction: row;\n align-items: flex-start;\n gap: var(--ddga-timeline-gap);\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-timeline--sm {\n --ddga-timeline-node-size: 1.25rem;\n --ddga-timeline-dot-size: 0.625rem;\n --ddga-timeline-gap: var(--ddga-space-4);\n --ddga-timeline-rail-gap: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-timeline--md {\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Item (li) ─── */\n\n .ddga-timeline__item {\n position: relative;\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-timeline-rail-gap);\n }\n\n .ddga-timeline--horizontal .ddga-timeline__item {\n flex: 1;\n min-inline-size: 0;\n flex-direction: column;\n }\n\n /* ─── Connector line (CSS-drawn, between siblings) ─── */\n\n .ddga-timeline--vertical .ddga-timeline__item:not(:last-child)::before {\n content: '';\n position: absolute;\n inline-size: 2px;\n /* Centre on the marker rail. */\n inset-inline-start: calc(var(--ddga-timeline-node-size) / 2 - 1px);\n /* From just below this marker down through the content + the gap to the\n next marker. */\n inset-block-start: var(--ddga-timeline-node-size);\n inset-block-end: calc(-1 * var(--ddga-timeline-gap));\n background-color: var(--ddga-color-border);\n }\n\n .ddga-timeline--horizontal .ddga-timeline__item:not(:last-child)::before {\n content: '';\n position: absolute;\n block-size: 2px;\n /* Centre on the marker rail. */\n inset-block-start: calc(var(--ddga-timeline-node-size) / 2 - 1px);\n /* From the inline-end of this marker across the gap to the next marker. */\n inset-inline-start: var(--ddga-timeline-node-size);\n inset-inline-end: calc(-1 * var(--ddga-timeline-gap));\n background-color: var(--ddga-color-border);\n }\n\n /* Completed-progress fill: a connector lights up with THIS node's status\n colour ONLY when the NEXT node is also \"reached\" (non-default — it carries\n `data-reached`). So completed→completed fills, but completed→pending stays\n neutral — exactly the Steps progress line. The `:has(+ * > [data-reached])`\n gate also guarantees a next sibling exists (so the last item never\n matches, matching the base rule's `:not(:last-child)`). Specificity is\n (0,3,1) — equal to the base connector rule and ordered AFTER it, so source\n order wins; the forced-colors override below is later still, so it wins. */\n\n .ddga-timeline__item:has(> .ddga-timeline__marker--success):has(+ * > [data-reached])::before {\n background-color: var(--ddga-color-success);\n }\n .ddga-timeline__item:has(> .ddga-timeline__marker--error):has(+ * > [data-reached])::before {\n background-color: var(--ddga-color-error);\n }\n .ddga-timeline__item:has(> .ddga-timeline__marker--warning):has(+ * > [data-reached])::before {\n background-color: var(--ddga-color-warning);\n }\n .ddga-timeline__item:has(> .ddga-timeline__marker--info):has(+ * > [data-reached])::before {\n background-color: var(--ddga-color-info);\n }\n\n /* ─── Marker (decorative node) ─── */\n\n .ddga-timeline__marker {\n /* Default node colour — overridden per status below. */\n --ddga-timeline-node-color: var(--ddga-text-tertiary);\n\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n inline-size: var(--ddga-timeline-node-size);\n block-size: var(--ddga-timeline-node-size);\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Sizes a custom icon child (1em) relative to the node. */\n font-size: calc(var(--ddga-timeline-node-size) * 0.8);\n color: var(--ddga-timeline-node-color);\n }\n\n .ddga-timeline__dot {\n inline-size: var(--ddga-timeline-dot-size);\n block-size: var(--ddga-timeline-dot-size);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-timeline-node-color);\n }\n\n /* A custom icon child fills the node box. */\n .ddga-timeline__marker > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n .ddga-timeline__marker--default {\n --ddga-timeline-node-color: var(--ddga-text-tertiary);\n }\n .ddga-timeline__marker--success {\n --ddga-timeline-node-color: var(--ddga-color-success);\n }\n .ddga-timeline__marker--error {\n --ddga-timeline-node-color: var(--ddga-color-error);\n }\n .ddga-timeline__marker--warning {\n --ddga-timeline-node-color: var(--ddga-color-warning);\n }\n .ddga-timeline__marker--info {\n --ddga-timeline-node-color: var(--ddga-color-info);\n }\n\n /* ─── Content ─── */\n\n .ddga-timeline__content {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n min-inline-size: 0;\n /* Nudge the text block to sit optically centred against the node. */\n padding-block-start: calc((var(--ddga-timeline-node-size) - 1.4em) / 2);\n }\n\n .ddga-timeline__time {\n display: block;\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.4;\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-timeline__title {\n display: block;\n color: var(--ddga-text-primary);\n font-weight: 600;\n line-height: 1.4;\n }\n\n .ddga-timeline__description {\n display: block;\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.4;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-timeline__dot {\n background-color: CanvasText;\n }\n .ddga-timeline__marker > svg {\n color: CanvasText;\n }\n .ddga-timeline .ddga-timeline__item:not(:last-child)::before {\n background-color: CanvasText;\n }\n }\n}\n"],"names":[]}