/* Editor density changes the tools around a website, never the website itself.
   Standard (including pages without a preference) keeps the established sizes. */
html[data-editor-size=compact] {
  --editor-control:36px; --editor-font:14px; --editor-small:13px;
  --editor-pad:7px; --editor-gap:6px; --editor-summary-pad:8px;
  --editor-header:56px; --editor-toolbar:54px; --editor-pages:48px;
  --editor-palette:64px; --editor-tool-icon:30px; --editor-choice:86px;
  --editor-side-pad:12px; --editor-section-gap:14px; --editor-field-gap:14px;
  --editor-toolbox-width:208px; --editor-inspector-width:272px; --editor-code-width:308px;
}
html[data-editor-size=large] {
  --editor-control:48px; --editor-font:17px; --editor-small:15px;
  --editor-pad:11px; --editor-gap:10px; --editor-summary-pad:14px;
  --editor-header:76px; --editor-toolbar:72px; --editor-pages:64px;
  --editor-palette:96px; --editor-tool-icon:44px; --editor-choice:108px;
  --editor-side-pad:20px; --editor-section-gap:24px; --editor-field-gap:22px;
  --editor-toolbox-width:224px; --editor-inspector-width:328px; --editor-code-width:352px;
}

/* Keep the preference available in both editors, outside project history. */
.builder-bottom-bar {
  display:flex; align-items:center; gap:12px; flex-shrink:0; min-width:0;
  padding:4px 16px; border-top:1px solid var(--ui-line,#dce2e6); background:#f9fafb;
}
.builder-workspace .builder-bottom-bar .builder-status {
  flex:1; min-width:0; min-height:0; padding:3px 0; border:0;
  background:transparent; overflow-wrap:anywhere;
}
.editor-size-control {
  display:inline-flex; align-items:center; flex-shrink:0; gap:8px;
  font:600 13px/1.3 var(--rocode-font-family); color:#52677f; white-space:nowrap;
}
.editor-size-control select,
.builder-workspace .editor-size-control select {
  width:auto; min-width:116px; max-width:160px; min-height:var(--editor-control,44px);
  margin:0; padding:6px 26px 6px 9px; border:1px solid #b7c7d8; border-radius:7px;
  background:#fff; color:#284e75; font:600 14px/1.3 var(--rocode-font-family); cursor:pointer;
}
.editor-size-control select:focus-visible { outline:3px solid #2366bc; outline-offset:3px; }
.studio-status:has(.editor-size-control) { height:auto; min-height:52px; padding-block:4px; }
html[data-editor-size=compact] .studio-status:has(.editor-size-control) { min-height:44px; }
html[data-editor-size=large] .editor-size-control { font-size:15px; }
html[data-editor-size=large] .editor-size-control select { font-size:17px; }

/* Header, navigation, and editor controls. Canvas controls are deliberately
   excluded: their measured geometry belongs to the direct-manipulation layer. */
html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeAppHeader { height:var(--editor-header); }
html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeProjectIdentity { height:calc(var(--editor-header) - 10px); }
html[data-editor-size=compact] .rocodeProjectName { font-size:17px; height:26px; }
html[data-editor-size=large] .rocodeProjectName { font-size:21px; }
html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeHeaderButton {
  height:var(--editor-control); min-height:var(--editor-control); padding-inline:var(--editor-pad); font-size:var(--editor-font);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeHeaderMenu { top:calc(var(--editor-control) + 6px); }
html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeHeaderMenu button {
  min-height:var(--editor-control); padding:var(--editor-pad) 10px; font-size:var(--editor-font);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-toolbar {
  height:var(--editor-toolbar); min-height:var(--editor-toolbar); gap:var(--editor-gap); padding:6px 16px;
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace :is(.builder-views,.builder-history,.builder-preview-action) button {
  height:var(--editor-control); min-height:var(--editor-control); padding:6px 10px; font-size:var(--editor-font); line-height:1.3;
}
html[data-editor-size=compact] .builder-workspace .builder-views button { min-width:98px; }
html[data-editor-size=compact] .builder-workspace .builder-history button { min-width:72px; }
html:is([data-editor-size=compact],[data-editor-size=large]) :is(.builder-workspace,#code-pages) .site-pages {
  min-height:var(--editor-pages); gap:var(--editor-gap); padding:5px 16px;
}
html:is([data-editor-size=compact],[data-editor-size=large]) :is(.builder-workspace,#code-pages) .site-pages button {
  height:var(--editor-control); min-height:var(--editor-control); padding:6px 10px; font-size:var(--editor-font);
}

/* Palette cards remain real layout boxes, so pickup and drop coordinates need
   no scaling compensation. Keep the separate miniature and text rows intact. */
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-palette {
  padding:var(--editor-section-gap) var(--editor-side-pad);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-palette-items { gap:var(--editor-gap); }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .palette-block {
  min-height:var(--editor-palette); padding:5px 4px; gap:3px; font-size:var(--editor-font); line-height:1.3;
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .toolbox-symbol {
  width:var(--editor-tool-icon); height:var(--editor-tool-icon);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .more-blocks .palette-block {
  min-height:calc(var(--editor-control) + 18px); padding:8px 6px; gap:7px; font-size:var(--editor-font);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .more-blocks .toolbox-symbol {
  width:var(--editor-tool-icon); height:var(--editor-tool-icon);
}
html[data-editor-size=compact] .builder-workspace .more-blocks .palette-block small { font-size:12px; margin-top:2px; }
html[data-editor-size=compact] .builder-workspace .block-palette h2 { font-size:18px; }
html[data-editor-size=compact] .toolbox-heading p { margin-bottom:12px; font-size:13px; }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-palette :is(.adventure-pages,.canvas-media-toggle,.my-pictures-button,.add-section),
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .canvas-media-friend-nav button {
  min-height:var(--editor-control); padding:var(--editor-pad); font-size:var(--editor-font);
}
html[data-editor-size=compact] .builder-workspace .canvas-media { margin-top:14px; padding-top:12px; }
html[data-editor-size=compact] .builder-workspace .canvas-media-featured { grid-template-columns:repeat(4,72px); gap:6px; }
html[data-editor-size=compact] .builder-workspace .canvas-media .canvas-media-friend { min-height:80px; padding:6px; }
html[data-editor-size=compact] .canvas-media-friend .canvas-media-thumbnail { height:44px; }
html[data-editor-size=compact] .canvas-media-friend .canvas-media-name { font-size:13px; }

/* Settings use density-specific padding, with no change to artwork dimensions
   or the choice-grid column counts established by each feature. */
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-inspector {
  padding-inline:var(--editor-side-pad); padding-bottom:var(--editor-section-gap);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .inspector-context-nav {
  margin:0 calc(-1 * var(--editor-side-pad)) var(--editor-section-gap); padding:8px 8px; gap:3px;
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .inspector-context-nav button {
  min-height:calc(var(--editor-control) + 14px); padding:6px 3px; gap:4px; font-size:var(--editor-font);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace :is(.inspector-tabs,.block-inspector fieldset,.inspector-context-heading) { margin-bottom:var(--editor-section-gap); }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-field { font-size:var(--editor-font); margin-bottom:var(--editor-field-gap); }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-inspector legend { font-size:var(--editor-font); }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-inspector :is(.inspector-wide,.inspector-tabs button,.inspector-block-actions button,.block-move-controls button,.rich-row-actions button,.rich-answer>button) {
  min-height:var(--editor-control); height:auto; padding:var(--editor-pad) 8px; font-size:var(--editor-font); line-height:1.3;
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-inspector input:not([type=checkbox]):not([type=radio]):not([type=range]),
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-inspector :is(select,textarea) {
  min-height:var(--editor-control); padding:var(--editor-pad) 9px; font-size:var(--editor-font); line-height:1.4;
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .choice-tile {
  min-height:var(--editor-choice); padding:18px 5px 8px; gap:4px;
}
html[data-editor-size=large] .builder-workspace .choice-tile { padding:20px 6px 14px; gap:8px; }
html[data-editor-size=large] .builder-workspace .choice-name { font-size:16px; }
html[data-editor-size=compact] .builder-workspace .choice-grid { gap:6px; }
html[data-editor-size=compact] .builder-workspace .inspector-welcome { margin-bottom:14px; padding:10px; gap:8px; }
html[data-editor-size=compact] .builder-workspace .inspector-welcome img { width:34px; height:42px; }
html[data-editor-size=compact] .builder-workspace .inspector-welcome h2 { font-size:15px; }
html[data-editor-size=compact] .builder-workspace .inspector-welcome p { font-size:13px; }
html[data-editor-size=compact] .builder-workspace :is(.inspector-context-heading h2,.inspector-heading h2) { font-size:20px; }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace :is(.block-inspector details,.more-blocks)>summary {
  min-height:var(--editor-control); padding-block:var(--editor-summary-pad); font-size:var(--editor-font);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace :is(.block-inspector details,.more-blocks)>summary::before {
  top:calc(var(--editor-summary-pad) + .75em);
}
html[data-editor-size=compact] .builder-workspace .font-picker summary strong { font-size:16px; }
html[data-editor-size=compact] .builder-workspace .font-sample { min-height:56px; padding:7px 9px; grid-template-columns:70px minmax(0,1fr); column-gap:8px; }
html[data-editor-size=large] .builder-workspace .font-sample { min-height:72px; padding:12px; }
html[data-editor-size=compact] .builder-workspace .style-kit { min-height:72px; padding:7px; column-gap:8px; }

/* Code and preview toolbars share the preference; code text keeps its own A-/A+
   setting, and neither preview iframe nor canvas content inherits a scale. */
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace :is(.builder-code-tools,.builder-preview-tools) :is(button,select),
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-code>.primary,
html:is([data-editor-size=compact],[data-editor-size=large]) .studio-layout :is(.panel-toolbar,.file-row,.insert-bar,.preview-bottom,.code-bottom) button {
  min-height:var(--editor-control); padding:var(--editor-pad) 10px; font-size:var(--editor-font);
}
html:is([data-editor-size=compact],[data-editor-size=large]) .studio-layout .panel-toolbar { height:calc(var(--editor-control) + 12px); }
html:is([data-editor-size=compact],[data-editor-size=large]) .studio-layout .file-row { height:calc(var(--editor-control) + 8px); }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-code-tools { padding:var(--editor-pad) 12px; }
html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .linked-code-heading button {
  width:var(--editor-control); height:var(--editor-control); min-width:var(--editor-control); min-height:var(--editor-control);
}
html:is([data-editor-size=compact],[data-editor-size=large]) dialog :is(.dialog-actions,.upload-actions,.drawing-actions,.page-dialog-footer,.media-tabs,.media-categories,.media-pagination,.drawing-tools,.drawing-history,.drawing-stamps) button,
html:is([data-editor-size=compact],[data-editor-size=large]) dialog :is(.media-use,.media-upload,.media-draw,.checkpoint-restore,.checkpoint-save button) {
  min-height:var(--editor-control); padding:var(--editor-pad) 12px; font-size:var(--editor-font);
}
html:is([data-editor-size=compact],[data-editor-size=large]) dialog :is(.dialog-top,.media-heading,.page-dialog-heading,.upload-heading,.drawing-heading,.checkpoint-heading)>button {
  width:var(--editor-control); height:var(--editor-control); min-width:var(--editor-control); min-height:var(--editor-control);
}

@media(min-width:721px) {
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace[data-view=build] .builder-layout {
    grid-template-columns:var(--editor-toolbox-width) minmax(0,1fr) var(--editor-inspector-width);
  }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace[data-view=build][data-linked-code=true] .builder-layout {
    grid-template-columns:var(--editor-toolbox-width) minmax(0,1fr) var(--editor-code-width);
  }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .palette-block.tool-divider {
    min-height:var(--editor-control); height:var(--editor-control); padding-block:3px;
  }
}
@media(min-width:721px) and (max-width:1200px) {
  /* Keep room for two tools, disclosure labels, and character cards as the
     window narrows; only the settings panel becomes denser. */
  html[data-editor-size=compact] { --editor-inspector-width:260px; --editor-code-width:284px; }
  html[data-editor-size=large] { --editor-inspector-width:300px; --editor-code-width:320px; --editor-side-pad:16px; }
}
@media(min-width:721px) and (max-width:1000px) {
  html[data-editor-size=compact] { --editor-inspector-width:252px; --editor-code-width:272px; --editor-side-pad:10px; }
  html[data-editor-size=large] { --editor-inspector-width:276px; --editor-code-width:292px; --editor-side-pad:12px; }
  html[data-editor-size=large] .builder-workspace .inspector-context-nav button { font-size:15px; }
  html[data-editor-size=large] .builder-workspace .palette-block { font-size:16px; }
}
@media(max-width:720px) {
  html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeAppHeader { height:auto; }
  html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeProjectIdentity { height:50px; }
  html:is([data-editor-size=compact],[data-editor-size=large]) .rocodeHeaderButton { padding-inline:3px; font-size:14px; }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-toolbar {
    height:auto; min-height:calc(2 * var(--editor-control) + 28px); padding:8px 12px; gap:8px;
  }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-views button { min-width:0; }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-history button { min-width:0; padding-inline:4px; font-size:14px; }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .builder-preview-action button { padding-inline:6px; font-size:14px; }
  html:is([data-editor-size=compact],[data-editor-size=large]) :is(.builder-workspace,#code-pages) .site-pages { padding-inline:12px; }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .canvas-media-featured { grid-template-columns:repeat(4,minmax(0,1fr)); }
  html:is([data-editor-size=compact],[data-editor-size=large]) .builder-workspace .block-inspector :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea) { font-size:16px; }
  .builder-bottom-bar { align-items:flex-start; flex-wrap:wrap; padding:8px 12px; gap:6px 12px; }
  .builder-workspace .builder-bottom-bar .builder-status { flex-basis:100%; }
  .editor-size-control { margin-left:auto; }
  .studio-status:has(.editor-size-control) { flex-wrap:wrap; gap:6px 12px; padding:8px 12px; }
}
/* A compact visual appearance must not make touch targets difficult to hit. */
@media(any-pointer:coarse) {
  html[data-editor-size=compact] { --editor-control:44px; --editor-toolbar:62px; --editor-pages:56px; }
}