@pnx-mixtape/mxds 0.1.0-rc.0 → 0.1.0-rc.2

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 (204) hide show
  1. package/.storybook/decorators.ts +15 -0
  2. package/.storybook/preview.ts +4 -1
  3. package/.storybook/themes/campus-vibrant.css +181 -0
  4. package/.storybook/themes/civic-formal.css +246 -0
  5. package/.storybook/{theme-demo.css → themes/demo.css} +14 -7
  6. package/.storybook/themes/health-services.css +255 -0
  7. package/.storybook/themes/research-faculty.css +169 -0
  8. package/dist/build/accordion.css +1 -1
  9. package/dist/build/base.css +1 -1
  10. package/dist/build/button.css +1 -1
  11. package/dist/build/chunks/DropMenu-1baQc8Yc.js +1 -0
  12. package/dist/build/chunks/InPageNavigation-CVieEl9u.js +1 -0
  13. package/dist/build/chunks/Popover-Cxg-s5Jn.js +1 -0
  14. package/dist/build/chunks/Sticky-cWUVSOXN.js +1 -0
  15. package/dist/build/chunks/{Tabs-Dm8g301e.js → Tabs-DA_Ez8pv.js} +2 -2
  16. package/dist/build/chunks/polyfills-C7pRt54M.js +1 -0
  17. package/dist/build/constants.css +1 -1
  18. package/dist/build/drop-menu.css +1 -1
  19. package/dist/build/drop-menu.entry.js +1 -1
  20. package/dist/build/elements.js +1 -1
  21. package/dist/build/form.css +1 -1
  22. package/dist/build/grid.css +1 -1
  23. package/dist/build/header.css +1 -1
  24. package/dist/build/icon.css +1 -1
  25. package/dist/build/in-page-alert.css +1 -1
  26. package/dist/build/in-page-navigation.entry.js +1 -1
  27. package/dist/build/navigation.css +1 -1
  28. package/dist/build/pagination.css +1 -1
  29. package/dist/build/popover.entry.js +1 -1
  30. package/dist/build/print.css +1 -1
  31. package/dist/build/progress-indicator.css +1 -0
  32. package/dist/build/react.js +1 -1
  33. package/dist/build/side-navigation.css +1 -1
  34. package/dist/build/sidebar.css +1 -1
  35. package/dist/build/steps.css +1 -1
  36. package/dist/build/sticky.entry.js +1 -1
  37. package/dist/build/tabs.entry.js +1 -1
  38. package/dist/build/tag.css +1 -1
  39. package/dist/build/utilities.css +1 -1
  40. package/dist/types/Atom/DefinitionList/DefinitionList.d.ts +3 -2
  41. package/dist/types/Atom/DefinitionList/DefinitionList.d.ts.map +1 -1
  42. package/dist/types/Atom/Heading/Heading.d.ts.map +1 -1
  43. package/dist/types/Atom/List/List.d.ts +10 -0
  44. package/dist/types/Atom/List/List.d.ts.map +1 -0
  45. package/dist/types/Component/DropMenu/Elements/DropMenu.d.ts.map +1 -1
  46. package/dist/types/Component/InPageNavigation/Elements/InPageNavigation.d.ts +2 -2
  47. package/dist/types/Component/InPageNavigation/Elements/InPageNavigation.d.ts.map +1 -1
  48. package/dist/types/Component/InPageNavigation/Hooks/useInPageNavigation.d.ts.map +1 -1
  49. package/dist/types/Component/ProgressIndicator/ProgressIndicator.d.ts +9 -0
  50. package/dist/types/Component/ProgressIndicator/ProgressIndicator.d.ts.map +1 -0
  51. package/dist/types/Component/Tabs/Elements/Tabs.d.ts.map +1 -1
  52. package/dist/types/Component/Tag/Tag.d.ts +4 -2
  53. package/dist/types/Component/Tag/Tag.d.ts.map +1 -1
  54. package/dist/types/Form/Autocomplete/Autocomplete.d.ts.map +1 -1
  55. package/dist/types/Form/Checkbox/FormCheckbox.d.ts.map +1 -1
  56. package/dist/types/Form/CheckboxCard/CheckboxCard.d.ts +23 -0
  57. package/dist/types/Form/CheckboxCard/CheckboxCard.d.ts.map +1 -0
  58. package/dist/types/Form/Radio/FormRadio.d.ts.map +1 -1
  59. package/dist/types/Form/RadioCard/RadioCard.d.ts +16 -0
  60. package/dist/types/Form/RadioCard/RadioCard.d.ts.map +1 -0
  61. package/dist/types/Form/Select/FormSelect.d.ts.map +1 -1
  62. package/dist/types/Form/TextInput/FormText.d.ts.map +1 -1
  63. package/dist/types/Form/Textarea/FormTextarea.d.ts.map +1 -1
  64. package/dist/types/enums.d.ts +15 -0
  65. package/dist/types/enums.d.ts.map +1 -1
  66. package/dist/types/react.d.ts +4 -0
  67. package/dist/types/react.d.ts.map +1 -1
  68. package/package.json +7 -8
  69. package/src/Atom/Background/_background.css +2 -2
  70. package/src/Atom/Blockquote/_blockquote.css +9 -2
  71. package/src/Atom/Button/README.md +1 -0
  72. package/src/Atom/Button/_buttons-styles.css +6 -6
  73. package/src/Atom/Button/_buttons.css +6 -3
  74. package/src/Atom/DefinitionList/DefinitionList.stories.ts +39 -2
  75. package/src/Atom/DefinitionList/DefinitionList.stories.tsx +36 -0
  76. package/src/Atom/DefinitionList/DefinitionList.tsx +4 -1
  77. package/src/Atom/DefinitionList/DefinitionListItem.stories.ts +1 -1
  78. package/src/Atom/DefinitionList/README.md +43 -0
  79. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.ts.snap +37 -3
  80. package/src/Atom/DefinitionList/__snapshots__/DefinitionList.stories.tsx.snap +2 -0
  81. package/src/Atom/DefinitionList/__snapshots__/DefinitionListItem.stories.ts.snap +3 -3
  82. package/src/Atom/DefinitionList/definition-list-item.twig +1 -0
  83. package/src/Atom/DefinitionList/definition-list.twig +6 -1
  84. package/src/Atom/Heading/Heading.tsx +6 -0
  85. package/src/Atom/Heading/_headings.css +2 -1
  86. package/src/Atom/Icon/_extended-set.css +30 -30
  87. package/src/Atom/Icon/_icon.css +37 -36
  88. package/src/Atom/Image/README.md +2 -2
  89. package/src/Atom/Image/_image.css +12 -6
  90. package/src/Atom/List/List.stories.ts +102 -0
  91. package/src/Atom/List/List.stories.tsx +103 -0
  92. package/src/Atom/List/List.tsx +22 -0
  93. package/src/Atom/List/README.md +150 -0
  94. package/src/Atom/List/__snapshots__/List.stories.ts.snap +43 -0
  95. package/src/Atom/List/__snapshots__/List.stories.tsx.snap +13 -0
  96. package/src/Atom/List/_list.css +123 -0
  97. package/src/Atom/List/list.twig +5 -0
  98. package/src/Atom/Media/Media.stories.ts +1 -1
  99. package/src/Atom/Media/__snapshots__/Media.stories.ts.snap +2 -2
  100. package/src/Atom/Spacing/_spacing.css +24 -24
  101. package/src/Atom/Table/__snapshots__/Table.stories.ts.snap +24 -4
  102. package/src/Atom/Table/_table.css +15 -3
  103. package/src/Atom/Table/table.twig +6 -1
  104. package/src/Atom/Text/__snapshots__/Text.stories.ts.snap +3 -2
  105. package/src/Atom/Text/_text-styles.css +21 -1
  106. package/src/Atom/Text/twig/text-styles-example.twig +3 -2
  107. package/src/Atom/_base.css +6 -0
  108. package/src/Atom/_flow.css +1 -1
  109. package/src/Atom/_generic.css +18 -11
  110. package/src/Component/Accordion/accordion.css +2 -0
  111. package/src/Component/Card/__snapshots__/Card.stories.ts.snap +2 -2
  112. package/src/Component/Card/card.twig +1 -1
  113. package/src/Component/Carousel/Carousel.stories.ts +46 -23
  114. package/src/Component/DropMenu/Elements/DropMenu.ts +10 -1
  115. package/src/Component/InPageAlert/in-page-alert.css +2 -1
  116. package/src/Component/InPageNavigation/Elements/InPageNavigation.ts +10 -5
  117. package/src/Component/InPageNavigation/Hooks/useInPageNavigation.ts +10 -5
  118. package/src/Component/InPageNavigation/InPageNavigation.stories.ts +33 -0
  119. package/src/Component/InPageNavigation/InPageNavigation.stories.tsx +52 -0
  120. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.ts.snap +26 -0
  121. package/src/Component/InPageNavigation/__snapshots__/InPageNavigation.stories.tsx.snap +2 -0
  122. package/src/Component/InPageNavigation/twig/content-example-duplicate-headings.twig +20 -0
  123. package/src/Component/InPageNavigation/twig/in-page-navigation-story-duplicate-headings.twig +2 -0
  124. package/src/Component/ListItem/__snapshots__/ListItem.stories.ts.snap +4 -4
  125. package/src/Component/ListItem/list-item.twig +2 -2
  126. package/src/Component/Navigation/_navigation.css +1 -1
  127. package/src/Component/Pagination/Pagination.stories.ts +8 -4
  128. package/src/Component/Pagination/pagination.css +3 -3
  129. package/src/Component/ProgressIndicator/ProgressIndicator.stories.ts +36 -0
  130. package/src/Component/ProgressIndicator/ProgressIndicator.stories.tsx +30 -0
  131. package/src/Component/ProgressIndicator/ProgressIndicator.tsx +60 -0
  132. package/src/Component/ProgressIndicator/README.md +111 -0
  133. package/src/Component/ProgressIndicator/__snapshots__/ProgressIndicator.stories.ts.snap +67 -0
  134. package/src/Component/ProgressIndicator/__snapshots__/ProgressIndicator.stories.tsx.snap +7 -0
  135. package/src/Component/ProgressIndicator/progress-indicator.css +59 -0
  136. package/src/Component/ProgressIndicator/progress-indicator.twig +22 -0
  137. package/src/Component/Sticky/Elements/Sticky.ts +1 -1
  138. package/src/Component/Sticky/sticky.css +3 -3
  139. package/src/Component/Tabs/Elements/Tabs.ts +3 -1
  140. package/src/Component/Tabs/Tabs.stories.ts +55 -21
  141. package/src/Component/Tabs/__snapshots__/Tabs.stories.ts.snap +2 -2
  142. package/src/Component/Tag/README.md +52 -26
  143. package/src/Component/Tag/Tag.stories.tsx +24 -0
  144. package/src/Component/Tag/Tag.tsx +12 -2
  145. package/src/Component/Tag/TagItem.stories.ts +25 -0
  146. package/src/Component/Tag/__snapshots__/Tag.stories.ts.snap +2 -2
  147. package/src/Component/Tag/__snapshots__/Tag.stories.tsx.snap +2 -0
  148. package/src/Component/Tag/tag-item.twig +2 -2
  149. package/src/Component/Tag/tag.css +76 -2
  150. package/src/Form/Autocomplete/Autocomplete.stories.ts +8 -3
  151. package/src/Form/Autocomplete/Autocomplete.tsx +1 -4
  152. package/src/Form/Autocomplete/README.md +26 -26
  153. package/src/Form/Autocomplete/__snapshots__/Autocomplete.stories.ts.snap +1 -1
  154. package/src/Form/Autocomplete/__snapshots__/Autocomplete.stories.tsx.snap +1 -1
  155. package/src/Form/Autocomplete/autocomplete.twig +0 -2
  156. package/src/Form/Checkbox/FormCheckbox.tsx +2 -8
  157. package/src/Form/Checkbox/README.md +23 -18
  158. package/src/Form/Checkbox/input-checkbox.twig +0 -2
  159. package/src/Form/CheckboxCard/CheckboxCard.stories.ts +90 -0
  160. package/src/Form/CheckboxCard/CheckboxCard.stories.tsx +43 -0
  161. package/src/Form/CheckboxCard/CheckboxCard.tsx +102 -0
  162. package/src/Form/CheckboxCard/README.md +163 -0
  163. package/src/Form/CheckboxCard/__snapshots__/CheckboxCard.stories.ts.snap +63 -0
  164. package/src/Form/CheckboxCard/__snapshots__/CheckboxCard.stories.tsx.snap +7 -0
  165. package/src/Form/CheckboxCard/checkbox-card.twig +29 -0
  166. package/src/Form/FormItem/__snapshots__/FormItem.stories.ts.snap +2 -2
  167. package/src/Form/README.md +65 -13
  168. package/src/Form/Radio/FormRadio.tsx +1 -4
  169. package/src/Form/Radio/input-radio.twig +0 -2
  170. package/src/Form/RadioCard/README.md +146 -0
  171. package/src/Form/RadioCard/RadioCard.stories.ts +95 -0
  172. package/src/Form/RadioCard/RadioCard.stories.tsx +26 -0
  173. package/src/Form/RadioCard/RadioCard.tsx +59 -0
  174. package/src/Form/RadioCard/__snapshots__/RadioCard.stories.ts.snap +69 -0
  175. package/src/Form/RadioCard/__snapshots__/RadioCard.stories.tsx.snap +3 -0
  176. package/src/Form/RadioCard/radio-card.twig +20 -0
  177. package/src/Form/Select/FormSelect.tsx +1 -4
  178. package/src/Form/Select/input-select.twig +0 -2
  179. package/src/Form/TextInput/FormText.stories.tsx +14 -0
  180. package/src/Form/TextInput/FormText.tsx +1 -4
  181. package/src/Form/TextInput/__snapshots__/FormText.stories.tsx.snap +2 -0
  182. package/src/Form/TextInput/input-text.twig +0 -2
  183. package/src/Form/Textarea/FormTextarea.tsx +1 -4
  184. package/src/Form/Textarea/input-textarea.twig +0 -2
  185. package/src/Form/Validation.stories.ts +153 -0
  186. package/src/Form/__snapshots__/Validation.stories.ts.snap +130 -0
  187. package/src/Form/form.css +155 -28
  188. package/src/Layout/Grid/grid.css +4 -4
  189. package/src/Layout/Sidebar/__snapshots__/Sidebar.stories.ts.snap +5 -5
  190. package/src/Layout/Sidebar/sidebar.css +1 -0
  191. package/src/Layout/Sidebar/sidebar.twig +1 -1
  192. package/src/Utility/_layout-utils.css +8 -0
  193. package/src/Utility/print.css +50 -28
  194. package/src/Utility/utilities.css +2 -2
  195. package/src/constants.css +12 -2
  196. package/src/enums.ts +17 -0
  197. package/src/react.ts +4 -0
  198. package/tools/lib/extract-classnames.mjs +0 -0
  199. package/tools/lint-classnames.mjs +1 -1
  200. package/dist/build/chunks/DropMenu-Co9jZZ4S.js +0 -1
  201. package/dist/build/chunks/InPageNavigation-CzR_KZaz.js +0 -1
  202. package/dist/build/chunks/Popover-De_CQqcd.js +0 -1
  203. package/dist/build/chunks/Sticky-Kyjykb36.js +0 -1
  204. package/dist/build/chunks/polyfills-Dokbkxxk.js +0 -1
@@ -0,0 +1,255 @@
1
+ /* Health & Public Services — Mixtape theme
2
+ * Persona: state health service or public services agency.
3
+ * Trust-driven and calm: one cool green, one cool blue, soft edges, wide
4
+ * gutters, nothing that reads as urgent unless it is.
5
+ *
6
+ * Part 1 is token overrides only. Part 2 is unlayered CSS for the high-stakes
7
+ * flow apparatus Mixtape does not ship: a step indicator, selectable choice
8
+ * cards, an error summary, and a review-your-answers block. Unlayered CSS
9
+ * beats every design-system layer without !important.
10
+ */
11
+
12
+ @import "https://fonts.googleapis.com/css2?family=Manrope:wght@500;600;700&family=Mulish:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap";
13
+
14
+ .theme--health-services {
15
+ --colour-primary: #14584a;
16
+ --colour-accent: #c4d4e2;
17
+ --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
18
+ --colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);
19
+ --colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 20%);
20
+ --colour-primary-dark: color-mix(in oklch, var(--colour-primary), black 40%);
21
+ --colour-primary-darkest: color-mix(in oklch, var(--colour-primary), black 50%);
22
+ --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
23
+ --colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);
24
+ --colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);
25
+ --colour-accent-dark: color-mix(in oklch, var(--colour-accent), black 40%);
26
+ --colour-accent-darkest: color-mix(in oklch, var(--colour-accent), black 50%);
27
+
28
+ --colour-foreground: light-dark(#1c2624, #fff);
29
+ --colour-foreground-alt: light-dark(#4d5a57, #f2f6f4);
30
+ --colour-background: light-dark(#fff, #1c2624);
31
+ --colour-background-alt: light-dark(#f2f6f4, #4d5a57);
32
+ --colour-border: light-dark(#c3d1cb, #4d5a57);
33
+ --colour-link: light-dark(#0f4a3e, #f2f6f4);
34
+ --colour-foreground-reverse: light-dark(#fff, #1c2624);
35
+ --colour-background-reverse: light-dark(#1c2624, #fff);
36
+ --_colour-outline: light-dark(#0f4a3e, #f2f6f4);
37
+
38
+ /* Status colours are darkened from stock so message text passes AA on its
39
+ own tinted background — these carry consequences, not decoration. */
40
+ --colour-error: #8a1c13; /* 9.31:1 on white */
41
+ --colour-warning: #7a4a00; /* 7.48:1 on white */
42
+ --colour-success: #145c3a;
43
+ --colour-info: #3d5a75;
44
+
45
+ /* Type: Manrope for headings and interface, Mulish for reading. Body runs
46
+ a step larger than stock — these pages are read under stress. */
47
+ --font-family: "Mulish", system-ui, sans-serif;
48
+ --font-family-display: "Manrope", system-ui, sans-serif;
49
+ --base-font-size: 1.0625rem;
50
+ --type-ratio: 1.33;
51
+ --line-height-p: 1.65;
52
+
53
+ /* Shape: soft, not playful. */
54
+ --border-radius: 6px;
55
+ --border-radius-l: 10px;
56
+ --hero-image-radius: 10px;
57
+ --popover-radius: 8px;
58
+
59
+ --shadow-color: #1c26241f;
60
+ --shadow-size: 0.6em;
61
+
62
+ --tag-background: #dfe9e4;
63
+ --tag-foreground: #0f4a3e;
64
+ --tag-font-size: var(--font-size-xs);
65
+ --button-font-size: var(--font-size-m);
66
+
67
+ /* Generous form geometry — 56px targets, 2px rules. */
68
+ --form-element-height: 3.5rem;
69
+ --line-width: 2px;
70
+ --control-size: 1.6rem;
71
+ --placeholder-colour: var(--colour-foreground-alt);
72
+ --icon-size: 1.1rem;
73
+
74
+ /* Type display. */
75
+
76
+ font-family: var(--font-family);
77
+ font-size: var(--font-size);
78
+ line-height: var(--line-height);
79
+
80
+ .mx-header {
81
+ border-bottom: 1px solid var(--colour-border);
82
+ }
83
+
84
+ & .mx-hero-banner {
85
+ &:not(:has(.mx-hero-banner__aside)) {
86
+ --hero-columns: 1fr;
87
+ }
88
+ }
89
+
90
+ & :is(h1, h2, h3, h4, h5, h6, .mx-headline, .mx-button, .mx-legend, .mx-label, .hs-ui) {
91
+ font-family: var(--font-family-display);
92
+ letter-spacing: -0.01em;
93
+ }
94
+
95
+ & .mx-text--eyebrow {
96
+ --header-letter-spacing: 0.1em;
97
+ --font-weight-bold: 600;
98
+ }
99
+
100
+ & .mx-button {
101
+ --button-min-height: 3rem;
102
+ --horizontal-padding: 1.4em;
103
+ }
104
+
105
+ & .mx-button--large {
106
+ --button-min-height: 3.5rem;
107
+ }
108
+
109
+ & .mx-button--small {
110
+ --button-min-height: unset;
111
+ }
112
+
113
+ & .mx-card--block:not(.mx-list-item) {
114
+ --card-gap: 0;
115
+
116
+ border: 2px solid var(--colour-border);
117
+ border-radius: var(--border-radius);
118
+ overflow: clip;
119
+
120
+ & img {
121
+ border-radius: unset;
122
+ }
123
+
124
+ & .mx-card__content {
125
+ padding: var(--spacing-m);
126
+ }
127
+ }
128
+
129
+ & .mx-callout {
130
+ --line-width: 4px;
131
+
132
+ background: var(--colour-background-alt);
133
+ padding-block: var(--spacing-xs);
134
+ padding-inline-end: var(--spacing-xs);
135
+ }
136
+
137
+ & blockquote {
138
+ --line-width: 4px;
139
+ }
140
+
141
+ /* Field states: rule weight, tint and a prefixed message. */
142
+
143
+ & .mx-label {
144
+ font-weight: 700;
145
+ }
146
+
147
+ & .mx-required {
148
+ font-weight: 400;
149
+ color: var(--colour-foreground-alt);
150
+ }
151
+
152
+ & :is(.mx-input__text, .mx-input__select, .mx-input__textarea) {
153
+ --outline-color: var(--colour-primary);
154
+ --outline-offset: 2px;
155
+ --line-colour: var(--colour-foreground-alt);
156
+
157
+ &.error {
158
+ border-inline-start-width: 6px;
159
+ background: #fdf6f5;
160
+ }
161
+
162
+ &.success {
163
+ border-inline-start-width: 6px;
164
+ }
165
+ }
166
+
167
+ & .mx-choice-card {
168
+ &.error {
169
+ border-inline-start-width: 6px;
170
+ background: #fdf6f5;
171
+ }
172
+
173
+ &.success {
174
+ border-inline-start-width: 6px;
175
+ }
176
+
177
+ &:has(input:checked) {
178
+ border-inline-start-width: 6px;
179
+ }
180
+ }
181
+
182
+ & .mx-error-message {
183
+ font-weight: 600;
184
+
185
+ &::before {
186
+ content: "Error: ";
187
+ }
188
+ }
189
+
190
+ & .mx-fieldset {
191
+ border: 0;
192
+ padding: 0;
193
+ margin-inline: 0;
194
+ }
195
+
196
+ & .mx-legend {
197
+ font-weight: 700;
198
+ }
199
+
200
+ & .mx-form-item:has(input[type="file"]) {
201
+ border: 2px dashed var(--colour-border);
202
+ border-radius: var(--border-radius);
203
+ padding: var(--spacing-s);
204
+ }
205
+
206
+ /* Message panels carry weight in a high-stakes flow. */
207
+
208
+ & .message {
209
+ border-width: 2px;
210
+ border-inline-start-width: 8px;
211
+ padding-block: var(--spacing-xs);
212
+ align-items: start;
213
+ }
214
+
215
+ & .message--warning {
216
+ --foreground: var(--colour-warning);
217
+ }
218
+
219
+ /* Vertical process steps use the design system's own component. */
220
+
221
+ & .mx-steps__panel-content h3 {
222
+ font-size: var(--font-size-ml);
223
+ }
224
+
225
+ & mx-accordion {
226
+ &:not(:last-child) {
227
+ margin-bottom: var(--spacing-s);
228
+ }
229
+ }
230
+
231
+ & .mx-accordion {
232
+ --horizontal-padding: var(--spacing-xs);
233
+
234
+ border: var(--line-width, 2px) solid var(--line-colour, var(--colour-border));
235
+ border-radius: var(--border-radius);
236
+ }
237
+
238
+ & .mx-accordion__toggle {
239
+ --font-weight-normal: 700;
240
+ --font-size: var(--font-size-ml);
241
+
242
+ & .mx-button {
243
+ border-color: transparent;
244
+ }
245
+ }
246
+
247
+ & .mx-filters .mx-accordion {
248
+ border: unset;
249
+ border-radius: unset;
250
+ }
251
+
252
+ & .outcome {
253
+ border-radius: var(--border-radius-l);
254
+ }
255
+ }
@@ -0,0 +1,169 @@
1
+ /* Research & Faculty — Mixtape theme
2
+ * Persona: postgraduate research institute. Sober, serif-led, text-dense,
3
+ * citation-style content. Warm colour is used once or twice per page, never
4
+ * as decoration.
5
+ *
6
+ * Part 1 is token overrides only. Part 2 is unlayered CSS for the things a
7
+ * marketing-oriented system does not ship: an academic prose column, tables
8
+ * of figures, footnotes and references. Unlayered CSS beats every
9
+ * design-system layer without !important, so no component internals change.
10
+ */
11
+
12
+ @import "https://fonts.googleapis.com/css2?family=Spectral:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,600&family=Chivo:wght@400;500;700&display=swap";
13
+
14
+ .theme--research-faculty {
15
+ --colour-primary: #8a3324;
16
+ --colour-accent: #efe6d8;
17
+ --colour-primary-light: color-mix(in oklch, var(--colour-primary), white 90%);
18
+ --colour-primary-lighter: color-mix(in oklch, var(--colour-primary), white 20%);
19
+ --colour-primary-darker: color-mix(in oklch, var(--colour-primary), black 20%);
20
+ --colour-primary-dark: color-mix(in oklch, var(--colour-primary), black 40%);
21
+ --colour-primary-darkest: color-mix(in oklch, var(--colour-primary), black 50%);
22
+ --colour-accent-light: color-mix(in oklch, var(--colour-accent), white 90%);
23
+ --colour-accent-lighter: color-mix(in oklch, var(--colour-accent), white 20%);
24
+ --colour-accent-darker: color-mix(in oklch, var(--colour-accent), black 10%);
25
+ --colour-accent-dark: color-mix(in oklch, var(--colour-accent), black 40%);
26
+ --colour-accent-darkest: color-mix(in oklch, var(--colour-accent), black 50%);
27
+
28
+ --colour-foreground: light-dark(#1c1a17, #fdfcfa);
29
+ --colour-foreground-alt: light-dark(#5d574e, #f5f1e9);
30
+ --colour-background: light-dark(#fdfcfa, #1c1a17);
31
+ --colour-background-alt: light-dark(#f5f1e9, #5d574e);
32
+ --colour-border: light-dark(#ded5c6, #5d574e);
33
+ --colour-link: light-dark(#7a2b1d, #f7f4ef);
34
+ --colour-foreground-reverse: light-dark(#f7f4ef, #22201c);
35
+ --colour-background-reverse: light-dark(#22201c, #f7f4ef);
36
+ --_colour-outline: #7a2b1d;
37
+
38
+ /* Type: serif for everything readable, sans reserved for interface and
39
+ metadata. A tight ratio keeps a dense page from shouting. */
40
+ --font-family: "Spectral", georgia, "Times New Roman", serif;
41
+ --font-family-ui: "Chivo", system-ui, sans-serif;
42
+ --type-ratio: 1.22;
43
+ --line-height-p: 1.65;
44
+
45
+ /* Shape: near-square. Printed-page restraint. */
46
+ --border-radius: 2px;
47
+ --border-radius-l: 2px;
48
+ --hero-image-radius: 2px;
49
+ --popover-radius: 2px;
50
+
51
+ --shadow-color: #1c1a1714;
52
+ --shadow-size: 0.5em;
53
+
54
+ --tag-background: #efe6d8;
55
+ --tag-foreground: #43301f;
56
+ --tag-font-size: var(--font-size-xs);
57
+ --button-font-size: var(--font-size-s);
58
+ --icon-size: 0.95rem;
59
+
60
+ /* Headings: serif, modest weight, generous leading. No negative tracking —
61
+ this is a reading document, not a poster. */
62
+
63
+ font-family: var(--font-family);
64
+ font-size: var(--font-size);
65
+ line-height: var(--line-height);
66
+
67
+ & h1 {
68
+ --font-weight-bold: 500;
69
+ }
70
+
71
+ & .mx-text--lede {
72
+ font-weight: 400;
73
+ text-wrap: pretty;
74
+ }
75
+
76
+ & .mx-hero-banner {
77
+ &:not(:has(.mx-hero-banner__aside)) {
78
+ --hero-columns: 1fr;
79
+ }
80
+ }
81
+
82
+ /* Interface furniture stays sans so it never competes with prose. */
83
+
84
+ &
85
+ :is(
86
+ .mx-button,
87
+ .mx-tag,
88
+ .mx-nav,
89
+ .mx-label,
90
+ .mx-description,
91
+ .mx-text--eyebrow,
92
+ .mx-text--meta,
93
+ .mx-footer__copyright,
94
+ .mx-breadcrumb,
95
+ .mx-pagination,
96
+ input,
97
+ select,
98
+ textarea
99
+ ) {
100
+ font-family: var(--font-family-ui);
101
+ }
102
+
103
+ & .mx-text--eyebrow {
104
+ --heading-letter-spacing: 0.12em;
105
+ --font-weight-boldfont-weight: 500;
106
+ }
107
+
108
+ & .mx-button {
109
+ --font-weight-bold: 500;
110
+ --button-letter-spacing: 0.01em;
111
+ }
112
+
113
+ & .mx-tag {
114
+ --border-radius: 2px;
115
+ --font-weight-bold: 400;
116
+ --tag-letter-spacing: 0.02em;
117
+
118
+ text-transform: none;
119
+ }
120
+
121
+ /* Prose column. Measure is capped in characters, not pixels. */
122
+
123
+ & .mx-rich-text {
124
+ & h2 {
125
+ --heading-font-size: var(--font-size-l);
126
+ }
127
+
128
+ & h3 {
129
+ --heading-font-size: var(--font-size-ml);
130
+ }
131
+
132
+ /* Small caps run-in for the opening paragraph of a section. */
133
+ & p::first-line {
134
+ font-variant-caps: all-small-caps;
135
+ letter-spacing: 0.04em;
136
+ }
137
+
138
+ & blockquote {
139
+ --line-colour: var(--colour-primary);
140
+
141
+ font-size: var(--font-size-ml);
142
+ line-height: 1.5;
143
+ font-weight: 300;
144
+ }
145
+ }
146
+
147
+ /* Footnote references and the note list. wrap link in `sup` tag */
148
+
149
+ /* Dense data tables.
150
+ zebra, compact + right-aligned figures. */
151
+
152
+ & .num {
153
+ text-align: end;
154
+ }
155
+
156
+ /* Cards: rules, not shadows. */
157
+
158
+ & .mx-card--block:not(.mx-list-item) {
159
+ --card-gap: 0;
160
+
161
+ border-radius: 2px;
162
+ border: 1px solid var(--colour-border);
163
+ overflow: clip;
164
+
165
+ & .mx-card__content {
166
+ padding: var(--spacing-s);
167
+ }
168
+ }
169
+ }
@@ -1 +1 @@
1
- @layer popover-polyfill;@layer design-system.defaults{details{& summary{list-style-type:none;&:is(){content:"";display:none}}}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile,mx-accordion-group){display:block}:where(:is(div.mx-accordion,mx-accordiondiv)){& .mx-accordion__toggle{appearance:none;color:inherit;font-size:inherit;background:initial;border:initial;padding:initial}}mx-accordion-group:not(:defined) .mx-accordions__toggle-all{display:none}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-accordion__title{gap:var(--spacing-s);flex-flow:wrap;align-items:center;margin-block-end:var(--spacing-m);display:flex}.mx-accordions__toggle-all{margin-inline-start:auto}.mx-accordion{& .mx-accordion__toggle{cursor:pointer;text-align:start;inline-size:100%}&>:is(h2,h3,h4,h5,h6){all:unset}&>.mx-accordion__content{opacity:0;display:none;overflow:hidden}&:is([open],[data-open=true]){&>.mx-accordion__toggle{& .mx-icon--chevron-down{transform:rotate(180deg)}}&>.mx-accordion__content{opacity:1;display:block;@starting-style{opacity:0;display:block}}}}.mx-accordion--divided{border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));& .mx-accordion__toggle{padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,0);justify-content:space-between;align-items:center;gap:var(--spacing-xxs);display:flex;& .mx-icon{margin-inline-start:auto}}&:is([open],[data-open=true]){&>.mx-accordion__content{border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,0)}}}}
1
+ @layer popover-polyfill;@layer design-system.defaults{details{& summary{list-style-type:none;&:is(){content:"";display:none}}}:is(mx-accordion,mx-accordiondiv,mx-accordionmobile,mx-accordion-group){display:block}:where(:is(div.mx-accordion,mx-accordiondiv)){& .mx-accordion__toggle{appearance:none;color:inherit;font-size:inherit;background:initial;border:initial;padding:initial}}mx-accordion-group:not(:defined) .mx-accordions__toggle-all{display:none}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{.mx-accordion__title{gap:var(--spacing-s);flex-flow:wrap;align-items:center;margin-block-end:var(--spacing-m);display:flex}.mx-accordions__toggle-all{margin-inline-start:auto}.mx-accordion{& .mx-accordion__toggle{cursor:pointer;text-align:start;inline-size:100%}&>:is(h2,h3,h4,h5,h6){all:unset}&>.mx-accordion__content{opacity:0;display:none;overflow:hidden}&:is([open],[data-open=true]){&>.mx-accordion__toggle{& .mx-icon--chevron-down{transform:rotate(180deg)}}&>.mx-accordion__content{opacity:1;display:block;@starting-style{opacity:0;display:block}}}}.mx-accordion--divided{border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));& .mx-accordion__toggle{padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,0);justify-content:space-between;align-items:center;gap:var(--spacing-xxs);font-size:var(--font-size);font-weight:var(--font-weight-normal);display:flex;& .mx-icon{margin-inline-start:auto}}&:is([open],[data-open=true]){&>.mx-accordion__content{border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,0)}}}}
@@ -1 +1 @@
1
- @layer popover-polyfill;@layer design-system.defaults{:where([class*=mx-background--]){background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme));& :where([class*=mx-background--]){--scheme:var(--colour-scheme);--background:var(--colour-background);--line-colour:var(--colour-border);--foreground-alt:var(--colour-foreground-alt);--embellished-colour:var(--colour-accent);--button-accent-scheme:dark}}.mx-background--alt{--scheme:var(--alt-scheme,var(--colour-scheme));--background:var(--colour-background-alt)}.mx-background--primary{--contrast-color:contrast-color(var(--colour-primary));--scheme:var(--primary-scheme,var(--colour-primary-scheme,var(--colour-scheme)));--background:var(--colour-primary);--line-colour:light-dark(var(--colour-primary-darker),var(--colour-primary-lighter));--foreground-alt:var(--colour-primary-light);--embellished-colour:var(--colour-primary-darker);--button-accent-scheme:light}.mx-background--accent{--contrast-color:contrast-color(var(--colour-accent));--scheme:var(--accent-scheme,var(--colour-accent-scheme,var(--colour-scheme)));--background:var(--colour-accent);--line-colour:light-dark(var(--colour-accent-darker),var(--colour-accent-lighter));--foreground-alt:var(--colour-accent-darkest);--embellished-colour:var(--colour-accent-darker);--button-accent-scheme:dark}.mx-background--reverse{--contrast-color:contrast-color(black);--scheme:var(--reverse-scheme,var(--colour-reverse-scheme,dark));--embellished-colour:var(--colour-border);--button-accent-scheme:light;& .mx-background--image{--bg-img-brightness:.45;--bg-img-opacity:1}}.mx-background--box{border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);padding-inline:var(--gutter,1rem)}.mx-background--image{& img{object-fit:cover;min-block-size:100%;inline-size:100%;filter:brightness(var(--bg-img-brightness,1)) saturate(var(--bg-img-saturate,1.25)) opacity(var(--bg-img-opacity,.5));position:absolute}}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}:is(*){box-sizing:border-box;opacity:1;transition-property:opacity,color,background-color,border-color,transform,rotate,display,overlay;transition-duration:.5s;transition-timing-function:var(--ease);transition-behavior:allow-discrete;background-repeat:no-repeat;margin:0;@starting-style{opacity:0}}:focus{scroll-padding-block-end:4vh}:focus-visible{outline:var(--outline-size,2px) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:var(--outline-offset,var(--outline-size,2px))}html{block-size:100%;font-size:100%;font-family:var(--font-family);line-height:var(--line-height);scroll-behavior:smooth}.translated-rtl{direction:rtl}body{font-size:var(--font-size);color:var(--colour-foreground);accent-color:var(--colour-primary);text-rendering:optimizespeed;block-size:100%;padding-inline:unset;padding-block:unset}:target,[id],.has-scroll-margin{scroll-margin-block-start:calc(var(--sticky-offset,0rem) + var(--scroll-margin,var(--spacing-m)))}:is(b,strong){font-weight:var(--font-weight-bold)}u{-webkit-text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-thickness:var(--embellished-line-height,1ch);-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:var(--embellished-offset,-.35ch)}:is(ol,ul){padding-inline-start:var(--spacing-m);&[role=list]{padding-inline-start:0;list-style:none}}dl{grid-template-columns:min(100%, var(--grid-min,20ch)) 1fr;gap:var(--spacing-xs);grid-template-rows:1fr;display:grid;&:has(>div){container-type:inline-size}& div{grid-template-columns:subgrid;grid-column:span 2;display:grid;@container (width<=60ch){gap:var(--spacing-xxxs);&>:is(dt,dd){grid-column:span 2}}}& dt{font-weight:var(--font-weight-bold)}}p{text-wrap:pretty}:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s,h6,.mx-heading--xs){font-family:var(--heading-font-family,var(--font-family));line-height:var(--line-height-h);font-size:var(--heading-font-size,var(--font-size));font-weight:var(--heading-font-weight,var(--font-weight-bold));text-wrap:balance;&[class*=mx-background--]{background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}}@supports (font-size:1cqi){:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s){--font-min:calc(var(--heading-font-size) - var(--heading-font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-s), var(--font-min)), var(--font-min) + 1cqi, var(--heading-font-size))}}.mx-headline{--heading-font-size:var(--font-size-xxxl)}h1,.mx-heading--xxl{--heading-font-size:var(--font-size-xxl)}h2,.mx-heading--xl{--heading-font-size:var(--font-size-xl)}h3,.mx-heading--l{--heading-font-size:var(--font-size-l)}h4,.mx-heading--m{--heading-font-size:var(--font-size-ml)}h5,.mx-heading--s{--heading-font-size:var(--font-size-m)}h6,.mx-heading--xs{--heading-font-size:var(--font-size-s)}blockquote{border-inline-start:var(--line-width,1ch) solid var(--line-colour,var(--blockquote-line-colour,var(--colour-accent)));padding-inline-start:var(--line-gap,var(--gap));& cite{display:inline-block}}hr{border:0;border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));block-size:0;margin-block:var(--line-gap,var(--spacing-m));display:block}a[href]{color:var(--link-colour,var(--colour-link));-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;text-decoration:underline;text-decoration-thickness:max(.08em,1px);&:hover,&:active{text-underline-offset:.2em;text-decoration-thickness:max(.09em,2px)}}.mx-link--external{gap:var(--spacing-xxxs);align-items:center;margin-inline-end:var(--spacing-xxxs);display:inline-flex;&:after{content:"";block-size:var(--spacing-s);inline-size:var(--spacing-s);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}.mx-link--more{font-weight:var(--font-weight-bold);display:inline-flex;&:hover .mx-icon{transform:translate(3px)}}.mx-link--download{&:hover .mx-icon{transform:translateY(3px)}}a:where([href]):has(.mx-icon){align-items:center;gap:var(--spacing-xxs);display:inline-flex}figure{inline-size:fit-content;margin:0;display:table}figcaption{padding:var(--spacing-xxs);font-size:var(--caption-font-size,var(--font-size-xs));line-height:var(--caption-line-height,var(--line-height-h));caption-side:bottom;display:table-caption}img{vertical-align:bottom;block-size:auto;max-inline-size:100%}svg:not([fill]){fill:currentColor}.mx-video{&,& :is(embed,object,iframe){aspect-ratio:16/9;border:0;block-size:100%;inline-size:100%}}.mx-media--video{inline-size:100%}table{border-collapse:collapse;inline-size:100%;margin:0;& th{font-weight:var(--font-weight-bold);text-align:start}& :is(td,th){padding:var(--spacing-xxs);border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));vertical-align:top}& thead :is(td,th){border-block-end-color:currentColor}& caption{padding:var(--spacing-xxs);text-align:start;font-size:var(--caption-font-size,var(--font-size-xs));line-height:var(--caption-line-height,var(--line-height-h));caption-side:bottom}}.mx-table--flush{& :is(td,th){&:first-child{padding-inline-start:0}&:last-child{padding-inline-end:0}}}.mx-table--small{& :is(td,th){font-size:var(--font-size-s);line-height:var(--line-height-h)}}.mx-table--striped{& tbody tr{&:nth-child(2n){& :is(td,th){background-color:var(--colour-background-alt)}}}}.mx-table--bordered{& :is(td,th){border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-inline:var(--line-width,1px) solid var(--line-colour,var(--colour-border))}}.mx-table--responsive{max-inline-size:100%;@media (width<720px){-webkit-overflow-scrolling:touch;box-shadow:var(--box-shadow) inset;overflow-y:scroll;& table{inline-size:100%;margin-block:0;margin-inline:var(--spacing-s);& td{min-inline-size:20ch}}}}}@layer design-system.atoms{:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--lede,.mx-text--xs,.mx-text--s,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){font-size:var(--font-size)}@supports (font-size:1cqi){:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--xs,.mx-text--s,.mx-text--lede,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){--font-min:calc(var(--font-size) - var(--font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-xs), var(--font-min)), var(--font-min) + 1cqi, var(--font-size))}}:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline){--heading-font-size:var(--font-size-xs);--font-size:var(--font-size-xs);text-transform:var(--heading-transform,uppercase);font-weight:var(--heading-font-weight,var(--font-weight-bold));font-family:var(--heading-font-family);line-height:var(--line-height-h);text-wrap:balance}:is(.mx-text--eyebrow,.mx-text--section-headline){margin-block:0;&+:is(h2,h3,p){--flow-gap:var(--spacing-xxxxs)}}:is(.mx-text--embellished,.mx-text--embellished-headline){--contrast-color:contrast-color(var(--embellished-colour,var(--colour-accent)));text-wrap:balance;z-index:1;display:inline-block;position:relative;&:after{content:"";inline-size:min(var(--embellished-line-width,6ch), 100%);block-size:var(--embellished-line-height,1ch);background-color:var(--embellished-colour,var(--colour-accent));z-index:-1;display:block;position:absolute;inset-block-end:var(--embellished-offset,-.25ch);@container style((--contrast-color:white) and (--scheme:light)){background-color:var(--embellished-colour-rev,var(--colour-accent-light))}}&+:is(h2,h3,p){--flow-gap:var(--spacing-l)}}.mx-text--lede{--font-size:var(--font-size-ml)}.mx-text--xxxl{--font-size:var(--font-size-xxxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xxl{--font-size:var(--font-size-xxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xl{--font-size:var(--font-size-xl);line-height:var(--line-height-h)}.mx-text--l{--font-size:var(--font-size-l);line-height:var(--line-height-h)}.mx-text--m{--font-size:var(--font-size-m)}.mx-text--s{--font-size:var(--font-size-s)}.mx-text--xs{--font-size:var(--font-size-xs)}.mx-text--alt{--foreground:var(--foreground-alt,var(--colour-foreground-alt));color:var(--foreground)}.mx-text--primary{--foreground:var(--foreground-primary,light-dark(var(--colour-primary),var(--colour-primary-light)));color:var(--foreground)}.mx-text--accent{--foreground:var(--foreground-accent,var(--colour-accent));color:var(--foreground)}:where([class*=mx-text--][class*=mx-background--]){background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}:is(.mx-media--left,.mx-media--right,.mx-media--center){@media (width>=540px){max-inline-size:50%;margin-block-end:var(--spacing-s);&:first-child{margin-block-start:0;&+*{margin-block-start:0!important}}}}.mx-media--center{margin-inline:auto}:is(.mx-media--left,[dir=rtl] .mx-media--right,.translated-rtl .mx-media--right){@media (width>=540px){float:left;margin-inline:0 var(--spacing-m)}}:is(.mx-media--right,[dir=rtl] .mx-media--left,.translated-rtl .mx-media--left){@media (width>=540px){float:right;margin-inline:var(--spacing-m) 0}}}@layer design-system.layout;@layer design-system.utilities{.mx-animated--fade-in{animation:fade-in .5s var(--ease)}.mx-animated--fade-out{animation:fade-out .5s var(--ease)}.mx-animated--spin:before{animation:2s linear infinite spin}.mx-animated--scale-up{animation:scale-up .5s var(--ease)}.mx-animated--scale-down{animation:scale-down .5s var(--ease)}.mx-vertical-flow{&>:where(:not(:first-child,.mx-vertical-flow__collapse)){margin-block-start:var(--flow-gap,var(--gap))}&.mx-rich-text>.mx-text--lede{--flow-gap:var(--gap-xl)}}.mx-vertical-flow-flex{align-items:start;gap:var(--flow-gap,var(--gap));flex-direction:column;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-vertical-flow-grid{align-items:start;gap:var(--flow-gap,var(--gap));display:grid;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-horizontal-flow-flex{gap:var(--flow-gap,var(--gap));flex-wrap:wrap;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-text--left{text-align:start}.mx-text--right{text-align:end}.mx-text--center{text-align:center}.mx-spacing--reset{padding:0!important}.mx-spacing--top-reset{padding-block-start:0!important}.mx-spacing--bottom-reset{padding-block-end:0!important}.mx-spacing--left-reset{padding-inline-start:0!important}.mx-spacing--right-reset{padding-inline-end:0!important}.mx-spacing--xxs{padding:var(--spacing-xxs)}.mx-spacing--top-xxs{padding-block-start:var(--spacing-xxs)}.mx-spacing--bottom-xxs{padding-block-end:var(--spacing-xxs)}.mx-spacing--left-xxs{padding-inline-start:var(--spacing-xxs)}.mx-spacing--right-xxs{padding-inline-end:var(--spacing-xxs)}.mx-spacing--xs{padding:var(--spacing-xs)}.mx-spacing--top-xs{padding-block-start:var(--spacing-xs)}.mx-spacing--bottom-xs{padding-block-end:var(--spacing-xs)}.mx-spacing--left-xs{padding-inline-start:var(--spacing-xs)}.mx-spacing--right-xs{padding-inline-end:var(--spacing-xs)}.mx-spacing--s{padding:var(--spacing-s)}.mx-spacing--top-s{padding-block-start:var(--spacing-s)}.mx-spacing--bottom-s{padding-block-end:var(--spacing-s)}.mx-spacing--left-s{padding-inline-start:var(--spacing-s)}.mx-spacing--right-s{padding-inline-end:var(--spacing-s)}.mx-spacing--m{padding:var(--spacing-m)}.mx-spacing--top-m{padding-block-start:var(--spacing-m)}.mx-spacing--bottom-m{padding-block-end:var(--spacing-m)}.mx-spacing--left-m{padding-inline-start:var(--spacing-m)}.mx-spacing--right-m{padding-inline-end:var(--spacing-m)}.mx-spacing--l{padding:var(--spacing-l)}.mx-spacing--top-l{padding-block-start:var(--spacing-l)}.mx-spacing--bottom-l{padding-block-end:var(--spacing-l)}.mx-spacing--left-l{padding-inline-start:var(--spacing-l)}.mx-spacing--right-l{padding-inline-end:var(--spacing-l)}.mx-spacing--xl{padding:var(--spacing-xl)}.mx-spacing--top-xl{padding-block-start:var(--spacing-xl)}.mx-spacing--bottom-xl{padding-block-end:var(--spacing-xl)}.mx-spacing--left-xl{padding-inline-start:var(--spacing-xl)}.mx-spacing--right-xl{padding-inline-end:var(--spacing-xl)}.mx-spacing--xxl{padding:var(--spacing-xxl)}.mx-spacing--top-xxl{padding-block-start:var(--spacing-xxl)}.mx-spacing--bottom-xxl{padding-block-end:var(--spacing-xxl)}.mx-spacing--left-xxl{padding-inline-start:var(--spacing-xxl)}.mx-spacing--right-xxl{padding-inline-end:var(--spacing-xxl)}.mx-spacing--xxxl{padding:var(--spacing-xxxl)}.mx-spacing--top-xxxl{padding-block-start:var(--spacing-xxxl)}.mx-spacing--bottom-xxxl{padding-block-end:var(--spacing-xxxl)}.mx-spacing--left-xxxl{padding-inline-start:var(--spacing-xxxl)}.mx-spacing--right-xxxl{padding-inline-end:var(--spacing-xxxl)}.mx-spacing--xxxxl{padding:var(--spacing-xxxxl)}.mx-spacing--top-xxxxl{padding-block-start:var(--spacing-xxxxl)}.mx-spacing--bottom-xxxxl{padding-block-end:var(--spacing-xxxxl)}.mx-spacing--left-xxxxl{padding-inline-start:var(--spacing-xxxxl)}.mx-spacing--right-xxxxl{padding-inline-end:var(--spacing-xxxxl)}.mx-spacing--ul{padding:var(--spacing-ul)}.mx-spacing--top-ul{padding-block-start:var(--spacing-ul)}.mx-spacing--bottom-ul{padding-block-end:var(--spacing-ul)}.mx-spacing--left-ul{padding-inline-start:var(--spacing-ul)}.mx-spacing--right-ul{padding-inline-end:var(--spacing-ul)}.mx-spacing--uul{padding:var(--spacing-uul)}.mx-spacing--top-uul{padding-block-start:var(--spacing-uul)}.mx-spacing--bottom-uul{padding-block-end:var(--spacing-uul)}.mx-spacing--left-uul{padding-inline-start:var(--spacing-uul)}.mx-spacing--right-uul{padding-inline-end:var(--spacing-uul)}.mx-spacing--uuul{padding:var(--spacing-uuul)}.mx-spacing--top-uuul{padding-block-start:var(--spacing-uuul)}.mx-spacing--bottom-uuul{padding-block-end:var(--spacing-uuul)}.mx-spacing--left-uuul{padding-inline-start:var(--spacing-uuul)}.mx-spacing--right-uuul{padding-inline-end:var(--spacing-uuul)}.mx-margin--reset{margin:0!important}.mx-margin--top-reset{margin-block-start:0!important}.mx-margin--bottom-reset{margin-block-end:0!important}.mx-margin--left-reset{margin-inline-start:0!important}.mx-margin--right-reset{margin-inline-end:0!important}.mx-margin--xxs{margin:var(--spacing-xxs)}.mx-margin--top-xxs{margin-block-start:var(--spacing-xxs)}.mx-margin--bottom-xxs{margin-block-end:var(--spacing-xxs)}.mx-margin--left-xxs{margin-inline-start:var(--spacing-xxs)}.mx-margin--right-xxs{margin-inline-end:var(--spacing-xxs)}.mx-margin--xs{margin:var(--spacing-xs)}.mx-margin--top-xs{margin-block-start:var(--spacing-xs)}.mx-margin--bottom-xs{margin-block-end:var(--spacing-xs)}.mx-margin--left-xs{margin-inline-start:var(--spacing-xs)}.mx-margin--right-xs{margin-inline-end:var(--spacing-xs)}.mx-margin--s{margin:var(--spacing-s)}.mx-margin--top-s{margin-block-start:var(--spacing-s)}.mx-margin--bottom-s{margin-block-end:var(--spacing-s)}.mx-margin--left-s{margin-inline-start:var(--spacing-s)}.mx-margin--right-s{margin-inline-end:var(--spacing-s)}.mx-margin--m{margin:var(--spacing-m)}.mx-margin--top-m{margin-block-start:var(--spacing-m)}.mx-margin--bottom-m{margin-block-end:var(--spacing-m)}.mx-margin--left-m{margin-inline-start:var(--spacing-m)}.mx-margin--right-m{margin-inline-end:var(--spacing-m)}.mx-margin--l{margin:var(--spacing-l)}.mx-margin--top-l{margin-block-start:var(--spacing-l)}.mx-margin--bottom-l{margin-block-end:var(--spacing-l)}.mx-margin--left-l{margin-inline-start:var(--spacing-l)}.mx-margin--right-l{margin-inline-end:var(--spacing-l)}.mx-margin--xl{margin:var(--spacing-xl)}.mx-margin--top-xl{margin-block-start:var(--spacing-xl)}.mx-margin--bottom-xl{margin-block-end:var(--spacing-xl)}.mx-margin--left-xl{margin-inline-start:var(--spacing-xl)}.mx-margin--right-xl{margin-inline-end:var(--spacing-xl)}.mx-margin--xxl{margin:var(--spacing-xxl)}.mx-margin--top-xxl{margin-block-start:var(--spacing-xxl)}.mx-margin--bottom-xxl{margin-block-end:var(--spacing-xxl)}.mx-margin--left-xxl{margin-inline-start:var(--spacing-xxl)}.mx-margin--right-xxl{margin-inline-end:var(--spacing-xxl)}.mx-margin--xxxl{margin:var(--spacing-xxxl)}.mx-margin--top-xxxl{margin-block-start:var(--spacing-xxxl)}.mx-margin--bottom-xxxl{margin-block-end:var(--spacing-xxxl)}.mx-margin--left-xxxl{margin-inline-start:var(--spacing-xxxl)}.mx-margin--right-xxxl{margin-inline-end:var(--spacing-xxxl)}.mx-margin--xxxxl{margin:var(--spacing-xxxxl)}.mx-margin--top-xxxxl{margin-block-start:var(--spacing-xxxxl)}.mx-margin--bottom-xxxxl{margin-block-end:var(--spacing-xxxxl)}.mx-margin--left-xxxxl{margin-inline-start:var(--spacing-xxxxl)}.mx-margin--right-xxxxl{margin-inline-end:var(--spacing-xxxxl)}.mx-margin--ul{margin:var(--spacing-ul)}.mx-margin--top-ul{margin-block-start:var(--spacing-ul)}.mx-margin--bottom-ul{margin-block-end:var(--spacing-ul)}.mx-margin--left-ul{margin-inline-start:var(--spacing-ul)}.mx-margin--right-ul{margin-inline-end:var(--spacing-ul)}.mx-margin--uul{margin:var(--spacing-uul)}.mx-margin--top-uul{margin-block-start:var(--spacing-uul)}.mx-margin--bottom-uul{margin-block-end:var(--spacing-uul)}.mx-margin--left-uul{margin-inline-start:var(--spacing-uul)}.mx-margin--right-uul{margin-inline-end:var(--spacing-uul)}.mx-margin--uuul{margin:var(--spacing-uuul)}.mx-margin--top-uuul{margin-block-start:var(--spacing-uuul)}.mx-margin--bottom-uuul{margin-block-end:var(--spacing-uuul)}.mx-margin--left-uuul{margin-inline-start:var(--spacing-uuul)}.mx-margin--right-uuul{margin-inline-end:var(--spacing-uuul)}.mx-table--reset{& :is(td,th){border:unset;padding:unset;background-color:#0000}}}@layer design-system.components,design-system.layouts,design-system.print;@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@media (prefers-reduced-motion:reduce){*,:before,:after{background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:-1ms!important}}
1
+ @layer popover-polyfill;@layer design-system.defaults{:where([class*=mx-background--]){background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme));& :where([class*=mx-background--]){--scheme:var(--colour-scheme);--background:var(--colour-background);--line-colour:var(--colour-border);--foreground-alt:var(--colour-foreground-alt);--embellished-colour:var(--colour-accent);--button-accent-scheme:dark}}.mx-background--alt{--scheme:var(--alt-scheme,var(--colour-scheme));--background:var(--colour-background-alt)}.mx-background--primary{--contrast-color:contrast-color(var(--colour-primary));--scheme:var(--primary-scheme,var(--colour-primary-scheme,var(--colour-scheme)));--background:var(--colour-primary);--line-colour:light-dark(var(--colour-primary-darker),var(--colour-primary-lighter));--foreground-alt:var(--colour-primary-light);--embellished-colour:var(--colour-primary-darker);--button-accent-scheme:var(--colour-accent-scheme,light)}.mx-background--accent{--contrast-color:contrast-color(var(--colour-accent));--scheme:var(--accent-scheme,var(--colour-accent-scheme,var(--colour-scheme)));--background:var(--colour-accent);--line-colour:light-dark(var(--colour-accent-darker),var(--colour-accent-lighter));--foreground-alt:var(--colour-accent-darkest);--embellished-colour:var(--colour-accent-darker);--button-accent-scheme:dark}.mx-background--reverse{--contrast-color:contrast-color(black);--scheme:var(--reverse-scheme,var(--colour-reverse-scheme,dark));--embellished-colour:var(--colour-border);--button-accent-scheme:var(--colour-accent-scheme,light);& .mx-background--image{--bg-img-brightness:.45;--bg-img-opacity:1}}.mx-background--box{border:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-radius:var(--border-radius);padding-inline:var(--gutter,1rem)}.mx-background--image{& img{object-fit:cover;min-block-size:100%;inline-size:100%;filter:brightness(var(--bg-img-brightness,1)) saturate(var(--bg-img-saturate,1.25)) opacity(var(--bg-img-opacity,.5));position:absolute}}@media (prefers-reduced-motion:no-preference){@view-transition{navigation:auto}}:is(*){box-sizing:border-box;opacity:1;transition-property:opacity,color,background-color,border-color,transform,rotate,display,overlay;transition-duration:.5s;transition-timing-function:var(--ease);transition-behavior:allow-discrete;background-repeat:no-repeat;margin:0;@starting-style{opacity:0}}:focus{scroll-padding-block-end:4vh}:focus-visible{outline:var(--outline-size,2px) var(--outline-style,solid) var(--outline-color,currentcolor);outline-offset:var(--outline-offset,var(--outline-size,2px))}html{block-size:100%;font-size:100%;font-family:var(--font-family);line-height:var(--line-height);scroll-behavior:smooth}.translated-rtl{direction:rtl}body{font-size:var(--font-size);color:var(--colour-foreground);accent-color:var(--colour-primary);text-rendering:optimizespeed;block-size:100%;padding-inline:unset;padding-block:unset}:target,[id],.has-scroll-margin{scroll-margin-block-start:calc(var(--sticky-offset,0rem) + var(--scroll-margin,var(--spacing-m)))}:is(b,strong){font-weight:var(--font-weight-bold)}u{-webkit-text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-color:var(--embellished-colour,var(--colour-accent));text-decoration-thickness:var(--embellished-line-height,1ch);-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none;text-underline-offset:var(--embellished-offset,-.35ch)}:is(ol,ul){padding-inline-start:var(--spacing-m);&[role=list]{padding-inline-start:0;list-style:none}}dl{gap:var(--spacing-xs);grid-template-rows:1fr;inline-size:100%;display:grid;&:has(>div){container-type:inline-size}& div{gap:var(--spacing-xxxs);align-content:start;display:grid}& dt{font-weight:var(--font-weight-bold)}&:where(:not(.mx-list--columns)){grid-template-columns:min(100%, var(--grid-min,20ch)) 1fr;& div{grid-template-columns:subgrid;grid-column:span 2;@container (width<=60ch){&>:is(dt,dd){grid-column:span 2}}}}}p{text-wrap:pretty}.mx-vertical-flow{&>:where(:not(:first-child,.mx-vertical-flow__collapse)){margin-block-start:var(--flow-gap,var(--gap))}&.mx-rich-text>.mx-text--lede{--flow-gap:var(--gap-xl)}}.mx-vertical-flow-flex{align-items:start;gap:var(--flow-gap,var(--gap));flex-direction:column;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-vertical-flow-grid{align-items:start;gap:var(--flow-gap,var(--gap));display:grid;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}.mx-horizontal-flow-flex{gap:var(--flow-gap,var(--gap));flex-wrap:wrap;display:flex;&>*{margin:0}&:is(ul,ol){padding-inline-start:unset;list-style:none}}:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s,h6,.mx-heading--xs){font-family:var(--heading-font-family,var(--font-family-display,var(--font-family)));line-height:var(--line-height-h);font-size:var(--heading-font-size,var(--font-size));font-weight:var(--heading-font-weight,var(--font-weight-bold));letter-spacing:var(--heading-letter-spacing,0);text-wrap:balance;&[class*=mx-background--]{background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}}@supports (font-size:1cqi){:is(.mx-headline,h1,.mx-heading--xxl,h2,.mx-heading--xl,h3,.mx-heading--l,h4,.mx-heading--m,h5,.mx-heading--s){--font-min:calc(var(--heading-font-size) - var(--heading-font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-s), var(--font-min)), var(--font-min) + 1cqi, var(--heading-font-size))}}.mx-headline{--heading-font-size:var(--font-size-xxxl)}h1,.mx-heading--xxl{--heading-font-size:var(--font-size-xxl)}h2,.mx-heading--xl{--heading-font-size:var(--font-size-xl)}h3,.mx-heading--l{--heading-font-size:var(--font-size-l)}h4,.mx-heading--m{--heading-font-size:var(--font-size-ml)}h5,.mx-heading--s{--heading-font-size:var(--font-size-m)}h6,.mx-heading--xs{--heading-font-size:var(--font-size-s)}blockquote{border-inline-start:var(--line-width,6px) solid var(--line-colour,var(--blockquote-line-colour,var(--colour-accent)));font-size:var(--blockquote-font-size,var(--font-size-ml));padding-inline-start:var(--line-gap,var(--gap));& cite{font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));font-family:var(--font-family-ui,var(--font-family));color:var(--colour-foreground-alt);margin-block-start:var(--spacing-xs);font-style:normal;display:block}}hr{border:0;border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));block-size:0;margin-block:var(--line-gap,var(--spacing-m));display:block}a[href]{color:var(--link-colour,var(--colour-link));-webkit-text-decoration-skip-ink:auto;text-decoration-skip-ink:auto;text-decoration:underline;text-decoration-thickness:max(.08em,1px);&:hover,&:active{text-underline-offset:.2em;text-decoration-thickness:max(.09em,2px)}}.mx-link--external{gap:var(--spacing-xxxs);align-items:center;margin-inline-end:var(--spacing-xxxs);display:inline-flex;&:after{content:"";block-size:var(--spacing-s);inline-size:var(--spacing-s);background-color:currentColor;display:inline-block;-webkit-mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");mask-image:url("data:image/svg+xml,%3csvg%20xmlns='http://www.w3.org/2000/svg'%20width='16'%20height='16'%3e%3cpath%20d='M15%200H8v2h4.6L6.3%208.3l1.4%201.4L14%203.4V8h2V1c0-.6-.4-1-1-1z'/%3e%3cpath%20d='M14%2016H1c-.6%200-1-.4-1-1V2c0-.6.4-1%201-1h4v2H2v11h11v-3h2v4c0%20.6-.4%201-1%201z'/%3e%3c/svg%3e");-webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}}.mx-link--more{font-weight:var(--font-weight-bold);display:inline-flex;&:hover .mx-icon{transform:translate(3px)}}.mx-link--download{&:hover .mx-icon{transform:translateY(3px)}}a:where([href]):has(.mx-icon){align-items:center;gap:var(--spacing-xxs);display:inline-flex}figure{inline-size:var(--width,100%);margin:0;display:block;& :is(picture,img,iframe,video){inline-size:100%}}figcaption{padding:var(--spacing-xxs);font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);margin-block-start:var(--spacing-xs);display:block}img{vertical-align:bottom;block-size:auto;max-inline-size:100%}svg:not([fill]){fill:currentColor}.mx-video{&,& :is(embed,object,iframe){aspect-ratio:16/9;border:0;block-size:100%;inline-size:100%}}.mx-media--video{inline-size:100%}table{font-size:var(--font-size-s);border-collapse:collapse;font-variant-numeric:tabular-nums lining-nums;inline-size:100%;margin:0;& th{font-weight:var(--font-weight-bold);text-align:start}& :is(td,th){padding:var(--spacing-xxs);border-block-end:var(--line-width,1px) solid var(--line-colour,var(--colour-border));font-family:var(--font-family-ui,var(--font-family));vertical-align:top}& thead :is(td,th){border-block-end:var(--line-width,1.5px) solid currentcolor}& caption{padding:var(--spacing-xxs);text-align:start;font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);caption-side:bottom}& tfoot :is(td,th){border-block-start:var(--line-width,1.5px) solid currentcolor;font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h))}}.mx-table--flush{& :is(td,th){&:first-child{padding-inline-start:0}&:last-child{padding-inline-end:0}}}.mx-table--small{& :is(td,th){font-size:var(--font-size-s);line-height:var(--line-height-h)}}.mx-table--striped{& tbody tr{&:nth-child(2n){& :is(td,th){background-color:var(--colour-background-alt)}}}}.mx-table--bordered{& :is(td,th){border-block-start:var(--line-width,1px) solid var(--line-colour,var(--colour-border));border-inline:var(--line-width,1px) solid var(--line-colour,var(--colour-border))}}.mx-table--responsive{max-inline-size:100%;@media (width<720px){-webkit-overflow-scrolling:touch;box-shadow:var(--box-shadow) inset;overflow-y:scroll;& table{inline-size:100%;margin-block:0;margin-inline:var(--spacing-s);& td{min-inline-size:20ch}}}}}@layer design-system.atoms{:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--lede,.mx-text--meta,.mx-text--xs,.mx-text--s,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){font-size:var(--font-size)}@supports (font-size:1cqi){:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline,.mx-text--meta,.mx-text--xs,.mx-text--s,.mx-text--lede,.mx-text--m,.mx-text--l,.mx-text--xl,.mx-text--xxl,.mx-text--xxxl,.mx-text--fluid){--font-min:calc(var(--font-size) - var(--font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-xs), var(--font-min)), var(--font-min) + 1cqi, var(--font-size))}}:is(.mx-text--eyebrow,.mx-text--section-headline,.mx-text--embellished-headline){--heading-font-size:var(--font-size-xs);--font-size:var(--font-size-xs);text-transform:var(--heading-transform,uppercase);font-weight:var(--heading-font-weight,var(--font-weight-bold));font-family:var(--font-family-ui,var(--font-family));letter-spacing:var(--heading-letter-spacing,0);line-height:var(--line-height-h);text-wrap:balance}:is(.mx-text--eyebrow,.mx-text--section-headline){margin-block:0;&+:is(h2,h3,p){--flow-gap:var(--spacing-xxxxs)}}:is(.mx-text--embellished,.mx-text--embellished-headline){--contrast-color:contrast-color(var(--embellished-colour,var(--colour-accent)));text-wrap:balance;z-index:1;display:inline-block;position:relative;&:after{content:"";inline-size:min(var(--embellished-line-width,6ch), 100%);block-size:var(--embellished-line-height,1ch);background-color:var(--embellished-colour,var(--colour-accent));z-index:-1;display:block;position:absolute;inset-block-end:var(--embellished-offset,-.25ch);@container style((--contrast-color:white) and (--scheme:light)){background-color:var(--embellished-colour-rev,var(--colour-accent-light))}}&+:is(h2,h3,p){--flow-gap:var(--spacing-l)}}.mx-text--lede{--font-size:var(--font-size-ml)}.mx-text--xxxl{--font-size:var(--font-size-xxxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xxl{--font-size:var(--font-size-xxl);line-height:var(--line-height-h);text-wrap:balance}.mx-text--xl{--font-size:var(--font-size-xl);line-height:var(--line-height-h)}.mx-text--l{--font-size:var(--font-size-l);line-height:var(--line-height-h)}.mx-text--m{--font-size:var(--font-size-m)}.mx-text--s{--font-size:var(--font-size-s)}.mx-text--xs{--font-size:var(--font-size-xs)}.mx-text--meta{--font-size:var(--font-size-xs);--foreground:var(--foreground-alt,var(--colour-foreground-alt));color:var(--foreground);gap:.2rem;display:grid}.mx-text--alt{--foreground:var(--foreground-alt,var(--colour-foreground-alt));color:var(--foreground)}.mx-text--primary{--foreground:var(--foreground-primary,light-dark(var(--colour-primary),var(--colour-primary-light)));color:var(--foreground)}.mx-text--accent{--foreground:var(--foreground-accent,var(--colour-accent));color:var(--foreground)}:where([class*=mx-text--][class*=mx-background--]){background-color:var(--colour-background);color:var(--colour-foreground);color-scheme:var(--colour-scheme);&>span{background-color:var(--background,var(--colour-background));color:var(--foreground,var(--colour-foreground));color-scheme:var(--scheme,var(--colour-scheme))}}.mx-rich-text{font-family:var(--font-family-prose,var(--font-family));& :is(p,li){max-inline-size:var(--prose-measure,var(--container-max-width))}}:is(.mx-media--left,.mx-media--right,.mx-media--center){@media (width>=540px){max-inline-size:50%;margin-block-end:var(--spacing-s);&:first-child{margin-block-start:0;&+*{margin-block-start:0!important}}}}.mx-media--center{margin-inline:auto}:is(.mx-media--left,[dir=rtl] .mx-media--right,.translated-rtl .mx-media--right){@media (width>=540px){float:left;margin-inline:0 var(--spacing-m)}}:is(.mx-media--right,[dir=rtl] .mx-media--left,.translated-rtl .mx-media--left){@media (width>=540px){float:right;margin-inline:var(--spacing-m) 0}}.mx-list{gap:var(--spacing-xxxs);counter-reset:fn;margin-block:0;padding-inline-start:0;list-style:none;display:grid;& li{counter-increment:fn;max-inline-size:var(--prose-measure,70ch)}}.mx-list--notes li{font-size:var(--list-font-size,var(--font-size-s));padding-inline-start:var(--gap-l);position:relative;&:before{content:counter(fn) ".";font-family:var(--font-family-ui,var(--font-family));font-size:var(--font-size-ui,var(--font-size-xs));line-height:var(--line-height-ui,var(--line-height-h));color:var(--colour-foreground-alt);font-variant-numeric:tabular-nums lining-nums;position:absolute;inset-block-start:2px;inset-inline-start:0}}.mx-list--refs li{text-indent:calc(var(--gap-l) * -1);font-size:var(--list-font-size,var(--font-size-s));padding-inline-start:var(--gap-l)}.mx-list--stats{--font-size:var(--stat-font-size,var(--font-size-xxl));grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));font-size:var(--list-font-size,var(--font-size-s));text-wrap:balance;grid-template-rows:1fr;@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}& :is(b,strong){font-family:var(--font-family-display,var(--font-family));font-size:var(--font-size);font-weight:var(--stat-font-weight,var(--font-weight-bold));font-variant-numeric:tabular-nums lining-nums;line-height:1;display:block;@supports (font-size:1cqi){--font-min:calc(var(--font-size) - var(--font-size) * var(--font-size-diff,.3));font-size:clamp(max(var(--font-size-xs), var(--font-min)), var(--font-min) + 1cqi, var(--font-size))}}}.mx-list--columns{grid-template-columns:repeat(var(--grid-repeat,auto-fit), minmax(min(100%, var(--grid-min,20ch)), 1fr));gap:var(--grid-gap,var(--gap));@media (width>=946px){--grid-gap:var(--large-grid-gap,var(--gap-l))}}.mx-list--summary{grid-template-columns:min(100%, var(--grid-min,20ch)) 1fr auto;&>div{grid-template-columns:subgrid;padding-block:var(--spacing-xs);border-block-end:1px solid var(--colour-border);grid-column:span 3;&:first-child{border-block-start:2px solid var(--colour-foreground)}@container (width<=60ch){grid-column:1/-1;grid-template-columns:1fr auto;&>dt{grid-column:1/-1}}}& .mx-list__action{text-align:end;font-weight:var(--font-weight-bold)}}}@layer design-system.layout;@layer design-system.utilities{.mx-animated--fade-in{animation:fade-in .5s var(--ease)}.mx-animated--fade-out{animation:fade-out .5s var(--ease)}.mx-animated--spin:before{animation:2s linear infinite spin}.mx-animated--scale-up{animation:scale-up .5s var(--ease)}.mx-animated--scale-down{animation:scale-down .5s var(--ease)}.mx-text--left{text-align:start}.mx-text--right{text-align:end}.mx-text--center{text-align:center}.mx-spacing--reset{padding:0!important}.mx-spacing--top-reset{padding-block-start:0!important}.mx-spacing--bottom-reset{padding-block-end:0!important}.mx-spacing--left-reset{padding-inline-start:0!important}.mx-spacing--right-reset{padding-inline-end:0!important}.mx-spacing--xxs{padding:var(--spacing-xxs)}.mx-spacing--top-xxs{padding-block-start:var(--spacing-xxs)}.mx-spacing--bottom-xxs{padding-block-end:var(--spacing-xxs)}.mx-spacing--left-xxs{padding-inline-start:var(--spacing-xxs)}.mx-spacing--right-xxs{padding-inline-end:var(--spacing-xxs)}.mx-spacing--xs{padding:var(--spacing-xs)}.mx-spacing--top-xs{padding-block-start:var(--spacing-xs)}.mx-spacing--bottom-xs{padding-block-end:var(--spacing-xs)}.mx-spacing--left-xs{padding-inline-start:var(--spacing-xs)}.mx-spacing--right-xs{padding-inline-end:var(--spacing-xs)}.mx-spacing--s{padding:var(--spacing-s)}.mx-spacing--top-s{padding-block-start:var(--spacing-s)}.mx-spacing--bottom-s{padding-block-end:var(--spacing-s)}.mx-spacing--left-s{padding-inline-start:var(--spacing-s)}.mx-spacing--right-s{padding-inline-end:var(--spacing-s)}.mx-spacing--m{padding:var(--spacing-m)}.mx-spacing--top-m{padding-block-start:var(--spacing-m)}.mx-spacing--bottom-m{padding-block-end:var(--spacing-m)}.mx-spacing--left-m{padding-inline-start:var(--spacing-m)}.mx-spacing--right-m{padding-inline-end:var(--spacing-m)}.mx-spacing--l{padding:var(--spacing-l)}.mx-spacing--top-l{padding-block-start:var(--spacing-l)}.mx-spacing--bottom-l{padding-block-end:var(--spacing-l)}.mx-spacing--left-l{padding-inline-start:var(--spacing-l)}.mx-spacing--right-l{padding-inline-end:var(--spacing-l)}.mx-spacing--xl{padding:var(--spacing-xl)}.mx-spacing--top-xl{padding-block-start:var(--spacing-xl)}.mx-spacing--bottom-xl{padding-block-end:var(--spacing-xl)}.mx-spacing--left-xl{padding-inline-start:var(--spacing-xl)}.mx-spacing--right-xl{padding-inline-end:var(--spacing-xl)}.mx-spacing--xxl{padding:var(--spacing-xxl)}.mx-spacing--top-xxl{padding-block-start:var(--spacing-xxl)}.mx-spacing--bottom-xxl{padding-block-end:var(--spacing-xxl)}.mx-spacing--left-xxl{padding-inline-start:var(--spacing-xxl)}.mx-spacing--right-xxl{padding-inline-end:var(--spacing-xxl)}.mx-spacing--xxxl{padding:var(--spacing-xxxl)}.mx-spacing--top-xxxl{padding-block-start:var(--spacing-xxxl)}.mx-spacing--bottom-xxxl{padding-block-end:var(--spacing-xxxl)}.mx-spacing--left-xxxl{padding-inline-start:var(--spacing-xxxl)}.mx-spacing--right-xxxl{padding-inline-end:var(--spacing-xxxl)}.mx-spacing--xxxxl{padding:var(--spacing-xxxxl)}.mx-spacing--top-xxxxl{padding-block-start:var(--spacing-xxxxl)}.mx-spacing--bottom-xxxxl{padding-block-end:var(--spacing-xxxxl)}.mx-spacing--left-xxxxl{padding-inline-start:var(--spacing-xxxxl)}.mx-spacing--right-xxxxl{padding-inline-end:var(--spacing-xxxxl)}.mx-spacing--ul{padding:var(--spacing-ul)}.mx-spacing--top-ul{padding-block-start:var(--spacing-ul)}.mx-spacing--bottom-ul{padding-block-end:var(--spacing-ul)}.mx-spacing--left-ul{padding-inline-start:var(--spacing-ul)}.mx-spacing--right-ul{padding-inline-end:var(--spacing-ul)}.mx-spacing--uul{padding:var(--spacing-uul)}.mx-spacing--top-uul{padding-block-start:var(--spacing-uul)}.mx-spacing--bottom-uul{padding-block-end:var(--spacing-uul)}.mx-spacing--left-uul{padding-inline-start:var(--spacing-uul)}.mx-spacing--right-uul{padding-inline-end:var(--spacing-uul)}.mx-spacing--uuul{padding:var(--spacing-uuul)}.mx-spacing--top-uuul{padding-block-start:var(--spacing-uuul)}.mx-spacing--bottom-uuul{padding-block-end:var(--spacing-uuul)}.mx-spacing--left-uuul{padding-inline-start:var(--spacing-uuul)}.mx-spacing--right-uuul{padding-inline-end:var(--spacing-uuul)}.mx-margin--reset{margin:0!important}.mx-margin--top-reset{margin-block-start:0!important}.mx-margin--bottom-reset{margin-block-end:0!important}.mx-margin--left-reset{margin-inline-start:0!important}.mx-margin--right-reset{margin-inline-end:0!important}.mx-margin--xxs{margin:var(--spacing-xxs)}.mx-margin--top-xxs{margin-block-start:var(--spacing-xxs)}.mx-margin--bottom-xxs{margin-block-end:var(--spacing-xxs)}.mx-margin--left-xxs{margin-inline-start:var(--spacing-xxs)}.mx-margin--right-xxs{margin-inline-end:var(--spacing-xxs)}.mx-margin--xs{margin:var(--spacing-xs)}.mx-margin--top-xs{margin-block-start:var(--spacing-xs)}.mx-margin--bottom-xs{margin-block-end:var(--spacing-xs)}.mx-margin--left-xs{margin-inline-start:var(--spacing-xs)}.mx-margin--right-xs{margin-inline-end:var(--spacing-xs)}.mx-margin--s{margin:var(--spacing-s)}.mx-margin--top-s{margin-block-start:var(--spacing-s)}.mx-margin--bottom-s{margin-block-end:var(--spacing-s)}.mx-margin--left-s{margin-inline-start:var(--spacing-s)}.mx-margin--right-s{margin-inline-end:var(--spacing-s)}.mx-margin--m{margin:var(--spacing-m)}.mx-margin--top-m{margin-block-start:var(--spacing-m)}.mx-margin--bottom-m{margin-block-end:var(--spacing-m)}.mx-margin--left-m{margin-inline-start:var(--spacing-m)}.mx-margin--right-m{margin-inline-end:var(--spacing-m)}.mx-margin--l{margin:var(--spacing-l)}.mx-margin--top-l{margin-block-start:var(--spacing-l)}.mx-margin--bottom-l{margin-block-end:var(--spacing-l)}.mx-margin--left-l{margin-inline-start:var(--spacing-l)}.mx-margin--right-l{margin-inline-end:var(--spacing-l)}.mx-margin--xl{margin:var(--spacing-xl)}.mx-margin--top-xl{margin-block-start:var(--spacing-xl)}.mx-margin--bottom-xl{margin-block-end:var(--spacing-xl)}.mx-margin--left-xl{margin-inline-start:var(--spacing-xl)}.mx-margin--right-xl{margin-inline-end:var(--spacing-xl)}.mx-margin--xxl{margin:var(--spacing-xxl)}.mx-margin--top-xxl{margin-block-start:var(--spacing-xxl)}.mx-margin--bottom-xxl{margin-block-end:var(--spacing-xxl)}.mx-margin--left-xxl{margin-inline-start:var(--spacing-xxl)}.mx-margin--right-xxl{margin-inline-end:var(--spacing-xxl)}.mx-margin--xxxl{margin:var(--spacing-xxxl)}.mx-margin--top-xxxl{margin-block-start:var(--spacing-xxxl)}.mx-margin--bottom-xxxl{margin-block-end:var(--spacing-xxxl)}.mx-margin--left-xxxl{margin-inline-start:var(--spacing-xxxl)}.mx-margin--right-xxxl{margin-inline-end:var(--spacing-xxxl)}.mx-margin--xxxxl{margin:var(--spacing-xxxxl)}.mx-margin--top-xxxxl{margin-block-start:var(--spacing-xxxxl)}.mx-margin--bottom-xxxxl{margin-block-end:var(--spacing-xxxxl)}.mx-margin--left-xxxxl{margin-inline-start:var(--spacing-xxxxl)}.mx-margin--right-xxxxl{margin-inline-end:var(--spacing-xxxxl)}.mx-margin--ul{margin:var(--spacing-ul)}.mx-margin--top-ul{margin-block-start:var(--spacing-ul)}.mx-margin--bottom-ul{margin-block-end:var(--spacing-ul)}.mx-margin--left-ul{margin-inline-start:var(--spacing-ul)}.mx-margin--right-ul{margin-inline-end:var(--spacing-ul)}.mx-margin--uul{margin:var(--spacing-uul)}.mx-margin--top-uul{margin-block-start:var(--spacing-uul)}.mx-margin--bottom-uul{margin-block-end:var(--spacing-uul)}.mx-margin--left-uul{margin-inline-start:var(--spacing-uul)}.mx-margin--right-uul{margin-inline-end:var(--spacing-uul)}.mx-margin--uuul{margin:var(--spacing-uuul)}.mx-margin--top-uuul{margin-block-start:var(--spacing-uuul)}.mx-margin--bottom-uuul{margin-block-end:var(--spacing-uuul)}.mx-margin--left-uuul{margin-inline-start:var(--spacing-uuul)}.mx-margin--right-uuul{margin-inline-end:var(--spacing-uuul)}.mx-table--reset{& :is(td,th){border:unset;padding:unset;background-color:#0000}}}@layer design-system.components,design-system.layouts,design-system.print;@keyframes fade-in{to{opacity:1}}@keyframes fade-out{to{opacity:0}}@keyframes spin{to{transform:rotate(1turn)}}@keyframes scale-up{to{transform:scale(1.25)}}@keyframes scale-down{to{transform:scale(.75)}}@media (prefers-reduced-motion:reduce){*,:before,:after{background-attachment:initial!important;scroll-behavior:auto!important;transition-duration:0s!important;transition-delay:0s!important;animation-duration:1ms!important;animation-iteration-count:1!important;animation-delay:-1ms!important}}
@@ -1 +1 @@
1
- @layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-button{--outline-offset:.0625rem;gap:var(--button-gap,var(--spacing-s));inline-size:fit-content;font-size:var(--button-font-size,var(--font-size));font-weight:var(--font-weight-bold);font-family:var(--font-family), sans-serif;line-height:var(--line-height-ui);border:var(--line-width,2px) solid var(--line-colour,currentcolor);border-radius:var(--radius,var(--border-radius-l));padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,var(--spacing-m));background-color:var(--button-bg,var(--background,var(--colour-background)));color:var(--button-fg,var(--foreground,var(--colour-foreground)));text-decoration-line:none;display:inline-flex;&:hover{cursor:pointer;text-decoration-line:none}&:disabled{cursor:not-allowed;opacity:.3}}.mx-button--full-width{justify-content:center;inline-size:100%}.mx-button--large{--vertical-padding:var(--spacing-s);--horizontal-padding:var(--spacing-l)}.mx-button--small{--button-font-size:var(--font-size-s);--vertical-padding:var(--spacing-xxxs);--horizontal-padding:var(--spacing-s)}.mx-button--icon-only{inline-size:var(--spacing-xl);block-size:var(--spacing-xl);border-radius:var(--border-radius-round);flex-wrap:wrap;padding:0;overflow:hidden;&:before,&:after{--icon-size:100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}&:has(.mx-icon){place-content:center}}.mx-button--dark{--line-colour:var(--button-dark-line,var(--colour-link));--button-bg:var(--button-dark-bg,var(--colour-link));--button-fg:var(--button-dark-fg,var(--colour-foreground-reverse));&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-dark-bg,var(--colour-link))}}.mx-button--light{--line-colour:var(--button-light-line,transparent);--button-bg:var(--button-light-bg,transparent);--button-fg:var(--button-light-fg,var(--colour-link));text-decoration-line:underline;&:hover{text-decoration-line:underline}}.mx-button--accent{--line-colour:var(--button-accent-line,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-bg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-fg:var(--button-accent-bg,var(--colour-foreground));color-scheme:var(--button-accent-scheme,light);&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--line-colour:var(--button-fg);color-scheme:var(--button-accent-scheme-rev,var(--button-accent-scheme,dark))}}.mx-button--destructive{--line-colour:var(--colour-error);--button-bg:var(--colour-error);--button-fg:var(--colour-foreground-reverse);&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-error)}}.mx-button--white{--button-bg:var(--colour-background);--button-fg:var(--colour-foreground);--line-colour:var(--colour-background);color-scheme:light;&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-foreground-reverse)}}}@layer design-system.layout,design-system.utilities,design-system.components;
1
+ @layer popover-polyfill,design-system.defaults;@layer design-system.atoms{.mx-button{--outline-offset:1px;gap:var(--button-gap,var(--spacing-s));inline-size:fit-content;font-size:var(--button-font-size,var(--font-size));font-weight:var(--font-weight-bold);font-family:var(--font-family), sans-serif;line-height:var(--line-height-ui);border:var(--line-width,2px) solid var(--line-colour,currentcolor);border-radius:var(--radius,var(--border-radius-l));padding-block:var(--vertical-padding,var(--spacing-xxs));padding-inline:var(--horizontal-padding,var(--spacing-m));background-color:var(--button-bg,var(--background,var(--colour-background)));color:var(--button-fg,var(--foreground,var(--colour-foreground)));letter-spacing:var(--button-letter-spacing,0);min-block-size:var(--button-min-height,unset);text-decoration-line:none;display:inline-flex;&:hover{cursor:pointer;text-decoration-line:none}&:disabled{cursor:not-allowed;opacity:.3}}.mx-button--full-width{justify-content:center;inline-size:100%}.mx-button--large{--vertical-padding:var(--spacing-s);--horizontal-padding:var(--spacing-l)}.mx-button--small{--button-font-size:var(--font-size-s);--vertical-padding:var(--spacing-xxxs);--horizontal-padding:var(--spacing-s)}.mx-button--icon-only{inline-size:var(--button-min-height,var(--spacing-xl));block-size:var(--button-min-height,var(--spacing-xl));border-radius:var(--border-radius-round);flex-wrap:wrap;align-content:start;padding:0;overflow:hidden;&:before,&:after{--icon-size:100%;-webkit-mask-size:var(--spacing-s);mask-size:var(--spacing-s)}&:has(.mx-icon){place-content:center}}.mx-button--dark{--line-colour:var(--button-dark-line,var(--link-colour,var(--colour-link)));--button-bg:var(--button-dark-bg,var(--link-colour,var(--colour-link)));--button-fg:var(--button-dark-fg,var(--colour-foreground-reverse));&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-dark-bg,var(--link-colour,var(--colour-link)))}}.mx-button--light{--line-colour:var(--button-light-line,transparent);--button-bg:var(--button-light-bg,transparent);--button-fg:var(--button-light-fg,var(--link-colour,var(--colour-link)));text-decoration-line:underline;&:hover{text-decoration-line:underline}}.mx-button--accent{--line-colour:var(--button-accent-line,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-bg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--button-fg:var(--button-accent-fg,var(--colour-foreground));color-scheme:var(--button-accent-scheme,var(--colour-accent-scheme,light));&.mx-button--outline{--button-bg:transparent;--button-fg:var(--button-accent-bg,light-dark(var(--colour-accent),var(--colour-accent-darkest)));--line-colour:var(--button-fg);color-scheme:var(--button-accent-scheme-rev,var(--button-accent-scheme,dark))}}.mx-button--destructive{--line-colour:var(--colour-error);--button-bg:var(--colour-error);--button-fg:var(--colour-foreground-reverse);&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-error)}}.mx-button--white{--button-bg:var(--colour-background);--button-fg:var(--colour-foreground);--line-colour:var(--colour-background);color-scheme:light;&.mx-button--outline{--button-bg:transparent;--button-fg:var(--colour-foreground-reverse)}}}@layer design-system.layout,design-system.utilities,design-system.components;
@@ -0,0 +1 @@
1
+ import{t as e}from"./Popover-Cxg-s5Jn.js";var t=class extends e{controller;closeOnClick;constructor(){super(),this.controller=new AbortController}async connectedCallback(){if(await super.connectedCallback(),!this.container||!this.trigger)return;this.closeOnClick=this.hasAttribute(`closeonclick`);let{signal:e}=this.controller;document.addEventListener(`click`,e=>{let t=e.target,n=t.closest(`a, button`);(t===this.container||[...this.items].includes(n))&&(this.handleSelect(e),e.preventDefault())},{signal:e}),document.addEventListener(`keydown`,e=>{let{target:t,key:n}=e,r=[...this.items];if(t===this.container||r.includes(t))switch(n){case`Enter`:e.preventDefault(),this.handleSelect(e);break;case`ArrowDown`:case`ArrowRight`:e.preventDefault(),this.moveFocus(t,1);break;case`ArrowUp`:case`ArrowLeft`:e.preventDefault(),this.moveFocus(t,-1);break;case`Home`:e.preventDefault(),r[0].focus();break;case`End`:e.preventDefault(),r.at(-1).focus()}},{signal:e})}disconnectedCallback(){this.controller.abort()}handleSelect=e=>{let t=e.target;this.items?.forEach(e=>{e instanceof HTMLButtonElement&&e.setAttribute(`aria-checked`,String(e===t))});let n=new CustomEvent(`drop-menu-select`,{bubbles:!0,cancelable:!0,detail:{event:e,target:t}});this.container.dispatchEvent(n),this.closeOnClick&&this.container.togglePopover()};moveFocus=(e,t)=>{let n=[...this.items],r=n.indexOf(e);if(r===-1)return;let i=r;for(let e=0;e<n.length&&(i=(i+t+n.length)%n.length,n[i].getAttribute(`tabindex`)===`-1`);e+=1);n[i]?.focus()};get items(){return this.container.querySelectorAll(`a, button`)}};customElements.get(`mx-dropmenu`)||customElements.define(`mx-dropmenu`,t);export{t};
@@ -0,0 +1 @@
1
+ import{s as e,t}from"./utilities-C5dAO2YA.js";var n=class extends HTMLElement{internals_;controller;headingLevels;title;titleClass=`is-excluded mx-heading--m`;items;active;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController,this.headingLevels=this.dataset?.levels||`h2`,this.title=this.dataset?.title||`On this page`,this.items=[]}connectedCallback(){if(!this.menu||!this.headings)return;if(this.links.length)this.links.forEach(e=>{let t=this.container.querySelector(e.hash);t&&this.items.push({link:e,heading:t})});else{let e=t(`<h2 class="${this.titleClass}">${this.title}</h2>`);this.nav.insertBefore(e,this.menu);let n={};this.headings.forEach(e=>{let t=this.generateListItem(e),r=this.generateAnchor(e,n);this.items.push({link:r,heading:e}),t.appendChild(r),this.menu?.appendChild(t)})}let{signal:e}=this.controller;this.menu.addEventListener(`click`,e=>{let{target:t}=e;t instanceof HTMLAnchorElement&&this.handleClick(t)},{signal:e})}disconnectedCallback(){this.menu&&this.headings&&(this.menu.textContent=``,this.items=[],this.controller.abort())}handleClick=e=>{this.active=this.items.find(t=>t.link===e),this.links&&this.active&&(this.links.forEach(e=>e.classList.remove(`is-active`)),this.active.link.classList.add(`is-active`))};get menu(){let e=this.querySelector(`ul, ol`);if(e)return e;if(!this.nav)throw Error(`${this.localName} must contain a <nav> element.`);if(this.items?.length===0&&this.headings?.length===0)return null;let t=document.createElement(`ul`);return this.nav.appendChild(t),t}get nav(){return this.querySelector(`nav`)}get container(){let e=this.getAttribute(`data-content`);if(!e)throw Error(`${this.localName} must have a [data-content] attribute that contains the content selector.`);return this.closest(e)||this.parentElement.querySelector(e)||document.querySelector(e)}get headings(){return this.container?.querySelectorAll(`:is(${this.headingLevels}):not(.is-excluded)`)}get links(){return this.menu?.querySelectorAll(`a`)}generatedId(t,n){let r=t?.textContent?.trim();if(!r)return``;let i=e(r),a=n[i]??0;return n[i]=a+1,a>0?`${i}-${a}`:i}generateAnchor(e,n){let{textContent:r,id:i}=e,a=e.getAttribute(`data-in-page-navigation-title`)||r,o=i||this.generatedId(e,n);return i||(e.id=o),t(`<a href="#${o}"><span class="mx-icon mx-icon--chevron-right"></span><span>${a}</span></a>`)}generateListItem(e){let{tagName:n}=e;return t(`<li class="mx-in-page-navigation__level--${n.toLowerCase()}"></li>`)}};customElements.get(`mx-in-page-navigation`)||customElements.define(`mx-in-page-navigation`,n);export{n as t};
@@ -0,0 +1 @@
1
+ var e=class extends HTMLElement{internals_;polyfills;constructor(){super(),this.internals_=this.attachInternals()}async connectedCallback(){if(this.container&&this.trigger&&(!(`anchorName`in document.documentElement.style)||!(`popover`in HTMLElement.prototype))){let{default:e}=await import(`./polyfills-C7pRt54M.js`);this.polyfills=new e(this.container)}}disconnectedCallback(){this.polyfills?.destroy()}get container(){let e=this.querySelector(`[popover]`);if(!e)throw Error(`${this.localName} must contain a <div popover> element.`);return e}get trigger(){let e=this.querySelector(`[popovertarget=${this.container?.id}]`);if(!e)throw Error(`${this.localName} must contain a <button popovertarget="${this.container.id}">`);return e}};customElements.get(`mx-popover`)||customElements.define(`mx-popover`,e);export{e as t};
@@ -0,0 +1 @@
1
+ import{t as e}from"./utilities-C5dAO2YA.js";var t=class extends HTMLElement{internals_;iO;rO;offsetPropName;root=null;rootMargin=`0px 0px 0px 0px`;thresholds=[0];constructor(){super(),this.internals_=this.attachInternals()}connectedCallback(){this.offsetPropName=this.getAttribute(`offsetpropname`)||`--sticky-offset`;let e={root:this.root,rootMargin:this.rootMargin,thresholds:this.thresholds};this.iO=new IntersectionObserver(([{boundingClientRect:t}])=>{let n=t.y<0;this.classList.toggle(`is-stuck`,n);let r=new CustomEvent(`sticky-toggle`,{bubbles:!0,cancelable:!0,detail:{isSticky:n,options:e,target:this}});this.dispatchEvent(r)},e),this.iO.observe(this.trigger),this.offsetPropName&&(this.rO=new ResizeObserver(e=>{e.forEach(({borderBoxSize:e})=>{let[{blockSize:t}]=e;document.body.style.setProperty(this.offsetPropName,`${t.toFixed(1)}px`)})}),this.rO.observe(this))}disconnectedCallback(){this.iO.disconnect(),this.rO?.disconnect()}get trigger(){let t=this.querySelector(`.mx-sticky__trigger`);return t||(t=e(`<div class="mx-sticky__trigger"></div>`),this.insertAdjacentElement(`beforebegin`,t)),t}};customElements.get(`mx-sticky`)||customElements.define(`mx-sticky`,t);export{t};
@@ -1,4 +1,4 @@
1
- import{s as e,t}from"./utilities-C5dAO2YA.js";import{t as n}from"./DropMenu-Co9jZZ4S.js";import{PopoverPlacementModifier as r}from"@pnx-mixtape/ids-shape";var i=class extends HTMLElement{internals_;controller;tabs;mq;locationHash;tabFocus=0;tabListClasses;dropTriggerClasses;dropMenuId;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController,this.mq=this.getAttribute(`mq`)||`(max-width: 720px)`}connectedCallback(){if(!this.panels)return;this.locationHash=window.location.hash,this.tabFocus=0,this.tabs=new Map,this.panels.forEach(e=>{let n=e.id,r=`<button type="button" role="tab" aria-controls="${n}" aria-selected="false">${e.getAttribute(`aria-label`)}</button>`,i=t(r);this.tabList.appendChild(i);let a=t(r);this.dropMenuMenu.appendChild(a),n&&e&&a&&this.tabs.set(n,{panel:e,tab:i,button:a})});let{signal:e}=this.controller;this.handleBreakpoint(this.breakpoint),this.breakpoint.addEventListener(`change`,this.handleBreakpoint,{signal:e});let n=this.locationHash?this.querySelector(this.locationHash):null;n?this.active=n.id:this.active||=this.panels[0].id}disconnectedCallback(){this.controller.abort()}handleBreakpoint=({matches:e})=>{let{signal:t}=this.controller;this.dropMenuTrigger.toggleAttribute(`hidden`,!e),this.tabList.toggleAttribute(`hidden`,e),e?(this.dropMenuMenu.addEventListener(`drop-menu-select`,this.handleDropMenuSelect,{signal:t}),this.tabList.removeEventListener(`click`,this.handleClick),this.tabList.removeEventListener(`keydown`,this.handleKeydown)):(this.tabList.addEventListener(`click`,this.handleClick,{signal:t}),this.tabList.addEventListener(`keydown`,this.handleKeydown,{signal:t}),this.dropMenuMenu.removeEventListener(`drop-menu-select`,this.handleDropMenuSelect))};handleKeydown=e=>{let{key:t,target:n}=e,r=[...this.triggers],i=r.indexOf(n);if(i===-1)return;let a=0;switch(t){case`ArrowRight`:a=(i+1)%r.length;break;case`ArrowLeft`:a=(i-1+r.length)%r.length;break;case`Home`:a=0;break;case`End`:a=r.length-1;break;default:return}e.preventDefault(),e.stopPropagation(),r[a].focus()};handleClick=e=>{let t=e.target;if(!(t instanceof HTMLButtonElement))return;e.preventDefault();let n=t.getAttribute(`aria-controls`);this.handleTabChange(n)};handleDropMenuSelect=e=>{let t=e.detail.target;if(!(t instanceof HTMLButtonElement))return;let n=t.getAttribute(`aria-controls`);this.handleTabChange(n)};handleTabChange=e=>{this.active=e,this.handleUrlParams(e);let{panel:t,tab:n,button:r}=this.tabs.get(e);t.focus({preventScroll:!0});let i=new CustomEvent(`tab-toggle`,{bubbles:!0,cancelable:!0,detail:{id:e,tab:n,button:r,panel:t}});this.dispatchEvent(i)};get dropMenu(){let i=this.querySelector(`mx-dropmenu`);if(i)return i;this.dropTriggerClasses=this.getAttribute(`dropTriggerClasses`)||`mx-button mx-icon mx-icon--chevron-down mx-icon--end`,this.dropMenuId=this.id||e(`tab-drop-menu`);let a=`${this.dropMenuId}-target`,o=new n;o.setAttribute(`closeOnClick`,`true`);let s=t(`<button
1
+ import{s as e,t}from"./utilities-C5dAO2YA.js";import{t as n}from"./DropMenu-1baQc8Yc.js";import{PopoverPlacementModifier as r}from"@pnx-mixtape/ids-shape";var i=class extends HTMLElement{internals_;controller;tabs;mq;locationHash;tabFocus=0;tabListClasses;dropTriggerClasses;dropMenuId;constructor(){super(),this.internals_=this.attachInternals(),this.controller=new AbortController,this.mq=this.getAttribute(`mq`)||`(max-width: 720px)`}connectedCallback(){if(!this.panels)return;this.locationHash=window.location.hash,this.tabFocus=0,this.tabs=new Map,this.panels.forEach(e=>{let n=e.id,r=`<button type="button" role="tab" aria-controls="${n}" aria-selected="false">${e.getAttribute(`aria-label`)}</button>`,i=t(r);this.tabList.appendChild(i);let a=t(r);this.dropMenuMenu.appendChild(a),n&&e&&a&&this.tabs.set(n,{panel:e,tab:i,button:a})});let{signal:e}=this.controller;this.handleBreakpoint(this.breakpoint),this.breakpoint.addEventListener(`change`,this.handleBreakpoint,{signal:e});let n=this.locationHash?this.querySelector(this.locationHash):null;n?this.active=n.id:this.active||=this.panels[0].id}disconnectedCallback(){this.controller.abort()}handleBreakpoint=({matches:e})=>{let{signal:t}=this.controller;this.dropMenuTrigger.toggleAttribute(`hidden`,!e),this.tabList.toggleAttribute(`hidden`,e),e?(this.dropMenuMenu.addEventListener(`drop-menu-select`,this.handleDropMenuSelect,{signal:t}),this.tabList.removeEventListener(`click`,this.handleClick),this.tabList.removeEventListener(`keydown`,this.handleKeydown)):(this.tabList.addEventListener(`click`,this.handleClick,{signal:t}),this.tabList.addEventListener(`keydown`,this.handleKeydown,{signal:t}),this.dropMenuMenu.removeEventListener(`drop-menu-select`,this.handleDropMenuSelect))};handleKeydown=e=>{let{key:t,target:n}=e,r=[...this.triggers],i=r.indexOf(n);if(i===-1)return;let a=0;switch(t){case`ArrowRight`:a=(i+1)%r.length;break;case`ArrowLeft`:a=(i-1+r.length)%r.length;break;case`Home`:a=0;break;case`End`:a=r.length-1;break;default:return}e.preventDefault(),e.stopPropagation(),r[a].focus()};handleClick=e=>{let t=e.target;if(!(t instanceof HTMLButtonElement))return;e.preventDefault();let n=t.getAttribute(`aria-controls`);this.handleTabChange(n)};handleDropMenuSelect=e=>{let t=e.detail.target;if(!(t instanceof HTMLButtonElement))return;let n=t.getAttribute(`aria-controls`);this.handleTabChange(n)};handleTabChange=e=>{this.active=e,this.handleUrlParams(e);let{panel:t,tab:n,button:r}=this.tabs.get(e);t.focus({preventScroll:!0});let i=new CustomEvent(`tab-toggle`,{bubbles:!0,cancelable:!0,detail:{id:e,tab:n,button:r,panel:t}});this.dispatchEvent(i)};get dropMenu(){let i=this.querySelector(`mx-dropmenu`);if(i)return i;this.dropTriggerClasses=this.getAttribute(`dropTriggerClasses`)||`mx-button mx-icon mx-icon--chevron-down mx-icon--end`,this.dropMenuId=this.id||e(`tab-drop-menu`);let a=`${this.dropMenuId}-target`,o=new n;o.setAttribute(`closeOnClick`,`true`);let s=t(`<button
2
2
  id="${a}"
3
3
  class="mx-popover__trigger ${this.dropTriggerClasses}"
4
4
  popovertarget="${this.dropMenuId}"
@@ -12,4 +12,4 @@ import{s as e,t}from"./utilities-C5dAO2YA.js";import{t as n}from"./DropMenu-Co9j
12
12
  data-placement="${r.BOTTOM_START}"
13
13
  popover
14
14
  role="tablist"
15
- ></div>`);return o.append(s,c),this.prepend(o),o}get dropMenuMenu(){return this.dropMenu.querySelector(`[popover][role="tablist"]`)}get dropMenuTrigger(){return this.dropMenu.querySelector(`[popovertarget]`)}get tabList(){this.tabListClasses=this.getAttribute(`tabListClasses`)||`mx-tabs__list`;let e=this.querySelector(`[role="tablist"]:not([popover])`);if(e)return e;let n=t(`<div class="${this.tabListClasses}" role="tablist" hidden></div>`);return this.prepend(n),n}get triggers(){let e=this.tabList.querySelectorAll(`[role="tab"]`);if(!e.length)throw Error(`${this.localName} must contain [role="tab"]`);return e}get panels(){let e=this.querySelectorAll(`[data-tab]`);if(!e.length)throw Error(`${this.localName} must contain [data-tab]`);return e.forEach(e=>{e.setAttribute(`role`,`tabpanel`),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-label`,e.getAttribute(`data-tab`))}),e}get active(){return this.querySelector(`[aria-selected="true"]`)}get breakpoint(){return window.matchMedia(this.mq)}set active(e){this.tabs.forEach(({tab:t,panel:n},r)=>{r===e?(t.setAttribute(`aria-selected`,`true`),t.setAttribute(`tabindex`,`0`),n.removeAttribute(`inert`),this.dropMenuTrigger.textContent=t.textContent):(t.setAttribute(`aria-selected`,`false`),t.setAttribute(`tabindex`,`-1`),n.setAttribute(`inert`,``))})}handleUrlParams=e=>{let t=new URLSearchParams(window.location.search);t.get(`tab`)!==e&&(t.set(`tab`,e),window.history.replaceState({},``,`${window.location.pathname}?${t.toString()}`))}};customElements.get(`mx-tabs`)||customElements.define(`mx-tabs`,i);export{i as t};
15
+ ></div>`);return o.append(s,c),this.prepend(o),o}get dropMenuMenu(){return this.dropMenu.querySelector(`[popover][role="tablist"]`)}get dropMenuTrigger(){return this.dropMenu.querySelector(`[popovertarget]`)}get tabList(){this.tabListClasses=this.getAttribute(`tabListClasses`)||`mx-tabs__list`;let e=this.querySelector(`[role="tablist"]:not([popover])`);if(e)return e;let n=t(`<div class="${this.tabListClasses}" role="tablist" hidden></div>`);return this.prepend(n),n}get triggers(){let e=this.tabList.querySelectorAll(`[role="tab"]`);if(!e.length)throw Error(`${this.localName} must contain [role="tab"]`);return e}get panels(){let e=this.querySelectorAll(`[data-tab]`);if(!e.length)throw Error(`${this.localName} must contain [data-tab]`);return e.forEach(e=>{e.setAttribute(`role`,`tabpanel`),e.setAttribute(`tabindex`,`-1`),e.setAttribute(`aria-label`,e.getAttribute(`data-tab`))}),e}get active(){return this.querySelector(`[aria-selected="true"]`)}get breakpoint(){return window.matchMedia(this.mq)}set active(e){this.tabs.forEach(({tab:t,button:n,panel:r},i)=>{i===e?(t.setAttribute(`aria-selected`,`true`),n.setAttribute(`aria-selected`,`true`),t.setAttribute(`tabindex`,`0`),r.removeAttribute(`inert`),this.dropMenuTrigger.textContent=t.textContent):(t.setAttribute(`aria-selected`,`false`),n.setAttribute(`aria-selected`,`false`),t.setAttribute(`tabindex`,`-1`),r.setAttribute(`inert`,``))})}handleUrlParams=e=>{let t=new URLSearchParams(window.location.search);t.get(`tab`)!==e&&(t.set(`tab`,e),window.history.replaceState({},``,`${window.location.pathname}?${t.toString()}`))}};customElements.get(`mx-tabs`)||customElements.define(`mx-tabs`,i);export{i as t};
@@ -0,0 +1 @@
1
+ var e,t=class{constructor(e){this.popover=e,this.trigger=document.querySelector(`[popovertarget="${e.getAttribute(`id`)}"]`),this.init()}init=async()=>{this.trigger&&this.popover&&(this.supportsPopover()||await this.ensurePopoverPolyfill(),this.supportsAnchor()||(this.controller=new AbortController,this.popover.addEventListener(`toggle`,this.positionPopover,{signal:this.controller.signal})))};supportsAnchor=()=>`anchorName`in document.documentElement.style;supportsPopover=()=>`popover`in HTMLElement.prototype;ensurePopoverPolyfill=()=>(e||=import(`@oddbird/popover-polyfill`),e);positionPopover=async({newState:e})=>{if(e===`open`){let{computePosition:e,flip:t,shift:n}=await import(`@floating-ui/dom`);requestAnimationFrame(()=>{e(this.trigger,this.popover,{placement:this.placement||`top`,middleware:[t({padding:10}),n({padding:10})]}).then(({x:e,y:t})=>{this.popover.style.insetInlineStart=`${e}px`,this.popover.style.insetBlockStart=`${t}px`})})}};destroy(){this.controller.abort()}get placement(){return this.popover.getAttribute(`data-placement`)}};export{t as default};
@@ -1 +1 @@
1
- @layer popover-polyfill;@layer design-system.defaults{:root{--colour-primary:#0048ff;--colour-primary-light:color-mix(in oklch, var(--colour-primary), white 90%);--colour-primary-lighter:color-mix(in oklch, var(--colour-primary), white 20%);--colour-primary-darker:color-mix(in oklch, var(--colour-primary), black 20%);--colour-primary-dark:color-mix(in oklch, var(--colour-primary), black 40%);--colour-primary-darkest:color-mix(in oklch, var(--colour-primary), black 50%);--colour-primary-scheme:dark;--colour-accent:#fafa61;--colour-accent-light:color-mix(in oklch, var(--colour-accent), white 90%);--colour-accent-lighter:color-mix(in oklch, var(--colour-accent), white 20%);--colour-accent-darker:color-mix(in oklch, var(--colour-accent), black 10%);--colour-accent-dark:color-mix(in oklch, var(--colour-accent), black 40%);--colour-accent-darkest:color-mix(in oklch, var(--colour-accent), black 50%);--colour-accent-scheme:light;--colour-scheme:light;color-scheme:var(--scheme);--colour-background:light-dark(#fff,#14140b);--colour-background-alt:light-dark(#f6f6ee,#0d0d0d);--colour-foreground:light-dark(#14140b,#fff);--colour-foreground-alt:light-dark(#424224,#9e9e94);--colour-border:light-dark(#dbdbd7,#333);--colour-link:light-dark(#0048ff,#e6edff);--colour-foreground-reverse:light-dark(#fff,#14140b);--colour-background-reverse:light-dark(#14140b,#fff);--colour-reverse-scheme:dark;--colour-error:light-dark(#a80022,oklch(89.2372% .0372404 22.4103));--colour-success:light-dark(#008500,oklch(90.6868% .0363644 142.495));--colour-warning:light-dark(#a35f00,oklch(91.0139% .0249352 63.8851));--colour-info:light-dark(#0048ff,oklch(90.2505% .0545782 263.487));--font-family:system-ui, sans-serif;--type-ratio:1.414;--base-font-size:max(1rem, 16px);--font-size:var(--base-font-size);--font-size-xs:calc(var(--base-font-size) * pow(var(--type-ratio), -.5));--font-size-s:calc(var(--base-font-size) * pow(var(--type-ratio), -.25));--font-size-m:1rem;--font-size-ml:calc(var(--base-font-size) * pow(var(--type-ratio), .5));--font-size-l:calc(var(--base-font-size) * pow(var(--type-ratio), 1));--font-size-xl:calc(var(--base-font-size) * pow(var(--type-ratio), 2));--font-size-xxl:calc(var(--base-font-size) * pow(var(--type-ratio), 3));--font-size-xxxl:calc(var(--base-font-size) * pow(var(--type-ratio), 4));--font-size-diff:.3;--line-height:1.6;--line-height-h:1.2;--line-height-ui:.9rem;--font-weight-normal:400;--font-weight-bold:700;--spacing-xxxxs:.25em;--spacing-xxxs:.5em;--spacing-xxs:.75em;--spacing-xs:.875em;--spacing-s:1em;--spacing-m:1.5em;--spacing-l:2em;--spacing-xl:2.5em;--spacing-xxl:3em;--spacing-xxxl:3.5em;--spacing-xxxxl:3.5em;--spacing-ul:4.5em;--spacing-uul:5em;--spacing-uuul:5.5em;--outline-size:.125rem;--outline-style:solid;--_colour-outline:#0048ff;--outline-color:light-dark(var(--_colour-outline),color-mix(in oklch, var(--_colour-outline), white 90%));--container-max-width-narrow:58ch;--container-max-width:76ch;--gutter-min:1em;--gutter-max:2em;--gap-s:1em;--gap:1.5em;--gap-l:2em;--gap-xl:2.5em;--breakpoint-xs:26.25rem;--breakpoint-s:33.75rem;--breakpoint-m:45rem;--breakpoint-l:59.125rem;--breakpoint-xl:68.75rem;--shadow-color:#21212126;--shadow-size:.875em;--shadow-shape:0 0 var(--shadow-size);--box-shadow:var(--shadow-shape) var(--shadow-color);--border-radius:.25rem;--border-radius-l:2em;--border-radius-round:50%;--ratio:16 / 9;--ease:cubic-bezier(.25, 0, .3, 1)}@media (width<720px){:root{--section-xl:var(--spacing-xxl);--type-ratio:1.2}}}@layer design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@property --scheme{syntax:"light|dark";inherits:true;initial-value:light}@property --contrast-color{syntax:"<color>";inherits:true;initial-value:#000}
1
+ @layer popover-polyfill;@layer design-system.defaults{:root{--colour-primary-light:color-mix(in oklch, var(--colour-primary), white 90%);--colour-primary-lighter:color-mix(in oklch, var(--colour-primary), white 20%);--colour-primary-darker:color-mix(in oklch, var(--colour-primary), black 20%);--colour-primary-dark:color-mix(in oklch, var(--colour-primary), black 40%);--colour-primary-darkest:color-mix(in oklch, var(--colour-primary), black 50%);--colour-primary-scheme:dark;--colour-accent-light:color-mix(in oklch, var(--colour-accent), white 90%);--colour-accent-lighter:color-mix(in oklch, var(--colour-accent), white 20%);--colour-accent-darker:color-mix(in oklch, var(--colour-accent), black 10%);--colour-accent-dark:color-mix(in oklch, var(--colour-accent), black 40%);--colour-accent-darkest:color-mix(in oklch, var(--colour-accent), black 50%);--colour-accent-scheme:light;--colour-scheme:light;color-scheme:var(--scheme);--colour-background:light-dark(#fff,#14140b);--colour-background-alt:light-dark(#f6f6ee,#0d0d0d);--colour-foreground:light-dark(#14140b,#fff);--colour-foreground-alt:light-dark(#424224,#9e9e94);--colour-border:light-dark(#dbdbd7,#333);--colour-link:light-dark(#0048ff,#e6edff);--colour-foreground-reverse:light-dark(#fff,#14140b);--colour-background-reverse:light-dark(#14140b,#fff);--colour-reverse-scheme:dark;--colour-error:light-dark(#a80022,oklch(89.2372% .0372404 22.4103));--colour-success:light-dark(#008500,oklch(90.6868% .0363644 142.495));--colour-warning:light-dark(#a35f00,oklch(91.0139% .0249352 63.8851));--colour-info:light-dark(#0048ff,oklch(90.2505% .0545782 263.487));--font-family:system-ui, sans-serif;--type-ratio:1.414;--base-font-size:max(1rem, 16px);--font-size:var(--base-font-size);--font-size-xs:calc(var(--base-font-size) * pow(var(--type-ratio), -.5));--font-size-s:calc(var(--base-font-size) * pow(var(--type-ratio), -.25));--font-size-m:1rem;--font-size-ml:calc(var(--base-font-size) * pow(var(--type-ratio), .5));--font-size-l:calc(var(--base-font-size) * pow(var(--type-ratio), 1));--font-size-xl:calc(var(--base-font-size) * pow(var(--type-ratio), 2));--font-size-xxl:calc(var(--base-font-size) * pow(var(--type-ratio), 3));--font-size-xxxl:calc(var(--base-font-size) * pow(var(--type-ratio), 4));--font-size-diff:.3;--line-height:1.6;--line-height-h:1.2;--line-height-ui:.9rem;--font-weight-normal:400;--font-weight-bold:700;--spacing-xxxxs:.25em;--spacing-xxxs:.5em;--spacing-xxs:.75em;--spacing-xs:.875em;--spacing-s:1em;--spacing-m:1.5em;--spacing-l:2em;--spacing-xl:2.5em;--spacing-xxl:3em;--spacing-xxxl:3.5em;--spacing-xxxxl:3.5em;--spacing-ul:4.5em;--spacing-uul:5em;--spacing-uuul:5.5em;--outline-size:2px;--outline-style:solid;--_colour-outline:#0048ff;--outline-color:light-dark(var(--_colour-outline),color-mix(in oklch, var(--_colour-outline), white 90%));--container-max-width-narrow:58ch;--container-max-width:76ch;--gutter-min:1em;--gutter-max:2em;--gap-s:1em;--gap:1.5em;--gap-l:2em;--gap-xl:2.5em;--breakpoint-xs:420px;--breakpoint-s:540px;--breakpoint-m:720px;--breakpoint-l:946px;--breakpoint-xl:1100px;--shadow-color:#21212126;--shadow-size:.875em;--shadow-shape:0 0 var(--shadow-size);--box-shadow:var(--shadow-shape) var(--shadow-color);--border-radius:4px;--border-radius-l:2em;--border-radius-round:50%;--ratio:16 / 9;--ease:cubic-bezier(.25, 0, .3, 1)}@media (width<720px){:root{--section-xl:var(--spacing-xxl);--type-ratio:1.2}}}@layer design-system.atoms,design-system.layout,design-system.utilities,design-system.components;@property --scheme{syntax:"light|dark";inherits:true;initial-value:light}@property --contrast-color{syntax:"<color>";inherits:true;initial-value:#000}@property --colour-primary{syntax:"<color>";inherits:true;initial-value:#0048ff}@property --colour-accent{syntax:"<color>";inherits:true;initial-value:#fafa61}
@@ -1 +1 @@
1
- @layer popover-polyfill;@layer design-system.defaults{mx-drop-menu{display:block;&:not(:defined) :where(.mx-drop-menu :is(a,button):not([class])){pointer-events:none;opacity:.7}}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{:where(.mx-drop-menu){--popover-padding:0;--popover-top:0;--outline-offset:-.125rem;& :where(button:not([class])){appearance:none;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;border:unset;text-align:start;background-color:#0000;&[aria-checked=true]{text-decoration-line:underline}}& :where(:is(a,button):not([class])){padding-block:var(--spacing-xxxs);padding-inline:var(--spacing-xs);cursor:pointer;min-inline-size:15ch;display:block}}}
1
+ @layer popover-polyfill;@layer design-system.defaults{mx-drop-menu{display:block;&:not(:defined) :where(.mx-drop-menu :is(a,button):not([class])){pointer-events:none;opacity:.7}}}@layer design-system.atoms,design-system.layout,design-system.utilities;@layer design-system.components{:where(.mx-drop-menu){--popover-padding:0px;--popover-top:0px;--outline-offset:-2px;& :where(button:not([class])){appearance:none;line-height:inherit;font-family:inherit;font-size:inherit;color:inherit;border:unset;text-align:start;background-color:#0000;&[aria-checked=true]{text-decoration-line:underline}}& :where(:is(a,button):not([class])){padding-block:var(--spacing-xxxs);padding-inline:var(--spacing-xs);cursor:pointer;min-inline-size:15ch;display:block}}}