/*
 * Keep the approved 1920 baseline (16px body/control text, 14.5px secondary
 * text, and 20.5px headings) while gently scaling text on larger logical
 * screens. JavaScript writes --test1-monitor-scale for geometry and the
 * independent --test1-text-scale for typography. Icon glyphs, editor surfaces,
 * and fixed shortcut geometry remain excluded below.
 */

html.hires-text {
  --test1-monitor-scale: 1;
  --test1-text-scale: 1;
  --test1-hires-text-size: calc(16px * var(--test1-text-scale));
  --test1-hires-text-line-height: calc(25px * var(--test1-text-scale));
  --test1-hires-control-size: calc(16px * var(--test1-text-scale));
  --test1-hires-secondary-size: calc(14.5px * var(--test1-text-scale));
  --test1-hires-secondary-line-height: calc(23px * var(--test1-text-scale));
  --test1-hires-subheading-size: calc(16px * var(--test1-text-scale));
  --test1-hires-subheading-line-height: calc(21.3px * var(--test1-text-scale));
  --test1-hires-heading-size: calc(20.5px * var(--test1-text-scale));
  --test1-hires-heading-line-height: calc(26.5px * var(--test1-text-scale));
  --test1-top-menu-item-width: calc(195px * var(--test1-monitor-scale));
  --test1-top-menu-item-height: calc(26px * var(--test1-monitor-scale));
  --test1-top-menu-gap: calc(3px * var(--test1-monitor-scale));
  --test1-header-row-height: calc(30px * var(--test1-monitor-scale));
  --test1-header-control-height: calc(26px * var(--test1-monitor-scale));
  --test1-header-search-width: calc(165px * var(--test1-monitor-scale));
  --test1-header-control-gap: calc(5px * var(--test1-monitor-scale));
  --test1-header-side-padding: calc(8px * var(--test1-monitor-scale));
  --test1-header-home-icon-size: calc(20px * var(--test1-monitor-scale));
  --test1-workspace-tab-row-height: calc(28px * var(--test1-monitor-scale));
  --test1-workspace-tab-body-gap: calc(8px * var(--test1-monitor-scale));
  --test1-workspace-tab-resize-height: 8px;
  --test1-workspace-tab-height: calc(24px * var(--test1-monitor-scale));
  --test1-workspace-tab-line-height: calc(16.2px * var(--test1-monitor-scale));
  --test1-workspace-tab-margin: calc(3px * var(--test1-monitor-scale));
  --test1-workspace-tab-start-padding: calc(2px * var(--test1-monitor-scale));
  --test1-workspace-tab-label-padding: calc(15px * var(--test1-monitor-scale));
  --test1-workspace-tab-close-padding: calc(15px * var(--test1-monitor-scale));
  --test1-domain-badge-width: calc(104px * var(--test1-monitor-scale));
  --test1-domain-badge-compact-width: calc(104px * var(--test1-monitor-scale));
  --test1-domain-badge-height: calc(26px * var(--test1-monitor-scale));
  --test1-domain-badge-gap: calc(10px * var(--test1-monitor-scale));
  --test1-domain-badge-compact-gap: calc(10px * var(--test1-monitor-scale));
  --test1-domain-badge-row-gap: calc(8px * var(--test1-monitor-scale));
  --test1-domain-badge-padding-inline: calc(8px * var(--test1-monitor-scale));
  --test1-memo-tab-height: calc(26px * var(--test1-monitor-scale));
  --test1-memo-tool-height: calc(28px * var(--test1-monitor-scale));
  --test1-memo-control-padding-inline: calc(8px * var(--test1-monitor-scale));
  --test1-native-frame-zoom: var(--test1-monitor-scale);
  --app-top-height: max(70px, calc(
    var(--test1-header-row-height)
    + var(--test1-header-nav-gap)
    + var(--test1-top-menu-item-height)
    + var(--test1-header-bottom-gap)
  ));
  --app-frame-top: var(--app-top-height);
}

html.hires-text body {
  line-height: var(--test1-hires-text-line-height);
}

.test1-hires-text-controls {
  position: fixed;
  right: 8px;
  bottom: 8px;
  z-index: 2147483000;
  display: inline-flex;
  gap: 1px;
  padding: 2px;
  border: 1px solid rgba(148, 163, 184, 0.58);
  border-radius: 5px;
  background: rgba(24, 28, 34, 0.9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.28);
  color: #f3f4f6;
  font: 600 12px/1 "Malgun Gothic", sans-serif;
  opacity: 0.8;
  transition: opacity 120ms ease;
}

.test1-hires-text-controls:hover,
.test1-hires-text-controls:focus-within {
  opacity: 1;
}

.test1-hires-text-controls button {
  box-sizing: border-box;
  min-width: 25px;
  height: 23px;
  margin: 0;
  padding: 0 4px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.test1-hires-text-controls button:hover,
.test1-hires-text-controls button:focus-visible {
  background: rgba(148, 163, 184, 0.25);
  outline: 1px solid rgba(186, 230, 253, 0.9);
  outline-offset: -1px;
}

.test1-hires-text-controls button[aria-pressed="true"] {
  background: rgba(56, 189, 248, 0.24);
  color: #e0f2fe;
}

.test1-hires-text-controls button:disabled {
  cursor: default;
  opacity: 0.38;
}

@media print {
  .test1-hires-text-controls {
    display: none !important;
  }
}

/*
 * The layer plus !important rules beat legacy application declarations while
 * the zero-specificity exclusion list still lets the later heading tiers win.
 */
@layer test1-high-resolution {
  html.hires-text body {
    font-size: var(--test1-hires-text-size) !important;
  }

  html.hires-text body *:not(:where(
    .drawer-shortcut-icon,
    .drawer-shortcut-icon *,
    .drawer-shortcut-icon-badge,
    .material-icons,
    .material-icons-outlined,
    .material-symbols-outlined,
    .material-symbols-rounded,
    .material-symbols-sharp,
    .fa,
    .fas,
    .far,
    .fab,
    [class^="fa-"],
    [class*=" fa-"],
    .glyphicon,
    [class^="glyphicon-"],
    [class*=" glyphicon-"],
    svg,
    svg *,
    .monaco-editor,
    .monaco-editor *,
    .CodeMirror,
    .CodeMirror *,
    .xterm,
    .xterm *,
    [data-hires-text-preserve],
    [data-hires-text-preserve] *
  )) {
    font-size: var(--test1-hires-text-size) !important;
  }

  html.hires-text body :where(
    button,
    input,
    select,
    textarea,
    [role="button"],
    [role="tab"],
    [role="menuitem"],
    #header1,
    #header1 *,
    #divTopMenu,
    #divTopMenu *,
    #divLeftAllMenu,
    #divLeftAllMenu *,
    #divBtns,
    #divBtns *,
    .memo-tab,
    .memo-tab *,
    .memo-tool,
    .memo-tool *,
    .memo-files button,
    .memo-files label,
    .memo-save,
    .cds--label
  ):not(:where(
    .drawer-shortcut-icon,
    .drawer-shortcut-icon *,
    .drawer-shortcut-icon-badge,
    .material-icons,
    .material-icons-outlined,
    .material-symbols-outlined,
    .material-symbols-rounded,
    .material-symbols-sharp,
    .fa,
    .fas,
    .far,
    .fab,
    [class^="fa-"],
    [class*=" fa-"],
    .glyphicon,
    [class^="glyphicon-"],
    [class*=" glyphicon-"],
    svg,
    svg *,
    .monaco-editor,
    .monaco-editor *,
    .CodeMirror,
    .CodeMirror *,
    .xterm,
    .xterm *,
    [data-hires-text-preserve],
    [data-hires-text-preserve] *
  )) {
    font-size: var(--test1-hires-control-size) !important;
  }

  html.hires-text body :where(
    small,
    time,
    .medium-meta,
    .deploy-note,
    .memo-status,
    .memo-files table,
    .memo-files th,
    .memo-files td,
    .footer-inner,
    .footer-inner *,
    #websocketMessage,
    [data-hires-text-secondary]
  ):not(:where(
    .drawer-shortcut-icon,
    .drawer-shortcut-icon *,
    .drawer-shortcut-icon-badge,
    .material-icons,
    .material-icons-outlined,
    .material-symbols-outlined,
    .material-symbols-rounded,
    .material-symbols-sharp,
    .fa,
    .fas,
    .far,
    .fab,
    [class^="fa-"],
    [class*=" fa-"],
    .glyphicon,
    [class^="glyphicon-"],
    [class*=" glyphicon-"],
    svg,
    svg *,
    .monaco-editor,
    .monaco-editor *,
    .CodeMirror,
    .CodeMirror *,
    .xterm,
    .xterm *,
    [data-hires-text-preserve],
    [data-hires-text-preserve] *
  )) {
    font-size: var(--test1-hires-secondary-size) !important;
    line-height: var(--test1-hires-secondary-line-height) !important;
  }

  html.hires-text body :where(
    h3,
    h4,
    h5,
    h6,
    legend,
    caption,
    [data-hires-text-subheading]
  ):not(:where(
    .drawer-shortcut-icon,
    .drawer-shortcut-icon *,
    .drawer-shortcut-icon-badge,
    .material-icons,
    .material-icons-outlined,
    .material-symbols-outlined,
    .material-symbols-rounded,
    .material-symbols-sharp,
    .fa,
    .fas,
    .far,
    .fab,
    [class^="fa-"],
    [class*=" fa-"],
    .glyphicon,
    [class^="glyphicon-"],
    [class*=" glyphicon-"],
    svg,
    svg *,
    .monaco-editor,
    .monaco-editor *,
    .CodeMirror,
    .CodeMirror *,
    .xterm,
    .xterm *,
    [data-hires-text-preserve],
    [data-hires-text-preserve] *
  )) {
    font-size: var(--test1-hires-subheading-size) !important;
    line-height: var(--test1-hires-subheading-line-height) !important;
  }

  html.hires-text body :where(
    h1,
    h2,
    [role="heading"],
    [data-hires-text-heading],
    [data-hires-text-title],
    .login--title
  ):not(:where(
    .drawer-shortcut-icon,
    .drawer-shortcut-icon *,
    .drawer-shortcut-icon-badge,
    .material-icons,
    .material-icons-outlined,
    .material-symbols-outlined,
    .material-symbols-rounded,
    .material-symbols-sharp,
    .fa,
    .fas,
    .far,
    .fab,
    [class^="fa-"],
    [class*=" fa-"],
    .glyphicon,
    [class^="glyphicon-"],
    [class*=" glyphicon-"],
    svg,
    svg *,
    .monaco-editor,
    .monaco-editor *,
    .CodeMirror,
    .CodeMirror *,
    .xterm,
    .xterm *,
    [data-hires-text-preserve],
    [data-hires-text-preserve] *
  )) {
    font-size: var(--test1-hires-heading-size) !important;
    line-height: var(--test1-hires-heading-line-height) !important;
  }
}