/* Stable scopes and a quieter workbench around the student's own design. */
html:root .builder-workspace .block-inspector { scrollbar-gutter:stable; }
html:root .builder-workspace .inspector-header { padding-block:8px; }
html:root .builder-workspace .inspector-header .inspector-context-nav {
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:3px;
  margin:0; padding:3px; background:#edf4fa; border:0; border-radius:8px;
}
html:root .builder-workspace .inspector-context-nav button {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:5px; min-width:0; min-height:58px; padding:7px 3px;
  border:1px solid transparent; border-radius:6px; background:transparent;
  color:#496277; font-size:var(--editor-small,14px); line-height:1.15; box-shadow:none;
}
html:root .builder-workspace .inspector-context-nav button[aria-pressed=true] {
  color:#245ac2; background:#fff; border-color:#c7d9ef; box-shadow:0 1px 2px #173d6a0b;
}
html:root .builder-workspace .inspector-context-nav button:hover:not([aria-pressed=true]) { background:#e1edf7; }
html:root .builder-workspace .inspector-context-nav button .ui-icon { width:19px; height:19px; }
html:root .builder-workspace .inspector-heading { align-items:flex-start; gap:10px; }
html:root .builder-workspace .inspector-heading>div { min-width:0; }
html:root .builder-workspace .inspector-heading h2 { margin:0; font-size:22px; line-height:1.25; }
html:root .builder-workspace .inspector-block-description {
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  margin:4px 0 0; font-size:var(--editor-small,14px); font-weight:400; color:#587086;
  line-height:1.45; overflow-wrap:anywhere;
}
.inspector-empty-selection { padding:48px 8px; text-align:center; }
.inspector-empty-selection img { display:block; margin:0 auto 18px; object-fit:contain; }
html:root .builder-workspace .inspector-empty-selection h2 { margin:0 0 8px; font-size:21px; }
.inspector-empty-selection p { max-width:220px; margin:auto; color:#587086; line-height:1.6; }

html:root .builder-workspace .toolbox-categories { gap:0; }
html:root .builder-workspace .toolbox-categories button { padding-inline:3px; font-size:var(--editor-small,14px); }
html:root .builder-workspace .more-blocks .block-palette-items {
  display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); margin:0 8px 12px; grid-auto-rows:1fr;
}
html:root .builder-workspace .more-blocks .palette-block {
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  gap:6px; min-height:calc(var(--rocode-tool-height) + 12px); padding:10px 5px;
  text-align:center; grid-column:auto; line-height:1.25;
}
html:root .builder-workspace .more-blocks .palette-block>span:last-child { overflow-wrap:anywhere; }
html:root .builder-workspace .more-blocks .tool-rocode { grid-column:1 / -1; flex-direction:row; gap:10px; min-height:54px; }
html:root .builder-workspace .toolbox-block-group h3 { margin:16px 10px 9px; font-size:var(--editor-small,14px); font-weight:650; }
.toolbox-saved { flex:none; padding:10px 12px; border-top:1px solid #cce0ed; background:#eaf8ff; }
html:root .builder-workspace .toolbox-saved .toolbox-action {
  display:grid; grid-template-columns:20px minmax(0,1fr) 14px; align-items:center;
  width:100%; gap:8px; text-align:left; margin:0; min-height:44px; padding:10px;
  border:1px solid #bdd7e8; border-radius:6px; background:#f7fcff;
}
html:root .builder-workspace .toolbox-saved .toolbox-action .ui-icon { width:18px; height:18px; }
html:root .builder-workspace .toolbox-saved .toolbox-action>.ui-icon:last-child { width:14px; height:14px; }
html:root .builder-workspace .builder-preview-action { grid-template-columns:minmax(0,var(--preview-slot,152px)); }
html:root .rocodeHeader :is(.rocodeHeaderButton,.rocode-history-button):not(:disabled) {
  background-color:rgba(18,63,139,.40); border-color:#ffffff9e;
  background-image:linear-gradient(165deg,#ffffff24,#ffffff05 60%); color:#fff;
}
html:root .rocodeHeader :is(.rocodeHeaderButton,.rocode-history-button):hover:not(:disabled) { background-color:rgba(18,63,139,.55); }
html:root .rocodeHeader .rocode-history-button:disabled { color:#ffffff70; border-color:#ffffff38; background-color:#ffffff0c; }

/* A patterned mat exposes the frame shape even with a transparent character. */
html:root .picture-frame-settings .frame-preview-mat {
  display:grid; place-items:center; width:44px; height:44px; box-sizing:border-box; overflow:hidden;
  background:repeating-conic-gradient(#d9e4ed 0% 25%,#f3f7fa 0% 50%) 50% / 12px 12px;
}
html:root .picture-frame-settings .frame-preview img { width:100%; height:100%; border:0; border-radius:0; box-shadow:none; background:transparent; object-fit:contain; }
html:root .picture-frame-settings .frame-preview-rounded .frame-preview-mat { border-radius:10px; }
html:root .picture-frame-settings .frame-preview-circle .frame-preview-mat { border-radius:50%; }
html:root .picture-frame-settings .frame-preview-postcard .frame-preview-mat { border:3px solid white; border-bottom-width:10px; box-shadow:0 2px 5px #18324c30; }
html:root .picture-frame-settings .frame-preview-comic .frame-preview-mat { border:2px solid #18324c; border-radius:5px; box-shadow:3px 3px 0 #18324c; }
html:root .picture-frame-settings .frame-preview-sticker .frame-preview-mat { background:transparent; overflow:visible; }
@media(max-width:720px) {
  .toolbox-saved { padding:8px 12px; }
  html:root .builder-workspace .more-blocks .block-palette-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  html:root .builder-workspace .inspector-context-nav button { flex-direction:row; min-height:48px; gap:6px; }
}
@media(max-width:600px) {
  html:root .builder-workspace .builder-preview-action { grid-template-columns:minmax(0,1fr); }
}
@media(prefers-reduced-transparency:reduce) {
  html:root .rocodeHeader :is(.rocodeHeaderButton,.rocode-history-button):not(:disabled) { background:#285caa; background-image:none; }
}