/* One preview canvas, with adjustments scoped to the selected item. */
html,body,*{scrollbar-width:none!important}*::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}
.detail-layout{grid-template-columns:minmax(0,1fr)}.detail-aside{display:none}.detail-heading h1{display:flex;align-items:baseline;gap:12px}.detail-heading h1>span{display:none}.component-title>span{display:none!important}.component-title{white-space:nowrap;min-width:0}.component-title strong{overflow:hidden;text-overflow:ellipsis}
.preview-workbench{border:1px solid var(--klic-semantic-color-border);border-radius:10px;overflow:hidden;container-type:inline-size;margin-top:18px}
.preview-workbench-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--klic-semantic-color-border);background:var(--klic-semantic-color-panel)}
.preview-workbench-head>span{font:11px var(--klic-ui-mono);color:var(--klic-semantic-color-muted)}.preview-workbench-actions{display:flex;align-items:center;gap:7px}.preview-workbench-head .btn{font-size:12px;min-height:30px;height:auto;padding:6px 9px}
.preview-workbench-body{display:grid;grid-template-columns:minmax(0,1fr);align-items:stretch;background:var(--klic-semantic-color-panel)}
.preview-canvas-viewport{min-width:0;width:100%;overflow:auto;overscroll-behavior:contain;background:var(--klic-ui-soft);min-height:430px;padding:24px 0;display:flex;align-items:stretch;scroll-padding:12px}
.preview-canvas{flex-shrink:0;min-width:0;margin-inline:auto;align-self:center;container-type:inline-size}
.preview-scope{background:var(--klic-semantic-color-panel);color:var(--klic-semantic-color-text);font-family:var(--klic-ui-font);min-height:330px;padding:36px 28px;display:flex;align-items:center;justify-content:center;border-block:1px solid var(--klic-semantic-color-border)}
.preview-scope .specimen-content{max-width:100%;width:100%;min-width:0;display:flex;align-items:center;justify-content:center}.preview-scope .specimen-content>*{max-width:100%}.preview-scope :is(h1,h2,h3){font-family:var(--klic-heading-font)}
.preview-scope :is(.btn,.demo-input,.mini-card,.demo-select,.demo-accordion,.dialog-mini){border-radius:var(--klic-custom-radius)}.preview-scope[data-density=compact] :is(.btn,.demo-input){min-height:28px;padding-block:5px}.preview-scope[data-density=relaxed] :is(.btn,.demo-input){min-height:44px;padding-block:11px}.preview-scope[data-avatars=false] .root-person{background-image:none!important;color:var(--klic-semantic-color-accent)!important}
/* Native top-layer popover: never reserves any preview width. */
.preview-settings{position:fixed;inset:auto;margin:0;width:360px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 24px);overflow:auto;padding:0;border:1px solid var(--klic-semantic-color-border);border-radius:14px;background:var(--klic-semantic-color-panel);color:var(--klic-semantic-color-text);box-shadow:0 20px 70px #0d20442b,0 3px 12px #0d204415;font-family:var(--klic-ui-font);z-index:1100;overscroll-behavior:contain}
.preview-settings::backdrop{background:transparent}
.preview-settings[hidden]{display:none!important}
.preview-settings-heading{position:sticky;top:0;z-index:1;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--klic-semantic-color-border);background:var(--klic-semantic-color-panel)}
.preview-settings-heading>div{display:flex;align-items:center;gap:8px}.preview-settings-heading strong{font-size:13px;letter-spacing:-.2px}.preview-settings-heading>div>svg{width:15px;color:var(--klic-semantic-color-accent)}.preview-settings-heading>div>span{font:10px var(--klic-ui-mono);color:var(--klic-semantic-color-muted);padding-left:6px}.preview-settings-heading .icon-button{width:26px;height:26px}
.preview-settings-body{padding:16px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px}
.preview-scope-note,.preview-device-presets,.preview-setting-actions,.preview-global-link{grid-column:1/-1}
.preview-customize-trigger.is-modified{border-color:var(--klic-semantic-color-accent);color:var(--klic-semantic-color-accent)}.preview-modified-dot{width:5px;height:5px;border-radius:50%;background:currentColor}.preview-modified-dot[hidden]{display:none}
.preview-scope-note{font-size:11px;color:var(--klic-semantic-color-muted);margin:0 0 14px!important;line-height:1.5!important}.preview-device-presets{display:flex;gap:4px;margin:0 0 18px}.preview-device-presets button{flex:1;display:grid;place-items:center;height:29px;border:1px solid var(--klic-semantic-color-border);background:transparent;border-radius:5px;color:var(--klic-semantic-color-muted);cursor:pointer}.preview-device-presets svg{width:14px;height:14px}.preview-device-presets button[aria-pressed=true]{background:var(--klic-ui-selected);color:var(--klic-semantic-color-accent);border-color:var(--klic-semantic-color-accent)}
.preview-field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;font-size:11px;min-width:0}.preview-field>span{display:flex;justify-content:space-between;gap:8px;color:var(--klic-semantic-color-muted)}.preview-field output{font:11px var(--klic-ui-mono);color:var(--klic-semantic-color-text)}.preview-field select{min-width:0;max-width:100%;width:100%;font:12px var(--klic-ui-font);color:var(--klic-semantic-color-text);background:var(--klic-semantic-color-surface);border:1px solid var(--klic-semantic-color-border);border-radius:5px;padding:7px 5px}.preview-field input[type=range]{width:100%;margin:0;height:16px;accent-color:var(--klic-semantic-color-accent);cursor:ew-resize}.preview-checkbox{display:flex;align-items:center;gap:7px;font-size:11px;margin:12px 0}.preview-checkbox input{accent-color:var(--klic-semantic-color-accent)}.preview-setting-actions{display:flex;gap:5px;border-top:1px solid var(--klic-semantic-color-border);padding-top:14px;margin-top:14px}.preview-setting-actions .btn{font-size:11px;padding:6px;min-height:29px;height:auto;gap:5px;flex:1}.preview-setting-actions .btn svg{width:12px}.preview-global-link{font-size:11px;display:flex;justify-content:space-between;align-items:center;margin-top:14px;color:var(--klic-semantic-color-muted)}.preview-global-link svg{width:12px}
.preview-workbench .block-runtime-stage{min-width:0;overflow:auto;border:0;border-radius:0;min-height:600px;padding:0;background:var(--klic-ui-soft)}.preview-workbench .block-runtime-frame{flex-shrink:0;margin-inline:auto;border:0;overflow:visible;max-width:none}.preview-workbench .block-runtime-frame iframe{display:block;width:100%;height:680px;min-height:500px;border:0;background:var(--klic-semantic-color-panel)}.preview-workbench .block-preview-top{border:0;padding:10px 14px;font-size:11px}.preview-workbench .block-runtime-stage.block-expanded{position:fixed;inset:0;z-index:1000;padding-top:58px}.preview-workbench:has(.block-expanded){container-type:normal}.preview-workbench .block-expanded iframe{height:calc(100dvh / var(--klic-ui-scale,1) - 70px)}
.detail-controls{border:0;border-top:1px solid var(--klic-semantic-color-border);padding:16px}.component-guide-section .component-guide-live{margin:16px 0}
@container(max-width:760px){.preview-workbench-body{grid-template-columns:minmax(0,1fr)}.preview-scope-note,.preview-device-presets,.preview-setting-actions,.preview-global-link{grid-column:1/-1}.preview-canvas-viewport{min-height:280px;padding-block:20px}.preview-scope{padding:28px 18px;min-height:250px}.preview-workbench .block-runtime-stage{min-height:470px}.preview-workbench .block-runtime-frame iframe{height:540px}}
@container(max-width:340px){.preview-settings-body{gap:0 12px}.preview-workbench-head{flex-wrap:wrap}.preview-scope{padding:20px 12px}}

.preview-scope :is(input:not([type=radio]):not([type=range]),select,textarea,button){border-radius:var(--klic-custom-radius)}
.preview-scope .row-check{border-radius:min(var(--klic-custom-radius),6px)}

.preview-setting-actions{flex-wrap:wrap}.preview-setting-actions .btn{flex:1 0 30%;min-width:0}.preview-setting-actions .btn svg{display:none}
.demo-dialog[data-preview-context=true]{font-family:var(--klic-ui-font);border-radius:var(--klic-custom-radius)}.demo-dialog.sheet[data-preview-context=true]{border-radius:0}.demo-dialog[data-preview-context=true] :is(input,button,select,textarea){font-family:var(--klic-ui-font);border-radius:var(--klic-custom-radius)}