/* Page actions stay with the page they affect. Every tab reserves the same
   trailing area, so revealing the active page's gear never moves its name. */
html[data-editor-size=compact] { --rocode-tab-height:48px; --rocode-page-add-size:44px; }
html:root .site-pages .page-tab-item { position:relative; flex:none; min-width:0; }
html:root :is(.builder-workspace,#code-pages) .site-pages .page-tab { padding-right:52px; }
html:root .site-pages .page-tab-settings-slot { position:absolute; right:3px; top:0; display:flex; align-items:center; width:44px; height:var(--rocode-tab-height,48px); pointer-events:none; }
html:root :is(.builder-workspace,#code-pages) .site-pages .page-tab-settings-slot .page-settings-control {
  display:inline-flex; align-items:center; justify-content:center; flex:none;
  width:44px; min-width:44px; height:calc(var(--rocode-tab-height,48px) - 4px);
  min-height:0; margin:0 0 3px; padding:0; border:0; border-radius:6px;
  background:transparent; color:#527399; box-shadow:none; pointer-events:auto;
}
html:root :is(.builder-workspace,#code-pages) .site-pages .page-tab-settings-slot .page-settings-control:hover {
  color:#245fc7; background:#e9f2ff; border:0;
}
html:root .site-pages .page-tab-settings-slot .page-settings-control>.ui-icon { width:18px; height:18px; }
html:root .site-pages .page-settings-control :is(.page-settings-label,.page-settings-name) {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip-path:inset(50%); white-space:nowrap; border:0;
}
html:root .site-pages .page-tab-settings-slot .page-settings-control:focus-visible { outline:2px solid #245fc7; outline-offset:-3px; }

html:root dialog.page-dialog .page-settings-fields { display:flex; flex-direction:column; gap:20px; }
html:root dialog.page-dialog :is(.page-settings-fields,.page-dialog-footer,.page-remove-confirmation)[hidden] { display:none; }
html:root dialog.page-dialog .page-more-options { margin:0; min-width:0; border:1px solid #d2e5ef; border-radius:6px; background:#f8fbfd; }
html:root dialog.page-dialog .page-more-options>summary { display:flex; align-items:center; gap:8px; min-height:44px; padding:9px 12px; color:#42627b; font-size:15px; font-weight:600; list-style:none; cursor:pointer; }
html:root dialog.page-dialog .page-more-options>summary::-webkit-details-marker { display:none; }
html:root dialog.page-dialog .page-more-options>summary .ui-icon { width:16px; height:16px; transition:rotate 150ms ease; }
html:root dialog.page-dialog .page-more-options[open]>summary .ui-icon { rotate:90deg; }
html:root dialog.page-dialog .page-more-options>.page-name-label { display:block; margin:0; padding:0 12px 12px; }
html:root dialog.page-dialog .page-more-options>summary:focus-visible { outline:3px solid #3568e6; outline-offset:2px; border-radius:6px; }
html:root dialog.page-dialog .page-remove-confirmation h3 { margin:0; font-size:20px; line-height:1.4; overflow-wrap:anywhere; }
html:root dialog.page-dialog .page-remove-confirmation p { margin:10px 0 22px; color:#5f7482; font-size:15px; line-height:1.5; }
html:root dialog.page-dialog .page-remove-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:10px; }
html:root dialog.page-dialog [data-confirm-remove] { color:#fff; background:#b43c45; border-color:#b43c45; }
html:root dialog.page-dialog [data-confirm-remove]:hover:not(:disabled) { color:#fff; background:#982f38; border-color:#982f38; }
html:root dialog.page-dialog [data-keep-page] { background:#fff; }
.template-style-option>span { display:grid; gap:3px; }
.template-style-option strong { font:inherit; font-weight:650; }
.template-style-option small { font:inherit; font-size:12px; line-height:1.5; color:#5f7482; }
@media (prefers-reduced-motion:reduce) { html:root dialog.page-dialog .page-more-options>summary .ui-icon { transition:none; } }