@cyberskill/design 2.0.0 → 2.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (779) hide show
  1. package/DESIGN.md +87 -87
  2. package/README.md +3 -3
  3. package/SECURITY.md +4 -4
  4. package/VERSION +1 -1
  5. package/_ds_bundle.js +2 -2
  6. package/_ds_bundle.js.map +1 -1
  7. package/_ds_manifest.json +143 -143
  8. package/_esm/cs.mjs +2 -2
  9. package/base/collections.css +5 -4
  10. package/base/components.css +8 -7
  11. package/base/controls.css +16 -16
  12. package/base/data.css +5 -5
  13. package/base/feedback.css +5 -3
  14. package/base/forms.css +3 -2
  15. package/base/glass.css +4 -4
  16. package/base/interaction.css +6 -1
  17. package/base/navigation.css +3 -3
  18. package/base/reset.css +2 -0
  19. package/base/shell.css +8 -8
  20. package/base/typography.css +4 -4
  21. package/components/_i18n/strings.js +3 -3
  22. package/components/_utils/open-change.js +18 -0
  23. package/components/ai/ai-conversation.card.html +2 -0
  24. package/components/ai/ai-lumi.card.html +2 -0
  25. package/components/ai/ai.card.html +2 -0
  26. package/components/api-discovery.json +94 -24
  27. package/components/api-index.json +528 -80
  28. package/components/brand/brand.card.html +2 -0
  29. package/components/button/buttons.card.html +2 -0
  30. package/components/contracts.json +23 -9
  31. package/components/data/collections.card.html +2 -0
  32. package/components/data/data.card.html +2 -0
  33. package/components/datatable/DataGrid.jsx +1 -1
  34. package/components/datatable/datatable.card.html +2 -0
  35. package/components/dialog/Dialog.d.ts +3 -0
  36. package/components/dialog/Dialog.jsx +7 -5
  37. package/components/dialog/Dialog.prompt.md +1 -0
  38. package/components/dialog/dialog.card.html +2 -0
  39. package/components/feedback/Alert.d.ts +5 -1
  40. package/components/feedback/Alert.jsx +4 -3
  41. package/components/feedback/Alert.prompt.md +2 -0
  42. package/components/feedback/Toast.d.ts +3 -0
  43. package/components/feedback/Toast.jsx +4 -3
  44. package/components/feedback/Toast.prompt.md +1 -0
  45. package/components/feedback/feedback-2.card.html +2 -0
  46. package/components/feedback/feedback.card.html +2 -0
  47. package/components/forms/forms-2.card.html +2 -0
  48. package/components/forms/forms.card.html +2 -0
  49. package/components/i18n/i18n.card.html +2 -1
  50. package/components/icon/icon.card.html +2 -0
  51. package/components/lifecycle.json +433 -55
  52. package/components/logo/logo.card.html +2 -0
  53. package/components/navigation/CommandPalette.d.ts +4 -1
  54. package/components/navigation/CommandPalette.jsx +6 -5
  55. package/components/navigation/CommandPalette.prompt.md +1 -0
  56. package/components/navigation/Menubar.jsx +2 -2
  57. package/components/navigation/navigation.card.html +2 -0
  58. package/components/navigation/shell.card.html +2 -0
  59. package/components/overlays/Drawer.d.ts +3 -0
  60. package/components/overlays/Drawer.jsx +6 -5
  61. package/components/overlays/Drawer.prompt.md +1 -0
  62. package/components/overlays/Tour.d.ts +3 -0
  63. package/components/overlays/Tour.jsx +8 -5
  64. package/components/overlays/Tour.prompt.md +1 -0
  65. package/components/overlays/alertdialog.card.html +2 -0
  66. package/components/overlays/overlays.card.html +2 -0
  67. package/components/prompt-api.json +17 -10
  68. package/components/scenarios.json +37 -37
  69. package/components/specifications.json +3403 -1401
  70. package/components/static-html-reference.json +36 -36
  71. package/components/textfield/textfield.card.html +2 -0
  72. package/dist/esm/_esm/react.mjs +69 -68
  73. package/dist/esm/build.json +526 -518
  74. package/dist/esm/chunks/{chunk-FEUTSZBN.mjs → chunk-2CCVFTPL.mjs} +2 -2
  75. package/dist/esm/chunks/{chunk-W5VR7GTL.mjs → chunk-2VVGZEOQ.mjs} +2 -2
  76. package/dist/esm/chunks/{chunk-3RC4CDAE.mjs → chunk-3R5WJQCB.mjs} +2 -2
  77. package/dist/esm/chunks/{chunk-W6N22NMF.mjs → chunk-4FGB6VHN.mjs} +2 -2
  78. package/dist/esm/chunks/{chunk-JN57OITY.mjs → chunk-4RSFD6QC.mjs} +10 -7
  79. package/dist/esm/chunks/chunk-4RSFD6QC.mjs.map +7 -0
  80. package/dist/esm/chunks/{chunk-YZR3C7V2.mjs → chunk-4TO35YGK.mjs} +2 -2
  81. package/dist/esm/chunks/{chunk-JSAPFO73.mjs → chunk-4YWKKULF.mjs} +2 -2
  82. package/dist/esm/chunks/{chunk-W2RF4NWB.mjs → chunk-5FQGNCKS.mjs} +2 -2
  83. package/dist/esm/chunks/chunk-65SIJBJX.mjs +22 -0
  84. package/dist/esm/chunks/chunk-65SIJBJX.mjs.map +7 -0
  85. package/dist/esm/chunks/{chunk-SYCXNMYP.mjs → chunk-6ECKJ6RS.mjs} +2 -2
  86. package/dist/esm/chunks/{chunk-CH4W6RCG.mjs → chunk-6H7JYBPI.mjs} +10 -5
  87. package/dist/esm/chunks/chunk-6H7JYBPI.mjs.map +7 -0
  88. package/dist/esm/chunks/{chunk-72AUOI37.mjs → chunk-6TZDNLHE.mjs} +2 -2
  89. package/dist/esm/chunks/{chunk-QGCPHFSI.mjs → chunk-72STPBL4.mjs} +2 -2
  90. package/dist/esm/chunks/{chunk-37AN57S5.mjs → chunk-7GSR2NGL.mjs} +3 -3
  91. package/dist/esm/chunks/{chunk-A3PGQW3X.mjs → chunk-AA5BSO3T.mjs} +2 -2
  92. package/dist/esm/chunks/{chunk-NH6M42ZI.mjs → chunk-ASGO2FW5.mjs} +2 -2
  93. package/dist/esm/chunks/{chunk-GP5ITSCH.mjs → chunk-C3NAMBA7.mjs} +2 -2
  94. package/dist/esm/chunks/{chunk-YA7Y7PEC.mjs → chunk-CKBL3UEA.mjs} +2 -2
  95. package/dist/esm/chunks/{chunk-H7EJ7TNP.mjs → chunk-CYZ22MB7.mjs} +2 -2
  96. package/dist/esm/chunks/{chunk-JRIWHAWW.mjs → chunk-D7A4ZCMJ.mjs} +2 -2
  97. package/dist/esm/chunks/{chunk-A7RWM4XH.mjs → chunk-DANUZS4S.mjs} +2 -2
  98. package/dist/esm/chunks/{chunk-FAVSLU7E.mjs → chunk-DFBKBVSE.mjs} +2 -2
  99. package/dist/esm/chunks/{chunk-TNHQB6CI.mjs → chunk-DW4AWLA5.mjs} +2 -2
  100. package/dist/esm/chunks/{chunk-5R5KMLUR.mjs → chunk-DWJIX65T.mjs} +2 -2
  101. package/dist/esm/chunks/{chunk-YJNSQ5PJ.mjs → chunk-EITZT2U5.mjs} +2 -2
  102. package/dist/esm/chunks/{chunk-CSJHR2W2.mjs → chunk-EOCMQT4L.mjs} +2 -2
  103. package/dist/esm/chunks/{chunk-4QBKN42N.mjs → chunk-EXOOST5G.mjs} +2 -2
  104. package/dist/esm/chunks/{chunk-7HTAAMIY.mjs → chunk-FF5D53IP.mjs} +2 -2
  105. package/dist/esm/chunks/{chunk-JNK7QN24.mjs → chunk-FOEJO2YQ.mjs} +2 -2
  106. package/dist/esm/chunks/{chunk-F3M5TQ76.mjs → chunk-GB6VWFOE.mjs} +11 -6
  107. package/dist/esm/chunks/chunk-GB6VWFOE.mjs.map +7 -0
  108. package/dist/esm/chunks/{chunk-UFE32JPH.mjs → chunk-GHWOEHEX.mjs} +8 -4
  109. package/dist/esm/chunks/chunk-GHWOEHEX.mjs.map +7 -0
  110. package/dist/esm/chunks/{chunk-HYQG5XND.mjs → chunk-GLPQBE2J.mjs} +2 -2
  111. package/dist/esm/chunks/{chunk-HUW6OY7C.mjs → chunk-GNEVR5Q4.mjs} +2 -2
  112. package/dist/esm/chunks/{chunk-SEYKDGXE.mjs → chunk-H4TKHAB3.mjs} +2 -2
  113. package/dist/esm/chunks/{chunk-ANWF2NX3.mjs → chunk-H6HQZ5RI.mjs} +3 -3
  114. package/dist/esm/chunks/{chunk-ANWF2NX3.mjs.map → chunk-H6HQZ5RI.mjs.map} +2 -2
  115. package/dist/esm/chunks/{chunk-OR5UTKW7.mjs → chunk-I3H7EAH5.mjs} +2 -2
  116. package/dist/esm/chunks/{chunk-P64YS5W2.mjs → chunk-I3PQVFX5.mjs} +2 -2
  117. package/dist/esm/chunks/{chunk-5MR3C2QG.mjs → chunk-IOEWPBAL.mjs} +2 -2
  118. package/dist/esm/chunks/{chunk-TN2MZXGS.mjs → chunk-JIHWIDMP.mjs} +2 -2
  119. package/dist/esm/chunks/{chunk-FXELBWXK.mjs → chunk-JTAYZ36C.mjs} +4 -3
  120. package/dist/esm/chunks/{chunk-FXELBWXK.mjs.map → chunk-JTAYZ36C.mjs.map} +2 -2
  121. package/dist/esm/chunks/{chunk-25AOTZAM.mjs → chunk-JZYRXWPD.mjs} +4 -4
  122. package/dist/esm/chunks/{chunk-25AOTZAM.mjs.map → chunk-JZYRXWPD.mjs.map} +2 -2
  123. package/dist/esm/chunks/{chunk-YX62AV33.mjs → chunk-KAOUK33L.mjs} +2 -2
  124. package/dist/esm/chunks/{chunk-UVJ5BBQG.mjs → chunk-KWPNHP73.mjs} +2 -2
  125. package/dist/esm/chunks/{chunk-BABSYWVB.mjs → chunk-LCC4ZVVO.mjs} +2 -2
  126. package/dist/esm/chunks/{chunk-GWBINWTF.mjs → chunk-LWRFPVX7.mjs} +8 -4
  127. package/dist/esm/chunks/chunk-LWRFPVX7.mjs.map +7 -0
  128. package/dist/esm/chunks/{chunk-HVF4NT6P.mjs → chunk-MRXEJSQQ.mjs} +2 -2
  129. package/dist/esm/chunks/{chunk-DIIXA7WD.mjs → chunk-NZKMM4FK.mjs} +2 -2
  130. package/dist/esm/chunks/{chunk-CLWTVJM3.mjs → chunk-OEWAQZYE.mjs} +2 -2
  131. package/dist/esm/chunks/{chunk-IH4I7JSB.mjs → chunk-OILXJXVX.mjs} +10 -7
  132. package/dist/esm/chunks/chunk-OILXJXVX.mjs.map +7 -0
  133. package/dist/esm/chunks/{chunk-OOZKMXYB.mjs → chunk-PBP2MKZH.mjs} +2 -2
  134. package/dist/esm/chunks/{chunk-JKKJHQVQ.mjs → chunk-PE6KC2U7.mjs} +2 -2
  135. package/dist/esm/chunks/{chunk-N5TM7UIY.mjs → chunk-PFTKXY5Q.mjs} +2 -2
  136. package/dist/esm/chunks/{chunk-R7QVE2JP.mjs → chunk-PLN3ITUB.mjs} +2 -2
  137. package/dist/esm/chunks/{chunk-NEMFYL4X.mjs → chunk-QBPDNM7S.mjs} +2 -2
  138. package/dist/esm/chunks/{chunk-JDI3UMJW.mjs → chunk-SIMVM4RV.mjs} +2 -2
  139. package/dist/esm/chunks/{chunk-WJF2Q2Y3.mjs → chunk-TMXLSCAG.mjs} +2 -2
  140. package/dist/esm/chunks/{chunk-TGYG7JP4.mjs → chunk-TNQXCIBM.mjs} +2 -2
  141. package/dist/esm/chunks/{chunk-DHTD5KM5.mjs → chunk-TWCJMLGG.mjs} +2 -2
  142. package/dist/esm/chunks/{chunk-EPFDMHPK.mjs → chunk-U7RKPGRO.mjs} +2 -2
  143. package/dist/esm/chunks/{chunk-NMIGE2IM.mjs → chunk-UWNMGKAN.mjs} +2 -2
  144. package/dist/esm/chunks/{chunk-KXFGO7N4.mjs → chunk-VAPKJRQI.mjs} +2 -2
  145. package/dist/esm/chunks/{chunk-XTBN55D3.mjs → chunk-VUCJT2QJ.mjs} +2 -2
  146. package/dist/esm/chunks/{chunk-TVTBVHT2.mjs → chunk-WLANQTOU.mjs} +2 -2
  147. package/dist/esm/chunks/{chunk-3MCNCG2L.mjs → chunk-XZ5NWMO7.mjs} +2 -2
  148. package/dist/esm/chunks/{chunk-QPXQZBQC.mjs → chunk-YKU2KVAQ.mjs} +2 -2
  149. package/dist/esm/chunks/{chunk-ZKFOGW4D.mjs → chunk-YLSFKG64.mjs} +2 -2
  150. package/dist/esm/chunks/{chunk-TO2T6EEB.mjs → chunk-YVSAUCWW.mjs} +3 -3
  151. package/dist/esm/chunks/{chunk-XN74VX5H.mjs → chunk-ZKBAIIAQ.mjs} +2 -2
  152. package/dist/esm/chunks/{chunk-7IJTTRPK.mjs → chunk-ZPLENPV2.mjs} +2 -2
  153. package/dist/esm/components/ai/AIDisclosureBadge.mjs +2 -2
  154. package/dist/esm/components/ai/ChatMessage.mjs +2 -2
  155. package/dist/esm/components/ai/CitationList.mjs +2 -2
  156. package/dist/esm/components/ai/ConfidenceMeter.mjs +2 -2
  157. package/dist/esm/components/ai/HumanReviewGate.mjs +2 -2
  158. package/dist/esm/components/ai/PromptInput.mjs +2 -2
  159. package/dist/esm/components/ai/TypingIndicator.mjs +2 -2
  160. package/dist/esm/components/data/Carousel.mjs +2 -2
  161. package/dist/esm/components/data/Chart.mjs +2 -2
  162. package/dist/esm/components/data/CodeBlock.mjs +2 -2
  163. package/dist/esm/components/data/Comment.mjs +2 -2
  164. package/dist/esm/components/data/Image.mjs +2 -2
  165. package/dist/esm/components/data/Sortable.mjs +2 -2
  166. package/dist/esm/components/data/Splitter.mjs +2 -2
  167. package/dist/esm/components/data/Terminal.mjs +2 -2
  168. package/dist/esm/components/data/Tooltip.mjs +2 -2
  169. package/dist/esm/components/datatable/DataGrid.mjs +2 -2
  170. package/dist/esm/components/datatable/DataTable.mjs +3 -3
  171. package/dist/esm/components/datatable/TreeTable.mjs +2 -2
  172. package/dist/esm/components/dialog/Dialog.mjs +3 -2
  173. package/dist/esm/components/feedback/Alert.mjs +3 -2
  174. package/dist/esm/components/feedback/EmptyState.mjs +2 -2
  175. package/dist/esm/components/feedback/ProgressBar.mjs +2 -2
  176. package/dist/esm/components/feedback/Result.mjs +2 -2
  177. package/dist/esm/components/feedback/Spinner.mjs +2 -2
  178. package/dist/esm/components/feedback/Tag.mjs +2 -2
  179. package/dist/esm/components/feedback/Toast.mjs +3 -2
  180. package/dist/esm/components/forms/Calendar.mjs +2 -2
  181. package/dist/esm/components/forms/Cascader.mjs +2 -2
  182. package/dist/esm/components/forms/ColorPicker.mjs +2 -2
  183. package/dist/esm/components/forms/Combobox.mjs +2 -2
  184. package/dist/esm/components/forms/DatePicker.mjs +3 -3
  185. package/dist/esm/components/forms/Editor.mjs +2 -2
  186. package/dist/esm/components/forms/FileUpload.mjs +2 -2
  187. package/dist/esm/components/forms/Form.mjs +2 -2
  188. package/dist/esm/components/forms/InlineEdit.mjs +2 -2
  189. package/dist/esm/components/forms/InputGroup.mjs +2 -2
  190. package/dist/esm/components/forms/InputOTP.mjs +2 -2
  191. package/dist/esm/components/forms/Mentions.mjs +2 -2
  192. package/dist/esm/components/forms/NumberField.mjs +2 -2
  193. package/dist/esm/components/forms/Rating.mjs +2 -2
  194. package/dist/esm/components/forms/SearchField.mjs +2 -2
  195. package/dist/esm/components/forms/Select.mjs +2 -2
  196. package/dist/esm/components/forms/Slider.mjs +2 -2
  197. package/dist/esm/components/forms/Switch.mjs +2 -2
  198. package/dist/esm/components/forms/TagInput.mjs +2 -2
  199. package/dist/esm/components/forms/TimePicker.mjs +2 -2
  200. package/dist/esm/components/forms/Toggle.mjs +2 -2
  201. package/dist/esm/components/forms/Transfer.mjs +2 -2
  202. package/dist/esm/components/forms/TreeSelect.mjs +2 -2
  203. package/dist/esm/components/i18n/LocaleProvider.mjs +2 -2
  204. package/dist/esm/components/navigation/BackTop.mjs +2 -2
  205. package/dist/esm/components/navigation/Breadcrumb.mjs +2 -2
  206. package/dist/esm/components/navigation/CommandPalette.mjs +3 -2
  207. package/dist/esm/components/navigation/HotKeys.mjs +2 -2
  208. package/dist/esm/components/navigation/Menu.mjs +2 -2
  209. package/dist/esm/components/navigation/Menubar.mjs +2 -2
  210. package/dist/esm/components/navigation/Pagination.mjs +2 -2
  211. package/dist/esm/components/navigation/Steps.mjs +2 -2
  212. package/dist/esm/components/navigation/Tabs.mjs +2 -2
  213. package/dist/esm/components/navigation/Toolbar.mjs +2 -2
  214. package/dist/esm/components/overlays/AlertDialog.mjs +2 -2
  215. package/dist/esm/components/overlays/ContextMenu.mjs +2 -2
  216. package/dist/esm/components/overlays/Drawer.mjs +3 -2
  217. package/dist/esm/components/overlays/Popconfirm.mjs +2 -2
  218. package/dist/esm/components/overlays/Popover.mjs +2 -2
  219. package/dist/esm/components/overlays/Tour.mjs +3 -2
  220. package/dist/styles.min.css +1 -1
  221. package/docs/ci-cd.md +1 -1
  222. package/docs/component-api.md +1 -1
  223. package/docs/consuming.md +1 -1
  224. package/docs/contrast-report.md +196 -1
  225. package/docs/conventions.md +1 -1
  226. package/docs/design-styles.md +1 -1
  227. package/docs/manual-at-matrix.md +2 -0
  228. package/docs/quality-gates.md +2 -1
  229. package/docs/reference-catalog.json +81 -81
  230. package/docs/release-notes.md +1 -1
  231. package/docs/static-html-reference.md +27 -27
  232. package/docs/template-inventory.json +162 -162
  233. package/docs/vi/ci-cd.md +1 -1
  234. package/docs/vi/component-api.md +1 -1
  235. package/docs/vi/consuming.md +1 -1
  236. package/docs/vi/contrast-report.md +196 -1
  237. package/docs/vi/conventions.md +1 -1
  238. package/docs/vi/decisions/component-specification-evidence.md +1 -1
  239. package/docs/vi/decisions/token-alias-compatibility.md +1 -1
  240. package/docs/vi/design-styles.md +1 -1
  241. package/docs/vi/entrypoints/DESIGN.md +87 -87
  242. package/docs/vi/entrypoints/README.md +3 -3
  243. package/docs/vi/manual-at-matrix.md +2 -0
  244. package/docs/vi/quality-gates.md +2 -1
  245. package/docs/vi/release-notes.md +1 -1
  246. package/docs/vi/static-html-reference.md +27 -27
  247. package/docs/viewer.html +9 -12
  248. package/guidelines/atomic-view.html +39 -34
  249. package/guidelines/brand-iconography.html +33 -32
  250. package/guidelines/brand-imagery.html +2 -1
  251. package/guidelines/brand-interaction.html +3 -2
  252. package/guidelines/brand-voice.html +2 -1
  253. package/guidelines/colors-anchors.html +2 -1
  254. package/guidelines/colors-semantic.html +2 -1
  255. package/guidelines/colors-surfaces.html +2 -1
  256. package/guidelines/colors-text.html +2 -1
  257. package/guidelines/documents.html +3 -2
  258. package/guidelines/elements-components.html +4 -3
  259. package/guidelines/elements-concept.html +3 -2
  260. package/guidelines/elements-geometry.html +4 -3
  261. package/guidelines/elements-variants.html +18 -17
  262. package/guidelines/guideline-language.js +1 -1
  263. package/guidelines/motion-interaction.html +2 -1
  264. package/guidelines/motion.html +12 -13
  265. package/guidelines/responsive-bilingual.html +7 -6
  266. package/guidelines/rtl-preview.html +2 -2
  267. package/guidelines/spacing-breakpoints.html +2 -1
  268. package/guidelines/spacing-radius.html +4 -3
  269. package/guidelines/spacing-scale.html +2 -1
  270. package/guidelines/surfaces-aurora.html +2 -1
  271. package/guidelines/surfaces-depth.html +3 -2
  272. package/guidelines/surfaces-glass.html +2 -1
  273. package/guidelines/surfaces-shadow.html +2 -1
  274. package/guidelines/type-families.html +2 -1
  275. package/guidelines/type-lineheight.html +2 -1
  276. package/guidelines/type-scale.html +2 -1
  277. package/guidelines/type-weights.html +2 -1
  278. package/package.json +4 -2
  279. package/styles/components/manifest.json +156 -148
  280. package/styles.layered.css +492 -485
  281. package/styles.layered.provenance.json +17 -17
  282. package/templates/_vendor/deck-stage.js +3 -3
  283. package/templates/_vendor/doc-export.js +1 -1
  284. package/templates/_vendor/support.js +1 -1
  285. package/templates/ai-cluster-demo.html +2 -1
  286. package/templates/app-shell/AppShell.dc.html +2 -1
  287. package/templates/app-shell/support.js +1 -1
  288. package/templates/article/Article.dc.html +2 -1
  289. package/templates/article/support.js +1 -1
  290. package/templates/auth/Auth.dc.html +2 -1
  291. package/templates/auth/support.js +1 -1
  292. package/templates/bod-deck/BodDeck.dc.html +1 -0
  293. package/templates/bod-deck/support.js +1 -1
  294. package/templates/bod-investor-update/BodInvestorUpdate.dc.html +1 -0
  295. package/templates/bod-investor-update/support.js +1 -1
  296. package/templates/bod-memo/support.js +1 -1
  297. package/templates/bod-minutes/BodMinutes.dc.html +1 -0
  298. package/templates/bod-minutes/support.js +1 -1
  299. package/templates/bod-report/BodReport.dc.html +1 -0
  300. package/templates/bod-report/support.js +1 -1
  301. package/templates/bod-resolution/BodResolution.dc.html +1 -0
  302. package/templates/bod-resolution/support.js +1 -1
  303. package/templates/culture-event-invite/CultureEventInvite.dc.html +1 -0
  304. package/templates/culture-event-invite/support.js +1 -1
  305. package/templates/dashboard/Dashboard.dc.html +2 -1
  306. package/templates/dashboard/support.js +1 -1
  307. package/templates/delivery-change-note/DeliveryChangeNote.dc.html +1 -0
  308. package/templates/delivery-change-note/support.js +1 -1
  309. package/templates/delivery-kickoff/DeliveryKickoff.dc.html +1 -0
  310. package/templates/delivery-kickoff/support.js +1 -1
  311. package/templates/delivery-qbr-deck/DeliveryQbrDeck.dc.html +3 -2
  312. package/templates/delivery-qbr-deck/support.js +1 -1
  313. package/templates/delivery-runbook/DeliveryRunbook.dc.html +1 -0
  314. package/templates/delivery-runbook/support.js +1 -1
  315. package/templates/delivery-status-email/support.js +1 -1
  316. package/templates/doc-style-guide/DocStyleGuide.dc.html +1 -0
  317. package/templates/doc-style-guide/support.js +1 -1
  318. package/templates/doc-suite-index/DocSuiteIndex.dc.html +1 -0
  319. package/templates/doc-suite-index/support.js +1 -1
  320. package/templates/doc-templates/support.js +1 -1
  321. package/templates/email/Email-VN-standalone.html +2 -1
  322. package/templates/email/support.js +1 -1
  323. package/templates/email-safe/email-announcement.html +2 -1
  324. package/templates/email-safe/email-dunning.html +2 -1
  325. package/templates/email-safe/email-investor.html +2 -1
  326. package/templates/email-safe/email-launch.html +2 -1
  327. package/templates/email-safe/email-newsletter.html +2 -1
  328. package/templates/email-safe/email-status.html +2 -1
  329. package/templates/email-safe/email-transactional.html +2 -1
  330. package/templates/finance-dunning-email/support.js +1 -1
  331. package/templates/finance-expense-report/support.js +1 -1
  332. package/templates/finance-invoice/support.js +1 -1
  333. package/templates/finance-quote/support.js +1 -1
  334. package/templates/hr-announcement/support.js +1 -1
  335. package/templates/hr-interview-kit/HrInterviewKit.dc.html +1 -0
  336. package/templates/hr-interview-kit/support.js +1 -1
  337. package/templates/hr-offboarding/HrOffboarding.dc.html +1 -0
  338. package/templates/hr-offboarding/support.js +1 -1
  339. package/templates/hr-performance-review/HrPerformanceReview.dc.html +1 -0
  340. package/templates/hr-performance-review/support.js +1 -1
  341. package/templates/hr-pip/HrPip.dc.html +1 -0
  342. package/templates/hr-pip/support.js +1 -1
  343. package/templates/image-slots-demo.html +11 -9
  344. package/templates/kitchen-sink.html +8 -4
  345. package/templates/legal-msa/LegalMsa.dc.html +1 -0
  346. package/templates/legal-msa/support.js +1 -1
  347. package/templates/legal-sow/support.js +1 -1
  348. package/templates/marketing-campaign-brief/MarketingCampaignBrief.dc.html +1 -0
  349. package/templates/marketing-campaign-brief/support.js +1 -1
  350. package/templates/marketing-case-study/MarketingCaseStudy.dc.html +1 -0
  351. package/templates/marketing-case-study/support.js +1 -1
  352. package/templates/marketing-launch/support.js +1 -1
  353. package/templates/marketing-newsletter/support.js +1 -1
  354. package/templates/marketing-page/MarketingPage.dc.html +6 -3
  355. package/templates/marketing-page/support.js +1 -1
  356. package/templates/marketing-press-release/MarketingPressRelease.dc.html +2 -1
  357. package/templates/marketing-press-release/support.js +1 -1
  358. package/templates/marketing-social-kit/MarketingSocialKit.dc.html +1 -0
  359. package/templates/marketing-social-kit/support.js +1 -1
  360. package/templates/playground.html +9 -7
  361. package/templates/sales-one-pager/SalesOnePager.dc.html +1 -0
  362. package/templates/sales-one-pager/support.js +1 -1
  363. package/templates/sales-proposal-deck/SalesProposalDeck.dc.html +1 -0
  364. package/templates/sales-proposal-deck/support.js +1 -1
  365. package/templates/settings/Settings.dc.html +2 -1
  366. package/templates/settings/support.js +1 -1
  367. package/templates/slide-deck/SlideDeck.dc.html +1 -0
  368. package/templates/slide-deck/support.js +1 -1
  369. package/templates/team-meeting-agenda/TeamMeetingAgenda.dc.html +1 -0
  370. package/templates/team-meeting-agenda/support.js +1 -1
  371. package/templates/tech-incident-report/TechIncidentReport.dc.html +1 -0
  372. package/templates/tech-incident-report/support.js +1 -1
  373. package/templates/tech-release-notes/support.js +1 -1
  374. package/templates/tech-retro/TechRetro.dc.html +1 -0
  375. package/templates/tech-retro/support.js +1 -1
  376. package/templates/tech-rfc/TechRfc.dc.html +2 -1
  377. package/templates/tech-rfc/support.js +1 -1
  378. package/templates/vn-appointment-transfer/support.js +1 -1
  379. package/templates/vn-certificate-of-employment/support.js +1 -1
  380. package/templates/vn-code-of-conduct/support.js +1 -1
  381. package/templates/vn-compensation-regulation/support.js +1 -1
  382. package/templates/vn-contract-amendment/support.js +1 -1
  383. package/templates/vn-contractor-agreement/support.js +1 -1
  384. package/templates/vn-data-protection-policy/support.js +1 -1
  385. package/templates/vn-disciplinary-case-file/support.js +1 -1
  386. package/templates/vn-disciplinary-schedule/VnDisciplinarySchedule.dc.html +1 -0
  387. package/templates/vn-disciplinary-schedule/support.js +1 -1
  388. package/templates/vn-employee-request/support.js +1 -1
  389. package/templates/vn-exit-handover/support.js +1 -1
  390. package/templates/vn-foreign-employee-pack/VnForeignEmployeePack.dc.html +1 -0
  391. package/templates/vn-foreign-employee-pack/support.js +1 -1
  392. package/templates/vn-framework-agreement/support.js +1 -1
  393. package/templates/vn-grassroots-democracy/support.js +1 -1
  394. package/templates/vn-infosec-policy/support.js +1 -1
  395. package/templates/vn-internal-labor-regulations/support.js +1 -1
  396. package/templates/vn-internship-agreement/support.js +1 -1
  397. package/templates/vn-job-description/support.js +1 -1
  398. package/templates/vn-labor-contract/support.js +1 -1
  399. package/templates/vn-labour-management-book/VnLabourManagementBook.dc.html +1 -0
  400. package/templates/vn-labour-management-book/support.js +1 -1
  401. package/templates/vn-mutual-nda/support.js +1 -1
  402. package/templates/vn-ndnca-ip/support.js +1 -1
  403. package/templates/vn-offer-letter/support.js +1 -1
  404. package/templates/vn-onboarding-checklist/VnOnboardingChecklist.dc.html +1 -0
  405. package/templates/vn-onboarding-checklist/support.js +1 -1
  406. package/templates/vn-pdpl-consent/support.js +1 -1
  407. package/templates/vn-performance-evaluation-regulation/support.js +1 -1
  408. package/templates/vn-performance-review-form/support.js +1 -1
  409. package/templates/vn-phantom-stock/VnPhantomStock.dc.html +1 -0
  410. package/templates/vn-phantom-stock/support.js +1 -1
  411. package/templates/vn-probation-contract/support.js +1 -1
  412. package/templates/vn-receipt-acknowledgement/VnReceiptAcknowledgement.dc.html +1 -0
  413. package/templates/vn-receipt-acknowledgement/support.js +1 -1
  414. package/templates/vn-remote-work-policy/support.js +1 -1
  415. package/templates/vn-resignation-letter/support.js +1 -1
  416. package/templates/vn-salary-scale/VnSalaryScale.dc.html +1 -0
  417. package/templates/vn-salary-scale/support.js +1 -1
  418. package/templates/vn-sow-appendix/support.js +1 -1
  419. package/templates/vn-termination-decision/support.js +1 -1
  420. package/templates/vn-total-rewards-appendix/support.js +1 -1
  421. package/templates/vn-training-commitment/support.js +1 -1
  422. package/templates/vn-travel-expense-policy/support.js +1 -1
  423. package/tokens/base-inventory.json +22 -22
  424. package/tokens/component-tokens.css +38 -38
  425. package/tokens/declarations.json +490 -490
  426. package/tokens/element-seeds.json +41 -39
  427. package/tokens/elements.css +381 -381
  428. package/tokens/modes/dark__default__comfortable__high.dtcg.json +1 -1
  429. package/tokens/modes/dark__default__comfortable__standard.dtcg.json +1 -1
  430. package/tokens/modes/dark__default__compact__high.dtcg.json +1 -1
  431. package/tokens/modes/dark__default__compact__standard.dtcg.json +1 -1
  432. package/tokens/modes/dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  433. package/tokens/modes/dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  434. package/tokens/modes/dark__hoa-lava__compact__high.dtcg.json +1 -1
  435. package/tokens/modes/dark__hoa-lava__compact__standard.dtcg.json +1 -1
  436. package/tokens/modes/dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  437. package/tokens/modes/dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  438. package/tokens/modes/dark__hoa-plasma__compact__high.dtcg.json +1 -1
  439. package/tokens/modes/dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  440. package/tokens/modes/dark__hoa__comfortable__high.dtcg.json +1 -1
  441. package/tokens/modes/dark__hoa__comfortable__standard.dtcg.json +1 -1
  442. package/tokens/modes/dark__hoa__compact__high.dtcg.json +1 -1
  443. package/tokens/modes/dark__hoa__compact__standard.dtcg.json +1 -1
  444. package/tokens/modes/dark__kim-steel__comfortable__high.dtcg.json +1 -1
  445. package/tokens/modes/dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  446. package/tokens/modes/dark__kim-steel__compact__high.dtcg.json +1 -1
  447. package/tokens/modes/dark__kim-steel__compact__standard.dtcg.json +1 -1
  448. package/tokens/modes/dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  449. package/tokens/modes/dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  450. package/tokens/modes/dark__kim-titanium__compact__high.dtcg.json +1 -1
  451. package/tokens/modes/dark__kim-titanium__compact__standard.dtcg.json +1 -1
  452. package/tokens/modes/dark__kim__comfortable__high.dtcg.json +1 -1
  453. package/tokens/modes/dark__kim__comfortable__standard.dtcg.json +1 -1
  454. package/tokens/modes/dark__kim__compact__high.dtcg.json +1 -1
  455. package/tokens/modes/dark__kim__compact__standard.dtcg.json +1 -1
  456. package/tokens/modes/dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  457. package/tokens/modes/dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  458. package/tokens/modes/dark__moc-bamboo__compact__high.dtcg.json +1 -1
  459. package/tokens/modes/dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  460. package/tokens/modes/dark__moc-forest__comfortable__high.dtcg.json +1 -1
  461. package/tokens/modes/dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  462. package/tokens/modes/dark__moc-forest__compact__high.dtcg.json +1 -1
  463. package/tokens/modes/dark__moc-forest__compact__standard.dtcg.json +1 -1
  464. package/tokens/modes/dark__moc__comfortable__high.dtcg.json +1 -1
  465. package/tokens/modes/dark__moc__comfortable__standard.dtcg.json +1 -1
  466. package/tokens/modes/dark__moc__compact__high.dtcg.json +1 -1
  467. package/tokens/modes/dark__moc__compact__standard.dtcg.json +1 -1
  468. package/tokens/modes/dark__tho-clay__comfortable__high.dtcg.json +1 -1
  469. package/tokens/modes/dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  470. package/tokens/modes/dark__tho-clay__compact__high.dtcg.json +1 -1
  471. package/tokens/modes/dark__tho-clay__compact__standard.dtcg.json +1 -1
  472. package/tokens/modes/dark__tho-sand__comfortable__high.dtcg.json +1 -1
  473. package/tokens/modes/dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  474. package/tokens/modes/dark__tho-sand__compact__high.dtcg.json +1 -1
  475. package/tokens/modes/dark__tho-sand__compact__standard.dtcg.json +1 -1
  476. package/tokens/modes/dark__tho__comfortable__high.dtcg.json +1 -1
  477. package/tokens/modes/dark__tho__comfortable__standard.dtcg.json +1 -1
  478. package/tokens/modes/dark__tho__compact__high.dtcg.json +1 -1
  479. package/tokens/modes/dark__tho__compact__standard.dtcg.json +1 -1
  480. package/tokens/modes/dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  481. package/tokens/modes/dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  482. package/tokens/modes/dark__thuy-mist__compact__high.dtcg.json +1 -1
  483. package/tokens/modes/dark__thuy-mist__compact__standard.dtcg.json +1 -1
  484. package/tokens/modes/dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  485. package/tokens/modes/dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  486. package/tokens/modes/dark__thuy-ocean__compact__high.dtcg.json +1 -1
  487. package/tokens/modes/dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  488. package/tokens/modes/dark__thuy__comfortable__high.dtcg.json +1 -1
  489. package/tokens/modes/dark__thuy__comfortable__standard.dtcg.json +1 -1
  490. package/tokens/modes/dark__thuy__compact__high.dtcg.json +1 -1
  491. package/tokens/modes/dark__thuy__compact__standard.dtcg.json +1 -1
  492. package/tokens/modes/index.json +2068 -2068
  493. package/tokens/modes/light__default__comfortable__high.dtcg.json +1 -1
  494. package/tokens/modes/light__default__comfortable__standard.dtcg.json +1 -1
  495. package/tokens/modes/light__default__compact__high.dtcg.json +1 -1
  496. package/tokens/modes/light__default__compact__standard.dtcg.json +1 -1
  497. package/tokens/modes/light__hoa-lava__comfortable__high.dtcg.json +1 -1
  498. package/tokens/modes/light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  499. package/tokens/modes/light__hoa-lava__compact__high.dtcg.json +1 -1
  500. package/tokens/modes/light__hoa-lava__compact__standard.dtcg.json +1 -1
  501. package/tokens/modes/light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  502. package/tokens/modes/light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  503. package/tokens/modes/light__hoa-plasma__compact__high.dtcg.json +1 -1
  504. package/tokens/modes/light__hoa-plasma__compact__standard.dtcg.json +1 -1
  505. package/tokens/modes/light__hoa__comfortable__high.dtcg.json +1 -1
  506. package/tokens/modes/light__hoa__comfortable__standard.dtcg.json +1 -1
  507. package/tokens/modes/light__hoa__compact__high.dtcg.json +1 -1
  508. package/tokens/modes/light__hoa__compact__standard.dtcg.json +1 -1
  509. package/tokens/modes/light__kim-steel__comfortable__high.dtcg.json +1 -1
  510. package/tokens/modes/light__kim-steel__comfortable__standard.dtcg.json +1 -1
  511. package/tokens/modes/light__kim-steel__compact__high.dtcg.json +1 -1
  512. package/tokens/modes/light__kim-steel__compact__standard.dtcg.json +1 -1
  513. package/tokens/modes/light__kim-titanium__comfortable__high.dtcg.json +1 -1
  514. package/tokens/modes/light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  515. package/tokens/modes/light__kim-titanium__compact__high.dtcg.json +1 -1
  516. package/tokens/modes/light__kim-titanium__compact__standard.dtcg.json +1 -1
  517. package/tokens/modes/light__kim__comfortable__high.dtcg.json +1 -1
  518. package/tokens/modes/light__kim__comfortable__standard.dtcg.json +1 -1
  519. package/tokens/modes/light__kim__compact__high.dtcg.json +1 -1
  520. package/tokens/modes/light__kim__compact__standard.dtcg.json +1 -1
  521. package/tokens/modes/light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  522. package/tokens/modes/light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  523. package/tokens/modes/light__moc-bamboo__compact__high.dtcg.json +1 -1
  524. package/tokens/modes/light__moc-bamboo__compact__standard.dtcg.json +1 -1
  525. package/tokens/modes/light__moc-forest__comfortable__high.dtcg.json +1 -1
  526. package/tokens/modes/light__moc-forest__comfortable__standard.dtcg.json +1 -1
  527. package/tokens/modes/light__moc-forest__compact__high.dtcg.json +1 -1
  528. package/tokens/modes/light__moc-forest__compact__standard.dtcg.json +1 -1
  529. package/tokens/modes/light__moc__comfortable__high.dtcg.json +1 -1
  530. package/tokens/modes/light__moc__comfortable__standard.dtcg.json +1 -1
  531. package/tokens/modes/light__moc__compact__high.dtcg.json +1 -1
  532. package/tokens/modes/light__moc__compact__standard.dtcg.json +1 -1
  533. package/tokens/modes/light__tho-clay__comfortable__high.dtcg.json +1 -1
  534. package/tokens/modes/light__tho-clay__comfortable__standard.dtcg.json +1 -1
  535. package/tokens/modes/light__tho-clay__compact__high.dtcg.json +1 -1
  536. package/tokens/modes/light__tho-clay__compact__standard.dtcg.json +1 -1
  537. package/tokens/modes/light__tho-sand__comfortable__high.dtcg.json +1 -1
  538. package/tokens/modes/light__tho-sand__comfortable__standard.dtcg.json +1 -1
  539. package/tokens/modes/light__tho-sand__compact__high.dtcg.json +1 -1
  540. package/tokens/modes/light__tho-sand__compact__standard.dtcg.json +1 -1
  541. package/tokens/modes/light__tho__comfortable__high.dtcg.json +1 -1
  542. package/tokens/modes/light__tho__comfortable__standard.dtcg.json +1 -1
  543. package/tokens/modes/light__tho__compact__high.dtcg.json +1 -1
  544. package/tokens/modes/light__tho__compact__standard.dtcg.json +1 -1
  545. package/tokens/modes/light__thuy-mist__comfortable__high.dtcg.json +1 -1
  546. package/tokens/modes/light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  547. package/tokens/modes/light__thuy-mist__compact__high.dtcg.json +1 -1
  548. package/tokens/modes/light__thuy-mist__compact__standard.dtcg.json +1 -1
  549. package/tokens/modes/light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  550. package/tokens/modes/light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  551. package/tokens/modes/light__thuy-ocean__compact__high.dtcg.json +1 -1
  552. package/tokens/modes/light__thuy-ocean__compact__standard.dtcg.json +1 -1
  553. package/tokens/modes/light__thuy__comfortable__high.dtcg.json +1 -1
  554. package/tokens/modes/light__thuy__comfortable__standard.dtcg.json +1 -1
  555. package/tokens/modes/light__thuy__compact__high.dtcg.json +1 -1
  556. package/tokens/modes/light__thuy__compact__standard.dtcg.json +1 -1
  557. package/tokens/modes/system-dark__default__comfortable__high.dtcg.json +1 -1
  558. package/tokens/modes/system-dark__default__comfortable__standard.dtcg.json +1 -1
  559. package/tokens/modes/system-dark__default__compact__high.dtcg.json +1 -1
  560. package/tokens/modes/system-dark__default__compact__standard.dtcg.json +1 -1
  561. package/tokens/modes/system-dark__hoa-lava__comfortable__high.dtcg.json +1 -1
  562. package/tokens/modes/system-dark__hoa-lava__comfortable__standard.dtcg.json +1 -1
  563. package/tokens/modes/system-dark__hoa-lava__compact__high.dtcg.json +1 -1
  564. package/tokens/modes/system-dark__hoa-lava__compact__standard.dtcg.json +1 -1
  565. package/tokens/modes/system-dark__hoa-plasma__comfortable__high.dtcg.json +1 -1
  566. package/tokens/modes/system-dark__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  567. package/tokens/modes/system-dark__hoa-plasma__compact__high.dtcg.json +1 -1
  568. package/tokens/modes/system-dark__hoa-plasma__compact__standard.dtcg.json +1 -1
  569. package/tokens/modes/system-dark__hoa__comfortable__high.dtcg.json +1 -1
  570. package/tokens/modes/system-dark__hoa__comfortable__standard.dtcg.json +1 -1
  571. package/tokens/modes/system-dark__hoa__compact__high.dtcg.json +1 -1
  572. package/tokens/modes/system-dark__hoa__compact__standard.dtcg.json +1 -1
  573. package/tokens/modes/system-dark__kim-steel__comfortable__high.dtcg.json +1 -1
  574. package/tokens/modes/system-dark__kim-steel__comfortable__standard.dtcg.json +1 -1
  575. package/tokens/modes/system-dark__kim-steel__compact__high.dtcg.json +1 -1
  576. package/tokens/modes/system-dark__kim-steel__compact__standard.dtcg.json +1 -1
  577. package/tokens/modes/system-dark__kim-titanium__comfortable__high.dtcg.json +1 -1
  578. package/tokens/modes/system-dark__kim-titanium__comfortable__standard.dtcg.json +1 -1
  579. package/tokens/modes/system-dark__kim-titanium__compact__high.dtcg.json +1 -1
  580. package/tokens/modes/system-dark__kim-titanium__compact__standard.dtcg.json +1 -1
  581. package/tokens/modes/system-dark__kim__comfortable__high.dtcg.json +1 -1
  582. package/tokens/modes/system-dark__kim__comfortable__standard.dtcg.json +1 -1
  583. package/tokens/modes/system-dark__kim__compact__high.dtcg.json +1 -1
  584. package/tokens/modes/system-dark__kim__compact__standard.dtcg.json +1 -1
  585. package/tokens/modes/system-dark__moc-bamboo__comfortable__high.dtcg.json +1 -1
  586. package/tokens/modes/system-dark__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  587. package/tokens/modes/system-dark__moc-bamboo__compact__high.dtcg.json +1 -1
  588. package/tokens/modes/system-dark__moc-bamboo__compact__standard.dtcg.json +1 -1
  589. package/tokens/modes/system-dark__moc-forest__comfortable__high.dtcg.json +1 -1
  590. package/tokens/modes/system-dark__moc-forest__comfortable__standard.dtcg.json +1 -1
  591. package/tokens/modes/system-dark__moc-forest__compact__high.dtcg.json +1 -1
  592. package/tokens/modes/system-dark__moc-forest__compact__standard.dtcg.json +1 -1
  593. package/tokens/modes/system-dark__moc__comfortable__high.dtcg.json +1 -1
  594. package/tokens/modes/system-dark__moc__comfortable__standard.dtcg.json +1 -1
  595. package/tokens/modes/system-dark__moc__compact__high.dtcg.json +1 -1
  596. package/tokens/modes/system-dark__moc__compact__standard.dtcg.json +1 -1
  597. package/tokens/modes/system-dark__tho-clay__comfortable__high.dtcg.json +1 -1
  598. package/tokens/modes/system-dark__tho-clay__comfortable__standard.dtcg.json +1 -1
  599. package/tokens/modes/system-dark__tho-clay__compact__high.dtcg.json +1 -1
  600. package/tokens/modes/system-dark__tho-clay__compact__standard.dtcg.json +1 -1
  601. package/tokens/modes/system-dark__tho-sand__comfortable__high.dtcg.json +1 -1
  602. package/tokens/modes/system-dark__tho-sand__comfortable__standard.dtcg.json +1 -1
  603. package/tokens/modes/system-dark__tho-sand__compact__high.dtcg.json +1 -1
  604. package/tokens/modes/system-dark__tho-sand__compact__standard.dtcg.json +1 -1
  605. package/tokens/modes/system-dark__tho__comfortable__high.dtcg.json +1 -1
  606. package/tokens/modes/system-dark__tho__comfortable__standard.dtcg.json +1 -1
  607. package/tokens/modes/system-dark__tho__compact__high.dtcg.json +1 -1
  608. package/tokens/modes/system-dark__tho__compact__standard.dtcg.json +1 -1
  609. package/tokens/modes/system-dark__thuy-mist__comfortable__high.dtcg.json +1 -1
  610. package/tokens/modes/system-dark__thuy-mist__comfortable__standard.dtcg.json +1 -1
  611. package/tokens/modes/system-dark__thuy-mist__compact__high.dtcg.json +1 -1
  612. package/tokens/modes/system-dark__thuy-mist__compact__standard.dtcg.json +1 -1
  613. package/tokens/modes/system-dark__thuy-ocean__comfortable__high.dtcg.json +1 -1
  614. package/tokens/modes/system-dark__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  615. package/tokens/modes/system-dark__thuy-ocean__compact__high.dtcg.json +1 -1
  616. package/tokens/modes/system-dark__thuy-ocean__compact__standard.dtcg.json +1 -1
  617. package/tokens/modes/system-dark__thuy__comfortable__high.dtcg.json +1 -1
  618. package/tokens/modes/system-dark__thuy__comfortable__standard.dtcg.json +1 -1
  619. package/tokens/modes/system-dark__thuy__compact__high.dtcg.json +1 -1
  620. package/tokens/modes/system-dark__thuy__compact__standard.dtcg.json +1 -1
  621. package/tokens/modes/system-light__default__comfortable__high.dtcg.json +1 -1
  622. package/tokens/modes/system-light__default__comfortable__standard.dtcg.json +1 -1
  623. package/tokens/modes/system-light__default__compact__high.dtcg.json +1 -1
  624. package/tokens/modes/system-light__default__compact__standard.dtcg.json +1 -1
  625. package/tokens/modes/system-light__hoa-lava__comfortable__high.dtcg.json +1 -1
  626. package/tokens/modes/system-light__hoa-lava__comfortable__standard.dtcg.json +1 -1
  627. package/tokens/modes/system-light__hoa-lava__compact__high.dtcg.json +1 -1
  628. package/tokens/modes/system-light__hoa-lava__compact__standard.dtcg.json +1 -1
  629. package/tokens/modes/system-light__hoa-plasma__comfortable__high.dtcg.json +1 -1
  630. package/tokens/modes/system-light__hoa-plasma__comfortable__standard.dtcg.json +1 -1
  631. package/tokens/modes/system-light__hoa-plasma__compact__high.dtcg.json +1 -1
  632. package/tokens/modes/system-light__hoa-plasma__compact__standard.dtcg.json +1 -1
  633. package/tokens/modes/system-light__hoa__comfortable__high.dtcg.json +1 -1
  634. package/tokens/modes/system-light__hoa__comfortable__standard.dtcg.json +1 -1
  635. package/tokens/modes/system-light__hoa__compact__high.dtcg.json +1 -1
  636. package/tokens/modes/system-light__hoa__compact__standard.dtcg.json +1 -1
  637. package/tokens/modes/system-light__kim-steel__comfortable__high.dtcg.json +1 -1
  638. package/tokens/modes/system-light__kim-steel__comfortable__standard.dtcg.json +1 -1
  639. package/tokens/modes/system-light__kim-steel__compact__high.dtcg.json +1 -1
  640. package/tokens/modes/system-light__kim-steel__compact__standard.dtcg.json +1 -1
  641. package/tokens/modes/system-light__kim-titanium__comfortable__high.dtcg.json +1 -1
  642. package/tokens/modes/system-light__kim-titanium__comfortable__standard.dtcg.json +1 -1
  643. package/tokens/modes/system-light__kim-titanium__compact__high.dtcg.json +1 -1
  644. package/tokens/modes/system-light__kim-titanium__compact__standard.dtcg.json +1 -1
  645. package/tokens/modes/system-light__kim__comfortable__high.dtcg.json +1 -1
  646. package/tokens/modes/system-light__kim__comfortable__standard.dtcg.json +1 -1
  647. package/tokens/modes/system-light__kim__compact__high.dtcg.json +1 -1
  648. package/tokens/modes/system-light__kim__compact__standard.dtcg.json +1 -1
  649. package/tokens/modes/system-light__moc-bamboo__comfortable__high.dtcg.json +1 -1
  650. package/tokens/modes/system-light__moc-bamboo__comfortable__standard.dtcg.json +1 -1
  651. package/tokens/modes/system-light__moc-bamboo__compact__high.dtcg.json +1 -1
  652. package/tokens/modes/system-light__moc-bamboo__compact__standard.dtcg.json +1 -1
  653. package/tokens/modes/system-light__moc-forest__comfortable__high.dtcg.json +1 -1
  654. package/tokens/modes/system-light__moc-forest__comfortable__standard.dtcg.json +1 -1
  655. package/tokens/modes/system-light__moc-forest__compact__high.dtcg.json +1 -1
  656. package/tokens/modes/system-light__moc-forest__compact__standard.dtcg.json +1 -1
  657. package/tokens/modes/system-light__moc__comfortable__high.dtcg.json +1 -1
  658. package/tokens/modes/system-light__moc__comfortable__standard.dtcg.json +1 -1
  659. package/tokens/modes/system-light__moc__compact__high.dtcg.json +1 -1
  660. package/tokens/modes/system-light__moc__compact__standard.dtcg.json +1 -1
  661. package/tokens/modes/system-light__tho-clay__comfortable__high.dtcg.json +1 -1
  662. package/tokens/modes/system-light__tho-clay__comfortable__standard.dtcg.json +1 -1
  663. package/tokens/modes/system-light__tho-clay__compact__high.dtcg.json +1 -1
  664. package/tokens/modes/system-light__tho-clay__compact__standard.dtcg.json +1 -1
  665. package/tokens/modes/system-light__tho-sand__comfortable__high.dtcg.json +1 -1
  666. package/tokens/modes/system-light__tho-sand__comfortable__standard.dtcg.json +1 -1
  667. package/tokens/modes/system-light__tho-sand__compact__high.dtcg.json +1 -1
  668. package/tokens/modes/system-light__tho-sand__compact__standard.dtcg.json +1 -1
  669. package/tokens/modes/system-light__tho__comfortable__high.dtcg.json +1 -1
  670. package/tokens/modes/system-light__tho__comfortable__standard.dtcg.json +1 -1
  671. package/tokens/modes/system-light__tho__compact__high.dtcg.json +1 -1
  672. package/tokens/modes/system-light__tho__compact__standard.dtcg.json +1 -1
  673. package/tokens/modes/system-light__thuy-mist__comfortable__high.dtcg.json +1 -1
  674. package/tokens/modes/system-light__thuy-mist__comfortable__standard.dtcg.json +1 -1
  675. package/tokens/modes/system-light__thuy-mist__compact__high.dtcg.json +1 -1
  676. package/tokens/modes/system-light__thuy-mist__compact__standard.dtcg.json +1 -1
  677. package/tokens/modes/system-light__thuy-ocean__comfortable__high.dtcg.json +1 -1
  678. package/tokens/modes/system-light__thuy-ocean__comfortable__standard.dtcg.json +1 -1
  679. package/tokens/modes/system-light__thuy-ocean__compact__high.dtcg.json +1 -1
  680. package/tokens/modes/system-light__thuy-ocean__compact__standard.dtcg.json +1 -1
  681. package/tokens/modes/system-light__thuy__comfortable__high.dtcg.json +1 -1
  682. package/tokens/modes/system-light__thuy__comfortable__standard.dtcg.json +1 -1
  683. package/tokens/modes/system-light__thuy__compact__high.dtcg.json +1 -1
  684. package/tokens/modes/system-light__thuy__compact__standard.dtcg.json +1 -1
  685. package/tokens/native/CSModes.kt +658 -615
  686. package/tokens/native/CSModes.swift +658 -615
  687. package/tokens/native/CSTokens.kt +311 -311
  688. package/tokens/native/CSTokens.swift +311 -311
  689. package/tokens/native/cs_modes.dart +658 -615
  690. package/tokens/native/cs_tokens.dart +311 -311
  691. package/tokens/native/mode-provenance.json +12 -12
  692. package/tokens/provenance.json +6 -6
  693. package/tokens/theme-attributes.css +40 -40
  694. package/tokens/tokens.dtcg.json +451 -394
  695. package/tokens/tokens.js +242 -242
  696. package/tokens/tokens.json +241 -241
  697. package/tokens/typography.css +6 -6
  698. package/tokens/variables.css +464 -464
  699. package/tokens/viewer.html +15 -11
  700. package/ui_kits/deck/index.html +4 -2
  701. package/ui_kits/status-hub/StatusHub.jsx +7 -7
  702. package/ui_kits/status-hub/data.js +3 -3
  703. package/ui_kits/status-hub/index.html +1 -0
  704. package/ui_kits/status-hub/login.html +8 -6
  705. package/ui_kits/status-hub/project.html +7 -6
  706. package/ui_kits/status-hub/settings.html +9 -8
  707. package/ui_kits/status-hub/status.css +10 -8
  708. package/ui_kits/website/Website.jsx +3 -3
  709. package/ui_kits/website/careers.html +24 -7
  710. package/ui_kits/website/chat.html +5 -2
  711. package/ui_kits/website/index.html +1 -0
  712. package/ui_kits/website/site.css +30 -6
  713. package/ui_kits/website/work.html +12 -7
  714. package/components/_utils/use-viewport-panel.js +0 -30
  715. package/dist/esm/chunks/chunk-CH4W6RCG.mjs.map +0 -7
  716. package/dist/esm/chunks/chunk-F3M5TQ76.mjs.map +0 -7
  717. package/dist/esm/chunks/chunk-GWBINWTF.mjs.map +0 -7
  718. package/dist/esm/chunks/chunk-IH4I7JSB.mjs.map +0 -7
  719. package/dist/esm/chunks/chunk-JN57OITY.mjs.map +0 -7
  720. package/dist/esm/chunks/chunk-UFE32JPH.mjs.map +0 -7
  721. /package/dist/esm/chunks/{chunk-FEUTSZBN.mjs.map → chunk-2CCVFTPL.mjs.map} +0 -0
  722. /package/dist/esm/chunks/{chunk-W5VR7GTL.mjs.map → chunk-2VVGZEOQ.mjs.map} +0 -0
  723. /package/dist/esm/chunks/{chunk-3RC4CDAE.mjs.map → chunk-3R5WJQCB.mjs.map} +0 -0
  724. /package/dist/esm/chunks/{chunk-W6N22NMF.mjs.map → chunk-4FGB6VHN.mjs.map} +0 -0
  725. /package/dist/esm/chunks/{chunk-YZR3C7V2.mjs.map → chunk-4TO35YGK.mjs.map} +0 -0
  726. /package/dist/esm/chunks/{chunk-JSAPFO73.mjs.map → chunk-4YWKKULF.mjs.map} +0 -0
  727. /package/dist/esm/chunks/{chunk-W2RF4NWB.mjs.map → chunk-5FQGNCKS.mjs.map} +0 -0
  728. /package/dist/esm/chunks/{chunk-SYCXNMYP.mjs.map → chunk-6ECKJ6RS.mjs.map} +0 -0
  729. /package/dist/esm/chunks/{chunk-72AUOI37.mjs.map → chunk-6TZDNLHE.mjs.map} +0 -0
  730. /package/dist/esm/chunks/{chunk-QGCPHFSI.mjs.map → chunk-72STPBL4.mjs.map} +0 -0
  731. /package/dist/esm/chunks/{chunk-37AN57S5.mjs.map → chunk-7GSR2NGL.mjs.map} +0 -0
  732. /package/dist/esm/chunks/{chunk-A3PGQW3X.mjs.map → chunk-AA5BSO3T.mjs.map} +0 -0
  733. /package/dist/esm/chunks/{chunk-NH6M42ZI.mjs.map → chunk-ASGO2FW5.mjs.map} +0 -0
  734. /package/dist/esm/chunks/{chunk-GP5ITSCH.mjs.map → chunk-C3NAMBA7.mjs.map} +0 -0
  735. /package/dist/esm/chunks/{chunk-YA7Y7PEC.mjs.map → chunk-CKBL3UEA.mjs.map} +0 -0
  736. /package/dist/esm/chunks/{chunk-H7EJ7TNP.mjs.map → chunk-CYZ22MB7.mjs.map} +0 -0
  737. /package/dist/esm/chunks/{chunk-JRIWHAWW.mjs.map → chunk-D7A4ZCMJ.mjs.map} +0 -0
  738. /package/dist/esm/chunks/{chunk-A7RWM4XH.mjs.map → chunk-DANUZS4S.mjs.map} +0 -0
  739. /package/dist/esm/chunks/{chunk-FAVSLU7E.mjs.map → chunk-DFBKBVSE.mjs.map} +0 -0
  740. /package/dist/esm/chunks/{chunk-TNHQB6CI.mjs.map → chunk-DW4AWLA5.mjs.map} +0 -0
  741. /package/dist/esm/chunks/{chunk-5R5KMLUR.mjs.map → chunk-DWJIX65T.mjs.map} +0 -0
  742. /package/dist/esm/chunks/{chunk-YJNSQ5PJ.mjs.map → chunk-EITZT2U5.mjs.map} +0 -0
  743. /package/dist/esm/chunks/{chunk-CSJHR2W2.mjs.map → chunk-EOCMQT4L.mjs.map} +0 -0
  744. /package/dist/esm/chunks/{chunk-4QBKN42N.mjs.map → chunk-EXOOST5G.mjs.map} +0 -0
  745. /package/dist/esm/chunks/{chunk-7HTAAMIY.mjs.map → chunk-FF5D53IP.mjs.map} +0 -0
  746. /package/dist/esm/chunks/{chunk-JNK7QN24.mjs.map → chunk-FOEJO2YQ.mjs.map} +0 -0
  747. /package/dist/esm/chunks/{chunk-HYQG5XND.mjs.map → chunk-GLPQBE2J.mjs.map} +0 -0
  748. /package/dist/esm/chunks/{chunk-HUW6OY7C.mjs.map → chunk-GNEVR5Q4.mjs.map} +0 -0
  749. /package/dist/esm/chunks/{chunk-SEYKDGXE.mjs.map → chunk-H4TKHAB3.mjs.map} +0 -0
  750. /package/dist/esm/chunks/{chunk-OR5UTKW7.mjs.map → chunk-I3H7EAH5.mjs.map} +0 -0
  751. /package/dist/esm/chunks/{chunk-P64YS5W2.mjs.map → chunk-I3PQVFX5.mjs.map} +0 -0
  752. /package/dist/esm/chunks/{chunk-5MR3C2QG.mjs.map → chunk-IOEWPBAL.mjs.map} +0 -0
  753. /package/dist/esm/chunks/{chunk-TN2MZXGS.mjs.map → chunk-JIHWIDMP.mjs.map} +0 -0
  754. /package/dist/esm/chunks/{chunk-YX62AV33.mjs.map → chunk-KAOUK33L.mjs.map} +0 -0
  755. /package/dist/esm/chunks/{chunk-UVJ5BBQG.mjs.map → chunk-KWPNHP73.mjs.map} +0 -0
  756. /package/dist/esm/chunks/{chunk-BABSYWVB.mjs.map → chunk-LCC4ZVVO.mjs.map} +0 -0
  757. /package/dist/esm/chunks/{chunk-HVF4NT6P.mjs.map → chunk-MRXEJSQQ.mjs.map} +0 -0
  758. /package/dist/esm/chunks/{chunk-DIIXA7WD.mjs.map → chunk-NZKMM4FK.mjs.map} +0 -0
  759. /package/dist/esm/chunks/{chunk-CLWTVJM3.mjs.map → chunk-OEWAQZYE.mjs.map} +0 -0
  760. /package/dist/esm/chunks/{chunk-OOZKMXYB.mjs.map → chunk-PBP2MKZH.mjs.map} +0 -0
  761. /package/dist/esm/chunks/{chunk-JKKJHQVQ.mjs.map → chunk-PE6KC2U7.mjs.map} +0 -0
  762. /package/dist/esm/chunks/{chunk-N5TM7UIY.mjs.map → chunk-PFTKXY5Q.mjs.map} +0 -0
  763. /package/dist/esm/chunks/{chunk-R7QVE2JP.mjs.map → chunk-PLN3ITUB.mjs.map} +0 -0
  764. /package/dist/esm/chunks/{chunk-NEMFYL4X.mjs.map → chunk-QBPDNM7S.mjs.map} +0 -0
  765. /package/dist/esm/chunks/{chunk-JDI3UMJW.mjs.map → chunk-SIMVM4RV.mjs.map} +0 -0
  766. /package/dist/esm/chunks/{chunk-WJF2Q2Y3.mjs.map → chunk-TMXLSCAG.mjs.map} +0 -0
  767. /package/dist/esm/chunks/{chunk-TGYG7JP4.mjs.map → chunk-TNQXCIBM.mjs.map} +0 -0
  768. /package/dist/esm/chunks/{chunk-DHTD5KM5.mjs.map → chunk-TWCJMLGG.mjs.map} +0 -0
  769. /package/dist/esm/chunks/{chunk-EPFDMHPK.mjs.map → chunk-U7RKPGRO.mjs.map} +0 -0
  770. /package/dist/esm/chunks/{chunk-NMIGE2IM.mjs.map → chunk-UWNMGKAN.mjs.map} +0 -0
  771. /package/dist/esm/chunks/{chunk-KXFGO7N4.mjs.map → chunk-VAPKJRQI.mjs.map} +0 -0
  772. /package/dist/esm/chunks/{chunk-XTBN55D3.mjs.map → chunk-VUCJT2QJ.mjs.map} +0 -0
  773. /package/dist/esm/chunks/{chunk-TVTBVHT2.mjs.map → chunk-WLANQTOU.mjs.map} +0 -0
  774. /package/dist/esm/chunks/{chunk-3MCNCG2L.mjs.map → chunk-XZ5NWMO7.mjs.map} +0 -0
  775. /package/dist/esm/chunks/{chunk-QPXQZBQC.mjs.map → chunk-YKU2KVAQ.mjs.map} +0 -0
  776. /package/dist/esm/chunks/{chunk-ZKFOGW4D.mjs.map → chunk-YLSFKG64.mjs.map} +0 -0
  777. /package/dist/esm/chunks/{chunk-TO2T6EEB.mjs.map → chunk-YVSAUCWW.mjs.map} +0 -0
  778. /package/dist/esm/chunks/{chunk-XN74VX5H.mjs.map → chunk-ZKBAIIAQ.mjs.map} +0 -0
  779. /package/dist/esm/chunks/{chunk-7IJTTRPK.mjs.map → chunk-ZPLENPV2.mjs.map} +0 -0
package/styles.layered.css CHANGED
@@ -1,4 +1,4 @@
1
- /* Generated by scripts/generate-layered-styles.mjs. Opt-in only; styles.css remains default. Input graph SHA-256 14a83f177c7c4d0af1beee76bce933df7f21bc1bdb8bd6ae48179aea2f0544e3 */@layer cs-safety, cs-reset, cs-tokens, cs-components, cs-accessibility, cs-responsive, cs-overrides;@layer cs-safety {@media print {
1
+ /* Generated by scripts/generate-layered-styles.mjs. Opt-in only; styles.css remains default. Input graph SHA-256 d99b5a7dc061a65e706e003d8d17071c151a4d64f61aa7ea0d7e785b291d1f2c */@layer cs-safety, cs-reset, cs-tokens, cs-components, cs-accessibility, cs-responsive, cs-overrides;@layer cs-safety {@media print {
2
2
  [class*="cs-surface-"], .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
3
3
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important;
4
4
  background: #fff !important; box-shadow: none !important; border: 1px solid #ccc !important;
@@ -106,10 +106,12 @@
106
106
  }
107
107
  }@layer cs-reset {/* Source: base/reset.css *//* CyberSkill — minimal base reset. Products opt in by linking styles.css. */*, *::before, *::after { box-sizing: border-box; }html {
108
108
  -webkit-text-size-adjust: 100%;
109
+ overflow-x: clip;
109
110
  scroll-padding-block-start: var(--cs-scroll-padding-block-start, var(--cs-space-4, 16px));
110
111
  scroll-padding-block-end: var(--cs-scroll-padding-block-end, var(--cs-space-4, 16px));
111
112
  }body {
112
113
  margin: 0;
114
+ overflow-x: clip;
113
115
  background: var(--cs-color-surface-page, #fffdf8);
114
116
  color: var(--cs-color-text-primary, #45210e);
115
117
  font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
@@ -288,12 +290,12 @@
288
290
  --cs-font-weight-extrabold: 800;
289
291
 
290
292
  /* Line-heights (Vietnamese-safe) */
291
- --cs-font-lineHeight-body: 1.5;
292
- --cs-font-line-height-body: var(--cs-font-lineHeight-body);
293
- --cs-font-lineHeight-heading: 1.35;
294
- --cs-font-line-height-heading: var(--cs-font-lineHeight-heading);
295
- --cs-font-lineHeight-tight: 1.15;
296
- --cs-font-line-height-tight: var(--cs-font-lineHeight-tight);
293
+ --cs-font-lineHeight-body: var(--cs-font-line-height-body);
294
+ --cs-font-line-height-body: 1.5;
295
+ --cs-font-lineHeight-heading: var(--cs-font-line-height-heading);
296
+ --cs-font-line-height-heading: 1.35;
297
+ --cs-font-lineHeight-tight: var(--cs-font-line-height-tight);
298
+ --cs-font-line-height-tight: 1.15;
297
299
 
298
300
  /* Size ramp (rem-based, 16px root) */
299
301
  --cs-font-size-2xs: 0.6875rem; /* 11 — micro numerals only (documented exception) */
@@ -454,47 +456,47 @@
454
456
  --cs-component-button-primary-fg: #FFFFFF;
455
457
  --cs-component-button-gap: 8px;
456
458
  --cs-component-button-radius: 8px;
457
- --cs-component-button-xs-paddingY: 4px;
458
- --cs-component-button-xs-padding-y: var(--cs-component-button-xs-paddingY);
459
- --cs-component-button-xs-paddingX: 10px;
460
- --cs-component-button-xs-padding-x: var(--cs-component-button-xs-paddingX);
461
- --cs-component-button-xs-minHeight: 28px;
462
- --cs-component-button-xs-min-height: var(--cs-component-button-xs-minHeight);
463
- --cs-component-button-xs-minWidth: 28px;
464
- --cs-component-button-xs-min-width: var(--cs-component-button-xs-minWidth);
465
- --cs-component-button-xs-minHeight-coarse: 44px;
466
- --cs-component-button-xs-min-height-coarse: var(--cs-component-button-xs-minHeight-coarse);
467
- --cs-component-button-sm-paddingY: 8px;
468
- --cs-component-button-sm-padding-y: var(--cs-component-button-sm-paddingY);
469
- --cs-component-button-sm-paddingX: 14px;
470
- --cs-component-button-sm-padding-x: var(--cs-component-button-sm-paddingX);
471
- --cs-component-button-sm-minHeight: 36px;
472
- --cs-component-button-sm-min-height: var(--cs-component-button-sm-minHeight);
473
- --cs-component-button-sm-minHeight-coarse: 44px;
474
- --cs-component-button-sm-min-height-coarse: var(--cs-component-button-sm-minHeight-coarse);
475
- --cs-component-button-md-paddingY: 12px;
476
- --cs-component-button-md-padding-y: var(--cs-component-button-md-paddingY);
477
- --cs-component-button-md-paddingX: 20px;
478
- --cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX);
479
- --cs-component-button-md-minHeight: 44px;
480
- --cs-component-button-md-min-height: var(--cs-component-button-md-minHeight);
481
- --cs-component-button-md-minHeight-coarse: 44px;
482
- --cs-component-button-md-min-height-coarse: var(--cs-component-button-md-minHeight-coarse);
483
- --cs-component-button-lg-paddingY: 16px;
484
- --cs-component-button-lg-padding-y: var(--cs-component-button-lg-paddingY);
485
- --cs-component-button-lg-paddingX: 28px;
486
- --cs-component-button-lg-padding-x: var(--cs-component-button-lg-paddingX);
487
- --cs-component-button-lg-minHeight: 52px;
488
- --cs-component-button-lg-min-height: var(--cs-component-button-lg-minHeight);
459
+ --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
460
+ --cs-component-button-xs-padding-y: 4px;
461
+ --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
462
+ --cs-component-button-xs-padding-x: 10px;
463
+ --cs-component-button-xs-minHeight: var(--cs-component-button-xs-min-height);
464
+ --cs-component-button-xs-min-height: 28px;
465
+ --cs-component-button-xs-minWidth: var(--cs-component-button-xs-min-width);
466
+ --cs-component-button-xs-min-width: 28px;
467
+ --cs-component-button-xs-minHeight-coarse: var(--cs-component-button-xs-min-height-coarse);
468
+ --cs-component-button-xs-min-height-coarse: 44px;
469
+ --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
470
+ --cs-component-button-sm-padding-y: 8px;
471
+ --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
472
+ --cs-component-button-sm-padding-x: 14px;
473
+ --cs-component-button-sm-minHeight: var(--cs-component-button-sm-min-height);
474
+ --cs-component-button-sm-min-height: 36px;
475
+ --cs-component-button-sm-minHeight-coarse: var(--cs-component-button-sm-min-height-coarse);
476
+ --cs-component-button-sm-min-height-coarse: 44px;
477
+ --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
478
+ --cs-component-button-md-padding-y: 12px;
479
+ --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
480
+ --cs-component-button-md-padding-x: 20px;
481
+ --cs-component-button-md-minHeight: var(--cs-component-button-md-min-height);
482
+ --cs-component-button-md-min-height: 44px;
483
+ --cs-component-button-md-minHeight-coarse: var(--cs-component-button-md-min-height-coarse);
484
+ --cs-component-button-md-min-height-coarse: 44px;
485
+ --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
486
+ --cs-component-button-lg-padding-y: 16px;
487
+ --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
488
+ --cs-component-button-lg-padding-x: 28px;
489
+ --cs-component-button-lg-minHeight: var(--cs-component-button-lg-min-height);
490
+ --cs-component-button-lg-min-height: 52px;
489
491
 
490
492
  /* TextField */
491
493
  --cs-component-textfield-border-default: #BFA58F;
492
- --cs-component-textfield-paddingY: 10px;
493
- --cs-component-textfield-padding-y: var(--cs-component-textfield-paddingY);
494
- --cs-component-textfield-paddingX: 12px;
495
- --cs-component-textfield-padding-x: var(--cs-component-textfield-paddingX);
496
- --cs-component-textfield-minHeight: 44px;
497
- --cs-component-textfield-min-height: var(--cs-component-textfield-minHeight);
494
+ --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
495
+ --cs-component-textfield-padding-y: 10px;
496
+ --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
497
+ --cs-component-textfield-padding-x: 12px;
498
+ --cs-component-textfield-minHeight: var(--cs-component-textfield-min-height);
499
+ --cs-component-textfield-min-height: 44px;
498
500
  }/* Dark theme: CTA becomes Ochre-on-dark; field border warms up. */[data-theme="dark"] {
499
501
  --cs-component-button-primary-bg: #f4ba17;
500
502
  --cs-component-button-primary-fg: #1a1108;
@@ -522,7 +524,7 @@
522
524
  * Focus indicator (text-primary contour + ochre halo) and semantic status tokens NEVER remap.
523
525
  * Generative cycle (Tương sinh) only for grad-b: Mộc→Hỏa→Thổ→Kim→Thủy→Mộc. */:root {
524
526
  --cs-accent: #F4BA17;
525
- --cs-accent-strong: #916D10;
527
+ --cs-accent-strong: #916D11;
526
528
  --cs-accent-bright: #F4BA17;
527
529
  --cs-accent-on: #45210E;
528
530
  --cs-accent-on-strong: #FFFFFF;
@@ -530,7 +532,7 @@
530
532
  --cs-accent-ink: #45210E;
531
533
  --cs-accent-glow: rgba(244, 186, 23, 0.48);
532
534
  --cs-accent-grad-a: #F4BA17;
533
- --cs-accent-grad-b: #F3B958;
535
+ --cs-accent-grad-b: #C4B78F;
534
536
  }/* ---- Aurora washes ---- */.cs-aurora-wash { background-image: url("assets/aurora-tho.webp"); background-size: cover; background-position: center; }[data-cs-element="hoa"] .cs-aurora-wash { background-image: url("assets/aurora-hoa.webp"); }[data-cs-element="thuy"] .cs-aurora-wash { background-image: url("assets/aurora-thuy.webp"); }[data-cs-element="moc"] .cs-aurora-wash { background-image: url("assets/aurora-moc.webp"); }[data-cs-element="kim"] .cs-aurora-wash { background-image: url("assets/aurora-kim.webp"); }/* ---- Generated scope resolver ----
535
537
  * Private channels carry both palettes independently of the selected theme.
536
538
  * Empty/initial custom-property switches select one channel without JS or a
@@ -615,8 +617,8 @@
615
617
  --_cs-dark-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.62);
616
618
  --_cs-light-accent: #F4BA17;
617
619
  --_cs-dark-accent: #F4BA17;
618
- --_cs-light-accent-strong: #916D10;
619
- --_cs-dark-accent-strong: #916D10;
620
+ --_cs-light-accent-strong: #916D11;
621
+ --_cs-dark-accent-strong: #916D11;
620
622
  --_cs-light-accent-bright: #F4BA17;
621
623
  --_cs-dark-accent-bright: #F4BA17;
622
624
  --_cs-light-accent-on: #45210E;
@@ -631,8 +633,8 @@
631
633
  --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48);
632
634
  --_cs-light-accent-grad-a: #F4BA17;
633
635
  --_cs-dark-accent-grad-a: #F4BA17;
634
- --_cs-light-accent-grad-b: #F3B958;
635
- --_cs-dark-accent-grad-b: #F3B958;
636
+ --_cs-light-accent-grad-b: #C4B78F;
637
+ --_cs-dark-accent-grad-b: #C4B78F;
636
638
  --_cs-standard: initial;
637
639
  --_cs-high: ;
638
640
  }:root, [data-theme="light"], [data-theme="system"] { --_cs-light: initial; --_cs-dark: ; }[data-theme="dark"] { --_cs-light: ; --_cs-dark: initial; }@media (prefers-color-scheme: dark) {
@@ -640,30 +642,30 @@
640
642
  }@media (prefers-contrast: more) {
641
643
  :root:where(:not([data-cs-contrast])) { --_cs-standard: ; --_cs-high: initial; }
642
644
  }[data-cs-contrast="standard"] { --_cs-standard: initial; --_cs-high: ; }[data-cs-contrast="high"] { --_cs-standard: ; --_cs-high: initial; }[data-cs-element="tho"][data-cs-variant="sand"] {
643
- --_cs-light-accent: #F8E9C0;
644
- --_cs-dark-accent: #F8E9C0;
645
- --_cs-light-accent-strong: #80724E;
646
- --_cs-dark-accent-strong: #665A37;
647
- --_cs-light-accent-bright: #F6EBCC;
648
- --_cs-dark-accent-bright: #F6EBCC;
649
- --_cs-light-accent-on: #292414;
645
+ --_cs-light-accent: #F9E3A7;
646
+ --_cs-dark-accent: #E6CD88;
647
+ --_cs-light-accent-strong: #856A03;
648
+ --_cs-dark-accent-strong: #80671A;
649
+ --_cs-light-accent-bright: #FDEAB7;
650
+ --_cs-dark-accent-bright: #F9E5AE;
651
+ --_cs-light-accent-on: #271E06;
650
652
  --_cs-dark-accent-on: #f5ead9;
651
653
  --_cs-light-accent-on-strong: #FFFFFF;
652
654
  --_cs-dark-accent-on-strong: #FFFFFF;
653
- --_cs-light-accent-tint: #FBF7EA;
654
- --_cs-dark-accent-tint: #332701;
655
- --_cs-light-accent-ink: #292414;
656
- --_cs-dark-accent-ink: #F6EBCC;
657
- --_cs-light-accent-glow: rgba(248, 233, 192, 0.48);
658
- --_cs-dark-accent-glow: rgba(248, 233, 192, 0.48);
659
- --_cs-light-accent-grad-a: #F8E9C0;
660
- --_cs-dark-accent-grad-a: #F8E9C0;
661
- --_cs-light-accent-grad-b: #F3B958;
662
- --_cs-dark-accent-grad-b: #F3B958;
663
- --_cs-light-color-text-accent: #625431;
664
- --_cs-dark-color-text-accent: #F6EBCC;
665
- --_cs-light-color-link: #625431;
666
- --_cs-dark-color-link: #F6EBCC;
655
+ --_cs-light-accent-tint: #FEF8E7;
656
+ --_cs-dark-accent-tint: #342C15;
657
+ --_cs-light-accent-ink: #292108;
658
+ --_cs-dark-accent-ink: #F9E5AE;
659
+ --_cs-light-accent-glow: rgba(249, 227, 167, 0.48);
660
+ --_cs-dark-accent-glow: rgba(249, 227, 167, 0.48);
661
+ --_cs-light-accent-grad-a: #F9E3A7;
662
+ --_cs-dark-accent-grad-a: #F9E3A7;
663
+ --_cs-light-accent-grad-b: #C4B78F;
664
+ --_cs-dark-accent-grad-b: #C4B78F;
665
+ --_cs-light-color-text-accent: #695300;
666
+ --_cs-dark-color-text-accent: #F9E5AE;
667
+ --_cs-light-color-link: #695300;
668
+ --_cs-dark-color-link: #F9E5AE;
667
669
  --_cs-light-color-link-hover: #45210E;
668
670
  --_cs-dark-color-link-hover: #f5ead9;
669
671
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -674,35 +676,35 @@
674
676
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
675
677
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
676
678
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
677
- --_cs-light-component-button-primary-bg: #45210E;
678
- --_cs-dark-component-button-primary-bg: #665A37;
679
+ --_cs-light-component-button-primary-bg: #856A03;
680
+ --_cs-dark-component-button-primary-bg: #80671A;
679
681
  --_cs-light-component-button-primary-fg: #FFFFFF;
680
682
  --_cs-dark-component-button-primary-fg: #FFFFFF;
681
683
  }[data-cs-element="tho"] {
682
684
  --_cs-light-accent: #F4BA17;
683
- --_cs-dark-accent: #F4BA17;
684
- --_cs-light-accent-strong: #916D10;
685
- --_cs-dark-accent-strong: #73560B;
685
+ --_cs-dark-accent: #E9B321;
686
+ --_cs-light-accent-strong: #916D11;
687
+ --_cs-dark-accent-strong: #6E5205;
686
688
  --_cs-light-accent-bright: #F4BA17;
687
- --_cs-dark-accent-bright: #FEC42C;
689
+ --_cs-dark-accent-bright: #FDD378;
688
690
  --_cs-light-accent-on: #45210E;
689
691
  --_cs-dark-accent-on: #f5ead9;
690
692
  --_cs-light-accent-on-strong: #FFFFFF;
691
693
  --_cs-dark-accent-on-strong: #FFFFFF;
692
694
  --_cs-light-accent-tint: #FBF4E9;
693
- --_cs-dark-accent-tint: #352602;
695
+ --_cs-dark-accent-tint: #2B1E00;
694
696
  --_cs-light-accent-ink: #45210E;
695
- --_cs-dark-accent-ink: #FECD5E;
697
+ --_cs-dark-accent-ink: #FDD378;
696
698
  --_cs-light-accent-glow: rgba(244, 186, 23, 0.48);
697
699
  --_cs-dark-accent-glow: rgba(244, 186, 23, 0.48);
698
700
  --_cs-light-accent-grad-a: #F4BA17;
699
701
  --_cs-dark-accent-grad-a: #F4BA17;
700
- --_cs-light-accent-grad-b: #F3B958;
701
- --_cs-dark-accent-grad-b: #F3B958;
702
+ --_cs-light-accent-grad-b: #C4B78F;
703
+ --_cs-dark-accent-grad-b: #C4B78F;
702
704
  --_cs-light-color-text-accent: #6E3B0E;
703
- --_cs-dark-color-text-accent: #FED57C;
705
+ --_cs-dark-color-text-accent: #FFD57A;
704
706
  --_cs-light-color-link: #644A05;
705
- --_cs-dark-color-link: #FED57C;
707
+ --_cs-dark-color-link: #FFD57A;
706
708
  --_cs-light-color-link-hover: #45210E;
707
709
  --_cs-dark-color-link-hover: #f5ead9;
708
710
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -714,34 +716,34 @@
714
716
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
715
717
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
716
718
  --_cs-light-component-button-primary-bg: #45210E;
717
- --_cs-dark-component-button-primary-bg: #73560B;
719
+ --_cs-dark-component-button-primary-bg: #6E5205;
718
720
  --_cs-light-component-button-primary-fg: #FFFFFF;
719
721
  --_cs-dark-component-button-primary-fg: #FFFFFF;
720
722
  }[data-cs-element="tho"][data-cs-variant="clay"] {
721
- --_cs-light-accent: #513801;
722
- --_cs-dark-accent: #CDB07E;
723
- --_cs-light-accent-strong: #201300;
724
- --_cs-dark-accent-strong: #1F1300;
725
- --_cs-light-accent-bright: #DEC7A2;
726
- --_cs-dark-accent-bright: #E4CDA8;
727
- --_cs-light-accent-on: #2D220E;
723
+ --_cs-light-accent: #723E06;
724
+ --_cs-dark-accent: #E0A97C;
725
+ --_cs-light-accent-strong: #5A3004;
726
+ --_cs-dark-accent-strong: #5C3001;
727
+ --_cs-light-accent-bright: #F2C5A3;
728
+ --_cs-dark-accent-bright: #F8C7A1;
729
+ --_cs-light-accent-on: #080200;
728
730
  --_cs-dark-accent-on: #f5ead9;
729
731
  --_cs-light-accent-on-strong: #FFFFFF;
730
732
  --_cs-dark-accent-on-strong: #FFFFFF;
731
- --_cs-light-accent-tint: #FFF6E7;
732
- --_cs-dark-accent-tint: #372502;
733
- --_cs-light-accent-ink: #2D220E;
734
- --_cs-dark-accent-ink: #E7D0AB;
735
- --_cs-light-accent-glow: rgba(81, 56, 1, 0.48);
736
- --_cs-dark-accent-glow: rgba(81, 56, 1, 0.48);
737
- --_cs-light-accent-grad-a: #513801;
738
- --_cs-dark-accent-grad-a: #513801;
739
- --_cs-light-accent-grad-b: #F3B958;
740
- --_cs-dark-accent-grad-b: #F3B958;
741
- --_cs-light-color-text-accent: #201300;
742
- --_cs-dark-color-text-accent: #EED7B1;
743
- --_cs-light-color-link: #201300;
744
- --_cs-dark-color-link: #EED7B1;
733
+ --_cs-light-accent-tint: #FCEEE3;
734
+ --_cs-dark-accent-tint: #220F01;
735
+ --_cs-light-accent-ink: #321B07;
736
+ --_cs-dark-accent-ink: #FBCAA4;
737
+ --_cs-light-accent-glow: rgba(114, 62, 6, 0.48);
738
+ --_cs-dark-accent-glow: rgba(114, 62, 6, 0.48);
739
+ --_cs-light-accent-grad-a: #723E06;
740
+ --_cs-dark-accent-grad-a: #723E06;
741
+ --_cs-light-accent-grad-b: #C4B78F;
742
+ --_cs-dark-accent-grad-b: #C4B78F;
743
+ --_cs-light-color-text-accent: #462402;
744
+ --_cs-dark-color-text-accent: #FFD2AF;
745
+ --_cs-light-color-link: #462402;
746
+ --_cs-dark-color-link: #FFD2AF;
745
747
  --_cs-light-color-link-hover: #45210E;
746
748
  --_cs-dark-color-link-hover: #f5ead9;
747
749
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -752,35 +754,35 @@
752
754
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
753
755
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
754
756
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
755
- --_cs-light-component-button-primary-bg: #45210E;
756
- --_cs-dark-component-button-primary-bg: #1F1300;
757
+ --_cs-light-component-button-primary-bg: #5A3004;
758
+ --_cs-dark-component-button-primary-bg: #5C3001;
757
759
  --_cs-light-component-button-primary-fg: #FFFFFF;
758
760
  --_cs-dark-component-button-primary-fg: #FFFFFF;
759
761
  }[data-cs-element="hoa"][data-cs-variant="plasma"] {
760
- --_cs-light-accent: #FFE1D8;
761
- --_cs-dark-accent: #FFE1D8;
762
- --_cs-light-accent-strong: #856E68;
763
- --_cs-dark-accent-strong: #6F5750;
764
- --_cs-light-accent-bright: #FCE6DF;
765
- --_cs-dark-accent-bright: #FCE6DF;
766
- --_cs-light-accent-on: #2C211E;
762
+ --_cs-light-accent: #FEDBDC;
763
+ --_cs-dark-accent: #EBC4C5;
764
+ --_cs-light-accent-strong: #896163;
765
+ --_cs-dark-accent-strong: #836061;
766
+ --_cs-light-accent-bright: #FFE3E4;
767
+ --_cs-dark-accent-bright: #FDDDDE;
768
+ --_cs-light-accent-on: #281B1C;
767
769
  --_cs-dark-accent-on: #f5ead9;
768
770
  --_cs-light-accent-on-strong: #FFFFFF;
769
771
  --_cs-dark-accent-on-strong: #FFFFFF;
770
- --_cs-light-accent-tint: #FEF4F2;
771
- --_cs-dark-accent-tint: #38231C;
772
- --_cs-light-accent-ink: #2C211E;
773
- --_cs-dark-accent-ink: #FCE6DF;
774
- --_cs-light-accent-glow: rgba(255, 225, 216, 0.48);
775
- --_cs-dark-accent-glow: rgba(255, 225, 216, 0.48);
776
- --_cs-light-accent-grad-a: #FFE1D8;
777
- --_cs-dark-accent-grad-a: #FFE1D8;
772
+ --_cs-light-accent-tint: #FFF5F5;
773
+ --_cs-dark-accent-tint: #352929;
774
+ --_cs-light-accent-ink: #2B1E1E;
775
+ --_cs-dark-accent-ink: #FDDDDE;
776
+ --_cs-light-accent-glow: rgba(254, 219, 220, 0.48);
777
+ --_cs-dark-accent-glow: rgba(254, 219, 220, 0.48);
778
+ --_cs-light-accent-grad-a: #FEDBDC;
779
+ --_cs-dark-accent-grad-a: #FEDBDC;
778
780
  --_cs-light-accent-grad-b: #F4BA17;
779
781
  --_cs-dark-accent-grad-b: #F4BA17;
780
- --_cs-light-color-text-accent: #66504B;
781
- --_cs-dark-color-text-accent: #FCE6DF;
782
- --_cs-light-color-link: #66504B;
783
- --_cs-dark-color-link: #FCE6DF;
782
+ --_cs-light-color-text-accent: #714B4D;
783
+ --_cs-dark-color-text-accent: #FDDDDE;
784
+ --_cs-light-color-link: #714B4D;
785
+ --_cs-dark-color-link: #FDDDDE;
784
786
  --_cs-light-color-link-hover: #45210E;
785
787
  --_cs-dark-color-link-hover: #f5ead9;
786
788
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -791,35 +793,35 @@
791
793
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
792
794
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
793
795
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
794
- --_cs-light-component-button-primary-bg: #45210E;
795
- --_cs-dark-component-button-primary-bg: #6F5750;
796
+ --_cs-light-component-button-primary-bg: #896163;
797
+ --_cs-dark-component-button-primary-bg: #836061;
796
798
  --_cs-light-component-button-primary-fg: #FFFFFF;
797
799
  --_cs-dark-component-button-primary-fg: #FFFFFF;
798
800
  }[data-cs-element="hoa"] {
799
- --_cs-light-accent: #FCAF91;
800
- --_cs-dark-accent: #FCAF91;
801
- --_cs-light-accent-strong: #A46146;
802
- --_cs-dark-accent-strong: #8A4A30;
803
- --_cs-light-accent-bright: #FED3C3;
804
- --_cs-dark-accent-bright: #FED3C3;
805
- --_cs-light-accent-on: #381B10;
801
+ --_cs-light-accent: #FC9C69;
802
+ --_cs-dark-accent: #FEA272;
803
+ --_cs-light-accent-strong: #96440B;
804
+ --_cs-dark-accent-strong: #883E0D;
805
+ --_cs-light-accent-bright: #FFD3BD;
806
+ --_cs-dark-accent-bright: #FECDB4;
807
+ --_cs-light-accent-on: #361402;
806
808
  --_cs-dark-accent-on: #f5ead9;
807
809
  --_cs-light-accent-on-strong: #FFFFFF;
808
810
  --_cs-dark-accent-on-strong: #FFFFFF;
809
- --_cs-light-accent-tint: #FFF4F0;
810
- --_cs-dark-accent-tint: #411E0F;
811
- --_cs-light-accent-ink: #381B10;
812
- --_cs-dark-accent-ink: #FED3C3;
813
- --_cs-light-accent-glow: rgba(252, 175, 145, 0.48);
814
- --_cs-dark-accent-glow: rgba(252, 175, 145, 0.48);
815
- --_cs-light-accent-grad-a: #FCAF91;
816
- --_cs-dark-accent-grad-a: #FCAF91;
811
+ --_cs-light-accent-tint: #FFF1EA;
812
+ --_cs-dark-accent-tint: #351706;
813
+ --_cs-light-accent-ink: #3A1501;
814
+ --_cs-dark-accent-ink: #FECDB4;
815
+ --_cs-light-accent-glow: rgba(252, 156, 105, 0.48);
816
+ --_cs-dark-accent-glow: rgba(252, 156, 105, 0.48);
817
+ --_cs-light-accent-grad-a: #FC9C69;
818
+ --_cs-dark-accent-grad-a: #FC9C69;
817
819
  --_cs-light-accent-grad-b: #F4BA17;
818
820
  --_cs-dark-accent-grad-b: #F4BA17;
819
- --_cs-light-color-text-accent: #793B20;
820
- --_cs-dark-color-text-accent: #FED3C3;
821
- --_cs-light-color-link: #793B20;
822
- --_cs-dark-color-link: #FED3C3;
821
+ --_cs-light-color-text-accent: #793609;
822
+ --_cs-dark-color-text-accent: #FFD1BA;
823
+ --_cs-light-color-link: #793609;
824
+ --_cs-dark-color-link: #FFD1BA;
823
825
  --_cs-light-color-link-hover: #45210E;
824
826
  --_cs-dark-color-link-hover: #f5ead9;
825
827
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -830,35 +832,35 @@
830
832
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
831
833
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
832
834
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
833
- --_cs-light-component-button-primary-bg: #45210E;
834
- --_cs-dark-component-button-primary-bg: #8A4A30;
835
+ --_cs-light-component-button-primary-bg: #96440B;
836
+ --_cs-dark-component-button-primary-bg: #883E0D;
835
837
  --_cs-light-component-button-primary-fg: #FFFFFF;
836
838
  --_cs-dark-component-button-primary-fg: #FFFFFF;
837
839
  }[data-cs-element="hoa"][data-cs-variant="lava"] {
838
- --_cs-light-accent: #622B06;
839
- --_cs-dark-accent: #E8A683;
840
- --_cs-light-accent-strong: #280D00;
841
- --_cs-dark-accent-strong: #280D00;
842
- --_cs-light-accent-bright: #F1BEA4;
843
- --_cs-dark-accent-bright: #F8C4AA;
844
- --_cs-light-accent-on: #361D0F;
840
+ --_cs-light-accent: #93050F;
841
+ --_cs-dark-accent: #FC9A8F;
842
+ --_cs-light-accent-strong: #760008;
843
+ --_cs-dark-accent-strong: #6D1D19;
844
+ --_cs-light-accent-bright: #FFBCB4;
845
+ --_cs-dark-accent-bright: #FFC1B9;
846
+ --_cs-light-accent-on: #0D0000;
845
847
  --_cs-dark-accent-on: #f5ead9;
846
848
  --_cs-light-accent-on-strong: #FFFFFF;
847
849
  --_cs-dark-accent-on-strong: #FFFFFF;
848
- --_cs-light-accent-tint: #FFF4EF;
849
- --_cs-dark-accent-tint: #401F0B;
850
- --_cs-light-accent-ink: #361D0F;
851
- --_cs-dark-accent-ink: #FBC7AD;
852
- --_cs-light-accent-glow: rgba(98, 43, 6, 0.48);
853
- --_cs-dark-accent-glow: rgba(98, 43, 6, 0.48);
854
- --_cs-light-accent-grad-a: #622B06;
855
- --_cs-dark-accent-grad-a: #622B06;
850
+ --_cs-light-accent-tint: #FFEBE9;
851
+ --_cs-dark-accent-tint: #2A0806;
852
+ --_cs-light-accent-ink: #400C0B;
853
+ --_cs-dark-accent-ink: #FFC6BF;
854
+ --_cs-light-accent-glow: rgba(147, 5, 15, 0.48);
855
+ --_cs-dark-accent-glow: rgba(147, 5, 15, 0.48);
856
+ --_cs-light-accent-grad-a: #93050F;
857
+ --_cs-dark-accent-grad-a: #93050F;
856
858
  --_cs-light-accent-grad-b: #F4BA17;
857
859
  --_cs-dark-accent-grad-b: #F4BA17;
858
- --_cs-light-color-text-accent: #280D00;
859
- --_cs-dark-color-text-accent: #FED1BB;
860
- --_cs-light-color-link: #280D00;
861
- --_cs-dark-color-link: #FED1BB;
860
+ --_cs-light-color-text-accent: #550306;
861
+ --_cs-dark-color-text-accent: #FDD0CA;
862
+ --_cs-light-color-link: #550306;
863
+ --_cs-dark-color-link: #FDD0CA;
862
864
  --_cs-light-color-link-hover: #45210E;
863
865
  --_cs-dark-color-link-hover: #f5ead9;
864
866
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -869,35 +871,35 @@
869
871
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
870
872
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
871
873
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
872
- --_cs-light-component-button-primary-bg: #45210E;
873
- --_cs-dark-component-button-primary-bg: #280D00;
874
+ --_cs-light-component-button-primary-bg: #760008;
875
+ --_cs-dark-component-button-primary-bg: #6D1D19;
874
876
  --_cs-light-component-button-primary-fg: #FFFFFF;
875
877
  --_cs-dark-component-button-primary-fg: #FFFFFF;
876
878
  }[data-cs-element="thuy"][data-cs-variant="mist"] {
877
- --_cs-light-accent: #C0F5FC;
878
- --_cs-dark-accent: #C0F5FC;
879
- --_cs-light-accent-strong: #4B7B81;
880
- --_cs-dark-accent-strong: #316167;
881
- --_cs-light-accent-bright: #CDF4F9;
882
- --_cs-dark-accent-bright: #CDF4F9;
883
- --_cs-light-accent-on: #13282B;
879
+ --_cs-light-accent: #9DF7F5;
880
+ --_cs-dark-accent: #79E4E2;
881
+ --_cs-light-accent-strong: #037D7D;
882
+ --_cs-dark-accent-strong: #077A79;
883
+ --_cs-light-accent-bright: #B1FBF9;
884
+ --_cs-dark-accent-bright: #A6F8F6;
885
+ --_cs-light-accent-on: #012525;
884
886
  --_cs-dark-accent-on: #f5ead9;
885
887
  --_cs-light-accent-on-strong: #FFFFFF;
886
888
  --_cs-dark-accent-on-strong: #FFFFFF;
887
- --_cs-light-accent-tint: #EBFAFC;
888
- --_cs-dark-accent-tint: #022F34;
889
- --_cs-light-accent-ink: #13282B;
890
- --_cs-dark-accent-ink: #CDF4F9;
891
- --_cs-light-accent-glow: rgba(192, 245, 252, 0.48);
892
- --_cs-dark-accent-glow: rgba(192, 245, 252, 0.48);
893
- --_cs-light-accent-grad-a: #C0F5FC;
894
- --_cs-dark-accent-grad-a: #C0F5FC;
895
- --_cs-light-accent-grad-b: #A3D768;
896
- --_cs-dark-accent-grad-b: #A3D768;
897
- --_cs-light-color-text-accent: #2E5E64;
898
- --_cs-dark-color-text-accent: #CDF4F9;
899
- --_cs-light-color-link: #2E5E64;
900
- --_cs-dark-color-link: #CDF4F9;
889
+ --_cs-light-accent-tint: #E6FDFC;
890
+ --_cs-dark-accent-tint: #0D3333;
891
+ --_cs-light-accent-ink: #032727;
892
+ --_cs-dark-accent-ink: #A6F8F6;
893
+ --_cs-light-accent-glow: rgba(157, 247, 245, 0.48);
894
+ --_cs-dark-accent-glow: rgba(157, 247, 245, 0.48);
895
+ --_cs-light-accent-grad-a: #9DF7F5;
896
+ --_cs-dark-accent-grad-a: #9DF7F5;
897
+ --_cs-light-accent-grad-b: #82CF66;
898
+ --_cs-dark-accent-grad-b: #82CF66;
899
+ --_cs-light-color-text-accent: #116060;
900
+ --_cs-dark-color-text-accent: #A6F8F6;
901
+ --_cs-light-color-link: #116060;
902
+ --_cs-dark-color-link: #A6F8F6;
901
903
  --_cs-light-color-link-hover: #45210E;
902
904
  --_cs-dark-color-link-hover: #f5ead9;
903
905
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -908,35 +910,35 @@
908
910
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
909
911
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
910
912
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
911
- --_cs-light-component-button-primary-bg: #45210E;
912
- --_cs-dark-component-button-primary-bg: #316167;
913
+ --_cs-light-component-button-primary-bg: #037D7D;
914
+ --_cs-dark-component-button-primary-bg: #077A79;
913
915
  --_cs-light-component-button-primary-fg: #FFFFFF;
914
916
  --_cs-dark-component-button-primary-fg: #FFFFFF;
915
917
  }[data-cs-element="thuy"] {
916
- --_cs-light-accent: #2EDBF7;
917
- --_cs-dark-accent: #2EDBF7;
918
- --_cs-light-accent-strong: #0B7E8E;
919
- --_cs-dark-accent-strong: #046270;
920
- --_cs-light-accent-bright: #99EEFF;
921
- --_cs-dark-accent-bright: #99EEFF;
922
- --_cs-light-accent-on: #012A30;
918
+ --_cs-light-accent: #00CEE4;
919
+ --_cs-dark-accent: #32D2E7;
920
+ --_cs-light-accent-strong: #166B76;
921
+ --_cs-dark-accent-strong: #04626D;
922
+ --_cs-light-accent-bright: #94EFFD;
923
+ --_cs-dark-accent-bright: #79EDFF;
924
+ --_cs-light-accent-on: #012429;
923
925
  --_cs-dark-accent-on: #f5ead9;
924
926
  --_cs-light-accent-on-strong: #FFFFFF;
925
927
  --_cs-dark-accent-on-strong: #FFFFFF;
926
- --_cs-light-accent-tint: #E7FBFF;
927
- --_cs-dark-accent-tint: #032F36;
928
- --_cs-light-accent-ink: #012A30;
929
- --_cs-dark-accent-ink: #99EEFF;
930
- --_cs-light-accent-glow: rgba(46, 219, 247, 0.48);
931
- --_cs-dark-accent-glow: rgba(46, 219, 247, 0.48);
932
- --_cs-light-accent-grad-a: #2EDBF7;
933
- --_cs-dark-accent-grad-a: #2EDBF7;
934
- --_cs-light-accent-grad-b: #A3D768;
935
- --_cs-dark-accent-grad-b: #A3D768;
936
- --_cs-light-color-text-accent: #035763;
937
- --_cs-dark-color-text-accent: #99EEFF;
938
- --_cs-light-color-link: #035763;
939
- --_cs-dark-color-link: #99EEFF;
928
+ --_cs-light-accent-tint: #DFFBFF;
929
+ --_cs-dark-accent-tint: #03252A;
930
+ --_cs-light-accent-ink: #03272C;
931
+ --_cs-dark-accent-ink: #79EDFF;
932
+ --_cs-light-accent-glow: rgba(0, 206, 228, 0.48);
933
+ --_cs-dark-accent-glow: rgba(0, 206, 228, 0.48);
934
+ --_cs-light-accent-grad-a: #00CEE4;
935
+ --_cs-dark-accent-grad-a: #00CEE4;
936
+ --_cs-light-accent-grad-b: #82CF66;
937
+ --_cs-dark-accent-grad-b: #82CF66;
938
+ --_cs-light-color-text-accent: #0D535C;
939
+ --_cs-dark-color-text-accent: #79EDFF;
940
+ --_cs-light-color-link: #0D535C;
941
+ --_cs-dark-color-link: #79EDFF;
940
942
  --_cs-light-color-link-hover: #45210E;
941
943
  --_cs-dark-color-link-hover: #f5ead9;
942
944
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -947,35 +949,35 @@
947
949
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
948
950
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
949
951
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
950
- --_cs-light-component-button-primary-bg: #45210E;
951
- --_cs-dark-component-button-primary-bg: #046270;
952
+ --_cs-light-component-button-primary-bg: #166B76;
953
+ --_cs-dark-component-button-primary-bg: #04626D;
952
954
  --_cs-light-component-button-primary-fg: #FFFFFF;
953
955
  --_cs-dark-component-button-primary-fg: #FFFFFF;
954
956
  }[data-cs-element="thuy"][data-cs-variant="ocean"] {
955
- --_cs-light-accent: #004554;
956
- --_cs-dark-accent: #82BCCD;
957
- --_cs-light-accent-strong: #011A21;
958
- --_cs-dark-accent-strong: #011A21;
959
- --_cs-light-accent-bright: #A8D3E0;
960
- --_cs-dark-accent-bright: #ABD6E3;
961
- --_cs-light-accent-on: #10282F;
957
+ --_cs-light-accent: #06556F;
958
+ --_cs-dark-accent: #80BDD8;
959
+ --_cs-light-accent-strong: #034257;
960
+ --_cs-dark-accent-strong: #00445A;
961
+ --_cs-light-accent-bright: #A9D8ED;
962
+ --_cs-dark-accent-bright: #A5D8F0;
963
+ --_cs-light-accent-on: #001721;
962
964
  --_cs-dark-accent-on: #f5ead9;
963
965
  --_cs-light-accent-on-strong: #FFFFFF;
964
966
  --_cs-dark-accent-on-strong: #FFFFFF;
965
- --_cs-light-accent-tint: #EAFAFF;
966
- --_cs-dark-accent-tint: #002F3A;
967
- --_cs-light-accent-ink: #10282F;
968
- --_cs-dark-accent-ink: #AED9E6;
969
- --_cs-light-accent-glow: rgba(0, 69, 84, 0.48);
970
- --_cs-dark-accent-glow: rgba(0, 69, 84, 0.48);
971
- --_cs-light-accent-grad-a: #004554;
972
- --_cs-dark-accent-grad-a: #004554;
973
- --_cs-light-accent-grad-b: #A3D768;
974
- --_cs-dark-accent-grad-b: #A3D768;
975
- --_cs-light-color-text-accent: #011A21;
976
- --_cs-dark-color-text-accent: #B6E1EF;
977
- --_cs-light-color-link: #011A21;
978
- --_cs-dark-color-link: #B6E1EF;
967
+ --_cs-light-accent-tint: #E5F3FA;
968
+ --_cs-dark-accent-tint: #021821;
969
+ --_cs-light-accent-ink: #092531;
970
+ --_cs-dark-accent-ink: #A8DBF3;
971
+ --_cs-light-accent-glow: rgba(6, 85, 111, 0.48);
972
+ --_cs-dark-accent-glow: rgba(6, 85, 111, 0.48);
973
+ --_cs-light-accent-grad-a: #06556F;
974
+ --_cs-dark-accent-grad-a: #06556F;
975
+ --_cs-light-accent-grad-b: #82CF66;
976
+ --_cs-dark-accent-grad-b: #82CF66;
977
+ --_cs-light-color-text-accent: #003142;
978
+ --_cs-dark-color-text-accent: #AFE2FA;
979
+ --_cs-light-color-link: #003142;
980
+ --_cs-dark-color-link: #AFE2FA;
979
981
  --_cs-light-color-link-hover: #45210E;
980
982
  --_cs-dark-color-link-hover: #f5ead9;
981
983
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -986,35 +988,35 @@
986
988
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
987
989
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
988
990
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
989
- --_cs-light-component-button-primary-bg: #45210E;
990
- --_cs-dark-component-button-primary-bg: #011A21;
991
+ --_cs-light-component-button-primary-bg: #034257;
992
+ --_cs-dark-component-button-primary-bg: #00445A;
991
993
  --_cs-light-component-button-primary-fg: #FFFFFF;
992
994
  --_cs-dark-component-button-primary-fg: #FFFFFF;
993
995
  }[data-cs-element="moc"][data-cs-variant="bamboo"] {
994
- --_cs-light-accent: #E1F1C8;
995
- --_cs-dark-accent: #E1F1C8;
996
- --_cs-light-accent-strong: #6B7754;
997
- --_cs-dark-accent-strong: #54603E;
998
- --_cs-light-accent-bright: #E5F1D2;
999
- --_cs-dark-accent-bright: #E5F1D2;
1000
- --_cs-light-accent-on: #212617;
996
+ --_cs-light-accent: #DAEFAA;
997
+ --_cs-dark-accent: #C4DB8C;
998
+ --_cs-light-accent-strong: #62780E;
999
+ --_cs-dark-accent-strong: #607420;
1000
+ --_cs-light-accent-bright: #E2F4BA;
1001
+ --_cs-dark-accent-bright: #DCF0B1;
1002
+ --_cs-light-accent-on: #1C2307;
1001
1003
  --_cs-dark-accent-on: #f5ead9;
1002
1004
  --_cs-light-accent-on-strong: #FFFFFF;
1003
1005
  --_cs-dark-accent-on-strong: #FFFFFF;
1004
- --_cs-light-accent-tint: #F4F9ED;
1005
- --_cs-dark-accent-tint: #232D0B;
1006
- --_cs-light-accent-ink: #212617;
1007
- --_cs-dark-accent-ink: #E5F1D2;
1008
- --_cs-light-accent-glow: rgba(225, 241, 200, 0.48);
1009
- --_cs-dark-accent-glow: rgba(225, 241, 200, 0.48);
1010
- --_cs-light-accent-grad-a: #E1F1C8;
1011
- --_cs-dark-accent-grad-a: #E1F1C8;
1012
- --_cs-light-accent-grad-b: #FCAF91;
1013
- --_cs-dark-accent-grad-b: #FCAF91;
1014
- --_cs-light-color-text-accent: #505C3A;
1015
- --_cs-dark-color-text-accent: #E5F1D2;
1016
- --_cs-light-color-link: #505C3A;
1017
- --_cs-dark-color-link: #E5F1D2;
1006
+ --_cs-light-accent-tint: #F5FBE8;
1007
+ --_cs-dark-accent-tint: #293016;
1008
+ --_cs-light-accent-ink: #1E250A;
1009
+ --_cs-dark-accent-ink: #DCF0B1;
1010
+ --_cs-light-accent-glow: rgba(218, 239, 170, 0.48);
1011
+ --_cs-dark-accent-glow: rgba(218, 239, 170, 0.48);
1012
+ --_cs-light-accent-grad-a: #DAEFAA;
1013
+ --_cs-dark-accent-grad-a: #DAEFAA;
1014
+ --_cs-light-accent-grad-b: #FC9C69;
1015
+ --_cs-dark-accent-grad-b: #FC9C69;
1016
+ --_cs-light-color-text-accent: #4A5B02;
1017
+ --_cs-dark-color-text-accent: #DCF0B1;
1018
+ --_cs-light-color-link: #4A5B02;
1019
+ --_cs-dark-color-link: #DCF0B1;
1018
1020
  --_cs-light-color-link-hover: #45210E;
1019
1021
  --_cs-dark-color-link-hover: #f5ead9;
1020
1022
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -1025,35 +1027,35 @@
1025
1027
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1026
1028
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1027
1029
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1028
- --_cs-light-component-button-primary-bg: #45210E;
1029
- --_cs-dark-component-button-primary-bg: #54603E;
1030
+ --_cs-light-component-button-primary-bg: #62780E;
1031
+ --_cs-dark-component-button-primary-bg: #607420;
1030
1032
  --_cs-light-component-button-primary-fg: #FFFFFF;
1031
1033
  --_cs-dark-component-button-primary-fg: #FFFFFF;
1032
1034
  }[data-cs-element="moc"] {
1033
- --_cs-light-accent: #A3D768;
1034
- --_cs-dark-accent: #A3D768;
1035
- --_cs-light-accent-strong: #528003;
1036
- --_cs-dark-accent-strong: #416501;
1037
- --_cs-light-accent-bright: #C5ED9C;
1038
- --_cs-dark-accent-bright: #C5ED9C;
1039
- --_cs-light-accent-on: #182A00;
1035
+ --_cs-light-accent: #82CF66;
1036
+ --_cs-dark-accent: #8AD370;
1037
+ --_cs-light-accent-strong: #2B7100;
1038
+ --_cs-dark-accent-strong: #286704;
1039
+ --_cs-light-accent-bright: #B9F0A6;
1040
+ --_cs-dark-accent-bright: #B2EC9E;
1041
+ --_cs-light-accent-on: #0A2700;
1040
1042
  --_cs-dark-accent-on: #f5ead9;
1041
1043
  --_cs-light-accent-on-strong: #FFFFFF;
1042
1044
  --_cs-dark-accent-on-strong: #FFFFFF;
1043
- --_cs-light-accent-tint: #EFFCE3;
1044
- --_cs-dark-accent-tint: #1F2E0B;
1045
- --_cs-light-accent-ink: #182A00;
1046
- --_cs-dark-accent-ink: #C5ED9C;
1047
- --_cs-light-accent-glow: rgba(163, 215, 104, 0.48);
1048
- --_cs-dark-accent-glow: rgba(163, 215, 104, 0.48);
1049
- --_cs-light-accent-grad-a: #A3D768;
1050
- --_cs-dark-accent-grad-a: #A3D768;
1051
- --_cs-light-accent-grad-b: #FCAF91;
1052
- --_cs-dark-accent-grad-b: #FCAF91;
1053
- --_cs-light-color-text-accent: #38570C;
1054
- --_cs-dark-color-text-accent: #C5ED9C;
1055
- --_cs-light-color-link: #38570C;
1056
- --_cs-dark-color-link: #C5ED9C;
1045
+ --_cs-light-accent-tint: #EAFAE5;
1046
+ --_cs-dark-accent-tint: #12260B;
1047
+ --_cs-light-accent-ink: #0D2902;
1048
+ --_cs-dark-accent-ink: #B2EC9E;
1049
+ --_cs-light-accent-glow: rgba(130, 207, 102, 0.48);
1050
+ --_cs-dark-accent-glow: rgba(130, 207, 102, 0.48);
1051
+ --_cs-light-accent-grad-a: #82CF66;
1052
+ --_cs-dark-accent-grad-a: #82CF66;
1053
+ --_cs-light-accent-grad-b: #FC9C69;
1054
+ --_cs-dark-accent-grad-b: #FC9C69;
1055
+ --_cs-light-color-text-accent: #24570B;
1056
+ --_cs-dark-color-text-accent: #B2EC9E;
1057
+ --_cs-light-color-link: #24570B;
1058
+ --_cs-dark-color-link: #B2EC9E;
1057
1059
  --_cs-light-color-link-hover: #45210E;
1058
1060
  --_cs-dark-color-link-hover: #f5ead9;
1059
1061
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -1064,35 +1066,35 @@
1064
1066
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1065
1067
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1066
1068
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1067
- --_cs-light-component-button-primary-bg: #45210E;
1068
- --_cs-dark-component-button-primary-bg: #416501;
1069
+ --_cs-light-component-button-primary-bg: #2B7100;
1070
+ --_cs-dark-component-button-primary-bg: #286704;
1069
1071
  --_cs-light-component-button-primary-fg: #FFFFFF;
1070
1072
  --_cs-dark-component-button-primary-fg: #FFFFFF;
1071
1073
  }[data-cs-element="moc"][data-cs-variant="forest"] {
1072
- --_cs-light-accent: #1A4A01;
1073
- --_cs-dark-accent: #8EC27D;
1074
- --_cs-light-accent-strong: #051D00;
1075
- --_cs-dark-accent-strong: #061D00;
1076
- --_cs-light-accent-bright: #B0D8A3;
1077
- --_cs-dark-accent-bright: #B0D8A3;
1078
- --_cs-light-accent-on: #162A0E;
1074
+ --_cs-light-accent: #105C36;
1075
+ --_cs-dark-accent: #84C49B;
1076
+ --_cs-light-accent-strong: #0A4829;
1077
+ --_cs-dark-accent-strong: #074A29;
1078
+ --_cs-light-accent-bright: #ACDDBD;
1079
+ --_cs-dark-accent-bright: #A8DFBB;
1080
+ --_cs-light-accent-on: #011C0D;
1079
1081
  --_cs-dark-accent-on: #f5ead9;
1080
1082
  --_cs-light-accent-on-strong: #FFFFFF;
1081
1083
  --_cs-dark-accent-on-strong: #FFFFFF;
1082
- --_cs-light-accent-tint: #ECFDE7;
1083
- --_cs-dark-accent-tint: #193011;
1084
- --_cs-light-accent-ink: #162A0E;
1085
- --_cs-dark-accent-ink: #B6DFA9;
1086
- --_cs-light-accent-glow: rgba(26, 74, 1, 0.48);
1087
- --_cs-dark-accent-glow: rgba(26, 74, 1, 0.48);
1088
- --_cs-light-accent-grad-a: #1A4A01;
1089
- --_cs-dark-accent-grad-a: #1A4A01;
1090
- --_cs-light-accent-grad-b: #FCAF91;
1091
- --_cs-dark-accent-grad-b: #FCAF91;
1092
- --_cs-light-color-text-accent: #051D00;
1093
- --_cs-dark-color-text-accent: #BDE5B0;
1094
- --_cs-light-color-link: #051D00;
1095
- --_cs-dark-color-link: #BDE5B0;
1084
+ --_cs-light-accent-tint: #E6F5EB;
1085
+ --_cs-dark-accent-tint: #031A0C;
1086
+ --_cs-light-accent-ink: #0B2818;
1087
+ --_cs-dark-accent-ink: #A8DFBB;
1088
+ --_cs-light-accent-glow: rgba(16, 92, 54, 0.48);
1089
+ --_cs-dark-accent-glow: rgba(16, 92, 54, 0.48);
1090
+ --_cs-light-accent-grad-a: #105C36;
1091
+ --_cs-dark-accent-grad-a: #105C36;
1092
+ --_cs-light-accent-grad-b: #FC9C69;
1093
+ --_cs-dark-accent-grad-b: #FC9C69;
1094
+ --_cs-light-color-text-accent: #04361D;
1095
+ --_cs-dark-color-text-accent: #B0E7C3;
1096
+ --_cs-light-color-link: #04361D;
1097
+ --_cs-dark-color-link: #B0E7C3;
1096
1098
  --_cs-light-color-link-hover: #45210E;
1097
1099
  --_cs-dark-color-link-hover: #f5ead9;
1098
1100
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -1103,35 +1105,35 @@
1103
1105
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1104
1106
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1105
1107
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1106
- --_cs-light-component-button-primary-bg: #45210E;
1107
- --_cs-dark-component-button-primary-bg: #061D00;
1108
+ --_cs-light-component-button-primary-bg: #0A4829;
1109
+ --_cs-dark-component-button-primary-bg: #074A29;
1108
1110
  --_cs-light-component-button-primary-fg: #FFFFFF;
1109
1111
  --_cs-dark-component-button-primary-fg: #FFFFFF;
1110
1112
  }[data-cs-element="kim"][data-cs-variant="titanium"] {
1111
- --_cs-light-accent: #FEE5C7;
1112
- --_cs-dark-accent: #FEE5C7;
1113
- --_cs-light-accent-strong: #847058;
1114
- --_cs-dark-accent-strong: #6B573E;
1115
- --_cs-light-accent-bright: #FBE8D2;
1116
- --_cs-dark-accent-bright: #FBE8D2;
1117
- --_cs-light-accent-on: #2B2217;
1113
+ --_cs-light-accent: #D3E7FC;
1114
+ --_cs-dark-accent: #BCD2EA;
1115
+ --_cs-light-accent-strong: #56708B;
1116
+ --_cs-dark-accent-strong: #576D83;
1117
+ --_cs-light-accent-bright: #DDEDFF;
1118
+ --_cs-dark-accent-bright: #D6E9FD;
1119
+ --_cs-light-accent-on: #182029;
1118
1120
  --_cs-dark-accent-on: #f5ead9;
1119
1121
  --_cs-light-accent-on-strong: #FFFFFF;
1120
1122
  --_cs-dark-accent-on-strong: #FFFFFF;
1121
- --_cs-light-accent-tint: #FDF5ED;
1122
- --_cs-dark-accent-tint: #37250B;
1123
- --_cs-light-accent-ink: #2B2217;
1124
- --_cs-dark-accent-ink: #FBE8D2;
1125
- --_cs-light-accent-glow: rgba(254, 229, 199, 0.48);
1126
- --_cs-dark-accent-glow: rgba(254, 229, 199, 0.48);
1127
- --_cs-light-accent-grad-a: #FEE5C7;
1128
- --_cs-dark-accent-grad-a: #FEE5C7;
1129
- --_cs-light-accent-grad-b: #2EDBF7;
1130
- --_cs-dark-accent-grad-b: #2EDBF7;
1131
- --_cs-light-color-text-accent: #67543D;
1132
- --_cs-dark-color-text-accent: #FBE8D2;
1133
- --_cs-light-color-link: #67543D;
1134
- --_cs-dark-color-link: #FBE8D2;
1123
+ --_cs-light-accent-tint: #F3F8FE;
1124
+ --_cs-dark-accent-tint: #262D35;
1125
+ --_cs-light-accent-ink: #1A232B;
1126
+ --_cs-dark-accent-ink: #D6E9FD;
1127
+ --_cs-light-accent-glow: rgba(211, 231, 252, 0.48);
1128
+ --_cs-dark-accent-glow: rgba(211, 231, 252, 0.48);
1129
+ --_cs-light-accent-grad-a: #D3E7FC;
1130
+ --_cs-dark-accent-grad-a: #D3E7FC;
1131
+ --_cs-light-accent-grad-b: #00CEE4;
1132
+ --_cs-dark-accent-grad-b: #00CEE4;
1133
+ --_cs-light-color-text-accent: #3D5670;
1134
+ --_cs-dark-color-text-accent: #D6E9FD;
1135
+ --_cs-light-color-link: #3D5670;
1136
+ --_cs-dark-color-link: #D6E9FD;
1135
1137
  --_cs-light-color-link-hover: #45210E;
1136
1138
  --_cs-dark-color-link-hover: #f5ead9;
1137
1139
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -1142,35 +1144,35 @@
1142
1144
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1143
1145
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1144
1146
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1145
- --_cs-light-component-button-primary-bg: #45210E;
1146
- --_cs-dark-component-button-primary-bg: #6B573E;
1147
+ --_cs-light-component-button-primary-bg: #56708B;
1148
+ --_cs-dark-component-button-primary-bg: #576D83;
1147
1149
  --_cs-light-component-button-primary-fg: #FFFFFF;
1148
1150
  --_cs-dark-component-button-primary-fg: #FFFFFF;
1149
1151
  }[data-cs-element="kim"] {
1150
- --_cs-light-accent: #F3B958;
1151
- --_cs-dark-accent: #F3B958;
1152
- --_cs-light-accent-strong: #996A08;
1153
- --_cs-dark-accent-strong: #795303;
1154
- --_cs-light-accent-bright: #FDD89F;
1155
- --_cs-dark-accent-bright: #FDD89F;
1156
- --_cs-light-accent-on: #312002;
1152
+ --_cs-light-accent: #C4B78F;
1153
+ --_cs-dark-accent: #C8BC96;
1154
+ --_cs-light-accent-strong: #6A5E3A;
1155
+ --_cs-dark-accent-strong: #615633;
1156
+ --_cs-light-accent-bright: #E8DEBD;
1157
+ --_cs-dark-accent-bright: #E3D9B8;
1158
+ --_cs-light-accent-on: #241F0F;
1157
1159
  --_cs-dark-accent-on: #f5ead9;
1158
1160
  --_cs-light-accent-on-strong: #FFFFFF;
1159
1161
  --_cs-dark-accent-on-strong: #FFFFFF;
1160
- --_cs-light-accent-tint: #FFF5E7;
1161
- --_cs-dark-accent-tint: #382503;
1162
- --_cs-light-accent-ink: #312002;
1163
- --_cs-dark-accent-ink: #FDD89F;
1164
- --_cs-light-accent-glow: rgba(243, 185, 88, 0.48);
1165
- --_cs-dark-accent-glow: rgba(243, 185, 88, 0.48);
1166
- --_cs-light-accent-grad-a: #F3B958;
1167
- --_cs-dark-accent-grad-a: #F3B958;
1168
- --_cs-light-accent-grad-b: #2EDBF7;
1169
- --_cs-dark-accent-grad-b: #2EDBF7;
1170
- --_cs-light-color-text-accent: #65460B;
1171
- --_cs-dark-color-text-accent: #FDD89F;
1172
- --_cs-light-color-link: #65460B;
1173
- --_cs-dark-color-link: #FDD89F;
1162
+ --_cs-light-accent-tint: #F8F4EA;
1163
+ --_cs-dark-accent-tint: #242013;
1164
+ --_cs-light-accent-ink: #262112;
1165
+ --_cs-dark-accent-ink: #E3D9B8;
1166
+ --_cs-light-accent-glow: rgba(196, 183, 143, 0.48);
1167
+ --_cs-dark-accent-glow: rgba(196, 183, 143, 0.48);
1168
+ --_cs-light-accent-grad-a: #C4B78F;
1169
+ --_cs-dark-accent-grad-a: #C4B78F;
1170
+ --_cs-light-accent-grad-b: #00CEE4;
1171
+ --_cs-dark-accent-grad-b: #00CEE4;
1172
+ --_cs-light-color-text-accent: #564B27;
1173
+ --_cs-dark-color-text-accent: #E5DBBA;
1174
+ --_cs-light-color-link: #564B27;
1175
+ --_cs-dark-color-link: #E5DBBA;
1174
1176
  --_cs-light-color-link-hover: #45210E;
1175
1177
  --_cs-dark-color-link-hover: #f5ead9;
1176
1178
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -1181,35 +1183,35 @@
1181
1183
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1182
1184
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1183
1185
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1184
- --_cs-light-component-button-primary-bg: #45210E;
1185
- --_cs-dark-component-button-primary-bg: #795303;
1186
+ --_cs-light-component-button-primary-bg: #6A5E3A;
1187
+ --_cs-dark-component-button-primary-bg: #615633;
1186
1188
  --_cs-light-component-button-primary-fg: #FFFFFF;
1187
1189
  --_cs-dark-component-button-primary-fg: #FFFFFF;
1188
1190
  }[data-cs-element="kim"][data-cs-variant="steel"] {
1189
- --_cs-light-accent: #503901;
1190
- --_cs-dark-accent: #CCB17E;
1191
- --_cs-light-accent-strong: #1F1400;
1192
- --_cs-dark-accent-strong: #1F1400;
1193
- --_cs-light-accent-bright: #DCC8A2;
1194
- --_cs-dark-accent-bright: #DFCBA5;
1195
- --_cs-light-accent-on: #2D220E;
1191
+ --_cs-light-accent: #384D72;
1192
+ --_cs-dark-accent: #9FB7E0;
1193
+ --_cs-light-accent-strong: #293C5C;
1194
+ --_cs-dark-accent-strong: #2B3D5D;
1195
+ --_cs-light-accent-bright: #BED0F0;
1196
+ --_cs-dark-accent-bright: #BBD0F4;
1197
+ --_cs-light-accent-on: #020818;
1196
1198
  --_cs-dark-accent-on: #f5ead9;
1197
1199
  --_cs-light-accent-on-strong: #FFFFFF;
1198
1200
  --_cs-dark-accent-on-strong: #FFFFFF;
1199
- --_cs-light-accent-tint: #FEF6E7;
1200
- --_cs-dark-accent-tint: #362602;
1201
- --_cs-light-accent-ink: #2D220E;
1202
- --_cs-dark-accent-ink: #E6D1AB;
1203
- --_cs-light-accent-glow: rgba(80, 57, 1, 0.48);
1204
- --_cs-dark-accent-glow: rgba(80, 57, 1, 0.48);
1205
- --_cs-light-accent-grad-a: #503901;
1206
- --_cs-dark-accent-grad-a: #503901;
1207
- --_cs-light-accent-grad-b: #2EDBF7;
1208
- --_cs-dark-accent-grad-b: #2EDBF7;
1209
- --_cs-light-color-text-accent: #1F1400;
1210
- --_cs-dark-color-text-accent: #ECD8B2;
1211
- --_cs-light-color-link: #1F1400;
1212
- --_cs-dark-color-link: #ECD8B2;
1201
+ --_cs-light-accent-tint: #EBF1FB;
1202
+ --_cs-dark-accent-tint: #0D1523;
1203
+ --_cs-light-accent-ink: #182232;
1204
+ --_cs-dark-accent-ink: #BED3F7;
1205
+ --_cs-light-accent-glow: rgba(56, 77, 114, 0.48);
1206
+ --_cs-dark-accent-glow: rgba(56, 77, 114, 0.48);
1207
+ --_cs-light-accent-grad-a: #384D72;
1208
+ --_cs-dark-accent-grad-a: #384D72;
1209
+ --_cs-light-accent-grad-b: #00CEE4;
1210
+ --_cs-dark-accent-grad-b: #00CEE4;
1211
+ --_cs-light-color-text-accent: #1B2E4C;
1212
+ --_cs-dark-color-text-accent: #C8DBFD;
1213
+ --_cs-light-color-link: #1B2E4C;
1214
+ --_cs-dark-color-link: #C8DBFD;
1213
1215
  --_cs-light-color-link-hover: #45210E;
1214
1216
  --_cs-dark-color-link-hover: #f5ead9;
1215
1217
  --_cs-light-color-surface-panel: color-mix(in oklab, var(--_cs-light-accent) 4%, #FFFFFF);
@@ -1220,59 +1222,59 @@
1220
1222
  --_cs-dark-color-surface-raised: color-mix(in oklab, var(--_cs-dark-accent) 14%, #2b1e14);
1221
1223
  --_cs-light-color-border-default: color-mix(in oklab, var(--_cs-light-accent) 40%, #E7D9C6);
1222
1224
  --_cs-dark-color-border-default: color-mix(in oklab, var(--_cs-dark-accent) 40%, #4a3a2c);
1223
- --_cs-light-component-button-primary-bg: #45210E;
1224
- --_cs-dark-component-button-primary-bg: #1F1400;
1225
+ --_cs-light-component-button-primary-bg: #293C5C;
1226
+ --_cs-dark-component-button-primary-bg: #2B3D5D;
1225
1227
  --_cs-light-component-button-primary-fg: #FFFFFF;
1226
1228
  --_cs-dark-component-button-primary-fg: #FFFFFF;
1227
1229
  }:is(:root, [data-theme], [data-cs-element], [data-cs-contrast], [data-theme][data-cs-element][data-cs-variant]) {
1228
- --cs-color-brand-umber: var(--_cs-light, var(--_cs-light-color-brand-umber)) var(--_cs-dark, var(--_cs-dark-color-brand-umber));
1229
- --cs-color-brand-ochre: var(--_cs-light, var(--_cs-light-color-brand-ochre)) var(--_cs-dark, var(--_cs-dark-color-brand-ochre));
1230
- --cs-color-surface-page: var(--_cs-light, var(--_cs-light-color-surface-page)) var(--_cs-dark, var(--_cs-dark-color-surface-page));
1231
- --cs-color-surface-panel: var(--_cs-light, var(--_cs-light-color-surface-panel)) var(--_cs-dark, var(--_cs-dark-color-surface-panel));
1232
- --cs-color-surface-raised: var(--_cs-light, var(--_cs-light-color-surface-raised)) var(--_cs-dark, var(--_cs-dark-color-surface-raised));
1233
- --cs-color-text-primary: var(--_cs-light, var(--_cs-light-color-text-primary)) var(--_cs-dark, var(--_cs-dark-color-text-primary));
1234
- --cs-color-text-inverse: var(--_cs-light, var(--_cs-light-color-text-inverse)) var(--_cs-dark, var(--_cs-dark-color-text-inverse));
1235
- --cs-color-text-accent: var(--_cs-light, var(--_cs-light-color-text-accent)) var(--_cs-dark, var(--_cs-dark-color-text-accent));
1236
- --cs-color-text-muted: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-text-muted)) var(--_cs-dark, var(--_cs-dark-color-text-muted))) var(--_cs-high, var(--_cs-light, #45210E) var(--_cs-dark, #F5EAD9));
1237
- --cs-color-semantic-success: var(--_cs-light, var(--_cs-light-color-semantic-success)) var(--_cs-dark, var(--_cs-dark-color-semantic-success));
1238
- --cs-color-semantic-danger: var(--_cs-light, var(--_cs-light-color-semantic-danger)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger));
1239
- --cs-color-semantic-warning: var(--_cs-light, var(--_cs-light-color-semantic-warning)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning));
1240
- --cs-color-semantic-info: var(--_cs-light, var(--_cs-light-color-semantic-info)) var(--_cs-dark, var(--_cs-dark-color-semantic-info));
1241
- --cs-color-semantic-success-fg: var(--_cs-light, var(--_cs-light-color-semantic-success-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-success-fg));
1242
- --cs-color-semantic-danger-fg: var(--_cs-light, var(--_cs-light-color-semantic-danger-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger-fg));
1243
- --cs-color-semantic-warning-fg: var(--_cs-light, var(--_cs-light-color-semantic-warning-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning-fg));
1244
- --cs-color-semantic-info-fg: var(--_cs-light, var(--_cs-light-color-semantic-info-fg)) var(--_cs-dark, var(--_cs-dark-color-semantic-info-fg));
1245
- --cs-color-semantic-success-text: var(--_cs-light, var(--_cs-light-color-semantic-success-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-success-text));
1246
- --cs-color-semantic-danger-text: var(--_cs-light, var(--_cs-light-color-semantic-danger-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-danger-text));
1247
- --cs-color-semantic-warning-text: var(--_cs-light, var(--_cs-light-color-semantic-warning-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-warning-text));
1248
- --cs-color-semantic-info-text: var(--_cs-light, var(--_cs-light-color-semantic-info-text)) var(--_cs-dark, var(--_cs-dark-color-semantic-info-text));
1249
- --cs-doc-ink: var(--_cs-light, var(--_cs-light-doc-ink)) var(--_cs-dark, var(--_cs-dark-doc-ink));
1250
- --cs-doc-slate: var(--_cs-light, var(--_cs-light-doc-slate)) var(--_cs-dark, var(--_cs-dark-doc-slate));
1251
- --cs-doc-fill: var(--_cs-light, var(--_cs-light-doc-fill)) var(--_cs-dark, var(--_cs-dark-doc-fill));
1252
- --cs-doc-fill-ink: var(--_cs-light, var(--_cs-light-doc-fill-ink)) var(--_cs-dark, var(--_cs-dark-doc-fill-ink));
1253
- --cs-color-accent-ochre: var(--_cs-light, var(--_cs-light-color-accent-ochre)) var(--_cs-dark, var(--_cs-dark-color-accent-ochre));
1254
- --cs-color-border-default: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-border-default)) var(--_cs-dark, var(--_cs-dark-color-border-default))) var(--_cs-high, var(--_cs-light, #9a8060) var(--_cs-dark, #7a6450));
1255
- --cs-color-link: var(--_cs-light, var(--_cs-light-color-link)) var(--_cs-dark, var(--_cs-dark-color-link));
1256
- --cs-color-link-hover: var(--_cs-light, var(--_cs-light-color-link-hover)) var(--_cs-dark, var(--_cs-dark-color-link-hover));
1257
- --cs-component-button-primary-bg: var(--_cs-light, var(--_cs-light-component-button-primary-bg)) var(--_cs-dark, var(--_cs-dark-component-button-primary-bg));
1258
- --cs-component-button-primary-fg: var(--_cs-light, var(--_cs-light-component-button-primary-fg)) var(--_cs-dark, var(--_cs-dark-component-button-primary-fg));
1259
- --cs-component-textfield-border-default: var(--_cs-light, var(--_cs-light-component-textfield-border-default)) var(--_cs-dark, var(--_cs-dark-component-textfield-border-default));
1260
- --cs-shadow-xs: var(--_cs-light, var(--_cs-light-shadow-xs)) var(--_cs-dark, var(--_cs-dark-shadow-xs));
1261
- --cs-shadow-sm: var(--_cs-light, var(--_cs-light-shadow-sm)) var(--_cs-dark, var(--_cs-dark-shadow-sm));
1262
- --cs-shadow-md: var(--_cs-light, var(--_cs-light-shadow-md)) var(--_cs-dark, var(--_cs-dark-shadow-md));
1263
- --cs-shadow-lg: var(--_cs-light, var(--_cs-light-shadow-lg)) var(--_cs-dark, var(--_cs-dark-shadow-lg));
1264
- --cs-shadow-xl: var(--_cs-light, var(--_cs-light-shadow-xl)) var(--_cs-dark, var(--_cs-dark-shadow-xl));
1265
- --cs-accent: var(--_cs-light, var(--_cs-light-accent)) var(--_cs-dark, var(--_cs-dark-accent));
1266
- --cs-accent-strong: var(--_cs-light, var(--_cs-light-accent-strong)) var(--_cs-dark, var(--_cs-dark-accent-strong));
1267
- --cs-accent-bright: var(--_cs-light, var(--_cs-light-accent-bright)) var(--_cs-dark, var(--_cs-dark-accent-bright));
1268
- --cs-accent-on: var(--_cs-light, var(--_cs-light-accent-on)) var(--_cs-dark, var(--_cs-dark-accent-on));
1269
- --cs-accent-on-strong: var(--_cs-light, var(--_cs-light-accent-on-strong)) var(--_cs-dark, var(--_cs-dark-accent-on-strong));
1270
- --cs-accent-tint: var(--_cs-light, var(--_cs-light-accent-tint)) var(--_cs-dark, var(--_cs-dark-accent-tint));
1271
- --cs-accent-ink: var(--_cs-light, var(--_cs-light-accent-ink)) var(--_cs-dark, var(--_cs-dark-accent-ink));
1272
- --cs-accent-glow: var(--_cs-light, var(--_cs-light-accent-glow)) var(--_cs-dark, var(--_cs-dark-accent-glow));
1273
- --cs-accent-grad-a: var(--_cs-light, var(--_cs-light-accent-grad-a)) var(--_cs-dark, var(--_cs-dark-accent-grad-a));
1274
- --cs-accent-grad-b: var(--_cs-light, var(--_cs-light-accent-grad-b)) var(--_cs-dark, var(--_cs-dark-accent-grad-b));
1275
- color-scheme: var(--_cs-light, light) var(--_cs-dark, dark);
1230
+ --cs-color-brand-umber: var(--_cs-light, var(--_cs-light-color-brand-umber))var(--_cs-dark, var(--_cs-dark-color-brand-umber));
1231
+ --cs-color-brand-ochre: var(--_cs-light, var(--_cs-light-color-brand-ochre))var(--_cs-dark, var(--_cs-dark-color-brand-ochre));
1232
+ --cs-color-surface-page: var(--_cs-light, var(--_cs-light-color-surface-page))var(--_cs-dark, var(--_cs-dark-color-surface-page));
1233
+ --cs-color-surface-panel: var(--_cs-light, var(--_cs-light-color-surface-panel))var(--_cs-dark, var(--_cs-dark-color-surface-panel));
1234
+ --cs-color-surface-raised: var(--_cs-light, var(--_cs-light-color-surface-raised))var(--_cs-dark, var(--_cs-dark-color-surface-raised));
1235
+ --cs-color-text-primary: var(--_cs-light, var(--_cs-light-color-text-primary))var(--_cs-dark, var(--_cs-dark-color-text-primary));
1236
+ --cs-color-text-inverse: var(--_cs-light, var(--_cs-light-color-text-inverse))var(--_cs-dark, var(--_cs-dark-color-text-inverse));
1237
+ --cs-color-text-accent: var(--_cs-light, var(--_cs-light-color-text-accent))var(--_cs-dark, var(--_cs-dark-color-text-accent));
1238
+ --cs-color-text-muted: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-text-muted))var(--_cs-dark, var(--_cs-dark-color-text-muted)))var(--_cs-high, var(--_cs-light, #45210E)var(--_cs-dark, #F5EAD9));
1239
+ --cs-color-semantic-success: var(--_cs-light, var(--_cs-light-color-semantic-success))var(--_cs-dark, var(--_cs-dark-color-semantic-success));
1240
+ --cs-color-semantic-danger: var(--_cs-light, var(--_cs-light-color-semantic-danger))var(--_cs-dark, var(--_cs-dark-color-semantic-danger));
1241
+ --cs-color-semantic-warning: var(--_cs-light, var(--_cs-light-color-semantic-warning))var(--_cs-dark, var(--_cs-dark-color-semantic-warning));
1242
+ --cs-color-semantic-info: var(--_cs-light, var(--_cs-light-color-semantic-info))var(--_cs-dark, var(--_cs-dark-color-semantic-info));
1243
+ --cs-color-semantic-success-fg: var(--_cs-light, var(--_cs-light-color-semantic-success-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-success-fg));
1244
+ --cs-color-semantic-danger-fg: var(--_cs-light, var(--_cs-light-color-semantic-danger-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-fg));
1245
+ --cs-color-semantic-warning-fg: var(--_cs-light, var(--_cs-light-color-semantic-warning-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-fg));
1246
+ --cs-color-semantic-info-fg: var(--_cs-light, var(--_cs-light-color-semantic-info-fg))var(--_cs-dark, var(--_cs-dark-color-semantic-info-fg));
1247
+ --cs-color-semantic-success-text: var(--_cs-light, var(--_cs-light-color-semantic-success-text))var(--_cs-dark, var(--_cs-dark-color-semantic-success-text));
1248
+ --cs-color-semantic-danger-text: var(--_cs-light, var(--_cs-light-color-semantic-danger-text))var(--_cs-dark, var(--_cs-dark-color-semantic-danger-text));
1249
+ --cs-color-semantic-warning-text: var(--_cs-light, var(--_cs-light-color-semantic-warning-text))var(--_cs-dark, var(--_cs-dark-color-semantic-warning-text));
1250
+ --cs-color-semantic-info-text: var(--_cs-light, var(--_cs-light-color-semantic-info-text))var(--_cs-dark, var(--_cs-dark-color-semantic-info-text));
1251
+ --cs-doc-ink: var(--_cs-light, var(--_cs-light-doc-ink))var(--_cs-dark, var(--_cs-dark-doc-ink));
1252
+ --cs-doc-slate: var(--_cs-light, var(--_cs-light-doc-slate))var(--_cs-dark, var(--_cs-dark-doc-slate));
1253
+ --cs-doc-fill: var(--_cs-light, var(--_cs-light-doc-fill))var(--_cs-dark, var(--_cs-dark-doc-fill));
1254
+ --cs-doc-fill-ink: var(--_cs-light, var(--_cs-light-doc-fill-ink))var(--_cs-dark, var(--_cs-dark-doc-fill-ink));
1255
+ --cs-color-accent-ochre: var(--_cs-light, var(--_cs-light-color-accent-ochre))var(--_cs-dark, var(--_cs-dark-color-accent-ochre));
1256
+ --cs-color-border-default: var(--_cs-standard, var(--_cs-light, var(--_cs-light-color-border-default))var(--_cs-dark, var(--_cs-dark-color-border-default)))var(--_cs-high, var(--_cs-light, #9a8060)var(--_cs-dark, #7a6450));
1257
+ --cs-color-link: var(--_cs-light, var(--_cs-light-color-link))var(--_cs-dark, var(--_cs-dark-color-link));
1258
+ --cs-color-link-hover: var(--_cs-light, var(--_cs-light-color-link-hover))var(--_cs-dark, var(--_cs-dark-color-link-hover));
1259
+ --cs-component-button-primary-bg: var(--_cs-light, var(--_cs-light-component-button-primary-bg))var(--_cs-dark, var(--_cs-dark-component-button-primary-bg));
1260
+ --cs-component-button-primary-fg: var(--_cs-light, var(--_cs-light-component-button-primary-fg))var(--_cs-dark, var(--_cs-dark-component-button-primary-fg));
1261
+ --cs-component-textfield-border-default: var(--_cs-light, var(--_cs-light-component-textfield-border-default))var(--_cs-dark, var(--_cs-dark-component-textfield-border-default));
1262
+ --cs-shadow-xs: var(--_cs-light, var(--_cs-light-shadow-xs))var(--_cs-dark, var(--_cs-dark-shadow-xs));
1263
+ --cs-shadow-sm: var(--_cs-light, var(--_cs-light-shadow-sm))var(--_cs-dark, var(--_cs-dark-shadow-sm));
1264
+ --cs-shadow-md: var(--_cs-light, var(--_cs-light-shadow-md))var(--_cs-dark, var(--_cs-dark-shadow-md));
1265
+ --cs-shadow-lg: var(--_cs-light, var(--_cs-light-shadow-lg))var(--_cs-dark, var(--_cs-dark-shadow-lg));
1266
+ --cs-shadow-xl: var(--_cs-light, var(--_cs-light-shadow-xl))var(--_cs-dark, var(--_cs-dark-shadow-xl));
1267
+ --cs-accent: var(--_cs-light, var(--_cs-light-accent))var(--_cs-dark, var(--_cs-dark-accent));
1268
+ --cs-accent-strong: var(--_cs-light, var(--_cs-light-accent-strong))var(--_cs-dark, var(--_cs-dark-accent-strong));
1269
+ --cs-accent-bright: var(--_cs-light, var(--_cs-light-accent-bright))var(--_cs-dark, var(--_cs-dark-accent-bright));
1270
+ --cs-accent-on: var(--_cs-light, var(--_cs-light-accent-on))var(--_cs-dark, var(--_cs-dark-accent-on));
1271
+ --cs-accent-on-strong: var(--_cs-light, var(--_cs-light-accent-on-strong))var(--_cs-dark, var(--_cs-dark-accent-on-strong));
1272
+ --cs-accent-tint: var(--_cs-light, var(--_cs-light-accent-tint))var(--_cs-dark, var(--_cs-dark-accent-tint));
1273
+ --cs-accent-ink: var(--_cs-light, var(--_cs-light-accent-ink))var(--_cs-dark, var(--_cs-dark-accent-ink));
1274
+ --cs-accent-glow: var(--_cs-light, var(--_cs-light-accent-glow))var(--_cs-dark, var(--_cs-dark-accent-glow));
1275
+ --cs-accent-grad-a: var(--_cs-light, var(--_cs-light-accent-grad-a))var(--_cs-dark, var(--_cs-dark-accent-grad-a));
1276
+ --cs-accent-grad-b: var(--_cs-light, var(--_cs-light-accent-grad-b))var(--_cs-dark, var(--_cs-dark-accent-grad-b));
1277
+ color-scheme: var(--_cs-light, light)var(--_cs-dark, dark);
1276
1278
  }/* Source: tokens/styles.css *//* Style axis — data-cs-style packs.
1277
1279
  *
1278
1280
  * Sole pack today: liquid-glass ≡ current elevation + base/glass.css materials.
@@ -1307,28 +1309,28 @@
1307
1309
  --cs-density-control-gap: 6px;
1308
1310
 
1309
1311
  --cs-component-button-gap: 6px;
1310
- --cs-component-button-xs-paddingY: 3px;
1311
- --cs-component-button-xs-padding-y: var(--cs-component-button-xs-paddingY);
1312
- --cs-component-button-xs-paddingX: 8px;
1313
- --cs-component-button-xs-padding-x: var(--cs-component-button-xs-paddingX);
1314
- --cs-component-button-sm-paddingY: 6px;
1315
- --cs-component-button-sm-padding-y: var(--cs-component-button-sm-paddingY);
1316
- --cs-component-button-sm-paddingX: 12px;
1317
- --cs-component-button-sm-padding-x: var(--cs-component-button-sm-paddingX);
1318
- --cs-component-button-md-paddingY: 10px;
1319
- --cs-component-button-md-padding-y: var(--cs-component-button-md-paddingY);
1320
- --cs-component-button-md-paddingX: 16px;
1321
- --cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX);
1312
+ --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
1313
+ --cs-component-button-xs-padding-y: 3px;
1314
+ --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
1315
+ --cs-component-button-xs-padding-x: 8px;
1316
+ --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
1317
+ --cs-component-button-sm-padding-y: 6px;
1318
+ --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
1319
+ --cs-component-button-sm-padding-x: 12px;
1320
+ --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
1321
+ --cs-component-button-md-padding-y: 10px;
1322
+ --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
1323
+ --cs-component-button-md-padding-x: 16px;
1322
1324
  /* md minHeight stays 44px — immutable touch floor */
1323
- --cs-component-button-lg-paddingY: 12px;
1324
- --cs-component-button-lg-padding-y: var(--cs-component-button-lg-paddingY);
1325
- --cs-component-button-lg-paddingX: 22px;
1326
- --cs-component-button-lg-padding-x: var(--cs-component-button-lg-paddingX);
1325
+ --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
1326
+ --cs-component-button-lg-padding-y: 12px;
1327
+ --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
1328
+ --cs-component-button-lg-padding-x: 22px;
1327
1329
 
1328
- --cs-component-textfield-paddingY: 8px;
1329
- --cs-component-textfield-padding-y: var(--cs-component-textfield-paddingY);
1330
- --cs-component-textfield-paddingX: 10px;
1331
- --cs-component-textfield-padding-x: var(--cs-component-textfield-paddingX);
1330
+ --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
1331
+ --cs-component-textfield-padding-y: 8px;
1332
+ --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
1333
+ --cs-component-textfield-padding-x: 10px;
1332
1334
  /* textfield minHeight stays 44px */
1333
1335
  }/* Explicit comfortable resets every density-controlled value, even inside compact.
1334
1336
  * Keep component defaults aligned with component-tokens.css; browser parity tests
@@ -1341,26 +1343,26 @@
1341
1343
  --cs-density-space-6: var(--cs-space-6);
1342
1344
  --cs-density-control-gap: var(--cs-component-button-gap);
1343
1345
  --cs-component-button-gap: 8px;
1344
- --cs-component-button-xs-paddingY: 4px;
1345
- --cs-component-button-xs-padding-y: var(--cs-component-button-xs-paddingY);
1346
- --cs-component-button-xs-paddingX: 10px;
1347
- --cs-component-button-xs-padding-x: var(--cs-component-button-xs-paddingX);
1348
- --cs-component-button-sm-paddingY: 8px;
1349
- --cs-component-button-sm-padding-y: var(--cs-component-button-sm-paddingY);
1350
- --cs-component-button-sm-paddingX: 14px;
1351
- --cs-component-button-sm-padding-x: var(--cs-component-button-sm-paddingX);
1352
- --cs-component-button-md-paddingY: 12px;
1353
- --cs-component-button-md-padding-y: var(--cs-component-button-md-paddingY);
1354
- --cs-component-button-md-paddingX: 20px;
1355
- --cs-component-button-md-padding-x: var(--cs-component-button-md-paddingX);
1356
- --cs-component-button-lg-paddingY: 16px;
1357
- --cs-component-button-lg-padding-y: var(--cs-component-button-lg-paddingY);
1358
- --cs-component-button-lg-paddingX: 28px;
1359
- --cs-component-button-lg-padding-x: var(--cs-component-button-lg-paddingX);
1360
- --cs-component-textfield-paddingY: 10px;
1361
- --cs-component-textfield-padding-y: var(--cs-component-textfield-paddingY);
1362
- --cs-component-textfield-paddingX: 12px;
1363
- --cs-component-textfield-padding-x: var(--cs-component-textfield-paddingX);
1346
+ --cs-component-button-xs-padding-y: 4px;
1347
+ --cs-component-button-xs-paddingY: var(--cs-component-button-xs-padding-y);
1348
+ --cs-component-button-xs-padding-x: 10px;
1349
+ --cs-component-button-xs-paddingX: var(--cs-component-button-xs-padding-x);
1350
+ --cs-component-button-sm-padding-y: 8px;
1351
+ --cs-component-button-sm-paddingY: var(--cs-component-button-sm-padding-y);
1352
+ --cs-component-button-sm-padding-x: 14px;
1353
+ --cs-component-button-sm-paddingX: var(--cs-component-button-sm-padding-x);
1354
+ --cs-component-button-md-padding-y: 12px;
1355
+ --cs-component-button-md-paddingY: var(--cs-component-button-md-padding-y);
1356
+ --cs-component-button-md-padding-x: 20px;
1357
+ --cs-component-button-md-paddingX: var(--cs-component-button-md-padding-x);
1358
+ --cs-component-button-lg-padding-y: 16px;
1359
+ --cs-component-button-lg-paddingY: var(--cs-component-button-lg-padding-y);
1360
+ --cs-component-button-lg-padding-x: 28px;
1361
+ --cs-component-button-lg-paddingX: var(--cs-component-button-lg-padding-x);
1362
+ --cs-component-textfield-padding-y: 10px;
1363
+ --cs-component-textfield-paddingY: var(--cs-component-textfield-padding-y);
1364
+ --cs-component-textfield-padding-x: 12px;
1365
+ --cs-component-textfield-paddingX: var(--cs-component-textfield-padding-x);
1364
1366
  }/* High contrast Theme attribute — strengthens muted text + borders.
1365
1367
  * Mirrors prefers-contrast: more intent; does not touch anchors or primary text. */[data-cs-contrast="high"] {
1366
1368
  --cs-color-border-default: #9a8060;
@@ -1378,7 +1380,7 @@
1378
1380
  }
1379
1381
  }@layer cs-components {/* Source: base/typography.css *//* CyberSkill — typographic role utilities. Each bundles size + line-height +
1380
1382
  * weight + tracking so consumers write intent (.cs-h1) not magic numbers.
1381
- * Built on the semantic aliases in tokens/typography.css. */.cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }.cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }.cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; }.cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); }.cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }.cs-body-lg { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body-lg); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }.cs-body { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }.cs-secondary { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-secondary); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }.cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }.cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }.cs-mono { font-family: var(--cs-font-family-mono); }/* Opt in to the display face for a subtree — retargets --cs-heading-family so
1383
+ * Built on the semantic aliases in tokens/typography.css. */.cs-display { font-family: var(--cs-heading-family); font-size: var(--cs-text-display); line-height: var(--cs-font-lineHeight-tight); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }.cs-h1 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h1); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight-strong); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }.cs-h2 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h2); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); letter-spacing: var(--cs-heading-tracking); text-wrap: balance; overflow-wrap: break-word; }.cs-h3 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h3); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-heading-weight); overflow-wrap: break-word; }.cs-h4 { font-family: var(--cs-heading-family); font-size: var(--cs-text-h4); line-height: var(--cs-font-lineHeight-heading); font-weight: var(--cs-font-weight-semibold); }.cs-body-lg { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body-lg); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }.cs-body { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-body); line-height: var(--cs-font-lineHeight-body); font-weight: var(--cs-font-weight-regular); text-wrap: pretty; }.cs-secondary { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-secondary); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }.cs-caption { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-caption); line-height: var(--cs-font-lineHeight-body); color: var(--cs-color-text-muted); }.cs-eyebrow { font-family: var(--cs-font-family-ui); font-size: var(--cs-text-eyebrow); font-weight: var(--cs-font-weight-bold); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-accent); }.cs-mono { font-family: var(--cs-font-family-mono); }/* Opt in to the display face for a subtree — retargets --cs-heading-family so
1382
1384
  * .cs-display/.cs-h1…h4 and bare headings follow, body copy stays on the UI
1383
1385
  * face. Space Grotesk tops out at 700, so --cs-heading-weight-strong (800)
1384
1386
  * clamps to 700 within that family (CSS does not hop to Be Vietnam Pro for a
@@ -1413,15 +1415,15 @@
1413
1415
  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1414
1416
  }.cs-button--secondary {
1415
1417
  background: var(--cs-color-surface-panel, #ffffff);
1416
- border-color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-brand-ochre));
1417
- color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-brand-ochre));
1418
+ border-color: var(--_cs-light, var(--cs-accent-strong, #45210e))var(--_cs-dark, var(--cs-accent, #f4ba17));
1419
+ color: var(--_cs-light, var(--cs-color-text-accent, #45210e))var(--_cs-dark, var(--cs-color-text-accent, #f4ba17));
1418
1420
  }.cs-button--secondary:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }.cs-button--tertiary {
1419
1421
  background: var(--cs-color-surface-raised, #fbf4e9);
1420
1422
  border-color: transparent;
1421
- color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-text-primary));
1423
+ color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-text-primary));
1422
1424
  }.cs-button--tertiary:hover { filter: none; border-color: var(--cs-color-border-default, #e7d9c6); }.cs-button--ghost {
1423
1425
  background: transparent;
1424
- color: var(--_cs-light, var(--cs-color-brand-umber, #45210e)) var(--_cs-dark, var(--cs-color-text-primary));
1426
+ color: var(--_cs-light, var(--cs-color-brand-umber, #45210e))var(--_cs-dark, var(--cs-color-text-primary));
1425
1427
  }.cs-button--ghost:hover { background: var(--cs-color-surface-raised, #fbf4e9); filter: none; }/* Dark theme: umber text/border on the low-emphasis buttons is invisible on dark surfaces —
1426
1428
  remap so secondary reads as an ochre outline and tertiary/ghost use the light body colour. */.cs-button--danger {
1427
1429
  background: var(--cs-color-semantic-danger, #b42318);
@@ -1454,7 +1456,7 @@
1454
1456
  .cs-button { min-height: var(--cs-component-button-md-minHeight-coarse, var(--cs-component-button-md-minHeight, 44px)); }
1455
1457
  .cs-button--sm { min-height: var(--cs-component-button-sm-minHeight-coarse, 44px); }
1456
1458
  .cs-button--xs { min-height: var(--cs-component-button-xs-minHeight-coarse, 44px); }
1457
- }/* ---- TextField ---- */.cs-field { color: var(--cs-color-text-primary, #45210e); display: grid; gap: 0.375rem; }.cs-field__label { font-weight: 700; }.cs-field__description { color: var(--cs-color-text-muted, #3f2d21); font-size: 0.875rem; }.cs-field__control {
1459
+ }/* ---- TextField ---- */.cs-field { align-content: start; color: var(--cs-color-text-primary, #45210e); display: grid; gap: 0.375rem; }.cs-field__label { font-weight: 700; }.cs-field__description { color: var(--cs-color-text-muted, #3f2d21); font-size: 0.875rem; }.cs-field__control {
1458
1460
  border: 1px solid var(--cs-component-textfield-border-default, #bfa58f);
1459
1461
  border-radius: var(--cs-radius-md, 8px);
1460
1462
  background: var(--cs-color-surface-panel, #fff);
@@ -1513,11 +1515,12 @@
1513
1515
  }.cs-table caption { font-weight: 700; margin-block-end: 0.5rem; text-align: start; }.cs-table__empty { color: var(--cs-color-text-muted, #3f2d21); }/* ---- AIDisclosureBadge ---- */.cs-ai-disclosure { display: inline-block; position: relative; }.cs-ai-disclosure__badge {
1514
1516
  background: var(--cs-color-semantic-info, #1d4ed8); border: 0; border-radius: 999px;
1515
1517
  color: var(--cs-color-semantic-info-fg, #ffffff); font: inherit; font-size: 0.875rem; font-weight: 700;
1516
- padding: 0.25rem 0.625rem; cursor: pointer;
1518
+ min-block-size: 32px; padding: 0.25rem 0.75rem; cursor: pointer;
1517
1519
  }.cs-ai-disclosure__panel {
1518
1520
  background: var(--cs-color-surface-panel, #ffffff);
1521
+ color: var(--cs-color-text-primary, #45210e);
1519
1522
  border: 1px solid rgba(69, 33, 14, 0.18); border-radius: var(--cs-radius-md, 8px);
1520
- box-shadow: var(--cs-shadow-md, 0 12px 30px rgba(31, 19, 11, 0.18));
1523
+ box-shadow: var(--cs-shadow-xs, 0 1px 2px rgba(31, 19, 11, 0.08));
1521
1524
  display: grid; gap: 0.375rem; inset-block-start: calc(100% + 0.375rem); inset-inline-start: 0;
1522
1525
  min-inline-size: 18rem; padding: 0.75rem; position: absolute; z-index: var(--cs-depth-dropdown, 60);
1523
1526
  }.cs-ai-disclosure__sources { color: var(--cs-color-text-muted, #3f2d21); font-size: 0.8125rem; }/* ---- HumanReviewGate ---- */.cs-review-gate {
@@ -1532,7 +1535,7 @@
1532
1535
  .cs-ai-disclosure, .cs-review-gate, .cs-logo {
1533
1536
  font-family: var(--cs-font-family-ui, ui-sans-serif, system-ui);
1534
1537
  }/* Source: base/forms.css *//* CyberSkill — form controls (.cs-*). Built on the design tokens; native
1535
- * controls use accent-color for brand-tinted checks/radios (accessible + minimal). *//* Select — reuses .cs-field label/description/error */.cs-select { position: relative; display: block; }.cs-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }.cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }.cs-select select.cs-field__control:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }/* NativeSelect — lean progressive-enhancement companion beside Select */.cs-native-select { position: relative; display: block; }.cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }.cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }.cs-native-select select.cs-field__control:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-native-select--sm select.cs-field__control { min-block-size: 36px; padding-block: 6px; font-size: var(--cs-font-size-sm); }.cs-native-select--md select.cs-field__control { min-block-size: 44px; }/* Checkbox + Radio — native, brand accent */.cs-check, .cs-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); line-height: 1.4; }.cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); cursor: pointer; }.cs-check.is-disabled, .cs-radio.is-disabled { opacity: 0.55; cursor: not-allowed; }.cs-check__text, .cs-radio__text { display: grid; gap: 2px; }.cs-check__desc, .cs-radio__desc { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }.cs-radio-group { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }.cs-radio-group > legend { font-weight: 700; padding: 0; margin-block-end: 6px; }/* Switch — custom track/knob */.cs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }.cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }.cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }.cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); }.cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }.cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-switch.is-disabled { opacity: 0.55; cursor: not-allowed; }/* Textarea reuses .cs-field; give it sane sizing */textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: var(--cs-font-lineHeight-body); }/* Source: base/feedback.css *//* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. *//* Badge — compact status label */.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }.cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); }.cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }.cs-badge--success { background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg); border-color: transparent; }.cs-badge--danger { background: var(--cs-color-semantic-danger); color: var(--cs-color-semantic-danger-fg); border-color: transparent; }.cs-badge--warning { background: var(--cs-color-semantic-warning); color: var(--cs-color-semantic-warning-fg); border-color: transparent; }.cs-badge--info { background: var(--cs-color-semantic-info); color: var(--cs-color-semantic-info-fg); border-color: transparent; }.cs-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }/* Tag / Chip — removable */.cs-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; padding: 5px 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }.cs-tag__close { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; }.cs-tag__close:hover { background: color-mix(in oklab, var(--cs-color-brand-umber) 12%, transparent); }/* Alert / Banner */.cs-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); align-items: start; }.cs-alert__icon { color: var(--cs-color-text-accent); display: grid; place-items: start; padding-block-start: 1px; }.cs-alert__title { font-weight: 700; margin: 0 0 2px; }.cs-alert__body { margin: 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-alert__dismiss { appearance: none; border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; font-size: var(--cs-font-size-md, 1.125rem); line-height: 1; padding: 0 2px; border-radius: var(--cs-radius-sm); }.cs-alert__dismiss:hover { color: var(--cs-color-text-primary); }.cs-alert__dismiss:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-alert--info { border-inline-start: 4px solid var(--cs-color-semantic-info); }.cs-alert--info .cs-alert__icon { color: var(--cs-color-semantic-info-text); }.cs-alert--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }.cs-alert--success .cs-alert__icon { color: var(--cs-color-semantic-success-text); }.cs-alert--warning { border-inline-start: 4px solid var(--cs-color-semantic-warning); }.cs-alert--warning .cs-alert__icon { color: var(--cs-color-semantic-warning-text); }.cs-alert--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }.cs-alert--danger .cs-alert__icon { color: var(--cs-color-semantic-danger-text); }/* Toast */.cs-toast-stack { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--cs-depth-toast); display: grid; gap: 10px; max-inline-size: min(380px, calc(100vw - 40px)); }.cs-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-md); color: var(--cs-color-text-primary); animation: cs-toast-in var(--cs-duration-base) var(--cs-ease-entrance); }.cs-toast__icon { color: var(--cs-color-text-accent); }.cs-toast--default { border-inline-start: 4px solid var(--cs-color-semantic-info); }.cs-toast--default .cs-toast__icon { color: var(--cs-color-semantic-info-text); }.cs-toast--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }.cs-toast--success .cs-toast__icon { color: var(--cs-color-semantic-success-text); }.cs-toast--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }.cs-toast--danger .cs-toast__icon { color: var(--cs-color-semantic-danger-text); }.cs-toast__title { font-weight: 700; font-size: var(--cs-font-size-sm); }.cs-toast__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 2px; }.cs-toast__close { border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); padding: 0; display: grid; place-items: center; }@keyframes cs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }/* Spinner */.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-color-brand-umber) 22%, transparent)) var(--_cs-dark, color-mix(in oklab, var(--cs-color-brand-ochre) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); animation: cs-spin 0.62s linear infinite; }@media (prefers-reduced-motion: reduce) { .cs-spinner { animation: none; } }/* Progress bar */.cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-color-brand-ochre); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }.cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); }.cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); }/* Skeleton */.cs-skeleton { display: block; border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-color-surface-raised) 25%, color-mix(in oklab, var(--cs-color-surface-raised) 55%, var(--cs-color-surface-panel)) 37%, var(--cs-color-surface-raised) 63%); background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite; }.cs-skeleton--text { block-size: 0.75em; margin-block: 0.25em; }.cs-skeleton--circle { border-radius: 50%; }@keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }@media (prefers-reduced-motion: reduce) { .cs-skeleton { animation: none; } }/* Source: base/data.css *//* CyberSkill — data display + layout (.cs-*). *//* Card */.cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }.cs-card--flat { box-shadow: none; }.cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), box-shadow var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }.cs-card--interactive:hover { border-color: var(--cs-color-brand-ochre); box-shadow: var(--cs-shadow-md); }.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); }.cs-card--flat.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-card--interactive:active { transform: translateY(1px); }.cs-card__media { display: block; inline-size: 100%; }.cs-card__header { padding: 18px 20px 0; }.cs-card__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; line-height: var(--cs-font-lineHeight-heading); }.cs-card__subtitle { margin: 4px 0 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-card__body { padding: 16px 20px; }.cs-card__body > :first-child { margin-block-start: 0; }.cs-card__body > :last-child { margin-block-end: 0; }.cs-card__footer { padding: 12px 20px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }/* Stat */.cs-stat { display: grid; gap: 3px; }.cs-stat__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }.cs-stat__value { font-size: var(--cs-font-size-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--cs-letter-spacing-tight); }.cs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cs-font-size-sm); font-weight: 700; }.cs-stat__delta--up { color: var(--cs-color-semantic-success-text); }.cs-stat__delta--down { color: var(--cs-color-semantic-danger-text); }.cs-stat__delta--flat { color: var(--cs-color-text-muted); }/* Avatar */.cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-color-brand-umber); color: var(--cs-color-brand-ochre); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }.cs-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }.cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--cs-font-size-xs); }.cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--cs-font-size-sm); }.cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--cs-font-size-lg); }.cs-avatar--square { border-radius: var(--cs-radius-md); }.cs-avatar-group { display: inline-flex; }.cs-avatar-group > .cs-avatar { box-shadow: 0 0 0 2px var(--cs-color-surface-panel); }.cs-avatar-group > .cs-avatar + .cs-avatar { margin-inline-start: -10px; }/* Tooltip */.cs-tooltip { position: relative; display: inline-flex; }.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }.cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }.cs-tooltip:not([data-managed]):hover .cs-tooltip__bubble, .cs-tooltip:not([data-managed]):focus-within .cs-tooltip__bubble, .cs-tooltip[data-open="true"] .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }/* Divider */.cs-divider { border: 0; block-size: 1px; background: var(--cs-color-border-default); margin-block: var(--cs-space-4); }.cs-divider--label { display: flex; align-items: center; gap: 12px; background: none; block-size: auto; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-divider--label::before, .cs-divider--label::after { content: ""; flex: 1; block-size: 1px; background: var(--cs-color-border-default); }.cs-divider--vertical { inline-size: 1px; block-size: auto; align-self: stretch; margin-inline: var(--cs-space-4); margin-block: 0; }/* ScrollArea — focusable overflow for dense panels */.cs-scroll-area {
1538
+ * controls use accent-color for brand-tinted checks/radios (accessible + minimal). *//* Select — reuses .cs-field label/description/error */.cs-select { position: relative; display: block; }.cs-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }.cs-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }.cs-select select.cs-field__control:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }/* NativeSelect — lean progressive-enhancement companion beside Select */.cs-native-select { position: relative; display: block; }.cs-native-select select.cs-field__control { appearance: none; -webkit-appearance: none; width: 100%; padding-inline-end: 38px; cursor: pointer; background: var(--cs-color-surface-panel); }.cs-native-select__chevron { position: absolute; inset-inline-end: 12px; inset-block-start: 50%; transform: translateY(-50%); pointer-events: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }.cs-native-select select.cs-field__control:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-color: var(--cs-color-brand-ochre); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-native-select--sm select.cs-field__control { min-block-size: 36px; padding-block: 6px; font-size: var(--cs-font-size-sm); }.cs-native-select--md select.cs-field__control { min-block-size: 44px; }/* Checkbox + Radio — native, brand accent */.cs-check, .cs-radio { display: inline-flex; align-items: flex-start; gap: 10px; cursor: pointer; color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); line-height: 1.4; }.cs-check input, .cs-radio input { inline-size: 20px; block-size: 20px; margin: 0; flex: none; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); cursor: pointer; }.cs-check.is-disabled, .cs-radio.is-disabled { opacity: 0.55; cursor: not-allowed; }.cs-check__text, .cs-radio__text { display: grid; gap: 2px; }.cs-check__desc, .cs-radio__desc { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }.cs-radio-group { display: grid; gap: 10px; border: 0; padding: 0; margin: 0; }.cs-radio-group > legend { font-weight: 700; padding: 0; margin-block-end: 6px; }/* Switch — custom track/knob */.cs-switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-family: var(--cs-font-family-ui); color: var(--cs-color-text-primary); }.cs-switch input { position: absolute; opacity: 0; width: 0; height: 0; }.cs-switch__track { inline-size: 44px; block-size: 26px; border-radius: 999px; background: var(--cs-color-border-default); position: relative; transition: background var(--cs-duration-fast) var(--cs-ease-standard); flex: none; }.cs-switch__track::after { content: ""; position: absolute; inset-block-start: 3px; inset-inline-start: 3px; inline-size: 20px; block-size: 20px; border-radius: 50%; background: var(--cs-color-surface-panel, #fff); box-shadow: var(--cs-shadow-xs); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }.cs-switch input:checked + .cs-switch__track { background: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); }.cs-switch input:checked + .cs-switch__track::after { transform: translateX(18px); }.cs-switch input:focus-visible + .cs-switch__track { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-switch:focus-within { outline-style: solid; outline-width: 2px; outline-color: var(--cs-color-text-primary); outline-offset: 4px; border-radius: 6px; }.cs-switch.is-disabled { opacity: 0.55; cursor: not-allowed; }/* Textarea reuses .cs-field; give it sane sizing */textarea.cs-field__control { min-height: 96px; resize: vertical; line-height: var(--cs-font-lineHeight-body); }/* Source: base/feedback.css *//* CyberSkill — feedback + status (.cs-*). Semantic colour never the only signal. *//* Badge — compact status label */.cs-badge { display: inline-flex; align-items: center; gap: 5px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-xs); font-weight: 700; line-height: 1; padding: 4px 9px; border-radius: var(--cs-radius-full); text-transform: uppercase; letter-spacing: 0.04em; background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }.cs-badge--solid { border-color: transparent; color: #fff; /* on-brand-umber ink (allowlisted; text-inverse flips in dark) */ background: var(--cs-color-brand-umber); }.cs-badge--ochre { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; }[data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--solid { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); }[data-cs-element]:not([data-cs-element="tho"]:not([data-cs-variant]), [data-cs-element="tho"][data-cs-variant=""]) .cs-badge--ochre { background: var(--cs-accent-tint); color: var(--cs-color-text-accent); border-color: color-mix(in oklab, var(--cs-accent) 55%, transparent); }.cs-badge--success { background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg); border-color: transparent; }.cs-badge--danger { background: var(--cs-color-semantic-danger); color: var(--cs-color-semantic-danger-fg); border-color: transparent; }.cs-badge--warning { background: var(--cs-color-semantic-warning); color: var(--cs-color-semantic-warning-fg); border-color: transparent; }.cs-badge--info { background: var(--cs-color-semantic-info); color: var(--cs-color-semantic-info-fg); border-color: transparent; }.cs-badge__dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: currentColor; }/* Tag / Chip — removable */.cs-tag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; padding: 5px 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); color: var(--cs-color-text-accent); border: 1px solid var(--cs-color-border-default); }.cs-tag__close { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; padding: 0; }.cs-tag__close:hover { background: color-mix(in oklab, var(--cs-color-brand-umber) 12%, transparent); }/* Alert / Banner */.cs-alert { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; padding: 14px 16px; border-radius: var(--cs-radius-md); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); align-items: start; }.cs-alert__icon { color: var(--cs-color-text-accent); display: grid; place-items: start; padding-block-start: 1px; }.cs-alert__title { font-weight: 700; margin: 0 0 2px; }.cs-alert__body { margin: 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-alert__dismiss { appearance: none; border: 0; background: transparent; color: var(--cs-color-text-muted); cursor: pointer; font-size: var(--cs-font-size-md, 1.125rem); line-height: 1; padding: 0 2px; border-radius: var(--cs-radius-sm); }.cs-alert__dismiss:hover { color: var(--cs-color-text-primary); }.cs-alert__dismiss:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-alert--info { border-inline-start: 4px solid var(--cs-color-semantic-info); }.cs-alert--info .cs-alert__icon { color: var(--cs-color-semantic-info-text); }.cs-alert--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }.cs-alert--success .cs-alert__icon { color: var(--cs-color-semantic-success-text); }.cs-alert--warning { border-inline-start: 4px solid var(--cs-color-semantic-warning); }.cs-alert--warning .cs-alert__icon { color: var(--cs-color-semantic-warning-text); }.cs-alert--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }.cs-alert--danger .cs-alert__icon { color: var(--cs-color-semantic-danger-text); }/* Toast */.cs-toast-stack { position: fixed; inset-block-end: 20px; inset-inline-end: 20px; z-index: var(--cs-depth-toast); display: grid; gap: 10px; max-inline-size: min(380px, calc(100% - 40px)); }.cs-toast { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: start; padding: 12px 14px; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); box-shadow: var(--cs-shadow-md); color: var(--cs-color-text-primary); animation: cs-toast-in var(--cs-duration-base) var(--cs-ease-entrance); }.cs-toast__icon { color: var(--cs-color-text-accent); }.cs-toast--default { border-inline-start: 4px solid var(--cs-color-semantic-info); }.cs-toast--default .cs-toast__icon { color: var(--cs-color-semantic-info-text); }.cs-toast--success { border-inline-start: 4px solid var(--cs-color-semantic-success); }.cs-toast--success .cs-toast__icon { color: var(--cs-color-semantic-success-text); }.cs-toast--danger { border-inline-start: 4px solid var(--cs-color-semantic-danger); }.cs-toast--danger .cs-toast__icon { color: var(--cs-color-semantic-danger-text); }.cs-toast__title { font-weight: 700; font-size: var(--cs-font-size-sm); }.cs-toast__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 2px; }.cs-toast__close { border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); padding: 0; display: grid; place-items: center; }@keyframes cs-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }@media (prefers-reduced-motion: reduce) { .cs-toast { animation: none; } }/* Spinner */.cs-spinner { display: inline-block; inline-size: 20px; block-size: 20px; border-radius: 50%; border: 2.5px solid color-mix(in oklab, var(--cs-accent-strong) 22%, transparent); border-color: var(--_cs-light, color-mix(in oklab, var(--cs-accent-strong) 22%, transparent))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 26%, transparent)); border-top-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); animation: cs-spin 0.62s linear infinite; }@media (prefers-reduced-motion: reduce) { .cs-spinner { animation: none; } }/* Progress bar */.cs-progress { inline-size: 100%; block-size: 10px; border-radius: var(--cs-radius-full); background: var(--cs-color-surface-raised); overflow: hidden; }.cs-progress__fill { display: block; block-size: 100%; border-radius: inherit; background: var(--cs-accent); transition: inline-size var(--cs-duration-slow) var(--cs-ease-standard); }.cs-progress--umber .cs-progress__fill { background: var(--cs-color-brand-umber); }.cs-progress--success .cs-progress__fill { background: var(--cs-color-semantic-success); }/* Skeleton */.cs-skeleton { display: block; border-radius: var(--cs-radius-sm); background: linear-gradient(90deg, var(--cs-color-surface-raised) 25%, color-mix(in oklab, var(--cs-color-surface-raised) 55%, var(--cs-color-surface-panel)) 37%, var(--cs-color-surface-raised) 63%); background-size: 400% 100%; animation: cs-shimmer 1.4s ease infinite; }.cs-skeleton--text { block-size: 0.75em; margin-block: 0.25em; }.cs-skeleton--circle { border-radius: 50%; }@keyframes cs-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }@media (prefers-reduced-motion: reduce) { .cs-skeleton { animation: none; } }/* Source: base/data.css *//* CyberSkill — data display + layout (.cs-*). *//* Card */.cs-card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-sm); color: var(--cs-color-text-primary); overflow: hidden; }.cs-card--flat { box-shadow: none; }.cs-card--interactive { cursor: pointer; transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }.cs-card--interactive:hover { border-color: var(--cs-accent); box-shadow: var(--cs-shadow-md); }.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-sm); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); }.cs-card--flat.cs-card--interactive:focus-visible { box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-card--interactive:active { transform: translateY(1px); }.cs-card__media { display: block; inline-size: 100%; }.cs-card__header { padding: 18px 20px 0; }.cs-card__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; line-height: var(--cs-font-lineHeight-heading); }.cs-card__subtitle { margin: 4px 0 0; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-card__body { padding: 16px 20px; }.cs-card__body > :first-child { margin-block-start: 0; }.cs-card__body > :last-child { margin-block-end: 0; }.cs-card__footer { padding: 12px 20px 18px; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }/* Stat */.cs-stat { display: grid; gap: 3px; }.cs-stat__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }.cs-stat__value { font-size: var(--cs-font-size-3xl); font-weight: 800; line-height: 1.1; letter-spacing: var(--cs-letter-spacing-tight); font-variant-numeric: tabular-nums; }.cs-stat__delta { display: inline-flex; align-items: center; gap: 4px; font-size: var(--cs-font-size-sm); font-weight: 700; }.cs-stat__delta--up { color: var(--cs-color-semantic-success-text); }.cs-stat__delta--down { color: var(--cs-color-semantic-danger-text); }.cs-stat__delta--flat { color: var(--cs-color-text-muted); }/* Avatar */.cs-avatar { display: inline-grid; place-items: center; overflow: hidden; border-radius: 50%; background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); font-family: var(--cs-font-family-ui); font-weight: 700; flex: none; user-select: none; }.cs-avatar img { inline-size: 100%; block-size: 100%; object-fit: cover; display: block; }.cs-avatar--sm { inline-size: 28px; block-size: 28px; font-size: var(--cs-font-size-xs); }.cs-avatar--md { inline-size: 40px; block-size: 40px; font-size: var(--cs-font-size-sm); }.cs-avatar--lg { inline-size: 56px; block-size: 56px; font-size: var(--cs-font-size-lg); }.cs-avatar--square { border-radius: var(--cs-radius-md); }.cs-avatar-group { display: inline-flex; }.cs-avatar-group > .cs-avatar { box-shadow: 0 0 0 2px var(--cs-color-surface-panel); }.cs-avatar-group > .cs-avatar + .cs-avatar { margin-inline-start: -10px; }/* Tooltip */.cs-tooltip { position: relative; display: inline-flex; }.cs-tooltip__bubble { position: absolute; inset-block-end: calc(100% + 8px); inset-inline-start: 50%; transform: translateX(-50%) translateY(4px); background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ font-size: var(--cs-font-size-xs); font-weight: 600; line-height: 1.35; padding: 6px 10px; border-radius: var(--cs-radius-sm); white-space: nowrap; max-inline-size: 240px; opacity: 0; pointer-events: none; transition: opacity var(--cs-duration-fast) var(--cs-ease-standard), transform var(--cs-duration-fast) var(--cs-ease-standard); box-shadow: var(--cs-shadow-md); z-index: var(--cs-depth-dropdown, 60); }.cs-tooltip__bubble::after { content: ""; position: absolute; inset-block-start: 100%; inset-inline-start: 50%; transform: translateX(-50%); border: 5px solid transparent; border-block-start-color: var(--cs-color-brand-umber); }.cs-tooltip:not([data-managed]):hover .cs-tooltip__bubble, .cs-tooltip:not([data-managed]):focus-within .cs-tooltip__bubble, .cs-tooltip[data-open="true"] .cs-tooltip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }/* Divider */.cs-divider { border: 0; block-size: 1px; background: var(--cs-color-border-default); margin-block: var(--cs-space-4); }.cs-divider--label { display: flex; align-items: center; gap: 12px; background: none; block-size: auto; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-divider--label::before, .cs-divider--label::after { content: ""; flex: 1; block-size: 1px; background: var(--cs-color-border-default); }.cs-divider--vertical { inline-size: 1px; block-size: auto; align-self: stretch; margin-inline: var(--cs-space-4); margin-block: 0; }/* ScrollArea — focusable overflow for dense panels */.cs-scroll-area {
1536
1539
  overflow: auto;
1537
1540
  overscroll-behavior: contain;
1538
1541
  outline: none;
@@ -1558,7 +1561,7 @@
1558
1561
  .cs-aspect-ratio > video {
1559
1562
  object-fit: cover;
1560
1563
  display: block;
1561
- }/* Hoverable tooltip and a transparent bridge across the visual trigger gap. */.cs-tooltip[data-open="true"] .cs-tooltip__bubble { pointer-events: auto; }.cs-tooltip[data-managed] .cs-tooltip__bubble::before { content: ""; position: absolute; inset-block-start: 100%; inset-inline: 0; block-size: 8px; }/* Portaled tooltip arrows/hover bridges follow the resolved physical side. */.cs-tooltip__bubble[data-cs-placement^="bottom"]::after { top: auto; bottom: 100%; left: 50%; right: auto; transform: translateX(-50%); border-color: transparent; border-bottom-color: var(--cs-color-brand-umber); }.cs-tooltip__bubble[data-cs-placement^="left"]::after { top: 50%; bottom: auto; left: 100%; right: auto; transform: translateY(-50%); border-color: transparent; border-left-color: var(--cs-color-brand-umber); }.cs-tooltip__bubble[data-cs-placement^="right"]::after { top: 50%; bottom: auto; left: auto; right: 100%; transform: translateY(-50%); border-color: transparent; border-right-color: var(--cs-color-brand-umber); }.cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="bottom"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="bottom"]::before { top: auto; bottom: 100%; left: 0; right: 0; block-size: 8px; }.cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="left"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="left"]::before { top: 0; bottom: 0; left: 100%; right: auto; inline-size: 8px; block-size: auto; }.cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="right"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="right"]::before { top: 0; bottom: 0; left: auto; right: 100%; inline-size: 8px; block-size: auto; }.cs-tooltip__bubble[data-cs-placement] { white-space: normal; overflow-wrap: anywhere; }[data-cs-floating-root][data-open="true"] > .cs-tooltip__bubble { opacity: 1; pointer-events: auto; }[data-cs-floating-root][data-managed] > .cs-tooltip__bubble::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }/* Source: base/navigation.css *//* CyberSkill — navigation (.cs-*). *//* Tabs */.cs-tabs { display: flex; gap: 4px; overflow-x: auto; border-block-end: 1px solid var(--cs-color-border-default); }.cs-tab { flex-shrink: 0; appearance: none; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); padding: 10px 14px; cursor: pointer; position: relative; border-block-end: 2px solid transparent; margin-block-end: 0; display: inline-flex; align-items: center; gap: 7px; }.cs-tab:hover { color: var(--cs-color-text-primary); }.cs-tab[aria-selected="true"] { color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); border-block-end-color: var(--cs-color-brand-ochre); }.cs-tab:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; border-radius: var(--cs-radius-sm); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-tab__count { font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-full); padding: 1px 7px; }/* Breadcrumb */.cs-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }.cs-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }.cs-breadcrumb a { color: var(--cs-color-text-muted); text-decoration: none; }.cs-breadcrumb a:hover { color: var(--cs-color-text-accent); }.cs-breadcrumb__sep { color: var(--cs-color-border-default); }.cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }/* Pagination */.cs-pagination { display: inline-flex; align-items: center; gap: 4px; }.cs-pagination button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); cursor: pointer; display: inline-grid; place-items: center; }.cs-pagination button:hover:not(:disabled) { border-color: var(--cs-color-brand-ochre); }.cs-pagination button[aria-current="page"] { background: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse)) var(--_cs-dark, var(--cs-color-brand-umber)); border-color: transparent; }.cs-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }.cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }/* Menu / Dropdown */.cs-menu { position: relative; display: inline-block; }.cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; z-index: var(--cs-depth-dropdown, 60); display: grid; gap: 2px; }.cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }.cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-menu__item:hover { background: var(--cs-color-surface-raised); }.cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-menu__item--danger { color: var(--cs-color-semantic-danger-text); }.cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }.cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }.cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }/* Source: base/ai.css *//* CyberSkill — AI-native surfaces (.cs-*). The brand is AI-native: Lumi (the
1564
+ }/* Hoverable tooltip and a transparent bridge across the visual trigger gap. */.cs-tooltip[data-open="true"] .cs-tooltip__bubble { pointer-events: auto; }.cs-tooltip[data-managed] .cs-tooltip__bubble::before { content: ""; position: absolute; inset-block-start: 100%; inset-inline: 0; block-size: 8px; }/* Portaled tooltip arrows/hover bridges follow the resolved physical side. */.cs-tooltip__bubble[data-cs-placement^="bottom"]::after { top: auto; bottom: 100%; left: 50%; right: auto; transform: translateX(-50%); border-color: transparent; border-bottom-color: var(--cs-color-brand-umber); }.cs-tooltip__bubble[data-cs-placement^="left"]::after { top: 50%; bottom: auto; left: 100%; right: auto; transform: translateY(-50%); border-color: transparent; border-left-color: var(--cs-color-brand-umber); }.cs-tooltip__bubble[data-cs-placement^="right"]::after { top: 50%; bottom: auto; left: auto; right: 100%; transform: translateY(-50%); border-color: transparent; border-right-color: var(--cs-color-brand-umber); }.cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="bottom"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="bottom"]::before { top: auto; bottom: 100%; left: 0; right: 0; block-size: 8px; }.cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="left"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="left"]::before { top: 0; bottom: 0; left: 100%; right: auto; inline-size: 8px; block-size: auto; }.cs-tooltip[data-managed] .cs-tooltip__bubble[data-cs-placement^="right"]::before, [data-cs-floating-root][data-managed] .cs-tooltip__bubble[data-cs-placement^="right"]::before { top: 0; bottom: 0; left: auto; right: 100%; inline-size: 8px; block-size: auto; }.cs-tooltip__bubble[data-cs-placement] { white-space: normal; overflow-wrap: anywhere; }[data-cs-floating-root][data-open="true"] > .cs-tooltip__bubble { opacity: 1; pointer-events: auto; }[data-cs-floating-root][data-managed] > .cs-tooltip__bubble::before { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; }/* Source: base/navigation.css *//* CyberSkill — navigation (.cs-*). *//* Tabs */.cs-tabs { display: flex; gap: 4px; overflow-x: auto; border-block-end: 1px solid var(--cs-color-border-default); }.cs-tab { flex-shrink: 0; appearance: none; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); padding: 10px 14px; cursor: pointer; position: relative; border-block-end: 2px solid transparent; margin-block-end: 0; display: inline-flex; align-items: center; gap: 7px; }.cs-tab:hover { color: var(--cs-color-text-primary); }.cs-tab[aria-selected="true"] { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); border-block-end-color: var(--cs-accent); }.cs-tab:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; border-radius: var(--cs-radius-sm); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-tab__count { font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-full); padding: 1px 7px; }/* Breadcrumb */.cs-breadcrumb { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); font-family: var(--cs-font-family-ui); }.cs-breadcrumb li { display: inline-flex; align-items: center; gap: 8px; }.cs-breadcrumb a { color: var(--cs-color-text-muted); text-decoration: none; }.cs-breadcrumb a:hover { color: var(--cs-color-text-accent); }.cs-breadcrumb__sep { color: var(--cs-color-border-default); }.cs-breadcrumb__current { color: var(--cs-color-text-primary); font-weight: 600; }/* Pagination */.cs-pagination { display: inline-flex; align-items: center; gap: 4px; }.cs-pagination button { min-inline-size: 38px; block-size: 38px; padding: 0 10px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-md); font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); cursor: pointer; display: inline-grid; place-items: center; }.cs-pagination button:hover:not(:disabled) { border-color: var(--cs-accent); }.cs-pagination button[aria-current="page"] { background: var(--_cs-light, var(--cs-component-button-primary-bg))var(--_cs-dark, var(--cs-component-button-primary-bg)); color: var(--_cs-light, var(--cs-component-button-primary-fg))var(--_cs-dark, var(--cs-component-button-primary-fg)); border-color: transparent; }.cs-pagination button:disabled { opacity: 0.45; cursor: not-allowed; }.cs-pagination__ellipsis { padding: 0 4px; color: var(--cs-color-text-muted); }/* Menu / Dropdown */.cs-menu { position: relative; display: inline-block; }.cs-menu__list { position: absolute; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; z-index: var(--cs-depth-dropdown, 60); display: grid; gap: 2px; }.cs-menu__list--end { inset-inline-start: auto; inset-inline-end: 0; }.cs-menu__item { display: flex; align-items: center; gap: 10px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-menu__item:hover { background: var(--cs-color-surface-raised); }.cs-menu__item:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -3px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-menu__item--danger { color: var(--cs-color-semantic-danger-text); }.cs-menu__item--danger:hover { background: color-mix(in oklab, var(--cs-color-semantic-danger) 10%, transparent); }.cs-menu__sep { block-size: 1px; background: var(--cs-color-border-default); margin: 4px 2px; }.cs-menu__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 6px 10px 2px; }/* Source: base/ai.css *//* CyberSkill — AI-native surfaces (.cs-*). The brand is AI-native: Lumi (the
1562
1565
  * golden genie) converses, then hands clear wishes to a human. These pair with
1563
1566
  * AIDisclosureBadge + HumanReviewGate (base/components.css). *//* PromptInput */.cs-prompt { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); background: var(--cs-color-surface-panel); padding: 10px 12px; display: grid; gap: 8px; }.cs-prompt:focus-within {
1564
1567
  border-color: var(--cs-color-text-primary);
@@ -1575,11 +1578,11 @@
1575
1578
  outline: 2px solid var(--cs-color-text-primary);
1576
1579
  outline-offset: 2px;
1577
1580
  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1578
- }.cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }.cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }.cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }.cs-stepper input { inline-size: 56px; text-align: center; border: 0; border-inline: 1px solid var(--cs-color-border-default); background: transparent; font: inherit; font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); outline: 0; min-height: 42px; -moz-appearance: textfield; }.cs-stepper input::-webkit-outer-spin-button, .cs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }/* Slider (native range) */.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); block-size: 22px; cursor: pointer; }.cs-slider:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 4px; border-radius: var(--cs-radius-full); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }/* FileUpload / dropzone */.cs-dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; border: 2px dashed var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 24px; background: var(--cs-color-surface-raised); cursor: pointer; color: var(--cs-color-text-primary); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), background var(--cs-duration-fast) var(--cs-ease-standard); }.cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-color-brand-ochre); background: color-mix(in oklab, var(--cs-color-brand-ochre) 8%, var(--cs-color-surface-panel)); }.cs-dropzone__icon { color: var(--cs-color-text-accent); }.cs-dropzone__title { font-weight: 700; }.cs-dropzone__hint { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }/* SegmentedControl (matches Status Hub lens switcher) */.cs-segmented { display: inline-flex; gap: 4px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }.cs-segmented button { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); color: var(--_cs-light, var(--cs-color-text-inverse)) var(--_cs-dark, var(--cs-color-brand-umber)); }/* StatusIndicator */.cs-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; color: var(--cs-color-text-primary); }.cs-status__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cs-color-text-muted); flex: none; }.cs-status--online .cs-status__dot { background: var(--cs-color-semantic-success); }.cs-status--busy .cs-status__dot { background: var(--cs-color-brand-ochre); }.cs-status--offline .cs-status__dot { background: var(--cs-color-text-muted); }.cs-status--error .cs-status__dot { background: var(--cs-color-semantic-danger); }.cs-status--pulse .cs-status__dot { box-shadow: 0 0 0 0 currentColor; animation: cs-pulse 1.8s var(--cs-ease-standard) infinite; color: var(--cs-color-semantic-success-text); }@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cs-color-semantic-success) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }@media (prefers-reduced-motion: reduce) { .cs-status--pulse .cs-status__dot { animation: none; } }/* Kbd */.cs-kbd { display: inline-block; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); line-height: 1; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-block-end-width: 2px; border-radius: 6px; padding: 3px 7px; box-shadow: var(--cs-shadow-xs); }/* ---- v3 Batch 2 inputs (Jul 2026): Toggle · Rating · InputOTP · ButtonGroup ---- */.cs-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 14px; min-block-size: 40px; cursor: pointer; transition: background var(--cs-duration-fast, 120ms), border-color var(--cs-duration-fast, 120ms); }.cs-toggle:hover { background: var(--cs-color-surface-raised); }.cs-toggle[aria-pressed="true"] { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); border-color: var(--cs-accent); color: var(--cs-color-text-primary); }.cs-toggle:disabled { opacity: .5; cursor: not-allowed; }.cs-rating { display: inline-flex; gap: 4px; }.cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }.cs-rating button.on { color: var(--cs-color-brand-ochre); }.cs-rating[data-readonly="true"] button { cursor: default; }.cs-rating button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-otp { display: inline-flex; gap: 8px; }.cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); }.cs-otp input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; border-color: var(--cs-accent); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-otp input:disabled { opacity: .5; }.cs-btngroup { display: inline-flex; }.cs-btngroup .cs-button { border-radius: 0; }.cs-btngroup .cs-button:first-child { border-start-start-radius: var(--cs-component-button-radius, 8px); border-end-start-radius: var(--cs-component-button-radius, 8px); }.cs-btngroup .cs-button:last-child { border-start-end-radius: var(--cs-component-button-radius, 8px); border-end-end-radius: var(--cs-component-button-radius, 8px); }.cs-btngroup .cs-button + .cs-button { margin-inline-start: -1px; }/* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */.cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }.cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px var(--cs-space-3); min-block-size: 44px; }.cs-combobox input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }.cs-combobox__popup { color: var(--cs-color-text-primary); position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; }.cs-combobox__list { padding: 0; margin: 0; list-style: none; }.cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: var(--cs-font-size-sm); }.cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-primary)) var(--_cs-dark, var(--cs-accent-bright)); }.cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }.cs-igroup:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }.cs-igroup > input:focus { outline: none; }.cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: var(--cs-font-size-sm); }.cs-igroup__fix--suffix { border-inline-end: 0; border-inline-start: 1px solid var(--cs-color-border-default); }.cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }.cs-igroup__btn:hover { color: var(--cs-color-text-primary); }.cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px var(--cs-space-2); min-block-size: 44px; box-sizing: border-box; }.cs-taginput:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px var(--cs-space-1); }.cs-taginput > input:focus { outline: none; }/* Disabled editing must not dim already committed, noninteractive values. */.cs-field.is-disabled:has(> .cs-taginput) { opacity: 1; }.cs-field.is-disabled > .cs-taginput { background: var(--cs-color-surface-raised); }/* ---- v3 Batch 3 (Jul 2026): Calendar · DatePicker · TimePicker ---- */.cs-cal { display: inline-block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: var(--cs-space-3); min-inline-size: 272px; box-shadow: var(--cs-shadow-sm); }.cs-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 700 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }.cs-cal__head button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: var(--cs-font-size-base); }.cs-cal__head button:hover { background: var(--cs-color-surface-raised); }.cs-cal__wd, .cs-cal__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }.cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }.cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }.cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }.cs-cal__grid button.sel { background: var(--cs-accent); color: var(--cs-accent-on); font-weight: 700; }.cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }.cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }.cs-datepicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-datepicker__field .ph { color: var(--cs-color-text-muted); }.cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: max-content; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); }.cs-datepicker__pop .cs-cal { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; overflow-x: auto; }.cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }.cs-timepicker:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }.cs-timepicker select:focus { outline: none; }/* ---- v3 Batch 4 (Jul 2026): HoverCard · Popconfirm · ContextMenu · FAB · Result · InlineEdit ---- */.cs-hovercard { position: relative; display: inline-block; }.cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }.cs-popconfirm { position: relative; display: inline-block; }.cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }.cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }.cs-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end; }.cs-ctxmenu-zone { position: relative; }.cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }.cs-fab--static { position: static; align-items: flex-start; }.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }.cs-fab__main:hover { filter: brightness(1.05); }.cs-fab__main:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md); }.cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }.cs-fab--static .cs-fab__dial, .cs-fab__dial--static { flex-direction: row; }.cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }.cs-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; }.cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--cs-accent-tint); color: var(--cs-accent-strong); }.cs-result--success .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-success) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-success-text); }.cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger-text); }.cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning-text); }.cs-result__title { margin: 0; font: 800 22px/1.3 var(--cs-heading-family, var(--cs-font-family-ui)); letter-spacing: var(--cs-heading-tracking, -0.01em); color: var(--cs-color-text-primary); }.cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: 1.55; }.cs-result__actions { display: flex; gap: 10px; margin-top: 6px; }.cs-inline-edit__view { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed transparent; background: none; font: inherit; color: var(--cs-color-text-primary); padding: 4px 8px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-inline-edit__view:hover { border-color: var(--cs-color-border-default); background: var(--cs-color-surface-raised); }.cs-inline-edit__view svg { color: var(--cs-color-text-muted); }.cs-inline-edit__view .ph { color: var(--cs-color-text-muted); }.cs-inline-edit input { font: inherit; color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-accent); border-radius: var(--cs-radius-sm); padding: 4px 8px; }.cs-inline-edit input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }/* ---- v3 Batch 5 part 1 (Jul 2026): Link · Anchor · Image · Toolbar ---- */.cs-link { color: var(--cs-color-link); text-underline-offset: .15em; }.cs-link:hover { color: var(--cs-color-link-hover); }.cs-link--muted { color: var(--cs-color-text-muted); }.cs-link--standalone { font-weight: 700; text-decoration: none; }.cs-link--standalone:hover { text-decoration: underline; }.cs-anchor { display: grid; gap: 2px; min-inline-size: 180px; border-inline-start: 2px solid var(--cs-color-border-default); }.cs-anchor__title { font: 700 10.5px/1.4 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-text-muted); padding: 2px 12px 6px; }.cs-anchor__item { display: block; padding: 5px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }.cs-anchor__item:hover { color: var(--cs-color-text-primary); }.cs-anchor__item.is-active { color: var(--_cs-light, var(--cs-accent-strong)) var(--_cs-dark, var(--cs-accent-bright)); border-inline-start-color: var(--cs-accent); font-weight: 600; }.cs-image { position: relative; display: inline-block; overflow: hidden; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); max-inline-size: 100%; }.cs-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }.cs-image.is-loading { min-inline-size: 120px; min-block-size: 80px; animation: cs-img-shimmer 1.2s ease-in-out infinite alternate; }@keyframes cs-img-shimmer { from { opacity: .55; } to { opacity: .9; } }.cs-image.is-zoomable { cursor: zoom-in; }.cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }.cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }.cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }.cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; /* on-dark-chrome ink */ font-size: var(--cs-font-size-base); cursor: pointer; }.cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }.cs-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--cs-color-text-primary); font: 600 13px var(--cs-font-family-ui); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; min-block-size: 32px; }.cs-toolbar__btn:hover { background: var(--cs-color-surface-raised); }.cs-toolbar__btn:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-toolbar__sep { inline-size: 1px; block-size: 20px; background: var(--cs-color-border-default); margin: 0 4px; }.cs-toolbar__more { position: relative; }.cs-toolbar__more .cs-menu__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); }/* ---- v3 Batch 5 part 2 (Jul 2026): Menubar · NavigationMenu · Carousel · Comment ---- */.cs-menubar { display: inline-flex; gap: 2px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 3px; }.cs-menubar__wrap { position: relative; }.cs-menubar__top { border: 0; background: none; font: 600 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 7px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-menubar__top:hover, .cs-menubar__top.is-open { background: var(--cs-color-surface-raised); }.cs-menubar__wrap .cs-menu__list { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 5px); }.cs-navmenu { display: inline-flex; gap: 4px; align-items: center; }.cs-navmenu__wrap { position: relative; }.cs-navmenu__top { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; text-decoration: none; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 9px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }.cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: 468px; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); box-sizing: border-box; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }.cs-navmenu__card { min-inline-size: 0; overflow-wrap: anywhere; display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }.cs-navmenu__card:hover { background: var(--cs-accent-tint); }.cs-navmenu__card b { font-size: var(--cs-font-size-sm); }.cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }.cs-carousel { display: grid; gap: 10px; }.cs-carousel__view { position: relative; overflow: hidden; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }.cs-carousel__window { overflow: hidden; min-inline-size: 0; }.cs-carousel__track { display: flex; transition: transform var(--cs-duration-base, 240ms) cubic-bezier(0.2, 0, 0, 1); }.cs-carousel__slide { flex: 0 0 100%; min-inline-size: 100%; }.cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: var(--cs-font-size-md); box-shadow: var(--cs-shadow-sm); }.cs-carousel__nav.prev { inset-inline-start: 10px; }.cs-carousel__nav.next { inset-inline-end: 10px; }/* Keep the 9px mark inside a real, non-overlapping 24px fine-pointer target.
1581
+ }.cs-stepper button { border: 0; background: var(--cs-color-surface-raised); color: var(--cs-color-text-primary); inline-size: 40px; cursor: pointer; font-size: var(--cs-font-size-md); font-weight: 700; display: grid; place-items: center; }.cs-stepper button:hover:not(:disabled) { color: var(--cs-color-text-accent); }.cs-stepper button:disabled { opacity: 0.45; cursor: not-allowed; }.cs-stepper input { inline-size: 56px; text-align: center; border: 0; border-inline: 1px solid var(--cs-color-border-default); background: transparent; font: inherit; font-family: var(--cs-font-family-mono); color: var(--cs-color-text-primary); outline: 0; min-height: 42px; -moz-appearance: textfield; }.cs-stepper input::-webkit-outer-spin-button, .cs-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }/* Slider (native range) */.cs-slider { inline-size: 100%; accent-color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent)); block-size: 22px; cursor: pointer; }.cs-slider:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 4px; border-radius: var(--cs-radius-full); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }/* FileUpload / dropzone */.cs-dropzone { display: grid; gap: 6px; justify-items: center; text-align: center; border: 2px dashed var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: 28px 24px; background: var(--cs-color-surface-raised); cursor: pointer; color: var(--cs-color-text-primary); transition: border-color var(--cs-duration-fast) var(--cs-ease-standard), background var(--cs-duration-fast) var(--cs-ease-standard); }.cs-dropzone:hover, .cs-dropzone.is-dragging { border-color: var(--cs-accent); background: color-mix(in oklab, var(--cs-accent) 8%, var(--cs-color-surface-panel)); }.cs-dropzone__icon { color: var(--cs-color-text-accent); }.cs-dropzone__title { font-weight: 700; }.cs-dropzone__hint { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); }/* SegmentedControl (matches Status Hub lens switcher) */.cs-segmented { display: inline-flex; gap: 4px; background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-full); padding: 3px; }.cs-segmented button { border: 0; background: transparent; border-radius: var(--cs-radius-full); padding: 7px 15px; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-accent); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }.cs-segmented button[aria-checked="true"], .cs-segmented button[aria-pressed="true"], .cs-segmented button[aria-selected="true"] { background: var(--_cs-light, var(--cs-component-button-primary-bg))var(--_cs-dark, var(--cs-component-button-primary-bg)); color: var(--_cs-light, var(--cs-component-button-primary-fg))var(--_cs-dark, var(--cs-component-button-primary-fg)); }/* StatusIndicator */.cs-status { display: inline-flex; align-items: center; gap: 7px; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); font-weight: 600; color: var(--cs-color-text-primary); }.cs-status__dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--cs-color-text-muted); flex: none; }.cs-status--online .cs-status__dot { background: var(--cs-color-semantic-success); }.cs-status--busy .cs-status__dot { background: var(--cs-color-brand-ochre); }.cs-status--offline .cs-status__dot { background: var(--cs-color-text-muted); }.cs-status--error .cs-status__dot { background: var(--cs-color-semantic-danger); }.cs-status--pulse .cs-status__dot { box-shadow: 0 0 0 0 currentColor; animation: cs-pulse 1.8s var(--cs-ease-standard) infinite; color: var(--cs-color-semantic-success-text); }@keyframes cs-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--cs-color-semantic-success) 55%, transparent); } 70% { box-shadow: 0 0 0 7px transparent; } 100% { box-shadow: 0 0 0 0 transparent; } }@media (prefers-reduced-motion: reduce) { .cs-status--pulse .cs-status__dot { animation: none; } }/* Kbd */.cs-kbd { display: inline-block; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); line-height: 1; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-block-end-width: 2px; border-radius: 6px; padding: 3px 7px; box-shadow: var(--cs-shadow-xs); }/* ---- v3 Batch 2 inputs (Jul 2026): Toggle · Rating · InputOTP · ButtonGroup ---- */.cs-toggle { display: inline-flex; align-items: center; gap: 8px; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 14px; min-block-size: 40px; cursor: pointer; transition: background var(--cs-duration-fast, 120ms), border-color var(--cs-duration-fast, 120ms); }.cs-toggle:hover { background: var(--cs-color-surface-raised); }.cs-toggle[aria-pressed="true"] { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); border-color: var(--cs-accent); color: var(--cs-color-text-primary); }.cs-toggle:disabled { opacity: .5; cursor: not-allowed; }.cs-rating { display: inline-flex; gap: 4px; }.cs-rating button { background: none; border: 0; padding: 2px; cursor: pointer; color: var(--cs-color-border-default); display: grid; place-items: center; }.cs-rating button.on { color: var(--cs-accent); }.cs-rating[data-readonly="true"] button { cursor: default; }.cs-rating button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; border-radius: 4px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-otp { display: inline-flex; gap: 8px; }.cs-otp input { inline-size: 44px; block-size: 52px; text-align: center; font: 700 22px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); }.cs-otp input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; border-color: var(--cs-accent); box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-otp input:disabled { opacity: .5; cursor: not-allowed; background: var(--cs-color-surface-raised); }.cs-btngroup { display: inline-flex; }.cs-btngroup .cs-button { border-radius: 0; }.cs-btngroup .cs-button:first-child { border-start-start-radius: var(--cs-component-button-radius, 8px); border-end-start-radius: var(--cs-component-button-radius, 8px); }.cs-btngroup .cs-button:last-child { border-start-end-radius: var(--cs-component-button-radius, 8px); border-end-end-radius: var(--cs-component-button-radius, 8px); }.cs-btngroup .cs-button + .cs-button { margin-inline-start: -1px; }/* ---- v3 Batch 2 part 2 (Jul 2026): Combobox · InputGroup · TagInput ---- */.cs-combobox { position: relative; display: inline-block; min-inline-size: 260px; }.cs-combobox input { inline-size: 100%; box-sizing: border-box; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 34px 10px var(--cs-space-3); min-block-size: 44px; }.cs-combobox input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-combobox__caret { position: absolute; inset-inline-end: 10px; inset-block-start: 50%; translate: 0 -50%; pointer-events: none; color: var(--cs-color-text-muted); }.cs-combobox__popup { color: var(--cs-color-text-primary); position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline: 0; inset-block-start: calc(100% + 6px); max-block-size: 240px; overflow: auto; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 6px; margin: 0; }.cs-combobox__list { padding: 0; margin: 0; list-style: none; }.cs-combobox__opt { padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; font-size: var(--cs-font-size-sm); }.cs-combobox__opt[aria-selected="true"], .cs-combobox__opt.hl { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-primary))var(--_cs-dark, var(--cs-accent-bright)); }.cs-combobox__empty { padding: 10px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); }.cs-igroup { display: inline-flex; align-items: stretch; min-inline-size: 260px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; }.cs-igroup:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-igroup > input { flex: 1; min-inline-size: 0; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 10px 12px; min-block-size: 44px; box-sizing: border-box; }.cs-igroup > input:focus { outline: none; }.cs-igroup__fix { display: flex; align-items: center; padding: 0 10px; color: var(--cs-color-text-muted); background: var(--cs-color-surface-raised); border-inline-end: 1px solid var(--cs-color-border-default); font-size: var(--cs-font-size-sm); }.cs-igroup__fix--suffix { border-inline-end: 0; border-inline-start: 1px solid var(--cs-color-border-default); }.cs-igroup__btn { border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; display: grid; place-items: center; padding: 0 10px; }.cs-igroup__btn:hover { color: var(--cs-color-text-primary); }.cs-taginput { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; min-inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 6px var(--cs-space-2); min-block-size: 44px; box-sizing: border-box; }.cs-taginput:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-taginput > input { flex: 1; min-inline-size: 120px; border: 0; background: transparent; color: var(--cs-color-text-primary); font: 500 14px var(--cs-font-family-ui); padding: 6px var(--cs-space-1); }.cs-taginput > input:focus { outline: none; }/* Disabled editing must not dim already committed, noninteractive values. */.cs-field.is-disabled:has(> .cs-taginput) { opacity: 1; }.cs-field.is-disabled > .cs-taginput { background: var(--cs-color-surface-raised); }/* ---- v3 Batch 3 (Jul 2026): Calendar · DatePicker · TimePicker ---- */.cs-cal { display: inline-block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); padding: var(--cs-space-3); min-inline-size: 272px; box-shadow: var(--cs-shadow-sm); }.cs-cal__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; font: 700 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }.cs-cal__head button { border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border-radius: var(--cs-radius-sm); inline-size: 30px; block-size: 30px; cursor: pointer; font-size: var(--cs-font-size-base); }.cs-cal__head button:hover { background: var(--cs-color-surface-raised); }.cs-cal__wd, .cs-cal__grid { display: grid; grid-template-columns: repeat(7, 34px); gap: 2px; }.cs-cal__wd span { text-align: center; font: 700 10.5px/2 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .04em; color: var(--cs-color-text-muted); }.cs-cal__grid button { border: 0; background: none; color: var(--cs-color-text-primary); font: 500 13px var(--cs-font-family-ui); block-size: 34px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-cal__grid button:hover { background: var(--cs-color-surface-raised); }.cs-cal__grid button.today { box-shadow: inset 0 0 0 1px var(--cs-accent); }.cs-cal__grid button.sel { background: var(--cs-accent); color: var(--cs-accent-on); font-weight: 700; }.cs-cal__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-datepicker { position: relative; display: inline-block; max-inline-size: 100%; }.cs-datepicker__field { display: inline-flex; align-items: center; gap: var(--cs-space-2); min-inline-size: 220px; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: var(--cs-space-2) var(--cs-space-3); cursor: pointer; }.cs-datepicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-datepicker__field .ph { color: var(--cs-color-text-muted); }.cs-datepicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: max-content; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); }.cs-datepicker__pop .cs-cal { min-inline-size: 0; max-inline-size: 100%; box-sizing: border-box; overflow-x: auto; }.cs-timepicker { display: inline-flex; align-items: center; gap: 8px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 0 10px; min-block-size: 44px; color: var(--cs-color-text-muted); }.cs-timepicker:focus-within { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-timepicker select { border: 0; background: transparent; color: var(--cs-color-text-primary); font: 600 14px var(--cs-font-family-mono); padding: 8px 2px; cursor: pointer; }.cs-timepicker select:focus { outline: none; }/* ---- v3 Batch 4 (Jul 2026): HoverCard · Popconfirm · ContextMenu · FAB · Result · InlineEdit ---- */.cs-hovercard { position: relative; display: inline-block; }.cs-hovercard__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px 16px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-primary); }.cs-popconfirm { position: relative; display: inline-block; }.cs-popconfirm__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; display: block; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px 14px; }.cs-popconfirm__title { display: block; font: 600 13.5px/1.45 var(--cs-font-family-ui); color: var(--cs-color-text-primary); margin-bottom: 10px; }.cs-popconfirm__actions { display: flex; gap: 8px; justify-content: flex-end; }.cs-ctxmenu-zone { position: relative; }.cs-fab { position: fixed; inset-inline-end: 24px; inset-block-end: 24px; z-index: var(--cs-depth-overlay, 80); display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }.cs-fab--static { position: static; align-items: flex-start; }.cs-fab__main { inline-size: 56px; block-size: 56px; border-radius: 999px; border: 0; background: var(--cs-accent); color: var(--cs-accent-on); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-lg); }.cs-fab__main:hover { filter: brightness(1.05); }.cs-fab__main:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), var(--cs-shadow-md); }.cs-fab__dial { display: flex; flex-direction: column; gap: 8px; align-items: center; }.cs-fab--static .cs-fab__dial, .cs-fab__dial--static { flex-direction: row; }.cs-fab__mini { inline-size: 42px; block-size: 42px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-sm); }.cs-result { display: grid; justify-items: center; text-align: center; gap: 10px; padding: 44px 24px; }.cs-result__icon { inline-size: 64px; block-size: 64px; border-radius: 999px; display: grid; place-items: center; background: var(--cs-accent-tint); color: var(--cs-color-text-accent); }.cs-result--success .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-success) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-success-text); }.cs-result--error .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-danger) 12%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-danger-text); }.cs-result--warning .cs-result__icon { background: color-mix(in oklab, var(--cs-color-semantic-warning) 14%, var(--cs-color-surface-panel)); color: var(--cs-color-semantic-warning-text); }.cs-result__title { margin: 0; font: 800 22px/1.3 var(--cs-heading-family, var(--cs-font-family-ui)); letter-spacing: var(--cs-heading-tracking, -0.01em); color: var(--cs-color-text-primary); }.cs-result__body { margin: 0; max-inline-size: 46ch; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: 1.55; }.cs-result__actions { display: flex; gap: 10px; margin-top: 6px; }.cs-inline-edit__view { display: inline-flex; align-items: center; gap: 7px; border: 1px dashed transparent; background: none; font: inherit; color: var(--cs-color-text-primary); padding: 4px 8px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-inline-edit__view:hover { border-color: var(--cs-color-border-default); background: var(--cs-color-surface-raised); }.cs-inline-edit__view svg { color: var(--cs-color-text-muted); }.cs-inline-edit__view .ph { color: var(--cs-color-text-muted); }.cs-inline-edit input { font: inherit; color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-accent); border-radius: var(--cs-radius-sm); padding: 4px 8px; }.cs-inline-edit input:focus { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }/* ---- v3 Batch 5 part 1 (Jul 2026): Link · Anchor · Image · Toolbar ---- */.cs-link { color: var(--cs-color-link); text-underline-offset: .15em; }.cs-link:hover { color: var(--cs-color-link-hover); }.cs-link--muted { color: var(--cs-color-text-muted); }.cs-link--standalone { font-weight: 700; text-decoration: none; }.cs-link--standalone:hover { text-decoration: underline; }.cs-anchor { display: grid; gap: 2px; min-inline-size: 180px; border-inline-start: 2px solid var(--cs-color-border-default); }.cs-anchor__title { font: 700 10.5px/1.4 var(--cs-font-family-ui); text-transform: uppercase; letter-spacing: .1em; color: var(--cs-color-text-muted); padding: 2px 12px 6px; }.cs-anchor__item { display: block; padding: 5px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); text-decoration: none; border-inline-start: 2px solid transparent; margin-inline-start: -2px; }.cs-anchor__item:hover { color: var(--cs-color-text-primary); }.cs-anchor__item.is-active { color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent-bright)); border-inline-start-color: var(--cs-accent); font-weight: 600; }.cs-image { position: relative; display: inline-block; overflow: hidden; border-radius: var(--cs-radius-md); background: var(--cs-color-surface-raised); max-inline-size: 100%; }.cs-image img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; }.cs-image.is-loading { min-inline-size: 120px; min-block-size: 80px; animation: cs-img-shimmer 1.2s ease-in-out infinite alternate; }@keyframes cs-img-shimmer { from { opacity: .55; } to { opacity: .9; } }.cs-image.is-zoomable { cursor: zoom-in; }.cs-image__fallback { display: grid; place-items: center; min-block-size: 80px; block-size: 100%; color: var(--cs-color-text-muted); }.cs-image__zoom { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .82); display: grid; place-items: center; cursor: zoom-out; }.cs-image__zoom img { max-inline-size: 88vw; max-block-size: 86vh; border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-xl); }.cs-image__zoom button { position: absolute; inset-block-start: 18px; inset-inline-end: 18px; inline-size: 40px; block-size: 40px; border-radius: 999px; border: 0; background: rgba(255, 255, 255, .12); color: #fff; /* on-dark-chrome ink */ font-size: var(--cs-font-size-base); cursor: pointer; }.cs-toolbar { display: inline-flex; align-items: center; gap: 4px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 4px; }.cs-toolbar__btn { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; color: var(--cs-color-text-primary); font: 600 13px var(--cs-font-family-ui); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; min-block-size: 32px; }.cs-toolbar__btn:hover { background: var(--cs-color-surface-raised); }.cs-toolbar__btn:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-toolbar__sep { inline-size: 1px; block-size: 20px; background: var(--cs-color-border-default); margin: 0 4px; }.cs-toolbar__more { position: relative; }.cs-toolbar__more .cs-menu__list { position: absolute; inset-inline-end: 0; inset-block-start: calc(100% + 6px); }/* ---- v3 Batch 5 part 2 (Jul 2026): Menubar · NavigationMenu · Carousel · Comment ---- */.cs-menubar { display: inline-flex; gap: 2px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 3px; }.cs-menubar__wrap { position: relative; }.cs-menubar__top { border: 0; background: none; font: 600 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 7px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-menubar__top:hover, .cs-menubar__top.is-open { background: var(--cs-color-surface-raised); }.cs-menubar__wrap .cs-menu__list { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 5px); }.cs-navmenu { display: inline-flex; gap: 4px; align-items: center; }.cs-navmenu__wrap { position: relative; }.cs-navmenu__top { display: inline-flex; align-items: center; gap: 5px; border: 0; background: none; text-decoration: none; font: 600 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 9px 12px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-navmenu__top:hover, .cs-navmenu__top.is-open { background: var(--cs-color-surface-raised); }.cs-navmenu__panel { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: var(--_cs-panel-inline-offset, 0px); inline-size: 468px; max-inline-size: var(--_cs-panel-max-inline-size, calc(100vw - 16px)); box-sizing: border-box; inset-block-start: calc(100% + 8px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-md); padding: 10px; }.cs-navmenu__card { min-inline-size: 0; overflow-wrap: anywhere; display: grid; gap: 3px; padding: 10px 12px; border-radius: var(--cs-radius-md); text-decoration: none; color: var(--cs-color-text-primary); }.cs-navmenu__card:hover { background: var(--cs-accent-tint); }.cs-navmenu__card b { font-size: var(--cs-font-size-sm); }.cs-navmenu__card small { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); line-height: 1.45; }.cs-carousel { display: grid; gap: 10px; }.cs-carousel__view { position: relative; overflow: hidden; border-radius: var(--cs-radius-lg); border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }.cs-carousel__window { overflow: hidden; min-inline-size: 0; }.cs-carousel__track { display: flex; transition: transform var(--cs-duration-base, 240ms) cubic-bezier(0.2, 0, 0, 1); }.cs-carousel__slide { flex: 0 0 100%; min-inline-size: 100%; }.cs-carousel__nav { position: absolute; inset-block-start: 50%; translate: 0 -50%; inline-size: 36px; block-size: 36px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); cursor: pointer; font-size: var(--cs-font-size-md); box-shadow: var(--cs-shadow-sm); }.cs-carousel__nav.prev { inset-inline-start: 10px; }.cs-carousel__nav.next { inset-inline-end: 10px; }/* Keep the 9px mark inside a real, non-overlapping 24px fine-pointer target.
1579
1582
  * Coarse-pointer rules retain their existing 44px targets and dot paint. */.cs-carousel__dots { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }.cs-carousel__dots button { inline-size: 24px; block-size: 24px; flex: 0 0 24px; border-radius: 999px; border: 0; background: none; cursor: pointer; padding: 0; position: relative; }.cs-carousel__dots button::before { content: ""; position: absolute; inset: 0; margin: auto; inline-size: 9px; block-size: 9px; border-radius: inherit; background: var(--cs-color-border-default); pointer-events: none; }.cs-carousel__dots button[aria-current="true"]::before { background: var(--cs-accent); }@media (prefers-reduced-motion: reduce) { .cs-carousel__track { transition: none; } }.cs-comment { display: flex; gap: 10px; }.cs-comment__main { flex: 1; min-inline-size: 0; }.cs-comment__head { display: flex; align-items: baseline; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }.cs-comment__meta { color: var(--cs-color-text-muted); font-size: var(--cs-font-size-xs); }.cs-comment__body { font-size: var(--cs-font-size-sm); line-height: 1.55; color: var(--cs-color-text-primary); margin: 3px 0 6px; }.cs-comment__actions { display: flex; gap: 12px; }.cs-comment__actions button { border: 0; background: none; padding: 0; font: 600 12.5px var(--cs-font-family-ui); color: var(--cs-color-text-accent); cursor: pointer; }.cs-comment__replies { margin-top: 12px; padding-inline-start: 14px; border-inline-start: 2px solid var(--cs-color-border-default); display: grid; gap: 12px; }/* ---- v3 Batch 6a (Jul 2026): Form · Tree · BackTop · Watermark ---- */.cs-form { display: grid; gap: var(--cs-space-4); }/* FIND-015 — visible pending + interaction lock while asyncRules / submit run. */.cs-form.is-pending { opacity: 0.72; }.cs-form.is-pending :is(button, input, select, textarea, [role="button"]) {
1580
1583
  pointer-events: none;
1581
1584
  cursor: wait;
1582
- }.cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: var(--cs-space-3) 14px; font-size: var(--cs-font-size-sm); }.cs-form__summary b { color: var(--cs-color-semantic-danger-text); }.cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }.cs-formfield { display: grid; gap: 6px; }.cs-formfield__label { font: 600 13px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }.cs-formfield__label em { color: var(--cs-color-semantic-danger-text); font-style: normal; }.cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }.cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger-text); font-weight: 600; }.cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }.cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }.cs-tree ul { list-style: none; margin: 0; padding: 0; }.cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }.cs-tree__row:hover { background: var(--cs-color-surface-raised); }.cs-tree__row.is-selected { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }.cs-tree__row.is-selected .cs-tree__label { color: var(--cs-color-text-primary); font-weight: 600; }.cs-tree__twist { inline-size: 20px; block-size: 28px; border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }.cs-tree__label { border: 0; background: none; color: var(--cs-color-text-primary); font: inherit; padding: 4px 6px; cursor: pointer; border-radius: var(--cs-radius-sm); }.cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 80); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }.cs-backtop:hover { border-color: var(--cs-accent); }/* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */.cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }.cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }.cs-treeselect__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-treeselect__field .ph { color: var(--cs-color-text-muted); }.cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }.cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }.cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }.cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }.cs-cascader__opt { display: flex; justify-content: space-between; gap: 8px; inline-size: 100%; border: 0; background: none; text-align: start; font: 500 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-cascader__opt:hover { background: var(--cs-color-surface-raised); }.cs-cascader__opt.on { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-accent-strong)) var(--_cs-dark, var(--cs-accent-bright)); font-weight: 600; }.cs-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; min-inline-size: 0; }.cs-transfer__list { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); min-inline-size: 0; overflow-wrap: anywhere; }.cs-transfer__title { font: 700 12px var(--cs-font-family-ui); padding: 9px 12px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }.cs-transfer__list ul { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; max-block-size: 200px; overflow: auto; }.cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }.cs-transfer__ops { display: grid; gap: 6px; align-content: center; }.cs-mentions { position: relative; display: block; max-inline-size: 420px; }.cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }.cs-mentions__pop button { border: 0; background: none; text-align: start; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--cs-color-text-primary); }/* ---- v3 Batch 6c (Jul 2026): ColorPicker · Tour · QRCode ---- */.cs-colorpicker { position: relative; display: inline-block; }.cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }.cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }.cs-colorpicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }.cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }.cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }.cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }.cs-colorpicker__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }.cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }.cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }.cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }.cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }.cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }.cs-tour__btns { display: flex; gap: 6px; }.cs-qrcode { display: inline-block; padding: 10px; background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }/* ---- v3 Batch 7a (Jul 2026): Masonry · Splitter · HotKeys · Dock ---- */.cs-masonry__item { break-inside: avoid; }.cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }.cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }.cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }.cs-splitter__bar:hover { background: var(--cs-accent-tint); }.cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }.cs-hotkeys__card { background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }.cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }.cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }.cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }.cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }.cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }.cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-accent); }@media (prefers-reduced-motion: reduce) { .cs-dock__item { transition: none; } }/* ---- v3 Batch 7b (Jul 2026): DataGrid · TreeTable · Sortable ---- */.cs-datagrid { overflow: auto; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); }.cs-datagrid .cs-table { margin: 0; }.cs-datagrid thead th { position: sticky; inset-block-start: 0; background: var(--cs-color-surface-raised); z-index: 1; }.cs-datagrid__check { display: inline-flex; align-items: center; justify-content: center; }.cs-datagrid__selcol { inline-size: 36px; text-align: center; }.cs-datagrid__sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }.cs-datagrid tr.is-selected td { background: var(--_cs-light, var(--cs-accent-tint)) var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }.cs-treetable .cs-treetable__cell { display: inline-flex; align-items: center; gap: 2px; }.cs-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-inline-size: 380px; }.cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: grab; }.cs-sortable__item.is-dragging { opacity: .5; }.cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }.cs-sortable__grip { color: var(--cs-color-text-muted); }.cs-sortable__label { flex: 1; min-inline-size: 0; }.cs-sortable__ops { display: inline-flex; gap: 4px; margin-inline-start: auto; }.cs-sortable__ops .cs-button { cursor: pointer; }.cs-sortable__ops .cs-button:disabled { opacity: .4; cursor: not-allowed; }/* ---- v3 Batch 7c (Jul 2026): Chart · Editor · Terminal ---- */.cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }.cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }.cs-chart__legend b { color: var(--cs-color-text-primary); }.cs-editor { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); max-inline-size: 460px; }.cs-editor__bar { display: flex; gap: 2px; padding: 6px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }.cs-editor__area { padding: 12px 14px; font: 400 14px/1.6 var(--cs-font-family-ui); color: var(--cs-color-text-primary); outline: none; }.cs-editor__area:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: inset 0 0 0 5px var(--cs-color-accent-ochre); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); }/* Terminal — always-dark chrome (FIND-010: hex only in local custom props) */.cs-terminal {
1585
+ }.cs-form__summary { border: 1px solid var(--cs-color-semantic-danger); border-radius: var(--cs-radius-md); background: color-mix(in oklab, var(--cs-color-semantic-danger) 8%, var(--cs-color-surface-panel)); color: var(--cs-color-text-primary); padding: var(--cs-space-3) 14px; font-size: var(--cs-font-size-sm); }.cs-form__summary b { color: var(--cs-color-semantic-danger-text); }.cs-form__summary ul { margin: 6px 0 0; padding-inline-start: 18px; }.cs-formfield { display: grid; gap: 6px; }.cs-formfield__label { font: 600 13px var(--cs-font-family-ui); color: var(--cs-color-text-primary); }.cs-formfield__label em { color: var(--cs-color-semantic-danger-text); font-style: normal; }.cs-formfield__hint { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }.cs-formfield__error { font-size: var(--cs-font-size-xs); color: var(--cs-color-semantic-danger-text); font-weight: 600; }.cs-formfield.has-error input, .cs-formfield.has-error textarea, .cs-formfield.has-error select { border-color: var(--cs-color-semantic-danger); }.cs-tree { list-style: none; margin: 0; padding: 0; font-size: var(--cs-font-size-sm); }.cs-tree ul { list-style: none; margin: 0; padding: 0; }.cs-tree__row { display: flex; align-items: center; gap: 2px; border-radius: var(--cs-radius-sm); }.cs-tree__row:hover { background: var(--cs-color-surface-raised); }.cs-tree__row.is-selected { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }.cs-tree__row.is-selected .cs-tree__label { color: var(--cs-color-text-primary); font-weight: 600; }.cs-tree__twist { inline-size: 20px; block-size: 28px; border: 0; background: none; color: var(--cs-color-text-muted); cursor: pointer; padding: 0; display: inline-grid; place-items: center; }.cs-tree__label { border: 0; background: none; color: var(--cs-color-text-primary); font: inherit; padding: 4px 6px; cursor: pointer; border-radius: var(--cs-radius-sm); }.cs-backtop { position: fixed; inset-inline-end: 24px; inset-block-end: 84px; z-index: var(--cs-depth-overlay, 80); inline-size: 44px; block-size: 44px; border-radius: 999px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; box-shadow: var(--cs-shadow-md); }.cs-backtop:hover { border-color: var(--cs-accent); }/* ---- v3 Batch 6b (Jul 2026): TreeSelect · Cascader · Transfer · Mentions ---- */.cs-treeselect, .cs-cascader { position: relative; display: inline-block; min-inline-size: 240px; }.cs-treeselect__field { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; inline-size: 100%; min-block-size: 44px; font: 500 14px var(--cs-font-family-ui); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; box-sizing: border-box; }.cs-treeselect__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-treeselect__field .ph { color: var(--cs-color-text-muted); }.cs-treeselect__pop, .cs-cascader__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 8px; min-inline-size: 100%; }.cs-cascader__pop { display: flex; padding: 0; overflow: hidden; }.cs-cascader__col { list-style: none; margin: 0; padding: 6px; min-inline-size: 150px; max-block-size: 240px; overflow: auto; }.cs-cascader__col + .cs-cascader__col { border-inline-start: 1px solid var(--cs-color-border-default); }.cs-cascader__opt { display: flex; justify-content: space-between; gap: 8px; inline-size: 100%; border: 0; background: none; text-align: start; font: 500 13.5px var(--cs-font-family-ui); color: var(--cs-color-text-primary); padding: 8px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-cascader__opt:hover { background: var(--cs-color-surface-raised); }.cs-cascader__opt.on { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-accent-strong))var(--_cs-dark, var(--cs-accent-bright)); font-weight: 600; }.cs-transfer { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; min-inline-size: 0; }.cs-transfer__list { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); min-inline-size: 0; overflow-wrap: anywhere; }.cs-transfer__title { font: 700 12px var(--cs-font-family-ui); padding: 9px 12px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }.cs-transfer__list ul { list-style: none; margin: 0; padding: 8px 10px; display: grid; gap: 6px; max-block-size: 200px; overflow: auto; }.cs-transfer__list label { display: flex; align-items: center; gap: 8px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; }.cs-transfer__ops { display: grid; gap: 6px; align-content: center; }.cs-mentions { position: relative; display: block; max-inline-size: 420px; }.cs-mentions__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-inline-start: 10px; inset-block-start: calc(100% - 6px); display: grid; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 4px; }.cs-mentions__pop button { border: 0; background: none; text-align: start; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); padding: 7px 10px; border-radius: var(--cs-radius-sm); cursor: pointer; }.cs-mentions__pop button:hover, .cs-mentions__pop button.hl, .cs-mentions__pop button[aria-selected="true"] { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--cs-color-text-primary); }/* ---- v3 Batch 6c (Jul 2026): ColorPicker · Tour · QRCode ---- */.cs-colorpicker { position: relative; display: inline-block; }.cs-colorpicker__field { display: inline-flex; align-items: center; gap: 9px; min-block-size: 44px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 8px 12px; cursor: pointer; }.cs-colorpicker__field i { inline-size: 20px; block-size: 20px; border-radius: 6px; border: 1px solid var(--cs-color-border-default); }.cs-colorpicker__field:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 1px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-colorpicker__pop { position: absolute; z-index: var(--cs-depth-dropdown, 60); inset-block-start: calc(100% + 6px); inset-inline-start: 0; display: grid; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 12px; }.cs-colorpicker__grid { display: grid; grid-template-columns: repeat(5, 26px); gap: 8px; }.cs-colorpicker__grid button { inline-size: 26px; block-size: 26px; border-radius: 7px; border: 1px solid var(--cs-color-border-default); cursor: pointer; }.cs-colorpicker__grid button.on { outline: var(--cs-focus-ring, 3px) solid var(--cs-color-accent-ochre); outline-offset: 1px; }.cs-colorpicker__grid button:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-colorpicker__hex input { inline-size: 110px; font: 600 13px var(--cs-font-family-mono); color: var(--cs-color-text-primary); background: var(--cs-color-surface-raised); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-sm); padding: 6px 8px; }.cs-tour__scrim { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); }.cs-tour__hole { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 1); border-radius: var(--cs-radius-md); box-shadow: 0 0 0 4000px rgba(26, 17, 8, .45); outline: var(--cs-focus-ring, 3px) solid var(--cs-color-brand-ochre); pointer-events: none; background: transparent; }.cs-tour__pop { position: fixed; z-index: calc(var(--cs-depth-modal, 100) + 2); inline-size: 280px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 14px 16px; }.cs-tour__pop b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }.cs-tour__pop p { margin: 6px 0 12px; font-size: var(--cs-font-size-sm); line-height: 1.5; color: var(--cs-color-text-muted); }.cs-tour__bar { display: flex; align-items: center; justify-content: space-between; gap: 10px; }.cs-tour__count { font: 600 11px var(--cs-font-family-mono); color: var(--cs-color-text-muted); }.cs-tour__btns { display: flex; gap: 6px; }.cs-qrcode { display: inline-block; padding: 10px; background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); line-height: 0; }/* ---- v3 Batch 7a (Jul 2026): Masonry · Splitter · HotKeys · Dock ---- */.cs-masonry__item { break-inside: avoid; }.cs-splitter { display: flex; align-items: stretch; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); overflow: hidden; background: var(--cs-color-surface-panel); }.cs-splitter__pane { overflow: auto; padding: 14px; min-inline-size: 0; }.cs-splitter__bar { inline-size: 8px; cursor: col-resize; background: var(--cs-color-surface-raised); border-inline: 1px solid var(--cs-color-border-default); touch-action: none; }.cs-splitter__bar:hover { background: var(--cs-accent-tint); }.cs-splitter__bar:focus-visible { background: var(--cs-color-surface-raised); outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-hotkeys__sheet { position: fixed; inset: 0; z-index: var(--cs-depth-modal, 100); background: rgba(26, 17, 8, .45); display: grid; place-items: center; }.cs-hotkeys__card { background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); padding: 18px 20px; min-inline-size: 300px; }.cs-hotkeys__card b { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }.cs-hotkeys__card ul { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 8px; }.cs-hotkeys__card li { display: flex; justify-content: space-between; gap: 20px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }.cs-dock { display: inline-flex; align-items: flex-end; gap: 8px; background: color-mix(in oklab, var(--cs-color-surface-panel) 82%, transparent); border: 1px solid var(--cs-color-border-default); border-radius: 18px; padding: 8px 12px; backdrop-filter: blur(10px); }.cs-dock__item { inline-size: 44px; block-size: 44px; border-radius: 12px; border: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); display: grid; place-items: center; cursor: pointer; transition: transform var(--cs-duration-fast, 120ms); position: relative; }.cs-dock__item.is-active::after { content: ""; position: absolute; inset-block-end: -6px; inline-size: 4px; block-size: 4px; border-radius: 999px; background: var(--cs-accent); }@media (prefers-reduced-motion: reduce) { .cs-dock__item { transition: none; } }/* ---- v3 Batch 7b (Jul 2026): DataGrid · TreeTable · Sortable ---- */.cs-datagrid { overflow: auto; border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); }.cs-datagrid .cs-table { margin: 0; }.cs-datagrid thead th { position: sticky; inset-block-start: 0; background: var(--cs-color-surface-raised); z-index: 1; }.cs-datagrid__check { display: inline-flex; align-items: center; justify-content: center; }.cs-datagrid__selcol { inline-size: 36px; text-align: center; }.cs-datagrid__sort { border: 0; background: none; font: inherit; color: inherit; cursor: pointer; padding: 0; }.cs-datagrid tr.is-selected td { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 18%, var(--cs-color-surface-panel))); }.cs-treetable .cs-treetable__cell { display: inline-flex; align-items: center; gap: 2px; }.cs-sortable { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-inline-size: 380px; }.cs-sortable__item { display: flex; align-items: center; gap: 10px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); padding: 10px 12px; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: grab; }.cs-sortable__item.is-dragging { opacity: .5; }.cs-sortable__item.is-over { border-color: var(--cs-accent); box-shadow: inset 0 0 0 1px var(--cs-accent); }.cs-sortable__grip { color: var(--cs-color-text-muted); }.cs-sortable__label { flex: 1; min-inline-size: 0; }.cs-sortable__ops { display: inline-flex; gap: 4px; margin-inline-start: auto; }.cs-sortable__ops .cs-button { cursor: pointer; }.cs-sortable__ops .cs-button:disabled { opacity: .4; cursor: not-allowed; }/* ---- v3 Batch 7c (Jul 2026): Chart · Editor · Terminal ---- */.cs-chart { margin: 0; display: grid; gap: 8px; max-inline-size: 420px; }.cs-chart__legend { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }.cs-chart__legend b { color: var(--cs-color-text-primary); }.cs-editor { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); max-inline-size: 460px; }.cs-editor__bar { display: flex; gap: 2px; padding: 6px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-raised); border-radius: var(--cs-radius-md) var(--cs-radius-md) 0 0; }.cs-editor__area { padding: 12px 14px; font: 400 14px/1.6 var(--cs-font-family-ui); color: var(--cs-color-text-primary); outline: none; }.cs-editor__area:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: -2px; box-shadow: inset 0 0 0 5px var(--cs-color-accent-ochre); border-radius: 0 0 var(--cs-radius-md) var(--cs-radius-md); }/* Terminal — always-dark chrome (FIND-010: hex only in local custom props) */.cs-terminal {
1583
1586
  --cs-term-border: #3a2a1c;
1584
1587
  --cs-term-bar: #2a1a0d;
1585
1588
  --cs-term-dot: #5b4331;
@@ -1601,7 +1604,7 @@
1601
1604
  background: var(--cs-color-surface-panel);
1602
1605
  }.cs-item--interactive { cursor: pointer; font: inherit; inline-size: 100%; }button.cs-item--interactive { border: 1px solid transparent; background: var(--cs-color-surface-panel); }@media (hover: hover) {
1603
1606
  .cs-item--interactive:hover { background: var(--cs-color-surface-raised); border-color: var(--cs-color-border-default); }
1604
- }.cs-item--interactive:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-item.is-selected { border-color: var(--cs-color-brand-ochre); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }.cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }/* Static Item text remains information, rather than an inactive control. */div.cs-item.is-disabled { opacity: 1; }.cs-item__leading { flex: none; display: grid; place-items: center; color: var(--cs-color-text-accent); }.cs-item__main { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }.cs-item__title { font-weight: 600; font-size: var(--cs-font-size-sm); line-height: 1.35; }.cs-item__description { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); line-height: 1.4; }.cs-item__trailing { flex: none; display: grid; place-items: center; color: var(--cs-color-text-muted); }/* DescriptionList */.cs-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 24px; margin: 0; }.cs-dl dt { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }.cs-dl dd { margin: 2px 0 0; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }/* Timeline */.cs-timeline { display: grid; }.cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }.cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }.cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); }.cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }.cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }.cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }.cs-timeline__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 4px; }/* Accordion */.cs-accordion { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); overflow: hidden; background: var(--cs-color-surface-panel); }.cs-accordion__item + .cs-accordion__item { border-block-start: 1px solid var(--cs-color-border-default); }.cs-accordion__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-3); padding: 15px 18px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }@media (hover: hover) {
1607
+ }.cs-item--interactive:focus-visible { outline: 2px solid var(--cs-color-text-primary); outline-offset: 2px; box-shadow: 0 0 0 5px var(--cs-color-accent-ochre); }.cs-item.is-selected { border-color: var(--cs-accent); background: var(--cs-accent-tint, var(--cs-color-surface-raised)); }.cs-item.is-disabled, .cs-item[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; }/* Static Item text remains information, rather than an inactive control. */div.cs-item.is-disabled { opacity: 1; }.cs-item__leading { flex: none; display: grid; place-items: center; color: var(--cs-color-text-accent); }.cs-item__main { flex: 1; min-inline-size: 0; display: grid; gap: 2px; }.cs-item__title { font-weight: 600; font-size: var(--cs-font-size-sm); line-height: 1.35; }.cs-item__description { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); line-height: 1.4; }.cs-item__trailing { flex: none; display: grid; place-items: center; color: var(--cs-color-text-muted); }/* DescriptionList */.cs-dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px 24px; margin: 0; }.cs-dl dt { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); }.cs-dl dd { margin: 2px 0 0; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); }/* Timeline */.cs-timeline { display: grid; }.cs-timeline__item { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding-block-end: var(--cs-space-5); position: relative; }.cs-timeline__item:not(:last-child)::before { content: ""; position: absolute; inset-block: 26px 0; inset-inline-start: 12px; inline-size: 2px; background: var(--cs-color-border-default); }.cs-timeline__marker { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--cs-color-semantic-success); color: var(--cs-color-semantic-success-fg, #fff); font-size: var(--cs-font-size-xs); font-weight: 700; z-index: 1; }.cs-timeline__item--now .cs-timeline__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); }.cs-timeline__item--todo .cs-timeline__marker { background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); }.cs-timeline__title { font-weight: 700; margin: 2px 0 2px; }.cs-timeline__meta { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); font-family: var(--cs-font-family-mono); }.cs-timeline__body { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-muted); margin-block-start: 4px; }/* Accordion */.cs-accordion { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); overflow: hidden; background: var(--cs-color-surface-panel); }.cs-accordion__item + .cs-accordion__item { border-block-start: 1px solid var(--cs-color-border-default); }.cs-accordion__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--cs-space-3); padding: 15px 18px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }@media (hover: hover) {
1605
1608
  .cs-accordion__trigger:hover { background: var(--cs-color-surface-raised); }
1606
1609
  }.cs-accordion__chevron { flex: none; color: var(--cs-color-text-muted); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }.cs-accordion__trigger[aria-expanded="true"] .cs-accordion__chevron { transform: rotate(180deg); }.cs-accordion__panel { padding: 0 18px 16px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }/* Collapsible — light single-panel expand (no Accordion chrome) */.cs-collapsible { border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); background: var(--cs-color-surface-panel); overflow: hidden; }.cs-collapsible__trigger { inline-size: 100%; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); cursor: pointer; text-align: start; }.cs-collapsible__trigger:hover { background: var(--cs-color-surface-raised); }.cs-collapsible__label { flex: 1; min-inline-size: 0; }.cs-collapsible__chevron { flex: none; color: var(--cs-color-text-muted); transition: transform var(--cs-duration-fast) var(--cs-ease-standard); }.cs-collapsible__trigger[aria-expanded="true"] .cs-collapsible__chevron { transform: rotate(180deg); }.cs-collapsible__panel { padding: 0 16px 14px; color: var(--cs-color-text-muted); font-size: var(--cs-font-size-sm); line-height: var(--cs-font-lineHeight-body); }.cs-collapsible__panel > :first-child { margin-block-start: 0; }.cs-collapsible__panel > :last-child { margin-block-end: 0; }/* CodeBlock — always-dark chrome (FIND-010: hex only in local custom props) */.cs-code {
1607
1610
  --cs-code-bg: #2b1e14;
@@ -1609,7 +1612,7 @@
1609
1612
  --cs-code-border: #4a3a2c;
1610
1613
  --cs-code-muted: #c9b7a3;
1611
1614
  position: relative; background: var(--cs-code-bg); color: var(--cs-code-fg); border-radius: var(--cs-radius-lg); overflow: hidden; border: 1px solid var(--cs-code-border);
1612
- }.cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid var(--cs-code-border); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: var(--cs-code-muted); }.cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; }.cs-code__copy:hover { color: var(--cs-color-brand-ochre); }.cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }.cs-code code { font-family: inherit; }/* EmptyState */.cs-empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; }.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: color-mix(in oklab, var(--cs-color-brand-ochre) 24%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); margin-block-end: 6px; }.cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }.cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }.cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }/* Source: base/shell.css *//* CyberSkill — app shell + overlays wave 2 (.cs-*). *//* Sidebar + NavItem */.cs-sidebar { inline-size: 248px; background: var(--cs-color-surface-panel); border-inline-end: 1px solid var(--cs-color-border-default); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }.cs-sidebar__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 12px 12px 4px; }.cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }.cs-nav-item:hover { background: var(--cs-color-surface-raised); }.cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }.cs-nav-item.is-active { background: color-mix(in oklab, var(--cs-color-brand-ochre) 22%, var(--cs-color-surface-panel)); color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); }.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-brand-umber)) var(--_cs-dark, var(--cs-color-brand-ochre)); }.cs-nav-item__trail { margin-inline-start: auto; }/* Steps */.cs-steps { display: flex; gap: 0; }.cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }.cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }.cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }.cs-step--done .cs-step__marker { background: var(--cs-color-brand-umber); color: #fff; /* on-brand-umber ink */ border-color: transparent; }.cs-step--done:not(:last-child)::after { background: var(--cs-color-brand-umber); }.cs-step--active .cs-step__marker { background: var(--cs-color-brand-ochre); color: var(--cs-color-brand-umber); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-color-brand-ochre) 28%, transparent); }.cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }.cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }/* Popover */.cs-popover { position: relative; display: inline-block; }.cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-dropdown, 60); }.cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }/* Drawer */.cs-drawer-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); }.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: -18px 0 48px rgba(31, 19, 11, 0.22); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: 18px 0 48px rgba(31, 19, 11, 0.22); animation-name: cs-drawer-in-left; }.cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }.cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }.cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }.cs-drawer__close:hover { color: var(--cs-color-semantic-danger-text); }.cs-drawer__body { flex: 1; overflow: auto; padding: 20px; }.cs-drawer__footer { padding: 14px 20px; border-block-start: 1px solid var(--cs-color-border-default); display: flex; gap: 10px; justify-content: flex-end; }@keyframes cs-drawer-in { from { margin-inline-end: calc(-1 * min(480px, 100vw)); } to { margin-inline-end: 0; } }@keyframes cs-drawer-in-left { from { margin-inline-start: calc(-1 * min(480px, 100vw)); } to { margin-inline-start: 0; } }@media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }/* CommandPalette */.cs-cmdk-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }.cs-cmdk { inline-size: min(560px, 92vw); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); overflow: hidden; }.cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }.cs-cmdk__search svg { color: var(--cs-color-text-muted); }.cs-cmdk__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-md); color: var(--cs-color-text-primary); }/* Wrapper ring — search input clears outline; focus-within restores ≥3:1 indicator (FIND-038). */.cs-cmdk__search:focus-within {
1615
+ }.cs-code__bar { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-block-end: 1px solid var(--cs-code-border); font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-xs); color: var(--cs-code-muted); }.cs-code__copy { border: 0; background: transparent; color: var(--cs-code-muted); cursor: pointer; font: inherit; font-family: var(--cs-font-family-ui); font-weight: 600; min-block-size: 32px; padding-inline: 8px; border-radius: var(--cs-radius-sm); }.cs-code__copy:hover { color: var(--cs-color-brand-ochre); }.cs-code__copy:focus-visible { outline-color: var(--cs-code-fg); }.cs-code pre { margin: 0; padding: 14px 16px; overflow: auto; font-family: var(--cs-font-family-mono); font-size: var(--cs-font-size-sm); line-height: 1.6; }.cs-code code { font-family: inherit; }/* EmptyState */.cs-empty { text-align: center; padding: 48px 24px; display: grid; gap: 8px; justify-items: center; }.cs-empty__icon { inline-size: 56px; block-size: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 24%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); margin-block-end: 6px; }.cs-empty__title { font-size: var(--cs-text-h4); font-weight: 700; }.cs-empty__body { color: var(--cs-color-text-muted); max-inline-size: 380px; }.cs-empty__actions { margin-block-start: 12px; display: flex; gap: 10px; }/* Source: base/shell.css *//* CyberSkill — app shell + overlays wave 2 (.cs-*). *//* Sidebar + NavItem */.cs-sidebar { inline-size: 248px; background: var(--cs-color-surface-panel); border-inline-end: 1px solid var(--cs-color-border-default); padding: 16px 12px; display: flex; flex-direction: column; gap: 3px; }.cs-sidebar__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 12px 12px 4px; }.cs-nav-item { display: flex; align-items: center; gap: 11px; padding: 9px 12px; border-radius: var(--cs-radius-md); color: var(--cs-color-text-primary); font-family: var(--cs-font-family-ui); font-weight: 600; font-size: var(--cs-font-size-sm); text-decoration: none; cursor: pointer; border: 0; background: transparent; inline-size: 100%; text-align: start; }.cs-nav-item:hover { background: var(--cs-color-surface-raised); }.cs-nav-item__icon { flex: none; color: var(--cs-color-text-muted); display: grid; place-items: center; }.cs-nav-item.is-active { background: var(--_cs-light, var(--cs-accent-tint))var(--_cs-dark, color-mix(in oklab, var(--cs-accent) 22%, var(--cs-color-surface-panel))); color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }.cs-nav-item.is-active .cs-nav-item__icon { color: var(--_cs-light, var(--cs-color-text-accent))var(--_cs-dark, var(--cs-color-text-accent)); }.cs-nav-item__trail { margin-inline-start: auto; }/* Steps */.cs-steps { display: flex; gap: 0; }.cs-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; position: relative; padding-inline-end: 12px; }.cs-step:not(:last-child)::after { content: ""; position: absolute; inset-block-start: 13px; inset-inline-start: 34px; inline-size: calc(100% - 46px); block-size: 2px; background: var(--cs-color-border-default); }.cs-step__marker { inline-size: 28px; block-size: 28px; border-radius: 50%; display: grid; place-items: center; font-family: var(--cs-font-family-mono); font-weight: 700; font-size: var(--cs-font-size-sm); background: var(--cs-color-surface-raised); color: var(--cs-color-text-muted); border: 1px solid var(--cs-color-border-default); z-index: 1; }.cs-step--done .cs-step__marker { background: var(--cs-accent-strong); color: var(--cs-accent-on-strong); border-color: transparent; }.cs-step--done:not(:last-child)::after { background: var(--cs-accent-strong); }.cs-step--active .cs-step__marker { background: var(--cs-accent-bright); color: var(--cs-accent-on); border-color: transparent; box-shadow: 0 0 0 4px color-mix(in oklab, var(--cs-accent) 28%, transparent); }.cs-step__title { font-weight: 700; font-size: var(--cs-font-size-sm); }.cs-step__body { font-size: var(--cs-font-size-xs); color: var(--cs-color-text-muted); }/* Popover */.cs-popover { position: relative; display: inline-block; }.cs-popover__panel { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 0; min-inline-size: 240px; background: var(--cs-color-surface-panel); color: var(--cs-color-text-primary); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-md); box-shadow: var(--cs-shadow-md); padding: 14px; z-index: var(--cs-depth-dropdown, 60); }.cs-popover__panel--end { inset-inline-start: auto; inset-inline-end: 0; }/* Drawer */.cs-drawer-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); }.cs-drawer { position: fixed; inset-block: 0; inset-inline-end: 0; inline-size: min(480px, 100%); background: var(--cs-color-surface-page); border-inline-start: 1px solid var(--cs-color-border-default); box-shadow: -18px 0 48px rgba(31, 19, 11, 0.22); z-index: calc(var(--cs-depth-modal) + 1); display: flex; flex-direction: column; animation: cs-drawer-in var(--cs-duration-base) var(--cs-ease-standard); }.cs-drawer--left { inset-inline: 0 auto; border-inline: none; border-inline-end: 1px solid var(--cs-color-border-default); box-shadow: 18px 0 48px rgba(31, 19, 11, 0.22); animation-name: cs-drawer-in-left; }.cs-drawer__header { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-block-end: 1px solid var(--cs-color-border-default); background: var(--cs-color-surface-panel); }.cs-drawer__title { margin: 0; font-size: var(--cs-text-h4); font-weight: 700; }.cs-drawer__close { margin-inline-start: auto; border: 0; background: transparent; cursor: pointer; color: var(--cs-color-text-muted); display: grid; place-items: center; padding: 4px; }.cs-drawer__close:hover { color: var(--cs-color-semantic-danger-text); }.cs-drawer__body { flex: 1; overflow: auto; padding: 20px; }.cs-drawer__footer { padding: 14px 20px; border-block-start: 1px solid var(--cs-color-border-default); display: flex; gap: 10px; justify-content: flex-end; }@keyframes cs-drawer-in { from { margin-inline-end: calc(-1 * min(480px, 100%)); } to { margin-inline-end: 0; } }@keyframes cs-drawer-in-left { from { margin-inline-start: calc(-1 * min(480px, 100%)); } to { margin-inline-start: 0; } }@media (prefers-reduced-motion: reduce) { .cs-drawer { animation: none; } }/* CommandPalette */.cs-cmdk-scrim { position: fixed; inset: 0; background: rgba(31, 19, 11, 0.42); z-index: var(--cs-depth-modal); display: grid; align-items: start; justify-items: center; padding-block-start: 12vh; }.cs-cmdk { inline-size: min(560px, 92vw); background: var(--cs-color-surface-panel); border: 1px solid var(--cs-color-border-default); border-radius: var(--cs-radius-lg); box-shadow: var(--cs-shadow-xl); overflow: hidden; }.cs-cmdk__search { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-block-end: 1px solid var(--cs-color-border-default); }.cs-cmdk__search svg { color: var(--cs-color-text-muted); }.cs-cmdk__search input { flex: 1; border: 0; outline: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-md); color: var(--cs-color-text-primary); }/* Wrapper ring — search input clears outline; focus-within restores ≥3:1 indicator (FIND-038). */.cs-cmdk__search:focus-within {
1613
1616
  outline: 2px solid var(--cs-color-text-primary);
1614
1617
  outline-offset: -2px;
1615
1618
  }.cs-cmdk__list { max-block-size: 340px; overflow: auto; padding: 8px; display: grid; gap: 2px; }.cs-cmdk__status { font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 8px 10px; }.cs-cmdk__label { font-size: var(--cs-font-size-xs); text-transform: uppercase; letter-spacing: var(--cs-letter-spacing-caps); color: var(--cs-color-text-muted); padding: 8px 10px 2px; }.cs-cmdk__item { display: flex; align-items: center; gap: 11px; inline-size: 100%; text-align: start; border: 0; background: transparent; font: inherit; font-family: var(--cs-font-family-ui); font-size: var(--cs-font-size-sm); color: var(--cs-color-text-primary); padding: 10px 12px; border-radius: var(--cs-radius-md); cursor: pointer; }.cs-cmdk__item:hover, .cs-cmdk__item[aria-selected="true"] { background: var(--cs-color-surface-raised); }.cs-cmdk__item .cs-kbd { margin-inline-start: auto; }/* Source: base/glass.css *//*
@@ -1666,7 +1669,7 @@
1666
1669
  .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
1667
1670
  .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel {
1668
1671
  -webkit-backdrop-filter: none; backdrop-filter: none;
1669
- background: var(--cs-color-surface-panel, #fff); border: 1px solid var(--cs-color-border-default, #e7d9c6);
1672
+ background: var(--cs-color-surface-panel, #fff); color: var(--cs-color-text-primary, #45210e); border: 1px solid var(--cs-color-border-default, #e7d9c6);
1670
1673
  }
1671
1674
  .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before { display: none; }
1672
1675
  }@media (forced-colors: active) {
@@ -1678,15 +1681,15 @@
1678
1681
  .cs-surface-standard::before, .cs-surface-heavy::before, .cs-glass-card::before { display: none; }
1679
1682
  }@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
1680
1683
  .cs-surface-whisper, .cs-surface-light, .cs-surface-standard, .cs-surface-heavy,
1681
- .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel { background: var(--cs-color-surface-panel, #fff); }
1684
+ .cs-glass-card, .cs-dialog, .cs-ai-disclosure__panel { background: var(--cs-color-surface-panel, #fff); color: var(--cs-color-text-primary, #45210e); }
1682
1685
  }/* ---- 6. Brand aurora wash — the signature warm-gold-on-umber hero glow.
1683
1686
  * A CSS-only stand-in for aurora-gold.jpg: layer .cs-aurora on any full-bleed
1684
1687
  * hero/section. Text on it is #fff; keep an umber protection overlay if content
1685
1688
  * gets busy. .cs-aurora--photo layers the real asset when you have the path. */.cs-aurora {
1686
1689
  background-color: var(--cs-color-brand-umber);
1687
1690
  background-image:
1688
- radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-color-brand-ochre) 46%, transparent), transparent 55%),
1689
- radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, #ffcf5c 32%, transparent), transparent 60%),
1691
+ radial-gradient(90% 120% at 12% -10%, color-mix(in oklab, var(--cs-accent, var(--cs-color-brand-ochre)) 46%, transparent), transparent 55%),
1692
+ radial-gradient(70% 90% at 88% 8%, color-mix(in oklab, var(--cs-accent-grad-b, #ffcf5c) 32%, transparent), transparent 60%),
1690
1693
  radial-gradient(120% 120% at 50% 120%, color-mix(in oklab, #1a1108 60%, transparent), transparent 60%);
1691
1694
  color: #fff; /* on-aurora wash */
1692
1695
  }.cs-aurora--photo { background-size: cover; background-position: center; }/* Modal material backings are siblings of content: filters must not capture
@@ -1703,7 +1706,6 @@
1703
1706
  transition: background var(--cs-duration-fast) var(--cs-ease-standard),
1704
1707
  border-color var(--cs-duration-fast) var(--cs-ease-standard),
1705
1708
  filter var(--cs-duration-fast) var(--cs-ease-standard),
1706
- box-shadow var(--cs-duration-base) var(--cs-ease-standard),
1707
1709
  transform var(--cs-duration-fast) var(--cs-ease-standard);
1708
1710
  }.cs-button--primary:hover:not(.is-disabled),
1709
1711
  .cs-button--danger:hover:not(.is-disabled) {
@@ -1724,6 +1726,11 @@
1724
1726
  .cs-ai-disclosure__badge:focus-visible,
1725
1727
  .cs-switch input:focus-visible + .cs-switch__track {
1726
1728
  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre);
1729
+ }.cs-button:focus-visible {
1730
+ transition: background var(--cs-duration-fast) var(--cs-ease-standard),
1731
+ border-color var(--cs-duration-fast) var(--cs-ease-standard),
1732
+ filter var(--cs-duration-fast) var(--cs-ease-standard),
1733
+ transform var(--cs-duration-fast) var(--cs-ease-standard);
1727
1734
  }.cs-cmdk__search:focus-within {
1728
1735
  box-shadow: 0 0 0 5px var(--cs-color-accent-ochre), inset 0 0 0 4px var(--cs-color-accent-ochre);
1729
1736
  }/* ---- 3. Entrance motion utilities (opt-in) + a gentle Dialog entrance ---- */@keyframes cs-fade-in { from { opacity: 0; } to { opacity: 1; } }@keyframes cs-rise-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }.cs-fade-in { animation: cs-fade-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }.cs-rise-in { animation: cs-rise-in var(--cs-duration-slow) var(--cs-ease-entrance) both; }.cs-rise-in--2 { animation-delay: 80ms; }.cs-rise-in--3 { animation-delay: 160ms; }.cs-rise-in--4 { animation-delay: 240ms; }.cs-dialog { animation: cs-fade-in var(--cs-duration-base) var(--cs-ease-entrance) both; }.cs-dialog__overlay { animation: cs-fade-in var(--cs-duration-base) var(--cs-ease-standard) both; }/* Fade preserves target size and avoids a containing block for nested overlays. */@media (prefers-reduced-motion: reduce) {