ui-style-kit-css 2.2.0 → 2.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (122) hide show
  1. package/CHANGELOG.md +77 -1
  2. package/CONTRIBUTING.md +8 -1
  3. package/README.md +171 -53
  4. package/STYLE-MAP.md +28 -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 +55604 -6525
  26. package/dist/ui-style-kit.min.css +2 -2
  27. package/dist/ui-style-kit.visual.css +55443 -6942
  28. package/dist/ui-style-kit.visual.min.css +2 -2
  29. package/dist/ui-style-kit.with-bridge.css +55646 -6551
  30. package/dist/ui-style-kit.with-bridge.min.css +2 -2
  31. package/dist/visual/art-deco.css +7318 -0
  32. package/dist/visual/bauhaus.css +2 -2961
  33. package/dist/visual/bento.css +2 -2980
  34. package/dist/visual/brutalism.css +2679 -352
  35. package/dist/visual/clay.css +5 -0
  36. package/dist/visual/cyberpunk.css +4482 -781
  37. package/dist/visual/data-terminal.css +6182 -0
  38. package/dist/visual/editorial-luxe.css +6450 -0
  39. package/dist/visual/industrial-utility.css +7259 -0
  40. package/dist/visual/maximalist.css +4080 -1025
  41. package/dist/visual/minimal-saas.css +3305 -888
  42. package/dist/visual/neo-noir.css +5 -0
  43. package/dist/visual/neumorphism.css +3582 -975
  44. package/dist/visual/organic-modern.css +5 -0
  45. package/dist/visual/paper-editorial.css +7074 -0
  46. package/dist/visual/retro-glass.css +4426 -760
  47. package/dist/visual/retrofuturism.css +3676 -875
  48. package/dist/visual/tactile.css +4568 -1036
  49. package/dist/visual/technical-blueprint.css +6713 -0
  50. package/dist/visual/y2k.css +3672 -753
  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/DEMO-SHOWCASE.md +65 -0
  56. package/docs/ECOSYSTEM.md +9 -5
  57. package/docs/EDITORIAL-LUX.md +75 -0
  58. package/docs/INDUSTRIAL-UTILITY.md +131 -0
  59. package/docs/NATIVE-ELEMENTS.md +23 -17
  60. package/docs/NEO-NOIR.md +94 -0
  61. package/docs/ORGANIC-MODERN.md +91 -0
  62. package/docs/PAPER-EDITORIAL.md +63 -0
  63. package/docs/PUBLISHING.md +36 -11
  64. package/docs/RELEASE-2.4.0.md +88 -0
  65. package/docs/RETRO-GLASS.md +105 -0
  66. package/docs/STYLE-GUIDE.md +68 -13
  67. package/docs/TACTILE.md +38 -0
  68. package/docs/TECHNICAL-BLUEPRINT.md +60 -0
  69. package/docs/TOKENS.md +90 -4
  70. package/docs/superpowers/plans/2026-08-29-preset-identity-system-refinement.md +649 -0
  71. package/docs/superpowers/plans/2026-09-04-library-wide-theme-fallback-and-fidelity.md +331 -0
  72. package/docs/superpowers/specs/2026-08-29-preset-identity-system-refinement-design.md +212 -0
  73. package/docs/superpowers/specs/2026-09-04-library-wide-theme-fallback-and-fidelity-design.md +113 -0
  74. package/manifest.json +769 -20
  75. package/package.json +79 -14
  76. package/styles/art-deco.css +2068 -0
  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 +1092 -87
  98. package/styles/bento.css +1413 -86
  99. package/styles/brutalism.css +493 -10
  100. package/styles/clay.css +1927 -0
  101. package/styles/compat-layout.css +1 -2
  102. package/styles/components.css +698 -33
  103. package/styles/content-overflow.css +434 -9
  104. package/styles/cyberpunk.css +2082 -46
  105. package/styles/data-terminal.css +1795 -0
  106. package/styles/editorial-luxe.css +1251 -0
  107. package/styles/industrial-utility.css +2449 -0
  108. package/styles/interactive-surface-bridge.css +40 -24
  109. package/styles/interactive-surface-theme.css +31 -13
  110. package/styles/maximalist.css +1410 -94
  111. package/styles/minimal-saas.css +675 -73
  112. package/styles/native-elements.css +396 -168
  113. package/styles/neo-noir.css +1332 -0
  114. package/styles/neumorphism.css +1155 -52
  115. package/styles/organic-modern.css +1353 -0
  116. package/styles/paper-editorial.css +1724 -0
  117. package/styles/retro-glass.css +870 -42
  118. package/styles/retrofuturism.css +1173 -55
  119. package/styles/tactile.css +2018 -84
  120. package/styles/technical-blueprint.css +1337 -0
  121. package/styles/theme-colors.css +796 -5
  122. package/styles/y2k.css +1182 -40
package/styles/technical-blueprint.css ADDED
@@ -0,0 +1,1337 @@
1
+ /* =========================================================
2
+ UI Style Kit CSS — Technical Blueprint Theme System
3
+ Includes 20 color schemes, light/dark/contrast modes,
4
+ component classes, native element coverage, and CSS-only
5
+ accessibility presentation helpers.
6
+
7
+ Usage:
8
+ <body data-ui="technical-blueprint" data-theme="midnight-gold" data-mode="light">
9
+ <body data-ui="technical-blueprint" data-theme="arctic-indigo" data-mode="dark">
10
+ <body data-ui="technical-blueprint" data-theme="cyber-lime" data-mode="contrast">
11
+ ========================================================= */
12
+
13
+
14
+ @import url("./theme-colors.css");
15
+ @import url("./native-elements.css");
16
+ @import url("./content-overflow.css");
17
+
18
+ @layer ui-style-kit.technical_blueprint {
19
+ :root {
20
+ --blueprint-font-sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
21
+ --blueprint-font-display: Inter, ui-sans-serif, system-ui, sans-serif;
22
+ --blueprint-font-body: var(--blueprint-font-sans);
23
+ --blueprint-font-heading: var(--blueprint-font-display);
24
+ --blueprint-font-control: var(--blueprint-font-display);
25
+ --blueprint-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
26
+ /** Default night-sheet channels apply only when shared scheme tokens are absent. */
27
+ --blueprint-fallback-bg-rgb: 3 30 48;
28
+ --blueprint-fallback-surface-rgb: 4 39 62;
29
+ --blueprint-fallback-surface-strong-rgb: 7 51 77;
30
+ --blueprint-fallback-surface-soft-rgb: 7 46 70;
31
+ --blueprint-fallback-text-rgb: 220 240 248;
32
+ --blueprint-fallback-text-muted-rgb: 137 180 200;
33
+ --blueprint-fallback-border-rgb: 69 142 175;
34
+ --blueprint-fallback-primary-rgb: 0 183 235;
35
+ --blueprint-fallback-primary-hover-rgb: 54 211 248;
36
+ --blueprint-fallback-primary-text-rgb: 0 23 37;
37
+ --blueprint-fallback-secondary-rgb: 157 216 235;
38
+ --blueprint-fallback-secondary-hover-rgb: 206 241 250;
39
+ --blueprint-fallback-secondary-text-rgb: 0 23 37;
40
+ --blueprint-fallback-accent-rgb: 88 205 234;
41
+ --blueprint-fallback-accent-text-rgb: 0 23 37;
42
+ --blueprint-fallback-success-rgb: 63 185 111;
43
+ --blueprint-fallback-success-text-rgb: 0 25 15;
44
+ --blueprint-fallback-warning-rgb: 239 171 50;
45
+ --blueprint-fallback-warning-text-rgb: 32 20 0;
46
+ --blueprint-fallback-danger-rgb: 255 87 82;
47
+ --blueprint-fallback-danger-text-rgb: 255 255 255;
48
+ --blueprint-fallback-link-rgb: 107 218 242;
49
+ --blueprint-fallback-focus-rgb: 110 214 255;
50
+ --blueprint-radius-xs: .25rem;
51
+ --blueprint-radius-sm: .5rem;
52
+ --blueprint-radius-md: 0.75rem;
53
+ --blueprint-radius-lg: 1.125rem;
54
+ --blueprint-radius-xl: calc(1.125rem + .5rem);
55
+ --blueprint-radius-pill: 999px;
56
+ --blueprint-space-1: .25rem;
57
+ --blueprint-space-2: .5rem;
58
+ --blueprint-space-3: .75rem;
59
+ --blueprint-space-4: 1rem;
60
+ --blueprint-space-5: 1.25rem;
61
+ --blueprint-space-6: 1.5rem;
62
+ --blueprint-space-8: 2rem;
63
+ --blueprint-transition-fast: 150ms ease;
64
+ --blueprint-transition-base: 240ms ease;
65
+ }
66
+
67
+ [data-ui="technical-blueprint"][data-mode="light"] {
68
+ color-scheme: light;
69
+ --blueprint-fallback-bg-rgb: 250 248 240;
70
+ --blueprint-fallback-surface-rgb: 255 254 248;
71
+ --blueprint-fallback-surface-strong-rgb: 247 245 236;
72
+ --blueprint-fallback-surface-soft-rgb: 235 241 242;
73
+ --blueprint-fallback-text-rgb: 13 63 104;
74
+ --blueprint-fallback-text-muted-rgb: 60 91 116;
75
+ --blueprint-fallback-border-rgb: 82 135 172;
76
+ --blueprint-fallback-primary-rgb: 0 118 184;
77
+ --blueprint-fallback-primary-hover-rgb: 0 92 148;
78
+ --blueprint-fallback-primary-text-rgb: 255 255 255;
79
+ --blueprint-fallback-secondary-rgb: 8 83 139;
80
+ --blueprint-fallback-secondary-hover-rgb: 6 65 109;
81
+ --blueprint-fallback-secondary-text-rgb: 255 255 255;
82
+ --blueprint-fallback-accent-rgb: 31 166 204;
83
+ --blueprint-fallback-accent-text-rgb: 0 29 44;
84
+ --blueprint-fallback-success-rgb: 24 111 64;
85
+ --blueprint-fallback-success-text-rgb: 255 255 255;
86
+ --blueprint-fallback-warning-rgb: 132 76 0;
87
+ --blueprint-fallback-warning-text-rgb: 255 255 255;
88
+ --blueprint-fallback-danger-rgb: 209 58 54;
89
+ --blueprint-fallback-danger-text-rgb: 255 255 255;
90
+ --blueprint-fallback-link-rgb: 0 92 148;
91
+ --blueprint-fallback-focus-rgb: 0 145 205;
92
+ --blueprint-panel-alpha: .98;
93
+ --blueprint-panel-soft-alpha: .78;
94
+ --blueprint-border-alpha: .58;
95
+ --blueprint-shadow-alpha: .12;
96
+ --blueprint-focus-alpha: .34;
97
+ }
98
+
99
+ [data-ui="technical-blueprint"][data-mode="dark"] {
100
+ color-scheme: dark;
101
+ --blueprint-fallback-bg-rgb: 3 30 48;
102
+ --blueprint-fallback-surface-rgb: 4 39 62;
103
+ --blueprint-fallback-surface-strong-rgb: 7 51 77;
104
+ --blueprint-fallback-surface-soft-rgb: 7 46 70;
105
+ --blueprint-fallback-text-rgb: 220 240 248;
106
+ --blueprint-fallback-text-muted-rgb: 137 180 200;
107
+ --blueprint-fallback-border-rgb: 69 142 175;
108
+ --blueprint-fallback-primary-rgb: 0 183 235;
109
+ --blueprint-fallback-primary-hover-rgb: 54 211 248;
110
+ --blueprint-fallback-primary-text-rgb: 0 23 37;
111
+ --blueprint-fallback-secondary-rgb: 157 216 235;
112
+ --blueprint-fallback-secondary-hover-rgb: 206 241 250;
113
+ --blueprint-fallback-secondary-text-rgb: 0 23 37;
114
+ --blueprint-fallback-accent-rgb: 88 205 234;
115
+ --blueprint-fallback-accent-text-rgb: 0 23 37;
116
+ --blueprint-fallback-success-rgb: 63 185 111;
117
+ --blueprint-fallback-success-text-rgb: 0 25 15;
118
+ --blueprint-fallback-warning-rgb: 239 171 50;
119
+ --blueprint-fallback-warning-text-rgb: 32 20 0;
120
+ --blueprint-fallback-danger-rgb: 255 87 82;
121
+ --blueprint-fallback-danger-text-rgb: 0 0 0;
122
+ --blueprint-fallback-link-rgb: 107 218 242;
123
+ --blueprint-fallback-focus-rgb: 110 214 255;
124
+ --blueprint-panel-alpha: .92;
125
+ --blueprint-panel-soft-alpha: .64;
126
+ --blueprint-border-alpha: .52;
127
+ --blueprint-shadow-alpha: .34;
128
+ --blueprint-focus-alpha: .42;
129
+ }
130
+
131
+ [data-ui="technical-blueprint"][data-mode="contrast"] {
132
+ color-scheme: dark;
133
+ --blueprint-fallback-bg-rgb: 0 0 0;
134
+ --blueprint-fallback-surface-rgb: 0 16 28;
135
+ --blueprint-fallback-surface-strong-rgb: 0 28 44;
136
+ --blueprint-fallback-surface-soft-rgb: 0 20 34;
137
+ --blueprint-fallback-text-rgb: 255 255 255;
138
+ --blueprint-fallback-text-muted-rgb: 200 225 235;
139
+ --blueprint-fallback-border-rgb: 121 222 255;
140
+ --blueprint-fallback-primary-rgb: 0 229 255;
141
+ --blueprint-fallback-primary-hover-rgb: 102 238 255;
142
+ --blueprint-fallback-primary-text-rgb: 0 0 0;
143
+ --blueprint-fallback-secondary-rgb: 255 255 255;
144
+ --blueprint-fallback-secondary-hover-rgb: 210 236 245;
145
+ --blueprint-fallback-secondary-text-rgb: 0 0 0;
146
+ --blueprint-fallback-accent-rgb: 255 255 0;
147
+ --blueprint-fallback-accent-text-rgb: 0 0 0;
148
+ --blueprint-fallback-success-rgb: 64 255 128;
149
+ --blueprint-fallback-success-text-rgb: 0 0 0;
150
+ --blueprint-fallback-warning-rgb: 255 217 0;
151
+ --blueprint-fallback-warning-text-rgb: 0 0 0;
152
+ --blueprint-fallback-danger-rgb: 255 72 72;
153
+ --blueprint-fallback-danger-text-rgb: 0 0 0;
154
+ --blueprint-fallback-link-rgb: 102 238 255;
155
+ --blueprint-fallback-focus-rgb: 255 255 0;
156
+ --blueprint-panel-alpha: 1;
157
+ --blueprint-panel-soft-alpha: .92;
158
+ --blueprint-border-alpha: 1;
159
+ --blueprint-shadow-alpha: .5;
160
+ --blueprint-focus-alpha: .72;
161
+ }
162
+
163
+ /**
164
+ * Preserves the build-time semantic extraction seam for selected schemes.
165
+ * Runtime resolution, including no-scheme fallbacks, is defined immediately below.
166
+ */
167
+ [data-ui="technical-blueprint"][data-theme][data-mode] {
168
+ --blueprint-bg-rgb: var(--usk-bg-rgb);
169
+ --blueprint-surface-rgb: var(--usk-surface-rgb);
170
+ --blueprint-surface-strong-rgb: var(--usk-surface-strong-rgb);
171
+ --blueprint-surface-soft-rgb: var(--usk-surface-soft-rgb);
172
+ --blueprint-text-rgb: var(--usk-text-rgb);
173
+ --blueprint-text-muted-rgb: var(--usk-text-muted-rgb);
174
+ --blueprint-border-rgb: var(--usk-border-rgb);
175
+ --blueprint-primary-rgb: var(--usk-primary-rgb);
176
+ --blueprint-primary-hover-rgb: var(--usk-primary-hover-rgb);
177
+ --blueprint-primary-text-rgb: var(--usk-primary-text-rgb);
178
+ --blueprint-secondary-rgb: var(--usk-secondary-rgb);
179
+ --blueprint-secondary-hover-rgb: var(--usk-secondary-hover-rgb);
180
+ --blueprint-secondary-text-rgb: var(--usk-secondary-text-rgb);
181
+ --blueprint-accent-rgb: var(--usk-accent-rgb);
182
+ --blueprint-accent-text-rgb: var(--usk-accent-text-rgb);
183
+ --blueprint-success-rgb: var(--usk-success-rgb);
184
+ --blueprint-success-text-rgb: var(--usk-success-text-rgb);
185
+ --blueprint-warning-rgb: var(--usk-warning-rgb);
186
+ --blueprint-warning-text-rgb: var(--usk-warning-text-rgb);
187
+ --blueprint-danger-rgb: var(--usk-danger-rgb);
188
+ --blueprint-danger-text-rgb: var(--usk-danger-text-rgb);
189
+ --blueprint-link-rgb: var(--usk-link-rgb);
190
+ --blueprint-focus-rgb: var(--usk-focus-rgb);
191
+ /* Exposes the complete themed native-control contract to build-time tooling. */
192
+ --usk-native-surface: var(--blueprint-surface);
193
+ --usk-native-surface-strong: var(--blueprint-surface-strong);
194
+ --usk-native-surface-soft: var(--blueprint-surface-soft);
195
+ --usk-native-card-bg: var(--blueprint-card-bg);
196
+ --usk-native-control-bg: var(--blueprint-control-bg);
197
+ --usk-native-text: var(--blueprint-text);
198
+ --usk-native-text-muted: var(--blueprint-text-muted);
199
+ --usk-native-border: var(--blueprint-border);
200
+ --usk-native-primary: var(--blueprint-primary);
201
+ --usk-native-primary-hover: var(--blueprint-primary-hover);
202
+ --usk-native-on-primary: var(--blueprint-on-primary);
203
+ --usk-native-focus: var(--blueprint-focus);
204
+ --usk-native-success: var(--blueprint-success);
205
+ --usk-native-warning: var(--blueprint-warning);
206
+ --usk-native-danger: var(--blueprint-danger);
207
+ --usk-native-link: var(--blueprint-link);
208
+ --usk-native-font-body: var(--blueprint-font-body);
209
+ --usk-native-font-heading: var(--blueprint-font-heading);
210
+ --usk-native-font-control: "Arial Narrow", Bahnschrift, ui-monospace, monospace;
211
+ --usk-native-font-mono: var(--blueprint-font-mono);
212
+ --usk-native-radius-sm: 0;
213
+ --usk-native-radius: 0;
214
+ --usk-native-radius-lg: 0;
215
+ --usk-native-shadow: none;
216
+ --usk-native-shadow-md: none;
217
+ --usk-native-focus-ring: 0 0 0 1px var(--blueprint-surface), 0 0 0 3px var(--blueprint-focus);
218
+ --usk-native-border-width: 1px;
219
+ --usk-native-field-gap: .5rem;
220
+ --usk-native-panel-padding: var(--blueprint-space-5);
221
+ --usk-native-control-min-block-size: 2.75rem;
222
+ --usk-native-control-padding-block: .48rem;
223
+ --usk-native-control-padding-inline: .74rem;
224
+ --usk-native-subcontrol-padding-block: .34rem;
225
+ --usk-native-subcontrol-padding-inline: .54rem;
226
+ --usk-native-choice-size: 1.08rem;
227
+ --usk-native-choice-background: linear-gradient(90deg, transparent 46%, rgb(var(--blueprint-primary-rgb) / .12) 46% 54%, transparent 54%), var(--blueprint-control-bg);
228
+ --usk-native-choice-border: 1px solid var(--blueprint-primary);
229
+ --usk-native-checkbox-radius: 0;
230
+ --usk-native-radio-radius: 50%;
231
+ --usk-native-choice-shadow: 0 0 0 1px var(--blueprint-surface-strong);
232
+ --usk-native-choice-checked-background: linear-gradient(135deg, var(--blueprint-primary) 0 46%, var(--blueprint-surface) 46% 54%, var(--blueprint-primary) 54%);
233
+ --usk-native-choice-mark-color: var(--blueprint-on-primary);
234
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%), linear-gradient(135deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%);
235
+ --usk-native-select-indicator-size: .62rem .62rem, .62rem .62rem;
236
+ --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .64rem) 50%;
237
+ --usk-native-select-padding-inline-end: 2.15rem;
238
+ --usk-native-range-track-size: .22rem;
239
+ --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--blueprint-primary) 0 1px, transparent 1px .62rem), var(--blueprint-surface-soft);
240
+ --usk-native-range-track-border: 1px solid var(--blueprint-primary);
241
+ --usk-native-range-track-radius: 0;
242
+ --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
243
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
244
+ --usk-native-range-thumb-size: 1.02rem;
245
+ --usk-native-range-thumb-background: var(--blueprint-surface);
246
+ --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
247
+ --usk-native-range-thumb-radius: 0;
248
+ --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);
249
+ --usk-native-progress-size: .46rem;
250
+ --usk-native-progress-track-background: repeating-linear-gradient(90deg, transparent 0 24%, rgb(var(--blueprint-primary-rgb) / .18) 24% 25%), var(--blueprint-surface-soft);
251
+ --usk-native-progress-track-border: 1px solid var(--blueprint-primary);
252
+ --usk-native-progress-track-radius: 0;
253
+ --usk-native-progress-track-shadow: .14rem .14rem 0 rgb(var(--blueprint-primary-rgb) / .18);
254
+ --usk-native-progress-value-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
255
+ --usk-native-progress-value-radius: 0;
256
+ --usk-native-progress-value-shadow: none;
257
+ --usk-native-meter-optimum-background: var(--blueprint-success);
258
+ --usk-native-meter-suboptimum-background: var(--blueprint-warning);
259
+ --usk-native-meter-critical-background: var(--blueprint-danger);
260
+ --usk-native-file-button-background: var(--blueprint-primary);
261
+ --usk-native-file-button-border: 1px solid var(--blueprint-border);
262
+ --usk-native-file-button-radius: 0;
263
+ --usk-native-file-button-shadow: 0 0 0 1px var(--blueprint-primary);
264
+ --usk-native-color-swatch-border: 1px solid var(--blueprint-border);
265
+ --usk-native-color-swatch-radius: 0;
266
+ --usk-native-indicator-opacity: 0.9199999999999999;
267
+ --usk-native-indicator-filter: none;
268
+ --usk-native-scrollbar-size: .7rem;
269
+ --usk-native-scrollbar-track: repeating-linear-gradient(45deg, var(--blueprint-surface) 0 .18rem, var(--blueprint-surface-soft) .18rem .36rem);
270
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, transparent 35%, var(--blueprint-primary) 35% 65%, transparent 65%);
271
+ --usk-native-scrollbar-radius: 0;
272
+ --blueprint-bg: rgb(var(--blueprint-bg-rgb));
273
+ }
274
+
275
+ [data-ui="technical-blueprint"][data-mode] {
276
+ --usk-native-bg: var(--blueprint-bg);
277
+ /* Shared scheme aliases preserve the existing prefixed token API. */
278
+ --blueprint-bg-rgb: var(--usk-bg-rgb, var(--blueprint-fallback-bg-rgb));
279
+ --blueprint-surface-rgb: var(--usk-surface-rgb, var(--blueprint-fallback-surface-rgb));
280
+ --blueprint-surface-strong-rgb: var(--usk-surface-strong-rgb, var(--blueprint-fallback-surface-strong-rgb));
281
+ --blueprint-surface-soft-rgb: var(--usk-surface-soft-rgb, var(--blueprint-fallback-surface-soft-rgb));
282
+ --blueprint-text-rgb: var(--usk-text-rgb, var(--blueprint-fallback-text-rgb));
283
+ --blueprint-text-muted-rgb: var(--usk-text-muted-rgb, var(--blueprint-fallback-text-muted-rgb));
284
+ --blueprint-border-rgb: var(--usk-border-rgb, var(--blueprint-fallback-border-rgb));
285
+ --blueprint-primary-rgb: var(--usk-primary-rgb, var(--blueprint-fallback-primary-rgb));
286
+ --blueprint-primary-hover-rgb: var(--usk-primary-hover-rgb, var(--blueprint-fallback-primary-hover-rgb));
287
+ --blueprint-primary-text-rgb: var(--usk-primary-text-rgb, var(--blueprint-fallback-primary-text-rgb));
288
+ --blueprint-secondary-rgb: var(--usk-secondary-rgb, var(--blueprint-fallback-secondary-rgb));
289
+ --blueprint-secondary-hover-rgb: var(--usk-secondary-hover-rgb, var(--blueprint-fallback-secondary-hover-rgb));
290
+ --blueprint-secondary-text-rgb: var(--usk-secondary-text-rgb, var(--blueprint-fallback-secondary-text-rgb));
291
+ --blueprint-accent-rgb: var(--usk-accent-rgb, var(--blueprint-fallback-accent-rgb));
292
+ --blueprint-success-rgb: var(--usk-success-rgb, var(--blueprint-fallback-success-rgb));
293
+ --blueprint-warning-rgb: var(--usk-warning-rgb, var(--blueprint-fallback-warning-rgb));
294
+ --blueprint-danger-rgb: var(--usk-danger-rgb, var(--blueprint-fallback-danger-rgb));
295
+ --blueprint-link-rgb: var(--usk-link-rgb, var(--blueprint-fallback-link-rgb));
296
+ --blueprint-accent-text-rgb: var(--usk-accent-text-rgb, var(--blueprint-fallback-accent-text-rgb));
297
+ --blueprint-success-text-rgb: var(--usk-success-text-rgb, var(--blueprint-fallback-success-text-rgb));
298
+ --blueprint-warning-text-rgb: var(--usk-warning-text-rgb, var(--blueprint-fallback-warning-text-rgb));
299
+ --blueprint-danger-text-rgb: var(--usk-danger-text-rgb, var(--blueprint-fallback-danger-text-rgb));
300
+ --blueprint-focus-rgb: var(--usk-focus-rgb, var(--blueprint-fallback-focus-rgb));
301
+ /* Native fallback selectors inherit visual identity through shared tokens. */
302
+ --usk-native-surface: var(--blueprint-surface);
303
+ --usk-native-surface-strong: var(--blueprint-surface-strong);
304
+ --usk-native-surface-soft: var(--blueprint-surface-soft);
305
+ --usk-native-card-bg: var(--blueprint-card-bg);
306
+ --usk-native-control-bg: var(--blueprint-control-bg);
307
+ --usk-native-text: var(--blueprint-text);
308
+ --usk-native-text-muted: var(--blueprint-text-muted);
309
+ --usk-native-border: var(--blueprint-border);
310
+ --usk-native-primary: var(--blueprint-primary);
311
+ --usk-native-primary-hover: var(--blueprint-primary-hover);
312
+ --usk-native-on-primary: var(--blueprint-on-primary);
313
+ --usk-native-focus: var(--blueprint-focus);
314
+ --usk-native-success: var(--blueprint-success);
315
+ --usk-native-warning: var(--blueprint-warning);
316
+ --usk-native-danger: var(--blueprint-danger);
317
+ --usk-native-link: var(--blueprint-link);
318
+ --usk-native-font-body: var(--blueprint-font-body);
319
+ --usk-native-font-heading: var(--blueprint-font-heading);
320
+ --usk-native-font-control: var(--blueprint-font-control);
321
+ --usk-native-font-mono: var(--blueprint-font-mono);
322
+ --usk-native-radius-sm: var(--blueprint-radius-sm);
323
+ --usk-native-radius: var(--blueprint-radius-md);
324
+ --usk-native-radius-lg: var(--blueprint-radius-lg);
325
+ --usk-native-shadow: var(--blueprint-shadow-sm, none);
326
+ --usk-native-shadow-md: var(--blueprint-shadow-md, var(--usk-native-shadow));
327
+ --usk-native-focus-ring: var(--blueprint-focus-ring, 0 0 0 3px rgb(var(--blueprint-focus-rgb) / .28));
328
+ --usk-native-border-width: 1px;
329
+ --usk-native-field-gap: .5rem;
330
+ --usk-native-panel-padding: var(--blueprint-space-5);
331
+ --usk-native-control-min-block-size: 2.75rem;
332
+ --usk-native-control-padding-block: .74rem;
333
+ --usk-native-control-padding-inline: .95rem;
334
+ --usk-native-subcontrol-padding-block: .58rem;
335
+ --usk-native-subcontrol-padding-inline: .72rem;
336
+ --usk-native-choice-size: 1.35rem;
337
+ --usk-native-choice-background: var(--blueprint-control-bg);
338
+ --usk-native-choice-border: 1px solid var(--blueprint-border);
339
+ --usk-native-checkbox-radius: 0;
340
+ --usk-native-radio-radius: 50%;
341
+ --usk-native-choice-shadow: 0 0 0 1px var(--blueprint-primary);
342
+ --usk-native-choice-checked-background: var(--blueprint-primary);
343
+ --usk-native-choice-mark-color: var(--blueprint-on-primary);
344
+ --usk-native-select-indicator-image: linear-gradient(69deg, transparent 50%, var(--blueprint-primary) 50%), linear-gradient(111deg, var(--blueprint-primary) 50%, transparent 50%);
345
+ --usk-native-select-indicator-size: 0.5rem 0.5rem, 0.5rem 0.5rem;
346
+ --usk-native-select-indicator-position: calc(100% - 1.16rem) 50%, calc(100% - 0.84rem) 50%;
347
+ --usk-native-select-padding-inline-end: 2.55rem;
348
+ --usk-native-range-track-size: .34rem;
349
+ --usk-native-range-track-background: var(--blueprint-surface-soft);
350
+ --usk-native-range-track-border: 1px solid var(--blueprint-border);
351
+ --usk-native-range-track-radius: 0;
352
+ --usk-native-range-track-shadow: 0 0 0 1px var(--blueprint-primary);
353
+ --usk-native-range-progress-background: var(--blueprint-primary);
354
+ --usk-native-range-thumb-size: 1.2rem;
355
+ --usk-native-range-thumb-background: var(--blueprint-surface-strong);
356
+ --usk-native-range-thumb-border: 1px solid var(--blueprint-border);
357
+ --usk-native-range-thumb-radius: 50%;
358
+ --usk-native-range-thumb-shadow: 0 0 0 1px var(--blueprint-primary);
359
+ --usk-native-progress-size: .55rem;
360
+ --usk-native-progress-track-background: var(--blueprint-surface-soft);
361
+ --usk-native-progress-track-border: 1px solid var(--blueprint-border);
362
+ --usk-native-progress-track-radius: 0;
363
+ --usk-native-progress-track-shadow: 0 0 0 1px var(--blueprint-primary);
364
+ --usk-native-progress-value-background: var(--blueprint-primary);
365
+ --usk-native-progress-value-radius: 0;
366
+ --usk-native-progress-value-shadow: 0 0 0 1px var(--blueprint-primary);
367
+ --usk-native-meter-optimum-background: var(--blueprint-success);
368
+ --usk-native-meter-suboptimum-background: var(--blueprint-warning);
369
+ --usk-native-meter-critical-background: var(--blueprint-danger);
370
+ --usk-native-file-button-background: var(--blueprint-primary);
371
+ --usk-native-file-button-border: 1px solid var(--blueprint-border);
372
+ --usk-native-file-button-radius: 0;
373
+ --usk-native-file-button-shadow: 0 0 0 1px var(--blueprint-primary);
374
+ --usk-native-color-swatch-border: 1px solid var(--blueprint-border);
375
+ --usk-native-color-swatch-radius: 0;
376
+ --usk-native-indicator-opacity: 0.9199999999999999;
377
+ --usk-native-indicator-filter: none;
378
+ --usk-native-scrollbar-size: .65rem;
379
+ --usk-native-scrollbar-track: var(--blueprint-surface-soft);
380
+ --usk-native-scrollbar-thumb: var(--blueprint-primary);
381
+ --usk-native-scrollbar-radius: 0;
382
+ --blueprint-bg: rgb(var(--blueprint-bg-rgb));
383
+ --blueprint-surface: rgb(var(--blueprint-surface-rgb) / var(--blueprint-panel-alpha));
384
+ --blueprint-surface-strong: rgb(var(--blueprint-surface-strong-rgb) / var(--blueprint-panel-alpha));
385
+ --blueprint-surface-soft: rgb(var(--blueprint-surface-soft-rgb) / var(--blueprint-panel-soft-alpha));
386
+ --blueprint-text: rgb(var(--blueprint-text-rgb));
387
+ --blueprint-text-muted: rgb(var(--blueprint-text-muted-rgb));
388
+ --blueprint-fg: var(--blueprint-text);
389
+ --blueprint-surface-fg: var(--blueprint-text);
390
+ --blueprint-muted: var(--blueprint-text-muted);
391
+ --blueprint-border: rgb(var(--blueprint-border-rgb) / max(var(--blueprint-border-alpha), var(--usk-border-min-alpha)));
392
+ --blueprint-control-fg: var(--blueprint-text);
393
+ --blueprint-primary: rgb(var(--blueprint-primary-rgb));
394
+ --blueprint-primary-hover: rgb(var(--blueprint-primary-hover-rgb));
395
+ --blueprint-primary-text: rgb(var(--blueprint-primary-text-rgb));
396
+ --blueprint-secondary: rgb(var(--blueprint-secondary-rgb));
397
+ --blueprint-secondary-hover: rgb(var(--blueprint-secondary-hover-rgb));
398
+ --blueprint-secondary-text: rgb(var(--blueprint-secondary-text-rgb));
399
+ --blueprint-on-primary: var(--blueprint-primary-text);
400
+ --blueprint-on-secondary: var(--blueprint-secondary-text);
401
+ --blueprint-on-accent: rgb(var(--blueprint-accent-text-rgb));
402
+ --blueprint-on-success: rgb(var(--blueprint-success-text-rgb));
403
+ --blueprint-on-warning: rgb(var(--blueprint-warning-text-rgb));
404
+ --blueprint-on-danger: rgb(var(--blueprint-danger-text-rgb));
405
+ --blueprint-accent: rgb(var(--blueprint-accent-rgb));
406
+ --blueprint-success: rgb(var(--blueprint-success-rgb));
407
+ --blueprint-warning: rgb(var(--blueprint-warning-rgb));
408
+ --blueprint-danger: rgb(var(--blueprint-danger-rgb));
409
+ --blueprint-link: rgb(var(--blueprint-link-rgb));
410
+ --blueprint-focus: rgb(var(--blueprint-focus-rgb));
411
+ --blueprint-focus-ring: 0 0 0 3px rgb(var(--blueprint-focus-rgb) / var(--blueprint-focus-alpha));
412
+ --blueprint-theme-bg-size: auto;
413
+ --blueprint-theme-bg: radial-gradient(circle at 0% 0%, rgb(var(--blueprint-primary-rgb) / .16), transparent 32rem), radial-gradient(circle at 100% 0%, rgb(var(--blueprint-accent-rgb) / .12), transparent 30rem), radial-gradient(circle at 50% 100%, rgb(var(--blueprint-secondary-rgb) / .10), transparent 34rem), var(--blueprint-bg);
414
+ --blueprint-card-bg: linear-gradient(135deg, rgb(var(--blueprint-primary-rgb) / .10), rgb(var(--blueprint-accent-rgb) / .055) 42%, rgb(var(--blueprint-surface-strong-rgb) / var(--blueprint-panel-alpha)) 100%), var(--blueprint-surface);
415
+ --blueprint-control-bg: linear-gradient(180deg, rgb(var(--blueprint-surface-strong-rgb) / var(--blueprint-panel-alpha)), rgb(var(--blueprint-surface-soft-rgb) / var(--blueprint-panel-soft-alpha)));
416
+ --blueprint-spinner-track: rgb(var(--blueprint-border-rgb) / max(.28, calc(var(--blueprint-border-alpha) * .7)));
417
+ --blueprint-spinner-stroke: var(--blueprint-primary);
418
+ --blueprint-spinner-accent: var(--blueprint-accent);
419
+ }
420
+
421
+ @supports (color: color-mix(in srgb, black, white)) {
422
+ [data-ui="technical-blueprint"][data-mode] { --blueprint-border: color-mix(in srgb, rgb(var(--blueprint-border-rgb) / max(var(--blueprint-border-alpha), var(--usk-border-min-alpha))), var(--blueprint-text) var(--usk-border-text-mix)); }
423
+ }
424
+
425
+
426
+
427
+
428
+
429
+
430
+
431
+
432
+
433
+
434
+
435
+
436
+
437
+
438
+
439
+
440
+
441
+
442
+
443
+
444
+
445
+
446
+
447
+
448
+
449
+
450
+
451
+
452
+
453
+
454
+
455
+ /* =========================================================
456
+ Base Page + Layout
457
+ ========================================================= */
458
+
459
+ [data-ui="technical-blueprint"] {
460
+ min-height: 100vh;
461
+ background: linear-gradient(180deg, rgb(var(--blueprint-primary-rgb) / .04), transparent 22rem), var(--blueprint-bg);
462
+ color: var(--blueprint-text);
463
+ font-family: var(--blueprint-font-body);
464
+ line-height: 1.5;
465
+ text-rendering: optimizeLegibility;
466
+ -webkit-font-smoothing: antialiased;
467
+ -moz-osx-font-smoothing: grayscale;
468
+ }
469
+
470
+ [data-ui="technical-blueprint"] *,
471
+ [data-ui="technical-blueprint"] *::before,
472
+ [data-ui="technical-blueprint"] *::after { box-sizing: border-box; }
473
+
474
+ [data-ui="technical-blueprint"][data-theme][data-mode] { background: var(--blueprint-theme-bg); background-size: var(--blueprint-theme-bg-size); }
475
+ [data-ui="technical-blueprint"][data-mode]:not([data-theme]) { background: var(--blueprint-theme-bg); background-size: var(--blueprint-theme-bg-size); }
476
+
477
+ .blueprint-page { min-height: 100vh; padding: clamp(1rem, 4vw, 3rem); }
478
+ .blueprint-container { width: min(100% - 2rem, 1200px); margin-inline: auto; }
479
+ .blueprint-section { display: grid; gap: var(--blueprint-space-5); padding: clamp(1rem, 3vw, 2rem); }
480
+ .blueprint-stack { display: flex; flex-direction: column; gap: var(--blueprint-space-4); }
481
+ .blueprint-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--blueprint-space-3); }
482
+ .blueprint-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--blueprint-space-5); }
483
+ .blueprint-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 24rem), 1fr)); gap: var(--blueprint-space-6); align-items: start; }
484
+
485
+ /* =========================================================
486
+ Typography
487
+ ========================================================= */
488
+
489
+ .blueprint-title, .blueprint-heading, .blueprint-kicker, .blueprint-button, .blueprint-badge, .blueprint-nav-link { font-family: var(--blueprint-font-heading); }
490
+ .blueprint-title { margin: 0; color: var(--blueprint-text); font-size: clamp(2rem, 5vw, 3.7rem); line-height: 1.02; letter-spacing: -0.045em; }
491
+ .blueprint-heading { margin: 0; color: var(--blueprint-text); font-size: clamp(1.2rem, 2.5vw, 2rem); line-height: 1.15; letter-spacing: -0.03em; }
492
+ .blueprint-kicker { margin: 0; color: var(--blueprint-primary); font-size: .82rem; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
493
+ .blueprint-subtitle, .blueprint-copy { margin: 0; color: var(--blueprint-text-muted); line-height: 1.65; }
494
+ .blueprint-text-muted { color: var(--blueprint-text-muted); }
495
+ .blueprint-divider { width: 100%; height: 1px; border: 0; background: var(--blueprint-border); }
496
+
497
+ /* =========================================================
498
+ Surfaces
499
+ ========================================================= */
500
+
501
+ .blueprint-surface, .blueprint-card, .blueprint-panel, .blueprint-toolbar, .blueprint-table-wrap {
502
+ position: relative;
503
+ background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / 0)), var(--blueprint-surface);
504
+ color: var(--blueprint-text);
505
+ border: 1px solid var(--blueprint-border);
506
+ border-radius: var(--blueprint-radius-lg);
507
+ box-shadow: 0 10px 30px rgb(15 23 42 / var(--blueprint-shadow-alpha));
508
+ transition: transform var(--blueprint-transition-base), box-shadow var(--blueprint-transition-base), border-color var(--blueprint-transition-base), background var(--blueprint-transition-base);
509
+ }
510
+ .blueprint-card, .blueprint-panel { padding: var(--blueprint-space-6); }
511
+ .blueprint-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--blueprint-space-4); padding: var(--blueprint-space-4); }
512
+ .blueprint-surface-sm { border-radius: var(--blueprint-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / calc(var(--blueprint-shadow-alpha) * .72)); }
513
+ .blueprint-surface-lg { border-radius: var(--blueprint-radius-xl); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--blueprint-shadow-alpha) + .08)); }
514
+ .blueprint-well, .blueprint-inset { background: var(--blueprint-surface-soft); color: var(--blueprint-text); border: 1px solid rgb(var(--blueprint-border-rgb) / calc(var(--blueprint-border-alpha) * .7)); border-radius: var(--blueprint-radius-md); padding: var(--blueprint-space-5); box-shadow: inset 0 1px 3px rgb(0 0 0 / .08); }
515
+ .blueprint-hover-lift:hover { transform: translateY(-2px); box-shadow: 0 22px 60px rgb(0 0 0 / calc(var(--blueprint-shadow-alpha) + .12)); }
516
+
517
+ /* =========================================================
518
+ Buttons
519
+ ========================================================= */
520
+
521
+ .blueprint-button, .blueprint-icon-button {
522
+ appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--blueprint-space-2);
523
+ min-height: 2.75rem; padding: .75rem 1.1rem; background: var(--blueprint-surface); color: var(--blueprint-text);
524
+ border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-md); box-shadow: 0 6px 18px rgb(0 0 0 / var(--blueprint-shadow-alpha));
525
+ font: inherit; font-weight: 800; line-height: 1; text-decoration: none; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none;
526
+ transition: color var(--blueprint-transition-fast), background var(--blueprint-transition-fast), border-color var(--blueprint-transition-fast), box-shadow var(--blueprint-transition-fast), transform var(--blueprint-transition-fast);
527
+ }
528
+ .blueprint-button:hover, .blueprint-icon-button:hover { transform: translateY(-1px); border-color: var(--blueprint-primary); }
529
+ .blueprint-button:active, .blueprint-icon-button:active, .blueprint-button[aria-pressed="true"], .blueprint-icon-button[aria-pressed="true"], .blueprint-button.is-active, .blueprint-icon-button.is-active { transform: translateY(1px); box-shadow: inset 0 3px 10px rgb(0 0 0 / .18); }
530
+ .blueprint-button-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); border-color: var(--blueprint-primary); }
531
+ .blueprint-button-primary:hover { background: var(--blueprint-primary-hover); border-color: var(--blueprint-primary-hover); }
532
+ .blueprint-button-secondary { background: var(--blueprint-secondary); color: var(--blueprint-on-secondary); border-color: var(--blueprint-secondary); }
533
+ .blueprint-button-secondary:hover { background: var(--blueprint-secondary-hover); border-color: var(--blueprint-secondary-hover); }
534
+ .blueprint-button-danger { background: var(--blueprint-danger); color: var(--blueprint-on-danger); border-color: var(--blueprint-danger); }
535
+ .blueprint-button-ghost { background: transparent; color: var(--blueprint-text); box-shadow: none; }
536
+ .blueprint-icon-button { width: 2.75rem; padding: 0; border-radius: var(--blueprint-radius-pill); }
537
+ .blueprint-button:disabled, .blueprint-icon-button:disabled, .blueprint-disabled { opacity: .55; cursor: not-allowed; transform: none; }
538
+
539
+ /* Theme-responsive component defaults */
540
+ .blueprint-card, .blueprint-panel { background: var(--blueprint-card-bg); }
541
+ .blueprint-toolbar, .blueprint-table-wrap { background: var(--blueprint-control-bg); }
542
+ .blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning):not(.blueprint-button-ghost), .blueprint-icon-button { background: var(--blueprint-control-bg); }
543
+ .blueprint-button, .blueprint-icon-button, .blueprint-badge, .blueprint-nav-link { font-family: var(--blueprint-font-control); }
544
+
545
+
546
+ /* =========================================================
547
+ Forms
548
+ ========================================================= */
549
+
550
+ .blueprint-field { display: flex; flex-direction: column; gap: var(--blueprint-space-2); }
551
+ .blueprint-label { color: var(--blueprint-text); font-size: .925rem; font-weight: 800; }
552
+ .blueprint-input, .blueprint-textarea, .blueprint-select {
553
+ width: 100%; min-height: 2.875rem; padding: .75rem 1rem; background: var(--blueprint-surface-soft); color: var(--blueprint-text);
554
+ border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-md); font: inherit; outline: none;
555
+ transition: background var(--blueprint-transition-fast), border-color var(--blueprint-transition-fast), box-shadow var(--blueprint-transition-fast);
556
+ }
557
+ .blueprint-textarea { min-height: 8rem; resize: vertical; }
558
+ .blueprint-input::placeholder, .blueprint-textarea::placeholder { color: var(--blueprint-text-muted); opacity: .82; }
559
+ .blueprint-input:hover, .blueprint-textarea:hover, .blueprint-select:hover { border-color: rgb(var(--blueprint-primary-rgb) / .58); }
560
+ .blueprint-input:focus, .blueprint-textarea:focus, .blueprint-select:focus { border-color: var(--blueprint-focus); box-shadow: var(--blueprint-focus-ring); }
561
+ .blueprint-help-text { color: var(--blueprint-text-muted); font-size: .875rem; line-height: 1.45; }
562
+
563
+ /* Checkbox / Radio */
564
+ .blueprint-check, .blueprint-radio { display: inline-flex; align-items: center; gap: var(--blueprint-space-2); color: var(--blueprint-text); cursor: pointer; }
565
+ .blueprint-check input, .blueprint-radio input { position: absolute; opacity: 0; pointer-events: none; }
566
+ .blueprint-check-control, .blueprint-radio-control { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; background: var(--blueprint-surface-soft); border: 1px solid var(--blueprint-border); transition: background var(--blueprint-transition-fast), box-shadow var(--blueprint-transition-fast); }
567
+ .blueprint-check-control { border-radius: var(--blueprint-radius-xs); }
568
+ .blueprint-radio-control { border-radius: 50%; }
569
+ .blueprint-check input:checked + .blueprint-check-control, .blueprint-radio input:checked + .blueprint-radio-control { background: var(--blueprint-primary); border-color: var(--blueprint-primary); box-shadow: var(--blueprint-focus-ring); }
570
+ .blueprint-check input:checked + .blueprint-check-control::after { content: "✓"; color: var(--blueprint-on-primary); font-size: .9rem; font-weight: 900; }
571
+ .blueprint-radio input:checked + .blueprint-radio-control::after { content: ""; width: .55rem; height: .55rem; background: var(--blueprint-on-primary); border-radius: 50%; }
572
+
573
+ /* Switch */
574
+ .blueprint-switch { display: inline-flex; align-items: center; gap: var(--blueprint-space-3); color: var(--blueprint-text); cursor: pointer; }
575
+ .blueprint-switch input { position: absolute; opacity: 0; pointer-events: none; }
576
+ .blueprint-switch-track { position: relative; width: 3.5rem; height: 1.9rem; background: var(--blueprint-surface-soft); border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-pill); transition: background var(--blueprint-transition-fast), box-shadow var(--blueprint-transition-fast); }
577
+ .blueprint-switch-thumb { position: absolute; top: .22rem; left: .22rem; width: 1.34rem; height: 1.34rem; background: var(--blueprint-surface-strong); border: 1px solid var(--blueprint-border); border-radius: 50%; box-shadow: 0 4px 12px rgb(0 0 0 / var(--blueprint-shadow-alpha)); transition: left var(--blueprint-transition-fast), background var(--blueprint-transition-fast); }
578
+ .blueprint-switch input:checked + .blueprint-switch-track { background: var(--blueprint-primary); border-color: var(--blueprint-primary); }
579
+ .blueprint-switch input:checked + .blueprint-switch-track .blueprint-switch-thumb { left: calc(100% - 1.34rem - .22rem); background: var(--blueprint-on-primary); }
580
+
581
+ /* =========================================================
582
+ Badges / Nav / Progress / Alerts / Tables
583
+ ========================================================= */
584
+
585
+ .blueprint-badge { display: inline-flex; align-items: center; gap: var(--blueprint-space-1); min-height: 1.75rem; padding: .35rem .7rem; background: var(--blueprint-surface-soft); color: var(--blueprint-text); border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-pill); font-size: .8125rem; font-weight: 850; line-height: 1; }
586
+ .blueprint-badge-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); border-color: var(--blueprint-primary); }
587
+ .blueprint-badge-secondary { background: var(--blueprint-secondary); color: var(--blueprint-on-secondary); border-color: var(--blueprint-secondary); }
588
+ .blueprint-badge-success { background: var(--blueprint-success); color: var(--blueprint-on-success); border-color: var(--blueprint-success); }
589
+ .blueprint-badge-warning { background: var(--blueprint-warning); color: var(--blueprint-on-warning); border-color: var(--blueprint-warning); }
590
+ .blueprint-badge-danger { background: var(--blueprint-danger); color: var(--blueprint-on-danger); border-color: var(--blueprint-danger); }
591
+
592
+ .blueprint-nav { display: flex; flex-wrap: wrap; align-items: center; gap: var(--blueprint-space-2); padding: var(--blueprint-space-2); background: var(--blueprint-surface); border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-xl); box-shadow: 0 10px 30px rgb(0 0 0 / var(--blueprint-shadow-alpha)); }
593
+ .blueprint-nav-link { display: inline-flex; align-items: center; justify-content: center; min-height: 2.5rem; padding: .65rem 1rem; color: var(--blueprint-text-muted); border-radius: var(--blueprint-radius-pill); text-decoration: none; font-weight: 850; transition: color var(--blueprint-transition-fast), background var(--blueprint-transition-fast), box-shadow var(--blueprint-transition-fast); }
594
+ .blueprint-nav-link:hover { color: var(--blueprint-text); background: var(--blueprint-surface-soft); }
595
+ .blueprint-nav-link[aria-current="page"], .blueprint-nav-link.is-active { color: var(--blueprint-on-primary); background: var(--blueprint-primary); }
596
+
597
+ /* Tooltips use compact contrast surfaces that stay readable across theme modes. */
598
+ .blueprint-tooltip, [data-ui="technical-blueprint"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) {
599
+ display: inline-flex; align-items: center; gap: .45rem; max-inline-size: 16rem; padding: .55rem .75rem;
600
+ background: var(--blueprint-text); color: var(--blueprint-bg); border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-md);
601
+ box-shadow: 0 .75rem 1.6rem rgb(15 23 42 / .24); font-size: .82rem; font-weight: 850; line-height: 1.35;
602
+ }
603
+ .blueprint-tooltip-arrow { inline-size: .55rem; block-size: .55rem; flex: 0 0 auto; background: currentColor; border-radius: .12rem; opacity: .9; transform: rotate(45deg); }
604
+
605
+ .blueprint-progress { width: 100%; height: .9rem; overflow: hidden; background: var(--blueprint-surface-soft); border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-pill); }
606
+ .blueprint-progress-bar { height: 100%; width: var(--blueprint-progress-value, 50%); background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-accent)); border-radius: inherit; }
607
+
608
+ .blueprint-alert { display: grid; gap: var(--blueprint-space-2); padding: var(--blueprint-space-4); background: var(--blueprint-surface); color: var(--blueprint-text); border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-lg); box-shadow: 0 10px 30px rgb(0 0 0 / var(--blueprint-shadow-alpha)); }
609
+ .blueprint-alert-success { border-left-color: var(--blueprint-success); }
610
+ .blueprint-alert-warning { border-left-color: var(--blueprint-warning); }
611
+ .blueprint-alert-danger { border-left-color: var(--blueprint-danger); }
612
+ .blueprint-alert-title { margin: 0; font-weight: 900; }
613
+ .blueprint-alert-body { margin: 0; color: var(--blueprint-text-muted); line-height: 1.55; }
614
+
615
+ .blueprint-table-wrap { overflow: auto; }
616
+ .blueprint-table { width: 100%; border-collapse: collapse; }
617
+ .blueprint-table th, .blueprint-table td { padding: .95rem 1rem; text-align: left; border-bottom: 1px solid var(--blueprint-border); }
618
+ .blueprint-table th { color: var(--blueprint-text); font-size: .82rem; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; background: rgb(var(--blueprint-primary-rgb) / .08); }
619
+ .blueprint-table td { color: var(--blueprint-text-muted); }
620
+ .blueprint-table tr:hover td { background: rgb(var(--blueprint-primary-rgb) / .045); }
621
+
622
+ /* =========================================================
623
+ Utilities
624
+ ========================================================= */
625
+
626
+ .blueprint-text-primary { color: var(--blueprint-primary); } .blueprint-text-secondary { color: var(--blueprint-secondary); } .blueprint-text-accent { color: var(--blueprint-accent); } .blueprint-text-success { color: var(--blueprint-success); } .blueprint-text-warning { color: var(--blueprint-warning); } .blueprint-text-danger { color: var(--blueprint-danger); }
627
+ .blueprint-bg-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); } .blueprint-bg-secondary { background: var(--blueprint-secondary); color: var(--blueprint-on-secondary); }
628
+ .blueprint-border { border: 1px solid var(--blueprint-border); } .blueprint-rounded { border-radius: var(--blueprint-radius-md); } .blueprint-rounded-lg { border-radius: var(--blueprint-radius-lg); } .blueprint-rounded-xl { border-radius: var(--blueprint-radius-xl); } .blueprint-pill { border-radius: var(--blueprint-radius-pill); }
629
+ .blueprint-sr-only, .blueprint-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
630
+ .blueprint-skip-link { position: absolute; left: 1rem; top: 1rem; z-index: 9999; transform: translateY(-150%); padding: .75rem 1rem; background: var(--blueprint-primary); color: var(--blueprint-on-primary); border-radius: var(--blueprint-radius-md); font-weight: 900; }
631
+ .blueprint-skip-link:focus { transform: translateY(0); }
632
+
633
+ /* Minimal SaaS-specific product helpers */
634
+ .blueprint-metric { display: grid; gap: .25rem; padding: var(--blueprint-space-5); background: var(--blueprint-surface); border: 1px solid var(--blueprint-border); border-radius: var(--blueprint-radius-lg); }
635
+ .blueprint-metric-value { color: var(--blueprint-text); font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 850; line-height: 1; letter-spacing: -.04em; }
636
+ .blueprint-metric-label { color: var(--blueprint-text-muted); font-size: .9rem; font-weight: 700; }
637
+ .blueprint-empty-state { display: grid; place-items: center; gap: var(--blueprint-space-3); min-height: 14rem; padding: var(--blueprint-space-6); text-align: center; background: var(--blueprint-surface-soft); border: 1px dashed var(--blueprint-border); border-radius: var(--blueprint-radius-lg); }
638
+
639
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
640
+ display: inline-block;
641
+ inline-size: 2rem;
642
+ block-size: 2rem;
643
+ border: .25rem solid var(--blueprint-spinner-track);
644
+ border-block-start-color: var(--blueprint-spinner-stroke);
645
+ border-inline-end-color: var(--blueprint-spinner-accent);
646
+ border-radius: 50%;
647
+ vertical-align: -.2em;
648
+ animation: blueprint-spin .75s linear infinite;
649
+ }
650
+ .blueprint-spinner-sm { inline-size: 1rem; block-size: 1rem; border-width: .16rem; }
651
+ .blueprint-spinner-lg { inline-size: 3rem; block-size: 3rem; border-width: .32rem; }
652
+ .blueprint-button[aria-busy="true"], .blueprint-icon-button[aria-busy="true"], [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"]) { gap: .55rem; cursor: progress; }
653
+ .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after, [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
654
+ content: "";
655
+ display: inline-block;
656
+ inline-size: 1em;
657
+ block-size: 1em;
658
+ border: .16em solid rgb(var(--blueprint-primary-text-rgb) / .42);
659
+ border-block-start-color: currentColor;
660
+ border-radius: 50%;
661
+ animation: blueprint-spin .75s linear infinite;
662
+ }
663
+ @keyframes blueprint-spin { to { transform: rotate(360deg); } }
664
+
665
+
666
+
667
+ /* =========================================================
668
+ Marketing / Commercial Component Modifiers
669
+ Reusable visual patterns derived from service-oriented brand systems.
670
+ ========================================================= */
671
+
672
+ .blueprint-card-media {
673
+ display: block;
674
+ inline-size: 100%;
675
+ aspect-ratio: 16 / 9;
676
+ object-fit: cover;
677
+ border: 1px solid rgb(var(--blueprint-border-rgb) / .72);
678
+ border-radius: var(--blueprint-radius-lg);
679
+ }
680
+
681
+ .blueprint-card-service {
682
+ position: relative;
683
+ display: grid;
684
+ gap: var(--blueprint-space-3);
685
+ align-content: start;
686
+ text-align: center;
687
+ overflow: visible;
688
+ }
689
+ .blueprint-card-service > .blueprint-icon-medallion {
690
+ justify-self: center;
691
+ margin-block-start: -2.15rem;
692
+ position: relative;
693
+ z-index: 2;
694
+ }
695
+ .blueprint-card-service > .blueprint-card-media + .blueprint-icon-medallion { margin-block-start: -2.15rem; }
696
+
697
+ .blueprint-card-feature {
698
+ display: grid;
699
+ grid-template-columns: auto minmax(0, 1fr);
700
+ gap: var(--blueprint-space-4);
701
+ align-items: start;
702
+ }
703
+
704
+ .blueprint-card-accent-edge {
705
+ border-inline-start: .35rem solid var(--blueprint-primary);
706
+ }
707
+
708
+ .blueprint-icon-medallion {
709
+ display: inline-grid;
710
+ place-items: center;
711
+ inline-size: 3.75rem;
712
+ block-size: 3.75rem;
713
+ flex: 0 0 auto;
714
+ padding: .7rem;
715
+ background: var(--blueprint-primary);
716
+ color: var(--blueprint-on-primary);
717
+ border: 2px solid rgb(var(--blueprint-border-rgb) / .82);
718
+ border-radius: 50%;
719
+ line-height: 1;
720
+ }
721
+ .blueprint-icon-medallion > :where(svg, img) { inline-size: 100%; block-size: 100%; object-fit: contain; }
722
+
723
+ .blueprint-button.blueprint-button-cut,
724
+ .blueprint-button-cut {
725
+ border-radius: 0;
726
+ clip-path: polygon(.6rem 0, 100% 0, 100% calc(100% - .6rem), calc(100% - .6rem) 100%, 0 100%, 0 .6rem);
727
+ }
728
+ .blueprint-button.blueprint-button-cut:focus-visible,
729
+ .blueprint-button-cut:focus-visible { outline-offset: -3px; }
730
+
731
+ .blueprint-button.blueprint-button-outline-heavy,
732
+ .blueprint-button-outline-heavy {
733
+ background: transparent;
734
+ color: var(--blueprint-primary);
735
+ border-style: solid;
736
+ border-width: 2px;
737
+ border-color: var(--blueprint-primary);
738
+ box-shadow: none;
739
+ }
740
+ .blueprint-button.blueprint-button-outline-heavy:hover,
741
+ .blueprint-button-outline-heavy:hover {
742
+ background: var(--blueprint-primary);
743
+ color: var(--blueprint-on-primary);
744
+ border-color: var(--blueprint-primary-hover);
745
+ }
746
+
747
+ .blueprint-badge-seal {
748
+ display: inline-grid;
749
+ place-items: center;
750
+ align-content: center;
751
+ inline-size: 5rem;
752
+ min-inline-size: 5rem;
753
+ aspect-ratio: 1;
754
+ padding: .65rem;
755
+ background: var(--blueprint-surface-strong);
756
+ color: var(--blueprint-text);
757
+ border: 2px solid var(--blueprint-primary);
758
+ border-radius: 50%;
759
+ text-align: center;
760
+ font-family: var(--blueprint-font-heading);
761
+ font-size: .72rem;
762
+ font-weight: 900;
763
+ line-height: 1.05;
764
+ letter-spacing: .04em;
765
+ }
766
+
767
+ .blueprint-feature-strip {
768
+ display: grid;
769
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
770
+ background: var(--blueprint-card-bg);
771
+ color: var(--blueprint-text);
772
+ border: 1px solid var(--blueprint-border);
773
+ border-radius: var(--blueprint-radius-lg);
774
+ }
775
+
776
+ .blueprint-feature-item {
777
+ display: grid;
778
+ grid-template-columns: auto minmax(0, 1fr);
779
+ align-items: center;
780
+ gap: var(--blueprint-space-3);
781
+ min-inline-size: 0;
782
+ padding: var(--blueprint-space-4);
783
+ border-inline-end: 1px solid rgb(var(--blueprint-border-rgb) / .62);
784
+ }
785
+ .blueprint-feature-item:last-child { border-inline-end: 0; }
786
+ .blueprint-feature-item > :where(p, small) { margin: 0; color: var(--blueprint-text-muted); }
787
+
788
+ .blueprint-callout-bar {
789
+ display: grid;
790
+ grid-template-columns: auto minmax(0, 1fr) auto;
791
+ align-items: center;
792
+ gap: var(--blueprint-space-4);
793
+ padding: var(--blueprint-space-4) var(--blueprint-space-5);
794
+ background: var(--blueprint-card-bg);
795
+ color: var(--blueprint-text);
796
+ border: 1px solid var(--blueprint-border);
797
+ border-radius: var(--blueprint-radius-lg);
798
+ }
799
+ .blueprint-callout-bar > :where(p, div) { min-inline-size: 0; }
800
+ .blueprint-callout-bar > :where(.blueprint-button, a, button):last-child { justify-self: end; }
801
+
802
+ .blueprint-eyebrow {
803
+ margin: 0;
804
+ color: var(--blueprint-primary);
805
+ font-family: var(--blueprint-font-heading);
806
+ font-size: .76rem;
807
+ font-weight: 900;
808
+ line-height: 1.2;
809
+ letter-spacing: .14em;
810
+ text-transform: uppercase;
811
+ }
812
+
813
+ .blueprint-media-scrim {
814
+ position: relative;
815
+ overflow: hidden;
816
+ isolation: isolate;
817
+ min-block-size: 12rem;
818
+ background: var(--blueprint-surface-soft);
819
+ border: 1px solid var(--blueprint-border);
820
+ border-radius: var(--blueprint-radius-lg);
821
+ }
822
+ .blueprint-media-scrim > :where(img, picture, video) {
823
+ display: block;
824
+ inline-size: 100%;
825
+ block-size: 100%;
826
+ min-block-size: inherit;
827
+ object-fit: cover;
828
+ }
829
+ .blueprint-media-scrim > :where(figcaption, [data-media-caption]) {
830
+ position: absolute;
831
+ z-index: 1;
832
+ inset-inline: 0;
833
+ inset-block-end: 0;
834
+ padding: clamp(1rem, 4vw, 2rem);
835
+ color: #fff;
836
+ background: linear-gradient(to top, rgb(0 0 0 / .9), rgb(0 0 0 / .58) 56%, transparent);
837
+ }
838
+ .blueprint-media-scrim > :where(figcaption, [data-media-caption]) * {
839
+ color: inherit;
840
+ }
841
+
842
+ @media (max-width: 42rem) {
843
+ .blueprint-callout-bar { grid-template-columns: 1fr; align-items: start; }
844
+ .blueprint-callout-bar > :where(.blueprint-button, a, button):last-child { justify-self: stretch; }
845
+ .blueprint-feature-item { border-inline-end: 0; border-block-end: 1px solid rgb(var(--blueprint-border-rgb) / .62); }
846
+ .blueprint-feature-item:last-child { border-block-end: 0; }
847
+ }
848
+
849
+ .blueprint-card-service, .blueprint-card-feature, .blueprint-feature-strip, .blueprint-callout-bar { box-shadow: 0 .9rem 2rem rgb(15 23 42 / calc(var(--blueprint-shadow-alpha) + .03)); }
850
+ .blueprint-card-accent-edge { border-inline-start-width: .3rem; }
851
+ .blueprint-icon-medallion { box-shadow: 0 .55rem 1.2rem rgb(15 23 42 / calc(var(--blueprint-shadow-alpha) + .05)); }
852
+
853
+ /* =========================================================
854
+ Technical Blueprint Identity
855
+ ========================================================= */
856
+ :root {
857
+ --blueprint-font-display: "Bahnschrift Condensed", "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Arial, sans-serif;
858
+ --blueprint-font-body: Bahnschrift, "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
859
+ --blueprint-font-heading: var(--blueprint-font-display);
860
+ --blueprint-font-control: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
861
+ --blueprint-radius-xs: 0;
862
+ --blueprint-radius-sm: .08rem;
863
+ --blueprint-radius-md: .12rem;
864
+ --blueprint-radius-lg: .18rem;
865
+ --blueprint-radius-xl: .24rem;
866
+ }
867
+ [data-ui="technical-blueprint"][data-mode] {
868
+ --blueprint-theme-bg: linear-gradient(90deg, rgb(var(--blueprint-border-rgb) / .13) 1px, transparent 1px), linear-gradient(rgb(var(--blueprint-border-rgb) / .13) 1px, transparent 1px), linear-gradient(90deg, rgb(var(--blueprint-primary-rgb) / .09) 1px, transparent 1px), linear-gradient(rgb(var(--blueprint-primary-rgb) / .09) 1px, transparent 1px), var(--blueprint-bg);
869
+ --blueprint-theme-bg-size: 1.5rem 1.5rem, 1.5rem 1.5rem, .3rem .3rem, .3rem .3rem, auto;
870
+ --blueprint-card-bg: rgb(var(--blueprint-surface-rgb) / calc(var(--blueprint-panel-alpha) * .86));
871
+ }
872
+ .blueprint-title, .blueprint-heading { font-family: var(--blueprint-font-display); font-stretch: condensed; font-weight: 800; text-transform: uppercase; letter-spacing: .025em; }
873
+ .blueprint-title { font-size: clamp(2.3rem, 5.8vw, 4.7rem); line-height: .94; }
874
+ .blueprint-kicker, .blueprint-eyebrow, .blueprint-label, .blueprint-table th, .blueprint-badge { font-family: var(--blueprint-font-control); text-transform: uppercase; letter-spacing: .08em; }
875
+ .blueprint-surface, .blueprint-card, .blueprint-panel, .blueprint-toolbar, .blueprint-table-wrap { border-radius: 0; box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .12); }
876
+ .blueprint-card, .blueprint-panel, .blueprint-toolbar { background-image: linear-gradient(90deg, transparent calc(100% - .55rem), rgb(var(--blueprint-primary-rgb) / .3) calc(100% - .55rem), rgb(var(--blueprint-primary-rgb) / .3) calc(100% - .48rem), transparent calc(100% - .48rem)); }
877
+ .blueprint-button, .blueprint-icon-button { border-radius: 0; box-shadow: none; font-family: var(--blueprint-font-control); text-transform: uppercase; letter-spacing: .06em; }
878
+ .blueprint-button:not(.blueprint-button-primary):not(.blueprint-button-secondary):not(.blueprint-button-danger):not(.blueprint-button-warning) { background: transparent; }
879
+ .blueprint-nav { border-radius: 0; box-shadow: none; }
880
+ .blueprint-nav-link { border-radius: 0; font-family: var(--blueprint-font-control); font-size: .75rem; text-transform: uppercase; }
881
+ .blueprint-input, .blueprint-textarea, .blueprint-select, .blueprint-badge, .blueprint-alert, .blueprint-metric, .blueprint-well, .blueprint-inset { border-radius: 0; }
882
+ .blueprint-table { font-family: var(--blueprint-font-control); font-size: .82rem; }
883
+ .blueprint-card-media, .blueprint-media-scrim, .blueprint-feature-strip, .blueprint-callout-bar { border-radius: 0; }
884
+ .blueprint-icon-medallion { border-radius: 0; background: transparent; color: var(--blueprint-primary); box-shadow: inset 0 0 0 1px rgb(var(--blueprint-primary-rgb) / .35); }
885
+ .blueprint-badge-seal { border-radius: 0; background: transparent; font-family: var(--blueprint-font-control); }
886
+ .blueprint-card-accent-edge { border-inline-start-width: 1px; box-shadow: inset .35rem 0 0 rgb(var(--blueprint-primary-rgb) / .12); }
887
+
888
+ /* Filled and framed actions share drafting corners and measured center notches. */
889
+ .blueprint-button.blueprint-button-cut, .blueprint-button-cut {
890
+ min-block-size: 2.75rem;
891
+ min-inline-size: 6rem;
892
+ max-inline-size: 100%;
893
+ justify-self: start;
894
+ justify-content: center;
895
+ clip-path: polygon(.55rem 0, 42% 0, 42% .18rem, 58% .18rem, 58% 0, calc(100% - .55rem) 0, 100% .55rem, 100% calc(100% - .55rem), calc(100% - .55rem) 100%, .55rem 100%, 0 calc(100% - .55rem), 0 .55rem);
896
+ }
897
+ .blueprint-button.blueprint-button-outline-heavy, .blueprint-button-outline-heavy {
898
+ border-width: 1px;
899
+ border-radius: 0;
900
+ clip-path: polygon(.4rem 0, 38% 0, 38% .14rem, 62% .14rem, 62% 0, calc(100% - .4rem) 0, 100% .4rem, 100% calc(100% - .4rem), calc(100% - .4rem) 100%, .4rem 100%, 0 calc(100% - .4rem), 0 .4rem);
901
+ box-shadow: inset 0 0 0 1px rgb(var(--blueprint-surface-strong-rgb) / .72), .2rem .2rem 0 rgb(var(--blueprint-primary-rgb) / .28);
902
+ }
903
+
904
+ /* Marketing and native surfaces use drafting frames and measured inset rules. */
905
+ .blueprint-card-service, .blueprint-media-scrim, .blueprint-feature-strip, .blueprint-callout-bar, .blueprint-metric {
906
+ border: 1px solid var(--blueprint-primary);
907
+ border-radius: 0;
908
+ box-shadow: inset 0 0 0 1px rgb(var(--blueprint-surface-strong-rgb) / .72), .2rem .2rem 0 rgb(var(--blueprint-primary-rgb) / .24);
909
+ }
910
+ [data-ui="technical-blueprint"][data-theme][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])),
911
+ [data-ui="technical-blueprint"][data-mode]:not([data-theme]) :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class])) {
912
+ border: 1px solid var(--blueprint-primary);
913
+ border-radius: 0;
914
+ box-shadow: none;
915
+ }
916
+ [data-ui="technical-blueprint"][data-theme][data-mode] :where(dialog),
917
+ [data-ui="technical-blueprint"][data-mode]:not([data-theme]) :where(dialog) {
918
+ border: 1px solid var(--blueprint-primary);
919
+ border-radius: 0;
920
+ box-shadow: none;
921
+ }
922
+
923
+ /* Technical Blueprint loaders use drafting corners and measured ticks. */
924
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) {
925
+ border-style: double; border-radius: 0; background: repeating-conic-gradient(var(--blueprint-spinner-stroke) 0 8deg, transparent 8deg 22deg); box-shadow: inset 0 0 0 .2rem var(--blueprint-surface); clip-path: polygon(0 0, 42% 0, 42% 10%, 58% 10%, 58% 0, 100% 0, 100% 42%, 90% 42%, 90% 58%, 100% 58%, 100% 100%, 0 100%); animation: blueprint-spin 1s steps(12, end) infinite;
926
+ }
927
+ .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after, [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after {
928
+ border: .08em double currentColor; border-radius: 0; background: repeating-conic-gradient(currentColor 0 8deg, transparent 8deg 24deg); box-shadow: inset 0 0 0 .1em rgb(var(--blueprint-surface-rgb) / .45); clip-path: polygon(0 0, 42% 0, 42% 12%, 58% 12%, 58% 0, 100% 0, 100% 42%, 88% 42%, 88% 58%, 100% 58%, 100% 100%, 0 100%); animation: blueprint-spin 1s steps(12, end) infinite;
929
+ }
930
+
931
+ /**
932
+ * Final Technical Blueprint fidelity layer.
933
+ * Integrates measured drafting rules, registration marks, and calibrated controls.
934
+ */
935
+ [data-ui="technical-blueprint"][data-mode] {
936
+ --blueprint-card-bg: var(--blueprint-surface);
937
+ --blueprint-control-bg: var(--blueprint-surface-soft);
938
+ --usk-native-card-bg: var(--blueprint-card-bg);
939
+ --usk-native-control-bg: var(--blueprint-control-bg);
940
+ --usk-native-font-control: "Arial Narrow", Bahnschrift, ui-monospace, monospace;
941
+ --usk-native-control-min-block-size: 2.75rem;
942
+ --usk-native-control-padding-block: .48rem;
943
+ --usk-native-control-padding-inline: .74rem;
944
+ --usk-native-border-width: 1px;
945
+ --usk-native-radius-sm: 0;
946
+ --usk-native-radius: 0;
947
+ --usk-native-radius-lg: 0;
948
+ --usk-native-shadow: none;
949
+ --usk-native-shadow-md: none;
950
+ --usk-native-focus-ring: 0 0 0 1px var(--blueprint-surface), 0 0 0 3px var(--blueprint-focus);
951
+ --usk-native-subcontrol-padding-block: .34rem;
952
+ --usk-native-subcontrol-padding-inline: .54rem;
953
+ --usk-native-choice-size: 1.08rem;
954
+ --usk-native-choice-background: linear-gradient(90deg, transparent 46%, rgb(var(--blueprint-primary-rgb) / .12) 46% 54%, transparent 54%), var(--blueprint-control-bg);
955
+ --usk-native-choice-border: 1px solid var(--blueprint-primary);
956
+ --usk-native-checkbox-radius: 0;
957
+ --usk-native-radio-radius: 50%;
958
+ --usk-native-choice-shadow: 0 0 0 1px var(--blueprint-surface-strong);
959
+ --usk-native-choice-checked-background: linear-gradient(135deg, var(--blueprint-primary) 0 46%, var(--blueprint-surface) 46% 54%, var(--blueprint-primary) 54%);
960
+ --usk-native-choice-mark-color: var(--blueprint-on-primary);
961
+ --usk-native-select-indicator-image: linear-gradient(45deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%), linear-gradient(135deg, transparent 47%, var(--blueprint-primary) 47% 53%, transparent 53%);
962
+ --usk-native-select-indicator-size: .62rem .62rem, .62rem .62rem;
963
+ --usk-native-select-indicator-position: calc(100% - 1rem) 50%, calc(100% - .64rem) 50%;
964
+ --usk-native-select-padding-inline-end: 2.15rem;
965
+ --usk-native-range-track-size: .22rem;
966
+ --usk-native-range-track-background: repeating-linear-gradient(90deg, var(--blueprint-primary) 0 1px, transparent 1px .62rem), var(--blueprint-surface-soft);
967
+ --usk-native-range-track-border: 1px solid var(--blueprint-primary);
968
+ --usk-native-range-track-radius: 0;
969
+ --usk-native-range-track-shadow: 0 -.34rem 0 -.31rem var(--blueprint-primary);
970
+ --usk-native-range-progress-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
971
+ --usk-native-range-thumb-size: 1.02rem;
972
+ --usk-native-range-thumb-background: var(--blueprint-surface);
973
+ --usk-native-range-thumb-border: 1px double var(--blueprint-primary);
974
+ --usk-native-range-thumb-radius: 0;
975
+ --usk-native-range-thumb-shadow: 0 0 0 2px var(--blueprint-surface), 0 0 0 3px var(--blueprint-primary);
976
+ --usk-native-progress-size: .46rem;
977
+ --usk-native-progress-track-background: repeating-linear-gradient(90deg, transparent 0 24%, rgb(var(--blueprint-primary-rgb) / .18) 24% 25%), var(--blueprint-surface-soft);
978
+ --usk-native-progress-track-border: 1px solid var(--blueprint-primary);
979
+ --usk-native-progress-track-radius: 0;
980
+ --usk-native-progress-track-shadow: .14rem .14rem 0 rgb(var(--blueprint-primary-rgb) / .18);
981
+ --usk-native-progress-value-background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus));
982
+ --usk-native-progress-value-radius: 0;
983
+ --usk-native-progress-value-shadow: none;
984
+ --usk-native-scrollbar-size: .7rem;
985
+ --usk-native-scrollbar-track: repeating-linear-gradient(45deg, var(--blueprint-surface) 0 .18rem, var(--blueprint-surface-soft) .18rem .36rem);
986
+ --usk-native-scrollbar-thumb: linear-gradient(90deg, transparent 35%, var(--blueprint-primary) 35% 65%, transparent 65%);
987
+ --usk-native-scrollbar-radius: 0;
988
+ }
989
+
990
+ .blueprint-title { margin-block: .75rem; font-weight: 800; letter-spacing: max(.045em, .5px); }
991
+ .blueprint-label { font-size: .71rem; font-weight: 700; }
992
+ .blueprint-page { border: 3px double var(--blueprint-primary); border-radius: 0; }
993
+ [data-ui="technical-blueprint"] :where(h1, h2, h3, h4, h5, h6) { font-family: var(--blueprint-font-display); font-stretch: condensed; text-transform: uppercase; letter-spacing: .025em; }
994
+ .blueprint-card, .blueprint-panel { padding: .94rem; background: var(--blueprint-card-bg); border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; background-image: none; }
995
+ .blueprint-well, .blueprint-inset { padding: .7rem; background: repeating-linear-gradient(0deg, transparent 0 .28rem, rgb(var(--blueprint-primary-rgb) / .08) .28rem calc(.28rem + 1px)), var(--blueprint-surface); border: 1px dashed var(--blueprint-primary); border-radius: 0; box-shadow: inset 0 0 0 1px var(--blueprint-surface-strong); }
996
+ .blueprint-button, .blueprint-icon-button { min-height: 2.75rem; padding: .48rem .74rem; background: transparent; border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; font-weight: 700; }
997
+ .blueprint-button:active, .blueprint-button[aria-pressed="true"], .blueprint-button.is-active { transform: translate(.12rem, .12rem); box-shadow: none; }
998
+ .blueprint-switch-track, .blueprint-switch-thumb { border-radius: 0; box-shadow: none; }
999
+ .blueprint-input, .blueprint-textarea, .blueprint-select { min-height: 2.75rem; padding: .42rem .62rem; background: var(--blueprint-control-bg); border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; }
1000
+ .blueprint-nav, .blueprint-toolbar { border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; }
1001
+ .blueprint-nav-link { border-radius: 0; border-inline-end: 1px solid var(--blueprint-primary); }
1002
+ .blueprint-badge { min-height: 1.42rem; padding: .22rem .46rem; border: 1px solid currentColor; border-radius: 0; box-shadow: none; }
1003
+ .blueprint-alert { padding: .68rem .8rem; background: repeating-linear-gradient(135deg, transparent 0 .35rem, rgb(var(--blueprint-primary-rgb) / .06) .35rem .42rem), var(--blueprint-surface); border: 1px dashed currentColor; border-radius: 0; box-shadow: none; }
1004
+ .blueprint-progress { height: .46rem; background: repeating-linear-gradient(90deg, transparent 0 24%, rgb(var(--blueprint-primary-rgb) / .18) 24% 25%), var(--blueprint-surface-soft); border-radius: 0; }
1005
+ .blueprint-progress-bar { background: linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-focus)); border-radius: 0; box-shadow: none; }
1006
+ .blueprint-table-wrap { background: repeating-linear-gradient(90deg, transparent 0 calc(1rem - 1px), rgb(var(--blueprint-primary-rgb) / .08) calc(1rem - 1px) 1rem), var(--blueprint-surface); border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; }
1007
+ .blueprint-table { border-collapse: collapse; font-variant-numeric: tabular-nums; }
1008
+ .blueprint-table th { padding: .48rem .58rem; background: repeating-linear-gradient(135deg, rgb(var(--blueprint-primary-rgb) / .12) 0 1px, transparent 1px .3rem); border: 1px solid var(--blueprint-primary); font-weight: 700; }
1009
+ .blueprint-table td { padding: .5rem .58rem; border: 1px solid var(--blueprint-primary); }
1010
+ .blueprint-tooltip, [data-ui="technical-blueprint"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; }
1011
+ .blueprint-card-service, .blueprint-card-feature, .blueprint-media-scrim, .blueprint-feature-strip, .blueprint-callout-bar, .blueprint-metric, .blueprint-icon-medallion { border-radius: 0; background-image: none; box-shadow: none; }
1012
+ [data-ui="technical-blueprint"][data-mode] :where(button:not([class]), input[type="button"]:not([class]), input[type="submit"]:not([class]), input[type="reset"]:not([class]), dialog) { box-shadow: none; }
1013
+ .blueprint-input, .blueprint-alert { border-radius: 0; }
1014
+
1015
+ @media (prefers-reduced-motion: reduce) {
1016
+ [data-ui="technical-blueprint"] *, [data-ui="technical-blueprint"] *::before, [data-ui="technical-blueprint"] *::after { scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important; }
1017
+ }
1018
+ @media (prefers-contrast: more) {
1019
+ [data-ui="technical-blueprint"] { --blueprint-border-alpha: 1; --blueprint-focus-alpha: .75; }
1020
+ }
1021
+ @media (forced-colors: active) {
1022
+ @supports (forced-color-adjust: auto) { [data-ui="technical-blueprint"] * { forced-color-adjust: auto; } }
1023
+ [data-ui="technical-blueprint"] :where(:focus-visible) { outline: 3px solid CanvasText; }
1024
+ }
1025
+ @media print {
1026
+ [data-ui="technical-blueprint"] { background: #fff !important; color: #000 !important; }
1027
+ [data-ui="technical-blueprint"] * { box-shadow: none !important; text-shadow: none !important; }
1028
+ [data-ui="technical-blueprint"] a { color: #000 !important; text-decoration: underline; }
1029
+ }
1030
+ }
1031
+
1032
+ @layer ui-style-kit.technical_blueprint {
1033
+ /* Keeps semantic field states above preset-specific material paint. */
1034
+ .blueprint-input[aria-invalid="true"], .blueprint-textarea[aria-invalid="true"], .blueprint-select[aria-invalid="true"] { border-color: var(--blueprint-danger); box-shadow: 0 0 0 2px rgb(var(--blueprint-danger-rgb) / .2); }
1035
+ .blueprint-input[readonly], .blueprint-textarea[readonly] { border-style: dashed; filter: saturate(.72); opacity: .78; }
1036
+ /** Restores semantic action paint while retaining flat drafting geometry. */
1037
+ .blueprint-button-primary { background: var(--blueprint-primary); color: var(--blueprint-on-primary); border-color: var(--blueprint-primary); }
1038
+ .blueprint-button-secondary { background: transparent; color: var(--blueprint-secondary); border-color: var(--blueprint-secondary); }
1039
+ .blueprint-button-danger { background: transparent; color: var(--blueprint-danger); border-color: var(--blueprint-danger); }
1040
+ .blueprint-button-ghost { background: transparent; color: var(--blueprint-primary); border-color: transparent; }
1041
+ }
1042
+
1043
+ @layer ui-style-kit.technical_blueprint {
1044
+ /** Shared annotation fidelity: readable display rhythm and appropriately scaled text icons. */
1045
+ .blueprint-feature-item > .blueprint-icon-medallion { font-size: 1.5rem; line-height: 1; }
1046
+ .blueprint-callout-bar > .blueprint-icon-medallion { min-inline-size: 4.5rem; min-block-size: 4.5rem; font-size: 2rem; font-weight: 800; line-height: 1; }
1047
+ }
1048
+
1049
+ @layer ui-style-kit.technical_blueprint {
1050
+ /** Reusable sheet frame, reference datum, and calibrated line samples. */
1051
+ .blueprint-sheet { position: relative; border: 3px double var(--blueprint-line-strong); padding: 16px; }
1052
+ .blueprint-datum { position: relative; display: inline-grid; place-items: center; flex: 0 0 52px; inline-size: 52px; block-size: 52px; color: var(--blueprint-primary); border: 1.5px solid currentColor; border-radius: 50%; font: 700 16px/1 var(--blueprint-font-mono); }
1053
+ .blueprint-datum::before { content: ""; position: absolute; inset: 50% -5px auto; border-top: 1px solid currentColor; }
1054
+ .blueprint-datum::after { content: ""; position: absolute; inset: -5px auto -5px 50%; border-left: 1px solid currentColor; }
1055
+ .blueprint-line-swatch { display: inline-block; inline-size: 58px; border-top: var(--blueprint-line-weight, 1px) solid var(--blueprint-primary); }
1056
+ }
1057
+
1058
+ @layer ui-style-kit.technical_blueprint {
1059
+ /** Canonical element-board palette; shared semantic tokens still take precedence. */
1060
+ [data-ui="technical-blueprint"][data-mode="dark"] {
1061
+ --blueprint-fallback-bg-rgb: 6 31 53;
1062
+ --blueprint-fallback-surface-rgb: 8 35 58;
1063
+ --blueprint-fallback-surface-strong-rgb: 11 44 72;
1064
+ --blueprint-fallback-surface-soft-rgb: 12 48 78;
1065
+ --blueprint-fallback-text-rgb: 217 239 255;
1066
+ --blueprint-fallback-text-muted-rgb: 175 209 230;
1067
+ --blueprint-fallback-border-rgb: 120 184 223;
1068
+ --blueprint-fallback-primary-rgb: 75 188 255;
1069
+ --blueprint-fallback-primary-text-rgb: 0 23 37;
1070
+ --blueprint-fallback-danger-rgb: 255 90 84;
1071
+ --blueprint-fallback-success-rgb: 99 215 124;
1072
+ --blueprint-fallback-warning-rgb: 255 208 87;
1073
+ --blueprint-fallback-link-rgb: 75 188 255;
1074
+ --blueprint-fallback-focus-rgb: 121 204 255;
1075
+ --blueprint-fill-fallback-rgb: 8 122 194;
1076
+ --blueprint-input-fallback-rgb: 7 28 48;
1077
+ }
1078
+ [data-ui="technical-blueprint"][data-mode="light"] {
1079
+ --blueprint-fallback-bg-rgb: 237 236 232;
1080
+ --blueprint-fallback-surface-rgb: 247 245 239;
1081
+ --blueprint-fallback-surface-strong-rgb: 248 246 240;
1082
+ --blueprint-fallback-surface-soft-rgb: 229 231 229;
1083
+ --blueprint-fallback-text-rgb: 21 61 95;
1084
+ --blueprint-fallback-text-muted-rgb: 49 93 121;
1085
+ --blueprint-fallback-border-rgb: 20 95 147;
1086
+ --blueprint-fallback-primary-rgb: 7 95 157;
1087
+ --blueprint-fallback-primary-hover-rgb: 6 76 124;
1088
+ --blueprint-fallback-danger-rgb: 201 49 44;
1089
+ --blueprint-fallback-success-rgb: 24 111 64;
1090
+ --blueprint-fallback-warning-rgb: 132 76 0;
1091
+ --blueprint-fallback-warning-text-rgb: 255 255 255;
1092
+ --blueprint-fallback-link-rgb: 7 95 157;
1093
+ --blueprint-fallback-focus-rgb: 0 109 181;
1094
+ --blueprint-fill-fallback-rgb: 10 103 165;
1095
+ --blueprint-input-fallback-rgb: 250 248 242;
1096
+ }
1097
+ [data-ui="technical-blueprint"][data-mode="contrast"] {
1098
+ --blueprint-fill-fallback-rgb: 0 229 255;
1099
+ --blueprint-fill-ink-fallback-rgb: 0 0 0;
1100
+ --blueprint-input-fallback-rgb: 0 16 28;
1101
+ }
1102
+ [data-ui="technical-blueprint"][data-mode] {
1103
+ --blueprint-font-display: "DejaVu Sans Condensed", "Arial Narrow", Arial, sans-serif;
1104
+ --blueprint-font-body: "DejaVu Sans Condensed", Arial, sans-serif;
1105
+ --blueprint-font-control: var(--blueprint-font-display);
1106
+ --blueprint-font-mono: "DejaVu Sans Mono", Consolas, monospace;
1107
+ --blueprint-radius-sm: 0;
1108
+ --blueprint-radius-md: 0;
1109
+ --blueprint-radius-lg: 0;
1110
+ --blueprint-control-height: 44px;
1111
+ --blueprint-grid-size: 16px;
1112
+ --blueprint-line-heavy: 2px;
1113
+ --blueprint-space-5: 24px;
1114
+ --blueprint-space-6: 32px;
1115
+ --blueprint-line-color: rgb(var(--blueprint-border-rgb) / .65);
1116
+ --blueprint-line-strong: var(--blueprint-border);
1117
+ --blueprint-text-soft: var(--blueprint-text-muted);
1118
+ --blueprint-surface-input: rgb(var(--usk-surface-strong-rgb, var(--blueprint-input-fallback-rgb)));
1119
+ --blueprint-fill: rgb(var(--usk-primary-rgb, var(--blueprint-fill-fallback-rgb)));
1120
+ --blueprint-fill-ink: rgb(var(--usk-primary-text-rgb, var(--blueprint-fill-ink-fallback-rgb, 255 255 255)));
1121
+ --blueprint-grid: rgb(var(--blueprint-primary-rgb) / .025);
1122
+ --blueprint-grid-image: linear-gradient(var(--blueprint-grid) 1px, transparent 1px), linear-gradient(90deg, var(--blueprint-grid) 1px, transparent 1px);
1123
+ --blueprint-theme-bg: var(--blueprint-grid-image), var(--blueprint-bg);
1124
+ --blueprint-theme-bg-size: 16px 16px, 16px 16px, auto;
1125
+ --blueprint-control-bg: var(--blueprint-surface-input);
1126
+ --usk-native-control-min-block-size: 44px;
1127
+ --usk-native-font-body: var(--blueprint-font-body);
1128
+ --usk-native-font-heading: var(--blueprint-font-display);
1129
+ --usk-native-font-control: var(--blueprint-font-control);
1130
+ --usk-native-range-thumb-radius: 50%;
1131
+ --usk-native-range-thumb-shadow: none;
1132
+ }
1133
+ [data-ui="technical-blueprint"] :where(a) { color: var(--blueprint-primary); }
1134
+ [data-ui="technical-blueprint"] :where(h1, h2, h3, h4, h5, h6) { letter-spacing: 0; }
1135
+ .blueprint-title { font-size: 32px; line-height: 1.15; letter-spacing: 0; }
1136
+ .blueprint-overline, .blueprint-label { display: block; margin: 0 0 6px; color: var(--blueprint-text-soft); font: 700 12px/1.3 var(--blueprint-font-mono); letter-spacing: 0; text-transform: uppercase; }
1137
+ .blueprint-section-title { display: flex; align-items: center; gap: 8px; margin: 0 0 16px; color: var(--blueprint-text); font: 800 14px/1.3 var(--blueprint-font-display); letter-spacing: 0; text-transform: uppercase; }
1138
+ .blueprint-section-title::before { content: ""; flex: 0 0 12px; inline-size: 12px; block-size: 12px; border: 1px solid var(--blueprint-primary); border-radius: 50%; background: linear-gradient(var(--blueprint-primary), var(--blueprint-primary)) center / 100% 1px no-repeat, linear-gradient(90deg, var(--blueprint-primary), var(--blueprint-primary)) center / 1px 100% no-repeat; }
1139
+ .blueprint-section-title::after { content: ""; flex: 0 0 45px; block-size: 1px; margin-inline-start: auto; background: repeating-linear-gradient(90deg, var(--blueprint-line-strong) 0 9px, transparent 9px 14px); }
1140
+ .blueprint-card, .blueprint-panel, .blueprint-toolbar { position: relative; background: rgb(var(--blueprint-surface-rgb)); background-image: none; border: 1px solid var(--blueprint-line-color); border-radius: 0; box-shadow: none; clip-path: none; }
1141
+ .blueprint-card::before, .blueprint-panel::before { content: none; }
1142
+ .blueprint-panel::before { content: ""; position: absolute; inset: auto -1px -1px auto; inline-size: 12px; block-size: 12px; border: 0; border-right: 2px solid var(--blueprint-primary); border-bottom: 2px solid var(--blueprint-primary); background: none; pointer-events: none; }
1143
+ .blueprint-panel::after { content: ""; position: absolute; inset: -1px auto auto -1px; inline-size: 12px; block-size: 12px; border-top: 2px solid var(--blueprint-primary); border-left: 2px solid var(--blueprint-primary); pointer-events: none; }
1144
+ .blueprint-divider { border: 0; border-top: 1px solid var(--blueprint-line-color); margin-block: 16px; }
1145
+ .blueprint-button, .blueprint-icon-button, .blueprint-segment, .blueprint-pagination-page, .blueprint-tab {
1146
+ display: inline-flex; align-items: center; justify-content: center; gap: 8px;
1147
+ min-height: var(--blueprint-control-height); min-block-size: var(--blueprint-control-height);
1148
+ padding: 8px 12px; background: transparent; color: var(--blueprint-text);
1149
+ border: 1px solid var(--blueprint-line-strong); border-radius: 0; box-shadow: none;
1150
+ font: 700 14px/1.2 var(--blueprint-font-control); letter-spacing: 0; text-shadow: none;
1151
+ text-transform: uppercase; text-decoration: none; cursor: pointer; clip-path: none;
1152
+ transition: background 150ms ease, border-color 150ms ease, transform 80ms ease;
1153
+ }
1154
+ .blueprint-icon-button { inline-size: 36px; padding: 8px; aspect-ratio: 1; }
1155
+ .blueprint-button-primary { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
1156
+ .blueprint-button-secondary { background: transparent; color: var(--blueprint-secondary); border-color: var(--blueprint-secondary); }
1157
+ .blueprint-button-ghost { border-style: dashed; color: var(--blueprint-text-soft); }
1158
+ .blueprint-button-danger { background: transparent; border-color: var(--blueprint-danger); color: var(--blueprint-danger); }
1159
+ .blueprint-button:hover, .blueprint-icon-button:hover, .blueprint-button.is-hover, .blueprint-segment:hover, .blueprint-pagination-page:hover { transform: none; border-color: var(--blueprint-focus); box-shadow: 0 0 0 1px var(--blueprint-focus); }
1160
+ .blueprint-button-danger:hover, .blueprint-button-danger.is-hover { border-color: var(--blueprint-danger); color: var(--blueprint-danger); box-shadow: 0 0 0 1px var(--blueprint-danger); }
1161
+ .blueprint-button:active, .blueprint-icon-button:active, .blueprint-button.is-pressed, .blueprint-button[aria-pressed="true"] { background-image: repeating-linear-gradient(135deg, transparent 0 5px, rgb(var(--blueprint-primary-rgb) / .18) 5px 6px); transform: translateY(1px); box-shadow: inset 0 -2px 0 var(--blueprint-primary); }
1162
+ .blueprint-button:disabled, .blueprint-icon-button:disabled, .blueprint-button.is-disabled { opacity: .48; cursor: not-allowed; filter: saturate(.5); }
1163
+ .blueprint-field { display: block; min-inline-size: 0; }
1164
+ .blueprint-input, .blueprint-select, .blueprint-textarea { inline-size: 100%; min-height: var(--blueprint-control-height); min-block-size: var(--blueprint-control-height); padding: 8px 11px; background: var(--blueprint-surface-input); background-image: none; color: var(--blueprint-text); border: 1px solid var(--blueprint-line-strong); border-radius: 0; box-shadow: none; font: 14px/1.3 var(--blueprint-font-body); }
1165
+ .blueprint-select { appearance: none; padding-inline-end: 32px; background-image: var(--usk-native-select-indicator-image); background-size: var(--usk-native-select-indicator-size); background-position: var(--usk-native-select-indicator-position); background-repeat: no-repeat; }
1166
+ .blueprint-textarea { min-block-size: 64px; resize: vertical; }
1167
+ .blueprint-input::placeholder, .blueprint-textarea::placeholder { color: var(--blueprint-text-soft); opacity: 1; }
1168
+ .blueprint-input-wrap { display: flex; align-items: center; position: relative; }
1169
+ .blueprint-input-wrap .blueprint-input { padding-inline-end: 36px; }
1170
+ .blueprint-input-icon { position: absolute; inset-inline-end: 11px; color: var(--blueprint-primary); pointer-events: none; }
1171
+ .blueprint-helper, .blueprint-error-text { display: block; margin-block-start: 4px; color: var(--blueprint-text-soft); font: 12px/1.4 var(--blueprint-font-mono); }
1172
+ .blueprint-error-text { border-inline-start: 2px solid var(--blueprint-danger); padding-inline-start: 6px; }
1173
+ .blueprint-input.is-error, .blueprint-input[aria-invalid="true"], .blueprint-select[aria-invalid="true"], .blueprint-textarea[aria-invalid="true"] { border-color: var(--blueprint-danger); box-shadow: 0 0 0 1px var(--blueprint-danger); }
1174
+ .blueprint-input.is-hover { border-color: var(--blueprint-primary); }
1175
+ .blueprint-input.is-focus { outline: 2px solid var(--blueprint-focus); outline-offset: 1px; }
1176
+ .blueprint-dropdown, .blueprint-popover, .blueprint-modal { padding: 12px; color: var(--blueprint-text); background: var(--blueprint-grid-image), var(--blueprint-surface-strong); background-size: 16px 16px; border: 1px solid var(--blueprint-line-strong); border-radius: 0; box-shadow: none; font: 14px/1.4 var(--blueprint-font-body); }
1177
+ .blueprint-dropdown { padding: 6px; border-color: var(--blueprint-primary); }
1178
+ .blueprint-option { display: flex; align-items: center; justify-content: space-between; inline-size: 100%; min-block-size: 32px; padding: 6px 8px; background: transparent; border: 1px solid transparent; border-radius: 0; color: var(--blueprint-text-soft); font: 14px/1.3 var(--blueprint-font-body); text-align: start; cursor: pointer; }
1179
+ .blueprint-option:hover, .blueprint-option.is-selected, .blueprint-option[aria-selected="true"] { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
1180
+ .blueprint-option:disabled { opacity: .5; cursor: not-allowed; }
1181
+ .blueprint-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-block-size: 48px; padding: 8px; background: var(--blueprint-surface-input); border: 1px solid var(--blueprint-line-color); }
1182
+ .blueprint-chip, .blueprint-badge { display: inline-flex; align-items: center; gap: 6px; min-block-size: 24px; padding: 4px 10px; border: 1px solid var(--blueprint-line-strong); border-radius: 0; background: transparent; color: var(--blueprint-text); box-shadow: none; font: 700 12px/1.2 var(--blueprint-font-body); letter-spacing: 0; text-transform: uppercase; }
1183
+ .blueprint-chip, .blueprint-badge-primary { color: var(--blueprint-primary); border-color: var(--blueprint-primary); }
1184
+ .blueprint-chip-danger, .blueprint-badge-danger { background: rgb(var(--blueprint-danger-rgb) / .04); color: var(--blueprint-danger); border-color: var(--blueprint-danger); }
1185
+ .blueprint-chip-warning, .blueprint-badge-warning { background: rgb(var(--blueprint-warning-rgb) / .08); color: var(--blueprint-warning); border-color: var(--blueprint-warning); }
1186
+ .blueprint-badge-success { background: rgb(var(--blueprint-success-rgb) / .08); color: var(--blueprint-success); border-color: var(--blueprint-success); }
1187
+ .blueprint-chip { cursor: pointer; }
1188
+ .blueprint-file { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; position: relative; min-block-size: 112px; padding: 16px; border: 1px dashed var(--blueprint-line-strong); background: var(--blueprint-grid-image), var(--blueprint-surface-input); background-size: 16px 16px; color: var(--blueprint-text-soft); text-align: center; font: 14px/1.4 var(--blueprint-font-body); cursor: pointer; }
1189
+ .blueprint-file strong { color: var(--blueprint-primary); }
1190
+ .blueprint-file input[type="file"] { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; cursor: pointer; }
1191
+ .blueprint-file:focus-within { outline: 2px solid var(--blueprint-focus); outline-offset: 2px; }
1192
+ .blueprint-choice, .blueprint-switch { display: inline-flex; align-items: center; gap: 8px; position: relative; min-block-size: 32px; color: var(--blueprint-text-soft); font: 14px/1.3 var(--blueprint-font-body); cursor: pointer; }
1193
+ .blueprint-choice input { appearance: none; display: grid; place-content: center; inline-size: 18px; block-size: 18px; flex: 0 0 18px; margin: 0; background: transparent; border: 1px solid var(--blueprint-line-strong); border-radius: 0; box-shadow: none; }
1194
+ .blueprint-choice input::before { content: ""; inline-size: 10px; block-size: 10px; background: var(--blueprint-primary); transform: scale(0); }
1195
+ .blueprint-choice input:checked::before { transform: scale(1); }
1196
+ .blueprint-choice input[type="checkbox"]::before { clip-path: polygon(0 45%, 20% 30%, 40% 55%, 85% 0, 100% 15%, 40% 100%); }
1197
+ .blueprint-choice input[type="radio"], .blueprint-choice input[type="radio"]::before { border-radius: 50%; }
1198
+ .blueprint-choice:has(:disabled), .blueprint-switch:has(:disabled) { cursor: not-allowed; }
1199
+ .blueprint-choice input:disabled { opacity: .6; border-style: dashed; }
1200
+ .blueprint-switch input { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; opacity: 0; z-index: 1; cursor: inherit; }
1201
+ .blueprint-switch-track { display: inline-flex; align-items: center; inline-size: 42px; block-size: 22px; padding: 3px; border: 1px solid var(--blueprint-line-strong); border-radius: 0; background: transparent; box-shadow: none; }
1202
+ .blueprint-switch-thumb { position: static; inline-size: 14px; block-size: 14px; flex: 0 0 14px; border: 1px solid var(--blueprint-line-strong); border-radius: 0; background: transparent; box-shadow: none; transition: transform 150ms ease; }
1203
+ .blueprint-switch input:checked + .blueprint-switch-track { border-color: var(--blueprint-primary); background: transparent; }
1204
+ .blueprint-switch input:checked + .blueprint-switch-track .blueprint-switch-thumb { transform: translateX(20px); background: var(--blueprint-fill); }
1205
+ .blueprint-switch input:disabled + .blueprint-switch-track { opacity: .6; border-style: dashed; }
1206
+ .blueprint-switch input:focus-visible + .blueprint-switch-track { outline: 2px solid var(--blueprint-focus); outline-offset: 2px; }
1207
+ .blueprint-segmented { display: inline-flex; flex-wrap: wrap; gap: 4px; }
1208
+ .blueprint-segment { font-size: 12px; }
1209
+ .blueprint-segment.is-active, .blueprint-segment[aria-pressed="true"], .blueprint-pagination-page[aria-current="page"], .blueprint-tab.is-active, .blueprint-tab[aria-selected="true"] { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
1210
+ /** Ranges preserve a measured point and ticks in both browser rendering engines. */
1211
+ .blueprint-range { --blueprint-range-fill: linear-gradient(90deg, var(--blueprint-primary) 0 var(--blueprint-value, 58%), var(--blueprint-line-color) var(--blueprint-value, 58%) 100%); inline-size: 100%; min-block-size: 32px; padding: 0; margin: 0; appearance: none; background: repeating-linear-gradient(90deg, transparent 0 20px, var(--blueprint-line-color) 20px 21px) center / 100% 12px no-repeat; border: 0; }
1212
+ .blueprint-range-critical { --blueprint-range-fill: linear-gradient(90deg, var(--blueprint-success) 0 45%, var(--blueprint-warning) 45% 72%, var(--blueprint-danger) 72% 100%); }
1213
+ .blueprint-range::-webkit-slider-runnable-track { height: 3px; background: var(--blueprint-range-fill); border: 0; box-shadow: none; }
1214
+ .blueprint-range::-moz-range-track { height: 3px; background: var(--blueprint-range-fill); border: 0; box-shadow: none; }
1215
+ .blueprint-range::-moz-range-progress { background: transparent; }
1216
+ .blueprint-range::-webkit-slider-thumb { appearance: none; inline-size: 18px; block-size: 18px; margin-top: -7px; border: 2px solid var(--blueprint-primary); border-radius: 50%; background: radial-gradient(var(--blueprint-primary) 0 2px, var(--blueprint-bg) 2px); box-shadow: none; }
1217
+ .blueprint-range::-moz-range-thumb { inline-size: 18px; block-size: 18px; border: 2px solid var(--blueprint-primary); border-radius: 50%; background: radial-gradient(var(--blueprint-primary) 0 2px, var(--blueprint-bg) 2px); box-shadow: none; }
1218
+ .blueprint-progress { position: relative; block-size: 12px; height: 12px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--blueprint-line-color); border-radius: 0; overflow: visible; }
1219
+ .blueprint-progress-bar { display: block; position: absolute; inset-block-end: 0; block-size: 3px; inline-size: var(--blueprint-progress-value, 64%); background: var(--blueprint-primary); color: var(--blueprint-primary); border-radius: 0; box-shadow: none; }
1220
+ .blueprint-progress-bar::after { content: ""; position: absolute; inset: auto -4px 3px auto; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid currentColor; }
1221
+ .blueprint-progress-danger .blueprint-progress-bar { background: var(--blueprint-danger); color: var(--blueprint-danger); }
1222
+ .blueprint-meter { position: relative; block-size: 3px; margin-block: 16px; background: linear-gradient(90deg, var(--blueprint-success) 0 46%, var(--blueprint-warning) 46% 72%, var(--blueprint-danger) 72% 100%); }
1223
+ .blueprint-meter::after { content: ""; position: absolute; inset-inline-start: clamp(0%, var(--blueprint-value, 72%), 100%); inset-block-start: 50%; inline-size: 3px; block-size: 20px; background: var(--blueprint-text); transform: translate(-50%, -50%); }
1224
+ .blueprint-stepper { display: flex; align-items: start; justify-content: space-between; position: relative; list-style: none; margin: 16px 0 0; padding: 0; }
1225
+ .blueprint-stepper::before { content: ""; position: absolute; inset-inline: 12%; inset-block-start: 12px; block-size: 1px; background: var(--blueprint-line-strong); }
1226
+ /** Reset native list spacing so marker centers remain on the connector axis. */
1227
+ .blueprint-step { position: relative; flex: 1; margin-block: 0; color: var(--blueprint-text-soft); text-align: center; font: 12px/1.4 var(--blueprint-font-mono); }
1228
+ .blueprint-step b { display: flex; align-items: center; justify-content: center; inline-size: 24px; block-size: 24px; margin: 0 auto 8px; background: var(--blueprint-bg); border: 1px solid var(--blueprint-line-strong); }
1229
+ .blueprint-step.is-complete b { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); border-color: var(--blueprint-primary); }
1230
+ .blueprint-step.is-active b { color: var(--blueprint-primary); border: 2px solid var(--blueprint-primary); }
1231
+ .blueprint-alert { display: flex; align-items: center; gap: 8px; min-block-size: 40px; padding: 8px; border: 1px solid var(--blueprint-primary); border-radius: 0; background: transparent; color: var(--blueprint-text-soft); box-shadow: none; font: 14px/1.4 var(--blueprint-font-body); }
1232
+ .blueprint-alert-success { border-color: var(--blueprint-success); }
1233
+ .blueprint-alert-warning { border-color: var(--blueprint-warning); }
1234
+ .blueprint-alert-danger { border-color: var(--blueprint-danger); }
1235
+ .blueprint-alert > :first-child { color: var(--blueprint-primary); }
1236
+ .blueprint-alert-success > :first-child, .blueprint-toast > :first-child { color: var(--blueprint-success); }
1237
+ .blueprint-alert-warning > :first-child { color: var(--blueprint-warning); }
1238
+ .blueprint-alert-danger > :first-child { color: var(--blueprint-danger); }
1239
+ .blueprint-toast { display: flex; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--blueprint-line-color); background: repeating-linear-gradient(135deg, transparent 0 10px, var(--blueprint-grid) 10px 11px), var(--blueprint-surface-strong); color: var(--blueprint-text); }
1240
+ .blueprint-toast strong { display: block; font: 700 14px/1.4 var(--blueprint-font-mono); }
1241
+ .blueprint-toast p { margin: 4px 0 0; color: var(--blueprint-text-soft); font: 14px/1.4 var(--blueprint-font-body); }
1242
+ .blueprint-skeleton { display: block; block-size: 2px; inline-size: 100%; background: repeating-linear-gradient(90deg, var(--blueprint-line-strong) 0 8px, transparent 8px 12px); }
1243
+ .blueprint-breadcrumb, .blueprint-tabs, .blueprint-pagination { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
1244
+ .blueprint-breadcrumb { color: var(--blueprint-text-soft); font: 12px/1.4 var(--blueprint-font-mono); }
1245
+ .blueprint-breadcrumb a { color: var(--blueprint-text-soft); }
1246
+ .blueprint-breadcrumb [aria-current] { color: var(--blueprint-primary); font-weight: 700; }
1247
+ .blueprint-tab { font: 700 12px/1.4 var(--blueprint-font-mono); }
1248
+ .blueprint-pagination-page { min-inline-size: 36px; padding: 8px; font-size: 12px; }
1249
+ .blueprint-nav { padding: 0; background: transparent; border: 0; box-shadow: none; gap: 6px; }
1250
+ .blueprint-nav-link { min-block-size: 36px; padding: 8px 12px; background: transparent; border: 1px solid var(--blueprint-line-strong); border-radius: 0; color: var(--blueprint-text-soft); text-shadow: none; letter-spacing: 0; }
1251
+ .blueprint-nav-link.is-active, .blueprint-nav-link[aria-current="page"] { background: var(--blueprint-fill); color: var(--blueprint-fill-ink); box-shadow: none; }
1252
+ .blueprint-avatar { display: inline-flex; align-items: center; justify-content: center; inline-size: 34px; block-size: 34px; flex: 0 0 34px; background: var(--blueprint-fill); border: 2px solid var(--blueprint-primary); border-radius: 50%; color: var(--blueprint-fill-ink); font: 700 12px/1 var(--blueprint-font-mono); }
1253
+ .blueprint-avatar-danger { background: var(--blueprint-bg); border-color: var(--blueprint-danger); color: var(--blueprint-danger); }
1254
+ .blueprint-avatar-neutral { background: var(--blueprint-bg); color: var(--blueprint-text-soft); }
1255
+ .blueprint-avatar-group { display: flex; }
1256
+ .blueprint-avatar-group .blueprint-avatar + .blueprint-avatar { margin-inline-start: -6px; }
1257
+ .blueprint-table { border-collapse: collapse; font: 14px/1.4 var(--blueprint-font-body); }
1258
+ .blueprint-table th, .blueprint-table td { border: 0; border-bottom: 1px solid var(--blueprint-line-color); background: transparent; color: var(--blueprint-text-soft); padding: 8px; }
1259
+ .blueprint-table th { font-family: var(--blueprint-font-mono); }
1260
+ .blueprint-list { margin: 0; padding-inline-start: 20px; color: var(--blueprint-text-soft); font: 14px/1.5 var(--blueprint-font-body); }
1261
+ .blueprint-list li + li { margin-top: 8px; }
1262
+ .blueprint-list li::marker { color: var(--blueprint-primary); }
1263
+ .blueprint-tooltip, [data-ui="technical-blueprint"] :where(.ui-tooltip, [role="tooltip"], [data-tooltip]) { position: relative; padding: 12px; max-inline-size: 100%; background: var(--blueprint-surface-strong); color: var(--blueprint-text); border: 1px solid var(--blueprint-primary); border-radius: 0; box-shadow: none; font: 700 12px/1.4 var(--blueprint-font-mono); letter-spacing: 0; }
1264
+ .blueprint-tooltip::after { content: ""; position: absolute; inset: 100% auto auto 50%; block-size: 16px; border-left: 1px solid var(--blueprint-primary); transform: rotate(45deg); transform-origin: top; }
1265
+ .blueprint-modal { max-inline-size: min(440px, calc(100vw - 32px)); }
1266
+ .blueprint-modal::backdrop { background: rgb(var(--blueprint-bg-rgb) / .7); }
1267
+ .blueprint-modal h3, .blueprint-popover strong { margin: 0 0 8px; color: var(--blueprint-text); font: 700 14px/1.4 var(--blueprint-font-mono); }
1268
+ .blueprint-modal p, .blueprint-popover p { margin: 0 0 12px; color: var(--blueprint-text-soft); }
1269
+ .blueprint-modal-actions { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
1270
+ .blueprint-accordion { margin: 0; padding: 0; background: var(--blueprint-surface-input); border: 1px solid var(--blueprint-line-color); color: var(--blueprint-text); }
1271
+ .blueprint-accordion summary { min-block-size: 36px; padding: 10px 12px; font: 700 12px/1.4 var(--blueprint-font-mono); cursor: pointer; list-style: none; }
1272
+ .blueprint-accordion summary::-webkit-details-marker { display: none; }
1273
+ .blueprint-accordion summary::after { content: "+"; float: right; color: var(--blueprint-primary); }
1274
+ .blueprint-accordion[open] summary::after { content: "-"; }
1275
+ .blueprint-accordion p { margin: 0; padding: 4px 12px 12px; color: var(--blueprint-text-soft); font: 14px/1.4 var(--blueprint-font-body); }
1276
+ .blueprint-code { display: block; margin: 0; padding: 12px; border-inline-start: 2px solid var(--blueprint-primary); background: var(--blueprint-surface-input); color: var(--blueprint-text-soft); white-space: pre-wrap; overflow-wrap: break-word; font: 12px/1.5 var(--blueprint-font-mono); }
1277
+ .blueprint-quote { margin: 0; padding: 8px 12px; border-inline-start: 2px solid var(--blueprint-primary); color: var(--blueprint-text-soft); font: italic 14px/1.5 var(--blueprint-font-body); }
1278
+ .blueprint-token-swatch { display: inline-flex; flex-direction: column; gap: 6px; min-inline-size: 46px; color: var(--blueprint-text-soft); font: 12px/1.3 var(--blueprint-font-mono); }
1279
+ .blueprint-token-swatch i { display: block; inline-size: 46px; block-size: 28px; border: 1px solid var(--blueprint-line-strong); background: var(--blueprint-token-swatch-color, var(--blueprint-primary)); }
1280
+ /** All loading APIs use an unsqueezed circular drafting indicator. */
1281
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
1282
+ .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after,
1283
+ [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after { box-sizing: border-box; border: 2px solid var(--blueprint-line-color); border-top-color: currentColor; border-radius: 50%; background: none; box-shadow: none; clip-path: none; padding: 0; flex-shrink: 0; animation: blueprint-spin .85s linear infinite; }
1284
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]) { color: var(--blueprint-primary); }
1285
+ .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after,
1286
+ [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after { content: ""; display: inline-block; inline-size: 16px; block-size: 16px; flex: 0 0 16px; }
1287
+ .blueprint-spinner::before, .blueprint-spinner::after { content: none; }
1288
+ [data-ui="technical-blueprint"] :focus-visible { outline: 2px solid var(--blueprint-focus); outline-offset: 3px; }
1289
+ @media (any-pointer: coarse) {
1290
+ .blueprint-button, .blueprint-icon-button, .blueprint-segment, .blueprint-pagination-page, .blueprint-option, .blueprint-tab, .blueprint-choice, .blueprint-switch, .blueprint-range, .blueprint-chip { min-block-size: 44px; }
1291
+ .blueprint-icon-button, .blueprint-pagination-page { min-inline-size: 44px; }
1292
+ .blueprint-accordion summary { min-block-size: 44px; }
1293
+ }
1294
+ @media (prefers-reduced-motion: reduce) {
1295
+ .blueprint-spinner, .blueprint-loading-spinner, [data-ui="technical-blueprint"] :where(.ui-spinner, .loading-spinner, [data-loading-spinner]),
1296
+ .blueprint-button[aria-busy="true"]::after, .blueprint-icon-button[aria-busy="true"]::after,
1297
+ [data-ui="technical-blueprint"] :where(button[aria-busy="true"], input[type="button"][aria-busy="true"], input[type="submit"][aria-busy="true"], input[type="reset"][aria-busy="true"])::after { animation: none; }
1298
+ }
1299
+ @media (forced-colors: active) {
1300
+ .blueprint-choice input { appearance: auto; }
1301
+ .blueprint-choice input::before { content: none; }
1302
+ .blueprint-switch input { position: static; opacity: 1; inline-size: 20px; block-size: 20px; }
1303
+ .blueprint-switch-track { display: none; }
1304
+ .blueprint-range { appearance: auto; }
1305
+ .blueprint-step.is-complete b, .blueprint-progress-bar { background: Highlight; color: HighlightText; }
1306
+ }
1307
+ /** Warning actions inherit preset geometry and use the paired semantic warning colors. */
1308
+ [data-ui="technical-blueprint"][data-mode] .blueprint-button.blueprint-button-warning {
1309
+ background: var(--blueprint-warning);
1310
+ color: var(--blueprint-on-warning);
1311
+ border-color: var(--blueprint-warning);
1312
+ text-shadow: none;
1313
+ }
1314
+
1315
+ }
1316
+
1317
+ /**
1318
+ * Preserves shared annotation fixture spacing and icon weight after reference
1319
+ * overrides append their compact source rules.
1320
+ */
1321
+ [data-ui="technical-blueprint"][data-mode] .blueprint-title {
1322
+ margin-block: max(.75rem, 12px);
1323
+ letter-spacing: max(.045em, .5px);
1324
+ }
1325
+
1326
+ [data-ui="technical-blueprint"][data-mode] .blueprint-feature-item > .blueprint-icon-medallion {
1327
+ font-size: 1.5rem;
1328
+ line-height: 1;
1329
+ }
1330
+
1331
+ [data-ui="technical-blueprint"][data-mode] .blueprint-callout-bar > .blueprint-icon-medallion {
1332
+ min-inline-size: 4.5rem;
1333
+ min-block-size: 4.5rem;
1334
+ font-size: 2rem;
1335
+ font-weight: 800;
1336
+ line-height: 1;
1337
+ }