/* The language and display controls shared by the homepage and every site header. */
:root[data-text="large"] { font-size: 125%; }

.header-tools { display: flex; align-items: center; gap: 4px; }
.lang-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding-inline: 8px; font-size: 0.9375rem; font-weight: 600; text-decoration: none; }
.lang-link:hover { text-decoration: underline; }
.settings-toggle { display: grid; place-items: center; width: 44px; height: 44px; }
/* The "?" menu: the tour, the demo video, and the TOPx criteria page. */
.help-toggle { display: grid; place-items: center; width: 30px; height: 30px; margin: 7px; padding: 0; border: 1.4px solid currentColor; border-radius: 50%; background: none; color: inherit; font: 600 1rem/1 "IBM Plex Sans", system-ui, sans-serif; cursor: pointer; }
.site-help {
  position: fixed;
  inset: 64px var(--gutter, var(--unm-gutter, 16px)) auto auto;
  width: 22rem;
  max-width: calc(100% - 2 * var(--gutter, var(--unm-gutter, 16px)));
  margin: 0;
  padding: 4px 16px;
  border: 1px solid var(--unm-text, var(--unm-nav-text));
  background: var(--unm-background, var(--unm-nav-bg));
  color: var(--unm-text, var(--unm-nav-text));
  font: 400 1rem/1.5 "IBM Plex Sans", system-ui, sans-serif;
}
.site-help ul { margin: 0; padding: 0; list-style: none; }
.site-help li + li { border-top: 1px solid var(--unm-rule, var(--unm-nav-rule)); }
.site-help a, .site-help button { display: flex; align-items: center; min-height: 48px; color: inherit; font-weight: 600; text-decoration: none; }
.site-help a:hover, .site-help button:hover { text-decoration: underline; }
.site-help button { width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; font-weight: 600; text-align: left; cursor: pointer; }
.settings-toggle,
.settings-heading button { padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }

.display-settings {
  position: fixed;
  inset: 12px var(--gutter, var(--unm-gutter, 16px)) auto auto;
  width: 26rem;
  max-width: calc(100% - 2 * var(--gutter, var(--unm-gutter, 16px)));
  max-height: calc(100svh - 24px);
  margin: 0;
  padding: 16px;
  overflow-y: auto;
  border: 1px solid var(--unm-text, var(--unm-nav-text));
  background: var(--unm-background, var(--unm-nav-bg));
  color: var(--unm-text, var(--unm-nav-text));
  font: 400 1rem/1.55 "IBM Plex Sans", system-ui, sans-serif;
}
.display-settings::backdrop { background: rgb(0 0 0 / 35%); }
.display-settings h2,
.display-settings p { margin: 0; }
.settings-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--unm-rule, var(--unm-nav-rule)); }
.settings-heading h2 { font-size: 1.375rem; font-weight: 400; line-height: 1.3; }
.settings-heading button { flex-shrink: 0; width: 44px; height: 44px; font-size: 1.75rem; line-height: 1; }
.setting-group { min-width: 0; margin: 0; padding: 8px 0; border: 0; border-bottom: 1px solid var(--unm-rule, var(--unm-nav-rule)); }
.setting-group legend,
.language-setting > p { float: left; width: 100%; margin-bottom: 4px; padding: 0; color: var(--unm-secondary, var(--unm-nav-secondary)); font-size: 0.875rem; }
.setting-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; clear: both; }
.setting-choices-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.setting-choices label,
.setting-choices a { position: relative; display: flex; align-items: center; min-height: 44px; border-bottom: 2px solid transparent; color: inherit; font-size: 1rem; text-decoration: none; cursor: pointer; }
.setting-choices label:has(input:checked),
.setting-choices a[aria-current] { border-bottom-color: var(--unm-text, var(--unm-nav-text)); font-weight: 600; }
.setting-choices input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.setting-choices label:has(input:focus-visible) { outline: 2px solid var(--unm-accent, var(--unm-nav-accent)); outline-offset: 3px; }
.setting-choices .size-sample-large { font-size: 1.25rem; }
.language-setting { border-bottom: 0; }
.settings-note { color: var(--unm-secondary, var(--unm-nav-secondary)); font-size: 0.875rem; }
:root:not(.js) .needs-js { display: none; }