/* VisCtrl editor UI system. Loaded last so every editor surface shares one language. */
:root{
  --ui-tab-height:46px;
  --ui-control-height:32px;
  --ui-search-height:36px;
  --ui-modal-search-height:40px;
  --ui-control-radius:7px;
  --ui-search-radius:9px;
  --ui-focus-ring:0 0 0 3px var(--primary-soft);
}

/* Line tabs: left sidebar is the visual source of truth. */
.panel-tabs,.property-mode-tabs{
  position:sticky;
  top:0;
  z-index:30;
  display:flex;
  width:100%;
  height:var(--ui-tab-height);
  min-height:var(--ui-tab-height);
  padding:0;
  border-bottom:1px solid var(--line);
  background:var(--surface);
}
.panel-tab,.property-mode-tabs>button{
  position:relative;
  flex:1 1 0;
  min-width:0;
  height:100%;
  padding:0 10px;
  border:0;
  border-bottom:0;
  background:transparent;
  color:var(--muted);
  font-size:12px;
  font-weight:650;
}
.panel-tab:hover,.property-mode-tabs>button:hover{color:var(--text);background:transparent}
.panel-tab.active,.property-mode-tabs>button.active{color:var(--text);background:transparent;border-color:transparent}
.panel-tab.active::after,.property-mode-tabs>button.active::after{
  content:"";
  position:absolute;
  left:22px;
  right:22px;
  bottom:0;
  height:2px;
  border-radius:2px 2px 0 0;
  background:var(--primary);
}

/* Modal document tabs use the same active language, with content-width labels. */
.export-tabs{min-height:var(--ui-tab-height);padding:0 23px;background:var(--surface);overflow-x:auto;overflow-y:hidden}
.export-tab{position:relative;min-height:var(--ui-tab-height);padding:0 15px;border:0;background:transparent;color:var(--muted);font-size:12px;font-weight:650;white-space:nowrap}
.export-tab:hover{color:var(--text)}
.export-tab.active{color:var(--text);border-color:transparent;background:transparent}
.export-tab.active::after{content:"";position:absolute;left:14px;right:14px;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--primary)}

/* One control shape across design properties, semantics and delivery metadata. */
.right-panel .prop-input,
.right-panel .semantic-field input,
.right-panel .semantic-field select,
.right-panel .code-location-grid input,
.right-panel .code-location-grid select{
  width:100%;
  height:var(--ui-control-height);
  min-height:var(--ui-control-height);
  border:1px solid var(--line-strong);
  border-radius:var(--ui-control-radius);
  background:var(--surface);
  color:var(--text);
  font-size:10px;
  outline:0;
}
.right-panel .prop-input{font-size:11px}
.right-panel .semantic-field textarea{width:100%;min-height:72px;border:1px solid var(--line-strong);border-radius:var(--ui-control-radius);background:var(--surface);color:var(--text);font:10px/1.5 var(--font);outline:0}
.right-panel .prop-input:focus,
.right-panel .semantic-field input:focus,
.right-panel .semantic-field select:focus,
.right-panel .semantic-field textarea:focus,
.right-panel .code-location-grid input:focus,
.right-panel .code-location-grid select:focus{border-color:var(--primary);box-shadow:var(--ui-focus-ring)}
.right-panel .color-swatch{width:var(--ui-control-height);height:var(--ui-control-height);border-color:var(--line-strong);border-radius:var(--ui-control-radius);background:var(--surface)}
.right-panel .compact-field.is-readonly{height:var(--ui-control-height);border-color:var(--line-strong);border-radius:var(--ui-control-radius);background:var(--surface-2)}

/* One compact button model inside the property panel. */
.right-panel .property-actions button,
.right-panel .multi-tools button,
.right-panel .quad-link,
.right-panel .btn-sm{
  min-height:var(--ui-control-height);
  border:1px solid var(--line-strong);
  border-radius:var(--ui-control-radius);
  background:var(--surface);
  color:var(--text);
  box-shadow:none;
  font-size:10px;
  transform:none;
}
.right-panel .quad-link{min-height:24px;height:24px}
.right-panel .property-actions button:hover,
.right-panel .multi-tools button:hover,
.right-panel .btn-sm:hover{border-color:#b9b0f5;background:var(--primary-soft);color:var(--primary);transform:none}
.right-panel .property-actions button.danger{border-color:#f2d4d8;background:#fff7f8;color:var(--danger)}

/* Unified accordion rhythm and a CSS-drawn arrow (no font/encoding dependency). */
.prop-group-title,.property-advanced>summary,.semantic-advanced>summary,.block-code-location>summary{
  min-height:42px;
  padding:0 15px;
  display:flex;
  align-items:center;
  color:var(--text);
  background:var(--surface);
  font-size:11px;
  font-weight:700;
}
.prop-group-title:hover,.property-advanced>summary:hover,.semantic-advanced>summary:hover,.block-code-location>summary:hover{background:var(--surface-2)}
.prop-group-title>span:last-child{width:7px;height:7px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);font-size:0;transform:rotate(45deg);transition:transform .15s}
.prop-group:not([open]) .prop-group-title>span:last-child{transform:rotate(-45deg)}
.property-advanced>summary::after,.semantic-advanced>summary::after,.block-code-location>summary::after{
  content:"";
  flex:0 0 7px;
  width:7px;
  height:7px;
  margin-left:9px;
  border-right:1.5px solid var(--muted);
  border-bottom:1.5px solid var(--muted);
  transform:rotate(45deg);
  transition:transform .15s;
}
.property-advanced[open]>summary::after,.semantic-advanced[open]>summary::after,.block-code-location[open]>summary::after{transform:rotate(225deg)}
.property-advanced>summary small,.semantic-advanced>summary span{margin-left:auto}
.property-advanced-body{background:var(--surface-2)}

/* Search fields: one normal size and one modal size. */
.component-search-box{
  height:var(--ui-search-height);
  border:1px solid var(--line-strong);
  border-radius:var(--ui-search-radius);
  background:var(--surface);
}
.block-search,.icon-library-search,.local-search{
  height:var(--ui-modal-search-height);
  border:1px solid var(--line-strong);
  border-radius:var(--ui-search-radius);
  background:var(--surface);
  color:var(--muted);
}
.component-search-box:focus-within,.block-search:focus-within,.icon-library-search:focus-within,.local-search:focus-within{border-color:var(--primary);box-shadow:var(--ui-focus-ring)}
.block-search input,.icon-library-search input,.local-search input,.component-search-box input{background:transparent;color:var(--text);outline:0}

/* Theme-safe surfaces that previously used hard-coded white/gray values. */
.props-head,.panel-tabs,.property-mode-tabs{background:var(--surface)}
.export-language-options{background:var(--surface-2)}
.segmented{background:var(--surface-2)}
.segmented button.active{background:var(--surface);color:var(--text)}
.quad-link{background:var(--surface)}

body.dark .right-panel .property-actions button.danger{border-color:#60343b;background:#351f24;color:#ff8791}
body.dark .semantic-locked{background:#3b321e;color:#efd68f}
body.dark .block-search,body.dark .icon-library-search,body.dark .local-search{background:var(--surface)}

@media(max-width:640px){.export-tabs{padding:0 12px}.export-tab{padding:0 11px}.export-tab.active::after{left:10px;right:10px}}

/* Project storage and local-file sync */
.project-file-button{max-width:210px;border:1px solid transparent!important}.project-file-button span{max-width:165px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.project-file-button.is-bound{color:var(--green);background:#effaf6}.project-file-button.has-warning{color:#a76c11;background:#fff7e6}.project-file-modal .modal-head p{margin:4px 0 0;color:var(--muted);font-size:10px}.storage-mode-card{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:start;margin-bottom:10px;padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--surface)}.storage-mode-card.active{border-color:#d5cff9;background:#faf9ff}.storage-mode-icon{width:36px;height:36px;border-radius:9px;background:var(--primary-soft);color:var(--primary);display:grid;place-items:center}.storage-mode-card b{font-size:11px}.storage-mode-card p{margin:5px 0 0;color:var(--muted);font-size:9px;line-height:1.55}.storage-mode-card p strong{color:#a66a12;font-weight:600}.storage-mode-card>em{padding:3px 7px;border-radius:999px;background:var(--surface-2);color:var(--muted);font-size:8px;font-style:normal}.storage-mode-card.active>em{background:var(--primary-soft);color:var(--primary)}.storage-browser-warning,.storage-file-notice{margin-top:10px;padding:10px 11px;border-radius:8px;font-size:9px;line-height:1.55}.storage-browser-warning{background:#fff4dc;color:#80601c}.storage-file-notice{background:var(--surface-2);color:var(--muted)}.storage-actions .btn-ghost{margin-right:auto;color:var(--danger)}body.dark .project-file-button.is-bound{background:#19382c;color:#70d3a5}body.dark .project-file-button.has-warning{background:#3d321e;color:#e7be73}body.dark .storage-mode-card.active{border-color:#48406f;background:#292640}body.dark .storage-browser-warning{background:#3a301d;color:#e8cb8a}