@gemboss/ui 0.39.0 → 0.40.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (34) hide show
  1. package/CHANGELOG.md +234 -0
  2. package/README.md +546 -3
  3. package/catalog/editor.html +15 -13
  4. package/catalog/index.html +5047 -1109
  5. package/gemboss-ui.css +3 -3
  6. package/package.json +3 -1
  7. package/parts/components.css +2 -2
  8. package/parts/core.css +1 -1
  9. package/parts/shell.css +2 -2
  10. package/src/assistant/chat-markdown.ts +7 -4
  11. package/src/assistant.css +1 -1
  12. package/src/brand-gem.tsx +19 -0
  13. package/src/brand.tsx +4 -7
  14. package/src/chat-plain.js +2 -2
  15. package/src/editor/controls.tsx +50 -14
  16. package/src/editor/index.ts +3 -3
  17. package/src/editor/panel.tsx +10 -4
  18. package/src/editor/repeater.tsx +86 -8
  19. package/src/editor/swatch.ts +20 -0
  20. package/src/editor-plain.js +1 -1
  21. package/src/editor-repeater.css +1 -1
  22. package/src/editor.css +1 -1
  23. package/src/gemboss-field.css +1 -1
  24. package/src/icons.tsx +11 -0
  25. package/src/index.ts +11 -1
  26. package/src/service-switcher.css +1 -1
  27. package/src/service-switcher.tsx +108 -31
  28. package/src/shell.css +1 -1
  29. package/src/site.css +1 -0
  30. package/src/site.tsx +50 -0
  31. package/src/team-chat-data.ts +79 -0
  32. package/src/team-chat.css +1 -0
  33. package/src/team-chat.tsx +825 -0
  34. package/src/ui.css +1 -1
package/src/editor.css CHANGED
@@ -1 +1 @@
1
- @keyframes gemboss-editor-enter{0%{opacity:0}to{opacity:1}}@keyframes gemboss-editor-toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes gemboss-pagepicker-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes gemboss-flyout-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes gemboss-statusbar-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.gemboss-platform-main:has(.gemboss-editor){box-sizing:border-box;height:100dvh;min-height:0;padding-top:0;overflow:hidden}.gemboss-editor{--gemboss-editor-inset: 5px;position:fixed;inset:0;box-sizing:border-box;display:flex;flex-direction:column;background:var(--gemboss-canvas);overflow:hidden;z-index:400;animation:gemboss-editor-enter .26s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-editor{animation:none}}.gemboss-editor--embedded{position:relative;inset:auto;height:100%;min-height:0;z-index:auto;animation:none}.gemboss-editor-toast{position:absolute;top:62px;left:50%;transform:translate(-50%);z-index:500;display:flex;align-items:center;gap:12px;max-width:min(560px,92vw);padding:12px 12px 12px 16px;background:var(--gemboss-text);color:#fff;border-radius:12px;font-size:13px;line-height:1.4;box-shadow:var(--gemboss-shadow-overlay);animation:gemboss-editor-toast-in .24s cubic-bezier(.16,1,.3,1)}.gemboss-editor-toast strong{font-weight:600}.gemboss-editor-toast button{flex:0 0 auto;border:0;background:#ffffff29;color:#fff;width:22px;height:22px;border-radius:8px;cursor:pointer;font-size:12px;line-height:1;transition:background var(--gemboss-transition-fast) ease}.gemboss-editor-toast button:hover{background:#ffffff47}.gemboss-editor-toast button:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (prefers-reduced-motion: reduce){.gemboss-editor-toast{animation:none}}.gemboss-editor-topbar{flex:0 0 auto;height:var(--gemboss-editor-topbar-h, 52px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider)}@media (min-width: 1001px){.gemboss-editor-topbar--theme{grid-template-columns:auto auto auto;justify-content:space-between}.gemboss-editor-topbar.gemboss-pageedit-top{grid-template-columns:auto fit-content(100%) auto}}.gemboss-editor-tb-left{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-self:center}.gemboss-editor-topbar--theme .gemboss-editor-tb-center,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-center{min-width:0}.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pageedit-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1200px){.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-name,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-sec-type{display:none}}.gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;min-width:0;justify-self:end}.gemboss-editor-back{border:0;background:transparent;padding:0;font-family:inherit;font-size:18px;line-height:1;color:var(--gemboss-text);text-decoration:none;cursor:pointer;width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--gemboss-radius-md);transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-back:hover{background:var(--gemboss-hover)}.gemboss-editor-back:active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}.gemboss-editor-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-name{font-family:var(--gemboss-serif);font-size:15px;font-weight:600}.gemboss-editor-savestate{display:inline-flex;align-items:center;gap:6px;font-size:var(--gemboss-fs-micro);font-weight:500;line-height:1;padding:4px 8px;border-radius:var(--gemboss-radius-full);white-space:nowrap;transition:opacity .2s ease}.gemboss-editor-savestate.is-idle,.gemboss-editor-savestate.is-saving{color:var(--gemboss-text-muted)}.gemboss-editor-savestate.is-saved{color:var(--gemboss-success-strong);background:var(--gemboss-success-soft)}.gemboss-editor-savestate .gemboss-narr-spin{width:10px;height:10px;border-width:1.5px;border-color:var(--gemboss-divider);border-top-color:currentColor}@media (max-width: 760px){.gemboss-editor-savestate.is-saved{display:none}}.gemboss-editor-tb-ghost{font-size:13px;color:var(--gemboss-text);text-decoration:none;padding:8px 12px;border:1px solid var(--gemboss-divider);border-radius:8px;white-space:nowrap;cursor:pointer;background:var(--gemboss-surface);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-editor-tb-ghost:hover{border-color:var(--gemboss-primary)}.gemboss-editor-tb-ghost:active{background:var(--gemboss-active-bg);border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-tb-ghost:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-ghost:disabled{opacity:.5;cursor:default;border-color:var(--gemboss-divider);color:var(--gemboss-text-muted)}.gemboss-editor-tb-publish{background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;padding:8px 20px;font-size:14px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background var(--gemboss-transition-fast) ease,filter var(--gemboss-transition-fast) ease}.gemboss-editor-tb-publish:hover{background:var(--gemboss-primary-dark)}.gemboss-editor-tb-publish:active{background:var(--gemboss-primary-dark);filter:brightness(.94)}.gemboss-editor-tb-publish:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-publish:disabled{opacity:.5;cursor:default;filter:none}.gemboss-editor-tb-undo{font-size:15px}.gemboss-editor-publish{position:relative;display:inline-flex;align-items:stretch}.gemboss-editor-publish-main{border-radius:8px 0 0 8px}.gemboss-editor-publish-caret{border-radius:0 8px 8px 0;padding:8px 12px;font-size:12px;line-height:1;border-left:1px solid color-mix(in srgb,#fff 24%,transparent);display:inline-flex;align-items:center;justify-content:center}.gemboss-editor-publish-caret.active{filter:brightness(.94)}.gemboss-editor-menu-label{padding:6px 12px 2px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--gemboss-text-muted);white-space:nowrap}.gemboss-editor-overflow{position:relative;display:inline-flex}.gemboss-editor-overflow-trigger{font-size:18px;line-height:1}.gemboss-editor-menu{position:fixed;z-index:500;min-width:210px;max-height:calc(100vh - 16px);overflow-y:auto;padding:6px;animation:gemboss-flyout-in var(--gemboss-transition-fast) ease}@media (prefers-reduced-motion: reduce){.gemboss-editor-menu{animation:none}}.gemboss-editor-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:var(--gemboss-radius-md);background:transparent;font:inherit;font-size:13px;color:var(--gemboss-text);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-menu-item:hover{background:var(--gemboss-hover)}.gemboss-editor-menu-item:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:-2px;background:var(--gemboss-hover)}.gemboss-editor-menu-item:disabled{opacity:.45;cursor:default}.gemboss-editor-menu-item:disabled:hover{background:transparent}.gemboss-editor-menu-item.active{color:var(--gemboss-active-fg)}.gemboss-editor-menu-ext{color:var(--gemboss-text-muted)}.gemboss-editor-menu-check{color:var(--gemboss-active-fg);font-weight:600}.gemboss-editor-menu-val{font-size:11px;color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-sm);padding:1px 8px}.gemboss-editor-menu-sep{height:1px;background:var(--gemboss-divider-soft);margin:6px}.gemboss-editor-body{flex:1;min-height:0;display:flex;gap:0;padding:var(--gemboss-editor-inset);box-sizing:border-box}.gemboss-editor-body>.gemboss-ec,.gemboss-editor-body>.gemboss-editor-preview-pane{border:1px solid var(--gemboss-divider);border-radius:16px;overflow:hidden}.gemboss-editor-body>.gemboss-ec{border-right:1px solid var(--gemboss-divider)}.gemboss-ec-tabs{display:flex;gap:var(--ui-space-1);padding:var(--ui-space-2) var(--gemboss-ec-inset, 12px);border-bottom:1px solid var(--gemboss-divider);flex:none;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}.gemboss-ec-tabs>[role=tab]{flex:1 1 0;min-width:max-content;white-space:nowrap;font:inherit;font-size:12px;font-weight:600;cursor:pointer;padding:var(--ui-space-2);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--gemboss-text-muted);box-shadow:none}.gemboss-ec-tabs>[role=tab]:hover:not([aria-selected=true]){color:var(--gemboss-text);background:var(--gemboss-primary-soft)}.gemboss-ec-tabs>[role=tab]:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.gemboss-ec-tabs>[role=tab][aria-selected=true]{border-color:var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:inset 0 -2px 0 var(--gemboss-primary)}@media (max-width: 47.9975em){.gemboss-ec-tabs>[role=tab]{min-height:44px}}.gemboss-pv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--gemboss-preview-canvas);overflow:hidden}.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:calc(var(--ui-btn-h) - 2px);height:calc(var(--ui-btn-h) - 2px);border:0;border-radius:0}@media (pointer: coarse),(max-width: 47.9975em){.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:44px;height:44px}}.gemboss-pv-device{border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;width:30px;height:28px;border-radius:8px;color:var(--gemboss-text-muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pv-device svg{display:block}@media (min-width: 1001px){.gemboss-editor-topbar--theme .gemboss-pv-device,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-device{width:36px;height:32px;position:relative}.gemboss-editor-topbar--theme .gemboss-pv-device:after,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-device:after{content:"";position:absolute;left:50%;top:50%;width:44px;height:44px;transform:translate(-50%,-50%)}}.gemboss-editor-topbar--theme .gemboss-pv-devices .gemboss-pv-device:after,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pv-devices .gemboss-pv-device:after{content:none}.gemboss-editor-tb-tools{display:flex;align-items:center;gap:16px;min-width:0}@media (max-width: 1200px){.gemboss-editor-tb-tools{display:none}}.gemboss-pv-device:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-pv-device:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pv-device.active{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg);background:var(--gemboss-active-bg)}.gemboss-pagepicker{position:relative;display:inline-flex}.gemboss-pagepicker-trigger{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 12px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;font-size:13px;font-weight:600;color:var(--gemboss-text);line-height:1;transition:border-color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pagepicker-trigger:hover{border-color:var(--gemboss-primary)}.gemboss-pagepicker-trigger[aria-expanded=true]{border-color:var(--gemboss-primary);background:var(--gemboss-active-bg, var(--gemboss-danger-soft))}.gemboss-pagepicker-trigger-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-trigger-icon svg{display:block}.gemboss-pagepicker-trigger-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-pagepicker-caret{font-size:9px;color:var(--gemboss-text-muted);margin-left:1px}.gemboss-pagepicker-menu{position:fixed;z-index:500;padding:8px;display:flex;flex-direction:column;gap:6px;animation:gemboss-pagepicker-in .14s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-pagepicker-menu{animation:none}}.gemboss-pagepicker-search{position:relative;display:flex;align-items:center}.gemboss-pagepicker-search-icon{position:absolute;left:10px;display:inline-flex;color:var(--gemboss-text-muted);pointer-events:none}input.gemboss-pagepicker-search-input{width:100%;padding-left:32px}.gemboss-pagepicker-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;max-height:320px;overflow-y:auto}.gemboss-pagepicker-item{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;cursor:pointer;text-align:left;padding:8px 12px;border-radius:var(--gemboss-radius-md);font-size:var(--gemboss-fs-body);color:var(--gemboss-text)}.gemboss-pagepicker-item:hover,.gemboss-pagepicker-item:focus-visible{background:var(--gemboss-hover, rgba(0,0,0,.05));outline:none}.gemboss-pagepicker-item.active{background:var(--gemboss-active-bg, var(--gemboss-danger-soft));color:var(--gemboss-active-fg);font-weight:600}.gemboss-pagepicker-item-icon{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-item.active .gemboss-pagepicker-item-icon{color:var(--gemboss-active-fg)}.gemboss-pagepicker-item-icon svg{display:block}.gemboss-pagepicker-item-label{flex:1;min-width:0}.gemboss-pagepicker-check{color:var(--gemboss-active-fg);font-size:13px;flex:0 0 auto}.gemboss-pagepicker-empty{padding:12px;font-size:13px;color:var(--gemboss-text-muted)}.gemboss-pagepicker-note{padding:8px 12px 12px;font-size:12px;line-height:1.5;color:var(--gemboss-text-muted);border-bottom:1px solid var(--gemboss-divider)}.gemboss-pagepicker-note-link{color:var(--gemboss-primary);font-weight:600;text-decoration:none}.gemboss-pagepicker-note-link:hover{text-decoration:underline}.gemboss-pagepicker-back{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:4px 6px 8px;margin-bottom:2px;border-bottom:1px solid var(--gemboss-divider-soft, #edeff2);font-size:13px;font-weight:600;color:var(--gemboss-text)}.gemboss-pagepicker-back:hover{color:var(--gemboss-active-fg)}.gemboss-pagepicker-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pagepicker-back-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-back-icon svg{display:block}.gemboss-pagepicker-drill{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-drill svg{display:block}.gemboss-pagepicker-thumb{width:30px;height:30px;flex:0 0 auto;border-radius:8px;object-fit:cover;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg, #ffffff)}.gemboss-pagepicker-thumb--default{display:inline-flex;align-items:center;justify-content:center;color:var(--gemboss-text-muted)}.gemboss-pagepicker-thumb--default svg{width:16px;height:16px}.gemboss-pv-stage{flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center;padding:0}.gemboss-pv-frame{background:var(--gemboss-surface);overflow:hidden;height:100%;position:relative}.gemboss-pv-frame.desktop{width:100%;max-width:none}.gemboss-pv-frame.gemboss-pv-fit.desktop{position:absolute;top:0;left:0;width:var(--gemboss-pv-w, 100%);height:var(--gemboss-pv-h, 100%);transform:scale(calc(var(--gemboss-pv-scale, 1) * var(--gemboss-pv-user-zoom, 1)));transform-origin:top left}.gemboss-pv-frame.mobile{width:390px;flex:0 0 390px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:20px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-frame.tablet{width:768px;flex:0 0 768px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:16px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--gemboss-surface);transition:opacity .18s ease}.gemboss-pv-empty{margin:auto;text-align:center;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:8px}.gemboss-pv-empty-art{font-size:40px;line-height:1;opacity:.7}.gemboss-pv-empty-title{font-family:var(--gemboss-serif);font-size:18px;margin:0}.gemboss-pv-empty-sub{font-size:13px;color:var(--gemboss-text-muted);margin:0;line-height:1.5}.gemboss-pv-empty-cta{margin-top:6px;font-size:13px;font-weight:600;color:var(--gemboss-active-fg);text-decoration:none}.gemboss-pv-empty-cta:hover{text-decoration:underline}.gemboss-pv-spin{width:22px;height:22px;border:2px solid var(--gemboss-divider-soft);border-top-color:var(--gemboss-primary);border-radius:50%;animation:gemboss-spin .7s linear infinite}.gemboss-editor-resizer{flex:0 0 var(--gemboss-editor-inset);align-self:stretch}body.ui-resizing .gemboss-pv-iframe{pointer-events:none}.gemboss-editor-chat-toggle{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);border-radius:var(--gemboss-radius-md);cursor:pointer;font-size:14px;line-height:1;color:var(--gemboss-text-muted);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-chat-toggle:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-chat-toggle.collapsed{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle svg{display:block}.gemboss-editor-body .gemboss-ec{transition:flex-basis .28s cubic-bezier(.16,1,.3,1),width .28s cubic-bezier(.16,1,.3,1)}body.ui-resizing .gemboss-editor-body .gemboss-ec{transition:none;will-change:flex-basis,width}body.ui-resizing .gemboss-editor-body .gemboss-pv{will-change:flex-basis}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{border-width:0;overflow:hidden}.gemboss-editor-body.is-chat-collapsed>.gemboss-ec{visibility:hidden}.gemboss-editor-body.is-chat-collapsed .gemboss-editor-resizer{display:none}.gemboss-pagepicker-list{scrollbar-width:thin;scrollbar-color:rgba(31,30,29,.22) transparent}.gemboss-pagepicker-list::-webkit-scrollbar{width:9px}.gemboss-pagepicker-list::-webkit-scrollbar-track{background:transparent}.gemboss-pagepicker-list::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid transparent;background-clip:content-box}@media (max-width: 1000px){.gemboss-editor-body{flex-direction:column;gap:var(--gemboss-editor-inset)}}@media (max-width: 1000px){.gemboss-editor-resizer{display:none}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{max-height:0;min-height:0}.gemboss-editor-topbar{height:auto;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"left right" "center center";gap:8px 12px;padding:8px 12px}.gemboss-editor-tb-left{grid-area:left}.gemboss-editor-tb-right{padding-block:6px;grid-area:right;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-center{grid-area:center;justify-self:stretch;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-right::-webkit-scrollbar,.gemboss-editor-tb-center::-webkit-scrollbar{display:none}.gemboss-editor-tb-right>*{flex:0 0 auto}.gemboss-editor-tb-right>.gemboss-editor-tb-publish{position:sticky;right:0;z-index:1;box-shadow:-8px 0 8px -6px color-mix(in srgb,var(--gemboss-text) 18%,transparent)}.gemboss-editor-tb-name{display:none}.gemboss-editor-tb-ghost{padding:6px 12px;font-size:12px}.gemboss-editor-tb-publish{padding:8px 16px;font-size:13px}}@media (max-width: 640px){.gemboss-pv-frame.mobile{width:100%;max-width:390px;flex:0 1 auto;margin:8px 0}.gemboss-pv-frame.tablet{width:100%;max-width:768px;flex:0 1 auto;margin:8px 0}}.gemboss-editor-preview-pane{display:flex}.gemboss-editor-mobile-tabs{display:none}.gemboss-editor-dock{position:absolute;top:0;right:0;bottom:0;width:320px;max-width:90%;z-index:5;overflow-y:auto;background:var(--gemboss-surface);border-left:1px solid var(--gemboss-divider);box-shadow:var(--gemboss-shadow-overlay)}.gemboss-editor-preview-pane:has(>.gemboss-editor-dock){position:relative}:where(.gemboss-editor-body>.gemboss-ec){position:relative;width:var(--gemboss-chat-w, 384px);flex:0 0 var(--gemboss-chat-w, 384px);display:flex;flex-direction:column;background:var(--gemboss-panel-bg);border-right:1px solid var(--gemboss-divider);overflow:hidden}:where(.gemboss-editor-preview-pane){flex:1;min-width:0}@media (max-width: 1000px){:where(.gemboss-editor-body>.gemboss-ec){width:auto;flex:0 0 auto;max-height:48%}}@media (max-width: 760px){.gemboss-editor-resizer{display:none}.gemboss-editor-body .gemboss-ec{flex:1 1 auto;width:100%;min-width:0;max-height:none;border-right:none}.gemboss-editor-body .gemboss-editor-preview-pane{flex:1 1 auto}.gemboss-editor-body[data-mobile-pane=chat] .gemboss-editor-preview-pane,.gemboss-editor-body[data-mobile-pane=preview] .gemboss-ec{display:none}.gemboss-editor-mobile-tabs{display:flex;flex:0 0 auto;gap:6px;padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--gemboss-surface);border-top:1px solid var(--gemboss-divider)}.gemboss-editor-mobile-tab{flex:1 1 0;height:44px;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.gemboss-editor-mobile-tab.active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}}.gemboss-editor-statusbar{position:absolute;top:60px;right:14px;z-index:480;max-width:min(380px,calc(100vw - 28px));padding:8px 16px;font-size:12px;line-height:1.4;color:var(--gemboss-text-muted);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;box-shadow:var(--gemboss-shadow-raised);pointer-events:none;animation:gemboss-statusbar-in .18s cubic-bezier(.16,1,.3,1) both}.gemboss-editor-statusbar.done{background:#eaf6ef;color:#1f7a4d;border-color:var(--gemboss-success-border)}.gemboss-editor-statusbar.error{background:#fdecea;color:var(--gemboss-danger);border-color:#f3c2bb}@media (pointer: coarse){.gemboss-pv-device{width:38px;height:38px;font-size:16px}.gemboss-editor-back{width:44px;height:44px;font-size:20px}.gemboss-editor-chat-toggle{width:44px;height:44px;font-size:16px}}@media (pointer: coarse){.gemboss-editor-tb-ghost{padding:8px 16px;min-height:44px}.gemboss-editor-tb-publish{padding:12px 20px;min-height:44px}.gemboss-pagepicker-trigger{min-height:44px}}@media (pointer: coarse){.gemboss-ec-tab{min-height:44px}}@media (max-width: 760px){.gemboss-editor-chat-toggle{display:none}}.gemboss-pageedit{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--gemboss-panel-bg,#ffffff);z-index:320}.gemboss-pageedit-top{background:#fff;border-bottom:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-pageedit .gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-content:center}.gemboss-pageedit .gemboss-editor-tb-right{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-pageedit .gemboss-editor-tb-right>:first-child{margin-inline-start:auto}.gemboss-pageedit .gemboss-editor-tb-left{--gemboss-tb-gap:12px;display:flex;align-items:center;gap:var(--gemboss-tb-gap);min-width:0}.gemboss-pageedit-title{font-family:var(--gemboss-serif,inherit);font-size:15px;font-weight:600;color:var(--gemboss-text,#1b1c1e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}.gemboss-pageedit-notice{display:flex;flex-wrap:wrap;align-items:center;gap:12px;flex:0 0 auto;padding:12px 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider);color:var(--gemboss-text);font-size:13px;line-height:1.5}.gemboss-pageedit-notice span{flex:1 1 240px;min-width:0}.gemboss-pageedit-notice button{min-height:44px;padding:8px 12px;flex:0 0 auto;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);color:var(--gemboss-text);cursor:pointer}@media (max-width:900px){.gemboss-pageedit-top{height:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "right" "center";gap:8px;padding:8px 12px}.gemboss-pageedit-top .gemboss-editor-tb-right{flex-wrap:wrap;overflow:visible}.gemboss-pageedit-top .gemboss-editor-tb-right button{min-height:44px}.gemboss-pageedit .gemboss-editor-tb-left{width:100%;overflow:hidden;flex-wrap:wrap}.gemboss-pageedit .gemboss-editor-tb-right,.gemboss-pageedit .gemboss-editor-tb-center{justify-self:stretch;justify-content:flex-start;max-width:100%;overflow-x:auto}.gemboss-pageedit-top .gemboss-editor-tb-center{flex-wrap:wrap;row-gap:8px;overflow:visible}}.gemboss-sec-type{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:12px;background:#f1efe9;color:var(--gemboss-text-muted);text-transform:capitalize}.gemboss-sec-insert-wrap{position:relative}.gemboss-sec-insert-menu{position:absolute;top:42px;right:0;width:280px;max-height:60vh;overflow-y:auto;padding:6px;z-index:80}.gemboss-sec-insert-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font-size:13px;color:var(--gemboss-text,#1b1c1e);transition:background .12s ease,color .12s ease}.gemboss-sec-insert-item:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:focus-visible{outline:2px solid var(--gemboss-primary, #1b1c1e);outline-offset:-2px;background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:disabled{opacity:.6;cursor:default}.gemboss-sec-insert-item:disabled:hover{background:transparent}.gemboss-sec-insert-cat{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);text-transform:capitalize}.gemboss-sec-insert-empty{display:block;padding:16px;font-size:13px;color:var(--gemboss-text-muted,#686b71);text-decoration:none}.gemboss-pageedit-scope{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@media (max-width:1200px){.gemboss-pageedit-scope{display:none}}.gemboss-pageedit-pv{flex:1;min-width:0;background:var(--gemboss-preview-canvas);display:flex;justify-content:center;overflow:auto;position:relative}.gemboss-pageedit-pv .gemboss-pv-frame iframe{width:100%;height:100%;border:0;background:#fff;display:block}.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:var(--gemboss-active-bg);border:1px solid var(--gemboss-divider);font-size:12px;color:var(--gemboss-active-fg)}.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:var(--gemboss-active-fg);cursor:pointer;font-size:12px}.gemboss-pageedit-standing{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:#b07d1817;border-bottom:1px solid rgba(176,125,24,.28);font-size:13px;line-height:1.5;color:#7a5710}.gemboss-pageedit-standing code{font-size:12px;background:#b07d1824;border-radius:4px;padding:2px 4px}.gemboss-pageedit-standing button{margin-left:auto;flex:0 0 auto;border:1px solid rgba(176,125,24,.4);background:#fff;color:#7a5710;border-radius:8px;padding:4px 12px;font:inherit;font-weight:600;cursor:pointer}.gemboss-pageedit-standing button:disabled{opacity:.6;cursor:default}.gemboss-picker-backdrop{position:fixed;inset:0;background:#1f1e1d38;z-index:70}.gemboss-picker-head{flex:0 0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--gemboss-divider,#e5e7ea);font-weight:600;font-size:15px}.gemboss-picker-head button{border:0;background:transparent;font-size:15px;cursor:pointer;color:var(--gemboss-text-muted,#686b71)}.gemboss-picker-empty{padding:20px;text-align:center;color:var(--gemboss-text-muted,#686b71);font-size:13px}.gemboss-layers{position:fixed;top:0;left:0;bottom:0;width:300px;background:#fff;border-right:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-layers-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}.gemboss-layer{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:8px;padding:0 4px 0 6px}.gemboss-layer:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:var(--gemboss-active-bg)}.gemboss-layer-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:transparent;border:0;cursor:pointer;text-align:left;padding:8px 4px}.gemboss-layer-type{font-size:13px;font-weight:600;color:var(--gemboss-text,#1b1c1e)}.gemboss-layer-head{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:195px}.gemboss-layer-acts{display:flex;gap:0;flex:0 0 auto}.gemboss-layer-acts button{width:26px;height:26px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--gemboss-text-muted,#686b71);font-size:13px;line-height:1}.gemboss-layer-acts button:hover:not(:disabled){background:var(--gemboss-hover,rgba(0,0,0,.07))}.gemboss-layer-acts button:disabled{opacity:.28;cursor:default}.gemboss-layer-del:hover:not(:disabled){color:#c0392b}@media (pointer: coarse){.gemboss-layer{flex-wrap:wrap}.gemboss-layer-acts{margin-left:auto}.gemboss-layer-acts button{width:44px;height:44px;font-size:15px}.gemboss-layer-main{flex:1 1 140px;min-height:44px;justify-content:center}.gemboss-layer-head{max-width:100%}}.gemboss-layer-grip{flex:0 0 auto;width:12px;margin-right:-2px;color:var(--gemboss-text-muted,#686b71);font-size:11px;letter-spacing:-2px;line-height:1;text-align:center;cursor:grab;user-select:none}.gemboss-layer[draggable=true]{cursor:grab}.gemboss-layer.is-dragging{opacity:.4}.gemboss-layer[data-drop=before]{box-shadow:0 -2px 0 var(--gemboss-primary, #1b1c1e)}.gemboss-layer[data-drop=after]{box-shadow:0 2px 0 var(--gemboss-primary, #1b1c1e)}.gemboss-layer.is-hidden .gemboss-layer-main{opacity:.5}.gemboss-layer-acts .gemboss-layer-eye{display:inline-grid;place-items:center}.gemboss-layer-acts .gemboss-layer-eye[aria-pressed=true]{color:var(--gemboss-text,#1b1c1e)}.gemboss-layers[hidden],.gemboss-settings[hidden],.gemboss-picker-backdrop[hidden]{display:none}.gemboss-settings{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);box-sizing:border-box;background:#fff;border-left:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:-8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-settings-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:20px}.gemboss-settings-grouphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-grouphead>span{font-size:var(--gemboss-fs-caption);font-weight:700;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-gen{border:1px solid var(--gemboss-divider,#e5e7ea);background:var(--gemboss-surface,#fff);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;color:var(--gemboss-text,#1b1c1e);cursor:pointer;white-space:nowrap}.gemboss-settings-gen:hover:not(:disabled){background:var(--gemboss-hover,#eceef2)}.gemboss-settings-gen:disabled{opacity:.55;cursor:default}.gemboss-settings-field{display:flex;flex-direction:column;gap:6px}.gemboss-settings-note{margin:0 0 4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);line-height:1.5}.gemboss-settings-error{margin:0 0 8px;padding:8px 12px;border-radius:8px;font-size:var(--gemboss-fs-caption);line-height:1.45;color:#8a1c1c;background:#fdecec;border:1px solid #f5c2c2}.gemboss-settings-field>span{font-size:var(--gemboss-fs-caption);font-weight:700;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-field :is(input,textarea,select):not([type=color]){width:100%}.gemboss-settings-field small{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71)}.gemboss-settings-field textarea.gemboss-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}.gemboss-settings-handle span{color:var(--gemboss-text-muted,#686b71);white-space:nowrap}.gemboss-settings-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:12px 20px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-cancel{background:transparent;border:1px solid var(--gemboss-divider,#e5e7ea);border-radius:8px;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-save{background:var(--gemboss-primary, #1b1c1e);color:#fff;border:0;border-radius:8px;font-size:13px;font-weight:700;padding:8px 20px;cursor:pointer}.gemboss-settings-save:disabled{opacity:.6;cursor:default}.gemboss-page-section-content :is(button,input,textarea){min-height:44px;min-width:44px}.gemboss-pageedit .gemboss-pv-device{width:44px;height:44px;flex-shrink:0}.gemboss-pageedit .gemboss-ec-dock-body :is(button,input,select){min-height:44px}.gemboss-bundle-look .gemboss-ei-body :is(button,input){min-height:44px}.gemboss-bundle-look .gemboss-ei-body input[type=color]{min-width:44px}.gemboss-page-draft-status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-surface,#fff);color:var(--gemboss-text,#1b1c1e);font-size:12px;line-height:1.5;box-shadow:0 1px 6px #0001}.gemboss-page-draft-status button{min-height:44px;min-width:44px;padding:8px 12px;border:1px solid var(--gemboss-divider);border-radius:6px;background:var(--gemboss-surface,#fff);cursor:pointer}.gemboss-page-draft-status button:hover{background:var(--gemboss-hover,#eceef2)}.gemboss-page-draft-status button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.gemboss-page-draft-status[data-page-preview-state=ready]{pointer-events:none}.gemboss-pageedit .gemboss-pageedit-pv{flex-direction:column;min-height:0;justify-content:flex-start}.gemboss-page-draft-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;justify-content:center}@media (max-width:1000px){.gemboss-pageedit .gemboss-editor-body>.gemboss-ec{flex:0 0 auto;height:44%;min-height:min(520px,76%);max-height:76%}}.gemboss-ei{position:absolute;top:12px;right:12px;z-index:6;width:320px;max-width:calc(100% - 24px);display:flex;flex-direction:column;max-height:calc(100% - 24px);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-xl);box-shadow:var(--gemboss-shadow-overlay);overflow:hidden}.gemboss-ei--docked{position:static;top:auto;right:auto;width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;background:transparent;flex:1;min-height:0}.gemboss-ei-head{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--gemboss-divider)}.gemboss-ec>.gemboss-ei-head{padding-inline:var(--gemboss-ec-inset,12px)}.gemboss-ec .gemboss-ei--docked .gemboss-ei-head{padding-inline:var(--gemboss-ec-inset,12px)}.gemboss-ec .gemboss-ei--docked .gemboss-ei-tabs{margin-inline:var(--gemboss-ec-inset,12px)}.gemboss-ec .gemboss-ei--docked .gemboss-ei-pane{padding-inline:var(--gemboss-ec-inset,16px)}.gemboss-ei-title{font-size:var(--gemboss-fs-body);font-weight:700;line-height:1.2;min-width:0;overflow:hidden}.gemboss-ei-title small{display:block;font-weight:500;font-size:11px;color:var(--gemboss-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gemboss-ei-act,.gemboss-ei-x{margin-left:auto;width:26px;height:26px;flex:none;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);border-radius:6px;display:grid;place-items:center;font-size:14px}.gemboss-ei-x{margin-left:2px;font-size:13px}.gemboss-ei-act:hover,.gemboss-ei-x:hover{background:var(--gemboss-hover);color:var(--gemboss-text)}.gemboss-ei-act:disabled{opacity:.5;cursor:default}.gemboss-ei-tabs{display:flex;gap:2px;margin:8px 12px 0;background:var(--gemboss-panel-bg);padding:4px;border-radius:8px}.gemboss-ei-tab{flex:1;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-weight:600;font-size:12px;padding:6px 4px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px}.gemboss-ei-tab.on{background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:var(--gemboss-shadow-resting)}.gemboss-ei-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:2px 0 4px}.gemboss-ei-body::-webkit-scrollbar{width:9px}.gemboss-ei-body::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid var(--gemboss-surface);background-clip:content-box}.gemboss-ei-pane{padding:4px 16px 6px}.gemboss-ei-note{margin:0 0 8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-hover,#eceef2);border:1px solid var(--gemboss-divider,#e5e7ea);color:var(--gemboss-text-muted,#686b71);font-size:12px;line-height:1.45}.gemboss-ei-grp{border-bottom:1px solid var(--gemboss-divider-soft);padding:12px 0}.gemboss-ei-grp:last-child{border-bottom:none}.gemboss-ei-gh{font-size:13px;line-height:20px;color:var(--gemboss-text);font-weight:650;margin-bottom:8px;display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:0;-webkit-appearance:none}.gemboss-ei-gh:hover{color:var(--gemboss-text)}.gemboss-ei-chev{font-size:9px;width:10px;display:inline-block;color:var(--gemboss-text-muted);transition:transform .12s ease}.gemboss-ei-gh-note{margin-left:6px;font-size:10px;font-weight:500;opacity:.55}.gemboss-ei-gh[data-open=closed]{margin-bottom:0}.gemboss-ei-gh[data-open=closed]~*{display:none}.gemboss-ei-fld{margin-bottom:12px}.gemboss-ei-fld:last-child{margin-bottom:0}.gemboss-ei-fld>label,.gemboss-ei-lbl{display:block;font-size:13px;font-weight:500;color:var(--gemboss-text);margin-bottom:6px}.gemboss-ei-lbl>label{margin:0}.gemboss-ei-help{display:none}:is(.gemboss-ei-grp,.gemboss-ei-group) :is(.gemboss-ei-fld>label,.gemboss-ei-lbl){font-weight:450;color:var(--gemboss-text-muted)}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-lbl{display:flex;gap:4px;align-items:start}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld--row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0 8px;align-items:start}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld--row>:not(:first-child){grid-column:2}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld--row>:first-child{margin:0;padding-top:6px}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-help{display:block;flex:none;width:16px;height:16px;padding:0;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px;background:none;color:inherit;font:650 10px/16px inherit;cursor:help;position:relative}.gemboss-ei-help:after{content:"";position:absolute;inset:-4px;border-radius:50%}.gemboss-ei-help:is(:hover,[aria-expanded=true]){color:var(--gemboss-text)}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld:has(>.gemboss-ei-lbl>.gemboss-ei-help[aria-expanded=false])>.gemboss-ei-help-text{display:none}.gemboss-ei-inp{width:100%}.gemboss-ei-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}select.gemboss-ei-inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gemboss-text-muted) 50%),linear-gradient(135deg,var(--gemboss-text-muted) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}.gemboss-ei-swatches{display:flex;gap:8px}.gemboss-ei-sw{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #1f1e1d1a}.gemboss-ei-sw.on{border-color:var(--gemboss-text);box-shadow:0 0 0 2px var(--gemboss-surface),0 0 0 3px var(--gemboss-primary)}.gemboss-ei-sw:disabled{cursor:default;opacity:.7}@media (pointer: coarse){.gemboss-ei-tab{min-height:44px}.gemboss-ei-gh{min-height:44px;margin-bottom:4px}.gemboss-ei-sw{width:44px;height:44px}.gemboss-ei-swatches{flex-wrap:wrap}}@media (pointer: coarse){.gemboss-ei-fld :is(input:not([type=checkbox]):not([type=radio]),select,button){min-height:44px}.gemboss-ei-fld :is(button,input[type=color]){min-width:44px}}.gemboss-ei-apply{margin-top:2px;background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;font-size:var(--gemboss-fs-caption);font-weight:700;padding:8px 16px;cursor:pointer}.gemboss-ei-apply:hover{background:var(--gemboss-primary-dark)}.gemboss-ei-apply:disabled{opacity:.6;cursor:default}.gemboss-ei-hint{margin:8px 0 0;font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-empty{padding:24px 16px;text-align:center;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.gemboss-ei-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--gemboss-divider);font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-savedot{width:6px;height:6px;border-radius:50%;background:var(--gemboss-success);box-shadow:0 0 0 3px #2e8b572e}.gemboss-ei-savedot.busy{background:var(--gemboss-primary);box-shadow:0 0 0 3px var(--gemboss-primary-soft)}.gemboss-ei-foot.is-error{color:var(--gemboss-danger)}.gemboss-ei-foot.is-error .gemboss-ei-savedot{background:var(--gemboss-danger);box-shadow:0 0 0 3px #d72c0d29}.gemboss-ei-drag{cursor:grab;user-select:none}.gemboss-ei-drag:active{cursor:grabbing}.gemboss-ei-dragmask{position:fixed;inset:0;z-index:9998;cursor:grabbing}.gemboss-ei-block{border:1px solid var(--gemboss-divider);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-block:last-child{margin-bottom:0}.gemboss-ei-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--gemboss-text)}.gemboss-ei-block-x{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);width:22px;height:22px;border-radius:6px;font-size:11px;flex:none}.gemboss-ei-block-x:hover{background:var(--gemboss-hover);color:var(--gemboss-danger-strong)}.gemboss-ei-block-x:disabled{opacity:.5;cursor:default}.gemboss-ei-block .gemboss-ei-inp{background:var(--gemboss-surface)}.gemboss-ei-addrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.gemboss-ei-addchip{border:1px dashed var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text-muted);border-radius:999px;font-size:var(--gemboss-fs-micro);font-weight:600;padding:6px 12px;cursor:pointer}.gemboss-ei-addchip:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg);border-style:solid}.gemboss-ei-addchip:disabled{opacity:.5;cursor:default}.gemboss-ei-img{display:flex;gap:8px;align-items:flex-start}.gemboss-ei-img-thumb{flex:none;width:52px;height:52px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg) center/cover no-repeat;display:grid;place-items:center;color:var(--gemboss-text-muted);font-size:16px}.gemboss-ei-img-ctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.gemboss-ei-img-actions{display:flex;gap:6px}.gemboss-ei-gen{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-gen .gemboss-ei-apply{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}.gemboss-ei-gen .gemboss-narr-spin{width:11px;height:11px}.gemboss-ei-oos{margin:4px 16px 12px;padding:12px;border:1px solid var(--gemboss-divider);border-left:3px solid var(--gemboss-text-muted);border-radius:8px;background:var(--gemboss-panel-bg)}.gemboss-ei-oos-h{font-size:var(--gemboss-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gemboss-text-muted);font-weight:700;margin-bottom:8px}.gemboss-ei-oos p{margin:0 0 6px;font-size:12px;color:var(--gemboss-text-muted);line-height:1.45}.gemboss-ei-oos p:last-child{margin-bottom:0}.gemboss-ei-oos b{color:var(--gemboss-text);font-weight:600}.gemboss-ei-edgebox{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.gemboss-ei-value{display:grid;gap:8px}.gemboss-ei-value-row{display:flex;align-items:center;gap:12px}.gemboss-ei-value-box{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto}.gemboss-ei-value-box .gemboss-ei-inp{width:72px;text-align:right;font-variant-numeric:tabular-nums}.gemboss-ei-value-row .gemboss-ei-range{flex:1 1 auto;min-width:0}.gemboss-ei-edge{display:flex;flex-direction:column;align-items:center;gap:4px}.gemboss-ei-edge input{width:100%;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}.gemboss-ei-edge span{font-size:var(--gemboss-fs-micro);letter-spacing:.06em;color:var(--gemboss-text-muted);font-weight:700}.gemboss-ei-edge-scrub{align-self:stretch;min-height:24px;margin-top:4px;display:flex;align-items:center;justify-content:center;border-radius:var(--gemboss-radius-sm);cursor:ew-resize;user-select:none;touch-action:pan-y}@media (hover: hover){.gemboss-ei-edge-scrub:not([aria-disabled]):hover{background:var(--gemboss-hover);color:var(--gemboss-text)}}.gemboss-ei-edge-scrub[aria-disabled]{cursor:default}.gemboss-ec-dock-body{flex:1;min-height:0;overflow-y:auto;padding:var(--gemboss-ec-inset,12px)}.gemboss-ei-group{padding:12px 0}.gemboss-ei-group+.gemboss-ei-group{border-top:1px solid var(--gemboss-divider)}.gemboss-ei-group>.gemboss-ei-fld:last-child{margin-bottom:0}.gemboss-ei-grouphead{margin:0 0 12px;font-size:var(--gemboss-fs-micro,11px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gemboss-ei-color{display:flex;gap:8px;align-items:center}.gemboss-ei-color .gemboss-ei-inp{flex:1;min-width:0}.gemboss-ei-swatch{flex:none;width:34px;height:34px;padding:0;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);cursor:pointer}.gemboss-ei-swatch::-webkit-color-swatch-wrapper{padding:2px}.gemboss-ei-swatch::-webkit-color-swatch{border:none;border-radius:6px}.gemboss-ei-swatch:disabled{cursor:default;opacity:.7}.gemboss-ei-suffix{margin:4px 0 0;font-size:11px;color:var(--gemboss-text-muted)}:is(.gemboss-ei-fld,.gemboss-ei-lbl)>label>.gemboss-ei-rangeval{float:right;font-weight:700;color:var(--gemboss-text);font-variant-numeric:tabular-nums}.gemboss-ei-range{width:100%;accent-color:var(--gemboss-primary);cursor:pointer}.gemboss-ei-range:disabled{cursor:default;opacity:.7}@media (max-width:760px){.gemboss-ei{position:static;width:auto;max-width:none;max-height:none;margin:8px;box-shadow:var(--gemboss-shadow-raised)}}.gemboss-ei-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}.gemboss-ei-tnode{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border-radius:6px;padding-right:4px}.gemboss-ei-tnode:hover{background:var(--gemboss-surface)}.gemboss-ei-tnode.on{background:var(--gemboss-primary-soft,var(--gemboss-surface));box-shadow:inset 2px 0 0 var(--gemboss-primary)}.gemboss-ei-tname{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;border:0;background:transparent;cursor:pointer;text-align:left;padding:6px 2px;color:var(--gemboss-text);font-size:12px;font-weight:600}.gemboss-ei-tname small{font-weight:400;font-size:10px;color:var(--gemboss-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ei-tacts{flex:none;display:flex;gap:1px;opacity:0;transition:opacity .12s}.gemboss-ei-tnode:hover .gemboss-ei-tacts,.gemboss-ei-tnode.on .gemboss-ei-tacts,.gemboss-ei-tacts:focus-within{opacity:1}.gemboss-ei-tacts button{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-size:11px;line-height:1;padding:4px 6px;border-radius:6px}.gemboss-ei-tacts button:hover:not(:disabled){background:var(--gemboss-surface);color:var(--gemboss-text)}.gemboss-ei-tacts button:disabled{opacity:.3;cursor:default}.gemboss-ei-tadd{flex-basis:100%;padding:4px 2px 6px}.gemboss-editor-topbar--guest{grid-template-columns:1fr auto 1fr}.gemboss-guest-mark{flex:0 0 auto;display:block}.gemboss-guest-brand{font-weight:700;letter-spacing:-.02em;font-size:15px;margin-left:8px}.gemboss-guest-note{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider-soft);border-radius:999px;padding:4px 12px;white-space:nowrap}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;justify-content:flex-end}.gemboss-guest-signin{font-size:var(--gemboss-fs-body);font-weight:600;color:var(--gemboss-text-muted);text-decoration:none}.gemboss-guest-signin:hover{color:var(--gemboss-text)}.gemboss-guest-keep{border:0;border-radius:999px;background:var(--gemboss-primary);color:var(--gemboss-on-primary);cursor:pointer;font:inherit;font-size:var(--gemboss-fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 20px;white-space:nowrap}.gemboss-guest-keep:hover{background:var(--gemboss-primary-dark)}@media (max-width: 720px){.gemboss-guest-note{display:none}}@media (max-width: 1000px){.gemboss-editor-topbar--guest{grid-template-columns:auto minmax(0,1fr)}}@media (max-width: 460px){.gemboss-guest-brand{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{gap:8px}.gemboss-editor-topbar--guest .gemboss-guest-keep{padding-inline:12px}}@media (max-width: 400px){.gemboss-editor-topbar--guest{padding-inline:8px;column-gap:8px}}.gemboss-platform-main:has(.gemboss-editor){padding-bottom:0}
1
+ @keyframes gemboss-editor-enter{0%{opacity:0}to{opacity:1}}@keyframes gemboss-editor-toast-in{0%{opacity:0;transform:translate(-50%,-8px)}to{opacity:1;transform:translate(-50%)}}@keyframes gemboss-pagepicker-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}@keyframes gemboss-flyout-in{0%{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}@keyframes gemboss-statusbar-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}.gemboss-platform-main:has(.gemboss-editor){box-sizing:border-box;height:100dvh;min-height:0;padding-top:0;padding-bottom:0;overflow:hidden}.gemboss-editor{--gemboss-editor-inset: 5px;position:fixed;inset:0;box-sizing:border-box;display:flex;flex-direction:column;background:var(--gemboss-canvas);overflow:hidden;z-index:400;animation:gemboss-editor-enter .26s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-editor{animation:none}}.gemboss-editor--embedded{position:relative;inset:auto;height:100%;min-height:0;z-index:auto;animation:none}.gemboss-editor-toast{position:absolute;top:62px;left:50%;transform:translate(-50%);z-index:500;display:flex;align-items:center;gap:12px;max-width:min(560px,92vw);padding:12px 12px 12px 16px;background:var(--gemboss-text);color:#fff;border-radius:12px;font-size:13px;line-height:1.4;box-shadow:var(--gemboss-shadow-overlay);animation:gemboss-editor-toast-in .24s cubic-bezier(.16,1,.3,1)}.gemboss-editor-toast strong{font-weight:600}.gemboss-editor-toast button{flex:0 0 auto;border:0;background:#ffffff29;color:#fff;width:22px;height:22px;border-radius:8px;cursor:pointer;font-size:12px;line-height:1;transition:background var(--gemboss-transition-fast) ease}.gemboss-editor-toast button:hover{background:#ffffff47}.gemboss-editor-toast button:focus-visible{outline:2px solid #fff;outline-offset:2px}@media (prefers-reduced-motion: reduce){.gemboss-editor-toast{animation:none}}.gemboss-editor-topbar{flex:0 0 auto;height:var(--gemboss-editor-topbar-h, 52px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;padding:0 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider)}@media (min-width: 1001px){.gemboss-editor-topbar--theme{grid-template-columns:auto auto auto;justify-content:space-between}.gemboss-editor-topbar.gemboss-pageedit-top{grid-template-columns:auto fit-content(100%) auto}}.gemboss-editor-tb-left{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-self:center}.gemboss-editor-topbar--theme .gemboss-editor-tb-center,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-center{min-width:0}.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-pageedit-title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@media (max-width: 1200px){.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-editor-tb-name,.gemboss-editor-topbar.gemboss-pageedit-top .gemboss-sec-type{display:none}}.gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;min-width:0;justify-self:end}.gemboss-editor-back{border:0;background:transparent;padding:0;font-family:inherit;font-size:18px;line-height:1;color:var(--gemboss-text);text-decoration:none;cursor:pointer;width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border-radius:var(--gemboss-radius-md);transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-back:hover{background:var(--gemboss-hover)}.gemboss-editor-back:active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}.gemboss-editor-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-name{font-family:var(--gemboss-serif);font-size:15px;font-weight:600}.gemboss-editor-savestate{display:inline-flex;align-items:center;gap:6px;font-size:var(--gemboss-fs-micro);font-weight:500;line-height:1;padding:4px 8px;border-radius:var(--gemboss-radius-full);white-space:nowrap;transition:opacity .2s ease}.gemboss-editor-savestate.is-idle,.gemboss-editor-savestate.is-saving{color:var(--gemboss-text-muted)}.gemboss-editor-savestate.is-saved{color:var(--gemboss-success-strong);background:var(--gemboss-success-soft)}.gemboss-editor-savestate .gemboss-narr-spin{width:10px;height:10px;border-width:1.5px;border-color:var(--gemboss-divider);border-top-color:currentColor}@media (max-width: 760px){.gemboss-editor-savestate.is-saved{display:none}}.gemboss-editor-tb-ghost{font-size:13px;color:var(--gemboss-text);text-decoration:none;padding:8px 12px;border:1px solid var(--gemboss-divider);border-radius:8px;white-space:nowrap;cursor:pointer;background:var(--gemboss-surface);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-editor-tb-ghost:hover{border-color:var(--gemboss-primary)}.gemboss-editor-tb-ghost:active{background:var(--gemboss-active-bg);border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-tb-ghost:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-ghost:disabled{opacity:.5;cursor:default;border-color:var(--gemboss-divider);color:var(--gemboss-text-muted)}.gemboss-editor-tb-publish{background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;box-sizing:border-box;height:var(--ui-btn-h, 28px);padding:0 12px;font-size:12px;font-weight:550;line-height:16px;cursor:pointer;white-space:nowrap;transition:background var(--gemboss-transition-fast) ease,filter var(--gemboss-transition-fast) ease}.gemboss-editor-tb-publish:hover{background:var(--gemboss-primary-dark)}.gemboss-editor-tb-publish:active{background:var(--gemboss-primary-dark);filter:brightness(.94)}.gemboss-editor-tb-publish:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-tb-publish:disabled{opacity:.5;cursor:default;filter:none}.gemboss-editor-tb-undo{font-size:15px}.gemboss-editor-publish{position:relative;display:inline-flex;align-items:stretch}.gemboss-editor-publish-main{border-radius:8px 0 0 8px}.gemboss-editor-publish-caret{border-radius:0 8px 8px 0;padding:0 8px;font-size:12px;line-height:1;border-left:1px solid color-mix(in srgb,#fff 24%,transparent);display:inline-flex;align-items:center;justify-content:center}.gemboss-editor-publish-caret.active{filter:brightness(.94)}.gemboss-editor-menu-label{padding:6px 12px 2px;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--gemboss-text-muted);white-space:nowrap}.gemboss-editor-overflow{position:relative;display:inline-flex}.gemboss-editor-overflow-trigger{font-size:18px;line-height:1}.gemboss-editor-menu{position:fixed;z-index:500;min-width:210px;max-height:calc(100vh - 16px);overflow-y:auto;padding:6px;animation:gemboss-flyout-in var(--gemboss-transition-fast) ease}@media (prefers-reduced-motion: reduce){.gemboss-editor-menu{animation:none}}.gemboss-editor-menu-item{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:8px 12px;border:0;border-radius:var(--gemboss-radius-md);background:transparent;font:inherit;font-size:13px;color:var(--gemboss-text);text-align:left;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-menu-item:hover{background:var(--gemboss-hover)}.gemboss-editor-menu-item:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:-2px;background:var(--gemboss-hover)}.gemboss-editor-menu-item:disabled{opacity:.45;cursor:default}.gemboss-editor-menu-item:disabled:hover{background:transparent}.gemboss-editor-menu-item[aria-disabled=true]{color:var(--gemboss-text-muted);cursor:default}.gemboss-editor-menu-item[aria-disabled=true]:hover{background:transparent}.gemboss-editor-menu-why{display:block;font-size:12px;line-height:16px;color:var(--gemboss-text-muted)}.gemboss-editor-menu-item.active{color:var(--gemboss-active-fg)}.gemboss-editor-menu-ext{color:var(--gemboss-text-muted)}.gemboss-editor-menu-check{color:var(--gemboss-active-fg);font-weight:600}.gemboss-editor-menu-val{font-size:11px;color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-sm);padding:1px 8px}.gemboss-editor-menu-sep{height:1px;background:var(--gemboss-divider-soft);margin:6px}.gemboss-editor-body{flex:1;min-height:0;display:flex;gap:0;padding:var(--gemboss-editor-inset);box-sizing:border-box}.gemboss-editor-body>.gemboss-ec,.gemboss-editor-body>.gemboss-editor-preview-pane{border:1px solid var(--gemboss-divider);border-radius:16px;overflow:hidden}.gemboss-editor-body>.gemboss-ec{border-right:1px solid var(--gemboss-divider)}.gemboss-ec-tabs{display:flex;gap:var(--ui-space-1);padding:var(--ui-space-2) var(--gemboss-ec-inset, 12px);border-bottom:1px solid var(--gemboss-divider);flex:none;overflow-x:auto;scrollbar-width:thin;overscroll-behavior-x:contain}.gemboss-ec-tabs>[role=tab]{flex:1 1 0;min-width:max-content;white-space:nowrap;font:inherit;font-size:12px;font-weight:550;line-height:16px;cursor:pointer;box-sizing:border-box;min-height:var(--ui-btn-h, 28px);padding:0 var(--ui-space-3);border-radius:8px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid transparent;background:transparent;color:var(--gemboss-text-muted);box-shadow:none}.gemboss-ec-tabs>[role=tab]:hover:not([aria-selected=true]){color:var(--gemboss-text);background:var(--gemboss-primary-soft)}.gemboss-ec-tabs>[role=tab]:focus-visible{outline:2px solid var(--ui-focus);outline-offset:-2px}.gemboss-ec-tabs>[role=tab][aria-selected=true]{border-color:var(--gemboss-divider);background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:inset 0 -2px 0 var(--gemboss-primary)}@media (max-width: 47.9975em){.gemboss-ec-tabs>[role=tab]{min-height:44px}}.gemboss-pv{flex:1;min-width:0;display:flex;flex-direction:column;background:var(--gemboss-preview-canvas);overflow:hidden}.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:calc(var(--ui-btn-h) - 2px);height:calc(var(--ui-btn-h) - 2px);border:0;border-radius:0}@media (pointer: coarse),(max-width: 47.9975em){.ui-seg.gemboss-pv-devices>button.gemboss-pv-device{width:44px;height:44px}}.gemboss-pv-device{border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;width:28px;height:28px;border-radius:8px;color:var(--gemboss-text-muted);font-size:14px;display:inline-flex;align-items:center;justify-content:center;line-height:1;transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pv-device svg{display:block}.gemboss-editor-tb-tools{display:flex;align-items:center;gap:16px;min-width:0}@media (max-width: 1200px){.gemboss-editor-tb-tools{display:none}}.gemboss-pv-device:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-pv-device:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pv-device.active{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg);background:var(--gemboss-active-bg)}.gemboss-pagepicker{position:relative;display:inline-flex}.gemboss-pagepicker-trigger{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 8px 0 12px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);cursor:pointer;font-size:13px;font-weight:600;color:var(--gemboss-text);line-height:1;transition:border-color var(--gemboss-transition-fast) ease,background var(--gemboss-transition-fast) ease}.gemboss-pagepicker-trigger:hover{border-color:var(--gemboss-primary)}.gemboss-pagepicker-trigger[aria-expanded=true]{border-color:var(--gemboss-primary);background:var(--gemboss-active-bg, var(--gemboss-danger-soft))}.gemboss-pagepicker-trigger-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-trigger-icon svg{display:block}.gemboss-pagepicker-trigger-label{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-pagepicker-caret{font-size:9px;color:var(--gemboss-text-muted);margin-left:1px}.gemboss-pagepicker-menu{position:fixed;z-index:500;padding:8px;display:flex;flex-direction:column;gap:6px;animation:gemboss-pagepicker-in .14s cubic-bezier(.16,1,.3,1)}@media (prefers-reduced-motion: reduce){.gemboss-pagepicker-menu{animation:none}}.gemboss-pagepicker-search{position:relative;display:flex;align-items:center}.gemboss-pagepicker-search-icon{position:absolute;left:10px;display:inline-flex;color:var(--gemboss-text-muted);pointer-events:none}input.gemboss-pagepicker-search-input{width:100%;padding-left:32px}.gemboss-pagepicker-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px;max-height:320px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(31,30,29,.22) transparent}.gemboss-pagepicker-item{width:100%;display:flex;align-items:center;gap:12px;border:0;background:transparent;cursor:pointer;text-align:left;padding:8px 12px;border-radius:var(--gemboss-radius-md);font-size:var(--gemboss-fs-body);color:var(--gemboss-text)}.gemboss-pagepicker-item:hover,.gemboss-pagepicker-item:focus-visible{background:var(--gemboss-hover, rgba(0,0,0,.05));outline:none}.gemboss-pagepicker-item.active{background:var(--gemboss-active-bg, var(--gemboss-danger-soft));color:var(--gemboss-active-fg);font-weight:600}.gemboss-pagepicker-item-icon{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-item.active .gemboss-pagepicker-item-icon{color:var(--gemboss-active-fg)}.gemboss-pagepicker-item-icon svg{display:block}.gemboss-pagepicker-item-label{flex:1;min-width:0}.gemboss-pagepicker-check{color:var(--gemboss-active-fg);font-size:13px;flex:0 0 auto}.gemboss-pagepicker-empty{padding:12px;font-size:13px;color:var(--gemboss-text-muted)}.gemboss-pagepicker-note{padding:8px 12px 12px;font-size:12px;line-height:1.5;color:var(--gemboss-text-muted);border-bottom:1px solid var(--gemboss-divider)}.gemboss-pagepicker-note-link{color:var(--gemboss-primary);font-weight:600;text-decoration:none}.gemboss-pagepicker-note-link:hover{text-decoration:underline}.gemboss-pagepicker-back{display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:4px 6px 8px;margin-bottom:2px;border-bottom:1px solid var(--gemboss-divider-soft, #edeff2);font-size:13px;font-weight:600;color:var(--gemboss-text)}.gemboss-pagepicker-back:hover{color:var(--gemboss-active-fg)}.gemboss-pagepicker-back:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-pagepicker-back-icon{display:inline-flex;color:var(--gemboss-text-muted)}.gemboss-pagepicker-back-icon svg{display:block}.gemboss-pagepicker-drill{display:inline-flex;color:var(--gemboss-text-muted);flex:0 0 auto}.gemboss-pagepicker-drill svg{display:block}.gemboss-pagepicker-thumb{width:30px;height:30px;flex:0 0 auto;border-radius:8px;object-fit:cover;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg, #ffffff)}.gemboss-pagepicker-thumb--default{display:inline-flex;align-items:center;justify-content:center;color:var(--gemboss-text-muted)}.gemboss-pagepicker-thumb--default svg{width:16px;height:16px}.gemboss-pv-stage{flex:1;min-height:0;overflow:hidden;display:flex;justify-content:center;padding:0}.gemboss-pv-frame{background:var(--gemboss-surface);overflow:hidden;height:100%;position:relative}.gemboss-pv-frame.desktop{width:100%;max-width:none}.gemboss-pv-frame.gemboss-pv-fit.desktop{position:absolute;top:0;left:0;width:var(--gemboss-pv-w, 100%);height:var(--gemboss-pv-h, 100%);transform:scale(calc(var(--gemboss-pv-scale, 1) * var(--gemboss-pv-user-zoom, 1)));transform-origin:top left}.gemboss-pv-frame.mobile{width:390px;flex:0 0 390px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:20px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-frame.tablet{width:768px;flex:0 0 768px;align-self:center;margin:16px 0;border:1px solid var(--gemboss-divider);border-radius:16px;box-shadow:var(--gemboss-shadow-overlay)}.gemboss-pv-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:var(--gemboss-surface);transition:opacity .18s ease}.gemboss-pv-empty{margin:auto;text-align:center;max-width:340px;display:flex;flex-direction:column;align-items:center;gap:8px}.gemboss-pv-empty-art{font-size:40px;line-height:1;opacity:.7}.gemboss-pv-empty-title{font-family:var(--gemboss-serif);font-size:18px;margin:0}.gemboss-pv-empty-sub{font-size:13px;color:var(--gemboss-text-muted);margin:0;line-height:1.5}.gemboss-pv-empty-cta{margin-top:6px;font-size:13px;font-weight:600;color:var(--gemboss-active-fg);text-decoration:none}.gemboss-pv-empty-cta:hover{text-decoration:underline}.gemboss-pv-spin{width:22px;height:22px;border:2px solid var(--gemboss-divider-soft);border-top-color:var(--gemboss-primary);border-radius:50%;animation:gemboss-spin .7s linear infinite}.gemboss-editor-resizer{flex:0 0 var(--gemboss-editor-inset);align-self:stretch}body.ui-resizing .gemboss-pv-iframe{pointer-events:none}.gemboss-editor-chat-toggle{width:28px;height:28px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gemboss-divider);background:var(--gemboss-surface);border-radius:var(--gemboss-radius-md);cursor:pointer;font-size:14px;line-height:1;color:var(--gemboss-text-muted);transition:border-color var(--gemboss-transition-fast) ease,color var(--gemboss-transition-fast) ease}.gemboss-editor-chat-toggle:hover{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}.gemboss-editor-chat-toggle.collapsed{border-color:var(--gemboss-primary);color:var(--gemboss-active-fg)}.gemboss-editor-chat-toggle svg{display:block}.gemboss-editor-body .gemboss-ec{transition:flex-basis .28s cubic-bezier(.16,1,.3,1),width .28s cubic-bezier(.16,1,.3,1)}body.ui-resizing .gemboss-editor-body .gemboss-ec{transition:none;will-change:flex-basis,width}body.ui-resizing .gemboss-editor-body .gemboss-pv{will-change:flex-basis}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{border-width:0;overflow:hidden}.gemboss-editor-body.is-chat-collapsed>.gemboss-ec{visibility:hidden}.gemboss-editor-body.is-chat-collapsed .gemboss-editor-resizer{display:none}.gemboss-pagepicker-list::-webkit-scrollbar{width:9px}.gemboss-pagepicker-list::-webkit-scrollbar-track{background:transparent}.gemboss-pagepicker-list::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid transparent;background-clip:content-box}@media (max-width: 1000px){.gemboss-editor-body{flex-direction:column;gap:var(--gemboss-editor-inset)}}@media (max-width: 1000px){.gemboss-editor-resizer{display:none}.gemboss-editor-body.is-chat-collapsed .gemboss-ec{max-height:0;min-height:0}.gemboss-editor-topbar{height:auto;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"left right" "center center";gap:8px 12px;padding:8px 12px}.gemboss-editor-tb-left{grid-area:left}.gemboss-editor-tb-right{padding-block:6px;grid-area:right;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-center{grid-area:center;justify-self:stretch;justify-content:flex-start;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}.gemboss-editor-tb-right::-webkit-scrollbar,.gemboss-editor-tb-center::-webkit-scrollbar{display:none}.gemboss-editor-tb-right>*{flex:0 0 auto}.gemboss-editor-tb-right>.gemboss-editor-tb-publish{position:sticky;right:0;z-index:1;box-shadow:-8px 0 8px -6px color-mix(in srgb,var(--gemboss-text) 18%,transparent)}.gemboss-editor-tb-name{display:none}.gemboss-editor-tb-ghost{padding:6px 12px;font-size:12px}.gemboss-editor-tb-publish{padding:8px 16px;font-size:13px}}@media (max-width: 640px){.gemboss-pv-frame.mobile{width:100%;max-width:390px;flex:0 1 auto;margin:8px 0}.gemboss-pv-frame.tablet{width:100%;max-width:768px;flex:0 1 auto;margin:8px 0}}.gemboss-editor-preview-pane{display:flex}.gemboss-editor-mobile-tabs{display:none}.gemboss-editor-dock{position:absolute;top:0;right:0;bottom:0;width:320px;max-width:90%;z-index:5;overflow-y:auto;background:var(--gemboss-surface);border-left:1px solid var(--gemboss-divider);box-shadow:var(--gemboss-shadow-overlay)}.gemboss-editor-preview-pane:has(>.gemboss-editor-dock){position:relative}:where(.gemboss-editor-body>.gemboss-ec){position:relative;width:var(--gemboss-chat-w, 384px);flex:0 0 var(--gemboss-chat-w, 384px);display:flex;flex-direction:column;background:var(--gemboss-panel-bg);border-right:1px solid var(--gemboss-divider);overflow:hidden}:where(.gemboss-editor-preview-pane){flex:1;min-width:0}@media (max-width: 1000px){:where(.gemboss-editor-body>.gemboss-ec){width:auto;flex:0 0 auto;max-height:48%}}@media (max-width: 760px){.gemboss-editor-resizer{display:none}.gemboss-editor-body .gemboss-ec{flex:1 1 auto;width:100%;min-width:0;max-height:none;border-right:none}.gemboss-editor-body .gemboss-editor-preview-pane{flex:1 1 auto}.gemboss-editor-body[data-mobile-pane=chat] .gemboss-editor-preview-pane,.gemboss-editor-body[data-mobile-pane=preview] .gemboss-ec{display:none}.gemboss-editor-mobile-tabs{display:flex;flex:0 0 auto;gap:6px;padding:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom));background:var(--gemboss-surface);border-top:1px solid var(--gemboss-divider)}.gemboss-editor-mobile-tab{flex:1 1 0;height:44px;border:0;border-radius:8px;background:transparent;color:var(--gemboss-text-muted);font:inherit;font-size:13px;font-weight:600;cursor:pointer}.gemboss-editor-mobile-tab.active{background:var(--gemboss-active-bg);color:var(--gemboss-active-fg)}}.gemboss-editor-statusbar{position:absolute;top:60px;right:14px;z-index:480;max-width:min(380px,calc(100vw - 28px));padding:8px 16px;font-size:12px;line-height:1.4;color:var(--gemboss-text-muted);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:12px;box-shadow:var(--gemboss-shadow-raised);pointer-events:none;animation:gemboss-statusbar-in .18s cubic-bezier(.16,1,.3,1) both}.gemboss-editor-statusbar.done{background:#eaf6ef;color:#1f7a4d;border-color:var(--gemboss-success-border)}.gemboss-editor-statusbar.error{background:#fdecea;color:var(--gemboss-danger);border-color:#f3c2bb}@media (pointer: coarse){.gemboss-pv-device{width:38px;height:38px;font-size:16px}.gemboss-editor-back{width:44px;height:44px;font-size:20px}.gemboss-editor-chat-toggle{width:44px;height:44px;font-size:16px}}@media (pointer: coarse){.gemboss-editor-tb-ghost{padding:8px 16px;min-height:44px}.gemboss-editor-tb-publish{padding:12px 20px;min-height:44px}.gemboss-pagepicker-trigger{min-height:44px}}@media (pointer: coarse){.gemboss-ec-tab{min-height:44px}}@media (max-width: 760px){.gemboss-editor-chat-toggle{display:none}}.gemboss-pageedit{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--gemboss-panel-bg,#ffffff);z-index:320}.gemboss-pageedit-top{background:#fff;border-bottom:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-pageedit .gemboss-editor-tb-center{display:flex;align-items:center;gap:12px;justify-content:center}.gemboss-pageedit .gemboss-editor-tb-right{display:flex;align-items:center;gap:12px;min-width:0}.gemboss-pageedit .gemboss-editor-tb-right>:first-child{margin-inline-start:auto}.gemboss-pageedit .gemboss-editor-tb-left{--gemboss-tb-gap:12px;display:flex;align-items:center;gap:var(--gemboss-tb-gap);min-width:0}.gemboss-pageedit-title{font-family:var(--gemboss-serif,inherit);font-size:15px;font-weight:600;color:var(--gemboss-text,#1b1c1e);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:32ch}.gemboss-pageedit-notice{display:flex;flex-wrap:wrap;align-items:center;gap:12px;flex:0 0 auto;padding:12px 16px;background:var(--gemboss-surface);border-bottom:1px solid var(--gemboss-divider);color:var(--gemboss-text);font-size:13px;line-height:1.5}.gemboss-pageedit-notice span{flex:1 1 240px;min-width:0}.gemboss-pageedit-notice button{min-height:44px;padding:8px 12px;flex:0 0 auto;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);color:var(--gemboss-text);cursor:pointer}@media (max-width:900px){.gemboss-pageedit-top{height:auto;grid-template-columns:minmax(0,1fr);grid-template-areas:"left" "right" "center";gap:8px;padding:8px 12px}.gemboss-pageedit-top .gemboss-editor-tb-right{flex-wrap:wrap;overflow:visible}.gemboss-pageedit-top .gemboss-editor-tb-right button{min-height:44px}.gemboss-pageedit .gemboss-editor-tb-left{width:100%;overflow:hidden;flex-wrap:wrap}.gemboss-pageedit .gemboss-editor-tb-right,.gemboss-pageedit .gemboss-editor-tb-center{justify-self:stretch;justify-content:flex-start;max-width:100%;overflow-x:auto}.gemboss-pageedit-top .gemboss-editor-tb-center{flex-wrap:wrap;row-gap:8px;overflow:visible}}.gemboss-sec-type{font-size:11px;font-weight:700;letter-spacing:.02em;padding:2px 8px;border-radius:12px;background:#f1efe9;color:var(--gemboss-text-muted);text-transform:capitalize}.gemboss-sec-insert-wrap{position:relative}.gemboss-sec-insert-menu{position:absolute;top:42px;right:0;width:280px;max-height:60vh;overflow-y:auto;padding:6px;z-index:80}.gemboss-sec-insert-item{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 12px;border:0;background:transparent;border-radius:8px;cursor:pointer;text-align:left;font-size:13px;color:var(--gemboss-text,#1b1c1e);transition:background .12s ease,color .12s ease}.gemboss-sec-insert-item:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:focus-visible{outline:2px solid var(--gemboss-primary, #1b1c1e);outline-offset:-2px;background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-sec-insert-item:disabled{opacity:.6;cursor:default}.gemboss-sec-insert-item:disabled:hover{background:transparent}.gemboss-sec-insert-cat{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);text-transform:capitalize}.gemboss-sec-insert-empty{display:block;padding:16px;font-size:13px;color:var(--gemboss-text-muted,#686b71);text-decoration:none}.gemboss-pageedit-scope{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}@media (max-width:1200px){.gemboss-pageedit-scope{display:none}}.gemboss-pageedit-pv{flex:1;min-width:0;background:var(--gemboss-preview-canvas);display:flex;justify-content:center;overflow:auto;position:relative}.gemboss-pageedit-pv .gemboss-pv-frame iframe{width:100%;height:100%;border:0;background:#fff;display:block}.gemboss-pageedit-chip{display:flex;align-items:center;gap:8px;margin:0 12px 8px;padding:6px 12px;border-radius:8px;background:var(--gemboss-active-bg);border:1px solid var(--gemboss-divider);font-size:12px;color:var(--gemboss-active-fg)}.gemboss-pageedit-chip button{margin-left:auto;border:0;background:transparent;color:var(--gemboss-active-fg);cursor:pointer;font-size:12px}.gemboss-pageedit-standing{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:8px 16px;background:#b07d1817;border-bottom:1px solid rgba(176,125,24,.28);font-size:13px;line-height:1.5;color:#7a5710}.gemboss-pageedit-standing code{font-size:12px;background:#b07d1824;border-radius:4px;padding:2px 4px}.gemboss-pageedit-standing button{margin-left:auto;flex:0 0 auto;border:1px solid rgba(176,125,24,.4);background:#fff;color:#7a5710;border-radius:8px;padding:4px 12px;font:inherit;font-weight:600;cursor:pointer}.gemboss-pageedit-standing button:disabled{opacity:.6;cursor:default}.gemboss-picker-backdrop{position:fixed;inset:0;background:#1f1e1d38;z-index:70}.gemboss-picker-head{flex:0 0 auto;height:52px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:1px solid var(--gemboss-divider,#e5e7ea);font-weight:600;font-size:15px}.gemboss-picker-head button{border:0;background:transparent;font-size:15px;cursor:pointer;color:var(--gemboss-text-muted,#686b71)}.gemboss-picker-empty{padding:20px;text-align:center;color:var(--gemboss-text-muted,#686b71);font-size:13px}.gemboss-layers{position:fixed;top:0;left:0;bottom:0;width:300px;background:#fff;border-right:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-layers-list{flex:1;min-height:0;overflow-y:auto;padding:8px 12px;display:flex;flex-direction:column;gap:4px}.gemboss-layer{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:8px;padding:0 4px 0 6px}.gemboss-layer:hover{background:var(--gemboss-hover,rgba(0,0,0,.04))}.gemboss-layer.is-sel{border-color:var(--gemboss-primary, #1b1c1e);background:var(--gemboss-active-bg)}.gemboss-layer-main{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;background:transparent;border:0;cursor:pointer;text-align:left;padding:8px 4px}.gemboss-layer-type{font-size:13px;font-weight:600;color:var(--gemboss-text,#1b1c1e)}.gemboss-layer-head{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:195px}.gemboss-layer-acts{display:flex;gap:0;flex:0 0 auto}.gemboss-layer-acts button{width:26px;height:26px;border:0;background:transparent;border-radius:6px;cursor:pointer;color:var(--gemboss-text-muted,#686b71);font-size:13px;line-height:1}.gemboss-layer-acts button:hover:not(:disabled){background:var(--gemboss-hover,rgba(0,0,0,.07))}.gemboss-layer-acts button:disabled{opacity:.28;cursor:default}.gemboss-layer-del:hover:not(:disabled){color:#c0392b}@media (pointer: coarse){.gemboss-layer{flex-wrap:wrap}.gemboss-layer-acts{margin-left:auto}.gemboss-layer-acts button{width:44px;height:44px;font-size:15px}.gemboss-layer-main{flex:1 1 140px;min-height:44px;justify-content:center}.gemboss-layer-head{max-width:100%}}.gemboss-layer-grip{flex:0 0 auto;width:12px;margin-right:-2px;color:var(--gemboss-text-muted,#686b71);font-size:11px;letter-spacing:-2px;line-height:1;text-align:center;cursor:grab;user-select:none}.gemboss-layer[draggable=true]{cursor:grab}.gemboss-layer.is-dragging{opacity:.4}.gemboss-layer[data-drop=before]{box-shadow:0 -2px 0 var(--gemboss-primary, #1b1c1e)}.gemboss-layer[data-drop=after]{box-shadow:0 2px 0 var(--gemboss-primary, #1b1c1e)}.gemboss-layer.is-hidden .gemboss-layer-main{opacity:.5}.gemboss-layer-acts .gemboss-layer-eye{display:inline-grid;place-items:center}.gemboss-layer-acts .gemboss-layer-eye[aria-pressed=true]{color:var(--gemboss-text,#1b1c1e)}.gemboss-layers[hidden],.gemboss-settings[hidden],.gemboss-picker-backdrop[hidden]{display:none}.gemboss-settings{position:fixed;top:0;right:0;bottom:0;width:min(380px,100%);box-sizing:border-box;background:#fff;border-left:1px solid var(--gemboss-divider,#e5e7ea);box-shadow:-8px 0 30px #1f1e1d1f;z-index:71;display:flex;flex-direction:column}.gemboss-settings-body{flex:1;min-height:0;overflow-y:auto;padding:16px 20px;display:flex;flex-direction:column;gap:12px}.gemboss-settings-grouphead{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding-top:16px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-grouphead>span{font-size:var(--gemboss-fs-caption);font-weight:700;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-gen{border:1px solid var(--gemboss-divider,#e5e7ea);background:var(--gemboss-surface,#fff);border-radius:999px;padding:4px 12px;font-size:12px;font-weight:600;font-family:inherit;color:var(--gemboss-text,#1b1c1e);cursor:pointer;white-space:nowrap}.gemboss-settings-gen:hover:not(:disabled){background:var(--gemboss-hover,#eceef2)}.gemboss-settings-gen:disabled{opacity:.55;cursor:default}.gemboss-settings-field{display:flex;flex-direction:column;gap:6px}.gemboss-settings-note{margin:0 0 4px;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);line-height:1.5}.gemboss-settings-error{margin:0 0 8px;padding:8px 12px;border-radius:8px;font-size:var(--gemboss-fs-caption);line-height:1.45;color:#8a1c1c;background:#fdecec;border:1px solid #f5c2c2}.gemboss-settings-field>span{font-size:13px;font-weight:450;color:var(--gemboss-text-muted)}.gemboss-settings-field :is(input,textarea,select):not([type=color]){width:100%}.gemboss-settings-field small{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted,#686b71)}.gemboss-settings-field textarea.gemboss-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}.gemboss-settings-handle span{color:var(--gemboss-text-muted,#686b71);white-space:nowrap}.gemboss-settings-foot{flex:0 0 auto;display:flex;justify-content:flex-end;gap:12px;padding:12px 20px;border-top:1px solid var(--gemboss-divider,#e5e7ea)}.gemboss-settings-cancel{background:transparent;border:1px solid var(--gemboss-divider,#e5e7ea);border-radius:8px;font-size:13px;font-weight:600;padding:8px 16px;cursor:pointer;color:var(--gemboss-text,#1b1c1e)}.gemboss-settings-save{background:var(--gemboss-primary, #1b1c1e);color:#fff;border:0;border-radius:8px;font-size:13px;font-weight:700;padding:8px 20px;cursor:pointer}.gemboss-settings-save:disabled{opacity:.6;cursor:default}.gemboss-page-section-content :is(button:where(:not(.gemboss-ei-help)),input,textarea){min-height:44px;min-width:44px}.gemboss-pageedit .gemboss-pv-device{width:44px;height:44px;flex-shrink:0}.gemboss-pageedit .gemboss-ec-dock-body :is(button:where(:not(.gemboss-ei-help)),input,select){min-height:44px}.gemboss-bundle-look .gemboss-ei-body :is(button:where(:not(.gemboss-ei-help)),input){min-height:44px}.gemboss-bundle-look .gemboss-ei-body input[type=color]{min-width:44px}.gemboss-page-draft-status{flex:0 0 auto;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-surface,#fff);color:var(--gemboss-text,#1b1c1e);font-size:12px;line-height:1.5;box-shadow:0 1px 6px #0001}.gemboss-page-draft-status button{min-height:44px;min-width:44px;padding:8px 12px;border:1px solid var(--gemboss-divider);border-radius:6px;background:var(--gemboss-surface,#fff);cursor:pointer}.gemboss-page-draft-status button:hover{background:var(--gemboss-hover,#eceef2)}.gemboss-page-draft-status button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}.gemboss-page-draft-status[data-page-preview-state=ready]{pointer-events:none}.gemboss-pageedit .gemboss-pageedit-pv{flex-direction:column;min-height:0;justify-content:flex-start}.gemboss-page-draft-stage{flex:1;min-height:0;position:relative;overflow:hidden;display:flex;justify-content:center}@media (max-width:1000px){.gemboss-pageedit .gemboss-editor-body>.gemboss-ec{flex:0 0 auto;height:44%;min-height:min(520px,76%);max-height:76%}}.gemboss-ei{position:absolute;top:12px;right:12px;z-index:6;width:320px;max-width:calc(100% - 24px);display:flex;flex-direction:column;max-height:calc(100% - 24px);background:var(--gemboss-surface);border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-xl);box-shadow:var(--gemboss-shadow-overlay);overflow:hidden}.gemboss-ei--docked{position:static;top:auto;right:auto;width:100%;max-width:none;height:100%;max-height:none;border:0;border-radius:0;box-shadow:none;background:transparent;flex:1;min-height:0}.gemboss-ei-head{display:flex;align-items:center;gap:8px;padding:12px;border-bottom:1px solid var(--gemboss-divider)}.gemboss-ec>.gemboss-ei-head{padding-inline:var(--gemboss-ec-inset,12px)}.gemboss-ec .gemboss-ei--docked .gemboss-ei-head{padding-inline:var(--gemboss-ec-inset,12px)}.gemboss-ec .gemboss-ei--docked .gemboss-ei-tabs{margin-inline:var(--gemboss-ec-inset,12px)}.gemboss-ec .gemboss-ei--docked .gemboss-ei-pane{padding-inline:var(--gemboss-ec-inset,16px)}.gemboss-ei-title{font-size:var(--gemboss-fs-body);font-weight:700;line-height:1.2;min-width:0;overflow:hidden}.gemboss-ei-title small{display:block;font-weight:500;font-size:11px;color:var(--gemboss-text-muted);font-family:ui-monospace,SFMono-Regular,Menlo,monospace;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.gemboss-ei-act,.gemboss-ei-x{margin-left:auto;width:26px;height:26px;flex:none;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);border-radius:6px;display:grid;place-items:center;font-size:14px}.gemboss-ei-x{margin-left:2px;font-size:13px}.gemboss-ei-act:hover,.gemboss-ei-x:hover{background:var(--gemboss-hover);color:var(--gemboss-text)}.gemboss-ei-act:disabled{opacity:.5;cursor:default}.gemboss-ei-tabs{display:flex;gap:2px;margin:8px 12px 0;background:var(--gemboss-panel-bg);padding:4px;border-radius:8px}.gemboss-ei-tab{flex:1;border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-weight:550;font-size:12px;line-height:16px;padding:6px 4px;border-radius:6px;display:flex;align-items:center;justify-content:center;gap:6px}.gemboss-ei-tab.on{background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:var(--gemboss-shadow-resting)}.gemboss-ei-body{flex:1;min-height:0;overflow-y:auto;scrollbar-width:thin;padding:2px 0 4px}.gemboss-ei-body::-webkit-scrollbar{width:9px}.gemboss-ei-body::-webkit-scrollbar-thumb{background:#1f1e1d33;border-radius:6px;border:2px solid var(--gemboss-surface);background-clip:content-box}.gemboss-ei-pane{padding:4px 16px 6px}.gemboss-ei-note{margin:0 0 8px;padding:8px 12px;border-radius:8px;background:var(--gemboss-hover,#eceef2);border:1px solid var(--gemboss-divider,#e5e7ea);color:var(--gemboss-text-muted,#686b71);font-size:12px;line-height:1.45}.gemboss-ei-grp{border-bottom:1px solid var(--gemboss-divider-soft);padding:16px 0}.gemboss-ei-grp:last-child{border-bottom:none}.gemboss-ei-gh{font-size:13px;line-height:20px;color:var(--gemboss-text);font-weight:650;margin-bottom:8px;display:flex;align-items:center;gap:6px;width:100%;border:0;background:transparent;cursor:pointer;text-align:left;padding:0;-webkit-appearance:none}.gemboss-ei-chev{order:1;flex:none;margin:0 4px 0 auto;width:6px;height:6px;font-size:0;border:solid var(--gemboss-text-muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}.gemboss-ei-gh[data-open=closed]>.gemboss-ei-chev{transform:rotate(-45deg)}.gemboss-ei-gh-note{margin-left:6px;font-size:12px;font-weight:450;opacity:.55}.gemboss-ei-gh[data-open=closed]{margin-bottom:0}.gemboss-ei-gh[data-open=closed]~*{display:none}.gemboss-ei-fld{margin-bottom:12px}.gemboss-ei-fld:last-child{margin-bottom:0}.gemboss-ei-grp>:not(.gemboss-ei-gh)+:not(.gemboss-ei-hint){margin-top:12px}.gemboss-ei-fld>label:where(:not(.gemboss-field)),.gemboss-ei-lbl{display:block;font-size:13px;font-weight:500;color:var(--gemboss-text);margin-bottom:6px}.gemboss-ei-lbl>label{margin:0}.gemboss-ei-help{display:none}:is(.gemboss-ei-grp,.gemboss-ei-group) :is(.gemboss-ei-fld>label:where(:not(.gemboss-field)),.gemboss-ei-lbl){font-weight:450;color:var(--gemboss-text-muted)}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-lbl{display:flex;gap:4px;align-items:start}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld--row{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:0 8px;align-items:start}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld--row>:not(:first-child){grid-column:2}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld--row>:first-child{margin:0;padding-top:6px}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-help{display:block;flex:none;width:16px;height:16px;padding:0;border:0;border-radius:50%;box-shadow:inset 0 0 0 1px;background:none;color:inherit;font:650 10px/16px var(--gemboss-font-sans);cursor:help;position:relative}.gemboss-ei-help:after{content:"";position:absolute;inset:-4px;border-radius:50%}.gemboss-ei-help:is(:hover,[aria-expanded=true]){color:var(--gemboss-text)}:is(.gemboss-ei-grp,.gemboss-ei-group) .gemboss-ei-fld:has(>.gemboss-ei-lbl>.gemboss-ei-help[aria-expanded=false])>.gemboss-ei-help-text{display:none}.gemboss-ei-inp{width:100%}.gemboss-ei-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;line-height:1.5}select.gemboss-ei-inp{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--gemboss-text-muted) 50%),linear-gradient(135deg,var(--gemboss-text-muted) 50%,transparent 50%);background-position:calc(100% - 15px) center,calc(100% - 10px) center;background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:32px}.gemboss-ei-swatches{display:flex;gap:8px}.gemboss-ei-sw{width:30px;height:30px;border-radius:8px;border:2px solid transparent;cursor:pointer;padding:0;box-shadow:inset 0 0 0 1px #1f1e1d1a}.gemboss-ei-sw.on{border-color:var(--gemboss-text);box-shadow:0 0 0 2px var(--gemboss-surface),0 0 0 3px var(--gemboss-primary)}.gemboss-ei-sw:disabled{cursor:default;opacity:.7}@media (pointer: coarse),(max-width:47.9975em){.gemboss-ei-tab{min-height:44px}.gemboss-ei-gh{min-height:44px;margin-bottom:4px}.gemboss-ei-sw{width:44px;height:44px}.gemboss-ei-swatches{flex-wrap:wrap}}@media (pointer: coarse),(max-width:47.9975em){.gemboss-ei-fld :is(input:not([type=checkbox]):not([type=radio]),select,button:not(.gemboss-ei-help)){min-height:44px}.gemboss-ei-fld :is(button:not(.gemboss-ei-help),input[type=color]){min-width:44px}.gemboss-ei-help:after{inset:-14px}}.gemboss-ei-apply{margin-top:2px;background:var(--gemboss-primary);color:#fff;border:0;border-radius:8px;font-size:var(--gemboss-fs-caption);font-weight:700;padding:8px 16px;cursor:pointer}.gemboss-ei-apply:hover{background:var(--gemboss-primary-dark)}.gemboss-ei-apply:disabled{opacity:.6;cursor:default}.gemboss-ei-hint{margin:4px 0 0;font-size:12px;line-height:16px;color:var(--gemboss-text-muted)}.gemboss-ei-empty{padding:24px 16px;text-align:center;font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}.gemboss-ei-foot{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:8px 16px;border-top:1px solid var(--gemboss-divider);font-size:11px;color:var(--gemboss-text-muted)}.gemboss-ei-savedot{width:6px;height:6px;border-radius:50%;background:var(--gemboss-success);box-shadow:0 0 0 3px #2e8b572e}.gemboss-ei-savedot.busy{background:var(--gemboss-primary);box-shadow:0 0 0 3px var(--gemboss-primary-soft)}.gemboss-ei-foot.is-error{color:var(--gemboss-danger)}.gemboss-ei-foot.is-error .gemboss-ei-savedot{background:var(--gemboss-danger);box-shadow:0 0 0 3px #d72c0d29}.gemboss-ei-drag{cursor:grab;user-select:none}.gemboss-ei-drag:active{cursor:grabbing}.gemboss-ei-dragmask{position:fixed;inset:0;z-index:9998;cursor:grabbing}.gemboss-ei-block{border:1px solid var(--gemboss-divider);border-radius:12px;padding:12px;margin-bottom:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-block:last-child{margin-bottom:0}.gemboss-ei-block-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:12px;font-weight:700;color:var(--gemboss-text)}.gemboss-ei-block-x{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);width:22px;height:22px;border-radius:6px;font-size:11px;flex:none}.gemboss-ei-block-x:hover{background:var(--gemboss-hover);color:var(--gemboss-danger-strong)}.gemboss-ei-block-x:disabled{opacity:.5;cursor:default}.gemboss-ei-block .gemboss-ei-inp{background:var(--gemboss-surface)}.gemboss-ei-addrow{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}.gemboss-ei-img{display:flex;gap:8px;align-items:flex-start}.gemboss-ei-img-thumb{flex:none;width:52px;height:52px;border-radius:8px;border:1px solid var(--gemboss-divider);background:var(--gemboss-panel-bg) center/cover no-repeat;display:grid;place-items:center;color:var(--gemboss-text-muted);font-size:16px}.gemboss-ei-img-ctl{flex:1;min-width:0;display:flex;flex-direction:column;gap:6px}.gemboss-ei-img-actions{display:flex;gap:6px}.gemboss-ei-gen{display:flex;flex-direction:column;gap:8px;margin-top:8px;padding:8px;border:1px solid var(--gemboss-divider);border-radius:12px;background:var(--gemboss-panel-bg)}.gemboss-ei-gen .gemboss-ei-apply{align-self:flex-start;display:inline-flex;align-items:center;gap:6px}.gemboss-ei-gen .gemboss-narr-spin{width:11px;height:11px}.gemboss-ei-oos{margin:4px 16px 12px;padding:12px;border:1px solid var(--gemboss-divider);border-left:3px solid var(--gemboss-text-muted);border-radius:8px;background:var(--gemboss-panel-bg)}.gemboss-ei-oos-h{font-size:var(--gemboss-fs-micro);letter-spacing:.1em;text-transform:uppercase;color:var(--gemboss-text-muted);font-weight:700;margin-bottom:8px}.gemboss-ei-oos p{margin:0 0 6px;font-size:12px;color:var(--gemboss-text-muted);line-height:1.45}.gemboss-ei-oos p:last-child{margin-bottom:0}.gemboss-ei-oos b{color:var(--gemboss-text);font-weight:600}.gemboss-ei-edgebox{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}.gemboss-ei-value{display:grid;gap:8px}.gemboss-ei-value-row{display:flex;align-items:center;gap:12px}.gemboss-ei-value-box{flex:0 0 7em}.gemboss-ei-value-box input{text-align:right;font-variant-numeric:tabular-nums}.gemboss-ei-value-row .gemboss-ei-range{flex:1 1 auto;min-width:0}.gemboss-ei-edge{display:flex;flex-direction:column;align-items:center;gap:4px}.gemboss-ei-edge input{width:100%;text-align:center;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-variant-numeric:tabular-nums}.gemboss-ei-edge span{font-size:var(--gemboss-fs-micro);letter-spacing:.06em;color:var(--gemboss-text-muted);font-weight:700}.gemboss-ei-edge-scrub{align-self:stretch;min-height:24px;margin-top:4px;display:flex;align-items:center;justify-content:center;border-radius:var(--gemboss-radius-sm);cursor:ew-resize;user-select:none;touch-action:pan-y}@media (hover: hover){.gemboss-ei-edge-scrub:not([aria-disabled]):hover{background:var(--gemboss-hover);color:var(--gemboss-text)}}.gemboss-ei-edge-scrub[aria-disabled]{cursor:default}.gemboss-ec-dock-body{flex:1;min-height:0;overflow-y:auto;padding:var(--gemboss-ec-inset,12px)}.gemboss-ei-group{padding:16px 0}.gemboss-ei-group+.gemboss-ei-group{border-top:1px solid var(--gemboss-divider)}.gemboss-ei-grouphead{margin:0 0 12px;font-size:var(--gemboss-fs-micro,11px);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gemboss-ei-color{display:flex;flex-wrap:wrap;gap:8px;align-items:center}.gemboss-ei-color-why{display:block;flex:1 0 100%;margin:-4px 0 0;font-size:12px;line-height:16px;color:var(--gemboss-text-muted)}.gemboss-ei-color .gemboss-ei-inp{flex:1;min-width:0}.gemboss-ei-swatch{flex:none;width:32px;height:32px;padding:0;border:1px solid var(--gemboss-divider);border-radius:8px;background:var(--gemboss-surface);cursor:pointer}.gemboss-ei-swatch::-webkit-color-swatch-wrapper{padding:2px}.gemboss-ei-swatch::-webkit-color-swatch{border:none;border-radius:6px}.gemboss-ei-swatch[data-empty]::-webkit-color-swatch{background-image:linear-gradient(to top right,#0000 46%,var(--gemboss-text-muted,#686b71) 46% 54%,#0000 54%)}.gemboss-ei-swatch:disabled{cursor:default;opacity:.7}:is(.gemboss-ei-fld,.gemboss-ei-lbl)>label>.gemboss-ei-rangeval{float:right;font-weight:700;color:var(--gemboss-text);font-variant-numeric:tabular-nums}.gemboss-ei-range{width:100%;accent-color:var(--gemboss-primary);cursor:pointer}.gemboss-ei-range:disabled{cursor:default;opacity:.7}@media (max-width:760px){.gemboss-ei{position:static;width:auto;max-width:none;max-height:none;margin:8px;box-shadow:var(--gemboss-shadow-raised)}}.gemboss-ei-tree{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}.gemboss-ei-tnode{display:flex;align-items:center;gap:4px;flex-wrap:wrap;border-radius:6px;padding-right:4px}.gemboss-ei-tnode:hover{background:var(--gemboss-surface)}.gemboss-ei-tnode.on{background:var(--gemboss-primary-soft,var(--gemboss-surface));box-shadow:inset 2px 0 0 var(--gemboss-primary)}.gemboss-ei-tname{flex:1;min-width:0;display:flex;align-items:baseline;gap:6px;border:0;background:transparent;cursor:pointer;text-align:left;padding:6px 2px;color:var(--gemboss-text);font-size:12px;font-weight:600}.gemboss-ei-tname small{font-weight:400;font-size:10px;color:var(--gemboss-text-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.gemboss-ei-tacts{flex:none;display:flex;gap:1px;opacity:0;transition:opacity .12s}.gemboss-ei-tnode:hover .gemboss-ei-tacts,.gemboss-ei-tnode.on .gemboss-ei-tacts,.gemboss-ei-tacts:focus-within{opacity:1}.gemboss-ei-tacts button{border:0;background:transparent;cursor:pointer;color:var(--gemboss-text-muted);font-size:11px;line-height:1;padding:4px 6px;border-radius:6px}.gemboss-ei-tacts button:hover:not(:disabled){background:var(--gemboss-surface);color:var(--gemboss-text)}.gemboss-ei-tacts button:disabled{opacity:.3;cursor:default}.gemboss-ei-tadd{flex-basis:100%;padding:4px 2px 6px}.gemboss-editor-topbar--guest{grid-template-columns:1fr auto 1fr}.gemboss-guest-mark{flex:0 0 auto;display:block}.gemboss-guest-brand{font-weight:700;letter-spacing:-.02em;font-size:15px;margin-left:8px}.gemboss-guest-note{font-size:var(--gemboss-fs-caption);color:var(--gemboss-text-muted);border:1px solid var(--gemboss-divider-soft);border-radius:999px;padding:4px 12px;white-space:nowrap}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{display:flex;align-items:center;gap:16px;justify-content:flex-end}.gemboss-guest-signin{font-size:var(--gemboss-fs-body);font-weight:600;color:var(--gemboss-text-muted);text-decoration:none}.gemboss-guest-signin:hover{color:var(--gemboss-text)}.gemboss-guest-keep{border:0;border-radius:999px;background:var(--gemboss-primary);color:var(--gemboss-on-primary);cursor:pointer;font:inherit;font-size:var(--gemboss-fs-caption);font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:8px 20px;white-space:nowrap}.gemboss-guest-keep:hover{background:var(--gemboss-primary-dark)}@media (max-width: 720px){.gemboss-guest-note{display:none}}@media (max-width: 1000px){.gemboss-editor-topbar--guest{grid-template-columns:auto minmax(0,1fr)}}@media (max-width: 460px){.gemboss-guest-brand{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}.gemboss-editor-topbar--guest .gemboss-editor-tb-right{gap:8px}.gemboss-editor-topbar--guest .gemboss-guest-keep{padding-inline:12px}}@media (max-width: 400px){.gemboss-editor-topbar--guest{padding-inline:8px;column-gap:8px}}
package/src/gemboss-field.css CHANGED
@@ -1 +1 @@
1
- .gemboss-field,.gemboss-control{box-sizing:border-box;height:32px;min-width:0;padding:0 12px;font:inherit;font-size:var(--p-font-size-325, 13px);line-height:20px;color:var(--p-color-text, var(--gemboss-field-ink));background-color:var(--p-color-input-bg-surface, var(--gemboss-field-bg));border:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:var(--p-border-radius-200, 8px)}input[type=search]:is(.gemboss-field,.gemboss-field__bare){-webkit-appearance:none;appearance:none}.gemboss-field::placeholder{color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}.gemboss-field--tall{min-height:44px}.gemboss-field--narrow{padding:0 6px;appearance:textfield;-moz-appearance:textfield}.gemboss-field--narrow::-webkit-outer-spin-button,.gemboss-field--narrow::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gemboss-field:hover:not(:disabled),.gemboss-control:hover:not(:disabled){border-color:var(--p-color-input-border-hover, var(--gemboss-field-line-hover));background-color:var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover))}.gemboss-field:focus-visible,.gemboss-control:focus-visible{outline:2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.gemboss-field:disabled,.gemboss-control:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 47.9975em){.gemboss-field,.gemboss-control{font-size:16px;min-height:44px}}textarea.gemboss-field{height:auto;padding:6px 12px;resize:vertical}.gemboss-field--group{display:flex;align-items:center;gap:6px;height:auto;min-height:32px;padding-right:0;overflow:hidden}@media (max-width: 47.9975em){.gemboss-field--group{min-height:44px}}.gemboss-field--group:focus-within{outline:2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.gemboss-field--group input[type=color]{flex:none;align-self:stretch;width:44px;min-width:44px;height:auto;min-height:0;margin:-1px 0 -1px -12px;padding:0;border:0;border-right:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:0;background:none;cursor:pointer}.gemboss-field--group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.gemboss-field--group input[type=color]::-webkit-color-swatch{border:0;border-radius:0}.gemboss-field__bare{flex:1;min-width:0;align-self:stretch;margin-block:-1px;padding:0 12px 0 0;border:0;border-radius:0;outline:none;background:transparent;color:inherit;font:inherit}.gemboss-field__bare::placeholder{color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}@media (pointer: coarse){.gemboss-field,.gemboss-control{height:auto;min-height:44px}}.gemboss-control{cursor:pointer}.gemboss-control.gemboss-control--icon{width:32px;flex:0 0 auto;padding:0}@media (pointer: coarse){.gemboss-control.gemboss-control--icon{width:44px;min-width:44px}}
1
+ .gemboss-field,.gemboss-control{box-sizing:border-box;height:32px;min-width:0;padding:0 12px;font:inherit;font-size:var(--p-font-size-325, 13px);line-height:20px;color:var(--p-color-text, var(--gemboss-field-ink));background-color:var(--p-color-input-bg-surface, var(--gemboss-field-bg));border:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:var(--p-border-radius-200, 8px)}input[type=search]:is(.gemboss-field,.gemboss-field__bare){-webkit-appearance:none;appearance:none}.gemboss-field::placeholder{color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}.gemboss-field--tall{min-height:44px}.gemboss-field--narrow{padding:0 6px;appearance:textfield;-moz-appearance:textfield}.gemboss-field--narrow::-webkit-outer-spin-button,.gemboss-field--narrow::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.gemboss-field:hover:not(:disabled):not(:has(>.gemboss-field__bare:disabled)),.gemboss-control:hover:not(:disabled){border-color:var(--p-color-input-border-hover, var(--gemboss-field-line-hover));background-color:var(--p-color-input-bg-surface-hover, var(--gemboss-field-bg-hover))}.gemboss-field:focus-visible,.gemboss-control:focus-visible{outline:2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.gemboss-field:disabled,.gemboss-control:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 47.9975em){.gemboss-field,.gemboss-control{font-size:16px;min-height:44px}}textarea.gemboss-field{height:auto;padding:6px 12px;resize:vertical}.gemboss-field--group{display:flex;align-items:center;gap:6px;height:auto;min-height:32px;padding-right:0;overflow:hidden}@media (max-width: 47.9975em){.gemboss-field--group{min-height:44px}}.gemboss-field--group:focus-within{outline:2px solid var(--p-color-border-focus, var(--ui-focus, #5661f5));outline-offset:1px;border-color:var(--p-color-input-border-active, var(--gemboss-field-line-active))}.gemboss-field--group input[type=color]{flex:none;align-self:stretch;width:44px;min-width:44px;height:auto;min-height:0;margin:-1px 0 -1px -12px;padding:0;border:0;border-right:1px solid var(--p-color-input-border, var(--gemboss-field-line));border-radius:0;background:none;cursor:pointer}.gemboss-field--group input[type=color]::-webkit-color-swatch-wrapper{padding:0}.gemboss-field--group input[type=color]::-webkit-color-swatch{border:0;border-radius:0}.gemboss-field__bare{flex:1;min-width:0;align-self:stretch;margin-block:-1px;padding:0 12px 0 0;border:0;border-radius:0;outline:none;background:transparent;color:inherit;font:inherit}.gemboss-field__bare::placeholder{color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}.gemboss-field__suffix{flex:none;padding-right:12px;color:var(--p-color-text-secondary, var(--gemboss-field-placeholder))}.gemboss-field__bare:has(+.gemboss-field__suffix){padding-right:0}.gemboss-field--group:has(>.gemboss-field__bare:disabled){opacity:.5;cursor:not-allowed}.gemboss-field__bare:disabled{cursor:not-allowed}@media (pointer: coarse){.gemboss-field,.gemboss-control{height:auto;min-height:44px}}.gemboss-control{cursor:pointer}.gemboss-control.gemboss-control--icon{width:32px;flex:0 0 auto;padding:0}@media (pointer: coarse){.gemboss-control.gemboss-control--icon{width:44px;min-width:44px}}
package/src/icons.tsx CHANGED
@@ -65,6 +65,17 @@ const P = {
65
65
  signOut: <path d="M8 3.5H4v13h4M12.5 6.5 16 10l-3.5 3.5M16 10H8" />,
66
66
  // The assistant's mark (✦ in the surfaces' old hand-drawn buttons): a four-point star + a small one.
67
67
  sparkle: <><path d="M9 3.5c.4 2.9 1.6 4.1 4.5 4.5-2.9.4-4.1 1.6-4.5 4.5-.4-2.9-1.6-4.1-4.5-4.5 2.9-.4 4.1-1.6 4.5-4.5z" /><path d="M14.5 12.5c.2 1.3.7 1.8 2 2-1.3.2-1.8.7-2 2-.2-1.3-.7-1.8-2-2 1.3-.2 1.8-.7 2-2z" /></>,
68
+ // The team chat (20/10/2026): a channel's kind (hash, lock), a message's actions (reply, thread), the composer
69
+ // (paperclip, send), the phone's way back to the channel list, "jump to the latest", the people panel's toggle.
70
+ hash: <path d="M8 3.5 6.5 16.5M13.5 3.5 12 16.5M4 7.5h12.5M3.5 12.5H16" />,
71
+ lock: <><rect x="4.5" y="9" width="11" height="8" rx="1.5" /><path d="M7 9V6.5a3 3 0 0 1 6 0V9" /></>,
72
+ reply: <path d="M8 13.5 3.5 9 8 4.5M3.5 9h8a5 5 0 0 1 5 5v2" />,
73
+ thread: <><path d="M3 4.5h14v9H8.5L5 16.5v-3H3z" /><path d="M6.5 8h7M6.5 10.5h4.5" /></>,
74
+ paperclip: <path d="M15.5 9.5 10 15a3.5 3.5 0 0 1-5-5l6-6a2.3 2.3 0 0 1 3.3 3.3l-6 6a1.2 1.2 0 0 1-1.7-1.7l5.3-5.3" />,
75
+ send: <><path d="M3.5 10 16.5 3.5 13 16.5 9.5 11z" /><path d="M9.5 11 16.5 3.5" /></>,
76
+ chevronLeft: <path d="M12.5 4.5 7 10l5.5 5.5" />,
77
+ chevronsDown: <path d="M6 5.5l4 4 4-4M6 10.5l4 4 4-4" />,
78
+ panelRight: <><rect x="3" y="3.5" width="14" height="13" rx="2" /><path d="M12.5 3.5v13" /></>,
68
79
  } satisfies Record<string, React.ReactNode>;
69
80
  // `satisfies`, not a `Record<string, …>` annotation: the annotation widened `keyof` to `string`, so a
70
81
  // typo (`name="setings"`) type-checked and drew an empty box (review #3474).
package/src/index.ts CHANGED
@@ -33,8 +33,9 @@ export { GemMark } from "./GemMark";
33
33
  export { AuthContinueWithGemBoss, AuthError, AuthField, AuthFoot, AuthForm, AuthHelp, AuthLayout, PasswordField, AuthSubmit, continuesByItself, gemBossSignInUrl, GEMBOSS_ISSUER, type AuthBackdrop } from "./auth";
34
34
  export { AuthPageField } from "./auth-field";
35
35
  export { BrandLockup } from "./brand";
36
+ export { SiteBrand, SiteHeader } from "./site";
36
37
  // 0.36.0: the button after the logo and its panel of Gem services; the catalogue is plain data (also `@gemboss/ui/services`).
37
- export { ServiceSwitcher, SERVICES_HEALTH_URL, type ServiceSwitcherLabels, type ServiceSwitcherProps } from "./service-switcher";
38
+ export { ServiceSwitcher, Switcher, SERVICES_HEALTH_URL, type ServiceSwitcherLabels, type ServiceSwitcherProps, type SwitcherItem, type SwitcherProps } from "./service-switcher";
38
39
  export {
39
40
  GEM_SERVICES, SERVICE_GROUPS, SERVICE_TINTS, groupServices,
40
41
  type GemService, type ServiceGroup, type ServiceGroupId, type ServiceId, type ServiceTint,
@@ -56,3 +57,12 @@ export { THEME_KEY, themeScript } from "./theme-script";
56
57
  export { Reactions, ReactionPicker, type ReactionsProps } from "./reactions";
57
58
  export { ActionCard, ActionCardItem, ActionCardSection, ActionChange, type ActionCardItemProps, type ActionCardOutcome, type ActionCardProps } from "./action-card";
58
59
  export { isReactionEmoji, QUICK_REACTIONS, REACTION_EMOJI, REACTION_GROUPS, reactionLabel, reactionWords, searchReactions, toggleReaction, type Reaction } from "./reactions-data";
60
+ // The team chat layer (20/10/2026, README "The team chat layer"): GemCare's channel chat for every surface, with
61
+ // team-chat.css its own entry. The row rules (turns, day separators, the "New messages" line) are plain data.
62
+ export {
63
+ ChannelItem, ChannelRail, ChannelSection, ChatHeader, Composer, DaySeparator, JumpToLatest, Message, MessageList, NewMessagesLine,
64
+ PeoplePanel, PeopleSection, PersonRow, ReadReceipt, TeamChat, ThreadPanel, TEAM_CHAT_DRAWER_MAX, TEAM_CHAT_LABELS, TEAM_CHAT_PHONE_MAX,
65
+ type ChannelItemProps, type ChannelKind, type ChannelRailProps, type ChatHeaderProps, type ComposerProps, type MessageListProps, type MessageProps,
66
+ type PeoplePanelProps, type PersonRowProps, type Presence, type TeamChatLabels, type TeamChatPanel, type TeamChatProps, type TeamChatView, type ThreadPanelProps,
67
+ } from "./team-chat";
68
+ export { chatDayKey, chatDayWord, teamChatRows, type ChatRow, type ChatRowMessage, type ChatRowOptions } from "./team-chat-data";
package/src/service-switcher.css CHANGED
@@ -1 +1 @@
1
- :root{--gb-svc-iris: var(--gemboss-accent, #5661f5);--gb-svc-blue: #2563eb;--gb-svc-teal: #0d9488;--gb-svc-green: #16a34a;--gb-svc-amber: #d97706;--gb-svc-orange: #ea580c;--gb-svc-rose: #e11d48;--gb-svc-violet: #9333ea;--gb-svc-slate: #64748b;--gb-svc-wash: 14%}:root[data-theme=dark]{--gb-svc-blue: #60a5fa;--gb-svc-teal: #2dd4bf;--gb-svc-green: #4ade80;--gb-svc-amber: #fbbf24;--gb-svc-orange: #fb923c;--gb-svc-rose: #fb7185;--gb-svc-violet: #c084fc;--gb-svc-slate: #94a3b8;--gb-svc-wash: 22%}.gb-svc-trigger{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-md, 8px);background:transparent;color:var(--gemboss-text-muted);cursor:pointer;transition:background-color var(--gemboss-transition-base, .15s) ease}.gb-brand+.gb-svc-trigger{margin-left:-4px}.gb-svc-trigger:hover,.gb-svc-trigger[aria-expanded=true]{background:var(--gemboss-hover);color:var(--gemboss-text)}.gb-svc-trigger:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}@media (pointer: coarse),(max-width: 47.9975em){.gb-svc-trigger{width:44px;height:44px}}@media (max-width: 460px){.gb-brand+.gb-svc-trigger{width:40px;margin-left:-8px}}@media (max-width: 359.98px){.gemboss-platform-topbar:has(.gb-svc-trigger) .gemboss-topbar-center:not(:empty){min-width:56px;container:gb-svc-search / inline-size}}@container gb-svc-search (max-width: 95.98px){.gemboss-topbar-center .gemboss-topbar-search{grid-template-columns:minmax(0,1fr);padding:0}.gemboss-topbar-center .gemboss-topbar-search>*{grid-area:1 / 1}.gemboss-topbar-center .gemboss-topbar-search-icon{justify-self:center;pointer-events:none}.gemboss-topbar-center .gemboss-topbar-search-input{justify-self:stretch;width:auto;padding:0 8px}.gemboss-topbar-center .gemboss-topbar-search-input::placeholder{color:transparent}.gemboss-topbar-center .gemboss-topbar-search:is(:focus-within,:has(>.gemboss-topbar-search-input:not(:placeholder-shown)))>.gemboss-topbar-search-icon{visibility:hidden}.gemboss-topbar-center .gb-search-field-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}dialog.gb-svc{position:fixed;inset:var(--gb-svc-y, 62px) auto auto var(--gb-svc-x, 16px);margin:0;padding:0;box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-width:none;max-height:min(80vh,calc(100dvh - var(--gb-svc-y, 62px) - 12px));border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-lg, 12px);background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:var(--gemboss-shadow-overlay);overflow:hidden;z-index:400}dialog.gb-svc[open]{display:flex;flex-direction:column;animation:gb-svc-in .12s ease-out}dialog.gb-svc::backdrop{background:#00000029}@keyframes gb-svc-in{0%{opacity:0;transform:translateY(-4px)}}@keyframes gb-svc-up{0%{opacity:0;transform:translateY(16px)}}html:has(dialog.gb-svc:modal){overflow:hidden}.gb-svc__head{flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px 4px 16px}.gb-svc__title{flex:1 1 auto;min-width:0;margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--gemboss-text-strong)}.gb-svc__search{flex:none;padding:4px 16px 8px}.gb-svc__search svg{flex:none;width:16px;height:16px;color:var(--gemboss-text-muted)}.gb-svc__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 16px}.gb-svc__group+.gb-svc__group{margin-top:16px}.gb-svc__heading{margin:0 0 8px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gb-svc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:8px;margin:0;padding:0;list-style:none}.gb-svc__grid>li{display:flex;min-width:0}.gb-svc__tile{--gb-svc-tint: var(--gb-svc-slate);flex:1 1 auto;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-lg, 12px);background:var(--gemboss-surface);color:var(--gemboss-text);text-decoration:none;transition:background-color var(--gemboss-transition-fast, .12s) ease,border-color var(--gemboss-transition-fast, .12s) ease}.gb-svc__tile:hover{background:var(--gemboss-hover)}.gb-svc__tile:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:2px}.gb-svc__tile[aria-current=page]{border-color:var(--gemboss-accent);box-shadow:inset 0 0 0 1px var(--gemboss-accent)}.gb-svc__tile[data-tint=iris]{--gb-svc-tint: var(--gb-svc-iris)}.gb-svc__tile[data-tint=blue]{--gb-svc-tint: var(--gb-svc-blue)}.gb-svc__tile[data-tint=teal]{--gb-svc-tint: var(--gb-svc-teal)}.gb-svc__tile[data-tint=green]{--gb-svc-tint: var(--gb-svc-green)}.gb-svc__tile[data-tint=amber]{--gb-svc-tint: var(--gb-svc-amber)}.gb-svc__tile[data-tint=orange]{--gb-svc-tint: var(--gb-svc-orange)}.gb-svc__tile[data-tint=rose]{--gb-svc-tint: var(--gb-svc-rose)}.gb-svc__tile[data-tint=violet]{--gb-svc-tint: var(--gb-svc-violet)}.gb-svc__tile[data-tint=slate]{--gb-svc-tint: var(--gb-svc-slate)}.gb-svc__mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:8px;border-radius:var(--gemboss-radius-lg, 12px);background:color-mix(in srgb,var(--gb-svc-tint) var(--gb-svc-wash),var(--gemboss-surface));color:color-mix(in srgb,var(--gb-svc-tint) 78%,var(--gemboss-text-strong))}.gb-svc__name{max-width:100%;font-size:13px;line-height:18px;font-weight:600;color:var(--gemboss-text-strong);overflow-wrap:anywhere}.gb-svc__purpose{max-width:100%;font-size:12px;line-height:16px;color:var(--gemboss-text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.gb-svc__empty{margin:0;padding:24px 0;font-size:13px;color:var(--gemboss-text-muted);text-align:center}.gb-svc__foot{flex:none;padding:4px 16px;border-top:1px solid var(--gemboss-divider-soft)}.gb-svc__all{display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:13px;font-weight:500;color:var(--gemboss-accent-strong);text-decoration:none}.gb-svc__all:hover{text-decoration:underline}.gb-svc__all:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:2px;border-radius:4px}@media (pointer: coarse){.gb-svc__all{min-height:44px}}@media (max-width: 640px){dialog.gb-svc{inset:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}dialog.gb-svc[open]{animation-name:gb-svc-up}.gb-svc__head{padding:8px 8px 4px 16px;border-bottom:0}.gb-svc__search,.gb-svc__body{padding-inline:12px}.gb-svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gb-svc__foot{padding-inline:12px}.gb-svc__all{min-height:44px}}@media (prefers-reduced-motion: reduce){dialog.gb-svc[open]{animation:none}}
1
+ :root{--gb-svc-iris: var(--gemboss-accent, #5661f5);--gb-svc-blue: #2563eb;--gb-svc-teal: #0d9488;--gb-svc-green: #16a34a;--gb-svc-amber: #d97706;--gb-svc-orange: #ea580c;--gb-svc-rose: #e11d48;--gb-svc-violet: #9333ea;--gb-svc-slate: #64748b;--gb-svc-wash: 14%}:root[data-theme=dark]{--gb-svc-blue: #60a5fa;--gb-svc-teal: #2dd4bf;--gb-svc-green: #4ade80;--gb-svc-amber: #fbbf24;--gb-svc-orange: #fb923c;--gb-svc-rose: #fb7185;--gb-svc-violet: #c084fc;--gb-svc-slate: #94a3b8;--gb-svc-wash: 22%}.gb-svc-trigger{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;margin:0;padding:0;box-sizing:border-box;border:0;border-radius:var(--gemboss-radius-md, 8px);background:transparent;color:var(--gemboss-text-muted);cursor:pointer;transition:background-color var(--gemboss-transition-base, .15s) ease}.gb-brand+.gb-svc-trigger{margin-left:-4px}.gb-svc-trigger:hover,.gb-svc-trigger[aria-expanded=true]{background:var(--gemboss-hover);color:var(--gemboss-text)}.gb-svc-trigger:focus-visible{outline:2px solid var(--gemboss-primary);outline-offset:2px}@media (pointer: coarse),(max-width: 47.9975em){.gb-svc-trigger{width:44px;height:44px}}@media (max-width: 460px){.gb-brand+.gb-svc-trigger{width:40px;margin-left:-8px}}@media (max-width: 359.98px){.gemboss-platform-topbar:has(.gb-svc-trigger) .gemboss-topbar-center:not(:empty){min-width:56px;container:gb-svc-search / inline-size}}@container gb-svc-search (max-width: 95.98px){.gemboss-topbar-center .gemboss-topbar-search{grid-template-columns:minmax(0,1fr);padding:0}.gemboss-topbar-center .gemboss-topbar-search>*{grid-area:1 / 1}.gemboss-topbar-center .gemboss-topbar-search-icon{justify-self:center;pointer-events:none}.gemboss-topbar-center .gemboss-topbar-search-input{justify-self:stretch;width:auto;padding:0 8px}.gemboss-topbar-center .gemboss-topbar-search-input::placeholder{color:transparent}.gemboss-topbar-center .gemboss-topbar-search:is(:focus-within,:has(>.gemboss-topbar-search-input:not(:placeholder-shown)))>.gemboss-topbar-search-icon{visibility:hidden}.gemboss-topbar-center .gb-search-field-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}}dialog.gb-svc{position:fixed;inset:var(--gb-svc-y, 62px) auto auto var(--gb-svc-x, 16px);margin:0;padding:0;box-sizing:border-box;width:min(760px,calc(100vw - 24px));max-width:none;max-height:min(80vh,calc(100dvh - var(--gb-svc-y, 62px) - 12px));border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-lg, 12px);background:var(--gemboss-surface);color:var(--gemboss-text);box-shadow:var(--gemboss-shadow-overlay);overflow:hidden;z-index:400}dialog.gb-svc[open]{display:flex;flex-direction:column;animation:gb-svc-in .12s ease-out}dialog.gb-svc::backdrop{background:#00000029}@keyframes gb-svc-in{0%{opacity:0;transform:translateY(-4px)}}@keyframes gb-svc-up{0%{opacity:0;transform:translateY(16px)}}html:has(dialog.gb-svc:modal){overflow:hidden}.gb-svc__head{flex:none;display:flex;align-items:center;gap:12px;padding:10px 12px 4px 16px}.gb-svc__title{flex:1 1 auto;min-width:0;margin:0;font-size:14px;line-height:20px;font-weight:650;color:var(--gemboss-text-strong)}.gb-svc__search{flex:none;padding:4px 16px 8px}.gb-svc__search svg{flex:none;width:16px;height:16px;color:var(--gemboss-text-muted)}.gb-svc__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:4px 16px 16px}.gb-svc__group+.gb-svc__group{margin-top:16px}.gb-svc__heading{margin:0 0 8px;font-size:11px;line-height:16px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--gemboss-text-muted)}.gb-svc__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:8px;margin:0;padding:0;list-style:none}.gb-svc__grid>li{display:flex;min-width:0}.gb-svc__tile{--gb-svc-tint: var(--gb-svc-slate);flex:1 1 auto;min-width:0;box-sizing:border-box;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:12px;border:1px solid var(--gemboss-divider);border-radius:var(--gemboss-radius-lg, 12px);background:var(--gemboss-surface);color:var(--gemboss-text);text-decoration:none;transition:background-color var(--gemboss-transition-fast, .12s) ease,border-color var(--gemboss-transition-fast, .12s) ease}.gb-svc__tile:hover{background:var(--gemboss-hover)}.gb-svc__tile:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:2px}.gb-svc__tile[aria-current=page]{border-color:var(--gemboss-accent);box-shadow:inset 0 0 0 1px var(--gemboss-accent)}.gb-svc__tile[data-tint=iris]{--gb-svc-tint: var(--gb-svc-iris)}.gb-svc__tile[data-tint=blue]{--gb-svc-tint: var(--gb-svc-blue)}.gb-svc__tile[data-tint=teal]{--gb-svc-tint: var(--gb-svc-teal)}.gb-svc__tile[data-tint=green]{--gb-svc-tint: var(--gb-svc-green)}.gb-svc__tile[data-tint=amber]{--gb-svc-tint: var(--gb-svc-amber)}.gb-svc__tile[data-tint=orange]{--gb-svc-tint: var(--gb-svc-orange)}.gb-svc__tile[data-tint=rose]{--gb-svc-tint: var(--gb-svc-rose)}.gb-svc__tile[data-tint=violet]{--gb-svc-tint: var(--gb-svc-violet)}.gb-svc__tile[data-tint=slate]{--gb-svc-tint: var(--gb-svc-slate)}.gb-svc__mark{flex:none;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;margin-bottom:8px;border-radius:var(--gemboss-radius-lg, 12px);background:color-mix(in srgb,var(--gb-svc-tint) var(--gb-svc-wash),var(--gemboss-surface));color:color-mix(in srgb,var(--gb-svc-tint) 78%,var(--gemboss-text-strong))}.gb-svc__name{max-width:100%;font-size:13px;line-height:18px;font-weight:600;color:var(--gemboss-text-strong);overflow-wrap:anywhere}.gb-svc__purpose{max-width:100%;font-size:12px;line-height:16px;color:var(--gemboss-text-muted);display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}.gb-svc__grid--media{grid-template-columns:repeat(auto-fill,minmax(208px,1fr));gap:12px}.gb-svc__tile--media{padding:8px 8px 12px}.gb-svc__tile--media>.gb-svc__name,.gb-svc__tile--media>.gb-svc__purpose{padding-inline:4px}.gb-svc__media{display:block;width:100%;aspect-ratio:16 / 9;margin-bottom:8px;overflow:hidden;border-radius:var(--gemboss-radius-md, 8px);background:radial-gradient(120% 100% at 85% 0%,color-mix(in srgb,var(--gb-svc-tint) calc(var(--gb-svc-wash) * 2),var(--gemboss-surface)),transparent 70%),color-mix(in srgb,var(--gb-svc-tint) var(--gb-svc-wash),var(--gemboss-surface))}.gb-svc__media img{display:block;width:100%;height:100%;object-fit:cover}.gb-svc__media-glyph{display:grid;place-items:center;width:100%;height:100%;font-size:44px;line-height:1;font-weight:700;color:color-mix(in srgb,var(--gb-svc-tint) 78%,var(--gemboss-text-strong))}.gb-svc__glyph{font-size:20px;line-height:1;font-weight:700}.gb-svc__badge{display:inline-block;margin-left:6px;padding:0 6px;border-radius:999px;vertical-align:1px;font-size:11px;line-height:16px;font-weight:600;white-space:nowrap;background:color-mix(in srgb,var(--gemboss-accent) 12%,var(--gemboss-surface));color:var(--gemboss-accent-strong)}.gb-svc__empty{margin:0;padding:24px 0;font-size:13px;color:var(--gemboss-text-muted);text-align:center}.gb-svc__foot{flex:none;padding:4px 16px;border-top:1px solid var(--gemboss-divider-soft)}.gb-svc__all{display:inline-flex;align-items:center;gap:4px;min-height:36px;font-size:13px;font-weight:500;color:var(--gemboss-accent-strong);text-decoration:none}.gb-svc__all:hover{text-decoration:underline}.gb-svc__all:focus-visible{outline:2px solid var(--gemboss-accent);outline-offset:2px;border-radius:4px}@media (pointer: coarse){.gb-svc__all{min-height:44px}}@media (max-width: 640px){dialog.gb-svc{inset:0;width:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left)}dialog.gb-svc[open]{animation-name:gb-svc-up}.gb-svc__head{padding:8px 8px 4px 16px;border-bottom:0}.gb-svc__search,.gb-svc__body{padding-inline:12px}.gb-svc__grid{grid-template-columns:repeat(2,minmax(0,1fr))}.gb-svc__grid--media{gap:8px}.gb-svc__media-glyph{font-size:36px}.gb-svc__foot{padding-inline:12px}.gb-svc__all{min-height:44px}}@media (prefers-reduced-motion: reduce){dialog.gb-svc[open]{animation:none}}
package/src/service-switcher.tsx CHANGED
@@ -22,8 +22,8 @@
22
22
  import "./service-switcher.css";
23
23
  import React, { useEffect, useId, useMemo, useRef, useState } from "react";
24
24
  import { useModalDialog } from "./dialog";
25
- import { Icon } from "./icons";
26
- import { GEM_SERVICES, groupServices, type GemService, type ServiceId } from "./services";
25
+ import { Icon, type IconName } from "./icons";
26
+ import { GEM_SERVICES, SERVICE_GROUPS, type GemService, type ServiceId, type ServiceTint } from "./services";
27
27
 
28
28
  /** GemFactory's services page: every service and its health. */
29
29
  export const SERVICES_HEALTH_URL = "https://gemfactory.ops.gemboss.ai/services";
@@ -56,6 +56,50 @@ export interface ServiceSwitcherProps {
56
56
  className?: string;
57
57
  }
58
58
 
59
+ /**
60
+ * One tile of a `Switcher` (0.40.0). The service tiles are a mark (an icon) + a name + a line; a tile with `media` is a
61
+ * card with an illustration on top (a community, a workspace: Chris 20/10/2026, "kèm hình ảnh minh hoạ, tên và
62
+ * description … full popup như các dịch vụ gemboss").
63
+ */
64
+ export interface SwitcherItem {
65
+ id: string;
66
+ name: string;
67
+ /** One short plain sentence under the name (two lines at most are shown). */
68
+ description?: string;
69
+ /** Opened in the same tab. */
70
+ href: string;
71
+ /** A `groups` id; an item whose group is not listed goes in a last group without a heading. */
72
+ group?: string;
73
+ /** An illustration on top of the tile: an image (`src`), or, without one, `glyph` (an emoji, two letters) drawn big
74
+ * on a panel tinted with `tint`. */
75
+ media?: { src?: string | null; glyph?: string };
76
+ /** The small mark of a tile without `media`: a kit icon … */
77
+ icon?: IconName;
78
+ /** … or a short text / emoji. */
79
+ glyph?: string;
80
+ /** The hue of the mark or the illustration panel (SERVICE_TINTS). Default slate. */
81
+ tint?: ServiceTint;
82
+ /** A chip after the name: "Apply", "New". */
83
+ badge?: string;
84
+ }
85
+
86
+ export interface SwitcherProps {
87
+ items: readonly SwitcherItem[];
88
+ /** The groups, in their order. Absent: one group without a heading. */
89
+ groups?: ReadonlyArray<{ id: string; title: string }>;
90
+ /** The item this page belongs to: `aria-current="page"` and the accent ring. */
91
+ current?: string;
92
+ labels?: ServiceSwitcherLabels;
93
+ /** The foot: a link (`allHref`, worded `labels.all`) … */
94
+ allHref?: string | null;
95
+ /** … or the app's own foot (actions: "Create a community"). Wins over `allHref`. */
96
+ foot?: React.ReactNode;
97
+ search?: boolean;
98
+ /** The button's glyph. Default the nine-dot "apps". */
99
+ triggerIcon?: IconName;
100
+ className?: string;
101
+ }
102
+
59
103
  const LABELS: Required<ServiceSwitcherLabels> = {
60
104
  trigger: "Switch service", title: "Gem services", close: "Close", search: "Find a service",
61
105
  noMatch: "No service matches “{query}”.", all: "All services and their health",
@@ -85,25 +129,39 @@ function rowStep(tiles: HTMLElement[], i: number, dir: 1 | -1): number {
85
129
  return best;
86
130
  }
87
131
 
88
- export function ServiceSwitcher({ current, services = GEM_SERVICES, labels, allHref = SERVICES_HEALTH_URL, search = true, className }: ServiceSwitcherProps) {
132
+ /** The groups to draw, in order, after a search: each with the items it holds (an unlisted group's items last, untitled). */
133
+ function groupItems(items: readonly SwitcherItem[], groups: SwitcherProps["groups"], q: string) {
134
+ const order = groups ?? [];
135
+ const known = new Set(order.map((g) => g.id));
136
+ const all = [...order.map((g) => ({ id: g.id, title: g.title, items: items.filter((s) => s.group === g.id) })),
137
+ { id: "", title: "", items: items.filter((s) => !s.group || !known.has(s.group)) }];
138
+ return all
139
+ .map((g) => ({ ...g, items: q ? g.items.filter((s) => `${s.name} ${s.description ?? ""} ${s.id} ${g.title}`.toLowerCase().includes(q)) : g.items }))
140
+ .filter((g) => g.items.length > 0);
141
+ }
142
+
143
+ /**
144
+ * Switcher (0.40.0): the nine-dot button and its panel, for any list — ServiceSwitcher is this with the Gem services.
145
+ * Same dialog, search, groups, keyboard and phone sheet; a tile is either the service kind (mark + name + line) or, with
146
+ * `media`, a card with an illustration on top. GemCommunity opens its groups with it.
147
+ */
148
+ export function Switcher({ items, groups, current, labels, allHref = null, foot, search = true, triggerIcon = "apps", className }: SwitcherProps) {
89
149
  const L = { ...LABELS, ...labels };
90
150
  const [open, setOpen] = useState(false);
91
151
  const [query, setQuery] = useState("");
92
- const [roving, setRoving] = useState<ServiceId>(current);
152
+ const [roving, setRoving] = useState<string | undefined>(current);
93
153
  const button = useRef<HTMLButtonElement>(null);
94
154
  const field = useRef<HTMLInputElement>(null);
95
- // Each opening starts with every service shown (cleared on close: SettingsDialog's review #4073).
155
+ // Each opening starts with every item shown (cleared on close: SettingsDialog's review #4073).
96
156
  const { ref, onClick, onPointerDown } = useModalDialog(open, () => { setOpen(false); setQuery(""); });
97
157
  const id = useId();
98
158
  const panelId = `${id}svc`, titleId = `${id}svc-t`;
99
159
 
100
160
  const q = query.trim().toLowerCase();
101
- const groups = useMemo(() => groupServices(services)
102
- .map((g) => ({ ...g, services: q ? g.services.filter((s) => `${s.name} ${s.purpose} ${s.id} ${g.title}`.toLowerCase().includes(q)) : g.services }))
103
- .filter((g) => g.services.length > 0), [services, q]);
104
- const shown = groups.flatMap((g) => g.services.map((s) => s.id));
105
- // The one tile in the Tab order: the last one focused, else the current service, else the first shown.
106
- const tabStop = shown.includes(roving) ? roving : shown.includes(current) ? current : shown[0];
161
+ const shownGroups = useMemo(() => groupItems(items, groups, q), [items, groups, q]);
162
+ const shown = shownGroups.flatMap((g) => g.items.map((s) => s.id));
163
+ // The one tile in the Tab order: the last one focused, else the current item, else the first shown.
164
+ const tabStop = roving && shown.includes(roving) ? roving : current && shown.includes(current) ? current : shown[0];
107
165
 
108
166
  /** Under the bar that holds the button, from the brand's left edge (the logo link before the button; the button itself
109
167
  * without one). The bar is the closest `BAR` around the button (0.37.1: a surface's own `<header>` too, not only the
@@ -122,7 +180,7 @@ export function ServiceSwitcher({ current, services = GEM_SERVICES, labels, allH
122
180
  };
123
181
  useEffect(() => {
124
182
  if (!open) return undefined;
125
- // After useModalDialog's showModal (effects run in order): the current service's tile (the first one when the list
183
+ // After useModalDialog's showModal (effects run in order): the current item's tile (the first one when the list
126
184
  // has no current), not the corner ✕ the browser picks, and not the search box (on a phone it would pull up the
127
185
  // keyboard over the grid).
128
186
  setRoving(current);
@@ -172,7 +230,7 @@ export function ServiceSwitcher({ current, services = GEM_SERVICES, labels, allH
172
230
  <>
173
231
  <button ref={button} type="button" className={cx("gb-svc-trigger", className)} aria-haspopup="dialog" aria-expanded={open}
174
232
  aria-controls={panelId} aria-label={L.trigger} title={L.trigger} onClick={() => { place(); setOpen(true); }}>
175
- <Icon name="apps" size={20} />
233
+ <Icon name={triggerIcon} size={20} />
176
234
  </button>
177
235
  <dialog ref={ref} id={panelId} className="gb-svc" aria-labelledby={titleId} onClick={onClick} onPointerDown={onPointerDown}>
178
236
  <div className="gb-svc__head">
@@ -193,25 +251,36 @@ export function ServiceSwitcher({ current, services = GEM_SERVICES, labels, allH
193
251
  </div>
194
252
  ) : null}
195
253
  <div className="gb-svc__body" onKeyDown={onGridKey}>
196
- {groups.length === 0 ? <p className="gb-svc__empty" role="status">{L.noMatch.replace("{query}", query.trim())}</p> : groups.map((g) => (
197
- <div key={g.id} className="gb-svc__group" role="group" aria-labelledby={`${id}svc-${g.id}`}>
198
- <h3 className="gb-svc__heading" id={`${id}svc-${g.id}`}>{g.title}</h3>
199
- <ul className="gb-svc__grid" role="list">
200
- {g.services.map((s) => (
201
- <li key={s.id}>
202
- <a className="gb-svc__tile" href={s.url} data-tint={s.tint} aria-current={s.id === current ? "page" : undefined}
203
- tabIndex={s.id === tabStop ? 0 : -1} onFocus={() => setRoving(s.id)} onClick={onTileClick}>
204
- <span className="gb-svc__mark" aria-hidden="true"><Icon name={s.icon} size={22} /></span>
205
- <span className="gb-svc__name">{s.name}</span>
206
- <span className="gb-svc__purpose">{s.purpose}</span>
207
- </a>
208
- </li>
209
- ))}
210
- </ul>
211
- </div>
212
- ))}
254
+ {shownGroups.length === 0 ? <p className="gb-svc__empty" role="status">{L.noMatch.replace("{query}", query.trim())}</p> : shownGroups.map((g) => {
255
+ const hid = `${id}svc-${g.id || "rest"}`;
256
+ const media = g.items.some((s) => s.media);
257
+ return (
258
+ <div key={g.id || "rest"} className="gb-svc__group" role="group" {...(g.title ? { "aria-labelledby": hid } : { "aria-label": L.title })}>
259
+ {g.title ? <h3 className="gb-svc__heading" id={hid}>{g.title}</h3> : null}
260
+ <ul className={cx("gb-svc__grid", media && "gb-svc__grid--media")} role="list">
261
+ {g.items.map((s) => (
262
+ <li key={s.id}>
263
+ <a className={cx("gb-svc__tile", s.media && "gb-svc__tile--media")} href={s.href} data-tint={s.tint}
264
+ aria-current={s.id === current ? "page" : undefined}
265
+ tabIndex={s.id === tabStop ? 0 : -1} onFocus={() => setRoving(s.id)} onClick={onTileClick}>
266
+ {s.media ? (
267
+ <span className="gb-svc__media" aria-hidden="true">
268
+ {s.media.src ? <img src={s.media.src} alt="" loading="lazy" decoding="async" /> : <span className="gb-svc__media-glyph">{s.media.glyph}</span>}
269
+ </span>
270
+ ) : (
271
+ <span className="gb-svc__mark" aria-hidden="true">{s.icon ? <Icon name={s.icon} size={22} /> : <span className="gb-svc__glyph">{s.glyph}</span>}</span>
272
+ )}
273
+ <span className="gb-svc__name">{s.name}{s.badge ? <span className="gb-svc__badge">{s.badge}</span> : null}</span>
274
+ {s.description ? <span className="gb-svc__purpose">{s.description}</span> : null}
275
+ </a>
276
+ </li>
277
+ ))}
278
+ </ul>
279
+ </div>
280
+ );
281
+ })}
213
282
  </div>
214
- {allHref ? (
283
+ {foot ? <div className="gb-svc__foot">{foot}</div> : allHref ? (
215
284
  <div className="gb-svc__foot">
216
285
  <a className="gb-svc__all" href={allHref} onClick={onTileClick}>{L.all}<span aria-hidden="true">→</span></a>
217
286
  </div>
@@ -220,3 +289,11 @@ export function ServiceSwitcher({ current, services = GEM_SERVICES, labels, allH
220
289
  </>
221
290
  );
222
291
  }
292
+
293
+ /** The Gem services: `Switcher` with GEM_SERVICES in the groups of SERVICE_GROUPS, the service's own mark and tint. */
294
+ export function ServiceSwitcher({ current, services = GEM_SERVICES, labels, allHref = SERVICES_HEALTH_URL, search = true, className }: ServiceSwitcherProps) {
295
+ const items = useMemo(() => services.map((s): SwitcherItem => ({
296
+ id: s.id, name: s.name, description: s.purpose, href: s.url, group: s.group, icon: s.icon, tint: s.tint,
297
+ })), [services]);
298
+ return <Switcher items={items} groups={SERVICE_GROUPS} current={current} labels={labels} allHref={allHref} search={search} className={className} />;
299
+ }