artshelf 0.5.0 → 0.7.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/docs/site.css CHANGED
@@ -1,639 +1,824 @@
1
+ /* Artshelf docs — "Ledger" design */
2
+
1
3
  :root {
2
4
  color-scheme: light;
3
- --bg: #f6f7f4;
4
- --panel: #ffffff;
5
- --panel-strong: #eef4ef;
6
- --nav-bg: #fbfcf8;
7
- --ink: #141713;
8
- --body-ink: #30382f;
9
- --muted: #667064;
10
- --line: #d9dfd5;
11
- --line-soft: #eef1eb;
12
- --code-bg: #eef1eb;
13
- --code-ink: #182018;
14
- --pre-bg: #0d1420;
15
- --pre-ink: #edf7ea;
16
- --pre-border: #1e293b;
17
- --accent: #1d7b5b;
18
- --accent-strong: #105d43;
19
- --blue: #2364aa;
20
- --amber: #9a5b11;
21
- --red: #9e3b3b;
22
- --warn: #fff8df;
23
- --shadow: 0 18px 48px rgba(20, 23, 19, 0.08);
24
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
5
+ --paper: #f5f0e4;
6
+ --raised: #fcf9f1;
7
+ --sunken: #ece5d2;
8
+ --ink: #22271f;
9
+ --body-ink: #3a4136;
10
+ --soft: #6b7263;
11
+ --faint: #99a08e;
12
+ --rule: #d8d0ba;
13
+ --rule-soft: #e6dfcb;
14
+ --green: #1c6b4d;
15
+ --green-deep: #0f5238;
16
+ --green-wash: #e3eedd;
17
+ --red: #a23d2e;
18
+ --red-wash: #f5e6df;
19
+ --amber: #8a5c14;
20
+ --amber-wash: #f2e9d0;
21
+ --term-bg: #11190f;
22
+ --term-ink: #d9e8cf;
23
+ --term-soft: #8da683;
24
+ --term-rule: #25341f;
25
+ --shadow: 0 14px 40px rgba(46, 42, 26, 0.12);
26
+ --fs-text: 1.25rem; /* ~20px: body, nav, toc, prose spans */
27
+ --fs-text-sm: 1.1rem; /* secondary text: nav children, toc, tables */
28
+ --fs-mono: 0.95rem; /* commands and mono accents beside 20px serif */
29
+ --fs-label: 0.75rem; /* small-caps micro labels (stamps, kickers) */
30
+ --serif: "Newsreader", "Iowan Old Style", Georgia, serif;
31
+ --display: "Fraunces", "Newsreader", Georgia, serif;
32
+ --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
25
33
  }
26
34
 
27
35
  html[data-theme="dark"] {
28
36
  color-scheme: dark;
29
- --bg: #090b09;
30
- --panel: #111610;
31
- --panel-strong: #172117;
32
- --nav-bg: #0d100c;
33
- --ink: #f4f7ef;
34
- --body-ink: #d7dfd0;
35
- --muted: #9da795;
36
- --line: #293323;
37
- --line-soft: #1d261a;
38
- --code-bg: #1c2519;
39
- --code-ink: #e9f2e2;
40
- --pre-bg: #050812;
41
- --pre-ink: #edf7ea;
42
- --pre-border: #20283a;
43
- --accent: #62d7a3;
44
- --accent-strong: #95efbf;
45
- --blue: #8ebcff;
46
- --amber: #efc66f;
47
- --red: #f28b8b;
48
- --warn: #2b2412;
49
- --shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
50
- }
51
-
52
- * {
53
- box-sizing: border-box;
54
- }
37
+ --paper: #0d110c;
38
+ --raised: #151b13;
39
+ --sunken: #090c08;
40
+ --ink: #eaeedd;
41
+ --body-ink: #c7cfb6;
42
+ --soft: #909a7f;
43
+ --faint: #67705a;
44
+ --rule: #2a3424;
45
+ --rule-soft: #1d2519;
46
+ --green: #6fd3a3;
47
+ --green-deep: #93e8bf;
48
+ --green-wash: #14241a;
49
+ --red: #e08a76;
50
+ --red-wash: #281512;
51
+ --amber: #d9ab5d;
52
+ --amber-wash: #251d0e;
53
+ --term-bg: #090d07;
54
+ --term-ink: #d9e8cf;
55
+ --term-rule: #1d2917;
56
+ --shadow: 0 16px 44px rgba(0, 0, 0, 0.45);
57
+ }
58
+
59
+ * { box-sizing: border-box; }
60
+
61
+ html { scroll-behavior: smooth; scroll-padding-top: 90px; }
55
62
 
56
63
  body {
57
64
  margin: 0;
58
- background: var(--bg);
59
- color: var(--ink);
60
- font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
61
- font-feature-settings: "cv02", "cv03", "cv04", "cv11";
62
- line-height: 1.65;
65
+ background:
66
+ radial-gradient(1200px 500px at 70% -10%, rgba(28, 107, 77, 0.05), transparent 70%),
67
+ var(--paper);
68
+ color: var(--body-ink);
69
+ font-family: var(--serif);
70
+ font-size: var(--fs-text);
71
+ line-height: 1.7;
63
72
  -webkit-font-smoothing: antialiased;
64
- overflow-x: hidden;
65
73
  }
66
74
 
67
- a {
68
- color: var(--accent-strong);
69
- font-weight: 650;
70
- text-decoration-thickness: 1px;
71
- text-underline-offset: 0.2em;
72
- }
75
+ ::selection { background: var(--green); color: var(--paper); }
73
76
 
74
- code,
75
- pre {
76
- font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
77
- }
77
+ a { color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
78
+ a:hover { color: var(--green); }
78
79
 
79
- code {
80
- border: 1px solid var(--line);
81
- border-radius: 5px;
82
- background: var(--code-bg);
83
- color: var(--code-ink);
84
- padding: 0.08em 0.35em;
85
- font-size: 0.88em;
80
+ .skip {
81
+ position: absolute;
82
+ left: -999px;
83
+ top: 8px;
84
+ z-index: 99;
85
+ background: var(--raised);
86
+ padding: 8px 14px;
86
87
  }
88
+ .skip:focus { left: 8px; }
87
89
 
88
- pre {
89
- width: 100%;
90
- max-width: 100%;
91
- min-width: 0;
92
- overflow: auto;
93
- border: 1px solid var(--pre-border);
94
- border-radius: 8px;
95
- background: var(--pre-bg);
96
- color: var(--pre-ink);
97
- padding: 14px 18px;
98
- font-size: 0.9rem;
99
- font-weight: 520;
100
- line-height: 1.6;
101
- scrollbar-color: #334155 transparent;
102
- scrollbar-width: thin;
103
- }
90
+ /* ---------- masthead ---------- */
104
91
 
105
- pre code {
106
- display: block;
107
- width: max-content;
108
- min-width: 100%;
109
- border: 0;
110
- background: transparent;
111
- color: inherit;
112
- padding: 0;
113
- font-size: 1em;
114
- white-space: pre;
92
+ .masthead {
93
+ position: sticky;
94
+ top: 0;
95
+ z-index: 40;
96
+ background: color-mix(in srgb, var(--paper) 88%, transparent);
97
+ backdrop-filter: blur(10px);
98
+ border-bottom: 1px solid var(--rule);
115
99
  }
116
100
 
117
- .docs-shell {
118
- display: grid;
119
- grid-template-columns: 248px minmax(0, 1fr);
120
- min-height: 100vh;
101
+ .masthead::after {
102
+ content: "";
103
+ display: block;
104
+ border-bottom: 1px solid var(--rule);
105
+ margin-top: 2px;
121
106
  }
122
107
 
123
- .global-nav {
124
- position: sticky;
125
- top: 0;
126
- display: grid;
127
- grid-template-columns: minmax(0, 1fr) auto;
128
- align-content: start;
129
- column-gap: 10px;
130
- height: 100vh;
131
- overflow: auto;
132
- border-right: 1px solid var(--line);
133
- background: var(--nav-bg);
134
- padding: 24px 22px;
135
- scrollbar-color: var(--line) transparent;
136
- scrollbar-width: thin;
108
+ .masthead-inner {
109
+ display: flex;
110
+ align-items: center;
111
+ gap: 14px;
112
+ width: min(1340px, 100% - 48px);
113
+ margin-inline: auto;
114
+ padding: 13px 0 11px;
137
115
  }
138
116
 
139
- .site-mark {
140
- display: grid;
141
- gap: 4px;
142
- min-width: 0;
143
- margin-bottom: 18px;
144
- border-bottom: 1px solid var(--line);
145
- padding: 0 0 18px;
117
+ .brand {
118
+ font-family: var(--display);
119
+ font-weight: 620;
120
+ font-style: italic;
121
+ font-size: 1.4rem;
122
+ color: var(--ink);
146
123
  text-decoration: none;
124
+ letter-spacing: 0.01em;
147
125
  }
148
126
 
149
- .site-mark strong {
150
- color: var(--ink);
151
- font-size: 1.08rem;
152
- font-weight: 700;
153
- line-height: 1.1;
127
+ .brand-tag {
128
+ font-family: var(--mono);
129
+ font-style: normal;
130
+ font-weight: 450;
131
+ font-size: var(--fs-label);
132
+ color: var(--soft);
133
+ letter-spacing: 0.16em;
134
+ text-transform: uppercase;
135
+ margin-left: 9px;
136
+ vertical-align: 0.18em;
154
137
  }
155
138
 
156
- .site-mark span,
157
- .nav-section-title,
158
- .breadcrumbs {
159
- color: var(--muted);
160
- font-size: 0.74rem;
161
- }
162
139
 
163
- .nav-section {
164
- display: grid;
165
- grid-column: 1 / -1;
166
- gap: 7px;
167
- margin-bottom: 18px;
140
+ .search-btn {
141
+ display: flex;
142
+ align-items: center;
143
+ gap: 26px;
144
+ margin-left: auto;
145
+ border: 1px solid var(--rule);
146
+ border-radius: 6px;
147
+ background: var(--raised);
148
+ color: var(--soft);
149
+ font-family: var(--mono);
150
+ font-size: 0.88rem;
151
+ padding: 7px 9px 7px 13px;
152
+ cursor: pointer;
168
153
  }
169
-
170
- .nav-scroll {
171
- display: contents;
154
+ .search-btn:hover { border-color: var(--soft); color: var(--ink); }
155
+ .search-btn kbd {
156
+ font-family: var(--mono);
157
+ font-size: 0.78rem;
158
+ border: 1px solid var(--rule);
159
+ border-radius: 4px;
160
+ background: var(--sunken);
161
+ padding: 1px 7px;
172
162
  }
173
163
 
174
- .nav-section-title {
175
- margin: 0;
176
- font-weight: 700;
177
- letter-spacing: 0;
178
- text-transform: uppercase;
179
- }
164
+ .masthead-tools { display: flex; align-items: center; gap: 12px; }
180
165
 
181
- .global-nav a:not(.site-mark) {
182
- display: block;
183
- border-radius: 6px;
184
- padding: 6px 10px;
185
- color: var(--body-ink);
186
- font-size: 0.9rem;
187
- line-height: 1.4;
166
+ .masthead-tools .gh {
167
+ font-family: var(--mono);
168
+ font-size: 0.85rem;
169
+ letter-spacing: 0.04em;
188
170
  text-decoration: none;
171
+ color: var(--soft);
189
172
  }
173
+ .masthead-tools .gh:hover { color: var(--ink); }
190
174
 
191
- .global-nav a:not(.site-mark):hover,
192
- .global-nav a[aria-current="page"] {
193
- background: var(--panel-strong);
194
- color: var(--accent-strong);
195
- }
196
-
197
- .theme-toggle {
175
+ .theme-btn,
176
+ .menu-btn {
198
177
  display: inline-flex;
199
- width: 34px;
200
- height: 34px;
201
- flex: 0 0 auto;
202
178
  align-items: center;
203
179
  justify-content: center;
204
- border: 1px solid var(--line);
205
- border-radius: 8px;
206
- background: var(--panel);
207
- color: var(--muted);
180
+ width: 32px;
181
+ height: 32px;
182
+ border: 1px solid var(--rule);
183
+ border-radius: 6px;
184
+ background: var(--raised);
185
+ color: var(--soft);
208
186
  cursor: pointer;
209
187
  padding: 0;
210
188
  }
189
+ .theme-btn:hover,
190
+ .menu-btn:hover { color: var(--ink); border-color: var(--soft); }
191
+ .theme-btn svg, .menu-btn svg { width: 15px; height: 15px; display: block; }
192
+ .theme-btn .icon-sun, html[data-theme="dark"] .theme-btn .icon-moon { display: none; }
193
+ html[data-theme="dark"] .theme-btn .icon-sun { display: block; }
211
194
 
212
- .theme-toggle:hover {
213
- border-color: var(--ink);
214
- color: var(--ink);
215
- }
195
+ .menu-btn { display: none; }
216
196
 
217
- .theme-toggle svg {
218
- display: block;
219
- width: 16px;
220
- height: 16px;
221
- }
197
+ /* ---------- frame ---------- */
222
198
 
223
- .theme-toggle .theme-icon-sun,
224
- html[data-theme="dark"] .theme-toggle .theme-icon-moon {
225
- display: none;
199
+ .frame {
200
+ display: grid;
201
+ grid-template-columns: 252px minmax(0, 1fr) 232px;
202
+ gap: 56px;
203
+ width: min(1340px, 100% - 48px);
204
+ margin-inline: auto;
205
+ padding: 40px 0 90px;
226
206
  }
227
207
 
228
- html[data-theme="dark"] .theme-toggle .theme-icon-sun {
229
- display: block;
230
- }
208
+ /* ---------- sidebar ---------- */
231
209
 
232
- .docs-content {
233
- min-width: 0;
234
- max-width: 100vw;
235
- overflow-x: clip;
210
+ .sidebar {
211
+ position: sticky;
212
+ top: 92px;
213
+ max-height: calc(100vh - 120px);
214
+ overflow-y: auto;
215
+ scrollbar-width: thin;
216
+ scrollbar-color: var(--rule) transparent;
217
+ padding-bottom: 20px;
236
218
  }
237
219
 
238
- .page-top {
239
- border-bottom: 1px solid var(--line);
240
- background: var(--nav-bg);
241
- }
220
+ .nav-group { margin-bottom: 26px; }
242
221
 
243
- .wrap {
244
- width: min(1120px, calc(100% - 36px));
245
- min-width: 0;
246
- margin-right: auto;
247
- margin-left: auto;
222
+ .nav-group-title {
223
+ margin: 0 0 9px;
224
+ font-family: var(--mono);
225
+ font-size: var(--fs-label);
226
+ font-weight: 500;
227
+ letter-spacing: 0.18em;
228
+ text-transform: uppercase;
229
+ color: var(--faint);
248
230
  }
249
231
 
250
- .breadcrumbs {
232
+ .sidebar a {
251
233
  display: flex;
252
- flex-wrap: wrap;
253
- gap: 8px;
254
- align-items: center;
255
- padding-top: 20px;
256
- font-weight: 750;
257
- }
258
-
259
- .breadcrumbs a {
260
- color: var(--muted);
234
+ align-items: baseline;
235
+ gap: 9px;
236
+ padding: 4px 0;
237
+ color: var(--body-ink);
238
+ font-size: var(--fs-text);
261
239
  text-decoration: none;
240
+ border-radius: 4px;
262
241
  }
263
242
 
264
- .hero {
265
- display: grid;
266
- grid-template-columns: minmax(0, 1.08fr) minmax(320px, 0.92fr);
267
- gap: 28px;
268
- align-items: center;
269
- padding: 34px 0 30px;
243
+ .sidebar a .n {
244
+ font-family: var(--mono);
245
+ font-size: 0.8rem;
246
+ color: var(--faint);
247
+ min-width: 2.1em;
270
248
  }
271
249
 
272
- .hero > *,
273
- .terminal,
274
- .card,
275
- .doc-card,
276
- .stat,
277
- .command-row {
278
- min-width: 0;
250
+ .sidebar a:hover { color: var(--green-deep); }
251
+ .sidebar a[aria-current="page"] { color: var(--green-deep); font-weight: 600; }
252
+ .sidebar a[aria-current="page"] .n { color: var(--green); }
253
+
254
+ .sidebar .children {
255
+ margin: 2px 0 4px 9px;
256
+ border-left: 1px solid var(--rule);
257
+ padding-left: 13px;
279
258
  }
259
+ .sidebar .children a { font-size: var(--fs-text-sm); color: var(--soft); }
260
+ .sidebar .children a:hover,
261
+ .sidebar .children a[aria-current="page"] { color: var(--green-deep); }
280
262
 
281
- .eyebrow {
282
- margin: 0 0 10px;
283
- color: var(--muted);
284
- font-size: 0.72rem;
285
- font-weight: 700;
286
- letter-spacing: 0;
263
+ .sidebar .ext::after { content: "↗"; font-family: var(--mono); font-size: 0.7em; color: var(--faint); margin-left: 2px; }
264
+
265
+ /* ---------- article ---------- */
266
+
267
+ .article-col { min-width: 0; max-width: 70ch; }
268
+
269
+ .kicker {
270
+ margin: 0 0 14px;
271
+ font-family: var(--mono);
272
+ font-size: 0.85rem;
273
+ font-weight: 500;
274
+ letter-spacing: 0.18em;
287
275
  text-transform: uppercase;
276
+ color: var(--soft);
288
277
  }
278
+ .kicker .n { color: var(--green); margin-right: 6px; }
289
279
 
290
280
  h1 {
291
- margin: 0;
292
- max-width: 820px;
281
+ margin: 0 0 18px;
282
+ font-family: var(--display);
283
+ font-size: 2.55rem;
284
+ font-weight: 580;
285
+ line-height: 1.12;
286
+ letter-spacing: -0.01em;
293
287
  color: var(--ink);
294
- font-size: 3.25rem;
295
- font-weight: 760;
296
- letter-spacing: 0;
297
- line-height: 1.06;
298
- overflow-wrap: anywhere;
299
288
  }
300
289
 
290
+ .lede {
291
+ margin: 0 0 8px;
292
+ font-size: 1.4rem;
293
+ line-height: 1.62;
294
+ color: var(--soft);
295
+ }
296
+
297
+ article > section { margin-top: 50px; }
298
+
301
299
  h2 {
302
- margin: 0 0 12px;
300
+ position: relative;
301
+ margin: 0 0 20px;
302
+ padding-bottom: 10px;
303
+ font-family: var(--display);
304
+ font-size: 1.7rem;
305
+ font-weight: 600;
306
+ line-height: 1.25;
303
307
  color: var(--ink);
304
- font-size: 1.55rem;
305
- font-weight: 700;
306
- letter-spacing: 0;
307
- line-height: 1.2;
308
+ border-bottom: 1px solid var(--rule);
309
+ }
310
+ /* ledger double-rule */
311
+ h2::after {
312
+ content: "";
313
+ position: absolute;
314
+ left: 0;
315
+ right: 0;
316
+ bottom: -4px;
317
+ border-bottom: 1px solid var(--rule);
308
318
  }
309
319
 
310
320
  h3 {
311
- margin: 0 0 8px;
321
+ margin: 26px 0 10px;
322
+ font-family: var(--display);
323
+ font-size: 1.4rem;
324
+ font-weight: 620;
312
325
  color: var(--ink);
313
- font-size: 1.08rem;
314
- font-weight: 700;
315
326
  }
316
327
 
317
- p,
318
- li {
319
- color: var(--body-ink);
320
- font-size: 1rem;
321
- line-height: 1.68;
328
+ .anchor {
329
+ margin-left: 8px;
330
+ font-family: var(--mono);
331
+ font-size: 0.78em;
332
+ color: var(--faint);
333
+ text-decoration: none;
334
+ opacity: 0;
322
335
  }
336
+ h2:hover .anchor, h3:hover .anchor, .cmd-head:hover .anchor { opacity: 1; }
337
+ .anchor:hover { color: var(--green); }
323
338
 
324
- .lede {
325
- max-width: 790px;
326
- margin: 18px 0 0;
327
- color: var(--muted);
328
- font-size: 1.08rem;
329
- line-height: 1.6;
330
- }
339
+ p, li { font-size: var(--fs-text); }
340
+ ul, ol { padding-left: 1.3em; }
341
+ li { margin: 4px 0; }
342
+ li::marker { color: var(--green); }
331
343
 
332
- .actions,
333
- .tag-row {
334
- display: flex;
335
- flex-wrap: wrap;
336
- gap: 10px;
337
- }
344
+ strong { color: var(--ink); }
338
345
 
339
- .actions {
340
- margin-top: 22px;
341
- }
346
+ /* ---------- code ---------- */
342
347
 
343
- .button,
344
- .pill {
345
- display: inline-flex;
346
- min-height: 38px;
347
- align-items: center;
348
- justify-content: center;
349
- border: 1px solid var(--line);
350
- border-radius: 6px;
351
- background: var(--panel);
352
- padding: 0 14px;
348
+ code {
349
+ font-family: var(--mono);
350
+ font-size: 0.84em;
351
+ background: var(--sunken);
352
+ border: 1px solid var(--rule-soft);
353
+ border-radius: 4px;
354
+ padding: 0.1em 0.38em;
353
355
  color: var(--ink);
354
- text-decoration: none;
355
356
  }
356
357
 
357
- .button.primary {
358
- border-color: var(--accent);
359
- background: var(--accent);
360
- color: #ffffff;
361
- }
358
+ .snippet { position: relative; margin: 18px 0; }
362
359
 
363
- .terminal {
364
- border: 1px solid var(--pre-border);
360
+ pre {
361
+ margin: 0;
362
+ overflow-x: auto;
363
+ background: var(--term-bg);
364
+ color: var(--term-ink);
365
+ border: 1px solid var(--term-rule);
365
366
  border-radius: 8px;
366
- overflow: hidden;
367
- background: var(--pre-bg);
368
- box-shadow: var(--shadow);
367
+ padding: 15px 18px;
368
+ font-family: var(--mono);
369
+ font-size: var(--fs-mono);
370
+ line-height: 1.66;
371
+ scrollbar-width: thin;
372
+ scrollbar-color: var(--term-rule) transparent;
369
373
  }
370
374
 
371
- .terminal-head {
372
- display: flex;
373
- gap: 6px;
374
- align-items: center;
375
- border-bottom: 1px solid var(--pre-border);
376
- padding: 10px 14px;
377
- color: #94a3b8;
378
- font-size: 0.78rem;
379
- }
375
+ pre code { background: transparent; border: 0; padding: 0; color: inherit; font-size: 1em; white-space: pre; }
380
376
 
381
- .dot {
382
- width: 10px;
383
- height: 10px;
384
- border-radius: 999px;
385
- background: #ef4444;
386
- }
377
+ pre .c { color: var(--term-soft); }
387
378
 
388
- .dot:nth-child(2) {
389
- background: #f59e0b;
379
+ .copy-btn {
380
+ position: absolute;
381
+ top: 8px;
382
+ right: 8px;
383
+ border: 1px solid var(--term-rule);
384
+ border-radius: 5px;
385
+ background: var(--term-bg);
386
+ color: var(--term-soft);
387
+ font-family: var(--mono);
388
+ font-size: 0.72rem;
389
+ letter-spacing: 0.1em;
390
+ text-transform: uppercase;
391
+ padding: 4px 9px;
392
+ cursor: pointer;
393
+ opacity: 0;
394
+ transition: opacity 120ms ease;
390
395
  }
396
+ .snippet:hover .copy-btn, .copy-btn:focus-visible { opacity: 1; }
397
+ .copy-btn:hover { color: var(--term-ink); }
398
+ .copy-btn.done { color: var(--green); border-color: var(--green); opacity: 1; }
391
399
 
392
- .dot:nth-child(3) {
393
- background: #22c55e;
394
- }
400
+ /* ---------- ledger table (the loop) ---------- */
395
401
 
396
- .terminal pre {
397
- margin: 0;
398
- border: 0;
399
- border-radius: 0;
400
- box-shadow: none;
402
+ .ledger {
403
+ margin: 18px 0;
404
+ border-top: 1px solid var(--rule);
405
+ border-bottom: 1px solid var(--rule);
406
+ position: relative;
401
407
  }
402
-
403
- main {
404
- min-width: 0;
405
- padding: 30px 0 56px;
408
+ .ledger::after {
409
+ content: "";
410
+ position: absolute;
411
+ left: 0; right: 0; bottom: -4px;
412
+ border-bottom: 1px solid var(--rule);
406
413
  }
407
414
 
408
- article {
415
+ .ledger-row {
409
416
  display: grid;
410
- min-width: 0;
411
- gap: 28px;
417
+ grid-template-columns: 48px 140px minmax(0, 1fr);
418
+ gap: 16px;
419
+ align-items: baseline;
420
+ padding: 13px 2px;
421
+ text-decoration: none;
422
+ color: inherit;
412
423
  }
424
+ .ledger-row + .ledger-row { border-top: 1px solid var(--rule-soft); }
413
425
 
414
- article > section {
415
- min-width: 0;
416
- max-width: 100%;
417
- border-top: 1px solid var(--line);
418
- padding-top: 28px;
426
+ .ledger-row .n {
427
+ font-family: var(--mono);
428
+ font-size: 0.85rem;
429
+ color: var(--green);
430
+ }
431
+ .ledger-row .stage {
432
+ font-family: var(--display);
433
+ font-weight: 620;
434
+ font-size: var(--fs-text);
435
+ color: var(--ink);
436
+ }
437
+ .ledger-row .what { color: var(--soft); font-size: var(--fs-text); }
438
+ .ledger-row .what code { font-size: 0.8em; }
439
+ .ledger-row .cmdline {
440
+ display: block;
441
+ font-family: var(--mono);
442
+ font-size: var(--fs-mono);
443
+ color: var(--green-deep);
444
+ margin-bottom: 3px;
445
+ }
446
+
447
+ a.ledger-row:hover .stage { color: var(--green-deep); }
448
+ a.ledger-row:hover { background: color-mix(in srgb, var(--green-wash) 50%, transparent); }
449
+
450
+ /* ---------- callouts (stamped) ---------- */
451
+
452
+ .callout {
453
+ position: relative;
454
+ margin: 22px 0;
455
+ border: 1px solid var(--rule);
456
+ border-radius: 7px;
457
+ padding: 18px 18px 14px;
458
+ background: var(--raised);
459
+ }
460
+
461
+ .callout-label {
462
+ position: absolute;
463
+ top: -0.74em;
464
+ left: 13px;
465
+ font-family: var(--mono);
466
+ font-size: var(--fs-label);
467
+ font-weight: 600;
468
+ letter-spacing: 0.18em;
469
+ text-transform: uppercase;
470
+ background: var(--raised);
471
+ border: 1px solid currentColor;
472
+ border-radius: 3px;
473
+ padding: 1px 8px;
419
474
  }
420
475
 
421
- article > section:first-child {
422
- border-top: 0;
423
- padding-top: 0;
476
+ .callout p { margin: 4px 0; font-size: var(--fs-text); }
477
+ .callout p:first-of-type { margin-top: 0; }
478
+
479
+ .callout[data-kind="boundary"] { border-color: color-mix(in srgb, var(--red) 45%, var(--rule)); }
480
+ .callout[data-kind="boundary"] .callout-label { color: var(--red); transform: rotate(-1deg); background: var(--red-wash); }
481
+
482
+ .callout[data-kind="readonly"] { border-color: color-mix(in srgb, var(--green) 40%, var(--rule)); }
483
+ .callout[data-kind="readonly"] .callout-label { color: var(--green-deep); background: var(--green-wash); }
484
+
485
+ .callout[data-kind="note"] .callout-label { color: var(--amber); background: var(--amber-wash); }
486
+
487
+ /* boundary list on overview */
488
+ .boundary-list { margin: 0; padding: 0; list-style: none; }
489
+ .boundary-list li {
490
+ display: grid;
491
+ grid-template-columns: 128px minmax(0, 1fr);
492
+ gap: 14px;
493
+ padding: 10px 0;
494
+ align-items: baseline;
495
+ }
496
+ .boundary-list li + li { border-top: 1px solid var(--rule-soft); }
497
+ .boundary-list .stamp {
498
+ font-family: var(--mono);
499
+ font-size: var(--fs-label);
500
+ font-weight: 600;
501
+ letter-spacing: 0.14em;
502
+ text-transform: uppercase;
503
+ text-align: center;
504
+ border: 1px solid currentColor;
505
+ border-radius: 3px;
506
+ padding: 2px 6px;
424
507
  }
508
+ .boundary-list .stamp.refused { color: var(--red); background: var(--red-wash); transform: rotate(-1.2deg); }
509
+ .boundary-list .stamp.readonly { color: var(--green-deep); background: var(--green-wash); transform: rotate(0.8deg); }
510
+ .boundary-list .stamp.approval { color: var(--amber); background: var(--amber-wash); transform: rotate(-0.6deg); }
511
+
512
+ /* ---------- definition rows ---------- */
425
513
 
426
- .grid,
427
- .summary-grid {
514
+ .def-rows { margin: 14px 0; }
515
+ .def-rows > div {
428
516
  display: grid;
429
- grid-template-columns: repeat(3, minmax(0, 1fr));
430
- gap: 12px;
517
+ grid-template-columns: 150px minmax(0, 1fr);
518
+ gap: 16px;
519
+ padding: 9px 0;
520
+ align-items: baseline;
431
521
  }
522
+ .def-rows > div + div { border-top: 1px solid var(--rule-soft); }
523
+ .def-rows dt, .def-rows .k { font-family: var(--mono); font-size: var(--fs-mono); color: var(--green-deep); }
524
+ .def-rows dd, .def-rows .v { margin: 0; color: var(--soft); font-size: var(--fs-text); }
525
+
526
+ /* ---------- command reference ---------- */
432
527
 
433
- .summary-grid {
434
- grid-template-columns: repeat(4, minmax(0, 1fr));
528
+ .cmd { margin-top: 44px; }
529
+
530
+ .cmd-head {
531
+ position: relative;
532
+ display: flex;
533
+ align-items: baseline;
534
+ gap: 10px;
535
+ margin: 0 0 12px;
536
+ padding-bottom: 9px;
537
+ border-bottom: 1px solid var(--rule);
538
+ }
539
+ .cmd-head::after {
540
+ content: "";
541
+ position: absolute;
542
+ left: 0; right: 0; bottom: -4px;
543
+ border-bottom: 1px solid var(--rule);
544
+ }
545
+ .cmd-head h2, .cmd-head h3 {
546
+ margin: 0;
547
+ padding: 0;
548
+ border: 0;
549
+ font-family: var(--mono);
550
+ font-size: 1.15rem;
551
+ font-weight: 600;
552
+ color: var(--ink);
435
553
  }
554
+ .cmd-head h2::after, .cmd-head h3::after { display: none; }
436
555
 
437
- .card,
438
- .doc-card,
439
- .stat,
440
- .note {
441
- border: 1px solid var(--line);
442
- border-radius: 8px;
443
- background: var(--panel);
444
- padding: 16px;
556
+ .cmd-flag {
557
+ margin-left: auto;
558
+ font-family: var(--mono);
559
+ font-size: 0.72rem;
560
+ letter-spacing: 0.14em;
561
+ text-transform: uppercase;
562
+ border: 1px solid currentColor;
563
+ border-radius: 3px;
564
+ padding: 1px 7px;
565
+ white-space: nowrap;
445
566
  }
567
+ .cmd-flag.readonly { color: var(--green-deep); }
568
+ .cmd-flag.plan { color: var(--amber); }
569
+ .cmd-flag.approval { color: var(--red); }
446
570
 
447
- .doc-card {
448
- display: grid;
449
- gap: 8px;
450
- min-height: 148px;
451
- align-content: start;
452
- text-decoration: none;
571
+ .cmd > p { margin: 10px 0; font-size: var(--fs-text); }
572
+
573
+ table.opts {
574
+ width: 100%;
575
+ margin: 12px 0;
576
+ border-collapse: collapse;
577
+ font-size: var(--fs-text-sm);
578
+ }
579
+ table.opts th {
580
+ font-family: var(--mono);
581
+ font-size: var(--fs-label);
582
+ font-weight: 500;
583
+ letter-spacing: 0.16em;
584
+ text-transform: uppercase;
585
+ color: var(--faint);
586
+ text-align: left;
587
+ padding: 6px 14px 6px 0;
588
+ border-bottom: 1px solid var(--rule);
453
589
  }
590
+ table.opts td {
591
+ padding: 7px 14px 7px 0;
592
+ border-bottom: 1px solid var(--rule-soft);
593
+ vertical-align: baseline;
594
+ color: var(--soft);
595
+ }
596
+ table.opts td:first-child { font-family: var(--mono); font-size: var(--fs-mono); color: var(--ink); white-space: nowrap; }
454
597
 
455
- .doc-card strong,
456
- .stat strong {
457
- color: var(--ink);
458
- font-size: 1.08rem;
598
+ /* ---------- toc ---------- */
599
+
600
+ .toc-col {
601
+ position: sticky;
602
+ top: 92px;
603
+ max-height: calc(100vh - 120px);
604
+ overflow-y: auto;
605
+ font-size: var(--fs-text-sm);
606
+ scrollbar-width: thin;
607
+ scrollbar-color: var(--rule) transparent;
459
608
  }
460
609
 
461
- .doc-card span,
462
- .stat span,
463
- .card p {
464
- margin: 0;
465
- color: var(--muted);
466
- font-size: 0.94rem;
467
- line-height: 1.46;
610
+ .toc-title {
611
+ margin: 0 0 10px;
612
+ font-family: var(--mono);
613
+ font-size: var(--fs-label);
614
+ letter-spacing: 0.18em;
615
+ text-transform: uppercase;
616
+ color: var(--faint);
468
617
  }
469
618
 
470
- .stat strong {
619
+ #toc { border-left: 1px solid var(--rule); }
620
+
621
+ #toc a {
471
622
  display: block;
472
- font-size: 1.9rem;
473
- line-height: 1;
623
+ padding: 4px 0 4px 14px;
624
+ margin-left: -1px;
625
+ color: var(--soft);
626
+ text-decoration: none;
627
+ border-left: 1px solid transparent;
628
+ line-height: 1.45;
474
629
  }
630
+ #toc a:hover { color: var(--ink); }
631
+ #toc a.active { color: var(--green-deep); border-left-color: var(--green); font-weight: 600; }
632
+ #toc a.sub { padding-left: 26px; font-size: 1rem; }
475
633
 
476
- .note {
477
- border-color: #e0c36d;
478
- background: var(--warn);
479
- }
634
+ /* ---------- pager ---------- */
480
635
 
481
- .command-list {
636
+ .pager {
482
637
  display: grid;
483
- gap: 10px;
638
+ grid-template-columns: 1fr 1fr;
639
+ gap: 14px;
640
+ margin-top: 70px;
641
+ border-top: 1px solid var(--rule);
642
+ padding-top: 6px;
643
+ position: relative;
484
644
  }
485
-
486
- .command-row {
487
- display: grid;
488
- grid-template-columns: minmax(170px, 0.42fr) minmax(0, 1fr);
489
- gap: 12px;
490
- align-items: start;
491
- border: 1px solid var(--line);
492
- border-radius: 8px;
493
- background: var(--panel);
494
- padding: 12px;
645
+ .pager::before {
646
+ content: "";
647
+ position: absolute;
648
+ left: 0; right: 0; top: 3px;
649
+ border-top: 1px solid var(--rule);
495
650
  }
496
651
 
497
- .command-row p {
498
- margin: 0;
499
- color: var(--muted);
652
+ .pager a {
653
+ display: grid;
654
+ gap: 3px;
655
+ padding: 16px 4px;
656
+ text-decoration: none;
500
657
  }
501
-
502
- .site-footer {
503
- border-top: 1px solid var(--line);
504
- background: var(--panel);
505
- color: var(--muted);
506
- padding: 20px 0;
658
+ .pager a.next { text-align: right; }
659
+ .pager .dir {
660
+ font-family: var(--mono);
661
+ font-size: var(--fs-label);
662
+ letter-spacing: 0.16em;
663
+ text-transform: uppercase;
664
+ color: var(--faint);
665
+ }
666
+ .pager .t { font-family: var(--display); font-weight: 620; color: var(--ink); }
667
+ .pager a:hover .t { color: var(--green-deep); }
668
+
669
+ /* ---------- search palette ---------- */
670
+
671
+ .palette-backdrop {
672
+ position: fixed;
673
+ inset: 0;
674
+ z-index: 80;
675
+ background: color-mix(in srgb, var(--ink) 26%, transparent);
676
+ backdrop-filter: blur(2px);
677
+ }
678
+
679
+ .palette {
680
+ position: fixed;
681
+ z-index: 81;
682
+ top: 14vh;
683
+ left: 50%;
684
+ transform: translateX(-50%);
685
+ width: min(620px, calc(100vw - 32px));
686
+ background: var(--raised);
687
+ border: 1px solid var(--rule);
688
+ border-radius: 10px;
689
+ box-shadow: var(--shadow);
690
+ overflow: hidden;
507
691
  }
508
-
509
- html[data-theme="dark"] .card,
510
- html[data-theme="dark"] .doc-card,
511
- html[data-theme="dark"] .stat,
512
- html[data-theme="dark"] .command-row,
513
- html[data-theme="dark"] .theme-toggle {
514
- border-color: var(--line);
515
- background: var(--panel);
692
+ .palette::before {
693
+ content: "";
694
+ display: block;
695
+ border-top: 3px double var(--green);
516
696
  }
517
697
 
518
- html[data-theme="dark"] .note {
519
- border-color: #6a5321;
520
- background: var(--warn);
698
+ .palette input {
699
+ width: 100%;
700
+ border: 0;
701
+ border-bottom: 1px solid var(--rule);
702
+ background: transparent;
703
+ color: var(--ink);
704
+ font-family: var(--mono);
705
+ font-size: 1.05rem;
706
+ padding: 15px 18px;
707
+ outline: none;
521
708
  }
709
+ .palette input::placeholder { color: var(--faint); }
522
710
 
523
- @media (max-width: 960px) {
524
- .docs-shell {
525
- display: block;
526
- }
527
-
528
- .global-nav {
529
- position: sticky;
530
- z-index: 10;
531
- grid-template-columns: minmax(0, 1fr) auto;
532
- height: auto;
533
- max-height: none;
534
- align-items: center;
535
- border-right: 0;
536
- border-bottom: 1px solid var(--line);
537
- padding: 16px 20px 12px;
538
- overflow: hidden;
539
- box-shadow: 0 8px 26px rgba(20, 23, 19, 0.06);
540
- }
541
-
542
- html[data-theme="dark"] .global-nav {
543
- box-shadow: 0 8px 26px rgba(0, 0, 0, 0.24);
544
- }
711
+ .palette-results { max-height: 46vh; overflow-y: auto; padding: 8px; scrollbar-width: thin; }
545
712
 
546
- .site-mark {
547
- margin-bottom: 4px;
548
- border-bottom: 0;
549
- padding-bottom: 0;
550
- }
713
+ .palette-results a {
714
+ display: grid;
715
+ grid-template-columns: minmax(0, 1fr) auto;
716
+ gap: 12px;
717
+ align-items: baseline;
718
+ padding: 9px 12px;
719
+ border-radius: 6px;
720
+ text-decoration: none;
721
+ color: var(--body-ink);
722
+ font-size: var(--fs-text-sm);
723
+ }
724
+ .palette-results a .where {
725
+ font-family: var(--mono);
726
+ font-size: var(--fs-label);
727
+ letter-spacing: 0.08em;
728
+ text-transform: uppercase;
729
+ color: var(--faint);
730
+ white-space: nowrap;
731
+ }
732
+ .palette-results a.sel,
733
+ .palette-results a:hover { background: var(--green-wash); color: var(--green-deep); }
734
+ .palette-results .empty {
735
+ padding: 16px 12px;
736
+ font-family: var(--mono);
737
+ font-size: 0.9rem;
738
+ color: var(--faint);
739
+ }
551
740
 
552
- .nav-scroll {
553
- display: flex;
554
- grid-column: 1 / -1;
555
- gap: 8px;
556
- margin: 2px -20px 0;
557
- overflow-x: auto;
558
- padding: 8px 20px 4px;
559
- scrollbar-color: var(--line) transparent;
560
- scrollbar-width: thin;
561
- }
741
+ /* ---------- footer ---------- */
562
742
 
563
- .nav-section {
564
- display: flex;
565
- flex: 0 0 auto;
566
- gap: 8px;
567
- margin: 0;
568
- }
743
+ .colophon {
744
+ border-top: 1px solid var(--rule);
745
+ margin-top: 30px;
746
+ }
747
+ .colophon-inner {
748
+ width: min(1340px, 100% - 48px);
749
+ margin-inline: auto;
750
+ padding: 22px 0 36px;
751
+ display: flex;
752
+ gap: 18px;
753
+ align-items: baseline;
754
+ font-family: var(--mono);
755
+ font-size: 0.85rem;
756
+ color: var(--faint);
757
+ }
758
+ .colophon a { color: var(--soft); }
569
759
 
570
- .nav-section-title {
571
- display: none;
572
- }
760
+ /* ---------- entrance ---------- */
573
761
 
574
- .global-nav a:not(.site-mark) {
575
- flex: 0 0 auto;
576
- border: 1px solid var(--line);
577
- background: var(--panel);
578
- padding: 8px 11px;
579
- white-space: nowrap;
762
+ @media (prefers-reduced-motion: no-preference) {
763
+ article > * {
764
+ animation: rise 420ms cubic-bezier(0.2, 0.7, 0.3, 1) both;
580
765
  }
581
-
582
- .hero,
583
- .grid,
584
- .summary-grid,
585
- .command-row {
586
- grid-template-columns: 1fr;
766
+ article > *:nth-child(2) { animation-delay: 40ms; }
767
+ article > *:nth-child(3) { animation-delay: 80ms; }
768
+ article > *:nth-child(4) { animation-delay: 120ms; }
769
+ article > *:nth-child(5) { animation-delay: 160ms; }
770
+ article > *:nth-child(n + 6) { animation-delay: 200ms; }
771
+
772
+ @keyframes rise {
773
+ from { opacity: 0; transform: translateY(10px); }
774
+ to { opacity: 1; transform: none; }
587
775
  }
776
+ }
588
777
 
589
- h1 {
590
- font-size: 2.35rem;
591
- }
778
+ /* ---------- responsive ---------- */
592
779
 
593
- h2 {
594
- font-size: 1.38rem;
595
- }
780
+ @media (max-width: 1180px) {
781
+ .frame { grid-template-columns: 240px minmax(0, 1fr); gap: 44px; }
782
+ .toc-col { display: none; }
596
783
  }
597
784
 
598
- @media (max-width: 560px) {
599
- .wrap {
600
- width: calc(100vw - 32px);
601
- max-width: calc(100vw - 32px);
602
- }
785
+ @media (max-width: 880px) {
786
+ .menu-btn { display: inline-flex; }
787
+ .search-btn span { display: none; }
788
+ .search-btn { gap: 0; padding: 7px 9px; }
789
+ .masthead-tools .gh { display: none; }
603
790
 
604
- .global-nav {
605
- padding-right: 16px;
606
- padding-left: 16px;
607
- }
608
-
609
- .nav-scroll {
610
- margin-right: -16px;
611
- margin-left: -16px;
612
- padding-right: 16px;
613
- padding-left: 16px;
614
- }
791
+ .frame { display: block; padding-top: 26px; }
615
792
 
616
- .site-mark span {
617
- display: none;
793
+ .sidebar {
794
+ position: fixed;
795
+ inset: 0;
796
+ top: 61px;
797
+ z-index: 60;
798
+ max-height: none;
799
+ background: var(--paper);
800
+ padding: 26px 24px 40px;
801
+ transform: translateX(-102%);
802
+ transition: transform 200ms ease;
803
+ border-right: 1px solid var(--rule);
618
804
  }
805
+ body.nav-open .sidebar { transform: none; }
806
+ body.nav-open { overflow: hidden; }
619
807
 
620
- .actions {
621
- display: grid;
622
- grid-template-columns: 1fr;
623
- }
808
+ .article-col { max-width: none; }
809
+ h1 { font-size: 2.05rem; }
624
810
 
625
- .button,
626
- .pill {
627
- width: 100%;
628
- }
811
+ .ledger-row { grid-template-columns: 36px minmax(0, 1fr); }
812
+ .ledger-row .what { grid-column: 2; }
629
813
 
630
- pre {
631
- padding: 12px 14px;
632
- font-size: 0.82rem;
633
- }
814
+ .boundary-list li, .def-rows > div { grid-template-columns: 1fr; gap: 5px; }
815
+ .boundary-list .stamp { justify-self: start; }
816
+ }
634
817
 
635
- h1 {
636
- font-size: 1.82rem;
637
- line-height: 1.12;
638
- }
818
+ @media (max-width: 560px) {
819
+ .masthead-inner, .colophon-inner { width: calc(100% - 32px); }
820
+ h1 { font-size: 1.78rem; }
821
+ pre { font-size: 0.88rem; padding: 12px 14px; }
822
+ .pager { grid-template-columns: 1fr; }
823
+ .pager a.next { text-align: left; }
639
824
  }