@jrgermain/stylesheet 0.15.0 → 0.16.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/dist/enhance.d.ts +0 -0
  2. package/dist/enhance.js +2 -0
  3. package/dist/enhance.js.map +7 -0
  4. package/dist/stylesheet.css +1 -1
  5. package/dist/stylesheet.css.map +1 -1
  6. package/dist/tokens.js +204 -202
  7. package/dist/tokens.js.map +7 -0
  8. package/package.json +6 -2
package/dist/stylesheet.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sourceRoot":null,"mappings":"ACAA,gDAOA,yEAIA,+JAAA,mCAAA,yDAKA,8EAMA,sDIlBA,+EAQA,gCAEE,4FAKF,uCAEE,4FAKF,iCAEE,4FAKF,wEAQA,oHAKA,kHASA,uMItDA,2nXAqNE,mCAAqC,8EAKtB,gsBI3NjB,uOAYE,6FAKA,mcAoBF,qFIrCA,gQAOE,mCAAqC,uEAIpB,iFAGnB,mNASE,gCAAiC,gGAKtB,mOASX,uCAKF,6TAeE,2RAYA,iQAWE,6HAIA,iFAOJ,uIAUA,kEACE,gCAOF,iHAMA,gFAIA,iLAOA,6IAMA,2HAKA,gBACE,4GAKA,qFb/IF,yIAQE,0CAKF,6IAQE,uDAOA,+OAWA,0KAMA,iSAQA,aACE,0DAIA,4DI1DJ,yWAiBE,8HAMA,qCAIA,gFAIA,0yBI/BF,uGAQE,2FAQA,oHIFA,oaAaA,6HAIA,2IAQE,q7CAQA,mOAQA,8qDAQA,8NI7DJ,uSjBFA,sBAGE,oUAYE,8CAAgD,wGAKhD,gDAIA,6FAKA,wFAKA,yPAUA,2DAGE,oEAKA,6GAIE,oDAIA,+FAON,+iBAmBE,8CAAgD,0EAIhD,uIAIA,yIAKA,wDAKA,qgCAkBA,iPAIA,gCAAiC,0DAG/B,2CAOF,2HAME,0EAKF,iII9IJ,kkBAsBE,aAAc,qDAId,khBASA,weASA,giBASA,yrBAUF,kEIpEA,iRAoBA,gZAcE,sNAaF,mQAaA,yEAOE,kDAKA,uDAKA,2KAUF,qXAgBE,yFAIA,qFAIA,yIAKA,6FAGE,yEAKF,+LAaF,gJAQA,2LAWA,mGAOA,2IAUA,wRAWA,4FASE,0EAIA,yEAIA,uEAKF,kKAOA,6bAcE,0FAIA,iEAIA,yHAKA,wGAIA,mHAMF,kCAGE,uNAQA,qQAaE,+FAIA,iFAIA,+FAOA,gHAIA,4HAKA,kHAMJ,yFAOA,sEAIA,qBAME,qCAIA,iQAWE,mCAKF,oEAIA,sFAMA,4DAGE,iEAIA,6MASA,uFAMJ,uCAQA,gBACE,yBIzXF,mRAWE,+bAOA,+YAOA,ycAOA,omBAOA,qGAIE,yEAIA,2FAMF,wMAKA,gGAIA,2CAIA,uNAUE,qIAOJ,mKAQA,gDIhGA,4tCAyCE,sTAgBA,yKAOA,iDAOE,kCAAqC,uDAKvC,+CAGE,oFAQA,kFAKF,sMAOA,4LAOA,2MAOA,2MAOA,sMAOA,iMAOA,iMAOA,2MAOA,gNAOA,4FAMA,4FAMA,gOAOE,yJAMA,qKAMA,qKAMA,iKAMA,6JAMA,6JAMA,qKAMA,yKAMA,6JAMA,oIAMA,4JAQF,6RASE,gIAKA,qHAIE,8FAKF,8HAIE,oGAKF,8HAIE,oGAKF,2HAIE,kGAKF,wHAIE,gGAKF,wHAIE,gGAKF,8HAIE,oGAKF,iIAIE,sGAKF,gIAKE,mJAKF,4DAIA,+CAIA,+CAKF,8BAIA,+BAIA,mGASI,kDAKA,yFASA,iDAIA,4FAMJ,2HAKE,wFAKF,gCAGE,2KAQA,yEAMJ,uGE9ZA,mCAGE,sLAWA,sJAUA,0MAYA,wEAMA,kEAMA,2FAIA,iMAQA,8HAKE,mMItEJ,s5BA8BE,mCAAqC,sGAKrC,6EAKE,4NAQE,sHAMF,oHAKA,yDAOE,kCAAqC,+DAMzC,+NAOE,mCAAqC,sGAMvC,iPAOE,mCAAqC,+GAMvC,iPAOE,mCAAqC,+GAMvC,2OAOE,mCAAqC,4GAMvC,qOAOE,mCAAqC,yGAMvC,qOAOE,mCAAqC,yGAMvC,iPAOE,mCAAqC,+GAMvC,uPAOE,mCAAqC,kHAMvC,qOAOE,mCAAqC,yGAMvC,+NAOE,yNAQA,2OAQA,2OAQA,qOAQA,+NAQA,+NAQA,2OAQA,iPAQA,+NASF,oLAQA,0MAUF,iCAIA,iLAUA,mFAIA,ohBAqBE,i2BAYA,0EAIA,+EAIA,kFAKF,wFI/VA,yUAgBE,yOAWF,yEAKA,mDAIA,qDAIA,oCAIA,oCIvCA,sLAYE,wBAGE,8CAAgD,wGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,wGAMlD,mHAQE,mDAIA,oDAIA,mDAKF,kHAQE,kDAIA,mDAIA,kDAYF,+GAAA,mCAAA,wFAKF,yBAIA,kJASE,4BIxHF,qaAkBE,6DAIA,yKASA,2DAIA,uEAGE,0EAKF,0EAIA,6jBAyBE,yVAQA,uMAIA,2OAMA,6MAGE,mXAUF,4cAKE,uiBAUJ,yEAKE,iEAIA,yHAOA,sHASF,4DASA,wJAWA,4gBASE,iSAIA,mCAAqC,mWAoBvC,uCACE,iFAIE,whBAUA,mCACE,2WAQN,mEACE,8DAIE,8lBAgBA,mCACE,yXAON,6BAIA,4IAQA,iJAUE,quCAcF,wEAKE,0DAKA,qEAIA,+IAKA,0IAKA,yDAIA,sYAaE,uFAMF,gDAIA,kDAIA,iOAQE,mFAIA,qFAIA,0RAWF,0DAGE,iHAMJ,2LnCxXF,kNAUA,uRAaA,+EAKA,gFI5BA,mEAME,2DAIA,2DAIA,0DAIA,wDAIA,wDAIA,yDAIA,2DAIA,uGAKA,sGAMF,8DAMA,kEAMA,2EIzDA,qPAcA,wIAYE,oGAKF,kHAMA,kHAMA,qHAMA,oHAMA,gHIvDA,6IAOA,8bAWE,2GAKF,mTAUA,4GAAA,wGIjCA,0VIAA,whBAeE,iHAIA,yGAIA,0GIdF,0IAQA,iKAAA,qLAUA,wFAAA,4GAOA,4HAOA,sJAOA,4KAOA,4HAOA,iJAOA,uKAQA,sEAAA,sEAAA,2EAAA,2EI7EA,4DAMA,qCACE,+NAaF,4OAYA,iPAAA,oPAAA,wPAcA,2EAKA,oOAYA,sJAOA,4JAOA,4JAME,mCAAqC,6JAQvC,mKAME,mCAAqC,oKAQvC,uJAOA,8JI3GA,kHAKE,yBAIA,0BAIA,yBAWA,8GAAA,mCAAA,uFAKF,yNAUE,gCAAmC,wEAMnC,iEIlDF,2NAUE,oFAIA,iFAYF,iKf1BA,iEAUA,kEAMA,wCACE,qOAaF,kPAYA,+OAYA,0OAYA,oKAOA,+JIzEA,iXAcE,4MAOE,4HIhBJ,8CAGE,qKAaA,oHAMA,sGAKA,8LAQA,uDAGE,6JAMA,+CAIA,+CAMF,yEI3DF,+DAUA,8DAUA,8gBAqBE,yJAMA,wHAKA,uGAKA,sGAMA,4NAMA,mCAAqC,oGAKvC,sCI1EA,gkBAyBE,+CAIA,uDf7BF,qWAaE,wBAA0B,2CAI1B,qFAKA,6DAGE,mJAKA,+IAOA,uKAKE,mCAAsC,gGAKxC,mKAKE,mCAAsC,4FAM1C,qOASA,wNASA,6YAgBA,gWI5FF,4EAUA,4QAaE,6CAIA,6CAIA,iDAGE,wCAKF,4DAIE,4CAKF,mEAIE,2CAKF,6yCAcA,qIItEF,yOAaA,gDAKA,gcAiBE,oZAgBA,+HAKA,oPAQA,mJAIE,4GAIA,mNAOF,uTAMF,0FItFA,qcAgBE,8LAUA,kHAIA,gHAIA,0OASA,8JAKA,yNAOA,qHAIA,6HAIA,4EAIA,qKAIA,+JAIA,2IAIA,gOAKA,oHIpFF,6GAKA,8DAKA,0CAIA,oFAKA,qEAIA,kKASA,uEAKA,0EAKA,8OAUE,kFAKF,gOCzDA,2jBAkBE,kIAQA,keAYF,2PAaA,8MAOE,uEAKF","sources":["index.css","misc/reset.css","components/fieldset.css","components/accordion.css","components/shared/base-message.css","misc/utility-classes.css","components/flex.css","components/alert.css","components/shared/dismiss-button.css","misc/variables.css","components/heading.css","components/app.css","components/shared/fieldset-reset.css","components/shared/base-check.css","components/highlight.css","components/banner.css","components/shared/link-icons.css","components/shared/base-dialog.css","components/key.css","components/button.css","components/abbreviation.css","components/checkbox.css","components/link.css","components/progress.css","components/slider.css","components/chip.css","components/list.css","components/quote.css","components/spinner.css","components/divider.css","components/meter.css","components/radio.css","components/switch.css","components/drawer.css","components/modal.css","components/skeleton.css","components/table.css","components/field.css","components/paragraph.css","components/skip-link.css","components/text.css","components/card.css"],"sourcesContent":["/* Misc styles */\n@import url(\"./misc/reset.css\");\n@import url(\"./misc/utility-classes.css\");\n@import url(\"./misc/variables.css\");\n\n/* Styles used in multiple components */\n@import url(\"./components/shared/base-check.css\");\n@import url(\"./components/shared/base-dialog.css\");\n@import url(\"./components/shared/base-message.css\");\n@import url(\"./components/shared/dismiss-button.css\");\n@import url(\"./components/shared/fieldset-reset.css\");\n@import url(\"./components/shared/link-icons.css\");\n\n/* Components */\n@import url(\"./components/abbreviation.css\");\n@import url(\"./components/accordion.css\");\n@import url(\"./components/alert.css\");\n@import url(\"./components/app.css\");\n@import url(\"./components/banner.css\");\n@import url(\"./components/button.css\");\n@import url(\"./components/checkbox.css\");\n@import url(\"./components/chip.css\");\n@import url(\"./components/divider.css\");\n@import url(\"./components/drawer.css\");\n@import url(\"./components/field.css\");\n@import url(\"./components/fieldset.css\");\n@import url(\"./components/flex.css\");\n@import url(\"./components/heading.css\");\n@import url(\"./components/highlight.css\");\n@import url(\"./components/key.css\");\n@import url(\"./components/link.css\");\n@import url(\"./components/list.css\");\n@import url(\"./components/meter.css\");\n@import url(\"./components/modal.css\");\n@import url(\"./components/paragraph.css\");\n@import url(\"./components/progress.css\");\n@import url(\"./components/quote.css\");\n@import url(\"./components/radio.css\");\n@import url(\"./components/skeleton.css\");\n@import url(\"./components/skip-link.css\");\n@import url(\"./components/slider.css\");\n@import url(\"./components/spinner.css\");\n@import url(\"./components/switch.css\");\n@import url(\"./components/table.css\");\n@import url(\"./components/text.css\");\n\n/*\n * Card needs to be loaded after Link so .card-title[href] in the former\n * overrides the same selector in the latter without needing \"!important\"\n * declarations or specificity hacks.\n */\n@import url(\"./components/card.css\");\n","*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--border-m) solid var(--color-brand-5);\n}\n\nhtml {\n text-size-adjust: none;\n color-scheme: light dark;\n}\n\nbody {\n margin: 0;\n background-color: var(--color-body);\n color: var(--color-body-text);\n}\n\nimg,\npicture,\nvideo,\niframe {\n max-width: 100%;\n display: block;\n}\n",".fieldset legend,\n.legend {\n line-height: 1.15;\n font-size: var(--font-size-l);\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n color: var(--color-body-text);\n margin-bottom: var(--space-2xs);\n}\n\n.fieldset-content {\n position: relative;\n border: var(--border-s) solid var(--color-border);\n border-radius: var(--radius-m);\n background-color: var(--color-body);\n color: var(--color-body-text);\n padding: var(--space-xs);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--space-xs);\n}\n\n.fieldset.horizontal .fieldset-content {\n flex-direction: row;\n gap: var(--space-2xs);\n}\n\n.fieldset.subtle .fieldset-content {\n border: none;\n padding: 0;\n background-color: transparent;\n}\n",".accordion {\n width: 100%;\n\n details {\n width: 100%;\n background-color: var(--color-body-alt);\n padding-block: 0;\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n border: var(--border-s) solid var(--color-border);\n box-shadow: var(--shadow-s);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: padding var(--duration-l) var(--ease-out);\n interpolate-size: allow-keywords;\n }\n\n & + details {\n border-block-start: 0;\n }\n\n &:not(:first-of-type) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &:not(:last-of-type) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n &::details-content {\n opacity: 0;\n block-size: 0;\n overflow-y: clip;\n transition-property: content-visibility, opacity, block-size;\n transition-duration: var(--duration-l);\n transition-timing-function: var(--ease-out);\n transition-behavior: allow-discrete;\n }\n\n &[open] {\n padding-block-end: var(--space-xs);\n\n &::details-content {\n opacity: 1;\n block-size: auto;\n }\n\n summary {\n border-block-end-color: var(--color-border);\n margin-block-end: var(--space-xs);\n\n &::before {\n rotate: 0deg;\n }\n\n &:not(:active, .active, :hover, .hover) {\n color: var(--color-brand-3);\n }\n }\n }\n }\n\n summary {\n font-family: var(--font-family-heading);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n cursor: pointer;\n border-block-end: var(--border-s) dashed transparent;\n padding: var(--space-xs);\n padding-inline-start: calc(var(--space-xs) + 1em);\n margin-block: 0;\n margin-inline: calc(-1 * var(--space-xs));\n transition-duration: var(--duration-s);\n transition-property: color, border-color;\n transition-timing-function: var(--ease-default);\n position: relative;\n list-style: none; /* Hides ::marker pseudo element in favor of ::before (better cross browser consistency) */\n color: var(--color-body-text);\n user-select: none;\n\n @media (prefers-reduced-motion: no-preference) {\n transition-property: color, border-color, padding, margin;\n }\n\n &:is(:hover, .hover) {\n color: light-dark(var(--color-brand-4), var(--color-brand-2));\n }\n\n &:is(:active, .active) {\n color: light-dark(var(--color-brand-2), var(--color-brand-4));\n }\n\n /* Hides ::-webkit-details-marker pseudo element in favor of ::before (better cross browser consistency) */\n &::-webkit-details-marker {\n display: none;\n }\n\n /* Replacement marker element */\n &::before {\n content: \"\";\n background-color: var(--color-body-text-alt);\n mask-image: url(\"@/src/icons/dropdown.svg\");\n mask-position: center;\n mask-size: contain;\n mask-repeat: no-repeat;\n display: inline-block;\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0.5em;\n margin: auto;\n width: 0.75em;\n height: 0.75em;\n rotate: -90deg;\n transition: rotate var(--duration-l) var(--ease-spring);\n }\n\n &:dir(rtl)::before {\n rotate: 90deg;\n }\n\n @media (prefers-reduced-motion) {\n transition-property: color, border-color;\n\n &::before {\n transition: none;\n }\n }\n }\n\n &.subtle {\n details {\n box-shadow: none;\n border: 0;\n background-color: transparent;\n padding-inline-start: calc(var(--space-xs) + 1em);\n\n &[open] summary {\n margin-block-end: var(--space-3xs);\n }\n }\n\n summary {\n border-block-end: 0;\n padding-block: var(--space-2xs);\n margin-inline-start: calc(-1 * (var(--space-xs) + 1em));\n }\n }\n}\n",".alert,\n.banner {\n display: block;\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n position: relative;\n line-height: 1.2;\n\n > * {\n line-height: inherit;\n }\n}\n\n.alert-title,\n.banner-title {\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n font-size: 0.85em;\n margin: 0;\n\n & + * {\n margin-block-start: 0;\n }\n}\n\n.alert,\n.banner-content {\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: var(--message-icon-margin);\n margin-block: auto;\n width: var(--message-icon-size);\n height: var(--message-icon-size);\n }\n\n &::before {\n border-radius: var(--radius-full);\n background-color: var(--message-icon-background);\n border: var(--border-m) solid var(--message-icon-color);\n }\n\n &::after {\n mask-image: var(--message-icon);\n mask-repeat: no-repeat;\n mask-size: auto 55%;\n mask-position: center;\n background-color: var(--message-icon-color);\n }\n\n @media print {\n &::before {\n background-color: transparent;\n }\n\n &::after {\n print-color-adjust: exact;\n }\n }\n}\n","/***********************************\n * Conditionally show/hide content *\n ***********************************/\n\n.js-disabled .if-js-enabled {\n display: none !important;\n}\n\n.js-enabled .if-js-disabled {\n display: none !important;\n}\n\n@media screen and (width < 30rem) {\n /* Narrow viewport */\n :is(.if-medium-viewport, .if-wide-viewport):not(.if-narrow-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (30rem <= width < 55rem) {\n /* Medium viewport */\n :is(.if-narrow-viewport, .if-wide-viewport):not(.if-medium-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (width >= 55rem) {\n /* Wide viewport */\n :is(.if-narrow-viewport, .if-medium-viewport):not(.if-wide-viewport) {\n display: none !important;\n }\n}\n\n.app:not(:has(.app-sidebar)) .if-app-has-sidebar {\n display: none !important;\n}\n\n/*************************************************\n * Override color mode for a section of the page *\n *************************************************/\n\n.light-mode {\n color-scheme: only light;\n color: var(--color-body-text);\n}\n\n.dark-mode {\n color-scheme: only dark;\n color: var(--color-body-text);\n}\n\n/*****************************************************\n * Make elements invisible, except to screenreaders *\n *****************************************************/\n\n.visually-hidden,\n.app-sidebar-toggle input,\n.skip-link:not(:focus, .static) {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n",".wrap,\n.stack,\n.distribute {\n display: flex !important;\n gap: var(--space-s);\n\n &.no-gap {\n gap: var(--space-none);\n }\n\n &.densest {\n gap: var(--space-3xs);\n }\n\n &.denser {\n gap: var(--space-2xs);\n }\n\n &.dense {\n gap: var(--space-xs);\n }\n\n &.sparse {\n gap: var(--space-m);\n }\n\n &.sparser {\n gap: var(--space-l);\n }\n\n &.sparsest {\n gap: var(--space-xl);\n }\n\n &.horizontal,\n &.horizontally {\n flex-direction: row;\n }\n\n &.vertical,\n &.vertically {\n flex-direction: column;\n }\n}\n\n.wrap {\n flex-wrap: wrap;\n align-items: center;\n justify-content: start;\n}\n\n.stack {\n flex-wrap: nowrap;\n align-items: stretch;\n justify-content: start;\n}\n\n.distribute {\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-evenly;\n}\n","/*\n * Note: Alert extends Base Message, meaning this file builds on top of the\n * styles defined in ./shared/base-message.css\n */\n\n.alert {\n --message-icon-size: 1.7em;\n --message-icon-margin: 0.25em;\n --message-icon-background: var(--color-body-alt);\n\n font-size: var(--font-size-m);\n color: var(--color-body-text);\n border: var(--border-m) solid transparent;\n border-radius: var(--radius-s);\n border-start-start-radius: calc(var(--space-2xs) + 2em);\n border-end-start-radius: calc(var(--space-2xs) + 2em);\n padding: var(--space-2xs);\n padding-inline-start: 2.5em;\n background:\n linear-gradient(var(--alert-bg-color), var(--alert-bg-color)) padding-box,\n linear-gradient(\n to right,\n var(--alert-border-start-color),\n var(--alert-border-end-color)\n )\n border-box;\n\n @media print {\n border-color: var(--alert-border-start-color);\n }\n\n &.error {\n --alert-bg-color: var(--color-red-9);\n --alert-title-color: var(--color-red-3);\n --alert-border-start-color: var(--color-red-5);\n --alert-border-end-color: var(--color-red-6);\n --message-icon: url(\"@/src/icons/x.svg\");\n --message-icon-color: var(--color-red-5);\n }\n\n &.warning {\n --alert-bg-color: var(--color-yellow-9);\n --alert-title-color: var(--color-yellow-3);\n --alert-border-start-color: var(--color-yellow-5);\n --alert-border-end-color: var(--color-yellow-6);\n --message-icon: url(\"@/src/icons/warning.svg\");\n --message-icon-color: var(--color-yellow-5);\n }\n\n &.success {\n --alert-bg-color: var(--color-green-9);\n --alert-title-color: var(--color-green-3);\n --alert-border-start-color: var(--color-green-5);\n --alert-border-end-color: var(--color-green-6);\n --message-icon: url(\"@/src/icons/check.svg\");\n --message-icon-color: var(--color-green-5);\n }\n\n &.info {\n --alert-bg-color: var(--color-teal-9);\n --alert-title-color: var(--color-teal-3);\n --alert-border-start-color: var(--color-teal-5);\n --alert-border-end-color: var(--color-teal-6);\n --message-icon: url(\"@/src/icons/info.svg\");\n --message-icon-color: var(--color-teal-5);\n }\n}\n\n.alert-title {\n color: var(--alert-title-color);\n margin-block-end: 0.2em;\n}\n",".button.dismiss {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n font-size: 0.75rem;\n width: 3em;\n height: 3em;\n border-radius: var(--radius-m);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.3em;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n --button-hover-bg-color: transparent;\n }\n\n /* Don't use pseudo element for hover style */\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n\n &::after {\n content: \"\";\n width: 1.25em;\n height: 1.25em;\n mask-image: url(\"@/src/icons/x-thin.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n background-color: currentcolor;\n }\n}\n","/* Define all custom properties at the root */\n:root,\n/* Explicitly redefine on ::backdrop for compatibility with older browsers (see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element) */\n::backdrop,\n/* On certain elements, redefine to prevent inheritance of light/dark mode from parents */\n.modal,\n.drawer,\n.light-mode,\n.dark-mode {\n /* Brand */\n --color-brand-1: light-dark(#08003b, #e9f0ff);\n --color-brand-2: light-dark(#190074, #cad6ff);\n --color-brand-3: light-dark(#290fa3, #9fb0ff);\n --color-brand-4: light-dark(#3c35cb, #7382ff);\n --color-brand-5: light-dark(#545be7, #5961ee);\n --color-brand-6: light-dark(#6f7dff, #4344cf);\n --color-brand-7: light-dark(#93a4ff, #3124b1);\n --color-brand-8: light-dark(#bbc9ff, #230095);\n --color-brand-9: light-dark(#e5edff, #0b004a);\n --color-brand-transparent: light-dark(#545be766, #5961ee80);\n --color-brand-extra-transparent: light-dark(#545be733, #5961ee59);\n\n /* Red */\n --color-red-1: light-dark(#240000, #ffe3dc);\n --color-red-2: light-dark(#4d0000, #ffc3b6);\n --color-red-3: light-dark(#7a0000, #ff8875);\n --color-red-4: light-dark(#a90000, #f45441);\n --color-red-5: light-dark(#cc2a1b, #d33223);\n --color-red-6: light-dark(#f0503d, #b30000);\n --color-red-7: light-dark(#ff7c68, #8d0000);\n --color-red-8: light-dark(#ffb4a5, #6c0000);\n --color-red-9: light-dark(#ffe3dc, #340000);\n --color-red-transparent: light-dark(#cc2a1b66, #d3322380);\n --color-red-extra-transparent: light-dark(#cc2a1b33, #d3322359);\n\n /* Orange */\n --color-orange-1: light-dark(#1c0300, #ffe5d0);\n --color-orange-2: light-dark(#3e1200, #ffc5a0);\n --color-orange-3: light-dark(#632500, #ff9559);\n --color-orange-4: light-dark(#8b3a00, #d97234);\n --color-orange-5: light-dark(#b45100, #ba570d);\n --color-orange-6: light-dark(#d76f04, #9c3b00);\n --color-orange-7: light-dark(#f98f3a, #782700);\n --color-orange-8: light-dark(#ffb87e, #5c1900);\n --color-orange-9: light-dark(#ffe6cc, #2c0400);\n --color-orange-transparent: light-dark(#b4510066, #ba570d80);\n --color-orange-extra-transparent: light-dark(#b4510033, #ba570d59);\n\n /* Yellow */\n --color-yellow-1: light-dark(#140900, #fdf4d5);\n --color-yellow-2: light-dark(#2f1e00, #fadfa6);\n --color-yellow-3: light-dark(#4e3700, #fdd171);\n --color-yellow-4: light-dark(#7a5700, #dfaf3f);\n --color-yellow-5: light-dark(#a57c00, #c69720);\n --color-yellow-6: light-dark(#c89808, #a17807);\n --color-yellow-7: light-dark(#dfb22b, #750);\n --color-yellow-8: light-dark(#efcb72, #4e3700);\n --color-yellow-9: light-dark(#f8edc1, #211500);\n --color-yellow-transparent: light-dark(#a57c0066, #a57c0080);\n --color-yellow-extra-transparent: light-dark(#a57c0033, #a57c0059);\n\n /* Green */\n --color-green-1: light-dark(#011000, #dff4d3);\n --color-green-2: light-dark(#0c2a00, #bbe7a5);\n --color-green-3: light-dark(#1d4600, #8ecb6b);\n --color-green-4: light-dark(#2f6500, #63a736);\n --color-green-5: light-dark(#438500, #498b0f);\n --color-green-6: light-dark(#5fa500, #2e7000);\n --color-green-7: light-dark(#7dc53a, #1c5400);\n --color-green-8: light-dark(#a4e472, #113f00);\n --color-green-9: light-dark(#dafbc4, #011b00);\n --color-green-transparent: light-dark(#43850066, #498b0f80);\n --color-green-extra-transparent: light-dark(#43850033, #498b0f59);\n\n /* Teal */\n --color-teal-1: light-dark(#001011, #c8f6f5);\n --color-teal-2: light-dark(#002a2b, #9ee7e7);\n --color-teal-3: light-dark(#004747, #61c7c8);\n --color-teal-4: light-dark(#006566, #3aa4a5);\n --color-teal-5: light-dark(#008586, #0b8889);\n --color-teal-6: light-dark(#00a7a8, #006d6f);\n --color-teal-7: light-dark(#00c8c9, #005254);\n --color-teal-8: light-dark(#76e2e2, #003e3f);\n --color-teal-9: light-dark(#caf9f8, #001a1b);\n --color-teal-transparent: light-dark(#00858666, #0b888980);\n --color-teal-extra-transparent: light-dark(#00858633, #0b888959);\n\n /* Blue */\n --color-blue-1: light-dark(#00003e, #ddf0ff);\n --color-blue-2: light-dark(#00007a, #b9d9ff);\n --color-blue-3: light-dark(#002b97, #7eb4ff);\n --color-blue-4: light-dark(#004abd, #418dff);\n --color-blue-5: light-dark(#1c69e3, #2370ea);\n --color-blue-6: light-dark(#3988ff, #0053cb);\n --color-blue-7: light-dark(#74adff, #0035ac);\n --color-blue-8: light-dark(#a9cfff, #001a95);\n --color-blue-9: light-dark(#ddf0ff, #005);\n --color-blue-transparent: light-dark(#1c69e366, #2370ea80);\n --color-blue-extra-transparent: light-dark(#1c69e333, #2370ea59);\n\n /* Purple */\n --color-purple-1: light-dark(#170029, #fbe4ff);\n --color-purple-2: light-dark(#370054, #edc4ff);\n --color-purple-3: light-dark(#5a0085, #d88eff);\n --color-purple-4: light-dark(#7819a8, #b864ef);\n --color-purple-5: light-dark(#9640ca, #9c47d1);\n --color-purple-6: light-dark(#b562ea, #8127b3);\n --color-purple-7: light-dark(#ce8dfc, #660095);\n --color-purple-8: light-dark(#e8b6ff, #4f0076);\n --color-purple-9: light-dark(#fbe4ff, #23003a);\n --color-purple-transparent: light-dark(#9640ca66, #9c47d180);\n --color-purple-extra-transparent: light-dark(#9640ca33, #9c47d159);\n\n /* Magenta */\n --color-magenta-1: light-dark(#21000c, #ffe1ef);\n --color-magenta-2: light-dark(#480023, #ffbdd9);\n --color-magenta-3: light-dark(#73003d, #ff7db8);\n --color-magenta-4: light-dark(#9b0058, #ea5096);\n --color-magenta-5: light-dark(#c32775, #ca2f7b);\n --color-magenta-6: light-dark(#e45193, #aa0061);\n --color-magenta-7: light-dark(#fe7cb1, #850048);\n --color-magenta-8: light-dark(#ffadd0, #660035);\n --color-magenta-9: light-dark(#ffe1f0, #300015);\n --color-magenta-transparent: light-dark(#c3277566, #ca2f7b80);\n --color-magenta-extra-transparent: light-dark(#c3277533, #ca2f7b59);\n\n /* Gray */\n --color-gray-1: light-dark(#090b0f, #ebeff3);\n --color-gray-2: light-dark(#202226, #d4d8dc);\n --color-gray-3: light-dark(#383b3f, #b1b4b9);\n --color-gray-4: light-dark(#53555a, #8f9297);\n --color-gray-5: light-dark(#6f7276, #75787c);\n --color-gray-6: light-dark(#8d8f94, #5b5e62);\n --color-gray-7: light-dark(#abaeb3, #424549);\n --color-gray-8: light-dark(#cbced3, #303337);\n --color-gray-9: light-dark(#eceff4, #121417);\n --color-gray-transparent: light-dark(#6f727666, #75787c80);\n --color-gray-extra-transparent: light-dark(#6f727633, #75787c59);\n\n /* Semantic colors */\n --color-body: light-dark(#f9fafc, #14161a);\n --color-body-alt: light-dark(#fff, #010203);\n --color-body-text: light-dark(#030305, #fff);\n --color-body-text-alt: light-dark(#404247, #ccced0);\n --color-body-text-invert: light-dark(#fff, #030305);\n --color-shadow: light-dark(#45484c26, #00000166);\n --color-border: light-dark(#d8dbe0, #434549);\n\n /* Font sizes */\n --font-size-xs: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);\n --font-size-s: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);\n --font-size-m: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);\n --font-size-l: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);\n --font-size-xl: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);\n --font-size-2xl: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);\n --font-size-3xl: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);\n --font-size-4xl: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);\n\n /* Font weights */\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n\n /* Font families */\n --font-family-body:\n \"Avenir Next\", avenir, \"Segoe UI Variable Display\", \"Segoe UI\",\n \"URW Gothic\", source-sans-pro, \"Noto Sans\", ui-sans-serif, sans-serif;\n --font-family-heading:\n seravek, \"Gill Sans Nova\", \"Gill Sans MT\", cantarell, \"DejaVu Sans\",\n source-sans-pro, ui-sans-serif, sans-serif;\n --font-family-mono: ui-monospace, \"Cascadia Code\", menlo, hack, monospace;\n\n /* Spacing */\n --space-none: 0;\n --space-3xs: clamp(4px, 3.6528px + 0.1087vw, 5px);\n --space-2xs: clamp(8px, 7.6528px + 0.1087vw, 9px);\n --space-xs: clamp(12px, 11.304px + 0.2174vw, 14px);\n --space-s: clamp(16px, 15.304px + 0.2174vw, 18px);\n --space-m: clamp(24px, 22.9568px + 0.3261vw, 27px);\n --space-l: clamp(32px, 30.608px + 0.4348vw, 36px);\n --space-xl: clamp(48px, 45.9136px + 0.6522vw, 54px);\n --space-2xl: clamp(64px, 61.2176px + 0.8696vw, 72px);\n --space-3xl: clamp(96px, 91.8256px + 1.3043vw, 108px);\n --space-body-x: clamp(20px, 17.5652px + 0.7609vw, 27px);\n --space-body-y: 20px;\n\n /* Radii */\n --radius-none: 0;\n --radius-s: 3px;\n --radius-m: 6px;\n --radius-l: 12px;\n --radius-xl: 24px;\n --radius-2xl: 64px;\n --radius-full: 9999px;\n\n /* Shadows */\n --shadow-none: none;\n --shadow-s: 0 1px 3px -1px var(--color-shadow);\n --shadow-m: 0 1px 7px -1px var(--color-shadow);\n --shadow-l: var(--shadow-s), 0 2px 11px -1px var(--color-shadow);\n --shadow-xl: var(--shadow-m), 0 3px 15px -1px var(--color-shadow);\n\n /* Border widths */\n --border-none: 0;\n --border-s: 1px;\n --border-m: 2px;\n --border-l: 5px;\n --border-xl: 8px;\n\n /* Opacity */\n --opacity-disabled: 0.65;\n\n @media (prefers-color-scheme: dark) {\n --opacity-disabled: 0.5;\n }\n\n /* Easing functions */\n --ease-default: cubic-bezier(0.6, 0.22, 0.45, 0.9);\n --ease-out: cubic-bezier(0.17, 0.84, 0.44, 1);\n --ease-in: cubic-bezier(0.7, 0.1, 0.8, 0.65);\n --ease-both: cubic-bezier(0.65, 0.05, 0.36, 1);\n --ease-both-subtle: cubic-bezier(0.45, 0.12, 0.55, 0.88);\n --ease-spring: cubic-bezier(0.95, -0.55, 0.05, 1.55);\n\n /* Durations */\n --duration-s: 100ms;\n --duration-m: 150ms;\n --duration-l: 250ms;\n --duration-xl: 350ms;\n\n /**************************************************************\n * Tokens prefixed with --internal- are for internal use only *\n **************************************************************/\n\n --internal-glass-bg-color: light-dark(#fff9, #30333799);\n --internal-glass-fg-color: light-dark(black, white);\n --internal-glass-border-color: light-dark(#fff8, #42454988);\n --internal-glass-filter: blur(32px) saturate(120%);\n}\n",".heading-1,\n.heading-2,\n.heading-3,\n.heading-4,\n.heading-5,\n.heading-6,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6)) {\n font-family: var(--font-family-heading);\n margin-block: 0.75em 0.3em;\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n}\n\n.heading-1,\n:where(.style-semantic-elements h1) {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-black);\n\n /* \n * Since the Level 1 Heading will typically be the first item inside the App\n * Content container (which already has padding at the top), we remove the top\n * margin by default. We can always add it back for special cases.\n */\n margin-block-start: 0;\n\n .app-content > &:first-of-type {\n margin-block-start: 0;\n }\n}\n\n.heading-2,\n:where(.style-semantic-elements h2) {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-3,\n:where(.style-semantic-elements h3) {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-4,\n:where(.style-semantic-elements h4) {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-5,\n:where(.style-semantic-elements h5) {\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-6,\n:where(.style-semantic-elements h6) {\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n}\n",".app {\n /* The app is designed to take up the entire width of the page. However, we\n * set a global limit on the overall width of its content for UX and aesthetic\n * reasons. The wrapper elements of the page will always extend to the edge of\n * the screen, but all content within them will be kept within this limit and\n * centered.\n */\n --app-max-content-width: 110rem;\n --app-header-height: clamp(50px, 3.8rem, 100px);\n --app-sidebar-width: clamp(300px, 18rem, 450px);\n\n position: relative;\n width: 100%;\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n}\n\n.app-header {\n height: var(--app-header-height);\n width: 100%;\n color: var(--color-brand-3);\n background-color: var(--color-body-alt);\n border-bottom: var(--border-l) solid var(--color-brand-transparent);\n box-shadow: var(--shadow-s);\n flex: none;\n position: sticky;\n left: 0;\n transition-property: background-color, border-bottom-color, box-shadow;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n &.transparent {\n background-color: transparent;\n background-image: linear-gradient(\n to bottom,\n rgb(from var(--color-body-alt) r g b / 67%),\n transparent\n );\n background-repeat: no-repeat;\n border-bottom-color: transparent;\n box-shadow: none;\n }\n}\n\n.app-header-content {\n height: 100%;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n padding-inline: calc(var(--space-body-x) - var(--space-xs));\n padding-block: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-s);\n}\n\n.app-header-section {\n margin: 0;\n height: 100%;\n display: flex;\n align-items: center;\n\n /* If header only has 1 section, center it */\n &:only-child {\n margin-inline: auto;\n }\n\n /* Otherwise, align the first to the left and the rest to the right */\n &:first-child {\n margin-inline-end: auto;\n }\n\n /* Put a spacer between consecutive right-aligned sections (3rd onward) */\n &:nth-child(n + 3)::before {\n content: \"\";\n background-color: var(--color-border);\n height: 2rem;\n width: var(--border-s);\n position: relative;\n right: calc(var(--space-s) / 2);\n }\n}\n\n.app-header-item {\n height: 100%;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n transition-property: color, background-color;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n display: flex;\n align-items: center;\n position: relative;\n font-size: 1rem;\n font-weight: var(--font-weight-semibold);\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n\n &:is(:hover, .hover) {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:is(:active, .active) {\n background-color: var(--color-brand-transparent);\n }\n\n &:is(:focus-visible, .focus) {\n background-color: var(--color-brand-extra-transparent);\n outline-offset: calc(-1 * var(--border-m));\n }\n\n &[aria-current]:not([aria-current=\"false\"]) {\n font-weight: var(--font-weight-bold);\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: var(--border-l);\n bottom: calc(-1 * (var(--border-l) + 6px));\n left: 0;\n background-color: currentcolor;\n opacity: 0;\n border-radius: 1px;\n }\n}\n\n.app-icon {\n background-color: var(--color-brand-3);\n height: 2rem;\n width: 2rem;\n border: var(--border-m) solid transparent;\n border-radius: var(--radius-full);\n}\n\n.app-title-separator {\n content: \"\";\n background-color: var(--color-brand-transparent);\n width: var(--border-m);\n height: 1.5rem;\n rotate: 22deg;\n margin-inline: var(--space-2xs);\n position: relative;\n left: 1px;\n}\n\n.app-title {\n font-family: var(--font-family-heading);\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n}\n\n.app-body {\n position: relative;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n flex: none;\n display: flex;\n flex-direction: row;\n}\n\n.app-sidebar {\n transition-property: opacity, display;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n transition-behavior: allow-discrete;\n width: var(--app-sidebar-width);\n flex: none;\n opacity: 1;\n border-inline-end: var(--border-s) dashed var(--color-border);\n}\n\n.app-sidebar-content {\n position: sticky;\n top: 0;\n overflow: auto;\n height: 100dvh;\n scrollbar-width: thin;\n}\n\n.app-sidebar-section {\n &:first-of-type {\n margin-block-start: var(--space-body-y);\n }\n\n &:not(:last-of-type) {\n margin-block-end: var(--space-xs);\n }\n\n &:last-of-type {\n margin-block-end: var(--space-body-y);\n }\n}\n\n.app-sidebar-heading {\n font-size: 1.2rem;\n margin: 0 var(--space-body-x) var(--space-3xs);\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n}\n\n.app-sidebar-item {\n display: block;\n margin: 0 var(--space-2xs);\n padding: var(--space-2xs) calc(var(--space-body-x) - var(--space-2xs));\n border-radius: var(--radius-l);\n color: var(--color-body-text-alt);\n text-decoration: none;\n font-weight: var(--font-weight-normal);\n font-size: 1rem;\n user-select: none;\n transition-property: color, background-color, box-shadow;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n &:is(:hover, .hover) {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:is(:active, .active) {\n color: var(--color-brand-1);\n }\n\n &[aria-current]:not([aria-current=\"false\"]) {\n color: var(--color-brand-4);\n font-weight: var(--font-weight-bold);\n }\n\n &:is(:hover, .hover):is(:active, .active) {\n background-color: var(--color-brand-transparent);\n }\n\n &:is(:focus-visible, .focus) {\n outline-offset: 0;\n background-color: var(--color-brand-extra-transparent);\n }\n}\n\n.app-sidebar-toggle {\n width: 2.75rem;\n\n &.focus,\n &:has(input:focus-visible) {\n background-color: var(--color-brand-extra-transparent);\n outline: var(--border-m) solid var(--color-brand-5);\n outline-offset: calc(-1 * var(--border-m));\n }\n\n /* Style the 3 lines inside the button */\n > div {\n transition-property: transform, opacity;\n transition-duration: var(--duration-l);\n transition-timing-function: var(--ease-out);\n position: absolute;\n width: 1.75rem;\n height: 2px;\n border-radius: 2px;\n background-color: currentcolor;\n opacity: 1;\n top: 50%;\n left: 50%;\n\n &:nth-of-type(1) {\n transform: translateY(calc(-50% - 0.45rem)) translateX(-50%);\n }\n\n &:nth-of-type(2) {\n transform: translateY(-50%) translateX(-50%);\n }\n\n &:nth-of-type(3) {\n transform: translateY(calc(-50% + 0.45rem)) translateX(-50%);\n }\n }\n\n /* When the sidebar is visible, turn the 3 lines into an X */\n &:has(input:checked) > div {\n &:nth-of-type(1) {\n transform: translateY(-50%) translateX(-50%) rotate(45deg);\n }\n\n &:nth-of-type(2) {\n opacity: 0;\n transform: translateY(-50%) translateX(-50%) rotate3d(0, 1, 0, 90deg);\n }\n\n &:nth-of-type(3) {\n transform: translateY(-50%) translateX(-50%) rotate(-45deg);\n }\n }\n}\n\n.app-content {\n width: 100%;\n padding: var(--space-body-y) var(--space-body-x);\n position: relative;\n}\n\n/* If there's a sidebar, shrink the content area to accommodate it */\n.app-sidebar ~ .app-content {\n width: calc(100% - var(--app-sidebar-width));\n}\n\n@media (width < 55rem) {\n /* \n * If there's a sidebar, DON'T factor its width into the content width since\n * the sidebar now has `position: fixed`. This only applies to pages with a\n * sidebar; without one, app-content's width is already 100%.\n */\n .app-sidebar ~ .app-content {\n width: 100%;\n }\n\n .app-sidebar {\n position: fixed;\n top: var(--app-header-height);\n left: 0;\n width: 100vw;\n opacity: 1;\n background-color: var(--internal-glass-bg-color);\n backdrop-filter: var(--internal-glass-filter);\n border-right: 0;\n z-index: 9;\n\n &::after {\n content: initial;\n }\n }\n\n .app-sidebar-content {\n height: calc(100dvh - var(--app-header-height));\n }\n\n .app:not(:has(.app-sidebar-toggle input:checked)) .app-sidebar {\n opacity: 0;\n display: none;\n }\n\n /* If sidebar is open, temporarily hide the overflow and any site-wide banners */\n .app:has(.app-sidebar-toggle input:checked) {\n overflow: hidden;\n\n > .banner {\n display: none;\n }\n\n .app-header {\n position: fixed;\n top: 0;\n z-index: 10;\n background-color: var(--color-body-alt);\n border-bottom-color: var(--color-brand-transparent);\n box-shadow: var(--shadow-s);\n }\n\n .app-content {\n top: var(--app-header-height);\n }\n }\n}\n\n.app:has(dialog:modal) {\n /* \n * If modal is open, hide the overflow. This prevents the user from scrolling\n * the page down by dragging on the header, which they'd have no way to undo.\n */\n overflow: hidden;\n}\n\n@starting-style {\n .app > .sidebar {\n opacity: 0;\n }\n}\n","fieldset.fieldset,\nfieldset.field {\n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0.01em 0 0;\n box-sizing: border-box;\n\n legend {\n display: table;\n padding: 0;\n box-sizing: border-box;\n }\n}\n\nbody:not(:-moz-handler-blocked) {\n fieldset.fieldset,\n fieldset.field {\n display: table-cell;\n }\n}\n",".checkbox,\n.radio {\n display: flex;\n align-items: start;\n gap: var(--space-2xs);\n font-size: 1rem;\n cursor: pointer;\n user-select: none;\n line-height: 1.2;\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n\n &:has(input:disabled) {\n cursor: not-allowed;\n opacity: var(--opacity-disabled);\n }\n\n input {\n appearance: none;\n cursor: inherit;\n width: 1em;\n height: 1em;\n font-size: inherit;\n position: relative;\n border: var(--border-s) solid var(--color-gray-6);\n background-color: light-dark(white, black);\n box-shadow: var(--shadow-s);\n transition-property: background-color, border-color, box-shadow;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n flex-shrink: 0;\n\n /* Vertically center the box with the first line of its label (due to line height of 1.2) */\n inset-block-start: 0.1em;\n }\n}\n\n.checkbox-group,\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: var(--space-2xs);\n}\n",".highlight,\n:where(.style-semantic-elements mark) {\n background-color: var(--color-yellow-8);\n color: var(--color-yellow-1);\n print-color-adjust: exact;\n}\n\n.highlight.removed,\n:where(.style-semantic-elements del) {\n background-color: var(--color-red-8);\n color: var(--color-red-1);\n transition: text-decoration-color var(--duration-s) var(--ease-default);\n text-decoration-line: line-through;\n text-decoration-skip-ink: none;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-red-4);\n print-color-adjust: exact;\n\n &:is(:hover, .hover) {\n text-decoration-color: transparent;\n }\n}\n\n.highlight.added,\n:where(.style-semantic-elements ins) {\n background-color: var(--color-green-8);\n color: var(--color-green-1);\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-green-4);\n text-underline-offset: 0.1em;\n print-color-adjust: exact;\n}\n\n.highlight.target,\n::target-text {\n background-color: var(--color-brand-8);\n color: var(--color-brand-1);\n print-color-adjust: exact;\n}\n","/*\n * Note: Banner extends Base Message, meaning this file builds on top of the\n * styles defined in ./shared/base-message.css\n */\n\n.banner {\n --message-icon-size: 1.6em;\n --message-icon-margin: 0.8em;\n --message-icon-background: var(--color-body-alt);\n\n font-size: 1rem;\n color: var(--color-body-text-invert);\n border-block: var(--border-m) solid var(--banner-secondary-color);\n width: 100%;\n background-color: var(--banner-bg-color);\n\n &.error {\n --banner-bg-color: var(--color-red-4);\n --banner-secondary-color: var(--color-red-5);\n --message-icon: url(\"@/src/icons/x.svg\");\n --message-icon-color: var(--color-red-5);\n }\n\n &.warning {\n --banner-bg-color: var(--color-yellow-4);\n --banner-secondary-color: var(--color-yellow-5);\n --message-icon: url(\"@/src/icons/warning.svg\");\n --message-icon-color: var(--color-yellow-5);\n }\n\n &.success {\n --banner-bg-color: var(--color-green-4);\n --banner-secondary-color: var(--color-green-5);\n --message-icon: url(\"@/src/icons/check.svg\");\n --message-icon-color: var(--color-green-5);\n }\n\n &.info {\n --banner-bg-color: var(--color-teal-4);\n --banner-secondary-color: var(--color-teal-5);\n --message-icon: url(\"@/src/icons/info.svg\");\n --message-icon-color: var(--color-teal-5);\n }\n\n &.neutral {\n --banner-bg-color: var(--color-brand-4);\n --banner-secondary-color: var(--color-brand-5);\n\n .banner-content {\n padding-inline-start: var(--space-body-x);\n }\n\n .banner-content::before,\n .banner-content::after {\n content: unset;\n }\n }\n\n .link {\n color: var(--color-body-text-invert);\n text-decoration-color: rgb(from var(--color-body-text-invert) r g b / 40%);\n }\n\n &:has(.button.dismiss) .banner-content {\n padding-inline-end: calc(var(--space-body-x) + 2em);\n }\n\n & + & {\n border-block-start-width: 0;\n }\n\n .button.dismiss {\n --button-fg-color: currentcolor;\n --button-hover-bg-color: var(--banner-secondary-color);\n\n position: absolute;\n inset-block: 0;\n inset-inline-end: calc(var(--space-body-x) * 0.5);\n margin: auto;\n font-size: 0.67em;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--banner-secondary-color);\n --button-border-color: currentcolor;\n }\n }\n}\n\n.banner-content {\n position: relative;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n padding: var(--space-2xs) var(--space-body-x);\n padding-inline-start: 3.2em;\n}\n\n.banner-title {\n margin-block-end: var(--space-3xs);\n}\n","/*\n * External and Download icons\n *\n * Links that open in a new tab or download a file will (by default) have icons\n * added to the end. You can disable this behavior on an element by adding the\n * `no-external-icon` and/or `no-download-icon` classes, or you can manually add\n * the icons by adding the `has-external-icon` or `has-download-icon` classes.\n *\n * This behavior and these classes apply to the following components:\n * - Link\n * - Button\n * - App Sidebar Item\n */\n:is(.link, .button, .app-sidebar-item, .style-semantic-elements a) {\n &::after {\n print-color-adjust: exact;\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--color-gray-5);\n display: inline-block;\n vertical-align: baseline;\n margin-inline: 0.25em;\n position: relative;\n transition: background-color var(--duration-s) var(--ease-default);\n }\n\n &:is(:hover, .hover)::after {\n background-color: var(--color-gray-4);\n }\n\n &.button::after {\n background-color: currentcolor !important;\n margin-inline: initial;\n }\n\n /* External icon */\n &[target=\"_blank\"]:not(.no-external-icon),\n &.has-external-icon {\n &::after {\n content: \"\";\n mask-image: url(\"@/src/icons/external.svg\");\n height: 0.9em;\n width: 0.9em;\n inset-block-start: 0.06em;\n }\n\n &.button::after {\n inset-block-start: -0.03em;\n }\n }\n\n /* Download icon */\n &[download]:not(.no-download-icon),\n &.has-download-icon {\n &::after {\n content: \"\";\n mask-image: url(\"@/src/icons/download.svg\");\n height: 1em;\n width: 1em;\n inset-block-start: 0.07em;\n }\n\n &.button::after {\n inset-block-start: -0.05em;\n }\n }\n}\n",".modal::backdrop,\n.drawer::backdrop {\n --dialog-backdrop-starting-opacity: 0;\n --dialog-backdrop-open-opacity: 0.75;\n --dialog-backdrop-ending-opacity: 0;\n --dialog-backdrop-color: light-dark(var(--color-gray-2), var(--color-gray-8));\n\n @media (prefers-color-scheme: dark) {\n --dialog-backdrop-open-opacity: 0.85;\n }\n\n background-color: var(--dialog-backdrop-color);\n}\n\n.modal,\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-starting-transform: translateY(8px);\n --dialog-open-opacity: 1;\n --dialog-open-transform: translate(0);\n --dialog-ending-opacity: 0;\n --dialog-ending-transform: scale(0.97);\n\n @media (prefers-reduced-motion) {\n --dialog-starting-transform: translate(0);\n --dialog-ending-transform: translate(0);\n }\n\n box-shadow: var(--shadow-xl);\n border: var(--border-s) solid var(--color-border);\n border-radius: var(--radius-l);\n background-color: var(--color-body-alt);\n color: var(--color-body-text);\n padding: 0;\n flex-direction: column;\n gap: 0;\n\n &[open] {\n display: flex;\n }\n}\n\n.modal-header,\n.drawer-header {\n font-family: var(--font-family-heading);\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n padding: var(--space-m);\n padding-block-end: var(--space-2xs);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--color-brand-3);\n margin: 0;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n margin: 0;\n }\n\n .button.dismiss {\n --button-fg-color: var(--color-brand-3);\n --button-hover-bg-color: var(--color-brand-extra-transparent);\n\n font-size: 0.8rem;\n width: 2.25rem;\n height: 2.25rem;\n margin: -0.5rem;\n padding: 0.25rem;\n border-radius: var(--radius-full);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-brand-transparent);\n }\n\n &::after {\n width: 1.1em;\n height: 1.1em;\n }\n }\n}\n\n.modal-body,\n.drawer-body {\n padding: var(--space-m);\n padding-block-start: var(--space-xs);\n flex-shrink: 1;\n display: block;\n overflow: auto;\n margin: 0;\n}\n\n@supports (transition-behavior: allow-discrete) and (overlay: none) {\n .modal,\n .drawer {\n animation: unset;\n }\n}\n\n/* Fade in/out (mixed browser support as of March 2025) */\n:is(.modal, .drawer)[open] {\n display: flex;\n transform: var(--dialog-open-transform);\n opacity: var(--dialog-open-opacity);\n}\n\n:is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-open-opacity);\n}\n\n:is(.modal, .drawer),\n:is(.modal, .drawer)::backdrop {\n transition-property: transform, opacity, display, overlay;\n transition-duration: var(--duration-l);\n transition-behavior: allow-discrete;\n}\n\n:is(.modal, .drawer) {\n transform: var(--dialog-ending-transform);\n opacity: var(--dialog-ending-opacity);\n transition-timing-function: var(--ease-out);\n}\n\n:is(.modal, .drawer)::backdrop {\n opacity: var(--dialog-backdrop-ending-opacity);\n transition-timing-function: var(--ease-default);\n}\n\n@starting-style {\n :is(.modal, .drawer)[open] {\n transform: var(--dialog-starting-transform);\n opacity: var(--dialog-starting-opacity);\n }\n\n :is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-starting-opacity);\n }\n}\n\n/* End fade in/out styles */\n",".key,\n:where(.style-semantic-elements kbd) {\n display: inline;\n padding: 0 0.5ch;\n margin: 0 0.25ch;\n font-size: 0.9em;\n border: var(--border-s) solid var(--color-gray-8);\n border-bottom-width: 3px;\n border-radius: var(--radius-m);\n font-weight: var(--font-weight-semibold);\n font-family: var(--font-family-body);\n background-color: var(--color-gray-9);\n color: var(--color-body-text);\n}\n",".button {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: light-dark(var(--color-gray-9), #191b1e);\n --button-border-color: light-dark(var(--color-gray-8), var(--color-border));\n --button-font-weight: var(--font-weight-normal);\n --button-focus-ring-color: var(--color-gray-extra-transparent);\n --button-shadow: var(--shadow-s);\n --button-hover-bg-color: var(--button-border-color);\n\n box-sizing: border-box;\n display: inline-flex;\n outline: 0;\n padding-inline: 1.25em;\n padding-block: 0.75em;\n gap: 0.625em;\n border-style: solid;\n transform: scale(1);\n transition-property:\n box-shadow, background-color, border-color, transform, opacity;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n position: relative;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n cursor: pointer;\n border-width: var(--border-s);\n border-radius: var(--radius-m);\n min-height: 2.6em;\n min-width: 3em;\n line-height: 1;\n font-family: var(--font-family-body);\n box-shadow: var(--button-shadow);\n user-select: none;\n font-size: 1rem;\n color: var(--button-fg-color);\n background-color: var(--button-bg-color);\n border-color: var(--button-border-color);\n font-weight: var(--button-font-weight);\n\n &::before {\n content: \"\";\n background-color: var(--button-hover-bg-color);\n position: absolute;\n inset: 0;\n margin: auto;\n transition-property: opacity, width, height, border-radius;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n z-index: -1;\n border-radius: 2em;\n width: 4em;\n height: 4em;\n opacity: 0;\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n var(--button-shadow),\n 0 0 0 0.1em var(--button-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--button-focus-ring-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.98);\n\n /*\n * On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n */\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n\n &:is(:hover, .hover) {\n text-decoration: none;\n\n &::before {\n opacity: 1;\n width: 100%;\n height: 100%;\n border-radius: 5px;\n }\n\n /* inputs don't support children, so the ::before pseudo element won't work */\n &:is(input) {\n background-color: var(--button-hover-bg-color);\n }\n }\n\n &.brand {\n --button-fg-color: var(--color-brand-1);\n --button-bg-color: var(--color-brand-9);\n --button-border-color: var(--color-brand-8);\n --button-focus-ring-color: var(--color-brand-extra-transparent);\n }\n\n &.red {\n --button-fg-color: var(--color-red-1);\n --button-bg-color: var(--color-red-9);\n --button-border-color: var(--color-red-8);\n --button-focus-ring-color: var(--color-red-extra-transparent);\n }\n\n &.orange {\n --button-fg-color: var(--color-orange-1);\n --button-bg-color: var(--color-orange-9);\n --button-border-color: var(--color-orange-8);\n --button-focus-ring-color: var(--color-orange-extra-transparent);\n }\n\n &.yellow {\n --button-fg-color: var(--color-yellow-1);\n --button-bg-color: var(--color-yellow-9);\n --button-border-color: var(--color-yellow-8);\n --button-focus-ring-color: var(--color-yellow-extra-transparent);\n }\n\n &.green {\n --button-fg-color: var(--color-green-1);\n --button-bg-color: var(--color-green-9);\n --button-border-color: var(--color-green-8);\n --button-focus-ring-color: var(--color-green-extra-transparent);\n }\n\n &.teal {\n --button-fg-color: var(--color-teal-1);\n --button-bg-color: var(--color-teal-9);\n --button-border-color: var(--color-teal-8);\n --button-focus-ring-color: var(--color-teal-extra-transparent);\n }\n\n &.blue {\n --button-fg-color: var(--color-blue-1);\n --button-bg-color: var(--color-blue-9);\n --button-border-color: var(--color-blue-8);\n --button-focus-ring-color: var(--color-blue-extra-transparent);\n }\n\n &.purple {\n --button-fg-color: var(--color-purple-1);\n --button-bg-color: var(--color-purple-9);\n --button-border-color: var(--color-purple-8);\n --button-focus-ring-color: var(--color-purple-extra-transparent);\n }\n\n &.magenta {\n --button-fg-color: var(--color-magenta-1);\n --button-bg-color: var(--color-magenta-9);\n --button-border-color: var(--color-magenta-8);\n --button-focus-ring-color: var(--color-magenta-extra-transparent);\n }\n\n &.black {\n --button-fg-color: white;\n --button-bg-color: black;\n --button-border-color: #3d3d3d;\n }\n\n &.white {\n --button-fg-color: black;\n --button-bg-color: white;\n --button-border-color: #d0d0d0;\n }\n\n &.primary {\n --button-fg-color: white;\n --button-bg-color: var(--color-brand-5);\n --button-border-color: var(--color-brand-4);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: var(--color-brand-transparent);\n\n &.red {\n --button-bg-color: var(--color-red-5);\n --button-border-color: var(--color-red-4);\n --button-focus-ring-color: var(--color-red-transparent);\n }\n\n &.orange {\n --button-bg-color: var(--color-orange-5);\n --button-border-color: var(--color-orange-4);\n --button-focus-ring-color: var(--color-orange-transparent);\n }\n\n &.yellow {\n --button-bg-color: var(--color-yellow-5);\n --button-border-color: var(--color-yellow-4);\n --button-focus-ring-color: var(--color-yellow-transparent);\n }\n\n &.green {\n --button-bg-color: var(--color-green-5);\n --button-border-color: var(--color-green-4);\n --button-focus-ring-color: var(--color-green-transparent);\n }\n\n &.teal {\n --button-bg-color: var(--color-teal-5);\n --button-border-color: var(--color-teal-4);\n --button-focus-ring-color: var(--color-teal-transparent);\n }\n\n &.blue {\n --button-bg-color: var(--color-blue-5);\n --button-border-color: var(--color-blue-4);\n --button-focus-ring-color: var(--color-blue-transparent);\n }\n\n &.purple {\n --button-bg-color: var(--color-purple-5);\n --button-border-color: var(--color-purple-4);\n --button-focus-ring-color: var(--color-purple-transparent);\n }\n\n &.magenta {\n --button-bg-color: var(--color-magenta-5);\n --button-border-color: var(--color-magenta-4);\n --button-focus-ring-color: var(--color-magenta-transparent);\n }\n\n &.gray {\n --button-bg-color: var(--color-gray-5);\n --button-border-color: var(--color-gray-4);\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.black {\n --button-bg-color: black;\n --button-border-color: #3d3d3d;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.white {\n --button-fg-color: black;\n --button-bg-color: white;\n --button-border-color: #d0d0d0;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n }\n\n &.tertiary {\n --button-fg-color: var(--color-brand-4);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-brand-extra-transparent);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-brand-transparent);\n --button-hover-bg-color: transparent;\n }\n\n &.red {\n --button-fg-color: var(--color-red-4);\n --button-hover-bg-color: var(--color-red-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-red-transparent);\n }\n }\n\n &.orange {\n --button-fg-color: var(--color-orange-4);\n --button-hover-bg-color: var(--color-orange-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-orange-transparent);\n }\n }\n\n &.yellow {\n --button-fg-color: var(--color-yellow-4);\n --button-hover-bg-color: var(--color-yellow-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-yellow-transparent);\n }\n }\n\n &.green {\n --button-fg-color: var(--color-green-4);\n --button-hover-bg-color: var(--color-green-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-green-transparent);\n }\n }\n\n &.teal {\n --button-fg-color: var(--color-teal-4);\n --button-hover-bg-color: var(--color-teal-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-teal-transparent);\n }\n }\n\n &.blue {\n --button-fg-color: var(--color-blue-4);\n --button-hover-bg-color: var(--color-blue-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-blue-transparent);\n }\n }\n\n &.purple {\n --button-fg-color: var(--color-purple-4);\n --button-hover-bg-color: var(--color-purple-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-purple-transparent);\n }\n }\n\n &.magenta {\n --button-fg-color: var(--color-magenta-4);\n --button-hover-bg-color: var(--color-magenta-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-magenta-transparent);\n }\n }\n\n &.gray,\n &.black,\n &.white {\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n }\n }\n\n &.gray {\n --button-fg-color: var(--color-gray-4);\n }\n\n &.black {\n --button-fg-color: black;\n }\n\n &.white {\n --button-fg-color: white;\n }\n }\n\n &.small {\n font-size: 0.8rem;\n }\n\n &.large {\n font-size: 1.2rem;\n }\n\n &.icon {\n border-radius: var(--radius-full);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.5em;\n\n /* Tertiary icon buttons use normal pseudo element hover effect */\n &.tertiary {\n &::before {\n width: 75%;\n height: 75%;\n }\n\n &:is(:hover, .hover)::before {\n width: 100%;\n height: 100%;\n border-radius: 100%;\n }\n }\n\n /* Normal icon buttons just change background color */\n &:not(.tertiary) {\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n }\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n transform: scale(1);\n\n &:is(:hover, .hover)::before {\n opacity: 0;\n }\n }\n\n &.loading {\n cursor: progress;\n\n &::before {\n opacity: 1 !important;\n height: 100% !important;\n border-radius: inherit !important;\n animation: button-loading-bg 1200ms var(--ease-both-subtle) infinite\n forwards;\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n cursor: wait;\n }\n }\n}\n\n@keyframes button-loading-bg {\n 0% {\n width: 0;\n margin: 0 auto 0 0;\n }\n\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0;\n margin: 0 0 0 auto;\n }\n}\n","/* stylelint-disable declaration-block-no-redundant-longhand-properties -- text-decoration shorthand doesn't work properly for Safari */\n\n.abbreviation,\n:where(.style-semantic-elements abbr[title]) {\n display: inline;\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-gray-6);\n text-underline-offset: 0.1em;\n}\n","/*\n * Note: Checkbox extends Base Check, meaning this file builds on top of the\n * styles defined in ./shared/base-check.css\n */\n\n.checkbox input {\n border-radius: 0.3em;\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n opacity: 0;\n transition-duration: var(--duration-l);\n transition-timing-function: var(--ease-spring);\n }\n\n /* Used for indeterminate icon */\n &::before {\n width: 0.5em;\n height: 0;\n border-bottom: 0.125em solid white;\n bottom: 0.4em;\n left: calc(0.25em - var(--border-s));\n transition-property: opacity;\n }\n\n /* Used for checkmark */\n &::after {\n width: 0.3em;\n height: 0.6em;\n border-right: 0.125em solid white;\n border-bottom: 0.125em solid white;\n bottom: 0.2em;\n left: 0.28em;\n transform: rotate(40deg) scale(0.5);\n transition-property: opacity, transform;\n }\n\n /* When checked, show checkmark */\n &:checked::after {\n opacity: 1;\n transform: rotate(40deg) scale(1);\n }\n\n /* When indeterminate, show indeterminate icon */\n &:indeterminate::before {\n opacity: 1;\n transform: scale(1);\n }\n\n /* When disabled and not filled, make background gray */\n &:disabled:not(:checked, :indeterminate) {\n background-color: var(--color-gray-9);\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked,\n &:indeterminate {\n background-color: var(--color-brand-5);\n border-color: var(--color-brand-4);\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-4),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n }\n}\n",".link,\n.card-title a,\n:where(.style-semantic-elements a) {\n color: var(--color-teal-4);\n font-weight: var(--font-weight-semibold);\n text-decoration-line: underline;\n text-decoration-color: var(--color-teal-transparent);\n text-decoration-skip-ink: all;\n text-decoration-thickness: 0.1em;\n text-underline-offset: 0.1em;\n cursor: pointer;\n transition-property: color, text-decoration-color;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n &:is(:hover, .hover) {\n text-decoration-color: currentcolor;\n }\n\n &:is(:focus-visible, .focus) {\n outline-offset: 1px;\n }\n\n &:is(:active, .active) {\n color: var(--color-teal-3);\n }\n}\n","@keyframes indeterminate-progress {\n from {\n opacity: 0.25;\n }\n\n to {\n opacity: 0.75;\n }\n}\n\nprogress.progress {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-progress-bar) {\n progress.progress {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.progress::-webkit-progress-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.progress::-webkit-progress-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid var(--color-blue-5);\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--color-blue-6),\n var(--color-blue-4)\n );\n}\n\n.progress::-moz-progress-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid var(--color-blue-5);\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--color-blue-6),\n var(--color-blue-4)\n );\n}\n\n.progress:indeterminate::-webkit-progress-value {\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n\n.progress:indeterminate::-moz-progress-bar {\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n","input[type=\"range\"].slider {\n --slider-shadow-resting: var(--shadow-s);\n --slider-shadow-focused:\n var(--shadow-s), 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n --slider-shadow-active: var(--shadow-s), 0 0 0 0.08em var(--color-brand-5);\n\n font-size: 1.2rem;\n block-size: 1.25em;\n appearance: none;\n background: transparent;\n cursor: pointer;\n\n @media (pointer: coarse) {\n font-size: 1.5rem;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:is(:focus-visible, .focus) {\n outline: 0;\n\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n }\n\n &:enabled:is(:active, .active) {\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n }\n\n &::-webkit-slider-runnable-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n box-shadow: 0 0 1px var(--color-gray-7) inset;\n }\n\n &::-moz-range-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n box-shadow: 0 0 1px var(--color-gray-7) inset;\n }\n\n &::-webkit-slider-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-border);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n /* Additional properties needed for webkit */\n appearance: none;\n margin-block-start: -0.5em;\n }\n\n &::-moz-range-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-border);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n }\n\n /*\n * Below is code to add color to the portion of the slider before the thumb.\n *\n * While it looks great, it's only supported in Firefox (as of 2025), and I'd\n * rather not introduce this big of a difference between browsers. So it's\n * currently commented out and only here for reference.\n *\n * There is a proposal to standardize the pseudo-elements for range inputs,\n * which includes a \"slider-fill\" pseudo-element similar to Firefox's\n * \"moz-range-progress\". If it lands in browsers, we can revisit this.\n *\n * Reference: https://drafts.csswg.org/css-forms-1/#pseudo-elements\n */\n\n /* &::-moz-range-progress {\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--color-brand-6),\n var(--color-brand-4)\n );\n border-radius: var(--radius-full);\n block-size: 0.25em;\n box-shadow: 0 0 1px var(--color-brand-4) inset;\n } */\n}\n",".chip {\n --chip-fg-color: white;\n --chip-bg-color: var(--color-brand-5);\n --chip-border-color: var(--color-brand-4);\n --chip-delete-hover-color: var(--color-brand-3);\n --chip-delete-active-color: var(--color-brand-2);\n --chip-focus-color: var(--color-brand-transparent);\n --chip-padding-x: var(--space-xs);\n --chip-padding-y: var(--space-3xs);\n\n display: inline-flex;\n position: relative;\n align-items: center;\n border-radius: var(--radius-full);\n font-size: var(--font-size-s);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n padding: var(--chip-padding-y) var(--chip-padding-x);\n background-color: var(--chip-bg-color);\n border: var(--border-s) solid var(--chip-border-color);\n color: var(--chip-fg-color);\n flex-shrink: 0;\n cursor: default;\n transition-property: box-shadow, background-color, border-color, transform;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n appearance: none;\n line-height: 1.2;\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-brand-6);\n --chip-delete-active-color: var(--color-brand-7);\n }\n\n &.clickable {\n cursor: pointer;\n box-shadow: var(--shadow-s);\n transform: scale(1);\n\n &:is(:focus-visible, .focus),\n &:has(.chip-label:focus-visible) {\n outline: 0;\n box-shadow:\n var(--shadow-s),\n 0 0 0 0.1em var(--chip-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--chip-focus-color);\n\n .chip-delete {\n opacity: 0.5;\n }\n }\n\n /* Change the background on hover, but only if the cursor is not over the delete button */\n &.hover,\n &:hover:not(:has(.chip-delete:hover)) {\n background-color: var(--chip-border-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.96);\n\n /*\n * On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n */\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n }\n\n &.red {\n --chip-bg-color: var(--color-red-5);\n --chip-border-color: var(--color-red-4);\n --chip-focus-color: var(--color-red-transparent);\n --chip-delete-hover-color: var(--color-red-3);\n --chip-delete-active-color: var(--color-red-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-red-6);\n --chip-delete-active-color: var(--color-red-7);\n }\n }\n\n &.orange {\n --chip-bg-color: var(--color-orange-5);\n --chip-border-color: var(--color-orange-4);\n --chip-focus-color: var(--color-orange-transparent);\n --chip-delete-hover-color: var(--color-orange-3);\n --chip-delete-active-color: var(--color-orange-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-orange-6);\n --chip-delete-active-color: var(--color-orange-7);\n }\n }\n\n &.yellow {\n --chip-bg-color: var(--color-yellow-5);\n --chip-border-color: var(--color-yellow-4);\n --chip-focus-color: var(--color-yellow-transparent);\n --chip-delete-hover-color: var(--color-yellow-3);\n --chip-delete-active-color: var(--color-yellow-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-yellow-6);\n --chip-delete-active-color: var(--color-yellow-7);\n }\n }\n\n &.green {\n --chip-bg-color: var(--color-green-5);\n --chip-border-color: var(--color-green-4);\n --chip-focus-color: var(--color-green-transparent);\n --chip-delete-hover-color: var(--color-green-3);\n --chip-delete-active-color: var(--color-green-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-green-6);\n --chip-delete-active-color: var(--color-green-7);\n }\n }\n\n &.teal {\n --chip-bg-color: var(--color-teal-5);\n --chip-border-color: var(--color-teal-4);\n --chip-focus-color: var(--color-teal-transparent);\n --chip-delete-hover-color: var(--color-teal-3);\n --chip-delete-active-color: var(--color-teal-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-teal-6);\n --chip-delete-active-color: var(--color-teal-7);\n }\n }\n\n &.blue {\n --chip-bg-color: var(--color-blue-5);\n --chip-border-color: var(--color-blue-4);\n --chip-focus-color: var(--color-blue-transparent);\n --chip-delete-hover-color: var(--color-blue-3);\n --chip-delete-active-color: var(--color-blue-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-blue-6);\n --chip-delete-active-color: var(--color-blue-7);\n }\n }\n\n &.purple {\n --chip-bg-color: var(--color-purple-5);\n --chip-border-color: var(--color-purple-4);\n --chip-focus-color: var(--color-purple-transparent);\n --chip-delete-hover-color: var(--color-purple-3);\n --chip-delete-active-color: var(--color-purple-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-purple-6);\n --chip-delete-active-color: var(--color-purple-7);\n }\n }\n\n &.magenta {\n --chip-bg-color: var(--color-magenta-5);\n --chip-border-color: var(--color-magenta-4);\n --chip-focus-color: var(--color-magenta-transparent);\n --chip-delete-hover-color: var(--color-magenta-3);\n --chip-delete-active-color: var(--color-magenta-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-magenta-6);\n --chip-delete-active-color: var(--color-magenta-7);\n }\n }\n\n &.gray {\n --chip-bg-color: var(--color-gray-5);\n --chip-border-color: var(--color-gray-4);\n --chip-focus-color: var(--color-gray-transparent);\n --chip-delete-hover-color: var(--color-gray-3);\n --chip-delete-active-color: var(--color-gray-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-gray-6);\n --chip-delete-active-color: var(--color-gray-7);\n }\n }\n\n &.subtle {\n --chip-fg-color: var(--color-brand-2);\n --chip-bg-color: var(--color-brand-9);\n --chip-border-color: var(--color-brand-8);\n --chip-delete-hover-color: var(--color-brand-7);\n --chip-delete-active-color: var(--color-brand-6);\n\n &.red {\n --chip-fg-color: var(--color-red-2);\n --chip-bg-color: var(--color-red-9);\n --chip-border-color: var(--color-red-8);\n --chip-delete-hover-color: var(--color-red-7);\n --chip-delete-active-color: var(--color-red-6);\n }\n\n &.orange {\n --chip-fg-color: var(--color-orange-2);\n --chip-bg-color: var(--color-orange-9);\n --chip-border-color: var(--color-orange-8);\n --chip-delete-hover-color: var(--color-orange-7);\n --chip-delete-active-color: var(--color-orange-6);\n }\n\n &.yellow {\n --chip-fg-color: var(--color-yellow-2);\n --chip-bg-color: var(--color-yellow-9);\n --chip-border-color: var(--color-yellow-8);\n --chip-delete-hover-color: var(--color-yellow-7);\n --chip-delete-active-color: var(--color-yellow-6);\n }\n\n &.green {\n --chip-fg-color: var(--color-green-2);\n --chip-bg-color: var(--color-green-9);\n --chip-border-color: var(--color-green-8);\n --chip-delete-hover-color: var(--color-green-7);\n --chip-delete-active-color: var(--color-green-6);\n }\n\n &.teal {\n --chip-fg-color: var(--color-teal-2);\n --chip-bg-color: var(--color-teal-9);\n --chip-border-color: var(--color-teal-8);\n --chip-delete-hover-color: var(--color-teal-7);\n --chip-delete-active-color: var(--color-teal-6);\n }\n\n &.blue {\n --chip-fg-color: var(--color-blue-2);\n --chip-bg-color: var(--color-blue-9);\n --chip-border-color: var(--color-blue-8);\n --chip-delete-hover-color: var(--color-blue-7);\n --chip-delete-active-color: var(--color-blue-6);\n }\n\n &.purple {\n --chip-fg-color: var(--color-purple-2);\n --chip-bg-color: var(--color-purple-9);\n --chip-border-color: var(--color-purple-8);\n --chip-delete-hover-color: var(--color-purple-7);\n --chip-delete-active-color: var(--color-purple-6);\n }\n\n &.magenta {\n --chip-fg-color: var(--color-magenta-2);\n --chip-bg-color: var(--color-magenta-9);\n --chip-border-color: var(--color-magenta-8);\n --chip-delete-hover-color: var(--color-magenta-7);\n --chip-delete-active-color: var(--color-magenta-6);\n }\n\n &.gray {\n --chip-fg-color: var(--color-gray-2);\n --chip-bg-color: var(--color-gray-9);\n --chip-border-color: var(--color-gray-8);\n --chip-delete-hover-color: var(--color-gray-7);\n --chip-delete-active-color: var(--color-gray-6);\n }\n }\n\n &.black {\n --chip-bg-color: black;\n --chip-border-color: #46484c;\n --chip-focus-color: var(--color-gray-transparent);\n --chip-delete-hover-color: #616368;\n --chip-delete-active-color: #4c4e53;\n }\n\n &.white {\n --chip-fg-color: black;\n --chip-bg-color: white;\n --chip-border-color: #d8dbe0;\n --chip-focus-color: var(--color-gray-transparent);\n --chip-delete-hover-color: #c3c6cb;\n --chip-delete-active-color: #afb1b6;\n }\n}\n\n.chip:has(.chip-label) {\n padding: 0;\n}\n\n.chip-label {\n all: unset;\n display: inherit;\n line-height: inherit;\n user-select: inherit;\n cursor: inherit;\n padding: var(--chip-padding-y) var(--chip-padding-x);\n border-radius: var(--radius-full);\n}\n\n.chip-label:has(+ .chip-delete) {\n padding-inline-end: calc(1.2em + 2 * var(--space-3xs));\n}\n\n.chip-delete {\n outline: 1px solid var(--chip-bg-color);\n margin-inline: var(--space-3xs)\n calc(-1 * var(--chip-padding-x) + var(--space-3xs));\n font-size: 0.6em;\n border: 0;\n border-radius: var(--radius-full);\n transition-property: background-color, outline-color, filter;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n height: 2em;\n width: 2em;\n user-select: none;\n background-color: var(--chip-border-color);\n padding: 0;\n display: inline-flex;\n box-shadow: none;\n\n &::after {\n content: \"\";\n width: 1em;\n height: 1em;\n mask-image: url(\"@/src/icons/x-thin.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--chip-fg-color);\n margin: auto;\n }\n\n &:is(:focus-visible, .focus) {\n outline-color: var(--chip-fg-color);\n }\n\n &:is(:hover, .hover) {\n background-color: var(--chip-delete-hover-color);\n }\n\n &:is(:active, .active) {\n background-color: var(--chip-delete-active-color);\n }\n}\n\n.chip-label + .chip-delete {\n position: absolute;\n inset: 0 var(--space-3xs) 0 auto;\n margin: auto 0;\n}\n","/*\n * Note: for most of the styles applied using `style-semantic-elements`, we use the\n * `:where()` selector to reduce specificity so we can more easily override them.\n * However, this breaks the styling for nested lists, which relies on the specificity\n * of the selectors for each level of nesting being higher than the last. Therefore,\n * we don't use this technique for Lists.\n */\n\n/* Add space between subsequent items and nested lists */\n.list li + li,\n.list .list,\n.style-semantic-elements li + li,\n.style-semantic-elements :is(ol, ul) :is(ol, ul) {\n margin-block-start: var(--space-2xs);\n}\n\n/* Style ordered list markers */\nol.list li::marker,\n.style-semantic-elements ol li::marker {\n color: var(--color-body-text-alt);\n font-size: 0.85em;\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n line-height: 0;\n}\n\n/* Style unordered list markers */\nul.list li::marker,\n.style-semantic-elements ul li::marker {\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-bold);\n}\n\n/* Cycle through list marker types in nested lists */\nol.list,\nol.list ol.list ol.list ol.list,\n.style-semantic-elements ol,\n.style-semantic-elements ol ol ol ol {\n list-style: decimal;\n}\n\nol.list ol.list,\nol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol,\n.style-semantic-elements ol ol ol ol ol {\n list-style: lower-latin;\n}\n\nol.list ol.list ol.list,\nol.list ol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol ol,\n.style-semantic-elements ol ol ol ol ol ol {\n list-style: lower-roman;\n}\n\nul.list,\nul.list ul.list ul.list ul.list,\n.style-semantic-elements ul,\n.style-semantic-elements ul ul ul ul {\n list-style: disc;\n}\n\nul.list ul.list,\nul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul,\n.style-semantic-elements ul ul ul ul ul {\n list-style: circle;\n}\n\nul.list ul.list ul.list,\nul.list ul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul ul,\n.style-semantic-elements ul ul ul ul ul ul {\n list-style: square;\n}\n\n/* Make the markers a different color for their second appearance in a nested list */\nol.list ol.list ol.list ol.list li::marker,\nul.list ul.list ul.list ul.list li::marker,\n.style-semantic-elements ol ol ol ol li::marker,\n.style-semantic-elements ul ul ul ul li::marker {\n color: var(--color-brand-3);\n}\n",".quote,\n:where(.style-semantic-elements blockquote) {\n display: block;\n margin: 0;\n color: var(--color-body-text-alt);\n border-inline-start: 0.25em solid var(--color-gray-transparent);\n padding: var(--space-3xs);\n padding-inline-start: var(--space-xs);\n position: relative;\n line-height: 1.25;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n footer {\n margin-block-start: 0.5em;\n font-size: var(--font-size-s);\n font-style: initial;\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n\n cite {\n font-weight: var(--font-weight-normal);\n font-style: italic;\n }\n }\n}\n","@keyframes spinner-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.spinner {\n --spinner-primary-color: var(--color-brand-5);\n --spinner-secondary-color: var(--color-brand-3);\n\n font-size: var(--font-size-m);\n position: relative;\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: var(--space-2xs);\n\n &.small {\n font-size: var(--font-size-xs);\n }\n\n &.large {\n font-size: var(--font-size-xl);\n }\n\n &.label-top {\n flex-direction: column-reverse;\n\n &::after {\n inset: auto 0 0;\n }\n }\n\n &.label-right {\n flex-direction: row;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 auto 0 0;\n }\n }\n\n &.label-left {\n flex-direction: row-reverse;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 0 0 auto;\n }\n }\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n height: 3em;\n width: 3em;\n mask-image: url(\"@/src/icons/spinner.svg\");\n mask-size: cover;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--spinner-primary-color);\n animation: spinner-spin 0.85s linear infinite;\n }\n\n &::after {\n position: absolute;\n inset: 0 0 auto;\n margin: auto;\n background-color: var(--spinner-secondary-color);\n animation-duration: 1.05s;\n }\n}\n",".divider,\n:where(.style-semantic-elements hr, .style-semantic-elements br) {\n --divider-thickness: var(--border-s);\n\n display: block;\n border-style: solid;\n border-color: var(--color-border);\n border-width: 0;\n border-top-width: var(--divider-thickness);\n margin: var(--space-xs) 0;\n outline: 0;\n width: 100%;\n height: 0;\n print-color-adjust: exact;\n position: relative;\n\n &.vertical {\n display: inline-block;\n border-top-width: 0;\n border-left-width: var(--divider-thickness);\n margin: auto var(--space-xs);\n width: 0;\n height: 100%;\n min-height: 1em;\n }\n}\n\n.divider.invisible,\n:where(.style-semantic-elements br) {\n visibility: hidden;\n}\n\n.divider.thick {\n --divider-thickness: var(--border-m);\n}\n\n.divider.thicker {\n --divider-thickness: var(--border-l);\n}\n\n.divider.dashed {\n border-style: dashed;\n}\n\n.divider.dotted {\n border-style: dotted;\n}\n","meter.meter {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-meter-bar) {\n meter.meter {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.meter::-webkit-meter-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.meter::-webkit-meter-optimum-value,\n.meter::-webkit-meter-suboptimum-value,\n.meter::-webkit-meter-even-less-good-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--meter-start-color),\n var(--meter-end-color)\n );\n}\n\n.meter::-webkit-meter-inner-element {\n display: inline-block;\n position: relative;\n}\n\n.meter::-moz-meter-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--meter-start-color),\n var(--meter-end-color)\n );\n}\n\n.meter::-webkit-meter-optimum-value {\n --meter-start-color: var(--color-green-6);\n --meter-end-color: var(--color-green-4);\n\n border-color: var(--color-green-5);\n}\n\n.meter:-moz-meter-optimum::-moz-meter-bar {\n --meter-start-color: var(--color-green-6);\n --meter-end-color: var(--color-green-4);\n\n border-color: var(--color-green-5);\n}\n\n.meter::-webkit-meter-suboptimum-value {\n --meter-start-color: var(--color-yellow-7);\n --meter-end-color: var(--color-yellow-5);\n\n border-color: var(--color-yellow-6);\n\n @media (prefers-color-scheme: dark) {\n --meter-start-color: var(--color-yellow-6);\n --meter-end-color: var(--color-yellow-4);\n\n border-color: var(--color-yellow-5);\n }\n}\n\n.meter:-moz-meter-sub-optimum::-moz-meter-bar {\n --meter-start-color: var(--color-yellow-7);\n --meter-end-color: var(--color-yellow-5);\n\n border-color: var(--color-yellow-6);\n\n @media (prefers-color-scheme: dark) {\n --meter-start-color: var(--color-yellow-6);\n --meter-end-color: var(--color-yellow-4);\n\n border-color: var(--color-yellow-5);\n }\n}\n\n.meter::-webkit-meter-even-less-good-value {\n --meter-start-color: var(--color-red-6);\n --meter-end-color: var(--color-red-4);\n\n border-color: var(--color-red-5);\n}\n\n.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {\n --meter-start-color: var(--color-red-6);\n --meter-end-color: var(--color-red-4);\n\n border-color: var(--color-red-5);\n}\n","/*\n * Note: Radio extends Base Check, meaning this file builds on top of the\n * styles defined in ./shared/base-check.css\n */\n\n.radio input {\n border-radius: var(--radius-full);\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n inset: 0;\n transform: scale(0);\n }\n\n /* Checked background */\n &::before {\n background-color: var(--color-brand-5);\n transition: transform var(--duration-m) var(--ease-default);\n }\n\n /* Checked center dot */\n &::after {\n background-color: white;\n transition: transform var(--duration-l) var(--ease-spring) 50ms;\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked {\n border-color: var(--color-brand-4);\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-4),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n\n &::before {\n transform: scale(1);\n }\n\n &::after {\n transform: scale(0.5);\n }\n }\n\n /* When disabled and not selected, make background gray */\n &:disabled:not(:checked) {\n background-color: var(--color-gray-9);\n }\n}\n","/* Style the label of a labeled switch, which is also the container that holds the switch itself */\nlabel.switch {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n font-weight: var(--font-weight-semibold);\n gap: var(--space-3xs);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n}\n\n/* For small labeled switches, set the label text size to font-size-s */\nlabel.switch.small {\n font-size: var(--font-size-s);\n}\n\n/* Style the switch itself */\ninput[type=\"checkbox\"].switch,\nlabel.switch input[type=\"checkbox\"] {\n font-size: 1rem;\n print-color-adjust: exact;\n appearance: none;\n block-size: 1.8em;\n inline-size: 3em;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-7);\n position: relative;\n flex: none;\n transition-property: background-color, box-shadow, border-color;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n border: 0.1em solid var(--color-gray-6);\n cursor: pointer;\n\n &::after {\n content: \"\";\n position: absolute;\n height: 1.4em;\n width: 1.4em;\n background-color: white;\n inset-inline-start: 0.1em;\n inset-block-start: 0.1em;\n border-radius: var(--radius-full);\n box-shadow: var(--shadow-s);\n transition-property: border-color, transform;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-both);\n transform: translateX(0);\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked {\n background-color: var(--color-brand-6);\n border-color: var(--color-brand-5);\n\n &::after {\n transform: translateX(1.2em);\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n }\n\n &:dir(rtl):checked::after {\n transform: translateX(-1.2em);\n }\n}\n\n/* For small switches, scale the switch control to 80% of the normal size */\ninput[type=\"checkbox\"].switch.small,\nlabel.switch.small input[type=\"checkbox\"] {\n font-size: 0.8rem;\n}\n","/*\n * Note: Drawer extends Base Dialog, meaning this file builds on top of the\n * styles defined in ./shared/base-dialog.css\n */\n\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-ending-opacity: 1;\n\n position: fixed;\n inset: 0;\n border-radius: 0;\n margin: 0;\n border: 0;\n overflow: auto;\n transition-duration: var(--duration-xl) !important;\n\n &.left {\n right: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(-100%);\n --dialog-ending-transform: translateX(-100%);\n }\n }\n\n &.top {\n bottom: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(-100%);\n --dialog-ending-transform: translateY(-100%);\n }\n }\n\n &.right {\n left: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(100%);\n --dialog-ending-transform: translateX(100%);\n }\n }\n\n &.bottom {\n top: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(100%);\n --dialog-ending-transform: translateY(100%);\n }\n }\n\n &.top,\n &.bottom {\n width: 100dvw;\n max-width: unset;\n height: auto;\n max-height: 100dvh;\n min-height: min(100dvh, 16rem);\n\n &.small {\n height: 18rem;\n }\n\n &.medium {\n height: 28rem;\n }\n\n &.large {\n height: 38rem;\n }\n }\n\n &.left,\n &.right {\n height: 100dvh;\n max-height: unset;\n width: auto;\n min-width: min(100dvw, 18rem);\n max-width: 100dvw;\n\n &.small {\n width: 22rem;\n }\n\n &.medium {\n width: 32rem;\n }\n\n &.large {\n width: 42rem;\n }\n }\n\n /*\n * Reset the color scheme rather than inheriting it from the parent element.\n *\n * Drawers aren't rendered inside their parent, so it doesn't makes sense for\n * them to inherit their parent's color scheme. We still allow explicit\n * overrides using the standard light-mode and dark-mode classes.\n */\n &:not(.light-mode, .dark-mode) {\n color-scheme: light dark;\n }\n}\n\n.drawer-body {\n height: 100%;\n}\n\n.drawer-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-xs);\n justify-content: flex-start;\n margin: 0;\n margin-block-start: auto;\n\n > * {\n width: 100%;\n }\n}\n","/*\n * Note: Modal extends Base Dialog, meaning this file builds on top of the\n * styles defined in ./shared/base-dialog.css\n */\n\n.modal {\n max-height: calc(100svh - 4 * var(--space-body-y));\n max-width: calc(100svw - 4 * var(--space-body-x));\n margin: auto;\n\n &.small {\n width: 25rem;\n }\n\n &.medium {\n width: 40rem;\n }\n\n &.large {\n width: 55rem;\n }\n\n /*\n * Reset the color scheme rather than inheriting it from the parent element.\n *\n * Modals aren't rendered inside their parent, so it doesn't makes sense for\n * them to inherit their parent's color scheme. We still allow explicit\n * overrides using the standard light-mode and dark-mode classes.\n */\n &:not(.light-mode, .dark-mode) {\n color-scheme: light dark;\n }\n}\n\n.modal-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-2xs);\n justify-content: flex-start;\n background-color: var(--color-body);\n border-block-start: var(--border-s) solid var(--color-border);\n margin: 0;\n\n @media screen and (width < 30rem) {\n flex-direction: column;\n width: 100%;\n justify-content: stretch;\n }\n\n .button:not(.small, .medium, .large) {\n font-size: 0.9rem;\n }\n}\n","@keyframes skeleton-pulse-light {\n from {\n opacity: 0.14;\n }\n\n to {\n opacity: 0.21;\n }\n}\n\n@keyframes skeleton-pulse-dark {\n from {\n opacity: 0.28;\n }\n\n to {\n opacity: 0.36;\n }\n}\n\n.skeleton,\n.skeleton-controller.loading .skeleton-item {\n animation: skeleton-pulse-light 1s var(--ease-both-subtle) alternate 0s\n infinite !important;\n border-radius: var(--radius-s) !important;\n background-color: var(--color-gray-5) !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n pointer-events: none !important;\n color: transparent !important;\n mask-image: none !important;\n background-image: none !important;\n user-select: none !important;\n print-color-adjust: exact;\n\n /*************************************************************\n * Special styles for \"skeletonizing\" specific element types *\n *************************************************************/\n\n /* Make block text take up the full width */\n &.paragraph,\n &.heading {\n inline-size: 100%;\n }\n\n /* For empty text elements, add filler content so it isn't 0 height. */\n &:is(.paragraph, .heading, .chip, .card-title)::before {\n content: \".\";\n }\n\n /* Add a reasonable minimum width to buttons and chips */\n &:is(.button, .chip):empty {\n min-inline-size: 5em;\n }\n\n /* Add a reasonable width to card titles */\n &.card-title {\n inline-size: 40%;\n overflow: hidden;\n }\n\n /* Visually hide contents, but let them take up space so elements don't collapse to 0 height. */\n &::before,\n &::after,\n > * {\n visibility: hidden !important;\n }\n\n @media (prefers-color-scheme: dark) {\n animation-name: skeleton-pulse-dark !important;\n }\n}\n\n.skeleton-controller {\n display: contents;\n}\n","table.table,\n:where(.style-semantic-elements table) {\n --table-bg-odd: var(--color-body-alt);\n --table-bg-even: var(--color-body);\n --table-vertical-border: var(--border-s);\n\n background-color: var(--color-body-alt);\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--font-size-m);\n border: var(--border-s) solid var(--color-border);\n border-radius: var(--radius-s);\n color: var(--color-body-text);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n\n &.subtle {\n --table-bg-odd: transparent;\n --table-bg-even: transparent;\n --table-vertical-border: 0;\n\n background-color: transparent;\n color: inherit;\n border: 0;\n }\n\n &.dense :is(th, td) {\n padding: var(--space-3xs) var(--space-2xs);\n }\n\n &.sparse :is(th, td) {\n padding: var(--space-xs) var(--space-s);\n }\n\n caption {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n text-align: start;\n margin: 0 0 var(--space-2xs);\n }\n\n th,\n td {\n padding: var(--space-2xs) var(--space-xs);\n }\n\n th,\n tfoot td {\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-heading);\n text-align: center;\n }\n\n th {\n border-block-end: var(--border-m) solid var(--color-border);\n }\n\n tfoot td {\n border-block-start: var(--border-m) solid var(--color-border);\n }\n\n td {\n text-align: unset;\n }\n\n :is(th, tfoot td):not(:last-of-type) {\n border-inline-end: var(--table-vertical-border) dashed var(--color-border);\n }\n\n td:not(tfoot td, :last-of-type) {\n border-inline-end: var(--table-vertical-border) solid var(--color-border);\n }\n\n tr:not(:last-of-type) td {\n border-block-end: var(--border-s) solid var(--color-border);\n }\n\n tbody tr:nth-child(odd),\n tbody:has(tr:last-of-type:nth-child(even)) + tfoot tr {\n background-color: var(--table-bg-even);\n }\n\n tbody tr:nth-child(even) {\n background-color: var(--table-bg-odd);\n }\n}\n",".field {\n --field-gap: var(--space-2xs);\n --field-padding: 0.5em;\n --field-radius: var(--radius-m);\n\n display: inline-flex;\n flex-direction: column;\n line-height: 1;\n gap: var(--field-gap);\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n transition-property: color, box-shadow;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n\n /* If using a fieldset element for the Field, fix spacing for the label */\n &:is(fieldset) legend {\n margin-block-end: var(--field-gap);\n }\n\n &.compact,\n .fieldset.compact & {\n --field-gap: calc(0.9 * var(--space-2xs));\n --field-padding: 0.33em;\n --field-radius: var(--radius-s);\n\n font-size: calc(0.9 * var(--font-size-m));\n }\n\n &:is(:focus-within, .focus) {\n color: var(--color-brand-5);\n }\n\n &:has(:user-invalid, [aria-invalid=\"true\"]) {\n color: var(--color-red-5);\n\n .error-message {\n display: flex;\n }\n }\n\n &:has([readonly]):is(:focus-within, .focus) {\n color: var(--color-gray-5);\n }\n\n input:not(\n [type=\"button\"],\n [type=\"checkbox\"],\n [type=\"file\"],\n [type=\"hidden\"],\n [type=\"image\"],\n [type=\"radio\"],\n [type=\"range\"],\n [type=\"reset\"],\n [type=\"submit\"]\n ),\n select,\n textarea {\n color: var(--color-body-text);\n background-color: light-dark(white, black);\n border: var(--border-s) solid var(--color-border);\n font-size: 1em;\n padding: var(--field-padding);\n border-radius: var(--field-radius);\n transition-property: color, box-shadow, border-color;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n font-family: inherit;\n line-height: 1.25;\n\n &:is(:focus, .focus) {\n outline: 0;\n border-color: var(--color-brand-5);\n box-shadow:\n 0 0 0 0.1em var(--color-brand-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-brand-transparent);\n }\n\n &:focus-visible {\n outline: 0;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n /* Not using :read-only because it matches additional elements (e.g., every color input) */\n &[readonly] {\n border-style: dashed;\n\n &:is(:focus, .focus) {\n outline: 0;\n border-style: solid;\n border-color: var(--color-gray-5);\n box-shadow:\n 0 0 0 0.1em var(--color-gray-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-gray-transparent);\n }\n }\n\n &:user-invalid,\n &[aria-invalid=\"true\"] {\n border-color: var(--color-red-5);\n box-shadow: 0 0 0 0.1em var(--color-red-5);\n\n &:is(:focus, .focus) {\n outline: 0;\n border-color: var(--color-red-5);\n box-shadow:\n 0 0 0 0.1em var(--color-red-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-red-transparent);\n }\n }\n }\n\n input[type=\"color\"] {\n inline-size: auto;\n block-size: auto;\n cursor: pointer;\n\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n\n &::-moz-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n }\n\n /* Prevent child checkbox/radio from changing color with Field label */\n .checkbox,\n .radio {\n color: var(--color-body-text);\n }\n\n /*\n * Fix issue on mobile safari where box shadow, border, and height styles\n * aren't applied to some input types.\n */\n input:is(\n [type=\"date\"],\n [type=\"datetime-local\"],\n [type=\"month\"],\n [type=\"time\"],\n [type=\"week\"]\n ) {\n appearance: none;\n min-height: calc(1.5em + 2 * var(--field-padding));\n }\n\n select,\n input[list] {\n background-image: url(\"@/src/icons/dropdown-thin.svg\");\n background-position: center right var(--space-2xs);\n background-size: 1.15em auto;\n background-repeat: no-repeat;\n appearance: none;\n padding-inline-end: calc(2 * var(--space-2xs) + 1.15em);\n\n &:dir(rtl) {\n background-position: center left var(--space-2xs);\n }\n\n @media (prefers-color-scheme: dark) {\n background-image: url(\"@/src/icons/dropdown-thin-invert.svg\");\n }\n }\n\n /*\n * On mobile safari, the user agent adds its own dropdown icon to inputs with\n * a list attribute. We want to replace this icon with our custom one to match\n * the style of <select> elements.\n *\n * While we could remove the browser's icon (leaving the background image to\n * display our custom icon, like how we do for <select>), this has the side\n * effect of preventing the user from opening the list of options. Making the\n * icon invisible also doesn't work, since the target area ends up being out\n * of alignment with the visible icon, and moving the target area can be \n * error-prone.\n *\n * To work around this, we remove the field's background image on mobile\n * safari and keep the native pseudo-element, but replace its icon.\n */\n @supports (-webkit-touch-callout: none) {\n input[list] {\n padding-inline-end: var(--field-padding);\n background-image: none;\n\n &::-webkit-list-button {\n appearance: none;\n width: calc(1.15em + var(--field-padding));\n height: 1.5em;\n background-image: url(\"@/src/icons/dropdown-thin.svg\");\n background-position: right var(--field-padding) center;\n background-size: 1.15em auto;\n background-repeat: no-repeat;\n }\n\n @media (prefers-color-scheme: dark) {\n &::-webkit-list-button {\n background-image: url(\"@/src/icons/dropdown-thin-invert.svg\");\n }\n }\n }\n }\n\n /* A similar issue to above happens on desktop chrome */\n @supports (selector(input[list]::-webkit-calendar-picker-indicator)) {\n input[list] {\n padding-inline-end: 0;\n background-image: none;\n\n &::-webkit-calendar-picker-indicator {\n appearance: none;\n display: block !important;\n list-style: none !important;\n cursor: pointer;\n width: 1.15em;\n height: 1.5em;\n flex: none;\n opacity: 1;\n padding: var(--field-padding);\n background-image: url(\"@/src/icons/dropdown-thin.svg\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: 1.15em auto;\n }\n\n @media (prefers-color-scheme: dark) {\n &::-webkit-calendar-picker-indicator {\n background-image: url(\"@/src/icons/dropdown-thin-invert.svg\");\n }\n }\n }\n }\n\n select {\n cursor: pointer;\n }\n\n .help-text {\n font-size: 0.9em;\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-normal);\n margin: -0.25em 0 0;\n position: relative;\n }\n\n .error-message {\n display: none;\n font-size: 0.9em;\n border: 0;\n padding: 0;\n margin: 0;\n font-weight: var(--font-weight-semibold);\n align-items: center;\n gap: 2px;\n\n &::before {\n content: \"\";\n mask-image: url(\"@/src/icons/x-circle.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: currentcolor;\n display: inline-block;\n height: 1.2em;\n width: 1.2em;\n margin-inline-end: 0.2em;\n }\n }\n\n .input-group {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n\n > * {\n border-radius: 0 !important;\n z-index: 1;\n }\n\n > :is(:user-invalid, [aria-invalid=\"true\"]) {\n z-index: 2;\n }\n\n > :first-child {\n border-start-start-radius: var(--field-radius) !important;\n border-end-start-radius: var(--field-radius) !important;\n }\n\n > :last-child {\n border-end-end-radius: var(--field-radius) !important;\n border-start-end-radius: var(--field-radius) !important;\n }\n\n > :is(:focus-visible, .focus) {\n z-index: 3;\n }\n\n > :is(.prefix, .suffix, .action) {\n user-select: none;\n -webkit-user-drag: none;\n display: flex;\n font-weight: var(--font-weight-normal);\n color: var(--color-gray-3);\n background-color: var(--color-gray-9);\n border: var(--border-s) solid var(--color-border);\n padding: var(--field-padding) calc(2 * var(--field-padding));\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n\n :is(img, svg) {\n height: 1.15em;\n width: auto;\n }\n }\n\n > .prefix {\n border-inline-end: 0;\n }\n\n > .suffix {\n border-inline-start: 0;\n }\n\n > .action {\n cursor: pointer;\n color: var(--color-brand-3);\n border-inline-start: 0;\n transition-property: box-shadow, background-color;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n\n &:is(:hover, .hover) {\n background-color: var(--color-gray-8);\n }\n\n &:is(:active, .active) {\n background-color: var(--color-gray-7);\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-brand-5);\n border-inline-start-width: var(--border-s);\n border-inline-start-style: solid;\n box-shadow:\n 0 0 0 0.11em var(--color-brand-5),\n 0 0 0 calc(0.22em + var(--border-s)) var(--color-brand-transparent);\n outline: 0;\n }\n }\n\n > :is(input, select, textarea) {\n width: 100%;\n\n &:has(~ .action:is(:focus-visible, .focus)) {\n border-inline-end-width: 0;\n }\n }\n }\n\n .required-indicator {\n display: inline;\n position: relative;\n inset-block-end: 0.15em;\n inset-inline-start: 0.15em;\n color: var(--color-red-5);\n font-size: 0.9em;\n font-weight: var(--font-weight-semibold);\n }\n}\n",".paragraph,\n:where(.style-semantic-elements p) {\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n line-height: 1.6;\n margin: 0.75em 0;\n text-wrap: pretty;\n hanging-punctuation: first;\n overflow-wrap: break-word;\n\n &:first-child {\n margin-block-start: 0;\n }\n\n &:last-child {\n margin-block-end: 0;\n }\n}\n\n/*\n * Remove the top margin from paragraphs immediately after a heading, since we\n * want to use the (slightly smaller) bottom margin of the heading instead.\n *\n * This ensures that headings are visibly closer to their content than the\n * content above them, using spacing intentionally to denote hierarchy.\n */\n:is(.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6)\n + .paragraph,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6) + p) {\n margin-block-start: 0;\n}\n",".skip-link {\n position: fixed;\n display: inline-block;\n z-index: 100;\n top: var(--space-body-y);\n left: var(--space-body-x);\n background-color: var(--color-brand-5);\n padding: var(--space-xs);\n border-radius: var(--radius-m);\n border: 0.25em solid var(--color-brand-4);\n color: white;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n outline: 0;\n box-shadow:\n var(--shadow-l),\n 0 0 0 0.2em var(--color-brand-transparent);\n text-decoration: none;\n vertical-align: middle;\n opacity: 0.25;\n transition: opacity var(--duration-m) var(--ease-default);\n pointer-events: none;\n line-height: 1;\n\n &:is(:focus, .focus, .static) {\n opacity: 1;\n }\n\n &.static {\n position: static;\n pointer-events: unset;\n }\n}\n",".bold,\n:where(.style-semantic-elements strong, .style-semantic-elements b) {\n font-weight: var(--font-weight-bold);\n}\n\n.italic,\n:where(.style-semantic-elements em) {\n font-style: italic;\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.strikethrough,\n:where(.style-semantic-elements s) {\n text-decoration-line: line-through;\n}\n\n.underline.strikethrough {\n text-decoration-line: underline line-through;\n}\n\n.subscript,\n.superscript,\n:where(.style-semantic-elements sub, .style-semantic-elements sup) {\n font-size: 0.75em;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\n.subscript,\n:where(.style-semantic-elements sub) {\n inset-block-end: -0.25em;\n}\n\n.superscript,\n:where(.style-semantic-elements sup) {\n inset-block-start: -0.5em;\n}\n\n.code,\n:where(.style-semantic-elements code) {\n font-family: var(--font-family-mono);\n background-color: var(--color-gray-extra-transparent);\n color: var(--color-gray-1);\n border-radius: var(--radius-s);\n display: inline;\n padding: 0.25ch 0.5ch;\n font-size: 0.9em;\n\n &.invert {\n color: var(--color-gray-9);\n }\n}\n\n.link .code,\n:where(.style-semantic-elements a code) {\n text-decoration: inherit;\n text-decoration-color: inherit;\n text-decoration-thickness: inherit;\n color: inherit;\n}\n",".card {\n --card-bg-color: var(--color-body-alt);\n --card-fg-color: var(--color-body-text);\n --card-title-color: var(--color-brand-3);\n --card-title-underline-color: var(--color-brand-transparent);\n --card-title-active-color: var(--color-brand-2);\n --card-border-color: var(--color-border);\n\n background-color: var(--card-bg-color);\n border-radius: var(--radius-l);\n border: var(--border-s) solid var(--card-border-color);\n box-shadow: var(--shadow-m);\n padding: var(--space-m);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n color: var(--card-fg-color);\n\n &.secondary {\n --card-bg-color: var(--color-body);\n\n border-radius: var(--radius-m);\n box-shadow: var(--shadow-s);\n padding: var(--space-s);\n }\n\n &.transparent {\n --card-bg-color: var(--internal-glass-bg-color);\n --card-border-color: var(--internal-glass-border-color);\n --card-fg-color: var(--internal-glass-fg-color);\n --card-title-color: var(--card-fg-color);\n --card-title-underline-color: light-dark(#0006, #fff6);\n --card-title-active-color: light-dark(#444, #ddd);\n\n backdrop-filter: var(--internal-glass-filter);\n }\n}\n\n.card-title {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n color: var(--card-title-color);\n margin-block: 0 var(--space-xs);\n display: block;\n}\n\n/* This overrides styles in the Link component that also apply */\n.card-title a {\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n color: inherit;\n text-decoration-color: var(--card-title-underline-color);\n\n &:is(:active, .active) {\n color: var(--card-title-active-color);\n }\n}\n\n.card.secondary .card-title {\n font-size: var(--font-size-m);\n margin-block-end: var(--space-2xs);\n}\n"],"names":[]}
1
+ {"version":3,"sourceRoot":null,"mappings":"ACAA,gDAOA,yEAIA,iIAAA,mCAAA,yDAKA,8EAMA,sDElBA,0HAQA,gCAEE,4FAKF,uCAEE,4FAKF,iCAEE,4FAKF,wEAQA,oHAKA,kHASA,uMOtDA,2nXAqNE,mCAAqC,8EAKtB,gsBI3NjB,8MAYE,6FAKA,mcAoBF,qFIrCA,gQAOE,mCAAqC,uEAIpB,iFAGnB,mNASE,gCAAiC,gGAKtB,mOASX,uCAKF,gXAkBE,2RAYA,mIAMA,2XAaE,6GAIA,yMAKE,wIAKF,6EAOJ,uIAUA,kEACE,gCAOF,iHAMA,gFAIA,iLAOA,6IAMA,2HAKA,gBACE,4GAKA,qFIpKF,yIAQE,0CAKF,6IAQE,uDAOA,+OAWA,0KAMA,iSAQA,aACE,0DAIA,4DI1DJ,yWAiBE,8HAMA,qCAIA,gFAIA,0yBI/BF,uGAQE,2FAQA,oHIFA,oaAaA,6HAIA,2IAQE,q7CAQA,mOAQA,8qDAQA,8NI7DJ,qPjBFA,sBAGE,oUAYE,8CAAgD,wGAKhD,gDAIA,6FAKA,wFAKA,yPAUA,2DAGE,oEAKA,6GAIE,oDAIA,+FAON,shBAmBE,8CAAgD,0EAIhD,uIAIA,yIAKA,wDAKA,qgCAkBA,iPAIA,gCAAiC,0DAG/B,2CAOF,2HAME,0EAKF,iII9IJ,kkBAsBE,aAAc,qDAId,khBASA,weASA,giBASA,yrBAUF,kEIpEA,iRAoBA,gZAcE,sNAaF,mQAaA,yEAOE,kDAKA,uDAKA,2KAUF,qXAgBE,yFAIA,qFAIA,yIAKA,6FAGE,yEAKF,+LAaF,gJAQA,2LAWA,mGAOA,2IAUA,wRAWA,4FASE,0EAIA,yEAIA,uEAKF,kKAOA,oaAcE,0FAIA,iEAIA,yHAKA,wGAIA,mHAMF,kCAGE,uNAQA,qQAaE,+FAIA,iFAIA,+FAOA,gHAIA,4HAKA,kHAMJ,yFAOA,sEAIA,qBAME,qCAIA,4MAWE,mCAKF,oEAIA,sFAMA,4DAGE,iEAIA,6MASA,uFAMJ,uCAQA,gBACE,yBAKF,wEI9XA,mRAWE,+bAOA,+YAOA,ycAOA,omBAOA,qGAIE,yEAIA,2FAMF,yHAKA,gGAIA,2CAIA,uNAUE,qIAOJ,mKAQA,gDIhGA,wuCA2CE,sTAgBA,yKAOA,iDAOE,kCAAqC,uDAKvC,+CAGE,oFAQA,kFAKF,sMAOA,4LAOA,2MAOA,2MAOA,sMAOA,iMAOA,iMAOA,2MAOA,gNAOA,4FAMA,4FAMA,gOAOE,yJAMA,qKAMA,qKAMA,iKAMA,6JAMA,6JAMA,qKAMA,yKAMA,6JAMA,oIAMA,4JAQF,6RASE,gIAKA,qHAIE,8FAKF,8HAIE,oGAKF,8HAIE,oGAKF,2HAIE,kGAKF,wHAIE,gGAKF,wHAIE,gGAKF,8HAIE,oGAKF,iIAIE,sGAKF,gIAKE,mJAKF,4DAIA,+CAIA,+CAKF,8BAIA,+BAIA,mGASI,kDAKA,yFASA,iDAIA,4FAMJ,2HAKE,wFAKF,gCAGE,2KAQA,yEAMJ,uGLhaA,mCAGE,sLAWA,sJAUA,wNAaA,wEAMA,kEAMA,2FAIA,iMAQA,8HAKE,mMIvEJ,s5BA8BE,mCAAqC,sGAKrC,6EAKE,4NAQE,sHAMF,oHAKA,yDAOE,kCAAqC,+DAMzC,+NAOE,mCAAqC,sGAMvC,iPAOE,mCAAqC,+GAMvC,iPAOE,mCAAqC,+GAMvC,2OAOE,mCAAqC,4GAMvC,qOAOE,mCAAqC,yGAMvC,qOAOE,mCAAqC,yGAMvC,iPAOE,mCAAqC,+GAMvC,uPAOE,mCAAqC,kHAMvC,qOAOE,mCAAqC,yGAMvC,+NAOE,yNAQA,2OAQA,2OAQA,qOAQA,+NAQA,+NAQA,2OAQA,iPAQA,+NASF,oLAQA,0MAUF,iCAIA,iLAUA,mFAIA,2fAqBE,i2BAYA,0EAIA,+EAIA,kFAKF,wFG/VA,yUAgBE,yOAWF,yEAKA,mDAIA,qDAIA,oCAIA,oCCvCA,sLAYE,wBAGE,8CAAgD,wGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,uGAMlD,wBAGE,8CAAgD,wGAMlD,mHAQE,mDAIA,oDAIA,mDAKF,kHAQE,kDAIA,mDAIA,kDAYF,+GAAA,mCAAA,wFAKF,yBAIA,kJASE,4BCxHF,qaAkBE,6DAIA,yKASA,2DAIA,uEAGE,0EAKF,0EAIA,6jBAyBE,yVAQA,uMAIA,2OAMA,6MAGE,mXAUF,4cAKE,uiBAUJ,yEAKE,iEAIA,yHAOA,sHASF,4DASA,wJAWA,4gBASE,iSAIA,mCAAqC,mWAoBvC,uCACE,iFAIE,whBAUA,mCACE,2WAQN,mEACE,8DAIE,8lBAgBA,mCACE,yXAON,6BAIA,4IAQA,iJAUE,quCAcF,wEAKE,0DAKA,qEAIA,+IAKA,0IAKA,yDAIA,6WAaE,uFAMF,gDAIA,kDAIA,iOAQE,mFAIA,qFAIA,0RAWF,0DAGE,iHAMJ,2LvCxXF,kNAUA,uRAaA,+EAKA,gFG5BA,mEAME,2DAIA,2DAIA,0DAIA,wDAIA,wDAIA,yDAIA,2DAIA,uGAKA,sGAMF,8DAMA,kEAMA,2EGzDA,qPAcA,wIAYE,oGAKF,kHAMA,kHAMA,qHAMA,oHAMA,gHIvDA,6IAOA,uWAWE,2GAKF,gQAUA,4GAAA,wGIjCA,0VTAA,ubAeE,iHAIA,yGAIA,0GIdF,0IAQA,iKAAA,qLAUA,wFAAA,4GAOA,4HAOA,sJAOA,4KAOA,4HAOA,iJAOA,uKAQA,sEAAA,sEAAA,2EAAA,2EI7EA,4DAMA,qCACE,+NAaF,4OAYA,iPAAA,oPAAA,wPAcA,2EAKA,oOAYA,sJAOA,4JAOA,4JAME,mCAAqC,6JAQvC,mKAME,mCAAqC,oKAQvC,uJAOA,8JI3GA,kHAKE,yBAIA,0BAIA,yBAWA,8GAAA,mCAAA,uFAKF,yNAUE,gCAAmC,wEAMnC,iEIlDF,2NAUE,oFAIA,iFAYF,iKnB1BA,iEAUA,kEAMA,wCACE,qOAaF,kPAYA,+OAYA,0OAYA,oKAOA,+JEzEA,iXAcE,4MAOE,4HGhBJ,8CAGE,qKAaA,oHAMA,sGAKA,8LAQA,uDAGE,6JAMA,+CAIA,+CAMF,yEI3DF,+DAUA,8DAUA,2eAqBE,yJAMA,wHAKA,uGAKA,sGAMA,4NAMA,mCAAqC,oGAKvC,sCI1EA,gkBAyBE,+CAIA,uDG7BF,qWAaE,wBAA0B,2CAI1B,qFAKA,6DAGE,mJAKA,+IAOA,uKAKE,mCAAsC,gGAKxC,mKAKE,mCAAsC,4FAM1C,qOASA,wNASA,6YAgBA,gWI5FF,4EAUA,4QAaE,6CAIA,6CAIA,iDAGE,wCAKF,4DAIE,4CAKF,mEAIE,2CAKF,6yCAcA,qIItEF,yOAaA,gDAKA,gcAiBE,oZAgBA,+HAKA,oPAQA,mJAIE,4GAIA,mNAOF,uTAMF,0FDtFA,qcAgBE,8LAUA,kHAIA,gHAIA,0OASA,8JAKA,yNAOA,qHAIA,6HAIA,4EAIA,qKAIA,+JAIA,2IAIA,gOAKA,oHIpFF,6GAKA,8DAKA,0CAIA,oFAKA,qEAIA,kKASA,uEAKA,0EAKA,8OAUE,kFAKF,0JIzDA,2jBAkBE,kIAQA,6aAYF,2PAaA,8IAOE,uEAKF","sources":["index.css","misc/reset.css","components/fieldset.css","components/progress.css","components/flex.css","components/quote.css","misc/utility-classes.css","components/link.css","components/heading.css","components/radio.css","misc/variables.css","components/list.css","components/highlight.css","components/skeleton.css","components/shared/base-check.css","components/meter.css","components/key.css","components/skip-link.css","components/shared/base-dialog.css","components/modal.css","components/slider.css","components/accordion.css","components/shared/base-message.css","components/paragraph.css","components/spinner.css","components/alert.css","components/shared/dismiss-button.css","components/table.css","components/switch.css","components/app.css","components/shared/fieldset-reset.css","components/text.css","components/checkbox.css","components/banner.css","components/shared/link-icons.css","components/card.css","components/chip.css","components/button.css","components/abbreviation.css","components/divider.css","components/drawer.css","components/field.css"],"sourcesContent":["/* Misc styles */\n@import url(\"./misc/reset.css\");\n@import url(\"./misc/utility-classes.css\");\n@import url(\"./misc/variables.css\");\n\n/* Styles used in multiple components */\n@import url(\"./components/shared/base-check.css\");\n@import url(\"./components/shared/base-dialog.css\");\n@import url(\"./components/shared/base-message.css\");\n@import url(\"./components/shared/dismiss-button.css\");\n@import url(\"./components/shared/fieldset-reset.css\");\n@import url(\"./components/shared/link-icons.css\");\n\n/* Components */\n@import url(\"./components/abbreviation.css\");\n@import url(\"./components/accordion.css\");\n@import url(\"./components/alert.css\");\n@import url(\"./components/app.css\");\n@import url(\"./components/banner.css\");\n@import url(\"./components/button.css\");\n@import url(\"./components/checkbox.css\");\n@import url(\"./components/chip.css\");\n@import url(\"./components/divider.css\");\n@import url(\"./components/drawer.css\");\n@import url(\"./components/field.css\");\n@import url(\"./components/fieldset.css\");\n@import url(\"./components/flex.css\");\n@import url(\"./components/heading.css\");\n@import url(\"./components/highlight.css\");\n@import url(\"./components/key.css\");\n@import url(\"./components/link.css\");\n@import url(\"./components/list.css\");\n@import url(\"./components/meter.css\");\n@import url(\"./components/modal.css\");\n@import url(\"./components/paragraph.css\");\n@import url(\"./components/progress.css\");\n@import url(\"./components/quote.css\");\n@import url(\"./components/radio.css\");\n@import url(\"./components/skeleton.css\");\n@import url(\"./components/skip-link.css\");\n@import url(\"./components/slider.css\");\n@import url(\"./components/spinner.css\");\n@import url(\"./components/switch.css\");\n@import url(\"./components/table.css\");\n@import url(\"./components/text.css\");\n\n/*\n * Card needs to be loaded after Link so .card-title[href] in the former\n * overrides the same selector in the latter without needing \"!important\"\n * declarations or specificity hacks.\n */\n@import url(\"./components/card.css\");\n","*,\n*::before,\n*::after {\n box-sizing: border-box;\n margin: 0;\n}\n\n:where(:focus-visible) {\n outline: var(--border-m) solid var(--color-brand-5);\n}\n\nhtml {\n text-size-adjust: none;\n color-scheme: light dark;\n}\n\nbody {\n margin: 0;\n background-color: var(--color-body);\n color: var(--color-body-text);\n}\n\nimg,\npicture,\nvideo,\niframe {\n max-width: 100%;\n display: block;\n}\n",".fieldset legend,\n.legend {\n line-height: 1.15;\n font-size: var(--font-size-l);\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n color: var(--color-body-text);\n margin-bottom: var(--space-2xs);\n}\n\n.fieldset-content {\n position: relative;\n border: var(--border-s) solid var(--color-border);\n border-radius: var(--radius-m);\n background-color: var(--color-body);\n color: var(--color-body-text);\n padding: var(--space-xs);\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n gap: var(--space-xs);\n}\n\n.fieldset.horizontal .fieldset-content {\n flex-direction: row;\n gap: var(--space-2xs);\n}\n\n.fieldset.subtle .fieldset-content {\n border: none;\n padding: 0;\n background-color: transparent;\n}\n","@keyframes indeterminate-progress {\n from {\n opacity: 0.25;\n }\n\n to {\n opacity: 0.75;\n }\n}\n\nprogress.progress {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-progress-bar) {\n progress.progress {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.progress::-webkit-progress-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.progress::-webkit-progress-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid var(--color-blue-5);\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--color-blue-6),\n var(--color-blue-4)\n );\n}\n\n.progress::-moz-progress-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid var(--color-blue-5);\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--color-blue-6),\n var(--color-blue-4)\n );\n}\n\n.progress:indeterminate::-webkit-progress-value {\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n\n.progress:indeterminate::-moz-progress-bar {\n opacity: 0.5;\n inline-size: 100% !important;\n animation: indeterminate-progress 1s var(--ease-both-subtle) infinite\n alternate;\n}\n",".wrap,\n.stack,\n.distribute {\n display: flex !important;\n gap: var(--space-s);\n\n &.no-gap {\n gap: var(--space-none);\n }\n\n &.densest {\n gap: var(--space-3xs);\n }\n\n &.denser {\n gap: var(--space-2xs);\n }\n\n &.dense {\n gap: var(--space-xs);\n }\n\n &.sparse {\n gap: var(--space-m);\n }\n\n &.sparser {\n gap: var(--space-l);\n }\n\n &.sparsest {\n gap: var(--space-xl);\n }\n\n &.horizontal,\n &.horizontally {\n flex-direction: row;\n }\n\n &.vertical,\n &.vertically {\n flex-direction: column;\n }\n}\n\n.wrap {\n flex-wrap: wrap;\n align-items: center;\n justify-content: start;\n}\n\n.stack {\n flex-wrap: nowrap;\n align-items: stretch;\n justify-content: start;\n}\n\n.distribute {\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-evenly;\n}\n",".quote,\n:where(.style-semantic-elements blockquote) {\n display: block;\n margin: 0;\n color: var(--color-body-text-alt);\n border-inline-start: 0.25em solid var(--color-gray-transparent);\n padding: var(--space-3xs);\n padding-inline-start: var(--space-xs);\n position: relative;\n line-height: 1.25;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n footer {\n margin-block-start: 0.5em;\n font-size: var(--font-size-s);\n font-style: initial;\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n\n cite {\n font-weight: var(--font-weight-normal);\n font-style: italic;\n }\n }\n}\n","/***********************************\n * Conditionally show/hide content *\n ***********************************/\n\n.app:not([data-jrg-js-enabled=\"true\"]) .if-js-enabled {\n display: none !important;\n}\n\n.app[data-jrg-js-enabled=\"true\"] .if-js-disabled {\n display: none !important;\n}\n\n@media screen and (width < 30rem) {\n /* Narrow viewport */\n :is(.if-medium-viewport, .if-wide-viewport):not(.if-narrow-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (30rem <= width < 55rem) {\n /* Medium viewport */\n :is(.if-narrow-viewport, .if-wide-viewport):not(.if-medium-viewport) {\n display: none !important;\n }\n}\n\n@media screen and (width >= 55rem) {\n /* Wide viewport */\n :is(.if-narrow-viewport, .if-medium-viewport):not(.if-wide-viewport) {\n display: none !important;\n }\n}\n\n.app:not(:has(.app-sidebar)) .if-app-has-sidebar {\n display: none !important;\n}\n\n/*************************************************\n * Override color mode for a section of the page *\n *************************************************/\n\n.light-mode {\n color-scheme: only light;\n color: var(--color-body-text);\n}\n\n.dark-mode {\n color-scheme: only dark;\n color: var(--color-body-text);\n}\n\n/*****************************************************\n * Make elements invisible, except to screenreaders *\n *****************************************************/\n\n.visually-hidden,\n.app-sidebar-toggle input,\n.skip-link:not(:focus, .static) {\n clip: rect(1px, 1px, 1px, 1px);\n clip-path: inset(50%);\n height: 1px;\n width: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n}\n",".link,\n.card-title a,\n:where(.style-semantic-elements a) {\n color: var(--color-teal-4);\n font-weight: var(--font-weight-semibold);\n text-decoration-line: underline;\n text-decoration-color: var(--color-teal-transparent);\n text-decoration-skip-ink: all;\n text-decoration-thickness: 0.1em;\n text-underline-offset: 0.1em;\n cursor: pointer;\n transition-property: color, text-decoration-color;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n &:is(:hover, .hover) {\n text-decoration-color: currentcolor;\n }\n\n &:is(:focus-visible, .focus) {\n outline-offset: 1px;\n }\n\n &:is(:active, .active) {\n color: var(--color-teal-3);\n }\n}\n",".heading-1,\n.heading-2,\n.heading-3,\n.heading-4,\n.heading-5,\n.heading-6,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6)) {\n font-family: var(--font-family-heading);\n margin-block: 0.75em 0.3em;\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n}\n\n.heading-1,\n:where(.style-semantic-elements h1) {\n font-size: var(--font-size-4xl);\n font-weight: var(--font-weight-black);\n\n /* \n * Since the Level 1 Heading will typically be the first item inside the App\n * Content container (which already has padding at the top), we remove the top\n * margin by default. We can always add it back for special cases.\n */\n margin-block-start: 0;\n\n .app-content > &:first-of-type {\n margin-block-start: 0;\n }\n}\n\n.heading-2,\n:where(.style-semantic-elements h2) {\n font-size: var(--font-size-3xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-3,\n:where(.style-semantic-elements h3) {\n font-size: var(--font-size-2xl);\n font-weight: var(--font-weight-bold);\n}\n\n.heading-4,\n:where(.style-semantic-elements h4) {\n font-size: var(--font-size-xl);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-5,\n:where(.style-semantic-elements h5) {\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n}\n\n.heading-6,\n:where(.style-semantic-elements h6) {\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n}\n","/*\n * Note: Radio extends Base Check, meaning this file builds on top of the\n * styles defined in ./shared/base-check.css\n */\n\n.radio input {\n border-radius: var(--radius-full);\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n width: 100%;\n height: 100%;\n border-radius: var(--radius-full);\n inset: 0;\n transform: scale(0);\n }\n\n /* Checked background */\n &::before {\n background-color: var(--color-brand-5);\n transition: transform var(--duration-m) var(--ease-default);\n }\n\n /* Checked center dot */\n &::after {\n background-color: white;\n transition: transform var(--duration-l) var(--ease-spring) 25ms;\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked {\n border-color: var(--color-brand-4);\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-4),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n\n &::before {\n transform: scale(1);\n }\n\n &::after {\n transform: scale(0.5);\n }\n }\n\n /* When disabled and not selected, make background gray */\n &:disabled:not(:checked) {\n background-color: var(--color-gray-9);\n }\n}\n","/* Define all custom properties at the root */\n:root,\n/* Explicitly redefine on ::backdrop for compatibility with older browsers (see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element) */\n::backdrop,\n/* On certain elements, redefine to prevent inheritance of light/dark mode from parents */\n.modal,\n.drawer,\n.light-mode,\n.dark-mode {\n /* Brand */\n --color-brand-1: light-dark(#08003b, #e9f0ff);\n --color-brand-2: light-dark(#190074, #cad6ff);\n --color-brand-3: light-dark(#290fa3, #9fb0ff);\n --color-brand-4: light-dark(#3c35cb, #7382ff);\n --color-brand-5: light-dark(#545be7, #5961ee);\n --color-brand-6: light-dark(#6f7dff, #4344cf);\n --color-brand-7: light-dark(#93a4ff, #3124b1);\n --color-brand-8: light-dark(#bbc9ff, #230095);\n --color-brand-9: light-dark(#e5edff, #0b004a);\n --color-brand-transparent: light-dark(#545be766, #5961ee80);\n --color-brand-extra-transparent: light-dark(#545be733, #5961ee59);\n\n /* Red */\n --color-red-1: light-dark(#240000, #ffe3dc);\n --color-red-2: light-dark(#4d0000, #ffc3b6);\n --color-red-3: light-dark(#7a0000, #ff8875);\n --color-red-4: light-dark(#a90000, #f45441);\n --color-red-5: light-dark(#cc2a1b, #d33223);\n --color-red-6: light-dark(#f0503d, #b30000);\n --color-red-7: light-dark(#ff7c68, #8d0000);\n --color-red-8: light-dark(#ffb4a5, #6c0000);\n --color-red-9: light-dark(#ffe3dc, #340000);\n --color-red-transparent: light-dark(#cc2a1b66, #d3322380);\n --color-red-extra-transparent: light-dark(#cc2a1b33, #d3322359);\n\n /* Orange */\n --color-orange-1: light-dark(#1c0300, #ffe5d0);\n --color-orange-2: light-dark(#3e1200, #ffc5a0);\n --color-orange-3: light-dark(#632500, #ff9559);\n --color-orange-4: light-dark(#8b3a00, #d97234);\n --color-orange-5: light-dark(#b45100, #ba570d);\n --color-orange-6: light-dark(#d76f04, #9c3b00);\n --color-orange-7: light-dark(#f98f3a, #782700);\n --color-orange-8: light-dark(#ffb87e, #5c1900);\n --color-orange-9: light-dark(#ffe6cc, #2c0400);\n --color-orange-transparent: light-dark(#b4510066, #ba570d80);\n --color-orange-extra-transparent: light-dark(#b4510033, #ba570d59);\n\n /* Yellow */\n --color-yellow-1: light-dark(#140900, #fdf4d5);\n --color-yellow-2: light-dark(#2f1e00, #fadfa6);\n --color-yellow-3: light-dark(#4e3700, #fdd171);\n --color-yellow-4: light-dark(#7a5700, #dfaf3f);\n --color-yellow-5: light-dark(#a57c00, #c69720);\n --color-yellow-6: light-dark(#c89808, #a17807);\n --color-yellow-7: light-dark(#dfb22b, #750);\n --color-yellow-8: light-dark(#efcb72, #4e3700);\n --color-yellow-9: light-dark(#f8edc1, #211500);\n --color-yellow-transparent: light-dark(#a57c0066, #a57c0080);\n --color-yellow-extra-transparent: light-dark(#a57c0033, #a57c0059);\n\n /* Green */\n --color-green-1: light-dark(#011000, #dff4d3);\n --color-green-2: light-dark(#0c2a00, #bbe7a5);\n --color-green-3: light-dark(#1d4600, #8ecb6b);\n --color-green-4: light-dark(#2f6500, #63a736);\n --color-green-5: light-dark(#438500, #498b0f);\n --color-green-6: light-dark(#5fa500, #2e7000);\n --color-green-7: light-dark(#7dc53a, #1c5400);\n --color-green-8: light-dark(#a4e472, #113f00);\n --color-green-9: light-dark(#dafbc4, #011b00);\n --color-green-transparent: light-dark(#43850066, #498b0f80);\n --color-green-extra-transparent: light-dark(#43850033, #498b0f59);\n\n /* Teal */\n --color-teal-1: light-dark(#001011, #c8f6f5);\n --color-teal-2: light-dark(#002a2b, #9ee7e7);\n --color-teal-3: light-dark(#004747, #61c7c8);\n --color-teal-4: light-dark(#006566, #3aa4a5);\n --color-teal-5: light-dark(#008586, #0b8889);\n --color-teal-6: light-dark(#00a7a8, #006d6f);\n --color-teal-7: light-dark(#00c8c9, #005254);\n --color-teal-8: light-dark(#76e2e2, #003e3f);\n --color-teal-9: light-dark(#caf9f8, #001a1b);\n --color-teal-transparent: light-dark(#00858666, #0b888980);\n --color-teal-extra-transparent: light-dark(#00858633, #0b888959);\n\n /* Blue */\n --color-blue-1: light-dark(#00003e, #ddf0ff);\n --color-blue-2: light-dark(#00007a, #b9d9ff);\n --color-blue-3: light-dark(#002b97, #7eb4ff);\n --color-blue-4: light-dark(#004abd, #418dff);\n --color-blue-5: light-dark(#1c69e3, #2370ea);\n --color-blue-6: light-dark(#3988ff, #0053cb);\n --color-blue-7: light-dark(#74adff, #0035ac);\n --color-blue-8: light-dark(#a9cfff, #001a95);\n --color-blue-9: light-dark(#ddf0ff, #005);\n --color-blue-transparent: light-dark(#1c69e366, #2370ea80);\n --color-blue-extra-transparent: light-dark(#1c69e333, #2370ea59);\n\n /* Purple */\n --color-purple-1: light-dark(#170029, #fbe4ff);\n --color-purple-2: light-dark(#370054, #edc4ff);\n --color-purple-3: light-dark(#5a0085, #d88eff);\n --color-purple-4: light-dark(#7819a8, #b864ef);\n --color-purple-5: light-dark(#9640ca, #9c47d1);\n --color-purple-6: light-dark(#b562ea, #8127b3);\n --color-purple-7: light-dark(#ce8dfc, #660095);\n --color-purple-8: light-dark(#e8b6ff, #4f0076);\n --color-purple-9: light-dark(#fbe4ff, #23003a);\n --color-purple-transparent: light-dark(#9640ca66, #9c47d180);\n --color-purple-extra-transparent: light-dark(#9640ca33, #9c47d159);\n\n /* Magenta */\n --color-magenta-1: light-dark(#21000c, #ffe1ef);\n --color-magenta-2: light-dark(#480023, #ffbdd9);\n --color-magenta-3: light-dark(#73003d, #ff7db8);\n --color-magenta-4: light-dark(#9b0058, #ea5096);\n --color-magenta-5: light-dark(#c32775, #ca2f7b);\n --color-magenta-6: light-dark(#e45193, #aa0061);\n --color-magenta-7: light-dark(#fe7cb1, #850048);\n --color-magenta-8: light-dark(#ffadd0, #660035);\n --color-magenta-9: light-dark(#ffe1f0, #300015);\n --color-magenta-transparent: light-dark(#c3277566, #ca2f7b80);\n --color-magenta-extra-transparent: light-dark(#c3277533, #ca2f7b59);\n\n /* Gray */\n --color-gray-1: light-dark(#090b0f, #ebeff3);\n --color-gray-2: light-dark(#202226, #d4d8dc);\n --color-gray-3: light-dark(#383b3f, #b1b4b9);\n --color-gray-4: light-dark(#53555a, #8f9297);\n --color-gray-5: light-dark(#6f7276, #75787c);\n --color-gray-6: light-dark(#8d8f94, #5b5e62);\n --color-gray-7: light-dark(#abaeb3, #424549);\n --color-gray-8: light-dark(#cbced3, #303337);\n --color-gray-9: light-dark(#eceff4, #121417);\n --color-gray-transparent: light-dark(#6f727666, #75787c80);\n --color-gray-extra-transparent: light-dark(#6f727633, #75787c59);\n\n /* Semantic colors */\n --color-body: light-dark(#f9fafc, #14161a);\n --color-body-alt: light-dark(#fff, #010203);\n --color-body-text: light-dark(#030305, #fff);\n --color-body-text-alt: light-dark(#404247, #ccced0);\n --color-body-text-invert: light-dark(#fff, #030305);\n --color-shadow: light-dark(#45484c26, #00000166);\n --color-border: light-dark(#d8dbe0, #434549);\n\n /* Font sizes */\n --font-size-xs: clamp(0.6944rem, 0.6855rem + 0.0446vw, 0.72rem);\n --font-size-s: clamp(0.8331rem, 0.8099rem + 0.1163vw, 0.9rem);\n --font-size-m: clamp(1rem, 0.9565rem + 0.2174vw, 1.125rem);\n --font-size-l: clamp(1.2rem, 1.1283rem + 0.3587vw, 1.4063rem);\n --font-size-xl: clamp(1.44rem, 1.3293rem + 0.5533vw, 1.7581rem);\n --font-size-2xl: clamp(1.7281rem, 1.5649rem + 0.8163vw, 2.1975rem);\n --font-size-3xl: clamp(2.0738rem, 1.8396rem + 1.1707vw, 2.7469rem);\n --font-size-4xl: clamp(2.4881rem, 2.1594rem + 1.6435vw, 3.4331rem);\n\n /* Font weights */\n --font-weight-light: 300;\n --font-weight-normal: 400;\n --font-weight-semibold: 600;\n --font-weight-bold: 700;\n --font-weight-black: 900;\n\n /* Font families */\n --font-family-body:\n \"Avenir Next\", avenir, \"Segoe UI Variable Display\", \"Segoe UI\",\n \"URW Gothic\", source-sans-pro, \"Noto Sans\", ui-sans-serif, sans-serif;\n --font-family-heading:\n seravek, \"Gill Sans Nova\", \"Gill Sans MT\", cantarell, \"DejaVu Sans\",\n source-sans-pro, ui-sans-serif, sans-serif;\n --font-family-mono: ui-monospace, \"Cascadia Code\", menlo, hack, monospace;\n\n /* Spacing */\n --space-none: 0;\n --space-3xs: clamp(4px, 3.6528px + 0.1087vw, 5px);\n --space-2xs: clamp(8px, 7.6528px + 0.1087vw, 9px);\n --space-xs: clamp(12px, 11.304px + 0.2174vw, 14px);\n --space-s: clamp(16px, 15.304px + 0.2174vw, 18px);\n --space-m: clamp(24px, 22.9568px + 0.3261vw, 27px);\n --space-l: clamp(32px, 30.608px + 0.4348vw, 36px);\n --space-xl: clamp(48px, 45.9136px + 0.6522vw, 54px);\n --space-2xl: clamp(64px, 61.2176px + 0.8696vw, 72px);\n --space-3xl: clamp(96px, 91.8256px + 1.3043vw, 108px);\n --space-body-x: clamp(20px, 17.5652px + 0.7609vw, 27px);\n --space-body-y: 20px;\n\n /* Radii */\n --radius-none: 0;\n --radius-s: 3px;\n --radius-m: 6px;\n --radius-l: 12px;\n --radius-xl: 24px;\n --radius-2xl: 64px;\n --radius-full: 9999px;\n\n /* Shadows */\n --shadow-none: none;\n --shadow-s: 0 1px 3px -1px var(--color-shadow);\n --shadow-m: 0 1px 7px -1px var(--color-shadow);\n --shadow-l: var(--shadow-s), 0 2px 11px -1px var(--color-shadow);\n --shadow-xl: var(--shadow-m), 0 3px 15px -1px var(--color-shadow);\n\n /* Border widths */\n --border-none: 0;\n --border-s: 1px;\n --border-m: 2px;\n --border-l: 5px;\n --border-xl: 8px;\n\n /* Opacity */\n --opacity-disabled: 0.65;\n\n @media (prefers-color-scheme: dark) {\n --opacity-disabled: 0.5;\n }\n\n /* Easing functions */\n --ease-default: cubic-bezier(0.6, 0.22, 0.45, 0.9);\n --ease-out: cubic-bezier(0.17, 0.84, 0.44, 1);\n --ease-in: cubic-bezier(0.7, 0.1, 0.8, 0.65);\n --ease-both: cubic-bezier(0.65, 0.05, 0.36, 1);\n --ease-both-subtle: cubic-bezier(0.45, 0.12, 0.55, 0.88);\n --ease-spring: cubic-bezier(0.95, -0.55, 0.05, 1.55);\n\n /* Durations */\n --duration-s: 100ms;\n --duration-m: 150ms;\n --duration-l: 250ms;\n --duration-xl: 350ms;\n\n /**************************************************************\n * Tokens prefixed with --internal- are for internal use only *\n **************************************************************/\n\n --internal-glass-bg-color: light-dark(#fff9, #30333799);\n --internal-glass-fg-color: light-dark(black, white);\n --internal-glass-border-color: light-dark(#fff8, #42454988);\n --internal-glass-filter: blur(32px) saturate(120%);\n}\n","/*\n * Note: for most of the styles applied using `style-semantic-elements`, we use the\n * `:where()` selector to reduce specificity so we can more easily override them.\n * However, this breaks the styling for nested lists, which relies on the specificity\n * of the selectors for each level of nesting being higher than the last. Therefore,\n * we don't use this technique for Lists.\n */\n\n/* Add space between subsequent items and nested lists */\n.list li + li,\n.list .list,\n.style-semantic-elements li + li,\n.style-semantic-elements :is(ol, ul) :is(ol, ul) {\n margin-block-start: var(--space-2xs);\n}\n\n/* Style ordered list markers */\nol.list li::marker,\n.style-semantic-elements ol li::marker {\n color: var(--color-body-text-alt);\n font-size: 0.85em;\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n line-height: 0;\n}\n\n/* Style unordered list markers */\nul.list li::marker,\n.style-semantic-elements ul li::marker {\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-bold);\n}\n\n/* Cycle through list marker types in nested lists */\nol.list,\nol.list ol.list ol.list ol.list,\n.style-semantic-elements ol,\n.style-semantic-elements ol ol ol ol {\n list-style: decimal;\n}\n\nol.list ol.list,\nol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol,\n.style-semantic-elements ol ol ol ol ol {\n list-style: lower-latin;\n}\n\nol.list ol.list ol.list,\nol.list ol.list ol.list ol.list ol.list ol.list,\n.style-semantic-elements ol ol ol,\n.style-semantic-elements ol ol ol ol ol ol {\n list-style: lower-roman;\n}\n\nul.list,\nul.list ul.list ul.list ul.list,\n.style-semantic-elements ul,\n.style-semantic-elements ul ul ul ul {\n list-style: disc;\n}\n\nul.list ul.list,\nul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul,\n.style-semantic-elements ul ul ul ul ul {\n list-style: circle;\n}\n\nul.list ul.list ul.list,\nul.list ul.list ul.list ul.list ul.list ul.list,\n.style-semantic-elements ul ul ul,\n.style-semantic-elements ul ul ul ul ul ul {\n list-style: square;\n}\n\n/* Make the markers a different color for their second appearance in a nested list */\nol.list ol.list ol.list ol.list li::marker,\nul.list ul.list ul.list ul.list li::marker,\n.style-semantic-elements ol ol ol ol li::marker,\n.style-semantic-elements ul ul ul ul li::marker {\n color: var(--color-brand-3);\n}\n",".highlight,\n:where(.style-semantic-elements mark) {\n background-color: var(--color-yellow-8);\n color: var(--color-yellow-1);\n print-color-adjust: exact;\n}\n\n.highlight.removed,\n:where(.style-semantic-elements del) {\n background-color: var(--color-red-8);\n color: var(--color-red-1);\n transition: text-decoration-color var(--duration-s) var(--ease-default);\n text-decoration-line: line-through;\n text-decoration-skip-ink: none;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-red-4);\n print-color-adjust: exact;\n\n &:is(:hover, .hover) {\n text-decoration-color: transparent;\n }\n}\n\n.highlight.added,\n:where(.style-semantic-elements ins) {\n background-color: var(--color-green-8);\n color: var(--color-green-1);\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-green-4);\n text-underline-offset: 0.1em;\n print-color-adjust: exact;\n}\n\n.highlight.target,\n::target-text {\n background-color: var(--color-brand-8);\n color: var(--color-brand-1);\n print-color-adjust: exact;\n}\n","@keyframes skeleton-pulse-light {\n from {\n opacity: 0.14;\n }\n\n to {\n opacity: 0.21;\n }\n}\n\n@keyframes skeleton-pulse-dark {\n from {\n opacity: 0.28;\n }\n\n to {\n opacity: 0.36;\n }\n}\n\n.skeleton,\n.skeleton-controller.loading .skeleton-item {\n animation: skeleton-pulse-light 1s var(--ease-both-subtle) alternate 0s\n infinite !important;\n border-radius: var(--radius-s) !important;\n background-color: var(--color-gray-5) !important;\n border: 0 !important;\n outline: 0 !important;\n box-shadow: none !important;\n pointer-events: none !important;\n color: transparent !important;\n mask-image: none !important;\n background-image: none !important;\n user-select: none !important;\n print-color-adjust: exact;\n\n /*************************************************************\n * Special styles for \"skeletonizing\" specific element types *\n *************************************************************/\n\n /* Make block text take up the full width */\n &.paragraph,\n &.heading {\n inline-size: 100%;\n }\n\n /* For empty text elements, add filler content so it isn't 0 height. */\n &:is(.paragraph, .heading, .chip, .card-title)::before {\n content: \".\";\n }\n\n /* Add a reasonable minimum width to buttons and chips */\n &:is(.button, .chip):empty {\n min-inline-size: 5em;\n }\n\n /* Add a reasonable width to card titles */\n &.card-title {\n inline-size: 40%;\n overflow: hidden;\n }\n\n /* Visually hide contents, but let them take up space so elements don't collapse to 0 height. */\n &::before,\n &::after,\n > * {\n visibility: hidden !important;\n }\n\n @media (prefers-color-scheme: dark) {\n animation-name: skeleton-pulse-dark !important;\n }\n}\n\n.skeleton-controller {\n display: contents;\n}\n",".checkbox,\n.radio {\n display: flex;\n align-items: start;\n gap: var(--space-2xs);\n font-size: 1rem;\n cursor: pointer;\n user-select: none;\n line-height: 1.2;\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n\n &:has(input:disabled) {\n cursor: not-allowed;\n opacity: var(--opacity-disabled);\n }\n\n input {\n appearance: none;\n cursor: inherit;\n width: 1em;\n height: 1em;\n font-size: inherit;\n position: relative;\n border: var(--border-s) solid var(--color-gray-6);\n background-color: light-dark(white, black);\n box-shadow: var(--shadow-s);\n transition-property: background-color, border-color, box-shadow;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n flex-shrink: 0;\n\n /* Vertically center the box with the first line of its label (due to line height of 1.2) */\n inset-block-start: 0.1em;\n }\n}\n\n.checkbox-group,\n.radio-group {\n display: flex;\n flex-direction: column;\n gap: var(--space-2xs);\n}\n","meter.meter {\n appearance: none;\n inline-size: 100%;\n block-size: 1em;\n}\n\n@supports selector(::-moz-meter-bar) {\n meter.meter {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n }\n}\n\n.meter::-webkit-meter-bar {\n border-radius: var(--radius-s);\n border: 0;\n display: block;\n inline-size: 100%;\n block-size: 1em;\n box-shadow: inset 0 0 0 var(--border-s) var(--color-border);\n background: var(--color-gray-9);\n box-sizing: border-box;\n overflow: clip;\n}\n\n.meter::-webkit-meter-optimum-value,\n.meter::-webkit-meter-suboptimum-value,\n.meter::-webkit-meter-even-less-good-value {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--meter-start-color),\n var(--meter-end-color)\n );\n}\n\n.meter::-webkit-meter-inner-element {\n display: inline-block;\n position: relative;\n}\n\n.meter::-moz-meter-bar {\n border-radius: var(--radius-s);\n border: var(--border-s) solid transparent;\n box-sizing: border-box;\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--meter-start-color),\n var(--meter-end-color)\n );\n}\n\n.meter::-webkit-meter-optimum-value {\n --meter-start-color: var(--color-green-6);\n --meter-end-color: var(--color-green-4);\n\n border-color: var(--color-green-5);\n}\n\n.meter:-moz-meter-optimum::-moz-meter-bar {\n --meter-start-color: var(--color-green-6);\n --meter-end-color: var(--color-green-4);\n\n border-color: var(--color-green-5);\n}\n\n.meter::-webkit-meter-suboptimum-value {\n --meter-start-color: var(--color-yellow-7);\n --meter-end-color: var(--color-yellow-5);\n\n border-color: var(--color-yellow-6);\n\n @media (prefers-color-scheme: dark) {\n --meter-start-color: var(--color-yellow-6);\n --meter-end-color: var(--color-yellow-4);\n\n border-color: var(--color-yellow-5);\n }\n}\n\n.meter:-moz-meter-sub-optimum::-moz-meter-bar {\n --meter-start-color: var(--color-yellow-7);\n --meter-end-color: var(--color-yellow-5);\n\n border-color: var(--color-yellow-6);\n\n @media (prefers-color-scheme: dark) {\n --meter-start-color: var(--color-yellow-6);\n --meter-end-color: var(--color-yellow-4);\n\n border-color: var(--color-yellow-5);\n }\n}\n\n.meter::-webkit-meter-even-less-good-value {\n --meter-start-color: var(--color-red-6);\n --meter-end-color: var(--color-red-4);\n\n border-color: var(--color-red-5);\n}\n\n.meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {\n --meter-start-color: var(--color-red-6);\n --meter-end-color: var(--color-red-4);\n\n border-color: var(--color-red-5);\n}\n",".key,\n:where(.style-semantic-elements kbd) {\n display: inline;\n padding: 0 0.5ch;\n margin: 0 0.25ch;\n font-size: 0.9em;\n border: var(--border-s) solid var(--color-gray-8);\n border-bottom-width: 3px;\n border-radius: var(--radius-m);\n font-weight: var(--font-weight-semibold);\n font-family: var(--font-family-body);\n background-color: var(--color-gray-9);\n color: var(--color-body-text);\n}\n",".skip-link {\n position: fixed;\n display: inline-block;\n z-index: 100;\n top: var(--space-body-y);\n left: var(--space-body-x);\n background-color: var(--color-brand-5);\n padding: var(--space-xs);\n border-radius: var(--radius-m);\n border: 0.25em solid var(--color-brand-4);\n color: white;\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n outline: 0;\n box-shadow:\n var(--shadow-l),\n 0 0 0 0.2em var(--color-brand-transparent);\n text-decoration: none;\n vertical-align: middle;\n opacity: 0.25;\n transition: opacity var(--duration-m) var(--ease-default);\n pointer-events: none;\n line-height: 1;\n\n &:is(:focus, .focus, .static) {\n opacity: 1;\n }\n\n &.static {\n position: static;\n pointer-events: unset;\n }\n}\n",".modal::backdrop,\n.drawer::backdrop {\n --dialog-backdrop-starting-opacity: 0;\n --dialog-backdrop-open-opacity: 0.75;\n --dialog-backdrop-ending-opacity: 0;\n --dialog-backdrop-color: light-dark(var(--color-gray-2), var(--color-gray-8));\n\n @media (prefers-color-scheme: dark) {\n --dialog-backdrop-open-opacity: 0.85;\n }\n\n background-color: var(--dialog-backdrop-color);\n}\n\n.modal,\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-starting-transform: translateY(8px);\n --dialog-open-opacity: 1;\n --dialog-open-transform: translate(0);\n --dialog-ending-opacity: 0;\n --dialog-ending-transform: scale(0.97);\n\n @media (prefers-reduced-motion) {\n --dialog-starting-transform: translate(0);\n --dialog-ending-transform: translate(0);\n }\n\n box-shadow: var(--shadow-xl);\n border: var(--border-s) solid var(--color-border);\n border-radius: var(--radius-l);\n background-color: var(--color-body-alt);\n color: var(--color-body-text);\n padding: 0;\n flex-direction: column;\n gap: 0;\n\n &[open] {\n display: flex;\n }\n}\n\n.modal-header,\n.drawer-header {\n --dialog-dismiss-btn-size: 1.8rem;\n\n font-family: var(--font-family-heading);\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n padding: var(--space-m);\n padding-block-end: var(--space-2xs);\n flex-shrink: 0;\n display: flex;\n align-items: center;\n justify-content: space-between;\n color: var(--color-brand-3);\n margin: 0;\n position: relative;\n\n h1,\n h2,\n h3,\n h4,\n h5,\n h6 {\n color: inherit;\n font-size: inherit;\n font-weight: inherit;\n margin: 0;\n }\n\n &:has(.button.dismiss) {\n padding-inline-end: calc(\n 2 * var(--space-xs) + var(--dialog-dismiss-btn-size)\n );\n }\n\n .button.dismiss {\n --button-fg-color: var(--color-gray-3);\n --button-bg-color: var(--color-gray-9);\n --button-hover-bg-color: var(--color-gray-9);\n\n font-size: 0.8rem;\n width: var(--dialog-dismiss-btn-size);\n height: var(--dialog-dismiss-btn-size);\n border-radius: var(--radius-full);\n position: absolute;\n inset-block-start: var(--space-xs);\n inset-inline-end: var(--space-xs);\n\n &:is(:hover, .hover) {\n box-shadow: 0 0 0 1px var(--color-gray-9);\n }\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-9);\n --button-hover-bg-color: var(--color-gray-9);\n --button-border-color: var(--color-brand-6);\n\n &:is(:hover, .hover) {\n box-shadow: 0 0 0 1px var(--color-brand-6);\n }\n }\n\n &::after {\n width: 1em;\n height: 1em;\n }\n }\n}\n\n.modal-body,\n.drawer-body {\n padding: var(--space-m);\n padding-block-start: var(--space-xs);\n flex-shrink: 1;\n display: block;\n overflow: auto;\n margin: 0;\n}\n\n@supports (transition-behavior: allow-discrete) and (overlay: none) {\n .modal,\n .drawer {\n animation: unset;\n }\n}\n\n/* Fade in/out (mixed browser support as of March 2025) */\n:is(.modal, .drawer)[open] {\n display: flex;\n transform: var(--dialog-open-transform);\n opacity: var(--dialog-open-opacity);\n}\n\n:is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-open-opacity);\n}\n\n:is(.modal, .drawer),\n:is(.modal, .drawer)::backdrop {\n transition-property: transform, opacity, display, overlay;\n transition-duration: var(--duration-l);\n transition-behavior: allow-discrete;\n}\n\n:is(.modal, .drawer) {\n transform: var(--dialog-ending-transform);\n opacity: var(--dialog-ending-opacity);\n transition-timing-function: var(--ease-out);\n}\n\n:is(.modal, .drawer)::backdrop {\n opacity: var(--dialog-backdrop-ending-opacity);\n transition-timing-function: var(--ease-default);\n}\n\n@starting-style {\n :is(.modal, .drawer)[open] {\n transform: var(--dialog-starting-transform);\n opacity: var(--dialog-starting-opacity);\n }\n\n :is(.modal, .drawer)[open]::backdrop {\n opacity: var(--dialog-backdrop-starting-opacity);\n }\n}\n\n/* End fade in/out styles */\n","/*\n * Note: Modal extends Base Dialog, meaning this file builds on top of the\n * styles defined in ./shared/base-dialog.css\n */\n\n.modal {\n max-height: calc(100svh - 4 * var(--space-body-y));\n max-width: calc(100svw - 4 * var(--space-body-x));\n margin: auto;\n\n &.small {\n width: 25rem;\n }\n\n &.medium {\n width: 40rem;\n }\n\n &.large {\n width: 55rem;\n }\n\n /*\n * Reset the color scheme rather than inheriting it from the parent element.\n *\n * Modals aren't rendered inside their parent, so it doesn't makes sense for\n * them to inherit their parent's color scheme. We still allow explicit\n * overrides using the standard light-mode and dark-mode classes.\n */\n &:not(.light-mode, .dark-mode) {\n color-scheme: light dark;\n }\n}\n\n.modal-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-2xs);\n justify-content: flex-start;\n background-color: var(--color-body);\n border-block-start: var(--border-s) solid var(--color-border);\n margin: 0;\n\n @media screen and (width < 30rem) {\n flex-direction: column;\n width: 100%;\n justify-content: stretch;\n }\n\n .button:not(.small, .medium, .large) {\n font-size: 0.9rem;\n }\n}\n","input[type=\"range\"].slider {\n --slider-shadow-resting: var(--shadow-s);\n --slider-shadow-focused:\n var(--shadow-s), 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n --slider-shadow-active: var(--shadow-s), 0 0 0 0.08em var(--color-brand-5);\n\n font-size: 1.2rem;\n block-size: 1.25em;\n appearance: none;\n background: transparent;\n cursor: pointer;\n\n @media (pointer: coarse) {\n font-size: 1.5rem;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:is(:focus-visible, .focus) {\n outline: 0;\n\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-focused);\n }\n }\n\n &:enabled:is(:active, .active) {\n &::-webkit-slider-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n\n &::-moz-range-thumb {\n border-color: var(--color-brand-5);\n box-shadow: var(--slider-shadow-active);\n transform: scale(1);\n\n @media screen and (resolution >= 2x) {\n transform: scale(0.9);\n }\n }\n }\n\n &::-webkit-slider-runnable-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n box-shadow: 0 0 1px var(--color-gray-7) inset;\n }\n\n &::-moz-range-track {\n block-size: 0.25em;\n inline-size: 100%;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-8);\n print-color-adjust: exact;\n box-shadow: 0 0 1px var(--color-gray-7) inset;\n }\n\n &::-webkit-slider-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-border);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n /* Additional properties needed for webkit */\n appearance: none;\n margin-block-start: -0.5em;\n }\n\n &::-moz-range-thumb {\n height: 1.25em;\n width: 1.25em;\n border-radius: var(--radius-full);\n background-color: white;\n box-shadow: var(--slider-shadow-resting);\n border: var(--border-s) solid var(--color-border);\n transition-property: border-color, box-shadow, transform;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n }\n\n /*\n * Below is code to add color to the portion of the slider before the thumb.\n *\n * While it looks great, it's only supported in Firefox (as of 2025), and I'd\n * rather not introduce this big of a difference between browsers. So it's\n * currently commented out and only here for reference.\n *\n * There is a proposal to standardize the pseudo-elements for range inputs,\n * which includes a \"slider-fill\" pseudo-element similar to Firefox's\n * \"moz-range-progress\". If it lands in browsers, we can revisit this.\n *\n * Reference: https://drafts.csswg.org/css-forms-1/#pseudo-elements\n */\n\n /* &::-moz-range-progress {\n background-size: 100vw;\n background-image: linear-gradient(\n to right,\n var(--color-brand-6),\n var(--color-brand-4)\n );\n border-radius: var(--radius-full);\n block-size: 0.25em;\n box-shadow: 0 0 1px var(--color-brand-4) inset;\n } */\n}\n",".accordion {\n width: 100%;\n\n details {\n width: 100%;\n background-color: var(--color-body-alt);\n padding-block: 0;\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n border: var(--border-s) solid var(--color-border);\n box-shadow: var(--shadow-s);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n\n @media (prefers-reduced-motion: no-preference) {\n transition: padding var(--duration-l) var(--ease-out);\n interpolate-size: allow-keywords;\n }\n\n & + details {\n border-block-start: 0;\n }\n\n &:not(:first-of-type) {\n border-start-start-radius: 0;\n border-start-end-radius: 0;\n }\n\n &:not(:last-of-type) {\n border-end-start-radius: 0;\n border-end-end-radius: 0;\n }\n\n &::details-content {\n opacity: 0;\n block-size: 0;\n overflow-y: clip;\n transition-property: content-visibility, opacity, block-size;\n transition-duration: var(--duration-l);\n transition-timing-function: var(--ease-out);\n transition-behavior: allow-discrete;\n }\n\n &[open] {\n padding-block-end: var(--space-xs);\n\n &::details-content {\n opacity: 1;\n block-size: auto;\n }\n\n summary {\n border-block-end-color: var(--color-border);\n margin-block-end: var(--space-xs);\n\n &::before {\n rotate: 0deg;\n }\n\n &:not(:active, .active, :hover, .hover) {\n color: var(--color-brand-3);\n }\n }\n }\n }\n\n summary {\n font-family: var(--font-family-heading);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n cursor: pointer;\n border-block-end: var(--border-s) dashed transparent;\n padding: var(--space-xs);\n padding-inline-start: calc(var(--space-xs) + 1em);\n margin-block: 0;\n margin-inline: calc(-1 * var(--space-xs));\n transition-duration: var(--duration-s);\n transition-property: color, border-color;\n transition-timing-function: var(--ease-default);\n position: relative;\n list-style: none; /* Hides ::marker pseudo element in favor of ::before (better cross browser consistency) */\n color: var(--color-body-text);\n user-select: none;\n\n @media (prefers-reduced-motion: no-preference) {\n transition-property: color, border-color, padding, margin;\n }\n\n &:is(:hover, .hover) {\n color: light-dark(var(--color-brand-4), var(--color-brand-2));\n }\n\n &:is(:active, .active) {\n color: light-dark(var(--color-brand-2), var(--color-brand-4));\n }\n\n /* Hides ::-webkit-details-marker pseudo element in favor of ::before (better cross browser consistency) */\n &::-webkit-details-marker {\n display: none;\n }\n\n /* Replacement marker element */\n &::before {\n content: \"\";\n background-color: var(--color-body-text-alt);\n mask-image: url(\"@/src/icons/dropdown.svg\");\n mask-position: center;\n mask-size: contain;\n mask-repeat: no-repeat;\n display: inline-block;\n position: absolute;\n inset-block: 0;\n inset-inline-start: 0.5em;\n margin: auto;\n width: 0.75em;\n height: 0.75em;\n rotate: -90deg;\n transition: rotate var(--duration-l) var(--ease-spring);\n }\n\n &:dir(rtl)::before {\n rotate: 90deg;\n }\n\n @media (prefers-reduced-motion) {\n transition-property: color, border-color;\n\n &::before {\n transition: none;\n }\n }\n }\n\n &.subtle {\n details {\n box-shadow: none;\n border: 0;\n background-color: transparent;\n padding-inline-start: calc(var(--space-xs) + 1em);\n\n &[open] summary {\n margin-block-end: var(--space-3xs);\n }\n }\n\n summary {\n border-block-end: 0;\n padding-block: var(--space-2xs);\n margin-inline-start: calc(-1 * (var(--space-xs) + 1em));\n }\n }\n}\n",".alert,\n.banner {\n display: block;\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n position: relative;\n line-height: 1.2;\n\n > * {\n line-height: inherit;\n }\n}\n\n.alert-title,\n.banner-title {\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-bold);\n line-height: 1;\n font-size: 0.85em;\n margin: 0;\n\n & + * {\n margin-block-start: 0;\n }\n}\n\n.alert,\n.banner-content {\n &::before,\n &::after {\n content: \"\";\n position: absolute;\n inset-block: 0;\n inset-inline-start: var(--message-icon-margin);\n margin-block: auto;\n width: var(--message-icon-size);\n height: var(--message-icon-size);\n }\n\n &::before {\n border-radius: var(--radius-full);\n background-color: var(--message-icon-background);\n border: var(--border-m) solid var(--message-icon-color);\n }\n\n &::after {\n mask-image: var(--message-icon);\n mask-repeat: no-repeat;\n mask-size: auto 55%;\n mask-position: center;\n background-color: var(--message-icon-color);\n }\n\n @media print {\n &::before {\n background-color: transparent;\n }\n\n &::after {\n print-color-adjust: exact;\n }\n }\n}\n",".paragraph,\n:where(.style-semantic-elements p) {\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n line-height: 1.6;\n margin: 0.75em 0;\n text-wrap: pretty;\n hanging-punctuation: first;\n overflow-wrap: break-word;\n\n &:first-child {\n margin-block-start: 0;\n }\n\n &:last-child {\n margin-block-end: 0;\n }\n}\n\n/*\n * Remove the top margin from paragraphs immediately after a heading, since we\n * want to use the (slightly smaller) bottom margin of the heading instead.\n *\n * This ensures that headings are visibly closer to their content than the\n * content above them, using spacing intentionally to denote hierarchy.\n */\n:is(.heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .heading-6)\n + .paragraph,\n:where(.style-semantic-elements :is(h1, h2, h3, h4, h5, h6) + p) {\n margin-block-start: 0;\n}\n","@keyframes spinner-spin {\n from {\n transform: rotate(0deg);\n }\n\n to {\n transform: rotate(360deg);\n }\n}\n\n.spinner {\n --spinner-primary-color: var(--color-brand-5);\n --spinner-secondary-color: var(--color-brand-3);\n\n font-size: var(--font-size-m);\n position: relative;\n text-align: center;\n display: flex;\n flex-direction: column;\n justify-content: flex-start;\n align-items: center;\n gap: var(--space-2xs);\n\n &.small {\n font-size: var(--font-size-xs);\n }\n\n &.large {\n font-size: var(--font-size-xl);\n }\n\n &.label-top {\n flex-direction: column-reverse;\n\n &::after {\n inset: auto 0 0;\n }\n }\n\n &.label-right {\n flex-direction: row;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 auto 0 0;\n }\n }\n\n &.label-left {\n flex-direction: row-reverse;\n gap: var(--space-xs);\n\n &::after {\n inset: 0 0 0 auto;\n }\n }\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n height: 3em;\n width: 3em;\n mask-image: url(\"@/src/icons/spinner.svg\");\n mask-size: cover;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--spinner-primary-color);\n animation: spinner-spin 0.85s linear infinite;\n }\n\n &::after {\n position: absolute;\n inset: 0 0 auto;\n margin: auto;\n background-color: var(--spinner-secondary-color);\n animation-duration: 1.05s;\n }\n}\n","/*\n * Note: Alert extends Base Message, meaning this file builds on top of the\n * styles defined in ./shared/base-message.css\n */\n\n.alert {\n --message-icon-size: 1.7em;\n --message-icon-margin: 0.25em;\n --message-icon-background: var(--color-body-alt);\n\n font-size: var(--font-size-m);\n color: var(--color-body-text);\n border: var(--border-m) solid transparent;\n border-radius: var(--radius-s);\n border-start-start-radius: calc(var(--space-2xs) + 2em);\n border-end-start-radius: calc(var(--space-2xs) + 2em);\n padding: var(--space-2xs);\n padding-inline-start: 2.5em;\n background:\n linear-gradient(var(--alert-bg-color), var(--alert-bg-color)) padding-box,\n linear-gradient(\n to right,\n var(--alert-border-start-color),\n var(--alert-border-end-color)\n )\n border-box;\n\n @media print {\n border-color: var(--alert-border-start-color);\n }\n\n &.error {\n --alert-bg-color: var(--color-red-9);\n --alert-title-color: var(--color-red-3);\n --alert-border-start-color: var(--color-red-5);\n --alert-border-end-color: var(--color-red-6);\n --message-icon: url(\"@/src/icons/x.svg\");\n --message-icon-color: var(--color-red-5);\n }\n\n &.warning {\n --alert-bg-color: var(--color-yellow-9);\n --alert-title-color: var(--color-yellow-3);\n --alert-border-start-color: var(--color-yellow-5);\n --alert-border-end-color: var(--color-yellow-6);\n --message-icon: url(\"@/src/icons/warning.svg\");\n --message-icon-color: var(--color-yellow-5);\n }\n\n &.success {\n --alert-bg-color: var(--color-green-9);\n --alert-title-color: var(--color-green-3);\n --alert-border-start-color: var(--color-green-5);\n --alert-border-end-color: var(--color-green-6);\n --message-icon: url(\"@/src/icons/check.svg\");\n --message-icon-color: var(--color-green-5);\n }\n\n &.info {\n --alert-bg-color: var(--color-teal-9);\n --alert-title-color: var(--color-teal-3);\n --alert-border-start-color: var(--color-teal-5);\n --alert-border-end-color: var(--color-teal-6);\n --message-icon: url(\"@/src/icons/info.svg\");\n --message-icon-color: var(--color-teal-5);\n }\n}\n\n.alert-title {\n color: var(--alert-title-color);\n margin-block-end: 0.2em;\n}\n",".button.dismiss {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n font-size: 0.75rem;\n width: 3em;\n height: 3em;\n border-radius: var(--radius-m);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.3em;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n --button-hover-bg-color: transparent;\n }\n\n /* Don't use pseudo element for hover style */\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n\n &::after {\n content: \"\";\n width: 1.25em;\n height: 1.25em;\n mask-image: url(\"@/src/icons/x-thin.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n background-color: currentcolor;\n }\n}\n","table.table,\n:where(.style-semantic-elements table) {\n --table-bg-odd: var(--color-body-alt);\n --table-bg-even: var(--color-body);\n --table-vertical-border: var(--border-s);\n\n background-color: var(--color-body-alt);\n border-collapse: separate;\n border-spacing: 0;\n font-size: var(--font-size-m);\n border: var(--border-s) solid var(--color-border);\n border-radius: var(--radius-s);\n color: var(--color-body-text);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n\n &.subtle {\n --table-bg-odd: transparent;\n --table-bg-even: transparent;\n --table-vertical-border: 0;\n\n background-color: transparent;\n color: inherit;\n border: 0;\n }\n\n &.dense :is(th, td) {\n padding: var(--space-3xs) var(--space-2xs);\n }\n\n &.sparse :is(th, td) {\n padding: var(--space-xs) var(--space-s);\n }\n\n caption {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-semibold);\n text-align: start;\n margin: 0 0 var(--space-2xs);\n }\n\n th,\n td {\n padding: var(--space-2xs) var(--space-xs);\n }\n\n th,\n tfoot td {\n font-weight: var(--font-weight-bold);\n font-family: var(--font-family-heading);\n text-align: center;\n }\n\n th {\n border-block-end: var(--border-m) solid var(--color-border);\n }\n\n tfoot td {\n border-block-start: var(--border-m) solid var(--color-border);\n }\n\n td {\n text-align: unset;\n }\n\n :is(th, tfoot td):not(:last-of-type) {\n border-inline-end: var(--table-vertical-border) dashed var(--color-border);\n }\n\n td:not(tfoot td, :last-of-type) {\n border-inline-end: var(--table-vertical-border) solid var(--color-border);\n }\n\n tr:not(:last-of-type) td {\n border-block-end: var(--border-s) solid var(--color-border);\n }\n\n tbody tr:nth-child(odd),\n tbody:has(tr:last-of-type:nth-child(even)) + tfoot tr {\n background-color: var(--table-bg-even);\n }\n\n tbody tr:nth-child(even) {\n background-color: var(--table-bg-odd);\n }\n}\n","/* Style the label of a labeled switch, which is also the container that holds the switch itself */\nlabel.switch {\n inline-size: 100%;\n display: flex;\n align-items: center;\n justify-content: space-between;\n cursor: pointer;\n font-weight: var(--font-weight-semibold);\n gap: var(--space-3xs);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n}\n\n/* For small labeled switches, set the label text size to font-size-s */\nlabel.switch.small {\n font-size: var(--font-size-s);\n}\n\n/* Style the switch itself */\ninput[type=\"checkbox\"].switch,\nlabel.switch input[type=\"checkbox\"] {\n font-size: 1rem;\n print-color-adjust: exact;\n appearance: none;\n block-size: 1.8em;\n inline-size: 3em;\n border-radius: var(--radius-full);\n background-color: var(--color-gray-7);\n position: relative;\n flex: none;\n transition-property: background-color, box-shadow, border-color;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n border: 0.1em solid var(--color-gray-6);\n cursor: pointer;\n\n &::after {\n content: \"\";\n position: absolute;\n height: 1.4em;\n width: 1.4em;\n background-color: white;\n inset-inline-start: 0.1em;\n inset-block-start: 0.1em;\n border-radius: var(--radius-full);\n box-shadow: var(--shadow-s);\n transition-property: border-color, transform;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-both);\n transform: translateX(0);\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked {\n background-color: var(--color-brand-6);\n border-color: var(--color-brand-5);\n\n &::after {\n transform: translateX(1.2em);\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-5),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n }\n\n &:dir(rtl):checked::after {\n transform: translateX(-1.2em);\n }\n}\n\n/* For small switches, scale the switch control to 80% of the normal size */\ninput[type=\"checkbox\"].switch.small,\nlabel.switch.small input[type=\"checkbox\"] {\n font-size: 0.8rem;\n}\n",".app {\n /* The app is designed to take up the entire width of the page. However, we\n * set a global limit on the overall width of its content for UX and aesthetic\n * reasons. The wrapper elements of the page will always extend to the edge of\n * the screen, but all content within them will be kept within this limit and\n * centered.\n */\n --app-max-content-width: 110rem;\n --app-header-height: clamp(50px, 3.8rem, 100px);\n --app-sidebar-width: clamp(300px, 18rem, 450px);\n\n position: relative;\n width: 100%;\n min-height: 100svh;\n display: flex;\n flex-direction: column;\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n}\n\n.app-header {\n height: var(--app-header-height);\n width: 100%;\n color: var(--color-brand-3);\n background-color: var(--color-body-alt);\n border-bottom: var(--border-l) solid var(--color-brand-transparent);\n box-shadow: var(--shadow-s);\n flex: none;\n position: sticky;\n left: 0;\n transition-property: background-color, border-bottom-color, box-shadow;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n &.transparent {\n background-color: transparent;\n background-image: linear-gradient(\n to bottom,\n rgb(from var(--color-body-alt) r g b / 67%),\n transparent\n );\n background-repeat: no-repeat;\n border-bottom-color: transparent;\n box-shadow: none;\n }\n}\n\n.app-header-content {\n height: 100%;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n padding-inline: calc(var(--space-body-x) - var(--space-xs));\n padding-block: 6px;\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-s);\n}\n\n.app-header-section {\n margin: 0;\n height: 100%;\n display: flex;\n align-items: center;\n\n /* If header only has 1 section, center it */\n &:only-child {\n margin-inline: auto;\n }\n\n /* Otherwise, align the first to the left and the rest to the right */\n &:first-child {\n margin-inline-end: auto;\n }\n\n /* Put a spacer between consecutive right-aligned sections (3rd onward) */\n &:nth-child(n + 3)::before {\n content: \"\";\n background-color: var(--color-border);\n height: 2rem;\n width: var(--border-s);\n position: relative;\n right: calc(var(--space-s) / 2);\n }\n}\n\n.app-header-item {\n height: 100%;\n cursor: pointer;\n text-decoration: none;\n color: inherit;\n transition-property: color, background-color;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n display: flex;\n align-items: center;\n position: relative;\n font-size: 1rem;\n font-weight: var(--font-weight-semibold);\n padding-inline: var(--space-xs);\n border-radius: var(--radius-m);\n\n &:is(:hover, .hover) {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:is(:active, .active) {\n background-color: var(--color-brand-transparent);\n }\n\n &:is(:focus-visible, .focus) {\n background-color: var(--color-brand-extra-transparent);\n outline-offset: calc(-1 * var(--border-m));\n }\n\n &[aria-current]:not([aria-current=\"false\"]) {\n font-weight: var(--font-weight-bold);\n\n &::after {\n opacity: 1;\n }\n }\n\n &::after {\n content: \"\";\n position: absolute;\n width: 100%;\n height: var(--border-l);\n bottom: calc(-1 * (var(--border-l) + 6px));\n left: 0;\n background-color: currentcolor;\n opacity: 0;\n border-radius: 1px;\n }\n}\n\n.app-icon {\n background-color: var(--color-brand-3);\n height: 2rem;\n width: 2rem;\n border: var(--border-m) solid transparent;\n border-radius: var(--radius-full);\n}\n\n.app-title-separator {\n content: \"\";\n background-color: var(--color-brand-transparent);\n width: var(--border-m);\n height: 1.5rem;\n rotate: 22deg;\n margin-inline: var(--space-2xs);\n position: relative;\n left: 1px;\n}\n\n.app-title {\n font-family: var(--font-family-heading);\n font-size: 1.2rem;\n display: flex;\n align-items: center;\n}\n\n.app-body {\n position: relative;\n width: 100%;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n flex: none;\n display: flex;\n flex-direction: row;\n}\n\n.app-sidebar {\n transition-property: opacity, display;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n transition-behavior: allow-discrete;\n width: var(--app-sidebar-width);\n flex: none;\n opacity: 1;\n border-inline-end: var(--border-s) dashed var(--color-border);\n}\n\n.app-sidebar-content {\n position: sticky;\n top: 0;\n overflow: auto;\n height: 100dvh;\n scrollbar-width: thin;\n}\n\n.app-sidebar-section {\n &:first-of-type {\n margin-block-start: var(--space-body-y);\n }\n\n &:not(:last-of-type) {\n margin-block-end: var(--space-xs);\n }\n\n &:last-of-type {\n margin-block-end: var(--space-body-y);\n }\n}\n\n.app-sidebar-heading {\n font-size: 1.2rem;\n margin: 0 var(--space-body-x) var(--space-3xs);\n font-family: var(--font-family-heading);\n font-weight: var(--font-weight-semibold);\n}\n\n.app-sidebar-item {\n display: block;\n margin: 0 var(--space-2xs);\n padding: var(--space-2xs) calc(var(--space-body-x) - var(--space-2xs));\n border-radius: var(--radius-l);\n color: var(--color-body-text-alt);\n text-decoration: none;\n font-weight: var(--font-weight-normal);\n font-size: 1rem;\n user-select: none;\n transition-property: color, background-color, box-shadow;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n\n &:is(:hover, .hover) {\n background-color: var(--color-brand-extra-transparent);\n }\n\n &:is(:active, .active) {\n color: var(--color-brand-1);\n }\n\n &[aria-current]:not([aria-current=\"false\"]) {\n color: var(--color-brand-4);\n font-weight: var(--font-weight-bold);\n }\n\n &:is(:hover, .hover):is(:active, .active) {\n background-color: var(--color-brand-transparent);\n }\n\n &:is(:focus-visible, .focus) {\n outline-offset: 0;\n background-color: var(--color-brand-extra-transparent);\n }\n}\n\n.app-sidebar-toggle {\n width: 2.75rem;\n\n &.focus,\n &:has(input:focus-visible) {\n background-color: var(--color-brand-extra-transparent);\n outline: var(--border-m) solid var(--color-brand-5);\n outline-offset: calc(-1 * var(--border-m));\n }\n\n /* Style the 3 lines inside the button */\n > div {\n transition-property: transform, opacity;\n transition-duration: var(--duration-l);\n transition-timing-function: var(--ease-out);\n position: absolute;\n width: 1.75rem;\n height: 2px;\n border-radius: 2px;\n background-color: currentcolor;\n opacity: 1;\n top: 50%;\n left: 50%;\n\n &:nth-of-type(1) {\n transform: translateY(calc(-50% - 0.45rem)) translateX(-50%);\n }\n\n &:nth-of-type(2) {\n transform: translateY(-50%) translateX(-50%);\n }\n\n &:nth-of-type(3) {\n transform: translateY(calc(-50% + 0.45rem)) translateX(-50%);\n }\n }\n\n /* When the sidebar is visible, turn the 3 lines into an X */\n &:has(input:checked) > div {\n &:nth-of-type(1) {\n transform: translateY(-50%) translateX(-50%) rotate(45deg);\n }\n\n &:nth-of-type(2) {\n opacity: 0;\n transform: translateY(-50%) translateX(-50%) rotate3d(0, 1, 0, 90deg);\n }\n\n &:nth-of-type(3) {\n transform: translateY(-50%) translateX(-50%) rotate(-45deg);\n }\n }\n}\n\n.app-content {\n width: 100%;\n padding: var(--space-body-y) var(--space-body-x);\n position: relative;\n}\n\n/* If there's a sidebar, shrink the content area to accommodate it */\n.app-sidebar ~ .app-content {\n width: calc(100% - var(--app-sidebar-width));\n}\n\n@media (width < 55rem) {\n /* \n * If there's a sidebar, DON'T factor its width into the content width since\n * the sidebar now has `position: fixed`. This only applies to pages with a\n * sidebar; without one, app-content's width is already 100%.\n */\n .app-sidebar ~ .app-content {\n width: 100%;\n }\n\n .app-sidebar {\n position: fixed;\n top: var(--app-header-height);\n left: 0;\n width: 100vw;\n opacity: 1;\n background-color: var(--internal-glass-bg-color);\n backdrop-filter: var(--internal-glass-filter);\n border-right: 0;\n z-index: 9;\n\n &::after {\n content: initial;\n }\n }\n\n .app-sidebar-content {\n height: calc(100dvh - var(--app-header-height));\n }\n\n .app:not(:has(.app-sidebar-toggle input:checked)) .app-sidebar {\n opacity: 0;\n display: none;\n }\n\n /* If sidebar is open, temporarily hide the overflow and any site-wide banners */\n .app:has(.app-sidebar-toggle input:checked) {\n overflow: hidden;\n\n > .banner {\n display: none;\n }\n\n .app-header {\n position: fixed;\n top: 0;\n z-index: 10;\n background-color: var(--color-body-alt);\n border-bottom-color: var(--color-brand-transparent);\n box-shadow: var(--shadow-s);\n }\n\n .app-content {\n top: var(--app-header-height);\n }\n }\n}\n\n.app:has(dialog:modal) {\n /* \n * If modal is open, hide the overflow. This prevents the user from scrolling\n * the page down by dragging on the header, which they'd have no way to undo.\n */\n overflow: hidden;\n}\n\n@starting-style {\n .app > .sidebar {\n opacity: 0;\n }\n}\n\n[data-jrg-scroll-gutter=\"true\"] {\n overflow-y: hidden;\n scrollbar-gutter: stable;\n}\n","fieldset.fieldset,\nfieldset.field {\n border: 0;\n margin: 0;\n min-width: 0;\n padding: 0.01em 0 0;\n box-sizing: border-box;\n\n legend {\n display: table;\n padding: 0;\n box-sizing: border-box;\n }\n}\n\nbody:not(:-moz-handler-blocked) {\n fieldset.fieldset,\n fieldset.field {\n display: table-cell;\n }\n}\n",".bold,\n:where(.style-semantic-elements strong, .style-semantic-elements b) {\n font-weight: var(--font-weight-bold);\n}\n\n.italic,\n:where(.style-semantic-elements em) {\n font-style: italic;\n}\n\n.underline {\n text-decoration-line: underline;\n}\n\n.strikethrough,\n:where(.style-semantic-elements s) {\n text-decoration-line: line-through;\n}\n\n.underline.strikethrough {\n text-decoration-line: underline line-through;\n}\n\n.subscript,\n.superscript,\n:where(.style-semantic-elements sub, .style-semantic-elements sup) {\n font-size: 0.75em;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\n.subscript,\n:where(.style-semantic-elements sub) {\n inset-block-end: -0.25em;\n}\n\n.superscript,\n:where(.style-semantic-elements sup) {\n inset-block-start: -0.5em;\n}\n\n.code,\n:where(.style-semantic-elements code) {\n font-family: var(--font-family-mono);\n background-color: var(--color-gray-extra-transparent);\n color: var(--color-gray-1);\n border-radius: var(--radius-s);\n display: inline;\n padding: 0.25ch 0.5ch;\n font-size: 0.9em;\n\n &.invert {\n color: var(--color-gray-9);\n }\n}\n\n.link .code,\n:where(.style-semantic-elements a code) {\n text-decoration: inherit;\n text-decoration-color: inherit;\n text-decoration-thickness: inherit;\n color: inherit;\n}\n","/*\n * Note: Checkbox extends Base Check, meaning this file builds on top of the\n * styles defined in ./shared/base-check.css\n */\n\n.checkbox input {\n border-radius: 0.3em;\n\n &::before,\n &::after {\n content: \"\";\n display: block;\n position: absolute;\n opacity: 0;\n transition-duration: var(--duration-l);\n transition-timing-function: var(--ease-spring);\n }\n\n /* Used for indeterminate icon */\n &::before {\n width: 0.5em;\n height: 0;\n border-bottom: 0.125em solid white;\n bottom: 0.4em;\n left: calc(0.25em - var(--border-s));\n transition-property: opacity;\n }\n\n /* Used for checkmark */\n &::after {\n width: 0.3em;\n height: 0.6em;\n border-right: 0.125em solid white;\n border-bottom: 0.125em solid white;\n bottom: 0.2em;\n left: 0.28em;\n transform: rotate(40deg) scale(0.1);\n transition-property: transform;\n transition-delay: 25ms;\n }\n\n /* When checked, show checkmark */\n &:checked::after {\n opacity: 1;\n transform: rotate(40deg) scale(1);\n }\n\n /* When indeterminate, show indeterminate icon */\n &:indeterminate::before {\n opacity: 1;\n transform: scale(1);\n }\n\n /* When disabled and not filled, make background gray */\n &:disabled:not(:checked, :indeterminate) {\n background-color: var(--color-gray-9);\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-gray-6);\n box-shadow:\n 0 0 0 0.08em var(--color-gray-6),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-gray-transparent);\n outline: 0;\n }\n\n &:checked,\n &:indeterminate {\n background-color: var(--color-brand-5);\n border-color: var(--color-brand-4);\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n 0 0 0 0.08em var(--color-brand-4),\n 0 0 0 calc(0.16em + var(--border-s)) var(--color-brand-transparent);\n }\n }\n}\n","/*\n * Note: Banner extends Base Message, meaning this file builds on top of the\n * styles defined in ./shared/base-message.css\n */\n\n.banner {\n --message-icon-size: 1.6em;\n --message-icon-margin: 0.8em;\n --message-icon-background: var(--color-body-alt);\n\n font-size: 1rem;\n color: var(--color-body-text-invert);\n border-block: var(--border-m) solid var(--banner-secondary-color);\n width: 100%;\n background-color: var(--banner-bg-color);\n\n &.error {\n --banner-bg-color: var(--color-red-4);\n --banner-secondary-color: var(--color-red-5);\n --message-icon: url(\"@/src/icons/x.svg\");\n --message-icon-color: var(--color-red-5);\n }\n\n &.warning {\n --banner-bg-color: var(--color-yellow-4);\n --banner-secondary-color: var(--color-yellow-5);\n --message-icon: url(\"@/src/icons/warning.svg\");\n --message-icon-color: var(--color-yellow-5);\n }\n\n &.success {\n --banner-bg-color: var(--color-green-4);\n --banner-secondary-color: var(--color-green-5);\n --message-icon: url(\"@/src/icons/check.svg\");\n --message-icon-color: var(--color-green-5);\n }\n\n &.info {\n --banner-bg-color: var(--color-teal-4);\n --banner-secondary-color: var(--color-teal-5);\n --message-icon: url(\"@/src/icons/info.svg\");\n --message-icon-color: var(--color-teal-5);\n }\n\n &.neutral {\n --banner-bg-color: var(--color-brand-4);\n --banner-secondary-color: var(--color-brand-5);\n\n .banner-content {\n padding-inline-start: var(--space-body-x);\n }\n\n .banner-content::before,\n .banner-content::after {\n content: unset;\n }\n }\n\n .link {\n color: var(--color-body-text-invert);\n text-decoration-color: rgb(from var(--color-body-text-invert) r g b / 40%);\n }\n\n &:has(.button.dismiss) .banner-content {\n padding-inline-end: calc(var(--space-body-x) + 2em);\n }\n\n & + & {\n border-block-start-width: 0;\n }\n\n .button.dismiss {\n --button-fg-color: currentcolor;\n --button-hover-bg-color: var(--banner-secondary-color);\n\n position: absolute;\n inset-block: 0;\n inset-inline-end: calc(var(--space-body-x) * 0.5);\n margin: auto;\n font-size: 0.67em;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--banner-secondary-color);\n --button-border-color: currentcolor;\n }\n }\n}\n\n.banner-content {\n position: relative;\n max-width: var(--app-max-content-width);\n margin-inline: auto;\n padding: var(--space-2xs) var(--space-body-x);\n padding-inline-start: 3.2em;\n}\n\n.banner-title {\n margin-block-end: var(--space-3xs);\n}\n","/*\n * External and Download icons\n *\n * Links that open in a new tab or download a file will (by default) have icons\n * added to the end. You can disable this behavior on an element by adding the\n * `no-external-icon` and/or `no-download-icon` classes, or you can manually add\n * the icons by adding the `has-external-icon` or `has-download-icon` classes.\n *\n * This behavior and these classes apply to the following components:\n * - Link\n * - Button\n * - App Sidebar Item\n */\n:is(.link, .button, .app-sidebar-item, .style-semantic-elements a) {\n &::after {\n print-color-adjust: exact;\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--color-gray-5);\n display: inline-block;\n vertical-align: baseline;\n margin-inline: 0.25em;\n position: relative;\n transition: background-color var(--duration-s) var(--ease-default);\n }\n\n &:is(:hover, .hover)::after {\n background-color: var(--color-gray-4);\n }\n\n &.button::after {\n background-color: currentcolor !important;\n margin-inline: initial;\n }\n\n /* External icon */\n &[target=\"_blank\"]:not(.no-external-icon),\n &.has-external-icon {\n &::after {\n content: \"\";\n mask-image: url(\"@/src/icons/external.svg\");\n height: 0.9em;\n width: 0.9em;\n inset-block-start: 0.06em;\n }\n\n &.button::after {\n inset-block-start: -0.03em;\n }\n }\n\n /* Download icon */\n &[download]:not(.no-download-icon),\n &.has-download-icon {\n &::after {\n content: \"\";\n mask-image: url(\"@/src/icons/download.svg\");\n height: 1em;\n width: 1em;\n inset-block-start: 0.07em;\n }\n\n &.button::after {\n inset-block-start: -0.05em;\n }\n }\n}\n",".card {\n --card-bg-color: var(--color-body-alt);\n --card-fg-color: var(--color-body-text);\n --card-title-color: var(--color-brand-3);\n --card-title-underline-color: var(--color-brand-transparent);\n --card-title-active-color: var(--color-brand-2);\n --card-border-color: var(--color-border);\n\n background-color: var(--card-bg-color);\n border-radius: var(--radius-l);\n border: var(--border-s) solid var(--card-border-color);\n box-shadow: var(--shadow-m);\n padding: var(--space-m);\n font-family: var(--font-family-body);\n font-size: var(--font-size-m);\n font-weight: var(--font-weight-normal);\n color: var(--card-fg-color);\n\n &.secondary {\n --card-bg-color: var(--color-body);\n\n border-radius: var(--radius-m);\n box-shadow: var(--shadow-s);\n padding: var(--space-s);\n }\n\n &.transparent {\n --card-bg-color: var(--internal-glass-bg-color);\n --card-border-color: var(--internal-glass-border-color);\n --card-fg-color: var(--internal-glass-fg-color);\n --card-title-color: var(--card-fg-color);\n --card-title-underline-color: light-dark(#0006, #fff6);\n --card-title-active-color: light-dark(#444, #ddd);\n\n backdrop-filter: var(--internal-glass-filter);\n }\n}\n\n.card-title {\n font-family: var(--font-family-heading);\n line-height: 1.15;\n text-wrap: balance;\n overflow-wrap: break-word;\n font-size: var(--font-size-l);\n font-weight: var(--font-weight-bold);\n color: var(--card-title-color);\n margin-block: 0 var(--space-xs);\n display: block;\n}\n\n/* This overrides styles in the Link component that also apply */\n.card-title a {\n font-size: inherit;\n font-family: inherit;\n font-weight: inherit;\n color: inherit;\n text-decoration-color: var(--card-title-underline-color);\n\n &:is(:active, .active) {\n color: var(--card-title-active-color);\n }\n}\n\n.card.secondary .card-title {\n font-size: var(--font-size-m);\n margin-block-end: var(--space-2xs);\n}\n",".chip {\n --chip-fg-color: white;\n --chip-bg-color: var(--color-brand-5);\n --chip-border-color: var(--color-brand-4);\n --chip-delete-hover-color: var(--color-brand-3);\n --chip-delete-active-color: var(--color-brand-2);\n --chip-focus-color: var(--color-brand-transparent);\n --chip-padding-x: var(--space-xs);\n --chip-padding-y: var(--space-3xs);\n\n display: inline-flex;\n position: relative;\n align-items: center;\n border-radius: var(--radius-full);\n font-size: var(--font-size-s);\n font-family: var(--font-family-body);\n font-weight: var(--font-weight-normal);\n padding: var(--chip-padding-y) var(--chip-padding-x);\n background-color: var(--chip-bg-color);\n border: var(--border-s) solid var(--chip-border-color);\n color: var(--chip-fg-color);\n flex-shrink: 0;\n cursor: default;\n transition-property: box-shadow, background-color, border-color, transform;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n appearance: none;\n line-height: 1.2;\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-brand-6);\n --chip-delete-active-color: var(--color-brand-7);\n }\n\n &.clickable {\n cursor: pointer;\n box-shadow: var(--shadow-s);\n transform: scale(1);\n\n &:is(:focus-visible, .focus),\n &:has(.chip-label:focus-visible) {\n outline: 0;\n box-shadow:\n var(--shadow-s),\n 0 0 0 0.1em var(--chip-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--chip-focus-color);\n\n .chip-delete {\n opacity: 0.5;\n }\n }\n\n /* Change the background on hover, but only if the cursor is not over the delete button */\n &.hover,\n &:hover:not(:has(.chip-delete:hover)) {\n background-color: var(--chip-border-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.96);\n\n /*\n * On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n */\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n }\n\n &.red {\n --chip-bg-color: var(--color-red-5);\n --chip-border-color: var(--color-red-4);\n --chip-focus-color: var(--color-red-transparent);\n --chip-delete-hover-color: var(--color-red-3);\n --chip-delete-active-color: var(--color-red-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-red-6);\n --chip-delete-active-color: var(--color-red-7);\n }\n }\n\n &.orange {\n --chip-bg-color: var(--color-orange-5);\n --chip-border-color: var(--color-orange-4);\n --chip-focus-color: var(--color-orange-transparent);\n --chip-delete-hover-color: var(--color-orange-3);\n --chip-delete-active-color: var(--color-orange-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-orange-6);\n --chip-delete-active-color: var(--color-orange-7);\n }\n }\n\n &.yellow {\n --chip-bg-color: var(--color-yellow-5);\n --chip-border-color: var(--color-yellow-4);\n --chip-focus-color: var(--color-yellow-transparent);\n --chip-delete-hover-color: var(--color-yellow-3);\n --chip-delete-active-color: var(--color-yellow-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-yellow-6);\n --chip-delete-active-color: var(--color-yellow-7);\n }\n }\n\n &.green {\n --chip-bg-color: var(--color-green-5);\n --chip-border-color: var(--color-green-4);\n --chip-focus-color: var(--color-green-transparent);\n --chip-delete-hover-color: var(--color-green-3);\n --chip-delete-active-color: var(--color-green-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-green-6);\n --chip-delete-active-color: var(--color-green-7);\n }\n }\n\n &.teal {\n --chip-bg-color: var(--color-teal-5);\n --chip-border-color: var(--color-teal-4);\n --chip-focus-color: var(--color-teal-transparent);\n --chip-delete-hover-color: var(--color-teal-3);\n --chip-delete-active-color: var(--color-teal-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-teal-6);\n --chip-delete-active-color: var(--color-teal-7);\n }\n }\n\n &.blue {\n --chip-bg-color: var(--color-blue-5);\n --chip-border-color: var(--color-blue-4);\n --chip-focus-color: var(--color-blue-transparent);\n --chip-delete-hover-color: var(--color-blue-3);\n --chip-delete-active-color: var(--color-blue-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-blue-6);\n --chip-delete-active-color: var(--color-blue-7);\n }\n }\n\n &.purple {\n --chip-bg-color: var(--color-purple-5);\n --chip-border-color: var(--color-purple-4);\n --chip-focus-color: var(--color-purple-transparent);\n --chip-delete-hover-color: var(--color-purple-3);\n --chip-delete-active-color: var(--color-purple-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-purple-6);\n --chip-delete-active-color: var(--color-purple-7);\n }\n }\n\n &.magenta {\n --chip-bg-color: var(--color-magenta-5);\n --chip-border-color: var(--color-magenta-4);\n --chip-focus-color: var(--color-magenta-transparent);\n --chip-delete-hover-color: var(--color-magenta-3);\n --chip-delete-active-color: var(--color-magenta-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-magenta-6);\n --chip-delete-active-color: var(--color-magenta-7);\n }\n }\n\n &.gray {\n --chip-bg-color: var(--color-gray-5);\n --chip-border-color: var(--color-gray-4);\n --chip-focus-color: var(--color-gray-transparent);\n --chip-delete-hover-color: var(--color-gray-3);\n --chip-delete-active-color: var(--color-gray-2);\n\n @media (prefers-color-scheme: dark) {\n --chip-delete-hover-color: var(--color-gray-6);\n --chip-delete-active-color: var(--color-gray-7);\n }\n }\n\n &.subtle {\n --chip-fg-color: var(--color-brand-2);\n --chip-bg-color: var(--color-brand-9);\n --chip-border-color: var(--color-brand-8);\n --chip-delete-hover-color: var(--color-brand-7);\n --chip-delete-active-color: var(--color-brand-6);\n\n &.red {\n --chip-fg-color: var(--color-red-2);\n --chip-bg-color: var(--color-red-9);\n --chip-border-color: var(--color-red-8);\n --chip-delete-hover-color: var(--color-red-7);\n --chip-delete-active-color: var(--color-red-6);\n }\n\n &.orange {\n --chip-fg-color: var(--color-orange-2);\n --chip-bg-color: var(--color-orange-9);\n --chip-border-color: var(--color-orange-8);\n --chip-delete-hover-color: var(--color-orange-7);\n --chip-delete-active-color: var(--color-orange-6);\n }\n\n &.yellow {\n --chip-fg-color: var(--color-yellow-2);\n --chip-bg-color: var(--color-yellow-9);\n --chip-border-color: var(--color-yellow-8);\n --chip-delete-hover-color: var(--color-yellow-7);\n --chip-delete-active-color: var(--color-yellow-6);\n }\n\n &.green {\n --chip-fg-color: var(--color-green-2);\n --chip-bg-color: var(--color-green-9);\n --chip-border-color: var(--color-green-8);\n --chip-delete-hover-color: var(--color-green-7);\n --chip-delete-active-color: var(--color-green-6);\n }\n\n &.teal {\n --chip-fg-color: var(--color-teal-2);\n --chip-bg-color: var(--color-teal-9);\n --chip-border-color: var(--color-teal-8);\n --chip-delete-hover-color: var(--color-teal-7);\n --chip-delete-active-color: var(--color-teal-6);\n }\n\n &.blue {\n --chip-fg-color: var(--color-blue-2);\n --chip-bg-color: var(--color-blue-9);\n --chip-border-color: var(--color-blue-8);\n --chip-delete-hover-color: var(--color-blue-7);\n --chip-delete-active-color: var(--color-blue-6);\n }\n\n &.purple {\n --chip-fg-color: var(--color-purple-2);\n --chip-bg-color: var(--color-purple-9);\n --chip-border-color: var(--color-purple-8);\n --chip-delete-hover-color: var(--color-purple-7);\n --chip-delete-active-color: var(--color-purple-6);\n }\n\n &.magenta {\n --chip-fg-color: var(--color-magenta-2);\n --chip-bg-color: var(--color-magenta-9);\n --chip-border-color: var(--color-magenta-8);\n --chip-delete-hover-color: var(--color-magenta-7);\n --chip-delete-active-color: var(--color-magenta-6);\n }\n\n &.gray {\n --chip-fg-color: var(--color-gray-2);\n --chip-bg-color: var(--color-gray-9);\n --chip-border-color: var(--color-gray-8);\n --chip-delete-hover-color: var(--color-gray-7);\n --chip-delete-active-color: var(--color-gray-6);\n }\n }\n\n &.black {\n --chip-bg-color: black;\n --chip-border-color: #46484c;\n --chip-focus-color: var(--color-gray-transparent);\n --chip-delete-hover-color: #616368;\n --chip-delete-active-color: #4c4e53;\n }\n\n &.white {\n --chip-fg-color: black;\n --chip-bg-color: white;\n --chip-border-color: #d8dbe0;\n --chip-focus-color: var(--color-gray-transparent);\n --chip-delete-hover-color: #c3c6cb;\n --chip-delete-active-color: #afb1b6;\n }\n}\n\n.chip:has(.chip-label) {\n padding: 0;\n}\n\n.chip-label {\n all: unset;\n display: inherit;\n line-height: inherit;\n user-select: inherit;\n cursor: inherit;\n padding: var(--chip-padding-y) var(--chip-padding-x);\n border-radius: var(--radius-full);\n}\n\n.chip-label:has(+ .chip-delete) {\n padding-inline-end: calc(1.2em + 2 * var(--space-3xs));\n}\n\n.chip-delete {\n outline: 1px solid var(--chip-bg-color);\n margin-inline: var(--space-3xs)\n calc(-1 * var(--chip-padding-x) + var(--space-3xs));\n font-size: 0.6em;\n border: 0;\n border-radius: var(--radius-full);\n transition-property: background-color, outline-color, filter;\n transition-duration: var(--duration-s);\n transition-timing-function: var(--ease-default);\n position: relative;\n overflow: hidden;\n cursor: pointer;\n height: 2em;\n width: 2em;\n user-select: none;\n background-color: var(--chip-border-color);\n padding: 0;\n display: inline-flex;\n box-shadow: none;\n\n &::after {\n content: \"\";\n width: 1em;\n height: 1em;\n mask-image: url(\"@/src/icons/x-thin.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: var(--chip-fg-color);\n margin: auto;\n }\n\n &:is(:focus-visible, .focus) {\n outline-color: var(--chip-fg-color);\n }\n\n &:is(:hover, .hover) {\n background-color: var(--chip-delete-hover-color);\n }\n\n &:is(:active, .active) {\n background-color: var(--chip-delete-active-color);\n }\n}\n\n.chip-label + .chip-delete {\n position: absolute;\n inset: 0 var(--space-3xs) 0 auto;\n margin: auto 0;\n}\n",".button {\n --button-fg-color: var(--color-body-text);\n --button-bg-color: light-dark(var(--color-gray-9), #191b1e);\n --button-border-color: light-dark(var(--color-gray-8), var(--color-border));\n --button-font-weight: var(--font-weight-normal);\n --button-focus-ring-color: var(--color-gray-extra-transparent);\n --button-shadow: var(--shadow-s);\n --button-hover-bg-color: var(--button-border-color);\n\n box-sizing: border-box;\n display: inline-flex;\n outline: 0;\n padding-inline: 1.25em;\n padding-block: 0.5em;\n gap: 0.625em;\n border-style: solid;\n transform: scale(1);\n transition-property:\n box-shadow, background-color, border-color, transform, opacity;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n text-decoration: none;\n position: relative;\n align-items: center;\n justify-content: center;\n overflow: hidden;\n cursor: pointer;\n border-width: var(--border-s);\n border-radius: var(--radius-m);\n min-height: 2.6em;\n min-width: 3em;\n line-height: 1.2;\n font-family: var(--font-family-body);\n box-shadow: var(--button-shadow);\n user-select: none;\n font-size: 1rem;\n color: var(--button-fg-color);\n background-color: var(--button-bg-color);\n border-color: var(--button-border-color);\n font-weight: var(--button-font-weight);\n text-align: center;\n text-wrap: balance;\n\n &::before {\n content: \"\";\n background-color: var(--button-hover-bg-color);\n position: absolute;\n inset: 0;\n margin: auto;\n transition-property: opacity, width, height, border-radius;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n z-index: -1;\n border-radius: 2em;\n width: 4em;\n height: 4em;\n opacity: 0;\n }\n\n &:is(:focus-visible, .focus) {\n box-shadow:\n var(--button-shadow),\n 0 0 0 0.1em var(--button-border-color),\n 0 0 0 calc(0.2em + var(--border-s)) var(--button-focus-ring-color);\n }\n\n &:is(:active, .active) {\n transform: scale(0.98);\n\n /*\n * On low-resolution screens, the scale effect makes text jump\n * around awkwardly, so we use an alternative.\n */\n @media screen and (resolution < 2x) {\n transform: translateY(1px);\n }\n }\n\n &:is(:hover, .hover) {\n text-decoration: none;\n\n &::before {\n opacity: 1;\n width: 100%;\n height: 100%;\n border-radius: 5px;\n }\n\n /* inputs don't support children, so the ::before pseudo element won't work */\n &:is(input) {\n background-color: var(--button-hover-bg-color);\n }\n }\n\n &.brand {\n --button-fg-color: var(--color-brand-1);\n --button-bg-color: var(--color-brand-9);\n --button-border-color: var(--color-brand-8);\n --button-focus-ring-color: var(--color-brand-extra-transparent);\n }\n\n &.red {\n --button-fg-color: var(--color-red-1);\n --button-bg-color: var(--color-red-9);\n --button-border-color: var(--color-red-8);\n --button-focus-ring-color: var(--color-red-extra-transparent);\n }\n\n &.orange {\n --button-fg-color: var(--color-orange-1);\n --button-bg-color: var(--color-orange-9);\n --button-border-color: var(--color-orange-8);\n --button-focus-ring-color: var(--color-orange-extra-transparent);\n }\n\n &.yellow {\n --button-fg-color: var(--color-yellow-1);\n --button-bg-color: var(--color-yellow-9);\n --button-border-color: var(--color-yellow-8);\n --button-focus-ring-color: var(--color-yellow-extra-transparent);\n }\n\n &.green {\n --button-fg-color: var(--color-green-1);\n --button-bg-color: var(--color-green-9);\n --button-border-color: var(--color-green-8);\n --button-focus-ring-color: var(--color-green-extra-transparent);\n }\n\n &.teal {\n --button-fg-color: var(--color-teal-1);\n --button-bg-color: var(--color-teal-9);\n --button-border-color: var(--color-teal-8);\n --button-focus-ring-color: var(--color-teal-extra-transparent);\n }\n\n &.blue {\n --button-fg-color: var(--color-blue-1);\n --button-bg-color: var(--color-blue-9);\n --button-border-color: var(--color-blue-8);\n --button-focus-ring-color: var(--color-blue-extra-transparent);\n }\n\n &.purple {\n --button-fg-color: var(--color-purple-1);\n --button-bg-color: var(--color-purple-9);\n --button-border-color: var(--color-purple-8);\n --button-focus-ring-color: var(--color-purple-extra-transparent);\n }\n\n &.magenta {\n --button-fg-color: var(--color-magenta-1);\n --button-bg-color: var(--color-magenta-9);\n --button-border-color: var(--color-magenta-8);\n --button-focus-ring-color: var(--color-magenta-extra-transparent);\n }\n\n &.black {\n --button-fg-color: white;\n --button-bg-color: black;\n --button-border-color: #3d3d3d;\n }\n\n &.white {\n --button-fg-color: black;\n --button-bg-color: white;\n --button-border-color: #d0d0d0;\n }\n\n &.primary {\n --button-fg-color: white;\n --button-bg-color: var(--color-brand-5);\n --button-border-color: var(--color-brand-4);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: var(--color-brand-transparent);\n\n &.red {\n --button-bg-color: var(--color-red-5);\n --button-border-color: var(--color-red-4);\n --button-focus-ring-color: var(--color-red-transparent);\n }\n\n &.orange {\n --button-bg-color: var(--color-orange-5);\n --button-border-color: var(--color-orange-4);\n --button-focus-ring-color: var(--color-orange-transparent);\n }\n\n &.yellow {\n --button-bg-color: var(--color-yellow-5);\n --button-border-color: var(--color-yellow-4);\n --button-focus-ring-color: var(--color-yellow-transparent);\n }\n\n &.green {\n --button-bg-color: var(--color-green-5);\n --button-border-color: var(--color-green-4);\n --button-focus-ring-color: var(--color-green-transparent);\n }\n\n &.teal {\n --button-bg-color: var(--color-teal-5);\n --button-border-color: var(--color-teal-4);\n --button-focus-ring-color: var(--color-teal-transparent);\n }\n\n &.blue {\n --button-bg-color: var(--color-blue-5);\n --button-border-color: var(--color-blue-4);\n --button-focus-ring-color: var(--color-blue-transparent);\n }\n\n &.purple {\n --button-bg-color: var(--color-purple-5);\n --button-border-color: var(--color-purple-4);\n --button-focus-ring-color: var(--color-purple-transparent);\n }\n\n &.magenta {\n --button-bg-color: var(--color-magenta-5);\n --button-border-color: var(--color-magenta-4);\n --button-focus-ring-color: var(--color-magenta-transparent);\n }\n\n &.gray {\n --button-bg-color: var(--color-gray-5);\n --button-border-color: var(--color-gray-4);\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.black {\n --button-bg-color: black;\n --button-border-color: #3d3d3d;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n\n &.white {\n --button-fg-color: black;\n --button-bg-color: white;\n --button-border-color: #d0d0d0;\n --button-focus-ring-color: var(--color-gray-transparent);\n }\n }\n\n &.tertiary {\n --button-fg-color: var(--color-brand-4);\n --button-bg-color: transparent;\n --button-border-color: transparent;\n --button-hover-bg-color: var(--color-brand-extra-transparent);\n --button-font-weight: var(--font-weight-bold);\n --button-focus-ring-color: transparent;\n --button-shadow: none;\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-brand-transparent);\n --button-hover-bg-color: transparent;\n }\n\n &.red {\n --button-fg-color: var(--color-red-4);\n --button-hover-bg-color: var(--color-red-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-red-transparent);\n }\n }\n\n &.orange {\n --button-fg-color: var(--color-orange-4);\n --button-hover-bg-color: var(--color-orange-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-orange-transparent);\n }\n }\n\n &.yellow {\n --button-fg-color: var(--color-yellow-4);\n --button-hover-bg-color: var(--color-yellow-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-yellow-transparent);\n }\n }\n\n &.green {\n --button-fg-color: var(--color-green-4);\n --button-hover-bg-color: var(--color-green-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-green-transparent);\n }\n }\n\n &.teal {\n --button-fg-color: var(--color-teal-4);\n --button-hover-bg-color: var(--color-teal-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-teal-transparent);\n }\n }\n\n &.blue {\n --button-fg-color: var(--color-blue-4);\n --button-hover-bg-color: var(--color-blue-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-blue-transparent);\n }\n }\n\n &.purple {\n --button-fg-color: var(--color-purple-4);\n --button-hover-bg-color: var(--color-purple-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-purple-transparent);\n }\n }\n\n &.magenta {\n --button-fg-color: var(--color-magenta-4);\n --button-hover-bg-color: var(--color-magenta-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-magenta-transparent);\n }\n }\n\n &.gray,\n &.black,\n &.white {\n --button-hover-bg-color: var(--color-gray-extra-transparent);\n\n &:is(:focus-visible, .focus) {\n --button-bg-color: var(--color-gray-transparent);\n }\n }\n\n &.gray {\n --button-fg-color: var(--color-gray-4);\n }\n\n &.black {\n --button-fg-color: black;\n }\n\n &.white {\n --button-fg-color: white;\n }\n }\n\n &.small {\n font-size: 0.8rem;\n }\n\n &.large {\n font-size: 1.2rem;\n }\n\n &.icon {\n border-radius: var(--radius-full);\n min-width: 0;\n min-height: 0;\n aspect-ratio: 1;\n padding: 0.5em;\n\n /* Tertiary icon buttons use normal pseudo element hover effect */\n &.tertiary {\n &::before {\n width: 75%;\n height: 75%;\n }\n\n &:is(:hover, .hover)::before {\n width: 100%;\n height: 100%;\n border-radius: 100%;\n }\n }\n\n /* Normal icon buttons just change background color */\n &:not(.tertiary) {\n &::before {\n content: unset;\n }\n\n &:is(:hover, .hover) {\n background-color: var(--button-hover-bg-color);\n }\n }\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n transform: scale(1);\n\n &:is(:hover, .hover)::before {\n opacity: 0;\n }\n }\n\n &.loading {\n cursor: progress;\n\n &::before {\n opacity: 1 !important;\n height: 100% !important;\n border-radius: inherit !important;\n animation: button-loading-bg 1200ms var(--ease-both-subtle) infinite\n forwards;\n }\n\n &:is(:disabled, .disabled, [aria-disabled=\"true\"]) {\n cursor: wait;\n }\n }\n}\n\n@keyframes button-loading-bg {\n 0% {\n width: 0;\n margin: 0 auto 0 0;\n }\n\n 50% {\n width: 100%;\n }\n\n 100% {\n width: 0;\n margin: 0 0 0 auto;\n }\n}\n","/* stylelint-disable declaration-block-no-redundant-longhand-properties -- text-decoration shorthand doesn't work properly for Safari */\n\n.abbreviation,\n:where(.style-semantic-elements abbr[title]) {\n display: inline;\n text-decoration-line: underline;\n text-decoration-style: dotted;\n text-decoration-thickness: var(--border-m);\n text-decoration-color: var(--color-gray-6);\n text-underline-offset: 0.1em;\n}\n",".divider,\n:where(.style-semantic-elements hr, .style-semantic-elements br) {\n --divider-thickness: var(--border-s);\n\n display: block;\n border-style: solid;\n border-color: var(--color-border);\n border-width: 0;\n border-top-width: var(--divider-thickness);\n margin: var(--space-xs) 0;\n outline: 0;\n width: 100%;\n height: 0;\n print-color-adjust: exact;\n position: relative;\n\n &.vertical {\n display: inline-block;\n border-top-width: 0;\n border-left-width: var(--divider-thickness);\n margin: auto var(--space-xs);\n width: 0;\n height: 100%;\n min-height: 1em;\n }\n}\n\n.divider.invisible,\n:where(.style-semantic-elements br) {\n visibility: hidden;\n}\n\n.divider.thick {\n --divider-thickness: var(--border-m);\n}\n\n.divider.thicker {\n --divider-thickness: var(--border-l);\n}\n\n.divider.dashed {\n border-style: dashed;\n}\n\n.divider.dotted {\n border-style: dotted;\n}\n","/*\n * Note: Drawer extends Base Dialog, meaning this file builds on top of the\n * styles defined in ./shared/base-dialog.css\n */\n\n.drawer {\n --dialog-starting-opacity: 1;\n --dialog-ending-opacity: 1;\n\n position: fixed;\n inset: 0;\n border-radius: 0;\n margin: 0;\n border: 0;\n overflow: auto;\n transition-duration: var(--duration-xl) !important;\n\n &.left {\n right: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(-100%);\n --dialog-ending-transform: translateX(-100%);\n }\n }\n\n &.top {\n bottom: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(-100%);\n --dialog-ending-transform: translateY(-100%);\n }\n }\n\n &.right {\n left: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateX(100%);\n --dialog-ending-transform: translateX(100%);\n }\n }\n\n &.bottom {\n top: auto;\n\n @media (prefers-reduced-motion: no-preference) {\n --dialog-starting-transform: translateY(100%);\n --dialog-ending-transform: translateY(100%);\n }\n }\n\n &.top,\n &.bottom {\n width: 100dvw;\n max-width: unset;\n height: auto;\n max-height: 100dvh;\n min-height: min(100dvh, 16rem);\n\n &.small {\n height: 18rem;\n }\n\n &.medium {\n height: 28rem;\n }\n\n &.large {\n height: 38rem;\n }\n }\n\n &.left,\n &.right {\n height: 100dvh;\n max-height: unset;\n width: auto;\n min-width: min(100dvw, 18rem);\n max-width: 100dvw;\n\n &.small {\n width: 22rem;\n }\n\n &.medium {\n width: 32rem;\n }\n\n &.large {\n width: 42rem;\n }\n }\n\n /*\n * Reset the color scheme rather than inheriting it from the parent element.\n *\n * Drawers aren't rendered inside their parent, so it doesn't makes sense for\n * them to inherit their parent's color scheme. We still allow explicit\n * overrides using the standard light-mode and dark-mode classes.\n */\n &:not(.light-mode, .dark-mode) {\n color-scheme: light dark;\n }\n}\n\n.drawer-body {\n height: 100%;\n}\n\n.drawer-footer {\n padding: var(--space-xs);\n flex-shrink: 0;\n display: flex;\n gap: var(--space-xs);\n justify-content: flex-start;\n margin: 0;\n margin-block-start: auto;\n\n > * {\n width: 100%;\n }\n}\n",".field {\n --field-gap: var(--space-2xs);\n --field-padding: 0.5em;\n --field-radius: var(--radius-m);\n\n display: inline-flex;\n flex-direction: column;\n line-height: 1;\n gap: var(--field-gap);\n color: var(--color-body-text);\n font-weight: var(--font-weight-semibold);\n transition-property: color, box-shadow;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n font-size: var(--font-size-m);\n font-family: var(--font-family-body);\n\n /* If using a fieldset element for the Field, fix spacing for the label */\n &:is(fieldset) legend {\n margin-block-end: var(--field-gap);\n }\n\n &.compact,\n .fieldset.compact & {\n --field-gap: calc(0.9 * var(--space-2xs));\n --field-padding: 0.33em;\n --field-radius: var(--radius-s);\n\n font-size: calc(0.9 * var(--font-size-m));\n }\n\n &:is(:focus-within, .focus) {\n color: var(--color-brand-5);\n }\n\n &:has(:user-invalid, [aria-invalid=\"true\"]) {\n color: var(--color-red-5);\n\n .error-message {\n display: flex;\n }\n }\n\n &:has([readonly]):is(:focus-within, .focus) {\n color: var(--color-gray-5);\n }\n\n input:not(\n [type=\"button\"],\n [type=\"checkbox\"],\n [type=\"file\"],\n [type=\"hidden\"],\n [type=\"image\"],\n [type=\"radio\"],\n [type=\"range\"],\n [type=\"reset\"],\n [type=\"submit\"]\n ),\n select,\n textarea {\n color: var(--color-body-text);\n background-color: light-dark(white, black);\n border: var(--border-s) solid var(--color-border);\n font-size: 1em;\n padding: var(--field-padding);\n border-radius: var(--field-radius);\n transition-property: color, box-shadow, border-color;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n font-family: inherit;\n line-height: 1.25;\n\n &:is(:focus, .focus) {\n outline: 0;\n border-color: var(--color-brand-5);\n box-shadow:\n 0 0 0 0.1em var(--color-brand-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-brand-transparent);\n }\n\n &:focus-visible {\n outline: 0;\n }\n\n &:disabled {\n opacity: var(--opacity-disabled);\n cursor: not-allowed;\n }\n\n /* Not using :read-only because it matches additional elements (e.g., every color input) */\n &[readonly] {\n border-style: dashed;\n\n &:is(:focus, .focus) {\n outline: 0;\n border-style: solid;\n border-color: var(--color-gray-5);\n box-shadow:\n 0 0 0 0.1em var(--color-gray-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-gray-transparent);\n }\n }\n\n &:user-invalid,\n &[aria-invalid=\"true\"] {\n border-color: var(--color-red-5);\n box-shadow: 0 0 0 0.1em var(--color-red-5);\n\n &:is(:focus, .focus) {\n outline: 0;\n border-color: var(--color-red-5);\n box-shadow:\n 0 0 0 0.1em var(--color-red-5),\n 0 0 0 calc(0.2em + var(--border-s)) var(--color-red-transparent);\n }\n }\n }\n\n input[type=\"color\"] {\n inline-size: auto;\n block-size: auto;\n cursor: pointer;\n\n &::-webkit-color-swatch-wrapper {\n padding: 0;\n }\n\n &::-webkit-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n\n &::-moz-color-swatch {\n border: 0;\n block-size: 1.25em;\n inline-size: 100%;\n border-radius: var(--radius-s);\n }\n }\n\n /* Prevent child checkbox/radio from changing color with Field label */\n .checkbox,\n .radio {\n color: var(--color-body-text);\n }\n\n /*\n * Fix issue on mobile safari where box shadow, border, and height styles\n * aren't applied to some input types.\n */\n input:is(\n [type=\"date\"],\n [type=\"datetime-local\"],\n [type=\"month\"],\n [type=\"time\"],\n [type=\"week\"]\n ) {\n appearance: none;\n min-height: calc(1.5em + 2 * var(--field-padding));\n }\n\n select,\n input[list] {\n background-image: url(\"@/src/icons/dropdown-thin.svg\");\n background-position: center right var(--space-2xs);\n background-size: 1.15em auto;\n background-repeat: no-repeat;\n appearance: none;\n padding-inline-end: calc(2 * var(--space-2xs) + 1.15em);\n\n &:dir(rtl) {\n background-position: center left var(--space-2xs);\n }\n\n @media (prefers-color-scheme: dark) {\n background-image: url(\"@/src/icons/dropdown-thin-invert.svg\");\n }\n }\n\n /*\n * On mobile safari, the user agent adds its own dropdown icon to inputs with\n * a list attribute. We want to replace this icon with our custom one to match\n * the style of <select> elements.\n *\n * While we could remove the browser's icon (leaving the background image to\n * display our custom icon, like how we do for <select>), this has the side\n * effect of preventing the user from opening the list of options. Making the\n * icon invisible also doesn't work, since the target area ends up being out\n * of alignment with the visible icon, and moving the target area can be \n * error-prone.\n *\n * To work around this, we remove the field's background image on mobile\n * safari and keep the native pseudo-element, but replace its icon.\n */\n @supports (-webkit-touch-callout: none) {\n input[list] {\n padding-inline-end: var(--field-padding);\n background-image: none;\n\n &::-webkit-list-button {\n appearance: none;\n width: calc(1.15em + var(--field-padding));\n height: 1.5em;\n background-image: url(\"@/src/icons/dropdown-thin.svg\");\n background-position: right var(--field-padding) center;\n background-size: 1.15em auto;\n background-repeat: no-repeat;\n }\n\n @media (prefers-color-scheme: dark) {\n &::-webkit-list-button {\n background-image: url(\"@/src/icons/dropdown-thin-invert.svg\");\n }\n }\n }\n }\n\n /* A similar issue to above happens on desktop chrome */\n @supports (selector(input[list]::-webkit-calendar-picker-indicator)) {\n input[list] {\n padding-inline-end: 0;\n background-image: none;\n\n &::-webkit-calendar-picker-indicator {\n appearance: none;\n display: block !important;\n list-style: none !important;\n cursor: pointer;\n width: 1.15em;\n height: 1.5em;\n flex: none;\n opacity: 1;\n padding: var(--field-padding);\n background-image: url(\"@/src/icons/dropdown-thin.svg\");\n background-position: center;\n background-repeat: no-repeat;\n background-size: 1.15em auto;\n }\n\n @media (prefers-color-scheme: dark) {\n &::-webkit-calendar-picker-indicator {\n background-image: url(\"@/src/icons/dropdown-thin-invert.svg\");\n }\n }\n }\n }\n\n select {\n cursor: pointer;\n }\n\n .help-text {\n font-size: 0.9em;\n color: var(--color-body-text-alt);\n font-weight: var(--font-weight-normal);\n margin: -0.25em 0 0;\n position: relative;\n }\n\n .error-message {\n display: none;\n font-size: 0.9em;\n border: 0;\n padding: 0;\n margin: 0;\n font-weight: var(--font-weight-semibold);\n align-items: center;\n gap: 2px;\n\n &::before {\n content: \"\";\n mask-image: url(\"@/src/icons/x-circle.svg\");\n mask-size: contain;\n mask-repeat: no-repeat;\n mask-position: center;\n background-color: currentcolor;\n display: inline-block;\n height: 1.2em;\n width: 1.2em;\n margin-inline-end: 0.2em;\n }\n }\n\n .input-group {\n display: flex;\n flex-direction: row;\n align-items: stretch;\n\n > * {\n border-radius: 0 !important;\n z-index: 1;\n }\n\n > :is(:user-invalid, [aria-invalid=\"true\"]) {\n z-index: 2;\n }\n\n > :first-child {\n border-start-start-radius: var(--field-radius) !important;\n border-end-start-radius: var(--field-radius) !important;\n }\n\n > :last-child {\n border-end-end-radius: var(--field-radius) !important;\n border-start-end-radius: var(--field-radius) !important;\n }\n\n > :is(:focus-visible, .focus) {\n z-index: 3;\n }\n\n > :is(.prefix, .suffix, .action) {\n user-select: none;\n -webkit-user-drag: none;\n display: flex;\n font-weight: var(--font-weight-normal);\n color: var(--color-gray-3);\n background-color: var(--color-gray-9);\n border: var(--border-s) solid var(--color-border);\n padding: var(--field-padding) calc(2 * var(--field-padding));\n align-items: center;\n justify-content: center;\n font-size: 0.9em;\n\n :is(img, svg) {\n height: 1.15em;\n width: auto;\n }\n }\n\n > .prefix {\n border-inline-end: 0;\n }\n\n > .suffix {\n border-inline-start: 0;\n }\n\n > .action {\n cursor: pointer;\n color: var(--color-brand-3);\n border-inline-start: 0;\n transition-property: box-shadow, background-color;\n transition-duration: var(--duration-m);\n transition-timing-function: var(--ease-default);\n\n &:is(:hover, .hover) {\n background-color: var(--color-gray-8);\n }\n\n &:is(:active, .active) {\n background-color: var(--color-gray-7);\n }\n\n &:is(:focus-visible, .focus) {\n border-color: var(--color-brand-5);\n border-inline-start-width: var(--border-s);\n border-inline-start-style: solid;\n box-shadow:\n 0 0 0 0.11em var(--color-brand-5),\n 0 0 0 calc(0.22em + var(--border-s)) var(--color-brand-transparent);\n outline: 0;\n }\n }\n\n > :is(input, select, textarea) {\n width: 100%;\n\n &:has(~ .action:is(:focus-visible, .focus)) {\n border-inline-end-width: 0;\n }\n }\n }\n\n .required-indicator {\n display: inline;\n position: relative;\n inset-block-end: 0.15em;\n inset-inline-start: 0.15em;\n color: var(--color-red-5);\n font-size: 0.9em;\n font-weight: var(--font-weight-semibold);\n }\n}\n"],"names":[]}