@telepath-computer/television 0.1.178 → 0.1.179
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/canonical/v1/components.js +13 -1
- package/dist/cli.cjs +1187 -392
- package/dist/onboarding/README.md +35 -0
- package/dist/onboarding/business-ops/about.html +150 -0
- package/dist/onboarding/business-ops/retention-vs-releases.html +572 -0
- package/dist/onboarding/business-ops/revenue-vs-goals.html +621 -0
- package/dist/onboarding/onboarding-screens.json +167 -0
- package/dist/onboarding/productivity/about.html +149 -0
- package/dist/onboarding/productivity/company-todos/index.html +121 -0
- package/dist/onboarding/productivity/company-todos/task.css +205 -0
- package/dist/onboarding/productivity/company-todos/task.js +307 -0
- package/dist/onboarding/productivity/meeting-prep.html +440 -0
- package/dist/onboarding/productivity/priorities-today.html +409 -0
- package/dist/onboarding/productivity/todays-calendar/calendar.css +1 -0
- package/dist/onboarding/productivity/todays-calendar/calendar.js +716 -0
- package/dist/onboarding/productivity/todays-calendar/index.html +52 -0
- package/dist/onboarding/research/about.html +152 -0
- package/dist/onboarding/research/draft-blog-post.md +30 -0
- package/dist/onboarding/research/open-model-research.html +542 -0
- package/dist/onboarding/research/todays-news.html +503 -0
- package/dist/onboarding/{television-onboarding → tv-guide/welcome}/index.html +2 -2
- package/dist/skills/television/SKILL.md +4 -0
- package/dist/views/markdown/index.html +1 -1
- package/dist/web/assets/calendar-DToAnkzj.png +0 -0
- package/dist/web/assets/main-5017mprd.css +1 -0
- package/dist/web/assets/main-C-OjKUzX.js +865 -0
- package/dist/web/assets/markdown-DdDrJuVK.png +0 -0
- package/dist/web/assets/table-oeG9uAN1.png +0 -0
- package/dist/web/assets/tasks-D4xqXFPl.png +0 -0
- package/dist/web/index.html +2 -2
- package/package.json +1 -1
- package/dist/web/assets/main-FDJtlHD7.js +0 -768
- package/dist/web/assets/main-o9Z-XUYA.css +0 -1
- /package/dist/onboarding/{television-onboarding → tv-guide/welcome}/assets/television.svg +0 -0
|
@@ -0,0 +1,409 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
+
<title>Priorities for Today</title>
|
|
7
|
+
<link rel="stylesheet" href="/canonical/v1/styles.css">
|
|
8
|
+
<script type="module" src="/canonical/v1/components.js"></script>
|
|
9
|
+
<style>
|
|
10
|
+
/* Shared base for onboarding artifacts ([[../index.md]]): document padding
|
|
11
|
+
and the centered content shell. Typography, text color, and background
|
|
12
|
+
are the canonical stylesheet's — nothing in this set restates or pins
|
|
13
|
+
them, so artifacts follow the active theme ([[../index.md#^respect-theme]]). */
|
|
14
|
+
|
|
15
|
+
* {
|
|
16
|
+
box-sizing: border-box;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
body {
|
|
20
|
+
margin: 0;
|
|
21
|
+
padding: var(--space-32, 32px) var(--space-32, 32px) var(--space-64, 64px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.shell {
|
|
25
|
+
max-width: 720px;
|
|
26
|
+
margin: 0 auto;
|
|
27
|
+
display: grid;
|
|
28
|
+
/* Pin the single column to the container so a wide child (a data table)
|
|
29
|
+
scrolls inside its own .table-wrap instead of stretching the track and
|
|
30
|
+
overflowing the card. */
|
|
31
|
+
grid-template-columns: minmax(0, 1fr);
|
|
32
|
+
gap: var(--space-20, 20px);
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
/* Card-density headings ([[../index.md]]): document-scale h1 is oversized
|
|
36
|
+
inside a TV card. */
|
|
37
|
+
h1 {
|
|
38
|
+
margin: 0;
|
|
39
|
+
font-size: var(--text-xl, 17px);
|
|
40
|
+
font-weight: 600;
|
|
41
|
+
line-height: 1.25;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
/* A lead paragraph (the .lede or .summary-deck standfirst) belongs in the
|
|
45
|
+
header, tight beneath the title — not a full grid-gap below it. Every
|
|
46
|
+
onboarding artifact places its lead this way so the spacing is uniform. */
|
|
47
|
+
header > .lede,
|
|
48
|
+
header > .summary-deck {
|
|
49
|
+
margin-top: var(--space-8, 8px);
|
|
50
|
+
}
|
|
51
|
+
|
|
52
|
+
|
|
53
|
+
/* The hero header idiom ([[../index.md]]): a plain document header opening a
|
|
54
|
+
dashboard-shaped artifact — the title with a fictional freshness line and
|
|
55
|
+
an optional source/meta line, sitting on the document itself rather than
|
|
56
|
+
inside a card. */
|
|
57
|
+
|
|
58
|
+
header.hero h1 {
|
|
59
|
+
margin: 0 0 var(--space-6, 6px);
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
.generated {
|
|
63
|
+
color: var(--color-text-muted);
|
|
64
|
+
font-size: var(--text-sm, 12px);
|
|
65
|
+
font-weight: 500;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.meta-line {
|
|
69
|
+
margin-top: var(--space-4, 4px);
|
|
70
|
+
color: var(--color-text-muted);
|
|
71
|
+
font-size: var(--text-sm, 12px);
|
|
72
|
+
}
|
|
73
|
+
|
|
74
|
+
|
|
75
|
+
/* The panel/section idioms ([[../index.md]]): a bordered surface panel with
|
|
76
|
+
a heading and optional note, the muted summary-box, the section-title row,
|
|
77
|
+
and — for artifacts that lean on headings and spacing over nested cards —
|
|
78
|
+
the borderless .section and the .summary-deck lead paragraph. */
|
|
79
|
+
|
|
80
|
+
/* Borderless section: a title row (or heading) then its stack, no box. */
|
|
81
|
+
.section {
|
|
82
|
+
display: grid;
|
|
83
|
+
gap: var(--space-16, 16px);
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
/* Summary/lead as a standfirst paragraph — the borderless counterpart to
|
|
87
|
+
.summary-box. */
|
|
88
|
+
/* Lead/standfirst paragraph — the same size as the About .lede (body text),
|
|
89
|
+
not enlarged; it leads by position and primary color, not scale. */
|
|
90
|
+
.summary-deck {
|
|
91
|
+
margin: 0;
|
|
92
|
+
line-height: 1.5;
|
|
93
|
+
color: var(--color-text);
|
|
94
|
+
}
|
|
95
|
+
|
|
96
|
+
.panel {
|
|
97
|
+
padding: var(--space-20, 20px);
|
|
98
|
+
border: 1px solid var(--color-border);
|
|
99
|
+
border-radius: var(--radius-12, 12px);
|
|
100
|
+
background: var(--color-surface);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
.panel h2 {
|
|
104
|
+
margin: 0 0 var(--space-4, 4px);
|
|
105
|
+
font-size: var(--text-lg, 15px);
|
|
106
|
+
font-weight: 600;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.panel .note {
|
|
110
|
+
margin: 0 0 var(--space-16, 16px);
|
|
111
|
+
color: var(--color-text-muted);
|
|
112
|
+
font-size: var(--text-sm, 12px);
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
.summary-box {
|
|
116
|
+
padding: var(--space-16, 16px) var(--space-20, 20px);
|
|
117
|
+
border: 1px solid var(--color-border-muted);
|
|
118
|
+
border-radius: var(--radius-12, 12px);
|
|
119
|
+
background: var(--color-surface-muted);
|
|
120
|
+
}
|
|
121
|
+
|
|
122
|
+
.summary-box h2 {
|
|
123
|
+
margin: 0 0 var(--space-8, 8px);
|
|
124
|
+
font-size: var(--text-lg, 15px);
|
|
125
|
+
font-weight: 600;
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
.summary-box p {
|
|
129
|
+
margin: 0;
|
|
130
|
+
line-height: 1.45;
|
|
131
|
+
}
|
|
132
|
+
|
|
133
|
+
.section-title {
|
|
134
|
+
display: flex;
|
|
135
|
+
justify-content: space-between;
|
|
136
|
+
align-items: baseline;
|
|
137
|
+
gap: var(--space-12, 12px);
|
|
138
|
+
margin-bottom: var(--space-12, 12px);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
.section-title h2 {
|
|
142
|
+
margin: 0;
|
|
143
|
+
font-size: var(--text-lg, 15px);
|
|
144
|
+
font-weight: 600;
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
.section-title .note {
|
|
148
|
+
margin: 0;
|
|
149
|
+
color: var(--color-text-muted);
|
|
150
|
+
font-size: var(--text-sm, 12px);
|
|
151
|
+
}
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
/* The pill idiom ([[../index.md]]): small rounded status/tag chips. The
|
|
155
|
+
base pill is neutral; variant classes tint with canonical ramp tokens
|
|
156
|
+
(stable across themes by design, [[../index.md#^respect-theme]]). */
|
|
157
|
+
|
|
158
|
+
.pill {
|
|
159
|
+
display: inline-flex;
|
|
160
|
+
align-items: center;
|
|
161
|
+
gap: var(--space-4, 4px);
|
|
162
|
+
padding: 2px var(--space-10, 10px);
|
|
163
|
+
border: 1px solid var(--color-border);
|
|
164
|
+
border-radius: var(--radius-full, 9999px);
|
|
165
|
+
background: var(--color-surface);
|
|
166
|
+
color: var(--color-text-muted);
|
|
167
|
+
font-size: var(--text-sm, 12px);
|
|
168
|
+
line-height: 1.2;
|
|
169
|
+
white-space: nowrap;
|
|
170
|
+
}
|
|
171
|
+
|
|
172
|
+
.pill.blue { color: var(--blue-700); border-color: var(--blue-200); background: var(--blue-50); }
|
|
173
|
+
.pill.green { color: var(--green-700); border-color: var(--green-200); background: var(--green-50); }
|
|
174
|
+
.pill.orange { color: var(--orange-700); border-color: var(--orange-200); background: var(--orange-50); }
|
|
175
|
+
.pill.red { color: var(--red-700); border-color: var(--red-200); background: var(--red-50); }
|
|
176
|
+
.pill.dim { color: var(--neutral-500); border-color: var(--neutral-200); background: var(--neutral-100); }
|
|
177
|
+
|
|
178
|
+
|
|
179
|
+
/* Priorities for Today ([[index.md]]): artifact-specific styling only —
|
|
180
|
+
the ranked-priority and deferred stacks. Kept low on borders: the summary
|
|
181
|
+
is a shared .summary-deck lead, sections are the shared borderless
|
|
182
|
+
.section, priorities are carried by their inline rank number, and deferred
|
|
183
|
+
tasks are a hairline-separated list. The deck, section, section-title, and
|
|
184
|
+
pill idioms come from shared/. */
|
|
185
|
+
|
|
186
|
+
.shell {
|
|
187
|
+
max-width: 920px;
|
|
188
|
+
gap: var(--space-24, 24px);
|
|
189
|
+
}
|
|
190
|
+
|
|
191
|
+
/* Section headings outrank the priority titles (15px) — a clear step up —
|
|
192
|
+
and carry a full-width hairline beneath them as a section divider. */
|
|
193
|
+
.section-title {
|
|
194
|
+
border-bottom: 1px solid var(--color-border);
|
|
195
|
+
padding-bottom: var(--space-8, 8px);
|
|
196
|
+
}
|
|
197
|
+
|
|
198
|
+
.section-title h2 {
|
|
199
|
+
font-size: var(--text-xl, 18px);
|
|
200
|
+
}
|
|
201
|
+
|
|
202
|
+
/* Ranked priorities: a plain stack — each carries an inline rank number
|
|
203
|
+
(see .rank) hugging its title, so there is no marker column. */
|
|
204
|
+
.priority-stack {
|
|
205
|
+
display: grid;
|
|
206
|
+
gap: var(--space-20, 20px);
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
/* Unchecked task box — a static marker signalling these are actionable. */
|
|
210
|
+
.checkbox {
|
|
211
|
+
width: 18px;
|
|
212
|
+
height: 18px;
|
|
213
|
+
margin-top: 1px;
|
|
214
|
+
border: 1.5px solid var(--color-border);
|
|
215
|
+
border-radius: var(--radius-6, 6px);
|
|
216
|
+
background: var(--color-surface);
|
|
217
|
+
}
|
|
218
|
+
|
|
219
|
+
.rank {
|
|
220
|
+
margin-right: var(--space-8, 8px);
|
|
221
|
+
color: var(--color-primary);
|
|
222
|
+
font-weight: 700;
|
|
223
|
+
font-variant-numeric: tabular-nums;
|
|
224
|
+
}
|
|
225
|
+
|
|
226
|
+
.priority h3 {
|
|
227
|
+
margin: 0 0 var(--space-4, 4px);
|
|
228
|
+
font-size: var(--text-lg, 15px);
|
|
229
|
+
font-weight: 600;
|
|
230
|
+
line-height: 1.3;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.priority p {
|
|
234
|
+
margin: 0;
|
|
235
|
+
color: var(--color-text-muted);
|
|
236
|
+
font-size: var(--text-sm, 12px);
|
|
237
|
+
line-height: 1.45;
|
|
238
|
+
}
|
|
239
|
+
|
|
240
|
+
/* The project (a real, recurring category) as a single pill, followed by the
|
|
241
|
+
ranking evidence as a muted line — not a row of fake tags. */
|
|
242
|
+
.priority-meta {
|
|
243
|
+
display: flex;
|
|
244
|
+
flex-wrap: wrap;
|
|
245
|
+
align-items: center;
|
|
246
|
+
gap: var(--space-8, 8px);
|
|
247
|
+
margin-top: var(--space-8, 8px);
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
.priority-meta .evidence {
|
|
251
|
+
color: var(--color-text-muted);
|
|
252
|
+
font-size: var(--text-sm, 12px);
|
|
253
|
+
}
|
|
254
|
+
|
|
255
|
+
.deferred-stack {
|
|
256
|
+
display: grid;
|
|
257
|
+
}
|
|
258
|
+
|
|
259
|
+
/* Deferred tasks: a checkbox marker in a fixed left column (ranked priorities
|
|
260
|
+
use their inline rank number instead), each a hairline-separated row. */
|
|
261
|
+
.deferred-item {
|
|
262
|
+
display: grid;
|
|
263
|
+
grid-template-columns: 18px minmax(0, 1fr);
|
|
264
|
+
gap: var(--space-10, 10px);
|
|
265
|
+
align-items: start;
|
|
266
|
+
padding: var(--space-12, 12px) 0;
|
|
267
|
+
border-top: 1px solid var(--color-border-muted);
|
|
268
|
+
}
|
|
269
|
+
|
|
270
|
+
.deferred-item:first-child {
|
|
271
|
+
padding-top: 0;
|
|
272
|
+
border-top: 0;
|
|
273
|
+
}
|
|
274
|
+
|
|
275
|
+
.deferred-item h3 {
|
|
276
|
+
margin: 0 0 var(--space-4, 4px);
|
|
277
|
+
font-size: var(--text-base, 13.5px);
|
|
278
|
+
font-weight: 600;
|
|
279
|
+
line-height: 1.2;
|
|
280
|
+
}
|
|
281
|
+
|
|
282
|
+
.deferred-item p {
|
|
283
|
+
margin: 0;
|
|
284
|
+
color: var(--color-text-muted);
|
|
285
|
+
font-size: var(--text-sm, 12px);
|
|
286
|
+
line-height: 1.35;
|
|
287
|
+
}
|
|
288
|
+
|
|
289
|
+
</style>
|
|
290
|
+
</head>
|
|
291
|
+
<body>
|
|
292
|
+
|
|
293
|
+
|
|
294
|
+
|
|
295
|
+
|
|
296
|
+
|
|
297
|
+
|
|
298
|
+
<main class="shell">
|
|
299
|
+
<header class="hero">
|
|
300
|
+
<h1>Priorities for Today</h1>
|
|
301
|
+
<p class="summary-deck">
|
|
302
|
+
Two customer-critical threads dominate the day: closing the loop on the
|
|
303
|
+
Acme pilot before the CTO call, and turning this week's customer
|
|
304
|
+
conversations into a new narrative for the seed deck. Engineering needs
|
|
305
|
+
you to weigh in with some decisions to unblock progress. Investor deck
|
|
306
|
+
polish and conference planning can safely wait until tomorrow.
|
|
307
|
+
</p>
|
|
308
|
+
</header>
|
|
309
|
+
|
|
310
|
+
<section class="section">
|
|
311
|
+
<div class="section-title">
|
|
312
|
+
<h2>Ranked priorities</h2>
|
|
313
|
+
</div>
|
|
314
|
+
<div class="priority-stack">
|
|
315
|
+
<article class="priority">
|
|
316
|
+
<div class="priority-body">
|
|
317
|
+
<h3><span class="rank">1</span>Close the loop on the Acme pilot</h3>
|
|
318
|
+
<p>
|
|
319
|
+
Ship the reliability memo, lock the pilot success metric, and send
|
|
320
|
+
the CTO a crisp pre-call brief before 2:30 PM.
|
|
321
|
+
</p>
|
|
322
|
+
<div class="priority-meta">
|
|
323
|
+
<span class="pill">Acme Pilot</span>
|
|
324
|
+
<span class="evidence">2 Slack escalations · $480k ARR path</span>
|
|
325
|
+
</div>
|
|
326
|
+
</div>
|
|
327
|
+
</article>
|
|
328
|
+
<article class="priority">
|
|
329
|
+
<div class="priority-body">
|
|
330
|
+
<h3><span class="rank">2</span>Turn this week's Granola notes into a new customer story</h3>
|
|
331
|
+
<p>
|
|
332
|
+
Synthesize the NeonBank and Mallory Health calls into a single
|
|
333
|
+
narrative: painful workflow, before/after demo, measurable outcome.
|
|
334
|
+
</p>
|
|
335
|
+
<div class="priority-meta">
|
|
336
|
+
<span class="pill">Seed Deck</span>
|
|
337
|
+
<span class="evidence">3 transcript mentions · high-leverage reuse</span>
|
|
338
|
+
</div>
|
|
339
|
+
</div>
|
|
340
|
+
</article>
|
|
341
|
+
<article class="priority">
|
|
342
|
+
<div class="priority-body">
|
|
343
|
+
<h3><span class="rank">3</span>Unblock dev team</h3>
|
|
344
|
+
<p>
|
|
345
|
+
Name a single owner for red-team evals, latency budgets, and
|
|
346
|
+
regression gates — engineering is losing cycles to ambiguous
|
|
347
|
+
thresholds.
|
|
348
|
+
</p>
|
|
349
|
+
<div class="priority-meta">
|
|
350
|
+
<span class="pill">Platform Reliability</span>
|
|
351
|
+
<span class="evidence">Repeated standup friction · founder decision required</span>
|
|
352
|
+
</div>
|
|
353
|
+
</div>
|
|
354
|
+
</article>
|
|
355
|
+
<article class="priority">
|
|
356
|
+
<div class="priority-body">
|
|
357
|
+
<h3><span class="rank">4</span>Send rough metrics to Jake for investor update</h3>
|
|
358
|
+
<p>
|
|
359
|
+
Forward the pipeline and burn numbers so Jake can start the draft —
|
|
360
|
+
defer visual polish until after customer work is done.
|
|
361
|
+
</p>
|
|
362
|
+
<div class="priority-meta">
|
|
363
|
+
<span class="pill">Investor Update</span>
|
|
364
|
+
</div>
|
|
365
|
+
</div>
|
|
366
|
+
</article>
|
|
367
|
+
</div>
|
|
368
|
+
</section>
|
|
369
|
+
|
|
370
|
+
<section class="section">
|
|
371
|
+
<div class="section-title">
|
|
372
|
+
<h2>Tasks that can be deferred</h2>
|
|
373
|
+
</div>
|
|
374
|
+
<div class="deferred-stack">
|
|
375
|
+
<div class="deferred-item">
|
|
376
|
+
<span class="checkbox" aria-hidden="true"></span>
|
|
377
|
+
<div class="deferred-body">
|
|
378
|
+
<h3>Redesign the investor deck</h3>
|
|
379
|
+
<p>
|
|
380
|
+
Visual polish can wait until the customer story and metrics spine
|
|
381
|
+
are locked.
|
|
382
|
+
</p>
|
|
383
|
+
</div>
|
|
384
|
+
</div>
|
|
385
|
+
<div class="deferred-item">
|
|
386
|
+
<span class="checkbox" aria-hidden="true"></span>
|
|
387
|
+
<div class="deferred-body">
|
|
388
|
+
<h3>Debate pricing architecture</h3>
|
|
389
|
+
<p>
|
|
390
|
+
No point until the Acme pilot metric is defined — pricing follows
|
|
391
|
+
proof.
|
|
392
|
+
</p>
|
|
393
|
+
</div>
|
|
394
|
+
</div>
|
|
395
|
+
<div class="deferred-item">
|
|
396
|
+
<span class="checkbox" aria-hidden="true"></span>
|
|
397
|
+
<div class="deferred-body">
|
|
398
|
+
<h3>Conference invite evaluation</h3>
|
|
399
|
+
<p>
|
|
400
|
+
Low urgency unless it directly reaches target enterprise buyers.
|
|
401
|
+
</p>
|
|
402
|
+
</div>
|
|
403
|
+
</div>
|
|
404
|
+
</div>
|
|
405
|
+
</section>
|
|
406
|
+
</main>
|
|
407
|
+
|
|
408
|
+
</body>
|
|
409
|
+
</html>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
calendar-event{display:contents}calendar-event .event-block{pointer-events:none;z-index:2}calendar-event .event-block-inner{background:var(--event-bg-timed, var(--neutral-100));border-left:3px solid var(--event-border-color, var(--neutral-300));border-radius:4px;box-shadow:inset 0 0 0 .5px var(--neutral-200)}calendar-grid calendar-event .event-block{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;position:relative;z-index:0}calendar-grid calendar-event .event-block-inner{position:absolute;top:calc(var(--y-start) * 100%);height:calc((var(--y-end) - var(--y-start)) * 100%);left:calc(2px + var(--cascade-depth, 0) * 6px);right:2px;padding:var(--space-4) var(--space-8);overflow:hidden;pointer-events:auto;z-index:calc(1 + var(--cascade-depth, 0))}calendar-allday calendar-event .event-block{grid-column:calc(var(--day-start) + 1) / span var(--day-span);grid-row:var(--lane-index);padding:2px}calendar-allday calendar-event .event-block-inner{background:var(--event-bg-all-day, var(--event-bg-timed, var(--neutral-100)));border-left:var( --event-all-day-border, 3px solid var(--event-border-color, var(--neutral-300)) );padding:1px var(--space-8);display:flex;align-items:center;pointer-events:auto}calendar-event[color=red]{--event-bg-timed: var(--red-100);--event-bg-all-day: var(--red-200);--event-border-color: var(--red-500);--event-all-day-border: none}calendar-event[color=orange]{--event-bg-timed: var(--orange-100);--event-bg-all-day: var(--orange-200);--event-border-color: var(--orange-500);--event-all-day-border: none}calendar-event[color=yellow]{--event-bg-timed: var(--yellow-100);--event-bg-all-day: var(--yellow-200);--event-border-color: var(--yellow-500);--event-all-day-border: none}calendar-event[color=green]{--event-bg-timed: var(--green-100);--event-bg-all-day: var(--green-200);--event-border-color: var(--green-500);--event-all-day-border: none}calendar-event[color=blue]{--event-bg-timed: var(--blue-100);--event-bg-all-day: var(--blue-200);--event-border-color: var(--blue-500);--event-all-day-border: none}calendar-event[color=purple]{--event-bg-timed: var(--purple-100);--event-bg-all-day: var(--purple-200);--event-border-color: var(--purple-500);--event-all-day-border: none}calendar-event h3{margin:0;font-size:var(--text-sm);font-weight:600;color:var(--color-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}calendar-time-axis{display:contents}calendar-time-axis .hour-label{grid-column:time-left / days-start;grid-row-start:calc(var(--hour-index) + 1);align-self:start;padding:var(--space-2) var(--space-8);font-size:round(calc(var(--text-sm) / var(--text-scale)),1px);color:var(--color-text-muted);text-align:right;white-space:nowrap;transform:translateY(-50%)}calendar-time-axis .hour-label[data-hour="0"]{visibility:hidden;width:0;height:0;padding:0;overflow:hidden}calendar-week{display:grid;grid-template-columns:[time-left] auto [days-start] repeat(var(--day-count, 0),minmax(0,1fr)) [days-end];grid-template-rows:[headers] auto [allday] auto [hours-start] repeat(var(--hour-count, 0),minmax(var(--hour-min-height, 4rem),1fr)) [hours-end];width:100%;height:100%;overflow:auto;background:var(--color-surface);font-family:inherit;color:var(--color-text)}calendar-week>calendar-headers,calendar-week>calendar-allday,calendar-week>calendar-grid{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;min-width:0}calendar-week>calendar-headers{grid-row:headers / allday;position:sticky;top:0;z-index:3;background:var(--color-surface);border-top:.5px solid var(--color-border);border-bottom:1px solid var(--color-border)}calendar-headers>calendar-day{grid-column:calc(var(--day-index) + 1);display:flex;align-items:baseline;gap:var(--space-2);padding:var(--space-12);font-size:var(--text-sm);border-left:.5px solid var(--color-border-muted)}calendar-headers>calendar-day:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-headers>calendar-day .weekday{text-transform:uppercase;letter-spacing:.04em;color:var(--color-text-muted)}calendar-headers>calendar-day .date-num{color:var(--color-text)}calendar-week>calendar-allday{grid-row:allday / hours-start;grid-template-rows:repeat(var(--allday-lane-count, 1),auto);position:sticky;top:var(--headers-height, 0px);z-index:2;border-bottom:1px solid var(--color-border);background:var(--color-surface)}calendar-allday>calendar-cell{grid-column:calc(var(--day-index) + 1);grid-row:1;border-left:.5px solid var(--color-border-muted)}calendar-allday>calendar-cell:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-week>calendar-grid{grid-row:hours-start / hours-end;grid-template-rows:subgrid;position:relative}calendar-grid>calendar-column{grid-column:calc(var(--day-index) + 1);grid-row:1 / -1;border-left:.5px solid var(--color-border-muted);background-image:repeating-linear-gradient(to bottom,transparent 0,transparent calc(100% / var(--hour-count) - .5px),var(--color-border-muted) calc(100% / var(--hour-count) - .5px),var(--color-border-muted) calc(100% / var(--hour-count)))}calendar-grid>calendar-column:last-of-type{border-right:.5px solid var(--color-border-muted)}calendar-grid>.start-hour-marker{grid-column:2;grid-row-start:calc(var(--start-hour) + 1);width:0;height:0}calendar-grid>.now-line-faint,calendar-grid>.now-line{grid-row:1 / -1;position:relative;pointer-events:none;z-index:1}calendar-grid>.now-line-faint{grid-column:2 / -1}calendar-grid>.now-line{grid-column:calc(var(--day-index) + 1)}calendar-grid>.now-line-faint:before,calendar-grid>.now-line:before{content:"";position:absolute;left:0;right:0;top:calc(var(--y-fraction) * 100%);height:1px;transform:translateY(-.5px)}calendar-grid>.now-line-faint:before{background:#e7202240}calendar-grid>.now-line:before{background:#e72022}calendar-grid>.now-line:after{content:"";position:absolute;left:0;top:calc(var(--y-fraction) * 100%);width:.5rem;height:.5rem;border-radius:50%;background:#e72022;transform:translate(-50%,-50%)}
|