/* EveningSail Max 0.11.6e shell layout.
   Structural shell CSS only. Visual values come from the active skin.
   Rendered documents live in the document iframe and document.css. */

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: var(--es-ui-workspace);
  color: var(--es-ui-text);
  font: var(--es-ui-font-size)/var(--es-ui-line-height) var(--es-ui-font-family);
}

/* Shell-only box sizing. Never broaden this into the document iframe. */
#legacy-stage,
#legacy-stage > .app-titlebar,
#legacy-stage > .app-titlebar *,
#legacy-stage > .app-menubar,
#legacy-stage > .app-menubar *,
#legacy-stage > .popup,
#legacy-stage > .popup *,
#legacy-stage > .mdi-client,
#legacy-stage > .mdi-client > .window,
#legacy-stage > .mdi-client > .window > *,
#legacy-stage > .mdi-client > .workspace-generated,
#legacy-stage > .mdi-client > .desktop-icons,
#legacy-stage > .mdi-client > .desktop-icons *,
#legacy-stage > .app-statusbar,
#legacy-stage > .app-statusbar *,
#legacy-stage > .modal,
#legacy-stage > .modal * {
  box-sizing: content-box;
}

button,
input,
select,
textarea {
  font: inherit;
}

/* Shell controls use border-box sizing so padded fields cannot spill out of
   their flex/grid tracks at narrow MDI widths. */
#legacy-stage button,
#legacy-stage input,
#legacy-stage select,
#legacy-stage textarea {
  box-sizing: content-box;
}

#legacy-stage button {
  color: var(--es-ui-text);
  background: var(--es-ui-face);
  border: 1px solid var(--es-ui-shadow);
  border-radius: var(--es-ui-control-radius);
  box-shadow: none;
}

#legacy-stage button:not(:disabled) {
  cursor: default;
}

#legacy-stage button:hover:not(:disabled) {
  background: var(--es-ui-highlight);
  color: var(--es-ui-highlight-text);
}

#legacy-stage button:active:not(:disabled),
#legacy-stage button.pressed {
  background: var(--es-ui-highlight);
  color: var(--es-ui-highlight-text);
}

#legacy-stage button:disabled {
  color: var(--es-ui-disabled-text);
}

#legacy-stage button:focus-visible,
#legacy-stage [role="menuitem"]:focus-visible,
#legacy-stage input:focus-visible,
#legacy-stage select:focus-visible,
#legacy-stage textarea:focus-visible {
  outline: 2px solid var(--es-ui-focus);
  outline-offset: 1px;
}

#legacy-stage input[type="text"],
#legacy-stage input:not([type]),
#legacy-stage input[type="url"],
#legacy-stage input[type="number"],
#legacy-stage input[type="password"],
#legacy-stage select,
#legacy-stage textarea {
  color: var(--es-ui-field-text);
  background: var(--es-ui-field);
  border: 1px solid var(--es-ui-shadow);
  border-radius: var(--es-ui-field-radius);
  box-shadow: none;
}

/* Application frame */
#legacy-stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--es-ui-workspace);
}

/* Standalone PWA has no parent application titlebar outside Fullscreen.
   Give the remaining shell rows an explicit three-track grid so the MDI
   client, not the application statusbar, owns the flexible workspace row. */
body.standalone-pwa #legacy-stage {
  grid-template-rows: auto minmax(0, 1fr) auto;
}

/* Parent application titlebar. Browser/tab mode needs shell chrome; standalone
   PWA mode hides this row unless Fullscreen is active. */
#legacy-stage > .app-titlebar {
  z-index: 60;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  height: 16px;
  padding: 1px 5px;
  color: var(--es-ui-title-text);
  background: var(--es-ui-title);
  border-bottom: 1px solid var(--es-ui-shadow);
  user-select: none;
}
#legacy-stage > .app-titlebar[hidden] { display: none !important; }
#legacy-stage > .app-titlebar .app-titlebar-system {width: 16px;height: 16px;padding: 0;box-sizing: border-box;}
#legacy-stage > .app-titlebar .app-titlebar-system img {width: 12px;height: 12px;display: block;margin: 0 auto;}
#legacy-stage > .app-titlebar .app-titlebar-caption { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 600; text-align: left; }
#legacy-stage > .app-titlebar .app-titlebar-controls { display: flex; gap: 3px; }
#legacy-stage > .app-titlebar .app-titlebar-controls button {width: 16px;height: 16px;padding: 0;box-sizing: border-box;font-size: 10px;line-height: 12px;}

/* Main menu */
#legacy-stage > .app-menubar {
  z-index: 50;
  display: flex;
  align-items: center;
  min-width: 0;
  height: 16px;
  padding: 1px 5px;
  background: var(--es-ui-menu);
  color: var(--es-ui-menu-text);
  border-bottom: 1px solid var(--es-ui-shadow);
  white-space: nowrap;
  overflow: hidden;
}

#legacy-stage > .app-menubar .menu-root {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  gap: 2px;
}

#legacy-stage > .app-menubar .menu-root > li {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

#legacy-stage > .app-menubar .menu-trigger {
  display: flex;
  align-items: center;
  text-decoration: none !important;
  height: 16px;
  padding: 0 8px;
  line-height: 16px;
  border-radius: var(--es-ui-control-radius);
  color: var(--es-ui-menu-text);
  background: transparent;
  user-select: none;
  outline: none;
}

#legacy-stage > .app-menubar .menu-trigger *,
#legacy-stage > .popup .popup-menuitem,
#legacy-stage > .popup .popup-menuitem * {
  text-decoration: none !important;
}

#legacy-stage > .app-menubar .menu-trigger:hover,
#legacy-stage > .app-menubar .menu-trigger.active,
#legacy-stage > .app-menubar .menu-trigger.pressed,
#legacy-stage > .app-menubar .menu-trigger:focus-visible {
  color: var(--es-ui-highlight-text);
  background: var(--es-ui-highlight);
}

#legacy-stage > .app-menubar .menu-system-trigger {
  width: 16px;
  justify-content: center;
  padding: 0;
}

#legacy-stage > .app-menubar .menu-system-trigger img {
  width: 12px;
  height: 12px;
}

#legacy-stage > .app-menubar .mdi-max-icon[hidden],
#legacy-stage > .app-menubar .mdi-max-controls[hidden] {
  display: none !important;
}

#legacy-stage > .app-menubar .mdi-max-controls {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

#legacy-stage > .app-menubar .mdi-max-controls button {
  width: 16px;
  height: 16px;
  padding: 0;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 12px;
}

/* Workspace */
#legacy-stage > .mdi-client {
  position: relative;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: var(--es-ui-workspace);
}

/* App status */
#legacy-stage > .app-statusbar {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 16px;
  padding: 1px 5px;
  background: var(--es-ui-face);
  border-top: 1px solid var(--es-ui-shadow);
}

#legacy-stage > .app-statusbar span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* Popup menus */
#legacy-stage > .popup {
  position: fixed;
  z-index: 300100;
  min-width: 180px;
  padding: 4px;
  background: var(--es-ui-menu);
  color: var(--es-ui-menu-text);
  border: 1px solid var(--es-ui-shadow);
  border-radius: var(--es-ui-control-radius);
  box-shadow: var(--es-ui-popup-shadow);
}

#legacy-stage > .popup .popup-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

#legacy-stage > .popup .popup-menu > li {
  margin: 0;
  padding: 0;
  list-style: none;
}

#legacy-stage > .popup .popup-menuitem {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  min-height: 16px;
  padding: 2px 8px;
  white-space: nowrap;
  border-radius: var(--es-ui-control-radius);
  outline: none;
}

#legacy-stage > .popup .popup-menuitem:focus,
#legacy-stage > .popup .popup-menuitem:hover {
  background: var(--es-ui-highlight);
  color: var(--es-ui-highlight-text);
}

#legacy-stage > .popup .popup-menuitem[aria-disabled="true"] {
  color: var(--es-ui-disabled-text);
}

#legacy-stage > .popup .popup-menuitem[aria-disabled="true"]:focus,
#legacy-stage > .popup .popup-menuitem[aria-disabled="true"]:hover {
  background: transparent;
  color: var(--es-ui-disabled-text);
}

#legacy-stage > .popup .popup-separator {
  height: 1px;
  margin: 4px 6px;
  background: var(--es-ui-shadow);
}

#legacy-stage > .popup .popup-submenu-host {
  position: relative;
}

#legacy-stage > .popup .popup-submenu {
  display: none;
  position: absolute;
  left: calc(100% + 2px);
  top: -5px;
  min-width: 180px;
  padding: 4px;
  background: var(--es-ui-menu);
  color: var(--es-ui-menu-text);
  border: 1px solid var(--es-ui-shadow);
  border-radius: var(--es-ui-control-radius);
  box-shadow: var(--es-ui-popup-shadow);
  z-index: 2;
}

#legacy-stage > .popup .popup-submenu-host:hover > .popup-submenu,
#legacy-stage > .popup .popup-submenu-host:focus-within > .popup-submenu {
  display: block;
}

/* Browser child windows */
#legacy-stage > .mdi-client > .window[hidden] {
  display: none !important;
}

#legacy-stage > .mdi-client > .window {
  position: absolute;
  left: 16px;
  top: 16px;
  display: grid;
  grid-template-rows: 19px auto auto minmax(0, 1fr) auto;
  width: min(920px, calc(100% - 32px));
  height: min(640px, calc(100% - 32px));
  min-width: 300px;
  min-height: 220px;
  overflow: hidden;
  padding: 0;
  background: var(--es-ui-face);
  border: 1px solid var(--es-ui-shadow);
  border-radius: 7px;
  box-shadow: var(--es-ui-window-shadow);
}

#legacy-stage > .mdi-client > .window > .titlebar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 16px;
  padding: 1px 5px;
  color: var(--es-ui-title-text);
  background: var(--es-ui-title);
  border-bottom: 1px solid var(--es-ui-shadow);
  user-select: none;
  cursor: move;
  touch-action: none;
}

#legacy-stage > .mdi-client > .window > .titlebar > span {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  padding: 0;
  font-weight: 600;
  text-align: left;
}

#legacy-stage > .mdi-client > .window > .titlebar .sys {
  width: 16px;
  height: 16px;
  padding: 0;
  box-sizing: border-box;
}

#legacy-stage > .mdi-client > .window > .titlebar .sys img {
  display: block;
  width: 12px;
  height: 12px;
  margin: 0 auto;
}

#legacy-stage > .mdi-client > .window > .titlebar .controls {
  display: flex;
  gap: 3px;
  margin-left: auto;
}

#legacy-stage > .mdi-client > .window > .titlebar .controls button {
  width: 16px;
  height: 16px;
  padding: 0;
  box-sizing: border-box;
  font-size: 10px;
  line-height: 12px;
}

#legacy-stage > .mdi-client > .window > .titlebar .controls button::before,
#legacy-stage > .mdi-client > .window > .titlebar .controls button::after,
#legacy-stage > .app-menubar .mdi-max-controls button::before,
#legacy-stage > .app-menubar .mdi-max-controls button::after {
  content: none !important;
}

#legacy-stage > .mdi-client > .window > .toolbar {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 24px;
  padding: 2px 8px;
  overflow: hidden;
  background: var(--es-ui-face);
  border-bottom: 1px solid var(--es-ui-shadow);
}

#legacy-stage > .mdi-client > .window > .toolbar button {
  min-height: 12px;
  min-width: 52px;
  padding: 2px;
}

#legacy-stage > .mdi-client > .window > .toolbar #vesper {
  margin-left: auto;
  min-width: 24px;
  min-height: 24px;
  padding: 0;
}

#legacy-stage > .mdi-client > .window > .toolbar #vesper img {
  display: block;
  max-width: 20px;
  max-height: 20px;
  margin: auto;
}

#legacy-stage > .mdi-client > .window > .toolbar #vesper.loading img {
  animation: es-vesper-throb 1.15s ease-in-out infinite;
  transform-origin: center;
}

@keyframes es-vesper-throb {
  0%, 100% { filter: brightness(0.72); }
  50% { filter: brightness(1.45); }
}

@media (prefers-reduced-motion: reduce) {
  #legacy-stage > .mdi-client > .window > .toolbar #vesper.loading img {
    animation: none;
    filter: brightness(1.15);
  }
}

#legacy-stage > .mdi-client > .window > #location {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 8px;
  background: var(--es-ui-face);
  border-bottom: 1px solid var(--es-ui-shadow);
}

#legacy-stage > .mdi-client > .window > #location input {
  width: auto;
  min-width: 0;
  height: 16px;
  padding: 2px 8px;
}

#legacy-stage > .mdi-client > .window > #location button {
  height: revert;
  padding: revert;
}

#legacy-stage > .mdi-client > .window > iframe#document {
  display: block;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 0;
  background: var(--es-ui-field);
}

#legacy-stage > .mdi-client > .window > footer {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  min-width: 0;
  height: 16px;
  padding: 1px 5px;
  overflow: hidden;
  background: var(--es-ui-face);
  border-top: 1px solid var(--es-ui-shadow);
}

#legacy-stage > .mdi-client > .window > footer span {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

#legacy-stage > .mdi-client > .window > footer #status {
  width: 100%;
}

#legacy-stage > .mdi-client > .window > footer #network-mode {
  position: relative;
  width: 100%;
}

#legacy-stage > .mdi-client > .window > footer #network-mode.loading {
  height: 14px;
  color: transparent;
  background: var(--es-ui-field);
  border: 1px solid var(--es-ui-shadow);
  border-radius: var(--es-ui-field-radius);
}

#legacy-stage > .mdi-client > .window > footer #network-mode.loading::after {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  left: -42%;
  width: 42%;
  background: var(--es-ui-highlight);
  border-radius: max(1px, calc(var(--es-ui-field-radius) - 2px));
  animation: es-load-progress 1.15s ease-in-out infinite;
}

@keyframes es-load-progress {
  0% { left: -42%; }
  100% { left: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  #legacy-stage > .mdi-client > .window > footer #network-mode.loading::after {
    left: 0;
    width: 58%;
    animation: none;
  }
}

#legacy-stage > .mdi-client > .window > footer .size-grip {
  margin-left: 0;
  cursor: se-resize;
  user-select: none;
}

/* Resize affordances */
#legacy-stage > .mdi-client > .window > .resize-handle {
  position: absolute;
  z-index: 15;
  display: block;
  background: transparent;
  touch-action: none;
}
#legacy-stage > .mdi-client > .window > .resize-n,
#legacy-stage > .mdi-client > .window > .resize-s { left: 8px; right: 8px; height: 6px; }
#legacy-stage > .mdi-client > .window > .resize-n { top: 0; cursor: n-resize; }
#legacy-stage > .mdi-client > .window > .resize-s { bottom: 0; cursor: s-resize; }
#legacy-stage > .mdi-client > .window > .resize-e,
#legacy-stage > .mdi-client > .window > .resize-w { top: 8px; bottom: 8px; width: 6px; }
#legacy-stage > .mdi-client > .window > .resize-e { right: 0; cursor: e-resize; }
#legacy-stage > .mdi-client > .window > .resize-w { left: 0; cursor: w-resize; }
#legacy-stage > .mdi-client > .window > .resize-ne,
#legacy-stage > .mdi-client > .window > .resize-se,
#legacy-stage > .mdi-client > .window > .resize-sw,
#legacy-stage > .mdi-client > .window > .resize-nw { width: 10px; height: 10px; }
#legacy-stage > .mdi-client > .window > .resize-ne { right: 0; top: 0; cursor: ne-resize; }
#legacy-stage > .mdi-client > .window > .resize-se { right: 0; bottom: 0; cursor: se-resize; }
#legacy-stage > .mdi-client > .window > .resize-sw { left: 0; bottom: 0; cursor: sw-resize; }
#legacy-stage > .mdi-client > .window > .resize-nw { left: 0; top: 0; cursor: nw-resize; }
#legacy-stage > .mdi-client > .window.maximized > .resize-handle,
#legacy-stage > .mdi-client > .window.minimized > .resize-handle { display: none; }

body.moving-window,
body.moving-window *,
body.moving-dialog,
body.moving-dialog * { user-select: none !important; }
body.moving-window,
body.moving-window * { cursor: move !important; }
body.moving-dialog,
body.moving-dialog * { cursor: move !important; }

#legacy-stage > .mdi-client > .window.rubber-resize-hidden,
#legacy-stage > .mdi-client > .workspace-generated.rubber-resize-hidden {
  opacity: 0 !important;
}

#legacy-stage > .mdi-client > .move-outline {
  position: absolute;
  z-index: 190000;
  pointer-events: none;
  border: 2px solid var(--es-ui-outline-dark);
}

/* Maximized child merges into shell area. */
#legacy-stage > .mdi-client > .window.maximized,
body.workspace-child #legacy-stage > .mdi-client > .window.maximized {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  grid-template-rows: auto auto minmax(0, 1fr) auto !important;
}

#legacy-stage > .mdi-client > .window.maximized > .titlebar,
body.workspace-child #legacy-stage > .mdi-client > .window.maximized > .titlebar {
  display: none !important;
}

#legacy-stage > .mdi-client > .workspace-generated {
  position: absolute;
  z-index: 10;
  overflow: hidden;
  background: var(--es-ui-face);
  border: 1px solid var(--es-ui-shadow);
  border-radius: 4px;
  box-shadow: var(--es-ui-window-shadow);
}

#legacy-stage > .mdi-client > .workspace-generated > iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

#legacy-stage > .mdi-client > .workspace-generated.maximized {
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

#legacy-stage > .mdi-client > .window.minimized,
#legacy-stage > .mdi-client > .workspace-generated.minimized {
  display: none !important;
  visibility: hidden !important;
}

#legacy-stage > .mdi-client > .desktop-icons {
  position: absolute;
  z-index: 500;
  left: 12px;
  right: 12px;
  bottom: 10px;
  display: flex;
  flex-flow: row wrap;
  gap: 8px;
  align-items: flex-end;
  pointer-events: none;
}

#legacy-stage > .mdi-client > .desktop-icons .desktop-window-icon {
  pointer-events: auto;
  width: 96px;
  padding: 6px;
  color: var(--es-ui-desktop-text);
  background: transparent;
  border-color: transparent;
}

#legacy-stage > .mdi-client > .desktop-icons .desktop-window-icon img {
  display: block;
  max-width: 32px;
  max-height: 32px;
  margin: 0 auto 4px;
}

/* Workspace-child documents */
body.workspace-child #app-titlebar,
body.workspace-child #menubar,
body.workspace-child #app-statusbar {
  display: none !important;
}
body.workspace-child #legacy-stage {
  display: block;
  width: 100%;
  height: 100%;
}
body.workspace-child #legacy-stage > .mdi-client {
  width: 100%;
  height: 100%;
  padding: 0;
}
body.workspace-child #legacy-stage > .mdi-client > .window {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  border-radius: 0;
}
body.workspace-child #legacy-stage > .mdi-client .closed-message {
  display: none !important;
}

/* Dialogs */
#legacy-stage > .modal {
  position: fixed;
  z-index: 300000;
  inset: 0;
  background: var(--es-ui-modal-overlay);
}

#legacy-stage > .modal > .dialog {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(560px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  overflow: hidden;
  transform: translate(-50%, -50%);
  padding: 0;
  background: var(--es-ui-face);
  border: 1px solid var(--es-ui-shadow);
  border-radius: 8px;
  box-shadow: var(--es-ui-window-shadow);
}

#legacy-stage > .modal .dialog-title {
  display: flex;
  align-items: center;
  height: 16px;
  padding: 1px 5px;
  background: var(--es-ui-title);
  color: var(--es-ui-title-text);
  border-bottom: 1px solid var(--es-ui-shadow);
  cursor: move;
  user-select: none;
}

#legacy-stage > .modal .dialog-title > span {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-weight: 600;
  text-align: left;
}

#legacy-stage > .modal .dialog-sys {
  width: 16px;
  height: 16px;
  min-width: 16px;
  padding: 0;
  box-sizing: border-box;
}

#legacy-stage > .modal .dialog-sys img {
  display: block;
  width: 12px;
  height: 12px;
  margin: auto;
}

#legacy-stage > .modal .dialog form,
#legacy-stage > .modal .dialog-content,
#legacy-stage > .modal .consent-body,
#legacy-stage > .modal .history-manager,
#legacy-stage > .modal .cookie-manager,
#legacy-stage > .modal .privacy-settings,
#legacy-stage > .modal .privacy-info,
#legacy-stage > .modal .legal-info,
#legacy-stage > .modal .preferences-manager,
#legacy-stage > .modal .network-preferences,
#legacy-stage > .modal .clear-browser-data,
#legacy-stage > .modal .profile-backup {
  display: grid;
  gap: 10px;
  min-width: 0;
}

#legacy-stage > .modal .dialog form,
#legacy-stage > .modal .consent-body {
  padding: 12px;
}

#legacy-stage > .modal .dialog > form {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
  overflow: hidden;
}

#legacy-stage > .modal .dialog > form > .dialog-content,
#legacy-stage > .modal .dialog > .consent-body {
  min-height: 0;
  overflow: auto;
}

#legacy-stage > .modal .dialog textarea {
  width: 100%;
  height: 210px;
  min-width: 0;
}

#legacy-stage > .modal .dialog-actions,
#legacy-stage > .modal .history-tools,
#legacy-stage > .modal .cookie-tools,
#legacy-stage > .modal .consent-actions,
#legacy-stage > .modal .preference-tools,
#legacy-stage > .modal .storage-cache-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

#legacy-stage > .modal .dialog-actions,
#legacy-stage > .modal .history-tools,
#legacy-stage > .modal .cookie-tools,
#legacy-stage > .modal .consent-actions {
  justify-content: flex-end;
}

#legacy-stage > .modal .dialog-actions button,
#legacy-stage > .modal .consent-actions button,
#legacy-stage > .modal .history-tools button,
#legacy-stage > .modal .cookie-tools button,
#legacy-stage > .modal .preference-tools button,
#legacy-stage > .modal .storage-cache-tools button {
  min-width: 78px;
  min-height: 12px;
  padding: 2px 12px;
}

#legacy-stage > .modal .field {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

#legacy-stage > .modal .field input,
#legacy-stage > .modal .field select {
  min-width: 0;
  min-height: 30px;
  padding: 4px 7px;
}

#legacy-stage > .modal fieldset {
  border: 1px solid var(--es-ui-shadow);
  border-radius: 6px;
}

#legacy-stage > .modal legend {
  padding: 0 4px;
}

#legacy-stage > .modal .checks,
#legacy-stage > .modal .network-choices {
  display: grid;
  gap: 6px;
}

#legacy-stage > .mdi-client .closed-message {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

#legacy-stage > .modal .history-manager select,
#legacy-stage > .modal .cookie-manager select {
  width: 100%;
  height: 164px;
}

#legacy-stage > .modal .history-details div,
#legacy-stage > .modal .cookie-details div {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  min-width: 0;
}

#legacy-stage > .modal .history-details span,
#legacy-stage > .modal .cookie-details span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#legacy-stage > .modal .consent-dialog {
  width: min(600px, calc(100vw - 32px));
}

#legacy-stage > .modal .privacy-choice,
#legacy-stage > .modal .preference-radio,
#legacy-stage > .modal .network-choice {
  display: flex;
  align-items: center;
  gap: 6px;
}

#legacy-stage > .modal .dialog-content .privacy-scroll,
#legacy-stage > .modal .first-run-document {
  max-height: min(360px, 55vh);
  overflow: auto;
  padding: 8px;
  background: var(--es-ui-field);
  border: 1px solid var(--es-ui-shadow);
  border-radius: var(--es-ui-field-radius);
}

/* Tabs */
#legacy-stage > .modal .first-run-tabs,
#legacy-stage > .modal .network-tabs,
#legacy-stage > .modal .storage-tabs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px;
  margin: 0;
}

#legacy-stage > .modal .preferences-manager {
  grid-template-rows: 18px minmax(0, 1fr) auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
}

#legacy-stage > .modal .preference-tabs {
  display: flex;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 4px;
  margin: 0;
  height: 18px;
  min-height: 18px;
}

#legacy-stage > .modal .first-run-tabs button,
#legacy-stage > .modal .preference-tabs button,
#legacy-stage > .modal .network-tabs button,
#legacy-stage > .modal .storage-tabs button {
  min-height: 12px;
  padding: 2px 10px;
}

#legacy-stage > .modal > .dialog.tabbed-dialog {
  height: min(520px, calc(100vh - 32px));
}

#legacy-stage > .modal > .dialog.tabbed-dialog .dialog-content {
  min-height: 0;
  overflow: auto;
}

#legacy-stage > .modal .first-run-tabs button.selected,
#legacy-stage > .modal .preference-tabs button.selected,
#legacy-stage > .modal .network-tabs button.selected,
#legacy-stage > .modal .storage-tabs button.selected,
#legacy-stage > .modal [role="tab"][aria-selected="true"] {
  color: var(--es-ui-highlight-text);
  background: var(--es-ui-highlight);
}

#legacy-stage > .modal .preference-page,
#legacy-stage > .modal .network-page,
#legacy-stage > .modal .storage-page {
  min-height: 0;
  overflow: auto;
  padding: 10px;
  background: var(--es-ui-face);
  border: 1px solid var(--es-ui-shadow);
  border-radius: 6px;
}

#legacy-stage > .modal .preference-page[hidden],
#legacy-stage > .modal .network-page[hidden],
#legacy-stage > .modal .storage-page[hidden] {
  display: none;
}

#legacy-stage > .modal .preference-startup,
#legacy-stage > .modal .preference-color-grid,
#legacy-stage > .modal .preference-font-grid {
  display: grid;
  gap: 8px;
}

#legacy-stage > .modal .preference-color-grid,
#legacy-stage > .modal .preference-font-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#legacy-stage > .modal .preference-color-grid label,
#legacy-stage > .modal .preference-font-grid label {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 8px;
  align-items: center;
}

#legacy-stage > .modal .storage-preferences {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: min(390px, calc(100vh - 150px));
  min-height: 280px;
  overflow: hidden;
}

#legacy-stage > .modal .storage-page {
  overflow: auto;
}

/* Selectable logical-screen compatibility view. The stage keeps the chosen
   virtual monitor dimensions. app.js first normalizes them to a 72-DPI
   presentation and then vertically fits the complete virtual monitor to the
   fullscreen host viewport; wider displays retain side letterboxing. */
body.legacy-view {
  background: var(--es-ui-letterbox) !important;
}

body.legacy-view #legacy-stage {
  position: fixed;
  left: 0;
  top: 0;
  width: var(--legacy-width, 800px) !important;
  min-width: var(--legacy-width, 800px) !important;
  max-width: var(--legacy-width, 800px) !important;
  height: var(--legacy-height, 600px) !important;
  min-height: var(--legacy-height, 600px) !important;
  max-height: var(--legacy-height, 600px) !important;
  overflow: hidden;
  transform-origin: 0 0;
  transform: translate(var(--legacy-left, 0px), var(--legacy-top, 0px)) scale(var(--legacy-scale, 1));
}

body.legacy-view #legacy-stage > .app-menubar {
  width: var(--legacy-width, 800px) !important;
  min-width: var(--legacy-width, 800px) !important;
  max-width: var(--legacy-width, 800px) !important;
  box-sizing: border-box;
}

body.legacy-view #legacy-stage > .modal {
  width: var(--legacy-width, 800px);
  height: var(--legacy-height, 600px);
}

/* Smaller hosts */
@media (max-width: 650px) {
  #legacy-stage > .mdi-client > .window {
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 0;
  }
  #legacy-stage > .mdi-client > .window > .toolbar { overflow-x: auto; }
  #legacy-stage > .mdi-client > .window > #location { grid-template-columns: minmax(0, 1fr) auto; }
  #legacy-stage > .mdi-client > .window > #location label {
    position: absolute;
    clip: rect(0, 0, 0, 0);
  }
  #legacy-stage > .modal .field { grid-template-columns: 1fr; }
  #legacy-stage > .mdi-client > .window > .resize-handle { display: none; }
  #legacy-stage > .mdi-client > .window > footer .size-grip { cursor: default; }
  #legacy-stage > .mdi-client > .window > .titlebar,
  #legacy-stage > .modal .dialog-title { cursor: default; touch-action: auto; }
}

@media (max-width: 520px) {
  #legacy-stage > .modal .preference-color-grid,
  #legacy-stage > .modal .preference-font-grid { grid-template-columns: 1fr; }
  #legacy-stage > .modal .storage-preferences {
    height: min(350px, calc(100vh - 130px));
    min-height: 240px;
  }
}