privateboard 0.1.2 → 0.1.3
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/dist/cli.js +3355 -940
- package/dist/cli.js.map +1 -1
- package/package.json +1 -1
- package/public/agent-profile.js +17 -7
- package/public/app.js +3775 -434
- package/public/index.html +2357 -265
- package/public/onboarding.js +36 -9
- package/public/quote-cta.css +49 -5
- package/public/quote-cta.js +215 -17
- package/public/report/spines/a16z-thesis.css +212 -97
- package/public/report/spines/anthropic-essay.css +564 -221
- package/public/report/spines/boardroom-dark.css +130 -72
- package/public/report/spines/gartner-note.css +83 -48
- package/public/report/spines/mckinsey-deck.css +81 -31
- package/public/report/spines/openai-paper.css +96 -35
- package/public/report.html +3576 -197
- package/public/room-settings.js +11 -8
- package/public/themes.css +15 -2
- package/public/user-settings.css +19 -8
- package/public/user-settings.js +37 -162
|
@@ -19,9 +19,24 @@
|
|
|
19
19
|
--clay-pale: #F2E0D5;
|
|
20
20
|
--sage: #8B9D7F;
|
|
21
21
|
--sage-deep: #6B7D5F;
|
|
22
|
+
/* Em emphasis · the signature italic-in-colour accent applied to
|
|
23
|
+
<em> across body p / h2 / h3 / blockquote / nq-question /
|
|
24
|
+
considerations etc. Brighter than --clay-deep so it pops against
|
|
25
|
+
the lighter --ink-mid body colour without fighting kickers
|
|
26
|
+
(which stay on --clay-deep). */
|
|
27
|
+
--em: #B65A3A;
|
|
28
|
+
/* Cross-spine token aliases · used by the unified design system in
|
|
29
|
+
report.html. Each spine maps its own palette role into these. */
|
|
30
|
+
--accent: var(--clay);
|
|
31
|
+
--warn: var(--clay-deep);
|
|
32
|
+
/* Latin remains serif (Tiempos / Charter — anthropic signature).
|
|
33
|
+
CJK falls to PingFang SC first per global preference; Songti
|
|
34
|
+
remains as a last-resort fallback. */
|
|
22
35
|
--serif: "Tiempos Headline", "Tiempos", "Source Serif Pro", "Charter",
|
|
23
36
|
"Iowan Old Style", "Palatino", Georgia,
|
|
24
|
-
"
|
|
37
|
+
"PingFang SC", "PingFang TC", "Hiragino Sans GB",
|
|
38
|
+
"Source Han Sans CN", "Noto Sans CJK SC",
|
|
39
|
+
"Songti SC", "STSong", serif;
|
|
25
40
|
--sans: "Söhne", "Styrene B", "Inter", "Helvetica Neue", -apple-system,
|
|
26
41
|
BlinkMacSystemFont, system-ui,
|
|
27
42
|
"PingFang SC", "Hiragino Sans GB", "Source Han Sans CN", "Noto Sans CJK SC", sans-serif;
|
|
@@ -32,103 +47,142 @@
|
|
|
32
47
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
|
33
48
|
html, body {
|
|
34
49
|
background: var(--paper);
|
|
35
|
-
color: var(--ink
|
|
36
|
-
font-family: var(--
|
|
37
|
-
font-size:
|
|
38
|
-
line-height: 1.
|
|
50
|
+
color: var(--ink);
|
|
51
|
+
font-family: var(--sans);
|
|
52
|
+
font-size: 16px;
|
|
53
|
+
line-height: 1.65;
|
|
39
54
|
-webkit-font-smoothing: antialiased;
|
|
40
55
|
text-rendering: optimizeLegibility;
|
|
56
|
+
font-feature-settings: "kern" 1, "liga" 1;
|
|
41
57
|
min-height: 100vh;
|
|
42
58
|
}
|
|
43
59
|
::-webkit-scrollbar { width: 6px; }
|
|
44
60
|
::-webkit-scrollbar-track { background: var(--paper); }
|
|
45
61
|
::-webkit-scrollbar-thumb { background: var(--rule); }
|
|
46
62
|
|
|
47
|
-
.doc { max-width:
|
|
63
|
+
.doc { max-width: 740px; margin: 0 auto; padding: 0 0 96px; }
|
|
48
64
|
|
|
49
65
|
.top-rule {
|
|
50
66
|
background: var(--paper);
|
|
51
67
|
border-bottom: 1px solid var(--rule);
|
|
52
|
-
padding:
|
|
68
|
+
padding: 22px 56px;
|
|
53
69
|
display: flex;
|
|
54
70
|
justify-content: space-between;
|
|
55
71
|
align-items: center;
|
|
56
|
-
|
|
57
|
-
|
|
72
|
+
gap: 14px;
|
|
73
|
+
}
|
|
74
|
+
.top-rule .crumb {
|
|
75
|
+
display: inline-flex;
|
|
76
|
+
align-items: center;
|
|
77
|
+
gap: 12px;
|
|
78
|
+
color: var(--ink);
|
|
79
|
+
font-weight: 500;
|
|
80
|
+
font-family: var(--serif);
|
|
81
|
+
font-style: normal;
|
|
82
|
+
letter-spacing: -0.01em;
|
|
83
|
+
font-size: 17px;
|
|
84
|
+
text-transform: none;
|
|
85
|
+
}
|
|
86
|
+
/* The · between brand and section becomes a clay dot — matches the
|
|
87
|
+
reference's `.frame-mark` 10×10 circle. The text · is hidden via
|
|
88
|
+
font-size:0 + width/height fill from the bg. */
|
|
89
|
+
.top-rule .crumb .accent {
|
|
90
|
+
display: inline-block;
|
|
91
|
+
width: 10px;
|
|
92
|
+
height: 10px;
|
|
93
|
+
background: var(--clay);
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
font-size: 0;
|
|
96
|
+
color: transparent;
|
|
97
|
+
vertical-align: middle;
|
|
98
|
+
margin: 0;
|
|
99
|
+
}
|
|
100
|
+
.top-rule .top-actions {
|
|
101
|
+
display: flex;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: 18px;
|
|
104
|
+
font-family: var(--mono);
|
|
105
|
+
font-size: 11px;
|
|
106
|
+
color: var(--ink-mid);
|
|
58
107
|
letter-spacing: 0.04em;
|
|
59
|
-
color: var(--ink-faint);
|
|
60
108
|
}
|
|
61
|
-
.top-rule .
|
|
62
|
-
.top-rule .
|
|
63
|
-
.top-rule .back {
|
|
109
|
+
.top-rule .back,
|
|
110
|
+
.top-rule .download {
|
|
64
111
|
color: var(--ink-mid);
|
|
65
112
|
text-decoration: none;
|
|
113
|
+
background: none;
|
|
66
114
|
border: none;
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
font-
|
|
70
|
-
font-
|
|
71
|
-
letter-spacing: 0;
|
|
115
|
+
padding: 0;
|
|
116
|
+
cursor: pointer;
|
|
117
|
+
font-family: var(--mono);
|
|
118
|
+
font-size: 11px;
|
|
119
|
+
letter-spacing: 0.04em;
|
|
72
120
|
text-transform: none;
|
|
73
|
-
font-size: 14px;
|
|
74
121
|
}
|
|
75
|
-
.top-rule .back:hover
|
|
122
|
+
.top-rule .back:hover,
|
|
123
|
+
.top-rule .download:hover { color: var(--clay-deep); }
|
|
124
|
+
.top-rule .download::before { content: "↓ "; color: var(--clay); }
|
|
76
125
|
|
|
77
126
|
.cover {
|
|
78
|
-
padding:
|
|
79
|
-
border-bottom: 1px solid var(--rule);
|
|
127
|
+
padding: 96px 32px 32px;
|
|
80
128
|
background: transparent;
|
|
81
129
|
}
|
|
82
130
|
.cover-tag {
|
|
83
|
-
font-family: var(--
|
|
131
|
+
font-family: var(--mono);
|
|
84
132
|
font-size: 11px;
|
|
85
|
-
letter-spacing: 0.
|
|
133
|
+
letter-spacing: 0.18em;
|
|
86
134
|
text-transform: uppercase;
|
|
87
|
-
color: var(--clay);
|
|
135
|
+
color: var(--clay-deep);
|
|
88
136
|
font-weight: 500;
|
|
89
|
-
margin-bottom:
|
|
90
|
-
display: flex; align-items: center; gap: 14px;
|
|
137
|
+
margin-bottom: 56px;
|
|
138
|
+
display: inline-flex; align-items: center; gap: 14px;
|
|
91
139
|
}
|
|
92
|
-
.cover-tag .pipe { width:
|
|
140
|
+
.cover-tag .pipe { width: 16px; height: 1px; background: var(--clay); }
|
|
93
141
|
.cover-tag .secondary { color: var(--ink-faint); font-weight: 400; }
|
|
94
142
|
.cover-title {
|
|
95
143
|
font-family: var(--serif);
|
|
96
|
-
font-size:
|
|
97
|
-
font-weight:
|
|
98
|
-
line-height: 1.
|
|
99
|
-
letter-spacing: -0.
|
|
144
|
+
font-size: 56px;
|
|
145
|
+
font-weight: 400;
|
|
146
|
+
line-height: 1.08;
|
|
147
|
+
letter-spacing: -0.02em;
|
|
100
148
|
color: var(--ink);
|
|
101
|
-
margin-bottom:
|
|
102
|
-
max-width:
|
|
103
|
-
font-style:
|
|
149
|
+
margin-bottom: 28px;
|
|
150
|
+
max-width: 800px;
|
|
151
|
+
font-style: normal;
|
|
104
152
|
}
|
|
153
|
+
.cover-title em { font-style: italic; color: var(--em); }
|
|
105
154
|
.cover-deck {
|
|
106
|
-
font-
|
|
155
|
+
font-family: var(--serif);
|
|
156
|
+
font-size: 22px;
|
|
107
157
|
font-weight: 400;
|
|
108
|
-
|
|
158
|
+
font-style: italic;
|
|
159
|
+
line-height: 1.5;
|
|
109
160
|
color: var(--ink-soft);
|
|
110
|
-
max-width:
|
|
111
|
-
margin-bottom:
|
|
161
|
+
max-width: 70ch;
|
|
162
|
+
margin-bottom: 64px;
|
|
163
|
+
letter-spacing: -0.005em;
|
|
112
164
|
}
|
|
113
165
|
.cover-deck strong { color: var(--ink); font-weight: 500; }
|
|
166
|
+
.cover-deck em { font-style: italic; color: var(--em); }
|
|
114
167
|
.cover-byline {
|
|
115
168
|
display: grid;
|
|
116
169
|
grid-template-columns: repeat(4, 1fr);
|
|
117
|
-
gap:
|
|
118
|
-
padding-top:
|
|
170
|
+
gap: 36px;
|
|
171
|
+
padding-top: 28px;
|
|
119
172
|
border-top: 1px solid var(--rule);
|
|
120
173
|
}
|
|
121
174
|
@media (max-width: 720px) { .cover-byline { grid-template-columns: repeat(2, 1fr); } }
|
|
175
|
+
.byline-block { display: flex; flex-direction: column; gap: 4px; }
|
|
122
176
|
.byline-block .label {
|
|
123
|
-
font-family: var(--
|
|
124
|
-
font-size:
|
|
125
|
-
letter-spacing: 0.
|
|
126
|
-
text-transform:
|
|
177
|
+
font-family: var(--mono);
|
|
178
|
+
font-size: 11px;
|
|
179
|
+
letter-spacing: 0.04em;
|
|
180
|
+
text-transform: none;
|
|
127
181
|
color: var(--ink-faint);
|
|
128
182
|
font-weight: 500;
|
|
129
|
-
margin-bottom:
|
|
183
|
+
margin-bottom: 4px;
|
|
130
184
|
}
|
|
131
|
-
.byline-block .value { font-size:
|
|
185
|
+
.byline-block .value { font-size: 16px; color: var(--ink); font-family: var(--serif); font-weight: 500; }
|
|
132
186
|
.byline-block .signed-avatars { display: flex; margin-top: 4px; }
|
|
133
187
|
.byline-block .signed-avatars img {
|
|
134
188
|
width: 24px; height: 24px;
|
|
@@ -146,7 +200,7 @@ html, body {
|
|
|
146
200
|
}
|
|
147
201
|
.cover-versions-label {
|
|
148
202
|
font-family: var(--sans);
|
|
149
|
-
font-size:
|
|
203
|
+
font-size: 11px;
|
|
150
204
|
letter-spacing: 0.14em;
|
|
151
205
|
text-transform: uppercase;
|
|
152
206
|
color: var(--ink-faint);
|
|
@@ -166,27 +220,37 @@ html, body {
|
|
|
166
220
|
.cover-version .num { font-weight: 600; }
|
|
167
221
|
.cover-version .sep { color: var(--ink-muted); margin: 0 2px; }
|
|
168
222
|
|
|
169
|
-
.body { padding: 0 32px; color: var(--ink-
|
|
170
|
-
.body h1, .body h2, .body h3, .body h4 { font-family: var(--serif); color: var(--ink); font-weight:
|
|
223
|
+
.body { padding: 0 32px; color: var(--ink-mid); }
|
|
224
|
+
.body h1, .body h2, .body h3, .body h4 { font-family: var(--serif); color: var(--ink); font-weight: 400; line-height: 1.18; letter-spacing: -0.018em; }
|
|
171
225
|
.body h1 { display: none; }
|
|
172
226
|
.body .chapter-num {
|
|
173
227
|
display: block;
|
|
174
|
-
font-family: var(--
|
|
228
|
+
font-family: var(--mono);
|
|
175
229
|
font-size: 11px;
|
|
176
|
-
color: var(--clay);
|
|
230
|
+
color: var(--clay-deep);
|
|
177
231
|
font-weight: 500;
|
|
178
|
-
letter-spacing: 0.
|
|
232
|
+
letter-spacing: 0.18em;
|
|
179
233
|
text-transform: uppercase;
|
|
180
|
-
margin:
|
|
181
|
-
}
|
|
182
|
-
|
|
183
|
-
|
|
234
|
+
margin: 40px 0 14px;
|
|
235
|
+
}
|
|
236
|
+
/* First chapter-num inside .body has no preceding content to space
|
|
237
|
+
away from — collapse the top gap so "session 01" sits closer to
|
|
238
|
+
the cover/header chrome above it. */
|
|
239
|
+
.body > .chapter-num:first-child,
|
|
240
|
+
.body > h1 + .chapter-num {
|
|
241
|
+
margin-top: 16px;
|
|
242
|
+
}
|
|
243
|
+
.body h2 { font-size: 36px; line-height: 1.18; margin: 0 0 28px; font-style: normal; }
|
|
244
|
+
.body h2 em { font-style: italic; color: var(--em); }
|
|
245
|
+
.body h3 { font-size: 22px; line-height: 1.3; margin: 28px 0 12px; font-style: normal; letter-spacing: -0.012em; }
|
|
246
|
+
.body h3 em { font-style: italic; color: var(--em); }
|
|
184
247
|
.body h4 { font-size: 14px; margin: 18px 0 6px; text-transform: none; letter-spacing: 0; font-style: italic; color: var(--ink-mid); }
|
|
185
|
-
.body p { margin:
|
|
186
|
-
.body
|
|
187
|
-
.body
|
|
248
|
+
.body p { margin: 0 0 18px; line-height: 1.75; color: var(--ink-mid); font-size: 16px; font-family: var(--sans); }
|
|
249
|
+
.body p:last-child { margin-bottom: 0; }
|
|
250
|
+
.body ul, .body ol { margin: 14px 0 18px 26px; }
|
|
251
|
+
.body li { margin: 8px 0; line-height: 1.7; color: var(--ink-mid); font-size: 16px; font-family: var(--sans); }
|
|
188
252
|
.body strong { color: var(--ink); font-weight: 600; }
|
|
189
|
-
.body em { color: var(--
|
|
253
|
+
.body em { color: var(--em); font-style: italic; }
|
|
190
254
|
.body code {
|
|
191
255
|
background: var(--paper-soft);
|
|
192
256
|
border: 1px solid var(--rule);
|
|
@@ -199,22 +263,29 @@ html, body {
|
|
|
199
263
|
.body code.badge-confidence-high { color: var(--sage-deep); border-color: var(--sage); background: var(--sage-pale, var(--paper-soft)); }
|
|
200
264
|
.body code.badge-confidence-medium { color: #B8721A; border-color: rgba(184, 114, 26, 0.3); }
|
|
201
265
|
.body code.badge-confidence-low { color: var(--clay-deep); border-color: var(--clay); }
|
|
202
|
-
|
|
203
|
-
|
|
266
|
+
/* Priority badges · typographic only (no fill, no border). Anthropic
|
|
267
|
+
register: P0 in clay-deep (the spine's emphasis colour), P1 in
|
|
268
|
+
ink (full weight neutral), P2 muted. */
|
|
269
|
+
.body code.badge-priority-p0 { color: var(--clay-deep); }
|
|
270
|
+
.body code.badge-priority-p1 { color: var(--ink); }
|
|
204
271
|
.body code.badge-priority-p2 { color: var(--ink-faint); }
|
|
205
272
|
.body blockquote {
|
|
206
|
-
padding:
|
|
207
|
-
margin:
|
|
208
|
-
border-top:
|
|
209
|
-
border-bottom:
|
|
210
|
-
color: var(--ink
|
|
211
|
-
font-size:
|
|
273
|
+
padding: 36px 28px 32px;
|
|
274
|
+
margin: 40px 0;
|
|
275
|
+
border-top: 1px solid var(--rule);
|
|
276
|
+
border-bottom: 1px solid var(--rule);
|
|
277
|
+
color: var(--ink);
|
|
278
|
+
font-size: 28px;
|
|
212
279
|
font-style: italic;
|
|
213
|
-
|
|
280
|
+
font-family: var(--serif);
|
|
281
|
+
font-weight: 400;
|
|
282
|
+
line-height: 1.32;
|
|
283
|
+
letter-spacing: -0.015em;
|
|
284
|
+
max-width: 660px;
|
|
214
285
|
}
|
|
215
286
|
.body blockquote::before { display: none; }
|
|
216
|
-
.body blockquote em { font-style: italic; color: var(--
|
|
217
|
-
.body blockquote strong { color: var(--ink); font-style: normal; }
|
|
287
|
+
.body blockquote em { font-style: italic; color: var(--em); }
|
|
288
|
+
.body blockquote strong { color: var(--ink); font-style: normal; font-weight: 500; }
|
|
218
289
|
|
|
219
290
|
/* Bottom Line · soft surface card. */
|
|
220
291
|
.body section.section-bottom-line {
|
|
@@ -225,17 +296,18 @@ html, body {
|
|
|
225
296
|
border-bottom: 1px solid var(--rule);
|
|
226
297
|
}
|
|
227
298
|
.body h2.section-bottom-line {
|
|
228
|
-
font-family: var(--
|
|
299
|
+
font-family: var(--mono);
|
|
229
300
|
font-size: 11px;
|
|
230
|
-
color: var(--clay);
|
|
301
|
+
color: var(--clay-deep);
|
|
231
302
|
text-transform: uppercase;
|
|
232
|
-
letter-spacing: 0.
|
|
303
|
+
letter-spacing: 0.18em;
|
|
233
304
|
margin: 0 0 16px;
|
|
234
305
|
font-weight: 500;
|
|
235
306
|
font-style: normal;
|
|
236
307
|
}
|
|
237
|
-
.body section.section-bottom-line p { font-size: 22px; line-height: 1.
|
|
238
|
-
.body section.section-bottom-line p
|
|
308
|
+
.body section.section-bottom-line p { font-family: var(--serif); font-size: 22px; line-height: 1.5; color: var(--ink-soft); font-style: italic; max-width: 70ch; letter-spacing: -0.005em; }
|
|
309
|
+
.body section.section-bottom-line p em { color: var(--em); }
|
|
310
|
+
.body section.section-bottom-line p:not(:first-child) { font-family: var(--sans); font-size: 16px; line-height: 1.7; color: var(--ink-mid); margin-top: 18px; font-style: normal; }
|
|
239
311
|
|
|
240
312
|
/* Working Hypothesis · the signature anchor for this spine. */
|
|
241
313
|
.body section.section-working-hypothesis {
|
|
@@ -243,21 +315,24 @@ html, body {
|
|
|
243
315
|
padding: 8px 0 24px;
|
|
244
316
|
}
|
|
245
317
|
.body section.section-working-hypothesis p:first-child {
|
|
246
|
-
font-
|
|
247
|
-
|
|
248
|
-
|
|
318
|
+
font-family: var(--serif);
|
|
319
|
+
font-size: 20px;
|
|
320
|
+
line-height: 1.65;
|
|
321
|
+
color: var(--ink-soft);
|
|
249
322
|
font-style: italic;
|
|
323
|
+
letter-spacing: -0.005em;
|
|
250
324
|
}
|
|
251
325
|
.body section.section-working-hypothesis p:first-child::first-letter {
|
|
252
326
|
font-family: var(--serif);
|
|
253
327
|
font-size: 64px;
|
|
254
|
-
font-weight:
|
|
328
|
+
font-weight: 400;
|
|
255
329
|
float: left;
|
|
256
|
-
line-height: 0.
|
|
257
|
-
|
|
258
|
-
color: var(--clay);
|
|
330
|
+
line-height: 0.85;
|
|
331
|
+
margin: 8px 12px 0 0;
|
|
332
|
+
color: var(--clay-deep);
|
|
259
333
|
font-style: normal;
|
|
260
334
|
}
|
|
335
|
+
.body section.section-working-hypothesis p:first-child em { color: var(--em); }
|
|
261
336
|
|
|
262
337
|
/* Thesis · less heavy than a16z. */
|
|
263
338
|
.body section.section-thesis {
|
|
@@ -265,44 +340,84 @@ html, body {
|
|
|
265
340
|
padding-bottom: 28px;
|
|
266
341
|
border-bottom: 1px solid var(--rule);
|
|
267
342
|
}
|
|
268
|
-
.body h2.section-thesis { font-family: var(--
|
|
269
|
-
.body section.section-thesis p:first-child { font-size: 28px; line-height: 1.32; color: var(--ink); font-style: italic; font-weight:
|
|
343
|
+
.body h2.section-thesis { font-family: var(--mono); font-size: 11px; color: var(--clay-deep); text-transform: uppercase; letter-spacing: 0.18em; margin: 0 0 18px; font-weight: 500; font-style: normal; }
|
|
344
|
+
.body section.section-thesis p:first-child { font-family: var(--serif); font-size: 28px; line-height: 1.32; color: var(--ink); font-style: italic; font-weight: 400; letter-spacing: -0.012em; }
|
|
345
|
+
.body section.section-thesis p:first-child em { color: var(--em); }
|
|
270
346
|
|
|
271
|
-
.body section.section-frame-shift p:first-child { font-size: 19px; color: var(--ink); font-style: italic; }
|
|
347
|
+
.body section.section-frame-shift p:first-child { font-family: var(--serif); font-size: 19px; color: var(--ink); font-style: italic; }
|
|
272
348
|
|
|
273
|
-
/*
|
|
349
|
+
/* Observations / headline findings · essay style. Each item gets a
|
|
350
|
+
small italic serif kicker ("— observation one"), a serif headline
|
|
351
|
+
in roman with italic-em-in-clay emphasis, and a sans body. Modeled
|
|
352
|
+
on the reference's `.obs` block. No big left-margin numerals — the
|
|
353
|
+
typography itself signals enumeration. */
|
|
274
354
|
.body section.section-headline-findings .pillars-grid,
|
|
275
355
|
.body section.section-big-ideas .pillars-grid {
|
|
276
356
|
display: block;
|
|
277
|
-
margin: 28px 0;
|
|
357
|
+
margin: 28px 0 0;
|
|
358
|
+
counter-reset: obs;
|
|
278
359
|
}
|
|
279
360
|
.body section.section-headline-findings .pillar,
|
|
280
361
|
.body section.section-big-ideas ol > li {
|
|
281
362
|
border-top: 1px solid var(--rule);
|
|
282
|
-
padding:
|
|
363
|
+
padding: 36px 0;
|
|
283
364
|
position: relative;
|
|
284
365
|
margin: 0;
|
|
366
|
+
counter-increment: obs;
|
|
367
|
+
list-style: none;
|
|
285
368
|
}
|
|
286
|
-
.body section.section-
|
|
287
|
-
|
|
369
|
+
.body section.section-big-ideas ol {
|
|
370
|
+
counter-reset: obs; list-style: none; padding: 0; margin: 28px 0 0;
|
|
371
|
+
}
|
|
372
|
+
.body section.section-headline-findings .pillar:last-child,
|
|
373
|
+
.body section.section-big-ideas ol > li:last-child { border-bottom: 1px solid var(--rule); }
|
|
374
|
+
/* The kicker — italic serif "— observation i / ii / iii / iv".
|
|
375
|
+
For .pillar (a real DOM element with numeric text inside), we hide
|
|
376
|
+
its text and inject the kicker via ::before. For .section-big-ideas
|
|
377
|
+
list items, the ::before is a plain pseudo with the same content. */
|
|
378
|
+
.body section.section-headline-findings .pillar .pillar-num {
|
|
379
|
+
font-size: 0;
|
|
380
|
+
color: transparent;
|
|
381
|
+
display: block;
|
|
382
|
+
margin: 0;
|
|
383
|
+
position: static;
|
|
384
|
+
}
|
|
385
|
+
.body section.section-headline-findings .pillar .pillar-num::before,
|
|
288
386
|
.body section.section-big-ideas ol > li::before {
|
|
289
|
-
|
|
290
|
-
|
|
387
|
+
content: "— observation " counter(obs, lower-roman);
|
|
388
|
+
display: block;
|
|
291
389
|
font-family: var(--serif);
|
|
292
|
-
font-size: 32px;
|
|
293
|
-
font-weight: 500;
|
|
294
390
|
font-style: italic;
|
|
295
|
-
|
|
296
|
-
|
|
297
|
-
|
|
391
|
+
font-size: 14px;
|
|
392
|
+
font-weight: 400;
|
|
393
|
+
color: var(--clay-deep);
|
|
394
|
+
letter-spacing: 0;
|
|
395
|
+
margin: 0 0 8px;
|
|
298
396
|
text-transform: none;
|
|
397
|
+
position: static;
|
|
398
|
+
}
|
|
399
|
+
.body section.section-headline-findings .pillar h3,
|
|
400
|
+
.body section.section-big-ideas ol > li h3 {
|
|
401
|
+
font-family: var(--serif);
|
|
402
|
+
font-size: 26px;
|
|
403
|
+
font-weight: 400;
|
|
404
|
+
font-style: normal;
|
|
405
|
+
line-height: 1.25;
|
|
406
|
+
letter-spacing: -0.012em;
|
|
407
|
+
margin: 0 0 18px;
|
|
408
|
+
max-width: 680px;
|
|
409
|
+
color: var(--ink);
|
|
410
|
+
}
|
|
411
|
+
.body section.section-headline-findings .pillar h3 em,
|
|
412
|
+
.body section.section-big-ideas ol > li h3 em { font-style: italic; color: var(--em); }
|
|
413
|
+
.body section.section-headline-findings .pillar p,
|
|
414
|
+
.body section.section-big-ideas ol > li p {
|
|
415
|
+
font-family: var(--sans);
|
|
416
|
+
font-size: 16px;
|
|
417
|
+
line-height: 1.75;
|
|
418
|
+
color: var(--ink-mid);
|
|
419
|
+
margin: 0 0 14px;
|
|
299
420
|
}
|
|
300
|
-
.body section.section-big-ideas ol { counter-reset: bigidea; list-style: none; padding: 0; margin: 28px 0 0; }
|
|
301
|
-
.body section.section-big-ideas ol > li { counter-increment: bigidea; }
|
|
302
|
-
.body section.section-big-ideas ol > li::before { content: counter(bigidea); }
|
|
303
|
-
.body section.section-big-ideas ol > li:last-child { border-bottom: 1px solid var(--rule); }
|
|
304
|
-
.body section.section-headline-findings .pillar h3 { font-size: 21px; margin: 0 0 10px; font-style: italic; }
|
|
305
|
-
.body section.section-headline-findings .pillar p { font-size: 16.5px; line-height: 1.6; }
|
|
306
421
|
|
|
307
422
|
/* Why Now · soft callout. */
|
|
308
423
|
.body section.section-why-now {
|
|
@@ -312,7 +427,7 @@ html, body {
|
|
|
312
427
|
margin: 24px 0 32px;
|
|
313
428
|
border-radius: 4px;
|
|
314
429
|
}
|
|
315
|
-
.body section.section-why-now p { font-size:
|
|
430
|
+
.body section.section-why-now p { font-size: 17px; line-height: 1.65; }
|
|
316
431
|
|
|
317
432
|
/* Considerations · the gentle action substitute. */
|
|
318
433
|
.body section.section-considerations ol,
|
|
@@ -337,14 +452,16 @@ html, body {
|
|
|
337
452
|
.body section.section-considerations ol > li::before,
|
|
338
453
|
.body section.section-recommendations ol > li::before,
|
|
339
454
|
.body section.section-the-bet ol > li::before {
|
|
340
|
-
content: counter(rec);
|
|
455
|
+
content: counter(rec, lower-roman) ".";
|
|
341
456
|
position: absolute;
|
|
342
|
-
top:
|
|
457
|
+
top: 24px; left: 0;
|
|
343
458
|
font-family: var(--serif);
|
|
344
459
|
font-style: italic;
|
|
345
460
|
font-size: 28px;
|
|
346
461
|
color: var(--clay);
|
|
347
|
-
font-weight:
|
|
462
|
+
font-weight: 400;
|
|
463
|
+
line-height: 1;
|
|
464
|
+
letter-spacing: -0.005em;
|
|
348
465
|
}
|
|
349
466
|
.body section.section-considerations ol > li p:first-child strong,
|
|
350
467
|
.body section.section-recommendations ol > li p:first-child strong,
|
|
@@ -377,81 +494,143 @@ html, body {
|
|
|
377
494
|
font-weight: 500;
|
|
378
495
|
}
|
|
379
496
|
|
|
497
|
+
/* Open Questions · italic decimal-leading-zero numerals (01, 02, 03)
|
|
498
|
+
in clay serif, matching the reference's `.open-q::before` pattern. */
|
|
380
499
|
.body section.section-new-questions ol { counter-reset: nq; list-style: none; padding: 0; }
|
|
381
500
|
.body section.section-new-questions ol > li {
|
|
382
501
|
counter-increment: nq;
|
|
383
|
-
|
|
384
|
-
|
|
385
|
-
|
|
386
|
-
|
|
502
|
+
display: grid;
|
|
503
|
+
grid-template-columns: 80px 1fr;
|
|
504
|
+
gap: 20px;
|
|
505
|
+
align-items: start;
|
|
506
|
+
padding: 24px 0;
|
|
507
|
+
border-top: 1px solid var(--rule);
|
|
508
|
+
font-family: var(--serif);
|
|
509
|
+
font-size: 19px;
|
|
510
|
+
font-weight: 400;
|
|
511
|
+
line-height: 1.5;
|
|
512
|
+
color: var(--ink);
|
|
513
|
+
letter-spacing: -0.005em;
|
|
387
514
|
}
|
|
388
|
-
.body section.section-new-questions ol > li:last-child { border-bottom: 1px dashed var(--rule); }
|
|
389
515
|
.body section.section-new-questions ol > li::before {
|
|
390
|
-
content:
|
|
391
|
-
|
|
392
|
-
|
|
516
|
+
content: counter(nq, decimal-leading-zero);
|
|
517
|
+
font-family: var(--serif);
|
|
518
|
+
font-style: italic;
|
|
519
|
+
font-size: 22px;
|
|
520
|
+
font-weight: 400;
|
|
521
|
+
line-height: 1.2;
|
|
393
522
|
color: var(--clay);
|
|
394
|
-
|
|
395
|
-
font-size: 12px;
|
|
396
|
-
letter-spacing: 0.06em;
|
|
397
|
-
font-weight: 600;
|
|
523
|
+
letter-spacing: -0.005em;
|
|
398
524
|
}
|
|
525
|
+
.body section.section-new-questions ol > li em { font-style: italic; color: var(--em); }
|
|
399
526
|
|
|
527
|
+
/* Editorial table · the failure-mode / pre-mortem / scenario table.
|
|
528
|
+
Designed to read like a research-note exhibit: generous row-height,
|
|
529
|
+
sans body for legibility, mono-uppercase clay-deep headers (matches
|
|
530
|
+
chapter-num and figure-label kickers), serif italic clay-deep first
|
|
531
|
+
column for the "subject" axis, hairline row dividers. The 2px ink
|
|
532
|
+
top rule is enforced by report.html's unified design system. */
|
|
400
533
|
.body table.md-table {
|
|
401
534
|
width: 100%;
|
|
402
535
|
border-collapse: collapse;
|
|
403
|
-
margin:
|
|
404
|
-
font-size:
|
|
405
|
-
|
|
536
|
+
margin: 32px 0 36px;
|
|
537
|
+
font-size: 14px;
|
|
538
|
+
font-family: var(--sans);
|
|
539
|
+
line-height: 1.6;
|
|
406
540
|
}
|
|
407
|
-
.body table.md-table th,
|
|
408
|
-
|
|
409
|
-
|
|
541
|
+
.body table.md-table th,
|
|
542
|
+
.body table.md-table td {
|
|
543
|
+
padding: 16px 18px;
|
|
410
544
|
text-align: left;
|
|
411
545
|
vertical-align: top;
|
|
412
|
-
font-family: var(--
|
|
546
|
+
font-family: var(--sans);
|
|
547
|
+
color: var(--ink-mid);
|
|
413
548
|
}
|
|
414
549
|
.body table.md-table th {
|
|
415
|
-
font-family: var(--
|
|
550
|
+
font-family: var(--mono);
|
|
416
551
|
font-weight: 500;
|
|
417
|
-
font-size:
|
|
418
|
-
letter-spacing: 0.
|
|
552
|
+
font-size: 12px;
|
|
553
|
+
letter-spacing: 0.18em;
|
|
419
554
|
text-transform: uppercase;
|
|
420
|
-
color: var(--
|
|
555
|
+
color: var(--clay-deep);
|
|
556
|
+
padding-top: 14px;
|
|
557
|
+
padding-bottom: 14px;
|
|
421
558
|
}
|
|
422
|
-
.body table.md-table td:first-child {
|
|
559
|
+
.body table.md-table td:first-child {
|
|
560
|
+
font-family: var(--serif);
|
|
561
|
+
font-weight: 400;
|
|
562
|
+
font-style: italic;
|
|
563
|
+
color: var(--ink);
|
|
564
|
+
font-size: 14px;
|
|
565
|
+
letter-spacing: -0.005em;
|
|
566
|
+
padding-right: 28px;
|
|
567
|
+
}
|
|
568
|
+
.body table.md-table td strong { color: var(--ink); font-weight: 600; }
|
|
569
|
+
.body table.md-table td em { color: var(--em); font-style: italic; }
|
|
570
|
+
.body table.md-table tr:hover td { background: var(--surface); }
|
|
423
571
|
|
|
572
|
+
/* Methodology · rendered as the reference's "Acknowledgments & Method"
|
|
573
|
+
card. Warm paper-soft surface, mono clay-deep label, sans body. */
|
|
574
|
+
.body section.section-methodology {
|
|
575
|
+
background: var(--paper-soft);
|
|
576
|
+
border: 1px solid var(--rule);
|
|
577
|
+
padding: 40px 48px;
|
|
578
|
+
margin: 64px 0 0;
|
|
579
|
+
border-radius: 0;
|
|
580
|
+
}
|
|
424
581
|
.body h2.section-methodology {
|
|
425
|
-
margin
|
|
426
|
-
padding
|
|
427
|
-
font-size:
|
|
428
|
-
color: var(--
|
|
582
|
+
margin: 0 0 16px;
|
|
583
|
+
padding: 0;
|
|
584
|
+
font-size: 11px;
|
|
585
|
+
color: var(--clay-deep);
|
|
429
586
|
text-transform: uppercase;
|
|
430
|
-
letter-spacing: 0.
|
|
587
|
+
letter-spacing: 0.18em;
|
|
431
588
|
font-weight: 500;
|
|
432
|
-
font-family: var(--
|
|
589
|
+
font-family: var(--mono);
|
|
433
590
|
font-style: normal;
|
|
434
|
-
border-top:
|
|
591
|
+
border-top: none;
|
|
435
592
|
}
|
|
436
|
-
.body
|
|
437
|
-
.body section.section-methodology
|
|
438
|
-
|
|
593
|
+
.body h2.section-methodology::before { content: "— "; color: var(--clay-deep); }
|
|
594
|
+
.body section.section-methodology p {
|
|
595
|
+
font-family: var(--sans);
|
|
596
|
+
color: var(--ink-mid);
|
|
597
|
+
font-size: 15px;
|
|
598
|
+
line-height: 1.75;
|
|
599
|
+
max-width: 720px;
|
|
600
|
+
}
|
|
601
|
+
.body section.section-methodology em { color: var(--em); font-style: italic; }
|
|
602
|
+
.body section.section-methodology strong { color: var(--ink); font-family: var(--sans); font-size: 15px; font-weight: 600; }
|
|
439
603
|
|
|
440
|
-
.body pre.codeblock { background: var(--surface); border: 1px solid var(--rule); padding: 14px; font-family: var(--mono); font-size:
|
|
441
|
-
.body pre.mermaid { background: var(--surface); border-top:
|
|
604
|
+
.body pre.codeblock { background: var(--surface); border: 1px solid var(--rule); padding: 14px; font-family: var(--mono); font-size: 14px; color: var(--ink-mid); border-radius: 3px; }
|
|
605
|
+
.body pre.mermaid { background: var(--surface); border-top: 2px solid var(--clay); border-bottom: 1px solid var(--rule); padding: 28px 24px 24px; margin: 22px 0 28px; min-height: 380px; text-align: center; font-family: var(--mono); font-size: 12px; color: var(--ink-faint); }
|
|
442
606
|
.body pre.mermaid svg text { font-family: var(--serif) !important; }
|
|
443
607
|
|
|
444
608
|
.foot-rule {
|
|
445
|
-
margin:
|
|
446
|
-
padding:
|
|
609
|
+
margin: 96px 0 0;
|
|
610
|
+
padding: 28px 56px;
|
|
447
611
|
border-top: 1px solid var(--rule);
|
|
448
|
-
|
|
449
|
-
|
|
450
|
-
|
|
612
|
+
background: var(--paper);
|
|
613
|
+
display: flex;
|
|
614
|
+
justify-content: space-between;
|
|
615
|
+
align-items: center;
|
|
616
|
+
gap: 14px;
|
|
617
|
+
font-family: var(--mono);
|
|
618
|
+
font-size: 11px;
|
|
451
619
|
color: var(--ink-faint);
|
|
452
|
-
|
|
620
|
+
letter-spacing: 0.04em;
|
|
621
|
+
font-style: normal;
|
|
453
622
|
text-transform: none;
|
|
454
|
-
|
|
623
|
+
text-align: left;
|
|
624
|
+
}
|
|
625
|
+
.foot-rule::before {
|
|
626
|
+
content: "Boardroom · An Inquiry";
|
|
627
|
+
font-family: var(--serif);
|
|
628
|
+
font-size: 14px;
|
|
629
|
+
color: var(--ink);
|
|
630
|
+
font-weight: 500;
|
|
631
|
+
font-style: normal;
|
|
632
|
+
letter-spacing: -0.005em;
|
|
633
|
+
margin-right: auto;
|
|
455
634
|
}
|
|
456
635
|
|
|
457
636
|
.placeholder {
|
|
@@ -483,16 +662,19 @@ html, body {
|
|
|
483
662
|
}
|
|
484
663
|
.rec-rule code { flex: 0 0 auto; }
|
|
485
664
|
.rec-rule-line { flex: 1 1 auto; height: 1px; background: var(--rule); display: block; }
|
|
486
|
-
.rec-priority-p0 .rec-rule-line { background: var(--clay); height:
|
|
665
|
+
.rec-priority-p0 .rec-rule-line { background: var(--clay); height: 2px; }
|
|
487
666
|
.rec-action {
|
|
488
|
-
font-family: var(--serif); font-size:
|
|
489
|
-
color: var(--ink); font-weight:
|
|
490
|
-
letter-spacing: -0.
|
|
667
|
+
font-family: var(--serif); font-size: 22px; line-height: 1.3;
|
|
668
|
+
color: var(--ink); font-weight: 400; font-style: normal;
|
|
669
|
+
letter-spacing: -0.01em; margin: 0 0 14px; max-width: 68ch;
|
|
491
670
|
}
|
|
671
|
+
.rec-action em { font-style: italic; color: var(--em); }
|
|
492
672
|
.rec-rationale {
|
|
493
|
-
font-family: var(--
|
|
494
|
-
color: var(--ink-
|
|
673
|
+
font-family: var(--sans); font-size: 15px; line-height: 1.7;
|
|
674
|
+
color: var(--ink-mid); margin: 0 0 18px; max-width: 68ch;
|
|
495
675
|
}
|
|
676
|
+
.rec-rationale strong { color: var(--ink); font-weight: 600; }
|
|
677
|
+
.rec-rationale em { font-style: italic; color: var(--em); }
|
|
496
678
|
.rec-meta {
|
|
497
679
|
display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px;
|
|
498
680
|
margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink);
|
|
@@ -500,103 +682,173 @@ html, body {
|
|
|
500
682
|
}
|
|
501
683
|
.rec-meta-pair { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
|
|
502
684
|
.rec-meta-label {
|
|
503
|
-
font-family: var(--sans); font-size:
|
|
685
|
+
font-family: var(--sans); font-size: 11px; color: var(--ink-faint);
|
|
504
686
|
letter-spacing: 0.14em; text-transform: uppercase; font-weight: 500;
|
|
505
687
|
}
|
|
506
688
|
.rec-meta-value { color: var(--ink); font-style: italic; font-weight: 500; }
|
|
507
689
|
.rec-meta-sep { color: var(--ink-faint); }
|
|
508
690
|
.rec-risk {
|
|
509
691
|
display: flex; align-items: flex-start; gap: 8px;
|
|
510
|
-
font-family: var(--serif); font-size:
|
|
692
|
+
font-family: var(--serif); font-size: 15px; line-height: 1.65;
|
|
511
693
|
color: var(--ink-mid); margin: 0; font-style: italic;
|
|
512
694
|
}
|
|
513
695
|
.rec-risk-icon { flex: 0 0 auto; color: var(--clay); font-style: normal; }
|
|
514
696
|
.rec-risk-text { flex: 1 1 auto; }
|
|
515
697
|
.rec-risk-prefix {
|
|
516
|
-
font-family: var(--sans); font-style: normal; font-size:
|
|
698
|
+
font-family: var(--sans); font-style: normal; font-size: 11px;
|
|
517
699
|
color: var(--clay-deep); letter-spacing: 0.14em; text-transform: uppercase;
|
|
518
700
|
font-weight: 500; margin-right: 2px;
|
|
519
701
|
}
|
|
520
702
|
|
|
521
|
-
/* ───
|
|
703
|
+
/* ─── Open Questions · essay-grid (mirrors the Anthropic reference) ───
|
|
704
|
+
Mirrors `mvp/screen-7-report-anthropic.html` `.open-q` two-column
|
|
705
|
+
grid: italic serif `decimal-leading-zero` numeral on the left
|
|
706
|
+
(column 1), question + attribution + why-prose stacked in column 2.
|
|
707
|
+
Drops the previous `.nq-rule` "Q1 ── line ── Surfaced by" header
|
|
708
|
+
bar — that read as a fussy editorial header against the otherwise
|
|
709
|
+
clean essay register. Top-rule between items, bottom-rule on the
|
|
710
|
+
last item, no card borders, no quote marks, no decorative lines. */
|
|
711
|
+
.body section.section-new-questions ol {
|
|
712
|
+
counter-reset: nq;
|
|
713
|
+
list-style: none;
|
|
714
|
+
padding: 0;
|
|
715
|
+
margin: 28px 0 0;
|
|
716
|
+
}
|
|
522
717
|
.body section.section-new-questions li.nq-item {
|
|
523
|
-
|
|
718
|
+
counter-increment: nq;
|
|
719
|
+
display: grid;
|
|
720
|
+
grid-template-columns: 80px 1fr;
|
|
721
|
+
column-gap: 24px;
|
|
722
|
+
row-gap: 0;
|
|
723
|
+
padding: 32px 0;
|
|
724
|
+
margin: 0;
|
|
725
|
+
border-top: 1px solid var(--rule);
|
|
726
|
+
list-style: none;
|
|
524
727
|
}
|
|
525
|
-
.body section.section-new-questions li.nq-item:
|
|
526
|
-
|
|
527
|
-
.nq-rule { display: flex; align-items: center; gap: 14px; margin-bottom: 22px; }
|
|
528
|
-
.nq-num {
|
|
529
|
-
font-family: var(--sans); font-size: 11px; font-weight: 500;
|
|
530
|
-
color: var(--clay); letter-spacing: 0.18em; flex: 0 0 auto;
|
|
728
|
+
.body section.section-new-questions li.nq-item:last-child {
|
|
729
|
+
border-bottom: 1px solid var(--rule);
|
|
531
730
|
}
|
|
532
|
-
|
|
533
|
-
.
|
|
534
|
-
|
|
535
|
-
|
|
536
|
-
|
|
731
|
+
/* Italic decimal-leading-zero numeral · column 1, top-aligned with
|
|
732
|
+
the question's first line. */
|
|
733
|
+
.body section.section-new-questions li.nq-item::before {
|
|
734
|
+
content: counter(nq, decimal-leading-zero);
|
|
735
|
+
grid-column: 1;
|
|
736
|
+
grid-row: 1;
|
|
737
|
+
font-family: var(--serif);
|
|
738
|
+
font-style: italic;
|
|
739
|
+
font-size: 24px;
|
|
740
|
+
font-weight: 400;
|
|
741
|
+
line-height: 1.3;
|
|
742
|
+
color: var(--clay);
|
|
743
|
+
letter-spacing: -0.005em;
|
|
744
|
+
align-self: start;
|
|
745
|
+
padding-top: 2px;
|
|
537
746
|
}
|
|
538
|
-
|
|
539
|
-
|
|
747
|
+
/* Question · serif roman with italic-em-clay emphasis (signature).
|
|
748
|
+
Sits as the headline of each item; the why-prose follows in body
|
|
749
|
+
register, the attribution is a closing caption at the bottom. */
|
|
540
750
|
.nq-question {
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
|
|
545
|
-
|
|
546
|
-
|
|
547
|
-
|
|
548
|
-
font-
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
|
|
553
|
-
|
|
554
|
-
|
|
555
|
-
}
|
|
556
|
-
.nq-
|
|
557
|
-
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
|
|
561
|
-
|
|
562
|
-
|
|
563
|
-
|
|
564
|
-
|
|
751
|
+
grid-column: 2;
|
|
752
|
+
grid-row: 1;
|
|
753
|
+
font-family: var(--serif);
|
|
754
|
+
font-size: 22px;
|
|
755
|
+
line-height: 1.35;
|
|
756
|
+
color: var(--ink);
|
|
757
|
+
font-style: normal;
|
|
758
|
+
font-weight: 400;
|
|
759
|
+
letter-spacing: -0.005em;
|
|
760
|
+
margin: 0;
|
|
761
|
+
padding: 0;
|
|
762
|
+
border: none;
|
|
763
|
+
background: transparent;
|
|
764
|
+
max-width: 60ch;
|
|
765
|
+
}
|
|
766
|
+
.nq-question em { font-style: italic; color: var(--em); }
|
|
767
|
+
.nq-question::before,
|
|
768
|
+
.nq-question::after { display: none; }
|
|
769
|
+
/* Why-it-matters · sans body, follows the question directly with a
|
|
770
|
+
tight 10px gap so the question + prose read as one connected
|
|
771
|
+
block. The "Why it matters:" prefix is stripped by the markdown
|
|
772
|
+
parser when it's wrapped in italic; if the brief writes a bare
|
|
773
|
+
`Why it matters:` line (no italic), it stays in the prose — the
|
|
774
|
+
tight gap prevents that label from feeling orphaned. */
|
|
775
|
+
.nq-why {
|
|
776
|
+
grid-column: 2;
|
|
777
|
+
grid-row: 2;
|
|
778
|
+
font-family: var(--sans);
|
|
779
|
+
font-size: 15px;
|
|
780
|
+
line-height: 1.7;
|
|
565
781
|
color: var(--ink-mid);
|
|
566
|
-
|
|
782
|
+
margin: 10px 0 0;
|
|
783
|
+
max-width: 60ch;
|
|
784
|
+
}
|
|
785
|
+
.nq-why em { font-style: italic; color: var(--em); }
|
|
786
|
+
/* Attribution · closing caption at the bottom of each item, like a
|
|
787
|
+
magazine byline. The legacy `.nq-rule` wrapper held Q1 + horizontal
|
|
788
|
+
line + attribution as a header bar; we strip Q1 + line and re-flow
|
|
789
|
+
the wrapper into row 3 (below why-text) so only the attribution
|
|
790
|
+
shows — italic serif small (matches the reference's `.obs-attr`
|
|
791
|
+
pattern). The wrapper collapses to `display: none` when there's no
|
|
792
|
+
attribution to avoid an empty bottom row. */
|
|
793
|
+
.nq-rule { display: none; }
|
|
794
|
+
.nq-rule:has(.nq-attribution) {
|
|
795
|
+
display: block;
|
|
796
|
+
grid-column: 2;
|
|
797
|
+
grid-row: 3;
|
|
798
|
+
margin: 12px 0 0;
|
|
799
|
+
}
|
|
800
|
+
.nq-num,
|
|
801
|
+
.nq-rule-line { display: none; }
|
|
802
|
+
.nq-attribution {
|
|
803
|
+
display: inline-flex;
|
|
804
|
+
align-items: baseline;
|
|
805
|
+
gap: 6px;
|
|
806
|
+
font-family: var(--serif);
|
|
807
|
+
font-size: 13px;
|
|
567
808
|
font-style: italic;
|
|
568
|
-
|
|
809
|
+
font-weight: 400;
|
|
569
810
|
letter-spacing: 0;
|
|
570
|
-
|
|
811
|
+
text-transform: none;
|
|
812
|
+
color: var(--ink-faint);
|
|
571
813
|
}
|
|
572
|
-
|
|
573
|
-
|
|
574
|
-
|
|
575
|
-
|
|
576
|
-
|
|
577
|
-
padding: 18px 20px 14px;
|
|
578
|
-
min-height: 96px;
|
|
814
|
+
.nq-attribution::before {
|
|
815
|
+
content: "—";
|
|
816
|
+
color: var(--ink-faint);
|
|
817
|
+
margin-right: 2px;
|
|
818
|
+
font-style: normal;
|
|
579
819
|
}
|
|
580
|
-
.
|
|
820
|
+
.nq-attribution-prefix { color: var(--ink-faint); }
|
|
821
|
+
.nq-attribution-who { color: var(--ink); font-weight: 500; font-style: italic; }
|
|
822
|
+
|
|
823
|
+
/* ─── Metric strip · per-spine treatment ─────────────────────────
|
|
824
|
+
Inherits the spine-agnostic baseline in public/report.html's inline
|
|
825
|
+
<style> (Swiss-editorial layout: big numeral top, mute mono label
|
|
826
|
+
bottom, hairline grid, no surrounding card box). This block keeps
|
|
827
|
+
the anthropic spine's signatures — Charter serif numerals + clay
|
|
828
|
+
accent — without fighting the baseline structure. */
|
|
829
|
+
.body .metric-strip-intro {
|
|
581
830
|
color: var(--clay-deep);
|
|
582
|
-
font-family: "Charter", "Georgia", serif;
|
|
583
|
-
font-style: italic;
|
|
584
|
-
font-weight: 500;
|
|
585
|
-
text-transform: none;
|
|
586
|
-
letter-spacing: 0;
|
|
587
|
-
font-size: 12px;
|
|
588
831
|
}
|
|
832
|
+
/* Big number · Charter serif (anthropic signature numerals). Slightly
|
|
833
|
+
heavier weight than the baseline 300 so the serif glyphs read at
|
|
834
|
+
size — Charter's regular weight is closer to the visual heft of a
|
|
835
|
+
sans 300. */
|
|
589
836
|
.body .metric-value {
|
|
590
837
|
color: var(--ink);
|
|
591
|
-
font-family: "Charter", "Georgia",
|
|
592
|
-
|
|
593
|
-
font-weight:
|
|
838
|
+
font-family: "Charter", "Georgia",
|
|
839
|
+
"PingFang SC", "PingFang TC", "Songti SC", serif;
|
|
840
|
+
font-weight: 400;
|
|
594
841
|
letter-spacing: -0.02em;
|
|
595
842
|
}
|
|
596
843
|
.body .metric-card[data-trend="up"] .metric-value { color: var(--sage-deep, #4F6F4A); }
|
|
597
844
|
.body .metric-card[data-trend="down"] .metric-value { color: var(--clay-deep); }
|
|
598
845
|
.body .metric-trend[data-trend="up"] { color: var(--sage-deep, #4F6F4A); }
|
|
599
846
|
.body .metric-trend[data-trend="down"] { color: var(--clay-deep); }
|
|
847
|
+
/* Label · clay-deep mono caps (the baseline already styles the
|
|
848
|
+
typography; we only override the colour). */
|
|
849
|
+
.body .metric-label {
|
|
850
|
+
color: var(--clay-deep);
|
|
851
|
+
}
|
|
600
852
|
.body .metric-qualifier {
|
|
601
853
|
color: var(--ink-mid);
|
|
602
854
|
font-family: "Charter", "Georgia", serif;
|
|
@@ -604,6 +856,97 @@ html, body {
|
|
|
604
856
|
}
|
|
605
857
|
.body .metric-attribution {
|
|
606
858
|
color: var(--ink-faint);
|
|
859
|
+
}
|
|
860
|
+
|
|
861
|
+
/* ─── Path comparison · per-spine treatment ──────────────────────
|
|
862
|
+
Anthropic-essay is the canonical reference for this component
|
|
863
|
+
(mvp/screen-7-report-anthropic.html "03 — A Comparison"). Stance
|
|
864
|
+
accents map to clay (weak) / sage-deep (strong) — Anthropic's
|
|
865
|
+
warm/cool dyad. Card surface is paper-soft (warm cream tint);
|
|
866
|
+
path name uses Charter italic-emphasis register. */
|
|
867
|
+
.body .path-comparison-intro {
|
|
868
|
+
font-family: "Charter", "Georgia", "Songti SC", serif;
|
|
869
|
+
font-size: 15px;
|
|
870
|
+
color: var(--ink-soft);
|
|
871
|
+
font-style: normal;
|
|
872
|
+
letter-spacing: 0;
|
|
873
|
+
}
|
|
874
|
+
.body .path-comparison-intro em { color: var(--clay-deep); font-style: italic; }
|
|
875
|
+
.body .path-comparison .path {
|
|
876
|
+
background: var(--paper-soft);
|
|
877
|
+
border: 1px solid var(--rule);
|
|
878
|
+
border-top-width: 3px;
|
|
879
|
+
padding: 32px;
|
|
880
|
+
}
|
|
881
|
+
.body .path-comparison .path-weak { border-top-color: var(--clay); }
|
|
882
|
+
.body .path-comparison .path-strong { border-top-color: var(--sage-deep, #6B7D5F); }
|
|
883
|
+
.body .path-comparison .path-weak .path-tag { color: var(--clay-deep); }
|
|
884
|
+
.body .path-comparison .path-strong .path-tag { color: var(--sage-deep, #6B7D5F); }
|
|
885
|
+
.body .path-comparison .path-tag {
|
|
607
886
|
font-family: var(--mono);
|
|
608
|
-
|
|
887
|
+
font-weight: 500;
|
|
609
888
|
}
|
|
889
|
+
.body .path-comparison .path-name {
|
|
890
|
+
font-family: "Charter", "Georgia", "Songti SC", serif;
|
|
891
|
+
font-size: 21px;
|
|
892
|
+
font-weight: 400;
|
|
893
|
+
line-height: 1.3;
|
|
894
|
+
color: var(--ink);
|
|
895
|
+
letter-spacing: -0.01em;
|
|
896
|
+
margin-bottom: 20px;
|
|
897
|
+
}
|
|
898
|
+
.body .path-comparison .path-name-sub {
|
|
899
|
+
font-family: "Charter", "Georgia", serif;
|
|
900
|
+
font-style: italic;
|
|
901
|
+
color: var(--clay-deep);
|
|
902
|
+
font-size: 14px;
|
|
903
|
+
margin-top: 6px;
|
|
904
|
+
}
|
|
905
|
+
.body .path-comparison .path li {
|
|
906
|
+
font-family: var(--sans);
|
|
907
|
+
font-size: 14px;
|
|
908
|
+
line-height: 1.6;
|
|
909
|
+
color: var(--ink-soft);
|
|
910
|
+
border-bottom: 1px solid var(--rule-soft);
|
|
911
|
+
}
|
|
912
|
+
.body .path-comparison .path-weak li::before { background: var(--clay); }
|
|
913
|
+
.body .path-comparison .path-strong li::before { background: var(--sage-deep, #6B7D5F); }
|
|
914
|
+
.body .path-comparison-implication {
|
|
915
|
+
font-family: "Charter", "Georgia", "Songti SC", serif;
|
|
916
|
+
font-style: italic;
|
|
917
|
+
color: var(--ink-mid);
|
|
918
|
+
font-size: 16px;
|
|
919
|
+
margin-top: 32px;
|
|
920
|
+
}
|
|
921
|
+
|
|
922
|
+
/* ─── Views-compared · per-spine · anthropic-essay ──────────────
|
|
923
|
+
Hairline-frame register · accent stripe on TOP (per project rule).
|
|
924
|
+
Spine has no separate warn token — clay-deep covers both emphasis
|
|
925
|
+
and caution; cards use lighter clay, divergence uses clay-deep so
|
|
926
|
+
the two sides read as related-but-distinct. */
|
|
927
|
+
.body .vc-section-label { color: var(--clay-deep); border-color: var(--rule); }
|
|
928
|
+
.body .views-compared-alignment .vc-card {
|
|
929
|
+
border-color: var(--rule);
|
|
930
|
+
border-top-color: var(--clay);
|
|
931
|
+
}
|
|
932
|
+
.body .vc-card-headline { font-family: "Charter", "Georgia", "Songti SC", serif; color: var(--ink); }
|
|
933
|
+
.body .vc-chip { color: var(--ink-soft); border-color: var(--rule); }
|
|
934
|
+
.body .vc-card-note { color: var(--ink-mid); }
|
|
935
|
+
.body .vc-fork { border-color: var(--rule); border-top-color: var(--clay-deep); }
|
|
936
|
+
.body .vc-fork-hinge { font-family: "Charter", "Georgia", serif; color: var(--ink); }
|
|
937
|
+
.body .vc-side { border-color: var(--rule-soft, var(--rule)); }
|
|
938
|
+
.body .vc-side-label { color: var(--clay-deep); }
|
|
939
|
+
.body .vc-side-stance { color: var(--ink-mid); }
|
|
940
|
+
.body .vc-fork-resolution { color: var(--ink-mid); border-top-color: var(--rule-soft, var(--rule)); }
|
|
941
|
+
.body .vc-resolution-label { color: var(--ink-faint); }
|
|
942
|
+
.body .vc-row-name { font-family: "Charter", "Georgia", serif; color: var(--ink); font-weight: 500; }
|
|
943
|
+
.body .vc-row-lens { color: var(--ink-faint); }
|
|
944
|
+
.body .vc-row-stance { color: var(--clay-deep); font-style: italic; }
|
|
945
|
+
.body .vc-row-position { color: var(--ink-soft); }
|
|
946
|
+
.body .vc-row-quote { font-family: "Charter", "Georgia", serif; color: var(--ink-mid); }
|
|
947
|
+
.body .views-compared-synthesis {
|
|
948
|
+
border-color: var(--rule);
|
|
949
|
+
border-top-color: var(--ink-faint);
|
|
950
|
+
}
|
|
951
|
+
.body .vc-synthesis-body { font-family: "Charter", "Georgia", serif; color: var(--ink); }
|
|
952
|
+
|