@lchase/kiln 0.3.0 → 0.5.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.
package/assets/serve.css CHANGED
@@ -1,233 +1,452 @@
1
1
  /* kiln-serve */
2
+ /* Tokens and layout from the factory dashboard (plugins/factory/dashboard). Dark only. */
2
3
  :root {
3
- color-scheme: light;
4
- --bg: #efe6d6;
5
- --bg-2: #e7dcc8;
6
- --card: #fffaf3;
7
- --ink: #241c16;
8
- --muted: #6f6256;
9
- --line: #e0d3c2;
10
- --accent: #c2410c;
11
- --accent-ink: #fff7f2;
12
- --good: #1f6b45;
13
- --bad: #9b2c2c;
14
- --chip: #f3e7d6;
15
- --shadow: 0 1px 0 rgba(36, 28, 22, 0.04);
4
+ --bg: #1c2023;
5
+ --panel: #24292d;
6
+ --card: #24292d;
7
+ --card-hover: #2d3338;
8
+ --line: #2d3338;
9
+ --line-strong: #4a5259;
10
+ --ink: #fcfcfd;
11
+ --muted: #b7bcc1;
12
+ --faint: #888e92;
13
+ --live: #4bc4c9;
14
+ --pass: #90cea7;
15
+ --changes: #ffcc61;
16
+ --human: #ff6300;
17
+ --merged: #a794ff;
18
+ --must: #f7a89c;
19
+ --primary: #5405bd;
20
+ --code: #beb3ff;
21
+ --code-bg: #2d3338;
22
+ --shadow: 0 4px 8px -2px #00000066, 0 8px 16px 0 #00000059;
23
+ --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
16
24
  }
17
-
18
25
  * { box-sizing: border-box; }
19
-
26
+ [hidden] { display: none !important; }
27
+ html, body { margin: 0; }
28
+ html { background: var(--bg); }
20
29
  body {
21
- margin: 0;
22
- background:
23
- radial-gradient(1200px 400px at 10% -10%, #f7efe2, transparent 50%),
24
- var(--bg);
30
+ min-height: 100vh;
31
+ display: flex;
32
+ flex-direction: column;
33
+ background: var(--bg);
25
34
  color: var(--ink);
26
- font: 15px/1.45 ui-sans-serif, system-ui, sans-serif;
35
+ font: 14px/20px Roboto, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
36
+ -webkit-font-smoothing: antialiased;
37
+ padding-bottom: 80px;
27
38
  }
39
+ button { font: inherit; color: inherit; }
40
+ a { color: var(--code); }
28
41
 
29
- a { color: inherit; }
30
-
31
- .top {
42
+ header {
32
43
  display: flex;
33
- align-items: baseline;
34
- gap: 1.25rem;
35
- padding: 1rem 1.5rem;
44
+ align-items: center;
45
+ justify-content: space-between;
46
+ gap: 16px;
47
+ flex-wrap: wrap;
48
+ min-height: 56px;
49
+ padding: 0 24px;
36
50
  border-bottom: 1px solid var(--line);
37
- background: rgba(255, 250, 243, 0.9);
38
- position: sticky;
39
- top: 0;
40
51
  }
41
-
42
- .kiln-mark {
43
- font-weight: 700;
44
- letter-spacing: 0.08em;
45
- text-transform: uppercase;
46
- text-decoration: none;
47
- color: var(--accent);
52
+ .brand { display: flex; align-items: center; gap: 12px; }
53
+ .logo {
54
+ width: 28px;
55
+ height: 28px;
56
+ border-radius: 50%;
57
+ background: var(--primary);
58
+ display: inline-flex;
59
+ align-items: center;
60
+ justify-content: center;
48
61
  }
49
-
50
- nav { display: flex; gap: 0.9rem; }
51
-
52
- nav a {
53
- text-decoration: none;
62
+ .ver { font-size: 12px; line-height: 16px; color: var(--faint); align-self: flex-end; margin: 0 0 4px -4px; }
63
+ h1 { margin: 0; font-size: 18px; line-height: 24px; font-weight: 500; }
64
+ .status { margin-left: auto; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); }
65
+ .status::before {
66
+ content: "";
67
+ display: inline-block;
68
+ width: 8px;
69
+ height: 8px;
70
+ border-radius: 50%;
71
+ background: var(--live);
72
+ margin-right: 8px;
73
+ vertical-align: 0;
74
+ animation: pulse 1.6s ease-in-out infinite;
75
+ }
76
+ .status.err { color: var(--human); }
77
+ .status.err::before { background: var(--human); animation: none; }
78
+
79
+ .repos { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px 24px 0; }
80
+ .repo-f {
81
+ display: inline-flex;
82
+ align-items: center;
83
+ gap: 6px;
84
+ height: 28px;
85
+ padding: 0 12px;
86
+ border: 1px solid var(--line-strong);
87
+ border-radius: 4px;
88
+ background: none;
54
89
  color: var(--muted);
90
+ font: 12px/16px var(--mono);
91
+ cursor: pointer;
55
92
  }
56
-
57
- nav a[aria-current="page"] {
93
+ .repo-f:hover { background: var(--card-hover); color: var(--ink); }
94
+ .repo-f[aria-pressed="true"] {
95
+ border-color: transparent;
96
+ background: color-mix(in srgb, var(--merged) 22%, transparent);
58
97
  color: var(--ink);
59
- font-weight: 650;
60
98
  }
61
-
62
- .refresh {
63
- margin: 0 0 0 auto;
64
- color: var(--muted);
65
- font-size: 0.85rem;
99
+ .repo-f .n { color: var(--faint); }
100
+
101
+ .board {
102
+ flex: 1;
103
+ display: grid;
104
+ grid-template-columns: var(--cols, repeat(8, minmax(0, 1fr)));
105
+ gap: 16px;
106
+ padding: 24px;
107
+ align-items: start;
66
108
  }
67
-
68
- main {
69
- width: min(980px, calc(100% - 2rem));
70
- margin: 1.25rem auto 3rem;
109
+ .col { min-width: 0; }
110
+ .col-head {
111
+ display: flex;
112
+ align-items: baseline;
113
+ gap: 8px;
114
+ padding: 0 0 8px;
115
+ border-bottom: 1px solid var(--line);
116
+ margin-bottom: 12px;
71
117
  }
72
-
73
- h1 {
74
- font-size: 1.35rem;
75
- font-weight: 650;
76
- margin: 0 0 0.35rem;
118
+ .col-head h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
119
+ .col-head .who {
120
+ font-family: var(--mono);
121
+ font-size: 12px;
122
+ line-height: 16px;
123
+ color: var(--faint);
124
+ white-space: nowrap;
125
+ overflow: hidden;
126
+ text-overflow: ellipsis;
77
127
  }
78
-
79
- .lede {
80
- margin: 0 0 1.25rem;
81
- color: var(--muted);
128
+ .col-head .count { margin-left: auto; font-family: var(--mono); font-size: 12px; color: var(--muted); }
129
+ .col.human h2 { color: var(--human); }
130
+ .col.merged h2 { color: var(--merged); }
131
+ .col.queued h2 { color: var(--muted); }
132
+ .col.queued .who,
133
+ .col.queued .count { color: var(--faint); }
134
+ .col:not(.slim) .slim-face { display: none; }
135
+ .col.slim {
136
+ align-self: stretch;
137
+ min-height: 320px;
138
+ display: flex;
139
+ flex-direction: column;
140
+ align-items: center;
141
+ gap: 12px;
142
+ padding: 12px 0;
143
+ border: 1px solid var(--line);
144
+ border-radius: 4px;
82
145
  }
83
-
146
+ .col.slim .full { display: none; }
147
+ .col.slim .slim-face { display: flex; flex-direction: column; align-items: center; gap: 12px; }
148
+ .col.slim .v { writing-mode: vertical-rl; display: flex; align-items: center; gap: 8px; }
149
+ .col.slim h2 { margin: 0; font-size: 14px; line-height: 20px; font-weight: 500; white-space: nowrap; }
150
+ .col.slim .who { font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--faint); white-space: nowrap; }
151
+ .col.slim .count { font-family: var(--mono); font-size: 12px; color: var(--muted); }
84
152
  .empty {
85
- padding: 1.25rem;
86
- background: var(--card);
87
- border: 1px solid var(--line);
88
- border-radius: 12px;
153
+ color: var(--faint);
154
+ font-size: 12px;
155
+ line-height: 16px;
156
+ padding: 20px 12px;
157
+ border: 1px dashed var(--line);
158
+ border-radius: 4px;
159
+ text-align: center;
89
160
  }
90
161
 
91
- .card, .job {
162
+ .card {
163
+ display: block;
164
+ width: 100%;
165
+ text-align: left;
166
+ cursor: pointer;
92
167
  background: var(--card);
93
- border: 1px solid var(--line);
94
- border-radius: 12px;
95
- box-shadow: var(--shadow);
96
- padding: 1rem 1.1rem 1.05rem;
97
- margin: 0 0 0.85rem;
168
+ border: 1px solid var(--line-strong);
169
+ border-radius: 4px;
170
+ padding: 12px;
171
+ margin-bottom: 12px;
98
172
  }
99
-
100
- .card h2, .job h3 {
101
- margin: 0;
102
- font-size: 1.15rem;
103
- font-weight: 650;
104
- }
105
-
106
- .meta, .deps, .links, .why {
173
+ .card:hover { border-color: var(--faint); box-shadow: var(--shadow); }
174
+ .card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--merged); }
175
+ .card.human { border: 2px solid var(--human); padding: 11px; }
176
+ .card.merged { background: var(--bg); border-color: var(--line); }
177
+ .card.merged .title { color: var(--muted); }
178
+ .card.queued,
179
+ .card.retrying { background: var(--bg); border-color: var(--line); }
180
+ .card.queued .title,
181
+ .card.retrying .title { color: var(--muted); font-weight: 400; }
182
+ .card.queued .num,
183
+ .card.queued .branch,
184
+ .card.queued .note,
185
+ .card.queued .deps,
186
+ .card.retrying .num,
187
+ .card.retrying .branch,
188
+ .card.retrying .note,
189
+ .card.retrying .deps,
190
+ .card.retrying .meta { color: var(--faint); }
191
+ .card.queued:hover,
192
+ .card.retrying:hover { border-color: var(--line-strong); }
193
+ .card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
194
+ .num {
195
+ font-family: var(--mono);
196
+ font-size: 12px;
197
+ line-height: 16px;
107
198
  color: var(--muted);
199
+ white-space: nowrap;
200
+ overflow: hidden;
201
+ text-overflow: ellipsis;
108
202
  }
109
-
110
- .meta { margin: 0.25rem 0 0.75rem; }
111
-
112
- .meta code, .deps a {
113
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
114
- font-size: 0.86em;
203
+ .card-top .num { flex: 1; min-width: 0; }
204
+ .pulse {
205
+ width: 8px;
206
+ height: 8px;
207
+ border-radius: 50%;
208
+ background: var(--live);
209
+ flex: none;
210
+ animation: pulse 1.6s ease-in-out infinite;
115
211
  }
116
-
117
- .prompt {
118
- margin: 0 0 0.75rem;
119
- padding: 0.7rem 0.8rem;
120
- background: #fff;
121
- border-left: 3px solid var(--accent);
122
- white-space: pre-wrap;
212
+ .flag {
213
+ margin-left: auto;
214
+ padding: 0 6px;
215
+ border-radius: 4px;
216
+ background: color-mix(in srgb, var(--human) 18%, transparent);
217
+ color: var(--human);
218
+ font-size: 11px;
219
+ font-weight: 500;
220
+ letter-spacing: .02em;
221
+ text-transform: uppercase;
222
+ white-space: nowrap;
123
223
  }
124
-
125
- .facts {
126
- list-style: none;
127
- margin: 0 0 0.75rem;
128
- padding: 0;
224
+ .repo { margin: -2px 0 6px; }
225
+ .title { font-size: 14px; line-height: 20px; margin: 0 0 6px; font-weight: 500; }
226
+ .branch {
227
+ font-family: var(--mono);
228
+ font-size: 12px;
229
+ line-height: 16px;
230
+ color: var(--faint);
231
+ white-space: nowrap;
232
+ overflow: hidden;
233
+ text-overflow: ellipsis;
129
234
  }
130
-
131
- .facts li { margin: 0.2rem 0; }
132
-
133
- .facts .name {
134
- display: inline-block;
135
- min-width: 5.5rem;
136
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
137
- font-size: 0.86em;
235
+ .rounds { margin-top: 12px; display: grid; gap: 4px; }
236
+ .round { display: grid; grid-template-columns: 20px repeat(4, minmax(0, 1fr)); gap: 4px; align-items: center; }
237
+ .round .r { font-family: var(--mono); font-size: 11px; color: var(--faint); }
238
+ .chip {
239
+ text-align: center;
240
+ font-family: var(--mono);
241
+ font-size: 11px;
242
+ line-height: 16px;
243
+ padding: 1px 0;
244
+ border-radius: 4px;
245
+ border: 1px dashed var(--line-strong);
138
246
  color: var(--muted);
139
247
  }
140
-
141
- h4 {
142
- margin: 0.4rem 0 0.2rem;
143
- font-size: 0.78rem;
144
- letter-spacing: 0.06em;
145
- text-transform: uppercase;
248
+ .chip.wait { animation: pulse 1.6s ease-in-out infinite; }
249
+ .chip.PASS { border-color: transparent; color: var(--pass); background: color-mix(in srgb, var(--pass) 18%, transparent); }
250
+ .chip.CHANGES { border-color: transparent; color: var(--changes); background: color-mix(in srgb, var(--changes) 18%, transparent); }
251
+ .note {
252
+ margin-top: 8px;
253
+ padding-top: 8px;
254
+ border-top: 1px solid var(--line-strong);
255
+ font-size: 12px;
256
+ line-height: 16px;
146
257
  color: var(--muted);
258
+ overflow-wrap: anywhere;
259
+ }
260
+ .deps { margin: 8px 0 0; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }
261
+ .meta { margin-top: 8px; font-family: var(--mono); font-size: 12px; line-height: 16px; color: var(--muted); overflow-wrap: anywhere; }
262
+ .meta time { font-family: inherit; }
263
+ @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
264
+ @media (prefers-reduced-motion: reduce) {
265
+ .pulse, .chip.wait, .status::before { animation: none; }
147
266
  }
148
267
 
149
- .links a { margin-right: 0.9rem; }
150
-
151
- .actions { display: flex; gap: 0.5rem; margin-top: 0.85rem; }
152
-
153
- button {
154
- font: inherit;
268
+ .toolbar {
269
+ position: fixed;
270
+ left: 50%;
271
+ bottom: 16px;
272
+ transform: translateX(-50%);
273
+ display: flex;
274
+ gap: 4px;
275
+ padding: 6px;
276
+ background: var(--panel);
277
+ border: 1px solid var(--line-strong);
278
+ border-radius: 12px;
279
+ box-shadow: var(--shadow);
280
+ z-index: 2;
281
+ }
282
+ .tool {
283
+ position: relative;
284
+ width: 40px;
285
+ height: 40px;
286
+ display: inline-flex;
287
+ align-items: center;
288
+ justify-content: center;
289
+ border: 0;
155
290
  border-radius: 8px;
156
- padding: 0.4rem 0.85rem;
291
+ background: none;
292
+ color: var(--muted);
157
293
  cursor: pointer;
158
294
  }
159
-
160
- button.approve {
161
- background: var(--accent);
162
- color: var(--accent-ink);
163
- border: 1px solid var(--accent);
295
+ .tool:hover, .tool:focus-visible { background: var(--card-hover); color: var(--ink); }
296
+ .tool svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
297
+ .tool::after {
298
+ content: attr(data-tip);
299
+ position: absolute;
300
+ bottom: calc(100% + 12px);
301
+ left: 50%;
302
+ transform: translateX(-50%);
303
+ padding: 4px 8px;
304
+ border-radius: 4px;
305
+ background: var(--ink);
306
+ color: var(--bg);
307
+ font: 12px/16px var(--mono);
308
+ white-space: nowrap;
309
+ opacity: 0;
310
+ pointer-events: none;
164
311
  }
312
+ .tool:hover::after, .tool:focus-visible::after { opacity: 1; }
313
+ .toolbar .sep { width: 1px; margin: 6px 4px; background: var(--line-strong); }
165
314
 
166
- button.reject {
315
+ .scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); opacity: 0; pointer-events: none; transition: opacity .2s; z-index: 3; }
316
+ .drawer {
317
+ position: fixed;
318
+ top: 0;
319
+ right: 0;
320
+ bottom: 0;
321
+ width: min(900px, 100vw);
322
+ background: var(--panel);
323
+ border-left: 1px solid var(--line-strong);
324
+ box-shadow: 0 12px 16px -4px #00000080, 0 24px 32px 0 #00000080;
325
+ transform: translateX(100%);
326
+ transition: transform .22s ease;
327
+ z-index: 4;
328
+ }
329
+ body.open .scrim { opacity: 1; pointer-events: auto; }
330
+ body.open .drawer { transform: none; }
331
+ .sheet { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); }
332
+ .d-head { padding: 20px 24px 16px; border-bottom: 1px solid var(--line-strong); position: relative; }
333
+ .d-head h3 { margin: 4px 48px 4px 0; font-size: 22px; line-height: 28px; font-weight: 500; }
334
+ .d-head .num { white-space: normal; overflow: visible; text-overflow: unset; }
335
+ .close {
336
+ position: absolute;
337
+ top: 12px;
338
+ right: 16px;
339
+ width: 44px;
340
+ height: 44px;
341
+ border-radius: 50%;
342
+ border: 0;
343
+ background: none;
344
+ cursor: pointer;
345
+ color: var(--ink);
346
+ font-size: 24px;
347
+ line-height: 1;
348
+ }
349
+ .close:hover { background: var(--card-hover); }
350
+ .d-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
351
+ .d-actions form { margin: 0; }
352
+ .d-actions button {
353
+ height: 28px;
354
+ padding: 0 12px;
355
+ border-radius: 4px;
356
+ border: 1px solid var(--line-strong);
167
357
  background: transparent;
168
358
  color: var(--ink);
169
- border: 1px solid var(--line);
359
+ font: 12px/16px var(--mono);
360
+ cursor: pointer;
170
361
  }
171
-
172
- .group { margin: 0 0 1.4rem; }
173
-
174
- .group h2 {
175
- font-size: 0.95rem;
176
- margin: 0 0 0.45rem;
177
- display: flex;
178
- gap: 0.5rem;
179
- align-items: baseline;
362
+ .d-actions button:hover { background: var(--card-hover); }
363
+ .d-actions .approve button { color: var(--pass); border-color: transparent; background: color-mix(in srgb, var(--pass) 18%, transparent); }
364
+ .d-actions .reject button { color: var(--human); border-color: transparent; background: color-mix(in srgb, var(--human) 18%, transparent); }
365
+ .d-body { display: grid; grid-template-columns: 200px minmax(0, 1fr); min-height: 0; }
366
+ .files { border-right: 1px solid var(--line-strong); padding: 16px 12px; overflow-y: auto; }
367
+ .group {
368
+ font-size: 12px;
369
+ line-height: 16px;
370
+ font-weight: 500;
371
+ text-transform: uppercase;
372
+ letter-spacing: .02em;
373
+ color: var(--faint);
374
+ margin: 16px 0 4px;
375
+ padding: 0 12px;
180
376
  }
181
-
182
- .count {
183
- color: var(--muted);
184
- font-weight: 450;
185
- font-size: 0.85rem;
377
+ .group:first-child { margin-top: 0; }
378
+ .file {
379
+ display: flex;
380
+ align-items: center;
381
+ gap: 10px;
382
+ width: 100%;
383
+ text-align: left;
384
+ text-decoration: none;
385
+ background: none;
386
+ border: 0;
387
+ border-radius: 4px;
388
+ padding: 6px 12px;
389
+ cursor: pointer;
390
+ font-family: var(--mono);
391
+ font-size: 13px;
392
+ line-height: 20px;
393
+ color: var(--ink);
186
394
  }
187
-
188
- .chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0.45rem 0; }
189
-
190
- .chip {
191
- background: var(--chip);
192
- border-radius: 999px;
193
- padding: 0.1rem 0.5rem;
194
- font-size: 0.78rem;
395
+ .file:hover { background: var(--card-hover); }
396
+ .file.on { background: var(--code-bg); }
397
+ .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
398
+ .dot.good { background: var(--pass); }
399
+ .dot.warn { background: var(--changes); }
400
+ .dot.stop { background: var(--human); }
401
+ .doc { overflow-y: auto; padding: 24px 32px 64px; min-width: 0; }
402
+ .src { display: none; }
403
+
404
+ .md { max-width: 660px; line-height: 20px; }
405
+ .md h1, .md h2, .md h3 { line-height: 1.3; margin: 1.5em 0 .5em; font-weight: 500; }
406
+ .md h1 { font-size: 18px; }
407
+ .md h2 { font-size: 12px; text-transform: uppercase; letter-spacing: .02em; color: var(--muted); }
408
+ .md h3 { font-size: 13px; color: var(--muted); }
409
+ .md > :first-child { margin-top: 0; }
410
+ .md p, .md ul, .md ol, .md pre, .md table { margin: 0 0 1em; }
411
+ .md ul, .md ol { padding-left: 1.3em; }
412
+ .md li { margin: .25em 0; }
413
+ .md code { font-family: var(--mono); font-size: 13px; background: var(--code-bg); color: var(--code); padding: 1px 6px; border-radius: 4px; }
414
+ .md pre { background: var(--bg); border: 1px solid var(--line-strong); border-radius: 4px; padding: 12px 16px; overflow-x: auto; }
415
+ .md pre code { background: none; color: var(--ink); padding: 0; }
416
+ .md table { border-collapse: collapse; font-size: 13px; }
417
+ .md th, .md td { border: 1px solid var(--line-strong); padding: 6px 10px; text-align: left; }
418
+ .verdict {
419
+ display: inline-flex;
420
+ align-items: center;
421
+ height: 24px;
422
+ font-family: var(--mono);
423
+ font-size: 12px;
424
+ font-weight: 500;
425
+ letter-spacing: .02em;
426
+ padding: 0 10px;
427
+ border-radius: 4px;
428
+ margin-bottom: 16px;
195
429
  }
196
-
197
- .chip.state-needs-human,
198
- .chip.state-blocked { background: #f6d7b8; }
199
-
200
- .chip.state-failed,
201
- .chip.state-rejected,
202
- .chip.state-dead,
203
- .chip.state-invalid { background: #f3d0d0; color: var(--bad); }
204
-
205
- .chip.state-approved,
206
- .chip.state-done,
207
- .chip.state-in-review { background: #d7eadf; color: var(--good); }
208
-
209
- .chip.state-running,
210
- .chip.state-queued { background: #d9e4f2; }
211
-
212
- .deps { margin: 0.35rem 0; }
213
-
214
- .details {
215
- margin: 0.4rem 0 0;
216
- padding: 0;
217
- list-style: none;
218
- color: var(--muted);
430
+ .verdict.good { color: var(--pass); background: color-mix(in srgb, var(--pass) 18%, transparent); }
431
+ .verdict.warn { color: var(--changes); background: color-mix(in srgb, var(--changes) 18%, transparent); }
432
+ .verdict.stop { color: var(--human); background: color-mix(in srgb, var(--human) 18%, transparent); }
433
+
434
+ .back { display: inline-block; margin: 24px 24px 0; }
435
+ .page { padding: 0 24px 48px; }
436
+ .text { font-family: var(--mono); font-size: 13px; white-space: pre-wrap; overflow-wrap: anywhere; }
437
+
438
+ @media (max-width: 1100px) {
439
+ .board { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 24px; }
440
+ .col.slim { align-self: start; min-height: 0; flex-direction: row; padding: 8px 12px; }
441
+ .col.slim .slim-face { flex-direction: row; }
442
+ .col.slim .v { writing-mode: horizontal-tb; }
219
443
  }
220
-
221
- .details li.bad { color: var(--bad); }
222
-
223
- pre.text {
224
- white-space: pre-wrap;
225
- word-break: break-word;
226
- background: var(--card);
227
- border: 1px solid var(--line);
228
- border-radius: 12px;
229
- padding: 1rem;
230
- margin: 0;
444
+ @media (max-width: 640px) {
445
+ header, .repos { padding-left: 16px; padding-right: 16px; }
446
+ .board { grid-template-columns: 1fr; padding: 16px; }
447
+ .d-body { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
448
+ .files { border-right: 0; border-bottom: 1px solid var(--line-strong); display: flex; gap: 4px; overflow-x: auto; padding: 8px; }
449
+ .group { display: none; }
450
+ .file { width: auto; white-space: nowrap; }
451
+ .doc { padding: 16px; }
231
452
  }
232
-
233
- .back { display: inline-block; margin-bottom: 0.75rem; }