@crewlethq/artifact-kit 0.32.0 → 0.33.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +26 -3
- package/dist/content.css +1 -0
- package/dist/kit.css +2 -2
- package/dist/kit.js +7 -7
- package/package.json +6 -5
package/README.md
CHANGED
|
@@ -12,7 +12,7 @@ The engine serves this package's `dist/` directory, unchanged, from the artifact
|
|
|
12
12
|
<script type="module" src="/_crewlet/kit/<version>/kit.js"></script>
|
|
13
13
|
```
|
|
14
14
|
|
|
15
|
-
`<version>` is the exact kit version the page was written against (the engine's authoring guide names the newest it serves); the engine serves every kit version it has shipped, so a published page keeps its own. Link the first two in the `<head>`, `theme.js` as a classic blocking script, before anything paints. `kit.js` is only needed by a page that draws a sheet. Then write colours, spacing and type with the tokens rather than literal values:
|
|
15
|
+
`<version>` is the exact kit version the page was written against (the engine's authoring guide names the newest it serves); the engine serves every kit version it has shipped, so a published page keeps its own. Link the first two in the `<head>`, `theme.js` as a classic blocking script, before anything paints. `kit.js` is only needed by a page that draws a sheet. `content.css`, linked right after `kit.css`, styles the plain HTML a page writes itself ([below](#plain-html-content)). Then write colours, spacing and type with the tokens rather than literal values:
|
|
16
16
|
|
|
17
17
|
```css
|
|
18
18
|
.summary {
|
|
@@ -23,6 +23,26 @@ The engine serves this package's `dist/` directory, unchanged, from the artifact
|
|
|
23
23
|
}
|
|
24
24
|
```
|
|
25
25
|
|
|
26
|
+
## Plain HTML content
|
|
27
|
+
|
|
28
|
+
`kit.css` paints the tokens and a quiet document baseline, which zeroes the margins of headings and paragraphs and strips buttons to bare text: a page that writes its own components wants exactly that. A page that writes plain HTML (a report, a brief, a form) links `content.css` as well, AFTER `kit.css`, and its headings, paragraphs, lists, quotes, code, tables, rules, figures, disclosures and form controls take the design system's look in every theme:
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<link rel="stylesheet" href="/_crewlet/kit/<version>/kit.css">
|
|
32
|
+
<link rel="stylesheet" href="/_crewlet/kit/<version>/content.css">
|
|
33
|
+
<script src="/_crewlet/kit/<version>/theme.js"></script>
|
|
34
|
+
```
|
|
35
|
+
|
|
36
|
+
The reading column is Document's prose (a page's `h1` at the title's step, running text at the reading step and leading, one gap between blocks and more above a heading); a button is the secondary Button and a submit button the primary one; a text field, a textarea and a select are Input, Textarea and Select at their medium size; a box, a dot, a slider and a bar take the accent; a table has a firmer rule under its head, figures in a column, and `data-align="right"` (or `"center"`) for an alignment a strict policy keeps out of a style attribute. A wide table scrolls inside the `<div>` or `<figure>` it is written in rather than moving the page, and a long line of code wraps.
|
|
37
|
+
|
|
38
|
+
It is opt in and it is scoped, so it never fights anything else on the page:
|
|
39
|
+
|
|
40
|
+
- **A page that does not link it is unchanged**, including every page published before it existed: it is a file of its own and `kit.css` carries none of it.
|
|
41
|
+
- **It styles only what the author wrote.** A `<crewlet-sheet>`, any element carrying a `crewlet-` class (such as a sheet's menu, which is drawn on the body) and everything inside either are left to the kit's own stylesheet. A region of the page that keeps a design of its own opts out with `data-crewlet-content="off"`, and everything inside it keeps the baseline.
|
|
42
|
+
- **A class of the page's own always wins.** Every rule weighs exactly its element (`button` is 0,0,1, whatever its type or state), so `.chip { ... }` overrides it in every state. The keyboard ring is the one rule weighed as a pseudo-class, so a control keeps its own corners as it takes focus; a page restyling it writes `.chip:focus-visible`.
|
|
43
|
+
|
|
44
|
+
Link it after `kit.css`: each of its rules wins over the baseline's rule for the same element by coming later at the same weight.
|
|
45
|
+
|
|
26
46
|
## The sheet
|
|
27
47
|
|
|
28
48
|
A page draws an editable sheet over one of its datastore collections with `<crewlet-sheet>`, its columns declared with `<crewlet-column>`:
|
|
@@ -88,17 +108,19 @@ The sheet talks only to the page's runtime, `window.crewlet` (runtime contract 1
|
|
|
88
108
|
| `data.collection(name).set(id, {})` | Add row, under an id the kit mints | `db` |
|
|
89
109
|
| `data.collection(name).delete(id)` | Delete row, from a row's actions, once the reader confirms it | `db` |
|
|
90
110
|
| `data.undo()`, `data.redo()` | Mod+Z and Mod+Shift+Z over the page's own writes; a step somebody overtook is skipped and said | `db` |
|
|
91
|
-
| `presence.roster()`, `presence.subscribe(…)`, `presence.set({ activity, focus })` | Collaborators' rings and flags,
|
|
111
|
+
| `presence.roster()`, `presence.subscribe(…)`, `presence.set({ activity, focus })` | Collaborators' rings and flags, a small stack of who is in this sheet, and the reader's own cell | `presence` |
|
|
92
112
|
| `identity.me()`, `identity.people()` | A viewer's read-only sheet, and the people a person cell offers and names | `identity` |
|
|
93
113
|
| `connection.subscribe(…)` | Offline in the sync strip | none |
|
|
114
|
+
| `openLink(url)` | A url cell's link, which the host names before it opens it (a frame cannot open a window) | none |
|
|
94
115
|
|
|
95
|
-
A write resolves with the engine's verdict (`applied`, `pending`, `conflict`, `invalid`, `forbidden`, `quota` or `gone`) and rejects only where nothing was decided (`rate_limited`, `unavailable`, `capability_not_declared`); the sheet says either on the cell it wrote, and a paste is refused whole, never in part. An Add row that fails is said under the sheet with Retry. Delete row (on a row's number, or Shift+F10) asks in the kit's own confirmation, never a browser dialog, which an artifact frame refuses; a delete the engine refuses or the runtime rejects keeps the row and is said on its first cell, held as a write's refusal is. A viewer and a `readonly` sheet are offered neither. A subscription the runtime refuses (`forbidden`, `not_found`, `unavailable`, `capability_not_declared`) is said in place of the grid, never drawn as an empty collection. A page that did not declare `db` gets a sheet that says so rather than an empty grid; without `presence` or `identity` the sheet draws without collaborators or without names. When the kit loads before the runtime, it waits for the runtime's `crewlet:ready` event on `window` (exported as `RUNTIME_READY_EVENT`).
|
|
116
|
+
A write resolves with the engine's verdict (`applied`, `pending`, `conflict`, `invalid`, `forbidden`, `quota` or `gone`) and rejects only where nothing was decided (`rate_limited`, `unavailable`, `capability_not_declared`); the sheet says either on the cell it wrote, and a paste is refused whole, never in part. An Add row that fails is said under the sheet with Retry. Delete row (on a row's number, or Shift+F10) asks in the kit's own confirmation, never a browser dialog, which an artifact frame refuses; a delete the engine refuses or the runtime rejects keeps the row and is said on its first cell, held as a write's refusal is. A viewer and a `readonly` sheet are offered neither. A subscription the runtime refuses (`forbidden`, `not_found`, `unavailable`, `capability_not_declared`) is said in place of the grid, never drawn as an empty collection. A page that did not declare `db` gets a sheet that says so rather than an empty grid; without `presence` or `identity` the sheet draws without collaborators or without names. A sheet shows only who is in it: the members whose focus is in its collection wear their rings on the cells they are on, and a small stack above the grid names them. It never draws the page's whole room, which the dashboard's artifact bar draws once for the page, so a page with two sheets does not repeat it twice. A sheet is drawn once the runtime's handshake with the host has completed (`crewlet.ready`): the runtime is installed before it but learns the version's capabilities only then, so a sheet drawn earlier would read a page that declared `db` as one that did not. When the kit loads before the runtime, it waits for the runtime's `crewlet:ready` event on `window` (exported as `RUNTIME_READY_EVENT`), which the runtime dispatches at the same moment. A viewer's sheet, and a `readonly` one, has no sync strip: there is nothing of the reader's to save.
|
|
96
117
|
|
|
97
118
|
## What is in it
|
|
98
119
|
|
|
99
120
|
| File | Content |
|
|
100
121
|
| ---- | ------- |
|
|
101
122
|
| `kit.css` | The canonical variables, the dark and light palettes of the default theme, every named theme under `data-palette`, the density steps under `data-density`, the self-hosted Geist and Geist Mono faces and the document baseline, then the stylesheet of the sheet, its cells and the presence marks, in one file. |
|
|
123
|
+
| `content.css` | The opt-in content stylesheet: the design system's look for the plain HTML a page writes itself, linked after `kit.css`. See [Plain HTML content](#plain-html-content). |
|
|
102
124
|
| `fonts/` | The four Geist faces `kit.css` references, with `OFL.txt`. |
|
|
103
125
|
| `theme.js` | The theme bootstrap, under 2 KB gzipped. |
|
|
104
126
|
| `kit.js` | The `crewlet-sheet` and `crewlet-column` elements and `mountSheet`, an ES module. It carries the design system's React components and React itself, so a page needs no framework of its own. |
|
|
@@ -116,6 +138,7 @@ The build refuses a kit over any budget, and the suite holds the built files to
|
|
|
116
138
|
| ---- | -------------- |
|
|
117
139
|
| `theme.js` | 2 KB |
|
|
118
140
|
| `kit.css` | 40 KB |
|
|
141
|
+
| `content.css` | 6 KB |
|
|
119
142
|
| `kit.js` | 160 KB |
|
|
120
143
|
|
|
121
144
|
## Building
|
package/dist/content.css
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(ul,ol,dl,blockquote,details,fieldset){margin:0}*+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(p,ul,ol,dl,pre,blockquote,figure,table,details,fieldset,form){margin-block-start:var(--spacing-4)}*+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(div):where(:has(>table)){margin-block-start:var(--spacing-4)}*+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h1,h2,h3,h4,h5,h6){margin-block-start:var(--spacing-6)}:is(h1,h2,h3,h4,h5,h6)+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(p,ul,ol,dl,pre,blockquote,figure,table,details,fieldset,form){margin-block-start:var(--spacing-3)}:is(h1,h2,h3,h4,h5,h6)+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(div):where(:has(>table)){margin-block-start:var(--spacing-3)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h1,h2,h3,h4,h5,h6){color:var(--color-text-primary);scroll-margin-block-start:var(--spacing-6)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h1){font-size:var(--font-size-3xl)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h2){font-size:var(--font-size-xl);letter-spacing:var(--font-letter-spacing-snug)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h3){font-size:var(--font-size-lg);letter-spacing:var(--font-letter-spacing-snug)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h4){font-size:var(--font-size-md);letter-spacing:var(--font-letter-spacing-snug)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h5,h6){font-size:var(--font-size-sm);letter-spacing:var(--font-letter-spacing-snug)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(h6){color:var(--color-text-secondary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(p,li,dt,dd,blockquote){font-size:var(--font-size-sm);line-height:var(--font-line-height-relaxed);color:var(--color-text-secondary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(strong,b){font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(small){font-size:var(--font-size-xs)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(mark){padding-inline:2px;border-radius:var(--radius-xs);background:var(--color-brand-accent-soft-strong);color:inherit}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(del,s){color:var(--color-text-tertiary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(ul,ol){padding-inline-start:var(--spacing-5)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(li)+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(li),:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(li)>:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(ul,ol){margin-block-start:var(--spacing-1)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(li)::marker{color:var(--color-text-tertiary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(dt){font-weight:var(--font-weight-medium);color:var(--color-text-primary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(dd){margin:0;padding-inline-start:var(--spacing-4)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(dd)+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(dt){margin-block-start:var(--spacing-3)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(blockquote){padding-inline-start:var(--spacing-3);border-inline-start:2px solid var(--color-border-strong)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(blockquote)>*+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)){margin-block-start:var(--spacing-3)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(hr){margin-block:var(--spacing-6);border:0;border-block-start:1px solid var(--color-border-default)}:is(p,li,dt,dd,blockquote,td,th,caption,figcaption,label,small) :where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(a){text-decoration:underline;text-underline-offset:2px}:is(p,li,dt,dd,blockquote,td,th,caption,figcaption,label,small) :where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(a):where(:hover){color:var(--color-text-primary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(img,video){max-width:100%;height:auto;border-radius:var(--radius-sm)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(figcaption){margin-block-start:var(--spacing-2);font-size:var(--font-size-xs);line-height:var(--font-line-height-normal);color:var(--color-text-tertiary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(summary){cursor:pointer;font-weight:var(--font-weight-medium);color:var(--color-text-primary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(details):where([open])>:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(summary){margin-block-end:var(--spacing-2)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(pre){padding:var(--spacing-3);border:1px solid var(--color-border-default);border-radius:var(--radius-md);background:var(--color-surface-inset);font-size:var(--font-size-xs);line-height:var(--font-line-height-normal);color:var(--color-text-primary);white-space:pre-wrap;overflow-wrap:anywhere;tab-size:2}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(pre) :where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(code){padding:0;border-radius:0;background:none;font-size:inherit;color:inherit}:where(:not(pre))>:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(code,samp){padding:1px var(--spacing-1);border-radius:var(--radius-xs);background:var(--color-surface-inset);font-size:.92em;color:var(--color-text-primary);overflow-wrap:anywhere}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(kbd){display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:0 var(--spacing-1);border:1px solid var(--color-border-strong);border-radius:var(--radius-xs);background:var(--color-surface-elevated);font-size:var(--font-size-2xs);line-height:var(--font-line-height-body);color:var(--color-text-secondary);white-space:nowrap;vertical-align:middle}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(div,figure):where(:has(>table)){max-width:100%;overflow-x:auto}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(table){font-size:var(--font-size-compact);line-height:var(--font-line-height-snug);font-variant-numeric:tabular-nums}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(caption){caption-side:top;padding-block-end:var(--spacing-2);font-size:var(--font-size-compact);text-align:start;color:var(--color-text-tertiary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(th,td){padding:var(--spacing-2) var(--spacing-3);border-block-end:1px solid var(--color-border-default);text-align:start;vertical-align:top}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(td){color:var(--color-text-primary);overflow-wrap:break-word}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(th){font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(thead)>:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(tr)>:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(th){border-block-end-color:var(--color-border-strong);vertical-align:bottom}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(tfoot) :where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(th,td){border-block-start:1px solid var(--color-border-strong);border-block-end:0;font-weight:var(--font-weight-semibold)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(th,td):where([data-align=center]){text-align:center}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(th,td):where([data-align=right],[data-align=end]){text-align:end;white-space:nowrap}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input:where([type=button],[type=reset],[type=submit])),:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input:where([type=file]))::file-selector-button{display:inline-flex;align-items:center;justify-content:center;gap:var(--spacing-2);min-height:var(--size-control-md);padding:0 var(--spacing-3);border:1px solid var(--color-border-strong);border-radius:var(--radius-md);background:var(--color-surface-subtle);color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-compact);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-tight);white-space:nowrap;cursor:pointer;transition:background var(--motion-duration-fast) var(--motion-easing-default),border-color var(--motion-duration-fast) var(--motion-easing-default)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input:where([type=button],[type=reset],[type=submit])):where(:hover:not(:disabled)){border-color:var(--color-border-strong-hover);background:var(--color-surface-elevated)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input):where([type=file]:not(:disabled))::file-selector-button:hover{border-color:var(--color-border-strong-hover);background:var(--color-surface-elevated)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input:where([type=button],[type=reset],[type=submit])):where(:active:not(:disabled)){background:var(--color-surface-pressed)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input):where([type=submit]){border-color:transparent;background:var(--color-brand-accent);color:var(--color-text-on-accent)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input):where([type=submit]:hover:not(:disabled)){border-color:transparent;background:var(--color-brand-accent-hover)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input):where([type=submit]:active:not(:disabled)){background:var(--color-brand-accent-active)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button):where([aria-pressed=true]){border-color:var(--color-brand-accent-soft-strong);background:var(--color-brand-accent-soft);color:var(--color-brand-accent-ink)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input:where([type=button],[type=reset],[type=submit])):focus-visible{outline:2px solid var(--color-focus);outline-offset:var(--size-focus-ring-inset-offset);border-radius:var(--radius-md)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input):where([type=submit]):focus-visible{outline-offset:2px}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(button,input,select,textarea):where(:disabled){opacity:.5;cursor:not-allowed}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input:where(:not([type]),[type=text],[type=email],[type=password],[type=search],[type=url],[type=tel],[type=number],[type=date],[type=time],[type=datetime-local],[type=month],[type=week]),select,textarea){width:100%;min-height:var(--size-control-md);padding:0 var(--spacing-3);border:1px solid var(--color-border-field);border-radius:var(--radius-md);background-color:var(--color-surface-subtle);color:var(--color-text-primary);font-family:var(--font-family-sans);font-size:var(--font-size-compact);line-height:var(--font-line-height-normal);transition:border-color var(--motion-duration-fast) var(--motion-easing-default)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input):where([type=search]){appearance:none}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(textarea){display:block;min-height:var(--spacing-11);padding:var(--spacing-2) var(--spacing-3);resize:vertical}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input,select,textarea):where(:hover:not(:disabled,:focus-visible)){border-color:var(--color-border-control)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input,select,textarea):where(:user-invalid){border-color:var(--color-feedback-danger);outline-color:var(--color-feedback-danger)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input,select,textarea):focus-visible{outline:1px solid var(--color-focus);outline-offset:-1px;border-radius:var(--radius-md)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input,select,textarea):where(:user-invalid):focus-visible{outline-color:var(--color-feedback-danger)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input,textarea)::placeholder{color:var(--color-text-tertiary);opacity:1}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(select):where(:not([multiple],[size]:not([size="1"]))){appearance:none;padding-inline-end:var(--spacing-7);background-image:linear-gradient(45deg,transparent 50%,var(--color-text-muted) 50%),linear-gradient(135deg,var(--color-text-muted) 50%,transparent 50%);background-position:calc(100% - var(--spacing-3) - 5px) 50%,calc(100% - var(--spacing-3)) 50%;background-size:5px 5px;background-repeat:no-repeat;cursor:pointer}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(select):where([multiple],[size]:not([size="1"])){padding:var(--spacing-1)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input):where([type=checkbox],[type=radio]){width:16px;height:16px;flex:none;accent-color:var(--color-brand-accent);cursor:pointer}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input):where([type=checkbox],[type=radio]):focus-visible{outline:2px solid var(--color-focus);outline-offset:0;border-radius:var(--radius-xs)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(progress,meter,input:where([type=range])){accent-color:var(--color-brand-accent)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input):where([type=file]){font-size:var(--font-size-compact);color:var(--color-text-secondary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input):where([type=file])::file-selector-button{margin-inline-end:var(--spacing-3)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(output){font-variant-numeric:tabular-nums}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(label){display:block;font-size:var(--font-size-compact);font-weight:var(--font-weight-medium);line-height:var(--font-line-height-snug);color:var(--color-text-primary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(label):where(:has(>input:is([type=checkbox],[type=radio]))){display:flex;align-items:flex-start;gap:var(--spacing-2);font-weight:var(--font-weight-regular);cursor:pointer}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(label)>:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input):where([type=checkbox],[type=radio]){margin-block-start:calc((var(--font-line-height-snug) * 1em - 16px) / 2)}:is(form,fieldset)>*+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)){margin-block-start:var(--spacing-3)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(label)+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input,select,textarea),:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(label)>:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(input,select,textarea):where(:not([type=checkbox],[type=radio])){margin-block-start:var(--spacing-1)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(fieldset){min-width:0;padding:var(--spacing-3) var(--spacing-4) var(--spacing-4);border:1px solid var(--color-border-default);border-radius:var(--radius-md)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(legend){padding-inline:var(--spacing-1);font-size:var(--font-size-compact);font-weight:var(--font-weight-semibold);color:var(--color-text-primary)}:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(legend)+:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)){margin-block-start:0}@media(forced-colors:active){:where(:not(crewlet-sheet,crewlet-sheet *,[class^=crewlet-],[class^=crewlet-] *,[class*=" crewlet-"],[class*=" crewlet-"] *,[data-crewlet-content=off],[data-crewlet-content=off] *)):is(select){appearance:auto;padding-inline-end:var(--spacing-3)}}
|