#compare-remote { margin-bottom: 8px; }
.remote-comparison-dialog { width: min(1080px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: 90dvh; overflow: auto; overscroll-behavior: contain; }
html.remote-comparison-open { overflow: hidden; }
.remote-field { padding: 16px 0; border-top: 1px solid var(--line); min-width: 0; }
.remote-field-heading { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.remote-field-heading label { display: flex; align-items: center; flex-direction: row; gap: 8px; margin: 0; }
.remote-field-heading input { width: 16px; flex: none; }
.remote-field-status { font-size: 11px; color: var(--muted); }
.remote-status-conflict, .remote-status-unknown { color: var(--warning); }
.remote-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.remote-value { min-width: 0; border: 1px solid var(--line); border-radius: 8px; padding: 12px; background: var(--surface-soft); }
.remote-value h4 { margin: 0 0 8px; font-size: 12px; }
.remote-value pre, .remote-base pre { max-height: 230px; margin: 0; overflow: auto; overscroll-behavior: contain; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 11px; }
.remote-base { margin-top: 9px; font-size: 11px; }
.remote-base pre { margin-top: 8px; padding: 10px; background: var(--code-surface); }
.remote-comparison-actions { border-top: 1px solid var(--line); margin-top: 18px; padding-top: 14px; }
.remote-comparison-actions h3 { font-size: 15px; margin: 0 0 10px; }
.remote-comparison-footer { display: flex; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line); margin-top: 18px; padding-top: 15px; }
.remote-comparison-dialog .check { margin: 12px 0; }
.remote-comparison-dialog button { white-space: normal; }
@media(max-width: 600px) { .remote-comparison-dialog { padding: 24px 18px; } .remote-values { grid-template-columns: minmax(0, 1fr); } .remote-comparison-actions button { width: 100%; } }
/* Centre within the visible viewport even if the underlying editor has a wide intrinsic child. */
.remote-comparison-dialog { width: min(1080px, calc(var(--remote-dialog-viewport, 100dvw) - 24px)); max-width: calc(var(--remote-dialog-viewport, 100dvw) - 24px); left: var(--remote-dialog-left, 50dvw); right: auto; margin-inline: 0; transform: translateX(-50%); }
#view-editor .editor-layout, #view-editor .editor-main, #view-editor .editor-side, #view-editor .panel, #view-editor .page-heading > div { min-width: 0; max-width: 100%; }
#view-editor button { max-width: 100%; white-space: normal; }
#view-editor .tabs button { white-space: nowrap; }
@media(max-width: 1150px) { #view-editor .editor-layout { grid-template-columns: minmax(0, 1fr); } }
@media(max-width: 700px) { #view-editor .editor-side, #view-editor .two-columns { grid-template-columns: minmax(0, 1fr); } }
/* Keep the existing mobile library navigation inside the screen behind the dialog. */
@media(max-width: 700px) { .shell > aside > nav { flex-wrap: wrap; } .shell > aside > nav .nav { flex: 1 1 100px; min-width: 0; } }