g-comments 0.2.0 → 0.2.2

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.
Files changed (18) hide show
  1. package/CHANGELOG.md +19 -0
  2. package/README.md +24 -13
  3. package/dist/{chunk-WACVXJHD.js → chunk-EWWBVJ2B.js} +5 -5
  4. package/dist/chunk-EWWBVJ2B.js.map +1 -0
  5. package/dist/{chunk-IBNNENCZ.cjs → chunk-I2L3IAXL.cjs} +5 -4
  6. package/dist/chunk-I2L3IAXL.cjs.map +1 -0
  7. package/dist/element.js +985 -962
  8. package/dist/element.js.map +1 -1
  9. package/dist/index.cjs +16 -16
  10. package/dist/index.js +1 -1
  11. package/dist/react.cjs +71 -45
  12. package/dist/react.cjs.map +1 -1
  13. package/dist/react.js +40 -14
  14. package/dist/react.js.map +1 -1
  15. package/package.json +1 -1
  16. package/styles/styles.css +964 -945
  17. package/dist/chunk-IBNNENCZ.cjs.map +0 -1
  18. package/dist/chunk-WACVXJHD.js.map +0 -1
package/styles/styles.css CHANGED
@@ -6,63 +6,58 @@
6
6
  * class selectors override it when loaded after this file. Nothing outside the
7
7
  * widget root is touched.
8
8
  *
9
+ * The rules live in the `gc-defaults` cascade layer, so any unlayered CSS of
10
+ * your own wins regardless of order or specificity; a forum theme
11
+ * (`theme="forum"`) sits in the `gc-forum` layer, above the defaults and
12
+ * below your CSS.
13
+ *
9
14
  * Public tokens are `--gc-*`. Set them on the widget root (or through
10
15
  * `appearance.variables`) or on any ancestor such as `:root`; whatever you set
11
16
  * applies in every colour scheme. Unset tokens fall back to the defaults below,
12
17
  * resolved into private `--_gc-*` variables.
13
18
  */
14
19
 
15
- /* Tokens: light defaults */
16
-
17
- .gc-root--styled {
18
- --_gc-font: var(
19
- --gc-font,
20
- system-ui,
21
- -apple-system,
22
- "Segoe UI",
23
- Roboto,
24
- "Helvetica Neue",
25
- Arial,
26
- sans-serif,
27
- "Apple Color Emoji",
28
- "Segoe UI Emoji"
29
- );
30
- --_gc-fg: var(--gc-fg, #1f2328);
31
- --_gc-fg-muted: var(--gc-fg-muted, #59636e);
32
- --_gc-bg: var(--gc-bg, #ffffff);
33
- --_gc-bg-subtle: var(--gc-bg-subtle, #f6f8fa);
34
- --_gc-border: var(--gc-border, #d1d9e0);
35
- --_gc-accent: var(--gc-accent, #0969da);
36
- --_gc-accent-fg: var(--gc-accent-fg, #ffffff);
37
- --_gc-danger: var(--gc-danger, #cf222e);
38
- --_gc-radius: var(--gc-radius, 8px);
39
- --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(31 35 40 / 0.08), 0 8px 24px rgb(66 74 83 / 0.12));
40
- --_gc-space: var(--gc-space, 0.5rem);
41
- --_gc-avatar-size: var(--gc-avatar-size, 2.25rem);
42
- }
20
+ @layer gc-defaults, gc-forum;
21
+
22
+ @layer gc-defaults {
23
+
24
+ /* Tokens: light defaults */
25
+
26
+ .gc-root--styled {
27
+ --_gc-font: var(
28
+ --gc-font,
29
+ system-ui,
30
+ -apple-system,
31
+ "Segoe UI",
32
+ Roboto,
33
+ "Helvetica Neue",
34
+ Arial,
35
+ sans-serif,
36
+ "Apple Color Emoji",
37
+ "Segoe UI Emoji"
38
+ );
39
+ --_gc-fg: var(--gc-fg, #1f2328);
40
+ --_gc-fg-muted: var(--gc-fg-muted, #59636e);
41
+ --_gc-bg: var(--gc-bg, #ffffff);
42
+ --_gc-bg-subtle: var(--gc-bg-subtle, #f6f8fa);
43
+ --_gc-border: var(--gc-border, #d1d9e0);
44
+ --_gc-accent: var(--gc-accent, #0969da);
45
+ --_gc-accent-fg: var(--gc-accent-fg, #ffffff);
46
+ --_gc-danger: var(--gc-danger, #cf222e);
47
+ --_gc-radius: var(--gc-radius, 8px);
48
+ --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(31 35 40 / 0.08), 0 8px 24px rgb(66 74 83 / 0.12));
49
+ --_gc-space: var(--gc-space, 0.5rem);
50
+ --_gc-avatar-size: var(--gc-avatar-size, 2.25rem);
51
+ }
43
52
 
44
- .gc-root--styled[data-gc-theme="light"],
45
- .gc-root--styled[data-gc-theme="auto"] {
46
- color-scheme: light;
47
- }
53
+ .gc-root--styled[data-gc-theme="light"],
54
+ .gc-root--styled[data-gc-theme="auto"] {
55
+ color-scheme: light;
56
+ }
48
57
 
49
- /* Tokens: dark defaults */
50
-
51
- .gc-root--styled[data-gc-theme="dark"] {
52
- --_gc-fg: var(--gc-fg, #e6edf3);
53
- --_gc-fg-muted: var(--gc-fg-muted, #9198a1);
54
- --_gc-bg: var(--gc-bg, #0d1117);
55
- --_gc-bg-subtle: var(--gc-bg-subtle, #151b23);
56
- --_gc-border: var(--gc-border, #3d444d);
57
- --_gc-accent: var(--gc-accent, #4493f8);
58
- --_gc-accent-fg: var(--gc-accent-fg, #0d1117);
59
- --_gc-danger: var(--gc-danger, #f85149);
60
- --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(1 4 9 / 0.4), 0 8px 24px rgb(1 4 9 / 0.6));
61
- color-scheme: dark;
62
- }
58
+ /* Tokens: dark defaults */
63
59
 
64
- @media (prefers-color-scheme: dark) {
65
- .gc-root--styled[data-gc-theme="auto"] {
60
+ .gc-root--styled[data-gc-theme="dark"] {
66
61
  --_gc-fg: var(--gc-fg, #e6edf3);
67
62
  --_gc-fg-muted: var(--gc-fg-muted, #9198a1);
68
63
  --_gc-bg: var(--gc-bg, #0d1117);
@@ -74,1072 +69,1096 @@
74
69
  --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(1 4 9 / 0.4), 0 8px 24px rgb(1 4 9 / 0.6));
75
70
  color-scheme: dark;
76
71
  }
77
- }
78
-
79
- /* theme="inherit": derive the neutrals from the page's own text colour. */
80
- .gc-root--styled:not([data-gc-theme]) {
81
- --_gc-fg: var(--gc-fg, currentColor);
82
- --_gc-fg-muted: var(--gc-fg-muted, color-mix(in srgb, currentColor 68%, transparent));
83
- --_gc-bg: var(--gc-bg, transparent);
84
- --_gc-bg-subtle: var(--gc-bg-subtle, color-mix(in srgb, currentColor 6%, transparent));
85
- --_gc-border: var(--gc-border, color-mix(in srgb, currentColor 22%, transparent));
86
- }
87
72
 
88
- /* Root */
89
-
90
- .gc-root--styled {
91
- position: relative;
92
- container: gc-root / inline-size;
93
- display: flex;
94
- flex-direction: column;
95
- gap: calc(var(--_gc-space) * 2);
96
- min-width: 0;
97
- font-family: var(--_gc-font);
98
- font-size: 1rem;
99
- line-height: 1.5;
100
- color: var(--_gc-fg);
101
- background: var(--_gc-bg);
102
- -webkit-text-size-adjust: 100%;
103
- text-size-adjust: 100%;
104
- }
105
-
106
- :where(.gc-root--styled),
107
- :where(.gc-root--styled) *,
108
- :where(.gc-root--styled) *::before,
109
- :where(.gc-root--styled) *::after {
110
- box-sizing: border-box;
111
- }
73
+ @media (prefers-color-scheme: dark) {
74
+ .gc-root--styled[data-gc-theme="auto"] {
75
+ --_gc-fg: var(--gc-fg, #e6edf3);
76
+ --_gc-fg-muted: var(--gc-fg-muted, #9198a1);
77
+ --_gc-bg: var(--gc-bg, #0d1117);
78
+ --_gc-bg-subtle: var(--gc-bg-subtle, #151b23);
79
+ --_gc-border: var(--gc-border, #3d444d);
80
+ --_gc-accent: var(--gc-accent, #4493f8);
81
+ --_gc-accent-fg: var(--gc-accent-fg, #0d1117);
82
+ --_gc-danger: var(--gc-danger, #f85149);
83
+ --_gc-shadow: var(--gc-shadow, 0 1px 2px rgb(1 4 9 / 0.4), 0 8px 24px rgb(1 4 9 / 0.6));
84
+ color-scheme: dark;
85
+ }
86
+ }
112
87
 
113
- :where(.gc-root--styled) :focus-visible {
114
- outline: 2px solid var(--_gc-accent);
115
- outline-offset: 2px;
116
- }
88
+ /* theme="inherit": derive the neutrals from the page's own text colour. */
89
+ .gc-root--styled:not([data-gc-theme]) {
90
+ --_gc-fg: var(--gc-fg, currentColor);
91
+ --_gc-fg-muted: var(--gc-fg-muted, color-mix(in srgb, currentColor 68%, transparent));
92
+ --_gc-bg: var(--gc-bg, transparent);
93
+ --_gc-bg-subtle: var(--gc-bg-subtle, color-mix(in srgb, currentColor 6%, transparent));
94
+ --_gc-border: var(--gc-border, color-mix(in srgb, currentColor 22%, transparent));
95
+ }
117
96
 
118
- :where(.gc-root--styled) .gc-icon {
119
- flex: none;
120
- width: 1rem;
121
- height: 1rem;
122
- }
97
+ /* Root */
98
+
99
+ .gc-root--styled {
100
+ position: relative;
101
+ container: gc-root / inline-size;
102
+ display: flex;
103
+ flex-direction: column;
104
+ gap: calc(var(--_gc-space) * 2);
105
+ min-width: 0;
106
+ font-family: var(--_gc-font);
107
+ font-size: 1rem;
108
+ line-height: 1.5;
109
+ color: var(--_gc-fg);
110
+ background: var(--_gc-bg);
111
+ -webkit-text-size-adjust: 100%;
112
+ text-size-adjust: 100%;
113
+ }
123
114
 
124
- /* Buttons */
125
-
126
- :where(.gc-root--styled) .gc-button {
127
- appearance: none;
128
- display: inline-flex;
129
- align-items: center;
130
- justify-content: center;
131
- gap: 0.375rem;
132
- min-height: 2.25rem;
133
- margin: 0;
134
- padding: 0 0.875rem;
135
- border: 1px solid var(--_gc-border);
136
- border-radius: var(--_gc-radius);
137
- background: var(--_gc-bg);
138
- color: var(--_gc-fg);
139
- font: inherit;
140
- font-size: 0.875rem;
141
- font-weight: 600;
142
- line-height: 1.2;
143
- text-decoration: none;
144
- white-space: nowrap;
145
- cursor: pointer;
146
- transition:
147
- background-color 0.15s,
148
- border-color 0.15s,
149
- color 0.15s;
150
- }
115
+ :where(.gc-root--styled),
116
+ :where(.gc-root--styled) *,
117
+ :where(.gc-root--styled) *::before,
118
+ :where(.gc-root--styled) *::after {
119
+ box-sizing: border-box;
120
+ }
151
121
 
152
- :where(.gc-root--styled) .gc-button:hover:not(:disabled) {
153
- background: var(--_gc-bg-subtle);
154
- }
122
+ :where(.gc-root--styled) :focus-visible {
123
+ outline: 2px solid var(--_gc-accent);
124
+ outline-offset: 2px;
125
+ }
155
126
 
156
- :where(.gc-root--styled) .gc-button:disabled {
157
- opacity: 0.55;
158
- cursor: not-allowed;
159
- }
127
+ :where(.gc-root--styled) .gc-icon {
128
+ flex: none;
129
+ width: 1rem;
130
+ height: 1rem;
131
+ }
160
132
 
161
- :where(.gc-root--styled) .gc-button--primary {
162
- border-color: var(--_gc-accent);
163
- background: var(--_gc-accent);
164
- color: var(--_gc-accent-fg);
165
- }
133
+ /* Buttons */
134
+
135
+ :where(.gc-root--styled) .gc-button {
136
+ appearance: none;
137
+ display: inline-flex;
138
+ align-items: center;
139
+ justify-content: center;
140
+ gap: 0.375rem;
141
+ min-height: 2.25rem;
142
+ margin: 0;
143
+ padding: 0 0.875rem;
144
+ border: 1px solid var(--_gc-border);
145
+ border-radius: var(--_gc-radius);
146
+ background: var(--_gc-bg);
147
+ color: var(--_gc-fg);
148
+ font: inherit;
149
+ font-size: 0.875rem;
150
+ font-weight: 600;
151
+ line-height: 1.2;
152
+ text-decoration: none;
153
+ white-space: nowrap;
154
+ cursor: pointer;
155
+ transition:
156
+ background-color 0.15s,
157
+ border-color 0.15s,
158
+ color 0.15s;
159
+ }
166
160
 
167
- :where(.gc-root--styled) .gc-button--primary:hover:not(:disabled) {
168
- background: var(--_gc-accent);
169
- background: color-mix(in srgb, var(--_gc-accent) 86%, var(--_gc-fg));
170
- }
161
+ :where(.gc-root--styled) .gc-button:hover:not(:disabled) {
162
+ background: var(--_gc-bg-subtle);
163
+ }
171
164
 
172
- :where(.gc-root--styled) .gc-button--danger {
173
- border-color: var(--_gc-danger);
174
- background: var(--_gc-danger);
175
- color: #ffffff;
176
- }
165
+ :where(.gc-root--styled) .gc-button:disabled {
166
+ opacity: 0.55;
167
+ cursor: not-allowed;
168
+ }
177
169
 
178
- :where(.gc-root--styled) .gc-button--danger:hover:not(:disabled) {
179
- background: var(--_gc-danger);
180
- background: color-mix(in srgb, var(--_gc-danger) 86%, var(--_gc-fg));
181
- }
170
+ :where(.gc-root--styled) .gc-button--primary {
171
+ border-color: var(--_gc-accent);
172
+ background: var(--_gc-accent);
173
+ color: var(--_gc-accent-fg);
174
+ }
182
175
 
183
- :where(.gc-root--styled) .gc-button--ghost {
184
- border-color: transparent;
185
- background: transparent;
186
- color: var(--_gc-fg-muted);
187
- }
176
+ :where(.gc-root--styled) .gc-button--primary:hover:not(:disabled) {
177
+ background: var(--_gc-accent);
178
+ background: color-mix(in srgb, var(--_gc-accent) 86%, var(--_gc-fg));
179
+ }
188
180
 
189
- :where(.gc-root--styled) .gc-button--ghost:hover:not(:disabled) {
190
- background: var(--_gc-bg-subtle);
191
- color: var(--_gc-fg);
192
- }
181
+ :where(.gc-root--styled) .gc-button--danger {
182
+ border-color: var(--_gc-danger);
183
+ background: var(--_gc-danger);
184
+ color: #ffffff;
185
+ }
193
186
 
194
- :where(.gc-root--styled) .gc-button--small {
195
- min-height: 2rem;
196
- padding: 0 0.5rem;
197
- font-size: 0.8125rem;
198
- }
187
+ :where(.gc-root--styled) .gc-button--danger:hover:not(:disabled) {
188
+ background: var(--_gc-danger);
189
+ background: color-mix(in srgb, var(--_gc-danger) 86%, var(--_gc-fg));
190
+ }
199
191
 
200
- :where(.gc-root--styled) .gc-button--icon {
201
- width: 2rem;
202
- padding: 0;
203
- }
192
+ :where(.gc-root--styled) .gc-button--ghost {
193
+ border-color: transparent;
194
+ background: transparent;
195
+ color: var(--_gc-fg-muted);
196
+ }
204
197
 
205
- :where(.gc-root--styled) .gc-button--link {
206
- min-height: 0;
207
- padding: 0.25rem 0;
208
- border-color: transparent;
209
- background: none;
210
- color: var(--_gc-accent);
211
- }
198
+ :where(.gc-root--styled) .gc-button--ghost:hover:not(:disabled) {
199
+ background: var(--_gc-bg-subtle);
200
+ color: var(--_gc-fg);
201
+ }
212
202
 
213
- :where(.gc-root--styled) .gc-button--link:hover:not(:disabled) {
214
- background: none;
215
- text-decoration: underline;
216
- }
203
+ :where(.gc-root--styled) .gc-button--small {
204
+ min-height: 2rem;
205
+ padding: 0 0.5rem;
206
+ font-size: 0.8125rem;
207
+ }
217
208
 
218
- /* Header */
209
+ :where(.gc-root--styled) .gc-button--icon {
210
+ width: 2rem;
211
+ padding: 0;
212
+ }
219
213
 
220
- :where(.gc-root--styled) .gc-header {
221
- display: flex;
222
- flex-wrap: wrap;
223
- align-items: center;
224
- justify-content: space-between;
225
- gap: var(--_gc-space);
226
- padding-bottom: var(--_gc-space);
227
- border-bottom: 1px solid var(--_gc-border);
228
- }
214
+ :where(.gc-root--styled) .gc-button--link {
215
+ min-height: 0;
216
+ padding: 0.25rem 0;
217
+ border-color: transparent;
218
+ background: none;
219
+ color: var(--_gc-accent);
220
+ }
229
221
 
230
- :where(.gc-root--styled) .gc-header__count {
231
- margin: 0;
232
- font-size: 1.125rem;
233
- font-weight: 700;
234
- line-height: 1.3;
235
- }
222
+ :where(.gc-root--styled) .gc-button--link:hover:not(:disabled) {
223
+ background: none;
224
+ text-decoration: underline;
225
+ }
236
226
 
237
- :where(.gc-root--styled) .gc-sort {
238
- display: inline-flex;
239
- align-items: center;
240
- gap: 0.5rem;
241
- font-size: 0.875rem;
242
- color: var(--_gc-fg-muted);
243
- }
227
+ /* Header */
244
228
 
245
- :where(.gc-root--styled) .gc-sort__select {
246
- min-height: 2rem;
247
- padding: 0.25rem 0.5rem;
248
- border: 1px solid var(--_gc-border);
249
- border-radius: var(--_gc-radius);
250
- background: var(--_gc-bg);
251
- color: var(--_gc-fg);
252
- font: inherit;
253
- }
229
+ :where(.gc-root--styled) .gc-header {
230
+ display: flex;
231
+ flex-wrap: wrap;
232
+ align-items: center;
233
+ justify-content: space-between;
234
+ gap: var(--_gc-space);
235
+ padding-bottom: var(--_gc-space);
236
+ border-bottom: 1px solid var(--_gc-border);
237
+ }
254
238
 
255
- /* Sign-in panel */
239
+ :where(.gc-root--styled) .gc-header__count {
240
+ margin: 0;
241
+ font-size: 1.125rem;
242
+ font-weight: 700;
243
+ line-height: 1.3;
244
+ }
256
245
 
257
- :where(.gc-root--styled) .gc-signin {
258
- display: grid;
259
- gap: var(--_gc-space);
260
- padding: calc(var(--_gc-space) * 2);
261
- border: 1px solid var(--_gc-border);
262
- border-radius: var(--_gc-radius);
263
- background: var(--_gc-bg-subtle);
264
- }
246
+ :where(.gc-root--styled) .gc-sort {
247
+ display: inline-flex;
248
+ align-items: center;
249
+ gap: 0.5rem;
250
+ font-size: 0.875rem;
251
+ color: var(--_gc-fg-muted);
252
+ }
265
253
 
266
- :where(.gc-root--styled) .gc-signin__title {
267
- margin: 0;
268
- font-weight: 700;
269
- }
254
+ :where(.gc-root--styled) .gc-sort__select {
255
+ min-height: 2rem;
256
+ padding: 0.25rem 0.5rem;
257
+ border: 1px solid var(--_gc-border);
258
+ border-radius: var(--_gc-radius);
259
+ background: var(--_gc-bg);
260
+ color: var(--_gc-fg);
261
+ font: inherit;
262
+ }
270
263
 
271
- :where(.gc-root--styled) .gc-signin__body {
272
- margin: 0;
273
- color: var(--_gc-fg-muted);
274
- font-size: 0.9375rem;
275
- }
264
+ /* Sign-in panel */
276
265
 
277
- :where(.gc-root--styled) .gc-signin__error {
278
- margin: 0.25rem 0 0;
279
- color: var(--_gc-danger);
280
- font-size: 0.875rem;
281
- }
266
+ :where(.gc-root--styled) .gc-signin {
267
+ display: grid;
268
+ gap: var(--_gc-space);
269
+ padding: calc(var(--_gc-space) * 2);
270
+ border: 1px solid var(--_gc-border);
271
+ border-radius: var(--_gc-radius);
272
+ background: var(--_gc-bg-subtle);
273
+ }
282
274
 
283
- :where(.gc-root--styled) .gc-signin__actions {
284
- display: flex;
285
- flex-wrap: wrap;
286
- gap: var(--_gc-space);
287
- }
275
+ :where(.gc-root--styled) .gc-signin__title {
276
+ margin: 0;
277
+ font-weight: 700;
278
+ }
288
279
 
289
- :where(.gc-root--styled) .gc-signin--signed-in {
290
- display: flex;
291
- align-items: center;
292
- gap: var(--_gc-space);
293
- padding: 0;
294
- border: 0;
295
- background: none;
296
- color: var(--_gc-fg-muted);
297
- font-size: 0.875rem;
298
- }
280
+ :where(.gc-root--styled) .gc-signin__body {
281
+ margin: 0;
282
+ color: var(--_gc-fg-muted);
283
+ font-size: 0.9375rem;
284
+ }
299
285
 
300
- :where(.gc-root--styled) .gc-signin__user {
301
- min-width: 0;
302
- overflow: hidden;
303
- text-overflow: ellipsis;
304
- white-space: nowrap;
305
- }
286
+ :where(.gc-root--styled) .gc-signin__error {
287
+ margin: 0.25rem 0 0;
288
+ color: var(--_gc-danger);
289
+ font-size: 0.875rem;
290
+ }
306
291
 
307
- /* Composer */
292
+ :where(.gc-root--styled) .gc-signin__actions {
293
+ display: flex;
294
+ flex-wrap: wrap;
295
+ gap: var(--_gc-space);
296
+ }
308
297
 
309
- :where(.gc-root--styled) .gc-composer {
310
- display: grid;
311
- gap: var(--_gc-space);
312
- }
298
+ :where(.gc-root--styled) .gc-signin--signed-in {
299
+ display: flex;
300
+ align-items: center;
301
+ gap: var(--_gc-space);
302
+ padding: 0;
303
+ border: 0;
304
+ background: none;
305
+ color: var(--_gc-fg-muted);
306
+ font-size: 0.875rem;
307
+ }
313
308
 
314
- :where(.gc-root--styled) .gc-composer--replying,
315
- :where(.gc-root--styled) .gc-composer--editing {
316
- margin-top: var(--_gc-space);
317
- }
309
+ :where(.gc-root--styled) .gc-signin__user {
310
+ min-width: 0;
311
+ overflow: hidden;
312
+ text-overflow: ellipsis;
313
+ white-space: nowrap;
314
+ }
318
315
 
319
- :where(.gc-root--styled) .gc-comment > .gc-composer {
320
- margin-inline-start: calc(var(--_gc-avatar-size) + var(--_gc-space) * 1.5);
321
- }
316
+ /* Composer */
322
317
 
323
- :where(.gc-root--styled) .gc-composer__guidelines {
324
- justify-self: start;
325
- color: var(--_gc-fg-muted);
326
- font-size: 0.8125rem;
327
- }
318
+ :where(.gc-root--styled) .gc-composer {
319
+ display: grid;
320
+ gap: var(--_gc-space);
321
+ }
328
322
 
329
- :where(.gc-root--styled) .gc-composer__context {
330
- margin: 0;
331
- color: var(--_gc-fg-muted);
332
- font-size: 0.8125rem;
333
- }
323
+ :where(.gc-root--styled) .gc-composer--replying,
324
+ :where(.gc-root--styled) .gc-composer--editing {
325
+ margin-top: var(--_gc-space);
326
+ }
334
327
 
335
- :where(.gc-root--styled) .gc-composer__tabs {
336
- display: flex;
337
- gap: 0.25rem;
338
- border-bottom: 1px solid var(--_gc-border);
339
- }
328
+ :where(.gc-root--styled) .gc-comment > .gc-composer {
329
+ margin-inline-start: calc(var(--_gc-avatar-size) + var(--_gc-space) * 1.5);
330
+ }
340
331
 
341
- :where(.gc-root--styled) .gc-composer__tab {
342
- appearance: none;
343
- margin: 0 0 -1px;
344
- padding: 0.375rem 0.625rem;
345
- border: 0;
346
- border-bottom: 2px solid transparent;
347
- background: none;
348
- color: var(--_gc-fg-muted);
349
- font: inherit;
350
- font-size: 0.875rem;
351
- cursor: pointer;
352
- }
332
+ :where(.gc-root--styled) .gc-composer__guidelines {
333
+ justify-self: start;
334
+ color: var(--_gc-fg-muted);
335
+ font-size: 0.8125rem;
336
+ }
353
337
 
354
- :where(.gc-root--styled) .gc-composer__tab[aria-selected="true"] {
355
- border-bottom-color: var(--_gc-accent);
356
- color: var(--_gc-fg);
357
- font-weight: 600;
358
- }
338
+ :where(.gc-root--styled) .gc-composer__context {
339
+ margin: 0;
340
+ color: var(--_gc-fg-muted);
341
+ font-size: 0.8125rem;
342
+ }
359
343
 
360
- :where(.gc-root--styled) .gc-composer__panel {
361
- display: grid;
362
- gap: 0.25rem;
363
- }
344
+ :where(.gc-root--styled) .gc-composer__tabs {
345
+ display: flex;
346
+ gap: 0.25rem;
347
+ border-bottom: 1px solid var(--_gc-border);
348
+ }
364
349
 
365
- :where(.gc-root--styled) .gc-composer__panel[hidden] {
366
- display: none;
367
- }
350
+ :where(.gc-root--styled) .gc-composer__tab {
351
+ appearance: none;
352
+ margin: 0 0 -1px;
353
+ padding: 0.375rem 0.625rem;
354
+ border: 0;
355
+ border-bottom: 2px solid transparent;
356
+ background: none;
357
+ color: var(--_gc-fg-muted);
358
+ font: inherit;
359
+ font-size: 0.875rem;
360
+ cursor: pointer;
361
+ }
368
362
 
369
- :where(.gc-root--styled) .gc-toolbar {
370
- display: flex;
371
- flex-wrap: wrap;
372
- gap: 2px;
373
- }
363
+ :where(.gc-root--styled) .gc-composer__tab[aria-selected="true"] {
364
+ border-bottom-color: var(--_gc-accent);
365
+ color: var(--_gc-fg);
366
+ font-weight: 600;
367
+ }
374
368
 
375
- :where(.gc-root--styled) .gc-toolbar__button {
376
- appearance: none;
377
- display: inline-grid;
378
- place-items: center;
379
- width: 2rem;
380
- height: 2rem;
381
- margin: 0;
382
- padding: 0;
383
- border: 0;
384
- border-radius: calc(var(--_gc-radius) / 2);
385
- background: none;
386
- color: var(--_gc-fg-muted);
387
- cursor: pointer;
388
- }
369
+ :where(.gc-root--styled) .gc-composer__panel {
370
+ display: grid;
371
+ gap: 0.25rem;
372
+ }
389
373
 
390
- :where(.gc-root--styled) .gc-toolbar__button:hover:not(:disabled) {
391
- background: var(--_gc-bg-subtle);
392
- color: var(--_gc-fg);
393
- }
374
+ :where(.gc-root--styled) .gc-composer__panel[hidden] {
375
+ display: none;
376
+ }
394
377
 
395
- :where(.gc-root--styled) .gc-composer__field {
396
- position: relative;
397
- }
378
+ :where(.gc-root--styled) .gc-toolbar {
379
+ display: flex;
380
+ flex-wrap: wrap;
381
+ gap: 2px;
382
+ }
398
383
 
399
- :where(.gc-root--styled) .gc-composer__input {
400
- display: block;
401
- width: 100%;
402
- min-height: 5.5rem;
403
- max-height: 24rem;
404
- margin: 0;
405
- padding: 0.625rem 0.75rem;
406
- border: 1px solid var(--_gc-border);
407
- border-radius: var(--_gc-radius);
408
- background: var(--_gc-bg);
409
- color: var(--_gc-fg);
410
- font: inherit;
411
- line-height: 1.5;
412
- resize: vertical;
413
- field-sizing: content;
414
- }
384
+ :where(.gc-root--styled) .gc-toolbar__button {
385
+ appearance: none;
386
+ display: inline-grid;
387
+ place-items: center;
388
+ width: 2rem;
389
+ height: 2rem;
390
+ margin: 0;
391
+ padding: 0;
392
+ border: 0;
393
+ border-radius: calc(var(--_gc-radius) / 2);
394
+ background: none;
395
+ color: var(--_gc-fg-muted);
396
+ cursor: pointer;
397
+ }
415
398
 
416
- :where(.gc-root--styled) .gc-composer--replying .gc-composer__input,
417
- :where(.gc-root--styled) .gc-composer--editing .gc-composer__input {
418
- min-height: 4rem;
419
- }
399
+ :where(.gc-root--styled) .gc-toolbar__button:hover:not(:disabled) {
400
+ background: var(--_gc-bg-subtle);
401
+ color: var(--_gc-fg);
402
+ }
420
403
 
421
- :where(.gc-root--styled) .gc-composer__input::placeholder {
422
- color: var(--_gc-fg-muted);
423
- opacity: 1;
424
- }
404
+ :where(.gc-root--styled) .gc-composer__field {
405
+ position: relative;
406
+ }
425
407
 
426
- :where(.gc-root--styled) .gc-composer__input:focus-visible {
427
- border-color: var(--_gc-accent);
428
- outline-offset: 0;
429
- }
408
+ :where(.gc-root--styled) .gc-composer__input {
409
+ display: block;
410
+ width: 100%;
411
+ min-height: 5.5rem;
412
+ max-height: 24rem;
413
+ margin: 0;
414
+ padding: 0.625rem 0.75rem;
415
+ border: 1px solid var(--_gc-border);
416
+ border-radius: var(--_gc-radius);
417
+ background: var(--_gc-bg);
418
+ color: var(--_gc-fg);
419
+ font: inherit;
420
+ line-height: 1.5;
421
+ resize: vertical;
422
+ field-sizing: content;
423
+ }
430
424
 
431
- :where(.gc-root--styled) .gc-composer__input:disabled {
432
- opacity: 0.7;
433
- }
425
+ :where(.gc-root--styled) .gc-composer--replying .gc-composer__input,
426
+ :where(.gc-root--styled) .gc-composer--editing .gc-composer__input {
427
+ min-height: 4rem;
428
+ }
434
429
 
435
- :where(.gc-root--styled) .gc-composer__preview {
436
- min-height: 5.5rem;
437
- padding: 0.625rem 0.75rem;
438
- border: 1px dashed var(--_gc-border);
439
- border-radius: var(--_gc-radius);
440
- }
430
+ :where(.gc-root--styled) .gc-composer__input::placeholder {
431
+ color: var(--_gc-fg-muted);
432
+ opacity: 1;
433
+ }
441
434
 
442
- :where(.gc-root--styled) .gc-composer__footer {
443
- display: flex;
444
- flex-wrap: wrap;
445
- align-items: flex-start;
446
- justify-content: space-between;
447
- gap: var(--_gc-space);
448
- }
435
+ :where(.gc-root--styled) .gc-composer__input:focus-visible {
436
+ border-color: var(--_gc-accent);
437
+ outline-offset: 0;
438
+ }
449
439
 
450
- :where(.gc-root--styled) .gc-composer__messages {
451
- flex: 1 1 12rem;
452
- min-width: 0;
453
- font-size: 0.8125rem;
454
- }
440
+ :where(.gc-root--styled) .gc-composer__input:disabled {
441
+ opacity: 0.7;
442
+ }
455
443
 
456
- :where(.gc-root--styled) .gc-composer__messages p {
457
- margin: 0;
458
- }
444
+ :where(.gc-root--styled) .gc-composer__preview {
445
+ min-height: 5.5rem;
446
+ padding: 0.625rem 0.75rem;
447
+ border: 1px dashed var(--_gc-border);
448
+ border-radius: var(--_gc-radius);
449
+ }
459
450
 
460
- :where(.gc-root--styled) .gc-composer__hint,
461
- :where(.gc-root--styled) .gc-composer__status {
462
- margin: 0;
463
- color: var(--_gc-fg-muted);
464
- }
451
+ :where(.gc-root--styled) .gc-composer__footer {
452
+ display: flex;
453
+ flex-wrap: wrap;
454
+ align-items: flex-start;
455
+ justify-content: space-between;
456
+ gap: var(--_gc-space);
457
+ }
465
458
 
466
- :where(.gc-root--styled) .gc-composer__error {
467
- color: var(--_gc-danger);
468
- }
459
+ :where(.gc-root--styled) .gc-composer__messages {
460
+ flex: 1 1 12rem;
461
+ min-width: 0;
462
+ font-size: 0.8125rem;
463
+ }
469
464
 
470
- :where(.gc-root--styled) .gc-composer__buttons {
471
- display: flex;
472
- flex-wrap: wrap;
473
- gap: var(--_gc-space);
474
- margin-inline-start: auto;
475
- }
465
+ :where(.gc-root--styled) .gc-composer__messages p {
466
+ margin: 0;
467
+ }
476
468
 
477
- /* Mention suggestions */
478
-
479
- :where(.gc-root--styled) .gc-mentions {
480
- position: absolute;
481
- z-index: 10;
482
- top: calc(100% + 4px);
483
- inset-inline-start: 0.5rem;
484
- min-width: min(14rem, calc(100% - 1rem));
485
- max-width: calc(100% - 1rem);
486
- max-height: 15rem;
487
- margin: 0;
488
- padding: 0.25rem;
489
- overflow-y: auto;
490
- list-style: none;
491
- border: 1px solid var(--_gc-border);
492
- border-radius: var(--_gc-radius);
493
- background: var(--_gc-bg);
494
- box-shadow: var(--_gc-shadow);
495
- }
469
+ :where(.gc-root--styled) .gc-composer__hint,
470
+ :where(.gc-root--styled) .gc-composer__status {
471
+ margin: 0;
472
+ color: var(--_gc-fg-muted);
473
+ }
496
474
 
497
- :where(.gc-root--styled) .gc-mentions__option {
498
- display: flex;
499
- align-items: center;
500
- gap: 0.5rem;
501
- padding: 0.375rem 0.5rem;
502
- border-radius: calc(var(--_gc-radius) / 2);
503
- font-size: 0.875rem;
504
- cursor: pointer;
505
- }
475
+ :where(.gc-root--styled) .gc-composer__error {
476
+ color: var(--_gc-danger);
477
+ }
506
478
 
507
- :where(.gc-root--styled) .gc-mentions__option--active {
508
- background: var(--_gc-bg-subtle);
509
- background: color-mix(in srgb, var(--_gc-accent) 16%, transparent);
510
- }
479
+ :where(.gc-root--styled) .gc-composer__buttons {
480
+ display: flex;
481
+ flex-wrap: wrap;
482
+ gap: var(--_gc-space);
483
+ margin-inline-start: auto;
484
+ }
511
485
 
512
- :where(.gc-root--styled) .gc-mentions__username {
513
- font-weight: 600;
514
- }
486
+ /* Mention suggestions */
487
+
488
+ :where(.gc-root--styled) .gc-mentions {
489
+ position: absolute;
490
+ z-index: 10;
491
+ top: calc(100% + 4px);
492
+ inset-inline-start: 0.5rem;
493
+ min-width: min(14rem, calc(100% - 1rem));
494
+ max-width: calc(100% - 1rem);
495
+ max-height: 15rem;
496
+ margin: 0;
497
+ padding: 0.25rem;
498
+ overflow-y: auto;
499
+ list-style: none;
500
+ border: 1px solid var(--_gc-border);
501
+ border-radius: var(--_gc-radius);
502
+ background: var(--_gc-bg);
503
+ box-shadow: var(--_gc-shadow);
504
+ }
515
505
 
516
- :where(.gc-root--styled) .gc-mentions__name {
517
- min-width: 0;
518
- overflow: hidden;
519
- color: var(--_gc-fg-muted);
520
- text-overflow: ellipsis;
521
- white-space: nowrap;
522
- }
506
+ :where(.gc-root--styled) .gc-mentions__option {
507
+ display: flex;
508
+ align-items: center;
509
+ gap: 0.5rem;
510
+ padding: 0.375rem 0.5rem;
511
+ border-radius: calc(var(--_gc-radius) / 2);
512
+ font-size: 0.875rem;
513
+ cursor: pointer;
514
+ }
523
515
 
524
- /* Avatars and badges */
525
-
526
- :where(.gc-root--styled) .gc-avatar {
527
- flex: none;
528
- display: inline-grid;
529
- place-items: center;
530
- width: var(--_gc-avatar-size);
531
- height: var(--_gc-avatar-size);
532
- border-radius: 50%;
533
- background: var(--_gc-bg-subtle);
534
- color: var(--_gc-fg-muted);
535
- font-size: calc(var(--_gc-avatar-size) * 0.42);
536
- font-weight: 700;
537
- object-fit: cover;
538
- }
516
+ :where(.gc-root--styled) .gc-mentions__option--active {
517
+ background: var(--_gc-bg-subtle);
518
+ background: color-mix(in srgb, var(--_gc-accent) 16%, transparent);
519
+ }
539
520
 
540
- :where(.gc-root--styled) .gc-avatar--small {
541
- --_gc-avatar-size: 1.5rem;
542
- }
521
+ :where(.gc-root--styled) .gc-mentions__username {
522
+ font-weight: 600;
523
+ }
543
524
 
544
- :where(.gc-root--styled) .gc-badge {
545
- display: inline-flex;
546
- align-items: center;
547
- gap: 0.25rem;
548
- padding: 0 0.375rem;
549
- border: 1px solid var(--_gc-border);
550
- border-radius: 999px;
551
- color: var(--_gc-fg-muted);
552
- font-size: 0.75rem;
553
- font-weight: 600;
554
- line-height: 1.25rem;
555
- }
525
+ :where(.gc-root--styled) .gc-mentions__name {
526
+ min-width: 0;
527
+ overflow: hidden;
528
+ color: var(--_gc-fg-muted);
529
+ text-overflow: ellipsis;
530
+ white-space: nowrap;
531
+ }
556
532
 
557
- :where(.gc-root--styled) .gc-badge .gc-icon {
558
- width: 0.75rem;
559
- height: 0.75rem;
560
- }
533
+ /* Avatars and badges */
534
+
535
+ :where(.gc-root--styled) .gc-avatar {
536
+ flex: none;
537
+ display: inline-grid;
538
+ place-items: center;
539
+ width: var(--_gc-avatar-size);
540
+ height: var(--_gc-avatar-size);
541
+ border-radius: 50%;
542
+ background: var(--_gc-bg-subtle);
543
+ color: var(--_gc-fg-muted);
544
+ font-size: calc(var(--_gc-avatar-size) * 0.42);
545
+ font-weight: 700;
546
+ object-fit: cover;
547
+ }
561
548
 
562
- :where(.gc-root--styled) .gc-badge--staff,
563
- :where(.gc-root--styled) .gc-badge--featured {
564
- border-color: var(--_gc-accent);
565
- color: var(--_gc-accent);
566
- }
549
+ :where(.gc-root--styled) .gc-avatar--small {
550
+ --_gc-avatar-size: 1.5rem;
551
+ }
567
552
 
568
- /* Comment tree */
553
+ :where(.gc-root--styled) .gc-badge {
554
+ display: inline-flex;
555
+ align-items: center;
556
+ gap: 0.25rem;
557
+ padding: 0 0.375rem;
558
+ border: 1px solid var(--_gc-border);
559
+ border-radius: 999px;
560
+ color: var(--_gc-fg-muted);
561
+ font-size: 0.75rem;
562
+ font-weight: 600;
563
+ line-height: 1.25rem;
564
+ }
569
565
 
570
- :where(.gc-root--styled) .gc-list,
571
- :where(.gc-root--styled) .gc-replies,
572
- :where(.gc-root--styled) .gc-context {
573
- margin: 0;
574
- padding: 0;
575
- list-style: none;
576
- }
566
+ :where(.gc-root--styled) .gc-badge .gc-icon {
567
+ width: 0.75rem;
568
+ height: 0.75rem;
569
+ }
577
570
 
578
- :where(.gc-root--styled) .gc-list {
579
- display: grid;
580
- gap: calc(var(--_gc-space) * 3);
581
- }
571
+ :where(.gc-root--styled) .gc-badge--staff,
572
+ :where(.gc-root--styled) .gc-badge--featured {
573
+ border-color: var(--_gc-accent);
574
+ color: var(--_gc-accent);
575
+ }
582
576
 
583
- :where(.gc-root--styled) .gc-list__status {
584
- margin: 0;
585
- color: var(--_gc-fg-muted);
586
- }
577
+ /* Comment tree */
587
578
 
588
- :where(.gc-root--styled) .gc-replies {
589
- display: grid;
590
- gap: calc(var(--_gc-space) * 2);
591
- margin-top: calc(var(--_gc-space) * 2);
592
- margin-inline-start: calc(var(--_gc-avatar-size) / 2 - 1px);
593
- padding-inline-start: calc(var(--_gc-avatar-size) / 2 + var(--_gc-space));
594
- border-inline-start: 2px solid var(--_gc-border);
595
- }
579
+ :where(.gc-root--styled) .gc-list,
580
+ :where(.gc-root--styled) .gc-replies,
581
+ :where(.gc-root--styled) .gc-context {
582
+ margin: 0;
583
+ padding: 0;
584
+ list-style: none;
585
+ }
596
586
 
597
- :where(.gc-root--styled) .gc-comment {
598
- min-width: 0;
599
- }
587
+ :where(.gc-root--styled) .gc-list {
588
+ display: grid;
589
+ gap: calc(var(--_gc-space) * 3);
590
+ }
600
591
 
601
- :where(.gc-root--styled) .gc-comment__card {
602
- display: grid;
603
- grid-template-columns: auto minmax(0, 1fr);
604
- align-items: start;
605
- column-gap: calc(var(--_gc-space) * 1.5);
606
- border-radius: var(--_gc-radius);
607
- scroll-margin-block: 4rem;
608
- }
592
+ :where(.gc-root--styled) .gc-list__status {
593
+ margin: 0;
594
+ color: var(--_gc-fg-muted);
595
+ }
609
596
 
610
- :where(.gc-root--styled) .gc-comment__card > * {
611
- grid-column: 2;
612
- }
597
+ :where(.gc-root--styled) .gc-replies {
598
+ display: grid;
599
+ gap: calc(var(--_gc-space) * 2);
600
+ margin-top: calc(var(--_gc-space) * 2);
601
+ margin-inline-start: calc(var(--_gc-avatar-size) / 2 - 1px);
602
+ padding-inline-start: calc(var(--_gc-avatar-size) / 2 + var(--_gc-space));
603
+ border-inline-start: 2px solid var(--_gc-border);
604
+ }
613
605
 
614
- :where(.gc-root--styled) .gc-comment__card > .gc-avatar {
615
- grid-row: 1;
616
- grid-column: 1;
617
- }
606
+ :where(.gc-root--styled) .gc-comment {
607
+ min-width: 0;
608
+ }
618
609
 
619
- :where(.gc-root--styled) .gc-comment__card:focus:not(:focus-visible) {
620
- outline: none;
621
- }
610
+ :where(.gc-root--styled) .gc-comment__card {
611
+ display: grid;
612
+ grid-template-columns: auto minmax(0, 1fr);
613
+ align-items: start;
614
+ column-gap: calc(var(--_gc-space) * 1.5);
615
+ border-radius: var(--_gc-radius);
616
+ scroll-margin-block: 4rem;
617
+ }
622
618
 
623
- :where(.gc-root--styled) .gc-comment__card:focus-visible {
624
- outline-offset: 4px;
625
- }
619
+ :where(.gc-root--styled) .gc-comment__card > * {
620
+ grid-column: 2;
621
+ }
626
622
 
627
- :where(.gc-root--styled) .gc-comment__main {
628
- display: grid;
629
- gap: 0.25rem;
630
- min-width: 0;
631
- }
623
+ :where(.gc-root--styled) .gc-comment__card > .gc-avatar {
624
+ grid-row: 1;
625
+ grid-column: 1;
626
+ }
632
627
 
633
- :where(.gc-root--styled) .gc-comment__meta {
634
- display: flex;
635
- flex-wrap: wrap;
636
- align-items: center;
637
- gap: 0.25rem 0.5rem;
638
- color: var(--_gc-fg-muted);
639
- font-size: 0.875rem;
640
- }
628
+ :where(.gc-root--styled) .gc-comment__card:focus:not(:focus-visible) {
629
+ outline: none;
630
+ }
641
631
 
642
- :where(.gc-root--styled) .gc-comment__author {
643
- color: var(--_gc-fg);
644
- font-weight: 600;
645
- text-decoration: none;
646
- }
632
+ :where(.gc-root--styled) .gc-comment__card:focus-visible {
633
+ outline-offset: 4px;
634
+ }
647
635
 
648
- :where(.gc-root--styled) .gc-comment__time {
649
- color: inherit;
650
- text-decoration: none;
651
- }
636
+ :where(.gc-root--styled) .gc-comment__main {
637
+ display: grid;
638
+ gap: 0.25rem;
639
+ min-width: 0;
640
+ }
652
641
 
653
- :where(.gc-root--styled) .gc-comment__author:hover,
654
- :where(.gc-root--styled) .gc-comment__time:hover {
655
- text-decoration: underline;
656
- }
642
+ :where(.gc-root--styled) .gc-comment__meta {
643
+ display: flex;
644
+ flex-wrap: wrap;
645
+ align-items: center;
646
+ gap: 0.25rem 0.5rem;
647
+ color: var(--_gc-fg-muted);
648
+ font-size: 0.875rem;
649
+ }
657
650
 
658
- :where(.gc-root--styled) .gc-comment__body--removed,
659
- :where(.gc-root--styled) .gc-comment__hidden-note {
660
- margin: 0;
661
- color: var(--_gc-fg-muted);
662
- font-style: italic;
663
- }
651
+ :where(.gc-root--styled) .gc-comment__reply-to {
652
+ color: inherit;
653
+ text-decoration: none;
654
+ }
664
655
 
665
- :where(.gc-root--styled) .gc-comment__hidden-note {
666
- font-size: 0.8125rem;
667
- }
656
+ :where(.gc-root--styled) a.gc-comment__reply-to:hover {
657
+ text-decoration: underline;
658
+ }
668
659
 
669
- :where(.gc-root--styled) .gc-comment__notice {
670
- margin: 0.25rem 0 0;
671
- color: var(--_gc-fg-muted);
672
- font-size: 0.8125rem;
673
- }
660
+ :where(.gc-root--styled) .gc-comment__author {
661
+ color: var(--_gc-fg);
662
+ font-weight: 600;
663
+ text-decoration: none;
664
+ }
674
665
 
675
- :where(.gc-root--styled) .gc-comment__notice--error {
676
- color: var(--_gc-danger);
677
- }
666
+ :where(.gc-root--styled) .gc-comment__time {
667
+ color: inherit;
668
+ text-decoration: none;
669
+ }
678
670
 
679
- :where(.gc-root--styled) .gc-comment__more,
680
- :where(.gc-root--styled) .gc-comment__continue {
681
- margin-top: var(--_gc-space);
682
- margin-inline-start: calc(var(--_gc-avatar-size) + var(--_gc-space) * 1.5);
683
- font-size: 0.875rem;
684
- }
671
+ :where(.gc-root--styled) .gc-comment__author:hover,
672
+ :where(.gc-root--styled) .gc-comment__time:hover {
673
+ text-decoration: underline;
674
+ }
685
675
 
686
- :where(.gc-root--styled) .gc-comment--pinned > .gc-comment__card {
687
- padding: var(--_gc-space);
688
- background: var(--_gc-bg-subtle);
689
- box-shadow: inset 3px 0 0 var(--_gc-accent);
690
- }
676
+ :where(.gc-root--styled) .gc-comment__body--removed,
677
+ :where(.gc-root--styled) .gc-comment__hidden-note {
678
+ margin: 0;
679
+ color: var(--_gc-fg-muted);
680
+ font-style: italic;
681
+ }
691
682
 
692
- :where(.gc-root--styled) .gc-comment--highlighted > .gc-comment__card {
693
- background: var(--_gc-bg-subtle);
694
- background: color-mix(in srgb, var(--_gc-accent) 10%, transparent);
695
- box-shadow: 0 0 0 var(--_gc-space) color-mix(in srgb, var(--_gc-accent) 10%, transparent);
696
- }
683
+ :where(.gc-root--styled) .gc-comment__hidden-note {
684
+ font-size: 0.8125rem;
685
+ }
697
686
 
698
- /* Actions and menu */
687
+ :where(.gc-root--styled) .gc-comment__notice {
688
+ margin: 0.25rem 0 0;
689
+ color: var(--_gc-fg-muted);
690
+ font-size: 0.8125rem;
691
+ }
699
692
 
700
- :where(.gc-root--styled) .gc-actions {
701
- display: flex;
702
- flex-wrap: wrap;
703
- align-items: center;
704
- gap: 0.25rem;
705
- margin-inline-start: -0.5rem;
706
- }
693
+ :where(.gc-root--styled) .gc-comment__notice--error {
694
+ color: var(--_gc-danger);
695
+ }
707
696
 
708
- :where(.gc-root--styled) .gc-actions__like--active {
709
- color: var(--_gc-danger);
710
- }
697
+ :where(.gc-root--styled) .gc-comment__more,
698
+ :where(.gc-root--styled) .gc-comment__continue {
699
+ margin-top: var(--_gc-space);
700
+ margin-inline-start: calc(var(--_gc-avatar-size) + var(--_gc-space) * 1.5);
701
+ font-size: 0.875rem;
702
+ }
711
703
 
712
- :where(.gc-root--styled) .gc-actions__count {
713
- font-variant-numeric: tabular-nums;
714
- }
704
+ :where(.gc-root--styled) .gc-comment--pinned > .gc-comment__card {
705
+ padding: var(--_gc-space);
706
+ background: var(--_gc-bg-subtle);
707
+ box-shadow: inset 3px 0 0 var(--_gc-accent);
708
+ }
715
709
 
716
- :where(.gc-root--styled) .gc-menu {
717
- position: relative;
718
- }
710
+ :where(.gc-root--styled) .gc-comment--highlighted > .gc-comment__card {
711
+ background: var(--_gc-bg-subtle);
712
+ background: color-mix(in srgb, var(--_gc-accent) 10%, transparent);
713
+ box-shadow: 0 0 0 var(--_gc-space) color-mix(in srgb, var(--_gc-accent) 10%, transparent);
714
+ }
719
715
 
720
- :where(.gc-root--styled) .gc-menu__list {
721
- position: absolute;
722
- z-index: 20;
723
- top: calc(100% + 4px);
724
- inset-inline-end: 0;
725
- min-width: 10rem;
726
- margin: 0;
727
- padding: 0.25rem;
728
- list-style: none;
729
- border: 1px solid var(--_gc-border);
730
- border-radius: var(--_gc-radius);
731
- background: var(--_gc-bg);
732
- box-shadow: var(--_gc-shadow);
733
- }
716
+ /* Actions and menu */
734
717
 
735
- :where(.gc-root--styled) .gc-menu__item {
736
- display: block;
737
- width: 100%;
738
- margin: 0;
739
- padding: 0.5rem 0.625rem;
740
- border: 0;
741
- border-radius: calc(var(--_gc-radius) / 2);
742
- background: none;
743
- color: var(--_gc-fg);
744
- font: inherit;
745
- font-size: 0.875rem;
746
- text-align: start;
747
- cursor: pointer;
748
- }
718
+ :where(.gc-root--styled) .gc-actions {
719
+ display: flex;
720
+ flex-wrap: wrap;
721
+ align-items: center;
722
+ gap: 0.25rem;
723
+ margin-inline-start: -0.5rem;
724
+ }
749
725
 
750
- :where(.gc-root--styled) .gc-menu__item:hover,
751
- :where(.gc-root--styled) .gc-menu__item:focus {
752
- background: var(--_gc-bg-subtle);
753
- }
726
+ :where(.gc-root--styled) .gc-actions__like--active {
727
+ color: var(--_gc-danger);
728
+ }
754
729
 
755
- :where(.gc-root--styled) .gc-menu__item:focus-visible {
756
- outline-offset: -2px;
757
- }
730
+ :where(.gc-root--styled) .gc-actions__count {
731
+ font-variant-numeric: tabular-nums;
732
+ }
758
733
 
759
- :where(.gc-root--styled) .gc-menu__item--danger {
760
- color: var(--_gc-danger);
761
- }
734
+ :where(.gc-root--styled) .gc-menu {
735
+ position: relative;
736
+ }
762
737
 
763
- /* Report and delete panels */
764
-
765
- :where(.gc-root--styled) .gc-report,
766
- :where(.gc-root--styled) .gc-confirm {
767
- display: grid;
768
- gap: var(--_gc-space);
769
- margin-top: var(--_gc-space);
770
- padding: calc(var(--_gc-space) * 1.5);
771
- border: 1px solid var(--_gc-border);
772
- border-radius: var(--_gc-radius);
773
- background: var(--_gc-bg);
774
- box-shadow: var(--_gc-shadow);
775
- }
738
+ :where(.gc-root--styled) .gc-menu__list {
739
+ position: absolute;
740
+ z-index: 20;
741
+ top: calc(100% + 4px);
742
+ inset-inline-end: 0;
743
+ min-width: 10rem;
744
+ margin: 0;
745
+ padding: 0.25rem;
746
+ list-style: none;
747
+ border: 1px solid var(--_gc-border);
748
+ border-radius: var(--_gc-radius);
749
+ background: var(--_gc-bg);
750
+ box-shadow: var(--_gc-shadow);
751
+ }
776
752
 
777
- :where(.gc-root--styled) .gc-report form {
778
- display: grid;
779
- gap: var(--_gc-space);
780
- }
753
+ :where(.gc-root--styled) .gc-menu__item {
754
+ display: block;
755
+ width: 100%;
756
+ margin: 0;
757
+ padding: 0.5rem 0.625rem;
758
+ border: 0;
759
+ border-radius: calc(var(--_gc-radius) / 2);
760
+ background: none;
761
+ color: var(--_gc-fg);
762
+ font: inherit;
763
+ font-size: 0.875rem;
764
+ text-align: start;
765
+ cursor: pointer;
766
+ }
781
767
 
782
- :where(.gc-root--styled) .gc-report__options {
783
- display: grid;
784
- gap: 0.25rem;
785
- margin: 0;
786
- padding: 0;
787
- border: 0;
788
- }
768
+ :where(.gc-root--styled) .gc-menu__item:hover,
769
+ :where(.gc-root--styled) .gc-menu__item:focus {
770
+ background: var(--_gc-bg-subtle);
771
+ }
789
772
 
790
- :where(.gc-root--styled) .gc-report__title {
791
- margin-bottom: 0.25rem;
792
- padding: 0;
793
- font-weight: 600;
794
- }
773
+ :where(.gc-root--styled) .gc-menu__item:focus-visible {
774
+ outline-offset: -2px;
775
+ }
795
776
 
796
- :where(.gc-root--styled) .gc-report__option {
797
- display: flex;
798
- align-items: center;
799
- gap: 0.5rem;
800
- font-size: 0.9375rem;
801
- cursor: pointer;
802
- }
777
+ :where(.gc-root--styled) .gc-menu__item--danger {
778
+ color: var(--_gc-danger);
779
+ }
803
780
 
804
- :where(.gc-root--styled) .gc-report__option input {
805
- margin: 0;
806
- accent-color: var(--_gc-accent);
807
- }
781
+ /* Report and delete panels */
782
+
783
+ :where(.gc-root--styled) .gc-report,
784
+ :where(.gc-root--styled) .gc-confirm {
785
+ display: grid;
786
+ gap: var(--_gc-space);
787
+ margin-top: var(--_gc-space);
788
+ padding: calc(var(--_gc-space) * 1.5);
789
+ border: 1px solid var(--_gc-border);
790
+ border-radius: var(--_gc-radius);
791
+ background: var(--_gc-bg);
792
+ box-shadow: var(--_gc-shadow);
793
+ }
808
794
 
809
- :where(.gc-root--styled) .gc-report__message {
810
- width: 100%;
811
- margin: 0;
812
- padding: 0.5rem 0.625rem;
813
- border: 1px solid var(--_gc-border);
814
- border-radius: var(--_gc-radius);
815
- background: var(--_gc-bg);
816
- color: var(--_gc-fg);
817
- font: inherit;
818
- resize: vertical;
819
- }
795
+ :where(.gc-root--styled) .gc-report form {
796
+ display: grid;
797
+ gap: var(--_gc-space);
798
+ }
820
799
 
821
- :where(.gc-root--styled) .gc-report__error {
822
- margin: 0;
823
- color: var(--_gc-danger);
824
- font-size: 0.875rem;
825
- }
800
+ :where(.gc-root--styled) .gc-report__options {
801
+ display: grid;
802
+ gap: 0.25rem;
803
+ margin: 0;
804
+ padding: 0;
805
+ border: 0;
806
+ }
826
807
 
827
- :where(.gc-root--styled) .gc-confirm__text {
828
- margin: 0;
829
- font-weight: 600;
830
- }
808
+ :where(.gc-root--styled) .gc-report__title {
809
+ margin-bottom: 0.25rem;
810
+ padding: 0;
811
+ font-weight: 600;
812
+ }
831
813
 
832
- :where(.gc-root--styled) .gc-report__buttons,
833
- :where(.gc-root--styled) .gc-confirm__buttons {
834
- display: flex;
835
- flex-wrap: wrap;
836
- justify-content: flex-end;
837
- gap: var(--_gc-space);
838
- }
814
+ :where(.gc-root--styled) .gc-report__option {
815
+ display: flex;
816
+ align-items: center;
817
+ gap: 0.5rem;
818
+ font-size: 0.9375rem;
819
+ cursor: pointer;
820
+ }
839
821
 
840
- /* Notices, new-comments pill, load more */
822
+ :where(.gc-root--styled) .gc-report__option input {
823
+ margin: 0;
824
+ accent-color: var(--_gc-accent);
825
+ }
841
826
 
842
- :where(.gc-root--styled) .gc-notice {
843
- margin: 0;
844
- padding: var(--_gc-space) calc(var(--_gc-space) * 1.5);
845
- border: 1px solid var(--_gc-border);
846
- border-radius: var(--_gc-radius);
847
- background: var(--_gc-bg-subtle);
848
- color: var(--_gc-fg-muted);
849
- font-size: 0.9375rem;
850
- }
827
+ :where(.gc-root--styled) .gc-report__message {
828
+ width: 100%;
829
+ margin: 0;
830
+ padding: 0.5rem 0.625rem;
831
+ border: 1px solid var(--_gc-border);
832
+ border-radius: var(--_gc-radius);
833
+ background: var(--_gc-bg);
834
+ color: var(--_gc-fg);
835
+ font: inherit;
836
+ resize: vertical;
837
+ }
851
838
 
852
- :where(.gc-root--styled) .gc-notice--error {
853
- display: flex;
854
- flex-wrap: wrap;
855
- align-items: center;
856
- justify-content: space-between;
857
- gap: var(--_gc-space);
858
- color: var(--_gc-fg);
859
- }
839
+ :where(.gc-root--styled) .gc-report__error {
840
+ margin: 0;
841
+ color: var(--_gc-danger);
842
+ font-size: 0.875rem;
843
+ }
860
844
 
861
- :where(.gc-root--styled) .gc-notice__text {
862
- margin: 0;
863
- }
845
+ :where(.gc-root--styled) .gc-confirm__text {
846
+ margin: 0;
847
+ font-weight: 600;
848
+ }
864
849
 
865
- :where(.gc-root--styled) .gc-notice--pending {
866
- border-color: var(--_gc-accent);
867
- color: var(--_gc-fg);
868
- }
850
+ :where(.gc-root--styled) .gc-report__buttons,
851
+ :where(.gc-root--styled) .gc-confirm__buttons {
852
+ display: flex;
853
+ flex-wrap: wrap;
854
+ justify-content: flex-end;
855
+ gap: var(--_gc-space);
856
+ }
869
857
 
870
- :where(.gc-root--styled) .gc-pending-region {
871
- display: grid;
872
- gap: var(--_gc-space);
873
- }
858
+ /* Notices, new-comments pill, load more */
874
859
 
875
- /* Empty live regions stay in the accessibility tree but take no space. */
876
- :where(.gc-root--styled) .gc-pill-region:empty,
877
- :where(.gc-root--styled) .gc-pending-region:empty {
878
- position: absolute;
879
- }
860
+ :where(.gc-root--styled) .gc-notice {
861
+ margin: 0;
862
+ padding: var(--_gc-space) calc(var(--_gc-space) * 1.5);
863
+ border: 1px solid var(--_gc-border);
864
+ border-radius: var(--_gc-radius);
865
+ background: var(--_gc-bg-subtle);
866
+ color: var(--_gc-fg-muted);
867
+ font-size: 0.9375rem;
868
+ }
880
869
 
881
- :where(.gc-root--styled) .gc-pill-region {
882
- position: sticky;
883
- z-index: 5;
884
- top: 0.75rem;
885
- display: flex;
886
- justify-content: center;
887
- }
870
+ :where(.gc-root--styled) .gc-notice--error {
871
+ display: flex;
872
+ flex-wrap: wrap;
873
+ align-items: center;
874
+ justify-content: space-between;
875
+ gap: var(--_gc-space);
876
+ color: var(--_gc-fg);
877
+ }
888
878
 
889
- :where(.gc-root--styled) .gc-pill {
890
- border-color: var(--_gc-accent);
891
- border-radius: 999px;
892
- background: var(--_gc-accent);
893
- color: var(--_gc-accent-fg);
894
- box-shadow: var(--_gc-shadow);
895
- }
879
+ :where(.gc-root--styled) .gc-notice__text {
880
+ margin: 0;
881
+ }
896
882
 
897
- :where(.gc-root--styled) .gc-pill:hover:not(:disabled) {
898
- background: var(--_gc-accent);
899
- background: color-mix(in srgb, var(--_gc-accent) 86%, var(--_gc-fg));
900
- }
883
+ :where(.gc-root--styled) .gc-notice--pending {
884
+ border-color: var(--_gc-accent);
885
+ color: var(--_gc-fg);
886
+ }
901
887
 
902
- :where(.gc-root--styled) .gc-load-more {
903
- align-self: center;
904
- }
888
+ :where(.gc-root--styled) .gc-pending-region {
889
+ display: grid;
890
+ gap: var(--_gc-space);
891
+ }
905
892
 
906
- /* Focused branch ("Continue this thread") */
893
+ /* Empty live regions stay in the accessibility tree but take no space. */
894
+ :where(.gc-root--styled) .gc-pill-region:empty,
895
+ :where(.gc-root--styled) .gc-pending-region:empty {
896
+ position: absolute;
897
+ }
907
898
 
908
- :where(.gc-root--styled) .gc-focus {
909
- display: grid;
910
- gap: calc(var(--_gc-space) * 2);
911
- }
899
+ :where(.gc-root--styled) .gc-pill-region {
900
+ position: sticky;
901
+ z-index: 5;
902
+ top: 0.75rem;
903
+ display: flex;
904
+ justify-content: center;
905
+ }
912
906
 
913
- :where(.gc-root--styled) .gc-focus__back {
914
- justify-self: start;
915
- }
907
+ :where(.gc-root--styled) .gc-pill {
908
+ border-color: var(--_gc-accent);
909
+ border-radius: 999px;
910
+ background: var(--_gc-accent);
911
+ color: var(--_gc-accent-fg);
912
+ box-shadow: var(--_gc-shadow);
913
+ }
916
914
 
917
- :where(.gc-root--styled) .gc-focus__truncated {
918
- margin: 0;
919
- color: var(--_gc-fg-muted);
920
- font-size: 0.875rem;
921
- }
915
+ :where(.gc-root--styled) .gc-pill:hover:not(:disabled) {
916
+ background: var(--_gc-accent);
917
+ background: color-mix(in srgb, var(--_gc-accent) 86%, var(--_gc-fg));
918
+ }
922
919
 
923
- :where(.gc-root--styled) .gc-context {
924
- display: grid;
925
- gap: calc(var(--_gc-space) * 1.5);
926
- padding-inline-start: calc(var(--_gc-space) * 1.5);
927
- border-inline-start: 2px dashed var(--_gc-border);
928
- }
920
+ :where(.gc-root--styled) .gc-load-more {
921
+ align-self: center;
922
+ }
929
923
 
930
- /* Developer diagnostics */
924
+ /* Focused branch ("Continue this thread") */
931
925
 
932
- :where(.gc-root--styled) .gc-devpanel {
933
- display: grid;
934
- gap: var(--_gc-space);
935
- padding: calc(var(--_gc-space) * 1.5) calc(var(--_gc-space) * 2);
936
- border: 1px dashed var(--_gc-danger);
937
- border-radius: var(--_gc-radius);
938
- background: var(--_gc-bg-subtle);
939
- font-size: 0.875rem;
940
- }
926
+ :where(.gc-root--styled) .gc-focus {
927
+ display: grid;
928
+ gap: calc(var(--_gc-space) * 2);
929
+ }
941
930
 
942
- :where(.gc-root--styled) .gc-devpanel--ok {
943
- border-color: var(--_gc-border);
944
- }
931
+ :where(.gc-root--styled) .gc-focus__back {
932
+ justify-self: start;
933
+ }
945
934
 
946
- :where(.gc-root--styled) .gc-devpanel__title {
947
- margin: 0;
948
- font-weight: 700;
949
- }
935
+ :where(.gc-root--styled) .gc-focus__truncated {
936
+ margin: 0;
937
+ color: var(--_gc-fg-muted);
938
+ font-size: 0.875rem;
939
+ }
950
940
 
951
- :where(.gc-root--styled) .gc-devpanel--ok .gc-devpanel__title {
952
- cursor: pointer;
953
- }
941
+ :where(.gc-root--styled) .gc-context {
942
+ display: grid;
943
+ gap: calc(var(--_gc-space) * 1.5);
944
+ padding-inline-start: calc(var(--_gc-space) * 1.5);
945
+ border-inline-start: 2px dashed var(--_gc-border);
946
+ }
954
947
 
955
- :where(.gc-root--styled) .gc-devpanel__summary,
956
- :where(.gc-root--styled) .gc-devpanel__note {
957
- margin: 0;
958
- }
948
+ /* Developer diagnostics */
959
949
 
960
- :where(.gc-root--styled) .gc-devpanel__note {
961
- color: var(--_gc-fg-muted);
962
- font-size: 0.8125rem;
963
- }
950
+ :where(.gc-root--styled) .gc-devpanel {
951
+ display: grid;
952
+ gap: var(--_gc-space);
953
+ padding: calc(var(--_gc-space) * 1.5) calc(var(--_gc-space) * 2);
954
+ border: 1px dashed var(--_gc-danger);
955
+ border-radius: var(--_gc-radius);
956
+ background: var(--_gc-bg-subtle);
957
+ font-size: 0.875rem;
958
+ }
964
959
 
965
- :where(.gc-root--styled) .gc-devpanel__causes {
966
- display: grid;
967
- gap: 0.375rem;
968
- margin: 0;
969
- padding-inline-start: 1.25rem;
970
- }
960
+ :where(.gc-root--styled) .gc-devpanel--ok {
961
+ border-color: var(--_gc-border);
962
+ }
971
963
 
972
- :where(.gc-root--styled) .gc-devpanel a {
973
- color: var(--_gc-accent);
974
- }
964
+ :where(.gc-root--styled) .gc-devpanel__title {
965
+ margin: 0;
966
+ font-weight: 700;
967
+ }
975
968
 
976
- :where(.gc-root--styled) .gc-devpanel__code {
977
- margin: 0.375rem 0 0;
978
- padding: 0.5rem 0.625rem;
979
- overflow-x: auto;
980
- border-radius: calc(var(--_gc-radius) / 2);
981
- background: var(--_gc-bg);
982
- font-size: 0.8125rem;
983
- }
969
+ :where(.gc-root--styled) .gc-devpanel--ok .gc-devpanel__title {
970
+ cursor: pointer;
971
+ }
984
972
 
985
- :where(.gc-root--styled) .gc-devpanel__details {
986
- display: grid;
987
- grid-template-columns: max-content minmax(0, 1fr);
988
- gap: 0.25rem 0.75rem;
989
- margin: 0;
990
- }
973
+ :where(.gc-root--styled) .gc-devpanel__summary,
974
+ :where(.gc-root--styled) .gc-devpanel__note {
975
+ margin: 0;
976
+ }
991
977
 
992
- :where(.gc-root--styled) .gc-devpanel__details dt {
993
- color: var(--_gc-fg-muted);
994
- font-weight: 600;
995
- }
978
+ :where(.gc-root--styled) .gc-devpanel__note {
979
+ color: var(--_gc-fg-muted);
980
+ font-size: 0.8125rem;
981
+ }
996
982
 
997
- :where(.gc-root--styled) .gc-devpanel__details dd {
998
- margin: 0;
999
- overflow-wrap: anywhere;
1000
- }
983
+ :where(.gc-root--styled) .gc-devpanel__causes {
984
+ display: grid;
985
+ gap: 0.375rem;
986
+ margin: 0;
987
+ padding-inline-start: 1.25rem;
988
+ }
1001
989
 
1002
- /* Cooked comment HTML */
990
+ :where(.gc-root--styled) .gc-devpanel a {
991
+ color: var(--_gc-accent);
992
+ }
1003
993
 
1004
- :where(.gc-root--styled) .gc-prose {
1005
- line-height: 1.6;
1006
- overflow-wrap: anywhere;
1007
- }
994
+ :where(.gc-root--styled) .gc-devpanel__code {
995
+ margin: 0.375rem 0 0;
996
+ padding: 0.5rem 0.625rem;
997
+ overflow-x: auto;
998
+ border-radius: calc(var(--_gc-radius) / 2);
999
+ background: var(--_gc-bg);
1000
+ font-size: 0.8125rem;
1001
+ }
1008
1002
 
1009
- :where(.gc-root--styled) .gc-prose > :first-child {
1010
- margin-top: 0;
1011
- }
1003
+ :where(.gc-root--styled) .gc-devpanel__details {
1004
+ display: grid;
1005
+ grid-template-columns: max-content minmax(0, 1fr);
1006
+ gap: 0.25rem 0.75rem;
1007
+ margin: 0;
1008
+ }
1012
1009
 
1013
- :where(.gc-root--styled) .gc-prose > :last-child {
1014
- margin-bottom: 0;
1015
- }
1010
+ :where(.gc-root--styled) .gc-devpanel__details dt {
1011
+ color: var(--_gc-fg-muted);
1012
+ font-weight: 600;
1013
+ }
1016
1014
 
1017
- :where(.gc-root--styled) .gc-prose :is(p, ul, ol, blockquote, pre, table, aside, details) {
1018
- margin: 0 0 0.75em;
1019
- }
1015
+ :where(.gc-root--styled) .gc-devpanel__details dd {
1016
+ margin: 0;
1017
+ overflow-wrap: anywhere;
1018
+ }
1020
1019
 
1021
- :where(.gc-root--styled) .gc-prose :is(h1, h2, h3, h4, h5, h6) {
1022
- margin: 1em 0 0.5em;
1023
- font-size: 1.05em;
1024
- line-height: 1.3;
1025
- }
1020
+ /* Cooked comment HTML */
1026
1021
 
1027
- :where(.gc-root--styled) .gc-prose a {
1028
- color: var(--_gc-accent);
1029
- text-decoration: underline;
1030
- text-underline-offset: 2px;
1031
- }
1022
+ :where(.gc-root--styled) .gc-prose {
1023
+ line-height: 1.6;
1024
+ overflow-wrap: anywhere;
1025
+ }
1032
1026
 
1033
- :where(.gc-root--styled) .gc-prose :is(ul, ol) {
1034
- padding-inline-start: 1.5em;
1035
- }
1027
+ :where(.gc-root--styled) .gc-prose > :first-child {
1028
+ margin-top: 0;
1029
+ }
1036
1030
 
1037
- :where(.gc-root--styled) .gc-prose blockquote {
1038
- margin-inline: 0;
1039
- padding: 0.25em 0 0.25em 1em;
1040
- border-inline-start: 3px solid var(--_gc-border);
1041
- color: var(--_gc-fg-muted);
1042
- }
1031
+ :where(.gc-root--styled) .gc-prose > :last-child {
1032
+ margin-bottom: 0;
1033
+ }
1043
1034
 
1044
- :where(.gc-root--styled) .gc-prose code {
1045
- padding: 0.1em 0.35em;
1046
- border-radius: 4px;
1047
- background: var(--_gc-bg-subtle);
1048
- font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1049
- font-size: 0.875em;
1050
- }
1035
+ :where(.gc-root--styled) .gc-prose :is(p, ul, ol, blockquote, pre, table, aside, details) {
1036
+ margin: 0 0 0.75em;
1037
+ }
1051
1038
 
1052
- :where(.gc-root--styled) .gc-prose pre {
1053
- padding: 0.75em 1em;
1054
- overflow-x: auto;
1055
- border-radius: var(--_gc-radius);
1056
- background: var(--_gc-bg-subtle);
1057
- }
1039
+ :where(.gc-root--styled) .gc-prose :is(h1, h2, h3, h4, h5, h6) {
1040
+ margin: 1em 0 0.5em;
1041
+ font-size: 1.05em;
1042
+ line-height: 1.3;
1043
+ }
1058
1044
 
1059
- :where(.gc-root--styled) .gc-prose pre code {
1060
- padding: 0;
1061
- background: none;
1062
- }
1045
+ :where(.gc-root--styled) .gc-prose a {
1046
+ color: var(--_gc-accent);
1047
+ text-decoration: underline;
1048
+ text-underline-offset: 2px;
1049
+ }
1063
1050
 
1064
- :where(.gc-root--styled) .gc-prose img {
1065
- max-width: 100%;
1066
- height: auto;
1067
- border-radius: calc(var(--_gc-radius) / 2);
1068
- }
1051
+ :where(.gc-root--styled) .gc-prose :is(ul, ol) {
1052
+ padding-inline-start: 1.5em;
1053
+ }
1069
1054
 
1070
- :where(.gc-root--styled) .gc-prose img.emoji {
1071
- width: 1.25em;
1072
- height: 1.25em;
1073
- border-radius: 0;
1074
- vertical-align: text-bottom;
1075
- }
1055
+ :where(.gc-root--styled) .gc-prose blockquote {
1056
+ margin-inline: 0;
1057
+ padding: 0.25em 0 0.25em 1em;
1058
+ border-inline-start: 3px solid var(--_gc-border);
1059
+ color: var(--_gc-fg-muted);
1060
+ }
1076
1061
 
1077
- :where(.gc-root--styled) .gc-prose hr {
1078
- margin: 1em 0;
1079
- border: 0;
1080
- border-top: 1px solid var(--_gc-border);
1081
- }
1062
+ :where(.gc-root--styled) .gc-prose code {
1063
+ padding: 0.1em 0.35em;
1064
+ border-radius: 4px;
1065
+ background: var(--_gc-bg-subtle);
1066
+ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
1067
+ font-size: 0.875em;
1068
+ }
1082
1069
 
1083
- :where(.gc-root--styled) .gc-prose table {
1084
- display: block;
1085
- max-width: 100%;
1086
- overflow-x: auto;
1087
- border-collapse: collapse;
1088
- }
1070
+ :where(.gc-root--styled) .gc-prose pre {
1071
+ padding: 0.75em 1em;
1072
+ overflow-x: auto;
1073
+ border-radius: var(--_gc-radius);
1074
+ background: var(--_gc-bg-subtle);
1075
+ }
1089
1076
 
1090
- :where(.gc-root--styled) .gc-prose :is(th, td) {
1091
- padding: 0.25em 0.5em;
1092
- border: 1px solid var(--_gc-border);
1093
- }
1077
+ :where(.gc-root--styled) .gc-prose pre code {
1078
+ padding: 0;
1079
+ background: none;
1080
+ }
1094
1081
 
1095
- :where(.gc-root--styled) .gc-prose aside.onebox {
1096
- padding: 0.75em 1em;
1097
- border: 1px solid var(--_gc-border);
1098
- border-radius: var(--_gc-radius);
1099
- }
1082
+ :where(.gc-root--styled) .gc-prose img {
1083
+ max-width: 100%;
1084
+ height: auto;
1085
+ border-radius: calc(var(--_gc-radius) / 2);
1086
+ }
1100
1087
 
1101
- :where(.gc-root--styled) .gc-prose .mention {
1102
- padding: 0 0.2em;
1103
- border-radius: 4px;
1104
- background: var(--_gc-bg-subtle);
1105
- font-weight: 600;
1106
- text-decoration: none;
1107
- }
1088
+ :where(.gc-root--styled) .gc-prose img.emoji {
1089
+ width: 1.25em;
1090
+ height: 1.25em;
1091
+ border-radius: 0;
1092
+ vertical-align: text-bottom;
1093
+ }
1108
1094
 
1109
- :where(.gc-root--styled) .gc-prose .lightbox-wrapper .meta {
1110
- display: none;
1111
- }
1095
+ :where(.gc-root--styled) .gc-prose hr {
1096
+ margin: 1em 0;
1097
+ border: 0;
1098
+ border-top: 1px solid var(--_gc-border);
1099
+ }
1112
1100
 
1113
- /* Narrow containers (phones, sidebars): tighter avatars and indentation. */
1101
+ :where(.gc-root--styled) .gc-prose table {
1102
+ display: block;
1103
+ max-width: 100%;
1104
+ overflow-x: auto;
1105
+ border-collapse: collapse;
1106
+ }
1114
1107
 
1115
- @container gc-root (max-width: 30rem) {
1116
- :where(.gc-root--styled) :is(.gc-list, .gc-focus, .gc-composer) {
1117
- --_gc-avatar-size: var(--gc-avatar-size, 2rem);
1108
+ :where(.gc-root--styled) .gc-prose :is(th, td) {
1109
+ padding: 0.25em 0.5em;
1110
+ border: 1px solid var(--_gc-border);
1118
1111
  }
1119
1112
 
1120
- :where(.gc-root--styled) .gc-comment__card {
1121
- column-gap: var(--_gc-space);
1113
+ :where(.gc-root--styled) .gc-prose aside.onebox {
1114
+ padding: 0.75em 1em;
1115
+ border: 1px solid var(--_gc-border);
1116
+ border-radius: var(--_gc-radius);
1122
1117
  }
1123
1118
 
1124
- :where(.gc-root--styled) .gc-replies {
1125
- margin-inline-start: 0;
1126
- padding-inline-start: calc(var(--_gc-space) * 1.5);
1119
+ :where(.gc-root--styled) .gc-prose .mention {
1120
+ padding: 0 0.2em;
1121
+ border-radius: 4px;
1122
+ background: var(--_gc-bg-subtle);
1123
+ font-weight: 600;
1124
+ text-decoration: none;
1127
1125
  }
1128
1126
 
1129
- :where(.gc-root--styled) .gc-comment__more,
1130
- :where(.gc-root--styled) .gc-comment__continue,
1131
- :where(.gc-root--styled) .gc-comment > .gc-composer {
1132
- margin-inline-start: 0;
1127
+ :where(.gc-root--styled) .gc-prose .lightbox-wrapper .meta {
1128
+ display: none;
1133
1129
  }
1134
1130
 
1135
- :where(.gc-root--styled) .gc-composer__buttons {
1136
- width: 100%;
1137
- justify-content: flex-end;
1131
+ /* Narrow containers (phones, sidebars): tighter avatars and indentation. */
1132
+
1133
+ @container gc-root (max-width: 30rem) {
1134
+ :where(.gc-root--styled) :is(.gc-list, .gc-focus, .gc-composer) {
1135
+ --_gc-avatar-size: var(--gc-avatar-size, 2rem);
1136
+ }
1137
+
1138
+ :where(.gc-root--styled) .gc-comment__card {
1139
+ column-gap: var(--_gc-space);
1140
+ }
1141
+
1142
+ :where(.gc-root--styled) .gc-replies {
1143
+ margin-inline-start: 0;
1144
+ padding-inline-start: calc(var(--_gc-space) * 1.5);
1145
+ }
1146
+
1147
+ :where(.gc-root--styled) .gc-comment__more,
1148
+ :where(.gc-root--styled) .gc-comment__continue,
1149
+ :where(.gc-root--styled) .gc-comment > .gc-composer {
1150
+ margin-inline-start: 0;
1151
+ }
1152
+
1153
+ :where(.gc-root--styled) .gc-composer__buttons {
1154
+ width: 100%;
1155
+ justify-content: flex-end;
1156
+ }
1138
1157
  }
1139
- }
1140
1158
 
1141
- @media (prefers-reduced-motion: reduce) {
1142
- :where(.gc-root--styled) * {
1143
- transition: none !important;
1159
+ @media (prefers-reduced-motion: reduce) {
1160
+ :where(.gc-root--styled) * {
1161
+ transition: none !important;
1162
+ }
1144
1163
  }
1145
1164
  }