@dev-dga/css 0.10.1 → 0.12.0

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"mappings":"AAAA,iBOAA,i8IOCA,g1CVAA,oOAQA,wOAQA,6OAQA,uPAQA,uPAQA,wOAQA,2OAQA,4PQzDA,0DAQA,2MAWA,wCAQA,4KAkBA,gDZ7CA,uBoBKE,uEAMA,iFAMA,8DAIA,0DQlBA,4VAqBA,4GAIA,sHAMA,kHAIA,0HAMA,sHAKA,8GAMA,8EAIA,4GAMA,wHAIA,8HAMA,wIAKA,uHAMA,2GAIA,uHAMA,2FAIA,qHAMA,mGAKA,qGAKA,mGAKA,yFAQA,0FASA,wDAaA,wHAKA,+DAGA,+MAIA,8GAGA,0IAMA,2FAGA,uOAiBA,yFASA,mJASA,oDAOA,6EAOA,+FAUA,iDAKA,uCACE,8BASF,qFAMA,wHAgBA,8EAGA,6HAIA,+NASA,8BACE,yCAGA,uDAGA,6F3BhSF,gJAOA,gFAOA,4RAgBA,sGAKA,wGAKA,sGAQA,yIAYA,mEAQA,0PAAA,gQAAA,gQAWA,kJAYA,2DAOA,wFAGA,oFAMA,yGAOA,wDAGA,kHAOA,oHAKA,mFAIA,sGAMA,uCACE,6BAOF,8BACE,wCAGA,qDAGA,mFQ1JF,mJAOA,mFAOA,iVAgBA,+DAKA,sPAAA,4PAAA,4PAWA,yFAIA,2FAIA,yFAOA,gDAGA,wCAMA,0HAQA,2DAGA,sHAOA,2GAOA,iFAMA,uCACE,gCAOF,8BACE,2CAGA,yDAGA,8DQpHF,2EAQA,6VAiBA,mEAKA,mEAQA,8JAQA,sFAOA,2DAGA,wKAKA,iFAMA,sDAIA,yHAOA,yHAOA,2EAKA,qIASA,yHAMA,mFAOA,uCACE,gCAOF,8BACE,2CAGA,wGAIA,uCAGA,4EAIA,8DZrIF,8KAQA,sFAOA,uDAIA,kDAGA,6CAOA,wEAQA,yQAgBA,mEAIA,mEAOA,uEAMA,mFAOA,0EAGA,mHAGA,gGAMA,mDAIA,gHAOA,sHAOA,+GASA,sHASA,uCACE,6BAOF,8BACE,wCAGA,uDAGA,6CAGA,yEAIA,2DQrJF,yEAQA,oQAkBA,kFAKA,kFAQA,4EAMA,oFAOA,uGAIA,sHAIA,+EAMA,oDAIA,mHAOA,kQAYA,iGAQA,sHAUA,uGAOA,uHAMA,iFAOA,uCACE,kDAQF,8BACE,iEAIA,4DAGA,gEAIA,oFAGA,0EAIA,6CQ3JF,iJAOA,iFAOA,0WAmBA,+GAKA,iHAQA,gIAOA,0EAIA,qGAQA,iEAGA,4HAOA,wFAKA,uEAMA,0VAgBA,kDAMA,oYAoBA,6EAIA,wGAQA,2JAOA,wDAOA,uCACE,yDAQF,8BACE,iDAGA,kFAIA,mEAIA,iDAGA,mFAIA,kDQzLF,gQAgBA,2CAGA,0CAQA,8DAIA,qFAKA,6EAKA,mFAOA,uKAKA,kGAIA,yDAIA,2EAOA,gEAIA,oEAMA,+DAGA,+DAGA,+DAMA,uCAIA,oGAIA,qIAIA,mIAQA,oIAUA,kJAWA,yDAGA,oFAMA,+GAOA,0JAQA,qHAOA,qDAMA,6DAIA,kKASA,oDAMA,uCACE,4BAOF,8BAGE,uCAGA,uFAQF,uH3BjNA,2SAgBA,kGAMA,kGAQA,sFAKA,2GAKA,iHAKA,uHAKA,2GAKA,2GAKA,kGAOA,yFAKA,+FAKA,mGAKA,mGAKA,mGAKA,0FAOA,qHAQA,oIAUA,8FAOA,+EAOA,gDAOA,0RAmBA,0DAKA,4FAIA,6FAYA,6IAKA,0GAIA,iHAIA,+GAIA,+GAIA,yGAOA,8BACE,yCQ/MF,qEAQA,6HAWA,4KAWA,+EAGA,8EAMA,oHAUA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAQA,8BACE,kGQ1FF,gZAqBA,yCAGA,yCAGA,yCAGA,yCAGA,yCAMA,2DAIA,yDAMA,kGAOA,qCAIA,oLAcA,iGAIA,6FAIA,mGAIA,uGAIA,uGAIA,uGAIA,8FAOA,0SAaA,wEAGA,0EAGA,sEAGA,oEAMA,mFAOA,0DAIA,2IAOA,kEAUA,mHAIA,+GAIA,qHAIA,yHAIA,yHAIA,yHAIA,gHAIA,sFAMA,8BACE,8DAMA,kFQ1MF,mTAqBA,0HAMA,0HAQA,mDAMA,6GAIA,iEAIA,wGAUA,uDASA,uCACE,qCAYF,8BACE,2CQlFF,kaAsBA,uIAMA,mJAMA,mJAMA,uJAQA,4LAYA,uDAOA,sGAQA,0IAQA,8GAWA,0TAoBA,sDAIA,8DAIA,sGAUA,2GAIA,iHAIA,iHAIA,mHAIA,sEAMA,8BACE,oCAGA,8EQ9JF,yIAaA,gcAgCA,sCAGA,sCAGA,sCAGA,sCAGA,oJAUA,iJAQA,kMAUA,sHAYA,gGAWA,yDAIA,uPAaA,iXAmBA,wDAIA,iGAIA,0FAOA,2EAGA,8EAGA,0DAGA,6DAIA,4DAQA,6DAQA,oIAUA,qIAWA,uCACE,wDAQF,8BACE,oCAGA,8EQnNF,sNAiBA,2CAIA,sDAaA,yEAIA,0EAKA,qEAIA,wGAKA,8GAMA,oGAQA,8gBAgCA,kGAMA,kEAGA,6DAGA,mEAGA,mEAGA,2EAMA,4LAWA,uDAOA,iJAWA,iJAQA,6HASA,8bAkBA,yGAIA,6FAOA,kYAoBA,wDAIA,4EAIA,sGAeA,mFAGA,sEAMA,6GAGA,4GAKA,4HAOA,0FAIA,mEAIA,sGAUA,6GAUA,gHAUA,0EAUA,uCACE,gGASF,8BACE,oCAGA,gHF5UF,yIAaA,iFAOA,qEAOA,sFAQA,8CAGA,+EAOA,yUAwBA,yDAIA,+HAQA,yGAKA,wHAOA,sEAKA,oDAOA,2IAKA,6IAQA,iFAGA,iFAMA,8GAOA,qIAKA,8KAKA,iPAOA,yIAIA,kKAOA,yLAOA,iEAIA,qFAIA,mKAIA,sKAQA,iCAKA,kHAOA,uCACE,qCAOF,8BACE,oEAGA,yGAIA,oGAIA,kFQ5NF,sFAQA,iIAcA,sFAQA,uIAOA,gHAMA,6HAQA,sEAOA,mGAMA,+DAQA,+DAMA,2IAQA,8DAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yCD3HF,oFAQA,oIAYA,2CAMA,sYAoBA,qGAKA,8FAOA,4JAMA,iIAOA,iFAKA,0DASA,0DAGA,mEAGA,gEAMA,8JASA,8DAOA,0KAOA,oKASA,uCACE,wCAOF,8BACE,kEAIA,qGAKA,qFEnJF,uJAUA,4EAMA,8CAOA,mVAmBA,+DAIA,oIAQA,+HAQA,4FAMA,0EAKA,qFAGA,qFAIA,qFAKA,oGAQA,kGAWA,kHAIA,oHAOA,uCACE,qGAIA,0CAOF,8BACE,8DAIA,uFRpIF,+GASA,0FAMA,oEAOA,0EAOA,+GAKA,0GAcA,oQAYA,kQAcA,2KAOA,+aAuBA,+EAOA,iLAKA,+EAGA,wEAKA,yHAOA,kGAOA,6FAKA,+EAIA,iKAUA,mDAGA,mDAMA,uCACE,wCAOF,8BACE,gEAIA,6IAKA,uEAGA,4JGlMF,4GAOA,iCAGA,mCAGA,iCAIA,yEASA,uCACE,uCD3BF,yIAUA,+EAMA,iDAKA,uFAWA,8EAIA,gEAYA,kRAcA,4DAOA,qGAKA,iEAMA,oCAIA,wCASA,2EAIA,uCACE,iEASF,8BACE,0CE1GF,8IAQA,kCAGA,kCAGA,mCAIA,wEAGA,wEAGA,wEAGA,gFAIA,2LAcA,sMAOA,2FAUA,oHAIA,+FAWA,sHAQA,iFAGA,iFAGA,iFAGA,yFAIA,2CAIA,2DAIA,yIAMA,mFAIA,qGAMA,gLAMA,oEAMA,6OAYA,6EAGA,8FAUA,2EAGA,oIAMA,uCACE,iKAIA,+GAWF,8BACE,2CAGA,qDAGA,gFAIA,8FlDnMF,wUAgBA,mGAGA,qFAIA,iIAUA,6DAWA,2DAGA,6DAMA,wUAiBA,qFAIA,6FAOA,gFAGA,oGAKA,iHAQA,sKASA,6DAKA,+IASA,+GAMA,sQAYA,yEAIA,yJAYA,yFAIA,yHAQA,gEAMA,oQAYA,qFAIA,8DAIA,sKAYA,+IAOA,8BACE,gDAGA,2FAIA,4DAOF,uCACE,4FQnOF,0IAWA,6EAGA,gFAIA,6DAQA,8DAWA,gUAkBA,kIAMA,8HAMA,8HAMA,+HAYA,mGAIA,mGAIA,mGAIA,4FAKA,mGAIA,mGAIA,mGAIA,4FAOA,+EAGA,kFAGA,2EAGA,8EAGA,2EAGA,8EAGA,iFAGA,oFAOA,+FAQA,gGAQA,4FAQA,6FAQA,+FAQA,gGAQA,iGAQA,kGAWA,uFAGA,0FAGA,uFAGA,0FAMA,mHAMA,0FAOA,8PAaA,gKAQA,6HAQA,iWAiBA,sGAIA,8FAIA,+DAOA,uCACE,mDAQF,8BACE,0CQ3TF,2OASA,uDAOA,oYAkBA,iHAKA,mHAMA,kIAMA,uGAMA,mEAGA,8HAKA,4GAQA,+DAIA,mGASA,wQAeA,iGAGA,mFAGA,4HAUA,wDAWA,yFAMA,uOAWA,qEAMA,2FAOA,+KAQA,oVAoBA,iFAGA,4FAKA,sKASA,oEAIA,iHAUA,6QAUA,8FAKA,gKASA,uCACE,kGAMF,8BACE,0EAIA,oFAIA,wFQrPF,+PAYA,+FAGA,8EAGA,4HAUA,wDAgBA,kJAYA,yLAQA,kYAiBA,2JAKA,wFAMA,2CAIA,kJAQA,oQAcA,sGAIA,oFAGA,sFASA,gLAcA,8IASA,mcAoBA,sEAGA,qHAMA,uEAIA,kDAKA,+DAKA,0LAYA,8aAuBA,0LASA,6DAIA,sHAMA,6FAIA,sHAGA,2FAGA,0HAIA,8HAQA,yEAMA,uCACE,8CAGA,2FAQF,8BACE,mDAGA,mFAIA,wFAIA,2FQzTF,yMAQA,sFAUA,sUAeA,oHAKA,sHAMA,6HAKA,gHAMA,sEAGA,sIAOA,4IAYA,8NAUA,gFAIA,+HAQA,+FAIA,mHAOA,oTAgBA,iHAIA,+FAGA,iEAGA,uDAOA,uCACE,2CAOF,8BACE,sDAGA,4FAIA,iHAKA,mHIxKF,iDAMA,sJAOA,sFAOA,iZAkBA,+GAMA,yHAMA,6LAOA,wEAIA,kIAKA,kHAMA,0GAKA,kFAKA,4FAOA,+JAcA,sHASA,4PAUA,uHAOA,0GAIA,sGAIA,oHAQA,qHAOA,yJAQA,6IAOA,+FAKA,yCASA,8BACE,oIElLF,6GAOA,iJAOA,0HAQA,4IAWA,qGAKA,qGAQA,kJAQA,qHASA,gTAcA,2CAIA,2FAOA,6EAGA,iFAGA,mGAMA,uCAGA,mEAMA,uGAOA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,wEAIA,kFjCxIF,uJAOA,uFAOA,4RAgBA,0EAIA,4EAIA,0EAOA,uMAgBA,0EAMA,4RAkBA,wFAGA,0FAIA,iGAIA,iEAOA,gHAOA,+DAGA,yHAOA,+GAOA,uCACE,6DAQF,8BACE,+CAGA,sEAIA,gFOhJF,+JAUA,yNAYA,gCAGA,kCAGA,gCAKA,wIAMA,uCAKA,gEAIA,8DAMA,uEAMA,mEAOA,wJAUA,2EAGA,4EAIA,oCAMA,8BACE,uCAGA,wCAGA,qEQpGF,0aAuBA,uJAMA,yJAMA,uJASA,yHAOA,0JAKA,+JAOA,gHAOA,8HAQA,sFAQA,0DAMA,oDAMA,8FAIA,qLAKA,0JAMA,mKAQA,uCACE,uDAQF,8BACE,mHAKA,+FCxIF,+HASA,wHAMA,yHAMA,wFAQA,wGAKA,gHAKA,+FAMA,yBACE,8GAIA,kFAOF,4GAOA,iHAGA,2FAMA,8BACE,gGQzEF,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE,sDQhHF,sRAeA,yEAIA,gMAUA,8HAIA,iKAIA,6JAIA,2JAIA,2IAMA,4EAMA,+JAKA,qHAWA,kHAIA,gJAIA,8KAIA,4KAIA,0KAKA,4GAOA,iMAUA,kDAIA,wQAYA,oDAKA,0MAYA,kDAIA,+EAMA,0RAUA,gFAGA,8EAKA,gFAMA,0KAMA,6FAGA,2FAGA,sEAGA,kGAGA,kGAIA,sGAOA,2DAKA,4FAQA,2EAIA,qEAOA,2CAGA,oEAGA,mEAIA,qEAKA,mEAIA,kEAIA,oDAMA,2DAGA,mEAGA,mEAGA,mEAIA,kIAKA,sOAuBA,6FAOA,iDAKA,8BAEE,sEAIA,uDAKA,kDG5UF,yUAoBA,0HAMA,4HAmBA,+JAQA,yXAoBA,0DAKA,mGAKA,4FAOA,uFAGA,yEAMA,8FAUA,uDASA,uCACE,qCAUF,8BACE,0CAGA,iErCjIF,kIAqBA,+UAiBA,gHAOA,sGAKA,8FAOA,+LAQA,6EAMA,oHASA,mFAcA,iEASA,yRAWA,4OAaA,qGAIA,iGAIA,oEAKA,6JAUA,wDAMA,mIAQA,qNAYA,8JAUA,6JAQA,kXAiBA,+EAKA,gWAgBA,2EAQA,4IAMA,0MAKA,gGAMA,mIAmBA,2CAIA,ohBA0BA,yIASA,sEAGA,0EAGA,sGAIA,0GAIA,mKAKA,iFAIA,oGAIA,sGAWA,qVAMA,2JAGA,mHAWA,qLAOA,kVAgBA,0EAGA,qGAIA,yDAGA,qJAKA,geAmBA,wIAOA,kEAOA,oPAWA,qWAgBA,6GAIA,0GAIA,8HAIA,sEAMA,8BACE,sCAGA,mNAUA,sGASF,uCACE,kRUjgBF,sLASA,mFAKA,uGAcA,kEAMA,yJAQA,iGAGA,wHAKA,uIAOA,kLASA,oFAIA,yCAMA,4GAMA,8BACE,kFAOF,uCACE,8Ce/FF,qRAiBA,0dAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,4DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAYA,oFAIA,6DAIA,qKAYA,8IAOA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA,0FN7UF,wQAcA,4EAKA,kGAQA,8MAQA,sDAMA,6GAOA,+FAQA,oUAaA,sUAqBA,oIAGA,gIAGA,oIAGA,8HAMA,mWAiBA,8LAQA,0DAKA,qFAGA,qFAGA,iFAGA,qFAGA,+EAMA,4KASA,wJAQA,mGAOA,6HASA,8BACE,gDAGA,4CAGA,yFQrMF,iQAYA,sEAQA,4KAQA,2GAOA,2JAUA,qEAMA,wKAYA,+KAUA,6QAUA,8FAKA,mHAQA,oVAeA,iFAGA,4FAKA,uKASA,8DAKA,gHASA,4JAOA,6DAMA,2IASA,6fAwBA,oDAGA,6DAMA,+EAGA,kFAGA,4EAGA,+EAIA,8DAQA,+DAQA,gKAUA,iKAWA,uCACE,mEAQF,8BACE,+DAIA,uFAIA,sDGvQF,8FAYA,2GAOA,wQAcA,uGAIA,uGAIA,uGAOA,iKAQA,uKASA,+EAIA,kFAIA,yEAOA,2MAWA,oEAGA,kFAGA,sJAOA,wHAMA,oJAQA,6HAMA,+GAMA,0HAOA,gJAUA,6KAYA,uIAMA,+EAKA,8DAMA,wDAGA,wEAGA,2HAWA,8BACE,oDAGA,qMAMA,yFAGA,oGAGA,mHQlNF,oJAOA,oFAOA,qFAQA,2NAsBA,0CAIA,mDAMA,sFAcA,wUAgBA,6HAQA,gHAKA,oHAKA,oHAQA,0KAQA,+DAYA,2FAMA,iIASA,kFAGA,4IAOA,kEAIA,mGAMA,uCACE,sCAGA,uCAOF,8BACE,kDAGA,kFAIA,oDtBzLF,+MAYA,kFASA,8CAIA,gEAIA,kEAMA,yEAKA,mFAKA,iEAMA,2HAQA,6FAKA,qEAMA,sEAMA,oDAQA,4IAMA,+OAUA,uCACE,4BAOF,8BACE,wKAWA,yEQtHF,+FAAA,4FAAA,gGAAA,oGQWA,kGAOA,+BAMA,kCAIA,6HASA,wGAOA,wCAMA,wCAIA,4CAIA,sLAQA,8EAAA,8EAAA,8EASA,4DAIA,iEAMA,6HASA,mCAIA,2GAUA,8GAMA,0GAMA,0JAaA,yFAGA,mEQ3IA,oJAWA,iCAIA,mCAKA,sCAGA,gEAMA,+IAUA,iDAMA,oHAOA,kDAKA,8EAMA,kHAMA,wFAKA,yGAQA,uJAQA,mNASA,+FAKA,0GAIA,mEAMA,kNAaA,8BACE,0DAGA,iDAGA,6BTjIF,+DAOA,iJAYA,sIAMA,iHAQA,4EAKA,yFAGA,yFAQA,iDAIA,wGAQA,sGAWA,uCACE,0GAQF,8BACE,yGQpFF,oJASA,oFAOA,2TAkBA,gJAMA,kJAMA,gJAUA,6DAOA,kJAYA,uEAMA,6GAOA,4DAGA,sHAOA,sGAKA,yEAMA,uCACE,iCAOF,8BACE,4CAGA,yDAGA,qEE7HF,+MAQA,4FAOA,4UAeA,0HAKA,4HAMA,mIAKA,sHAMA,4EAGA,4IAOA,kJAYA,oOASA,sFAGA,qIAIA,qGAIA,yHAKA,gHAQA,0TAgBA,uHAIA,qGAGA,uEAGA,6DAeA,8HAKA,mJAIA,6IAMA,0KAUA,uCACE,iDAOF,8BACE,4DAGA,kGAMA,yEAGA,+EOjMF,+HAWA,sDAMA,kEhBrBF","sources":["src/index.css","src/components/input.css","src/components/badge.css","src/components/dropdown-menu.css","src/themes.css","src/components/radio.css","src/variables.css","src/components/number-input.css","src/components/sidebar.css","src/components/textarea.css","src/components/divider.css","src/components/drawer.css","src/reset.css","src/components/switch.css","src/dark.css","src/components/rating.css","src/components/toggle.css","src/components/checkbox.css","src/components/avatar.css","src/components/combobox.css","src/components/field.css","src/components/select.css","src/components/link.css","src/components/scroll-area.css","src/components/description-list.css","src/components/timeline.css","src/components/tooltip.css","src/components/calendar.css","src/components/button.css","src/components/card.css","src/components/search-box.css","src/components/menubar.css","src/components/empty-state.css","src/components/command.css","src/components/alert.css","src/components/date-picker.css","src/components/table.css","src/components/collapsible.css","src/components/list.css","src/components/file-upload.css","src/components/stat.css","src/components/slider.css","src/components/modal.css","src/components/popover.css","src/components/input-otp.css","src/components/tag-input.css","src/components/quote.css","src/components/aspect-ratio.css","src/components/tabs.css","src/components/steps.css","src/components/accordion.css","src/components/skeleton.css","src/components/spinner.css","src/components/progress.css","src/components/date-range-picker.css","src/components/pagination.css","src/components/breadcrumb.css","src/components/toast.css"],"sourcesContent":["@layer ddga-base, ddga-components;\n\n@import './variables.css' layer(ddga-base);\n@import './dark.css' layer(ddga-base);\n/* themes.css imported AFTER dark.css so `.ddga-theme-*` classes win over\n   dark.css's primary override (dark mode + explicit theme = theme wins). */\n@import './themes.css' layer(ddga-base);\n@import './reset.css' layer(ddga-base);\n\n@import './components/field.css';\n@import './components/button.css';\n@import './components/input.css';\n@import './components/textarea.css';\n@import './components/checkbox.css';\n@import './components/radio.css';\n@import './components/switch.css';\n@import './components/select.css';\n@import './components/card.css';\n@import './components/badge.css';\n@import './components/divider.css';\n@import './components/avatar.css';\n@import './components/tooltip.css';\n@import './components/alert.css';\n@import './components/modal.css';\n@import './components/toast.css';\n@import './components/tabs.css';\n@import './components/breadcrumb.css';\n@import './components/pagination.css';\n@import './components/accordion.css';\n@import './components/steps.css';\n@import './components/spinner.css';\n@import './components/skeleton.css';\n@import './components/progress.css';\n@import './components/dropdown-menu.css';\n@import './components/drawer.css';\n@import './components/combobox.css';\n@import './components/calendar.css';\n@import './components/date-picker.css';\n@import './components/file-upload.css';\n@import './components/slider.css';\n@import './components/number-input.css';\n@import './components/rating.css';\n@import './components/toggle.css';\n@import './components/description-list.css';\n@import './components/empty-state.css';\n@import './components/stat.css';\n@import './components/popover.css';\n@import './components/sidebar.css';\n@import './components/scroll-area.css';\n@import './components/menubar.css';\n@import './components/timeline.css';\n@import './components/command.css';\n@import './components/table.css';\n@import './components/input-otp.css';\n@import './components/link.css';\n@import './components/search-box.css';\n@import './components/list.css';\n@import './components/quote.css';\n@import './components/collapsible.css';\n@import './components/tag-input.css';\n@import './components/date-range-picker.css';\n@import './components/aspect-ratio.css';\n/* AUTO:COMPONENT_IMPORTS */\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Input-specific styles live here. */\n\n  /* ─── Label ─── */\n\n  .ddga-input__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-input__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Control (the bordered box; owns border/focus/size/state) ─── */\n\n  .ddga-input {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Button) ─── */\n\n  .ddga-input--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-input--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-input--lg {\n    block-size: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Field (the actual <input> , transparent, borderless fill) ─── */\n\n  .ddga-input__field {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    block-size: 100%;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n  }\n\n  .ddga-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* Autofill: browsers paint their own background/text on autofilled\n     fields, overriding the theme (most jarring in dark mode, and government\n     forms autofill heavily). Repaint with tokens via the inset-shadow\n     technique , `background-color` alone is ignored for autofill. */\n  .ddga-input__field:-webkit-autofill,\n  .ddga-input__field:-webkit-autofill:hover,\n  .ddga-input__field:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-text-primary);\n  }\n\n  /* ─── Adornments (leading/trailing icon or text) ─── */\n\n  .ddga-input__adornment {\n    display: inline-flex;\n    align-items: center;\n    align-self: center;\n    flex-shrink: 0;\n    /* Never taller than the field interior, so an interactive control\n       (clear / password toggle) can't paint over the field border. */\n    max-block-size: 100%;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n  .ddga-input__adornment svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* An adornment hugs the field edge: collapse the padding on its side so\n     an in-field button's hit area aligns with the field, not floating. */\n  .ddga-input:has(.ddga-input__adornment--start) {\n    padding-inline-start: var(--ddga-space-2);\n  }\n  .ddga-input:has(.ddga-input__adornment--end) {\n    padding-inline-end: var(--ddga-space-2);\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-input:focus-within {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-input--error:focus-within {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── States (driven by the inner field via :has()) ─── */\n\n  .ddga-input:has(.ddga-input__field:disabled) {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-input:has(.ddga-input__field:disabled) .ddga-input__field {\n    cursor: not-allowed;\n  }\n\n  .ddga-input:has(.ddga-input__field:read-only:not(:disabled)) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-input {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-input:focus-within {\n      outline: 2px solid Highlight;\n    }\n    .ddga-input:has(.ddga-input__field:disabled) {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-badge {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-full);\n    font-weight: var(--ddga-font-weight-medium);\n    font-family: inherit;\n    line-height: 1.4;\n    white-space: nowrap;\n    user-select: none;\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-badge--sm {\n    height: 20px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-badge--md {\n    height: 24px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  /* ─── Solid variants ─── */\n\n  .ddga-badge--default {\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-700);\n  }\n\n  .ddga-badge--primary {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  .ddga-badge--secondary {\n    background-color: var(--ddga-color-secondary);\n    color: var(--ddga-color-secondary-foreground);\n  }\n\n  .ddga-badge--destructive {\n    background-color: var(--ddga-color-destructive);\n    color: var(--ddga-color-destructive-foreground);\n  }\n\n  .ddga-badge--success {\n    background-color: var(--ddga-color-success);\n    color: var(--ddga-color-success-foreground);\n  }\n\n  .ddga-badge--warning {\n    background-color: var(--ddga-color-warning);\n    color: var(--ddga-color-warning-foreground);\n  }\n\n  .ddga-badge--info {\n    background-color: var(--ddga-color-info);\n    color: var(--ddga-color-info-foreground);\n  }\n\n  /* ─── Subtle (tonal) variants ─── */\n\n  .ddga-badge--primary-subtle {\n    background-color: var(--ddga-sa-100);\n    color: var(--ddga-sa-800);\n  }\n\n  .ddga-badge--secondary-subtle {\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-700);\n  }\n\n  .ddga-badge--destructive-subtle {\n    background-color: var(--ddga-error-100);\n    color: var(--ddga-error-700);\n  }\n\n  .ddga-badge--success-subtle {\n    background-color: var(--ddga-success-100);\n    color: var(--ddga-success-700);\n  }\n\n  .ddga-badge--warning-subtle {\n    background-color: var(--ddga-warning-100);\n    color: var(--ddga-warning-700);\n  }\n\n  .ddga-badge--info-subtle {\n    background-color: var(--ddga-info-100);\n    color: var(--ddga-info-700);\n  }\n\n  /* ─── Outline ─── */\n\n  .ddga-badge--outline {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n    border-color: var(--ddga-color-border);\n  }\n\n  /* ─── Dot ─── */\n\n  .ddga-badge__dot {\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: var(--ddga-radius-full);\n    background-color: currentColor;\n    flex-shrink: 0;\n  }\n\n  /* ─── Icons inside badge ─── */\n\n  .ddga-badge__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  .ddga-badge__icon > svg,\n  .ddga-badge > svg {\n    width: 0.875em;\n    height: 0.875em;\n    display: block;\n  }\n\n  .ddga-badge svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  /* ─── Close button (dismissible) ─── */\n\n  .ddga-badge__close {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5em;\n    block-size: 1.5em;\n    margin-inline-start: 0.125em;\n    margin-inline-end: -0.25em;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-full);\n    background-color: transparent;\n    color: inherit;\n    cursor: pointer;\n    font: inherit;\n    -webkit-appearance: none;\n    appearance: none;\n  }\n\n  .ddga-badge__close > svg {\n    inline-size: 0.75em;\n    block-size: 0.75em;\n  }\n\n  .ddga-badge__close:hover {\n    background-color: color-mix(in srgb, currentColor 18%, transparent);\n  }\n\n  .ddga-badge__close:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 1px;\n  }\n\n  /* ─── Dark mode adjustments ─── */\n  /* The `default` and `*-subtle` families fill from raw --ddga-*-100 tints, which\n     stay light in dark mode (the raw scale isn't theme-flipped) — they'd render as\n     light pills with dark text on a dark page. Recolor to translucent tints + a\n     light (-200) foreground so they read as dark-surface chips. Mirrors alert.css /\n     button.css. Solid + outline variants use semantic tokens and adapt on their own. */\n\n  [data-theme='dark'] .ddga-badge--default,\n  [data-theme='dark'] .ddga-badge--secondary-subtle {\n    background-color: rgb(255 255 255 / 0.1);\n    color: var(--ddga-gray-200);\n  }\n  [data-theme='dark'] .ddga-badge--primary-subtle {\n    background-color: rgb(27 131 84 / 0.2);\n    color: var(--ddga-sa-200, #b8eacb);\n  }\n  [data-theme='dark'] .ddga-badge--destructive-subtle {\n    background-color: rgb(217 45 32 / 0.18);\n    color: var(--ddga-error-200, #fecdca);\n  }\n  [data-theme='dark'] .ddga-badge--success-subtle {\n    background-color: rgb(7 148 85 / 0.18);\n    color: var(--ddga-success-200, #abefc6);\n  }\n  [data-theme='dark'] .ddga-badge--warning-subtle {\n    background-color: rgb(220 104 3 / 0.18);\n    color: var(--ddga-warning-200, #fedf89);\n  }\n  [data-theme='dark'] .ddga-badge--info-subtle {\n    background-color: rgb(21 112 239 / 0.16);\n    color: var(--ddga-info-200, #b2ddff);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-badge {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Panel (Content / SubContent) ─── */\n\n  .ddga-dropdown-menu {\n    min-inline-size: 192px;\n    max-inline-size: 320px;\n    padding: var(--ddga-space-1);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    z-index: 50;\n    outline: none;\n  }\n\n  /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n     surfaces feel instantaneous (this isn't a Modal). */\n  .ddga-dropdown-menu[data-state='open'] {\n    animation: ddga-dropdown-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-dropdown-menu[data-state='closed'] {\n    animation: ddga-dropdown-menu-out 80ms ease-in;\n  }\n\n  @keyframes ddga-dropdown-menu-in {\n    from {\n      opacity: 0;\n      transform: translateY(-2px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-dropdown-menu-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-dropdown-menu--sm {\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-dropdown-menu--md {\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n  .ddga-dropdown-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Radix sets data-highlighted on the actively focused/hovered item — that's\n     our only \"focus ring\" since the menu manages focus internally. */\n  .ddga-dropdown-menu__item[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-dropdown-menu__item[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  /* Destructive: red text and a red-tinted hover. Tracks the destructive\n     family the rest of the system uses. */\n  .ddga-dropdown-menu__item[data-destructive] {\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* Inline pieces inside the row. */\n  .ddga-dropdown-menu__label {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .ddga-dropdown-menu__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1em;\n    block-size: 1em;\n    flex-shrink: 0;\n    color: var(--ddga-text-secondary);\n  }\n  .ddga-dropdown-menu__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-dropdown-menu__shortcut {\n    margin-inline-start: auto;\n    font-size: var(--ddga-font-size-xs);\n    color: var(--ddga-text-tertiary);\n    letter-spacing: 0.04em;\n  }\n\n  /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n  .ddga-dropdown-menu__item--checkable {\n    /* Reserve the indicator column even when unchecked so labels align. */\n    padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n    position: relative;\n  }\n\n  .ddga-dropdown-menu__indicator {\n    position: absolute;\n    inset-inline-start: var(--ddga-space-2);\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-dropdown-menu__indicator-icon {\n    inline-size: 0.875em;\n    block-size: 0.875em;\n  }\n  .ddga-dropdown-menu__radio-dot {\n    /* span is inline by default → inline-size/block-size are ignored. Force a\n       sized inline-block so the filled circle actually renders. */\n    display: inline-block;\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: var(--ddga-radius-full);\n    background-color: currentColor;\n  }\n\n  /* ─── Submenu ─── */\n\n  .ddga-dropdown-menu__item--sub[data-state='open'] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-dropdown-menu__sub-chevron {\n    margin-inline-start: auto;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n  [dir='rtl'] .ddga-dropdown-menu__sub-chevron {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Label + Separator ─── */\n\n  .ddga-dropdown-menu__group-label {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  /* Protect Arabic cursive joining — drop the tracking + casing when RTL\n     (mirrors command.css). The shortcut hint is usually Latin but reset it\n     too for parity. */\n  [dir='rtl'] .ddga-dropdown-menu__group-label {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n  [dir='rtl'] .ddga-dropdown-menu__shortcut {\n    letter-spacing: normal;\n  }\n\n  .ddga-dropdown-menu__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    margin-inline: calc(var(--ddga-space-1) * -1);\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Dark mode ─── */\n\n  /* The destructive-hover background uses the raw --ddga-error-50 tint\n     (near-white), which doesn't adapt in dark mode. Override with a translucent\n     red + a light-red foreground for contrast (mirrors alert.css / button.css). */\n  [data-theme='dark'] .ddga-dropdown-menu__item[data-destructive][data-highlighted] {\n    background-color: rgb(217 45 32 / 0.24);\n    color: var(--ddga-error-200, #fecdca);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-dropdown-menu {\n      border: 1px solid CanvasText;\n    }\n    .ddga-dropdown-menu__item[data-highlighted] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-dropdown-menu__separator {\n      background-color: CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-dropdown-menu[data-state='open'],\n    .ddga-dropdown-menu[data-state='closed'] {\n      animation: none;\n    }\n  }\n}\n","/* Generated by tokens/scripts/generate-css.ts , do not edit by hand. */\n.ddga-theme-sa-green {\n  --ddga-color-primary: var(--ddga-sa-500);\n  --ddga-color-primary-hover: var(--ddga-sa-600);\n  --ddga-color-primary-active: var(--ddga-sa-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-sa-500);\n}\n\n.ddga-theme-gray {\n  --ddga-color-primary: var(--ddga-gray-500);\n  --ddga-color-primary-hover: var(--ddga-gray-600);\n  --ddga-color-primary-active: var(--ddga-gray-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-gray-500);\n}\n\n.ddga-theme-error {\n  --ddga-color-primary: var(--ddga-error-500);\n  --ddga-color-primary-hover: var(--ddga-error-600);\n  --ddga-color-primary-active: var(--ddga-error-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-error-500);\n}\n\n.ddga-theme-warning {\n  --ddga-color-primary: var(--ddga-warning-500);\n  --ddga-color-primary-hover: var(--ddga-warning-600);\n  --ddga-color-primary-active: var(--ddga-warning-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-warning-500);\n}\n\n.ddga-theme-success {\n  --ddga-color-primary: var(--ddga-success-500);\n  --ddga-color-primary-hover: var(--ddga-success-600);\n  --ddga-color-primary-active: var(--ddga-success-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-success-500);\n}\n\n.ddga-theme-info {\n  --ddga-color-primary: var(--ddga-info-500);\n  --ddga-color-primary-hover: var(--ddga-info-600);\n  --ddga-color-primary-active: var(--ddga-info-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-info-500);\n}\n\n.ddga-theme-gold {\n  --ddga-color-primary: var(--ddga-gold-500);\n  --ddga-color-primary-hover: var(--ddga-gold-600);\n  --ddga-color-primary-active: var(--ddga-gold-700);\n  --ddga-color-primary-foreground: #0D121C;\n  --ddga-color-ring: var(--ddga-gold-500);\n}\n\n.ddga-theme-lavender {\n  --ddga-color-primary: var(--ddga-lavender-500);\n  --ddga-color-primary-hover: var(--ddga-lavender-600);\n  --ddga-color-primary-active: var(--ddga-lavender-700);\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-ring: var(--ddga-lavender-500);\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Group label, group container, and per-item styles\n     live here. Size + error states cascade from the group via descendant\n     selectors so the source of truth stays on one element per group. */\n\n  /* ─── Group label ─── */\n\n  .ddga-radio-group__label {\n    display: block;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: 500;\n    line-height: 1.4;\n    margin-block-end: var(--ddga-space-1);\n  }\n  .ddga-radio-group__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Group container (Radix Root, role=radiogroup) ─── */\n\n  .ddga-radio-group {\n    display: flex;\n    gap: var(--ddga-space-3);\n  }\n  .ddga-radio-group--vertical {\n    flex-direction: column;\n  }\n  .ddga-radio-group--horizontal {\n    flex-direction: row;\n    flex-wrap: wrap;\n  }\n\n  /* ─── Row (circle + label, inline) ─── */\n\n  .ddga-radio-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Circle (Radix Item , reset the button, then style) ─── */\n\n  .ddga-radio {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    padding: 0;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: 999px;\n    background-color: var(--ddga-color-background);\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* Sizes cascade from the group , one source of truth per group. */\n  .ddga-radio-group--md .ddga-radio {\n    block-size: 18px;\n    inline-size: 18px;\n  }\n  .ddga-radio-group--sm .ddga-radio {\n    block-size: 16px;\n    inline-size: 16px;\n  }\n\n  /* ─── Checked border ─── */\n\n  .ddga-radio[data-state='checked'] {\n    border-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-radio:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error (cascades from the group) ─── */\n\n  .ddga-radio-group--error .ddga-radio {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-radio-group--error .ddga-radio[data-state='checked'] .ddga-radio__dot {\n    background-color: var(--ddga-color-error);\n  }\n  .ddga-radio-group--error .ddga-radio:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled (group OR per-item) ─── */\n\n  .ddga-radio:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-radio-row:has(.ddga-radio:disabled) .ddga-radio__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Indicator + dot (only mounts when checked) ─── */\n\n  .ddga-radio__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-radio__dot {\n    inline-size: 50%;\n    block-size: 50%;\n    border-radius: 999px;\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Item label ─── */\n\n  .ddga-radio__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-radio {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-radio {\n      border: 1px solid CanvasText;\n    }\n    .ddga-radio[data-state='checked'] {\n      border-color: Highlight;\n    }\n    .ddga-radio__dot {\n      background-color: CanvasText;\n    }\n    .ddga-radio:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-radio:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n",":root {\n  --ddga-color-primary: #25935F;\n  --ddga-color-primary-hover: #1B8354;\n  --ddga-color-primary-active: #166A45;\n  --ddga-color-primary-foreground: #FFFFFF;\n  --ddga-color-secondary: #F3F4F6;\n  --ddga-color-secondary-hover: #E5E7EB;\n  --ddga-color-secondary-foreground: #0D121C;\n  --ddga-color-background: #FFFFFF;\n  --ddga-color-foreground: #0D121C;\n  --ddga-color-muted: #F3F4F6;\n  --ddga-color-muted-foreground: #6C737F;\n  --ddga-color-border: #E5E7EB;\n  --ddga-color-input: #D2D6DB;\n  --ddga-color-card: #FFFFFF;\n  --ddga-color-card-foreground: #0D121C;\n  --ddga-color-destructive: #D92D20;\n  --ddga-color-destructive-hover: #B42318;\n  --ddga-color-destructive-foreground: #FFFFFF;\n  --ddga-color-error: #D92D20;\n  --ddga-color-error-hover: #B42318;\n  --ddga-color-error-foreground: #FFFFFF;\n  --ddga-color-success: #079455;\n  --ddga-color-success-hover: #067647;\n  --ddga-color-success-foreground: #FFFFFF;\n  --ddga-color-warning: #DC6803;\n  --ddga-color-warning-hover: #B54708;\n  --ddga-color-warning-foreground: #FFFFFF;\n  --ddga-color-info: #1570EF;\n  --ddga-color-info-hover: #175CD3;\n  --ddga-color-info-foreground: #FFFFFF;\n  --ddga-color-ring: #25935F;\n  --ddga-text-primary: #0D121C;\n  --ddga-text-secondary: #4D5761;\n  --ddga-text-tertiary: #6C737F;\n  --ddga-text-placeholder: #9DA4AE;\n  --ddga-sa-25: #F7FDF9;\n  --ddga-sa-50: #F3FCF6;\n  --ddga-sa-100: #DFF6E7;\n  --ddga-sa-200: #B8EACB;\n  --ddga-sa-300: #88D8AD;\n  --ddga-sa-400: #54C08A;\n  --ddga-sa-500: #25935F;\n  --ddga-sa-600: #1B8354;\n  --ddga-sa-700: #166A45;\n  --ddga-sa-800: #14573A;\n  --ddga-sa-900: #104631;\n  --ddga-sa-950: #092A1E;\n  --ddga-gray-25: #FCFCFD;\n  --ddga-gray-50: #F9FAFB;\n  --ddga-gray-100: #F3F4F6;\n  --ddga-gray-200: #E5E7EB;\n  --ddga-gray-300: #D2D6DB;\n  --ddga-gray-400: #9DA4AE;\n  --ddga-gray-500: #6C737F;\n  --ddga-gray-600: #4D5761;\n  --ddga-gray-700: #384250;\n  --ddga-gray-800: #1F2A37;\n  --ddga-gray-900: #111927;\n  --ddga-gray-950: #0D121C;\n  --ddga-error-25: #FFFBFA;\n  --ddga-error-50: #FEF3F2;\n  --ddga-error-100: #FEE4E2;\n  --ddga-error-200: #FECDCA;\n  --ddga-error-300: #FDA29B;\n  --ddga-error-400: #F97066;\n  --ddga-error-500: #F04438;\n  --ddga-error-600: #D92D20;\n  --ddga-error-700: #B42318;\n  --ddga-error-800: #912018;\n  --ddga-error-900: #7A271A;\n  --ddga-error-950: #55160C;\n  --ddga-warning-25: #FFFCF5;\n  --ddga-warning-50: #FFFAEB;\n  --ddga-warning-100: #FEF0C7;\n  --ddga-warning-200: #FEDF89;\n  --ddga-warning-300: #FEC84B;\n  --ddga-warning-400: #FDB022;\n  --ddga-warning-500: #F79009;\n  --ddga-warning-600: #DC6803;\n  --ddga-warning-700: #B54708;\n  --ddga-warning-800: #93370D;\n  --ddga-warning-900: #7A2E0E;\n  --ddga-warning-950: #4E1D09;\n  --ddga-success-25: #F6FEF9;\n  --ddga-success-50: #ECFDF3;\n  --ddga-success-100: #DCFAE6;\n  --ddga-success-200: #ABEFC6;\n  --ddga-success-300: #75E0A7;\n  --ddga-success-400: #47CD89;\n  --ddga-success-500: #17B26A;\n  --ddga-success-600: #079455;\n  --ddga-success-700: #067647;\n  --ddga-success-800: #085D3A;\n  --ddga-success-900: #074D31;\n  --ddga-success-950: #053321;\n  --ddga-info-25: #F5FAFF;\n  --ddga-info-50: #EFF8FF;\n  --ddga-info-100: #D1E9FF;\n  --ddga-info-200: #B2DDFF;\n  --ddga-info-300: #84CAFF;\n  --ddga-info-400: #53B1FD;\n  --ddga-info-500: #2E90FA;\n  --ddga-info-600: #1570EF;\n  --ddga-info-700: #175CD3;\n  --ddga-info-800: #1849A9;\n  --ddga-info-900: #194185;\n  --ddga-info-950: #102A56;\n  --ddga-gold-25: #FFFEF7;\n  --ddga-gold-50: #FFFEF2;\n  --ddga-gold-100: #FFFCE6;\n  --ddga-gold-200: #FCF3BD;\n  --ddga-gold-300: #FAE996;\n  --ddga-gold-400: #F7D54D;\n  --ddga-gold-500: #F5BD02;\n  --ddga-gold-600: #DBA102;\n  --ddga-gold-700: #B87B02;\n  --ddga-gold-800: #945C01;\n  --ddga-gold-900: #6E3C00;\n  --ddga-gold-950: #472400;\n  --ddga-lavender-25: #FEFCFF;\n  --ddga-lavender-50: #F9F5FA;\n  --ddga-lavender-100: #F2E9F5;\n  --ddga-lavender-200: #E1CCE8;\n  --ddga-lavender-300: #CCADD9;\n  --ddga-lavender-400: #A57BBA;\n  --ddga-lavender-500: #80519F;\n  --ddga-lavender-600: #6D428F;\n  --ddga-lavender-700: #532D75;\n  --ddga-lavender-800: #3D1D5E;\n  --ddga-lavender-900: #281047;\n  --ddga-lavender-950: #16072E;\n  --ddga-font-ar: 'IBM Plex Sans Arabic', 'Noto Sans Arabic', sans-serif;\n  --ddga-font-en: 'IBM Plex Sans Arabic', 'Inter', sans-serif;\n  --ddga-font-mono: 'IBM Plex Mono', monospace;\n  --ddga-font-weight-regular: 400;\n  --ddga-font-weight-medium: 500;\n  --ddga-font-weight-semibold: 600;\n  --ddga-font-weight-bold: 700;\n  --ddga-font-size-xs: 0.75rem;\n  --ddga-font-size-sm: 0.875rem;\n  --ddga-font-size-base: 1rem;\n  --ddga-font-size-lg: 1.125rem;\n  --ddga-font-size-xl: 1.25rem;\n  --ddga-font-size-2xl: 1.5rem;\n  --ddga-font-size-3xl: 2rem;\n  --ddga-space-0: 0;\n  --ddga-space-1: 0.25rem;\n  --ddga-space-2: 0.5rem;\n  --ddga-space-3: 0.75rem;\n  --ddga-space-4: 1rem;\n  --ddga-space-5: 1.25rem;\n  --ddga-space-6: 1.5rem;\n  --ddga-space-8: 2rem;\n  --ddga-space-10: 2.5rem;\n  --ddga-space-12: 3rem;\n  --ddga-space-16: 4rem;\n  --ddga-radius-none: 0;\n  --ddga-radius-sm: 0.25rem;\n  --ddga-radius-md: 0.5rem;\n  --ddga-radius-lg: 0.75rem;\n  --ddga-radius-xl: 1rem;\n  --ddga-radius-full: 9999px;\n  --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);\n  --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1);\n  --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1);\n  --ddga-shadow-none: none;\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only NumberInput-specific styles live here. Structure\n     mirrors Input: a bordered control box owns border/focus/size/state; the\n     − button, the field, and the + button sit inside it. */\n\n  /* ─── Label ─── */\n\n  .ddga-number-input__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-number-input__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Control (the bordered box) ─── */\n\n  .ddga-number-input {\n    display: flex;\n    align-items: stretch;\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    overflow: hidden;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Input) ─── */\n\n  .ddga-number-input--sm {\n    block-size: 32px;\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-number-input--md {\n    block-size: 36px;\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-number-input--lg {\n    block-size: 40px;\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Field (the actual <input>) ─── */\n\n  .ddga-number-input__field {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    block-size: 100%;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    text-align: center;\n    outline: none;\n    /* Keep digits Latin + LTR even inside an RTL form (DGA convention). */\n    direction: ltr;\n    unicode-bidi: plaintext;\n  }\n\n  .ddga-number-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── Stepper buttons (− / +) ─── */\n\n  .ddga-number-input__step {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: 2.25rem;\n    padding: 0;\n    border: 0;\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n    font-size: 1rem;\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      opacity 150ms ease;\n  }\n\n  /* Logical dividers between the buttons and the field (RTL-safe). */\n  .ddga-number-input__step--decrement {\n    border-inline-end: 1px solid var(--ddga-color-input);\n  }\n  .ddga-number-input__step--increment {\n    border-inline-start: 1px solid var(--ddga-color-input);\n  }\n\n  .ddga-number-input__step:hover:not(:disabled) {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n\n  .ddga-number-input__step:disabled {\n    opacity: 0.45;\n    cursor: not-allowed;\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-number-input:focus-within {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-number-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-number-input--error:focus-within {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-number-input:has(.ddga-number-input__field:disabled) {\n    background-color: var(--ddga-color-muted);\n    opacity: 0.5;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-number-input,\n    .ddga-number-input__step {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-number-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-number-input__step {\n      background-color: ButtonFace;\n      color: ButtonText;\n    }\n    .ddga-number-input:focus-within {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n","@layer ddga-components {\n  /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n     data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n     data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n     custom properties so consumers override per instance. Logical properties\n     keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n  .ddga-sidebar-wrapper {\n    --ddga-sidebar-width: 16rem;\n    --ddga-sidebar-width-icon: 3.5rem;\n\n    display: flex;\n    /* Self-sufficient full height. This must be a DEFINITE height, not a `min-`:\n       the aside is `block-size:100%`, which only resolves against a definite\n       parent — with a `min-block-size` the wrapper stays content-sized, the\n       percentage falls back to `auto`, and the footer detaches from the viewport\n       bottom (and a long nav can't scroll inside `__content`). A definite\n       `100svh` makes the footer stick and the nav scroll with zero consumer\n       config — no html→body→root height chain. `svh` (not `dvh`) avoids reflow as\n       mobile browser chrome shows/hides. Escape hatch for an embedded/boxed shell:\n       set a definite `height`/`block-size` on the provider (inline style wins),\n       e.g. `<SidebarProvider style={{ blockSize: '24rem' }}>`. */\n    block-size: 100svh;\n    inline-size: 100%;\n  }\n\n  /* ─── Container ─── */\n\n  .ddga-sidebar {\n    display: flex;\n    flex-direction: column;\n    flex: none;\n    inline-size: var(--ddga-sidebar-width);\n    block-size: 100%;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    border-inline-end: 1px solid var(--ddga-color-border);\n    /* Shared easing + duration for the whole collapse so width, paddings and\n       fades stay in lockstep (Material standard ease). */\n    transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: inline-size;\n    overflow: hidden;\n  }\n\n  /* side=end → border on the opposite logical edge and order after the inset. */\n  .ddga-sidebar[data-side='end'] {\n    order: 1;\n    border-inline-end: 0;\n    border-inline-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* Collapsed icon rail. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n    inline-size: var(--ddga-sidebar-width-icon);\n  }\n\n  /* Offcanvas collapse fully hides on desktop. */\n  .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n    inline-size: 0;\n    border-inline: 0;\n  }\n\n  /* ─── Variants ─── */\n\n  .ddga-sidebar[data-variant='floating'] {\n    margin: var(--ddga-space-2);\n    block-size: auto;\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-md);\n  }\n\n  .ddga-sidebar[data-variant='inset'] {\n    border-inline-end: 0;\n    background-color: transparent;\n  }\n\n  /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n  .ddga-sidebar--mobile {\n    inline-size: var(--ddga-sidebar-width);\n    max-inline-size: 85vw;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* ─── Inset (main content region) ─── */\n\n  .ddga-sidebar-inset {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Opt-in (`<SidebarInset scrollable>`): make the inset its own vertical scroll\n     region. The wrapper's definite `block-size:100svh` gives the stretched inset\n     a definite height, so `min-block-size:0` + `overflow-y:auto` let tall content\n     scroll inside it — the sidebar + footer stay put — with NO consumer\n     flex/min-block-size/overflow CSS. The whole inset scrolls (header included);\n     for a fixed header with only the body scrolling, leave this off and compose a\n     nested scroll region inside the inset (see the App shell story). */\n  .ddga-sidebar-inset--scrollable {\n    min-block-size: 0;\n    overflow-y: auto;\n  }\n\n  /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n     Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n     inset card styling is opt-in via a modifier the consumer adds, OR scope by\n     wrapper. Keep it simple: provide the card look on a data hook. */\n  .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n    margin: var(--ddga-space-2);\n    background-color: var(--ddga-color-background);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-sm);\n    overflow: hidden;\n  }\n\n  /* ─── Trigger / Rail ─── */\n\n  .ddga-sidebar__trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n  }\n  .ddga-sidebar__trigger:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__trigger:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  .ddga-sidebar__trigger > svg {\n    inline-size: 1.125rem;\n    block-size: 1.125rem;\n  }\n\n  .ddga-sidebar__rail {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-end: 0;\n    inline-size: 0.75rem;\n    transform: translateX(50%);\n    cursor: col-resize;\n    border: 0;\n    background: transparent;\n  }\n  [dir='rtl'] .ddga-sidebar__rail {\n    transform: translateX(-50%);\n  }\n\n  /* ─── Header / Content / Footer / Separator ─── */\n\n  .ddga-sidebar__header,\n  .ddga-sidebar__footer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-2);\n  }\n\n  .ddga-sidebar__content {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-2);\n    transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .ddga-sidebar__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    margin-inline: var(--ddga-space-2);\n    border: 0;\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Group ─── */\n\n  .ddga-sidebar__group {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    padding: var(--ddga-space-2);\n    transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .ddga-sidebar__group-label {\n    display: flex;\n    align-items: center;\n    block-size: 1.75rem;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    overflow: hidden;\n    transition:\n      block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 150ms ease;\n  }\n  /* Protect Arabic letter joining — no tracking, no uppercasing. */\n  [dir='rtl'] .ddga-sidebar__group-label {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .ddga-sidebar__group-action {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    transition: opacity 150ms ease;\n  }\n  .ddga-sidebar__group-action:hover {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n     Group label collapses its height (and fades); group action + badge fade.\n     The sub-menu list is the only hard hide (it's replaced by the Popover\n     flyout when collapsed, so animating it adds no value). */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n    block-size: 0;\n    margin-block: 0;\n    padding-block: 0;\n    opacity: 0;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n    display: none;\n  }\n\n  /* ─── Menu ─── */\n\n  .ddga-sidebar__menu {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    /* Fill the container's inline size. In `__content`/`__group` (which keep the\n       default `align-items: stretch`) this is a no-op. It matters inside a\n       collapsed `__header`/`__footer`, which switch to `align-items: center` to\n       centre non-menu content: without a definite width the <ul> shrinks to its\n       content width — the icon-centring padding PLUS the still-in-layout\n       `opacity:0` label — so it grows past the icon rail, gets centred, and is\n       clipped by the aside's `overflow: hidden`, leaving only an icon sliver. A\n       definite `100%` keeps the menu at the rail width so its button centres its\n       icon exactly like the main nav. Logical property → RTL-safe. */\n    inline-size: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-sidebar__menu-item {\n    position: relative;\n  }\n\n  .ddga-sidebar__menu-button {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    min-inline-size: 0;\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-2);\n    border: 0;\n    border-radius: var(--ddga-radius-md);\n    background: transparent;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    overflow: hidden;\n    white-space: nowrap;\n    /* background/color ease for hover + active feedback; padding-inline shares\n       the collapse easing so the icon glides to centre in lockstep with width. */\n    transition:\n      background-color 120ms ease,\n      color 120ms ease,\n      padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ddga-sidebar__menu-button > svg {\n    flex: none;\n    inline-size: 1.125rem;\n    block-size: 1.125rem;\n    color: var(--ddga-text-secondary);\n    transition: color 120ms ease;\n  }\n  /* Everything after the leading icon (label, trailing chevron, inline badge)\n     fades on collapse rather than snapping out. */\n  .ddga-sidebar__menu-button > *:not(:first-child) {\n    transition: opacity 150ms ease;\n  }\n  .ddga-sidebar__menu-button:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-sidebar__menu-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n  .ddga-sidebar__menu-button:active {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__menu-button[data-active='true'] {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-sidebar__menu-button[data-active='true'] > svg {\n    color: var(--ddga-color-primary);\n  }\n\n  .ddga-sidebar__menu-button--sm {\n    padding-block: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-xs);\n  }\n  .ddga-sidebar__menu-button--lg {\n    padding-block: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n     that would snap it to the centre of the still-wide box, then swoop inward).\n     Instead the parent content/group padding animates to 0 and the button's own\n     inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n     icon travel is a few px, fully in sync with the width, so no glitch. The\n     label/chevron/badge fade via the base opacity transition above. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n    padding-inline: 0;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n    padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n    .ddga-sidebar__menu-button\n    > *:not(:first-child) {\n    opacity: 0;\n  }\n\n  /* Collapsed rail: header/footer drop their inline padding (above) so a menu\n     button inside them fills the rail and self-centres its icon EXACTLY like the\n     main-nav buttons (consistency — a footer profile button must match the nav).\n     `align-items: center` then centres non-stretching content (a brand/label)\n     and clips overflow so a wide label doesn't spill past the rail edge. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n    align-items: center;\n  }\n\n  /* ─── Menu action / badge / skeleton ─── */\n\n  .ddga-sidebar__menu-action {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: var(--ddga-space-1);\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n  }\n  .ddga-sidebar__menu-action:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-sidebar__menu-action:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  .ddga-sidebar__menu-action[data-show-on-hover] {\n    opacity: 0;\n  }\n  .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n  .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n    opacity: 1;\n  }\n\n  .ddga-sidebar__menu-badge {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: var(--ddga-space-2);\n    transform: translateY(-50%);\n    pointer-events: none;\n    min-inline-size: 1.25rem;\n    block-size: 1.25rem;\n    padding-inline: var(--ddga-space-1);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\n  }\n\n  .ddga-sidebar__menu-skeleton {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    block-size: 2rem;\n    padding-inline: var(--ddga-space-2);\n  }\n  .ddga-sidebar__menu-skeleton-text {\n    flex: 1 1 auto;\n    max-inline-size: 12rem;\n  }\n\n  /* ─── Sub-menu ─── */\n\n  .ddga-sidebar__menu-sub {\n    list-style: none;\n    margin: 0;\n    margin-inline-start: var(--ddga-space-3);\n    padding-inline-start: var(--ddga-space-2);\n    border-inline-start: 1px solid var(--ddga-color-border);\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-sidebar__menu-sub-button {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-sm);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color 120ms ease,\n      color 120ms ease;\n  }\n  .ddga-sidebar__menu-sub-button:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__menu-sub-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n  .ddga-sidebar__menu-sub-button[data-active='true'] {\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-sidebar__menu-sub-button--sm {\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-sidebar {\n      border-color: CanvasText;\n    }\n    .ddga-sidebar__menu-button[data-active='true'],\n    .ddga-sidebar__menu-button:hover {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-sidebar__menu-sub-button[data-active='true'],\n    .ddga-sidebar__menu-sub-button:hover {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-sidebar__separator,\n    .ddga-sidebar__menu-sub {\n      background-color: CanvasText;\n      border-color: CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-sidebar,\n    .ddga-sidebar__content,\n    .ddga-sidebar__group,\n    .ddga-sidebar__group-label,\n    .ddga-sidebar__group-action,\n    .ddga-sidebar__menu-button,\n    .ddga-sidebar__menu-button > svg,\n    .ddga-sidebar__menu-button > *,\n    .ddga-sidebar__menu-badge,\n    .ddga-sidebar__menu-sub-button {\n      transition: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Textarea-specific styles live here. */\n\n  /* ─── Label ─── */\n\n  .ddga-textarea__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-textarea__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Textarea (owns border/focus/state , no adornments) ─── */\n\n  .ddga-textarea {\n    display: block;\n    inline-size: 100%;\n    min-block-size: 4.5rem;\n    padding-block: var(--ddga-space-2);\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    line-height: 1.6;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-textarea::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* Autofill (e.g. address fields): repaint with tokens , see input.css. */\n  .ddga-textarea:-webkit-autofill,\n  .ddga-textarea:-webkit-autofill:hover,\n  .ddga-textarea:-webkit-autofill:focus {\n    -webkit-text-fill-color: var(--ddga-text-primary);\n    -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n    caret-color: var(--ddga-text-primary);\n  }\n\n  /* ─── Sizes (font + inline padding; height is driven by `rows`) ─── */\n\n  .ddga-textarea--sm {\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-textarea--md {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-textarea--lg {\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Resize (vertical only or locked; horizontal breaks layout) ─── */\n\n  .ddga-textarea--resize-vertical {\n    resize: vertical;\n  }\n  .ddga-textarea--resize-none {\n    resize: none;\n  }\n\n  /* ─── Focus ─── */\n\n  .ddga-textarea:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-textarea--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-textarea--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── States ─── */\n\n  .ddga-textarea:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    resize: none;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-textarea:read-only:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-textarea {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-textarea {\n      border: 1px solid CanvasText;\n    }\n    .ddga-textarea:focus-visible {\n      outline: 2px solid Highlight;\n    }\n    .ddga-textarea:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-divider {\n    /* Single hook so consumers can recolor the divider per-instance. */\n    --ddga-divider-color: var(--ddga-color-border);\n    border: 0;\n  }\n\n  /* ─── Plain (no children) ─── */\n\n  .ddga-divider--horizontal {\n    display: block;\n    block-size: 0;\n    inline-size: 100%;\n    /* Use a border so dashed style works naturally without backgrounds. */\n    border-block-start: 1px solid var(--ddga-divider-color);\n  }\n\n  /* `inline-block` so consumers can drop a vertical divider next to inline\n     content (e.g. button rows) without forcing a flex parent. Consumers in a\n     flex/grid row will still pick up the parent's cross-axis sizing. */\n  .ddga-divider--vertical {\n    display: inline-block;\n    inline-size: 0;\n    block-size: 100%;\n    min-block-size: 1em;\n    vertical-align: middle;\n    border-inline-start: 1px solid var(--ddga-divider-color);\n  }\n\n  /* ─── Dashed (overrides solid border style) ─── */\n\n  .ddga-divider--dashed.ddga-divider--horizontal {\n    border-block-start-style: dashed;\n  }\n  .ddga-divider--dashed.ddga-divider--vertical {\n    border-inline-start-style: dashed;\n  }\n\n  /* ─── Labeled (horizontal + children) ─── */\n\n  .ddga-divider--labeled {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-3);\n    /* Override the plain-bar shape: this row is the divider, not a 0px line\n       with a top border. */\n    block-size: auto;\n    border-block-start: 0;\n  }\n\n  .ddga-divider--labeled::before,\n  .ddga-divider--labeled::after {\n    content: '';\n    block-size: 0;\n    border-block-start: 1px solid var(--ddga-divider-color);\n  }\n\n  .ddga-divider--labeled.ddga-divider--dashed::before,\n  .ddga-divider--labeled.ddga-divider--dashed::after {\n    border-block-start-style: dashed;\n  }\n\n  /* Label positions — `start`/`end` are logical so they flip in RTL. */\n  .ddga-divider--label-center::before,\n  .ddga-divider--label-center::after {\n    flex: 1;\n  }\n\n  .ddga-divider--label-start::before {\n    flex: 0 0 var(--ddga-space-6);\n  }\n  .ddga-divider--label-start::after {\n    flex: 1;\n  }\n\n  .ddga-divider--label-end::before {\n    flex: 1;\n  }\n  .ddga-divider--label-end::after {\n    flex: 0 0 var(--ddga-space-6);\n  }\n\n  .ddga-divider__label {\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n    white-space: nowrap;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-divider {\n      border-color: CanvasText;\n    }\n    .ddga-divider--labeled::before,\n    .ddga-divider--labeled::after {\n      border-color: CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Overlay ─── */\n\n  .ddga-drawer__overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgb(0 0 0 / 0.5);\n    /* Same z-stack as Modal (60 overlay / 61 panel). Toast sits at 70 so it\n       can announce above either. */\n    z-index: 60;\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-drawer__overlay[data-state='open'] {\n    animation-name: ddga-drawer-overlay-in;\n  }\n  .ddga-drawer__overlay[data-state='closed'] {\n    animation-name: ddga-drawer-overlay-out;\n  }\n\n  @keyframes ddga-drawer-overlay-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes ddga-drawer-overlay-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Panel base ─── */\n\n  .ddga-drawer {\n    position: fixed;\n    z-index: 61;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    box-shadow: var(--ddga-shadow-lg);\n    overflow: hidden;\n    /* Animation duration applied to the panel; the per-side keyframes flip\n       direction so the slide always emerges from the correct edge. */\n    animation-duration: 220ms;\n    animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);\n  }\n\n  /* ─── Side placements (logical — start/end flip in RTL) ─── */\n\n  .ddga-drawer--start {\n    inset-block: 0;\n    inset-inline-start: 0;\n    border-inline-end: 1px solid var(--ddga-color-border);\n    border-inline-start: 0;\n  }\n  .ddga-drawer--end {\n    inset-block: 0;\n    inset-inline-end: 0;\n    border-inline-start: 1px solid var(--ddga-color-border);\n    border-inline-end: 0;\n  }\n  .ddga-drawer--top {\n    inset-inline: 0;\n    inset-block-start: 0;\n    border-block-end: 1px solid var(--ddga-color-border);\n    border-block-start: 0;\n  }\n  .ddga-drawer--bottom {\n    inset-inline: 0;\n    inset-block-end: 0;\n    border-block-start: 1px solid var(--ddga-color-border);\n    border-block-end: 0;\n  }\n\n  /* ─── Sizes ─── */\n\n  /* For start/end (vertical panel), `size` controls inline-size; for top/bottom\n     (horizontal panel) it controls block-size. The cascade just stacks both\n     declarations and the relevant axis wins per side. */\n  .ddga-drawer--sm.ddga-drawer--start,\n  .ddga-drawer--sm.ddga-drawer--end {\n    inline-size: min(320px, 100vw);\n  }\n  .ddga-drawer--md.ddga-drawer--start,\n  .ddga-drawer--md.ddga-drawer--end {\n    inline-size: min(420px, 100vw);\n  }\n  .ddga-drawer--lg.ddga-drawer--start,\n  .ddga-drawer--lg.ddga-drawer--end {\n    inline-size: min(560px, 100vw);\n  }\n  .ddga-drawer--full.ddga-drawer--start,\n  .ddga-drawer--full.ddga-drawer--end {\n    inline-size: 100vw;\n  }\n\n  .ddga-drawer--sm.ddga-drawer--top,\n  .ddga-drawer--sm.ddga-drawer--bottom {\n    block-size: min(240px, 100vh);\n  }\n  .ddga-drawer--md.ddga-drawer--top,\n  .ddga-drawer--md.ddga-drawer--bottom {\n    block-size: min(360px, 100vh);\n  }\n  .ddga-drawer--lg.ddga-drawer--top,\n  .ddga-drawer--lg.ddga-drawer--bottom {\n    block-size: min(520px, 100vh);\n  }\n  .ddga-drawer--full.ddga-drawer--top,\n  .ddga-drawer--full.ddga-drawer--bottom {\n    block-size: 100vh;\n  }\n\n  /* ─── Enter/exit per side (logical axes so RTL flips automatically) ─── */\n\n  .ddga-drawer--start[data-state='open'] {\n    animation-name: ddga-drawer-slide-in-start;\n  }\n  .ddga-drawer--start[data-state='closed'] {\n    animation-name: ddga-drawer-slide-out-start;\n  }\n  .ddga-drawer--end[data-state='open'] {\n    animation-name: ddga-drawer-slide-in-end;\n  }\n  .ddga-drawer--end[data-state='closed'] {\n    animation-name: ddga-drawer-slide-out-end;\n  }\n  .ddga-drawer--top[data-state='open'] {\n    animation-name: ddga-drawer-slide-in-top;\n  }\n  .ddga-drawer--top[data-state='closed'] {\n    animation-name: ddga-drawer-slide-out-top;\n  }\n  .ddga-drawer--bottom[data-state='open'] {\n    animation-name: ddga-drawer-slide-in-bottom;\n  }\n  .ddga-drawer--bottom[data-state='closed'] {\n    animation-name: ddga-drawer-slide-out-bottom;\n  }\n\n  /* Logical-direction slides: `translate` uses physical axes, so for\n     start/end we branch on `[dir]` to keep the slide direction correct in\n     both LTR and RTL. */\n  @keyframes ddga-drawer-slide-in-start {\n    from {\n      transform: translateX(-100%);\n    }\n    to {\n      transform: translateX(0);\n    }\n  }\n  @keyframes ddga-drawer-slide-out-start {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(-100%);\n    }\n  }\n  @keyframes ddga-drawer-slide-in-end {\n    from {\n      transform: translateX(100%);\n    }\n    to {\n      transform: translateX(0);\n    }\n  }\n  @keyframes ddga-drawer-slide-out-end {\n    from {\n      transform: translateX(0);\n    }\n    to {\n      transform: translateX(100%);\n    }\n  }\n  @keyframes ddga-drawer-slide-in-top {\n    from {\n      transform: translateY(-100%);\n    }\n    to {\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-drawer-slide-out-top {\n    from {\n      transform: translateY(0);\n    }\n    to {\n      transform: translateY(-100%);\n    }\n  }\n  @keyframes ddga-drawer-slide-in-bottom {\n    from {\n      transform: translateY(100%);\n    }\n    to {\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-drawer-slide-out-bottom {\n    from {\n      transform: translateY(0);\n    }\n    to {\n      transform: translateY(100%);\n    }\n  }\n\n  /* RTL: flip the horizontal slides so \"start\" (right edge in RTL) and \"end\"\n     (left edge in RTL) animate from the correct side. */\n  [dir='rtl'] .ddga-drawer--start[data-state='open'] {\n    animation-name: ddga-drawer-slide-in-end;\n  }\n  [dir='rtl'] .ddga-drawer--start[data-state='closed'] {\n    animation-name: ddga-drawer-slide-out-end;\n  }\n  [dir='rtl'] .ddga-drawer--end[data-state='open'] {\n    animation-name: ddga-drawer-slide-in-start;\n  }\n  [dir='rtl'] .ddga-drawer--end[data-state='closed'] {\n    animation-name: ddga-drawer-slide-out-start;\n  }\n\n  /* ─── Header / Body / Footer ─── */\n\n  .ddga-drawer__header {\n    flex-shrink: 0;\n    padding: var(--ddga-space-4);\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-drawer__body {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    padding: var(--ddga-space-4);\n  }\n\n  .ddga-drawer__footer {\n    flex-shrink: 0;\n    display: flex;\n    flex-direction: row;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-4);\n    border-block-start: 1px solid var(--ddga-color-border);\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-drawer__title {\n    margin: 0;\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.3;\n    color: var(--ddga-color-foreground);\n  }\n\n  .ddga-drawer__description {\n    margin: var(--ddga-space-1) 0 0;\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Corner close button ─── */\n\n  .ddga-drawer__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-3);\n    inset-inline-end: var(--ddga-space-3);\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-md);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    font: inherit;\n  }\n  .ddga-drawer__close:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-drawer__close:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  .ddga-drawer__close > svg {\n    inline-size: 1.125em;\n    block-size: 1.125em;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-drawer,\n    .ddga-drawer__overlay {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-drawer {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n","*,\n*::before,\n*::after {\n  box-sizing: border-box;\n  margin: 0;\n  padding: 0;\n}\n\nbody {\n  font-family: var(--ddga-font-ar);\n  color: var(--ddga-color-foreground);\n  background-color: var(--ddga-color-background);\n  line-height: 1.6;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n\n/* Block-level SVGs: removes the inline baseline gap so icons sit centered\n   inside flex controls (buttons, input adornments). Standard reset. */\nsvg {\n  display: block;\n  vertical-align: middle;\n}\n\n/* Visually-hidden utility: removes content from the visual layout while\n   keeping it in the accessibility tree (screen-reader-only text). Use for\n   action cues on icon-only or label-only controls (e.g. Table sort buttons). */\n.ddga-sr-only {\n  position: absolute;\n  inline-size: 1px;\n  block-size: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  clip-path: inset(50%);\n  white-space: nowrap;\n  border: 0;\n}\n\n/* Shared RTL utility: horizontally mirror a directional glyph (chevrons,\n   arrows) in right-to-left layouts. Opt-in per icon via the `ddga-icon-flip`\n   class — components apply it only to icons whose geometry encodes direction\n   (Button/Link start/end icons). Lives here, not in a component sheet, because\n   it's cross-component (used by Button, Link, …). */\n[dir='rtl'] .ddga-icon-flip {\n  transform: scaleX(-1);\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Switch-specific styles live here. */\n\n  /* ─── Row (track + label, inline) ─── */\n\n  .ddga-switch-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Track (Radix Root , reset the button, then style) ─── */\n\n  .ddga-switch {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n    padding: 0;\n    border: 1px solid transparent;\n    border-radius: 999px;\n    background-color: var(--ddga-color-input);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* Track dimensions and travel distance. Travel is encoded as a per-size\n     custom property so the thumb rule below is size-agnostic. */\n  .ddga-switch--md {\n    block-size: 22px;\n    inline-size: 38px;\n    --ddga-switch-thumb-travel: 16px;\n  }\n  .ddga-switch--sm {\n    block-size: 18px;\n    inline-size: 30px;\n    --ddga-switch-thumb-travel: 12px;\n  }\n\n  /* ─── Checked fill ─── */\n\n  .ddga-switch[data-state='checked'] {\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-switch:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-switch--error {\n    background-color: var(--ddga-color-background);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error[data-state='checked'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-switch--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-switch:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-switch-row:has(.ddga-switch:disabled) .ddga-switch__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Thumb (Radix Thumb , the moving circle) ─── */\n\n  .ddga-switch__thumb {\n    display: block;\n    block-size: calc(100% - 4px);\n    aspect-ratio: 1;\n    margin-inline-start: 2px;\n    border-radius: 999px;\n    background-color: var(--ddga-color-background);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    transition: translate 150ms ease;\n    translate: 0 0;\n    will-change: translate;\n  }\n  .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: var(--ddga-switch-thumb-travel) 0;\n  }\n  /* RTL: the thumb's resting position is on the right (logical start\n     flips), so checked travels in the negative direction. The ancestor\n     `[dir=\"rtl\"]` is set on DgaProvider; using attribute selector instead\n     of `:dir()` for broader browser support (the theming pass set the\n     Safari floor at 16.2; `:dir()` lands in 16.4). */\n  [dir='rtl'] .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n    translate: calc(var(--ddga-switch-thumb-travel) * -1) 0;\n  }\n\n  /* Dark mode: the default thumb color (--ddga-color-background, near-white\n     in light mode) flips to a very dark gray-900 , darker than the off-state\n     track (--ddga-color-input = gray-700) , and the thumb disappears.\n     Override locally with a near-white so the puck reads as a raised\n     surface in both modes. Kept in this file (not dark.css) because dark.css\n     is reserved for semantic token remapping; this is a per-component fix. */\n  [data-theme='dark'] .ddga-switch__thumb {\n    background-color: var(--ddga-gray-100);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-switch__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n  .ddga-switch__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-switch,\n    .ddga-switch__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-switch {\n      border: 1px solid CanvasText;\n      background-color: Canvas;\n    }\n    .ddga-switch[data-state='checked'] {\n      background-color: Highlight;\n    }\n    .ddga-switch__thumb {\n      background-color: CanvasText;\n      box-shadow: none;\n    }\n    .ddga-switch[data-state='checked'] .ddga-switch__thumb {\n      background-color: HighlightText;\n    }\n    .ddga-switch:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-switch:disabled {\n      border-color: GrayText;\n    }\n  }\n}\n","/* Dark mode , DGA-aligned using neutral gray scale. */\n[data-theme='dark'] {\n  color-scheme: dark;\n\n  /* ─── Surface / Layout (Gray 900-based) ─── */\n  --ddga-color-background: #111927;\n  --ddga-color-foreground: #f3f4f6;\n  --ddga-color-muted: #1f2a37;\n  --ddga-color-muted-foreground: #9da4ae;\n  --ddga-color-border: #384250;\n  --ddga-color-card: #1f2a37;\n  --ddga-color-card-foreground: #f3f4f6;\n  --ddga-color-input: #384250;\n\n  /* ─── Primary (SA Green , slightly lighter for dark bg) ─── */\n  --ddga-color-primary: #54c08a;\n  --ddga-color-primary-hover: #88d8ad;\n  --ddga-color-primary-active: #25935f;\n  --ddga-color-primary-foreground: #0d121c;\n\n  /* ─── Secondary ─── */\n  --ddga-color-secondary: #1f2a37;\n  --ddga-color-secondary-hover: #384250;\n  --ddga-color-secondary-foreground: #f3f4f6;\n\n  /* ─── Destructive ─── */\n  --ddga-color-destructive: #f97066;\n  --ddga-color-destructive-hover: #f04438;\n  --ddga-color-destructive-foreground: #0d121c;\n\n  /* ─── Semantic , lighter shades for dark bg legibility ─── */\n  --ddga-color-error: #f97066;\n  --ddga-color-error-hover: #f04438;\n  --ddga-color-error-foreground: #0d121c;\n  --ddga-color-success: #47cd89;\n  --ddga-color-success-hover: #17b26a;\n  --ddga-color-success-foreground: #0d121c;\n  --ddga-color-warning: #fdb022;\n  --ddga-color-warning-hover: #f79009;\n  --ddga-color-warning-foreground: #0d121c;\n  --ddga-color-info: #53b1fd;\n  --ddga-color-info-hover: #2e90fa;\n  --ddga-color-info-foreground: #0d121c;\n\n  /* ─── Focus ring ─── */\n  --ddga-color-ring: #54c08a;\n\n  /* ─── Text ─── */\n  --ddga-text-primary: #ffffff;\n  --ddga-text-secondary: rgba(255, 255, 255, 0.7);\n  --ddga-text-tertiary: rgba(255, 255, 255, 0.6);\n  --ddga-text-placeholder: #6c737f;\n\n  /* ─── Shadows , stronger for dark backgrounds ─── */\n  --ddga-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3);\n  --ddga-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.4);\n  --ddga-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4);\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Rating-specific styles live here. Each star stacks\n     an empty base star and a clipped filled overlay; the overlay width drives\n     full / half / empty. Logical inset keeps the half-fill correct in RTL. */\n\n  /* ─── Label ─── */\n\n  .ddga-rating__label {\n    display: block;\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  /* ─── Root ─── */\n\n  .ddga-rating {\n    /* Consumers can recolor the filled stars by overriding this var. */\n    --ddga-rating-color: var(--ddga-gold-500);\n    --ddga-rating-empty: var(--ddga-color-border);\n\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    color: var(--ddga-rating-empty);\n    inline-size: fit-content;\n  }\n\n  .ddga-rating--sm {\n    font-size: 1rem;\n  }\n  .ddga-rating--md {\n    font-size: 1.5rem;\n  }\n  .ddga-rating--lg {\n    font-size: 2rem;\n  }\n\n  /* Focus ring on the slider root. */\n  .ddga-rating[role='slider']:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  .ddga-rating[data-disabled] {\n    opacity: 0.5;\n  }\n\n  /* Error: tint the empty stars so an unrated required field reads as invalid. */\n  .ddga-rating--error {\n    --ddga-rating-empty: var(--ddga-color-error);\n  }\n\n  .ddga-rating[role='slider']:not([data-disabled]) {\n    cursor: pointer;\n  }\n\n  /* ─── Star (base = empty, overlay = filled) ─── */\n\n  .ddga-rating__star {\n    position: relative;\n    display: inline-flex;\n    line-height: 0;\n  }\n\n  .ddga-rating__star-bg {\n    display: block;\n    color: var(--ddga-rating-empty);\n  }\n\n  /* Clipped overlay pinned to the logical start so it reveals the leading\n     portion of the star (flips automatically in RTL via inset-inline-start). */\n  .ddga-rating__star-fill {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-start: 0;\n    inline-size: 0;\n    overflow: hidden;\n    line-height: 0;\n    color: var(--ddga-rating-color);\n  }\n\n  .ddga-rating__star[data-fill='half'] .ddga-rating__star-fill {\n    inline-size: 50%;\n  }\n  .ddga-rating__star[data-fill='full'] .ddga-rating__star-fill {\n    inline-size: 100%;\n  }\n\n  .ddga-rating__star-fg {\n    display: block;\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-rating__star-bg {\n      color: CanvasText;\n    }\n    .ddga-rating__star-fill {\n      color: Highlight;\n    }\n    .ddga-rating[role='slider']:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Standalone Toggle and ToggleGroup items share one visual language. The\n     base look is applied to both; group items additionally join into a\n     segmented control. Pressed state comes from Radix's [data-state='on']. */\n\n  .ddga-toggle,\n  .ddga-toggle-group__item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-primary);\n    font: inherit;\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1;\n    cursor: pointer;\n    user-select: none;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Button) ─── */\n\n  .ddga-toggle--sm,\n  .ddga-toggle-group--sm .ddga-toggle-group__item {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-toggle--md,\n  .ddga-toggle-group--md .ddga-toggle-group__item {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-toggle--lg,\n  .ddga-toggle-group--lg .ddga-toggle-group__item {\n    block-size: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Hover ─── */\n\n  .ddga-toggle:hover:not(:disabled),\n  .ddga-toggle-group__item:hover:not(:disabled) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Pressed (on) ─── */\n\n  .ddga-toggle[data-state='on'],\n  .ddga-toggle-group__item[data-state='on'] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-toggle[data-state='on']:hover:not(:disabled),\n  .ddga-toggle-group__item[data-state='on']:hover:not(:disabled) {\n    background-color: var(--ddga-color-primary-hover);\n  }\n\n  /* ─── Outline variant ─── */\n\n  .ddga-toggle--outline,\n  .ddga-toggle-group--outline .ddga-toggle-group__item {\n    border-color: var(--ddga-color-input);\n  }\n\n  /* ─── Focus ─── */\n\n  .ddga-toggle:focus-visible,\n  .ddga-toggle-group__item:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 1px;\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-toggle:disabled,\n  .ddga-toggle-group__item:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  /* ─── Group: segmented control layout ─── */\n\n  .ddga-toggle-group {\n    display: inline-flex;\n    align-items: center;\n  }\n\n  /* Default variant: small gap between independent buttons. */\n  .ddga-toggle-group--default {\n    gap: var(--ddga-space-1);\n  }\n\n  /* Outline variant: items join into one segmented bar (shared borders,\n     rounded outer corners only). Logical radii flip correctly in RTL. */\n  .ddga-toggle-group--outline .ddga-toggle-group__item {\n    border-radius: 0;\n    margin-inline-start: -1px;\n  }\n  .ddga-toggle-group--outline .ddga-toggle-group__item:first-child {\n    margin-inline-start: 0;\n    border-start-start-radius: var(--ddga-radius-sm);\n    border-end-start-radius: var(--ddga-radius-sm);\n  }\n  .ddga-toggle-group--outline .ddga-toggle-group__item:last-child {\n    border-start-end-radius: var(--ddga-radius-sm);\n    border-end-end-radius: var(--ddga-radius-sm);\n  }\n  /* Raise the focused/pressed item so its full border is visible over the\n     overlapping neighbor. */\n  .ddga-toggle-group--outline .ddga-toggle-group__item:focus-visible,\n  .ddga-toggle-group--outline .ddga-toggle-group__item[data-state='on'] {\n    position: relative;\n    z-index: 1;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-toggle,\n    .ddga-toggle-group__item {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-toggle[data-state='on'],\n    .ddga-toggle-group__item[data-state='on'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-toggle:focus-visible,\n    .ddga-toggle-group__item:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Checkbox-specific styles live here. */\n\n  /* ─── Row (box + label, inline) ─── */\n\n  .ddga-checkbox-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Box (Radix Root , reset the button, then style) ─── */\n\n  .ddga-checkbox {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    padding: 0;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-primary-foreground);\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-checkbox--md {\n    block-size: 18px;\n    inline-size: 18px;\n    font-size: 14px;\n  }\n  .ddga-checkbox--sm {\n    block-size: 16px;\n    inline-size: 16px;\n    font-size: 12px;\n  }\n\n  /* ─── Checked / indeterminate fill ─── */\n\n  .ddga-checkbox[data-state='checked'],\n  .ddga-checkbox[data-state='indeterminate'] {\n    background-color: var(--ddga-color-primary);\n    border-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Focus (slightly thicker ring , small hit target) ─── */\n\n  .ddga-checkbox:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-checkbox--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error[data-state='checked'],\n  .ddga-checkbox--error[data-state='indeterminate'] {\n    background-color: var(--ddga-color-error);\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-checkbox--error:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-checkbox:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-checkbox-row:has(.ddga-checkbox:disabled) .ddga-checkbox__label {\n    cursor: not-allowed;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Indicator + icons (one shows per Root data-state) ─── */\n\n  .ddga-checkbox__indicator {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n  .ddga-checkbox__check,\n  .ddga-checkbox__minus {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n  .ddga-checkbox[data-state='checked'] .ddga-checkbox__minus {\n    display: none;\n  }\n  .ddga-checkbox[data-state='indeterminate'] .ddga-checkbox__check {\n    display: none;\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-checkbox__label {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    cursor: pointer;\n  }\n  .ddga-checkbox__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-checkbox {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-checkbox {\n      border: 1px solid CanvasText;\n    }\n    .ddga-checkbox[data-state='checked'],\n    .ddga-checkbox[data-state='indeterminate'] {\n      background-color: CanvasText;\n    }\n    .ddga-checkbox__indicator {\n      color: Canvas;\n    }\n    .ddga-checkbox:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-checkbox:disabled {\n      border-color: GrayText;\n      color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Root ─── */\n\n  .ddga-avatar {\n    --ddga-avatar-size: 40px;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    inline-size: var(--ddga-avatar-size);\n    block-size: var(--ddga-avatar-size);\n    /* Don't clip the status dot — it's positioned half-outside the root. */\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-secondary);\n    /* Font sizing tracks the avatar size so fallback initials scale naturally. */\n    font-size: calc(var(--ddga-avatar-size) * 0.4);\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1;\n    vertical-align: middle;\n  }\n\n  /* ─── Sizes (drive both the box + the fallback font via the var) ─── */\n\n  .ddga-avatar--xs {\n    --ddga-avatar-size: 24px;\n  }\n  .ddga-avatar--sm {\n    --ddga-avatar-size: 32px;\n  }\n  .ddga-avatar--md {\n    --ddga-avatar-size: 40px;\n  }\n  .ddga-avatar--lg {\n    --ddga-avatar-size: 48px;\n  }\n  .ddga-avatar--xl {\n    --ddga-avatar-size: 64px;\n  }\n\n  /* ─── Shapes ─── */\n\n  .ddga-avatar--circle {\n    border-radius: var(--ddga-radius-full);\n  }\n\n  .ddga-avatar--square {\n    border-radius: var(--ddga-radius-md);\n  }\n\n  /* ─── Image / Fallback (clip to the root's shape) ─── */\n\n  .ddga-avatar__image,\n  .ddga-avatar__fallback {\n    inline-size: 100%;\n    block-size: 100%;\n    border-radius: inherit;\n  }\n\n  .ddga-avatar__image {\n    object-fit: cover;\n  }\n\n  .ddga-avatar__fallback {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    background-color: inherit;\n    color: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    text-transform: uppercase;\n  }\n\n  /* Tonal color schemes — useful for distinguishing avatars by team/role/\n     status in chat & team UIs. Each pair uses the same -100/-700-800 tonal\n     scale as Badge subtle variants, so the family reads consistently. */\n  .ddga-avatar__fallback--default {\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-700);\n  }\n  .ddga-avatar__fallback--primary {\n    background-color: var(--ddga-sa-100);\n    color: var(--ddga-sa-800);\n  }\n  .ddga-avatar__fallback--secondary {\n    background-color: var(--ddga-gray-200);\n    color: var(--ddga-gray-800);\n  }\n  .ddga-avatar__fallback--success {\n    background-color: var(--ddga-success-100);\n    color: var(--ddga-success-700);\n  }\n  .ddga-avatar__fallback--warning {\n    background-color: var(--ddga-warning-100);\n    color: var(--ddga-warning-700);\n  }\n  .ddga-avatar__fallback--destructive {\n    background-color: var(--ddga-error-100);\n    color: var(--ddga-error-700);\n  }\n  .ddga-avatar__fallback--info {\n    background-color: var(--ddga-info-100);\n    color: var(--ddga-info-700);\n  }\n\n  /* ─── Status indicator (bottom-end corner, RTL-aware via logical props) ─── */\n\n  .ddga-avatar__status {\n    position: absolute;\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    inline-size: calc(var(--ddga-avatar-size) * 0.25);\n    block-size: calc(var(--ddga-avatar-size) * 0.25);\n    min-inline-size: 8px;\n    min-block-size: 8px;\n    border-radius: var(--ddga-radius-full);\n    /* Cuts a \"ring\" out of the avatar so the dot reads as separate. */\n    box-shadow: 0 0 0 2px var(--ddga-color-background);\n  }\n\n  .ddga-avatar__status--online {\n    background-color: var(--ddga-color-success);\n  }\n  .ddga-avatar__status--busy {\n    background-color: var(--ddga-color-destructive);\n  }\n  .ddga-avatar__status--away {\n    background-color: var(--ddga-color-warning);\n  }\n  .ddga-avatar__status--offline {\n    background-color: var(--ddga-gray-400);\n  }\n\n  /* Square avatars: tuck the status into the corner instead of overhanging,\n     because a square corner doesn't disguise the overhang the way a circle does. */\n  .ddga-avatar--square .ddga-avatar__status {\n    inset-block-end: 2px;\n    inset-inline-end: 2px;\n  }\n\n  /* ─── Group ─── */\n\n  .ddga-avatar-group {\n    display: inline-flex;\n    align-items: center;\n  }\n  .ddga-avatar-group > .ddga-avatar {\n    /* Each subsequent avatar tucks under the previous one. Logical margin\n       so stacking flips correctly in RTL. */\n    margin-inline-start: calc(var(--ddga-avatar-size) * -0.25);\n    /* Ring around each so they read as separate even when overlapping. */\n    box-shadow: 0 0 0 2px var(--ddga-color-background);\n  }\n  .ddga-avatar-group > .ddga-avatar:first-child {\n    margin-inline-start: 0;\n  }\n\n  /* ─── Dark mode adjustments ─── */\n  /* The fallback schemes paint raw -100 tints with -700/-800 text — light\n     chips that stay legible but don't adapt to a dark page on their own. Flip\n     each to a dark -800/-900 surface with a light -100/-200 foreground\n     (mirrors alert.css). */\n\n  [data-theme='dark'] .ddga-avatar__fallback--default {\n    background-color: var(--ddga-gray-800);\n    color: var(--ddga-gray-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--primary {\n    background-color: var(--ddga-sa-900);\n    color: var(--ddga-sa-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--secondary {\n    background-color: var(--ddga-gray-700);\n    color: var(--ddga-gray-100);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--success {\n    background-color: var(--ddga-success-900);\n    color: var(--ddga-success-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--warning {\n    background-color: var(--ddga-warning-900);\n    color: var(--ddga-warning-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--destructive {\n    background-color: var(--ddga-error-900);\n    color: var(--ddga-error-200);\n  }\n  [data-theme='dark'] .ddga-avatar__fallback--info {\n    background-color: var(--ddga-info-900);\n    color: var(--ddga-info-200);\n  }\n  [data-theme='dark'] .ddga-avatar__status--offline {\n    background-color: var(--ddga-gray-500);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-avatar {\n      border: 1px solid CanvasText;\n    }\n    .ddga-avatar__status {\n      border: 1px solid CanvasText;\n    }\n    .ddga-avatar-group > .ddga-avatar {\n      outline: 2px solid CanvasText;\n      outline-offset: -1px;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Label + required ─── */\n\n  .ddga-combobox__label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-color-foreground);\n    margin-block-end: var(--ddga-space-2);\n  }\n  .ddga-combobox__required {\n    color: var(--ddga-color-error);\n  }\n\n  /* ─── Trigger (Popover.Trigger as <button>) ─── */\n\n  /* Heights mirror Input/Select so triggers and text inputs line up. */\n  .ddga-combobox-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    font-family: inherit;\n    text-align: start;\n    cursor: pointer;\n    transition:\n      border-color 120ms ease,\n      box-shadow 120ms ease;\n  }\n\n  .ddga-combobox-trigger--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-combobox-trigger--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  .ddga-combobox-trigger:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  .ddga-combobox-trigger:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-combobox-trigger--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-combobox-trigger--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  .ddga-combobox__value {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .ddga-combobox__placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  .ddga-combobox__icon {\n    flex-shrink: 0;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Popover content panel ─── */\n\n  .ddga-combobox-content {\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    overflow: hidden;\n    z-index: 50;\n    /* `inline-size: var(--radix-popover-trigger-width)` set inline so the\n       panel always matches trigger width. min-width fallback for very narrow\n       triggers; the popper var is what wins normally. */\n    min-inline-size: 200px;\n  }\n\n  /* Same in/out animation as DropdownMenu — fast + subtle. */\n  .ddga-combobox-content[data-state='open'] {\n    animation: ddga-combobox-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-combobox-content[data-state='closed'] {\n    animation: ddga-combobox-out 80ms ease-in;\n  }\n  @keyframes ddga-combobox-in {\n    from {\n      opacity: 0;\n      transform: translateY(-2px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-combobox-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── cmdk root + input ─── */\n\n  .ddga-combobox-command {\n    display: flex;\n    flex-direction: column;\n    max-block-size: min(340px, 60vh);\n  }\n\n  .ddga-combobox-input {\n    inline-size: 100%;\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    border: 0;\n    border-block-end: 1px solid var(--ddga-color-border);\n    background-color: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n  }\n  .ddga-combobox-input::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── List + items ─── */\n\n  .ddga-combobox-list {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    padding: var(--ddga-space-1);\n  }\n\n  .ddga-combobox-empty {\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-tertiary);\n    text-align: center;\n  }\n\n  .ddga-combobox-item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-sm);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* cmdk sets data-selected='true' on the actively highlighted item (keyboard\n     or hover) — that's the background below. The chosen value is a distinct\n     concept: the component marks it with data-active='' and shows it via the\n     check icon (not a background), so the highlight and the selection never\n     visually collide. */\n  .ddga-combobox-item[data-selected='true'] {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-combobox-item[data-disabled='true'] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  .ddga-combobox-item__check {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1em;\n    block-size: 1em;\n    flex-shrink: 0;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-combobox-item__check > svg {\n    inline-size: 0.875em;\n    block-size: 0.875em;\n  }\n  .ddga-combobox-item__label {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* ─── Group + Separator ─── */\n\n  .ddga-combobox-group [cmdk-group-heading] {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  /* Protect Arabic cursive joining — drop the tracking when RTL. */\n  [dir='rtl'] .ddga-combobox-group [cmdk-group-heading] {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .ddga-combobox-separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    margin-inline: calc(var(--ddga-space-1) * -1);\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Reduced motion + Forced colors ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-combobox-content[data-state='open'],\n    .ddga-combobox-content[data-state='closed'] {\n      animation: none;\n    }\n  }\n\n  @media (forced-colors: active) {\n    .ddga-combobox-trigger,\n    .ddga-combobox-content {\n      border: 1px solid CanvasText;\n    }\n    .ddga-combobox-trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-combobox-item[data-selected='true'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Shared field primitives , wrapper + helper/error message. Used by\n     Input / Textarea / Checkbox. Component-specific bits (the label and\n     the control itself) stay in each component's CSS. */\n\n  .ddga-field {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-field__message {\n    margin: 0;\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-field__message--helper {\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-field__message--error {\n    color: var(--ddga-color-error);\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Select-specific styles live here. */\n\n  /* ─── Label (above the trigger, matches Input) ─── */\n\n  .ddga-select__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-select__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Trigger (Radix Trigger , the focusable button) ─── */\n\n  .ddga-select-trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    text-align: start;\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (heights match Input) ─── */\n\n  .ddga-select-trigger--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-select-trigger--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Trigger states ─── */\n\n  .ddga-select-trigger:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* Radix sets `data-placeholder` on the trigger when no value is selected. */\n  .ddga-select-trigger[data-placeholder] {\n    color: var(--ddga-text-placeholder);\n  }\n\n  .ddga-select-trigger:disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-select-trigger--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-select-trigger--error:focus-visible {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Chevron (Radix Icon) ─── */\n\n  .ddga-select__icon {\n    flex-shrink: 0;\n    color: var(--ddga-text-tertiary);\n    transition: rotate 150ms ease;\n  }\n  .ddga-select-trigger[data-state='open'] .ddga-select__icon {\n    rotate: 180deg;\n  }\n\n  /* ─── Content (the dropdown panel, rendered in a portal) ─── */\n\n  .ddga-select-content {\n    /* Match trigger width so the panel doesn't visually float wider/narrower\n       than the field. `--radix-select-trigger-width` is exposed by Radix\n       when `position=\"popper\"`. */\n    min-inline-size: var(--radix-select-trigger-width);\n    /* Cap height to viewport so long lists scroll instead of overflowing. */\n    max-block-size: var(--radix-select-content-available-height);\n    z-index: 50;\n    overflow: hidden;\n    background-color: var(--ddga-color-background);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-select-viewport {\n    padding: var(--ddga-space-1);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-select-item {\n    position: relative;\n    display: flex;\n    align-items: center;\n    block-size: 32px;\n    padding-block: var(--ddga-space-2);\n    padding-inline-start: var(--ddga-space-3);\n    /* Reserve room for the trailing checkmark indicator so item text never\n       collides with it when the row is selected. */\n    padding-inline-end: var(--ddga-space-8);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.4;\n    color: var(--ddga-text-primary);\n    cursor: pointer;\n    user-select: none;\n    outline: none;\n  }\n\n  /* Radix sets `data-highlighted` on the keyboard- or pointer-focused item. */\n  .ddga-select-item[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-select-item[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* ─── Item indicator (checkmark on the selected item) ─── */\n\n  .ddga-select-item__indicator {\n    position: absolute;\n    inset-inline-end: var(--ddga-space-2);\n    display: inline-flex;\n    align-items: center;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-select-item__check {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-select-trigger,\n    .ddga-select__icon {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-select-trigger {\n      border: 1px solid CanvasText;\n    }\n    .ddga-select-trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-select-trigger:disabled {\n      color: GrayText;\n      border-color: GrayText;\n    }\n    .ddga-select-content {\n      border: 1px solid CanvasText;\n    }\n    .ddga-select-item[data-highlighted] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-select-item__indicator {\n      color: HighlightText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Styled <a> text-link primitive. Three visual variants on one axis\n     (default / subtle / standalone); the `external` affordance is orthogonal\n     (handled in the React layer + the __icon--external element). Size is NOT\n     a variant   links inherit font-size from surrounding text and scale their\n     icons in `em`. Dark mode needs no overrides (semantic tokens adapt). */\n\n  .ddga-link {\n    color: var(--ddga-color-primary);\n    font-family: inherit;\n    font-size: inherit;\n    border-radius: var(--ddga-radius-sm);\n    text-underline-offset: 2px;\n    cursor: pointer;\n    transition:\n      color 150ms ease,\n      text-decoration-color 150ms ease;\n  }\n\n  .ddga-link:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── default   inline prose link, always underlined ─── */\n  /* Underline is permanent: color alone fails WCAG 1.4.1 for a link sitting\n     inside a block of text. */\n\n  .ddga-link--default {\n    text-decoration: underline;\n  }\n\n  .ddga-link--default:hover {\n    color: var(--ddga-color-primary-hover);\n  }\n\n  .ddga-link--default:active {\n    color: var(--ddga-color-primary-active);\n  }\n\n  /* ─── subtle   chrome link (footers, meta rows), underline on hover ─── */\n\n  .ddga-link--subtle {\n    color: var(--ddga-text-secondary);\n    text-decoration: none;\n  }\n\n  .ddga-link--subtle:hover {\n    color: var(--ddga-color-primary);\n    text-decoration: underline;\n  }\n\n  .ddga-link--subtle:active {\n    color: var(--ddga-color-primary-active);\n  }\n\n  /* ─── standalone   block CTA, icon-friendly ─── */\n\n  .ddga-link--standalone {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    font-weight: 500;\n    text-decoration: none;\n  }\n\n  .ddga-link--standalone:hover {\n    color: var(--ddga-color-primary-hover);\n    text-decoration: underline;\n  }\n\n  .ddga-link--standalone:active {\n    color: var(--ddga-color-primary-active);\n  }\n\n  /* ─── Icons ─── */\n\n  .ddga-link__icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n\n  .ddga-link__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* Inline variants (default/subtle) don't establish a flex gap, so give icons\n     breathing room from the text via logical margins (RTL-safe). standalone\n     uses `gap` and needs none. */\n  .ddga-link--default [data-slot='link-start-icon'],\n  .ddga-link--subtle [data-slot='link-start-icon'] {\n    margin-inline-end: 0.2em;\n    vertical-align: middle;\n  }\n\n  .ddga-link--default [data-slot='link-end-icon'],\n  .ddga-link--default [data-slot='link-external-icon'],\n  .ddga-link--subtle [data-slot='link-end-icon'],\n  .ddga-link--subtle [data-slot='link-external-icon'] {\n    margin-inline-start: 0.2em;\n    vertical-align: middle;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-link {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-link,\n    .ddga-link--default,\n    .ddga-link--subtle,\n    .ddga-link--standalone {\n      color: LinkText;\n    }\n    .ddga-link--default:hover,\n    .ddga-link--subtle:hover,\n    .ddga-link--standalone:hover {\n      color: LinkText;\n    }\n    .ddga-link:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Cross-browser styled scroll container (Radix ScrollArea). The Root clips;\n     the viewport scrolls; custom scrollbars overlay the end edges. Logical\n     properties keep it RTL-correct — Radix moves the vertical scrollbar to the\n     inline-start edge based on `dir`. The consumer sets the bounding size\n     (height / max-height) on the Root; without it nothing scrolls. */\n\n  .ddga-scroll-area {\n    --ddga-scroll-area-size: 0.625rem;\n    --ddga-scroll-area-thumb: var(--ddga-gray-400);\n    --ddga-scroll-area-thumb-hover: var(--ddga-gray-500);\n\n    position: relative;\n    overflow: hidden;\n  }\n\n  .ddga-scroll-area__viewport {\n    block-size: 100%;\n    inline-size: 100%;\n    border-radius: inherit;\n  }\n  .ddga-scroll-area__viewport:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n\n  /* Radix wraps the viewport's children in an inline-styled `display:table` div\n     so a HORIZONTAL scroll area can measure max-content width. In a vertical-only\n     scroll area that wrapper instead expands past the viewport for wide content\n     (e.g. a Table) — and there's no horizontal scrollbar to reach it, so columns\n     get clipped (worst on mobile). For vertical orientation, force the wrapper to\n     block layout: width is constrained to the viewport, and wide children shrink\n     or own their own horizontal overflow (a Table scrolls inside its region).\n     `!important` is required to beat Radix's inline style. Horizontal/both keep\n     the table wrapper so their horizontal scroll still works. */\n  .ddga-scroll-area__viewport--vertical > div {\n    display: block !important;\n  }\n\n  /* ─── Scrollbar ─── */\n\n  .ddga-scroll-area__scrollbar {\n    display: flex;\n    padding: 2px;\n    background: transparent;\n    touch-action: none;\n    user-select: none;\n    transition: opacity 160ms ease;\n  }\n  .ddga-scroll-area__scrollbar[data-orientation='vertical'] {\n    inline-size: var(--ddga-scroll-area-size);\n  }\n  .ddga-scroll-area__scrollbar[data-orientation='horizontal'] {\n    flex-direction: column;\n    block-size: var(--ddga-scroll-area-size);\n  }\n\n  .ddga-scroll-area__thumb {\n    position: relative;\n    flex: 1;\n    background-color: var(--ddga-scroll-area-thumb);\n    border-radius: var(--ddga-radius-full);\n  }\n  /* 44px minimum pointer hit target (Radix-recommended ::before trick). */\n  .ddga-scroll-area__thumb::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    transform: translate(-50%, -50%);\n    min-inline-size: 44px;\n    min-block-size: 44px;\n  }\n  .ddga-scroll-area__thumb:hover {\n    background-color: var(--ddga-scroll-area-thumb-hover);\n  }\n\n  .ddga-scroll-area__corner {\n    background: transparent;\n  }\n\n  /* ─── Dark mode ─── */\n  /* Neutral gray thumbs read too dark on a dark page; use translucent white. */\n  [data-theme='dark'] .ddga-scroll-area {\n    --ddga-scroll-area-thumb: rgb(255 255 255 / 0.2);\n    --ddga-scroll-area-thumb-hover: rgb(255 255 255 / 0.3);\n  }\n\n  /* ─── Forced colors ─── */\n  @media (forced-colors: active) {\n    .ddga-scroll-area__thumb {\n      background-color: CanvasText;\n      border: 1px solid CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-scroll-area__scrollbar {\n      transition: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Semantic <dl>/<dt>/<dd> key–value list. Layout cascades from the root\n     variant to the rows; logical properties keep label/value alignment\n     correct in RTL. */\n\n  .ddga-description-list {\n    /* Term column width in horizontal layout; override per instance. */\n    --ddga-dl-term-width: 12rem;\n\n    margin: 0;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  .ddga-description-list__item {\n    display: flex;\n    gap: var(--ddga-space-2) var(--ddga-space-4);\n    padding-block: var(--ddga-space-2);\n  }\n\n  .ddga-description-list__term {\n    color: var(--ddga-text-secondary);\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1.5;\n  }\n\n  .ddga-description-list__details {\n    margin: 0;\n    color: var(--ddga-text-primary);\n    line-height: 1.5;\n  }\n\n  /* ─── Horizontal: term beside details (review / summary screens) ─── */\n\n  .ddga-description-list--horizontal .ddga-description-list__item {\n    flex-direction: row;\n    align-items: baseline;\n  }\n\n  .ddga-description-list--horizontal .ddga-description-list__term {\n    flex: none;\n    inline-size: var(--ddga-dl-term-width);\n  }\n\n  .ddga-description-list--horizontal .ddga-description-list__details {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n  }\n\n  /* Stack rows on narrow viewports so labels don't crush the values. */\n  @media (max-width: 480px) {\n    .ddga-description-list--horizontal .ddga-description-list__item {\n      flex-direction: column;\n      gap: var(--ddga-space-1);\n    }\n    .ddga-description-list--horizontal .ddga-description-list__term {\n      inline-size: auto;\n    }\n  }\n\n  /* ─── Vertical: term above details ─── */\n\n  .ddga-description-list--vertical .ddga-description-list__item {\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  /* ─── Dividers between rows ─── */\n\n  .ddga-description-list--divided .ddga-description-list__item {\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n  .ddga-description-list--divided .ddga-description-list__item:last-child {\n    border-block-end: 0;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-description-list--divided .ddga-description-list__item {\n      border-block-end-color: CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Visual-only chronological list. Size + orientation live on the root and\n     cascade via custom properties; status lives on each marker. The connector\n     line is CSS-drawn via `::before` on every item except the LAST, running\n     from this item's marker down (vertical) / across (horizontal) through the\n     content and the gap to the next marker. Logical properties handle the RTL\n     flip — no JS, no conditional classes. Marker colours use SOLID semantic\n     tokens (no -50/-100 tints), so dark mode adapts on its own. */\n\n  /* ─── Root (ol) ─── */\n\n  .ddga-timeline {\n    --ddga-timeline-node-size: 1.5rem;\n    --ddga-timeline-dot-size: 0.75rem;\n    --ddga-timeline-gap: var(--ddga-space-5);\n    --ddga-timeline-rail-gap: var(--ddga-space-3);\n\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n  }\n\n  .ddga-timeline--vertical {\n    flex-direction: column;\n    gap: var(--ddga-timeline-gap);\n  }\n\n  .ddga-timeline--horizontal {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: var(--ddga-timeline-gap);\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-timeline--sm {\n    --ddga-timeline-node-size: 1.25rem;\n    --ddga-timeline-dot-size: 0.625rem;\n    --ddga-timeline-gap: var(--ddga-space-4);\n    --ddga-timeline-rail-gap: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-timeline--md {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Item (li) ─── */\n\n  .ddga-timeline__item {\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-timeline-rail-gap);\n  }\n\n  .ddga-timeline--horizontal .ddga-timeline__item {\n    flex: 1;\n    min-inline-size: 0;\n    flex-direction: column;\n  }\n\n  /* ─── Connector line (CSS-drawn, between siblings) ─── */\n\n  .ddga-timeline--vertical .ddga-timeline__item:not(:last-child)::before {\n    content: '';\n    position: absolute;\n    inline-size: 2px;\n    /* Centre on the marker rail. */\n    inset-inline-start: calc(var(--ddga-timeline-node-size) / 2 - 1px);\n    /* From just below this marker down through the content + the gap to the\n       next marker. */\n    inset-block-start: var(--ddga-timeline-node-size);\n    inset-block-end: calc(-1 * var(--ddga-timeline-gap));\n    background-color: var(--ddga-color-border);\n  }\n\n  .ddga-timeline--horizontal .ddga-timeline__item:not(:last-child)::before {\n    content: '';\n    position: absolute;\n    block-size: 2px;\n    /* Centre on the marker rail. */\n    inset-block-start: calc(var(--ddga-timeline-node-size) / 2 - 1px);\n    /* From the inline-end of this marker across the gap to the next marker. */\n    inset-inline-start: var(--ddga-timeline-node-size);\n    inset-inline-end: calc(-1 * var(--ddga-timeline-gap));\n    background-color: var(--ddga-color-border);\n  }\n\n  /* Completed-progress fill: a connector lights up with THIS node's status\n     colour ONLY when the NEXT node is also \"reached\" (non-default — it carries\n     `data-reached`). So completed→completed fills, but completed→pending stays\n     neutral — exactly the Steps progress line. The `:has(+ * > [data-reached])`\n     gate also guarantees a next sibling exists (so the last item never\n     matches, matching the base rule's `:not(:last-child)`). Specificity is\n     (0,3,1) — equal to the base connector rule and ordered AFTER it, so source\n     order wins; the forced-colors override below is later still, so it wins. */\n\n  .ddga-timeline__item:has(> .ddga-timeline__marker--success):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-success);\n  }\n  .ddga-timeline__item:has(> .ddga-timeline__marker--error):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-error);\n  }\n  .ddga-timeline__item:has(> .ddga-timeline__marker--warning):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-warning);\n  }\n  .ddga-timeline__item:has(> .ddga-timeline__marker--info):has(+ * > [data-reached])::before {\n    background-color: var(--ddga-color-info);\n  }\n\n  /* ─── Marker (decorative node) ─── */\n\n  .ddga-timeline__marker {\n    /* Default node colour — overridden per status below. */\n    --ddga-timeline-node-color: var(--ddga-text-tertiary);\n\n    position: relative;\n    z-index: 1;\n    flex-shrink: 0;\n    inline-size: var(--ddga-timeline-node-size);\n    block-size: var(--ddga-timeline-node-size);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* Sizes a custom icon child (1em) relative to the node. */\n    font-size: calc(var(--ddga-timeline-node-size) * 0.8);\n    color: var(--ddga-timeline-node-color);\n  }\n\n  .ddga-timeline__dot {\n    inline-size: var(--ddga-timeline-dot-size);\n    block-size: var(--ddga-timeline-dot-size);\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-timeline-node-color);\n  }\n\n  /* A custom icon child fills the node box. */\n  .ddga-timeline__marker > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-timeline__marker--default {\n    --ddga-timeline-node-color: var(--ddga-text-tertiary);\n  }\n  .ddga-timeline__marker--success {\n    --ddga-timeline-node-color: var(--ddga-color-success);\n  }\n  .ddga-timeline__marker--error {\n    --ddga-timeline-node-color: var(--ddga-color-error);\n  }\n  .ddga-timeline__marker--warning {\n    --ddga-timeline-node-color: var(--ddga-color-warning);\n  }\n  .ddga-timeline__marker--info {\n    --ddga-timeline-node-color: var(--ddga-color-info);\n  }\n\n  /* ─── Content ─── */\n\n  .ddga-timeline__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    min-inline-size: 0;\n    /* Nudge the text block to sit optically centred against the node. */\n    padding-block-start: calc((var(--ddga-timeline-node-size) - 1.4em) / 2);\n  }\n\n  .ddga-timeline__time {\n    display: block;\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-xs);\n    line-height: 1.4;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-timeline__title {\n    display: block;\n    color: var(--ddga-text-primary);\n    font-weight: 600;\n    line-height: 1.4;\n  }\n\n  .ddga-timeline__description {\n    display: block;\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-xs);\n    line-height: 1.4;\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-timeline__dot {\n      background-color: CanvasText;\n    }\n    .ddga-timeline__marker > svg {\n      color: CanvasText;\n    }\n    .ddga-timeline .ddga-timeline__item:not(:last-child)::before {\n      background-color: CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Content ─── */\n\n  .ddga-tooltip {\n    /* Solid dark surface against light bgs; readable in both themes via\n       semantic foreground/background swap in dark.css. */\n    background-color: var(--ddga-text-primary);\n    color: var(--ddga-color-background);\n    border-radius: var(--ddga-radius-sm);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    line-height: 1.4;\n    /* Keep the tooltip from getting absurdly wide for long content. */\n    max-inline-size: 260px;\n    /* Ensure word-wrap works for long words / URLs. */\n    overflow-wrap: anywhere;\n    /* Above modals are higher; this sits above page content. */\n    z-index: 50;\n    /* Radix sets animation data attrs on state changes — use them for a\n       light fade so the tooltip doesn't pop in jarringly. */\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-tooltip--sm {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-tooltip--md {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Arrow ─── */\n\n  .ddga-tooltip__arrow {\n    fill: var(--ddga-text-primary);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-tooltip[data-state='delayed-open'],\n  .ddga-tooltip[data-state='instant-open'] {\n    animation-name: ddga-tooltip-in;\n  }\n  .ddga-tooltip[data-state='closed'] {\n    animation-name: ddga-tooltip-out;\n  }\n\n  @keyframes ddga-tooltip-in {\n    from {\n      opacity: 0;\n      transform: translateY(2px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-tooltip-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tooltip {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* Dark mode: --ddga-text-primary remaps to a light tone and\n     --ddga-color-background goes dark, so the tooltip becomes a light pill\n     on a dark surface — still high contrast, just inverted. No override\n     needed. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tooltip {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Shared calendar dropdown chrome — consumed by both DatePicker and\n     DateRangePicker. The field/trigger surface stays per-component\n     (date-picker.css / date-range-picker.css); everything inside the popover\n     (the floating panel, the Gregorian↔Hijri toggle, and the month grid) is\n     identical regardless of single-date vs range selection, so it lives here. */\n\n  /* ─── Popover (the floating panel) ─── */\n\n  /* react-aria's useOverlayPosition sets `max-height` inline on the popover\n     based on the space available between the trigger and the viewport edge\n     (minus `containerPadding`). We pair that with `overflow: auto` on the inner\n     Dialog so when the calendar can't fit (short iframes, dual-calendar mode),\n     the content scrolls instead of being clipped. `overflow: hidden` stays on\n     the popover so the rounded corners crop animation bleed. */\n  .ddga-calendar-popover {\n    z-index: 50;\n    display: flex;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    overflow: hidden;\n  }\n\n  /* react-aria emits data-entering / data-exiting during transitions. */\n  .ddga-calendar-popover[data-entering] {\n    animation: ddga-calendar-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-calendar-popover[data-exiting] {\n    animation: ddga-calendar-out 80ms ease-in;\n  }\n  @keyframes ddga-calendar-in {\n    from {\n      opacity: 0;\n      transform: translateY(-2px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-calendar-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Dialog (panel padding + scroll container) ─── */\n\n  /* `max-block-size: 100%` + `overflow: auto` make the Dialog the scroll\n     container inside the popover. The Popover constrains height via its\n     react-aria-set `max-height`; the Dialog respects that bound and scrolls\n     internally when the calendar grid + toggle exceed it. `min-block-size: 0`\n     is the flex-child trick that lets the scroll container actually shrink. */\n  .ddga-calendar-dialog {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    max-block-size: 100%;\n    padding: var(--ddga-space-3);\n    outline: none;\n    overflow: auto;\n    box-sizing: border-box;\n  }\n\n  /* ─── Calendar-system toggle (Gregorian ↔ Hijri) ─── */\n\n  .ddga-calendar-toggle {\n    display: inline-flex;\n    inline-size: 100%;\n    margin-block-end: var(--ddga-space-3);\n    padding: 2px;\n    background-color: var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-md);\n  }\n  .ddga-calendar-toggle__button {\n    flex: 1 1 0;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border: 0;\n    border-radius: calc(var(--ddga-radius-md) - 2px);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    font: inherit;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    cursor: pointer;\n    outline: none;\n    transition:\n      background-color 120ms ease,\n      color 120ms ease;\n  }\n  .ddga-calendar-toggle__button[data-active] {\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    box-shadow: 0 1px 2px rgb(0 0 0 / 0.08);\n  }\n  .ddga-calendar-toggle__button:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Calendar grid ─── */\n\n  .ddga-calendar {\n    inline-size: min(100%, 280px);\n  }\n\n  .ddga-calendar__header {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-2);\n    margin-block-end: var(--ddga-space-2);\n  }\n\n  .ddga-calendar__nav {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    outline: none;\n  }\n  .ddga-calendar__nav:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-calendar__nav[data-focus-visible] {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-calendar__nav[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n  }\n  /* RTL chevron direction is handled in the picker components by swapping the\n     icon components themselves (PrevChevron / NextChevron based on `dir`) — more\n     robust than a CSS scaleX flip because it doesn't rely on the popover portal\n     correctly inheriting the `dir` attribute from the DgaProvider root. */\n\n  .ddga-calendar__heading {\n    flex: 1 1 auto;\n    margin: 0;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    text-align: center;\n    color: var(--ddga-color-foreground);\n  }\n\n  /* ─── Month + Year dropdowns (CalendarNavHeader) ─── */\n\n  /* Native <select>s give free keyboard support + native focus rings +\n     screen-reader announcements; styling stays minimal so the platform's\n     wheel/typeahead stays untouched. */\n  .ddga-calendar__nav-selects {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    flex: 1 1 auto;\n    min-inline-size: 0;\n  }\n\n  .ddga-calendar__select {\n    appearance: none;\n    -webkit-appearance: none;\n    background-color: transparent;\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    margin: 0;\n    font: inherit;\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-color-foreground);\n    cursor: pointer;\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    text-align: center;\n    text-align-last: center;\n    max-inline-size: 100%;\n  }\n  .ddga-calendar__select:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-calendar__select:focus-visible {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n  /* Native option elements pick up the OS theme; can't fully style them, but\n     ensure the popup respects RTL on supporting browsers. */\n  .ddga-calendar__select option {\n    color: CanvasText;\n    background-color: Canvas;\n  }\n  .ddga-calendar__year-select {\n    /* The year string is short (4 digits) — give it just enough width. */\n    min-inline-size: 4.5ch;\n  }\n\n  .ddga-calendar__grid {\n    inline-size: 100%;\n    border-collapse: collapse;\n  }\n\n  .ddga-calendar__weekday {\n    padding-block: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-text-tertiary);\n    text-align: center;\n  }\n\n  /* CalendarCell renders the inner role=\"button\" div; react-aria wires the\n     <td>. Style the inner element so the focus ring + selected background stay\n     inside the cell footprint. Flex column so a secondary day number (when\n     `showSecondaryCalendar` is on) stacks neatly under the primary. */\n  .ddga-calendar__cell {\n    display: inline-flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    padding: 0;\n    text-align: center;\n    font-size: var(--ddga-font-size-sm);\n    font-variant-numeric: tabular-nums;\n    line-height: 1;\n    color: var(--ddga-color-foreground);\n    border-radius: var(--ddga-radius-sm);\n    cursor: pointer;\n    outline: none;\n    user-select: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Today ring — visible whenever a cell represents \"today\" in the displayed\n     calendar (react-aria emits data-today). Inset to stay inside the cell;\n     selected wins by re-painting the background. */\n  .ddga-calendar__cell[data-today]:not([data-selected]) {\n    box-shadow: inset 0 0 0 1.5px var(--ddga-color-primary);\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n\n  /* Dual-calendar layout: the primary day stays at the normal size; the\n     secondary (alternate calendar) renders below at ~70% size in the muted text\n     color. Selected state inherits the contrast color for both. */\n  .ddga-calendar__cell-primary {\n    font-size: inherit;\n    line-height: 1;\n  }\n  .ddga-calendar__cell-secondary {\n    margin-block-start: 1px;\n    font-size: 0.625rem;\n    line-height: 1;\n    color: var(--ddga-text-tertiary);\n  }\n  .ddga-calendar__cell[data-selected] .ddga-calendar__cell-secondary {\n    color: inherit;\n    opacity: 0.85;\n  }\n  .ddga-calendar__cell[data-hovered]:not([data-disabled]):not([data-selected]) {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-calendar__cell[data-focus-visible] {\n    box-shadow: inset 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-calendar__cell[data-selected] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-calendar__cell[data-disabled],\n  .ddga-calendar__cell[data-unavailable] {\n    color: var(--ddga-text-tertiary);\n    cursor: not-allowed;\n  }\n  /* Outside-month cells are fully clickable in the single picker — selecting\n     one navigates the visible month. Use a softer text color (no opacity\n     reduction) so they read as low-emphasis-but-active peers, not disabled. */\n  .ddga-calendar__cell[data-outside-month] {\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-calendar-toggle__button {\n      transition: none;\n    }\n    .ddga-calendar-popover[data-entering],\n    .ddga-calendar-popover[data-exiting] {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-calendar-popover {\n      border: 1px solid CanvasText;\n    }\n    .ddga-calendar__cell[data-selected] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-calendar__cell[data-focus-visible] {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-calendar-toggle__button[data-active] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-1);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    font-family: inherit;\n    line-height: 1.6;\n    cursor: pointer;\n    text-decoration: none;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease,\n      opacity 150ms ease;\n  }\n\n  /* ─── Variant: Primary ─── */\n\n  .ddga-button--primary {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-button--primary:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-primary-hover);\n  }\n\n  /* ─── Variant: Secondary ─── */\n\n  .ddga-button--secondary {\n    background-color: var(--ddga-color-secondary);\n    color: var(--ddga-color-secondary-foreground);\n  }\n  .ddga-button--secondary:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-secondary-hover);\n  }\n\n  /* ─── Variant: Outline ─── */\n\n  .ddga-button--outline {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n    border-color: var(--ddga-color-border);\n  }\n  .ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Variant: Ghost ─── */\n\n  .ddga-button--ghost {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Variant: Destructive (filled, primary destructive) ─── */\n\n  .ddga-button--destructive {\n    background-color: var(--ddga-color-destructive);\n    color: var(--ddga-color-destructive-foreground);\n  }\n  .ddga-button--destructive:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-color-destructive-hover);\n  }\n\n  /* ─── Variant: Destructive Outline (transparent + error border + error text) ─── */\n\n  .ddga-button--destructive-outline {\n    background-color: transparent;\n    color: var(--ddga-color-destructive);\n    border-color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* ─── Variant: Destructive Subtle (light tonal bg + error text) ─── */\n\n  .ddga-button--destructive-subtle {\n    background-color: var(--ddga-error-50);\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-100);\n  }\n\n  /* ─── Variant: Destructive Ghost (transparent + error text, hover tints) ─── */\n\n  .ddga-button--destructive-ghost {\n    background-color: transparent;\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-button--sm {\n    height: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-button--md {\n    height: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-button--lg {\n    height: 40px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-lg);\n  }\n  .ddga-button--icon {\n    height: 40px;\n    width: 40px;\n    padding: 0;\n    font-size: var(--ddga-font-size-base);\n  }\n  /* Compact square icon button , fits inside form fields as an adornment\n     (sm/md field interiors) without overflowing the field border. */\n  .ddga-button--icon-sm {\n    height: 28px;\n    width: 28px;\n    padding: 0;\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Full Width ─── */\n\n  .ddga-button--full-width {\n    inline-size: 100%;\n    flex: 1 0 100%;\n  }\n\n  /* ─── Inverted (for use on colored / dark backgrounds) ─── */\n  /*\n   * Only inverts the non-filled families — `outline`, `ghost`, and\n   * destructive's outline/ghost forms. Filled variants (`primary`,\n   * `secondary`, `destructive`, `destructive-subtle`) already carry their\n   * own background contrast and keep their normal palette. Hover uses a\n   * low-opacity white overlay so it works against any background tint.\n   */\n  .ddga-button--inverted.ddga-button--outline,\n  .ddga-button--inverted.ddga-button--ghost {\n    color: #ffffff;\n    background-color: transparent;\n  }\n  .ddga-button--inverted.ddga-button--outline {\n    border-color: rgba(255, 255, 255, 0.4);\n  }\n  .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']),\n  .ddga-button--inverted.ddga-button--ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgba(255, 255, 255, 0.12);\n  }\n  .ddga-button--inverted.ddga-button--outline:hover:not(:disabled):not([aria-disabled='true']) {\n    border-color: rgba(255, 255, 255, 0.6);\n  }\n  .ddga-button--inverted.ddga-button--destructive-outline,\n  .ddga-button--inverted.ddga-button--destructive-ghost {\n    /* On colored bgs, keep destructive readable by using a light error\n       tint rather than full white (which would lose the destructive cue). */\n    color: var(--ddga-error-200);\n  }\n  .ddga-button--inverted.ddga-button--destructive-outline {\n    border-color: var(--ddga-error-300);\n  }\n  .ddga-button--inverted.ddga-button--destructive-outline:hover:not(:disabled):not(\n      [aria-disabled='true']\n    ),\n  .ddga-button--inverted.ddga-button--destructive-ghost:hover:not(:disabled):not(\n      [aria-disabled='true']\n    ) {\n    background-color: rgba(255, 255, 255, 0.08);\n  }\n\n  /* ─── FAB (floating action button) ─── */\n  /*\n   * Orthogonal modifier: fully-rounded + elevated. Composes with any color\n   * `variant` and with `size` — `size=\"icon\"` yields a circle, a text size an\n   * extended pill. Positioning is the consumer's job (see the story recipe).\n   * Shadow is static (no hover lift) to keep the base transition intact; the\n   * color variant's own :hover handles the interaction feedback.\n   */\n  .ddga-button--fab {\n    border-radius: var(--ddga-radius-full);\n    box-shadow: var(--ddga-shadow-lg);\n  }\n  /* The base `.ddga-button:focus-visible` (defined later in this file) sets\n     box-shadow for the ring, which would clobber the elevation. Use a\n     two-class selector so this wins on specificity regardless of source order\n     (matches the `.ddga-button--inverted.ddga-button--outline` idiom), and\n     render the ring AND the drop shadow together. */\n  .ddga-button.ddga-button--fab:focus-visible {\n    border-color: var(--ddga-color-ring);\n    box-shadow:\n      0 0 0 2px var(--ddga-color-ring),\n      var(--ddga-shadow-lg);\n  }\n\n  /* ─── Loading ─── */\n\n  .ddga-button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  /* ─── Child elements ─── */\n\n  .ddga-button__text {\n    /* Truncate long text */\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  .ddga-button__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n  }\n\n  /* Block-level SVGs (see reset) must not be flex-stretched on the cross\n     axis , that distorts a square icon into a tall one. Pin them square\n     to their intrinsic size and keep them centered. */\n  .ddga-button svg {\n    flex-shrink: 0;\n    align-self: center;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-button {\n      transition: none;\n    }\n  }\n\n  /* ─── States ─── */\n\n  /* Match `:disabled` (native button) and `[aria-disabled='true']` (asChild\n     mode rendered as <a> or similar where native `disabled` has no effect). */\n  .ddga-button:disabled,\n  .ddga-button[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .ddga-button:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* RTL directional icon flip (`.ddga-icon-flip`) is a shared utility — it\n     now lives in reset.css (ddga-base) so Link and other components can reuse\n     it without depending on this sheet. */\n\n  /* ─── Dark mode adjustments ─── */\n  /* The destructive subtle/outline/ghost families fill from raw --ddga-error-50/\n     -100 tints, which stay light in dark mode (the raw scale isn't theme-flipped).\n     Recolor to translucent error tints so they read as dark-surface chips —\n     mirrors alert.css. Text uses the semantic --ddga-color-destructive, which\n     already adapts. */\n  [data-theme='dark'] .ddga-button--destructive-subtle {\n    background-color: rgb(217 45 32 / 0.18);\n  }\n  [data-theme='dark']\n    .ddga-button--destructive-subtle:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgb(217 45 32 / 0.28);\n  }\n  [data-theme='dark']\n    .ddga-button--destructive-outline:hover:not(:disabled):not([aria-disabled='true']),\n  [data-theme='dark']\n    .ddga-button--destructive-ghost:hover:not(:disabled):not([aria-disabled='true']) {\n    background-color: rgb(217 45 32 / 0.18);\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-button {\n      border: 1px solid ButtonText;\n    }\n    .ddga-button:focus-visible {\n      outline: 2px solid Highlight;\n    }\n    .ddga-button:disabled,\n    .ddga-button[aria-disabled='true'] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-card {\n    /* Single hook drives all section padding. Variants below redefine it. */\n    --ddga-card-padding: var(--ddga-space-5);\n    display: flex;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border-radius: var(--ddga-radius-md);\n    overflow: hidden;\n    transition:\n      box-shadow 150ms ease,\n      transform 150ms ease,\n      border-color 150ms ease;\n  }\n\n  /* ─── Orientation ─── */\n\n  .ddga-card--vertical {\n    flex-direction: column;\n  }\n  .ddga-card--horizontal {\n    flex-direction: row;\n    /* RTL: row reverses to keep the image at the start (logical) — handled\n       implicitly by flexbox honoring the writing direction. */\n  }\n\n  /* ─── Variants ─── */\n\n  .ddga-card--default {\n    border: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-card--outline {\n    background-color: transparent;\n    border: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-card--elevated {\n    border: 1px solid transparent;\n    box-shadow: var(--ddga-shadow-md);\n  }\n\n  .ddga-card--filled {\n    background-color: var(--ddga-color-muted);\n    border: 1px solid transparent;\n  }\n\n  /* SA Green gradient hero — uses primary palette gradient from dga-preferences\n     §5.4 (SA 600 → SA 500 @ 90°). Text + descriptions invert to white. */\n  .ddga-card--gradient {\n    background-image: linear-gradient(90deg, var(--ddga-sa-600), var(--ddga-sa-500));\n    color: var(--ddga-color-primary-foreground);\n    border: 1px solid transparent;\n  }\n  .ddga-card--gradient .ddga-card__title,\n  .ddga-card--gradient .ddga-card__description {\n    color: inherit;\n  }\n  .ddga-card--gradient .ddga-card__description {\n    /* Softer than the title against the gradient. */\n    opacity: 0.85;\n  }\n  .ddga-card--gradient .ddga-card__footer {\n    border-block-start-color: rgb(255 255 255 / 0.15);\n  }\n\n  /* Bare card — no bg, no border, no shadow. For grouped lists where the\n     parent provides separation, or when stacking content blocks without\n     visual chrome. */\n  .ddga-card--ghost {\n    background-color: transparent;\n    border: 1px solid transparent;\n  }\n  .ddga-card--ghost .ddga-card__footer {\n    border-block-start-color: transparent;\n  }\n\n  /* ─── Padding scale ─── */\n\n  .ddga-card--padding-sm {\n    --ddga-card-padding: var(--ddga-space-3);\n  }\n  .ddga-card--padding-md {\n    --ddga-card-padding: var(--ddga-space-5);\n  }\n  .ddga-card--padding-lg {\n    --ddga-card-padding: var(--ddga-space-6);\n  }\n\n  /* ─── Interactive (hover lift + focus ring; pairs with asChild for clickable cards) ─── */\n\n  .ddga-card--interactive {\n    cursor: pointer;\n    /* No transform on touch — avoids the sticky-hover look on mobile. */\n  }\n  .ddga-card--interactive:hover {\n    border-color: var(--ddga-color-input);\n    box-shadow: var(--ddga-shadow-md);\n  }\n  .ddga-card--interactive.ddga-card--elevated:hover,\n  .ddga-card--interactive.ddga-card--gradient:hover {\n    box-shadow: var(--ddga-shadow-lg);\n  }\n  .ddga-card--interactive:focus-visible {\n    outline: none;\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Image ─── */\n\n  .ddga-card__image {\n    display: block;\n    inline-size: 100%;\n    block-size: auto;\n    object-fit: cover;\n    aspect-ratio: var(--ddga-card-image-aspect, 16 / 9);\n  }\n\n  /* In horizontal cards, the image hugs the start edge and stretches the full\n     card height. Cap its width so the content side still has room to breathe. */\n  .ddga-card--horizontal > .ddga-card__image {\n    aspect-ratio: auto;\n    inline-size: 40%;\n    max-inline-size: 240px;\n    block-size: auto;\n    align-self: stretch;\n    flex-shrink: 0;\n  }\n\n  /* The content side of a horizontal card needs to take the remaining width\n     and keep its own column layout. */\n  .ddga-card--horizontal > :not(.ddga-card__image) {\n    flex: 1 1 auto;\n  }\n  .ddga-card--horizontal > .ddga-card__header + .ddga-card__content {\n    padding-block-start: 0;\n  }\n\n  /* ─── Sections (all share --ddga-card-padding) ─── */\n\n  .ddga-card__header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-card-padding);\n  }\n\n  .ddga-card__title {\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-card__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-card__content {\n    padding: var(--ddga-card-padding);\n  }\n\n  /* Header immediately followed by content: collapse the redundant top padding\n     so the two sections read as one continuous block. */\n  .ddga-card__header + .ddga-card__content {\n    padding-block-start: 0;\n  }\n\n  .ddga-card__footer {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-card-padding);\n    border-block-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* No top border when there's no preceding section to separate from. */\n  .ddga-card__footer:first-child {\n    border-block-start: 0;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-card {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    /* box-shadow + gradient are dropped in forced-colors — keep a visible\n       boundary and a real focus outline so cards and their focus state survive. */\n    .ddga-card {\n      border: 1px solid CanvasText;\n    }\n    .ddga-card--interactive:focus-visible {\n      outline: 2px solid CanvasText;\n      outline-offset: 2px;\n    }\n  }\n\n  /* ─── Dark mode adjustments ─── */\n\n  [data-theme='dark'] .ddga-card--gradient {\n    background-image: linear-gradient(90deg, var(--ddga-sa-700), var(--ddga-sa-600));\n  }\n}\n","@layer ddga-components {\n  /* SearchBox is the Input control with `type=\"search\"`; it reuses input.css\n     for the box, sizing, focus ring, adornments and the clear button. The\n     `.ddga-search-box` class lands on the Input control element, so the inner\n     field is a descendant. Only the search-specific overrides live here. */\n\n  /* Suppress the browser's native search affordances — we render our own\n     magnifier (leading) and clear button (trailing). Without this, WebKit\n     paints a second × inside the field. */\n  .ddga-search-box .ddga-input__field::-webkit-search-cancel-button,\n  .ddga-search-box .ddga-input__field::-webkit-search-decoration,\n  .ddga-search-box .ddga-input__field::-webkit-search-results-button,\n  .ddga-search-box .ddga-input__field::-webkit-search-results-decoration {\n    appearance: none;\n    display: none;\n  }\n}\n","@layer ddga-components {\n  /* ─── Bar (Menubar.Root) ─── */\n\n  .ddga-menubar {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-1);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    font-family: inherit;\n  }\n\n  /* ─── Bar trigger (File / Edit / View…) ─── */\n\n  /* Shared base across variants. A transparent 1px border is reserved so the\n     `outline` variant only flips border-color (no layout shift), and `default`\n     stays visually borderless. */\n  .ddga-menubar__trigger {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-base);\n    font-weight: var(--ddga-font-weight-medium);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n    transition:\n      background-color 120ms ease,\n      border-color 120ms ease,\n      color 120ms ease;\n  }\n\n  .ddga-menubar__trigger:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  .ddga-menubar__trigger[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  /* ── Variant: default (flat menu-bar idiom) ── */\n\n  /* SA-green underline indicator for the open menu — reserved (transparent) at\n     rest so nothing shifts, animated in on open. Mirrors the Tabs active-tab\n     treatment (same --ddga-color-primary accent). */\n  .ddga-menubar__trigger--default::after {\n    content: '';\n    position: absolute;\n    inset-inline: var(--ddga-space-2);\n    inset-block-end: 2px;\n    block-size: 2px;\n    border-radius: var(--ddga-radius-full);\n    background-color: transparent;\n    transition: background-color 120ms ease;\n  }\n\n  /* Radix sets data-highlighted on hover / keyboard focus → soft surface. */\n  .ddga-menubar__trigger--default[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* data-state=open: this trigger's menu is showing → on-brand accent (green\n     label + underline), kept on the muted surface so the row reads active. */\n  .ddga-menubar__trigger--default[data-state='open'] {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-primary);\n  }\n  .ddga-menubar__trigger--default[data-state='open']::after {\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ── Variant: outline (bordered button-style chip) ── */\n\n  .ddga-menubar__trigger--outline {\n    border-color: var(--ddga-color-border);\n  }\n\n  /* Hover / keyboard focus → soft surface fill (border stays neutral). */\n  .ddga-menubar__trigger--outline[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* Open menu → SA-green border + green label (the border is the accent here,\n     so no underline for this variant). */\n  .ddga-menubar__trigger--outline[data-state='open'] {\n    border-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary);\n  }\n\n  /* ─── Panel (Content / SubContent) ─── */\n\n  .ddga-menubar-menu {\n    min-inline-size: 192px;\n    max-inline-size: 320px;\n    padding: var(--ddga-space-1);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    z-index: 50;\n    outline: none;\n  }\n\n  /* Enter/exit animations follow Radix data-state. Keep them subtle so menu\n     surfaces feel instantaneous (this isn't a Modal). */\n  .ddga-menubar-menu[data-state='open'] {\n    animation: ddga-menubar-menu-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-menubar-menu[data-state='closed'] {\n    animation: ddga-menubar-menu-out 80ms ease-in;\n  }\n\n  @keyframes ddga-menubar-menu-in {\n    from {\n      opacity: 0;\n      transform: translateY(-2px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-menubar-menu-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-menubar-menu--sm {\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-menubar-menu--md {\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Item (and CheckboxItem/RadioItem/SubTrigger share the base) ─── */\n\n  .ddga-menubar-menu__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  /* Radix sets data-highlighted on the actively focused/hovered item — that's\n     our only \"focus ring\" since the menu manages focus internally. */\n  .ddga-menubar-menu__item[data-highlighted] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-menubar-menu__item[data-disabled] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  /* Destructive: red text and a red-tinted hover. Tracks the destructive\n     family the rest of the system uses. */\n  .ddga-menubar-menu__item[data-destructive] {\n    color: var(--ddga-color-destructive);\n  }\n  .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n    background-color: var(--ddga-error-50);\n  }\n\n  /* Inline pieces inside the row. */\n  .ddga-menubar-menu__label {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    white-space: nowrap;\n    overflow: hidden;\n    text-overflow: ellipsis;\n  }\n\n  .ddga-menubar-menu__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1em;\n    block-size: 1em;\n    flex-shrink: 0;\n    color: var(--ddga-text-secondary);\n  }\n  .ddga-menubar-menu__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-menubar-menu__shortcut {\n    margin-inline-start: auto;\n    font-size: var(--ddga-font-size-xs);\n    color: var(--ddga-text-tertiary);\n    letter-spacing: 0.04em;\n  }\n\n  /* ─── Indicator slot (Checkbox/Radio) ─── */\n\n  .ddga-menubar-menu__item--checkable {\n    /* Reserve the indicator column even when unchecked so labels align. */\n    padding-inline-start: calc(var(--ddga-space-2) + 1.25em);\n    position: relative;\n  }\n\n  .ddga-menubar-menu__indicator {\n    position: absolute;\n    inset-inline-start: var(--ddga-space-2);\n    inset-block-start: 50%;\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-color-primary);\n  }\n  .ddga-menubar-menu__indicator-icon {\n    inline-size: 0.875em;\n    block-size: 0.875em;\n  }\n  .ddga-menubar-menu__radio-dot {\n    /* span is inline by default → inline-size/block-size are ignored. Force a\n       sized inline-block so the filled circle actually renders. */\n    display: inline-block;\n    inline-size: 0.5em;\n    block-size: 0.5em;\n    border-radius: var(--ddga-radius-full);\n    background-color: currentColor;\n  }\n\n  /* ─── Submenu ─── */\n\n  .ddga-menubar-menu__item--sub[data-state='open'] {\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-menubar-menu__sub-chevron {\n    margin-inline-start: auto;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* Flip the sub-menu chevron in RTL — it should always point inline-end-ward. */\n  [dir='rtl'] .ddga-menubar-menu__sub-chevron {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Label + Separator ─── */\n\n  .ddga-menubar-menu__group-label {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  /* Protect Arabic cursive joining — drop the tracking + casing when RTL\n     (mirrors dropdown-menu.css / command.css). The shortcut hint is usually\n     Latin but reset it too for parity. */\n  [dir='rtl'] .ddga-menubar-menu__group-label {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n  [dir='rtl'] .ddga-menubar-menu__shortcut {\n    letter-spacing: normal;\n  }\n\n  .ddga-menubar-menu__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    margin-inline: calc(var(--ddga-space-1) * -1);\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Dark mode ─── */\n\n  /* The destructive-hover background uses the raw --ddga-error-50 tint\n     (near-white), which doesn't adapt in dark mode. Override with a translucent\n     red + a light-red foreground for contrast (mirrors dropdown-menu.css). */\n  [data-theme='dark'] .ddga-menubar-menu__item[data-destructive][data-highlighted] {\n    background-color: rgb(217 45 32 / 0.24);\n    color: var(--ddga-error-200, #fecdca);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-menubar {\n      border: 1px solid CanvasText;\n    }\n    .ddga-menubar__trigger[data-highlighted],\n    .ddga-menubar__trigger[data-state='open'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-menubar__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n    .ddga-menubar-menu {\n      border: 1px solid CanvasText;\n    }\n    .ddga-menubar-menu__item[data-highlighted] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-menubar-menu__separator {\n      background-color: CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-menubar__trigger,\n    .ddga-menubar__trigger--default::after {\n      transition: none;\n    }\n    .ddga-menubar-menu[data-state='open'],\n    .ddga-menubar-menu[data-state='closed'] {\n      animation: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Centered placeholder for empty / no-results / error / success states.\n     Tints flow through custom properties so dark mode + per-instance\n     recoloring are one-line overrides. Logical properties keep it RTL-correct;\n     the layout is centered so it is largely direction-agnostic anyway. */\n\n  .ddga-empty-state {\n    --ddga-empty-state-media-size: 3.5rem;\n    --ddga-empty-state-icon-size: 1.75rem;\n    /* Neutral tint shared by the default + search variants. */\n    --ddga-empty-state-tint-bg: var(--ddga-gray-100);\n    --ddga-empty-state-tint-fg: var(--ddga-gray-600);\n\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    text-align: center;\n    gap: var(--ddga-space-4);\n    max-inline-size: 28rem;\n    margin-inline: auto;\n    padding-block: var(--ddga-space-8);\n    padding-inline: var(--ddga-space-4);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-empty-state__media {\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: var(--ddga-empty-state-media-size);\n    block-size: var(--ddga-empty-state-media-size);\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-empty-state-tint-bg);\n    color: var(--ddga-empty-state-tint-fg);\n  }\n\n  .ddga-empty-state__media > svg {\n    inline-size: var(--ddga-empty-state-icon-size);\n    block-size: var(--ddga-empty-state-icon-size);\n  }\n\n  .ddga-empty-state__title {\n    margin: 0;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n  }\n\n  .ddga-empty-state__description {\n    margin: 0;\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-base);\n    line-height: 1.5;\n  }\n\n  .ddga-empty-state__actions {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-3);\n    margin-block-start: var(--ddga-space-2);\n  }\n\n  /* ─── Variant tints ─── */\n  /* default + search inherit the neutral gray tint from the base. */\n\n  .ddga-empty-state--error {\n    --ddga-empty-state-tint-bg: var(--ddga-error-50);\n    --ddga-empty-state-tint-fg: var(--ddga-error-600);\n  }\n\n  .ddga-empty-state--success {\n    --ddga-empty-state-tint-bg: var(--ddga-success-50);\n    --ddga-empty-state-tint-fg: var(--ddga-success-600);\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-empty-state--sm {\n    --ddga-empty-state-media-size: 2.75rem;\n    --ddga-empty-state-icon-size: 1.375rem;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-6);\n  }\n  .ddga-empty-state--sm .ddga-empty-state__title {\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-empty-state--sm .ddga-empty-state__description {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  .ddga-empty-state--lg {\n    --ddga-empty-state-media-size: 4.5rem;\n    --ddga-empty-state-icon-size: 2.25rem;\n    gap: var(--ddga-space-5);\n    padding-block: var(--ddga-space-12);\n  }\n  .ddga-empty-state--lg .ddga-empty-state__title {\n    font-size: var(--ddga-font-size-xl);\n  }\n\n  /* ─── Dark mode ─── */\n  /* The -50/-100 tints read too light on a dark page; use translucent fills\n     and lighter -200 foregrounds (mirrors alert.css). */\n\n  [data-theme='dark'] .ddga-empty-state {\n    --ddga-empty-state-tint-bg: rgb(255 255 255 / 0.08);\n    --ddga-empty-state-tint-fg: var(--ddga-gray-300, #d2d6db);\n  }\n  [data-theme='dark'] .ddga-empty-state--error {\n    --ddga-empty-state-tint-bg: rgb(217 45 32 / 0.18);\n    --ddga-empty-state-tint-fg: var(--ddga-error-200, #fecdca);\n  }\n  [data-theme='dark'] .ddga-empty-state--success {\n    --ddga-empty-state-tint-bg: rgb(7 148 85 / 0.18);\n    --ddga-empty-state-tint-fg: var(--ddga-success-200, #abefc6);\n  }\n\n  /* ─── Forced colors ─── */\n  @media (forced-colors: active) {\n    .ddga-empty-state__media {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Root (cmdk container) ─── */\n  /*\n   * Base look is the standalone inline box (bordered card). Inside\n   * CommandDialog the `--dialog` modifier drops the border/bg because the\n   * dialog shell owns the surface.\n   */\n  .ddga-command {\n    display: flex;\n    flex-direction: column;\n    inline-size: 100%;\n    min-block-size: 0;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    overflow: hidden;\n  }\n\n  .ddga-command--dialog {\n    border: 0;\n    border-radius: 0;\n    background-color: transparent;\n  }\n\n  /* ─── Search input row ─── */\n\n  .ddga-command__input-wrapper {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-command__search-icon {\n    flex-shrink: 0;\n    inline-size: 1rem;\n    block-size: 1rem;\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-command__input {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    padding-block: var(--ddga-space-3);\n    border: 0;\n    background-color: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n  }\n  .ddga-command__input::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── List + states ─── */\n\n  .ddga-command__list {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    /* Cap height for the inline surface; the dialog overrides via its own\n       max-block-size. cmdk scroll-into-view drives against this container. */\n    max-block-size: min(360px, 60vh);\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: var(--ddga-space-1);\n    scroll-padding-block: var(--ddga-space-1);\n  }\n\n  .ddga-command__empty {\n    padding-block: var(--ddga-space-5);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-tertiary);\n    text-align: center;\n  }\n\n  /* ─── Group + separator ─── */\n\n  .ddga-command__group [cmdk-group-heading] {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  /* Protect Arabic cursive joining — drop the tracking when RTL. */\n  [dir='rtl'] .ddga-command__group [cmdk-group-heading] {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .ddga-command__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-command__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-sm);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  /* cmdk highlights the active item (keyboard / hover) via data-selected. */\n  .ddga-command__item[data-selected='true'] {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-command__item[data-disabled='true'] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  .ddga-command__item-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    inline-size: 1rem;\n    block-size: 1rem;\n    color: var(--ddga-text-secondary);\n  }\n  .ddga-command__item-icon > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n\n  .ddga-command__item-label {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Shortcut hint sits at the inline-end (logical → RTL-correct). */\n  .ddga-command__item-shortcut {\n    margin-inline-start: auto;\n    flex-shrink: 0;\n    font-size: var(--ddga-font-size-xs);\n    letter-spacing: 0.05em;\n    color: var(--ddga-text-tertiary);\n  }\n  [dir='rtl'] .ddga-command__item-shortcut {\n    letter-spacing: normal;\n  }\n\n  /* ─── Dialog shell (Radix Dialog) ─── */\n\n  .ddga-command__overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgb(0 0 0 / 0.5);\n    z-index: 60;\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-command-dialog {\n    /* Spotlight-style: horizontally centered, anchored near the top. Physical\n       left + translateX for centering (direction-agnostic; pairing\n       inset-inline-start with a physical translate would shift it off-screen\n       in RTL — same rationale as Modal). */\n    position: fixed;\n    inset-block-start: 12vh;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 61;\n    display: flex;\n    flex-direction: column;\n    inline-size: min(var(--ddga-command-dialog-width, 640px), calc(100vw - 2rem));\n    max-block-size: min(70vh, 480px);\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-lg);\n    overflow: hidden;\n    animation-duration: 180ms;\n    animation-timing-function: ease;\n  }\n  /* The inner cmdk root + its list fill the dialog and scroll inside it. */\n  .ddga-command-dialog .ddga-command {\n    min-block-size: 0;\n  }\n  .ddga-command-dialog .ddga-command__list {\n    max-block-size: none;\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-command__overlay[data-state='open'] {\n    animation-name: ddga-command-overlay-in;\n  }\n  .ddga-command__overlay[data-state='closed'] {\n    animation-name: ddga-command-overlay-out;\n  }\n  .ddga-command-dialog[data-state='open'] {\n    animation-name: ddga-command-dialog-in;\n  }\n  .ddga-command-dialog[data-state='closed'] {\n    animation-name: ddga-command-dialog-out;\n  }\n\n  @keyframes ddga-command-overlay-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes ddga-command-overlay-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes ddga-command-dialog-in {\n    from {\n      opacity: 0;\n      transform: translateX(-50%) translateY(-8px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-command-dialog-out {\n    from {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(-50%) translateY(-8px) scale(0.98);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-command__overlay,\n    .ddga-command-dialog {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-command,\n    .ddga-command-dialog {\n      border: 1px solid CanvasText;\n    }\n    .ddga-command__item[data-selected='true'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-command__separator {\n      background-color: CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-alert {\n    /* Each variant overrides --accent (icon + border) and --bg / --fg below.\n       Centralizing this in vars makes per-instance recoloring trivial. */\n    --ddga-alert-accent: var(--ddga-color-info);\n    --ddga-alert-bg: var(--ddga-info-100);\n    --ddga-alert-fg: var(--ddga-info-700);\n\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-alert-bg);\n    color: var(--ddga-alert-fg);\n    font-family: inherit;\n    line-height: 1.5;\n  }\n\n  /* ─── Variants (tonal, matching Badge subtle family) ─── */\n\n  .ddga-alert--info {\n    --ddga-alert-accent: var(--ddga-color-info);\n    --ddga-alert-bg: var(--ddga-info-100);\n    --ddga-alert-fg: var(--ddga-info-700);\n  }\n\n  .ddga-alert--success {\n    --ddga-alert-accent: var(--ddga-color-success);\n    --ddga-alert-bg: var(--ddga-success-100);\n    --ddga-alert-fg: var(--ddga-success-700);\n  }\n\n  .ddga-alert--warning {\n    --ddga-alert-accent: var(--ddga-color-warning);\n    --ddga-alert-bg: var(--ddga-warning-100);\n    --ddga-alert-fg: var(--ddga-warning-700);\n  }\n\n  .ddga-alert--destructive {\n    --ddga-alert-accent: var(--ddga-color-destructive);\n    --ddga-alert-bg: var(--ddga-error-100);\n    --ddga-alert-fg: var(--ddga-error-700);\n  }\n\n  /* ─── Icon ─── */\n\n  .ddga-alert__icon {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.25em;\n    block-size: 1.25em;\n    color: var(--ddga-alert-accent);\n    /* Nudge the icon to optical-center with the title. */\n    margin-block-start: 0.125em;\n  }\n\n  .ddga-alert__icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n\n  /* ─── Body (title + description container) ─── */\n\n  .ddga-alert__body {\n    flex: 1;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-alert__title {\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: inherit;\n  }\n\n  .ddga-alert__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: inherit;\n    /* Slight dimming for hierarchy under the title; works for both light + dark. */\n    opacity: 0.9;\n  }\n\n  /* ─── Close button ─── */\n\n  .ddga-alert__close {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    opacity: 0.7;\n    transition:\n      opacity 150ms ease,\n      background-color 150ms ease;\n    /* Optical-center with the title. */\n    margin-block-start: 0.125em;\n  }\n  .ddga-alert__close > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n  .ddga-alert__close:hover {\n    opacity: 1;\n    background-color: rgb(0 0 0 / 0.06);\n  }\n  .ddga-alert__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-alert-accent);\n    opacity: 1;\n  }\n\n  /* ─── Dark mode adjustments ─── */\n  /* The -100 tonal pairs are quite light against a dark page bg — bump the\n     destructive/warning shades and recolor the foreground for legibility. */\n\n  [data-theme='dark'] .ddga-alert--info {\n    --ddga-alert-bg: rgb(21 112 239 / 0.16);\n    --ddga-alert-fg: var(--ddga-info-200, #b2ddff);\n  }\n  [data-theme='dark'] .ddga-alert--success {\n    --ddga-alert-bg: rgb(7 148 85 / 0.18);\n    --ddga-alert-fg: var(--ddga-success-200, #abefc6);\n  }\n  [data-theme='dark'] .ddga-alert--warning {\n    --ddga-alert-bg: rgb(220 104 3 / 0.18);\n    --ddga-alert-fg: var(--ddga-warning-200, #fedf89);\n  }\n  [data-theme='dark'] .ddga-alert--destructive {\n    --ddga-alert-bg: rgb(217 45 32 / 0.18);\n    --ddga-alert-fg: var(--ddga-error-200, #fecdca);\n  }\n  [data-theme='dark'] .ddga-alert__close:hover {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-alert {\n      border-color: CanvasText;\n    }\n    .ddga-alert__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* DatePicker field/trigger chrome only. The calendar dropdown (popover,\n     toggle, month grid) is shared with DateRangePicker — see calendar.css.\n     Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n     see field.css. */\n\n  /* ─── Label + required ─── */\n\n  .ddga-date-picker__label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-date-picker__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Trigger (react-aria Group, hosts segments + icon button) ─── */\n\n  /* Heights match Input/Select so DatePicker triggers line up in a form row.\n     The Group itself is the border/focus container — react-aria emits\n     data-focus-within when any segment or the icon button has focus. */\n  .ddga-date-picker-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    text-align: start;\n    transition:\n      border-color 120ms ease,\n      box-shadow 120ms ease;\n  }\n\n  .ddga-date-picker-trigger--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-date-picker-trigger--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  .ddga-date-picker-trigger[data-focus-within] {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  .ddga-date-picker-trigger[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-date-picker-trigger--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-date-picker-trigger--error[data-focus-within] {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── DateInput + Segments ─── */\n\n  .ddga-date-picker__input {\n    display: inline-flex;\n    align-items: center;\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    /* Force LTR segment direction even in RTL UI so dates always read\n       day-month-year left-to-right (matches react-aria's recommended UX for\n       numeric date entry — keeps mental model stable across locales). */\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-date-picker__segment {\n    padding-block: 1px;\n    padding-inline: 1px;\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-color-foreground);\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n\n  .ddga-date-picker__segment[data-placeholder] {\n    color: var(--ddga-text-placeholder);\n  }\n\n  .ddga-date-picker__segment[data-focused] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  /* Non-editable segments (literal separators like \"/\" or \"-\") shouldn't show\n     the focus background even if Tab lands on them — react-aria marks them with\n     data-type=\"literal\". */\n  .ddga-date-picker__segment[data-type='literal'] {\n    padding-inline: 0;\n    color: var(--ddga-text-tertiary);\n  }\n  .ddga-date-picker__segment[data-type='literal'][data-focused] {\n    background-color: transparent;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Calendar icon button (popover trigger) ─── */\n\n  .ddga-date-picker__icon-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    margin-inline-start: auto;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    outline: none;\n  }\n  .ddga-date-picker__icon-button:hover {\n    color: var(--ddga-color-foreground);\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-date-picker__icon-button[data-focus-visible] {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-date-picker__icon-button[data-disabled] {\n    cursor: not-allowed;\n  }\n  .ddga-date-picker__icon {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-date-picker-trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-date-picker-trigger {\n      border: 1px solid CanvasText;\n    }\n    .ddga-date-picker-trigger[data-focus-within] {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-date-picker__segment[data-focused] {\n      forced-color-adjust: none;\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-date-picker__icon-button[data-focus-visible] {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Semantic <table> compound. Density/zebra/borders cascade from the root\n     (.ddga-table) to leaf parts via descendant selectors. Logical properties\n     throughout, with one [dir='rtl'] override for the selected-row accent\n     stripe (box-shadow insets are physical). Sort carets are vertical (not\n     mirrored). */\n\n  /* ─── Scroll region ─── */\n\n  .ddga-table__region {\n    inline-size: 100%;\n    /* Horizontal scroll for wide tables. Vertical stays clipped (the region\n       grows to content height, so nothing is cut) until `maxHeight` caps it —\n       at which point the component sets `overflow-y: auto` inline so the body\n       scrolls and `stickyHeader` engages. Keeping vertical hidden by default\n       avoids a spurious vertical scrollbar on unconstrained tables. */\n    overflow-x: auto;\n    overflow-y: hidden;\n    /* Contain the sticky header's stacking and give a clean focus ring. */\n    border-radius: var(--ddga-radius-md);\n  }\n  .ddga-table__region[role='region']:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n\n  /* ─── Table base ─── */\n\n  .ddga-table {\n    --ddga-table-pad-block: var(--ddga-space-3);\n    --ddga-table-pad-inline: var(--ddga-space-4);\n\n    inline-size: 100%;\n    border-collapse: collapse;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    background-color: var(--ddga-color-card);\n    text-align: start;\n  }\n\n  /* ─── Density ─── */\n\n  .ddga-table--sm {\n    --ddga-table-pad-block: var(--ddga-space-2);\n    --ddga-table-pad-inline: var(--ddga-space-3);\n  }\n  .ddga-table--md {\n    --ddga-table-pad-block: var(--ddga-space-3);\n    --ddga-table-pad-inline: var(--ddga-space-4);\n  }\n  .ddga-table--lg {\n    --ddga-table-pad-block: var(--ddga-space-4);\n    --ddga-table-pad-inline: var(--ddga-space-5);\n  }\n\n  /* ─── Head & cell ─── */\n\n  .ddga-table__head,\n  .ddga-table__cell {\n    padding-block: var(--ddga-table-pad-block);\n    padding-inline: var(--ddga-table-pad-inline);\n    text-align: start;\n    vertical-align: middle;\n  }\n\n  .ddga-table__head {\n    color: var(--ddga-text-secondary);\n    font-weight: var(--ddga-font-weight-semibold);\n    white-space: nowrap;\n    /* Header always sits above the body via a bottom rule. */\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  /* Logical alignment (RTL-safe). */\n  .ddga-table__head--align-start,\n  .ddga-table__cell--align-start {\n    text-align: start;\n  }\n  .ddga-table__head--align-center,\n  .ddga-table__cell--align-center {\n    text-align: center;\n  }\n  .ddga-table__head--align-end,\n  .ddga-table__cell--align-end {\n    text-align: end;\n  }\n\n  /* ─── Caption ─── */\n\n  .ddga-table__caption {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-table-pad-inline);\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-sm);\n    text-align: start;\n    caption-side: bottom;\n  }\n\n  /* ─── Body rows ─── */\n\n  .ddga-table__body .ddga-table__row {\n    transition: background-color 120ms ease;\n  }\n  .ddga-table__body .ddga-table__row:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-table__body .ddga-table__row[data-state='selected'] {\n    background-color: var(--ddga-color-muted);\n    /* Inline-start accent stripe. box-shadow insets are physical (no logical\n       form exists), so flip the x-offset in RTL — the project's prescribed\n       [dir='rtl'] override for direction-specific properties. */\n    box-shadow: inset 2px 0 0 0 var(--ddga-color-primary);\n  }\n  [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n    box-shadow: inset -2px 0 0 0 var(--ddga-color-primary);\n  }\n\n  /* ─── Footer ─── */\n\n  .ddga-table__footer {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    border-block-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Divided (row dividers) ─── */\n\n  .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child) {\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Striped (zebra) ─── */\n\n  .ddga-table--striped .ddga-table__body .ddga-table__row:nth-child(even) {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Bordered (full grid) ─── */\n\n  .ddga-table--bordered .ddga-table__head,\n  .ddga-table--bordered .ddga-table__cell {\n    border: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Sticky header ─── */\n\n  .ddga-table--sticky .ddga-table__header .ddga-table__head {\n    position: sticky;\n    inset-block-start: 0;\n    z-index: 1;\n    /* Solid bg so body rows don't bleed through while scrolling. */\n    background-color: var(--ddga-color-card);\n  }\n\n  /* ─── Sort affordance ─── */\n\n  .ddga-table__sort-button {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    margin: 0;\n    padding: 0;\n    border: 0;\n    background: none;\n    font: inherit;\n    color: inherit;\n    cursor: pointer;\n  }\n  .ddga-table__sort-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  .ddga-table__sort-icon {\n    display: inline-flex;\n    flex-direction: column;\n    line-height: 0;\n  }\n  .ddga-table__sort-icon > svg {\n    inline-size: 0.75em;\n    block-size: 0.75em;\n  }\n  /* Neutral state shows both carets dimmed; active state shows one in the\n     accent color. */\n  .ddga-table__sort-icon > svg + svg {\n    margin-block-start: -0.2em;\n  }\n  [aria-sort='none'] .ddga-table__sort-icon {\n    color: var(--ddga-text-tertiary);\n  }\n  [aria-sort='ascending'] .ddga-table__sort-icon,\n  [aria-sort='descending'] .ddga-table__sort-icon {\n    color: var(--ddga-color-primary);\n  }\n\n  /* ─── Dark mode ─── */\n  /* Semantic tokens (--ddga-color-muted/-card/-border/-primary) already adapt,\n     so nothing token-raw here needs a [data-theme='dark'] override. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-table__head {\n      border-block-end-color: CanvasText;\n    }\n    .ddga-table--divided .ddga-table__body .ddga-table__row:not(:last-child),\n    .ddga-table--bordered .ddga-table__head,\n    .ddga-table--bordered .ddga-table__cell,\n    .ddga-table__footer {\n      border-color: CanvasText;\n    }\n    .ddga-table__body .ddga-table__row[data-state='selected'] {\n      box-shadow: inset 2px 0 0 0 Highlight;\n    }\n    [dir='rtl'] .ddga-table__body .ddga-table__row[data-state='selected'] {\n      box-shadow: inset -2px 0 0 0 Highlight;\n    }\n    .ddga-table__sort-button:focus-visible,\n    .ddga-table__region[role='region']:focus-visible {\n      outline: 2px solid Highlight;\n    }\n  }\n}\n","@layer ddga-components {\n  /* The single-panel disclosure primitive (the building block Accordion is\n     built on). The trigger is intentionally minimal — consumers usually bring\n     their own button via `asChild`; we only reset the native button chrome and\n     provide a focus ring. Radix exposes `--radix-collapsible-content-height` on\n     the Content element when open, so we height-slide the disclosure cleanly;\n     the inner wrapper carries the clip and stays padding-free (content is\n     generic — no opinionated spacing). */\n\n  /* ─── Root ─── */\n\n  .ddga-collapsible {\n    display: block;\n    color: var(--ddga-text-primary);\n  }\n\n  /* ─── Trigger (minimal disclosure button) ─── */\n\n  .ddga-collapsible__trigger {\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    padding: 0;\n    color: inherit;\n    font: inherit;\n    text-align: start;\n    cursor: pointer;\n  }\n\n  .ddga-collapsible__trigger:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  .ddga-collapsible__trigger:disabled,\n  .ddga-collapsible__trigger[aria-disabled='true'] {\n    cursor: not-allowed;\n    opacity: 0.6;\n  }\n\n  /* ─── Content (animated disclosure) ─── */\n\n  .ddga-collapsible__content {\n    overflow: hidden;\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-collapsible__content[data-state='open'] {\n    animation: ddga-collapsible-down 200ms ease-out;\n  }\n  .ddga-collapsible__content[data-state='closed'] {\n    animation: ddga-collapsible-up 200ms ease-out;\n  }\n\n  /* The inner wrapper is the animation/margin-collapse boundary so child\n     margins don't punch through the clipped container mid-slide. No padding\n     (content is generic), but a sensible line-height matches the rest of the\n     system's content surfaces. */\n  .ddga-collapsible__content-inner {\n    line-height: 1.5;\n  }\n\n  @keyframes ddga-collapsible-down {\n    from {\n      block-size: 0;\n    }\n    to {\n      block-size: var(--radix-collapsible-content-height);\n    }\n  }\n  @keyframes ddga-collapsible-up {\n    from {\n      block-size: var(--radix-collapsible-content-height);\n    }\n    to {\n      block-size: 0;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-collapsible__content[data-state='open'],\n    .ddga-collapsible__content[data-state='closed'] {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-collapsible__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n      box-shadow: none;\n    }\n  }\n}\n","/* Arabic abjad alphabetic counter — أ ب ج … in the classical abjad order.\n   Defined explicitly because, unlike `arabic-indic`, it is NOT natively\n   supported across browsers. Symbols are the exact W3C \"Ready-made Counter\n   Styles\" sequence (note `\\647\\200D` = HEH + ZWJ so it joins correctly).\n   Counter-style names are global, so this lives outside the cascade layer. */\n@counter-style ddga-arabic-abjad {\n  system: fixed;\n  symbols: '\\627' '\\628' '\\62C' '\\62F' '\\647\\200D' '\\648' '\\632' '\\62D' '\\637' '\\64A' '\\643' '\\644'\n    '\\645' '\\646' '\\633' '\\639' '\\641' '\\635' '\\642' '\\631' '\\634' '\\62A' '\\62B' '\\62E' '\\630'\n    '\\636' '\\638' '\\63A';\n  suffix: '. ';\n}\n\n@layer ddga-components {\n  /* Presentational content list. Layout cascades from the root variant to the\n     items via descendant selectors (DescriptionList / Timeline technique).\n     Logical properties keep markers, padding and the trailing action on the\n     correct side in RTL. Colours use semantic tokens, so dark mode adapts on\n     its own; no coloured backgrounds → no forced-colors block needed. */\n\n  .ddga-list {\n    margin: 0;\n    padding: 0;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  .ddga-list__item {\n    color: inherit;\n  }\n\n  /* ─── plain: no markers, flex rows (icon / content / action) ─── */\n\n  .ddga-list--plain {\n    list-style: none;\n  }\n\n  .ddga-list--plain .ddga-list__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-2);\n  }\n\n  /* ─── bulleted / numbered / lettered: native ::marker on a list-item box ─── */\n\n  .ddga-list--bulleted,\n  .ddga-list--numbered,\n  .ddga-list--lettered {\n    /* Room for the marker on the inline-start side. */\n    padding-inline-start: var(--ddga-space-5);\n  }\n\n  .ddga-list--bulleted {\n    list-style: disc;\n  }\n\n  /* Ordered markers are direction-localized: Latin in LTR, Arabic in RTL —\n     the [dir='rtl'] overrides below swap the counter style. */\n  .ddga-list--numbered {\n    list-style: decimal;\n  }\n\n  .ddga-list--lettered {\n    list-style: lower-alpha;\n  }\n\n  .ddga-list--bulleted .ddga-list__item,\n  .ddga-list--numbered .ddga-list__item,\n  .ddga-list--lettered .ddga-list__item {\n    display: list-item;\n    padding-block: var(--ddga-space-1);\n    line-height: 1.5;\n  }\n\n  .ddga-list--bulleted .ddga-list__item::marker,\n  .ddga-list--numbered .ddga-list__item::marker,\n  .ddga-list--lettered .ddga-list__item::marker {\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── RTL: localize ordered markers to Arabic counter styles ───\n     arabic-indic (١ ٢ ٣) is natively supported; arabic-abjad (أ ب ج) uses the\n     @counter-style defined above. Logical padding already flips the side. */\n  [dir='rtl'] .ddga-list--numbered {\n    list-style-type: arabic-indic;\n  }\n\n  [dir='rtl'] .ddga-list--lettered {\n    list-style-type: ddga-arabic-abjad;\n  }\n\n  /* ─── Slots ─── */\n\n  .ddga-list__icon {\n    display: inline-flex;\n    flex-shrink: 0;\n    align-items: center;\n    justify-content: center;\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* Block-level SVGs (see reset) must not flex-stretch into a tall icon. */\n  .ddga-list__icon svg {\n    flex-shrink: 0;\n  }\n\n  .ddga-list__content {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    /* Let the content column shrink so long text truncates rather than\n       shoving the action slot off the row. */\n    min-inline-size: 0;\n    flex: 1 1 auto;\n  }\n\n  .ddga-list__primary {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1.4;\n  }\n\n  .ddga-list__secondary {\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-list__action {\n    /* Push to the inline-end edge; stays correct under RTL via the logical\n       margin. */\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    flex-shrink: 0;\n    margin-inline-start: auto;\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Dividers between items ─── */\n\n  .ddga-list--divided .ddga-list__item {\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n  .ddga-list--divided .ddga-list__item:last-child {\n    border-block-end: 0;\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only FileUpload-specific styles live here. */\n\n  .ddga-file-upload {\n    color: var(--ddga-text-primary);\n  }\n\n  /* ─── Label ─── */\n\n  .ddga-file-upload__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-file-upload__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Drop zone ─── */\n\n  .ddga-file-upload__dropzone {\n    display: flex;\n    flex-direction: column;\n    align-items: center;\n    justify-content: center;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-6) var(--ddga-space-4);\n    border: 1px dashed var(--ddga-color-input);\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-color-background);\n    text-align: center;\n    cursor: pointer;\n    transition:\n      border-color 150ms ease,\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-file-upload__dropzone:hover {\n    border-color: var(--ddga-color-ring);\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* Focus ring driven by the (visually hidden) input inside the zone. */\n  .ddga-file-upload__dropzone:focus-within {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* Active drag-over state. */\n  .ddga-file-upload__dropzone[data-dragging] {\n    border-color: var(--ddga-color-primary);\n    border-style: solid;\n    background-color: var(--ddga-color-muted);\n    box-shadow: 0 0 0 1px var(--ddga-color-primary);\n  }\n\n  .ddga-file-upload__dropzone--error {\n    border-color: var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__dropzone--error:focus-within {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__dropzone[data-disabled] {\n    cursor: not-allowed;\n    opacity: 0.5;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-file-upload__dropzone[data-disabled]:hover {\n    border-color: var(--ddga-color-input);\n    border-style: dashed;\n  }\n\n  .ddga-file-upload__icon {\n    font-size: 1.5rem;\n    color: var(--ddga-color-muted-foreground);\n  }\n\n  .ddga-file-upload__hint {\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n  }\n\n  /* Visually hidden, but kept focusable so keyboard users can tab to it and\n     press Space/Enter to open the picker. (Not display:none / tabindex=-1.) */\n  .ddga-file-upload__input {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1px;\n    padding: 0;\n    margin: -1px;\n    overflow: hidden;\n    clip: rect(0 0 0 0);\n    white-space: nowrap;\n    border: 0;\n  }\n\n  /* ─── File list ─── */\n\n  .ddga-file-upload__list {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  .ddga-file-upload__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-3);\n    padding: var(--ddga-space-2) var(--ddga-space-3);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n  }\n\n  .ddga-file-upload__item-icon {\n    display: inline-flex;\n    flex: none;\n    font-size: 1.125rem;\n    color: var(--ddga-color-muted-foreground);\n  }\n\n  .ddga-file-upload__item[data-status='success'] .ddga-file-upload__item-icon {\n    color: var(--ddga-color-success);\n  }\n\n  .ddga-file-upload__item[data-status='error'] .ddga-file-upload__item-icon {\n    color: var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__item-main {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    flex: 1 1 auto;\n    min-inline-size: 0;\n  }\n\n  .ddga-file-upload__item-head {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--ddga-space-3);\n  }\n\n  .ddga-file-upload__item-name {\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-file-upload__item-meta {\n    flex: none;\n    font-size: var(--ddga-font-size-xs);\n    color: var(--ddga-text-secondary);\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-file-upload__item-error {\n    font-size: var(--ddga-font-size-xs);\n    color: var(--ddga-color-error);\n  }\n\n  .ddga-file-upload__item-remove {\n    flex: none;\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  /* The focus + drag-active indicators are box-shadow rings, which forced-colors\n     neutralizes — restore them as a system-colored outline so keyboard focus and\n     the active drop target stay visible. */\n  @media (forced-colors: active) {\n    .ddga-file-upload__dropzone:focus-within,\n    .ddga-file-upload__dropzone[data-dragging] {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Self-contained KPI tile: owns its surface (padding/border/bg/radius) so\n     `<Stat>` renders a complete tile with no Card wrapper. `max-inline-size`\n     keeps a single tile from stretching full-width; inside a grid/flex the\n     container controls sizing. Logical properties keep it RTL-safe; numbers\n     stay LTR via Latin digits. Sentiment color flows through\n     --ddga-stat-change-color. The --ddga-color-card/-border/-success/-error\n     tokens (surface + change row) adapt automatically in dark mode, but the\n     -50/-100 badge tints are raw palette tokens that don't, so they get\n     explicit [data-theme='dark'] overrides (below). */\n\n  .ddga-stat {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    max-inline-size: 20rem;\n    padding: var(--ddga-space-5);\n    background-color: var(--ddga-color-card);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    color: var(--ddga-color-card-foreground);\n  }\n\n  /* ─── Variants ─── */\n  /* flat = the base surface (border + neutral badge). elevated/accent below. */\n\n  .ddga-stat--elevated {\n    border-color: transparent;\n    box-shadow: var(--ddga-shadow-md);\n  }\n  .ddga-stat--elevated .ddga-stat__icon {\n    inline-size: 2.5rem;\n    block-size: 2.5rem;\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-sa-600);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  /* accent + gradient share the sentiment-keyed tint vars (data-sentiment on\n     the root). Defaults to brand when no sentiment. */\n  :is(.ddga-stat--accent, .ddga-stat--gradient) {\n    --ddga-stat-accent-fg: var(--ddga-sa-600);\n    --ddga-stat-accent-bg: var(--ddga-sa-50);\n  }\n  :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n    --ddga-stat-accent-fg: var(--ddga-success-600);\n    --ddga-stat-accent-bg: var(--ddga-success-50);\n  }\n  :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n    --ddga-stat-accent-fg: var(--ddga-error-600);\n    --ddga-stat-accent-bg: var(--ddga-error-50);\n  }\n  :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n    --ddga-stat-accent-fg: var(--ddga-gray-600);\n    --ddga-stat-accent-bg: var(--ddga-gray-100);\n  }\n  :is(.ddga-stat--accent, .ddga-stat--gradient) .ddga-stat__icon {\n    background-color: var(--ddga-stat-accent-bg);\n    color: var(--ddga-stat-accent-fg);\n  }\n\n  /* accent: inline-start edge bar. */\n  .ddga-stat--accent {\n    border-inline-start: 3px solid var(--ddga-stat-accent-fg);\n  }\n\n  /* gradient: soft sentiment-tinted surface (elevated, borderless). The tint\n     fades from the inline-start corner; flip the angle in RTL. */\n  .ddga-stat--gradient {\n    border-color: transparent;\n    box-shadow: var(--ddga-shadow-sm);\n    background-image: linear-gradient(135deg, var(--ddga-stat-accent-bg), transparent 65%);\n  }\n  [dir='rtl'] .ddga-stat--gradient {\n    background-image: linear-gradient(225deg, var(--ddga-stat-accent-bg), transparent 65%);\n  }\n\n  /* ─── Dark mode ─── */\n  /* The -50/-100 badge tints are raw palette tokens (identical in dark) and read\n     near-white on a dark card. Use translucent fills + lighter foregrounds\n     (mirrors alert.css / empty-state.css). The change-row colors already adapt\n     via the semantic --ddga-color-* tokens, and the elevated brand badge\n     (--ddga-sa-600) stays legible in dark, so neither needs an override. */\n\n  [data-theme='dark'] .ddga-stat--flat .ddga-stat__icon {\n    background-color: rgb(255 255 255 / 0.08);\n    color: var(--ddga-gray-300, #d2d6db);\n  }\n  [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient) {\n    --ddga-stat-accent-fg: var(--ddga-sa-300, #7ed3a8);\n    --ddga-stat-accent-bg: rgb(37 147 95 / 0.18);\n  }\n  [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='positive'] {\n    --ddga-stat-accent-fg: var(--ddga-success-200, #abefc6);\n    --ddga-stat-accent-bg: rgb(7 148 85 / 0.18);\n  }\n  [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='negative'] {\n    --ddga-stat-accent-fg: var(--ddga-error-200, #fecdca);\n    --ddga-stat-accent-bg: rgb(217 45 32 / 0.18);\n  }\n  [data-theme='dark'] :is(.ddga-stat--accent, .ddga-stat--gradient)[data-sentiment='neutral'] {\n    --ddga-stat-accent-fg: var(--ddga-gray-300, #d2d6db);\n    --ddga-stat-accent-bg: rgb(255 255 255 / 0.08);\n  }\n\n  .ddga-stat__label-row {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-2);\n  }\n\n  .ddga-stat__label {\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    text-transform: uppercase;\n    /* Tracked caps read as \"professional\" in LTR. Reset in RTL — letter-spacing\n       breaks Arabic cursive joining; uppercase is a harmless no-op on Arabic. */\n    letter-spacing: 0.06em;\n  }\n  [dir='rtl'] .ddga-stat__label {\n    letter-spacing: normal;\n  }\n\n  .ddga-stat__icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex: none;\n    inline-size: 2.25rem;\n    block-size: 2.25rem;\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-gray-100);\n    color: var(--ddga-gray-600);\n    font-size: var(--ddga-font-size-lg);\n  }\n  .ddga-stat__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-stat__value {\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-2xl);\n    font-weight: var(--ddga-font-weight-semibold);\n    /* tight leading for the large single-line numeric */\n    line-height: 1.2;\n    letter-spacing: -0.01em;\n    /* Align digits across a grid of tiles. */\n    font-variant-numeric: tabular-nums;\n  }\n  /* Reset the tracking in RTL — values can carry Arabic text (e.g. \"مليون ريال\"),\n     and letter-spacing breaks Arabic cursive joining (mirrors __label above). */\n  [dir='rtl'] .ddga-stat__value {\n    letter-spacing: normal;\n  }\n\n  .ddga-stat__change-row {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  .ddga-stat__change {\n    --ddga-stat-change-color: var(--ddga-text-secondary);\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    color: var(--ddga-stat-change-color);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    font-variant-numeric: tabular-nums;\n  }\n  .ddga-stat__change--positive {\n    --ddga-stat-change-color: var(--ddga-color-success);\n  }\n  .ddga-stat__change--negative {\n    --ddga-stat-change-color: var(--ddga-color-error);\n  }\n  /* Same as the default — kept explicit so the three sentiment modifiers are\n     symmetric and `--neutral` is a stable override hook. */\n  .ddga-stat__change--neutral {\n    --ddga-stat-change-color: var(--ddga-text-secondary);\n  }\n\n  /* Chip: same text color, wrapped in a sentiment-tinted pill. The raw -50\n     tints get dark overrides below (mirrors the accent badge). */\n  .ddga-stat__change--chip {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-gray-100);\n  }\n  .ddga-stat__change--chip.ddga-stat__change--positive {\n    background-color: var(--ddga-success-50);\n  }\n  .ddga-stat__change--chip.ddga-stat__change--negative {\n    background-color: var(--ddga-error-50);\n  }\n  [data-theme='dark'] .ddga-stat__change--chip {\n    background-color: rgb(255 255 255 / 0.08);\n  }\n  [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--positive {\n    background-color: rgb(7 148 85 / 0.18);\n  }\n  [data-theme='dark'] .ddga-stat__change--chip.ddga-stat__change--negative {\n    background-color: rgb(217 45 32 / 0.18);\n  }\n\n  .ddga-stat__change-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* caret slightly smaller than the change text for hierarchy */\n    font-size: 0.85em;\n  }\n  .ddga-stat__change-icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  .ddga-stat__change-label {\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Chart slot (consumer-supplied sparkline) ─── */\n  /* A styled slot with a consistent height; the dropped-in chart stretches to\n     fill. The library ships no charting dependency. */\n  .ddga-stat__chart {\n    margin-block-start: var(--ddga-space-2);\n    block-size: 2.5rem;\n  }\n  .ddga-stat__chart > svg {\n    display: block;\n    inline-size: 100%;\n    block-size: 100%;\n  }\n\n  /* ─── Sizes (scale padding + value; lg/xl also open the root gap) ─── */\n  .ddga-stat--sm {\n    padding: var(--ddga-space-4);\n  }\n  .ddga-stat--sm .ddga-stat__value {\n    font-size: var(--ddga-font-size-xl);\n  }\n  .ddga-stat--lg {\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-6);\n  }\n  .ddga-stat--lg .ddga-stat__value {\n    font-size: var(--ddga-font-size-3xl);\n  }\n  /* Hero/display: no font-size token sits above 3xl, so the display value uses\n     a component-local rem (precedent: the .625rem label size). */\n  .ddga-stat--xl {\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-8);\n  }\n  .ddga-stat--xl .ddga-stat__value {\n    font-size: 2.5rem;\n    line-height: 1.1;\n  }\n  .ddga-stat--xl .ddga-stat__chart {\n    block-size: 3.25rem;\n  }\n\n  /* ─── StatGroup (layout parent for Stat tiles) ─── */\n\n  .ddga-stat-group {\n    --ddga-stat-group-gap: var(--ddga-space-4);\n  }\n  .ddga-stat-group--gap-sm {\n    --ddga-stat-group-gap: var(--ddga-space-3);\n  }\n  .ddga-stat-group--gap-md {\n    --ddga-stat-group-gap: var(--ddga-space-4);\n  }\n  .ddga-stat-group--gap-lg {\n    --ddga-stat-group-gap: var(--ddga-space-6);\n  }\n\n  .ddga-stat-group--horizontal {\n    display: grid;\n    gap: var(--ddga-stat-group-gap);\n    grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));\n  }\n  .ddga-stat-group--horizontal.ddga-stat-group--cols {\n    /* `columns` is a responsive MAX, not a fixed count: up to N columns on wide\n       containers, wrapping down (N → … → 1) as the container narrows — no crush,\n       no overflow. The track minimum is the larger of the readable floor (13rem)\n       and the width N columns would occupy, so auto-fit packs at most N per row.\n       The `100%` resolves against the GROUP (not the viewport), so it is\n       container-aware — correct even in a narrow panel on a wide screen, with no\n       media query needed. */\n    grid-template-columns: repeat(\n      auto-fit,\n      minmax(\n        max(\n          13rem,\n          calc(\n            (100% - (var(--ddga-stat-group-columns) - 1) * var(--ddga-stat-group-gap)) /\n              var(--ddga-stat-group-columns)\n          )\n        ),\n        1fr\n      )\n    );\n  }\n\n  .ddga-stat-group--vertical {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-stat-group-gap);\n  }\n\n  /* Inside a group, tiles fill their slot — release the standalone cap. */\n  .ddga-stat-group .ddga-stat {\n    max-inline-size: none;\n  }\n\n  /* ─── Forced colors ─── */\n  @media (forced-colors: active) {\n    /* Badge + chip backgrounds flatten to Canvas; a border keeps them visible. */\n    .ddga-stat__icon,\n    .ddga-stat__change--chip {\n      border: 1px solid CanvasText;\n    }\n    .ddga-stat--accent {\n      border-inline-start-color: Highlight;\n    }\n    /* gradient flattens its tinted surface + has a transparent border, so it\n       would lose its boundary — restore one. */\n    .ddga-stat--gradient {\n      border: 1px solid CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Only Slider-specific styles live here. Radix Slider\n     handles RTL positioning natively via the inherited `dir` (DgaProvider\n     wraps Direction.Provider), so no manual flipping is needed here. */\n\n  /* ─── Header (label + value readout) ─── */\n\n  .ddga-slider__header {\n    display: flex;\n    align-items: baseline;\n    justify-content: space-between;\n    gap: var(--ddga-space-3);\n  }\n\n  .ddga-slider__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-slider__value {\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-sm);\n    font-variant-numeric: tabular-nums;\n  }\n\n  /* ─── Root ─── */\n\n  .ddga-slider {\n    position: relative;\n    display: flex;\n    align-items: center;\n    inline-size: 100%;\n    touch-action: none;\n    user-select: none;\n  }\n\n  /* Per-size rail thickness + thumb diameter, encoded as custom properties so\n     the track/thumb rules below stay size-agnostic. */\n  .ddga-slider--md {\n    --ddga-slider-rail: 6px;\n    --ddga-slider-thumb: 18px;\n    block-size: var(--ddga-slider-thumb);\n  }\n  .ddga-slider--sm {\n    --ddga-slider-rail: 4px;\n    --ddga-slider-thumb: 14px;\n    block-size: var(--ddga-slider-thumb);\n  }\n\n  /* ─── Track + filled range ─── */\n\n  .ddga-slider__track {\n    position: relative;\n    flex-grow: 1;\n    block-size: var(--ddga-slider-rail);\n    border-radius: 999px;\n    background-color: var(--ddga-color-input);\n  }\n\n  .ddga-slider__range {\n    position: absolute;\n    block-size: 100%;\n    border-radius: 999px;\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Thumb ─── */\n\n  .ddga-slider__thumb {\n    display: block;\n    inline-size: var(--ddga-slider-thumb);\n    block-size: var(--ddga-slider-thumb);\n    border: 2px solid var(--ddga-color-primary);\n    border-radius: 999px;\n    background-color: var(--ddga-color-background);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);\n    cursor: grab;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-slider__thumb:active {\n    cursor: grabbing;\n  }\n\n  .ddga-slider__thumb:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 3px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-slider--error .ddga-slider__thumb {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-slider--error .ddga-slider__range {\n    background-color: var(--ddga-color-error);\n  }\n  .ddga-slider--error .ddga-slider__thumb:focus-visible {\n    box-shadow: 0 0 0 3px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled (Radix sets data-disabled on the Root) ─── */\n\n  .ddga-slider[data-disabled] {\n    opacity: 0.5;\n  }\n  .ddga-slider[data-disabled] .ddga-slider__thumb {\n    cursor: not-allowed;\n  }\n\n  /* ─── Dark mode: keep the thumb a raised light surface ─── */\n\n  [data-theme='dark'] .ddga-slider__thumb {\n    background-color: var(--ddga-gray-100);\n    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-slider__thumb {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-slider__track {\n      background-color: Canvas;\n      border: 1px solid CanvasText;\n    }\n    .ddga-slider__range {\n      background-color: Highlight;\n    }\n    .ddga-slider__thumb {\n      background-color: ButtonFace;\n      border-color: CanvasText;\n    }\n    .ddga-slider__thumb:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Overlay (backdrop) ─── */\n\n  .ddga-modal__overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgb(0 0 0 / 0.5);\n    /* Above tooltips (50) but allow Toast (future) to sit higher if it uses\n       60+. Modal lives at 60 by convention. */\n    z-index: 60;\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  /* ─── Content (the modal box) ─── */\n\n  .ddga-modal {\n    position: fixed;\n    /* Use physical `top`/`left` (NOT inset-block/inline-start) for centering.\n       Centering is symmetric across writing directions, but `inset-inline-start`\n       flips to `right` in RTL while `transform: translateX(-50%)` stays\n       physical — pairing them shifts the modal off-screen in RTL. The\n       physical pair is the established centered-overlay pattern and is\n       direction-correct because viewport-center doesn't care about `dir`. */\n    top: 50%;\n    left: 50%;\n    transform: translate(-50%, -50%);\n    z-index: 61;\n    display: flex;\n    flex-direction: column;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-lg);\n    /* Keep the modal from spilling off small viewports. */\n    max-block-size: calc(100vh - 2rem);\n    inline-size: calc(100vw - 2rem);\n    overflow: hidden;\n    animation-duration: 180ms;\n    animation-timing-function: ease;\n  }\n\n  /* RTL: in RTL the inline axis flips. `translate(-50%, -50%)` still centers\n     correctly because translate is direction-agnostic. No override needed. */\n\n  /* ─── Sizes (max-inline-size caps; `full` is the takeover) ─── */\n\n  .ddga-modal--sm {\n    max-inline-size: 360px;\n  }\n  .ddga-modal--md {\n    max-inline-size: 480px;\n  }\n  .ddga-modal--lg {\n    max-inline-size: 640px;\n  }\n  .ddga-modal--xl {\n    max-inline-size: 800px;\n  }\n  .ddga-modal--full {\n    /* Edge-to-edge with a small breathing margin. */\n    max-inline-size: calc(100vw - 2rem);\n    max-block-size: calc(100vh - 2rem);\n    inline-size: calc(100vw - 2rem);\n    block-size: calc(100vh - 2rem);\n  }\n\n  /* ─── Sections ─── */\n\n  .ddga-modal__header {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-5);\n    padding-block-end: var(--ddga-space-3);\n  }\n\n  .ddga-modal__title {\n    font-size: var(--ddga-font-size-lg);\n    font-weight: var(--ddga-font-weight-semibold);\n    line-height: 1.4;\n    margin: 0;\n    color: var(--ddga-text-primary);\n    /* Reserve room so the corner X never overlaps the title text. */\n    padding-inline-end: var(--ddga-space-8);\n  }\n\n  .ddga-modal__description {\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.5;\n    margin: 0;\n    color: var(--ddga-text-secondary);\n  }\n\n  /* Body — the opt-in scrollable middle region (mirrors DrawerBody): it grows\n     to fill the space between a pinned header and footer and scrolls internally\n     when content overflows, so a tall body never clips and the footer stays\n     visible with zero consumer config. `min-block-size:0` lets it shrink below\n     its content so the overflow engages. */\n  .ddga-modal__body {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    padding-inline: var(--ddga-space-5);\n  }\n\n  /* Unwrapped content: consumers may still drop raw paragraphs/forms directly\n     under ModalContent for short, non-scrolling bodies — this gives them the\n     same inline padding without requiring ModalBody. (ModalFooter owns its own\n     full padding, so it's unaffected by this inline-padding rule.) */\n  .ddga-modal__header ~ * {\n    padding-inline: var(--ddga-space-5);\n  }\n\n  .ddga-modal__footer {\n    display: flex;\n    align-items: center;\n    justify-content: flex-end;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-5);\n    padding-block-start: var(--ddga-space-4);\n    border-block-start: 1px solid var(--ddga-color-border);\n    margin-block-start: auto;\n  }\n\n  /* ─── Corner close (X) ─── */\n\n  .ddga-modal__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-3);\n    inset-inline-end: var(--ddga-space-3);\n    inline-size: 2rem;\n    block-size: 2rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    transition:\n      background-color 150ms ease,\n      color 150ms ease;\n  }\n  .ddga-modal__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n  .ddga-modal__close:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-modal__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-modal__overlay[data-state='open'] {\n    animation-name: ddga-modal-overlay-in;\n  }\n  .ddga-modal__overlay[data-state='closed'] {\n    animation-name: ddga-modal-overlay-out;\n  }\n  .ddga-modal[data-state='open'] {\n    animation-name: ddga-modal-in;\n  }\n  .ddga-modal[data-state='closed'] {\n    animation-name: ddga-modal-out;\n  }\n\n  @keyframes ddga-modal-overlay-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes ddga-modal-overlay-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes ddga-modal-in {\n    from {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n  }\n  @keyframes ddga-modal-out {\n    from {\n      opacity: 1;\n      transform: translate(-50%, -50%) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translate(-50%, -50%) scale(0.96);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-modal,\n    .ddga-modal__overlay {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-modal {\n      border-color: CanvasText;\n    }\n    .ddga-modal__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Panel (Content) ─── */\n\n  .ddga-popover {\n    position: relative;\n    /* Generic interactive surface — mirrors the dropdown panel, not the dark\n       tooltip pill (popovers hold readable rich content). */\n    max-inline-size: 20rem;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    box-shadow: var(--ddga-shadow-md);\n    font-family: inherit;\n    line-height: 1.5;\n    overflow-wrap: anywhere;\n    /* Above page content; below modals (which use higher z-indexes). */\n    z-index: 50;\n    outline: none;\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-popover--sm {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  .ddga-popover--md {\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Arrow ─── */\n  /* The SVG triangle is filled with the panel background, so on a light theme\n     it is white-on-white and only nicks the panel border. We border its two\n     outward slants with drop-shadows. KEY DETAIL: Radix wraps the arrow svg in\n     a span it rotates per side (180deg below, ±90deg beside), and a CSS filter\n     runs in the element's *local* space — before that wrapper rotation. So in\n     local space the apex always points the same way (down, toward 15,10 in the\n     \"0 0 30 10\" viewBox), regardless of which side the popover lands on. One\n     filter casting two shadows toward that local apex therefore borders the two\n     visible slants correctly for every side — no data-side rules, and the apex\n     and base stay where the SVG draws them (sharp tip, base merges into the\n     panel border). Border color adapts to the theme. */\n\n  .ddga-popover__arrow {\n    fill: var(--ddga-color-background);\n    filter: drop-shadow(-1px 1px 0 var(--ddga-color-border))\n      drop-shadow(1px 1px 0 var(--ddga-color-border));\n  }\n\n  /* ─── Close (corner X — mirrors ddga-modal__close) ─── */\n\n  .ddga-popover__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    inline-size: 1.75rem;\n    block-size: 1.75rem;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    border-radius: var(--ddga-radius-sm);\n    transition:\n      background-color 150ms ease,\n      color 150ms ease;\n  }\n\n  .ddga-popover__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n\n  .ddga-popover__close:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-popover__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-popover[data-state='open'] {\n    animation: ddga-popover-in 120ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-popover[data-state='closed'] {\n    animation: ddga-popover-out 80ms ease-in;\n  }\n\n  /* Direction-neutral fade+scale — no translate, so it reads correctly whether\n     Radix places the panel above, below, or beside the trigger (data-side). */\n  @keyframes ddga-popover-in {\n    from {\n      opacity: 0;\n      transform: scale(0.96);\n    }\n    to {\n      opacity: 1;\n      transform: scale(1);\n    }\n  }\n  @keyframes ddga-popover-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-popover {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* Dark mode: surface uses semantic --ddga-color-* + --ddga-text-* tokens,\n     which remap in dark.css — no override needed. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-popover {\n      border: 1px solid CanvasText;\n    }\n    .ddga-popover__close:focus-visible {\n      outline: 2px solid CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared\n     , see field.css. Structure: a single real <input> (.ddga-input-otp__input)\n     overlays the container transparently and owns focus/typing/paste/autofill;\n     the slot row (.ddga-input-otp__row) is the decorative, aria-hidden display. */\n\n  /* ─── Label ─── */\n\n  .ddga-input-otp__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  .ddga-input-otp__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Container (sizes to the slot row; anchors the overlay input) ─── */\n\n  .ddga-input-otp {\n    position: relative;\n    display: inline-flex;\n    color: var(--ddga-text-primary);\n  }\n\n  /* ─── Overlay input (the real, transparent control) ─── */\n\n  .ddga-input-otp__input {\n    position: absolute;\n    inset: 0;\n    inline-size: 100%;\n    block-size: 100%;\n    margin: 0;\n    padding: 0;\n    border: 0;\n    /* Transparent text + caret: the slots render the value, not the input. */\n    color: transparent;\n    background: transparent;\n    caret-color: transparent;\n    cursor: text;\n    /* Suppress native selection UI — on iOS/Android the selection highlight +\n       handles render over the transparent text and break the slot illusion.\n       Typing and programmatic caret moves are unaffected. */\n    -webkit-user-select: none;\n    user-select: none;\n    /* On top of the slots so a click anywhere focuses it. */\n    z-index: 1;\n  }\n\n  .ddga-input-otp__input:focus {\n    outline: none;\n  }\n\n  .ddga-input-otp__input:disabled {\n    cursor: not-allowed;\n  }\n\n  /* ─── Slot row + groups (forced LTR in the markup) ─── */\n\n  .ddga-input-otp__row {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  .ddga-input-otp__group {\n    display: flex;\n    align-items: center;\n    gap: 0.5rem;\n  }\n\n  /* ─── Slot ─── */\n\n  .ddga-input-otp__slot {\n    position: relative;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    font-variant-numeric: tabular-nums;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* The active slot (focused caret position) gets the ring. */\n  .ddga-input-otp__slot[data-active] {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n    z-index: 1;\n  }\n\n  /* ─── Sizes ─── */\n\n  .ddga-input-otp--sm .ddga-input-otp__slot {\n    inline-size: 2rem;\n    block-size: 2rem;\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-input-otp--md .ddga-input-otp__slot {\n    inline-size: 2.75rem;\n    block-size: 2.75rem;\n    font-size: var(--ddga-font-size-lg);\n  }\n  .ddga-input-otp--lg .ddga-input-otp__slot {\n    inline-size: 3.25rem;\n    block-size: 3.25rem;\n    font-size: var(--ddga-font-size-xl);\n  }\n\n  /* ─── Fake caret (active, empty slot) ─── */\n\n  .ddga-input-otp__caret {\n    position: absolute;\n    inline-size: 1px;\n    block-size: 1.125em;\n    background-color: var(--ddga-text-primary);\n    animation: ddga-input-otp-caret 1s step-end infinite;\n  }\n\n  @keyframes ddga-input-otp-caret {\n    0%,\n    100% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0;\n    }\n  }\n\n  /* ─── Separator (between groups) ─── */\n\n  .ddga-input-otp__separator {\n    display: flex;\n    align-items: center;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-input-otp__separator-dash {\n    inline-size: 0.75rem;\n    block-size: 2px;\n    background-color: var(--ddga-color-border);\n    border-radius: 9999px;\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-input-otp--error .ddga-input-otp__slot {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-input-otp--error .ddga-input-otp__slot[data-active] {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-input-otp:has(input:disabled) {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n  .ddga-input-otp:has(input:disabled) .ddga-input-otp__slot {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-input-otp__slot {\n      transition: none;\n    }\n    .ddga-input-otp__caret {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-input-otp__slot {\n      border: 1px solid CanvasText;\n    }\n    .ddga-input-otp__slot[data-active] {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    .ddga-input-otp__caret {\n      background-color: CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n     see field.css. Only TagInput-specific styles live here. The control box\n     mirrors Input's box (border / focus ring / sizes / error / disabled) but\n     wraps: chips + the text input share one flex-wrap flow, so the box grows\n     vertically (min-block-size, not a fixed height) as chips wrap. */\n\n  /* ─── Label ─── */\n\n  .ddga-tag-input__label {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-medium);\n    font-size: var(--ddga-font-size-sm);\n    line-height: 1.4;\n  }\n\n  /* Required asterisk — mirrors Input so every text-entry control marks\n     required the same way. */\n  .ddga-tag-input__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Control (the bordered, wrapping box) ─── */\n\n  .ddga-tag-input {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-sm);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    cursor: text;\n    transition:\n      border-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  /* ─── Sizes (min-heights match Input; vertical padding lets chips breathe) ─── */\n\n  .ddga-tag-input--sm {\n    min-block-size: 32px;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tag-input--md {\n    min-block-size: 36px;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-base);\n  }\n  .ddga-tag-input--lg {\n    min-block-size: 40px;\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-lg);\n  }\n\n  /* ─── Chip list (display:contents so <li> chips flow inline with the input;\n     explicit roles in the JSX preserve list semantics regardless) ─── */\n\n  .ddga-tag-input__list,\n  .ddga-tag-input__item {\n    display: contents;\n  }\n\n  /* ─── Field (the actual <input> — transparent, borderless, grows to fill) ─── */\n\n  .ddga-tag-input__field {\n    flex: 1 1 60px;\n    min-inline-size: 60px;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n  }\n\n  .ddga-tag-input__field::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── Focus (ring on the control via :focus-within) ─── */\n\n  .ddga-tag-input:focus-within {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  /* ─── Error ─── */\n\n  .ddga-tag-input--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-tag-input--error:focus-within {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── Disabled ─── */\n\n  .ddga-tag-input[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-tag-input[data-disabled] .ddga-tag-input__field {\n    cursor: not-allowed;\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tag-input {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tag-input {\n      border: 1px solid CanvasText;\n    }\n    .ddga-tag-input:focus-within {\n      outline: 2px solid Highlight;\n    }\n    .ddga-tag-input[data-disabled] {\n      color: GrayText;\n      border-color: GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Visual-only quote. Root is a <figure> when attribution is present, else a\n     bare <blockquote> — both carry .ddga-quote. Accent + surfaces flow through\n     semantic tokens, so dark mode adapts with no [data-theme] overrides.\n     Logical properties keep the accent border + mark RTL-correct. */\n\n  .ddga-quote {\n    --ddga-quote-accent: var(--ddga-color-primary);\n\n    display: block;\n    margin: 0;\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    line-height: 1.6;\n  }\n\n  /* When the root is a <figure>, the inner <blockquote> resets its UA margin. */\n  .ddga-quote__blockquote {\n    margin: 0;\n  }\n\n  .ddga-quote__content {\n    /* Quote text. Inherits font-size from the variant / surrounding context. */\n    color: inherit;\n  }\n\n  .ddga-quote__content p {\n    margin-block: 0;\n  }\n  .ddga-quote__content p + p {\n    margin-block-start: var(--ddga-space-3);\n  }\n\n  /* ─── Decorative quote mark ─── */\n\n  .ddga-quote__mark {\n    display: block;\n    inline-size: 2em;\n    block-size: 2em;\n    margin-block-end: var(--ddga-space-1);\n    color: var(--ddga-quote-accent);\n    opacity: 0.35;\n  }\n\n  /* Opening mark mirrors so the curl faces the (right-aligned) text in RTL. */\n  [dir='rtl'] .ddga-quote__mark {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Caption (attribution) ─── */\n\n  .ddga-quote__caption {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-3);\n    margin-block-start: var(--ddga-space-3);\n  }\n\n  .ddga-quote__avatar {\n    flex: none;\n    display: inline-flex;\n  }\n\n  .ddga-quote__attribution {\n    display: flex;\n    flex-direction: column;\n    min-inline-size: 0;\n  }\n\n  .ddga-quote__author {\n    color: var(--ddga-text-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n    font-style: normal;\n  }\n\n  .ddga-quote__byline {\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  .ddga-quote__source {\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-sm);\n    font-style: italic;\n  }\n\n  /* ─── Variant: default (inline-start accent border) ─── */\n\n  .ddga-quote--default {\n    border-inline-start: 3px solid var(--ddga-quote-accent);\n    padding-inline-start: var(--ddga-space-4);\n    padding-block: var(--ddga-space-1);\n  }\n\n  /* ─── Variant: pullquote (large, editorial, centered) ─── */\n\n  .ddga-quote--pullquote {\n    max-inline-size: 42rem;\n    margin-inline: auto;\n    padding-block: var(--ddga-space-4);\n    text-align: center;\n    font-size: var(--ddga-font-size-2xl);\n    font-weight: var(--ddga-font-weight-medium);\n    line-height: 1.4;\n  }\n  .ddga-quote--pullquote .ddga-quote__mark {\n    margin-inline: auto;\n    inline-size: 2.5em;\n    block-size: 2.5em;\n  }\n  .ddga-quote--pullquote .ddga-quote__caption {\n    justify-content: center;\n    margin-block-start: var(--ddga-space-4);\n  }\n  .ddga-quote--pullquote .ddga-quote__attribution {\n    align-items: center;\n  }\n\n  /* ─── Variant: testimonial (card surface) ─── */\n\n  .ddga-quote--testimonial {\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    background-color: var(--ddga-color-background);\n    box-shadow: var(--ddga-shadow-sm);\n    padding: var(--ddga-space-6);\n  }\n\n  /* ─── Variant: plain (bare) ───\n     No border, no surface — relies on content + caption only. */\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-quote--default {\n      border-inline-start-color: CanvasText;\n    }\n    .ddga-quote--testimonial {\n      border-color: CanvasText;\n    }\n    .ddga-quote__mark {\n      opacity: 1;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Constrains content to a fixed width-to-height ratio via the native CSS\n     `aspect-ratio` property (Baseline 2021) — no padding-bottom hack. The ratio\n     comes from the `--ddga-aspect-ratio` custom property the component sets\n     inline (default 1). Full-width by default; the consumer constrains the\n     width, the height follows. Direction-agnostic — `aspect-ratio` and the\n     logical sizing properties need no RTL handling. No color surface, so no\n     dark-mode or forced-colors block is required. */\n\n  .ddga-aspect-ratio {\n    position: relative;\n    inline-size: 100%;\n    aspect-ratio: var(--ddga-aspect-ratio, 1);\n    overflow: hidden;\n    /* Applies when `asChild` renders the class directly onto a replaced element\n       (<img>/<video>); a no-op on the wrapper <div>. */\n    object-fit: cover;\n  }\n\n  /* Wrapper case: the single child fills the ratio box. */\n  .ddga-aspect-ratio > * {\n    block-size: 100%;\n    inline-size: 100%;\n  }\n  /* `object-fit` only affects replaced elements — scope it so the intent is\n     explicit (a no-op on <div>/custom children, cover-crops media). */\n  .ddga-aspect-ratio > :is(img, video, canvas, iframe) {\n    object-fit: cover;\n  }\n}\n","@layer ddga-components {\n  /* Variant + size live on the root (.ddga-tabs--{line,pill,sm,md}). All\n     descendant selectors cascade from there. Logical properties keep the\n     RTL flip free — Radix sets `dir` from the DgaProvider's Direction.Provider\n     and updates `data-orientation` on Root/List/Trigger/Content. */\n\n  /* ─── Root ─── */\n\n  .ddga-tabs {\n    display: flex;\n    color: var(--ddga-text-primary);\n    /* Default (horizontal) layout: list above content. */\n    flex-direction: column;\n    gap: var(--ddga-space-3);\n    /* CSS var so consumers can tune the line variant's indicator weight. */\n    --ddga-tabs-indicator-thickness: 2px;\n  }\n\n  /* Vertical layout: list beside content. Radix sets data-orientation\n     on every part — target it on Root for layout flow, and on List for\n     its own flex direction. */\n  .ddga-tabs[data-orientation='vertical'] {\n    flex-direction: row;\n    gap: var(--ddga-space-4);\n  }\n\n  /* ─── List ─── */\n\n  .ddga-tabs__list {\n    display: flex;\n    /* Horizontal default — gap depends on variant (pill needs tighter,\n       line wants none so the baseline reads as a single underline). */\n    flex-direction: row;\n    align-items: stretch;\n  }\n  .ddga-tabs__list[data-orientation='vertical'] {\n    flex-direction: column;\n    align-items: stretch;\n  }\n\n  /* Full-width: triggers stretch to fill the list. Each trigger\n     `flex: 1` so they share width evenly. Use a separate selector so the\n     prop is opt-in and doesn't override per-variant defaults. */\n  .ddga-tabs__list--full-width {\n    inline-size: 100%;\n  }\n  .ddga-tabs__list--full-width .ddga-tabs__trigger {\n    flex: 1;\n    justify-content: center;\n  }\n\n  /* ─── Trigger (Radix renders a <button>) ─── */\n\n  .ddga-tabs__trigger {\n    /* Reset the native button. */\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    /* Layout. */\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    /* Text. */\n    color: var(--ddga-text-secondary);\n    font-family: inherit;\n    font-weight: 500;\n    line-height: 1.4;\n    white-space: nowrap;\n    cursor: pointer;\n    position: relative;\n    transition:\n      color 150ms ease,\n      background-color 150ms ease,\n      box-shadow 150ms ease;\n  }\n\n  .ddga-tabs__trigger:hover {\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-tabs__trigger:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* Disabled — match both Radix's data-disabled (native disabled) AND\n     aria-disabled (asChild composition). Same convention as Button. */\n  .ddga-tabs__trigger[data-disabled],\n  .ddga-tabs__trigger[aria-disabled='true'] {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n  .ddga-tabs__trigger[data-disabled]:hover,\n  .ddga-tabs__trigger[aria-disabled='true']:hover {\n    color: var(--ddga-text-secondary);\n  }\n\n  /* ─── Icons (leading/trailing inside a trigger) ─── */\n\n  .ddga-tabs__icon {\n    display: inline-flex;\n    align-items: center;\n    flex-shrink: 0;\n  }\n  .ddga-tabs__icon > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-tabs--sm .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger {\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* Icon-only triggers square up: collapse the wider inline padding to match\n     the block padding so the hit target is balanced around the glyph. */\n  .ddga-tabs--sm .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-1);\n  }\n  .ddga-tabs--md .ddga-tabs__trigger--icon-only {\n    padding-inline: var(--ddga-space-2);\n  }\n\n  /* ─── Variant: line ─── */\n\n  .ddga-tabs--line .ddga-tabs__list {\n    /* The unselected baseline runs along the inline edge — block-end on\n       horizontal lists, inline-end on vertical ones (right in LTR, left in\n       RTL — logical properties handle the flip). */\n    border-block-end: 1px solid var(--ddga-color-border);\n    gap: var(--ddga-space-1);\n  }\n  .ddga-tabs--line .ddga-tabs__list[data-orientation='vertical'] {\n    border-block-end: 0;\n    border-inline-end: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger {\n    /* Reserve space for the indicator so active/inactive don't shift. */\n    margin-block-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger {\n    margin-block-end: 0;\n    margin-inline-end: calc(-1 * var(--ddga-tabs-indicator-thickness));\n    border-block-end: 0;\n    border-inline-end: var(--ddga-tabs-indicator-thickness) solid transparent;\n  }\n\n  .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-color-primary);\n    border-block-end-color: var(--ddga-color-primary);\n  }\n  .ddga-tabs--line[data-orientation='vertical'] .ddga-tabs__trigger[data-state='active'] {\n    border-block-end-color: transparent;\n    border-inline-end-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Variant: pill ─── */\n\n  .ddga-tabs--pill .ddga-tabs__list {\n    background-color: var(--ddga-color-muted);\n    border-radius: var(--ddga-radius-md);\n    padding: var(--ddga-space-1);\n    gap: var(--ddga-space-1);\n    align-self: flex-start;\n  }\n  .ddga-tabs--pill .ddga-tabs__list--full-width {\n    align-self: stretch;\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger {\n    border-radius: calc(var(--ddga-radius-md) - 2px);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger:hover:not([data-state='active']) {\n    background-color: color-mix(in oklab, var(--ddga-color-muted) 60%, var(--ddga-text-primary) 6%);\n  }\n\n  .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n    color: var(--ddga-text-primary);\n    background-color: var(--ddga-color-background);\n    box-shadow: var(--ddga-shadow-sm);\n  }\n\n  /* ─── Content ─── */\n\n  .ddga-tabs__content {\n    /* Radix sets tabindex=0 on the content so keyboard users can shift focus\n       from the list into the panel. Make that focus visible. */\n    outline: none;\n  }\n  .ddga-tabs__content:focus-visible {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-tabs__trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-tabs--line .ddga-tabs__list {\n      border-block-end-color: CanvasText;\n    }\n    .ddga-tabs--line .ddga-tabs__trigger[data-state='active'] {\n      border-block-end-color: Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs--pill .ddga-tabs__trigger[data-state='active'] {\n      outline: 1px solid Highlight;\n      color: Highlight;\n    }\n    .ddga-tabs__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Size + orientation live on the root; state lives on each Step. Separator\n     lines are CSS-drawn via `::before` on every Step except the first,\n     stretching backward to the previous Step's indicator. Logical\n     properties handle the RTL flip — no JS, no JS conditional classes. */\n\n  /* ─── Root (ol) ─── */\n\n  .ddga-steps {\n    display: flex;\n    margin: 0;\n    padding: 0;\n    list-style: none;\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n  }\n\n  .ddga-steps--horizontal {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: var(--ddga-space-2);\n  }\n\n  .ddga-steps--vertical {\n    flex-direction: column;\n    gap: var(--ddga-space-3);\n  }\n\n  /* ─── Step (li) ─── */\n\n  .ddga-steps__step {\n    position: relative;\n    display: flex;\n    flex: 1;\n    min-inline-size: 0;\n  }\n\n  .ddga-steps--horizontal .ddga-steps__step {\n    flex-direction: column;\n    align-items: flex-start;\n    gap: var(--ddga-space-2);\n  }\n  .ddga-steps--vertical .ddga-steps__step {\n    flex-direction: row;\n    align-items: flex-start;\n    gap: var(--ddga-space-3);\n  }\n\n  /* ─── Separator line (CSS-drawn, between siblings) ─── */\n  /*\n   * Horizontal: line stretches inline-end-ward from the indicator on this\n   * step toward the next step. Vertical: line stretches block-end-ward.\n   * Color reflects THIS step's state — when this step is completed the\n   * line to the next is also completed. (Visual-only progress indicator.)\n   */\n\n  .ddga-steps--horizontal .ddga-steps__step + .ddga-steps__step::before {\n    content: '';\n    position: absolute;\n    block-size: 2px;\n    /* Sit at the vertical center of the indicator (24px / 2). */\n    inset-block-start: 11px;\n    /* Span from just before this step's indicator back to the previous one. */\n    inset-inline-start: calc(-1 * var(--ddga-space-2));\n    inset-inline-end: calc(100% - 4px);\n    background-color: var(--ddga-color-border);\n  }\n\n  .ddga-steps--vertical .ddga-steps__step + .ddga-steps__step::before {\n    content: '';\n    position: absolute;\n    inline-size: 2px;\n    /* Sit at the horizontal center of the indicator. */\n    inset-inline-start: 11px;\n    /* Span from just before this step's indicator back to the previous one. */\n    inset-block-start: calc(-1 * var(--ddga-space-3));\n    inset-block-end: calc(100% - 4px);\n    background-color: var(--ddga-color-border);\n  }\n\n  /* Completed steps colour the inbound line — the line BEFORE a completed\n     step reflects that the journey to it is done. */\n  .ddga-steps__step--completed + .ddga-steps__step--completed::before,\n  .ddga-steps__step--completed + .ddga-steps__step--current::before {\n    background-color: var(--ddga-color-primary);\n  }\n\n  /* ─── Indicator (numbered circle / check) ─── */\n\n  .ddga-steps__indicator {\n    flex-shrink: 0;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    border-radius: 999px;\n    border: 2px solid var(--ddga-color-border);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: 600;\n    line-height: 1;\n    /* Above the separator line so it doesn't visually cross through. */\n    position: relative;\n    z-index: 1;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n\n  .ddga-steps__indicator-check {\n    inline-size: 0.875em;\n    block-size: 0.875em;\n    display: none;\n  }\n\n  /* Completed: filled-primary circle with a check icon (number hidden). */\n  .ddga-steps__step--completed .ddga-steps__indicator {\n    background-color: var(--ddga-color-primary);\n    border-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-steps__step--completed .ddga-steps__indicator-check {\n    display: inline-block;\n  }\n  .ddga-steps__step--completed .ddga-steps__indicator-number {\n    display: none;\n  }\n\n  /* Current: outlined-primary circle with the number visible. */\n  .ddga-steps__step--current .ddga-steps__indicator {\n    border-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary);\n  }\n\n  /* ─── Title + Description ─── */\n\n  .ddga-steps__title {\n    display: block;\n    color: var(--ddga-text-secondary);\n    font-weight: 500;\n    line-height: 1.4;\n  }\n\n  .ddga-steps__step--current .ddga-steps__title {\n    color: var(--ddga-text-primary);\n    font-weight: 600;\n  }\n\n  .ddga-steps__step--completed .ddga-steps__title {\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-steps__description {\n    display: block;\n    margin-block-start: var(--ddga-space-1);\n    color: var(--ddga-text-tertiary);\n    font-size: var(--ddga-font-size-xs);\n    line-height: 1.4;\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-steps--sm {\n    font-size: var(--ddga-font-size-xs);\n  }\n  .ddga-steps--md {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-steps__indicator {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-steps__indicator {\n      border-color: CanvasText;\n      color: CanvasText;\n    }\n    .ddga-steps__step--completed .ddga-steps__indicator,\n    .ddga-steps__step--current .ddga-steps__indicator {\n      border-color: Highlight;\n      color: Highlight;\n    }\n    .ddga-steps__step + .ddga-steps__step::before {\n      background-color: CanvasText;\n    }\n    .ddga-steps__step--completed + .ddga-steps__step--completed::before,\n    .ddga-steps__step--completed + .ddga-steps__step--current::before {\n      background-color: Highlight;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Size lives on the root; per-part visuals cascade. Radix exposes\n     `--radix-accordion-content-height` on the Content element when open so\n     we can animate the disclosure cleanly; the inner wrapper carries the\n     padding so the animated container can clip without padding popping. */\n\n  /* ─── Root ─── */\n\n  .ddga-accordion {\n    display: flex;\n    flex-direction: column;\n    inline-size: 100%;\n    color: var(--ddga-text-primary);\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-accordion__item {\n    border-block-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* ─── Header (wraps the trigger button) ─── */\n\n  .ddga-accordion__header {\n    display: flex;\n    margin: 0;\n  }\n\n  /* ─── Trigger (the disclosure button) ─── */\n\n  .ddga-accordion__trigger {\n    appearance: none;\n    background: transparent;\n    border: 0;\n    margin: 0;\n    inline-size: 100%;\n    display: inline-flex;\n    align-items: center;\n    justify-content: space-between;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-4);\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    font-weight: 500;\n    text-align: start;\n    cursor: pointer;\n    transition: color 150ms ease;\n  }\n\n  .ddga-accordion__trigger:hover {\n    color: var(--ddga-color-primary);\n  }\n\n  .ddga-accordion__trigger:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  /* ─── Chevron ─── */\n\n  .ddga-accordion__chevron {\n    flex-shrink: 0;\n    inline-size: 1em;\n    block-size: 1em;\n    color: var(--ddga-text-tertiary);\n    transition: transform 200ms ease;\n  }\n\n  .ddga-accordion__trigger[data-state='open'] .ddga-accordion__chevron {\n    transform: rotate(180deg);\n  }\n\n  /* ─── Content (animated disclosure) ─── */\n\n  .ddga-accordion__content {\n    overflow: hidden;\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-accordion__content[data-state='open'] {\n    animation: ddga-accordion-down 200ms ease-out;\n  }\n  .ddga-accordion__content[data-state='closed'] {\n    animation: ddga-accordion-up 200ms ease-out;\n  }\n\n  .ddga-accordion__content-inner {\n    padding-block-end: var(--ddga-space-4);\n    line-height: 1.5;\n  }\n\n  @keyframes ddga-accordion-down {\n    from {\n      block-size: 0;\n    }\n    to {\n      block-size: var(--radix-accordion-content-height);\n    }\n  }\n  @keyframes ddga-accordion-up {\n    from {\n      block-size: var(--radix-accordion-content-height);\n    }\n    to {\n      block-size: 0;\n    }\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-accordion--sm .ddga-accordion__trigger {\n    padding-block: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-accordion--md .ddga-accordion__trigger {\n    padding-block: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-accordion__content[data-state='open'],\n    .ddga-accordion__content[data-state='closed'] {\n      animation: none;\n    }\n    .ddga-accordion__chevron {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-accordion,\n    .ddga-accordion__item {\n      border-color: CanvasText;\n    }\n    .ddga-accordion__trigger:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n","@layer ddga-components {\n  .ddga-skeleton {\n    display: block;\n    background-color: var(--ddga-gray-200);\n    border-radius: var(--ddga-radius-md);\n    position: relative;\n    overflow: hidden;\n  }\n\n  /* ─── Shapes ─── */\n\n  .ddga-skeleton--text {\n    width: 100%;\n    height: 1em;\n    border-radius: var(--ddga-radius-sm);\n  }\n\n  .ddga-skeleton--rectangle {\n    width: 100%;\n    height: 40px;\n  }\n\n  .ddga-skeleton--circle {\n    /* Sized by `width` alone — `aspect-ratio:1` keeps it round, so passing only\n       `width` (the natural way to size a circle) no longer produces an oval. An\n       explicit `height` (inline style) still overrides aspect-ratio. */\n    width: 40px;\n    aspect-ratio: 1;\n    border-radius: var(--ddga-radius-full);\n  }\n\n  /* ─── Animations ─── */\n\n  .ddga-skeleton--pulse {\n    animation: ddga-skeleton-pulse 1.5s ease-in-out infinite;\n  }\n\n  @keyframes ddga-skeleton-pulse {\n    0%,\n    100% {\n      opacity: 1;\n    }\n    50% {\n      opacity: 0.55;\n    }\n  }\n\n  /* Wave: a translucent gradient sweeps across the surface using a\n     pseudo-element so it doesn't interfere with the consumer's content. */\n  .ddga-skeleton--wave::after {\n    content: '';\n    position: absolute;\n    inset: 0;\n    transform: translateX(-100%);\n    background-image: linear-gradient(\n      90deg,\n      transparent,\n      color-mix(in srgb, var(--ddga-color-background) 60%, transparent),\n      transparent\n    );\n    animation: ddga-skeleton-wave 1.6s linear infinite;\n  }\n\n  @keyframes ddga-skeleton-wave {\n    100% {\n      transform: translateX(100%);\n    }\n  }\n\n  /* RTL: sweep direction follows reading direction so the shimmer feels native. */\n  [dir='rtl'] .ddga-skeleton--wave::after {\n    transform: translateX(100%);\n    animation-name: ddga-skeleton-wave-rtl;\n  }\n\n  @keyframes ddga-skeleton-wave-rtl {\n    100% {\n      transform: translateX(-100%);\n    }\n  }\n\n  .ddga-skeleton--none {\n    animation: none;\n  }\n\n  .ddga-skeleton--none::after {\n    display: none;\n  }\n\n  /* ─── Dark mode ─── */\n  /* The fill is the raw `--ddga-gray-200` tint, which the dark theme does NOT\n     remap (only semantic `--ddga-color-*` adapt). Left alone it renders as a\n     bright light box on dark surfaces, so map it to the semantic border gray.\n     The wave shimmer already uses `--ddga-color-background` and is fine. */\n  [data-theme='dark'] .ddga-skeleton {\n    background-color: var(--ddga-color-border);\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-skeleton--pulse,\n    .ddga-skeleton--wave::after {\n      animation: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n  /* The fill conveys \"content loading here\", but `background-color` is forced\n     away in HC. Outline the placeholder so it stays perceivable. */\n  @media (forced-colors: active) {\n    .ddga-skeleton {\n      border: 1px solid GrayText;\n    }\n  }\n}\n","@layer ddga-components {\n  .ddga-spinner {\n    display: inline-block;\n    flex-shrink: 0;\n    color: currentColor;\n    animation: ddga-spin 600ms linear infinite;\n  }\n\n  .ddga-spinner--sm {\n    font-size: 1rem;\n  }\n  .ddga-spinner--md {\n    font-size: 1.5rem;\n  }\n  .ddga-spinner--lg {\n    font-size: 2rem;\n  }\n\n  @keyframes ddga-spin {\n    from {\n      transform: rotate(0deg);\n    }\n    to {\n      transform: rotate(360deg);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-spinner {\n      animation-duration: 1.5s;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Linear (Radix Progress) ─── */\n\n  .ddga-progress {\n    position: relative;\n    overflow: hidden;\n    inline-size: 100%;\n    background-color: var(--ddga-gray-200);\n    border-radius: var(--ddga-radius-full);\n  }\n\n  .ddga-progress--sm {\n    block-size: 4px;\n  }\n  .ddga-progress--md {\n    block-size: 8px;\n  }\n  .ddga-progress--lg {\n    block-size: 12px;\n  }\n\n  .ddga-progress--primary {\n    --ddga-progress-color: var(--ddga-color-primary);\n  }\n  .ddga-progress--success {\n    --ddga-progress-color: var(--ddga-color-success);\n  }\n  .ddga-progress--warning {\n    --ddga-progress-color: var(--ddga-color-warning);\n  }\n  .ddga-progress--destructive {\n    --ddga-progress-color: var(--ddga-color-destructive);\n  }\n\n  .ddga-progress__indicator {\n    block-size: 100%;\n    /* Determinate fill: the component sets `inline-size: <pct>%` inline. Anchored\n       to the track's inline-start, it mirrors for free in RTL (logical, no JS\n       direction read). `100%` here is the no-JS/SSR fallback before the inline\n       value lands; the indeterminate rule below overrides it to 40%. */\n    inline-size: 100%;\n    background-color: var(--ddga-progress-color, var(--ddga-color-primary));\n    transition: inline-size 200ms ease-out;\n    border-radius: inherit;\n  }\n\n  /* Indeterminate: slide a 40%-wide pill across the track. The track has\n     overflow:hidden so the off-track portions get clipped. */\n  .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n    inline-size: 40%;\n    transform: translateX(-100%);\n    animation: ddga-progress-slide 1.4s cubic-bezier(0.65, 0.05, 0.36, 1) infinite;\n    transition: none;\n  }\n\n  @keyframes ddga-progress-slide {\n    0% {\n      transform: translateX(-100%);\n    }\n    100% {\n      transform: translateX(350%);\n    }\n  }\n\n  /* RTL: reverse the slide so motion still tracks reading direction. */\n  [dir='rtl'] .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator {\n    animation-name: ddga-progress-slide-rtl;\n  }\n\n  @keyframes ddga-progress-slide-rtl {\n    0% {\n      transform: translateX(100%);\n    }\n    100% {\n      transform: translateX(-350%);\n    }\n  }\n\n  /* ─── Circular (custom SVG) ─── */\n\n  .ddga-circular-progress {\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n  }\n\n  .ddga-circular-progress--primary {\n    --ddga-progress-color: var(--ddga-color-primary);\n  }\n  .ddga-circular-progress--success {\n    --ddga-progress-color: var(--ddga-color-success);\n  }\n  .ddga-circular-progress--warning {\n    --ddga-progress-color: var(--ddga-color-warning);\n  }\n  .ddga-circular-progress--destructive {\n    --ddga-progress-color: var(--ddga-color-destructive);\n  }\n\n  .ddga-circular-progress__svg {\n    display: block;\n  }\n\n  .ddga-circular-progress__track {\n    stroke: var(--ddga-gray-200);\n  }\n\n  .ddga-circular-progress__indicator {\n    stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n    transition: stroke-dashoffset 200ms ease-out;\n  }\n\n  /* Segmented (radial stepper): each arc is track-colored until filled. */\n  .ddga-circular-progress__segment {\n    stroke: var(--ddga-gray-200);\n    transition: stroke 200ms ease;\n  }\n  .ddga-circular-progress__segment--filled {\n    stroke: var(--ddga-progress-color, var(--ddga-color-primary));\n  }\n\n  /* Only the continuous (non-segmented) ring spins when indeterminate — a\n     segmented ring is determinate, so don't rotate its empty arcs. */\n  .ddga-circular-progress[data-state='indeterminate']:not([data-segmented])\n    .ddga-circular-progress__svg {\n    animation: ddga-circular-progress-spin 1.4s linear infinite;\n    transition: none;\n  }\n\n  @keyframes ddga-circular-progress-spin {\n    100% {\n      transform: rotate(360deg);\n    }\n  }\n\n  .ddga-circular-progress__label {\n    position: absolute;\n    inset: 0;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-text-secondary);\n    line-height: 1;\n  }\n\n  .ddga-circular-progress--sm .ddga-circular-progress__label {\n    font-size: 0.625rem;\n  }\n  .ddga-circular-progress--lg .ddga-circular-progress__label {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Dark mode ─── */\n  /* The unfilled track is built from the raw `--ddga-gray-200` tint, which the\n     dark theme does NOT remap (only semantic `--ddga-color-*` tokens adapt).\n     Left alone it renders as a bright light band on dark surfaces, so map the\n     track to the semantic border gray. The indicator stays `--ddga-color-*`\n     (already dark-aware). */\n  [data-theme='dark'] .ddga-progress {\n    background-color: var(--ddga-color-border);\n  }\n  [data-theme='dark'] .ddga-circular-progress__track,\n  [data-theme='dark'] .ddga-circular-progress__segment {\n    stroke: var(--ddga-color-border);\n  }\n\n  /* Reduced motion: drop indeterminate animations, keep static state visible. */\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-progress[data-state='indeterminate'] .ddga-progress__indicator,\n    .ddga-circular-progress[data-state='indeterminate'] .ddga-circular-progress__svg {\n      animation: none;\n    }\n    .ddga-progress__indicator,\n    .ddga-circular-progress__indicator,\n    .ddga-circular-progress__segment {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n  /* background/stroke colors are overridden by the system, which would make the\n     fill indistinguishable from the track. Pin the fill to Highlight and the\n     track to a dim system color so progress stays readable. */\n  @media (forced-colors: active) {\n    .ddga-progress {\n      border: 1px solid CanvasText;\n    }\n    .ddga-progress__indicator {\n      background-color: Highlight;\n    }\n    .ddga-circular-progress__track,\n    .ddga-circular-progress__segment {\n      stroke: GrayText;\n    }\n    .ddga-circular-progress__indicator,\n    .ddga-circular-progress__segment--filled {\n      stroke: Highlight;\n    }\n  }\n}\n","@layer ddga-components {\n  /* DateRangePicker field/trigger chrome + range-fill cell styling. The calendar\n     dropdown (popover, toggle, month grid, day cells) is shared with DatePicker —\n     see calendar.css. Wrapper (.ddga-field) + helper/error (.ddga-field__message)\n     are shared — see field.css. */\n\n  /* ─── Label + required ─── */\n\n  .ddga-date-range-picker__label {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    color: var(--ddga-color-foreground);\n  }\n  .ddga-date-range-picker__required {\n    color: var(--ddga-color-error);\n    margin-inline-start: 0.125rem;\n  }\n\n  /* ─── Trigger (react-aria Group: start input + separator + end input + button) ─── */\n\n  .ddga-date-range-picker-trigger {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    inline-size: 100%;\n    border: 1px solid var(--ddga-color-input);\n    border-radius: var(--ddga-radius-md);\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-color-foreground);\n    text-align: start;\n    transition:\n      border-color 120ms ease,\n      box-shadow 120ms ease;\n  }\n\n  .ddga-date-range-picker-trigger--sm {\n    block-size: 32px;\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n  }\n  .ddga-date-range-picker-trigger--md {\n    block-size: 36px;\n    padding-inline: var(--ddga-space-4);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  .ddga-date-range-picker-trigger[data-focus-within] {\n    border-color: var(--ddga-color-ring);\n    box-shadow: 0 0 0 1px var(--ddga-color-ring);\n  }\n\n  .ddga-date-range-picker-trigger[data-disabled] {\n    opacity: 0.5;\n    cursor: not-allowed;\n    background-color: var(--ddga-color-muted);\n  }\n\n  .ddga-date-range-picker-trigger--error {\n    border-color: var(--ddga-color-error);\n  }\n  .ddga-date-range-picker-trigger--error[data-focus-within] {\n    border-color: var(--ddga-color-error);\n    box-shadow: 0 0 0 1px var(--ddga-color-error);\n  }\n\n  /* ─── DateInputs + segments + separator ─── */\n\n  .ddga-date-range-picker__input {\n    display: inline-flex;\n    align-items: center;\n    flex: 0 0 auto;\n    min-inline-size: 0;\n    /* Force LTR segment direction even in RTL so each date reads\n       day-month-year left-to-right. The flex row itself follows page dir, so in\n       RTL the start input correctly sits on the right (start of the range). */\n    direction: ltr;\n    font-variant-numeric: tabular-nums;\n  }\n\n  .ddga-date-range-picker__segment {\n    padding-block: 1px;\n    padding-inline: 1px;\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-color-foreground);\n    font-variant-numeric: tabular-nums;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  .ddga-date-range-picker__segment[data-placeholder] {\n    color: var(--ddga-text-placeholder);\n  }\n  .ddga-date-range-picker__segment[data-focused] {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n  }\n  .ddga-date-range-picker__segment[data-type='literal'] {\n    padding-inline: 0;\n    color: var(--ddga-text-tertiary);\n  }\n  .ddga-date-range-picker__segment[data-type='literal'][data-focused] {\n    background-color: transparent;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-date-range-picker__separator {\n    flex: 0 0 auto;\n    padding-inline: var(--ddga-space-1);\n    color: var(--ddga-text-tertiary);\n  }\n\n  /* ─── Calendar icon button (popover trigger) ─── */\n\n  .ddga-date-range-picker__icon-button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    margin-inline-start: auto;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    outline: none;\n  }\n  .ddga-date-range-picker__icon-button:hover {\n    color: var(--ddga-color-foreground);\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-date-range-picker__icon-button[data-focus-visible] {\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n  .ddga-date-range-picker__icon-button[data-disabled] {\n    cursor: not-allowed;\n  }\n  .ddga-date-range-picker__icon {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Range fill (scoped to RangeCalendar via .ddga-calendar--range) ─── */\n\n  /* react-aria emits data-selected on EVERY in-range cell, plus\n     data-selection-start / data-selection-end on the two endpoints. We paint a\n     soft connector across the whole range on the <td> (so it spans the full\n     column width and reads continuous), keep the endpoints as solid primary\n     circles (the base .ddga-calendar__cell[data-selected] rule), and make the\n     in-between cells transparent so only the td connector shows behind them. */\n\n  /* Connector bar on the td — spans the full column, unlike the 2rem inner cell. */\n  .ddga-calendar--range td:has([data-selected]) {\n    background-color: color-mix(in srgb, var(--ddga-color-primary) 12%, transparent);\n  }\n  /* Round only the outer edges of the bar (logical → flips in RTL). A single-day\n     range carries both attrs, so it rounds to a full pill. */\n  .ddga-calendar--range td:has([data-selection-start]) {\n    border-start-start-radius: var(--ddga-radius-sm);\n    border-end-start-radius: var(--ddga-radius-sm);\n  }\n  .ddga-calendar--range td:has([data-selection-end]) {\n    border-start-end-radius: var(--ddga-radius-sm);\n    border-end-end-radius: var(--ddga-radius-sm);\n  }\n\n  /* In-between days: let the td connector show through; keep text legible. */\n  .ddga-calendar--range\n    .ddga-calendar__cell[data-selected]:not([data-selection-start]):not([data-selection-end]) {\n    background-color: transparent;\n    color: var(--ddga-color-foreground);\n  }\n  /* The endpoints stay solid primary (base rule); their secondary calendar text\n     already inherits the contrast color via calendar.css. */\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-date-range-picker-trigger {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-date-range-picker-trigger {\n      border: 1px solid CanvasText;\n    }\n    .ddga-date-range-picker-trigger[data-focus-within] {\n      outline: 2px solid Highlight;\n      outline-offset: 1px;\n    }\n    /* color-mix backgrounds disappear in forced-colors — restore a visible range\n       using the Highlight system color on the connector td + endpoints. */\n    .ddga-calendar--range td:has([data-selected]) {\n      background-color: Highlight;\n    }\n    .ddga-calendar--range .ddga-calendar__cell[data-selected] {\n      color: HighlightText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Size lives on the root (.ddga-pagination--{sm,md}); all per-part visuals\n     cascade through descendant selectors. Direction-encoded chevron icons\n     flip in RTL via `[dir='rtl']`, with the previous icon double-flipped so\n     it points \"back\" in either direction. */\n\n  /* ─── Root (nav) ─── */\n\n  .ddga-pagination {\n    color: var(--ddga-text-primary);\n    font-family: inherit;\n    line-height: 1.4;\n  }\n\n  /* ─── Content (ul) ─── */\n\n  .ddga-pagination__content {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    gap: var(--ddga-space-1);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  /* ─── Item (li) ─── */\n\n  .ddga-pagination__item {\n    display: inline-flex;\n  }\n\n  /* ─── Link (a) ─── */\n\n  .ddga-pagination__link {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    block-size: 2rem;\n    padding-inline: var(--ddga-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--ddga-radius-sm);\n    background-color: transparent;\n    color: var(--ddga-text-secondary);\n    font-family: inherit;\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color 150ms ease,\n      color 150ms ease,\n      border-color 150ms ease;\n  }\n\n  .ddga-pagination__link:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n\n  .ddga-pagination__link:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Active link (current page) ─── */\n\n  .ddga-pagination__link--active {\n    background-color: var(--ddga-color-primary);\n    color: var(--ddga-color-primary-foreground);\n    border-color: var(--ddga-color-primary);\n  }\n\n  .ddga-pagination__link--active:hover {\n    background-color: var(--ddga-color-primary-hover);\n    color: var(--ddga-color-primary-foreground);\n  }\n\n  /* ─── Prev / Next ─── */\n\n  .ddga-pagination__nav {\n    gap: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n  }\n\n  .ddga-pagination__nav-icon {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* Direction logic: chevron points \"forward\" (inline-end). The Previous\n     icon is flipped 180° in LTR so it points back; in RTL the flip is\n     un-done (RTL \"back\" = visual right = unflipped chevron). The Next icon\n     is flipped only in RTL because RTL \"forward\" = visual left. */\n  .ddga-pagination__nav-icon--previous {\n    transform: scaleX(-1);\n  }\n  [dir='rtl'] .ddga-pagination__nav-icon--previous {\n    transform: scaleX(1);\n  }\n  [dir='rtl'] .ddga-pagination__nav-icon--next {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Ellipsis ─── */\n\n  .ddga-pagination__ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    min-inline-size: 2rem;\n    block-size: 2rem;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-pagination__ellipsis > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-pagination--sm .ddga-pagination__link,\n  .ddga-pagination--sm .ddga-pagination__ellipsis {\n    min-inline-size: 1.75rem;\n    block-size: 1.75rem;\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-pagination--md .ddga-pagination__link,\n  .ddga-pagination--md .ddga-pagination__ellipsis {\n    min-inline-size: 2rem;\n    block-size: 2rem;\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-pagination__link {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-pagination__link {\n      color: LinkText;\n      border: 1px solid CanvasText;\n    }\n    .ddga-pagination__link--active {\n      color: HighlightText;\n      background-color: Highlight;\n      border-color: Highlight;\n    }\n    .ddga-pagination__link:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Size lives on the root (.ddga-breadcrumb--{sm,md}). All descendant\n     selectors cascade from there. Logical properties handle the RTL flip\n     for spacing; the separator chevron flips via `[dir='rtl'] transform`\n     because chevrons are visual-direction glyphs that CSS logical\n     properties don't auto-mirror. */\n\n  /* ─── Root (nav) ─── */\n\n  .ddga-breadcrumb {\n    color: var(--ddga-text-secondary);\n    font-family: inherit;\n    line-height: 1.4;\n  }\n\n  /* ─── List (ol) ─── */\n\n  .ddga-breadcrumb__list {\n    display: flex;\n    flex-wrap: wrap;\n    align-items: center;\n    /* Spacing between items + separator handled at item level via gap so\n       wrapped lines stay readable. */\n    gap: var(--ddga-space-2);\n    margin: 0;\n    padding: 0;\n    list-style: none;\n  }\n\n  /* ─── Item (li) ─── */\n\n  .ddga-breadcrumb__item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n  }\n\n  /* ─── Link (a) ─── */\n\n  .ddga-breadcrumb__link {\n    color: var(--ddga-text-secondary);\n    text-decoration: none;\n    border-radius: var(--ddga-radius-sm);\n    transition: color 150ms ease;\n  }\n\n  .ddga-breadcrumb__link:hover {\n    color: var(--ddga-text-primary);\n    text-decoration: underline;\n    text-underline-offset: 2px;\n  }\n\n  .ddga-breadcrumb__link:focus-visible {\n    outline: none;\n    color: var(--ddga-text-primary);\n    box-shadow: 0 0 0 2px var(--ddga-color-ring);\n  }\n\n  /* ─── Page (current) ─── */\n\n  .ddga-breadcrumb__page {\n    color: var(--ddga-text-primary);\n    font-weight: 500;\n  }\n\n  /* ─── Separator (li, decorative) ─── */\n\n  .ddga-breadcrumb__separator {\n    display: inline-flex;\n    align-items: center;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-breadcrumb__separator > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* RTL flip — chevron's geometry encodes direction. Only target the icon\n     (and any other svg child) so consumer-supplied custom separators (`/`,\n     `·`) that aren't direction-encoded stay un-flipped. */\n  [dir='rtl'] .ddga-breadcrumb__separator > svg {\n    transform: scaleX(-1);\n  }\n\n  /* ─── Ellipsis ─── */\n\n  .ddga-breadcrumb__ellipsis {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5em;\n    color: var(--ddga-text-tertiary);\n  }\n\n  .ddga-breadcrumb__ellipsis > svg {\n    inline-size: 1em;\n    block-size: 1em;\n  }\n\n  /* ─── Sizes (cascade from root) ─── */\n\n  .ddga-breadcrumb--sm {\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  .ddga-breadcrumb--md {\n    font-size: var(--ddga-font-size-sm);\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-breadcrumb__link {\n      transition: none;\n    }\n  }\n\n  /* ─── Forced colors (Windows High Contrast) ─── */\n\n  @media (forced-colors: active) {\n    .ddga-breadcrumb__link {\n      color: LinkText;\n    }\n    .ddga-breadcrumb__link:hover {\n      color: LinkText;\n    }\n    .ddga-breadcrumb__link:focus-visible {\n      outline: 2px solid Highlight;\n      outline-offset: 2px;\n    }\n    .ddga-breadcrumb__page {\n      color: CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Viewport (fixed region where toasts stack) ─── */\n  /*\n   * z-index 70 — above Modal (60), Tooltip (50). The viewport itself is\n   * pointer-events: none so it doesn't block clicks in the rest of the page;\n   * each toast re-enables pointer events for itself.\n   *\n   * Default is `position: fixed` (pinned to the browser viewport). When the\n   * `containerized` modifier is applied, it switches to `position: absolute`\n   * so it pins to a positioned ancestor instead — needed in Storybook,\n   * embedded widgets, and any case where the Toaster shouldn't escape its\n   * parent box.\n   */\n\n  .ddga-toast-viewport {\n    position: fixed;\n    z-index: 70;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-4);\n    /* min() handles both wide containers (cap at 420) and narrow ones (fill\n       minus side breathing room) in a single rule — no fragile vw-based\n       media query needed. */\n    inline-size: min(420px, calc(100% - 2rem));\n    pointer-events: none;\n    list-style: none;\n    margin: 0;\n    /* Always allow individual toasts to be clicked even when the viewport\n       itself is pass-through. */\n  }\n  .ddga-toast-viewport > * {\n    pointer-events: auto;\n  }\n\n  .ddga-toast-viewport--containerized {\n    position: absolute;\n  }\n\n  /* ─── Position anchors ─── */\n  /*\n   * Edge anchors use logical insets (`inset-inline-*`) so `start`/`end` flip\n   * automatically in RTL. Center anchors use physical `left: 50%` paired\n   * with `transform: translateX(-50%)` — centering is direction-symmetric,\n   * and the logical-inset + translate combo would shift off-axis in RTL\n   * (same trap fixed earlier in Modal).\n   */\n\n  .ddga-toast-viewport--top-start {\n    inset-block-start: 0;\n    inset-inline-start: 0;\n  }\n  .ddga-toast-viewport--top-center {\n    top: 0;\n    left: 50%;\n    transform: translateX(-50%);\n  }\n  .ddga-toast-viewport--top-end {\n    inset-block-start: 0;\n    inset-inline-end: 0;\n  }\n  .ddga-toast-viewport--bottom-start {\n    inset-block-end: 0;\n    inset-inline-start: 0;\n    flex-direction: column-reverse;\n  }\n  .ddga-toast-viewport--bottom-center {\n    bottom: 0;\n    left: 50%;\n    transform: translateX(-50%);\n    flex-direction: column-reverse;\n  }\n  .ddga-toast-viewport--bottom-end {\n    inset-block-end: 0;\n    inset-inline-end: 0;\n    flex-direction: column-reverse;\n  }\n\n  /* ─── Toast (one notification) ─── */\n\n  .ddga-toast {\n    /* Per-variant accent (icon + border-leading edge). Card-surface bg keeps\n       the toast neutral so dark + light look balanced; the leading inset\n       shadow does the variant signaling. */\n    --ddga-toast-accent: var(--ddga-color-info);\n\n    /* Explicit width = 100% of viewport so the toast reliably fills the\n       column regardless of flex defaults / browser quirks. min-inline-size:0\n       lets the body text wrap without forcing the toast wider. */\n    inline-size: 100%;\n    min-inline-size: 0;\n\n    pointer-events: auto;\n    position: relative;\n    display: flex;\n    align-items: flex-start;\n    gap: var(--ddga-space-3);\n    padding-block: var(--ddga-space-3);\n    padding-inline: var(--ddga-space-4);\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    font-family: inherit;\n    line-height: 1.4;\n    /* Outer drop shadow + inline-start accent bar in one shadow declaration.\n       Logical direction: the accent reads as the leading edge — flipped for\n       RTL via the rule below. */\n    box-shadow:\n      var(--ddga-shadow-lg),\n      inset 3px 0 0 0 var(--ddga-toast-accent);\n  }\n  [dir='rtl'] .ddga-toast {\n    box-shadow:\n      var(--ddga-shadow-lg),\n      inset -3px 0 0 0 var(--ddga-toast-accent);\n  }\n\n  .ddga-toast--default {\n    --ddga-toast-accent: var(--ddga-color-border);\n  }\n  .ddga-toast--info {\n    --ddga-toast-accent: var(--ddga-color-info);\n  }\n  .ddga-toast--success {\n    --ddga-toast-accent: var(--ddga-color-success);\n  }\n  .ddga-toast--warning {\n    --ddga-toast-accent: var(--ddga-color-warning);\n  }\n  .ddga-toast--destructive {\n    --ddga-toast-accent: var(--ddga-color-destructive);\n  }\n\n  /* ─── Icon (leading) ─── */\n\n  .ddga-toast__icon {\n    flex-shrink: 0;\n    inline-size: 1.25em;\n    block-size: 1.25em;\n    color: var(--ddga-toast-accent);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    /* Optical-center with the title's cap height. */\n    margin-block-start: 0.125em;\n  }\n  .ddga-toast__icon > svg {\n    inline-size: 100%;\n    block-size: 100%;\n  }\n\n  /* ─── Body (title + description + action stack) ─── */\n\n  .ddga-toast__body {\n    flex: 1 1 0;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    /* Leave room for the absolutely-positioned close button so long titles\n       don't run under it. */\n    padding-inline-end: var(--ddga-space-5);\n  }\n\n  .ddga-toast__title {\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-semibold);\n    margin: 0;\n    color: inherit;\n    /* Allow wrapping on long titles; we don't want truncation here. */\n    overflow-wrap: anywhere;\n  }\n  .ddga-toast__description {\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-secondary);\n    margin: 0;\n    overflow-wrap: anywhere;\n  }\n\n  /* ─── Action button (inside body) ─── */\n\n  .ddga-toast__action {\n    align-self: flex-end;\n    margin-block-start: var(--ddga-space-2);\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-3);\n    background: transparent;\n    border: 1px solid var(--ddga-color-border);\n    color: var(--ddga-toast-accent);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    cursor: pointer;\n    white-space: nowrap;\n    transition:\n      background-color 150ms ease,\n      border-color 150ms ease,\n      color 150ms ease;\n  }\n  .ddga-toast__action:hover {\n    background-color: var(--ddga-color-muted);\n    border-color: var(--ddga-toast-accent);\n  }\n  .ddga-toast__action:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n  }\n\n  /* ─── Close button (corner, on the root) ─── */\n\n  .ddga-toast__close {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    padding: 0;\n    border: 0;\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    border-radius: var(--ddga-radius-sm);\n    cursor: pointer;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    opacity: 0.7;\n    transition:\n      opacity 150ms ease,\n      background-color 150ms ease;\n  }\n  .ddga-toast__close > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n  .ddga-toast__close:hover {\n    opacity: 1;\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-toast__close:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px var(--ddga-toast-accent);\n    opacity: 1;\n  }\n\n  /* ─── Animations (Radix data-state + swipe) ─── */\n  /*\n   * Slide-in direction is anchored on the viewport's position. Bottom and\n   * top positions slide vertically from the anchored edge so the motion\n   * always feels like the toast is \"coming from\" the corner it lives in.\n   * For start/end positions in RTL, the slide is still vertical — no\n   * horizontal/inline animations to avoid the RTL transform tangle.\n   */\n\n  .ddga-toast[data-state='open'] {\n    animation: ddga-toast-in 220ms cubic-bezier(0.16, 1, 0.3, 1);\n  }\n  .ddga-toast[data-state='closed'] {\n    animation: ddga-toast-out 180ms ease forwards;\n  }\n\n  /* Radix portals toasts as children of the Viewport, so the descendant\n     selector targets them. Bottom: come up from below. Top: come down. */\n  .ddga-toast-viewport[data-position^='bottom-'] .ddga-toast[data-state='open'] {\n    animation-name: ddga-toast-slide-up;\n  }\n  .ddga-toast-viewport[data-position^='top-'] .ddga-toast[data-state='open'] {\n    animation-name: ddga-toast-slide-down;\n  }\n\n  /* Swipe gesture (Radix sets --radix-toast-swipe-move-x/y while dragging). */\n  .ddga-toast[data-swipe='move'] {\n    transform: translate3d(\n      var(--radix-toast-swipe-move-x, 0),\n      var(--radix-toast-swipe-move-y, 0),\n      0\n    );\n  }\n  .ddga-toast[data-swipe='cancel'] {\n    transform: translate3d(0, 0, 0);\n    transition: transform 200ms ease-out;\n  }\n  .ddga-toast[data-swipe='end'] {\n    animation: ddga-toast-out 180ms ease forwards;\n  }\n\n  @keyframes ddga-toast-in {\n    from {\n      opacity: 0;\n      transform: translateY(8px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-slide-up {\n    from {\n      opacity: 0;\n      transform: translateY(24px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-slide-down {\n    from {\n      opacity: 0;\n      transform: translateY(-24px);\n    }\n    to {\n      opacity: 1;\n      transform: translateY(0);\n    }\n  }\n  @keyframes ddga-toast-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n      transform: scale(0.95);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-toast,\n    .ddga-toast[data-state='open'],\n    .ddga-toast[data-state='closed'] {\n      animation-duration: 1ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-toast {\n      border-color: CanvasText;\n    }\n    .ddga-toast__action:focus-visible,\n    .ddga-toast__close:focus-visible {\n      outline: 2px solid Highlight;\n      box-shadow: none;\n    }\n  }\n}\n"],"names":[]}
+{"version":3,"mappings":"AAAA,iBKAA,+9LA2MA,mMOxMA,8jECFA,seAgBA,0fAgBA,ugBAgBA,iiBAgBA,iiBAgBA,0fAgBA,6fAgBA,8iBXjHA,0DAQA,2MAWA,wCAQA,4KAkBA,gDF7CA,uBQKE,uEAMA,iFAMA,8DAIA,0DAIA,+FAMA,4DJ5BA,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,6FYxYF,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,qFAOA,+DAGA,yEAGA,iJAcA,gEAAA,0GAIA,6KAYA,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,kMAKA,qFAAA,+HAIA,6MAIA,iIAAA,8IAAA,qIAWA,wRAQA,wHAMA,uCACE,kCAQF,8BACE,6CAGA,6EAIA,6EAGA,+Ff9aF,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,uEAGA,+IAcA,8DAAA,sGAIA,yKAYA,2IAQA,4HAQA,+HAKA,mIAKA,iHAGA,mOASA,6FAGA,8FAGA,8FASA,sEAGA,4GAIA,wFAGA,0IAIA,qGAGA,4LAKA,mFAAA,2HAIA,qMAIA,2HAAA,wIAMA,4QAQA,sHAMA,uCACE,gCAQF,8BACE,2CAGA,2EAIA,yEAGA,yFU/PF,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,8DQjPF,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,iFlBzLF,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,kDQ3LF,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,uCQtRF,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,8CtCvJF,oEAOA,yEAGA,2EAGA,gFAGA,oDAIA,6HAUA,4KASA,+EAGA,8EAKA,oHAQA,0IAOA,qIAMA,4EAKA,+DAGA,wEAOA,4DAIA,4GAMA,8BACE,kGO5FF,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,0IOtYF,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,kFQ7UF,gFAQA,iIAYA,sFAQA,iIAOA,gHAMA,6HASA,8FAOA,8FAOA,uEAQA,+DAMA,2IAQA,8DAOA,gLAUA,wEAGA,0GAOA,wDAIA,wDAMA,uCACE,wCAOF,8BACE,mEAMA,oFAIA,yCE/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,+ErDlPF,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,oEc1KF,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,mCQjEF,mfAiBA,+EAMA,qFAMA,uFAMA,qFAMA,4FAIA,2FASA,2EAIA,+FASA,oCAIA,uCACE,wCAKF,8BACE,0CQ5EF,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,8FezVF,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,4FD5NF,0IAWA,6EAGA,gFAIA,6DAQA,8DAWA,gUAkBA,kIAMA,8HAMA,8HAMA,+HAYA,mGAIA,mGAIA,mGAIA,4FAKA,mGAIA,mGAIA,mGAIA,4FAOA,+EAGA,kFAGA,2EAGA,8EAGA,2EAGA,8EAGA,iFAGA,oFAOA,+FAQA,gGAQA,4FAQA,6FAQA,+FAQA,gGAQA,iGAQA,kGAWA,uFAGA,0FAGA,uFAGA,0FAMA,mHAMA,0FAOA,8PAaA,gKAQA,6HAQA,iWAiBA,sGAIA,8FAIA,+DAOA,uCACE,mDAQF,8BACE,0CG3TF,wOASA,qDAOA,+ZAoBA,8EAIA,gFAKA,+FAIA,+FAKA,4GAOA,uDAKA,mGAQA,2GAKA,mFAIA,gFAGA,wJAUA,mFAGA,kKAUA,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,4KAIA,wGAGA,qJAIA,mGAGA,uFAGA,iLAKA,6FAMA,uCACE,kGAKF,8BACE,0EAIA,oFAIA,uFAIA,wEC/WF,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,2F9DpWF,iEAIA,yNASA,wDAMA,+XAmBA,iFAIA,mFAMA,kGAIA,kGAOA,8IAQA,iDAIA,sNASA,wEAGA,+HAIA,0FAIA,8GAQA,uJAUA,oFAMA,4GAMA,8EAGA,oLAcA,2JAIA,gPAYA,uKAQA,2IAKA,4DAGA,mWAWA,kGAMA,gHAIA,4EAGA,kGAGA,gKAIA,8HAGA,oRAMA,kMAKA,4JAIA,8NASA,uCACE,2CAOF,8BACE,sDAGA,4FAIA,+DAGA,oFQ9PF,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,qIASA,mOAUA,2CAKA,mIASA,yHAIA,2IAQA,uCAGA,mEAMA,uCACE,qCAOF,8BACE,wEAIA,+CAGA,2EAIA,kFQ7IF,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,2EAGA,mJAaA,8KAMA,iJAAA,8KAYA,uJAQA,oIAQA,oHAIA,mIAIA,6HAIA,2PAUA,iGAGA,kGAGA,kGASA,yGAIA,iFAGA,4FAGA,kJAIA,mHAIA,0GAGA,sGAGA,6IAKA,oFAGA,yGAGA,sJAAA,2HAKA,qNAOA,qNAIA,uIAAA,oJAQA,oSAQA,0HAMA,uCACE,6DASF,8BACE,+CAGA,sEAIA,+EAIA,iFAGA,qGQ3WF,+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,gGQ9EF,yaAmBA,oTAYA,wHAKA,iKAQA,8HAOA,gKAYA,0HAKA,gIAOA,4JAMA,oFAGA,wFAIA,2JAMA,kFAQA,iIAIA,yIAIA,6IAMA,8BACE,sDOvHF,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,iEQjIF,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,8CC/FF,qRAiBA,0dAqBA,iFAIA,0FAUA,qOAYA,2FAMA,0HAIA,kGAMA,sEAKA,2FAMA,wHAOA,uUAgBA,iGAGA,mFAIA,gIAUA,4DAWA,0DAGA,4DAMA,uUAiBA,oFAIA,4FAOA,+EAGA,mGAKA,gHAQA,qKASA,4DAKA,8IASA,8GAMA,qQAYA,wEAIA,wJAYA,wFAIA,wHAQA,+DAMA,mQAYA,oFAIA,6DAIA,qKAYA,8IAOA,8BACE,0CAGA,gIAKA,oFAIA,+CAGA,0FAIA,2DAOF,uCACE,6EAIA,0Fd7UF,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,sDJtQF,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,oDQ1LF,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,uE9BhMF,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,sDQnGA,8VAiBA,sCAGA,sCAGA,0DAIA,iCAIA,iHAOA,2JAQA,2JAMA,sCAGA,gEAMA,sFAOA,uLASA,wEAMA,sGAOA,sJAOA,+JAWA,6NAUA,sFAKA,6FAKA,iDAGA,wDAMA,0HAMA,8BACE,oCe1IF,+DAOA,iJAYA,sIAMA,iHAQA,4EAKA,yFAGA,yFAQA,iDAIA,wGAQA,sGAWA,uCACE,0GAQF,8BACE,yGCpFF,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,oFAGA,0LAQA,uKAIA,4PAYA,yLAKA,uJAKA,kEAGA,qeAUA,wGAWA,kFAGA,uJAIA,iJAKA,0KAQA,sHAIA,kFAGA,wGAGA,4KAIA,oIAIA,sSAMA,8MAKA,wKAIA,kIAQA,uCACE,iDAOF,8BACE,4DAGA,kGAIA,qEAIA,yEAGA,+EFzQF,+HAWA,sDAMA,iEQzBA,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,qF3BjLF,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,yHQxLF,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,qFQ9OF,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,+DdpNF,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,6IQhQF,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,gEQlFF,gXAkBA,0DAKA,mKAOA,qHAMA,uHAOA,mDAIA,sDAIA,qEAMA,uFAIA,oGAGA,uIAIA,6FAIA,8FAGA,+FAKA,gGAIA,sGAGA,uGAGA,+FAIA,gGAGA,iGAKA,2FAOA,kKASA,kHAIA,wHAGA,yHAGA,wKAIA,2JAGA,8LAIA,+JAMA,8BACE,uCAGA,qDAGA,wFAKA,sDC3JF,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,6CxCxIJ","sources":["src/index.css","src/reset.css","src/components/divider.css","src/components/textarea.css","src/variables.css","src/dark.css","src/components/field.css","src/components/date-picker.css","src/components/button.css","src/components/content-switcher.css","src/components/avatar.css","src/components/checkbox.css","src/components/accordion.css","src/themes.css","src/components/search-box.css","src/components/file-upload.css","src/components/text-input.css","src/components/select.css","src/components/tooltip.css","src/components/radio.css","src/components/switch.css","src/components/popover.css","src/components/list.css","src/components/slider.css","src/components/timeline.css","src/components/card.css","src/components/inline-alert.css","src/components/progress-indicator.css","src/components/table.css","src/components/sidebar.css","src/components/scroll-area.css","src/components/number-input.css","src/components/command.css","src/components/tag.css","src/components/modal.css","src/components/spinner.css","src/components/input-otp.css","src/components/quote.css","src/components/menubar.css","src/components/rating.css","src/components/floating-button.css","src/components/status-tag.css","src/components/notification-toast.css","src/components/skeleton.css","src/components/link.css","src/components/collapsible.css","src/components/tag-input.css","src/components/toggle.css","src/components/filtration.css","src/components/tabs.css","src/components/digital-stamp.css","src/components/slideout-menu.css","src/components/aspect-ratio.css","src/components/charts.css","src/components/date-range-picker.css","src/components/description-list.css","src/components/carousel.css","src/components/breadcrumb.css","src/components/progress.css","src/components/pagination.css","src/components/structured-list.css","src/components/chip.css","src/components/saudi-riyal.css","src/components/empty-state.css","src/components/code-snippet.css","src/components/drawer.css","src/components/dropdown-menu.css","src/components/notification.css","src/components/dropdown.css","src/components/calendar.css","src/components/metric.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","*,\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  .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  /* 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  .ddga-textarea:focus-within::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  }\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    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\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:focus-within::after,\n  [data-theme='dark'] .ddga-textarea:active::after,\n  [data-theme='dark'] .ddga-textarea--pressed::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      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",":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","/* 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  /* 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  /* 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  .ddga-date-picker-trigger[data-focus-within]:not([data-pressed])::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  }\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    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\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[data-focus-within]::after,\n  [data-theme='dark']\n    .ddga-date-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n  [data-theme='dark'] .ddga-date-picker-trigger--pressed::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      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  /* ─── 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  /* 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  /* ─── 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  /* 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  /* ─── 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","/* 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-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  .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  .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  /* ─── 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    content: '';\n    position: absolute;\n    inset-inline: 0;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\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    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\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:focus-within::after,\n  [data-theme='dark'] .ddga-text-input:active::after,\n  [data-theme='dark'] .ddga-text-input--pressed::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      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  /* 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  .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 — 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  /* 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  /* ─── 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  /* 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  .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    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  }\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  /* 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  .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  .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  /* 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","@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  /* App-shell navigation. CSS keys off data-attributes set on the <aside>:\n     data-state (expanded|collapsed), data-collapsible (icon|offcanvas|none),\n     data-variant (sidebar|floating|inset), data-side (start|end). Widths are\n     custom properties so consumers override per instance. Logical properties\n     keep it RTL-correct; the few direction-specific bits flip via [dir='rtl']. */\n\n  .ddga-sidebar-wrapper {\n    --ddga-sidebar-width: 16rem;\n    --ddga-sidebar-width-icon: 3.5rem;\n\n    display: flex;\n    /* Self-sufficient full height. This must be a DEFINITE height, not a `min-`:\n       the aside is `block-size:100%`, which only resolves against a definite\n       parent — with a `min-block-size` the wrapper stays content-sized, the\n       percentage falls back to `auto`, and the footer detaches from the viewport\n       bottom (and a long nav can't scroll inside `__content`). A definite\n       `100svh` makes the footer stick and the nav scroll with zero consumer\n       config — no html→body→root height chain. `svh` (not `dvh`) avoids reflow as\n       mobile browser chrome shows/hides. Escape hatch for an embedded/boxed shell:\n       set a definite `height`/`block-size` on the provider (inline style wins),\n       e.g. `<SidebarProvider style={{ blockSize: '24rem' }}>`. */\n    block-size: 100svh;\n    inline-size: 100%;\n  }\n\n  /* ─── Container ─── */\n\n  .ddga-sidebar {\n    display: flex;\n    flex-direction: column;\n    flex: none;\n    inline-size: var(--ddga-sidebar-width);\n    block-size: 100%;\n    background-color: var(--ddga-color-background);\n    color: var(--ddga-text-primary);\n    border-inline-end: 1px solid var(--ddga-color-border);\n    /* Shared easing + duration for the whole collapse so width, paddings and\n       fades stay in lockstep (Material standard ease). */\n    transition: inline-size 250ms cubic-bezier(0.4, 0, 0.2, 1);\n    will-change: inline-size;\n    overflow: hidden;\n  }\n\n  /* side=end → border on the opposite logical edge and order after the inset. */\n  .ddga-sidebar[data-side='end'] {\n    order: 1;\n    border-inline-end: 0;\n    border-inline-start: 1px solid var(--ddga-color-border);\n  }\n\n  /* Collapsed icon rail. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] {\n    inline-size: var(--ddga-sidebar-width-icon);\n  }\n\n  /* Offcanvas collapse fully hides on desktop. */\n  .ddga-sidebar[data-collapsible='offcanvas'][data-state='collapsed'] {\n    inline-size: 0;\n    border-inline: 0;\n  }\n\n  /* ─── Variants ─── */\n\n  .ddga-sidebar[data-variant='floating'] {\n    margin: var(--ddga-space-2);\n    block-size: auto;\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-md);\n  }\n\n  .ddga-sidebar[data-variant='inset'] {\n    border-inline-end: 0;\n    background-color: transparent;\n  }\n\n  /* Mobile: the Drawer owns positioning; just set the panel width + layout. */\n  .ddga-sidebar--mobile {\n    inline-size: var(--ddga-sidebar-width);\n    max-inline-size: 85vw;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* ─── Inset (main content region) ─── */\n\n  .ddga-sidebar-inset {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    display: flex;\n    flex-direction: column;\n  }\n\n  /* Opt-in (`<SidebarInset scrollable>`): make the inset its own vertical scroll\n     region. The wrapper's definite `block-size:100svh` gives the stretched inset\n     a definite height, so `min-block-size:0` + `overflow-y:auto` let tall content\n     scroll inside it — the sidebar + footer stay put — with NO consumer\n     flex/min-block-size/overflow CSS. The whole inset scrolls (header included);\n     for a fixed header with only the body scrolling, leave this off and compose a\n     nested scroll region inside the inset (see the App shell story). */\n  .ddga-sidebar-inset--scrollable {\n    min-block-size: 0;\n    overflow-y: auto;\n  }\n\n  /* When a sibling sidebar uses variant=inset, the main area floats as a card.\n     Consumers put <Sidebar variant=\"inset\"> + <SidebarInset> as siblings; the\n     inset card styling is opt-in via a modifier the consumer adds, OR scope by\n     wrapper. Keep it simple: provide the card look on a data hook. */\n  .ddga-sidebar-wrapper:has(.ddga-sidebar[data-variant='inset']) .ddga-sidebar-inset {\n    margin: var(--ddga-space-2);\n    background-color: var(--ddga-color-background);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-sm);\n    overflow: hidden;\n  }\n\n  /* ─── Trigger / Rail ─── */\n\n  .ddga-sidebar__trigger {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 2rem;\n    block-size: 2rem;\n    padding: 0;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n  }\n  .ddga-sidebar__trigger:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__trigger:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  .ddga-sidebar__trigger > svg {\n    inline-size: 1.125rem;\n    block-size: 1.125rem;\n  }\n\n  .ddga-sidebar__rail {\n    position: absolute;\n    inset-block: 0;\n    inset-inline-end: 0;\n    inline-size: 0.75rem;\n    transform: translateX(50%);\n    cursor: col-resize;\n    border: 0;\n    background: transparent;\n  }\n  [dir='rtl'] .ddga-sidebar__rail {\n    transform: translateX(-50%);\n  }\n\n  /* ─── Header / Content / Footer / Separator ─── */\n\n  .ddga-sidebar__header,\n  .ddga-sidebar__footer {\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-2);\n    padding: var(--ddga-space-2);\n  }\n\n  .ddga-sidebar__content {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    overflow-y: auto;\n    overflow-x: hidden;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n    padding: var(--ddga-space-2);\n    transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .ddga-sidebar__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    margin-inline: var(--ddga-space-2);\n    border: 0;\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Group ─── */\n\n  .ddga-sidebar__group {\n    position: relative;\n    display: flex;\n    flex-direction: column;\n    padding: var(--ddga-space-2);\n    transition: padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n\n  .ddga-sidebar__group-label {\n    display: flex;\n    align-items: center;\n    block-size: 1.75rem;\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n    white-space: nowrap;\n    overflow: hidden;\n    transition:\n      block-size 250ms cubic-bezier(0.4, 0, 0.2, 1),\n      opacity 150ms ease;\n  }\n  /* Protect Arabic letter joining — no tracking, no uppercasing. */\n  [dir='rtl'] .ddga-sidebar__group-label {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .ddga-sidebar__group-action {\n    position: absolute;\n    inset-block-start: var(--ddga-space-2);\n    inset-inline-end: var(--ddga-space-2);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n    transition: opacity 150ms ease;\n  }\n  .ddga-sidebar__group-action:hover {\n    background-color: var(--ddga-color-muted);\n  }\n\n  /* Collapsed rail — fade/collapse instead of display:none so nothing pops.\n     Group label collapses its height (and fades); group action + badge fade.\n     The sub-menu list is the only hard hide (it's replaced by the Popover\n     flyout when collapsed, so animating it adds no value). */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-label {\n    block-size: 0;\n    margin-block: 0;\n    padding-block: 0;\n    opacity: 0;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group-action,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-badge {\n    opacity: 0;\n    pointer-events: none;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-sub {\n    display: none;\n  }\n\n  /* ─── Menu ─── */\n\n  .ddga-sidebar__menu {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n    /* Fill the container's inline size. In `__content`/`__group` (which keep the\n       default `align-items: stretch`) this is a no-op. It matters inside a\n       collapsed `__header`/`__footer`, which switch to `align-items: center` to\n       centre non-menu content: without a definite width the <ul> shrinks to its\n       content width — the icon-centring padding PLUS the still-in-layout\n       `opacity:0` label — so it grows past the icon rail, gets centred, and is\n       clipped by the aside's `overflow: hidden`, leaving only an icon sliver. A\n       definite `100%` keeps the menu at the rail width so its button centres its\n       icon exactly like the main nav. Logical property → RTL-safe. */\n    inline-size: 100%;\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-sidebar__menu-item {\n    position: relative;\n  }\n\n  .ddga-sidebar__menu-button {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    min-inline-size: 0;\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-2);\n    border: 0;\n    border-radius: var(--ddga-radius-md);\n    background: transparent;\n    color: var(--ddga-text-primary);\n    font-size: var(--ddga-font-size-sm);\n    font-weight: var(--ddga-font-weight-medium);\n    text-align: start;\n    text-decoration: none;\n    cursor: pointer;\n    overflow: hidden;\n    white-space: nowrap;\n    /* background/color ease for hover + active feedback; padding-inline shares\n       the collapse easing so the icon glides to centre in lockstep with width. */\n    transition:\n      background-color 120ms ease,\n      color 120ms ease,\n      padding-inline 250ms cubic-bezier(0.4, 0, 0.2, 1);\n  }\n  .ddga-sidebar__menu-button > svg {\n    flex: none;\n    inline-size: 1.125rem;\n    block-size: 1.125rem;\n    color: var(--ddga-text-secondary);\n    transition: color 120ms ease;\n  }\n  /* Everything after the leading icon (label, trailing chevron, inline badge)\n     fades on collapse rather than snapping out. */\n  .ddga-sidebar__menu-button > *:not(:first-child) {\n    transition: opacity 150ms ease;\n  }\n  .ddga-sidebar__menu-button:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-sidebar__menu-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n  .ddga-sidebar__menu-button:active {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__menu-button[data-active='true'] {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-sidebar__menu-button[data-active='true'] > svg {\n    color: var(--ddga-color-primary);\n  }\n\n  .ddga-sidebar__menu-button--sm {\n    padding-block: var(--ddga-space-1);\n    font-size: var(--ddga-font-size-xs);\n  }\n  .ddga-sidebar__menu-button--lg {\n    padding-block: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-base);\n  }\n\n  /* Collapsed rail: the icon stays at flex-start (NO justify-content switch —\n     that would snap it to the centre of the still-wide box, then swoop inward).\n     Instead the parent content/group padding animates to 0 and the button's own\n     inline padding grows to exactly centre the 1.125rem icon in the rail. Net\n     icon travel is a few px, fully in sync with the width, so no glitch. The\n     label/chevron/badge fade via the base opacity transition above. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__content,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__group,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n    padding-inline: 0;\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__menu-button {\n    padding-inline: calc((var(--ddga-sidebar-width-icon) - 1.125rem) / 2);\n  }\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed']\n    .ddga-sidebar__menu-button\n    > *:not(:first-child) {\n    opacity: 0;\n  }\n\n  /* Collapsed rail: header/footer drop their inline padding (above) so a menu\n     button inside them fills the rail and self-centres its icon EXACTLY like the\n     main-nav buttons (consistency — a footer profile button must match the nav).\n     `align-items: center` then centres non-stretching content (a brand/label)\n     and clips overflow so a wide label doesn't spill past the rail edge. */\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__header,\n  .ddga-sidebar[data-collapsible='icon'][data-state='collapsed'] .ddga-sidebar__footer {\n    align-items: center;\n  }\n\n  /* ─── Menu action / badge / skeleton ─── */\n\n  .ddga-sidebar__menu-action {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: var(--ddga-space-1);\n    transform: translateY(-50%);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    inline-size: 1.5rem;\n    block-size: 1.5rem;\n    border: 0;\n    border-radius: var(--ddga-radius-sm);\n    background: transparent;\n    color: var(--ddga-text-secondary);\n    cursor: pointer;\n  }\n  .ddga-sidebar__menu-action:hover {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-sidebar__menu-action:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: 2px;\n  }\n  .ddga-sidebar__menu-action[data-show-on-hover] {\n    opacity: 0;\n  }\n  .ddga-sidebar__menu-item:hover .ddga-sidebar__menu-action[data-show-on-hover],\n  .ddga-sidebar__menu-action[data-show-on-hover]:focus-visible {\n    opacity: 1;\n  }\n\n  .ddga-sidebar__menu-badge {\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-end: var(--ddga-space-2);\n    transform: translateY(-50%);\n    pointer-events: none;\n    min-inline-size: 1.25rem;\n    block-size: 1.25rem;\n    padding-inline: var(--ddga-space-1);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-radius: var(--ddga-radius-full);\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-medium);\n  }\n\n  .ddga-sidebar__menu-skeleton {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    block-size: 2rem;\n    padding-inline: var(--ddga-space-2);\n  }\n  .ddga-sidebar__menu-skeleton-text {\n    flex: 1 1 auto;\n    max-inline-size: 12rem;\n  }\n\n  /* ─── Sub-menu ─── */\n\n  .ddga-sidebar__menu-sub {\n    list-style: none;\n    margin: 0;\n    margin-inline-start: var(--ddga-space-3);\n    padding-inline-start: var(--ddga-space-2);\n    border-inline-start: 1px solid var(--ddga-color-border);\n    display: flex;\n    flex-direction: column;\n    gap: var(--ddga-space-1);\n  }\n\n  .ddga-sidebar__menu-sub-button {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    inline-size: 100%;\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    color: var(--ddga-text-secondary);\n    font-size: var(--ddga-font-size-sm);\n    text-decoration: none;\n    cursor: pointer;\n    transition:\n      background-color 120ms ease,\n      color 120ms ease;\n  }\n  .ddga-sidebar__menu-sub-button:hover {\n    background-color: var(--ddga-color-muted);\n    color: var(--ddga-text-primary);\n  }\n  .ddga-sidebar__menu-sub-button:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n  .ddga-sidebar__menu-sub-button[data-active='true'] {\n    color: var(--ddga-color-primary);\n    font-weight: var(--ddga-font-weight-semibold);\n  }\n  .ddga-sidebar__menu-sub-button--sm {\n    font-size: var(--ddga-font-size-xs);\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-sidebar {\n      border-color: CanvasText;\n    }\n    .ddga-sidebar__menu-button[data-active='true'],\n    .ddga-sidebar__menu-button:hover {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-sidebar__menu-sub-button[data-active='true'],\n    .ddga-sidebar__menu-sub-button:hover {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-sidebar__separator,\n    .ddga-sidebar__menu-sub {\n      background-color: CanvasText;\n      border-color: CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-sidebar,\n    .ddga-sidebar__content,\n    .ddga-sidebar__group,\n    .ddga-sidebar__group-label,\n    .ddga-sidebar__group-action,\n    .ddga-sidebar__menu-button,\n    .ddga-sidebar__menu-button > svg,\n    .ddga-sidebar__menu-button > *,\n    .ddga-sidebar__menu-badge,\n    .ddga-sidebar__menu-sub-button {\n      transition: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* Cross-browser styled scroll container (Radix ScrollArea). The Root clips;\n     the viewport scrolls; custom scrollbars overlay the end edges. Logical\n     properties keep it RTL-correct — Radix moves the vertical scrollbar to the\n     inline-start edge based on `dir`. The consumer sets the bounding size\n     (height / max-height) on the Root; without it nothing scrolls. */\n\n  .ddga-scroll-area {\n    --ddga-scroll-area-size: 0.625rem;\n    --ddga-scroll-area-thumb: var(--ddga-gray-400);\n    --ddga-scroll-area-thumb-hover: var(--ddga-gray-500);\n\n    position: relative;\n    overflow: hidden;\n  }\n\n  .ddga-scroll-area__viewport {\n    block-size: 100%;\n    inline-size: 100%;\n    border-radius: inherit;\n  }\n  .ddga-scroll-area__viewport:focus-visible {\n    outline: 2px solid var(--ddga-color-ring);\n    outline-offset: -2px;\n  }\n\n  /* Radix wraps the viewport's children in an inline-styled `display:table` div\n     so a HORIZONTAL scroll area can measure max-content width. In a vertical-only\n     scroll area that wrapper instead expands past the viewport for wide content\n     (e.g. a Table) — and there's no horizontal scrollbar to reach it, so columns\n     get clipped (worst on mobile). For vertical orientation, force the wrapper to\n     block layout: width is constrained to the viewport, and wide children shrink\n     or own their own horizontal overflow (a Table scrolls inside its region).\n     `!important` is required to beat Radix's inline style. Horizontal/both keep\n     the table wrapper so their horizontal scroll still works. */\n  .ddga-scroll-area__viewport--vertical > div {\n    display: block !important;\n  }\n\n  /* ─── Scrollbar ─── */\n\n  .ddga-scroll-area__scrollbar {\n    display: flex;\n    padding: 2px;\n    background: transparent;\n    touch-action: none;\n    user-select: none;\n    transition: opacity 160ms ease;\n  }\n  .ddga-scroll-area__scrollbar[data-orientation='vertical'] {\n    inline-size: var(--ddga-scroll-area-size);\n  }\n  .ddga-scroll-area__scrollbar[data-orientation='horizontal'] {\n    flex-direction: column;\n    block-size: var(--ddga-scroll-area-size);\n  }\n\n  .ddga-scroll-area__thumb {\n    position: relative;\n    flex: 1;\n    background-color: var(--ddga-scroll-area-thumb);\n    border-radius: var(--ddga-radius-full);\n  }\n  /* 44px minimum pointer hit target (Radix-recommended ::before trick). */\n  .ddga-scroll-area__thumb::before {\n    content: '';\n    position: absolute;\n    inset-block-start: 50%;\n    inset-inline-start: 50%;\n    transform: translate(-50%, -50%);\n    min-inline-size: 44px;\n    min-block-size: 44px;\n  }\n  .ddga-scroll-area__thumb:hover {\n    background-color: var(--ddga-scroll-area-thumb-hover);\n  }\n\n  .ddga-scroll-area__corner {\n    background: transparent;\n  }\n\n  /* ─── Dark mode ─── */\n  /* Neutral gray thumbs read too dark on a dark page; use translucent white. */\n  [data-theme='dark'] .ddga-scroll-area {\n    --ddga-scroll-area-thumb: rgb(255 255 255 / 0.2);\n    --ddga-scroll-area-thumb-hover: rgb(255 255 255 / 0.3);\n  }\n\n  /* ─── Forced colors ─── */\n  @media (forced-colors: active) {\n    .ddga-scroll-area__thumb {\n      background-color: CanvasText;\n      border: 1px solid CanvasText;\n    }\n  }\n\n  /* ─── Reduced motion ─── */\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-scroll-area__scrollbar {\n      transition: none;\n    }\n  }\n}\n","@layer ddga-components {\n  /* 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  .ddga-number-input:focus-within::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  }\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    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\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:focus-within::after,\n  [data-theme='dark'] .ddga-number-input:has(.ddga-number-input__field:active)::after,\n  [data-theme='dark'] .ddga-number-input--pressed::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__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  /* ─── Root (cmdk container) ─── */\n  /*\n   * Base look is the standalone inline box (bordered card). Inside\n   * CommandDialog the `--dialog` modifier drops the border/bg because the\n   * dialog shell owns the surface.\n   */\n  .ddga-command {\n    display: flex;\n    flex-direction: column;\n    inline-size: 100%;\n    min-block-size: 0;\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-md);\n    overflow: hidden;\n  }\n\n  .ddga-command--dialog {\n    border: 0;\n    border-radius: 0;\n    background-color: transparent;\n  }\n\n  /* ─── Search input row ─── */\n\n  .ddga-command__input-wrapper {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-3);\n    border-block-end: 1px solid var(--ddga-color-border);\n  }\n\n  .ddga-command__search-icon {\n    flex-shrink: 0;\n    inline-size: 1rem;\n    block-size: 1rem;\n    color: var(--ddga-text-secondary);\n  }\n\n  .ddga-command__input {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    padding-block: var(--ddga-space-3);\n    border: 0;\n    background-color: transparent;\n    color: inherit;\n    font: inherit;\n    outline: none;\n  }\n  .ddga-command__input::placeholder {\n    color: var(--ddga-text-placeholder);\n  }\n\n  /* ─── List + states ─── */\n\n  .ddga-command__list {\n    flex: 1 1 auto;\n    min-block-size: 0;\n    /* Cap height for the inline surface; the dialog overrides via its own\n       max-block-size. cmdk scroll-into-view drives against this container. */\n    max-block-size: min(360px, 60vh);\n    overflow-y: auto;\n    overflow-x: hidden;\n    padding: var(--ddga-space-1);\n    scroll-padding-block: var(--ddga-space-1);\n  }\n\n  .ddga-command__empty {\n    padding-block: var(--ddga-space-5);\n    padding-inline: var(--ddga-space-3);\n    font-size: var(--ddga-font-size-sm);\n    color: var(--ddga-text-tertiary);\n    text-align: center;\n  }\n\n  /* ─── Group + separator ─── */\n\n  .ddga-command__group [cmdk-group-heading] {\n    padding-block: var(--ddga-space-1);\n    padding-inline: var(--ddga-space-2);\n    font-size: var(--ddga-font-size-xs);\n    font-weight: var(--ddga-font-weight-semibold);\n    color: var(--ddga-text-tertiary);\n    text-transform: uppercase;\n    letter-spacing: 0.04em;\n  }\n  /* Protect Arabic cursive joining — drop the tracking when RTL. */\n  [dir='rtl'] .ddga-command__group [cmdk-group-heading] {\n    letter-spacing: normal;\n    text-transform: none;\n  }\n\n  .ddga-command__separator {\n    block-size: 1px;\n    margin-block: var(--ddga-space-1);\n    background-color: var(--ddga-color-border);\n  }\n\n  /* ─── Item ─── */\n\n  .ddga-command__item {\n    display: flex;\n    align-items: center;\n    gap: var(--ddga-space-2);\n    padding-block: var(--ddga-space-2);\n    padding-inline: var(--ddga-space-2);\n    border-radius: var(--ddga-radius-sm);\n    font-size: var(--ddga-font-size-sm);\n    color: inherit;\n    cursor: default;\n    user-select: none;\n    outline: none;\n    -webkit-tap-highlight-color: transparent;\n  }\n  /* cmdk highlights the active item (keyboard / hover) via data-selected. */\n  .ddga-command__item[data-selected='true'] {\n    background-color: var(--ddga-color-muted);\n  }\n  .ddga-command__item[data-disabled='true'] {\n    color: var(--ddga-text-tertiary);\n    pointer-events: none;\n  }\n\n  .ddga-command__item-icon {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    flex-shrink: 0;\n    inline-size: 1rem;\n    block-size: 1rem;\n    color: var(--ddga-text-secondary);\n  }\n  .ddga-command__item-icon > svg {\n    inline-size: 1rem;\n    block-size: 1rem;\n  }\n\n  .ddga-command__item-label {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    overflow: hidden;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n  }\n\n  /* Shortcut hint sits at the inline-end (logical → RTL-correct). */\n  .ddga-command__item-shortcut {\n    margin-inline-start: auto;\n    flex-shrink: 0;\n    font-size: var(--ddga-font-size-xs);\n    letter-spacing: 0.05em;\n    color: var(--ddga-text-tertiary);\n  }\n  [dir='rtl'] .ddga-command__item-shortcut {\n    letter-spacing: normal;\n  }\n\n  /* ─── Dialog shell (Radix Dialog) ─── */\n\n  .ddga-command__overlay {\n    position: fixed;\n    inset: 0;\n    background-color: rgb(0 0 0 / 0.5);\n    z-index: 60;\n    animation-duration: 150ms;\n    animation-timing-function: ease;\n  }\n\n  .ddga-command-dialog {\n    /* Spotlight-style: horizontally centered, anchored near the top. Physical\n       left + translateX for centering (direction-agnostic; pairing\n       inset-inline-start with a physical translate would shift it off-screen\n       in RTL — same rationale as Modal). */\n    position: fixed;\n    inset-block-start: 12vh;\n    left: 50%;\n    transform: translateX(-50%);\n    z-index: 61;\n    display: flex;\n    flex-direction: column;\n    inline-size: min(var(--ddga-command-dialog-width, 640px), calc(100vw - 2rem));\n    max-block-size: min(70vh, 480px);\n    background-color: var(--ddga-color-card);\n    color: var(--ddga-color-card-foreground);\n    border: 1px solid var(--ddga-color-border);\n    border-radius: var(--ddga-radius-lg);\n    box-shadow: var(--ddga-shadow-lg);\n    overflow: hidden;\n    animation-duration: 180ms;\n    animation-timing-function: ease;\n  }\n  /* The inner cmdk root + its list fill the dialog and scroll inside it. */\n  .ddga-command-dialog .ddga-command {\n    min-block-size: 0;\n  }\n  .ddga-command-dialog .ddga-command__list {\n    max-block-size: none;\n  }\n\n  /* ─── Animations (Radix data-state) ─── */\n\n  .ddga-command__overlay[data-state='open'] {\n    animation-name: ddga-command-overlay-in;\n  }\n  .ddga-command__overlay[data-state='closed'] {\n    animation-name: ddga-command-overlay-out;\n  }\n  .ddga-command-dialog[data-state='open'] {\n    animation-name: ddga-command-dialog-in;\n  }\n  .ddga-command-dialog[data-state='closed'] {\n    animation-name: ddga-command-dialog-out;\n  }\n\n  @keyframes ddga-command-overlay-in {\n    from {\n      opacity: 0;\n    }\n    to {\n      opacity: 1;\n    }\n  }\n  @keyframes ddga-command-overlay-out {\n    from {\n      opacity: 1;\n    }\n    to {\n      opacity: 0;\n    }\n  }\n  @keyframes ddga-command-dialog-in {\n    from {\n      opacity: 0;\n      transform: translateX(-50%) translateY(-8px) scale(0.98);\n    }\n    to {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n  }\n  @keyframes ddga-command-dialog-out {\n    from {\n      opacity: 1;\n      transform: translateX(-50%) translateY(0) scale(1);\n    }\n    to {\n      opacity: 0;\n      transform: translateX(-50%) translateY(-8px) scale(0.98);\n    }\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .ddga-command__overlay,\n    .ddga-command-dialog {\n      animation-duration: 0ms;\n    }\n  }\n\n  /* ─── Forced colors ─── */\n\n  @media (forced-colors: active) {\n    .ddga-command,\n    .ddga-command-dialog {\n      border: 1px solid CanvasText;\n    }\n    .ddga-command__item[data-selected='true'] {\n      background-color: Highlight;\n      color: HighlightText;\n    }\n    .ddga-command__separator {\n      background-color: CanvasText;\n    }\n  }\n}\n","@layer ddga-components {\n  /* ─── Base ─── */\n\n  .ddga-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-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  .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\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 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  /* ─── 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  /* 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  /* ─── 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  /* ─── 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  .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  .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  /* 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  /* 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  /* 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  /* 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  /* 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  /* 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  /*\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  /* 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  .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  /* 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  .ddga-date-range-picker-trigger[data-focus-within]:not([data-pressed])::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  }\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    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\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[data-focus-within]::after,\n  [data-theme='dark']\n    .ddga-date-range-picker-trigger[data-pressed]:not([data-disabled]):not([data-readonly])::after,\n  [data-theme='dark'] .ddga-date-range-picker-trigger--pressed::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      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  /* 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  /* 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  /* 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  /* ─── 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 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  .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  .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  /* Dark: neutral + subtle-primary surfaces flip (selected brand-green fill stays). */\n  [data-theme='dark'] .ddga-chip--neutral {\n    --ddga-chip-bg: var(--ddga-gray-800);\n    --ddga-chip-fg: var(--ddga-text-primary);\n  }\n  [data-theme='dark'] .ddga-chip--neutral:hover:not(:disabled):not([aria-pressed='true']) {\n    --ddga-chip-bg: var(--ddga-gray-700);\n  }\n  [data-theme='dark'] .ddga-chip--neutral:active:not(:disabled):not([aria-pressed='true']) {\n    --ddga-chip-bg: var(--ddga-gray-600);\n  }\n  [data-theme='dark'] .ddga-chip--primary: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'] .ddga-chip--primary: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'] .ddga-chip--primary: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:disabled,\n  [data-theme='dark'] .ddga-chip[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  /* 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  /* 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  /* ─── 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  /* ─── 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  /* 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  /* ─── 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  .ddga-dropdown-trigger:focus-visible::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  }\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    content: '';\n    position: absolute;\n    inset-inline: 25%;\n    bottom: -1px;\n    block-size: 2px;\n    background-color: var(--ddga-gray-950);\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:focus-visible::after,\n  [data-theme='dark'] .ddga-dropdown-trigger:active:not(:disabled)::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-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  /* 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  /* 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"],"names":[]}