@dev-dga/css 0.10.1 → 0.11.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 (14) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/components/card.css +1 -1
  3. package/dist/components/card.css.map +1 -1
  4. package/dist/components/date-picker.css +1 -1
  5. package/dist/components/date-picker.css.map +1 -1
  6. package/dist/components/date-range-picker.css +1 -1
  7. package/dist/components/date-range-picker.css.map +1 -1
  8. package/dist/components/description-list.css +1 -1
  9. package/dist/components/description-list.css.map +1 -1
  10. package/dist/components/steps.css +1 -1
  11. package/dist/components/steps.css.map +1 -1
  12. package/dist/index.css +1 -1
  13. package/dist/index.css.map +1 -1
  14. package/package.json +2 -2
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,iBOAA,i8IOCA,g1CVAA,oOAQA,wOAQA,6OAQA,uPAQA,uPAQA,wOAQA,2OAQA,4PQzDA,0DAQA,2MAWA,wCAQA,4KAkBA,gDZ7CA,uBoBKE,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,uOAiBA,yFASA,mJASA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,qFAMA,wHAgBA,8EAGA,6HAIA,+NASA,8BACE,yCAGA,uDAGA,6F3BhSF,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,mFQ1JF,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,8DZrIF,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,2DQrJF,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,uGAOA,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,kDQzLF,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,kGAIA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,oFAMA,+GAOA,0JAQA,qHAOA,qDAMA,6DAIA,kKASA,oDAMA,uCACE,4BAOF,8BAGE,uCAGA,uFAQF,uH3BjNA,2SAgBA,kGAMA,kGAQA,sFAKA,2GAKA,iHAKA,uHAKA,2GAKA,2GAKA,kGAOA,yFAKA,+FAKA,mGAKA,mGAKA,mGAKA,0FAOA,qHAQA,oIAUA,8FAOA,+EAOA,gDAOA,0RAmBA,0DAKA,4FAIA,6FAYA,6IAKA,0GAIA,iHAIA,+GAIA,+GAIA,yGAOA,8BACE,yCQ/MF,qEAQA,6HAWA,4KAWA,+EAGA,8EAMA,oHAUA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAQA,8BACE,kGQ1FF,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,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA,kFQ1MF,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,8EQ9JF,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAYA,gGAWA,yDAIA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA,8EQnNF,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,gHF5UF,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,sEAKA,oDAOA,2IAKA,6IAQA,iFAGA,iFAMA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA,kFQ5NF,sFAQA,iIAcA,sFAQA,uIAOA,gHAMA,6HAQA,sEAOA,mGAMA,+DAQA,+DAMA,2IAQA,8DAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yCD3HF,oFAQA,oIAYA,2CAMA,sYAoBA,qGAKA,8FAOA,4JAMA,iIAOA,iFAKA,0DASA,0DAGA,mEAGA,gEAMA,8JASA,8DAOA,0KAOA,oKASA,uCACE,wCAOF,8BACE,kEAIA,qGAKA,qFEnJF,uJAUA,4EAMA,8CAOA,mVAmBA,+DAIA,oIAQA,+HAQA,4FAMA,0EAKA,qFAGA,qFAIA,qFAKA,oGAQA,kGAWA,kHAIA,oHAOA,uCACE,qGAIA,0CAOF,8BACE,8DAIA,uFRpIF,+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,uCD3BF,yIAUA,+EAMA,iDAKA,uFAWA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,wCASA,2EAIA,uCACE,iEASF,8BACE,0CE1GF,8IAQA,kCAGA,kCAGA,mCAIA,wEAGA,wEAGA,wEAGA,gFAIA,2LAcA,sMAOA,2FAUA,oHAIA,+FAWA,sHAQA,iFAGA,iFAGA,iFAGA,yFAIA,2CAIA,2DAIA,yIAMA,mFAIA,qGAMA,gLAMA,oEAMA,6OAYA,6EAGA,8FAUA,2EAGA,oIAMA,uCACE,iKAIA,+GAWF,8BACE,2CAGA,qDAGA,gFAIA,8FlDnMF,wUAgBA,mGAGA,qFAIA,iIAUA,6DAWA,2DAGA,6DAMA,wUAiBA,qFAIA,6FAOA,gFAGA,oGAKA,iHAQA,sKASA,6DAKA,+IASA,+GAMA,sQAYA,yEAIA,yJAYA,yFAIA,yHAQA,gEAMA,oQAYA,qFAIA,8DAIA,sKAYA,+IAOA,8BACE,gDAGA,2FAIA,4DAOF,uCACE,4FQnOF,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,8FAKA,gKASA,uCACE,kGAMF,8BACE,0EAIA,oFAIA,wFQrPF,+PAYA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAMA,2CAIA,kJAQA,oQAcA,sGAIA,oFAGA,sFASA,gLAcA,8IASA,mcAoBA,sEAGA,qHAMA,uEAIA,kDAKA,+DAKA,0LAYA,8aAuBA,0LASA,6DAIA,sHAMA,6FAIA,sHAGA,2FAGA,0HAIA,8HAQA,yEAMA,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA,2FQzTF,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAYA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAOA,uCACE,2CAOF,8BACE,sDAGA,4FAIA,iHAKA,mHIxKF,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA,yCASA,8BACE,oIElLF,6GAOA,iJAOA,0HAQA,4IAWA,qGAKA,qGAQA,kJAQA,qHASA,gTAcA,2CAIA,2FAOA,6EAGA,iFAGA,mGAMA,uCAGA,mEAMA,uGAOA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,wEAIA,kFjCxIF,uJAOA,uFAOA,4RAgBA,0EAIA,4EAIA,0EAOA,uMAgBA,0EAMA,4RAkBA,wFAGA,0FAIA,iGAIA,iEAOA,gHAOA,+DAGA,yHAOA,+GAOA,uCACE,6DAQF,8BACE,+CAGA,sEAIA,gFOhJF,+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,+FCxIF,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,8GAIA,kFAOF,4GAOA,iHAGA,2FAMA,8BACE,gGQzEF,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE,sDQhHF,sRAeA,yEAIA,gMAUA,8HAIA,iKAIA,6JAIA,2JAIA,2IAMA,4EAMA,+JAKA,qHAWA,kHAIA,gJAIA,8KAIA,4KAIA,0KAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAYA,kDAIA,+EAMA,0RAUA,gFAGA,8EAKA,gFAMA,0KAMA,6FAGA,2FAGA,sEAGA,kGAGA,kGAIA,sGAOA,2DAKA,4FAQA,2EAIA,qEAOA,2CAGA,oEAGA,mEAIA,qEAKA,mEAIA,kEAIA,oDAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,sOAuBA,6FAOA,iDAKA,8BAEE,sEAIA,uDAKA,kDG5UF,yUAoBA,0HAMA,4HAmBA,+JAQA,yXAoBA,0DAKA,mGAKA,4FAOA,uFAGA,yEAMA,8FAUA,uDASA,uCACE,qCAUF,8BACE,0CAGA,iErCjIF,kIAqBA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAcA,iEASA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,mIAmBA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,qVAMA,2JAGA,mHAWA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE,kRUjgBF,sLASA,mFAKA,uGAcA,kEAMA,yJAQA,iGAGA,wHAKA,uIAOA,kLASA,oFAIA,yCAMA,4GAMA,8BACE,kFAOF,uCACE,8Ce/FF,qRAiBA,0dAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,4DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAYA,oFAIA,6DAIA,qKAYA,8IAOA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA,0FN7UF,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,yFQrMF,iQAYA,sEAQA,4KAQA,2GAOA,2JAUA,qEAMA,wKAYA,+KAUA,6QAUA,8FAKA,mHAQA,oVAeA,iFAGA,4FAKA,uKASA,8DAKA,gHASA,4JAOA,6DAMA,2IASA,6fAwBA,oDAGA,6DAMA,+EAGA,kFAGA,4EAGA,+EAIA,8DAQA,+DAQA,gKAUA,iKAWA,uCACE,mEAQF,8BACE,+DAIA,uFAIA,sDGvQF,8FAYA,2GAOA,wQAcA,uGAIA,uGAIA,uGAOA,iKAQA,uKASA,+EAIA,kFAIA,yEAOA,2MAWA,oEAGA,kFAGA,sJAOA,wHAMA,oJAQA,6HAMA,+GAMA,0HAOA,gJAUA,6KAYA,uIAMA,+EAKA,8DAMA,wDAGA,wEAGA,2HAWA,8BACE,oDAGA,qMAMA,yFAGA,oGAGA,mHQlNF,oJAOA,oFAOA,qFAQA,2NAsBA,0CAIA,mDAMA,sFAcA,wUAgBA,6HAQA,gHAKA,oHAKA,oHAQA,0KAQA,+DAYA,2FAMA,iIASA,kFAGA,4IAOA,kEAIA,mGAMA,uCACE,sCAGA,uCAOF,8BACE,kDAGA,kFAIA,oDtBzLF,+MAYA,kFASA,8CAIA,gEAIA,kEAMA,yEAKA,mFAKA,iEAMA,2HAQA,6FAKA,qEAMA,sEAMA,oDAQA,4IAMA,+OAUA,uCACE,4BAOF,8BACE,wKAWA,yEQtHF,+FAAA,4FAAA,gGAAA,oGQWA,kGAOA,+BAMA,kCAIA,6HASA,wGAOA,wCAMA,wCAIA,4CAIA,sLAQA,8EAAA,8EAAA,8EASA,4DAIA,iEAMA,6HASA,mCAIA,2GAUA,8GAMA,0GAMA,0JAaA,yFAGA,mEQ3IA,oJAWA,iCAIA,mCAKA,sCAGA,gEAMA,+IAUA,iDAMA,oHAOA,kDAKA,8EAMA,kHAMA,wFAKA,yGAQA,uJAQA,mNASA,+FAKA,0GAIA,mEAMA,kNAaA,8BACE,0DAGA,iDAGA,6BTjIF,+DAOA,iJAYA,sIAMA,iHAQA,4EAKA,yFAGA,yFAQA,iDAIA,wGAQA,sGAWA,uCACE,0GAQF,8BACE,yGQpFF,oJASA,oFAOA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA,qEE7HF,+MAQA,4FAOA,4UAeA,0HAKA,4HAMA,mIAKA,sHAMA,4EAGA,4IAOA,kJAYA,oOASA,sFAGA,qIAIA,qGAIA,yHAKA,gHAQA,0TAgBA,uHAIA,qGAGA,uEAGA,6DAeA,8HAKA,mJAIA,6IAMA,0KAUA,uCACE,iDAOF,8BACE,4DAGA,kGAMA,yEAGA,+EOjMF,+HAWA,sDAMA,kEhBrBF","sources":["src/index.css","src/components/input.css","src/components/badge.css","src/components/dropdown-menu.css","src/themes.css","src/components/radio.css","src/variables.css","src/components/number-input.css","src/components/sidebar.css","src/components/textarea.css","src/components/divider.css","src/components/drawer.css","src/reset.css","src/components/switch.css","src/dark.css","src/components/rating.css","src/components/toggle.css","src/components/checkbox.css","src/components/avatar.css","src/components/combobox.css","src/components/field.css","src/components/select.css","src/components/link.css","src/components/scroll-area.css","src/components/description-list.css","src/components/timeline.css","src/components/tooltip.css","src/components/calendar.css","src/components/button.css","src/components/card.css","src/components/search-box.css","src/components/menubar.css","src/components/empty-state.css","src/components/command.css","src/components/alert.css","src/components/date-picker.css","src/components/table.css","src/components/collapsible.css","src/components/list.css","src/components/file-upload.css","src/components/stat.css","src/components/slider.css","src/components/modal.css","src/components/popover.css","src/components/input-otp.css","src/components/tag-input.css","src/components/quote.css","src/components/aspect-ratio.css","src/components/tabs.css","src/components/steps.css","src/components/accordion.css","src/components/skeleton.css","src/components/spinner.css","src/components/progress.css","src/components/date-range-picker.css","src/components/pagination.css","src/components/breadcrumb.css","src/components/toast.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/calendar.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@import './components/command.css';\n@import './components/table.css';\n@import './components/input-otp.css';\n@import './components/link.css';\n@import './components/search-box.css';\n@import './components/list.css';\n@import './components/quote.css';\n@import './components/collapsible.css';\n@import './components/tag-input.css';\n@import './components/date-range-picker.css';\n@import './components/aspect-ratio.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 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 /* ─── 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 /* ─── Dark mode adjustments ─── */\n /* The `default` and `*-subtle` families fill from raw --ddga-*-100 tints, which\n stay light in dark mode (the raw scale isn't theme-flipped) — they'd render as\n light pills with dark text on a dark page. Recolor to translucent tints + a\n light (-200) foreground so they read as dark-surface chips. Mirrors alert.css /\n button.css. Solid + outline variants use semantic tokens and adapt on their own. */\n\n [data-theme='dark'] .ddga-badge--default,\n [data-theme='dark'] .ddga-badge--secondary-subtle {\n background-color: rgb(255 255 255 / 0.1);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-badge--primary-subtle {\n background-color: rgb(27 131 84 / 0.2);\n color: var(--ddga-sa-200, #b8eacb);\n }\n [data-theme='dark'] .ddga-badge--destructive-subtle {\n background-color: rgb(217 45 32 / 0.18);\n color: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-badge--success-subtle {\n background-color: rgb(7 148 85 / 0.18);\n color: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-badge--warning-subtle {\n background-color: rgb(220 104 3 / 0.18);\n color: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-badge--info-subtle {\n background-color: rgb(21 112 239 / 0.16);\n color: var(--ddga-info-200, #b2ddff);\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 /* ─── 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-base);\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 /* Protect Arabic cursive joining — drop the tracking + casing when RTL\n (mirrors command.css). The shortcut hint is usually Latin but reset it\n too for parity. */\n [dir='rtl'] .ddga-dropdown-menu__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n [dir='rtl'] .ddga-dropdown-menu__shortcut {\n letter-spacing: normal;\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 /* ─── Dark mode ─── */\n\n /* The destructive-hover background uses the raw --ddga-error-50 tint\n (near-white), which doesn't adapt in dark mode. Override with a translucent\n red + a light-red foreground for contrast (mirrors alert.css / button.css). */\n [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: rgb(217 45 32 / 0.24);\n color: var(--ddga-error-200, #fecdca);\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","/* 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. 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",":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 /* 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.5;\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 /* 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 /* Self-sufficient full height. This must be a DEFINITE height, not a `min-`:\n the aside is `block-size:100%`, which only resolves against a definite\n parent — with a `min-block-size` the wrapper stays content-sized, the\n percentage falls back to `auto`, and the footer detaches from the viewport\n bottom (and a long nav can't scroll inside `__content`). A definite\n `100svh` makes the footer stick and the nav scroll with zero consumer\n config — no html→body→root height chain. `svh` (not `dvh`) avoids reflow as\n mobile browser chrome shows/hides. Escape hatch for an embedded/boxed shell:\n set a definite `height`/`block-size` on the provider (inline style wins),\n e.g. `<SidebarProvider style={{ blockSize: '24rem' }}>`. */\n block-size: 100svh;\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 /* Opt-in (`<SidebarInset scrollable>`): make the inset its own vertical scroll\n region. The wrapper's definite `block-size:100svh` gives the stretched inset\n a definite height, so `min-block-size:0` + `overflow-y:auto` let tall content\n scroll inside it — the sidebar + footer stay put — with NO consumer\n flex/min-block-size/overflow CSS. The whole inset scrolls (header included);\n for a fixed header with only the body scrolling, leave this off and compose a\n nested scroll region inside the inset (see the App shell story). */\n .ddga-sidebar-inset--scrollable {\n min-block-size: 0;\n overflow-y: auto;\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 /* Fill the container's inline size. In `__content`/`__group` (which keep the\n default `align-items: stretch`) this is a no-op. It matters inside a\n collapsed `__header`/`__footer`, which switch to `align-items: center` to\n centre non-menu content: without a definite width the <ul> shrinks to its\n content width — the icon-centring padding PLUS the still-in-layout\n `opacity:0` label — so it grows past the icon rail, gets centred, and is\n clipped by the aside's `overflow: hidden`, leaving only an icon sliver. A\n definite `100%` keeps the menu at the rail width so its button centres its\n icon exactly like the main nav. Logical property → RTL-safe. */\n inline-size: 100%;\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 .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\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: header/footer drop their inline padding (above) so a menu\n button inside them fills the rail and self-centres its icon EXACTLY like the\n main-nav buttons (consistency — a footer profile button must match the nav).\n `align-items: center` then centres non-stretching content (a brand/label)\n and clips overflow so a wide 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__menu-sub-button[data-active='true'],\n .ddga-sidebar__menu-sub-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 /* 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 /* ─── 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 /* ─── 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","*,\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\n/* Visually-hidden utility: removes content from the visual layout while\n keeping it in the accessibility tree (screen-reader-only text). Use for\n action cues on icon-only or label-only controls (e.g. Table sort buttons). */\n.ddga-sr-only {\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 clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n/* Shared RTL utility: horizontally mirror a directional glyph (chevrons,\n arrows) in right-to-left layouts. Opt-in per icon via the `ddga-icon-flip`\n class — components apply it only to icons whose geometry encodes direction\n (Button/Link start/end icons). Lives here, not in a component sheet, because\n it's cross-component (used by Button, Link, …). */\n[dir='rtl'] .ddga-icon-flip {\n transform: scaleX(-1);\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: var(--ddga-gray-100);\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","/* 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 /* 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 /* 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 /* 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 /* ─── 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 /* ─── Dark mode adjustments ─── */\n /* The fallback schemes paint raw -100 tints with -700/-800 text — light\n chips that stay legible but don't adapt to a dark page on their own. Flip\n each to a dark -800/-900 surface with a light -100/-200 foreground\n (mirrors alert.css). */\n\n [data-theme='dark'] .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-900);\n color: var(--ddga-sa-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-700);\n color: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-900);\n color: var(--ddga-success-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-900);\n color: var(--ddga-warning-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-900);\n color: var(--ddga-error-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-900);\n color: var(--ddga-info-200);\n }\n [data-theme='dark'] .ddga-avatar__status--offline {\n background-color: var(--ddga-gray-500);\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 .ddga-avatar-group > .ddga-avatar {\n outline: 2px solid CanvasText;\n outline-offset: -1px;\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='true' on the actively highlighted item (keyboard\n or hover) — that's the background below. The chosen value is a distinct\n concept: the component marks it with data-active='' and shows it via the\n check icon (not a background), so the highlight and the selection never\n visually collide. */\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 /* Protect Arabic cursive joining — drop the tracking when RTL. */\n [dir='rtl'] .ddga-combobox-group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\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-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-combobox-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\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","@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-8);\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 /* Styled <a> text-link primitive. Three visual variants on one axis\n (default / subtle / standalone); the `external` affordance is orthogonal\n (handled in the React layer + the __icon--external element). Size is NOT\n a variant links inherit font-size from surrounding text and scale their\n icons in `em`. Dark mode needs no overrides (semantic tokens adapt). */\n\n .ddga-link {\n color: var(--ddga-color-primary);\n font-family: inherit;\n font-size: inherit;\n border-radius: var(--ddga-radius-sm);\n text-underline-offset: 2px;\n cursor: pointer;\n transition:\n color 150ms ease,\n text-decoration-color 150ms ease;\n }\n\n .ddga-link:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── default inline prose link, always underlined ─── */\n /* Underline is permanent: color alone fails WCAG 1.4.1 for a link sitting\n inside a block of text. */\n\n .ddga-link--default {\n text-decoration: underline;\n }\n\n .ddga-link--default:hover {\n color: var(--ddga-color-primary-hover);\n }\n\n .ddga-link--default:active {\n color: var(--ddga-color-primary-active);\n }\n\n /* ─── subtle chrome link (footers, meta rows), underline on hover ─── */\n\n .ddga-link--subtle {\n color: var(--ddga-text-secondary);\n text-decoration: none;\n }\n\n .ddga-link--subtle:hover {\n color: var(--ddga-color-primary);\n text-decoration: underline;\n }\n\n .ddga-link--subtle:active {\n color: var(--ddga-color-primary-active);\n }\n\n /* ─── standalone block CTA, icon-friendly ─── */\n\n .ddga-link--standalone {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-weight: 500;\n text-decoration: none;\n }\n\n .ddga-link--standalone:hover {\n color: var(--ddga-color-primary-hover);\n text-decoration: underline;\n }\n\n .ddga-link--standalone:active {\n color: var(--ddga-color-primary-active);\n }\n\n /* ─── Icons ─── */\n\n .ddga-link__icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .ddga-link__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* Inline variants (default/subtle) don't establish a flex gap, so give icons\n breathing room from the text via logical margins (RTL-safe). standalone\n uses `gap` and needs none. */\n .ddga-link--default [data-slot='link-start-icon'],\n .ddga-link--subtle [data-slot='link-start-icon'] {\n margin-inline-end: 0.2em;\n vertical-align: middle;\n }\n\n .ddga-link--default [data-slot='link-end-icon'],\n .ddga-link--default [data-slot='link-external-icon'],\n .ddga-link--subtle [data-slot='link-end-icon'],\n .ddga-link--subtle [data-slot='link-external-icon'] {\n margin-inline-start: 0.2em;\n vertical-align: middle;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-link {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-link,\n .ddga-link--default,\n .ddga-link--subtle,\n .ddga-link--standalone {\n color: LinkText;\n }\n .ddga-link--default:hover,\n .ddga-link--subtle:hover,\n .ddga-link--standalone:hover {\n color: LinkText;\n }\n .ddga-link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\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 /* Radix wraps the viewport's children in an inline-styled `display:table` div\n so a HORIZONTAL scroll area can measure max-content width. In a vertical-only\n scroll area that wrapper instead expands past the viewport for wide content\n (e.g. a Table) — and there's no horizontal scrollbar to reach it, so columns\n get clipped (worst on mobile). For vertical orientation, force the wrapper to\n block layout: width is constrained to the viewport, and wide children shrink\n or own their own horizontal overflow (a Table scrolls inside its region).\n `!important` is required to beat Radix's inline style. Horizontal/both keep\n the table wrapper so their horizontal scroll still works. */\n .ddga-scroll-area__viewport--vertical > div {\n display: block !important;\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 /* 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 /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-description-list--divided .ddga-description-list__item {\n border-block-end-color: CanvasText;\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","@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 calendar dropdown chrome — consumed by both DatePicker and\n DateRangePicker. The field/trigger surface stays per-component\n (date-picker.css / date-range-picker.css); everything inside the popover\n (the floating panel, the Gregorian↔Hijri toggle, and the month grid) is\n identical regardless of single-date vs range selection, so it lives here. */\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 inner\n Dialog so when the calendar can't fit (short iframes, dual-calendar mode),\n the content scrolls instead of being clipped. `overflow: hidden` stays on\n the popover so the rounded corners crop animation bleed. */\n .ddga-calendar-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-calendar-popover[data-entering] {\n animation: ddga-calendar-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-calendar-popover[data-exiting] {\n animation: ddga-calendar-out 80ms ease-in;\n }\n @keyframes ddga-calendar-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-calendar-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 .ddga-calendar-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-calendar-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-calendar-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-calendar-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-calendar-toggle__button:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Calendar grid ─── */\n\n .ddga-calendar {\n inline-size: min(100%, 280px);\n }\n\n .ddga-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-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-calendar__nav:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-calendar__nav[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-calendar__nav[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* RTL chevron direction is handled in the picker components by swapping the\n icon components themselves (PrevChevron / NextChevron based on `dir`) — more\n robust than a CSS scaleX flip because it doesn't rely on the popover portal\n correctly inheriting the `dir` attribute from the DgaProvider root. */\n\n .ddga-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 /* Native <select>s give free keyboard support + native focus rings +\n screen-reader announcements; styling stays minimal so the platform's\n wheel/typeahead stays untouched. */\n .ddga-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-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-calendar__select:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-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-calendar__select option {\n color: CanvasText;\n background-color: Canvas;\n }\n .ddga-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-calendar__grid {\n inline-size: 100%;\n border-collapse: collapse;\n }\n\n .ddga-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 stay\n inside the cell footprint. Flex column so a secondary day number (when\n `showSecondaryCalendar` is on) stacks neatly under the primary. */\n .ddga-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-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 text\n color. Selected state inherits the contrast color for both. */\n .ddga-calendar__cell-primary {\n font-size: inherit;\n line-height: 1;\n }\n .ddga-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-calendar__cell[data-selected] .ddga-calendar__cell-secondary {\n color: inherit;\n opacity: 0.85;\n }\n .ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-color-muted);\n }\n .ddga-calendar__cell[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-calendar__cell[data-selected] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-calendar__cell[data-disabled],\n .ddga-calendar__cell[data-unavailable] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* Outside-month cells are fully clickable in the single picker — selecting\n one navigates the visible month. Use a softer text color (no opacity\n reduction) so they read as low-emphasis-but-active peers, not disabled. */\n .ddga-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-calendar-toggle__button {\n transition: none;\n }\n .ddga-calendar-popover[data-entering],\n .ddga-calendar-popover[data-exiting] {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-calendar-popover {\n border: 1px solid CanvasText;\n }\n .ddga-calendar__cell[data-selected] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-calendar__cell[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-calendar-toggle__button[data-active] {\n background-color: Highlight;\n color: HighlightText;\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 /* ─── FAB (floating action button) ─── */\n /*\n * Orthogonal modifier: fully-rounded + elevated. Composes with any color\n * `variant` and with `size` — `size=\"icon\"` yields a circle, a text size an\n * extended pill. Positioning is the consumer's job (see the story recipe).\n * Shadow is static (no hover lift) to keep the base transition intact; the\n * color variant's own :hover handles the interaction feedback.\n */\n .ddga-button--fab {\n border-radius: var(--ddga-radius-full);\n box-shadow: var(--ddga-shadow-lg);\n }\n /* The base `.ddga-button:focus-visible` (defined later in this file) sets\n box-shadow for the ring, which would clobber the elevation. Use a\n two-class selector so this wins on specificity regardless of source order\n (matches the `.ddga-button--inverted.ddga-button--outline` idiom), and\n render the ring AND the drop shadow together. */\n .ddga-button.ddga-button--fab:focus-visible {\n border-color: var(--ddga-color-ring);\n box-shadow:\n 0 0 0 2px var(--ddga-color-ring),\n var(--ddga-shadow-lg);\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 (`.ddga-icon-flip`) is a shared utility — it\n now lives in reset.css (ddga-base) so Link and other components can reuse\n it without depending on this sheet. */\n\n /* ─── Dark mode adjustments ─── */\n /* The destructive subtle/outline/ghost families fill from raw --ddga-error-50/\n -100 tints, which stay light in dark mode (the raw scale isn't theme-flipped).\n Recolor to translucent error tints so they read as dark-surface chips —\n mirrors alert.css. Text uses the semantic --ddga-color-destructive, which\n already adapts. */\n [data-theme='dark'] .ddga-button--destructive-subtle {\n background-color: rgb(217 45 32 / 0.18);\n }\n [data-theme='dark']\n .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: rgb(217 45 32 / 0.28);\n }\n [data-theme='dark']\n .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']),\n [data-theme='dark']\n .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: rgb(217 45 32 / 0.18);\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 /* ─── 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-block-start: 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-block-start: 0;\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-block-start: 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-block-start: 0;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-card {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n /* box-shadow + gradient are dropped in forced-colors — keep a visible\n boundary and a real focus outline so cards and their focus state survive. */\n .ddga-card {\n border: 1px solid CanvasText;\n }\n .ddga-card--interactive:focus-visible {\n outline: 2px solid CanvasText;\n outline-offset: 2px;\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 /* SearchBox is the Input control with `type=\"search\"`; it reuses input.css\n for the box, sizing, focus ring, adornments and the clear button. The\n `.ddga-search-box` class lands on the Input control element, so the inner\n field is a descendant. Only the search-specific overrides live here. */\n\n /* Suppress the browser's native search affordances — we render our own\n magnifier (leading) and clear button (trailing). Without this, WebKit\n paints a second × inside the field. */\n .ddga-search-box .ddga-input__field::-webkit-search-cancel-button,\n .ddga-search-box .ddga-input__field::-webkit-search-decoration,\n .ddga-search-box .ddga-input__field::-webkit-search-results-button,\n .ddga-search-box .ddga-input__field::-webkit-search-results-decoration {\n appearance: none;\n display: none;\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-base);\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-base);\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 /* Protect Arabic cursive joining — drop the tracking + casing when RTL\n (mirrors dropdown-menu.css / command.css). The shortcut hint is usually\n Latin but reset it too for parity. */\n [dir='rtl'] .ddga-menubar-menu__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n [dir='rtl'] .ddga-menubar-menu__shortcut {\n letter-spacing: normal;\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 /* ─── Dark mode ─── */\n\n /* The destructive-hover background uses the raw --ddga-error-50 tint\n (near-white), which doesn't adapt in dark mode. Override with a translucent\n red + a light-red foreground for contrast (mirrors dropdown-menu.css). */\n [data-theme='dark'] .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n background-color: rgb(217 45 32 / 0.24);\n color: var(--ddga-error-200, #fecdca);\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 /* 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 /* ─── Root (cmdk container) ─── */\n /*\n * Base look is the standalone inline box (bordered card). Inside\n * CommandDialog the `--dialog` modifier drops the border/bg because the\n * dialog shell owns the surface.\n */\n .ddga-command {\n display: flex;\n flex-direction: column;\n inline-size: 100%;\n min-block-size: 0;\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 overflow: hidden;\n }\n\n .ddga-command--dialog {\n border: 0;\n border-radius: 0;\n background-color: transparent;\n }\n\n /* ─── Search input row ─── */\n\n .ddga-command__input-wrapper {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-command__search-icon {\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-command__input {\n flex: 1 1 auto;\n min-inline-size: 0;\n padding-block: var(--ddga-space-3);\n border: 0;\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-command__input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── List + states ─── */\n\n .ddga-command__list {\n flex: 1 1 auto;\n min-block-size: 0;\n /* Cap height for the inline surface; the dialog overrides via its own\n max-block-size. cmdk scroll-into-view drives against this container. */\n max-block-size: min(360px, 60vh);\n overflow-y: auto;\n overflow-x: hidden;\n padding: var(--ddga-space-1);\n scroll-padding-block: var(--ddga-space-1);\n }\n\n .ddga-command__empty {\n padding-block: var(--ddga-space-5);\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 /* ─── Group + separator ─── */\n\n .ddga-command__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 /* Protect Arabic cursive joining — drop the tracking when RTL. */\n [dir='rtl'] .ddga-command__group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-command__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Item ─── */\n\n .ddga-command__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-2);\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 /* cmdk highlights the active item (keyboard / hover) via data-selected. */\n .ddga-command__item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-command__item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-command__item-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n .ddga-command__item-icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n\n .ddga-command__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 /* Shortcut hint sits at the inline-end (logical → RTL-correct). */\n .ddga-command__item-shortcut {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: var(--ddga-font-size-xs);\n letter-spacing: 0.05em;\n color: var(--ddga-text-tertiary);\n }\n [dir='rtl'] .ddga-command__item-shortcut {\n letter-spacing: normal;\n }\n\n /* ─── Dialog shell (Radix Dialog) ─── */\n\n .ddga-command__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-command-dialog {\n /* Spotlight-style: horizontally centered, anchored near the top. Physical\n left + translateX for centering (direction-agnostic; pairing\n inset-inline-start with a physical translate would shift it off-screen\n in RTL — same rationale as Modal). */\n position: fixed;\n inset-block-start: 12vh;\n left: 50%;\n transform: translateX(-50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n inline-size: min(var(--ddga-command-dialog-width, 640px), calc(100vw - 2rem));\n max-block-size: min(70vh, 480px);\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 overflow: hidden;\n animation-duration: 180ms;\n animation-timing-function: ease;\n }\n /* The inner cmdk root + its list fill the dialog and scroll inside it. */\n .ddga-command-dialog .ddga-command {\n min-block-size: 0;\n }\n .ddga-command-dialog .ddga-command__list {\n max-block-size: none;\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-command__overlay[data-state='open'] {\n animation-name: ddga-command-overlay-in;\n }\n .ddga-command__overlay[data-state='closed'] {\n animation-name: ddga-command-overlay-out;\n }\n .ddga-command-dialog[data-state='open'] {\n animation-name: ddga-command-dialog-in;\n }\n .ddga-command-dialog[data-state='closed'] {\n animation-name: ddga-command-dialog-out;\n }\n\n @keyframes ddga-command-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-command-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes ddga-command-dialog-in {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n }\n @keyframes ddga-command-dialog-out {\n from {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-command__overlay,\n .ddga-command-dialog {\n animation-duration: 0ms;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-command,\n .ddga-command-dialog {\n border: 1px solid CanvasText;\n }\n .ddga-command__item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-command__separator {\n background-color: CanvasText;\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 /* DatePicker field/trigger chrome only. The calendar dropdown (popover,\n toggle, month grid) is shared with DateRangePicker — see calendar.css.\n Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. */\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 for\n 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 show\n the focus background even if Tab lands on them — react-aria marks them with\n 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 /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger {\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__segment[data-focused] {\n forced-color-adjust: none;\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* Semantic <table> compound. Density/zebra/borders cascade from the root\n (.ddga-table) to leaf parts via descendant selectors. Logical properties\n throughout, with one [dir='rtl'] override for the selected-row accent\n stripe (box-shadow insets are physical). Sort carets are vertical (not\n mirrored). */\n\n /* ─── Scroll region ─── */\n\n .ddga-table__region {\n inline-size: 100%;\n /* Horizontal scroll for wide tables. Vertical stays clipped (the region\n grows to content height, so nothing is cut) until `maxHeight` caps it —\n at which point the component sets `overflow-y: auto` inline so the body\n scrolls and `stickyHeader` engages. Keeping vertical hidden by default\n avoids a spurious vertical scrollbar on unconstrained tables. */\n overflow-x: auto;\n overflow-y: hidden;\n /* Contain the sticky header's stacking and give a clean focus ring. */\n border-radius: var(--ddga-radius-md);\n }\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n\n /* ─── Table base ─── */\n\n .ddga-table {\n --ddga-table-pad-block: var(--ddga-space-3);\n --ddga-table-pad-inline: var(--ddga-space-4);\n\n inline-size: 100%;\n border-collapse: collapse;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n background-color: var(--ddga-color-card);\n text-align: start;\n }\n\n /* ─── Density ─── */\n\n .ddga-table--sm {\n --ddga-table-pad-block: var(--ddga-space-2);\n --ddga-table-pad-inline: var(--ddga-space-3);\n }\n .ddga-table--md {\n --ddga-table-pad-block: var(--ddga-space-3);\n --ddga-table-pad-inline: var(--ddga-space-4);\n }\n .ddga-table--lg {\n --ddga-table-pad-block: var(--ddga-space-4);\n --ddga-table-pad-inline: var(--ddga-space-5);\n }\n\n /* ─── Head & cell ─── */\n\n .ddga-table__head,\n .ddga-table__cell {\n padding-block: var(--ddga-table-pad-block);\n padding-inline: var(--ddga-table-pad-inline);\n text-align: start;\n vertical-align: middle;\n }\n\n .ddga-table__head {\n color: var(--ddga-text-secondary);\n font-weight: var(--ddga-font-weight-semibold);\n white-space: nowrap;\n /* Header always sits above the body via a bottom rule. */\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n /* Logical alignment (RTL-safe). */\n .ddga-table__head--align-start,\n .ddga-table__cell--align-start {\n text-align: start;\n }\n .ddga-table__head--align-center,\n .ddga-table__cell--align-center {\n text-align: center;\n }\n .ddga-table__head--align-end,\n .ddga-table__cell--align-end {\n text-align: end;\n }\n\n /* ─── Caption ─── */\n\n .ddga-table__caption {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-table-pad-inline);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n text-align: start;\n caption-side: bottom;\n }\n\n /* ─── Body rows ─── */\n\n .ddga-table__body .ddga-table__row {\n transition: background-color 120ms ease;\n }\n .ddga-table__body .ddga-table__row:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-table__body .ddga-table__row[data-state='selected'] {\n background-color: var(--ddga-color-muted);\n /* Inline-start accent stripe. box-shadow insets are physical (no logical\n form exists), so flip the x-offset in RTL — the project's prescribed\n [dir='rtl'] override for direction-specific properties. */\n box-shadow: inset 2px 0 0 0 var(--ddga-color-primary);\n }\n [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n box-shadow: inset -2px 0 0 0 var(--ddga-color-primary);\n }\n\n /* ─── Footer ─── */\n\n .ddga-table__footer {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n border-block-start: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Divided (row dividers) ─── */\n\n .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child) {\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Striped (zebra) ─── */\n\n .ddga-table--striped .ddga-table__body .ddga-table__row:nth-child(even) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Bordered (full grid) ─── */\n\n .ddga-table--bordered .ddga-table__head,\n .ddga-table--bordered .ddga-table__cell {\n border: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Sticky header ─── */\n\n .ddga-table--sticky .ddga-table__header .ddga-table__head {\n position: sticky;\n inset-block-start: 0;\n z-index: 1;\n /* Solid bg so body rows don't bleed through while scrolling. */\n background-color: var(--ddga-color-card);\n }\n\n /* ─── Sort affordance ─── */\n\n .ddga-table__sort-button {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n }\n .ddga-table__sort-button: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-table__sort-icon {\n display: inline-flex;\n flex-direction: column;\n line-height: 0;\n }\n .ddga-table__sort-icon > svg {\n inline-size: 0.75em;\n block-size: 0.75em;\n }\n /* Neutral state shows both carets dimmed; active state shows one in the\n accent color. */\n .ddga-table__sort-icon > svg + svg {\n margin-block-start: -0.2em;\n }\n [aria-sort='none'] .ddga-table__sort-icon {\n color: var(--ddga-text-tertiary);\n }\n [aria-sort='ascending'] .ddga-table__sort-icon,\n [aria-sort='descending'] .ddga-table__sort-icon {\n color: var(--ddga-color-primary);\n }\n\n /* ─── Dark mode ─── */\n /* Semantic tokens (--ddga-color-muted/-card/-border/-primary) already adapt,\n so nothing token-raw here needs a [data-theme='dark'] override. */\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-table__head {\n border-block-end-color: CanvasText;\n }\n .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child),\n .ddga-table--bordered .ddga-table__head,\n .ddga-table--bordered .ddga-table__cell,\n .ddga-table__footer {\n border-color: CanvasText;\n }\n .ddga-table__body .ddga-table__row[data-state='selected'] {\n box-shadow: inset 2px 0 0 0 Highlight;\n }\n [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n box-shadow: inset -2px 0 0 0 Highlight;\n }\n .ddga-table__sort-button:focus-visible,\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* The single-panel disclosure primitive (the building block Accordion is\n built on). The trigger is intentionally minimal — consumers usually bring\n their own button via `asChild`; we only reset the native button chrome and\n provide a focus ring. Radix exposes `--radix-collapsible-content-height` on\n the Content element when open, so we height-slide the disclosure cleanly;\n the inner wrapper carries the clip and stays padding-free (content is\n generic — no opinionated spacing). */\n\n /* ─── Root ─── */\n\n .ddga-collapsible {\n display: block;\n color: var(--ddga-text-primary);\n }\n\n /* ─── Trigger (minimal disclosure button) ─── */\n\n .ddga-collapsible__trigger {\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n padding: 0;\n color: inherit;\n font: inherit;\n text-align: start;\n cursor: pointer;\n }\n\n .ddga-collapsible__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 .ddga-collapsible__trigger:disabled,\n .ddga-collapsible__trigger[aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n /* ─── Content (animated disclosure) ─── */\n\n .ddga-collapsible__content {\n overflow: hidden;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-collapsible__content[data-state='open'] {\n animation: ddga-collapsible-down 200ms ease-out;\n }\n .ddga-collapsible__content[data-state='closed'] {\n animation: ddga-collapsible-up 200ms ease-out;\n }\n\n /* The inner wrapper is the animation/margin-collapse boundary so child\n margins don't punch through the clipped container mid-slide. No padding\n (content is generic), but a sensible line-height matches the rest of the\n system's content surfaces. */\n .ddga-collapsible__content-inner {\n line-height: 1.5;\n }\n\n @keyframes ddga-collapsible-down {\n from {\n block-size: 0;\n }\n to {\n block-size: var(--radix-collapsible-content-height);\n }\n }\n @keyframes ddga-collapsible-up {\n from {\n block-size: var(--radix-collapsible-content-height);\n }\n to {\n block-size: 0;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-collapsible__content[data-state='open'],\n .ddga-collapsible__content[data-state='closed'] {\n animation: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-collapsible__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n box-shadow: none;\n }\n }\n}\n","/* Arabic abjad alphabetic counter — أ ب ج … in the classical abjad order.\n Defined explicitly because, unlike `arabic-indic`, it is NOT natively\n supported across browsers. Symbols are the exact W3C \"Ready-made Counter\n Styles\" sequence (note `\\647\\200D` = HEH + ZWJ so it joins correctly).\n Counter-style names are global, so this lives outside the cascade layer. */\n@counter-style ddga-arabic-abjad {\n system: fixed;\n symbols: '\\627' '\\628' '\\62C' '\\62F' '\\647\\200D' '\\648' '\\632' '\\62D' '\\637' '\\64A' '\\643' '\\644'\n '\\645' '\\646' '\\633' '\\639' '\\641' '\\635' '\\642' '\\631' '\\634' '\\62A' '\\62B' '\\62E' '\\630'\n '\\636' '\\638' '\\63A';\n suffix: '. ';\n}\n\n@layer ddga-components {\n /* Presentational content list. Layout cascades from the root variant to the\n items via descendant selectors (DescriptionList / Timeline technique).\n Logical properties keep markers, padding and the trailing action on the\n correct side in RTL. Colours use semantic tokens, so dark mode adapts on\n its own; no coloured backgrounds → no forced-colors block needed. */\n\n .ddga-list {\n margin: 0;\n padding: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-list__item {\n color: inherit;\n }\n\n /* ─── plain: no markers, flex rows (icon / content / action) ─── */\n\n .ddga-list--plain {\n list-style: none;\n }\n\n .ddga-list--plain .ddga-list__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-2);\n }\n\n /* ─── bulleted / numbered / lettered: native ::marker on a list-item box ─── */\n\n .ddga-list--bulleted,\n .ddga-list--numbered,\n .ddga-list--lettered {\n /* Room for the marker on the inline-start side. */\n padding-inline-start: var(--ddga-space-5);\n }\n\n .ddga-list--bulleted {\n list-style: disc;\n }\n\n /* Ordered markers are direction-localized: Latin in LTR, Arabic in RTL —\n the [dir='rtl'] overrides below swap the counter style. */\n .ddga-list--numbered {\n list-style: decimal;\n }\n\n .ddga-list--lettered {\n list-style: lower-alpha;\n }\n\n .ddga-list--bulleted .ddga-list__item,\n .ddga-list--numbered .ddga-list__item,\n .ddga-list--lettered .ddga-list__item {\n display: list-item;\n padding-block: var(--ddga-space-1);\n line-height: 1.5;\n }\n\n .ddga-list--bulleted .ddga-list__item::marker,\n .ddga-list--numbered .ddga-list__item::marker,\n .ddga-list--lettered .ddga-list__item::marker {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── RTL: localize ordered markers to Arabic counter styles ───\n arabic-indic (١ ٢ ٣) is natively supported; arabic-abjad (أ ب ج) uses the\n @counter-style defined above. Logical padding already flips the side. */\n [dir='rtl'] .ddga-list--numbered {\n list-style-type: arabic-indic;\n }\n\n [dir='rtl'] .ddga-list--lettered {\n list-style-type: ddga-arabic-abjad;\n }\n\n /* ─── Slots ─── */\n\n .ddga-list__icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--ddga-text-tertiary);\n }\n\n /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n .ddga-list__icon svg {\n flex-shrink: 0;\n }\n\n .ddga-list__content {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n /* Let the content column shrink so long text truncates rather than\n shoving the action slot off the row. */\n min-inline-size: 0;\n flex: 1 1 auto;\n }\n\n .ddga-list__primary {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4;\n }\n\n .ddga-list__secondary {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-list__action {\n /* Push to the inline-end edge; stays correct under RTL via the logical\n margin. */\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n flex-shrink: 0;\n margin-inline-start: auto;\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Dividers between items ─── */\n\n .ddga-list--divided .ddga-list__item {\n border-block-end: 1px solid var(--ddga-color-border);\n }\n .ddga-list--divided .ddga-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 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.5;\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 /* ─── Forced colors (Windows High Contrast) ─── */\n\n /* The focus + drag-active indicators are box-shadow rings, which forced-colors\n neutralizes — restore them as a system-colored outline so keyboard focus and\n the active drop target stay visible. */\n @media (forced-colors: active) {\n .ddga-file-upload__dropzone:focus-within,\n .ddga-file-upload__dropzone[data-dragging] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\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 /* accent + gradient share the sentiment-keyed tint vars (data-sentiment on\n the root). Defaults to brand when no sentiment. */\n :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-600);\n --ddga-stat-accent-bg: var(--ddga-sa-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-600);\n --ddga-stat-accent-bg: var(--ddga-success-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-600);\n --ddga-stat-accent-bg: var(--ddga-error-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-600);\n --ddga-stat-accent-bg: var(--ddga-gray-100);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient) .ddga-stat__icon {\n background-color: var(--ddga-stat-accent-bg);\n color: var(--ddga-stat-accent-fg);\n }\n\n /* accent: inline-start edge bar. */\n .ddga-stat--accent {\n border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n }\n\n /* gradient: soft sentiment-tinted surface (elevated, borderless). The tint\n fades from the inline-start corner; flip the angle in RTL. */\n .ddga-stat--gradient {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-sm);\n background-image: linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n [dir='rtl'] .ddga-stat--gradient {\n background-image: linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%);\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'] :is(.ddga-stat--accent, .ddga-stat--gradient) {\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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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 /* Reset the tracking in RTL — values can carry Arabic text (e.g. \"مليون ريال\"),\n and letter-spacing breaks Arabic cursive joining (mirrors __label above). */\n [dir='rtl'] .ddga-stat__value {\n letter-spacing: normal;\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 /* Chip: same text color, wrapped in a sentiment-tinted pill. The raw -50\n tints get dark overrides below (mirrors the accent badge). */\n .ddga-stat__change--chip {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n }\n .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: var(--ddga-success-50);\n }\n .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: var(--ddga-error-50);\n }\n [data-theme='dark'] .ddga-stat__change--chip {\n background-color: rgb(255 255 255 / 0.08);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: rgb(217 45 32 / 0.18);\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 /* ─── Chart slot (consumer-supplied sparkline) ─── */\n /* A styled slot with a consistent height; the dropped-in chart stretches to\n fill. The library ships no charting dependency. */\n .ddga-stat__chart {\n margin-block-start: var(--ddga-space-2);\n block-size: 2.5rem;\n }\n .ddga-stat__chart > svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Sizes (scale padding + value; lg/xl also open 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 /* Hero/display: no font-size token sits above 3xl, so the display value uses\n a component-local rem (precedent: the .625rem label size). */\n .ddga-stat--xl {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-8);\n }\n .ddga-stat--xl .ddga-stat__value {\n font-size: 2.5rem;\n line-height: 1.1;\n }\n .ddga-stat--xl .ddga-stat__chart {\n block-size: 3.25rem;\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 /* `columns` is a responsive MAX, not a fixed count: up to N columns on wide\n containers, wrapping down (N → … → 1) as the container narrows — no crush,\n no overflow. The track minimum is the larger of the readable floor (13rem)\n and the width N columns would occupy, so auto-fit packs at most N per row.\n The `100%` resolves against the GROUP (not the viewport), so it is\n container-aware — correct even in a narrow panel on a wide screen, with no\n media query needed. */\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n max(\n 13rem,\n calc(\n (100% - (var(--ddga-stat-group-columns) - 1) * var(--ddga-stat-group-gap)) /\n var(--ddga-stat-group-columns)\n )\n ),\n 1fr\n )\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 + chip backgrounds flatten to Canvas; a border keeps them visible. */\n .ddga-stat__icon,\n .ddga-stat__change--chip {\n border: 1px solid CanvasText;\n }\n .ddga-stat--accent {\n border-inline-start-color: Highlight;\n }\n /* gradient flattens its tinted surface + has a transparent border, so it\n would lose its boundary — restore one. */\n .ddga-stat--gradient {\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 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: var(--ddga-gray-100);\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 /* ─── 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 — the opt-in scrollable middle region (mirrors DrawerBody): it grows\n to fill the space between a pinned header and footer and scrolls internally\n when content overflows, so a tall body never clips and the footer stays\n visible with zero consumer config. `min-block-size:0` lets it shrink below\n its content so the overflow engages. */\n .ddga-modal__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding-inline: var(--ddga-space-5);\n }\n\n /* Unwrapped content: consumers may still drop raw paragraphs/forms directly\n under ModalContent for short, non-scrolling bodies — this gives them the\n same inline padding without requiring ModalBody. (ModalFooter owns its own\n full padding, so it's unaffected by this inline-padding rule.) */\n .ddga-modal__header ~ * {\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) ─── */\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 /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Structure: a single real <input> (.ddga-input-otp__input)\n overlays the container transparently and owns focus/typing/paste/autofill;\n the slot row (.ddga-input-otp__row) is the decorative, aria-hidden display. */\n\n /* ─── Label ─── */\n\n .ddga-input-otp__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-otp__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Container (sizes to the slot row; anchors the overlay input) ─── */\n\n .ddga-input-otp {\n position: relative;\n display: inline-flex;\n color: var(--ddga-text-primary);\n }\n\n /* ─── Overlay input (the real, transparent control) ─── */\n\n .ddga-input-otp__input {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n /* Transparent text + caret: the slots render the value, not the input. */\n color: transparent;\n background: transparent;\n caret-color: transparent;\n cursor: text;\n /* Suppress native selection UI — on iOS/Android the selection highlight +\n handles render over the transparent text and break the slot illusion.\n Typing and programmatic caret moves are unaffected. */\n -webkit-user-select: none;\n user-select: none;\n /* On top of the slots so a click anywhere focuses it. */\n z-index: 1;\n }\n\n .ddga-input-otp__input:focus {\n outline: none;\n }\n\n .ddga-input-otp__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Slot row + groups (forced LTR in the markup) ─── */\n\n .ddga-input-otp__row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .ddga-input-otp__group {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n /* ─── Slot ─── */\n\n .ddga-input-otp__slot {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\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-text-primary);\n font-variant-numeric: tabular-nums;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* The active slot (focused caret position) gets the ring. */\n .ddga-input-otp__slot[data-active] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n z-index: 1;\n }\n\n /* ─── Sizes ─── */\n\n .ddga-input-otp--sm .ddga-input-otp__slot {\n inline-size: 2rem;\n block-size: 2rem;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input-otp--md .ddga-input-otp__slot {\n inline-size: 2.75rem;\n block-size: 2.75rem;\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-input-otp--lg .ddga-input-otp__slot {\n inline-size: 3.25rem;\n block-size: 3.25rem;\n font-size: var(--ddga-font-size-xl);\n }\n\n /* ─── Fake caret (active, empty slot) ─── */\n\n .ddga-input-otp__caret {\n position: absolute;\n inline-size: 1px;\n block-size: 1.125em;\n background-color: var(--ddga-text-primary);\n animation: ddga-input-otp-caret 1s step-end infinite;\n }\n\n @keyframes ddga-input-otp-caret {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* ─── Separator (between groups) ─── */\n\n .ddga-input-otp__separator {\n display: flex;\n align-items: center;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-input-otp__separator-dash {\n inline-size: 0.75rem;\n block-size: 2px;\n background-color: var(--ddga-color-border);\n border-radius: 9999px;\n }\n\n /* ─── Error ─── */\n\n .ddga-input-otp--error .ddga-input-otp__slot {\n border-color: var(--ddga-color-error);\n }\n .ddga-input-otp--error .ddga-input-otp__slot[data-active] {\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-input-otp:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .ddga-input-otp:has(input:disabled) .ddga-input-otp__slot {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-input-otp__slot {\n transition: none;\n }\n .ddga-input-otp__caret {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-input-otp__slot {\n border: 1px solid CanvasText;\n }\n .ddga-input-otp__slot[data-active] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-input-otp__caret {\n background-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. Only TagInput-specific styles live here. The control box\n mirrors Input's box (border / focus ring / sizes / error / disabled) but\n wraps: chips + the text input share one flex-wrap flow, so the box grows\n vertically (min-block-size, not a fixed height) as chips wrap. */\n\n /* ─── Label ─── */\n\n .ddga-tag-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 /* Required asterisk — mirrors Input so every text-entry control marks\n required the same way. */\n .ddga-tag-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered, wrapping box) ─── */\n\n .ddga-tag-input {\n display: flex;\n flex-wrap: wrap;\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 cursor: text;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (min-heights match Input; vertical padding lets chips breathe) ─── */\n\n .ddga-tag-input--sm {\n min-block-size: 32px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tag-input--md {\n min-block-size: 36px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-tag-input--lg {\n min-block-size: 40px;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Chip list (display:contents so <li> chips flow inline with the input;\n explicit roles in the JSX preserve list semantics regardless) ─── */\n\n .ddga-tag-input__list,\n .ddga-tag-input__item {\n display: contents;\n }\n\n /* ─── Field (the actual <input> — transparent, borderless, grows to fill) ─── */\n\n .ddga-tag-input__field {\n flex: 1 1 60px;\n min-inline-size: 60px;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n .ddga-tag-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-tag-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-tag-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-tag-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-tag-input[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-tag-input[data-disabled] .ddga-tag-input__field {\n cursor: not-allowed;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tag-input {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-tag-input {\n border: 1px solid CanvasText;\n }\n .ddga-tag-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-tag-input[data-disabled] {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Visual-only quote. Root is a <figure> when attribution is present, else a\n bare <blockquote> — both carry .ddga-quote. Accent + surfaces flow through\n semantic tokens, so dark mode adapts with no [data-theme] overrides.\n Logical properties keep the accent border + mark RTL-correct. */\n\n .ddga-quote {\n --ddga-quote-accent: var(--ddga-color-primary);\n\n display: block;\n margin: 0;\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.6;\n }\n\n /* When the root is a <figure>, the inner <blockquote> resets its UA margin. */\n .ddga-quote__blockquote {\n margin: 0;\n }\n\n .ddga-quote__content {\n /* Quote text. Inherits font-size from the variant / surrounding context. */\n color: inherit;\n }\n\n .ddga-quote__content p {\n margin-block: 0;\n }\n .ddga-quote__content p + p {\n margin-block-start: var(--ddga-space-3);\n }\n\n /* ─── Decorative quote mark ─── */\n\n .ddga-quote__mark {\n display: block;\n inline-size: 2em;\n block-size: 2em;\n margin-block-end: var(--ddga-space-1);\n color: var(--ddga-quote-accent);\n opacity: 0.35;\n }\n\n /* Opening mark mirrors so the curl faces the (right-aligned) text in RTL. */\n [dir='rtl'] .ddga-quote__mark {\n transform: scaleX(-1);\n }\n\n /* ─── Caption (attribution) ─── */\n\n .ddga-quote__caption {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n margin-block-start: var(--ddga-space-3);\n }\n\n .ddga-quote__avatar {\n flex: none;\n display: inline-flex;\n }\n\n .ddga-quote__attribution {\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n }\n\n .ddga-quote__author {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-semibold);\n font-style: normal;\n }\n\n .ddga-quote__byline {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n }\n\n .ddga-quote__source {\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n font-style: italic;\n }\n\n /* ─── Variant: default (inline-start accent border) ─── */\n\n .ddga-quote--default {\n border-inline-start: 3px solid var(--ddga-quote-accent);\n padding-inline-start: var(--ddga-space-4);\n padding-block: var(--ddga-space-1);\n }\n\n /* ─── Variant: pullquote (large, editorial, centered) ─── */\n\n .ddga-quote--pullquote {\n max-inline-size: 42rem;\n margin-inline: auto;\n padding-block: var(--ddga-space-4);\n text-align: center;\n font-size: var(--ddga-font-size-2xl);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4;\n }\n .ddga-quote--pullquote .ddga-quote__mark {\n margin-inline: auto;\n inline-size: 2.5em;\n block-size: 2.5em;\n }\n .ddga-quote--pullquote .ddga-quote__caption {\n justify-content: center;\n margin-block-start: var(--ddga-space-4);\n }\n .ddga-quote--pullquote .ddga-quote__attribution {\n align-items: center;\n }\n\n /* ─── Variant: testimonial (card surface) ─── */\n\n .ddga-quote--testimonial {\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n background-color: var(--ddga-color-background);\n box-shadow: var(--ddga-shadow-sm);\n padding: var(--ddga-space-6);\n }\n\n /* ─── Variant: plain (bare) ───\n No border, no surface — relies on content + caption only. */\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-quote--default {\n border-inline-start-color: CanvasText;\n }\n .ddga-quote--testimonial {\n border-color: CanvasText;\n }\n .ddga-quote__mark {\n opacity: 1;\n }\n }\n}\n","@layer ddga-components {\n /* Constrains content to a fixed width-to-height ratio via the native CSS\n `aspect-ratio` property (Baseline 2021) — no padding-bottom hack. The ratio\n comes from the `--ddga-aspect-ratio` custom property the component sets\n inline (default 1). Full-width by default; the consumer constrains the\n width, the height follows. Direction-agnostic — `aspect-ratio` and the\n logical sizing properties need no RTL handling. No color surface, so no\n dark-mode or forced-colors block is required. */\n\n .ddga-aspect-ratio {\n position: relative;\n inline-size: 100%;\n aspect-ratio: var(--ddga-aspect-ratio, 1);\n overflow: hidden;\n /* Applies when `asChild` renders the class directly onto a replaced element\n (<img>/<video>); a no-op on the wrapper <div>. */\n object-fit: cover;\n }\n\n /* Wrapper case: the single child fills the ratio box. */\n .ddga-aspect-ratio > * {\n block-size: 100%;\n inline-size: 100%;\n }\n /* `object-fit` only affects replaced elements — scope it so the intent is\n explicit (a no-op on <div>/custom children, cover-crops media). */\n .ddga-aspect-ratio > :is(img, video, canvas, iframe) {\n object-fit: cover;\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 /* ─── Icons (leading/trailing inside a trigger) ─── */\n\n .ddga-tabs__icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n .ddga-tabs__icon > svg {\n inline-size: 1em;\n block-size: 1em;\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 /* Icon-only triggers square up: collapse the wider inline padding to match\n the block padding so the hit target is balanced around the glyph. */\n .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-1);\n }\n .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-2);\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 + 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 /* 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 .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 /* Sized by `width` alone — `aspect-ratio:1` keeps it round, so passing only\n `width` (the natural way to size a circle) no longer produces an oval. An\n explicit `height` (inline style) still overrides aspect-ratio. */\n width: 40px;\n aspect-ratio: 1;\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 /* ─── Dark mode ─── */\n /* The fill is the raw `--ddga-gray-200` tint, which the dark theme does NOT\n remap (only semantic `--ddga-color-*` adapt). Left alone it renders as a\n bright light box on dark surfaces, so map it to the semantic border gray.\n The wave shimmer already uses `--ddga-color-background` and is fine. */\n [data-theme='dark'] .ddga-skeleton {\n background-color: var(--ddga-color-border);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--pulse,\n .ddga-skeleton--wave::after {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n /* The fill conveys \"content loading here\", but `background-color` is forced\n away in HC. Outline the placeholder so it stays perceivable. */\n @media (forced-colors: active) {\n .ddga-skeleton {\n border: 1px solid GrayText;\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 /* ─── 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 /* Determinate fill: the component sets `inline-size: <pct>%` inline. Anchored\n to the track's inline-start, it mirrors for free in RTL (logical, no JS\n direction read). `100%` here is the no-JS/SSR fallback before the inline\n value lands; the indeterminate rule below overrides it to 40%. */\n inline-size: 100%;\n background-color: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: inline-size 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 /* Segmented (radial stepper): each arc is track-colored until filled. */\n .ddga-circular-progress__segment {\n stroke: var(--ddga-gray-200);\n transition: stroke 200ms ease;\n }\n .ddga-circular-progress__segment--filled {\n stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n }\n\n /* Only the continuous (non-segmented) ring spins when indeterminate — a\n segmented ring is determinate, so don't rotate its empty arcs. */\n .ddga-circular-progress[data-state='indeterminate']:not([data-segmented])\n .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 /* ─── Dark mode ─── */\n /* The unfilled track is built from the raw `--ddga-gray-200` tint, which the\n dark theme does NOT remap (only semantic `--ddga-color-*` tokens adapt).\n Left alone it renders as a bright light band on dark surfaces, so map the\n track to the semantic border gray. The indicator stays `--ddga-color-*`\n (already dark-aware). */\n [data-theme='dark'] .ddga-progress {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-circular-progress__track,\n [data-theme='dark'] .ddga-circular-progress__segment {\n stroke: var(--ddga-color-border);\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 .ddga-circular-progress__segment {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n /* background/stroke colors are overridden by the system, which would make the\n fill indistinguishable from the track. Pin the fill to Highlight and the\n track to a dim system color so progress stays readable. */\n @media (forced-colors: active) {\n .ddga-progress {\n border: 1px solid CanvasText;\n }\n .ddga-progress__indicator {\n background-color: Highlight;\n }\n .ddga-circular-progress__track,\n .ddga-circular-progress__segment {\n stroke: GrayText;\n }\n .ddga-circular-progress__indicator,\n .ddga-circular-progress__segment--filled {\n stroke: Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* DateRangePicker field/trigger chrome + range-fill cell styling. The calendar\n dropdown (popover, toggle, month grid, day cells) is shared with DatePicker —\n see calendar.css. Wrapper (.ddga-field) + helper/error (.ddga-field__message)\n are shared — see field.css. */\n\n /* ─── Label + required ─── */\n\n .ddga-date-range-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-range-picker__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (react-aria Group: start input + separator + end input + button) ─── */\n\n .ddga-date-range-picker-trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\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-range-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-range-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-range-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-range-picker-trigger[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-date-range-picker-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-date-range-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 /* ─── DateInputs + segments + separator ─── */\n\n .ddga-date-range-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n min-inline-size: 0;\n /* Force LTR segment direction even in RTL so each date reads\n day-month-year left-to-right. The flex row itself follows page dir, so in\n RTL the start input correctly sits on the right (start of the range). */\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-date-range-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 .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n .ddga-date-range-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-range-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-date-range-picker__separator {\n flex: 0 0 auto;\n padding-inline: var(--ddga-space-1);\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Calendar icon button (popover trigger) ─── */\n\n .ddga-date-range-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-range-picker__icon-button:hover {\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-range-picker__icon-button[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-range-picker__icon-button[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-range-picker__icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Range fill (scoped to RangeCalendar via .ddga-calendar--range) ─── */\n\n /* react-aria emits data-selected on EVERY in-range cell, plus\n data-selection-start / data-selection-end on the two endpoints. We paint a\n soft connector across the whole range on the <td> (so it spans the full\n column width and reads continuous), keep the endpoints as solid primary\n circles (the base .ddga-calendar__cell[data-selected] rule), and make the\n in-between cells transparent so only the td connector shows behind them. */\n\n /* Connector bar on the td — spans the full column, unlike the 2rem inner cell. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: color-mix(in srgb, var(--ddga-color-primary) 12%, transparent);\n }\n /* Round only the outer edges of the bar (logical → flips in RTL). A single-day\n range carries both attrs, so it rounds to a full pill. */\n .ddga-calendar--range td:has([data-selection-start]) {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-calendar--range td:has([data-selection-end]) {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n\n /* In-between days: let the td connector show through; keep text legible. */\n .ddga-calendar--range\n .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]) {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n /* The endpoints stay solid primary (base rule); their secondary calendar text\n already inherits the contrast color via calendar.css. */\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-range-picker-trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-range-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n /* color-mix backgrounds disappear in forced-colors — restore a visible range\n using the Highlight system color on the connector td + endpoints. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: Highlight;\n }\n .ddga-calendar--range .ddga-calendar__cell[data-selected] {\n color: HighlightText;\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","@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 /* ─── 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"],"names":[]}
1
+ {"version":3,"mappings":"AAAA,iBMAA,i8IMCA,g1CPAA,oOAQA,wOAQA,6OAQA,uPAQA,uPAQA,wOAQA,2OAQA,4PKzDA,0DAQA,2MAWA,wCAQA,4KAkBA,gDV7CA,uBkBKE,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,uOAiBA,yFASA,mJASA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,qFAMA,wHAgBA,8EAGA,6HAIA,+NASA,8BACE,yCAGA,uDAGA,6FzBhSF,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,mFQ1JF,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,2DQrJF,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,uGAOA,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,kDQzLF,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,wIAKA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,oFAMA,+GAWA,qKAUA,4DAKA,0JAQA,qHAOA,qDAMA,6DAIA,kKASA,oDAMA,uCACE,4BAOF,8BAGE,uCAGA,uFAQF,uH7CrOA,2SAgBA,kGAMA,kGAQA,sFAKA,2GAKA,iHAKA,uHAKA,2GAKA,2GAKA,kGAOA,yFAKA,+FAKA,mGAKA,mGAKA,mGAKA,0FAOA,qHAQA,oIAUA,8FAOA,+EAOA,gDAOA,0RAmBA,0DAKA,4FAIA,6FAYA,6IAKA,0GAIA,iHAIA,+GAIA,+GAIA,yGAOA,8BACE,yCwB/MF,qEAQA,6HAWA,4KAWA,+EAGA,8EAMA,oHAUA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAQA,8BACE,kGsB1FF,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,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA,kFhB1MF,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,8EJ9JF,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAYA,gGAWA,yDAIA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA,8EKnNF,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,gHnC5UF,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,sEAKA,oDAOA,2IAKA,6IAQA,iFAGA,iFAMA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA,kFQ5NF,sFAQA,iIAcA,sFAQA,uIAOA,gHAMA,6HAQA,sEAOA,mGAMA,+DAQA,+DAMA,2IAQA,8DAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yCQ3HF,oFAQA,oIAYA,2CAMA,sYAoBA,qGAKA,8FAOA,4JAMA,iIAOA,iFAKA,0DASA,0DAGA,mEAGA,gEAMA,8JASA,8DAOA,0KAOA,oKASA,uCACE,wCAOF,8BACE,kEAIA,qGAKA,qFQnJF,uJAUA,4EAMA,8CAOA,mVAmBA,+DAIA,oIAQA,+HAQA,4FAMA,0EAKA,qFAGA,qFAIA,qFAKA,oGAQA,kGAWA,kHAIA,oHAOA,uCACE,qGAIA,0CAOF,8BACE,8DAIA,uFQnIF,+GASA,0FAMA,oEAOA,0EAOA,+GAKA,0GAmBA,gQAYA,8PAcA,gGAMA,+aAuBA,+EAOA,iLAKA,+EAGA,wEAKA,yHAOA,kGAOA,6FAKA,+EAIA,iKAUA,mDAGA,mDAMA,uCACE,wCAOF,8BACE,gEAIA,6IAKA,sEAGA,iFQvMF,4GAOA,iCAGA,mCAGA,iCAIA,yEASA,uCACE,uCH3BF,yIAUA,+EAMA,iDAKA,uFAWA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,wCASA,2EAIA,uCACE,iEASF,8BACE,0CC1GF,8IAQA,kCAGA,kCAGA,mCAIA,wEAGA,wEAGA,wEAGA,gFAIA,2LAcA,sMAOA,2FAUA,oHAIA,+FAWA,sHAQA,iFAGA,iFAGA,iFAGA,yFAIA,2CAIA,2DAIA,yIAMA,mFAIA,qGAMA,gLAMA,oEAMA,6OAYA,6EAGA,8FAUA,2EAGA,oIAMA,uCACE,iKAIA,+GAWF,8BACE,2CAGA,qDAGA,gFAIA,8FvCnMF,wUAgBA,mGAGA,qFAIA,iIAUA,6DAWA,2DAGA,6DAMA,wUAiBA,qFAIA,6FAOA,gFAGA,oGAKA,iHAQA,sKASA,6DAKA,+IASA,+GAMA,sQAYA,yEAIA,yJAYA,yFAIA,yHAQA,gEAMA,oQAYA,qFAIA,8DAIA,sKAYA,+IAOA,8BACE,gDAGA,2FAIA,4DAOF,uCACE,4FQnOF,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,0Ce3TF,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,8FAKA,gKASA,uCACE,kGAMF,8BACE,0EAIA,oFAIA,wFVrPF,+PAYA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAMA,2CAIA,kJAQA,oQAcA,sGAIA,oFAGA,sFASA,gLAcA,8IASA,mcAoBA,sEAGA,qHAMA,uEAIA,kDAKA,+DAKA,0LAYA,8aAuBA,0LASA,6DAIA,sHAMA,6FAIA,sHAGA,2FAGA,0HAIA,8HAQA,yEAMA,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA,2FCzTF,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAcA,iDAIA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAOA,uCACE,2CAOF,8BACE,sDAGA,4FAIA,iHAKA,mHQ9KF,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA,yCASA,8BACE,oIelLF,6GAOA,iJAOA,0HAQA,4IAWA,qGAKA,qGAQA,kJAQA,qHASA,gTAcA,2CAIA,2FAOA,6EAGA,iFAGA,mGAMA,uCAGA,mEAMA,uGAOA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,wEAIA,kFzCxIF,uJAOA,uFAOA,4RAgBA,0EAIA,4EAIA,0EAOA,uMAgBA,0EAMA,4RAkBA,wFAGA,0FAIA,iGAIA,iEAOA,gHAOA,+DAGA,yHAOA,+GAOA,uCACE,6DAQF,8BACE,+CAGA,sEAIA,gFQhJF,+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,kIASA,kFAOF,4GAOA,iHAGA,2FAMA,8BACE,gGQ9EF,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE,sDChHF,sRAeA,yEAIA,gMAUA,8HAIA,iKAIA,6JAIA,2JAIA,2IAMA,4EAMA,+JAKA,qHAWA,kHAIA,gJAIA,8KAIA,4KAIA,0KAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAYA,kDAIA,+EAMA,0RAUA,gFAGA,8EAKA,gFAMA,0KAMA,6FAGA,2FAGA,sEAGA,kGAGA,kGAIA,sGAOA,2DAKA,4FAQA,2EAIA,qEAOA,2CAGA,oEAGA,mEAIA,qEAKA,mEAIA,kEAIA,oDAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,sOAuBA,6FAOA,iDAKA,8BAEE,sEAIA,uDAKA,kDC5UF,yUAoBA,0HAMA,4HAmBA,+JAQA,yXAoBA,0DAKA,mGAKA,4FAOA,uFAGA,yEAMA,8FAUA,uDASA,uCACE,qCAUF,8BACE,0CAGA,iEnCjIF,kIAqBA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAcA,iEASA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,mIAmBA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,qVAMA,2JAGA,mHAWA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE,kRWjgBF,sLASA,mFAKA,uGAcA,kEAMA,yJAQA,iGAGA,wHAKA,uIAOA,kLASA,oFAIA,yCAMA,4GAMA,8BACE,kFAOF,uCACE,8CC/FF,qRAiBA,0dAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,4DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAYA,oFAIA,6DAIA,qKAYA,8IAOA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA,0FQ7UF,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,yFCrMF,iQAYA,sEAQA,4KAQA,2GAOA,2JAUA,qEAMA,wKAYA,+KAUA,6QAUA,8FAKA,mHAQA,oVAeA,iFAGA,4FAKA,uKASA,8DAKA,gHASA,4JAOA,6DAMA,2IASA,6fAwBA,oDAGA,6DAMA,+EAGA,kFAGA,4EAGA,+EAIA,8DAQA,+DAQA,gKAUA,iKAWA,uCACE,mEAQF,8BACE,+DAIA,uFAIA,sDQvQF,8FAYA,2GAOA,wQAcA,uGAIA,uGAIA,uGAOA,iKAQA,uKASA,+EAIA,kFAIA,yEAOA,2MAWA,oEAGA,kFAGA,sJAOA,wHAMA,oJAQA,6HAMA,+GAMA,0HAOA,gJAUA,6KAYA,uIAMA,+EAKA,8DAMA,wDAGA,wEAGA,2HAWA,8BACE,oDAGA,qMAMA,yFAGA,oGAGA,mHQlNF,oJAOA,oFAOA,qFAQA,2NAsBA,0CAIA,mDAMA,sFAcA,wUAgBA,6HAQA,gHAKA,oHAKA,oHAQA,0KAQA,+DAYA,2FAMA,iIASA,kFAGA,4IAOA,kEAIA,mGAMA,uCACE,sCAGA,uCAOF,8BACE,kDAGA,kFAIA,oDQzLF,+MAYA,kFASA,8CAIA,gEAIA,kEAMA,yEAKA,mFAKA,iEAMA,2HAQA,6FAKA,qEAMA,sEAMA,oDAQA,4IAMA,+OAUA,uCACE,4BAOF,8BACE,wKAWA,yEQtHF,+FAAA,4FAAA,gGAAA,oGDWA,kGAOA,+BAMA,kCAIA,6HASA,wGAOA,wCAMA,wCAIA,4CAIA,sLAQA,8EAAA,8EAAA,8EASA,4DAIA,iEAMA,6HASA,mCAIA,2GAUA,8GAMA,0GAMA,0JAaA,yFAGA,mEE3IA,oJAWA,iCAIA,mCAKA,sCAGA,gEAMA,+IAUA,iDAMA,oHAOA,kDAKA,8EAMA,kHAMA,wFAKA,yGAQA,uJAQA,mNASA,+FAKA,0GAIA,mEAMA,kNAaA,8BACE,0DAGA,iDAGA,6BLjIF,+DAOA,iJAYA,sIAMA,iHAQA,4EAKA,yFAGA,yFAQA,iDAIA,wGAQA,sGAWA,uCACE,0GAQF,8BACE,yGEpFF,oJASA,oFAOA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA,qED7HF,+MAQA,4FAOA,4UAeA,0HAKA,4HAMA,mIAKA,sHAMA,4EAGA,4IAOA,kJAgBA,uDAIA,oOASA,sFAGA,qIAIA,qGAIA,yHAKA,gHAQA,0TAgBA,uHAIA,qGAGA,uEAGA,6DAeA,8HAKA,mJAIA,6IAMA,0KAUA,uCACE,iDAOF,8BACE,4DAGA,kGAMA,yEAGA,+EKzMF,+HAWA,sDAMA,kEHrBF","sources":["src/index.css","src/components/input.css","src/themes.css","src/components/number-input.css","src/variables.css","src/components/sidebar.css","src/components/scroll-area.css","src/components/dropdown-menu.css","src/components/tabs.css","src/components/textarea.css","src/reset.css","src/components/rating.css","src/dark.css","src/components/calendar.css","src/components/menubar.css","src/components/timeline.css","src/components/breadcrumb.css","src/components/checkbox.css","src/components/field.css","src/components/toggle.css","src/components/badge.css","src/components/date-picker.css","src/components/drawer.css","src/components/command.css","src/components/pagination.css","src/components/radio.css","src/components/button.css","src/components/description-list.css","src/components/empty-state.css","src/components/stat.css","src/components/combobox.css","src/components/table.css","src/components/accordion.css","src/components/switch.css","src/components/tooltip.css","src/components/alert.css","src/components/file-upload.css","src/components/popover.css","src/components/skeleton.css","src/components/progress.css","src/components/input-otp.css","src/components/steps.css","src/components/select.css","src/components/divider.css","src/components/toast.css","src/components/slider.css","src/components/modal.css","src/components/link.css","src/components/spinner.css","src/components/card.css","src/components/avatar.css","src/components/collapsible.css","src/components/date-range-picker.css","src/components/tag-input.css","src/components/list.css","src/components/search-box.css","src/components/quote.css","src/components/aspect-ratio.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/calendar.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@import './components/command.css';\n@import './components/table.css';\n@import './components/input-otp.css';\n@import './components/link.css';\n@import './components/search-box.css';\n@import './components/list.css';\n@import './components/quote.css';\n@import './components/collapsible.css';\n@import './components/tag-input.css';\n@import './components/date-range-picker.css';\n@import './components/aspect-ratio.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 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","/* 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 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.5;\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",":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 /* 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 /* Self-sufficient full height. This must be a DEFINITE height, not a `min-`:\n the aside is `block-size:100%`, which only resolves against a definite\n parent — with a `min-block-size` the wrapper stays content-sized, the\n percentage falls back to `auto`, and the footer detaches from the viewport\n bottom (and a long nav can't scroll inside `__content`). A definite\n `100svh` makes the footer stick and the nav scroll with zero consumer\n config — no html→body→root height chain. `svh` (not `dvh`) avoids reflow as\n mobile browser chrome shows/hides. Escape hatch for an embedded/boxed shell:\n set a definite `height`/`block-size` on the provider (inline style wins),\n e.g. `<SidebarProvider style={{ blockSize: '24rem' }}>`. */\n block-size: 100svh;\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 /* Opt-in (`<SidebarInset scrollable>`): make the inset its own vertical scroll\n region. The wrapper's definite `block-size:100svh` gives the stretched inset\n a definite height, so `min-block-size:0` + `overflow-y:auto` let tall content\n scroll inside it — the sidebar + footer stay put — with NO consumer\n flex/min-block-size/overflow CSS. The whole inset scrolls (header included);\n for a fixed header with only the body scrolling, leave this off and compose a\n nested scroll region inside the inset (see the App shell story). */\n .ddga-sidebar-inset--scrollable {\n min-block-size: 0;\n overflow-y: auto;\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 /* Fill the container's inline size. In `__content`/`__group` (which keep the\n default `align-items: stretch`) this is a no-op. It matters inside a\n collapsed `__header`/`__footer`, which switch to `align-items: center` to\n centre non-menu content: without a definite width the <ul> shrinks to its\n content width — the icon-centring padding PLUS the still-in-layout\n `opacity:0` label — so it grows past the icon rail, gets centred, and is\n clipped by the aside's `overflow: hidden`, leaving only an icon sliver. A\n definite `100%` keeps the menu at the rail width so its button centres its\n icon exactly like the main nav. Logical property → RTL-safe. */\n inline-size: 100%;\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 .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\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: header/footer drop their inline padding (above) so a menu\n button inside them fills the rail and self-centres its icon EXACTLY like the\n main-nav buttons (consistency — a footer profile button must match the nav).\n `align-items: center` then centres non-stretching content (a brand/label)\n and clips overflow so a wide 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__menu-sub-button[data-active='true'],\n .ddga-sidebar__menu-sub-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 /* 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 /* Radix wraps the viewport's children in an inline-styled `display:table` div\n so a HORIZONTAL scroll area can measure max-content width. In a vertical-only\n scroll area that wrapper instead expands past the viewport for wide content\n (e.g. a Table) — and there's no horizontal scrollbar to reach it, so columns\n get clipped (worst on mobile). For vertical orientation, force the wrapper to\n block layout: width is constrained to the viewport, and wide children shrink\n or own their own horizontal overflow (a Table scrolls inside its region).\n `!important` is required to beat Radix's inline style. Horizontal/both keep\n the table wrapper so their horizontal scroll still works. */\n .ddga-scroll-area__viewport--vertical > div {\n display: block !important;\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 / 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-base);\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 /* Protect Arabic cursive joining — drop the tracking + casing when RTL\n (mirrors command.css). The shortcut hint is usually Latin but reset it\n too for parity. */\n [dir='rtl'] .ddga-dropdown-menu__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n [dir='rtl'] .ddga-dropdown-menu__shortcut {\n letter-spacing: normal;\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 /* ─── Dark mode ─── */\n\n /* The destructive-hover background uses the raw --ddga-error-50 tint\n (near-white), which doesn't adapt in dark mode. Override with a translucent\n red + a light-red foreground for contrast (mirrors alert.css / button.css). */\n [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: rgb(217 45 32 / 0.24);\n color: var(--ddga-error-200, #fecdca);\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 /* 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 /* ─── Icons (leading/trailing inside a trigger) ─── */\n\n .ddga-tabs__icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n .ddga-tabs__icon > svg {\n inline-size: 1em;\n block-size: 1em;\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 /* Icon-only triggers square up: collapse the wider inline padding to match\n the block padding so the hit target is balanced around the glyph. */\n .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-1);\n }\n .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-2);\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 /* 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\n/* Visually-hidden utility: removes content from the visual layout while\n keeping it in the accessibility tree (screen-reader-only text). Use for\n action cues on icon-only or label-only controls (e.g. Table sort buttons). */\n.ddga-sr-only {\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 clip-path: inset(50%);\n white-space: nowrap;\n border: 0;\n}\n\n/* Shared RTL utility: horizontally mirror a directional glyph (chevrons,\n arrows) in right-to-left layouts. Opt-in per icon via the `ddga-icon-flip`\n class — components apply it only to icons whose geometry encodes direction\n (Button/Link start/end icons). Lives here, not in a component sheet, because\n it's cross-component (used by Button, Link, …). */\n[dir='rtl'] .ddga-icon-flip {\n transform: scaleX(-1);\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","/* 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 /* Shared calendar dropdown chrome — consumed by both DatePicker and\n DateRangePicker. The field/trigger surface stays per-component\n (date-picker.css / date-range-picker.css); everything inside the popover\n (the floating panel, the Gregorian↔Hijri toggle, and the month grid) is\n identical regardless of single-date vs range selection, so it lives here. */\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 inner\n Dialog so when the calendar can't fit (short iframes, dual-calendar mode),\n the content scrolls instead of being clipped. `overflow: hidden` stays on\n the popover so the rounded corners crop animation bleed. */\n .ddga-calendar-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-calendar-popover[data-entering] {\n animation: ddga-calendar-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-calendar-popover[data-exiting] {\n animation: ddga-calendar-out 80ms ease-in;\n }\n @keyframes ddga-calendar-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-calendar-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 .ddga-calendar-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-calendar-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-calendar-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-calendar-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-calendar-toggle__button:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── Calendar grid ─── */\n\n .ddga-calendar {\n inline-size: min(100%, 280px);\n }\n\n .ddga-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-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-calendar__nav:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-calendar__nav[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-calendar__nav[data-disabled] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* RTL chevron direction is handled in the picker components by swapping the\n icon components themselves (PrevChevron / NextChevron based on `dir`) — more\n robust than a CSS scaleX flip because it doesn't rely on the popover portal\n correctly inheriting the `dir` attribute from the DgaProvider root. */\n\n .ddga-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 /* Native <select>s give free keyboard support + native focus rings +\n screen-reader announcements; styling stays minimal so the platform's\n wheel/typeahead stays untouched. */\n .ddga-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-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-calendar__select:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-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-calendar__select option {\n color: CanvasText;\n background-color: Canvas;\n }\n .ddga-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-calendar__grid {\n inline-size: 100%;\n border-collapse: collapse;\n }\n\n .ddga-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 stay\n inside the cell footprint. Flex column so a secondary day number (when\n `showSecondaryCalendar` is on) stacks neatly under the primary. */\n .ddga-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-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 text\n color. Selected state inherits the contrast color for both. */\n .ddga-calendar__cell-primary {\n font-size: inherit;\n line-height: 1;\n }\n .ddga-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-calendar__cell[data-selected] .ddga-calendar__cell-secondary {\n color: inherit;\n opacity: 0.85;\n }\n .ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-color-muted);\n }\n .ddga-calendar__cell[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-calendar__cell[data-selected] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-calendar__cell[data-disabled],\n .ddga-calendar__cell[data-unavailable] {\n color: var(--ddga-text-tertiary);\n cursor: not-allowed;\n }\n /* Outside-month cells are fully clickable in the single picker — selecting\n one navigates the visible month. Use a softer text color (no opacity\n reduction) so they read as low-emphasis-but-active peers, not disabled. */\n .ddga-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-calendar-toggle__button {\n transition: none;\n }\n .ddga-calendar-popover[data-entering],\n .ddga-calendar-popover[data-exiting] {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-calendar-popover {\n border: 1px solid CanvasText;\n }\n .ddga-calendar__cell[data-selected] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-calendar__cell[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-calendar-toggle__button[data-active] {\n background-color: Highlight;\n color: HighlightText;\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-base);\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-base);\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 /* Protect Arabic cursive joining — drop the tracking + casing when RTL\n (mirrors dropdown-menu.css / command.css). The shortcut hint is usually\n Latin but reset it too for parity. */\n [dir='rtl'] .ddga-menubar-menu__group-label {\n letter-spacing: normal;\n text-transform: none;\n }\n [dir='rtl'] .ddga-menubar-menu__shortcut {\n letter-spacing: normal;\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 /* ─── Dark mode ─── */\n\n /* The destructive-hover background uses the raw --ddga-error-50 tint\n (near-white), which doesn't adapt in dark mode. Override with a translucent\n red + a light-red foreground for contrast (mirrors dropdown-menu.css). */\n [data-theme='dark'] .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n background-color: rgb(217 45 32 / 0.24);\n color: var(--ddga-error-200, #fecdca);\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","@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 /* 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","@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 /* ─── 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 /* ─── Dark mode adjustments ─── */\n /* The `default` and `*-subtle` families fill from raw --ddga-*-100 tints, which\n stay light in dark mode (the raw scale isn't theme-flipped) — they'd render as\n light pills with dark text on a dark page. Recolor to translucent tints + a\n light (-200) foreground so they read as dark-surface chips. Mirrors alert.css /\n button.css. Solid + outline variants use semantic tokens and adapt on their own. */\n\n [data-theme='dark'] .ddga-badge--default,\n [data-theme='dark'] .ddga-badge--secondary-subtle {\n background-color: rgb(255 255 255 / 0.1);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-badge--primary-subtle {\n background-color: rgb(27 131 84 / 0.2);\n color: var(--ddga-sa-200, #b8eacb);\n }\n [data-theme='dark'] .ddga-badge--destructive-subtle {\n background-color: rgb(217 45 32 / 0.18);\n color: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-badge--success-subtle {\n background-color: rgb(7 148 85 / 0.18);\n color: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-badge--warning-subtle {\n background-color: rgb(220 104 3 / 0.18);\n color: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-badge--info-subtle {\n background-color: rgb(21 112 239 / 0.16);\n color: var(--ddga-info-200, #b2ddff);\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 /* DatePicker field/trigger chrome only. The calendar dropdown (popover,\n toggle, month grid) is shared with DateRangePicker — see calendar.css.\n Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. */\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 /* LTR default: segments read day-month-year left-to-right. */\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n /* RTL: segments must flow right-to-left so an Arabic date reads naturally —\n day (rightmost) → month → year → era (هـ, leftmost). react-aria emits the\n segments in that logical order (day, month, year, era); the LTR default\n above would lay them out reversed (day on the left, era on the right). */\n [dir='rtl'] .ddga-date-picker__input {\n direction: rtl;\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 show\n the focus background even if Tab lands on them — react-aria marks them with\n 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 /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-picker-trigger {\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__segment[data-focused] {\n forced-color-adjust: none;\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-date-picker__icon-button[data-focus-visible] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n box-shadow: none;\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 /* ─── Root (cmdk container) ─── */\n /*\n * Base look is the standalone inline box (bordered card). Inside\n * CommandDialog the `--dialog` modifier drops the border/bg because the\n * dialog shell owns the surface.\n */\n .ddga-command {\n display: flex;\n flex-direction: column;\n inline-size: 100%;\n min-block-size: 0;\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 overflow: hidden;\n }\n\n .ddga-command--dialog {\n border: 0;\n border-radius: 0;\n background-color: transparent;\n }\n\n /* ─── Search input row ─── */\n\n .ddga-command__input-wrapper {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-command__search-icon {\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-command__input {\n flex: 1 1 auto;\n min-inline-size: 0;\n padding-block: var(--ddga-space-3);\n border: 0;\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-command__input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── List + states ─── */\n\n .ddga-command__list {\n flex: 1 1 auto;\n min-block-size: 0;\n /* Cap height for the inline surface; the dialog overrides via its own\n max-block-size. cmdk scroll-into-view drives against this container. */\n max-block-size: min(360px, 60vh);\n overflow-y: auto;\n overflow-x: hidden;\n padding: var(--ddga-space-1);\n scroll-padding-block: var(--ddga-space-1);\n }\n\n .ddga-command__empty {\n padding-block: var(--ddga-space-5);\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 /* ─── Group + separator ─── */\n\n .ddga-command__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 /* Protect Arabic cursive joining — drop the tracking when RTL. */\n [dir='rtl'] .ddga-command__group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\n }\n\n .ddga-command__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-1);\n background-color: var(--ddga-color-border);\n }\n\n /* ─── Item ─── */\n\n .ddga-command__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding-block: var(--ddga-space-2);\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 /* cmdk highlights the active item (keyboard / hover) via data-selected. */\n .ddga-command__item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n .ddga-command__item[data-disabled='true'] {\n color: var(--ddga-text-tertiary);\n pointer-events: none;\n }\n\n .ddga-command__item-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-secondary);\n }\n .ddga-command__item-icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n\n .ddga-command__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 /* Shortcut hint sits at the inline-end (logical → RTL-correct). */\n .ddga-command__item-shortcut {\n margin-inline-start: auto;\n flex-shrink: 0;\n font-size: var(--ddga-font-size-xs);\n letter-spacing: 0.05em;\n color: var(--ddga-text-tertiary);\n }\n [dir='rtl'] .ddga-command__item-shortcut {\n letter-spacing: normal;\n }\n\n /* ─── Dialog shell (Radix Dialog) ─── */\n\n .ddga-command__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-command-dialog {\n /* Spotlight-style: horizontally centered, anchored near the top. Physical\n left + translateX for centering (direction-agnostic; pairing\n inset-inline-start with a physical translate would shift it off-screen\n in RTL — same rationale as Modal). */\n position: fixed;\n inset-block-start: 12vh;\n left: 50%;\n transform: translateX(-50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n inline-size: min(var(--ddga-command-dialog-width, 640px), calc(100vw - 2rem));\n max-block-size: min(70vh, 480px);\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 overflow: hidden;\n animation-duration: 180ms;\n animation-timing-function: ease;\n }\n /* The inner cmdk root + its list fill the dialog and scroll inside it. */\n .ddga-command-dialog .ddga-command {\n min-block-size: 0;\n }\n .ddga-command-dialog .ddga-command__list {\n max-block-size: none;\n }\n\n /* ─── Animations (Radix data-state) ─── */\n\n .ddga-command__overlay[data-state='open'] {\n animation-name: ddga-command-overlay-in;\n }\n .ddga-command__overlay[data-state='closed'] {\n animation-name: ddga-command-overlay-out;\n }\n .ddga-command-dialog[data-state='open'] {\n animation-name: ddga-command-dialog-in;\n }\n .ddga-command-dialog[data-state='closed'] {\n animation-name: ddga-command-dialog-out;\n }\n\n @keyframes ddga-command-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-command-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n @keyframes ddga-command-dialog-in {\n from {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n to {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n }\n @keyframes ddga-command-dialog-out {\n from {\n opacity: 1;\n transform: translateX(-50%) translateY(0) scale(1);\n }\n to {\n opacity: 0;\n transform: translateX(-50%) translateY(-8px) scale(0.98);\n }\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-command__overlay,\n .ddga-command-dialog {\n animation-duration: 0ms;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-command,\n .ddga-command-dialog {\n border: 1px solid CanvasText;\n }\n .ddga-command__item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-command__separator {\n background-color: CanvasText;\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","@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-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 /* ─── FAB (floating action button) ─── */\n /*\n * Orthogonal modifier: fully-rounded + elevated. Composes with any color\n * `variant` and with `size` — `size=\"icon\"` yields a circle, a text size an\n * extended pill. Positioning is the consumer's job (see the story recipe).\n * Shadow is static (no hover lift) to keep the base transition intact; the\n * color variant's own :hover handles the interaction feedback.\n */\n .ddga-button--fab {\n border-radius: var(--ddga-radius-full);\n box-shadow: var(--ddga-shadow-lg);\n }\n /* The base `.ddga-button:focus-visible` (defined later in this file) sets\n box-shadow for the ring, which would clobber the elevation. Use a\n two-class selector so this wins on specificity regardless of source order\n (matches the `.ddga-button--inverted.ddga-button--outline` idiom), and\n render the ring AND the drop shadow together. */\n .ddga-button.ddga-button--fab:focus-visible {\n border-color: var(--ddga-color-ring);\n box-shadow:\n 0 0 0 2px var(--ddga-color-ring),\n var(--ddga-shadow-lg);\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 (`.ddga-icon-flip`) is a shared utility — it\n now lives in reset.css (ddga-base) so Link and other components can reuse\n it without depending on this sheet. */\n\n /* ─── Dark mode adjustments ─── */\n /* The destructive subtle/outline/ghost families fill from raw --ddga-error-50/\n -100 tints, which stay light in dark mode (the raw scale isn't theme-flipped).\n Recolor to translucent error tints so they read as dark-surface chips —\n mirrors alert.css. Text uses the semantic --ddga-color-destructive, which\n already adapts. */\n [data-theme='dark'] .ddga-button--destructive-subtle {\n background-color: rgb(217 45 32 / 0.18);\n }\n [data-theme='dark']\n .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: rgb(217 45 32 / 0.28);\n }\n [data-theme='dark']\n .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']),\n [data-theme='dark']\n .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: rgb(217 45 32 / 0.18);\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 /* 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 /* Reset the row layout's baseline alignment back to the flex default —\n in a column, baseline shrinks term/details to content width instead\n of letting them fill, so a block value (e.g. a Badge) wouldn't\n stretch. Text still aligns to the start edge (right in RTL). */\n align-items: stretch;\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 /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-description-list--divided .ddga-description-list__item {\n border-block-end-color: CanvasText;\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 /* 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 /* accent + gradient share the sentiment-keyed tint vars (data-sentiment on\n the root). Defaults to brand when no sentiment. */\n :is(.ddga-stat--accent, .ddga-stat--gradient) {\n --ddga-stat-accent-fg: var(--ddga-sa-600);\n --ddga-stat-accent-bg: var(--ddga-sa-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n --ddga-stat-accent-fg: var(--ddga-success-600);\n --ddga-stat-accent-bg: var(--ddga-success-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n --ddga-stat-accent-fg: var(--ddga-error-600);\n --ddga-stat-accent-bg: var(--ddga-error-50);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n --ddga-stat-accent-fg: var(--ddga-gray-600);\n --ddga-stat-accent-bg: var(--ddga-gray-100);\n }\n :is(.ddga-stat--accent, .ddga-stat--gradient) .ddga-stat__icon {\n background-color: var(--ddga-stat-accent-bg);\n color: var(--ddga-stat-accent-fg);\n }\n\n /* accent: inline-start edge bar. */\n .ddga-stat--accent {\n border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n }\n\n /* gradient: soft sentiment-tinted surface (elevated, borderless). The tint\n fades from the inline-start corner; flip the angle in RTL. */\n .ddga-stat--gradient {\n border-color: transparent;\n box-shadow: var(--ddga-shadow-sm);\n background-image: linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);\n }\n [dir='rtl'] .ddga-stat--gradient {\n background-image: linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%);\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'] :is(.ddga-stat--accent, .ddga-stat--gradient) {\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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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'] :is(.ddga-stat--accent, .ddga-stat--gradient)[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 /* Reset the tracking in RTL — values can carry Arabic text (e.g. \"مليون ريال\"),\n and letter-spacing breaks Arabic cursive joining (mirrors __label above). */\n [dir='rtl'] .ddga-stat__value {\n letter-spacing: normal;\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 /* Chip: same text color, wrapped in a sentiment-tinted pill. The raw -50\n tints get dark overrides below (mirrors the accent badge). */\n .ddga-stat__change--chip {\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n }\n .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: var(--ddga-success-50);\n }\n .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: var(--ddga-error-50);\n }\n [data-theme='dark'] .ddga-stat__change--chip {\n background-color: rgb(255 255 255 / 0.08);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--positive {\n background-color: rgb(7 148 85 / 0.18);\n }\n [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--negative {\n background-color: rgb(217 45 32 / 0.18);\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 /* ─── Chart slot (consumer-supplied sparkline) ─── */\n /* A styled slot with a consistent height; the dropped-in chart stretches to\n fill. The library ships no charting dependency. */\n .ddga-stat__chart {\n margin-block-start: var(--ddga-space-2);\n block-size: 2.5rem;\n }\n .ddga-stat__chart > svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* ─── Sizes (scale padding + value; lg/xl also open 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 /* Hero/display: no font-size token sits above 3xl, so the display value uses\n a component-local rem (precedent: the .625rem label size). */\n .ddga-stat--xl {\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-8);\n }\n .ddga-stat--xl .ddga-stat__value {\n font-size: 2.5rem;\n line-height: 1.1;\n }\n .ddga-stat--xl .ddga-stat__chart {\n block-size: 3.25rem;\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 /* `columns` is a responsive MAX, not a fixed count: up to N columns on wide\n containers, wrapping down (N → … → 1) as the container narrows — no crush,\n no overflow. The track minimum is the larger of the readable floor (13rem)\n and the width N columns would occupy, so auto-fit packs at most N per row.\n The `100%` resolves against the GROUP (not the viewport), so it is\n container-aware — correct even in a narrow panel on a wide screen, with no\n media query needed. */\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n max(\n 13rem,\n calc(\n (100% - (var(--ddga-stat-group-columns) - 1) * var(--ddga-stat-group-gap)) /\n var(--ddga-stat-group-columns)\n )\n ),\n 1fr\n )\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 + chip backgrounds flatten to Canvas; a border keeps them visible. */\n .ddga-stat__icon,\n .ddga-stat__change--chip {\n border: 1px solid CanvasText;\n }\n .ddga-stat--accent {\n border-inline-start-color: Highlight;\n }\n /* gradient flattens its tinted surface + has a transparent border, so it\n would lose its boundary — restore one. */\n .ddga-stat--gradient {\n border: 1px solid CanvasText;\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='true' on the actively highlighted item (keyboard\n or hover) — that's the background below. The chosen value is a distinct\n concept: the component marks it with data-active='' and shows it via the\n check icon (not a background), so the highlight and the selection never\n visually collide. */\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 /* Protect Arabic cursive joining — drop the tracking when RTL. */\n [dir='rtl'] .ddga-combobox-group [cmdk-group-heading] {\n letter-spacing: normal;\n text-transform: none;\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-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-combobox-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n}\n","@layer ddga-components {\n /* Semantic <table> compound. Density/zebra/borders cascade from the root\n (.ddga-table) to leaf parts via descendant selectors. Logical properties\n throughout, with one [dir='rtl'] override for the selected-row accent\n stripe (box-shadow insets are physical). Sort carets are vertical (not\n mirrored). */\n\n /* ─── Scroll region ─── */\n\n .ddga-table__region {\n inline-size: 100%;\n /* Horizontal scroll for wide tables. Vertical stays clipped (the region\n grows to content height, so nothing is cut) until `maxHeight` caps it —\n at which point the component sets `overflow-y: auto` inline so the body\n scrolls and `stickyHeader` engages. Keeping vertical hidden by default\n avoids a spurious vertical scrollbar on unconstrained tables. */\n overflow-x: auto;\n overflow-y: hidden;\n /* Contain the sticky header's stacking and give a clean focus ring. */\n border-radius: var(--ddga-radius-md);\n }\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n\n /* ─── Table base ─── */\n\n .ddga-table {\n --ddga-table-pad-block: var(--ddga-space-3);\n --ddga-table-pad-inline: var(--ddga-space-4);\n\n inline-size: 100%;\n border-collapse: collapse;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n background-color: var(--ddga-color-card);\n text-align: start;\n }\n\n /* ─── Density ─── */\n\n .ddga-table--sm {\n --ddga-table-pad-block: var(--ddga-space-2);\n --ddga-table-pad-inline: var(--ddga-space-3);\n }\n .ddga-table--md {\n --ddga-table-pad-block: var(--ddga-space-3);\n --ddga-table-pad-inline: var(--ddga-space-4);\n }\n .ddga-table--lg {\n --ddga-table-pad-block: var(--ddga-space-4);\n --ddga-table-pad-inline: var(--ddga-space-5);\n }\n\n /* ─── Head & cell ─── */\n\n .ddga-table__head,\n .ddga-table__cell {\n padding-block: var(--ddga-table-pad-block);\n padding-inline: var(--ddga-table-pad-inline);\n text-align: start;\n vertical-align: middle;\n }\n\n .ddga-table__head {\n color: var(--ddga-text-secondary);\n font-weight: var(--ddga-font-weight-semibold);\n white-space: nowrap;\n /* Header always sits above the body via a bottom rule. */\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n /* Logical alignment (RTL-safe). */\n .ddga-table__head--align-start,\n .ddga-table__cell--align-start {\n text-align: start;\n }\n .ddga-table__head--align-center,\n .ddga-table__cell--align-center {\n text-align: center;\n }\n .ddga-table__head--align-end,\n .ddga-table__cell--align-end {\n text-align: end;\n }\n\n /* ─── Caption ─── */\n\n .ddga-table__caption {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-table-pad-inline);\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n text-align: start;\n caption-side: bottom;\n }\n\n /* ─── Body rows ─── */\n\n .ddga-table__body .ddga-table__row {\n transition: background-color 120ms ease;\n }\n .ddga-table__body .ddga-table__row:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-table__body .ddga-table__row[data-state='selected'] {\n background-color: var(--ddga-color-muted);\n /* Inline-start accent stripe. box-shadow insets are physical (no logical\n form exists), so flip the x-offset in RTL — the project's prescribed\n [dir='rtl'] override for direction-specific properties. */\n box-shadow: inset 2px 0 0 0 var(--ddga-color-primary);\n }\n [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n box-shadow: inset -2px 0 0 0 var(--ddga-color-primary);\n }\n\n /* ─── Footer ─── */\n\n .ddga-table__footer {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n border-block-start: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Divided (row dividers) ─── */\n\n .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child) {\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Striped (zebra) ─── */\n\n .ddga-table--striped .ddga-table__body .ddga-table__row:nth-child(even) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Bordered (full grid) ─── */\n\n .ddga-table--bordered .ddga-table__head,\n .ddga-table--bordered .ddga-table__cell {\n border: 1px solid var(--ddga-color-border);\n }\n\n /* ─── Sticky header ─── */\n\n .ddga-table--sticky .ddga-table__header .ddga-table__head {\n position: sticky;\n inset-block-start: 0;\n z-index: 1;\n /* Solid bg so body rows don't bleed through while scrolling. */\n background-color: var(--ddga-color-card);\n }\n\n /* ─── Sort affordance ─── */\n\n .ddga-table__sort-button {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n margin: 0;\n padding: 0;\n border: 0;\n background: none;\n font: inherit;\n color: inherit;\n cursor: pointer;\n }\n .ddga-table__sort-button: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-table__sort-icon {\n display: inline-flex;\n flex-direction: column;\n line-height: 0;\n }\n .ddga-table__sort-icon > svg {\n inline-size: 0.75em;\n block-size: 0.75em;\n }\n /* Neutral state shows both carets dimmed; active state shows one in the\n accent color. */\n .ddga-table__sort-icon > svg + svg {\n margin-block-start: -0.2em;\n }\n [aria-sort='none'] .ddga-table__sort-icon {\n color: var(--ddga-text-tertiary);\n }\n [aria-sort='ascending'] .ddga-table__sort-icon,\n [aria-sort='descending'] .ddga-table__sort-icon {\n color: var(--ddga-color-primary);\n }\n\n /* ─── Dark mode ─── */\n /* Semantic tokens (--ddga-color-muted/-card/-border/-primary) already adapt,\n so nothing token-raw here needs a [data-theme='dark'] override. */\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-table__head {\n border-block-end-color: CanvasText;\n }\n .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child),\n .ddga-table--bordered .ddga-table__head,\n .ddga-table--bordered .ddga-table__cell,\n .ddga-table__footer {\n border-color: CanvasText;\n }\n .ddga-table__body .ddga-table__row[data-state='selected'] {\n box-shadow: inset 2px 0 0 0 Highlight;\n }\n [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n box-shadow: inset -2px 0 0 0 Highlight;\n }\n .ddga-table__sort-button:focus-visible,\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid Highlight;\n }\n }\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 /* 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: var(--ddga-gray-100);\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 /* ─── 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 /* ─── 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 /* 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.5;\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 /* ─── Forced colors (Windows High Contrast) ─── */\n\n /* The focus + drag-active indicators are box-shadow rings, which forced-colors\n neutralizes — restore them as a system-colored outline so keyboard focus and\n the active drop target stay visible. */\n @media (forced-colors: active) {\n .ddga-file-upload__dropzone:focus-within,\n .ddga-file-upload__dropzone[data-dragging] {\n outline: 2px solid Highlight;\n outline-offset: 2px;\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 .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 /* Sized by `width` alone — `aspect-ratio:1` keeps it round, so passing only\n `width` (the natural way to size a circle) no longer produces an oval. An\n explicit `height` (inline style) still overrides aspect-ratio. */\n width: 40px;\n aspect-ratio: 1;\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 /* ─── Dark mode ─── */\n /* The fill is the raw `--ddga-gray-200` tint, which the dark theme does NOT\n remap (only semantic `--ddga-color-*` adapt). Left alone it renders as a\n bright light box on dark surfaces, so map it to the semantic border gray.\n The wave shimmer already uses `--ddga-color-background` and is fine. */\n [data-theme='dark'] .ddga-skeleton {\n background-color: var(--ddga-color-border);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--pulse,\n .ddga-skeleton--wave::after {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n /* The fill conveys \"content loading here\", but `background-color` is forced\n away in HC. Outline the placeholder so it stays perceivable. */\n @media (forced-colors: active) {\n .ddga-skeleton {\n border: 1px solid GrayText;\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 /* Determinate fill: the component sets `inline-size: <pct>%` inline. Anchored\n to the track's inline-start, it mirrors for free in RTL (logical, no JS\n direction read). `100%` here is the no-JS/SSR fallback before the inline\n value lands; the indeterminate rule below overrides it to 40%. */\n inline-size: 100%;\n background-color: var(--ddga-progress-color, var(--ddga-color-primary));\n transition: inline-size 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 /* Segmented (radial stepper): each arc is track-colored until filled. */\n .ddga-circular-progress__segment {\n stroke: var(--ddga-gray-200);\n transition: stroke 200ms ease;\n }\n .ddga-circular-progress__segment--filled {\n stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n }\n\n /* Only the continuous (non-segmented) ring spins when indeterminate — a\n segmented ring is determinate, so don't rotate its empty arcs. */\n .ddga-circular-progress[data-state='indeterminate']:not([data-segmented])\n .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 /* ─── Dark mode ─── */\n /* The unfilled track is built from the raw `--ddga-gray-200` tint, which the\n dark theme does NOT remap (only semantic `--ddga-color-*` tokens adapt).\n Left alone it renders as a bright light band on dark surfaces, so map the\n track to the semantic border gray. The indicator stays `--ddga-color-*`\n (already dark-aware). */\n [data-theme='dark'] .ddga-progress {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-circular-progress__track,\n [data-theme='dark'] .ddga-circular-progress__segment {\n stroke: var(--ddga-color-border);\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 .ddga-circular-progress__segment {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n /* background/stroke colors are overridden by the system, which would make the\n fill indistinguishable from the track. Pin the fill to Highlight and the\n track to a dim system color so progress stays readable. */\n @media (forced-colors: active) {\n .ddga-progress {\n border: 1px solid CanvasText;\n }\n .ddga-progress__indicator {\n background-color: Highlight;\n }\n .ddga-circular-progress__track,\n .ddga-circular-progress__segment {\n stroke: GrayText;\n }\n .ddga-circular-progress__indicator,\n .ddga-circular-progress__segment--filled {\n stroke: Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Structure: a single real <input> (.ddga-input-otp__input)\n overlays the container transparently and owns focus/typing/paste/autofill;\n the slot row (.ddga-input-otp__row) is the decorative, aria-hidden display. */\n\n /* ─── Label ─── */\n\n .ddga-input-otp__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-otp__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Container (sizes to the slot row; anchors the overlay input) ─── */\n\n .ddga-input-otp {\n position: relative;\n display: inline-flex;\n color: var(--ddga-text-primary);\n }\n\n /* ─── Overlay input (the real, transparent control) ─── */\n\n .ddga-input-otp__input {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n margin: 0;\n padding: 0;\n border: 0;\n /* Transparent text + caret: the slots render the value, not the input. */\n color: transparent;\n background: transparent;\n caret-color: transparent;\n cursor: text;\n /* Suppress native selection UI — on iOS/Android the selection highlight +\n handles render over the transparent text and break the slot illusion.\n Typing and programmatic caret moves are unaffected. */\n -webkit-user-select: none;\n user-select: none;\n /* On top of the slots so a click anywhere focuses it. */\n z-index: 1;\n }\n\n .ddga-input-otp__input:focus {\n outline: none;\n }\n\n .ddga-input-otp__input:disabled {\n cursor: not-allowed;\n }\n\n /* ─── Slot row + groups (forced LTR in the markup) ─── */\n\n .ddga-input-otp__row {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n .ddga-input-otp__group {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n }\n\n /* ─── Slot ─── */\n\n .ddga-input-otp__slot {\n position: relative;\n display: flex;\n align-items: center;\n justify-content: center;\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-text-primary);\n font-variant-numeric: tabular-nums;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* The active slot (focused caret position) gets the ring. */\n .ddga-input-otp__slot[data-active] {\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n z-index: 1;\n }\n\n /* ─── Sizes ─── */\n\n .ddga-input-otp--sm .ddga-input-otp__slot {\n inline-size: 2rem;\n block-size: 2rem;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-input-otp--md .ddga-input-otp__slot {\n inline-size: 2.75rem;\n block-size: 2.75rem;\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-input-otp--lg .ddga-input-otp__slot {\n inline-size: 3.25rem;\n block-size: 3.25rem;\n font-size: var(--ddga-font-size-xl);\n }\n\n /* ─── Fake caret (active, empty slot) ─── */\n\n .ddga-input-otp__caret {\n position: absolute;\n inline-size: 1px;\n block-size: 1.125em;\n background-color: var(--ddga-text-primary);\n animation: ddga-input-otp-caret 1s step-end infinite;\n }\n\n @keyframes ddga-input-otp-caret {\n 0%,\n 100% {\n opacity: 1;\n }\n 50% {\n opacity: 0;\n }\n }\n\n /* ─── Separator (between groups) ─── */\n\n .ddga-input-otp__separator {\n display: flex;\n align-items: center;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-input-otp__separator-dash {\n inline-size: 0.75rem;\n block-size: 2px;\n background-color: var(--ddga-color-border);\n border-radius: 9999px;\n }\n\n /* ─── Error ─── */\n\n .ddga-input-otp--error .ddga-input-otp__slot {\n border-color: var(--ddga-color-error);\n }\n .ddga-input-otp--error .ddga-input-otp__slot[data-active] {\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-input-otp:has(input:disabled) {\n cursor: not-allowed;\n opacity: 0.5;\n }\n .ddga-input-otp:has(input:disabled) .ddga-input-otp__slot {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-input-otp__slot {\n transition: none;\n }\n .ddga-input-otp__caret {\n animation: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-input-otp__slot {\n border: 1px solid CanvasText;\n }\n .ddga-input-otp__slot[data-active] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-input-otp__caret {\n background-color: CanvasText;\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 last,\n stretching forward from this Step's indicator to the next Step's\n indicator. Logical properties handle the RTL flip — no JS, no JS\n 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 * Drawn on every step except the last: an OUTBOUND connector running from\n * THIS step's indicator center to the NEXT step's indicator center. The\n * indicator center sits at 24px / 2 = 12px from the step's start; the\n * negative inline-end (or block-end) reaches past this step's edge, across\n * the inter-step gap, to the next indicator. The circles paint over the line\n * (indicator z-index:1) so it reads as connecting circle-to-circle. Length\n * is independent of step width/height — only the fixed gap + 12px matters.\n * Color reflects THIS step's state — when this step is completed the line to\n * the next is completed too. (Visual-only progress indicator.)\n */\n\n .ddga-steps--horizontal .ddga-steps__step:not(:last-child)::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 /* From this indicator's center forward to the next indicator's center. */\n inset-inline-start: 12px;\n inset-inline-end: calc(-1 * (var(--ddga-space-2) + 12px));\n background-color: var(--ddga-color-border);\n }\n\n .ddga-steps--vertical .ddga-steps__step:not(:last-child)::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 /* From this indicator's center down to the next indicator's center. */\n inset-block-start: 12px;\n inset-block-end: calc(-1 * (var(--ddga-space-3) + 12px));\n background-color: var(--ddga-color-border);\n }\n\n /* A completed step colours its OUTBOUND line — the path leaving a completed\n step toward the next reflects that the journey past it is done. */\n .ddga-steps__step--completed:not(:last-child)::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:not(:last-child)::before {\n background-color: CanvasText;\n }\n .ddga-steps__step--completed:not(:last-child)::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 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-8);\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-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 /* ─── 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 /* 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: var(--ddga-gray-100);\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 /* ─── 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 — the opt-in scrollable middle region (mirrors DrawerBody): it grows\n to fill the space between a pinned header and footer and scrolls internally\n when content overflows, so a tall body never clips and the footer stays\n visible with zero consumer config. `min-block-size:0` lets it shrink below\n its content so the overflow engages. */\n .ddga-modal__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding-inline: var(--ddga-space-5);\n }\n\n /* Unwrapped content: consumers may still drop raw paragraphs/forms directly\n under ModalContent for short, non-scrolling bodies — this gives them the\n same inline padding without requiring ModalBody. (ModalFooter owns its own\n full padding, so it's unaffected by this inline-padding rule.) */\n .ddga-modal__header ~ * {\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 /* Styled <a> text-link primitive. Three visual variants on one axis\n (default / subtle / standalone); the `external` affordance is orthogonal\n (handled in the React layer + the __icon--external element). Size is NOT\n a variant links inherit font-size from surrounding text and scale their\n icons in `em`. Dark mode needs no overrides (semantic tokens adapt). */\n\n .ddga-link {\n color: var(--ddga-color-primary);\n font-family: inherit;\n font-size: inherit;\n border-radius: var(--ddga-radius-sm);\n text-underline-offset: 2px;\n cursor: pointer;\n transition:\n color 150ms ease,\n text-decoration-color 150ms ease;\n }\n\n .ddga-link:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n\n /* ─── default inline prose link, always underlined ─── */\n /* Underline is permanent: color alone fails WCAG 1.4.1 for a link sitting\n inside a block of text. */\n\n .ddga-link--default {\n text-decoration: underline;\n }\n\n .ddga-link--default:hover {\n color: var(--ddga-color-primary-hover);\n }\n\n .ddga-link--default:active {\n color: var(--ddga-color-primary-active);\n }\n\n /* ─── subtle chrome link (footers, meta rows), underline on hover ─── */\n\n .ddga-link--subtle {\n color: var(--ddga-text-secondary);\n text-decoration: none;\n }\n\n .ddga-link--subtle:hover {\n color: var(--ddga-color-primary);\n text-decoration: underline;\n }\n\n .ddga-link--subtle:active {\n color: var(--ddga-color-primary-active);\n }\n\n /* ─── standalone block CTA, icon-friendly ─── */\n\n .ddga-link--standalone {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n font-weight: 500;\n text-decoration: none;\n }\n\n .ddga-link--standalone:hover {\n color: var(--ddga-color-primary-hover);\n text-decoration: underline;\n }\n\n .ddga-link--standalone:active {\n color: var(--ddga-color-primary-active);\n }\n\n /* ─── Icons ─── */\n\n .ddga-link__icon {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n }\n\n .ddga-link__icon > svg {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* Inline variants (default/subtle) don't establish a flex gap, so give icons\n breathing room from the text via logical margins (RTL-safe). standalone\n uses `gap` and needs none. */\n .ddga-link--default [data-slot='link-start-icon'],\n .ddga-link--subtle [data-slot='link-start-icon'] {\n margin-inline-end: 0.2em;\n vertical-align: middle;\n }\n\n .ddga-link--default [data-slot='link-end-icon'],\n .ddga-link--default [data-slot='link-external-icon'],\n .ddga-link--subtle [data-slot='link-end-icon'],\n .ddga-link--subtle [data-slot='link-external-icon'] {\n margin-inline-start: 0.2em;\n vertical-align: middle;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-link {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-link,\n .ddga-link--default,\n .ddga-link--subtle,\n .ddga-link--standalone {\n color: LinkText;\n }\n .ddga-link--default:hover,\n .ddga-link--subtle:hover,\n .ddga-link--standalone:hover {\n color: LinkText;\n }\n .ddga-link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\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 /* ─── 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 .ddga-card--gradient .ddga-card__icon {\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-block-start: 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 /* Leading icon above the title. Inherits the header's column flow; sized +\n tinted so a bare SVG reads as a deliberate feature icon with no consumer\n styling. The extra block-end margin sets it apart from the tight\n title/description pairing below it. */\n .ddga-card__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n /* Hug the header's start edge (left in LTR, right in RTL) so the icon lines\n up above the title rather than stretching full-width + centering. */\n align-self: start;\n margin-block-end: var(--ddga-space-1);\n color: var(--ddga-color-primary);\n }\n .ddga-card__icon > svg {\n inline-size: 1.75rem;\n block-size: 1.75rem;\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-block-start: 0;\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-block-start: 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-block-start: 0;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-card {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n /* box-shadow + gradient are dropped in forced-colors — keep a visible\n boundary and a real focus outline so cards and their focus state survive. */\n .ddga-card {\n border: 1px solid CanvasText;\n }\n .ddga-card--interactive:focus-visible {\n outline: 2px solid CanvasText;\n outline-offset: 2px;\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 /* ─── 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 /* ─── Dark mode adjustments ─── */\n /* The fallback schemes paint raw -100 tints with -700/-800 text — light\n chips that stay legible but don't adapt to a dark page on their own. Flip\n each to a dark -800/-900 surface with a light -100/-200 foreground\n (mirrors alert.css). */\n\n [data-theme='dark'] .ddga-avatar__fallback--default {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--primary {\n background-color: var(--ddga-sa-900);\n color: var(--ddga-sa-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--secondary {\n background-color: var(--ddga-gray-700);\n color: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-avatar__fallback--success {\n background-color: var(--ddga-success-900);\n color: var(--ddga-success-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--warning {\n background-color: var(--ddga-warning-900);\n color: var(--ddga-warning-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--destructive {\n background-color: var(--ddga-error-900);\n color: var(--ddga-error-200);\n }\n [data-theme='dark'] .ddga-avatar__fallback--info {\n background-color: var(--ddga-info-900);\n color: var(--ddga-info-200);\n }\n [data-theme='dark'] .ddga-avatar__status--offline {\n background-color: var(--ddga-gray-500);\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 .ddga-avatar-group > .ddga-avatar {\n outline: 2px solid CanvasText;\n outline-offset: -1px;\n }\n }\n}\n","@layer ddga-components {\n /* The single-panel disclosure primitive (the building block Accordion is\n built on). The trigger is intentionally minimal — consumers usually bring\n their own button via `asChild`; we only reset the native button chrome and\n provide a focus ring. Radix exposes `--radix-collapsible-content-height` on\n the Content element when open, so we height-slide the disclosure cleanly;\n the inner wrapper carries the clip and stays padding-free (content is\n generic — no opinionated spacing). */\n\n /* ─── Root ─── */\n\n .ddga-collapsible {\n display: block;\n color: var(--ddga-text-primary);\n }\n\n /* ─── Trigger (minimal disclosure button) ─── */\n\n .ddga-collapsible__trigger {\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n padding: 0;\n color: inherit;\n font: inherit;\n text-align: start;\n cursor: pointer;\n }\n\n .ddga-collapsible__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 .ddga-collapsible__trigger:disabled,\n .ddga-collapsible__trigger[aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.6;\n }\n\n /* ─── Content (animated disclosure) ─── */\n\n .ddga-collapsible__content {\n overflow: hidden;\n color: var(--ddga-text-secondary);\n }\n\n .ddga-collapsible__content[data-state='open'] {\n animation: ddga-collapsible-down 200ms ease-out;\n }\n .ddga-collapsible__content[data-state='closed'] {\n animation: ddga-collapsible-up 200ms ease-out;\n }\n\n /* The inner wrapper is the animation/margin-collapse boundary so child\n margins don't punch through the clipped container mid-slide. No padding\n (content is generic), but a sensible line-height matches the rest of the\n system's content surfaces. */\n .ddga-collapsible__content-inner {\n line-height: 1.5;\n }\n\n @keyframes ddga-collapsible-down {\n from {\n block-size: 0;\n }\n to {\n block-size: var(--radix-collapsible-content-height);\n }\n }\n @keyframes ddga-collapsible-up {\n from {\n block-size: var(--radix-collapsible-content-height);\n }\n to {\n block-size: 0;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-collapsible__content[data-state='open'],\n .ddga-collapsible__content[data-state='closed'] {\n animation: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-collapsible__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* DateRangePicker field/trigger chrome + range-fill cell styling. The calendar\n dropdown (popover, toggle, month grid, day cells) is shared with DatePicker —\n see calendar.css. Wrapper (.ddga-field) + helper/error (.ddga-field__message)\n are shared — see field.css. */\n\n /* ─── Label + required ─── */\n\n .ddga-date-range-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-range-picker__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (react-aria Group: start input + separator + end input + button) ─── */\n\n .ddga-date-range-picker-trigger {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\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-range-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-range-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-range-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-range-picker-trigger[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-date-range-picker-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-date-range-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 /* ─── DateInputs + segments + separator ─── */\n\n .ddga-date-range-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 0 auto;\n min-inline-size: 0;\n /* LTR default: each date reads day-month-year left-to-right. The flex row\n itself follows page dir, so in RTL the start input still sits on the\n right (start of the range). */\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\n\n /* RTL: each date's segments flow right-to-left so it reads naturally —\n day (rightmost) → month → year → era (هـ, leftmost). The trigger row keeps\n following page dir (start input on the right); only the inner segment\n order flips. Mirrors DatePicker — keep both pickers in lockstep. */\n [dir='rtl'] .ddga-date-range-picker__input {\n direction: rtl;\n }\n\n .ddga-date-range-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 .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n .ddga-date-range-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-range-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-text-tertiary);\n }\n .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-date-range-picker__separator {\n flex: 0 0 auto;\n padding-inline: var(--ddga-space-1);\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Calendar icon button (popover trigger) ─── */\n\n .ddga-date-range-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-range-picker__icon-button:hover {\n color: var(--ddga-color-foreground);\n background-color: var(--ddga-color-muted);\n }\n .ddga-date-range-picker__icon-button[data-focus-visible] {\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\n .ddga-date-range-picker__icon-button[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-range-picker__icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Range fill (scoped to RangeCalendar via .ddga-calendar--range) ─── */\n\n /* react-aria emits data-selected on EVERY in-range cell, plus\n data-selection-start / data-selection-end on the two endpoints. We paint a\n soft connector across the whole range on the <td> (so it spans the full\n column width and reads continuous), keep the endpoints as solid primary\n circles (the base .ddga-calendar__cell[data-selected] rule), and make the\n in-between cells transparent so only the td connector shows behind them. */\n\n /* Connector bar on the td — spans the full column, unlike the 2rem inner cell. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: color-mix(in srgb, var(--ddga-color-primary) 12%, transparent);\n }\n /* Round only the outer edges of the bar (logical → flips in RTL). A single-day\n range carries both attrs, so it rounds to a full pill. */\n .ddga-calendar--range td:has([data-selection-start]) {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-calendar--range td:has([data-selection-end]) {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n\n /* In-between days: let the td connector show through; keep text legible. */\n .ddga-calendar--range\n .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]) {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n }\n /* The endpoints stay solid primary (base rule); their secondary calendar text\n already inherits the contrast color via calendar.css. */\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-range-picker-trigger {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-date-range-picker-trigger {\n border: 1px solid CanvasText;\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n /* color-mix backgrounds disappear in forced-colors — restore a visible range\n using the Highlight system color on the connector td + endpoints. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: Highlight;\n }\n .ddga-calendar--range .ddga-calendar__cell[data-selected] {\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 TagInput-specific styles live here. The control box\n mirrors Input's box (border / focus ring / sizes / error / disabled) but\n wraps: chips + the text input share one flex-wrap flow, so the box grows\n vertically (min-block-size, not a fixed height) as chips wrap. */\n\n /* ─── Label ─── */\n\n .ddga-tag-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 /* Required asterisk — mirrors Input so every text-entry control marks\n required the same way. */\n .ddga-tag-input__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Control (the bordered, wrapping box) ─── */\n\n .ddga-tag-input {\n display: flex;\n flex-wrap: wrap;\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 cursor: text;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (min-heights match Input; vertical padding lets chips breathe) ─── */\n\n .ddga-tag-input--sm {\n min-block-size: 32px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tag-input--md {\n min-block-size: 36px;\n padding-block: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n }\n .ddga-tag-input--lg {\n min-block-size: 40px;\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-lg);\n }\n\n /* ─── Chip list (display:contents so <li> chips flow inline with the input;\n explicit roles in the JSX preserve list semantics regardless) ─── */\n\n .ddga-tag-input__list,\n .ddga-tag-input__item {\n display: contents;\n }\n\n /* ─── Field (the actual <input> — transparent, borderless, grows to fill) ─── */\n\n .ddga-tag-input__field {\n flex: 1 1 60px;\n min-inline-size: 60px;\n block-size: 1.5rem;\n padding: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n\n .ddga-tag-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n\n /* ─── Focus (ring on the control via :focus-within) ─── */\n\n .ddga-tag-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-tag-input--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-tag-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-tag-input[data-disabled] {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n .ddga-tag-input[data-disabled] .ddga-tag-input__field {\n cursor: not-allowed;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tag-input {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-tag-input {\n border: 1px solid CanvasText;\n }\n .ddga-tag-input:focus-within {\n outline: 2px solid Highlight;\n }\n .ddga-tag-input[data-disabled] {\n color: GrayText;\n border-color: GrayText;\n }\n }\n}\n","/* Arabic abjad alphabetic counter — أ ب ج … in the classical abjad order.\n Defined explicitly because, unlike `arabic-indic`, it is NOT natively\n supported across browsers. Symbols are the exact W3C \"Ready-made Counter\n Styles\" sequence (note `\\647\\200D` = HEH + ZWJ so it joins correctly).\n Counter-style names are global, so this lives outside the cascade layer. */\n@counter-style ddga-arabic-abjad {\n system: fixed;\n symbols: '\\627' '\\628' '\\62C' '\\62F' '\\647\\200D' '\\648' '\\632' '\\62D' '\\637' '\\64A' '\\643' '\\644'\n '\\645' '\\646' '\\633' '\\639' '\\641' '\\635' '\\642' '\\631' '\\634' '\\62A' '\\62B' '\\62E' '\\630'\n '\\636' '\\638' '\\63A';\n suffix: '. ';\n}\n\n@layer ddga-components {\n /* Presentational content list. Layout cascades from the root variant to the\n items via descendant selectors (DescriptionList / Timeline technique).\n Logical properties keep markers, padding and the trailing action on the\n correct side in RTL. Colours use semantic tokens, so dark mode adapts on\n its own; no coloured backgrounds → no forced-colors block needed. */\n\n .ddga-list {\n margin: 0;\n padding: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-list__item {\n color: inherit;\n }\n\n /* ─── plain: no markers, flex rows (icon / content / action) ─── */\n\n .ddga-list--plain {\n list-style: none;\n }\n\n .ddga-list--plain .ddga-list__item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n padding-block: var(--ddga-space-2);\n }\n\n /* ─── bulleted / numbered / lettered: native ::marker on a list-item box ─── */\n\n .ddga-list--bulleted,\n .ddga-list--numbered,\n .ddga-list--lettered {\n /* Room for the marker on the inline-start side. */\n padding-inline-start: var(--ddga-space-5);\n }\n\n .ddga-list--bulleted {\n list-style: disc;\n }\n\n /* Ordered markers are direction-localized: Latin in LTR, Arabic in RTL —\n the [dir='rtl'] overrides below swap the counter style. */\n .ddga-list--numbered {\n list-style: decimal;\n }\n\n .ddga-list--lettered {\n list-style: lower-alpha;\n }\n\n .ddga-list--bulleted .ddga-list__item,\n .ddga-list--numbered .ddga-list__item,\n .ddga-list--lettered .ddga-list__item {\n display: list-item;\n padding-block: var(--ddga-space-1);\n line-height: 1.5;\n }\n\n .ddga-list--bulleted .ddga-list__item::marker,\n .ddga-list--numbered .ddga-list__item::marker,\n .ddga-list--lettered .ddga-list__item::marker {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── RTL: localize ordered markers to Arabic counter styles ───\n arabic-indic (١ ٢ ٣) is natively supported; arabic-abjad (أ ب ج) uses the\n @counter-style defined above. Logical padding already flips the side. */\n [dir='rtl'] .ddga-list--numbered {\n list-style-type: arabic-indic;\n }\n\n [dir='rtl'] .ddga-list--lettered {\n list-style-type: ddga-arabic-abjad;\n }\n\n /* ─── Slots ─── */\n\n .ddga-list__icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n color: var(--ddga-text-tertiary);\n }\n\n /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n .ddga-list__icon svg {\n flex-shrink: 0;\n }\n\n .ddga-list__content {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n /* Let the content column shrink so long text truncates rather than\n shoving the action slot off the row. */\n min-inline-size: 0;\n flex: 1 1 auto;\n }\n\n .ddga-list__primary {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4;\n }\n\n .ddga-list__secondary {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-list__action {\n /* Push to the inline-end edge; stays correct under RTL via the logical\n margin. */\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n flex-shrink: 0;\n margin-inline-start: auto;\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Dividers between items ─── */\n\n .ddga-list--divided .ddga-list__item {\n border-block-end: 1px solid var(--ddga-color-border);\n }\n .ddga-list--divided .ddga-list__item:last-child {\n border-block-end: 0;\n }\n}\n","@layer ddga-components {\n /* SearchBox is the Input control with `type=\"search\"`; it reuses input.css\n for the box, sizing, focus ring, adornments and the clear button. The\n `.ddga-search-box` class lands on the Input control element, so the inner\n field is a descendant. Only the search-specific overrides live here. */\n\n /* Suppress the browser's native search affordances — we render our own\n magnifier (leading) and clear button (trailing). Without this, WebKit\n paints a second × inside the field. */\n .ddga-search-box .ddga-input__field::-webkit-search-cancel-button,\n .ddga-search-box .ddga-input__field::-webkit-search-decoration,\n .ddga-search-box .ddga-input__field::-webkit-search-results-button,\n .ddga-search-box .ddga-input__field::-webkit-search-results-decoration {\n appearance: none;\n display: none;\n }\n}\n","@layer ddga-components {\n /* Visual-only quote. Root is a <figure> when attribution is present, else a\n bare <blockquote> — both carry .ddga-quote. Accent + surfaces flow through\n semantic tokens, so dark mode adapts with no [data-theme] overrides.\n Logical properties keep the accent border + mark RTL-correct. */\n\n .ddga-quote {\n --ddga-quote-accent: var(--ddga-color-primary);\n\n display: block;\n margin: 0;\n color: var(--ddga-text-primary);\n font-family: inherit;\n line-height: 1.6;\n }\n\n /* When the root is a <figure>, the inner <blockquote> resets its UA margin. */\n .ddga-quote__blockquote {\n margin: 0;\n }\n\n .ddga-quote__content {\n /* Quote text. Inherits font-size from the variant / surrounding context. */\n color: inherit;\n }\n\n .ddga-quote__content p {\n margin-block: 0;\n }\n .ddga-quote__content p + p {\n margin-block-start: var(--ddga-space-3);\n }\n\n /* ─── Decorative quote mark ─── */\n\n .ddga-quote__mark {\n display: block;\n inline-size: 2em;\n block-size: 2em;\n margin-block-end: var(--ddga-space-1);\n color: var(--ddga-quote-accent);\n opacity: 0.35;\n }\n\n /* Opening mark mirrors so the curl faces the (right-aligned) text in RTL. */\n [dir='rtl'] .ddga-quote__mark {\n transform: scaleX(-1);\n }\n\n /* ─── Caption (attribution) ─── */\n\n .ddga-quote__caption {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n margin-block-start: var(--ddga-space-3);\n }\n\n .ddga-quote__avatar {\n flex: none;\n display: inline-flex;\n }\n\n .ddga-quote__attribution {\n display: flex;\n flex-direction: column;\n min-inline-size: 0;\n }\n\n .ddga-quote__author {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-semibold);\n font-style: normal;\n }\n\n .ddga-quote__byline {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-sm);\n }\n\n .ddga-quote__source {\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n font-style: italic;\n }\n\n /* ─── Variant: default (inline-start accent border) ─── */\n\n .ddga-quote--default {\n border-inline-start: 3px solid var(--ddga-quote-accent);\n padding-inline-start: var(--ddga-space-4);\n padding-block: var(--ddga-space-1);\n }\n\n /* ─── Variant: pullquote (large, editorial, centered) ─── */\n\n .ddga-quote--pullquote {\n max-inline-size: 42rem;\n margin-inline: auto;\n padding-block: var(--ddga-space-4);\n text-align: center;\n font-size: var(--ddga-font-size-2xl);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4;\n }\n .ddga-quote--pullquote .ddga-quote__mark {\n margin-inline: auto;\n inline-size: 2.5em;\n block-size: 2.5em;\n }\n .ddga-quote--pullquote .ddga-quote__caption {\n justify-content: center;\n margin-block-start: var(--ddga-space-4);\n }\n .ddga-quote--pullquote .ddga-quote__attribution {\n align-items: center;\n }\n\n /* ─── Variant: testimonial (card surface) ─── */\n\n .ddga-quote--testimonial {\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-lg);\n background-color: var(--ddga-color-background);\n box-shadow: var(--ddga-shadow-sm);\n padding: var(--ddga-space-6);\n }\n\n /* ─── Variant: plain (bare) ───\n No border, no surface — relies on content + caption only. */\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-quote--default {\n border-inline-start-color: CanvasText;\n }\n .ddga-quote--testimonial {\n border-color: CanvasText;\n }\n .ddga-quote__mark {\n opacity: 1;\n }\n }\n}\n","@layer ddga-components {\n /* Constrains content to a fixed width-to-height ratio via the native CSS\n `aspect-ratio` property (Baseline 2021) — no padding-bottom hack. The ratio\n comes from the `--ddga-aspect-ratio` custom property the component sets\n inline (default 1). Full-width by default; the consumer constrains the\n width, the height follows. Direction-agnostic — `aspect-ratio` and the\n logical sizing properties need no RTL handling. No color surface, so no\n dark-mode or forced-colors block is required. */\n\n .ddga-aspect-ratio {\n position: relative;\n inline-size: 100%;\n aspect-ratio: var(--ddga-aspect-ratio, 1);\n overflow: hidden;\n /* Applies when `asChild` renders the class directly onto a replaced element\n (<img>/<video>); a no-op on the wrapper <div>. */\n object-fit: cover;\n }\n\n /* Wrapper case: the single child fills the ratio box. */\n .ddga-aspect-ratio > * {\n block-size: 100%;\n inline-size: 100%;\n }\n /* `object-fit` only affects replaced elements — scope it so the intent is\n explicit (a no-op on <div>/custom children, cover-crops media). */\n .ddga-aspect-ratio > :is(img, video, canvas, iframe) {\n object-fit: cover;\n }\n}\n"],"names":[]}