relmio 0.2.5 → 0.2.6
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.
- package/CHANGELOG.md +22 -1
- package/README.md +55 -12
- package/docs/images/setup/01-local-sign-in-ready.png +0 -0
- package/docs/images/setup/02-vps-identity-confirmed.png +0 -0
- package/docs/images/setup/03-n8n-detected.png +0 -0
- package/docs/images/setup/04-install-plan.png +0 -0
- package/docs/images/setup/05-bridge-ready.png +0 -0
- package/docs/maintenance.md +13 -1
- package/docs/security.md +8 -2
- package/docs/troubleshooting.md +31 -7
- package/docs/video-outline.md +13 -4
- package/package.json +1 -1
- package/src/ui/app.js +21 -6
- package/src/ui/geist-latin.woff2 +0 -0
- package/src/ui/index.html +452 -386
- package/src/ui/styles.css +691 -434
- package/src/web/server.js +5 -1
package/src/ui/styles.css
CHANGED
|
@@ -1,30 +1,69 @@
|
|
|
1
|
+
@font-face {
|
|
2
|
+
font-family: "Relmio Geist";
|
|
3
|
+
font-style: normal;
|
|
4
|
+
font-weight: 100 900;
|
|
5
|
+
font-display: swap;
|
|
6
|
+
src: url("/geist-latin.woff2") format("woff2");
|
|
7
|
+
}
|
|
8
|
+
|
|
1
9
|
:root {
|
|
2
|
-
color-scheme: light;
|
|
3
|
-
--
|
|
4
|
-
--surface: #
|
|
5
|
-
--surface-
|
|
6
|
-
--
|
|
7
|
-
--
|
|
8
|
-
--
|
|
9
|
-
--
|
|
10
|
-
--
|
|
11
|
-
--
|
|
12
|
-
--
|
|
13
|
-
--
|
|
14
|
-
--warning: #
|
|
15
|
-
--warning-soft: #
|
|
16
|
-
--warning-
|
|
17
|
-
--danger: #
|
|
18
|
-
--danger-soft: #
|
|
19
|
-
--
|
|
20
|
-
--
|
|
21
|
-
--
|
|
22
|
-
--
|
|
23
|
-
|
|
24
|
-
0
|
|
25
|
-
|
|
26
|
-
--
|
|
27
|
-
--radius-
|
|
10
|
+
color-scheme: light dark;
|
|
11
|
+
--canvas: #f4f2ed;
|
|
12
|
+
--surface: #fffdf8;
|
|
13
|
+
--surface-raised: #fbfaf6;
|
|
14
|
+
--surface-muted: #e7f3f0;
|
|
15
|
+
--ink: #12211f;
|
|
16
|
+
--ink-soft: #52645f;
|
|
17
|
+
--line: #d2dcd7;
|
|
18
|
+
--line-strong: #a7b8b1;
|
|
19
|
+
--signal: #137c74;
|
|
20
|
+
--signal-deep: #0b625b;
|
|
21
|
+
--signal-on: #ffffff;
|
|
22
|
+
--warning: #74460c;
|
|
23
|
+
--warning-soft: #fff1d6;
|
|
24
|
+
--warning-line: #d3ad6c;
|
|
25
|
+
--danger: #982e2e;
|
|
26
|
+
--danger-soft: #faeaea;
|
|
27
|
+
--danger-line: #dca9a9;
|
|
28
|
+
--success: #146943;
|
|
29
|
+
--success-soft: #e5f3eb;
|
|
30
|
+
--focus: #9b5700;
|
|
31
|
+
--shadow:
|
|
32
|
+
0 0.125rem 0.25rem rgb(18 33 31 / 5%),
|
|
33
|
+
0 1rem 2.5rem -1.5rem rgb(18 33 31 / 24%);
|
|
34
|
+
--ease: cubic-bezier(0.24, 1, 0.4, 1);
|
|
35
|
+
--radius-sm: 0.375rem;
|
|
36
|
+
--radius: 0.625rem;
|
|
37
|
+
--radius-lg: 0.75rem;
|
|
38
|
+
--page: 76rem;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
@media (prefers-color-scheme: dark) {
|
|
42
|
+
:root {
|
|
43
|
+
--canvas: #0d1513;
|
|
44
|
+
--surface: #15201d;
|
|
45
|
+
--surface-raised: #192723;
|
|
46
|
+
--surface-muted: #1c312d;
|
|
47
|
+
--ink: #eff6f2;
|
|
48
|
+
--ink-soft: #a9bbb5;
|
|
49
|
+
--line: #30423c;
|
|
50
|
+
--line-strong: #526a63;
|
|
51
|
+
--signal: #62cfc4;
|
|
52
|
+
--signal-deep: #8ee2da;
|
|
53
|
+
--signal-on: #0d1513;
|
|
54
|
+
--warning: #efc170;
|
|
55
|
+
--warning-soft: #332817;
|
|
56
|
+
--warning-line: #7c6338;
|
|
57
|
+
--danger: #ffaaaa;
|
|
58
|
+
--danger-soft: #382020;
|
|
59
|
+
--danger-line: #794848;
|
|
60
|
+
--success: #79d6aa;
|
|
61
|
+
--success-soft: #173226;
|
|
62
|
+
--focus: #ffc36a;
|
|
63
|
+
--shadow:
|
|
64
|
+
0 0.125rem 0.25rem rgb(0 0 0 / 18%),
|
|
65
|
+
0 1rem 2.75rem -1.25rem rgb(0 0 0 / 56%);
|
|
66
|
+
}
|
|
28
67
|
}
|
|
29
68
|
|
|
30
69
|
* {
|
|
@@ -32,23 +71,25 @@
|
|
|
32
71
|
}
|
|
33
72
|
|
|
34
73
|
html {
|
|
74
|
+
min-width: 0;
|
|
75
|
+
background: var(--canvas);
|
|
76
|
+
color: var(--ink);
|
|
35
77
|
font-family:
|
|
36
|
-
Inter, ui-sans-serif, system-ui, -apple-system,
|
|
37
|
-
sans-serif;
|
|
38
|
-
color: var(--text);
|
|
39
|
-
background: var(--background);
|
|
78
|
+
"Relmio Geist", Inter, ui-sans-serif, system-ui, -apple-system,
|
|
79
|
+
BlinkMacSystemFont, "Segoe UI", sans-serif;
|
|
40
80
|
scroll-behavior: smooth;
|
|
41
81
|
}
|
|
42
82
|
|
|
43
83
|
body {
|
|
44
|
-
min-width:
|
|
84
|
+
min-width: 0;
|
|
45
85
|
margin: 0;
|
|
46
86
|
line-height: 1.5;
|
|
47
87
|
-webkit-font-smoothing: antialiased;
|
|
88
|
+
text-rendering: optimizeLegibility;
|
|
48
89
|
}
|
|
49
90
|
|
|
50
91
|
::selection {
|
|
51
|
-
background:
|
|
92
|
+
background: color-mix(in srgb, var(--signal) 24%, transparent);
|
|
52
93
|
}
|
|
53
94
|
|
|
54
95
|
button,
|
|
@@ -62,12 +103,20 @@ select {
|
|
|
62
103
|
min-height: 2.75rem;
|
|
63
104
|
}
|
|
64
105
|
|
|
106
|
+
button,
|
|
107
|
+
a,
|
|
108
|
+
input,
|
|
109
|
+
select {
|
|
110
|
+
-webkit-tap-highlight-color: transparent;
|
|
111
|
+
}
|
|
112
|
+
|
|
65
113
|
button:focus-visible,
|
|
66
114
|
input:focus-visible,
|
|
67
115
|
select:focus-visible,
|
|
68
|
-
a:focus-visible
|
|
69
|
-
|
|
70
|
-
outline
|
|
116
|
+
a:focus-visible,
|
|
117
|
+
[tabindex="-1"]:focus-visible {
|
|
118
|
+
outline: 0.1875rem solid var(--focus);
|
|
119
|
+
outline-offset: 0.1875rem;
|
|
71
120
|
}
|
|
72
121
|
|
|
73
122
|
[hidden] {
|
|
@@ -76,387 +125,448 @@ a:focus-visible {
|
|
|
76
125
|
|
|
77
126
|
.skip-link {
|
|
78
127
|
position: fixed;
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
128
|
+
z-index: 100;
|
|
129
|
+
inset-block-start: 0.75rem;
|
|
130
|
+
inset-inline-start: 0.75rem;
|
|
82
131
|
padding: 0.75rem 1rem;
|
|
83
|
-
border-radius:
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
132
|
+
border-radius: var(--radius);
|
|
133
|
+
background: var(--ink);
|
|
134
|
+
color: var(--surface);
|
|
135
|
+
font-weight: 700;
|
|
136
|
+
text-decoration: none;
|
|
137
|
+
transform: translateY(-180%);
|
|
138
|
+
transition: transform 160ms var(--ease);
|
|
88
139
|
}
|
|
89
140
|
|
|
90
141
|
.skip-link:focus {
|
|
91
142
|
transform: translateY(0);
|
|
92
143
|
}
|
|
93
144
|
|
|
94
|
-
/*
|
|
145
|
+
/* Header */
|
|
95
146
|
|
|
96
147
|
.site-header {
|
|
97
148
|
position: sticky;
|
|
98
|
-
|
|
99
|
-
|
|
149
|
+
z-index: 40;
|
|
150
|
+
inset-block-start: 0;
|
|
151
|
+
min-height: 4.25rem;
|
|
152
|
+
padding-inline: clamp(1rem, 4vw, 2.5rem);
|
|
153
|
+
border-block-end: 1px solid var(--line);
|
|
100
154
|
display: flex;
|
|
101
155
|
align-items: center;
|
|
102
156
|
justify-content: space-between;
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
border-bottom: 1px solid rgb(221 227 223 / 75%);
|
|
106
|
-
background: rgb(244 242 236 / 82%);
|
|
107
|
-
backdrop-filter: blur(14px) saturate(1.4);
|
|
108
|
-
-webkit-backdrop-filter: blur(14px) saturate(1.4);
|
|
157
|
+
gap: 1rem;
|
|
158
|
+
background: var(--canvas);
|
|
109
159
|
}
|
|
110
160
|
|
|
111
161
|
.brand {
|
|
112
|
-
display: flex;
|
|
162
|
+
display: inline-flex;
|
|
113
163
|
align-items: center;
|
|
114
164
|
gap: 0.625rem;
|
|
115
|
-
|
|
165
|
+
color: var(--ink);
|
|
166
|
+
font-size: 1.125rem;
|
|
116
167
|
font-weight: 750;
|
|
117
|
-
letter-spacing: -0.
|
|
168
|
+
letter-spacing: -0.025em;
|
|
169
|
+
text-decoration: none;
|
|
118
170
|
}
|
|
119
171
|
|
|
120
172
|
.brand-mark {
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
173
|
+
width: 2.125rem;
|
|
174
|
+
height: 2.125rem;
|
|
175
|
+
padding: 0.1875rem;
|
|
176
|
+
border-radius: var(--radius-sm);
|
|
177
|
+
background: var(--surface);
|
|
178
|
+
}
|
|
179
|
+
|
|
180
|
+
.brand-signal {
|
|
181
|
+
fill: var(--signal);
|
|
182
|
+
}
|
|
183
|
+
|
|
184
|
+
.brand-ink {
|
|
185
|
+
fill: var(--ink);
|
|
125
186
|
}
|
|
126
187
|
|
|
127
188
|
.local-badge {
|
|
128
189
|
display: inline-flex;
|
|
129
190
|
align-items: center;
|
|
130
|
-
gap: 0.
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
border-radius: 999px;
|
|
134
|
-
color: var(--text-muted);
|
|
135
|
-
background: var(--surface);
|
|
136
|
-
box-shadow: var(--shadow-sm);
|
|
137
|
-
font-size: 0.75rem;
|
|
191
|
+
gap: 0.5rem;
|
|
192
|
+
color: var(--ink-soft);
|
|
193
|
+
font-size: 0.8125rem;
|
|
138
194
|
font-weight: 650;
|
|
139
195
|
}
|
|
140
196
|
|
|
141
|
-
.local-badge
|
|
142
|
-
width: 0.
|
|
143
|
-
height: 0.
|
|
197
|
+
.local-badge i {
|
|
198
|
+
width: 0.5rem;
|
|
199
|
+
height: 0.5rem;
|
|
144
200
|
border-radius: 50%;
|
|
145
|
-
background: var(--
|
|
146
|
-
content: "";
|
|
201
|
+
background: var(--signal);
|
|
147
202
|
}
|
|
148
203
|
|
|
149
|
-
/*
|
|
204
|
+
/* Page and introduction */
|
|
150
205
|
|
|
151
|
-
.shell
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
206
|
+
.wizard-shell,
|
|
207
|
+
.site-footer {
|
|
208
|
+
width: min(calc(100% - 1.5rem), var(--page));
|
|
209
|
+
margin-inline: auto;
|
|
155
210
|
}
|
|
156
211
|
|
|
157
|
-
.
|
|
158
|
-
|
|
212
|
+
.wizard-shell {
|
|
213
|
+
padding-block: clamp(2.5rem, 7vw, 5.5rem) 5rem;
|
|
159
214
|
}
|
|
160
215
|
|
|
161
|
-
.
|
|
162
|
-
|
|
163
|
-
margin: 0 0 0.5rem;
|
|
164
|
-
color: var(--accent);
|
|
165
|
-
font-size: 0.75rem;
|
|
166
|
-
font-weight: 800;
|
|
167
|
-
letter-spacing: 0.09em;
|
|
168
|
-
text-transform: uppercase;
|
|
216
|
+
.wizard-intro {
|
|
217
|
+
max-width: 62rem;
|
|
169
218
|
}
|
|
170
219
|
|
|
171
|
-
h1,
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
p {
|
|
175
|
-
margin-top: 0;
|
|
220
|
+
.wizard-intro h1,
|
|
221
|
+
.wizard-intro p {
|
|
222
|
+
margin: 0;
|
|
176
223
|
}
|
|
177
224
|
|
|
178
|
-
h1 {
|
|
179
|
-
max-width:
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
225
|
+
.wizard-intro h1 {
|
|
226
|
+
max-width: 15ch;
|
|
227
|
+
font-size: clamp(2.75rem, 8vw, 5rem);
|
|
228
|
+
line-height: 0.98;
|
|
229
|
+
letter-spacing: -0.038em;
|
|
230
|
+
text-wrap: balance;
|
|
184
231
|
}
|
|
185
232
|
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
233
|
+
.wizard-intro > p {
|
|
234
|
+
max-width: 58ch;
|
|
235
|
+
margin-block-start: 1.5rem;
|
|
236
|
+
color: var(--ink-soft);
|
|
237
|
+
font-size: clamp(1rem, 2vw, 1.125rem);
|
|
238
|
+
line-height: 1.65;
|
|
191
239
|
}
|
|
192
240
|
|
|
193
|
-
|
|
194
|
-
margin-
|
|
195
|
-
|
|
241
|
+
.intro-ledger {
|
|
242
|
+
margin-block-start: 2rem;
|
|
243
|
+
border-block: 1px solid var(--line-strong);
|
|
244
|
+
display: grid;
|
|
245
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
196
246
|
}
|
|
197
247
|
|
|
198
|
-
.
|
|
199
|
-
|
|
200
|
-
|
|
248
|
+
.intro-ledger > span {
|
|
249
|
+
padding: 1rem 1.25rem;
|
|
250
|
+
display: grid;
|
|
251
|
+
gap: 0.25rem;
|
|
201
252
|
}
|
|
202
253
|
|
|
203
|
-
.
|
|
204
|
-
|
|
205
|
-
font-size: 1.0625rem;
|
|
254
|
+
.intro-ledger > span:first-child {
|
|
255
|
+
padding-inline-start: 0;
|
|
206
256
|
}
|
|
207
257
|
|
|
208
|
-
|
|
258
|
+
.intro-ledger > span + span {
|
|
259
|
+
border-inline-start: 1px solid var(--line);
|
|
260
|
+
}
|
|
209
261
|
|
|
210
|
-
.
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
grid-template-columns: 2.25rem 1fr;
|
|
214
|
-
gap: 0.25rem 0.875rem;
|
|
215
|
-
align-items: start;
|
|
216
|
-
margin: 1.25rem 0 0;
|
|
217
|
-
padding: 1rem 1.125rem;
|
|
218
|
-
border: 1px solid #b9d9d2;
|
|
219
|
-
border-radius: var(--radius);
|
|
220
|
-
background: var(--accent-soft);
|
|
221
|
-
box-shadow: var(--shadow-sm);
|
|
262
|
+
.intro-ledger small {
|
|
263
|
+
color: var(--ink-soft);
|
|
264
|
+
line-height: 1.45;
|
|
222
265
|
}
|
|
223
266
|
|
|
224
|
-
.
|
|
267
|
+
.wizard-layout {
|
|
268
|
+
margin-block-start: clamp(2.5rem, 6vw, 4.5rem);
|
|
225
269
|
display: grid;
|
|
226
|
-
|
|
227
|
-
height: 2.25rem;
|
|
228
|
-
grid-row: span 2;
|
|
229
|
-
place-items: center;
|
|
230
|
-
border-radius: 0.625rem;
|
|
231
|
-
color: var(--accent-deep);
|
|
232
|
-
background: #d3eae0;
|
|
233
|
-
font-size: 1rem;
|
|
234
|
-
font-weight: 800;
|
|
235
|
-
content: "✓";
|
|
270
|
+
gap: 1.25rem;
|
|
236
271
|
}
|
|
237
272
|
|
|
238
|
-
|
|
239
|
-
align-self: center;
|
|
240
|
-
}
|
|
273
|
+
/* Route rail */
|
|
241
274
|
|
|
242
|
-
.
|
|
243
|
-
|
|
275
|
+
.route-rail {
|
|
276
|
+
min-width: 0;
|
|
277
|
+
overflow: hidden;
|
|
278
|
+
border: 1px solid var(--line-strong);
|
|
279
|
+
border-radius: var(--radius-lg);
|
|
280
|
+
background: var(--surface-raised);
|
|
244
281
|
}
|
|
245
282
|
|
|
246
|
-
.
|
|
247
|
-
|
|
248
|
-
|
|
283
|
+
.route-rail > header {
|
|
284
|
+
padding: 1.25rem;
|
|
285
|
+
border-block-end: 1px solid var(--line);
|
|
249
286
|
}
|
|
250
287
|
|
|
251
|
-
.
|
|
252
|
-
|
|
253
|
-
|
|
254
|
-
content: "!";
|
|
288
|
+
.route-rail h2,
|
|
289
|
+
.route-rail p {
|
|
290
|
+
margin: 0;
|
|
255
291
|
}
|
|
256
292
|
|
|
257
|
-
.
|
|
258
|
-
|
|
293
|
+
.route-rail h2 {
|
|
294
|
+
font-size: 1.25rem;
|
|
295
|
+
letter-spacing: -0.02em;
|
|
259
296
|
}
|
|
260
297
|
|
|
261
|
-
|
|
298
|
+
.route-rail > header p {
|
|
299
|
+
margin-block-start: 0.375rem;
|
|
300
|
+
color: var(--ink-soft);
|
|
301
|
+
font-size: 0.875rem;
|
|
302
|
+
}
|
|
262
303
|
|
|
263
304
|
.steps {
|
|
264
|
-
|
|
305
|
+
padding: 1.25rem;
|
|
265
306
|
}
|
|
266
307
|
|
|
267
308
|
.steps ol {
|
|
268
|
-
display: grid;
|
|
269
|
-
grid-template-columns: repeat(5, 1fr);
|
|
270
309
|
margin: 0;
|
|
271
310
|
padding: 0;
|
|
311
|
+
display: grid;
|
|
312
|
+
grid-template-columns: repeat(5, minmax(0, 1fr));
|
|
272
313
|
list-style: none;
|
|
273
314
|
}
|
|
274
315
|
|
|
275
316
|
.steps li {
|
|
276
317
|
position: relative;
|
|
318
|
+
min-width: 0;
|
|
277
319
|
display: grid;
|
|
278
320
|
justify-items: center;
|
|
279
|
-
gap: 0.
|
|
280
|
-
color: var(--
|
|
281
|
-
font-size: 0.75rem;
|
|
321
|
+
gap: 0.5rem;
|
|
322
|
+
color: var(--ink-soft);
|
|
282
323
|
text-align: center;
|
|
283
324
|
}
|
|
284
325
|
|
|
285
326
|
.steps li::before {
|
|
286
327
|
position: absolute;
|
|
287
|
-
top: 0.9375rem;
|
|
288
|
-
right: 50%;
|
|
289
328
|
z-index: 0;
|
|
329
|
+
inset-block-start: 0.9375rem;
|
|
330
|
+
inset-inline-end: 50%;
|
|
290
331
|
width: 100%;
|
|
291
|
-
height:
|
|
292
|
-
background: var(--
|
|
332
|
+
height: 1px;
|
|
333
|
+
background: var(--line-strong);
|
|
293
334
|
content: "";
|
|
294
|
-
transition: background 400ms var(--ease);
|
|
295
335
|
}
|
|
296
336
|
|
|
297
337
|
.steps li:first-child::before {
|
|
298
338
|
display: none;
|
|
299
339
|
}
|
|
300
340
|
|
|
301
|
-
.
|
|
341
|
+
.step-index {
|
|
302
342
|
position: relative;
|
|
303
343
|
z-index: 1;
|
|
344
|
+
width: 1.875rem;
|
|
345
|
+
height: 1.875rem;
|
|
346
|
+
border: 1px solid var(--line-strong);
|
|
347
|
+
border-radius: 50%;
|
|
304
348
|
display: grid;
|
|
305
|
-
width: 2rem;
|
|
306
|
-
height: 2rem;
|
|
307
349
|
place-items: center;
|
|
308
|
-
border: 2px solid var(--border-strong);
|
|
309
|
-
border-radius: 50%;
|
|
310
350
|
background: var(--surface);
|
|
311
|
-
|
|
312
|
-
font-
|
|
313
|
-
font-weight: 800;
|
|
351
|
+
font-size: 0.75rem;
|
|
352
|
+
font-weight: 750;
|
|
314
353
|
transition:
|
|
315
|
-
|
|
316
|
-
|
|
317
|
-
color
|
|
318
|
-
box-shadow 300ms var(--ease);
|
|
354
|
+
background 240ms var(--ease),
|
|
355
|
+
border-color 240ms var(--ease),
|
|
356
|
+
color 240ms var(--ease);
|
|
319
357
|
}
|
|
320
358
|
|
|
321
|
-
.
|
|
322
|
-
|
|
323
|
-
|
|
359
|
+
.step-copy {
|
|
360
|
+
min-width: 0;
|
|
361
|
+
display: grid;
|
|
362
|
+
gap: 0.125rem;
|
|
324
363
|
}
|
|
325
364
|
|
|
326
|
-
.
|
|
327
|
-
color:
|
|
365
|
+
.step-copy strong {
|
|
366
|
+
color: inherit;
|
|
367
|
+
font-size: 0.75rem;
|
|
368
|
+
line-height: 1.3;
|
|
328
369
|
}
|
|
329
370
|
|
|
330
|
-
.
|
|
331
|
-
|
|
332
|
-
color: #fff;
|
|
333
|
-
background: var(--accent);
|
|
334
|
-
box-shadow: 0 0 0 5px rgb(19 124 116 / 15%);
|
|
371
|
+
.step-copy small {
|
|
372
|
+
display: none;
|
|
335
373
|
}
|
|
336
374
|
|
|
337
|
-
.steps li
|
|
338
|
-
|
|
339
|
-
color: transparent;
|
|
340
|
-
background: var(--accent);
|
|
375
|
+
.steps li[aria-current="step"] {
|
|
376
|
+
color: var(--ink);
|
|
341
377
|
}
|
|
342
378
|
|
|
343
|
-
.steps li.
|
|
344
|
-
|
|
345
|
-
|
|
346
|
-
|
|
347
|
-
|
|
379
|
+
.steps li[aria-current="step"] .step-index {
|
|
380
|
+
border-color: var(--signal);
|
|
381
|
+
background: var(--signal);
|
|
382
|
+
color: var(--signal-on);
|
|
383
|
+
}
|
|
384
|
+
|
|
385
|
+
.steps li.complete .step-index {
|
|
386
|
+
border-color: var(--signal);
|
|
387
|
+
background: var(--surface-muted);
|
|
388
|
+
color: var(--signal-deep);
|
|
348
389
|
}
|
|
349
390
|
|
|
350
391
|
.steps li.complete::before,
|
|
351
392
|
.steps li[aria-current="step"]::before {
|
|
352
|
-
background: var(--
|
|
393
|
+
background: var(--signal);
|
|
353
394
|
}
|
|
354
395
|
|
|
355
|
-
|
|
396
|
+
.rail-boundary {
|
|
397
|
+
margin: 0 1.25rem 1.25rem;
|
|
398
|
+
padding-block-start: 1rem;
|
|
399
|
+
border-block-start: 1px solid var(--line);
|
|
400
|
+
}
|
|
401
|
+
|
|
402
|
+
.rail-boundary p {
|
|
403
|
+
margin-block-start: 0.5rem;
|
|
404
|
+
color: var(--ink-soft);
|
|
405
|
+
font-size: 0.8125rem;
|
|
406
|
+
line-height: 1.55;
|
|
407
|
+
}
|
|
408
|
+
|
|
409
|
+
/* Current work */
|
|
410
|
+
|
|
411
|
+
.work-column {
|
|
412
|
+
min-width: 0;
|
|
413
|
+
scroll-margin-block-start: 5.5rem;
|
|
414
|
+
}
|
|
415
|
+
|
|
416
|
+
.status-dock {
|
|
417
|
+
margin-block-end: 1rem;
|
|
418
|
+
display: grid;
|
|
419
|
+
gap: 0.625rem;
|
|
420
|
+
}
|
|
421
|
+
|
|
422
|
+
.preview-badge {
|
|
423
|
+
margin: 0;
|
|
424
|
+
padding: 0.625rem 1rem;
|
|
425
|
+
border: 1px solid var(--line-strong);
|
|
426
|
+
border-radius: var(--radius);
|
|
427
|
+
display: flex;
|
|
428
|
+
align-items: baseline;
|
|
429
|
+
justify-content: space-between;
|
|
430
|
+
gap: 0.75rem 1rem;
|
|
431
|
+
background: var(--surface-muted);
|
|
432
|
+
color: var(--ink);
|
|
433
|
+
font-size: 0.8125rem;
|
|
434
|
+
}
|
|
435
|
+
|
|
436
|
+
.preview-badge span {
|
|
437
|
+
color: var(--ink-soft);
|
|
438
|
+
text-align: end;
|
|
439
|
+
}
|
|
356
440
|
|
|
357
441
|
.message,
|
|
358
442
|
.error {
|
|
443
|
+
min-height: 2.875rem;
|
|
444
|
+
margin: 0;
|
|
445
|
+
padding: 0.75rem 1rem;
|
|
446
|
+
border-radius: var(--radius);
|
|
359
447
|
display: flex;
|
|
360
448
|
align-items: center;
|
|
361
449
|
gap: 0.625rem;
|
|
362
|
-
min-height: 2.875rem;
|
|
363
|
-
margin: 1rem 0;
|
|
364
|
-
padding: 0.75rem 1rem;
|
|
365
|
-
border-radius: var(--radius-sm);
|
|
366
450
|
font-size: 0.9375rem;
|
|
367
451
|
}
|
|
368
452
|
|
|
369
453
|
.message {
|
|
370
|
-
border: 1px solid var(--
|
|
371
|
-
color: var(--text-muted);
|
|
454
|
+
border: 1px solid var(--line);
|
|
372
455
|
background: var(--surface);
|
|
373
|
-
|
|
456
|
+
color: var(--ink-soft);
|
|
374
457
|
}
|
|
375
458
|
|
|
376
459
|
.message::before {
|
|
460
|
+
width: 0.5rem;
|
|
461
|
+
height: 0.5rem;
|
|
377
462
|
flex: 0 0 auto;
|
|
378
|
-
width: 0.4375rem;
|
|
379
|
-
height: 0.4375rem;
|
|
380
463
|
border-radius: 50%;
|
|
381
|
-
background: var(--
|
|
464
|
+
background: var(--signal);
|
|
382
465
|
content: "";
|
|
383
466
|
}
|
|
384
467
|
|
|
385
468
|
.error {
|
|
386
|
-
border: 1px solid
|
|
387
|
-
color: var(--danger);
|
|
469
|
+
border: 1px solid var(--danger-line);
|
|
388
470
|
background: var(--danger-soft);
|
|
471
|
+
color: var(--danger);
|
|
389
472
|
font-weight: 650;
|
|
390
|
-
animation: shake 320ms var(--ease);
|
|
391
473
|
}
|
|
392
474
|
|
|
393
|
-
/* ---------- Panels ---------- */
|
|
394
|
-
|
|
395
475
|
.panel {
|
|
396
|
-
padding: clamp(1.
|
|
397
|
-
border: 1px solid var(--
|
|
476
|
+
padding: clamp(1.25rem, 4vw, 2.25rem);
|
|
477
|
+
border: 1px solid var(--line-strong);
|
|
398
478
|
border-radius: var(--radius-lg);
|
|
399
479
|
background: var(--surface);
|
|
400
|
-
box-shadow: var(--shadow
|
|
401
|
-
animation: panel-in
|
|
480
|
+
box-shadow: var(--shadow);
|
|
481
|
+
animation: panel-in 360ms var(--ease) both;
|
|
402
482
|
}
|
|
403
483
|
|
|
404
484
|
.panel-heading {
|
|
405
|
-
margin-
|
|
485
|
+
margin-block-end: 1.75rem;
|
|
486
|
+
display: grid;
|
|
487
|
+
grid-template-columns: minmax(0, 1fr) auto;
|
|
488
|
+
align-items: baseline;
|
|
489
|
+
gap: 0.5rem 1rem;
|
|
490
|
+
}
|
|
491
|
+
|
|
492
|
+
.panel-heading h2,
|
|
493
|
+
.panel-heading p {
|
|
494
|
+
margin: 0;
|
|
495
|
+
}
|
|
496
|
+
|
|
497
|
+
.panel-heading h2 {
|
|
498
|
+
max-width: 27ch;
|
|
499
|
+
font-size: clamp(1.75rem, 4vw, 2.5rem);
|
|
500
|
+
line-height: 1.08;
|
|
501
|
+
letter-spacing: -0.03em;
|
|
502
|
+
text-wrap: balance;
|
|
503
|
+
}
|
|
504
|
+
|
|
505
|
+
.panel-heading > span {
|
|
506
|
+
color: var(--ink-soft);
|
|
507
|
+
font-family: "Relmio Geist", sans-serif;
|
|
508
|
+
font-size: 0.75rem;
|
|
509
|
+
font-variant-numeric: tabular-nums;
|
|
510
|
+
font-weight: 650;
|
|
511
|
+
white-space: nowrap;
|
|
406
512
|
}
|
|
407
513
|
|
|
408
514
|
.panel-heading p {
|
|
409
|
-
max-width:
|
|
410
|
-
|
|
515
|
+
max-width: 66ch;
|
|
516
|
+
grid-column: 1 / -1;
|
|
517
|
+
color: var(--ink-soft);
|
|
518
|
+
line-height: 1.65;
|
|
411
519
|
}
|
|
412
520
|
|
|
413
521
|
.status-row {
|
|
414
|
-
display: flex;
|
|
415
|
-
align-items: flex-start;
|
|
416
|
-
gap: 0.875rem;
|
|
417
522
|
padding: 1rem 1.125rem;
|
|
418
|
-
border: 1px solid var(--
|
|
419
|
-
|
|
523
|
+
border-block: 1px solid var(--line);
|
|
524
|
+
display: grid;
|
|
525
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
526
|
+
align-items: start;
|
|
527
|
+
gap: 0.875rem;
|
|
420
528
|
background: var(--surface-muted);
|
|
421
529
|
}
|
|
422
530
|
|
|
531
|
+
.status-row > span:last-child {
|
|
532
|
+
min-width: 0;
|
|
533
|
+
}
|
|
534
|
+
|
|
423
535
|
.status-row p {
|
|
424
536
|
margin: 0.25rem 0 0;
|
|
425
|
-
color: var(--
|
|
537
|
+
color: var(--ink-soft);
|
|
426
538
|
}
|
|
427
539
|
|
|
428
540
|
.status-row .credential-time {
|
|
429
|
-
color: var(--
|
|
541
|
+
color: var(--ink);
|
|
430
542
|
font-size: 0.875rem;
|
|
431
|
-
font-weight:
|
|
543
|
+
font-weight: 650;
|
|
432
544
|
}
|
|
433
545
|
|
|
434
546
|
.status-dot {
|
|
435
|
-
flex: 0 0 auto;
|
|
436
547
|
width: 0.75rem;
|
|
437
548
|
height: 0.75rem;
|
|
438
|
-
margin-
|
|
439
|
-
border: 2px solid var(--
|
|
549
|
+
margin-block-start: 0.375rem;
|
|
550
|
+
border: 2px solid var(--line-strong);
|
|
440
551
|
border-radius: 50%;
|
|
552
|
+
background: var(--surface);
|
|
441
553
|
transition:
|
|
442
|
-
border-color
|
|
443
|
-
background
|
|
444
|
-
box-shadow 300ms var(--ease);
|
|
554
|
+
border-color 220ms var(--ease),
|
|
555
|
+
background 220ms var(--ease);
|
|
445
556
|
}
|
|
446
557
|
|
|
447
558
|
.status-dot.ready {
|
|
448
559
|
border-color: var(--success);
|
|
449
560
|
background: var(--success);
|
|
450
|
-
box-shadow: 0 0 0 4px rgb(23 101 63 / 14%);
|
|
451
561
|
}
|
|
452
562
|
|
|
453
|
-
/*
|
|
563
|
+
/* Fields */
|
|
454
564
|
|
|
455
565
|
.field-grid {
|
|
456
566
|
display: grid;
|
|
457
|
-
grid-template-columns: minmax(0, 2fr) minmax(
|
|
458
|
-
gap:
|
|
459
|
-
margin-
|
|
567
|
+
grid-template-columns: minmax(0, 2fr) minmax(7.5rem, 1fr);
|
|
568
|
+
gap: 1.125rem;
|
|
569
|
+
margin-block-end: 1.25rem;
|
|
460
570
|
}
|
|
461
571
|
|
|
462
572
|
.field-grid.single {
|
|
@@ -464,120 +574,108 @@ h3 {
|
|
|
464
574
|
}
|
|
465
575
|
|
|
466
576
|
.field {
|
|
577
|
+
min-width: 0;
|
|
467
578
|
display: grid;
|
|
468
579
|
align-content: start;
|
|
469
|
-
gap: 0.
|
|
470
|
-
font-weight:
|
|
580
|
+
gap: 0.5rem;
|
|
581
|
+
font-weight: 650;
|
|
471
582
|
}
|
|
472
583
|
|
|
473
584
|
.field input,
|
|
474
585
|
.field select {
|
|
475
586
|
width: 100%;
|
|
476
587
|
min-height: 2.875rem;
|
|
477
|
-
padding: 0.625rem 0.
|
|
478
|
-
border: 1px solid var(--
|
|
588
|
+
padding: 0.625rem 0.75rem;
|
|
589
|
+
border: 1px solid var(--line-strong);
|
|
479
590
|
border-radius: var(--radius-sm);
|
|
480
|
-
|
|
481
|
-
|
|
591
|
+
background: var(--surface-raised);
|
|
592
|
+
color: var(--ink);
|
|
482
593
|
transition:
|
|
483
|
-
border-color
|
|
484
|
-
box-shadow
|
|
485
|
-
background 200ms var(--ease);
|
|
594
|
+
border-color 160ms var(--ease),
|
|
595
|
+
box-shadow 160ms var(--ease);
|
|
486
596
|
}
|
|
487
597
|
|
|
488
598
|
.field select {
|
|
489
|
-
|
|
490
|
-
padding-right: 2.25rem;
|
|
491
|
-
background-image:
|
|
492
|
-
linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
|
|
493
|
-
linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
|
|
494
|
-
background-position:
|
|
495
|
-
calc(100% - 1.125rem) 50%,
|
|
496
|
-
calc(100% - 0.8125rem) 50%;
|
|
497
|
-
background-size:
|
|
498
|
-
0.3125rem 0.3125rem,
|
|
499
|
-
0.3125rem 0.3125rem;
|
|
500
|
-
background-repeat: no-repeat;
|
|
599
|
+
padding-inline-end: 2.25rem;
|
|
501
600
|
}
|
|
502
601
|
|
|
503
602
|
.field input:hover,
|
|
504
603
|
.field select:hover {
|
|
505
|
-
border-color: var(--
|
|
604
|
+
border-color: var(--signal);
|
|
506
605
|
}
|
|
507
606
|
|
|
508
607
|
.field input:focus,
|
|
509
608
|
.field select:focus {
|
|
510
|
-
border-color: var(--
|
|
609
|
+
border-color: var(--signal);
|
|
511
610
|
outline: 0;
|
|
512
|
-
box-shadow: 0 0 0
|
|
611
|
+
box-shadow: 0 0 0 0.1875rem color-mix(in srgb, var(--signal) 22%, transparent);
|
|
513
612
|
}
|
|
514
613
|
|
|
515
614
|
.field input:disabled {
|
|
516
|
-
color: var(--text-muted);
|
|
517
615
|
background: var(--surface-muted);
|
|
616
|
+
color: var(--ink-soft);
|
|
518
617
|
cursor: not-allowed;
|
|
519
618
|
}
|
|
520
619
|
|
|
521
620
|
.field small {
|
|
522
|
-
color: var(--
|
|
621
|
+
color: var(--ink-soft);
|
|
523
622
|
font-size: 0.75rem;
|
|
524
623
|
font-weight: 450;
|
|
624
|
+
line-height: 1.5;
|
|
525
625
|
}
|
|
526
626
|
|
|
527
627
|
code {
|
|
528
|
-
padding: 0.
|
|
628
|
+
padding: 0.125rem 0.3rem;
|
|
529
629
|
border-radius: 0.25rem;
|
|
530
|
-
background:
|
|
531
|
-
font-family:
|
|
630
|
+
background: color-mix(in srgb, var(--ink) 7%, transparent);
|
|
631
|
+
font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
|
|
532
632
|
font-size: 0.875em;
|
|
533
633
|
overflow-wrap: anywhere;
|
|
534
634
|
}
|
|
535
635
|
|
|
536
|
-
/*
|
|
636
|
+
/* Buttons */
|
|
537
637
|
|
|
538
638
|
.actions {
|
|
639
|
+
margin-block-start: 1.75rem;
|
|
539
640
|
display: flex;
|
|
540
641
|
flex-wrap: wrap;
|
|
541
642
|
justify-content: flex-end;
|
|
542
643
|
gap: 0.75rem;
|
|
543
|
-
margin-top: 1.75rem;
|
|
544
644
|
}
|
|
545
645
|
|
|
546
646
|
.button {
|
|
547
|
-
|
|
647
|
+
min-height: 2.875rem;
|
|
648
|
+
padding: 0.625rem 1rem;
|
|
649
|
+
border: 1px solid transparent;
|
|
650
|
+
border-radius: var(--radius);
|
|
548
651
|
display: inline-flex;
|
|
549
652
|
align-items: center;
|
|
550
653
|
justify-content: center;
|
|
551
654
|
gap: 0.5rem;
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
|
|
556
|
-
font-weight: 750;
|
|
557
|
-
box-shadow: var(--shadow-sm);
|
|
655
|
+
font-weight: 700;
|
|
656
|
+
line-height: 1.2;
|
|
657
|
+
text-align: center;
|
|
658
|
+
text-decoration: none;
|
|
558
659
|
cursor: pointer;
|
|
559
660
|
transition:
|
|
560
|
-
transform
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
color
|
|
564
|
-
|
|
565
|
-
opacity 200ms var(--ease);
|
|
661
|
+
transform 160ms var(--ease),
|
|
662
|
+
background 160ms var(--ease),
|
|
663
|
+
border-color 160ms var(--ease),
|
|
664
|
+
color 160ms var(--ease),
|
|
665
|
+
opacity 160ms var(--ease);
|
|
566
666
|
}
|
|
567
667
|
|
|
568
668
|
.button:not(:disabled):hover {
|
|
569
|
-
transform: translateY(-
|
|
570
|
-
box-shadow: var(--shadow-md);
|
|
669
|
+
transform: translateY(-0.0625rem);
|
|
571
670
|
}
|
|
572
671
|
|
|
573
672
|
.button:not(:disabled):active {
|
|
574
|
-
transform: translateY(0)
|
|
575
|
-
box-shadow: var(--shadow-sm);
|
|
673
|
+
transform: translateY(0);
|
|
576
674
|
}
|
|
577
675
|
|
|
578
676
|
.button:disabled {
|
|
579
677
|
cursor: not-allowed;
|
|
580
|
-
opacity: 0.
|
|
678
|
+
opacity: 0.5;
|
|
581
679
|
}
|
|
582
680
|
|
|
583
681
|
.button[aria-busy="true"] {
|
|
@@ -585,84 +683,81 @@ code {
|
|
|
585
683
|
}
|
|
586
684
|
|
|
587
685
|
.button[aria-busy="true"]::after {
|
|
588
|
-
width: 0.
|
|
589
|
-
height: 0.
|
|
686
|
+
width: 0.875rem;
|
|
687
|
+
height: 0.875rem;
|
|
590
688
|
flex: 0 0 auto;
|
|
591
689
|
border: 2px solid currentcolor;
|
|
592
|
-
border-
|
|
690
|
+
border-block-start-color: transparent;
|
|
593
691
|
border-radius: 50%;
|
|
594
692
|
content: "";
|
|
595
693
|
animation: spin 700ms linear infinite;
|
|
596
694
|
}
|
|
597
695
|
|
|
598
696
|
.button.primary {
|
|
599
|
-
|
|
600
|
-
|
|
697
|
+
background: var(--signal);
|
|
698
|
+
color: var(--signal-on);
|
|
601
699
|
}
|
|
602
700
|
|
|
603
701
|
.button.primary:not(:disabled):hover {
|
|
604
|
-
background: var(--
|
|
702
|
+
background: var(--signal-deep);
|
|
605
703
|
}
|
|
606
704
|
|
|
607
705
|
.button.secondary {
|
|
608
|
-
border-color: var(--
|
|
609
|
-
|
|
610
|
-
|
|
706
|
+
border-color: var(--line-strong);
|
|
707
|
+
background: var(--surface-raised);
|
|
708
|
+
color: var(--ink);
|
|
611
709
|
}
|
|
612
710
|
|
|
613
711
|
.button.secondary:not(:disabled):hover,
|
|
614
712
|
.button.ghost:not(:disabled):hover {
|
|
615
|
-
border-color: var(--
|
|
616
|
-
background: var(--
|
|
713
|
+
border-color: var(--signal);
|
|
714
|
+
background: var(--surface-muted);
|
|
617
715
|
}
|
|
618
716
|
|
|
619
717
|
.button.ghost {
|
|
620
|
-
margin-
|
|
621
|
-
color: var(--text-muted);
|
|
718
|
+
margin-inline-end: auto;
|
|
622
719
|
background: transparent;
|
|
623
|
-
|
|
720
|
+
color: var(--ink-soft);
|
|
624
721
|
}
|
|
625
722
|
|
|
626
723
|
.button.copied {
|
|
627
724
|
border-color: var(--success);
|
|
725
|
+
background: var(--success-soft);
|
|
628
726
|
color: var(--success);
|
|
629
|
-
background: #e9f5ee;
|
|
630
727
|
}
|
|
631
728
|
|
|
632
|
-
/*
|
|
729
|
+
/* Host confirmation */
|
|
633
730
|
|
|
634
731
|
.fingerprint {
|
|
635
|
-
margin-
|
|
636
|
-
padding:
|
|
637
|
-
border: 1px solid var(--warning-
|
|
732
|
+
margin-block-start: 1rem;
|
|
733
|
+
padding: 1rem;
|
|
734
|
+
border: 1px solid var(--warning-line);
|
|
638
735
|
border-radius: var(--radius);
|
|
639
736
|
background: var(--warning-soft);
|
|
640
|
-
animation: panel-in 320ms var(--ease);
|
|
641
737
|
}
|
|
642
738
|
|
|
643
739
|
.fingerprint > span {
|
|
644
740
|
display: block;
|
|
645
|
-
margin-
|
|
741
|
+
margin-block-end: 0.375rem;
|
|
646
742
|
color: var(--warning);
|
|
647
743
|
font-size: 0.75rem;
|
|
648
|
-
font-weight:
|
|
649
|
-
text-transform: uppercase;
|
|
744
|
+
font-weight: 750;
|
|
650
745
|
}
|
|
651
746
|
|
|
652
747
|
.fingerprint > code {
|
|
653
748
|
display: block;
|
|
654
|
-
margin-
|
|
749
|
+
margin-block-end: 1rem;
|
|
655
750
|
padding: 0.625rem 0.75rem;
|
|
656
|
-
border: 1px solid var(--warning-
|
|
751
|
+
border: 1px solid var(--warning-line);
|
|
657
752
|
border-radius: var(--radius-sm);
|
|
658
|
-
background:
|
|
753
|
+
background: var(--surface);
|
|
659
754
|
}
|
|
660
755
|
|
|
661
756
|
.check-row {
|
|
662
757
|
display: grid;
|
|
663
|
-
grid-template-columns: 1.25rem 1fr;
|
|
664
|
-
gap: 0.625rem;
|
|
758
|
+
grid-template-columns: 1.25rem minmax(0, 1fr);
|
|
665
759
|
align-items: start;
|
|
760
|
+
gap: 0.625rem;
|
|
666
761
|
font-weight: 600;
|
|
667
762
|
cursor: pointer;
|
|
668
763
|
}
|
|
@@ -671,59 +766,58 @@ code {
|
|
|
671
766
|
width: 1.125rem;
|
|
672
767
|
height: 1.125rem;
|
|
673
768
|
margin: 0.2rem 0 0;
|
|
674
|
-
accent-color: var(--
|
|
769
|
+
accent-color: var(--signal);
|
|
675
770
|
cursor: pointer;
|
|
676
771
|
}
|
|
677
772
|
|
|
678
773
|
.version-strip {
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
|
|
682
|
-
|
|
774
|
+
margin-block-end: 1.5rem;
|
|
775
|
+
border-block: 1px solid var(--line);
|
|
776
|
+
display: grid;
|
|
777
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
683
778
|
}
|
|
684
779
|
|
|
685
780
|
.version-strip span {
|
|
686
|
-
|
|
687
|
-
|
|
688
|
-
gap: 0.375rem;
|
|
689
|
-
padding: 0.4375rem 0.75rem;
|
|
690
|
-
border: 1px solid var(--border);
|
|
691
|
-
border-radius: 999px;
|
|
692
|
-
background: var(--surface-muted);
|
|
693
|
-
font-size: 0.8125rem;
|
|
781
|
+
padding: 0.875rem 1rem;
|
|
782
|
+
color: var(--ink-soft);
|
|
694
783
|
}
|
|
695
784
|
|
|
696
|
-
|
|
785
|
+
.version-strip span + span {
|
|
786
|
+
border-inline-start: 1px solid var(--line);
|
|
787
|
+
}
|
|
788
|
+
|
|
789
|
+
.version-strip strong {
|
|
790
|
+
color: var(--ink);
|
|
791
|
+
}
|
|
792
|
+
|
|
793
|
+
/* Plan review */
|
|
697
794
|
|
|
698
795
|
.review-grid {
|
|
699
|
-
|
|
700
|
-
grid-template-columns: 1fr 1fr;
|
|
701
|
-
gap: 1rem;
|
|
796
|
+
border-block-start: 1px solid var(--line-strong);
|
|
702
797
|
}
|
|
703
798
|
|
|
704
799
|
.review-grid section {
|
|
705
|
-
padding: 1.
|
|
706
|
-
|
|
707
|
-
|
|
708
|
-
|
|
800
|
+
padding-block: 1.25rem;
|
|
801
|
+
display: grid;
|
|
802
|
+
grid-template-columns: minmax(9rem, 0.35fr) minmax(0, 1fr);
|
|
803
|
+
gap: 1.25rem;
|
|
709
804
|
}
|
|
710
805
|
|
|
711
|
-
.review-grid section
|
|
712
|
-
border-
|
|
713
|
-
background: var(--accent-soft);
|
|
806
|
+
.review-grid section + section {
|
|
807
|
+
border-block-start: 1px solid var(--line);
|
|
714
808
|
}
|
|
715
809
|
|
|
716
|
-
.review-grid
|
|
717
|
-
|
|
718
|
-
|
|
810
|
+
.review-grid h3 {
|
|
811
|
+
margin: 0;
|
|
812
|
+
font-size: 1rem;
|
|
719
813
|
}
|
|
720
814
|
|
|
721
815
|
.check-list,
|
|
722
816
|
.no-list {
|
|
817
|
+
margin: 0;
|
|
818
|
+
padding-inline-start: 1.25rem;
|
|
723
819
|
display: grid;
|
|
724
820
|
gap: 0.625rem;
|
|
725
|
-
margin: 0;
|
|
726
|
-
padding-left: 1.25rem;
|
|
727
821
|
}
|
|
728
822
|
|
|
729
823
|
.check-list li::marker {
|
|
@@ -735,54 +829,62 @@ code {
|
|
|
735
829
|
}
|
|
736
830
|
|
|
737
831
|
.approval {
|
|
738
|
-
margin-
|
|
739
|
-
padding: 1rem
|
|
740
|
-
border: 1px solid var(--warning-
|
|
832
|
+
margin-block-start: 1rem;
|
|
833
|
+
padding: 1rem;
|
|
834
|
+
border: 1px solid var(--warning-line);
|
|
741
835
|
border-radius: var(--radius);
|
|
742
836
|
background: var(--warning-soft);
|
|
743
837
|
}
|
|
744
838
|
|
|
745
|
-
/*
|
|
746
|
-
|
|
747
|
-
.success-panel {
|
|
748
|
-
position: relative;
|
|
749
|
-
}
|
|
839
|
+
/* Completion */
|
|
750
840
|
|
|
751
841
|
.success-mark {
|
|
752
|
-
display: grid;
|
|
753
842
|
width: 3.25rem;
|
|
754
843
|
height: 3.25rem;
|
|
755
|
-
margin-
|
|
756
|
-
|
|
757
|
-
|
|
758
|
-
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
|
|
762
|
-
|
|
763
|
-
|
|
844
|
+
margin-block-end: 1.25rem;
|
|
845
|
+
overflow: visible;
|
|
846
|
+
}
|
|
847
|
+
|
|
848
|
+
.success-mark circle {
|
|
849
|
+
fill: var(--success-soft);
|
|
850
|
+
stroke: var(--success);
|
|
851
|
+
stroke-width: 1.5;
|
|
852
|
+
}
|
|
853
|
+
|
|
854
|
+
.success-mark path {
|
|
855
|
+
fill: none;
|
|
856
|
+
stroke: var(--success);
|
|
857
|
+
stroke-width: 2.25;
|
|
858
|
+
stroke-linecap: round;
|
|
859
|
+
stroke-linejoin: round;
|
|
860
|
+
}
|
|
861
|
+
|
|
862
|
+
.success-panel > h3 {
|
|
863
|
+
margin-block: 0 0.75rem;
|
|
764
864
|
}
|
|
765
865
|
|
|
766
866
|
.result-list {
|
|
767
|
-
|
|
867
|
+
margin-block-end: 1rem;
|
|
868
|
+
border-block-start: 1px solid var(--line);
|
|
768
869
|
}
|
|
769
870
|
|
|
770
|
-
.result-list div {
|
|
871
|
+
.result-list > div {
|
|
872
|
+
padding-block: 0.875rem;
|
|
873
|
+
border-block-end: 1px solid var(--line);
|
|
771
874
|
display: grid;
|
|
772
|
-
grid-template-columns: 9rem 1fr;
|
|
773
|
-
gap: 1rem;
|
|
875
|
+
grid-template-columns: 9rem minmax(0, 1fr);
|
|
774
876
|
align-items: center;
|
|
775
|
-
|
|
776
|
-
border-bottom: 1px solid var(--border);
|
|
877
|
+
gap: 1rem;
|
|
777
878
|
}
|
|
778
879
|
|
|
779
880
|
.result-list dt {
|
|
780
|
-
color: var(--
|
|
881
|
+
color: var(--ink-soft);
|
|
781
882
|
}
|
|
782
883
|
|
|
783
884
|
.result-list dd {
|
|
885
|
+
min-width: 0;
|
|
784
886
|
margin: 0;
|
|
785
|
-
font-weight:
|
|
887
|
+
font-weight: 650;
|
|
786
888
|
}
|
|
787
889
|
|
|
788
890
|
.result-list dd.result-value {
|
|
@@ -794,135 +896,290 @@ code {
|
|
|
794
896
|
}
|
|
795
897
|
|
|
796
898
|
.copy-value {
|
|
797
|
-
min-height: 2.
|
|
798
|
-
padding: 0.
|
|
799
|
-
border-radius: 0.5rem;
|
|
899
|
+
min-height: 2.25rem;
|
|
900
|
+
padding: 0.375rem 0.75rem;
|
|
800
901
|
font-size: 0.8125rem;
|
|
801
902
|
}
|
|
802
903
|
|
|
803
904
|
.model-box,
|
|
804
905
|
.final-note {
|
|
805
|
-
margin-
|
|
806
|
-
padding: 1.
|
|
807
|
-
border: 1px solid var(--
|
|
808
|
-
|
|
809
|
-
|
|
906
|
+
margin-block-start: 1.5rem;
|
|
907
|
+
padding-block-start: 1.5rem;
|
|
908
|
+
border-block-start: 1px solid var(--line-strong);
|
|
909
|
+
}
|
|
910
|
+
|
|
911
|
+
.model-box h3 {
|
|
912
|
+
margin-block: 0 0.75rem;
|
|
810
913
|
}
|
|
811
914
|
|
|
812
915
|
.model-box p,
|
|
813
916
|
.final-note {
|
|
814
|
-
|
|
917
|
+
color: var(--ink-soft);
|
|
918
|
+
line-height: 1.6;
|
|
815
919
|
}
|
|
816
920
|
|
|
817
|
-
.model-box p
|
|
818
|
-
|
|
921
|
+
.model-box p:last-child,
|
|
922
|
+
.final-note {
|
|
923
|
+
margin-block-end: 0;
|
|
819
924
|
}
|
|
820
925
|
|
|
821
|
-
footer {
|
|
822
|
-
padding: 1.5rem
|
|
823
|
-
border-
|
|
824
|
-
color: var(--
|
|
825
|
-
background: var(--surface);
|
|
926
|
+
.site-footer {
|
|
927
|
+
padding-block: 1.5rem;
|
|
928
|
+
border-block-start: 1px solid var(--line);
|
|
929
|
+
color: var(--ink-soft);
|
|
826
930
|
font-size: 0.8125rem;
|
|
827
931
|
text-align: center;
|
|
828
932
|
}
|
|
829
933
|
|
|
830
|
-
footer p {
|
|
934
|
+
.site-footer p {
|
|
831
935
|
margin: 0;
|
|
832
936
|
}
|
|
833
937
|
|
|
834
|
-
/*
|
|
938
|
+
/* Wide operational layout */
|
|
835
939
|
|
|
836
|
-
@
|
|
837
|
-
|
|
838
|
-
|
|
839
|
-
transform: translateY(14px);
|
|
940
|
+
@media (min-width: 60rem) {
|
|
941
|
+
.wizard-shell {
|
|
942
|
+
padding-block-start: clamp(2rem, 4vw, 3rem);
|
|
840
943
|
}
|
|
841
|
-
|
|
842
|
-
|
|
843
|
-
|
|
944
|
+
|
|
945
|
+
.wizard-intro {
|
|
946
|
+
max-width: none;
|
|
947
|
+
display: grid;
|
|
948
|
+
grid-template-columns: minmax(22rem, 0.75fr) minmax(30rem, 1.25fr);
|
|
949
|
+
align-items: start;
|
|
950
|
+
gap: 1rem clamp(2rem, 5vw, 4rem);
|
|
844
951
|
}
|
|
845
|
-
}
|
|
846
952
|
|
|
847
|
-
|
|
848
|
-
|
|
849
|
-
|
|
850
|
-
|
|
953
|
+
.wizard-intro h1 {
|
|
954
|
+
grid-column: 1;
|
|
955
|
+
grid-row: 1 / span 2;
|
|
956
|
+
font-size: clamp(3rem, 5vw, 4.25rem);
|
|
851
957
|
}
|
|
852
|
-
|
|
853
|
-
|
|
958
|
+
|
|
959
|
+
.wizard-intro > p,
|
|
960
|
+
.wizard-intro .intro-ledger {
|
|
961
|
+
grid-column: 2;
|
|
854
962
|
}
|
|
855
|
-
|
|
856
|
-
|
|
857
|
-
|
|
963
|
+
|
|
964
|
+
.wizard-intro > p {
|
|
965
|
+
margin-block-start: 0;
|
|
858
966
|
}
|
|
859
|
-
}
|
|
860
967
|
|
|
861
|
-
|
|
862
|
-
|
|
863
|
-
100% {
|
|
864
|
-
transform: translateX(0);
|
|
968
|
+
.wizard-intro .intro-ledger {
|
|
969
|
+
margin-block-start: 0;
|
|
865
970
|
}
|
|
866
|
-
|
|
867
|
-
|
|
971
|
+
|
|
972
|
+
.wizard-layout {
|
|
973
|
+
margin-block-start: clamp(1.75rem, 4vw, 3rem);
|
|
974
|
+
grid-template-columns: minmax(17rem, 0.34fr) minmax(0, 1fr);
|
|
975
|
+
align-items: start;
|
|
976
|
+
gap: clamp(2rem, 5vw, 4rem);
|
|
868
977
|
}
|
|
869
|
-
|
|
870
|
-
|
|
978
|
+
|
|
979
|
+
.route-rail {
|
|
980
|
+
position: sticky;
|
|
981
|
+
inset-block-start: 5.75rem;
|
|
871
982
|
}
|
|
872
|
-
}
|
|
873
983
|
|
|
874
|
-
|
|
875
|
-
|
|
876
|
-
transform: rotate(360deg);
|
|
984
|
+
.steps ol {
|
|
985
|
+
grid-template-columns: 1fr;
|
|
877
986
|
}
|
|
878
|
-
}
|
|
879
987
|
|
|
880
|
-
|
|
988
|
+
.steps li {
|
|
989
|
+
min-height: 4.5rem;
|
|
990
|
+
grid-template-columns: 2rem minmax(0, 1fr);
|
|
991
|
+
align-items: start;
|
|
992
|
+
justify-items: start;
|
|
993
|
+
gap: 0.875rem;
|
|
994
|
+
text-align: start;
|
|
995
|
+
}
|
|
881
996
|
|
|
882
|
-
|
|
883
|
-
|
|
884
|
-
|
|
997
|
+
.steps li::before {
|
|
998
|
+
inset-block-start: auto;
|
|
999
|
+
inset-block-end: calc(100% - 1rem);
|
|
1000
|
+
inset-inline-start: 0.9375rem;
|
|
1001
|
+
width: 1px;
|
|
1002
|
+
height: 100%;
|
|
1003
|
+
}
|
|
1004
|
+
|
|
1005
|
+
.step-copy {
|
|
1006
|
+
padding-block-start: 0.125rem;
|
|
1007
|
+
}
|
|
1008
|
+
|
|
1009
|
+
.step-copy strong {
|
|
1010
|
+
font-size: 0.875rem;
|
|
1011
|
+
}
|
|
1012
|
+
|
|
1013
|
+
.step-copy small {
|
|
1014
|
+
display: block;
|
|
1015
|
+
color: var(--ink-soft);
|
|
1016
|
+
font-size: 0.75rem;
|
|
885
1017
|
}
|
|
1018
|
+
}
|
|
886
1019
|
|
|
887
|
-
|
|
888
|
-
|
|
889
|
-
|
|
1020
|
+
@media (max-width: 44rem) {
|
|
1021
|
+
.local-badge {
|
|
1022
|
+
font-size: 0.75rem;
|
|
890
1023
|
}
|
|
891
1024
|
|
|
892
|
-
.safety-note,
|
|
893
1025
|
.field-grid,
|
|
894
|
-
.review-grid {
|
|
1026
|
+
.review-grid section {
|
|
895
1027
|
grid-template-columns: 1fr;
|
|
896
1028
|
}
|
|
897
1029
|
|
|
898
|
-
.
|
|
899
|
-
|
|
1030
|
+
.wizard-shell {
|
|
1031
|
+
padding-block: 2rem 4rem;
|
|
900
1032
|
}
|
|
901
1033
|
|
|
902
|
-
.
|
|
903
|
-
|
|
1034
|
+
.wizard-intro > p {
|
|
1035
|
+
margin-block-start: 0.875rem;
|
|
1036
|
+
line-height: 1.5;
|
|
904
1037
|
}
|
|
905
1038
|
|
|
906
|
-
.
|
|
907
|
-
|
|
1039
|
+
.intro-ledger {
|
|
1040
|
+
margin-block-start: 1.25rem;
|
|
1041
|
+
}
|
|
1042
|
+
|
|
1043
|
+
.intro-ledger > span,
|
|
1044
|
+
.intro-ledger > span:first-child {
|
|
1045
|
+
padding: 0.75rem 0.5rem;
|
|
1046
|
+
}
|
|
1047
|
+
|
|
1048
|
+
.intro-ledger > span:first-child {
|
|
1049
|
+
padding-inline-start: 0;
|
|
1050
|
+
}
|
|
1051
|
+
|
|
1052
|
+
.intro-ledger strong {
|
|
1053
|
+
font-size: 0.75rem;
|
|
1054
|
+
line-height: 1.25;
|
|
1055
|
+
}
|
|
1056
|
+
|
|
1057
|
+
.intro-ledger small {
|
|
1058
|
+
display: none;
|
|
1059
|
+
}
|
|
1060
|
+
|
|
1061
|
+
.wizard-layout {
|
|
1062
|
+
margin-block-start: 1.25rem;
|
|
1063
|
+
gap: 0.875rem;
|
|
1064
|
+
}
|
|
1065
|
+
|
|
1066
|
+
.route-rail > header,
|
|
1067
|
+
.rail-boundary {
|
|
1068
|
+
display: none;
|
|
1069
|
+
}
|
|
1070
|
+
|
|
1071
|
+
.steps {
|
|
1072
|
+
padding: 0.875rem 0.75rem;
|
|
1073
|
+
}
|
|
1074
|
+
|
|
1075
|
+
.status-dock {
|
|
1076
|
+
margin-block-end: 0.75rem;
|
|
1077
|
+
gap: 0.5rem;
|
|
1078
|
+
}
|
|
1079
|
+
|
|
1080
|
+
.preview-badge {
|
|
1081
|
+
align-items: start;
|
|
1082
|
+
flex-direction: column;
|
|
1083
|
+
gap: 0.125rem;
|
|
1084
|
+
}
|
|
1085
|
+
|
|
1086
|
+
.preview-badge span {
|
|
1087
|
+
text-align: start;
|
|
1088
|
+
}
|
|
1089
|
+
|
|
1090
|
+
.panel-heading {
|
|
1091
|
+
grid-template-columns: 1fr;
|
|
1092
|
+
}
|
|
1093
|
+
|
|
1094
|
+
.panel-heading > span {
|
|
1095
|
+
grid-row: 1;
|
|
908
1096
|
}
|
|
909
1097
|
|
|
910
1098
|
.actions {
|
|
1099
|
+
align-items: stretch;
|
|
911
1100
|
flex-direction: column-reverse;
|
|
912
1101
|
}
|
|
913
1102
|
|
|
914
1103
|
.button,
|
|
915
1104
|
.button.ghost {
|
|
916
1105
|
width: 100%;
|
|
917
|
-
margin-
|
|
1106
|
+
margin-inline-end: 0;
|
|
918
1107
|
}
|
|
919
1108
|
|
|
920
|
-
.
|
|
1109
|
+
.review-grid section {
|
|
1110
|
+
gap: 0.75rem;
|
|
1111
|
+
}
|
|
1112
|
+
|
|
1113
|
+
.result-list > div {
|
|
921
1114
|
grid-template-columns: 1fr;
|
|
922
1115
|
gap: 0.25rem;
|
|
923
1116
|
}
|
|
924
1117
|
}
|
|
925
1118
|
|
|
1119
|
+
@media (max-width: 30rem) {
|
|
1120
|
+
.site-header {
|
|
1121
|
+
padding-inline: 0.75rem;
|
|
1122
|
+
}
|
|
1123
|
+
|
|
1124
|
+
.local-badge {
|
|
1125
|
+
max-width: 9rem;
|
|
1126
|
+
line-height: 1.25;
|
|
1127
|
+
text-align: end;
|
|
1128
|
+
}
|
|
1129
|
+
|
|
1130
|
+
.wizard-shell,
|
|
1131
|
+
.site-footer {
|
|
1132
|
+
width: min(calc(100% - 1rem), var(--page));
|
|
1133
|
+
}
|
|
1134
|
+
|
|
1135
|
+
.wizard-intro h1 {
|
|
1136
|
+
font-size: clamp(2.5rem, 14vw, 3.75rem);
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
.route-rail > header,
|
|
1140
|
+
.steps {
|
|
1141
|
+
padding-inline: 0.75rem;
|
|
1142
|
+
}
|
|
1143
|
+
|
|
1144
|
+
.step-copy strong {
|
|
1145
|
+
font-size: 0.6875rem;
|
|
1146
|
+
}
|
|
1147
|
+
|
|
1148
|
+
.rail-boundary {
|
|
1149
|
+
margin-inline: 0.75rem;
|
|
1150
|
+
}
|
|
1151
|
+
|
|
1152
|
+
.panel {
|
|
1153
|
+
padding: 1rem;
|
|
1154
|
+
}
|
|
1155
|
+
|
|
1156
|
+
.version-strip {
|
|
1157
|
+
grid-template-columns: 1fr;
|
|
1158
|
+
}
|
|
1159
|
+
|
|
1160
|
+
.version-strip span + span {
|
|
1161
|
+
border-block-start: 1px solid var(--line);
|
|
1162
|
+
border-inline-start: 0;
|
|
1163
|
+
}
|
|
1164
|
+
}
|
|
1165
|
+
|
|
1166
|
+
@keyframes panel-in {
|
|
1167
|
+
from {
|
|
1168
|
+
opacity: 0.72;
|
|
1169
|
+
transform: translateY(0.75rem);
|
|
1170
|
+
}
|
|
1171
|
+
to {
|
|
1172
|
+
opacity: 1;
|
|
1173
|
+
transform: translateY(0);
|
|
1174
|
+
}
|
|
1175
|
+
}
|
|
1176
|
+
|
|
1177
|
+
@keyframes spin {
|
|
1178
|
+
to {
|
|
1179
|
+
transform: rotate(360deg);
|
|
1180
|
+
}
|
|
1181
|
+
}
|
|
1182
|
+
|
|
926
1183
|
@media (prefers-reduced-motion: reduce) {
|
|
927
1184
|
html {
|
|
928
1185
|
scroll-behavior: auto;
|