@atelic-action/artifact 0.0.0-stage → 1.1.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/README.md +153 -2
- package/package.json +68 -5
- package/src/documents/Gate.tsx +342 -0
- package/src/documents/Note.tsx +158 -0
- package/src/documents/Paragraph.tsx +65 -0
- package/src/documents/Read.tsx +544 -0
- package/src/documents/Report.tsx +135 -0
- package/src/documents/Shot.tsx +38 -0
- package/src/documents/Writeup.tsx +771 -0
- package/src/documents/documents.css +2722 -0
- package/src/documents/index.ts +11 -0
|
@@ -0,0 +1,2722 @@
|
|
|
1
|
+
/* The composed documents in this package: the sealed document stage (Gate),
|
|
2
|
+
the monthly page (Report), the writeup (Writeup), the note (Note), and the
|
|
3
|
+
read (Read). Moved from @atelic-action/ui's styles/artifact.css with the
|
|
4
|
+
documents (ATE-671), in the order that sheet bundled them, which the two
|
|
5
|
+
@page rules depend on: the later one wins, and the writeup's is the later
|
|
6
|
+
one. The note and the read follow the writeup and set no @page, so the
|
|
7
|
+
writeup's stays the one that wins.
|
|
8
|
+
|
|
9
|
+
The pieces the documents share stay in @atelic-action/ui: the grade chip
|
|
10
|
+
(.op-grade), the sign off (.op-who, .op-sign), and the shell's logo rule,
|
|
11
|
+
in its styles/artifact.css; the login screen's vocabulary the sealed stage
|
|
12
|
+
reuses, in its styles/gate.css; the page components (the callout, the
|
|
13
|
+
checklist, the table, the charts), in its styles/components.css. Import
|
|
14
|
+
this sheet after all of them and before the site's theme.css.
|
|
15
|
+
|
|
16
|
+
Every rule sits in the same atelic-ui layer as the package sheets, so any
|
|
17
|
+
rule a site writes outside a layer still wins over it whatever its
|
|
18
|
+
specificity, and every rule is scoped under .atelic-ui, the one root class
|
|
19
|
+
a consumer wears. */
|
|
20
|
+
@layer atelic-ui {
|
|
21
|
+
/* =================================================================
|
|
22
|
+
THE SEALED DOCUMENT STAGE: the Gate component (Gate.tsx).
|
|
23
|
+
A dark stage derived from the semantic tokens, so a client's
|
|
24
|
+
theme.css recolors it. The gate card reuses the login screen's
|
|
25
|
+
vocabulary in @atelic-action/ui's styles/gate.css (eyebrow, headline,
|
|
26
|
+
lead, form, input, error); this section only stages it dark and adds the document
|
|
27
|
+
classes the decrypted HTML is written against.
|
|
28
|
+
================================================================= */
|
|
29
|
+
.atelic-ui .gate-stage {
|
|
30
|
+
--gs-stage: var(--surface-dark);
|
|
31
|
+
--gs-bright: color-mix(in srgb, var(--surface) 96%, white);
|
|
32
|
+
--gs-dim: color-mix(in srgb, var(--surface) 62%, var(--surface-dark));
|
|
33
|
+
--gs-faint: color-mix(in srgb, var(--surface) 40%, var(--surface-dark));
|
|
34
|
+
--gs-panel: color-mix(in srgb, var(--surface-dark) 88%, var(--surface));
|
|
35
|
+
--gs-border: color-mix(in srgb, var(--surface-dark) 72%, var(--surface));
|
|
36
|
+
--gs-hairline: color-mix(in srgb, var(--surface) 10%, transparent);
|
|
37
|
+
|
|
38
|
+
/* The navbar is fixed, so it adds no document height: a stage sized
|
|
39
|
+
100svh minus the nav plus a credit bar shorter than the nav leaves
|
|
40
|
+
the document shorter than the viewport, and the body's light
|
|
41
|
+
background shows beneath the credit bar. The stage therefore owns
|
|
42
|
+
the full viewport and clears the nav itself, painting dark edge to
|
|
43
|
+
edge behind the bar. */
|
|
44
|
+
min-height: 100svh;
|
|
45
|
+
padding-top: var(--nav-height);
|
|
46
|
+
background: var(--gs-stage);
|
|
47
|
+
color: var(--gs-bright);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
/* Overscroll and any sub-viewport rounding still expose the page body at
|
|
51
|
+
the edges; a page carrying the stage paints its whole shell dark. */
|
|
52
|
+
.atelic-ui:has(.gate-stage) {
|
|
53
|
+
background: var(--surface-dark);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
/* ---- the gate card, staged dark ---- */
|
|
57
|
+
.atelic-ui .gate-hall {
|
|
58
|
+
display: grid;
|
|
59
|
+
place-items: center;
|
|
60
|
+
min-height: calc(100svh - var(--nav-height));
|
|
61
|
+
padding-block: clamp(48px, 9vh, 96px);
|
|
62
|
+
}
|
|
63
|
+
.atelic-ui .gate-card {
|
|
64
|
+
width: 100%;
|
|
65
|
+
max-width: 520px;
|
|
66
|
+
margin-inline: auto;
|
|
67
|
+
padding: clamp(28px, 5vw, 44px);
|
|
68
|
+
border: 1px solid var(--gs-border);
|
|
69
|
+
border-radius: var(--radius-lg);
|
|
70
|
+
background: var(--gs-panel);
|
|
71
|
+
text-align: center;
|
|
72
|
+
}
|
|
73
|
+
.atelic-ui .gate-stage .gate-eyebrow {
|
|
74
|
+
margin: 0 0 12px;
|
|
75
|
+
font-size: 12.5px;
|
|
76
|
+
letter-spacing: 0.02em;
|
|
77
|
+
color: var(--gs-faint);
|
|
78
|
+
}
|
|
79
|
+
.atelic-ui .gate-stage .gate-headline {
|
|
80
|
+
margin: 0 0 12px;
|
|
81
|
+
font-family: var(--font-sans);
|
|
82
|
+
font-weight: 800;
|
|
83
|
+
letter-spacing: -0.015em;
|
|
84
|
+
font-size: clamp(26px, 3.4vw, 34px);
|
|
85
|
+
line-height: 1.12;
|
|
86
|
+
max-width: none;
|
|
87
|
+
color: var(--gs-bright);
|
|
88
|
+
}
|
|
89
|
+
.atelic-ui .gate-stage .gate-lead {
|
|
90
|
+
margin: 0 auto 26px;
|
|
91
|
+
max-width: 42ch;
|
|
92
|
+
font-size: 15px;
|
|
93
|
+
line-height: 1.6;
|
|
94
|
+
color: var(--gs-dim);
|
|
95
|
+
}
|
|
96
|
+
.atelic-ui .gate-stage .gate-input {
|
|
97
|
+
border-color: var(--gs-border);
|
|
98
|
+
background: color-mix(in srgb, var(--surface-dark) 94%, var(--surface));
|
|
99
|
+
color: var(--gs-bright);
|
|
100
|
+
}
|
|
101
|
+
.atelic-ui .gate-stage .gate-input::placeholder {
|
|
102
|
+
color: var(--gs-faint);
|
|
103
|
+
}
|
|
104
|
+
.atelic-ui .gate-stage .gate-input:focus-visible {
|
|
105
|
+
border-color: var(--primary-bright);
|
|
106
|
+
box-shadow: 0 0 0 3px var(--primary-focus-ring);
|
|
107
|
+
}
|
|
108
|
+
.atelic-ui .gate-stage .gate-error {
|
|
109
|
+
margin: 20px auto 0;
|
|
110
|
+
max-width: 46ch;
|
|
111
|
+
font-size: 14.5px;
|
|
112
|
+
line-height: 1.55;
|
|
113
|
+
color: var(--gs-dim);
|
|
114
|
+
background: none;
|
|
115
|
+
border: none;
|
|
116
|
+
padding: 0;
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/* ---- the document ----
|
|
120
|
+
Everything below styles HTML the content module authors, so the
|
|
121
|
+
selectors are element level inside .gate-content rather than a class
|
|
122
|
+
per line. A client document writes plain markup and inherits this. */
|
|
123
|
+
.atelic-ui .gate-doc {
|
|
124
|
+
/* The stage itself clears the fixed nav, so the document pads only
|
|
125
|
+
its own breathing room. */
|
|
126
|
+
padding-block: clamp(44px, 8vh, 88px) clamp(64px, 12vh, 132px);
|
|
127
|
+
}
|
|
128
|
+
.atelic-ui .gate-content {
|
|
129
|
+
/* The document column matches the chrome: .wrap and .nav-inner share
|
|
130
|
+
--max-width, so the text aligns with the header bar's edges rather
|
|
131
|
+
than sitting in a narrower centered measure. */
|
|
132
|
+
color: var(--gs-dim);
|
|
133
|
+
font-size: 16.5px;
|
|
134
|
+
line-height: 1.7;
|
|
135
|
+
}
|
|
136
|
+
.atelic-ui .gate-content h1 {
|
|
137
|
+
margin: 0 0 10px;
|
|
138
|
+
font-size: clamp(30px, 4.4vw, 46px);
|
|
139
|
+
line-height: 1.06;
|
|
140
|
+
color: var(--gs-bright);
|
|
141
|
+
text-wrap: balance;
|
|
142
|
+
}
|
|
143
|
+
.atelic-ui .gate-content h2 {
|
|
144
|
+
margin: 52px 0 14px;
|
|
145
|
+
font-size: clamp(21px, 2.6vw, 27px);
|
|
146
|
+
line-height: 1.2;
|
|
147
|
+
color: var(--gs-bright);
|
|
148
|
+
}
|
|
149
|
+
.atelic-ui .gate-content h3 {
|
|
150
|
+
margin: 28px 0 8px;
|
|
151
|
+
font-size: 17px;
|
|
152
|
+
color: var(--gs-bright);
|
|
153
|
+
}
|
|
154
|
+
.atelic-ui .gate-content p {
|
|
155
|
+
margin: 0 0 16px;
|
|
156
|
+
text-wrap: pretty;
|
|
157
|
+
}
|
|
158
|
+
.atelic-ui .gate-content ul {
|
|
159
|
+
margin: 0 0 16px;
|
|
160
|
+
padding-left: 22px;
|
|
161
|
+
display: flex;
|
|
162
|
+
flex-direction: column;
|
|
163
|
+
gap: 8px;
|
|
164
|
+
list-style: disc;
|
|
165
|
+
}
|
|
166
|
+
.atelic-ui .gate-content li {
|
|
167
|
+
display: list-item;
|
|
168
|
+
list-style: disc;
|
|
169
|
+
margin: 0;
|
|
170
|
+
}
|
|
171
|
+
.atelic-ui .gate-content li::marker {
|
|
172
|
+
color: var(--primary-bright);
|
|
173
|
+
}
|
|
174
|
+
.atelic-ui .gate-content strong {
|
|
175
|
+
color: var(--gs-bright);
|
|
176
|
+
font-weight: 600;
|
|
177
|
+
}
|
|
178
|
+
.atelic-ui .gate-content a {
|
|
179
|
+
color: var(--primary-bright);
|
|
180
|
+
text-decoration: none;
|
|
181
|
+
border-bottom: 1px solid currentColor;
|
|
182
|
+
}
|
|
183
|
+
.atelic-ui .gate-content hr {
|
|
184
|
+
margin: 44px 0;
|
|
185
|
+
border: 0;
|
|
186
|
+
border-top: 1px solid var(--gs-hairline);
|
|
187
|
+
}
|
|
188
|
+
.atelic-ui .gate-meta {
|
|
189
|
+
margin: 0 0 34px;
|
|
190
|
+
font-family: var(--font-mono);
|
|
191
|
+
font-size: 12.5px;
|
|
192
|
+
color: var(--gs-faint);
|
|
193
|
+
}
|
|
194
|
+
.atelic-ui .gate-lede {
|
|
195
|
+
font-size: 18px;
|
|
196
|
+
color: var(--gs-bright);
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/* Tier cards: the shape of a three option quote. Faded panels on the
|
|
200
|
+
stage, one hairline lifted to mark the recommended option; no filled
|
|
201
|
+
color anywhere, so the CTA button stays the only saturated thing. */
|
|
202
|
+
.atelic-ui .gate-tiers {
|
|
203
|
+
display: grid;
|
|
204
|
+
/* Three explicit columns: auto-fit minted a fourth empty track at
|
|
205
|
+
document width and squeezed the cards into three quarters of the
|
|
206
|
+
row. A proposal's tier row is three builds wide by design. */
|
|
207
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
208
|
+
gap: 16px;
|
|
209
|
+
margin: 24px 0 8px;
|
|
210
|
+
}
|
|
211
|
+
@media (max-width: 860px) {
|
|
212
|
+
.atelic-ui .gate-tiers {
|
|
213
|
+
grid-template-columns: 1fr;
|
|
214
|
+
}
|
|
215
|
+
}
|
|
216
|
+
.atelic-ui .gate-tier {
|
|
217
|
+
display: flex;
|
|
218
|
+
flex-direction: column;
|
|
219
|
+
gap: 6px;
|
|
220
|
+
padding: 22px;
|
|
221
|
+
border: 1px solid var(--gs-border);
|
|
222
|
+
border-radius: var(--radius-lg);
|
|
223
|
+
background: var(--gs-panel);
|
|
224
|
+
min-width: 0;
|
|
225
|
+
}
|
|
226
|
+
.atelic-ui .gate-tier.is-picked {
|
|
227
|
+
border-color: color-mix(in srgb, var(--primary-bright) 55%, transparent);
|
|
228
|
+
}
|
|
229
|
+
.atelic-ui .gate-tier-name {
|
|
230
|
+
font-weight: 600;
|
|
231
|
+
font-size: 17px;
|
|
232
|
+
color: var(--gs-bright);
|
|
233
|
+
}
|
|
234
|
+
.atelic-ui .gate-tier-price {
|
|
235
|
+
font-family: var(--font-mono);
|
|
236
|
+
font-size: 21px;
|
|
237
|
+
color: var(--primary-bright);
|
|
238
|
+
}
|
|
239
|
+
.atelic-ui .gate-tier-note {
|
|
240
|
+
font-size: 14px;
|
|
241
|
+
line-height: 1.55;
|
|
242
|
+
color: var(--gs-dim);
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
/* Trade arithmetic on a card: a sum column sitting on the card's left,
|
|
246
|
+
digits right-aligned against each other the way a hand total lines
|
|
247
|
+
up, with any annotation (the credit's label) to the right of its
|
|
248
|
+
figure. Markup:
|
|
249
|
+
|
|
250
|
+
<div class="gate-tier-math">
|
|
251
|
+
<span class="gate-tier-was">$7,400</span>
|
|
252
|
+
<span class="gate-tier-credit">− $3,660</span>
|
|
253
|
+
<span class="gate-tier-mathlabel">install credit</span>
|
|
254
|
+
<span class="gate-tier-price">$3,740</span>
|
|
255
|
+
</div>
|
|
256
|
+
|
|
257
|
+
Amounts take grid column one (right-aligned, shared right edge);
|
|
258
|
+
labels take column two. A bare .gate-tier-price outside the math
|
|
259
|
+
block (the add-on card) keeps its standalone look. */
|
|
260
|
+
.atelic-ui .gate-tier-math {
|
|
261
|
+
display: grid;
|
|
262
|
+
grid-template-columns: max-content auto;
|
|
263
|
+
column-gap: 10px;
|
|
264
|
+
row-gap: 2px;
|
|
265
|
+
align-items: baseline;
|
|
266
|
+
justify-content: start;
|
|
267
|
+
}
|
|
268
|
+
.atelic-ui .gate-tier-math .gate-tier-was,
|
|
269
|
+
.atelic-ui .gate-tier-math .gate-tier-credit,
|
|
270
|
+
.atelic-ui .gate-tier-math .gate-tier-price {
|
|
271
|
+
grid-column: 1;
|
|
272
|
+
text-align: right;
|
|
273
|
+
}
|
|
274
|
+
/* The label never wraps, so a mark inside it (the asterisk that points
|
|
275
|
+
at the footnote under the tiers) stays on the label's line:
|
|
276
|
+
<span class="gate-tier-mathlabel">founding member credit<svg>...</svg></span> */
|
|
277
|
+
.atelic-ui .gate-tier-mathlabel {
|
|
278
|
+
grid-column: 2;
|
|
279
|
+
font-size: 13px;
|
|
280
|
+
color: var(--gs-faint);
|
|
281
|
+
white-space: nowrap;
|
|
282
|
+
}
|
|
283
|
+
.atelic-ui .gate-tier-mathlabel svg {
|
|
284
|
+
display: inline-block;
|
|
285
|
+
width: 11px;
|
|
286
|
+
height: 11px;
|
|
287
|
+
vertical-align: -1px;
|
|
288
|
+
margin-left: 2px;
|
|
289
|
+
color: var(--primary-bright);
|
|
290
|
+
}
|
|
291
|
+
.atelic-ui .gate-tier-was {
|
|
292
|
+
font-family: var(--font-mono);
|
|
293
|
+
font-size: 15px;
|
|
294
|
+
color: var(--gs-faint);
|
|
295
|
+
text-decoration: line-through;
|
|
296
|
+
}
|
|
297
|
+
.atelic-ui .gate-tier-credit {
|
|
298
|
+
font-family: var(--font-mono);
|
|
299
|
+
font-size: 14px;
|
|
300
|
+
color: var(--gs-dim);
|
|
301
|
+
}
|
|
302
|
+
|
|
303
|
+
/* A full width card in the tier grid, for an add-on (a monthly service
|
|
304
|
+
under one-time builds) that applies across every column. */
|
|
305
|
+
.atelic-ui .gate-tiers .gate-tier.is-addon {
|
|
306
|
+
grid-column: 1 / -1;
|
|
307
|
+
}
|
|
308
|
+
|
|
309
|
+
/* The add-ons row: two monthly cards (Operate, Operate with Paid) side
|
|
310
|
+
by side under the builds, instead of each full width. The row spans
|
|
311
|
+
the tier grid; the cards inside it sit in its own two columns, and
|
|
312
|
+
stack with the tiers on a phone.
|
|
313
|
+
<div class="gate-addons">
|
|
314
|
+
<div class="gate-tier is-addon">...</div>
|
|
315
|
+
<div class="gate-tier is-addon is-picked">...</div>
|
|
316
|
+
</div> */
|
|
317
|
+
.atelic-ui .gate-tiers .gate-addons {
|
|
318
|
+
grid-column: 1 / -1;
|
|
319
|
+
display: grid;
|
|
320
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
321
|
+
gap: 16px;
|
|
322
|
+
}
|
|
323
|
+
.atelic-ui .gate-tiers .gate-addons .gate-tier.is-addon {
|
|
324
|
+
grid-column: auto;
|
|
325
|
+
}
|
|
326
|
+
@media (max-width: 860px) {
|
|
327
|
+
.atelic-ui .gate-tiers .gate-addons {
|
|
328
|
+
grid-template-columns: 1fr;
|
|
329
|
+
}
|
|
330
|
+
}
|
|
331
|
+
|
|
332
|
+
/* The footnote under the tiers: a credit's terms in one line, led by
|
|
333
|
+
the same mark the card's label carries.
|
|
334
|
+
<p class="gate-footnote"><svg>...</svg><span>...</span></p> */
|
|
335
|
+
.atelic-ui .gate-content .gate-footnote {
|
|
336
|
+
display: flex;
|
|
337
|
+
gap: 8px;
|
|
338
|
+
align-items: flex-start;
|
|
339
|
+
margin: 14px 0 0;
|
|
340
|
+
font-size: 14px;
|
|
341
|
+
line-height: 1.5;
|
|
342
|
+
color: var(--gs-dim);
|
|
343
|
+
}
|
|
344
|
+
.atelic-ui .gate-content .gate-footnote svg {
|
|
345
|
+
width: 14px;
|
|
346
|
+
height: 14px;
|
|
347
|
+
flex: 0 0 auto;
|
|
348
|
+
margin-top: 3px;
|
|
349
|
+
color: var(--primary-bright);
|
|
350
|
+
}
|
|
351
|
+
|
|
352
|
+
/* The icon list: the standard sent artifact list form, each line led
|
|
353
|
+
by a small lucide icon that says what the line means. The sealed
|
|
354
|
+
content inlines the SVGs. */
|
|
355
|
+
.atelic-ui .gate-content ul.icon-list {
|
|
356
|
+
list-style: none;
|
|
357
|
+
margin: 0 0 16px;
|
|
358
|
+
padding: 0;
|
|
359
|
+
display: flex;
|
|
360
|
+
flex-direction: column;
|
|
361
|
+
gap: 12px;
|
|
362
|
+
}
|
|
363
|
+
.atelic-ui .gate-content ul.icon-list li {
|
|
364
|
+
display: flex;
|
|
365
|
+
align-items: flex-start;
|
|
366
|
+
gap: 12px;
|
|
367
|
+
margin: 0;
|
|
368
|
+
list-style: none;
|
|
369
|
+
}
|
|
370
|
+
.atelic-ui .gate-content ul.icon-list svg {
|
|
371
|
+
width: 18px;
|
|
372
|
+
height: 18px;
|
|
373
|
+
flex: 0 0 auto;
|
|
374
|
+
margin-top: 3px;
|
|
375
|
+
color: var(--primary-bright);
|
|
376
|
+
}
|
|
377
|
+
/* The icon list inside a tier card, sized for the card: a tier lists
|
|
378
|
+
what it buys with icons that mean the thing, never checks. These tie
|
|
379
|
+
the document list's selectors, so they sit after them. */
|
|
380
|
+
.atelic-ui .gate-tier ul.icon-list {
|
|
381
|
+
margin: 6px 0 0;
|
|
382
|
+
gap: 8px;
|
|
383
|
+
font-size: 14px;
|
|
384
|
+
line-height: 1.5;
|
|
385
|
+
color: var(--gs-dim);
|
|
386
|
+
}
|
|
387
|
+
.atelic-ui .gate-tier ul.icon-list svg {
|
|
388
|
+
width: 16px;
|
|
389
|
+
height: 16px;
|
|
390
|
+
margin-top: 2px;
|
|
391
|
+
}
|
|
392
|
+
|
|
393
|
+
/* Numbered flow: the ordered list for a step-by-step close. */
|
|
394
|
+
.atelic-ui .gate-content ol {
|
|
395
|
+
margin: 0 0 16px;
|
|
396
|
+
padding-left: 24px;
|
|
397
|
+
display: flex;
|
|
398
|
+
flex-direction: column;
|
|
399
|
+
gap: 10px;
|
|
400
|
+
}
|
|
401
|
+
.atelic-ui .gate-content ol li {
|
|
402
|
+
display: list-item;
|
|
403
|
+
list-style: decimal;
|
|
404
|
+
margin: 0;
|
|
405
|
+
}
|
|
406
|
+
.atelic-ui .gate-content ol li::marker {
|
|
407
|
+
color: var(--primary-bright);
|
|
408
|
+
font-weight: 700;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
/* Icon bullets: a checklist variant of the document list, worn by any
|
|
412
|
+
ul.gate-checks in the sealed content or inside a tier card. */
|
|
413
|
+
.atelic-ui .gate-content ul.gate-checks {
|
|
414
|
+
list-style: none;
|
|
415
|
+
padding-left: 0;
|
|
416
|
+
}
|
|
417
|
+
.atelic-ui .gate-content .gate-checks li {
|
|
418
|
+
position: relative;
|
|
419
|
+
list-style: none;
|
|
420
|
+
padding-left: 26px;
|
|
421
|
+
}
|
|
422
|
+
.atelic-ui .gate-content .gate-checks li::before {
|
|
423
|
+
/* The lucide check, masked so it takes the accent color. A glyph
|
|
424
|
+
character would trip the icons-over-emojis test; an SVG matches
|
|
425
|
+
the icon set the rest of the site draws from. */
|
|
426
|
+
content: "";
|
|
427
|
+
position: absolute;
|
|
428
|
+
left: 0;
|
|
429
|
+
top: 0.28em;
|
|
430
|
+
width: 14px;
|
|
431
|
+
height: 14px;
|
|
432
|
+
background-color: var(--primary-bright);
|
|
433
|
+
-webkit-mask:
|
|
434
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
|
|
435
|
+
center / contain no-repeat;
|
|
436
|
+
mask:
|
|
437
|
+
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
|
|
438
|
+
center / contain no-repeat;
|
|
439
|
+
}
|
|
440
|
+
.atelic-ui .gate-tier ul.gate-checks {
|
|
441
|
+
margin: 6px 0 0;
|
|
442
|
+
display: grid;
|
|
443
|
+
gap: 8px;
|
|
444
|
+
font-size: 14px;
|
|
445
|
+
line-height: 1.5;
|
|
446
|
+
color: var(--gs-dim);
|
|
447
|
+
}
|
|
448
|
+
.atelic-ui .gate-tier .gate-checks li {
|
|
449
|
+
padding-left: 22px;
|
|
450
|
+
}
|
|
451
|
+
|
|
452
|
+
/* ---- the close: sign off, then the person lockup ---- */
|
|
453
|
+
.atelic-ui .gate-sign {
|
|
454
|
+
margin: 44px 0 18px;
|
|
455
|
+
/* The pitch surface sign off is the script face (voice.md rule 9),
|
|
456
|
+
the same face the writeup and the monthly page close on, centered
|
|
457
|
+
on the dark stage. */
|
|
458
|
+
font-family: var(--font-script);
|
|
459
|
+
font-size: clamp(38px, 5.5vw, 56px);
|
|
460
|
+
color: var(--secondary-soft);
|
|
461
|
+
text-align: center;
|
|
462
|
+
}
|
|
463
|
+
.atelic-ui .gate-person {
|
|
464
|
+
display: flex;
|
|
465
|
+
align-items: center;
|
|
466
|
+
justify-content: center;
|
|
467
|
+
gap: 18px;
|
|
468
|
+
text-align: left;
|
|
469
|
+
}
|
|
470
|
+
.atelic-ui .gate-person img {
|
|
471
|
+
width: 88px;
|
|
472
|
+
height: 88px;
|
|
473
|
+
border-radius: 50%;
|
|
474
|
+
object-fit: cover;
|
|
475
|
+
display: block;
|
|
476
|
+
flex: none;
|
|
477
|
+
}
|
|
478
|
+
.atelic-ui .gate-person-name {
|
|
479
|
+
display: block;
|
|
480
|
+
font-weight: 600;
|
|
481
|
+
font-size: 17px;
|
|
482
|
+
color: var(--gs-bright);
|
|
483
|
+
}
|
|
484
|
+
.atelic-ui .gate-person-role {
|
|
485
|
+
display: block;
|
|
486
|
+
margin-top: 4px;
|
|
487
|
+
font-size: 14px;
|
|
488
|
+
color: var(--gs-dim);
|
|
489
|
+
}
|
|
490
|
+
.atelic-ui .gate-person-role a {
|
|
491
|
+
color: inherit;
|
|
492
|
+
border-bottom: 1px solid currentColor;
|
|
493
|
+
}
|
|
494
|
+
.atelic-ui .gate-person-mail {
|
|
495
|
+
display: inline-flex;
|
|
496
|
+
align-items: center;
|
|
497
|
+
gap: 7px;
|
|
498
|
+
margin-top: 8px;
|
|
499
|
+
font-size: 14px;
|
|
500
|
+
font-weight: 500;
|
|
501
|
+
letter-spacing: 0.02em;
|
|
502
|
+
color: var(--primary-bright);
|
|
503
|
+
border-bottom: 1px solid currentColor;
|
|
504
|
+
padding-bottom: 1px;
|
|
505
|
+
}
|
|
506
|
+
.atelic-ui .gate-person-mail svg {
|
|
507
|
+
width: 15px;
|
|
508
|
+
height: 15px;
|
|
509
|
+
}
|
|
510
|
+
|
|
511
|
+
/* =================================================================
|
|
512
|
+
THE MONTHLY PAGE: one letter sheet and its hosted twin. Three
|
|
513
|
+
renderings of one DOM, the same as the writeup's:
|
|
514
|
+
|
|
515
|
+
- Screen (wide): the sheet at letter width on the surface, under the
|
|
516
|
+
artifact shell's dark header.
|
|
517
|
+
- Column (under 900px): the same sheet at phone type sizes; the leads
|
|
518
|
+
run two across and each grade row folds into a labeled block.
|
|
519
|
+
- Print: exactly one letter sheet, zero page margin, the header and
|
|
520
|
+
the credit band dropped. Content that misses the sheet is clipped,
|
|
521
|
+
never reflowed, so a print of one sheet is the check.
|
|
522
|
+
|
|
523
|
+
Tokens only (theme.css), except the printed sheet's white. The grade
|
|
524
|
+
chip and the sign off are the shared classes in @atelic-action/ui's
|
|
525
|
+
styles/artifact.css.
|
|
526
|
+
================================================================= */
|
|
527
|
+
.atelic-ui .rp {
|
|
528
|
+
--rp-ink: var(--ink);
|
|
529
|
+
--rp-ink-soft: var(--ink-soft);
|
|
530
|
+
--rp-ink-faint: var(--neutral-500);
|
|
531
|
+
--rp-rule: var(--hairline-strong);
|
|
532
|
+
--rp-accent: var(--primary);
|
|
533
|
+
--rp-paper: #ffffff;
|
|
534
|
+
font-family: var(--font-sans);
|
|
535
|
+
color: var(--rp-ink);
|
|
536
|
+
background: var(--surface);
|
|
537
|
+
padding: calc(var(--nav-height) + 32px) 24px 48px;
|
|
538
|
+
}
|
|
539
|
+
.atelic-ui .rp a {
|
|
540
|
+
color: inherit;
|
|
541
|
+
text-decoration: none;
|
|
542
|
+
}
|
|
543
|
+
.atelic-ui .rp a:hover {
|
|
544
|
+
color: var(--rp-accent);
|
|
545
|
+
}
|
|
546
|
+
|
|
547
|
+
/* ---- the sheet ---- */
|
|
548
|
+
.atelic-ui .rp-sheet {
|
|
549
|
+
width: 8.5in;
|
|
550
|
+
max-width: 100%;
|
|
551
|
+
margin: 0 auto;
|
|
552
|
+
padding: 0.5in 0.65in 0.45in;
|
|
553
|
+
display: flex;
|
|
554
|
+
flex-direction: column;
|
|
555
|
+
background: var(--rp-paper);
|
|
556
|
+
border-radius: 7px;
|
|
557
|
+
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
|
|
558
|
+
print-color-adjust: exact;
|
|
559
|
+
-webkit-print-color-adjust: exact;
|
|
560
|
+
}
|
|
561
|
+
|
|
562
|
+
/* ---- the title and the period ---- */
|
|
563
|
+
.atelic-ui .rp-period {
|
|
564
|
+
font-family: var(--font-mono);
|
|
565
|
+
font-size: 8pt;
|
|
566
|
+
letter-spacing: 0.12em;
|
|
567
|
+
text-transform: uppercase;
|
|
568
|
+
color: var(--rp-accent);
|
|
569
|
+
}
|
|
570
|
+
.atelic-ui .rp h1 {
|
|
571
|
+
font-family: var(--font-sans);
|
|
572
|
+
font-size: 25pt;
|
|
573
|
+
font-weight: 600;
|
|
574
|
+
letter-spacing: -0.03em;
|
|
575
|
+
line-height: 1.08;
|
|
576
|
+
margin: 6pt 0 14pt;
|
|
577
|
+
text-wrap: balance;
|
|
578
|
+
color: var(--rp-ink);
|
|
579
|
+
}
|
|
580
|
+
|
|
581
|
+
/* ---- the leads: four questions, each a figure and one sentence ---- */
|
|
582
|
+
.atelic-ui .rp-leads {
|
|
583
|
+
display: grid;
|
|
584
|
+
grid-template-columns: repeat(4, minmax(0, 1fr));
|
|
585
|
+
gap: 0 16pt;
|
|
586
|
+
padding: 10pt 0 14pt;
|
|
587
|
+
border-top: 1.5px solid var(--rp-ink);
|
|
588
|
+
border-bottom: 1px solid var(--rp-rule);
|
|
589
|
+
}
|
|
590
|
+
.atelic-ui .rp-lead {
|
|
591
|
+
display: flex;
|
|
592
|
+
flex-direction: column;
|
|
593
|
+
gap: 3pt;
|
|
594
|
+
min-width: 0;
|
|
595
|
+
}
|
|
596
|
+
.atelic-ui .rp-q {
|
|
597
|
+
margin: 0;
|
|
598
|
+
font-family: var(--font-mono);
|
|
599
|
+
font-size: 7pt;
|
|
600
|
+
font-weight: 500;
|
|
601
|
+
letter-spacing: 0.1em;
|
|
602
|
+
line-height: 1.4;
|
|
603
|
+
text-transform: uppercase;
|
|
604
|
+
color: var(--rp-accent);
|
|
605
|
+
}
|
|
606
|
+
.atelic-ui .rp-figure {
|
|
607
|
+
font-size: 18pt;
|
|
608
|
+
font-weight: 600;
|
|
609
|
+
letter-spacing: -0.02em;
|
|
610
|
+
line-height: 1.1;
|
|
611
|
+
color: var(--rp-ink);
|
|
612
|
+
}
|
|
613
|
+
.atelic-ui .rp-lead p {
|
|
614
|
+
margin: 0;
|
|
615
|
+
font-size: 8.4pt;
|
|
616
|
+
line-height: 1.4;
|
|
617
|
+
color: var(--rp-ink-soft);
|
|
618
|
+
text-wrap: pretty;
|
|
619
|
+
}
|
|
620
|
+
|
|
621
|
+
/* ---- the seven grades: now, last month, baseline, what moved ---- */
|
|
622
|
+
.atelic-ui .rp-grades {
|
|
623
|
+
width: 100%;
|
|
624
|
+
border-collapse: collapse;
|
|
625
|
+
margin: 14pt 0 16pt;
|
|
626
|
+
font-size: 8.4pt;
|
|
627
|
+
line-height: 1.35;
|
|
628
|
+
}
|
|
629
|
+
.atelic-ui .rp-grades th {
|
|
630
|
+
text-align: left;
|
|
631
|
+
padding: 0 6pt 4pt 0;
|
|
632
|
+
border-bottom: 1.5px solid var(--rp-ink);
|
|
633
|
+
font-family: var(--font-mono);
|
|
634
|
+
font-size: 6.5pt;
|
|
635
|
+
font-weight: 500;
|
|
636
|
+
letter-spacing: 0.1em;
|
|
637
|
+
text-transform: uppercase;
|
|
638
|
+
white-space: nowrap;
|
|
639
|
+
color: var(--rp-ink-faint);
|
|
640
|
+
}
|
|
641
|
+
.atelic-ui .rp-grades td {
|
|
642
|
+
padding: 4pt 6pt 4pt 0;
|
|
643
|
+
border-bottom: 1px solid var(--rp-rule);
|
|
644
|
+
vertical-align: top;
|
|
645
|
+
color: var(--rp-ink);
|
|
646
|
+
}
|
|
647
|
+
.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) td {
|
|
648
|
+
border-top: 1px solid var(--rp-ink);
|
|
649
|
+
}
|
|
650
|
+
.atelic-ui .rp-tier {
|
|
651
|
+
width: 0.85in;
|
|
652
|
+
font-family: var(--font-mono);
|
|
653
|
+
font-size: 7pt;
|
|
654
|
+
letter-spacing: 0.1em;
|
|
655
|
+
text-transform: uppercase;
|
|
656
|
+
white-space: nowrap;
|
|
657
|
+
}
|
|
658
|
+
.atelic-ui .rp-section {
|
|
659
|
+
width: 1.9in;
|
|
660
|
+
font-weight: 600;
|
|
661
|
+
white-space: nowrap;
|
|
662
|
+
}
|
|
663
|
+
.atelic-ui .rp-now,
|
|
664
|
+
.atelic-ui .rp-earlier {
|
|
665
|
+
width: 0.65in;
|
|
666
|
+
white-space: nowrap;
|
|
667
|
+
}
|
|
668
|
+
.atelic-ui .rp-grades .op-grade {
|
|
669
|
+
margin-left: 0;
|
|
670
|
+
}
|
|
671
|
+
/* The earlier letters print muted; this month's is the one judgement. */
|
|
672
|
+
.atelic-ui .rp-earlier .op-grade {
|
|
673
|
+
opacity: 0.45;
|
|
674
|
+
}
|
|
675
|
+
.atelic-ui .rp-moved {
|
|
676
|
+
color: var(--rp-ink-soft);
|
|
677
|
+
text-wrap: pretty;
|
|
678
|
+
}
|
|
679
|
+
|
|
680
|
+
/* ---- the close ---- */
|
|
681
|
+
.atelic-ui .rp-close {
|
|
682
|
+
margin-top: auto;
|
|
683
|
+
padding-top: 10pt;
|
|
684
|
+
border-top: 1px solid var(--rp-rule);
|
|
685
|
+
font-size: 8pt;
|
|
686
|
+
line-height: 1.6;
|
|
687
|
+
color: var(--rp-ink-faint);
|
|
688
|
+
}
|
|
689
|
+
|
|
690
|
+
/* ---- the column: phones and portrait tablets ---- */
|
|
691
|
+
@media screen and (max-width: 899px) {
|
|
692
|
+
.atelic-ui .rp {
|
|
693
|
+
padding: calc(var(--nav-height) + 8px) 0 0;
|
|
694
|
+
}
|
|
695
|
+
.atelic-ui .rp-sheet {
|
|
696
|
+
padding: 22px 18px 24px;
|
|
697
|
+
border-radius: 0;
|
|
698
|
+
box-shadow: none;
|
|
699
|
+
}
|
|
700
|
+
.atelic-ui .rp-period {
|
|
701
|
+
font-size: 11px;
|
|
702
|
+
}
|
|
703
|
+
.atelic-ui .rp h1 {
|
|
704
|
+
font-size: 30px;
|
|
705
|
+
margin: 8px 0 16px;
|
|
706
|
+
}
|
|
707
|
+
.atelic-ui .rp-leads {
|
|
708
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
709
|
+
gap: 18px 16px;
|
|
710
|
+
padding: 16px 0 18px;
|
|
711
|
+
}
|
|
712
|
+
.atelic-ui .rp-q {
|
|
713
|
+
font-size: 11px;
|
|
714
|
+
}
|
|
715
|
+
.atelic-ui .rp-figure {
|
|
716
|
+
font-size: 24px;
|
|
717
|
+
}
|
|
718
|
+
.atelic-ui .rp-lead p {
|
|
719
|
+
font-size: 14px;
|
|
720
|
+
line-height: 1.45;
|
|
721
|
+
}
|
|
722
|
+
.atelic-ui .rp-grades {
|
|
723
|
+
font-size: 14px;
|
|
724
|
+
}
|
|
725
|
+
.atelic-ui .rp-grades thead {
|
|
726
|
+
position: absolute;
|
|
727
|
+
width: 1px;
|
|
728
|
+
height: 1px;
|
|
729
|
+
overflow: hidden;
|
|
730
|
+
clip: rect(0, 0, 0, 0);
|
|
731
|
+
white-space: nowrap;
|
|
732
|
+
}
|
|
733
|
+
.atelic-ui .rp-grades tr {
|
|
734
|
+
display: flex;
|
|
735
|
+
flex-wrap: wrap;
|
|
736
|
+
align-items: baseline;
|
|
737
|
+
gap: 6px 14px;
|
|
738
|
+
padding: 10px 0;
|
|
739
|
+
border-bottom: 1px solid var(--rp-rule);
|
|
740
|
+
}
|
|
741
|
+
.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) {
|
|
742
|
+
border-top: 1px solid var(--rp-ink);
|
|
743
|
+
}
|
|
744
|
+
.atelic-ui .rp-grades td {
|
|
745
|
+
display: block;
|
|
746
|
+
width: auto;
|
|
747
|
+
padding: 0;
|
|
748
|
+
border: none;
|
|
749
|
+
}
|
|
750
|
+
.atelic-ui .rp-grades tr.is-tier-start:not(:first-child) td {
|
|
751
|
+
border: none;
|
|
752
|
+
}
|
|
753
|
+
/* Each row folds to the tier on its own line (first row of a tier
|
|
754
|
+
only), the section, the three letters, then what moved. */
|
|
755
|
+
.atelic-ui .rp-grades .rp-tier,
|
|
756
|
+
.atelic-ui .rp-grades .rp-section,
|
|
757
|
+
.atelic-ui .rp-grades .rp-moved {
|
|
758
|
+
width: 100%;
|
|
759
|
+
}
|
|
760
|
+
.atelic-ui .rp-tier {
|
|
761
|
+
font-size: 10px;
|
|
762
|
+
}
|
|
763
|
+
.atelic-ui .rp-tier:empty {
|
|
764
|
+
display: none;
|
|
765
|
+
}
|
|
766
|
+
.atelic-ui .rp-section {
|
|
767
|
+
white-space: normal;
|
|
768
|
+
}
|
|
769
|
+
.atelic-ui .rp-now::before,
|
|
770
|
+
.atelic-ui .rp-earlier::before {
|
|
771
|
+
content: attr(data-label);
|
|
772
|
+
margin-right: 6px;
|
|
773
|
+
font-family: var(--font-mono);
|
|
774
|
+
font-size: 10px;
|
|
775
|
+
letter-spacing: 0.08em;
|
|
776
|
+
text-transform: uppercase;
|
|
777
|
+
color: var(--rp-ink-faint);
|
|
778
|
+
}
|
|
779
|
+
.atelic-ui .rp-earlier:empty {
|
|
780
|
+
display: none;
|
|
781
|
+
}
|
|
782
|
+
.atelic-ui .rp-close {
|
|
783
|
+
padding-top: 16px;
|
|
784
|
+
font-size: 13px;
|
|
785
|
+
}
|
|
786
|
+
}
|
|
787
|
+
|
|
788
|
+
/* ---- print: one letter sheet, the document alone ---- */
|
|
789
|
+
@page {
|
|
790
|
+
size: letter;
|
|
791
|
+
margin: 0;
|
|
792
|
+
}
|
|
793
|
+
@media print {
|
|
794
|
+
html,
|
|
795
|
+
body {
|
|
796
|
+
margin: 0;
|
|
797
|
+
padding: 0;
|
|
798
|
+
background: none;
|
|
799
|
+
}
|
|
800
|
+
.atelic-ui:has(.rp) .nav,
|
|
801
|
+
.atelic-ui:has(.rp) .skip-link,
|
|
802
|
+
.atelic-ui:has(.rp) .credit-bar {
|
|
803
|
+
display: none;
|
|
804
|
+
}
|
|
805
|
+
.atelic-ui .rp {
|
|
806
|
+
padding: 0;
|
|
807
|
+
background: none;
|
|
808
|
+
}
|
|
809
|
+
.atelic-ui .rp-sheet {
|
|
810
|
+
width: 8.5in;
|
|
811
|
+
height: 11in;
|
|
812
|
+
max-width: none;
|
|
813
|
+
margin: 0;
|
|
814
|
+
overflow: hidden;
|
|
815
|
+
border-radius: 0;
|
|
816
|
+
box-shadow: none;
|
|
817
|
+
}
|
|
818
|
+
}
|
|
819
|
+
|
|
820
|
+
/* =================================================================
|
|
821
|
+
THE WRITEUP: a web page first, and the printed copy from the same
|
|
822
|
+
page.
|
|
823
|
+
|
|
824
|
+
- Phone first: the base rules are the phone's. Each section is a card
|
|
825
|
+
of small blocks in one column; a table's rows stack, each fact
|
|
826
|
+
wearing its column's label, so nothing scrolls sideways.
|
|
827
|
+
- Wide (721px and up): the same cards with room: the overview on one
|
|
828
|
+
line a section, real table columns, the owner's screen beside the
|
|
829
|
+
findings.
|
|
830
|
+
- Print: the chrome steps aside, the lockup and the pointer to the
|
|
831
|
+
hosted page appear, the type comes down, and the cards flow across
|
|
832
|
+
letter pages. Nothing is clipped and no block splits across pages.
|
|
833
|
+
|
|
834
|
+
Tokens only (theme.css). The blocks inside a section (the checklist,
|
|
835
|
+
the sortable table, the charts, the stat row, the callout, the
|
|
836
|
+
disclosure) and their tones are @atelic-action/ui's
|
|
837
|
+
styles/components.css; this sheet sets the document around them and their sizes here.
|
|
838
|
+
================================================================= */
|
|
839
|
+
.atelic-ui .op {
|
|
840
|
+
--op-ink: var(--ink);
|
|
841
|
+
--op-ink-soft: var(--ink-soft);
|
|
842
|
+
--op-ink-faint: var(--neutral-500);
|
|
843
|
+
--op-rule: var(--neutral-100);
|
|
844
|
+
--op-accent: var(--primary);
|
|
845
|
+
--op-card: var(--card);
|
|
846
|
+
font-family: var(--font-sans);
|
|
847
|
+
color: var(--op-ink);
|
|
848
|
+
background: var(--surface);
|
|
849
|
+
min-height: 100vh;
|
|
850
|
+
}
|
|
851
|
+
.atelic-ui .op a {
|
|
852
|
+
color: inherit;
|
|
853
|
+
text-decoration: none;
|
|
854
|
+
}
|
|
855
|
+
.atelic-ui .op-doc {
|
|
856
|
+
max-width: 920px;
|
|
857
|
+
margin: 0 auto;
|
|
858
|
+
padding: calc(var(--nav-height) + 22px) 16px 48px;
|
|
859
|
+
font-size: 16px;
|
|
860
|
+
line-height: 1.5;
|
|
861
|
+
print-color-adjust: exact;
|
|
862
|
+
-webkit-print-color-adjust: exact;
|
|
863
|
+
}
|
|
864
|
+
|
|
865
|
+
/* ---- the head: who it is for, what it is ---- */
|
|
866
|
+
.atelic-ui .op-top {
|
|
867
|
+
display: none;
|
|
868
|
+
}
|
|
869
|
+
.atelic-ui .op-meta {
|
|
870
|
+
margin: 0 0 10px;
|
|
871
|
+
font-family: var(--font-mono);
|
|
872
|
+
font-size: 12.5px;
|
|
873
|
+
letter-spacing: 0.04em;
|
|
874
|
+
color: var(--op-ink-faint);
|
|
875
|
+
}
|
|
876
|
+
.atelic-ui .op-meta b {
|
|
877
|
+
font-weight: 500;
|
|
878
|
+
color: var(--op-ink-soft);
|
|
879
|
+
}
|
|
880
|
+
/* On a phone the date takes its own line; wide, it follows a middle dot. */
|
|
881
|
+
.atelic-ui .op-meta-sep {
|
|
882
|
+
display: none;
|
|
883
|
+
}
|
|
884
|
+
.atelic-ui .op-meta-date {
|
|
885
|
+
display: block;
|
|
886
|
+
}
|
|
887
|
+
.atelic-ui .op h1 {
|
|
888
|
+
font-size: clamp(32px, 5vw, 44px);
|
|
889
|
+
font-weight: 650;
|
|
890
|
+
letter-spacing: -0.03em;
|
|
891
|
+
line-height: 1.08;
|
|
892
|
+
margin: 0;
|
|
893
|
+
text-wrap: balance;
|
|
894
|
+
color: var(--op-ink);
|
|
895
|
+
}
|
|
896
|
+
.atelic-ui .op-intro {
|
|
897
|
+
margin: 14px 0 0;
|
|
898
|
+
max-width: 62ch;
|
|
899
|
+
font-size: 16.5px;
|
|
900
|
+
line-height: 1.5;
|
|
901
|
+
color: var(--op-ink-soft);
|
|
902
|
+
text-wrap: pretty;
|
|
903
|
+
}
|
|
904
|
+
|
|
905
|
+
/* ---- the grade chip, at web sizes ---- */
|
|
906
|
+
.atelic-ui .op .op-grade {
|
|
907
|
+
display: inline-grid;
|
|
908
|
+
place-items: center;
|
|
909
|
+
margin: 0;
|
|
910
|
+
padding: 0;
|
|
911
|
+
width: 26px;
|
|
912
|
+
height: 26px;
|
|
913
|
+
border-radius: 8px;
|
|
914
|
+
font-family: var(--font-sans);
|
|
915
|
+
font-size: 14px;
|
|
916
|
+
font-weight: 700;
|
|
917
|
+
letter-spacing: 0;
|
|
918
|
+
line-height: 1;
|
|
919
|
+
vertical-align: middle;
|
|
920
|
+
flex: none;
|
|
921
|
+
}
|
|
922
|
+
|
|
923
|
+
/* ---- the overview: the key, then every section under its tier, each a
|
|
924
|
+
grade, a name that links to the section, and one plain read ---- */
|
|
925
|
+
.atelic-ui .op-ov {
|
|
926
|
+
margin-top: 22px;
|
|
927
|
+
scroll-margin-top: calc(var(--nav-height) + 16px);
|
|
928
|
+
}
|
|
929
|
+
.atelic-ui .op-ov-head {
|
|
930
|
+
display: flex;
|
|
931
|
+
flex-wrap: wrap;
|
|
932
|
+
align-items: center;
|
|
933
|
+
justify-content: space-between;
|
|
934
|
+
gap: 8px 20px;
|
|
935
|
+
margin-bottom: 10px;
|
|
936
|
+
}
|
|
937
|
+
.atelic-ui .op-ov-title {
|
|
938
|
+
font-size: 13px;
|
|
939
|
+
font-family: var(--font-mono);
|
|
940
|
+
font-weight: 500;
|
|
941
|
+
letter-spacing: 0.1em;
|
|
942
|
+
text-transform: uppercase;
|
|
943
|
+
color: var(--op-ink-faint);
|
|
944
|
+
margin: 0;
|
|
945
|
+
}
|
|
946
|
+
.atelic-ui .op-legend {
|
|
947
|
+
list-style: none;
|
|
948
|
+
margin: 0;
|
|
949
|
+
padding: 0;
|
|
950
|
+
display: flex;
|
|
951
|
+
flex-wrap: wrap;
|
|
952
|
+
gap: 6px 16px;
|
|
953
|
+
font-size: 13.5px;
|
|
954
|
+
color: var(--op-ink-soft);
|
|
955
|
+
}
|
|
956
|
+
.atelic-ui .op-legend li {
|
|
957
|
+
display: inline-flex;
|
|
958
|
+
align-items: center;
|
|
959
|
+
gap: 7px;
|
|
960
|
+
}
|
|
961
|
+
.atelic-ui .op-legend .op-grade {
|
|
962
|
+
width: 22px;
|
|
963
|
+
height: 22px;
|
|
964
|
+
border-radius: 6px;
|
|
965
|
+
font-size: 12px;
|
|
966
|
+
}
|
|
967
|
+
.atelic-ui .op-ov-card {
|
|
968
|
+
background: var(--op-card);
|
|
969
|
+
border: 1px solid var(--op-rule);
|
|
970
|
+
border-radius: var(--radius-md);
|
|
971
|
+
box-shadow: var(--shadow-sm);
|
|
972
|
+
overflow: hidden;
|
|
973
|
+
}
|
|
974
|
+
.atelic-ui .op-ov-tier-label {
|
|
975
|
+
padding: 7px 16px;
|
|
976
|
+
background: var(--surface-alt);
|
|
977
|
+
font-family: var(--font-mono);
|
|
978
|
+
font-size: 11.5px;
|
|
979
|
+
letter-spacing: 0.1em;
|
|
980
|
+
text-transform: uppercase;
|
|
981
|
+
color: var(--op-ink-soft);
|
|
982
|
+
}
|
|
983
|
+
.atelic-ui .op-ov-tier ul {
|
|
984
|
+
list-style: none;
|
|
985
|
+
margin: 0;
|
|
986
|
+
padding: 0;
|
|
987
|
+
}
|
|
988
|
+
.atelic-ui .op-ov-row {
|
|
989
|
+
position: relative;
|
|
990
|
+
display: grid;
|
|
991
|
+
grid-template-columns: auto minmax(0, 1fr) auto;
|
|
992
|
+
column-gap: 12px;
|
|
993
|
+
row-gap: 2px;
|
|
994
|
+
align-items: start;
|
|
995
|
+
padding: 12px 12px 12px 16px;
|
|
996
|
+
border-top: 1px solid var(--op-rule);
|
|
997
|
+
}
|
|
998
|
+
.atelic-ui .op-ov-row:hover {
|
|
999
|
+
background: var(--surface);
|
|
1000
|
+
}
|
|
1001
|
+
.atelic-ui .op-ov-grade {
|
|
1002
|
+
grid-row: 1 / span 2;
|
|
1003
|
+
display: inline-flex;
|
|
1004
|
+
align-items: center;
|
|
1005
|
+
gap: 6px;
|
|
1006
|
+
}
|
|
1007
|
+
.atelic-ui .op-ov-grade .op-grade {
|
|
1008
|
+
width: 30px;
|
|
1009
|
+
height: 30px;
|
|
1010
|
+
border-radius: 9px;
|
|
1011
|
+
font-size: 15px;
|
|
1012
|
+
}
|
|
1013
|
+
.atelic-ui .op-ov-before .op-grade {
|
|
1014
|
+
opacity: 0.45;
|
|
1015
|
+
}
|
|
1016
|
+
.atelic-ui .op-ov-name {
|
|
1017
|
+
font-size: 16px;
|
|
1018
|
+
font-weight: 650;
|
|
1019
|
+
letter-spacing: -0.01em;
|
|
1020
|
+
line-height: 1.35;
|
|
1021
|
+
padding-top: 3px;
|
|
1022
|
+
}
|
|
1023
|
+
/* The name is the link, and it covers the row; a link inside the read
|
|
1024
|
+
sits above it. */
|
|
1025
|
+
.atelic-ui .op-ov-name a::after {
|
|
1026
|
+
content: "";
|
|
1027
|
+
position: absolute;
|
|
1028
|
+
inset: 0;
|
|
1029
|
+
}
|
|
1030
|
+
.atelic-ui .op-ov-row:hover .op-ov-name {
|
|
1031
|
+
color: var(--op-accent);
|
|
1032
|
+
}
|
|
1033
|
+
.atelic-ui .op-ov-read {
|
|
1034
|
+
grid-column: 2;
|
|
1035
|
+
font-size: 15px;
|
|
1036
|
+
line-height: 1.45;
|
|
1037
|
+
color: var(--op-ink-soft);
|
|
1038
|
+
text-wrap: pretty;
|
|
1039
|
+
}
|
|
1040
|
+
.atelic-ui .op-ov-read a {
|
|
1041
|
+
position: relative;
|
|
1042
|
+
z-index: 1;
|
|
1043
|
+
color: var(--op-accent);
|
|
1044
|
+
text-decoration: underline;
|
|
1045
|
+
text-underline-offset: 2px;
|
|
1046
|
+
}
|
|
1047
|
+
.atelic-ui .op-ov-go {
|
|
1048
|
+
grid-column: 3;
|
|
1049
|
+
grid-row: 1;
|
|
1050
|
+
margin-top: 5px;
|
|
1051
|
+
color: var(--neutral-300);
|
|
1052
|
+
}
|
|
1053
|
+
|
|
1054
|
+
/* ---- a part: the tier and the question it answers ---- */
|
|
1055
|
+
.atelic-ui .op-part {
|
|
1056
|
+
margin: 34px 0 10px;
|
|
1057
|
+
scroll-margin-top: calc(var(--nav-height) + 16px);
|
|
1058
|
+
}
|
|
1059
|
+
.atelic-ui .op-part h2 {
|
|
1060
|
+
font-size: 27px;
|
|
1061
|
+
font-weight: 650;
|
|
1062
|
+
letter-spacing: -0.025em;
|
|
1063
|
+
line-height: 1.1;
|
|
1064
|
+
margin: 0;
|
|
1065
|
+
color: var(--op-ink);
|
|
1066
|
+
}
|
|
1067
|
+
.atelic-ui .op-part p {
|
|
1068
|
+
margin: 6px 0 0;
|
|
1069
|
+
font-size: 16.5px;
|
|
1070
|
+
color: var(--op-ink-soft);
|
|
1071
|
+
}
|
|
1072
|
+
|
|
1073
|
+
/* ---- a topic: one section, a card of blocks ---- */
|
|
1074
|
+
.atelic-ui .op-topic {
|
|
1075
|
+
background: var(--op-card);
|
|
1076
|
+
border: 1px solid var(--op-rule);
|
|
1077
|
+
border-radius: var(--radius-md);
|
|
1078
|
+
box-shadow: var(--shadow-sm);
|
|
1079
|
+
padding: 18px 16px 16px;
|
|
1080
|
+
margin-top: 12px;
|
|
1081
|
+
scroll-margin-top: calc(var(--nav-height) + 16px);
|
|
1082
|
+
}
|
|
1083
|
+
.atelic-ui .op-topic-head {
|
|
1084
|
+
display: flex;
|
|
1085
|
+
justify-content: space-between;
|
|
1086
|
+
align-items: flex-start;
|
|
1087
|
+
gap: 20px;
|
|
1088
|
+
}
|
|
1089
|
+
.atelic-ui .op-topic h3 {
|
|
1090
|
+
font-size: 21px;
|
|
1091
|
+
font-weight: 650;
|
|
1092
|
+
letter-spacing: -0.02em;
|
|
1093
|
+
line-height: 1.2;
|
|
1094
|
+
margin: 0;
|
|
1095
|
+
color: var(--op-ink);
|
|
1096
|
+
}
|
|
1097
|
+
.atelic-ui .op-topic h3 a {
|
|
1098
|
+
display: inline-flex;
|
|
1099
|
+
align-items: center;
|
|
1100
|
+
gap: 6px;
|
|
1101
|
+
border-bottom: 1px solid var(--neutral-200);
|
|
1102
|
+
}
|
|
1103
|
+
.atelic-ui .op-topic h3 a svg {
|
|
1104
|
+
color: var(--op-ink-faint);
|
|
1105
|
+
}
|
|
1106
|
+
.atelic-ui .op-topic h3 a:hover,
|
|
1107
|
+
.atelic-ui .op-topic h3 a:hover svg {
|
|
1108
|
+
color: var(--op-accent);
|
|
1109
|
+
border-color: var(--op-accent);
|
|
1110
|
+
}
|
|
1111
|
+
.atelic-ui .op-def {
|
|
1112
|
+
margin: 6px 0 0;
|
|
1113
|
+
font-size: 16px;
|
|
1114
|
+
line-height: 1.45;
|
|
1115
|
+
color: var(--op-ink-soft);
|
|
1116
|
+
text-wrap: pretty;
|
|
1117
|
+
}
|
|
1118
|
+
/* why the letter: the rule the section met, in a line */
|
|
1119
|
+
.atelic-ui .op-why {
|
|
1120
|
+
margin: 6px 0 0;
|
|
1121
|
+
font-size: 14.5px;
|
|
1122
|
+
line-height: 1.45;
|
|
1123
|
+
color: var(--op-ink-soft);
|
|
1124
|
+
text-wrap: pretty;
|
|
1125
|
+
}
|
|
1126
|
+
.atelic-ui .op-why b {
|
|
1127
|
+
font-weight: 650;
|
|
1128
|
+
color: var(--op-ink);
|
|
1129
|
+
}
|
|
1130
|
+
.atelic-ui .op-topic-head > .op-grade {
|
|
1131
|
+
width: 42px;
|
|
1132
|
+
height: 42px;
|
|
1133
|
+
border-radius: 12px;
|
|
1134
|
+
font-size: 21px;
|
|
1135
|
+
}
|
|
1136
|
+
|
|
1137
|
+
/* ---- blocks inside a topic, one under another ---- */
|
|
1138
|
+
.atelic-ui .op-blocks {
|
|
1139
|
+
display: grid;
|
|
1140
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1141
|
+
}
|
|
1142
|
+
.atelic-ui .op-block {
|
|
1143
|
+
margin-top: 16px;
|
|
1144
|
+
padding-top: 16px;
|
|
1145
|
+
border-top: 1px solid var(--op-rule);
|
|
1146
|
+
min-width: 0;
|
|
1147
|
+
}
|
|
1148
|
+
.atelic-ui .op-block-head {
|
|
1149
|
+
margin-bottom: 12px;
|
|
1150
|
+
}
|
|
1151
|
+
.atelic-ui .op-block-head h4 {
|
|
1152
|
+
font-size: 16px;
|
|
1153
|
+
font-weight: 650;
|
|
1154
|
+
letter-spacing: -0.005em;
|
|
1155
|
+
margin: 0;
|
|
1156
|
+
color: var(--op-ink);
|
|
1157
|
+
}
|
|
1158
|
+
.atelic-ui .op-block-head p {
|
|
1159
|
+
margin: 3px 0 0;
|
|
1160
|
+
font-size: 15px;
|
|
1161
|
+
line-height: 1.45;
|
|
1162
|
+
color: var(--op-ink-soft);
|
|
1163
|
+
text-wrap: pretty;
|
|
1164
|
+
}
|
|
1165
|
+
.atelic-ui .op-note {
|
|
1166
|
+
margin: 12px 0 0;
|
|
1167
|
+
font-size: 15px;
|
|
1168
|
+
line-height: 1.5;
|
|
1169
|
+
color: var(--op-ink-soft);
|
|
1170
|
+
text-wrap: pretty;
|
|
1171
|
+
}
|
|
1172
|
+
.atelic-ui .op-note b {
|
|
1173
|
+
color: var(--op-ink);
|
|
1174
|
+
font-weight: 600;
|
|
1175
|
+
}
|
|
1176
|
+
.atelic-ui .op-dash {
|
|
1177
|
+
display: inline-block;
|
|
1178
|
+
width: 14px;
|
|
1179
|
+
height: 1.5px;
|
|
1180
|
+
vertical-align: 0.3em;
|
|
1181
|
+
background: var(--neutral-300);
|
|
1182
|
+
}
|
|
1183
|
+
|
|
1184
|
+
/* The blocks are the shared package's components. These are the writeup's
|
|
1185
|
+
sizes for them. */
|
|
1186
|
+
.atelic-ui .op-checks .checklist,
|
|
1187
|
+
.atelic-ui .op-scale .threshold-scale {
|
|
1188
|
+
font-size: 15px;
|
|
1189
|
+
}
|
|
1190
|
+
.atelic-ui .op-bar .chart-key,
|
|
1191
|
+
.atelic-ui .op-columns .chart-key {
|
|
1192
|
+
font-size: 13px;
|
|
1193
|
+
}
|
|
1194
|
+
|
|
1195
|
+
/* the table: its layout is the shared DataTable's; these are the writeup's
|
|
1196
|
+
own sizes and the two line row names. */
|
|
1197
|
+
.atelic-ui .op-table .data-table {
|
|
1198
|
+
font-size: 15px;
|
|
1199
|
+
}
|
|
1200
|
+
.atelic-ui .op-table tbody th b {
|
|
1201
|
+
display: block;
|
|
1202
|
+
font-weight: 600;
|
|
1203
|
+
}
|
|
1204
|
+
.atelic-ui .op-table tbody th a,
|
|
1205
|
+
.atelic-ui .op-table .op-sub {
|
|
1206
|
+
display: block;
|
|
1207
|
+
font-family: var(--font-mono);
|
|
1208
|
+
font-size: 12px;
|
|
1209
|
+
color: var(--op-ink-faint);
|
|
1210
|
+
overflow-wrap: anywhere;
|
|
1211
|
+
}
|
|
1212
|
+
.atelic-ui .op-table tbody th a:hover {
|
|
1213
|
+
color: var(--op-accent);
|
|
1214
|
+
}
|
|
1215
|
+
.atelic-ui .op-table tr[data-tone="bad"] th b {
|
|
1216
|
+
color: var(--tone-bad);
|
|
1217
|
+
}
|
|
1218
|
+
.atelic-ui .op-table td {
|
|
1219
|
+
white-space: nowrap;
|
|
1220
|
+
}
|
|
1221
|
+
/* A cell of running words wraps; a cell of figures never does. */
|
|
1222
|
+
.atelic-ui .op-table td:has(.op-wrap) {
|
|
1223
|
+
white-space: normal;
|
|
1224
|
+
}
|
|
1225
|
+
.atelic-ui .op-mark-cell {
|
|
1226
|
+
display: inline-flex;
|
|
1227
|
+
align-items: center;
|
|
1228
|
+
gap: 6px;
|
|
1229
|
+
color: var(--tone);
|
|
1230
|
+
font-weight: 600;
|
|
1231
|
+
}
|
|
1232
|
+
/* the icon keeps its size however long the words beside it run */
|
|
1233
|
+
.atelic-ui .op-mark-cell svg {
|
|
1234
|
+
flex: none;
|
|
1235
|
+
}
|
|
1236
|
+
.atelic-ui .op-rating {
|
|
1237
|
+
display: inline-flex;
|
|
1238
|
+
align-items: center;
|
|
1239
|
+
gap: 4px;
|
|
1240
|
+
font-weight: 600;
|
|
1241
|
+
color: var(--tone, var(--op-ink));
|
|
1242
|
+
}
|
|
1243
|
+
.atelic-ui .op-rating svg {
|
|
1244
|
+
color: var(--tone, var(--tone-warn-fill));
|
|
1245
|
+
fill: currentColor;
|
|
1246
|
+
}
|
|
1247
|
+
|
|
1248
|
+
/* a few big numbers: the shared StatRow, at the writeup's sizes */
|
|
1249
|
+
.atelic-ui .op-stats .stat-row {
|
|
1250
|
+
gap: 18px 28px;
|
|
1251
|
+
}
|
|
1252
|
+
.atelic-ui .op-stats .stat .num {
|
|
1253
|
+
font-size: 28px;
|
|
1254
|
+
font-weight: 700;
|
|
1255
|
+
letter-spacing: -0.02em;
|
|
1256
|
+
line-height: 1.1;
|
|
1257
|
+
color: var(--tone, var(--op-ink));
|
|
1258
|
+
}
|
|
1259
|
+
.atelic-ui .op-stats .stat-delta {
|
|
1260
|
+
font-size: 13px;
|
|
1261
|
+
}
|
|
1262
|
+
.atelic-ui .op-stats .stat .lbl {
|
|
1263
|
+
margin-top: 6px;
|
|
1264
|
+
font-size: 15px;
|
|
1265
|
+
}
|
|
1266
|
+
|
|
1267
|
+
/* pictures on their own: the same size, side by side */
|
|
1268
|
+
.atelic-ui .op-shots-row {
|
|
1269
|
+
display: grid;
|
|
1270
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
1271
|
+
gap: 16px;
|
|
1272
|
+
max-width: 520px;
|
|
1273
|
+
align-items: start;
|
|
1274
|
+
}
|
|
1275
|
+
/* three sit on one line, on a phone as well */
|
|
1276
|
+
.atelic-ui .op-shots-row[data-count="3"] {
|
|
1277
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
1278
|
+
gap: 12px;
|
|
1279
|
+
max-width: 780px;
|
|
1280
|
+
}
|
|
1281
|
+
.atelic-ui .op-shots-row .op-shot a,
|
|
1282
|
+
.atelic-ui .op-shots-row .op-shot-frame {
|
|
1283
|
+
aspect-ratio: 3 / 4;
|
|
1284
|
+
background: var(--surface);
|
|
1285
|
+
}
|
|
1286
|
+
.atelic-ui .op-shots-row .op-shot img {
|
|
1287
|
+
width: 100%;
|
|
1288
|
+
height: 100%;
|
|
1289
|
+
object-fit: contain;
|
|
1290
|
+
object-position: center;
|
|
1291
|
+
}
|
|
1292
|
+
|
|
1293
|
+
/* the native disclosure: the shared one, at the writeup's sizes */
|
|
1294
|
+
.atelic-ui .op-block.disclosure.is-native {
|
|
1295
|
+
border-top: 1px solid var(--op-rule);
|
|
1296
|
+
}
|
|
1297
|
+
.atelic-ui .op-more .disclosure-label {
|
|
1298
|
+
font-size: 16px;
|
|
1299
|
+
}
|
|
1300
|
+
.atelic-ui .op-more .disclosure-summary {
|
|
1301
|
+
font-size: 15px;
|
|
1302
|
+
line-height: 1.45;
|
|
1303
|
+
}
|
|
1304
|
+
.atelic-ui .op-more.is-native > .disclosure-body {
|
|
1305
|
+
margin-top: 0;
|
|
1306
|
+
}
|
|
1307
|
+
.atelic-ui .op-more-body {
|
|
1308
|
+
display: grid;
|
|
1309
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1310
|
+
}
|
|
1311
|
+
.atelic-ui .op-more-body > .op-block:first-child {
|
|
1312
|
+
border-top: 0;
|
|
1313
|
+
margin-top: 6px;
|
|
1314
|
+
padding-top: 6px;
|
|
1315
|
+
}
|
|
1316
|
+
|
|
1317
|
+
/* findings: the shared Callout, one under another, with the owner's screen
|
|
1318
|
+
beside them */
|
|
1319
|
+
.atelic-ui .op-findings.has-shots {
|
|
1320
|
+
display: grid;
|
|
1321
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1322
|
+
gap: 18px;
|
|
1323
|
+
align-items: start;
|
|
1324
|
+
}
|
|
1325
|
+
.atelic-ui .op-findings-list {
|
|
1326
|
+
display: flex;
|
|
1327
|
+
flex-direction: column;
|
|
1328
|
+
gap: 14px;
|
|
1329
|
+
}
|
|
1330
|
+
.atelic-ui .op-findings .callout {
|
|
1331
|
+
font-size: 15.5px;
|
|
1332
|
+
line-height: 1.5;
|
|
1333
|
+
}
|
|
1334
|
+
.atelic-ui .op-findings .callout a,
|
|
1335
|
+
.atelic-ui .op-note a,
|
|
1336
|
+
.atelic-ui .op-block-head p a {
|
|
1337
|
+
color: var(--op-accent);
|
|
1338
|
+
text-decoration: underline;
|
|
1339
|
+
text-underline-offset: 2px;
|
|
1340
|
+
overflow-wrap: anywhere;
|
|
1341
|
+
}
|
|
1342
|
+
.atelic-ui .op-shots {
|
|
1343
|
+
display: flex;
|
|
1344
|
+
flex-direction: column;
|
|
1345
|
+
gap: 14px;
|
|
1346
|
+
max-width: 340px;
|
|
1347
|
+
}
|
|
1348
|
+
.atelic-ui .op-shot {
|
|
1349
|
+
display: flex;
|
|
1350
|
+
flex-direction: column;
|
|
1351
|
+
gap: 6px;
|
|
1352
|
+
margin: 0;
|
|
1353
|
+
}
|
|
1354
|
+
.atelic-ui .op-shot a,
|
|
1355
|
+
.atelic-ui .op-shot-frame {
|
|
1356
|
+
display: block;
|
|
1357
|
+
width: 100%;
|
|
1358
|
+
border-radius: var(--radius-sm);
|
|
1359
|
+
overflow: hidden;
|
|
1360
|
+
border: 1px solid var(--neutral-200);
|
|
1361
|
+
background: var(--op-card);
|
|
1362
|
+
}
|
|
1363
|
+
.atelic-ui .op-shot a {
|
|
1364
|
+
cursor: zoom-in;
|
|
1365
|
+
}
|
|
1366
|
+
/* The expand badge on a linked crop: off here, the note turns it on. */
|
|
1367
|
+
.atelic-ui .op-shot-open {
|
|
1368
|
+
display: none;
|
|
1369
|
+
}
|
|
1370
|
+
.atelic-ui .op-shot img {
|
|
1371
|
+
width: 100%;
|
|
1372
|
+
height: auto;
|
|
1373
|
+
display: block;
|
|
1374
|
+
}
|
|
1375
|
+
.atelic-ui .op-shot-brief {
|
|
1376
|
+
display: grid;
|
|
1377
|
+
place-items: center;
|
|
1378
|
+
min-height: 140px;
|
|
1379
|
+
border: 1px dashed var(--neutral-300);
|
|
1380
|
+
border-radius: var(--radius-sm);
|
|
1381
|
+
font-family: var(--font-mono);
|
|
1382
|
+
font-size: 12px;
|
|
1383
|
+
color: var(--op-ink-faint);
|
|
1384
|
+
padding: 12px;
|
|
1385
|
+
text-align: center;
|
|
1386
|
+
}
|
|
1387
|
+
.atelic-ui .op-shot figcaption {
|
|
1388
|
+
font-size: 12.5px;
|
|
1389
|
+
line-height: 1.45;
|
|
1390
|
+
color: var(--op-ink-faint);
|
|
1391
|
+
}
|
|
1392
|
+
|
|
1393
|
+
/* sources: the tools the readings came from */
|
|
1394
|
+
.atelic-ui .op-sources {
|
|
1395
|
+
margin-top: 16px;
|
|
1396
|
+
padding-top: 12px;
|
|
1397
|
+
border-top: 1px solid var(--op-rule);
|
|
1398
|
+
display: flex;
|
|
1399
|
+
flex-wrap: wrap;
|
|
1400
|
+
align-items: baseline;
|
|
1401
|
+
gap: 6px 16px;
|
|
1402
|
+
font-size: 13.5px;
|
|
1403
|
+
}
|
|
1404
|
+
.atelic-ui .op-sources-label {
|
|
1405
|
+
font-family: var(--font-mono);
|
|
1406
|
+
font-size: 11.5px;
|
|
1407
|
+
letter-spacing: 0.1em;
|
|
1408
|
+
text-transform: uppercase;
|
|
1409
|
+
color: var(--op-ink-faint);
|
|
1410
|
+
}
|
|
1411
|
+
.atelic-ui .op-sources ul {
|
|
1412
|
+
list-style: none;
|
|
1413
|
+
margin: 0;
|
|
1414
|
+
padding: 0;
|
|
1415
|
+
display: flex;
|
|
1416
|
+
flex-wrap: wrap;
|
|
1417
|
+
gap: 6px 18px;
|
|
1418
|
+
color: var(--op-ink-soft);
|
|
1419
|
+
}
|
|
1420
|
+
.atelic-ui .op-sources a {
|
|
1421
|
+
display: inline-flex;
|
|
1422
|
+
align-items: center;
|
|
1423
|
+
gap: 3px;
|
|
1424
|
+
color: var(--op-accent);
|
|
1425
|
+
font-weight: 550;
|
|
1426
|
+
}
|
|
1427
|
+
.atelic-ui .op-sources a:hover {
|
|
1428
|
+
text-decoration: underline;
|
|
1429
|
+
text-underline-offset: 2px;
|
|
1430
|
+
}
|
|
1431
|
+
|
|
1432
|
+
/* ---- the rented line: paid's facts in one line, ungraded ---- */
|
|
1433
|
+
.atelic-ui .op-rented {
|
|
1434
|
+
display: flex;
|
|
1435
|
+
flex-direction: column;
|
|
1436
|
+
gap: 6px;
|
|
1437
|
+
margin: 18px 0 0;
|
|
1438
|
+
padding: 16px;
|
|
1439
|
+
background: var(--surface-alt);
|
|
1440
|
+
border-radius: var(--radius-md);
|
|
1441
|
+
font-size: 15.5px;
|
|
1442
|
+
line-height: 1.5;
|
|
1443
|
+
color: var(--op-ink);
|
|
1444
|
+
text-wrap: pretty;
|
|
1445
|
+
}
|
|
1446
|
+
.atelic-ui .op-rented-label {
|
|
1447
|
+
flex: none;
|
|
1448
|
+
font-family: var(--font-mono);
|
|
1449
|
+
font-size: 11.5px;
|
|
1450
|
+
letter-spacing: 0.1em;
|
|
1451
|
+
text-transform: uppercase;
|
|
1452
|
+
color: var(--op-ink-soft);
|
|
1453
|
+
}
|
|
1454
|
+
|
|
1455
|
+
/* ---- the markets table: on a phone each market stacks, its letters on
|
|
1456
|
+
one line with their column's label; wide, it is a table ---- */
|
|
1457
|
+
.atelic-ui .op-markets-table {
|
|
1458
|
+
display: block;
|
|
1459
|
+
width: 100%;
|
|
1460
|
+
margin-top: 18px;
|
|
1461
|
+
font-size: 15px;
|
|
1462
|
+
line-height: 1.4;
|
|
1463
|
+
}
|
|
1464
|
+
.atelic-ui .op-markets-table tbody {
|
|
1465
|
+
display: block;
|
|
1466
|
+
}
|
|
1467
|
+
.atelic-ui .op-markets-table thead {
|
|
1468
|
+
position: absolute;
|
|
1469
|
+
width: 1px;
|
|
1470
|
+
height: 1px;
|
|
1471
|
+
overflow: hidden;
|
|
1472
|
+
clip: rect(0, 0, 0, 0);
|
|
1473
|
+
white-space: nowrap;
|
|
1474
|
+
}
|
|
1475
|
+
.atelic-ui .op-markets-table tbody tr {
|
|
1476
|
+
display: flex;
|
|
1477
|
+
flex-wrap: wrap;
|
|
1478
|
+
align-items: center;
|
|
1479
|
+
column-gap: 16px;
|
|
1480
|
+
row-gap: 6px;
|
|
1481
|
+
padding: 12px 0;
|
|
1482
|
+
border-bottom: 1px solid var(--op-rule);
|
|
1483
|
+
}
|
|
1484
|
+
.atelic-ui .op-markets-table tbody tr:last-child {
|
|
1485
|
+
border-bottom: 0;
|
|
1486
|
+
}
|
|
1487
|
+
.atelic-ui .op-markets-table th,
|
|
1488
|
+
.atelic-ui .op-markets-table td {
|
|
1489
|
+
text-align: left;
|
|
1490
|
+
color: var(--op-ink);
|
|
1491
|
+
}
|
|
1492
|
+
.atelic-ui .op-markets-table .op-markets-market,
|
|
1493
|
+
.atelic-ui .op-markets-table .op-markets-read {
|
|
1494
|
+
width: 100%;
|
|
1495
|
+
}
|
|
1496
|
+
.atelic-ui .op-markets-market {
|
|
1497
|
+
font-weight: 600;
|
|
1498
|
+
}
|
|
1499
|
+
.atelic-ui .op-markets-place {
|
|
1500
|
+
display: block;
|
|
1501
|
+
font-weight: 400;
|
|
1502
|
+
font-size: 12.5px;
|
|
1503
|
+
color: var(--op-ink-faint);
|
|
1504
|
+
}
|
|
1505
|
+
.atelic-ui .op-markets-col,
|
|
1506
|
+
.atelic-ui .op-markets-label {
|
|
1507
|
+
font-family: var(--font-mono);
|
|
1508
|
+
font-size: 11.5px;
|
|
1509
|
+
font-weight: 400;
|
|
1510
|
+
letter-spacing: 0.08em;
|
|
1511
|
+
text-transform: uppercase;
|
|
1512
|
+
color: var(--op-ink-soft);
|
|
1513
|
+
white-space: nowrap;
|
|
1514
|
+
}
|
|
1515
|
+
.atelic-ui .op-markets-label {
|
|
1516
|
+
margin-right: 6px;
|
|
1517
|
+
}
|
|
1518
|
+
.atelic-ui .op-markets-grade {
|
|
1519
|
+
white-space: nowrap;
|
|
1520
|
+
}
|
|
1521
|
+
.atelic-ui .op-markets-table .op-markets-read {
|
|
1522
|
+
color: var(--op-ink-soft);
|
|
1523
|
+
text-wrap: pretty;
|
|
1524
|
+
}
|
|
1525
|
+
|
|
1526
|
+
/* ---- the close ---- */
|
|
1527
|
+
.atelic-ui .op-close {
|
|
1528
|
+
margin-top: 44px;
|
|
1529
|
+
padding-top: 22px;
|
|
1530
|
+
border-top: 1px solid var(--neutral-200);
|
|
1531
|
+
display: flex;
|
|
1532
|
+
flex-direction: column;
|
|
1533
|
+
align-items: flex-start;
|
|
1534
|
+
gap: 14px;
|
|
1535
|
+
font-size: 14px;
|
|
1536
|
+
line-height: 1.6;
|
|
1537
|
+
color: var(--op-ink-faint);
|
|
1538
|
+
}
|
|
1539
|
+
.atelic-ui .op-close b {
|
|
1540
|
+
font-weight: 500;
|
|
1541
|
+
color: var(--op-ink);
|
|
1542
|
+
}
|
|
1543
|
+
/* The sign off lockup itself (.op-who, .op-sign) is shared with the monthly
|
|
1544
|
+
page, so it lives with the shared classes in @atelic-action/ui's
|
|
1545
|
+
styles/artifact.css. */
|
|
1546
|
+
.atelic-ui .op .op-sign {
|
|
1547
|
+
font-size: 24px;
|
|
1548
|
+
margin-bottom: 8px;
|
|
1549
|
+
}
|
|
1550
|
+
.atelic-ui .op .op-who {
|
|
1551
|
+
gap: 14px;
|
|
1552
|
+
}
|
|
1553
|
+
.atelic-ui .op .op-who img {
|
|
1554
|
+
width: 56px;
|
|
1555
|
+
height: 56px;
|
|
1556
|
+
}
|
|
1557
|
+
/* The pointer to the hosted page belongs to the printed copy alone. */
|
|
1558
|
+
.atelic-ui .op-twin {
|
|
1559
|
+
display: none;
|
|
1560
|
+
}
|
|
1561
|
+
.atelic-ui .op-sr-only {
|
|
1562
|
+
position: absolute;
|
|
1563
|
+
width: 1px;
|
|
1564
|
+
height: 1px;
|
|
1565
|
+
padding: 0;
|
|
1566
|
+
margin: -1px;
|
|
1567
|
+
overflow: hidden;
|
|
1568
|
+
clip: rect(0, 0, 0, 0);
|
|
1569
|
+
white-space: nowrap;
|
|
1570
|
+
border: 0;
|
|
1571
|
+
}
|
|
1572
|
+
|
|
1573
|
+
/* ---- wide: the same page with room ---- */
|
|
1574
|
+
@media print, (min-width: 721px) {
|
|
1575
|
+
.atelic-ui .op-meta-sep,
|
|
1576
|
+
.atelic-ui .op-meta-date {
|
|
1577
|
+
display: inline;
|
|
1578
|
+
}
|
|
1579
|
+
.atelic-ui .op-doc {
|
|
1580
|
+
padding: calc(var(--nav-height) + 32px) 24px 64px;
|
|
1581
|
+
}
|
|
1582
|
+
.atelic-ui .op-intro {
|
|
1583
|
+
font-size: 18px;
|
|
1584
|
+
}
|
|
1585
|
+
.atelic-ui .op-ov-tier-label {
|
|
1586
|
+
padding: 7px 20px;
|
|
1587
|
+
}
|
|
1588
|
+
.atelic-ui .op-ov-row {
|
|
1589
|
+
grid-template-columns: auto 232px minmax(0, 1fr) auto;
|
|
1590
|
+
column-gap: 16px;
|
|
1591
|
+
padding: 11px 14px 11px 20px;
|
|
1592
|
+
}
|
|
1593
|
+
.atelic-ui .op-ov-grade {
|
|
1594
|
+
grid-row: 1;
|
|
1595
|
+
}
|
|
1596
|
+
.atelic-ui .op-ov-read {
|
|
1597
|
+
grid-column: 3;
|
|
1598
|
+
padding-top: 4px;
|
|
1599
|
+
}
|
|
1600
|
+
.atelic-ui .op-ov-go {
|
|
1601
|
+
grid-column: 4;
|
|
1602
|
+
}
|
|
1603
|
+
.atelic-ui .op-part {
|
|
1604
|
+
margin: 40px 0 12px;
|
|
1605
|
+
}
|
|
1606
|
+
.atelic-ui .op-part h2 {
|
|
1607
|
+
font-size: 30px;
|
|
1608
|
+
}
|
|
1609
|
+
.atelic-ui .op-part p {
|
|
1610
|
+
font-size: 17px;
|
|
1611
|
+
}
|
|
1612
|
+
.atelic-ui .op-topic {
|
|
1613
|
+
padding: 22px 26px 18px;
|
|
1614
|
+
}
|
|
1615
|
+
.atelic-ui .op-topic h3 {
|
|
1616
|
+
font-size: 23px;
|
|
1617
|
+
}
|
|
1618
|
+
.atelic-ui .op-topic-head > .op-grade {
|
|
1619
|
+
width: 46px;
|
|
1620
|
+
height: 46px;
|
|
1621
|
+
border-radius: 13px;
|
|
1622
|
+
font-size: 23px;
|
|
1623
|
+
}
|
|
1624
|
+
.atelic-ui .op-findings.has-shots {
|
|
1625
|
+
grid-template-columns: minmax(0, 1fr) 250px;
|
|
1626
|
+
gap: 28px;
|
|
1627
|
+
}
|
|
1628
|
+
.atelic-ui .op-findings .op-shots {
|
|
1629
|
+
max-width: none;
|
|
1630
|
+
}
|
|
1631
|
+
.atelic-ui .op-rented {
|
|
1632
|
+
flex-direction: row;
|
|
1633
|
+
align-items: baseline;
|
|
1634
|
+
gap: 16px;
|
|
1635
|
+
padding: 16px 26px;
|
|
1636
|
+
}
|
|
1637
|
+
.atelic-ui .op-close {
|
|
1638
|
+
flex-direction: row;
|
|
1639
|
+
justify-content: space-between;
|
|
1640
|
+
align-items: flex-end;
|
|
1641
|
+
}
|
|
1642
|
+
|
|
1643
|
+
/* the markets as a real table */
|
|
1644
|
+
.atelic-ui .op-markets-table {
|
|
1645
|
+
display: table;
|
|
1646
|
+
border-collapse: collapse;
|
|
1647
|
+
}
|
|
1648
|
+
.atelic-ui .op-markets-table tbody {
|
|
1649
|
+
display: table-row-group;
|
|
1650
|
+
}
|
|
1651
|
+
.atelic-ui .op-markets-table thead {
|
|
1652
|
+
position: static;
|
|
1653
|
+
width: auto;
|
|
1654
|
+
height: auto;
|
|
1655
|
+
overflow: visible;
|
|
1656
|
+
clip: auto;
|
|
1657
|
+
}
|
|
1658
|
+
.atelic-ui .op-markets-table tbody tr {
|
|
1659
|
+
display: table-row;
|
|
1660
|
+
padding: 0;
|
|
1661
|
+
border: 0;
|
|
1662
|
+
}
|
|
1663
|
+
.atelic-ui .op-markets-table th,
|
|
1664
|
+
.atelic-ui .op-markets-table td {
|
|
1665
|
+
display: table-cell;
|
|
1666
|
+
padding: 10px 14px 10px 0;
|
|
1667
|
+
border-bottom: 1px solid var(--op-rule);
|
|
1668
|
+
vertical-align: top;
|
|
1669
|
+
}
|
|
1670
|
+
.atelic-ui .op-markets-table thead th {
|
|
1671
|
+
padding-top: 0;
|
|
1672
|
+
padding-bottom: 8px;
|
|
1673
|
+
border-bottom: 1.5px solid var(--op-ink);
|
|
1674
|
+
vertical-align: bottom;
|
|
1675
|
+
}
|
|
1676
|
+
.atelic-ui .op-markets-table tbody tr:last-child th,
|
|
1677
|
+
.atelic-ui .op-markets-table tbody tr:last-child td {
|
|
1678
|
+
border-bottom: 0;
|
|
1679
|
+
}
|
|
1680
|
+
.atelic-ui .op-markets-table .op-markets-market {
|
|
1681
|
+
width: 170px;
|
|
1682
|
+
}
|
|
1683
|
+
.atelic-ui .op-markets-table .op-markets-read {
|
|
1684
|
+
width: auto;
|
|
1685
|
+
}
|
|
1686
|
+
.atelic-ui .op-markets-col {
|
|
1687
|
+
width: 64px;
|
|
1688
|
+
}
|
|
1689
|
+
.atelic-ui .op-markets-label {
|
|
1690
|
+
display: none;
|
|
1691
|
+
}
|
|
1692
|
+
}
|
|
1693
|
+
|
|
1694
|
+
/* ---- print: the same page, on letter paper ---- */
|
|
1695
|
+
@page {
|
|
1696
|
+
size: letter;
|
|
1697
|
+
margin: 0.5in 0.55in 0.6in;
|
|
1698
|
+
@bottom-right {
|
|
1699
|
+
content: counter(page) " / " counter(pages);
|
|
1700
|
+
font-family: ui-monospace, "SF Mono", monospace;
|
|
1701
|
+
font-size: 7.5pt;
|
|
1702
|
+
color: #75858f;
|
|
1703
|
+
}
|
|
1704
|
+
}
|
|
1705
|
+
@media print {
|
|
1706
|
+
html,
|
|
1707
|
+
body {
|
|
1708
|
+
margin: 0;
|
|
1709
|
+
padding: 0;
|
|
1710
|
+
background: none;
|
|
1711
|
+
}
|
|
1712
|
+
/* The sheet is the page at three quarters size. The zoom sits on the root,
|
|
1713
|
+
where the browser sizes each block for its page breaks at the printed
|
|
1714
|
+
size; on the document it measured them full size and broke early. */
|
|
1715
|
+
html:has(.atelic-ui .op-doc) {
|
|
1716
|
+
zoom: 0.74;
|
|
1717
|
+
}
|
|
1718
|
+
.atelic-ui .nav,
|
|
1719
|
+
.atelic-ui .credit-bar,
|
|
1720
|
+
.atelic-ui .skip-link,
|
|
1721
|
+
.atelic-ui .op-ov-go,
|
|
1722
|
+
.atelic-ui .op-topic h3 a svg {
|
|
1723
|
+
display: none;
|
|
1724
|
+
}
|
|
1725
|
+
.atelic-ui,
|
|
1726
|
+
.atelic-ui .op {
|
|
1727
|
+
background: none;
|
|
1728
|
+
min-height: 0;
|
|
1729
|
+
}
|
|
1730
|
+
.atelic-ui .op-doc {
|
|
1731
|
+
max-width: none;
|
|
1732
|
+
padding: 0;
|
|
1733
|
+
}
|
|
1734
|
+
.atelic-ui .op-top {
|
|
1735
|
+
display: flex;
|
|
1736
|
+
align-items: center;
|
|
1737
|
+
gap: 12px;
|
|
1738
|
+
margin-bottom: 18px;
|
|
1739
|
+
}
|
|
1740
|
+
.atelic-ui .op-mark {
|
|
1741
|
+
font-weight: 600;
|
|
1742
|
+
font-size: 22px;
|
|
1743
|
+
letter-spacing: -0.045em;
|
|
1744
|
+
display: inline-flex;
|
|
1745
|
+
align-items: center;
|
|
1746
|
+
gap: 0.38em;
|
|
1747
|
+
color: var(--op-ink);
|
|
1748
|
+
font-family: var(--font-brand);
|
|
1749
|
+
}
|
|
1750
|
+
.atelic-ui .op-run {
|
|
1751
|
+
display: inline-block;
|
|
1752
|
+
width: 1.7em;
|
|
1753
|
+
height: 2px;
|
|
1754
|
+
background: linear-gradient(90deg, var(--op-accent), transparent);
|
|
1755
|
+
}
|
|
1756
|
+
.atelic-ui .op-x {
|
|
1757
|
+
font-family: var(--font-mono);
|
|
1758
|
+
font-size: 16px;
|
|
1759
|
+
color: var(--op-ink-faint);
|
|
1760
|
+
line-height: 1;
|
|
1761
|
+
}
|
|
1762
|
+
.atelic-ui .op-recipient {
|
|
1763
|
+
height: 30px;
|
|
1764
|
+
width: auto;
|
|
1765
|
+
display: block;
|
|
1766
|
+
}
|
|
1767
|
+
.atelic-ui .op-ov-card,
|
|
1768
|
+
.atelic-ui .op-topic {
|
|
1769
|
+
box-shadow: none;
|
|
1770
|
+
border-color: var(--neutral-200);
|
|
1771
|
+
}
|
|
1772
|
+
.atelic-ui .op-topic h3 a {
|
|
1773
|
+
border-bottom: 0;
|
|
1774
|
+
}
|
|
1775
|
+
/* A small block stays whole; a table or a disclosure may run over a
|
|
1776
|
+
page, row by row, with its heading kept beside its first rows. */
|
|
1777
|
+
.atelic-ui .op-ov,
|
|
1778
|
+
.atelic-ui .op-block,
|
|
1779
|
+
.atelic-ui .op-rented,
|
|
1780
|
+
.atelic-ui .op-close,
|
|
1781
|
+
.atelic-ui .op-topic-head,
|
|
1782
|
+
.atelic-ui .op-block-head,
|
|
1783
|
+
.atelic-ui .op-markets-table tr,
|
|
1784
|
+
.atelic-ui .data-table tr {
|
|
1785
|
+
break-inside: avoid;
|
|
1786
|
+
}
|
|
1787
|
+
.atelic-ui .op-block.op-table,
|
|
1788
|
+
.atelic-ui .op-block.op-more,
|
|
1789
|
+
.atelic-ui .op-block.op-checks,
|
|
1790
|
+
.atelic-ui .op-block.op-findings,
|
|
1791
|
+
.atelic-ui .op-markets {
|
|
1792
|
+
break-inside: auto;
|
|
1793
|
+
}
|
|
1794
|
+
/* A list of checks or findings runs over a page item by item, so a
|
|
1795
|
+
section starts in whatever space the last one left. */
|
|
1796
|
+
.atelic-ui .op-checks .checklist > li,
|
|
1797
|
+
.atelic-ui .op-findings .callout {
|
|
1798
|
+
break-inside: avoid;
|
|
1799
|
+
}
|
|
1800
|
+
.atelic-ui .op-part,
|
|
1801
|
+
.atelic-ui .is-native > .disclosure-head {
|
|
1802
|
+
break-inside: avoid;
|
|
1803
|
+
break-after: avoid;
|
|
1804
|
+
}
|
|
1805
|
+
.atelic-ui .op-topic-head,
|
|
1806
|
+
.atelic-ui .op-block-head,
|
|
1807
|
+
.atelic-ui .is-native > .disclosure-head,
|
|
1808
|
+
.atelic-ui .data-table thead {
|
|
1809
|
+
break-after: avoid;
|
|
1810
|
+
}
|
|
1811
|
+
.atelic-ui .op-shot a {
|
|
1812
|
+
cursor: auto;
|
|
1813
|
+
}
|
|
1814
|
+
.atelic-ui .op-twin {
|
|
1815
|
+
display: flex;
|
|
1816
|
+
align-items: center;
|
|
1817
|
+
gap: 14px;
|
|
1818
|
+
}
|
|
1819
|
+
.atelic-ui .op-twin-text {
|
|
1820
|
+
text-align: right;
|
|
1821
|
+
font-family: var(--font-mono);
|
|
1822
|
+
font-size: 12px;
|
|
1823
|
+
letter-spacing: 0.04em;
|
|
1824
|
+
}
|
|
1825
|
+
.atelic-ui .op-twin-text b {
|
|
1826
|
+
display: block;
|
|
1827
|
+
font-family: var(--font-sans);
|
|
1828
|
+
font-size: 16px;
|
|
1829
|
+
font-weight: 600;
|
|
1830
|
+
letter-spacing: -0.01em;
|
|
1831
|
+
margin-top: 2px;
|
|
1832
|
+
}
|
|
1833
|
+
.atelic-ui .op-qr {
|
|
1834
|
+
width: 96px;
|
|
1835
|
+
height: 96px;
|
|
1836
|
+
display: block;
|
|
1837
|
+
}
|
|
1838
|
+
}
|
|
1839
|
+
|
|
1840
|
+
/* =================================================================
|
|
1841
|
+
THE NOTE: the first touch set as a page (Note.tsx). A letter, not a
|
|
1842
|
+
report, read on a phone first. Its column is the writeup's 920px,
|
|
1843
|
+
centered under the header with the header's own gutters, and every
|
|
1844
|
+
line of text runs the column's full width.
|
|
1845
|
+
|
|
1846
|
+
- The two lanes are separate sections stacked top to bottom at
|
|
1847
|
+
every width and on paper, never side by side.
|
|
1848
|
+
- Phone first: a finding is its Callout with the owner's screen
|
|
1849
|
+
under it. Wide (721px and up) and on paper, a finding with a
|
|
1850
|
+
screen is one row, the words left and the screen right, top
|
|
1851
|
+
aligned; the screen's column sizes to the picture, a phone crop
|
|
1852
|
+
about 260px and a wide card up to 45% of the row. A finding
|
|
1853
|
+
with no screen takes the full width.
|
|
1854
|
+
- Print: one letter sheet. The chrome steps aside (the writeup's print
|
|
1855
|
+
rules already hide the header and the credit band on any artifact
|
|
1856
|
+
page), the type comes down, and the screens shrink. The note sets
|
|
1857
|
+
no @page of its own: the writeup's, the later one in this sheet,
|
|
1858
|
+
sets letter paper for every artifact page.
|
|
1859
|
+
|
|
1860
|
+
Tokens only. The finding is the shared Callout (@atelic-action/ui's components.css),
|
|
1861
|
+
the screen the writeup's .op-shot, the sign off the shared .op-who;
|
|
1862
|
+
this sheet sets the letter around them and their sizes here.
|
|
1863
|
+
================================================================= */
|
|
1864
|
+
/* The borrowed .op-shot reads the writeup's own two tokens, mapped here as
|
|
1865
|
+
the writeup's .op root maps them. */
|
|
1866
|
+
.atelic-ui .nt {
|
|
1867
|
+
--op-card: var(--card);
|
|
1868
|
+
--op-ink-faint: var(--neutral-500);
|
|
1869
|
+
font-family: var(--font-sans);
|
|
1870
|
+
color: var(--ink);
|
|
1871
|
+
background: var(--surface);
|
|
1872
|
+
}
|
|
1873
|
+
/* The writeup's column (.op-doc, 920px), centered under the header and
|
|
1874
|
+
held off the edges by the header's gutters (chrome.css, .nav-inner). */
|
|
1875
|
+
.atelic-ui .nt-doc {
|
|
1876
|
+
max-width: calc(920px + 2 * var(--gutter));
|
|
1877
|
+
margin: 0 auto;
|
|
1878
|
+
padding: calc(var(--nav-height) + 22px) var(--gutter) 48px;
|
|
1879
|
+
font-size: 17px;
|
|
1880
|
+
line-height: 1.6;
|
|
1881
|
+
print-color-adjust: exact;
|
|
1882
|
+
-webkit-print-color-adjust: exact;
|
|
1883
|
+
}
|
|
1884
|
+
.atelic-ui .nt a {
|
|
1885
|
+
color: var(--primary);
|
|
1886
|
+
text-decoration: underline;
|
|
1887
|
+
text-underline-offset: 2px;
|
|
1888
|
+
text-decoration-thickness: 1px;
|
|
1889
|
+
overflow-wrap: anywhere;
|
|
1890
|
+
}
|
|
1891
|
+
.atelic-ui .nt a:hover {
|
|
1892
|
+
text-decoration-thickness: 2px;
|
|
1893
|
+
}
|
|
1894
|
+
|
|
1895
|
+
/* ---- the head: who it is for, then the title ---- */
|
|
1896
|
+
.atelic-ui .nt-meta {
|
|
1897
|
+
margin: 0 0 10px;
|
|
1898
|
+
font-family: var(--font-mono);
|
|
1899
|
+
font-size: 12.5px;
|
|
1900
|
+
letter-spacing: 0.04em;
|
|
1901
|
+
color: var(--neutral-500);
|
|
1902
|
+
}
|
|
1903
|
+
.atelic-ui .nt-meta b {
|
|
1904
|
+
font-weight: 500;
|
|
1905
|
+
color: var(--ink-soft);
|
|
1906
|
+
}
|
|
1907
|
+
.atelic-ui .nt-meta-date {
|
|
1908
|
+
white-space: nowrap;
|
|
1909
|
+
}
|
|
1910
|
+
.atelic-ui .nt h1 {
|
|
1911
|
+
font-size: clamp(30px, 6vw, 40px);
|
|
1912
|
+
font-weight: 650;
|
|
1913
|
+
letter-spacing: -0.03em;
|
|
1914
|
+
line-height: 1.1;
|
|
1915
|
+
margin: 0;
|
|
1916
|
+
text-wrap: balance;
|
|
1917
|
+
color: var(--ink);
|
|
1918
|
+
}
|
|
1919
|
+
|
|
1920
|
+
/* ---- the opener: the letter's first paragraph ---- */
|
|
1921
|
+
.atelic-ui .nt-opener {
|
|
1922
|
+
margin: 18px 0 0;
|
|
1923
|
+
font-size: 18px;
|
|
1924
|
+
line-height: 1.6;
|
|
1925
|
+
color: var(--ink);
|
|
1926
|
+
text-wrap: pretty;
|
|
1927
|
+
}
|
|
1928
|
+
|
|
1929
|
+
/* ---- the two lanes, each a heading and its findings, one above the
|
|
1930
|
+
other at every width ---- */
|
|
1931
|
+
.atelic-ui .nt-lanes {
|
|
1932
|
+
display: grid;
|
|
1933
|
+
grid-template-columns: minmax(0, 1fr);
|
|
1934
|
+
gap: 26px;
|
|
1935
|
+
margin-top: 30px;
|
|
1936
|
+
padding-top: 24px;
|
|
1937
|
+
border-top: 1px solid var(--neutral-100);
|
|
1938
|
+
}
|
|
1939
|
+
.atelic-ui .nt-lane {
|
|
1940
|
+
min-width: 0;
|
|
1941
|
+
}
|
|
1942
|
+
.atelic-ui .nt-lane h2 {
|
|
1943
|
+
margin: 0 0 14px;
|
|
1944
|
+
font-size: 19px;
|
|
1945
|
+
font-weight: 650;
|
|
1946
|
+
letter-spacing: -0.015em;
|
|
1947
|
+
line-height: 1.25;
|
|
1948
|
+
color: var(--ink);
|
|
1949
|
+
}
|
|
1950
|
+
.atelic-ui .nt-findings {
|
|
1951
|
+
list-style: none;
|
|
1952
|
+
margin: 0;
|
|
1953
|
+
padding: 0;
|
|
1954
|
+
display: flex;
|
|
1955
|
+
flex-direction: column;
|
|
1956
|
+
gap: 18px;
|
|
1957
|
+
}
|
|
1958
|
+
.atelic-ui .nt-finding .callout {
|
|
1959
|
+
font-size: 16px;
|
|
1960
|
+
line-height: 1.5;
|
|
1961
|
+
}
|
|
1962
|
+
/* The screen is a thumbnail under its finding, set in from the icon so it
|
|
1963
|
+
lines up with the words. It keeps its own shape, held to 200px tall and
|
|
1964
|
+
never the lane's full width; a click opens the full picture. */
|
|
1965
|
+
.atelic-ui .nt-finding .op-shot {
|
|
1966
|
+
margin: 10px 0 0 28px;
|
|
1967
|
+
}
|
|
1968
|
+
.atelic-ui .nt-finding .op-shot a,
|
|
1969
|
+
.atelic-ui .nt-finding .op-shot-frame {
|
|
1970
|
+
width: fit-content;
|
|
1971
|
+
max-width: 100%;
|
|
1972
|
+
}
|
|
1973
|
+
.atelic-ui .nt-finding .op-shot img {
|
|
1974
|
+
width: auto;
|
|
1975
|
+
max-width: min(100%, 280px);
|
|
1976
|
+
max-height: 200px;
|
|
1977
|
+
}
|
|
1978
|
+
/* A linked thumbnail says it opens: the badge in its corner, and the
|
|
1979
|
+
frame takes the accent on hover and focus. */
|
|
1980
|
+
.atelic-ui .nt-finding .op-shot a {
|
|
1981
|
+
position: relative;
|
|
1982
|
+
color: inherit;
|
|
1983
|
+
text-decoration: none;
|
|
1984
|
+
transition:
|
|
1985
|
+
border-color 0.15s ease,
|
|
1986
|
+
box-shadow 0.15s ease;
|
|
1987
|
+
}
|
|
1988
|
+
.atelic-ui .nt-finding .op-shot a:hover,
|
|
1989
|
+
.atelic-ui .nt-finding .op-shot a:focus-visible {
|
|
1990
|
+
border-color: var(--primary);
|
|
1991
|
+
box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 25%, transparent);
|
|
1992
|
+
}
|
|
1993
|
+
.atelic-ui .nt-finding .op-shot-open {
|
|
1994
|
+
position: absolute;
|
|
1995
|
+
right: 4px;
|
|
1996
|
+
bottom: 4px;
|
|
1997
|
+
display: flex;
|
|
1998
|
+
align-items: center;
|
|
1999
|
+
justify-content: center;
|
|
2000
|
+
width: 20px;
|
|
2001
|
+
height: 20px;
|
|
2002
|
+
border-radius: 50%;
|
|
2003
|
+
background: color-mix(in srgb, var(--ink) 72%, transparent);
|
|
2004
|
+
color: var(--surface);
|
|
2005
|
+
}
|
|
2006
|
+
.atelic-ui .nt-finding .op-shot a:hover .op-shot-open,
|
|
2007
|
+
.atelic-ui .nt-finding .op-shot a:focus-visible .op-shot-open {
|
|
2008
|
+
background: var(--primary);
|
|
2009
|
+
}
|
|
2010
|
+
/* The caption wraps to the picture's width and never sets the column's. */
|
|
2011
|
+
.atelic-ui .nt-finding .op-shot figcaption {
|
|
2012
|
+
width: 0;
|
|
2013
|
+
min-width: 100%;
|
|
2014
|
+
font-size: 12.5px;
|
|
2015
|
+
line-height: 1.45;
|
|
2016
|
+
color: var(--neutral-500);
|
|
2017
|
+
}
|
|
2018
|
+
|
|
2019
|
+
/* ---- where the work would start ---- */
|
|
2020
|
+
.atelic-ui .nt-start {
|
|
2021
|
+
margin-top: 30px;
|
|
2022
|
+
padding-top: 24px;
|
|
2023
|
+
border-top: 1px solid var(--neutral-100);
|
|
2024
|
+
}
|
|
2025
|
+
.atelic-ui .nt-start-lead {
|
|
2026
|
+
margin: 0 0 10px;
|
|
2027
|
+
font-weight: 650;
|
|
2028
|
+
color: var(--ink);
|
|
2029
|
+
}
|
|
2030
|
+
/* The site base strips list markers; the steps want theirs back. */
|
|
2031
|
+
.atelic-ui .nt-start ul {
|
|
2032
|
+
margin: 0;
|
|
2033
|
+
padding-left: 1.2em;
|
|
2034
|
+
list-style: disc;
|
|
2035
|
+
display: grid;
|
|
2036
|
+
gap: 8px;
|
|
2037
|
+
color: var(--ink-soft);
|
|
2038
|
+
}
|
|
2039
|
+
.atelic-ui .nt-start li {
|
|
2040
|
+
padding-left: 2px;
|
|
2041
|
+
}
|
|
2042
|
+
.atelic-ui .nt-start li::marker {
|
|
2043
|
+
color: var(--primary);
|
|
2044
|
+
}
|
|
2045
|
+
.atelic-ui .nt-start b {
|
|
2046
|
+
font-weight: 600;
|
|
2047
|
+
color: var(--ink);
|
|
2048
|
+
}
|
|
2049
|
+
|
|
2050
|
+
/* ---- the close: who is writing, the offer, then the sign off ---- */
|
|
2051
|
+
.atelic-ui .nt-close {
|
|
2052
|
+
margin-top: 30px;
|
|
2053
|
+
padding-top: 24px;
|
|
2054
|
+
border-top: 1px solid var(--neutral-100);
|
|
2055
|
+
}
|
|
2056
|
+
.atelic-ui .nt-close p {
|
|
2057
|
+
margin: 0 0 14px;
|
|
2058
|
+
text-wrap: pretty;
|
|
2059
|
+
}
|
|
2060
|
+
.atelic-ui .nt-close .op-who {
|
|
2061
|
+
margin-top: 22px;
|
|
2062
|
+
gap: 14px;
|
|
2063
|
+
font-size: 14px;
|
|
2064
|
+
line-height: 1.6;
|
|
2065
|
+
color: var(--neutral-500);
|
|
2066
|
+
}
|
|
2067
|
+
.atelic-ui .nt-close .op-who img {
|
|
2068
|
+
width: 56px;
|
|
2069
|
+
height: 56px;
|
|
2070
|
+
}
|
|
2071
|
+
.atelic-ui .nt-close .op-sign {
|
|
2072
|
+
font-size: 24px;
|
|
2073
|
+
margin-bottom: 8px;
|
|
2074
|
+
}
|
|
2075
|
+
/* The sign off's own links read as the writeup's do: quiet, in the text color. */
|
|
2076
|
+
.atelic-ui .nt-close .op-who a {
|
|
2077
|
+
color: inherit;
|
|
2078
|
+
text-decoration: none;
|
|
2079
|
+
}
|
|
2080
|
+
|
|
2081
|
+
/* ---- wide: more room, and each screen beside its finding ---- */
|
|
2082
|
+
@media (min-width: 721px) {
|
|
2083
|
+
.atelic-ui .nt-doc {
|
|
2084
|
+
padding-top: calc(var(--nav-height) + 36px);
|
|
2085
|
+
padding-bottom: 64px;
|
|
2086
|
+
}
|
|
2087
|
+
.atelic-ui .nt-lanes {
|
|
2088
|
+
gap: 32px;
|
|
2089
|
+
}
|
|
2090
|
+
}
|
|
2091
|
+
|
|
2092
|
+
/* A finding with a screen is one row: the words left, the screen right,
|
|
2093
|
+
top aligned. The screen is a thumbnail about as tall as a three line
|
|
2094
|
+
finding, so a phone crop reads as a tall one about 80px wide and a
|
|
2095
|
+
wide card as a short wide one; the column shrinks to it, held to 45%
|
|
2096
|
+
of the row, with room enough for the caption under it. */
|
|
2097
|
+
@media print, (min-width: 721px) {
|
|
2098
|
+
.atelic-ui .nt-finding.has-shot {
|
|
2099
|
+
display: grid;
|
|
2100
|
+
grid-template-columns: minmax(0, 1fr) fit-content(45%);
|
|
2101
|
+
column-gap: 32px;
|
|
2102
|
+
align-items: start;
|
|
2103
|
+
}
|
|
2104
|
+
.atelic-ui .nt-finding.has-shot .op-shot {
|
|
2105
|
+
margin: 0;
|
|
2106
|
+
min-width: 150px;
|
|
2107
|
+
}
|
|
2108
|
+
.atelic-ui .nt-finding .op-shot img {
|
|
2109
|
+
max-width: 100%;
|
|
2110
|
+
max-height: 170px;
|
|
2111
|
+
}
|
|
2112
|
+
.atelic-ui .nt-finding .op-shot figcaption {
|
|
2113
|
+
font-size: 12px;
|
|
2114
|
+
}
|
|
2115
|
+
}
|
|
2116
|
+
|
|
2117
|
+
/* ---- print: one letter sheet ----
|
|
2118
|
+
The rows hold on paper, since they are shorter than the stacked page.
|
|
2119
|
+
The sheet is the page at the writeup's three quarters, the thumbnails
|
|
2120
|
+
are held short with room for their captions, and the badge drops. */
|
|
2121
|
+
@media print {
|
|
2122
|
+
html:has(.atelic-ui .nt-doc) {
|
|
2123
|
+
zoom: 0.74;
|
|
2124
|
+
}
|
|
2125
|
+
.atelic-ui .nt {
|
|
2126
|
+
background: none;
|
|
2127
|
+
}
|
|
2128
|
+
.atelic-ui .nt-doc {
|
|
2129
|
+
max-width: none;
|
|
2130
|
+
padding: 0;
|
|
2131
|
+
font-size: 15px;
|
|
2132
|
+
line-height: 1.45;
|
|
2133
|
+
}
|
|
2134
|
+
.atelic-ui .nt h1 {
|
|
2135
|
+
font-size: 32px;
|
|
2136
|
+
}
|
|
2137
|
+
.atelic-ui .nt-opener {
|
|
2138
|
+
margin-top: 12px;
|
|
2139
|
+
font-size: 16px;
|
|
2140
|
+
}
|
|
2141
|
+
.atelic-ui .nt-lanes,
|
|
2142
|
+
.atelic-ui .nt-start,
|
|
2143
|
+
.atelic-ui .nt-close {
|
|
2144
|
+
margin-top: 16px;
|
|
2145
|
+
padding-top: 14px;
|
|
2146
|
+
}
|
|
2147
|
+
.atelic-ui .nt-lanes {
|
|
2148
|
+
gap: 18px;
|
|
2149
|
+
}
|
|
2150
|
+
.atelic-ui .nt-lane h2 {
|
|
2151
|
+
margin-bottom: 10px;
|
|
2152
|
+
break-after: avoid;
|
|
2153
|
+
}
|
|
2154
|
+
.atelic-ui .nt-findings {
|
|
2155
|
+
gap: 14px;
|
|
2156
|
+
}
|
|
2157
|
+
.atelic-ui .nt-finding .callout {
|
|
2158
|
+
font-size: 14.5px;
|
|
2159
|
+
}
|
|
2160
|
+
.atelic-ui .nt-finding.has-shot {
|
|
2161
|
+
grid-template-columns: minmax(0, 1fr) fit-content(40%);
|
|
2162
|
+
column-gap: 24px;
|
|
2163
|
+
}
|
|
2164
|
+
.atelic-ui .nt-finding.has-shot .op-shot {
|
|
2165
|
+
min-width: 1.6in;
|
|
2166
|
+
}
|
|
2167
|
+
.atelic-ui .nt-finding .op-shot img {
|
|
2168
|
+
max-height: 1.5in;
|
|
2169
|
+
}
|
|
2170
|
+
.atelic-ui .nt-finding .op-shot-open {
|
|
2171
|
+
display: none;
|
|
2172
|
+
}
|
|
2173
|
+
.atelic-ui .nt-finding .op-shot figcaption {
|
|
2174
|
+
font-size: 11.5px;
|
|
2175
|
+
line-height: 1.35;
|
|
2176
|
+
}
|
|
2177
|
+
.atelic-ui .nt-finding .op-shot a {
|
|
2178
|
+
cursor: auto;
|
|
2179
|
+
}
|
|
2180
|
+
.atelic-ui .nt-start ul {
|
|
2181
|
+
gap: 4px;
|
|
2182
|
+
}
|
|
2183
|
+
.atelic-ui .nt-close p {
|
|
2184
|
+
margin-bottom: 10px;
|
|
2185
|
+
}
|
|
2186
|
+
.atelic-ui .nt-close .op-who {
|
|
2187
|
+
margin-top: 14px;
|
|
2188
|
+
}
|
|
2189
|
+
.atelic-ui .nt-finding,
|
|
2190
|
+
.atelic-ui .nt-start,
|
|
2191
|
+
.atelic-ui .nt-close {
|
|
2192
|
+
break-inside: avoid;
|
|
2193
|
+
}
|
|
2194
|
+
}
|
|
2195
|
+
|
|
2196
|
+
/* =================================================================
|
|
2197
|
+
THE READ: the baseline's grades explained by cause (Read.tsx). The
|
|
2198
|
+
writeup's sibling: it sits inside the writeup's own .op root, so the
|
|
2199
|
+
column, the head, the grade chip and its key, the tier heading, the
|
|
2200
|
+
section card, the screen, the close, and every print rule of the
|
|
2201
|
+
writeup's are its own already. This block adds only what the read has
|
|
2202
|
+
and the writeup does not: the gist table, the beats of a section (the
|
|
2203
|
+
tools we looked through, what they showed with its facts and
|
|
2204
|
+
examples, why, today and after, and what we recommend), the proof
|
|
2205
|
+
pictures in a row, and the numbered plan. It sets no @page; the writeup's, earlier in this sheet and the
|
|
2206
|
+
later of the two there, sets letter paper for every artifact page.
|
|
2207
|
+
|
|
2208
|
+
Tokens only (theme.css).
|
|
2209
|
+
================================================================= */
|
|
2210
|
+
|
|
2211
|
+
/* Prose links read as links here, where the writeup's are quiet. */
|
|
2212
|
+
.atelic-ui .rd-lede a,
|
|
2213
|
+
.atelic-ui .rd-beat a,
|
|
2214
|
+
.atelic-ui .rd-gist-read a,
|
|
2215
|
+
.atelic-ui .rd-plan a,
|
|
2216
|
+
.atelic-ui .rd-closing a {
|
|
2217
|
+
color: var(--op-accent);
|
|
2218
|
+
text-decoration: underline;
|
|
2219
|
+
text-underline-offset: 2px;
|
|
2220
|
+
text-decoration-thickness: 1px;
|
|
2221
|
+
overflow-wrap: anywhere;
|
|
2222
|
+
}
|
|
2223
|
+
|
|
2224
|
+
/* ---- the gist table: section, grade, and one line, under its tier ---- */
|
|
2225
|
+
.atelic-ui .rd-gist {
|
|
2226
|
+
margin-top: 26px;
|
|
2227
|
+
}
|
|
2228
|
+
.atelic-ui .rd-gist-card {
|
|
2229
|
+
min-width: 0;
|
|
2230
|
+
background: var(--op-card);
|
|
2231
|
+
border: 1px solid var(--op-rule);
|
|
2232
|
+
border-radius: var(--radius-md);
|
|
2233
|
+
box-shadow: var(--shadow-sm);
|
|
2234
|
+
overflow: hidden;
|
|
2235
|
+
}
|
|
2236
|
+
.atelic-ui .rd-gist-table {
|
|
2237
|
+
width: 100%;
|
|
2238
|
+
border-collapse: collapse;
|
|
2239
|
+
font-size: 15px;
|
|
2240
|
+
line-height: 1.45;
|
|
2241
|
+
}
|
|
2242
|
+
.atelic-ui .rd-gist-table thead th {
|
|
2243
|
+
padding: 9px 12px;
|
|
2244
|
+
text-align: left;
|
|
2245
|
+
font-family: var(--font-mono);
|
|
2246
|
+
font-size: 11px;
|
|
2247
|
+
font-weight: 500;
|
|
2248
|
+
letter-spacing: 0.1em;
|
|
2249
|
+
text-transform: uppercase;
|
|
2250
|
+
color: var(--op-ink-faint);
|
|
2251
|
+
border-bottom: 1px solid var(--op-rule);
|
|
2252
|
+
}
|
|
2253
|
+
.atelic-ui .rd-gist-tier th {
|
|
2254
|
+
padding: 7px 12px;
|
|
2255
|
+
background: var(--surface-alt);
|
|
2256
|
+
text-align: left;
|
|
2257
|
+
font-family: var(--font-mono);
|
|
2258
|
+
font-size: 11.5px;
|
|
2259
|
+
font-weight: 500;
|
|
2260
|
+
letter-spacing: 0.1em;
|
|
2261
|
+
text-transform: uppercase;
|
|
2262
|
+
color: var(--op-ink-soft);
|
|
2263
|
+
}
|
|
2264
|
+
.atelic-ui .rd-gist-table tbody tr + tr > * {
|
|
2265
|
+
border-top: 1px solid var(--op-rule);
|
|
2266
|
+
}
|
|
2267
|
+
.atelic-ui .rd-gist-table tbody th[scope="row"],
|
|
2268
|
+
.atelic-ui .rd-gist-table td {
|
|
2269
|
+
padding: 11px 12px;
|
|
2270
|
+
vertical-align: top;
|
|
2271
|
+
text-align: left;
|
|
2272
|
+
}
|
|
2273
|
+
.atelic-ui .rd-gist-table .rd-gist-section {
|
|
2274
|
+
font-weight: 650;
|
|
2275
|
+
letter-spacing: -0.01em;
|
|
2276
|
+
width: 30%;
|
|
2277
|
+
}
|
|
2278
|
+
.atelic-ui .rd-gist-table tbody .rd-gist-section a:hover {
|
|
2279
|
+
color: var(--op-accent);
|
|
2280
|
+
}
|
|
2281
|
+
.atelic-ui .rd-gist-table .rd-gist-grade {
|
|
2282
|
+
width: 1%;
|
|
2283
|
+
white-space: nowrap;
|
|
2284
|
+
text-align: center;
|
|
2285
|
+
}
|
|
2286
|
+
.atelic-ui .rd-gist-table td.rd-gist-read {
|
|
2287
|
+
color: var(--op-ink-soft);
|
|
2288
|
+
text-wrap: pretty;
|
|
2289
|
+
min-width: 0;
|
|
2290
|
+
}
|
|
2291
|
+
|
|
2292
|
+
/* ---- a section: the trade name over the question, then its beats ---- */
|
|
2293
|
+
.atelic-ui .rd-name {
|
|
2294
|
+
margin: 0 0 4px;
|
|
2295
|
+
font-family: var(--font-mono);
|
|
2296
|
+
font-size: 11.5px;
|
|
2297
|
+
letter-spacing: 0.1em;
|
|
2298
|
+
text-transform: uppercase;
|
|
2299
|
+
color: var(--op-ink-faint);
|
|
2300
|
+
}
|
|
2301
|
+
.atelic-ui .rd-grade .op-grade {
|
|
2302
|
+
width: 42px;
|
|
2303
|
+
height: 42px;
|
|
2304
|
+
border-radius: 12px;
|
|
2305
|
+
font-size: 21px;
|
|
2306
|
+
}
|
|
2307
|
+
.atelic-ui .rd-beat {
|
|
2308
|
+
margin-top: 20px;
|
|
2309
|
+
min-width: 0;
|
|
2310
|
+
}
|
|
2311
|
+
.atelic-ui .rd-beat h4 {
|
|
2312
|
+
margin: 0 0 6px;
|
|
2313
|
+
font-family: var(--font-mono);
|
|
2314
|
+
font-size: 11.5px;
|
|
2315
|
+
font-weight: 500;
|
|
2316
|
+
letter-spacing: 0.1em;
|
|
2317
|
+
text-transform: uppercase;
|
|
2318
|
+
color: var(--op-ink-faint);
|
|
2319
|
+
}
|
|
2320
|
+
.atelic-ui .rd-beat p {
|
|
2321
|
+
margin: 0 0 10px;
|
|
2322
|
+
max-width: 68ch;
|
|
2323
|
+
text-wrap: pretty;
|
|
2324
|
+
}
|
|
2325
|
+
.atelic-ui .rd-beat p:last-child {
|
|
2326
|
+
margin-bottom: 0;
|
|
2327
|
+
}
|
|
2328
|
+
/* Where we looked: the tools in a row at the top of the section, each a
|
|
2329
|
+
link with its line under it. */
|
|
2330
|
+
.atelic-ui .rd-tools-list {
|
|
2331
|
+
list-style: none;
|
|
2332
|
+
margin: 0;
|
|
2333
|
+
padding: 0;
|
|
2334
|
+
display: flex;
|
|
2335
|
+
flex-wrap: wrap;
|
|
2336
|
+
gap: 10px 28px;
|
|
2337
|
+
}
|
|
2338
|
+
.atelic-ui .rd-tools-list li {
|
|
2339
|
+
display: flex;
|
|
2340
|
+
flex-direction: column;
|
|
2341
|
+
gap: 1px;
|
|
2342
|
+
min-width: 0;
|
|
2343
|
+
max-width: 100%;
|
|
2344
|
+
}
|
|
2345
|
+
.atelic-ui .rd-tools-list a,
|
|
2346
|
+
.atelic-ui .rd-tool-name {
|
|
2347
|
+
display: inline-flex;
|
|
2348
|
+
align-items: center;
|
|
2349
|
+
gap: 3px;
|
|
2350
|
+
font-size: 15px;
|
|
2351
|
+
font-weight: 600;
|
|
2352
|
+
color: var(--op-accent);
|
|
2353
|
+
text-decoration: none;
|
|
2354
|
+
}
|
|
2355
|
+
.atelic-ui .rd-tool-name {
|
|
2356
|
+
color: var(--op-ink);
|
|
2357
|
+
}
|
|
2358
|
+
.atelic-ui .rd-tools-list a:hover {
|
|
2359
|
+
text-decoration: underline;
|
|
2360
|
+
text-underline-offset: 2px;
|
|
2361
|
+
}
|
|
2362
|
+
.atelic-ui .rd-tools-list svg {
|
|
2363
|
+
flex: none;
|
|
2364
|
+
}
|
|
2365
|
+
.atelic-ui .rd-tool-note {
|
|
2366
|
+
font-size: 13px;
|
|
2367
|
+
line-height: 1.35;
|
|
2368
|
+
color: var(--op-ink-faint);
|
|
2369
|
+
}
|
|
2370
|
+
|
|
2371
|
+
/* What it showed: the facts as a compact table of label and value, in
|
|
2372
|
+
the writeup's table dress (an ink rule over thin row rules). */
|
|
2373
|
+
.atelic-ui .rd-facts {
|
|
2374
|
+
width: 100%;
|
|
2375
|
+
max-width: 620px;
|
|
2376
|
+
margin: 12px 0 0;
|
|
2377
|
+
border-collapse: collapse;
|
|
2378
|
+
border-top: 1.5px solid var(--op-ink);
|
|
2379
|
+
font-size: 15px;
|
|
2380
|
+
line-height: 1.4;
|
|
2381
|
+
}
|
|
2382
|
+
.atelic-ui .rd-facts th,
|
|
2383
|
+
.atelic-ui .rd-facts td {
|
|
2384
|
+
padding: 7px 14px 7px 0;
|
|
2385
|
+
border-bottom: 1px solid var(--neutral-100);
|
|
2386
|
+
text-align: left;
|
|
2387
|
+
vertical-align: top;
|
|
2388
|
+
}
|
|
2389
|
+
.atelic-ui .rd-facts th {
|
|
2390
|
+
width: 55%;
|
|
2391
|
+
font-weight: 400;
|
|
2392
|
+
color: var(--op-ink-soft);
|
|
2393
|
+
}
|
|
2394
|
+
.atelic-ui .rd-facts td {
|
|
2395
|
+
padding-right: 0;
|
|
2396
|
+
font-weight: 600;
|
|
2397
|
+
color: var(--op-ink);
|
|
2398
|
+
font-variant-numeric: tabular-nums;
|
|
2399
|
+
}
|
|
2400
|
+
.atelic-ui .rd-facts tr:last-child > * {
|
|
2401
|
+
border-bottom: 0;
|
|
2402
|
+
}
|
|
2403
|
+
|
|
2404
|
+
/* The examples: a list or more, each under its own short heading. */
|
|
2405
|
+
.atelic-ui .rd-examples-block {
|
|
2406
|
+
margin-top: 14px;
|
|
2407
|
+
max-width: 68ch;
|
|
2408
|
+
}
|
|
2409
|
+
.atelic-ui .rd-examples-block h5 {
|
|
2410
|
+
margin: 0 0 4px;
|
|
2411
|
+
font-size: 15px;
|
|
2412
|
+
font-weight: 650;
|
|
2413
|
+
color: var(--op-ink);
|
|
2414
|
+
}
|
|
2415
|
+
.atelic-ui .rd-examples {
|
|
2416
|
+
list-style: disc;
|
|
2417
|
+
margin: 0;
|
|
2418
|
+
padding-left: 1.2em;
|
|
2419
|
+
color: var(--op-ink-soft);
|
|
2420
|
+
text-wrap: pretty;
|
|
2421
|
+
}
|
|
2422
|
+
.atelic-ui .rd-examples li + li {
|
|
2423
|
+
margin-top: 4px;
|
|
2424
|
+
}
|
|
2425
|
+
/* Why is one sentence, set apart: a tinted panel with the accent's rule. */
|
|
2426
|
+
.atelic-ui .rd-why {
|
|
2427
|
+
padding: 12px 14px;
|
|
2428
|
+
border-left: 3px solid var(--op-accent);
|
|
2429
|
+
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
|
|
2430
|
+
background: var(--surface-alt);
|
|
2431
|
+
}
|
|
2432
|
+
.atelic-ui .rd-why p {
|
|
2433
|
+
font-size: 16.5px;
|
|
2434
|
+
font-weight: 550;
|
|
2435
|
+
line-height: 1.45;
|
|
2436
|
+
color: var(--op-ink);
|
|
2437
|
+
}
|
|
2438
|
+
/* The proof pictures sit in a row at one size, a search capture per
|
|
2439
|
+
market; a phone stacks them. */
|
|
2440
|
+
.atelic-ui .rd-shots {
|
|
2441
|
+
display: grid;
|
|
2442
|
+
grid-template-columns: minmax(0, 1fr);
|
|
2443
|
+
gap: 14px;
|
|
2444
|
+
margin-top: 14px;
|
|
2445
|
+
}
|
|
2446
|
+
/* A lone picture keeps a screen's size rather than filling the card. */
|
|
2447
|
+
.atelic-ui .rd-shots[data-count="1"] {
|
|
2448
|
+
max-width: 380px;
|
|
2449
|
+
}
|
|
2450
|
+
|
|
2451
|
+
/* Today and after: what a thing is, and what it becomes. Two columns
|
|
2452
|
+
wide; on a phone each row stacks, each half wearing its label. */
|
|
2453
|
+
.atelic-ui .rd-changes-table {
|
|
2454
|
+
width: 100%;
|
|
2455
|
+
border-collapse: collapse;
|
|
2456
|
+
font-size: 15px;
|
|
2457
|
+
line-height: 1.45;
|
|
2458
|
+
}
|
|
2459
|
+
.atelic-ui .rd-changes-table thead {
|
|
2460
|
+
position: absolute;
|
|
2461
|
+
width: 1px;
|
|
2462
|
+
height: 1px;
|
|
2463
|
+
overflow: hidden;
|
|
2464
|
+
clip: rect(0, 0, 0, 0);
|
|
2465
|
+
white-space: nowrap;
|
|
2466
|
+
}
|
|
2467
|
+
.atelic-ui .rd-changes-table,
|
|
2468
|
+
.atelic-ui .rd-changes-table tbody,
|
|
2469
|
+
.atelic-ui .rd-changes-table tr,
|
|
2470
|
+
.atelic-ui .rd-changes-table td {
|
|
2471
|
+
display: block;
|
|
2472
|
+
}
|
|
2473
|
+
.atelic-ui .rd-changes-table tbody tr {
|
|
2474
|
+
padding: 10px 0;
|
|
2475
|
+
border-bottom: 1px solid var(--neutral-100);
|
|
2476
|
+
}
|
|
2477
|
+
.atelic-ui .rd-changes-table tbody tr:first-child {
|
|
2478
|
+
border-top: 1.5px solid var(--op-ink);
|
|
2479
|
+
}
|
|
2480
|
+
.atelic-ui .rd-changes-table tbody tr:last-child {
|
|
2481
|
+
border-bottom: 0;
|
|
2482
|
+
padding-bottom: 0;
|
|
2483
|
+
}
|
|
2484
|
+
.atelic-ui .rd-changes-table td {
|
|
2485
|
+
text-align: left;
|
|
2486
|
+
text-wrap: pretty;
|
|
2487
|
+
}
|
|
2488
|
+
.atelic-ui .rd-changes-table td + td {
|
|
2489
|
+
margin-top: 6px;
|
|
2490
|
+
}
|
|
2491
|
+
.atelic-ui .rd-changes-table td::before {
|
|
2492
|
+
content: attr(data-label);
|
|
2493
|
+
display: block;
|
|
2494
|
+
margin-bottom: 1px;
|
|
2495
|
+
font-family: var(--font-mono);
|
|
2496
|
+
font-size: 11px;
|
|
2497
|
+
letter-spacing: 0.1em;
|
|
2498
|
+
text-transform: uppercase;
|
|
2499
|
+
color: var(--op-ink-faint);
|
|
2500
|
+
}
|
|
2501
|
+
.atelic-ui .rd-changes-table td.rd-now {
|
|
2502
|
+
color: var(--op-ink-soft);
|
|
2503
|
+
}
|
|
2504
|
+
.atelic-ui .rd-changes-table td.rd-after {
|
|
2505
|
+
color: var(--op-ink);
|
|
2506
|
+
}
|
|
2507
|
+
.atelic-ui .rd-changes-table td.rd-after::before {
|
|
2508
|
+
color: var(--op-accent);
|
|
2509
|
+
}
|
|
2510
|
+
|
|
2511
|
+
/* What we recommend: a checklist, each item led by the accent's check. */
|
|
2512
|
+
.atelic-ui .rd-checks {
|
|
2513
|
+
list-style: none;
|
|
2514
|
+
margin: 0;
|
|
2515
|
+
padding: 0;
|
|
2516
|
+
display: grid;
|
|
2517
|
+
gap: 8px;
|
|
2518
|
+
max-width: 68ch;
|
|
2519
|
+
}
|
|
2520
|
+
.atelic-ui .rd-checks li {
|
|
2521
|
+
display: grid;
|
|
2522
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
2523
|
+
column-gap: 10px;
|
|
2524
|
+
align-items: start;
|
|
2525
|
+
line-height: 1.45;
|
|
2526
|
+
text-wrap: pretty;
|
|
2527
|
+
}
|
|
2528
|
+
.atelic-ui .rd-checks svg {
|
|
2529
|
+
margin-top: 0.2em;
|
|
2530
|
+
color: var(--op-accent);
|
|
2531
|
+
}
|
|
2532
|
+
|
|
2533
|
+
/* ---- the plan: the steps in order, numbered ---- */
|
|
2534
|
+
.atelic-ui .rd-plan {
|
|
2535
|
+
margin-top: 34px;
|
|
2536
|
+
scroll-margin-top: calc(var(--nav-height) + 16px);
|
|
2537
|
+
}
|
|
2538
|
+
.atelic-ui .rd-plan h2 {
|
|
2539
|
+
font-size: 27px;
|
|
2540
|
+
font-weight: 650;
|
|
2541
|
+
letter-spacing: -0.025em;
|
|
2542
|
+
line-height: 1.1;
|
|
2543
|
+
margin: 0;
|
|
2544
|
+
color: var(--op-ink);
|
|
2545
|
+
}
|
|
2546
|
+
.atelic-ui .rd-plan-lead {
|
|
2547
|
+
margin: 6px 0 0;
|
|
2548
|
+
font-size: 16.5px;
|
|
2549
|
+
color: var(--op-ink-soft);
|
|
2550
|
+
}
|
|
2551
|
+
.atelic-ui .rd-steps {
|
|
2552
|
+
list-style: none;
|
|
2553
|
+
counter-reset: rd-step;
|
|
2554
|
+
margin: 12px 0 0;
|
|
2555
|
+
padding: 0;
|
|
2556
|
+
background: var(--op-card);
|
|
2557
|
+
border: 1px solid var(--op-rule);
|
|
2558
|
+
border-radius: var(--radius-md);
|
|
2559
|
+
box-shadow: var(--shadow-sm);
|
|
2560
|
+
}
|
|
2561
|
+
.atelic-ui .rd-step {
|
|
2562
|
+
counter-increment: rd-step;
|
|
2563
|
+
display: grid;
|
|
2564
|
+
grid-template-columns: auto minmax(0, 1fr);
|
|
2565
|
+
column-gap: 12px;
|
|
2566
|
+
padding: 14px 16px;
|
|
2567
|
+
}
|
|
2568
|
+
.atelic-ui .rd-step + .rd-step {
|
|
2569
|
+
border-top: 1px solid var(--op-rule);
|
|
2570
|
+
}
|
|
2571
|
+
.atelic-ui .rd-step::before {
|
|
2572
|
+
content: counter(rd-step);
|
|
2573
|
+
display: inline-grid;
|
|
2574
|
+
place-items: center;
|
|
2575
|
+
width: 28px;
|
|
2576
|
+
height: 28px;
|
|
2577
|
+
border: 1.5px solid var(--op-accent);
|
|
2578
|
+
border-radius: 999px;
|
|
2579
|
+
color: var(--op-accent);
|
|
2580
|
+
font-size: 14px;
|
|
2581
|
+
font-weight: 700;
|
|
2582
|
+
line-height: 1;
|
|
2583
|
+
}
|
|
2584
|
+
.atelic-ui .rd-step p {
|
|
2585
|
+
margin: 3px 0 0;
|
|
2586
|
+
color: var(--op-ink-soft);
|
|
2587
|
+
text-wrap: pretty;
|
|
2588
|
+
}
|
|
2589
|
+
.atelic-ui .rd-step-title {
|
|
2590
|
+
font-weight: 650;
|
|
2591
|
+
color: var(--op-ink);
|
|
2592
|
+
}
|
|
2593
|
+
.atelic-ui .rd-step-who {
|
|
2594
|
+
display: inline-block;
|
|
2595
|
+
margin-left: 2px;
|
|
2596
|
+
padding: 1px 8px;
|
|
2597
|
+
border: 1px solid var(--neutral-200);
|
|
2598
|
+
border-radius: 999px;
|
|
2599
|
+
font-family: var(--font-mono);
|
|
2600
|
+
font-size: 11px;
|
|
2601
|
+
letter-spacing: 0.06em;
|
|
2602
|
+
text-transform: uppercase;
|
|
2603
|
+
vertical-align: 0.15em;
|
|
2604
|
+
color: var(--op-ink-soft);
|
|
2605
|
+
}
|
|
2606
|
+
|
|
2607
|
+
/* ---- the close: one line, then the sign off under its rule ---- */
|
|
2608
|
+
.atelic-ui .rd-closing {
|
|
2609
|
+
margin: 34px 0 0;
|
|
2610
|
+
max-width: 62ch;
|
|
2611
|
+
font-size: 17px;
|
|
2612
|
+
line-height: 1.5;
|
|
2613
|
+
color: var(--op-ink);
|
|
2614
|
+
}
|
|
2615
|
+
|
|
2616
|
+
/* ---- wide and on paper: the pictures beside each other ---- */
|
|
2617
|
+
@media print, (min-width: 721px) {
|
|
2618
|
+
.atelic-ui .rd-gist-table tbody th[scope="row"],
|
|
2619
|
+
.atelic-ui .rd-gist-table td,
|
|
2620
|
+
.atelic-ui .rd-gist-table thead th,
|
|
2621
|
+
.atelic-ui .rd-gist-tier th {
|
|
2622
|
+
padding-left: 20px;
|
|
2623
|
+
padding-right: 16px;
|
|
2624
|
+
}
|
|
2625
|
+
.atelic-ui .rd-facts th {
|
|
2626
|
+
width: 45%;
|
|
2627
|
+
}
|
|
2628
|
+
.atelic-ui .rd-changes-table {
|
|
2629
|
+
display: table;
|
|
2630
|
+
table-layout: fixed;
|
|
2631
|
+
}
|
|
2632
|
+
.atelic-ui .rd-changes-table thead {
|
|
2633
|
+
display: table-header-group;
|
|
2634
|
+
position: static;
|
|
2635
|
+
width: auto;
|
|
2636
|
+
height: auto;
|
|
2637
|
+
overflow: visible;
|
|
2638
|
+
clip: auto;
|
|
2639
|
+
}
|
|
2640
|
+
.atelic-ui .rd-changes-table tbody {
|
|
2641
|
+
display: table-row-group;
|
|
2642
|
+
}
|
|
2643
|
+
.atelic-ui .rd-changes-table tr,
|
|
2644
|
+
.atelic-ui .rd-changes-table tbody tr {
|
|
2645
|
+
display: table-row;
|
|
2646
|
+
padding: 0;
|
|
2647
|
+
border: 0;
|
|
2648
|
+
}
|
|
2649
|
+
.atelic-ui .rd-changes-table th,
|
|
2650
|
+
.atelic-ui .rd-changes-table td {
|
|
2651
|
+
display: table-cell;
|
|
2652
|
+
width: 50%;
|
|
2653
|
+
padding: 9px 18px 9px 0;
|
|
2654
|
+
border-bottom: 1px solid var(--neutral-100);
|
|
2655
|
+
text-align: left;
|
|
2656
|
+
vertical-align: top;
|
|
2657
|
+
}
|
|
2658
|
+
.atelic-ui .rd-changes-table th + th,
|
|
2659
|
+
.atelic-ui .rd-changes-table td + td {
|
|
2660
|
+
margin-top: 0;
|
|
2661
|
+
padding-left: 18px;
|
|
2662
|
+
padding-right: 0;
|
|
2663
|
+
border-left: 1px solid var(--neutral-100);
|
|
2664
|
+
}
|
|
2665
|
+
.atelic-ui .rd-changes-table td::before {
|
|
2666
|
+
content: none;
|
|
2667
|
+
}
|
|
2668
|
+
.atelic-ui .rd-changes-table tbody tr:first-child {
|
|
2669
|
+
border-top: 0;
|
|
2670
|
+
}
|
|
2671
|
+
.atelic-ui .rd-changes-table thead th {
|
|
2672
|
+
padding-top: 0;
|
|
2673
|
+
padding-bottom: 8px;
|
|
2674
|
+
border-bottom: 1.5px solid var(--op-ink);
|
|
2675
|
+
font-family: var(--font-mono);
|
|
2676
|
+
font-size: 11.5px;
|
|
2677
|
+
font-weight: 500;
|
|
2678
|
+
letter-spacing: 0.1em;
|
|
2679
|
+
text-transform: uppercase;
|
|
2680
|
+
color: var(--op-ink-faint);
|
|
2681
|
+
}
|
|
2682
|
+
.atelic-ui .rd-changes-table thead th.rd-after {
|
|
2683
|
+
color: var(--op-accent);
|
|
2684
|
+
}
|
|
2685
|
+
.atelic-ui .rd-changes-table tbody tr:last-child td {
|
|
2686
|
+
border-bottom: 0;
|
|
2687
|
+
}
|
|
2688
|
+
.atelic-ui .rd-shots[data-count="2"] {
|
|
2689
|
+
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
2690
|
+
}
|
|
2691
|
+
.atelic-ui .rd-shots[data-count="3"] {
|
|
2692
|
+
grid-template-columns: repeat(3, minmax(0, 1fr));
|
|
2693
|
+
}
|
|
2694
|
+
}
|
|
2695
|
+
|
|
2696
|
+
/* ---- print: the writeup's rules carry the page; these hold the read's
|
|
2697
|
+
own blocks whole ---- */
|
|
2698
|
+
@media print {
|
|
2699
|
+
.atelic-ui .rd-gist-card,
|
|
2700
|
+
.atelic-ui .rd-steps {
|
|
2701
|
+
box-shadow: none;
|
|
2702
|
+
border-color: var(--neutral-200);
|
|
2703
|
+
}
|
|
2704
|
+
.atelic-ui .rd-gist-table tr,
|
|
2705
|
+
.atelic-ui .rd-changes-table tr,
|
|
2706
|
+
.atelic-ui .rd-facts,
|
|
2707
|
+
.atelic-ui .rd-tools,
|
|
2708
|
+
.atelic-ui .rd-checks li,
|
|
2709
|
+
.atelic-ui .rd-closing,
|
|
2710
|
+
.atelic-ui .rd-why,
|
|
2711
|
+
.atelic-ui .rd-step,
|
|
2712
|
+
.atelic-ui .rd-close,
|
|
2713
|
+
.atelic-ui .rd-shots .op-shot {
|
|
2714
|
+
break-inside: avoid;
|
|
2715
|
+
}
|
|
2716
|
+
.atelic-ui .rd-beat h4,
|
|
2717
|
+
.atelic-ui .rd-examples-block h5,
|
|
2718
|
+
.atelic-ui .rd-plan h2 {
|
|
2719
|
+
break-after: avoid;
|
|
2720
|
+
}
|
|
2721
|
+
}
|
|
2722
|
+
}
|