@dev-dga/css 0.13.0 → 1.1.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 (6) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/components/calendar.css +1 -1
  3. package/dist/components/calendar.css.map +1 -1
  4. package/dist/index.css +1 -1
  5. package/dist/index.css.map +1 -1
  6. package/package.json +2 -2
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"mappings":"AAAA,iBEAA,+9LA2MA,mMaxMA,8jEUFA,seAgBA,0fAgBA,ugBAgBA,iiBAgBA,iiBAgBA,0fAgBA,6fAgBA,8iBlBjHA,0DAQA,2MAWA,wCAQA,4KAkBA,gDP7CA,uBgBKE,uEAMA,iFAMA,8DAIA,0DAIA,+FAMA,4DC5BA,4VAqBA,4GAIA,sHAMA,kHAIA,0HAMA,qEAIA,yGAMA,qHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,gIAKA,uHAMA,2GAIA,uHAMA,2FAIA,qHAMA,6EAGA,iFAGA,6EAGA,oFAMA,wHAGA,2HAGA,0GAGA,iHAGA,wHAIA,6LAIA,yMAOA,wHAMA,uHAMA,wHAOA,yFAMA,0FAQA,0FAMA,0FASA,wDAQA,kKAMA,gOAIA,kOAIA,wKAMA,6IAOA,sHAMA,6TAKA,gUAKA,yOAOA,0IAIA,2FAMA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,8JAOA,uOAOA,yLAOA,gMAMA,4JAOA,8IAOA,mHAgBA,8EAGA,6HAIA,+NASA,8BACE,yCAGA,uDAGA,6FOxYF,gEAMA,wNAUA,uDAMA,kZAoBA,wEAIA,0EAOA,yFAIA,yFAOA,+KAaA,gEAOA,uPAAA,6PAAA,6PAWA,kJAWA,gEAMA,kGAGA,8FAMA,yMASA,gFAGA,wEAKA,mFAGA,iFAGA,yJAIA,mJAIA,wGAGA,oGAQA,wKASA,0DAGA,mGAMA,qEAIA,kFAKA,sFAIA,yFAKA,uEAGA,wEAGA,+EAGA,gFAIA,6KAQA,0GAQA,qFAKA,mOAgBA,+DAGA,yEAGA,wDASA,gEAAA,0GAIA,mFAOA,iJAQA,gIAQA,mIAKA,6HAIA,uHAAA,8GAIA,+OAOA,qHAOA,+FAGA,gGAGA,gGASA,uGAIA,+EAGA,0FAGA,8EAGA,mHAIA,qHAIA,4EAGA,6FAGA,oGAGA,0JAIA,qKAKA,+GAGA,8IAIA,uGAGA,mFAGA,qFAAA,+HAIA,6MAIA,iIAAA,8IAAA,qIAWA,wRAQA,wHAMA,uCACE,yDASF,8BACE,6CAGA,6EAIA,6EAGA,+FvBjbF,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,uEAIA,iOAYA,sDASA,8DAAA,sGAIA,+EAOA,2IAQA,4HAQA,+HAKA,mIAKA,iHAGA,mOASA,6FAGA,8FAGA,8FASA,sEAGA,4GAIA,wFAGA,0IAIA,qGAGA,iFAGA,mFAAA,2HAIA,qMAIA,2HAAA,wIAMA,4QAQA,sHAMA,uCACE,qDASF,8BACE,2CAGA,2EAIA,yEAGA,yFQjQF,2EAQA,qVAkBA,oDAIA,oDAIA,oDAQA,0LAWA,2IAOA,sHAOA,8JAKA,8PAKA,kQAQA,sKAKA,0PAKA,4PAQA,+FAOA,+EAIA,mMAMA,uJAOA,2DAGA,wKAKA,0EAMA,6EAIA,iNAMA,yHAOA,yHAQA,qDAKA,0HAOA,qIASA,yHAMA,mFAQA,8EAGA,0MAKA,2LAOA,uCACE,sDAQF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA,8DcjPF,yMAQA,sFAKA,uDAIA,kDAGA,6CAMA,wEAOA,8MAeA,6VAkBA,iNAWA,yOAUA,qKAOA,2HAKA,qLAMA,kNAQA,4IAIA,kMAMA,mMAQA,iFAMA,uDAGA,kFAGA,kJAIA,qIAKA,8DAKA,kFAGA,gJAIA,wFAKA,wCAGA,2EAGA,0HAIA,gHAMA,sHASA,sHAOA,sHAQA,mFAGA,8MAQA,oNAOA,qNAQA,uCACE,gEAMF,8BACE,gDAGA,2EAGA,4CAGA,iDAGA,gEQhQF,yEAQA,8YAqBA,qFAIA,wEAKA,6GAIA,4HAKA,6EAMA,iMAUA,6FAMA,sKASA,wCAGA,4CAGA,2CAKA,oRAcA,mJAKA,+EAKA,kJAQA,yCAGA,4FAGA,gJAMA,8EAGA,mHAKA,uHAMA,iFAMA,8GAIA,2FAGA,wEAIA,uCACE,sEAOF,8BACE,yEAGA,4DAGA,gDAGA,oFAGA,wDAGA,iFEzLF,uFAMA,oZAmBA,yFAKA,uIAIA,kIAMA,6HAOA,iKAMA,+JAMA,+JASA,6JAKA,mKAOA,oEAOA,8LAQA,uCACE,8CAKF,8BACE,2FAIA,oEQ1GF,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,kDF3LF,2WAgBA,2CAGA,0CAKA,6DAGA,oFAKA,6EAIA,mFAMA,uKAKA,wIAKA,yDAIA,gEAKA,yCAIA,+DAGA,+DAGA,+DAIA,uCAGA,8GAIA,mFAGA,kJAMA,sGAKA,kHAIA,8LAMA,sFAIA,wDAIA,sIAIA,8DAGA,gJAOA,oIAMA,4OAUA,2HAIA,6EAKA,4EAGA,sIAMA,qFAKA,mFAKA,iDAGA,uCACE,qCAMF,wKASA,kJAQA,yDAKA,8EAMA,gIAOA,4DAMA,wMAQA,oEAKA,sJAQA,gKAQA,2EAMA,uCACE,4BAMF,8BACE,uCAGA,4HAOF,uHAIA,sHAIA,wKAIA,yTAMA,8KAIA,0JAIA,oRAMA,oJQlTA,ySAgBA,8IAOA,gGAOA,kGAQA,uDAMA,qDAOA,oFAKA,yGAKA,+GAKA,qHAKA,yGAKA,yGAKA,gGAOA,sHAMA,8HAMA,mIAMA,qIAMA,qIAMA,yHAQA,mHAQA,2EAOA,2CAGA,iFAGA,6EAGA,kFAGA,oFAGA,kFAGA,4EAGA,+EAMA,4FAOA,gDAMA,2EAKA,2EAKA,2EAMA,8CAOA,wRAmBA,wDAKA,0FAIA,2FAOA,0JAKA,wGAIA,+GAIA,6GAIA,6GAIA,uGAMA,obAWA,8BACE,uCStRF,kPAaA,qJAOA,uGAMA,yGAQA,oKASA,qEAGA,kEAGA,wEAGA,oEAGA,wEAMA,kHAIA,+GAIA,wHAIA,kHAIA,wHAOA,0EASA,sCAGA,0FAGA,uFAGA,6FAGA,yFAGA,6FAGA,6FAMA,2IAIA,+HAIA,qIAIA,iIAIA,qIAIA,qEAIA,wHAOA,8BACE,8CnDvJF,oEAOA,yEAGA,2EAGA,gFAGA,oDAIA,6HAUA,4KASA,+EAGA,8EAKA,oHAQA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAMA,8BACE,kGK5FF,kiBAuBA,kJAKA,qJAKA,qJAKA,qJAKA,mJAKA,sJAKA,yMASA,2DAIA,yDAGA,0EAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,yFAIA,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA,kFQnOF,gdAoBA,6JAMA,+CAMA,oCAGA,oDAIA,6MAYA,oGAKA,oGAKA,sDAKA,kMAKA,gKAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAOF,wMAYA,+FAKA,8BACE,2CQlIF,qnBAsBA,8HAKA,0UAQA,mUAQA,gVAQA,wVAQA,wVASA,kKASA,oLASA,oRAYA,8DAKA,sLAWA,mKAOA,8FAIA,2HAOA,4SAgBA,+DAIA,sEAGA,mGAKA,sHAOA,6cAoBA,uEAGA,oGAKA,0BACE,sDAGA,mGAMA,wGAMA,kEAIA,uFAKA,4CAGA,wLAOA,oFAKF,4HAIA,sEAMA,kPAYA,6EAGA,mHAIA,2IAIA,8JAIA,+FAIA,8BACE,2CAGA,8HQxRF,yIAWA,2cAuBA,2CAGA,oJAOA,sHAOA,yEAKA,oGAKA,0DAGA,iEAIA,sPAWA,sEAMA,2JASA,gKAUA,qLAUA,qGAQA,yBACE,uEAQF,uVAmBA,8DAIA,kEAGA,0FAKA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAYA,oEAGA,gHAIA,yFAIA,uCACE,wDAMF,8BACE,wCAGA,8EQ3OF,mOAcA,wDAIA,mEAMA,sFAIA,uFAKA,kFAIA,qHAKA,2HAMA,iHAQA,oiBAuBA,yMAKA,kMAKA,8MAKA,8MAKA,4MAQA,wKAWA,0LASA,sSAYA,oEAKA,4LAWA,yKAOA,iIASA,kTAgBA,qEAIA,4EAGA,yGAOA,4HAOA,8bAmBA,6EAGA,0GAOA,0BACE,4DAGA,mGAMA,8GAMA,wEAIA,6FAMA,kDAIA,8LAOA,yFAGA,qGAGA,4GAMF,6GAGA,gGAGA,oJAIA,mJAKA,yIAOA,uGAIA,6FAIA,mHAUA,0HAUA,6HAUA,uFAUA,uCACE,uIASF,yFAGA,4EAGA,mFAGA,+HAIA,uJAIA,0KAOA,8BACE,qDAGA,0IQtYF,yIAQA,iFAOA,uFAMA,sFAOA,iPAUA,8CAGA,wDAIA,uHAMA,kYAsBA,0EAIA,wIAOA,6KAKA,sKAMA,8IAMA,uKAIA,yKAIA,qRAOA,sFAIA,6FAGA,wFAIA,4MASA,iIAKA,iJAKA,gKAIA,2KAOA,sEAKA,sDAOA,mNAMA,mNAMA,mNAQA,sIAKA,sJAKA,2LAQA,iFAGA,iFAGA,iFAMA,0FAOA,yNASA,0DAGA,6CAIA,yNAaA,kOAYA,6DAIA,uHAIA,0FAGA,wLAKA,4CAGA,uLASA,iCAGA,kHAKA,iHAIA,2fAYA,uCACE,6DAMF,8BACE,4GAIA,uDAGA,wEAGA,kFS7UF,gFAQA,iIAYA,sFAQA,iIAOA,gHAMA,6HASA,8FAOA,8FAOA,uEAQA,+DAMA,2IAQA,8DAOA,gLAUA,wEAGA,0GAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yCG/IF,oFAQA,oIAYA,2CAMA,obAqBA,sEAIA,sGAKA,0FAOA,4SAWA,wEAMA,uCAIA,gEAMA,0DAMA,0JAOA,2LAUA,+IAKA,yDAIA,+DAOA,iRAYA,sVAiBA,uFAIA,yDAKA,iHAOA,8BACE,mDAGA,8FAQF,0IAMA,8HAMA,4IAOA,+HAIA,6NASA,uCACE,wCAOF,8BACE,sCAGA,oFAIA,gEAGA,+E1DlPF,sJAUA,2EAMA,8CAOA,mdAuBA,qEAMA,4EAGA,mFAGA,0GAKA,wHAKA,uJAOA,gIAOA,4FAGA,gEAMA,oEAIA,mEAIA,qFAGA,qFAIA,iNAQA,oGAQA,kGAWA,+EAGA,+EAMA,iEAGA,6EAMA,uCACE,qGAIA,0CAMF,sEAMA,8BACE,8DAIA,oEQ1KF,4GASA,6CAIA,+EAIA,4GAQA,wGAMA,wHAKA,4GAKA,8OAQA,qQASA,gGAGA,6GAKA,6eAuBA,wFAMA,2MAKA,yGAGA,kGAIA,mJAOA,kLAIA,qKAIA,gJAKA,sJAOA,4FAIA,iJAOA,wFAIA,sJAQA,mLAOA,uEASA,4DAGA,mLAKA,uLAOA,8JAIA,0MAQA,iFAGA,yFAGA,4NAOA,uCACE,qDAKF,8BACE,6EAIA,iMAKA,mFAGA,8FQ7OF,4GAOA,uCAGA,8EAIA,0EAGA,2EAGA,uHAKA,uDAIA,+EAIA,iCAGA,mCAGA,iCAGA,mCAIA,yEASA,uCACE,uCAKF,8BACE,qCAGA,mCQjEF,mfAiBA,+EAMA,qFAMA,uFAMA,qFAMA,4FAIA,2FASA,2EAIA,+FASA,oCAIA,uCACE,wCAKF,8BACE,0CI5EF,2FAOA,uEAGA,kEAGA,uEAGA,yEAIA,2KAQA,4EAGA,qDAIA,iJAOA,wDAGA,wDAGA,6FAKA,gIAKA,0LAOA,uJAOA,uGAOA,6MAMA,2FAQA,2HAGA,+FASA,+EAKA,yIAQA,8CAGA,2GAKA,kFAGA,kFAGA,8EAKA,kLAUA,4FAKA,uDAKA,kEAIA,gHAIA,0GAOA,sHAOA,gFAGA,2EAGA,gFAGA,kFAIA,2CAGA,2DAGA,wIAIA,mFAIA,oGAKA,gLAKA,oEAMA,2LAYA,8FAGA,0FAGA,2GAKA,0FAMA,8FAGA,8FAGA,+FAIA,8EAGA,oGAIA,iNAKA,+FAGA,8FAQA,gNAOA,oIAIA,8KAOA,oGAGA,gGAGA,gHAGA,4GAIA,6IAMA,uCACE,wKAIA,+GAQF,8BACE,kDAGA,qDAGA,gFAIA,8FQzVF,kVAeA,mGAGA,qFAGA,iIAUA,6DAWA,gTAeA,sEAOA,8IAKA,uEAGA,wFAMA,iHAKA,gFAGA,sJAOA,kNAWA,qJASA,+DAMA,8IAWA,mLAUA,qEAOA,sFAGA,uHAOA,gEAMA,qQASA,qKASA,6JAIA,6FAGA,oHAIA,mNAQA,8BACE,gDAGA,2HAKA,gEAGA,4DAOF,uCACE,4FQ5NF,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,0CC3TF,wOASA,qDAOA,+ZAoBA,8EAIA,gFAKA,+FAIA,+FAKA,4GAOA,uDAKA,mGAQA,2GAKA,mFAIA,gFAIA,yOAYA,+DAKA,mFAGA,wEAKA,qKAOA,mHAOA,uIAMA,sVAaA,oQAUA,iGAGA,mFAGA,4HAUA,wDASA,yFAMA,sOAWA,6DAIA,sKAYA,2FAMA,+KAUA,+UAeA,8EAGA,iEAGA,uFAKA,iHASA,uKASA,gEAMA,gOAWA,oHAIA,mEAOA,sQAQA,+JAWA,6GAIA,qIAIA,0JAIA,6HAGA,yFAGA,wGAGA,qJAIA,mGAGA,uFAGA,iLAKA,6FAMA,uCACE,6CAGA,kGAKF,8BACE,0EAIA,oFAIA,uFAIA,wESpXF,sNAWA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAOA,sDAOA,oIAOA,0FAOA,4PAcA,sGAIA,oFAGA,sFASA,gLAiBA,6GAOA,4SAeA,mFAGA,uEAMA,yHASA,uHAMA,yEAGA,yKAMA,wKAYA,oGAMA,6LAcA,yfA4BA,sLASA,6DAIA,uIAMA,6FAIA,iHAGA,iHAGA,6FAGA,0HAIA,iIAQA,yEAMA,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA,2FvDpWF,iEAIA,yNASA,wDAMA,+XAmBA,iFAIA,mFAMA,kGAIA,kGAOA,8IAQA,iDAIA,sNASA,wEAGA,+HAIA,0FAIA,8GAQA,uJAUA,oFAMA,4GAMA,8EAIA,4OAYA,2FASA,2JAIA,sJAOA,uKAQA,2IAKA,4DAGA,mWAWA,kGAMA,gHAIA,4EAGA,kGAGA,gKAIA,8HAGA,4FAGA,kMAKA,4JAIA,8NASA,uCACE,2EAQF,8BACE,sDAGA,4FAIA,+DAGA,oFQ/PF,4GASA,qFAMA,uFAIA,sMAUA,wDAIA,+JASA,yUAiBA,8KAWA,oGAOA,iHAKA,mGAIA,2FAIA,+OAMA,sIAKA,gHAMA,gGAIA,yGAKA,yKAKA,kFAMA,6IASA,wJAQA,+JAcA,sHASA,iMASA,kEAIA,iHAOA,iJASA,4EAIA,gFAKA,0HAKA,iIAKA,2HAKA,iIAMA,mPAYA,mRAgBA,uHAKA,yGAKA,2GAKA,8JAUA,8BACE,4FQnRF,sGAIA,sGAOA,+FAIA,gGAIA,+FAOA,kEAMA,kJAOA,+EAMA,2LAaA,kKAQA,qIAUA,4QAWA,2CAKA,mIASA,8JAKA,2IAQA,uCAGA,mEAMA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,2EAIA,kFQhJF,kEAMA,0NAUA,yDAMA,6SAiBA,0EAIA,4EAOA,2FAIA,2FAOA,gRAkBA,kEAIA,yPAAA,+PAAA,+PAYA,qSAcA,mFAKA,8DAIA,qFAMA,kIAIA,8HAOA,oFAGA,qFAGA,wGAIA,sHAOA,oFAGA,wHAGA,yHAGA,6FAMA,uFAOA,iEAGA,2EAIA,qOAYA,0DAQA,8KAMA,uDAAA,oFAOA,uJAQA,oIAQA,oHAIA,mIAIA,6HAIA,2PAUA,iGAGA,kGAGA,kGASA,yGAIA,iFAGA,4FAGA,kJAIA,mHAIA,0GAGA,sGAGA,6IAKA,oFAGA,yGAGA,qFAGA,qNAOA,qNAIA,uIAAA,oJAQA,oSAQA,0HAMA,uCACE,sFAUF,8BACE,+CAGA,sEAIA,+EAIA,iFAGA,qGQ7WF,+JAQA,iPAaA,kEAMA,0DAIA,wDAIA,wDAKA,wIAMA,uCAKA,gEAIA,8DAMA,yFASA,4QAaA,0FAKA,iFAOA,wJAUA,2EAGA,4EAIA,kDAOA,4EAQA,8BACE,uCAGA,wCAGA,qEQtIF,iZAsBA,uGAKA,yGAKA,uGAMA,2EAIA,kHAIA,kGAIA,2DAIA,uFAKA,oDAKA,uCACE,8BAKF,8BACE,2EAIA,wDQ1EF,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,kIASA,kFAOF,4GAOA,iHAGA,2FAMA,8BACE,gGC9EF,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE,sDKvHF,wTAeA,2GAMA,gGAMA,mOAWA,wDAIA,+BAGA,kJASA,wDAIA,6DAGA,uGAMA,gEAKA,wGAKA,wFAKA,wLASA,oDAIA,6EAKA,2EAKA,+EAGA,4EAIA,oRAUA,6DAGA,4EAGA,4EAGA,wFAKA,qEAIA,8FAMA,wJAMA,mIAIA,yDAGA,mEAIA,uEAKA,oIAQA,6GAMA,uKAQA,qMAYA,gFAKA,2HAKA,4GAQA,sEAGA,8FAIA,8FAGA,8FAGA,uFAGA,sGAKA,8BACE,+CAGA,mDAOF,+DAGA,uEAGA,uEAGA,uEAIA,sIAKA,gPAkBA,iGAOA,qDjDxSA,yUAoBA,0HAMA,4HAmBA,+JAQA,yXAoBA,0DAKA,mGAKA,4FAOA,uFAGA,yEAMA,8FAUA,uDASA,uCACE,qCAUF,8BACE,0CAGA,iEMjIF,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,kRQjgBF,sLASA,mFAKA,uGAcA,kEAMA,yJAQA,iGAGA,wHAKA,uIAOA,kLASA,oFAIA,yCAMA,4GAMA,8BACE,kFAOF,uCACE,8CQ/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,0FM7UF,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,sDNtQF,0DASA,2GAMA,8HAOA,kSAeA,wCAGA,wCAGA,0CAMA,iKAOA,qDAGA,0PAUA,2GAKA,+EAIA,kFAIA,yEAOA,2MAWA,oEAIA,uGAGA,kJAKA,6GAGA,gJAMA,wHAMA,mJAQA,iJAUA,wMAaA,kDAIA,6FAIA,yFAMA,yNAYA,2DAIA,iHAIA,yFAIA,sNAIA,oNAIA,wNAIA,sNAIA,wLAKA,gMAIA,oKAQA,qEAIA,wKASA,8BACE,oDAGA,uJAKA,yEAGA,yFAGA,oGAGA,kDAGA,wMQzQF,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,oDS1LF,qdAoBA,4PAQA,2RAWA,wDAGA,oDAGA,uDAIA,wFAKA,wGAQA,2FAIA,6FAIA,mEAGA,6FAQA,4DAMA,mFAKA,qFAOA,oEAIA,sEAKA,6DAGA,6DAMA,sEAMA,qEAIA,qEAMA,0DAGA,mGAGA,mGAGA,mKAIA,mKAQA,uMAMA,kPAQA,uCACE,4BAKF,8BACE,uFAMA,qCAGA,8CAGA,uEjDhMF,0FAIA,qDAIA,+EAIA,sGAGA,8GAKA,iFAIA,uFAKA,oGAAA,iGAAA,qGAAA,yGObA,yOAcA,oDAGA,mDAIA,gCAIA,2FAOA,+FAKA,0EAIA,wGAQA,kDAGA,2GAIA,wGAGA,+EAGA,sGAGA,sHAKA,gFAGA,4EAKA,6IASA,sDQnGA,8VAiBA,sCAGA,sCAGA,0DAIA,iCAIA,iHAOA,2JAQA,2JAMA,sCAGA,gEAMA,sFAOA,uLASA,wEAMA,sGAOA,sJAOA,+JAWA,6NAUA,sFAKA,6FAKA,iDAGA,wDAMA,0HAMA,8BACE,oCQ1IF,+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,qEQ7HF,uEAIA,+NASA,8DAMA,qYAkBA,uFAIA,yFAKA,wGAIA,wGAOA,oJAQA,uDAIA,4NASA,8EAGA,qIAIA,gGAIA,oHAKA,2GAQA,6JAUA,gGAMA,kHAGA,oFAIA,kPAYA,iGAGA,uKAIA,kKAOA,yLAKA,uJAKA,kEAGA,qeAUA,wGAWA,kFAGA,uJAIA,iJAKA,0KAQA,sHAIA,kFAGA,wGAGA,4KAIA,oIAIA,kGAGA,8MAKA,wKAIA,kIAQA,uCACE,uFAQF,8BACE,4DAGA,kGAIA,qEAIA,yEAGA,+EQ1QF,+HAWA,sDAMA,iECzBA,2KAUA,oIAQA,iSAYA,yPAWA,mLAIA,+KAKA,2EAIA,yLAOA,mNAKA,mKAOA,4IAIA,6HAKA,yJAMA,sNAUA,4EAIA,8HAMA,+EAGA,6MAMA,mMAKA,8BACE,4XAUA,4IOpIF,6cAkBA,wMAMA,oNAMA,oNAMA,+MAOA,wJASA,yKAWA,4KASA,8DAKA,iLAQA,oLAUA,kGAQA,0VAkBA,+DAIA,sEAGA,mGAMA,0LAUA,yLAKA,yIAIA,kJAIA,kJAIA,+IAIA,sEAGA,wFAGA,mGAIA,8BACE,+CAGA,qFDjLF,uXAmBA,uCACE,uCAMF,sDAGA,sDAKA,wGAMA,uDAIA,+CAKA,qHAIA,+HAGA,iIAGA,sFAKA,8EAIA,kHAGA,mHAGA,sFAKA,6GAIA,oNAMA,0FAKA,iDAGA,sLAQA,sEAKA,6JAOA,wPAYA,iHAIA,uJAKA,wJAKA,2HAIA,kGAIA,2JAKA,4JAKA,+HAKA,0KAMA,8BAEE,kDAGA,mFAIA,yFOvLF,kFAGA,kGAOA,sLAWA,iHAKA,0JAQA,oHAOA,yJAQA,2KAQA,4GAMA,mIAYA,wEAIA,gVAgBA,qJAMA,uGAKA,6EAKA,wFAMA,yVAkBA,uEAIA,mGAKA,uFAKA,sEAMA,oHAQA,yFAMA,sCAIA,uCACE,4HASF,8BACE,2DAGA,sDAGA,yHDxLF,uHAOA,2GAMA,0IAOA,yMASA,4DAGA,wDAGA,qFAIA,wDAMA,+FASA,oKAOA,gGAIA,4EAQA,6KAQA,qCAIA,wLASA,4EAGA,gGAKA,4EAIA,8EAIA,8EAOA,+NAcA,0DAKA,wDAIA,yDAIA,yDAIA,yDAMA,mHAIA,6HAGA,+HAGA,2KAQA,kFAIA,iHAGA,kHAGA,mIAOA,+CAGA,oLAWA,sIAGA,wIAIA,oKAKA,uCACE,+EAOF,8BACE,4DAGA,yHAKA,qFI9OF,gQAYA,+BAGA,8CAGA,yEAGA,mDAKA,+EAMA,8EAKA,6JAOA,6ZAgBA,8CAIA,mMASA,mLAQA,2CAGA,uDAIA,mDAGA,qEAIA,+PAYA,+EAGA,+GAIA,yEAIA,6EAIA,qEAIA,+EAKA,iKAOA,wbAkBA,6EAGA,6GAIA,oGAKA,gEAIA,oOASA,2OAaA,2EAIA,mEAKA,sFAGA,kFAKA,8BACE,qEAIA,+DPpNF,2RAaA,2EAIA,2GAOA,wGAOA,uHAQA,iNAUA,sVAgBA,sGAIA,sGAMA,2FAIA,uFAKA,gDAKA,0FAMA,0GAOA,qRAYA,+DAKA,0GAOA,6LAQA,sFAKA,+LAUA,iPASA,4DAIA,6FAKA,oHAMA,8JAOA,wKAMA,qGAIA,gHAMA,0BACE,uDAGA,kGAKA,2EAGA,+DAIA,6CAGA,+CAGA,sEAKA,+DAIA,2DAIA,+DAIA,+GAUF,8EAIA,8BACE,kDAGA,6IChQF,iJASA,2FAGA,8FAGA,oEAQA,qEAWA,sPAaA,mEAGA,yEAKA,oGAIA,kGAKA,uFAGA,0FAGA,mFAGA,sFAGA,gGAQA,iGAQA,6FAQA,8FASA,+FAGA,kGAGA,+FAGA,kGAMA,qMASA,wHAOA,wHAOA,yPAWA,wEAIA,qKAOA,yKAQA,iRAeA,0EAGA,uGAIA,gEAOA,gRAaA,6DAGA,+HAOA,sFAKA,wJAMA,gGAOA,gDAMA,4UAgBA,sEAGA,uEAGA,uGAKA,0GAIA,0JASA,oEAIA,uNAYA,0NAUA,wEAIA,wFAMA,qGAQA,kMAYA,oFAGA,8EAGA,0HAIA,wFAGA,yFAGA,6GAOA,uCACE,iEAQF,8BACE,gDAGA,2DAGA,gEAGA,sHAKA,0GC9YF,mNAYA,6DAKA,sEAKA,4FAIA,4CAIA,6LAYA,wGAIA,8DAIA,yFAKA,sGAOA,+JAaA,+GAMA,8BACE,gEGlFF,gXAkBA,0DAKA,mKAOA,qHAMA,uHAOA,mDAIA,sDAIA,qEAMA,uFAIA,oGAGA,uIAIA,6FAIA,8FAGA,+FAKA,gGAIA,sGAGA,uGAGA,+FAIA,gGAGA,iGAKA,2FAOA,kKAYA,iFAIA,6GAGA,sJAIA,0HAIA,uGAGA,wGAGA,2JAQA,4IAIA,kJAIA,mJAIA,kMAIA,qLAIA,wNAKA,mNAMA,8BACE,uCAGA,qDAGA,wFAKA,sDC/LF,6GAQA,4DAGA,0DAGA,0DAGA,8DAGA,0DAGA,0DAGA,4DAGA,4DAIA,2DAGA,0DAGA,4DAGA,wDAGA,8DAKA,4NAUA,iIAIA,wIAIA,0IAIA,oIAIA,iIAOA,2EAOA,qDAIA,qDAGA,mDAGA,mDAGA,uDAGA,mDAGA,mDAGA,qDAGA,qDAIA,oDAGA,mDAGA,qDAGA,iDAGA,uDAKA,8BACE,6CxDxIJ","sources":["src/index.css","src/components/textarea.css","src/components/divider.css","src/components/date-picker.css","src/components/accordion.css","src/components/search-box.css","src/components/popover.css","src/variables.css","src/reset.css","src/components/field.css","src/components/avatar.css","src/components/file-upload.css","src/components/progress-indicator.css","src/components/list.css","src/components/sidebar.css","src/components/checkbox.css","src/components/button.css","src/dark.css","src/components/tooltip.css","src/components/slider.css","src/components/spinner.css","src/components/quote.css","src/components/scroll-area.css","src/components/radio.css","src/components/text-input.css","src/themes.css","src/components/inline-alert.css","src/components/number-input.css","src/components/skeleton.css","src/components/collapsible.css","src/components/menubar.css","src/components/switch.css","src/components/progress.css","src/components/content-switcher.css","src/components/modal.css","src/components/rating.css","src/components/timeline.css","src/components/tag-input.css","src/components/table.css","src/components/card.css","src/components/dropdown-menu.css","src/components/drawer.css","src/components/notification-toast.css","src/components/toggle.css","src/components/command.css","src/components/date-range-picker.css","src/components/aspect-ratio.css","src/components/input-otp.css","src/components/tag.css","src/components/status-tag.css","src/components/dropdown.css","src/components/tabs.css","src/components/description-list.css","src/components/empty-state.css","src/components/structured-list.css","src/components/link.css","src/components/digital-stamp.css","src/components/metric.css","src/components/calendar.css","src/components/breadcrumb.css","src/components/floating-button.css","src/components/notification.css","src/components/pagination.css","src/components/select.css","src/components/slideout-menu.css","src/components/charts.css","src/components/carousel.css","src/components/filtration.css","src/components/chip.css","src/components/saudi-riyal.css","src/components/code-snippet.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/text-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/content-switcher.css';\n@import './components/select.css';\n@import './components/card.css';\n@import './components/tag.css';\n@import './components/status-tag.css';\n@import './components/divider.css';\n@import './components/avatar.css';\n@import './components/tooltip.css';\n@import './components/inline-alert.css';\n@import './components/modal.css';\n@import './components/notification-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/progress-indicator.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/dropdown.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/metric.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@import './components/structured-list.css';\n@import './components/notification.css';\n@import './components/floating-button.css';\n@import './components/filtration.css';\n@import './components/carousel.css';\n@import './components/code-snippet.css';\n@import './components/digital-stamp.css';\n@import './components/slideout-menu.css';\n@import './components/charts.css';\n@import './components/chip.css';\n@import './components/saudi-riyal.css';\n/* AUTO:COMPONENT_IMPORTS */\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. Mirrors the SDGA \"Textarea\" field model (= Text input, minus\n the size axis): single size, three fill styles, gray-400 border, multi-line.\n The control owns the box; the <textarea> inside is borderless/transparent so\n the focus/pressed `::after` underline can render. */\n\n .ddga-field[data-slot='textarea-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-textarea__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-textarea__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/state/style) ─── */\n\n .ddga-textarea {\n position: relative;\n display: block;\n inline-size: 100%;\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-textarea--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-textarea--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <textarea>: transparent, borderless, multi-line) ─── */\n\n .ddga-textarea__field {\n display: block;\n inline-size: 100%;\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n .ddga-textarea__field--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea__field--resize-none {\n resize: none;\n }\n\n /* Autofill: repaint with tokens (see text-input.css for the why). */\n .ddga-textarea__field:-webkit-autofill,\n .ddga-textarea__field:-webkit-autofill:hover,\n .ddga-textarea__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-gray-950);\n }\n\n /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── */\n\n .ddga-textarea--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n /* ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n .ddga-textarea:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-textarea--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-textarea::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-textarea:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). Real state is :active; `--pressed` is a static hook so the\n state is visible in Storybook. The centered underline overrides the\n focus full-width one while the mouse is down. */\n\n .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n .ddga-textarea--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-textarea:active::after,\n .ddga-textarea--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n .ddga-textarea--error,\n .ddga-textarea--error:hover:not(:focus-within),\n .ddga-textarea--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── */\n\n .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n resize: none;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled) .ddga-textarea__label,\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── */\n\n .ddga-field[data-slot='textarea-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='textarea-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n /* ─── Dark mode ─── */\n /* SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n flipping semantic tokens so text/affordances stay readable on dark. Exact\n DGA dark palette deferred. */\n\n [data-theme='dark'] .ddga-textarea {\n border-color: var(--ddga-color-input);\n }\n [data-theme='dark'] .ddga-textarea__field {\n color: var(--ddga-text-primary);\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-textarea--filled-lighter,\n [data-theme='dark'] .ddga-textarea--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-textarea::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n [data-theme='dark'] .ddga-textarea--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field,\n [data-theme='dark']\n .ddga-textarea:has(.ddga-textarea__field:disabled)\n .ddga-textarea__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__label,\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-textarea,\n .ddga-textarea::after {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: GrayText;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-divider {\n /* Single hook so consumers can recolor per-instance; defaults to SDGA Neutral (gray-300). */\n --ddga-divider-color: var(--ddga-color-input);\n border: 0;\n }\n\n /* SDGA Color axis — fixed white tones are for colored/dark surfaces (no theme-flip). */\n .ddga-divider--tone-neutral {\n --ddga-divider-color: var(--ddga-color-input);\n }\n .ddga-divider--tone-primary {\n --ddga-divider-color: var(--ddga-color-primary);\n }\n .ddga-divider--tone-alpha-white {\n --ddga-divider-color: var(--ddga-alpha-white-30);\n }\n .ddga-divider--tone-white {\n --ddga-divider-color: #ffffff;\n }\n\n .ddga-divider--horizontal {\n display: block;\n block-size: 0;\n inline-size: 100%;\n /* Border (not background) so the dashed style works without a fill. */\n border-block-start: 1px solid var(--ddga-divider-color);\n }\n\n /* `inline-block` so a vertical divider drops next to inline content (e.g. button\n rows) without forcing a flex parent; flex/grid rows still get 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 .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): the row IS the divider, not a 0px top-border line. */\n .ddga-divider--labeled {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\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 /* `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 @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 /* DatePicker field/trigger chrome — mirrors the SDGA Text Input field model\n (see text-input.css): the official Date field IS the Text input field (no\n calendar icon). The calendar dropdown (popover, toggle, month grid) is\n shared with DateRangePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. */\n\n /* SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. */\n .ddga-field[data-slot='date-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-picker__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the SDGA date field; owns border/focus/size/style/state) ─── */\n\n .ddga-date-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* SDGA Medium 32 / Large 40 (Large is the official date-field size). */\n .ddga-date-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n /* SDGA Style axis. */\n .ddga-date-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── DateInput + segments ─── */\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\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-gray-700);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-500);\n }\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-gray-700);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n /* ─── Open surface (iconless): fills the field's trailing space so a click\n anywhere but the segments opens the calendar. ─── */\n\n .ddga-date-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__open {\n cursor: not-allowed;\n }\n\n /* ─── Hover (outlined style only: border darkens to gray-700) ─── */\n\n .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n\n /* ─── Focus (shadow-md + full-width 2px dark underline, NOT a ring) ─── */\n\n .ddga-date-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-date-picker-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-date-picker-trigger[data-focus-within]:not([data-pressed])::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (JS-driven [data-pressed] — `:active` is unreliable on the\n react-aria Group; see usePressedState — plus a static --pressed hook for\n stories): gray-100 fill + a centered ~50% underline (focus suppresses its\n full-width underline while pressed). ─── */\n\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-picker-trigger--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (error-700 border) ─── */\n\n .ddga-date-picker-trigger--error,\n .ddga-date-picker-trigger--error[data-hovered],\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only / Disabled (gray-300 border, transparent fill, no opacity) ─── */\n\n .ddga-date-picker-trigger[data-readonly],\n .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__label,\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Helper / error line ─── */\n\n .ddga-field:has(.ddga-date-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n\n /* ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── */\n\n [data-theme='dark'] .ddga-date-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-picker-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n [data-theme='dark']\n .ddga-date-picker-trigger[data-disabled]\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger,\n .ddga-date-picker-trigger::after {\n transition: none;\n }\n }\n\n /* ─── Forced colors (the focus underline is invisible; restore an outline) ─── */\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-trigger[data-disabled] {\n border-color: GrayText;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\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-input);\n }\n\n /* ─── Item ─── */\n\n .ddga-accordion__item {\n border-block-start: 1px solid var(--ddga-color-input);\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: flex-start;\n gap: var(--ddga-space-4);\n padding-inline: var(--ddga-space-4);\n padding-block: var(--ddga-space-4); /* lg; md/sm override below */\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.5rem;\n text-align: start;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n\n /* Title fills the row; the chevron sits at the opposite end (or right after it when leading). */\n .ddga-accordion__title {\n flex: 1 1 0;\n min-inline-size: 0;\n text-align: start;\n }\n\n .ddga-accordion__trigger:hover {\n background-color: var(--ddga-color-secondary);\n }\n .ddga-accordion__trigger:active {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-accordion__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-focus-ring);\n outline-offset: -2px;\n }\n\n .ddga-accordion__trigger:disabled,\n .ddga-accordion__trigger[data-disabled] {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-accordion__trigger:disabled .ddga-accordion__chevron,\n .ddga-accordion__trigger[data-disabled] .ddga-accordion__chevron {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Chevron ─── */\n\n .ddga-accordion__chevron {\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-primary);\n transition: transform 200ms ease;\n }\n .ddga-accordion__trigger[data-state='open'] .ddga-accordion__chevron {\n transform: rotate(180deg);\n }\n .ddga-accordion--icon-leading .ddga-accordion__chevron {\n order: -1;\n }\n\n /* ─── Content (animated disclosure) ─── */\n\n .ddga-accordion__content {\n overflow: hidden;\n color: var(--ddga-gray-700);\n }\n .ddga-accordion__content[data-disabled] {\n color: var(--ddga-gray-400);\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-start: var(--ddga-space-2);\n padding-block-end: var(--ddga-space-6);\n padding-inline-start: var(--ddga-space-4);\n padding-inline-end: var(--ddga-space-12); /* inset off the chevron side */\n line-height: 1.5rem;\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 (header pad-block only; title is constant 16/600/24) ─── */\n\n .ddga-accordion--md .ddga-accordion__trigger {\n padding-block: var(--ddga-space-3);\n }\n .ddga-accordion--sm .ddga-accordion__trigger {\n padding-block: var(--ddga-space-2);\n }\n\n /* ─── Flush (edge-to-edge — drops the inline padding) ─── */\n\n .ddga-accordion--flush .ddga-accordion__trigger {\n padding-inline: 0;\n }\n .ddga-accordion--flush .ddga-accordion__content-inner {\n padding-inline-start: 0;\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 /* Dark: raw gray-700 body text can't flip → remap to a legible light step. */\n [data-theme='dark'] .ddga-accordion__content {\n color: var(--ddga-gray-300);\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 }\n }\n}\n","@layer ddga-components {\n .ddga-search-box.ddga-text-input--md {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-search-box.ddga-text-input--lg {\n block-size: 48px;\n }\n\n .ddga-search-box .ddga-text-input__adornment--start {\n color: var(--ddga-gray-700);\n }\n /* gray-700 is a fixed raw step — flip to the dark-aware tertiary so the magnifier stays legible. */\n [data-theme='dark'] .ddga-search-box .ddga-text-input__adornment--start {\n color: var(--ddga-text-tertiary);\n }\n .ddga-search-box .ddga-text-input__adornment--start svg {\n inline-size: 20px;\n block-size: 20px;\n transform: scaleX(-1);\n }\n [dir='rtl'] .ddga-search-box .ddga-text-input__adornment--start svg {\n transform: none;\n }\n /* SDGA trailing icon = 20px; the mic/clear glyphs default to 1em (14px inside icon-sm button). */\n .ddga-search-box .ddga-text-input__adornment--end svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n .ddga-search-box .ddga-text-input__field::-webkit-search-cancel-button,\n .ddga-search-box .ddga-text-input__field::-webkit-search-decoration,\n .ddga-search-box .ddga-text-input__field::-webkit-search-results-button,\n .ddga-search-box .ddga-text-input__field::-webkit-search-results-decoration {\n appearance: none;\n display: none;\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",":root {\n --ddga-color-primary: var(--ddga-brand-600);\n --ddga-color-primary-hover: var(--ddga-brand-700);\n --ddga-color-primary-active: var(--ddga-brand-900);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-secondary: var(--ddga-gray-100);\n --ddga-color-secondary-hover: var(--ddga-gray-200);\n --ddga-color-secondary-foreground: var(--ddga-gray-950);\n --ddga-color-background: #FFFFFF;\n --ddga-color-foreground: var(--ddga-gray-950);\n --ddga-color-muted: var(--ddga-gray-100);\n --ddga-color-muted-foreground: var(--ddga-gray-500);\n --ddga-color-border: var(--ddga-gray-200);\n --ddga-color-input: var(--ddga-gray-300);\n --ddga-color-card: #FFFFFF;\n --ddga-color-card-foreground: var(--ddga-gray-950);\n --ddga-color-destructive: var(--ddga-error-600);\n --ddga-color-destructive-hover: var(--ddga-error-700);\n --ddga-color-destructive-foreground: #FFFFFF;\n --ddga-color-error: var(--ddga-error-600);\n --ddga-color-error-hover: var(--ddga-error-700);\n --ddga-color-error-foreground: #FFFFFF;\n --ddga-color-success: var(--ddga-success-600);\n --ddga-color-success-hover: var(--ddga-success-700);\n --ddga-color-success-foreground: #FFFFFF;\n --ddga-color-warning: var(--ddga-warning-600);\n --ddga-color-warning-hover: var(--ddga-warning-700);\n --ddga-color-warning-foreground: #FFFFFF;\n --ddga-color-info: var(--ddga-info-600);\n --ddga-color-info-hover: var(--ddga-info-700);\n --ddga-color-info-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-brand-600);\n --ddga-color-focus-ring: var(--ddga-text-primary);\n --ddga-text-primary: #161616;\n --ddga-text-secondary: var(--ddga-gray-700);\n --ddga-text-tertiary: var(--ddga-gray-600);\n --ddga-text-placeholder: var(--ddga-gray-400);\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-sa-flag: #074D31;\n --ddga-brand-25: var(--ddga-sa-25);\n --ddga-brand-50: var(--ddga-sa-50);\n --ddga-brand-100: var(--ddga-sa-100);\n --ddga-brand-200: var(--ddga-sa-200);\n --ddga-brand-300: var(--ddga-sa-300);\n --ddga-brand-400: var(--ddga-sa-400);\n --ddga-brand-500: var(--ddga-sa-500);\n --ddga-brand-600: var(--ddga-sa-600);\n --ddga-brand-700: var(--ddga-sa-700);\n --ddga-brand-800: var(--ddga-sa-800);\n --ddga-brand-900: var(--ddga-sa-900);\n --ddga-brand-950: var(--ddga-sa-950);\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-alpha-white-10: rgba(255, 255, 255, 0.1);\n --ddga-alpha-white-20: rgba(255, 255, 255, 0.2);\n --ddga-alpha-white-30: rgba(255, 255, 255, 0.3);\n --ddga-alpha-white-40: rgba(255, 255, 255, 0.4);\n --ddga-alpha-white-60: rgba(255, 255, 255, 0.6);\n --ddga-alpha-white-70: rgba(255, 255, 255, 0.7);\n --ddga-alpha-white-80: rgba(255, 255, 255, 0.8);\n --ddga-alpha-white-90: rgba(255, 255, 255, 0.9);\n --ddga-chart-1: #F7D54D;\n --ddga-chart-2: #88D8AD;\n --ddga-chart-3: #FDB022;\n --ddga-chart-4: #53B1FD;\n --ddga-chart-5: #80519F;\n --ddga-chart-6: #F97066;\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-2xs: 0.625rem;\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-xs: 0.125rem;\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-xs: 0 1px 2px 0 rgb(16 24 40 / 0.05);\n --ddga-shadow-sm: 0 1px 3px 0 rgb(16 24 40 / 0.1), 0 1px 2px 0 rgb(16 24 40 / 0.06);\n --ddga-shadow-md: 0 2px 4px -2px rgb(16 24 40 / 0.06), 0 4px 8px -2px rgb(16 24 40 / 0.1);\n --ddga-shadow-lg: 0 4px 6px -2px rgb(16 24 40 / 0.03), 0 12px 16px -4px rgb(16 24 40 / 0.08);\n --ddga-shadow-xl: 0 8px 8px -4px rgb(16 24 40 / 0.03), 0 20px 24px -4px rgb(16 24 40 / 0.08);\n --ddga-shadow-2xl: 0 24px 48px -12px rgb(16 24 40 / 0.18);\n --ddga-shadow-3xl: 0 32px 64px -12px rgb(16 24 40 / 0.14);\n --ddga-shadow-none: none;\n}\n\n[data-theme] {\n --ddga-color-primary: var(--ddga-brand-600);\n --ddga-color-primary-hover: var(--ddga-brand-700);\n --ddga-color-primary-active: var(--ddga-brand-900);\n --ddga-color-ring: var(--ddga-brand-600);\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 /* 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 .ddga-field__message--with-icon {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n .ddga-field__message-icon {\n display: inline-flex;\n flex-shrink: 0;\n }\n}\n","@layer ddga-components {\n /* ─── Root ─── */\n\n .ddga-avatar {\n --ddga-avatar-size: 40px;\n --ddga-avatar-font-size: var(--ddga-font-size-sm);\n --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\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 /* No overflow:hidden — status dot overhangs; image/fallback self-clip via border-radius. */\n background-color: var(--ddga-color-muted);\n color: var(--ddga-gray-700);\n font-size: var(--ddga-avatar-font-size);\n font-weight: var(--ddga-avatar-font-weight);\n line-height: 1;\n vertical-align: middle;\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n\n /* Per size: SDGA type step + weight (weight lowers as the avatar grows).\n 2xl/3xl have no exact token (SDGA 30/36) → nearest step. */\n .ddga-avatar--xs {\n --ddga-avatar-size: 24px;\n --ddga-avatar-font-size: var(--ddga-font-size-2xs); /* SDGA 10px */\n --ddga-avatar-font-weight: var(--ddga-font-weight-bold);\n }\n .ddga-avatar--sm {\n --ddga-avatar-size: 32px;\n --ddga-avatar-font-size: var(--ddga-font-size-xs);\n --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-avatar--md {\n --ddga-avatar-size: 40px;\n --ddga-avatar-font-size: var(--ddga-font-size-sm);\n --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-avatar--lg {\n --ddga-avatar-size: 48px;\n --ddga-avatar-font-size: var(--ddga-font-size-base);\n --ddga-avatar-font-weight: var(--ddga-font-weight-medium);\n }\n .ddga-avatar--xl {\n --ddga-avatar-size: 64px;\n --ddga-avatar-font-size: var(--ddga-font-size-xl);\n --ddga-avatar-font-weight: var(--ddga-font-weight-medium);\n }\n .ddga-avatar--2xl {\n --ddga-avatar-size: 80px;\n --ddga-avatar-font-size: var(--ddga-font-size-3xl);\n --ddga-avatar-font-weight: var(--ddga-font-weight-regular);\n }\n .ddga-avatar--3xl {\n --ddga-avatar-size: 120px;\n --ddga-avatar-font-size: var(--ddga-font-size-3xl);\n --ddga-avatar-font-weight: var(--ddga-font-weight-regular);\n box-shadow: 0 0 0 4px var(--ddga-color-background);\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-sm);\n }\n .ddga-avatar--square.ddga-avatar--3xl {\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 /* Overlap; logical margin flips in RTL. Separating ring = base box-shadow. */\n margin-inline-start: calc(var(--ddga-avatar-size) * -0.25);\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 .ddga-file-upload {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n color: var(--ddga-text-primary);\n }\n\n /* ─── Label + description ─── */\n\n .ddga-file-upload__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n }\n\n .ddga-file-upload[data-variant='button'] > .ddga-file-upload__browse {\n align-self: flex-start;\n }\n\n .ddga-file-upload__label {\n display: flex;\n align-items: flex-end;\n gap: 0.25rem;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5;\n }\n\n .ddga-file-upload__required {\n color: var(--ddga-error-700);\n }\n\n .ddga-file-upload__description {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5;\n }\n\n /* ─── Drop zone ─── */\n\n .ddga-file-upload__dropzone {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-6);\n padding: var(--ddga-space-6);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-muted);\n text-align: center;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-file-upload__border {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n overflow: visible;\n color: var(--ddga-color-input);\n pointer-events: none;\n transition: color 150ms ease;\n }\n\n .ddga-file-upload__border rect {\n fill: none;\n stroke: currentColor;\n stroke-width: 1;\n stroke-dasharray: 10 5;\n }\n\n .ddga-file-upload__dropzone[data-dragging] {\n background-color: var(--ddga-success-25);\n color: var(--ddga-success-700);\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__border {\n color: var(--ddga-success-700);\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__border rect {\n stroke-width: 2;\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__icon,\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__title,\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__description {\n color: var(--ddga-success-700);\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__browse {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__dropzone[data-disabled] {\n cursor: not-allowed;\n background-color: transparent;\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__border {\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__icon {\n color: var(--ddga-gray-400);\n opacity: 0.7;\n }\n\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__title,\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__description {\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__icon {\n flex: none;\n font-size: 1.5rem;\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__copy {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n word-break: break-word;\n }\n\n .ddga-file-upload__title {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n }\n\n /* Visually-hidden real file input (the Browse button is the keyboard trigger). */\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__file {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-file-upload__file--error {\n border-color: var(--ddga-error-700);\n }\n\n .ddga-file-upload__file-main {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-file-upload__file-indicator {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n\n .ddga-file-upload__file-indicator--loading {\n color: var(--ddga-text-secondary);\n }\n\n .ddga-file-upload__file-indicator--loading svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n .ddga-file-upload__file-indicator--success,\n .ddga-file-upload__file-indicator--error {\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-file-upload__file-indicator--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n\n .ddga-file-upload__file-indicator--error {\n background-color: var(--ddga-color-error);\n color: var(--ddga-color-error-foreground);\n }\n\n .ddga-file-upload__file-indicator--success svg,\n .ddga-file-upload__file-indicator--error svg {\n inline-size: 0.75rem;\n block-size: 0.75rem;\n }\n\n .ddga-file-upload__file-name {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4286;\n }\n\n .ddga-file-upload__file-remove {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n font-size: 1rem;\n cursor: pointer;\n }\n\n .ddga-file-upload__file-remove:hover {\n background-color: var(--ddga-color-secondary-hover);\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__file-remove:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n .ddga-file-upload__file-error-row {\n padding: var(--ddga-space-2);\n border-top: 1px solid var(--ddga-color-input);\n }\n\n .ddga-file-upload__file-error {\n color: var(--ddga-color-error);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.4286;\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n /* color/bg are neutralized in forced-colors — keep the active target visible. */\n @media (forced-colors: active) {\n .ddga-file-upload__dropzone[data-dragging] {\n outline: 2px solid Highlight;\n outline-offset: -2px;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA \"Progress indicator\". Indicator size (circles 32 / dot 16) is driven by\n `--pi-size`; the connector is CSS-drawn via `::before` on every step except\n the last, running from this step's indicator to the next, coloured by THIS\n step's state. Logical properties handle the RTL flip. */\n\n .ddga-progress-indicator {\n --pi-size: 32px;\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: inherit;\n }\n\n .ddga-progress-indicator--dot {\n --pi-size: 16px;\n }\n\n .ddga-progress-indicator--horizontal {\n flex-direction: row;\n align-items: flex-start;\n }\n .ddga-progress-indicator--vertical {\n /* Inter-step gap = the connector's run between circles; generous so the line\n reads long even when a step has only a title (step height = circle height). */\n --pi-v-gap: var(--ddga-space-8);\n flex-direction: column;\n gap: var(--pi-v-gap);\n }\n\n .ddga-progress-indicator__step {\n position: relative;\n display: flex;\n min-inline-size: 0;\n gap: var(--ddga-space-2);\n }\n .ddga-progress-indicator--horizontal .ddga-progress-indicator__step {\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n }\n .ddga-progress-indicator--vertical .ddga-progress-indicator__step {\n flex-direction: row;\n align-items: flex-start;\n }\n\n .ddga-progress-indicator--horizontal .ddga-progress-indicator__step:not(:last-child)::before {\n content: '';\n position: absolute;\n block-size: 2px;\n inset-block-start: calc(var(--pi-size) / 2 - 1px);\n inset-inline-start: var(--pi-size);\n inset-inline-end: 0;\n }\n .ddga-progress-indicator--vertical .ddga-progress-indicator__step:not(:last-child)::before {\n content: '';\n position: absolute;\n inline-size: 2px;\n inset-inline-start: calc(var(--pi-size) / 2 - 1px);\n inset-block-start: var(--pi-size);\n inset-block-end: calc(-1 * var(--pi-v-gap));\n }\n /* Colour kept orientation-agnostic so `--completed` (equal specificity, later) wins. */\n .ddga-progress-indicator__step:not(:last-child)::before {\n background-color: var(--ddga-color-input);\n }\n .ddga-progress-indicator__step--completed:not(:last-child)::before {\n background-color: var(--ddga-color-primary);\n }\n\n /* Base indicator = the Upcoming state (gray-300 ring + gray-300 number). */\n .ddga-progress-indicator__indicator {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--pi-size);\n block-size: var(--pi-size);\n border-radius: var(--ddga-radius-full);\n border: 2px solid var(--ddga-color-input);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-input);\n font-size: var(--ddga-font-size-base);\n font-weight: 500;\n line-height: 1;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-progress-indicator__indicator-check {\n display: none;\n inline-size: 16px;\n block-size: 16px;\n }\n\n .ddga-progress-indicator__step--completed .ddga-progress-indicator__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-progress-indicator__step--completed .ddga-progress-indicator__indicator-check {\n display: inline-block;\n }\n .ddga-progress-indicator__step--completed .ddga-progress-indicator__indicator-number {\n display: none;\n }\n\n .ddga-progress-indicator__step--current .ddga-progress-indicator__indicator {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* Hover darkens the indicator one step per SDGA `…-hovered`: green → SA-700,\n gray → gray-400 (circles + dot; connector + text unchanged). */\n .ddga-progress-indicator__step--completed:hover .ddga-progress-indicator__indicator {\n background-color: var(--ddga-color-primary-hover);\n border-color: var(--ddga-color-primary-hover);\n }\n .ddga-progress-indicator__step--current:hover .ddga-progress-indicator__indicator {\n border-color: var(--ddga-color-primary-hover);\n color: var(--ddga-color-primary-hover);\n }\n .ddga-progress-indicator__step--upcoming:hover .ddga-progress-indicator__indicator {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-gray-400);\n }\n\n .ddga-progress-indicator__content {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n min-inline-size: 0;\n padding-inline-end: var(--ddga-space-4);\n }\n .ddga-progress-indicator--vertical .ddga-progress-indicator__content {\n justify-content: center;\n }\n\n .ddga-progress-indicator__title {\n display: block;\n color: var(--ddga-gray-800);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: 400;\n }\n .ddga-progress-indicator__step--current .ddga-progress-indicator__title {\n font-weight: 500;\n }\n\n .ddga-progress-indicator__description {\n display: block;\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n font-weight: 400;\n }\n\n .ddga-progress-indicator__step--upcoming .ddga-progress-indicator__title,\n .ddga-progress-indicator__step--upcoming .ddga-progress-indicator__description {\n color: var(--ddga-gray-500);\n }\n\n /* A consumer link makes a step navigable; SDGA never hyperlink-styles the text,\n so links read as plain step text (the focus box is the only nav affordance). */\n .ddga-progress-indicator__content a {\n color: inherit;\n text-decoration: none;\n }\n\n /* A step with an interactive child is navigable (SDGA hover = cursor only, no\n colour delta). Focus (keyboard) fires the SDGA treatment: a 1px white ring\n *inside* the circle + a 2px ink ring *outside* it, and a tight 2px ink box\n around the text (4px inline pad, outline inset -2px). */\n .ddga-progress-indicator__step:has(a, button) {\n cursor: pointer;\n }\n .ddga-progress-indicator__step:has(:focus-visible) .ddga-progress-indicator__indicator {\n box-shadow:\n inset 0 0 0 1px var(--ddga-color-background),\n 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-progress-indicator__step:has(:focus-visible) .ddga-progress-indicator__content {\n padding-inline: var(--ddga-space-1);\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n }\n\n /* Dot appearance: 16px solid (completed) / ring (current·upcoming), no glyph. */\n .ddga-progress-indicator--dot .ddga-progress-indicator__indicator-number,\n .ddga-progress-indicator--dot .ddga-progress-indicator__indicator-check {\n display: none;\n }\n .ddga-progress-indicator--dot\n .ddga-progress-indicator__step--completed:not(:hover)\n .ddga-progress-indicator__indicator {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n\n /* Exact light greys are raw tokens; remap to adaptive text roles in dark. */\n [data-theme='dark'] .ddga-progress-indicator__title {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-progress-indicator__description {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark'] .ddga-progress-indicator__step--upcoming .ddga-progress-indicator__title,\n [data-theme='dark']\n .ddga-progress-indicator__step--upcoming\n .ddga-progress-indicator__description {\n color: var(--ddga-text-tertiary);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-progress-indicator__indicator {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-progress-indicator__indicator {\n border-color: CanvasText;\n color: CanvasText;\n }\n .ddga-progress-indicator__step--completed .ddga-progress-indicator__indicator,\n .ddga-progress-indicator__step--current .ddga-progress-indicator__indicator {\n border-color: Highlight;\n color: Highlight;\n }\n .ddga-progress-indicator__step:not(:last-child)::before {\n background-color: CanvasText;\n }\n .ddga-progress-indicator__step--completed:not(:last-child)::before {\n background-color: Highlight;\n }\n }\n}\n","/* Arabic abjad alphabetic counter — أ ب ج … in classical abjad order, for the\n RTL ordered Level-Two marker. `arabic-indic` is native; abjad is not. Symbols\n are the W3C \"Ready-made Counter Styles\" sequence (`\\647\\200D` = HEH + ZWJ so it\n joins). Counter-style names are global, so this lives outside the cascade layer. */\n@counter-style ddga-arabic-abjad {\n system: fixed;\n symbols: '\\623' '\\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 /* SDGA content list: Type (ordered/unordered/with-icon) × tone × Level. Each item is\n a flex row [marker · 8px gap · text]; tone colours marker + text together via\n currentColor; line-height 24 carries the vertical rhythm (container gap 0). */\n\n .ddga-list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\n }\n\n .ddga-list--primary {\n color: var(--ddga-color-primary);\n }\n .ddga-list--neutral {\n color: var(--ddga-text-primary);\n }\n /* For dark / brand surfaces — consumer supplies the background. */\n .ddga-list--on-color {\n color: #fff;\n }\n\n .ddga-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n color: inherit;\n }\n /* SDGA: ordered + with-icon rows center marker↔text; unordered L1 stays start (multi-line wrap). */\n .ddga-list--ordered > .ddga-list__item,\n .ddga-list--with-icon > .ddga-list__item {\n align-items: center;\n }\n\n .ddga-list__item[data-level='2'] {\n padding-inline-start: var(--ddga-space-6);\n }\n\n .ddga-list--ordered > .ddga-list__item::before,\n .ddga-list--unordered > .ddga-list__item::before {\n flex-shrink: 0;\n }\n\n /* Ordered: decimal+\"-\" at L1, lower-alpha+\"-\" at L2 (Arabic abjad in RTL). Digits\n stay Latin in RTL per SDGA; letters localize. counter() drops the style suffix,\n so the \"-\" is appended explicitly. */\n .ddga-list--ordered {\n counter-reset: ddga-l1 ddga-l2;\n }\n .ddga-list--ordered > .ddga-list__item:not([data-level='2']) {\n counter-increment: ddga-l1;\n counter-reset: ddga-l2;\n }\n .ddga-list--ordered > .ddga-list__item:not([data-level='2'])::before {\n content: counter(ddga-l1, decimal) '-';\n }\n .ddga-list--ordered > .ddga-list__item[data-level='2'] {\n counter-increment: ddga-l2;\n }\n .ddga-list--ordered > .ddga-list__item[data-level='2']::before {\n content: counter(ddga-l2, lower-alpha) '-';\n }\n [dir='rtl'] .ddga-list--ordered > .ddga-list__item[data-level='2']::before {\n content: counter(ddga-l2, ddga-arabic-abjad) '-';\n }\n\n /* Unordered: hyphen bullet at L1, dot at L2. */\n .ddga-list--unordered > .ddga-list__item:not([data-level='2'])::before {\n content: '-';\n }\n .ddga-list--unordered > .ddga-list__item[data-level='2']::before {\n content: '\\2022';\n }\n\n /* With Icon: 16px glyph centred on the first 24px line; tone via currentColor. */\n .ddga-list__icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n inline-size: 16px;\n block-size: 1.5em;\n color: inherit;\n }\n .ddga-list__icon svg {\n inline-size: 16px;\n block-size: 16px;\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 + helper/error message are shared , see field.css. */\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) ─── */\n\n .ddga-checkbox {\n position: relative;\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-gray-500);\n border-radius: var(--ddga-radius-xs);\n background-color: transparent;\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: 24px;\n inline-size: 24px;\n }\n .ddga-checkbox--sm {\n block-size: 20px;\n inline-size: 20px;\n }\n .ddga-checkbox--xs {\n block-size: 16px;\n inline-size: 16px;\n }\n\n /* ─── Ripple halo (hover + pressed) ─── */\n /* z-index -1 keeps the halo behind the box so the border stays on top. */\n\n .ddga-checkbox::before {\n content: '';\n position: absolute;\n inset: -8px;\n z-index: -1;\n border-radius: 9999px;\n background-color: var(--ddga-gray-100);\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease;\n }\n .ddga-checkbox:not(:disabled):not([data-readonly]):hover::before,\n .ddga-checkbox:not(:disabled):not([data-readonly]):active::before {\n opacity: 1;\n }\n\n /* ─── Unchecked pressed fill ─── */\n\n .ddga-checkbox[data-state='unchecked']:not(:disabled):not([data-readonly]):active {\n background-color: var(--ddga-gray-300);\n }\n\n /* ─── Checked / indeterminate fill — Primary ─── */\n /* hover = primary-hover (SA700); SDGA is SA800 — kept token-driven so themes follow. */\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 .ddga-checkbox[data-state='checked']:not(:disabled):not([data-readonly]):hover,\n .ddga-checkbox[data-state='indeterminate']:not(:disabled):not([data-readonly]):hover {\n background-color: var(--ddga-color-primary-hover);\n border-color: var(--ddga-color-primary-hover);\n }\n .ddga-checkbox[data-state='checked']:not(:disabled):not([data-readonly]):active,\n .ddga-checkbox[data-state='indeterminate']:not(:disabled):not([data-readonly]):active {\n background-color: var(--ddga-color-primary-active);\n border-color: var(--ddga-color-primary-active);\n }\n\n /* ─── Checked / indeterminate fill — Neutral ─── */\n\n .ddga-checkbox--neutral[data-state='checked'],\n .ddga-checkbox--neutral[data-state='indeterminate'] {\n background-color: var(--ddga-gray-950);\n border-color: var(--ddga-gray-950);\n }\n .ddga-checkbox--neutral[data-state='checked']:not(:disabled):not([data-readonly]):hover,\n .ddga-checkbox--neutral[data-state='indeterminate']:not(:disabled):not([data-readonly]):hover {\n background-color: var(--ddga-gray-600);\n border-color: var(--ddga-gray-600);\n }\n .ddga-checkbox--neutral[data-state='checked']:not(:disabled):not([data-readonly]):active,\n .ddga-checkbox--neutral[data-state='indeterminate']:not(:disabled):not([data-readonly]):active {\n background-color: var(--ddga-gray-500);\n border-color: var(--ddga-gray-500);\n }\n\n /* ─── Focus (2px offset ring; SDGA #161616 ink via the focus-ring token) ─── */\n\n .ddga-checkbox:focus-visible {\n outline: 2px solid var(--ddga-color-focus-ring);\n outline-offset: 2px;\n }\n\n /* ─── Read-only (outlined box, icon in the fill color) ─── */\n\n .ddga-checkbox[data-readonly] {\n cursor: default;\n border-color: var(--ddga-gray-400);\n }\n .ddga-checkbox[data-readonly][data-state='checked'],\n .ddga-checkbox[data-readonly][data-state='indeterminate'] {\n background-color: transparent;\n border-color: var(--ddga-gray-400);\n color: var(--ddga-color-primary);\n }\n .ddga-checkbox--neutral[data-readonly][data-state='checked'],\n .ddga-checkbox--neutral[data-readonly][data-state='indeterminate'] {\n color: var(--ddga-gray-950);\n }\n\n /* ─── Error (off-spec; SDGA uses the Label alert slot) ─── */\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 outline-color: var(--ddga-color-error);\n }\n\n /* ─── Disabled (SDGA recolors, no opacity) ─── */\n\n .ddga-checkbox:disabled {\n cursor: not-allowed;\n border-color: var(--ddga-gray-400);\n }\n .ddga-checkbox:disabled[data-state='checked'],\n .ddga-checkbox:disabled[data-state='indeterminate'] {\n background-color: var(--ddga-gray-200);\n border-color: var(--ddga-gray-200);\n color: var(--ddga-color-primary-foreground);\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 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 /* 75% so the inset glyph reads ~50% of the box. */\n .ddga-checkbox__check {\n inline-size: 75%;\n block-size: 75%;\n }\n /* bar: 50% wide, box/8 tall (SDGA indeterminate). */\n .ddga-checkbox__minus {\n inline-size: 50%;\n block-size: 12.5%;\n min-block-size: 2px;\n border-radius: 1px;\n background-color: currentColor;\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 /* ─── Dark mode ─── */\n /* Neutral flips to a light fill so it stays legible; ink follows primary-foreground. */\n\n [data-theme='dark'] .ddga-checkbox::before {\n background-color: var(--ddga-gray-700);\n }\n [data-theme='dark'] .ddga-checkbox--neutral[data-state='checked'],\n [data-theme='dark'] .ddga-checkbox--neutral[data-state='indeterminate'] {\n background-color: var(--ddga-gray-100);\n border-color: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-checkbox--neutral[data-readonly][data-state='checked'],\n [data-theme='dark'] .ddga-checkbox--neutral[data-readonly][data-state='indeterminate'] {\n color: var(--ddga-gray-100);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-checkbox,\n .ddga-checkbox::before {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n @media (forced-colors: active) {\n .ddga-checkbox {\n border: 1px solid CanvasText;\n }\n .ddga-checkbox[data-state='checked'],\n .ddga-checkbox[data-state='indeterminate'] {\n background-color: CanvasText;\n }\n .ddga-checkbox__indicator {\n color: Canvas;\n }\n .ddga-checkbox:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-checkbox:disabled {\n border-color: GrayText;\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-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: Black ─── */\n\n .ddga-button--black {\n background-color: var(--ddga-gray-950);\n color: #ffffff;\n }\n .ddga-button--black:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-800);\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-input);\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-error-200);\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 /* ─── Selected (aria-pressed) ─── */\n\n .ddga-button--primary[aria-pressed='true'] {\n background-color: var(--ddga-sa-800);\n }\n .ddga-button--secondary[aria-pressed='true'] {\n background-color: var(--ddga-gray-200);\n }\n .ddga-button--black[aria-pressed='true'] {\n background-color: var(--ddga-gray-700);\n }\n .ddga-button--destructive[aria-pressed='true'] {\n background-color: var(--ddga-error-800);\n }\n\n /* ─── Pressed (:active) ─── */\n\n .ddga-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-active);\n }\n .ddga-button--secondary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-button--black:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-600);\n }\n .ddga-button--destructive:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-900);\n }\n .ddga-button--destructive-subtle:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-200);\n }\n /* Transparent variants: pressed = one step past the hover tint. */\n .ddga-button--outline:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--ghost:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-button--destructive-outline:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--destructive-ghost:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-100);\n }\n\n /* ─── Sizes ─── */\n\n .ddga-button--sm {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.125rem;\n }\n .ddga-button--md {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n }\n .ddga-button--lg {\n height: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n }\n /* Icon-only squares (40 / 32 / 28 / 24; icon-sm 28 is off-spec). */\n .ddga-button--icon {\n height: 40px;\n width: 40px;\n padding: 0;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-button--icon-md {\n height: 32px;\n width: 32px;\n padding: 0;\n font-size: var(--ddga-font-size-sm);\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 .ddga-button--icon-xs {\n height: 24px;\n width: 24px;\n padding: 0;\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Full Width ─── */\n\n .ddga-button--full-width {\n inline-size: 100%;\n flex: 1 0 100%;\n }\n\n /* ─── On-color (on dark / brand surfaces) ─── */\n\n /* black + primary → white solid (dark label) */\n .ddga-button--on-color.ddga-button--black,\n .ddga-button--on-color.ddga-button--primary {\n background-color: #ffffff;\n color: var(--ddga-color-foreground);\n border-color: transparent;\n }\n .ddga-button--on-color.ddga-button--black:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-80);\n }\n .ddga-button--on-color.ddga-button--black:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-60);\n }\n .ddga-button--on-color.ddga-button--black[aria-pressed='true'],\n .ddga-button--on-color.ddga-button--primary[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-70);\n }\n\n /* secondary (neutral) + ghost (subtle) → white text on transparent */\n .ddga-button--on-color.ddga-button--secondary,\n .ddga-button--on-color.ddga-button--ghost {\n background-color: transparent;\n color: #ffffff;\n border-color: transparent;\n }\n /* outline → white text + translucent-white border */\n .ddga-button--on-color.ddga-button--outline {\n background-color: transparent;\n color: #ffffff;\n border-color: var(--ddga-alpha-white-40);\n }\n /* shared transparent-white hover / pressed / selected */\n .ddga-button--on-color.ddga-button--secondary:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-20);\n }\n .ddga-button--on-color.ddga-button--secondary:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--ghost:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--outline:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-40);\n }\n .ddga-button--on-color.ddga-button--secondary[aria-pressed='true'],\n .ddga-button--on-color.ddga-button--ghost[aria-pressed='true'],\n .ddga-button--on-color.ddga-button--outline[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-30);\n }\n\n /* destructive outline / ghost → light error label (DGA danger on-color) */\n .ddga-button--on-color.ddga-button--destructive-outline,\n .ddga-button--on-color.ddga-button--destructive-ghost {\n color: var(--ddga-error-200);\n }\n .ddga-button--on-color.ddga-button--destructive-outline {\n border-color: var(--ddga-error-200);\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 cursor: not-allowed;\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n border-color: transparent;\n }\n .ddga-button--outline:disabled,\n .ddga-button--outline[aria-disabled='true'],\n .ddga-button--destructive-outline:disabled,\n .ddga-button--destructive-outline[aria-disabled='true'] {\n background-color: transparent;\n border-color: var(--ddga-color-border);\n }\n .ddga-button--ghost:disabled,\n .ddga-button--ghost[aria-disabled='true'],\n .ddga-button--destructive-ghost:disabled,\n .ddga-button--destructive-ghost[aria-disabled='true'] {\n background-color: transparent;\n }\n /* On-color disabled: translucent white (a gray chip would vanish on color). */\n .ddga-button--on-color:disabled,\n .ddga-button--on-color[aria-disabled='true'] {\n background-color: var(--ddga-alpha-white-20);\n color: var(--ddga-alpha-white-40);\n border-color: var(--ddga-alpha-white-20);\n }\n [data-theme='dark'] .ddga-button:disabled,\n [data-theme='dark'] .ddga-button[aria-disabled='true'] {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-500);\n }\n\n /* Inset double ring (drawn inside so the box never shifts). */\n .ddga-button:focus-visible {\n outline: none;\n box-shadow:\n inset 0 0 0 2px var(--ddga-color-background),\n inset 0 0 0 4px var(--ddga-color-focus-ring);\n }\n /* On-color: inverted ring (dark inner + white outer). */\n .ddga-button--on-color:focus-visible {\n box-shadow:\n inset 0 0 0 2px var(--ddga-color-foreground),\n inset 0 0 0 4px #ffffff;\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","/* Dark mode. Semantic tokens alias Tier-1 primitives + the brand ramp, so a\n primitive or brand/accent override adapts dark automatically. The mode-aware\n primary step (light 600 → dark 400) lives here. Shadows stay literal (not a ramp). */\n[data-theme='dark'] {\n color-scheme: dark;\n\n --ddga-color-background: var(--ddga-gray-900);\n --ddga-color-foreground: var(--ddga-gray-100);\n --ddga-color-muted: var(--ddga-gray-800);\n --ddga-color-muted-foreground: var(--ddga-gray-400);\n --ddga-color-border: var(--ddga-gray-700);\n --ddga-color-card: var(--ddga-gray-800);\n --ddga-color-card-foreground: var(--ddga-gray-100);\n --ddga-color-input: var(--ddga-gray-700);\n\n --ddga-color-primary: var(--ddga-brand-400);\n --ddga-color-primary-hover: var(--ddga-brand-300);\n --ddga-color-primary-active: var(--ddga-brand-500);\n --ddga-color-primary-foreground: var(--ddga-gray-950);\n\n --ddga-color-secondary: var(--ddga-gray-800);\n --ddga-color-secondary-hover: var(--ddga-gray-700);\n --ddga-color-secondary-foreground: var(--ddga-gray-100);\n\n --ddga-color-destructive: var(--ddga-error-400);\n --ddga-color-destructive-hover: var(--ddga-error-500);\n --ddga-color-destructive-foreground: var(--ddga-gray-950);\n\n --ddga-color-error: var(--ddga-error-400);\n --ddga-color-error-hover: var(--ddga-error-500);\n --ddga-color-error-foreground: var(--ddga-gray-950);\n --ddga-color-success: var(--ddga-success-400);\n --ddga-color-success-hover: var(--ddga-success-500);\n --ddga-color-success-foreground: var(--ddga-gray-950);\n --ddga-color-warning: var(--ddga-warning-400);\n --ddga-color-warning-hover: var(--ddga-warning-500);\n --ddga-color-warning-foreground: var(--ddga-gray-950);\n --ddga-color-info: var(--ddga-info-400);\n --ddga-color-info-hover: var(--ddga-info-500);\n --ddga-color-info-foreground: var(--ddga-gray-950);\n\n --ddga-color-ring: var(--ddga-brand-400);\n\n --ddga-text-primary: #ffffff;\n --ddga-text-secondary: var(--ddga-alpha-white-70);\n --ddga-text-tertiary: var(--ddga-alpha-white-60);\n --ddga-text-placeholder: var(--ddga-gray-500);\n\n /* Stronger than light (navy is invisible on dark). */\n --ddga-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-md: 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 4px 8px -2px rgb(0 0 0 / 0.45);\n --ddga-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.3), 0 12px 16px -4px rgb(0 0 0 / 0.5);\n --ddga-shadow-xl: 0 8px 8px -4px rgb(0 0 0 / 0.3), 0 20px 24px -4px rgb(0 0 0 / 0.5);\n --ddga-shadow-2xl: 0 24px 48px -12px rgb(0 0 0 / 0.6);\n --ddga-shadow-3xl: 0 32px 64px -12px rgb(0 0 0 / 0.55);\n}\n","@layer ddga-components {\n .ddga-tooltip {\n --ddga-tooltip-surface: #fff;\n --ddga-tooltip-heading: var(--ddga-gray-800);\n --ddga-tooltip-paragraph: var(--ddga-gray-700);\n\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n min-inline-size: 160px;\n max-inline-size: 240px;\n background-color: var(--ddga-tooltip-surface);\n border-radius: var(--ddga-radius-sm);\n box-shadow: var(--ddga-shadow-lg);\n font-family: inherit;\n z-index: 50;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-tooltip--inverted {\n --ddga-tooltip-surface: var(--ddga-gray-800);\n --ddga-tooltip-heading: var(--ddga-gray-50);\n --ddga-tooltip-paragraph: var(--ddga-gray-100);\n }\n\n .ddga-tooltip__icon {\n display: flex;\n flex-shrink: 0;\n }\n\n /* SDGA help badge is fixed two-tone (gray-700 disc + white \"?\") on every surface. */\n .ddga-tooltip__glyph-disc {\n fill: #fff;\n }\n .ddga-tooltip__glyph-mark {\n fill: var(--ddga-gray-700);\n }\n\n .ddga-tooltip__text {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n font-size: var(--ddga-font-size-xs);\n line-height: 18px;\n overflow-wrap: anywhere;\n word-break: break-word;\n }\n\n .ddga-tooltip__title {\n color: var(--ddga-tooltip-heading);\n font-weight: var(--ddga-font-weight-semibold);\n }\n\n .ddga-tooltip__body {\n color: var(--ddga-tooltip-paragraph);\n font-weight: var(--ddga-font-weight-regular);\n }\n\n .ddga-tooltip__arrow {\n fill: var(--ddga-tooltip-surface);\n }\n\n /* Dark theme: a bare tooltip adopts the dark surface; `inverted` flips to light. */\n [data-theme='dark'] .ddga-tooltip:not(.ddga-tooltip--inverted) {\n --ddga-tooltip-surface: var(--ddga-gray-800);\n --ddga-tooltip-heading: var(--ddga-gray-50);\n --ddga-tooltip-paragraph: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-tooltip--inverted {\n --ddga-tooltip-surface: #fff;\n --ddga-tooltip-heading: var(--ddga-gray-800);\n --ddga-tooltip-paragraph: var(--ddga-gray-700);\n }\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 /* ─── Help Icon trigger ─── */\n\n .ddga-tooltip-help {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--ddga-space-1);\n border: 0;\n background: none;\n color: inherit;\n cursor: pointer;\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-tooltip-help:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 2px;\n }\n\n @media (forced-colors: active) {\n .ddga-tooltip {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + message (.ddga-field__message) are shared (field.css). Size\n lives on the field wrapper so it scales the label/helper type as well as rail/thumb. */\n\n /* ─── Size ─── */\n\n .ddga-slider-field--md {\n --ddga-slider-rail: var(--ddga-space-2);\n --ddga-slider-thumb: var(--ddga-space-4);\n }\n .ddga-slider-field--sm {\n --ddga-slider-rail: var(--ddga-space-1);\n --ddga-slider-thumb: var(--ddga-space-3);\n }\n\n /* ─── Label ─── */\n\n .ddga-slider__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n }\n .ddga-slider-field--md .ddga-slider__label {\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n }\n .ddga-slider-field--sm .ddga-slider__label {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.43;\n }\n\n /* ─── Control row (track + value) ─── */\n\n .ddga-slider__control {\n display: flex;\n align-items: center;\n gap: 0.375rem; /* SDGA 6px — no space token */\n }\n\n .ddga-slider__value {\n flex-shrink: 0;\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5; /* SDGA Text xs 12/18 — else inherits body 1.6 → 19.2px */\n font-variant-numeric: tabular-nums;\n }\n .ddga-slider-field--sm .ddga-field__message {\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Root ─── */\n\n .ddga-slider {\n position: relative;\n display: flex;\n flex: 1 1 auto;\n min-inline-size: 0;\n align-items: center;\n block-size: var(--ddga-slider-thumb);\n touch-action: none;\n user-select: none;\n }\n\n /* ─── Track + range ─── */\n\n .ddga-slider__track {\n position: relative;\n flex-grow: 1;\n block-size: var(--ddga-slider-rail);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-slider__range {\n position: absolute;\n block-size: 100%;\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Thumb ─── */\n\n /* SDGA Control = brand-green fill + `border-success` #067647 ring (success-700, not sa-700). */\n .ddga-slider__thumb {\n display: block;\n inline-size: var(--ddga-slider-thumb);\n block-size: var(--ddga-slider-thumb);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-primary);\n border: 1px solid var(--ddga-success-700);\n cursor: grab;\n transition: box-shadow 150ms ease;\n }\n\n .ddga-slider__thumb:active {\n cursor: grabbing;\n }\n\n /* Two-layer ring so focus stays visible on the same-green thumb. */\n .ddga-slider__thumb:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--ddga-color-background),\n 0 0 0 4px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-slider--error .ddga-slider__range,\n .ddga-slider--error .ddga-slider__thumb {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-slider--error .ddga-slider__thumb:focus-visible {\n box-shadow:\n 0 0 0 2px var(--ddga-color-background),\n 0 0 0 4px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\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 /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-slider__thumb {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\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: Highlight;\n border: 1px solid 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 .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__arc {\n stroke: currentColor;\n }\n .ddga-spinner__track {\n stroke: color-mix(in srgb, currentColor 12%, transparent);\n }\n\n .ddga-spinner--neutral .ddga-spinner__arc {\n stroke: var(--ddga-text-primary);\n }\n .ddga-spinner--primary .ddga-spinner__arc {\n stroke: var(--ddga-color-primary);\n }\n .ddga-spinner--neutral .ddga-spinner__track,\n .ddga-spinner--primary .ddga-spinner__track {\n stroke: var(--ddga-color-muted);\n }\n\n .ddga-spinner--on-color .ddga-spinner__arc {\n /* DGA surface-oncolor is a fixed white; must not theme-flip like primary-foreground does */\n stroke: #ffffff;\n }\n .ddga-spinner--on-color .ddga-spinner__track {\n stroke: var(--ddga-alpha-white-30);\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 .ddga-spinner--xl {\n font-size: 2.5rem;\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 @media (forced-colors: active) {\n .ddga-spinner__arc {\n stroke: CanvasText;\n }\n .ddga-spinner__track {\n stroke: transparent;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA Quote — card block (heading + quote + author) framed by two large SA-flag-green marks.\n White Background=Yes → neutral-50 tint; No → transparent. Size = width only (lg 846 / sm 640).\n Logical properties keep the body inset + marks RTL-correct; raw ramp tokens are remapped for dark. */\n\n .ddga-quote {\n --ddga-quote-mark: var(--ddga-sa-800);\n --ddga-quote-paragraph: var(--ddga-gray-700);\n --ddga-quote-tint: var(--ddga-gray-50);\n\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-12);\n margin: 0;\n padding: var(--ddga-space-5);\n border-radius: var(--ddga-radius-xl);\n inline-size: 100%;\n color: var(--ddga-text-primary);\n font-family: inherit;\n }\n\n .ddga-quote--lg {\n max-inline-size: 846px;\n }\n .ddga-quote--sm {\n max-inline-size: 640px;\n }\n .ddga-quote--tint {\n background-color: var(--ddga-quote-tint);\n }\n\n .ddga-quote__blockquote {\n margin: 0;\n }\n\n .ddga-quote__body {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-inline: var(--ddga-space-16);\n }\n\n .ddga-quote__title {\n margin: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-2xl);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 2rem;\n }\n\n .ddga-quote__content {\n color: var(--ddga-quote-paragraph);\n font-size: var(--ddga-font-size-xl);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.875rem;\n }\n .ddga-quote__content p {\n margin-block: 0;\n }\n .ddga-quote__content p + p {\n margin-block-start: var(--ddga-space-4);\n }\n\n /* ─── Author ─── */\n\n .ddga-quote__caption {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-4);\n margin: 0;\n }\n\n .ddga-quote__avatar {\n flex: none;\n display: inline-flex;\n inline-size: 80px;\n block-size: 80px;\n overflow: hidden;\n border: 2px solid var(--ddga-color-background);\n border-radius: var(--ddga-radius-full);\n }\n .ddga-quote__avatar > * {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n\n .ddga-quote__author-info {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n }\n\n .ddga-quote__author {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-xl);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.875rem;\n }\n\n .ddga-quote__author-title {\n color: var(--ddga-quote-paragraph);\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.75rem;\n }\n\n /* ─── Marks — the literal U+201D glyph (SDGA: 128px, decorative), oriented per corner.\n Body's 64px inline padding is their gutter; ink sits at the top of the line box, so the\n close mark flips vertically (scaleY) to drop its ink to the bottom-trailing corner. ─── */\n\n .ddga-quote__mark {\n position: absolute;\n color: var(--ddga-quote-mark);\n font-family: inherit;\n font-size: 128px;\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1;\n pointer-events: none;\n user-select: none;\n }\n .ddga-quote__mark--open {\n inset-block-start: 0;\n inset-inline-start: 0;\n transform: scaleX(-1);\n }\n .ddga-quote__mark--close {\n inset-block-end: 0;\n inset-inline-end: 0;\n transform: scaleX(-1) scaleY(-1);\n }\n [dir='rtl'] .ddga-quote__mark--open {\n transform: none;\n }\n [dir='rtl'] .ddga-quote__mark--close {\n transform: scaleY(-1);\n }\n\n /* ─── Dark — raw ramp tokens don't flip; remap to flipping semantics (exact DGA dark deferred) ─── */\n\n [data-theme='dark'] .ddga-quote {\n /* marks stay SA-800 (spec: dark shows only light; corner marks don't flip) */\n --ddga-quote-paragraph: var(--ddga-text-secondary);\n --ddga-quote-tint: var(--ddga-color-muted);\n }\n\n @media (forced-colors: active) {\n .ddga-quote__mark {\n color: CanvasText;\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 /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared — see field.css.\n Style (variant), error, read-only cascade from the group; disabled is per-item (Radix native). */\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: var(--ddga-font-weight-medium);\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 .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: 32px touch frame + label, SDGA spacing-xl gap. */\n .ddga-radio-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-4);\n }\n\n /* Item = 32px SDGA touch frame; the transparent 2px border is the focus frame (becomes ink on focus). */\n .ddga-radio {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 2px solid transparent;\n background: none;\n cursor: pointer;\n }\n\n /* Visible 24px ring. currentColor drives the dot; border + color move together per state. */\n .ddga-radio__circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-primary);\n transition:\n border-color 150ms ease,\n color 150ms ease,\n background-color 150ms ease;\n }\n\n /* Ripple halo (48px), behind the ring; hover + pressed only. */\n .ddga-radio__circle::before {\n content: '';\n position: absolute;\n inset: -12px;\n z-index: -1;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease;\n }\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled):hover\n .ddga-radio__circle::before,\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled):active\n .ddga-radio__circle::before {\n opacity: 1;\n }\n\n /* Unselected pressed fill. */\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='unchecked']:active\n .ddga-radio__circle {\n background-color: var(--ddga-gray-300);\n }\n\n /* Selected — Primary: border + dot follow the brand ramp. */\n .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n /* SDGA selected-hover = SA800 (one step darker than SA600 primary). */\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:hover\n .ddga-radio__circle {\n border-color: var(--ddga-sa-800);\n color: var(--ddga-sa-800);\n }\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:active\n .ddga-radio__circle {\n border-color: var(--ddga-color-primary-active);\n color: var(--ddga-color-primary-active);\n }\n\n /* Selected — Neutral: gray-950 base, gray-600 hover, gray-500 pressed. */\n .ddga-radio-group--neutral .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-gray-950);\n color: var(--ddga-gray-950);\n }\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:hover\n .ddga-radio__circle {\n border-color: var(--ddga-gray-600);\n color: var(--ddga-gray-600);\n }\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:active\n .ddga-radio__circle {\n border-color: var(--ddga-gray-500);\n color: var(--ddga-gray-500);\n }\n\n /* Focus: square 2px SDGA border-black frame at the 32px envelope. */\n .ddga-radio:focus-visible {\n outline: none;\n border-color: var(--ddga-color-focus-ring);\n }\n\n /* Read-only: gray-400 ring; Primary keeps its green dot, Neutral goes gray-400. */\n .ddga-radio-group--readonly .ddga-radio {\n cursor: default;\n }\n .ddga-radio-group--readonly .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n }\n .ddga-radio-group--readonly .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-color-primary);\n }\n .ddga-radio-group--readonly.ddga-radio-group--neutral\n .ddga-radio[data-state='checked']\n .ddga-radio__circle {\n color: var(--ddga-gray-400);\n }\n .ddga-radio-group--readonly .ddga-radio__label {\n cursor: default;\n }\n\n /* Error (off-spec; SDGA uses the Label alert slot). */\n .ddga-radio-group--error .ddga-radio__circle {\n border-color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-color-error);\n color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio:focus-visible {\n border-color: var(--ddga-color-error);\n }\n\n /* Disabled (SDGA recolors to gray-400, no opacity). */\n .ddga-radio:disabled {\n cursor: not-allowed;\n }\n .ddga-radio:disabled .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n }\n .ddga-radio:disabled[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-gray-400);\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 (dot only mounts when checked). */\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 /* 16px = SDGA dot (Figma inset 18.75%−0.63px ≈ 3.87px → 16.26px). Even size centers on integer px in the\n 22px content box (3px each side) so it stays crisp + exactly centered at DPR 1. */\n .ddga-radio__dot {\n inline-size: 16px;\n block-size: 16px;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\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 /* Dark mode: interactive Neutral flips light so it stays legible (read-only/disabled keep gray-400). */\n [data-theme='dark'] .ddga-radio__circle::before {\n background-color: var(--ddga-gray-700);\n }\n [data-theme='dark']\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']\n .ddga-radio__circle {\n border-color: var(--ddga-gray-100);\n color: var(--ddga-gray-100);\n }\n /* Hover/pressed must out-specify the resting rule above (equal-specificity tie → later wins). */\n [data-theme='dark']\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:hover\n .ddga-radio__circle {\n border-color: var(--ddga-gray-300);\n color: var(--ddga-gray-300);\n }\n [data-theme='dark']\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:active\n .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-gray-400);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-radio__circle,\n .ddga-radio__circle::before {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-radio__circle {\n border: 1px solid CanvasText;\n }\n .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: Highlight;\n }\n .ddga-radio__dot {\n background-color: Highlight;\n }\n .ddga-radio:focus-visible {\n border-color: Highlight;\n }\n .ddga-radio:disabled .ddga-radio__circle {\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-field[data-slot='text-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-text-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-text-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── */\n\n .ddga-text-input {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline-start: var(--ddga-space-2);\n padding-inline-end: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── */\n\n .ddga-text-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-text-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-text-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-text-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <input>: transparent, borderless fill) ─── */\n\n .ddga-text-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 caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-text-input__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n /* Autofill: browsers repaint autofilled fields with their own bg/text,\n overriding the theme (jarring in dark; government forms autofill heavily).\n Repaint with tokens via the inset-shadow technique. */\n .ddga-text-input__field:-webkit-autofill,\n .ddga-text-input__field:-webkit-autofill:hover,\n .ddga-text-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\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-gray-950);\n }\n\n /* ─── Adornments (leading/trailing icon, affix, or in-field button) ─── */\n\n .ddga-text-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 in-field control can't paint\n over the border. */\n max-block-size: 100%;\n color: var(--ddga-gray-500);\n }\n\n .ddga-text-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. */\n .ddga-text-input:has(.ddga-text-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n /* ─── Prefix / suffix affix (SDGA: flush, full-height gray chip) ─── */\n\n .ddga-text-input__affix {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n padding-inline: var(--ddga-space-4);\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-500);\n white-space: nowrap;\n }\n .ddga-text-input--md .ddga-text-input__affix {\n padding-inline: var(--ddga-space-3);\n }\n .ddga-text-input__affix--subtle {\n background-color: transparent;\n padding-inline: 0;\n }\n /* Round the chip's outer corners to the field radius and bleed it flush. */\n .ddga-text-input__adornment--start:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--end:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--start .ddga-text-input__affix {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input__adornment--end .ddga-text-input__affix {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix) {\n padding-inline-start: 0;\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix) {\n padding-inline-end: 0;\n }\n\n /* ─── Dropdown affix (SDGA `_Input Prefix-Suffix` \"Dropdown\": a <button>\n trigger = badge icon + label + chevron; reuses the flush chip shell,\n text is #161616 not gray-500, interactive states) ─── */\n\n .ddga-text-input__dropdown {\n gap: var(--ddga-space-1);\n padding-block: 0;\n border: 0;\n color: var(--ddga-text-primary);\n font: inherit;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n .ddga-text-input__dropdown-icon {\n display: inline-flex;\n flex-shrink: 0;\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-text-input__dropdown-icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-text-input__dropdown-chevron {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-icon {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-chevron {\n inline-size: 16px;\n block-size: 16px;\n }\n /* Interactive states (SDGA neutral-button ramp). */\n .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-gray-200);\n }\n .ddga-text-input__dropdown:active {\n background-color: var(--ddga-gray-300);\n }\n .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-gray-200);\n }\n /* Selected / open (SDGA `button-background-black-selected` #384250 + white). */\n .ddga-text-input__dropdown--selected,\n .ddga-text-input__dropdown--selected:hover,\n .ddga-text-input__dropdown--selected:active {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n /* Focus (SDGA shows a 4px #161616 border; a 2px inset ring matches the\n library's focus language without shifting layout). */\n .ddga-text-input__dropdown:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── */\n\n .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-text-input::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n\n /* ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n .ddga-text-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-text-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n .ddga-text-input:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). The real state is :active; the `--pressed` class is a\n static hook so the state is visible in Storybook / docs. The centered\n underline overrides the focus full-width one while the mouse is down. */\n\n .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n .ddga-text-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input:active::after,\n .ddga-text-input--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n .ddga-text-input--error,\n .ddga-text-input--error:hover:not(:focus-within),\n .ddga-text-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── */\n\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder,\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-gray-400);\n }\n /* SDGA: disabled affix chip switches gray-100 → gray-200 (background-disabled). */\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix {\n background-color: var(--ddga-gray-200);\n }\n\n /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── */\n\n .ddga-field[data-slot='text-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n /* ─── Dark mode ─── */\n /* The SDGA light values are fixed gray-ramp steps that don't flip; remap to\n the flipping semantic tokens so text/affordances stay readable on the dark\n surface. Exact DGA dark palette is deferred (not yet available). */\n\n [data-theme='dark'] .ddga-text-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__affix {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input__dropdown:active,\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--selected,\n [data-theme='dark'] .ddga-text-input__dropdown--selected:hover {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:focus-visible {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input--filled-lighter,\n [data-theme='dark'] .ddga-text-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-text-input::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n [data-theme='dark'] .ddga-text-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field::placeholder,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-text-input,\n .ddga-text-input::after {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast): focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-text-input {\n border: 1px solid CanvasText;\n }\n .ddga-text-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n 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-brand-25: var(--ddga-sa-25);\n --ddga-brand-50: var(--ddga-sa-50);\n --ddga-brand-100: var(--ddga-sa-100);\n --ddga-brand-200: var(--ddga-sa-200);\n --ddga-brand-300: var(--ddga-sa-300);\n --ddga-brand-400: var(--ddga-sa-400);\n --ddga-brand-500: var(--ddga-sa-500);\n --ddga-brand-600: var(--ddga-sa-600);\n --ddga-brand-700: var(--ddga-sa-700);\n --ddga-brand-800: var(--ddga-sa-800);\n --ddga-brand-900: var(--ddga-sa-900);\n --ddga-brand-950: var(--ddga-sa-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-gray {\n --ddga-brand-25: var(--ddga-gray-25);\n --ddga-brand-50: var(--ddga-gray-50);\n --ddga-brand-100: var(--ddga-gray-100);\n --ddga-brand-200: var(--ddga-gray-200);\n --ddga-brand-300: var(--ddga-gray-300);\n --ddga-brand-400: var(--ddga-gray-400);\n --ddga-brand-500: var(--ddga-gray-500);\n --ddga-brand-600: var(--ddga-gray-600);\n --ddga-brand-700: var(--ddga-gray-700);\n --ddga-brand-800: var(--ddga-gray-800);\n --ddga-brand-900: var(--ddga-gray-900);\n --ddga-brand-950: var(--ddga-gray-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-error {\n --ddga-brand-25: var(--ddga-error-25);\n --ddga-brand-50: var(--ddga-error-50);\n --ddga-brand-100: var(--ddga-error-100);\n --ddga-brand-200: var(--ddga-error-200);\n --ddga-brand-300: var(--ddga-error-300);\n --ddga-brand-400: var(--ddga-error-400);\n --ddga-brand-500: var(--ddga-error-500);\n --ddga-brand-600: var(--ddga-error-600);\n --ddga-brand-700: var(--ddga-error-700);\n --ddga-brand-800: var(--ddga-error-800);\n --ddga-brand-900: var(--ddga-error-900);\n --ddga-brand-950: var(--ddga-error-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-warning {\n --ddga-brand-25: var(--ddga-warning-25);\n --ddga-brand-50: var(--ddga-warning-50);\n --ddga-brand-100: var(--ddga-warning-100);\n --ddga-brand-200: var(--ddga-warning-200);\n --ddga-brand-300: var(--ddga-warning-300);\n --ddga-brand-400: var(--ddga-warning-400);\n --ddga-brand-500: var(--ddga-warning-500);\n --ddga-brand-600: var(--ddga-warning-600);\n --ddga-brand-700: var(--ddga-warning-700);\n --ddga-brand-800: var(--ddga-warning-800);\n --ddga-brand-900: var(--ddga-warning-900);\n --ddga-brand-950: var(--ddga-warning-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-success {\n --ddga-brand-25: var(--ddga-success-25);\n --ddga-brand-50: var(--ddga-success-50);\n --ddga-brand-100: var(--ddga-success-100);\n --ddga-brand-200: var(--ddga-success-200);\n --ddga-brand-300: var(--ddga-success-300);\n --ddga-brand-400: var(--ddga-success-400);\n --ddga-brand-500: var(--ddga-success-500);\n --ddga-brand-600: var(--ddga-success-600);\n --ddga-brand-700: var(--ddga-success-700);\n --ddga-brand-800: var(--ddga-success-800);\n --ddga-brand-900: var(--ddga-success-900);\n --ddga-brand-950: var(--ddga-success-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-info {\n --ddga-brand-25: var(--ddga-info-25);\n --ddga-brand-50: var(--ddga-info-50);\n --ddga-brand-100: var(--ddga-info-100);\n --ddga-brand-200: var(--ddga-info-200);\n --ddga-brand-300: var(--ddga-info-300);\n --ddga-brand-400: var(--ddga-info-400);\n --ddga-brand-500: var(--ddga-info-500);\n --ddga-brand-600: var(--ddga-info-600);\n --ddga-brand-700: var(--ddga-info-700);\n --ddga-brand-800: var(--ddga-info-800);\n --ddga-brand-900: var(--ddga-info-900);\n --ddga-brand-950: var(--ddga-info-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-gold {\n --ddga-brand-25: var(--ddga-gold-25);\n --ddga-brand-50: var(--ddga-gold-50);\n --ddga-brand-100: var(--ddga-gold-100);\n --ddga-brand-200: var(--ddga-gold-200);\n --ddga-brand-300: var(--ddga-gold-300);\n --ddga-brand-400: var(--ddga-gold-400);\n --ddga-brand-500: var(--ddga-gold-500);\n --ddga-brand-600: var(--ddga-gold-600);\n --ddga-brand-700: var(--ddga-gold-700);\n --ddga-brand-800: var(--ddga-gold-800);\n --ddga-brand-900: var(--ddga-gold-900);\n --ddga-brand-950: var(--ddga-gold-950);\n --ddga-color-primary-foreground: #0D121C;\n}\n\n.ddga-theme-lavender {\n --ddga-brand-25: var(--ddga-lavender-25);\n --ddga-brand-50: var(--ddga-lavender-50);\n --ddga-brand-100: var(--ddga-lavender-100);\n --ddga-brand-200: var(--ddga-lavender-200);\n --ddga-brand-300: var(--ddga-lavender-300);\n --ddga-brand-400: var(--ddga-lavender-400);\n --ddga-brand-500: var(--ddga-lavender-500);\n --ddga-brand-600: var(--ddga-lavender-600);\n --ddga-brand-700: var(--ddga-lavender-700);\n --ddga-brand-800: var(--ddga-lavender-800);\n --ddga-brand-900: var(--ddga-lavender-900);\n --ddga-brand-950: var(--ddga-lavender-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n","@layer ddga-components {\n .ddga-inline-alert {\n --ddga-inline-alert-stripe: var(--ddga-gray-200);\n --ddga-inline-alert-icon-bg: var(--ddga-gray-50);\n --ddga-inline-alert-icon-fg: var(--ddga-text-primary);\n --ddga-inline-alert-tint-bg: var(--ddga-gray-25);\n --ddga-inline-alert-tint-border: var(--ddga-gray-300);\n --ddga-inline-alert-tint-title: var(--ddga-gray-800);\n\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-6);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: #fff;\n overflow: hidden;\n container-type: inline-size;\n font-family: inherit;\n }\n\n .ddga-inline-alert--color {\n background-color: var(--ddga-inline-alert-tint-bg);\n border-color: var(--ddga-inline-alert-tint-border);\n }\n\n .ddga-inline-alert--neutral {\n --ddga-inline-alert-stripe: var(--ddga-gray-200);\n --ddga-inline-alert-icon-bg: var(--ddga-gray-50);\n --ddga-inline-alert-icon-fg: var(--ddga-text-primary);\n --ddga-inline-alert-tint-bg: var(--ddga-gray-25);\n --ddga-inline-alert-tint-border: var(--ddga-gray-300);\n --ddga-inline-alert-tint-title: var(--ddga-gray-800);\n }\n .ddga-inline-alert--info {\n --ddga-inline-alert-stripe: var(--ddga-info-600);\n --ddga-inline-alert-icon-bg: var(--ddga-info-50);\n --ddga-inline-alert-icon-fg: var(--ddga-info-700);\n --ddga-inline-alert-tint-bg: var(--ddga-info-25);\n --ddga-inline-alert-tint-border: var(--ddga-info-200);\n --ddga-inline-alert-tint-title: var(--ddga-info-700);\n }\n .ddga-inline-alert--destructive {\n --ddga-inline-alert-stripe: var(--ddga-error-600);\n --ddga-inline-alert-icon-bg: var(--ddga-error-50);\n --ddga-inline-alert-icon-fg: var(--ddga-error-700);\n --ddga-inline-alert-tint-bg: var(--ddga-error-25);\n --ddga-inline-alert-tint-border: var(--ddga-error-200);\n --ddga-inline-alert-tint-title: var(--ddga-error-700);\n }\n .ddga-inline-alert--warning {\n --ddga-inline-alert-stripe: var(--ddga-warning-600);\n --ddga-inline-alert-icon-bg: var(--ddga-warning-50);\n --ddga-inline-alert-icon-fg: var(--ddga-warning-700);\n --ddga-inline-alert-tint-bg: var(--ddga-warning-25);\n --ddga-inline-alert-tint-border: var(--ddga-warning-200);\n --ddga-inline-alert-tint-title: var(--ddga-warning-700);\n }\n .ddga-inline-alert--success {\n --ddga-inline-alert-stripe: var(--ddga-success-600);\n --ddga-inline-alert-icon-bg: var(--ddga-success-50);\n --ddga-inline-alert-icon-fg: var(--ddga-success-700);\n --ddga-inline-alert-tint-bg: var(--ddga-success-25);\n --ddga-inline-alert-tint-border: var(--ddga-success-200);\n --ddga-inline-alert-tint-title: var(--ddga-success-700);\n }\n\n .ddga-inline-alert__stripe {\n position: absolute;\n inset-block: -1px;\n inset-inline-start: -1px;\n inline-size: 8px;\n background-color: var(--ddga-inline-alert-stripe);\n opacity: 0.7;\n }\n\n .ddga-inline-alert__header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'icon text close';\n align-items: start;\n column-gap: var(--ddga-space-3);\n inline-size: 100%;\n }\n\n .ddga-inline-alert__icon {\n grid-area: icon;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-inline-alert-icon-bg);\n color: var(--ddga-inline-alert-icon-fg);\n }\n .ddga-inline-alert__icon > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n .ddga-inline-alert__text {\n grid-area: text;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--ddga-space-2);\n min-block-size: 40px;\n min-inline-size: 0;\n word-break: break-word;\n }\n\n .ddga-inline-alert__title {\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-800);\n }\n .ddga-inline-alert--color .ddga-inline-alert__title {\n color: var(--ddga-inline-alert-tint-title);\n }\n\n .ddga-inline-alert__description {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\n }\n\n .ddga-inline-alert__close {\n grid-area: close;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-inline-alert__close > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-inline-alert__close:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-inline-alert__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n .ddga-inline-alert__actions {\n display: flex;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-10);\n }\n\n .ddga-inline-alert__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n border: 0;\n background: transparent;\n border-radius: var(--ddga-radius-sm);\n font-family: inherit;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-inline-alert__action:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-inline-alert__action:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n @container (max-width: 480px) {\n .ddga-inline-alert {\n padding-inline: var(--ddga-space-4);\n }\n .ddga-inline-alert__stripe {\n inset-block: -1px auto;\n inset-inline: -1px;\n inline-size: auto;\n block-size: 8px;\n }\n .ddga-inline-alert__header {\n grid-template-areas:\n 'icon . close'\n 'text text text';\n row-gap: var(--ddga-space-4);\n }\n .ddga-inline-alert__text {\n min-block-size: 0;\n gap: var(--ddga-space-1);\n }\n .ddga-inline-alert__actions {\n flex-direction: column;\n align-items: stretch;\n padding-inline: 0;\n }\n .ddga-inline-alert__action {\n inline-size: 100%;\n }\n .ddga-inline-alert__action:first-child {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n background-color: var(--ddga-gray-100);\n }\n .ddga-inline-alert__action:first-child:hover {\n background-color: var(--ddga-gray-200);\n }\n }\n\n [data-theme='dark'] .ddga-inline-alert--white {\n background-color: var(--ddga-gray-900, #111927);\n border-color: var(--ddga-gray-700);\n }\n [data-theme='dark'] .ddga-inline-alert__title {\n color: var(--ddga-gray-50);\n }\n /* Dark: the light −25/−200 tints render a near-white box and the old title override\n painted light-on-light. Remap to a translucent type tint (off the −600 stripe); the\n title inherits gray-50 from the rule above. */\n [data-theme='dark'] .ddga-inline-alert--color {\n --ddga-inline-alert-tint-bg: color-mix(\n in srgb,\n var(--ddga-inline-alert-stripe) 16%,\n transparent\n );\n --ddga-inline-alert-tint-border: color-mix(\n in srgb,\n var(--ddga-inline-alert-stripe) 45%,\n transparent\n );\n }\n [data-theme='dark'] .ddga-inline-alert__description {\n color: var(--ddga-gray-300);\n }\n [data-theme='dark'] .ddga-inline-alert__close,\n [data-theme='dark'] .ddga-inline-alert__action {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-inline-alert__close:hover,\n [data-theme='dark'] .ddga-inline-alert__action:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-inline-alert__close:focus-visible,\n [data-theme='dark'] .ddga-inline-alert__action:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-inline-alert__action:first-child {\n background-color: var(--ddga-gray-800);\n }\n\n @media (forced-colors: active) {\n .ddga-inline-alert {\n border-color: CanvasText;\n }\n .ddga-inline-alert__close:focus-visible,\n .ddga-inline-alert__action:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* Field wrapper + helper/error line are shared (field.css). The field model\n mirrors TextInput (SDGA \"Number Input\" = the Text input field + flanking ±\n steppers, the SDGA \"Input Prefix-Suffix\" sub-component). */\n\n .ddga-field[data-slot='number-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-number-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-number-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── */\n\n .ddga-number-input {\n position: relative;\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── */\n\n .ddga-number-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-number-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-number-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-number-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <input>: transparent, start-aligned, Latin+LTR) ─── */\n\n .ddga-number-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding-inline: var(--ddga-space-2);\n padding-block: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n caret-color: var(--ddga-gray-950);\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-gray-500);\n }\n\n .ddga-number-input__field:-webkit-autofill,\n .ddga-number-input__field:-webkit-autofill:hover,\n .ddga-number-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\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-gray-950);\n }\n\n /* ─── Stepper buttons (SDGA \"Input Prefix-Suffix\": Solid neutral chip, flush,\n full height; icon #161616; ＋ leads / − trails) ─── */\n\n .ddga-number-input__step {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n padding-inline: var(--ddga-space-4);\n padding-block: 0;\n border: 0;\n background-color: var(--ddga-gray-100);\n color: var(--ddga-text-primary);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-number-input--md .ddga-number-input__step {\n padding-inline: var(--ddga-space-3);\n }\n\n /* Icon: Large 24 / Medium 20. */\n .ddga-number-input__step svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-number-input--md .ddga-number-input__step svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n /* Hug the field's rounded outer corners (＋ = inline-start, − = inline-end). */\n .ddga-number-input__step--increment {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-number-input__step--decrement {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n\n /* Solid state ramp (SDGA neutral-button: rest gray-100 → hover 200 → pressed\n 300, matching TextInputDropdown; SDGA's flattened hover token is a Figma quirk). */\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-300);\n }\n .ddga-number-input__step:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-number-input__step:disabled {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n /* Subtle stepper style (SDGA Style=Subtle: transparent → gray-100 → gray-200). */\n .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:disabled {\n background-color: transparent;\n }\n\n /* ─── Hover (SDGA: outlined style darkens its border to gray-700) ─── */\n\n .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n /* ─── Focus (SDGA: shadow-md + full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n .ddga-number-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-number-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-number-input::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-number-input:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50% 2px underline).\n Scoped to the field itself so pressing a stepper shows the stepper's\n own pressed state, not the field's. `--pressed` is a static demo hook. */\n\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n .ddga-number-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input:has(.ddga-number-input__field:active)::after,\n .ddga-number-input--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border; bg/text unchanged) ─── */\n\n .ddga-number-input--error,\n .ddga-number-input--error:hover:not(:focus-within),\n .ddga-number-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── */\n\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── */\n\n .ddga-field[data-slot='number-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n /* ─── Dark mode ─── */\n /* SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n flipping semantic tokens so text/affordances stay readable. Exact DGA dark\n palette is deferred (matches TextInput). */\n\n [data-theme='dark'] .ddga-number-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-number-input--filled-lighter,\n [data-theme='dark'] .ddga-number-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n [data-theme='dark']\n .ddga-number-input--steppers-subtle\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step:disabled {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-number-input::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n [data-theme='dark'] .ddga-number-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field,\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-number-input,\n .ddga-number-input::after,\n .ddga-number-input__step {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n restore a visible outline ─── */\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 .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-skeleton {\n display: block;\n position: relative;\n overflow: hidden;\n border-radius: var(--ddga-radius-sm);\n background-image: linear-gradient(\n to right,\n color-mix(in srgb, var(--ddga-gray-200) 20%, transparent),\n color-mix(in srgb, var(--ddga-gray-300) 20%, transparent) 25%,\n color-mix(in srgb, var(--ddga-gray-400) 20%, transparent) 50%,\n color-mix(in srgb, var(--ddga-gray-300) 20%, transparent) 75%,\n color-mix(in srgb, var(--ddga-gray-200) 20%, transparent)\n );\n background-size: 200% 100%;\n background-position: 0% 0;\n }\n\n .ddga-skeleton--text {\n width: 100%;\n height: 1em;\n border-radius: var(--ddga-radius-md);\n }\n\n .ddga-skeleton--rectangle {\n width: 100%;\n height: 40px;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-skeleton--circle {\n width: 40px;\n aspect-ratio: 1;\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-skeleton--square {\n width: 40px;\n aspect-ratio: 1;\n border-radius: var(--ddga-radius-xl);\n }\n\n .ddga-skeleton--shimmer {\n animation: ddga-skeleton-shimmer 1.6s ease-in-out infinite alternate;\n }\n\n @keyframes ddga-skeleton-shimmer {\n from {\n background-position: 0% 0;\n }\n to {\n background-position: 100% 0;\n }\n }\n\n [dir='rtl'] .ddga-skeleton--shimmer {\n animation-name: ddga-skeleton-shimmer-rtl;\n }\n\n @keyframes ddga-skeleton-shimmer-rtl {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: 0% 0;\n }\n }\n\n .ddga-skeleton--none {\n animation: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--shimmer {\n animation: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-skeleton {\n border: 1px solid GrayText;\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 /* ─── 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 /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared — see field.css. */\n\n .ddga-switch-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* Track = 48×24 (single SDGA size). The neutral/green/ring colours are driven by three\n per-state custom properties so every state is one override, not a rule per part. */\n .ddga-switch {\n --ddga-switch-off: var(--ddga-gray-950);\n --ddga-switch-on: var(--ddga-color-primary);\n --ddga-switch-ring: var(--ddga-color-foreground);\n position: relative;\n display: inline-block;\n flex-shrink: 0;\n box-sizing: border-box;\n inline-size: 48px;\n block-size: 24px;\n padding: 0;\n border: none;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* OFF = outlined: 1px ring via inset shadow (no layout cost, keeps the centre transparent). */\n .ddga-switch[data-state='unchecked'] {\n box-shadow: inset 0 0 0 1px var(--ddga-switch-off);\n }\n /* ON = filled green. */\n .ddga-switch[data-state='checked'] {\n background-color: var(--ddga-switch-on);\n }\n\n /* State ramp: OFF gray-950→600→500, ON SA600→800→900 (SA800 has no semantic alias → raw ramp). */\n .ddga-switch:hover:not(:disabled) {\n --ddga-switch-off: var(--ddga-gray-600);\n --ddga-switch-on: var(--ddga-sa-800);\n }\n .ddga-switch:active:not(:disabled) {\n --ddga-switch-off: var(--ddga-gray-500);\n --ddga-switch-on: var(--ddga-color-primary-active);\n }\n /* Focus ring ink: OFF #0d121c, ON #161616 (border-black). */\n .ddga-switch[data-state='checked'] {\n --ddga-switch-ring: var(--ddga-text-primary);\n }\n\n /* Ripple halo (hover + pressed): a 4px gray-100 ring outside the track (border, not a filled\n disc — the OFF track is transparent, so a disc would bleed through the centre). */\n .ddga-switch::before {\n content: '';\n position: absolute;\n inset: -4px;\n border: 4px solid var(--ddga-color-muted);\n border-radius: var(--ddga-radius-full);\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease;\n }\n .ddga-switch:hover:not(:disabled)::before,\n .ddga-switch:active:not(:disabled)::before {\n opacity: 1;\n }\n\n /* Focus ring: 2px ink square (radius-xs) at the 56×32 envelope; replaces the ripple. */\n .ddga-switch::after {\n content: '';\n position: absolute;\n inset: -4px;\n border: 2px solid var(--ddga-switch-ring);\n border-radius: var(--ddga-radius-xs);\n opacity: 0;\n pointer-events: none;\n }\n .ddga-switch:focus-visible {\n outline: none;\n }\n .ddga-switch:focus-visible::before {\n opacity: 0;\n }\n .ddga-switch:focus-visible::after {\n opacity: 1;\n }\n\n /* Thumb: 16px circle, 4px inset, travel 24px. OFF = colored dot; ON = white (+ shadow-sm). */\n .ddga-switch__thumb {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: 4px;\n inline-size: 16px;\n block-size: 16px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-switch-off);\n translate: 0 0;\n transition:\n translate 150ms ease,\n background-color 150ms ease;\n will-change: translate;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n background-color: var(--ddga-color-background);\n box-shadow: var(--ddga-shadow-sm);\n translate: 24px 0;\n }\n [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: -24px 0;\n }\n\n /* Error (off-spec; SDGA signals invalid via the Label slot). Recolours every part to error. */\n .ddga-switch--error {\n --ddga-switch-off: var(--ddga-color-error);\n --ddga-switch-on: var(--ddga-color-error);\n --ddga-switch-ring: var(--ddga-color-error);\n }\n\n /* Disabled: gray-400 outline + gray-300 thumb (OFF) / gray-300 track + white thumb, no check (ON).\n SDGA recolours rather than dimming — no opacity. */\n .ddga-switch:disabled {\n cursor: not-allowed;\n }\n .ddga-switch[data-state='unchecked']:disabled {\n box-shadow: inset 0 0 0 1px var(--ddga-gray-400);\n }\n .ddga-switch[data-state='unchecked']:disabled .ddga-switch__thumb {\n background-color: var(--ddga-gray-300);\n }\n .ddga-switch[data-state='checked']:disabled {\n background-color: var(--ddga-gray-300);\n }\n .ddga-switch[data-state='checked']:disabled .ddga-switch__thumb {\n box-shadow: none;\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 .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 /* Dark mode: flip the OFF outline/dot + ripple + focus ring to light (exact DGA dark deferred). */\n [data-theme='dark'] .ddga-switch {\n --ddga-switch-off: var(--ddga-gray-300);\n --ddga-switch-ring: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-switch:hover:not(:disabled) {\n --ddga-switch-off: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-switch::before {\n border-color: var(--ddga-gray-700);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-switch,\n .ddga-switch::before,\n .ddga-switch__thumb {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-switch[data-state='unchecked'] {\n box-shadow: inset 0 0 0 1px CanvasText;\n }\n .ddga-switch[data-state='checked'] {\n background-color: Highlight;\n }\n .ddga-switch__thumb {\n background-color: CanvasText;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n background-color: HighlightText;\n }\n .ddga-switch:focus-visible::after {\n border-color: Highlight;\n }\n .ddga-switch:disabled[data-state='unchecked'] {\n box-shadow: inset 0 0 0 1px GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Linear (Radix Progress) ─── */\n\n .ddga-progress {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n }\n\n .ddga-progress--primary {\n --ddga-progress-fill: var(--ddga-color-primary);\n }\n .ddga-progress--neutral {\n --ddga-progress-fill: var(--ddga-gray-700);\n }\n .ddga-progress--success {\n --ddga-progress-fill: var(--ddga-color-success);\n }\n .ddga-progress--error {\n --ddga-progress-fill: var(--ddga-color-destructive);\n }\n\n .ddga-progress__label {\n display: inline-flex;\n gap: var(--ddga-space-1);\n align-items: flex-end;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n }\n .ddga-progress--sm .ddga-progress__label {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-progress__required {\n color: var(--ddga-error-700);\n }\n\n .ddga-progress__track {\n position: relative;\n overflow: clip;\n inline-size: 100%;\n background-color: var(--ddga-gray-100);\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-progress--sm .ddga-progress__track {\n block-size: 4px;\n }\n .ddga-progress--md .ddga-progress__track {\n block-size: 8px;\n }\n .ddga-progress--lg .ddga-progress__track {\n block-size: 16px;\n border-radius: var(--ddga-radius-md);\n }\n /* Success/Error darken the track behind the full bar (SDGA gray-300). */\n .ddga-progress--success .ddga-progress__track,\n .ddga-progress--error .ddga-progress__track {\n background-color: var(--ddga-gray-300);\n }\n\n .ddga-progress__indicator {\n block-size: 100%;\n inline-size: 100%;\n background-color: var(--ddga-progress-fill, var(--ddga-color-primary));\n border-radius: inherit;\n transition: inline-size 200ms ease-out;\n }\n .ddga-progress--lg .ddga-progress__indicator {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-inline: var(--ddga-space-2);\n overflow: clip;\n }\n .ddga-progress__value {\n color: #fff;\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n white-space: nowrap;\n }\n\n .ddga-progress__track[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 @keyframes ddga-progress-slide {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(350%);\n }\n }\n [dir='rtl'] .ddga-progress__track[data-state='indeterminate'] .ddga-progress__indicator {\n animation-name: ddga-progress-slide-rtl;\n }\n @keyframes ddga-progress-slide-rtl {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(-350%);\n }\n }\n\n .ddga-progress__helper {\n display: flex;\n gap: var(--ddga-space-2);\n align-items: center;\n }\n .ddga-progress__helper-icon {\n display: inline-flex;\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n font-size: 16px;\n color: var(--ddga-gray-700);\n }\n .ddga-progress__helper-icon > svg {\n display: block;\n }\n .ddga-progress__helper-text {\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.43;\n }\n .ddga-progress--sm .ddga-progress__helper-text {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-progress--success .ddga-progress__helper-text {\n color: var(--ddga-success-700);\n }\n .ddga-progress--error .ddga-progress__helper-text {\n color: var(--ddga-error-700);\n }\n\n /* ─── Filled ✓/✕ status badge (linear helper + circular centre share the shape) */\n .ddga-progress__badge,\n .ddga-circular-progress__badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--ddga-radius-full);\n color: #fff;\n }\n /* Glyph scales with the badge (no per-size font hacks). */\n .ddga-progress__badge > svg,\n .ddga-circular-progress__badge > svg {\n inline-size: 66%;\n block-size: 66%;\n }\n .ddga-progress__badge {\n inline-size: 16px;\n block-size: 16px;\n }\n /* Circular badge ≈ 25.5% of the ring diameter (measured); % keeps it exact at any size/thickness. */\n .ddga-circular-progress__badge {\n inline-size: 25.5%;\n block-size: 25.5%;\n }\n .ddga-progress__badge--success,\n .ddga-circular-progress__badge--success {\n background-color: var(--ddga-success-700);\n }\n .ddga-progress__badge--error,\n .ddga-circular-progress__badge--error {\n background-color: var(--ddga-error-700);\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 .ddga-circular-progress--primary {\n --ddga-progress-fill: var(--ddga-color-primary);\n }\n .ddga-circular-progress--neutral {\n --ddga-progress-fill: var(--ddga-gray-700);\n }\n .ddga-circular-progress--success {\n --ddga-progress-fill: var(--ddga-color-success);\n }\n .ddga-circular-progress--error {\n --ddga-progress-fill: var(--ddga-color-destructive);\n }\n\n .ddga-circular-progress__svg {\n display: block;\n }\n .ddga-circular-progress__track {\n stroke: var(--ddga-gray-100);\n }\n .ddga-circular-progress__indicator {\n stroke: var(--ddga-progress-fill, var(--ddga-color-primary));\n transition: stroke-dashoffset 200ms ease-out;\n }\n .ddga-circular-progress__segment {\n stroke: var(--ddga-gray-100);\n transition: stroke 200ms ease;\n }\n .ddga-circular-progress__segment--filled {\n stroke: var(--ddga-progress-fill, var(--ddga-color-primary));\n }\n\n /* Only the continuous ring spins when indeterminate (segmented is determinate). */\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 @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 flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n text-align: center;\n color: var(--ddga-gray-700);\n }\n /* Success/Error caption is the state −700 colour (matches the badge), not gray. */\n .ddga-circular-progress--success .ddga-circular-progress__label {\n color: var(--ddga-success-700);\n }\n .ddga-circular-progress--error .ddga-circular-progress__label {\n color: var(--ddga-error-700);\n }\n .ddga-circular-progress__value {\n font-weight: var(--ddga-font-weight-bold);\n line-height: 1.2;\n white-space: nowrap;\n }\n .ddga-circular-progress__text {\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.4;\n }\n\n /* Per-size centre type + badge (SDGA Display/Text ramp). */\n .ddga-circular-progress--sm .ddga-circular-progress__value {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-circular-progress--md .ddga-circular-progress__value {\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-circular-progress--lg .ddga-circular-progress__value {\n font-size: var(--ddga-font-size-2xl);\n }\n /* SDGA Display sm/md (30/36) — no token yet (Foundations gap); raw rem. */\n .ddga-circular-progress--xl .ddga-circular-progress__value {\n font-size: 1.875rem;\n }\n .ddga-circular-progress--2xl .ddga-circular-progress__value {\n font-size: 2.25rem;\n letter-spacing: -0.02em;\n }\n .ddga-circular-progress--sm .ddga-circular-progress__text,\n .ddga-circular-progress--md .ddga-circular-progress__text,\n .ddga-circular-progress--lg .ddga-circular-progress__text {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-circular-progress--xl .ddga-circular-progress__text {\n font-size: var(--ddga-font-size-base);\n }\n .ddga-circular-progress--2xl .ddga-circular-progress__text {\n font-size: var(--ddga-font-size-xl);\n }\n\n /* ─── Dark mode ─── */\n /* The raw gray-100/300 track tints don't remap in dark (only semantic --ddga-color-* do); map the\n track to the semantic border so it doesn't render as a bright band. Body/centre ink (raw gray-700)\n swaps to the dark-aware text token. */\n [data-theme='dark'] .ddga-progress__track {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-progress--success .ddga-progress__track,\n [data-theme='dark'] .ddga-progress--error .ddga-progress__track {\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 [data-theme='dark'] .ddga-progress__helper-icon,\n [data-theme='dark'] .ddga-progress__helper-text,\n [data-theme='dark'] .ddga-circular-progress__label {\n color: var(--ddga-text-secondary);\n }\n /* State captions keep the −700 colour in dark too (match the ✓/✕ badge); the blanket rule above\n would otherwise flatten them to gray. Higher specificity so it wins the tie. */\n [data-theme='dark'] .ddga-progress--success .ddga-progress__helper-text {\n color: var(--ddga-success-700);\n }\n [data-theme='dark'] .ddga-progress--error .ddga-progress__helper-text {\n color: var(--ddga-error-700);\n }\n [data-theme='dark'] .ddga-circular-progress--success .ddga-circular-progress__label {\n color: var(--ddga-success-700);\n }\n [data-theme='dark'] .ddga-circular-progress--error .ddga-circular-progress__label {\n color: var(--ddga-error-700);\n }\n /* Neutral fill is raw gray-700 (no dark remap) → lighten so the arc stays visible on dark. */\n [data-theme='dark'] .ddga-progress--neutral,\n [data-theme='dark'] .ddga-circular-progress--neutral {\n --ddga-progress-fill: var(--ddga-text-secondary);\n }\n\n /* Reduced motion: drop indeterminate animations + transitions. */\n @media (prefers-reduced-motion: reduce) {\n .ddga-progress__track[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 @media (forced-colors: active) {\n .ddga-progress__track {\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 /* SDGA Content Switcher — a segmented control. Items butt together into one\n bar with 0.5px dividers; the container has no surface of its own (outer\n radius comes from the first/last items). Radix sets [data-state='on'] on\n the selected item. */\n\n .ddga-content-switcher {\n display: inline-flex;\n align-items: stretch;\n inline-size: fit-content;\n }\n\n .ddga-content-switcher__item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 76px;\n border: 0 solid var(--ddga-color-input);\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-text-primary);\n font: inherit;\n font-weight: var(--ddga-font-weight-regular);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n /* 0.5px divider between segments (logical → flips RTL) */\n .ddga-content-switcher__item + .ddga-content-switcher__item {\n border-inline-start-width: 0.5px;\n }\n\n /* outer rounding only (radius-md 8) */\n .ddga-content-switcher__item:first-child {\n border-start-start-radius: var(--ddga-radius-md);\n border-end-start-radius: var(--ddga-radius-md);\n }\n .ddga-content-switcher__item:last-child {\n border-start-end-radius: var(--ddga-radius-md);\n border-end-end-radius: var(--ddga-radius-md);\n }\n\n /* selected → black fill, adapting on-foreground text */\n .ddga-content-switcher__item[data-state='on'] {\n background-color: var(--ddga-color-foreground);\n color: var(--ddga-color-background);\n }\n\n /* ─── Sizes (height / inline padding / font: 32·8·16 / 40·12·18 / 48·16·20) ─── */\n\n .ddga-content-switcher--sm .ddga-content-switcher__item {\n block-size: 32px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n line-height: 24px;\n }\n .ddga-content-switcher--md .ddga-content-switcher__item {\n block-size: 40px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-lg);\n line-height: 28px;\n }\n .ddga-content-switcher--lg .ddga-content-switcher__item {\n block-size: 48px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-xl);\n line-height: 30px;\n }\n\n /* ─── On-color (on a dark / brand surface) ─── */\n\n .ddga-content-switcher--on-color .ddga-content-switcher__item {\n border-color: var(--ddga-alpha-white-10);\n background-color: var(--ddga-alpha-white-20);\n color: #fff;\n }\n .ddga-content-switcher--on-color .ddga-content-switcher__item[data-state='on'] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* Disabled — not an SDGA state; a minimal safe affordance (Radix passes\n `disabled` through). */\n .ddga-content-switcher__item:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n /* ─── Focus: 2px #161616 ink ring + 1px inset white (raised over neighbors) ─── */\n\n .ddga-content-switcher__item:focus-visible {\n position: relative;\n z-index: 1;\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n box-shadow: inset 0 0 0 3px var(--ddga-color-background);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-content-switcher__item {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-content-switcher__item[data-state='on'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-content-switcher__item:focus-visible {\n outline-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n .ddga-modal__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 /* SDGA: white card, uniform 24 padding, 8 gap between regions, radius-md,\n navy shadow-3xl, NO border. */\n .ddga-modal {\n position: fixed;\n /* Physical top/left + translate keeps centering direction-agnostic (RTL-safe). */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6);\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-3xl);\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 /* SDGA desktop width 600 / mobile narrows to viewport. */\n .ddga-modal--default {\n max-inline-size: 600px;\n }\n .ddga-modal--full {\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 .ddga-modal__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n /* No featured-icon row to clear the corner close → reserve end space. */\n padding-inline-end: var(--ddga-space-8);\n }\n .ddga-modal__header:has(.ddga-modal__featured-icon) {\n padding-inline-end: 0;\n }\n\n /* SDGA Center Align: centre the icon/title/body/actions; close stays cornered. */\n .ddga-modal--centered .ddga-modal__header {\n align-items: center;\n text-align: center;\n padding-inline-end: 0;\n }\n .ddga-modal--centered .ddga-modal__body {\n text-align: center;\n }\n .ddga-modal--centered .ddga-modal__footer {\n justify-content: center;\n }\n\n .ddga-modal__featured-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 2.5rem;\n block-size: 2.5rem;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-50);\n color: var(--ddga-text-primary);\n }\n .ddga-modal__featured-icon > svg {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n\n /* SDGA Text lg/Semibold 18/28, text-display. */\n .ddga-modal__title {\n margin: 0;\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.75rem;\n color: var(--ddga-gray-800);\n }\n\n /* SDGA Text sm/Regular 14/20, text-primary-paragraph. */\n .ddga-modal__description {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\n }\n\n /* Body region: SDGA supporting copy (pb-16) + the scroll region for long\n content (grows between header and footer, scrolls internally). */\n .ddga-modal__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding-block-end: var(--ddga-space-4);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\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 }\n\n /* SDGA mobile: actions stack full-width, primary on top (DOM-last → reverse). */\n @media (max-width: 480px) {\n .ddga-modal__footer {\n flex-direction: column-reverse;\n align-items: stretch;\n }\n }\n\n /* Corner close (X) — SDGA: 32 box pinned to the title's top-end corner,\n 20px glyph, radius-sm. */\n .ddga-modal__close {\n position: absolute;\n inset-block-start: 0.875rem;\n inset-inline-end: 0.875rem;\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-primary);\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: 1.25rem;\n block-size: 1.25rem;\n }\n .ddga-modal__close:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-modal__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\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 /* Dark: raw ramp colours don't flip on their own — map to flipping semantics. */\n [data-theme='dark'] .ddga-modal__title {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-modal__description,\n [data-theme='dark'] .ddga-modal__body {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark'] .ddga-modal__featured-icon {\n background-color: var(--ddga-alpha-white-10);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-modal,\n .ddga-modal__overlay {\n animation-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-modal {\n border: 1px solid 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 /* Each star stacks an empty base + a clipped filled overlay; the overlay\n inline-size drives full/half/empty. Logical inset keeps half-fill RTL-correct. */\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 .ddga-rating {\n --ddga-rating-color: var(--ddga-gold-600);\n --ddga-rating-empty: var(--ddga-color-border);\n --ddga-rating-disc: 46px;\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 /* SDGA Style=Brand → green fill. */\n .ddga-rating--brand {\n --ddga-rating-color: var(--ddga-color-primary);\n }\n\n /* SDGA box sizes Small 24 / Medium 32 / Large 48 (star = 1em); pressed disc\n 38 / 46 / 54 (its own scale, not box-proportional). */\n .ddga-rating--sm {\n font-size: 1.5rem;\n --ddga-rating-disc: 38px;\n }\n .ddga-rating--md {\n font-size: 2rem;\n --ddga-rating-disc: 46px;\n }\n .ddga-rating--lg {\n font-size: 3rem;\n --ddga-rating-disc: 54px;\n }\n\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 isolation: isolate;\n }\n\n /* SDGA Pressed: a gray-100 disc (38/46/54 per size) behind the glyph while an\n interactive star is active. Centered → physical props (no RTL flip). */\n .ddga-rating__star::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n inline-size: var(--ddga-rating-disc);\n block-size: var(--ddga-rating-disc);\n transform: translate(-50%, -50%);\n border-radius: var(--ddga-radius-full);\n background: var(--ddga-color-muted);\n opacity: 0;\n z-index: -1;\n }\n .ddga-rating[role='slider']:not([data-disabled]) .ddga-rating__star:active::before {\n opacity: 1;\n }\n\n /* Empty (base) layer; color set here so any currentColor icon inherits it. */\n .ddga-rating__star-bg {\n display: block;\n line-height: 0;\n color: var(--ddga-rating-empty);\n }\n\n /* Clipped overlay pinned to the logical start (flips 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 line-height: 0;\n }\n\n /* Any glyph (default star or a custom `icon`) scales to the box + keeps its\n intrinsic width so the clip reveals the leading half. */\n .ddga-rating__star :where(svg) {\n display: block;\n inline-size: 1em;\n block-size: 1em;\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 /* 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 /* 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 /* Semantic <table> compound (SDGA Platforms Code). Row dividers are the base\n look — a gray-300 hairline between body rows, always on. Header columns carry\n vertical gray-300 dividers; body columns do not. There is NO full-grid variant.\n `contained` adds only an outer gray-300 frame + radius-sm on the scroll region.\n Density/zebra cascade from the root via descendant selectors; logical properties\n throughout, with [dir='rtl'] overrides only for the physical box-shadow insets. */\n\n /* ─── Scroll region ─── */\n\n .ddga-table__region {\n inline-size: 100%;\n /* Horizontal scroll for wide tables. Vertical stays clipped (the region grows\n to content height, so nothing is cut) until `maxHeight` caps it — at which\n point the component sets `overflow-y: auto` inline so the body scrolls and\n `stickyHeader` engages. */\n overflow-x: auto;\n overflow-y: hidden;\n }\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n /* `contained` = outer frame only (no full grid); radius-sm clips its corners.\n Non-contained (default) stays sharp-cornered per spec (radius 0). */\n .ddga-table__region:has(> .ddga-table--contained) {\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Table base ─── */\n\n .ddga-table {\n --ddga-table-pad-block: var(--ddga-space-2);\n --ddga-table-pad-inline: var(--ddga-space-4);\n --ddga-table-row-h: 4rem;\n\n inline-size: 100%;\n border-collapse: collapse;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n background-color: var(--ddga-color-card);\n text-align: start;\n }\n\n /* ─── Density (row height) ─── */\n\n .ddga-table--sm {\n --ddga-table-row-h: 3rem;\n }\n .ddga-table--md {\n --ddga-table-row-h: 4rem;\n }\n .ddga-table--lg {\n --ddga-table-row-h: 4.5rem;\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 .ddga-table__cell {\n block-size: var(--ddga-table-row-h);\n }\n .ddga-table__head {\n block-size: 3rem;\n background-color: var(--ddga-color-muted);\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n white-space: nowrap;\n border-block-end: 1px solid var(--ddga-color-input);\n }\n /* Header columns carry vertical dividers; body columns do not. */\n .ddga-table__header .ddga-table__head:not(:last-child) {\n border-inline-end: 1px solid var(--ddga-color-input);\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 /* Row dividers are the SDGA base look — always on, not opt-in. */\n .ddga-table__body .ddga-table__row:not(:last-child) {\n border-block-end: 1px solid var(--ddga-color-input);\n }\n .ddga-table--striped\n .ddga-table__body\n .ddga-table__row:nth-child(even):not(:hover):not([data-state='selected']) {\n background-color: var(--ddga-gray-50);\n }\n .ddga-table__body .ddga-table__row:hover:not([data-state='selected']) {\n background-color: var(--ddga-color-muted);\n }\n .ddga-table__body .ddga-table__row[data-state='selected'] {\n background-color: var(--ddga-sa-50);\n /* Inline-start accent stripe. box-shadow insets are physical (no logical form\n exists), so flip the x-offset in RTL — the project's prescribed override. */\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-input);\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 header fill so body rows don't bleed through while scrolling. */\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Sort & filter header controls ─── */\n\n .ddga-table__sort-button,\n .ddga-table__filter-button {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\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__filter-button {\n justify-content: center;\n }\n /* Focus lands on the icon-box, not the button. */\n .ddga-table__sort-button:focus-visible,\n .ddga-table__filter-button:focus-visible {\n outline: none;\n }\n .ddga-table__sort-button:disabled,\n .ddga-table__filter-button:disabled {\n cursor: not-allowed;\n }\n\n /* SDGA icon-box: 20px radius-sm; gray-100 + ink when off, gray-950 + white when active. */\n .ddga-table__icon-box {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n border-radius: var(--ddga-radius-sm);\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-table__icon-box > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-table__icon-box[data-active='false'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-table__icon-box[data-active='true'] {\n background-color: var(--ddga-gray-950);\n color: #fff;\n }\n .ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active='false'],\n .ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active='false'] {\n background-color: var(--ddga-gray-200);\n }\n .ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active='true'],\n .ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active='true'] {\n background-color: var(--ddga-gray-800);\n }\n .ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active='false'],\n .ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active='false'] {\n background-color: var(--ddga-gray-200);\n }\n .ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active='true'],\n .ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active='true'] {\n background-color: var(--ddga-gray-600);\n }\n .ddga-table__sort-button:focus-visible .ddga-table__icon-box,\n .ddga-table__filter-button:focus-visible .ddga-table__icon-box {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 0;\n }\n .ddga-table__sort-button:focus-visible .ddga-table__icon-box[data-active='true'],\n .ddga-table__filter-button:focus-visible .ddga-table__icon-box[data-active='true'] {\n box-shadow: inset 0 0 0 1px #fff;\n }\n .ddga-table__sort-button:disabled .ddga-table__icon-box,\n .ddga-table__filter-button:disabled .ddga-table__icon-box {\n color: var(--ddga-gray-400);\n background-color: transparent;\n }\n\n /* ─── Dark mode ─── */\n\n [data-theme='dark'] .ddga-table__head {\n color: var(--ddga-text-secondary);\n }\n /* gray-50 zebra is invisible on dark; use the adaptive muted token instead. */\n [data-theme='dark']\n .ddga-table--striped\n .ddga-table__body\n .ddga-table__row:nth-child(even):not(:hover):not([data-state='selected']) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-table__head {\n border-block-end-color: CanvasText;\n }\n .ddga-table__body .ddga-table__row:not(:last-child),\n .ddga-table__header .ddga-table__head:not(:last-child),\n .ddga-table__footer {\n border-color: CanvasText;\n }\n .ddga-table__region:has(> .ddga-table--contained) {\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__icon-box {\n border: 1px solid CanvasText;\n }\n .ddga-table__sort-button:focus-visible .ddga-table__icon-box,\n .ddga-table__filter-button:focus-visible .ddga-table__icon-box,\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n}\n","@layer ddga-components {\n .ddga-card {\n --ddga-card-padding: var(--ddga-space-4);\n --ddga-card-gap: var(--ddga-space-6);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-card-gap);\n padding: var(--ddga-card-padding);\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border-radius: var(--ddga-radius-xl);\n transition:\n background-color 150ms ease,\n box-shadow 150ms ease,\n border-color 150ms ease;\n }\n\n .ddga-card--vertical {\n flex-direction: column;\n }\n .ddga-card--horizontal {\n flex-direction: row;\n }\n\n /* SDGA Effect=Stroke — 1px gray-300. */\n .ddga-card--default {\n border: 1px solid var(--ddga-color-input);\n }\n .ddga-card--outline {\n background-color: transparent;\n border: 1px solid var(--ddga-color-input);\n }\n /* SDGA Effect=With Shadow — navy two-layer md (ours is single-layer black; Foundations). */\n .ddga-card--elevated {\n border: 1px solid transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-card--filled {\n background-color: var(--ddga-color-muted);\n border: 1px solid transparent;\n }\n\n /* SA Green gradient hero (off-spec) — dga-preferences §5.4 (SA 600 → 500 @ 90°). */\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 opacity: 0.85;\n }\n\n .ddga-card--ghost {\n background-color: transparent;\n border: 1px solid transparent;\n }\n\n .ddga-card--plain {\n border: 1px solid transparent;\n }\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-4);\n }\n .ddga-card--padding-lg {\n --ddga-card-padding: var(--ddga-space-6);\n }\n\n .ddga-card--interactive {\n cursor: pointer;\n }\n .ddga-card--interactive:hover,\n .ddga-card--interactive.ddga-card--hovered {\n background-color: var(--ddga-gray-50);\n }\n .ddga-card--interactive.ddga-card--gradient:hover {\n box-shadow: var(--ddga-shadow-lg);\n }\n .ddga-card--interactive:focus-visible,\n .ddga-card--interactive.ddga-card--focused {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n .ddga-card--disabled {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n box-shadow: none;\n }\n .ddga-card--disabled.ddga-card--default,\n .ddga-card--disabled.ddga-card--outline {\n border-color: var(--ddga-gray-400);\n }\n .ddga-card--disabled .ddga-card__title,\n .ddga-card--disabled .ddga-card__description,\n .ddga-card--disabled .ddga-card__content,\n .ddga-card--disabled .ddga-card__icon {\n color: var(--ddga-gray-400);\n }\n .ddga-card--disabled .ddga-card__icon--featured {\n background-color: var(--ddga-gray-100);\n }\n\n .ddga-card--selectable {\n position: relative;\n cursor: pointer;\n }\n .ddga-card--selectable:not(.ddga-card--disabled):hover,\n .ddga-card--selectable.ddga-card--hovered {\n background-color: var(--ddga-gray-50);\n }\n .ddga-card--selectable.ddga-card--disabled {\n cursor: not-allowed;\n }\n .ddga-card--selectable:focus-visible,\n .ddga-card--selectable.ddga-card--focused {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* Checkbox indicator, top inline-end (flips in RTL). */\n .ddga-card__select-indicator {\n position: absolute;\n inset-block-start: var(--ddga-space-4);\n inset-inline-end: var(--ddga-space-4);\n z-index: 1;\n }\n .ddga-card__checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 20px;\n block-size: 20px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-xs);\n background-color: var(--ddga-color-background);\n }\n .ddga-card__checkbox[data-state='checked'] {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n .ddga-card__checkbox-check {\n inline-size: 0.875rem;\n block-size: 0.875rem;\n color: #ffffff;\n }\n .ddga-card--disabled .ddga-card__checkbox {\n border-color: var(--ddga-gray-400);\n }\n .ddga-card--disabled .ddga-card__checkbox[data-state='checked'] {\n background-color: var(--ddga-gray-200);\n border-color: var(--ddga-gray-400);\n }\n\n /* Expandable — chevron icon-button, bottom inline-end, 24px glyph. */\n .ddga-card__expand-row {\n display: flex;\n justify-content: flex-end;\n margin-block-start: auto;\n }\n .ddga-card__chevron {\n inline-size: 1.5rem;\n block-size: 1.5rem;\n transition: transform 150ms ease;\n }\n .ddga-card__chevron--up {\n transform: rotate(180deg);\n }\n @media (prefers-reduced-motion: reduce) {\n .ddga-card__chevron {\n transition: none;\n }\n }\n\n /* Image — inset slot, radius-md (SDGA: rounded image inside the padding). */\n .ddga-card__image {\n display: block;\n inline-size: 100%;\n block-size: auto;\n object-fit: cover;\n border-radius: var(--ddga-radius-md);\n aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n }\n /* Horizontal (off-spec) — image hugs the start edge, full content height. */\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 .ddga-card--horizontal > :not(.ddga-card__image) {\n flex: 1 1 auto;\n }\n\n /* Sections — no padding (the card pads + gaps them). */\n .ddga-card__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n }\n\n .ddga-card__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: start;\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 /* Featured icon — 48px SA-50 circle, success-700 glyph; +16px so icon→title = 24. */\n .ddga-card__icon--featured {\n inline-size: 48px;\n block-size: 48px;\n margin-block-end: var(--ddga-space-4);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-50);\n color: var(--ddga-success-700);\n }\n .ddga-card__icon--featured > svg {\n inline-size: 1.5rem;\n block-size: 1.5rem;\n }\n\n .ddga-card__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-bold);\n line-height: 1.75rem;\n margin: 0;\n color: var(--ddga-gray-800);\n }\n\n .ddga-card__description {\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5rem;\n margin: 0;\n color: var(--ddga-gray-800);\n }\n\n .ddga-card__footer {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-4);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-card {\n transition: none;\n }\n }\n\n /* Forced colors (Windows High Contrast) — keep a boundary + real focus outline. */\n @media (forced-colors: active) {\n .ddga-card {\n border: 1px solid CanvasText;\n }\n .ddga-card--interactive:focus-visible,\n .ddga-card--selectable:focus-visible {\n outline: 2px solid CanvasText;\n outline-offset: 2px;\n }\n }\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 [data-theme='dark'] .ddga-card__title,\n [data-theme='dark'] .ddga-card__description {\n color: var(--ddga-color-card-foreground);\n }\n [data-theme='dark'] .ddga-card__icon--featured {\n background-color: color-mix(in srgb, var(--ddga-color-primary) 22%, var(--ddga-color-card));\n color: var(--ddga-color-success);\n }\n [data-theme='dark'] .ddga-card--interactive:hover,\n [data-theme='dark'] .ddga-card--interactive.ddga-card--hovered,\n [data-theme='dark'] .ddga-card--selectable:not(.ddga-card--disabled):hover,\n [data-theme='dark'] .ddga-card--selectable.ddga-card--hovered {\n background-color: color-mix(in srgb, var(--ddga-color-card) 90%, white);\n }\n [data-theme='dark'] .ddga-card--disabled {\n background-color: color-mix(in srgb, var(--ddga-color-card) 70%, var(--ddga-color-background));\n color: var(--ddga-color-muted-foreground);\n }\n [data-theme='dark'] .ddga-card--disabled.ddga-card--default,\n [data-theme='dark'] .ddga-card--disabled.ddga-card--outline {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-card--disabled .ddga-card__title,\n [data-theme='dark'] .ddga-card--disabled .ddga-card__description,\n [data-theme='dark'] .ddga-card--disabled .ddga-card__content,\n [data-theme='dark'] .ddga-card--disabled .ddga-card__icon {\n color: var(--ddga-color-muted-foreground);\n }\n [data-theme='dark'] .ddga-card--disabled .ddga-card__icon--featured {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-muted-foreground);\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-2);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl);\n font-family: inherit;\n z-index: 50;\n outline: none;\n overflow: clip;\n }\n\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 @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 /* ─── Item (CheckboxItem/RadioItem/SubTrigger share the base) — 40px row ─── */\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: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-primary);\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* SDGA Hovered — mouse over the row. */\n .ddga-dropdown-menu__item:hover {\n background-color: var(--ddga-gray-100);\n }\n /* SDGA Focused — ink ring, transparent row. Radix flags the active item\n `data-highlighted` for BOTH pointer and keyboard (and `:focus-visible`\n fires on hover here too), so focus can't be keyed off directly. Split on\n `:hover`: highlighted but NOT hovered (and not an open submenu) ⇒ keyboard. */\n .ddga-dropdown-menu__item[data-highlighted]:not(:hover):not([data-state='open']) {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n }\n /* SDGA Pressed. */\n .ddga-dropdown-menu__item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-dropdown-menu__item[data-disabled] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n /* SDGA Selected = SA-50 row + green label / icons / trailing check. */\n .ddga-dropdown-menu__item[data-state='checked'] {\n background-color: var(--ddga-sa-50);\n color: var(--ddga-color-primary);\n }\n\n .ddga-dropdown-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-dropdown-menu__item[data-destructive]:hover,\n .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* ─── Row pieces ─── */\n\n .ddga-dropdown-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\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: 24px;\n block-size: 24px;\n flex-shrink: 0;\n color: inherit;\n }\n .ddga-dropdown-menu__icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n\n /* SDGA \"trail\": counter / icon / Tag / Switch / Button. Pushed to the row end. */\n .ddga-dropdown-menu__trailing {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n min-block-size: 24px;\n color: inherit;\n }\n\n /* ─── Checkbox / Radio = trailing tick-02 check (green when Selected) ─── */\n\n .ddga-dropdown-menu__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n inline-size: 24px;\n block-size: 24px;\n color: inherit;\n }\n .ddga-dropdown-menu__indicator-icon {\n inline-size: 24px;\n block-size: 24px;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-dropdown-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 24px;\n block-size: 24px;\n flex-shrink: 0;\n color: inherit;\n }\n [dir='rtl'] .ddga-dropdown-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Group label (SDGA: Text xs Bold, gray-800, no transform) + Separator ─── */\n\n .ddga-dropdown-menu__group-label {\n padding-block: var(--ddga-space-2) var(--ddga-space-3);\n padding-inline: var(--ddga-space-2) var(--ddga-space-4);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-bold);\n color: var(--ddga-gray-800);\n }\n\n .ddga-dropdown-menu__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-2);\n margin-inline: calc(var(--ddga-space-2) * -1);\n background-color: var(--ddga-color-input);\n }\n\n /* ─── Dark mode (SDGA light values are fixed ramp steps → remap to flipping tokens) ─── */\n\n [data-theme='dark'] .ddga-dropdown-menu__item:hover,\n [data-theme='dark'] .ddga-dropdown-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-menu__item:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-menu__item[data-state='checked'] {\n background-color: rgb(27 131 84 / 0.18);\n color: var(--ddga-sa-400);\n }\n [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive][data-highlighted],\n [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive]:hover {\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:hover,\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-menu__item:focus-visible {\n outline-color: Highlight;\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 /* ─── Overlay ─── */\n\n .ddga-drawer__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Same z-stack as Modal (60 overlay / 61 panel). Toast sits at 70 so it\n can announce above either. */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-drawer__overlay[data-state='open'] {\n animation-name: ddga-drawer-overlay-in;\n }\n .ddga-drawer__overlay[data-state='closed'] {\n animation-name: ddga-drawer-overlay-out;\n }\n\n @keyframes ddga-drawer-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-drawer-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─── Panel base ─── */\n\n .ddga-drawer {\n position: fixed;\n z-index: 61;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border: 1px solid var(--ddga-color-border);\n box-shadow: var(--ddga-shadow-lg);\n overflow: hidden;\n /* Animation duration applied to the panel; the per-side keyframes flip\n direction so the slide always emerges from the correct edge. */\n animation-duration: 220ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n /* ─── Side placements (logical — start/end flip in RTL) ─── */\n\n .ddga-drawer--start {\n inset-block: 0;\n inset-inline-start: 0;\n border-inline-end: 1px solid var(--ddga-color-border);\n border-inline-start: 0;\n }\n .ddga-drawer--end {\n inset-block: 0;\n inset-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-border);\n border-inline-end: 0;\n }\n .ddga-drawer--top {\n inset-inline: 0;\n inset-block-start: 0;\n border-block-end: 1px solid var(--ddga-color-border);\n border-block-start: 0;\n }\n .ddga-drawer--bottom {\n inset-inline: 0;\n inset-block-end: 0;\n border-block-start: 1px solid var(--ddga-color-border);\n border-block-end: 0;\n }\n\n /* ─── Sizes ─── */\n\n /* For start/end (vertical panel), `size` controls inline-size; for top/bottom\n (horizontal panel) it controls block-size. The cascade just stacks both\n declarations and the relevant axis wins per side. */\n .ddga-drawer--sm.ddga-drawer--start,\n .ddga-drawer--sm.ddga-drawer--end {\n inline-size: min(320px, 100vw);\n }\n .ddga-drawer--md.ddga-drawer--start,\n .ddga-drawer--md.ddga-drawer--end {\n inline-size: min(420px, 100vw);\n }\n .ddga-drawer--lg.ddga-drawer--start,\n .ddga-drawer--lg.ddga-drawer--end {\n inline-size: min(560px, 100vw);\n }\n .ddga-drawer--full.ddga-drawer--start,\n .ddga-drawer--full.ddga-drawer--end {\n inline-size: 100vw;\n }\n\n .ddga-drawer--sm.ddga-drawer--top,\n .ddga-drawer--sm.ddga-drawer--bottom {\n block-size: min(240px, 100vh);\n }\n .ddga-drawer--md.ddga-drawer--top,\n .ddga-drawer--md.ddga-drawer--bottom {\n block-size: min(360px, 100vh);\n }\n .ddga-drawer--lg.ddga-drawer--top,\n .ddga-drawer--lg.ddga-drawer--bottom {\n block-size: min(520px, 100vh);\n }\n .ddga-drawer--full.ddga-drawer--top,\n .ddga-drawer--full.ddga-drawer--bottom {\n block-size: 100vh;\n }\n\n /* ─── Enter/exit per side (logical axes so RTL flips automatically) ─── */\n\n .ddga-drawer--start[data-state='open'] {\n animation-name: ddga-drawer-slide-in-start;\n }\n .ddga-drawer--start[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-start;\n }\n .ddga-drawer--end[data-state='open'] {\n animation-name: ddga-drawer-slide-in-end;\n }\n .ddga-drawer--end[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-end;\n }\n .ddga-drawer--top[data-state='open'] {\n animation-name: ddga-drawer-slide-in-top;\n }\n .ddga-drawer--top[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-top;\n }\n .ddga-drawer--bottom[data-state='open'] {\n animation-name: ddga-drawer-slide-in-bottom;\n }\n .ddga-drawer--bottom[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-bottom;\n }\n\n /* Logical-direction slides: `translate` uses physical axes, so for\n start/end we branch on `[dir]` to keep the slide direction correct in\n both LTR and RTL. */\n @keyframes ddga-drawer-slide-in-start {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-drawer-slide-out-start {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n @keyframes ddga-drawer-slide-in-end {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-drawer-slide-out-end {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n }\n @keyframes ddga-drawer-slide-in-top {\n from {\n transform: translateY(-100%);\n }\n to {\n transform: translateY(0);\n }\n }\n @keyframes ddga-drawer-slide-out-top {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(-100%);\n }\n }\n @keyframes ddga-drawer-slide-in-bottom {\n from {\n transform: translateY(100%);\n }\n to {\n transform: translateY(0);\n }\n }\n @keyframes ddga-drawer-slide-out-bottom {\n from {\n transform: translateY(0);\n }\n to {\n transform: translateY(100%);\n }\n }\n\n /* RTL: flip the horizontal slides so \"start\" (right edge in RTL) and \"end\"\n (left edge in RTL) animate from the correct side. */\n [dir='rtl'] .ddga-drawer--start[data-state='open'] {\n animation-name: ddga-drawer-slide-in-end;\n }\n [dir='rtl'] .ddga-drawer--start[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-end;\n }\n [dir='rtl'] .ddga-drawer--end[data-state='open'] {\n animation-name: ddga-drawer-slide-in-start;\n }\n [dir='rtl'] .ddga-drawer--end[data-state='closed'] {\n animation-name: ddga-drawer-slide-out-start;\n }\n\n /* ─── Header / Body / Footer ─── */\n\n .ddga-drawer__header {\n flex-shrink: 0;\n padding: var(--ddga-space-4);\n border-block-end: 1px solid var(--ddga-color-border);\n }\n\n .ddga-drawer__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-4);\n }\n\n .ddga-drawer__footer {\n flex-shrink: 0;\n display: flex;\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n justify-content: flex-end;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-border);\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-drawer__title {\n margin: 0;\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.3;\n color: var(--ddga-color-foreground);\n }\n\n .ddga-drawer__description {\n margin: var(--ddga-space-1) 0 0;\n font-size: var(--ddga-font-size-sm);\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Corner close button ─── */\n\n .ddga-drawer__close {\n position: absolute;\n inset-block-start: var(--ddga-space-3);\n inset-inline-end: var(--ddga-space-3);\n inline-size: 1.75rem;\n block-size: 1.75rem;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-md);\n background-color: transparent;\n color: var(--ddga-text-secondary);\n cursor: pointer;\n font: inherit;\n }\n .ddga-drawer__close:hover {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-foreground);\n }\n .ddga-drawer__close:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n .ddga-drawer__close > svg {\n inline-size: 1.125em;\n block-size: 1.125em;\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-drawer,\n .ddga-drawer__overlay {\n animation: none;\n }\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-drawer {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-notification-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() caps at the SDGA desktop width (484) and fills narrow screens minus\n side breathing room — single rule, no vw media query. */\n inline-size: min(484px, calc(100% - 2rem));\n pointer-events: none;\n list-style: none;\n margin: 0;\n }\n .ddga-notification-toast-viewport > * {\n pointer-events: auto;\n }\n\n .ddga-notification-toast-viewport--containerized {\n position: absolute;\n }\n\n /* ─── Position anchors ─── */\n\n .ddga-notification-toast-viewport--top-start {\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n .ddga-notification-toast-viewport--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n .ddga-notification-toast-viewport--top-end {\n inset-block-start: 0;\n inset-inline-end: 0;\n }\n .ddga-notification-toast-viewport--bottom-start {\n inset-block-end: 0;\n inset-inline-start: 0;\n flex-direction: column-reverse;\n }\n .ddga-notification-toast-viewport--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n flex-direction: column-reverse;\n }\n .ddga-notification-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-notification-toast {\n --ddga-notification-toast-stripe: var(--ddga-gray-200);\n --ddga-notification-toast-icon-bg: var(--ddga-gray-50);\n --ddga-notification-toast-icon-fg: var(--ddga-text-primary);\n\n position: relative;\n inline-size: 100%;\n min-inline-size: 0;\n pointer-events: auto;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-6);\n background-color: #fff;\n border-radius: var(--ddga-radius-md);\n /* Toast shell: no border (InlineAlert has one), navy drop shadow instead. */\n box-shadow: var(--ddga-shadow-3xl);\n overflow: hidden;\n container-type: inline-size;\n font-family: inherit;\n }\n\n .ddga-notification-toast--default {\n --ddga-notification-toast-stripe: var(--ddga-gray-200);\n --ddga-notification-toast-icon-bg: var(--ddga-gray-50);\n --ddga-notification-toast-icon-fg: var(--ddga-text-primary);\n }\n .ddga-notification-toast--info {\n --ddga-notification-toast-stripe: var(--ddga-info-600);\n --ddga-notification-toast-icon-bg: var(--ddga-info-50);\n --ddga-notification-toast-icon-fg: var(--ddga-info-700);\n }\n .ddga-notification-toast--success {\n --ddga-notification-toast-stripe: var(--ddga-success-600);\n --ddga-notification-toast-icon-bg: var(--ddga-success-50);\n --ddga-notification-toast-icon-fg: var(--ddga-success-700);\n }\n .ddga-notification-toast--warning {\n --ddga-notification-toast-stripe: var(--ddga-warning-600);\n --ddga-notification-toast-icon-bg: var(--ddga-warning-50);\n --ddga-notification-toast-icon-fg: var(--ddga-warning-700);\n }\n .ddga-notification-toast--destructive {\n --ddga-notification-toast-stripe: var(--ddga-error-600);\n --ddga-notification-toast-icon-bg: var(--ddga-error-50);\n --ddga-notification-toast-icon-fg: var(--ddga-error-700);\n }\n\n /* ─── Accent stripe (leading edge → top edge on mobile) ─── */\n\n .ddga-notification-toast__stripe {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 8px;\n background-color: var(--ddga-notification-toast-stripe);\n opacity: 0.7;\n }\n\n /* ─── Header (featured icon · text · close) ─── */\n\n .ddga-notification-toast__header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'icon text close';\n align-items: start;\n column-gap: var(--ddga-space-3);\n inline-size: 100%;\n }\n\n .ddga-notification-toast__icon {\n grid-area: icon;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-notification-toast-icon-bg);\n color: var(--ddga-notification-toast-icon-fg);\n }\n .ddga-notification-toast__icon > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n .ddga-notification-toast__text {\n grid-area: text;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--ddga-space-2);\n min-block-size: 40px;\n min-inline-size: 0;\n word-break: break-word;\n }\n\n .ddga-notification-toast__title {\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-800);\n }\n .ddga-notification-toast__description {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\n }\n\n /* ─── Close button ─── */\n\n .ddga-notification-toast__close {\n grid-area: close;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-notification-toast__close > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-notification-toast__close:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification-toast__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* ─── Actions row (md ghost text buttons, indented under the text) ─── */\n\n .ddga-notification-toast__actions {\n display: flex;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-10);\n }\n\n .ddga-notification-toast__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n border: 0;\n background: transparent;\n border-radius: var(--ddga-radius-sm);\n font-family: inherit;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n white-space: nowrap;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-notification-toast__action:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification-toast__action:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* ─── Mobile restack (narrow toast) ─── */\n\n @container (max-width: 400px) {\n .ddga-notification-toast {\n padding-inline: var(--ddga-space-4);\n }\n .ddga-notification-toast__stripe {\n inset-block: 0 auto;\n inset-inline: 0;\n inline-size: auto;\n block-size: 8px;\n }\n .ddga-notification-toast__header {\n grid-template-areas:\n 'icon . close'\n 'text text text';\n row-gap: var(--ddga-space-4);\n }\n .ddga-notification-toast__text {\n min-block-size: 0;\n gap: var(--ddga-space-1);\n }\n .ddga-notification-toast__actions {\n flex-direction: column;\n align-items: stretch;\n padding-inline: 0;\n }\n\n .ddga-notification-toast__action {\n inline-size: 100%;\n }\n /* Only the primary (first) action fills; a secondary action stays ghost (SDGA). */\n .ddga-notification-toast__action:first-child {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification-toast__action:first-child:hover {\n background-color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-notification-toast__action:first-child {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-notification-toast__action:first-child:hover {\n background-color: var(--ddga-gray-700);\n }\n }\n\n /* ─── Animations (Radix data-state + swipe) ─── */\n .ddga-notification-toast[data-state='open'] {\n animation: ddga-notification-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-notification-toast[data-state='closed'] {\n animation: ddga-notification-toast-out 180ms ease forwards;\n }\n .ddga-notification-toast-viewport[data-position^='bottom-']\n .ddga-notification-toast[data-state='open'] {\n animation-name: ddga-notification-toast-slide-up;\n }\n .ddga-notification-toast-viewport[data-position^='top-']\n .ddga-notification-toast[data-state='open'] {\n animation-name: ddga-notification-toast-slide-down;\n }\n\n .ddga-notification-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-notification-toast[data-swipe='cancel'] {\n transform: translate3d(0, 0, 0);\n transition: transform 200ms ease-out;\n }\n .ddga-notification-toast[data-swipe='end'] {\n animation: ddga-notification-toast-out 180ms ease forwards;\n }\n\n @keyframes ddga-notification-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-notification-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-notification-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-notification-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-notification-toast,\n .ddga-notification-toast[data-state='open'],\n .ddga-notification-toast[data-state='closed'] {\n animation-duration: 1ms;\n }\n }\n\n /* ─── Dark ─── */\n\n [data-theme='dark'] .ddga-notification-toast {\n background-color: var(--ddga-gray-900, #111927);\n }\n [data-theme='dark'] .ddga-notification-toast__title {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-notification-toast__description {\n color: var(--ddga-gray-300);\n }\n [data-theme='dark'] .ddga-notification-toast__close,\n [data-theme='dark'] .ddga-notification-toast__action {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-notification-toast__close:hover,\n [data-theme='dark'] .ddga-notification-toast__action:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-notification-toast__close:focus-visible,\n [data-theme='dark'] .ddga-notification-toast__action:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-gray-50);\n }\n\n /* ─── Forced colors (no border + shadow vanish → add a visible edge) ─── */\n\n @media (forced-colors: active) {\n .ddga-notification-toast {\n border: 1px solid CanvasText;\n }\n .ddga-notification-toast__close:focus-visible,\n .ddga-notification-toast__action:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* Standalone two-state Toggle button. (The SDGA segmented control lives in\n content-switcher.css.) Pressed state comes from Radix's [data-state='on']. */\n\n .ddga-toggle {\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 block-size: 32px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-toggle--md {\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 block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n .ddga-toggle:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-toggle[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 background-color: var(--ddga-color-primary-hover);\n }\n\n .ddga-toggle--outline {\n border-color: var(--ddga-color-input);\n }\n\n .ddga-toggle:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n .ddga-toggle:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-toggle {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-toggle[data-state='on'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-toggle:focus-visible {\n outline: 2px solid Highlight;\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 /* DateRangePicker field/trigger chrome + range-fill cell styling. The trigger\n mirrors the SDGA Text Input field model (see text-input.css) — no calendar\n icon. The calendar dropdown (popover, toggle, month grid, day cells) is\n shared with DatePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. */\n\n /* SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. */\n .ddga-field[data-slot='date-range-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-range-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-range-picker__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the SDGA date field, holding two inputs + a separator) ─── */\n\n .ddga-date-range-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-date-range-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-range-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-range-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-range-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── DateInputs + segments + separator ─── */\n\n .ddga-date-range-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\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-gray-700);\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-gray-500);\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-gray-700);\n }\n .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n .ddga-date-range-picker__separator {\n flex: 0 0 auto;\n padding-inline: var(--ddga-space-1);\n color: var(--ddga-gray-500);\n }\n\n /* ─── Open surface (iconless): fills trailing space; click opens the calendar ─── */\n\n .ddga-date-range-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__open {\n cursor: not-allowed;\n }\n\n /* ─── Hover / Focus / Pressed (SDGA field state model) ─── */\n\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-date-range-picker-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-date-range-picker-trigger[data-focus-within]:not([data-pressed])::after {\n transform: scaleX(1);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-range-picker-trigger--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error / Read-only / Disabled ─── */\n\n .ddga-date-range-picker-trigger--error,\n .ddga-date-range-picker-trigger--error[data-hovered],\n .ddga-date-range-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n .ddga-date-range-picker-trigger[data-readonly],\n .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-range-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment,\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment[data-placeholder],\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__separator {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__label,\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled])\n .ddga-date-range-picker__required {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\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. SDGA range =\n a continuous SA-100 band on the td (spans the full column), pill-rounded at\n the endpoints, with the SA-600 endpoint circles painted on top by the base\n .ddga-calendar__cell[data-selected] rule. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: var(--ddga-sa-100);\n }\n .ddga-calendar--range td:has([data-selection-start]) {\n border-start-start-radius: var(--ddga-radius-full);\n border-end-start-radius: var(--ddga-radius-full);\n }\n .ddga-calendar--range td:has([data-selection-end]) {\n border-start-end-radius: var(--ddga-radius-full);\n border-end-end-radius: var(--ddga-radius-full);\n }\n /* In-between days: let the td band 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\n /* ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── */\n\n [data-theme='dark'] .ddga-date-range-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-disabled]\n .ddga-date-range-picker__segment {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-range-picker-trigger,\n .ddga-date-range-picker-trigger::after {\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 .ddga-date-range-picker-trigger[data-disabled] {\n border-color: GrayText;\n }\n /* color bands disappear in forced-colors — restore a visible range. */\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 /* 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 /* 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 /* ─── Base ─── */\n\n .ddga-tag {\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-tag--sm {\n height: 20px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-2xs); /* SDGA x-Small = Text-2xs 10px */\n font-weight: var(--ddga-font-weight-semibold); /* SDGA x-Small = SemiBold 600 */\n }\n\n .ddga-tag--md {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n /* SDGA Tag Medium = 32px / 16px text */\n .ddga-tag--lg {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Shape ─── */\n\n .ddga-tag--squared {\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Icon only ─── */\n\n .ddga-tag--icon-only {\n padding-inline: 0;\n aspect-ratio: 1;\n }\n\n /* ─── Solid variants ─── */\n\n .ddga-tag--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n\n .ddga-tag--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n .ddga-tag--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n\n .ddga-tag--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n\n .ddga-tag--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n\n .ddga-tag--warning {\n background-color: var(--ddga-color-warning);\n color: var(--ddga-color-warning-foreground);\n }\n\n .ddga-tag--info {\n background-color: var(--ddga-color-info);\n color: var(--ddga-color-info-foreground);\n }\n\n /* ─── Subtle (tonal) variants — the SDGA filled Tag (−50 bg / −200 border / −800 text) ─── */\n\n .ddga-tag--primary-subtle {\n background-color: var(--ddga-sa-50);\n color: var(--ddga-sa-800);\n border-color: var(--ddga-sa-200);\n }\n\n .ddga-tag--secondary-subtle {\n background-color: var(--ddga-gray-50);\n color: var(--ddga-gray-800);\n border-color: var(--ddga-gray-200);\n }\n\n .ddga-tag--destructive-subtle {\n background-color: var(--ddga-error-50);\n color: var(--ddga-error-800);\n border-color: var(--ddga-error-200);\n }\n\n .ddga-tag--success-subtle {\n background-color: var(--ddga-success-50);\n color: var(--ddga-success-800);\n border-color: var(--ddga-success-200);\n }\n\n .ddga-tag--warning-subtle {\n background-color: var(--ddga-warning-50);\n color: var(--ddga-warning-800);\n border-color: var(--ddga-warning-200);\n }\n\n .ddga-tag--info-subtle {\n background-color: var(--ddga-info-50);\n color: var(--ddga-info-800);\n border-color: var(--ddga-info-200);\n }\n\n /* ─── Outline ─── */\n\n .ddga-tag--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n\n /* ─── On-color (for colored / dark surfaces) ─── */\n\n .ddga-tag--on-color {\n background-color: var(--ddga-alpha-white-20);\n color: #ffffff;\n }\n\n /* ─── Outlined (SDGA Tag \"Outline=True\") ─── */\n\n .ddga-tag--outlined {\n background-color: transparent;\n }\n .ddga-tag--outlined.ddga-tag--secondary-subtle {\n border-color: var(--ddga-gray-600);\n }\n .ddga-tag--outlined.ddga-tag--primary-subtle {\n border-color: var(--ddga-sa-700);\n }\n .ddga-tag--outlined.ddga-tag--success-subtle {\n border-color: var(--ddga-success-700);\n }\n .ddga-tag--outlined.ddga-tag--destructive-subtle {\n border-color: var(--ddga-error-700);\n }\n .ddga-tag--outlined.ddga-tag--warning-subtle {\n border-color: var(--ddga-warning-700);\n }\n .ddga-tag--outlined.ddga-tag--info-subtle {\n border-color: var(--ddga-info-700);\n }\n .ddga-tag--outlined.ddga-tag--on-color {\n border-color: var(--ddga-alpha-white-60);\n }\n\n /* ─── Icons inside tag ─── */\n\n .ddga-tag__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .ddga-tag__icon > svg,\n .ddga-tag > svg {\n display: block;\n }\n\n /* SDGA per-size lead/trail icon: x Small 10 · Small 14 · Medium 18 (the close button is sized separately). */\n .ddga-tag--sm > svg,\n .ddga-tag--sm > .ddga-tag__icon > svg {\n width: 10px;\n height: 10px;\n }\n .ddga-tag--md > svg,\n .ddga-tag--md > .ddga-tag__icon > svg {\n width: 14px;\n height: 14px;\n }\n .ddga-tag--lg > svg,\n .ddga-tag--lg > .ddga-tag__icon > svg {\n width: 18px;\n height: 18px;\n }\n\n .ddga-tag svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n /* ─── Close button (dismissible) ─── */\n\n .ddga-tag__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-tag__close > svg {\n inline-size: 0.75em;\n block-size: 0.75em;\n }\n\n .ddga-tag__close:hover {\n background-color: color-mix(in srgb, currentColor 18%, transparent);\n }\n\n .ddga-tag__close:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n /* ─── Dark mode adjustments ─── */\n\n [data-theme='dark'] .ddga-tag--default,\n [data-theme='dark'] .ddga-tag--secondary-subtle {\n background-color: var(--ddga-alpha-white-10);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-tag--primary-subtle {\n background-color: rgb(27 131 84 / 0.2);\n color: var(--ddga-sa-200, #b8eacb);\n }\n [data-theme='dark'] .ddga-tag--destructive-subtle {\n background-color: rgb(217 45 32 / 0.18);\n color: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-tag--success-subtle {\n background-color: rgb(7 148 85 / 0.18);\n color: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-tag--warning-subtle {\n background-color: rgb(220 104 3 / 0.18);\n color: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-tag--info-subtle {\n background-color: rgb(21 112 239 / 0.16);\n color: var(--ddga-info-200, #b2ddff);\n }\n\n /* Drop the light tint border on dark subtle chips (but keep outlined borders). */\n [data-theme='dark'] .ddga-tag--secondary-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--primary-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--destructive-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--success-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--warning-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--info-subtle:not(.ddga-tag--outlined) {\n border-color: transparent;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-tag {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-status-tag {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n font-family: inherit;\n font-weight: var(--ddga-font-weight-medium);\n white-space: nowrap;\n user-select: none;\n }\n\n /* ─── Sizes (SDGA x Small / Small / Medium = 10 / 12 / 16px) ─── */\n\n .ddga-status-tag--sm {\n height: 20px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-2xs); /* SDGA x-Small = Text-2xs 10px */\n font-weight: var(--ddga-font-weight-semibold); /* SDGA x-Small = SemiBold 600 */\n }\n\n .ddga-status-tag--md {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-status-tag--lg {\n height: 32px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Dot (10px constant; color set per tone/status) ─── */\n\n .ddga-status-tag__dot {\n inline-size: 10px;\n block-size: 10px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-status-tag-dot, currentColor);\n flex-shrink: 0;\n }\n\n /* Subtle + Ghost dot = the tone's −800 (`tag-icon`). Inverted overrides below. */\n .ddga-status-tag--neutral {\n --ddga-status-tag-dot: var(--ddga-gray-800);\n }\n .ddga-status-tag--info {\n --ddga-status-tag-dot: var(--ddga-info-800);\n }\n .ddga-status-tag--success {\n --ddga-status-tag-dot: var(--ddga-success-800);\n }\n .ddga-status-tag--error {\n --ddga-status-tag-dot: var(--ddga-error-800);\n }\n .ddga-status-tag--warning {\n --ddga-status-tag-dot: var(--ddga-warning-800);\n }\n\n /* ─── Subtle: −50 bg + −800 text ─── */\n\n .ddga-status-tag--subtle.ddga-status-tag--neutral {\n background-color: var(--ddga-gray-50);\n color: var(--ddga-gray-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--info {\n background-color: var(--ddga-info-50);\n color: var(--ddga-info-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--success {\n background-color: var(--ddga-success-50);\n color: var(--ddga-success-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--error {\n background-color: var(--ddga-error-50);\n color: var(--ddga-error-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--warning {\n background-color: var(--ddga-warning-50);\n color: var(--ddga-warning-800);\n }\n\n /* ─── Ghost: transparent + neutral text (the dot keeps the tone) ─── */\n\n .ddga-status-tag--ghost {\n background-color: transparent;\n color: var(--ddga-gray-800);\n }\n\n /* ─── Inverted: tone \"strong\" bg + white text + alpha-white-60 dot ─── */\n /* The strong step is per-tone — Success/Warning use −700 (the −600 is too light for\n white text), the others −600, Neutral gray-600. */\n\n .ddga-status-tag--inverted {\n color: #ffffff;\n }\n .ddga-status-tag--inverted.ddga-status-tag--neutral {\n background-color: var(--ddga-gray-600);\n }\n .ddga-status-tag--inverted.ddga-status-tag--info {\n background-color: var(--ddga-info-600);\n }\n .ddga-status-tag--inverted.ddga-status-tag--success {\n background-color: var(--ddga-success-700);\n }\n .ddga-status-tag--inverted.ddga-status-tag--error {\n background-color: var(--ddga-error-600);\n }\n .ddga-status-tag--inverted.ddga-status-tag--warning {\n background-color: var(--ddga-warning-700);\n }\n .ddga-status-tag--inverted .ddga-status-tag__dot {\n background-color: var(--ddga-alpha-white-60);\n }\n\n /* ─── Dark mode (SDGA is light-only; the −50 tints don't theme-flip) ─── */\n\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--neutral {\n background-color: var(--ddga-alpha-white-10);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--info {\n background-color: rgb(21 112 239 / 0.16);\n color: var(--ddga-info-200, #b2ddff);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--success {\n background-color: rgb(7 148 85 / 0.18);\n color: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--error {\n background-color: rgb(217 45 32 / 0.18);\n color: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--warning {\n background-color: rgb(220 104 3 / 0.18);\n color: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-status-tag--ghost {\n color: var(--ddga-gray-200);\n }\n /* Lighten the dot to the (now light) text on dark subtle/ghost chips. */\n [data-theme='dark'] .ddga-status-tag--subtle,\n [data-theme='dark'] .ddga-status-tag--ghost {\n --ddga-status-tag-dot: currentColor;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-status-tag {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-dropdown__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-regular);\n color: var(--ddga-text-primary);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-dropdown__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the field; SDGA Dropdown Input = the Text Input field + a\n trailing chevron). Sizes md 32 / lg 40, fill styles, gray-400 border. ─── */\n\n .ddga-dropdown-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-dropdown-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-dropdown-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-dropdown-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-dropdown-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n .ddga-dropdown__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .ddga-dropdown__placeholder {\n color: var(--ddga-gray-500);\n }\n\n /* SDGA chevron = arrow-down-01, ink #161616, 20px. */\n .ddga-dropdown__icon {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n\n /* Hover (outlined only): border → gray-700. */\n .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-700);\n }\n\n /* Focus: shadow-md + full-width 2px dark underline, NO ring. */\n .ddga-dropdown-trigger:focus-visible {\n outline: none;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-dropdown-trigger--default:focus-visible {\n border-color: var(--ddga-gray-400);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-dropdown-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-dropdown-trigger:focus-visible::after {\n transform: scaleX(1);\n }\n\n /* Pressed: gray-100 fill + short centered underline. */\n .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-trigger:active:not(:disabled)::after {\n transform: scaleX(0.5);\n }\n\n /* Error: error-700 border. */\n .ddga-dropdown-trigger--error,\n .ddga-dropdown-trigger--error:hover:not(:focus-visible),\n .ddga-dropdown-trigger--error:focus-visible {\n border-color: var(--ddga-error-700);\n }\n\n /* Read-only: gray-300 border, transparent fill. */\n .ddga-dropdown-trigger[aria-readonly='true'] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: default;\n }\n\n /* Disabled: gray-300 border, transparent, gray-400 text — no opacity. */\n .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n color: var(--ddga-gray-400);\n }\n .ddga-dropdown-trigger:disabled .ddga-dropdown__placeholder,\n .ddga-dropdown-trigger:disabled .ddga-dropdown__icon {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__label,\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Panel ─── */\n\n .ddga-dropdown-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl); /* matches measured SDGA Menu panel */\n overflow: hidden;\n z-index: 50;\n min-inline-size: 200px;\n }\n .ddga-dropdown-content[data-state='open'] {\n animation: ddga-dropdown-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-dropdown-content[data-state='closed'] {\n animation: ddga-dropdown-out 80ms ease-in;\n }\n @keyframes ddga-dropdown-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-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n .ddga-dropdown-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-dropdown-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-input);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-dropdown-input::placeholder {\n color: var(--ddga-gray-500);\n }\n /* Non-searchable mode keeps a focusable input (cmdk keyboard) but hides it. */\n .ddga-dropdown-input--hidden {\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 .ddga-dropdown-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n .ddga-dropdown-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 /* ─── List item (SDGA Dropdown List Item: p-8, gap-8, Text sm 14/20 #161616) ─── */\n\n .ddga-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n /* cmdk highlight (hover + keyboard) → SDGA Hovered gray-100. */\n .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-dropdown-item[data-disabled='true'] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n .ddga-dropdown-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 /* Single-select: trailing tick-02 check (20px ink) when chosen. */\n .ddga-dropdown-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n .ddga-dropdown-item__check > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* Multi-select: leading 16px checkbox (gray-500 outline → gray-950 fill). */\n .ddga-dropdown-item__checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-xs);\n color: #ffffff;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-gray-950);\n border-color: var(--ddga-gray-950);\n }\n .ddga-dropdown-item__checkbox > svg {\n inline-size: 12px;\n block-size: 12px;\n }\n\n /* ─── Group label (SDGA: Text sm Semibold, gray-700) + Separator ─── */\n\n .ddga-dropdown-group [cmdk-group-heading] {\n padding-block-start: var(--ddga-space-2);\n padding-block-end: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-700);\n }\n .ddga-dropdown-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-input);\n }\n\n /* ─── Dark mode ─── */\n /* SDGA light values are fixed ramp steps; remap to flipping tokens so the\n field + panel stay readable. text-primary/foreground already flip. */\n\n [data-theme='dark'] .ddga-dropdown-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown__placeholder,\n [data-theme='dark'] .ddga-dropdown-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--filled-lighter,\n [data-theme='dark'] .ddga-dropdown-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-dropdown-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger[aria-readonly='true'],\n [data-theme='dark'] .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-item:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-text-primary);\n border-color: var(--ddga-text-primary);\n color: var(--ddga-color-background);\n }\n [data-theme='dark'] .ddga-dropdown-group [cmdk-group-heading] {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-trigger::after {\n transition: none;\n }\n .ddga-dropdown-content[data-state='open'],\n .ddga-dropdown-content[data-state='closed'] {\n animation: none;\n }\n }\n @media (forced-colors: active) {\n .ddga-dropdown-trigger,\n .ddga-dropdown-content {\n border: 1px solid CanvasText;\n }\n .ddga-dropdown-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-dropdown-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA Tabs (Platforms Code): a single underline style. Size lives on the\n root (.ddga-tabs--{sm,md,lg}); orientation comes from Radix's\n `data-orientation`. Logical properties keep the RTL flip free. */\n\n .ddga-tabs {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n color: var(--ddga-text-primary);\n /* Indicator + track rail share one weight (SDGA 3px). */\n --ddga-tabs-indicator-thickness: 3px;\n }\n .ddga-tabs[data-orientation='vertical'] {\n flex-direction: row;\n gap: var(--ddga-space-4);\n }\n\n /* ─── List + track rail ─── */\n\n .ddga-tabs__list {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n position: relative;\n }\n .ddga-tabs__list[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n }\n\n /* Horizontal baseline rail (gray-300, rounded) behind every tab; the active\n green segment paints on top of it. Vertical lists have no rail. */\n .ddga-tabs__list[data-orientation='horizontal']::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n block-size: var(--ddga-tabs-indicator-thickness);\n background-color: var(--ddga-color-input);\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-tabs__list--full-width {\n inline-size: 100%;\n }\n .ddga-tabs__list--full-width .ddga-tabs__trigger {\n flex: 1;\n }\n\n .ddga-tabs__list--flush .ddga-tabs__trigger:first-child {\n margin-inline-start: calc(-1 * var(--ddga-tabs-pad-inline, 0px));\n }\n\n /* ─── Trigger (Radix renders a <button>) ─── */\n\n .ddga-tabs__trigger {\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n font-family: inherit;\n font-weight: 500;\n line-height: 1.25rem;\n white-space: nowrap;\n cursor: pointer;\n transition:\n color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger {\n font-weight: 400;\n }\n\n .ddga-tabs__trigger::after {\n content: '';\n position: absolute;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n pointer-events: none;\n }\n .ddga-tabs[data-orientation='horizontal'] .ddga-tabs__trigger::after {\n inset-block-end: 0;\n inset-inline: var(--ddga-tabs-pad-inline);\n block-size: var(--ddga-tabs-indicator-thickness);\n }\n .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger::after {\n inset-inline-start: 0;\n inset-block: var(--ddga-space-2);\n inline-size: var(--ddga-tabs-indicator-thickness);\n }\n\n .ddga-tabs__trigger:hover,\n .ddga-tabs__trigger--hovered,\n .ddga-tabs__trigger:active,\n .ddga-tabs__trigger--pressed {\n color: var(--ddga-text-primary);\n }\n .ddga-tabs__trigger:hover:not([data-state='active']):not([data-disabled]),\n .ddga-tabs__trigger--hovered:not([data-state='active']) {\n background-color: var(--ddga-color-muted);\n }\n .ddga-tabs__trigger:active:not([data-state='active']):not([data-disabled]),\n .ddga-tabs__trigger--pressed:not([data-state='active']) {\n background-color: var(--ddga-color-border);\n }\n .ddga-tabs__trigger:hover:not([data-state='active'])::after,\n .ddga-tabs__trigger--hovered:not([data-state='active'])::after,\n .ddga-tabs__trigger:active:not([data-state='active'])::after,\n .ddga-tabs__trigger--pressed:not([data-state='active'])::after {\n background-color: var(--ddga-text-primary);\n }\n\n .ddga-tabs__trigger[data-state='active'] {\n color: var(--ddga-text-primary);\n font-weight: 700;\n }\n .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n font-weight: 600;\n }\n .ddga-tabs__trigger[data-state='active']::after {\n background-color: var(--ddga-color-primary);\n }\n\n .ddga-tabs__trigger:focus-visible,\n .ddga-tabs__trigger--focused {\n outline: none;\n border-radius: var(--ddga-radius-xs);\n box-shadow:\n inset 0 0 0 3px var(--ddga-text-primary),\n 0 0 0 1px var(--ddga-color-background);\n }\n\n .ddga-tabs__trigger[data-disabled],\n .ddga-tabs__trigger[aria-disabled='true'] {\n color: var(--ddga-text-placeholder);\n cursor: not-allowed;\n }\n .ddga-tabs__trigger[data-disabled]:hover,\n .ddga-tabs__trigger[aria-disabled='true']:hover {\n background-color: transparent;\n color: var(--ddga-text-placeholder);\n }\n .ddga-tabs__trigger[data-disabled]:not([data-state='active'])::after,\n .ddga-tabs__trigger[aria-disabled='true']:not([data-state='active'])::after {\n background-color: transparent;\n }\n .ddga-tabs__trigger[data-disabled][data-state='active']::after,\n .ddga-tabs__trigger[aria-disabled='true'][data-state='active']::after {\n background-color: var(--ddga-text-placeholder);\n }\n\n /* ─── Icons (fixed 16px, SDGA leading icon) ─── */\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: 1rem;\n block-size: 1rem;\n }\n\n /* ─── Sizes (per orientation) ─── */\n\n .ddga-tabs--sm[data-orientation='horizontal'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n --ddga-tabs-pad-inline: var(--ddga-space-3);\n }\n .ddga-tabs--md[data-orientation='horizontal'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-sm);\n --ddga-tabs-pad-inline: var(--ddga-space-4);\n }\n .ddga-tabs--lg[data-orientation='horizontal'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-sm);\n --ddga-tabs-pad-inline: var(--ddga-space-4);\n }\n\n /* Vertical: 6px/2px paddings have no token (DGA spacing-sm/xxs we lack) → raw px. */\n .ddga-tabs--sm[data-orientation='vertical'] .ddga-tabs__trigger {\n padding-block: 2px;\n padding-inline: 6px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tabs--md[data-orientation='vertical'] .ddga-tabs__trigger {\n padding-block: 6px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tabs--lg[data-orientation='vertical'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n }\n\n /* Icon-only (off-spec extra) — square the inline padding around the glyph. */\n .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-2);\n }\n .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-3);\n }\n .ddga-tabs--lg .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-4);\n }\n\n /* ─── Overflow (\"More Tab\") ─── */\n\n .ddga-tabs__list-wrap {\n position: relative;\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n }\n /* The wrap owns the rail so it spans under the overflow trigger too. */\n .ddga-tabs__list-wrap::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n block-size: var(--ddga-tabs-indicator-thickness);\n background-color: var(--ddga-color-input);\n border-radius: var(--ddga-radius-full);\n }\n .ddga-tabs__list-wrap .ddga-tabs__list::after {\n content: none;\n }\n .ddga-tabs__trigger--overflowed {\n display: none;\n }\n\n .ddga-tabs__more {\n appearance: none;\n border: 0;\n background: transparent;\n margin: 0;\n margin-inline-start: auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-inline: var(--ddga-space-3);\n flex-shrink: 0;\n cursor: pointer;\n }\n .ddga-tabs__more-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n transition:\n color 150ms ease,\n background-color 150ms ease;\n }\n .ddga-tabs__more-icon {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n .ddga-tabs__more:hover .ddga-tabs__more-button {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-tabs__more:active .ddga-tabs__more-button {\n background-color: var(--ddga-color-border);\n }\n .ddga-tabs__more[data-active] .ddga-tabs__more-button,\n .ddga-tabs__more[data-state='open'] .ddga-tabs__more-button {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-tabs__more:focus-visible {\n outline: none;\n }\n .ddga-tabs__more:focus-visible .ddga-tabs__more-button {\n border-radius: var(--ddga-radius-xs);\n box-shadow:\n inset 0 0 0 1px var(--ddga-color-background),\n 0 0 0 3px var(--ddga-text-primary);\n }\n\n /* ─── Content ─── */\n\n .ddga-tabs__content {\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 [data-theme='dark'] .ddga-tabs__trigger,\n [data-theme='dark'] .ddga-tabs__more-button {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark'] .ddga-tabs__trigger[data-state='active'],\n [data-theme='dark'] .ddga-tabs__trigger:hover,\n [data-theme='dark'] .ddga-tabs__trigger:active,\n [data-theme='dark'] .ddga-tabs__trigger:focus-visible,\n [data-theme='dark'] .ddga-tabs__trigger--hovered,\n [data-theme='dark'] .ddga-tabs__trigger--pressed,\n [data-theme='dark'] .ddga-tabs__trigger--focused,\n [data-theme='dark'] .ddga-tabs__more:hover .ddga-tabs__more-button,\n [data-theme='dark'] .ddga-tabs__more[data-active] .ddga-tabs__more-button {\n color: var(--ddga-text-primary);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tabs__trigger,\n .ddga-tabs__more-button {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-tabs__list[data-orientation='horizontal']::after,\n .ddga-tabs__list-wrap::after {\n background-color: CanvasText;\n }\n .ddga-tabs__trigger[data-state='active'] {\n color: Highlight;\n }\n .ddga-tabs__trigger[data-state='active']::after {\n background-color: Highlight;\n }\n .ddga-tabs__trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n }\n}\n","@layer ddga-components {\n /* Semantic <dl>/<dt>/<dd> key–value list. Layout cascades from the root\n variant to the rows; logical properties keep label/value alignment\n correct in RTL. */\n\n .ddga-description-list {\n /* Term column width in horizontal layout; override per instance. */\n --ddga-dl-term-width: 12rem;\n\n margin: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-description-list__item {\n display: flex;\n gap: var(--ddga-space-2) var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n }\n\n .ddga-description-list__term {\n color: var(--ddga-text-secondary);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n }\n\n .ddga-description-list__details {\n margin: 0;\n color: var(--ddga-text-primary);\n line-height: 1.5;\n }\n\n /* ─── Horizontal: term beside details (review / summary screens) ─── */\n\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: row;\n align-items: baseline;\n }\n\n .ddga-description-list--horizontal .ddga-description-list__term {\n flex: none;\n inline-size: var(--ddga-dl-term-width);\n }\n\n .ddga-description-list--horizontal .ddga-description-list__details {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n /* Stack rows on narrow viewports so labels don't crush the values. */\n @media (max-width: 480px) {\n .ddga-description-list--horizontal .ddga-description-list__item {\n flex-direction: column;\n /* 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 .ddga-structured-list {\n --ddga-sl-divider: var(--ddga-color-input);\n\n inline-size: 100%;\n border-collapse: separate;\n border-spacing: 0;\n color: var(--ddga-text-primary);\n text-align: start;\n }\n\n .ddga-structured-list__cell-content {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n word-break: break-word;\n }\n\n .ddga-structured-list__head {\n block-size: 48px;\n padding-inline: var(--ddga-space-4);\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n text-align: start;\n vertical-align: middle;\n border-block-end: 1px solid var(--ddga-sl-divider);\n }\n\n .ddga-structured-list__cell {\n block-size: 64px;\n padding-inline: var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5;\n text-align: start;\n vertical-align: middle;\n }\n\n .ddga-structured-list__head--align-center .ddga-structured-list__cell-content,\n .ddga-structured-list__cell--align-center .ddga-structured-list__cell-content {\n justify-content: center;\n }\n .ddga-structured-list__head--align-end .ddga-structured-list__cell-content,\n .ddga-structured-list__cell--align-end .ddga-structured-list__cell-content {\n justify-content: flex-end;\n }\n\n .ddga-structured-list--compact .ddga-structured-list__cell {\n block-size: 48px;\n }\n\n .ddga-structured-list--row-divider\n .ddga-structured-list__body\n .ddga-structured-list__row:not(:last-child)\n .ddga-structured-list__cell {\n border-block-end: 1px solid var(--ddga-sl-divider);\n }\n\n .ddga-structured-list--col-divider .ddga-structured-list__head:not(:last-child),\n .ddga-structured-list--col-divider .ddga-structured-list__cell:not(:last-child) {\n border-inline-end: 1px solid var(--ddga-sl-divider);\n }\n\n .ddga-structured-list--contained {\n background-color: var(--ddga-color-card);\n border: 1px solid var(--ddga-sl-divider);\n border-radius: var(--ddga-radius-md);\n overflow: clip;\n }\n\n .ddga-structured-list--selectable .ddga-structured-list__body .ddga-structured-list__row {\n position: relative;\n transition: background-color 120ms ease;\n }\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:not([data-disabled]) {\n cursor: pointer;\n }\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:not([data-disabled]):hover {\n background-color: var(--ddga-gray-50);\n }\n\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:has(:focus-visible)::after {\n content: '';\n position: absolute;\n inset: 0;\n border: 2px solid var(--ddga-text-primary);\n pointer-events: none;\n }\n\n .ddga-structured-list--selectable .ddga-checkbox:focus-visible {\n outline: none;\n }\n\n .ddga-structured-list__row[data-disabled] {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n [data-theme='dark'] .ddga-structured-list__head {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark']\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:not([data-disabled]):hover {\n background-color: color-mix(in srgb, var(--ddga-color-card) 90%, white);\n }\n [data-theme='dark'] .ddga-structured-list__row[data-disabled] {\n background-color: color-mix(in srgb, var(--ddga-color-card) 70%, var(--ddga-color-background));\n color: var(--ddga-color-muted-foreground);\n }\n\n @media (forced-colors: active) {\n .ddga-structured-list__head,\n .ddga-structured-list--row-divider\n .ddga-structured-list__body\n .ddga-structured-list__row:not(:last-child)\n .ddga-structured-list__cell,\n .ddga-structured-list--col-divider .ddga-structured-list__head:not(:last-child),\n .ddga-structured-list--col-divider .ddga-structured-list__cell:not(:last-child),\n .ddga-structured-list--contained {\n border-color: CanvasText;\n }\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:has(:focus-visible)::after {\n border-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA Link: text-link primitive. Three orthogonal axes — tone (Primary/Neutral/\n On-color) sets the color ramp via the hooks below; size (sm/md) sets type + icon +\n gap; inline (true/false) sets the underline rule. Hover/Pressed go LIGHTER (SDGA),\n Visited via :visited, focus = sharp 2px ink box. Base = Primary defaults. */\n\n .ddga-link {\n --ddga-link-color: var(--ddga-color-primary);\n --ddga-link-color-hover: var(--ddga-sa-400);\n --ddga-link-color-pressed: var(--ddga-sa-300);\n --ddga-link-color-visited: var(--ddga-sa-800);\n --ddga-link-color-disabled: var(--ddga-text-placeholder);\n --ddga-link-focus-ring: var(--ddga-text-primary); /* #161616 */\n\n color: var(--ddga-link-color);\n font-family: inherit;\n cursor: pointer;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n transition:\n color 150ms ease,\n text-decoration-color 150ms ease;\n }\n\n /* ─── Tone (color ramp) — base is Primary; override Neutral + On-color ─── */\n\n .ddga-link--neutral {\n --ddga-link-color: var(--ddga-gray-700);\n --ddga-link-color-hover: var(--ddga-gray-500);\n --ddga-link-color-pressed: var(--ddga-gray-400);\n --ddga-link-color-visited: var(--ddga-sa-800); /* SDGA reuses link-primary-visited */\n --ddga-link-color-disabled: var(--ddga-text-placeholder);\n }\n\n .ddga-link--on-color {\n --ddga-link-color: #ffffff;\n --ddga-link-color-hover: var(--ddga-alpha-white-80);\n --ddga-link-color-pressed: var(--ddga-alpha-white-60);\n --ddga-link-color-visited: var(--ddga-alpha-white-90);\n --ddga-link-color-disabled: var(--ddga-alpha-white-30);\n --ddga-link-focus-ring: #ffffff;\n }\n\n /* ─── State ramp (LVHA order; :visited is color-only by browser design) ─── */\n\n .ddga-link:visited {\n color: var(--ddga-link-color-visited);\n }\n .ddga-link:hover {\n color: var(--ddga-link-color-hover);\n }\n .ddga-link:active {\n color: var(--ddga-link-color-pressed);\n }\n\n .ddga-link:focus-visible {\n outline: 2px solid var(--ddga-link-focus-ring);\n outline-offset: 0;\n }\n\n .ddga-link[aria-disabled='true'] {\n color: var(--ddga-link-color-disabled);\n pointer-events: none;\n cursor: default;\n }\n\n /* Static demo hooks for the Storybook state matrix (real states use the pseudo-classes).\n Doubled class = specificity over `.ddga-link--standalone { text-decoration: none }`. */\n .ddga-link.ddga-link--hovered {\n color: var(--ddga-link-color-hover);\n text-decoration: underline;\n }\n .ddga-link.ddga-link--pressed {\n color: var(--ddga-link-color-pressed);\n text-decoration: underline;\n }\n .ddga-link.ddga-link--visited {\n color: var(--ddga-link-color-visited);\n }\n .ddga-link.ddga-link--focused {\n outline: 2px solid var(--ddga-link-focus-ring);\n outline-offset: 0;\n }\n\n /* ─── Inline axis (underline rule) ─── */\n\n /* Inline=True: flows in prose, underlined in every state. */\n .ddga-link--inline {\n display: inline;\n text-decoration: underline;\n }\n\n /* Inline=False: standalone / chrome — inline-flex, underline on hover/pressed only. */\n .ddga-link--standalone {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n }\n .ddga-link--standalone:hover,\n .ddga-link--standalone:active {\n text-decoration: underline;\n }\n\n /* ─── Size (type / icon / gap) ─── */\n\n .ddga-link--md {\n font-size: var(--ddga-font-size-base); /* 16 */\n line-height: 1.5; /* 24 */\n }\n .ddga-link--sm {\n font-size: var(--ddga-font-size-sm); /* 14 */\n line-height: 1.42857; /* 20 */\n }\n\n .ddga-link--standalone.ddga-link--md {\n gap: var(--ddga-space-2); /* 8 */\n }\n .ddga-link--standalone.ddga-link--sm {\n gap: var(--ddga-space-1); /* 4 */\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--md .ddga-link__icon > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-link--sm .ddga-link__icon > svg {\n inline-size: 16px;\n block-size: 16px;\n }\n\n /* Inline links have no flex gap → space icons with logical margins (RTL-safe). */\n .ddga-link--inline .ddga-link__icon {\n vertical-align: middle;\n }\n .ddga-link--inline.ddga-link--md [data-slot='link-start-icon'] {\n margin-inline-end: var(--ddga-space-2);\n }\n .ddga-link--inline.ddga-link--sm [data-slot='link-start-icon'] {\n margin-inline-end: var(--ddga-space-1);\n }\n .ddga-link--inline.ddga-link--md [data-slot='link-end-icon'],\n .ddga-link--inline.ddga-link--md [data-slot='link-external-icon'] {\n margin-inline-start: var(--ddga-space-2);\n }\n .ddga-link--inline.ddga-link--sm [data-slot='link-end-icon'],\n .ddga-link--inline.ddga-link--sm [data-slot='link-external-icon'] {\n margin-inline-start: var(--ddga-space-1);\n }\n\n /* ─── Dark — exact DGA dark palette deferred; remap so links stay readable.\n color-primary already flips to SA-400 in dark.css; remap the raw-token states. ─── */\n\n [data-theme='dark'] .ddga-link--primary {\n --ddga-link-color-hover: var(--ddga-sa-300);\n --ddga-link-color-pressed: var(--ddga-sa-200);\n --ddga-link-color-visited: var(--ddga-sa-600);\n --ddga-link-focus-ring: #ffffff;\n }\n [data-theme='dark'] .ddga-link--neutral {\n --ddga-link-color: var(--ddga-gray-300);\n --ddga-link-color-hover: var(--ddga-gray-200);\n --ddga-link-color-pressed: var(--ddga-gray-100);\n --ddga-link-color-visited: var(--ddga-sa-400);\n --ddga-link-focus-ring: #ffffff;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-link {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-link,\n .ddga-link--primary,\n .ddga-link--neutral,\n .ddga-link--on-color {\n color: LinkText;\n }\n .ddga-link:visited {\n color: VisitedText;\n }\n .ddga-link[aria-disabled='true'] {\n color: GrayText;\n }\n .ddga-link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 0;\n }\n }\n}\n","@layer ddga-components {\n /*\n * SDGA Digital Stamp — government-site verification bar (collapsed) that expands to an\n * explainer panel. Mobile-first; the desktop two-column layout switches in via a container\n * query so the banner adapts to its own width. SDGA spacing-sm (6px) has no token → literal.\n */\n .ddga-digital-stamp {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-10); /* 40 — between the bar row, explainer, and registration */\n inline-size: 100%;\n padding-inline: var(--ddga-space-4); /* 16 (mobile) */\n padding-block: 6px; /* SDGA spacing-sm */\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n font-family: inherit;\n overflow: clip;\n }\n .ddga-digital-stamp[data-state='open'] {\n padding-block-end: var(--ddga-space-4); /* 16 (mobile) */\n }\n\n .ddga-digital-stamp__row {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--ddga-space-2); /* 8 */\n }\n\n .ddga-digital-stamp__lead {\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-2); /* 8 */\n min-inline-size: 0;\n }\n\n .ddga-digital-stamp__flag {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 14px;\n margin-block-start: 0.1875rem; /* nudge the 14px flag onto the first text line */\n border-radius: 1px;\n }\n\n .ddga-digital-stamp__statement {\n margin: 0;\n min-inline-size: 0;\n font-size: var(--ddga-font-size-sm); /* 14 */\n line-height: 1.25rem; /* 20 */\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n word-break: break-word;\n }\n\n .ddga-digital-stamp__trigger {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1); /* 4 */\n padding: 0;\n border: 0;\n background: transparent;\n font-family: inherit;\n font-size: var(--ddga-font-size-sm); /* 14 */\n line-height: 1.25rem;\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-color-primary);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-digital-stamp__trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-digital-stamp__chevron {\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n transition: transform 150ms ease;\n }\n .ddga-digital-stamp[data-state='open'] .ddga-digital-stamp__chevron {\n transform: rotate(180deg);\n }\n\n .ddga-digital-stamp__panel {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-10); /* 40 */\n }\n .ddga-digital-stamp__panel[hidden] {\n display: none;\n }\n\n /* Explainer: two columns (Domain Verification + Security Confirmation) */\n .ddga-digital-stamp__extension {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4); /* 16 (mobile stack) */\n }\n\n .ddga-digital-stamp__column {\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-3); /* 12 (mobile) */\n min-inline-size: 0;\n }\n\n .ddga-digital-stamp__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px; /* mobile */\n block-size: 32px;\n border: 1px solid var(--ddga-success-700);\n border-radius: var(--ddga-radius-full);\n box-shadow: var(--ddga-shadow-xs);\n color: var(--ddga-success-700);\n }\n .ddga-digital-stamp__icon > svg {\n inline-size: 16px;\n block-size: 16px;\n }\n\n .ddga-digital-stamp__content {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3); /* 12 */\n min-inline-size: 0;\n }\n\n .ddga-digital-stamp__title {\n margin: 0;\n font-size: var(--ddga-font-size-lg); /* 18 */\n line-height: 1.75rem; /* 28 */\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-primary);\n word-break: break-word;\n }\n .ddga-digital-stamp__title strong {\n font-weight: inherit;\n color: var(--ddga-color-primary);\n }\n\n .ddga-digital-stamp__description {\n margin: 0;\n font-size: var(--ddga-font-size-base); /* 16 */\n line-height: 1.5rem; /* 24 */\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-gray-700);\n word-break: break-word;\n }\n\n /* Registration panel (white surface) */\n .ddga-digital-stamp__registration {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-6); /* 24 */\n padding-inline: var(--ddga-space-6); /* 24 */\n padding-block: var(--ddga-space-2); /* 8 */\n background-color: var(--ddga-color-background);\n border-radius: var(--ddga-radius-md);\n }\n .ddga-digital-stamp__logo {\n flex-shrink: 0;\n display: inline-flex;\n }\n .ddga-digital-stamp__logo > svg,\n .ddga-digital-stamp__logo > img {\n block-size: 31px;\n inline-size: auto;\n }\n .ddga-digital-stamp__registration-text {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3); /* 12 (mobile) */\n min-inline-size: 0;\n }\n .ddga-digital-stamp__registration-label {\n margin: 0;\n font-size: var(--ddga-font-size-base); /* 16 */\n line-height: 1.5rem;\n color: var(--ddga-text-primary);\n word-break: break-word;\n }\n .ddga-digital-stamp__registration-link,\n .ddga-digital-stamp__registration-number {\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n color: var(--ddga-color-primary);\n }\n .ddga-digital-stamp__registration-link {\n text-decoration: underline;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-digital-stamp__registration-link:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* Desktop: compact one-line bar + two-column explainer */\n @container (min-width: 768px) {\n .ddga-digital-stamp {\n padding-inline: var(--ddga-space-8); /* 32 */\n }\n .ddga-digital-stamp[data-state='closed'] {\n min-block-size: 32px;\n padding-block: 0;\n justify-content: center;\n }\n .ddga-digital-stamp[data-state='open'] {\n padding-block-end: var(--ddga-space-8); /* 32 */\n }\n .ddga-digital-stamp__row {\n flex-direction: row;\n align-items: center;\n }\n .ddga-digital-stamp__lead {\n align-items: center;\n }\n .ddga-digital-stamp__flag {\n margin-block-start: 0;\n }\n .ddga-digital-stamp__extension {\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--ddga-space-4); /* 16 */\n }\n .ddga-digital-stamp__column {\n flex: 1 1 0;\n gap: var(--ddga-space-6); /* 24 */\n }\n .ddga-digital-stamp__icon {\n inline-size: 48px;\n block-size: 48px;\n }\n .ddga-digital-stamp__icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-digital-stamp__registration-text {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-3); /* 12 */\n row-gap: 18px; /* SDGA panel wrap gap; no token */\n }\n }\n\n /* Dark theme — bg/panel/ink adapt via semantic tokens; the gray-700 body needs lifting */\n [data-theme='dark'] .ddga-digital-stamp__description {\n color: var(--ddga-gray-300);\n }\n\n @media (forced-colors: active) {\n .ddga-digital-stamp__icon {\n border-color: CanvasText;\n }\n .ddga-digital-stamp__trigger:focus-visible,\n .ddga-digital-stamp__registration-link:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* DGA Platforms Code Metric card. `large` = chart below the figures, `small` =\n chart beside. Exact SDGA color steps; the raw -700/-800 steps get dark overrides. */\n\n .ddga-metric {\n --ddga-metric-ink: var(--ddga-gray-800);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-6);\n max-inline-size: 22.5rem;\n padding: var(--ddga-space-4);\n background-color: var(--ddga-color-card);\n border-radius: var(--ddga-radius-xl);\n box-shadow: var(--ddga-shadow-md);\n color: var(--ddga-color-card-foreground);\n }\n\n /* ─── Header (featured icon + label · action) ─── */\n\n .ddga-metric__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n }\n .ddga-metric__heading {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n }\n .ddga-metric__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2rem;\n block-size: 2rem;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-50);\n color: var(--ddga-success-700);\n }\n .ddga-metric__icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-metric__action {\n flex: none;\n }\n .ddga-metric__label {\n color: var(--ddga-metric-ink);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4286; /* 20/14 */\n }\n\n /* ─── Body (figures + chart; layout swaps per Style) ─── */\n\n .ddga-metric__body {\n display: flex;\n gap: var(--ddga-space-6);\n }\n .ddga-metric--large .ddga-metric__body {\n flex-direction: column;\n }\n .ddga-metric--small .ddga-metric__body {\n flex-direction: row;\n align-items: flex-end;\n gap: var(--ddga-space-6); /* SDGA body row gap 24 */\n }\n\n .ddga-metric__figures {\n display: flex;\n flex: 1 1 0;\n min-inline-size: 0;\n }\n .ddga-metric--large .ddga-metric__figures {\n flex-direction: row;\n align-items: center;\n gap: var(--ddga-space-6); /* SDGA value↔info gap 24 (spacing-3xl) */\n }\n .ddga-metric--small .ddga-metric__figures {\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-metric__value {\n color: var(--ddga-metric-ink);\n font-size: 2.25rem; /* SDGA Display md 36 — no Display token yet */\n font-weight: var(--ddga-font-weight-bold);\n line-height: 2.75rem;\n letter-spacing: -0.02em;\n font-variant-numeric: tabular-nums;\n }\n /* letter-spacing breaks Arabic cursive joining */\n [dir='rtl'] .ddga-metric__value {\n letter-spacing: normal;\n }\n\n .ddga-metric__info {\n display: flex;\n align-items: flex-end; /* SDGA: Info items-end */\n gap: var(--ddga-space-2);\n }\n .ddga-metric--large .ddga-metric__info {\n flex: 1 1 0;\n justify-content: flex-end;\n }\n /* SDGA keeps the big value on the left in RTL — only the comparison/change mirror. */\n [dir='rtl'] .ddga-metric--large .ddga-metric__figures {\n flex-direction: row-reverse;\n }\n [dir='rtl'] .ddga-metric--large .ddga-metric__info {\n justify-content: flex-start;\n }\n\n .ddga-metric__change {\n --ddga-metric-change-color: var(--ddga-text-secondary);\n display: inline-flex;\n align-items: center;\n gap: 0.125rem; /* 2px, no token */\n color: var(--ddga-metric-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-metric__change[data-type='02'] {\n gap: var(--ddga-space-1);\n }\n .ddga-metric__change--up {\n --ddga-metric-change-color: var(--ddga-success-700);\n }\n .ddga-metric__change--down {\n --ddga-metric-change-color: var(--ddga-error-700);\n }\n .ddga-metric__change-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .ddga-metric__change-icon > svg {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n .ddga-metric__change-label {\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Trend chart (line + faded area + marker; colored by trend) ─── */\n .ddga-metric__chart {\n position: relative;\n block-size: 4rem;\n --ddga-metric-chart-line: var(--ddga-success-700);\n --ddga-metric-chart-area: var(--ddga-success-600);\n }\n .ddga-metric__chart[data-trend='down'] {\n --ddga-metric-chart-line: var(--ddga-error-700);\n --ddga-metric-chart-area: var(--ddga-error-600);\n }\n .ddga-metric--large .ddga-metric__chart {\n inline-size: 100%;\n }\n .ddga-metric--small .ddga-metric__chart {\n flex: none;\n inline-size: 8rem;\n }\n .ddga-metric__chart-svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-metric__chart-line {\n fill: none;\n stroke: var(--ddga-metric-chart-line);\n stroke-width: 2px;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n /* Marker: faint ring (::before) + solid white dot (::after). */\n .ddga-metric__chart-marker {\n position: absolute;\n inline-size: 22px;\n block-size: 22px;\n transform: translate(-50%, -50%);\n }\n .ddga-metric__chart-marker::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--ddga-radius-full);\n border: 2px solid var(--ddga-metric-chart-line);\n opacity: 0.2;\n }\n .ddga-metric__chart-marker::after {\n content: '';\n position: absolute;\n inset: 5px; /* 12px dot in the 22px ring */\n border-radius: var(--ddga-radius-full);\n background-color: var(\n --ddga-color-card\n ); /* erase against the card, not the page (differs in dark) */\n border: 2px solid var(--ddga-metric-chart-line);\n }\n\n /* ─── Footer (full-bleed divider + actions row) ─── */\n .ddga-metric__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n }\n .ddga-metric__divider {\n margin-inline: calc(-1 * var(--ddga-space-4)); /* bleed past the card padding */\n block-size: 1px;\n background-color: var(--ddga-color-input);\n }\n .ddga-metric__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Dark mode (lighten the raw -700/-800 steps) ─── */\n [data-theme='dark'] .ddga-metric {\n --ddga-metric-ink: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-metric__icon {\n background-color: rgb(37 147 95 / 0.18);\n color: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-metric__change--up {\n --ddga-metric-change-color: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-metric__change--down {\n --ddga-metric-change-color: var(--ddga-error-400);\n }\n [data-theme='dark'] .ddga-metric__chart {\n --ddga-metric-chart-line: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-metric__chart[data-trend='down'] {\n --ddga-metric-chart-line: var(--ddga-error-400);\n }\n\n /* ─── Forced colors ─── */\n @media (forced-colors: active) {\n .ddga-metric__icon {\n border: 1px solid CanvasText;\n }\n .ddga-metric__divider {\n background-color: CanvasText;\n }\n }\n\n /* ─── MetricGroup (layout parent for Metric cards) ─── */\n\n .ddga-metric-group {\n --ddga-metric-group-gap: var(--ddga-space-4);\n }\n .ddga-metric-group--gap-sm {\n --ddga-metric-group-gap: var(--ddga-space-3);\n }\n .ddga-metric-group--gap-md {\n --ddga-metric-group-gap: var(--ddga-space-4);\n }\n .ddga-metric-group--gap-lg {\n --ddga-metric-group-gap: var(--ddga-space-6);\n }\n\n .ddga-metric-group--horizontal {\n display: grid;\n gap: var(--ddga-metric-group-gap);\n grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));\n }\n .ddga-metric-group--horizontal.ddga-metric-group--cols {\n /* `columns` is a responsive MAX: up to N per row, wrapping down as the GROUP\n (not the viewport) narrows — so it's container-aware, no media query. */\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n max(\n 15rem,\n calc(\n (100% - (var(--ddga-metric-group-columns) - 1) * var(--ddga-metric-group-gap)) /\n var(--ddga-metric-group-columns)\n )\n ),\n 1fr\n )\n );\n }\n\n .ddga-metric-group--vertical {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-metric-group-gap);\n }\n\n /* Inside a group, release the standalone width cap. */\n .ddga-metric-group .ddga-metric {\n max-inline-size: none;\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-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl);\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-4);\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 /* SDGA calendar = 392px (7 columns × 56px). */\n .ddga-calendar {\n inline-size: 392px;\n max-inline-size: 100%;\n }\n\n /* SDGA header: month label + year chip at inline-start; the prev/next arrows\n group together at inline-end (flips with dir). */\n .ddga-calendar__header {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 40px;\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-calendar__nav-group {\n display: inline-flex;\n align-items: center;\n margin-inline-start: auto;\n }\n\n /* SDGA arrow buttons (arrow-left-02 / arrow-right-02), 40px hit area. */\n .ddga-calendar__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\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 /* SDGA: month + year sit at the header inline-start. The native <select>s are\n kept (free keyboard + a11y + the consumer's month/year-jump feature) but\n restyled — month reads as a plain text label, year as a chevron chip. */\n .ddga-calendar__nav-selects {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\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 margin: 0;\n font: inherit;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n cursor: pointer;\n font-variant-numeric: tabular-nums;\n outline: none;\n max-inline-size: 100%;\n }\n .ddga-calendar__select:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-calendar__select option {\n color: CanvasText;\n background-color: Canvas;\n }\n\n /* Month = SDGA text label (Text md/Medium, no chip chrome). */\n .ddga-calendar__month-select {\n padding: 0;\n font-size: var(--ddga-font-size-base);\n line-height: var(--ddga-line-height-base, 1.5);\n }\n\n /* Year = SDGA dropdown chip (Text sm/Medium + decorative chevron). The\n transparent <select> overlays the whole chip, so a click anywhere — chevron\n included — opens the native picker. */\n .ddga-calendar__year-chip {\n position: relative;\n display: inline-flex;\n align-items: center;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-calendar__year-chip:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-calendar__year-select {\n block-size: 32px;\n padding-inline: var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);\n font-size: var(--ddga-font-size-sm);\n min-inline-size: 4.5ch;\n }\n .ddga-calendar__year-chevron {\n position: absolute;\n inset-inline-end: var(--ddga-space-2);\n inline-size: 1rem;\n block-size: 1rem;\n pointer-events: none;\n color: var(--ddga-text-primary);\n }\n\n /* `separate` + a 4px vertical border-spacing gives the SDGA row breathing\n while keeping columns touching, so a range band stays continuous across a\n week yet sits at the 40px cell height (not a full-row pill). */\n .ddga-calendar__grid {\n inline-size: 100%;\n border-collapse: separate;\n border-spacing: 0 var(--ddga-space-1);\n }\n\n .ddga-calendar__weekday {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\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 /* SDGA day cell = a 40px round indicator, Text md/16. Selected fills it\n SA-600; today is a 2px SA-600 ring; hover is a soft SA-100 disc. */\n .ddga-calendar__cell {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n inline-size: 2.5rem;\n block-size: 2.5rem;\n margin-inline: auto;\n padding: 0;\n /* The single picker renders outside-month cells as a native <button>; reset\n its UA border/background so it matches the <div> cells (else the round\n cell shows a gray button ring). */\n appearance: none;\n -webkit-appearance: none;\n border: 0;\n background-color: transparent;\n text-align: center;\n font-size: var(--ddga-font-size-base);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-full);\n cursor: pointer;\n outline: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-calendar__cell[data-today]:not([data-selected]) {\n box-shadow: inset 0 0 0 2px var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-medium);\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: var(--ddga-font-size-xs);\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-sa-100);\n }\n .ddga-calendar__cell[data-pressed]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-sa-200);\n }\n .ddga-calendar__cell[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\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-placeholder);\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 /* 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-gray-700);\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 gap: var(--ddga-space-1);\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-1);\n }\n\n /* ─── Link (a) ─── */\n\n .ddga-breadcrumb__link {\n color: var(--ddga-gray-700);\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 /* SDGA mutes the current page (disabled gray), not emphasize it. */\n .ddga-breadcrumb__page {\n color: var(--ddga-gray-400);\n font-weight: var(--ddga-font-weight-regular);\n }\n\n /* ─── Separator (li, decorative) ─── */\n\n .ddga-breadcrumb__separator {\n display: inline-flex;\n align-items: center;\n color: var(--ddga-gray-400);\n }\n\n /* SDGA chevron is 16px against the 14px (md) text. */\n .ddga-breadcrumb__separator > svg {\n inline-size: 1.143em;\n block-size: 1.143em;\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 /* Interactive overflow trigger (BreadcrumbEllipsisTrigger): chromeless button.\n The `…` is a Link → gray-700 (not the muted text-tertiary of the decorative span). */\n .ddga-breadcrumb__ellipsis-trigger {\n appearance: none;\n border: 0;\n background: none;\n padding: 0;\n font: inherit;\n color: var(--ddga-gray-700);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-breadcrumb__ellipsis-trigger:hover {\n color: var(--ddga-text-primary);\n }\n .ddga-breadcrumb__ellipsis-trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\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 /* ─── Base ─── */\n /* SDGA Floating Button is a flat circle/pill — NO drop-shadow (the Figma\n component renders exactly 56/64 square; positioning is the consumer's job). */\n .ddga-floating-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n border: none;\n border-radius: var(--ddga-radius-full);\n font-family: inherit;\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-floating-button {\n transition: none;\n }\n }\n\n /* ─── Sizes (icon fixed 24px , padding drives the 56/64 circle) ─── */\n .ddga-floating-button--sm {\n padding: var(--ddga-space-4);\n }\n .ddga-floating-button--lg {\n padding: var(--ddga-space-5);\n }\n\n /* ─── Icon + label ─── */\n .ddga-floating-button__icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n .ddga-floating-button__icon svg {\n width: 24px;\n height: 24px;\n }\n .ddga-floating-button__text {\n white-space: nowrap;\n }\n\n /* ─── Variant: Primary (Primary-Brand — green) ─── */\n .ddga-floating-button--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-floating-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-hover);\n }\n .ddga-floating-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-active);\n }\n .ddga-floating-button--primary[aria-pressed='true'] {\n background-color: var(--ddga-sa-800);\n }\n\n /* ─── Variant: Black (Primary-Neutral — dark) ─── */\n .ddga-floating-button--black {\n background-color: var(--ddga-gray-950);\n color: #ffffff;\n }\n .ddga-floating-button--black:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-800);\n }\n .ddga-floating-button--black:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-600);\n }\n .ddga-floating-button--black[aria-pressed='true'] {\n background-color: var(--ddga-gray-700);\n }\n\n /* ─── Variant: Secondary (Secondary-Solid — gray; ink = #161616) ─── */\n .ddga-floating-button--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-text-primary);\n }\n .ddga-floating-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-floating-button--secondary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-floating-button--secondary[aria-pressed='true'] {\n background-color: var(--ddga-gray-200);\n }\n\n /* ─── Focus ring (single 3px ink ring, ~2px gap , SDGA \"Focus outline\" inset -5) ─── */\n .ddga-floating-button:focus-visible {\n outline: none;\n }\n .ddga-floating-button:focus-visible::after {\n content: '';\n position: absolute;\n inset: -5px;\n border: 3px solid var(--ddga-text-primary);\n border-radius: var(--ddga-radius-full);\n pointer-events: none;\n }\n .ddga-floating-button--on-color:focus-visible::after {\n border-color: #ffffff;\n }\n\n /* ─── Disabled (all styles → gray-200 fill / gray-400 ink, no opacity) ─── */\n .ddga-floating-button:disabled,\n .ddga-floating-button[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n }\n /* Dark: raw gray-200/400 don't flip → light-gray circle on dark. Remap (on-color keeps its own). */\n [data-theme='dark'] .ddga-floating-button:not(.ddga-floating-button--on-color):disabled,\n [data-theme='dark']\n .ddga-floating-button:not(.ddga-floating-button--on-color)[aria-disabled='true'] {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-500);\n }\n\n /* ─── On color (colored / dark surface) ─── */\n /* `primary` stays brand-green (only the focus ring flips white, above). `black`\n → white solid + dark icon; `secondary` → white-on-transparent. Both ramp on the\n alpha-white scale (= SDGA `button-background-oncolor-*` / `-transparent-*`;\n black-pressed = `alpha-white-60`, normalizing a one-cell Figma slip to gray-200). */\n .ddga-floating-button--on-color.ddga-floating-button--black {\n background-color: #ffffff;\n color: var(--ddga-text-primary);\n }\n .ddga-floating-button--on-color.ddga-floating-button--black:hover:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-80);\n }\n .ddga-floating-button--on-color.ddga-floating-button--black:active:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-60);\n }\n .ddga-floating-button--on-color.ddga-floating-button--black[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-70);\n }\n\n .ddga-floating-button--on-color.ddga-floating-button--secondary {\n background-color: transparent;\n color: #ffffff;\n }\n .ddga-floating-button--on-color.ddga-floating-button--secondary:hover:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-20);\n }\n .ddga-floating-button--on-color.ddga-floating-button--secondary:active:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-40);\n }\n .ddga-floating-button--on-color.ddga-floating-button--secondary[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-30);\n }\n\n /* On-color disabled (all styles): translucent-white fill + icon (overrides base). */\n .ddga-floating-button--on-color:disabled,\n .ddga-floating-button--on-color[aria-disabled='true'] {\n background-color: var(--ddga-alpha-white-20);\n color: var(--ddga-alpha-white-40);\n }\n\n @media (forced-colors: active) {\n /* Flat, borderless, shadowless → needs a system border to be distinguishable in HCM. */\n .ddga-floating-button {\n border: 1px solid ButtonText;\n }\n .ddga-floating-button:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-floating-button:disabled,\n .ddga-floating-button[aria-disabled='true'] {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA Notification — full-width actionable system banner (56px tonal bar). */\n .ddga-notification {\n --ddga-notification-fill: var(--ddga-gray-50);\n --ddga-notification-text: var(--ddga-gray-700);\n --ddga-notification-accent: var(--ddga-text-primary);\n --ddga-notification-line-opacity: 0.6;\n\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-6);\n border-radius: var(--ddga-radius-xs);\n background-color: var(--ddga-notification-fill);\n overflow: clip;\n font-family: inherit;\n }\n\n .ddga-notification--info {\n --ddga-notification-fill: var(--ddga-info-50);\n --ddga-notification-text: var(--ddga-info-700);\n --ddga-notification-accent: var(--ddga-info-600);\n --ddga-notification-line-opacity: 0.7;\n }\n .ddga-notification--success {\n --ddga-notification-fill: var(--ddga-success-50);\n --ddga-notification-text: var(--ddga-success-700);\n --ddga-notification-accent: var(--ddga-success-600);\n --ddga-notification-line-opacity: 0.7;\n }\n .ddga-notification--warning {\n --ddga-notification-fill: var(--ddga-warning-50);\n --ddga-notification-text: var(--ddga-warning-700);\n --ddga-notification-accent: var(--ddga-warning-600);\n --ddga-notification-line-opacity: 0.7;\n }\n .ddga-notification--critical {\n --ddga-notification-fill: var(--ddga-error-50);\n --ddga-notification-text: var(--ddga-error-700);\n --ddga-notification-accent: var(--ddga-error-600);\n --ddga-notification-line-opacity: 0.7;\n }\n\n .ddga-notification__title {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n inline-size: 100%;\n padding-inline: var(--ddga-space-6);\n }\n\n .ddga-notification__content {\n display: flex;\n flex: 1 0 0;\n flex-wrap: wrap;\n align-items: center;\n align-content: center;\n gap: var(--ddga-space-2);\n min-block-size: 40px;\n min-inline-size: 0;\n }\n\n .ddga-notification__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n color: var(--ddga-notification-accent);\n }\n .ddga-notification__icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n\n .ddga-notification__lead {\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: var(--ddga-font-weight-bold);\n color: var(--ddga-notification-text);\n white-space: nowrap;\n }\n\n .ddga-notification__message {\n flex: 1 0 0;\n min-inline-size: 0;\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n color: var(--ddga-notification-text);\n word-break: break-word;\n }\n\n .ddga-notification__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* Absolute close: top-trailing, optically inset past the title row's padding (SDGA right:-8 / top:4). */\n .ddga-notification__close {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-end: -8px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-notification__close > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-notification__close:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* Full-bleed 2px bottom accent line (clipped to radius by the container's overflow). */\n .ddga-notification__line {\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n block-size: 2px;\n background-color: var(--ddga-notification-accent);\n opacity: var(--ddga-notification-line-opacity);\n }\n\n /* SDGA is light-only — adapt to a dark surface, keeping the type accent legible. */\n [data-theme='dark'] .ddga-notification {\n --ddga-notification-fill: var(--ddga-gray-900, #111927);\n --ddga-notification-text: var(--ddga-gray-100);\n --ddga-notification-accent: var(--ddga-gray-400);\n }\n [data-theme='dark'] .ddga-notification--info {\n --ddga-notification-text: var(--ddga-info-300);\n --ddga-notification-accent: var(--ddga-info-400);\n }\n [data-theme='dark'] .ddga-notification--success {\n --ddga-notification-text: var(--ddga-success-300);\n --ddga-notification-accent: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-notification--warning {\n --ddga-notification-text: var(--ddga-warning-300);\n --ddga-notification-accent: var(--ddga-warning-400);\n }\n [data-theme='dark'] .ddga-notification--critical {\n --ddga-notification-text: var(--ddga-error-300);\n --ddga-notification-accent: var(--ddga-error-400);\n }\n [data-theme='dark'] .ddga-notification__close {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-notification__close:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-notification__close:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-gray-50);\n }\n\n @media (forced-colors: active) {\n .ddga-notification {\n border: 1px solid CanvasText;\n }\n .ddga-notification__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA Platforms Code parity. Size lives on the root (.ddga-pagination--{sm,md,lg})\n and cascades to the cells. The active page is a green underline bar (::after),\n NOT a filled pill; prev/next are icon-only square buttons; the overflow \"…\" is a\n bordered box (the trigger for the jump-to-page DropdownMenu). */\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-2);\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 /* ─── Cell (link / nav / overflow share this base) ─── */\n\n .ddga-pagination__link {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-inline-size: var(--_ddga-pg-box);\n block-size: var(--_ddga-pg-box);\n padding-inline: var(--_ddga-pg-pad);\n border: none;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n font-family: inherit;\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease;\n }\n\n .ddga-pagination__link:hover {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-pagination__link:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n .ddga-pagination__link[aria-disabled='true'] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n /* ─── Active (current page) — green underline bar ─── */\n\n .ddga-pagination__link--active::after {\n content: '';\n position: absolute;\n inset-block-end: var(--_ddga-pg-underline-bottom);\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inline-size: var(--_ddga-pg-underline-w);\n block-size: 3px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-primary);\n }\n [dir='rtl'] .ddga-pagination__link--active::after {\n transform: translateX(50%);\n }\n\n /* ─── Prev / Next (icon-only square button) ─── */\n\n .ddga-pagination__nav {\n padding-inline: 0;\n }\n\n .ddga-pagination__nav-icon {\n inline-size: 1.25em;\n block-size: 1.25em;\n }\n\n /* Directional arrows flip in RTL: prev points inline-start, next inline-end. */\n [dir='rtl'] .ddga-pagination__nav-icon {\n transform: scaleX(-1);\n }\n\n /* ─── Ellipsis (static) + Overflow (interactive) — bordered \"…\" box ─── */\n\n .ddga-pagination__ellipsis,\n .ddga-pagination__overflow {\n box-sizing: border-box;\n border: 1px solid var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-pagination__ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: var(--_ddga-pg-box);\n block-size: var(--_ddga-pg-box);\n color: var(--ddga-text-primary);\n }\n\n /* Open / focus → 2px border (border-box keeps the cell size stable). */\n .ddga-pagination__overflow[data-state='open'],\n .ddga-pagination__overflow:focus-visible {\n background-color: var(--ddga-color-muted);\n border-width: 2px;\n }\n .ddga-pagination__overflow:focus-visible {\n box-shadow: none;\n }\n\n .ddga-pagination__ellipsis-icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Jump-to-page menu (SDGA \"Opened\" overflow — pixel-matched) ─── */\n\n .ddga-pagination__menu {\n box-sizing: border-box;\n padding: var(--ddga-space-1); /* 4px */\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-input); /* gray-300 #D2D6DB */\n border-radius: var(--ddga-radius-sm); /* 4px */\n box-shadow: var(--ddga-shadow-xl);\n font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n .ddga-pagination__menu-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2); /* 8px */\n box-sizing: border-box;\n inline-size: 3.75rem; /* SDGA item 60px */\n padding: var(--ddga-space-2); /* 8px */\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm); /* 14px */\n line-height: 1.4;\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n\n /* Radix sets data-highlighted on the focused/hovered item. */\n .ddga-pagination__menu-item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-pagination__menu-label {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n .ddga-pagination__menu-check {\n flex-shrink: 0;\n inline-size: 1.25rem; /* SDGA check 20px */\n block-size: 1.25rem;\n color: var(--ddga-text-primary);\n }\n\n @media (forced-colors: active) {\n .ddga-pagination__menu {\n border: 1px solid CanvasText;\n }\n .ddga-pagination__menu-item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-pagination--sm {\n --_ddga-pg-box: 1.5rem; /* 24px */\n --_ddga-pg-pad: var(--ddga-space-1); /* 4px */\n --_ddga-pg-underline-w: 1rem; /* 16px */\n --_ddga-pg-underline-bottom: 1px;\n }\n .ddga-pagination--md {\n --_ddga-pg-box: 2rem; /* 32px */\n --_ddga-pg-pad: 0.375rem; /* SDGA 6px — no spacing token */\n --_ddga-pg-underline-w: 1.5rem; /* 24px */\n --_ddga-pg-underline-bottom: 2px;\n }\n .ddga-pagination--lg {\n --_ddga-pg-box: 2.5rem; /* 40px */\n --_ddga-pg-pad: var(--ddga-space-2); /* 8px */\n --_ddga-pg-underline-w: 1.5rem; /* 24px */\n --_ddga-pg-underline-bottom: 3px;\n }\n\n .ddga-pagination--sm .ddga-pagination__link,\n .ddga-pagination--sm .ddga-pagination__ellipsis {\n font-size: var(--ddga-font-size-sm); /* 14px */\n }\n .ddga-pagination--md .ddga-pagination__link,\n .ddga-pagination--md .ddga-pagination__ellipsis,\n .ddga-pagination--lg .ddga-pagination__link,\n .ddga-pagination--lg .ddga-pagination__ellipsis {\n font-size: var(--ddga-font-size-base); /* 16px */\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 }\n .ddga-pagination__link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-pagination__link--active::after {\n background-color: Highlight;\n }\n .ddga-pagination__ellipsis,\n .ddga-pagination__overflow {\n border-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. 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 /* SDGA \"Slideout Menu\" — slide-in nav panel on Radix Dialog; overlay/animation mirror Drawer, rows mirror DropdownMenu. */\n\n .ddga-slideout-menu__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Same z-stack as Modal/Drawer (60 overlay / 61 panel). */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n .ddga-slideout-menu__overlay[data-state='open'] {\n animation-name: ddga-slideout-menu-overlay-in;\n }\n .ddga-slideout-menu__overlay[data-state='closed'] {\n animation-name: ddga-slideout-menu-overlay-out;\n }\n @keyframes ddga-slideout-menu-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-slideout-menu-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─ Panel ─ */\n\n .ddga-slideout-menu {\n position: fixed;\n inset-block: 0;\n z-index: 61;\n display: flex;\n flex-direction: column;\n inline-size: min(346px, 100vw);\n color: var(--ddga-text-primary);\n overflow: hidden;\n animation-duration: 220ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .ddga-slideout-menu--gray {\n background-color: var(--ddga-color-muted);\n }\n .ddga-slideout-menu--white {\n background-color: var(--ddga-color-background);\n }\n\n /* Logical side — start/end flip with `dir`. */\n .ddga-slideout-menu--start {\n inset-inline-start: 0;\n border-inline-end: 1px solid var(--ddga-color-input);\n }\n .ddga-slideout-menu--end {\n inset-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-input);\n }\n\n .ddga-slideout-menu--start[data-state='open'] {\n animation-name: ddga-slideout-menu-in-start;\n }\n .ddga-slideout-menu--start[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-start;\n }\n .ddga-slideout-menu--end[data-state='open'] {\n animation-name: ddga-slideout-menu-in-end;\n }\n .ddga-slideout-menu--end[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-end;\n }\n @keyframes ddga-slideout-menu-in-start {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-slideout-menu-out-start {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n @keyframes ddga-slideout-menu-in-end {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-slideout-menu-out-end {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n }\n /* RTL flips the physical translate so each logical side emerges correctly. */\n [dir='rtl'] .ddga-slideout-menu--start[data-state='open'] {\n animation-name: ddga-slideout-menu-in-end;\n }\n [dir='rtl'] .ddga-slideout-menu--start[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-end;\n }\n [dir='rtl'] .ddga-slideout-menu--end[data-state='open'] {\n animation-name: ddga-slideout-menu-in-start;\n }\n [dir='rtl'] .ddga-slideout-menu--end[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-start;\n }\n\n /* ─ Header (pinned strip) ─ */\n\n .ddga-slideout-menu__header {\n flex-shrink: 0;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-4);\n background-color: var(--ddga-gray-50);\n }\n .ddga-slideout-menu__header-content {\n display: flex;\n flex: 1 1 auto;\n min-inline-size: 0;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n .ddga-slideout-menu__header-text {\n display: flex;\n flex: 1 1 auto;\n min-inline-size: 0;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n .ddga-slideout-menu__featured-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-50);\n color: var(--ddga-color-primary);\n }\n .ddga-slideout-menu__featured-icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-slideout-menu__title {\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-primary);\n }\n .ddga-slideout-menu__description {\n margin: 0;\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-slideout-menu__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 20px;\n block-size: 20px;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n cursor: pointer;\n font: inherit;\n }\n .ddga-slideout-menu__close:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-slideout-menu__close:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 2px;\n }\n .ddga-slideout-menu__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n\n /* ─ Body (scroll region) ─ */\n\n .ddga-slideout-menu__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n /* 80px bottom — SDGA `spacing-8xl`; no token (scale stops at 64px). */\n padding-block: var(--ddga-space-4) 5rem;\n padding-inline: var(--ddga-space-4);\n scrollbar-width: thin;\n scrollbar-color: var(--ddga-gray-300) transparent;\n }\n .ddga-slideout-menu__body::-webkit-scrollbar {\n inline-size: 8px;\n }\n .ddga-slideout-menu__body::-webkit-scrollbar-thumb {\n background-color: var(--ddga-gray-300);\n border-radius: var(--ddga-radius-full);\n }\n\n /* ─ Group + label + list ─ */\n\n .ddga-slideout-menu__group {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n .ddga-slideout-menu__group-label {\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-bold);\n color: var(--ddga-gray-800);\n }\n .ddga-slideout-menu__list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n .ddga-slideout-menu__item-wrapper {\n display: block;\n }\n\n /* ─ Item (button / link row) ─ */\n\n .ddga-slideout-menu__item {\n display: flex;\n inline-size: 100%;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n font: inherit;\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-slideout-menu__item:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-slideout-menu__item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-slideout-menu__item:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n }\n /* Current page (SDGA selected row): SA-50 tint + brand-green label/icons. */\n .ddga-slideout-menu__item[data-active] {\n background-color: var(--ddga-sa-50);\n color: var(--ddga-color-primary);\n }\n .ddga-slideout-menu__item-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n color: inherit;\n }\n .ddga-slideout-menu__item-icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-slideout-menu__item-label {\n flex: 1 1 auto;\n min-inline-size: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n /* Trailing slot — the SDGA \"+99\" counter (gray-500); icon/check trailings\n recolour with the row when it is the current page. */\n .ddga-slideout-menu__item-trailing {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n margin-inline-start: auto;\n min-block-size: 24px;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n color: var(--ddga-text-tertiary);\n }\n .ddga-slideout-menu__item-trailing > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-slideout-menu__item[data-active] .ddga-slideout-menu__item-trailing {\n color: inherit;\n }\n\n /* ─ Separator (between groups) ─ */\n\n .ddga-slideout-menu__separator {\n flex-shrink: 0;\n block-size: 1px;\n background-color: var(--ddga-color-input);\n }\n\n /* ─ Footer (actions) — transparent, top divider, leading-aligned ─ */\n\n .ddga-slideout-menu__footer {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-4);\n padding: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-input);\n }\n\n /* ─ Dark mode (raw light-ramp values → flipping tokens; semantic tokens self-adapt) ─ */\n\n [data-theme='dark'] .ddga-slideout-menu__header {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-slideout-menu__group-label {\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-slideout-menu__featured-icon {\n background-color: var(--ddga-alpha-white-10);\n color: var(--ddga-sa-400);\n }\n [data-theme='dark'] .ddga-slideout-menu__item:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-slideout-menu__item:active {\n background-color: var(--ddga-gray-700);\n }\n [data-theme='dark'] .ddga-slideout-menu__item[data-active] {\n background-color: rgb(27 131 84 / 0.18);\n color: var(--ddga-sa-400);\n }\n\n /* ─ Reduced motion ─ */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-slideout-menu,\n .ddga-slideout-menu__overlay {\n animation: none;\n }\n }\n\n /* ─ Forced colors ─ */\n\n @media (forced-colors: active) {\n .ddga-slideout-menu {\n border: 1px solid CanvasText;\n }\n .ddga-slideout-menu__separator {\n background-color: CanvasText;\n }\n .ddga-slideout-menu__footer {\n border-block-start-color: CanvasText;\n }\n .ddga-slideout-menu__item:hover,\n .ddga-slideout-menu__item[data-active] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-slideout-menu__item:focus-visible,\n .ddga-slideout-menu__close:focus-visible {\n outline-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n .ddga-charts {\n --ddga-charts-axis: var(--ddga-gray-700);\n --ddga-charts-grid: var(--ddga-gray-100);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n margin: 0;\n font-family: inherit;\n color: var(--ddga-charts-axis);\n }\n\n /* Pie/donut: disk centered above a centered legend, 24px apart. */\n .ddga-charts--pie {\n align-items: center;\n gap: var(--ddga-space-6);\n }\n\n .ddga-charts__plot {\n display: block;\n max-inline-size: 100%;\n block-size: auto;\n }\n .ddga-charts--line .ddga-charts__plot,\n .ddga-charts--bar .ddga-charts__plot {\n inline-size: 100%;\n }\n .ddga-charts__plot text {\n font-family: inherit;\n }\n\n .ddga-charts__legend {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ddga-space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n color: var(--ddga-charts-axis);\n }\n /* Line/bar legends sit at the top, trailing edge (SDGA). */\n .ddga-charts--line .ddga-charts__legend,\n .ddga-charts--bar .ddga-charts__legend {\n justify-content: flex-end;\n }\n .ddga-charts--pie .ddga-charts__legend {\n justify-content: center;\n }\n\n .ddga-charts__legend-item {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n .ddga-charts__mark {\n inline-size: 8px;\n block-size: 8px;\n border-radius: var(--ddga-radius-full);\n flex-shrink: 0;\n }\n\n .ddga-charts__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 white-space: nowrap;\n border: 0;\n }\n\n /* Dark: lighten axis text + gridlines so they read on a dark surface. */\n [data-theme='dark'] .ddga-charts {\n --ddga-charts-axis: var(--ddga-gray-300);\n --ddga-charts-grid: var(--ddga-gray-800);\n }\n\n /* Data-viz colours must survive Windows High Contrast (else every series flattens to one colour). */\n @media (forced-colors: active) {\n .ddga-charts__plot,\n .ddga-charts__mark {\n forced-color-adjust: none;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA Platforms Code parity. The Carousel is navigation chrome around swappable\n content: a clipping viewport + a translating track, plus dot indicators and/or\n round chevron arrow buttons. Layout is a grid keyed off `controls` so the parts\n can be composed in any order. All values resolve to existing tokens (0 gaps). */\n\n /* ─── Shell (layout per `controls`) ─── */\n\n .ddga-carousel {\n display: grid;\n box-sizing: border-box;\n padding-inline: var(--ddga-space-6); /* 24px */\n padding-block: var(--ddga-space-8); /* 32px */\n }\n\n .ddga-carousel--dots {\n grid-template-areas: 'viewport' 'dots';\n row-gap: var(--ddga-space-6); /* 24px */\n justify-items: center;\n }\n\n .ddga-carousel--arrows {\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'prev viewport next';\n align-items: center;\n column-gap: 2.75rem; /* SDGA 44px — no spacing token */\n }\n\n .ddga-carousel--both {\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'prev viewport next' 'dots dots dots';\n align-items: center;\n column-gap: 2.75rem; /* SDGA 44px — no spacing token */\n row-gap: var(--ddga-space-6);\n justify-items: center;\n }\n\n .ddga-carousel [data-slot='carousel-previous'] {\n grid-area: prev;\n }\n .ddga-carousel [data-slot='carousel-next'] {\n grid-area: next;\n }\n .ddga-carousel [data-slot='carousel-viewport'] {\n grid-area: viewport;\n justify-self: stretch;\n }\n .ddga-carousel [data-slot='carousel-dots'] {\n grid-area: dots;\n }\n\n /* ─── Viewport + track + slide ─── */\n\n .ddga-carousel__viewport {\n overflow: hidden;\n inline-size: 100%;\n min-inline-size: 0;\n touch-action: pan-y;\n }\n\n /* Index drives the track via a unitless custom property so the inline style is\n SSR-safe (no layout read); the sign flips in RTL purely in CSS. */\n .ddga-carousel__track {\n display: flex;\n inline-size: 100%;\n transform: translateX(calc(var(--ddga-carousel-index, 0) * -100%));\n transition: transform 300ms ease;\n will-change: transform;\n }\n [dir='rtl'] .ddga-carousel__track {\n transform: translateX(calc(var(--ddga-carousel-index, 0) * 100%));\n }\n\n .ddga-carousel__slide {\n flex: 0 0 100%;\n min-inline-size: 0;\n box-sizing: border-box;\n }\n\n /* ─── Dots ─── */\n\n .ddga-carousel__dots {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2); /* 8px */\n padding: var(--ddga-space-3); /* 12px */\n border-radius: var(--ddga-radius-full);\n }\n .ddga-carousel__dots--bare {\n padding: 0;\n }\n\n .ddga-carousel__dot {\n flex-shrink: 0;\n padding: 0;\n border: none;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-border); /* #E5E7EB gray-200 */\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-carousel__dot[data-active] {\n background-color: var(--ddga-color-primary); /* #1B8354 SA-600 */\n }\n .ddga-carousel__dot:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 2px;\n }\n\n .ddga-carousel__dots--sm .ddga-carousel__dot {\n inline-size: 8px;\n block-size: 8px;\n }\n .ddga-carousel__dots--md .ddga-carousel__dot {\n inline-size: 12px;\n block-size: 12px;\n }\n .ddga-carousel__dots--lg .ddga-carousel__dot {\n inline-size: 16px;\n block-size: 16px;\n }\n\n /* ─── Arrow buttons (round chevron; ramps reuse the Button tokens) ─── */\n\n .ddga-carousel__nav {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--ddga-radius-full);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-carousel__nav-icon {\n inline-size: 24px;\n block-size: 24px;\n }\n /* Chevrons point inline-start (prev) / inline-end (next); mirror in RTL. */\n [dir='rtl'] .ddga-carousel__nav-icon {\n transform: scaleX(-1);\n }\n\n .ddga-carousel__nav--sm {\n inline-size: 32px;\n block-size: 32px;\n }\n .ddga-carousel__nav--md {\n inline-size: 40px;\n block-size: 40px;\n }\n .ddga-carousel__nav--lg {\n inline-size: 48px;\n block-size: 48px;\n }\n\n /* Primary — filled green */\n .ddga-carousel__nav--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-carousel__nav--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-hover); /* #166A45 SA-700 */\n }\n .ddga-carousel__nav--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-active); /* #104631 SA-900 */\n }\n .ddga-carousel__nav--primary:disabled,\n .ddga-carousel__nav--primary[aria-disabled='true'] {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n /* Subtle — transparent, ink chevron */\n .ddga-carousel__nav--subtle {\n background-color: transparent;\n color: var(--ddga-text-primary); /* #161616 */\n }\n .ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-100); /* #F3F4F6 */\n }\n .ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-200); /* #E5E7EB */\n }\n .ddga-carousel__nav--subtle:disabled,\n .ddga-carousel__nav--subtle[aria-disabled='true'] {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n /* Focus ring — single 3px ink ring, ~2px gap (SDGA \"Focus outline\", inset -5). */\n .ddga-carousel__nav:focus-visible {\n outline: none;\n }\n .ddga-carousel__nav:focus-visible::after {\n content: '';\n position: absolute;\n inset: -5px;\n border: 3px solid var(--ddga-text-primary);\n border-radius: var(--ddga-radius-full);\n pointer-events: none;\n }\n\n /* Dark: raw gray tints don't flip → subtle hover/active would be near-white behind the white\n icon; primary-disabled would be a bright light circle. Remap to semantic dark grays. */\n [data-theme='dark'] .ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark']\n .ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-carousel__nav--primary:disabled,\n [data-theme='dark'] .ddga-carousel__nav--primary[aria-disabled='true'] {\n background-color: var(--ddga-color-muted);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-carousel__track,\n .ddga-carousel__dot,\n .ddga-carousel__nav {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-carousel__dot[data-active] {\n background-color: Highlight;\n }\n .ddga-carousel__dot:focus-visible,\n .ddga-carousel__nav:focus-visible::after {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-carousel__nav:disabled,\n .ddga-carousel__nav[aria-disabled='true'] {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Trigger — the black \"Filter\" button; chevron flips when the panel is open. */\n .ddga-filtration__trigger .ddga-button__icon:last-child {\n transition: transform 150ms ease;\n }\n .ddga-filtration__trigger[data-state='open'] .ddga-button__icon:last-child {\n transform: rotate(180deg);\n }\n\n /* Panel — 320px stack, SDGA `radius-sm`. Sections own their insets; an 8px gap\n plus explicit inset hairlines separate every child. Overlay reuses\n .ddga-popover's surface (border/shadow/bg); inline draws its own. */\n .ddga-filtration-panel {\n inline-size: 20rem;\n max-inline-size: 20rem;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n overflow: clip;\n }\n\n .ddga-popover.ddga-filtration-panel {\n max-block-size: var(--radix-popover-content-available-height);\n overflow-y: auto;\n }\n\n .ddga-filtration-panel--inline {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n }\n\n /* Hairline between panel children — 304px (inset 8px each side), floating in\n the 8px inter-child gap. */\n .ddga-filtration__divider {\n block-size: 1px;\n margin-inline: var(--ddga-space-2);\n background-color: var(--ddga-color-input);\n }\n\n /* Section — labelled filter group: 16/8 padding, 20px label↔body gap. */\n .ddga-filtration-section {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-5);\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-2);\n }\n\n .ddga-filtration-section__label {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n }\n\n .ddga-filtration-section__count {\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-tertiary);\n }\n\n /* Checkbox filter — searchable, collapsible multi-select group. */\n .ddga-filtration-checkbox-filter {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-filtration-checkbox-filter__list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-filtration-checkbox-filter__count {\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-filtration-checkbox-filter__more {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n align-self: flex-start;\n padding-block: var(--ddga-space-1);\n padding-inline: 0;\n border: 0;\n background: none;\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n cursor: pointer;\n }\n\n .ddga-filtration-checkbox-filter__more: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-filtration-checkbox-filter__more-icon {\n inline-size: 1rem;\n block-size: 1rem;\n transition: transform 150ms ease;\n }\n .ddga-filtration-checkbox-filter__more-icon.is-open {\n transform: rotate(180deg);\n }\n\n /* Option list — single-select rows with a trailing check (Radix RadioGroup). */\n .ddga-filtration-option-list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-filtration-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding: var(--ddga-space-2);\n border: 0;\n background: none;\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n text-align: start;\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-filtration-option:hover {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-filtration-option:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n\n .ddga-filtration-option__indicator {\n display: inline-flex;\n color: var(--ddga-color-primary);\n }\n\n .ddga-filtration-option__check {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n\n /* Results — row of dismissible filter chips under the trigger. */\n .ddga-filtration-results {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ddga-space-2);\n margin-block-start: var(--ddga-space-2);\n }\n\n /* Footer — Apply (green, grows) + Clear. 56px (40px buttons + 8px inset). */\n .ddga-filtration-footer {\n display: flex;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-filtration-footer__apply {\n flex: 1;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-filtration__trigger .ddga-button__icon:last-child,\n .ddga-filtration-checkbox-filter__more-icon {\n transition-duration: 0ms;\n }\n }\n\n /* Dark mode: the inline surface uses semantic --ddga-color-* tokens, which\n remap in dark.css — no override needed. */\n\n @media (forced-colors: active) {\n .ddga-filtration-panel--inline {\n border: 1px solid CanvasText;\n }\n .ddga-filtration__divider {\n background-color: CanvasText;\n }\n .ddga-filtration-checkbox-filter__more:focus-visible,\n .ddga-filtration-option:focus-visible {\n outline: 2px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n box-sizing: border-box;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n font-family: inherit;\n font-weight: var(--ddga-font-weight-medium);\n white-space: nowrap;\n cursor: pointer;\n background-color: var(--ddga-chip-bg);\n color: var(--ddga-chip-fg);\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n .ddga-chip--rounded {\n border-radius: var(--ddga-radius-full);\n }\n\n /* Sizes: 20 / 24 / 32 (SDGA). Inline pad 12px all sizes; x-Small 10/600/14, Medium 12/500/18, Large 16/500/24. */\n .ddga-chip--sm {\n block-size: 20px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-2xs);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n }\n .ddga-chip--md {\n block-size: 24px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n }\n .ddga-chip--lg {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n }\n\n .ddga-chip__icon {\n display: inline-flex;\n flex-shrink: 0;\n }\n .ddga-chip__icon > svg {\n inline-size: 14px;\n block-size: 14px;\n }\n .ddga-chip--lg .ddga-chip__icon > svg {\n inline-size: 16px;\n block-size: 16px;\n }\n\n /* ── Primary (subtle SA-green → fills SA-600 when selected) ── */\n .ddga-chip--primary {\n --ddga-chip-bg: var(--ddga-sa-50);\n --ddga-chip-fg: var(--ddga-sa-800);\n }\n .ddga-chip--primary:hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-sa-200);\n }\n .ddga-chip--primary:active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-sa-400);\n --ddga-chip-fg: var(--ddga-sa-900);\n }\n .ddga-chip--primary[aria-pressed='true'] {\n --ddga-chip-bg: var(--ddga-sa-600);\n --ddga-chip-fg: #ffffff;\n }\n .ddga-chip--primary[aria-pressed='true']:hover:not(:disabled) {\n --ddga-chip-bg: var(--ddga-sa-700);\n }\n .ddga-chip--primary[aria-pressed='true']:active:not(:disabled) {\n --ddga-chip-bg: var(--ddga-sa-900);\n }\n\n /* ── Neutral (gray → fills gray-700 when selected) ── */\n .ddga-chip--neutral {\n --ddga-chip-bg: var(--ddga-gray-100);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--neutral:hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-200);\n }\n .ddga-chip--neutral:active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-300);\n }\n .ddga-chip--neutral[aria-pressed='true'] {\n --ddga-chip-bg: var(--ddga-gray-700);\n --ddga-chip-fg: #ffffff;\n }\n .ddga-chip--neutral[aria-pressed='true']:hover:not(:disabled) {\n --ddga-chip-bg: var(--ddga-gray-800);\n }\n .ddga-chip--neutral[aria-pressed='true']:active:not(:disabled) {\n --ddga-chip-bg: var(--ddga-gray-950);\n }\n\n /* Focus: 2px SDGA ink ring. */\n .ddga-chip:focus-visible {\n outline: 2px solid var(--ddga-color-focus-ring);\n outline-offset: 2px;\n }\n\n /* Disabled: recolour (no opacity), SDGA. `[aria-disabled]` covers asChild mode;\n pointer-events:none stops hover/active from firing on it. */\n .ddga-chip:disabled,\n .ddga-chip[aria-disabled='true'] {\n cursor: not-allowed;\n pointer-events: none;\n --ddga-chip-bg: var(--ddga-gray-200);\n --ddga-chip-fg: var(--ddga-gray-400);\n }\n\n /* ── On-color: chip on a colored/dark surface. Style-agnostic — SDGA renders Primary and\n Neutral identically here: a white-ramp pill with ink text (`chip-background-on-color-*`).\n Placed after the base states so it wins by source order; theme-independent (dark rules below\n exclude it), since a colored surface looks the same in either theme. ── */\n .ddga-chip--on-color {\n --ddga-chip-bg: #ffffff;\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--on-color:hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-alpha-white-80);\n }\n .ddga-chip--on-color:active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-alpha-white-60);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--on-color[aria-pressed='true'] {\n --ddga-chip-bg: var(--ddga-alpha-white-70);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--on-color[aria-pressed='true']:hover:not(:disabled) {\n --ddga-chip-bg: var(--ddga-alpha-white-80);\n }\n .ddga-chip--on-color[aria-pressed='true']:active:not(:disabled) {\n --ddga-chip-bg: var(--ddga-alpha-white-60);\n }\n .ddga-chip--on-color:disabled,\n .ddga-chip--on-color[aria-disabled='true'] {\n --ddga-chip-bg: var(--ddga-alpha-white-20);\n --ddga-chip-fg: var(--ddga-alpha-white-40);\n }\n\n /* Dark: neutral + subtle-primary surfaces flip (selected brand-green fill stays).\n Exclude on-color — it owns its full white-ramp treatment in both themes. */\n [data-theme='dark'] .ddga-chip--neutral:not(.ddga-chip--on-color) {\n --ddga-chip-bg: var(--ddga-gray-800);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-chip--neutral:not(.ddga-chip--on-color):hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-700);\n }\n [data-theme='dark']\n .ddga-chip--neutral:not(.ddga-chip--on-color):active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-600);\n }\n [data-theme='dark'] .ddga-chip--primary:not(.ddga-chip--on-color):not([aria-pressed='true']) {\n --ddga-chip-bg: color-mix(in srgb, var(--ddga-sa-600) 20%, transparent);\n --ddga-chip-fg: var(--ddga-sa-200);\n }\n [data-theme='dark']\n .ddga-chip--primary:not(.ddga-chip--on-color):hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: color-mix(in srgb, var(--ddga-sa-600) 30%, transparent);\n }\n [data-theme='dark']\n .ddga-chip--primary:not(.ddga-chip--on-color):active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: color-mix(in srgb, var(--ddga-sa-600) 40%, transparent);\n --ddga-chip-fg: var(--ddga-sa-200);\n }\n [data-theme='dark'] .ddga-chip:not(.ddga-chip--on-color):disabled,\n [data-theme='dark'] .ddga-chip:not(.ddga-chip--on-color)[aria-disabled='true'] {\n --ddga-chip-bg: var(--ddga-gray-800);\n --ddga-chip-fg: var(--ddga-gray-500);\n }\n\n @media (forced-colors: active) {\n .ddga-chip {\n border: 1px solid ButtonText;\n }\n .ddga-chip[aria-pressed='true'] {\n border-color: Highlight;\n }\n .ddga-chip:disabled,\n .ddga-chip[aria-disabled='true'] {\n color: GrayText;\n border-color: GrayText;\n }\n .ddga-chip:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* ─ Symbol (glyph) ─ */\n\n .ddga-riyal-symbol {\n display: inline-block;\n block-size: 1em;\n inline-size: auto;\n vertical-align: -0.125em;\n color: inherit;\n }\n\n .ddga-riyal-symbol--2xs {\n font-size: var(--ddga-font-size-2xs);\n }\n .ddga-riyal-symbol--xs {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-riyal-symbol--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-riyal-symbol--base {\n font-size: var(--ddga-font-size-base);\n }\n .ddga-riyal-symbol--lg {\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-riyal-symbol--xl {\n font-size: var(--ddga-font-size-xl);\n }\n .ddga-riyal-symbol--2xl {\n font-size: var(--ddga-font-size-2xl);\n }\n .ddga-riyal-symbol--3xl {\n font-size: var(--ddga-font-size-3xl);\n }\n\n .ddga-riyal-symbol--muted {\n color: var(--ddga-text-secondary);\n }\n .ddga-riyal-symbol--brand {\n color: var(--ddga-color-primary);\n }\n .ddga-riyal-symbol--success {\n color: var(--ddga-color-success);\n }\n .ddga-riyal-symbol--error {\n color: var(--ddga-color-error);\n }\n .ddga-riyal-symbol--inverted {\n color: var(--ddga-alpha-white-90);\n }\n\n /* Coin: symbol centered in a filled disc with ⅓-height clear space (SDGA rules 9–10). */\n .ddga-riyal-symbol--coin {\n box-sizing: content-box;\n inline-size: 1em;\n block-size: 1em;\n padding: 0.334em;\n border-radius: 50%;\n vertical-align: middle;\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--muted {\n background-color: var(--ddga-text-secondary);\n color: var(--ddga-color-background);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--brand {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--error {\n background-color: var(--ddga-color-error);\n color: var(--ddga-color-error-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--inverted {\n background-color: var(--ddga-alpha-white-90);\n color: var(--ddga-color-primary);\n }\n\n /* ─ Amount (symbol + number) ─ */\n\n .ddga-riyal {\n display: inline-flex;\n align-items: center;\n gap: 0.25em;\n color: inherit;\n }\n\n .ddga-riyal__value {\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-riyal--2xs {\n font-size: var(--ddga-font-size-2xs);\n }\n .ddga-riyal--xs {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-riyal--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-riyal--base {\n font-size: var(--ddga-font-size-base);\n }\n .ddga-riyal--lg {\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-riyal--xl {\n font-size: var(--ddga-font-size-xl);\n }\n .ddga-riyal--2xl {\n font-size: var(--ddga-font-size-2xl);\n }\n .ddga-riyal--3xl {\n font-size: var(--ddga-font-size-3xl);\n }\n\n .ddga-riyal--muted {\n color: var(--ddga-text-secondary);\n }\n .ddga-riyal--brand {\n color: var(--ddga-color-primary);\n }\n .ddga-riyal--success {\n color: var(--ddga-color-success);\n }\n .ddga-riyal--error {\n color: var(--ddga-color-error);\n }\n .ddga-riyal--inverted {\n color: var(--ddga-alpha-white-90);\n }\n\n /* Keep the filled coin discs visible in Windows High Contrast (backgrounds are dropped). */\n @media (forced-colors: active) {\n .ddga-riyal-symbol--coin {\n outline: 1px solid;\n }\n }\n}\n","@layer ddga-components {\n /* Always LTR (forced at the root); code + gutter share one line-height so numbers stay aligned. */\n .ddga-code-snippet {\n --ddga-code-snippet-line-height: 1.5rem;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-xl);\n overflow: clip;\n }\n\n /* Tab bar flush against the body (drop the Tabs wrapper gap); rail spans the card. */\n .ddga-code-snippet__tabs {\n gap: 0;\n }\n .ddga-code-snippet__tab-list {\n inline-size: 100%;\n }\n .ddga-code-snippet .ddga-tabs__trigger {\n padding-block: var(--ddga-space-4); /* SDGA tab padding 16px (md default 12) */\n }\n .ddga-code-snippet__tab-content {\n margin: 0;\n padding: 0;\n }\n\n .ddga-code-snippet__panel {\n position: relative;\n display: flex;\n flex-direction: column;\n }\n\n .ddga-code-snippet__viewport {\n display: flex;\n align-items: stretch;\n overflow: hidden;\n }\n .ddga-code-snippet__viewport--collapsed {\n max-block-size: calc(\n var(--ddga-code-snippet-max-lines) * var(--ddga-code-snippet-line-height) +\n var(--ddga-space-6)\n );\n }\n\n .ddga-code-snippet__gutter {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding: var(--ddga-space-6);\n background-color: var(--ddga-gray-50);\n border-inline-end: 1px solid var(--ddga-color-border);\n font-family: var(--ddga-font-mono);\n font-weight: 700;\n font-size: 1rem;\n line-height: var(--ddga-code-snippet-line-height);\n color: var(--ddga-gray-500);\n text-align: end;\n user-select: none;\n }\n .ddga-code-snippet__line-number {\n display: block;\n }\n\n .ddga-code-snippet__scroll {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow-x: auto;\n padding-block: var(--ddga-space-6) var(--ddga-space-8);\n /* reserve inline-end room so the copy button never overlaps code */\n padding-inline: var(--ddga-space-6) calc(var(--ddga-space-6) + 2.5rem);\n }\n\n .ddga-code-snippet__code {\n margin: 0;\n font-family: var(--ddga-font-mono);\n font-weight: 500;\n font-size: 1rem;\n line-height: var(--ddga-code-snippet-line-height);\n color: var(--ddga-text-primary);\n }\n .ddga-code-snippet__code code {\n font: inherit;\n }\n .ddga-code-snippet__line {\n display: block;\n white-space: pre;\n }\n .ddga-code-snippet__line:empty::after {\n content: '\\200B';\n }\n .ddga-code-snippet__line--comment {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-code-snippet__copy-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: 0;\n background-color: transparent;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-primary);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-code-snippet__copy-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-code-snippet__copy-button:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-code-snippet__copy-button--md {\n inline-size: 2.5rem;\n block-size: 2.5rem;\n }\n .ddga-code-snippet__copy-button--md > svg {\n inline-size: 1.5rem;\n block-size: 1.5rem;\n }\n .ddga-code-snippet__copy-button--sm {\n inline-size: 2rem;\n block-size: 2rem;\n }\n .ddga-code-snippet__copy-button--sm > svg {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n /* Block copy floats at the top inline-end of the panel. */\n .ddga-code-snippet__panel > .ddga-code-snippet__copy-button {\n position: absolute;\n inset-block-start: var(--ddga-space-4);\n inset-inline-end: var(--ddga-space-4);\n z-index: 1;\n }\n\n .ddga-code-snippet__show-more {\n align-self: flex-end;\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n margin-block: var(--ddga-space-2) var(--ddga-space-6);\n margin-inline-end: var(--ddga-space-6);\n block-size: 2rem;\n padding-inline: var(--ddga-space-3);\n border: 0;\n background-color: transparent;\n border-radius: var(--ddga-radius-sm);\n font-weight: 500;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-text-primary);\n cursor: pointer;\n }\n .ddga-code-snippet__show-more:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-code-snippet__show-more:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-code-snippet__show-more-icon {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n transition: transform 150ms ease;\n }\n .ddga-code-snippet__show-more-icon--up {\n transform: rotate(180deg);\n }\n\n .ddga-code-snippet-inline {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-6);\n padding: var(--ddga-space-6);\n background-color: var(--ddga-color-card);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-xl);\n }\n .ddga-code-snippet-inline__text {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n overflow-x: auto;\n font-family: var(--ddga-font-mono);\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5rem;\n white-space: nowrap;\n }\n .ddga-code-snippet-inline__prefix {\n flex-shrink: 0;\n color: var(--ddga-gold-600);\n }\n .ddga-code-snippet-inline__command {\n color: var(--ddga-color-primary);\n }\n\n /* Raw surfaces don't auto-adapt; ink/comments do via tokens. */\n [data-theme='dark'] .ddga-code-snippet__gutter {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-code-snippet__line-number {\n color: var(--ddga-text-tertiary);\n }\n\n /* High-contrast: keep card/gutter edges visible. */\n @media (forced-colors: active) {\n .ddga-code-snippet,\n .ddga-code-snippet-inline {\n border-color: CanvasText;\n }\n .ddga-code-snippet__gutter {\n border-inline-end-color: CanvasText;\n }\n }\n}\n"],"names":[]}
1
+ {"version":3,"mappings":"AAAA,iBCAA,+9LA2MA,mMQxMA,8jEQFA,seAgBA,0fAgBA,ugBAgBA,iiBAgBA,iiBAgBA,0fAgBA,6fAgBA,8iBCjHA,0DAQA,2MAWA,wCAQA,4KAkBA,gDlB7CA,uB0BKE,uEAMA,iFAMA,8DAIA,0DAIA,+FAMA,4DE5BA,4VAqBA,4GAIA,sHAMA,kHAIA,0HAMA,qEAIA,yGAMA,qHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,gIAKA,uHAMA,2GAIA,uHAMA,2FAIA,qHAMA,6EAGA,iFAGA,6EAGA,oFAMA,wHAGA,2HAGA,0GAGA,iHAGA,wHAIA,6LAIA,yMAOA,wHAMA,uHAMA,wHAOA,yFAMA,0FAQA,0FAMA,0FASA,wDAQA,kKAMA,gOAIA,kOAIA,wKAMA,6IAOA,sHAMA,6TAKA,gUAKA,yOAOA,0IAIA,2FAMA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,8JAOA,uOAOA,yLAOA,gMAMA,4JAOA,8IAOA,mHAgBA,8EAGA,6HAIA,+NASA,8BACE,yCAGA,uDAGA,6FIxYF,gEAMA,wNAUA,uDAMA,kZAoBA,wEAIA,0EAOA,yFAIA,yFAOA,+KAaA,gEAOA,uPAAA,6PAAA,6PAWA,kJAWA,gEAMA,kGAGA,8FAMA,yMASA,gFAGA,wEAKA,mFAGA,iFAGA,yJAIA,mJAIA,wGAGA,oGAQA,wKASA,0DAGA,mGAMA,qEAIA,kFAKA,sFAIA,yFAKA,uEAGA,wEAGA,+EAGA,gFAIA,6KAQA,0GAQA,qFAKA,mOAgBA,+DAGA,yEAGA,wDASA,gEAAA,0GAIA,mFAOA,iJAQA,gIAQA,mIAKA,6HAIA,uHAAA,8GAIA,+OAOA,qHAOA,+FAGA,gGAGA,gGASA,uGAIA,+EAGA,0FAGA,8EAGA,mHAIA,qHAIA,4EAGA,6FAGA,oGAGA,0JAIA,qKAKA,+GAGA,8IAIA,uGAGA,mFAGA,qFAAA,+HAIA,6MAIA,iIAAA,8IAAA,qIAWA,wRAQA,wHAMA,uCACE,yDASF,8BACE,6CAGA,6EAIA,6EAGA,+F5BjbF,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,uEAIA,iOAYA,sDASA,8DAAA,sGAIA,+EAOA,2IAQA,4HAQA,+HAKA,mIAKA,iHAGA,mOASA,6FAGA,8FAGA,8FASA,sEAGA,4GAIA,wFAGA,0IAIA,qGAGA,iFAGA,mFAAA,2HAIA,qMAIA,2HAAA,wIAMA,4QAQA,sHAMA,uCACE,qDASF,8BACE,2CAGA,2EAIA,yEAGA,yFgBjQF,2EAQA,qVAkBA,oDAIA,oDAIA,oDAQA,0LAWA,2IAOA,sHAOA,8JAKA,8PAKA,kQAQA,sKAKA,0PAKA,4PAQA,+FAOA,+EAIA,mMAMA,uJAOA,2DAGA,wKAKA,0EAMA,6EAIA,iNAMA,yHAOA,yHAQA,qDAKA,0HAOA,qIASA,yHAMA,mFAQA,8EAGA,0MAKA,2LAOA,uCACE,sDAQF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA,8DIjPF,yMAQA,sFAKA,uDAIA,kDAGA,6CAMA,wEAOA,8MAeA,6VAkBA,iNAWA,yOAUA,qKAOA,2HAKA,qLAMA,kNAQA,4IAIA,kMAMA,mMAQA,iFAMA,uDAGA,kFAGA,kJAIA,qIAKA,8DAKA,kFAGA,gJAIA,wFAKA,wCAGA,2EAGA,0HAIA,gHAMA,sHASA,sHAOA,sHAQA,mFAGA,8MAQA,oNAOA,qNAQA,uCACE,gEAMF,8BACE,gDAGA,2EAGA,4CAGA,iDAGA,gEGhQF,yEAQA,8YAqBA,qFAIA,wEAKA,6GAIA,4HAKA,6EAMA,iMAUA,6FAMA,sKASA,wCAGA,4CAGA,2CAKA,oRAcA,mJAKA,+EAKA,kJAQA,yCAGA,4FAGA,gJAMA,8EAGA,mHAKA,uHAMA,iFAMA,8GAIA,2FAGA,wEAIA,uCACE,sEAOF,8BACE,yEAGA,4DAGA,gDAGA,oFAGA,wDAGA,iFrBzLF,uFAMA,oZAmBA,yFAKA,uIAIA,kIAMA,6HAOA,iKAMA,+JAMA,+JASA,6JAKA,mKAOA,oEAOA,8LAQA,uCACE,8CAKF,8BACE,2FAIA,oEM1GF,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,kDU3LF,2WAgBA,2CAGA,0CAKA,6DAGA,oFAKA,6EAIA,mFAMA,uKAKA,wIAKA,yDAIA,gEAKA,yCAIA,+DAGA,+DAGA,+DAIA,uCAGA,8GAIA,mFAGA,kJAMA,sGAKA,kHAIA,8LAMA,sFAIA,wDAIA,sIAIA,8DAGA,gJAOA,oIAMA,4OAUA,2HAIA,6EAKA,4EAGA,sIAMA,qFAKA,mFAKA,iDAGA,uCACE,qCAMF,wKASA,kJAQA,yDAKA,8EAMA,gIAOA,4DAMA,wMAQA,oEAKA,sJAQA,gKAQA,2EAMA,uCACE,4BAMF,8BACE,uCAGA,4HAOF,uHAIA,sHAIA,wKAIA,yTAMA,8KAIA,0JAIA,oRAMA,oJQlTA,ySAgBA,8IAOA,gGAOA,kGAQA,uDAMA,qDAOA,oFAKA,yGAKA,+GAKA,qHAKA,yGAKA,yGAKA,gGAOA,sHAMA,8HAMA,mIAMA,qIAMA,qIAMA,yHAQA,mHAQA,2EAOA,2CAGA,iFAGA,6EAGA,kFAGA,oFAGA,kFAGA,4EAGA,+EAMA,4FAOA,gDAMA,2EAKA,2EAKA,2EAMA,8CAOA,wRAmBA,wDAKA,0FAIA,2FAOA,0JAKA,wGAIA,+GAIA,6GAIA,6GAIA,uGAMA,obAWA,8BACE,uCCtRF,kPAaA,qJAOA,uGAMA,yGAQA,oKASA,qEAGA,kEAGA,wEAGA,oEAGA,wEAMA,kHAIA,+GAIA,wHAIA,kHAIA,wHAOA,0EASA,sCAGA,0FAGA,uFAGA,6FAGA,yFAGA,6FAGA,6FAMA,2IAIA,+HAIA,qIAIA,iIAIA,qIAIA,qEAIA,wHAOA,8BACE,8C7BvJF,oEAOA,yEAGA,2EAGA,gFAGA,oDAIA,6HAUA,4KASA,+EAGA,8EAKA,oHAQA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAMA,8BACE,kGW5FF,kiBAuBA,kJAKA,qJAKA,qJAKA,qJAKA,mJAKA,sJAKA,yMASA,2DAIA,yDAGA,0EAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,yFAIA,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA,kFEnOF,gdAoBA,6JAMA,+CAMA,oCAGA,oDAIA,6MAYA,oGAKA,oGAKA,sDAKA,kMAKA,gKAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAOF,wMAYA,+FAKA,8BACE,2CMlIF,qnBAsBA,8HAKA,0UAQA,mUAQA,gVAQA,wVAQA,wVASA,kKASA,oLASA,oRAYA,8DAKA,sLAWA,mKAOA,8FAIA,2HAOA,4SAgBA,+DAIA,sEAGA,mGAKA,sHAOA,6cAoBA,uEAGA,oGAKA,0BACE,sDAGA,mGAMA,wGAMA,kEAIA,uFAKA,4CAGA,wLAOA,oFAKF,4HAIA,sEAMA,kPAYA,6EAGA,mHAIA,2IAIA,8JAIA,+FAIA,8BACE,2CAGA,8HdxRF,yIAWA,2cAuBA,2CAGA,oJAOA,sHAOA,yEAKA,oGAKA,0DAGA,iEAIA,sPAWA,sEAMA,2JASA,gKAUA,qLAUA,qGAQA,yBACE,uEAQF,uVAmBA,8DAIA,kEAGA,0FAKA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAYA,oEAGA,gHAIA,yFAIA,uCACE,wDAMF,8BACE,wCAGA,8ES3OF,mOAcA,wDAIA,mEAMA,sFAIA,uFAKA,kFAIA,qHAKA,2HAMA,iHAQA,oiBAuBA,yMAKA,kMAKA,8MAKA,8MAKA,4MAQA,wKAWA,0LASA,sSAYA,oEAKA,4LAWA,yKAOA,iIASA,kTAgBA,qEAIA,4EAGA,yGAOA,4HAOA,8bAmBA,6EAGA,0GAOA,0BACE,4DAGA,mGAMA,8GAMA,wEAIA,6FAMA,kDAIA,8LAOA,yFAGA,qGAGA,4GAMF,6GAGA,gGAGA,oJAIA,mJAKA,yIAOA,uGAIA,6FAIA,mHAUA,0HAUA,6HAUA,uFAUA,uCACE,uIASF,yFAGA,4EAGA,mFAGA,+HAIA,uJAIA,0KAOA,8BACE,qDAGA,0IRtYF,yIAQA,iFAOA,uFAMA,sFAOA,iPAUA,8CAGA,wDAIA,uHAMA,kYAsBA,0EAIA,wIAOA,6KAKA,sKAMA,8IAMA,uKAIA,yKAIA,qRAOA,sFAIA,6FAGA,wFAIA,4MASA,iIAKA,iJAKA,gKAIA,2KAOA,sEAKA,sDAOA,mNAMA,mNAMA,mNAQA,sIAKA,sJAKA,2LAQA,iFAGA,iFAGA,iFAMA,0FAOA,yNASA,0DAGA,6CAIA,yNAaA,kOAYA,6DAIA,uHAIA,0FAGA,wLAKA,4CAGA,uLASA,iCAGA,kHAKA,iHAIA,2fAYA,uCACE,6DAMF,8BACE,4GAIA,uDAGA,wEAGA,kFM7UF,gFAQA,iIAYA,sFAQA,iIAOA,gHAMA,6HASA,8FAOA,8FAOA,uEAQA,+DAMA,2IAQA,8DAOA,gLAUA,wEAGA,0GAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yCS/IF,oFAQA,oIAYA,2CAMA,obAqBA,sEAIA,sGAKA,0FAOA,4SAWA,wEAMA,uCAIA,gEAMA,0DAMA,0JAOA,2LAUA,+IAKA,yDAIA,+DAOA,iRAYA,sVAiBA,uFAIA,yDAKA,iHAOA,8BACE,mDAGA,8FAQF,0IAMA,8HAMA,4IAOA,+HAIA,6NASA,uCACE,wCAOF,8BACE,sCAGA,oFAIA,gEAGA,+EpBlPF,sJAUA,2EAMA,8CAOA,mdAuBA,qEAMA,4EAGA,mFAGA,0GAKA,wHAKA,uJAOA,gIAOA,4FAGA,gEAMA,oEAIA,mEAIA,qFAGA,qFAIA,iNAQA,oGAQA,kGAWA,+EAGA,+EAMA,iEAGA,6EAMA,uCACE,qGAIA,0CAMF,sEAMA,8BACE,8DAIA,oEO1KF,4GASA,6CAIA,+EAIA,4GAQA,wGAMA,wHAKA,4GAKA,8OAQA,qQASA,gGAGA,6GAKA,6eAuBA,wFAMA,2MAKA,yGAGA,kGAIA,mJAOA,kLAIA,qKAIA,gJAKA,sJAOA,4FAIA,iJAOA,wFAIA,sJAQA,mLAOA,uEASA,4DAGA,mLAKA,uLAOA,8JAIA,0MAQA,iFAGA,yFAGA,4NAOA,uCACE,qDAKF,8BACE,6EAIA,iMAKA,mFAGA,8Fe7OF,4GAOA,uCAGA,8EAIA,0EAGA,2EAGA,uHAKA,uDAIA,+EAIA,iCAGA,mCAGA,iCAGA,mCAIA,yEASA,uCACE,uCAKF,8BACE,qCAGA,mCUjEF,mfAiBA,+EAMA,qFAMA,uFAMA,qFAMA,4FAIA,2FASA,2EAIA,+FASA,oCAIA,uCACE,wCAKF,8BACE,0CF5EF,2FAOA,uEAGA,kEAGA,uEAGA,yEAIA,2KAQA,4EAGA,qDAIA,iJAOA,wDAGA,wDAGA,6FAKA,gIAKA,0LAOA,uJAOA,uGAOA,6MAMA,2FAQA,2HAGA,+FASA,+EAKA,yIAQA,8CAGA,2GAKA,kFAGA,kFAGA,8EAKA,kLAUA,4FAKA,uDAKA,kEAIA,gHAIA,0GAOA,sHAOA,gFAGA,2EAGA,gFAGA,kFAIA,2CAGA,2DAGA,wIAIA,mFAIA,oGAKA,gLAKA,oEAMA,2LAYA,8FAGA,0FAGA,2GAKA,0FAMA,8FAGA,8FAGA,+FAIA,8EAGA,oGAIA,iNAKA,+FAGA,8FAQA,gNAOA,oIAIA,8KAOA,oGAGA,gGAGA,gHAGA,4GAIA,6IAMA,uCACE,wKAIA,+GAQF,8BACE,kDAGA,qDAGA,gFAIA,8FCzVF,kVAeA,mGAGA,qFAGA,iIAUA,6DAWA,gTAeA,sEAOA,8IAKA,uEAGA,wFAMA,iHAKA,gFAGA,sJAOA,kNAWA,qJASA,+DAMA,8IAWA,mLAUA,qEAOA,sFAGA,uHAOA,gEAMA,qQASA,qKASA,6JAIA,6FAGA,oHAIA,mNAQA,8BACE,gDAGA,2HAKA,gEAGA,4DAOF,uCACE,4FE5NF,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,0CC3TF,wOASA,qDAOA,+ZAoBA,8EAIA,gFAKA,+FAIA,+FAKA,4GAOA,uDAKA,mGAQA,2GAKA,mFAIA,gFAIA,yOAYA,+DAKA,mFAGA,wEAKA,qKAOA,mHAOA,uIAMA,sVAaA,oQAUA,iGAGA,mFAGA,4HAUA,wDASA,yFAMA,sOAWA,6DAIA,sKAYA,2FAMA,+KAUA,+UAeA,8EAGA,iEAGA,uFAKA,iHASA,uKASA,gEAMA,gOAWA,oHAIA,mEAOA,sQAQA,+JAWA,6GAIA,qIAIA,0JAIA,6HAGA,yFAGA,wGAGA,qJAIA,mGAGA,uFAGA,iLAKA,6FAMA,uCACE,6CAGA,kGAKF,8BACE,0EAIA,oFAIA,uFAIA,wEKjXF,yPAYA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAQA,uFAQA,oIAOA,0FAOA,4PAcA,sGAIA,oFAGA,sFASA,gLAiBA,6GAOA,4SAeA,mFAGA,uEAMA,yHASA,uHAMA,yEAGA,yKAMA,wKAYA,oGAMA,6LAcA,yiBA4BA,sLASA,6DAIA,uIAMA,6FAIA,iHAGA,iHAGA,6FAGA,0HAIA,iIAQA,yEAWA,yBACE,kDAGA,2FAOF,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA,2FrC1XF,iEAIA,yNASA,wDAMA,+XAmBA,iFAIA,mFAMA,kGAIA,kGAOA,8IAQA,iDAIA,sNASA,wEAGA,+HAIA,0FAIA,8GAQA,uJAUA,oFAMA,4GAMA,8EAIA,4OAYA,2FASA,2JAIA,sJAOA,uKAQA,2IAKA,4DAGA,mWAWA,kGAMA,gHAIA,4EAGA,kGAGA,gKAIA,8HAGA,4FAGA,kMAKA,4JAIA,8NASA,uCACE,2EAQF,8BACE,sDAGA,4FAIA,+DAGA,oFM/PF,4GASA,qFAMA,uFAIA,sMAUA,wDAIA,+JASA,yUAiBA,8KAWA,oGAOA,iHAKA,mGAIA,2FAIA,+OAMA,sIAKA,gHAMA,gGAIA,yGAKA,yKAKA,kFAMA,6IASA,wJAQA,+JAcA,sHASA,iMASA,kEAIA,iHAOA,iJASA,4EAIA,gFAKA,0HAKA,iIAKA,2HAKA,iIAMA,mPAYA,mRAgBA,uHAKA,yGAKA,2GAKA,8JAUA,8BACE,4FQnRF,sGAIA,sGAOA,+FAIA,gGAIA,+FAOA,kEAMA,kJAOA,+EAMA,2LAaA,kKAQA,qIAUA,4QAWA,2CAKA,mIASA,8JAKA,2IAQA,uCAGA,mEAMA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,2EAIA,kFUhJF,kEAMA,0NAUA,yDAMA,6SAiBA,0EAIA,4EAOA,2FAIA,2FAOA,gRAkBA,kEAIA,yPAAA,+PAAA,+PAYA,qSAcA,mFAKA,8DAIA,qFAMA,kIAIA,8HAOA,oFAGA,qFAGA,wGAIA,sHAOA,oFAGA,wHAGA,yHAGA,6FAMA,uFAOA,iEAGA,2EAIA,qOAYA,0DAQA,8KAMA,uDAAA,oFAOA,uJAQA,oIAQA,oHAIA,mIAIA,6HAIA,2PAUA,iGAGA,kGAGA,kGASA,yGAIA,iFAGA,4FAGA,kJAIA,mHAIA,0GAGA,sGAGA,6IAKA,oFAGA,yGAGA,qFAGA,qNAOA,qNAIA,uIAAA,oJAQA,oSAQA,0HAMA,uCACE,sFAUF,8BACE,+CAGA,sEAIA,+EAIA,iFAGA,qGS7WF,+JAQA,iPAaA,kEAMA,0DAIA,wDAIA,wDAKA,wIAMA,uCAKA,gEAIA,8DAMA,yFASA,4QAaA,0FAKA,iFAOA,wJAUA,2EAGA,4EAIA,kDAOA,4EAQA,8BACE,uCAGA,wCAGA,qEQtIF,iZAsBA,uGAKA,yGAKA,uGAMA,2EAIA,kHAIA,kGAIA,2DAIA,uFAKA,oDAKA,uCACE,8BAKF,8BACE,2EAIA,wDL1EF,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,kIASA,kFAOF,4GAOA,iHAGA,2FAMA,8BACE,gGE9EF,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE,sDCvHF,wTAeA,2GAMA,gGAMA,mOAWA,wDAIA,+BAGA,kJASA,wDAIA,6DAGA,uGAMA,gEAKA,wGAKA,wFAKA,wLASA,oDAIA,6EAKA,2EAKA,+EAGA,4EAIA,oRAUA,6DAGA,4EAGA,4EAGA,wFAKA,qEAIA,8FAMA,wJAMA,mIAIA,yDAGA,mEAIA,uEAKA,oIAQA,6GAMA,uKAQA,qMAYA,gFAKA,2HAKA,4GAQA,sEAGA,8FAIA,8FAGA,8FAGA,uFAGA,sGAKA,8BACE,+CAGA,mDAOF,+DAGA,uEAGA,uEAGA,uEAIA,sIAKA,gPAkBA,iGAOA,qDJxSA,yUAoBA,0HAMA,4HAmBA,+JAQA,yXAoBA,0DAKA,mGAKA,4FAOA,uFAGA,yEAMA,8FAUA,uDASA,uCACE,qCAUF,8BACE,0CAGA,iESjIF,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,kRejgBF,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,0FrB7UF,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,yFiBrMF,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,sDdtQF,0DASA,2GAMA,8HAOA,kSAeA,wCAGA,wCAGA,0CAMA,iKAOA,qDAGA,0PAUA,2GAKA,+EAIA,kFAIA,yEAOA,2MAWA,oEAIA,uGAGA,kJAKA,6GAGA,gJAMA,wHAMA,mJAQA,iJAUA,wMAaA,kDAIA,6FAIA,yFAMA,yNAYA,2DAIA,iHAIA,yFAIA,sNAIA,oNAIA,wNAIA,sNAIA,wLAKA,gMAIA,oKAQA,qEAIA,wKASA,8BACE,oDAGA,uJAKA,yEAGA,yFAGA,oGAGA,kDAGA,wMMzQF,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,oDM1LF,qdAoBA,4PAQA,2RAWA,wDAGA,oDAGA,uDAIA,wFAKA,wGAQA,2FAIA,6FAIA,mEAGA,6FAQA,4DAMA,mFAKA,qFAOA,oEAIA,sEAKA,6DAGA,6DAMA,sEAMA,qEAIA,qEAMA,0DAGA,mGAGA,mGAGA,mKAIA,mKAQA,uMAMA,kPAQA,uCACE,4BAKF,8BACE,uFAMA,qCAGA,8CAGA,uErBhMF,0FAIA,qDAIA,+EAIA,sGAGA,8GAKA,iFAIA,uFAKA,oGAAA,iGAAA,qGAAA,yGQbA,yOAcA,oDAGA,mDAIA,gCAIA,2FAOA,+FAKA,0EAIA,wGAQA,kDAGA,2GAIA,wGAGA,+EAGA,sGAGA,sHAKA,gFAGA,4EAKA,6IASA,sDGnGA,8VAiBA,sCAGA,sCAGA,0DAIA,iCAIA,iHAOA,2JAQA,2JAMA,sCAGA,gEAMA,sFAOA,uLASA,wEAMA,sGAOA,sJAOA,+JAWA,6NAUA,sFAKA,6FAKA,iDAGA,wDAMA,0HAMA,8BACE,oCM1IF,+DAOA,iJAYA,sIAMA,iHAQA,4EAKA,yFAGA,yFAQA,iDAIA,wGAQA,sGAWA,uCACE,0GAQF,8BACE,yGOpFF,oJASA,oFAOA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA,qEM7HF,uEAIA,+NASA,8DAMA,qYAkBA,uFAIA,yFAKA,wGAIA,wGAOA,oJAQA,uDAIA,4NASA,8EAGA,qIAIA,gGAIA,oHAKA,2GAQA,6JAUA,gGAMA,kHAGA,oFAIA,kPAYA,iGAGA,uKAIA,kKAOA,yLAKA,uJAKA,kEAGA,qeAUA,wGAWA,kFAGA,uJAIA,iJAKA,0KAQA,sHAIA,kFAGA,wGAGA,4KAIA,oIAIA,kGAGA,8MAKA,wKAIA,kIAQA,uCACE,uFAQF,8BACE,4DAGA,kGAIA,qEAIA,yEAGA,+EF1QF,+HAWA,sDAMA,iECzBA,2KAUA,oIAQA,iSAYA,yPAWA,mLAIA,+KAKA,2EAIA,yLAOA,mNAKA,mKAOA,4IAIA,6HAKA,yJAMA,sNAUA,4EAIA,8HAMA,+EAGA,6MAMA,mMAKA,8BACE,4XAUA,4IEpIF,6cAkBA,wMAMA,oNAMA,oNAMA,+MAOA,wJASA,yKAWA,4KASA,8DAKA,iLAQA,oLAUA,kGAQA,0VAkBA,+DAIA,sEAGA,mGAMA,0LAUA,yLAKA,yIAIA,kJAIA,kJAIA,+IAIA,sEAGA,wFAGA,mGAIA,8BACE,+CAGA,qFnBjLF,uXAmBA,uCACE,uCAMF,sDAGA,sDAKA,wGAMA,uDAIA,+CAKA,qHAIA,+HAGA,iIAGA,sFAKA,8EAIA,kHAGA,mHAGA,sFAKA,6GAIA,oNAMA,0FAKA,iDAGA,sLAQA,sEAKA,6JAOA,wPAYA,iHAIA,uJAKA,wJAKA,2HAIA,kGAIA,2JAKA,4JAKA,+HAKA,0KAMA,8BAEE,kDAGA,mFAIA,yFQvLF,kFAGA,kGAOA,sLAWA,iHAKA,0JAQA,oHAOA,yJAQA,2KAQA,4GAMA,mIAYA,wEAIA,gVAgBA,qJAMA,uGAKA,6EAKA,wFAMA,yVAkBA,uEAIA,mGAKA,uFAKA,sEAMA,oHAQA,yFAMA,sCAIA,uCACE,4HASF,8BACE,2DAGA,sDAGA,yHJxLF,uHAOA,2GAMA,0IAOA,yMASA,4DAGA,wDAGA,qFAIA,wDAMA,+FASA,oKAOA,gGAIA,4EAQA,6KAQA,qCAIA,wLASA,4EAGA,gGAKA,4EAIA,8EAIA,8EAOA,+NAcA,0DAKA,wDAIA,yDAIA,yDAIA,yDAMA,mHAIA,6HAGA,+HAGA,2KAQA,kFAIA,iHAGA,kHAGA,mIAOA,+CAGA,oLAWA,sIAGA,wIAIA,oKAKA,uCACE,+EAOF,8BACE,4DAGA,yHAKA,qFM9OF,gQAYA,+BAGA,8CAGA,yEAGA,mDAKA,+EAMA,8EAKA,6JAOA,6ZAgBA,8CAIA,mMASA,mLAQA,2CAGA,uDAIA,mDAGA,qEAIA,+PAYA,+EAGA,+GAIA,yEAIA,6EAIA,qEAIA,+EAKA,iKAOA,wbAkBA,6EAGA,6GAIA,oGAKA,gEAIA,oOASA,2OAaA,2EAIA,mEAKA,sFAGA,kFAKA,8BACE,qEAIA,+DTpNF,2RAaA,2EAIA,2GAOA,wGAOA,uHAQA,iNAUA,sVAgBA,sGAIA,sGAMA,2FAIA,uFAKA,gDAKA,0FAMA,0GAOA,qRAYA,+DAKA,0GAOA,6LAQA,sFAKA,+LAUA,iPASA,4DAIA,6FAKA,oHAMA,8JAOA,wKAMA,qGAIA,gHAMA,0BACE,uDAGA,kGAKA,2EAGA,+DAIA,6CAGA,+CAGA,sEAKA,+DAIA,2DAIA,+DAIA,+GAUF,8EAIA,8BACE,kDAGA,6IMhQF,iJASA,2FAGA,8FAGA,oEAQA,qEAWA,sPAaA,mEAGA,yEAKA,oGAIA,kGAKA,uFAGA,0FAGA,mFAGA,sFAGA,gGAQA,iGAQA,6FAQA,8FASA,+FAGA,kGAGA,+FAGA,kGAMA,qMASA,wHAOA,wHAOA,yPAWA,wEAIA,qKAOA,yKAQA,iRAeA,0EAGA,uGAIA,gEAOA,gRAaA,6DAGA,+HAOA,sFAKA,wJAMA,gGAOA,gDAMA,4UAgBA,sEAGA,uEAGA,uGAKA,0GAIA,0JASA,oEAIA,uNAYA,0NAUA,wEAIA,wFAMA,qGAQA,kMAYA,oFAGA,8EAGA,0HAIA,wFAGA,yFAGA,6GAOA,uCACE,iEAQF,8BACE,gDAGA,2DAGA,gEAGA,sHAKA,0GL9YF,mNAYA,6DAKA,sEAKA,4FAIA,4CAIA,6LAYA,wGAIA,8DAIA,yFAKA,sGAOA,+JAaA,+GAMA,8BACE,gEIlFF,gXAkBA,0DAKA,mKAOA,qHAMA,uHAOA,mDAIA,sDAIA,qEAMA,uFAIA,oGAGA,uIAIA,6FAIA,8FAGA,+FAKA,gGAIA,sGAGA,uGAGA,+FAIA,gGAGA,iGAKA,2FAOA,kKAYA,iFAIA,6GAGA,sJAIA,0HAIA,uGAGA,wGAGA,2JAQA,4IAIA,kJAIA,mJAIA,kMAIA,qLAIA,wNAKA,mNAMA,8BACE,uCAGA,qDAGA,wFAKA,sDQ/LF,6GAQA,4DAGA,0DAGA,0DAGA,8DAGA,0DAGA,0DAGA,4DAGA,4DAIA,2DAGA,0DAGA,4DAGA,wDAGA,8DAKA,4NAUA,iIAIA,wIAIA,0IAIA,oIAIA,iIAOA,2EAOA,qDAIA,qDAGA,mDAGA,mDAGA,uDAGA,mDAGA,mDAGA,qDAGA,qDAIA,oDAGA,mDAGA,qDAGA,iDAGA,uDAKA,8BACE,6ClBxIJ","sources":["src/index.css","src/variables.css","src/components/accordion.css","src/components/date-picker.css","src/components/content-switcher.css","src/components/divider.css","src/components/tabs.css","src/components/avatar.css","src/components/modal.css","src/dark.css","src/themes.css","src/components/file-upload.css","src/components/textarea.css","src/components/tooltip.css","src/components/select.css","src/components/breadcrumb.css","src/components/notification-toast.css","src/components/progress-indicator.css","src/reset.css","src/components/checkbox.css","src/components/inline-alert.css","src/components/slider.css","src/components/card.css","src/components/pagination.css","src/components/tag.css","src/components/text-input.css","src/components/progress.css","src/components/spinner.css","src/components/switch.css","src/components/button.css","src/components/number-input.css","src/components/radio.css","src/components/status-tag.css","src/components/field.css","src/components/dropdown-menu.css","src/components/skeleton.css","src/components/drawer.css","src/components/dropdown.css","src/components/rating.css","src/components/search-box.css","src/components/description-list.css","src/components/popover.css","src/components/list.css","src/components/empty-state.css","src/components/metric.css","src/components/toggle.css","src/components/table.css","src/components/calendar.css","src/components/quote.css","src/components/charts.css","src/components/digital-stamp.css","src/components/floating-button.css","src/components/input-otp.css","src/components/carousel.css","src/components/timeline.css","src/components/collapsible.css","src/components/code-snippet.css","src/components/chip.css","src/components/filtration.css","src/components/command.css","src/components/link.css","src/components/scroll-area.css","src/components/sidebar.css","src/components/tag-input.css","src/components/saudi-riyal.css","src/components/structured-list.css","src/components/slideout-menu.css","src/components/aspect-ratio.css","src/components/date-range-picker.css","src/components/menubar.css","src/components/notification.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/text-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/content-switcher.css';\n@import './components/select.css';\n@import './components/card.css';\n@import './components/tag.css';\n@import './components/status-tag.css';\n@import './components/divider.css';\n@import './components/avatar.css';\n@import './components/tooltip.css';\n@import './components/inline-alert.css';\n@import './components/modal.css';\n@import './components/notification-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/progress-indicator.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/dropdown.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/metric.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@import './components/structured-list.css';\n@import './components/notification.css';\n@import './components/floating-button.css';\n@import './components/filtration.css';\n@import './components/carousel.css';\n@import './components/code-snippet.css';\n@import './components/digital-stamp.css';\n@import './components/slideout-menu.css';\n@import './components/charts.css';\n@import './components/chip.css';\n@import './components/saudi-riyal.css';\n/* AUTO:COMPONENT_IMPORTS */\n",":root {\n --ddga-color-primary: var(--ddga-brand-600);\n --ddga-color-primary-hover: var(--ddga-brand-700);\n --ddga-color-primary-active: var(--ddga-brand-900);\n --ddga-color-primary-foreground: #FFFFFF;\n --ddga-color-secondary: var(--ddga-gray-100);\n --ddga-color-secondary-hover: var(--ddga-gray-200);\n --ddga-color-secondary-foreground: var(--ddga-gray-950);\n --ddga-color-background: #FFFFFF;\n --ddga-color-foreground: var(--ddga-gray-950);\n --ddga-color-muted: var(--ddga-gray-100);\n --ddga-color-muted-foreground: var(--ddga-gray-500);\n --ddga-color-border: var(--ddga-gray-200);\n --ddga-color-input: var(--ddga-gray-300);\n --ddga-color-card: #FFFFFF;\n --ddga-color-card-foreground: var(--ddga-gray-950);\n --ddga-color-destructive: var(--ddga-error-600);\n --ddga-color-destructive-hover: var(--ddga-error-700);\n --ddga-color-destructive-foreground: #FFFFFF;\n --ddga-color-error: var(--ddga-error-600);\n --ddga-color-error-hover: var(--ddga-error-700);\n --ddga-color-error-foreground: #FFFFFF;\n --ddga-color-success: var(--ddga-success-600);\n --ddga-color-success-hover: var(--ddga-success-700);\n --ddga-color-success-foreground: #FFFFFF;\n --ddga-color-warning: var(--ddga-warning-600);\n --ddga-color-warning-hover: var(--ddga-warning-700);\n --ddga-color-warning-foreground: #FFFFFF;\n --ddga-color-info: var(--ddga-info-600);\n --ddga-color-info-hover: var(--ddga-info-700);\n --ddga-color-info-foreground: #FFFFFF;\n --ddga-color-ring: var(--ddga-brand-600);\n --ddga-color-focus-ring: var(--ddga-text-primary);\n --ddga-text-primary: #161616;\n --ddga-text-secondary: var(--ddga-gray-700);\n --ddga-text-tertiary: var(--ddga-gray-600);\n --ddga-text-placeholder: var(--ddga-gray-400);\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-sa-flag: #074D31;\n --ddga-brand-25: var(--ddga-sa-25);\n --ddga-brand-50: var(--ddga-sa-50);\n --ddga-brand-100: var(--ddga-sa-100);\n --ddga-brand-200: var(--ddga-sa-200);\n --ddga-brand-300: var(--ddga-sa-300);\n --ddga-brand-400: var(--ddga-sa-400);\n --ddga-brand-500: var(--ddga-sa-500);\n --ddga-brand-600: var(--ddga-sa-600);\n --ddga-brand-700: var(--ddga-sa-700);\n --ddga-brand-800: var(--ddga-sa-800);\n --ddga-brand-900: var(--ddga-sa-900);\n --ddga-brand-950: var(--ddga-sa-950);\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-alpha-white-10: rgba(255, 255, 255, 0.1);\n --ddga-alpha-white-20: rgba(255, 255, 255, 0.2);\n --ddga-alpha-white-30: rgba(255, 255, 255, 0.3);\n --ddga-alpha-white-40: rgba(255, 255, 255, 0.4);\n --ddga-alpha-white-60: rgba(255, 255, 255, 0.6);\n --ddga-alpha-white-70: rgba(255, 255, 255, 0.7);\n --ddga-alpha-white-80: rgba(255, 255, 255, 0.8);\n --ddga-alpha-white-90: rgba(255, 255, 255, 0.9);\n --ddga-chart-1: #F7D54D;\n --ddga-chart-2: #88D8AD;\n --ddga-chart-3: #FDB022;\n --ddga-chart-4: #53B1FD;\n --ddga-chart-5: #80519F;\n --ddga-chart-6: #F97066;\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-2xs: 0.625rem;\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-xs: 0.125rem;\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-xs: 0 1px 2px 0 rgb(16 24 40 / 0.05);\n --ddga-shadow-sm: 0 1px 3px 0 rgb(16 24 40 / 0.1), 0 1px 2px 0 rgb(16 24 40 / 0.06);\n --ddga-shadow-md: 0 2px 4px -2px rgb(16 24 40 / 0.06), 0 4px 8px -2px rgb(16 24 40 / 0.1);\n --ddga-shadow-lg: 0 4px 6px -2px rgb(16 24 40 / 0.03), 0 12px 16px -4px rgb(16 24 40 / 0.08);\n --ddga-shadow-xl: 0 8px 8px -4px rgb(16 24 40 / 0.03), 0 20px 24px -4px rgb(16 24 40 / 0.08);\n --ddga-shadow-2xl: 0 24px 48px -12px rgb(16 24 40 / 0.18);\n --ddga-shadow-3xl: 0 32px 64px -12px rgb(16 24 40 / 0.14);\n --ddga-shadow-none: none;\n}\n\n[data-theme] {\n --ddga-color-primary: var(--ddga-brand-600);\n --ddga-color-primary-hover: var(--ddga-brand-700);\n --ddga-color-primary-active: var(--ddga-brand-900);\n --ddga-color-ring: var(--ddga-brand-600);\n}\n","@layer ddga-components {\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-input);\n }\n\n /* ─── Item ─── */\n\n .ddga-accordion__item {\n border-block-start: 1px solid var(--ddga-color-input);\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: flex-start;\n gap: var(--ddga-space-4);\n padding-inline: var(--ddga-space-4);\n padding-block: var(--ddga-space-4); /* lg; md/sm override below */\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.5rem;\n text-align: start;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n\n /* Title fills the row; the chevron sits at the opposite end (or right after it when leading). */\n .ddga-accordion__title {\n flex: 1 1 0;\n min-inline-size: 0;\n text-align: start;\n }\n\n .ddga-accordion__trigger:hover {\n background-color: var(--ddga-color-secondary);\n }\n .ddga-accordion__trigger:active {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-accordion__trigger:focus-visible {\n outline: 2px solid var(--ddga-color-focus-ring);\n outline-offset: -2px;\n }\n\n .ddga-accordion__trigger:disabled,\n .ddga-accordion__trigger[data-disabled] {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-accordion__trigger:disabled .ddga-accordion__chevron,\n .ddga-accordion__trigger[data-disabled] .ddga-accordion__chevron {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Chevron ─── */\n\n .ddga-accordion__chevron {\n flex-shrink: 0;\n inline-size: 1rem;\n block-size: 1rem;\n color: var(--ddga-text-primary);\n transition: transform 200ms ease;\n }\n .ddga-accordion__trigger[data-state='open'] .ddga-accordion__chevron {\n transform: rotate(180deg);\n }\n .ddga-accordion--icon-leading .ddga-accordion__chevron {\n order: -1;\n }\n\n /* ─── Content (animated disclosure) ─── */\n\n .ddga-accordion__content {\n overflow: hidden;\n color: var(--ddga-gray-700);\n }\n .ddga-accordion__content[data-disabled] {\n color: var(--ddga-gray-400);\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-start: var(--ddga-space-2);\n padding-block-end: var(--ddga-space-6);\n padding-inline-start: var(--ddga-space-4);\n padding-inline-end: var(--ddga-space-12); /* inset off the chevron side */\n line-height: 1.5rem;\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 (header pad-block only; title is constant 16/600/24) ─── */\n\n .ddga-accordion--md .ddga-accordion__trigger {\n padding-block: var(--ddga-space-3);\n }\n .ddga-accordion--sm .ddga-accordion__trigger {\n padding-block: var(--ddga-space-2);\n }\n\n /* ─── Flush (edge-to-edge — drops the inline padding) ─── */\n\n .ddga-accordion--flush .ddga-accordion__trigger {\n padding-inline: 0;\n }\n .ddga-accordion--flush .ddga-accordion__content-inner {\n padding-inline-start: 0;\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 /* Dark: raw gray-700 body text can't flip → remap to a legible light step. */\n [data-theme='dark'] .ddga-accordion__content {\n color: var(--ddga-gray-300);\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 }\n }\n}\n","@layer ddga-components {\n /* DatePicker field/trigger chrome — mirrors the SDGA Text Input field model\n (see text-input.css): the official Date field IS the Text input field (no\n calendar icon). The calendar dropdown (popover, toggle, month grid) is\n shared with DateRangePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. */\n\n /* SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. */\n .ddga-field[data-slot='date-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-picker__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the SDGA date field; owns border/focus/size/style/state) ─── */\n\n .ddga-date-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* SDGA Medium 32 / Large 40 (Large is the official date-field size). */\n .ddga-date-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n /* SDGA Style axis. */\n .ddga-date-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── DateInput + segments ─── */\n\n .ddga-date-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\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-gray-700);\n font-variant-numeric: tabular-nums;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-500);\n }\n .ddga-date-picker__segment[data-focused] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-date-picker__segment[data-type='literal'] {\n padding-inline: 0;\n color: var(--ddga-gray-700);\n }\n .ddga-date-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n /* ─── Open surface (iconless): fills the field's trailing space so a click\n anywhere but the segments opens the calendar. ─── */\n\n .ddga-date-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__open {\n cursor: not-allowed;\n }\n\n /* ─── Hover (outlined style only: border darkens to gray-700) ─── */\n\n .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n\n /* ─── Focus (shadow-md + full-width 2px dark underline, NOT a ring) ─── */\n\n .ddga-date-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-date-picker-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-date-picker-trigger[data-focus-within]:not([data-pressed])::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (JS-driven [data-pressed] — `:active` is unreliable on the\n react-aria Group; see usePressedState — plus a static --pressed hook for\n stories): gray-100 fill + a centered ~50% underline (focus suppresses its\n full-width underline while pressed). ─── */\n\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-picker-trigger--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (error-700 border) ─── */\n\n .ddga-date-picker-trigger--error,\n .ddga-date-picker-trigger--error[data-hovered],\n .ddga-date-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only / Disabled (gray-300 border, transparent fill, no opacity) ─── */\n\n .ddga-date-picker-trigger[data-readonly],\n .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__label,\n .ddga-field:has(.ddga-date-picker-trigger[data-disabled]) .ddga-date-picker__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Helper / error line ─── */\n\n .ddga-field:has(.ddga-date-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n\n /* ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── */\n\n [data-theme='dark'] .ddga-date-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-picker-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment,\n [data-theme='dark']\n .ddga-date-picker-trigger[data-disabled]\n .ddga-date-picker__segment[data-placeholder] {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-picker-trigger,\n .ddga-date-picker-trigger::after {\n transition: none;\n }\n }\n\n /* ─── Forced colors (the focus underline is invisible; restore an outline) ─── */\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-trigger[data-disabled] {\n border-color: GrayText;\n }\n .ddga-date-picker-trigger[data-disabled] .ddga-date-picker__segment {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA Content Switcher — a segmented control. Items butt together into one\n bar with 0.5px dividers; the container has no surface of its own (outer\n radius comes from the first/last items). Radix sets [data-state='on'] on\n the selected item. */\n\n .ddga-content-switcher {\n display: inline-flex;\n align-items: stretch;\n inline-size: fit-content;\n }\n\n .ddga-content-switcher__item {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: 76px;\n border: 0 solid var(--ddga-color-input);\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-text-primary);\n font: inherit;\n font-weight: var(--ddga-font-weight-regular);\n white-space: nowrap;\n cursor: pointer;\n user-select: none;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n /* 0.5px divider between segments (logical → flips RTL) */\n .ddga-content-switcher__item + .ddga-content-switcher__item {\n border-inline-start-width: 0.5px;\n }\n\n /* outer rounding only (radius-md 8) */\n .ddga-content-switcher__item:first-child {\n border-start-start-radius: var(--ddga-radius-md);\n border-end-start-radius: var(--ddga-radius-md);\n }\n .ddga-content-switcher__item:last-child {\n border-start-end-radius: var(--ddga-radius-md);\n border-end-end-radius: var(--ddga-radius-md);\n }\n\n /* selected → black fill, adapting on-foreground text */\n .ddga-content-switcher__item[data-state='on'] {\n background-color: var(--ddga-color-foreground);\n color: var(--ddga-color-background);\n }\n\n /* ─── Sizes (height / inline padding / font: 32·8·16 / 40·12·18 / 48·16·20) ─── */\n\n .ddga-content-switcher--sm .ddga-content-switcher__item {\n block-size: 32px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n line-height: 24px;\n }\n .ddga-content-switcher--md .ddga-content-switcher__item {\n block-size: 40px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-lg);\n line-height: 28px;\n }\n .ddga-content-switcher--lg .ddga-content-switcher__item {\n block-size: 48px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-xl);\n line-height: 30px;\n }\n\n /* ─── On-color (on a dark / brand surface) ─── */\n\n .ddga-content-switcher--on-color .ddga-content-switcher__item {\n border-color: var(--ddga-alpha-white-10);\n background-color: var(--ddga-alpha-white-20);\n color: #fff;\n }\n .ddga-content-switcher--on-color .ddga-content-switcher__item[data-state='on'] {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n /* Disabled — not an SDGA state; a minimal safe affordance (Radix passes\n `disabled` through). */\n .ddga-content-switcher__item:disabled {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n /* ─── Focus: 2px #161616 ink ring + 1px inset white (raised over neighbors) ─── */\n\n .ddga-content-switcher__item:focus-visible {\n position: relative;\n z-index: 1;\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n box-shadow: inset 0 0 0 3px var(--ddga-color-background);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-content-switcher__item {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-content-switcher__item[data-state='on'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-content-switcher__item:focus-visible {\n outline-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n .ddga-divider {\n /* Single hook so consumers can recolor per-instance; defaults to SDGA Neutral (gray-300). */\n --ddga-divider-color: var(--ddga-color-input);\n border: 0;\n }\n\n /* SDGA Color axis — fixed white tones are for colored/dark surfaces (no theme-flip). */\n .ddga-divider--tone-neutral {\n --ddga-divider-color: var(--ddga-color-input);\n }\n .ddga-divider--tone-primary {\n --ddga-divider-color: var(--ddga-color-primary);\n }\n .ddga-divider--tone-alpha-white {\n --ddga-divider-color: var(--ddga-alpha-white-30);\n }\n .ddga-divider--tone-white {\n --ddga-divider-color: #ffffff;\n }\n\n .ddga-divider--horizontal {\n display: block;\n block-size: 0;\n inline-size: 100%;\n /* Border (not background) so the dashed style works without a fill. */\n border-block-start: 1px solid var(--ddga-divider-color);\n }\n\n /* `inline-block` so a vertical divider drops next to inline content (e.g. button\n rows) without forcing a flex parent; flex/grid rows still get 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 .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): the row IS the divider, not a 0px top-border line. */\n .ddga-divider--labeled {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\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 /* `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 @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 /* SDGA Tabs (Platforms Code): a single underline style. Size lives on the\n root (.ddga-tabs--{sm,md,lg}); orientation comes from Radix's\n `data-orientation`. Logical properties keep the RTL flip free. */\n\n .ddga-tabs {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n color: var(--ddga-text-primary);\n /* Indicator + track rail share one weight (SDGA 3px). */\n --ddga-tabs-indicator-thickness: 3px;\n }\n .ddga-tabs[data-orientation='vertical'] {\n flex-direction: row;\n gap: var(--ddga-space-4);\n }\n\n /* ─── List + track rail ─── */\n\n .ddga-tabs__list {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n position: relative;\n }\n .ddga-tabs__list[data-orientation='vertical'] {\n flex-direction: column;\n align-items: stretch;\n }\n\n /* Horizontal baseline rail (gray-300, rounded) behind every tab; the active\n green segment paints on top of it. Vertical lists have no rail. */\n .ddga-tabs__list[data-orientation='horizontal']::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n block-size: var(--ddga-tabs-indicator-thickness);\n background-color: var(--ddga-color-input);\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-tabs__list--full-width {\n inline-size: 100%;\n }\n .ddga-tabs__list--full-width .ddga-tabs__trigger {\n flex: 1;\n }\n\n .ddga-tabs__list--flush .ddga-tabs__trigger:first-child {\n margin-inline-start: calc(-1 * var(--ddga-tabs-pad-inline, 0px));\n }\n\n /* ─── Trigger (Radix renders a <button>) ─── */\n\n .ddga-tabs__trigger {\n appearance: none;\n background: transparent;\n border: 0;\n margin: 0;\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n font-family: inherit;\n font-weight: 500;\n line-height: 1.25rem;\n white-space: nowrap;\n cursor: pointer;\n transition:\n color 150ms ease,\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger {\n font-weight: 400;\n }\n\n .ddga-tabs__trigger::after {\n content: '';\n position: absolute;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n pointer-events: none;\n }\n .ddga-tabs[data-orientation='horizontal'] .ddga-tabs__trigger::after {\n inset-block-end: 0;\n inset-inline: var(--ddga-tabs-pad-inline);\n block-size: var(--ddga-tabs-indicator-thickness);\n }\n .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger::after {\n inset-inline-start: 0;\n inset-block: var(--ddga-space-2);\n inline-size: var(--ddga-tabs-indicator-thickness);\n }\n\n .ddga-tabs__trigger:hover,\n .ddga-tabs__trigger--hovered,\n .ddga-tabs__trigger:active,\n .ddga-tabs__trigger--pressed {\n color: var(--ddga-text-primary);\n }\n .ddga-tabs__trigger:hover:not([data-state='active']):not([data-disabled]),\n .ddga-tabs__trigger--hovered:not([data-state='active']) {\n background-color: var(--ddga-color-muted);\n }\n .ddga-tabs__trigger:active:not([data-state='active']):not([data-disabled]),\n .ddga-tabs__trigger--pressed:not([data-state='active']) {\n background-color: var(--ddga-color-border);\n }\n .ddga-tabs__trigger:hover:not([data-state='active'])::after,\n .ddga-tabs__trigger--hovered:not([data-state='active'])::after,\n .ddga-tabs__trigger:active:not([data-state='active'])::after,\n .ddga-tabs__trigger--pressed:not([data-state='active'])::after {\n background-color: var(--ddga-text-primary);\n }\n\n .ddga-tabs__trigger[data-state='active'] {\n color: var(--ddga-text-primary);\n font-weight: 700;\n }\n .ddga-tabs[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n font-weight: 600;\n }\n .ddga-tabs__trigger[data-state='active']::after {\n background-color: var(--ddga-color-primary);\n }\n\n .ddga-tabs__trigger:focus-visible,\n .ddga-tabs__trigger--focused {\n outline: none;\n border-radius: var(--ddga-radius-xs);\n box-shadow:\n inset 0 0 0 3px var(--ddga-text-primary),\n 0 0 0 1px var(--ddga-color-background);\n }\n\n .ddga-tabs__trigger[data-disabled],\n .ddga-tabs__trigger[aria-disabled='true'] {\n color: var(--ddga-text-placeholder);\n cursor: not-allowed;\n }\n .ddga-tabs__trigger[data-disabled]:hover,\n .ddga-tabs__trigger[aria-disabled='true']:hover {\n background-color: transparent;\n color: var(--ddga-text-placeholder);\n }\n .ddga-tabs__trigger[data-disabled]:not([data-state='active'])::after,\n .ddga-tabs__trigger[aria-disabled='true']:not([data-state='active'])::after {\n background-color: transparent;\n }\n .ddga-tabs__trigger[data-disabled][data-state='active']::after,\n .ddga-tabs__trigger[aria-disabled='true'][data-state='active']::after {\n background-color: var(--ddga-text-placeholder);\n }\n\n /* ─── Icons (fixed 16px, SDGA leading icon) ─── */\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: 1rem;\n block-size: 1rem;\n }\n\n /* ─── Sizes (per orientation) ─── */\n\n .ddga-tabs--sm[data-orientation='horizontal'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n --ddga-tabs-pad-inline: var(--ddga-space-3);\n }\n .ddga-tabs--md[data-orientation='horizontal'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-sm);\n --ddga-tabs-pad-inline: var(--ddga-space-4);\n }\n .ddga-tabs--lg[data-orientation='horizontal'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-sm);\n --ddga-tabs-pad-inline: var(--ddga-space-4);\n }\n\n /* Vertical: 6px/2px paddings have no token (DGA spacing-sm/xxs we lack) → raw px. */\n .ddga-tabs--sm[data-orientation='vertical'] .ddga-tabs__trigger {\n padding-block: 2px;\n padding-inline: 6px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tabs--md[data-orientation='vertical'] .ddga-tabs__trigger {\n padding-block: 6px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-tabs--lg[data-orientation='vertical'] .ddga-tabs__trigger {\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n }\n\n /* Icon-only (off-spec extra) — square the inline padding around the glyph. */\n .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-2);\n }\n .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-3);\n }\n .ddga-tabs--lg .ddga-tabs__trigger--icon-only {\n padding-inline: var(--ddga-space-4);\n }\n\n /* ─── Overflow (\"More Tab\") ─── */\n\n .ddga-tabs__list-wrap {\n position: relative;\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n }\n /* The wrap owns the rail so it spans under the overflow trigger too. */\n .ddga-tabs__list-wrap::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n block-size: var(--ddga-tabs-indicator-thickness);\n background-color: var(--ddga-color-input);\n border-radius: var(--ddga-radius-full);\n }\n .ddga-tabs__list-wrap .ddga-tabs__list::after {\n content: none;\n }\n .ddga-tabs__trigger--overflowed {\n display: none;\n }\n\n .ddga-tabs__more {\n appearance: none;\n border: 0;\n background: transparent;\n margin: 0;\n margin-inline-start: auto;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding-inline: var(--ddga-space-3);\n flex-shrink: 0;\n cursor: pointer;\n }\n .ddga-tabs__more-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 2rem;\n block-size: 2rem;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-gray-700);\n transition:\n color 150ms ease,\n background-color 150ms ease;\n }\n .ddga-tabs__more-icon {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n .ddga-tabs__more:hover .ddga-tabs__more-button {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-tabs__more:active .ddga-tabs__more-button {\n background-color: var(--ddga-color-border);\n }\n .ddga-tabs__more[data-active] .ddga-tabs__more-button,\n .ddga-tabs__more[data-state='open'] .ddga-tabs__more-button {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-tabs__more:focus-visible {\n outline: none;\n }\n .ddga-tabs__more:focus-visible .ddga-tabs__more-button {\n border-radius: var(--ddga-radius-xs);\n box-shadow:\n inset 0 0 0 1px var(--ddga-color-background),\n 0 0 0 3px var(--ddga-text-primary);\n }\n\n /* ─── Content ─── */\n\n .ddga-tabs__content {\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 [data-theme='dark'] .ddga-tabs__trigger,\n [data-theme='dark'] .ddga-tabs__more-button {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark'] .ddga-tabs__trigger[data-state='active'],\n [data-theme='dark'] .ddga-tabs__trigger:hover,\n [data-theme='dark'] .ddga-tabs__trigger:active,\n [data-theme='dark'] .ddga-tabs__trigger:focus-visible,\n [data-theme='dark'] .ddga-tabs__trigger--hovered,\n [data-theme='dark'] .ddga-tabs__trigger--pressed,\n [data-theme='dark'] .ddga-tabs__trigger--focused,\n [data-theme='dark'] .ddga-tabs__more:hover .ddga-tabs__more-button,\n [data-theme='dark'] .ddga-tabs__more[data-active] .ddga-tabs__more-button {\n color: var(--ddga-text-primary);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-tabs__trigger,\n .ddga-tabs__more-button {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-tabs__list[data-orientation='horizontal']::after,\n .ddga-tabs__list-wrap::after {\n background-color: CanvasText;\n }\n .ddga-tabs__trigger[data-state='active'] {\n color: Highlight;\n }\n .ddga-tabs__trigger[data-state='active']::after {\n background-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 /* ─── Root ─── */\n\n .ddga-avatar {\n --ddga-avatar-size: 40px;\n --ddga-avatar-font-size: var(--ddga-font-size-sm);\n --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\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 /* No overflow:hidden — status dot overhangs; image/fallback self-clip via border-radius. */\n background-color: var(--ddga-color-muted);\n color: var(--ddga-gray-700);\n font-size: var(--ddga-avatar-font-size);\n font-weight: var(--ddga-avatar-font-weight);\n line-height: 1;\n vertical-align: middle;\n box-shadow: 0 0 0 2px var(--ddga-color-background);\n }\n\n /* Per size: SDGA type step + weight (weight lowers as the avatar grows).\n 2xl/3xl have no exact token (SDGA 30/36) → nearest step. */\n .ddga-avatar--xs {\n --ddga-avatar-size: 24px;\n --ddga-avatar-font-size: var(--ddga-font-size-2xs); /* SDGA 10px */\n --ddga-avatar-font-weight: var(--ddga-font-weight-bold);\n }\n .ddga-avatar--sm {\n --ddga-avatar-size: 32px;\n --ddga-avatar-font-size: var(--ddga-font-size-xs);\n --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-avatar--md {\n --ddga-avatar-size: 40px;\n --ddga-avatar-font-size: var(--ddga-font-size-sm);\n --ddga-avatar-font-weight: var(--ddga-font-weight-semibold);\n }\n .ddga-avatar--lg {\n --ddga-avatar-size: 48px;\n --ddga-avatar-font-size: var(--ddga-font-size-base);\n --ddga-avatar-font-weight: var(--ddga-font-weight-medium);\n }\n .ddga-avatar--xl {\n --ddga-avatar-size: 64px;\n --ddga-avatar-font-size: var(--ddga-font-size-xl);\n --ddga-avatar-font-weight: var(--ddga-font-weight-medium);\n }\n .ddga-avatar--2xl {\n --ddga-avatar-size: 80px;\n --ddga-avatar-font-size: var(--ddga-font-size-3xl);\n --ddga-avatar-font-weight: var(--ddga-font-weight-regular);\n }\n .ddga-avatar--3xl {\n --ddga-avatar-size: 120px;\n --ddga-avatar-font-size: var(--ddga-font-size-3xl);\n --ddga-avatar-font-weight: var(--ddga-font-weight-regular);\n box-shadow: 0 0 0 4px var(--ddga-color-background);\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-sm);\n }\n .ddga-avatar--square.ddga-avatar--3xl {\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 /* Overlap; logical margin flips in RTL. Separating ring = base box-shadow. */\n margin-inline-start: calc(var(--ddga-avatar-size) * -0.25);\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 .ddga-modal__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 /* SDGA: white card, uniform 24 padding, 8 gap between regions, radius-md,\n navy shadow-3xl, NO border. */\n .ddga-modal {\n position: fixed;\n /* Physical top/left + translate keeps centering direction-agnostic (RTL-safe). */\n top: 50%;\n left: 50%;\n transform: translate(-50%, -50%);\n z-index: 61;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-6);\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-3xl);\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 /* SDGA desktop width 600 / mobile narrows to viewport. */\n .ddga-modal--default {\n max-inline-size: 600px;\n }\n .ddga-modal--full {\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 .ddga-modal__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n /* No featured-icon row to clear the corner close → reserve end space. */\n padding-inline-end: var(--ddga-space-8);\n }\n .ddga-modal__header:has(.ddga-modal__featured-icon) {\n padding-inline-end: 0;\n }\n\n /* SDGA Center Align: centre the icon/title/body/actions; close stays cornered. */\n .ddga-modal--centered .ddga-modal__header {\n align-items: center;\n text-align: center;\n padding-inline-end: 0;\n }\n .ddga-modal--centered .ddga-modal__body {\n text-align: center;\n }\n .ddga-modal--centered .ddga-modal__footer {\n justify-content: center;\n }\n\n .ddga-modal__featured-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 2.5rem;\n block-size: 2.5rem;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-50);\n color: var(--ddga-text-primary);\n }\n .ddga-modal__featured-icon > svg {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n\n /* SDGA Text lg/Semibold 18/28, text-display. */\n .ddga-modal__title {\n margin: 0;\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.75rem;\n color: var(--ddga-gray-800);\n }\n\n /* SDGA Text sm/Regular 14/20, text-primary-paragraph. */\n .ddga-modal__description {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\n }\n\n /* Body region: SDGA supporting copy (pb-16) + the scroll region for long\n content (grows between header and footer, scrolls internally). */\n .ddga-modal__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding-block-end: var(--ddga-space-4);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\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 }\n\n /* SDGA mobile: actions stack full-width, primary on top (DOM-last → reverse). */\n @media (max-width: 480px) {\n .ddga-modal__footer {\n flex-direction: column-reverse;\n align-items: stretch;\n }\n }\n\n /* Corner close (X) — SDGA: 32 box pinned to the title's top-end corner,\n 20px glyph, radius-sm. */\n .ddga-modal__close {\n position: absolute;\n inset-block-start: 0.875rem;\n inset-inline-end: 0.875rem;\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-primary);\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: 1.25rem;\n block-size: 1.25rem;\n }\n .ddga-modal__close:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-modal__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\n }\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 /* Dark: raw ramp colours don't flip on their own — map to flipping semantics. */\n [data-theme='dark'] .ddga-modal__title {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-modal__description,\n [data-theme='dark'] .ddga-modal__body {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark'] .ddga-modal__featured-icon {\n background-color: var(--ddga-alpha-white-10);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-modal,\n .ddga-modal__overlay {\n animation-duration: 0ms;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-modal {\n border: 1px solid CanvasText;\n }\n .ddga-modal__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","/* Dark mode. Semantic tokens alias Tier-1 primitives + the brand ramp, so a\n primitive or brand/accent override adapts dark automatically. The mode-aware\n primary step (light 600 → dark 400) lives here. Shadows stay literal (not a ramp). */\n[data-theme='dark'] {\n color-scheme: dark;\n\n --ddga-color-background: var(--ddga-gray-900);\n --ddga-color-foreground: var(--ddga-gray-100);\n --ddga-color-muted: var(--ddga-gray-800);\n --ddga-color-muted-foreground: var(--ddga-gray-400);\n --ddga-color-border: var(--ddga-gray-700);\n --ddga-color-card: var(--ddga-gray-800);\n --ddga-color-card-foreground: var(--ddga-gray-100);\n --ddga-color-input: var(--ddga-gray-700);\n\n --ddga-color-primary: var(--ddga-brand-400);\n --ddga-color-primary-hover: var(--ddga-brand-300);\n --ddga-color-primary-active: var(--ddga-brand-500);\n --ddga-color-primary-foreground: var(--ddga-gray-950);\n\n --ddga-color-secondary: var(--ddga-gray-800);\n --ddga-color-secondary-hover: var(--ddga-gray-700);\n --ddga-color-secondary-foreground: var(--ddga-gray-100);\n\n --ddga-color-destructive: var(--ddga-error-400);\n --ddga-color-destructive-hover: var(--ddga-error-500);\n --ddga-color-destructive-foreground: var(--ddga-gray-950);\n\n --ddga-color-error: var(--ddga-error-400);\n --ddga-color-error-hover: var(--ddga-error-500);\n --ddga-color-error-foreground: var(--ddga-gray-950);\n --ddga-color-success: var(--ddga-success-400);\n --ddga-color-success-hover: var(--ddga-success-500);\n --ddga-color-success-foreground: var(--ddga-gray-950);\n --ddga-color-warning: var(--ddga-warning-400);\n --ddga-color-warning-hover: var(--ddga-warning-500);\n --ddga-color-warning-foreground: var(--ddga-gray-950);\n --ddga-color-info: var(--ddga-info-400);\n --ddga-color-info-hover: var(--ddga-info-500);\n --ddga-color-info-foreground: var(--ddga-gray-950);\n\n --ddga-color-ring: var(--ddga-brand-400);\n\n --ddga-text-primary: #ffffff;\n --ddga-text-secondary: var(--ddga-alpha-white-70);\n --ddga-text-tertiary: var(--ddga-alpha-white-60);\n --ddga-text-placeholder: var(--ddga-gray-500);\n\n /* Stronger than light (navy is invisible on dark). */\n --ddga-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.4), 0 1px 2px 0 rgb(0 0 0 / 0.3);\n --ddga-shadow-md: 0 2px 4px -2px rgb(0 0 0 / 0.3), 0 4px 8px -2px rgb(0 0 0 / 0.45);\n --ddga-shadow-lg: 0 4px 6px -2px rgb(0 0 0 / 0.3), 0 12px 16px -4px rgb(0 0 0 / 0.5);\n --ddga-shadow-xl: 0 8px 8px -4px rgb(0 0 0 / 0.3), 0 20px 24px -4px rgb(0 0 0 / 0.5);\n --ddga-shadow-2xl: 0 24px 48px -12px rgb(0 0 0 / 0.6);\n --ddga-shadow-3xl: 0 32px 64px -12px rgb(0 0 0 / 0.55);\n}\n","/* Generated by tokens/scripts/generate-css.ts , do not edit by hand. */\n.ddga-theme-sa-green {\n --ddga-brand-25: var(--ddga-sa-25);\n --ddga-brand-50: var(--ddga-sa-50);\n --ddga-brand-100: var(--ddga-sa-100);\n --ddga-brand-200: var(--ddga-sa-200);\n --ddga-brand-300: var(--ddga-sa-300);\n --ddga-brand-400: var(--ddga-sa-400);\n --ddga-brand-500: var(--ddga-sa-500);\n --ddga-brand-600: var(--ddga-sa-600);\n --ddga-brand-700: var(--ddga-sa-700);\n --ddga-brand-800: var(--ddga-sa-800);\n --ddga-brand-900: var(--ddga-sa-900);\n --ddga-brand-950: var(--ddga-sa-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-gray {\n --ddga-brand-25: var(--ddga-gray-25);\n --ddga-brand-50: var(--ddga-gray-50);\n --ddga-brand-100: var(--ddga-gray-100);\n --ddga-brand-200: var(--ddga-gray-200);\n --ddga-brand-300: var(--ddga-gray-300);\n --ddga-brand-400: var(--ddga-gray-400);\n --ddga-brand-500: var(--ddga-gray-500);\n --ddga-brand-600: var(--ddga-gray-600);\n --ddga-brand-700: var(--ddga-gray-700);\n --ddga-brand-800: var(--ddga-gray-800);\n --ddga-brand-900: var(--ddga-gray-900);\n --ddga-brand-950: var(--ddga-gray-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-error {\n --ddga-brand-25: var(--ddga-error-25);\n --ddga-brand-50: var(--ddga-error-50);\n --ddga-brand-100: var(--ddga-error-100);\n --ddga-brand-200: var(--ddga-error-200);\n --ddga-brand-300: var(--ddga-error-300);\n --ddga-brand-400: var(--ddga-error-400);\n --ddga-brand-500: var(--ddga-error-500);\n --ddga-brand-600: var(--ddga-error-600);\n --ddga-brand-700: var(--ddga-error-700);\n --ddga-brand-800: var(--ddga-error-800);\n --ddga-brand-900: var(--ddga-error-900);\n --ddga-brand-950: var(--ddga-error-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-warning {\n --ddga-brand-25: var(--ddga-warning-25);\n --ddga-brand-50: var(--ddga-warning-50);\n --ddga-brand-100: var(--ddga-warning-100);\n --ddga-brand-200: var(--ddga-warning-200);\n --ddga-brand-300: var(--ddga-warning-300);\n --ddga-brand-400: var(--ddga-warning-400);\n --ddga-brand-500: var(--ddga-warning-500);\n --ddga-brand-600: var(--ddga-warning-600);\n --ddga-brand-700: var(--ddga-warning-700);\n --ddga-brand-800: var(--ddga-warning-800);\n --ddga-brand-900: var(--ddga-warning-900);\n --ddga-brand-950: var(--ddga-warning-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-success {\n --ddga-brand-25: var(--ddga-success-25);\n --ddga-brand-50: var(--ddga-success-50);\n --ddga-brand-100: var(--ddga-success-100);\n --ddga-brand-200: var(--ddga-success-200);\n --ddga-brand-300: var(--ddga-success-300);\n --ddga-brand-400: var(--ddga-success-400);\n --ddga-brand-500: var(--ddga-success-500);\n --ddga-brand-600: var(--ddga-success-600);\n --ddga-brand-700: var(--ddga-success-700);\n --ddga-brand-800: var(--ddga-success-800);\n --ddga-brand-900: var(--ddga-success-900);\n --ddga-brand-950: var(--ddga-success-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-info {\n --ddga-brand-25: var(--ddga-info-25);\n --ddga-brand-50: var(--ddga-info-50);\n --ddga-brand-100: var(--ddga-info-100);\n --ddga-brand-200: var(--ddga-info-200);\n --ddga-brand-300: var(--ddga-info-300);\n --ddga-brand-400: var(--ddga-info-400);\n --ddga-brand-500: var(--ddga-info-500);\n --ddga-brand-600: var(--ddga-info-600);\n --ddga-brand-700: var(--ddga-info-700);\n --ddga-brand-800: var(--ddga-info-800);\n --ddga-brand-900: var(--ddga-info-900);\n --ddga-brand-950: var(--ddga-info-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n\n.ddga-theme-gold {\n --ddga-brand-25: var(--ddga-gold-25);\n --ddga-brand-50: var(--ddga-gold-50);\n --ddga-brand-100: var(--ddga-gold-100);\n --ddga-brand-200: var(--ddga-gold-200);\n --ddga-brand-300: var(--ddga-gold-300);\n --ddga-brand-400: var(--ddga-gold-400);\n --ddga-brand-500: var(--ddga-gold-500);\n --ddga-brand-600: var(--ddga-gold-600);\n --ddga-brand-700: var(--ddga-gold-700);\n --ddga-brand-800: var(--ddga-gold-800);\n --ddga-brand-900: var(--ddga-gold-900);\n --ddga-brand-950: var(--ddga-gold-950);\n --ddga-color-primary-foreground: #0D121C;\n}\n\n.ddga-theme-lavender {\n --ddga-brand-25: var(--ddga-lavender-25);\n --ddga-brand-50: var(--ddga-lavender-50);\n --ddga-brand-100: var(--ddga-lavender-100);\n --ddga-brand-200: var(--ddga-lavender-200);\n --ddga-brand-300: var(--ddga-lavender-300);\n --ddga-brand-400: var(--ddga-lavender-400);\n --ddga-brand-500: var(--ddga-lavender-500);\n --ddga-brand-600: var(--ddga-lavender-600);\n --ddga-brand-700: var(--ddga-lavender-700);\n --ddga-brand-800: var(--ddga-lavender-800);\n --ddga-brand-900: var(--ddga-lavender-900);\n --ddga-brand-950: var(--ddga-lavender-950);\n --ddga-color-primary-foreground: #FFFFFF;\n}\n","@layer ddga-components {\n .ddga-file-upload {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n color: var(--ddga-text-primary);\n }\n\n /* ─── Label + description ─── */\n\n .ddga-file-upload__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n }\n\n .ddga-file-upload[data-variant='button'] > .ddga-file-upload__browse {\n align-self: flex-start;\n }\n\n .ddga-file-upload__label {\n display: flex;\n align-items: flex-end;\n gap: 0.25rem;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5;\n }\n\n .ddga-file-upload__required {\n color: var(--ddga-error-700);\n }\n\n .ddga-file-upload__description {\n color: var(--ddga-text-secondary);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5;\n }\n\n /* ─── Drop zone ─── */\n\n .ddga-file-upload__dropzone {\n position: relative;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-6);\n padding: var(--ddga-space-6);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-muted);\n text-align: center;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-file-upload__border {\n position: absolute;\n inset: 0;\n inline-size: 100%;\n block-size: 100%;\n overflow: visible;\n color: var(--ddga-color-input);\n pointer-events: none;\n transition: color 150ms ease;\n }\n\n .ddga-file-upload__border rect {\n fill: none;\n stroke: currentColor;\n stroke-width: 1;\n stroke-dasharray: 10 5;\n }\n\n .ddga-file-upload__dropzone[data-dragging] {\n background-color: var(--ddga-success-25);\n color: var(--ddga-success-700);\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__border {\n color: var(--ddga-success-700);\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__border rect {\n stroke-width: 2;\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__icon,\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__title,\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__description {\n color: var(--ddga-success-700);\n }\n\n .ddga-file-upload__dropzone[data-dragging] .ddga-file-upload__browse {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__dropzone[data-disabled] {\n cursor: not-allowed;\n background-color: transparent;\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__border {\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__icon {\n color: var(--ddga-gray-400);\n opacity: 0.7;\n }\n\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__title,\n .ddga-file-upload__dropzone[data-disabled] .ddga-file-upload__description {\n color: var(--ddga-gray-400);\n }\n\n .ddga-file-upload__icon {\n flex: none;\n font-size: 1.5rem;\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__copy {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n word-break: break-word;\n }\n\n .ddga-file-upload__title {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n }\n\n /* Visually-hidden real file input (the Browse button is the keyboard trigger). */\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__file {\n display: flex;\n flex-direction: column;\n overflow: hidden;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-file-upload__file--error {\n border-color: var(--ddga-error-700);\n }\n\n .ddga-file-upload__file-main {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-file-upload__file-indicator {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n\n .ddga-file-upload__file-indicator--loading {\n color: var(--ddga-text-secondary);\n }\n\n .ddga-file-upload__file-indicator--loading svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n .ddga-file-upload__file-indicator--success,\n .ddga-file-upload__file-indicator--error {\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-file-upload__file-indicator--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n\n .ddga-file-upload__file-indicator--error {\n background-color: var(--ddga-color-error);\n color: var(--ddga-color-error-foreground);\n }\n\n .ddga-file-upload__file-indicator--success svg,\n .ddga-file-upload__file-indicator--error svg {\n inline-size: 0.75rem;\n block-size: 0.75rem;\n }\n\n .ddga-file-upload__file-name {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4286;\n }\n\n .ddga-file-upload__file-remove {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background: transparent;\n color: var(--ddga-text-secondary);\n font-size: 1rem;\n cursor: pointer;\n }\n\n .ddga-file-upload__file-remove:hover {\n background-color: var(--ddga-color-secondary-hover);\n color: var(--ddga-text-primary);\n }\n\n .ddga-file-upload__file-remove:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n .ddga-file-upload__file-error-row {\n padding: var(--ddga-space-2);\n border-top: 1px solid var(--ddga-color-input);\n }\n\n .ddga-file-upload__file-error {\n color: var(--ddga-color-error);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.4286;\n }\n\n /* ─── Forced colors (Windows High Contrast) ─── */\n\n /* color/bg are neutralized in forced-colors — keep the active target visible. */\n @media (forced-colors: active) {\n .ddga-file-upload__dropzone[data-dragging] {\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. Mirrors the SDGA \"Textarea\" field model (= Text input, minus\n the size axis): single size, three fill styles, gray-400 border, multi-line.\n The control owns the box; the <textarea> inside is borderless/transparent so\n the focus/pressed `::after` underline can render. */\n\n .ddga-field[data-slot='textarea-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-textarea__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-textarea__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/state/style) ─── */\n\n .ddga-textarea {\n position: relative;\n display: block;\n inline-size: 100%;\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-textarea--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-textarea--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <textarea>: transparent, borderless, multi-line) ─── */\n\n .ddga-textarea__field {\n display: block;\n inline-size: 100%;\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n .ddga-textarea__field--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea__field--resize-none {\n resize: none;\n }\n\n /* Autofill: repaint with tokens (see text-input.css for the why). */\n .ddga-textarea__field:-webkit-autofill,\n .ddga-textarea__field:-webkit-autofill:hover,\n .ddga-textarea__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-gray-950);\n }\n\n /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── */\n\n .ddga-textarea--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n /* ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n .ddga-textarea:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-textarea--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-textarea::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-textarea:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). Real state is :active; `--pressed` is a static hook so the\n state is visible in Storybook. The centered underline overrides the\n focus full-width one while the mouse is down. */\n\n .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n .ddga-textarea--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-textarea:active::after,\n .ddga-textarea--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n .ddga-textarea--error,\n .ddga-textarea--error:hover:not(:focus-within),\n .ddga-textarea--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── */\n\n .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n resize: none;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled) .ddga-textarea__label,\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── */\n\n .ddga-field[data-slot='textarea-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='textarea-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n /* ─── Dark mode ─── */\n /* SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n flipping semantic tokens so text/affordances stay readable on dark. Exact\n DGA dark palette deferred. */\n\n [data-theme='dark'] .ddga-textarea {\n border-color: var(--ddga-color-input);\n }\n [data-theme='dark'] .ddga-textarea__field {\n color: var(--ddga-text-primary);\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-textarea--filled-lighter,\n [data-theme='dark'] .ddga-textarea--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-textarea::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n [data-theme='dark'] .ddga-textarea--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field,\n [data-theme='dark']\n .ddga-textarea:has(.ddga-textarea__field:disabled)\n .ddga-textarea__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__label,\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-textarea,\n .ddga-textarea::after {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: GrayText;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-tooltip {\n --ddga-tooltip-surface: #fff;\n --ddga-tooltip-heading: var(--ddga-gray-800);\n --ddga-tooltip-paragraph: var(--ddga-gray-700);\n\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n min-inline-size: 160px;\n max-inline-size: 240px;\n background-color: var(--ddga-tooltip-surface);\n border-radius: var(--ddga-radius-sm);\n box-shadow: var(--ddga-shadow-lg);\n font-family: inherit;\n z-index: 50;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n\n .ddga-tooltip--inverted {\n --ddga-tooltip-surface: var(--ddga-gray-800);\n --ddga-tooltip-heading: var(--ddga-gray-50);\n --ddga-tooltip-paragraph: var(--ddga-gray-100);\n }\n\n .ddga-tooltip__icon {\n display: flex;\n flex-shrink: 0;\n }\n\n /* SDGA help badge is fixed two-tone (gray-700 disc + white \"?\") on every surface. */\n .ddga-tooltip__glyph-disc {\n fill: #fff;\n }\n .ddga-tooltip__glyph-mark {\n fill: var(--ddga-gray-700);\n }\n\n .ddga-tooltip__text {\n display: flex;\n flex: 1 1 0;\n flex-direction: column;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n font-size: var(--ddga-font-size-xs);\n line-height: 18px;\n overflow-wrap: anywhere;\n word-break: break-word;\n }\n\n .ddga-tooltip__title {\n color: var(--ddga-tooltip-heading);\n font-weight: var(--ddga-font-weight-semibold);\n }\n\n .ddga-tooltip__body {\n color: var(--ddga-tooltip-paragraph);\n font-weight: var(--ddga-font-weight-regular);\n }\n\n .ddga-tooltip__arrow {\n fill: var(--ddga-tooltip-surface);\n }\n\n /* Dark theme: a bare tooltip adopts the dark surface; `inverted` flips to light. */\n [data-theme='dark'] .ddga-tooltip:not(.ddga-tooltip--inverted) {\n --ddga-tooltip-surface: var(--ddga-gray-800);\n --ddga-tooltip-heading: var(--ddga-gray-50);\n --ddga-tooltip-paragraph: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-tooltip--inverted {\n --ddga-tooltip-surface: #fff;\n --ddga-tooltip-heading: var(--ddga-gray-800);\n --ddga-tooltip-paragraph: var(--ddga-gray-700);\n }\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 /* ─── Help Icon trigger ─── */\n\n .ddga-tooltip-help {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: var(--ddga-space-1);\n border: 0;\n background: none;\n color: inherit;\n cursor: pointer;\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-tooltip-help:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 2px;\n }\n\n @media (forced-colors: active) {\n .ddga-tooltip {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n , see field.css. Only Select-specific styles live here. */\n\n /* ─── Label (above the trigger, matches Input) ─── */\n\n .ddga-select__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-select__required {\n color: var(--ddga-color-error);\n margin-inline-start: 0.125rem;\n }\n\n /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n .ddga-select-trigger {\n display: inline-flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* ─── Sizes (heights match Input) ─── */\n\n .ddga-select-trigger--sm {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-select-trigger--md {\n block-size: 36px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Trigger states ─── */\n\n .ddga-select-trigger:focus-visible {\n outline: none;\n border-color: var(--ddga-color-ring);\n box-shadow: 0 0 0 1px var(--ddga-color-ring);\n }\n\n /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n .ddga-select-trigger[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-select-trigger:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Error ─── */\n\n .ddga-select-trigger--error {\n border-color: var(--ddga-color-error);\n }\n .ddga-select-trigger--error:focus-visible {\n border-color: var(--ddga-color-error);\n box-shadow: 0 0 0 1px var(--ddga-color-error);\n }\n\n /* ─── Chevron (Radix Icon) ─── */\n\n .ddga-select__icon {\n flex-shrink: 0;\n color: var(--ddga-text-tertiary);\n transition: rotate 150ms ease;\n }\n .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n rotate: 180deg;\n }\n\n /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n .ddga-select-content {\n /* Match trigger width so the panel doesn't visually float wider/narrower\n than the field. `--radix-select-trigger-width` is exposed by Radix\n when `position=\"popper\"`. */\n min-inline-size: var(--radix-select-trigger-width);\n /* Cap height to viewport so long lists scroll instead of overflowing. */\n max-block-size: var(--radix-select-content-available-height);\n z-index: 50;\n overflow: hidden;\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-md);\n color: var(--ddga-text-primary);\n }\n\n .ddga-select-viewport {\n padding: var(--ddga-space-1);\n }\n\n /* ─── Item ─── */\n\n .ddga-select-item {\n position: relative;\n display: flex;\n align-items: center;\n block-size: 32px;\n padding-block: var(--ddga-space-2);\n padding-inline-start: var(--ddga-space-3);\n /* Reserve room for the trailing checkmark indicator so item text never\n collides with it when the row is selected. */\n padding-inline-end: var(--ddga-space-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 /* 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-gray-700);\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 gap: var(--ddga-space-1);\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-1);\n }\n\n /* ─── Link (a) ─── */\n\n .ddga-breadcrumb__link {\n color: var(--ddga-gray-700);\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 /* SDGA mutes the current page (disabled gray), not emphasize it. */\n .ddga-breadcrumb__page {\n color: var(--ddga-gray-400);\n font-weight: var(--ddga-font-weight-regular);\n }\n\n /* ─── Separator (li, decorative) ─── */\n\n .ddga-breadcrumb__separator {\n display: inline-flex;\n align-items: center;\n color: var(--ddga-gray-400);\n }\n\n /* SDGA chevron is 16px against the 14px (md) text. */\n .ddga-breadcrumb__separator > svg {\n inline-size: 1.143em;\n block-size: 1.143em;\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 /* Interactive overflow trigger (BreadcrumbEllipsisTrigger): chromeless button.\n The `…` is a Link → gray-700 (not the muted text-tertiary of the decorative span). */\n .ddga-breadcrumb__ellipsis-trigger {\n appearance: none;\n border: 0;\n background: none;\n padding: 0;\n font: inherit;\n color: var(--ddga-gray-700);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-breadcrumb__ellipsis-trigger:hover {\n color: var(--ddga-text-primary);\n }\n .ddga-breadcrumb__ellipsis-trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-color-ring);\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 .ddga-notification-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() caps at the SDGA desktop width (484) and fills narrow screens minus\n side breathing room — single rule, no vw media query. */\n inline-size: min(484px, calc(100% - 2rem));\n pointer-events: none;\n list-style: none;\n margin: 0;\n }\n .ddga-notification-toast-viewport > * {\n pointer-events: auto;\n }\n\n .ddga-notification-toast-viewport--containerized {\n position: absolute;\n }\n\n /* ─── Position anchors ─── */\n\n .ddga-notification-toast-viewport--top-start {\n inset-block-start: 0;\n inset-inline-start: 0;\n }\n .ddga-notification-toast-viewport--top-center {\n top: 0;\n left: 50%;\n transform: translateX(-50%);\n }\n .ddga-notification-toast-viewport--top-end {\n inset-block-start: 0;\n inset-inline-end: 0;\n }\n .ddga-notification-toast-viewport--bottom-start {\n inset-block-end: 0;\n inset-inline-start: 0;\n flex-direction: column-reverse;\n }\n .ddga-notification-toast-viewport--bottom-center {\n bottom: 0;\n left: 50%;\n transform: translateX(-50%);\n flex-direction: column-reverse;\n }\n .ddga-notification-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-notification-toast {\n --ddga-notification-toast-stripe: var(--ddga-gray-200);\n --ddga-notification-toast-icon-bg: var(--ddga-gray-50);\n --ddga-notification-toast-icon-fg: var(--ddga-text-primary);\n\n position: relative;\n inline-size: 100%;\n min-inline-size: 0;\n pointer-events: auto;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-6);\n background-color: #fff;\n border-radius: var(--ddga-radius-md);\n /* Toast shell: no border (InlineAlert has one), navy drop shadow instead. */\n box-shadow: var(--ddga-shadow-3xl);\n overflow: hidden;\n container-type: inline-size;\n font-family: inherit;\n }\n\n .ddga-notification-toast--default {\n --ddga-notification-toast-stripe: var(--ddga-gray-200);\n --ddga-notification-toast-icon-bg: var(--ddga-gray-50);\n --ddga-notification-toast-icon-fg: var(--ddga-text-primary);\n }\n .ddga-notification-toast--info {\n --ddga-notification-toast-stripe: var(--ddga-info-600);\n --ddga-notification-toast-icon-bg: var(--ddga-info-50);\n --ddga-notification-toast-icon-fg: var(--ddga-info-700);\n }\n .ddga-notification-toast--success {\n --ddga-notification-toast-stripe: var(--ddga-success-600);\n --ddga-notification-toast-icon-bg: var(--ddga-success-50);\n --ddga-notification-toast-icon-fg: var(--ddga-success-700);\n }\n .ddga-notification-toast--warning {\n --ddga-notification-toast-stripe: var(--ddga-warning-600);\n --ddga-notification-toast-icon-bg: var(--ddga-warning-50);\n --ddga-notification-toast-icon-fg: var(--ddga-warning-700);\n }\n .ddga-notification-toast--destructive {\n --ddga-notification-toast-stripe: var(--ddga-error-600);\n --ddga-notification-toast-icon-bg: var(--ddga-error-50);\n --ddga-notification-toast-icon-fg: var(--ddga-error-700);\n }\n\n /* ─── Accent stripe (leading edge → top edge on mobile) ─── */\n\n .ddga-notification-toast__stripe {\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0;\n inline-size: 8px;\n background-color: var(--ddga-notification-toast-stripe);\n opacity: 0.7;\n }\n\n /* ─── Header (featured icon · text · close) ─── */\n\n .ddga-notification-toast__header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'icon text close';\n align-items: start;\n column-gap: var(--ddga-space-3);\n inline-size: 100%;\n }\n\n .ddga-notification-toast__icon {\n grid-area: icon;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-notification-toast-icon-bg);\n color: var(--ddga-notification-toast-icon-fg);\n }\n .ddga-notification-toast__icon > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n .ddga-notification-toast__text {\n grid-area: text;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--ddga-space-2);\n min-block-size: 40px;\n min-inline-size: 0;\n word-break: break-word;\n }\n\n .ddga-notification-toast__title {\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-800);\n }\n .ddga-notification-toast__description {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\n }\n\n /* ─── Close button ─── */\n\n .ddga-notification-toast__close {\n grid-area: close;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-notification-toast__close > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-notification-toast__close:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification-toast__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* ─── Actions row (md ghost text buttons, indented under the text) ─── */\n\n .ddga-notification-toast__actions {\n display: flex;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-10);\n }\n\n .ddga-notification-toast__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n border: 0;\n background: transparent;\n border-radius: var(--ddga-radius-sm);\n font-family: inherit;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n white-space: nowrap;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-notification-toast__action:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification-toast__action:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* ─── Mobile restack (narrow toast) ─── */\n\n @container (max-width: 400px) {\n .ddga-notification-toast {\n padding-inline: var(--ddga-space-4);\n }\n .ddga-notification-toast__stripe {\n inset-block: 0 auto;\n inset-inline: 0;\n inline-size: auto;\n block-size: 8px;\n }\n .ddga-notification-toast__header {\n grid-template-areas:\n 'icon . close'\n 'text text text';\n row-gap: var(--ddga-space-4);\n }\n .ddga-notification-toast__text {\n min-block-size: 0;\n gap: var(--ddga-space-1);\n }\n .ddga-notification-toast__actions {\n flex-direction: column;\n align-items: stretch;\n padding-inline: 0;\n }\n\n .ddga-notification-toast__action {\n inline-size: 100%;\n }\n /* Only the primary (first) action fills; a secondary action stays ghost (SDGA). */\n .ddga-notification-toast__action:first-child {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification-toast__action:first-child:hover {\n background-color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-notification-toast__action:first-child {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-notification-toast__action:first-child:hover {\n background-color: var(--ddga-gray-700);\n }\n }\n\n /* ─── Animations (Radix data-state + swipe) ─── */\n .ddga-notification-toast[data-state='open'] {\n animation: ddga-notification-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-notification-toast[data-state='closed'] {\n animation: ddga-notification-toast-out 180ms ease forwards;\n }\n .ddga-notification-toast-viewport[data-position^='bottom-']\n .ddga-notification-toast[data-state='open'] {\n animation-name: ddga-notification-toast-slide-up;\n }\n .ddga-notification-toast-viewport[data-position^='top-']\n .ddga-notification-toast[data-state='open'] {\n animation-name: ddga-notification-toast-slide-down;\n }\n\n .ddga-notification-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-notification-toast[data-swipe='cancel'] {\n transform: translate3d(0, 0, 0);\n transition: transform 200ms ease-out;\n }\n .ddga-notification-toast[data-swipe='end'] {\n animation: ddga-notification-toast-out 180ms ease forwards;\n }\n\n @keyframes ddga-notification-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-notification-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-notification-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-notification-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-notification-toast,\n .ddga-notification-toast[data-state='open'],\n .ddga-notification-toast[data-state='closed'] {\n animation-duration: 1ms;\n }\n }\n\n /* ─── Dark ─── */\n\n [data-theme='dark'] .ddga-notification-toast {\n background-color: var(--ddga-gray-900, #111927);\n }\n [data-theme='dark'] .ddga-notification-toast__title {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-notification-toast__description {\n color: var(--ddga-gray-300);\n }\n [data-theme='dark'] .ddga-notification-toast__close,\n [data-theme='dark'] .ddga-notification-toast__action {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-notification-toast__close:hover,\n [data-theme='dark'] .ddga-notification-toast__action:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-notification-toast__close:focus-visible,\n [data-theme='dark'] .ddga-notification-toast__action:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-gray-50);\n }\n\n /* ─── Forced colors (no border + shadow vanish → add a visible edge) ─── */\n\n @media (forced-colors: active) {\n .ddga-notification-toast {\n border: 1px solid CanvasText;\n }\n .ddga-notification-toast__close:focus-visible,\n .ddga-notification-toast__action:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA \"Progress indicator\". Indicator size (circles 32 / dot 16) is driven by\n `--pi-size`; the connector is CSS-drawn via `::before` on every step except\n the last, running from this step's indicator to the next, coloured by THIS\n step's state. Logical properties handle the RTL flip. */\n\n .ddga-progress-indicator {\n --pi-size: 32px;\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n font-family: inherit;\n }\n\n .ddga-progress-indicator--dot {\n --pi-size: 16px;\n }\n\n .ddga-progress-indicator--horizontal {\n flex-direction: row;\n align-items: flex-start;\n }\n .ddga-progress-indicator--vertical {\n /* Inter-step gap = the connector's run between circles; generous so the line\n reads long even when a step has only a title (step height = circle height). */\n --pi-v-gap: var(--ddga-space-8);\n flex-direction: column;\n gap: var(--pi-v-gap);\n }\n\n .ddga-progress-indicator__step {\n position: relative;\n display: flex;\n min-inline-size: 0;\n gap: var(--ddga-space-2);\n }\n .ddga-progress-indicator--horizontal .ddga-progress-indicator__step {\n flex: 1;\n flex-direction: column;\n align-items: flex-start;\n }\n .ddga-progress-indicator--vertical .ddga-progress-indicator__step {\n flex-direction: row;\n align-items: flex-start;\n }\n\n .ddga-progress-indicator--horizontal .ddga-progress-indicator__step:not(:last-child)::before {\n content: '';\n position: absolute;\n block-size: 2px;\n inset-block-start: calc(var(--pi-size) / 2 - 1px);\n inset-inline-start: var(--pi-size);\n inset-inline-end: 0;\n }\n .ddga-progress-indicator--vertical .ddga-progress-indicator__step:not(:last-child)::before {\n content: '';\n position: absolute;\n inline-size: 2px;\n inset-inline-start: calc(var(--pi-size) / 2 - 1px);\n inset-block-start: var(--pi-size);\n inset-block-end: calc(-1 * var(--pi-v-gap));\n }\n /* Colour kept orientation-agnostic so `--completed` (equal specificity, later) wins. */\n .ddga-progress-indicator__step:not(:last-child)::before {\n background-color: var(--ddga-color-input);\n }\n .ddga-progress-indicator__step--completed:not(:last-child)::before {\n background-color: var(--ddga-color-primary);\n }\n\n /* Base indicator = the Upcoming state (gray-300 ring + gray-300 number). */\n .ddga-progress-indicator__indicator {\n position: relative;\n z-index: 1;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: var(--pi-size);\n block-size: var(--pi-size);\n border-radius: var(--ddga-radius-full);\n border: 2px solid var(--ddga-color-input);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-input);\n font-size: var(--ddga-font-size-base);\n font-weight: 500;\n line-height: 1;\n transition:\n background-color 150ms ease,\n border-color 150ms ease,\n color 150ms ease,\n box-shadow 150ms ease;\n }\n\n .ddga-progress-indicator__indicator-check {\n display: none;\n inline-size: 16px;\n block-size: 16px;\n }\n\n .ddga-progress-indicator__step--completed .ddga-progress-indicator__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-progress-indicator__step--completed .ddga-progress-indicator__indicator-check {\n display: inline-block;\n }\n .ddga-progress-indicator__step--completed .ddga-progress-indicator__indicator-number {\n display: none;\n }\n\n .ddga-progress-indicator__step--current .ddga-progress-indicator__indicator {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n\n /* Hover darkens the indicator one step per SDGA `…-hovered`: green → SA-700,\n gray → gray-400 (circles + dot; connector + text unchanged). */\n .ddga-progress-indicator__step--completed:hover .ddga-progress-indicator__indicator {\n background-color: var(--ddga-color-primary-hover);\n border-color: var(--ddga-color-primary-hover);\n }\n .ddga-progress-indicator__step--current:hover .ddga-progress-indicator__indicator {\n border-color: var(--ddga-color-primary-hover);\n color: var(--ddga-color-primary-hover);\n }\n .ddga-progress-indicator__step--upcoming:hover .ddga-progress-indicator__indicator {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-gray-400);\n }\n\n .ddga-progress-indicator__content {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n min-inline-size: 0;\n padding-inline-end: var(--ddga-space-4);\n }\n .ddga-progress-indicator--vertical .ddga-progress-indicator__content {\n justify-content: center;\n }\n\n .ddga-progress-indicator__title {\n display: block;\n color: var(--ddga-gray-800);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: 400;\n }\n .ddga-progress-indicator__step--current .ddga-progress-indicator__title {\n font-weight: 500;\n }\n\n .ddga-progress-indicator__description {\n display: block;\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n font-weight: 400;\n }\n\n .ddga-progress-indicator__step--upcoming .ddga-progress-indicator__title,\n .ddga-progress-indicator__step--upcoming .ddga-progress-indicator__description {\n color: var(--ddga-gray-500);\n }\n\n /* A consumer link makes a step navigable; SDGA never hyperlink-styles the text,\n so links read as plain step text (the focus box is the only nav affordance). */\n .ddga-progress-indicator__content a {\n color: inherit;\n text-decoration: none;\n }\n\n /* A step with an interactive child is navigable (SDGA hover = cursor only, no\n colour delta). Focus (keyboard) fires the SDGA treatment: a 1px white ring\n *inside* the circle + a 2px ink ring *outside* it, and a tight 2px ink box\n around the text (4px inline pad, outline inset -2px). */\n .ddga-progress-indicator__step:has(a, button) {\n cursor: pointer;\n }\n .ddga-progress-indicator__step:has(:focus-visible) .ddga-progress-indicator__indicator {\n box-shadow:\n inset 0 0 0 1px var(--ddga-color-background),\n 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-progress-indicator__step:has(:focus-visible) .ddga-progress-indicator__content {\n padding-inline: var(--ddga-space-1);\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n }\n\n /* Dot appearance: 16px solid (completed) / ring (current·upcoming), no glyph. */\n .ddga-progress-indicator--dot .ddga-progress-indicator__indicator-number,\n .ddga-progress-indicator--dot .ddga-progress-indicator__indicator-check {\n display: none;\n }\n .ddga-progress-indicator--dot\n .ddga-progress-indicator__step--completed:not(:hover)\n .ddga-progress-indicator__indicator {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n\n /* Exact light greys are raw tokens; remap to adaptive text roles in dark. */\n [data-theme='dark'] .ddga-progress-indicator__title {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-progress-indicator__description {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark'] .ddga-progress-indicator__step--upcoming .ddga-progress-indicator__title,\n [data-theme='dark']\n .ddga-progress-indicator__step--upcoming\n .ddga-progress-indicator__description {\n color: var(--ddga-text-tertiary);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-progress-indicator__indicator {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-progress-indicator__indicator {\n border-color: CanvasText;\n color: CanvasText;\n }\n .ddga-progress-indicator__step--completed .ddga-progress-indicator__indicator,\n .ddga-progress-indicator__step--current .ddga-progress-indicator__indicator {\n border-color: Highlight;\n color: Highlight;\n }\n .ddga-progress-indicator__step:not(:last-child)::before {\n background-color: CanvasText;\n }\n .ddga-progress-indicator__step--completed:not(:last-child)::before {\n background-color: Highlight;\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 + helper/error message are shared , see field.css. */\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) ─── */\n\n .ddga-checkbox {\n position: relative;\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-gray-500);\n border-radius: var(--ddga-radius-xs);\n background-color: transparent;\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: 24px;\n inline-size: 24px;\n }\n .ddga-checkbox--sm {\n block-size: 20px;\n inline-size: 20px;\n }\n .ddga-checkbox--xs {\n block-size: 16px;\n inline-size: 16px;\n }\n\n /* ─── Ripple halo (hover + pressed) ─── */\n /* z-index -1 keeps the halo behind the box so the border stays on top. */\n\n .ddga-checkbox::before {\n content: '';\n position: absolute;\n inset: -8px;\n z-index: -1;\n border-radius: 9999px;\n background-color: var(--ddga-gray-100);\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease;\n }\n .ddga-checkbox:not(:disabled):not([data-readonly]):hover::before,\n .ddga-checkbox:not(:disabled):not([data-readonly]):active::before {\n opacity: 1;\n }\n\n /* ─── Unchecked pressed fill ─── */\n\n .ddga-checkbox[data-state='unchecked']:not(:disabled):not([data-readonly]):active {\n background-color: var(--ddga-gray-300);\n }\n\n /* ─── Checked / indeterminate fill — Primary ─── */\n /* hover = primary-hover (SA700); SDGA is SA800 — kept token-driven so themes follow. */\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 .ddga-checkbox[data-state='checked']:not(:disabled):not([data-readonly]):hover,\n .ddga-checkbox[data-state='indeterminate']:not(:disabled):not([data-readonly]):hover {\n background-color: var(--ddga-color-primary-hover);\n border-color: var(--ddga-color-primary-hover);\n }\n .ddga-checkbox[data-state='checked']:not(:disabled):not([data-readonly]):active,\n .ddga-checkbox[data-state='indeterminate']:not(:disabled):not([data-readonly]):active {\n background-color: var(--ddga-color-primary-active);\n border-color: var(--ddga-color-primary-active);\n }\n\n /* ─── Checked / indeterminate fill — Neutral ─── */\n\n .ddga-checkbox--neutral[data-state='checked'],\n .ddga-checkbox--neutral[data-state='indeterminate'] {\n background-color: var(--ddga-gray-950);\n border-color: var(--ddga-gray-950);\n }\n .ddga-checkbox--neutral[data-state='checked']:not(:disabled):not([data-readonly]):hover,\n .ddga-checkbox--neutral[data-state='indeterminate']:not(:disabled):not([data-readonly]):hover {\n background-color: var(--ddga-gray-600);\n border-color: var(--ddga-gray-600);\n }\n .ddga-checkbox--neutral[data-state='checked']:not(:disabled):not([data-readonly]):active,\n .ddga-checkbox--neutral[data-state='indeterminate']:not(:disabled):not([data-readonly]):active {\n background-color: var(--ddga-gray-500);\n border-color: var(--ddga-gray-500);\n }\n\n /* ─── Focus (2px offset ring; SDGA #161616 ink via the focus-ring token) ─── */\n\n .ddga-checkbox:focus-visible {\n outline: 2px solid var(--ddga-color-focus-ring);\n outline-offset: 2px;\n }\n\n /* ─── Read-only (outlined box, icon in the fill color) ─── */\n\n .ddga-checkbox[data-readonly] {\n cursor: default;\n border-color: var(--ddga-gray-400);\n }\n .ddga-checkbox[data-readonly][data-state='checked'],\n .ddga-checkbox[data-readonly][data-state='indeterminate'] {\n background-color: transparent;\n border-color: var(--ddga-gray-400);\n color: var(--ddga-color-primary);\n }\n .ddga-checkbox--neutral[data-readonly][data-state='checked'],\n .ddga-checkbox--neutral[data-readonly][data-state='indeterminate'] {\n color: var(--ddga-gray-950);\n }\n\n /* ─── Error (off-spec; SDGA uses the Label alert slot) ─── */\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 outline-color: var(--ddga-color-error);\n }\n\n /* ─── Disabled (SDGA recolors, no opacity) ─── */\n\n .ddga-checkbox:disabled {\n cursor: not-allowed;\n border-color: var(--ddga-gray-400);\n }\n .ddga-checkbox:disabled[data-state='checked'],\n .ddga-checkbox:disabled[data-state='indeterminate'] {\n background-color: var(--ddga-gray-200);\n border-color: var(--ddga-gray-200);\n color: var(--ddga-color-primary-foreground);\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 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 /* 75% so the inset glyph reads ~50% of the box. */\n .ddga-checkbox__check {\n inline-size: 75%;\n block-size: 75%;\n }\n /* bar: 50% wide, box/8 tall (SDGA indeterminate). */\n .ddga-checkbox__minus {\n inline-size: 50%;\n block-size: 12.5%;\n min-block-size: 2px;\n border-radius: 1px;\n background-color: currentColor;\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 /* ─── Dark mode ─── */\n /* Neutral flips to a light fill so it stays legible; ink follows primary-foreground. */\n\n [data-theme='dark'] .ddga-checkbox::before {\n background-color: var(--ddga-gray-700);\n }\n [data-theme='dark'] .ddga-checkbox--neutral[data-state='checked'],\n [data-theme='dark'] .ddga-checkbox--neutral[data-state='indeterminate'] {\n background-color: var(--ddga-gray-100);\n border-color: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-checkbox--neutral[data-readonly][data-state='checked'],\n [data-theme='dark'] .ddga-checkbox--neutral[data-readonly][data-state='indeterminate'] {\n color: var(--ddga-gray-100);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-checkbox,\n .ddga-checkbox::before {\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 .ddga-inline-alert {\n --ddga-inline-alert-stripe: var(--ddga-gray-200);\n --ddga-inline-alert-icon-bg: var(--ddga-gray-50);\n --ddga-inline-alert-icon-fg: var(--ddga-text-primary);\n --ddga-inline-alert-tint-bg: var(--ddga-gray-25);\n --ddga-inline-alert-tint-border: var(--ddga-gray-300);\n --ddga-inline-alert-tint-title: var(--ddga-gray-800);\n\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-6);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n background-color: #fff;\n overflow: hidden;\n container-type: inline-size;\n font-family: inherit;\n }\n\n .ddga-inline-alert--color {\n background-color: var(--ddga-inline-alert-tint-bg);\n border-color: var(--ddga-inline-alert-tint-border);\n }\n\n .ddga-inline-alert--neutral {\n --ddga-inline-alert-stripe: var(--ddga-gray-200);\n --ddga-inline-alert-icon-bg: var(--ddga-gray-50);\n --ddga-inline-alert-icon-fg: var(--ddga-text-primary);\n --ddga-inline-alert-tint-bg: var(--ddga-gray-25);\n --ddga-inline-alert-tint-border: var(--ddga-gray-300);\n --ddga-inline-alert-tint-title: var(--ddga-gray-800);\n }\n .ddga-inline-alert--info {\n --ddga-inline-alert-stripe: var(--ddga-info-600);\n --ddga-inline-alert-icon-bg: var(--ddga-info-50);\n --ddga-inline-alert-icon-fg: var(--ddga-info-700);\n --ddga-inline-alert-tint-bg: var(--ddga-info-25);\n --ddga-inline-alert-tint-border: var(--ddga-info-200);\n --ddga-inline-alert-tint-title: var(--ddga-info-700);\n }\n .ddga-inline-alert--destructive {\n --ddga-inline-alert-stripe: var(--ddga-error-600);\n --ddga-inline-alert-icon-bg: var(--ddga-error-50);\n --ddga-inline-alert-icon-fg: var(--ddga-error-700);\n --ddga-inline-alert-tint-bg: var(--ddga-error-25);\n --ddga-inline-alert-tint-border: var(--ddga-error-200);\n --ddga-inline-alert-tint-title: var(--ddga-error-700);\n }\n .ddga-inline-alert--warning {\n --ddga-inline-alert-stripe: var(--ddga-warning-600);\n --ddga-inline-alert-icon-bg: var(--ddga-warning-50);\n --ddga-inline-alert-icon-fg: var(--ddga-warning-700);\n --ddga-inline-alert-tint-bg: var(--ddga-warning-25);\n --ddga-inline-alert-tint-border: var(--ddga-warning-200);\n --ddga-inline-alert-tint-title: var(--ddga-warning-700);\n }\n .ddga-inline-alert--success {\n --ddga-inline-alert-stripe: var(--ddga-success-600);\n --ddga-inline-alert-icon-bg: var(--ddga-success-50);\n --ddga-inline-alert-icon-fg: var(--ddga-success-700);\n --ddga-inline-alert-tint-bg: var(--ddga-success-25);\n --ddga-inline-alert-tint-border: var(--ddga-success-200);\n --ddga-inline-alert-tint-title: var(--ddga-success-700);\n }\n\n .ddga-inline-alert__stripe {\n position: absolute;\n inset-block: -1px;\n inset-inline-start: -1px;\n inline-size: 8px;\n background-color: var(--ddga-inline-alert-stripe);\n opacity: 0.7;\n }\n\n .ddga-inline-alert__header {\n display: grid;\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'icon text close';\n align-items: start;\n column-gap: var(--ddga-space-3);\n inline-size: 100%;\n }\n\n .ddga-inline-alert__icon {\n grid-area: icon;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-inline-alert-icon-bg);\n color: var(--ddga-inline-alert-icon-fg);\n }\n .ddga-inline-alert__icon > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n .ddga-inline-alert__text {\n grid-area: text;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--ddga-space-2);\n min-block-size: 40px;\n min-inline-size: 0;\n word-break: break-word;\n }\n\n .ddga-inline-alert__title {\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-800);\n }\n .ddga-inline-alert--color .ddga-inline-alert__title {\n color: var(--ddga-inline-alert-tint-title);\n }\n\n .ddga-inline-alert__description {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-gray-700);\n }\n\n .ddga-inline-alert__close {\n grid-area: close;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-inline-alert__close > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-inline-alert__close:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-inline-alert__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n .ddga-inline-alert__actions {\n display: flex;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline: var(--ddga-space-10);\n }\n\n .ddga-inline-alert__action {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n border: 0;\n background: transparent;\n border-radius: var(--ddga-radius-sm);\n font-family: inherit;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n white-space: nowrap;\n text-decoration: none;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-inline-alert__action:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-inline-alert__action:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n @container (max-width: 480px) {\n .ddga-inline-alert {\n padding-inline: var(--ddga-space-4);\n }\n .ddga-inline-alert__stripe {\n inset-block: -1px auto;\n inset-inline: -1px;\n inline-size: auto;\n block-size: 8px;\n }\n .ddga-inline-alert__header {\n grid-template-areas:\n 'icon . close'\n 'text text text';\n row-gap: var(--ddga-space-4);\n }\n .ddga-inline-alert__text {\n min-block-size: 0;\n gap: var(--ddga-space-1);\n }\n .ddga-inline-alert__actions {\n flex-direction: column;\n align-items: stretch;\n padding-inline: 0;\n }\n .ddga-inline-alert__action {\n inline-size: 100%;\n }\n .ddga-inline-alert__action:first-child {\n block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n background-color: var(--ddga-gray-100);\n }\n .ddga-inline-alert__action:first-child:hover {\n background-color: var(--ddga-gray-200);\n }\n }\n\n [data-theme='dark'] .ddga-inline-alert--white {\n background-color: var(--ddga-gray-900, #111927);\n border-color: var(--ddga-gray-700);\n }\n [data-theme='dark'] .ddga-inline-alert__title {\n color: var(--ddga-gray-50);\n }\n /* Dark: the light −25/−200 tints render a near-white box and the old title override\n painted light-on-light. Remap to a translucent type tint (off the −600 stripe); the\n title inherits gray-50 from the rule above. */\n [data-theme='dark'] .ddga-inline-alert--color {\n --ddga-inline-alert-tint-bg: color-mix(\n in srgb,\n var(--ddga-inline-alert-stripe) 16%,\n transparent\n );\n --ddga-inline-alert-tint-border: color-mix(\n in srgb,\n var(--ddga-inline-alert-stripe) 45%,\n transparent\n );\n }\n [data-theme='dark'] .ddga-inline-alert__description {\n color: var(--ddga-gray-300);\n }\n [data-theme='dark'] .ddga-inline-alert__close,\n [data-theme='dark'] .ddga-inline-alert__action {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-inline-alert__close:hover,\n [data-theme='dark'] .ddga-inline-alert__action:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-inline-alert__close:focus-visible,\n [data-theme='dark'] .ddga-inline-alert__action:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-inline-alert__action:first-child {\n background-color: var(--ddga-gray-800);\n }\n\n @media (forced-colors: active) {\n .ddga-inline-alert {\n border-color: CanvasText;\n }\n .ddga-inline-alert__close:focus-visible,\n .ddga-inline-alert__action:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + message (.ddga-field__message) are shared (field.css). Size\n lives on the field wrapper so it scales the label/helper type as well as rail/thumb. */\n\n /* ─── Size ─── */\n\n .ddga-slider-field--md {\n --ddga-slider-rail: var(--ddga-space-2);\n --ddga-slider-thumb: var(--ddga-space-4);\n }\n .ddga-slider-field--sm {\n --ddga-slider-rail: var(--ddga-space-1);\n --ddga-slider-thumb: var(--ddga-space-3);\n }\n\n /* ─── Label ─── */\n\n .ddga-slider__label {\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n }\n .ddga-slider-field--md .ddga-slider__label {\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n }\n .ddga-slider-field--sm .ddga-slider__label {\n font-size: var(--ddga-font-size-sm);\n line-height: 1.43;\n }\n\n /* ─── Control row (track + value) ─── */\n\n .ddga-slider__control {\n display: flex;\n align-items: center;\n gap: 0.375rem; /* SDGA 6px — no space token */\n }\n\n .ddga-slider__value {\n flex-shrink: 0;\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5; /* SDGA Text xs 12/18 — else inherits body 1.6 → 19.2px */\n font-variant-numeric: tabular-nums;\n }\n .ddga-slider-field--sm .ddga-field__message {\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Root ─── */\n\n .ddga-slider {\n position: relative;\n display: flex;\n flex: 1 1 auto;\n min-inline-size: 0;\n align-items: center;\n block-size: var(--ddga-slider-thumb);\n touch-action: none;\n user-select: none;\n }\n\n /* ─── Track + range ─── */\n\n .ddga-slider__track {\n position: relative;\n flex-grow: 1;\n block-size: var(--ddga-slider-rail);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-slider__range {\n position: absolute;\n block-size: 100%;\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-primary);\n }\n\n /* ─── Thumb ─── */\n\n /* SDGA Control = brand-green fill + `border-success` #067647 ring (success-700, not sa-700). */\n .ddga-slider__thumb {\n display: block;\n inline-size: var(--ddga-slider-thumb);\n block-size: var(--ddga-slider-thumb);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-primary);\n border: 1px solid var(--ddga-success-700);\n cursor: grab;\n transition: box-shadow 150ms ease;\n }\n\n .ddga-slider__thumb:active {\n cursor: grabbing;\n }\n\n /* Two-layer ring so focus stays visible on the same-green thumb. */\n .ddga-slider__thumb:focus-visible {\n outline: none;\n box-shadow:\n 0 0 0 2px var(--ddga-color-background),\n 0 0 0 4px var(--ddga-color-ring);\n }\n\n /* ─── Error ─── */\n\n .ddga-slider--error .ddga-slider__range,\n .ddga-slider--error .ddga-slider__thumb {\n background-color: var(--ddga-color-error);\n border-color: var(--ddga-color-error);\n }\n .ddga-slider--error .ddga-slider__thumb:focus-visible {\n box-shadow:\n 0 0 0 2px var(--ddga-color-background),\n 0 0 0 4px var(--ddga-color-error);\n }\n\n /* ─── Disabled ─── */\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 /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-slider__thumb {\n transition: none;\n }\n }\n\n /* ─── Forced colors ─── */\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: Highlight;\n border: 1px solid 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 .ddga-card {\n --ddga-card-padding: var(--ddga-space-4);\n --ddga-card-gap: var(--ddga-space-6);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-card-gap);\n padding: var(--ddga-card-padding);\n background-color: var(--ddga-color-card);\n color: var(--ddga-color-card-foreground);\n border-radius: var(--ddga-radius-xl);\n transition:\n background-color 150ms ease,\n box-shadow 150ms ease,\n border-color 150ms ease;\n }\n\n .ddga-card--vertical {\n flex-direction: column;\n }\n .ddga-card--horizontal {\n flex-direction: row;\n }\n\n /* SDGA Effect=Stroke — 1px gray-300. */\n .ddga-card--default {\n border: 1px solid var(--ddga-color-input);\n }\n .ddga-card--outline {\n background-color: transparent;\n border: 1px solid var(--ddga-color-input);\n }\n /* SDGA Effect=With Shadow — navy two-layer md (ours is single-layer black; Foundations). */\n .ddga-card--elevated {\n border: 1px solid transparent;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-card--filled {\n background-color: var(--ddga-color-muted);\n border: 1px solid transparent;\n }\n\n /* SA Green gradient hero (off-spec) — dga-preferences §5.4 (SA 600 → 500 @ 90°). */\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 opacity: 0.85;\n }\n\n .ddga-card--ghost {\n background-color: transparent;\n border: 1px solid transparent;\n }\n\n .ddga-card--plain {\n border: 1px solid transparent;\n }\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-4);\n }\n .ddga-card--padding-lg {\n --ddga-card-padding: var(--ddga-space-6);\n }\n\n .ddga-card--interactive {\n cursor: pointer;\n }\n .ddga-card--interactive:hover,\n .ddga-card--interactive.ddga-card--hovered {\n background-color: var(--ddga-gray-50);\n }\n .ddga-card--interactive.ddga-card--gradient:hover {\n box-shadow: var(--ddga-shadow-lg);\n }\n .ddga-card--interactive:focus-visible,\n .ddga-card--interactive.ddga-card--focused {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n .ddga-card--disabled {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n box-shadow: none;\n }\n .ddga-card--disabled.ddga-card--default,\n .ddga-card--disabled.ddga-card--outline {\n border-color: var(--ddga-gray-400);\n }\n .ddga-card--disabled .ddga-card__title,\n .ddga-card--disabled .ddga-card__description,\n .ddga-card--disabled .ddga-card__content,\n .ddga-card--disabled .ddga-card__icon {\n color: var(--ddga-gray-400);\n }\n .ddga-card--disabled .ddga-card__icon--featured {\n background-color: var(--ddga-gray-100);\n }\n\n .ddga-card--selectable {\n position: relative;\n cursor: pointer;\n }\n .ddga-card--selectable:not(.ddga-card--disabled):hover,\n .ddga-card--selectable.ddga-card--hovered {\n background-color: var(--ddga-gray-50);\n }\n .ddga-card--selectable.ddga-card--disabled {\n cursor: not-allowed;\n }\n .ddga-card--selectable:focus-visible,\n .ddga-card--selectable.ddga-card--focused {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* Checkbox indicator, top inline-end (flips in RTL). */\n .ddga-card__select-indicator {\n position: absolute;\n inset-block-start: var(--ddga-space-4);\n inset-inline-end: var(--ddga-space-4);\n z-index: 1;\n }\n .ddga-card__checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 20px;\n block-size: 20px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-xs);\n background-color: var(--ddga-color-background);\n }\n .ddga-card__checkbox[data-state='checked'] {\n background-color: var(--ddga-color-primary);\n border-color: var(--ddga-color-primary);\n }\n .ddga-card__checkbox-check {\n inline-size: 0.875rem;\n block-size: 0.875rem;\n color: #ffffff;\n }\n .ddga-card--disabled .ddga-card__checkbox {\n border-color: var(--ddga-gray-400);\n }\n .ddga-card--disabled .ddga-card__checkbox[data-state='checked'] {\n background-color: var(--ddga-gray-200);\n border-color: var(--ddga-gray-400);\n }\n\n /* Expandable — chevron icon-button, bottom inline-end, 24px glyph. */\n .ddga-card__expand-row {\n display: flex;\n justify-content: flex-end;\n margin-block-start: auto;\n }\n .ddga-card__chevron {\n inline-size: 1.5rem;\n block-size: 1.5rem;\n transition: transform 150ms ease;\n }\n .ddga-card__chevron--up {\n transform: rotate(180deg);\n }\n @media (prefers-reduced-motion: reduce) {\n .ddga-card__chevron {\n transition: none;\n }\n }\n\n /* Image — inset slot, radius-md (SDGA: rounded image inside the padding). */\n .ddga-card__image {\n display: block;\n inline-size: 100%;\n block-size: auto;\n object-fit: cover;\n border-radius: var(--ddga-radius-md);\n aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n }\n /* Horizontal (off-spec) — image hugs the start edge, full content height. */\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 .ddga-card--horizontal > :not(.ddga-card__image) {\n flex: 1 1 auto;\n }\n\n /* Sections — no padding (the card pads + gaps them). */\n .ddga-card__header {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n }\n\n .ddga-card__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n align-self: start;\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 /* Featured icon — 48px SA-50 circle, success-700 glyph; +16px so icon→title = 24. */\n .ddga-card__icon--featured {\n inline-size: 48px;\n block-size: 48px;\n margin-block-end: var(--ddga-space-4);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-50);\n color: var(--ddga-success-700);\n }\n .ddga-card__icon--featured > svg {\n inline-size: 1.5rem;\n block-size: 1.5rem;\n }\n\n .ddga-card__title {\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-bold);\n line-height: 1.75rem;\n margin: 0;\n color: var(--ddga-gray-800);\n }\n\n .ddga-card__description {\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5rem;\n margin: 0;\n color: var(--ddga-gray-800);\n }\n\n .ddga-card__footer {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-4);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-card {\n transition: none;\n }\n }\n\n /* Forced colors (Windows High Contrast) — keep a boundary + real focus outline. */\n @media (forced-colors: active) {\n .ddga-card {\n border: 1px solid CanvasText;\n }\n .ddga-card--interactive:focus-visible,\n .ddga-card--selectable:focus-visible {\n outline: 2px solid CanvasText;\n outline-offset: 2px;\n }\n }\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 [data-theme='dark'] .ddga-card__title,\n [data-theme='dark'] .ddga-card__description {\n color: var(--ddga-color-card-foreground);\n }\n [data-theme='dark'] .ddga-card__icon--featured {\n background-color: color-mix(in srgb, var(--ddga-color-primary) 22%, var(--ddga-color-card));\n color: var(--ddga-color-success);\n }\n [data-theme='dark'] .ddga-card--interactive:hover,\n [data-theme='dark'] .ddga-card--interactive.ddga-card--hovered,\n [data-theme='dark'] .ddga-card--selectable:not(.ddga-card--disabled):hover,\n [data-theme='dark'] .ddga-card--selectable.ddga-card--hovered {\n background-color: color-mix(in srgb, var(--ddga-color-card) 90%, white);\n }\n [data-theme='dark'] .ddga-card--disabled {\n background-color: color-mix(in srgb, var(--ddga-color-card) 70%, var(--ddga-color-background));\n color: var(--ddga-color-muted-foreground);\n }\n [data-theme='dark'] .ddga-card--disabled.ddga-card--default,\n [data-theme='dark'] .ddga-card--disabled.ddga-card--outline {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-card--disabled .ddga-card__title,\n [data-theme='dark'] .ddga-card--disabled .ddga-card__description,\n [data-theme='dark'] .ddga-card--disabled .ddga-card__content,\n [data-theme='dark'] .ddga-card--disabled .ddga-card__icon {\n color: var(--ddga-color-muted-foreground);\n }\n [data-theme='dark'] .ddga-card--disabled .ddga-card__icon--featured {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-color-muted-foreground);\n }\n}\n","@layer ddga-components {\n /* SDGA Platforms Code parity. Size lives on the root (.ddga-pagination--{sm,md,lg})\n and cascades to the cells. The active page is a green underline bar (::after),\n NOT a filled pill; prev/next are icon-only square buttons; the overflow \"…\" is a\n bordered box (the trigger for the jump-to-page DropdownMenu). */\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-2);\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 /* ─── Cell (link / nav / overflow share this base) ─── */\n\n .ddga-pagination__link {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n box-sizing: border-box;\n min-inline-size: var(--_ddga-pg-box);\n block-size: var(--_ddga-pg-box);\n padding-inline: var(--_ddga-pg-pad);\n border: none;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n font-family: inherit;\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n border-color 150ms ease;\n }\n\n .ddga-pagination__link:hover {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-pagination__link:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n .ddga-pagination__link[aria-disabled='true'] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n /* ─── Active (current page) — green underline bar ─── */\n\n .ddga-pagination__link--active::after {\n content: '';\n position: absolute;\n inset-block-end: var(--_ddga-pg-underline-bottom);\n inset-inline-start: 50%;\n transform: translateX(-50%);\n inline-size: var(--_ddga-pg-underline-w);\n block-size: 3px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-primary);\n }\n [dir='rtl'] .ddga-pagination__link--active::after {\n transform: translateX(50%);\n }\n\n /* ─── Prev / Next (icon-only square button) ─── */\n\n .ddga-pagination__nav {\n padding-inline: 0;\n }\n\n .ddga-pagination__nav-icon {\n inline-size: 1.25em;\n block-size: 1.25em;\n }\n\n /* Directional arrows flip in RTL: prev points inline-start, next inline-end. */\n [dir='rtl'] .ddga-pagination__nav-icon {\n transform: scaleX(-1);\n }\n\n /* ─── Ellipsis (static) + Overflow (interactive) — bordered \"…\" box ─── */\n\n .ddga-pagination__ellipsis,\n .ddga-pagination__overflow {\n box-sizing: border-box;\n border: 1px solid var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-pagination__ellipsis {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n min-inline-size: var(--_ddga-pg-box);\n block-size: var(--_ddga-pg-box);\n color: var(--ddga-text-primary);\n }\n\n /* Open / focus → 2px border (border-box keeps the cell size stable). */\n .ddga-pagination__overflow[data-state='open'],\n .ddga-pagination__overflow:focus-visible {\n background-color: var(--ddga-color-muted);\n border-width: 2px;\n }\n .ddga-pagination__overflow:focus-visible {\n box-shadow: none;\n }\n\n .ddga-pagination__ellipsis-icon {\n inline-size: 1em;\n block-size: 1em;\n }\n\n /* ─── Jump-to-page menu (SDGA \"Opened\" overflow — pixel-matched) ─── */\n\n .ddga-pagination__menu {\n box-sizing: border-box;\n padding: var(--ddga-space-1); /* 4px */\n background-color: var(--ddga-color-background);\n border: 1px solid var(--ddga-color-input); /* gray-300 #D2D6DB */\n border-radius: var(--ddga-radius-sm); /* 4px */\n box-shadow: var(--ddga-shadow-xl);\n font-family: inherit;\n z-index: 50;\n outline: none;\n }\n\n .ddga-pagination__menu-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2); /* 8px */\n box-sizing: border-box;\n inline-size: 3.75rem; /* SDGA item 60px */\n padding: var(--ddga-space-2); /* 8px */\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-sm); /* 14px */\n line-height: 1.4;\n cursor: pointer;\n user-select: none;\n outline: none;\n }\n\n /* Radix sets data-highlighted on the focused/hovered item. */\n .ddga-pagination__menu-item[data-highlighted] {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-pagination__menu-label {\n flex: 1 1 auto;\n min-inline-size: 0;\n }\n\n .ddga-pagination__menu-check {\n flex-shrink: 0;\n inline-size: 1.25rem; /* SDGA check 20px */\n block-size: 1.25rem;\n color: var(--ddga-text-primary);\n }\n\n @media (forced-colors: active) {\n .ddga-pagination__menu {\n border: 1px solid CanvasText;\n }\n .ddga-pagination__menu-item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n }\n\n /* ─── Sizes (cascade from root) ─── */\n\n .ddga-pagination--sm {\n --_ddga-pg-box: 1.5rem; /* 24px */\n --_ddga-pg-pad: var(--ddga-space-1); /* 4px */\n --_ddga-pg-underline-w: 1rem; /* 16px */\n --_ddga-pg-underline-bottom: 1px;\n }\n .ddga-pagination--md {\n --_ddga-pg-box: 2rem; /* 32px */\n --_ddga-pg-pad: 0.375rem; /* SDGA 6px — no spacing token */\n --_ddga-pg-underline-w: 1.5rem; /* 24px */\n --_ddga-pg-underline-bottom: 2px;\n }\n .ddga-pagination--lg {\n --_ddga-pg-box: 2.5rem; /* 40px */\n --_ddga-pg-pad: var(--ddga-space-2); /* 8px */\n --_ddga-pg-underline-w: 1.5rem; /* 24px */\n --_ddga-pg-underline-bottom: 3px;\n }\n\n .ddga-pagination--sm .ddga-pagination__link,\n .ddga-pagination--sm .ddga-pagination__ellipsis {\n font-size: var(--ddga-font-size-sm); /* 14px */\n }\n .ddga-pagination--md .ddga-pagination__link,\n .ddga-pagination--md .ddga-pagination__ellipsis,\n .ddga-pagination--lg .ddga-pagination__link,\n .ddga-pagination--lg .ddga-pagination__ellipsis {\n font-size: var(--ddga-font-size-base); /* 16px */\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 }\n .ddga-pagination__link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-pagination__link--active::after {\n background-color: Highlight;\n }\n .ddga-pagination__ellipsis,\n .ddga-pagination__overflow {\n border-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-tag {\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-tag--sm {\n height: 20px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-2xs); /* SDGA x-Small = Text-2xs 10px */\n font-weight: var(--ddga-font-weight-semibold); /* SDGA x-Small = SemiBold 600 */\n }\n\n .ddga-tag--md {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n /* SDGA Tag Medium = 32px / 16px text */\n .ddga-tag--lg {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Shape ─── */\n\n .ddga-tag--squared {\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Icon only ─── */\n\n .ddga-tag--icon-only {\n padding-inline: 0;\n aspect-ratio: 1;\n }\n\n /* ─── Solid variants ─── */\n\n .ddga-tag--default {\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-700);\n }\n\n .ddga-tag--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n\n .ddga-tag--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-color-secondary-foreground);\n }\n\n .ddga-tag--destructive {\n background-color: var(--ddga-color-destructive);\n color: var(--ddga-color-destructive-foreground);\n }\n\n .ddga-tag--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n\n .ddga-tag--warning {\n background-color: var(--ddga-color-warning);\n color: var(--ddga-color-warning-foreground);\n }\n\n .ddga-tag--info {\n background-color: var(--ddga-color-info);\n color: var(--ddga-color-info-foreground);\n }\n\n /* ─── Subtle (tonal) variants — the SDGA filled Tag (−50 bg / −200 border / −800 text) ─── */\n\n .ddga-tag--primary-subtle {\n background-color: var(--ddga-sa-50);\n color: var(--ddga-sa-800);\n border-color: var(--ddga-sa-200);\n }\n\n .ddga-tag--secondary-subtle {\n background-color: var(--ddga-gray-50);\n color: var(--ddga-gray-800);\n border-color: var(--ddga-gray-200);\n }\n\n .ddga-tag--destructive-subtle {\n background-color: var(--ddga-error-50);\n color: var(--ddga-error-800);\n border-color: var(--ddga-error-200);\n }\n\n .ddga-tag--success-subtle {\n background-color: var(--ddga-success-50);\n color: var(--ddga-success-800);\n border-color: var(--ddga-success-200);\n }\n\n .ddga-tag--warning-subtle {\n background-color: var(--ddga-warning-50);\n color: var(--ddga-warning-800);\n border-color: var(--ddga-warning-200);\n }\n\n .ddga-tag--info-subtle {\n background-color: var(--ddga-info-50);\n color: var(--ddga-info-800);\n border-color: var(--ddga-info-200);\n }\n\n /* ─── Outline ─── */\n\n .ddga-tag--outline {\n background-color: transparent;\n color: var(--ddga-color-foreground);\n border-color: var(--ddga-color-border);\n }\n\n /* ─── On-color (for colored / dark surfaces) ─── */\n\n .ddga-tag--on-color {\n background-color: var(--ddga-alpha-white-20);\n color: #ffffff;\n }\n\n /* ─── Outlined (SDGA Tag \"Outline=True\") ─── */\n\n .ddga-tag--outlined {\n background-color: transparent;\n }\n .ddga-tag--outlined.ddga-tag--secondary-subtle {\n border-color: var(--ddga-gray-600);\n }\n .ddga-tag--outlined.ddga-tag--primary-subtle {\n border-color: var(--ddga-sa-700);\n }\n .ddga-tag--outlined.ddga-tag--success-subtle {\n border-color: var(--ddga-success-700);\n }\n .ddga-tag--outlined.ddga-tag--destructive-subtle {\n border-color: var(--ddga-error-700);\n }\n .ddga-tag--outlined.ddga-tag--warning-subtle {\n border-color: var(--ddga-warning-700);\n }\n .ddga-tag--outlined.ddga-tag--info-subtle {\n border-color: var(--ddga-info-700);\n }\n .ddga-tag--outlined.ddga-tag--on-color {\n border-color: var(--ddga-alpha-white-60);\n }\n\n /* ─── Icons inside tag ─── */\n\n .ddga-tag__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n\n .ddga-tag__icon > svg,\n .ddga-tag > svg {\n display: block;\n }\n\n /* SDGA per-size lead/trail icon: x Small 10 · Small 14 · Medium 18 (the close button is sized separately). */\n .ddga-tag--sm > svg,\n .ddga-tag--sm > .ddga-tag__icon > svg {\n width: 10px;\n height: 10px;\n }\n .ddga-tag--md > svg,\n .ddga-tag--md > .ddga-tag__icon > svg {\n width: 14px;\n height: 14px;\n }\n .ddga-tag--lg > svg,\n .ddga-tag--lg > .ddga-tag__icon > svg {\n width: 18px;\n height: 18px;\n }\n\n .ddga-tag svg {\n flex-shrink: 0;\n align-self: center;\n }\n\n /* ─── Close button (dismissible) ─── */\n\n .ddga-tag__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-tag__close > svg {\n inline-size: 0.75em;\n block-size: 0.75em;\n }\n\n .ddga-tag__close:hover {\n background-color: color-mix(in srgb, currentColor 18%, transparent);\n }\n\n .ddga-tag__close:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n /* ─── Dark mode adjustments ─── */\n\n [data-theme='dark'] .ddga-tag--default,\n [data-theme='dark'] .ddga-tag--secondary-subtle {\n background-color: var(--ddga-alpha-white-10);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-tag--primary-subtle {\n background-color: rgb(27 131 84 / 0.2);\n color: var(--ddga-sa-200, #b8eacb);\n }\n [data-theme='dark'] .ddga-tag--destructive-subtle {\n background-color: rgb(217 45 32 / 0.18);\n color: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-tag--success-subtle {\n background-color: rgb(7 148 85 / 0.18);\n color: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-tag--warning-subtle {\n background-color: rgb(220 104 3 / 0.18);\n color: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-tag--info-subtle {\n background-color: rgb(21 112 239 / 0.16);\n color: var(--ddga-info-200, #b2ddff);\n }\n\n /* Drop the light tint border on dark subtle chips (but keep outlined borders). */\n [data-theme='dark'] .ddga-tag--secondary-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--primary-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--destructive-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--success-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--warning-subtle:not(.ddga-tag--outlined),\n [data-theme='dark'] .ddga-tag--info-subtle:not(.ddga-tag--outlined) {\n border-color: transparent;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-tag {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-field[data-slot='text-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-text-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-text-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── */\n\n .ddga-text-input {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding-inline-start: var(--ddga-space-2);\n padding-inline-end: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── */\n\n .ddga-text-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-text-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-text-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-text-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <input>: transparent, borderless fill) ─── */\n\n .ddga-text-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 caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-text-input__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n /* Autofill: browsers repaint autofilled fields with their own bg/text,\n overriding the theme (jarring in dark; government forms autofill heavily).\n Repaint with tokens via the inset-shadow technique. */\n .ddga-text-input__field:-webkit-autofill,\n .ddga-text-input__field:-webkit-autofill:hover,\n .ddga-text-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\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-gray-950);\n }\n\n /* ─── Adornments (leading/trailing icon, affix, or in-field button) ─── */\n\n .ddga-text-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 in-field control can't paint\n over the border. */\n max-block-size: 100%;\n color: var(--ddga-gray-500);\n }\n\n .ddga-text-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. */\n .ddga-text-input:has(.ddga-text-input__adornment--start) {\n padding-inline-start: var(--ddga-space-2);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end) {\n padding-inline-end: var(--ddga-space-2);\n }\n\n /* ─── Prefix / suffix affix (SDGA: flush, full-height gray chip) ─── */\n\n .ddga-text-input__affix {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n padding-inline: var(--ddga-space-4);\n background-color: var(--ddga-gray-100);\n color: var(--ddga-gray-500);\n white-space: nowrap;\n }\n .ddga-text-input--md .ddga-text-input__affix {\n padding-inline: var(--ddga-space-3);\n }\n .ddga-text-input__affix--subtle {\n background-color: transparent;\n padding-inline: 0;\n }\n /* Round the chip's outer corners to the field radius and bleed it flush. */\n .ddga-text-input__adornment--start:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--end:has(.ddga-text-input__affix) {\n align-self: stretch;\n }\n .ddga-text-input__adornment--start .ddga-text-input__affix {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input__adornment--end .ddga-text-input__affix {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n .ddga-text-input:has(.ddga-text-input__adornment--start .ddga-text-input__affix) {\n padding-inline-start: 0;\n }\n .ddga-text-input:has(.ddga-text-input__adornment--end .ddga-text-input__affix) {\n padding-inline-end: 0;\n }\n\n /* ─── Dropdown affix (SDGA `_Input Prefix-Suffix` \"Dropdown\": a <button>\n trigger = badge icon + label + chevron; reuses the flush chip shell,\n text is #161616 not gray-500, interactive states) ─── */\n\n .ddga-text-input__dropdown {\n gap: var(--ddga-space-1);\n padding-block: 0;\n border: 0;\n color: var(--ddga-text-primary);\n font: inherit;\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n .ddga-text-input__dropdown-icon {\n display: inline-flex;\n flex-shrink: 0;\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-text-input__dropdown-icon > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-text-input__dropdown-chevron {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-icon {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-text-input--md .ddga-text-input__dropdown-chevron {\n inline-size: 16px;\n block-size: 16px;\n }\n /* Interactive states (SDGA neutral-button ramp). */\n .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-gray-200);\n }\n .ddga-text-input__dropdown:active {\n background-color: var(--ddga-gray-300);\n }\n .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-gray-200);\n }\n /* Selected / open (SDGA `button-background-black-selected` #384250 + white). */\n .ddga-text-input__dropdown--selected,\n .ddga-text-input__dropdown--selected:hover,\n .ddga-text-input__dropdown--selected:active {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n /* Focus (SDGA shows a 4px #161616 border; a 2px inset ring matches the\n library's focus language without shifting layout). */\n .ddga-text-input__dropdown:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── */\n\n .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-text-input::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n\n /* ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n .ddga-text-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-text-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n .ddga-text-input:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). The real state is :active; the `--pressed` class is a\n static hook so the state is visible in Storybook / docs. The centered\n underline overrides the focus full-width one while the mouse is down. */\n\n .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n .ddga-text-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-text-input:active::after,\n .ddga-text-input--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n .ddga-text-input--error,\n .ddga-text-input--error:hover:not(:focus-within),\n .ddga-text-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── */\n\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field::placeholder,\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__adornment {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-gray-400);\n }\n /* SDGA: disabled affix chip switches gray-100 → gray-200 (background-disabled). */\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__affix {\n background-color: var(--ddga-gray-200);\n }\n\n /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── */\n\n .ddga-field[data-slot='text-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='text-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n /* ─── Dark mode ─── */\n /* The SDGA light values are fixed gray-ramp steps that don't flip; remap to\n the flipping semantic tokens so text/affordances stay readable on the dark\n surface. Exact DGA dark palette is deferred (not yet available). */\n\n [data-theme='dark'] .ddga-text-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__affix {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle {\n background-color: transparent;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:hover {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:hover {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input__dropdown:active,\n [data-theme='dark'] .ddga-text-input__dropdown--subtle:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-text-input__dropdown--selected,\n [data-theme='dark'] .ddga-text-input__dropdown--selected:hover {\n background-color: var(--ddga-gray-700);\n color: #ffffff;\n }\n [data-theme='dark'] .ddga-text-input__dropdown:focus-visible {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input--filled-lighter,\n [data-theme='dark'] .ddga-text-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-text-input::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-text-input:active:not(:has(.ddga-text-input__field:disabled)),\n [data-theme='dark'] .ddga-text-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__field::placeholder,\n [data-theme='dark']\n .ddga-text-input:has(.ddga-text-input__field:disabled)\n .ddga-text-input__adornment {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='text-input-field']:has(.ddga-text-input__field:disabled)\n .ddga-text-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='text-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-text-input,\n .ddga-text-input::after {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast): focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-text-input {\n border: 1px solid CanvasText;\n }\n .ddga-text-input:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-text-input:has(.ddga-text-input__field:disabled) .ddga-text-input__field {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Linear (Radix Progress) ─── */\n\n .ddga-progress {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n }\n\n .ddga-progress--primary {\n --ddga-progress-fill: var(--ddga-color-primary);\n }\n .ddga-progress--neutral {\n --ddga-progress-fill: var(--ddga-gray-700);\n }\n .ddga-progress--success {\n --ddga-progress-fill: var(--ddga-color-success);\n }\n .ddga-progress--error {\n --ddga-progress-fill: var(--ddga-color-destructive);\n }\n\n .ddga-progress__label {\n display: inline-flex;\n gap: var(--ddga-space-1);\n align-items: flex-end;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n }\n .ddga-progress--sm .ddga-progress__label {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-progress__required {\n color: var(--ddga-error-700);\n }\n\n .ddga-progress__track {\n position: relative;\n overflow: clip;\n inline-size: 100%;\n background-color: var(--ddga-gray-100);\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-progress--sm .ddga-progress__track {\n block-size: 4px;\n }\n .ddga-progress--md .ddga-progress__track {\n block-size: 8px;\n }\n .ddga-progress--lg .ddga-progress__track {\n block-size: 16px;\n border-radius: var(--ddga-radius-md);\n }\n /* Success/Error darken the track behind the full bar (SDGA gray-300). */\n .ddga-progress--success .ddga-progress__track,\n .ddga-progress--error .ddga-progress__track {\n background-color: var(--ddga-gray-300);\n }\n\n .ddga-progress__indicator {\n block-size: 100%;\n inline-size: 100%;\n background-color: var(--ddga-progress-fill, var(--ddga-color-primary));\n border-radius: inherit;\n transition: inline-size 200ms ease-out;\n }\n .ddga-progress--lg .ddga-progress__indicator {\n display: flex;\n align-items: center;\n justify-content: flex-end;\n padding-inline: var(--ddga-space-2);\n overflow: clip;\n }\n .ddga-progress__value {\n color: #fff;\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n white-space: nowrap;\n }\n\n .ddga-progress__track[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 @keyframes ddga-progress-slide {\n 0% {\n transform: translateX(-100%);\n }\n 100% {\n transform: translateX(350%);\n }\n }\n [dir='rtl'] .ddga-progress__track[data-state='indeterminate'] .ddga-progress__indicator {\n animation-name: ddga-progress-slide-rtl;\n }\n @keyframes ddga-progress-slide-rtl {\n 0% {\n transform: translateX(100%);\n }\n 100% {\n transform: translateX(-350%);\n }\n }\n\n .ddga-progress__helper {\n display: flex;\n gap: var(--ddga-space-2);\n align-items: center;\n }\n .ddga-progress__helper-icon {\n display: inline-flex;\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n font-size: 16px;\n color: var(--ddga-gray-700);\n }\n .ddga-progress__helper-icon > svg {\n display: block;\n }\n .ddga-progress__helper-text {\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.43;\n }\n .ddga-progress--sm .ddga-progress__helper-text {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-progress--success .ddga-progress__helper-text {\n color: var(--ddga-success-700);\n }\n .ddga-progress--error .ddga-progress__helper-text {\n color: var(--ddga-error-700);\n }\n\n /* ─── Filled ✓/✕ status badge (linear helper + circular centre share the shape) */\n .ddga-progress__badge,\n .ddga-circular-progress__badge {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border-radius: var(--ddga-radius-full);\n color: #fff;\n }\n /* Glyph scales with the badge (no per-size font hacks). */\n .ddga-progress__badge > svg,\n .ddga-circular-progress__badge > svg {\n inline-size: 66%;\n block-size: 66%;\n }\n .ddga-progress__badge {\n inline-size: 16px;\n block-size: 16px;\n }\n /* Circular badge ≈ 25.5% of the ring diameter (measured); % keeps it exact at any size/thickness. */\n .ddga-circular-progress__badge {\n inline-size: 25.5%;\n block-size: 25.5%;\n }\n .ddga-progress__badge--success,\n .ddga-circular-progress__badge--success {\n background-color: var(--ddga-success-700);\n }\n .ddga-progress__badge--error,\n .ddga-circular-progress__badge--error {\n background-color: var(--ddga-error-700);\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 .ddga-circular-progress--primary {\n --ddga-progress-fill: var(--ddga-color-primary);\n }\n .ddga-circular-progress--neutral {\n --ddga-progress-fill: var(--ddga-gray-700);\n }\n .ddga-circular-progress--success {\n --ddga-progress-fill: var(--ddga-color-success);\n }\n .ddga-circular-progress--error {\n --ddga-progress-fill: var(--ddga-color-destructive);\n }\n\n .ddga-circular-progress__svg {\n display: block;\n }\n .ddga-circular-progress__track {\n stroke: var(--ddga-gray-100);\n }\n .ddga-circular-progress__indicator {\n stroke: var(--ddga-progress-fill, var(--ddga-color-primary));\n transition: stroke-dashoffset 200ms ease-out;\n }\n .ddga-circular-progress__segment {\n stroke: var(--ddga-gray-100);\n transition: stroke 200ms ease;\n }\n .ddga-circular-progress__segment--filled {\n stroke: var(--ddga-progress-fill, var(--ddga-color-primary));\n }\n\n /* Only the continuous ring spins when indeterminate (segmented is determinate). */\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 @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 flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 2px;\n text-align: center;\n color: var(--ddga-gray-700);\n }\n /* Success/Error caption is the state −700 colour (matches the badge), not gray. */\n .ddga-circular-progress--success .ddga-circular-progress__label {\n color: var(--ddga-success-700);\n }\n .ddga-circular-progress--error .ddga-circular-progress__label {\n color: var(--ddga-error-700);\n }\n .ddga-circular-progress__value {\n font-weight: var(--ddga-font-weight-bold);\n line-height: 1.2;\n white-space: nowrap;\n }\n .ddga-circular-progress__text {\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.4;\n }\n\n /* Per-size centre type + badge (SDGA Display/Text ramp). */\n .ddga-circular-progress--sm .ddga-circular-progress__value {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-circular-progress--md .ddga-circular-progress__value {\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-circular-progress--lg .ddga-circular-progress__value {\n font-size: var(--ddga-font-size-2xl);\n }\n /* SDGA Display sm/md (30/36) — no token yet (Foundations gap); raw rem. */\n .ddga-circular-progress--xl .ddga-circular-progress__value {\n font-size: 1.875rem;\n }\n .ddga-circular-progress--2xl .ddga-circular-progress__value {\n font-size: 2.25rem;\n letter-spacing: -0.02em;\n }\n .ddga-circular-progress--sm .ddga-circular-progress__text,\n .ddga-circular-progress--md .ddga-circular-progress__text,\n .ddga-circular-progress--lg .ddga-circular-progress__text {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-circular-progress--xl .ddga-circular-progress__text {\n font-size: var(--ddga-font-size-base);\n }\n .ddga-circular-progress--2xl .ddga-circular-progress__text {\n font-size: var(--ddga-font-size-xl);\n }\n\n /* ─── Dark mode ─── */\n /* The raw gray-100/300 track tints don't remap in dark (only semantic --ddga-color-* do); map the\n track to the semantic border so it doesn't render as a bright band. Body/centre ink (raw gray-700)\n swaps to the dark-aware text token. */\n [data-theme='dark'] .ddga-progress__track {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-progress--success .ddga-progress__track,\n [data-theme='dark'] .ddga-progress--error .ddga-progress__track {\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 [data-theme='dark'] .ddga-progress__helper-icon,\n [data-theme='dark'] .ddga-progress__helper-text,\n [data-theme='dark'] .ddga-circular-progress__label {\n color: var(--ddga-text-secondary);\n }\n /* State captions keep the −700 colour in dark too (match the ✓/✕ badge); the blanket rule above\n would otherwise flatten them to gray. Higher specificity so it wins the tie. */\n [data-theme='dark'] .ddga-progress--success .ddga-progress__helper-text {\n color: var(--ddga-success-700);\n }\n [data-theme='dark'] .ddga-progress--error .ddga-progress__helper-text {\n color: var(--ddga-error-700);\n }\n [data-theme='dark'] .ddga-circular-progress--success .ddga-circular-progress__label {\n color: var(--ddga-success-700);\n }\n [data-theme='dark'] .ddga-circular-progress--error .ddga-circular-progress__label {\n color: var(--ddga-error-700);\n }\n /* Neutral fill is raw gray-700 (no dark remap) → lighten so the arc stays visible on dark. */\n [data-theme='dark'] .ddga-progress--neutral,\n [data-theme='dark'] .ddga-circular-progress--neutral {\n --ddga-progress-fill: var(--ddga-text-secondary);\n }\n\n /* Reduced motion: drop indeterminate animations + transitions. */\n @media (prefers-reduced-motion: reduce) {\n .ddga-progress__track[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 @media (forced-colors: active) {\n .ddga-progress__track {\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 .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__arc {\n stroke: currentColor;\n }\n .ddga-spinner__track {\n stroke: color-mix(in srgb, currentColor 12%, transparent);\n }\n\n .ddga-spinner--neutral .ddga-spinner__arc {\n stroke: var(--ddga-text-primary);\n }\n .ddga-spinner--primary .ddga-spinner__arc {\n stroke: var(--ddga-color-primary);\n }\n .ddga-spinner--neutral .ddga-spinner__track,\n .ddga-spinner--primary .ddga-spinner__track {\n stroke: var(--ddga-color-muted);\n }\n\n .ddga-spinner--on-color .ddga-spinner__arc {\n /* DGA surface-oncolor is a fixed white; must not theme-flip like primary-foreground does */\n stroke: #ffffff;\n }\n .ddga-spinner--on-color .ddga-spinner__track {\n stroke: var(--ddga-alpha-white-30);\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 .ddga-spinner--xl {\n font-size: 2.5rem;\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 @media (forced-colors: active) {\n .ddga-spinner__arc {\n stroke: CanvasText;\n }\n .ddga-spinner__track {\n stroke: transparent;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared — see field.css. */\n\n .ddga-switch-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* Track = 48×24 (single SDGA size). The neutral/green/ring colours are driven by three\n per-state custom properties so every state is one override, not a rule per part. */\n .ddga-switch {\n --ddga-switch-off: var(--ddga-gray-950);\n --ddga-switch-on: var(--ddga-color-primary);\n --ddga-switch-ring: var(--ddga-color-foreground);\n position: relative;\n display: inline-block;\n flex-shrink: 0;\n box-sizing: border-box;\n inline-size: 48px;\n block-size: 24px;\n padding: 0;\n border: none;\n border-radius: var(--ddga-radius-full);\n background-color: transparent;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n box-shadow 150ms ease;\n }\n\n /* OFF = outlined: 1px ring via inset shadow (no layout cost, keeps the centre transparent). */\n .ddga-switch[data-state='unchecked'] {\n box-shadow: inset 0 0 0 1px var(--ddga-switch-off);\n }\n /* ON = filled green. */\n .ddga-switch[data-state='checked'] {\n background-color: var(--ddga-switch-on);\n }\n\n /* State ramp: OFF gray-950→600→500, ON SA600→800→900 (SA800 has no semantic alias → raw ramp). */\n .ddga-switch:hover:not(:disabled) {\n --ddga-switch-off: var(--ddga-gray-600);\n --ddga-switch-on: var(--ddga-sa-800);\n }\n .ddga-switch:active:not(:disabled) {\n --ddga-switch-off: var(--ddga-gray-500);\n --ddga-switch-on: var(--ddga-color-primary-active);\n }\n /* Focus ring ink: OFF #0d121c, ON #161616 (border-black). */\n .ddga-switch[data-state='checked'] {\n --ddga-switch-ring: var(--ddga-text-primary);\n }\n\n /* Ripple halo (hover + pressed): a 4px gray-100 ring outside the track (border, not a filled\n disc — the OFF track is transparent, so a disc would bleed through the centre). */\n .ddga-switch::before {\n content: '';\n position: absolute;\n inset: -4px;\n border: 4px solid var(--ddga-color-muted);\n border-radius: var(--ddga-radius-full);\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease;\n }\n .ddga-switch:hover:not(:disabled)::before,\n .ddga-switch:active:not(:disabled)::before {\n opacity: 1;\n }\n\n /* Focus ring: 2px ink square (radius-xs) at the 56×32 envelope; replaces the ripple. */\n .ddga-switch::after {\n content: '';\n position: absolute;\n inset: -4px;\n border: 2px solid var(--ddga-switch-ring);\n border-radius: var(--ddga-radius-xs);\n opacity: 0;\n pointer-events: none;\n }\n .ddga-switch:focus-visible {\n outline: none;\n }\n .ddga-switch:focus-visible::before {\n opacity: 0;\n }\n .ddga-switch:focus-visible::after {\n opacity: 1;\n }\n\n /* Thumb: 16px circle, 4px inset, travel 24px. OFF = colored dot; ON = white (+ shadow-sm). */\n .ddga-switch__thumb {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-start: 4px;\n inline-size: 16px;\n block-size: 16px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-switch-off);\n translate: 0 0;\n transition:\n translate 150ms ease,\n background-color 150ms ease;\n will-change: translate;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n background-color: var(--ddga-color-background);\n box-shadow: var(--ddga-shadow-sm);\n translate: 24px 0;\n }\n [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n translate: -24px 0;\n }\n\n /* Error (off-spec; SDGA signals invalid via the Label slot). Recolours every part to error. */\n .ddga-switch--error {\n --ddga-switch-off: var(--ddga-color-error);\n --ddga-switch-on: var(--ddga-color-error);\n --ddga-switch-ring: var(--ddga-color-error);\n }\n\n /* Disabled: gray-400 outline + gray-300 thumb (OFF) / gray-300 track + white thumb, no check (ON).\n SDGA recolours rather than dimming — no opacity. */\n .ddga-switch:disabled {\n cursor: not-allowed;\n }\n .ddga-switch[data-state='unchecked']:disabled {\n box-shadow: inset 0 0 0 1px var(--ddga-gray-400);\n }\n .ddga-switch[data-state='unchecked']:disabled .ddga-switch__thumb {\n background-color: var(--ddga-gray-300);\n }\n .ddga-switch[data-state='checked']:disabled {\n background-color: var(--ddga-gray-300);\n }\n .ddga-switch[data-state='checked']:disabled .ddga-switch__thumb {\n box-shadow: none;\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 .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 /* Dark mode: flip the OFF outline/dot + ripple + focus ring to light (exact DGA dark deferred). */\n [data-theme='dark'] .ddga-switch {\n --ddga-switch-off: var(--ddga-gray-300);\n --ddga-switch-ring: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-switch:hover:not(:disabled) {\n --ddga-switch-off: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-switch::before {\n border-color: var(--ddga-gray-700);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-switch,\n .ddga-switch::before,\n .ddga-switch__thumb {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-switch[data-state='unchecked'] {\n box-shadow: inset 0 0 0 1px CanvasText;\n }\n .ddga-switch[data-state='checked'] {\n background-color: Highlight;\n }\n .ddga-switch__thumb {\n background-color: CanvasText;\n }\n .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n background-color: HighlightText;\n }\n .ddga-switch:focus-visible::after {\n border-color: Highlight;\n }\n .ddga-switch:disabled[data-state='unchecked'] {\n box-shadow: inset 0 0 0 1px 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: Black ─── */\n\n .ddga-button--black {\n background-color: var(--ddga-gray-950);\n color: #ffffff;\n }\n .ddga-button--black:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-800);\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-input);\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-error-200);\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 /* ─── Selected (aria-pressed) ─── */\n\n .ddga-button--primary[aria-pressed='true'] {\n background-color: var(--ddga-sa-800);\n }\n .ddga-button--secondary[aria-pressed='true'] {\n background-color: var(--ddga-gray-200);\n }\n .ddga-button--black[aria-pressed='true'] {\n background-color: var(--ddga-gray-700);\n }\n .ddga-button--destructive[aria-pressed='true'] {\n background-color: var(--ddga-error-800);\n }\n\n /* ─── Pressed (:active) ─── */\n\n .ddga-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-active);\n }\n .ddga-button--secondary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-button--black:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-600);\n }\n .ddga-button--destructive:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-900);\n }\n .ddga-button--destructive-subtle:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-200);\n }\n /* Transparent variants: pressed = one step past the hover tint. */\n .ddga-button--outline:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--ghost:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-button--destructive-outline:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--destructive-ghost:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-error-100);\n }\n\n /* ─── Sizes ─── */\n\n .ddga-button--sm {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.125rem;\n }\n .ddga-button--md {\n height: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n }\n .ddga-button--lg {\n height: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n }\n /* Icon-only squares (40 / 32 / 28 / 24; icon-sm 28 is off-spec). */\n .ddga-button--icon {\n height: 40px;\n width: 40px;\n padding: 0;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-button--icon-md {\n height: 32px;\n width: 32px;\n padding: 0;\n font-size: var(--ddga-font-size-sm);\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 .ddga-button--icon-xs {\n height: 24px;\n width: 24px;\n padding: 0;\n font-size: var(--ddga-font-size-xs);\n }\n\n /* ─── Full Width ─── */\n\n .ddga-button--full-width {\n inline-size: 100%;\n flex: 1 0 100%;\n }\n\n /* ─── On-color (on dark / brand surfaces) ─── */\n\n /* black + primary → white solid (dark label) */\n .ddga-button--on-color.ddga-button--black,\n .ddga-button--on-color.ddga-button--primary {\n background-color: #ffffff;\n color: var(--ddga-color-foreground);\n border-color: transparent;\n }\n .ddga-button--on-color.ddga-button--black:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-80);\n }\n .ddga-button--on-color.ddga-button--black:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-60);\n }\n .ddga-button--on-color.ddga-button--black[aria-pressed='true'],\n .ddga-button--on-color.ddga-button--primary[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-70);\n }\n\n /* secondary (neutral) + ghost (subtle) → white text on transparent */\n .ddga-button--on-color.ddga-button--secondary,\n .ddga-button--on-color.ddga-button--ghost {\n background-color: transparent;\n color: #ffffff;\n border-color: transparent;\n }\n /* outline → white text + translucent-white border */\n .ddga-button--on-color.ddga-button--outline {\n background-color: transparent;\n color: #ffffff;\n border-color: var(--ddga-alpha-white-40);\n }\n /* shared transparent-white hover / pressed / selected */\n .ddga-button--on-color.ddga-button--secondary:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-20);\n }\n .ddga-button--on-color.ddga-button--secondary:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--ghost:active:not(:disabled):not([aria-disabled='true']),\n .ddga-button--on-color.ddga-button--outline:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-alpha-white-40);\n }\n .ddga-button--on-color.ddga-button--secondary[aria-pressed='true'],\n .ddga-button--on-color.ddga-button--ghost[aria-pressed='true'],\n .ddga-button--on-color.ddga-button--outline[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-30);\n }\n\n /* destructive outline / ghost → light error label (DGA danger on-color) */\n .ddga-button--on-color.ddga-button--destructive-outline,\n .ddga-button--on-color.ddga-button--destructive-ghost {\n color: var(--ddga-error-200);\n }\n .ddga-button--on-color.ddga-button--destructive-outline {\n border-color: var(--ddga-error-200);\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 cursor: not-allowed;\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n border-color: transparent;\n }\n .ddga-button--outline:disabled,\n .ddga-button--outline[aria-disabled='true'],\n .ddga-button--destructive-outline:disabled,\n .ddga-button--destructive-outline[aria-disabled='true'] {\n background-color: transparent;\n border-color: var(--ddga-color-border);\n }\n .ddga-button--ghost:disabled,\n .ddga-button--ghost[aria-disabled='true'],\n .ddga-button--destructive-ghost:disabled,\n .ddga-button--destructive-ghost[aria-disabled='true'] {\n background-color: transparent;\n }\n /* On-color disabled: translucent white (a gray chip would vanish on color). */\n .ddga-button--on-color:disabled,\n .ddga-button--on-color[aria-disabled='true'] {\n background-color: var(--ddga-alpha-white-20);\n color: var(--ddga-alpha-white-40);\n border-color: var(--ddga-alpha-white-20);\n }\n [data-theme='dark'] .ddga-button:disabled,\n [data-theme='dark'] .ddga-button[aria-disabled='true'] {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-500);\n }\n\n /* Inset double ring (drawn inside so the box never shifts). */\n .ddga-button:focus-visible {\n outline: none;\n box-shadow:\n inset 0 0 0 2px var(--ddga-color-background),\n inset 0 0 0 4px var(--ddga-color-focus-ring);\n }\n /* On-color: inverted ring (dark inner + white outer). */\n .ddga-button--on-color:focus-visible {\n box-shadow:\n inset 0 0 0 2px var(--ddga-color-foreground),\n inset 0 0 0 4px #ffffff;\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 /* Field wrapper + helper/error line are shared (field.css). The field model\n mirrors TextInput (SDGA \"Number Input\" = the Text input field + flanking ±\n steppers, the SDGA \"Input Prefix-Suffix\" sub-component). */\n\n .ddga-field[data-slot='number-input-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-number-input__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-number-input__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/size/state/style) ─── */\n\n .ddga-number-input {\n position: relative;\n display: flex;\n align-items: stretch;\n inline-size: 100%;\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Sizes (SDGA Medium 32 / Large 40; type scales with size) ─── */\n\n .ddga-number-input--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-number-input--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-number-input--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-number-input--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <input>: transparent, start-aligned, Latin+LTR) ─── */\n\n .ddga-number-input__field {\n flex: 1 1 auto;\n min-inline-size: 0;\n block-size: 100%;\n padding-inline: var(--ddga-space-2);\n padding-block: 0;\n border: 0;\n background: transparent;\n color: inherit;\n font: inherit;\n text-align: start;\n caret-color: var(--ddga-gray-950);\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-gray-500);\n }\n\n .ddga-number-input__field:-webkit-autofill,\n .ddga-number-input__field:-webkit-autofill:hover,\n .ddga-number-input__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-gray-700);\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-gray-950);\n }\n\n /* ─── Stepper buttons (SDGA \"Input Prefix-Suffix\": Solid neutral chip, flush,\n full height; icon #161616; ＋ leads / − trails) ─── */\n\n .ddga-number-input__step {\n align-self: stretch;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n padding-inline: var(--ddga-space-4);\n padding-block: 0;\n border: 0;\n background-color: var(--ddga-gray-100);\n color: var(--ddga-text-primary);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-number-input--md .ddga-number-input__step {\n padding-inline: var(--ddga-space-3);\n }\n\n /* Icon: Large 24 / Medium 20. */\n .ddga-number-input__step svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-number-input--md .ddga-number-input__step svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n /* Hug the field's rounded outer corners (＋ = inline-start, − = inline-end). */\n .ddga-number-input__step--increment {\n border-start-start-radius: var(--ddga-radius-sm);\n border-end-start-radius: var(--ddga-radius-sm);\n }\n .ddga-number-input__step--decrement {\n border-start-end-radius: var(--ddga-radius-sm);\n border-end-end-radius: var(--ddga-radius-sm);\n }\n\n /* Solid state ramp (SDGA neutral-button: rest gray-100 → hover 200 → pressed\n 300, matching TextInputDropdown; SDGA's flattened hover token is a Figma quirk). */\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-300);\n }\n .ddga-number-input__step:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-number-input__step:disabled {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n /* Subtle stepper style (SDGA Style=Subtle: transparent → gray-100 → gray-200). */\n .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:active:not(:disabled) {\n background-color: var(--ddga-gray-200);\n }\n .ddga-number-input--steppers-subtle .ddga-number-input__step:disabled {\n background-color: transparent;\n }\n\n /* ─── Hover (SDGA: outlined style darkens its border to gray-700) ─── */\n\n .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n /* ─── Focus (SDGA: shadow-md + full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n .ddga-number-input:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-number-input--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-number-input::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-number-input:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50% 2px underline).\n Scoped to the field itself so pressing a stepper shows the stepper's\n own pressed state, not the field's. `--pressed` is a static demo hook. */\n\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n .ddga-number-input--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-number-input:has(.ddga-number-input__field:active)::after,\n .ddga-number-input--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border; bg/text unchanged) ─── */\n\n .ddga-number-input--error,\n .ddga-number-input--error:hover:not(:focus-within),\n .ddga-number-input--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── */\n\n .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── */\n\n .ddga-field[data-slot='number-input-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='number-input-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n /* ─── Dark mode ─── */\n /* SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n flipping semantic tokens so text/affordances stay readable. Exact DGA dark\n palette is deferred (matches TextInput). */\n\n [data-theme='dark'] .ddga-number-input {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field {\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-number-input--filled-lighter,\n [data-theme='dark'] .ddga-number-input--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-number-input--steppers-subtle .ddga-number-input__step {\n background-color: transparent;\n }\n [data-theme='dark']\n .ddga-number-input--steppers-subtle\n .ddga-number-input__step:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input__step:disabled {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-number-input--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-number-input::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:active):not(\n :has(.ddga-number-input__field:disabled)\n ),\n [data-theme='dark'] .ddga-number-input--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field,\n [data-theme='dark']\n .ddga-number-input:has(.ddga-number-input__field:disabled)\n .ddga-number-input__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__label,\n [data-theme='dark']\n .ddga-field[data-slot='number-input-field']:has(.ddga-number-input__field:disabled)\n .ddga-number-input__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='number-input-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-number-input,\n .ddga-number-input::after,\n .ddga-number-input__step {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n restore a visible outline ─── */\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 .ddga-number-input:has(.ddga-number-input__field:disabled) {\n border-color: GrayText;\n }\n .ddga-number-input:has(.ddga-number-input__field:disabled) .ddga-number-input__field {\n color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared — see field.css.\n Style (variant), error, read-only cascade from the group; disabled is per-item (Radix native). */\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: var(--ddga-font-weight-medium);\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 .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: 32px touch frame + label, SDGA spacing-xl gap. */\n .ddga-radio-row {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-4);\n }\n\n /* Item = 32px SDGA touch frame; the transparent 2px border is the focus frame (becomes ink on focus). */\n .ddga-radio {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n box-sizing: border-box;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 2px solid transparent;\n background: none;\n cursor: pointer;\n }\n\n /* Visible 24px ring. currentColor drives the dot; border + color move together per state. */\n .ddga-radio__circle {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-primary);\n transition:\n border-color 150ms ease,\n color 150ms ease,\n background-color 150ms ease;\n }\n\n /* Ripple halo (48px), behind the ring; hover + pressed only. */\n .ddga-radio__circle::before {\n content: '';\n position: absolute;\n inset: -12px;\n z-index: -1;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-gray-100);\n opacity: 0;\n pointer-events: none;\n transition: opacity 150ms ease;\n }\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled):hover\n .ddga-radio__circle::before,\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled):active\n .ddga-radio__circle::before {\n opacity: 1;\n }\n\n /* Unselected pressed fill. */\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='unchecked']:active\n .ddga-radio__circle {\n background-color: var(--ddga-gray-300);\n }\n\n /* Selected — Primary: border + dot follow the brand ramp. */\n .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n }\n /* SDGA selected-hover = SA800 (one step darker than SA600 primary). */\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:hover\n .ddga-radio__circle {\n border-color: var(--ddga-sa-800);\n color: var(--ddga-sa-800);\n }\n .ddga-radio-group:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:active\n .ddga-radio__circle {\n border-color: var(--ddga-color-primary-active);\n color: var(--ddga-color-primary-active);\n }\n\n /* Selected — Neutral: gray-950 base, gray-600 hover, gray-500 pressed. */\n .ddga-radio-group--neutral .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-gray-950);\n color: var(--ddga-gray-950);\n }\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:hover\n .ddga-radio__circle {\n border-color: var(--ddga-gray-600);\n color: var(--ddga-gray-600);\n }\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:active\n .ddga-radio__circle {\n border-color: var(--ddga-gray-500);\n color: var(--ddga-gray-500);\n }\n\n /* Focus: square 2px SDGA border-black frame at the 32px envelope. */\n .ddga-radio:focus-visible {\n outline: none;\n border-color: var(--ddga-color-focus-ring);\n }\n\n /* Read-only: gray-400 ring; Primary keeps its green dot, Neutral goes gray-400. */\n .ddga-radio-group--readonly .ddga-radio {\n cursor: default;\n }\n .ddga-radio-group--readonly .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n }\n .ddga-radio-group--readonly .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-color-primary);\n }\n .ddga-radio-group--readonly.ddga-radio-group--neutral\n .ddga-radio[data-state='checked']\n .ddga-radio__circle {\n color: var(--ddga-gray-400);\n }\n .ddga-radio-group--readonly .ddga-radio__label {\n cursor: default;\n }\n\n /* Error (off-spec; SDGA uses the Label alert slot). */\n .ddga-radio-group--error .ddga-radio__circle {\n border-color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-color-error);\n color: var(--ddga-color-error);\n }\n .ddga-radio-group--error .ddga-radio:focus-visible {\n border-color: var(--ddga-color-error);\n }\n\n /* Disabled (SDGA recolors to gray-400, no opacity). */\n .ddga-radio:disabled {\n cursor: not-allowed;\n }\n .ddga-radio:disabled .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n }\n .ddga-radio:disabled[data-state='checked'] .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-gray-400);\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 (dot only mounts when checked). */\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 /* 16px = SDGA dot (Figma inset 18.75%−0.63px ≈ 3.87px → 16.26px). Even size centers on integer px in the\n 22px content box (3px each side) so it stays crisp + exactly centered at DPR 1. */\n .ddga-radio__dot {\n inline-size: 16px;\n block-size: 16px;\n border-radius: var(--ddga-radius-full);\n background-color: currentColor;\n }\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 /* Dark mode: interactive Neutral flips light so it stays legible (read-only/disabled keep gray-400). */\n [data-theme='dark'] .ddga-radio__circle::before {\n background-color: var(--ddga-gray-700);\n }\n [data-theme='dark']\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']\n .ddga-radio__circle {\n border-color: var(--ddga-gray-100);\n color: var(--ddga-gray-100);\n }\n /* Hover/pressed must out-specify the resting rule above (equal-specificity tie → later wins). */\n [data-theme='dark']\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:hover\n .ddga-radio__circle {\n border-color: var(--ddga-gray-300);\n color: var(--ddga-gray-300);\n }\n [data-theme='dark']\n .ddga-radio-group--neutral:not(.ddga-radio-group--readonly)\n .ddga-radio:not(:disabled)[data-state='checked']:active\n .ddga-radio__circle {\n border-color: var(--ddga-gray-400);\n color: var(--ddga-gray-400);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-radio__circle,\n .ddga-radio__circle::before {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-radio__circle {\n border: 1px solid CanvasText;\n }\n .ddga-radio[data-state='checked'] .ddga-radio__circle {\n border-color: Highlight;\n }\n .ddga-radio__dot {\n background-color: Highlight;\n }\n .ddga-radio:focus-visible {\n border-color: Highlight;\n }\n .ddga-radio:disabled .ddga-radio__circle {\n border-color: GrayText;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n\n .ddga-status-tag {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n border-radius: var(--ddga-radius-full);\n font-family: inherit;\n font-weight: var(--ddga-font-weight-medium);\n white-space: nowrap;\n user-select: none;\n }\n\n /* ─── Sizes (SDGA x Small / Small / Medium = 10 / 12 / 16px) ─── */\n\n .ddga-status-tag--sm {\n height: 20px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-2xs); /* SDGA x-Small = Text-2xs 10px */\n font-weight: var(--ddga-font-weight-semibold); /* SDGA x-Small = SemiBold 600 */\n }\n\n .ddga-status-tag--md {\n height: 24px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-xs);\n }\n\n .ddga-status-tag--lg {\n height: 32px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-base);\n }\n\n /* ─── Dot (10px constant; color set per tone/status) ─── */\n\n .ddga-status-tag__dot {\n inline-size: 10px;\n block-size: 10px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-status-tag-dot, currentColor);\n flex-shrink: 0;\n }\n\n /* Subtle + Ghost dot = the tone's −800 (`tag-icon`). Inverted overrides below. */\n .ddga-status-tag--neutral {\n --ddga-status-tag-dot: var(--ddga-gray-800);\n }\n .ddga-status-tag--info {\n --ddga-status-tag-dot: var(--ddga-info-800);\n }\n .ddga-status-tag--success {\n --ddga-status-tag-dot: var(--ddga-success-800);\n }\n .ddga-status-tag--error {\n --ddga-status-tag-dot: var(--ddga-error-800);\n }\n .ddga-status-tag--warning {\n --ddga-status-tag-dot: var(--ddga-warning-800);\n }\n\n /* ─── Subtle: −50 bg + −800 text ─── */\n\n .ddga-status-tag--subtle.ddga-status-tag--neutral {\n background-color: var(--ddga-gray-50);\n color: var(--ddga-gray-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--info {\n background-color: var(--ddga-info-50);\n color: var(--ddga-info-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--success {\n background-color: var(--ddga-success-50);\n color: var(--ddga-success-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--error {\n background-color: var(--ddga-error-50);\n color: var(--ddga-error-800);\n }\n .ddga-status-tag--subtle.ddga-status-tag--warning {\n background-color: var(--ddga-warning-50);\n color: var(--ddga-warning-800);\n }\n\n /* ─── Ghost: transparent + neutral text (the dot keeps the tone) ─── */\n\n .ddga-status-tag--ghost {\n background-color: transparent;\n color: var(--ddga-gray-800);\n }\n\n /* ─── Inverted: tone \"strong\" bg + white text + alpha-white-60 dot ─── */\n /* The strong step is per-tone — Success/Warning use −700 (the −600 is too light for\n white text), the others −600, Neutral gray-600. */\n\n .ddga-status-tag--inverted {\n color: #ffffff;\n }\n .ddga-status-tag--inverted.ddga-status-tag--neutral {\n background-color: var(--ddga-gray-600);\n }\n .ddga-status-tag--inverted.ddga-status-tag--info {\n background-color: var(--ddga-info-600);\n }\n .ddga-status-tag--inverted.ddga-status-tag--success {\n background-color: var(--ddga-success-700);\n }\n .ddga-status-tag--inverted.ddga-status-tag--error {\n background-color: var(--ddga-error-600);\n }\n .ddga-status-tag--inverted.ddga-status-tag--warning {\n background-color: var(--ddga-warning-700);\n }\n .ddga-status-tag--inverted .ddga-status-tag__dot {\n background-color: var(--ddga-alpha-white-60);\n }\n\n /* ─── Dark mode (SDGA is light-only; the −50 tints don't theme-flip) ─── */\n\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--neutral {\n background-color: var(--ddga-alpha-white-10);\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--info {\n background-color: rgb(21 112 239 / 0.16);\n color: var(--ddga-info-200, #b2ddff);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--success {\n background-color: rgb(7 148 85 / 0.18);\n color: var(--ddga-success-200, #abefc6);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--error {\n background-color: rgb(217 45 32 / 0.18);\n color: var(--ddga-error-200, #fecdca);\n }\n [data-theme='dark'] .ddga-status-tag--subtle.ddga-status-tag--warning {\n background-color: rgb(220 104 3 / 0.18);\n color: var(--ddga-warning-200, #fedf89);\n }\n [data-theme='dark'] .ddga-status-tag--ghost {\n color: var(--ddga-gray-200);\n }\n /* Lighten the dot to the (now light) text on dark subtle/ghost chips. */\n [data-theme='dark'] .ddga-status-tag--subtle,\n [data-theme='dark'] .ddga-status-tag--ghost {\n --ddga-status-tag-dot: currentColor;\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-status-tag {\n border: 1px solid CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* Shared field primitives , wrapper + helper/error message. Used by\n Input / Textarea / Checkbox. Component-specific bits (the label and\n the control itself) stay in each component's CSS. */\n\n .ddga-field {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n\n .ddga-field__message {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n }\n\n .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n .ddga-field__message--error {\n color: var(--ddga-color-error);\n }\n\n .ddga-field__message--with-icon {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n .ddga-field__message-icon {\n display: inline-flex;\n flex-shrink: 0;\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-2);\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl);\n font-family: inherit;\n z-index: 50;\n outline: none;\n overflow: clip;\n }\n\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 @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 /* ─── Item (CheckboxItem/RadioItem/SubTrigger share the base) — 40px row ─── */\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: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-primary);\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n /* SDGA Hovered — mouse over the row. */\n .ddga-dropdown-menu__item:hover {\n background-color: var(--ddga-gray-100);\n }\n /* SDGA Focused — ink ring, transparent row. Radix flags the active item\n `data-highlighted` for BOTH pointer and keyboard (and `:focus-visible`\n fires on hover here too), so focus can't be keyed off directly. Split on\n `:hover`: highlighted but NOT hovered (and not an open submenu) ⇒ keyboard. */\n .ddga-dropdown-menu__item[data-highlighted]:not(:hover):not([data-state='open']) {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n }\n /* SDGA Pressed. */\n .ddga-dropdown-menu__item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-dropdown-menu__item[data-disabled] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n /* SDGA Selected = SA-50 row + green label / icons / trailing check. */\n .ddga-dropdown-menu__item[data-state='checked'] {\n background-color: var(--ddga-sa-50);\n color: var(--ddga-color-primary);\n }\n\n .ddga-dropdown-menu__item[data-destructive] {\n color: var(--ddga-color-destructive);\n }\n .ddga-dropdown-menu__item[data-destructive]:hover,\n .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n background-color: var(--ddga-error-50);\n }\n\n /* ─── Row pieces ─── */\n\n .ddga-dropdown-menu__label {\n flex: 1 1 auto;\n min-inline-size: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\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: 24px;\n block-size: 24px;\n flex-shrink: 0;\n color: inherit;\n }\n .ddga-dropdown-menu__icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n\n /* SDGA \"trail\": counter / icon / Tag / Switch / Button. Pushed to the row end. */\n .ddga-dropdown-menu__trailing {\n display: inline-flex;\n align-items: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n min-block-size: 24px;\n color: inherit;\n }\n\n /* ─── Checkbox / Radio = trailing tick-02 check (green when Selected) ─── */\n\n .ddga-dropdown-menu__indicator {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n margin-inline-start: auto;\n inline-size: 24px;\n block-size: 24px;\n color: inherit;\n }\n .ddga-dropdown-menu__indicator-icon {\n inline-size: 24px;\n block-size: 24px;\n }\n\n /* ─── Submenu ─── */\n\n .ddga-dropdown-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-menu__sub-chevron {\n margin-inline-start: auto;\n inline-size: 24px;\n block-size: 24px;\n flex-shrink: 0;\n color: inherit;\n }\n [dir='rtl'] .ddga-dropdown-menu__sub-chevron {\n transform: scaleX(-1);\n }\n\n /* ─── Group label (SDGA: Text xs Bold, gray-800, no transform) + Separator ─── */\n\n .ddga-dropdown-menu__group-label {\n padding-block: var(--ddga-space-2) var(--ddga-space-3);\n padding-inline: var(--ddga-space-2) var(--ddga-space-4);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-bold);\n color: var(--ddga-gray-800);\n }\n\n .ddga-dropdown-menu__separator {\n block-size: 1px;\n margin-block: var(--ddga-space-2);\n margin-inline: calc(var(--ddga-space-2) * -1);\n background-color: var(--ddga-color-input);\n }\n\n /* ─── Dark mode (SDGA light values are fixed ramp steps → remap to flipping tokens) ─── */\n\n [data-theme='dark'] .ddga-dropdown-menu__item:hover,\n [data-theme='dark'] .ddga-dropdown-menu__item--sub[data-state='open'] {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-menu__item:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-menu__item[data-state='checked'] {\n background-color: rgb(27 131 84 / 0.18);\n color: var(--ddga-sa-400);\n }\n [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive][data-highlighted],\n [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive]:hover {\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:hover,\n .ddga-dropdown-menu__item[data-highlighted] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-menu__item:focus-visible {\n outline-color: Highlight;\n }\n .ddga-dropdown-menu__separator {\n background-color: CanvasText;\n }\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-menu[data-state='open'],\n .ddga-dropdown-menu[data-state='closed'] {\n animation: none;\n }\n }\n}\n","@layer ddga-components {\n .ddga-skeleton {\n display: block;\n position: relative;\n overflow: hidden;\n border-radius: var(--ddga-radius-sm);\n background-image: linear-gradient(\n to right,\n color-mix(in srgb, var(--ddga-gray-200) 20%, transparent),\n color-mix(in srgb, var(--ddga-gray-300) 20%, transparent) 25%,\n color-mix(in srgb, var(--ddga-gray-400) 20%, transparent) 50%,\n color-mix(in srgb, var(--ddga-gray-300) 20%, transparent) 75%,\n color-mix(in srgb, var(--ddga-gray-200) 20%, transparent)\n );\n background-size: 200% 100%;\n background-position: 0% 0;\n }\n\n .ddga-skeleton--text {\n width: 100%;\n height: 1em;\n border-radius: var(--ddga-radius-md);\n }\n\n .ddga-skeleton--rectangle {\n width: 100%;\n height: 40px;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-skeleton--circle {\n width: 40px;\n aspect-ratio: 1;\n border-radius: var(--ddga-radius-full);\n }\n\n .ddga-skeleton--square {\n width: 40px;\n aspect-ratio: 1;\n border-radius: var(--ddga-radius-xl);\n }\n\n .ddga-skeleton--shimmer {\n animation: ddga-skeleton-shimmer 1.6s ease-in-out infinite alternate;\n }\n\n @keyframes ddga-skeleton-shimmer {\n from {\n background-position: 0% 0;\n }\n to {\n background-position: 100% 0;\n }\n }\n\n [dir='rtl'] .ddga-skeleton--shimmer {\n animation-name: ddga-skeleton-shimmer-rtl;\n }\n\n @keyframes ddga-skeleton-shimmer-rtl {\n from {\n background-position: 100% 0;\n }\n to {\n background-position: 0% 0;\n }\n }\n\n .ddga-skeleton--none {\n animation: none;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-skeleton--shimmer {\n animation: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-skeleton {\n border: 1px solid GrayText;\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 /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-dropdown__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-regular);\n color: var(--ddga-text-primary);\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-dropdown__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the field; SDGA Dropdown Input = the Text Input field + a\n trailing chevron). Sizes md 32 / lg 40, fill styles, gray-400 border. ─── */\n\n .ddga-dropdown-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-4);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n font-family: inherit;\n text-align: start;\n cursor: pointer;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-dropdown-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-dropdown-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-dropdown-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-dropdown-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n .ddga-dropdown__value {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n .ddga-dropdown__placeholder {\n color: var(--ddga-gray-500);\n }\n\n /* SDGA chevron = arrow-down-01, ink #161616, 20px. */\n .ddga-dropdown__icon {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n\n /* Hover (outlined only): border → gray-700. */\n .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-700);\n }\n\n /* Focus: shadow-md + full-width 2px dark underline, NO ring. */\n .ddga-dropdown-trigger:focus-visible {\n outline: none;\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-dropdown-trigger--default:focus-visible {\n border-color: var(--ddga-gray-400);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-dropdown-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-dropdown-trigger:focus-visible::after {\n transform: scaleX(1);\n }\n\n /* Pressed: gray-100 fill + short centered underline. */\n .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-trigger:active:not(:disabled)::after {\n transform: scaleX(0.5);\n }\n\n /* Error: error-700 border. */\n .ddga-dropdown-trigger--error,\n .ddga-dropdown-trigger--error:hover:not(:focus-visible),\n .ddga-dropdown-trigger--error:focus-visible {\n border-color: var(--ddga-error-700);\n }\n\n /* Read-only: gray-300 border, transparent fill. */\n .ddga-dropdown-trigger[aria-readonly='true'] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: default;\n }\n\n /* Disabled: gray-300 border, transparent, gray-400 text — no opacity. */\n .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n color: var(--ddga-gray-400);\n }\n .ddga-dropdown-trigger:disabled .ddga-dropdown__placeholder,\n .ddga-dropdown-trigger:disabled .ddga-dropdown__icon {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__label,\n .ddga-field[data-slot='dropdown-field']:has(.ddga-dropdown-trigger:disabled)\n .ddga-dropdown__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Panel ─── */\n\n .ddga-dropdown-content {\n background-color: var(--ddga-color-background);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl); /* matches measured SDGA Menu panel */\n overflow: hidden;\n z-index: 50;\n min-inline-size: 200px;\n }\n .ddga-dropdown-content[data-state='open'] {\n animation: ddga-dropdown-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n }\n .ddga-dropdown-content[data-state='closed'] {\n animation: ddga-dropdown-out 80ms ease-in;\n }\n @keyframes ddga-dropdown-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-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n .ddga-dropdown-command {\n display: flex;\n flex-direction: column;\n max-block-size: min(340px, 60vh);\n }\n\n .ddga-dropdown-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-input);\n background-color: transparent;\n color: inherit;\n font: inherit;\n outline: none;\n }\n .ddga-dropdown-input::placeholder {\n color: var(--ddga-gray-500);\n }\n /* Non-searchable mode keeps a focusable input (cmdk keyboard) but hides it. */\n .ddga-dropdown-input--hidden {\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 .ddga-dropdown-list {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n padding: var(--ddga-space-1);\n }\n .ddga-dropdown-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 /* ─── List item (SDGA Dropdown List Item: p-8, gap-8, Text sm 14/20 #161616) ─── */\n\n .ddga-dropdown-item {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n cursor: default;\n user-select: none;\n outline: none;\n -webkit-tap-highlight-color: transparent;\n }\n /* cmdk highlight (hover + keyboard) → SDGA Hovered gray-100. */\n .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-gray-100);\n }\n .ddga-dropdown-item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-dropdown-item[data-disabled='true'] {\n color: var(--ddga-gray-400);\n pointer-events: none;\n }\n\n .ddga-dropdown-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 /* Single-select: trailing tick-02 check (20px ink) when chosen. */\n .ddga-dropdown-item__check {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 20px;\n color: var(--ddga-text-primary);\n }\n .ddga-dropdown-item__check > svg {\n inline-size: 100%;\n block-size: 100%;\n }\n\n /* Multi-select: leading 16px checkbox (gray-500 outline → gray-950 fill). */\n .ddga-dropdown-item__checkbox {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n border: 1px solid var(--ddga-gray-500);\n border-radius: var(--ddga-radius-xs);\n color: #ffffff;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-gray-950);\n border-color: var(--ddga-gray-950);\n }\n .ddga-dropdown-item__checkbox > svg {\n inline-size: 12px;\n block-size: 12px;\n }\n\n /* ─── Group label (SDGA: Text sm Semibold, gray-700) + Separator ─── */\n\n .ddga-dropdown-group [cmdk-group-heading] {\n padding-block-start: var(--ddga-space-2);\n padding-block-end: var(--ddga-space-1);\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-gray-700);\n }\n .ddga-dropdown-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-input);\n }\n\n /* ─── Dark mode ─── */\n /* SDGA light values are fixed ramp steps; remap to flipping tokens so the\n field + panel stay readable. text-primary/foreground already flip. */\n\n [data-theme='dark'] .ddga-dropdown-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown__placeholder,\n [data-theme='dark'] .ddga-dropdown-input::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--filled-lighter,\n [data-theme='dark'] .ddga-dropdown-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger--default:hover:not(:focus-visible):not(:disabled) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-dropdown-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-dropdown-trigger:active:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-trigger[aria-readonly='true'],\n [data-theme='dark'] .ddga-dropdown-trigger:disabled {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item[data-selected='true'] {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-dropdown-item:active {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-dropdown-item__checkbox[data-checked] {\n background-color: var(--ddga-text-primary);\n border-color: var(--ddga-text-primary);\n color: var(--ddga-color-background);\n }\n [data-theme='dark'] .ddga-dropdown-group [cmdk-group-heading] {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion + Forced colors ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-dropdown-trigger::after {\n transition: none;\n }\n .ddga-dropdown-content[data-state='open'],\n .ddga-dropdown-content[data-state='closed'] {\n animation: none;\n }\n }\n @media (forced-colors: active) {\n .ddga-dropdown-trigger,\n .ddga-dropdown-content {\n border: 1px solid CanvasText;\n }\n .ddga-dropdown-trigger:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-dropdown-item[data-selected='true'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-dropdown-item__checkbox[data-checked] {\n background-color: Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* Each star stacks an empty base + a clipped filled overlay; the overlay\n inline-size drives full/half/empty. Logical inset keeps half-fill RTL-correct. */\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 .ddga-rating {\n --ddga-rating-color: var(--ddga-gold-600);\n --ddga-rating-empty: var(--ddga-color-border);\n --ddga-rating-disc: 46px;\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 /* SDGA Style=Brand → green fill. */\n .ddga-rating--brand {\n --ddga-rating-color: var(--ddga-color-primary);\n }\n\n /* SDGA box sizes Small 24 / Medium 32 / Large 48 (star = 1em); pressed disc\n 38 / 46 / 54 (its own scale, not box-proportional). */\n .ddga-rating--sm {\n font-size: 1.5rem;\n --ddga-rating-disc: 38px;\n }\n .ddga-rating--md {\n font-size: 2rem;\n --ddga-rating-disc: 46px;\n }\n .ddga-rating--lg {\n font-size: 3rem;\n --ddga-rating-disc: 54px;\n }\n\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 isolation: isolate;\n }\n\n /* SDGA Pressed: a gray-100 disc (38/46/54 per size) behind the glyph while an\n interactive star is active. Centered → physical props (no RTL flip). */\n .ddga-rating__star::before {\n content: '';\n position: absolute;\n top: 50%;\n left: 50%;\n inline-size: var(--ddga-rating-disc);\n block-size: var(--ddga-rating-disc);\n transform: translate(-50%, -50%);\n border-radius: var(--ddga-radius-full);\n background: var(--ddga-color-muted);\n opacity: 0;\n z-index: -1;\n }\n .ddga-rating[role='slider']:not([data-disabled]) .ddga-rating__star:active::before {\n opacity: 1;\n }\n\n /* Empty (base) layer; color set here so any currentColor icon inherits it. */\n .ddga-rating__star-bg {\n display: block;\n line-height: 0;\n color: var(--ddga-rating-empty);\n }\n\n /* Clipped overlay pinned to the logical start (flips 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 line-height: 0;\n }\n\n /* Any glyph (default star or a custom `icon`) scales to the box + keeps its\n intrinsic width so the clip reveals the leading half. */\n .ddga-rating__star :where(svg) {\n display: block;\n inline-size: 1em;\n block-size: 1em;\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 .ddga-search-box.ddga-text-input--md {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n .ddga-search-box.ddga-text-input--lg {\n block-size: 48px;\n }\n\n .ddga-search-box .ddga-text-input__adornment--start {\n color: var(--ddga-gray-700);\n }\n /* gray-700 is a fixed raw step — flip to the dark-aware tertiary so the magnifier stays legible. */\n [data-theme='dark'] .ddga-search-box .ddga-text-input__adornment--start {\n color: var(--ddga-text-tertiary);\n }\n .ddga-search-box .ddga-text-input__adornment--start svg {\n inline-size: 20px;\n block-size: 20px;\n transform: scaleX(-1);\n }\n [dir='rtl'] .ddga-search-box .ddga-text-input__adornment--start svg {\n transform: none;\n }\n /* SDGA trailing icon = 20px; the mic/clear glyphs default to 1em (14px inside icon-sm button). */\n .ddga-search-box .ddga-text-input__adornment--end svg {\n inline-size: 20px;\n block-size: 20px;\n }\n\n .ddga-search-box .ddga-text-input__field::-webkit-search-cancel-button,\n .ddga-search-box .ddga-text-input__field::-webkit-search-decoration,\n .ddga-search-box .ddga-text-input__field::-webkit-search-results-button,\n .ddga-search-box .ddga-text-input__field::-webkit-search-results-decoration {\n appearance: none;\n display: none;\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 /* ─── 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","/* Arabic abjad alphabetic counter — أ ب ج … in classical abjad order, for the\n RTL ordered Level-Two marker. `arabic-indic` is native; abjad is not. Symbols\n are the W3C \"Ready-made Counter Styles\" sequence (`\\647\\200D` = HEH + ZWJ so it\n joins). Counter-style names are global, so this lives outside the cascade layer. */\n@counter-style ddga-arabic-abjad {\n system: fixed;\n symbols: '\\623' '\\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 /* SDGA content list: Type (ordered/unordered/with-icon) × tone × Level. Each item is\n a flex row [marker · 8px gap · text]; tone colours marker + text together via\n currentColor; line-height 24 carries the vertical rhythm (container gap 0). */\n\n .ddga-list {\n margin: 0;\n padding: 0;\n list-style: none;\n display: flex;\n flex-direction: column;\n align-items: start;\n gap: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\n }\n\n .ddga-list--primary {\n color: var(--ddga-color-primary);\n }\n .ddga-list--neutral {\n color: var(--ddga-text-primary);\n }\n /* For dark / brand surfaces — consumer supplies the background. */\n .ddga-list--on-color {\n color: #fff;\n }\n\n .ddga-list__item {\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-2);\n color: inherit;\n }\n /* SDGA: ordered + with-icon rows center marker↔text; unordered L1 stays start (multi-line wrap). */\n .ddga-list--ordered > .ddga-list__item,\n .ddga-list--with-icon > .ddga-list__item {\n align-items: center;\n }\n\n .ddga-list__item[data-level='2'] {\n padding-inline-start: var(--ddga-space-6);\n }\n\n .ddga-list--ordered > .ddga-list__item::before,\n .ddga-list--unordered > .ddga-list__item::before {\n flex-shrink: 0;\n }\n\n /* Ordered: decimal+\"-\" at L1, lower-alpha+\"-\" at L2 (Arabic abjad in RTL). Digits\n stay Latin in RTL per SDGA; letters localize. counter() drops the style suffix,\n so the \"-\" is appended explicitly. */\n .ddga-list--ordered {\n counter-reset: ddga-l1 ddga-l2;\n }\n .ddga-list--ordered > .ddga-list__item:not([data-level='2']) {\n counter-increment: ddga-l1;\n counter-reset: ddga-l2;\n }\n .ddga-list--ordered > .ddga-list__item:not([data-level='2'])::before {\n content: counter(ddga-l1, decimal) '-';\n }\n .ddga-list--ordered > .ddga-list__item[data-level='2'] {\n counter-increment: ddga-l2;\n }\n .ddga-list--ordered > .ddga-list__item[data-level='2']::before {\n content: counter(ddga-l2, lower-alpha) '-';\n }\n [dir='rtl'] .ddga-list--ordered > .ddga-list__item[data-level='2']::before {\n content: counter(ddga-l2, ddga-arabic-abjad) '-';\n }\n\n /* Unordered: hyphen bullet at L1, dot at L2. */\n .ddga-list--unordered > .ddga-list__item:not([data-level='2'])::before {\n content: '-';\n }\n .ddga-list--unordered > .ddga-list__item[data-level='2']::before {\n content: '\\2022';\n }\n\n /* With Icon: 16px glyph centred on the first 24px line; tone via currentColor. */\n .ddga-list__icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n inline-size: 16px;\n block-size: 1.5em;\n color: inherit;\n }\n .ddga-list__icon svg {\n inline-size: 16px;\n block-size: 16px;\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 /* DGA Platforms Code Metric card. `large` = chart below the figures, `small` =\n chart beside. Exact SDGA color steps; the raw -700/-800 steps get dark overrides. */\n\n .ddga-metric {\n --ddga-metric-ink: var(--ddga-gray-800);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-6);\n max-inline-size: 22.5rem;\n padding: var(--ddga-space-4);\n background-color: var(--ddga-color-card);\n border-radius: var(--ddga-radius-xl);\n box-shadow: var(--ddga-shadow-md);\n color: var(--ddga-color-card-foreground);\n }\n\n /* ─── Header (featured icon + label · action) ─── */\n\n .ddga-metric__header {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n }\n .ddga-metric__heading {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n }\n .ddga-metric__icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex: none;\n inline-size: 2rem;\n block-size: 2rem;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-50);\n color: var(--ddga-success-700);\n }\n .ddga-metric__icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-metric__action {\n flex: none;\n }\n .ddga-metric__label {\n color: var(--ddga-metric-ink);\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.4286; /* 20/14 */\n }\n\n /* ─── Body (figures + chart; layout swaps per Style) ─── */\n\n .ddga-metric__body {\n display: flex;\n gap: var(--ddga-space-6);\n }\n .ddga-metric--large .ddga-metric__body {\n flex-direction: column;\n }\n .ddga-metric--small .ddga-metric__body {\n flex-direction: row;\n align-items: flex-end;\n gap: var(--ddga-space-6); /* SDGA body row gap 24 */\n }\n\n .ddga-metric__figures {\n display: flex;\n flex: 1 1 0;\n min-inline-size: 0;\n }\n .ddga-metric--large .ddga-metric__figures {\n flex-direction: row;\n align-items: center;\n gap: var(--ddga-space-6); /* SDGA value↔info gap 24 (spacing-3xl) */\n }\n .ddga-metric--small .ddga-metric__figures {\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-metric__value {\n color: var(--ddga-metric-ink);\n font-size: 2.25rem; /* SDGA Display md 36 — no Display token yet */\n font-weight: var(--ddga-font-weight-bold);\n line-height: 2.75rem;\n letter-spacing: -0.02em;\n font-variant-numeric: tabular-nums;\n }\n /* letter-spacing breaks Arabic cursive joining */\n [dir='rtl'] .ddga-metric__value {\n letter-spacing: normal;\n }\n\n .ddga-metric__info {\n display: flex;\n align-items: flex-end; /* SDGA: Info items-end */\n gap: var(--ddga-space-2);\n }\n .ddga-metric--large .ddga-metric__info {\n flex: 1 1 0;\n justify-content: flex-end;\n }\n /* SDGA keeps the big value on the left in RTL — only the comparison/change mirror. */\n [dir='rtl'] .ddga-metric--large .ddga-metric__figures {\n flex-direction: row-reverse;\n }\n [dir='rtl'] .ddga-metric--large .ddga-metric__info {\n justify-content: flex-start;\n }\n\n .ddga-metric__change {\n --ddga-metric-change-color: var(--ddga-text-secondary);\n display: inline-flex;\n align-items: center;\n gap: 0.125rem; /* 2px, no token */\n color: var(--ddga-metric-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-metric__change[data-type='02'] {\n gap: var(--ddga-space-1);\n }\n .ddga-metric__change--up {\n --ddga-metric-change-color: var(--ddga-success-700);\n }\n .ddga-metric__change--down {\n --ddga-metric-change-color: var(--ddga-error-700);\n }\n .ddga-metric__change-icon {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n .ddga-metric__change-icon > svg {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n .ddga-metric__change-label {\n color: var(--ddga-text-tertiary);\n font-size: var(--ddga-font-size-sm);\n }\n\n /* ─── Trend chart (line + faded area + marker; colored by trend) ─── */\n .ddga-metric__chart {\n position: relative;\n block-size: 4rem;\n --ddga-metric-chart-line: var(--ddga-success-700);\n --ddga-metric-chart-area: var(--ddga-success-600);\n }\n .ddga-metric__chart[data-trend='down'] {\n --ddga-metric-chart-line: var(--ddga-error-700);\n --ddga-metric-chart-area: var(--ddga-error-600);\n }\n .ddga-metric--large .ddga-metric__chart {\n inline-size: 100%;\n }\n .ddga-metric--small .ddga-metric__chart {\n flex: none;\n inline-size: 8rem;\n }\n .ddga-metric__chart-svg {\n display: block;\n inline-size: 100%;\n block-size: 100%;\n }\n .ddga-metric__chart-line {\n fill: none;\n stroke: var(--ddga-metric-chart-line);\n stroke-width: 2px;\n stroke-linecap: round;\n stroke-linejoin: round;\n }\n /* Marker: faint ring (::before) + solid white dot (::after). */\n .ddga-metric__chart-marker {\n position: absolute;\n inline-size: 22px;\n block-size: 22px;\n transform: translate(-50%, -50%);\n }\n .ddga-metric__chart-marker::before {\n content: '';\n position: absolute;\n inset: 0;\n border-radius: var(--ddga-radius-full);\n border: 2px solid var(--ddga-metric-chart-line);\n opacity: 0.2;\n }\n .ddga-metric__chart-marker::after {\n content: '';\n position: absolute;\n inset: 5px; /* 12px dot in the 22px ring */\n border-radius: var(--ddga-radius-full);\n background-color: var(\n --ddga-color-card\n ); /* erase against the card, not the page (differs in dark) */\n border: 2px solid var(--ddga-metric-chart-line);\n }\n\n /* ─── Footer (full-bleed divider + actions row) ─── */\n .ddga-metric__footer {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n }\n .ddga-metric__divider {\n margin-inline: calc(-1 * var(--ddga-space-4)); /* bleed past the card padding */\n block-size: 1px;\n background-color: var(--ddga-color-input);\n }\n .ddga-metric__actions {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n }\n\n /* ─── Dark mode (lighten the raw -700/-800 steps) ─── */\n [data-theme='dark'] .ddga-metric {\n --ddga-metric-ink: var(--ddga-gray-100);\n }\n [data-theme='dark'] .ddga-metric__icon {\n background-color: rgb(37 147 95 / 0.18);\n color: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-metric__change--up {\n --ddga-metric-change-color: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-metric__change--down {\n --ddga-metric-change-color: var(--ddga-error-400);\n }\n [data-theme='dark'] .ddga-metric__chart {\n --ddga-metric-chart-line: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-metric__chart[data-trend='down'] {\n --ddga-metric-chart-line: var(--ddga-error-400);\n }\n\n /* ─── Forced colors ─── */\n @media (forced-colors: active) {\n .ddga-metric__icon {\n border: 1px solid CanvasText;\n }\n .ddga-metric__divider {\n background-color: CanvasText;\n }\n }\n\n /* ─── MetricGroup (layout parent for Metric cards) ─── */\n\n .ddga-metric-group {\n --ddga-metric-group-gap: var(--ddga-space-4);\n }\n .ddga-metric-group--gap-sm {\n --ddga-metric-group-gap: var(--ddga-space-3);\n }\n .ddga-metric-group--gap-md {\n --ddga-metric-group-gap: var(--ddga-space-4);\n }\n .ddga-metric-group--gap-lg {\n --ddga-metric-group-gap: var(--ddga-space-6);\n }\n\n .ddga-metric-group--horizontal {\n display: grid;\n gap: var(--ddga-metric-group-gap);\n grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));\n }\n .ddga-metric-group--horizontal.ddga-metric-group--cols {\n /* `columns` is a responsive MAX: up to N per row, wrapping down as the GROUP\n (not the viewport) narrows — so it's container-aware, no media query. */\n grid-template-columns: repeat(\n auto-fit,\n minmax(\n max(\n 15rem,\n calc(\n (100% - (var(--ddga-metric-group-columns) - 1) * var(--ddga-metric-group-gap)) /\n var(--ddga-metric-group-columns)\n )\n ),\n 1fr\n )\n );\n }\n\n .ddga-metric-group--vertical {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-metric-group-gap);\n }\n\n /* Inside a group, release the standalone width cap. */\n .ddga-metric-group .ddga-metric {\n max-inline-size: none;\n }\n}\n","@layer ddga-components {\n /* Standalone two-state Toggle button. (The SDGA segmented control lives in\n content-switcher.css.) Pressed state comes from Radix's [data-state='on']. */\n\n .ddga-toggle {\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 block-size: 32px;\n padding-inline: var(--ddga-space-2);\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-toggle--md {\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 block-size: 40px;\n padding-inline: var(--ddga-space-4);\n font-size: var(--ddga-font-size-lg);\n }\n\n .ddga-toggle:hover:not(:disabled) {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-toggle[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 background-color: var(--ddga-color-primary-hover);\n }\n\n .ddga-toggle--outline {\n border-color: var(--ddga-color-input);\n }\n\n .ddga-toggle:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 1px;\n }\n\n .ddga-toggle:disabled {\n opacity: 0.5;\n cursor: not-allowed;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-toggle {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-toggle[data-state='on'] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-toggle:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* Semantic <table> compound (SDGA Platforms Code). Row dividers are the base\n look — a gray-300 hairline between body rows, always on. Header columns carry\n vertical gray-300 dividers; body columns do not. There is NO full-grid variant.\n `contained` adds only an outer gray-300 frame + radius-sm on the scroll region.\n Density/zebra cascade from the root via descendant selectors; logical properties\n throughout, with [dir='rtl'] overrides only for the physical box-shadow insets. */\n\n /* ─── Scroll region ─── */\n\n .ddga-table__region {\n inline-size: 100%;\n /* Horizontal scroll for wide tables. Vertical stays clipped (the region grows\n to content height, so nothing is cut) until `maxHeight` caps it — at which\n point the component sets `overflow-y: auto` inline so the body scrolls and\n `stickyHeader` engages. */\n overflow-x: auto;\n overflow-y: hidden;\n }\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: 2px;\n }\n /* `contained` = outer frame only (no full grid); radius-sm clips its corners.\n Non-contained (default) stays sharp-cornered per spec (radius 0). */\n .ddga-table__region:has(> .ddga-table--contained) {\n border: 1px solid var(--ddga-color-input);\n border-radius: var(--ddga-radius-sm);\n }\n\n /* ─── Table base ─── */\n\n .ddga-table {\n --ddga-table-pad-block: var(--ddga-space-2);\n --ddga-table-pad-inline: var(--ddga-space-4);\n --ddga-table-row-h: 4rem;\n\n inline-size: 100%;\n border-collapse: collapse;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-base);\n background-color: var(--ddga-color-card);\n text-align: start;\n }\n\n /* ─── Density (row height) ─── */\n\n .ddga-table--sm {\n --ddga-table-row-h: 3rem;\n }\n .ddga-table--md {\n --ddga-table-row-h: 4rem;\n }\n .ddga-table--lg {\n --ddga-table-row-h: 4.5rem;\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 .ddga-table__cell {\n block-size: var(--ddga-table-row-h);\n }\n .ddga-table__head {\n block-size: 3rem;\n background-color: var(--ddga-color-muted);\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n white-space: nowrap;\n border-block-end: 1px solid var(--ddga-color-input);\n }\n /* Header columns carry vertical dividers; body columns do not. */\n .ddga-table__header .ddga-table__head:not(:last-child) {\n border-inline-end: 1px solid var(--ddga-color-input);\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 /* Row dividers are the SDGA base look — always on, not opt-in. */\n .ddga-table__body .ddga-table__row:not(:last-child) {\n border-block-end: 1px solid var(--ddga-color-input);\n }\n .ddga-table--striped\n .ddga-table__body\n .ddga-table__row:nth-child(even):not(:hover):not([data-state='selected']) {\n background-color: var(--ddga-gray-50);\n }\n .ddga-table__body .ddga-table__row:hover:not([data-state='selected']) {\n background-color: var(--ddga-color-muted);\n }\n .ddga-table__body .ddga-table__row[data-state='selected'] {\n background-color: var(--ddga-sa-50);\n /* Inline-start accent stripe. box-shadow insets are physical (no logical form\n exists), so flip the x-offset in RTL — the project's prescribed override. */\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-input);\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 header fill so body rows don't bleed through while scrolling. */\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Sort & filter header controls ─── */\n\n .ddga-table__sort-button,\n .ddga-table__filter-button {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\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__filter-button {\n justify-content: center;\n }\n /* Focus lands on the icon-box, not the button. */\n .ddga-table__sort-button:focus-visible,\n .ddga-table__filter-button:focus-visible {\n outline: none;\n }\n .ddga-table__sort-button:disabled,\n .ddga-table__filter-button:disabled {\n cursor: not-allowed;\n }\n\n /* SDGA icon-box: 20px radius-sm; gray-100 + ink when off, gray-950 + white when active. */\n .ddga-table__icon-box {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n inline-size: 1.25rem;\n block-size: 1.25rem;\n border-radius: var(--ddga-radius-sm);\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n .ddga-table__icon-box > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-table__icon-box[data-active='false'] {\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n }\n .ddga-table__icon-box[data-active='true'] {\n background-color: var(--ddga-gray-950);\n color: #fff;\n }\n .ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active='false'],\n .ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active='false'] {\n background-color: var(--ddga-gray-200);\n }\n .ddga-table__sort-button:hover:not(:disabled) .ddga-table__icon-box[data-active='true'],\n .ddga-table__filter-button:hover:not(:disabled) .ddga-table__icon-box[data-active='true'] {\n background-color: var(--ddga-gray-800);\n }\n .ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active='false'],\n .ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active='false'] {\n background-color: var(--ddga-gray-200);\n }\n .ddga-table__sort-button:active:not(:disabled) .ddga-table__icon-box[data-active='true'],\n .ddga-table__filter-button:active:not(:disabled) .ddga-table__icon-box[data-active='true'] {\n background-color: var(--ddga-gray-600);\n }\n .ddga-table__sort-button:focus-visible .ddga-table__icon-box,\n .ddga-table__filter-button:focus-visible .ddga-table__icon-box {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 0;\n }\n .ddga-table__sort-button:focus-visible .ddga-table__icon-box[data-active='true'],\n .ddga-table__filter-button:focus-visible .ddga-table__icon-box[data-active='true'] {\n box-shadow: inset 0 0 0 1px #fff;\n }\n .ddga-table__sort-button:disabled .ddga-table__icon-box,\n .ddga-table__filter-button:disabled .ddga-table__icon-box {\n color: var(--ddga-gray-400);\n background-color: transparent;\n }\n\n /* ─── Dark mode ─── */\n\n [data-theme='dark'] .ddga-table__head {\n color: var(--ddga-text-secondary);\n }\n /* gray-50 zebra is invisible on dark; use the adaptive muted token instead. */\n [data-theme='dark']\n .ddga-table--striped\n .ddga-table__body\n .ddga-table__row:nth-child(even):not(:hover):not([data-state='selected']) {\n background-color: var(--ddga-color-muted);\n }\n\n /* ─── Forced colors ─── */\n\n @media (forced-colors: active) {\n .ddga-table__head {\n border-block-end-color: CanvasText;\n }\n .ddga-table__body .ddga-table__row:not(:last-child),\n .ddga-table__header .ddga-table__head:not(:last-child),\n .ddga-table__footer {\n border-color: CanvasText;\n }\n .ddga-table__region:has(> .ddga-table--contained) {\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__icon-box {\n border: 1px solid CanvasText;\n }\n .ddga-table__sort-button:focus-visible .ddga-table__icon-box,\n .ddga-table__filter-button:focus-visible .ddga-table__icon-box,\n .ddga-table__region[role='region']:focus-visible {\n outline: 2px solid Highlight;\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 /* react-aria sets an inline `max-height` but never a `max-width`, so without\n this the 392px grid keeps its width on a 360px phone and the 7th weekday\n column falls off-screen. 24px = 2 × the Popover's `containerPadding`. */\n .ddga-calendar-popover {\n z-index: 50;\n display: flex;\n max-inline-size: calc(100vw - 24px);\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-md);\n box-shadow: var(--ddga-shadow-2xl);\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-4);\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 /* SDGA calendar = 392px (7 columns × 56px). The 392 is column slack — the grid's\n true floor is 7 × the cell size — so it shrinks on narrow viewports. */\n .ddga-calendar {\n --ddga-calendar-cell-size: 2.5rem;\n inline-size: 392px;\n max-inline-size: 100%;\n }\n\n /* SDGA header: month label + year chip at inline-start; the prev/next arrows\n group together at inline-end (flips with dir). */\n .ddga-calendar__header {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n block-size: 40px;\n margin-block-end: var(--ddga-space-2);\n }\n .ddga-calendar__nav-group {\n display: inline-flex;\n align-items: center;\n margin-inline-start: auto;\n }\n\n /* SDGA arrow buttons (arrow-left-02 / arrow-right-02), 40px hit area. */\n .ddga-calendar__nav {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 40px;\n block-size: 40px;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\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 /* SDGA: month + year sit at the header inline-start. The native <select>s are\n kept (free keyboard + a11y + the consumer's month/year-jump feature) but\n restyled — month reads as a plain text label, year as a chevron chip. */\n .ddga-calendar__nav-selects {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\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 margin: 0;\n font: inherit;\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n cursor: pointer;\n font-variant-numeric: tabular-nums;\n outline: none;\n max-inline-size: 100%;\n }\n .ddga-calendar__select:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-calendar__select option {\n color: CanvasText;\n background-color: Canvas;\n }\n\n /* Month = SDGA text label (Text md/Medium, no chip chrome). */\n .ddga-calendar__month-select {\n padding: 0;\n font-size: var(--ddga-font-size-base);\n line-height: var(--ddga-line-height-base, 1.5);\n }\n\n /* Year = SDGA dropdown chip (Text sm/Medium + decorative chevron). The\n transparent <select> overlays the whole chip, so a click anywhere — chevron\n included — opens the native picker. */\n .ddga-calendar__year-chip {\n position: relative;\n display: inline-flex;\n align-items: center;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-calendar__year-chip:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-calendar__year-select {\n block-size: 32px;\n padding-inline: var(--ddga-space-3) calc(var(--ddga-space-3) + 1rem);\n font-size: var(--ddga-font-size-sm);\n min-inline-size: 4.5ch;\n }\n .ddga-calendar__year-chevron {\n position: absolute;\n inset-inline-end: var(--ddga-space-2);\n inline-size: 1rem;\n block-size: 1rem;\n pointer-events: none;\n color: var(--ddga-text-primary);\n }\n\n /* `separate` + a 4px vertical border-spacing gives the SDGA row breathing\n while keeping columns touching, so a range band stays continuous across a\n week yet sits at the 40px cell height (not a full-row pill). */\n .ddga-calendar__grid {\n inline-size: 100%;\n border-collapse: separate;\n border-spacing: 0 var(--ddga-space-1);\n }\n\n .ddga-calendar__weekday {\n padding-block: var(--ddga-space-1);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\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 /* SDGA day cell = a 40px round indicator, Text md/16. Selected fills it\n SA-600; today is a 2px SA-600 ring; hover is a soft SA-100 disc. */\n .ddga-calendar__cell {\n display: inline-flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n inline-size: var(--ddga-calendar-cell-size);\n block-size: var(--ddga-calendar-cell-size);\n margin-inline: auto;\n padding: 0;\n /* The single picker renders outside-month cells as a native <button>; reset\n its UA border/background so it matches the <div> cells (else the round\n cell shows a gray button ring). */\n appearance: none;\n -webkit-appearance: none;\n border: 0;\n background-color: transparent;\n text-align: center;\n font-size: var(--ddga-font-size-base);\n font-variant-numeric: tabular-nums;\n line-height: 1;\n color: var(--ddga-color-foreground);\n border-radius: var(--ddga-radius-full);\n cursor: pointer;\n outline: none;\n user-select: none;\n -webkit-tap-highlight-color: transparent;\n }\n\n .ddga-calendar__cell[data-today]:not([data-selected]) {\n box-shadow: inset 0 0 0 2px var(--ddga-color-primary);\n color: var(--ddga-color-primary);\n font-weight: var(--ddga-font-weight-medium);\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: var(--ddga-font-size-xs);\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-sa-100);\n }\n .ddga-calendar__cell[data-pressed]:not([data-disabled]):not([data-selected]) {\n background-color: var(--ddga-sa-200);\n }\n .ddga-calendar__cell[data-focus-visible] {\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\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-placeholder);\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 /* ─── Narrow viewports (phones) ─── */\n\n /* Below ~448px the 392px grid + 2×16px dialog padding can't fit. Trim the\n padding first, then let the cell shrink so all 7 columns stay on screen.\n The 3rem subtracted matches this block's total chrome: 24px popover\n containerPadding + 24px dialog padding. Floor 2rem keeps the tap target\n above the WCAG 2.2 AA 24px minimum. */\n @media (max-width: 480px) {\n .ddga-calendar-dialog {\n padding: var(--ddga-space-3);\n }\n .ddga-calendar {\n --ddga-calendar-cell-size: max(2rem, min(2.5rem, calc((100vw - 3rem) / 7)));\n }\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 /* SDGA Quote — card block (heading + quote + author) framed by two large SA-flag-green marks.\n White Background=Yes → neutral-50 tint; No → transparent. Size = width only (lg 846 / sm 640).\n Logical properties keep the body inset + marks RTL-correct; raw ramp tokens are remapped for dark. */\n\n .ddga-quote {\n --ddga-quote-mark: var(--ddga-sa-800);\n --ddga-quote-paragraph: var(--ddga-gray-700);\n --ddga-quote-tint: var(--ddga-gray-50);\n\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-12);\n margin: 0;\n padding: var(--ddga-space-5);\n border-radius: var(--ddga-radius-xl);\n inline-size: 100%;\n color: var(--ddga-text-primary);\n font-family: inherit;\n }\n\n .ddga-quote--lg {\n max-inline-size: 846px;\n }\n .ddga-quote--sm {\n max-inline-size: 640px;\n }\n .ddga-quote--tint {\n background-color: var(--ddga-quote-tint);\n }\n\n .ddga-quote__blockquote {\n margin: 0;\n }\n\n .ddga-quote__body {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-inline: var(--ddga-space-16);\n }\n\n .ddga-quote__title {\n margin: 0;\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-2xl);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 2rem;\n }\n\n .ddga-quote__content {\n color: var(--ddga-quote-paragraph);\n font-size: var(--ddga-font-size-xl);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.875rem;\n }\n .ddga-quote__content p {\n margin-block: 0;\n }\n .ddga-quote__content p + p {\n margin-block-start: var(--ddga-space-4);\n }\n\n /* ─── Author ─── */\n\n .ddga-quote__caption {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-4);\n margin: 0;\n }\n\n .ddga-quote__avatar {\n flex: none;\n display: inline-flex;\n inline-size: 80px;\n block-size: 80px;\n overflow: hidden;\n border: 2px solid var(--ddga-color-background);\n border-radius: var(--ddga-radius-full);\n }\n .ddga-quote__avatar > * {\n inline-size: 100%;\n block-size: 100%;\n object-fit: cover;\n }\n\n .ddga-quote__author-info {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n }\n\n .ddga-quote__author {\n color: var(--ddga-text-primary);\n font-size: var(--ddga-font-size-xl);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.875rem;\n }\n\n .ddga-quote__author-title {\n color: var(--ddga-quote-paragraph);\n font-size: var(--ddga-font-size-lg);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.75rem;\n }\n\n /* ─── Marks — the literal U+201D glyph (SDGA: 128px, decorative), oriented per corner.\n Body's 64px inline padding is their gutter; ink sits at the top of the line box, so the\n close mark flips vertically (scaleY) to drop its ink to the bottom-trailing corner. ─── */\n\n .ddga-quote__mark {\n position: absolute;\n color: var(--ddga-quote-mark);\n font-family: inherit;\n font-size: 128px;\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1;\n pointer-events: none;\n user-select: none;\n }\n .ddga-quote__mark--open {\n inset-block-start: 0;\n inset-inline-start: 0;\n transform: scaleX(-1);\n }\n .ddga-quote__mark--close {\n inset-block-end: 0;\n inset-inline-end: 0;\n transform: scaleX(-1) scaleY(-1);\n }\n [dir='rtl'] .ddga-quote__mark--open {\n transform: none;\n }\n [dir='rtl'] .ddga-quote__mark--close {\n transform: scaleY(-1);\n }\n\n /* ─── Dark — raw ramp tokens don't flip; remap to flipping semantics (exact DGA dark deferred) ─── */\n\n [data-theme='dark'] .ddga-quote {\n /* marks stay SA-800 (spec: dark shows only light; corner marks don't flip) */\n --ddga-quote-paragraph: var(--ddga-text-secondary);\n --ddga-quote-tint: var(--ddga-color-muted);\n }\n\n @media (forced-colors: active) {\n .ddga-quote__mark {\n color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-charts {\n --ddga-charts-axis: var(--ddga-gray-700);\n --ddga-charts-grid: var(--ddga-gray-100);\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n margin: 0;\n font-family: inherit;\n color: var(--ddga-charts-axis);\n }\n\n /* Pie/donut: disk centered above a centered legend, 24px apart. */\n .ddga-charts--pie {\n align-items: center;\n gap: var(--ddga-space-6);\n }\n\n .ddga-charts__plot {\n display: block;\n max-inline-size: 100%;\n block-size: auto;\n }\n .ddga-charts--line .ddga-charts__plot,\n .ddga-charts--bar .ddga-charts__plot {\n inline-size: 100%;\n }\n .ddga-charts__plot text {\n font-family: inherit;\n }\n\n .ddga-charts__legend {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ddga-space-3);\n margin: 0;\n padding: 0;\n list-style: none;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4;\n color: var(--ddga-charts-axis);\n }\n /* Line/bar legends sit at the top, trailing edge (SDGA). */\n .ddga-charts--line .ddga-charts__legend,\n .ddga-charts--bar .ddga-charts__legend {\n justify-content: flex-end;\n }\n .ddga-charts--pie .ddga-charts__legend {\n justify-content: center;\n }\n\n .ddga-charts__legend-item {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n .ddga-charts__mark {\n inline-size: 8px;\n block-size: 8px;\n border-radius: var(--ddga-radius-full);\n flex-shrink: 0;\n }\n\n .ddga-charts__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 white-space: nowrap;\n border: 0;\n }\n\n /* Dark: lighten axis text + gridlines so they read on a dark surface. */\n [data-theme='dark'] .ddga-charts {\n --ddga-charts-axis: var(--ddga-gray-300);\n --ddga-charts-grid: var(--ddga-gray-800);\n }\n\n /* Data-viz colours must survive Windows High Contrast (else every series flattens to one colour). */\n @media (forced-colors: active) {\n .ddga-charts__plot,\n .ddga-charts__mark {\n forced-color-adjust: none;\n }\n }\n}\n","@layer ddga-components {\n /*\n * SDGA Digital Stamp — government-site verification bar (collapsed) that expands to an\n * explainer panel. Mobile-first; the desktop two-column layout switches in via a container\n * query so the banner adapts to its own width. SDGA spacing-sm (6px) has no token → literal.\n */\n .ddga-digital-stamp {\n container-type: inline-size;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-10); /* 40 — between the bar row, explainer, and registration */\n inline-size: 100%;\n padding-inline: var(--ddga-space-4); /* 16 (mobile) */\n padding-block: 6px; /* SDGA spacing-sm */\n background-color: var(--ddga-color-muted);\n color: var(--ddga-text-primary);\n font-family: inherit;\n overflow: clip;\n }\n .ddga-digital-stamp[data-state='open'] {\n padding-block-end: var(--ddga-space-4); /* 16 (mobile) */\n }\n\n .ddga-digital-stamp__row {\n display: flex;\n flex-direction: column;\n align-items: flex-start;\n gap: var(--ddga-space-2); /* 8 */\n }\n\n .ddga-digital-stamp__lead {\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-2); /* 8 */\n min-inline-size: 0;\n }\n\n .ddga-digital-stamp__flag {\n flex-shrink: 0;\n inline-size: 20px;\n block-size: 14px;\n margin-block-start: 0.1875rem; /* nudge the 14px flag onto the first text line */\n border-radius: 1px;\n }\n\n .ddga-digital-stamp__statement {\n margin: 0;\n min-inline-size: 0;\n font-size: var(--ddga-font-size-sm); /* 14 */\n line-height: 1.25rem; /* 20 */\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n word-break: break-word;\n }\n\n .ddga-digital-stamp__trigger {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1); /* 4 */\n padding: 0;\n border: 0;\n background: transparent;\n font-family: inherit;\n font-size: var(--ddga-font-size-sm); /* 14 */\n line-height: 1.25rem;\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-color-primary);\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-digital-stamp__trigger:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-digital-stamp__chevron {\n flex-shrink: 0;\n inline-size: 16px;\n block-size: 16px;\n transition: transform 150ms ease;\n }\n .ddga-digital-stamp[data-state='open'] .ddga-digital-stamp__chevron {\n transform: rotate(180deg);\n }\n\n .ddga-digital-stamp__panel {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-10); /* 40 */\n }\n .ddga-digital-stamp__panel[hidden] {\n display: none;\n }\n\n /* Explainer: two columns (Domain Verification + Security Confirmation) */\n .ddga-digital-stamp__extension {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4); /* 16 (mobile stack) */\n }\n\n .ddga-digital-stamp__column {\n display: flex;\n align-items: flex-start;\n gap: var(--ddga-space-3); /* 12 (mobile) */\n min-inline-size: 0;\n }\n\n .ddga-digital-stamp__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px; /* mobile */\n block-size: 32px;\n border: 1px solid var(--ddga-success-700);\n border-radius: var(--ddga-radius-full);\n box-shadow: var(--ddga-shadow-xs);\n color: var(--ddga-success-700);\n }\n .ddga-digital-stamp__icon > svg {\n inline-size: 16px;\n block-size: 16px;\n }\n\n .ddga-digital-stamp__content {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3); /* 12 */\n min-inline-size: 0;\n }\n\n .ddga-digital-stamp__title {\n margin: 0;\n font-size: var(--ddga-font-size-lg); /* 18 */\n line-height: 1.75rem; /* 28 */\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-primary);\n word-break: break-word;\n }\n .ddga-digital-stamp__title strong {\n font-weight: inherit;\n color: var(--ddga-color-primary);\n }\n\n .ddga-digital-stamp__description {\n margin: 0;\n font-size: var(--ddga-font-size-base); /* 16 */\n line-height: 1.5rem; /* 24 */\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-gray-700);\n word-break: break-word;\n }\n\n /* Registration panel (white surface) */\n .ddga-digital-stamp__registration {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-6); /* 24 */\n padding-inline: var(--ddga-space-6); /* 24 */\n padding-block: var(--ddga-space-2); /* 8 */\n background-color: var(--ddga-color-background);\n border-radius: var(--ddga-radius-md);\n }\n .ddga-digital-stamp__logo {\n flex-shrink: 0;\n display: inline-flex;\n }\n .ddga-digital-stamp__logo > svg,\n .ddga-digital-stamp__logo > img {\n block-size: 31px;\n inline-size: auto;\n }\n .ddga-digital-stamp__registration-text {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3); /* 12 (mobile) */\n min-inline-size: 0;\n }\n .ddga-digital-stamp__registration-label {\n margin: 0;\n font-size: var(--ddga-font-size-base); /* 16 */\n line-height: 1.5rem;\n color: var(--ddga-text-primary);\n word-break: break-word;\n }\n .ddga-digital-stamp__registration-link,\n .ddga-digital-stamp__registration-number {\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n color: var(--ddga-color-primary);\n }\n .ddga-digital-stamp__registration-link {\n text-decoration: underline;\n border-radius: var(--ddga-radius-sm);\n }\n .ddga-digital-stamp__registration-link:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* Desktop: compact one-line bar + two-column explainer */\n @container (min-width: 768px) {\n .ddga-digital-stamp {\n padding-inline: var(--ddga-space-8); /* 32 */\n }\n .ddga-digital-stamp[data-state='closed'] {\n min-block-size: 32px;\n padding-block: 0;\n justify-content: center;\n }\n .ddga-digital-stamp[data-state='open'] {\n padding-block-end: var(--ddga-space-8); /* 32 */\n }\n .ddga-digital-stamp__row {\n flex-direction: row;\n align-items: center;\n }\n .ddga-digital-stamp__lead {\n align-items: center;\n }\n .ddga-digital-stamp__flag {\n margin-block-start: 0;\n }\n .ddga-digital-stamp__extension {\n flex-direction: row;\n flex-wrap: wrap;\n gap: var(--ddga-space-4); /* 16 */\n }\n .ddga-digital-stamp__column {\n flex: 1 1 0;\n gap: var(--ddga-space-6); /* 24 */\n }\n .ddga-digital-stamp__icon {\n inline-size: 48px;\n block-size: 48px;\n }\n .ddga-digital-stamp__icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-digital-stamp__registration-text {\n flex-direction: row;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-3); /* 12 */\n row-gap: 18px; /* SDGA panel wrap gap; no token */\n }\n }\n\n /* Dark theme — bg/panel/ink adapt via semantic tokens; the gray-700 body needs lifting */\n [data-theme='dark'] .ddga-digital-stamp__description {\n color: var(--ddga-gray-300);\n }\n\n @media (forced-colors: active) {\n .ddga-digital-stamp__icon {\n border-color: CanvasText;\n }\n .ddga-digital-stamp__trigger:focus-visible,\n .ddga-digital-stamp__registration-link:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n","@layer ddga-components {\n /* ─── Base ─── */\n /* SDGA Floating Button is a flat circle/pill — NO drop-shadow (the Figma\n component renders exactly 56/64 square; positioning is the consumer's job). */\n .ddga-floating-button {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2);\n border: none;\n border-radius: var(--ddga-radius-full);\n font-family: inherit;\n font-weight: var(--ddga-font-weight-medium);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n text-decoration: none;\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-floating-button {\n transition: none;\n }\n }\n\n /* ─── Sizes (icon fixed 24px , padding drives the 56/64 circle) ─── */\n .ddga-floating-button--sm {\n padding: var(--ddga-space-4);\n }\n .ddga-floating-button--lg {\n padding: var(--ddga-space-5);\n }\n\n /* ─── Icon + label ─── */\n .ddga-floating-button__icon {\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n }\n .ddga-floating-button__icon svg {\n width: 24px;\n height: 24px;\n }\n .ddga-floating-button__text {\n white-space: nowrap;\n }\n\n /* ─── Variant: Primary (Primary-Brand — green) ─── */\n .ddga-floating-button--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-floating-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-hover);\n }\n .ddga-floating-button--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-active);\n }\n .ddga-floating-button--primary[aria-pressed='true'] {\n background-color: var(--ddga-sa-800);\n }\n\n /* ─── Variant: Black (Primary-Neutral — dark) ─── */\n .ddga-floating-button--black {\n background-color: var(--ddga-gray-950);\n color: #ffffff;\n }\n .ddga-floating-button--black:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-800);\n }\n .ddga-floating-button--black:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-600);\n }\n .ddga-floating-button--black[aria-pressed='true'] {\n background-color: var(--ddga-gray-700);\n }\n\n /* ─── Variant: Secondary (Secondary-Solid — gray; ink = #161616) ─── */\n .ddga-floating-button--secondary {\n background-color: var(--ddga-color-secondary);\n color: var(--ddga-text-primary);\n }\n .ddga-floating-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-floating-button--secondary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-secondary-hover);\n }\n .ddga-floating-button--secondary[aria-pressed='true'] {\n background-color: var(--ddga-gray-200);\n }\n\n /* ─── Focus ring (single 3px ink ring, ~2px gap , SDGA \"Focus outline\" inset -5) ─── */\n .ddga-floating-button:focus-visible {\n outline: none;\n }\n .ddga-floating-button:focus-visible::after {\n content: '';\n position: absolute;\n inset: -5px;\n border: 3px solid var(--ddga-text-primary);\n border-radius: var(--ddga-radius-full);\n pointer-events: none;\n }\n .ddga-floating-button--on-color:focus-visible::after {\n border-color: #ffffff;\n }\n\n /* ─── Disabled (all styles → gray-200 fill / gray-400 ink, no opacity) ─── */\n .ddga-floating-button:disabled,\n .ddga-floating-button[aria-disabled='true'] {\n cursor: not-allowed;\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n }\n /* Dark: raw gray-200/400 don't flip → light-gray circle on dark. Remap (on-color keeps its own). */\n [data-theme='dark'] .ddga-floating-button:not(.ddga-floating-button--on-color):disabled,\n [data-theme='dark']\n .ddga-floating-button:not(.ddga-floating-button--on-color)[aria-disabled='true'] {\n background-color: var(--ddga-gray-800);\n color: var(--ddga-gray-500);\n }\n\n /* ─── On color (colored / dark surface) ─── */\n /* `primary` stays brand-green (only the focus ring flips white, above). `black`\n → white solid + dark icon; `secondary` → white-on-transparent. Both ramp on the\n alpha-white scale (= SDGA `button-background-oncolor-*` / `-transparent-*`;\n black-pressed = `alpha-white-60`, normalizing a one-cell Figma slip to gray-200). */\n .ddga-floating-button--on-color.ddga-floating-button--black {\n background-color: #ffffff;\n color: var(--ddga-text-primary);\n }\n .ddga-floating-button--on-color.ddga-floating-button--black:hover:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-80);\n }\n .ddga-floating-button--on-color.ddga-floating-button--black:active:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-60);\n }\n .ddga-floating-button--on-color.ddga-floating-button--black[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-70);\n }\n\n .ddga-floating-button--on-color.ddga-floating-button--secondary {\n background-color: transparent;\n color: #ffffff;\n }\n .ddga-floating-button--on-color.ddga-floating-button--secondary:hover:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-20);\n }\n .ddga-floating-button--on-color.ddga-floating-button--secondary:active:not(:disabled):not(\n [aria-disabled='true']\n ) {\n background-color: var(--ddga-alpha-white-40);\n }\n .ddga-floating-button--on-color.ddga-floating-button--secondary[aria-pressed='true'] {\n background-color: var(--ddga-alpha-white-30);\n }\n\n /* On-color disabled (all styles): translucent-white fill + icon (overrides base). */\n .ddga-floating-button--on-color:disabled,\n .ddga-floating-button--on-color[aria-disabled='true'] {\n background-color: var(--ddga-alpha-white-20);\n color: var(--ddga-alpha-white-40);\n }\n\n @media (forced-colors: active) {\n /* Flat, borderless, shadowless → needs a system border to be distinguishable in HCM. */\n .ddga-floating-button {\n border: 1px solid ButtonText;\n }\n .ddga-floating-button:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-floating-button:disabled,\n .ddga-floating-button[aria-disabled='true'] {\n color: GrayText;\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 /* SDGA Platforms Code parity. The Carousel is navigation chrome around swappable\n content: a clipping viewport + a translating track, plus dot indicators and/or\n round chevron arrow buttons. Layout is a grid keyed off `controls` so the parts\n can be composed in any order. All values resolve to existing tokens (0 gaps). */\n\n /* ─── Shell (layout per `controls`) ─── */\n\n .ddga-carousel {\n display: grid;\n box-sizing: border-box;\n padding-inline: var(--ddga-space-6); /* 24px */\n padding-block: var(--ddga-space-8); /* 32px */\n }\n\n .ddga-carousel--dots {\n grid-template-areas: 'viewport' 'dots';\n row-gap: var(--ddga-space-6); /* 24px */\n justify-items: center;\n }\n\n .ddga-carousel--arrows {\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'prev viewport next';\n align-items: center;\n column-gap: 2.75rem; /* SDGA 44px — no spacing token */\n }\n\n .ddga-carousel--both {\n grid-template-columns: auto 1fr auto;\n grid-template-areas: 'prev viewport next' 'dots dots dots';\n align-items: center;\n column-gap: 2.75rem; /* SDGA 44px — no spacing token */\n row-gap: var(--ddga-space-6);\n justify-items: center;\n }\n\n .ddga-carousel [data-slot='carousel-previous'] {\n grid-area: prev;\n }\n .ddga-carousel [data-slot='carousel-next'] {\n grid-area: next;\n }\n .ddga-carousel [data-slot='carousel-viewport'] {\n grid-area: viewport;\n justify-self: stretch;\n }\n .ddga-carousel [data-slot='carousel-dots'] {\n grid-area: dots;\n }\n\n /* ─── Viewport + track + slide ─── */\n\n .ddga-carousel__viewport {\n overflow: hidden;\n inline-size: 100%;\n min-inline-size: 0;\n touch-action: pan-y;\n }\n\n /* Index drives the track via a unitless custom property so the inline style is\n SSR-safe (no layout read); the sign flips in RTL purely in CSS. */\n .ddga-carousel__track {\n display: flex;\n inline-size: 100%;\n transform: translateX(calc(var(--ddga-carousel-index, 0) * -100%));\n transition: transform 300ms ease;\n will-change: transform;\n }\n [dir='rtl'] .ddga-carousel__track {\n transform: translateX(calc(var(--ddga-carousel-index, 0) * 100%));\n }\n\n .ddga-carousel__slide {\n flex: 0 0 100%;\n min-inline-size: 0;\n box-sizing: border-box;\n }\n\n /* ─── Dots ─── */\n\n .ddga-carousel__dots {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-2); /* 8px */\n padding: var(--ddga-space-3); /* 12px */\n border-radius: var(--ddga-radius-full);\n }\n .ddga-carousel__dots--bare {\n padding: 0;\n }\n\n .ddga-carousel__dot {\n flex-shrink: 0;\n padding: 0;\n border: none;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-color-border); /* #E5E7EB gray-200 */\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-carousel__dot[data-active] {\n background-color: var(--ddga-color-primary); /* #1B8354 SA-600 */\n }\n .ddga-carousel__dot:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 2px;\n }\n\n .ddga-carousel__dots--sm .ddga-carousel__dot {\n inline-size: 8px;\n block-size: 8px;\n }\n .ddga-carousel__dots--md .ddga-carousel__dot {\n inline-size: 12px;\n block-size: 12px;\n }\n .ddga-carousel__dots--lg .ddga-carousel__dot {\n inline-size: 16px;\n block-size: 16px;\n }\n\n /* ─── Arrow buttons (round chevron; ramps reuse the Button tokens) ─── */\n\n .ddga-carousel__nav {\n position: relative;\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n justify-content: center;\n border: none;\n border-radius: var(--ddga-radius-full);\n cursor: pointer;\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n\n .ddga-carousel__nav-icon {\n inline-size: 24px;\n block-size: 24px;\n }\n /* Chevrons point inline-start (prev) / inline-end (next); mirror in RTL. */\n [dir='rtl'] .ddga-carousel__nav-icon {\n transform: scaleX(-1);\n }\n\n .ddga-carousel__nav--sm {\n inline-size: 32px;\n block-size: 32px;\n }\n .ddga-carousel__nav--md {\n inline-size: 40px;\n block-size: 40px;\n }\n .ddga-carousel__nav--lg {\n inline-size: 48px;\n block-size: 48px;\n }\n\n /* Primary — filled green */\n .ddga-carousel__nav--primary {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-carousel__nav--primary:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-hover); /* #166A45 SA-700 */\n }\n .ddga-carousel__nav--primary:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-primary-active); /* #104631 SA-900 */\n }\n .ddga-carousel__nav--primary:disabled,\n .ddga-carousel__nav--primary[aria-disabled='true'] {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n /* Subtle — transparent, ink chevron */\n .ddga-carousel__nav--subtle {\n background-color: transparent;\n color: var(--ddga-text-primary); /* #161616 */\n }\n .ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-100); /* #F3F4F6 */\n }\n .ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-gray-200); /* #E5E7EB */\n }\n .ddga-carousel__nav--subtle:disabled,\n .ddga-carousel__nav--subtle[aria-disabled='true'] {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n /* Focus ring — single 3px ink ring, ~2px gap (SDGA \"Focus outline\", inset -5). */\n .ddga-carousel__nav:focus-visible {\n outline: none;\n }\n .ddga-carousel__nav:focus-visible::after {\n content: '';\n position: absolute;\n inset: -5px;\n border: 3px solid var(--ddga-text-primary);\n border-radius: var(--ddga-radius-full);\n pointer-events: none;\n }\n\n /* Dark: raw gray tints don't flip → subtle hover/active would be near-white behind the white\n icon; primary-disabled would be a bright light circle. Remap to semantic dark grays. */\n [data-theme='dark'] .ddga-carousel__nav--subtle:hover:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark']\n .ddga-carousel__nav--subtle:active:not(:disabled):not([aria-disabled='true']) {\n background-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-carousel__nav--primary:disabled,\n [data-theme='dark'] .ddga-carousel__nav--primary[aria-disabled='true'] {\n background-color: var(--ddga-color-muted);\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-carousel__track,\n .ddga-carousel__dot,\n .ddga-carousel__nav {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-carousel__dot[data-active] {\n background-color: Highlight;\n }\n .ddga-carousel__dot:focus-visible,\n .ddga-carousel__nav:focus-visible::after {\n outline: 2px solid Highlight;\n outline-offset: 2px;\n }\n .ddga-carousel__nav:disabled,\n .ddga-carousel__nav[aria-disabled='true'] {\n color: GrayText;\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 /* 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 /* Always LTR (forced at the root); code + gutter share one line-height so numbers stay aligned. */\n .ddga-code-snippet {\n --ddga-code-snippet-line-height: 1.5rem;\n display: flex;\n flex-direction: column;\n background-color: var(--ddga-color-card);\n color: var(--ddga-text-primary);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-xl);\n overflow: clip;\n }\n\n /* Tab bar flush against the body (drop the Tabs wrapper gap); rail spans the card. */\n .ddga-code-snippet__tabs {\n gap: 0;\n }\n .ddga-code-snippet__tab-list {\n inline-size: 100%;\n }\n .ddga-code-snippet .ddga-tabs__trigger {\n padding-block: var(--ddga-space-4); /* SDGA tab padding 16px (md default 12) */\n }\n .ddga-code-snippet__tab-content {\n margin: 0;\n padding: 0;\n }\n\n .ddga-code-snippet__panel {\n position: relative;\n display: flex;\n flex-direction: column;\n }\n\n .ddga-code-snippet__viewport {\n display: flex;\n align-items: stretch;\n overflow: hidden;\n }\n .ddga-code-snippet__viewport--collapsed {\n max-block-size: calc(\n var(--ddga-code-snippet-max-lines) * var(--ddga-code-snippet-line-height) +\n var(--ddga-space-6)\n );\n }\n\n .ddga-code-snippet__gutter {\n flex-shrink: 0;\n display: flex;\n flex-direction: column;\n align-items: flex-end;\n padding: var(--ddga-space-6);\n background-color: var(--ddga-gray-50);\n border-inline-end: 1px solid var(--ddga-color-border);\n font-family: var(--ddga-font-mono);\n font-weight: 700;\n font-size: 1rem;\n line-height: var(--ddga-code-snippet-line-height);\n color: var(--ddga-gray-500);\n text-align: end;\n user-select: none;\n }\n .ddga-code-snippet__line-number {\n display: block;\n }\n\n .ddga-code-snippet__scroll {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow-x: auto;\n padding-block: var(--ddga-space-6) var(--ddga-space-8);\n /* reserve inline-end room so the copy button never overlaps code */\n padding-inline: var(--ddga-space-6) calc(var(--ddga-space-6) + 2.5rem);\n }\n\n .ddga-code-snippet__code {\n margin: 0;\n font-family: var(--ddga-font-mono);\n font-weight: 500;\n font-size: 1rem;\n line-height: var(--ddga-code-snippet-line-height);\n color: var(--ddga-text-primary);\n }\n .ddga-code-snippet__code code {\n font: inherit;\n }\n .ddga-code-snippet__line {\n display: block;\n white-space: pre;\n }\n .ddga-code-snippet__line:empty::after {\n content: '\\200B';\n }\n .ddga-code-snippet__line--comment {\n color: var(--ddga-text-placeholder);\n }\n\n .ddga-code-snippet__copy-button {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n flex-shrink: 0;\n border: 0;\n background-color: transparent;\n border-radius: var(--ddga-radius-sm);\n color: var(--ddga-text-primary);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-code-snippet__copy-button:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-code-snippet__copy-button:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-code-snippet__copy-button--md {\n inline-size: 2.5rem;\n block-size: 2.5rem;\n }\n .ddga-code-snippet__copy-button--md > svg {\n inline-size: 1.5rem;\n block-size: 1.5rem;\n }\n .ddga-code-snippet__copy-button--sm {\n inline-size: 2rem;\n block-size: 2rem;\n }\n .ddga-code-snippet__copy-button--sm > svg {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n /* Block copy floats at the top inline-end of the panel. */\n .ddga-code-snippet__panel > .ddga-code-snippet__copy-button {\n position: absolute;\n inset-block-start: var(--ddga-space-4);\n inset-inline-end: var(--ddga-space-4);\n z-index: 1;\n }\n\n .ddga-code-snippet__show-more {\n align-self: flex-end;\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n margin-block: var(--ddga-space-2) var(--ddga-space-6);\n margin-inline-end: var(--ddga-space-6);\n block-size: 2rem;\n padding-inline: var(--ddga-space-3);\n border: 0;\n background-color: transparent;\n border-radius: var(--ddga-radius-sm);\n font-weight: 500;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.25rem;\n color: var(--ddga-text-primary);\n cursor: pointer;\n }\n .ddga-code-snippet__show-more:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-code-snippet__show-more:focus-visible {\n outline: none;\n box-shadow: inset 0 0 0 2px var(--ddga-text-primary);\n }\n .ddga-code-snippet__show-more-icon {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n transition: transform 150ms ease;\n }\n .ddga-code-snippet__show-more-icon--up {\n transform: rotate(180deg);\n }\n\n .ddga-code-snippet-inline {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-6);\n padding: var(--ddga-space-6);\n background-color: var(--ddga-color-card);\n border: 1px solid var(--ddga-color-border);\n border-radius: var(--ddga-radius-xl);\n }\n .ddga-code-snippet-inline__text {\n flex: 1 1 auto;\n min-inline-size: 0;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n overflow-x: auto;\n font-family: var(--ddga-font-mono);\n font-weight: 400;\n font-size: 1rem;\n line-height: 1.5rem;\n white-space: nowrap;\n }\n .ddga-code-snippet-inline__prefix {\n flex-shrink: 0;\n color: var(--ddga-gold-600);\n }\n .ddga-code-snippet-inline__command {\n color: var(--ddga-color-primary);\n }\n\n /* Raw surfaces don't auto-adapt; ink/comments do via tokens. */\n [data-theme='dark'] .ddga-code-snippet__gutter {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-code-snippet__line-number {\n color: var(--ddga-text-tertiary);\n }\n\n /* High-contrast: keep card/gutter edges visible. */\n @media (forced-colors: active) {\n .ddga-code-snippet,\n .ddga-code-snippet-inline {\n border-color: CanvasText;\n }\n .ddga-code-snippet__gutter {\n border-inline-end-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n .ddga-chip {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n gap: var(--ddga-space-1);\n box-sizing: border-box;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n font-family: inherit;\n font-weight: var(--ddga-font-weight-medium);\n white-space: nowrap;\n cursor: pointer;\n background-color: var(--ddga-chip-bg);\n color: var(--ddga-chip-fg);\n transition:\n background-color 150ms ease,\n color 150ms ease;\n }\n .ddga-chip--rounded {\n border-radius: var(--ddga-radius-full);\n }\n\n /* Sizes: 20 / 24 / 32 (SDGA). Inline pad 12px all sizes; x-Small 10/600/14, Medium 12/500/18, Large 16/500/24. */\n .ddga-chip--sm {\n block-size: 20px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-2xs);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4;\n }\n .ddga-chip--md {\n block-size: 24px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n }\n .ddga-chip--lg {\n block-size: 32px;\n padding-inline: var(--ddga-space-3);\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n }\n\n .ddga-chip__icon {\n display: inline-flex;\n flex-shrink: 0;\n }\n .ddga-chip__icon > svg {\n inline-size: 14px;\n block-size: 14px;\n }\n .ddga-chip--lg .ddga-chip__icon > svg {\n inline-size: 16px;\n block-size: 16px;\n }\n\n /* ── Primary (subtle SA-green → fills SA-600 when selected) ── */\n .ddga-chip--primary {\n --ddga-chip-bg: var(--ddga-sa-50);\n --ddga-chip-fg: var(--ddga-sa-800);\n }\n .ddga-chip--primary:hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-sa-200);\n }\n .ddga-chip--primary:active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-sa-400);\n --ddga-chip-fg: var(--ddga-sa-900);\n }\n .ddga-chip--primary[aria-pressed='true'] {\n --ddga-chip-bg: var(--ddga-sa-600);\n --ddga-chip-fg: #ffffff;\n }\n .ddga-chip--primary[aria-pressed='true']:hover:not(:disabled) {\n --ddga-chip-bg: var(--ddga-sa-700);\n }\n .ddga-chip--primary[aria-pressed='true']:active:not(:disabled) {\n --ddga-chip-bg: var(--ddga-sa-900);\n }\n\n /* ── Neutral (gray → fills gray-700 when selected) ── */\n .ddga-chip--neutral {\n --ddga-chip-bg: var(--ddga-gray-100);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--neutral:hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-200);\n }\n .ddga-chip--neutral:active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-300);\n }\n .ddga-chip--neutral[aria-pressed='true'] {\n --ddga-chip-bg: var(--ddga-gray-700);\n --ddga-chip-fg: #ffffff;\n }\n .ddga-chip--neutral[aria-pressed='true']:hover:not(:disabled) {\n --ddga-chip-bg: var(--ddga-gray-800);\n }\n .ddga-chip--neutral[aria-pressed='true']:active:not(:disabled) {\n --ddga-chip-bg: var(--ddga-gray-950);\n }\n\n /* Focus: 2px SDGA ink ring. */\n .ddga-chip:focus-visible {\n outline: 2px solid var(--ddga-color-focus-ring);\n outline-offset: 2px;\n }\n\n /* Disabled: recolour (no opacity), SDGA. `[aria-disabled]` covers asChild mode;\n pointer-events:none stops hover/active from firing on it. */\n .ddga-chip:disabled,\n .ddga-chip[aria-disabled='true'] {\n cursor: not-allowed;\n pointer-events: none;\n --ddga-chip-bg: var(--ddga-gray-200);\n --ddga-chip-fg: var(--ddga-gray-400);\n }\n\n /* ── On-color: chip on a colored/dark surface. Style-agnostic — SDGA renders Primary and\n Neutral identically here: a white-ramp pill with ink text (`chip-background-on-color-*`).\n Placed after the base states so it wins by source order; theme-independent (dark rules below\n exclude it), since a colored surface looks the same in either theme. ── */\n .ddga-chip--on-color {\n --ddga-chip-bg: #ffffff;\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--on-color:hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-alpha-white-80);\n }\n .ddga-chip--on-color:active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-alpha-white-60);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--on-color[aria-pressed='true'] {\n --ddga-chip-bg: var(--ddga-alpha-white-70);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n .ddga-chip--on-color[aria-pressed='true']:hover:not(:disabled) {\n --ddga-chip-bg: var(--ddga-alpha-white-80);\n }\n .ddga-chip--on-color[aria-pressed='true']:active:not(:disabled) {\n --ddga-chip-bg: var(--ddga-alpha-white-60);\n }\n .ddga-chip--on-color:disabled,\n .ddga-chip--on-color[aria-disabled='true'] {\n --ddga-chip-bg: var(--ddga-alpha-white-20);\n --ddga-chip-fg: var(--ddga-alpha-white-40);\n }\n\n /* Dark: neutral + subtle-primary surfaces flip (selected brand-green fill stays).\n Exclude on-color — it owns its full white-ramp treatment in both themes. */\n [data-theme='dark'] .ddga-chip--neutral:not(.ddga-chip--on-color) {\n --ddga-chip-bg: var(--ddga-gray-800);\n --ddga-chip-fg: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-chip--neutral:not(.ddga-chip--on-color):hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-700);\n }\n [data-theme='dark']\n .ddga-chip--neutral:not(.ddga-chip--on-color):active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: var(--ddga-gray-600);\n }\n [data-theme='dark'] .ddga-chip--primary:not(.ddga-chip--on-color):not([aria-pressed='true']) {\n --ddga-chip-bg: color-mix(in srgb, var(--ddga-sa-600) 20%, transparent);\n --ddga-chip-fg: var(--ddga-sa-200);\n }\n [data-theme='dark']\n .ddga-chip--primary:not(.ddga-chip--on-color):hover:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: color-mix(in srgb, var(--ddga-sa-600) 30%, transparent);\n }\n [data-theme='dark']\n .ddga-chip--primary:not(.ddga-chip--on-color):active:not(:disabled):not([aria-pressed='true']) {\n --ddga-chip-bg: color-mix(in srgb, var(--ddga-sa-600) 40%, transparent);\n --ddga-chip-fg: var(--ddga-sa-200);\n }\n [data-theme='dark'] .ddga-chip:not(.ddga-chip--on-color):disabled,\n [data-theme='dark'] .ddga-chip:not(.ddga-chip--on-color)[aria-disabled='true'] {\n --ddga-chip-bg: var(--ddga-gray-800);\n --ddga-chip-fg: var(--ddga-gray-500);\n }\n\n @media (forced-colors: active) {\n .ddga-chip {\n border: 1px solid ButtonText;\n }\n .ddga-chip[aria-pressed='true'] {\n border-color: Highlight;\n }\n .ddga-chip:disabled,\n .ddga-chip[aria-disabled='true'] {\n color: GrayText;\n border-color: GrayText;\n }\n .ddga-chip:focus-visible {\n outline: 2px solid Highlight;\n }\n }\n}\n","@layer ddga-components {\n /* Trigger — the black \"Filter\" button; chevron flips when the panel is open. */\n .ddga-filtration__trigger .ddga-button__icon:last-child {\n transition: transform 150ms ease;\n }\n .ddga-filtration__trigger[data-state='open'] .ddga-button__icon:last-child {\n transform: rotate(180deg);\n }\n\n /* Panel — 320px stack, SDGA `radius-sm`. Sections own their insets; an 8px gap\n plus explicit inset hairlines separate every child. Overlay reuses\n .ddga-popover's surface (border/shadow/bg); inline draws its own. */\n .ddga-filtration-panel {\n inline-size: 20rem;\n max-inline-size: 20rem;\n padding: 0;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-2);\n border-radius: var(--ddga-radius-sm);\n overflow: clip;\n }\n\n .ddga-popover.ddga-filtration-panel {\n max-block-size: var(--radix-popover-content-available-height);\n overflow-y: auto;\n }\n\n .ddga-filtration-panel--inline {\n background-color: var(--ddga-color-background);\n color: var(--ddga-color-foreground);\n border: 1px solid var(--ddga-color-border);\n }\n\n /* Hairline between panel children — 304px (inset 8px each side), floating in\n the 8px inter-child gap. */\n .ddga-filtration__divider {\n block-size: 1px;\n margin-inline: var(--ddga-space-2);\n background-color: var(--ddga-color-input);\n }\n\n /* Section — labelled filter group: 16/8 padding, 20px label↔body gap. */\n .ddga-filtration-section {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-5);\n padding-block: var(--ddga-space-4);\n padding-inline: var(--ddga-space-2);\n }\n\n .ddga-filtration-section__label {\n margin: 0;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-semibold);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n }\n\n .ddga-filtration-section__count {\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-tertiary);\n }\n\n /* Checkbox filter — searchable, collapsible multi-select group. */\n .ddga-filtration-checkbox-filter {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-filtration-checkbox-filter__list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-filtration-checkbox-filter__count {\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-filtration-checkbox-filter__more {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n align-self: flex-start;\n padding-block: var(--ddga-space-1);\n padding-inline: 0;\n border: 0;\n background: none;\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n font-weight: var(--ddga-font-weight-medium);\n color: var(--ddga-text-primary);\n cursor: pointer;\n }\n\n .ddga-filtration-checkbox-filter__more: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-filtration-checkbox-filter__more-icon {\n inline-size: 1rem;\n block-size: 1rem;\n transition: transform 150ms ease;\n }\n .ddga-filtration-checkbox-filter__more-icon.is-open {\n transform: rotate(180deg);\n }\n\n /* Option list — single-select rows with a trailing check (Radix RadioGroup). */\n .ddga-filtration-option-list {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n\n .ddga-filtration-option {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n inline-size: 100%;\n padding: var(--ddga-space-2);\n border: 0;\n background: none;\n font: inherit;\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n color: var(--ddga-text-primary);\n text-align: start;\n cursor: pointer;\n border-radius: var(--ddga-radius-sm);\n }\n\n .ddga-filtration-option:hover {\n background-color: var(--ddga-color-muted);\n }\n\n .ddga-filtration-option:focus-visible {\n outline: 2px solid var(--ddga-color-ring);\n outline-offset: -2px;\n }\n\n .ddga-filtration-option__indicator {\n display: inline-flex;\n color: var(--ddga-color-primary);\n }\n\n .ddga-filtration-option__check {\n inline-size: 1.25rem;\n block-size: 1.25rem;\n }\n\n /* Results — row of dismissible filter chips under the trigger. */\n .ddga-filtration-results {\n display: flex;\n flex-wrap: wrap;\n gap: var(--ddga-space-2);\n margin-block-start: var(--ddga-space-2);\n }\n\n /* Footer — Apply (green, grows) + Clear. 56px (40px buttons + 8px inset). */\n .ddga-filtration-footer {\n display: flex;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n }\n\n .ddga-filtration-footer__apply {\n flex: 1;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-filtration__trigger .ddga-button__icon:last-child,\n .ddga-filtration-checkbox-filter__more-icon {\n transition-duration: 0ms;\n }\n }\n\n /* Dark mode: the inline surface uses semantic --ddga-color-* tokens, which\n remap in dark.css — no override needed. */\n\n @media (forced-colors: active) {\n .ddga-filtration-panel--inline {\n border: 1px solid CanvasText;\n }\n .ddga-filtration__divider {\n background-color: CanvasText;\n }\n .ddga-filtration-checkbox-filter__more:focus-visible,\n .ddga-filtration-option:focus-visible {\n outline: 2px 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 /* SDGA Link: text-link primitive. Three orthogonal axes — tone (Primary/Neutral/\n On-color) sets the color ramp via the hooks below; size (sm/md) sets type + icon +\n gap; inline (true/false) sets the underline rule. Hover/Pressed go LIGHTER (SDGA),\n Visited via :visited, focus = sharp 2px ink box. Base = Primary defaults. */\n\n .ddga-link {\n --ddga-link-color: var(--ddga-color-primary);\n --ddga-link-color-hover: var(--ddga-sa-400);\n --ddga-link-color-pressed: var(--ddga-sa-300);\n --ddga-link-color-visited: var(--ddga-sa-800);\n --ddga-link-color-disabled: var(--ddga-text-placeholder);\n --ddga-link-focus-ring: var(--ddga-text-primary); /* #161616 */\n\n color: var(--ddga-link-color);\n font-family: inherit;\n cursor: pointer;\n text-underline-position: from-font;\n text-decoration-skip-ink: none;\n transition:\n color 150ms ease,\n text-decoration-color 150ms ease;\n }\n\n /* ─── Tone (color ramp) — base is Primary; override Neutral + On-color ─── */\n\n .ddga-link--neutral {\n --ddga-link-color: var(--ddga-gray-700);\n --ddga-link-color-hover: var(--ddga-gray-500);\n --ddga-link-color-pressed: var(--ddga-gray-400);\n --ddga-link-color-visited: var(--ddga-sa-800); /* SDGA reuses link-primary-visited */\n --ddga-link-color-disabled: var(--ddga-text-placeholder);\n }\n\n .ddga-link--on-color {\n --ddga-link-color: #ffffff;\n --ddga-link-color-hover: var(--ddga-alpha-white-80);\n --ddga-link-color-pressed: var(--ddga-alpha-white-60);\n --ddga-link-color-visited: var(--ddga-alpha-white-90);\n --ddga-link-color-disabled: var(--ddga-alpha-white-30);\n --ddga-link-focus-ring: #ffffff;\n }\n\n /* ─── State ramp (LVHA order; :visited is color-only by browser design) ─── */\n\n .ddga-link:visited {\n color: var(--ddga-link-color-visited);\n }\n .ddga-link:hover {\n color: var(--ddga-link-color-hover);\n }\n .ddga-link:active {\n color: var(--ddga-link-color-pressed);\n }\n\n .ddga-link:focus-visible {\n outline: 2px solid var(--ddga-link-focus-ring);\n outline-offset: 0;\n }\n\n .ddga-link[aria-disabled='true'] {\n color: var(--ddga-link-color-disabled);\n pointer-events: none;\n cursor: default;\n }\n\n /* Static demo hooks for the Storybook state matrix (real states use the pseudo-classes).\n Doubled class = specificity over `.ddga-link--standalone { text-decoration: none }`. */\n .ddga-link.ddga-link--hovered {\n color: var(--ddga-link-color-hover);\n text-decoration: underline;\n }\n .ddga-link.ddga-link--pressed {\n color: var(--ddga-link-color-pressed);\n text-decoration: underline;\n }\n .ddga-link.ddga-link--visited {\n color: var(--ddga-link-color-visited);\n }\n .ddga-link.ddga-link--focused {\n outline: 2px solid var(--ddga-link-focus-ring);\n outline-offset: 0;\n }\n\n /* ─── Inline axis (underline rule) ─── */\n\n /* Inline=True: flows in prose, underlined in every state. */\n .ddga-link--inline {\n display: inline;\n text-decoration: underline;\n }\n\n /* Inline=False: standalone / chrome — inline-flex, underline on hover/pressed only. */\n .ddga-link--standalone {\n display: inline-flex;\n align-items: center;\n text-decoration: none;\n }\n .ddga-link--standalone:hover,\n .ddga-link--standalone:active {\n text-decoration: underline;\n }\n\n /* ─── Size (type / icon / gap) ─── */\n\n .ddga-link--md {\n font-size: var(--ddga-font-size-base); /* 16 */\n line-height: 1.5; /* 24 */\n }\n .ddga-link--sm {\n font-size: var(--ddga-font-size-sm); /* 14 */\n line-height: 1.42857; /* 20 */\n }\n\n .ddga-link--standalone.ddga-link--md {\n gap: var(--ddga-space-2); /* 8 */\n }\n .ddga-link--standalone.ddga-link--sm {\n gap: var(--ddga-space-1); /* 4 */\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--md .ddga-link__icon > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-link--sm .ddga-link__icon > svg {\n inline-size: 16px;\n block-size: 16px;\n }\n\n /* Inline links have no flex gap → space icons with logical margins (RTL-safe). */\n .ddga-link--inline .ddga-link__icon {\n vertical-align: middle;\n }\n .ddga-link--inline.ddga-link--md [data-slot='link-start-icon'] {\n margin-inline-end: var(--ddga-space-2);\n }\n .ddga-link--inline.ddga-link--sm [data-slot='link-start-icon'] {\n margin-inline-end: var(--ddga-space-1);\n }\n .ddga-link--inline.ddga-link--md [data-slot='link-end-icon'],\n .ddga-link--inline.ddga-link--md [data-slot='link-external-icon'] {\n margin-inline-start: var(--ddga-space-2);\n }\n .ddga-link--inline.ddga-link--sm [data-slot='link-end-icon'],\n .ddga-link--inline.ddga-link--sm [data-slot='link-external-icon'] {\n margin-inline-start: var(--ddga-space-1);\n }\n\n /* ─── Dark — exact DGA dark palette deferred; remap so links stay readable.\n color-primary already flips to SA-400 in dark.css; remap the raw-token states. ─── */\n\n [data-theme='dark'] .ddga-link--primary {\n --ddga-link-color-hover: var(--ddga-sa-300);\n --ddga-link-color-pressed: var(--ddga-sa-200);\n --ddga-link-color-visited: var(--ddga-sa-600);\n --ddga-link-focus-ring: #ffffff;\n }\n [data-theme='dark'] .ddga-link--neutral {\n --ddga-link-color: var(--ddga-gray-300);\n --ddga-link-color-hover: var(--ddga-gray-200);\n --ddga-link-color-pressed: var(--ddga-gray-100);\n --ddga-link-color-visited: var(--ddga-sa-400);\n --ddga-link-focus-ring: #ffffff;\n }\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-link {\n transition: none;\n }\n }\n\n @media (forced-colors: active) {\n .ddga-link,\n .ddga-link--primary,\n .ddga-link--neutral,\n .ddga-link--on-color {\n color: LinkText;\n }\n .ddga-link:visited {\n color: VisitedText;\n }\n .ddga-link[aria-disabled='true'] {\n color: GrayText;\n }\n .ddga-link:focus-visible {\n outline: 2px solid Highlight;\n outline-offset: 0;\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 /* 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 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 /* ─ Symbol (glyph) ─ */\n\n .ddga-riyal-symbol {\n display: inline-block;\n block-size: 1em;\n inline-size: auto;\n vertical-align: -0.125em;\n color: inherit;\n }\n\n .ddga-riyal-symbol--2xs {\n font-size: var(--ddga-font-size-2xs);\n }\n .ddga-riyal-symbol--xs {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-riyal-symbol--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-riyal-symbol--base {\n font-size: var(--ddga-font-size-base);\n }\n .ddga-riyal-symbol--lg {\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-riyal-symbol--xl {\n font-size: var(--ddga-font-size-xl);\n }\n .ddga-riyal-symbol--2xl {\n font-size: var(--ddga-font-size-2xl);\n }\n .ddga-riyal-symbol--3xl {\n font-size: var(--ddga-font-size-3xl);\n }\n\n .ddga-riyal-symbol--muted {\n color: var(--ddga-text-secondary);\n }\n .ddga-riyal-symbol--brand {\n color: var(--ddga-color-primary);\n }\n .ddga-riyal-symbol--success {\n color: var(--ddga-color-success);\n }\n .ddga-riyal-symbol--error {\n color: var(--ddga-color-error);\n }\n .ddga-riyal-symbol--inverted {\n color: var(--ddga-alpha-white-90);\n }\n\n /* Coin: symbol centered in a filled disc with ⅓-height clear space (SDGA rules 9–10). */\n .ddga-riyal-symbol--coin {\n box-sizing: content-box;\n inline-size: 1em;\n block-size: 1em;\n padding: 0.334em;\n border-radius: 50%;\n vertical-align: middle;\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--muted {\n background-color: var(--ddga-text-secondary);\n color: var(--ddga-color-background);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--brand {\n background-color: var(--ddga-color-primary);\n color: var(--ddga-color-primary-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--success {\n background-color: var(--ddga-color-success);\n color: var(--ddga-color-success-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--error {\n background-color: var(--ddga-color-error);\n color: var(--ddga-color-error-foreground);\n }\n .ddga-riyal-symbol--coin.ddga-riyal-symbol--inverted {\n background-color: var(--ddga-alpha-white-90);\n color: var(--ddga-color-primary);\n }\n\n /* ─ Amount (symbol + number) ─ */\n\n .ddga-riyal {\n display: inline-flex;\n align-items: center;\n gap: 0.25em;\n color: inherit;\n }\n\n .ddga-riyal__value {\n font-variant-numeric: tabular-nums;\n }\n\n .ddga-riyal--2xs {\n font-size: var(--ddga-font-size-2xs);\n }\n .ddga-riyal--xs {\n font-size: var(--ddga-font-size-xs);\n }\n .ddga-riyal--sm {\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-riyal--base {\n font-size: var(--ddga-font-size-base);\n }\n .ddga-riyal--lg {\n font-size: var(--ddga-font-size-lg);\n }\n .ddga-riyal--xl {\n font-size: var(--ddga-font-size-xl);\n }\n .ddga-riyal--2xl {\n font-size: var(--ddga-font-size-2xl);\n }\n .ddga-riyal--3xl {\n font-size: var(--ddga-font-size-3xl);\n }\n\n .ddga-riyal--muted {\n color: var(--ddga-text-secondary);\n }\n .ddga-riyal--brand {\n color: var(--ddga-color-primary);\n }\n .ddga-riyal--success {\n color: var(--ddga-color-success);\n }\n .ddga-riyal--error {\n color: var(--ddga-color-error);\n }\n .ddga-riyal--inverted {\n color: var(--ddga-alpha-white-90);\n }\n\n /* Keep the filled coin discs visible in Windows High Contrast (backgrounds are dropped). */\n @media (forced-colors: active) {\n .ddga-riyal-symbol--coin {\n outline: 1px solid;\n }\n }\n}\n","@layer ddga-components {\n .ddga-structured-list {\n --ddga-sl-divider: var(--ddga-color-input);\n\n inline-size: 100%;\n border-collapse: separate;\n border-spacing: 0;\n color: var(--ddga-text-primary);\n text-align: start;\n }\n\n .ddga-structured-list__cell-content {\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n min-inline-size: 0;\n word-break: break-word;\n }\n\n .ddga-structured-list__head {\n block-size: 48px;\n padding-inline: var(--ddga-space-4);\n color: var(--ddga-gray-700);\n font-size: var(--ddga-font-size-xs);\n font-weight: var(--ddga-font-weight-medium);\n line-height: 1.5;\n text-align: start;\n vertical-align: middle;\n border-block-end: 1px solid var(--ddga-sl-divider);\n }\n\n .ddga-structured-list__cell {\n block-size: 64px;\n padding-inline: var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n font-size: var(--ddga-font-size-base);\n font-weight: var(--ddga-font-weight-regular);\n line-height: 1.5;\n text-align: start;\n vertical-align: middle;\n }\n\n .ddga-structured-list__head--align-center .ddga-structured-list__cell-content,\n .ddga-structured-list__cell--align-center .ddga-structured-list__cell-content {\n justify-content: center;\n }\n .ddga-structured-list__head--align-end .ddga-structured-list__cell-content,\n .ddga-structured-list__cell--align-end .ddga-structured-list__cell-content {\n justify-content: flex-end;\n }\n\n .ddga-structured-list--compact .ddga-structured-list__cell {\n block-size: 48px;\n }\n\n .ddga-structured-list--row-divider\n .ddga-structured-list__body\n .ddga-structured-list__row:not(:last-child)\n .ddga-structured-list__cell {\n border-block-end: 1px solid var(--ddga-sl-divider);\n }\n\n .ddga-structured-list--col-divider .ddga-structured-list__head:not(:last-child),\n .ddga-structured-list--col-divider .ddga-structured-list__cell:not(:last-child) {\n border-inline-end: 1px solid var(--ddga-sl-divider);\n }\n\n .ddga-structured-list--contained {\n background-color: var(--ddga-color-card);\n border: 1px solid var(--ddga-sl-divider);\n border-radius: var(--ddga-radius-md);\n overflow: clip;\n }\n\n .ddga-structured-list--selectable .ddga-structured-list__body .ddga-structured-list__row {\n position: relative;\n transition: background-color 120ms ease;\n }\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:not([data-disabled]) {\n cursor: pointer;\n }\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:not([data-disabled]):hover {\n background-color: var(--ddga-gray-50);\n }\n\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:has(:focus-visible)::after {\n content: '';\n position: absolute;\n inset: 0;\n border: 2px solid var(--ddga-text-primary);\n pointer-events: none;\n }\n\n .ddga-structured-list--selectable .ddga-checkbox:focus-visible {\n outline: none;\n }\n\n .ddga-structured-list__row[data-disabled] {\n background-color: var(--ddga-gray-200);\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n }\n\n [data-theme='dark'] .ddga-structured-list__head {\n color: var(--ddga-text-secondary);\n }\n [data-theme='dark']\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:not([data-disabled]):hover {\n background-color: color-mix(in srgb, var(--ddga-color-card) 90%, white);\n }\n [data-theme='dark'] .ddga-structured-list__row[data-disabled] {\n background-color: color-mix(in srgb, var(--ddga-color-card) 70%, var(--ddga-color-background));\n color: var(--ddga-color-muted-foreground);\n }\n\n @media (forced-colors: active) {\n .ddga-structured-list__head,\n .ddga-structured-list--row-divider\n .ddga-structured-list__body\n .ddga-structured-list__row:not(:last-child)\n .ddga-structured-list__cell,\n .ddga-structured-list--col-divider .ddga-structured-list__head:not(:last-child),\n .ddga-structured-list--col-divider .ddga-structured-list__cell:not(:last-child),\n .ddga-structured-list--contained {\n border-color: CanvasText;\n }\n .ddga-structured-list--selectable\n .ddga-structured-list__body\n .ddga-structured-list__row:has(:focus-visible)::after {\n border-color: CanvasText;\n }\n }\n}\n","@layer ddga-components {\n /* SDGA \"Slideout Menu\" — slide-in nav panel on Radix Dialog; overlay/animation mirror Drawer, rows mirror DropdownMenu. */\n\n .ddga-slideout-menu__overlay {\n position: fixed;\n inset: 0;\n background-color: rgb(0 0 0 / 0.5);\n /* Same z-stack as Modal/Drawer (60 overlay / 61 panel). */\n z-index: 60;\n animation-duration: 150ms;\n animation-timing-function: ease;\n }\n .ddga-slideout-menu__overlay[data-state='open'] {\n animation-name: ddga-slideout-menu-overlay-in;\n }\n .ddga-slideout-menu__overlay[data-state='closed'] {\n animation-name: ddga-slideout-menu-overlay-out;\n }\n @keyframes ddga-slideout-menu-overlay-in {\n from {\n opacity: 0;\n }\n to {\n opacity: 1;\n }\n }\n @keyframes ddga-slideout-menu-overlay-out {\n from {\n opacity: 1;\n }\n to {\n opacity: 0;\n }\n }\n\n /* ─ Panel ─ */\n\n .ddga-slideout-menu {\n position: fixed;\n inset-block: 0;\n z-index: 61;\n display: flex;\n flex-direction: column;\n inline-size: min(346px, 100vw);\n color: var(--ddga-text-primary);\n overflow: hidden;\n animation-duration: 220ms;\n animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n }\n\n .ddga-slideout-menu--gray {\n background-color: var(--ddga-color-muted);\n }\n .ddga-slideout-menu--white {\n background-color: var(--ddga-color-background);\n }\n\n /* Logical side — start/end flip with `dir`. */\n .ddga-slideout-menu--start {\n inset-inline-start: 0;\n border-inline-end: 1px solid var(--ddga-color-input);\n }\n .ddga-slideout-menu--end {\n inset-inline-end: 0;\n border-inline-start: 1px solid var(--ddga-color-input);\n }\n\n .ddga-slideout-menu--start[data-state='open'] {\n animation-name: ddga-slideout-menu-in-start;\n }\n .ddga-slideout-menu--start[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-start;\n }\n .ddga-slideout-menu--end[data-state='open'] {\n animation-name: ddga-slideout-menu-in-end;\n }\n .ddga-slideout-menu--end[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-end;\n }\n @keyframes ddga-slideout-menu-in-start {\n from {\n transform: translateX(-100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-slideout-menu-out-start {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(-100%);\n }\n }\n @keyframes ddga-slideout-menu-in-end {\n from {\n transform: translateX(100%);\n }\n to {\n transform: translateX(0);\n }\n }\n @keyframes ddga-slideout-menu-out-end {\n from {\n transform: translateX(0);\n }\n to {\n transform: translateX(100%);\n }\n }\n /* RTL flips the physical translate so each logical side emerges correctly. */\n [dir='rtl'] .ddga-slideout-menu--start[data-state='open'] {\n animation-name: ddga-slideout-menu-in-end;\n }\n [dir='rtl'] .ddga-slideout-menu--start[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-end;\n }\n [dir='rtl'] .ddga-slideout-menu--end[data-state='open'] {\n animation-name: ddga-slideout-menu-in-start;\n }\n [dir='rtl'] .ddga-slideout-menu--end[data-state='closed'] {\n animation-name: ddga-slideout-menu-out-start;\n }\n\n /* ─ Header (pinned strip) ─ */\n\n .ddga-slideout-menu__header {\n flex-shrink: 0;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-4);\n background-color: var(--ddga-gray-50);\n }\n .ddga-slideout-menu__header-content {\n display: flex;\n flex: 1 1 auto;\n min-inline-size: 0;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n .ddga-slideout-menu__header-text {\n display: flex;\n flex: 1 1 auto;\n min-inline-size: 0;\n flex-direction: column;\n gap: var(--ddga-space-1);\n }\n .ddga-slideout-menu__featured-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n border-radius: var(--ddga-radius-full);\n background-color: var(--ddga-sa-50);\n color: var(--ddga-color-primary);\n }\n .ddga-slideout-menu__featured-icon > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n .ddga-slideout-menu__title {\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-semibold);\n color: var(--ddga-text-primary);\n }\n .ddga-slideout-menu__description {\n margin: 0;\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\n color: var(--ddga-text-tertiary);\n }\n\n .ddga-slideout-menu__close {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 20px;\n block-size: 20px;\n padding: 0;\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n cursor: pointer;\n font: inherit;\n }\n .ddga-slideout-menu__close:hover {\n background-color: var(--ddga-color-muted);\n }\n .ddga-slideout-menu__close:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: 2px;\n }\n .ddga-slideout-menu__close > svg {\n inline-size: 1rem;\n block-size: 1rem;\n }\n\n /* ─ Body (scroll region) ─ */\n\n .ddga-slideout-menu__body {\n flex: 1 1 auto;\n min-block-size: 0;\n overflow-y: auto;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n /* 80px bottom — SDGA `spacing-8xl`; no token (scale stops at 64px). */\n padding-block: var(--ddga-space-4) 5rem;\n padding-inline: var(--ddga-space-4);\n scrollbar-width: thin;\n scrollbar-color: var(--ddga-gray-300) transparent;\n }\n .ddga-slideout-menu__body::-webkit-scrollbar {\n inline-size: 8px;\n }\n .ddga-slideout-menu__body::-webkit-scrollbar-thumb {\n background-color: var(--ddga-gray-300);\n border-radius: var(--ddga-radius-full);\n }\n\n /* ─ Group + label + list ─ */\n\n .ddga-slideout-menu__group {\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-3);\n }\n .ddga-slideout-menu__group-label {\n font-size: var(--ddga-font-size-xs);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-bold);\n color: var(--ddga-gray-800);\n }\n .ddga-slideout-menu__list {\n list-style: none;\n margin: 0;\n padding: 0;\n display: flex;\n flex-direction: column;\n }\n .ddga-slideout-menu__item-wrapper {\n display: block;\n }\n\n /* ─ Item (button / link row) ─ */\n\n .ddga-slideout-menu__item {\n display: flex;\n inline-size: 100%;\n align-items: center;\n gap: var(--ddga-space-2);\n padding: var(--ddga-space-2);\n border: 0;\n border-radius: var(--ddga-radius-sm);\n background-color: transparent;\n color: var(--ddga-text-primary);\n font: inherit;\n text-align: start;\n text-decoration: none;\n cursor: pointer;\n -webkit-tap-highlight-color: transparent;\n }\n .ddga-slideout-menu__item:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-slideout-menu__item:active {\n background-color: var(--ddga-gray-200);\n }\n .ddga-slideout-menu__item:focus-visible {\n outline: 2px solid var(--ddga-text-primary);\n outline-offset: -2px;\n }\n /* Current page (SDGA selected row): SA-50 tint + brand-green label/icons. */\n .ddga-slideout-menu__item[data-active] {\n background-color: var(--ddga-sa-50);\n color: var(--ddga-color-primary);\n }\n .ddga-slideout-menu__item-icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n color: inherit;\n }\n .ddga-slideout-menu__item-icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-slideout-menu__item-label {\n flex: 1 1 auto;\n min-inline-size: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n font-weight: var(--ddga-font-weight-regular);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n }\n /* Trailing slot — the SDGA \"+99\" counter (gray-500); icon/check trailings\n recolour with the row when it is the current page. */\n .ddga-slideout-menu__item-trailing {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n margin-inline-start: auto;\n min-block-size: 24px;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n color: var(--ddga-text-tertiary);\n }\n .ddga-slideout-menu__item-trailing > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n .ddga-slideout-menu__item[data-active] .ddga-slideout-menu__item-trailing {\n color: inherit;\n }\n\n /* ─ Separator (between groups) ─ */\n\n .ddga-slideout-menu__separator {\n flex-shrink: 0;\n block-size: 1px;\n background-color: var(--ddga-color-input);\n }\n\n /* ─ Footer (actions) — transparent, top divider, leading-aligned ─ */\n\n .ddga-slideout-menu__footer {\n flex-shrink: 0;\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n gap: var(--ddga-space-4);\n padding: var(--ddga-space-4);\n border-block-start: 1px solid var(--ddga-color-input);\n }\n\n /* ─ Dark mode (raw light-ramp values → flipping tokens; semantic tokens self-adapt) ─ */\n\n [data-theme='dark'] .ddga-slideout-menu__header {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-slideout-menu__group-label {\n color: var(--ddga-gray-200);\n }\n [data-theme='dark'] .ddga-slideout-menu__featured-icon {\n background-color: var(--ddga-alpha-white-10);\n color: var(--ddga-sa-400);\n }\n [data-theme='dark'] .ddga-slideout-menu__item:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-slideout-menu__item:active {\n background-color: var(--ddga-gray-700);\n }\n [data-theme='dark'] .ddga-slideout-menu__item[data-active] {\n background-color: rgb(27 131 84 / 0.18);\n color: var(--ddga-sa-400);\n }\n\n /* ─ Reduced motion ─ */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-slideout-menu,\n .ddga-slideout-menu__overlay {\n animation: none;\n }\n }\n\n /* ─ Forced colors ─ */\n\n @media (forced-colors: active) {\n .ddga-slideout-menu {\n border: 1px solid CanvasText;\n }\n .ddga-slideout-menu__separator {\n background-color: CanvasText;\n }\n .ddga-slideout-menu__footer {\n border-block-start-color: CanvasText;\n }\n .ddga-slideout-menu__item:hover,\n .ddga-slideout-menu__item[data-active] {\n background-color: Highlight;\n color: HighlightText;\n }\n .ddga-slideout-menu__item:focus-visible,\n .ddga-slideout-menu__close:focus-visible {\n outline-color: Highlight;\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 /* DateRangePicker field/trigger chrome + range-fill cell styling. The trigger\n mirrors the SDGA Text Input field model (see text-input.css) — no calendar\n icon. The calendar dropdown (popover, toggle, month grid, day cells) is\n shared with DatePicker — see calendar.css. Wrapper (.ddga-field) +\n helper/error (.ddga-field__message) are shared — see field.css. */\n\n /* SDGA field label↔control↔helper gap is 8px (TextInput parity); .ddga-field defaults to 4px. */\n .ddga-field[data-slot='date-range-picker-field'] {\n gap: var(--ddga-space-2);\n }\n\n .ddga-date-range-picker__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n .ddga-date-range-picker__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Trigger (the SDGA date field, holding two inputs + a separator) ─── */\n\n .ddga-date-range-picker-trigger {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-1);\n inline-size: 100%;\n padding-inline: var(--ddga-space-2);\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n color: var(--ddga-gray-700);\n text-align: start;\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n .ddga-date-range-picker-trigger--md {\n block-size: 32px;\n font-size: var(--ddga-font-size-sm);\n }\n .ddga-date-range-picker-trigger--lg {\n block-size: 40px;\n font-size: var(--ddga-font-size-base);\n }\n\n .ddga-date-range-picker-trigger--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-date-range-picker-trigger--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── DateInputs + segments + separator ─── */\n\n .ddga-date-range-picker__input {\n display: inline-flex;\n align-items: center;\n flex: 0 1 auto;\n min-inline-size: 0;\n direction: ltr;\n font-variant-numeric: tabular-nums;\n }\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-gray-700);\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-gray-500);\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-gray-700);\n }\n .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n background-color: transparent;\n color: var(--ddga-gray-700);\n }\n\n .ddga-date-range-picker__separator {\n flex: 0 0 auto;\n padding-inline: var(--ddga-space-1);\n color: var(--ddga-gray-500);\n }\n\n /* ─── Open surface (iconless): fills trailing space; click opens the calendar ─── */\n\n .ddga-date-range-picker__open {\n flex: 1 1 auto;\n align-self: stretch;\n min-inline-size: var(--ddga-space-4);\n padding: 0;\n border: 0;\n background: transparent;\n cursor: pointer;\n outline: none;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__open {\n cursor: not-allowed;\n }\n\n /* ─── Hover / Focus / Pressed (SDGA field state model) ─── */\n\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-700);\n }\n .ddga-date-range-picker-trigger[data-focus-within] {\n box-shadow: var(--ddga-shadow-md);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-date-range-picker-trigger::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 400ms ease-out;\n pointer-events: none;\n }\n .ddga-date-range-picker-trigger[data-focus-within]:not([data-pressed])::after {\n transform: scaleX(1);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n .ddga-date-range-picker-trigger--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error / Read-only / Disabled ─── */\n\n .ddga-date-range-picker-trigger--error,\n .ddga-date-range-picker-trigger--error[data-hovered],\n .ddga-date-range-picker-trigger--error[data-focus-within] {\n border-color: var(--ddga-error-700);\n }\n .ddga-date-range-picker-trigger[data-readonly],\n .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n .ddga-date-range-picker-trigger[data-disabled] {\n cursor: not-allowed;\n }\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment,\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__segment[data-placeholder],\n .ddga-date-range-picker-trigger[data-disabled] .ddga-date-range-picker__separator {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled]) .ddga-date-range-picker__label,\n .ddga-field:has(.ddga-date-range-picker-trigger[data-disabled])\n .ddga-date-range-picker__required {\n color: var(--ddga-gray-400);\n }\n .ddga-field:has(.ddga-date-range-picker-trigger) .ddga-field__message {\n padding-block: var(--ddga-space-1);\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. SDGA range =\n a continuous SA-100 band on the td (spans the full column), pill-rounded at\n the endpoints, with the SA-600 endpoint circles painted on top by the base\n .ddga-calendar__cell[data-selected] rule. */\n .ddga-calendar--range td:has([data-selected]) {\n background-color: var(--ddga-sa-100);\n }\n .ddga-calendar--range td:has([data-selection-start]) {\n border-start-start-radius: var(--ddga-radius-full);\n border-end-start-radius: var(--ddga-radius-full);\n }\n .ddga-calendar--range td:has([data-selection-end]) {\n border-start-end-radius: var(--ddga-radius-full);\n border-end-end-radius: var(--ddga-radius-full);\n }\n /* In-between days: let the td band 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\n /* ─── Dark mode (SDGA gray steps don't flip — remap to semantic tokens) ─── */\n\n [data-theme='dark'] .ddga-date-range-picker-trigger {\n border-color: var(--ddga-color-input);\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment {\n color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-date-range-picker__segment[data-placeholder] {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-lighter,\n [data-theme='dark'] .ddga-date-range-picker-trigger--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger--default[data-hovered]:not([data-focus-within]) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly]),\n [data-theme='dark'] .ddga-date-range-picker-trigger--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-readonly],\n [data-theme='dark'] .ddga-date-range-picker-trigger[data-disabled] {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark']\n .ddga-date-range-picker-trigger[data-disabled]\n .ddga-date-range-picker__segment {\n color: var(--ddga-text-tertiary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-date-range-picker-trigger,\n .ddga-date-range-picker-trigger::after {\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 .ddga-date-range-picker-trigger[data-disabled] {\n border-color: GrayText;\n }\n /* color bands disappear in forced-colors — restore a visible range. */\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 /* ─── 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 /* SDGA Notification — full-width actionable system banner (56px tonal bar). */\n .ddga-notification {\n --ddga-notification-fill: var(--ddga-gray-50);\n --ddga-notification-text: var(--ddga-gray-700);\n --ddga-notification-accent: var(--ddga-text-primary);\n --ddga-notification-line-opacity: 0.6;\n\n position: relative;\n display: flex;\n flex-direction: column;\n gap: var(--ddga-space-4);\n padding-block: var(--ddga-space-2);\n padding-inline: var(--ddga-space-6);\n border-radius: var(--ddga-radius-xs);\n background-color: var(--ddga-notification-fill);\n overflow: clip;\n font-family: inherit;\n }\n\n .ddga-notification--info {\n --ddga-notification-fill: var(--ddga-info-50);\n --ddga-notification-text: var(--ddga-info-700);\n --ddga-notification-accent: var(--ddga-info-600);\n --ddga-notification-line-opacity: 0.7;\n }\n .ddga-notification--success {\n --ddga-notification-fill: var(--ddga-success-50);\n --ddga-notification-text: var(--ddga-success-700);\n --ddga-notification-accent: var(--ddga-success-600);\n --ddga-notification-line-opacity: 0.7;\n }\n .ddga-notification--warning {\n --ddga-notification-fill: var(--ddga-warning-50);\n --ddga-notification-text: var(--ddga-warning-700);\n --ddga-notification-accent: var(--ddga-warning-600);\n --ddga-notification-line-opacity: 0.7;\n }\n .ddga-notification--critical {\n --ddga-notification-fill: var(--ddga-error-50);\n --ddga-notification-text: var(--ddga-error-700);\n --ddga-notification-accent: var(--ddga-error-600);\n --ddga-notification-line-opacity: 0.7;\n }\n\n .ddga-notification__title {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-3);\n inline-size: 100%;\n padding-inline: var(--ddga-space-6);\n }\n\n .ddga-notification__content {\n display: flex;\n flex: 1 0 0;\n flex-wrap: wrap;\n align-items: center;\n align-content: center;\n gap: var(--ddga-space-2);\n min-block-size: 40px;\n min-inline-size: 0;\n }\n\n .ddga-notification__icon {\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 24px;\n block-size: 24px;\n color: var(--ddga-notification-accent);\n }\n .ddga-notification__icon > svg {\n inline-size: 24px;\n block-size: 24px;\n }\n\n .ddga-notification__lead {\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n font-weight: var(--ddga-font-weight-bold);\n color: var(--ddga-notification-text);\n white-space: nowrap;\n }\n\n .ddga-notification__message {\n flex: 1 0 0;\n min-inline-size: 0;\n margin: 0;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5rem;\n color: var(--ddga-notification-text);\n word-break: break-word;\n }\n\n .ddga-notification__actions {\n flex-shrink: 0;\n display: flex;\n align-items: center;\n gap: var(--ddga-space-2);\n }\n\n /* Absolute close: top-trailing, optically inset past the title row's padding (SDGA right:-8 / top:4). */\n .ddga-notification__close {\n position: absolute;\n inset-block-start: 4px;\n inset-inline-end: -8px;\n flex-shrink: 0;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n inline-size: 32px;\n block-size: 32px;\n padding: 0;\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n border-radius: var(--ddga-radius-sm);\n cursor: pointer;\n transition: background-color 150ms ease;\n }\n .ddga-notification__close > svg {\n inline-size: 20px;\n block-size: 20px;\n }\n .ddga-notification__close:hover {\n background-color: var(--ddga-gray-100);\n }\n .ddga-notification__close:focus-visible {\n outline: none;\n box-shadow: 0 0 0 2px var(--ddga-text-primary);\n }\n\n /* Full-bleed 2px bottom accent line (clipped to radius by the container's overflow). */\n .ddga-notification__line {\n position: absolute;\n inset-inline: 0;\n inset-block-end: 0;\n block-size: 2px;\n background-color: var(--ddga-notification-accent);\n opacity: var(--ddga-notification-line-opacity);\n }\n\n /* SDGA is light-only — adapt to a dark surface, keeping the type accent legible. */\n [data-theme='dark'] .ddga-notification {\n --ddga-notification-fill: var(--ddga-gray-900, #111927);\n --ddga-notification-text: var(--ddga-gray-100);\n --ddga-notification-accent: var(--ddga-gray-400);\n }\n [data-theme='dark'] .ddga-notification--info {\n --ddga-notification-text: var(--ddga-info-300);\n --ddga-notification-accent: var(--ddga-info-400);\n }\n [data-theme='dark'] .ddga-notification--success {\n --ddga-notification-text: var(--ddga-success-300);\n --ddga-notification-accent: var(--ddga-success-400);\n }\n [data-theme='dark'] .ddga-notification--warning {\n --ddga-notification-text: var(--ddga-warning-300);\n --ddga-notification-accent: var(--ddga-warning-400);\n }\n [data-theme='dark'] .ddga-notification--critical {\n --ddga-notification-text: var(--ddga-error-300);\n --ddga-notification-accent: var(--ddga-error-400);\n }\n [data-theme='dark'] .ddga-notification__close {\n color: var(--ddga-gray-50);\n }\n [data-theme='dark'] .ddga-notification__close:hover {\n background-color: var(--ddga-gray-800);\n }\n [data-theme='dark'] .ddga-notification__close:focus-visible {\n box-shadow: 0 0 0 2px var(--ddga-gray-50);\n }\n\n @media (forced-colors: active) {\n .ddga-notification {\n border: 1px solid CanvasText;\n }\n .ddga-notification__close:focus-visible {\n outline: 2px solid Highlight;\n box-shadow: none;\n }\n }\n}\n"],"names":[]}