@panphora/bevel 0.1.0

package/examples/components/reference/fixtures/host.js

@@ -0,0 +1,47 @@
+(() => {
+  const params = new URLSearchParams(location.search);
+  const states = [...document.querySelectorAll('[data-ref-state]')];
+  const keys = states.map(el => el.dataset.refState);
+  const theme = params.get('theme') === 'dark' ? 'dark' : 'light';
+  document.documentElement.classList.remove('light', 'dark');
+  document.documentElement.classList.add(theme);
+  document.documentElement.dataset.theme = theme;
+  window.referenceSetState = (key) => {
+    if (!keys.includes(key)) return;
+    states.forEach(el => { el.hidden = el.dataset.refState !== key; });
+    document.body.dataset.activeState = key;
+    const select = document.getElementById('reference-state');
+    if (select) select.value = key;
+    document.dispatchEvent(new CustomEvent('reference:state', { detail: { state: key } }));
+  };
+  window.referenceSetState(params.get('state') || keys[0]);
+  document.addEventListener('click', event => {
+    const trigger = event.target.closest('[data-ref-next]');
+    if (trigger) window.referenceSetState(trigger.dataset.refNext);
+  });
+  if (params.get('embed') !== '1') {
+    const nav = document.createElement('nav');
+    nav.id = 'reference-controls';
+    nav.setAttribute('aria-label', 'Reference preview controls');
+    nav.style.cssText = 'display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--bevel-line);font:13px var(--bevel-font-sans);background:var(--bevel-surface)';
+    const label = document.createElement('label');
+    label.textContent = 'Preview state ';
+    const select = document.createElement('select');
+    select.id = 'reference-state';
+    keys.forEach(key => select.add(new Option(key.replaceAll('-', ' '), key)));
+    select.value = document.body.dataset.activeState;
+    select.addEventListener('change', () => window.referenceSetState(select.value));
+    label.append(select);
+    const mode = document.createElement('button');
+    mode.type = 'button';
+    mode.textContent = 'Switch light / dark';
+    mode.addEventListener('click', () => {
+      const value = document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark';
+      document.documentElement.dataset.theme = value;
+      document.documentElement.classList.remove('light', 'dark');
+      document.documentElement.classList.add(value);
+    });
+    nav.append(label, mode);
+    document.body.prepend(nav);
+  }
+})();

package/examples/components/reference/fixtures/static-host.js

@@ -0,0 +1,39 @@
+(() => {
+  const params = new URLSearchParams(location.search);
+  const states = [...document.querySelectorAll('[data-ref-state]')];
+  const keys = states.map(el => el.dataset.refState);
+  const setTheme = value => {
+    document.documentElement.classList.remove('light', 'dark');
+    document.documentElement.classList.add(value);
+    document.documentElement.dataset.theme = value;
+  };
+  setTheme(params.get('theme') === 'dark' ? 'dark' : 'light');
+  window.referenceSetState = key => {
+    if (!keys.includes(key)) return;
+    states.forEach(el => { el.hidden = el.dataset.refState !== key; });
+    document.body.dataset.activeState = key;
+    const select = document.getElementById('reference-state');
+    if (select) select.value = key;
+  };
+  window.referenceSetState(params.get('state') || keys[0]);
+  if (params.get('embed') !== '1') {
+    const nav = document.createElement('nav');
+    nav.id = 'reference-controls';
+    nav.setAttribute('aria-label', 'Static component preview controls');
+    nav.style.cssText = 'display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px 20px;border-bottom:1px solid var(--bevel-line);font:13px var(--bevel-font-sans);background:var(--bevel-surface)';
+    const label = document.createElement('label');
+    label.textContent = 'Static UI · Preview state ';
+    const select = document.createElement('select');
+    select.id = 'reference-state';
+    keys.forEach(key => select.add(new Option(key.replaceAll('-', ' '), key)));
+    select.value = document.body.dataset.activeState;
+    select.addEventListener('change', () => window.referenceSetState(select.value));
+    label.append(select);
+    const mode = document.createElement('button');
+    mode.type = 'button';
+    mode.textContent = 'Switch light / dark';
+    mode.addEventListener('click', () => setTheme(document.documentElement.dataset.theme === 'dark' ? 'light' : 'dark'));
+    nav.append(label, mode);
+    document.body.prepend(nav);
+  }
+})();

package/examples/components/reference/parent/CHANGES.md

@@ -0,0 +1,179 @@
+# Parent: feedback applied
+
+All 33 references are static. The 19 selected Astra designs and 12 selected Parent designs remain their starting points. Saved and Kanban are new. Original sets are preserved in the previous run and its asset bundle.
+
+## Modal
+
+The selected Astra form with the original diagonal close corner. Its generous field spacing keeps the form easy to read.
+
+Requested: Keep the diagonal close from Hyperclay.
+
+## Popover menu
+
+The selected compact menu, aligned beneath its trigger. Shortcut hints stay at the right edge.
+
+## Drawer
+
+The selected full height invoice panel with the diagonal close corner. The line items and footer retain their room.
+
+Requested: Use the same source close corner as the modal.
+
+## Popconfirm
+
+The selected compact confirmation, now with a nub aligned to the remove action. The clear frame adds some visual weight.
+
+Requested: Keep Parent and add a nub pointing at the affected action.
+
+## Combobox
+
+The selected two line person rows with generous spacing. It takes more height to keep names and roles distinct.
+
+## Multi-select picker
+
+The selected tags, count and separate change action. It gives the selection context at the cost of extra controls.
+
+## Selectable cards
+
+The selected stacked choices with a prominent active fill. Longer explanations stay aligned but take more height.
+
+## Upload dropzone
+
+The selected compact drop target and file queue. The crop state stays in the modal family.
+
+## Inline edit
+
+The chosen open layout with the title itself becoming a single line editor. A thin underline marks editing without adding a field container.
+
+Requested: Use Richclay as the future editing owner.
+
+## Settings rows
+
+The selected open settings rows, separated by rules. Labels and controls stay aligned with little surrounding chrome.
+
+Requested: Keep the higher contrast.
+
+## Form error summary
+
+The selected error notice above an open form. It makes the correction path clear without another outer container.
+
+Requested: Keep the higher contrast and fewer containers.
+
+## Split button
+
+One shared secondary face and outer bevel. Both a single line and a slight inset divider are available in the state selector.
+
+Requested: Use matching gray secondary halves, with no right bevel on the left half. Compare both dividers below.
+
+## Sidebar nav
+
+The compact Parent navigation with Jules Park’s identity footer. The collapse arrow now sits at the top right.
+
+Requested: Bring Astra’s identity footer into Parent and move the collapse arrow to the top right.
+
+## App toolbar
+
+The selected Astra toolbar with compact icon actions. Every toolbar button uses the secondary material.
+
+Requested: Use icons and darker secondary buttons throughout the toolbar.
+
+## Breadcrumbs
+
+The selected open path above the document. Quiet separators leave the page title in charge.
+
+## Pagination
+
+The selected explicit pager beside a table range. Page numbers, boundaries and unavailable actions stay visible.
+
+## Tree view
+
+The Parent folder structure with a thinner active row, outside spacing and a gold left edge. It preserves the more generous rhythm.
+
+Requested: Make the selected row thinner, keep the spacing through margins and add the gold left edge.
+
+## Wizard shell
+
+The selected open wizard with clearly numbered squares. The active square reverses the foreground and background for contrast.
+
+Requested: Keep Astra’s open layout and bring in Parent’s clearer step squares.
+
+## Toast stack
+
+The selected notices with consistent icon, message and close columns. The left accent carries the type of feedback.
+
+## Persistent action banner
+
+The selected banner with its accent moved to the left. The message and action remain together above the work.
+
+Requested: Use the left border highlight consistently.
+
+## Save-status indicator
+
+A small rounded Saved chip at the lower right, with a quiet teal gray background. It leaves the document header clear.
+
+Requested: Only Saved matters here. Keep it small and out of the way, like HTML Clay’s indicator.
+
+## Code block
+
+The selected minimal code frame. A slim file header and open page keep the code prominent.
+
+Requested: Keep the higher contrast.
+
+## Diff view
+
+The selected structured diff with hunk labels and changed word emphasis. It carries more detail than a plain change list.
+
+## Activity feed
+
+The selected open timeline with connected events. Identity, time and detail stay together without a card around each event.
+
+Requested: Keep the higher contrast and fewer containers.
+
+## Stat tiles
+
+The selected open metric strip with one small trend per metric. Rules divide the figures without separate cards.
+
+Requested: Keep the higher contrast and fewer containers.
+
+## Avatar group
+
+The selected compact overlap stack with initials, presence and overflow. The accompanying member rows explain the people.
+
+## Small charts
+
+The selected open charts with directly labeled values. The charts use page space instead of another panel.
+
+Requested: Keep the higher contrast and fewer containers.
+
+## Filter builder
+
+The selected rule layout with its concrete matching result below. The conditions remain grouped in one focused panel.
+
+Requested: Keep Astra’s stronger spacing, colors and layout.
+
+## Column manager
+
+The selected compact ordering menu with visibility choices and pin treatment. It keeps table configuration in one narrow surface.
+
+## Editable grid cells
+
+The selected open table with the amount edited inside its cell. The row remains visible during the edit.
+
+Requested: Keep the higher contrast and fewer containers.
+
+## Split panes
+
+The selected list and detail composition with a strong divider. It preserves the clear separation between the two areas.
+
+## Rich text toolbar
+
+The selected Richclay toolbar and document typography. The controls sit together above the content.
+
+## Kanban board
+
+An editorial three column board with task covers, priorities, checklists, blockers and a task inspector. It gives each task room, so the board is taller.
+
+Requested: A new, substantial design from each seat. Compare the board, empty and selected task states.
+
+## Verification
+
+Ran: 364 state, theme and width checks passed. Ran: 92 artifact and feedback checks passed, including exact source SVG and computed geometry. Inspected: every default component in both themes, plus the changed controls at full size. The app toolbar grid icon and Richclay inline class were corrected afterward; the 24 affected render checks passed. No application runtime loads in a component. The only script controls the outside preview state and theme.

package/examples/components/reference/parent/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}