@panphora/bevel 0.1.0

package/examples/components/reference/baseline/fonts/LICENSE-ibm-plex-sans.txt

@@ -0,0 +1,93 @@
+Copyright 2019 IBM Corp. All rights reserved. IBMPlexSans-Italic[wdth,wght].ttf: Copyright 2019 IBM Corp. All rights reserved.
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/examples/components/reference/baseline/fonts/LICENSE-newsreader.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader) Newsreader-Italic[opsz,wght].ttf: Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/examples/components/reference/fable/IMPROVEMENTS.md

@@ -0,0 +1,106 @@
+# Fable seat: improvements to the 33 static Bevel components
+
+Everything here is static. Each state is an `inert` `[data-ref-state]` section, the only script is `../../fixtures/static-host.js`, and nothing claims to work. The set is generated by `build.py` from the parent's corrected components (read-only input), styled by `fable.css`, and the Kanban is generated by `kanban.py` and styled by `kanban.css`.
+
+Labels: **ran** means I executed something and looked at the result. **read** means the conclusion comes from reading code or a review artifact, not from running it.
+
+Attribution: my authored work is `build.py`, `fable.css`, `kanban.py`, `kanban.css`. The parent's repairs after my usage limit are `build_repairs.py`, `parent-repairs.css` and small edits to `build.py`, all listed in `PARENT-REPAIRS.md`; my pre-repair files are preserved in `as-authored/`. I call out each parent repair where it touches a component below, and I have not restyled the 32 reviewed components this session.
+
+## Set-wide changes (fable.css, FRAME section)
+
+- One frame for every specimen: 32/36px padding, brass eyebrow, 36px serif title, 14px secondary copy at 520px measure. Why: the Astra and Parent frames differed in weight, which made the set read as two kits.
+- One avatar palette keyed by `data-who` (MC brass, AR teal, SP sunk, JP ink-inverted). Why: the same four people appear in nine components and were coloured differently in each.
+- One shared 32px bevel icon button (`.f-icon-button`) with a recessed pressed/expanded face. Used by toolbar, popover, popconfirm, combobox, column manager, grid cells and both contexts.
+- One label tone system (`data-label`: design brass, editorial teal, engineering ink, research ox) shared by tags, dots and the Kanban labels.
+- Shared field error, status line, badge tones and code token colours (`.tk-tag` teal, `.tk-attr` brass, `.tk-str` ink-2) so code block, diff and split panes agree.
+- Buttons 14px/6×14 and small 13px/4×11; no white primary halves anywhere David asked for grey/blue faces.
+
+## Per component
+
+Order follows `manifest.json`. Source in brackets is the selection from `feedback.json`.
+
+1. **Modal** [Astra]. Exact `sources/diagonal-close.svg` verbatim in the top-right corner, 64px at −2px so it sits flush on a new 2px ink frame (ink triangle, ground X, faithful to the dark Hyperclay source). Outline replaced by frame plus the kit shadow. The confirm state's well becomes an archive card (document icon, name, "12 documents · 4 collaborators", Active badge) so the dialog has a visible subject. Long state gets a "Scroll to read the rest" hint under the scroll copy.
+2. **Popover menu** [Astra]. Text trigger becomes a "more" icon button carrying `aria-expanded`. Menu items get stroke icons (open, rename, duplicate, move, archive), empty `kbd` removed, title "Field notes · Project". Closed state explains what the button opens.
+3. **Drawer** [Astra]. Exact diagonal close in the panel corner, 2px ink left edge, amount row and detail grid restyled without inline styles. The underlay is now the invoice list with the open row marked, so the drawer visibly belongs to a record. Closed state shows a rule row with a "View INV-0432" action instead of a bare button. *Parent repair (ran by parent):* the close corner overflowed the page by 2px in 8 state/theme/width combinations; `parent-repairs.css` moves it flush.
+4. **Popconfirm** [Parent]. Trash icon trigger with `aria-expanded`, warning icon in the head, and a CSS nub (rotated square `::before`, `right:11px; top:-7px`) pointing at the trigger as requested. Danger button reads "Remove". Confirmed state is a teal status line with check and Undo; closed state a quiet status line.
+5. **Combobox** [Parent]. Options use the shared avatar palette. Filtered state highlights the typed "Mi" with `<mark>`. Chevron toggle button with `aria-expanded`, open field state, empty state with search icon and a helpful sentence, footer with keyboard hints. Closed state shows the chosen member's avatar in the field.
+6. **Multi-select picker** [Parent]. Tags carry label tones with a colour square and a close icon; options get a matching dot. Field and popover restructured (`.f-tag-field.is-open`, `.f-tag-popover`), placeholder "Type to find a label", empty state offers Create "Finance", footer "n of 4 labels selected". Redundant action row removed in the selected state.
+7. **Selectable cards** [Astra]. Kept Astra's open composition. Recommended badge in brass accent, Unavailable badge with a lock, clearer checkbox-state header copy.
+8. **Upload dropzone** [Parent]. Upload icon; the dropzone becomes compact in queue, error and crop states so the file list leads. Rows get a file icon, a Ready state, a percent, and Failed plus Retry with a stated cause ("The connection dropped at 68%"). Crop head "1:1 · 800 × 800", actions "Use this crop" / "Cancel".
+9. **Inline edit** [Astra]. Editing and error states get a hint row (eyebrow plus ↵ save / esc cancel keys) replacing the note. The single-line Richclay root gets a brass underline and a CSS blinking caret; no engine. Error is an inline field error, saved is a teal status line with the time, resting note says where the name appears.
+10. **Settings rows** [Astra]. Rows restyled for contrast with fewer containers. Disabled state explained by a lock status line ("Only the workspace owner can change these settings") instead of a note; the disabled block dims.
+11. **Form error summary** [Astra]. Summary notice with a warning icon and no inline styles. Fields rebuilt as `.f-field.is-invalid` with `aria-invalid` and an inline error under each. Actions Cancel + Create project. Corrected state uses a success summary with a check and one reassuring sentence.
+12. **Split button** [Parent]. Both halves the same secondary face, no white half, no right bevel on the left half. Main gets a document icon; the caret is `.f-split-caret` with `aria-expanded` in open states. Two divider treatments in the exact states: `line` is a darker 1px line, `inset` is a 1px edge-lo line with an inset edge-hi highlight. Menu items get document icons and a check on the selected format (`aria-checked`); A/B variant labels. *Parent repair (read by parent):* my open caret used a different material from the main half; the repair keeps both faces equal while retaining the open arrow and the divider treatments.
+13. **Sidebar nav** [Parent]. Collapse icon button at the top-right, arrow pointing left when expanded and right when compact. Jules Park / Owner identity footer with the JP ink avatar and an account chevron. Nav counts styled, document rows get a chevron, 212px / 68px widths.
+14. **App toolbar** [Astra]. Rebuilt as an icon toolbar: New (plus) · separator · segmented List/Grid with `aria-pressed` · separator · Filter · spacer · search with `/` key · More (`aria-expanded` in the overflow state). List rows get file icons; overflow menu gets sort/archive/share icons. All faces grey/blue, no white primary. *Parent repair (read by parent):* my as-authored version still emitted a text Filter button; the parent switched it to the icon-button helper and gave Grid view a grid icon.
+15. **Breadcrumbs** [Astra]. Chevron separators. On long paths the middle crumbs collapse behind a "…" button at narrow widths (CSS only). Byline avatar uses the palette.
+16. **Pagination** [Astra]. Chevron icons for previous/next, styled gap ellipsis, note trimmed to the count, pager row aligned.
+17. **Tree view** [Parent]. Caret plus folder icons on summaries, document icons on leaves. Thin 28px rows spaced by margins rather than padding, selected row brass-soft with a 2px gold left border. Open badge, empty message with folder icon, head count "12 files · 4 folders". *Parent repair (ran by parent):* the Open badge stretched across the row and the row spacing was too tight; the repair stops badge growth and widens the margins.
+18. **Wizard shell** [Astra]. Astra's open composition kept. Steps get `data-step` done/current/next; 30px square numbers joined by a connector; done squares carry a check; the current square is ink with a brass-soft ring for high contrast. Step notes, lede, Role select wrapped in a labelled field, error line with icon, complete state with a "Setup complete" badge and a summary card.
+19. **Toast stack** [Parent]. Toasts anchored bottom-right at 400px with the kit shadow. Close icon, Undo as a small button with an undo icon, kind icons (check / warning / archive).
+20. **Persistent action banner** [Parent]. Left 3px accent, no top accent. Offline/check icons. Actions grouped: "Retry connection" small button plus "Last synced 10:42 · 3 changes waiting". Resolved gets Dismiss. The page under the banner loses its inline styles.
+21. **Save status indicator** [iterate]. Only the `saved` state, as asked. A calm page (eyebrow, article) with a fixed chip at `right:16px; bottom:16px; padding:4px 12px; border-radius:999px; font:13px/1.6`, matching the HTML Clay indicator, with an ink background and ground text plus a small check. Why: the Clay chip's grey needed a Bevel material; ink on ground reads in both modes.
+22. **Code block** [Astra]. Head with file name and icon, HTML badge, "4 lines", Wrap (`aria-pressed`) and Copy small buttons. Lines rebuilt as `<li><code>` with tag/attribute/string tokens in kit colours; note explains Wrap and Copy.
+23. **Diff view** [Parent]. Document icon; Unified/Split becomes a segmented control with `aria-pressed`. Split state rebuilt with real before/after lines and word-level marks on both sides.
+24. **Activity feed** [Astra]. Events restructured into avatar plus body (actor, verb, time; detail line), verb icons via `data-verb`, day eyebrows, "Show yesterday" button.
+25. **Stat tiles** [Astra]. Each tile gets a distinct sparkline with an end dot and baseline, and a delta with an arrow icon and tone. Zero state gets a flat dashed sparkline and "No activity yet".
+26. **Avatar group** [Parent]. Shared palette, "+N" in a dashed "more" style, list rows with a presence dot for the online member, and an extra "+3" row naming the remaining people.
+27. **Small charts** [Astra]. Spark state rebuilt as a figure (value plus delta) beside the sparkline with a seven-day strip that highlights the peak. Legend swatches replace inline-styled spans.
+28. **Filter builder** [Astra]. Rows get the rule word and a close-icon remove; Add rule with plus; "Apply filters"; empty state with a filter icon and guidance; result label eyebrow.
+29. **Column manager** [Astra]. Grip icon, up/down as icon buttons, order numbers, the moved item highlighted with a "moved" tag in the reordered state, panel head and foot with a lock note ("Invoice stays pinned as the record identifier") and "4 of 5 shown".
+30. **Editable grid cells** [Astra]. The invoice table is rebuilt identically across states. Idle amount is a cell button with a pencil; editing shows prefix, input and ok/cancel icon buttons; invalid adds an inline error; the editing row is highlighted; the note lists the keys. *Parent repair (ran by parent):* my absolutely positioned error overlapped the next row; the repair puts it in normal flow so the row grows.
+31. **Split panes** [Parent]. Divider with a grip icon, document icons in the list, tokenised source markup, and a caption ("List 32% · minimum 25% · drag the divider") replacing the range slider. List-detail at `--split:32%`, detail byline with avatar.
+32. **Rich text toolbar** [Astra]. Toolbar with a block menu (Paragraph plus chevron) and link/list/undo icons. Block menu items render in their own type styles with a check on the current one. Link state: the dialog sits in flow after the link being edited, with URL and Text fields and Remove / Cancel / Apply. Floating state: a selection toolbar in flow above the paragraph (B I U S, link, highlight) with the selection marked. No Richclay engine.
+33. **Kanban board** [iterate]. Independent design; see the next section.
+
+Contexts:
+
+- **HyperCMS** [parent base]. Close icon button, shell error and field errors use the shared summary and field-error patterns with icons, grip icons on cards, upload row, preview byline with avatar, array counts.
+- **QuickCrop** [parent base]. The modal gets the exact diagonal close, a proper head, 1:1 / Free as a segmented control with `aria-pressed`, a lock / any-proportion note, Reset (undo) plus Use image.
+
+## Kanban board (independent design)
+
+David's feedback: both first-round boards were bland. This board is a separate composition from the parent's three-column editorial board; it shares only the kit tokens and the seat's avatar palette.
+
+**Composition.** A masthead (kicker path, 40px serif title, blurb, team avatars, Share, New task) over a 2px ink rule. View tabs (Board with count, List, Timeline, Calendar, "Private · updated 10:42"). A tool row: search with ⌘K, a pressed "Due: this week" filter chip, Assignee and Label chips, quiet Group and Sort chips. An aggregate tape with serif numerals: Open, In progress of the WIP limit, Blocked in ox, Done this week, and a progress meter. Four open lanes drawn on the ground with a ruled head (lane mark, title, count, WIP) and no lane containers. Cards show id, priority (urgent as a solid ox block, high as a brass flag), title, a two-line description, labels with tone squares (design brass, editorial teal, engineering ink, launch ox, studio ink), a dependency drawn on both ends (FN-104 "Blocked by FN-105" in ox, FN-105 "Blocks FN-104" in sunk), a checklist bar with count, and a foot with due date (today brass, overdue ox, done teal), comments, attachments and assignees. FN-102 carries a cover image. Done cards recede to the ground with struck titles.
+
+**States.** `default`: 11 tasks, WIP 3/3 in ox, one blocker. `empty`: zero counts, a brass-accented note, a solid brass CTA card in Backlog ("Add the first task", "Start from a template") and dashed empties elsewhere. `selected`: FN-104 gets a brass top bar and ring; a 352px panel with a 2px ink edge shows id and status, serif title, lede, a property grid (assignees, priority, due, labels, estimate), a checklist with the kit's small checkboxes and struck completed items, the blocker in ox, three attachments, activity (two comments, a move event, a ⌘↵ composer) and a footer. Beside the panel the lanes narrow to 204px so three lanes plus a sliver of Done fit; the strip scrolls sideways, with a designed scroll rail and a one-line hint underneath.
+
+**Narrow (390px).** Masthead stacks (team row, then a full-width Share / New task pair), view tabs scroll, the tape becomes 2×2 plus the meter, lanes stack full width with sticky lane heads, and the panel stacks below the board.
+
+**Rendering defects found and fixed this session (ran unless noted).**
+
+- The selected card was hidden behind the strip cut and no scrollbar painted. Fixed by narrowing lanes in the panel state so the selected card and a Done sliver are in view.
+- Chromium's headless shell does not paint custom `::-webkit-scrollbar` styles (measured 9px reserved, nothing drawn, even with a red-thumb override) and full Chromium in new headless mode painted none either. Replaced the native bar with a static scroll rail (track plus a thumb sized to the 688/862 visible ratio) and hid the native bar in the strip so the two never double up.
+- `.kb p{margin:0}` outranked the hint's margin, so the hint sat flush against the board. Fixed with a more specific selector.
+- The "In progress" lane head wrapped to two lines at 204px. Fixed with `white-space:nowrap` and by hiding the WIP tag in the panel state (it stays on the tape).
+- The hint rendered "Done ." because a flex `p` split its inline children into items. Made it a block.
+- Empty state at 390px: lanes shrank to their content width because `align-items:start` carried over from the grid rule. Fixed with stretch.
+- The narrow masthead orphaned New task on its own line. Fixed with a team row and a full-width button pair.
+- (read) The planned "Open" corner tag on the selected card would have collided with the Urgent chip once the card was fully visible; replaced by the brass top bar before it rendered.
+
+**Aesthetic decisions (not defects).** No lane containers, so the cards are the only boxes. Sans cards against a serif masthead, tape and panel title. The dependency appears on both cards, not only the blocked one. Urgent is a solid ox block rather than a coloured word. Done cards recede rather than disappear. The panel pushes the board into a strip instead of covering it. Three narrow lanes plus a sliver beside the panel instead of two and a half wide ones.
+
+## Verification
+
+**Ran (Fable, this session).**
+
+- `ONLY_IDS=kanban-board node verify-layout.mjs fable`: 12 checks (default, empty, selected × light, dark × 1120px, 390px), 0 failures. Each check confirms the active state matches, the document has no horizontal overflow, the cover image loaded and no page errors fired. Results in `review/layout-fable-kanban-board.json`. Run after every fix; the last run is the shipped state.
+- Playwright measurement of the selected strip: `scrollWidth` 862 against `clientWidth` 688 in both modes, document overflow false.
+- `build.py` regenerated three times with the specified interpreter; md5 comparison of all 35 component files plus `index.html` and `coverage.json` showed only `components/kanban-board.html` changing. The 32 reviewed components are byte-identical to the parent-repaired build.
+- Inspected by eye, under `~/Downloads/bevel/20260908-110100/fable/`: `kanban-board-{default,empty,selected}-{light,dark}.png` at 1120px; `kanban-board-{default,empty,selected}-{light,dark}-narrow.png` at 390px (default from the verify script, the rest from my own Playwright capture); `kanban-board-selected-{light,dark}-strip.png` crops of the strip, rail and hint.
+- Browser hygiene: only Playwright's own Chromium, launched headless and closed in `finally`; no attachment to the real Chrome; no leftover Playwright or Chrome for Testing processes after the run.
+
+**Read (from review artifacts, not re-run by me).**
+
+- The parent's `review/layout-fable-partial.json`: 352 checks across the 34 non-Kanban ids, 8 failures, all drawer (open and long × light and dark × 760px and 390px), which the parent repaired. The parent's follow-up runs `layout-fable-drawer-app-toolbar-split-button.json` (40 checks) and `layout-fable-tree-view-editable-grid-cells.json` (20 checks) report 0 failures.
+- I did not re-render the 32 other components this session. They are frozen for review and my build check shows I have not changed them.
+- Relative paths survive copying the run bundle to `~/htmlfile/`: components link `../../baseline/*`, `../../fixtures/static-host.js`, `../base-*.css`, `../fable.css`, `../parent-repairs.css` and `../kanban.css`; `base-parent.css` imports `../sources/richclay/richclay.css` relative to `fable/`.
+
+## Known limitations and unresolved issues
+
+- `fable.css` line 230 (`.r-inline-name`) carries a no-op `background:linear-gradient(transparent,transparent)`. The kit forbids gradients. It draws nothing, but it should go; I left it because the 32 reviewed components and their CSS are frozen. Removing that one declaration is safe.
+- The Kanban scroll rail is static: its thumb is fixed at 80%, the visible ratio at 1120px. Between 600px and 960px the proportion is approximate, and a live board would use a real scrollbar instead.
+- The Kanban was rendered at the manifest widths only (1120px and 390px). At 760px the ≤960px rule stacks the panel below a four-lane grid; this is read from the stylesheet, not rendered.
+- Icon paths for the 32 components come partly from the parent's `build_repairs.py`, which `kanban.py` imports to fill names my as-authored icon map lacked.
+- No headed browser was used, so the OS-drawn scrollbar of a live page was not observed; the rail is the affordance the specimen relies on.

package/examples/components/reference/fable/PARENT-REPAIRS.md

@@ -0,0 +1,17 @@
+# Parent verification after the usage limit
+
+Fable reached its usage limit at 11:29 a.m. on September 8, with reset reported at 1:20 p.m. It authored `build.py`, `kanban.py` and `fable.css`. These untouched files are preserved under `as-authored/`. The component generator covers all 33 components and both contexts, but `kanban.css` and the final improvement report were not written.
+
+The parent ran the generator and is checking the results. This report identifies parent repairs rather than attributing them to Fable.
+
+- Read: the generator referenced icon names absent from its icon map. Added those standard stroke icons in `build_repairs.py`, using the existing Parent icon paths where available. Ran: the generator now produces all 33 component files and both contexts.
+- Ran: 8 drawer state, theme and width combinations overflowed the page. The corner close button extended two pixels beyond the panel. `parent-repairs.css` moves that drawer corner flush with the page edge.
+- Read: the toolbar generator added a text Filter action despite the explicit request for icon actions. It now uses the existing icon button helper. Its grid action now uses a grid icon.
+- Read: the open split button styled the caret as a different material from the main half. The repair keeps both faces equal while retaining Fable’s open arrow and the selected divider treatment.
+- Ran: the tree preview stretched the Open badge across the row and compressed the original row spacing. The repair prevents badge growth and increases outside margins around the thin rows.
+- Ran: the grid validation message overlapped the next row. The repair places the message in normal flow so the edited row grows to accommodate it.
+
+Fable completed its independent Kanban stylesheet and report after the usage reset. The completed authored files are preserved under `as-authored/kanban-completed.*` and `as-authored/IMPROVEMENTS-completed.md`.
+
+- Ran: the Kanban preview showed an active “Due: this week” filter while displaying backlog cards dated September 19, 24 and 26. The parent changed that fixture control to the unfiltered “Due: any time” state and kept the full board visible. This is a static fixture correction, with no filtering engine added.
+- Ran: at the enlarged preview's intermediate width of 760px, the default and empty boards overflowed the document to 1078px. The parent added a two-column layout between the desktop and phone layouts, including the selected state, and hid the unnecessary scroll hint at that width. The full-width four-column design and single-column phone design are preserved.

package/examples/components/reference/fable/as-authored/IMPROVEMENTS-completed.md

@@ -0,0 +1,106 @@
+# Fable seat: improvements to the 33 static Bevel components
+
+Everything here is static. Each state is an `inert` `[data-ref-state]` section, the only script is `../../fixtures/static-host.js`, and nothing claims to work. The set is generated by `build.py` from the parent's corrected components (read-only input), styled by `fable.css`, and the Kanban is generated by `kanban.py` and styled by `kanban.css`.
+
+Labels: **ran** means I executed something and looked at the result. **read** means the conclusion comes from reading code or a review artifact, not from running it.
+
+Attribution: my authored work is `build.py`, `fable.css`, `kanban.py`, `kanban.css`. The parent's repairs after my usage limit are `build_repairs.py`, `parent-repairs.css` and small edits to `build.py`, all listed in `PARENT-REPAIRS.md`; my pre-repair files are preserved in `as-authored/`. I call out each parent repair where it touches a component below, and I have not restyled the 32 reviewed components this session.
+
+## Set-wide changes (fable.css, FRAME section)
+
+- One frame for every specimen: 32/36px padding, brass eyebrow, 36px serif title, 14px secondary copy at 520px measure. Why: the Astra and Parent frames differed in weight, which made the set read as two kits.
+- One avatar palette keyed by `data-who` (MC brass, AR teal, SP sunk, JP ink-inverted). Why: the same four people appear in nine components and were coloured differently in each.
+- One shared 32px bevel icon button (`.f-icon-button`) with a recessed pressed/expanded face. Used by toolbar, popover, popconfirm, combobox, column manager, grid cells and both contexts.
+- One label tone system (`data-label`: design brass, editorial teal, engineering ink, research ox) shared by tags, dots and the Kanban labels.
+- Shared field error, status line, badge tones and code token colours (`.tk-tag` teal, `.tk-attr` brass, `.tk-str` ink-2) so code block, diff and split panes agree.
+- Buttons 14px/6×14 and small 13px/4×11; no white primary halves anywhere David asked for grey/blue faces.
+
+## Per component
+
+Order follows `manifest.json`. Source in brackets is the selection from `feedback.json`.
+
+1. **Modal** [Astra]. Exact `sources/diagonal-close.svg` verbatim in the top-right corner, 64px at −2px so it sits flush on a new 2px ink frame (ink triangle, ground X, faithful to the dark Hyperclay source). Outline replaced by frame plus the kit shadow. The confirm state's well becomes an archive card (document icon, name, "12 documents · 4 collaborators", Active badge) so the dialog has a visible subject. Long state gets a "Scroll to read the rest" hint under the scroll copy.
+2. **Popover menu** [Astra]. Text trigger becomes a "more" icon button carrying `aria-expanded`. Menu items get stroke icons (open, rename, duplicate, move, archive), empty `kbd` removed, title "Field notes · Project". Closed state explains what the button opens.
+3. **Drawer** [Astra]. Exact diagonal close in the panel corner, 2px ink left edge, amount row and detail grid restyled without inline styles. The underlay is now the invoice list with the open row marked, so the drawer visibly belongs to a record. Closed state shows a rule row with a "View INV-0432" action instead of a bare button. *Parent repair (ran by parent):* the close corner overflowed the page by 2px in 8 state/theme/width combinations; `parent-repairs.css` moves it flush.
+4. **Popconfirm** [Parent]. Trash icon trigger with `aria-expanded`, warning icon in the head, and a CSS nub (rotated square `::before`, `right:11px; top:-7px`) pointing at the trigger as requested. Danger button reads "Remove". Confirmed state is a teal status line with check and Undo; closed state a quiet status line.
+5. **Combobox** [Parent]. Options use the shared avatar palette. Filtered state highlights the typed "Mi" with `<mark>`. Chevron toggle button with `aria-expanded`, open field state, empty state with search icon and a helpful sentence, footer with keyboard hints. Closed state shows the chosen member's avatar in the field.
+6. **Multi-select picker** [Parent]. Tags carry label tones with a colour square and a close icon; options get a matching dot. Field and popover restructured (`.f-tag-field.is-open`, `.f-tag-popover`), placeholder "Type to find a label", empty state offers Create "Finance", footer "n of 4 labels selected". Redundant action row removed in the selected state.
+7. **Selectable cards** [Astra]. Kept Astra's open composition. Recommended badge in brass accent, Unavailable badge with a lock, clearer checkbox-state header copy.
+8. **Upload dropzone** [Parent]. Upload icon; the dropzone becomes compact in queue, error and crop states so the file list leads. Rows get a file icon, a Ready state, a percent, and Failed plus Retry with a stated cause ("The connection dropped at 68%"). Crop head "1:1 · 800 × 800", actions "Use this crop" / "Cancel".
+9. **Inline edit** [Astra]. Editing and error states get a hint row (eyebrow plus ↵ save / esc cancel keys) replacing the note. The single-line Richclay root gets a brass underline and a CSS blinking caret; no engine. Error is an inline field error, saved is a teal status line with the time, resting note says where the name appears.
+10. **Settings rows** [Astra]. Rows restyled for contrast with fewer containers. Disabled state explained by a lock status line ("Only the workspace owner can change these settings") instead of a note; the disabled block dims.
+11. **Form error summary** [Astra]. Summary notice with a warning icon and no inline styles. Fields rebuilt as `.f-field.is-invalid` with `aria-invalid` and an inline error under each. Actions Cancel + Create project. Corrected state uses a success summary with a check and one reassuring sentence.
+12. **Split button** [Parent]. Both halves the same secondary face, no white half, no right bevel on the left half. Main gets a document icon; the caret is `.f-split-caret` with `aria-expanded` in open states. Two divider treatments in the exact states: `line` is a darker 1px line, `inset` is a 1px edge-lo line with an inset edge-hi highlight. Menu items get document icons and a check on the selected format (`aria-checked`); A/B variant labels. *Parent repair (read by parent):* my open caret used a different material from the main half; the repair keeps both faces equal while retaining the open arrow and the divider treatments.
+13. **Sidebar nav** [Parent]. Collapse icon button at the top-right, arrow pointing left when expanded and right when compact. Jules Park / Owner identity footer with the JP ink avatar and an account chevron. Nav counts styled, document rows get a chevron, 212px / 68px widths.
+14. **App toolbar** [Astra]. Rebuilt as an icon toolbar: New (plus) · separator · segmented List/Grid with `aria-pressed` · separator · Filter · spacer · search with `/` key · More (`aria-expanded` in the overflow state). List rows get file icons; overflow menu gets sort/archive/share icons. All faces grey/blue, no white primary. *Parent repair (read by parent):* my as-authored version still emitted a text Filter button; the parent switched it to the icon-button helper and gave Grid view a grid icon.
+15. **Breadcrumbs** [Astra]. Chevron separators. On long paths the middle crumbs collapse behind a "…" button at narrow widths (CSS only). Byline avatar uses the palette.
+16. **Pagination** [Astra]. Chevron icons for previous/next, styled gap ellipsis, note trimmed to the count, pager row aligned.
+17. **Tree view** [Parent]. Caret plus folder icons on summaries, document icons on leaves. Thin 28px rows spaced by margins rather than padding, selected row brass-soft with a 2px gold left border. Open badge, empty message with folder icon, head count "12 files · 4 folders". *Parent repair (ran by parent):* the Open badge stretched across the row and the row spacing was too tight; the repair stops badge growth and widens the margins.
+18. **Wizard shell** [Astra]. Astra's open composition kept. Steps get `data-step` done/current/next; 30px square numbers joined by a connector; done squares carry a check; the current square is ink with a brass-soft ring for high contrast. Step notes, lede, Role select wrapped in a labelled field, error line with icon, complete state with a "Setup complete" badge and a summary card.
+19. **Toast stack** [Parent]. Toasts anchored bottom-right at 400px with the kit shadow. Close icon, Undo as a small button with an undo icon, kind icons (check / warning / archive).
+20. **Persistent action banner** [Parent]. Left 3px accent, no top accent. Offline/check icons. Actions grouped: "Retry connection" small button plus "Last synced 10:42 · 3 changes waiting". Resolved gets Dismiss. The page under the banner loses its inline styles.
+21. **Save status indicator** [iterate]. Only the `saved` state, as asked. A calm page (eyebrow, article) with a fixed chip at `right:16px; bottom:16px; padding:4px 12px; border-radius:999px; font:13px/1.6`, matching the HTML Clay indicator, with an ink background and ground text plus a small check. Why: the Clay chip's grey needed a Bevel material; ink on ground reads in both modes.
+22. **Code block** [Astra]. Head with file name and icon, HTML badge, "4 lines", Wrap (`aria-pressed`) and Copy small buttons. Lines rebuilt as `<li><code>` with tag/attribute/string tokens in kit colours; note explains Wrap and Copy.
+23. **Diff view** [Parent]. Document icon; Unified/Split becomes a segmented control with `aria-pressed`. Split state rebuilt with real before/after lines and word-level marks on both sides.
+24. **Activity feed** [Astra]. Events restructured into avatar plus body (actor, verb, time; detail line), verb icons via `data-verb`, day eyebrows, "Show yesterday" button.
+25. **Stat tiles** [Astra]. Each tile gets a distinct sparkline with an end dot and baseline, and a delta with an arrow icon and tone. Zero state gets a flat dashed sparkline and "No activity yet".
+26. **Avatar group** [Parent]. Shared palette, "+N" in a dashed "more" style, list rows with a presence dot for the online member, and an extra "+3" row naming the remaining people.
+27. **Small charts** [Astra]. Spark state rebuilt as a figure (value plus delta) beside the sparkline with a seven-day strip that highlights the peak. Legend swatches replace inline-styled spans.
+28. **Filter builder** [Astra]. Rows get the rule word and a close-icon remove; Add rule with plus; "Apply filters"; empty state with a filter icon and guidance; result label eyebrow.
+29. **Column manager** [Astra]. Grip icon, up/down as icon buttons, order numbers, the moved item highlighted with a "moved" tag in the reordered state, panel head and foot with a lock note ("Invoice stays pinned as the record identifier") and "4 of 5 shown".
+30. **Editable grid cells** [Astra]. The invoice table is rebuilt identically across states. Idle amount is a cell button with a pencil; editing shows prefix, input and ok/cancel icon buttons; invalid adds an inline error; the editing row is highlighted; the note lists the keys. *Parent repair (ran by parent):* my absolutely positioned error overlapped the next row; the repair puts it in normal flow so the row grows.
+31. **Split panes** [Parent]. Divider with a grip icon, document icons in the list, tokenised source markup, and a caption ("List 32% · minimum 25% · drag the divider") replacing the range slider. List-detail at `--split:32%`, detail byline with avatar.
+32. **Rich text toolbar** [Astra]. Toolbar with a block menu (Paragraph plus chevron) and link/list/undo icons. Block menu items render in their own type styles with a check on the current one. Link state: the dialog sits in flow after the link being edited, with URL and Text fields and Remove / Cancel / Apply. Floating state: a selection toolbar in flow above the paragraph (B I U S, link, highlight) with the selection marked. No Richclay engine.
+33. **Kanban board** [iterate]. Independent design; see the next section.
+
+Contexts:
+
+- **HyperCMS** [parent base]. Close icon button, shell error and field errors use the shared summary and field-error patterns with icons, grip icons on cards, upload row, preview byline with avatar, array counts.
+- **QuickCrop** [parent base]. The modal gets the exact diagonal close, a proper head, 1:1 / Free as a segmented control with `aria-pressed`, a lock / any-proportion note, Reset (undo) plus Use image.
+
+## Kanban board (independent design)
+
+David's feedback: both first-round boards were bland. This board is a separate composition from the parent's three-column editorial board; it shares only the kit tokens and the seat's avatar palette.
+
+**Composition.** A masthead (kicker path, 40px serif title, blurb, team avatars, Share, New task) over a 2px ink rule. View tabs (Board with count, List, Timeline, Calendar, "Private · updated 10:42"). A tool row: search with ⌘K, a pressed "Due: this week" filter chip, Assignee and Label chips, quiet Group and Sort chips. An aggregate tape with serif numerals: Open, In progress of the WIP limit, Blocked in ox, Done this week, and a progress meter. Four open lanes drawn on the ground with a ruled head (lane mark, title, count, WIP) and no lane containers. Cards show id, priority (urgent as a solid ox block, high as a brass flag), title, a two-line description, labels with tone squares (design brass, editorial teal, engineering ink, launch ox, studio ink), a dependency drawn on both ends (FN-104 "Blocked by FN-105" in ox, FN-105 "Blocks FN-104" in sunk), a checklist bar with count, and a foot with due date (today brass, overdue ox, done teal), comments, attachments and assignees. FN-102 carries a cover image. Done cards recede to the ground with struck titles.
+
+**States.** `default`: 11 tasks, WIP 3/3 in ox, one blocker. `empty`: zero counts, a brass-accented note, a solid brass CTA card in Backlog ("Add the first task", "Start from a template") and dashed empties elsewhere. `selected`: FN-104 gets a brass top bar and ring; a 352px panel with a 2px ink edge shows id and status, serif title, lede, a property grid (assignees, priority, due, labels, estimate), a checklist with the kit's small checkboxes and struck completed items, the blocker in ox, three attachments, activity (two comments, a move event, a ⌘↵ composer) and a footer. Beside the panel the lanes narrow to 204px so three lanes plus a sliver of Done fit; the strip scrolls sideways, with a designed scroll rail and a one-line hint underneath.
+
+**Narrow (390px).** Masthead stacks (team row, then a full-width Share / New task pair), view tabs scroll, the tape becomes 2×2 plus the meter, lanes stack full width with sticky lane heads, and the panel stacks below the board.
+
+**Rendering defects found and fixed this session (ran unless noted).**
+
+- The selected card was hidden behind the strip cut and no scrollbar painted. Fixed by narrowing lanes in the panel state so the selected card and a Done sliver are in view.
+- Chromium's headless shell does not paint custom `::-webkit-scrollbar` styles (measured 9px reserved, nothing drawn, even with a red-thumb override) and full Chromium in new headless mode painted none either. Replaced the native bar with a static scroll rail (track plus a thumb sized to the 688/862 visible ratio) and hid the native bar in the strip so the two never double up.
+- `.kb p{margin:0}` outranked the hint's margin, so the hint sat flush against the board. Fixed with a more specific selector.
+- The "In progress" lane head wrapped to two lines at 204px. Fixed with `white-space:nowrap` and by hiding the WIP tag in the panel state (it stays on the tape).
+- The hint rendered "Done ." because a flex `p` split its inline children into items. Made it a block.
+- Empty state at 390px: lanes shrank to their content width because `align-items:start` carried over from the grid rule. Fixed with stretch.
+- The narrow masthead orphaned New task on its own line. Fixed with a team row and a full-width button pair.
+- (read) The planned "Open" corner tag on the selected card would have collided with the Urgent chip once the card was fully visible; replaced by the brass top bar before it rendered.
+
+**Aesthetic decisions (not defects).** No lane containers, so the cards are the only boxes. Sans cards against a serif masthead, tape and panel title. The dependency appears on both cards, not only the blocked one. Urgent is a solid ox block rather than a coloured word. Done cards recede rather than disappear. The panel pushes the board into a strip instead of covering it. Three narrow lanes plus a sliver beside the panel instead of two and a half wide ones.
+
+## Verification
+
+**Ran (Fable, this session).**
+
+- `ONLY_IDS=kanban-board node verify-layout.mjs fable`: 12 checks (default, empty, selected × light, dark × 1120px, 390px), 0 failures. Each check confirms the active state matches, the document has no horizontal overflow, the cover image loaded and no page errors fired. Results in `review/layout-fable-kanban-board.json`. Run after every fix; the last run is the shipped state.
+- Playwright measurement of the selected strip: `scrollWidth` 862 against `clientWidth` 688 in both modes, document overflow false.
+- `build.py` regenerated three times with the specified interpreter; md5 comparison of all 35 component files plus `index.html` and `coverage.json` showed only `components/kanban-board.html` changing. The 32 reviewed components are byte-identical to the parent-repaired build.
+- Inspected by eye, under `~/Downloads/bevel/20260908-110100/fable/`: `kanban-board-{default,empty,selected}-{light,dark}.png` at 1120px; `kanban-board-{default,empty,selected}-{light,dark}-narrow.png` at 390px (default from the verify script, the rest from my own Playwright capture); `kanban-board-selected-{light,dark}-strip.png` crops of the strip, rail and hint.
+- Browser hygiene: only Playwright's own Chromium, launched headless and closed in `finally`; no attachment to the real Chrome; no leftover Playwright or Chrome for Testing processes after the run.
+
+**Read (from review artifacts, not re-run by me).**
+
+- The parent's `review/layout-fable-partial.json`: 352 checks across the 34 non-Kanban ids, 8 failures, all drawer (open and long × light and dark × 760px and 390px), which the parent repaired. The parent's follow-up runs `layout-fable-drawer-app-toolbar-split-button.json` (40 checks) and `layout-fable-tree-view-editable-grid-cells.json` (20 checks) report 0 failures.
+- I did not re-render the 32 other components this session. They are frozen for review and my build check shows I have not changed them.
+- Relative paths survive copying the run bundle to `~/htmlfile/`: components link `../../baseline/*`, `../../fixtures/static-host.js`, `../base-*.css`, `../fable.css`, `../parent-repairs.css` and `../kanban.css`; `base-parent.css` imports `../sources/richclay/richclay.css` relative to `fable/`.
+
+## Known limitations and unresolved issues
+
+- `fable.css` line 230 (`.r-inline-name`) carries a no-op `background:linear-gradient(transparent,transparent)`. The kit forbids gradients. It draws nothing, but it should go; I left it because the 32 reviewed components and their CSS are frozen. Removing that one declaration is safe.
+- The Kanban scroll rail is static: its thumb is fixed at 80%, the visible ratio at 1120px. Between 600px and 960px the proportion is approximate, and a live board would use a real scrollbar instead.
+- The Kanban was rendered at the manifest widths only (1120px and 390px). At 760px the ≤960px rule stacks the panel below a four-lane grid; this is read from the stylesheet, not rendered.
+- Icon paths for the 32 components come partly from the parent's `build_repairs.py`, which `kanban.py` imports to fill names my as-authored icon map lacked.
+- No headed browser was used, so the OS-drawn scrollbar of a live page was not observed; the rail is the affordance the specimen relies on.

package/examples/components/reference/fable/as-authored/base-astra.css

@@ -0,0 +1,17 @@
+[hidden]{display:none!important}*{box-sizing:border-box}body{font-size:15px;line-height:1.5}button{cursor:pointer}button:disabled{cursor:not-allowed}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:var(--bevel-font-serif);font-weight:400;line-height:1.1}h1{font-size:38px;letter-spacing:-.025em}h2{font-size:30px}h3{font-size:23px}a{color:var(--bevel-brass);text-underline-offset:3px}small,.muted{color:var(--bevel-muted)}small{font-size:12px}.mono,.eyebrow,kbd,time{font-family:var(--bevel-font-mono)}.eyebrow{font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--bevel-muted);margin-bottom:12px}.specimen{padding:34px 38px;min-height:580px;position:relative}.specimen>header{margin-bottom:30px}.specimen>header p{color:var(--bevel-muted);margin-top:10px;max-width:490px}.row{display:flex;align-items:center;gap:12px}.between{justify-content:space-between}.wrap{flex-wrap:wrap}.stack{display:grid;gap:16px}.spacer{flex:1}.rule{border-top:1px solid var(--bevel-line);padding-top:18px;margin-top:20px}.panel{border:1px solid var(--bevel-line-2);background:var(--bevel-surface)}.pad{padding:24px}.well{background:var(--bevel-sunk);padding:18px}.note{font-size:12px;color:var(--bevel-muted);margin-top:20px}.actions{display:flex;justify-content:flex-end;gap:10px;align-items:center;flex-wrap:wrap;margin-top:24px}.bevel-button{font-size:14px;padding:6px 13px}.bevel-input,.bevel-select__field{font-size:15px}.field{display:grid;gap:7px;font-size:13px;font-weight:500}.field small{font-weight:400}.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}.tag{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--bevel-line-2);padding:3px 8px;font-size:12px;background:var(--bevel-sunk)}.tag button{padding:0;border:0;background:none;color:var(--bevel-muted);font-size:17px}.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 7px;background:var(--bevel-brass-soft);color:var(--bevel-brass)}.good{color:var(--bevel-teal)}.bad{color:var(--bevel-ox)}.badge.good{background:var(--bevel-teal-soft)}.badge.bad{background:var(--bevel-ox-soft)}.notice{padding:14px 17px;background:var(--bevel-brass-soft);border-left:3px solid var(--bevel-brass);font-size:13px}.notice.error{background:var(--bevel-ox-soft);border-color:var(--bevel-ox);color:var(--bevel-ox)}.notice.success{background:var(--bevel-teal-soft);border-color:var(--bevel-teal);color:var(--bevel-teal)}.invalid{border-color:var(--bevel-ox)!important}.avatar{width:35px;height:35px;display:inline-grid;place-items:center;background:var(--bevel-brass-soft);color:var(--bevel-brass);font-family:var(--bevel-font-mono);font-size:11px;flex-shrink:0;border:1px solid var(--bevel-line-2)}.avatar.alt{background:var(--bevel-teal-soft);color:var(--bevel-teal)}.person{display:flex;align-items:center;gap:12px}.person strong{display:block;font-weight:500}.person small{display:block}.listrow{padding:13px 0;border-bottom:1px solid var(--bevel-line);display:flex;align-items:center;gap:12px}.listrow:last-child{border-bottom:0}.overlay-scene{background:var(--bevel-sunk);display:grid;place-items:center;min-height:580px;padding:35px 28px}.micromodal__container{position:relative;border:2px solid light-dark(#fff,#ECEAF2);outline:1px solid var(--bevel-line-2);background:var(--bevel-surface);max-width:490px;width:100%;box-shadow:var(--bevel-shadow)}.micromodal__inner{padding:38px 40px 30px}.micromodal__heading{font-size:34px;margin-bottom:12px}.micromodal__content>p{color:var(--bevel-muted);margin-bottom:22px}.micromodal__close{position:absolute;right:-2px;top:-2px;width:32px;height:32px;background:var(--bevel-ink);border:2px solid light-dark(#fff,#ECEAF2);color:var(--bevel-ground);padding:7px}.micromodal__close svg{width:14px;height:14px;display:block}.micromodal__buttons{border-top:1px solid var(--bevel-line);padding-top:22px;margin-top:26px;display:flex;gap:9px;justify-content:flex-end;flex-wrap:wrap}.scroll-copy{max-height:210px;overflow:auto;padding-right:14px}.scroll-copy p{margin:12px 0;color:var(--bevel-muted)}.menu{width:280px;padding:7px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);box-shadow:var(--bevel-shadow)}.menu button{display:flex;width:100%;align-items:center;gap:12px;border:0;background:none;padding:9px 12px;text-align:left;font-size:14px;color:var(--bevel-ink)}.menu button:hover{background:var(--bevel-sunk)}.menu button:disabled{color:var(--bevel-faint)}.menu button.danger{color:var(--bevel-ox)}.menu kbd{margin-left:auto;font-size:10px;color:var(--bevel-muted)}.menu hr{border:0;border-top:1px solid var(--bevel-line);margin:5px}.menu-title{padding:8px 12px;font:10px var(--bevel-font-mono);color:var(--bevel-muted);letter-spacing:.08em}.anchor-stage{position:relative;min-height:360px;padding:24px;background:var(--bevel-sunk)}.anchor-stage .menu{margin-top:7px}.drawer-scene{padding:0;display:grid;grid-template-columns:1fr minmax(320px,440px);background:var(--bevel-sunk)}.drawer-underlay{padding:35px 22px;color:var(--bevel-muted)}.drawer-panel{height:580px;border-left:1px solid var(--bevel-line-2);background:var(--bevel-surface);display:flex;flex-direction:column}.drawer-panel header{padding:30px 28px 22px;border-bottom:1px solid var(--bevel-line)}.drawer-panel main{padding:24px 28px;overflow:auto;flex:1}.drawer-panel footer{padding:18px 28px;border-top:1px solid var(--bevel-line)}.detail-grid{display:grid;grid-template-columns:90px 1fr;gap:17px;font-size:13px}.detail-grid dt{color:var(--bevel-muted)}.detail-grid dd{margin:0}.popconfirm{position:relative;width:330px;max-width:100%;margin-top:12px;padding:22px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2)}.popconfirm:before{content:'';position:absolute;top:-6px;left:30px;width:10px;height:10px;transform:rotate(45deg);background:var(--bevel-surface);border-top:1px solid var(--bevel-line-2);border-left:1px solid var(--bevel-line-2)}.picker{max-width:460px;margin:auto}.picker-options{border:1px solid var(--bevel-line-2);border-top:0;background:var(--bevel-surface);padding:6px}.option{display:flex;align-items:center;gap:12px;padding:10px 12px;background:none;border:0;text-align:left;width:100%;color:var(--bevel-ink)}.option:hover,.option.selected{background:var(--bevel-sunk)}.option .tick{margin-left:auto;color:var(--bevel-brass)}.choice{display:flex;gap:15px;padding:22px;border:1px solid var(--bevel-line-2);cursor:pointer;background:var(--bevel-surface)}.choice:has(:checked){border-color:var(--bevel-brass);background:var(--bevel-brass-soft)}.choice:has(:disabled){opacity:.5;cursor:not-allowed}.choice strong{display:block;font-size:16px}.choice p{font-size:13px;color:var(--bevel-muted);margin:7px 0}.choice input{margin-top:4px}.dropzone{display:grid;place-items:center;text-align:center;padding:44px 25px;border:1px dashed var(--bevel-faint);background:var(--bevel-surface)}.drop-icon{font:40px var(--bevel-font-serif);margin-bottom:12px}.dropzone p{color:var(--bevel-muted);font-size:13px;margin:10px 0 20px}.image-thumb{width:70px;height:56px;object-fit:cover}.progress{height:4px;background:var(--bevel-line);margin-top:11px}.progress span{display:block;height:100%;background:var(--bevel-brass)}.qc-stage{position:relative;line-height:0;overflow:hidden;background:#11131e}.qc-stage>img{width:100%;height:280px;object-fit:cover;display:block}.qc-dim{position:absolute;inset:0;background:rgba(0,0,0,.48);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,15% 20%,15% 80%,85% 80%,85% 20%,15% 20%)}.qc-box{position:absolute;left:15%;top:20%;width:70%;height:60%;outline:1px solid white}.qc-box:before,.qc-box:after{content:'';position:absolute;inset:33.333% 0;border-top:1px solid #ffffff80;border-bottom:1px solid #ffffff80}.qc-box:after{inset:0 33.333%;border:0;border-left:1px solid #ffffff80;border-right:1px solid #ffffff80}.qc-handle{position:absolute;width:9px;height:9px;background:white}.qc-nw{left:-4px;top:-4px}.qc-ne{right:-4px;top:-4px}.qc-sw{left:-4px;bottom:-4px}.qc-se{right:-4px;bottom:-4px}.qc-bar{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}.setting{display:grid;grid-template-columns:1fr 180px;gap:25px;padding:23px 0;border-bottom:1px solid var(--bevel-line);align-items:center}.setting p{font-size:13px;color:var(--bevel-muted);margin-top:5px}.settings-disabled{opacity:.6}.inline-title{padding:22px 0;border-top:1px solid var(--bevel-line);border-bottom:1px solid var(--bevel-line);margin-top:26px}.sidebar-layout{display:grid;grid-template-columns:225px 1fr;min-height:580px}.sidebar{background:var(--bevel-surface);border-right:1px solid var(--bevel-line-2);padding:25px 16px;display:flex;flex-direction:column;gap:25px}.navitem{display:flex;gap:12px;align-items:center;padding:9px 10px;background:none;border:0;color:var(--bevel-muted);width:100%;text-align:left}.navitem.active{background:var(--bevel-brass-soft);color:var(--bevel-ink);border-left:2px solid var(--bevel-brass)}.navitem .count{margin-left:auto;font:11px var(--bevel-font-mono)}.sidebar-content{padding:38px 26px}.sidebar-compact{grid-template-columns:66px 1fr}.sidebar-compact .sidebar{padding:25px 8px}.sidebar-compact .navitem{justify-content:center;padding:10px 6px}.toolbar{padding:12px;border:1px solid var(--bevel-line-2);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--bevel-surface)}.toolbar .bevel-input{width:170px}.toolbar-sep{height:26px;border-left:1px solid var(--bevel-line-2)}.breadcrumb{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px;padding:14px 0;border-bottom:1px solid var(--bevel-line)}.breadcrumb span{color:var(--bevel-faint)}.breadcrumb strong{font-weight:500}.pagination{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.pagination .bevel-button{min-width:35px;padding:5px 9px}.pagination .current{background:var(--bevel-face-in);border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in)}table{border-collapse:collapse;width:100%;font-size:13px}th{text-align:left;font-weight:500;color:var(--bevel-muted);font-size:11px;text-transform:uppercase;letter-spacing:.055em;padding:13px 12px;background:var(--bevel-sunk)}td{padding:15px 12px;border-bottom:1px solid var(--bevel-line)}td.numeric{text-align:right;font-family:var(--bevel-font-mono);white-space:nowrap}.table-scroll{overflow:auto}.tree{font-size:14px}.tree details{margin-left:20px}.tree>details{margin-left:0}.tree summary{padding:10px;cursor:pointer}.tree button{display:block;margin-left:27px;border:0;padding:9px 12px;width:calc(100% - 27px);text-align:left;background:none;color:var(--bevel-ink)}.tree button.selected{background:var(--bevel-brass-soft);border-left:2px solid var(--bevel-brass)}.wizard{display:grid;grid-template-columns:170px 1fr;gap:30px}.wizard-steps{border-right:1px solid var(--bevel-line);padding-right:20px}.wizard-step{padding:0 0 28px;color:var(--bevel-muted);font-size:13px}.wizard-step b{display:block;font-family:var(--bevel-font-mono);margin-bottom:8px;color:var(--bevel-brass)}.wizard-step.current{color:var(--bevel-ink);font-weight:600}.toast-space{background:var(--bevel-sunk);padding:25px;display:grid;gap:12px;max-width:560px;margin:auto}.toast{display:flex;align-items:flex-start;gap:13px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-left:3px solid var(--bevel-teal);padding:16px}.toast.error{border-left-color:var(--bevel-ox)}.toast.action{border-left-color:var(--bevel-brass)}.toast p{font-size:13px;color:var(--bevel-muted);margin-top:3px}.toast .close{border:0;background:none;color:var(--bevel-muted);font-size:18px}.save-dot{display:inline-block;width:7px;height:7px;background:currentColor;margin-right:7px}.code-shell{border:1px solid var(--bevel-line-2);background:var(--bevel-surface)}.code-head{display:flex;gap:12px;align-items:center;padding:12px 16px;border-bottom:1px solid var(--bevel-line);font:12px var(--bevel-font-mono);flex-wrap:wrap}.code-lines{margin:0;padding:20px 20px 20px 48px;overflow:auto;font:12px/2 var(--bevel-font-mono);color:var(--bevel-ink-2);white-space:pre}.code-lines li{padding-left:12px}.code-lines li::marker{color:var(--bevel-faint)}.code-lines.wrap-code{white-space:pre-wrap;overflow-wrap:anywhere}.syntax{color:var(--bevel-teal)}.diff-line{font:12px/2 var(--bevel-font-mono);padding:3px 15px;overflow-wrap:anywhere}.diff-line.add{background:var(--bevel-teal-soft);color:var(--bevel-teal)}.diff-line.remove{background:var(--bevel-ox-soft);color:var(--bevel-ox)}.diff-line mark{color:inherit;background:color-mix(in srgb,currentColor 15%,transparent)}.diff-split{display:grid;grid-template-columns:1fr 1fr}.diff-split>div+div{border-left:1px solid var(--bevel-line)}.timeline{margin-left:16px;border-left:1px solid var(--bevel-line-2);padding-left:27px}.event{position:relative;padding-bottom:24px}.event .avatar{position:absolute;left:-45px;top:0;width:33px;height:33px;border:4px solid var(--bevel-ground)}.event p{font-size:14px}.event time{font-size:10px;color:var(--bevel-muted);display:block;margin-top:5px}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--bevel-line-2);border-bottom:1px solid var(--bevel-line-2)}.stat{padding:26px 20px}.stat+.stat{border-left:1px solid var(--bevel-line)}.stat-value{font:34px var(--bevel-font-mono);letter-spacing:-.06em;margin:14px 0}.stat small{font:11px var(--bevel-font-mono)}.sparkline{height:42px;width:100%;margin-top:24px;color:var(--bevel-brass)}.chart{width:100%;height:auto;color:var(--bevel-brass);overflow:visible}.chart text{fill:var(--bevel-muted);font:11px var(--bevel-font-mono)}.chart .grid{stroke:var(--bevel-line)}.chart .data{fill:var(--bevel-brass)}.chart .line{fill:none;stroke:var(--bevel-brass);stroke-width:3}.avatar-pile{display:flex;padding-left:7px}.avatar-pile .avatar{margin-left:-7px;width:44px;height:44px;border:3px solid var(--bevel-surface)}.avatar img{width:100%;height:100%;object-fit:cover}.filters{display:grid;gap:12px}.filter-row{display:grid;grid-template-columns:40px 1fr 1fr 1.1fr 30px;gap:8px;align-items:center}.filter-row .bevel-select__field{font-size:13px;padding:7px}.filter-row>span{font:10px var(--bevel-font-mono);color:var(--bevel-muted)}.icon-button{border:0;background:none;font-size:17px;color:var(--bevel-muted);padding:4px}.column-item{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--bevel-line)}.column-item label{flex:1}.split-work{display:grid;grid-template-columns:230px 8px 1fr;min-height:360px;border:1px solid var(--bevel-line-2)}.split-list{padding:10px;background:var(--bevel-sunk)}.split-list button{border:0;background:none;width:100%;padding:16px 12px;text-align:left;color:var(--bevel-ink);border-bottom:1px solid var(--bevel-line)}.split-list button.selected{background:var(--bevel-surface);border-left:2px solid var(--bevel-brass)}.divider{background:var(--bevel-line);display:grid;place-items:center;color:var(--bevel-faint);font-size:11px}.split-detail{padding:28px;min-width:0}.richclay-toolbar{display:flex;align-items:center;gap:3px;flex-wrap:wrap;padding:8px;background:var(--bevel-sunk);border:1px solid var(--bevel-line-2);position:relative}.richclay-button{min-width:31px;min-height:32px;background:var(--bevel-face);border:2px solid;border-color:var(--bevel-edge-hi) var(--bevel-edge-lo) var(--bevel-edge-lo) var(--bevel-edge-hi);padding:3px 7px;color:var(--bevel-ink);font-size:14px}.richclay-button[aria-pressed=true]{background:var(--bevel-face-in);border-color:var(--bevel-edge-in) var(--bevel-edge-in-hi) var(--bevel-edge-in-hi) var(--bevel-edge-in)}.richclay-separator{height:22px;border-left:1px solid var(--bevel-line-2);margin:0 6px}.richclay-menu-wrap{position:relative}.richclay-menu{position:absolute;z-index:3;top:40px;left:0;width:200px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);padding:7px}.richclay-menu-item{display:block;background:none;border:0;width:100%;padding:9px;text-align:left;color:var(--bevel-ink)}.richclay-menu-item:hover{background:var(--bevel-sunk)}.richclay-editor{padding:30px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);border-top:0;min-height:240px}.richclay-editor p{margin:15px 0;color:var(--bevel-ink-2);line-height:1.75}.richclay-editor blockquote{border-left:2px solid var(--bevel-brass);margin:22px 0;padding-left:20px;font-family:var(--bevel-font-serif);font-size:22px}.richclay-link-dialog{border:1px solid var(--bevel-line-2);padding:18px;background:var(--bevel-surface);max-width:410px;margin-top:14px}.kanban{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:15px}.kanban-column{background:var(--bevel-sunk);padding:12px;min-height:320px}.kanban-column>header{display:flex;justify-content:space-between;font-size:12px;font-weight:500;padding:3px 0 14px}.kanban-card{padding:16px 13px;background:var(--bevel-surface);border:1px solid var(--bevel-line-2);margin-bottom:10px;font-size:14px}.kanban-card.selected{border:2px solid var(--bevel-brass);padding:15px 12px}.kanban-card .tag{font-size:10px;padding:2px 5px;margin-bottom:12px}.kanban-card footer{margin-top:20px;display:flex;align-items:center;justify-content:space-between}.kanban-card .avatar{width:25px;height:25px;font-size:9px}.empty-column{border:1px dashed var(--bevel-line-2);padding:25px 10px;text-align:center;color:var(--bevel-muted);font-size:12px}.hcms-context{display:grid;grid-template-columns:1fr 355px;padding:0;min-height:720px}.hcms-preview{padding:38px 25px;background:var(--bevel-sunk)}.hcms-preview img{width:100%;height:130px;object-fit:cover;margin:22px 0}.hcms-shell{background:var(--bevel-surface);border-left:1px solid var(--bevel-line-2);height:720px;overflow:auto}.hcms-shell-body{padding:24px}.hcms-shell-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:24px}.hcms-shell-title{font-size:30px}.hcms-shell-eyebrow{font:10px var(--bevel-font-mono);color:var(--bevel-muted);margin-bottom:10px}.hcms-form{display:grid;gap:18px}.hcms-field{display:grid;gap:7px;font-size:12px}.hcms-field textarea{font-size:13px;min-height:38px;padding:8px;resize:vertical}.hcms-object{padding-top:18px;border-top:1px solid var(--bevel-line)}.hcms-object-title,.hcms-array-title{font:13px var(--bevel-font-sans);font-weight:600;margin-bottom:12px}.hcms-object-fields{padding-left:14px;border-left:1px solid var(--bevel-line-2);display:grid;gap:12px}.hcms-array-items{display:grid;gap:8px}.hcms-card{border:1px solid var(--bevel-line-2);padding:12px;display:flex;gap:10px;background:var(--bevel-sunk)}.hcms-card-body{flex:1;min-width:0}.hcms-card-fields{display:grid;gap:10px}.hcms-card-controls{text-align:right}.hcms-error{color:var(--bevel-ox);font-size:12px}.hcms-upload img{width:90px;height:64px;object-fit:cover}.hcms-shell-footer{margin-top:20px;padding-top:20px;border-top:1px solid var(--bevel-line)}.index-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:1px;background:var(--bevel-line);border:1px solid var(--bevel-line)}.index-grid a{padding:22px;background:var(--bevel-surface);text-decoration:none;color:var(--bevel-ink)}.index-grid a:hover{background:var(--bevel-brass-soft)}.index-grid strong{display:block;font-family:var(--bevel-font-serif);font-size:23px;margin:6px 0}.local-result:empty{display:none}.local-result{font-size:12px;color:var(--bevel-teal);padding-top:12px}
+@media(max-width:520px){.specimen{padding:26px 20px;min-height:580px}h1{font-size:32px}.cols{grid-template-columns:1fr}.overlay-scene{padding:25px 18px}.micromodal__inner{padding:34px 25px 25px}.micromodal__heading{font-size:29px}.drawer-scene{padding:0;grid-template-columns:1fr}.drawer-underlay{display:none}.drawer-panel{border-left:0}.setting{grid-template-columns:1fr;gap:12px;padding:18px 0}.setting>label,.setting>button,.setting>select{justify-self:start}.sidebar-layout{grid-template-columns:170px 1fr}.sidebar-content{padding:28px 18px}.sidebar-compact{grid-template-columns:62px 1fr}.sidebar-content h1{font-size:27px}.wizard{grid-template-columns:1fr;gap:15px}.wizard-steps{display:flex;border:0;border-bottom:1px solid var(--bevel-line);gap:20px}.wizard-step{padding-bottom:16px;font-size:11px}.wizard-step b{margin-bottom:4px}.stat-grid{grid-template-columns:1fr}.stat{padding:18px 0}.stat+.stat{border-left:0;border-top:1px solid var(--bevel-line)}.stat-value{margin:6px 0;font-size:30px}.stat .sparkline{display:none}.stat{display:grid;grid-template-columns:1fr 1fr;align-items:center}.stat>small{grid-column:2}.filter-row{grid-template-columns:28px 1fr 1fr 25px;gap:5px}.filter-row>input{grid-column:2/4}.filter-row>button{grid-column:4;grid-row:1/3}.filter-row .bevel-select__field{font-size:11px;padding-left:5px;padding-right:20px}.split-work{grid-template-columns:120px 5px 1fr}.split-detail{padding:20px 15px}.split-detail h2{font-size:25px}.split-list{padding:5px}.split-list button{padding:14px 8px;font-size:12px}.richclay-editor{padding:22px}.kanban{overflow-x:auto;grid-template-columns:repeat(3,185px);padding-bottom:12px}.hcms-context{padding:0;grid-template-columns:1fr}.hcms-preview{display:none}.hcms-shell{border:0;width:100%;height:720px}.diff-split{grid-template-columns:1fr}.diff-split>div+div{border:0;border-top:1px solid var(--bevel-line)}.qc-stage>img{height:230px}.pad{padding:20px}.anchor-stage{padding:20px}.menu{max-width:100%}.toast-space{padding:15px}.toolbar .bevel-input{width:100%}}
+body[data-component="tree-view"] .tree summary{padding:7px 10px}body[data-component="tree-view"] .tree button{padding:7px 12px}body[data-component="tree-view"] .specimen>header{margin-bottom:22px}
+body[data-component="toast-stack"] .specimen>header{margin-bottom:22px}body[data-component="toast-stack"] .toast-space{padding:16px;gap:9px}body[data-component="toast-stack"] .toast{padding:12px}body[data-component="toast-stack"] .toast .bevel-button{padding:2px 8px;margin-top:4px}body[data-component="toast-stack"] .actions{margin-top:18px}
+body[data-component="column-manager"] .panel .pad{padding:16px 20px}body[data-component="column-manager"] .panel h2{font-size:26px}body[data-component="column-manager"] .panel .note{margin-top:8px}body[data-component="column-manager"] .column-item{padding:8px 12px}body[data-component="column-manager"] .column-item .bevel-button{padding:2px 7px;font-size:12px}
+body[data-component="filter-builder"] .specimen{padding-top:28px;padding-bottom:26px}body[data-component="filter-builder"] .specimen>header{margin-bottom:20px}body[data-component="filter-builder"] .panel.pad{padding:18px}body[data-component="filter-builder"] td{padding:10px 12px}body[data-component="filter-builder"] .actions{margin-top:16px}
+body[data-component="upload-dropzone"] [data-ref-state="crop"] .qc-stage>img{height:235px}
+body[data-component="rich-text-toolbar"] .richclay-link-dialog{position:absolute;z-index:4;top:247px;right:56px;width:365px;box-shadow:var(--bevel-shadow)}body[data-component="rich-text-toolbar"] [data-ref-state="link"] .richclay-editor{min-height:290px}body[data-component="rich-text-toolbar"] [data-ref-state="floating"] .richclay-editor{padding:23px}body[data-component="rich-text-toolbar"] .richclay-editor p{font-size:14px;line-height:1.65}
+@media(max-width:520px){body[data-component="rich-text-toolbar"] .richclay-link-dialog{top:265px;right:30px;width:calc(100% - 60px)}body[data-component="rich-text-toolbar"] .richclay-editor{padding:20px}body[data-component="rich-text-toolbar"] .richclay-editor blockquote{font-size:19px;margin:16px 0}body[data-component="rich-text-toolbar"] [data-ref-state="floating"] .specimen>header{margin-bottom:18px}body[data-component="wizard-shell"] .specimen>header{margin-bottom:20px}body[data-component="wizard-shell"] .wizard-step small{display:none!important}body[data-component="wizard-shell"] .wizard .actions{margin-top:18px}body[data-component="pagination"] td{padding:10px 8px}body[data-component="selectable-cards"] .choice{padding:17px}body[data-component="selectable-cards"] .specimen>header{margin-bottom:20px}}
+.hcms-shell-body{padding:22px}.hcms-shell-header{margin-bottom:18px}.hcms-form{gap:13px}.hcms-field{gap:5px}.hcms-field textarea{min-height:32px;padding:5px 8px;font-size:12px;line-height:1.6}.hcms-object{padding-top:13px}.hcms-object-fields{gap:10px}.hcms-card{position:relative;padding:11px}.hcms-card-controls{position:absolute;top:3px;right:4px}.hcms-card-controls .bevel-button{font-size:10px;padding:0 5px}.hcms-upload img{height:51px;width:78px}.hcms-shell-footer{margin-top:15px;padding-top:15px}.hcms-shell-error{margin-bottom:12px}
+.choice{width:100%;position:relative}.option.bevel-checkbox{width:100%;align-items:center}.column-item .bevel-checkbox{align-items:center}.setting .bevel-toggle{justify-self:end}@media(max-width:520px){.setting .bevel-toggle{justify-self:start}}
+.choice{padding:18px 22px}.choice:has(:disabled){opacity:.75}
+
+.qc-stage[data-crop-ratio="16/9"]{container-type:inline-size;--crop-width:min(70cqw,350px);--crop-height:calc(var(--crop-width) * 9 / 16);--crop-left:calc((100cqw - var(--crop-width)) / 2);--crop-top:calc((100% - var(--crop-height)) / 2)}
+.qc-stage[data-crop-ratio="16/9"] .qc-box{left:var(--crop-left);top:var(--crop-top);width:var(--crop-width);height:var(--crop-height);aspect-ratio:16/9}
+.qc-stage[data-crop-ratio="16/9"] .qc-dim{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,var(--crop-left) var(--crop-top),var(--crop-left) calc(var(--crop-top) + var(--crop-height)),calc(var(--crop-left) + var(--crop-width)) calc(var(--crop-top) + var(--crop-height)),calc(var(--crop-left) + var(--crop-width)) var(--crop-top),var(--crop-left) var(--crop-top))}
+.option strong{display:block;font-weight:500}.option small{display:block}