/* The catalog occupies the left rail; the live shared control sits in the content area. */
.component-catalog{position:fixed;top:var(--nav-height);bottom:0;left:0;width:var(--controls-width);background:white;border-right:1px solid var(--line);padding:24px 16px}
.component-catalog h2{font-size:15px;margin:0 0 18px}.component-catalog a{display:block;padding:12px;border-radius:6px;color:var(--green);font-size:14px;text-decoration:none}.component-catalog a.active{background:var(--pale);font-weight:600}
.component-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:20px}.component-heading h1{font-size:22px;margin:0 0 8px}.component-heading p{font-size:13px;color:var(--muted);margin:0}.component-heading>label{display:grid;gap:6px;font-size:12px;color:var(--muted)}.component-heading select{padding:8px;border:1px solid var(--line);border-radius:5px;background:white;min-width:160px}
.component-preview{display:flex;gap:24px;align-items:flex-start}.components-page #filter-statistics-host{width:270px;flex-shrink:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:white}.components-page #filter-statistics-host .research-sidebar{position:static;width:100%;height:760px;border:0}.components-page .research-sidebar-body{flex:1}.component-feedback{max-width:440px;padding:18px 20px;background:white;border:1px solid var(--line);border-radius:8px}.component-feedback h2{font-size:15px;margin:0 0 12px}.component-feedback p{font-size:13px;color:var(--muted);line-height:1.8;margin:8px 0}
@media(max-width:760px){.component-catalog{position:static;width:100%;border-bottom:1px solid var(--line);border-right:0;padding:12px}.component-catalog h2{margin-bottom:8px}.component-heading{align-items:flex-start;flex-wrap:wrap}.component-preview{flex-direction:column;gap:16px}.components-page #filter-statistics-host{width:100%}.components-page #filter-statistics-host .research-sidebar{height:auto}.components-page .component-feedback{max-width:none;width:100%}.component-heading select{min-height:44px;font-size:16px}}
/* Defaults inspector stays visible while the shared control is edited. */
:root{--component-defaults-width:300px}
body.components-page .component-main{margin-right:var(--component-defaults-width)}
.component-defaults{position:fixed;top:var(--nav-height);right:0;bottom:0;width:var(--component-defaults-width);overflow-y:auto;background:white;border-left:1px solid var(--line);padding:22px 20px;z-index:10}
.defaults-panel-heading h2{font-size:18px;margin:5px 0 8px}.defaults-panel-heading p{font-size:12px;color:var(--muted);margin:0 0 20px}
.defaults-scope-label{display:grid;gap:8px;font-size:12px;color:var(--muted)}.defaults-scope-label select{width:100%;padding:9px 8px;background:white;border:1px solid var(--line);border-radius:5px;font-size:13px}
.defaults-note,.defaults-panel-section p,.defaults-storage-note{font-size:12px;line-height:1.8;color:var(--muted)}
.defaults-source{display:grid;gap:5px;padding:12px;background:var(--pale);border-radius:6px;font-size:12px;color:var(--muted)}.defaults-source strong{color:var(--green);font-size:13px;font-weight:500}
.defaults-status{min-height:40px;font-size:12px;line-height:1.7;color:var(--green);margin:12px 0}.defaults-status.error{color:#b23d3d}
.component-defaults>.button,.defaults-panel-section>.button{width:100%;justify-content:center}.component-defaults .text-button{display:block;margin:10px auto;font-size:12px}.defaults-panel-section{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}.defaults-panel-section h3{font-size:14px;margin:0 0 8px}.defaults-panel-section p{margin:0 0 12px}.defaults-storage-note{border-top:1px solid var(--line);margin-top:20px;padding-top:16px}
.component-preview{flex-wrap:wrap;gap:16px}.component-feedback{flex:1;min-width:160px}.component-heading>label{flex-shrink:0}
@media(min-width:761px) and (max-width:1100px){body.components-page .component-main{margin-right:0}.component-defaults{position:static;width:auto;margin-left:var(--controls-width);border-left:0;border-top:1px solid var(--line)}.component-preview{flex-wrap:nowrap}}
@media(max-width:760px){body.components-page .component-main{margin-right:0}.component-defaults{position:static;width:100%;padding:20px 16px;border-left:0;border-top:1px solid var(--line)}.defaults-scope-label select{min-height:44px;font-size:16px}.component-defaults .button,.component-defaults .text-button{min-height:44px}}

/* The defaults panel offers only the actions for the selected scope. */
.defaults-actions{display:flex;gap:8px;flex-wrap:wrap}.defaults-actions .button{flex:1;justify-content:center;font-size:13px;padding:10px 8px;white-space:nowrap}.defaults-actions [hidden]{display:none!important}

#size-preview{max-height:65vh;overflow:auto;font-size:12px}#size-preview p{line-height:1.7}#size-preview table{width:100%;white-space:nowrap}

.observation-preview{max-width:640px;padding:16px}.observation-preview>p{font-size:12px;line-height:1.7;color:var(--muted)}