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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"]) .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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"])[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="tactile"]) :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="tactile"]) :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="tactile"]) :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;
@@ -3507,16 +4164,16 @@
3507
4164
  @layer ui-style-kit.presets {
3508
4165
  :root {
3509
4166
  --tactile-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
3510
- --tactile-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
4167
+ --tactile-font-display: Georgia, Cambria, "Times New Roman", Times, serif;
3511
4168
  --tactile-font-body: var(--tactile-font-sans);
3512
4169
  --tactile-font-heading: var(--tactile-font-display);
3513
- --tactile-font-control: var(--tactile-font-display);
4170
+ --tactile-font-control: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
3514
4171
  --tactile-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
3515
- --tactile-radius-xs: .25rem;
3516
- --tactile-radius-sm: .5rem;
3517
- --tactile-radius-md: .9rem;
3518
- --tactile-radius-lg: 1.4rem;
3519
- --tactile-radius-xl: calc(1.4rem + .5rem);
4172
+ --tactile-radius-xs: .1rem;
4173
+ --tactile-radius-sm: .18rem;
4174
+ --tactile-radius-md: .28rem;
4175
+ --tactile-radius-lg: .4rem;
4176
+ --tactile-radius-xl: .6rem;
3520
4177
  --tactile-radius-pill: 999px;
3521
4178
  --tactile-space-1: .25rem;
3522
4179
  --tactile-space-2: .5rem;
@@ -3533,33 +4190,108 @@
3533
4190
  --lightningcss-light: initial;
3534
4191
  --lightningcss-dark: ;
3535
4192
  color-scheme: light;
4193
+ --tactile-fallback-bg-rgb: 248 242 231;
4194
+ --tactile-fallback-surface-rgb: 255 255 255;
4195
+ --tactile-fallback-surface-strong-rgb: 255 250 241;
4196
+ --tactile-fallback-surface-soft-rgb: 234 223 205;
4197
+ --tactile-fallback-text-rgb: 43 36 25;
4198
+ --tactile-fallback-text-muted-rgb: 107 97 78;
4199
+ --tactile-fallback-border-rgb: 215 198 167;
4200
+ --tactile-fallback-primary-rgb: 177 60 28;
4201
+ --tactile-fallback-primary-hover-rgb: 145 46 20;
4202
+ --tactile-fallback-primary-text-rgb: 255 255 255;
4203
+ --tactile-fallback-secondary-rgb: 91 104 67;
4204
+ --tactile-fallback-secondary-hover-rgb: 71 84 50;
4205
+ --tactile-fallback-secondary-text-rgb: 255 255 255;
4206
+ --tactile-fallback-accent-rgb: 197 160 82;
4207
+ --tactile-fallback-accent-text-rgb: 0 0 0;
4208
+ --tactile-fallback-success-rgb: 91 104 67;
4209
+ --tactile-fallback-success-text-rgb: 255 255 255;
4210
+ --tactile-fallback-warning-rgb: 166 107 0;
4211
+ --tactile-fallback-warning-text-rgb: 0 0 0;
4212
+ --tactile-fallback-danger-rgb: 174 74 63;
4213
+ --tactile-fallback-danger-text-rgb: 255 255 255;
4214
+ --tactile-fallback-link-rgb: 112 83 47;
4215
+ --tactile-fallback-focus-rgb: 201 151 74;
3536
4216
  --tactile-panel-alpha: .98;
3537
- --tactile-panel-soft-alpha: .78;
3538
- --tactile-border-alpha: .58;
3539
- --tactile-shadow-alpha: .12;
4217
+ --tactile-panel-soft-alpha: .82;
4218
+ --tactile-border-alpha: .68;
4219
+ --tactile-shadow-alpha: .16;
3540
4220
  --tactile-focus-alpha: .34;
4221
+ --tactile-paper-alpha: .96;
4222
+ --tactile-sidebar-alpha: .94;
3541
4223
  }
3542
4224
 
3543
4225
  [data-ui="tactile"][data-mode="dark"] {
3544
4226
  --lightningcss-light: ;
3545
4227
  --lightningcss-dark: initial;
3546
4228
  color-scheme: dark;
4229
+ --tactile-fallback-bg-rgb: 18 15 9;
4230
+ --tactile-fallback-surface-rgb: 33 27 18;
4231
+ --tactile-fallback-surface-strong-rgb: 47 40 27;
4232
+ --tactile-fallback-surface-soft-rgb: 25 20 13;
4233
+ --tactile-fallback-text-rgb: 248 239 223;
4234
+ --tactile-fallback-text-muted-rgb: 199 186 163;
4235
+ --tactile-fallback-border-rgb: 91 78 56;
4236
+ --tactile-fallback-primary-rgb: 211 83 43;
4237
+ --tactile-fallback-primary-hover-rgb: 230 107 63;
4238
+ --tactile-fallback-primary-text-rgb: 21 16 6;
4239
+ --tactile-fallback-secondary-rgb: 131 145 92;
4240
+ --tactile-fallback-secondary-hover-rgb: 155 169 112;
4241
+ --tactile-fallback-secondary-text-rgb: 9 20 7;
4242
+ --tactile-fallback-accent-rgb: 222 181 91;
4243
+ --tactile-fallback-accent-text-rgb: 0 0 0;
4244
+ --tactile-fallback-success-rgb: 131 145 92;
4245
+ --tactile-fallback-success-text-rgb: 0 0 0;
4246
+ --tactile-fallback-warning-rgb: 255 209 102;
4247
+ --tactile-fallback-warning-text-rgb: 0 0 0;
4248
+ --tactile-fallback-danger-rgb: 255 136 122;
4249
+ --tactile-fallback-danger-text-rgb: 0 0 0;
4250
+ --tactile-fallback-link-rgb: 240 211 154;
4251
+ --tactile-fallback-focus-rgb: 241 196 110;
3547
4252
  --tactile-panel-alpha: .92;
3548
- --tactile-panel-soft-alpha: .64;
3549
- --tactile-border-alpha: .52;
4253
+ --tactile-panel-soft-alpha: .68;
4254
+ --tactile-border-alpha: .62;
3550
4255
  --tactile-shadow-alpha: .34;
3551
4256
  --tactile-focus-alpha: .42;
4257
+ --tactile-paper-alpha: .88;
4258
+ --tactile-sidebar-alpha: .96;
3552
4259
  }
3553
4260
 
3554
4261
  [data-ui="tactile"][data-mode="contrast"] {
3555
4262
  --lightningcss-light: ;
3556
4263
  --lightningcss-dark: initial;
3557
4264
  color-scheme: dark;
4265
+ --tactile-fallback-bg-rgb: 0 0 0;
4266
+ --tactile-fallback-surface-rgb: 15 11 3;
4267
+ --tactile-fallback-surface-strong-rgb: 26 18 5;
4268
+ --tactile-fallback-surface-soft-rgb: 0 0 0;
4269
+ --tactile-fallback-text-rgb: 255 255 255;
4270
+ --tactile-fallback-text-muted-rgb: 255 248 232;
4271
+ --tactile-fallback-border-rgb: 255 255 255;
4272
+ --tactile-fallback-primary-rgb: 255 209 102;
4273
+ --tactile-fallback-primary-hover-rgb: 255 255 255;
4274
+ --tactile-fallback-primary-text-rgb: 0 0 0;
4275
+ --tactile-fallback-secondary-rgb: 157 255 107;
4276
+ --tactile-fallback-secondary-hover-rgb: 255 255 255;
4277
+ --tactile-fallback-secondary-text-rgb: 0 0 0;
4278
+ --tactile-fallback-accent-rgb: 255 176 0;
4279
+ --tactile-fallback-accent-text-rgb: 0 0 0;
4280
+ --tactile-fallback-success-rgb: 0 255 117;
4281
+ --tactile-fallback-success-text-rgb: 0 0 0;
4282
+ --tactile-fallback-warning-rgb: 255 225 0;
4283
+ --tactile-fallback-warning-text-rgb: 0 0 0;
4284
+ --tactile-fallback-danger-rgb: 255 77 77;
4285
+ --tactile-fallback-danger-text-rgb: 0 0 0;
4286
+ --tactile-fallback-link-rgb: 255 209 102;
4287
+ --tactile-fallback-focus-rgb: 255 255 255;
3558
4288
  --tactile-panel-alpha: 1;
3559
4289
  --tactile-panel-soft-alpha: .92;
3560
4290
  --tactile-border-alpha: 1;
3561
4291
  --tactile-shadow-alpha: .5;
3562
4292
  --tactile-focus-alpha: .72;
4293
+ --tactile-paper-alpha: 1;
4294
+ --tactile-sidebar-alpha: 1;
3563
4295
  }
3564
4296
 
3565
4297
  [data-ui="tactile"][data-theme][data-mode] {
@@ -3577,15 +4309,42 @@
3577
4309
  --tactile-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
3578
4310
  --tactile-secondary-text-rgb: var(--usk-secondary-text-rgb);
3579
4311
  --tactile-accent-rgb: var(--usk-accent-rgb);
3580
- --tactile-success-rgb: var(--usk-success-rgb);
3581
- --tactile-warning-rgb: var(--usk-warning-rgb);
3582
- --tactile-danger-rgb: var(--usk-danger-rgb);
3583
- --tactile-link-rgb: var(--usk-link-rgb);
3584
4312
  --tactile-accent-text-rgb: var(--usk-accent-text-rgb);
4313
+ --tactile-success-rgb: var(--usk-success-rgb);
3585
4314
  --tactile-success-text-rgb: var(--usk-success-text-rgb);
4315
+ --tactile-warning-rgb: var(--usk-warning-rgb);
3586
4316
  --tactile-warning-text-rgb: var(--usk-warning-text-rgb);
4317
+ --tactile-danger-rgb: var(--usk-danger-rgb);
3587
4318
  --tactile-danger-text-rgb: var(--usk-danger-text-rgb);
4319
+ --tactile-link-rgb: var(--usk-link-rgb);
3588
4320
  --tactile-focus-rgb: var(--usk-focus-rgb);
4321
+ }
4322
+
4323
+ [data-ui="tactile"][data-mode] {
4324
+ --usk-native-bg: var(--tactile-bg);
4325
+ --tactile-bg-rgb: var(--usk-bg-rgb, var(--tactile-fallback-bg-rgb));
4326
+ --tactile-surface-rgb: var(--usk-surface-rgb, var(--tactile-fallback-surface-rgb));
4327
+ --tactile-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--tactile-fallback-surface-strong-rgb));
4328
+ --tactile-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--tactile-fallback-surface-soft-rgb));
4329
+ --tactile-text-rgb: var(--usk-text-rgb, var(--tactile-fallback-text-rgb));
4330
+ --tactile-text-muted-rgb: var(--usk-text-muted-rgb, var(--tactile-fallback-text-muted-rgb));
4331
+ --tactile-border-rgb: var(--usk-border-rgb, var(--tactile-fallback-border-rgb));
4332
+ --tactile-primary-rgb: var(--usk-primary-rgb, var(--tactile-fallback-primary-rgb));
4333
+ --tactile-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--tactile-fallback-primary-hover-rgb));
4334
+ --tactile-primary-text-rgb: var(--usk-primary-text-rgb, var(--tactile-fallback-primary-text-rgb));
4335
+ --tactile-secondary-rgb: var(--usk-secondary-rgb, var(--tactile-fallback-secondary-rgb));
4336
+ --tactile-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--tactile-fallback-secondary-hover-rgb));
4337
+ --tactile-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--tactile-fallback-secondary-text-rgb));
4338
+ --tactile-accent-rgb: var(--usk-accent-rgb, var(--tactile-fallback-accent-rgb));
4339
+ --tactile-accent-text-rgb: var(--usk-accent-text-rgb, var(--tactile-fallback-accent-text-rgb));
4340
+ --tactile-success-rgb: var(--usk-success-rgb, var(--tactile-fallback-success-rgb));
4341
+ --tactile-success-text-rgb: var(--usk-success-text-rgb, var(--tactile-fallback-success-text-rgb));
4342
+ --tactile-warning-rgb: var(--usk-warning-rgb, var(--tactile-fallback-warning-rgb));
4343
+ --tactile-warning-text-rgb: var(--usk-warning-text-rgb, var(--tactile-fallback-warning-text-rgb));
4344
+ --tactile-danger-rgb: var(--usk-danger-rgb, var(--tactile-fallback-danger-rgb));
4345
+ --tactile-danger-text-rgb: var(--usk-danger-text-rgb, var(--tactile-fallback-danger-text-rgb));
4346
+ --tactile-link-rgb: var(--usk-link-rgb, var(--tactile-fallback-link-rgb));
4347
+ --tactile-focus-rgb: var(--usk-focus-rgb, var(--tactile-fallback-focus-rgb));
3589
4348
  --usk-native-surface: var(--tactile-surface);
3590
4349
  --usk-native-surface-strong: var(--tactile-surface-strong);
3591
4350
  --usk-native-surface-soft: var(--tactile-surface-soft);
@@ -3606,15 +4365,66 @@
3606
4365
  --usk-native-font-heading: var(--tactile-font-heading);
3607
4366
  --usk-native-font-control: var(--tactile-font-control);
3608
4367
  --usk-native-font-mono: var(--tactile-font-mono);
3609
- --usk-native-radius-sm: var(--tactile-radius-sm);
4368
+ --usk-native-radius-sm: var(--tactile-radius-xs);
3610
4369
  --usk-native-radius: var(--tactile-radius-md);
3611
4370
  --usk-native-radius-lg: var(--tactile-radius-lg);
3612
- --usk-native-shadow: var(--tactile-shadow-sm, none);
3613
- --usk-native-shadow-md: var(--tactile-shadow-md, var(--usk-native-shadow));
4371
+ --usk-native-shadow: var(--tactile-button-shadow);
4372
+ --usk-native-shadow-md: var(--tactile-panel-shadow);
3614
4373
  --usk-native-focus-ring: var(--tactile-focus-ring, 0 0 0 3px rgb(var(--tactile-focus-rgb) / .28));
3615
4374
  --usk-native-border-width: 1px;
3616
4375
  --usk-native-field-gap: .5rem;
3617
4376
  --usk-native-panel-padding: var(--tactile-space-5);
4377
+ --usk-native-control-min-block-size: 3rem;
4378
+ --usk-native-control-padding-block: .74rem;
4379
+ --usk-native-control-padding-inline: .95rem;
4380
+ --usk-native-subcontrol-padding-block: .58rem;
4381
+ --usk-native-subcontrol-padding-inline: .72rem;
4382
+ --usk-native-choice-size: 1.35rem;
4383
+ --usk-native-choice-background: var(--tactile-control-bg);
4384
+ --usk-native-choice-border: 1px solid var(--tactile-keyline);
4385
+ --usk-native-checkbox-radius: .18rem;
4386
+ --usk-native-radio-radius: 50%;
4387
+ --usk-native-choice-shadow: var(--tactile-inset-shadow);
4388
+ --usk-native-choice-checked-background: var(--tactile-action-solid);
4389
+ --usk-native-choice-mark-color: var(--tactile-on-primary);
4390
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 50%, var(--tactile-text) 50%), linear-gradient(135deg, var(--tactile-text) 50%, transparent 50%);
4391
+ --usk-native-select-indicator-size: .5rem .5rem, .5rem .5rem;
4392
+ --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .72rem) 50%;
4393
+ --usk-native-select-padding-inline-end: 2.25rem;
4394
+ --usk-native-range-track-size: .56rem;
4395
+ --usk-native-range-track-background: var(--tactile-recessed-track);
4396
+ --usk-native-range-track-border: 1px solid var(--tactile-track-rim);
4397
+ --usk-native-range-track-radius: .2rem;
4398
+ --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
4399
+ --usk-native-range-progress-background: var(--tactile-action-solid);
4400
+ --usk-native-range-thumb-size: 1.55rem;
4401
+ --usk-native-range-thumb-background: var(--tactile-thumb-bg);
4402
+ --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
4403
+ --usk-native-range-thumb-radius: .22rem;
4404
+ --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
4405
+ --usk-native-progress-size: .76rem;
4406
+ --usk-native-progress-track-background: var(--tactile-recessed-track);
4407
+ --usk-native-progress-track-border: 1px solid var(--tactile-track-rim);
4408
+ --usk-native-progress-track-radius: .18rem;
4409
+ --usk-native-progress-track-shadow: var(--tactile-deep-inset-shadow);
4410
+ --usk-native-progress-value-background: var(--tactile-progress-fill);
4411
+ --usk-native-progress-value-radius: .12rem;
4412
+ --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .22);
4413
+ --usk-native-meter-optimum-background: var(--tactile-success);
4414
+ --usk-native-meter-suboptimum-background: var(--tactile-warning);
4415
+ --usk-native-meter-critical-background: var(--tactile-danger);
4416
+ --usk-native-file-button-background: var(--tactile-action-solid);
4417
+ --usk-native-file-button-border: 1px solid var(--tactile-keyline);
4418
+ --usk-native-file-button-radius: .22rem;
4419
+ --usk-native-file-button-shadow: var(--tactile-button-shadow);
4420
+ --usk-native-color-swatch-border: 1px solid var(--tactile-keyline);
4421
+ --usk-native-color-swatch-radius: .18rem;
4422
+ --usk-native-indicator-opacity: .92;
4423
+ --usk-native-indicator-filter: none;
4424
+ --usk-native-scrollbar-size: .85rem;
4425
+ --usk-native-scrollbar-track: var(--tactile-recessed-track);
4426
+ --usk-native-scrollbar-thumb: var(--tactile-thumb-bg);
4427
+ --usk-native-scrollbar-radius: .18rem;
3618
4428
  --tactile-bg: rgb(var(--tactile-bg-rgb));
3619
4429
  --tactile-surface: rgb(var(--tactile-surface-rgb) / var(--tactile-panel-alpha));
3620
4430
  --tactile-surface-strong: rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha));
@@ -3645,23 +4455,46 @@
3645
4455
  --tactile-link: rgb(var(--tactile-link-rgb));
3646
4456
  --tactile-focus: rgb(var(--tactile-focus-rgb));
3647
4457
  --tactile-focus-ring: 0 0 0 3px rgb(var(--tactile-focus-rgb) / var(--tactile-focus-alpha));
4458
+ --tactile-paper-wash: rgb(var(--tactile-warning-rgb) / .14);
4459
+ --tactile-bevel-highlight: rgb(var(--tactile-surface-strong-rgb) / .82);
4460
+ --tactile-bevel-shadow: rgb(var(--tactile-text-rgb) / .24);
3648
4461
  --tactile-theme-bg-size: auto;
3649
- --tactile-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--tactile-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--tactile-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--tactile-secondary-rgb) / .1), transparent 34rem), var(--tactile-bg);
3650
- --tactile-card-bg: linear-gradient(135deg, rgb(var(--tactile-primary-rgb) / .1), rgb(var(--tactile-accent-rgb) / .055) 42%, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha)) 100%), var(--tactile-surface);
3651
- --tactile-control-bg: linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-panel-alpha)), rgb(var(--tactile-surface-soft-rgb) / var(--tactile-panel-soft-alpha)));
4462
+ --tactile-paper-bg: linear-gradient(180deg, var(--tactile-paper-wash), transparent 28rem), linear-gradient(135deg, rgb(var(--tactile-accent-rgb) / .06), transparent 26rem), linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / var(--tactile-paper-alpha)), rgb(var(--tactile-surface-rgb) / var(--tactile-panel-alpha)));
4463
+ --tactile-paper-grain: radial-gradient(circle at 12% 18%, rgb(var(--tactile-text-rgb) / .04) 0 1px, transparent 1.4px), radial-gradient(circle at 68% 34%, rgb(var(--tactile-warning-rgb) / .055) 0 1px, transparent 1.5px), linear-gradient(90deg, rgb(var(--tactile-text-rgb) / .018) 1px, transparent 1px), linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .055), transparent 18rem);
4464
+ --tactile-theme-bg: var(--tactile-paper-grain), var(--tactile-paper-bg), var(--tactile-bg);
4465
+ --tactile-card-bg: var(--tactile-paper-grain), var(--tactile-paper-bg);
4466
+ --tactile-control-bg: linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .1), transparent), linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / .86), rgb(var(--tactile-surface-soft-rgb) / .7));
4467
+ --tactile-field-bg: linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .075), transparent), linear-gradient(180deg, rgb(var(--tactile-surface-soft-rgb) / .8), rgb(var(--tactile-surface-strong-rgb) / .58));
4468
+ --tactile-inset-bg: linear-gradient(180deg, rgb(var(--tactile-warning-rgb) / .08), transparent), linear-gradient(180deg, rgb(var(--tactile-surface-soft-rgb) / .74), rgb(var(--tactile-surface-rgb) / .6));
4469
+ --tactile-recessed-track: rgb(var(--tactile-text-rgb) / .82);
4470
+ --tactile-track-rim: rgb(var(--tactile-text-rgb) / .72);
4471
+ --tactile-thumb-bg: linear-gradient(90deg, rgb(var(--tactile-warning-rgb) / .1), transparent), linear-gradient(90deg, rgb(var(--tactile-surface-strong-rgb) / .98), rgb(var(--tactile-surface-soft-rgb) / .9));
4472
+ --tactile-action-solid: var(--tactile-primary);
4473
+ --tactile-action-bg: linear-gradient(180deg, var(--tactile-primary), var(--tactile-primary-hover));
4474
+ --tactile-action-hover-bg: linear-gradient(180deg, var(--tactile-primary-hover), var(--tactile-primary));
4475
+ --tactile-progress-fill: linear-gradient(90deg, var(--tactile-success), var(--tactile-primary));
4476
+ --tactile-keyline: rgb(var(--tactile-text-rgb) / max(.46, calc(var(--tactile-border-alpha) * .78)));
4477
+ --tactile-panel-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -2px 0 var(--tactile-bevel-shadow), 0 .55rem 1.25rem rgb(var(--tactile-text-rgb) / var(--tactile-shadow-alpha));
4478
+ --tactile-button-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -2px 0 var(--tactile-bevel-shadow), 0 .32rem .68rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) * .92));
4479
+ --tactile-inset-shadow: inset .16rem .16rem .34rem rgb(var(--tactile-text-rgb) / .2), inset -.08rem -.08rem .2rem rgb(var(--tactile-surface-strong-rgb) / .38);
4480
+ --tactile-deep-inset-shadow: inset .16rem .16rem .32rem #00000094, inset -.08rem -.08rem .16rem rgb(var(--tactile-surface-strong-rgb) / .14);
4481
+ --tactile-sidebar-bg: linear-gradient(180deg, rgb(var(--tactile-text-rgb) / var(--tactile-sidebar-alpha)), rgb(var(--tactile-text-rgb) / calc(var(--tactile-sidebar-alpha) - .06)));
4482
+ --tactile-sidebar-fg: rgb(var(--tactile-bg-rgb));
4483
+ --tactile-sidebar-muted: rgb(var(--tactile-bg-rgb) / .74);
4484
+ --tactile-rail: var(--tactile-primary);
3652
4485
  --tactile-spinner-track: rgb(var(--tactile-border-rgb) / max(.28, calc(var(--tactile-border-alpha) * .7)));
3653
4486
  --tactile-spinner-stroke: var(--tactile-primary);
3654
4487
  --tactile-spinner-accent: var(--tactile-accent);
3655
4488
  }
3656
4489
 
3657
4490
  @supports (color: color-mix(in srgb,black,white)) {
3658
- [data-ui="tactile"][data-theme][data-mode] {
4491
+ [data-ui="tactile"][data-mode] {
3659
4492
  --tactile-border: color-mix(in srgb, rgb(var(--tactile-border-rgb) / max(var(--tactile-border-alpha), var(--usk-border-min-alpha))), var(--tactile-text) var(--usk-border-text-mix));
3660
4493
  }
3661
4494
  }
3662
4495
 
3663
4496
  [data-ui="tactile"] {
3664
- background: radial-gradient(circle at 50% -10%,#ffffff14,transparent 30rem),var(--tactile-bg);
4497
+ background: var(--tactile-paper-grain),var(--tactile-paper-bg),var(--tactile-bg);
3665
4498
  color: var(--tactile-text);
3666
4499
  font-family: var(--tactile-font-body);
3667
4500
  text-rendering: optimizelegibility;
@@ -3674,44 +4507,49 @@
3674
4507
  box-sizing: border-box;
3675
4508
  }
3676
4509
 
3677
- [data-ui="tactile"][data-theme][data-mode] {
4510
+ [data-ui="tactile"][data-mode] {
3678
4511
  background: var(--tactile-theme-bg);
3679
4512
  background-size: var(--tactile-theme-bg-size);
3680
4513
  }
3681
4514
 
3682
- .tactile-title, .tactile-heading, .tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-badge, :where([data-ui="tactile"]) .ui-nav-link {
4515
+ .tactile-title, .tactile-heading {
3683
4516
  font-family: var(--tactile-font-heading);
3684
4517
  }
3685
4518
 
4519
+ .tactile-kicker, .tactile-button, .tactile-badge, .tactile-nav-link, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-badge, :where([data-ui="tactile"]) .ui-nav-link {
4520
+ font-family: var(--tactile-font-control);
4521
+ }
4522
+
3686
4523
  .tactile-title {
3687
4524
  color: var(--tactile-text);
3688
- letter-spacing: -.045em;
4525
+ font-family: var(--tactile-font-display);
4526
+ letter-spacing: -.03em;
3689
4527
  margin: 0;
3690
- font-size: clamp(2rem, 5vw, 3.7rem);
3691
- line-height: 1.02;
4528
+ font-size: clamp(2.2rem, 5vw, 4rem);
4529
+ line-height: .98;
3692
4530
  }
3693
4531
 
3694
4532
  .tactile-heading {
3695
4533
  color: var(--tactile-text);
3696
- letter-spacing: -.03em;
4534
+ letter-spacing: -.02em;
3697
4535
  margin: 0;
3698
- font-size: clamp(1.2rem, 2.5vw, 2rem);
3699
- line-height: 1.15;
4536
+ font-size: clamp(1.25rem, 2.5vw, 2.1rem);
4537
+ line-height: 1.08;
3700
4538
  }
3701
4539
 
3702
4540
  .tactile-kicker {
3703
- color: var(--tactile-primary);
3704
- letter-spacing: .12em;
4541
+ color: var(--tactile-text);
4542
+ letter-spacing: .14em;
3705
4543
  text-transform: uppercase;
3706
4544
  margin: 0;
3707
- font-size: .82rem;
3708
- font-weight: 850;
4545
+ font-size: .78rem;
4546
+ font-weight: 900;
3709
4547
  }
3710
4548
 
3711
4549
  .tactile-subtitle, .tactile-copy {
3712
4550
  color: var(--tactile-text-muted);
3713
4551
  margin: 0;
3714
- line-height: 1.65;
4552
+ line-height: 1.58;
3715
4553
  }
3716
4554
 
3717
4555
  .tactile-text-muted {
@@ -3719,26 +4557,23 @@
3719
4557
  }
3720
4558
 
3721
4559
  .tactile-divider {
3722
- background: var(--tactile-border);
3723
- border: 0;
4560
+ background: rgb(var(--tactile-border-rgb)/.62);
3724
4561
  width: 100%;
3725
4562
  height: 1px;
4563
+ box-shadow: 0 1px 0 rgb(var(--tactile-surface-strong-rgb)/.48);
4564
+ border: 0;
3726
4565
  }
3727
4566
 
3728
4567
  .tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap, :where([data-ui="tactile"]) .ui-card, :where([data-ui="tactile"]) .ui-toolbar, :where([data-ui="tactile"]) .ui-table-wrap {
3729
- background: linear-gradient(180deg,#ffffff2e,#ffffff08),linear-gradient(135deg,rgb(var(--tactile-primary-rgb)/.07),transparent 46%),var(--tactile-surface);
4568
+ background: var(--tactile-card-bg);
3730
4569
  color: var(--tactile-text);
3731
- border: 1px solid var(--tactile-border);
4570
+ border: 1px solid var(--tactile-keyline);
3732
4571
  border-radius: var(--tactile-radius-lg);
3733
- box-shadow: 0 18px 36px rgb(0 0 0 / var(--tactile-shadow-alpha)),inset 0 1px 0 #ffffff40;
4572
+ box-shadow: var(--tactile-panel-shadow);
3734
4573
  transition: transform var(--tactile-transition-base),box-shadow var(--tactile-transition-base),border-color var(--tactile-transition-base),background var(--tactile-transition-base);
3735
4574
  position: relative;
3736
4575
  }
3737
4576
 
3738
- .tactile-card, .tactile-panel, :where([data-ui="tactile"]) .ui-card {
3739
- padding: var(--tactile-space-6);
3740
- }
3741
-
3742
4577
  .tactile-toolbar, :where([data-ui="tactile"]) .ui-toolbar {
3743
4578
  justify-content: space-between;
3744
4579
  align-items: center;
@@ -3750,26 +4585,26 @@
3750
4585
 
3751
4586
  .tactile-surface-sm {
3752
4587
  border-radius: var(--tactile-radius-md);
3753
- box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--tactile-shadow-alpha)*.72));
4588
+ box-shadow: var(--tactile-button-shadow);
3754
4589
  }
3755
4590
 
3756
4591
  .tactile-surface-lg {
3757
4592
  border-radius: var(--tactile-radius-xl);
3758
- box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) + .08));
4593
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb)/.72),0 .9rem 2rem rgb(var(--tactile-text-rgb)/calc(var(--tactile-shadow-alpha) + .08));
3759
4594
  }
3760
4595
 
3761
4596
  .tactile-well, .tactile-inset {
3762
- background: var(--tactile-surface-soft);
4597
+ background: var(--tactile-inset-bg);
3763
4598
  color: var(--tactile-text);
3764
- border: 1px solid rgb(var(--tactile-border-rgb)/calc(var(--tactile-border-alpha)*.7));
4599
+ border: 1px solid rgb(var(--tactile-border-rgb)/calc(var(--tactile-border-alpha)*.82));
3765
4600
  border-radius: var(--tactile-radius-md);
3766
4601
  padding: var(--tactile-space-5);
3767
- box-shadow: inset 0 1px 3px #00000014;
4602
+ box-shadow: var(--tactile-inset-shadow);
3768
4603
  }
3769
4604
 
3770
4605
  .tactile-hover-lift:hover {
3771
- box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--tactile-shadow-alpha) + .12));
3772
- transform: translateY(-2px);
4606
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb)/.8),0 .9rem 1.8rem rgb(var(--tactile-text-rgb)/calc(var(--tactile-shadow-alpha) + .08));
4607
+ transform: translateY(-1px);
3773
4608
  }
3774
4609
 
3775
4610
  .tactile-button, .tactile-icon-button, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-icon-button {
@@ -3777,71 +4612,37 @@
3777
4612
  justify-content: center;
3778
4613
  align-items: center;
3779
4614
  gap: var(--tactile-space-2);
3780
- background: var(--tactile-surface);
3781
- min-height: 2.75rem;
4615
+ background: var(--tactile-control-bg);
4616
+ min-height: 3rem;
3782
4617
  color: var(--tactile-text);
3783
- border: 1px solid var(--tactile-border);
4618
+ border: 1px solid var(--tactile-keyline);
3784
4619
  border-radius: var(--tactile-radius-md);
3785
- box-shadow: 0 6px 18px rgb(0 0 0 / var(--tactile-shadow-alpha));
4620
+ box-shadow: var(--tactile-button-shadow);
3786
4621
  font: inherit;
3787
4622
  cursor: pointer;
3788
4623
  -webkit-user-select: none;
3789
4624
  user-select: none;
3790
4625
  transition: color var(--tactile-transition-fast),background var(--tactile-transition-fast),border-color var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast),transform var(--tactile-transition-fast);
3791
- padding: .75rem 1.1rem;
4626
+ padding: .72rem 1.15rem;
3792
4627
  font-weight: 800;
3793
4628
  line-height: 1;
3794
4629
  text-decoration: none;
3795
4630
  display: inline-flex;
3796
4631
  }
3797
4632
 
3798
- .tactile-button:hover, .tactile-icon-button:hover, :where([data-ui="tactile"]) .ui-button:hover, :where([data-ui="tactile"]) .ui-icon-button:hover {
3799
- border-color: var(--tactile-primary);
3800
- transform: translateY(-1px);
3801
- }
3802
-
3803
- .tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active, :where([data-ui="tactile"]) .ui-button:active, :where([data-ui="tactile"]) .ui-icon-button:active, :where([data-ui="tactile"]) .ui-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-button.is-active, :where([data-ui="tactile"]) .ui-icon-button.is-active {
3804
- transform: translateY(1px);
3805
- box-shadow: inset 0 3px 10px #0000002e;
3806
- }
3807
-
3808
- .tactile-button-primary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]) {
3809
- background: var(--tactile-primary);
3810
- color: var(--tactile-on-primary);
3811
- border-color: var(--tactile-primary);
3812
- }
3813
-
3814
4633
  .tactile-button-primary:hover, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]):hover {
3815
- background: var(--tactile-primary-hover);
4634
+ background: var(--tactile-action-hover-bg);
3816
4635
  border-color: var(--tactile-primary-hover);
3817
4636
  }
3818
4637
 
3819
- .tactile-button-secondary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="secondary"]) {
3820
- background: var(--tactile-secondary);
3821
- color: var(--tactile-on-secondary);
3822
- border-color: var(--tactile-secondary);
3823
- }
3824
-
3825
4638
  .tactile-button-secondary:hover, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="secondary"]):hover {
3826
- background: var(--tactile-secondary-hover);
3827
- border-color: var(--tactile-secondary-hover);
3828
- }
3829
-
3830
- .tactile-button-danger, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="danger"]) {
3831
- background: var(--tactile-danger);
3832
- color: var(--tactile-on-danger);
3833
- border-color: var(--tactile-danger);
3834
- }
3835
-
3836
- .tactile-button-ghost, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="ghost"]) {
3837
- color: var(--tactile-text);
3838
- box-shadow: none;
3839
- background: none;
4639
+ background: var(--tactile-field-bg);
4640
+ border-color: var(--tactile-primary);
3840
4641
  }
3841
4642
 
3842
4643
  .tactile-icon-button, :where([data-ui="tactile"]) .ui-icon-button {
3843
- border-radius: var(--tactile-radius-pill);
3844
- width: 2.75rem;
4644
+ border-radius: var(--tactile-radius-sm);
4645
+ width: 3rem;
3845
4646
  padding: 0;
3846
4647
  }
3847
4648
 
@@ -3851,11 +4652,11 @@
3851
4652
  transform: none;
3852
4653
  }
3853
4654
 
3854
- .tactile-card, .tactile-panel, :where([data-ui="tactile"]) .ui-card {
4655
+ .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap, :where([data-ui="tactile"]) .ui-card, :where([data-ui="tactile"]) .ui-toolbar, :where([data-ui="tactile"]) .ui-table-wrap {
3855
4656
  background: var(--tactile-card-bg);
3856
4657
  }
3857
4658
 
3858
- .tactile-toolbar, .tactile-table-wrap, .tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-ghost), .tactile-icon-button, :where([data-ui="tactile"]) .ui-toolbar, :where([data-ui="tactile"]) .ui-table-wrap, :where([data-ui="tactile"]) .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="tactile"]) .ui-icon-button {
4659
+ .tactile-button:not(.tactile-button-primary):not(.tactile-button-secondary):not(.tactile-button-danger):not(.tactile-button-warning):not(.tactile-button-ghost), .tactile-icon-button, :where([data-ui="tactile"]) .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"])), :where([data-ui="tactile"]) .ui-icon-button {
3859
4660
  background: var(--tactile-control-bg);
3860
4661
  }
3861
4662
 
@@ -3871,21 +4672,24 @@
3871
4672
 
3872
4673
  .tactile-label, :where([data-ui="tactile"]) .ui-label {
3873
4674
  color: var(--tactile-text);
3874
- font-size: .925rem;
3875
- font-weight: 800;
4675
+ letter-spacing: .08em;
4676
+ text-transform: uppercase;
4677
+ font-size: .78rem;
4678
+ font-weight: 900;
3876
4679
  }
3877
4680
 
3878
4681
  .tactile-input, .tactile-textarea, .tactile-select, :where([data-ui="tactile"]) .ui-input, :where([data-ui="tactile"]) .ui-textarea, :where([data-ui="tactile"]) .ui-select {
3879
- background: var(--tactile-surface-soft);
4682
+ background: var(--tactile-field-bg);
3880
4683
  width: 100%;
3881
- min-height: 2.875rem;
4684
+ min-height: 3rem;
3882
4685
  color: var(--tactile-text);
3883
- border: 1px solid var(--tactile-border);
4686
+ border: 1px solid var(--tactile-keyline);
3884
4687
  border-radius: var(--tactile-radius-md);
4688
+ box-shadow: var(--tactile-inset-shadow);
3885
4689
  font: inherit;
3886
4690
  transition: background var(--tactile-transition-fast),border-color var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
3887
4691
  outline: none;
3888
- padding: .75rem 1rem;
4692
+ padding: .74rem 1rem;
3889
4693
  }
3890
4694
 
3891
4695
  .tactile-textarea, :where([data-ui="tactile"]) .ui-textarea {
@@ -3893,20 +4697,10 @@
3893
4697
  min-height: 8rem;
3894
4698
  }
3895
4699
 
3896
- .tactile-input::placeholder, .tactile-textarea::placeholder, :where([data-ui="tactile"]) .ui-input::placeholder, :where([data-ui="tactile"]) .ui-textarea::placeholder {
3897
- color: var(--tactile-text-muted);
3898
- opacity: .82;
3899
- }
3900
-
3901
4700
  .tactile-input:hover, .tactile-textarea:hover, .tactile-select:hover, :where([data-ui="tactile"]) .ui-input:hover, :where([data-ui="tactile"]) .ui-textarea:hover, :where([data-ui="tactile"]) .ui-select:hover {
3902
4701
  border-color: rgb(var(--tactile-primary-rgb)/.58);
3903
4702
  }
3904
4703
 
3905
- .tactile-input:focus, .tactile-textarea:focus, .tactile-select:focus, :where([data-ui="tactile"]) .ui-input:focus, :where([data-ui="tactile"]) .ui-textarea:focus, :where([data-ui="tactile"]) .ui-select:focus {
3906
- border-color: var(--tactile-focus);
3907
- box-shadow: var(--tactile-focus-ring);
3908
- }
3909
-
3910
4704
  .tactile-help-text, :where([data-ui="tactile"]) .ui-help-text {
3911
4705
  color: var(--tactile-text-muted);
3912
4706
  font-size: .875rem;
@@ -3928,10 +4722,11 @@
3928
4722
  }
3929
4723
 
3930
4724
  .tactile-check-control, .tactile-radio-control, :where([data-ui="tactile"]) .ui-check-control, :where([data-ui="tactile"]) .ui-radio-control {
3931
- background: var(--tactile-surface-soft);
3932
- border: 1px solid var(--tactile-border);
4725
+ background: var(--tactile-field-bg);
4726
+ border: 1px solid var(--tactile-keyline);
3933
4727
  width: 1.35rem;
3934
4728
  height: 1.35rem;
4729
+ box-shadow: var(--tactile-inset-shadow);
3935
4730
  transition: background var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
3936
4731
  place-items: center;
3937
4732
  display: inline-grid;
@@ -3945,12 +4740,6 @@
3945
4740
  border-radius: 50%;
3946
4741
  }
3947
4742
 
3948
- .tactile-check input:checked + .tactile-check-control, .tactile-radio input:checked + .tactile-radio-control, :where([data-ui="tactile"]) .ui-check input:checked+.ui-check-control, :where([data-ui="tactile"]) .ui-radio input:checked+.ui-radio-control {
3949
- background: var(--tactile-primary);
3950
- border-color: var(--tactile-primary);
3951
- box-shadow: var(--tactile-focus-ring);
3952
- }
3953
-
3954
4743
  .tactile-check input:checked + .tactile-check-control:after, :where([data-ui="tactile"]) .ui-check input:checked+.ui-check-control:after {
3955
4744
  content: "✓";
3956
4745
  color: var(--tactile-on-primary);
@@ -3981,55 +4770,54 @@
3981
4770
  }
3982
4771
 
3983
4772
  .tactile-switch-track, :where([data-ui="tactile"]) .ui-switch-track {
3984
- background: var(--tactile-surface-soft);
3985
- border: 1px solid var(--tactile-border);
3986
- border-radius: var(--tactile-radius-pill);
3987
- width: 3.5rem;
4773
+ background: var(--tactile-recessed-track);
4774
+ border: 1px solid var(--tactile-track-rim);
4775
+ border-radius: var(--tactile-radius-sm);
4776
+ width: 4.35rem;
3988
4777
  height: 1.9rem;
4778
+ box-shadow: var(--tactile-deep-inset-shadow);
3989
4779
  transition: background var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
3990
4780
  position: relative;
3991
4781
  }
3992
4782
 
3993
4783
  .tactile-switch-thumb, :where([data-ui="tactile"]) .ui-switch-thumb {
3994
- background: var(--tactile-surface-strong);
3995
- border: 1px solid var(--tactile-border);
3996
- width: 1.34rem;
3997
- height: 1.34rem;
3998
- box-shadow: 0 4px 12px rgb(0 0 0 / var(--tactile-shadow-alpha));
4784
+ background: var(--tactile-thumb-bg);
4785
+ border: 1px solid var(--tactile-keyline);
4786
+ border-radius: var(--tactile-radius-xs);
4787
+ width: 1.58rem;
4788
+ height: 1.58rem;
4789
+ box-shadow: var(--tactile-button-shadow);
3999
4790
  transition: left var(--tactile-transition-fast),background var(--tactile-transition-fast);
4000
- border-radius: 50%;
4001
4791
  position: absolute;
4002
- top: .22rem;
4003
- left: .22rem;
4004
- }
4005
-
4006
- .tactile-switch input:checked + .tactile-switch-track, :where([data-ui="tactile"]) .ui-switch input:checked+.ui-switch-track {
4007
- background: var(--tactile-primary);
4008
- border-color: var(--tactile-primary);
4792
+ top: .16rem;
4793
+ left: .16rem;
4009
4794
  }
4010
4795
 
4011
4796
  .tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb, :where([data-ui="tactile"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
4012
- background: var(--tactile-on-primary);
4013
- left: calc(100% - 1.56rem);
4797
+ background: var(--tactile-thumb-bg);
4798
+ left: calc(100% - 1.74rem);
4014
4799
  }
4015
4800
 
4016
4801
  .tactile-badge, :where([data-ui="tactile"]) .ui-badge {
4017
4802
  align-items: center;
4018
4803
  gap: var(--tactile-space-1);
4019
- background: var(--tactile-surface-soft);
4020
- min-height: 1.75rem;
4804
+ background: var(--tactile-field-bg);
4805
+ min-height: 1.65rem;
4021
4806
  color: var(--tactile-text);
4022
- border: 1px solid var(--tactile-border);
4023
- border-radius: var(--tactile-radius-pill);
4024
- padding: .35rem .7rem;
4025
- font-size: .8125rem;
4026
- font-weight: 850;
4807
+ border: 1px solid var(--tactile-keyline);
4808
+ border-radius: var(--tactile-radius-sm);
4809
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb)/.58);
4810
+ letter-spacing: .04em;
4811
+ text-transform: uppercase;
4812
+ padding: .32rem .68rem;
4813
+ font-size: .78rem;
4814
+ font-weight: 900;
4027
4815
  line-height: 1;
4028
4816
  display: inline-flex;
4029
4817
  }
4030
4818
 
4031
4819
  .tactile-badge-primary, :where([data-ui="tactile"]) .ui-badge:where([data-ui-variant="primary"]) {
4032
- background: var(--tactile-primary);
4820
+ background: var(--tactile-action-solid);
4033
4821
  color: var(--tactile-on-primary);
4034
4822
  border-color: var(--tactile-primary);
4035
4823
  }
@@ -4062,44 +4850,35 @@
4062
4850
  align-items: center;
4063
4851
  gap: var(--tactile-space-2);
4064
4852
  padding: var(--tactile-space-2);
4065
- background: var(--tactile-surface);
4066
- border: 1px solid var(--tactile-border);
4067
- border-radius: var(--tactile-radius-xl);
4068
- box-shadow: 0 10px 30px rgb(0 0 0 / var(--tactile-shadow-alpha));
4853
+ background: var(--tactile-sidebar-bg);
4854
+ border: 1px solid rgb(var(--tactile-text-rgb)/.88);
4855
+ border-radius: var(--tactile-radius-lg);
4856
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-bg-rgb)/.08),0 .75rem 1.5rem rgb(var(--tactile-text-rgb)/calc(var(--tactile-shadow-alpha) + .12));
4069
4857
  flex-wrap: wrap;
4070
4858
  display: flex;
4071
4859
  }
4072
4860
 
4073
4861
  .tactile-nav-link, :where([data-ui="tactile"]) .ui-nav-link {
4074
- min-height: 2.5rem;
4075
- color: var(--tactile-text-muted);
4076
- border-radius: var(--tactile-radius-pill);
4862
+ min-height: 2.75rem;
4863
+ color: var(--tactile-sidebar-muted);
4864
+ border-radius: var(--tactile-radius-md);
4077
4865
  transition: color var(--tactile-transition-fast),background var(--tactile-transition-fast),box-shadow var(--tactile-transition-fast);
4866
+ border: 1px solid #0000;
4078
4867
  justify-content: center;
4079
4868
  align-items: center;
4080
- padding: .65rem 1rem;
4869
+ padding: .72rem 1rem;
4081
4870
  font-weight: 850;
4082
4871
  text-decoration: none;
4083
4872
  display: inline-flex;
4084
4873
  }
4085
4874
 
4086
- .tactile-nav-link:hover, :where([data-ui="tactile"]) .ui-nav-link:hover {
4087
- color: var(--tactile-text);
4088
- background: var(--tactile-surface-soft);
4089
- }
4090
-
4091
- .tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active, :where([data-ui="tactile"]) .ui-nav-link[aria-current="page"], :where([data-ui="tactile"]) .ui-nav-link.is-active {
4092
- color: var(--tactile-on-primary);
4093
- background: var(--tactile-primary);
4094
- }
4095
-
4096
4875
  .tactile-tooltip, [data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
4097
- background: linear-gradient(180deg,#ffffff2e,#00000014),var(--tactile-surface-strong);
4876
+ background: var(--tactile-sidebar-bg);
4098
4877
  max-inline-size: 16rem;
4099
- color: var(--tactile-text);
4100
- border: 1px solid var(--tactile-border);
4101
- border-radius: var(--tactile-radius-lg);
4102
- box-shadow: inset 0 1px 0 #ffffff52,0 .7rem 1.4rem rgb(0 0 0 / var(--tactile-shadow-alpha));
4878
+ color: var(--tactile-sidebar-fg);
4879
+ border: 1px solid rgb(var(--tactile-bg-rgb)/.18);
4880
+ border-radius: var(--tactile-radius-md);
4881
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-bg-rgb)/.08),0 .7rem 1.4rem rgb(var(--tactile-text-rgb)/var(--tactile-shadow-alpha));
4103
4882
  align-items: center;
4104
4883
  gap: .45rem;
4105
4884
  padding: .6rem .82rem;
@@ -4110,9 +4889,9 @@
4110
4889
  }
4111
4890
 
4112
4891
  .tactile-tooltip-arrow {
4113
- background: var(--tactile-surface-strong);
4114
- border: 1px solid var(--tactile-border);
4115
- border-radius: .18rem;
4892
+ background: rgb(var(--tactile-text-rgb)/.9);
4893
+ border: 1px solid rgb(var(--tactile-bg-rgb)/.18);
4894
+ border-radius: .12rem;
4116
4895
  flex: none;
4117
4896
  block-size: .6rem;
4118
4897
  inline-size: .6rem;
@@ -4120,29 +4899,32 @@
4120
4899
  }
4121
4900
 
4122
4901
  .tactile-progress, :where([data-ui="tactile"]) .ui-progress {
4123
- background: var(--tactile-surface-soft);
4124
- border: 1px solid var(--tactile-border);
4125
- border-radius: var(--tactile-radius-pill);
4902
+ background: var(--tactile-recessed-track);
4903
+ border: 1px solid var(--tactile-track-rim);
4904
+ border-radius: var(--tactile-radius-sm);
4126
4905
  width: 100%;
4127
- height: .9rem;
4906
+ height: .8rem;
4907
+ box-shadow: var(--tactile-deep-inset-shadow);
4128
4908
  overflow: hidden;
4129
4909
  }
4130
4910
 
4131
4911
  .tactile-progress-bar, :where([data-ui="tactile"]) .ui-progress-bar {
4132
4912
  height: 100%;
4133
4913
  width: var(--tactile-progress-value, 50%);
4134
- background: linear-gradient(90deg,var(--tactile-primary),var(--tactile-accent));
4135
- border-radius: inherit;
4914
+ background: var(--tactile-progress-fill);
4915
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb)/.2);
4916
+ border-radius: .12rem;
4136
4917
  }
4137
4918
 
4138
4919
  .tactile-alert, :where([data-ui="tactile"]) .ui-alert {
4139
4920
  gap: var(--tactile-space-2);
4140
4921
  padding: var(--tactile-space-4);
4141
- background: var(--tactile-surface);
4922
+ background: var(--tactile-card-bg);
4142
4923
  color: var(--tactile-text);
4143
- border: 1px solid var(--tactile-border);
4924
+ border: 1px solid var(--tactile-keyline);
4144
4925
  border-radius: var(--tactile-radius-lg);
4145
- box-shadow: 0 10px 30px rgb(0 0 0 / var(--tactile-shadow-alpha));
4926
+ box-shadow: var(--tactile-panel-shadow);
4927
+ border-inline-start-width: .28rem;
4146
4928
  display: grid;
4147
4929
  }
4148
4930
 
@@ -4180,16 +4962,17 @@
4180
4962
 
4181
4963
  .tactile-table th, .tactile-table td, :where([data-ui="tactile"]) .ui-table th, :where([data-ui="tactile"]) .ui-table td {
4182
4964
  text-align: left;
4183
- border-bottom: 1px solid var(--tactile-border);
4184
- padding: .95rem 1rem;
4965
+ border-bottom: 1px solid rgb(var(--tactile-border-rgb)/.58);
4966
+ padding: .9rem 1rem;
4185
4967
  }
4186
4968
 
4187
4969
  .tactile-table th, :where([data-ui="tactile"]) .ui-table th {
4188
4970
  color: var(--tactile-text);
4189
4971
  text-transform: uppercase;
4190
4972
  letter-spacing: .08em;
4191
- background: rgb(var(--tactile-primary-rgb)/.08);
4192
- font-size: .82rem;
4973
+ background: var(--tactile-field-bg);
4974
+ box-shadow: inset 0-1px 0 rgb(var(--tactile-text-rgb)/.08);
4975
+ font-size: .78rem;
4193
4976
  font-weight: 900;
4194
4977
  }
4195
4978
 
@@ -4202,7 +4985,7 @@
4202
4985
  }
4203
4986
 
4204
4987
  .tactile-text-primary {
4205
- color: var(--tactile-primary);
4988
+ color: var(--usk-primary-ink, var(--tactile-primary));
4206
4989
  }
4207
4990
 
4208
4991
  .tactile-text-secondary {
@@ -4210,7 +4993,7 @@
4210
4993
  }
4211
4994
 
4212
4995
  .tactile-text-accent {
4213
- color: var(--tactile-accent);
4996
+ color: var(--usk-accent-ink, var(--tactile-accent));
4214
4997
  }
4215
4998
 
4216
4999
  .tactile-text-success {
@@ -4285,22 +5068,23 @@
4285
5068
  }
4286
5069
 
4287
5070
  .tactile-bevel {
4288
- background: linear-gradient(180deg,#ffffff38,#00000014),var(--tactile-surface);
4289
- box-shadow: inset 0 1px 0 #ffffff52,inset 0-1px 0 #0000002e,0 16px 34px rgb(0 0 0 / var(--tactile-shadow-alpha));
5071
+ background: var(--tactile-card-bg);
5072
+ border: 1px solid var(--tactile-keyline);
5073
+ box-shadow: var(--tactile-panel-shadow);
4290
5074
  }
4291
5075
 
4292
5076
  .tactile-pressed {
4293
- background: var(--tactile-surface-soft);
5077
+ background: var(--tactile-inset-bg);
5078
+ box-shadow: var(--tactile-inset-shadow);
4294
5079
  transform: translateY(1px);
4295
- box-shadow: inset 0 4px 14px #00000038, inset 0 -1px #ffffff1f;
4296
5080
  }
4297
5081
 
4298
5082
  .tactile-knob {
4299
- background: radial-gradient(circle at 35% 30%,#ffffff59,transparent 28%),var(--tactile-surface-strong);
4300
- border: 1px solid var(--tactile-border);
5083
+ background: radial-gradient(circle at 35% 30%,rgb(var(--tactile-surface-strong-rgb)/.72),transparent 30%),var(--tactile-thumb-bg);
5084
+ border: 1px solid var(--tactile-keyline);
4301
5085
  block-size: 3.25rem;
4302
5086
  inline-size: 3.25rem;
4303
- box-shadow: inset 0 1px 0 #ffffff4d,0 12px 24px rgb(0 0 0 / var(--tactile-shadow-alpha));
5087
+ box-shadow: var(--tactile-button-shadow);
4304
5088
  border-radius: 50%;
4305
5089
  }
4306
5090
 
@@ -4308,10 +5092,10 @@
4308
5092
  border: .18rem solid rgb(var(--tactile-border-rgb)/.55);
4309
5093
  border-block-start-color: var(--tactile-spinner-stroke);
4310
5094
  border-inline-end-color: var(--tactile-spinner-accent);
4311
- background: linear-gradient(145deg,rgb(var(--tactile-surface-strong-rgb)/.96),rgb(var(--tactile-surface-soft-rgb)/.72));
5095
+ background: var(--tactile-thumb-bg);
4312
5096
  block-size: 2rem;
4313
5097
  inline-size: 2rem;
4314
- box-shadow: inset .16rem .16rem .32rem #0000002e,inset -.16rem -.16rem .32rem #ffffff42,0 .25rem .75rem rgb(0 0 0 / var(--tactile-shadow-alpha));
5098
+ box-shadow: var(--tactile-button-shadow);
4315
5099
  vertical-align: -.2em;
4316
5100
  border-radius: 50%;
4317
5101
  animation: .85s cubic-bezier(.2, .8, .2, 1) infinite tactile-spin;
@@ -4355,9 +5139,10 @@
4355
5139
  .tactile-card-media {
4356
5140
  aspect-ratio: 16 / 9;
4357
5141
  object-fit: cover;
4358
- border: 1px solid rgb(var(--tactile-border-rgb)/.72);
4359
- border-radius: var(--tactile-radius-lg);
5142
+ border: 1px solid var(--tactile-keyline);
5143
+ border-radius: var(--tactile-radius-md);
4360
5144
  inline-size: 100%;
5145
+ box-shadow: var(--tactile-inset-shadow);
4361
5146
  display: block;
4362
5147
  }
4363
5148
 
@@ -4389,7 +5174,7 @@
4389
5174
  }
4390
5175
 
4391
5176
  .tactile-card-accent-edge {
4392
- border-inline-start: .35rem solid var(--tactile-primary);
5177
+ border-inline-start: .28rem solid var(--tactile-primary);
4393
5178
  }
4394
5179
 
4395
5180
  .tactile-icon-medallion {
@@ -4397,8 +5182,8 @@
4397
5182
  block-size: 3.75rem;
4398
5183
  inline-size: 3.75rem;
4399
5184
  color: var(--tactile-on-primary);
4400
- border: 2px solid rgb(var(--tactile-border-rgb)/.82);
4401
- border-radius: 50%;
5185
+ border: 1px solid var(--tactile-keyline);
5186
+ border-radius: var(--tactile-radius-md);
4402
5187
  flex: none;
4403
5188
  place-items: center;
4404
5189
  padding: .7rem;
@@ -4422,7 +5207,7 @@
4422
5207
  }
4423
5208
 
4424
5209
  .tactile-button.tactile-button-outline-heavy, .tactile-button-outline-heavy, :where([data-ui="tactile"]) .ui-button.tactile-button-outline-heavy {
4425
- color: var(--tactile-primary);
5210
+ color: var(--usk-primary-ink, var(--tactile-primary));
4426
5211
  border-style: solid;
4427
5212
  border-width: 2px;
4428
5213
  border-color: var(--tactile-primary);
@@ -4442,7 +5227,7 @@
4442
5227
  inline-size: 5rem;
4443
5228
  min-inline-size: 5rem;
4444
5229
  color: var(--tactile-text);
4445
- border: 2px solid var(--tactile-primary);
5230
+ border: 1px solid var(--tactile-primary);
4446
5231
  text-align: center;
4447
5232
  font-family: var(--tactile-font-heading);
4448
5233
  letter-spacing: .04em;
@@ -4459,11 +5244,10 @@
4459
5244
  .tactile-feature-strip {
4460
5245
  background: var(--tactile-card-bg);
4461
5246
  color: var(--tactile-text);
4462
- border: 1px solid var(--tactile-border);
5247
+ border: 1px solid var(--tactile-keyline);
4463
5248
  border-radius: var(--tactile-radius-lg);
4464
5249
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
4465
5250
  display: grid;
4466
- overflow: hidden;
4467
5251
  }
4468
5252
 
4469
5253
  .tactile-feature-item {
@@ -4491,7 +5275,7 @@
4491
5275
  padding: var(--tactile-space-4) var(--tactile-space-5);
4492
5276
  background: var(--tactile-card-bg);
4493
5277
  color: var(--tactile-text);
4494
- border: 1px solid var(--tactile-border);
5278
+ border: 1px solid var(--tactile-keyline);
4495
5279
  border-radius: var(--tactile-radius-lg);
4496
5280
  grid-template-columns: auto minmax(0, 1fr) auto;
4497
5281
  display: grid;
@@ -4501,12 +5285,8 @@
4501
5285
  min-inline-size: 0;
4502
5286
  }
4503
5287
 
4504
- .tactile-callout-bar > :where(.tactile-button, a, button):last-child, :where([data-ui="tactile"]) .tactile-callout-bar>:where(.ui-button,a,button):last-child {
4505
- justify-self: end;
4506
- }
4507
-
4508
5288
  .tactile-eyebrow {
4509
- color: var(--tactile-primary);
5289
+ color: var(--usk-primary-ink, var(--tactile-primary));
4510
5290
  font-family: var(--tactile-font-heading);
4511
5291
  letter-spacing: .14em;
4512
5292
  text-transform: uppercase;
@@ -4518,9 +5298,9 @@
4518
5298
 
4519
5299
  .tactile-media-scrim {
4520
5300
  isolation: isolate;
4521
- background: var(--tactile-surface-soft);
4522
- border: 1px solid var(--tactile-border);
4523
- border-radius: var(--tactile-radius-lg);
5301
+ background: var(--tactile-inset-bg);
5302
+ border: 1px solid var(--tactile-keyline);
5303
+ border-radius: var(--tactile-radius-md);
4524
5304
  min-block-size: 12rem;
4525
5305
  position: relative;
4526
5306
  overflow: hidden;
@@ -4569,105 +5349,1543 @@
4569
5349
  }
4570
5350
 
4571
5351
  .tactile-card-service, .tactile-card-feature, .tactile-feature-strip, .tactile-callout-bar {
4572
- box-shadow: 0 .75rem 1.6rem #00000038, inset 0 1px #ffffff47;
5352
+ box-shadow: var(--tactile-panel-shadow);
4573
5353
  }
4574
5354
 
4575
5355
  .tactile-icon-medallion, .tactile-badge-seal {
4576
- background: linear-gradient(145deg,#ffffff38,#00000014),var(--tactile-primary);
4577
- box-shadow: inset 0 1px #fff6, 0 .45rem .85rem #00000038;
5356
+ background: var(--tactile-action-bg);
5357
+ box-shadow: var(--tactile-button-shadow);
4578
5358
  }
4579
5359
 
4580
5360
  .tactile-button-outline-heavy {
4581
- box-shadow: inset 0 1px #ffffff3d, 0 .35rem .7rem #0000002e;
5361
+ box-shadow: var(--tactile-button-shadow);
4582
5362
  }
4583
5363
 
4584
5364
  .tactile-button.tactile-button-cut, .tactile-button-cut, :where([data-ui="tactile"]) .ui-button.tactile-button-cut {
4585
5365
  clip-path: polygon(.38rem 0, calc(100% - .38rem) 0, 100% .38rem, 100% calc(100% - .38rem), calc(100% - .38rem) 100%, .38rem 100%, 0 calc(100% - .38rem), 0 .38rem);
4586
5366
  justify-content: center;
4587
5367
  justify-self: center;
5368
+ min-block-size: 2.75rem;
4588
5369
  min-inline-size: 6rem;
4589
5370
  max-inline-size: 100%;
4590
5371
  }
4591
5372
 
4592
5373
  .tactile-button.tactile-button-outline-heavy, .tactile-button-outline-heavy, :where([data-ui="tactile"]) .ui-button.tactile-button-outline-heavy {
4593
5374
  clip-path: polygon(.28rem 0, calc(100% - .28rem) 0, 100% .28rem, 100% calc(100% - .28rem), calc(100% - .28rem) 100%, .28rem 100%, 0 calc(100% - .28rem), 0 .28rem);
4594
- box-shadow: inset 0 2px 0 rgb(var(--tactile-surface-strong-rgb)/.72),0 .38rem .72rem rgb(var(--tactile-text-rgb)/.2);
5375
+ box-shadow: var(--tactile-button-shadow);
4595
5376
  border-width: 2px;
4596
5377
  border-radius: 0;
4597
5378
  }
4598
5379
 
4599
5380
  .tactile-card-service, .tactile-media-scrim, .tactile-feature-strip, .tactile-callout-bar, .tactile-well {
4600
- background: linear-gradient(145deg,rgb(var(--tactile-surface-strong-rgb)/.78),rgb(var(--tactile-surface-rgb)/.72));
4601
- border: 1px solid var(--tactile-border);
5381
+ background: var(--tactile-card-bg);
5382
+ border: 1px solid var(--tactile-keyline);
4602
5383
  border-radius: var(--tactile-radius-lg);
4603
- box-shadow: inset 0 2px 0 rgb(var(--tactile-surface-strong-rgb)/.78),0 .65rem 1.25rem rgb(var(--tactile-text-rgb)/.2);
5384
+ box-shadow: var(--tactile-panel-shadow);
4604
5385
  }
4605
5386
 
4606
- [data-ui="tactile"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
4607
- border: 1px solid var(--tactile-primary);
5387
+ [data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5388
+ background: var(--tactile-control-bg);
5389
+ color: var(--tactile-text);
5390
+ border: 1px solid var(--tactile-keyline);
4608
5391
  border-radius: var(--tactile-radius-md);
4609
- box-shadow: inset 0 2px 0 rgb(var(--tactile-surface-strong-rgb)/.8),0 .34rem .68rem rgb(var(--tactile-text-rgb)/.2);
5392
+ box-shadow: var(--tactile-button-shadow);
4610
5393
  }
4611
5394
 
4612
- [data-ui="tactile"][data-theme][data-mode] :where(dialog) {
5395
+ [data-ui="tactile"][data-mode] :where(dialog) {
4613
5396
  background-color: var(--tactile-surface);
4614
- background-image: linear-gradient(145deg,rgb(var(--tactile-surface-strong-rgb)/.84),rgb(var(--tactile-surface-rgb)/.78));
4615
- border: 1px solid var(--tactile-border);
5397
+ background-image: var(--tactile-card-bg);
5398
+ border: 1px solid var(--tactile-keyline);
4616
5399
  border-radius: var(--tactile-radius-lg);
4617
- box-shadow: inset 0 2px 0 rgb(var(--tactile-surface-strong-rgb)/.78),0 1rem 2rem rgb(var(--tactile-text-rgb)/.24);
5400
+ box-shadow: var(--tactile-panel-shadow);
5401
+ }
5402
+
5403
+ [data-ui="tactile"][data-mode] {
5404
+ --tactile-card-bg: var(--tactile-paper-grain), var(--tactile-paper-bg), var(--tactile-surface);
5405
+ --tactile-control-bg: linear-gradient(180deg, var(--tactile-bevel-highlight), transparent .28rem), linear-gradient(180deg, rgb(var(--tactile-surface-strong-rgb) / .94), rgb(var(--tactile-surface-soft-rgb) / .76));
5406
+ --tactile-field-bg: linear-gradient(180deg, rgb(var(--tactile-text-rgb) / .055), transparent .2rem), linear-gradient(180deg, rgb(var(--tactile-surface-soft-rgb) / .78), rgb(var(--tactile-surface-strong-rgb) / .62));
5407
+ --tactile-inset-bg: linear-gradient(180deg, rgb(var(--tactile-text-rgb) / .07), transparent .28rem), rgb(var(--tactile-surface-soft-rgb) / .72);
5408
+ --tactile-keyline: rgb(var(--tactile-text-rgb) / max(.58, calc(var(--tactile-border-alpha) * .86)));
5409
+ --tactile-panel-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -3px 0 var(--tactile-bevel-shadow), 0 2px 0 var(--tactile-keyline), 0 .42rem .9rem rgb(var(--tactile-text-rgb) / var(--tactile-shadow-alpha));
5410
+ --tactile-button-shadow: inset 0 2px 0 var(--tactile-bevel-highlight), inset 0 -3px 0 var(--tactile-bevel-shadow), 0 2px 0 var(--tactile-keyline), 0 .3rem .58rem rgb(var(--tactile-text-rgb) / calc(var(--tactile-shadow-alpha) * .82));
5411
+ --tactile-inset-shadow: inset .18rem .2rem .38rem rgb(var(--tactile-text-rgb) / .25), inset -.08rem -.08rem .16rem rgb(var(--tactile-surface-strong-rgb) / .34);
5412
+ --tactile-deep-inset-shadow: inset .2rem .22rem .38rem #000000ad, inset -.08rem -.08rem .14rem rgb(var(--tactile-surface-strong-rgb) / .12);
5413
+ --tactile-progress-fill: repeating-linear-gradient(90deg, var(--tactile-success) 0 calc(12.5% - .16rem), transparent calc(12.5% - .16rem) 12.5%), var(--tactile-primary);
5414
+ --usk-native-panel-padding: 1.2rem;
5415
+ --usk-native-control-min-block-size: 3.05rem;
5416
+ --usk-native-control-padding-block: .7rem;
5417
+ --usk-native-control-padding-inline: .9rem;
5418
+ --usk-native-subcontrol-padding-block: .52rem;
5419
+ --usk-native-subcontrol-padding-inline: .7rem;
5420
+ --usk-native-choice-size: 1.3rem;
5421
+ --usk-native-choice-background: var(--tactile-field-bg);
5422
+ --usk-native-choice-border: 1px solid var(--tactile-keyline);
5423
+ --usk-native-choice-shadow: var(--tactile-inset-shadow);
5424
+ --usk-native-checkbox-radius: .08rem;
5425
+ --usk-native-select-indicator-size: .42rem .42rem, .42rem .42rem;
5426
+ --usk-native-range-track-size: .68rem;
5427
+ --usk-native-range-track-border: 2px solid var(--tactile-track-rim);
5428
+ --usk-native-range-track-radius: 0;
5429
+ --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
5430
+ --usk-native-range-thumb-size: 1.65rem;
5431
+ --usk-native-range-thumb-border: 2px solid var(--tactile-keyline);
5432
+ --usk-native-range-thumb-radius: .08rem;
5433
+ --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
5434
+ --usk-native-progress-size: .85rem;
5435
+ --usk-native-progress-track-border: 2px solid var(--tactile-track-rim);
5436
+ --usk-native-progress-track-radius: 0;
5437
+ --usk-native-progress-track-shadow: var(--tactile-deep-inset-shadow);
5438
+ --usk-native-progress-value-background: var(--tactile-progress-fill);
5439
+ --usk-native-progress-value-radius: 0;
5440
+ --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--tactile-surface-strong-rgb) / .24);
5441
+ --usk-native-file-button-border: 2px solid var(--tactile-keyline);
5442
+ --usk-native-file-button-radius: .08rem;
5443
+ --usk-native-scrollbar-size: 1rem;
5444
+ --usk-native-scrollbar-radius: 0;
4618
5445
  }
4619
5446
 
4620
- .tactile-button[aria-busy="true"]:after, .tactile-icon-button[aria-busy="true"]:after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="tactile"]) .ui-button[aria-busy="true"]:after, :where([data-ui="tactile"]) .ui-icon-button[aria-busy="true"]:after {
4621
- clip-path: circle(50%);
4622
- background: linear-gradient(145deg, #ffffff59, #0000 48%);
4623
- border: .12em solid;
4624
- border-radius: 50%;
4625
- animation: .88s cubic-bezier(.2, .8, .2, 1) infinite tactile-spin;
4626
- box-shadow: inset .1em .1em .18em #0000004d, inset -.08em -.08em .15em #ffffff52, 0 .08em .16em #00000038;
5447
+ .tactile-title {
5448
+ font-family: var(--tactile-font-display);
5449
+ letter-spacing: -.035em;
5450
+ font-weight: 750;
4627
5451
  }
4628
5452
 
4629
- @media (prefers-reduced-motion: reduce) {
4630
- [data-ui="tactile"] *, [data-ui="tactile"] :before, [data-ui="tactile"] :after {
4631
- scroll-behavior: auto !important;
4632
- transition-duration: 1ms !important;
4633
- animation-duration: 1ms !important;
4634
- animation-iteration-count: 1 !important;
4635
- }
5453
+ .tactile-heading {
5454
+ font-family: var(--tactile-font-heading);
5455
+ letter-spacing: -.018em;
5456
+ font-weight: 750;
4636
5457
  }
4637
5458
 
4638
- @media (prefers-contrast: more) {
4639
- [data-ui="tactile"] {
4640
- --tactile-border-alpha: 1;
4641
- --tactile-focus-alpha: .75;
4642
- }
5459
+ .tactile-button, .tactile-icon-button, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-icon-button {
5460
+ border: 1px solid var(--tactile-keyline);
5461
+ min-height: 3.05rem;
5462
+ box-shadow: var(--tactile-button-shadow);
5463
+ clip-path: polygon(.24rem 0, calc(100% - .24rem) 0, 100% .24rem, 100% calc(100% - .24rem), calc(100% - .24rem) 100%, .24rem 100%, 0 calc(100% - .24rem), 0 .24rem);
5464
+ letter-spacing: .025em;
5465
+ border-radius: 0;
5466
+ padding: .7rem 1.05rem;
5467
+ font-weight: 850;
4643
5468
  }
4644
5469
 
4645
- @media (forced-colors: active) {
4646
- @supports (forced-color-adjust: auto) {
4647
- [data-ui="tactile"] * {
4648
- forced-color-adjust: auto;
4649
- }
4650
- }
5470
+ .tactile-button:hover, .tactile-icon-button:hover, :where([data-ui="tactile"]) .ui-button:hover, :where([data-ui="tactile"]) .ui-icon-button:hover {
5471
+ box-shadow: inset 0 2px 0 var(--tactile-bevel-highlight),inset 0-3px 0 var(--tactile-bevel-shadow),0 3px 0 var(--tactile-keyline),0 .4rem .72rem rgb(var(--tactile-text-rgb)/var(--tactile-shadow-alpha));
5472
+ transform: translateY(-1px);
5473
+ }
4651
5474
 
4652
- [data-ui="tactile"] :where(:focus-visible) {
4653
- outline: 3px solid canvastext;
4654
- }
5475
+ .tactile-input:focus, .tactile-textarea:focus, .tactile-select:focus, :where([data-ui="tactile"]) .ui-input:focus, :where([data-ui="tactile"]) .ui-textarea:focus, :where([data-ui="tactile"]) .ui-select:focus {
5476
+ border-color: var(--tactile-focus);
5477
+ box-shadow: var(--tactile-inset-shadow),var(--tactile-focus-ring);
4655
5478
  }
4656
5479
 
4657
- @media print {
4658
- [data-ui="tactile"] {
4659
- color: #000 !important;
4660
- background: #fff !important;
4661
- }
5480
+ .tactile-badge, :where([data-ui="tactile"]) .ui-badge {
5481
+ border: 1px solid var(--tactile-keyline);
5482
+ border-radius: var(--tactile-radius-xs);
5483
+ min-height: 1.6rem;
5484
+ box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight),0 1px 0 var(--tactile-keyline);
5485
+ letter-spacing: .08em;
5486
+ text-transform: uppercase;
5487
+ padding: .28rem .58rem;
5488
+ font-size: .7rem;
5489
+ font-weight: 900;
5490
+ }
4662
5491
 
4663
- [data-ui="tactile"] * {
4664
- box-shadow: none !important;
4665
- text-shadow: none !important;
4666
- }
5492
+ .tactile-nav, :where([data-ui="tactile"]) .ui-nav {
5493
+ background: var(--tactile-sidebar-bg);
5494
+ border: 1px solid var(--tactile-keyline);
5495
+ border-radius: var(--tactile-radius-md);
5496
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-bg-rgb)/.1),inset 0-2px 0 #00000073,0 .35rem .8rem rgb(var(--tactile-text-rgb)/var(--tactile-shadow-alpha));
5497
+ gap: .2rem;
5498
+ padding: .4rem;
5499
+ }
4667
5500
 
4668
- [data-ui="tactile"] a {
4669
- text-decoration: underline;
4670
- color: #000 !important;
4671
- }
5501
+ .tactile-nav-link, :where([data-ui="tactile"]) .ui-nav-link {
5502
+ border-radius: var(--tactile-radius-xs);
5503
+ letter-spacing: .08em;
5504
+ text-transform: uppercase;
5505
+ min-height: 2.55rem;
5506
+ padding: .62rem .82rem;
5507
+ font-size: .75rem;
5508
+ font-weight: 900;
5509
+ }
5510
+
5511
+ .tactile-alert-title, :where([data-ui="tactile"]) .ui-alert-title {
5512
+ letter-spacing: .08em;
5513
+ text-transform: uppercase;
5514
+ font-size: .76rem;
5515
+ font-weight: 900;
5516
+ }
5517
+
5518
+ .tactile-table, :where([data-ui="tactile"]) .ui-table {
5519
+ border-collapse: separate;
5520
+ border-spacing: 0;
5521
+ }
5522
+
5523
+ .tactile-table th, .tactile-table td, :where([data-ui="tactile"]) .ui-table th, :where([data-ui="tactile"]) .ui-table td {
5524
+ border-inline-end: 1px solid var(--tactile-keyline);
5525
+ border-bottom: 1px solid var(--tactile-keyline);
5526
+ padding: .72rem .82rem;
5527
+ }
5528
+
5529
+ .tactile-table th, :where([data-ui="tactile"]) .ui-table th {
5530
+ color: var(--tactile-sidebar-fg);
5531
+ background: var(--tactile-sidebar-bg);
5532
+ box-shadow: inset 0 -2px #0000006b;
5533
+ }
5534
+
5535
+ .tactile-table td, :where([data-ui="tactile"]) .ui-table td {
5536
+ background: var(--tactile-field-bg);
5537
+ box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight);
5538
+ }
5539
+
5540
+ .tactile-card-service, .tactile-card-feature, .tactile-feature-strip, .tactile-callout-bar {
5541
+ background: var(--tactile-card-bg);
5542
+ border: 1px solid var(--tactile-keyline);
5543
+ border-radius: var(--tactile-radius-lg);
5544
+ box-shadow: var(--tactile-panel-shadow);
5545
+ padding: 1rem;
5546
+ }
5547
+
5548
+ .tactile-card-service {
5549
+ text-align: start;
5550
+ }
5551
+
5552
+ .tactile-feature-item {
5553
+ background: var(--tactile-inset-bg);
5554
+ border-inline-end: 1px solid var(--tactile-keyline);
5555
+ box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight),inset 0-1px 0 var(--tactile-bevel-shadow);
5556
+ padding: .85rem 1rem;
5557
+ }
5558
+
5559
+ .tactile-callout-bar {
5560
+ color: var(--tactile-sidebar-fg);
5561
+ background: var(--tactile-sidebar-bg);
5562
+ border-width: 2px;
5563
+ }
5564
+
5565
+ .tactile-callout-bar > :where(.tactile-button, a, button):last-child, :where([data-ui="tactile"]) .tactile-callout-bar>:where(.ui-button,a,button):last-child {
5566
+ justify-self: end;
5567
+ }
5568
+
5569
+ [data-ui="tactile"][data-mode] :where(fieldset, article, aside, details, dialog) {
5570
+ background-color: var(--tactile-surface);
5571
+ background-image: var(--tactile-card-bg);
5572
+ border: 1px solid var(--tactile-keyline);
5573
+ border-radius: var(--tactile-radius-lg);
5574
+ box-shadow: var(--tactile-panel-shadow);
5575
+ }
5576
+
5577
+ [data-ui="tactile"][data-mode] :where(legend) {
5578
+ background: var(--tactile-control-bg);
5579
+ border: 1px solid var(--tactile-keyline);
5580
+ border-radius: var(--tactile-radius-xs);
5581
+ box-shadow: var(--tactile-button-shadow);
5582
+ letter-spacing: .1em;
5583
+ text-transform: uppercase;
5584
+ padding: .32rem .58rem;
5585
+ font-size: .7rem;
5586
+ font-weight: 900;
5587
+ }
5588
+
5589
+ [data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
5590
+ border: 1px solid var(--tactile-keyline);
5591
+ box-shadow: var(--tactile-button-shadow);
5592
+ clip-path: polygon(.2rem 0, calc(100% - .2rem) 0, 100% .2rem, 100% calc(100% - .2rem), calc(100% - .2rem) 100%, .2rem 100%, 0 calc(100% - .2rem), 0 .2rem);
5593
+ border-radius: 0;
5594
+ }
5595
+
5596
+ [data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])):active {
5597
+ box-shadow: var(--tactile-inset-shadow);
5598
+ transform: translateY(2px);
5599
+ }
5600
+
5601
+ [data-ui="tactile"][data-mode] :where(dialog) {
5602
+ border: 2px solid var(--tactile-keyline);
5603
+ border-radius: var(--tactile-radius-lg);
5604
+ box-shadow: var(--tactile-panel-shadow);
5605
+ }
5606
+
5607
+ .tactile-button[aria-busy="true"]:after, .tactile-icon-button[aria-busy="true"]:after, [data-ui="tactile"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]):after, :where([data-ui="tactile"]) .ui-button[aria-busy="true"]:after, :where([data-ui="tactile"]) .ui-icon-button[aria-busy="true"]:after {
5608
+ clip-path: circle(50%);
5609
+ background: linear-gradient(145deg, #ffffff59, #0000 48%);
5610
+ border: .12em solid;
5611
+ border-radius: 50%;
5612
+ animation: .88s cubic-bezier(.2, .8, .2, 1) infinite tactile-spin;
5613
+ box-shadow: inset .1em .1em .18em #0000004d, inset -.08em -.08em .15em #ffffff52, 0 .08em .16em #00000038;
5614
+ }
5615
+
5616
+ @media (prefers-reduced-motion: reduce) {
5617
+ [data-ui="tactile"] *, [data-ui="tactile"] :before, [data-ui="tactile"] :after {
5618
+ scroll-behavior: auto !important;
5619
+ transition-duration: 1ms !important;
5620
+ animation-duration: 1ms !important;
5621
+ animation-iteration-count: 1 !important;
5622
+ }
5623
+ }
5624
+
5625
+ @media (prefers-contrast: more) {
5626
+ [data-ui="tactile"] {
5627
+ --tactile-border-alpha: 1;
5628
+ --tactile-focus-alpha: .75;
5629
+ }
5630
+ }
5631
+
5632
+ @media (forced-colors: active) {
5633
+ @supports (forced-color-adjust: auto) {
5634
+ [data-ui="tactile"] * {
5635
+ forced-color-adjust: auto;
5636
+ }
5637
+ }
5638
+
5639
+ [data-ui="tactile"] :where(:focus-visible) {
5640
+ outline: 3px solid canvastext;
5641
+ }
5642
+ }
5643
+
5644
+ @media print {
5645
+ [data-ui="tactile"] {
5646
+ color: #000 !important;
5647
+ background: #fff !important;
5648
+ }
5649
+
5650
+ [data-ui="tactile"] * {
5651
+ box-shadow: none !important;
5652
+ text-shadow: none !important;
5653
+ }
5654
+
5655
+ [data-ui="tactile"] a {
5656
+ text-decoration: underline;
5657
+ color: #000 !important;
5658
+ }
5659
+ }
5660
+
5661
+ .tactile-input[aria-invalid="true"], .tactile-textarea[aria-invalid="true"], .tactile-select[aria-invalid="true"], :where([data-ui="tactile"]) .ui-input[aria-invalid="true"], :where([data-ui="tactile"]) .ui-textarea[aria-invalid="true"], :where([data-ui="tactile"]) .ui-select[aria-invalid="true"] {
5662
+ border-color: var(--tactile-danger);
5663
+ box-shadow: 0 0 0 2px rgb(var(--tactile-danger-rgb)/.18);
5664
+ }
5665
+
5666
+ .tactile-input[readonly], .tactile-textarea[readonly], :where([data-ui="tactile"]) .ui-input[readonly], :where([data-ui="tactile"]) .ui-textarea[readonly] {
5667
+ filter: saturate(.72);
5668
+ opacity: .78;
5669
+ border-style: dashed;
5670
+ }
5671
+
5672
+ .tactile-title {
5673
+ font-family: var(--tactile-font-display);
5674
+ letter-spacing: max(.022em, .5px);
5675
+ margin-block: .75rem;
5676
+ font-weight: 750;
5677
+ }
5678
+
5679
+ .tactile-label, :where([data-ui="tactile"]) .ui-label {
5680
+ letter-spacing: .12em;
5681
+ text-transform: uppercase;
5682
+ font-size: .72rem;
5683
+ font-weight: 900;
5684
+ }
5685
+
5686
+ .tactile-button, .tactile-icon-button, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-icon-button {
5687
+ background: var(--tactile-control-bg);
5688
+ border: 1px solid var(--tactile-keyline);
5689
+ min-height: 3.05rem;
5690
+ box-shadow: var(--tactile-button-shadow);
5691
+ clip-path: polygon(.24rem 0, calc(100% - .24rem) 0, 100% .24rem, 100% calc(100% - .24rem), calc(100% - .24rem) 100%, .24rem 100%, 0 calc(100% - .24rem), 0 .24rem);
5692
+ border-radius: 0;
5693
+ padding: .7rem 1.05rem;
5694
+ font-weight: 850;
5695
+ }
5696
+
5697
+ .tactile-icon-button, :where([data-ui="tactile"]) .ui-icon-button {
5698
+ padding: 0;
5699
+ }
5700
+
5701
+ .tactile-button-primary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]) {
5702
+ background: var(--tactile-action-bg);
5703
+ box-shadow: var(--tactile-button-shadow);
5704
+ }
5705
+
5706
+ .tactile-button-secondary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="secondary"]) {
5707
+ background: var(--tactile-control-bg);
5708
+ box-shadow: var(--tactile-button-shadow);
5709
+ }
5710
+
5711
+ .tactile-button-danger, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="danger"]) {
5712
+ background: var(--tactile-danger);
5713
+ box-shadow: var(--tactile-button-shadow);
5714
+ }
5715
+
5716
+ .tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-button:active, :where([data-ui="tactile"]) .ui-icon-button:active, :where([data-ui="tactile"]) .ui-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-icon-button[aria-pressed="true"] {
5717
+ box-shadow: var(--tactile-inset-shadow);
5718
+ transform: translateY(2px);
5719
+ }
5720
+
5721
+ .tactile-input, .tactile-textarea, .tactile-select, :where([data-ui="tactile"]) .ui-input, :where([data-ui="tactile"]) .ui-textarea, :where([data-ui="tactile"]) .ui-select {
5722
+ background: var(--tactile-field-bg);
5723
+ border: 1px solid var(--tactile-keyline);
5724
+ min-height: 3.05rem;
5725
+ box-shadow: var(--tactile-inset-shadow);
5726
+ border-radius: .28rem;
5727
+ padding: .7rem .9rem;
5728
+ }
5729
+
5730
+ .tactile-well, .tactile-inset {
5731
+ background: var(--tactile-inset-bg);
5732
+ border: 1px solid var(--tactile-keyline);
5733
+ box-shadow: var(--tactile-inset-shadow);
5734
+ border-radius: .28rem;
5735
+ }
5736
+
5737
+ .tactile-badge, :where([data-ui="tactile"]) .ui-badge {
5738
+ border-radius: var(--tactile-radius-xs);
5739
+ min-height: 1.6rem;
5740
+ padding: .28rem .58rem;
5741
+ }
5742
+
5743
+ .tactile-alert, :where([data-ui="tactile"]) .ui-alert {
5744
+ background: var(--tactile-card-bg);
5745
+ border: 2px solid var(--tactile-keyline);
5746
+ box-shadow: var(--tactile-panel-shadow);
5747
+ border-inline-start-width: .45rem;
5748
+ border-radius: .28rem;
5749
+ }
5750
+
5751
+ .tactile-progress, :where([data-ui="tactile"]) .ui-progress {
5752
+ background: var(--tactile-recessed-track);
5753
+ border: 2px solid var(--tactile-track-rim);
5754
+ height: .85rem;
5755
+ box-shadow: var(--tactile-deep-inset-shadow);
5756
+ }
5757
+
5758
+ .tactile-progress-bar, :where([data-ui="tactile"]) .ui-progress-bar {
5759
+ background: var(--tactile-progress-fill);
5760
+ border-radius: 0;
5761
+ }
5762
+
5763
+ .tactile-table-wrap, :where([data-ui="tactile"]) .ui-table-wrap {
5764
+ background: var(--tactile-card-bg);
5765
+ box-shadow: var(--tactile-panel-shadow);
5766
+ border-radius: .4rem;
5767
+ }
5768
+
5769
+ .tactile-table th, :where([data-ui="tactile"]) .ui-table th {
5770
+ background: var(--tactile-sidebar-bg);
5771
+ padding: .72rem .82rem;
5772
+ font-weight: 900;
5773
+ }
5774
+
5775
+ .tactile-table td, :where([data-ui="tactile"]) .ui-table td {
5776
+ background: var(--tactile-field-bg);
5777
+ padding: .72rem .82rem;
5778
+ }
5779
+
5780
+ .tactile-nav, :where([data-ui="tactile"]) .ui-nav {
5781
+ background: var(--tactile-sidebar-bg);
5782
+ border: 1px solid var(--tactile-keyline);
5783
+ box-shadow: var(--tactile-panel-shadow);
5784
+ border-radius: .35rem;
5785
+ }
5786
+
5787
+ .tactile-nav-link, :where([data-ui="tactile"]) .ui-nav-link {
5788
+ border-radius: .12rem;
5789
+ min-height: 2.55rem;
5790
+ padding: .62rem .82rem;
5791
+ }
5792
+
5793
+ .tactile-tooltip, [data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
5794
+ border: 1px solid var(--tactile-keyline);
5795
+ box-shadow: var(--tactile-panel-shadow);
5796
+ border-radius: .2rem;
5797
+ }
5798
+
5799
+ .tactile-feature-item {
5800
+ background: var(--tactile-inset-bg);
5801
+ padding: .85rem 1rem;
5802
+ }
5803
+
5804
+ [data-ui="tactile"][data-mode] :where(fieldset, article, aside, details, dialog) {
5805
+ background: var(--tactile-card-bg);
5806
+ border: 1px solid var(--tactile-keyline);
5807
+ box-shadow: var(--tactile-panel-shadow);
5808
+ border-radius: .4rem;
5809
+ }
5810
+
5811
+ .tactile-button-primary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]) {
5812
+ background: var(--tactile-primary);
5813
+ color: var(--tactile-on-primary);
5814
+ border-color: var(--tactile-primary);
5815
+ }
5816
+
5817
+ .tactile-button-ghost, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="ghost"]) {
5818
+ color: var(--usk-primary-ink, var(--tactile-primary));
5819
+ background: none;
5820
+ border-color: #0000;
5821
+ }
5822
+
5823
+ .tactile-feature-item > .tactile-icon-medallion {
5824
+ font-size: 1.5rem;
5825
+ line-height: 1;
5826
+ }
5827
+
5828
+ .tactile-callout-bar > .tactile-icon-medallion {
5829
+ min-block-size: 4.5rem;
5830
+ min-inline-size: 4.5rem;
5831
+ font-size: 2rem;
5832
+ font-weight: 800;
5833
+ line-height: 1;
5834
+ }
5835
+
5836
+ :root {
5837
+ --tactile-font-sans: "Segoe UI", Tahoma, Arial, sans-serif;
5838
+ --tactile-font-display: Georgia, Cambria, "Times New Roman", Times, serif;
5839
+ --tactile-font-body: var(--tactile-font-sans);
5840
+ --tactile-font-heading: var(--tactile-font-display);
5841
+ --tactile-font-control: "Arial Narrow", "Aptos Narrow", "Segoe UI", Tahoma, Arial, sans-serif;
5842
+ --tactile-radius-xs: .12rem;
5843
+ --tactile-radius-sm: .18rem;
5844
+ --tactile-radius-md: .24rem;
5845
+ --tactile-radius-lg: .38rem;
5846
+ --tactile-radius-xl: .5rem;
5847
+ }
5848
+
5849
+ [data-ui="tactile"][data-mode="light"] {
5850
+ --tactile-paper-rgb: 246 240 224;
5851
+ --tactile-paper-deep-rgb: 229 218 194;
5852
+ --tactile-paper-highlight-rgb: 255 252 241;
5853
+ --tactile-ink-rgb: 45 40 34;
5854
+ --tactile-muted-ink-rgb: 96 86 73;
5855
+ --tactile-keyline-rgb: 158 135 99;
5856
+ --tactile-material-shadow-rgb: 74 61 43;
5857
+ --tactile-track-rgb: 37 33 31;
5858
+ --tactile-sidebar-rgb: 45 41 36;
5859
+ --tactile-sidebar-text-rgb: 236 221 190;
5860
+ --tactile-copper-rgb: 177 60 28;
5861
+ --tactile-olive-rgb: 91 104 67;
5862
+ --tactile-brass-rgb: 197 160 82;
5863
+ }
5864
+
5865
+ [data-ui="tactile"][data-mode="dark"] {
5866
+ --tactile-paper-rgb: 57 51 44;
5867
+ --tactile-paper-deep-rgb: 42 38 34;
5868
+ --tactile-paper-highlight-rgb: 84 75 63;
5869
+ --tactile-ink-rgb: 241 232 214;
5870
+ --tactile-muted-ink-rgb: 198 184 158;
5871
+ --tactile-keyline-rgb: 151 128 91;
5872
+ --tactile-material-shadow-rgb: 0 0 0;
5873
+ --tactile-track-rgb: 25 23 21;
5874
+ --tactile-sidebar-rgb: 27 25 23;
5875
+ --tactile-sidebar-text-rgb: 236 218 184;
5876
+ --tactile-copper-rgb: 211 83 43;
5877
+ --tactile-olive-rgb: 131 145 92;
5878
+ --tactile-brass-rgb: 222 181 91;
5879
+ }
5880
+
5881
+ [data-ui="tactile"][data-mode="contrast"] {
5882
+ --tactile-paper-rgb: 0 0 0;
5883
+ --tactile-paper-deep-rgb: 0 0 0;
5884
+ --tactile-paper-highlight-rgb: 255 255 255;
5885
+ --tactile-ink-rgb: 255 255 255;
5886
+ --tactile-muted-ink-rgb: 255 255 255;
5887
+ --tactile-keyline-rgb: 255 255 255;
5888
+ --tactile-material-shadow-rgb: 0 0 0;
5889
+ --tactile-track-rgb: 0 0 0;
5890
+ --tactile-sidebar-rgb: 0 0 0;
5891
+ --tactile-sidebar-text-rgb: 255 255 255;
5892
+ --tactile-copper-rgb: 255 110 48;
5893
+ --tactile-olive-rgb: 196 232 112;
5894
+ --tactile-brass-rgb: 255 214 102;
5895
+ }
5896
+
5897
+ [data-ui="tactile"][data-theme][data-mode] {
5898
+ --tactile-paper-rgb: var(--usk-bg-rgb);
5899
+ --tactile-paper-deep-rgb: var(--usk-surface-soft-rgb);
5900
+ --tactile-paper-highlight-rgb: var(--usk-surface-strong-rgb);
5901
+ --tactile-ink-rgb: var(--usk-text-rgb);
5902
+ --tactile-muted-ink-rgb: var(--usk-text-muted-rgb);
5903
+ --tactile-keyline-rgb: var(--usk-border-rgb);
5904
+ --tactile-material-shadow-rgb: var(--usk-text-rgb);
5905
+ --tactile-track-rgb: var(--usk-text-rgb);
5906
+ --tactile-sidebar-rgb: var(--usk-text-rgb);
5907
+ --tactile-sidebar-text-rgb: var(--usk-bg-rgb);
5908
+ --tactile-copper-rgb: var(--usk-primary-rgb);
5909
+ --tactile-olive-rgb: var(--usk-success-rgb);
5910
+ --tactile-brass-rgb: var(--usk-accent-rgb);
5911
+ }
5912
+
5913
+ [data-ui="tactile"][data-mode] {
5914
+ --tactile-paper: rgb(var(--tactile-paper-rgb));
5915
+ --tactile-paper-deep: rgb(var(--tactile-paper-deep-rgb));
5916
+ --tactile-paper-highlight: rgb(var(--tactile-paper-highlight-rgb));
5917
+ --tactile-ink: rgb(var(--tactile-ink-rgb));
5918
+ --tactile-muted-ink: rgb(var(--tactile-muted-ink-rgb));
5919
+ --tactile-copper: rgb(var(--tactile-copper-rgb));
5920
+ --tactile-olive: rgb(var(--tactile-olive-rgb));
5921
+ --tactile-brass: rgb(var(--tactile-brass-rgb));
5922
+ --tactile-bg: var(--tactile-paper);
5923
+ --tactile-surface: var(--tactile-paper);
5924
+ --tactile-surface-strong: var(--tactile-paper-highlight);
5925
+ --tactile-surface-soft: var(--tactile-paper-deep);
5926
+ --tactile-text: var(--tactile-ink);
5927
+ --tactile-text-muted: var(--tactile-muted-ink);
5928
+ --tactile-fg: var(--tactile-ink);
5929
+ --tactile-surface-fg: var(--tactile-ink);
5930
+ --tactile-muted: var(--tactile-muted-ink);
5931
+ --tactile-control-fg: var(--tactile-ink);
5932
+ --tactile-border: rgb(var(--tactile-keyline-rgb) / .72);
5933
+ --tactile-keyline: rgb(var(--tactile-keyline-rgb) / .78);
5934
+ --tactile-bevel-highlight: rgb(var(--tactile-paper-highlight-rgb) / .88);
5935
+ --tactile-bevel-shadow: rgb(var(--tactile-material-shadow-rgb) / .24);
5936
+ --tactile-paper-wash: rgb(var(--tactile-brass-rgb) / .06);
5937
+ --tactile-paper-grain: radial-gradient(circle at 16% 22%, rgb(var(--tactile-ink-rgb) / .025) 0 1px, transparent 1.2px), radial-gradient(circle at 72% 64%, rgb(var(--tactile-brass-rgb) / .04) 0 1px, transparent 1.3px), repeating-linear-gradient(96deg, transparent 0 2.4rem, rgb(var(--tactile-ink-rgb) / .012) 2.45rem 2.5rem);
5938
+ --tactile-paper-bg: linear-gradient(180deg, rgb(var(--tactile-paper-highlight-rgb) / .34), transparent 11rem), linear-gradient(102deg, rgb(var(--tactile-brass-rgb) / .035), transparent 32rem), var(--tactile-paper);
5939
+ --tactile-theme-bg: var(--tactile-paper-grain), var(--tactile-paper-bg);
5940
+ --tactile-card-bg: var(--tactile-paper-grain), var(--tactile-paper-bg);
5941
+ --tactile-control-bg: linear-gradient(180deg, var(--tactile-paper-highlight) 0, var(--tactile-paper) 48%, var(--tactile-paper-deep) 100%);
5942
+ --tactile-field-bg: linear-gradient(180deg, rgb(var(--tactile-material-shadow-rgb) / .075), transparent .24rem), linear-gradient(180deg, var(--tactile-paper) 0, rgb(var(--tactile-paper-highlight-rgb) / .7) 100%);
5943
+ --tactile-inset-bg: linear-gradient(180deg, rgb(var(--tactile-material-shadow-rgb) / .1), transparent .28rem), var(--tactile-paper);
5944
+ --tactile-recessed-track: rgb(var(--tactile-track-rgb));
5945
+ --tactile-track-rim: rgb(var(--tactile-keyline-rgb) / .9);
5946
+ --tactile-progress-track: linear-gradient(180deg, var(--tactile-paper-deep), var(--tactile-paper-highlight));
5947
+ --tactile-thumb-bg: linear-gradient(90deg, var(--tactile-paper-deep), var(--tactile-paper-highlight) 42%, var(--tactile-paper) 58%, var(--tactile-paper-deep));
5948
+ --tactile-select-endcap: linear-gradient(90deg, transparent calc(100% - 2.25rem), rgb(var(--tactile-keyline-rgb) / .56) calc(100% - 2.25rem), rgb(var(--tactile-keyline-rgb) / .56) calc(100% - 2.2rem), transparent calc(100% - 2.2rem)), linear-gradient(135deg, transparent 50%, var(--tactile-ink) 50%), linear-gradient(45deg, var(--tactile-ink) 50%, transparent 50%), linear-gradient(45deg, transparent 50%, var(--tactile-ink) 50%), linear-gradient(135deg, var(--tactile-ink) 50%, transparent 50%), var(--tactile-field-bg);
5949
+ --tactile-sidebar-bg: linear-gradient(90deg, rgb(var(--tactile-sidebar-rgb) / .98), rgb(var(--tactile-sidebar-rgb)));
5950
+ --tactile-sidebar-fg: rgb(var(--tactile-sidebar-text-rgb));
5951
+ --tactile-sidebar-muted: rgb(var(--tactile-sidebar-text-rgb) / .78);
5952
+ --tactile-rail: var(--tactile-copper);
5953
+ --tactile-panel-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), inset 0 -1px 0 rgb(var(--tactile-material-shadow-rgb) / .18), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .2), 0 .28rem .62rem rgb(var(--tactile-material-shadow-rgb) / .09);
5954
+ --tactile-button-shadow: inset 0 1px 0 var(--tactile-bevel-highlight), inset 0 -2px 0 rgb(var(--tactile-material-shadow-rgb) / .22), 0 1px 2px rgb(var(--tactile-material-shadow-rgb) / .22);
5955
+ --tactile-inset-shadow: inset .1rem .12rem .22rem rgb(var(--tactile-material-shadow-rgb) / .2), inset -.04rem -.04rem .12rem rgb(var(--tactile-paper-highlight-rgb) / .34);
5956
+ --tactile-deep-inset-shadow: inset .12rem .14rem .2rem #000000b8, inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .12);
5957
+ --tactile-progress-fill: repeating-linear-gradient(90deg, var(--tactile-olive) 0 calc(14.285% - 1px), rgb(var(--tactile-keyline-rgb) / .84) calc(14.285% - 1px) 14.285%);
5958
+ --usk-native-surface: var(--tactile-paper);
5959
+ --usk-native-surface-strong: var(--tactile-paper-highlight);
5960
+ --usk-native-surface-soft: var(--tactile-paper-deep);
5961
+ --usk-native-card-bg: var(--tactile-card-bg);
5962
+ --usk-native-control-bg: var(--tactile-field-bg);
5963
+ --usk-native-text: var(--tactile-ink);
5964
+ --usk-native-text-muted: var(--tactile-muted-ink);
5965
+ --usk-native-border: var(--tactile-keyline);
5966
+ --usk-native-font-body: var(--tactile-font-body);
5967
+ --usk-native-font-heading: var(--tactile-font-heading);
5968
+ --usk-native-font-control: var(--tactile-font-control);
5969
+ --usk-native-shadow: var(--tactile-button-shadow);
5970
+ --usk-native-shadow-md: var(--tactile-panel-shadow);
5971
+ --usk-native-control-min-block-size: 2.75rem;
5972
+ --usk-native-control-padding-block: .55rem;
5973
+ --usk-native-control-padding-inline: .78rem;
5974
+ --usk-native-subcontrol-padding-block: .45rem;
5975
+ --usk-native-subcontrol-padding-inline: .66rem;
5976
+ --usk-native-panel-padding: 1rem;
5977
+ --usk-native-choice-size: 1.05rem;
5978
+ --usk-native-choice-background: var(--tactile-field-bg);
5979
+ --usk-native-choice-border: 1px solid var(--tactile-keyline);
5980
+ --usk-native-choice-shadow: var(--tactile-inset-shadow);
5981
+ --usk-native-choice-checked-background: var(--tactile-copper);
5982
+ --usk-native-choice-mark-color: var(--tactile-paper-highlight);
5983
+ --usk-native-checkbox-radius: .08rem;
5984
+ --usk-native-select-indicator-size: .36rem .36rem, .36rem .36rem;
5985
+ --usk-native-select-indicator-position: calc(100% - 1.05rem) calc(50% - .22rem), calc(100% - 1.05rem) calc(50% + .22rem);
5986
+ --usk-native-select-padding-inline-end: 2.6rem;
5987
+ --usk-native-range-track-size: .55rem;
5988
+ --usk-native-range-track-background: var(--tactile-recessed-track);
5989
+ --usk-native-range-track-border: 1px solid var(--tactile-track-rim);
5990
+ --usk-native-range-track-radius: .16rem;
5991
+ --usk-native-range-track-shadow: var(--tactile-deep-inset-shadow);
5992
+ --usk-native-range-thumb-size: 1.35rem;
5993
+ --usk-native-range-thumb-background: var(--tactile-thumb-bg);
5994
+ --usk-native-range-thumb-border: 1px solid var(--tactile-keyline);
5995
+ --usk-native-range-thumb-radius: .16rem;
5996
+ --usk-native-range-thumb-shadow: var(--tactile-button-shadow);
5997
+ --usk-native-progress-size: .68rem;
5998
+ --usk-native-progress-track-background: var(--tactile-progress-track);
5999
+ --usk-native-progress-track-border: 1px solid var(--tactile-keyline);
6000
+ --usk-native-progress-track-radius: .14rem;
6001
+ --usk-native-progress-track-shadow: var(--tactile-inset-shadow);
6002
+ --usk-native-progress-value-background: var(--tactile-progress-fill);
6003
+ --usk-native-progress-value-radius: .08rem;
6004
+ --usk-native-progress-value-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb) / .3);
6005
+ --usk-native-meter-optimum-background: var(--tactile-olive);
6006
+ --usk-native-meter-suboptimum-background: var(--tactile-brass);
6007
+ --usk-native-meter-critical-background: var(--tactile-copper);
6008
+ --usk-native-file-button-background: var(--tactile-control-bg);
6009
+ --usk-native-file-button-border: 1px solid var(--tactile-keyline);
6010
+ --usk-native-file-button-radius: .2rem;
6011
+ --usk-native-file-button-shadow: var(--tactile-button-shadow);
6012
+ --usk-native-color-swatch-border: 1px solid var(--tactile-keyline);
6013
+ --usk-native-color-swatch-radius: .12rem;
6014
+ --usk-native-scrollbar-track: var(--tactile-paper-deep);
6015
+ --usk-native-scrollbar-thumb: var(--tactile-thumb-bg);
6016
+ --usk-native-scrollbar-radius: .14rem;
6017
+ }
6018
+
6019
+ [data-ui="tactile"] {
6020
+ background: var(--tactile-theme-bg);
6021
+ color: var(--tactile-ink);
6022
+ font-family: var(--tactile-font-body);
6023
+ font-size: .875rem;
6024
+ line-height: 1.42;
6025
+ }
6026
+
6027
+ .tactile-title {
6028
+ font-family: var(--tactile-font-display);
6029
+ letter-spacing: max(.022em, .5px);
6030
+ margin-block: .75rem;
6031
+ font-size: clamp(2rem, 4.2vw, 3.05rem);
6032
+ font-weight: 700;
6033
+ line-height: 1.02;
6034
+ }
6035
+
6036
+ .tactile-heading {
6037
+ font-family: var(--tactile-font-heading);
6038
+ letter-spacing: -.015em;
6039
+ font-size: clamp(1.25rem, 2vw, 1.7rem);
6040
+ font-weight: 700;
6041
+ line-height: 1.08;
6042
+ }
6043
+
6044
+ .tactile-kicker, .tactile-eyebrow {
6045
+ font-family: var(--tactile-font-control);
6046
+ letter-spacing: .075em;
6047
+ text-transform: uppercase;
6048
+ font-size: .7rem;
6049
+ font-weight: 700;
6050
+ }
6051
+
6052
+ .tactile-label, :where([data-ui="tactile"]) .ui-label {
6053
+ color: var(--tactile-ink);
6054
+ font-family: var(--tactile-font-control);
6055
+ letter-spacing: .01em;
6056
+ text-transform: none;
6057
+ font-size: .74rem;
6058
+ font-weight: 650;
6059
+ }
6060
+
6061
+ .tactile-subtitle, .tactile-copy, .tactile-help-text, .tactile-alert-body, :where([data-ui="tactile"]) .ui-help-text, :where([data-ui="tactile"]) .ui-alert-body {
6062
+ color: var(--tactile-muted-ink);
6063
+ }
6064
+
6065
+ .tactile-divider {
6066
+ background: rgb(var(--tactile-keyline-rgb)/.44);
6067
+ box-shadow: 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.58);
6068
+ }
6069
+
6070
+ .tactile-surface, .tactile-card, .tactile-panel, .tactile-toolbar, .tactile-table-wrap, :where([data-ui="tactile"]) .ui-card, :where([data-ui="tactile"]) .ui-toolbar, :where([data-ui="tactile"]) .ui-table-wrap {
6071
+ background: var(--tactile-card-bg);
6072
+ border: 1px solid var(--tactile-keyline);
6073
+ box-shadow: var(--tactile-panel-shadow);
6074
+ border-radius: .38rem;
6075
+ }
6076
+
6077
+ .tactile-card, .tactile-panel, :where([data-ui="tactile"]) .ui-card {
6078
+ padding: 1rem;
6079
+ }
6080
+
6081
+ .tactile-toolbar, :where([data-ui="tactile"]) .ui-toolbar {
6082
+ padding: .72rem .82rem;
6083
+ }
6084
+
6085
+ .tactile-well, .tactile-inset {
6086
+ background: var(--tactile-inset-bg);
6087
+ border: 1px solid rgb(var(--tactile-keyline-rgb)/.64);
6088
+ box-shadow: var(--tactile-inset-shadow);
6089
+ border-radius: .28rem;
6090
+ padding: .82rem;
6091
+ }
6092
+
6093
+ .tactile-button, .tactile-icon-button, :where([data-ui="tactile"]) .ui-button, :where([data-ui="tactile"]) .ui-icon-button {
6094
+ background: var(--tactile-control-bg);
6095
+ min-height: 2.75rem;
6096
+ color: var(--tactile-ink);
6097
+ border: 1px solid var(--tactile-keyline);
6098
+ box-shadow: var(--tactile-button-shadow);
6099
+ clip-path: none;
6100
+ font-family: var(--tactile-font-control);
6101
+ letter-spacing: .005em;
6102
+ text-transform: none;
6103
+ border-radius: .24rem;
6104
+ padding: .55rem .9rem;
6105
+ font-size: .84rem;
6106
+ font-weight: 600;
6107
+ line-height: 1.2;
6108
+ }
6109
+
6110
+ .tactile-icon-button, :where([data-ui="tactile"]) .ui-icon-button {
6111
+ width: 2.75rem;
6112
+ padding: 0;
6113
+ }
6114
+
6115
+ .tactile-button:hover, .tactile-icon-button:hover, :where([data-ui="tactile"]) .ui-button:hover, :where([data-ui="tactile"]) .ui-icon-button:hover {
6116
+ border-color: rgb(var(--tactile-keyline-rgb)/.96);
6117
+ box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight),inset 0-2px 0 rgb(var(--tactile-material-shadow-rgb)/.26),0 2px 3px rgb(var(--tactile-material-shadow-rgb)/.2);
6118
+ transform: translateY(-1px);
6119
+ }
6120
+
6121
+ .tactile-button:active, .tactile-icon-button:active, .tactile-button[aria-pressed="true"], .tactile-icon-button[aria-pressed="true"], .tactile-button.is-active, .tactile-icon-button.is-active, :where([data-ui="tactile"]) .ui-button:active, :where([data-ui="tactile"]) .ui-icon-button:active, :where([data-ui="tactile"]) .ui-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-icon-button[aria-pressed="true"], :where([data-ui="tactile"]) .ui-button.is-active, :where([data-ui="tactile"]) .ui-icon-button.is-active {
6122
+ box-shadow: var(--tactile-inset-shadow);
6123
+ transform: translateY(1px);
6124
+ }
6125
+
6126
+ .tactile-button-primary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]) {
6127
+ background: linear-gradient(180deg,var(--tactile-primary-hover),var(--tactile-primary) 48%,rgb(var(--tactile-primary-rgb)/.84));
6128
+ color: var(--tactile-on-primary);
6129
+ border-color: var(--tactile-primary);
6130
+ box-shadow: inset 0 1px 0 #ffffff6b,inset 0-2px 0 #00000040,0 1px 2px rgb(var(--tactile-material-shadow-rgb)/.3);
6131
+ }
6132
+
6133
+ .tactile-button-secondary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="secondary"]) {
6134
+ background: var(--tactile-control-bg);
6135
+ color: var(--tactile-ink);
6136
+ border-color: var(--tactile-keyline);
6137
+ }
6138
+
6139
+ .tactile-button-danger, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="danger"]) {
6140
+ background: linear-gradient(180deg,rgb(var(--tactile-danger-rgb)/.88),var(--tactile-danger) 52%,rgb(var(--tactile-danger-rgb)/.76));
6141
+ color: var(--tactile-on-danger);
6142
+ border-color: var(--tactile-danger);
6143
+ }
6144
+
6145
+ @supports (color: color-mix(in srgb,black,white)) {
6146
+ .tactile-button-primary, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="primary"]) {
6147
+ background: linear-gradient(180deg,color-mix(in srgb,var(--tactile-primary),white 16%),var(--tactile-primary) 48%,color-mix(in srgb,var(--tactile-primary),black 18%));
6148
+ border-color: color-mix(in srgb,var(--tactile-primary),black 34%);
6149
+ box-shadow: inset 0 1px 0 #ffffff6b,inset 0-2px 0 #00000040,0 1px 2px rgb(var(--tactile-material-shadow-rgb)/.3);
6150
+ }
6151
+
6152
+ .tactile-button-danger, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="danger"]) {
6153
+ background: linear-gradient(180deg,color-mix(in srgb,var(--tactile-danger),white 12%),var(--tactile-danger) 52%,color-mix(in srgb,var(--tactile-danger),black 18%));
6154
+ border-color: color-mix(in srgb,var(--tactile-danger),black 30%);
6155
+ }
6156
+ }
6157
+
6158
+ .tactile-button-ghost, :where([data-ui="tactile"]) .ui-button:where([data-ui-variant="ghost"]) {
6159
+ color: var(--usk-primary-ink, var(--tactile-primary));
6160
+ box-shadow: none;
6161
+ background: none;
6162
+ border-color: #0000;
6163
+ }
6164
+
6165
+ .tactile-button:disabled, .tactile-icon-button:disabled, .tactile-disabled, :where([data-ui="tactile"]) .ui-button:disabled, :where([data-ui="tactile"]) .ui-icon-button:disabled {
6166
+ opacity: .46;
6167
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.38),inset 0-1px 0 rgb(var(--tactile-material-shadow-rgb)/.12);
6168
+ transform: none;
6169
+ }
6170
+
6171
+ .tactile-input, .tactile-textarea, .tactile-select, :where([data-ui="tactile"]) .ui-input, :where([data-ui="tactile"]) .ui-textarea, :where([data-ui="tactile"]) .ui-select {
6172
+ background: var(--tactile-field-bg);
6173
+ min-height: 2.75rem;
6174
+ color: var(--tactile-ink);
6175
+ border: 1px solid var(--tactile-keyline);
6176
+ box-shadow: var(--tactile-inset-shadow);
6177
+ font-family: var(--tactile-font-control);
6178
+ border-radius: .24rem;
6179
+ padding: .55rem .72rem;
6180
+ font-size: .84rem;
6181
+ font-weight: 500;
6182
+ }
6183
+
6184
+ .tactile-select, :where([data-ui="tactile"]) .ui-select {
6185
+ appearance: none;
6186
+ background-image: var(--tactile-select-endcap);
6187
+ background-position: 0 0, calc(100% - 1.18rem) calc(50% - .36rem), calc(100% - .9rem) calc(50% - .36rem), calc(100% - 1.18rem) calc(50% + .34rem), calc(100% - .9rem) calc(50% + .34rem), 0 0;
6188
+ background-repeat: no-repeat;
6189
+ background-size: 100% 100%, .28rem .28rem, .28rem .28rem, .28rem .28rem, .28rem .28rem, 100% 100%;
6190
+ padding-inline-end: 2.75rem;
6191
+ }
6192
+
6193
+ .tactile-input::placeholder, .tactile-textarea::placeholder, :where([data-ui="tactile"]) .ui-input::placeholder, :where([data-ui="tactile"]) .ui-textarea::placeholder {
6194
+ color: var(--tactile-muted-ink);
6195
+ opacity: .72;
6196
+ }
6197
+
6198
+ .tactile-check-control, .tactile-radio-control, :where([data-ui="tactile"]) .ui-check-control, :where([data-ui="tactile"]) .ui-radio-control {
6199
+ background: var(--tactile-field-bg);
6200
+ border: 1px solid var(--tactile-keyline);
6201
+ width: 1.05rem;
6202
+ height: 1.05rem;
6203
+ box-shadow: var(--tactile-inset-shadow);
6204
+ }
6205
+
6206
+ .tactile-check input:checked + .tactile-check-control, .tactile-radio input:checked + .tactile-radio-control, :where([data-ui="tactile"]) .ui-check input:checked+.ui-check-control, :where([data-ui="tactile"]) .ui-radio input:checked+.ui-radio-control {
6207
+ background: var(--tactile-copper);
6208
+ border-color: rgb(var(--tactile-copper-rgb)/.96);
6209
+ box-shadow: inset 0 1px 0 #ffffff4d,var(--tactile-focus-ring);
6210
+ }
6211
+
6212
+ .tactile-radio input:checked + .tactile-radio-control, :where([data-ui="tactile"]) .ui-radio input:checked+.ui-radio-control {
6213
+ background: var(--tactile-field-bg);
6214
+ }
6215
+
6216
+ .tactile-radio input:checked + .tactile-radio-control:after, :where([data-ui="tactile"]) .ui-radio input:checked+.ui-radio-control:after {
6217
+ background: var(--tactile-copper);
6218
+ width: .52rem;
6219
+ height: .52rem;
6220
+ }
6221
+
6222
+ .tactile-switch-track, :where([data-ui="tactile"]) .ui-switch-track {
6223
+ background: var(--tactile-recessed-track);
6224
+ border: 1px solid var(--tactile-track-rim);
6225
+ width: 4.1rem;
6226
+ height: 1.75rem;
6227
+ box-shadow: var(--tactile-deep-inset-shadow);
6228
+ border-radius: .2rem;
6229
+ }
6230
+
6231
+ .tactile-switch-thumb, :where([data-ui="tactile"]) .ui-switch-thumb {
6232
+ background: var(--tactile-thumb-bg);
6233
+ border: 1px solid var(--tactile-keyline);
6234
+ width: 1.42rem;
6235
+ height: 1.42rem;
6236
+ box-shadow: var(--tactile-button-shadow);
6237
+ border-radius: .16rem;
6238
+ top: .14rem;
6239
+ left: .14rem;
6240
+ }
6241
+
6242
+ .tactile-switch input:checked + .tactile-switch-track, :where([data-ui="tactile"]) .ui-switch input:checked+.ui-switch-track {
6243
+ background: linear-gradient(90deg,var(--tactile-recessed-track)0 50%,var(--tactile-olive) 50% 100%);
6244
+ border-color: var(--tactile-keyline);
6245
+ }
6246
+
6247
+ .tactile-switch input:checked + .tactile-switch-track .tactile-switch-thumb, :where([data-ui="tactile"]) .ui-switch input:checked+.ui-switch-track .ui-switch-thumb {
6248
+ left: calc(100% - 1.56rem);
6249
+ }
6250
+
6251
+ .tactile-nav, :where([data-ui="tactile"]) .ui-nav {
6252
+ background: var(--tactile-sidebar-bg);
6253
+ border: 1px solid rgb(var(--tactile-keyline-rgb)/.72);
6254
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-sidebar-text-rgb)/.1),inset 0-1px 0 #00000085,0 2px 5px #0000002e;
6255
+ border-radius: .28rem;
6256
+ gap: .2rem;
6257
+ padding: .35rem;
6258
+ }
6259
+
6260
+ .tactile-nav-link, :where([data-ui="tactile"]) .ui-nav-link {
6261
+ min-height: 2.65rem;
6262
+ color: var(--tactile-sidebar-muted);
6263
+ font-family: var(--tactile-font-control);
6264
+ letter-spacing: .01em;
6265
+ text-transform: none;
6266
+ border-radius: .18rem;
6267
+ padding: .58rem .76rem;
6268
+ font-size: .84rem;
6269
+ font-weight: 500;
6270
+ }
6271
+
6272
+ .tactile-nav-link:hover, :where([data-ui="tactile"]) .ui-nav-link:hover {
6273
+ color: var(--tactile-sidebar-fg);
6274
+ background: rgb(var(--tactile-sidebar-text-rgb)/.055);
6275
+ border-color: rgb(var(--tactile-sidebar-text-rgb)/.14);
6276
+ }
6277
+
6278
+ .tactile-nav-link[aria-current="page"], .tactile-nav-link.is-active, :where([data-ui="tactile"]) .ui-nav-link[aria-current="page"], :where([data-ui="tactile"]) .ui-nav-link.is-active {
6279
+ color: var(--tactile-brass);
6280
+ background: rgb(var(--tactile-sidebar-text-rgb)/.06);
6281
+ border-color: rgb(var(--tactile-sidebar-text-rgb)/.18);
6282
+ box-shadow: inset .18rem 0 0 var(--tactile-copper),inset .08rem .08rem .18rem #00000061;
6283
+ }
6284
+
6285
+ .tactile-progress, :where([data-ui="tactile"]) .ui-progress {
6286
+ background: var(--tactile-progress-track);
6287
+ border: 1px solid var(--tactile-keyline);
6288
+ height: .68rem;
6289
+ box-shadow: var(--tactile-inset-shadow);
6290
+ border-radius: .14rem;
6291
+ padding: .08rem;
6292
+ }
6293
+
6294
+ .tactile-progress-bar, :where([data-ui="tactile"]) .ui-progress-bar {
6295
+ background: var(--tactile-progress-fill);
6296
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.26);
6297
+ border-radius: .06rem;
6298
+ }
6299
+
6300
+ .tactile-badge, :where([data-ui="tactile"]) .ui-badge {
6301
+ border: 1px solid var(--tactile-keyline);
6302
+ min-height: 1.45rem;
6303
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.34);
6304
+ letter-spacing: .045em;
6305
+ border-radius: .12rem;
6306
+ padding: .22rem .48rem;
6307
+ font-size: .68rem;
6308
+ font-weight: 700;
6309
+ }
6310
+
6311
+ .tactile-alert, :where([data-ui="tactile"]) .ui-alert {
6312
+ background: var(--tactile-card-bg);
6313
+ border: 1px solid var(--tactile-keyline);
6314
+ box-shadow: var(--tactile-panel-shadow);
6315
+ border-inline-start-width: .28rem;
6316
+ border-radius: .3rem;
6317
+ padding: .82rem .9rem;
6318
+ }
6319
+
6320
+ .tactile-alert-title, :where([data-ui="tactile"]) .ui-alert-title {
6321
+ letter-spacing: .045em;
6322
+ font-size: .72rem;
6323
+ font-weight: 700;
6324
+ }
6325
+
6326
+ .tactile-table th, .tactile-table td, :where([data-ui="tactile"]) .ui-table th, :where([data-ui="tactile"]) .ui-table td {
6327
+ border-color: rgb(var(--tactile-keyline-rgb)/.52);
6328
+ padding: .62rem .72rem;
6329
+ }
6330
+
6331
+ .tactile-table th, :where([data-ui="tactile"]) .ui-table th {
6332
+ color: var(--tactile-sidebar-fg);
6333
+ background: var(--tactile-sidebar-bg);
6334
+ font-family: var(--tactile-font-control);
6335
+ letter-spacing: .055em;
6336
+ font-size: .7rem;
6337
+ font-weight: 700;
6338
+ }
6339
+
6340
+ .tactile-table td, :where([data-ui="tactile"]) .ui-table td {
6341
+ color: var(--tactile-ink);
6342
+ background: var(--tactile-field-bg);
6343
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.28);
6344
+ }
6345
+
6346
+ .tactile-tooltip, [data-ui="tactile"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
6347
+ background: var(--tactile-sidebar-bg);
6348
+ color: var(--tactile-sidebar-fg);
6349
+ border: 1px solid rgb(var(--tactile-keyline-rgb)/.72);
6350
+ font-family: var(--tactile-font-control);
6351
+ border-radius: .2rem;
6352
+ font-size: .75rem;
6353
+ box-shadow: 0 .28rem .6rem #0000003d;
6354
+ }
6355
+
6356
+ .tactile-card-service, .tactile-card-feature, .tactile-feature-strip, .tactile-callout-bar {
6357
+ background: var(--tactile-card-bg);
6358
+ border: 1px solid var(--tactile-keyline);
6359
+ box-shadow: var(--tactile-panel-shadow);
6360
+ border-radius: .38rem;
6361
+ padding: .9rem;
6362
+ }
6363
+
6364
+ .tactile-feature-item {
6365
+ background: var(--tactile-inset-bg);
6366
+ border-color: rgb(var(--tactile-keyline-rgb)/.54);
6367
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.3);
6368
+ padding: .72rem .82rem;
6369
+ }
6370
+
6371
+ .tactile-icon-medallion, .tactile-badge-seal {
6372
+ background: var(--tactile-sidebar-bg);
6373
+ color: var(--tactile-brass);
6374
+ border-color: rgb(var(--tactile-keyline-rgb)/.82);
6375
+ box-shadow: var(--tactile-button-shadow);
6376
+ }
6377
+
6378
+ .tactile-badge-seal {
6379
+ color: var(--tactile-sidebar-fg);
6380
+ }
6381
+
6382
+ .tactile-badge-seal > :where(strong, small) {
6383
+ color: inherit;
6384
+ }
6385
+
6386
+ .tactile-callout-bar {
6387
+ color: var(--tactile-sidebar-fg);
6388
+ background: var(--tactile-sidebar-bg);
6389
+ }
6390
+
6391
+ [data-ui="tactile"][data-mode] :where(fieldset, article, aside, details, dialog) {
6392
+ background-color: var(--tactile-paper);
6393
+ background-image: var(--tactile-card-bg);
6394
+ color: var(--tactile-ink);
6395
+ border: 1px solid var(--tactile-keyline);
6396
+ box-shadow: var(--tactile-panel-shadow);
6397
+ border-radius: .38rem;
6398
+ }
6399
+
6400
+ [data-ui="tactile"][data-mode] :where(legend) {
6401
+ background: var(--tactile-control-bg);
6402
+ color: var(--tactile-ink);
6403
+ border: 1px solid var(--tactile-keyline);
6404
+ box-shadow: var(--tactile-button-shadow);
6405
+ font-family: var(--tactile-font-control);
6406
+ letter-spacing: .055em;
6407
+ border-radius: .16rem;
6408
+ padding: .26rem .5rem;
6409
+ font-size: .68rem;
6410
+ font-weight: 700;
6411
+ }
6412
+
6413
+ [data-ui="tactile"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
6414
+ background: var(--tactile-control-bg);
6415
+ min-height: 2.75rem;
6416
+ color: var(--tactile-ink);
6417
+ border: 1px solid var(--tactile-keyline);
6418
+ box-shadow: var(--tactile-button-shadow);
6419
+ clip-path: none;
6420
+ font-family: var(--tactile-font-control);
6421
+ border-radius: .24rem;
6422
+ padding: .55rem .9rem;
6423
+ font-size: .84rem;
6424
+ font-weight: 600;
6425
+ }
6426
+
6427
+ [data-ui="tactile"][data-mode] :where(input:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea, select) {
6428
+ background-color: var(--tactile-paper);
6429
+ background-image: var(--tactile-field-bg);
6430
+ min-height: 2.75rem;
6431
+ color: var(--tactile-ink);
6432
+ border: 1px solid var(--tactile-keyline);
6433
+ box-shadow: var(--tactile-inset-shadow);
6434
+ font-family: var(--tactile-font-control);
6435
+ border-radius: .24rem;
6436
+ font-size: .84rem;
6437
+ font-weight: 500;
6438
+ }
6439
+
6440
+ [data-ui="tactile"][data-mode] :where(select) {
6441
+ appearance: none;
6442
+ background-image: var(--tactile-select-endcap);
6443
+ background-position: 0 0, calc(100% - 1.18rem) calc(50% - .36rem), calc(100% - .9rem) calc(50% - .36rem), calc(100% - 1.18rem) calc(50% + .34rem), calc(100% - .9rem) calc(50% + .34rem), 0 0;
6444
+ background-repeat: no-repeat;
6445
+ background-size: 100% 100%, .28rem .28rem, .28rem .28rem, .28rem .28rem, .28rem .28rem, 100% 100%;
6446
+ padding-inline-end: 2.75rem;
6447
+ }
6448
+
6449
+ [data-ui="tactile"][data-mode] :where(input[type="checkbox"], input[type="radio"]) {
6450
+ accent-color: var(--tactile-copper);
6451
+ }
6452
+
6453
+ [data-ui="tactile"][data-mode] :where(input[type="file"])::file-selector-button {
6454
+ background: var(--tactile-control-bg);
6455
+ color: var(--tactile-ink);
6456
+ border: 1px solid var(--tactile-keyline);
6457
+ box-shadow: var(--tactile-button-shadow);
6458
+ font-family: var(--tactile-font-control);
6459
+ border-radius: .2rem;
6460
+ font-weight: 600;
6461
+ }
6462
+
6463
+ .tactile-input:focus-visible, .tactile-textarea:focus-visible, .tactile-select:focus-visible, :where([data-ui="tactile"]) .ui-input:focus-visible, :where([data-ui="tactile"]) .ui-textarea:focus-visible, :where([data-ui="tactile"]) .ui-select:focus-visible {
6464
+ border-color: var(--tactile-focus);
6465
+ box-shadow: var(--tactile-inset-shadow),var(--tactile-focus-ring);
6466
+ outline: 2px solid var(--tactile-focus);
6467
+ outline-offset: 2px;
6468
+ }
6469
+
6470
+ .tactile-input[aria-invalid="true"], .tactile-textarea[aria-invalid="true"], .tactile-select[aria-invalid="true"], [data-ui="tactile"][data-mode] :where(input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"]), :where([data-ui="tactile"]) .ui-input[aria-invalid="true"], :where([data-ui="tactile"]) .ui-textarea[aria-invalid="true"], :where([data-ui="tactile"]) .ui-select[aria-invalid="true"] {
6471
+ border-color: var(--tactile-danger);
6472
+ box-shadow: var(--tactile-inset-shadow),0 0 0 2px rgb(var(--tactile-danger-rgb)/.24);
6473
+ }
6474
+
6475
+ .tactile-input[readonly], .tactile-textarea[readonly], [data-ui="tactile"][data-mode] :where(input[readonly]:not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]), textarea[readonly]), :where([data-ui="tactile"]) .ui-input[readonly], :where([data-ui="tactile"]) .ui-textarea[readonly] {
6476
+ filter: saturate(.72);
6477
+ opacity: .78;
6478
+ border-style: dashed;
6479
+ }
6480
+
6481
+ .tactile-workspace-shell {
6482
+ background: var(--tactile-card-bg);
6483
+ color: var(--tactile-ink);
6484
+ border: 1px solid var(--tactile-keyline);
6485
+ box-shadow: var(--tactile-panel-shadow);
6486
+ border-radius: .38rem;
6487
+ overflow: hidden;
6488
+ }
6489
+
6490
+ .tactile-workspace-shell, .tactile-workspace-shell *, .tactile-workspace-shell :before, .tactile-workspace-shell :after {
6491
+ box-sizing: border-box;
6492
+ }
6493
+
6494
+ .tactile-workspace-shell > .tactile-workspace-sidebar {
6495
+ background: var(--tactile-sidebar-bg);
6496
+ min-width: 0;
6497
+ color: var(--tactile-sidebar-fg);
6498
+ border: 0;
6499
+ border-inline-end: 1px solid rgb(var(--tactile-keyline-rgb)/.82);
6500
+ box-shadow: inset -1px 0 0 #00000057,inset 0 1px 0 rgb(var(--tactile-sidebar-text-rgb)/.08);
6501
+ border-radius: 0;
6502
+ flex-direction: column;
6503
+ padding: 1.35rem 1rem 1rem;
6504
+ display: flex;
6505
+ }
6506
+
6507
+ .tactile-workspace-brand {
6508
+ color: var(--tactile-sidebar-fg);
6509
+ align-items: center;
6510
+ gap: .7rem;
6511
+ text-decoration: none;
6512
+ display: grid;
6513
+ }
6514
+
6515
+ .tactile-workspace-brand-mark {
6516
+ background: linear-gradient(180deg,rgb(var(--tactile-copper-rgb)/.92),var(--tactile-copper));
6517
+ width: 2.3rem;
6518
+ height: 2.3rem;
6519
+ color: var(--tactile-paper-highlight);
6520
+ border: 1px solid rgb(var(--tactile-brass-rgb)/.72);
6521
+ font-family: var(--tactile-font-display);
6522
+ border-radius: .16rem;
6523
+ place-items: center;
6524
+ font-size: 1.25rem;
6525
+ font-weight: 700;
6526
+ display: grid;
6527
+ box-shadow: inset 0 1px #ffffff40, 0 1px 2px #0000006b;
6528
+ }
6529
+
6530
+ .tactile-workspace-brand :where(strong, small) {
6531
+ display: block;
6532
+ }
6533
+
6534
+ .tactile-workspace-brand strong {
6535
+ color: var(--tactile-sidebar-fg);
6536
+ font-family: var(--tactile-font-display);
6537
+ font-size: 1.18rem;
6538
+ line-height: 1.05;
6539
+ }
6540
+
6541
+ .tactile-workspace-brand small {
6542
+ color: var(--tactile-sidebar-muted);
6543
+ font-family: var(--tactile-font-control);
6544
+ letter-spacing: .12em;
6545
+ text-transform: uppercase;
6546
+ margin-top: .18rem;
6547
+ font-size: .64rem;
6548
+ font-weight: 700;
6549
+ }
6550
+
6551
+ .tactile-workspace-menu {
6552
+ gap: .3rem;
6553
+ margin-top: 2.4rem;
6554
+ display: grid;
6555
+ }
6556
+
6557
+ .tactile-workspace-link {
6558
+ min-height: 2.65rem;
6559
+ color: var(--tactile-sidebar-muted);
6560
+ font-family: var(--tactile-font-control);
6561
+ border: 1px solid #0000;
6562
+ border-radius: .14rem;
6563
+ align-items: center;
6564
+ gap: .68rem;
6565
+ padding: .62rem .7rem;
6566
+ font-size: .78rem;
6567
+ font-weight: 600;
6568
+ text-decoration: none;
6569
+ display: grid;
6570
+ }
6571
+
6572
+ .tactile-workspace-link small {
6573
+ color: inherit;
6574
+ letter-spacing: .08em;
6575
+ font-size: .6rem;
6576
+ }
6577
+
6578
+ .tactile-workspace-link:hover {
6579
+ color: var(--tactile-sidebar-fg);
6580
+ background: rgb(var(--tactile-sidebar-text-rgb)/.055);
6581
+ border-color: rgb(var(--tactile-sidebar-text-rgb)/.16);
6582
+ }
6583
+
6584
+ .tactile-workspace-link.is-active, .tactile-workspace-link[aria-current="page"] {
6585
+ color: var(--tactile-brass);
6586
+ background: rgb(var(--tactile-sidebar-text-rgb)/.06);
6587
+ border-color: rgb(var(--tactile-sidebar-text-rgb)/.14);
6588
+ box-shadow: inset .2rem 0 0 var(--tactile-copper),inset .08rem .08rem .2rem #0006;
6589
+ }
6590
+
6591
+ .tactile-workspace-icon {
6592
+ place-items: center;
6593
+ width: 1.05rem;
6594
+ height: 1.05rem;
6595
+ display: inline-grid;
6596
+ }
6597
+
6598
+ .tactile-workspace-icon svg {
6599
+ stroke-width: 1.7px;
6600
+ width: 100%;
6601
+ height: 100%;
6602
+ display: block;
6603
+ }
6604
+
6605
+ .tactile-workspace-sidebar-note {
6606
+ border: 1px solid rgb(var(--tactile-sidebar-text-rgb)/.13);
6607
+ background: #00000029;
6608
+ border-radius: .18rem;
6609
+ margin-top: auto;
6610
+ padding: .82rem;
6611
+ box-shadow: inset .08rem .1rem .18rem #00000057;
6612
+ }
6613
+
6614
+ .tactile-workspace-sidebar-note p {
6615
+ color: var(--tactile-sidebar-muted);
6616
+ margin: .52rem 0 0;
6617
+ font-size: .7rem;
6618
+ line-height: 1.4;
6619
+ }
6620
+
6621
+ .tactile-workspace-main {
6622
+ background: var(--tactile-card-bg);
6623
+ }
6624
+
6625
+ .tactile-workspace-header {
6626
+ border-bottom: 1px solid rgb(var(--tactile-keyline-rgb)/.55);
6627
+ box-shadow: 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.62);
6628
+ justify-content: space-between;
6629
+ align-items: start;
6630
+ gap: 1rem;
6631
+ padding: 1.5rem 1.6rem 1.3rem;
6632
+ display: flex;
6633
+ }
6634
+
6635
+ .tactile-workspace-header :where(p, h2) {
6636
+ margin: 0;
6637
+ }
6638
+
6639
+ .tactile-workspace-title {
6640
+ font-family: var(--tactile-font-display);
6641
+ letter-spacing: -.035em;
6642
+ margin-top: .26rem;
6643
+ font-size: clamp(2.15rem, 4vw, 2.8rem);
6644
+ font-weight: 700;
6645
+ line-height: 1.02;
6646
+ }
6647
+
6648
+ .tactile-workspace-header .tactile-copy {
6649
+ max-width: 40rem;
6650
+ margin-top: .55rem;
6651
+ font-size: .8rem;
6652
+ }
6653
+
6654
+ .tactile-workspace-body {
6655
+ align-items: start;
6656
+ gap: 1rem;
6657
+ padding: 1.25rem 1.6rem 1.5rem;
6658
+ display: grid;
6659
+ }
6660
+
6661
+ .tactile-workspace-settings {
6662
+ background: var(--tactile-card-bg);
6663
+ border: 1px solid var(--tactile-keyline);
6664
+ box-shadow: var(--tactile-panel-shadow);
6665
+ border-radius: .28rem;
6666
+ overflow: hidden;
6667
+ }
6668
+
6669
+ .tactile-workspace-row {
6670
+ border-bottom: 1px solid rgb(var(--tactile-keyline-rgb)/.46);
6671
+ box-shadow: inset 0 1px 0 rgb(var(--tactile-paper-highlight-rgb)/.46);
6672
+ gap: 1.25rem;
6673
+ padding: 1.15rem 1.2rem;
6674
+ display: grid;
6675
+ }
6676
+
6677
+ .tactile-workspace-row:last-child {
6678
+ border-bottom: 0;
6679
+ }
6680
+
6681
+ .tactile-workspace-row :where(h3, p) {
6682
+ margin: 0;
6683
+ }
6684
+
6685
+ .tactile-workspace-row h3 {
6686
+ font-family: var(--tactile-font-display);
6687
+ font-size: 1rem;
6688
+ line-height: 1.15;
6689
+ }
6690
+
6691
+ .tactile-workspace-row > div:first-child p {
6692
+ color: var(--tactile-muted-ink);
6693
+ margin-top: .3rem;
6694
+ font-size: .68rem;
6695
+ }
6696
+
6697
+ .tactile-workspace-fields, .tactile-workspace-switches {
6698
+ gap: .8rem;
6699
+ display: grid;
6700
+ }
6701
+
6702
+ .tactile-workspace-switches .tactile-switch, :where([data-ui="tactile"]) .tactile-workspace-switches .ui-switch {
6703
+ background: var(--tactile-inset-bg);
6704
+ border: 1px solid rgb(var(--tactile-keyline-rgb)/.52);
6705
+ width: 100%;
6706
+ box-shadow: var(--tactile-inset-shadow);
6707
+ border-radius: .2rem;
6708
+ justify-content: flex-start;
6709
+ padding: .7rem .74rem;
6710
+ }
6711
+
6712
+ .tactile-workspace-switches .tactile-switch > span:last-child, :where([data-ui="tactile"]) .tactile-workspace-switches .ui-switch>span:last-child {
6713
+ gap: .08rem;
6714
+ display: grid;
6715
+ }
6716
+
6717
+ .tactile-workspace-switches small, .tactile-workspace-security small {
6718
+ color: var(--tactile-muted-ink);
6719
+ font-size: .66rem;
6720
+ }
6721
+
6722
+ .tactile-workspace-security {
6723
+ justify-content: space-between;
6724
+ align-items: center;
6725
+ gap: .8rem;
6726
+ display: flex;
6727
+ }
6728
+
6729
+ .tactile-workspace-security > div {
6730
+ gap: .35rem;
6731
+ display: grid;
6732
+ }
6733
+
6734
+ .tactile-workspace-readiness {
6735
+ background: var(--tactile-card-bg);
6736
+ color: var(--tactile-ink);
6737
+ border: 1px solid var(--tactile-keyline);
6738
+ box-shadow: var(--tactile-panel-shadow);
6739
+ border-radius: .28rem;
6740
+ padding: 1rem;
6741
+ }
6742
+
6743
+ .tactile-workspace-gauge {
6744
+ aspect-ratio: 1;
6745
+ background: radial-gradient(circle,var(--tactile-paper-highlight)0 52%,transparent 52.5%),repeating-conic-gradient(from 218deg,var(--tactile-keyline)0 1deg,transparent 1deg 11deg),var(--tactile-paper-deep);
6746
+ border: .42rem solid var(--tactile-paper);
6747
+ width: min(100%, 11rem);
6748
+ box-shadow: inset 0 0 0 1px var(--tactile-keyline),inset .18rem .2rem .42rem rgb(var(--tactile-material-shadow-rgb)/.18),0 1px 2px rgb(var(--tactile-material-shadow-rgb)/.22);
6749
+ border-radius: 999px;
6750
+ place-items: center;
6751
+ margin: 1rem auto .55rem;
6752
+ display: grid;
6753
+ position: relative;
6754
+ overflow: hidden;
6755
+ }
6756
+
6757
+ .tactile-workspace-gauge:after {
6758
+ content: "";
6759
+ background: var(--tactile-copper);
6760
+ width: .16rem;
6761
+ height: 35%;
6762
+ box-shadow: 0 0 0 1px rgb(var(--tactile-material-shadow-rgb)/.26);
6763
+ transform-origin: 50% 100%;
6764
+ border-radius: .08rem;
6765
+ position: absolute;
6766
+ bottom: 48%;
6767
+ left: 50%;
6768
+ transform: translateX(-50%) rotate(44deg);
6769
+ }
6770
+
6771
+ .tactile-workspace-gauge > span {
6772
+ z-index: 1;
6773
+ background: var(--tactile-control-bg);
6774
+ border: 1px solid var(--tactile-keyline);
6775
+ width: 4.8rem;
6776
+ height: 4.8rem;
6777
+ box-shadow: var(--tactile-button-shadow);
6778
+ border-radius: 999px;
6779
+ place-items: center;
6780
+ display: grid;
6781
+ position: relative;
6782
+ }
6783
+
6784
+ .tactile-workspace-gauge :where(strong, small) {
6785
+ text-align: center;
6786
+ display: block;
6787
+ }
6788
+
6789
+ .tactile-workspace-gauge strong {
6790
+ font-family: var(--tactile-font-display);
6791
+ align-self: end;
6792
+ font-size: 1.65rem;
6793
+ line-height: 1;
6794
+ }
6795
+
6796
+ .tactile-workspace-gauge small {
6797
+ color: var(--tactile-muted-ink);
6798
+ font-family: var(--tactile-font-control);
6799
+ letter-spacing: .08em;
6800
+ text-transform: uppercase;
6801
+ align-self: start;
6802
+ font-size: .6rem;
6803
+ font-weight: 700;
6804
+ }
6805
+
6806
+ .tactile-workspace-gauge-key {
6807
+ color: var(--tactile-muted-ink);
6808
+ font-family: var(--tactile-font-control);
6809
+ letter-spacing: .06em;
6810
+ text-transform: uppercase;
6811
+ justify-content: space-between;
6812
+ font-size: .6rem;
6813
+ font-weight: 700;
6814
+ display: flex;
6815
+ }
6816
+
6817
+ .tactile-workspace-readiness .tactile-alert, :where([data-ui="tactile"]) .tactile-workspace-readiness .ui-alert {
6818
+ margin-top: 1rem;
6819
+ }
6820
+
6821
+ .tactile-workspace-shelf {
6822
+ z-index: 2;
6823
+ background: var(--tactile-control-bg);
6824
+ border-top: 1px solid var(--tactile-keyline);
6825
+ box-shadow: inset 0 1px 0 var(--tactile-bevel-highlight),0-.2rem .55rem rgb(var(--tactile-material-shadow-rgb)/.12);
6826
+ align-items: center;
6827
+ gap: 1.25rem;
6828
+ padding: .9rem 1.6rem;
6829
+ display: grid;
6830
+ position: sticky;
6831
+ bottom: 0;
6832
+ }
6833
+
6834
+ .tactile-workspace-progress {
6835
+ align-items: center;
6836
+ gap: .8rem;
6837
+ display: grid;
6838
+ }
6839
+
6840
+ .tactile-workspace-progress > span {
6841
+ gap: .08rem;
6842
+ display: grid;
6843
+ }
6844
+
6845
+ .tactile-workspace-progress small {
6846
+ color: var(--tactile-muted-ink);
6847
+ font-size: .65rem;
6848
+ }
6849
+
6850
+ .tactile-workspace-progress .tactile-progress, :where([data-ui="tactile"]) .tactile-workspace-progress .ui-progress {
6851
+ width: 100%;
6852
+ }
6853
+
6854
+ @media (max-width: 52rem) {
6855
+ .tactile-workspace-shell > .tactile-workspace-sidebar {
6856
+ border-inline-end: 0;
6857
+ border-bottom: 1px solid rgb(var(--tactile-keyline-rgb)/.82);
6858
+ }
6859
+
6860
+ .tactile-workspace-menu {
6861
+ margin-top: 1rem;
6862
+ overflow-x: auto;
6863
+ }
6864
+
6865
+ .tactile-workspace-sidebar-note {
6866
+ display: none;
6867
+ }
6868
+ }
6869
+
6870
+ @media (max-width: 38rem) {
6871
+ .tactile-workspace-header, .tactile-workspace-security {
6872
+ flex-direction: column;
6873
+ align-items: stretch;
6874
+ }
6875
+
6876
+ .tactile-workspace-header, .tactile-workspace-body, .tactile-workspace-shelf {
6877
+ padding-inline: 1rem;
6878
+ }
6879
+
6880
+ .tactile-workspace-row {
6881
+ gap: .8rem;
6882
+ }
6883
+ }
6884
+
6885
+ [data-ui="tactile"][data-mode] .tactile-button.tactile-button-warning, :where([data-ui="tactile"])[data-mode] .ui-button.ui-button:where([data-ui-variant="warning"]) {
6886
+ background: var(--tactile-warning);
6887
+ color: var(--tactile-on-warning);
6888
+ border-color: var(--tactile-warning);
6889
+ text-shadow: none;
4672
6890
  }
4673
6891
  }