ui-style-kit-css 2.3.0 → 2.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/CHANGELOG.md +57 -2
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +102 -44
  4. package/STYLE-MAP.md +14 -5
  5. package/dist/assets/bauhaus-barlow-OFL.txt +93 -0
  6. package/dist/assets/bauhaus-barlow-semibold.ttf +0 -0
  7. package/dist/assets/bauhaus-barlow.ttf +0 -0
  8. package/dist/assets/bauhaus-condensed-OFL.txt +93 -0
  9. package/dist/assets/bauhaus-condensed-bold.ttf +0 -0
  10. package/dist/assets/bauhaus-condensed-extrabold.ttf +0 -0
  11. package/dist/assets/bento-manrope-OFL.txt +93 -0
  12. package/dist/assets/bento-manrope.ttf +0 -0
  13. package/dist/assets/clay-grain.png +0 -0
  14. package/dist/assets/clay-rounded-OFL.txt +93 -0
  15. package/dist/assets/clay-rounded.ttf +0 -0
  16. package/dist/assets/neo-noir-corner-dark.png +0 -0
  17. package/dist/assets/neo-noir-corner-light.png +0 -0
  18. package/dist/assets/neo-noir-texture-dark.png +0 -0
  19. package/dist/assets/neo-noir-texture-light.png +0 -0
  20. package/dist/assets/organic-display-OFL.txt +93 -0
  21. package/dist/assets/organic-display.ttf +0 -0
  22. package/dist/assets/organic-icons-LICENSE.txt +21 -0
  23. package/dist/assets/organic-sans-OFL.txt +93 -0
  24. package/dist/assets/organic-sans.ttf +0 -0
  25. package/dist/ui-style-kit.css +47898 -15121
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +47771 -15122
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +47932 -15145
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +3247 -295
  32. package/dist/visual/bauhaus.css +2 -4692
  33. package/dist/visual/bento.css +2 -4708
  34. package/dist/visual/brutalism.css +1229 -231
  35. package/dist/visual/clay.css +2 -4786
  36. package/dist/visual/cyberpunk.css +2663 -282
  37. package/dist/visual/data-terminal.css +2064 -276
  38. package/dist/visual/editorial-luxe.css +2315 -259
  39. package/dist/visual/industrial-utility.css +3142 -270
  40. package/dist/visual/maximalist.css +2185 -454
  41. package/dist/visual/minimal-saas.css +1503 -398
  42. package/dist/visual/neo-noir.css +2 -4787
  43. package/dist/visual/neumorphism.css +1690 -402
  44. package/dist/visual/organic-modern.css +2 -4764
  45. package/dist/visual/paper-editorial.css +2977 -292
  46. package/dist/visual/retro-glass.css +2625 -299
  47. package/dist/visual/retrofuturism.css +1885 -397
  48. package/dist/visual/tactile.css +2716 -498
  49. package/dist/visual/technical-blueprint.css +2599 -267
  50. package/dist/visual/y2k.css +1906 -309
  51. package/docs/ART-DECO.md +80 -0
  52. package/docs/BAUHAUS.md +152 -0
  53. package/docs/BENTO.md +121 -0
  54. package/docs/CLAY.md +127 -0
  55. package/docs/COLOR-THEMES.md +63 -0
  56. package/docs/DEMO-SHOWCASE.md +65 -0
  57. package/docs/ECOSYSTEM.md +4 -4
  58. package/docs/EDITORIAL-LUX.md +75 -0
  59. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  60. package/docs/NATIVE-ELEMENTS.md +23 -17
  61. package/docs/NEO-NOIR.md +94 -0
  62. package/docs/ORGANIC-MODERN.md +91 -0
  63. package/docs/PAPER-EDITORIAL.md +63 -0
  64. package/docs/PUBLISHING.md +31 -10
  65. package/docs/RELEASE-2.4.0.md +88 -0
  66. package/docs/RELEASE-2.4.1.md +35 -0
  67. package/docs/RETRO-GLASS.md +105 -0
  68. package/docs/STYLE-GUIDE.md +41 -26
  69. package/docs/TACTILE.md +38 -0
  70. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  71. package/docs/TOKENS.md +80 -3
  72. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  73. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  74. package/manifest.json +624 -28
  75. package/package.json +20 -11
  76. package/styles/art-deco.css +1402 -17
  77. package/styles/assets/bauhaus-barlow-OFL.txt +93 -0
  78. package/styles/assets/bauhaus-barlow-semibold.ttf +0 -0
  79. package/styles/assets/bauhaus-barlow.ttf +0 -0
  80. package/styles/assets/bauhaus-condensed-OFL.txt +93 -0
  81. package/styles/assets/bauhaus-condensed-bold.ttf +0 -0
  82. package/styles/assets/bauhaus-condensed-extrabold.ttf +0 -0
  83. package/styles/assets/bento-manrope-OFL.txt +93 -0
  84. package/styles/assets/bento-manrope.ttf +0 -0
  85. package/styles/assets/clay-grain.png +0 -0
  86. package/styles/assets/clay-rounded-OFL.txt +93 -0
  87. package/styles/assets/clay-rounded.ttf +0 -0
  88. package/styles/assets/neo-noir-corner-dark.png +0 -0
  89. package/styles/assets/neo-noir-corner-light.png +0 -0
  90. package/styles/assets/neo-noir-texture-dark.png +0 -0
  91. package/styles/assets/neo-noir-texture-light.png +0 -0
  92. package/styles/assets/organic-display-OFL.txt +93 -0
  93. package/styles/assets/organic-display.ttf +0 -0
  94. package/styles/assets/organic-icons-LICENSE.txt +21 -0
  95. package/styles/assets/organic-sans-OFL.txt +93 -0
  96. package/styles/assets/organic-sans.ttf +0 -0
  97. package/styles/bauhaus.css +881 -110
  98. package/styles/bento.css +1182 -113
  99. package/styles/brutalism.css +266 -15
  100. package/styles/clay.css +1307 -72
  101. package/styles/compat-layout.css +1 -2
  102. package/styles/components.css +107 -36
  103. package/styles/content-overflow.css +11 -5
  104. package/styles/cyberpunk.css +1856 -51
  105. package/styles/data-terminal.css +1122 -18
  106. package/styles/editorial-luxe.css +581 -17
  107. package/styles/industrial-utility.css +1775 -16
  108. package/styles/interactive-surface-bridge.css +30 -20
  109. package/styles/interactive-surface-theme.css +21 -11
  110. package/styles/maximalist.css +1215 -133
  111. package/styles/minimal-saas.css +465 -93
  112. package/styles/native-elements.css +347 -171
  113. package/styles/neo-noir.css +661 -19
  114. package/styles/neumorphism.css +1021 -149
  115. package/styles/organic-modern.css +693 -23
  116. package/styles/paper-editorial.css +1053 -17
  117. package/styles/retro-glass.css +639 -50
  118. package/styles/retrofuturism.css +948 -60
  119. package/styles/tactile.css +1813 -111
  120. package/styles/technical-blueprint.css +673 -22
  121. package/styles/theme-colors.css +412 -2
  122. package/styles/y2k.css +954 -46
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * UI Style Kit CSS v2.3.0
2
+ * UI Style Kit CSS v2.4.1
3
3
  * CSS theme and UI style preset library.
4
4
  * License: MIT
5
5
  */
@@ -13,13 +13,26 @@
13
13
  ========================================================= */
14
14
 
15
15
  @layer ui-style-kit.theme_colors {
16
+ /**
17
+ * Optional text inks let bright palette fills retain their color without making
18
+ * text on neutral surfaces unreadable. Initial values preserve preset colors and
19
+ * prevent an outer palette's text override from leaking into a nested UI root.
20
+ */
21
+ :where([data-ui]) {
22
+ --usk-primary-ink: initial;
23
+ --usk-accent-ink: initial;
24
+ }
25
+
16
26
  /* Shared RGB roles keep visual presets focused on layout, texture, and component treatment. */
17
- :where([data-ui][data-theme][data-mode="light"]) {
27
+ :where([data-ui][data-mode="light"]) {
28
+ /* Keep vivid fills intact while using the darker link role for text treatments. */
29
+ --usk-primary-ink: rgb(var(--usk-link-rgb));
30
+ --usk-accent-ink: rgb(var(--usk-link-rgb));
18
31
  --usk-border-text-mix: 45%;
19
32
  --usk-border-min-alpha: 1;
20
33
  }
21
34
 
22
- :where([data-ui][data-theme][data-mode="dark"], [data-ui][data-theme][data-mode="contrast"]) {
35
+ :where([data-ui][data-mode="dark"], [data-ui][data-mode="contrast"]) {
23
36
  --usk-border-text-mix: 0%;
24
37
  --usk-border-min-alpha: 0;
25
38
  }
@@ -1584,6 +1597,403 @@
1584
1597
  --usk-danger-text-rgb: 0 0 0;
1585
1598
  --usk-focus-rgb: 255 255 255;
1586
1599
  }
1600
+
1601
+ /** Signal Yellow pairs vivid yellow actions with ink-navy supporting roles. */
1602
+ :where([data-ui][data-theme="signal-yellow"][data-mode="light"]) {
1603
+ --usk-primary-ink: rgb(var(--usk-link-rgb));
1604
+ --usk-accent-ink: rgb(var(--usk-link-rgb));
1605
+ --usk-bg-rgb: 255 251 232;
1606
+ --usk-surface-rgb: 255 255 255;
1607
+ --usk-surface-strong-rgb: 255 254 245;
1608
+ --usk-surface-soft-rgb: 247 237 187;
1609
+ --usk-text-rgb: 33 29 12;
1610
+ --usk-text-muted-rgb: 100 91 55;
1611
+ --usk-border-rgb: 217 199 111;
1612
+ --usk-primary-rgb: 255 204 0;
1613
+ --usk-primary-hover-rgb: 222 175 0;
1614
+ --usk-primary-text-rgb: 0 0 0;
1615
+ --usk-secondary-rgb: 37 50 78;
1616
+ --usk-secondary-hover-rgb: 25 37 61;
1617
+ --usk-secondary-text-rgb: 255 255 255;
1618
+ --usk-accent-rgb: 255 228 92;
1619
+ --usk-success-rgb: 34 122 75;
1620
+ --usk-warning-rgb: 144 92 0;
1621
+ --usk-danger-rgb: 177 54 54;
1622
+ --usk-link-rgb: 112 79 0;
1623
+ --usk-accent-text-rgb: 0 0 0;
1624
+ --usk-success-text-rgb: 255 255 255;
1625
+ --usk-warning-text-rgb: 255 255 255;
1626
+ --usk-danger-text-rgb: 255 255 255;
1627
+ --usk-focus-rgb: 255 204 0;
1628
+ }
1629
+
1630
+ :where([data-ui][data-theme="signal-yellow"][data-mode="dark"]) {
1631
+ --usk-bg-rgb: 18 15 3;
1632
+ --usk-surface-rgb: 32 27 7;
1633
+ --usk-surface-strong-rgb: 48 40 10;
1634
+ --usk-surface-soft-rgb: 25 21 5;
1635
+ --usk-text-rgb: 255 249 222;
1636
+ --usk-text-muted-rgb: 207 195 145;
1637
+ --usk-border-rgb: 104 88 31;
1638
+ --usk-primary-rgb: 255 216 59;
1639
+ --usk-primary-hover-rgb: 255 234 130;
1640
+ --usk-primary-text-rgb: 0 0 0;
1641
+ --usk-secondary-rgb: 142 198 255;
1642
+ --usk-secondary-hover-rgb: 182 220 255;
1643
+ --usk-secondary-text-rgb: 0 0 0;
1644
+ --usk-accent-rgb: 255 232 102;
1645
+ --usk-success-rgb: 103 217 151;
1646
+ --usk-warning-rgb: 255 194 62;
1647
+ --usk-danger-rgb: 255 119 119;
1648
+ --usk-link-rgb: 255 232 102;
1649
+ --usk-accent-text-rgb: 0 0 0;
1650
+ --usk-success-text-rgb: 0 0 0;
1651
+ --usk-warning-text-rgb: 0 0 0;
1652
+ --usk-danger-text-rgb: 0 0 0;
1653
+ --usk-focus-rgb: 255 232 102;
1654
+ }
1655
+
1656
+ :where([data-ui][data-theme="signal-yellow"][data-mode="contrast"]) {
1657
+ --usk-bg-rgb: 0 0 0;
1658
+ --usk-surface-rgb: 13 11 0;
1659
+ --usk-surface-strong-rgb: 26 22 0;
1660
+ --usk-surface-soft-rgb: 0 0 0;
1661
+ --usk-text-rgb: 255 255 255;
1662
+ --usk-text-muted-rgb: 255 250 222;
1663
+ --usk-border-rgb: 255 255 255;
1664
+ --usk-primary-rgb: 255 214 0;
1665
+ --usk-primary-hover-rgb: 255 255 255;
1666
+ --usk-primary-text-rgb: 0 0 0;
1667
+ --usk-secondary-rgb: 0 217 255;
1668
+ --usk-secondary-hover-rgb: 255 255 255;
1669
+ --usk-secondary-text-rgb: 0 0 0;
1670
+ --usk-accent-rgb: 255 234 0;
1671
+ --usk-success-rgb: 0 255 144;
1672
+ --usk-warning-rgb: 255 191 0;
1673
+ --usk-danger-rgb: 255 77 77;
1674
+ --usk-link-rgb: 255 234 0;
1675
+ --usk-accent-text-rgb: 0 0 0;
1676
+ --usk-success-text-rgb: 0 0 0;
1677
+ --usk-warning-text-rgb: 0 0 0;
1678
+ --usk-danger-text-rgb: 0 0 0;
1679
+ --usk-focus-rgb: 255 255 255;
1680
+ }
1681
+
1682
+ /** Botanical Green pairs leaf-green actions with restrained berry support. */
1683
+ :where([data-ui][data-theme="botanical-green"][data-mode="light"]) {
1684
+ --usk-bg-rgb: 239 249 242;
1685
+ --usk-surface-rgb: 255 255 255;
1686
+ --usk-surface-strong-rgb: 248 253 249;
1687
+ --usk-surface-soft-rgb: 214 237 220;
1688
+ --usk-text-rgb: 14 38 23;
1689
+ --usk-text-muted-rgb: 75 98 81;
1690
+ --usk-border-rgb: 176 207 185;
1691
+ --usk-primary-rgb: 13 126 66;
1692
+ --usk-primary-hover-rgb: 8 97 50;
1693
+ --usk-primary-text-rgb: 255 255 255;
1694
+ --usk-secondary-rgb: 121 48 88;
1695
+ --usk-secondary-hover-rgb: 91 35 65;
1696
+ --usk-secondary-text-rgb: 255 255 255;
1697
+ --usk-accent-rgb: 64 201 117;
1698
+ --usk-success-rgb: 24 116 65;
1699
+ --usk-warning-rgb: 150 96 0;
1700
+ --usk-danger-rgb: 178 60 70;
1701
+ --usk-link-rgb: 8 97 50;
1702
+ --usk-accent-text-rgb: 0 0 0;
1703
+ --usk-success-text-rgb: 255 255 255;
1704
+ --usk-warning-text-rgb: 255 255 255;
1705
+ --usk-danger-text-rgb: 255 255 255;
1706
+ --usk-focus-rgb: 64 201 117;
1707
+ }
1708
+
1709
+ :where([data-ui][data-theme="botanical-green"][data-mode="dark"]) {
1710
+ --usk-bg-rgb: 4 17 9;
1711
+ --usk-surface-rgb: 10 32 18;
1712
+ --usk-surface-strong-rgb: 17 48 28;
1713
+ --usk-surface-soft-rgb: 7 24 14;
1714
+ --usk-text-rgb: 235 252 241;
1715
+ --usk-text-muted-rgb: 173 205 182;
1716
+ --usk-border-rgb: 49 91 63;
1717
+ --usk-primary-rgb: 82 222 139;
1718
+ --usk-primary-hover-rgb: 128 240 169;
1719
+ --usk-primary-text-rgb: 0 0 0;
1720
+ --usk-secondary-rgb: 238 148 199;
1721
+ --usk-secondary-hover-rgb: 255 187 222;
1722
+ --usk-secondary-text-rgb: 0 0 0;
1723
+ --usk-accent-rgb: 107 240 164;
1724
+ --usk-success-rgb: 100 218 149;
1725
+ --usk-warning-rgb: 255 205 91;
1726
+ --usk-danger-rgb: 255 126 137;
1727
+ --usk-link-rgb: 128 240 169;
1728
+ --usk-accent-text-rgb: 0 0 0;
1729
+ --usk-success-text-rgb: 0 0 0;
1730
+ --usk-warning-text-rgb: 0 0 0;
1731
+ --usk-danger-text-rgb: 0 0 0;
1732
+ --usk-focus-rgb: 107 240 164;
1733
+ }
1734
+
1735
+ :where([data-ui][data-theme="botanical-green"][data-mode="contrast"]) {
1736
+ --usk-bg-rgb: 0 0 0;
1737
+ --usk-surface-rgb: 0 14 5;
1738
+ --usk-surface-strong-rgb: 0 29 11;
1739
+ --usk-surface-soft-rgb: 0 0 0;
1740
+ --usk-text-rgb: 255 255 255;
1741
+ --usk-text-muted-rgb: 238 255 244;
1742
+ --usk-border-rgb: 255 255 255;
1743
+ --usk-primary-rgb: 0 255 112;
1744
+ --usk-primary-hover-rgb: 255 255 255;
1745
+ --usk-primary-text-rgb: 0 0 0;
1746
+ --usk-secondary-rgb: 255 92 178;
1747
+ --usk-secondary-hover-rgb: 255 255 255;
1748
+ --usk-secondary-text-rgb: 0 0 0;
1749
+ --usk-accent-rgb: 103 255 166;
1750
+ --usk-success-rgb: 0 255 117;
1751
+ --usk-warning-rgb: 255 212 0;
1752
+ --usk-danger-rgb: 255 77 91;
1753
+ --usk-link-rgb: 103 255 166;
1754
+ --usk-accent-text-rgb: 0 0 0;
1755
+ --usk-success-text-rgb: 0 0 0;
1756
+ --usk-warning-text-rgb: 0 0 0;
1757
+ --usk-danger-text-rgb: 0 0 0;
1758
+ --usk-focus-rgb: 255 255 255;
1759
+ }
1760
+
1761
+ /** Cobalt Electric pairs saturated blue actions with coral supporting roles. */
1762
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="light"]) {
1763
+ --usk-bg-rgb: 240 244 255;
1764
+ --usk-surface-rgb: 255 255 255;
1765
+ --usk-surface-strong-rgb: 248 250 255;
1766
+ --usk-surface-soft-rgb: 220 229 250;
1767
+ --usk-text-rgb: 14 27 57;
1768
+ --usk-text-muted-rgb: 73 89 123;
1769
+ --usk-border-rgb: 177 195 232;
1770
+ --usk-primary-rgb: 0 82 204;
1771
+ --usk-primary-hover-rgb: 0 61 158;
1772
+ --usk-primary-text-rgb: 255 255 255;
1773
+ --usk-secondary-rgb: 181 57 72;
1774
+ --usk-secondary-hover-rgb: 143 41 54;
1775
+ --usk-secondary-text-rgb: 255 255 255;
1776
+ --usk-accent-rgb: 82 121 255;
1777
+ --usk-success-rgb: 35 121 78;
1778
+ --usk-warning-rgb: 151 96 0;
1779
+ --usk-danger-rgb: 180 55 74;
1780
+ --usk-link-rgb: 0 64 163;
1781
+ --usk-accent-text-rgb: 0 0 0;
1782
+ --usk-success-text-rgb: 255 255 255;
1783
+ --usk-warning-text-rgb: 255 255 255;
1784
+ --usk-danger-text-rgb: 255 255 255;
1785
+ --usk-focus-rgb: 82 121 255;
1786
+ }
1787
+
1788
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="dark"]) {
1789
+ --usk-bg-rgb: 4 9 25;
1790
+ --usk-surface-rgb: 10 20 48;
1791
+ --usk-surface-strong-rgb: 16 32 72;
1792
+ --usk-surface-soft-rgb: 7 14 36;
1793
+ --usk-text-rgb: 239 244 255;
1794
+ --usk-text-muted-rgb: 174 188 218;
1795
+ --usk-border-rgb: 49 70 122;
1796
+ --usk-primary-rgb: 111 149 255;
1797
+ --usk-primary-hover-rgb: 164 188 255;
1798
+ --usk-primary-text-rgb: 0 0 0;
1799
+ --usk-secondary-rgb: 255 133 147;
1800
+ --usk-secondary-hover-rgb: 255 173 183;
1801
+ --usk-secondary-text-rgb: 0 0 0;
1802
+ --usk-accent-rgb: 143 170 255;
1803
+ --usk-success-rgb: 105 219 159;
1804
+ --usk-warning-rgb: 255 205 91;
1805
+ --usk-danger-rgb: 255 121 139;
1806
+ --usk-link-rgb: 164 188 255;
1807
+ --usk-accent-text-rgb: 0 0 0;
1808
+ --usk-success-text-rgb: 0 0 0;
1809
+ --usk-warning-text-rgb: 0 0 0;
1810
+ --usk-danger-text-rgb: 0 0 0;
1811
+ --usk-focus-rgb: 143 170 255;
1812
+ }
1813
+
1814
+ :where([data-ui][data-theme="cobalt-electric"][data-mode="contrast"]) {
1815
+ --usk-bg-rgb: 0 0 0;
1816
+ --usk-surface-rgb: 0 7 22;
1817
+ --usk-surface-strong-rgb: 0 15 44;
1818
+ --usk-surface-soft-rgb: 0 0 0;
1819
+ --usk-text-rgb: 255 255 255;
1820
+ --usk-text-muted-rgb: 239 245 255;
1821
+ --usk-border-rgb: 255 255 255;
1822
+ --usk-primary-rgb: 76 133 255;
1823
+ --usk-primary-hover-rgb: 255 255 255;
1824
+ --usk-primary-text-rgb: 0 0 0;
1825
+ --usk-secondary-rgb: 255 105 125;
1826
+ --usk-secondary-hover-rgb: 255 255 255;
1827
+ --usk-secondary-text-rgb: 0 0 0;
1828
+ --usk-accent-rgb: 132 168 255;
1829
+ --usk-success-rgb: 0 255 144;
1830
+ --usk-warning-rgb: 255 212 0;
1831
+ --usk-danger-rgb: 255 92 112;
1832
+ --usk-link-rgb: 132 168 255;
1833
+ --usk-accent-text-rgb: 0 0 0;
1834
+ --usk-success-text-rgb: 0 0 0;
1835
+ --usk-warning-text-rgb: 0 0 0;
1836
+ --usk-danger-text-rgb: 0 0 0;
1837
+ --usk-focus-rgb: 255 255 255;
1838
+ }
1839
+
1840
+ /** Stone Graphite uses neutral surfaces while preserving semantic status colors. */
1841
+ :where([data-ui][data-theme="stone-graphite"][data-mode="light"]) {
1842
+ --usk-bg-rgb: 244 244 242;
1843
+ --usk-surface-rgb: 255 255 255;
1844
+ --usk-surface-strong-rgb: 250 250 248;
1845
+ --usk-surface-soft-rgb: 227 229 225;
1846
+ --usk-text-rgb: 27 29 28;
1847
+ --usk-text-muted-rgb: 86 91 88;
1848
+ --usk-border-rgb: 184 189 185;
1849
+ --usk-primary-rgb: 56 60 58;
1850
+ --usk-primary-hover-rgb: 37 40 38;
1851
+ --usk-primary-text-rgb: 255 255 255;
1852
+ --usk-secondary-rgb: 91 97 93;
1853
+ --usk-secondary-hover-rgb: 69 74 71;
1854
+ --usk-secondary-text-rgb: 255 255 255;
1855
+ --usk-accent-rgb: 184 190 186;
1856
+ --usk-success-rgb: 48 115 79;
1857
+ --usk-warning-rgb: 145 94 0;
1858
+ --usk-danger-rgb: 168 60 60;
1859
+ --usk-link-rgb: 52 60 56;
1860
+ --usk-accent-text-rgb: 0 0 0;
1861
+ --usk-success-text-rgb: 255 255 255;
1862
+ --usk-warning-text-rgb: 255 255 255;
1863
+ --usk-danger-text-rgb: 255 255 255;
1864
+ --usk-focus-rgb: 112 121 116;
1865
+ }
1866
+
1867
+ :where([data-ui][data-theme="stone-graphite"][data-mode="dark"]) {
1868
+ --usk-bg-rgb: 12 13 13;
1869
+ --usk-surface-rgb: 25 27 26;
1870
+ --usk-surface-strong-rgb: 40 43 41;
1871
+ --usk-surface-soft-rgb: 18 20 19;
1872
+ --usk-text-rgb: 245 246 245;
1873
+ --usk-text-muted-rgb: 189 193 190;
1874
+ --usk-border-rgb: 78 84 80;
1875
+ --usk-primary-rgb: 208 212 209;
1876
+ --usk-primary-hover-rgb: 235 237 235;
1877
+ --usk-primary-text-rgb: 0 0 0;
1878
+ --usk-secondary-rgb: 164 170 166;
1879
+ --usk-secondary-hover-rgb: 194 199 196;
1880
+ --usk-secondary-text-rgb: 0 0 0;
1881
+ --usk-accent-rgb: 230 232 231;
1882
+ --usk-success-rgb: 130 210 165;
1883
+ --usk-warning-rgb: 242 197 112;
1884
+ --usk-danger-rgb: 240 137 137;
1885
+ --usk-link-rgb: 220 224 221;
1886
+ --usk-accent-text-rgb: 0 0 0;
1887
+ --usk-success-text-rgb: 0 0 0;
1888
+ --usk-warning-text-rgb: 0 0 0;
1889
+ --usk-danger-text-rgb: 0 0 0;
1890
+ --usk-focus-rgb: 255 255 255;
1891
+ }
1892
+
1893
+ :where([data-ui][data-theme="stone-graphite"][data-mode="contrast"]) {
1894
+ --usk-bg-rgb: 0 0 0;
1895
+ --usk-surface-rgb: 8 8 8;
1896
+ --usk-surface-strong-rgb: 20 20 20;
1897
+ --usk-surface-soft-rgb: 0 0 0;
1898
+ --usk-text-rgb: 255 255 255;
1899
+ --usk-text-muted-rgb: 245 245 245;
1900
+ --usk-border-rgb: 255 255 255;
1901
+ --usk-primary-rgb: 255 255 255;
1902
+ --usk-primary-hover-rgb: 221 221 221;
1903
+ --usk-primary-text-rgb: 0 0 0;
1904
+ --usk-secondary-rgb: 205 205 205;
1905
+ --usk-secondary-hover-rgb: 255 255 255;
1906
+ --usk-secondary-text-rgb: 0 0 0;
1907
+ --usk-accent-rgb: 245 245 245;
1908
+ --usk-success-rgb: 0 255 144;
1909
+ --usk-warning-rgb: 255 212 0;
1910
+ --usk-danger-rgb: 255 92 92;
1911
+ --usk-link-rgb: 255 255 255;
1912
+ --usk-accent-text-rgb: 0 0 0;
1913
+ --usk-success-text-rgb: 0 0 0;
1914
+ --usk-warning-text-rgb: 0 0 0;
1915
+ --usk-danger-text-rgb: 0 0 0;
1916
+ --usk-focus-rgb: 255 255 255;
1917
+ }
1918
+
1919
+ /** Walnut Clay pairs deep brown actions with clay accents and muted foliage. */
1920
+ :where([data-ui][data-theme="walnut-clay"][data-mode="light"]) {
1921
+ --usk-bg-rgb: 248 241 233;
1922
+ --usk-surface-rgb: 255 255 255;
1923
+ --usk-surface-strong-rgb: 253 249 245;
1924
+ --usk-surface-soft-rgb: 232 216 202;
1925
+ --usk-text-rgb: 49 36 29;
1926
+ --usk-text-muted-rgb: 102 84 74;
1927
+ --usk-border-rgb: 199 172 154;
1928
+ --usk-primary-rgb: 112 67 48;
1929
+ --usk-primary-hover-rgb: 83 47 34;
1930
+ --usk-primary-text-rgb: 255 255 255;
1931
+ --usk-secondary-rgb: 88 98 78;
1932
+ --usk-secondary-hover-rgb: 66 75 57;
1933
+ --usk-secondary-text-rgb: 255 255 255;
1934
+ --usk-accent-rgb: 190 111 82;
1935
+ --usk-success-rgb: 53 117 76;
1936
+ --usk-warning-rgb: 147 91 0;
1937
+ --usk-danger-rgb: 173 61 55;
1938
+ --usk-link-rgb: 105 60 43;
1939
+ --usk-accent-text-rgb: 0 0 0;
1940
+ --usk-success-text-rgb: 255 255 255;
1941
+ --usk-warning-text-rgb: 255 255 255;
1942
+ --usk-danger-text-rgb: 255 255 255;
1943
+ --usk-focus-rgb: 190 111 82;
1944
+ }
1945
+
1946
+ :where([data-ui][data-theme="walnut-clay"][data-mode="dark"]) {
1947
+ --usk-bg-rgb: 18 12 9;
1948
+ --usk-surface-rgb: 35 24 19;
1949
+ --usk-surface-strong-rgb: 51 34 26;
1950
+ --usk-surface-soft-rgb: 27 18 14;
1951
+ --usk-text-rgb: 250 241 233;
1952
+ --usk-text-muted-rgb: 205 184 169;
1953
+ --usk-border-rgb: 107 78 61;
1954
+ --usk-primary-rgb: 218 158 124;
1955
+ --usk-primary-hover-rgb: 240 188 156;
1956
+ --usk-primary-text-rgb: 0 0 0;
1957
+ --usk-secondary-rgb: 178 192 157;
1958
+ --usk-secondary-hover-rgb: 207 217 190;
1959
+ --usk-secondary-text-rgb: 0 0 0;
1960
+ --usk-accent-rgb: 235 169 136;
1961
+ --usk-success-rgb: 133 214 164;
1962
+ --usk-warning-rgb: 255 203 100;
1963
+ --usk-danger-rgb: 255 135 128;
1964
+ --usk-link-rgb: 240 188 156;
1965
+ --usk-accent-text-rgb: 0 0 0;
1966
+ --usk-success-text-rgb: 0 0 0;
1967
+ --usk-warning-text-rgb: 0 0 0;
1968
+ --usk-danger-text-rgb: 0 0 0;
1969
+ --usk-focus-rgb: 235 169 136;
1970
+ }
1971
+
1972
+ :where([data-ui][data-theme="walnut-clay"][data-mode="contrast"]) {
1973
+ --usk-bg-rgb: 0 0 0;
1974
+ --usk-surface-rgb: 15 7 3;
1975
+ --usk-surface-strong-rgb: 31 15 7;
1976
+ --usk-surface-soft-rgb: 0 0 0;
1977
+ --usk-text-rgb: 255 255 255;
1978
+ --usk-text-muted-rgb: 255 244 237;
1979
+ --usk-border-rgb: 255 255 255;
1980
+ --usk-primary-rgb: 255 174 128;
1981
+ --usk-primary-hover-rgb: 255 255 255;
1982
+ --usk-primary-text-rgb: 0 0 0;
1983
+ --usk-secondary-rgb: 208 234 166;
1984
+ --usk-secondary-hover-rgb: 255 255 255;
1985
+ --usk-secondary-text-rgb: 0 0 0;
1986
+ --usk-accent-rgb: 255 194 160;
1987
+ --usk-success-rgb: 0 255 144;
1988
+ --usk-warning-rgb: 255 212 0;
1989
+ --usk-danger-rgb: 255 102 96;
1990
+ --usk-link-rgb: 255 194 160;
1991
+ --usk-accent-text-rgb: 0 0 0;
1992
+ --usk-success-text-rgb: 0 0 0;
1993
+ --usk-warning-text-rgb: 0 0 0;
1994
+ --usk-danger-text-rgb: 0 0 0;
1995
+ --usk-focus-rgb: 255 255 255;
1996
+ }
1587
1997
  }
1588
1998
 
1589
1999
 
@@ -1597,7 +2007,8 @@
1597
2007
  ========================================================= */
1598
2008
 
1599
2009
  @layer ui-style-kit.native_elements {
1600
- [data-ui][data-theme][data-mode] {
2010
+ [data-ui][data-mode] {
2011
+ --usk-native-bg: rgb(var(--usk-bg-rgb));
1601
2012
  --usk-native-surface: rgb(var(--usk-surface-rgb));
1602
2013
  --usk-native-surface-strong: rgb(var(--usk-surface-strong-rgb));
1603
2014
  --usk-native-surface-soft: rgb(var(--usk-surface-soft-rgb));
@@ -1634,6 +2045,52 @@
1634
2045
  --usk-native-thumb: var(--usk-native-surface-strong);
1635
2046
  --usk-native-thumb-border: var(--usk-native-primary);
1636
2047
  --usk-native-indicator: var(--usk-native-primary);
2048
+ --usk-native-choice-size: 1.5rem;
2049
+ --usk-native-choice-background: var(--usk-native-control-bg);
2050
+ --usk-native-choice-border: var(--usk-native-border-width) solid var(--usk-native-border);
2051
+ --usk-native-checkbox-radius: .3rem;
2052
+ --usk-native-radio-radius: 50%;
2053
+ --usk-native-choice-shadow: none;
2054
+ --usk-native-choice-checked-background: var(--usk-native-primary);
2055
+ --usk-native-choice-mark-color: var(--usk-native-on-primary);
2056
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--usk-native-indicator) 50%), linear-gradient(135deg, var(--usk-native-indicator) 50%, transparent 50%);
2057
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
2058
+ --usk-native-select-indicator-position: calc(100% - 1.15rem) 50%, calc(100% - .85rem) 50%;
2059
+ --usk-native-select-padding-inline-end: 2.5rem;
2060
+ --usk-native-range-track-size: .45rem;
2061
+ --usk-native-range-track-background: var(--usk-native-track);
2062
+ --usk-native-range-track-border: 0 solid transparent;
2063
+ --usk-native-range-track-radius: 999px;
2064
+ --usk-native-range-track-shadow: none;
2065
+ --usk-native-range-progress-background: var(--usk-native-track-fill);
2066
+ --usk-native-range-thumb-size: 1.2rem;
2067
+ --usk-native-range-thumb-background: var(--usk-native-thumb);
2068
+ --usk-native-range-thumb-border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
2069
+ --usk-native-range-thumb-radius: 50%;
2070
+ --usk-native-range-thumb-shadow: var(--usk-native-shadow);
2071
+ --usk-native-progress-size: .9rem;
2072
+ --usk-native-progress-track-background: var(--usk-native-track);
2073
+ --usk-native-progress-track-border: 0 solid transparent;
2074
+ --usk-native-progress-track-radius: 999px;
2075
+ --usk-native-progress-track-shadow: none;
2076
+ --usk-native-progress-value-background: var(--usk-native-track-fill);
2077
+ --usk-native-progress-value-radius: inherit;
2078
+ --usk-native-progress-value-shadow: none;
2079
+ --usk-native-meter-optimum-background: var(--usk-native-success);
2080
+ --usk-native-meter-suboptimum-background: var(--usk-native-warning);
2081
+ --usk-native-meter-critical-background: var(--usk-native-danger);
2082
+ --usk-native-file-button-background: var(--usk-native-primary);
2083
+ --usk-native-file-button-border: var(--usk-native-border-width) solid var(--usk-native-primary);
2084
+ --usk-native-file-button-radius: var(--usk-native-radius-sm);
2085
+ --usk-native-file-button-shadow: var(--usk-native-shadow);
2086
+ --usk-native-color-swatch-border: 0 solid transparent;
2087
+ --usk-native-color-swatch-radius: calc(var(--usk-native-radius-sm) / 1.5);
2088
+ --usk-native-indicator-opacity: .78;
2089
+ --usk-native-indicator-filter: none;
2090
+ --usk-native-scrollbar-size: .75rem;
2091
+ --usk-native-scrollbar-track: var(--usk-native-track);
2092
+ --usk-native-scrollbar-thumb: var(--usk-native-thumb-border);
2093
+ --usk-native-scrollbar-radius: 999px;
1637
2094
  --usk-native-shadow: none;
1638
2095
  --usk-native-shadow-md: var(--usk-native-shadow);
1639
2096
  --usk-native-focus-ring: 0 0 0 3px rgb(var(--usk-focus-rgb) / .28);
@@ -1641,7 +2098,7 @@
1641
2098
  --usk-motion-easing: cubic-bezier(0.2, 0, 0.2, 1);
1642
2099
 
1643
2100
  /* Shared semantic values are fully typed so optional companion and third-party consumers can use them directly. */
1644
- --ui-color-bg: rgb(var(--usk-bg-rgb));
2101
+ --ui-color-bg: var(--usk-native-bg);
1645
2102
  --ui-color-surface: var(--usk-native-surface-strong);
1646
2103
  --ui-color-text: var(--usk-native-text);
1647
2104
  --ui-color-muted: var(--usk-native-text-muted);
@@ -1655,7 +2112,7 @@
1655
2112
  --ui-motion-easing: var(--usk-motion-easing);
1656
2113
  }
1657
2114
 
1658
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) {
2115
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) {
1659
2116
  color: var(--usk-native-text);
1660
2117
  font-family: var(--usk-native-font-heading);
1661
2118
  line-height: 1.15;
@@ -1663,42 +2120,42 @@
1663
2120
  }
1664
2121
 
1665
2122
  @supports (text-wrap: balance) {
1666
- [data-ui][data-theme][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
2123
+ [data-ui][data-mode] :where(h1, h2, h3, h4, h5, h6) { text-wrap: balance; }
1667
2124
  }
1668
2125
 
1669
- [data-ui][data-theme][data-mode] :where(hgroup) {
2126
+ [data-ui][data-mode] :where(hgroup) {
1670
2127
  display: grid;
1671
2128
  gap: .35rem;
1672
2129
  margin-block: 0 1rem;
1673
2130
  }
1674
2131
 
1675
- [data-ui][data-theme][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
1676
- [data-ui][data-theme][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
1677
- [data-ui][data-theme][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
2132
+ [data-ui][data-mode] :where(h1) { font-size: clamp(2rem, 5vw, 3.5rem); }
2133
+ [data-ui][data-mode] :where(h2) { font-size: clamp(1.55rem, 3vw, 2.35rem); }
2134
+ [data-ui][data-mode] :where(h3) { font-size: clamp(1.25rem, 2vw, 1.65rem); }
1678
2135
 
1679
- [data-ui][data-theme][data-mode] :where(p) {
2136
+ [data-ui][data-mode] :where(p) {
1680
2137
  margin: 0 0 1rem;
1681
2138
  color: var(--usk-native-text-muted);
1682
2139
  line-height: 1.7;
1683
2140
  }
1684
2141
 
1685
- [data-ui][data-theme][data-mode] :where(a) {
2142
+ [data-ui][data-mode] :where(a) {
1686
2143
  color: var(--usk-native-link);
1687
2144
  text-decoration-thickness: .08em;
1688
2145
  text-underline-offset: .18em;
1689
2146
  }
1690
2147
 
1691
- [data-ui][data-theme][data-mode] :where(a:hover) { color: var(--usk-native-primary-hover); }
2148
+ [data-ui][data-mode] :where(a:hover) { color: var(--usk-primary-ink, var(--usk-native-primary-hover)); }
1692
2149
 
1693
- [data-ui][data-theme][data-mode] :where(ul, ol, menu) {
2150
+ [data-ui][data-mode] :where(ul, ol, menu) {
1694
2151
  margin: 0 0 1rem;
1695
2152
  padding-left: 1.35rem;
1696
2153
  color: var(--usk-native-text-muted);
1697
2154
  }
1698
2155
 
1699
- [data-ui][data-theme][data-mode] :where(li) { margin-block: .25rem; }
2156
+ [data-ui][data-mode] :where(li) { margin-block: .25rem; }
1700
2157
 
1701
- [data-ui][data-theme][data-mode] :where(blockquote) {
2158
+ [data-ui][data-mode] :where(blockquote) {
1702
2159
  margin: 1.25rem 0;
1703
2160
  padding: 1rem 1.25rem;
1704
2161
  color: var(--usk-native-text);
@@ -1707,7 +2164,7 @@
1707
2164
  border-radius: var(--usk-native-radius);
1708
2165
  }
1709
2166
 
1710
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2167
+ [data-ui][data-mode] :where(code, kbd, samp) {
1711
2168
  padding: .15em .35em;
1712
2169
  color: var(--usk-native-text);
1713
2170
  background: var(--usk-native-surface-soft);
@@ -1717,7 +2174,7 @@
1717
2174
  font-size: .92em;
1718
2175
  }
1719
2176
 
1720
- [data-ui][data-theme][data-mode] :where(pre) {
2177
+ [data-ui][data-mode] :where(pre) {
1721
2178
  overflow: auto;
1722
2179
  margin: 1rem 0;
1723
2180
  padding: 1rem;
@@ -1727,57 +2184,88 @@
1727
2184
  border-radius: var(--usk-native-radius);
1728
2185
  }
1729
2186
 
1730
- [data-ui][data-theme][data-mode] :where(pre code) {
2187
+ [data-ui][data-mode] :where(pre code) {
1731
2188
  display: block;
1732
2189
  padding: 0;
1733
2190
  background: transparent;
1734
2191
  border: 0;
1735
2192
  }
1736
2193
 
1737
- [data-ui][data-theme][data-mode] :where(hr) {
2194
+ [data-ui][data-mode] :where(hr) {
1738
2195
  height: 1px;
1739
2196
  margin: 2rem 0;
1740
2197
  background: var(--usk-native-border);
1741
2198
  border: 0;
1742
2199
  }
1743
2200
 
1744
- [data-ui][data-theme][data-mode] :where(mark) {
2201
+ [data-ui][data-mode] :where(mark) {
1745
2202
  padding-inline: .15em;
1746
2203
  color: var(--usk-native-text);
1747
2204
  background: rgb(var(--usk-warning-rgb) / .32);
1748
2205
  border-radius: .2em;
1749
2206
  }
1750
2207
 
1751
- [data-ui][data-theme][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
1752
- [data-ui][data-theme][data-mode] :where(rt, rp) { font-size: .72em; }
2208
+ [data-ui][data-mode] :where(small, sub, sup, rt, rp) { color: var(--usk-native-text-muted); }
2209
+ [data-ui][data-mode] :where(rt, rp) { font-size: .72em; }
1753
2210
 
1754
- [data-ui][data-theme][data-mode] :where(abbr[title]) {
2211
+ [data-ui][data-mode] :where(abbr[title]) {
1755
2212
  text-decoration: underline dotted var(--usk-native-primary);
1756
2213
  text-underline-offset: .18em;
1757
2214
  cursor: help;
1758
2215
  }
1759
2216
 
1760
- [data-ui][data-theme][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
2217
+ [data-ui][data-mode] :where(img, picture, video, canvas, svg, iframe, audio, object, embed, math) {
1761
2218
  max-width: 100%;
1762
2219
  }
1763
2220
 
1764
- [data-ui][data-theme][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
2221
+ [data-ui][data-mode] :where(img, video, canvas, svg, iframe) { height: auto; }
2222
+
2223
+ /** Native playback retains browser accessibility while inheriting preset material and geometry. */
2224
+ [data-ui][data-mode] audio[controls] {
2225
+ display: block;
2226
+ box-sizing: border-box;
2227
+ inline-size: 100%;
2228
+ min-inline-size: 0;
2229
+ block-size: 60px;
2230
+ padding: 3px;
2231
+ background: var(--usk-native-control-bg);
2232
+ color: var(--usk-native-text);
2233
+ border: var(--usk-native-border-width) solid var(--usk-native-border);
2234
+ border-radius: var(--usk-native-radius);
2235
+ box-shadow: var(--usk-native-shadow);
2236
+ accent-color: var(--usk-native-primary);
2237
+ color-scheme: light;
2238
+ }
2239
+ [data-ui][data-mode="dark"] audio[controls],
2240
+ [data-ui][data-mode="contrast"] audio[controls] { color-scheme: dark; }
2241
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-enclosure {
2242
+ border-radius: var(--usk-native-radius);
2243
+ background: transparent;
2244
+ }
2245
+ [data-ui][data-mode] audio[controls]::-webkit-media-controls-panel {
2246
+ background: var(--usk-native-control-bg);
2247
+ color: var(--usk-native-text);
2248
+ }
2249
+ [data-ui][data-mode] audio[controls]:focus-visible {
2250
+ outline: 2px solid var(--usk-native-focus);
2251
+ outline-offset: 2px;
2252
+ }
1765
2253
 
1766
- [data-ui][data-theme][data-mode] :where(figure) { margin: 1.25rem 0; }
2254
+ [data-ui][data-mode] :where(figure) { margin: 1.25rem 0; }
1767
2255
 
1768
- [data-ui][data-theme][data-mode] :where(figcaption) {
2256
+ [data-ui][data-mode] :where(figcaption) {
1769
2257
  margin-top: .5rem;
1770
2258
  color: var(--usk-native-text-muted);
1771
2259
  font-size: .9rem;
1772
2260
  }
1773
2261
 
1774
- [data-ui][data-theme][data-mode] :where(form) {
2262
+ [data-ui][data-mode] :where(form) {
1775
2263
  display: grid;
1776
2264
  gap: var(--usk-native-field-gap);
1777
2265
  min-inline-size: 0;
1778
2266
  }
1779
2267
 
1780
- [data-ui][data-theme][data-mode] :where(fieldset) {
2268
+ [data-ui][data-mode] :where(fieldset) {
1781
2269
  display: grid;
1782
2270
  gap: .9rem;
1783
2271
  min-inline-size: 0;
@@ -1788,30 +2276,30 @@
1788
2276
  border-radius: var(--usk-native-radius);
1789
2277
  }
1790
2278
 
1791
- [data-ui][data-theme][data-mode] :where(legend) {
2279
+ [data-ui][data-mode] :where(legend) {
1792
2280
  padding-inline: .35rem;
1793
2281
  color: var(--usk-native-text);
1794
2282
  font-weight: 900;
1795
2283
  }
1796
2284
 
1797
- [data-ui][data-theme][data-mode] :where(label) {
2285
+ [data-ui][data-mode] :where(label) {
1798
2286
  color: var(--usk-native-text);
1799
2287
  font-weight: 750;
1800
2288
  }
1801
2289
 
1802
- [data-ui][data-theme][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
2290
+ [data-ui][data-mode] :where(label:has(input), label:has(select), label:has(textarea)) {
1803
2291
  display: grid;
1804
2292
  gap: var(--usk-native-field-gap);
1805
2293
  align-content: start;
1806
2294
  }
1807
2295
 
1808
- [data-ui][data-theme][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
2296
+ [data-ui][data-mode] :where(label:has(input[type="checkbox"]), label:has(input[type="radio"])) {
1809
2297
  display: inline-flex;
1810
2298
  gap: var(--usk-native-field-gap);
1811
2299
  align-items: center;
1812
2300
  }
1813
2301
 
1814
- [data-ui][data-theme][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
2302
+ [data-ui][data-mode] :where(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea, select) {
1815
2303
  width: 100%;
1816
2304
  min-block-size: var(--usk-native-control-min-block-size);
1817
2305
  padding: var(--usk-native-control-padding-block) var(--usk-native-control-padding-inline);
@@ -1822,24 +2310,44 @@
1822
2310
  font: inherit;
1823
2311
  }
1824
2312
 
1825
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) {
2313
+ [data-ui][data-mode] :where(input, textarea, select, button) {
1826
2314
  color-scheme: inherit;
1827
2315
  accent-color: var(--usk-native-primary);
1828
2316
  }
1829
2317
 
1830
- [data-ui][data-theme][data-mode] :where(input, textarea)::placeholder {
2318
+ [data-ui][data-mode] :where(input, textarea)::placeholder {
1831
2319
  color: var(--usk-native-text-muted);
1832
2320
  opacity: .78;
1833
2321
  }
1834
2322
 
1835
- [data-ui][data-theme][data-mode] :where(textarea) {
2323
+ [data-ui][data-mode] :where(textarea) {
1836
2324
  min-height: 7rem;
1837
2325
  resize: vertical;
1838
2326
  }
1839
2327
 
1840
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button) { font: inherit; }
2328
+ [data-ui][data-mode] :where(input, textarea, select, button) { font: inherit; }
2329
+
2330
+ [data-ui][data-mode] :where(select:not([multiple])) {
2331
+ -webkit-appearance: none;
2332
+ appearance: none;
2333
+ padding-inline-end: var(--usk-native-select-padding-inline-end);
2334
+ background-image: var(--usk-native-select-indicator-image);
2335
+ background-repeat: no-repeat;
2336
+ background-position: var(--usk-native-select-indicator-position);
2337
+ background-size: var(--usk-native-select-indicator-size);
2338
+ }
2339
+
2340
+ [data-ui][data-mode] :where(select[multiple]) {
2341
+ padding-inline-end: var(--usk-native-control-padding-inline);
2342
+ background-image: none;
2343
+ }
2344
+
2345
+ [dir="rtl"] [data-ui][data-mode] :where(select:not([multiple])),
2346
+ [data-ui][data-mode][dir="rtl"] :where(select:not([multiple])) {
2347
+ --usk-native-select-indicator-position: 1.15rem 50%, .85rem 50%;
2348
+ }
1841
2349
 
1842
- [data-ui][data-theme][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
2350
+ [data-ui][data-mode] :where(button, input[type="button"], input[type="submit"], input[type="reset"]) {
1843
2351
  -webkit-appearance: none;
1844
2352
  appearance: none;
1845
2353
  box-sizing: border-box;
@@ -1848,7 +2356,7 @@
1848
2356
  font: inherit;
1849
2357
  }
1850
2358
 
1851
- [data-ui][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
2359
+ [data-ui][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
1852
2360
  color: var(--usk-native-on-primary);
1853
2361
  background: var(--usk-native-primary);
1854
2362
  border: var(--usk-native-border-width) solid var(--usk-native-primary);
@@ -1859,29 +2367,56 @@
1859
2367
  }
1860
2368
 
1861
2369
  /* Busy controls reserve a stable lane for the preset-owned spinner glyph. */
1862
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
2370
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) {
1863
2371
  display: inline-flex;
1864
2372
  align-items: center;
1865
2373
  justify-content: center;
1866
2374
  gap: .55rem;
1867
2375
  }
1868
2376
 
1869
- [data-ui][data-theme][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
2377
+ [data-ui][data-mode] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
1870
2378
  flex: 0 0 1em;
1871
2379
  }
1872
2380
 
1873
- [data-ui][data-theme][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
2381
+ [data-ui][data-mode] :where(button:not([class]):hover, input[type="button"]:not([class]):hover, input[type="submit"]:not([class]):hover, input[type="reset"]:not([class]):hover) {
1874
2382
  background: var(--usk-native-primary-hover);
1875
2383
  border-color: var(--usk-native-primary-hover);
1876
2384
  }
1877
2385
 
1878
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
1879
- inline-size: 1.5rem;
1880
- block-size: 1.5rem;
2386
+ [data-ui][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
2387
+ -webkit-appearance: none;
2388
+ appearance: none;
2389
+ inline-size: var(--usk-native-choice-size);
2390
+ block-size: var(--usk-native-choice-size);
2391
+ background: var(--usk-native-choice-background);
2392
+ border: var(--usk-native-choice-border);
2393
+ box-shadow: var(--usk-native-choice-shadow);
1881
2394
  accent-color: var(--usk-native-primary);
1882
2395
  }
1883
2396
 
1884
- [data-ui][data-theme][data-mode] :where(input[type="range"]) {
2397
+ [data-ui][data-mode] :where(input[type="checkbox"]) { border-radius: var(--usk-native-checkbox-radius); }
2398
+ [data-ui][data-mode] :where(input[type="radio"]) { border-radius: var(--usk-native-radio-radius); }
2399
+
2400
+ [data-ui][data-mode] :where(input[type="checkbox"]:checked) {
2401
+ background-color: var(--usk-native-choice-checked-background);
2402
+ background-image: linear-gradient(135deg, transparent 42%, var(--usk-native-choice-mark-color) 42% 56%, transparent 56%), linear-gradient(45deg, transparent 54%, var(--usk-native-choice-mark-color) 54% 68%, transparent 68%);
2403
+ }
2404
+
2405
+ [data-ui][data-mode] :where(input[type="checkbox"]:hover:not(:disabled), input[type="radio"]:hover:not(:disabled)) {
2406
+ border-color: var(--usk-native-primary);
2407
+ filter: brightness(1.04);
2408
+ }
2409
+
2410
+ [data-ui][data-mode] :where(input[type="checkbox"]:active:not(:disabled), input[type="radio"]:active:not(:disabled)) {
2411
+ filter: brightness(.94);
2412
+ transform: scale(.94);
2413
+ }
2414
+
2415
+ [data-ui][data-mode] :where(input[type="radio"]:checked) {
2416
+ background: radial-gradient(circle, var(--usk-native-choice-mark-color) 0 31%, transparent 34%), var(--usk-native-choice-checked-background);
2417
+ }
2418
+
2419
+ [data-ui][data-mode] :where(input[type="range"]) {
1885
2420
  -webkit-appearance: none;
1886
2421
  appearance: none;
1887
2422
  width: 100%;
@@ -1890,40 +2425,50 @@
1890
2425
  accent-color: var(--usk-native-primary);
1891
2426
  }
1892
2427
 
1893
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
1894
- block-size: .45rem;
1895
- background: var(--usk-native-track);
1896
- border-radius: 999px;
2428
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-runnable-track {
2429
+ block-size: var(--usk-native-range-track-size);
2430
+ background: var(--usk-native-range-track-background);
2431
+ border: var(--usk-native-range-track-border);
2432
+ border-radius: var(--usk-native-range-track-radius);
2433
+ box-shadow: var(--usk-native-range-track-shadow);
1897
2434
  }
1898
2435
 
1899
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-track {
1900
- block-size: .45rem;
1901
- background: var(--usk-native-track);
1902
- border-radius: 999px;
2436
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-track {
2437
+ block-size: var(--usk-native-range-track-size);
2438
+ background: var(--usk-native-range-track-background);
2439
+ border: var(--usk-native-range-track-border);
2440
+ border-radius: var(--usk-native-range-track-radius);
2441
+ box-shadow: var(--usk-native-range-track-shadow);
2442
+ }
2443
+
2444
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-progress {
2445
+ block-size: var(--usk-native-range-track-size);
2446
+ background: var(--usk-native-range-progress-background);
2447
+ border-radius: var(--usk-native-range-track-radius);
1903
2448
  }
1904
2449
 
1905
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
2450
+ [data-ui][data-mode] :where(input[type="range"])::-webkit-slider-thumb {
1906
2451
  -webkit-appearance: none;
1907
2452
  appearance: none;
1908
- inline-size: 1.2rem;
1909
- block-size: 1.2rem;
1910
- margin-block-start: -.38rem;
1911
- background: var(--usk-native-thumb);
1912
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1913
- border-radius: 999px;
1914
- box-shadow: var(--usk-native-shadow);
2453
+ inline-size: var(--usk-native-range-thumb-size);
2454
+ block-size: var(--usk-native-range-thumb-size);
2455
+ margin-block-start: calc((var(--usk-native-range-track-size) - var(--usk-native-range-thumb-size)) / 2);
2456
+ background: var(--usk-native-range-thumb-background);
2457
+ border: var(--usk-native-range-thumb-border);
2458
+ border-radius: var(--usk-native-range-thumb-radius);
2459
+ box-shadow: var(--usk-native-range-thumb-shadow);
1915
2460
  }
1916
2461
 
1917
- [data-ui][data-theme][data-mode] :where(input[type="range"])::-moz-range-thumb {
1918
- inline-size: 1.2rem;
1919
- block-size: 1.2rem;
1920
- background: var(--usk-native-thumb);
1921
- border: var(--usk-native-border-width) solid var(--usk-native-thumb-border);
1922
- border-radius: 999px;
1923
- box-shadow: var(--usk-native-shadow);
2462
+ [data-ui][data-mode] :where(input[type="range"])::-moz-range-thumb {
2463
+ inline-size: var(--usk-native-range-thumb-size);
2464
+ block-size: var(--usk-native-range-thumb-size);
2465
+ background: var(--usk-native-range-thumb-background);
2466
+ border: var(--usk-native-range-thumb-border);
2467
+ border-radius: var(--usk-native-range-thumb-radius);
2468
+ box-shadow: var(--usk-native-range-thumb-shadow);
1924
2469
  }
1925
2470
 
1926
- [data-ui][data-theme][data-mode] :where(input[type="color"]) {
2471
+ [data-ui][data-mode] :where(input[type="color"]) {
1927
2472
  inline-size: 3rem;
1928
2473
  block-size: 2.4rem;
1929
2474
  padding: .2rem;
@@ -1932,84 +2477,86 @@
1932
2477
  border-radius: var(--usk-native-radius-sm);
1933
2478
  }
1934
2479
 
1935
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
2480
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch-wrapper {
1936
2481
  padding: 0;
1937
2482
  }
1938
2483
 
1939
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-webkit-color-swatch {
1940
- border: 0;
1941
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2484
+ [data-ui][data-mode] :where(input[type="color"])::-webkit-color-swatch {
2485
+ border: var(--usk-native-color-swatch-border);
2486
+ border-radius: var(--usk-native-color-swatch-radius);
1942
2487
  }
1943
2488
 
1944
- [data-ui][data-theme][data-mode] :where(input[type="color"])::-moz-color-swatch {
1945
- border: 0;
1946
- border-radius: calc(var(--usk-native-radius-sm) / 1.5);
2489
+ [data-ui][data-mode] :where(input[type="color"])::-moz-color-swatch {
2490
+ border: var(--usk-native-color-swatch-border);
2491
+ border-radius: var(--usk-native-color-swatch-radius);
1947
2492
  }
1948
2493
 
1949
- [data-ui][data-theme][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
2494
+ [data-ui][data-mode] :where(input[type="file"]) { color: var(--usk-native-text-muted); }
1950
2495
 
1951
2496
  /* Keep pseudo-elements outside :where() because engines reject them inside selector-list arguments. */
1952
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
1953
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2497
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2498
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
1954
2499
  margin-inline-end: .75rem;
1955
2500
  padding: var(--usk-native-subcontrol-padding-block) var(--usk-native-subcontrol-padding-inline);
1956
2501
  color: var(--usk-native-on-primary);
1957
- background: var(--usk-native-primary);
1958
- border: var(--usk-native-border-width) solid var(--usk-native-primary);
1959
- border-radius: var(--usk-native-radius-sm);
2502
+ background: var(--usk-native-file-button-background);
2503
+ border: var(--usk-native-file-button-border);
2504
+ border-radius: var(--usk-native-file-button-radius);
2505
+ box-shadow: var(--usk-native-file-button-shadow);
1960
2506
  font-weight: 800;
1961
2507
  cursor: pointer;
1962
2508
  }
1963
2509
 
1964
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::file-selector-button,
1965
- [data-ui][data-theme][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
2510
+ [data-ui][data-mode] :where(input[type="file"]:hover)::file-selector-button,
2511
+ [data-ui][data-mode] :where(input[type="file"]:hover)::-webkit-file-upload-button {
1966
2512
  background: var(--usk-native-primary-hover);
1967
2513
  border-color: var(--usk-native-primary-hover);
1968
2514
  }
1969
2515
 
1970
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
1971
- [data-ui][data-theme][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
2516
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::file-selector-button,
2517
+ [data-ui][data-mode] :where(input[type="file"]:focus-visible)::-webkit-file-upload-button {
1972
2518
  box-shadow: var(--usk-native-focus-ring);
1973
2519
  }
1974
2520
 
1975
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::file-selector-button,
1976
- [data-ui][data-theme][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
2521
+ [data-ui][data-mode] :where(input[type="file"]:active)::file-selector-button,
2522
+ [data-ui][data-mode] :where(input[type="file"]:active)::-webkit-file-upload-button {
1977
2523
  filter: brightness(.96);
1978
2524
  }
1979
2525
 
1980
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
1981
- [data-ui][data-theme][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
2526
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::file-selector-button,
2527
+ [data-ui][data-mode] :where(input[type="file"]:disabled)::-webkit-file-upload-button {
1982
2528
  color: var(--usk-native-text-muted);
1983
2529
  background: var(--usk-native-surface-soft);
1984
2530
  border-color: var(--usk-native-border);
1985
2531
  cursor: not-allowed;
1986
2532
  }
1987
2533
 
1988
- [data-ui][data-theme][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
2534
+ [data-ui][data-mode] :where(input:read-only:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="button"]):not([type="submit"]):not([type="reset"]), textarea:read-only) {
1989
2535
  background: var(--usk-native-surface-soft);
1990
2536
  }
1991
2537
 
1992
- [data-ui][data-theme][data-mode] :where(input:required, textarea:required, select:required) {
2538
+ [data-ui][data-mode] :where(input:required, textarea:required, select:required) {
1993
2539
  box-shadow: inset .22rem 0 0 var(--usk-native-indicator);
1994
2540
  }
1995
2541
 
1996
- [data-ui][data-theme][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
2542
+ [data-ui][data-mode] :where(input:user-valid, textarea:user-valid, select:user-valid, .is-valid) {
1997
2543
  border-color: var(--usk-native-success);
1998
2544
  }
1999
2545
 
2000
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2546
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2001
2547
  border-color: var(--usk-native-danger);
2002
2548
  }
2003
2549
 
2004
- [data-ui][data-theme][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2550
+ [data-ui][data-mode] :where(input[type="checkbox"]:indeterminate, input[type="radio"]:indeterminate) {
2551
+ background: linear-gradient(var(--usk-native-choice-mark-color), var(--usk-native-choice-mark-color)) center / 58% .15rem no-repeat var(--usk-native-choice-checked-background);
2005
2552
  accent-color: var(--usk-native-warning);
2006
2553
  }
2007
2554
 
2008
- [data-ui][data-theme][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2555
+ [data-ui][data-mode] :where(button:active, input[type="button"]:active, input[type="submit"]:active, input[type="reset"]:active) {
2009
2556
  filter: brightness(.96);
2010
2557
  }
2011
2558
 
2012
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2559
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2013
2560
  color: var(--usk-native-text-muted);
2014
2561
  background: var(--usk-native-surface-soft);
2015
2562
  border-color: var(--usk-native-border);
@@ -2018,37 +2565,36 @@
2018
2565
  cursor: not-allowed;
2019
2566
  }
2020
2567
 
2021
- [data-ui][data-theme][data-mode] :where(table) {
2568
+ [data-ui][data-mode] :where(table) {
2022
2569
  width: 100%;
2023
2570
  margin: 1rem 0;
2024
- overflow: hidden;
2025
2571
  background: var(--usk-native-surface);
2026
2572
  border: var(--usk-native-border-width) solid var(--usk-native-border);
2027
2573
  border-radius: var(--usk-native-radius);
2028
2574
  border-collapse: collapse;
2029
2575
  }
2030
2576
 
2031
- [data-ui][data-theme][data-mode] :where(caption) {
2577
+ [data-ui][data-mode] :where(caption) {
2032
2578
  caption-side: bottom;
2033
2579
  padding: .75rem;
2034
2580
  color: var(--usk-native-text-muted);
2035
2581
  font-size: .9rem;
2036
2582
  }
2037
2583
 
2038
- [data-ui][data-theme][data-mode] :where(th, td) {
2584
+ [data-ui][data-mode] :where(th, td) {
2039
2585
  padding: .8rem .9rem;
2040
2586
  text-align: left;
2041
2587
  border-bottom: var(--usk-native-border-width) solid var(--usk-native-border);
2042
2588
  }
2043
2589
 
2044
- [data-ui][data-theme][data-mode] :where(th) {
2590
+ [data-ui][data-mode] :where(th) {
2045
2591
  color: var(--usk-native-text);
2046
2592
  background: var(--usk-native-surface-soft);
2047
2593
  }
2048
2594
 
2049
- [data-ui][data-theme][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2595
+ [data-ui][data-mode] :where(td) { color: var(--usk-native-text-muted); }
2050
2596
 
2051
- [data-ui][data-theme][data-mode] :where(details) {
2597
+ [data-ui][data-mode] :where(details) {
2052
2598
  margin: 1rem 0;
2053
2599
  padding: .9rem 1rem;
2054
2600
  color: var(--usk-native-text);
@@ -2057,13 +2603,13 @@
2057
2603
  border-radius: var(--usk-native-radius);
2058
2604
  }
2059
2605
 
2060
- [data-ui][data-theme][data-mode] :where(summary) {
2606
+ [data-ui][data-mode] :where(summary) {
2061
2607
  color: var(--usk-native-text);
2062
2608
  font-weight: 900;
2063
2609
  cursor: pointer;
2064
2610
  }
2065
2611
 
2066
- [data-ui][data-theme][data-mode] :where(dialog) {
2612
+ [data-ui][data-mode] :where(dialog) {
2067
2613
  max-width: min(92vw, 42rem);
2068
2614
  padding: 0;
2069
2615
  color: var(--usk-native-text);
@@ -2073,47 +2619,68 @@
2073
2619
  box-shadow: var(--usk-native-shadow-md), 0 30px 80px rgb(0 0 0 / .42);
2074
2620
  }
2075
2621
 
2076
- [data-ui][data-theme][data-mode] :where(dialog p) { color: inherit; }
2622
+ [data-ui][data-mode] :where(dialog p) { color: inherit; }
2077
2623
 
2078
- [data-ui][data-theme][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2624
+ [data-ui][data-mode] :where(dialog)::backdrop { background: rgb(0 0 0 / .62); }
2079
2625
 
2080
- [data-ui][data-theme][data-mode] :where(progress, meter) {
2626
+ [data-ui][data-mode] :where(progress, meter) {
2627
+ -webkit-appearance: none;
2628
+ appearance: none;
2081
2629
  width: 100%;
2082
- min-height: .9rem;
2630
+ min-height: var(--usk-native-progress-size);
2083
2631
  accent-color: var(--usk-native-primary);
2084
2632
  }
2085
2633
 
2086
- [data-ui][data-theme][data-mode] :where(progress, meter)::-webkit-progress-bar,
2087
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-bar {
2088
- background: var(--usk-native-track);
2089
- border-radius: 999px;
2634
+ [data-ui][data-mode] :where(progress:not([value])) {
2635
+ background: repeating-linear-gradient(115deg, var(--usk-native-progress-track-background) 0 .5rem, var(--usk-native-progress-value-background) .5rem 1rem);
2636
+ background-size: 200% 100%;
2637
+ border: var(--usk-native-progress-track-border);
2638
+ border-radius: var(--usk-native-progress-track-radius);
2639
+ box-shadow: var(--usk-native-progress-track-shadow);
2640
+ animation: usk-native-progress-indeterminate 1.2s linear infinite;
2090
2641
  }
2091
2642
 
2092
- [data-ui][data-theme][data-mode] :where(progress)::-webkit-progress-value,
2093
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-optimum-value {
2094
- background: var(--usk-native-track-fill);
2095
- border-radius: inherit;
2643
+ @keyframes usk-native-progress-indeterminate {
2644
+ to { background-position: -2rem 0; }
2096
2645
  }
2097
2646
 
2098
- [data-ui][data-theme][data-mode] :where(progress)::-moz-progress-bar,
2099
- [data-ui][data-theme][data-mode] :where(meter)::-moz-meter-bar {
2100
- background: var(--usk-native-track-fill);
2101
- border-radius: 999px;
2647
+ [data-ui][data-mode] :where(progress, meter)::-webkit-progress-bar,
2648
+ [data-ui][data-mode] :where(meter)::-webkit-meter-bar {
2649
+ background: var(--usk-native-progress-track-background);
2650
+ border: var(--usk-native-progress-track-border);
2651
+ border-radius: var(--usk-native-progress-track-radius);
2652
+ box-shadow: var(--usk-native-progress-track-shadow);
2653
+ }
2654
+
2655
+ [data-ui][data-mode] :where(progress)::-webkit-progress-value,
2656
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value {
2657
+ background: var(--usk-native-progress-value-background);
2658
+ border-radius: var(--usk-native-progress-value-radius);
2659
+ box-shadow: var(--usk-native-progress-value-shadow);
2660
+ }
2661
+
2662
+ [data-ui][data-mode] :where(progress)::-moz-progress-bar,
2663
+ [data-ui][data-mode] :where(meter)::-moz-meter-bar {
2664
+ background: var(--usk-native-progress-value-background);
2665
+ border-radius: var(--usk-native-progress-value-radius);
2666
+ box-shadow: var(--usk-native-progress-value-shadow);
2102
2667
  }
2103
2668
 
2104
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2105
- background: var(--usk-native-warning);
2669
+ [data-ui][data-mode] :where(meter)::-webkit-meter-optimum-value { background: var(--usk-native-meter-optimum-background); }
2670
+
2671
+ [data-ui][data-mode] :where(meter)::-webkit-meter-suboptimum-value {
2672
+ background: var(--usk-native-meter-suboptimum-background);
2106
2673
  }
2107
2674
 
2108
- [data-ui][data-theme][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2109
- background: var(--usk-native-danger);
2675
+ [data-ui][data-mode] :where(meter)::-webkit-meter-even-less-good-value {
2676
+ background: var(--usk-native-meter-critical-background);
2110
2677
  }
2111
2678
 
2112
- [data-ui][data-theme][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2679
+ [data-ui][data-mode] :where(main, section, header, footer, nav, article, aside, address) {
2113
2680
  color: var(--usk-native-text);
2114
2681
  }
2115
2682
 
2116
- [data-ui][data-theme][data-mode] :where(article, aside) {
2683
+ [data-ui][data-mode] :where(article, aside) {
2117
2684
  padding: var(--usk-native-panel-padding);
2118
2685
  color: var(--usk-native-text);
2119
2686
  background: var(--usk-native-card-bg);
@@ -2122,113 +2689,132 @@
2122
2689
  box-shadow: var(--usk-native-shadow);
2123
2690
  }
2124
2691
 
2125
- [data-ui][data-theme][data-mode] :where(dl) {
2692
+ [data-ui][data-mode] :where(dl) {
2126
2693
  margin: 0 0 1rem;
2127
2694
  color: var(--usk-native-text-muted);
2128
2695
  }
2129
2696
 
2130
- [data-ui][data-theme][data-mode] :where(dt) {
2697
+ [data-ui][data-mode] :where(dt) {
2131
2698
  color: var(--usk-native-text);
2132
2699
  font-weight: 900;
2133
2700
  }
2134
2701
 
2135
- [data-ui][data-theme][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2136
- [data-ui][data-theme][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2137
- [data-ui][data-theme][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2138
- [data-ui][data-theme][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2139
- [data-ui][data-theme][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2140
- [data-ui][data-theme][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2141
- [data-ui][data-theme][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2142
- [data-ui][data-theme][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2143
- [data-ui][data-theme][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2144
- [data-ui][data-theme][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2145
- [data-ui][data-theme][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2146
- [data-ui][data-theme][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2147
- [data-ui][data-theme][data-mode] :where(datalist) { display: none; }
2148
-
2149
- [data-ui][data-theme][data-mode] :where(summary, li)::marker {
2702
+ [data-ui][data-mode] :where(dd) { margin: .25rem 0 .75rem 1.25rem; }
2703
+ [data-ui][data-mode] :where(strong, b) { color: var(--usk-native-text); font-weight: 900; }
2704
+ [data-ui][data-mode] :where(u) { text-decoration-color: var(--usk-native-primary); text-decoration-thickness: .08em; text-underline-offset: .16em; }
2705
+ [data-ui][data-mode] :where(bdi, bdo) { color: var(--usk-native-text); unicode-bidi: isolate; }
2706
+ [data-ui][data-mode] :where(em, i, cite, var, q) { color: var(--usk-native-text); }
2707
+ [data-ui][data-mode] :where(ins) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-success); }
2708
+ [data-ui][data-mode] :where(del, s) { color: var(--usk-native-text); text-decoration-color: var(--usk-native-danger); }
2709
+ [data-ui][data-mode] :where(output) { color: var(--usk-native-text); font-weight: 800; }
2710
+ [data-ui][data-mode] :where(optgroup, option) { color: var(--usk-native-text); background: var(--usk-native-surface); }
2711
+ [data-ui][data-mode] :where(time, data, dfn, ruby) { color: var(--usk-native-text); }
2712
+ [data-ui][data-mode] :where(search) { display: block; color: var(--usk-native-text); }
2713
+ [data-ui][data-mode] :where(selectedcontent) { color: var(--usk-native-text); }
2714
+ [data-ui][data-mode] :where(datalist) { display: none; }
2715
+
2716
+ [data-ui][data-mode] :where(summary, li)::marker {
2150
2717
  color: var(--usk-native-indicator);
2151
2718
  }
2152
2719
 
2153
- [data-ui][data-theme][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2154
- opacity: .78;
2720
+ [data-ui][data-mode] :where(input[type="date"], input[type="datetime-local"], input[type="month"], input[type="time"], input[type="week"])::-webkit-calendar-picker-indicator {
2721
+ opacity: var(--usk-native-indicator-opacity);
2722
+ filter: var(--usk-native-indicator-filter);
2155
2723
  accent-color: var(--usk-native-indicator);
2156
2724
  }
2157
2725
 
2158
- [data-ui][data-theme][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2726
+ [data-ui][data-mode] :where(input[type="search"])::-webkit-search-cancel-button {
2159
2727
  accent-color: var(--usk-native-indicator);
2160
2728
  }
2161
2729
 
2162
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2163
- [data-ui][data-theme][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2730
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-inner-spin-button,
2731
+ [data-ui][data-mode] :where(input[type="number"])::-webkit-outer-spin-button {
2164
2732
  opacity: .72;
2165
2733
  }
2166
2734
 
2167
- [data-ui][data-theme][data-mode] :where(select)::picker-icon {
2735
+ [data-ui][data-mode] :where(select)::picker-icon {
2168
2736
  color: var(--usk-native-indicator);
2737
+ opacity: var(--usk-native-indicator-opacity);
2738
+ filter: var(--usk-native-indicator-filter);
2169
2739
  }
2170
2740
 
2171
- [data-ui][data-theme][data-mode] :where(:focus-visible) {
2741
+ [data-ui][data-mode] :where(:focus-visible) {
2172
2742
  outline: 3px solid var(--usk-native-focus);
2173
2743
  outline-offset: 3px;
2174
2744
  box-shadow: var(--usk-native-focus-ring);
2175
2745
  }
2176
2746
 
2177
- [data-ui][data-theme][data-mode] :where(:target) {
2747
+ [data-ui][data-mode] :where(:target) {
2178
2748
  scroll-margin-top: 6rem;
2179
2749
  outline: 3px solid var(--usk-native-focus);
2180
2750
  outline-offset: .35rem;
2181
2751
  }
2182
2752
 
2183
- [data-ui][data-theme][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2184
- [data-ui][data-theme][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2185
- [data-ui][data-theme][data-mode] :where([hidden]) { display: none !important; }
2186
- [data-ui][data-theme][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2187
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar { inline-size: .75rem; block-size: .75rem; }
2188
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-track); }
2189
- [data-ui][data-theme][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-thumb-border); border-radius: 999px; }
2753
+ [data-ui][data-mode] :where([aria-current="page"]) { font-weight: 900; }
2754
+ [data-ui][data-mode] :where([aria-busy="true"]) { cursor: progress; }
2755
+ [data-ui][data-mode] :where([hidden]) { display: none !important; }
2756
+ [data-ui][data-mode] ::selection { color: var(--usk-native-on-primary); background: var(--usk-native-primary); }
2757
+ [data-ui][data-mode] ::-webkit-scrollbar { inline-size: var(--usk-native-scrollbar-size); block-size: var(--usk-native-scrollbar-size); }
2758
+ [data-ui][data-mode] ::-webkit-scrollbar-track { background: var(--usk-native-scrollbar-track); }
2759
+ [data-ui][data-mode] ::-webkit-scrollbar-thumb { background: var(--usk-native-scrollbar-thumb); border-radius: var(--usk-native-scrollbar-radius); }
2190
2760
 
2191
2761
  @supports (color: color-mix(in srgb, black, white)) {
2192
- [data-ui][data-theme][data-mode] {
2762
+ [data-ui][data-mode] {
2193
2763
  --usk-native-track: color-mix(in srgb, var(--usk-native-border) 50%, transparent);
2194
2764
  }
2195
2765
 
2196
- [data-ui][data-theme][data-mode] :where(code, kbd, samp) {
2766
+ [data-ui][data-mode] :where(code, kbd, samp) {
2197
2767
  border-color: color-mix(in srgb, var(--usk-native-border) 62%, transparent);
2198
2768
  }
2199
2769
 
2200
- [data-ui][data-theme][data-mode] :where(mark) {
2770
+ [data-ui][data-mode] :where(mark) {
2201
2771
  background: color-mix(in srgb, var(--usk-native-warning) 32%, transparent);
2202
2772
  }
2203
2773
 
2204
- [data-ui][data-theme][data-mode] :where(fieldset) {
2774
+ [data-ui][data-mode] :where(fieldset) {
2205
2775
  background: color-mix(in srgb, var(--usk-native-card-bg) 88%, transparent);
2206
2776
  }
2207
2777
 
2208
- [data-ui][data-theme][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2778
+ [data-ui][data-mode] :where(input:disabled, textarea:disabled, select:disabled, button:disabled, [aria-disabled="true"]) {
2209
2779
  background: color-mix(in srgb, var(--usk-native-surface-soft) 72%, transparent);
2210
2780
  }
2211
2781
 
2212
- [data-ui][data-theme][data-mode] :where(th) {
2782
+ [data-ui][data-mode] :where(th) {
2213
2783
  background: color-mix(in srgb, var(--usk-native-primary) 10%, transparent);
2214
2784
  }
2215
2785
  }
2216
2786
 
2217
2787
  @media (prefers-reduced-motion: reduce) {
2218
- [data-ui][data-theme][data-mode] :where(input[type="file"])::file-selector-button,
2219
- [data-ui][data-theme][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2788
+ [data-ui][data-mode] :where(input[type="file"])::file-selector-button,
2789
+ [data-ui][data-mode] :where(input[type="file"])::-webkit-file-upload-button {
2220
2790
  transition-duration: 1ms !important;
2221
2791
  }
2792
+
2793
+ [data-ui][data-mode] :where(progress:not([value])) {
2794
+ animation: none;
2795
+ }
2796
+ }
2797
+
2798
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-runnable-track,
2799
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-webkit-slider-thumb,
2800
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-track,
2801
+ [data-ui][data-theme][data-mode="contrast"] :where(input[type="range"])::-moz-range-thumb,
2802
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter),
2803
+ [data-ui][data-theme][data-mode="contrast"] :where(progress, meter)::-webkit-progress-bar,
2804
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-webkit-progress-value,
2805
+ [data-ui][data-theme][data-mode="contrast"] :where(progress)::-moz-progress-bar {
2806
+ box-shadow: none;
2807
+ filter: none;
2222
2808
  }
2223
2809
 
2224
2810
  @media (forced-colors: active) {
2225
2811
  @supports (forced-color-adjust: auto) {
2226
- [data-ui][data-theme][data-mode] :where(input, textarea, select, button, progress, meter) {
2812
+ [data-ui][data-mode] :where(input, textarea, select, button, progress, meter) {
2227
2813
  forced-color-adjust: auto;
2228
2814
  }
2229
2815
  }
2230
2816
 
2231
- [data-ui][data-theme][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2817
+ [data-ui][data-mode] :where(input:user-invalid, textarea:user-invalid, select:user-invalid, [aria-invalid="true"], .is-invalid) {
2232
2818
  border-color: Mark;
2233
2819
  }
2234
2820
  }
@@ -2244,7 +2830,7 @@
2244
2830
  ========================================================= */
2245
2831
 
2246
2832
  @layer ui-style-kit.components {
2247
- [data-ui][data-theme][data-mode] :where(
2833
+ [data-ui][data-mode] :where(
2248
2834
  h1,
2249
2835
  h2,
2250
2836
  h3,
@@ -2261,6 +2847,9 @@
2261
2847
  label,
2262
2848
  legend,
2263
2849
  summary,
2850
+ strong,
2851
+ small,
2852
+ em,
2264
2853
  code,
2265
2854
  kbd,
2266
2855
  samp,
@@ -2270,10 +2859,11 @@
2270
2859
  ) {
2271
2860
  max-inline-size: 100%;
2272
2861
  min-inline-size: 0;
2273
- overflow-wrap: anywhere;
2862
+ overflow-wrap: break-word;
2863
+ word-break: normal;
2274
2864
  }
2275
2865
 
2276
- [data-ui][data-theme][data-mode] :where(
2866
+ [data-ui][data-mode] :where(
2277
2867
  [class~="saas-surface"],
2278
2868
  [class~="saas-surface-sm"],
2279
2869
  [class~="saas-surface-lg"],
@@ -2395,13 +2985,12 @@
2395
2985
  [class~="rg-alert"],
2396
2986
  [class~="rg-table-wrap"],
2397
2987
  [class~="rg-nav"]
2398
- ), [data-ui]:where([data-ui="industrial-utility"])[data-theme][data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2988
+ ), [data-ui]:where([data-ui="industrial-utility"])[data-mode] :where([class~="saas-surface"],[class~="saas-surface-sm"],[class~="saas-surface-lg"],.ui-card,[class~="saas-panel"],.ui-toolbar,[class~="saas-well"],[class~="saas-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bento-surface"],[class~="bento-surface-sm"],[class~="bento-surface-lg"],.ui-card,[class~="bento-panel"],.ui-toolbar,[class~="bento-well"],[class~="bento-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="max-surface"],[class~="max-surface-sm"],[class~="max-surface-lg"],.ui-card,[class~="max-panel"],.ui-toolbar,[class~="max-well"],[class~="max-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="bau-surface"],[class~="bau-surface-sm"],[class~="bau-surface-lg"],.ui-card,[class~="bau-panel"],.ui-toolbar,[class~="bau-well"],[class~="bau-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="tactile-surface"],[class~="tactile-surface-sm"],[class~="tactile-surface-lg"],.ui-card,[class~="tactile-panel"],.ui-toolbar,[class~="tactile-well"],[class~="tactile-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="neo-surface"],[class~="neo-surface-sm"],[class~="neo-surface-lg"],.ui-card,[class~="neo-panel"],.ui-toolbar,[class~="neo-well"],[class~="neo-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="retro-surface"],[class~="retro-surface-sm"],[class~="retro-surface-lg"],.ui-card,[class~="retro-panel"],.ui-toolbar,[class~="retro-well"],[class~="retro-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,[class~="brutal-surface"],.ui-card,[class~="brutal-panel"],.ui-toolbar,[class~="brutal-well"],[class~="brutal-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="cyber-panel"],.ui-toolbar,[class~="cyber-well"],[class~="cyber-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="y2k-panel"],.ui-toolbar,[class~="y2k-well"],[class~="y2k-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.ui-card,[class~="rg-panel"],.ui-toolbar,[class~="rg-well"],[class~="rg-inset"],.ui-field,.ui-alert,.ui-table-wrap,.ui-nav) {
2399
2989
  max-inline-size: 100%;
2400
2990
  min-inline-size: 0;
2401
- overflow-wrap: anywhere;
2402
2991
  }
2403
2992
 
2404
- [data-ui][data-theme][data-mode] :where(
2993
+ [data-ui][data-mode] :where(
2405
2994
  [class~="saas-button"],
2406
2995
  [class~="saas-icon-button"],
2407
2996
  [class~="saas-badge"],
@@ -2446,13 +3035,15 @@
2446
3035
  [class~="rg-icon-button"],
2447
3036
  [class~="rg-badge"],
2448
3037
  [class~="rg-nav-link"]
2449
- ), [data-ui]:where([data-ui="industrial-utility"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
3038
+ ), [data-ui]:where([data-ui="industrial-utility"])[data-mode] :where(.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link,.ui-button,.ui-icon-button,.ui-badge,.ui-nav-link) {
2450
3039
  max-inline-size: 100%;
2451
3040
  min-inline-size: 0;
3041
+ overflow-wrap: break-word;
3042
+ word-break: normal;
2452
3043
  white-space: normal;
2453
3044
  }
2454
3045
 
2455
- [data-ui][data-theme][data-mode] :where(
3046
+ [data-ui][data-mode] :where(
2456
3047
  .saas-button,
2457
3048
  .saas-icon-button,
2458
3049
  .saas-button-pill,
@@ -2486,7 +3077,7 @@
2486
3077
  .rg-button,
2487
3078
  .rg-icon-button,
2488
3079
  .rg-button-pill
2489
- ), [data-ui]:where([data-ui="industrial-utility"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
3080
+ ), [data-ui]:where([data-ui="industrial-utility"])[data-mode] :where(.ui-button,.ui-icon-button,.saas-button-pill,.ui-button,.ui-icon-button,.bento-button-pill,.ui-button,.ui-icon-button,.max-button-pill,.ui-button,.ui-icon-button,.bau-button-pill,.ui-button,.ui-icon-button,.tactile-button-pill,.ui-button,.ui-icon-button,.neo-button-pill,.ui-button,.ui-icon-button,.retro-button-pill,.ui-button,.ui-icon-button,.brutal-button-pill,.ui-button,.ui-icon-button,.cyber-button-pill,.ui-button,.ui-icon-button,.y2k-button-pill,.ui-button,.ui-icon-button,.rg-button-pill) {
2490
3081
  box-sizing: border-box;
2491
3082
  display: inline-flex;
2492
3083
  align-items: center;
@@ -2498,7 +3089,7 @@
2498
3089
  vertical-align: middle;
2499
3090
  }
2500
3091
 
2501
- [data-ui][data-theme][data-mode] :where(
3092
+ [data-ui][data-mode] :where(
2502
3093
  .saas-button-pill,
2503
3094
  .bento-button-pill,
2504
3095
  .max-button-pill,
@@ -2521,7 +3112,8 @@
2521
3112
  font-weight: 850;
2522
3113
  text-align: center;
2523
3114
  text-decoration: none;
2524
- overflow-wrap: anywhere;
3115
+ overflow-wrap: break-word;
3116
+ word-break: normal;
2525
3117
  white-space: normal;
2526
3118
  cursor: pointer;
2527
3119
  transition:
@@ -2555,7 +3147,7 @@
2555
3147
  .y2k-button-pill:hover { border-color: var(--y2k-primary-hover); filter: brightness(1.04); }
2556
3148
  .rg-button-pill:hover { border-color: var(--rg-primary-hover); filter: brightness(1.04); }
2557
3149
 
2558
- [data-ui][data-theme][data-mode] :where(
3150
+ [data-ui][data-mode] :where(
2559
3151
  .saas-button-pill:active,
2560
3152
  .saas-button-pill[aria-pressed="true"],
2561
3153
  .bento-button-pill:active,
@@ -2594,7 +3186,7 @@
2594
3186
  .y2k-button-pill:focus-visible { outline: 3px solid var(--y2k-focus); outline-offset: 3px; box-shadow: var(--y2k-focus-ring); }
2595
3187
  .rg-button-pill:focus-visible { outline: 3px solid var(--rg-focus); outline-offset: 3px; box-shadow: var(--rg-focus-ring); }
2596
3188
 
2597
- [data-ui][data-theme][data-mode] :where(
3189
+ [data-ui][data-mode] :where(
2598
3190
  .saas-button-pill:disabled,
2599
3191
  .saas-button-pill[aria-disabled="true"],
2600
3192
  .bento-button-pill:disabled,
@@ -2624,7 +3216,7 @@
2624
3216
  transform: none;
2625
3217
  }
2626
3218
 
2627
- [data-ui][data-theme][data-mode] :where(
3219
+ [data-ui][data-mode] :where(
2628
3220
  .saas-tooltip,
2629
3221
  .saas-tooltip-top,
2630
3222
  .saas-tooltip-right,
@@ -2683,16 +3275,17 @@
2683
3275
  ) {
2684
3276
  max-inline-size: min(18rem, calc(100vw - 2rem));
2685
3277
  text-align: start;
2686
- overflow-wrap: anywhere;
3278
+ overflow-wrap: break-word;
3279
+ word-break: normal;
2687
3280
  }
2688
3281
 
2689
3282
  /* Directional tooltips detach only from an explicit anchor so static tooltip chips keep normal-flow sizing. */
2690
- [data-ui][data-theme][data-mode]:where([data-ui-tooltip-anchor]),
2691
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor]) {
3283
+ [data-ui][data-mode]:where([data-ui-tooltip-anchor]),
3284
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor]) {
2692
3285
  position: relative;
2693
3286
  }
2694
3287
 
2695
- [data-ui][data-theme][data-mode] :where(
3288
+ [data-ui][data-mode] :where(
2696
3289
  [data-ui-tooltip-anchor] > .saas-tooltip-top,
2697
3290
  [data-ui-tooltip-anchor] > .saas-tooltip-right,
2698
3291
  [data-ui-tooltip-anchor] > .saas-tooltip-bottom,
@@ -2742,10 +3335,10 @@
2742
3335
  z-index: 20;
2743
3336
  }
2744
3337
 
2745
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2746
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2747
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
2748
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3338
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-top, [data-ui-tooltip-anchor] > .bento-tooltip-top, [data-ui-tooltip-anchor] > .max-tooltip-top, [data-ui-tooltip-anchor] > .bau-tooltip-top, [data-ui-tooltip-anchor] > .tactile-tooltip-top, [data-ui-tooltip-anchor] > .neo-tooltip-top, [data-ui-tooltip-anchor] > .retro-tooltip-top, [data-ui-tooltip-anchor] > .brutal-tooltip-top, [data-ui-tooltip-anchor] > .cyber-tooltip-top, [data-ui-tooltip-anchor] > .y2k-tooltip-top, [data-ui-tooltip-anchor] > .rg-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3339
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-right, [data-ui-tooltip-anchor] > .bento-tooltip-right, [data-ui-tooltip-anchor] > .max-tooltip-right, [data-ui-tooltip-anchor] > .bau-tooltip-right, [data-ui-tooltip-anchor] > .tactile-tooltip-right, [data-ui-tooltip-anchor] > .neo-tooltip-right, [data-ui-tooltip-anchor] > .retro-tooltip-right, [data-ui-tooltip-anchor] > .brutal-tooltip-right, [data-ui-tooltip-anchor] > .cyber-tooltip-right, [data-ui-tooltip-anchor] > .y2k-tooltip-right, [data-ui-tooltip-anchor] > .rg-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3340
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-bottom, [data-ui-tooltip-anchor] > .bento-tooltip-bottom, [data-ui-tooltip-anchor] > .max-tooltip-bottom, [data-ui-tooltip-anchor] > .bau-tooltip-bottom, [data-ui-tooltip-anchor] > .tactile-tooltip-bottom, [data-ui-tooltip-anchor] > .neo-tooltip-bottom, [data-ui-tooltip-anchor] > .retro-tooltip-bottom, [data-ui-tooltip-anchor] > .brutal-tooltip-bottom, [data-ui-tooltip-anchor] > .cyber-tooltip-bottom, [data-ui-tooltip-anchor] > .y2k-tooltip-bottom, [data-ui-tooltip-anchor] > .rg-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3341
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .saas-tooltip-left, [data-ui-tooltip-anchor] > .bento-tooltip-left, [data-ui-tooltip-anchor] > .max-tooltip-left, [data-ui-tooltip-anchor] > .bau-tooltip-left, [data-ui-tooltip-anchor] > .tactile-tooltip-left, [data-ui-tooltip-anchor] > .neo-tooltip-left, [data-ui-tooltip-anchor] > .retro-tooltip-left, [data-ui-tooltip-anchor] > .brutal-tooltip-left, [data-ui-tooltip-anchor] > .cyber-tooltip-left, [data-ui-tooltip-anchor] > .y2k-tooltip-left, [data-ui-tooltip-anchor] > .rg-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
2749
3342
 
2750
3343
  .saas-pill { border-radius: var(--saas-radius-pill); }
2751
3344
  .bento-pill { border-radius: var(--bento-radius-pill); }
@@ -2811,7 +3404,7 @@
2811
3404
  .saas-disabled, .bento-disabled, .max-disabled, .bau-disabled, .tactile-disabled, .neo-disabled, .retro-disabled, .brutal-disabled, .cyber-disabled, .y2k-disabled, .rg-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
2812
3405
 
2813
3406
  .saas-button-ghost, .bento-button-ghost, .max-button-ghost, .bau-button-ghost, .tactile-button-ghost, .neo-button-ghost, .retro-button-ghost, .brutal-button-ghost, .cyber-button-ghost, .y2k-button-ghost, .rg-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
2814
- color: var(--usk-native-primary);
3407
+ color: var(--usk-primary-ink, var(--usk-native-primary));
2815
3408
  background: transparent;
2816
3409
  border-color: var(--usk-native-border);
2817
3410
  }
@@ -2895,15 +3488,77 @@
2895
3488
  }
2896
3489
  }
2897
3490
 
2898
- /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
2899
- /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
2900
- @layer ui-style-kit.components {
2901
- [data-ui][data-theme][data-mode] :where(
2902
- .luxe-surface,
2903
- .luxe-surface-sm,
2904
- .luxe-surface-lg,
2905
- .luxe-card,
2906
- .luxe-card-service,
3491
+ /**
3492
+ * Normalizes the split-line trust seal hierarchy across every visual preset.
3493
+ * Both lines inherit their seal's paired foreground instead of native page-text paint.
3494
+ * The root attributes intentionally raise specificity within the preset layer
3495
+ * so later style-specific defaults cannot collapse the number and caption.
3496
+ */
3497
+ @layer ui-style-kit.presets {
3498
+ [data-ui][data-mode] :where(
3499
+ .saas-badge-seal,
3500
+ .bento-badge-seal,
3501
+ .max-badge-seal,
3502
+ .bau-badge-seal,
3503
+ .tactile-badge-seal,
3504
+ .neo-badge-seal,
3505
+ .retro-badge-seal,
3506
+ .brutal-badge-seal,
3507
+ .cyber-badge-seal,
3508
+ .y2k-badge-seal,
3509
+ .rg-badge-seal,
3510
+ .luxe-badge-seal,
3511
+ .organic-badge-seal,
3512
+ .utility-badge-seal,
3513
+ .blueprint-badge-seal,
3514
+ .deco-badge-seal,
3515
+ .clay-badge-seal,
3516
+ .terminal-badge-seal,
3517
+ .paper-badge-seal,
3518
+ .noir-badge-seal
3519
+ ) > strong {
3520
+ color: inherit;
3521
+ font-size: 1.5rem;
3522
+ line-height: .9;
3523
+ }
3524
+
3525
+ [data-ui][data-mode] :where(
3526
+ .saas-badge-seal,
3527
+ .bento-badge-seal,
3528
+ .max-badge-seal,
3529
+ .bau-badge-seal,
3530
+ .tactile-badge-seal,
3531
+ .neo-badge-seal,
3532
+ .retro-badge-seal,
3533
+ .brutal-badge-seal,
3534
+ .cyber-badge-seal,
3535
+ .y2k-badge-seal,
3536
+ .rg-badge-seal,
3537
+ .luxe-badge-seal,
3538
+ .organic-badge-seal,
3539
+ .utility-badge-seal,
3540
+ .blueprint-badge-seal,
3541
+ .deco-badge-seal,
3542
+ .clay-badge-seal,
3543
+ .terminal-badge-seal,
3544
+ .paper-badge-seal,
3545
+ .noir-badge-seal
3546
+ ) > small {
3547
+ color: inherit;
3548
+ font-size: .8125rem;
3549
+ line-height: 1;
3550
+ }
3551
+ }
3552
+
3553
+ /* BEGIN GENERATED 2.2 PRESET COMPONENT FOUNDATIONS */
3554
+ /* Generated by scripts/generate-expanded-components.mjs from manifest.json. */
3555
+ @layer ui-style-kit.components {
3556
+ [data-ui][data-mode] :where(
3557
+ .luxe-surface,
3558
+ .luxe-surface-sm,
3559
+ .luxe-surface-lg,
3560
+ .luxe-card,
3561
+ .luxe-card-service,
2907
3562
  .luxe-card-feature,
2908
3563
  .luxe-panel,
2909
3564
  .luxe-toolbar,
@@ -3061,13 +3716,12 @@
3061
3716
  .noir-feature-item,
3062
3717
  .noir-callout-bar,
3063
3718
  .noir-media-scrim
3064
- ), [data-ui]:where([data-ui="industrial-utility"])[data-theme][data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3719
+ ), [data-ui]:where([data-ui="industrial-utility"])[data-mode] :where(.luxe-surface,.luxe-surface-sm,.luxe-surface-lg,.ui-card,.luxe-card-service,.luxe-card-feature,.luxe-panel,.ui-toolbar,.luxe-well,.luxe-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.luxe-feature-strip,.luxe-feature-item,.luxe-callout-bar,.luxe-media-scrim,.organic-surface,.organic-surface-sm,.organic-surface-lg,.ui-card,.organic-card-service,.organic-card-feature,.organic-panel,.ui-toolbar,.organic-well,.organic-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.organic-feature-strip,.organic-feature-item,.organic-callout-bar,.organic-media-scrim,.utility-surface,.utility-surface-sm,.utility-surface-lg,.ui-card,.utility-card-service,.utility-card-feature,.utility-panel,.ui-toolbar,.utility-well,.utility-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.utility-feature-strip,.utility-feature-item,.utility-callout-bar,.utility-media-scrim,.blueprint-surface,.blueprint-surface-sm,.blueprint-surface-lg,.ui-card,.blueprint-card-service,.blueprint-card-feature,.blueprint-panel,.ui-toolbar,.blueprint-well,.blueprint-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.blueprint-feature-strip,.blueprint-feature-item,.blueprint-callout-bar,.blueprint-media-scrim,.deco-surface,.deco-surface-sm,.deco-surface-lg,.ui-card,.deco-card-service,.deco-card-feature,.deco-panel,.ui-toolbar,.deco-well,.deco-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.deco-feature-strip,.deco-feature-item,.deco-callout-bar,.deco-media-scrim,.clay-surface,.clay-surface-sm,.clay-surface-lg,.ui-card,.clay-card-service,.clay-card-feature,.clay-panel,.ui-toolbar,.clay-well,.clay-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.clay-feature-strip,.clay-feature-item,.clay-callout-bar,.clay-media-scrim,.terminal-surface,.terminal-surface-sm,.terminal-surface-lg,.ui-card,.terminal-card-service,.terminal-card-feature,.terminal-panel,.ui-toolbar,.terminal-well,.terminal-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.terminal-feature-strip,.terminal-feature-item,.terminal-callout-bar,.terminal-media-scrim,.paper-surface,.paper-surface-sm,.paper-surface-lg,.ui-card,.paper-card-service,.paper-card-feature,.paper-panel,.ui-toolbar,.paper-well,.paper-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.paper-feature-strip,.paper-feature-item,.paper-callout-bar,.paper-media-scrim,.noir-surface,.noir-surface-sm,.noir-surface-lg,.ui-card,.noir-card-service,.noir-card-feature,.noir-panel,.ui-toolbar,.noir-well,.noir-inset,.ui-field,.ui-alert,.ui-table-wrap,.ui-nav,.noir-feature-strip,.noir-feature-item,.noir-callout-bar,.noir-media-scrim) {
3065
3720
  max-inline-size: 100%;
3066
3721
  min-inline-size: 0;
3067
- overflow-wrap: anywhere;
3068
3722
  }
3069
3723
 
3070
- [data-ui][data-theme][data-mode] :where(
3724
+ [data-ui][data-mode] :where(
3071
3725
  .luxe-button,
3072
3726
  .luxe-icon-button,
3073
3727
  .luxe-button-cut,
@@ -3140,13 +3794,15 @@
3140
3794
  .noir-badge-seal,
3141
3795
  .noir-nav-link,
3142
3796
  .noir-icon-medallion
3143
- ), [data-ui]:where([data-ui="industrial-utility"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3797
+ ), [data-ui]:where([data-ui="industrial-utility"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-cut,.luxe-button-outline-heavy,.ui-badge,.luxe-badge-seal,.ui-nav-link,.luxe-icon-medallion,.ui-button,.ui-icon-button,.organic-button-cut,.organic-button-outline-heavy,.ui-badge,.organic-badge-seal,.ui-nav-link,.organic-icon-medallion,.ui-button,.ui-icon-button,.utility-button-cut,.utility-button-outline-heavy,.ui-badge,.utility-badge-seal,.ui-nav-link,.utility-icon-medallion,.ui-button,.ui-icon-button,.blueprint-button-cut,.blueprint-button-outline-heavy,.ui-badge,.blueprint-badge-seal,.ui-nav-link,.blueprint-icon-medallion,.ui-button,.ui-icon-button,.deco-button-cut,.deco-button-outline-heavy,.ui-badge,.deco-badge-seal,.ui-nav-link,.deco-icon-medallion,.ui-button,.ui-icon-button,.clay-button-cut,.clay-button-outline-heavy,.ui-badge,.clay-badge-seal,.ui-nav-link,.clay-icon-medallion,.ui-button,.ui-icon-button,.terminal-button-cut,.terminal-button-outline-heavy,.ui-badge,.terminal-badge-seal,.ui-nav-link,.terminal-icon-medallion,.ui-button,.ui-icon-button,.paper-button-cut,.paper-button-outline-heavy,.ui-badge,.paper-badge-seal,.ui-nav-link,.paper-icon-medallion,.ui-button,.ui-icon-button,.noir-button-cut,.noir-button-outline-heavy,.ui-badge,.noir-badge-seal,.ui-nav-link,.noir-icon-medallion) {
3144
3798
  max-inline-size: 100%;
3145
3799
  min-inline-size: 0;
3800
+ overflow-wrap: break-word;
3801
+ word-break: normal;
3146
3802
  white-space: normal;
3147
3803
  }
3148
3804
 
3149
- [data-ui][data-theme][data-mode] :where(
3805
+ [data-ui][data-mode] :where(
3150
3806
  .luxe-button,
3151
3807
  .luxe-icon-button,
3152
3808
  .luxe-button-pill,
@@ -3174,7 +3830,7 @@
3174
3830
  .noir-button,
3175
3831
  .noir-icon-button,
3176
3832
  .noir-button-pill
3177
- ), [data-ui]:where([data-ui="industrial-utility"])[data-theme][data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3833
+ ), [data-ui]:where([data-ui="industrial-utility"])[data-mode] :where(.ui-button,.ui-icon-button,.luxe-button-pill,.ui-button,.ui-icon-button,.organic-button-pill,.ui-button,.ui-icon-button,.utility-button-pill,.ui-button,.ui-icon-button,.blueprint-button-pill,.ui-button,.ui-icon-button,.deco-button-pill,.ui-button,.ui-icon-button,.clay-button-pill,.ui-button,.ui-icon-button,.terminal-button-pill,.ui-button,.ui-icon-button,.paper-button-pill,.ui-button,.ui-icon-button,.noir-button-pill) {
3178
3834
  box-sizing: border-box;
3179
3835
  display: inline-flex;
3180
3836
  align-items: center;
@@ -3186,7 +3842,7 @@
3186
3842
  vertical-align: middle;
3187
3843
  }
3188
3844
 
3189
- [data-ui][data-theme][data-mode] :where(
3845
+ [data-ui][data-mode] :where(
3190
3846
  .luxe-button-pill,
3191
3847
  .organic-button-pill,
3192
3848
  .utility-button-pill,
@@ -3207,7 +3863,8 @@
3207
3863
  font-weight: 850;
3208
3864
  text-align: center;
3209
3865
  text-decoration: none;
3210
- overflow-wrap: anywhere;
3866
+ overflow-wrap: break-word;
3867
+ word-break: normal;
3211
3868
  white-space: normal;
3212
3869
  cursor: pointer;
3213
3870
  transition: transform 160ms ease, border-color 160ms ease, box-shadow 160ms ease, filter 160ms ease;
@@ -3294,7 +3951,7 @@
3294
3951
  .noir-rounded-xl { border-radius: var(--noir-radius-xl); }
3295
3952
  .noir-surface, .noir-surface-sm, .noir-surface-lg { color: var(--noir-text); background: var(--noir-card-bg); border: 1px solid var(--noir-border); }
3296
3953
 
3297
- [data-ui][data-theme][data-mode] :where(
3954
+ [data-ui][data-mode] :where(
3298
3955
  .luxe-button-pill:active,
3299
3956
  .luxe-button-pill[aria-pressed="true"],
3300
3957
  .organic-button-pill:active,
@@ -3315,7 +3972,7 @@
3315
3972
  .noir-button-pill[aria-pressed="true"]
3316
3973
  ) { transform: translateY(1px); }
3317
3974
 
3318
- [data-ui][data-theme][data-mode] :where(
3975
+ [data-ui][data-mode] :where(
3319
3976
  .luxe-button-pill:disabled,
3320
3977
  .luxe-button-pill[aria-disabled="true"],
3321
3978
  .organic-button-pill:disabled,
@@ -3336,7 +3993,7 @@
3336
3993
  .noir-button-pill[aria-disabled="true"]
3337
3994
  ) { opacity: .55; cursor: not-allowed; filter: none; transform: none; }
3338
3995
 
3339
- [data-ui][data-theme][data-mode] :where(
3996
+ [data-ui][data-mode] :where(
3340
3997
  .luxe-tooltip,
3341
3998
  .luxe-tooltip-top,
3342
3999
  .luxe-tooltip-right,
@@ -3382,9 +4039,9 @@
3382
4039
  .noir-tooltip-right,
3383
4040
  .noir-tooltip-bottom,
3384
4041
  .noir-tooltip-left
3385
- ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: anywhere; }
4042
+ ) { max-inline-size: min(18rem, calc(100vw - 2rem)); text-align: start; overflow-wrap: break-word; word-break: normal; }
3386
4043
 
3387
- [data-ui][data-theme][data-mode] :where(
4044
+ [data-ui][data-mode] :where(
3388
4045
  [data-ui-tooltip-anchor] > .luxe-tooltip-top,
3389
4046
  [data-ui-tooltip-anchor] > .luxe-tooltip-right,
3390
4047
  [data-ui-tooltip-anchor] > .luxe-tooltip-bottom,
@@ -3423,10 +4080,10 @@
3423
4080
  [data-ui-tooltip-anchor] > .noir-tooltip-left
3424
4081
  ) { position: absolute; z-index: 20; }
3425
4082
 
3426
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3427
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3428
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
3429
- [data-ui][data-theme][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
4083
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-top, [data-ui-tooltip-anchor] > .organic-tooltip-top, [data-ui-tooltip-anchor] > .utility-tooltip-top, [data-ui-tooltip-anchor] > .blueprint-tooltip-top, [data-ui-tooltip-anchor] > .deco-tooltip-top, [data-ui-tooltip-anchor] > .clay-tooltip-top, [data-ui-tooltip-anchor] > .terminal-tooltip-top, [data-ui-tooltip-anchor] > .paper-tooltip-top, [data-ui-tooltip-anchor] > .noir-tooltip-top) { inset-block-end: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
4084
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-right, [data-ui-tooltip-anchor] > .organic-tooltip-right, [data-ui-tooltip-anchor] > .utility-tooltip-right, [data-ui-tooltip-anchor] > .blueprint-tooltip-right, [data-ui-tooltip-anchor] > .deco-tooltip-right, [data-ui-tooltip-anchor] > .clay-tooltip-right, [data-ui-tooltip-anchor] > .terminal-tooltip-right, [data-ui-tooltip-anchor] > .paper-tooltip-right, [data-ui-tooltip-anchor] > .noir-tooltip-right) { inset-inline-start: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
4085
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-bottom, [data-ui-tooltip-anchor] > .organic-tooltip-bottom, [data-ui-tooltip-anchor] > .utility-tooltip-bottom, [data-ui-tooltip-anchor] > .blueprint-tooltip-bottom, [data-ui-tooltip-anchor] > .deco-tooltip-bottom, [data-ui-tooltip-anchor] > .clay-tooltip-bottom, [data-ui-tooltip-anchor] > .terminal-tooltip-bottom, [data-ui-tooltip-anchor] > .paper-tooltip-bottom, [data-ui-tooltip-anchor] > .noir-tooltip-bottom) { inset-block-start: calc(100% + .5rem); inset-inline-start: 50%; transform: translateX(-50%); }
4086
+ [data-ui][data-mode] :where([data-ui-tooltip-anchor] > .luxe-tooltip-left, [data-ui-tooltip-anchor] > .organic-tooltip-left, [data-ui-tooltip-anchor] > .utility-tooltip-left, [data-ui-tooltip-anchor] > .blueprint-tooltip-left, [data-ui-tooltip-anchor] > .deco-tooltip-left, [data-ui-tooltip-anchor] > .clay-tooltip-left, [data-ui-tooltip-anchor] > .terminal-tooltip-left, [data-ui-tooltip-anchor] > .paper-tooltip-left, [data-ui-tooltip-anchor] > .noir-tooltip-left) { inset-inline-end: calc(100% + .5rem); inset-block-start: 50%; transform: translateY(-50%); }
3430
4087
 
3431
4088
  :where(.luxe-bg-primary, .organic-bg-primary, .utility-bg-primary, .blueprint-bg-primary, .deco-bg-primary, .clay-bg-primary, .terminal-bg-primary, .paper-bg-primary, .noir-bg-primary) { background: var(--usk-native-primary); color: var(--usk-native-on-primary); }
3432
4089
  :where(.luxe-bg-secondary, .organic-bg-secondary, .utility-bg-secondary, .blueprint-bg-secondary, .deco-bg-secondary, .clay-bg-secondary, .terminal-bg-secondary, .paper-bg-secondary, .noir-bg-secondary) { background: var(--usk-native-surface-soft); color: var(--usk-native-text); }
@@ -3434,7 +4091,7 @@
3434
4091
  :where(.luxe-divider, .organic-divider, .utility-divider, .blueprint-divider, .deco-divider, .clay-divider, .terminal-divider, .paper-divider, .noir-divider) { inline-size: 100%; block-size: 1px; border: 0; background: var(--usk-native-border); }
3435
4092
  :where(.luxe-disabled, .organic-disabled, .utility-disabled, .blueprint-disabled, .deco-disabled, .clay-disabled, .terminal-disabled, .paper-disabled, .noir-disabled) { opacity: .55; cursor: not-allowed; pointer-events: none; }
3436
4093
 
3437
- :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="industrial-utility"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-native-primary); background: transparent; border-color: var(--usk-native-border); }
4094
+ :where(.luxe-button-ghost, .organic-button-ghost, .utility-button-ghost, .blueprint-button-ghost, .deco-button-ghost, .clay-button-ghost, .terminal-button-ghost, .paper-button-ghost, .noir-button-ghost), :where([data-ui="industrial-utility"]) :where(.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"]),.ui-button:where([data-ui-variant="ghost"])) { color: var(--usk-primary-ink, var(--usk-native-primary)); background: transparent; border-color: var(--usk-native-border); }
3438
4095
 
3439
4096
  :where(.luxe-check, .luxe-radio, .luxe-switch, .organic-check, .organic-radio, .organic-switch, .utility-check, .utility-radio, .utility-switch, .blueprint-check, .blueprint-radio, .blueprint-switch, .deco-check, .deco-radio, .deco-switch, .clay-check, .clay-radio, .clay-switch, .terminal-check, .terminal-radio, .terminal-switch, .paper-check, .paper-radio, .paper-switch, .noir-check, .noir-radio, .noir-switch), :where([data-ui="industrial-utility"]) :where(.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch,.ui-check,.ui-radio,.ui-switch) {
3440
4097
  display: inline-flex;
@@ -3533,6 +4190,29 @@
3533
4190
  --lightningcss-light: initial;
3534
4191
  --lightningcss-dark: ;
3535
4192
  color-scheme: light;
4193
+ --utility-fallback-bg-rgb: 245 243 239;
4194
+ --utility-fallback-surface-rgb: 255 255 255;
4195
+ --utility-fallback-surface-strong-rgb: 251 250 248;
4196
+ --utility-fallback-surface-soft-rgb: 228 224 218;
4197
+ --utility-fallback-text-rgb: 24 21 18;
4198
+ --utility-fallback-text-muted-rgb: 98 91 84;
4199
+ --utility-fallback-border-rgb: 184 178 169;
4200
+ --utility-fallback-primary-rgb: 183 78 22;
4201
+ --utility-fallback-primary-hover-rgb: 142 63 18;
4202
+ --utility-fallback-primary-text-rgb: 255 255 255;
4203
+ --utility-fallback-secondary-rgb: 43 43 43;
4204
+ --utility-fallback-secondary-hover-rgb: 27 27 27;
4205
+ --utility-fallback-secondary-text-rgb: 255 255 255;
4206
+ --utility-fallback-accent-rgb: 225 139 61;
4207
+ --utility-fallback-accent-text-rgb: 0 0 0;
4208
+ --utility-fallback-success-rgb: 47 125 84;
4209
+ --utility-fallback-success-text-rgb: 255 255 255;
4210
+ --utility-fallback-warning-rgb: 164 106 0;
4211
+ --utility-fallback-warning-text-rgb: 0 0 0;
4212
+ --utility-fallback-danger-rgb: 178 60 60;
4213
+ --utility-fallback-danger-text-rgb: 255 255 255;
4214
+ --utility-fallback-link-rgb: 142 63 18;
4215
+ --utility-fallback-focus-rgb: 225 139 61;
3536
4216
  --utility-panel-alpha: .98;
3537
4217
  --utility-panel-soft-alpha: .78;
3538
4218
  --utility-border-alpha: .58;
@@ -3544,6 +4224,29 @@
3544
4224
  --lightningcss-light: ;
3545
4225
  --lightningcss-dark: initial;
3546
4226
  color-scheme: dark;
4227
+ --utility-fallback-bg-rgb: 13 12 11;
4228
+ --utility-fallback-surface-rgb: 26 26 26;
4229
+ --utility-fallback-surface-strong-rgb: 43 43 43;
4230
+ --utility-fallback-surface-soft-rgb: 18 17 16;
4231
+ --utility-fallback-text-rgb: 247 242 235;
4232
+ --utility-fallback-text-muted-rgb: 197 188 177;
4233
+ --utility-fallback-border-rgb: 89 81 73;
4234
+ --utility-fallback-primary-rgb: 255 138 61;
4235
+ --utility-fallback-primary-hover-rgb: 255 174 113;
4236
+ --utility-fallback-primary-text-rgb: 0 0 0;
4237
+ --utility-fallback-secondary-rgb: 198 191 182;
4238
+ --utility-fallback-secondary-hover-rgb: 227 222 215;
4239
+ --utility-fallback-secondary-text-rgb: 0 0 0;
4240
+ --utility-fallback-accent-rgb: 255 179 107;
4241
+ --utility-fallback-accent-text-rgb: 0 0 0;
4242
+ --utility-fallback-success-rgb: 139 223 178;
4243
+ --utility-fallback-success-text-rgb: 0 0 0;
4244
+ --utility-fallback-warning-rgb: 255 210 122;
4245
+ --utility-fallback-warning-text-rgb: 0 0 0;
4246
+ --utility-fallback-danger-rgb: 255 152 152;
4247
+ --utility-fallback-danger-text-rgb: 0 0 0;
4248
+ --utility-fallback-link-rgb: 255 179 107;
4249
+ --utility-fallback-focus-rgb: 255 154 66;
3547
4250
  --utility-panel-alpha: .92;
3548
4251
  --utility-panel-soft-alpha: .64;
3549
4252
  --utility-border-alpha: .52;
@@ -3555,6 +4258,29 @@
3555
4258
  --lightningcss-light: ;
3556
4259
  --lightningcss-dark: initial;
3557
4260
  color-scheme: dark;
4261
+ --utility-fallback-bg-rgb: 0 0 0;
4262
+ --utility-fallback-surface-rgb: 10 9 8;
4263
+ --utility-fallback-surface-strong-rgb: 23 19 17;
4264
+ --utility-fallback-surface-soft-rgb: 0 0 0;
4265
+ --utility-fallback-text-rgb: 255 255 255;
4266
+ --utility-fallback-text-muted-rgb: 247 241 234;
4267
+ --utility-fallback-border-rgb: 255 255 255;
4268
+ --utility-fallback-primary-rgb: 255 154 66;
4269
+ --utility-fallback-primary-hover-rgb: 255 255 255;
4270
+ --utility-fallback-primary-text-rgb: 0 0 0;
4271
+ --utility-fallback-secondary-rgb: 244 241 236;
4272
+ --utility-fallback-secondary-hover-rgb: 255 255 255;
4273
+ --utility-fallback-secondary-text-rgb: 0 0 0;
4274
+ --utility-fallback-accent-rgb: 255 195 111;
4275
+ --utility-fallback-accent-text-rgb: 0 0 0;
4276
+ --utility-fallback-success-rgb: 0 255 144;
4277
+ --utility-fallback-success-text-rgb: 0 0 0;
4278
+ --utility-fallback-warning-rgb: 255 212 0;
4279
+ --utility-fallback-warning-text-rgb: 0 0 0;
4280
+ --utility-fallback-danger-rgb: 255 92 92;
4281
+ --utility-fallback-danger-text-rgb: 0 0 0;
4282
+ --utility-fallback-link-rgb: 255 179 107;
4283
+ --utility-fallback-focus-rgb: 255 255 255;
3558
4284
  --utility-panel-alpha: 1;
3559
4285
  --utility-panel-soft-alpha: .92;
3560
4286
  --utility-border-alpha: 1;
@@ -3577,15 +4303,42 @@
3577
4303
  --utility-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
4304
  --utility-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
4305
  --utility-accent-rgb: var(--usk-accent-rgb);
3580
- --utility-success-rgb: var(--usk-success-rgb);
3581
- --utility-warning-rgb: var(--usk-warning-rgb);
3582
- --utility-danger-rgb: var(--usk-danger-rgb);
3583
- --utility-link-rgb: var(--usk-link-rgb);
3584
4306
  --utility-accent-text-rgb: var(--usk-accent-text-rgb);
4307
+ --utility-success-rgb: var(--usk-success-rgb);
3585
4308
  --utility-success-text-rgb: var(--usk-success-text-rgb);
4309
+ --utility-warning-rgb: var(--usk-warning-rgb);
3586
4310
  --utility-warning-text-rgb: var(--usk-warning-text-rgb);
4311
+ --utility-danger-rgb: var(--usk-danger-rgb);
3587
4312
  --utility-danger-text-rgb: var(--usk-danger-text-rgb);
4313
+ --utility-link-rgb: var(--usk-link-rgb);
3588
4314
  --utility-focus-rgb: var(--usk-focus-rgb);
4315
+ }
4316
+
4317
+ [data-ui="industrial-utility"][data-mode] {
4318
+ --usk-native-bg: var(--utility-bg);
4319
+ --utility-bg-rgb: var(--usk-bg-rgb, var(--utility-fallback-bg-rgb));
4320
+ --utility-surface-rgb: var(--usk-surface-rgb, var(--utility-fallback-surface-rgb));
4321
+ --utility-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--utility-fallback-surface-strong-rgb));
4322
+ --utility-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--utility-fallback-surface-soft-rgb));
4323
+ --utility-text-rgb: var(--usk-text-rgb, var(--utility-fallback-text-rgb));
4324
+ --utility-text-muted-rgb: var(--usk-text-muted-rgb, var(--utility-fallback-text-muted-rgb));
4325
+ --utility-border-rgb: var(--usk-border-rgb, var(--utility-fallback-border-rgb));
4326
+ --utility-primary-rgb: var(--usk-primary-rgb, var(--utility-fallback-primary-rgb));
4327
+ --utility-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--utility-fallback-primary-hover-rgb));
4328
+ --utility-primary-text-rgb: var(--usk-primary-text-rgb, var(--utility-fallback-primary-text-rgb));
4329
+ --utility-secondary-rgb: var(--usk-secondary-rgb, var(--utility-fallback-secondary-rgb));
4330
+ --utility-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--utility-fallback-secondary-hover-rgb));
4331
+ --utility-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--utility-fallback-secondary-text-rgb));
4332
+ --utility-accent-rgb: var(--usk-accent-rgb, var(--utility-fallback-accent-rgb));
4333
+ --utility-accent-text-rgb: var(--usk-accent-text-rgb, var(--utility-fallback-accent-text-rgb));
4334
+ --utility-success-rgb: var(--usk-success-rgb, var(--utility-fallback-success-rgb));
4335
+ --utility-success-text-rgb: var(--usk-success-text-rgb, var(--utility-fallback-success-text-rgb));
4336
+ --utility-warning-rgb: var(--usk-warning-rgb, var(--utility-fallback-warning-rgb));
4337
+ --utility-warning-text-rgb: var(--usk-warning-text-rgb, var(--utility-fallback-warning-text-rgb));
4338
+ --utility-danger-rgb: var(--usk-danger-rgb, var(--utility-fallback-danger-rgb));
4339
+ --utility-danger-text-rgb: var(--usk-danger-text-rgb, var(--utility-fallback-danger-text-rgb));
4340
+ --utility-link-rgb: var(--usk-link-rgb, var(--utility-fallback-link-rgb));
4341
+ --utility-focus-rgb: var(--usk-focus-rgb, var(--utility-fallback-focus-rgb));
3589
4342
  --usk-native-surface: var(--utility-surface);
3590
4343
  --usk-native-surface-strong: var(--utility-surface-strong);
3591
4344
  --usk-native-surface-soft: var(--utility-surface-soft);
@@ -3615,6 +4368,57 @@
3615
4368
  --usk-native-border-width: 1px;
3616
4369
  --usk-native-field-gap: .5rem;
3617
4370
  --usk-native-panel-padding: var(--utility-space-5);
4371
+ --usk-native-control-min-block-size: 2.75rem;
4372
+ --usk-native-control-padding-block: .74rem;
4373
+ --usk-native-control-padding-inline: 1rem;
4374
+ --usk-native-subcontrol-padding-block: .58rem;
4375
+ --usk-native-subcontrol-padding-inline: .8rem;
4376
+ --usk-native-choice-size: 1.35rem;
4377
+ --usk-native-choice-background: var(--utility-control-bg);
4378
+ --usk-native-choice-border: 2px solid var(--utility-border);
4379
+ --usk-native-checkbox-radius: .08rem;
4380
+ --usk-native-radio-radius: .08rem;
4381
+ --usk-native-choice-shadow: 2px 2px 0 #0000004d;
4382
+ --usk-native-choice-checked-background: var(--utility-primary);
4383
+ --usk-native-choice-mark-color: var(--utility-on-primary);
4384
+ --usk-native-select-indicator-image: linear-gradient(66deg, transparent 50%, var(--utility-primary) 50%), linear-gradient(114deg, var(--utility-primary) 50%, transparent 50%);
4385
+ --usk-native-select-indicator-size: .46rem .46rem, .46rem .46rem;
4386
+ --usk-native-select-indicator-position: calc(100% - 1.08rem) 50%, calc(100% - .78rem) 50%;
4387
+ --usk-native-select-padding-inline-end: 2.4rem;
4388
+ --usk-native-range-track-size: .7rem;
4389
+ --usk-native-range-track-background: var(--utility-surface-soft);
4390
+ --usk-native-range-track-border: 2px solid var(--utility-border);
4391
+ --usk-native-range-track-radius: .06rem;
4392
+ --usk-native-range-track-shadow: 2px 2px 0 #0000004d;
4393
+ --usk-native-range-progress-background: var(--utility-primary);
4394
+ --usk-native-range-thumb-size: 1.25rem;
4395
+ --usk-native-range-thumb-background: var(--utility-surface-strong);
4396
+ --usk-native-range-thumb-border: 2px solid var(--utility-border);
4397
+ --usk-native-range-thumb-radius: .08rem;
4398
+ --usk-native-range-thumb-shadow: 2px 2px 0 #0000004d;
4399
+ --usk-native-progress-size: .76rem;
4400
+ --usk-native-progress-track-background: var(--utility-surface-soft);
4401
+ --usk-native-progress-track-border: 2px solid var(--utility-border);
4402
+ --usk-native-progress-track-radius: .06rem;
4403
+ --usk-native-progress-track-shadow: 2px 2px 0 #0000004d;
4404
+ --usk-native-progress-value-background: var(--utility-primary);
4405
+ --usk-native-progress-value-radius: .06rem;
4406
+ --usk-native-progress-value-shadow: 2px 2px 0 #0000004d;
4407
+ --usk-native-meter-optimum-background: var(--utility-success);
4408
+ --usk-native-meter-suboptimum-background: var(--utility-warning);
4409
+ --usk-native-meter-critical-background: var(--utility-danger);
4410
+ --usk-native-file-button-background: var(--utility-primary);
4411
+ --usk-native-file-button-border: 2px solid var(--utility-border);
4412
+ --usk-native-file-button-radius: .08rem;
4413
+ --usk-native-file-button-shadow: 2px 2px 0 #0000004d;
4414
+ --usk-native-color-swatch-border: 2px solid var(--utility-border);
4415
+ --usk-native-color-swatch-radius: .08rem;
4416
+ --usk-native-indicator-opacity: .87;
4417
+ --usk-native-indicator-filter: none;
4418
+ --usk-native-scrollbar-size: .85rem;
4419
+ --usk-native-scrollbar-track: var(--utility-surface-soft);
4420
+ --usk-native-scrollbar-thumb: var(--utility-primary);
4421
+ --usk-native-scrollbar-radius: .06rem;
3618
4422
  --utility-bg: rgb(var(--utility-bg-rgb));
3619
4423
  --utility-surface: rgb(var(--utility-surface-rgb) / var(--utility-panel-alpha));
3620
4424
  --utility-surface-strong: rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha));
@@ -3655,7 +4459,7 @@
3655
4459
  }
3656
4460
 
3657
4461
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="industrial-utility"][data-theme][data-mode] {
4462
+ [data-ui="industrial-utility"][data-mode] {
3659
4463
  --utility-border: color-mix(in srgb, rgb(var(--utility-border-rgb) / max(var(--utility-border-alpha), var(--usk-border-min-alpha))), var(--utility-text) var(--usk-border-text-mix));
3660
4464
  }
3661
4465
  }
@@ -3670,11 +4474,7 @@
3670
4474
  line-height: 1.5;
3671
4475
  }
3672
4476
 
3673
- [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
3674
- box-sizing: border-box;
3675
- }
3676
-
3677
- [data-ui="industrial-utility"][data-theme][data-mode] {
4477
+ [data-ui="industrial-utility"][data-mode] {
3678
4478
  background: var(--utility-theme-bg);
3679
4479
  background-size: var(--utility-theme-bg-size);
3680
4480
  }
@@ -3700,7 +4500,7 @@
3700
4500
  }
3701
4501
 
3702
4502
  .utility-kicker {
3703
- color: var(--utility-primary);
4503
+ color: var(--usk-primary-ink, var(--utility-primary));
3704
4504
  letter-spacing: .12em;
3705
4505
  text-transform: uppercase;
3706
4506
  margin: 0;
@@ -3801,34 +4601,16 @@
3801
4601
  box-shadow: inset 0 3px 10px #0000002e;
3802
4602
  }
3803
4603
 
3804
- .utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]) {
3805
- background: var(--utility-primary);
3806
- color: var(--utility-on-primary);
3807
- border-color: var(--utility-primary);
3808
- }
3809
-
3810
4604
  .utility-button-primary:hover, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]):hover {
3811
4605
  background: var(--utility-primary-hover);
3812
4606
  border-color: var(--utility-primary-hover);
3813
4607
  }
3814
4608
 
3815
- .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
3816
- background: var(--utility-secondary);
3817
- color: var(--utility-on-secondary);
3818
- border-color: var(--utility-secondary);
3819
- }
3820
-
3821
4609
  .utility-button-secondary:hover, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3822
4610
  background: var(--utility-secondary-hover);
3823
4611
  border-color: var(--utility-secondary-hover);
3824
4612
  }
3825
4613
 
3826
- .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
3827
- background: var(--utility-danger);
3828
- color: var(--utility-on-danger);
3829
- border-color: var(--utility-danger);
3830
- }
3831
-
3832
4614
  .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
3833
4615
  color: var(--utility-text);
3834
4616
  box-shadow: none;
@@ -3851,7 +4633,7 @@
3851
4633
  background: var(--utility-card-bg);
3852
4634
  }
3853
4635
 
3854
- .utility-toolbar, .utility-table-wrap, .utility-button:not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-ghost), .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-toolbar, :where([data-ui="industrial-utility"]) .ui-table-wrap, :where([data-ui="industrial-utility"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="ghost"])), :where([data-ui="industrial-utility"]) .ui-icon-button {
4636
+ .utility-toolbar, .utility-table-wrap, .utility-button:not(.utility-button-primary):not(.utility-button-secondary):not(.utility-button-danger):not(.utility-button-warning):not(.utility-button-ghost):not(.utility-button-guarded), .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-toolbar, :where([data-ui="industrial-utility"]) .ui-table-wrap, :where([data-ui="industrial-utility"]) .ui-button:not(.ui-button:where([data-ui-variant="primary"])):not(.ui-button:where([data-ui-variant="secondary"])):not(.ui-button:where([data-ui-variant="danger"])):not(.ui-button:where([data-ui-variant="warning"])):not(.ui-button:where([data-ui-variant="ghost"])):not(.utility-button-guarded), :where([data-ui="industrial-utility"]) .ui-icon-button {
3855
4637
  background: var(--utility-control-bg);
3856
4638
  }
3857
4639
 
@@ -4142,18 +4924,10 @@
4142
4924
  display: grid;
4143
4925
  }
4144
4926
 
4145
- .utility-alert-success, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="success"]) {
4146
- border-left-color: var(--utility-success);
4147
- }
4148
-
4149
4927
  .utility-alert-warning, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="warning"]) {
4150
4928
  border-left-color: var(--utility-warning);
4151
4929
  }
4152
4930
 
4153
- .utility-alert-danger, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]) {
4154
- border-left-color: var(--utility-danger);
4155
- }
4156
-
4157
4931
  .utility-alert-title, :where([data-ui="industrial-utility"]) .ui-alert-title {
4158
4932
  margin: 0;
4159
4933
  font-weight: 900;
@@ -4198,7 +4972,7 @@
4198
4972
  }
4199
4973
 
4200
4974
  .utility-text-primary {
4201
- color: var(--utility-primary);
4975
+ color: var(--usk-primary-ink, var(--utility-primary));
4202
4976
  }
4203
4977
 
4204
4978
  .utility-text-secondary {
@@ -4206,7 +4980,7 @@
4206
4980
  }
4207
4981
 
4208
4982
  .utility-text-accent {
4209
- color: var(--utility-accent);
4983
+ color: var(--usk-accent-ink, var(--utility-accent));
4210
4984
  }
4211
4985
 
4212
4986
  .utility-text-success {
@@ -4431,7 +5205,7 @@
4431
5205
  }
4432
5206
 
4433
5207
  .utility-button.utility-button-outline-heavy, .utility-button-outline-heavy, :where([data-ui="industrial-utility"]) .ui-button.utility-button-outline-heavy {
4434
- color: var(--utility-primary);
5208
+ color: var(--usk-primary-ink, var(--utility-primary));
4435
5209
  border-style: solid;
4436
5210
  border-width: 2px;
4437
5211
  border-color: var(--utility-primary);
@@ -4472,7 +5246,6 @@
4472
5246
  border-radius: var(--utility-radius-lg);
4473
5247
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4474
5248
  display: grid;
4475
- overflow: hidden;
4476
5249
  }
4477
5250
 
4478
5251
  .utility-feature-item {
@@ -4515,7 +5288,7 @@
4515
5288
  }
4516
5289
 
4517
5290
  .utility-eyebrow {
4518
- color: var(--utility-primary);
5291
+ color: var(--usk-primary-ink, var(--utility-primary));
4519
5292
  font-family: var(--utility-font-heading);
4520
5293
  letter-spacing: .14em;
4521
5294
  text-transform: uppercase;
@@ -4601,7 +5374,7 @@
4601
5374
  letter-spacing: .01em;
4602
5375
  }
4603
5376
 
4604
- [data-ui="industrial-utility"][data-theme][data-mode] {
5377
+ [data-ui="industrial-utility"][data-mode] {
4605
5378
  --utility-theme-bg: linear-gradient(90deg, rgb(var(--utility-border-rgb) / .1) 1px, transparent 1px), linear-gradient(rgb(var(--utility-border-rgb) / .08) 1px, transparent 1px), var(--utility-bg);
4606
5379
  --utility-theme-bg-size: 3rem 3rem;
4607
5380
  --utility-card-bg: linear-gradient(180deg, rgb(var(--utility-surface-strong-rgb) / var(--utility-panel-alpha)), rgb(var(--utility-surface-rgb) / var(--utility-panel-alpha)));
@@ -4704,6 +5477,7 @@
4704
5477
  clip-path: polygon(.62rem 0, calc(100% - .62rem) 0, 100% .62rem, 100% calc(100% - .62rem), calc(100% - .62rem) 100%, .62rem 100%, 0 calc(100% - .62rem), 0 .62rem);
4705
5478
  justify-content: center;
4706
5479
  justify-self: start;
5480
+ min-block-size: 2.75rem;
4707
5481
  min-inline-size: 6rem;
4708
5482
  max-inline-size: 100%;
4709
5483
  }
@@ -4721,13 +5495,13 @@
4721
5495
  box-shadow: inset .34rem 0 0 rgb(var(--utility-primary-rgb)/.24);
4722
5496
  }
4723
5497
 
4724
- [data-ui="industrial-utility"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5498
+ [data-ui="industrial-utility"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4725
5499
  border: 2px solid var(--utility-primary);
4726
5500
  border-radius: var(--utility-radius-sm);
4727
5501
  box-shadow: inset .28rem 0 0 rgb(var(--utility-primary-rgb)/.24);
4728
5502
  }
4729
5503
 
4730
- [data-ui="industrial-utility"][data-theme][data-mode] :where(dialog) {
5504
+ [data-ui="industrial-utility"][data-mode] :where(dialog) {
4731
5505
  border: 2px solid var(--utility-border);
4732
5506
  border-radius: var(--utility-radius-sm);
4733
5507
  box-shadow: inset .4rem 0 0 rgb(var(--utility-primary-rgb)/.26),0 1rem 2rem rgb(var(--utility-text-rgb)/.2);
@@ -4750,6 +5524,204 @@
4750
5524
  box-shadow: inset 0 0 0 .12em #00000029;
4751
5525
  }
4752
5526
 
5527
+ [data-ui="industrial-utility"][data-mode] {
5528
+ --usk-native-font-control: "Arial Narrow", Bahnschrift, "Segoe UI", sans-serif;
5529
+ --usk-native-control-min-block-size: 2.72rem;
5530
+ --usk-native-control-padding-block: .6rem;
5531
+ --usk-native-control-padding-inline: .9rem;
5532
+ --usk-native-border-width: 2px;
5533
+ --usk-native-radius-sm: .12rem;
5534
+ --usk-native-radius: .2rem;
5535
+ --usk-native-radius-lg: .3rem;
5536
+ --usk-native-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .72), 0 2px 0 rgb(var(--utility-text-rgb) / .28);
5537
+ --usk-native-shadow-md: inset 0 0 0 1px rgb(var(--utility-surface-strong-rgb) / .5), 0 .55rem 1rem rgb(var(--utility-text-rgb) / .2);
5538
+ --usk-native-focus-ring: 0 0 0 2px var(--utility-surface), 0 0 0 4px var(--utility-focus);
5539
+ --usk-native-subcontrol-padding-block: .46rem;
5540
+ --usk-native-subcontrol-padding-inline: .66rem;
5541
+ --usk-native-choice-size: 1.22rem;
5542
+ --usk-native-choice-background: linear-gradient(180deg, var(--utility-surface-strong), var(--utility-control-bg));
5543
+ --usk-native-choice-border: 2px solid var(--utility-border);
5544
+ --usk-native-checkbox-radius: .08rem;
5545
+ --usk-native-radio-radius: 50%;
5546
+ --usk-native-choice-shadow: inset 0 2px 3px rgb(var(--utility-text-rgb) / .22);
5547
+ --usk-native-choice-checked-background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary));
5548
+ --usk-native-choice-mark-color: var(--utility-on-primary);
5549
+ --usk-native-select-indicator-image: linear-gradient(60deg, transparent 48%, var(--utility-text) 48% 58%, transparent 58%), linear-gradient(120deg, transparent 48%, var(--utility-text) 48% 58%, transparent 58%);
5550
+ --usk-native-select-indicator-size: .52rem .52rem, .52rem .52rem;
5551
+ --usk-native-select-indicator-position: calc(100% - 1.06rem) 50%, calc(100% - .7rem) 50%;
5552
+ --usk-native-select-padding-inline-end: 2.3rem;
5553
+ --usk-native-range-track-size: .64rem;
5554
+ --usk-native-range-track-background: linear-gradient(90deg, var(--utility-success) 0 58%, var(--utility-warning) 58% 78%, var(--utility-danger) 78%);
5555
+ --usk-native-range-track-border: 2px inset var(--utility-border);
5556
+ --usk-native-range-track-radius: .06rem;
5557
+ --usk-native-range-track-shadow: inset 0 2px 3px rgb(var(--utility-text-rgb) / .3);
5558
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--utility-success), var(--utility-primary));
5559
+ --usk-native-range-thumb-size: 1.26rem;
5560
+ --usk-native-range-thumb-background: linear-gradient(90deg, var(--utility-surface), var(--utility-surface-strong), var(--utility-surface));
5561
+ --usk-native-range-thumb-border: 2px outset var(--utility-border);
5562
+ --usk-native-range-thumb-radius: .1rem;
5563
+ --usk-native-range-thumb-shadow: 1px 2px 0 rgb(var(--utility-text-rgb) / .3);
5564
+ --usk-native-progress-size: .82rem;
5565
+ --usk-native-progress-track-background: var(--utility-control-bg);
5566
+ --usk-native-progress-track-border: 2px inset var(--utility-border);
5567
+ --usk-native-progress-track-radius: .06rem;
5568
+ --usk-native-progress-track-shadow: inset 0 2px 4px rgb(var(--utility-text-rgb) / .32);
5569
+ --usk-native-progress-value-background: linear-gradient(180deg, var(--utility-primary-hover), var(--utility-primary));
5570
+ --usk-native-progress-value-radius: .03rem;
5571
+ --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb) / .42);
5572
+ --usk-native-scrollbar-size: .86rem;
5573
+ --usk-native-scrollbar-track: linear-gradient(90deg, var(--utility-control-bg), var(--utility-surface));
5574
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, var(--utility-surface), var(--utility-primary), var(--utility-surface));
5575
+ --usk-native-scrollbar-radius: .08rem;
5576
+ }
5577
+
5578
+ .utility-title {
5579
+ letter-spacing: max(.04em, .5px);
5580
+ margin-block: .75rem;
5581
+ font-weight: 950;
5582
+ }
5583
+
5584
+ .utility-label, :where([data-ui="industrial-utility"]) .ui-label {
5585
+ font-size: .74rem;
5586
+ font-weight: 900;
5587
+ }
5588
+
5589
+ .utility-card, .utility-panel, :where([data-ui="industrial-utility"]) .ui-card {
5590
+ background: linear-gradient(180deg,var(--utility-surface-strong),var(--utility-card-bg));
5591
+ border: 3px double var(--utility-border);
5592
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.8),0 .45rem .9rem rgb(var(--utility-text-rgb)/.2);
5593
+ border-radius: .28rem;
5594
+ padding: 1rem;
5595
+ }
5596
+
5597
+ .utility-well, .utility-inset {
5598
+ background: var(--utility-control-bg);
5599
+ border: 2px inset var(--utility-border);
5600
+ box-shadow: inset 0 3px 6px rgb(var(--utility-text-rgb)/.25);
5601
+ border-radius: .12rem;
5602
+ padding: .76rem;
5603
+ }
5604
+
5605
+ .utility-button, .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-icon-button {
5606
+ background: linear-gradient(180deg,var(--utility-surface-strong),transparent),var(--utility-control-bg);
5607
+ border: 2px outset var(--utility-border);
5608
+ min-height: 2.72rem;
5609
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.82),0 2px 0 rgb(var(--utility-text-rgb)/.3);
5610
+ border-radius: .12rem;
5611
+ padding: .6rem .9rem;
5612
+ font-weight: 900;
5613
+ }
5614
+
5615
+ .utility-button:active, .utility-button[aria-pressed="true"], .utility-button.is-active, :where([data-ui="industrial-utility"]) .ui-button:active, :where([data-ui="industrial-utility"]) .ui-button[aria-pressed="true"], :where([data-ui="industrial-utility"]) .ui-button.is-active {
5616
+ box-shadow: inset 0 3px 6px rgb(var(--utility-text-rgb)/.3);
5617
+ border-style: inset;
5618
+ transform: translateY(2px);
5619
+ }
5620
+
5621
+ .utility-input, .utility-textarea, .utility-select, :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-textarea, :where([data-ui="industrial-utility"]) .ui-select {
5622
+ background: var(--utility-control-bg);
5623
+ border: 2px inset var(--utility-border);
5624
+ min-height: 2.45rem;
5625
+ box-shadow: inset 0 2px 4px rgb(var(--utility-text-rgb)/.2);
5626
+ border-radius: .1rem;
5627
+ padding: .5rem .68rem;
5628
+ }
5629
+
5630
+ .utility-nav, .utility-toolbar, :where([data-ui="industrial-utility"]) .ui-nav, :where([data-ui="industrial-utility"]) .ui-toolbar {
5631
+ border: 3px double var(--utility-border);
5632
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.7);
5633
+ border-radius: .22rem;
5634
+ }
5635
+
5636
+ .utility-nav-link, :where([data-ui="industrial-utility"]) .ui-nav-link {
5637
+ border-block-end: 2px solid #0000;
5638
+ border-radius: .08rem;
5639
+ }
5640
+
5641
+ .utility-badge, :where([data-ui="industrial-utility"]) .ui-badge {
5642
+ border: 2px outset var(--utility-border);
5643
+ min-height: 1.58rem;
5644
+ box-shadow: 1px 2px 0 rgb(var(--utility-text-rgb)/.24);
5645
+ border-radius: .08rem;
5646
+ padding: .28rem .5rem;
5647
+ }
5648
+
5649
+ .utility-alert, :where([data-ui="industrial-utility"]) .ui-alert {
5650
+ background: linear-gradient(180deg,var(--utility-surface-strong),var(--utility-surface));
5651
+ border: 2px solid var(--utility-border);
5652
+ box-shadow: inset .35rem 0 0 currentColor,0 3px 0 rgb(var(--utility-text-rgb)/.2);
5653
+ border-radius: .18rem;
5654
+ padding: .72rem .84rem;
5655
+ }
5656
+
5657
+ .utility-progress, :where([data-ui="industrial-utility"]) .ui-progress {
5658
+ background: var(--utility-control-bg);
5659
+ border: 2px inset var(--utility-border);
5660
+ border-radius: .06rem;
5661
+ height: .82rem;
5662
+ }
5663
+
5664
+ .utility-progress-bar, :where([data-ui="industrial-utility"]) .ui-progress-bar {
5665
+ background: linear-gradient(180deg,var(--utility-primary-hover),var(--utility-primary));
5666
+ box-shadow: inset 0 1px 0 rgb(var(--utility-surface-strong-rgb)/.42);
5667
+ border-radius: .03rem;
5668
+ }
5669
+
5670
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
5671
+ background: var(--utility-card-bg);
5672
+ border: 3px double var(--utility-border);
5673
+ box-shadow: 0 .45rem .9rem rgb(var(--utility-text-rgb)/.18);
5674
+ border-radius: .24rem;
5675
+ }
5676
+
5677
+ .utility-table, :where([data-ui="industrial-utility"]) .ui-table {
5678
+ border-collapse: collapse;
5679
+ font-variant-numeric: tabular-nums;
5680
+ }
5681
+
5682
+ .utility-table th, :where([data-ui="industrial-utility"]) .ui-table th {
5683
+ background: linear-gradient(180deg,var(--utility-surface-strong),var(--utility-surface-soft));
5684
+ border: 1px solid var(--utility-border);
5685
+ padding: .58rem .66rem;
5686
+ font-weight: 900;
5687
+ }
5688
+
5689
+ .utility-table td, :where([data-ui="industrial-utility"]) .ui-table td {
5690
+ border: 1px solid var(--utility-border);
5691
+ padding: .54rem .66rem;
5692
+ }
5693
+
5694
+ .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5695
+ border: 2px outset var(--utility-border);
5696
+ box-shadow: 0 3px 0 rgb(var(--utility-text-rgb)/.26);
5697
+ border-radius: .12rem;
5698
+ }
5699
+
5700
+ .utility-card-service, .utility-card-feature, .utility-media-scrim, .utility-feature-strip, .utility-callout-bar {
5701
+ border: 3px double var(--utility-border);
5702
+ box-shadow: inset .32rem 0 0 rgb(var(--utility-primary-rgb)/.3),0 .45rem .9rem rgb(var(--utility-text-rgb)/.18);
5703
+ border-radius: .24rem;
5704
+ }
5705
+
5706
+ [data-ui="industrial-utility"][data-mode] {
5707
+ --usk-native-card-bg: repeating-linear-gradient(90deg, rgb(var(--utility-text-rgb) / .035) 0 1px, transparent 1px 6px), linear-gradient(rgb(var(--utility-success-rgb) / .12), rgb(var(--utility-success-rgb) / .12)), var(--utility-surface);
5708
+ --usk-native-control-bg: linear-gradient(180deg, var(--utility-surface-strong) 0 45%, var(--utility-surface-soft) 45% 100%);
5709
+ }
5710
+
5711
+ @supports (color: color-mix(in srgb,black,white)) {
5712
+ [data-ui="industrial-utility"][data-mode] {
5713
+ --usk-native-control-bg: linear-gradient(180deg, var(--utility-surface-strong) 0 45%, color-mix(in srgb, var(--utility-surface-soft) 82%, var(--utility-text)) 45% 100%);
5714
+ }
5715
+ }
5716
+
5717
+ .utility-panel, .utility-card-service, .utility-feature-strip, .utility-callout-bar {
5718
+ background: repeating-linear-gradient(90deg,rgb(var(--utility-text-rgb)/.035)0 1px,transparent 1px 6px),linear-gradient(rgb(var(--utility-success-rgb)/.12),rgb(var(--utility-success-rgb)/.12)),var(--utility-card-bg);
5719
+ }
5720
+
5721
+ [data-ui="industrial-utility"][data-mode] :where(fieldset, article, aside) {
5722
+ background: repeating-linear-gradient(90deg,rgb(var(--utility-text-rgb)/.035)0 1px,transparent 1px 6px),linear-gradient(rgb(var(--utility-success-rgb)/.12),rgb(var(--utility-success-rgb)/.12)),var(--utility-surface);
5723
+ }
5724
+
4753
5725
  @media (prefers-reduced-motion: reduce) {
4754
5726
  [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
4755
5727
  scroll-behavior: auto !important;
@@ -4794,4 +5766,1904 @@
4794
5766
  color: #000 !important;
4795
5767
  }
4796
5768
  }
5769
+
5770
+ .utility-input[aria-invalid="true"], .utility-textarea[aria-invalid="true"], .utility-select[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-input[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-textarea[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-select[aria-invalid="true"] {
5771
+ border-color: var(--utility-danger);
5772
+ box-shadow: 0 0 0 2px rgb(var(--utility-danger-rgb)/.2);
5773
+ }
5774
+
5775
+ .utility-input[readonly], .utility-textarea[readonly], :where([data-ui="industrial-utility"]) .ui-input[readonly], :where([data-ui="industrial-utility"]) .ui-textarea[readonly] {
5776
+ filter: saturate(.72);
5777
+ opacity: .78;
5778
+ border-style: dashed;
5779
+ }
5780
+
5781
+ .utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]) {
5782
+ background: var(--utility-primary);
5783
+ color: var(--utility-on-primary);
5784
+ border-color: var(--utility-primary);
5785
+ }
5786
+
5787
+ .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
5788
+ background: var(--utility-secondary);
5789
+ color: var(--utility-on-secondary);
5790
+ border-color: var(--utility-secondary);
5791
+ }
5792
+
5793
+ .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
5794
+ background: var(--utility-danger);
5795
+ color: var(--utility-on-danger);
5796
+ border-color: var(--utility-danger);
5797
+ }
5798
+
5799
+ .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
5800
+ color: var(--usk-primary-ink, var(--utility-primary));
5801
+ background: none;
5802
+ border-color: #0000;
5803
+ }
5804
+
5805
+ .utility-feature-item > .utility-icon-medallion {
5806
+ font-size: 1.5rem;
5807
+ line-height: 1;
5808
+ }
5809
+
5810
+ .utility-callout-bar > .utility-icon-medallion {
5811
+ min-block-size: 4.5rem;
5812
+ min-inline-size: 4.5rem;
5813
+ font-size: 2rem;
5814
+ font-weight: 800;
5815
+ line-height: 1;
5816
+ }
5817
+
5818
+ [data-ui="industrial-utility"][data-mode="dark"] {
5819
+ --utility-fallback-bg-rgb: 11 17 19;
5820
+ --utility-fallback-surface-rgb: 24 33 36;
5821
+ --utility-fallback-surface-strong-rgb: 34 44 47;
5822
+ --utility-fallback-surface-soft-rgb: 14 21 23;
5823
+ --utility-fallback-text-rgb: 214 217 213;
5824
+ --utility-fallback-text-muted-rgb: 169 176 174;
5825
+ --utility-fallback-border-rgb: 96 106 109;
5826
+ --utility-fallback-primary-rgb: 244 194 13;
5827
+ --utility-fallback-primary-hover-rgb: 255 213 47;
5828
+ --utility-fallback-primary-text-rgb: 17 20 22;
5829
+ --utility-fallback-secondary-rgb: 104 113 116;
5830
+ --utility-fallback-secondary-text-rgb: 255 255 255;
5831
+ --utility-fallback-accent-rgb: 95 157 204;
5832
+ --utility-fallback-accent-text-rgb: 0 0 0;
5833
+ --utility-fallback-success-rgb: 117 196 71;
5834
+ --utility-fallback-success-text-rgb: 0 0 0;
5835
+ --utility-fallback-warning-rgb: 244 194 13;
5836
+ --utility-fallback-warning-text-rgb: 17 20 22;
5837
+ --utility-fallback-danger-rgb: 199 58 35;
5838
+ --utility-fallback-danger-text-rgb: 255 244 236;
5839
+ --utility-fallback-link-rgb: 95 157 204;
5840
+ --utility-fallback-focus-rgb: 244 194 13;
5841
+ --utility-material-steel: rgb(var(--usk-border-rgb, 104 113 116));
5842
+ --utility-material-steel-light: rgb(var(--usk-surface-strong-rgb, 161 168 167));
5843
+ --utility-material-input: rgb(var(--usk-surface-rgb, 17 25 27));
5844
+ --utility-material-header: rgb(var(--usk-industrial-header-rgb, 12 18 20));
5845
+ --utility-material-shadow-opacity: .48;
5846
+ }
5847
+
5848
+ [data-ui="industrial-utility"][data-mode="light"] {
5849
+ --utility-fallback-bg-rgb: 201 198 189;
5850
+ --utility-fallback-surface-rgb: 231 227 217;
5851
+ --utility-fallback-surface-strong-rgb: 242 239 231;
5852
+ --utility-fallback-surface-soft-rgb: 195 193 186;
5853
+ --utility-fallback-text-rgb: 30 35 37;
5854
+ --utility-fallback-text-muted-rgb: 69 75 76;
5855
+ --utility-fallback-border-rgb: 104 108 107;
5856
+ --utility-fallback-primary-rgb: 242 183 5;
5857
+ --utility-fallback-primary-hover-rgb: 255 213 47;
5858
+ --utility-fallback-primary-text-rgb: 18 23 25;
5859
+ --utility-fallback-secondary-rgb: 119 123 122;
5860
+ --utility-fallback-secondary-text-rgb: 0 0 0;
5861
+ --utility-fallback-accent-rgb: 60 112 151;
5862
+ --utility-fallback-accent-text-rgb: 255 255 255;
5863
+ --utility-fallback-success-rgb: 77 143 45;
5864
+ --utility-fallback-success-text-rgb: 0 0 0;
5865
+ --utility-fallback-warning-rgb: 242 183 5;
5866
+ --utility-fallback-warning-text-rgb: 18 23 25;
5867
+ --utility-fallback-danger-rgb: 185 39 23;
5868
+ --utility-fallback-danger-text-rgb: 255 249 245;
5869
+ --utility-fallback-link-rgb: 60 112 151;
5870
+ --utility-fallback-focus-rgb: 155 101 0;
5871
+ --utility-material-steel: rgb(var(--usk-border-rgb, 119 123 122));
5872
+ --utility-material-steel-light: rgb(var(--usk-surface-strong-rgb, 252 250 244));
5873
+ --utility-material-input: rgb(var(--usk-surface-rgb, 239 237 230));
5874
+ --utility-material-header: rgb(var(--usk-industrial-header-rgb, 23 32 35));
5875
+ --utility-material-shadow-opacity: .28;
5876
+ }
5877
+
5878
+ [data-ui="industrial-utility"][data-mode] {
5879
+ --utility-font-display: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", sans-serif;
5880
+ --utility-font-body: "Arial Narrow", "Liberation Sans Narrow", "DejaVu Sans Condensed", Arial, sans-serif;
5881
+ --utility-font-mono: "DejaVu Sans Mono", Consolas, monospace;
5882
+ --utility-material-font-display: var(--utility-font-display);
5883
+ --utility-material-font-body: var(--utility-font-body);
5884
+ --utility-material-font-mono: var(--utility-font-mono);
5885
+ --utility-material-radius: 2px;
5886
+ --utility-material-control-height: 34px;
5887
+ --utility-material-speed: .11s;
5888
+ --utility-material-ease: cubic-bezier(.2, .8, .2, 1);
5889
+ --utility-material-canvas: var(--utility-bg);
5890
+ --utility-material-shell: var(--utility-surface);
5891
+ --utility-material-surface: var(--utility-surface);
5892
+ --utility-material-surface-raised: var(--utility-surface-strong);
5893
+ --utility-material-surface-low: var(--utility-surface-soft);
5894
+ --utility-material-text: var(--utility-text);
5895
+ --utility-material-text-soft: var(--utility-text-muted);
5896
+ --utility-material-muted: var(--utility-text-muted);
5897
+ --utility-material-line: rgb(var(--utility-border-rgb) / .6);
5898
+ --utility-material-line-strong: var(--utility-border);
5899
+ --utility-material-steel-dark: rgb(var(--usk-industrial-bezel-rgb, 52 57 58));
5900
+ --utility-material-header-ink: rgb(var(--usk-industrial-header-text-rgb, 234 238 235));
5901
+ --utility-material-header-muted: rgb(var(--usk-industrial-header-text-rgb, 177 190 187));
5902
+ --utility-material-safety-amber: var(--utility-primary);
5903
+ --utility-material-safety-ink: var(--utility-on-primary);
5904
+ --utility-material-warning: var(--utility-warning);
5905
+ --utility-material-hazard-red: var(--utility-danger);
5906
+ --utility-material-hazard-ink: var(--utility-on-danger);
5907
+ --utility-material-lamp-green: var(--utility-success);
5908
+ --utility-material-lamp-blue: var(--utility-accent);
5909
+ --utility-material-off: var(--utility-border);
5910
+ --utility-material-focus: var(--utility-focus);
5911
+ --utility-material-bevel: 0 1px 0 #ffffff2b, 0 3px 6px rgb(0 0 0 / var(--utility-material-shadow-opacity, .48)), inset 0 1px 0 #ffffff40, inset 0 -2px 0 #00000040;
5912
+ --utility-material-inset-shadow: inset 0 2px 4px #00000047, 0 1px 0 #ffffff1a;
5913
+ --utility-material-panel-shadow: 0 3px 8px #0003, inset 0 1px 0 #ffffff26;
5914
+ --utility-material-lamp-glow: 0 0 8px rgb(var(--utility-success-rgb) / .45);
5915
+ --utility-material-primary-top: var(--utility-primary);
5916
+ --utility-material-danger-top: var(--utility-danger);
5917
+ --utility-material-readout-ink: rgb(var(--usk-industrial-readout-text-rgb, 156 232 121));
5918
+ --utility-material-badge-success: rgb(var(--usk-success-rgb, 52 95 38));
5919
+ --utility-material-badge-success-ink: rgb(var(--usk-success-text-rgb, 223 245 211));
5920
+ --utility-material-badge-info: rgb(var(--usk-accent-rgb, 49 85 113));
5921
+ --utility-material-badge-info-ink: rgb(var(--usk-accent-text-rgb, 229 244 255));
5922
+ --utility-material-badge-warning: rgb(var(--usk-warning-rgb, 133 95 6));
5923
+ --utility-material-badge-warning-ink: rgb(var(--usk-warning-text-rgb, 255 242 192));
5924
+ --utility-material-badge-danger: rgb(var(--usk-danger-rgb, 132 32 19));
5925
+ --utility-material-badge-danger-ink: rgb(var(--usk-danger-text-rgb, 255 240 235));
5926
+ --utility-theme-bg: var(--utility-bg);
5927
+ --utility-radius-xs: 1px;
5928
+ --utility-radius-sm: 2px;
5929
+ --utility-radius-md: 2px;
5930
+ --usk-native-card-bg: var(--utility-material-surface);
5931
+ --usk-native-control-bg: var(--utility-material-input);
5932
+ --usk-native-control-border: 1px solid var(--utility-material-line-strong);
5933
+ --usk-native-control-radius: 1px;
5934
+ --usk-native-control-shadow: var(--utility-material-inset-shadow);
5935
+ --usk-native-font-body: var(--utility-font-body);
5936
+ --usk-native-font-heading: var(--utility-font-display);
5937
+ --usk-native-font-control: var(--utility-font-display);
5938
+ }
5939
+
5940
+ [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
5941
+ box-sizing: border-box;
5942
+ }
5943
+
5944
+ [data-ui="industrial-utility"] :focus-visible {
5945
+ outline: 2px solid var(--utility-material-focus);
5946
+ outline-offset: 2px;
5947
+ }
5948
+
5949
+ [data-ui="industrial-utility"] a {
5950
+ color: var(--utility-material-lamp-blue);
5951
+ text-underline-offset: 3px;
5952
+ font-weight: 700;
5953
+ text-decoration-thickness: 1px;
5954
+ }
5955
+
5956
+ [data-ui="industrial-utility"] a:hover, [data-ui="industrial-utility"] a.is-hover {
5957
+ color: var(--utility-material-warning);
5958
+ }
5959
+
5960
+ .utility-panel, .utility-card, .utility-dialog, .utility-popover, .utility-toast, :where([data-ui="industrial-utility"]) .ui-card {
5961
+ background: var(--utility-material-surface);
5962
+ border: 1px solid var(--utility-material-line-strong);
5963
+ border-radius: var(--utility-material-radius);
5964
+ box-shadow: var(--utility-material-panel-shadow);
5965
+ position: relative;
5966
+ }
5967
+
5968
+ .utility-panel:before, .utility-card:before, .utility-dialog:before, :where([data-ui="industrial-utility"]) .ui-card:before {
5969
+ border: 1px solid rgb(var(--utility-border-rgb)/.25);
5970
+ content: "";
5971
+ pointer-events: none;
5972
+ border-radius: 1px;
5973
+ position: absolute;
5974
+ inset: 3px;
5975
+ }
5976
+
5977
+ .utility-panel-header {
5978
+ background: var(--utility-material-header);
5979
+ border-bottom: 1px solid var(--utility-material-steel-dark);
5980
+ color: var(--utility-material-header-ink);
5981
+ font: 800 12px/1 var(--utility-material-font-display);
5982
+ letter-spacing: 0;
5983
+ text-transform: uppercase;
5984
+ align-items: center;
5985
+ gap: 8px;
5986
+ height: 31px;
5987
+ padding: 0 10px;
5988
+ display: flex;
5989
+ position: relative;
5990
+ }
5991
+
5992
+ .utility-panel-header:before {
5993
+ background: var(--utility-material-safety-amber);
5994
+ content: "";
5995
+ width: 4px;
5996
+ height: 13px;
5997
+ box-shadow: inset 0 -2px #00000038;
5998
+ }
5999
+
6000
+ .utility-panel-header small {
6001
+ color: var(--utility-material-header-muted);
6002
+ font: 600 8px var(--utility-material-font-mono);
6003
+ letter-spacing: 0;
6004
+ margin-left: auto;
6005
+ }
6006
+
6007
+ .utility-panel-body {
6008
+ padding: 10px;
6009
+ position: relative;
6010
+ }
6011
+
6012
+ .utility-rivet {
6013
+ z-index: 1;
6014
+ pointer-events: none;
6015
+ background: radial-gradient(circle at 38% 35%,var(--utility-material-steel-light)0 12%,var(--utility-material-steel) 35%,var(--utility-material-steel-dark) 72%);
6016
+ border: 1px solid var(--utility-material-steel-dark);
6017
+ border-radius: 50%;
6018
+ width: 7px;
6019
+ height: 7px;
6020
+ position: absolute;
6021
+ box-shadow: 0 1px 1px #0006;
6022
+ }
6023
+
6024
+ .utility-rivet.is-tl {
6025
+ top: 5px;
6026
+ left: 5px;
6027
+ }
6028
+
6029
+ .utility-rivet.is-tr {
6030
+ top: 5px;
6031
+ right: 5px;
6032
+ }
6033
+
6034
+ .utility-rivet.is-bl {
6035
+ bottom: 5px;
6036
+ left: 5px;
6037
+ }
6038
+
6039
+ .utility-rivet.is-br {
6040
+ bottom: 5px;
6041
+ right: 5px;
6042
+ }
6043
+
6044
+ .utility-label, .utility-overline, .utility-readout-label, :where([data-ui="industrial-utility"]) .ui-label {
6045
+ color: var(--utility-material-muted);
6046
+ font: 700 9px/1 var(--utility-material-font-display);
6047
+ letter-spacing: 0;
6048
+ text-transform: uppercase;
6049
+ margin-bottom: 5px;
6050
+ display: block;
6051
+ }
6052
+
6053
+ [data-ui="industrial-utility"][data-mode] .utility-media-scrim > :where(figcaption, [data-media-caption]) * {
6054
+ color: inherit;
6055
+ }
6056
+
6057
+ .utility-overline {
6058
+ color: var(--utility-material-warning);
6059
+ font-family: var(--utility-material-font-mono);
6060
+ letter-spacing: 0;
6061
+ font-size: 8px;
6062
+ }
6063
+
6064
+ .utility-help {
6065
+ color: var(--utility-material-muted);
6066
+ font: 8px/1.3 var(--utility-material-font-body);
6067
+ margin: 4px 0 0;
6068
+ }
6069
+
6070
+ .utility-help.is-error {
6071
+ color: var(--utility-material-hazard-red);
6072
+ }
6073
+
6074
+ .utility-field, :where([data-ui="industrial-utility"]) .ui-field {
6075
+ gap: 4px;
6076
+ min-width: 0;
6077
+ display: grid;
6078
+ }
6079
+
6080
+ .utility-input, .utility-select, .utility-textarea, [data-ui="industrial-utility"] input[type="text"], [data-ui="industrial-utility"] input[type="password"], [data-ui="industrial-utility"] input[type="search"], [data-ui="industrial-utility"] input[type="number"], [data-ui="industrial-utility"] input[type="date"], [data-ui="industrial-utility"] input[type="time"], :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-select, :where([data-ui="industrial-utility"]) .ui-textarea {
6081
+ appearance: none;
6082
+ background: var(--utility-material-input);
6083
+ border: 1px solid var(--utility-material-line-strong);
6084
+ box-shadow: var(--utility-material-inset-shadow);
6085
+ color: var(--utility-material-text);
6086
+ font: 11px var(--utility-material-font-body);
6087
+ height: var(--utility-material-control-height);
6088
+ border-radius: 1px;
6089
+ width: 100%;
6090
+ min-width: 0;
6091
+ padding: 0 10px;
6092
+ }
6093
+
6094
+ .utility-input::placeholder, .utility-textarea::placeholder, [data-ui="industrial-utility"] input::placeholder, :where([data-ui="industrial-utility"]) .ui-input::placeholder, :where([data-ui="industrial-utility"]) .ui-textarea::placeholder {
6095
+ color: var(--utility-material-muted);
6096
+ opacity: .75;
6097
+ }
6098
+
6099
+ .utility-input:hover, .utility-select:hover, .utility-textarea:hover, [data-ui="industrial-utility"] input:hover, :where([data-ui="industrial-utility"]) .ui-input:hover, :where([data-ui="industrial-utility"]) .ui-select:hover, :where([data-ui="industrial-utility"]) .ui-textarea:hover {
6100
+ border-color: var(--utility-material-steel-light);
6101
+ }
6102
+
6103
+ .utility-input:focus, .utility-select:focus, .utility-textarea:focus, [data-ui="industrial-utility"] input:focus, :where([data-ui="industrial-utility"]) .ui-input:focus, :where([data-ui="industrial-utility"]) .ui-select:focus, :where([data-ui="industrial-utility"]) .ui-textarea:focus {
6104
+ border-color: var(--utility-material-focus);
6105
+ box-shadow: var(--utility-material-inset-shadow),0 0 0 1px var(--utility-material-focus);
6106
+ outline: 2px solid var(--utility-material-focus);
6107
+ }
6108
+
6109
+ .utility-input.is-error, .utility-textarea.is-error, :where([data-ui="industrial-utility"]) .ui-input.is-error, :where([data-ui="industrial-utility"]) .ui-textarea.is-error {
6110
+ border-color: var(--utility-material-hazard-red);
6111
+ box-shadow: var(--utility-material-inset-shadow),0 0 0 1px var(--utility-material-hazard-red);
6112
+ }
6113
+
6114
+ .utility-input:disabled, .utility-select:disabled, .utility-textarea:disabled, [data-ui="industrial-utility"] input:disabled, :where([data-ui="industrial-utility"]) .ui-input:disabled, :where([data-ui="industrial-utility"]) .ui-select:disabled, :where([data-ui="industrial-utility"]) .ui-textarea:disabled {
6115
+ cursor: not-allowed;
6116
+ opacity: .47;
6117
+ }
6118
+
6119
+ .utility-textarea, [data-ui="industrial-utility"] textarea, :where([data-ui="industrial-utility"]) .ui-textarea {
6120
+ resize: vertical;
6121
+ min-height: 68px;
6122
+ padding: 8px 10px;
6123
+ }
6124
+
6125
+ .utility-select, [data-ui="industrial-utility"] select, :where([data-ui="industrial-utility"]) .ui-select {
6126
+ appearance: none;
6127
+ background-color: var(--utility-material-input);
6128
+ background-image: linear-gradient(45deg,transparent 50%,var(--utility-material-text-soft) 50%),linear-gradient(135deg,var(--utility-material-text-soft) 50%,transparent 50%);
6129
+ border: 1px solid var(--utility-material-line-strong);
6130
+ box-shadow: var(--utility-material-inset-shadow);
6131
+ color: var(--utility-material-text);
6132
+ font: 11px var(--utility-material-font-body);
6133
+ height: var(--utility-material-control-height);
6134
+ background-position: calc(100% - 13px) 48%, calc(100% - 9px) 48%;
6135
+ background-repeat: no-repeat;
6136
+ background-size: 4px 4px, 4px 4px;
6137
+ border-radius: 1px;
6138
+ width: 100%;
6139
+ padding: 0 28px 0 10px;
6140
+ }
6141
+
6142
+ .utility-file {
6143
+ color: var(--utility-material-text-soft);
6144
+ font: 10px var(--utility-material-font-body);
6145
+ width: 100%;
6146
+ }
6147
+
6148
+ .utility-file::file-selector-button {
6149
+ background: var(--utility-material-surface-raised);
6150
+ border: 1px solid var(--utility-material-line-strong);
6151
+ box-shadow: var(--utility-material-bevel);
6152
+ color: var(--utility-material-text);
6153
+ cursor: pointer;
6154
+ font: 800 9px var(--utility-material-font-display);
6155
+ text-transform: uppercase;
6156
+ border-radius: 1px;
6157
+ height: 30px;
6158
+ margin-right: 9px;
6159
+ padding: 0 12px;
6160
+ }
6161
+
6162
+ .utility-button, :where([data-ui="industrial-utility"]) .ui-button {
6163
+ appearance: none;
6164
+ background: linear-gradient(var(--utility-material-surface-raised),var(--utility-material-surface-low));
6165
+ border: 1px solid var(--utility-material-steel-dark);
6166
+ box-shadow: var(--utility-material-bevel);
6167
+ color: var(--utility-material-text);
6168
+ cursor: pointer;
6169
+ font: 900 11px/1 var(--utility-material-font-display);
6170
+ height: var(--utility-material-control-height);
6171
+ letter-spacing: 0;
6172
+ text-transform: uppercase;
6173
+ min-width: 84px;
6174
+ transition: filter var(--utility-material-speed) var(--utility-material-ease),transform 70ms linear,box-shadow 70ms linear;
6175
+ border-radius: 2px;
6176
+ justify-content: center;
6177
+ align-items: center;
6178
+ gap: 7px;
6179
+ padding: 0 14px;
6180
+ display: inline-flex;
6181
+ }
6182
+
6183
+ .utility-button:hover, .utility-button.is-hover, :where([data-ui="industrial-utility"]) .ui-button:hover, :where([data-ui="industrial-utility"]) .ui-button.is-hover {
6184
+ filter: brightness(1.1);
6185
+ }
6186
+
6187
+ .utility-button:active, .utility-button.is-pressed, :where([data-ui="industrial-utility"]) .ui-button:active, :where([data-ui="industrial-utility"]) .ui-button.is-pressed {
6188
+ transform: translateY(2px);
6189
+ box-shadow: inset 0 3px 5px #00000085, 0 1px #ffffff1f;
6190
+ }
6191
+
6192
+ .utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]) {
6193
+ background: linear-gradient(var(--utility-material-primary-top),var(--utility-material-safety-amber));
6194
+ border-color: var(--utility-material-safety-amber);
6195
+ color: var(--utility-material-safety-ink);
6196
+ }
6197
+
6198
+ .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
6199
+ background: linear-gradient(var(--utility-material-steel-light),var(--utility-material-steel));
6200
+ border-color: var(--utility-material-steel-dark);
6201
+ color: #131719;
6202
+ }
6203
+
6204
+ .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
6205
+ border-color: var(--utility-material-line-strong);
6206
+ box-shadow: inset 0 0 0 1px rgb(var(--utility-border-rgb)/.15);
6207
+ background: none;
6208
+ }
6209
+
6210
+ .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
6211
+ background: linear-gradient(var(--utility-material-danger-top),var(--utility-material-hazard-red));
6212
+ border-color: var(--utility-material-hazard-red);
6213
+ color: var(--utility-material-hazard-ink);
6214
+ }
6215
+
6216
+ .utility-button-guarded {
6217
+ background: repeating-linear-gradient(-45deg,var(--utility-material-safety-amber)0 7px,#201f19 7px 14px);
6218
+ color: #fff;
6219
+ text-shadow: 0 1px 2px #000;
6220
+ border-color: #5b4b05;
6221
+ }
6222
+
6223
+ .utility-button-guarded > span {
6224
+ background: #141615eb;
6225
+ padding: 5px 9px;
6226
+ }
6227
+
6228
+ .utility-button:disabled, .utility-button.is-disabled, :where([data-ui="industrial-utility"]) .ui-button:disabled, :where([data-ui="industrial-utility"]) .ui-button.is-disabled {
6229
+ cursor: not-allowed;
6230
+ filter: grayscale(.7);
6231
+ opacity: .42;
6232
+ }
6233
+
6234
+ .utility-button.is-loading:before, .utility-spinner, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before {
6235
+ border: 2px solid rgb(var(--utility-text-rgb)/.28);
6236
+ content: "";
6237
+ border-top-color: currentColor;
6238
+ border-radius: 50%;
6239
+ width: 14px;
6240
+ height: 14px;
6241
+ animation: .85s linear infinite utility-material-spin;
6242
+ }
6243
+
6244
+ @keyframes utility-material-spin {
6245
+ to {
6246
+ transform: rotate(360deg);
6247
+ }
6248
+ }
6249
+
6250
+ .utility-control-grid {
6251
+ grid-template-columns: repeat(4, minmax(0, 1fr));
6252
+ gap: 10px;
6253
+ display: grid;
6254
+ }
6255
+
6256
+ .utility-control-cell {
6257
+ background: rgb(var(--utility-surface-soft-rgb)/.72);
6258
+ border: 1px solid var(--utility-material-line);
6259
+ box-shadow: var(--utility-material-inset-shadow);
6260
+ flex-direction: column;
6261
+ justify-content: center;
6262
+ align-items: center;
6263
+ gap: 7px;
6264
+ min-height: 76px;
6265
+ padding: 8px;
6266
+ display: flex;
6267
+ }
6268
+
6269
+ .utility-control-cell > label, .utility-control-name {
6270
+ color: var(--utility-material-muted);
6271
+ font: 700 8px var(--utility-material-font-display);
6272
+ letter-spacing: 0;
6273
+ text-align: center;
6274
+ text-transform: uppercase;
6275
+ }
6276
+
6277
+ .utility-emergency-stop {
6278
+ appearance: none;
6279
+ background: radial-gradient(circle at 40% 30%,var(--utility-material-danger-top),var(--utility-material-hazard-red) 56%,var(--utility-material-hazard-red) 100%);
6280
+ color: var(--utility-material-hazard-ink);
6281
+ cursor: pointer;
6282
+ font: 900 9px/1 var(--utility-material-font-display);
6283
+ letter-spacing: 0;
6284
+ text-shadow: 0 1px 1px #4c0802;
6285
+ border: 4px solid #5d6464;
6286
+ border-radius: 50%;
6287
+ justify-content: center;
6288
+ align-items: center;
6289
+ width: 48px;
6290
+ height: 48px;
6291
+ display: inline-flex;
6292
+ box-shadow: 0 0 0 3px #171c1d, 0 5px 7px #00000073, inset 0 2px 2px #ffffff52;
6293
+ }
6294
+
6295
+ .utility-emergency-stop:active, .utility-emergency-stop.is-pressed {
6296
+ transform: translateY(2px);
6297
+ box-shadow: 0 0 0 3px #171c1d, 0 2px 2px #00000080, inset 0 4px 5px #4b0000b8;
6298
+ }
6299
+
6300
+ .utility-key-switch {
6301
+ appearance: none;
6302
+ cursor: pointer;
6303
+ background: radial-gradient(circle, #9ba1a0 0 12%, #3f4748 13% 36%, #a8aeac 37% 47%, #2a3031 48% 68%, #111617 69%);
6304
+ border: 0;
6305
+ border-radius: 50%;
6306
+ width: 48px;
6307
+ height: 48px;
6308
+ position: relative;
6309
+ box-shadow: 0 3px 6px #0000007a, inset 0 1px 2px #ffffff73;
6310
+ }
6311
+
6312
+ .utility-key-switch:after {
6313
+ content: "";
6314
+ transform-origin: 4px 14px;
6315
+ background: #151b1c;
6316
+ border: 1px solid #aab0ae;
6317
+ border-radius: 2px;
6318
+ width: 8px;
6319
+ height: 8px;
6320
+ position: absolute;
6321
+ top: 10px;
6322
+ left: 20px;
6323
+ transform: rotate(-28deg);
6324
+ }
6325
+
6326
+ .utility-pilot-light {
6327
+ background: radial-gradient(circle at 40% 32%,#e7ffdc 0 7%,var(--utility-material-lamp-green) 28%,#183f11 78%);
6328
+ border: 2px solid var(--utility-material-steel-dark);
6329
+ box-shadow: var(--utility-material-lamp-glow),inset 0 1px 2px #ffffff6b;
6330
+ border-radius: 50%;
6331
+ justify-content: center;
6332
+ align-items: center;
6333
+ width: 17px;
6334
+ height: 17px;
6335
+ display: inline-flex;
6336
+ }
6337
+
6338
+ .utility-pilot-light.is-blue {
6339
+ background: radial-gradient(circle at 40% 32%,#e7f7ff 0 7%,var(--utility-material-lamp-blue) 28%,#14324a 78%);
6340
+ box-shadow: 0 0 0 1px #5f9dcc33, 0 0 8px #5f9dcc8c;
6341
+ }
6342
+
6343
+ .utility-pilot-light.is-red {
6344
+ background: radial-gradient(circle at 40% 32%,#ffe9df 0 7%,var(--utility-material-hazard-red) 28%,#541208 78%);
6345
+ box-shadow: 0 0 0 1px #c73a2333, 0 0 8px #c73a238c;
6346
+ }
6347
+
6348
+ .utility-pilot-light.is-off {
6349
+ background: radial-gradient(circle at 40% 32%,#a7aeaa,var(--utility-material-off) 38%,#262d2e 78%);
6350
+ box-shadow: inset 0 1px 2px #fff3;
6351
+ }
6352
+
6353
+ .utility-check, .utility-radio, :where([data-ui="industrial-utility"]) .ui-check, :where([data-ui="industrial-utility"]) .ui-radio {
6354
+ color: var(--utility-material-text-soft);
6355
+ cursor: pointer;
6356
+ font: 10px var(--utility-material-font-body);
6357
+ align-items: center;
6358
+ gap: 7px;
6359
+ display: inline-flex;
6360
+ }
6361
+
6362
+ .utility-check input, .utility-radio input, :where([data-ui="industrial-utility"]) .ui-check input, :where([data-ui="industrial-utility"]) .ui-radio input {
6363
+ appearance: none;
6364
+ background: var(--utility-material-input);
6365
+ border: 1px solid var(--utility-material-line-strong);
6366
+ box-shadow: var(--utility-material-inset-shadow);
6367
+ width: 15px;
6368
+ height: 15px;
6369
+ margin: 0;
6370
+ }
6371
+
6372
+ .utility-radio input, :where([data-ui="industrial-utility"]) .ui-radio input {
6373
+ border-radius: 50%;
6374
+ }
6375
+
6376
+ .utility-check input:checked, :where([data-ui="industrial-utility"]) .ui-check input:checked {
6377
+ background: var(--utility-material-lamp-green);
6378
+ box-shadow: inset 0 0 0 3px var(--utility-material-input),var(--utility-material-lamp-glow);
6379
+ }
6380
+
6381
+ .utility-radio input:checked, :where([data-ui="industrial-utility"]) .ui-radio input:checked {
6382
+ background: var(--utility-material-lamp-green);
6383
+ box-shadow: inset 0 0 0 4px var(--utility-material-input),var(--utility-material-lamp-glow);
6384
+ }
6385
+
6386
+ .utility-check input:indeterminate, :where([data-ui="industrial-utility"]) .ui-check input:indeterminate {
6387
+ background: linear-gradient(var(--utility-material-input) 40%,var(--utility-material-safety-amber) 40% 60%,var(--utility-material-input) 60%);
6388
+ }
6389
+
6390
+ .utility-check input:disabled, .utility-radio input:disabled, .utility-check.is-disabled, .utility-radio.is-disabled, :where([data-ui="industrial-utility"]) .ui-check input:disabled, :where([data-ui="industrial-utility"]) .ui-radio input:disabled, :where([data-ui="industrial-utility"]) .ui-check.is-disabled, :where([data-ui="industrial-utility"]) .ui-radio.is-disabled {
6391
+ cursor: not-allowed;
6392
+ opacity: .42;
6393
+ }
6394
+
6395
+ .utility-toggle {
6396
+ align-items: center;
6397
+ gap: 8px;
6398
+ display: inline-flex;
6399
+ }
6400
+
6401
+ .utility-toggle input {
6402
+ appearance: none;
6403
+ box-shadow: var(--utility-material-inset-shadow);
6404
+ cursor: pointer;
6405
+ background: linear-gradient(#303738, #777d7b);
6406
+ border: 1px solid #262b2c;
6407
+ border-radius: 18px;
6408
+ width: 48px;
6409
+ height: 24px;
6410
+ margin: 0;
6411
+ position: relative;
6412
+ }
6413
+
6414
+ .utility-toggle input:after {
6415
+ content: "";
6416
+ height: 20px;
6417
+ transition: left var(--utility-material-speed) var(--utility-material-ease);
6418
+ background: radial-gradient(circle at 36% 28%, #fff, #aaaead 57%, #535a5a 100%);
6419
+ border: 1px solid #323839;
6420
+ border-radius: 50%;
6421
+ width: 20px;
6422
+ position: absolute;
6423
+ top: 1px;
6424
+ left: 1px;
6425
+ box-shadow: 0 2px 3px #00000073;
6426
+ }
6427
+
6428
+ .utility-toggle input:checked {
6429
+ background: linear-gradient(#ffffff59,transparent),var(--utility-material-lamp-green);
6430
+ }
6431
+
6432
+ .utility-toggle input:checked:after {
6433
+ left: 25px;
6434
+ }
6435
+
6436
+ .utility-toggle input:disabled {
6437
+ opacity: .42;
6438
+ }
6439
+
6440
+ .utility-toggle span {
6441
+ color: var(--utility-material-text-soft);
6442
+ font: 800 9px var(--utility-material-font-display);
6443
+ text-transform: uppercase;
6444
+ }
6445
+
6446
+ .utility-three-position {
6447
+ background: var(--utility-material-surface-low);
6448
+ border: 1px solid var(--utility-material-line-strong);
6449
+ box-shadow: var(--utility-material-inset-shadow);
6450
+ grid-template-columns: repeat(3, 1fr);
6451
+ padding: 3px;
6452
+ display: inline-grid;
6453
+ }
6454
+
6455
+ .utility-three-position button {
6456
+ color: var(--utility-material-muted);
6457
+ cursor: pointer;
6458
+ font: 800 8px var(--utility-material-font-display);
6459
+ text-transform: uppercase;
6460
+ background: none;
6461
+ border: 0;
6462
+ min-width: 42px;
6463
+ padding: 7px 8px;
6464
+ }
6465
+
6466
+ .utility-three-position button.is-active {
6467
+ background: var(--utility-material-safety-amber);
6468
+ box-shadow: var(--utility-material-bevel);
6469
+ color: var(--utility-material-safety-ink);
6470
+ }
6471
+
6472
+ .utility-slider, [data-ui="industrial-utility"] input[type="range"] {
6473
+ appearance: none;
6474
+ background: linear-gradient(90deg,var(--utility-material-lamp-green)0 54%,var(--utility-material-safety-amber) 54% 75%,var(--utility-material-hazard-red) 75% 100%);
6475
+ border: 1px solid var(--utility-material-steel-dark);
6476
+ box-shadow: var(--utility-material-inset-shadow);
6477
+ width: 100%;
6478
+ height: 8px;
6479
+ }
6480
+
6481
+ .utility-slider::-webkit-slider-thumb {
6482
+ appearance: none;
6483
+ background: linear-gradient(90deg,var(--utility-material-steel),var(--utility-material-steel-light),var(--utility-material-steel));
6484
+ border: 1px solid var(--utility-material-steel-dark);
6485
+ box-shadow: var(--utility-material-bevel);
6486
+ cursor: ew-resize;
6487
+ border-radius: 1px;
6488
+ width: 12px;
6489
+ height: 24px;
6490
+ }
6491
+
6492
+ [data-ui="industrial-utility"] input[type="range"]::-webkit-slider-thumb {
6493
+ appearance: none;
6494
+ background: linear-gradient(90deg,var(--utility-material-steel),var(--utility-material-steel-light),var(--utility-material-steel));
6495
+ border: 1px solid var(--utility-material-steel-dark);
6496
+ box-shadow: var(--utility-material-bevel);
6497
+ cursor: ew-resize;
6498
+ border-radius: 1px;
6499
+ width: 12px;
6500
+ height: 24px;
6501
+ }
6502
+
6503
+ .utility-slider::-moz-range-thumb {
6504
+ background: var(--utility-material-steel);
6505
+ border: 1px solid var(--utility-material-steel-dark);
6506
+ box-shadow: var(--utility-material-bevel);
6507
+ border-radius: 1px;
6508
+ width: 10px;
6509
+ height: 22px;
6510
+ }
6511
+
6512
+ [data-ui="industrial-utility"] input[type="range"]::-moz-range-thumb {
6513
+ background: var(--utility-material-steel);
6514
+ border: 1px solid var(--utility-material-steel-dark);
6515
+ box-shadow: var(--utility-material-bevel);
6516
+ border-radius: 1px;
6517
+ width: 10px;
6518
+ height: 22px;
6519
+ }
6520
+
6521
+ .utility-ticks {
6522
+ color: var(--utility-material-muted);
6523
+ font: 7px var(--utility-material-font-mono);
6524
+ justify-content: space-between;
6525
+ margin-bottom: 4px;
6526
+ display: flex;
6527
+ }
6528
+
6529
+ .utility-readout {
6530
+ border: 1px solid var(--utility-material-steel-dark);
6531
+ box-shadow: var(--utility-material-inset-shadow);
6532
+ color: var(--utility-material-readout-ink);
6533
+ font: 700 15px/1 var(--utility-material-font-mono);
6534
+ text-shadow: 0 0 6px #89e26285;
6535
+ background: #08100c;
6536
+ min-width: 74px;
6537
+ padding: 8px 10px;
6538
+ display: inline-flex;
6539
+ }
6540
+
6541
+ .utility-readout small {
6542
+ color: var(--utility-material-readout-ink);
6543
+ margin-left: auto;
6544
+ padding-left: 8px;
6545
+ font-size: 8px;
6546
+ }
6547
+
6548
+ .utility-meter {
6549
+ background: var(--utility-material-surface-low);
6550
+ border: 1px solid var(--utility-material-line-strong);
6551
+ box-shadow: var(--utility-material-inset-shadow);
6552
+ height: 14px;
6553
+ position: relative;
6554
+ overflow: hidden;
6555
+ }
6556
+
6557
+ .utility-meter > span {
6558
+ background: repeating-linear-gradient(90deg,transparent 0 16px,#00000059 16px 18px),var(--utility-material-lamp-green);
6559
+ height: 100%;
6560
+ display: block;
6561
+ }
6562
+
6563
+ .utility-meter.is-warning > span {
6564
+ background: var(--utility-material-safety-amber);
6565
+ }
6566
+
6567
+ .utility-meter.is-danger > span {
6568
+ background: var(--utility-material-hazard-red);
6569
+ }
6570
+
6571
+ .utility-meter:after {
6572
+ content: "";
6573
+ background: repeating-linear-gradient(90deg, #0000 0 9.2%, #00000073 9.2% 10%);
6574
+ position: absolute;
6575
+ inset: 0;
6576
+ }
6577
+
6578
+ .utility-progress, [data-ui="industrial-utility"] progress, :where([data-ui="industrial-utility"]) .ui-progress {
6579
+ appearance: none;
6580
+ background: var(--utility-material-surface-low);
6581
+ border: 1px solid var(--utility-material-line-strong);
6582
+ box-shadow: var(--utility-material-inset-shadow);
6583
+ border-radius: 0;
6584
+ width: 100%;
6585
+ height: 13px;
6586
+ overflow: hidden;
6587
+ }
6588
+
6589
+ .utility-progress::-webkit-progress-bar, :where([data-ui="industrial-utility"]) .ui-progress::-webkit-progress-bar {
6590
+ background: var(--utility-material-surface-low);
6591
+ }
6592
+
6593
+ [data-ui="industrial-utility"] progress::-webkit-progress-bar {
6594
+ background: var(--utility-material-surface-low);
6595
+ }
6596
+
6597
+ .utility-progress::-webkit-progress-value, :where([data-ui="industrial-utility"]) .ui-progress::-webkit-progress-value {
6598
+ background: var(--utility-material-lamp-green);
6599
+ }
6600
+
6601
+ [data-ui="industrial-utility"] progress::-webkit-progress-value {
6602
+ background: var(--utility-material-lamp-green);
6603
+ }
6604
+
6605
+ .utility-progress::-moz-progress-bar, :where([data-ui="industrial-utility"]) .ui-progress::-moz-progress-bar {
6606
+ background: var(--utility-material-lamp-green);
6607
+ }
6608
+
6609
+ [data-ui="industrial-utility"] progress::-moz-progress-bar {
6610
+ background: var(--utility-material-lamp-green);
6611
+ }
6612
+
6613
+ .utility-stage-track {
6614
+ grid-template-columns: repeat(4, 1fr);
6615
+ margin-top: 9px;
6616
+ display: grid;
6617
+ position: relative;
6618
+ }
6619
+
6620
+ .utility-stage-track:before {
6621
+ background: var(--utility-material-line-strong);
6622
+ content: "";
6623
+ height: 2px;
6624
+ position: absolute;
6625
+ top: 8px;
6626
+ left: 12%;
6627
+ right: 12%;
6628
+ }
6629
+
6630
+ .utility-stage {
6631
+ color: var(--utility-material-muted);
6632
+ font: 7px var(--utility-material-font-display);
6633
+ text-align: center;
6634
+ text-transform: uppercase;
6635
+ z-index: 1;
6636
+ position: relative;
6637
+ }
6638
+
6639
+ .utility-stage b {
6640
+ background: var(--utility-material-surface-low);
6641
+ border: 1px solid var(--utility-material-line-strong);
6642
+ border-radius: 50%;
6643
+ justify-content: center;
6644
+ align-items: center;
6645
+ width: 18px;
6646
+ height: 18px;
6647
+ margin: 0 auto 4px;
6648
+ display: flex;
6649
+ }
6650
+
6651
+ .utility-stage.is-complete b, .utility-stage.is-current b {
6652
+ background: var(--utility-material-lamp-green);
6653
+ color: #0c1707;
6654
+ box-shadow: var(--utility-material-lamp-glow);
6655
+ border-color: #2f5b1e;
6656
+ }
6657
+
6658
+ .utility-stage.is-current b {
6659
+ background: var(--utility-material-safety-amber);
6660
+ box-shadow: none;
6661
+ }
6662
+
6663
+ .utility-tabs {
6664
+ border-bottom: 1px solid var(--utility-material-line-strong);
6665
+ align-items: stretch;
6666
+ gap: 1px;
6667
+ display: flex;
6668
+ }
6669
+
6670
+ .utility-tab {
6671
+ background: var(--utility-material-surface-low);
6672
+ border: 1px solid var(--utility-material-line);
6673
+ color: var(--utility-material-muted);
6674
+ cursor: pointer;
6675
+ font: 800 9px var(--utility-material-font-display);
6676
+ text-transform: uppercase;
6677
+ border-bottom: 0;
6678
+ min-height: 30px;
6679
+ padding: 0 13px;
6680
+ }
6681
+
6682
+ .utility-tab.is-active, .utility-tab[aria-selected="true"] {
6683
+ background: var(--utility-material-surface-raised);
6684
+ color: var(--utility-material-text);
6685
+ position: relative;
6686
+ }
6687
+
6688
+ .utility-tab.is-active:before, .utility-tab[aria-selected="true"]:before {
6689
+ background: var(--utility-material-safety-amber);
6690
+ content: "";
6691
+ height: 3px;
6692
+ position: absolute;
6693
+ top: -1px;
6694
+ left: -1px;
6695
+ right: -1px;
6696
+ }
6697
+
6698
+ .utility-breadcrumb {
6699
+ color: var(--utility-material-muted);
6700
+ font: 8px var(--utility-material-font-mono);
6701
+ text-transform: uppercase;
6702
+ align-items: center;
6703
+ gap: 7px;
6704
+ display: flex;
6705
+ }
6706
+
6707
+ .utility-breadcrumb b {
6708
+ color: var(--utility-material-text);
6709
+ }
6710
+
6711
+ .utility-breadcrumb i {
6712
+ color: var(--utility-material-warning);
6713
+ font-style: normal;
6714
+ }
6715
+
6716
+ .utility-pagination, .utility-segmented {
6717
+ display: inline-flex;
6718
+ }
6719
+
6720
+ .utility-pagination button, .utility-segmented button {
6721
+ background: var(--utility-material-surface-low);
6722
+ border: 1px solid var(--utility-material-line-strong);
6723
+ color: var(--utility-material-text-soft);
6724
+ cursor: pointer;
6725
+ font: 800 9px var(--utility-material-font-display);
6726
+ min-width: 29px;
6727
+ height: 29px;
6728
+ padding: 0 8px;
6729
+ }
6730
+
6731
+ .utility-pagination button + button, .utility-segmented button + button {
6732
+ border-left: 0;
6733
+ }
6734
+
6735
+ .utility-pagination button.is-active, .utility-segmented button.is-active {
6736
+ background: var(--utility-material-safety-amber);
6737
+ color: var(--utility-material-safety-ink);
6738
+ }
6739
+
6740
+ .utility-badge, :where([data-ui="industrial-utility"]) .ui-badge {
6741
+ background: var(--utility-material-surface-low);
6742
+ border: 1px solid var(--utility-material-line-strong);
6743
+ color: var(--utility-material-text-soft);
6744
+ font: 900 8px var(--utility-material-font-display);
6745
+ letter-spacing: 0;
6746
+ text-transform: uppercase;
6747
+ border-radius: 1px;
6748
+ align-items: center;
6749
+ height: 22px;
6750
+ padding: 0 7px;
6751
+ display: inline-flex;
6752
+ }
6753
+
6754
+ .utility-badge-success, .utility-badge-success, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="success"]) {
6755
+ background: var(--utility-material-badge-success);
6756
+ border-color: var(--utility-material-lamp-green);
6757
+ color: var(--utility-material-badge-success-ink);
6758
+ }
6759
+
6760
+ .utility-badge-primary, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="primary"]) {
6761
+ background: var(--utility-material-badge-info);
6762
+ border-color: var(--utility-material-lamp-blue);
6763
+ color: var(--utility-material-badge-info-ink);
6764
+ }
6765
+
6766
+ .utility-badge-warning, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="warning"]) {
6767
+ background: var(--utility-material-badge-warning);
6768
+ border-color: var(--utility-material-safety-amber);
6769
+ color: var(--utility-material-badge-warning-ink);
6770
+ }
6771
+
6772
+ .utility-badge-danger, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="danger"]) {
6773
+ background: var(--utility-material-badge-danger);
6774
+ border-color: var(--utility-material-hazard-red);
6775
+ color: var(--utility-material-badge-danger-ink);
6776
+ }
6777
+
6778
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
6779
+ border: 1px solid var(--utility-material-line-strong);
6780
+ box-shadow: var(--utility-material-inset-shadow);
6781
+ overflow: auto;
6782
+ }
6783
+
6784
+ .utility-table, :where([data-ui="industrial-utility"]) .ui-table {
6785
+ border-collapse: collapse;
6786
+ font: 9px var(--utility-material-font-body);
6787
+ width: 100%;
6788
+ }
6789
+
6790
+ .utility-table th, :where([data-ui="industrial-utility"]) .ui-table th {
6791
+ background: var(--utility-material-header);
6792
+ border-bottom: 1px solid var(--utility-material-line-strong);
6793
+ color: var(--utility-material-header-ink);
6794
+ font: 800 8px var(--utility-material-font-display);
6795
+ letter-spacing: 0;
6796
+ text-align: left;
6797
+ text-transform: uppercase;
6798
+ padding: 7px 8px;
6799
+ }
6800
+
6801
+ .utility-table td, :where([data-ui="industrial-utility"]) .ui-table td {
6802
+ border-bottom: 1px solid var(--utility-material-line);
6803
+ color: var(--utility-material-text-soft);
6804
+ padding: 6px 8px;
6805
+ }
6806
+
6807
+ .utility-table tr:last-child td, :where([data-ui="industrial-utility"]) .ui-table tr:last-child td {
6808
+ border-bottom: 0;
6809
+ }
6810
+
6811
+ .utility-table tbody tr:nth-child(2n), :where([data-ui="industrial-utility"]) .ui-table tbody tr:nth-child(2n) {
6812
+ background: rgb(var(--utility-surface-soft-rgb)/.48);
6813
+ }
6814
+
6815
+ .utility-table tbody tr:hover, :where([data-ui="industrial-utility"]) .ui-table tbody tr:hover {
6816
+ background: rgb(var(--utility-primary-rgb)/.12);
6817
+ }
6818
+
6819
+ .utility-alert, :where([data-ui="industrial-utility"]) .ui-alert {
6820
+ background: var(--utility-material-surface-low);
6821
+ border: 1px solid var(--utility-material-line-strong);
6822
+ border-left: 5px solid var(--utility-material-lamp-blue);
6823
+ box-shadow: var(--utility-material-bevel);
6824
+ color: var(--utility-material-text-soft);
6825
+ font: 10px var(--utility-material-font-body);
6826
+ align-items: center;
6827
+ gap: 8px;
6828
+ min-height: 38px;
6829
+ padding: 7px 9px;
6830
+ display: flex;
6831
+ }
6832
+
6833
+ .utility-alert strong, :where([data-ui="industrial-utility"]) .ui-alert strong {
6834
+ color: var(--utility-material-text);
6835
+ font: 900 9px var(--utility-material-font-display);
6836
+ letter-spacing: 0;
6837
+ text-transform: uppercase;
6838
+ display: block;
6839
+ }
6840
+
6841
+ .utility-alert > div, :where([data-ui="industrial-utility"]) .ui-alert>div {
6842
+ flex: 1;
6843
+ min-width: 0;
6844
+ }
6845
+
6846
+ .utility-alert .utility-pilot-light, :where([data-ui="industrial-utility"]) .ui-alert .utility-pilot-light {
6847
+ width: 13px;
6848
+ height: 13px;
6849
+ }
6850
+
6851
+ .utility-alert-success, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="success"]) {
6852
+ border-left-color: var(--utility-material-lamp-green);
6853
+ }
6854
+
6855
+ .utility-alert-warning, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="warning"]) {
6856
+ border-left-color: var(--utility-material-warning);
6857
+ background: linear-gradient(rgb(var(--utility-warning-rgb)/.12),rgb(var(--utility-warning-rgb)/.12)),var(--utility-material-surface);
6858
+ }
6859
+
6860
+ .utility-alert-info {
6861
+ border-left-color: var(--utility-material-lamp-blue);
6862
+ }
6863
+
6864
+ .utility-alert-danger, :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]) {
6865
+ border-left-color: var(--utility-material-hazard-red);
6866
+ }
6867
+
6868
+ .utility-toast-stack {
6869
+ gap: 7px;
6870
+ display: grid;
6871
+ }
6872
+
6873
+ .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
6874
+ color: #dde0db;
6875
+ font: 9px/1.35 var(--utility-material-font-body);
6876
+ background: #111718;
6877
+ border: 1px solid #697173;
6878
+ max-width: 180px;
6879
+ padding: 8px 10px;
6880
+ position: relative;
6881
+ box-shadow: 0 5px 12px #00000073;
6882
+ }
6883
+
6884
+ .utility-tooltip:before {
6885
+ content: "";
6886
+ background: #111718;
6887
+ border-top: 1px solid #697173;
6888
+ border-left: 1px solid #697173;
6889
+ width: 9px;
6890
+ height: 9px;
6891
+ position: absolute;
6892
+ top: -6px;
6893
+ left: 18px;
6894
+ transform: rotate(45deg);
6895
+ }
6896
+
6897
+ .utility-popover {
6898
+ max-width: 240px;
6899
+ padding: 11px;
6900
+ }
6901
+
6902
+ .utility-dialog {
6903
+ padding: 11px;
6904
+ }
6905
+
6906
+ .utility-dialog header {
6907
+ border-bottom: 1px solid var(--utility-material-line);
6908
+ font: 900 11px var(--utility-material-font-display);
6909
+ letter-spacing: 0;
6910
+ text-transform: uppercase;
6911
+ align-items: center;
6912
+ padding-bottom: 8px;
6913
+ display: flex;
6914
+ }
6915
+
6916
+ .utility-dialog header:before {
6917
+ background: var(--utility-material-hazard-red);
6918
+ content: "";
6919
+ width: 4px;
6920
+ height: 11px;
6921
+ margin-right: 7px;
6922
+ }
6923
+
6924
+ .utility-dialog p {
6925
+ color: var(--utility-material-text-soft);
6926
+ margin: 11px 0;
6927
+ font-size: 10px;
6928
+ }
6929
+
6930
+ .utility-dialog footer {
6931
+ justify-content: flex-end;
6932
+ gap: 8px;
6933
+ display: flex;
6934
+ }
6935
+
6936
+ .utility-card, :where([data-ui="industrial-utility"]) .ui-card {
6937
+ padding: 11px;
6938
+ }
6939
+
6940
+ .utility-card h4, :where([data-ui="industrial-utility"]) .ui-card h4 {
6941
+ font: 900 11px var(--utility-material-font-display);
6942
+ letter-spacing: 0;
6943
+ text-transform: uppercase;
6944
+ margin: 0 0 7px;
6945
+ }
6946
+
6947
+ .utility-card p, :where([data-ui="industrial-utility"]) .ui-card p {
6948
+ color: var(--utility-material-text-soft);
6949
+ margin: 0;
6950
+ font-size: 10px;
6951
+ line-height: 1.35;
6952
+ }
6953
+
6954
+ .utility-details, [data-ui="industrial-utility"] details {
6955
+ background: var(--utility-material-surface-low);
6956
+ border: 1px solid var(--utility-material-line-strong);
6957
+ box-shadow: var(--utility-material-inset-shadow);
6958
+ color: var(--utility-material-text-soft);
6959
+ padding: 8px 10px;
6960
+ font-size: 10px;
6961
+ }
6962
+
6963
+ .utility-details summary, [data-ui="industrial-utility"] summary {
6964
+ color: var(--utility-material-text);
6965
+ cursor: pointer;
6966
+ font: 900 9px var(--utility-material-font-display);
6967
+ letter-spacing: 0;
6968
+ text-transform: uppercase;
6969
+ }
6970
+
6971
+ .utility-token-row {
6972
+ grid-template-columns: repeat(6, minmax(0, 1fr));
6973
+ gap: 6px;
6974
+ display: grid;
6975
+ }
6976
+
6977
+ .utility-token {
6978
+ min-width: 0;
6979
+ }
6980
+
6981
+ .utility-token i {
6982
+ border: 1px solid var(--utility-material-line-strong);
6983
+ box-shadow: var(--utility-material-bevel);
6984
+ height: 24px;
6985
+ display: block;
6986
+ }
6987
+
6988
+ .utility-token span {
6989
+ color: var(--utility-material-muted);
6990
+ font: 6px var(--utility-material-font-mono);
6991
+ text-align: center;
6992
+ text-overflow: ellipsis;
6993
+ white-space: nowrap;
6994
+ margin-top: 4px;
6995
+ display: block;
6996
+ overflow: hidden;
6997
+ }
6998
+
6999
+ .utility-skeleton {
7000
+ background: linear-gradient(90deg,var(--utility-material-surface-low),var(--utility-material-surface-raised),var(--utility-material-surface-low));
7001
+ border: 1px solid var(--utility-material-line);
7002
+ height: 11px;
7003
+ animation: 1.2s ease-in-out infinite alternate utility-material-pulse;
7004
+ }
7005
+
7006
+ @keyframes utility-material-pulse {
7007
+ to {
7008
+ opacity: .45;
7009
+ }
7010
+ }
7011
+
7012
+ .utility-empty-state {
7013
+ color: var(--utility-material-muted);
7014
+ font: 700 9px var(--utility-material-font-display);
7015
+ text-align: center;
7016
+ text-transform: uppercase;
7017
+ flex-direction: column;
7018
+ justify-content: center;
7019
+ align-items: center;
7020
+ gap: 7px;
7021
+ min-height: 74px;
7022
+ display: flex;
7023
+ }
7024
+
7025
+ .utility-empty-state .utility-pilot-light {
7026
+ width: 18px;
7027
+ height: 18px;
7028
+ }
7029
+
7030
+ .utility-sr-only {
7031
+ clip: rect(0,0,0,0);
7032
+ clip-path: inset(50%);
7033
+ white-space: nowrap;
7034
+ width: 1px;
7035
+ height: 1px;
7036
+ position: absolute;
7037
+ overflow: hidden;
7038
+ }
7039
+
7040
+ @media (prefers-reduced-motion: reduce) {
7041
+ [data-ui="industrial-utility"] *, [data-ui="industrial-utility"] :before, [data-ui="industrial-utility"] :after {
7042
+ scroll-behavior: auto !important;
7043
+ transition-duration: .001ms !important;
7044
+ animation-duration: .001ms !important;
7045
+ animation-iteration-count: 1 !important;
7046
+ }
7047
+ }
7048
+
7049
+ @media (max-width: 760px) {
7050
+ .utility-control-grid {
7051
+ grid-template-columns: repeat(2, minmax(0, 1fr));
7052
+ }
7053
+
7054
+ .utility-token-row {
7055
+ grid-template-columns: repeat(3, minmax(0, 1fr));
7056
+ }
7057
+
7058
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
7059
+ overflow-x: auto;
7060
+ }
7061
+
7062
+ .utility-button, :where([data-ui="industrial-utility"]) .ui-button {
7063
+ min-width: 72px;
7064
+ padding-inline: 10px;
7065
+ }
7066
+ }
7067
+
7068
+ .utility-panel {
7069
+ background: var(--utility-material-surface);
7070
+ padding: 0;
7071
+ }
7072
+
7073
+ .utility-card, .utility-panel, :where([data-ui="industrial-utility"]) .ui-card {
7074
+ clip-path: none;
7075
+ }
7076
+
7077
+ .utility-panel:after, .utility-card:after, :where([data-ui="industrial-utility"]) .ui-card:after {
7078
+ content: none;
7079
+ }
7080
+
7081
+ .utility-button, .utility-icon-button, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-icon-button {
7082
+ min-height: 34px;
7083
+ min-block-size: 34px;
7084
+ line-height: 1;
7085
+ }
7086
+
7087
+ .utility-button-primary, .utility-button-danger, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="primary"]), :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="danger"]) {
7088
+ text-shadow: none;
7089
+ }
7090
+
7091
+ .utility-button-secondary, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="secondary"]) {
7092
+ color: rgb(var(--usk-secondary-text-rgb, 19 23 25));
7093
+ background: linear-gradient(rgb(var(--usk-secondary-rgb, 231 233 230)),rgb(var(--usk-secondary-rgb, 146 154 152)));
7094
+ }
7095
+
7096
+ [data-ui="industrial-utility"][data-mode="dark"] .utility-button-secondary, :where([data-ui="industrial-utility"])[data-mode="dark"] .ui-button:where([data-ui-variant="secondary"]) {
7097
+ color: rgb(var(--usk-secondary-text-rgb, 255 255 255));
7098
+ background: linear-gradient(rgb(var(--usk-secondary-rgb, 104 114 116)),rgb(var(--usk-secondary-rgb, 66 76 79)));
7099
+ }
7100
+
7101
+ .utility-button.utility-button-guarded, :where([data-ui="industrial-utility"]) .ui-button.utility-button-guarded {
7102
+ background: repeating-linear-gradient(-45deg,var(--utility-material-safety-amber)0 7px,#201f19 7px 14px);
7103
+ }
7104
+
7105
+ .utility-button-ghost, :where([data-ui="industrial-utility"]) .ui-button:where([data-ui-variant="ghost"]) {
7106
+ color: var(--utility-material-text);
7107
+ }
7108
+
7109
+ .utility-button[aria-busy="true"]:after, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:after {
7110
+ content: none;
7111
+ }
7112
+
7113
+ .utility-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before {
7114
+ flex: 0 0 14px;
7115
+ padding: 0;
7116
+ }
7117
+
7118
+ .utility-input, .utility-select, .utility-textarea, :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-select, :where([data-ui="industrial-utility"]) .ui-textarea {
7119
+ min-height: 34px;
7120
+ min-block-size: 34px;
7121
+ font-size: 14px;
7122
+ }
7123
+
7124
+ .utility-label, .utility-help, .utility-control-name, :where([data-ui="industrial-utility"]) .ui-label {
7125
+ font-size: 12px;
7126
+ line-height: 1.3;
7127
+ }
7128
+
7129
+ .utility-button, .utility-tab, :where([data-ui="industrial-utility"]) .ui-button {
7130
+ font-size: 12px;
7131
+ }
7132
+
7133
+ .utility-badge, :where([data-ui="industrial-utility"]) .ui-badge {
7134
+ min-height: 22px;
7135
+ box-shadow: none;
7136
+ line-height: 1;
7137
+ }
7138
+
7139
+ .utility-table th, .utility-table td, :where([data-ui="industrial-utility"]) .ui-table th, :where([data-ui="industrial-utility"]) .ui-table td {
7140
+ border-inline: 1px solid var(--utility-material-line);
7141
+ }
7142
+
7143
+ .utility-table th, :where([data-ui="industrial-utility"]) .ui-table th {
7144
+ background: var(--utility-material-header);
7145
+ color: var(--utility-material-header-ink);
7146
+ }
7147
+
7148
+ .utility-table td, :where([data-ui="industrial-utility"]) .ui-table td {
7149
+ background: none;
7150
+ }
7151
+
7152
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
7153
+ border-radius: 1px;
7154
+ overflow-x: auto;
7155
+ }
7156
+
7157
+ .utility-check input, .utility-radio input, :where([data-ui="industrial-utility"]) .ui-check input, :where([data-ui="industrial-utility"]) .ui-radio input {
7158
+ flex: 0 0 15px;
7159
+ min-inline-size: 15px;
7160
+ }
7161
+
7162
+ .utility-check input:not(:has( + .utility-check-control)), .utility-radio input:not(:has( + .utility-radio-control)), :where([data-ui="industrial-utility"]) .ui-check input:not(:has(+.ui-check-control)), :where([data-ui="industrial-utility"]) .ui-radio input:not(:has(+.ui-radio-control)) {
7163
+ opacity: 1;
7164
+ pointer-events: auto;
7165
+ position: static;
7166
+ }
7167
+
7168
+ [data-ui="industrial-utility"] input[type="range"] {
7169
+ min-block-size: 24px;
7170
+ height: 24px;
7171
+ box-shadow: none;
7172
+ background: none;
7173
+ border: 0;
7174
+ padding: 0;
7175
+ }
7176
+
7177
+ [data-ui="industrial-utility"] input[type="range"]::-webkit-slider-runnable-track {
7178
+ background: linear-gradient(90deg,var(--utility-material-lamp-green)0 54%,var(--utility-material-safety-amber) 54% 75%,var(--utility-material-hazard-red) 75% 100%);
7179
+ border: 1px solid var(--utility-material-steel-dark);
7180
+ height: 8px;
7181
+ box-shadow: var(--utility-material-inset-shadow);
7182
+ }
7183
+
7184
+ [data-ui="industrial-utility"] input[type="range"]::-webkit-slider-thumb {
7185
+ margin-top: -8px;
7186
+ }
7187
+
7188
+ [data-ui="industrial-utility"] input[type="range"]::-moz-range-track {
7189
+ background: linear-gradient(90deg,var(--utility-material-lamp-green)0 54%,var(--utility-material-safety-amber) 54% 75%,var(--utility-material-hazard-red) 75% 100%);
7190
+ border: 1px solid var(--utility-material-steel-dark);
7191
+ height: 8px;
7192
+ box-shadow: var(--utility-material-inset-shadow);
7193
+ }
7194
+
7195
+ [data-ui="industrial-utility"] :is(.utility-pagination, .utility-segmented) button {
7196
+ border-color: var(--utility-material-line-strong);
7197
+ }
7198
+
7199
+ .utility-nameplate {
7200
+ white-space: nowrap;
7201
+ flex-shrink: 0;
7202
+ }
7203
+
7204
+ .utility-popover h3 {
7205
+ font: 800 12px var(--utility-material-font-display);
7206
+ text-transform: uppercase;
7207
+ margin: 0 0 8px;
7208
+ }
7209
+
7210
+ .utility-toggle input {
7211
+ flex: 0 0 48px;
7212
+ min-block-size: 24px;
7213
+ min-inline-size: 48px;
7214
+ }
7215
+
7216
+ .utility-toggle input:after {
7217
+ box-sizing: border-box;
7218
+ }
7219
+
7220
+ .utility-stage {
7221
+ margin: 0;
7222
+ }
7223
+
7224
+ .utility-stage b {
7225
+ color: var(--utility-material-text);
7226
+ }
7227
+
7228
+ .utility-stage.is-complete b {
7229
+ color: var(--utility-on-success);
7230
+ }
7231
+
7232
+ .utility-stage.is-current b {
7233
+ color: var(--utility-on-primary);
7234
+ }
7235
+
7236
+ .utility-alert, :where([data-ui="industrial-utility"]) .ui-alert {
7237
+ box-shadow: var(--utility-material-bevel);
7238
+ }
7239
+
7240
+ .utility-alert, .utility-alert strong, .utility-dialog p, .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]), :where([data-ui="industrial-utility"]) .ui-alert, :where([data-ui="industrial-utility"]) .ui-alert strong {
7241
+ font-size: 14px;
7242
+ line-height: 1.4;
7243
+ }
7244
+
7245
+ .utility-spinner {
7246
+ clip-path: none;
7247
+ width: 20px;
7248
+ height: 20px;
7249
+ box-shadow: none;
7250
+ background: none;
7251
+ flex: 0 0 20px;
7252
+ display: inline-block;
7253
+ }
7254
+
7255
+ .utility-dropdown {
7256
+ background: var(--utility-material-input);
7257
+ border: 1px solid var(--utility-material-line-strong);
7258
+ box-shadow: var(--utility-material-inset-shadow);
7259
+ padding: 0;
7260
+ }
7261
+
7262
+ .utility-option {
7263
+ width: 100%;
7264
+ color: var(--utility-material-text);
7265
+ text-align: left;
7266
+ font: 14px var(--utility-font-body);
7267
+ background: none;
7268
+ border: 0;
7269
+ border-radius: 0;
7270
+ padding: 8px;
7271
+ display: block;
7272
+ }
7273
+
7274
+ .utility-option[aria-selected="true"] {
7275
+ background: var(--utility-material-badge-info);
7276
+ color: var(--utility-material-badge-info-ink);
7277
+ }
7278
+
7279
+ .utility-nameplate {
7280
+ min-block-size: 50px;
7281
+ min-inline-size: 92px;
7282
+ color: var(--utility-material-header-ink);
7283
+ border: 1px solid var(--utility-material-safety-amber);
7284
+ background: repeating-linear-gradient(-45deg,var(--utility-material-safety-amber)0 7px,var(--utility-material-header) 7px 14px);
7285
+ font: 900 14px var(--utility-font-display);
7286
+ justify-content: center;
7287
+ align-items: center;
7288
+ padding: 8px;
7289
+ display: inline-flex;
7290
+ }
7291
+
7292
+ .utility-nameplate > span {
7293
+ background: var(--utility-material-header);
7294
+ padding: 7px;
7295
+ }
7296
+
7297
+ .utility-key-switch {
7298
+ --utility-key-angle: -28deg;
7299
+ min-height: 48px;
7300
+ padding: 0;
7301
+ }
7302
+
7303
+ .utility-key-switch:after {
7304
+ height: 28px;
7305
+ transform: rotate(var(--utility-key-angle));
7306
+ }
7307
+
7308
+ .utility-key-switch[data-position="on"] {
7309
+ --utility-key-angle: 28deg;
7310
+ }
7311
+
7312
+ .utility-key-switch[data-position="off"] {
7313
+ --utility-key-angle: -60deg;
7314
+ }
7315
+
7316
+ .utility-emergency-stop {
7317
+ flex: 0 0 48px;
7318
+ min-height: 48px;
7319
+ padding: 0;
7320
+ }
7321
+
7322
+ .utility-readout {
7323
+ text-shadow: none;
7324
+ background-color: #08100c;
7325
+ }
7326
+
7327
+ .utility-readout output {
7328
+ color: var(--utility-material-readout-ink);
7329
+ }
7330
+
7331
+ .utility-table-wrap, :where([data-ui="industrial-utility"]) .ui-table-wrap {
7332
+ padding: 0;
7333
+ }
7334
+
7335
+ [data-ui="industrial-utility"] :is(.utility-three-position, .utility-pagination, .utility-segmented) button {
7336
+ background: var(--utility-material-surface-low);
7337
+ border: 1px solid var(--utility-material-line-strong);
7338
+ color: var(--utility-material-text-soft);
7339
+ box-shadow: none;
7340
+ }
7341
+
7342
+ [data-ui="industrial-utility"] :is(.utility-three-position, .utility-pagination, .utility-segmented) button.is-active {
7343
+ background: var(--utility-material-safety-amber);
7344
+ color: var(--utility-material-safety-ink);
7345
+ }
7346
+
7347
+ [data-ui="industrial-utility"] .utility-input[aria-invalid="true"], :where([data-ui="industrial-utility"]) .ui-input[aria-invalid="true"] {
7348
+ border: 2px solid var(--utility-material-hazard-red);
7349
+ }
7350
+
7351
+ .utility-tooltip, [data-ui="industrial-utility"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
7352
+ opacity: 1;
7353
+ visibility: visible;
7354
+ inset: auto;
7355
+ transform: none;
7356
+ }
7357
+
7358
+ .utility-toast {
7359
+ align-items: center;
7360
+ gap: 8px;
7361
+ padding: 12px;
7362
+ display: flex;
7363
+ }
7364
+
7365
+ .utility-dialog::backdrop {
7366
+ background: #000000a6;
7367
+ }
7368
+
7369
+ dialog.utility-dialog:not([open]) {
7370
+ display: none;
7371
+ }
7372
+
7373
+ div.utility-dialog {
7374
+ display: block;
7375
+ }
7376
+
7377
+ [data-ui="industrial-utility"][data-mode] :where(fieldset, article, aside) {
7378
+ background-image: none;
7379
+ }
7380
+
7381
+ .utility-callout-bar > .utility-button.utility-button-outline-heavy, :where([data-ui="industrial-utility"]) .utility-callout-bar>.ui-button.utility-button-outline-heavy {
7382
+ background: linear-gradient(180deg,var(--utility-material-surface-raised),var(--utility-material-surface-low));
7383
+ color: var(--utility-material-text);
7384
+ border: 1px solid var(--utility-material-line-strong);
7385
+ border-radius: var(--utility-material-radius);
7386
+ clip-path: none;
7387
+ box-shadow: var(--utility-material-bevel);
7388
+ }
7389
+
7390
+ .utility-callout-bar > .utility-button.utility-button-outline-heavy:is(:hover, :focus-visible), :where([data-ui="industrial-utility"]) .utility-callout-bar>.ui-button.utility-button-outline-heavy:is(:hover,:focus-visible) {
7391
+ background: linear-gradient(180deg,var(--utility-primary-hover),var(--utility-primary));
7392
+ color: var(--utility-on-primary);
7393
+ border-color: var(--utility-primary);
7394
+ }
7395
+
7396
+ .utility-callout-bar > .utility-icon-medallion {
7397
+ justify-content: center;
7398
+ align-items: center;
7399
+ display: flex;
7400
+ }
7401
+
7402
+ .utility-badge-seal > strong {
7403
+ font-size: 13px;
7404
+ }
7405
+
7406
+ .utility-badge-seal > small {
7407
+ font-size: 11px;
7408
+ }
7409
+
7410
+ .utility-badge-warning, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="warning"]) {
7411
+ border-color: var(--utility-warning);
7412
+ box-shadow: 0 0 0 1px rgb(var(--utility-warning-rgb)/.28);
7413
+ font-size: 10px;
7414
+ animation: 1.1s steps(2, end) infinite utility-warning-signal;
7415
+ }
7416
+
7417
+ @keyframes utility-warning-signal {
7418
+ 50% {
7419
+ box-shadow: 0 0 0 2px rgb(var(--utility-warning-rgb)/.6),0 0 8px rgb(var(--utility-warning-rgb)/.42);
7420
+ filter: brightness(1.25);
7421
+ }
7422
+ }
7423
+
7424
+ .utility-tooltip-top:before {
7425
+ inset: auto auto -5px 50%;
7426
+ transform: translateX(-50%) rotate(45deg);
7427
+ }
7428
+
7429
+ .utility-tooltip-right:before {
7430
+ inset: 50% auto auto -5px;
7431
+ transform: translateY(-50%) rotate(45deg);
7432
+ }
7433
+
7434
+ .utility-tooltip-bottom:before {
7435
+ inset: -5px auto auto 50%;
7436
+ transform: translateX(-50%) rotate(45deg);
7437
+ }
7438
+
7439
+ .utility-tooltip-left:before {
7440
+ inset: 50% -5px auto auto;
7441
+ transform: translateY(-50%) rotate(45deg);
7442
+ }
7443
+
7444
+ [data-ui="industrial-utility"][data-mode] input[type="time"] {
7445
+ background-image: linear-gradient(180deg,var(--utility-material-surface-raised),var(--utility-material-input));
7446
+ }
7447
+
7448
+ [data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked {
7449
+ background-color: var(--utility-material-lamp-green);
7450
+ border-color: var(--utility-material-steel-dark);
7451
+ }
7452
+
7453
+ @media (prefers-reduced-motion: reduce) {
7454
+ .utility-spinner, .utility-skeleton, .utility-button.is-loading:before, .utility-badge-warning, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="warning"]) {
7455
+ animation: none !important;
7456
+ }
7457
+ }
7458
+
7459
+ .utility-button.is-alarm, .utility-badge-danger, .utility-alert-danger, .utility-pilot-light.is-red:not(.is-off), :where([data-ui="industrial-utility"]) .ui-button.is-alarm, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="danger"]), :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]) {
7460
+ animation: 1.1s steps(2, end) infinite utility-danger-signal;
7461
+ }
7462
+
7463
+ @keyframes utility-danger-signal {
7464
+ 50% {
7465
+ box-shadow: 0 0 0 2px rgb(var(--utility-danger-rgb)/.6),0 0 8px rgb(var(--utility-danger-rgb)/.42);
7466
+ filter: brightness(1.25);
7467
+ }
7468
+ }
7469
+
7470
+ .utility-spinner, .utility-loading-spinner, [data-ui="industrial-utility"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]), .utility-button.is-loading:before, .utility-button[aria-busy="true"]:not(.is-loading):after, [data-ui="industrial-utility"] button:not([class])[aria-busy="true"]:after, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:not(.is-loading):after {
7471
+ content: "";
7472
+ background: conic-gradient(currentColor 0 12.5%,transparent 0 25%,currentColor 0 37.5%,transparent 0 50%,currentColor 0 62.5%,transparent 0 75%,currentColor 0 87.5%,transparent 0);
7473
+ clip-path: polygon(30% 0, 70% 0, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0 70%, 0 30%);
7474
+ box-shadow: none;
7475
+ border: 0;
7476
+ border-radius: 0;
7477
+ flex-shrink: 0;
7478
+ animation: .8s steps(8, end) infinite utility-spin;
7479
+ display: inline-block;
7480
+ }
7481
+
7482
+ .utility-button.is-loading:before, .utility-button[aria-busy="true"]:not(.is-loading):after, :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:not(.is-loading):after {
7483
+ flex-basis: 14px;
7484
+ block-size: 14px;
7485
+ inline-size: 14px;
7486
+ }
7487
+
7488
+ .utility-panel {
7489
+ padding: 16px;
7490
+ }
7491
+
7492
+ .utility-panel:has( > .utility-panel-body) {
7493
+ padding: 0;
7494
+ }
7495
+
7496
+ .utility-textarea, [data-ui="industrial-utility"] textarea, :where([data-ui="industrial-utility"]) .ui-textarea {
7497
+ line-height: 18px;
7498
+ }
7499
+
7500
+ .utility-textarea[rows="1"], [data-ui="industrial-utility"] textarea[rows="1"], :where([data-ui="industrial-utility"]) .ui-textarea[rows="1"] {
7501
+ box-sizing: border-box;
7502
+ height: 34px;
7503
+ min-height: 34px;
7504
+ padding-block: 7px;
7505
+ }
7506
+
7507
+ .utility-file, [data-ui="industrial-utility"][data-mode] input[type="file"] {
7508
+ box-sizing: border-box;
7509
+ height: 34px;
7510
+ background: var(--utility-material-input);
7511
+ border: 1px solid var(--utility-material-line-strong);
7512
+ min-block-size: 34px;
7513
+ box-shadow: var(--utility-material-inset-shadow);
7514
+ color: var(--utility-material-text);
7515
+ padding: 2px;
7516
+ line-height: 28px;
7517
+ }
7518
+
7519
+ .utility-file::file-selector-button {
7520
+ box-sizing: border-box;
7521
+ vertical-align: top;
7522
+ height: 28px;
7523
+ margin-block: 0;
7524
+ padding-block: 0;
7525
+ line-height: 26px;
7526
+ }
7527
+
7528
+ [data-ui="industrial-utility"][data-mode] input[type="file"]::file-selector-button {
7529
+ box-sizing: border-box;
7530
+ vertical-align: top;
7531
+ height: 28px;
7532
+ margin-block: 0;
7533
+ padding-block: 0;
7534
+ line-height: 26px;
7535
+ }
7536
+
7537
+ .utility-select[multiple], [data-ui="industrial-utility"][data-mode] select[multiple], :where([data-ui="industrial-utility"]) .ui-select[multiple] {
7538
+ background: var(--utility-material-input);
7539
+ height: auto;
7540
+ min-height: 88px;
7541
+ box-shadow: var(--utility-material-inset-shadow);
7542
+ padding: 6px;
7543
+ }
7544
+
7545
+ [data-ui="industrial-utility"][data-mode] select[multiple] option {
7546
+ background: none;
7547
+ padding: 3px 8px;
7548
+ line-height: 1.4;
7549
+ }
7550
+
7551
+ [data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked:not([role="switch"]) {
7552
+ background: var(--utility-material-lamp-green);
7553
+ box-shadow: inset 0 0 0 4px var(--utility-material-input),var(--utility-material-inset-shadow);
7554
+ }
7555
+
7556
+ [data-ui="industrial-utility"][data-mode] input[type="checkbox"]:checked:not([role="switch"]):after {
7557
+ content: none;
7558
+ }
7559
+
7560
+ .utility-check input:checked + .utility-check-control:after, :where([data-ui="industrial-utility"]) .ui-check input:checked+.ui-check-control:after {
7561
+ content: "";
7562
+ background: var(--utility-on-primary);
7563
+ width: 50%;
7564
+ height: 50%;
7565
+ }
7566
+
7567
+ .utility-card-service > .utility-icon-medallion {
7568
+ font-size: 36px;
7569
+ line-height: 1;
7570
+ }
7571
+
7572
+ .utility-button.utility-button-primary, [data-ui="industrial-utility"][data-mode] a.utility-button-primary, :where([data-ui="industrial-utility"]) .ui-button.ui-button:where([data-ui-variant="primary"]), :where([data-ui="industrial-utility"])[data-mode] a.ui-button:where([data-ui-variant="primary"]) {
7573
+ color: var(--utility-on-primary);
7574
+ }
7575
+
7576
+ .utility-icon-button:has( > svg:only-child), [data-ui="industrial-utility"] button:has( > svg:only-child), :where([data-ui="industrial-utility"]) .ui-icon-button:has(>svg:only-child) {
7577
+ min-block-size: 38px;
7578
+ min-inline-size: 38px;
7579
+ padding: 0;
7580
+ }
7581
+
7582
+ [data-ui="industrial-utility"] button > svg:only-child {
7583
+ flex: 0 0 20px;
7584
+ min-block-size: 20px;
7585
+ min-inline-size: 20px;
7586
+ }
7587
+
7588
+ .utility-table, [data-ui="industrial-utility"][data-mode] table, :where([data-ui="industrial-utility"]) .ui-table {
7589
+ border-collapse: collapse;
7590
+ border: 1px solid var(--utility-material-line-strong);
7591
+ font: 14px/1.4 var(--utility-material-font-body);
7592
+ border-radius: 1px;
7593
+ }
7594
+
7595
+ .utility-table th, [data-ui="industrial-utility"][data-mode] th, :where([data-ui="industrial-utility"]) .ui-table th {
7596
+ background: var(--utility-material-header);
7597
+ color: var(--utility-material-header-ink);
7598
+ font: 800 12px/1.4 var(--utility-material-font-display);
7599
+ text-transform: uppercase;
7600
+ letter-spacing: 0;
7601
+ border: 1px solid var(--utility-material-line);
7602
+ padding: 10px 12px;
7603
+ }
7604
+
7605
+ .utility-table td, [data-ui="industrial-utility"][data-mode] td, :where([data-ui="industrial-utility"]) .ui-table td {
7606
+ border: 1px solid var(--utility-material-line);
7607
+ color: var(--utility-material-text);
7608
+ padding: 10px 12px;
7609
+ }
7610
+
7611
+ [data-ui="industrial-utility"][data-mode] tbody tr:nth-child(2n) {
7612
+ background: var(--utility-material-surface-low);
7613
+ }
7614
+
7615
+ [data-ui="industrial-utility"][data-mode] caption {
7616
+ border: 1px solid var(--utility-material-line);
7617
+ text-align: left;
7618
+ font: 12px/1.4 var(--utility-material-font-body);
7619
+ color: var(--utility-material-text-soft);
7620
+ border-top: 0;
7621
+ padding: 10px 12px;
7622
+ }
7623
+
7624
+ @media (prefers-reduced-motion: reduce) {
7625
+ .utility-button.is-alarm, .utility-badge-danger, .utility-alert-danger, .utility-pilot-light.is-red, .utility-spinner, .utility-loading-spinner, .utility-button.is-loading:before, .utility-button[aria-busy="true"]:after, [data-ui="industrial-utility"] [aria-busy="true"]:after, :where([data-ui="industrial-utility"]) .ui-button.is-alarm, :where([data-ui="industrial-utility"]) .ui-badge:where([data-ui-variant="danger"]), :where([data-ui="industrial-utility"]) .ui-alert:where([data-ui-variant="danger"]), :where([data-ui="industrial-utility"]) .ui-button.is-loading:before, :where([data-ui="industrial-utility"]) .ui-button[aria-busy="true"]:after {
7626
+ animation: none !important;
7627
+ }
7628
+ }
7629
+
7630
+ @media (pointer: coarse) {
7631
+ .utility-button, .utility-icon-button, .utility-tab, .utility-option, .utility-pagination button, .utility-segmented button, .utility-three-position button, .utility-check, .utility-radio, .utility-toggle, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-icon-button, :where([data-ui="industrial-utility"]) .ui-check, :where([data-ui="industrial-utility"]) .ui-radio {
7632
+ min-block-size: 44px;
7633
+ }
7634
+ }
7635
+
7636
+ @media (forced-colors: active) {
7637
+ .utility-button, .utility-input, .utility-panel, .utility-check input, .utility-radio input, .utility-toggle input, :where([data-ui="industrial-utility"]) .ui-button, :where([data-ui="industrial-utility"]) .ui-input, :where([data-ui="industrial-utility"]) .ui-check input, :where([data-ui="industrial-utility"]) .ui-radio input {
7638
+ border: 1px solid buttontext;
7639
+ }
7640
+
7641
+ .utility-check input:checked, .utility-radio input:checked, :where([data-ui="industrial-utility"]) .ui-check input:checked, :where([data-ui="industrial-utility"]) .ui-radio input:checked {
7642
+ background: highlight;
7643
+ }
7644
+ }
7645
+
7646
+ .utility-pilot-light.is-warning {
7647
+ background: radial-gradient(circle at 40% 32%,#fff9cf 0 7%,var(--utility-warning) 28%,rgb(var(--utility-warning-rgb)/.5) 78%);
7648
+ box-shadow: 0 0 0 1px rgb(var(--utility-warning-rgb)/.2),0 0 8px rgb(var(--utility-warning-rgb)/.55);
7649
+ animation: 1.1s steps(2, end) infinite utility-warning-signal;
7650
+ }
7651
+
7652
+ .utility-feature-item:first-child > .utility-icon-medallion {
7653
+ font-size: 36px;
7654
+ line-height: 1;
7655
+ }
7656
+
7657
+ @media (prefers-reduced-motion: reduce) {
7658
+ .utility-pilot-light.is-warning {
7659
+ animation: none !important;
7660
+ }
7661
+ }
7662
+
7663
+ [data-ui="industrial-utility"][data-mode] .utility-button.utility-button-warning, :where([data-ui="industrial-utility"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
7664
+ background: var(--utility-warning);
7665
+ color: var(--utility-on-warning);
7666
+ border-color: var(--utility-warning);
7667
+ text-shadow: none;
7668
+ }
4797
7669
  }